From 87086e99975dfbdd0b4424c640e7075cf94c07dd Mon Sep 17 00:00:00 2001 From: peterkogo Date: Mon, 15 Apr 2024 17:23:14 +0200 Subject: [PATCH] added correct expandParent offset of children --- .../NodeResizer/NodeResizeControl.tsx | 4 ++-- packages/react/src/store/index.ts | 13 ++++++++--- packages/svelte/src/lib/store/index.ts | 1 + packages/system/src/types/nodes.ts | 1 + packages/system/src/utils/store.ts | 23 ++++++++++++++++--- 5 files changed, 34 insertions(+), 8 deletions(-) diff --git a/packages/react/src/additional-components/NodeResizer/NodeResizeControl.tsx b/packages/react/src/additional-components/NodeResizer/NodeResizeControl.tsx index 6ca54676..b661ebde 100644 --- a/packages/react/src/additional-components/NodeResizer/NodeResizeControl.tsx +++ b/packages/react/src/additional-components/NodeResizer/NodeResizeControl.tsx @@ -67,7 +67,7 @@ function ResizeControl({ }; }, onChange: (change: XYResizerChange, childChanges: XYResizerChildChange[]) => { - const { triggerNodeChanges, nodeLookup } = store.getState(); + const { triggerNodeChanges, nodeLookup, parentLookup } = store.getState(); const changes: NodeChange[] = []; const newPosition = { x: change.x, y: change.y }; @@ -86,7 +86,7 @@ function ResizeControl({ const nodeWith = evaluateNodePosition(nodeWithChange, nodeLookup) as InternalNodeWithParentExpand; - const parentExpandChanges = handleParentExpand([nodeWith], nodeLookup); + const parentExpandChanges = handleParentExpand([nodeWith], nodeLookup, parentLookup); changes.push(...parentExpandChanges); newPosition.x = change.x ? Math.max(0, change.x) : undefined; newPosition.y = change.y ? Math.max(0, change.y) : undefined; diff --git a/packages/react/src/store/index.ts b/packages/react/src/store/index.ts index 682915da..c38a980f 100644 --- a/packages/react/src/store/index.ts +++ b/packages/react/src/store/index.ts @@ -76,6 +76,7 @@ const createRFStore = ({ onNodesChange, fitView, nodeLookup, + parentLookup, fitViewOnInit, fitViewDone, fitViewOnInitOptions, @@ -84,7 +85,13 @@ const createRFStore = ({ debug, } = get(); - const { changes, updatedInternals } = updateNodeInternalsSystem(updates, nodeLookup, domNode, nodeOrigin); + const { changes, updatedInternals } = updateNodeInternalsSystem( + updates, + nodeLookup, + parentLookup, + domNode, + nodeOrigin + ); if (!updatedInternals) { return; @@ -116,7 +123,7 @@ const createRFStore = ({ } }, updateNodePositions: (nodeDragItems, dragging = false) => { - const { nodeLookup } = get(); + const { nodeLookup, parentLookup } = get(); type ExpandParentInternalNode = InternalNode & { parentId: string; expandParent: true }; const expandParentNodes: ExpandParentInternalNode[] = []; @@ -148,7 +155,7 @@ const createRFStore = ({ }); if (expandParentNodes.length > 0) { - const parentExpandChanges = handleParentExpand(expandParentNodes, nodeLookup); + const parentExpandChanges = handleParentExpand(expandParentNodes, nodeLookup, parentLookup); changes.push(...parentExpandChanges); } diff --git a/packages/svelte/src/lib/store/index.ts b/packages/svelte/src/lib/store/index.ts index c808d2af..07d4ab76 100644 --- a/packages/svelte/src/lib/store/index.ts +++ b/packages/svelte/src/lib/store/index.ts @@ -83,6 +83,7 @@ export function createStore({ const { changes, updatedInternals } = updateNodeInternalsSystem( updates, nodeLookup, + get(store.parentLookup), get(store.domNode), get(store.nodeOrigin) ); diff --git a/packages/system/src/types/nodes.ts b/packages/system/src/types/nodes.ts index d802dad8..7e6d7f14 100644 --- a/packages/system/src/types/nodes.ts +++ b/packages/system/src/types/nodes.ts @@ -144,3 +144,4 @@ export type NodeHandle = Optional; export type Align = 'center' | 'start' | 'end'; export type NodeLookup = Map; +export type ParentLookup = Map; diff --git a/packages/system/src/utils/store.ts b/packages/system/src/utils/store.ts index 55aa368b..07044503 100644 --- a/packages/system/src/utils/store.ts +++ b/packages/system/src/utils/store.ts @@ -15,6 +15,7 @@ import { Rect, NodeDimensionChange, NodePositionChange, + ParentLookup, } from '../types'; import { getDimensions, getHandleBounds } from './dom'; import { getBoundsOfRects, getNodeDimensions, isNumeric, nodeToRect } from './general'; @@ -160,7 +161,8 @@ type ExpandParentNode = NodeType & { parentId: string; expandParent: t export function handleParentExpand( nodes: ExpandParentNode[], - nodeLookup: NodeLookup + nodeLookup: NodeLookup, + parentLookup: ParentLookup ): (NodeDimensionChange | NodePositionChange)[] { const changes: (NodeDimensionChange | NodePositionChange)[] = []; const chilNodeRects = new Map(); @@ -193,6 +195,20 @@ export function handleParentExpand( y: position.y - yChange, }, }); + + const childNodes = parentLookup.get(id); + childNodes?.forEach((childNode) => { + if (!nodes.find((n) => n.id === childNode.id)) { + changes.push({ + id: childNode.id, + type: 'position', + position: { + x: childNode.position.x + xChange, + y: childNode.position.y + yChange, + }, + }); + } + }); } if (dimensions.width < rect.width || dimensions.height < rect.height) { @@ -214,7 +230,8 @@ export function handleParentExpand( export function updateNodeInternals( updates: Map, - nodeLookup: Map, + nodeLookup: NodeLookup, + parentLookup: ParentLookup, domNode: HTMLElement | null, nodeOrigin?: NodeOrigin ): { changes: (NodeDimensionChange | NodePositionChange)[]; updatedInternals: boolean } { @@ -284,7 +301,7 @@ export function updateNodeInternals( }); if (parentExpandNodes.length > 0) { - const parentExpandChanges = handleParentExpand(parentExpandNodes, nodeLookup); + const parentExpandChanges = handleParentExpand(parentExpandNodes, nodeLookup, parentLookup); changes.push(...parentExpandChanges); }