refactor(layout): export d3-force-3d from 3d extension (#5803)

* refactor(layout): export d3-force-3d from 3d extension * refactor(layout): rename d3force to d3-force
2024-12-03 12:18:40 +08:00 · 2024-06-03 17:12:46 +08:00 · 2024-06-03 17:12:46 +08:00 · 133bcc40ea
commit 133bcc40ea
parent 576806e9ce
39 changed files with 46 additions and 54 deletions
--- a/packages/g6-extension-3d/tests/demos/layout-d3-force-3d.ts
+++ b/packages/g6-extension-3d/tests/demos/layout-d3-force-3d.ts
@ -1,11 +1,12 @@
 import { CameraSetting, ExtensionCategory, Graph, register } from '@antv/g6';
-import { Light, Line3D, ObserveCanvas3D, Sphere, ZoomCanvas3D, renderer } from '../../src';
+import { D3Force3DLayout, Light, Line3D, ObserveCanvas3D, Sphere, ZoomCanvas3D, renderer } from '../../src';
 import data from '../dataset/force-3d.json';

 export const layoutD3Force3D: TestCase = async (context) => {
  register(ExtensionCategory.PLUGIN, '3d-light', Light);
  register(ExtensionCategory.NODE, 'sphere', Sphere);
  register(ExtensionCategory.EDGE, 'line3d', Line3D);
+  register(ExtensionCategory.LAYOUT, 'd3-force-3d', D3Force3DLayout);
  register(ExtensionCategory.PLUGIN, 'camera-setting', CameraSetting);
  register(ExtensionCategory.BEHAVIOR, 'zoom-canvas-3d', ZoomCanvas3D);
  register(ExtensionCategory.BEHAVIOR, 'observe-canvas-3d', ObserveCanvas3D);
--- a/packages/g6-extension-3d/package.json
+++ b/packages/g6-extension-3d/package.json
@ -37,6 +37,7 @@
    "@antv/g-plugin-device-renderer": "^2.0.6",
    "@antv/g-plugin-dragndrop": "^2.0.4",
    "@antv/g-webgl": "^2.0.6",
+    "@antv/layout": "^1.2.14-beta.3",
    "@antv/util": "^3.3.7"
  },
  "devDependencies": {
--- a/packages/g6-extension-3d/src/exports.ts
+++ b/packages/g6-extension-3d/src/exports.ts
@ -1,3 +1,4 @@
+export { D3Force3DLayout } from '@antv/layout';
 export { DragCanvas3D, ObserveCanvas3D, RollCanvas3D, ZoomCanvas3D } from './behaviors';
 export { BaseNode3D, Capsule, Cone, Cube, Cylinder, Line3D, Plane, Sphere, Torus } from './elements';
 export { Light } from './plugins';
--- a/packages/g6/tests/demos/behavior-click-element.ts
+++ b/packages/g6/tests/demos/behavior-click-element.ts
@ -7,7 +7,7 @@ export const behaviorClickElement: TestCase = async (context) => {
    ...context,
    data,
    layout: {
-      type: 'd3force',
+      type: 'd3-force',
    },
    node: {
      style: {
--- a/packages/g6/tests/demos/behavior-drag-canvas.ts
+++ b/packages/g6/tests/demos/behavior-drag-canvas.ts
@ -6,7 +6,7 @@ export const behaviorDragCanvas: TestCase = async (context) => {
    ...context,
    data,
    layout: {
-      type: 'd3force',
+      type: 'd3-force',
    },
    node: {
      style: {
--- a/packages/g6/tests/demos/behavior-hover-element.ts
+++ b/packages/g6/tests/demos/behavior-hover-element.ts
@ -6,7 +6,7 @@ export const behaviorHoverElement: TestCase = async (context) => {
    ...context,
    data: data,
    layout: {
-      type: 'd3force',
+      type: 'd3-force',
      linkDistance: 150,
    },
    node: {
--- a/packages/g6/tests/demos/behavior-scroll-canvas.ts
+++ b/packages/g6/tests/demos/behavior-scroll-canvas.ts
@ -6,7 +6,7 @@ export const behaviorScrollCanvas: TestCase = async (context) => {
    ...context,
    data,
    layout: {
-      type: 'd3force',
+      type: 'd3-force',
    },
    node: {
      style: {
--- a/packages/g6/tests/demos/behavior-zoom-canvas.ts
+++ b/packages/g6/tests/demos/behavior-zoom-canvas.ts
@ -6,7 +6,7 @@ export const behaviorZoomCanvas: TestCase = async (context) => {
    ...context,
    data,
    layout: {
-      type: 'd3force',
+      type: 'd3-force',
    },
    node: {
      style: {
--- a/packages/g6/tests/demos/common-graph.ts
+++ b/packages/g6/tests/demos/common-graph.ts
@ -10,7 +10,7 @@ export const commonGraph: TestCase = async (context) => {
        fill: (d) => (d.id === '33' ? '#d4414c' : '#2f363d'),
      },
    },
-    layout: { type: 'd3force' },
+    layout: { type: 'd3-force' },
    behaviors: ['zoom-canvas', 'drag-canvas'],
    plugins: [],
  });
--- a/packages/g6/tests/demos/layout-d3-force.ts
+++ b/packages/g6/tests/demos/layout-d3-force.ts
@ -9,7 +9,7 @@ export const layoutD3Force: TestCase = async (context) => {
    autoFit: 'view',
    behaviors: ['zoom-canvas', 'drag-canvas', 'drag-element', 'click-select'],
    layout: {
-      type: 'd3force',
+      type: 'd3-force',
      collide: {
        strength: 0.5,
      },
--- a/packages/g6/tests/demos/layout-force-collision.ts
+++ b/packages/g6/tests/demos/layout-force-collision.ts
@ -35,7 +35,7 @@ export const layoutForceCollision: TestCase = async (context) => {
    ...context,
    data: getData(500),
    layout: {
-      type: 'd3force',
+      type: 'd3-force',
      alphaTarget: 0.3,
      velocityDecay: 0.1,
      x: {
--- a/packages/g6/tests/demos/layout-force-lattice.ts
+++ b/packages/g6/tests/demos/layout-force-lattice.ts
@ -6,7 +6,7 @@ export const layoutForceLattice: TestCase = async (context) => {
    ...context,
    data: getData(),
    layout: {
-      type: 'd3force',
+      type: 'd3-force',
      manyBody: {
        strength: -30,
      },
--- a/packages/g6/tests/demos/plugin-background.ts
+++ b/packages/g6/tests/demos/plugin-background.ts
@ -6,7 +6,7 @@ export const pluginBackground: TestCase = async (context) => {
    ...context,
    autoResize: true,
    data,
-    layout: { type: 'd3force' },
+    layout: { type: 'd3-force' },
    behaviors: ['drag-canvas', 'drag-element'],
    plugins: [
      {
--- a/packages/g6/tests/demos/plugin-camera-setting.ts
+++ b/packages/g6/tests/demos/plugin-camera-setting.ts
@ -7,7 +7,7 @@ export const pluginCameraSetting: TestCase = async (context) => {
  const graph = new Graph({
    ...context,
    data,
-    layout: { type: 'd3force' },
+    layout: { type: 'd3-force' },
    plugins: [{ key: 'camera-setting', type: 'camera-setting' }],
  });

--- a/packages/g6/tests/demos/plugin-contextmenu.ts
+++ b/packages/g6/tests/demos/plugin-contextmenu.ts
@ -6,7 +6,7 @@ export const pluginContextmenu: TestCase = async (context) => {
    ...context,
    autoResize: true,
    data,
-    layout: { type: 'd3force' },
+    layout: { type: 'd3-force' },
    plugins: [
      {
        type: 'contextmenu',
--- a/packages/g6/tests/demos/plugin-grid-line.ts
+++ b/packages/g6/tests/demos/plugin-grid-line.ts
@ -7,7 +7,7 @@ export const pluginGridLine: TestCase = async (context) => {
    ...context,
    autoResize: true,
    data,
-    layout: { type: 'd3force' },
+    layout: { type: 'd3-force' },
    behaviors: ['drag-canvas'],
    plugins: [{ type: 'grid-line', follow: false }],
  });
--- a/packages/g6/tests/demos/plugin-legend.ts
+++ b/packages/g6/tests/demos/plugin-legend.ts
@ -22,7 +22,7 @@ export const pluginLegend: TestCase = async (context) => {
        };
      }),
    },
-    layout: { type: 'd3force' },
+    layout: { type: 'd3-force' },
    behaviors: ['drag-canvas', 'drag-element'],
    node: {
      type: (item: any) => {
--- a/packages/g6/tests/demos/plugin-toolbar-build-in.ts
+++ b/packages/g6/tests/demos/plugin-toolbar-build-in.ts
@ -6,7 +6,7 @@ export const pluginToolbarBuildIn: TestCase = async (context) => {
    ...context,
    autoResize: true,
    data,
-    layout: { type: 'd3force' },
+    layout: { type: 'd3-force' },
    plugins: [
      {
        type: 'toolbar',
--- a/packages/g6/tests/demos/plugin-toolbar-iconfont.ts
+++ b/packages/g6/tests/demos/plugin-toolbar-iconfont.ts
@ -11,7 +11,7 @@ export const pluginToolbarIconfont: TestCase = async (context) => {
    ...context,
    autoResize: true,
    data,
-    layout: { type: 'd3force' },
+    layout: { type: 'd3-force' },
    plugins: [
      {
        type: 'toolbar',
--- a/packages/g6/tests/demos/plugin-watermark-image.ts
+++ b/packages/g6/tests/demos/plugin-watermark-image.ts
@ -6,7 +6,7 @@ export const pluginWatermarkImage: TestCase = async (context) => {
    ...context,
    autoResize: true,
    data,
-    layout: { type: 'd3force' },
+    layout: { type: 'd3-force' },
    plugins: [
      {
        type: 'watermark',
--- a/packages/g6/tests/demos/plugin-watermark.ts
+++ b/packages/g6/tests/demos/plugin-watermark.ts
@ -7,7 +7,7 @@ export const pluginWatermark: TestCase = async (context) => {
    ...context,
    autoResize: true,
    data,
-    layout: { type: 'd3force' },
+    layout: { type: 'd3-force' },
    plugins: [
      {
        type: 'watermark',
--- a/packages/g6/tests/unit/runtime/graph/graph.spec.ts
+++ b/packages/g6/tests/unit/runtime/graph/graph.spec.ts
@ -61,7 +61,7 @@ describe('Graph', () => {
  });

  it('getLayout', () => {
-    expect(graph.getLayout()).toEqual({ type: 'd3force' });
+    expect(graph.getLayout()).toEqual({ type: 'd3-force' });
  });

  it('getBehaviors/setBehaviors/updateBehavior', () => {
--- a/packages/g6/src/exports.ts
+++ b/packages/g6/src/exports.ts
@ -46,7 +46,6 @@ export {
  CircularLayout,
  ComboCombinedLayout,
  ConcentricLayout,
-  D3Force3DLayout,
  D3ForceLayout,
  DagreLayout,
  ForceAtlas2Layout,
--- a/packages/g6/src/layouts/index.ts
+++ b/packages/g6/src/layouts/index.ts
@ -4,7 +4,6 @@ export {
  CircularLayout,
  ComboCombinedLayout,
  ConcentricLayout,
-  D3Force3DLayout,
  D3ForceLayout,
  DagreLayout,
  ForceAtlas2Layout,
--- a/packages/g6/src/layouts/types.ts
+++ b/packages/g6/src/layouts/types.ts
@ -79,11 +79,11 @@ interface FruchtermanLayout extends BaseLayoutOptions, FruchtermanLayoutOptions
 }

 interface D3ForceLayout extends BaseLayoutOptions, D3ForceLayoutOptions {
-  type: 'd3force';
+  type: 'd3-force';
 }

 interface D3Force3DLayout extends BaseLayoutOptions, D3Force3DLayoutOptions {
-  type: 'd3force3d';
+  type: 'd3-force3d';
 }

 interface ForceLayout extends BaseLayoutOptions, ForceLayoutOptions {
--- a/packages/g6/src/registry/build-in.ts
+++ b/packages/g6/src/registry/build-in.ts
@ -38,7 +38,6 @@ import {
  CircularLayout,
  ComboCombinedLayout,
  ConcentricLayout,
-  D3Force3DLayout,
  D3ForceLayout,
  DagreLayout,
  ForceAtlas2Layout,
@ -126,8 +125,7 @@ export const BUILT_IN_EXTENSIONS: ExtensionRegistry = {
    'force-atlas2': ForceAtlas2Layout,
    circular: CircularLayout,
    concentric: ConcentricLayout,
-    d3force: D3ForceLayout,
-    'd3-force-3d': D3Force3DLayout,
+    'd3-force': D3ForceLayout,
    dagre: DagreLayout,
    dendrogram,
    force: ForceLayout,
--- a/packages/site/docs/manual/getting-started-common/quick-start/simple-graph.md
+++ b/packages/site/docs/manual/getting-started-common/quick-start/simple-graph.md
@ -16,7 +16,7 @@ fetch('https://assets.antv.antgroup.com/g6/graph.json')
          },
        },
        layout: {
-          type: 'd3force',
+          type: 'd3-force',
          manyBody: {},
          x: {},
          y: {},
--- a/packages/site/docs/manual/getting-started-common/step-by-step/layout.md
+++ b/packages/site/docs/manual/getting-started-common/step-by-step/layout.md
@ -18,7 +18,7 @@ createGraph(
    },
    behaviors: ['drag-canvas', 'zoom-canvas', 'drag-element'],
    layout: {
-      type: 'd3force',
+      type: 'd3-force',
    },
  },
  { width: 200, height: 200 },
--- a/packages/site/docs/manual/getting-started-common/step-by-step/palette.md
+++ b/packages/site/docs/manual/getting-started-common/step-by-step/palette.md
@ -24,7 +24,7 @@ createGraph(
    },
    behaviors: ['drag-canvas', 'zoom-canvas', 'drag-element'],
    layout: {
-      type: 'd3force',
+      type: 'd3-force',
    },
  },
  { width: 200, height: 200 },
--- a/packages/site/docs/manual/getting-started-common/step-by-step/plugins-1.md
+++ b/packages/site/docs/manual/getting-started-common/step-by-step/plugins-1.md
@ -24,7 +24,7 @@ createGraph(
    },
    behaviors: ['drag-canvas', 'zoom-canvas', 'drag-element'],
    layout: {
-      type: 'd3force',
+      type: 'd3-force',
    },
    plugins: ['grid-line'],
  },
--- a/packages/site/docs/manual/getting-started-common/step-by-step/plugins-2.md
+++ b/packages/site/docs/manual/getting-started-common/step-by-step/plugins-2.md
@ -24,7 +24,7 @@ createGraph(
    },
    behaviors: ['drag-canvas', 'zoom-canvas', 'drag-element'],
    layout: {
-      type: 'd3force',
+      type: 'd3-force',
    },
    plugins: [{ type: 'grid-line', follow: true }],
  },
--- a/packages/site/docs/manual/getting-started/quick-start.en.md
+++ b/packages/site/docs/manual/getting-started/quick-start.en.md
@ -38,7 +38,7 @@ Copy the following code into an HTML file and then open this file in a browser:
          },
        },
        layout: {
-          type: 'd3force',
+          type: 'd3-force',
          manyBody: {},
          x: {},
          y: {},
@ -92,7 +92,7 @@ const graph = new Graph({
    },
  },
  layout: {
-    type: 'd3force',
+    type: 'd3-force',
    manyBody: {},
    x: {},
    y: {},
--- a/packages/site/docs/manual/getting-started/quick-start.zh.md
+++ b/packages/site/docs/manual/getting-started/quick-start.zh.md
@ -38,7 +38,7 @@ order: 0
          },
        },
        layout: {
-          type: 'd3force',
+          type: 'd3-force',
          manyBody: {},
          x: {},
          y: {},
@ -92,7 +92,7 @@ const graph = new Graph({
    },
  },
  layout: {
-    type: 'd3force',
+    type: 'd3-force',
    manyBody: {},
    x: {},
    y: {},
--- a/packages/site/docs/manual/getting-started/step-by-step.en.md
+++ b/packages/site/docs/manual/getting-started/step-by-step.en.md
@ -233,12 +233,12 @@ const data = {

 By default, if a node does not have position information, G6 will place the node at the top-left corner, that is, at the coordinates `(0, 0)`.

-Next, we will use the `d3force` layout algorithm, which is a force-directed layout algorithm that can simulate the forces of attraction and repulsion between nodes, allowing the nodes to automatically adjust to suitable positions.
+Next, we will use the `d3-force` layout algorithm, which is a force-directed layout algorithm that can simulate the forces of attraction and repulsion between nodes, allowing the nodes to automatically adjust to suitable positions.

 ```js
 {
  layout: {
-    type: 'd3force',
+    type: 'd3-force',
  },
 }
 ```
@ -270,7 +270,7 @@ const graph = new Graph({
  },
  behaviors: ['drag-canvas', 'zoom-canvas', 'drag-element'],
  layout: {
-    type: 'd3force',
+    type: 'd3-force',
  },
 });

--- a/packages/site/docs/manual/getting-started/step-by-step.zh.md
+++ b/packages/site/docs/manual/getting-started/step-by-step.zh.md
@ -233,12 +233,12 @@ const data = {

 默认情况下，如果节点没有位置信息，G6 会将节点放置在左上角，即 `(0, 0)`。

-接下来我们使用 `d3force` 布局算法，它是一种力导向布局算法，可以模拟节点之间的引力和斥力，使得节点自动调整到合适的位置。
+接下来我们使用 `d3-force` 布局算法，它是一种力导向布局算法，可以模拟节点之间的引力和斥力，使得节点自动调整到合适的位置。

 ```js
 {
  layout: {
-    type: 'd3force',
+    type: 'd3-force',
  },
 }
 ```
@ -270,7 +270,7 @@ const graph = new Graph({
  },
  behaviors: ['drag-canvas', 'zoom-canvas', 'drag-element'],
  layout: {
-    type: 'd3force',
+    type: 'd3-force',
  },
 });

--- a/packages/site/examples/layout/force-directed/demo/3d-force.js
+++ b/packages/site/examples/layout/force-directed/demo/3d-force.js
@ -1,9 +1,10 @@
 import { CameraSetting, ExtensionCategory, Graph, register } from '@antv/g6';
-import { Light, Line3D, ObserveCanvas3D, Sphere, ZoomCanvas3D, renderer } from '@antv/g6-extension-3d';
+import { D3Force3DLayout, Light, Line3D, ObserveCanvas3D, Sphere, ZoomCanvas3D, renderer } from '@antv/g6-extension-3d';

 register(ExtensionCategory.PLUGIN, '3d-light', Light);
 register(ExtensionCategory.NODE, 'sphere', Sphere);
 register(ExtensionCategory.EDGE, 'line3d', Line3D);
+register(ExtensionCategory.LAYOUT, 'd3-force-3d', D3Force3DLayout);
 register(ExtensionCategory.PLUGIN, 'camera-setting', CameraSetting);
 register(ExtensionCategory.BEHAVIOR, 'zoom-canvas-3d', ZoomCanvas3D);
 register(ExtensionCategory.BEHAVIOR, 'observe-canvas-3d', ObserveCanvas3D);
@ -34,14 +35,6 @@ fetch('https://assets.antv.antgroup.com/g6/d3-force-3d.json')
      },
      behaviors: ['observe-canvas-3d', 'zoom-canvas-3d'],
      plugins: [
-        {
-          type: 'camera-setting',
-          projectionMode: 'perspective',
-          near: 0.1,
-          far: 1000,
-          fov: 45,
-          aspect: 1,
-        },
        {
          type: '3d-light',
          directional: {
--- a/packages/site/examples/layout/force-directed/demo/collision.js
+++ b/packages/site/examples/layout/force-directed/demo/collision.js
@ -52,7 +52,7 @@ const graph = new Graph({
  container,
  data: getData(width),
  layout: {
-    type: 'd3force',
+    type: 'd3-force',
    alphaTarget: 0.3,
    velocityDecay: 0.1,
    x: {
--- a/packages/site/examples/layout/force-directed/demo/d3-force.js
+++ b/packages/site/examples/layout/force-directed/demo/d3-force.js
@ -17,7 +17,7 @@ fetch('https://assets.antv.antgroup.com/g6/cluster.json')
        },
      },
      layout: {
-        type: 'd3force',
+        type: 'd3-force',
        collide: {
          strength: 0.5,
        },
--- a/packages/site/examples/layout/force-directed/demo/mesh.js
+++ b/packages/site/examples/layout/force-directed/demo/mesh.js
@ -15,7 +15,7 @@ function getData(size = 10) {
 const graph = new Graph({
  data: getData(),
  layout: {
-    type: 'd3force',
+    type: 'd3-force',
    manyBody: {
      strength: -30,
    },