w

liam-hq · Dec 10, 2024 · 4274fad · 4274fad
1 parent 201b452
commit 4274fad
Show file tree

Hide file tree

Showing 2 changed files with 98 additions and 37 deletions.
diff --git a/...ages/erd-core/src/components/ERDRenderer/ERDContent/RelationshipEdge/RelationshipEdge.tsx b/...ages/erd-core/src/components/ERDRenderer/ERDContent/RelationshipEdge/RelationshipEdge.tsx
@@ -17,6 +17,7 @@ export const RelationshipEdge: FC<Props> = ({
   targetY,
   targetPosition,
   id,
+  style,
 }) => {
   const [edgePath] = getSmoothStepPath({
     sourceX,
@@ -28,8 +29,8 @@ export const RelationshipEdge: FC<Props> = ({
   })
 
   return (
-    <>
+    <div style={style}>
       <BaseEdge id={id} path={edgePath} />
-    </>
+    </div>
   )
 }
diff --git a/frontend/packages/erd-core/src/components/ERDRenderer/ERDContent/useForceLayout.ts b/frontend/packages/erd-core/src/components/ERDRenderer/ERDContent/useForceLayout.ts
@@ -2,6 +2,7 @@ import { type Node, useNodesInitialized, useReactFlow } from '@xyflow/react'
 import {
   type SimulationLinkDatum,
   type SimulationNodeDatum,
+  forceCenter,
   forceLink,
   forceManyBody,
   forceSimulation,
@@ -30,43 +31,102 @@ export function useForceLayout() {
       y: node.position.y,
     }))
 
-    const simulationLinks: SimulationLinkDatum<SimNodeType>[] = edges.map(
-      (edge) => edge,
-    )
+    const simulationLinks: SimulationLinkDatum<SimNodeType>[] = [...edges]
+    console.log(edges)
 
     const simulation = forceSimulation()
-      .nodes(simulationNodes)
-      .force('charge', forceManyBody().strength(-20000))
-      .force(
-        'link',
-        forceLink(simulationLinks)
-          // biome-ignore lint/suspicious/noExplicitAny: <explanation>
-          .id((d: any) => d.id)
-          .strength(0.001)
-          .distance(20),
-      )
-      .force('x', forceX(20).x(0).strength(0.1))
-      .force('y', forceY(20).y(0).strength(0.1))
-      .on('tick', () => {
-        setNodes((nodes) =>
-          nodes.map((node, i) => {
-            const simulationNode = simulationNodes[i]
-
-            return {
-              ...node,
-              position: {
-                x: simulationNode?.x ?? 0,
-                y: simulationNode?.y ?? 0,
-              },
-              style: {
-                opacity: 1,
-              },
-            }
-          }),
-        )
-
-        setTimeout(() => fitView(), 0)
-      })
+      // .force(
+      //   'link',
+      //   forceLink().id((d) => d.id),
+      // )
+      // .force('charge', forceManyBody())
+      // .nodes(simulationNodes)
+      // Node間の万有引力（負の値だと互いに反発する）
+      .force('charge', forceManyBody().strength(-5000))
+      // .force(
+      //   'link',
+      //   forceLink(simulationLinks)
+      //     .id((d: any) => d.id)
+      //     .strength(0.08)
+      //     .distance(100),
+      // )
+      .stop()
+
+    // simulation
+    //   .nodes(simulationNodes)
+    //   .force(
+    //     'link',
+    //     forceLink(simulationLinks)
+    //       .id((d: any) => d.id)
+    //       .strength(0.08)
+    //       .distance(100),
+    //   )
+    //   .on('tick', () => {
+    //     setNodes(
+    //       nodes.map((node, i) => ({
+    //         ...node,
+    //         position: {
+    //           x: simulationNodes[i]?.x ?? 0,
+    //           y: simulationNodes[i]?.y ?? 0,
+    //         },
+    //       })),
+    //     )
+    //   })
+
+    // .force(
+    //   'link',
+    //   forceLink(simulationLinks)
+    //     // biome-ignore lint/suspicious/noExplicitAny: <explanation>
+    //     .id((d: any) => d.id)
+    //     .strength(0)
+    //     .distance(0),
+    // )
+    // .force('x', forceX(0).x(0).strength(0))
+    // .force('y', forceY(0).y(0).strength(0))
+    // .on('tick', () => {
+    //   console.log(simulationLinks)
+    //   setNodes((nodes) =>
+    //     nodes.map((node, i) => {
+    //       const simulationNode = simulationNodes[i]
+
+    //       return {
+    //         ...node,
+    //         position: {
+    //           x: simulationNode?.x ?? 0,
+    //           y: simulationNode?.y ?? 0,
+    //         },
+    //         style: {
+    //           opacity: 1,
+    //         },
+    //       }
+    //     }),
+    //   )
+
+    //   setTimeout(() => fitView(), 0)
+    // })
+
+    // simulation.nodes(simulationNodes).on('tick', () => {
+    //   setNodes((nodes) =>
+    //     nodes.map((node, i) => {
+    //       const simulationNode = simulationNodes[i]
+
+    //       return {
+    //         ...node,
+    //         position: {
+    //           x: simulationNode?.x ?? 0,
+    //           y: simulationNode?.y ?? 0,
+    //         },
+    //         style: {
+    //           opacity: 1,
+    //         },
+    //       }
+    //     }),
+    //   )
+
+    //   setTimeout(() => fitView(), 0)
+    // })
+
+    // simulation.force('link')
 
     return () => {
       simulation.stop()