docs(site): update element examples

.github/workflows/build.yml

@@ -16,7 +16,7 @@ jobs:
       - name: Install Node.js
         uses: actions/setup-node@v3
         with:
-          node-version: 16
+          node-version: 18
 
       - uses: pnpm/action-setup@v2
         name: Install pnpm

.github/workflows/deploy.yml

@@ -13,7 +13,7 @@ jobs:
       - name: Setup node
         uses: actions/setup-node@v3
         with:
-          node-version: 16
+          node-version: 18
       - uses: pnpm/action-setup@v2
         with:
           version: 8     

packages/g6-extension-react/__tests__/demos/g-node.tsx

@@ -99,9 +99,9 @@ export const GNodeDemo = () => {
           edges: [{ source: 'node-1', target: 'node-2' }],
         },
         node: {
+          type: 'g',
           style: {
-            type: 'g',
-            size: [180, 60], // tell G6 the size of the node
+            size: [180, 60],
             component: (data: NodeData) => <Node data={data} size={[180, 60]} />,
           },
         },

packages/g6-extension-react/__tests__/demos/react-node.tsx

@@ -76,8 +76,8 @@ export const ReactNodeDemo = () => {
       ],
     },
     node: {
+      type: 'react',
       style: {
-        type: 'react',
         size: [240, 100],
         component: (data: NodeData) => (
           <Node

packages/g6/__tests__/bugs/element-combo-drag.spec.ts

@@ -0,0 +1,38 @@
+import { NodeEvent } from '@/src';
+import { createGraph } from '@@/utils';
+
+describe('bugs:element-combo-drag', () => {
+  it('drag combo', async () => {
+    const graph = createGraph({
+      animation: false,
+      data: {
+        nodes: [
+          { id: 'node-0', combo: 'combo-0', style: { x: 100, y: 100 } },
+          { id: 'node-1', combo: 'combo-0', style: { x: 150, y: 100 } },
+          { id: 'node-2', style: { x: 250, y: 100 } },
+        ],
+        edges: [{ source: 'node-1', target: 'node-2' }],
+        combos: [{ id: 'combo-0' }],
+      },
+      behaviors: ['drag-element'],
+    });
+
+    await graph.render();
+
+    await expect(graph).toMatchSnapshot(__filename);
+
+    await graph.collapseElement('combo-0');
+
+    await expect(graph).toMatchSnapshot(__filename, 'collapse-combo-0');
+
+    graph.emit(`node:${NodeEvent.DRAG_START}`, { target: { id: 'node-2' }, targetType: 'node' });
+    graph.emit(`node:${NodeEvent.DRAG}`, { dx: 50, dy: 50 });
+    graph.emit(`node:${NodeEvent.DRAG_END}`, { target: { id: 'node-2' }, targetType: 'node' });
+    await expect(graph).toMatchSnapshot(__filename, 'drag-node-2');
+
+    graph.emit(`node:${NodeEvent.DRAG_START}`, { target: { id: 'combo-0' }, targetType: 'combo' });
+    graph.emit(`node:${NodeEvent.DRAG}`, { dx: 50, dy: 50 });
+    graph.emit(`node:${NodeEvent.DRAG_END}`, { target: { id: 'combo-0' }, targetType: 'combo' });
+    await expect(graph).toMatchSnapshot(__filename, 'drag-combo-0');
+  });
+});

packages/g6/__tests__/unit/runtime/data.spec.ts

@@ -565,14 +565,14 @@ describe('DataController', () => {
 
     controller.addData(clone(data));
 
-    expect(controller.getElementsData(['node-1'])[0]).toEqual(data.nodes[0]);
+    expect(controller.getElementDataById('node-1')).toEqual(data.nodes[0]);
 
-    expect(controller.getElementsData(['edge-1'])[0]).toEqual(data.edges[0]);
+    expect(controller.getElementDataById('edge-1')).toEqual(data.edges[0]);
 
-    expect(controller.getElementsData(['combo-1'])[0]).toEqual(data.combos[0]);
+    expect(controller.getElementDataById('combo-1')).toEqual(data.combos[0]);
 
     expect(() => {
-      controller.getElementsData(['undefined'])[0];
+      controller.getElementDataById('undefined');
     }).toThrow();
   });
 

packages/g6/__tests__/unit/utils/edge.spec.ts

@@ -1,6 +1,7 @@
 import type { ID } from '@/src';
 import { Rect } from '@/src/elements';
 import {
+  findActualConnectNodeData,
   getCubicPath,
   getCurveControlPoint,
   getLabelPositionStyle,
@@ -286,4 +287,28 @@ describe('edge', () => {
       internal: [{ id: 'node-3-node-5', source: 'node-3', target: 'node-5' }],
     });
   });
+
+  it('findActualConnectNodeData', () => {
+    expect(findActualConnectNodeData({ id: 'node-1' }, () => undefined).id).toBe('node-1');
+    expect(
+      findActualConnectNodeData({ id: 'node-1' }, (id) => {
+        if (id === 'node-1') return { id: 'node-2' };
+        return undefined;
+      }).id,
+    ).toBe('node-1');
+    expect(
+      findActualConnectNodeData({ id: 'node-1' }, (id) => {
+        if (id === 'node-1') return { id: 'node-2', style: { collapsed: true } };
+        if (id === 'node-2') return { id: 'node-3' };
+        return undefined;
+      }).id,
+    ).toBe('node-2');
+    expect(
+      findActualConnectNodeData({ id: 'node-1' }, (id) => {
+        if (id === 'node-1') return { id: 'node-2' };
+        if (id === 'node-2') return { id: 'node-3', style: { collapsed: true } };
+        return undefined;
+      }).id,
+    ).toBe('node-3');
+  });
 });

