update cluster position after node dragging

reaviz · Nov 1, 2024 · a75b83a · a75b83a
1 parent 520655c
commit a75b83a
Show file tree

Hide file tree

Showing 2 changed files with 20 additions and 3 deletions.
diff --git 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
@@ -214,4 +214,8 @@ export const useGraph = ({
       updateLayout(layout.current);
     }
   }, [sizingType, sizingAttribute, labelType, updateLayout]);
+
+  return {
+    updateLayout
+  };
 };