From 0de7ec91fb15e1ef11eb7ca346b682e3c25d3ea5 Mon Sep 17 00:00:00 2001 From: yvonneyx Date: Tue, 5 Mar 2024 17:20:30 +0800 Subject: [PATCH] feat: update collapsedMarkerType --- packages/g6/__tests__/demo/case/combo.ts | 29 +- .../combo/combo_circle__marker_custom.svg | 314 ++++++++++++++++++ .../g6/__tests__/unit/elements/combo.spec.ts | 5 +- packages/g6/src/elements/combos/base-combo.ts | 13 +- packages/g6/src/utils/combo.ts | 3 + 5 files changed, 354 insertions(+), 10 deletions(-) create mode 100644 packages/g6/__tests__/snapshots/elements/combo/combo_circle__marker_custom.svg diff --git a/packages/g6/__tests__/demo/case/combo.ts b/packages/g6/__tests__/demo/case/combo.ts index ef4c2307f8c..cb10371523b 100644 --- a/packages/g6/__tests__/demo/case/combo.ts +++ b/packages/g6/__tests__/demo/case/combo.ts @@ -57,7 +57,7 @@ export const combo: STDTestCase = async (context) => { 'bottom-left', 'bottom-right', ]; - const COLLAPSED_MARKER_TYPE = ['child-count', 'descendant-count', 'node-count']; + const COLLAPSED_MARKER_TYPE = ['child-count', 'descendant-count', 'node-count', 'custom']; combo.form = (panel) => { const config = { @@ -74,7 +74,10 @@ export const combo: STDTestCase = async (context) => { collapsed: true, collapsedOrigin: config.collapsedOrigin, collapsedMarker: config.collapsedMarker, - collapsedMarkerType: config.collapsedMarkerType, + collapsedMarkerType: + config.collapsedMarkerType === 'custom' + ? (children: any) => children.length.toString() + 'nodes' + : config.collapsedMarkerType, }, }, ]); @@ -89,7 +92,6 @@ export const combo: STDTestCase = async (context) => { collapsed: false, collapsedOrigin: config.collapsedOrigin, collapsedMarker: config.collapsedMarker, - collapsedMarkerType: config.collapsedMarkerType, }, }, ]); @@ -104,7 +106,10 @@ export const combo: STDTestCase = async (context) => { collapsed: true, collapsedOrigin: config.collapsedOrigin, collapsedMarker: config.collapsedMarker, - collapsedMarkerType: config.collapsedMarkerType, + collapsedMarkerType: + config.collapsedMarkerType === 'custom' + ? (children: any) => children.length.toString() + 'nodes' + : config.collapsedMarkerType, }, }, ]); @@ -119,12 +124,25 @@ export const combo: STDTestCase = async (context) => { collapsed: false, collapsedOrigin: config.collapsedOrigin, collapsedMarker: config.collapsedMarker, - collapsedMarkerType: config.collapsedMarkerType, }, }, ]); graph.render(); }, + addRemoveNode: () => { + const node4 = graph.getNodeData('node-4'); + if (node4) { + graph.removeNodeData(['node-4']); + } else { + graph.addNodeData([ + { + id: 'node-4', + style: { parentId: 'combo-2', x: 100, y: 200, fill: 'pink' }, + }, + ]); + } + graph.render(); + }, }; return [ @@ -150,6 +168,7 @@ export const combo: STDTestCase = async (context) => { panel.add(config, 'expandCombo1'), panel.add(config, 'collapseCombo2'), panel.add(config, 'expandCombo2'), + panel.add(config, 'addRemoveNode'), ]; }; diff --git a/packages/g6/__tests__/snapshots/elements/combo/combo_circle__marker_custom.svg b/packages/g6/__tests__/snapshots/elements/combo/combo_circle__marker_custom.svg new file mode 100644 index 00000000000..283aa06d127 --- /dev/null +++ b/packages/g6/__tests__/snapshots/elements/combo/combo_circle__marker_custom.svg @@ -0,0 +1,314 @@ + + + + + + + + + + + + + + + + combo-2 + + + + + + + 2nodes + + + + + + + + + + + + + + + combo-1 + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + node-1 + + + + + + + + + + + + + + + node-2 + + + + + + + + + + + + + + + node-3 + + + + + + + + \ No newline at end of file diff --git a/packages/g6/__tests__/unit/elements/combo.spec.ts b/packages/g6/__tests__/unit/elements/combo.spec.ts index 97f5c0b962c..8c9ba88cde9 100644 --- a/packages/g6/__tests__/unit/elements/combo.spec.ts +++ b/packages/g6/__tests__/unit/elements/combo.spec.ts @@ -138,7 +138,7 @@ describe('combo', () => { ]); graph.render(); }; - const collapseCombo = (type: string) => { + const collapseCombo = (type: string | ((children: any) => string)) => { graph.updateComboData((data) => [ ...data, { @@ -161,5 +161,8 @@ describe('combo', () => { expandCombo(); collapseCombo('node-count'); await expect(graph.getCanvas()).toMatchSnapshot(__filename, '{name}_circle__marker_nodeCount'); + expandCombo(); + collapseCombo((children: any) => children.length.toString() + 'nodes'); + await expect(graph.getCanvas()).toMatchSnapshot(__filename, '{name}_circle__marker_custom'); }); }); diff --git a/packages/g6/src/elements/combos/base-combo.ts b/packages/g6/src/elements/combos/base-combo.ts index bb01daf6b38..20fb33d8560 100644 --- a/packages/g6/src/elements/combos/base-combo.ts +++ b/packages/g6/src/elements/combos/base-combo.ts @@ -1,6 +1,6 @@ import type { AABB, BaseStyleProps, DisplayObject, DisplayObjectConfig, Group } from '@antv/g'; import { deepMix, isEmpty } from '@antv/util'; -import type { BaseComboProps, Position, PrefixObject, STDSize } from '../../types'; +import type { BaseComboProps, Combo, Node, Position, PrefixObject, STDSize } from '../../types'; import { getBBoxHeight, getBBoxWidth, getElementsBBox, getExpandedBBox } from '../../utils/bbox'; import { getCollapsedMarkerText, getXYByCollapsedOrigin } from '../../utils/combo'; import { getXYByPosition } from '../../utils/element'; @@ -12,10 +12,15 @@ import { Icon, IconStyleProps } from '../shapes'; export type CollapsedMarkerStyleProps = IconStyleProps & { /** - * 标记类型，childCount 表示子元素数量，descendantCount 表示后代元素数量, node-count 表示后代节点数量 - * Marker type, child-count means the number of child elements, descendant-count means the number of descendant elements, node-count means the number of descendant nodes + * 标记类型 + * Marker type + * + * - 'child-count': Number of child elements + * - 'descendant-count': Number of descendant elements (including Nodes and Combos) + * - 'node-count': Number of descendant elements (only Nodes) + * - (children: (Node | Combo)[]) => string: Custom function */ - type?: 'child-count' | 'descendant-count' | 'node-count'; + type?: 'child-count' | 'descendant-count' | 'node-count' | ((children: (Node | Combo)[]) => string); }; export type BaseComboStyleProps = BaseComboProps & PrefixObject & { diff --git a/packages/g6/src/utils/combo.ts b/packages/g6/src/utils/combo.ts index e8bc0fd5fe1..e729574d41a 100644 --- a/packages/g6/src/utils/combo.ts +++ b/packages/g6/src/utils/combo.ts @@ -1,4 +1,5 @@ import { AABB } from '@antv/g'; +import { isFunction } from '@antv/util'; import type { CollapsedMarkerStyleProps } from '../elements/combos/base-combo'; import type { BaseComboProps, Combo, Node, Point, Position, Size } from '../types'; import type { STDAnchor } from '../types/anchor'; @@ -116,6 +117,8 @@ export function getCollapsedMarkerText(type: CollapsedMarkerStyleProps['type'], return children.length.toString(); } else if (type === 'node-count') { return getDescendantCount(children, true).toString(); + } else if (isFunction(type)) { + return type(children); } return ''; }