feat: adapt combo, add drag-element / collapse-expand behaviors (#5543)

* refactor(runtime): merge into getChildrenData, getComboData, add get getAncestorsData * refactor(runtime): move translate logic from graph to data controller * feat(utils): add positionOf util * refactor(runtime): adjust the order of drawing combos * refactor(elements): sync combo position to model, adjust combo size calc * refactor(utils): dfs provide depth info * refactor(elements): combo sync position and zIndex * feat(utils): add zIndexOf util * refactor(runtime): refactor data/element controller to fit combo update * test: assign graph into window.graph * refactor(elements): combo use childrenData to get marker text * refactor(elements): filter zIndex from graphicStyle * feat(utils): add getSubgraphRelatedEdges util * refactor(animation): add combo-collapse-expand animation * refactor(runtime): add combo collapse and expand flow * fix: fix issue in data controller and base-combo * test: update test case and snapshots * feat(behaviors): support click collapse-expand, drag-combo * refactor: merge drag node and drag combo into drag element * fix(behaviors): fix issue drag element between combo wont update * test(behaviors): add drag-element test case and snapshots * test: fix snapshot * test: update test case and snapshots * fix: fix format and types * chore: adjust drag-node to drag element
antvis · Mar 15, 2024 · a0c131b · a0c131b
1 parent d36ae29
commit a0c131b
Show file tree

Hide file tree

Showing 193 changed files with 10,776 additions and 4,185 deletions.
diff --git a/...__tests__/demo/case/behavior-drag-node.ts → ...ests__/demo/case/behavior-drag-element.ts b/...__tests__/demo/case/behavior-drag-node.ts → ...ests__/demo/case/behavior-drag-element.ts
@@ -23,7 +23,7 @@ export const behaviorDragNode: STDTestCase = async (context) => {
     edge: {
       style: { endArrow: true },
     },
-    behaviors: [{ type: 'drag-node' }],
+    behaviors: [{ type: 'drag-element' }],
   });
 
   await graph.render();
@@ -35,7 +35,7 @@ export const behaviorDragNode: STDTestCase = async (context) => {
       shadow: false,
     };
     const handleChange = () => {
-      graph.setBehaviors([{ type: 'drag-node', ...config }]);
+      graph.setBehaviors([{ type: 'drag-element', ...config }]);
     };
     return [
       panel.add(config, 'enable').onChange(handleChange),

diff --git a/packages/g6/__tests__/demo/case/combo-expand-collapse.ts b/packages/g6/__tests__/demo/case/combo-expand-collapse.ts
@@ -0,0 +1,81 @@
+import { Graph } from '@/src';
+import { isObject } from '@antv/util';
+import type { STDTestCase } from '../types';
+
+export const comboExpandCollapse: STDTestCase = async (context) => {
+  const graph = new Graph({
+    ...context,
+    data: {
+      nodes: [
+        { id: 'node-1', style: { parentId: 'combo-2', x: 120, y: 100 } },
+        { id: 'node-2', style: { parentId: 'combo-1', x: 300, y: 200 } },
+        { id: 'node-3', style: { parentId: 'combo-1', x: 200, y: 300 } },
+      ],
+      edges: [
+        { id: 'edge-1', source: 'node-1', target: 'node-2' },
+        { id: 'edge-2', source: 'node-2', target: 'node-3' },
+      ],
+      combos: [
+        {
+          id: 'combo-1',
+          style: { type: 'rect', parentId: 'combo-2', collapsed: true },
+        },
+        { id: 'combo-2' },
+      ],
+    },
+    node: {
+      style: {
+        labelText: (d) => d.id,
+      },
+    },
+    combo: {
+      style: {
+        labelText: (d) => d.id,
+        lineDash: 0,
+        collapsedLineDash: [5, 5],
+      },
+    },
+    behaviors: [{ type: 'drag-element' }, 'collapse-expand'],
+  });
+
+  await graph.render();
+
+  comboExpandCollapse.form = (panel) => {
+    const config = {
+      element: 'combo-1',
+      dropEffect: 'move',
+      collapse: () => graph.collapse(config.element),
+      expand: () => graph.expand(config.element),
+    };
+
+    return [
+      panel
+        .add(config, 'element', {
+          'combo-1': 'combo-1',
+          'combo-2': 'combo-2',
+          'combo-3': 'combo-3',
+          'combo-4': 'combo-4',
+        })
+        .name('Combo'),
+      panel.add(config, 'collapse').name('Collapse'),
+      panel.add(config, 'expand').name('Expand'),
+      panel.add(config, 'dropEffect', ['link', 'move', 'none']).onChange((value: string) => {
+        graph.setBehaviors((behaviors) => {
+          return behaviors.map((behavior) => {
+            if (isObject(behavior) && behavior.type === 'drag-element') {
+              return {
+                ...behavior,
+                dropEffect: value,
+              };
+            }
+            return behavior;
+          });
+        });
+      }),
+    ];
+  };
+
+  Object.assign(window, { graph });
+
+  return graph;
+};
diff --git a/packages/g6/__tests__/demo/case/combo.ts b/packages/g6/__tests__/demo/case/combo.ts
@@ -19,9 +19,6 @@ export const combo: STDTestCase = async (context) => {
       },
       {
         id: 'combo-2',
-        style: {
-          zIndex: -10, // TODO: zIndex?
-        },
       },
     ],
   };
