diff --git a/packages/react/src/additional-components/NodeResizer/NodeResizeControl.tsx b/packages/react/src/additional-components/NodeResizer/NodeResizeControl.tsx index 2052c98b..4ee8ff4a 100644 --- a/packages/react/src/additional-components/NodeResizer/NodeResizeControl.tsx +++ b/packages/react/src/additional-components/NodeResizer/NodeResizeControl.tsx @@ -66,7 +66,7 @@ function ResizeControl({ const changes: NodeChange[] = []; - if (change.isXPosChange || change.isYPosChange) { + if (change.x !== undefined && change.y !== undefined) { const positionChange: NodePositionChange = { id, type: 'position', @@ -79,7 +79,7 @@ function ResizeControl({ changes.push(positionChange); } - if (change.isWidthChange || change.isHeightChange) { + if (change.width !== undefined && change.height !== undefined) { const dimensionChange: NodeDimensionChange = { id, type: 'dimensions', diff --git a/packages/svelte/src/lib/plugins/NodeResizer/ResizeControl.svelte b/packages/svelte/src/lib/plugins/NodeResizer/ResizeControl.svelte index c346bd53..1e5f39e2 100644 --- a/packages/svelte/src/lib/plugins/NodeResizer/ResizeControl.svelte +++ b/packages/svelte/src/lib/plugins/NodeResizer/ResizeControl.svelte @@ -70,23 +70,27 @@ }, onChange: (change: XYResizerChange, childChanges: XYResizerChildChange[]) => { const node = $nodeLookup.get(id)?.internals.userNode; - if (node) { - node.height = change.isHeightChange ? change.height : node.height; - node.width = change.isWidthChange ? change.width : node.width; - node.position = - change.isXPosChange || change.isYPosChange - ? { x: change.x, y: change.y } - : node.position; - - for (const childChange of childChanges) { - const childNode = $nodeLookup.get(childChange.id)?.internals.userNode; - if (childNode) { - childNode.position = childChange.position; - } - } - - $nodes = $nodes; + if (!node) { + return; } + + if (change.x !== undefined && change.y !== undefined) { + node.position = { x: change.x, y: change.y }; + } + + if (change.width !== undefined && change.height !== undefined) { + node.width = change.width; + node.height = change.height; + } + + for (const childChange of childChanges) { + const childNode = $nodeLookup.get(childChange.id)?.internals.userNode; + if (childNode) { + childNode.position = childChange.position; + } + } + + $nodes = $nodes; } }); } diff --git a/packages/system/src/xyresizer/XYResizer.ts b/packages/system/src/xyresizer/XYResizer.ts index 50a3e4aa..abce3e14 100644 --- a/packages/system/src/xyresizer/XYResizer.ts +++ b/packages/system/src/xyresizer/XYResizer.ts @@ -15,19 +15,13 @@ const initStartValues = { aspectRatio: 1, }; -const initChange = { - x: 0, - y: 0, - width: 0, - height: 0, - isXPosChange: false, - isYPosChange: false, - isWidthChange: false, - isHeightChange: false, +export type XYResizerChange = { + x?: number; + y?: number; + width?: number; + height?: number; }; -export type XYResizerChange = typeof initChange; - export type XYResizerChildChange = { id: string; position: XYPosition; @@ -117,158 +111,161 @@ export function XYResizer({ domNode, nodeId, getStoreItems, onChange }: XYResize const { nodeLookup, transform, snapGrid, snapToGrid, nodeOrigin } = getStoreItems(); node = nodeLookup.get(nodeId); - if (node) { - const { xSnapped, ySnapped } = getPointerPosition(event.sourceEvent, { transform, snapGrid, snapToGrid }); + if (!node) { + return; + } - prevValues = { - width: node.measured?.width ?? 0, - height: node.measured?.height ?? 0, - x: node.position.x ?? 0, - y: node.position.y ?? 0, - }; + const { xSnapped, ySnapped } = getPointerPosition(event.sourceEvent, { transform, snapGrid, snapToGrid }); - startValues = { - ...prevValues, - pointerX: xSnapped, - pointerY: ySnapped, - aspectRatio: prevValues.width / prevValues.height, - }; + prevValues = { + width: node.measured?.width ?? 0, + height: node.measured?.height ?? 0, + x: node.position.x ?? 0, + y: node.position.y ?? 0, + }; - parentNode = undefined; - if (node.extent === 'parent' || node.expandParent) { - parentNode = nodeLookup.get(node.parentId!); - if (parentNode && node.extent === 'parent') { - parentExtent = nodeToParentExtent(parentNode); - } + startValues = { + ...prevValues, + pointerX: xSnapped, + pointerY: ySnapped, + aspectRatio: prevValues.width / prevValues.height, + }; + + parentNode = undefined; + if (node.extent === 'parent' || node.expandParent) { + parentNode = nodeLookup.get(node.parentId!); + if (parentNode && node.extent === 'parent') { + parentExtent = nodeToParentExtent(parentNode); } + } - // Collect all child nodes to correct their relative positions when top/left changes - // Determine largest minimal extent the parent node is allowed to resize to - childNodes = []; - childExtent = undefined; + // Collect all child nodes to correct their relative positions when top/left changes + // Determine largest minimal extent the parent node is allowed to resize to + childNodes = []; + childExtent = undefined; - for (const [childId, child] of nodeLookup) { - if (child.parentId === nodeId) { - childNodes.push({ - id: childId, - position: { ...child.position }, - extent: child.extent, - }); + for (const [childId, child] of nodeLookup) { + if (child.parentId === nodeId) { + childNodes.push({ + id: childId, + position: { ...child.position }, + extent: child.extent, + }); - if (child.extent === 'parent' || child.expandParent) { - const extent = nodeToChildExtent(child, node!, child.origin ?? nodeOrigin); + if (child.extent === 'parent' || child.expandParent) { + const extent = nodeToChildExtent(child, node!, child.origin ?? nodeOrigin); - if (childExtent) { - childExtent = [ - [Math.min(extent[0][0], childExtent[0][0]), Math.min(extent[0][1], childExtent[0][1])], - [Math.max(extent[1][0], childExtent[1][0]), Math.max(extent[1][1], childExtent[1][1])], - ]; - } else { - childExtent = extent; - } + if (childExtent) { + childExtent = [ + [Math.min(extent[0][0], childExtent[0][0]), Math.min(extent[0][1], childExtent[0][1])], + [Math.max(extent[1][0], childExtent[1][0]), Math.max(extent[1][1], childExtent[1][1])], + ]; + } else { + childExtent = extent; } } } - - onResizeStart?.(event, { ...prevValues }); } + + onResizeStart?.(event, { ...prevValues }); }) .on('drag', (event: ResizeDragEvent) => { const { transform, snapGrid, snapToGrid, nodeOrigin: storeNodeOrigin } = getStoreItems(); const pointerPosition = getPointerPosition(event.sourceEvent, { transform, snapGrid, snapToGrid }); const childChanges: XYResizerChildChange[] = []; - if (node) { - 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, - controlDirection, - pointerPosition, - boundaries, - keepAspectRatio, - nodeOrigin, - parentExtent, - childExtent - ); - - const isWidthChange = width !== prevWidth; - const isHeightChange = height !== prevHeight; - - const isXPosChange = x !== prevX && isWidthChange; - const isYPosChange = y !== prevY && isHeightChange; - - 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; - - // 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 (childNodes.length > 0) { - const xChange = x - prevX; - const yChange = y - prevY; - - for (const childNode of childNodes) { - childNode.position = { - x: childNode.position.x - xChange + nodeOrigin[0] * (width - prevWidth), - y: childNode.position.y - yChange + nodeOrigin[1] * (height - prevHeight), - }; - childChanges.push(childNode); - } - } - } - - if (isWidthChange || isHeightChange) { - change.isWidthChange = isWidthChange; - change.isHeightChange = isHeightChange; - change.width = width; - change.height = height; - prevValues.width = change.width; - prevValues.height = change.height; - } - - if (!change.isXPosChange && !change.isYPosChange && !isWidthChange && !isHeightChange) { - return; - } - - const direction = getResizeDirection({ - width: prevValues.width, - prevWidth, - height: prevValues.height, - prevHeight, - affectsX: controlDirection.affectsX, - affectsY: controlDirection.affectsY, - }); - - const nextValues = { ...prevValues, direction }; - - const callResize = shouldResize?.(event, nextValues); - - if (callResize === false) { - return; - } - - onResize?.(event, nextValues); - onChange(change, childChanges); + if (!node) { + return; } + const { x: prevX, y: prevY, width: prevWidth, height: prevHeight } = prevValues; + const change: XYResizerChange = {}; + const nodeOrigin = node.origin ?? storeNodeOrigin; + + const { width, height, x, y } = getDimensionsAfterResize( + startValues, + controlDirection, + pointerPosition, + boundaries, + keepAspectRatio, + nodeOrigin, + parentExtent, + childExtent + ); + + const isWidthChange = width !== prevWidth; + const isHeightChange = height !== prevHeight; + + const isXPosChange = x !== prevX && isWidthChange; + const isYPosChange = y !== prevY && isHeightChange; + + if (!isXPosChange && !isYPosChange && !isWidthChange && !isHeightChange) { + return; + } + + console.log(isXPosChange, x, isYPosChange, y); + + if (isXPosChange || isYPosChange || nodeOrigin[0] === 1 || nodeOrigin[1] == 1) { + change.x = isXPosChange ? x : prevValues.x; + change.y = isYPosChange ? y : prevValues.y; + + prevValues.x = change.x; + prevValues.y = change.y; + + // Fix expandParent when resizing from top/left + if (parentNode && node.expandParent) { + if (change.x && change.x < 0) { + prevValues.x = 0; + startValues.x = startValues.x - change.x; + } + + if (change.y && 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 + nodeOrigin[0] * (width - prevWidth), + y: childNode.position.y - yChange + nodeOrigin[1] * (height - prevHeight), + }; + childChanges.push(childNode); + } + } + } + + if (isWidthChange || isHeightChange) { + change.width = isWidthChange ? width : prevValues.width; + change.height = isHeightChange ? height : prevValues.height; + prevValues.width = change.width; + prevValues.height = change.height; + } + + console.log(change); + + const direction = getResizeDirection({ + width: prevValues.width, + prevWidth, + height: prevValues.height, + prevHeight, + affectsX: controlDirection.affectsX, + affectsY: controlDirection.affectsY, + }); + + const nextValues = { ...prevValues, direction }; + + const callResize = shouldResize?.(event, nextValues); + + if (callResize === false) { + return; + } + + onResize?.(event, nextValues); + onChange(change, childChanges); }) .on('end', (event: ResizeDragEvent) => { onResizeEnd?.(event, { ...prevValues });