Merge pull request #291 from reaviz/dragging-refactor

Refactor Dragging State
reaviz · Oct 31, 2024 · 520655c · 520655c
2 parents ff19c2a + e7a763b
commit 520655c
Show file tree

Hide file tree

Showing 8 changed files with 56 additions and 48 deletions.
diff --git a/src/CameraControls/CameraControls.tsx b/src/CameraControls/CameraControls.tsx
@@ -116,7 +116,7 @@ export const CameraControls: FC<
     const gl = useThree(state => state.gl);
     const isOrbiting = mode === 'orbit';
     const setPanning = useStore(state => state.setPanning);
-    const draggingId = useStore(state => state.draggingId);
+    const isDragging = useStore(state => state.draggingIds.length > 0);
 
     useFrame((_state, delta) => {
       if (cameraRef.current?.enabled) {
@@ -277,7 +277,7 @@ export const CameraControls: FC<
 
     useEffect(() => {
       // If a node is being dragged, disable the camera controls
-      if (draggingId) {
+      if (isDragging) {
         cameraRef.current.mouseButtons.left = ThreeCameraControls.ACTION.NONE;
       } else {
         if (mode === 'rotate') {
@@ -288,7 +288,7 @@ export const CameraControls: FC<
             ThreeCameraControls.ACTION.TRUCK;
         }
       }
-    }, [draggingId, mode]);
+    }, [isDragging, mode]);
 
     useHotkeys([
       {

diff --git a/src/store.ts b/src/store.ts
@@ -33,15 +33,15 @@ export interface GraphState {
   setEdgeContextMenus: (edges: Set<string>) => void;
   edgeMeshes: Array<Mesh<BufferGeometry>>;
   setEdgeMeshes: (edgeMeshes: Array<Mesh<BufferGeometry>>) => void;
-  draggingId?: string | null;
+  draggingIds?: string[];
   drags?: DragReferences;
   panning?: boolean;
   theme: Theme;
   setTheme: (theme: Theme) => void;
   setClusters: (clusters: Map<string, ClusterGroup>) => void;
   setPanning: (panning: boolean) => void;
   setDrags: (drags: DragReferences) => void;
-  setDraggingId: (id: string | null) => void;
+  setDraggingIds: (id: string[]) => void;
   setActives: (actives: string[]) => void;
   setSelections: (selections: string[]) => void;
   setNodes: (nodes: InternalGraphNode[]) => void;
@@ -74,7 +74,7 @@ export const createStore = ({
     collapsedNodeIds,
     clusters: new Map(),
     panning: false,
-    draggingId: null,
+    draggingIds: [],
     actives,
     edgeContextMenus: new Set(),
     edgeMeshes: [],
@@ -91,7 +91,7 @@ export const createStore = ({
     setEdgeMeshes: edgeMeshes => set(state => ({ ...state, edgeMeshes })),
     setPanning: panning => set(state => ({ ...state, panning })),
     setDrags: drags => set(state => ({ ...state, drags })),
-    setDraggingId: draggingId => set(state => ({ ...state, draggingId })),
+    setDraggingIds: draggingIds => set(state => ({ ...state, draggingIds })),
     setActives: actives => set(state => ({ ...state, actives })),
     setSelections: selections => set(state => ({ ...state, selections })),
     setNodes: nodes =>

diff --git a/src/symbols/Arrow.tsx b/src/symbols/Arrow.tsx
@@ -66,7 +66,7 @@ export const Arrow: FC<ArrowProps> = ({
 }) => {
   const normalizedColor = useMemo(() => new Color(color), [color]);
   const meshRef = useRef<Mesh | null>(null);
-  const draggingId = useStore(state => state.draggingId);
+  const isDragging = useStore(state => state.draggingIds.length > 0);
   const center = useStore(state => state.centerPosition);
 
   const [{ pos, arrowOpacity }] = useSpring(
@@ -81,10 +81,10 @@ export const Arrow: FC<ArrowProps> = ({
       },
       config: {
         ...animationConfig,
-        duration: animated && !draggingId ? undefined : 0
+        duration: animated && !isDragging ? undefined : 0
       }
     }),
-    [animated, draggingId, opacity, position]
+    [animated, isDragging, opacity, position]
   );
 
   const setQuaternion = useCallback(() => {

diff --git a/src/symbols/Edge.tsx b/src/symbols/Edge.tsx
@@ -123,7 +123,7 @@ export const Edge: FC<EdgeProps> = ({
   onPointerOut
 }) => {
   const theme = useStore(state => state.theme);
-  const draggingId = useStore(state => state.draggingId);
+  const isDragging = useStore(state => state.draggingIds.length > 0);
 
   // UI states
   const [active, setActive] = useState<boolean>(false);
@@ -229,10 +229,10 @@ export const Edge: FC<EdgeProps> = ({
       },
       config: {
         ...animationConfig,
-        duration: animated && !draggingId ? undefined : 0
+        duration: animated && !isDragging ? undefined : 0
       }
     }),
-    [midPoint, animated, draggingId]
+    [midPoint, animated, isDragging]
   );
 
   const labelRotation = useMemo(
@@ -256,7 +256,7 @@ export const Edge: FC<EdgeProps> = ({
     ]
   );
 
-  useCursor(active && !draggingId && onClick !== undefined, 'pointer');
+  useCursor(active && !isDragging && onClick !== undefined, 'pointer');
 
   const { pointerOver, pointerOut } = useHoverIntent({
     disabled,

diff --git a/src/symbols/Line.tsx b/src/symbols/Line.tsx
@@ -88,7 +88,7 @@ export const Line: FC<LineProps> = ({
   onPointerOut
 }) => {
   const tubeRef = useRef<TubeGeometry | null>(null);
-  const draggingId = useStore(state => state.draggingId);
+  const isDragging = useStore(state => state.draggingIds.length > 0);
   const normalizedColor = useMemo(() => new Color(color), [color]);
   const center = useStore(state => state.centerPosition);
   const mounted = useRef<boolean>(false);
@@ -132,10 +132,10 @@ export const Line: FC<LineProps> = ({
       },
       config: {
         ...animationConfig,
-        duration: animated && !draggingId ? undefined : 0
+        duration: animated && !isDragging ? undefined : 0
       }
     };
-  }, [animated, draggingId, curve, size]);
+  }, [animated, isDragging, curve, size]);
 
   useEffect(() => {
     // Handle mount operation for initial render

diff --git a/src/symbols/Node.tsx b/src/symbols/Node.tsx
@@ -139,9 +139,9 @@ export const Node: FC<NodeProps> = ({
   const theme = useStore(state => state.theme);
   const node = useStore(state => state.nodes.find(n => n.id === id));
   const edges = useStore(state => state.edges);
-  const draggingId = useStore(state => state.draggingId);
+  const draggingIds = useStore(state => state.draggingIds);
   const collapsedNodeIds = useStore(state => state.collapsedNodeIds);
-  const setDraggingId = useStore(state => state.setDraggingId);
+  const setDraggingIds = useStore(state => state.setDraggingIds);
   const setNodePosition = useStore(state => state.setNodePosition);
   const setCollapsedNodeIds = useStore(state => state.setCollapsedNodeIds);
   const isCollapsed = useStore(state => state.collapsedNodeIds.includes(id));
@@ -151,7 +151,9 @@ export const Node: FC<NodeProps> = ({
   const center = useStore(state => state.centerPosition);
   const cluster = useStore(state => state.clusters.get(node.cluster));
 
-  const isDragging = draggingId === id;
+  const isDraggingCurrent = draggingIds.includes(id);
+  const isDragging = draggingIds.length > 0;
+
   const {
     position,
     label,
@@ -209,10 +211,10 @@ export const Node: FC<NodeProps> = ({
       },
       config: {
         ...animationConfig,
-        duration: animated && !draggingId ? undefined : 0
+        duration: animated && !isDragging ? undefined : 0
       }
     }),
-    [isDragging, position, animated, nodeSize, shouldHighlight]
+    [isDraggingCurrent, position, animated, nodeSize, shouldHighlight]
   );
 
   const bind = useDrag({
@@ -223,30 +225,30 @@ export const Node: FC<NodeProps> = ({
     // @ts-ignore
     set: pos => setNodePosition(id, pos),
     onDragStart: () => {
-      setDraggingId(id);
+      setDraggingIds([...new Set([...draggingIds, id])]);
       setActive(true);
     },
     onDragEnd: () => {
-      setDraggingId(null);
+      setDraggingIds(draggingIds.filter(id => id !== id));
       setActive(false);
       onDragged?.(node);
     }
   });
 
-  useCursor(active && !draggingId && onClick !== undefined, 'pointer');
+  useCursor(active && !isDragging && onClick !== undefined, 'pointer');
   useCursor(
-    active && draggable && !isDragging && onClick === undefined,
+    active && draggable && !isDraggingCurrent && onClick === undefined,
     'grab'
   );
-  useCursor(isDragging, 'grabbing');
+  useCursor(isDraggingCurrent, 'grabbing');
 
-  const combinedActiveState = shouldHighlight || isDragging;
+  const combinedActiveState = shouldHighlight || isDraggingCurrent;
   const color = combinedActiveState
     ? theme.node.activeFill
     : node.fill || theme.node.fill;
 
   const { pointerOver, pointerOut } = useHoverIntent({
-    disabled: disabled || isDragging,
+    disabled: disabled || isDraggingCurrent,
     onPointerOver: (event: ThreeEvent<PointerEvent>) => {
       cameraControls.controls.truckSpeed = 0;
       setActive(true);
@@ -325,9 +327,9 @@ export const Node: FC<NodeProps> = ({
               fontUrl={labelFontUrl}
               opacity={selectionOpacity}
               stroke={theme.node.label.stroke}
-              active={isSelected || active || isDragging || isActive}
+              active={isSelected || active || isDraggingCurrent || isActive}
               color={
-                isSelected || active || isDragging || isActive
+                isSelected || active || isDraggingCurrent || isActive
                   ? theme.node.label.activeColor
                   : theme.node.label.color
               }
@@ -341,9 +343,9 @@ export const Node: FC<NodeProps> = ({
                 fontSize={5}
                 opacity={selectionOpacity}
                 stroke={theme.node.subLabel?.stroke}
-                active={isSelected || active || isDragging || isActive}
+                active={isSelected || active || isDraggingCurrent || isActive}
                 color={
-                  isSelected || active || isDragging || isActive
+                  isSelected || active || isDraggingCurrent || isActive
                     ? theme.node.subLabel?.activeColor
                     : theme.node.subLabel?.color
                 }
@@ -355,7 +357,7 @@ export const Node: FC<NodeProps> = ({
     [
       active,
       isActive,
-      isDragging,
+      isDraggingCurrent,
       isSelected,
       label,
       labelFontUrl,
@@ -399,7 +401,7 @@ export const Node: FC<NodeProps> = ({
       onPointerOver={pointerOver}
       onPointerOut={pointerOut}
       onClick={(event: ThreeEvent<MouseEvent>) => {
-        if (!disabled && !isDragging) {
+        if (!disabled && !isDraggingCurrent) {
           onClick?.(
             node,
             {
@@ -411,7 +413,7 @@ export const Node: FC<NodeProps> = ({
         }
       }}
       onDoubleClick={(event: ThreeEvent<MouseEvent>) => {
-        if (!disabled && !isDragging) {
+        if (!disabled && !isDraggingCurrent) {
           onDoubleClick?.(node, event);
         }
       }}

diff --git a/src/symbols/edges/Edge.tsx b/src/symbols/edges/Edge.tsx
@@ -82,7 +82,7 @@ export const Edge: FC<EdgeProps> = ({
   const nodes = useStore(store => store.nodes);
   const from = nodes.find(node => node.id === source);
   const to = nodes.find(node => node.id === target);
-  const draggingId = useStore(state => state.draggingId);
+  const isDragging = useStore(state => state.draggingIds.length > 0);
 
   const labelOffset = (size + theme.edge.label.fontSize) / 2;
 
@@ -109,10 +109,10 @@ export const Edge: FC<EdgeProps> = ({
       },
       config: {
         ...animationConfig,
-        duration: animated && !draggingId ? undefined : 0
+        duration: animated && !isDragging ? undefined : 0
       }
     }),
-    [midPoint, animated, draggingId]
+    [midPoint, animated, isDragging]
   );
 
   const removeContextMenu = useCallback(

diff --git a/src/symbols/edges/Edges.tsx b/src/symbols/edges/Edges.tsx
@@ -101,7 +101,7 @@ export const Edges: FC<EdgesProps> = ({
     interpolation
   );
 
-  const draggingId = useStore(state => state.draggingId);
+  const draggingIds = useStore(state => state.draggingIds);
   const edgeMeshes = useStore(state => state.edgeMeshes);
   const setEdgeMeshes = useStore(state => state.setEdgeMeshes);
   const actives = useStore(state => state.actives || []);
@@ -113,7 +113,10 @@ export const Edges: FC<EdgesProps> = ({
     const draggingActive: Array<InternalGraphEdge> = [];
     const draggingInactive: Array<InternalGraphEdge> = [];
     edges.forEach(edge => {
-      if (draggingId === edge.source || draggingId === edge.target) {
+      if (
+        draggingIds.includes(edge.source) ||
+        draggingIds.includes(edge.target)
+      ) {
         if (selections.includes(edge.id) || actives.includes(edge.id)) {
           draggingActive.push(edge);
         } else {
@@ -129,7 +132,7 @@ export const Edges: FC<EdgesProps> = ({
       }
     });
     return [active, inactive, draggingActive, draggingInactive];
-  }, [edges, actives, selections, draggingId]);
+  }, [edges, actives, selections, draggingIds]);
 
   const hasSelections = !!selections.length;
 
@@ -147,12 +150,12 @@ export const Edges: FC<EdgesProps> = ({
   useEdgePositionAnimation(staticEdgesGeometry, animated);
 
   useEffect(() => {
-    if (draggingId === null) {
+    if (draggingIds.length === 0) {
       const edgeGeometries = getGeometries(edges);
       const edgeMeshes = edgeGeometries.map(edge => new Mesh(edge));
       setEdgeMeshes(edgeMeshes);
     }
-  }, [getGeometries, setEdgeMeshes, edges, draggingId]);
+  }, [getGeometries, setEdgeMeshes, edges, draggingIds.length]);
 
   const staticEdgesRef = useRef(new Mesh());
   const dynamicEdgesRef = useRef(new Mesh());
@@ -186,7 +189,7 @@ export const Edges: FC<EdgesProps> = ({
     disabled
   );
 
-  const draggingIdRef = useRef<string | null>(null);
+  const draggingIdRef = useRef<string[]>([]);
   const intersectingRef = useRef<Array<InternalGraphEdge>>([]);
 
   useFrame(state => {
@@ -197,15 +200,18 @@ export const Edges: FC<EdgesProps> = ({
     }
 
     const previousDraggingId = draggingIdRef.current;
-    if (draggingId || (draggingId === null && previousDraggingId !== null)) {
+    if (
+      draggingIds.length ||
+      (draggingIds.length === 0 && previousDraggingId !== null)
+    ) {
       dynamicEdgesRef.current.geometry = getGeometry(
         draggingActive,
         draggingInactive
       );
     }
 
-    draggingIdRef.current = draggingId;
-    if (draggingId) {
+    draggingIdRef.current = draggingIds;
+    if (draggingIds.length) {
       return;
     }