@@ -41,6 +38,7 @@ export const combo: STDTestCase = async (context) => {
         collapsedLineDash: [5, 5],
       },
     },
+    behaviors: ['drag-element'],
   });
 
   await graph.render();
@@ -96,8 +94,7 @@ export const combo: STDTestCase = async (context) => {
         graph.render();
       },
       collapseCombo2: () => {
-        graph.updateComboData((data) => [
-          ...data,
+        graph.updateComboData([
           {
             id: 'combo-2',
             style: {

diff --git a/packages/g6/__tests__/demo/case/edge-polyline.ts b/packages/g6/__tests__/demo/case/edge-polyline.ts
@@ -18,7 +18,7 @@ export const edgePolyline: STDTestCase = async (context) => {
         type: 'polyline',
       },
     },
-    behaviors: [{ type: 'drag-node' }],
+    behaviors: [{ type: 'drag-element' }],
   });
 
   await graph.render();

diff --git a/packages/g6/__tests__/demo/case/element-position-combo.ts b/packages/g6/__tests__/demo/case/element-position-combo.ts
@@ -0,0 +1,39 @@
+import { Graph } from '@/src';
+import type { STDTestCase } from '../types';
+
+export const elementPositionCombo: STDTestCase = async (context) => {
+  const graph = new Graph({
+    ...context,
+    data: {
+      nodes: [
+        { id: 'node-1', style: { x: 100, y: 150, parentId: 'combo-1' } },
+        { id: 'node-2', style: { x: 200, y: 150, parentId: 'combo-1' } },
+        { id: 'node-3', style: { x: 400, y: 200, parentId: 'combo-2' } },
+        { id: 'node-4', style: { x: 150, y: 300, parentId: 'combo-3' } },
+      ],
+      combos: [
+        { id: 'combo-1', style: { parentId: 'combo-2' } },
+        { id: 'combo-2' },
+        { id: 'combo-3', style: { parentId: 'combo-1' } },
+      ],
+    },
+    node: {
+      style: {
+        size: 20,
+        labelWordWrapWidth: 200,
+        labelText: (d) => d.id,
+      },
+    },
+    combo: {
+      style: {
+        labelText: (d) => d.id,
+      },
+    },
+    padding: 20,
+    autoFit: 'view',
+  });
+
+  await graph.render();
+
+  return graph;
+};
diff --git a/packages/g6/__tests__/demo/case/element-z-index.ts b/packages/g6/__tests__/demo/case/element-z-index.ts
@@ -0,0 +1,45 @@
+import { Graph } from '@/src';
+import type { STDTestCase } from '../types';
+
+export const elementZIndex: STDTestCase = async (context) => {
+  const graph = new Graph({
+    ...context,
+    data: {
+      nodes: [
+        { id: 'node-1', style: { x: 50, y: 50 } },
+        { id: 'node-2', style: { x: 200, y: 50 } },
+        { id: 'node-3', style: { x: 125, y: 150 } },
+      ],
+      edges: [
+        { id: 'edge-1', source: 'node-1', target: 'node-2' },
+        { id: 'edge-2', source: 'node-2', target: 'node-3' },
+        { id: 'edge-3', source: 'node-3', target: 'node-1' },
+      ],
+      combos: [
+        { id: 'combo-1', style: { x: 50, y: 250 } },
+        { id: 'combo-2', style: { x: 50, y: 250, parentId: 'combo-1' } },
+        { id: 'combo-3', style: { x: 150, y: 250, parentId: 'combo-2' } },
+        { id: 'combo-4', style: { x: 350, y: 250 } },
+      ],
+    },
+    node: {
+      style: {
+        size: 40,
+        labelText: (d) => d.id,
+        labelWordWrapWidth: 200,
+        color: (d, index) => ['red', 'green', 'blue'][index],
+      },
+    },
+    combo: {
+      style: {
+        labelText: (d) => d.id,
+        color: (d, index: number) => ['pink', 'cyan', 'purple', 'orange'][index],
+      },
+    },
+    behaviors: ['drag-element'],
+  });
+
+  await graph.render();
+
+  return graph;
+};
diff --git a/packages/g6/__tests__/demo/case/index.ts b/packages/g6/__tests__/demo/case/index.ts
@@ -1,14 +1,17 @@
 export * from './behavior-drag-canvas';
-export * from './behavior-drag-node';
+export * from './behavior-drag-element';
 export * from './behavior-zoom-canvas';
 export * from './combo';
+export * from './combo-expand-collapse';
 export * from './common-graph';
 export * from './edge-polyline';
 export * from './element-change-type';
 export * from './element-port';
 export * from './element-position';
+export * from './element-position-combo';
 export * from './element-state';
 export * from './element-visibility';
+export * from './element-z-index';
 export * from './graph-event';
 export * from './layout-circular-basic';
 export * from './layout-circular-configuration-translate';

diff --git a/packages/g6/__tests__/demo/case/layout-circular-configuration-translate.ts b/packages/g6/__tests__/demo/case/layout-circular-configuration-translate.ts
@@ -16,7 +16,7 @@ export const layoutCircularConfigurationTranslate: STDTestCase = async (context)
     layout: {
       type: 'circular',
     },
-    behaviors: ['drag-canvas', 'drag-node'],
+    behaviors: ['drag-canvas', 'drag-element'],
   });
 
   await graph.render();

diff --git a/packages/g6/__tests__/demo/case/layout-combo-combined.ts b/packages/g6/__tests__/demo/case/layout-combo-combined.ts
@@ -22,7 +22,7 @@ export const layoutComboCombined: STDTestCase = async (context) => {
         return { stroke: color || '#99ADD1', lineWidth: size || 1 };
       },
     },
-    behaviors: ['drag-combo', 'drag-node', 'drag-canvas', 'zoom-canvas'],
+    behaviors: ['drag-element', 'drag-canvas', 'zoom-canvas'],
     autoFit: 'view',
   });
 

