From c5f394e1f77ce6ed7a6487d74b07dd4b1c22a488 Mon Sep 17 00:00:00 2001 From: peterkogo Date: Mon, 15 Apr 2024 15:58:25 +0200 Subject: [PATCH] use evaluateNodePosition for parentExpand --- .../NodeResizer/NodeResizeControl.tsx | 28 +++++++--------- packages/react/src/store/index.ts | 15 +++++---- packages/system/src/utils/store.ts | 32 +++++++------------ 3 files changed, 30 insertions(+), 45 deletions(-) diff --git a/packages/react/src/additional-components/NodeResizer/NodeResizeControl.tsx b/packages/react/src/additional-components/NodeResizer/NodeResizeControl.tsx index 725639b2..6ca54676 100644 --- a/packages/react/src/additional-components/NodeResizer/NodeResizeControl.tsx +++ b/packages/react/src/additional-components/NodeResizer/NodeResizeControl.tsx @@ -10,12 +10,13 @@ import { type NodeDimensionChange, type NodePositionChange, handleParentExpand, + evaluateNodePosition, } from '@xyflow/system'; import { useStoreApi } from '../../hooks/useStore'; import { useNodeId } from '../../contexts/NodeIdContext'; import type { ResizeControlProps, ResizeControlLineProps } from './types'; -import { InternalNode } from '../../types'; +import { InternalNode, Node } from '../../types'; type InternalNodeWithParentExpand = InternalNode & { expandParent: true; parentId: string }; @@ -73,32 +74,25 @@ function ResizeControl({ const node = nodeLookup.get(id); if (node && node.expandParent && node.parentId) { - const nodeWithChange = { + const nodeWithChange: Node = { ...node, position: { - x: change.x, - y: change.y, + x: change.x ?? node.position.x, + y: change.y ?? node.position.y, }, width: change.width, height: change.height, - measured: { - width: change.width ?? node.measured?.width, - height: change.height ?? node.measured?.height, - }, - } as InternalNodeWithParentExpand; + }; - const parentExpandChanges = handleParentExpand([nodeWithChange], nodeLookup); - if (parentExpandChanges.length > 0) { - newPosition.x = change.x && change.x < 0 ? 0 : change.x; - newPosition.y = change.y && change.y < 0 ? 0 : change.y; - } else { - console.log('there was no parent expand'); - } + const nodeWith = evaluateNodePosition(nodeWithChange, nodeLookup) as InternalNodeWithParentExpand; + + const parentExpandChanges = handleParentExpand([nodeWith], nodeLookup); changes.push(...parentExpandChanges); + newPosition.x = change.x ? Math.max(0, change.x) : undefined; + newPosition.y = change.y ? Math.max(0, change.y) : undefined; } if (change.x !== undefined && change.y !== undefined) { - console.log(newPosition); const positionChange: NodePositionChange = { id, type: 'position', diff --git a/packages/react/src/store/index.ts b/packages/react/src/store/index.ts index 7ce263c9..f02e74f4 100644 --- a/packages/react/src/store/index.ts +++ b/packages/react/src/store/index.ts @@ -117,7 +117,8 @@ const createRFStore = ({ }, updateNodePositions: (nodeDragItems, dragging = false) => { const { nodeLookup } = get(); - const triggerChangeNodes: InternalNode[] = []; + type ExpandParentInternalNode = InternalNode & { parentId: string; expandParent: true }; + const expandParentNodes: ExpandParentInternalNode[] = []; const changes: NodeChange[] = nodeDragItems.map((node) => { // @todo add expandParent to drag item so that we can get rid of the look up here @@ -129,15 +130,15 @@ const createRFStore = ({ dragging, }; - if (internalNode?.expandParent && change.position) { - triggerChangeNodes.push({ + if (internalNode?.expandParent && internalNode?.parentId && change.position) { + expandParentNodes.push({ ...internalNode, - position: change.position, + position: { ...node.position }, internals: { ...internalNode.internals, positionAbsolute: node.internals.positionAbsolute, }, - }); + } as ExpandParentInternalNode); change.position.x = Math.max(0, change.position.x); change.position.y = Math.max(0, change.position.y); @@ -146,8 +147,8 @@ const createRFStore = ({ return change; }); - if (triggerChangeNodes.length > 0) { - const parentExpandChanges = handleParentExpand(triggerChangeNodes, nodeLookup); + if (expandParentNodes.length > 0) { + const parentExpandChanges = handleParentExpand(expandParentNodes, nodeLookup); changes.push(...parentExpandChanges); } diff --git a/packages/system/src/utils/store.ts b/packages/system/src/utils/store.ts index 11b5e3c6..3d8727c2 100644 --- a/packages/system/src/utils/store.ts +++ b/packages/system/src/utils/store.ts @@ -145,10 +145,10 @@ function calculateXYZPosition( ); } -type NodeWithExpandParent = NodeType & { parentId: string; expandParent: true }; +type ExpandParentNode = NodeType & { parentId: string; expandParent: true }; export function handleParentExpand( - nodes: NodeWithExpandParent[], + nodes: ExpandParentNode[], nodeLookup: NodeLookup ): (NodeDimensionChange | NodePositionChange)[] { const changes: (NodeDimensionChange | NodePositionChange)[] = []; @@ -160,7 +160,7 @@ export function handleParentExpand( continue; } - const parentRect = chilNodeRects.get(node.parentId) || nodeToRect(parentNode, node.origin); + const parentRect = chilNodeRects.get(node.parentId) ?? nodeToRect(parentNode, node.origin); const expandedRect = getBoundsOfRects(parentRect, nodeToRect(node, node.origin)); chilNodeRects.set(node.parentId, expandedRect); } @@ -171,10 +171,9 @@ export function handleParentExpand( const { position } = getNodePositionWithOrigin(origParent, origParent.origin); const dimensions = getNodeDimensions(origParent); - if (rect.x < position.x || rect.y < position.y) { - const xChange = Math.round(Math.abs(position.x - rect.x)); - const yChange = Math.round(Math.abs(position.y - rect.y)); - + let xChange = rect.x < position.x ? Math.round(Math.abs(position.x - rect.x)) : 0; + let yChange = rect.y < position.y ? Math.round(Math.abs(position.y - rect.y)) : 0; + if (xChange > 0 || yChange > 0) { changes.push({ id, type: 'position', @@ -183,25 +182,16 @@ export function handleParentExpand( y: position.y - yChange, }, }); - - changes.push({ - id, - type: 'dimensions', - resizing: true, - dimensions: { - width: dimensions.width + xChange, - height: dimensions.height + yChange, - }, - }); } + if (dimensions.width < rect.width || dimensions.height < rect.height) { changes.push({ id, type: 'dimensions', resizing: true, dimensions: { - width: Math.max(dimensions.width, rect.width), - height: Math.max(dimensions.height, rect.height), + width: Math.max(dimensions.width, Math.round(rect.width)), + height: Math.max(dimensions.height, Math.round(rect.height)), }, }); } @@ -228,7 +218,7 @@ export function updateNodeInternals( const style = window.getComputedStyle(viewportNode); const { m22: zoom } = new window.DOMMatrixReadOnly(style.transform); // in this array we collect nodes, that might trigger changes (like expanding parent) - const parentExpandNodes: NodeWithExpandParent[] = []; + const parentExpandNodes: ExpandParentNode[] = []; updates.forEach((update) => { const node = nodeLookup.get(update.id); @@ -275,7 +265,7 @@ export function updateNodeInternals( }); if (newNode.expandParent && newNode.parentId) { - parentExpandNodes.push(newNode as NodeWithExpandParent); + parentExpandNodes.push(newNode as ExpandParentNode); } } }