feat: support tree expand collapse (#5755)

* test: rename test case

* refactor(behaviors): adjust collapse-expand

* feat(utils): add isCollapsed util

* fix(runtime): avoid unexcepted combo refresh when update node data

* refactor(elements): edge support loop config

* feat(runtime): support simulate layout

* feat(runtime): support collapse and expand tree node

* test(behaviors): add collapse expand node test case

* refactor(runtime): rename collapse expand api name

* refactor: remove collapseOrigin

* refactor(animation): adapat combo animation

packages/g6/__tests__/demos/combo-expand-collapse.ts → packages/g6/__tests__/demos/behavior-expand-collapse-combo.ts

@@ -1,7 +1,7 @@
 import { Graph } from '@/src';
 import { isObject } from '@antv/util';
 
-export const comboExpandCollapse: TestCase = async (context) => {
+export const behaviorExpandCollapseCombo: TestCase = async (context) => {
   const graph = new Graph({
     ...context,
     data: {
@@ -43,7 +43,7 @@ export const comboExpandCollapse: TestCase = async (context) => {
 
   await graph.render();
 
-  comboExpandCollapse.form = (panel) => {
+  behaviorExpandCollapseCombo.form = (panel) => {
     const config = {
       element: 'combo-1',
       dropEffect: 'move',

packages/g6/__tests__/demos/behavior-expand-collapse-node.ts

@@ -0,0 +1,50 @@
+import { Graph, treeToGraphData } from '@/src';
+
+export const behaviorExpandCollapseNode: TestCase = async (context) => {
+  const graph = new Graph({
+    ...context,
+    x: 200,
+    y: 200,
+    data: treeToGraphData({
+      id: 'A',
+      children: [
+        { id: 'B', children: [{ id: 'D' }, { id: 'E' }] },
+        { id: 'C', children: [{ id: 'F' }, { id: 'G' }], style: { collapsed: true } },
+      ],
+    }),
+    node: {
+      style: {
+        labelText: (d) => d.id,
+        labelPlacement: 'right',
+        ports: [{ position: 'center' }],
+      },
+    },
+    edge: {
+      type: 'cubic-horizontal',
+    },
+    layout: {
+      type: 'dendrogram',
+      nodeSep: 30,
+      rankSep: 100,
+    },
+    behaviors: [{ type: 'collapse-expand', trigger: 'click' }, 'drag-element'],
+  });
+
+  await graph.render();
+
+  behaviorExpandCollapseNode.form = (panel) => {
+    const config = {
+      element: 'A',
+      collapse: () => graph.collapseElement(config.element),
+      expand: () => graph.expandElement(config.element),
+    };
+
+    return [
+      panel.add(config, 'element', ['A', 'B', 'C', 'D', 'E', 'F', 'G']).name('Node'),
+      panel.add(config, 'collapse').name('Collapse'),
+      panel.add(config, 'expand').name('Expand'),
+    ];
+  };
+
+  return graph;
+};

packages/g6/__tests__/demos/combo.ts

@@ -44,23 +44,11 @@ export const combo: TestCase = async (context) => {
   await graph.render();
 
   const COMBO_TYPE = ['circle', 'rect'];
-  const COLLAPSED_ORIGIN = [
-    'top',
-    'bottom',
-    'left',
-    'right',
-    'center',
-    'top-left',
-    'top-right',
-    'bottom-left',
-    'bottom-right',
-  ];
   const COLLAPSED_MARKER_TYPE = ['child-count', 'descendant-count', 'node-count', 'custom'];
 
   combo.form = (panel) => {
     const config: Record<string, any> = {
       combo2Type: 'circle',
-      collapsedOrigin: 'top',
       collapsedMarker: true,
       collapsedMarkerType: 'child-count',
       collapseCombo1: () => {
@@ -69,7 +57,6 @@ export const combo: TestCase = async (context) => {
             id: 'combo-1',
             style: {
               collapsed: true,
-              collapsedOrigin: config.collapsedOrigin,
               collapsedMarker: config.collapsedMarker,
               collapsedMarkerType:
                 config.collapsedMarkerType === 'custom'
@@ -86,7 +73,6 @@ export const combo: TestCase = async (context) => {
             id: 'combo-1',
             style: {
               collapsed: false,
-              collapsedOrigin: config.collapsedOrigin,
               collapsedMarker: config.collapsedMarker,
             },
           },
@@ -99,7 +85,6 @@ export const combo: TestCase = async (context) => {
             id: 'combo-2',
             style: {
               collapsed: true,
-              collapsedOrigin: config.collapsedOrigin,
               collapsedMarker: config.collapsedMarker,
               collapsedMarkerType:
                 config.collapsedMarkerType === 'custom'
@@ -116,7 +101,6 @@ export const combo: TestCase = async (context) => {
             id: 'combo-2',
             style: {
               collapsed: false,
-              collapsedOrigin: config.collapsedOrigin,
               collapsedMarker: config.collapsedMarker,
             },
           },
@@ -149,7 +133,6 @@ export const combo: TestCase = async (context) => {
         graph.updateComboData([{ ...combo2Data, style: { ...combo2Data.style, type: config.combo2Type } }]);
         graph.render();
       }),
-      panel.add(config, 'collapsedOrigin', COLLAPSED_ORIGIN),
       panel.add(config, 'collapsedMarker'),
       panel.add(config, 'collapsedMarkerType', COLLAPSED_MARKER_TYPE),
       panel.add(config, 'collapseCombo1'),

packages/g6/__tests__/demos/index.ts

@@ -10,13 +10,14 @@ export { behaviorClickElement } from './behavior-click-element';
 export { behaviorCreateEdge } from './behavior-create-edge';
 export { behaviorDragCanvas } from './behavior-drag-canvas';
 export { behaviorDragNode } from './behavior-drag-element';
+export { behaviorExpandCollapseCombo } from './behavior-expand-collapse-combo';
+export { behaviorExpandCollapseNode } from './behavior-expand-collapse-node';
 export { behaviorFocusElement } from './behavior-focus-element';
 export { behaviorHoverElement } from './behavior-hover-element';
 export { behaviorLassoSelect } from './behavior-lasso-select';
 export { behaviorScrollCanvas } from './behavior-scroll-canvas';
 export { behaviorZoomCanvas } from './behavior-zoom-canvas';
 export { combo } from './combo';
-export { comboExpandCollapse } from './combo-expand-collapse';
 export { commonGraph } from './common-graph';
 export { controllerViewport } from './controller-viewport';
 export { elementChangeType } from './element-change-type';

packages/g6/__tests__/demos/layout-compact-box-basic.ts

@@ -34,7 +34,6 @@ export const layoutCompactBoxBasic: TestCase = async (context) => {
         return 100;
       },
     },
-    animation: false,
   });
 
   await graph.render();