From 83e0a333b04df8f7272f0f0269363b7bf24fe2ce Mon Sep 17 00:00:00 2001 From: peterkogo Date: Tue, 27 Feb 2024 16:54:21 +0100 Subject: [PATCH 01/15] fixed handle connections --- .../react/src/components/Handle/index.tsx | 19 +++++++++++++++---- packages/react/src/store/index.ts | 6 ++---- packages/system/src/styles/init.css | 5 +++++ packages/system/src/xyhandle/utils.ts | 4 ++-- 4 files changed, 24 insertions(+), 10 deletions(-) diff --git a/packages/react/src/components/Handle/index.tsx b/packages/react/src/components/Handle/index.tsx index 36778039..25794ee6 100644 --- a/packages/react/src/components/Handle/index.tsx +++ b/packages/react/src/components/Handle/index.tsx @@ -16,6 +16,7 @@ import { type HandleProps, type Connection, type HandleType, + ConnectionMode, } from '@xyflow/system'; import { useStore, useStoreApi } from '../../hooks/useStore'; @@ -36,14 +37,19 @@ const connectingSelector = connectionStartHandle: startHandle, connectionEndHandle: endHandle, connectionClickStartHandle: clickHandle, + connectionMode, } = state; - return { connecting: (startHandle?.nodeId === nodeId && startHandle?.handleId === handleId && startHandle?.type === type) || (endHandle?.nodeId === nodeId && endHandle?.handleId === handleId && endHandle?.type === type), clickConnecting: clickHandle?.nodeId === nodeId && clickHandle?.handleId === handleId && clickHandle?.type === type, + isPossibleEndHandle: + connectionMode === ConnectionMode.Strict + ? startHandle?.type !== type + : nodeId !== startHandle?.nodeId || handleId !== startHandle?.handleId, + connectionInProcess: !!startHandle, }; }; @@ -71,7 +77,10 @@ const HandleComponent = forwardRef( const store = useStoreApi(); const nodeId = useNodeId(); const { connectOnClick, noPanClassName, rfId } = useStore(selector, shallow); - const { connecting, clickConnecting } = useStore(connectingSelector(nodeId, handleId, type), shallow); + const { connecting, clickConnecting, isPossibleEndHandle, connectionInProcess } = useStore( + connectingSelector(nodeId, handleId, type), + shallow + ); if (!nodeId) { store.getState().onError?.('010', errorMessages['error010']()); @@ -201,10 +210,12 @@ const HandleComponent = forwardRef( connectable: isConnectable, connectablestart: isConnectableStart, connectableend: isConnectableEnd, - connecting: clickConnecting, + connecting: connecting || clickConnecting, // this class is used to style the handle when the user is connecting connectionindicator: - isConnectable && ((isConnectableStart && !connecting) || (isConnectableEnd && connecting)), + isConnectable && + (!connectionInProcess || isPossibleEndHandle) && + (connectionInProcess ? isConnectableEnd : isConnectableStart), }, ])} onMouseDown={onPointerDown} diff --git a/packages/react/src/store/index.ts b/packages/react/src/store/index.ts index 71a51a1e..cae14173 100644 --- a/packages/react/src/store/index.ts +++ b/packages/react/src/store/index.ts @@ -291,13 +291,11 @@ const createRFStore = ({ connectionEndHandle: null, }), updateConnection: (params) => { - const { connectionStatus, connectionStartHandle, connectionEndHandle, connectionPosition } = get(); + const { connectionPosition } = get(); const currentConnection = { + ...params, connectionPosition: params.connectionPosition ?? connectionPosition, - connectionStatus: params.connectionStatus ?? connectionStatus, - connectionStartHandle: params.connectionStartHandle ?? connectionStartHandle, - connectionEndHandle: params.connectionEndHandle ?? connectionEndHandle, }; set(currentConnection); diff --git a/packages/system/src/styles/init.css b/packages/system/src/styles/init.css index 46628842..d74519a6 100644 --- a/packages/system/src/styles/init.css +++ b/packages/system/src/styles/init.css @@ -223,9 +223,14 @@ svg.xy-flow__connectionline { min-width: 5px; min-height: 5px; + &.connecting { + pointer-events: all; + } + &.connectionindicator { pointer-events: all; cursor: crosshair; + background: green; } &-bottom { diff --git a/packages/system/src/xyhandle/utils.ts b/packages/system/src/xyhandle/utils.ts index b829f691..c10356b1 100644 --- a/packages/system/src/xyhandle/utils.ts +++ b/packages/system/src/xyhandle/utils.ts @@ -38,7 +38,7 @@ export function getClosestHandle( let closestHandles: ConnectionHandle[] = []; let minDistance = Infinity; - handles.forEach((handle) => { + for (const handle of handles) { const distance = Math.sqrt(Math.pow(handle.x - pos.x, 2) + Math.pow(handle.y - pos.y, 2)); if (distance <= connectionRadius) { if (distance < minDistance) { @@ -49,7 +49,7 @@ export function getClosestHandle( } minDistance = distance; } - }); + } if (!closestHandles.length) { return null; From d9e7f1f7281e04fbf7721b05fcda9b98220cf608 Mon Sep 17 00:00:00 2001 From: peterkogo Date: Tue, 27 Feb 2024 17:13:25 +0100 Subject: [PATCH 02/15] remove debug color --- packages/system/src/styles/init.css | 1 - 1 file changed, 1 deletion(-) diff --git a/packages/system/src/styles/init.css b/packages/system/src/styles/init.css index d74519a6..04ee6c98 100644 --- a/packages/system/src/styles/init.css +++ b/packages/system/src/styles/init.css @@ -230,7 +230,6 @@ svg.xy-flow__connectionline { &.connectionindicator { pointer-events: all; cursor: crosshair; - background: green; } &-bottom { From 019909da5d4a7166cf14b7a9b1059a745345f508 Mon Sep 17 00:00:00 2001 From: peterkogo Date: Wed, 28 Feb 2024 12:23:00 +0100 Subject: [PATCH 03/15] added connectionfrom connectionto and clickconnecting css --- .../react/src/examples/TouchDevice/index.tsx | 3 +-- .../src/examples/TouchDevice/touch-device.css | 27 +++++++++++++++++++ .../TouchDevice/touch-device.module.css | 19 ------------- .../react/src/components/Handle/index.tsx | 17 +++++++----- packages/system/src/styles/init.css | 12 ++++++++- 5 files changed, 50 insertions(+), 28 deletions(-) create mode 100644 examples/react/src/examples/TouchDevice/touch-device.css delete mode 100644 examples/react/src/examples/TouchDevice/touch-device.module.css diff --git a/examples/react/src/examples/TouchDevice/index.tsx b/examples/react/src/examples/TouchDevice/index.tsx index 636a36a4..2073d13a 100644 --- a/examples/react/src/examples/TouchDevice/index.tsx +++ b/examples/react/src/examples/TouchDevice/index.tsx @@ -1,7 +1,7 @@ import { useCallback } from 'react'; import { ReactFlow, Node, Edge, useNodesState, useEdgesState, Position, Connection, addEdge } from '@xyflow/react'; -import styles from './touch-device.module.css'; +import './touch-device.css'; const initialNodes: Node[] = [ { @@ -42,7 +42,6 @@ const TouchDeviceFlow = () => { onConnectEnd={onConnectEnd} onClickConnectStart={onClickConnectStart} onClickConnectEnd={onClickConnectEnd} - className={styles.flow} /> ); }; diff --git a/examples/react/src/examples/TouchDevice/touch-device.css b/examples/react/src/examples/TouchDevice/touch-device.css new file mode 100644 index 00000000..3ec36be2 --- /dev/null +++ b/examples/react/src/examples/TouchDevice/touch-device.css @@ -0,0 +1,27 @@ +.react-flow .react-flow__handle { + width: 20px; + height: 20px; + border-radius: 3px; + background-color: #9f7aea; +} + +.react-flow__handle-right { + --translate: translate(50%, -50%); +} + +.react-flow__handle-left { + --translate: translate(-50%, -50%); +} + +@keyframes bounce { + 0% { + transform: var(--translate) scale(1); + } + 50% { + transform: var(--translate) scale(1.1); + } +} + +.react-flow .react-flow__handle.clickconnecting { + animation: bounce 1600ms infinite ease-in; +} diff --git a/examples/react/src/examples/TouchDevice/touch-device.module.css b/examples/react/src/examples/TouchDevice/touch-device.module.css deleted file mode 100644 index b5f65209..00000000 --- a/examples/react/src/examples/TouchDevice/touch-device.module.css +++ /dev/null @@ -1,19 +0,0 @@ -.flow :global .react-flow__handle { - width: 20px; - height: 20px; - border-radius: 3px; - background-color: #9f7aea; -} - -.flow :global .react-flow__handle.connecting { - animation: bounce 1600ms infinite ease-out; -} - -@keyframes bounce { - 0% { - transform: translate(0, -50%) scale(1); - } - 50% { - transform: translate(0, -50%) scale(1.1); - } -} diff --git a/packages/react/src/components/Handle/index.tsx b/packages/react/src/components/Handle/index.tsx index 25794ee6..6ab33c3b 100644 --- a/packages/react/src/components/Handle/index.tsx +++ b/packages/react/src/components/Handle/index.tsx @@ -39,10 +39,12 @@ const connectingSelector = connectionClickStartHandle: clickHandle, connectionMode, } = state; + const connectingFrom = + startHandle?.nodeId === nodeId && startHandle?.handleId === handleId && startHandle?.type === type; + const connectingTo = endHandle?.nodeId === nodeId && endHandle?.handleId === handleId && endHandle?.type === type; return { - connecting: - (startHandle?.nodeId === nodeId && startHandle?.handleId === handleId && startHandle?.type === type) || - (endHandle?.nodeId === nodeId && endHandle?.handleId === handleId && endHandle?.type === type), + connectingFrom, + connectingTo, clickConnecting: clickHandle?.nodeId === nodeId && clickHandle?.handleId === handleId && clickHandle?.type === type, isPossibleEndHandle: @@ -77,7 +79,7 @@ const HandleComponent = forwardRef( const store = useStoreApi(); const nodeId = useNodeId(); const { connectOnClick, noPanClassName, rfId } = useStore(selector, shallow); - const { connecting, clickConnecting, isPossibleEndHandle, connectionInProcess } = useStore( + const { connectingFrom, connectingTo, clickConnecting, isPossibleEndHandle, connectionInProcess } = useStore( connectingSelector(nodeId, handleId, type), shallow ); @@ -210,8 +212,11 @@ const HandleComponent = forwardRef( connectable: isConnectable, connectablestart: isConnectableStart, connectableend: isConnectableEnd, - connecting: connecting || clickConnecting, - // this class is used to style the handle when the user is connecting + clickconnecting: clickConnecting, + connectingfrom: connectingFrom, + connectingto: connectingTo, + // shows where you can start a connection from + // and where you can end it while connecting connectionindicator: isConnectable && (!connectionInProcess || isPossibleEndHandle) && diff --git a/packages/system/src/styles/init.css b/packages/system/src/styles/init.css index 04ee6c98..e4d48221 100644 --- a/packages/system/src/styles/init.css +++ b/packages/system/src/styles/init.css @@ -223,13 +223,23 @@ svg.xy-flow__connectionline { min-width: 5px; min-height: 5px; - &.connecting { + &.connectingfrom { pointer-events: all; + background: violet !important; + } + + &.clickconnecting { + background: greenyellow !important; + } + + &.connectingto { + background: red !important; } &.connectionindicator { pointer-events: all; cursor: crosshair; + background: green; } &-bottom { From 5bab60724fbbf45dd6a72cca463abad0925239e7 Mon Sep 17 00:00:00 2001 From: peterkogo Date: Wed, 28 Feb 2024 12:38:43 +0100 Subject: [PATCH 04/15] simplified --- packages/react/src/components/Handle/index.tsx | 8 +++----- 1 file changed, 3 insertions(+), 5 deletions(-) diff --git a/packages/react/src/components/Handle/index.tsx b/packages/react/src/components/Handle/index.tsx index 6ab33c3b..378edb30 100644 --- a/packages/react/src/components/Handle/index.tsx +++ b/packages/react/src/components/Handle/index.tsx @@ -39,12 +39,10 @@ const connectingSelector = connectionClickStartHandle: clickHandle, connectionMode, } = state; - const connectingFrom = - startHandle?.nodeId === nodeId && startHandle?.handleId === handleId && startHandle?.type === type; - const connectingTo = endHandle?.nodeId === nodeId && endHandle?.handleId === handleId && endHandle?.type === type; return { - connectingFrom, - connectingTo, + connectingFrom: + startHandle?.nodeId === nodeId && startHandle?.handleId === handleId && startHandle?.type === type, + connectingTo: endHandle?.nodeId === nodeId && endHandle?.handleId === handleId && endHandle?.type === type, clickConnecting: clickHandle?.nodeId === nodeId && clickHandle?.handleId === handleId && clickHandle?.type === type, isPossibleEndHandle: From 417a3f528df5b60ccd1e2cdd100d3f6f7ed7344c Mon Sep 17 00:00:00 2001 From: peterkogo Date: Wed, 28 Feb 2024 12:51:43 +0100 Subject: [PATCH 05/15] removed debug colors --- packages/system/src/styles/init.css | 10 ---------- 1 file changed, 10 deletions(-) diff --git a/packages/system/src/styles/init.css b/packages/system/src/styles/init.css index e4d48221..72f0b2e8 100644 --- a/packages/system/src/styles/init.css +++ b/packages/system/src/styles/init.css @@ -225,21 +225,11 @@ svg.xy-flow__connectionline { &.connectingfrom { pointer-events: all; - background: violet !important; - } - - &.clickconnecting { - background: greenyellow !important; - } - - &.connectingto { - background: red !important; } &.connectionindicator { pointer-events: all; cursor: crosshair; - background: green; } &-bottom { From 06f1fc4f73b1216a53a383620d1f27cd4d8de57a Mon Sep 17 00:00:00 2001 From: peterkogo Date: Wed, 28 Feb 2024 15:55:55 +0100 Subject: [PATCH 06/15] fixed NodeResizer for various NodeOrigins --- .../NodeResizer/NodeResizeControl.tsx | 3 +- packages/system/src/xyresizer/XYResizer.ts | 69 ++++++++++--------- packages/system/src/xyresizer/utils.ts | 40 +++++++---- 3 files changed, 66 insertions(+), 46 deletions(-) diff --git a/packages/react/src/additional-components/NodeResizer/NodeResizeControl.tsx b/packages/react/src/additional-components/NodeResizer/NodeResizeControl.tsx index c03c023e..1a1107b1 100644 --- a/packages/react/src/additional-components/NodeResizer/NodeResizeControl.tsx +++ b/packages/react/src/additional-components/NodeResizer/NodeResizeControl.tsx @@ -50,12 +50,13 @@ function ResizeControl({ domNode: resizeControlRef.current, nodeId: id, getStoreItems: () => { - const { nodeLookup, transform, snapGrid, snapToGrid } = store.getState(); + const { nodeLookup, transform, snapGrid, snapToGrid, nodeOrigin } = store.getState(); return { nodeLookup, transform, snapGrid, snapToGrid, + nodeOrigin, }; }, onChange: (change: XYResizerChange, childChanges: XYResizerChildChange[]) => { diff --git a/packages/system/src/xyresizer/XYResizer.ts b/packages/system/src/xyresizer/XYResizer.ts index c02ca47c..641ef3ba 100644 --- a/packages/system/src/xyresizer/XYResizer.ts +++ b/packages/system/src/xyresizer/XYResizer.ts @@ -3,7 +3,7 @@ import { select } from 'd3-selection'; import { getControlDirection, getDimensionsAfterResize, getResizeDirection } from './utils'; import { getPointerPosition } from '../utils'; -import type { CoordinateExtent, NodeBase, NodeLookup, Transform, XYPosition } from '../types'; +import type { CoordinateExtent, NodeBase, NodeLookup, NodeOrigin, Transform, XYPosition } from '../types'; import type { OnResize, OnResizeEnd, OnResizeStart, ResizeDragEvent, ShouldResize, ControlPosition } from './types'; const initPrevValues = { width: 0, height: 0, x: 0, y: 0 }; @@ -42,6 +42,7 @@ type XYResizerParams = { transform: Transform; snapGrid?: [number, number]; snapToGrid: boolean; + nodeOrigin: NodeOrigin; }; onChange: (changes: XYResizerChange, childChanges: XYResizerChildChange[]) => void; onEnd?: () => void; @@ -74,13 +75,17 @@ function nodeToParentExtent(node: NodeBase): CoordinateExtent { ]; } -function nodeToChildExtent(child: NodeBase, parent: NodeBase): CoordinateExtent { +function nodeToChildExtent(child: NodeBase, parent: NodeBase, nodeOrigin: NodeOrigin): CoordinateExtent { + const x = parent.position.x + child.position.x; + const y = parent.position.y + child.position.y; + const width = child.computed!.width! ?? 0; + const height = child.computed!.height! ?? 0; + const originOffsetX = nodeOrigin[0] * width; + const originOffsetY = nodeOrigin[1] * height; + return [ - [parent.position.x + child.position.x, parent.position.y + child.position.y], - [ - parent.position.x + child.position.x + child.computed!.width!, - parent.position.y + child.position.y + child.computed!.height!, - ], + [x - originOffsetX, y - originOffsetY], + [x + width - originOffsetX, y + height - originOffsetY], ]; } @@ -109,7 +114,7 @@ export function XYResizer({ domNode, nodeId, getStoreItems, onChange }: XYResize const dragHandler = drag() .on('start', (event: ResizeDragEvent) => { - const { nodeLookup, transform, snapGrid, snapToGrid } = getStoreItems(); + const { nodeLookup, transform, snapGrid, snapToGrid, nodeOrigin } = getStoreItems(); node = nodeLookup.get(nodeId); if (node) { @@ -151,7 +156,7 @@ export function XYResizer({ domNode, nodeId, getStoreItems, onChange }: XYResize }); if (child.extent === 'parent' || child.expandParent) { - const extent = nodeToChildExtent(child, node!); + const extent = nodeToChildExtent(child, node!, nodeOrigin); if (childExtent) { childExtent = [ @@ -169,7 +174,7 @@ export function XYResizer({ domNode, nodeId, getStoreItems, onChange }: XYResize } }) .on('drag', (event: ResizeDragEvent) => { - const { transform, snapGrid, snapToGrid } = getStoreItems(); + const { transform, snapGrid, snapToGrid, nodeOrigin } = getStoreItems(); const pointerPosition = getPointerPosition(event.sourceEvent, { transform, snapGrid, snapToGrid }); const childChanges: XYResizerChildChange[] = []; @@ -184,6 +189,7 @@ export function XYResizer({ domNode, nodeId, getStoreItems, onChange }: XYResize pointerPosition, boundaries, keepAspectRatio, + nodeOrigin, parentExtent, childExtent ); @@ -191,40 +197,39 @@ export function XYResizer({ domNode, nodeId, getStoreItems, onChange }: XYResize const isWidthChange = width !== prevWidth; const isHeightChange = height !== prevHeight; - if (controlDirection.affectsX || controlDirection.affectsY) { - const isXPosChange = x !== prevX && isWidthChange; - const isYPosChange = y !== prevY && isHeightChange; + const isXPosChange = x !== prevX && isWidthChange; + const isYPosChange = y !== prevY && isHeightChange; - if (isXPosChange || isYPosChange) { - change.isXPosChange = isXPosChange; - change.isYPosChange = isYPosChange; - change.x = isXPosChange ? x : prevX; - change.y = isYPosChange ? y : prevY; + if (isXPosChange || isYPosChange || nodeOrigin[0] === 1 || nodeOrigin[1] == 1) { + change.isXPosChange = isXPosChange; + change.isYPosChange = isYPosChange; + change.x = isXPosChange ? x : prevX; + change.y = isYPosChange ? y : prevY; - prevValues.x = change.x; - prevValues.y = change.y; + prevValues.x = change.x; + prevValues.y = change.y; - // Fix expandParent when resizing from top/left - if (parentNode && node.expandParent) { - if (change.x < 0) { - prevValues.x = 0; - startValues.x = startValues.x - change.x; - } + // Fix expandParent when resizing from top/left + if (parentNode && node.expandParent) { + if (change.x < 0) { + prevValues.x = 0; + startValues.x = startValues.x - change.x; + } - if (change.y < 0) { - prevValues.y = 0; - startValues.y = startValues.y - change.y; - } + if (change.y < 0) { + prevValues.y = 0; + startValues.y = startValues.y - change.y; } } if (childNodes.length > 0) { const xChange = x - prevX; const yChange = y - prevY; + for (const childNode of childNodes) { childNode.position = { - x: childNode.position.x - xChange, - y: childNode.position.y - yChange, + x: childNode.position.x - xChange + nodeOrigin[0] * (width - prevWidth), + y: childNode.position.y - yChange + nodeOrigin[1] * (height - prevHeight), }; childChanges.push(childNode); } diff --git a/packages/system/src/xyresizer/utils.ts b/packages/system/src/xyresizer/utils.ts index a651df3f..3e4cb83c 100644 --- a/packages/system/src/xyresizer/utils.ts +++ b/packages/system/src/xyresizer/utils.ts @@ -1,4 +1,4 @@ -import { CoordinateExtent } from '../types'; +import { CoordinateExtent, NodeOrigin } from '../types'; import { getPointerPosition } from '../utils'; import { ControlPosition } from './types'; @@ -115,6 +115,7 @@ export function getDimensionsAfterResize( pointerPosition: ReturnType, boundaries: { minWidth: number; maxWidth: number; minHeight: number; maxHeight: number }, keepAspectRatio: boolean, + nodeOrigin: NodeOrigin, extent?: CoordinateExtent, childExtent?: CoordinateExtent ) { @@ -132,6 +133,9 @@ export function getDimensionsAfterResize( const newWidth = startWidth + (affectsX ? -distX : distX); const newHeight = startHeight + (affectsY ? -distY : distY); + const originOffsetX = -nodeOrigin[0] * startWidth; + const originOffsetY = -nodeOrigin[1] * startHeight; + // Check if maxWidth, minWWidth, maxHeight, minHeight are restricting the resize let clampX = getSizeClamp(newWidth, minWidth, maxWidth); let clampY = getSizeClamp(newHeight, minHeight, maxHeight); @@ -141,15 +145,15 @@ export function getDimensionsAfterResize( let xExtentClamp = 0; let yExtentClamp = 0; if (affectsX && distX < 0) { - xExtentClamp = getLowerExtentClamp(startX + distX, extent[0][0]); + xExtentClamp = getLowerExtentClamp(startX + distX + originOffsetX, extent[0][0]); } else if (!affectsX && distX > 0) { - xExtentClamp = getUpperExtentClamp(startX + newWidth, extent[1][0]); + xExtentClamp = getUpperExtentClamp(startX + newWidth + originOffsetX, extent[1][0]); } if (affectsY && distY < 0) { - yExtentClamp = getLowerExtentClamp(startY + distY, extent[0][1]); + yExtentClamp = getLowerExtentClamp(startY + distY + originOffsetY, extent[0][1]); } else if (!affectsY && distY > 0) { - yExtentClamp = getUpperExtentClamp(startY + newHeight, extent[1][1]); + yExtentClamp = getUpperExtentClamp(startY + newHeight + originOffsetY, extent[1][1]); } clampX = Math.max(clampX, xExtentClamp); @@ -187,10 +191,12 @@ export function getDimensionsAfterResize( if (extent) { let aspectExtentClamp = 0; if ((!affectsX && !affectsY) || (affectsX && !affectsY && isDiagonal)) { - aspectExtentClamp = getUpperExtentClamp(startY + newWidth / aspectRatio, extent[1][1]) * aspectRatio; + aspectExtentClamp = + getUpperExtentClamp(startY + originOffsetY + newWidth / aspectRatio, extent[1][1]) * aspectRatio; } else { aspectExtentClamp = - getLowerExtentClamp(startY + (affectsX ? distX : -distX) / aspectRatio, extent[0][1]) * aspectRatio; + getLowerExtentClamp(startY + originOffsetY + (affectsX ? distX : -distX) / aspectRatio, extent[0][1]) * + aspectRatio; } clampX = Math.max(clampX, aspectExtentClamp); } @@ -216,10 +222,12 @@ export function getDimensionsAfterResize( if (extent) { let aspectExtentClamp = 0; if ((!affectsX && !affectsY) || (affectsY && !affectsX && isDiagonal)) { - aspectExtentClamp = getUpperExtentClamp(startX + newHeight * aspectRatio, extent[1][0]) / aspectRatio; + aspectExtentClamp = + getUpperExtentClamp(startX + newHeight * aspectRatio + originOffsetX, extent[1][0]) / aspectRatio; } else { aspectExtentClamp = - getLowerExtentClamp(startX + (affectsY ? distY : -distY) * aspectRatio, extent[0][0]) / aspectRatio; + getLowerExtentClamp(startX + (affectsY ? distY : -distY) * aspectRatio + originOffsetX, extent[0][0]) / + aspectRatio; } clampY = Math.max(clampY, aspectExtentClamp); } @@ -258,10 +266,16 @@ export function getDimensionsAfterResize( } } + const width = startWidth + (affectsX ? -distX : distX); + const height = startHeight + (affectsY ? -distY : distY); + + const x = affectsX ? startX + distX : startX; + const y = affectsY ? startY + distY : startY; + return { - width: startWidth + (affectsX ? -distX : distX), - height: startHeight + (affectsY ? -distY : distY), - x: affectsX ? startX + distX : startX, - y: affectsY ? startY + distY : startY, + width: width, + height: height, + x: nodeOrigin[0] * distX * (!affectsX ? 1 : -1) + x, + y: nodeOrigin[1] * distY * (!affectsY ? 1 : -1) + y, }; } From 87ea4f877a30be0eb5df85652d4354d8844f8880 Mon Sep 17 00:00:00 2001 From: peterkogo Date: Wed, 28 Feb 2024 16:04:46 +0100 Subject: [PATCH 07/15] support node specific origin as well --- packages/system/src/xyresizer/XYResizer.ts | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/packages/system/src/xyresizer/XYResizer.ts b/packages/system/src/xyresizer/XYResizer.ts index 641ef3ba..1953b327 100644 --- a/packages/system/src/xyresizer/XYResizer.ts +++ b/packages/system/src/xyresizer/XYResizer.ts @@ -156,7 +156,7 @@ export function XYResizer({ domNode, nodeId, getStoreItems, onChange }: XYResize }); if (child.extent === 'parent' || child.expandParent) { - const extent = nodeToChildExtent(child, node!, nodeOrigin); + const extent = nodeToChildExtent(child, node!, child.origin ?? nodeOrigin); if (childExtent) { childExtent = [ @@ -174,14 +174,14 @@ export function XYResizer({ domNode, nodeId, getStoreItems, onChange }: XYResize } }) .on('drag', (event: ResizeDragEvent) => { - const { transform, snapGrid, snapToGrid, nodeOrigin } = getStoreItems(); + const { transform, snapGrid, snapToGrid, nodeOrigin: storeNodeOrigin } = getStoreItems(); const pointerPosition = getPointerPosition(event.sourceEvent, { transform, snapGrid, snapToGrid }); const childChanges: XYResizerChildChange[] = []; if (node) { - const change = { ...initChange }; - const { x: prevX, y: prevY, width: prevWidth, height: prevHeight } = prevValues; + const change = { ...initChange }; + const nodeOrigin = node.origin ?? storeNodeOrigin; const { width, height, x, y } = getDimensionsAfterResize( startValues, From 84611e2f723b38147e9b9897c2d1479896c08e2e Mon Sep 17 00:00:00 2001 From: peterkogo Date: Wed, 28 Feb 2024 16:50:30 +0100 Subject: [PATCH 08/15] fixed node resizer & inlineWidth and inlineHeight --- .../src/lib/components/NodeWrapper/NodeWrapper.svelte | 2 +- .../src/lib/plugins/NodeResizer/ResizeControl.svelte | 5 +++-- packages/system/src/xyresizer/utils.ts | 11 +++++------ 3 files changed, 9 insertions(+), 9 deletions(-) diff --git a/packages/svelte/src/lib/components/NodeWrapper/NodeWrapper.svelte b/packages/svelte/src/lib/components/NodeWrapper/NodeWrapper.svelte index 91027f53..07d13059 100644 --- a/packages/svelte/src/lib/components/NodeWrapper/NodeWrapper.svelte +++ b/packages/svelte/src/lib/components/NodeWrapper/NodeWrapper.svelte @@ -184,7 +184,7 @@ style:z-index={zIndex} style:transform="translate({positionOriginX}px, {positionOriginY}px)" style:visibility={initialized ? 'visible' : 'hidden'} - style="{inlineStyleDimensions.width} {inlineStyleDimensions.height} {style ?? ''};" + style="{style ?? ''};{inlineStyleDimensions.width}{inlineStyleDimensions.height}" on:click={onSelectNodeHandler} on:mouseenter={(event) => dispatch('nodemouseenter', { node, event })} on:mouseleave={(event) => dispatch('nodemouseleave', { node, event })} diff --git a/packages/svelte/src/lib/plugins/NodeResizer/ResizeControl.svelte b/packages/svelte/src/lib/plugins/NodeResizer/ResizeControl.svelte index 56caa8b5..d3d1d793 100644 --- a/packages/svelte/src/lib/plugins/NodeResizer/ResizeControl.svelte +++ b/packages/svelte/src/lib/plugins/NodeResizer/ResizeControl.svelte @@ -35,7 +35,7 @@ let className: $$Props['class'] = ''; export { className as class }; - const { nodeLookup, snapGrid, viewport, nodes } = useStore(); + const { nodeLookup, snapGrid, viewport, nodes, nodeOrigin } = useStore(); const contextNodeId = getContext('svelteflow__node_id'); $: id = typeof nodeId === 'string' ? nodeId : contextNodeId; @@ -64,7 +64,8 @@ nodeLookup: $nodeLookup, transform: [$viewport.x, $viewport.y, $viewport.zoom], snapGrid: $snapGrid ?? undefined, - snapToGrid: !!$snapGrid + snapToGrid: !!$snapGrid, + nodeOrigin: $nodeOrigin }; }, onChange: (change: XYResizerChange, childChanges: XYResizerChildChange[]) => { diff --git a/packages/system/src/xyresizer/utils.ts b/packages/system/src/xyresizer/utils.ts index 3e4cb83c..b8753862 100644 --- a/packages/system/src/xyresizer/utils.ts +++ b/packages/system/src/xyresizer/utils.ts @@ -94,7 +94,7 @@ function xor(a: boolean, b: boolean) { /** * Calculates new width & height and x & y of node after resize based on pointer position - * @description - Buckle up, this is a chunky one! If you want to determine the new dimensions of a node after a resize, + * @description - Buckle up, this is a chunky one... If you want to determine the new dimensions of a node after a resize, * you have to account for all possible restrictions: min/max width/height of the node, the maximum extent the node is allowed * to move in (in this case: resize into) determined by the parent node, the minimal extent determined by child nodes * with expandParent or extent: 'parent' set and oh yeah, these things also have to work with keepAspectRatio! @@ -102,6 +102,8 @@ function xor(a: boolean, b: boolean) { * strongest restriction. Because the resize affects x, y and width, height and width, height of a opposing side with keepAspectRatio, * the resize amount is always kept in distX & distY amount (the distance in mouse movement) * Instead of clamping each value, we first calculate the biggest 'clamp' (for the lack of a better name) and then apply it to all values. + * To complicate things nodeOrigin has to be taken into account as well. This is done by offsetting the nodes depending on their origin, + * calculating the restrictions, normally and then * @param startValues - starting values of resize * @param controlDirection - dimensions affected by the resize * @param pointerPosition - the current pointer position corrected for snapping @@ -266,15 +268,12 @@ export function getDimensionsAfterResize( } } - const width = startWidth + (affectsX ? -distX : distX); - const height = startHeight + (affectsY ? -distY : distY); - const x = affectsX ? startX + distX : startX; const y = affectsY ? startY + distY : startY; return { - width: width, - height: height, + width: startWidth + (affectsX ? -distX : distX), + height: startHeight + (affectsY ? -distY : distY), x: nodeOrigin[0] * distX * (!affectsX ? 1 : -1) + x, y: nodeOrigin[1] * distY * (!affectsY ? 1 : -1) + y, }; From d43fbfdd5abaf13da96c62c9543ad94f55a2a8da Mon Sep 17 00:00:00 2001 From: peterkogo Date: Wed, 28 Feb 2024 16:51:14 +0100 Subject: [PATCH 09/15] added better example for svelte --- examples/svelte/src/routes/examples/node-resizer/+page.svelte | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) diff --git a/examples/svelte/src/routes/examples/node-resizer/+page.svelte b/examples/svelte/src/routes/examples/node-resizer/+page.svelte index 39778156..b7479b03 100644 --- a/examples/svelte/src/routes/examples/node-resizer/+page.svelte +++ b/examples/svelte/src/routes/examples/node-resizer/+page.svelte @@ -111,9 +111,10 @@ { id: '5a', type: 'defaultResizer', - data: { label: 'Child' }, + data: { label: 'Child with extent parent' }, position: { x: 50, y: 50 }, parentNode: '5', + extent: 'parent', style: nodeStyle }, { @@ -137,6 +138,7 @@ maxZoom={5} snapGrid={snapToGrid ? [10, 10] : undefined} fitView + nodeOrigin={[0.5, 0.5]} > From 5f06ef6f59a0a601cb43bc6d5ff275888237b1cd Mon Sep 17 00:00:00 2001 From: peterkogo Date: Wed, 28 Feb 2024 17:00:25 +0100 Subject: [PATCH 10/15] fixed comment --- packages/system/src/xyresizer/utils.ts | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/packages/system/src/xyresizer/utils.ts b/packages/system/src/xyresizer/utils.ts index b8753862..5c7f8532 100644 --- a/packages/system/src/xyresizer/utils.ts +++ b/packages/system/src/xyresizer/utils.ts @@ -102,8 +102,8 @@ function xor(a: boolean, b: boolean) { * strongest restriction. Because the resize affects x, y and width, height and width, height of a opposing side with keepAspectRatio, * the resize amount is always kept in distX & distY amount (the distance in mouse movement) * Instead of clamping each value, we first calculate the biggest 'clamp' (for the lack of a better name) and then apply it to all values. - * To complicate things nodeOrigin has to be taken into account as well. This is done by offsetting the nodes depending on their origin, - * calculating the restrictions, normally and then + * To complicate things nodeOrigin has to be taken into account as well. This is done by offsetting the nodes as if their origin is [0, 0], + * then calculating the restrictions as usual * @param startValues - starting values of resize * @param controlDirection - dimensions affected by the resize * @param pointerPosition - the current pointer position corrected for snapping From 68ce560cf177f6284fdeee7fff41c5663f367f60 Mon Sep 17 00:00:00 2001 From: moklick Date: Thu, 29 Feb 2024 12:53:04 +0100 Subject: [PATCH 11/15] chore(handles): cleanup --- .../react/src/examples/TouchDevice/index.tsx | 1 + .../src/examples/TouchDevice/touch-device.css | 8 ++++---- .../examples/Validation/validation.module.css | 6 +++++- .../src/routes/examples/validation/style.css | 6 +++++- packages/react/src/components/Handle/index.tsx | 10 ++++++++-- .../src/lib/components/Handle/Handle.svelte | 18 +++++++++++++++++- packages/system/src/xyhandle/XYHandle.ts | 16 +--------------- packages/system/src/xyhandle/utils.ts | 4 ---- 8 files changed, 41 insertions(+), 28 deletions(-) diff --git a/examples/react/src/examples/TouchDevice/index.tsx b/examples/react/src/examples/TouchDevice/index.tsx index 2073d13a..e412bee5 100644 --- a/examples/react/src/examples/TouchDevice/index.tsx +++ b/examples/react/src/examples/TouchDevice/index.tsx @@ -42,6 +42,7 @@ const TouchDeviceFlow = () => { onConnectEnd={onConnectEnd} onClickConnectStart={onClickConnectStart} onClickConnectEnd={onClickConnectEnd} + className="touch-flow" /> ); }; diff --git a/examples/react/src/examples/TouchDevice/touch-device.css b/examples/react/src/examples/TouchDevice/touch-device.css index 3ec36be2..92f85c27 100644 --- a/examples/react/src/examples/TouchDevice/touch-device.css +++ b/examples/react/src/examples/TouchDevice/touch-device.css @@ -1,15 +1,15 @@ -.react-flow .react-flow__handle { +.react-flow.touch-flow .react-flow__handle { width: 20px; height: 20px; border-radius: 3px; background-color: #9f7aea; } -.react-flow__handle-right { +.touch-flow .react-flow__handle-right { --translate: translate(50%, -50%); } -.react-flow__handle-left { +.touch-flow .react-flow__handle-left { --translate: translate(-50%, -50%); } @@ -22,6 +22,6 @@ } } -.react-flow .react-flow__handle.clickconnecting { +.react-flow.touch-flow .react-flow__handle.clickconnecting { animation: bounce 1600ms infinite ease-in; } diff --git a/examples/react/src/examples/Validation/validation.module.css b/examples/react/src/examples/Validation/validation.module.css index c19a8723..3fbe2f94 100644 --- a/examples/react/src/examples/Validation/validation.module.css +++ b/examples/react/src/examples/Validation/validation.module.css @@ -24,10 +24,14 @@ background: #fff; } -.validationflow :global .connecting { +.validationflow :global .connectingto { background: #ff6060; } +.validationflow :global .react-flow__node-custominput .connectingfrom { + background: #55dd99; +} + .validationflow :global .valid { background: #55dd99; } diff --git a/examples/svelte/src/routes/examples/validation/style.css b/examples/svelte/src/routes/examples/validation/style.css index 6839e129..a6bbf75a 100644 --- a/examples/svelte/src/routes/examples/validation/style.css +++ b/examples/svelte/src/routes/examples/validation/style.css @@ -1,7 +1,11 @@ -.svelte-flow__handle.connecting { +.svelte-flow__handle.connectingto { background: #ff6060; } +.svelte-flow__handle.connectingfrom { + background: #55dd99; +} + .svelte-flow__handle.valid { background: #55dd99; } diff --git a/packages/react/src/components/Handle/index.tsx b/packages/react/src/components/Handle/index.tsx index 378edb30..75c36b8c 100644 --- a/packages/react/src/components/Handle/index.tsx +++ b/packages/react/src/components/Handle/index.tsx @@ -38,11 +38,15 @@ const connectingSelector = connectionEndHandle: endHandle, connectionClickStartHandle: clickHandle, connectionMode, + connectionStatus, } = state; + + const connectingTo = endHandle?.nodeId === nodeId && endHandle?.handleId === handleId && endHandle?.type === type; + return { connectingFrom: startHandle?.nodeId === nodeId && startHandle?.handleId === handleId && startHandle?.type === type, - connectingTo: endHandle?.nodeId === nodeId && endHandle?.handleId === handleId && endHandle?.type === type, + connectingTo, clickConnecting: clickHandle?.nodeId === nodeId && clickHandle?.handleId === handleId && clickHandle?.type === type, isPossibleEndHandle: @@ -50,6 +54,7 @@ const connectingSelector = ? startHandle?.type !== type : nodeId !== startHandle?.nodeId || handleId !== startHandle?.handleId, connectionInProcess: !!startHandle, + valid: connectingTo && connectionStatus === 'valid', }; }; @@ -77,7 +82,7 @@ const HandleComponent = forwardRef( const store = useStoreApi(); const nodeId = useNodeId(); const { connectOnClick, noPanClassName, rfId } = useStore(selector, shallow); - const { connectingFrom, connectingTo, clickConnecting, isPossibleEndHandle, connectionInProcess } = useStore( + const { connectingFrom, connectingTo, clickConnecting, isPossibleEndHandle, connectionInProcess, valid } = useStore( connectingSelector(nodeId, handleId, type), shallow ); @@ -213,6 +218,7 @@ const HandleComponent = forwardRef( clickconnecting: clickConnecting, connectingfrom: connectingFrom, connectingto: connectingTo, + valid, // shows where you can start a connection from // and where you can end it while connecting connectionindicator: diff --git a/packages/svelte/src/lib/components/Handle/Handle.svelte b/packages/svelte/src/lib/components/Handle/Handle.svelte index f8a43dd4..e35804fc 100644 --- a/packages/svelte/src/lib/components/Handle/Handle.svelte +++ b/packages/svelte/src/lib/components/Handle/Handle.svelte @@ -56,7 +56,8 @@ onconnect: onConnectAction, onconnectstart: onConnectStartAction, onconnectend: onConnectEndAction, - flowId + flowId, + connection } = store; function onPointerDown(event: MouseEvent | TouchEvent) { @@ -123,6 +124,16 @@ prevConnections = connections ?? new Map(); } + $: connectingFrom = + $connection.startHandle?.nodeId === nodeId && + $connection.startHandle?.type === type && + $connection.startHandle?.handleId === handleId; + $: connectingTo = + $connection.endHandle?.nodeId === nodeId && + $connection.endHandle?.type === type && + $connection.endHandle?.handleId === handleId; + $: valid = connectingTo && $connection.status === 'valid'; + // @todo implement connectablestart, connectableend @@ -141,6 +152,11 @@ The Handle component is the part of a node that can be used to connect nodes. 'nodrag', 'nopan', position, + { + valid, + connectingto: connectingTo, + connectingfrom: connectingFrom + }, className ])} class:source={!isTarget} diff --git a/packages/system/src/xyhandle/XYHandle.ts b/packages/system/src/xyhandle/XYHandle.ts index 4ddb5313..4f99a97c 100644 --- a/packages/system/src/xyhandle/XYHandle.ts +++ b/packages/system/src/xyhandle/XYHandle.ts @@ -15,7 +15,7 @@ import { type ConnectionHandle, } from '../types'; -import { getClosestHandle, getConnectionStatus, getHandleLookup, getHandleType, resetRecentHandle } from './utils'; +import { getClosestHandle, getConnectionStatus, getHandleLookup, getHandleType } from './utils'; export type OnPointerDownParams = { autoPanOnConnect: boolean; @@ -107,7 +107,6 @@ function onPointerDown( return; } - let prevActiveHandle: Element; let connectionPosition = getEventPosition(event, containerBounds); let autoPanStarted = false; let connection: Connection | null = null; @@ -194,18 +193,6 @@ function onPointerDown( connectionStatus: getConnectionStatus(!!closestHandle, isValid), connectionEndHandle: result.endHandle, }); - - if (!closestHandle && !isValid && !handleDomNode) { - return resetRecentHandle(prevActiveHandle, lib); - } - - if (connection?.source !== connection?.target && handleDomNode) { - resetRecentHandle(prevActiveHandle, lib); - prevActiveHandle = handleDomNode; - handleDomNode.classList.add('connecting', `${lib}-flow__handle-connecting`); - handleDomNode.classList.toggle('valid', isValid); - handleDomNode.classList.toggle(`${lib}-flow__handle-valid`, isValid); - } } function onPointerUp(event: MouseEvent | TouchEvent) { @@ -221,7 +208,6 @@ function onPointerDown( onEdgeUpdateEnd?.(event); } - resetRecentHandle(prevActiveHandle, lib); cancelConnection(); cancelAnimationFrame(autoPanId); autoPanStarted = false; diff --git a/packages/system/src/xyhandle/utils.ts b/packages/system/src/xyhandle/utils.ts index c10356b1..8c82f6e3 100644 --- a/packages/system/src/xyhandle/utils.ts +++ b/packages/system/src/xyhandle/utils.ts @@ -101,10 +101,6 @@ export function getHandleType( return null; } -export function resetRecentHandle(handleDomNode: Element, lib: string): void { - handleDomNode?.classList.remove('valid', 'connecting', `${lib}-flow__handle-valid`, `${lib}-flow__handle-connecting`); -} - export function getConnectionStatus(isInsideConnectionRadius: boolean, isHandleValid: boolean) { let connectionStatus = null; From 59e656ea24aca044851971930da823644f159faa Mon Sep 17 00:00:00 2001 From: moklick Date: Thu, 29 Feb 2024 12:54:24 +0100 Subject: [PATCH 12/15] chore(changelogs) --- packages/react/CHANGELOG.md | 1 + packages/svelte/CHANGELOG.md | 1 + 2 files changed, 2 insertions(+) diff --git a/packages/react/CHANGELOG.md b/packages/react/CHANGELOG.md index 69b51bf7..0f5f3b92 100644 --- a/packages/react/CHANGELOG.md +++ b/packages/react/CHANGELOG.md @@ -5,6 +5,7 @@ ## ⚠️ Breaking changes - `useNodesData` not only returns data objects but also the type and the id of the node +- status class names for Handle components are slightly different. It's now "connectingfrom" and "connectingto" instead of "connecting" ## Patch changes diff --git a/packages/svelte/CHANGELOG.md b/packages/svelte/CHANGELOG.md index 948e69eb..ea7f4181 100644 --- a/packages/svelte/CHANGELOG.md +++ b/packages/svelte/CHANGELOG.md @@ -5,6 +5,7 @@ ## ⚠️ Breaking changes - `useNodesData` not only returns data objects but also the type and the id of the node +- status class names for Handle components are slightly different. It's now "connectingfrom" and "connectingto" instead of "connecting" ## Patch changes From 0de6d4db332842e0188d4e86e0074c172aad5743 Mon Sep 17 00:00:00 2001 From: moklick Date: Thu, 29 Feb 2024 13:21:16 +0100 Subject: [PATCH 13/15] chore(examples): use width/height for specifying node sizes --- .../react/src/examples/NodeResizer/index.tsx | 23 +++++++++++++------ 1 file changed, 16 insertions(+), 7 deletions(-) diff --git a/examples/react/src/examples/NodeResizer/index.tsx b/examples/react/src/examples/NodeResizer/index.tsx index 42e83523..b0a272f2 100644 --- a/examples/react/src/examples/NodeResizer/index.tsx +++ b/examples/react/src/examples/NodeResizer/index.tsx @@ -50,7 +50,9 @@ const initialNodes: Node[] = [ maxHeight: 200, }, position: { x: 0, y: 60 }, - style: { ...nodeStyle, width: 100, height: 80 }, + width: 100, + height: 80, + style: { ...nodeStyle }, }, { id: '1b', @@ -64,9 +66,9 @@ const initialNodes: Node[] = [ maxHeight: 400, }, position: { x: 250, y: 0 }, + width: 174, + height: 123, style: { - width: 174, - height: 123, ...nodeStyle, }, }, @@ -75,7 +77,9 @@ const initialNodes: Node[] = [ type: 'customResizer', data: { label: 'custom resize icon' }, position: { x: 0, y: 200 }, - style: { width: 100, height: 60, ...nodeStyle }, + width: 100, + height: 60, + style: { ...nodeStyle }, }, { id: '3', @@ -94,7 +98,8 @@ const initialNodes: Node[] = [ keepAspectRatio: true, }, position: { x: 400, y: 200 }, - style: { ...nodeStyle, height: 50 }, + height: 50, + style: { ...nodeStyle }, }, { id: '4', @@ -121,7 +126,9 @@ const initialNodes: Node[] = [ type: 'defaultResizer', data: { label: 'Parent', keepAspectRatio: true }, position: { x: 700, y: 0 }, - style: { ...nodeStyle, width: 300, height: 400 }, + width: 300, + height: 400, + style: { ...nodeStyle }, }, { id: '5a', @@ -132,7 +139,9 @@ const initialNodes: Node[] = [ position: { x: 50, y: 50 }, parentNode: '5', extent: 'parent', - style: { ...nodeStyle, width: 50, height: 100 }, + width: 50, + height: 100, + style: { ...nodeStyle }, }, { id: '5b', From 52bdb12cf1eb22ae156770310c1d816f01aacba6 Mon Sep 17 00:00:00 2001 From: moklick Date: Thu, 29 Feb 2024 13:22:47 +0100 Subject: [PATCH 14/15] chore(changelogs): update --- packages/react/CHANGELOG.md | 1 + packages/svelte/CHANGELOG.md | 1 + 2 files changed, 2 insertions(+) diff --git a/packages/react/CHANGELOG.md b/packages/react/CHANGELOG.md index 0f5f3b92..051fdbd9 100644 --- a/packages/react/CHANGELOG.md +++ b/packages/react/CHANGELOG.md @@ -13,6 +13,7 @@ - `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 - add `initialWidth` and `initialHeight` node attributes for specifying initial dimensions for ssr +- fix `NodeResizer` when used in combination with `nodeOrigin` ## 12.0.0-next.9 diff --git a/packages/svelte/CHANGELOG.md b/packages/svelte/CHANGELOG.md index ea7f4181..365f85cb 100644 --- a/packages/svelte/CHANGELOG.md +++ b/packages/svelte/CHANGELOG.md @@ -11,6 +11,7 @@ - better cursor defaults for the pane, nodes and edges - add `initialWidth` and `initialHeight` node attributes for specifying initial dimensions for ssr +- fix `NodeResizer` when used in combination with `nodeOrigin` ## 0.0.36 From 87d363371b2942277b651bdec537ef1e2b55f3ff Mon Sep 17 00:00:00 2001 From: moklick Date: Thu, 29 Feb 2024 19:44:45 +0100 Subject: [PATCH 15/15] fix(react): handle drag for nodes that are initially hidden --- packages/react/src/hooks/useDrag.ts | 34 ++++++++++++++--------------- 1 file changed, 16 insertions(+), 18 deletions(-) diff --git a/packages/react/src/hooks/useDrag.ts b/packages/react/src/hooks/useDrag.ts index 52d3c6f6..ee26cc57 100644 --- a/packages/react/src/hooks/useDrag.ts +++ b/packages/react/src/hooks/useDrag.ts @@ -31,24 +31,22 @@ export function useDrag({ const xyDrag = useRef(); useEffect(() => { - if (nodeRef?.current) { - xyDrag.current = XYDrag({ - getStoreItems: () => store.getState(), - onNodeMouseDown: (id: string) => { - handleNodeClick({ - id, - store, - nodeRef, - }); - }, - onDragStart: () => { - setDragging(true); - }, - onDragStop: () => { - setDragging(false); - }, - }); - } + xyDrag.current = XYDrag({ + getStoreItems: () => store.getState(), + onNodeMouseDown: (id: string) => { + handleNodeClick({ + id, + store, + nodeRef, + }); + }, + onDragStart: () => { + setDragging(true); + }, + onDragStop: () => { + setDragging(false); + }, + }); }, []); useEffect(() => {