diff --git a/packages/g6/__tests__/demo/case/layout-compact-box-basic.ts b/packages/g6/__tests__/demo/case/layout-compact-box-basic.ts
@@ -7,7 +7,7 @@ export const layoutCompactBoxBasic: STDTestCase = async (context) => {
     ...context,
     autoFit: 'view',
     data: Utils.treeToGraphData(data),
-    behaviors: ['drag-canvas', 'zoom-canvas', 'drag-node'],
+    behaviors: ['drag-canvas', 'zoom-canvas', 'drag-element'],
     node: {
       style: {
         labelText: (data) => data.id,

diff --git a/packages/g6/__tests__/demo/case/layout-compact-box-left-align.ts b/packages/g6/__tests__/demo/case/layout-compact-box-left-align.ts
@@ -8,7 +8,7 @@ export const layoutCompactBoxTopToBottom: STDTestCase = async (context) => {
     ...context,
     autoFit: 'view',
     data: Utils.treeToGraphData(data),
-    behaviors: ['drag-canvas', 'zoom-canvas', 'drag-node'],
+    behaviors: ['drag-canvas', 'zoom-canvas', 'drag-element'],
     node: {
       style: {
         labelText: (data) => data.id,

diff --git a/packages/g6/__tests__/demo/case/layout-compact-box-top-to-bottom.ts b/packages/g6/__tests__/demo/case/layout-compact-box-top-to-bottom.ts
@@ -45,7 +45,7 @@ export const layoutCompactBoxLeftAlign: STDTestCase = async (context) => {
         return 20;
       },
     },
-    behaviors: ['drag-canvas', 'zoom-canvas', 'drag-node'],
+    behaviors: ['drag-canvas', 'zoom-canvas', 'drag-element'],
     animation: false,
   });
 

diff --git a/packages/g6/__tests__/demo/case/layout-concentric.ts b/packages/g6/__tests__/demo/case/layout-concentric.ts
@@ -12,7 +12,7 @@ export const layoutConcentric: STDTestCase = async (context) => {
       maxLevelDiff: 0.5,
       preventOverlap: true,
     },
-    behaviors: ['zoom-canvas', 'drag-canvas', 'drag-node'],
+    behaviors: ['zoom-canvas', 'drag-canvas', 'drag-element'],
     animation: false,
   });
 

diff --git a/packages/g6/__tests__/demo/case/layout-dagre-flow-combo.ts b/packages/g6/__tests__/demo/case/layout-dagre-flow-combo.ts
@@ -39,7 +39,7 @@ export const layoutDagreFlowCombo: STDTestCase = async (context) => {
       ranksep: 50,
       nodesep: 5,
     },
-    behaviors: ['drag-combo', 'drag-node', 'drag-canvas', 'zoom-canvas'],
+    behaviors: ['drag-element', 'drag-canvas', 'zoom-canvas'],
   });
 
   await graph.render();

