From 14516ab061769f2eb79399f22479073cdc1ce25c Mon Sep 17 00:00:00 2001
From: moklick <info@moritzklack.com>
Date: Mon, 26 Feb 2024 15:01:17 +0100
Subject: [PATCH] fix(react): drag nodes after toggle hidden closes #3931

---
 packages/react/CHANGELOG.md                   |  2 +-
 packages/react/src/hooks/useDrag.ts           |  5 ++---
 packages/svelte/src/lib/actions/drag/index.ts |  1 -
 packages/system/src/xydrag/XYDrag.ts          | 10 ++++------
 4 files changed, 7 insertions(+), 11 deletions(-)

diff --git a/packages/react/CHANGELOG.md b/packages/react/CHANGELOG.md
index 593cd975..d9529c27 100644
--- a/packages/react/CHANGELOG.md
+++ b/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
 
diff --git a/packages/react/src/hooks/useDrag.ts b/packages/react/src/hooks/useDrag.ts
index 8363d393..52d3c6f6 100644
--- a/packages/react/src/hooks/useDrag.ts
+++ b/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,
       });
diff --git a/packages/svelte/src/lib/actions/drag/index.ts b/packages/svelte/src/lib/actions/drag/index.ts
index d08a17be..1405ccd9 100644
--- a/packages/svelte/src/lib/actions/drag/index.ts
+++ b/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,
diff --git a/packages/system/src/xydrag/XYDrag.ts b/packages/system/src/xydrag/XYDrag.ts
index 6bd85eb9..cfed09f9 100644
--- a/packages/system/src/xydrag/XYDrag.ts
+++ b/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 {