feat: add DragNodeWithForce Behaviors

packages/graphin/src/Graphin.tsx

@@ -37,6 +37,7 @@ export interface GraphinState {
     graph: IGraph;
     apis: ApisType;
     theme: ThemeData;
+    layout: LayoutController;
   };
 }
 
@@ -141,18 +142,18 @@ class Graphin extends React.PureComponent<GraphinProps, GraphinState> {
 
     this.theme = {} as ThemeData;
     this.apis = {} as ApisType;
+    this.layout = {} as LayoutController;
+    this.options = { ...otherOptions } as GraphOptions;
 
     this.state = {
       isReady: false,
       context: {
         graph: this.graph,
         apis: this.apis,
         theme: this.theme,
+        layout: this.layout,
       },
     };
-
-    this.options = { ...otherOptions } as GraphOptions;
-    this.layout = {} as LayoutController;
   }
 
   initData = (data: GraphinProps['data']) => {
@@ -275,6 +276,7 @@ class Graphin extends React.PureComponent<GraphinProps, GraphinState> {
         graph: this.graph,
         apis: this.apis,
         theme: this.theme,
+        layout: this.layout,
       },
     });
   };
@@ -362,6 +364,7 @@ class Graphin extends React.PureComponent<GraphinProps, GraphinState> {
               graph: this.graph,
               apis: this.apis,
               theme: this.theme,
+              layout: this.layout,
             },
           };
         },

packages/graphin/src/GraphinContext.tsx

@@ -1,17 +1,21 @@
+/* eslint-disable @typescript-eslint/no-explicit-any */
 import React from 'react';
 import { Graph as IGraph } from '@antv/g6';
 import { ApisType } from './apis/types';
 import { ThemeType } from './theme/index';
+import LayoutController from './layout';
 
 const defaultContext = {
   graph: {} as IGraph,
   apis: {} as ApisType,
   theme: {} as ThemeType,
+  layout: {} as LayoutController,
 };
 export interface GraphinContextType {
   graph: IGraph;
   apis: ApisType;
   theme: ThemeType;
+  layout: LayoutController;
   // eslint-disable-next-line @typescript-eslint/no-explicit-any
   [key: string]: any;
 }

packages/graphin/src/behaviors/DragNodeWithForce.tsx

@@ -0,0 +1,59 @@
+import React, { useEffect } from 'react';
+import GraphinContext from '../GraphinContext';
+
+import { IG6GraphEvent } from '@antv/g6';
+
+export interface DragNodeWithForceProps {
+  /**
+   * @description 被拖拽的节点，是否自动固定住
+   * @description.en-US Whether the dragged node is automatically fixed
+   * @default false
+   */
+  autoPin?: boolean;
+}
+const DragNodeWithForce = (props: DragNodeWithForceProps) => {
+  const { graph, layout } = React.useContext(GraphinContext);
+  const { autoPin } = props;
+
+  useEffect(() => {
+    const { instance } = layout;
+    const { simulation, type } = instance;
+    console.log(instance, layout);
+    const handleNodeDragStart = () => {
+      if (simulation) {
+        simulation.stop();
+      }
+    };
+    const handleNodeDragEnd = (e: IG6GraphEvent) => {
+      if (type !== 'graphin-force') {
+        return;
+      }
+
+      if (e.item) {
+        console.log('e.item', instance);
+        const nodeModel = e.item.get('model');
+        nodeModel.x = e.x;
+        nodeModel.y = e.y;
+        nodeModel.layout = {
+          ...nodeModel.layout,
+          force: {
+            mass: autoPin ? 1000000 : null,
+          },
+        };
+        const drageNodes = [nodeModel];
+        simulation.restart(drageNodes, graph);
+        graph.refreshPositions();
+      }
+    };
+
+    graph.on('node:dragstart', handleNodeDragStart);
+    graph.on('node:dragend', handleNodeDragEnd);
+    return () => {
+      graph.off('node:dragstart', handleNodeDragStart);
+      graph.off('node:dragend', handleNodeDragEnd);
+    };
+  }, [graph, autoPin]);
+  return null;
+};
+
+export default DragNodeWithForce;

packages/graphin/src/behaviors/index.tsx

@@ -11,6 +11,7 @@ import ActivateRelations from './ActivateRelations';
 import Hoverable from './Hoverable';
 import FitView from './FitView';
 import FontPaint from './FontPaint';
+import DragNodeWithForce from './DragNodeWithForce';
 
 export default {
   /** 内置 */
@@ -29,4 +30,5 @@ export default {
   TreeCollapse,
   FitView,
   FontPaint,
+  DragNodeWithForce,
 };