refactor: support pre layout process (#6630)

packages/g6/__tests__/bugs/plugin-minimap-combo-collapsed.spec.ts

@@ -31,6 +31,6 @@ describe('bug: plugin-minimap-combo-collapsed', () => {
 
     await graph.render();
 
-    await expect(graph).toMatchSnapshot(__filename, 'update collapsed combo');
+    await expect(graph).toMatchSnapshot(__filename, 'update-collapsed-combo');
   });
 });

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

@@ -26,6 +26,7 @@ export const behaviorExpandCollapseNode: TestCase = async (context) => {
       type: 'dendrogram',
       nodeSep: 30,
       rankSep: 100,
+      preLayout: false,
     },
     behaviors: [{ type: 'collapse-expand', trigger: 'click', align: false }, 'drag-element'],
   });

packages/g6/__tests__/demos/case-radial-dendrogram.ts

@@ -29,14 +29,12 @@ export const caseRadialDendrogram: TestCase = async (context) => {
         },
       },
     },
-    layout: [
-      {
-        type: 'dendrogram',
-        radial: true,
-        nodeSep: 30,
-        rankSep: 200,
-      },
-    ],
+    layout: {
+      type: 'dendrogram',
+      radial: true,
+      nodeSep: 30,
+      rankSep: 200,
+    },
     behaviors: [
       'drag-canvas',
       'zoom-canvas',

packages/g6/__tests__/demos/element-edge-cubic-radial.ts

@@ -9,14 +9,13 @@ export const elementEdgeCubicRadial: TestCase = async (context) => {
     edge: {
       type: 'cubic-radial',
     },
-    layout: [
-      {
-        type: 'dendrogram',
-        radial: true,
-        nodeSep: 30,
-        rankSep: 200,
-      },
-    ],
+    layout: {
+      type: 'dendrogram',
+      radial: true,
+      nodeSep: 30,
+      rankSep: 200,
+      preLayout: true,
+    },
   });
 
   await graph.render();

packages/g6/__tests__/demos/element-edge-line.ts

@@ -22,6 +22,7 @@ export const elementEdgeLine: TestCase = async (context) => {
       type: 'radial',
       unitRadius: 220,
       linkDistance: 220,
+      preLayout: false,
     },
   });
 

packages/g6/__tests__/demos/layout-dendrogram-basic.ts

@@ -21,6 +21,7 @@ export const layoutDendrogramBasic: TestCase = async (context) => {
       direction: 'LR',
       nodeSep: 36,
       rankSep: 250,
+      preLayout: true,
     },
     behaviors: ['drag-canvas', 'zoom-canvas', 'drag-element', 'collapse-expand'],
   });

packages/g6/__tests__/demos/layout-dendrogram-radial.ts

@@ -11,14 +11,12 @@ export const layoutDendrogramRadial: TestCase = async (context) => {
         labelText: (d) => d.id,
       },
     },
-    layout: [
-      {
-        type: 'dendrogram',
-        radial: true,
-        nodeSep: 30,
-        rankSep: 200,
-      },
-    ],
+    layout: {
+      type: 'dendrogram',
+      radial: true,
+      nodeSep: 30,
+      rankSep: 200,
+    },
   });
 
   await graph.render();

packages/g6/__tests__/demos/layout-dendrogram-tb.ts

@@ -40,6 +40,7 @@ export const layoutDendrogramTb: TestCase = async (context) => {
       direction: 'TB',
       nodeSep: 40,
       rankSep: 100,
+      preLayout: true,
     },
     behaviors: ['drag-canvas', 'zoom-canvas', 'drag-element', 'collapse-expand'],
   });

packages/g6/__tests__/demos/layout-fishbone.ts

@@ -81,6 +81,7 @@ export const layoutFishbone: TestCase = async (context) => {
       type: 'fishbone',
       vGap: 48,
       hGap: 48,
+      direction: 'RL',
     },
     behaviors: ['drag-canvas', 'zoom-canvas', 'drag-element'],
     animation: false,
@@ -91,7 +92,7 @@ export const layoutFishbone: TestCase = async (context) => {
   layoutFishbone.form = (panel) => {
     const config = {
       type: 'fishbone',
-      direction: 'LR',
+      direction: 'RL',
     };
 
     return [
@@ -100,7 +101,7 @@ export const layoutFishbone: TestCase = async (context) => {
         .name('Direction')
         .onChange((value: 'LR' | 'RL') => {
           graph.setLayout((prev) => ({ ...prev, direction: value }));
-          graph.layout();
+          graph.render();
         }),
     ];
   };

packages/g6/__tests__/demos/layout-mindmap-h-custom-side.ts

@@ -29,6 +29,7 @@ export const layoutMindmapHCustomSide: TestCase = async (context) => {
     layout: {
       type: 'mindmap',
       direction: 'H',
+      preLayout: false,
       getHeight: () => {
         return 16;
       },

packages/g6/__tests__/demos/layout-mindmap-h.ts

@@ -28,6 +28,7 @@ export const layoutMindmapH: TestCase = async (context) => {
     layout: {
       type: 'mindmap',
       direction: 'H',
+      preLayout: false,
       getHeight: () => {
         return 16;
       },

packages/g6/__tests__/demos/transform-place-radial-labels.ts

@@ -11,14 +11,13 @@ export const transformPlaceRadialLabels: TestCase = async (context) => {
         labelText: (d) => d.id,
       },
     },
-    layout: [
-      {
-        type: 'dendrogram',
-        radial: true,
-        nodeSep: 30,
-        rankSep: 200,
-      },
-    ],
+    layout: {
+      type: 'dendrogram',
+      radial: true,
+      nodeSep: 30,
+      rankSep: 200,
+      preLayout: false,
+    },
     transforms: ['place-radial-labels'],
   });