test: add fruchterman layout test (#5530)

* test: add fruchterman layout test

* docs: add fruchterman demo

* fix: eslint error

* chore: fix cr

* chore: remove unused code

* chore: fix cr

packages/g6/__tests__/demo/case/index.ts

@@ -15,6 +15,9 @@ export * from './layout-circular-configuration-translate';
 export * from './layout-circular-degree';
 export * from './layout-circular-division';
 export * from './layout-circular-spiral';
+export * from './layout-fruchterman-basic';
+export * from './layout-fruchterman-cluster';
+export * from './layout-fruchterman-fix';
 export * from './layout-grid';
 export * from './layout-mds';
 export * from './layout-radial-basic';

packages/g6/__tests__/demo/case/layout-fruchterman-basic.ts

@@ -0,0 +1,31 @@
+import { Graph } from '@/src';
+import data from '@@/dataset/cluster.json';
+import type { STDTestCase } from '../types';
+
+export const layoutFruchtermanBasic: STDTestCase = async (context) => {
+  const graph = new Graph({
+    ...context,
+    data,
+    behaviors: ['drag-canvas', 'drag-node'],
+    layout: {
+      type: 'fruchterman',
+      gravity: 5,
+      speed: 5,
+    },
+    node: {
+      style: {
+        size: 30,
+        stroke: '#5B8FF9',
+        fill: '#C6E5FF',
+        lineWidth: 1,
+        labelPlacement: 'center',
+        labelText: (d: any) => d.id,
+        labelBackground: false,
+      },
+    },
+  });
+
+  await graph.render();
+
+  return graph;
+};

packages/g6/__tests__/demo/case/layout-fruchterman-cluster.ts

@@ -0,0 +1,39 @@
+import { Graph } from '@/src';
+import data from '@@/dataset/cluster.json';
+import type { STDTestCase } from '../types';
+
+export const layoutFruchtermanCluster: STDTestCase = async (context) => {
+  const graph = new Graph({
+    ...context,
+    data: { ...data, nodes: data.nodes.map((n) => ({ ...n, cluster: n.data.cluster })) },
+    behaviors: ['drag-canvas', 'drag-node'],
+    layout: {
+      type: 'fruchterman',
+      gravity: 10,
+      speed: 5,
+      clustering: true,
+      nodeClusterBy: 'cluster',
+    },
+    node: {
+      style: {
+        size: 20,
+        stroke: '#5B8FF9',
+        fill: '#C6E5FF',
+        lineWidth: 1,
+        labelPlacement: 'center',
+        labelText: (d: any) => d.id,
+        labelBackground: false,
+      },
+    },
+    edge: {
+      style: {
+        endArrow: true,
+        endArrowPath: 'M 0,0 L 4,2 L 4,-2 Z',
+      },
+    },
+  });
+
+  await graph.render();
+
+  return graph;
+};

packages/g6/__tests__/demo/case/layout-fruchterman-fix.ts

@@ -0,0 +1,42 @@
+import { Graph } from '@/src';
+import data from '@@/dataset/relations.json';
+import type { STDTestCase } from '../types';
+
+export const layoutFruchtermanFix: STDTestCase = async (context) => {
+  const graph = new Graph({
+    ...context,
+    data,
+    behaviors: ['drag-canvas', 'drag-node'],
+    layout: {
+      type: 'fruchterman',
+      speed: 10,
+      maxIteration: 500,
+    },
+    node: {
+      style: {
+        size: 15,
+        stroke: '#5B8FF9',
+        fill: '#C6E5FF',
+        lineWidth: 1,
+      },
+    },
+    edge: {
+      style: {
+        stroke: '#E2E2E2',
+      },
+    },
+  });
+
+  graph.on('node:dragstart', function () {
+    graph.stopLayout();
+  });
+
+  graph.on('node:dragend', function () {
+    // FIXME: 不应该完全重新布局，而是以当前画布数据进行布局
+    graph.layout();
+  });
+
+  await graph.render();
+
+  return graph;
+};