feat: built-in snake layout (#6587)

* feat: snake layout

* test: add snake layout unit tests

* docs: add snake layout docs

* fix: typo

* chore: update deps

* fix: update remarks

package.json

@@ -48,7 +48,7 @@
     "@types/d3-hierarchy": "^3.1.7",
     "@types/jest": "^29.5.14",
     "@types/jsdom": "^21.1.7",
-    "@types/node": "^20.17.8",
+    "@types/node": "^20.17.9",
     "@typescript-eslint/eslint-plugin": "^6.21.0",
     "@typescript-eslint/parser": "^6.21.0",
     "chalk": "^4.1.2",
@@ -69,7 +69,7 @@
     "prettier-plugin-organize-imports": "^3.2.4",
     "prettier-plugin-packagejson": "^2.5.6",
     "rimraf": "^5.0.10",
-    "rollup": "^4.27.4",
+    "rollup": "^4.28.0",
     "rollup-plugin-polyfill-node": "^0.13.0",
     "rollup-plugin-visualizer": "^5.12.0",
     "stats.js": "^0.17.0",

packages/g6-extension-react/package.json

@@ -40,7 +40,7 @@
     "@antv/react-g": "^2.0.30"
   },
   "devDependencies": {
-    "@ant-design/icons": "^5.5.1",
+    "@ant-design/icons": "^5.5.2",
     "@antv/g6": "workspace:*",
     "@types/react": "^18.3.12",
     "@types/react-dom": "^18.3.1",

packages/g6/__tests__/demos/index.ts

@@ -120,6 +120,7 @@ export { layoutRadialConfigurationTranslate } from './layout-radial-configuratio
 export { layoutRadialPreventOverlap } from './layout-radial-prevent-overlap';
 export { layoutRadialPreventOverlapUnstrict } from './layout-radial-prevent-overlap-unstrict';
 export { layoutRadialSort } from './layout-radial-sort';
+export { layoutSnake } from './layout-snake';
 export { perf20000Elements } from './perf-20000-elements';
 export { perfFCP } from './perf-fcp';
 export { pluginBackground } from './plugin-background';

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

@@ -98,7 +98,7 @@ export const layoutFishbone: TestCase = async (context) => {
       panel
         .add(config, 'direction', ['LR', 'RL'])
         .name('Direction')
-        .onChange((value: string) => {
+        .onChange((value: 'LR' | 'RL') => {
           graph.setLayout((prev) => ({ ...prev, direction: value }));
           graph.layout();
         }),

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

@@ -0,0 +1,66 @@
+import { Graph } from '@antv/g6';
+
+const data = {
+  nodes: [
+    { id: '0', data: { label: '开始流程', time: '17:00:00' } },
+    { id: '1', data: { label: '流程1', time: '17:00:05' } },
+    { id: '2', data: { label: '流程2', time: '17:00:12' } },
+    { id: '3', data: { label: '流程3', time: '17:00:30' } },
+    { id: '4', data: { label: '流程4', time: '17:02:00' } },
+    { id: '5', data: { label: '流程5', time: '17:02:40' } },
+    { id: '6', data: { label: '流程6', time: '17:05:50' } },
+    { id: '7', data: { label: '流程7', time: '17:10:00' } },
+    { id: '8', data: { label: '流程8', time: '17:11:20' } },
+    { id: '9', data: { label: '流程9', time: '17:15:00' } },
+    { id: '10', data: { label: '流程10', time: '17:30:00' } },
+    { id: '11', data: { label: '流程11' } },
+    { id: '12', data: { label: '流程12' } },
+    { id: '13', data: { label: '流程13' } },
+    { id: '14', data: { label: '流程14' } },
+    { id: '15', data: { label: '流程结束' } },
+  ],
+  edges: [
+    { source: '0', target: '1', data: { done: true } },
+    { source: '1', target: '2', data: { done: true } },
+    { source: '2', target: '3', data: { done: true } },
+    { source: '3', target: '4', data: { done: true } },
+    { source: '4', target: '5', data: { done: true } },
+    { source: '5', target: '6', data: { done: true } },
+    { source: '6', target: '7', data: { done: true } },
+    { source: '7', target: '8', data: { done: true } },
+    { source: '8', target: '9', data: { done: true } },
+    { source: '9', target: '10', data: { done: true } },
+    { source: '10', target: '11', data: { done: false } },
+    { source: '11', target: '12', data: { done: false } },
+    { source: '12', target: '13', data: { done: false } },
+    { source: '13', target: '14', data: { done: false } },
+    { source: '14', target: '15', data: { done: false } },
+  ],
+};
+
+export const layoutSnake: TestCase = async (context) => {
+  const graph = new Graph({
+    ...context,
+    data,
+    node: {
+      style: {
+        labelText: (d) => d.id,
+        labelPlacement: 'center',
+        labelFill: '#fff',
+      },
+    },
+    edge: {
+      style: {
+        endArrow: true,
+      },
+    },
+    layout: {
+      key: 'snake',
+      type: 'snake',
+    },
+  });
+
+  await graph.render();
+
+  return graph;
+};

packages/g6/__tests__/unit/layouts/snake.spec.ts

@@ -0,0 +1,44 @@
+import type { Graph } from '@/src';
+import { layoutSnake } from '@@/demos/layout-snake';
+import { createDemoGraph } from '@@/utils';
+
+describe('snake', () => {
+  let graph: Graph;
+
+  beforeAll(async () => {
+    graph = await createDemoGraph(layoutSnake);
+  });
+
+  afterAll(() => {
+    graph.destroy();
+  });
+
+  it('default', async () => {
+    await expect(graph).toMatchSnapshot(__filename, 'default');
+  });
+
+  it('padding', async () => {
+    graph.setLayout((prev) => ({ ...prev, padding: 20 })), await graph.layout();
+    await expect(graph).toMatchSnapshot(__filename, 'padding-20');
+  });
+
+  it('set cols as 1', async () => {
+    graph.setLayout((prev) => ({ ...prev, padding: 0, cols: 1 })), await graph.layout();
+    await expect(graph).toMatchSnapshot(__filename, 'cols-1');
+  });
+
+  it('set cols as 20', async () => {
+    graph.setLayout((prev) => ({ ...prev, padding: 0, cols: 20 })), await graph.layout();
+    await expect(graph).toMatchSnapshot(__filename, 'cols-20');
+  });
+
+  it('colSep and rowSep', async () => {
+    graph.setLayout((prev) => ({ ...prev, cols: 6, colGap: 50, rowGap: 50 })), await graph.layout();
+    await expect(graph).toMatchSnapshot(__filename, 'gap-50');
+  });
+
+  it('anti-clockwise', async () => {
+    graph.setLayout((prev) => ({ ...prev, clockwise: false })), await graph.layout();
+    await expect(graph).toMatchSnapshot(__filename, 'anti-clockwise');
+  });
+});

packages/g6/src/exports.ts

@@ -73,6 +73,7 @@ export {
   mindmap as MindmapLayout,
   RadialLayout,
   RandomLayout,
+  SnakeLayout,
 } from './layouts';
 export {
   Background,
@@ -181,7 +182,7 @@ export type {
 } from './elements/shapes';
 export type { UpsertHooks } from './elements/shapes/base-shape';
 export type { ContourLabelStyleProps, ContourStyleProps } from './elements/shapes/contour';
-export type { FishboneLayoutOptions } from './layouts';
+export type { FishboneLayoutOptions, SnakeLayoutOptions } from './layouts';
 export type { BaseLayoutOptions, WebWorkerLayoutOptions } from './layouts/types';
 export type { CategoricalPalette } from './palettes/types';
 export type {

packages/g6/src/layouts/fishbone.ts

@@ -1,11 +1,12 @@
 import { isEmpty, memoize } from '@antv/util';
-import { idOf } from '../exports';
+import type { BaseLayoutOptions } from '../layouts/types';
 import type { EdgeData, GraphData, NodeData } from '../spec';
 import type { ElementDatum, ID, Point, Size, STDSize } from '../types';
+import { idOf } from '../utils/id';
 import { parseSize } from '../utils/size';
 import { BaseLayout } from './base-layout';
 
-export interface FishboneLayoutOptions {
+export interface FishboneLayoutOptions extends BaseLayoutOptions {
   /**
    * <zh/> 节点大小
    *

packages/g6/src/layouts/index.ts

@@ -16,4 +16,7 @@ export {
 } from '@antv/layout';
 export { BaseLayout } from './base-layout';
 export { FishboneLayout } from './fishbone';
+export { SnakeLayout } from './snake';
+
 export type { FishboneLayoutOptions } from './fishbone';
+export type { SnakeLayoutOptions } from './snake';