refactor: adjust element controller (#5513)

* refactor(runtime): element split draw to draw and computeDrawData * feat(utils): add parentIdOf util * refactor(runtime): element controller use data flow * refactor(utils): toGraphlibData does a shallow copy * refactor: base-shape set visibility, setVisibility support keep raw attributes * refactor(runtime): refactor element controller, merge runtime style into model * test: update test case and snapshots * test(elements): add test case and snapshots * chore(site): update site demo * refactor(runtime): add syntax sugar for runtime api * test: remove layout case demo * refactor(animation): recover to enter, exit animation stage * refactor(runtime): add frontElement, backElement api * refactor(runtime): add showElement, hideElement API * refactor(behaviors): drag-node adpat new api
antvis · Mar 12, 2024 · d0c92d2 · d0c92d2
1 parent 9646b6f
commit d0c92d2
Show file tree

Hide file tree

Showing 86 changed files with 5,795 additions and 916 deletions.
diff --git a/packages/g6/__tests__/demo/case/element-position.ts b/packages/g6/__tests__/demo/case/element-position.ts
@@ -0,0 +1,55 @@
+import { Graph } from '@/src';
+import type { STDTestCase } from '../types';
+
+export const elementPosition: 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' },
+      ],
+    },
+    node: {
+      style: {
+        size: 20,
+      },
+    },
+  });
+
+  await graph.render();
+
+  elementPosition.form = (panel) => {
+    const config = {
+      element: 'node-1',
+      x: 50,
+      y: 50,
+    };
+
+    const translate = () => {
+      graph.translateElementTo(
+        {
+          [config.element]: [config.x, config.y],
+        },
+        false,
+      );
+    };
+
+    const element = panel.add(config, 'element', ['node-1', 'node-2', 'node-3']).onChange((id: string) => {
+      const position = graph.getElementPosition(id);
+      x.setValue(position[0]);
+      y.setValue(position[1]);
+    });
+    const x = panel.add(config, 'x', 0, 300, 1).onChange(translate);
+    const y = panel.add(config, 'y', 0, 300, 1).onChange(translate);
+    return [element, x, y];
+  };
+
+  return graph;
+};
diff --git a/packages/g6/__tests__/demo/case/element-state.ts b/packages/g6/__tests__/demo/case/element-state.ts
@@ -0,0 +1,87 @@
+import { Graph } from '@/src';
+import type { STDTestCase } from '../types';
+
+export const elementState: STDTestCase = async (context) => {
+  const graph = new Graph({
+    ...context,
+    data: {
+      nodes: [
+        { id: 'node-1', style: { x: 50, y: 50, states: ['active', 'selected'] } },
+        { id: 'node-2', style: { x: 200, y: 50 } },
+        { id: 'node-3', style: { x: 125, y: 150, states: ['active'] } },
+      ],
+      edges: [
+        { id: 'edge-1', source: 'node-1', target: 'node-2', style: { states: ['active'] } },
+        { id: 'edge-2', source: 'node-2', target: 'node-3' },
+        { id: 'edge-3', source: 'node-3', target: 'node-1' },
+      ],
+    },
+    theme: 'light',
+    node: {
+      style: {
+        lineWidth: 1,
+        size: 20,
+      },
+      state: {
+        active: {
+          lineWidth: 2,
+        },
+        selected: {
+          fill: 'pink',
+        },
+      },
+      animation: {
+        update: [{ fields: ['lineWidth', 'fill'] }],
+      },
+    },
+    edge: {
+      style: {
+        lineWidth: 1,
+      },
+      state: {
+        active: {
+          lineWidth: 2,
+          stroke: 'pink',
+        },
+      },
+      animation: {
+        update: [
+          {
+            fields: ['lineWidth', 'stroke'],
+          },
+        ],
+      },
+    },
+  });
+
+  await graph.render();
+
+  elementState.form = (panel) => {
+    const config = {
+      element: 'node-1',
+      active: true,
+      selected: true,
+    };
+
+    const setState = () => {
+      const state: string[] = [];
+      if (config.active) state.push('active');
+      if (config.selected) state.push('selected');
+      graph.setElementState({ [config.element]: state });
+    };
+
+    const element = panel
+      .add(config, 'element', ['node-1', 'node-2', 'node-3', 'edge-1', 'edge-2', 'edge-3'])
+      .onChange((id: string) => {
+        const states = graph.getElementState(id);
+        selected.setValue(states.includes('selected'));
+        active.setValue(states.includes('active'));
+      });
+    const active = panel.add(config, 'active').onChange(setState);
+    const selected = panel.add(config, 'selected').onChange(setState);
+
+    return [element, active, selected];
+  };
+
+  return graph;
+};
diff --git a/packages/g6/__tests__/demo/case/element-visibility.ts b/packages/g6/__tests__/demo/case/element-visibility.ts
@@ -0,0 +1,44 @@
+import { Graph } from '@/src';
+import type { STDTestCase } from '../types';
+
+export const elementVisibility: 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 } },
+        { id: 'node-4', style: { x: 125, y: 200, visibility: 'hidden' } },
+      ],
+      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' },
+      ],
+    },
+    theme: 'light',
+    node: { style: { size: 20, labelText: (d: any) => d.id.at(-1) } },
+    edge: { style: { endArrow: true, labelText: (d: any) => d.id } },
+  });
+
+  await graph.render();
+
+  elementVisibility.form = (panel) => {
+    const config = {
+      element: 'node-1',
+      visible: true,
+    };
+    const element = panel
+      .add(config, 'element', ['node-1', 'node-2', 'node-3', 'node-4', 'edge-1', 'edge-2', 'edge-3'])
+      .onChange((id: string) => {
+        visible.setValue(graph.getElementVisibility(id) !== 'hidden');
+      });
+    const visible = panel.add(config, 'visible').onChange((value: boolean) => {
+      value ? graph.showElement(config.element) : graph.hideElement(config.element);
+    });
+    return [element, visible];
+  };
+
+  return graph;
+};
diff --git a/packages/g6/__tests__/demo/case/index.ts b/packages/g6/__tests__/demo/case/index.ts
@@ -4,6 +4,9 @@ export * from './behavior-zoom-canvas';
 export * from './combo';
 export * from './common-graph';
 export * from './element-change-type';