packages/g6/src/runtime/data.ts

@@ -169,7 +169,7 @@ export class DataController {
   }
 
   public getDescendantsData(id: ID): NodeLikeData[] {
-    const root = this.getElementsData([id])[0] as NodeLikeData;
+    const root = this.getElementDataById(id) as NodeLikeData;
     const data: NodeLikeData[] = [];
     dfs(
       root,
@@ -207,7 +207,7 @@ export class DataController {
    * @param elementType - <zh/> 元素类型 | <en/> element type
    * @returns <zh/> 元素数据 | <en/> element data
    */
-  public getElementData(elementType: ElementType) {
+  public getElementsDataByType(elementType: ElementType) {
     if (elementType === 'node') return this.getNodeData();
     if (elementType === 'edge') return this.getEdgeData();
     if (elementType === 'combo') return this.getComboData();
@@ -218,16 +218,14 @@ export class DataController {
    * <zh/> 根据 ID 获取元素的数据，不用关心元素的类型
    *
    * <en/> Get the data of the element by ID, no need to care about the type of the element
-   * @param ids - <zh/> 元素 ID 数组 | <en/> element ID array
+   * @param id - <zh/> 元素 ID 数组 | <en/> element ID array
    * @returns <zh/> 元素数据 | <en/> data of the element
    */
-  public getElementsData(ids: ID[]): ElementDatum[] {
-    return ids.map((id) => {
-      const type = this.getElementType(id);
-      if (type === 'node') return this.getNodeData([id])[0];
-      else if (type === 'edge') return this.getEdgeData([id])[0];
-      return this.getComboData([id])[0];
-    });
+  public getElementDataById(id: ID): ElementDatum {
+    const type = this.getElementType(id);
+    if (type === 'node') return this.getNodeData([id])[0];
+    else if (type === 'edge') return this.getEdgeData([id])[0];
+    return this.getComboData([id])[0];
   }
 
   /**
@@ -247,12 +245,12 @@ export class DataController {
   }
 
   public getElementDataByState(elementType: ElementType, state: string) {
-    const elementData = this.getElementData(elementType);
+    const elementData = this.getElementsDataByType(elementType);
     return elementData.filter((datum) => datum.states?.includes(state));
   }
 
   public getElementState(id: ID): State[] {
-    return this.getElementsData([id])?.[0]?.states || [];
+    return this.getElementDataById(id)?.states || [];
   }
 
   public hasNode(id: ID) {
@@ -552,7 +550,7 @@ export class DataController {
   }
 
   public getElementPosition(id: ID): Position {
-    const datum = this.getElementsData([id])[0] as NodeLikeData;
+    const datum = this.getElementDataById(id) as NodeLikeData;
     return positionOf(datum);
   }