perf: update incremental nodes initial positions for better animations

packages/g6/src/runtime/controller/layout.ts

@@ -362,6 +362,7 @@ export class LayoutController {
 
     const nodeWithPostions = new Map();
     // find the neighbors' mean center as the initial position for the nodes
+    const initNaNPositions: LayoutMapping = { nodes: [], edges: [] };
     layoutData.nodes.forEach((node) => {
       const { x, y } = node.data;
       if (isNaN(x) || isNaN(y)) {
@@ -384,10 +385,12 @@ export class LayoutController {
           node.data.y = center[1] + Math.random();
           node.data.z = Math.random();
         }
+        initNaNPositions.nodes.push(node);
       } else {
         nodeWithPostions.set(node.id, 1);
       }
     });
+    this.updateNodesPosition(initNaNPositions, false, false);
     return nodeWithPostions;
   };
 
@@ -473,13 +476,17 @@ export class LayoutController {
     }
   }
 
-  private updateNodesPosition(positions: LayoutMapping, animate = true) {
+  private updateNodesPosition(
+    positions: LayoutMapping,
+    animate = true,
+    cache = true,
+  ) {
     if (!positions) return;
     const { nodes, edges } = positions;
-    this.previousNodes = new Map();
+    if (cache) this.previousNodes = new Map();
     const nodePositions = nodes.map((node) => {
       const { x, y, z, ...others } = node.data;
-      this.previousNodes.set(node.id, others);
+      if (cache) this.previousNodes.set(node.id, others);
       const data = isNaN(z) ? { x, y } : { x, y, z };
       return {
         id: node.id,

packages/g6/src/stdlib/theme/dark.ts

@@ -71,6 +71,7 @@ export const DarkTheme = {
             fontSize: 16,
             zIndex: 1,
             lod: -1,
+            img: 'https://mdn.alipayobjects.com/huamei_qa8qxu/afts/img/A*7g4nSbYrg6cAAAAAAAAAAAAADmJ7AQ/original',
           },
           anchorShapes: {
             lineWidth: 1,

packages/g6/src/stdlib/theme/light.ts

@@ -74,6 +74,7 @@ export const LightTheme = {
             fontSize: 16,
             zIndex: 1,
             lod: -1,
+            img: 'https://mdn.alipayobjects.com/huamei_qa8qxu/afts/img/A*7g4nSbYrg6cAAAAAAAAAAAAADmJ7AQ/original',
           },
           anchorShapes: {
             lineWidth: 1,

packages/g6/tests/demo/demo/demo.ts

@@ -132,10 +132,12 @@ const create2DGraph = (
   });
   const graph = new ExtGraph({
     container: container as HTMLElement,
-    width,
-    height: 1400,
+    // width,
+    // height: 1400,
+    width: 1150,
+    height: 400,
     renderer: 'webgl',
-    // rendererType,
+    rendererType,
     data: dataFor2D,
     modes: {
       default: [
@@ -210,7 +212,7 @@ const create2DGraph = (
           iconShape:
             degree !== 0
               ? {
-                  img: 'https://gw.alipayobjects.com/zos/basement_prod/012bcf4f-423b-4922-8c24-32a89f8c41ce.svg',
+                  img: 'https://mdn.alipayobjects.com/huamei_qa8qxu/afts/img/A*7g4nSbYrg6cAAAAAAAAAAAAADmJ7AQ/original',
                   fontSize: 12 + degree / 4,
                   opacity: 0.8,
                   lod: labelLod + 2,
@@ -224,7 +226,7 @@ const create2DGraph = (
     },
   });
 
-  graph.zoom(0.15);
+  // graph.zoom(0.15);
   return graph;
 };
 
@@ -242,6 +244,8 @@ const create3DGraph = async () => {
     },
   });
 
+  console.log('create3DGraph', dataFor3D);
+
   const newGraph = new ExtGraph({
     container: container as HTMLDivElement,
     width,
@@ -754,7 +758,7 @@ export default () => {
   const result2d = getDataFor2D(data);
   degrees = result2d.degrees;
   dataFor2D = result2d.data;
-  dataFor3D = getDataFor3D(data3d);
+  dataFor3D = result2d.data; //getDataFor3D(data3d);
 
   graph = create2DGraph();
   const { rendererSelect, themeSelect, customThemeSelect, zoomIn, zoomOut } =

packages/site/examples/feature/features/demo/rendererSwitch.js

@@ -6,8 +6,8 @@ const height = container.scrollHeight || 500;
 
 const renderers = {
   '🐰 Canvas': 'canvas',
-  '🐢 SVG': 'svg',
   '🚀 WebGL': 'webgl',
+  '🐢 SVG': 'svg',
   '⭐️ WebGL-3D': 'webgl-3d',
 };
 
@@ -142,7 +142,7 @@ const create3DGraph = async (data) => {
       {
         type: 'map-node-size',
         field: 'degree',
-        range: [2, 24],
+        range: [40, 100],
       },
     ],
     data,
@@ -228,6 +228,7 @@ const create2DGraph = (renderer, data) => {
     width,
     height,
     renderer,
+    autoFit: 'view',
     transforms: [
       'data-format',
       {
@@ -264,11 +265,10 @@ const create2DGraph = (renderer, data) => {
     node: (innerModel) => {
       const { degree } = innerModel.data;
       let iconLod = 3;
-      if (degree > 40) iconLod = -2;
-      else if (degree > 20) iconLod = -1;
-      else if (degree > 10) iconLod = 0;
-      else if (degree > 5) iconLod = 1;
-      else if (degree > 2) iconLod = 2;
+      if (degree > 40) iconLod = -1;
+      else if (degree > 20) iconLod = 0;
+      else if (degree > 10) iconLod = 1;
+      else if (degree > 5) iconLod = 2;
       return {
         ...innerModel,
         data: {
@@ -290,6 +290,15 @@ const create2DGraph = (renderer, data) => {
                   lod: 'auto',
                 }
               : undefined,
+          iconShape:
+            degree !== 0
+              ? {
+                  img: 'https://mdn.alipayobjects.com/huamei_qa8qxu/afts/img/A*7g4nSbYrg6cAAAAAAAAAAAAADmJ7AQ/original',
+                  fontSize: innerModel.data.keyShape.r,
+                  opacity: 0.8,
+                  lod: iconLod,
+                }
+              : undefined,
         },
       };
     },
@@ -319,11 +328,11 @@ const create2DGraph = (renderer, data) => {
 
 const handleCreateGraph = (renderer, data, prevGraph, tip) => {
   let graph;
-  const func = () => {
+  const func = async () => {
     if (renderer === 'webgl-3d') {
-      graph = create3DGraph(data);
+      graph = await create3DGraph(data);
     } else {
-      graph = create2DGraph(renderer, data);
+      graph = await create2DGraph(renderer, data);
     }
     graph.on('afterrender', (e) => {
       tip.innerHTML = '👌 Done!';