diff --git a/packages/g6/__tests__/demo/case/layout-dagre-flow.ts b/packages/g6/__tests__/demo/case/layout-dagre-flow.ts
@@ -31,7 +31,7 @@ export const layoutDagreFlow: STDTestCase = async (context) => {
       ranksep: 70,
       controlPoints: true,
     },
-    behaviors: ['drag-combo', 'drag-node', 'drag-canvas', 'zoom-canvas'],
+    behaviors: ['drag-element', 'drag-canvas', 'zoom-canvas'],
   });
 
   await graph.render();

diff --git a/packages/g6/__tests__/demo/case/layout-dendrogram-basic.ts b/packages/g6/__tests__/demo/case/layout-dendrogram-basic.ts
@@ -25,7 +25,7 @@ export const layoutDendrogramBasic: STDTestCase = async (context) => {
       nodeSep: 36,
       rankSep: 250,
     },
-    behaviors: ['drag-canvas', 'zoom-canvas', 'drag-node', 'collapse-expand-tree'],
+    behaviors: ['drag-canvas', 'zoom-canvas', 'drag-element', 'collapse-expand-tree'],
   });
 
   await graph.render();

diff --git a/packages/g6/__tests__/demo/case/layout-dendrogram-tb.ts b/packages/g6/__tests__/demo/case/layout-dendrogram-tb.ts
@@ -32,7 +32,7 @@ export const layoutDendrogramTb: STDTestCase = async (context) => {
       nodeSep: 40,
       rankSep: 100,
     },