+export * from './element-position';
+export * from './element-state';
+export * from './element-visibility';
 export * from './graph-event';
 export * from './layout-grid';
 export * from './layout-mds';

diff --git a/packages/g6/__tests__/demo/static/controller-element-visibility.ts b/packages/g6/__tests__/demo/static/controller-element-visibility.ts
@@ -28,8 +28,8 @@ export const controllerElementVisibility: STDTestCase = async (context) => {
   const graph = new Graph(options);
   await graph.render();
 
-  const hide = () => graph.setElementVisibility(['node-3', 'node-2-node-3', 'node-3-node-1'], 'hidden');
-  const show = () => graph.setElementVisibility(['node-3', 'node-2-node-3', 'node-3-node-1'], 'visible');
+  const show = () => graph.showElement(['node-3', 'node-2-node-3', 'node-3-node-1']);
+  const hide = () => graph.hideElement(['node-3', 'node-2-node-3', 'node-3-node-1']);
 
   controllerElementVisibility.form = (panel) => [panel.add({ show }, 'show'), panel.add({ hide }, 'hide')];
 

diff --git a/packages/g6/__tests__/demo/static/controller-element-z-index.ts b/packages/g6/__tests__/demo/static/controller-element-z-index.ts
@@ -22,13 +22,13 @@ export const controllerElementZIndex: STDTestCase = async (context) => {
 
   const graph = new Graph(options);
   await graph.render();
-  const front = () => graph.setElementZIndex('node-2', 'front');
-  const back = () => graph.setElementZIndex('node-2', 'back');
+  const front = () => graph.frontElement('node-2');
+  const back = () => graph.backElement('node-2');
   const to = (zIndex: number) => graph.setElementZIndex('node-2', zIndex);
 
   controllerElementZIndex.form = (panel) => [
-    panel.add({ front }, 'front'),
-    panel.add({ back }, 'back'),
+    panel.add({ front }, 'front').name('Bring Element To Front'),
+    panel.add({ back }, 'back').name('Send Element To Back'),
     panel.add({ to: 0 }, 'to', -10, 10, 1).onChange((zIndex: number) => to(zIndex)),
   ];
 

diff --git a/packages/g6/__tests__/demo/static/edge-cubic-horizontal.ts b/packages/g6/__tests__/demo/static/edge-cubic-horizontal.ts
@@ -64,8 +64,10 @@ export const edgeCubicHorizontal: StaticTestCase = async (context) => {
 
   await graph.render();
 
-  graph.setElementState('line-active', 'active');
-  graph.setElementState('line-selected', 'selected');
-  graph.setElementState('line-highlight', 'highlight');
-  graph.setElementState('line-inactive', 'inactive');
+  graph.setElementState({
+    'line-active': 'active',
+    'line-selected': 'selected',
+    'line-highlight': 'highlight',
+    'line-inactive': 'inactive',
+  });
 };
diff --git a/packages/g6/__tests__/demo/static/edge-cubic-vertical.ts b/packages/g6/__tests__/demo/static/edge-cubic-vertical.ts
@@ -64,8 +64,10 @@ export const edgeCubicVertical: StaticTestCase = async (context) => {
 
   await graph.render();
 
-  graph.setElementState('line-active', 'active');
-  graph.setElementState('line-selected', 'selected');
-  graph.setElementState('line-highlight', 'highlight');
-  graph.setElementState('line-inactive', 'inactive');
+  graph.setElementState({
+    'line-active': 'active',
+    'line-selected': 'selected',
+    'line-highlight': 'highlight',
+    'line-inactive': 'inactive',
+  });
 };
diff --git a/packages/g6/__tests__/demo/static/edge-cubic.ts b/packages/g6/__tests__/demo/static/edge-cubic.ts
@@ -56,8 +56,10 @@ export const edgeCubic: StaticTestCase = async (context) => {
 
   await graph.render();
 
-  graph.setElementState('line-active', 'active');
-  graph.setElementState('line-selected', 'selected');
-  graph.setElementState('line-highlight', 'highlight');
-  graph.setElementState('line-inactive', 'inactive');
+  graph.setElementState({
+    'line-active': 'active',
+    'line-selected': 'selected',
+    'line-highlight': 'highlight',
+    'line-inactive': 'inactive',
+  });
 };
diff --git a/packages/g6/__tests__/demo/static/edge-line.ts b/packages/g6/__tests__/demo/static/edge-line.ts
@@ -56,8 +56,10 @@ export const edgeLine: StaticTestCase = async (context) => {
 
   await graph.render();
 
-  graph.setElementState('line-active', 'active');
-  graph.setElementState('line-selected', 'selected');
-  graph.setElementState('line-highlight', 'highlight');
-  graph.setElementState('line-inactive', 'inactive');
+  graph.setElementState({
+    'line-active': 'active',
+    'line-selected': 'selected',
+    'line-highlight': 'highlight',
+    'line-inactive': 'inactive',
+  });
 };
diff --git a/packages/g6/__tests__/demo/static/edge-quadratic.ts b/packages/g6/__tests__/demo/static/edge-quadratic.ts
@@ -56,8 +56,10 @@ export const edgeQuadratic: StaticTestCase = async (context) => {
 
   await graph.render();
 
-  graph.setElementState('line-active', 'active');
-  graph.setElementState('line-selected', 'selected');
-  graph.setElementState('line-highlight', 'highlight');
-  graph.setElementState('line-inactive', 'inactive');
+  graph.setElementState({
+    'line-active': 'active',
+    'line-selected': 'selected',
+    'line-highlight': 'highlight',
+    'line-inactive': 'inactive',
+  });
 };
diff --git a/packages/g6/__tests__/demo/static/node-circle.ts b/packages/g6/__tests__/demo/static/node-circle.ts
@@ -57,9 +57,11 @@ export const nodeCircle: StaticTestCase = async (context) => {
 
   await graph.render();
 
-  graph.setElementState('circle-active', 'active');
-  graph.setElementState('circle-selected', 'selected');
-  graph.setElementState('circle-highlight', 'highlight');
-  graph.setElementState('circle-inactive', 'inactive');
-  graph.setElementState('circle-disabled', 'disabled');
+  graph.setElementState({
+    'circle-active': 'active',
+    'circle-selected': 'selected',
+    'circle-highlight': 'highlight',
+    'circle-inactive': 'inactive',
+    'circle-disabled': 'disabled',
+  });
 };
diff --git a/packages/g6/__tests__/demo/static/node-diamond.ts b/packages/g6/__tests__/demo/static/node-diamond.ts
@@ -54,9 +54,12 @@ export const nodeDiamond: StaticTestCase = async (context) => {
     animation,
   });
   await graph.render();
-  graph.setElementState('diamond-active', 'active');
-  graph.setElementState('diamond-selected', 'selected');
-  graph.setElementState('diamond-highlight', 'highlight');
-  graph.setElementState('diamond-inactive', 'inactive');
-  graph.setElementState('diamond-disabled', 'disabled');
+
+  graph.setElementState({
+    'diamond-active': 'active',
+    'diamond-selected': 'selected',
+    'diamond-highlight': 'highlight',
+    'diamond-inactive': 'inactive',
+    'diamond-disabled': 'disabled',
+  });
 };
