chore: refine rebase

antvis · Nov 2, 2023 · 905bf24 · 905bf24
1 parent 7c7f629
commit 905bf24
Show file tree

Hide file tree

Showing 3 changed files with 56 additions and 66 deletions.
diff --git a/packages/gi-assets-basic/src/components/ForceSimulation/Component.tsx b/packages/gi-assets-basic/src/components/ForceSimulation/Component.tsx
@@ -11,39 +11,47 @@ export interface IProps {
   GIAC: IGIAC;
   autoPin: boolean;
   dragNodeMass: number;
+  pinColor: '#7E92B5';
 }
 
 const ForceSimulation: React.FunctionComponent<IProps> = props => {
   const GIAC = deepClone(props.GIAC);
-  const { graph, layoutInstance, layout, restartForceSimulation, stopForceSimulation } = useContext();
+  const { graph, layout } = useContext();
 
-  const isForce = layout.type === 'graphin-force' || layout.type === 'force';
+  const isForce = layout.type === 'graphin-force' || layout.type === 'force' || layout.type === 'd3force';
 
   const handleClick = () => {
     if (isForce) {
-      restartForceSimulation([]);
+      graph.layout({
+        animated: true,
+        presetLayout: {},
+      });
     }
   };
 
-  const { autoPin, dragNodeMass = 10000000000 } = props;
+  const { autoPin, pinColor, dragNodeMass = 1000 } = props;
 
   React.useEffect(() => {
     const handleNodeDragStart = () => {
       if (!isForce) {
         return;
       }
-      stopForceSimulation();
+      graph.stopLayout();
     };
     const handleNodeDragEnd = (e: any) => {
       if (!isForce || !autoPin) {
         return;
       }
-      if (e.item) {
-        handlePinNode(e.item, graph, restartForceSimulation, {
+      if (e.itemId) {
+        handlePinNode(e.itemId, graph, {
           dragNodeMass,
-          x: e.x,
-          y: e.y,
-          isForce,
+          x: e.canvas.x,
+          y: e.canvas.y,
+          color: pinColor,
+        });
+        graph.layout({
+          animated: true,
+          presetLayout: {},
         });
       }
     };
@@ -56,7 +64,7 @@ const ForceSimulation: React.FunctionComponent<IProps> = props => {
       graph.off('node:dragend', handleNodeDragEnd);
       graph.off('canvas:click', handleNodeDragStart);
     };
-  }, [graph, autoPin, isForce, layoutInstance, restartForceSimulation]);
+  }, [graph, autoPin, isForce]);
 
   GIAC.icon = 'icon-play-circle';
   GIAC.disabled = true;

diff --git a/packages/gi-assets-basic/src/components/common/handlePinNode.tsx b/packages/gi-assets-basic/src/components/common/handlePinNode.tsx
@@ -1,65 +1,42 @@
 import { IGraph, icons } from '@antv/gi-sdk';
 
-export const handlePinNode = (target, graph, restartForceSimulation, params) => {
-  const { x, y, dragNodeMass, isForce } = params || {};
+export const handlePinNode = (itemId, graph, params) => {
+  const { x, y, color, dragNodeMass } = params || {};
 
-  const model = target.getModel();
   try {
-    // 目前仅支持GraphinNode 节点
-    const isGraphinNode = model.type === 'graphin-circle';
-    if (!isGraphinNode) {
-      return;
-    }
-
-    const style = model.style || { badges: [] };
-    const { keyshape, icon } = style;
-    const badges = [...style.badges];
-    const index = badges.findIndex(({ value }) => value === icons.pushpin);
-    badges.splice(index, 1); //   delete default pin badge
-
-    badges.push({
-      position: 'LB',
+    const pinBadge = {
+      text: icons.pushpin,
+      position: 'leftBottom',
+      color,
       fontFamily: 'iconfont',
-      type: 'font',
-      value: icons.pushpin,
-      size: [15, 15],
-      color: keyshape.fill,
-      fill: icon.fill,
-      stroke: keyshape.fill,
-    });
+      name: 'pin',
+    };
+    graph.updateNodePosition(
+      [
+        {
+          id: itemId,
+          data: {
+            x,
+            y,
+          },
+        },
+      ],
+      true,
+      true,
+    );
 
-    // update style
-    graph.updateItem(target, {
-      pinned: true,
-      mass: dragNodeMass,
-      style: {
-        badges,
-      },
-    });
-    //  如果是力导，需要重新启动
-    if (isForce) {
-      const model = target.get('model');
-      const position = x &&
-        y && {
-          x,
-          y,
-        };
-      const newModel = {
-        ...model,
-        ...position,
-        pinned: true,
-        forceMass: dragNodeMass,
-        mass: dragNodeMass,
-        layout: {
-          force: {
-            ...model.force,
-            mass: dragNodeMass,
+    const { badgeShapes = [] } = graph.getNodeData(itemId)?.data || {};
+    if (!badgeShapes.find(badge => badge.name === 'pin')) {
+      badgeShapes.push(pinBadge);
+      graph.updateData('node', {
+        id: itemId,
+        data: {
+          mass: dragNodeMass,
+          __style: {
+            badgeShapes,
           },
         },
-      };
-      // 重启力导
-      restartForceSimulation([newModel], graph);
-      // simulation.restart([newModel], graph);
+      });
     }
   } catch (error) {
     console.log('error', error);

diff --git a/packages/gi-assets-basic/src/elements/SimpleNode/registerTransform.ts b/packages/gi-assets-basic/src/elements/SimpleNode/registerTransform.ts
@@ -208,6 +208,8 @@ const transform = (nodeConfig: GINodeConfig, reset?: boolean) => {
       if (reset) {
         preStyle = {};
       }
+      // TODO: 若 line205 的 badges 启用，则需要从 __style 解构出传入的 badgeShapes 进行合并后给到本函数返回值
+      const { keyShape: inputKeyShape, labelShape: inputLabelShape, animates, ...others } = data.__style || {};
 
       /** 主节点 */
       const keyShape = {
@@ -216,6 +218,7 @@ const transform = (nodeConfig: GINodeConfig, reset?: boolean) => {
         stroke: advanced.keyshape.stroke || 'red',
         strokeOpacity: advanced.keyshape.strokeOpacity || 1,
         fillOpacity: advanced.keyshape.fillOpacity,
+        ...inputKeyShape,
       };
 
       /** 标签 */
@@ -226,14 +229,14 @@ const transform = (nodeConfig: GINodeConfig, reset?: boolean) => {
         maxLines: LABEL_KEYS.length,
         fill: advanced.label.fill,
         fontSize: advanced.label.fontSize,
+        ...inputLabelShape,
       };
       /** 图标 */
       const iconShape = icon.visible
         ? {
             iconShape: icon,
           }
         : {};
-      console.log('node.id', node.id, keyShape);
       return {
         id: node.id,
         data: {
@@ -258,7 +261,9 @@ const transform = (nodeConfig: GINodeConfig, reset?: boolean) => {
               //   shapeId: 'keyShape',
               // },
             ],
+            ...animates,
           },
+          ...others,
         },
       };
     };