-    behaviors: ['drag-canvas', 'zoom-canvas', 'drag-node', 'collapse-expand-tree'],
+    behaviors: ['drag-canvas', 'zoom-canvas', 'drag-element', 'collapse-expand-tree'],
   });
 
   await graph.render();

diff --git a/packages/g6/__tests__/demo/case/layout-force.ts b/packages/g6/__tests__/demo/case/layout-force.ts
@@ -8,7 +8,7 @@ export const layoutForce: STDTestCase = async (context) => {
     data,
     padding: 20,
     autoFit: 'view',
-    behaviors: ['zoom-canvas', 'drag-canvas', 'drag-node', 'click-select'],
+    behaviors: ['zoom-canvas', 'drag-canvas', 'drag-element', 'click-select'],
     layout: {
       type: 'force',
     },

diff --git a/packages/g6/__tests__/demo/case/layout-fruchterman-basic.ts b/packages/g6/__tests__/demo/case/layout-fruchterman-basic.ts
@@ -17,7 +17,7 @@ export const layoutFruchtermanBasic: STDTestCase = async (context) => {
       gravity: 5,
       speed: 5,
     },
-    behaviors: ['drag-canvas', 'drag-node'],
+    behaviors: ['drag-canvas', 'drag-element'],
   });
 
   await graph.render();

diff --git a/packages/g6/__tests__/demo/case/layout-fruchterman-cluster.ts b/packages/g6/__tests__/demo/case/layout-fruchterman-cluster.ts
@@ -22,7 +22,7 @@ export const layoutFruchtermanCluster: STDTestCase = async (context) => {
       clustering: true,
       nodeClusterBy: 'cluster',
     },
-    behaviors: ['drag-canvas', 'drag-node'],
+    behaviors: ['drag-canvas', 'drag-element'],
   });
 
   await graph.render();

diff --git a/packages/g6/__tests__/demo/case/layout-fruchterman-fix.ts b/packages/g6/__tests__/demo/case/layout-fruchterman-fix.ts
@@ -11,7 +11,7 @@ export const layoutFruchtermanFix: STDTestCase = async (context) => {
       speed: 10,
       maxIteration: 500,
     },
-    behaviors: ['drag-canvas', 'drag-node'],
+    behaviors: ['drag-canvas', 'drag-element'],
   });
 
   graph.on('node:dragstart', function () {

diff --git a/packages/g6/__tests__/demo/case/layout-grid.ts b/packages/g6/__tests__/demo/case/layout-grid.ts
@@ -15,7 +15,7 @@ export const layoutGrid: STDTestCase = async (context) => {
       type: 'grid',
       sortBy: 'cluster',
     },
-    behaviors: ['zoom-canvas', 'drag-canvas', 'drag-node', 'click-select'],
+    behaviors: ['zoom-canvas', 'drag-canvas', 'drag-element', 'click-select'],
   });
 
   await graph.render();

diff --git a/packages/g6/__tests__/demo/case/layout-mds.ts b/packages/g6/__tests__/demo/case/layout-mds.ts
@@ -18,7 +18,7 @@ export const layoutMDS: STDTestCase = async (context) => {
       type: 'mds',
       linkDistance: 100,
     },
-    behaviors: ['drag-node', 'drag-canvas', 'zoom-canvas', 'click-select'],
+    behaviors: ['drag-element', 'drag-canvas', 'zoom-canvas', 'click-select'],
   });
 
   await graph.render();

diff --git a/packages/g6/__tests__/demo/case/layout-radial-basic.ts b/packages/g6/__tests__/demo/case/layout-radial-basic.ts
@@ -16,7 +16,7 @@ export const layoutRadialBasic: STDTestCase = async (context) => {
       type: 'radial',
       unitRadius: 50,
     },
-    behaviors: ['drag-canvas', 'drag-node'],
+    behaviors: ['drag-canvas', 'drag-element'],
   });
 
   await graph.render();