add constrain

reaviz · Oct 28, 2024 · 20f517a · 20f517a
1 parent 5b26d40
commit 20f517a
Show file tree

Hide file tree

Showing 3 changed files with 20 additions and 4 deletions.
diff --git a/docs/demos/Cluster.story.tsx b/docs/demos/Cluster.story.tsx
@@ -35,7 +35,7 @@ export const Simple = () => {
 
   return (
     <>
-      <GraphCanvas nodes={nodes} draggable edges={[]} clusterAttribute="type" />
+      <GraphCanvas nodes={nodes} draggable edges={[]} clusterAttribute="type" constrainDragging />
       <div style={{ zIndex: 9, position: 'absolute', top: 15, right: 15 }}>
         <button type="button" onClick={addNode}>
           Add node

diff --git a/src/GraphScene.tsx b/src/GraphScene.tsx
@@ -148,6 +148,11 @@ export interface GraphSceneProps {
    */
   draggable?: boolean;
 
+  /**
+   * Constrain dragging to the cluster bounds. Default is `false`.
+   */
+  constrainDragging?: boolean;
+
   /**
    * Render a custom node
    */
@@ -322,6 +327,7 @@ export const GraphScene: FC<GraphSceneProps & { ref?: Ref<GraphSceneRef> }> =
         animated,
         disabled,
         draggable,
+        constrainDragging,
         edgeLabelPosition,
         edgeArrowPosition,
         edgeInterpolation,
@@ -384,6 +390,7 @@ export const GraphScene: FC<GraphSceneProps & { ref?: Ref<GraphSceneRef> }> =
               id={n?.id}
               labelFontUrl={labelFontUrl}
               draggable={draggable}
+              constrainDragging={constrainDragging}
               disabled={disabled}
               animated={animated}
               contextMenu={contextMenu}
@@ -397,6 +404,7 @@ export const GraphScene: FC<GraphSceneProps & { ref?: Ref<GraphSceneRef> }> =
             />
           )),
         [
+          constrainDragging,
           animated,
           contextMenu,
           disabled,
@@ -503,5 +511,6 @@ export const GraphScene: FC<GraphSceneProps & { ref?: Ref<GraphSceneRef> }> =
   );
 
 GraphScene.defaultProps = {
-  edgeInterpolation: 'linear'
+  edgeInterpolation: 'linear',
+  constrainDragging: false
 };
diff --git a/src/symbols/Node.tsx b/src/symbols/Node.tsx
@@ -52,6 +52,11 @@ export interface NodeProps {
    */
   draggable?: boolean;
 
+  /**
+   * Constrain dragging to the cluster bounds.
+   */
+  constrainDragging?: boolean;
+
   /**
    * The url for the label font.
    */
@@ -127,7 +132,8 @@ export const Node: FC<NodeProps> = ({
   onDragged,
   onPointerOut,
   onContextMenu,
-  renderNode
+  renderNode,
+  constrainDragging
 }) => {
   const cameraControls = useCameraControls();
   const theme = useStore(state => state.theme);
@@ -212,7 +218,8 @@ export const Node: FC<NodeProps> = ({
   const bind = useDrag({
     draggable,
     position,
-    bounds: cluster?.position,
+    // If dragging is constrained to the cluster, use the cluster's position as the bounds
+    bounds: constrainDragging ? cluster?.position : undefined,
     // @ts-ignore
     set: pos => setNodePosition(id, pos),
     onDragStart: () => {