diff --git a/packages/g6/__tests__/demo/static/node-ellipse.ts b/packages/g6/__tests__/demo/static/node-ellipse.ts
@@ -57,9 +57,11 @@ export const nodeEllipse: StaticTestCase = async (context) => {
 
   await graph.render();
 
-  graph.setElementState('ellipse-active', 'active');
-  graph.setElementState('ellipse-selected', 'selected');
-  graph.setElementState('ellipse-highlight', 'highlight');
-  graph.setElementState('ellipse-inactive', 'inactive');
-  graph.setElementState('ellipse-disabled', 'disabled');
+  graph.setElementState({
+    'ellipse-active': 'active',
+    'ellipse-selected': 'selected',
+    'ellipse-highlight': 'highlight',
+    'ellipse-inactive': 'inactive',
+    'ellipse-disabled': 'disabled',
+  });
 };
diff --git a/packages/g6/__tests__/demo/static/node-image.ts b/packages/g6/__tests__/demo/static/node-image.ts
@@ -60,9 +60,12 @@ export const nodeImage: StaticTestCase = async (context) => {
   });
 
   await graph.render();
-  graph.setElementState('image-active', 'active');
-  graph.setElementState('image-selected', 'selected');
-  graph.setElementState('image-highlight', 'highlight');
-  graph.setElementState('image-inactive', 'inactive');
-  graph.setElementState('image-disabled', 'disabled');
+
+  graph.setElementState({
+    'image-active': 'active',
+    'image-selected': 'selected',
+    'image-highlight': 'highlight',
+    'image-inactive': 'inactive',
+    'image-disabled': 'disabled',
+  });
 };
diff --git a/packages/g6/__tests__/demo/static/node-rect.ts b/packages/g6/__tests__/demo/static/node-rect.ts
@@ -58,9 +58,11 @@ export const nodeRect: StaticTestCase = async (context) => {
 
   await graph.render();
 
-  graph.setElementState('rect-active', 'active');
-  graph.setElementState('rect-selected', 'selected');
-  graph.setElementState('rect-highlight', 'highlight');
-  graph.setElementState('rect-inactive', 'inactive');
-  graph.setElementState('rect-disabled', 'disabled');
+  graph.setElementState({
+    'rect-active': 'active',
+    'rect-selected': 'selected',
+    'rect-highlight': 'highlight',
+    'rect-inactive': 'inactive',
+    'rect-disabled': 'disabled',
+  });
 };