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

Merge branch 'next' into fix-svelte-reset

Browse Source
This commit is contained in:
Moritz Klack
2024-02-29 19:48:19 +01:00
committed by GitHub
parent b2800575f6 87d363371b
commit 22b824910f
21 changed files with 201 additions and 132 deletions
Download Patch File Download Diff File Expand all files Collapse all files

23
examples/react/src/examples/NodeResizer/index.tsx
View File

@@ -50,7 +50,9 @@ const initialNodes: Node[] = [
maxHeight: 200,
},
position: { x: 0, y: 60 },
style: { ...nodeStyle, width: 100, height: 80 },
width: 100,
height: 80,
style: { ...nodeStyle },
},
{
id: '1b',
@@ -64,9 +66,9 @@ const initialNodes: Node[] = [
maxHeight: 400,
},
position: { x: 250, y: 0 },
width: 174,
height: 123,
style: {
width: 174,
height: 123,
...nodeStyle,
},
},
@@ -75,7 +77,9 @@ const initialNodes: Node[] = [
type: 'customResizer',
data: { label: 'custom resize icon' },
position: { x: 0, y: 200 },
style: { width: 100, height: 60, ...nodeStyle },
width: 100,
height: 60,
style: { ...nodeStyle },
},
{
id: '3',
@@ -94,7 +98,8 @@ const initialNodes: Node[] = [
keepAspectRatio: true,
},
position: { x: 400, y: 200 },
style: { ...nodeStyle, height: 50 },
height: 50,
style: { ...nodeStyle },
},
{
id: '4',
@@ -121,7 +126,9 @@ const initialNodes: Node[] = [
type: 'defaultResizer',
data: { label: 'Parent', keepAspectRatio: true },
position: { x: 700, y: 0 },
style: { ...nodeStyle, width: 300, height: 400 },
width: 300,
height: 400,
style: { ...nodeStyle },
},
{
id: '5a',
@@ -132,7 +139,9 @@ const initialNodes: Node[] = [
position: { x: 50, y: 50 },
parentNode: '5',
extent: 'parent',
style: { ...nodeStyle, width: 50, height: 100 },
width: 50,
height: 100,
style: { ...nodeStyle },
},
{
id: '5b',

4
examples/react/src/examples/TouchDevice/index.tsx
View File

@@ -1,7 +1,7 @@
import { useCallback } from 'react';
import { ReactFlow, Node, Edge, useNodesState, useEdgesState, Position, Connection, addEdge } from '@xyflow/react';
import styles from './touch-device.module.css';
import './touch-device.css';
const initialNodes: Node[] = [
{
@@ -42,7 +42,7 @@ const TouchDeviceFlow = () => {
onConnectEnd={onConnectEnd}
onClickConnectStart={onClickConnectStart}
onClickConnectEnd={onClickConnectEnd}
className={styles.flow}
className="touch-flow"
/>
);
};

27
examples/react/src/examples/TouchDevice/touch-device.css Normal file
View File

@@ -0,0 +1,27 @@
.react-flow.touch-flow .react-flow__handle {
width: 20px;
height: 20px;
border-radius: 3px;
background-color: #9f7aea;
}
.touch-flow .react-flow__handle-right {
--translate: translate(50%, -50%);
}
.touch-flow .react-flow__handle-left {
--translate: translate(-50%, -50%);
}
@keyframes bounce {
0% {
transform: var(--translate) scale(1);
}
50% {
transform: var(--translate) scale(1.1);
}
}
.react-flow.touch-flow .react-flow__handle.clickconnecting {
animation: bounce 1600ms infinite ease-in;
}

19
examples/react/src/examples/TouchDevice/touch-device.module.css
View File

@@ -1,19 +0,0 @@
.flow :global .react-flow__handle {
width: 20px;
height: 20px;
border-radius: 3px;
background-color: #9f7aea;
}
.flow :global .react-flow__handle.connecting {
animation: bounce 1600ms infinite ease-out;
}
@keyframes bounce {
0% {
transform: translate(0, -50%) scale(1);
}
50% {
transform: translate(0, -50%) scale(1.1);
}
}

6
examples/react/src/examples/Validation/validation.module.css
View File

@@ -24,10 +24,14 @@
background: #fff;
}
.validationflow :global .connecting {
.validationflow :global .connectingto {
background: #ff6060;
}
.validationflow :global .react-flow__node-custominput .connectingfrom {
background: #55dd99;
}
.validationflow :global .valid {
background: #55dd99;
}

4
examples/svelte/src/routes/examples/node-resizer/+page.svelte
View File

@@ -111,9 +111,10 @@
{
id: '5a',
type: 'defaultResizer',
data: { label: 'Child' },
data: { label: 'Child with extent parent' },
position: { x: 50, y: 50 },
parentNode: '5',
extent: 'parent',
style: nodeStyle
},
{
@@ -137,6 +138,7 @@
maxZoom={5}
snapGrid={snapToGrid ? [10, 10] : undefined}
fitView
nodeOrigin={[0.5, 0.5]}
>
<Controls />
<Panel position="bottom-right">

6
examples/svelte/src/routes/examples/validation/style.css
View File

@@ -1,7 +1,11 @@
.svelte-flow__handle.connecting {
.svelte-flow__handle.connectingto {
background: #ff6060;
}
.svelte-flow__handle.connectingfrom {
background: #55dd99;
}
.svelte-flow__handle.valid {
background: #55dd99;
}

2
packages/react/CHANGELOG.md
View File

@@ -5,6 +5,7 @@
## ⚠️ Breaking changes
- `useNodesData` not only returns data objects but also the type and the id of the node
- status class names for Handle components are slightly different. It's now "connectingfrom" and "connectingto" instead of "connecting"
## Patch changes
@@ -12,6 +13,7 @@
- `disableKeyboardA11y` now also disables Enter and Escape for selecting/deselecting nodes and edges
- fix bug where users couldn't drag a node after toggle nodes `hidden` attribute
- add `initialWidth` and `initialHeight` node attributes for specifying initial dimensions for ssr
- fix `NodeResizer` when used in combination with `nodeOrigin`
## 12.0.0-next.9

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

34
packages/react/src/components/Handle/index.tsx
View File

@@ -16,6 +16,7 @@ import {
type HandleProps,
type Connection,
type HandleType,
ConnectionMode,
} from '@xyflow/system';
import { useStore, useStoreApi } from '../../hooks/useStore';
@@ -36,14 +37,24 @@ const connectingSelector =
connectionStartHandle: startHandle,
connectionEndHandle: endHandle,
connectionClickStartHandle: clickHandle,
connectionMode,
connectionStatus,
} = state;
const connectingTo = endHandle?.nodeId === nodeId && endHandle?.handleId === handleId && endHandle?.type === type;
return {
connecting:
(startHandle?.nodeId === nodeId && startHandle?.handleId === handleId && startHandle?.type === type) ||
(endHandle?.nodeId === nodeId && endHandle?.handleId === handleId && endHandle?.type === type),
connectingFrom:
startHandle?.nodeId === nodeId && startHandle?.handleId === handleId && startHandle?.type === type,
connectingTo,
clickConnecting:
clickHandle?.nodeId === nodeId && clickHandle?.handleId === handleId && clickHandle?.type === type,
isPossibleEndHandle:
connectionMode === ConnectionMode.Strict
? startHandle?.type !== type
: nodeId !== startHandle?.nodeId || handleId !== startHandle?.handleId,
connectionInProcess: !!startHandle,
valid: connectingTo && connectionStatus === 'valid',
};
};
@@ -71,7 +82,10 @@ const HandleComponent = forwardRef<HTMLDivElement, HandleComponentProps>(
const store = useStoreApi();
const nodeId = useNodeId();
const { connectOnClick, noPanClassName, rfId } = useStore(selector, shallow);
const { connecting, clickConnecting } = useStore(connectingSelector(nodeId, handleId, type), shallow);
const { connectingFrom, connectingTo, clickConnecting, isPossibleEndHandle, connectionInProcess, valid } = useStore(
connectingSelector(nodeId, handleId, type),
shallow
);
if (!nodeId) {
store.getState().onError?.('010', errorMessages['error010']());
@@ -201,10 +215,16 @@ const HandleComponent = forwardRef<HTMLDivElement, HandleComponentProps>(
connectable: isConnectable,
connectablestart: isConnectableStart,
connectableend: isConnectableEnd,
connecting: clickConnecting,
// this class is used to style the handle when the user is connecting
clickconnecting: clickConnecting,
connectingfrom: connectingFrom,
connectingto: connectingTo,
valid,
// shows where you can start a connection from
// and where you can end it while connecting
connectionindicator:
isConnectable && ((isConnectableStart && !connecting) || (isConnectableEnd && connecting)),
isConnectable &&
(!connectionInProcess || isPossibleEndHandle) &&
(connectionInProcess ? isConnectableEnd : isConnectableStart),
},
])}
onMouseDown={onPointerDown}

34
packages/react/src/hooks/useDrag.ts
View File

@@ -31,24 +31,22 @@ export function useDrag({
const xyDrag = useRef<XYDragInstance>();
useEffect(() => {
if (nodeRef?.current) {
xyDrag.current = XYDrag({
getStoreItems: () => store.getState(),
onNodeMouseDown: (id: string) => {
handleNodeClick({
id,
store,
nodeRef,
});
},
onDragStart: () => {
setDragging(true);
},
onDragStop: () => {
setDragging(false);
},
});
}
xyDrag.current = XYDrag({
getStoreItems: () => store.getState(),
onNodeMouseDown: (id: string) => {
handleNodeClick({
id,
store,
nodeRef,
});
},
onDragStart: () => {
setDragging(true);
},
onDragStop: () => {
setDragging(false);
},
});
}, []);
useEffect(() => {

6
packages/react/src/store/index.ts
View File

@@ -303,13 +303,11 @@ const createRFStore = ({
connectionEndHandle: null,
}),
updateConnection: (params) => {
const { connectionStatus, connectionStartHandle, connectionEndHandle, connectionPosition } = get();
const { connectionPosition } = get();
const currentConnection = {
...params,
connectionPosition: params.connectionPosition ?? connectionPosition,
connectionStatus: params.connectionStatus ?? connectionStatus,
connectionStartHandle: params.connectionStartHandle ?? connectionStartHandle,
connectionEndHandle: params.connectionEndHandle ?? connectionEndHandle,
};
set(currentConnection);

2
packages/svelte/CHANGELOG.md
View File

@@ -5,12 +5,14 @@
## ⚠️ Breaking changes
- `useNodesData` not only returns data objects but also the type and the id of the node
- status class names for Handle components are slightly different. It's now "connectingfrom" and "connectingto" instead of "connecting"
## Patch changes
- better cursor defaults for the pane, nodes and edges
- add `initialWidth` and `initialHeight` node attributes for specifying initial dimensions for ssr
- always re-measure nodes when new nodes get passed
- fix `NodeResizer` when used in combination with `nodeOrigin`
## 0.0.36

18
packages/svelte/src/lib/components/Handle/Handle.svelte
View File

@@ -56,7 +56,8 @@
onconnect: onConnectAction,
onconnectstart: onConnectStartAction,
onconnectend: onConnectEndAction,
flowId
flowId,
connection
} = store;
function onPointerDown(event: MouseEvent | TouchEvent) {
@@ -123,6 +124,16 @@
prevConnections = connections ?? new Map();
}
$: connectingFrom =
$connection.startHandle?.nodeId === nodeId &&
$connection.startHandle?.type === type &&
$connection.startHandle?.handleId === handleId;
$: connectingTo =
$connection.endHandle?.nodeId === nodeId &&
$connection.endHandle?.type === type &&
$connection.endHandle?.handleId === handleId;
$: valid = connectingTo && $connection.status === 'valid';
// @todo implement connectablestart, connectableend
</script>
@@ -141,6 +152,11 @@ The Handle component is the part of a node that can be used to connect nodes.
'nodrag',
'nopan',
position,
{
valid,
connectingto: connectingTo,
connectingfrom: connectingFrom
},
className
])}
class:source={!isTarget}

2
packages/svelte/src/lib/components/NodeWrapper/NodeWrapper.svelte
View File

@@ -197,7 +197,7 @@
style:z-index={zIndex}
style:transform="translate({positionOriginX}px, {positionOriginY}px)"
style:visibility={initialized ? 'visible' : 'hidden'}
style="{inlineStyleDimensions.width} {inlineStyleDimensions.height} {style ?? ''};"
style="{style ?? ''};{inlineStyleDimensions.width}{inlineStyleDimensions.height}"
on:click={onSelectNodeHandler}
on:mouseenter={(event) => dispatch('nodemouseenter', { node, event })}
on:mouseleave={(event) => dispatch('nodemouseleave', { node, event })}

5
packages/svelte/src/lib/plugins/NodeResizer/ResizeControl.svelte
View File

@@ -35,7 +35,7 @@
let className: $$Props['class'] = '';
export { className as class };
const { nodeLookup, snapGrid, viewport, nodes } = useStore();
const { nodeLookup, snapGrid, viewport, nodes, nodeOrigin } = useStore();
const contextNodeId = getContext<string>('svelteflow__node_id');
$: id = typeof nodeId === 'string' ? nodeId : contextNodeId;
@@ -64,7 +64,8 @@
nodeLookup: $nodeLookup,
transform: [$viewport.x, $viewport.y, $viewport.zoom],
snapGrid: $snapGrid ?? undefined,
snapToGrid: !!$snapGrid
snapToGrid: !!$snapGrid,
nodeOrigin: $nodeOrigin
};
},
onChange: (change: XYResizerChange, childChanges: XYResizerChildChange[]) => {

4
packages/system/src/styles/init.css
View File

@@ -223,6 +223,10 @@ svg.xy-flow__connectionline {
min-width: 5px;
min-height: 5px;
&.connectingfrom {
pointer-events: all;
}
&.connectionindicator {
pointer-events: all;
cursor: crosshair;

16
packages/system/src/xyhandle/XYHandle.ts
View File

@@ -15,7 +15,7 @@ import {
type ConnectionHandle,
} from '../types';
import { getClosestHandle, getConnectionStatus, getHandleLookup, getHandleType, resetRecentHandle } from './utils';
import { getClosestHandle, getConnectionStatus, getHandleLookup, getHandleType } from './utils';
export type OnPointerDownParams = {
autoPanOnConnect: boolean;
@@ -107,7 +107,6 @@ function onPointerDown(
return;
}
let prevActiveHandle: Element;
let connectionPosition = getEventPosition(event, containerBounds);
let autoPanStarted = false;
let connection: Connection | null = null;
@@ -194,18 +193,6 @@ function onPointerDown(
connectionStatus: getConnectionStatus(!!closestHandle, isValid),
connectionEndHandle: result.endHandle,
});
if (!closestHandle && !isValid && !handleDomNode) {
return resetRecentHandle(prevActiveHandle, lib);
}
if (connection?.source !== connection?.target && handleDomNode) {
resetRecentHandle(prevActiveHandle, lib);
prevActiveHandle = handleDomNode;
handleDomNode.classList.add('connecting', `${lib}-flow__handle-connecting`);
handleDomNode.classList.toggle('valid', isValid);
handleDomNode.classList.toggle(`${lib}-flow__handle-valid`, isValid);
}
}
function onPointerUp(event: MouseEvent | TouchEvent) {
@@ -221,7 +208,6 @@ function onPointerDown(
onEdgeUpdateEnd?.(event);
}
resetRecentHandle(prevActiveHandle, lib);
cancelConnection();
cancelAnimationFrame(autoPanId);
autoPanStarted = false;

8
packages/system/src/xyhandle/utils.ts
View File

@@ -38,7 +38,7 @@ export function getClosestHandle(
let closestHandles: ConnectionHandle[] = [];
let minDistance = Infinity;
handles.forEach((handle) => {
for (const handle of handles) {
const distance = Math.sqrt(Math.pow(handle.x - pos.x, 2) + Math.pow(handle.y - pos.y, 2));
if (distance <= connectionRadius) {
if (distance < minDistance) {
@@ -49,7 +49,7 @@ export function getClosestHandle(
}
minDistance = distance;
}
});
}
if (!closestHandles.length) {
return null;
@@ -101,10 +101,6 @@ export function getHandleType(
return null;
}
export function resetRecentHandle(handleDomNode: Element, lib: string): void {
handleDomNode?.classList.remove('valid', 'connecting', `${lib}-flow__handle-valid`, `${lib}-flow__handle-connecting`);
}
export function getConnectionStatus(isInsideConnectionRadius: boolean, isHandleValid: boolean) {
let connectionStatus = null;

73
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!, child.origin ?? nodeOrigin);
if (childExtent) {
childExtent = [
@@ -169,14 +174,14 @@ export function XYResizer({ domNode, nodeId, getStoreItems, onChange }: XYResize
}
})
.on('drag', (event: ResizeDragEvent) => {
const { transform, snapGrid, snapToGrid } = getStoreItems();
const { transform, snapGrid, snapToGrid, nodeOrigin: storeNodeOrigin } = getStoreItems();
const pointerPosition = getPointerPosition(event.sourceEvent, { transform, snapGrid, snapToGrid });
const childChanges: XYResizerChildChange[] = [];
if (node) {
const change = { ...initChange };
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,
@@ -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);
}

37
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';
@@ -94,7 +94,7 @@ function xor(a: boolean, b: boolean) {
/**
* 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,
* @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!
@@ -102,6 +102,8 @@ function xor(a: boolean, b: boolean) {
* 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.
* To complicate things nodeOrigin has to be taken into account as well. This is done by offsetting the nodes as if their origin is [0, 0],
* then calculating the restrictions as usual
* @param startValues - starting values of resize
* @param controlDirection - dimensions affected by the resize
* @param pointerPosition - the current pointer position corrected for snapping
@@ -115,6 +117,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 +135,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 +147,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 +193,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 +224,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 +268,13 @@ export function getDimensionsAfterResize(
}
}
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,
x: nodeOrigin[0] * distX * (!affectsX ? 1 : -1) + x,
y: nodeOrigin[1] * distY * (!affectsY ? 1 : -1) + y,
};
}