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

Merge branch 'next' into refactor/infer-node-types

Browse Source
This commit is contained in:
moklick
2024-02-19 10:39:56 +01:00
parent 5e56dd58c0 6eea7eb2ab
commit 7bc9558631
52 changed files with 880 additions and 483 deletions
Download Patch File Download Diff File Expand all files Collapse all files
packages/system/src/styles/init.css
+20 -1
View File
@@ -12,6 +12,8 @@
--xy-minimap-background-color-default: #fff;
--xy-minimap-mask-background-color-default: rgb(240, 240, 240, 0.6);
--xy-minimap-mask-stroke-color-default: transparent;
--xy-minimap-mask-stroke-width-default: 1;
--xy-minimap-node-background-color-default: #e2e2e2;
--xy-minimap-node-stroke-color-default: transparent;
--xy-minimap-node-stroke-width-default: 2;
@@ -34,6 +36,8 @@
--xy-minimap-background-color-default: #141414;
--xy-minimap-mask-background-color-default: rgb(60, 60, 60, 0.6);
--xy-minimap-mask-stroke-color-default: transparent;
--xy-minimap-mask-stroke-width-default: 1;
--xy-minimap-node-background-color-default: #2b2b2b;
--xy-minimap-node-stroke-color-default: transparent;
--xy-minimap-node-stroke-width-default: 2;
@@ -310,13 +314,28 @@ svg.xy-flow__connectionline {
}
.xy-flow__minimap {
background: var(--xy-minimap-background-color, var(--xy-minimap-background-color-default));
background: var(
--xy-minimap-background-color-props,
var(--xy-minimap-background-color, var(--xy-minimap-background-color-default))
);
&-svg {
display: block;
}
&-mask {
fill: var(
--xy-minimap-mask-background-color-props,
var(--xy-minimap-mask-background-color, var(--xy-minimap-mask-background-color-default))
);
stroke: var(
--xy-minimap-mask-stroke-color-props,
var(--xy-minimap-mask-stroke-color, var(--xy-minimap-mask-stroke-color-default))
);
stroke-width: var(
--xy-minimap-mask-stroke-width-props,
var(--xy-minimap-mask-stroke-width, var(--xy-minimap-mask-stroke-width-default))
);
}
&-node {
packages/system/src/types/general.ts
+6 -6
View File
@@ -28,6 +28,10 @@ export type Connection = {
targetHandle: string | null;
};
export type HandleConnection = Connection & {
edgeId: string;
};
export type ConnectionStatus = 'valid' | 'invalid';
export enum ConnectionMode {
@@ -123,11 +127,7 @@ export type SelectionRect = Rect & {
export type OnError = (id: string, message: string) => void;
export type UpdateNodePositions = (
dragItems: NodeDragItem[] | NodeBase[],
positionChanged?: boolean,
dragging?: boolean
) => void;
export type UpdateNodePositions = (dragItems: NodeDragItem[] | NodeBase[], dragging?: boolean) => void;
export type PanBy = (delta: XYPosition) => boolean;
export type UpdateConnection = (params: {
@@ -140,7 +140,7 @@ export type UpdateConnection = (params: {
export type ColorModeClass = 'light' | 'dark';
export type ColorMode = ColorModeClass | 'system';
export type ConnectionLookup = Map<string, Map<string, Connection>>;
export type ConnectionLookup = Map<string, Map<string, HandleConnection>>;
export type OnBeforeDeleteBase<NodeType extends NodeBase = NodeBase, EdgeType extends EdgeBase = EdgeBase> = ({
nodes,
packages/system/src/utils/connections.ts
+6 -6
View File
@@ -1,9 +1,9 @@
import { Connection } from '../types';
import { HandleConnection } from '../types';
/**
* @internal
*/
export function areConnectionMapsEqual(a?: Map<string, Connection>, b?: Map<string, Connection>) {
export function areConnectionMapsEqual(a?: Map<string, HandleConnection>, b?: Map<string, HandleConnection>) {
if (!a && !b) {
return true;
}
@@ -31,15 +31,15 @@ export function areConnectionMapsEqual(a?: Map<string, Connection>, b?: Map<stri
* @internal
*/
export function handleConnectionChange(
a: Map<string, Connection>,
b: Map<string, Connection>,
cb?: (diff: Connection[]) => void
a: Map<string, HandleConnection>,
b: Map<string, HandleConnection>,
cb?: (diff: HandleConnection[]) => void
) {
if (!cb) {
return;
}
const diff: Connection[] = [];
const diff: HandleConnection[] = [];
a.forEach((connection, key) => {
if (!b?.has(key)) {
packages/system/src/utils/dom.ts
+1 -3
View File
@@ -37,11 +37,9 @@ export function isInputDOMNode(event: KeyboardEvent): boolean {
// using composed path for handling shadow dom
const target = (event.composedPath?.()?.[0] || event.target) as HTMLElement;
const isInput = inputTags.includes(target?.nodeName) || target?.hasAttribute('contenteditable');
// we want to be able to do a multi selection event if we are in an input field
const isModifierKey = event.ctrlKey || event.metaKey || event.shiftKey;
// when an input field is focused we don't want to trigger deletion or movement of nodes
return (isInput && !isModifierKey) || !!target?.closest('.nokey');
return isInput || !!target?.closest('.nokey');
}
export const isMouseEvent = (event: MouseEvent | TouchEvent): event is MouseEvent => 'clientX' in event;
packages/system/src/utils/store.ts
+3 -3
View File
@@ -94,8 +94,8 @@ export function adoptUserProvidedNodes<NodeType extends NodeBase>(
...n,
computed: {
positionAbsolute: n.position,
width: n.computed?.width || currentStoreNode?.computed?.width,
height: n.computed?.height || currentStoreNode?.computed?.height,
width: n.computed?.width,
height: n.computed?.height,
},
};
const z = (isNumeric(n.zIndex) ? n.zIndex : 0) + (n.selected ? selectedNodeZ : 0);
@@ -260,7 +260,7 @@ export function updateConnectionLookup(connectionLookup: ConnectionLookup, edgeL
const prevSource = connectionLookup.get(sourceKey) || new Map();
const prevTarget = connectionLookup.get(targetKey) || new Map();
const connection = { source, target, sourceHandle, targetHandle };
const connection = { edgeId: edge.id, source, target, sourceHandle, targetHandle };
edgeLookup.set(edge.id, edge);
connectionLookup.set(sourceKey, prevSource.set(`${target}-${targetHandle}`, connection));
packages/system/src/xydrag/XYDrag.ts
+4 -4
View File
@@ -170,7 +170,7 @@ export function XYDrag<OnNodeDrag extends (e: any, nodes: any, node: any) => voi
return;
}
updateNodePositions(dragItems, true, true);
updateNodePositions(dragItems, true);
const onNodeOrSelectionDrag = nodeId ? onNodeDrag : wrapSelectionDragFunc(onSelectionDrag);
if (dragEvent && (onDrag || onNodeOrSelectionDrag)) {
@@ -238,7 +238,7 @@ export function XYDrag<OnNodeDrag extends (e: any, nodes: any, node: any) => voi
const onNodeOrSelectionDragStart = nodeId ? onNodeDragStart : wrapSelectionDragFunc(onSelectionDragStart);
if (dragItems && (onDragStart || onNodeOrSelectionDragStart)) {
if (dragItems.length > 0 && (onDragStart || onNodeOrSelectionDragStart)) {
const [currentNode, currentNodes] = getEventHandlerParams({
nodeId,
dragItems,
@@ -298,11 +298,11 @@ export function XYDrag<OnNodeDrag extends (e: any, nodes: any, node: any) => voi
dragStarted = false;
cancelAnimationFrame(autoPanId);
if (dragItems) {
if (dragItems.length > 0) {
const { nodeLookup, updateNodePositions, onNodeDragStop, onSelectionDragStop } = getStoreItems();
const onNodeOrSelectionDragStop = nodeId ? onNodeDragStop : wrapSelectionDragFunc(onSelectionDragStop);
updateNodePositions(dragItems, false, false);
updateNodePositions(dragItems, false);
if (onDragStop || onNodeOrSelectionDragStop) {
const [currentNode, currentNodes] = getEventHandlerParams({
packages/system/src/xyresizer/XYResizer.ts
+120 -28
View File
@@ -1,9 +1,9 @@
import { drag } from 'd3-drag';
import { select } from 'd3-selection';
import { getControlDirection, getDimensionsAfterResize, getPositionAfterResize, getResizeDirection } from './utils';
import { getControlDirection, getDimensionsAfterResize, getResizeDirection } from './utils';
import { getPointerPosition } from '../utils';
import type { 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 };
@@ -28,6 +28,12 @@ const initChange = {
export type XYResizerChange = typeof initChange;
export type XYResizerChildChange = {
id: string;
position: XYPosition;
extent?: 'parent' | CoordinateExtent;
};
type XYResizerParams = {
domNode: HTMLDivElement;
nodeId: string;
@@ -37,7 +43,7 @@ type XYResizerParams = {
snapGrid?: [number, number];
snapToGrid: boolean;
};
onChange: (changes: XYResizerChange) => void;
onChange: (changes: XYResizerChange, childChanges: XYResizerChildChange[]) => void;
onEnd?: () => void;
};
@@ -61,6 +67,23 @@ export type XYResizerInstance = {
destroy: () => void;
};
function nodeToParentExtent(node: NodeBase): CoordinateExtent {
return [
[0, 0],
[node.computed!.width!, node.computed!.height!],
];
}
function nodeToChildExtent(child: NodeBase, parent: NodeBase): CoordinateExtent {
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!,
],
];
}
export function XYResizer({ domNode, nodeId, getStoreItems, onChange }: XYResizerParams): XYResizerInstance {
const selection = select(domNode);
@@ -78,53 +101,97 @@ export function XYResizer({ domNode, nodeId, getStoreItems, onChange }: XYResize
const controlDirection = getControlDirection(controlPosition);
let node: NodeBase | undefined = undefined;
let childNodes: XYResizerChildChange[] = [];
let parentNode: NodeBase | undefined = undefined; // Needed to fix expandParent
let parentExtent: CoordinateExtent | undefined = undefined;
let childExtent: CoordinateExtent | undefined = undefined;
const dragHandler = drag<HTMLDivElement, unknown>()
.on('start', (event: ResizeDragEvent) => {
const { nodeLookup, transform, snapGrid, snapToGrid } = getStoreItems();
const node = nodeLookup.get(nodeId);
const { xSnapped, ySnapped } = getPointerPosition(event.sourceEvent, { transform, snapGrid, snapToGrid });
node = nodeLookup.get(nodeId);
prevValues = {
width: node?.computed?.width ?? 0,
height: node?.computed?.height ?? 0,
x: node?.position.x ?? 0,
y: node?.position.y ?? 0,
};
if (node) {
const { xSnapped, ySnapped } = getPointerPosition(event.sourceEvent, { transform, snapGrid, snapToGrid });
startValues = {
...prevValues,
pointerX: xSnapped,
pointerY: ySnapped,
aspectRatio: prevValues.width / prevValues.height,
};
prevValues = {
width: node.computed?.width ?? 0,
height: node.computed?.height ?? 0,
x: node.position.x ?? 0,
y: node.position.y ?? 0,
};
onResizeStart?.(event, { ...prevValues });
startValues = {
...prevValues,
pointerX: xSnapped,
pointerY: ySnapped,
aspectRatio: prevValues.width / prevValues.height,
};
parentNode = undefined;
if (node.extent === 'parent' || node.expandParent) {
parentNode = nodeLookup.get(node.parentNode!);
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;
for (const [childId, child] of nodeLookup) {
if (child.parentNode === nodeId) {
childNodes.push({
id: childId,
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])],
[Math.max(extent[1][0], childExtent[1][0]), Math.max(extent[1][1], childExtent[1][1])],
];
} else {
childExtent = extent;
}
}
}
}
onResizeStart?.(event, { ...prevValues });
}
})
.on('drag', (event: ResizeDragEvent) => {
const { nodeLookup, transform, snapGrid, snapToGrid } = getStoreItems();
const { transform, snapGrid, snapToGrid } = getStoreItems();
const pointerPosition = getPointerPosition(event.sourceEvent, { transform, snapGrid, snapToGrid });
const node = nodeLookup.get(nodeId);
const childChanges: XYResizerChildChange[] = [];
if (node) {
const change = { ...initChange };
const { x: prevX, y: prevY, width: prevWidth, height: prevHeight } = prevValues;
const { width, height } = getDimensionsAfterResize(
const { width, height, x, y } = getDimensionsAfterResize(
startValues,
controlDirection,
pointerPosition,
boundaries,
keepAspectRatio
keepAspectRatio,
parentExtent,
childExtent
);
const isWidthChange = width !== prevWidth;
const isHeightChange = height !== prevHeight;
if (controlDirection.affectsX || controlDirection.affectsY) {
const { x, y } = getPositionAfterResize(startValues, controlDirection, width, height);
// only transform the node if the width or height changes
const isXPosChange = x !== prevX && isWidthChange;
const isYPosChange = y !== prevY && isHeightChange;
@@ -136,6 +203,31 @@ export function XYResizer({ domNode, nodeId, getStoreItems, onChange }: XYResize
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,
y: childNode.position.y - yChange,
};
childChanges.push(childNode);
}
}
}
@@ -144,8 +236,8 @@ export function XYResizer({ domNode, nodeId, getStoreItems, onChange }: XYResize
change.isHeightChange = isHeightChange;
change.width = width;
change.height = height;
prevValues.width = width;
prevValues.height = height;
prevValues.width = change.width;
prevValues.height = change.height;
}
if (!change.isXPosChange && !change.isYPosChange && !isWidthChange && !isHeightChange) {
@@ -170,7 +262,7 @@ export function XYResizer({ domNode, nodeId, getStoreItems, onChange }: XYResize
}
onResize?.(event, nextValues);
onChange(change);
onChange(change, childChanges);
}
})
.on('end', (event: ResizeDragEvent) => {
packages/system/src/xyresizer/utils.ts
+164 -52
View File
@@ -1,4 +1,5 @@
import { clamp, getPointerPosition } from '../utils';
import { CoordinateExtent } from '../types';
import { getPointerPosition } from '../utils';
import { ControlPosition } from './types';
type GetResizeDirectionParams = {
@@ -75,81 +76,192 @@ type StartValues = PrevValues & {
aspectRatio: number;
};
function getLowerExtentClamp(lowerExtent: number, lowerBound: number) {
return Math.max(0, lowerBound - lowerExtent);
}
function getUpperExtentClamp(upperExtent: number, upperBound: number) {
return Math.max(0, upperExtent - upperBound);
}
function getSizeClamp(size: number, minSize: number, maxSize: number) {
return Math.max(0, minSize - size, size - maxSize);
}
function xor(a: boolean, b: boolean) {
return a ? !b : b;
}
/**
* Calculates new width & height of node after resize based on pointer position
* Calculates new width & height and x & y of node after resize based on pointer position
* @description - Buckle up, this is a chunky one! If you want to determine the new dimensions of a node after a resize,
* you have to account for all possible restrictions: min/max width/height of the node, the maximum extent the node is allowed
* to move in (in this case: resize into) determined by the parent node, the minimal extent determined by child nodes
* with expandParent or extent: 'parent' set and oh yeah, these things also have to work with keepAspectRatio!
* The way this is done is by determining how much each of these restricting actually restricts the resize and then applying the
* strongest restriction. Because the resize affects x, y and width, height and width, height of a opposing side with keepAspectRatio,
* the resize amount is always kept in distX & distY amount (the distance in mouse movement)
* Instead of clamping each value, we first calculate the biggest 'clamp' (for the lack of a better name) and then apply it to all values.
* @param startValues - starting values of resize
* @param controlDirection - dimensions affected by the resize
* @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,
controlDirection: ReturnType<typeof getControlDirection>,
pointerPosition: ReturnType<typeof getPointerPosition>,
boundaries: { minWidth: number; maxWidth: number; minHeight: number; maxHeight: number },
keepAspectRatio: boolean
keepAspectRatio: boolean,
extent?: CoordinateExtent,
childExtent?: CoordinateExtent
) {
const { isHorizontal, isVertical, affectsX, affectsY } = controlDirection;
let { affectsX, affectsY } = controlDirection;
const { isHorizontal, isVertical } = controlDirection;
const isDiagonal = isHorizontal && isVertical;
const { xSnapped, ySnapped } = pointerPosition;
const { minWidth, maxWidth, minHeight, maxHeight } = boundaries;
const { pointerX: startX, pointerY: startY, width: startWidth, height: startHeight, aspectRatio } = startValues;
const distX = Math.floor(isHorizontal ? xSnapped - startX : 0);
const distY = Math.floor(isVertical ? ySnapped - startY : 0);
const { x: startX, y: startY, width: startWidth, height: startHeight, aspectRatio } = startValues;
let distX = Math.floor(isHorizontal ? xSnapped - startValues.pointerX : 0);
let distY = Math.floor(isVertical ? ySnapped - startValues.pointerY : 0);
let width = clamp(startWidth + (affectsX ? -distX : distX), minWidth, maxWidth);
let height = clamp(startHeight + (affectsY ? -distY : distY), minHeight, maxHeight);
const newWidth = startWidth + (affectsX ? -distX : distX);
const newHeight = startHeight + (affectsY ? -distY : distY);
if (keepAspectRatio) {
const nextAspectRatio = width / height;
const isDiagonal = isHorizontal && isVertical;
const isOnlyHorizontal = isHorizontal && !isVertical;
const isOnlyVertical = isVertical && !isHorizontal;
// Check if maxWidth, minWWidth, maxHeight, minHeight are restricting the resize
let clampX = getSizeClamp(newWidth, minWidth, maxWidth);
let clampY = getSizeClamp(newHeight, minHeight, maxHeight);
width = (nextAspectRatio <= aspectRatio && isDiagonal) || isOnlyVertical ? height * aspectRatio : width;
height = (nextAspectRatio > aspectRatio && isDiagonal) || isOnlyHorizontal ? width / aspectRatio : height;
if (width >= maxWidth) {
width = maxWidth;
height = maxWidth / aspectRatio;
} else if (width <= minWidth) {
width = minWidth;
height = minWidth / aspectRatio;
// Check if extent is restricting the resize
if (extent) {
let xExtentClamp = 0;
let yExtentClamp = 0;
if (affectsX && distX < 0) {
xExtentClamp = getLowerExtentClamp(startX + distX, extent[0][0]);
} else if (!affectsX && distX > 0) {
xExtentClamp = getUpperExtentClamp(startX + newWidth, extent[1][0]);
}
if (height >= maxHeight) {
height = maxHeight;
width = maxHeight * aspectRatio;
} else if (height <= minHeight) {
height = minHeight;
width = minHeight * aspectRatio;
if (affectsY && distY < 0) {
yExtentClamp = getLowerExtentClamp(startY + distY, extent[0][1]);
} else if (!affectsY && distY > 0) {
yExtentClamp = getUpperExtentClamp(startY + newHeight, extent[1][1]);
}
clampX = Math.max(clampX, xExtentClamp);
clampY = Math.max(clampY, yExtentClamp);
}
// Check if the child extent is restricting the resize
if (childExtent) {
let xExtentClamp = 0;
let yExtentClamp = 0;
if (affectsX && distX > 0) {
xExtentClamp = getUpperExtentClamp(startX + distX, childExtent[0][0]);
} else if (!affectsX && distX < 0) {
xExtentClamp = getLowerExtentClamp(startX + newWidth, childExtent[1][0]);
}
if (affectsY && distY > 0) {
yExtentClamp = getUpperExtentClamp(startY + distY, childExtent[0][1]);
} else if (!affectsY && distY < 0) {
yExtentClamp = getLowerExtentClamp(startY + newHeight, childExtent[1][1]);
}
clampX = Math.max(clampX, xExtentClamp);
clampY = Math.max(clampY, yExtentClamp);
}
// Check if the aspect ratio resizing of the other side is restricting the resize
if (keepAspectRatio) {
if (isHorizontal) {
// Check if the max dimensions might be restricting the resize
const aspectHeightClamp = getSizeClamp(newWidth / aspectRatio, minHeight, maxHeight) * aspectRatio;
clampX = Math.max(clampX, aspectHeightClamp);
// Check if the extent is restricting the resize
if (extent) {
let aspectExtentClamp = 0;
if ((!affectsX && !affectsY) || (affectsX && !affectsY && isDiagonal)) {
aspectExtentClamp = getUpperExtentClamp(startY + newWidth / aspectRatio, extent[1][1]) * aspectRatio;
} else {
aspectExtentClamp =
getLowerExtentClamp(startY + (affectsX ? distX : -distX) / aspectRatio, extent[0][1]) * aspectRatio;
}
clampX = Math.max(clampX, aspectExtentClamp);
}
// Check if the child extent is restricting the resize
if (childExtent) {
let aspectExtentClamp = 0;
if ((!affectsX && !affectsY) || (affectsX && !affectsY && isDiagonal)) {
aspectExtentClamp = getLowerExtentClamp(startY + newWidth / aspectRatio, childExtent[1][1]) * aspectRatio;
} else {
aspectExtentClamp =
getUpperExtentClamp(startY + (affectsX ? distX : -distX) / aspectRatio, childExtent[0][1]) * aspectRatio;
}
clampX = Math.max(clampX, aspectExtentClamp);
}
}
// Do the same thing for vertical resizing
if (isVertical) {
const aspectWidthClamp = getSizeClamp(newHeight * aspectRatio, minWidth, maxWidth) / aspectRatio;
clampY = Math.max(clampY, aspectWidthClamp);
if (extent) {
let aspectExtentClamp = 0;
if ((!affectsX && !affectsY) || (affectsY && !affectsX && isDiagonal)) {
aspectExtentClamp = getUpperExtentClamp(startX + newHeight * aspectRatio, extent[1][0]) / aspectRatio;
} else {
aspectExtentClamp =
getLowerExtentClamp(startX + (affectsY ? distY : -distY) * aspectRatio, extent[0][0]) / aspectRatio;
}
clampY = Math.max(clampY, aspectExtentClamp);
}
if (childExtent) {
let aspectExtentClamp = 0;
if ((!affectsX && !affectsY) || (affectsY && !affectsX && isDiagonal)) {
aspectExtentClamp = getLowerExtentClamp(startX + newHeight * aspectRatio, childExtent[1][0]) / aspectRatio;
} else {
aspectExtentClamp =
getUpperExtentClamp(startX + (affectsY ? distY : -distY) * aspectRatio, childExtent[0][0]) / aspectRatio;
}
clampY = Math.max(clampY, aspectExtentClamp);
}
}
}
distY = distY + (distY < 0 ? clampY : -clampY);
distX = distX + (distX < 0 ? clampX : -clampX);
if (keepAspectRatio) {
if (isDiagonal) {
if (newWidth > newHeight * aspectRatio) {
distY = (xor(affectsX, affectsY) ? -distX : distX) / aspectRatio;
} else {
distX = (xor(affectsX, affectsY) ? -distY : distY) * aspectRatio;
}
} else {
if (isHorizontal) {
distY = distX / aspectRatio;
affectsY = affectsX;
} else {
distX = distY * aspectRatio;
affectsX = affectsY;
}
}
}
return {
width,
height,
};
}
/**
* Determines new x & y position of node after resize based on new width & height
* @param startValues - starting values of resize
* @param controlDirection - dimensions affected by the resize
* @param width - new width of node
* @param height - new height of node
* @returns x: new x position of node, y: new y position of node
*/
export function getPositionAfterResize(
startValues: StartValues,
controlDirection: ReturnType<typeof getControlDirection>,
width: number,
height: number
) {
return {
x: controlDirection.affectsX ? startValues.x - (width - startValues.width) : startValues.x,
y: controlDirection.affectsY ? startValues.y - (height - startValues.height) : startValues.y,
width: startWidth + (affectsX ? -distX : distX),
height: startHeight + (affectsY ? -distY : distY),
x: affectsX ? startX + distX : startX,
y: affectsY ? startY + distY : startY,
};
}