fix(react): drag nodes after toggle hidden closes #3931

packages/react/CHANGELOG.md

@@ -10,7 +10,7 @@
 
 - better cursor defaults for the pane, nodes and edges
 - `disableKeyboardA11y` now also disables Enter and Escape for selecting/deselecting nodes and edges
-
+- fix bug where users couldn't drag a node after toggle nodes `hidden` attribute
 
 ## 12.0.0-next.9
 

packages/react/src/hooks/useDrag.ts

@@ -33,7 +33,6 @@ export function useDrag({
   useEffect(() => {
     if (nodeRef?.current) {
       xyDrag.current = XYDrag({
-        domNode: nodeRef.current,
         getStoreItems: () => store.getState(),
         onNodeMouseDown: (id: string) => {
           handleNodeClick({
@@ -55,11 +54,11 @@ export function useDrag({
   useEffect(() => {
     if (disabled) {
       xyDrag.current?.destroy();
-    } else {
+    } else if (nodeRef.current) {
       xyDrag.current?.update({
         noDragClassName,
         handleSelector,
-        domNode: nodeRef.current as Element,
+        domNode: nodeRef.current,
         isSelectable,
         nodeId,
       });

packages/svelte/src/lib/actions/drag/index.ts

@@ -19,7 +19,6 @@ export type UseDragParams = {
 export default function drag(domNode: Element, params: UseDragParams) {
   const { store, onDrag, onDragStart, onDragStop, onNodeMouseDown } = params;
   const dragInstance = XYDrag({
-    domNode,
     onDrag,
     onDragStart,
     onDragStop,

packages/system/src/xydrag/XYDrag.ts

@@ -1,5 +1,5 @@
 import { drag } from 'd3-drag';
-import { select } from 'd3-selection';
+import { select, type Selection } from 'd3-selection';
 
 import {
   calcAutoPan,
@@ -58,7 +58,6 @@ type StoreItems<OnNodeDrag> = {
 };
 
 export type XYDragParams<OnNodeDrag> = {
-  domNode: Element;
   getStoreItems: () => StoreItems<OnNodeDrag>;
   onDragStart?: OnDrag;
   onDrag?: OnDrag;
@@ -81,7 +80,6 @@ export type DragUpdateParams = {
 
 // eslint-disable-next-line @typescript-eslint/no-explicit-any
 export function XYDrag<OnNodeDrag extends (e: any, nodes: any, node: any) => void | undefined>({
-  domNode,
   onNodeMouseDown,
   getStoreItems,
   onDragStart,
@@ -95,11 +93,11 @@ export function XYDrag<OnNodeDrag extends (e: any, nodes: any, node: any) => voi
   let mousePosition: XYPosition = { x: 0, y: 0 };
   let containerBounds: DOMRect | null = null;
   let dragStarted = false;
-
-  const d3Selection = select(domNode);
+  let d3Selection: Selection<Element, unknown, null, undefined> | null = null;
 
   // public functions
   function update({ noDragClassName, handleSelector, domNode, isSelectable, nodeId }: DragUpdateParams) {
+    d3Selection = select(domNode);
     function updateNodes({ x, y }: XYPosition, dragEvent: MouseEvent | null) {
       const {
         nodeLookup,
@@ -342,7 +340,7 @@ export function XYDrag<OnNodeDrag extends (e: any, nodes: any, node: any) => voi
   }
 
   function destroy() {
-    d3Selection.on('.drag', null);
+    d3Selection?.on('.drag', null);
   }
 
   return {