refactor: move type config to element.type (#5661)

* refactor: redefine type of id * refactor: move type config
antvis · Apr 18, 2024 · 7efd20e · 7efd20e
1 parent 54bc5f9
commit 7efd20e
Show file tree

Hide file tree

Showing 117 changed files with 664 additions and 579 deletions.
diff --git a/packages/g6-extension-3d/__tests__/demos/behavior-drag-canvas.ts b/packages/g6-extension-3d/__tests__/demos/behavior-drag-canvas.ts
@@ -14,8 +14,8 @@ export const behaviorDragCanvas: TestCase = async (context) => {
     renderer,
     data,
     node: {
+      type: 'sphere',
       style: {
-        type: 'sphere',
         materialType: 'phong',
         labelText: '',
         x: (d) => +d.style!.x! + 250,
@@ -24,9 +24,7 @@ export const behaviorDragCanvas: TestCase = async (context) => {
       palette: 'spectral',
     },
     edge: {
-      style: {
-        type: 'line3d',
-      },
+      type: 'line3d',
     },
     behaviors: [
       'drag-canvas-3d',

diff --git a/packages/g6-extension-3d/__tests__/demos/behavior-observe-canvas.ts b/packages/g6-extension-3d/__tests__/demos/behavior-observe-canvas.ts
@@ -15,8 +15,8 @@ export const behaviorObserveCanvas: TestCase = async (context) => {
     renderer,
     data,
     node: {
+      type: 'sphere',
       style: {
-        type: 'sphere',
         materialType: 'phong',
         labelText: '',
         x: (d) => +d.style!.x! + 250,
@@ -25,9 +25,7 @@ export const behaviorObserveCanvas: TestCase = async (context) => {
       palette: 'spectral',
     },
     edge: {
-      style: {
-        type: 'line3d',
-      },
+      type: 'line3d',
     },
     behaviors: ['zoom-canvas-3d', { key: 'observe-canvas-3d', type: 'observe-canvas-3d' }],
     plugins: [

diff --git a/packages/g6-extension-3d/__tests__/demos/behavior-roll-canvas.ts b/packages/g6-extension-3d/__tests__/demos/behavior-roll-canvas.ts
@@ -14,8 +14,8 @@ export const behaviorRollCanvas: TestCase = async (context) => {
     renderer,
     data,
     node: {
+      type: 'sphere',
       style: {
-        type: 'sphere',
         materialType: 'phong',
         labelText: '',
         x: (d) => +d.style!.x! + 250,
@@ -24,9 +24,7 @@ export const behaviorRollCanvas: TestCase = async (context) => {
       palette: 'spectral',
     },
     edge: {
-      style: {
-        type: 'line3d',
-      },
+      type: 'line3d',
     },
     behaviors: ['roll-canvas-3d'],
     plugins: [

diff --git a/packages/g6-extension-3d/__tests__/demos/behavior-zoom-canvas.ts b/packages/g6-extension-3d/__tests__/demos/behavior-zoom-canvas.ts
@@ -14,8 +14,8 @@ export const behaviorZoomCanvas: TestCase = async (context) => {
     renderer,
     data,
     node: {
+      type: 'sphere',
       style: {
-        type: 'sphere',
         materialType: 'phong',
         labelText: '',
         x: (d) => +d.style!.x! + 250,
@@ -24,9 +24,7 @@ export const behaviorZoomCanvas: TestCase = async (context) => {
       palette: 'spectral',
     },
     edge: {
-      style: {
-        type: 'line3d',
-      },
+      type: 'line3d',
     },
     behaviors: ['zoom-canvas-3d'],
     plugins: [

diff --git a/packages/g6-extension-3d/__tests__/demos/layer-top.ts b/packages/g6-extension-3d/__tests__/demos/layer-top.ts
@@ -17,8 +17,8 @@ export const layerTop: TestCase = async (context) => {
   data.nodes = nodes.map(({ name, pos, layer }: any) => ({
     id: name,
     data: { layer },
+    type: 'sphere',
     style: {
-      type: 'sphere',
       radius: 10,
       color: colors[layer - 1],
       materialType: 'phong',
@@ -29,8 +29,8 @@ export const layerTop: TestCase = async (context) => {
   new Array(3).fill(0).forEach((_, i) => {
     data.nodes!.push({
       id: `plane-${i + 1}`,
+      type: 'plane',
       style: {
-        type: 'plane',
         size: 1000,
         color: colors[i],
         y: -300 + 300 * i + 10,
@@ -50,12 +50,9 @@ export const layerTop: TestCase = async (context) => {
     y: 100,
     data,
     zoom: 0.4,
-    node: {
-      style: {},
-    },
     edge: {
+      type: 'line3d',
       style: {
-        type: 'line3d',
         lineWidth: 5,
       },
     },

diff --git a/packages/g6-extension-3d/__tests__/demos/layout-d3-force-3d.ts b/packages/g6-extension-3d/__tests__/demos/layout-d3-force-3d.ts
@@ -19,8 +19,8 @@ export const layoutD3Force3D: TestCase = async (context) => {
       type: 'd3-force-3d',
     },
     node: {
+      type: 'sphere',
       style: {
-        type: 'sphere',
         materialType: 'phong',
       },
       palette: {
@@ -30,9 +30,7 @@ export const layoutD3Force3D: TestCase = async (context) => {
       },
     },
     edge: {
-      style: {
-        type: 'line3d',
-      },
+      type: 'line3d',
     },
     behaviors: ['observe-canvas-3d', 'zoom-canvas-3d'],
     plugins: [

diff --git a/packages/g6-extension-3d/__tests__/demos/position.ts b/packages/g6-extension-3d/__tests__/demos/position.ts
@@ -30,17 +30,15 @@ export const positionValidate: TestCase = async (context) => {
       ],
     },
     node: {
+      type: 'sphere',
       style: {
-        type: 'sphere',
         materialType: 'phong',
         labelText: '',
       },
       palette: 'spectral',
     },
     edge: {
-      style: {
-        type: 'line3d',
-      },
+      type: 'line3d',
     },
     behaviors: ['drag-canvas-3d'],
     plugins: [

diff --git a/packages/g6-extension-3d/__tests__/demos/shapes.ts b/packages/g6-extension-3d/__tests__/demos/shapes.ts
@@ -1,47 +1,51 @@
-import { Graph, register } from '@antv/g6';
-import { Capsule, Cone, Cube, Cylinder, Light, Plane, Sphere, Torus, renderer } from '../../src';
+import type { NodeData } from '@antv/g6';
+import { ExtensionCategory, Graph, register } from '@antv/g6';
+import { Capsule, Cone, Cube, Cylinder, Light, ObserveCanvas3D, Plane, Sphere, Torus, renderer } from '../../src';
 
 export const shapes: TestCase = async (context) => {
-  register('plugin', '3d-light', Light);
-  register('node', 'sphere', Sphere);
-  register('node', 'plane', Plane);
-  register('node', 'cylinder', Cylinder);
-  register('node', 'cone', Cone);
-  register('node', 'cube', Cube);
-  register('node', 'capsule', Capsule);
-  register('node', 'torus', Torus);
+  register(ExtensionCategory.PLUGIN, '3d-light', Light);
+  register(ExtensionCategory.NODE, 'sphere', Sphere);
+  register(ExtensionCategory.NODE, 'plane', Plane);
+  register(ExtensionCategory.NODE, 'cylinder', Cylinder);
+  register(ExtensionCategory.NODE, 'cone', Cone);
+  register(ExtensionCategory.NODE, 'cube', Cube);
+  register(ExtensionCategory.NODE, 'capsule', Capsule);
+  register(ExtensionCategory.NODE, 'torus', Torus);
+  register(ExtensionCategory.BEHAVIOR, 'observe-canvas-3d', ObserveCanvas3D);
+
+  const nodes: NodeData[] = [
+    {
+      id: '1',
+      type: 'sphere',
+      style: {
+        texture: 'https://mdn.alipayobjects.com/huamei_qa8qxu/afts/img/A*cdTdTI2bNl8AAAAAAAAAAAAADmJ7AQ/original',
+      },
+    },
+    { id: '2', type: 'plane', style: { size: 50 } },
+    { id: '3', type: 'cylinder' },
+    { id: '4', type: 'cone' },
+    {
+      id: '5',
+      type: 'cube',
+      style: {
+        texture: 'https://gw.alipayobjects.com/mdn/rms_6ae20b/afts/img/A*8TlCRIsKeUkAAAAAAAAAAAAAARQnAQ',
+      },
+    },
+    { id: '6', type: 'capsule' },
+    { id: '7', type: 'torus' },
+  ];
 
   const graph = new Graph({
     ...context,
     renderer,
     data: {
-      nodes: [
-        {
-          id: '1',
-          style: {
-            type: 'sphere',
-            texture: 'https://mdn.alipayobjects.com/huamei_qa8qxu/afts/img/A*cdTdTI2bNl8AAAAAAAAAAAAADmJ7AQ/original',
-          },
-        },
-        { id: '2', style: { type: 'plane', size: 50 } },
-        { id: '3', style: { type: 'cylinder' } },
-        { id: '4', style: { type: 'cone' } },
-        {
-          id: '5',
-          style: {
-            type: 'cube',
-            texture: 'https://gw.alipayobjects.com/mdn/rms_6ae20b/afts/img/A*8TlCRIsKeUkAAAAAAAAAAAAAARQnAQ',
-          },
-        },
-        { id: '6', style: { type: 'capsule' } },
-        { id: '7', style: { type: 'torus' } },
-      ],
+      nodes,
     },
     node: {
       style: {
         materialType: 'phong',
-        x: (_, i) => 100 + (i % 5) * 100,
-        y: (_, i) => 100 + Math.floor(i / 5) * 100,
+        x: (d) => 100 + (nodes.findIndex((n) => n.id === d.id) % 5) * 100,
+        y: (d) => 100 + Math.floor(nodes.findIndex((n) => n.id === d.id) / 5) * 100,
       },
     },
     plugins: [
@@ -52,6 +56,7 @@ export const shapes: TestCase = async (context) => {
         },
       },
     ],
+    behaviors: ['observe-canvas-3d'],
   });
 
   await graph.render();

diff --git a/packages/g6-extension-3d/__tests__/demos/solar-system.ts b/packages/g6-extension-3d/__tests__/demos/solar-system.ts
@@ -55,8 +55,8 @@ export const solarSystem: TestCase = async (context) => {
       ],
     },
     node: {
+      type: 'sphere',
       style: {
-        type: 'sphere',
         materialShininess: 0,
         labelText: (d) => d.id,
       },

diff --git a/packages/g6/__tests__/demos/animation-element-edge-cubic.ts b/packages/g6/__tests__/demos/animation-element-edge-cubic.ts
@@ -20,8 +20,8 @@ export const animationElementEdgeCubic: TestCase = async (context) => {
       ],
     },
     edge: {
+      type: 'cubic',
       style: {
-        type: 'cubic',
         lineWidth: 2,
         stroke: '#1890FF',
         labelText: 'cubic-edge',

diff --git a/packages/g6/__tests__/demos/animation-element-edge-quadratic.ts b/packages/g6/__tests__/demos/animation-element-edge-quadratic.ts
@@ -17,8 +17,8 @@ export const animationElementEdgeQuadratic: TestCase = async (context) => {
       ],
     },
     edge: {
+      type: 'quadratic',
       style: {
-        type: 'quadratic',
         lineWidth: 2,
         stroke: '#1890FF',
         labelText: 'quadratic-edge',

diff --git a/packages/g6/__tests__/demos/animation-element-state.ts b/packages/g6/__tests__/demos/animation-element-state.ts
@@ -38,15 +38,15 @@ export const animationElementState: TestCase = async (context) => {
       ],
     },
     node: {
+      type: 'breathing-circle',
       style: {
-        type: 'breathing-circle',
         halo: true,
         haloLineWidth: 5,
       },
     },
     edge: {
+      type: 'fly-line',
       style: {
-        type: 'fly-line',
         lineDash: [10, 10],
       },
     },

diff --git a/packages/g6/__tests__/demos/combo-expand-collapse.ts b/packages/g6/__tests__/demos/combo-expand-collapse.ts
@@ -17,7 +17,11 @@ export const comboExpandCollapse: TestCase = async (context) => {
       combos: [
         {
           id: 'combo-1',
-          style: { type: 'rect', parentId: 'combo-2', collapsed: true },
+          type: 'rect',
+          style: {
+            parentId: 'combo-2',
+            collapsed: true,
+          },
         },
         { id: 'combo-2' },
       ],

diff --git a/packages/g6/__tests__/demos/combo.ts b/packages/g6/__tests__/demos/combo.ts
@@ -14,7 +14,10 @@ export const combo: TestCase = async (context) => {
     combos: [
       {
         id: 'combo-1',
-        style: { type: 'rect', parentId: 'combo-2' },
+        type: 'rect',
+        style: {
+          parentId: 'combo-2',
+        },
       },
       {
         id: 'combo-2',

diff --git a/packages/g6/__tests__/demos/element-change-type.ts b/packages/g6/__tests__/demos/element-change-type.ts
@@ -5,7 +5,7 @@ export const elementChangeType: TestCase = async (context) => {
     ...context,
     data: {
       nodes: [
-        { id: 'node-1', style: { x: 100, y: 100, type: 'rect', color: 'transparent', stroke: '#1783ff' } },
+        { id: 'node-1', type: 'rect', style: { x: 100, y: 100, color: 'transparent', stroke: '#1783ff' } },
         { id: 'node-2', style: { x: 200, y: 100 } },
       ],
       edges: [{ id: 'edge-1', source: 'node-1', target: 'node-2' }],
@@ -22,7 +22,7 @@ export const elementChangeType: TestCase = async (context) => {
     const options = { Circle: 'circle', Rect: 'rect', Diamond: 'diamond', Star: 'star' };
 
     const changeType = (id: string, type: string) => {
-      graph.updateNodeData([{ id, style: { type } }]);
+      graph.updateNodeData([{ id, type }]);
       graph.draw();
     };
 

diff --git a/packages/g6/__tests__/demos/element-edge-arrow.ts b/packages/g6/__tests__/demos/element-edge-arrow.ts
@@ -26,8 +26,8 @@ export const elementEdgeArrow: TestCase = async (context) => {
     ...context,
     data,
     edge: {
+      type: 'line', // 👈🏻 Edge shape type.
       style: {
-        type: 'line', // 👈🏻 Edge shape type.
         labelText: (d) => d.id!,
         labelBackground: true,
         endArrow: true,

diff --git a/packages/g6/__tests__/demos/element-edge-cubic-horizontal.ts b/packages/g6/__tests__/demos/element-edge-cubic-horizontal.ts
@@ -42,8 +42,8 @@ export const elementEdgeCubicHorizontal: TestCase = async (context) => {
       },
     },
     edge: {
+      type: 'cubic-horizontal', // 👈🏻 Edge shape type.
       style: {
-        type: 'cubic-horizontal', // 👈🏻 Edge shape type.
         labelText: (d) => d.id!,
         labelBackground: true,
         endArrow: true,

diff --git a/packages/g6/__tests__/demos/element-edge-cubic-vertical.ts b/packages/g6/__tests__/demos/element-edge-cubic-vertical.ts
@@ -42,8 +42,8 @@ export const elementEdgeCubicVertical: TestCase = async (context) => {
       },
     },
     edge: {
+      type: 'cubic-vertical', // 👈🏻 Edge shape type.
       style: {
-        type: 'cubic-vertical', // 👈🏻 Edge shape type.
         labelText: (d) => d.id!,
         labelBackground: true,
         endArrow: true,

diff --git a/packages/g6/__tests__/demos/element-edge-cubic.ts b/packages/g6/__tests__/demos/element-edge-cubic.ts
@@ -36,8 +36,8 @@ export const elementEdgeCubic: TestCase = async (context) => {
     ...context,
     data,
     edge: {
+      type: 'cubic', // 👈🏻 Edge shape type.
       style: {
-        type: 'cubic', // 👈🏻 Edge shape type.
         labelText: (d) => d.id!,
         labelBackground: true,
         endArrow: true,

diff --git a/packages/g6/__tests__/demos/element-edge-custom-arrow.ts b/packages/g6/__tests__/demos/element-edge-custom-arrow.ts
@@ -39,8 +39,8 @@ export const elementEdgeCustomArrow: TestCase = async (context) => {
     ...context,
     data,
     edge: {
+      type: 'line', // 👈🏻 Edge shape type.
       style: {
-        type: 'line', // 👈🏻 Edge shape type.
         color: '#F6BD16',
         labelText: (d) => d.id!,
         labelBackground: true,