From a75b83a28b77da02329fd8b8ea67325889472477 Mon Sep 17 00:00:00 2001
From: "Serhii.Tsybulskyi" <c4r0n0s@gmail.com>
Date: Fri, 1 Nov 2024 11:56:36 +0200
Subject: [PATCH] update cluster position after node dragging

---
 src/GraphScene.tsx | 19 ++++++++++++++++---
 src/useGraph.ts    |  4 ++++
 2 files changed, 20 insertions(+), 3 deletions(-)

diff --git a/src/GraphScene.tsx b/src/GraphScene.tsx
index e9172f60..e6bbacad 100644
--- a/src/GraphScene.tsx
+++ b/src/GraphScene.tsx
@@ -4,6 +4,7 @@ import React, {
   Fragment,
   ReactNode,
   Ref,
+  useCallback,
   useImperativeHandle,
   useMemo
 } from 'react';
@@ -345,7 +346,7 @@ export const GraphScene: FC<GraphSceneProps & { ref?: Ref<GraphSceneRef> }> =
       const camera = useThree(state => state.camera);
 
       // Mount and build the graph
-      useGraph(rest);
+      const { updateLayout } = useGraph(rest);
 
       if (
         clusterAttribute &&
@@ -382,6 +383,18 @@ export const GraphScene: FC<GraphSceneProps & { ref?: Ref<GraphSceneRef> }> =
         [centerNodesById, fitNodesInViewById, graph, gl, scene, camera]
       );
 
+      const onNodeDraggedHandler = useCallback(
+        (node: InternalGraphNode) => {
+          onNodeDragged?.(node);
+
+          // Update layout to recalculate the cluster positions when a node is dragged
+          if (clusterAttribute) {
+            updateLayout();
+          }
+        },
+        [clusterAttribute, onNodeDragged, updateLayout]
+      );
+
       const nodeComponents = useMemo(
         () =>
           nodes.map(n => (
@@ -400,7 +413,7 @@ export const GraphScene: FC<GraphSceneProps & { ref?: Ref<GraphSceneRef> }> =
               onContextMenu={onNodeContextMenu}
               onPointerOver={onNodePointerOver}
               onPointerOut={onNodePointerOut}
-              onDragged={onNodeDragged}
+              onDragged={onNodeDraggedHandler}
             />
           )),
         [
@@ -414,7 +427,7 @@ export const GraphScene: FC<GraphSceneProps & { ref?: Ref<GraphSceneRef> }> =
           onNodeClick,
           onNodeContextMenu,
           onNodeDoubleClick,
-          onNodeDragged,
+          onNodeDraggedHandler,
           onNodePointerOut,
           onNodePointerOver,
           renderNode
diff --git a/src/useGraph.ts b/src/useGraph.ts
index a94afa8c..290adbbb 100644
--- a/src/useGraph.ts
+++ b/src/useGraph.ts
@@ -214,4 +214,8 @@ export const useGraph = ({
       updateLayout(layout.current);
     }
   }, [sizingType, sizingAttribute, labelType, updateLayout]);
+
+  return {
+    updateLayout
+  };
 };