alighasami/xyflow
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fixed NodeResizer for various NodeOrigins

Browse Source
This commit is contained in:
peterkogo
2024-02-28 15:55:55 +01:00
parent 966531ec39
commit 06f1fc4f73
3 changed files with 66 additions and 46 deletions
Download Patch File Download Diff File Expand all files Collapse all files

3
packages/react/src/additional-components/NodeResizer/NodeResizeControl.tsx
View File

@@ -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[]) => {

69
packages/system/src/xyresizer/XYResizer.ts
View File

@@ -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<HTMLDivElement, unknown>()
.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);
}

40
packages/system/src/xyresizer/utils.ts
View File

@@ -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<typeof getPointerPosition>,
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,
};
}