feat: fix layout issue

Author: pomelo-nwu

packages/studio-graph/src/components/ClearCanvas/index.tsx

@@ -14,7 +14,10 @@ const ClearCanvas: React.FunctionComponent<IReportProps> = props => {
       draft.data = { nodes: [], edges: [] };
       draft.source = { nodes: [], edges: [] };
       draft.combos = [];
-      draft.enableCombo = false;
+      draft.layout = {
+        type: 'force',
+        options: {},
+      };
     });
     if (graph) {
       graph.zoomToFit();

packages/studio-graph/src/graph/custom-combo/combo-force.tsx

@@ -5,7 +5,7 @@ import { get } from './utils';
  * @param strength strength 是一个可调参数，默认值为 0.1
  * @returns
  */
-export function forceRadial(groupMap, clusterKey, strength = 0.1) {
+export function forceRadial(groupMap, clusterKey, strength = 0.05) {
   let nodes;
 
   function force(alpha) {

packages/studio-graph/src/graph/custom-combo/render.tsx

@@ -21,9 +21,9 @@ export function renderCombo(graph: ForceGraphInstance, combos: ICombo[]) {
       const textX = x; // 文本的 x 坐标（与圆心 x 坐标对齐）
       const textY = y - r - 8; // 文本的 y 坐标（在圆的上方）
 
-      const w = Math.max(fontSize * String(text).length * 0.6, 50);
-      const h = fontSize;
-      ctx.strokeRect(textX - w / 2, textY - h / 2, w, h);
+      // const w = Math.max(fontSize * String(text).length * 0.6, 50);
+      // const h = fontSize;
+      // ctx.strokeRect(textX - w / 2, textY - h / 2, w, h);
 
       ctx.font = `${fontSize}px Arial`;
       ctx.fillStyle = color;

packages/studio-graph/src/graph/custom-combo/useComboLayout.ts

@@ -1,24 +1,24 @@
 import { useContext } from '../../hooks/useContext';
-import { getGroups, get } from './utils';
+
 import { ForceGraphInstance } from 'force-graph';
 import {
   forceSimulation as d3ForceSimulation,
   forceLink as d3ForceLink,
   forceManyBody as d3ForceManyBody,
   forceCenter as d3ForceCenter,
   forceRadial as d3ForceRadial,
+  forceCollide as d3ForceCollide,
 } from 'd3-force-3d';
 import * as d3Force from 'd3-force';
 import { handleStyle } from '../handleStyle';
 
 import { forceCluster, forceRadial } from './combo-force';
-import { useEffect, useRef } from 'react';
+import { useEffect } from 'react';
 import { renderCombo } from './render';
 
 const useComboLayout = () => {
   const { store } = useContext();
   const { graph, render, nodeStyle, combos, layout } = store;
-  const linkForceRef = useRef<any>(null);
 
   useEffect(() => {
     if (render === '3D') {
@@ -44,9 +44,6 @@ const useComboLayout = () => {
       combos.forEach(group => {
         combosMap.set(group.id, group);
       });
-      if (linkForceRef.current === null) {
-        linkForceRef.current = graph.d3Force('link');
-      }
 
       graph.d3Force('charge', null);
       graph.d3Force('center', null);
@@ -69,18 +66,6 @@ const useComboLayout = () => {
       if (reheatSimulation && graph) {
         graph.d3ReheatSimulation();
       }
-    } else {
-      /** 关闭聚类 */
-      graph.d3Force('charge', d3ForceManyBody());
-      graph.d3Force('center', d3ForceCenter());
-      graph.d3Force('link', linkForceRef.current);
-
-      graph.d3Force('cluster', null);
-      graph.d3Force('radial', null);
-
-      if ((graph as ForceGraphInstance).onRenderFramePost) {
-        (graph as ForceGraphInstance).onRenderFramePost(() => {});
-      }
     }
   }, [layout, combos, render, graph]);
 };

packages/studio-graph/src/graph/custom-combo/useCombos.ts

@@ -35,12 +35,8 @@ const useCombos = () => {
     updateStore(draft => {
       draft.combos = [];
       draft.layout = {
-        type: 'force-combo',
-        options: {
-          enable: false,
-          groupBy: '',
-          reheatSimulation: false,
-        },
+        type: 'force',
+        options: {},
       };
     });
   };

packages/studio-graph/src/graph/useGraph/useLayout.tsx

@@ -7,7 +7,14 @@ import { handleStyle } from '../handleStyle';
 import { dagreLayout } from '../layout/dagre';
 import { calculateRenderTime } from './useData';
 
-import { forceCenter as d3ForceCenter, forceCollide as d3ForceCollide } from 'd3-force-3d';
+import {
+  forceSimulation as d3ForceSimulation,
+  forceLink as d3ForceLink,
+  forceManyBody as d3ForceManyBody,
+  forceCenter as d3ForceCenter,
+  forceRadial as d3ForceRadial,
+  forceCollide as d3ForceCollide,
+} from 'd3-force-3d';
 
 export const useLayout = () => {
   const { store } = useContext();
@@ -24,17 +31,28 @@ export const useLayout = () => {
       graph.cooldownTime(renderTime);
       graph.cooldownTicks(Infinity);
       graph.graphData(Utils.fakeSnapshot({ nodes: data.nodes, links: data.edges }));
+
+      /** 关闭聚类力导 */
+      graph.d3Force('cluster', null);
+      graph.d3Force('radial', null);
+      /** 关闭聚类绘图 */
+      if ((graph as ForceGraphInstance).onRenderFramePost) {
+        (graph as ForceGraphInstance).onRenderFramePost(() => {});
+      }
+
       if (type === 'force') {
         if (render === '2D') {
           (graph as ForceGraphInstance)
+            .d3Force('center', d3ForceCenter().strength(1))
+            .d3Force('charge', d3ForceManyBody())
+            .d3Force('link', d3ForceLink())
             .d3Force(
               'collide',
               d3ForceCollide().radius(node => {
                 return handleStyle(node, nodeStyle).size + 5;
               }),
             )
-            .d3Force('center', d3ForceCenter().strength(1));
-          graph.d3ReheatSimulation();
+            .d3ReheatSimulation();
         }
       }
       if (type === 'force-dagre') {