diff --git a/packages/react/src/hooks/useMoveSelectedNodes.ts b/packages/react/src/hooks/useMoveSelectedNodes.ts index 4c2ef93b..c627628a 100644 --- a/packages/react/src/hooks/useMoveSelectedNodes.ts +++ b/packages/react/src/hooks/useMoveSelectedNodes.ts @@ -8,7 +8,7 @@ const selectedAndDraggable = (nodesDraggable: boolean) => (n: Node) => n.selected && (n.draggable || (nodesDraggable && typeof n.draggable === 'undefined')); /** - * Hook for updating node positions with keyboard presses + * Hook for updating node positions by passing a direction and factor * * @internal * @returns function for updating node positions diff --git a/packages/system/src/xyresizer/XYResizer.ts b/packages/system/src/xyresizer/XYResizer.ts index 5fe6af91..c02ca47c 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 } from '../types'; +import type { CoordinateExtent, NodeBase, NodeLookup, Transform, XYPosition } from '../types'; import type { OnResize, OnResizeEnd, OnResizeStart, ResizeDragEvent, ShouldResize, ControlPosition } from './types'; const initPrevValues = { width: 0, height: 0, x: 0, y: 0 }; @@ -30,10 +30,7 @@ export type XYResizerChange = typeof initChange; export type XYResizerChildChange = { id: string; - position: { - x: number; - y: number; - }; + position: XYPosition; extent?: 'parent' | CoordinateExtent; }; @@ -144,6 +141,7 @@ export function XYResizer({ domNode, nodeId, getStoreItems, onChange }: XYResize // Determine largest minimal extent the parent node is allowed to resize to childNodes = []; childExtent = undefined; + for (const [childId, child] of nodeLookup) { if (child.parentNode === nodeId) { childNodes.push({ @@ -151,8 +149,10 @@ export function XYResizer({ domNode, nodeId, getStoreItems, onChange }: XYResize position: { ...child.position }, extent: child.extent, }); + if (child.extent === 'parent' || child.expandParent) { const extent = nodeToChildExtent(child, node!); + if (childExtent) { childExtent = [ [Math.min(extent[0][0], childExtent[0][0]), Math.min(extent[0][1], childExtent[0][1])], @@ -171,8 +171,7 @@ export function XYResizer({ domNode, nodeId, getStoreItems, onChange }: XYResize .on('drag', (event: ResizeDragEvent) => { const { transform, snapGrid, snapToGrid } = getStoreItems(); const pointerPosition = getPointerPosition(event.sourceEvent, { transform, snapGrid, snapToGrid }); - - let childChanges: XYResizerChildChange[] = []; + const childChanges: XYResizerChildChange[] = []; if (node) { const change = { ...initChange }; diff --git a/packages/system/src/xyresizer/utils.ts b/packages/system/src/xyresizer/utils.ts index 6ed0cf34..a651df3f 100644 --- a/packages/system/src/xyresizer/utils.ts +++ b/packages/system/src/xyresizer/utils.ts @@ -1,5 +1,5 @@ import { CoordinateExtent } from '../types'; -import { clamp, getPointerPosition } from '../utils'; +import { getPointerPosition } from '../utils'; import { ControlPosition } from './types'; type GetResizeDirectionParams = { @@ -107,7 +107,7 @@ function xor(a: boolean, b: boolean) { * @param pointerPosition - the current pointer position corrected for snapping * @param boundaries - minimum and maximum dimensions of the node * @param keepAspectRatio - prevent changes of asprect ratio - * @returns width: new width of node, height: new height of node + * @returns x, y, width and height of the node after resize */ export function getDimensionsAfterResize( startValues: StartValues, @@ -129,8 +129,8 @@ export function getDimensionsAfterResize( let distX = Math.floor(isHorizontal ? xSnapped - startValues.pointerX : 0); let distY = Math.floor(isVertical ? ySnapped - startValues.pointerY : 0); - let newWidth = startWidth + (affectsX ? -distX : distX); - let newHeight = startHeight + (affectsY ? -distY : distY); + const newWidth = startWidth + (affectsX ? -distX : distX); + const newHeight = startHeight + (affectsY ? -distY : distY); // Check if maxWidth, minWWidth, maxHeight, minHeight are restricting the resize let clampX = getSizeClamp(newWidth, minWidth, maxWidth); @@ -258,16 +258,10 @@ export function getDimensionsAfterResize( } } - let width = startWidth + (affectsX ? -distX : distX); - let height = startHeight + (affectsY ? -distY : distY); - - let x = affectsX ? startX + distX : startX; - let y = affectsY ? startY + distY : startY; - return { - width, - height, - x, - y, + width: startWidth + (affectsX ? -distX : distX), + height: startHeight + (affectsY ? -distY : distY), + x: affectsX ? startX + distX : startX, + y: affectsY ? startY + distY : startY, }; }