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, }; }