diff --git a/examples/react/src/examples/NodeResizer/index.tsx b/examples/react/src/examples/NodeResizer/index.tsx
index 42e83523..b0a272f2 100644
--- a/examples/react/src/examples/NodeResizer/index.tsx
+++ b/examples/react/src/examples/NodeResizer/index.tsx
@@ -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',
diff --git a/examples/react/src/examples/TouchDevice/index.tsx b/examples/react/src/examples/TouchDevice/index.tsx
index 636a36a4..e412bee5 100644
--- a/examples/react/src/examples/TouchDevice/index.tsx
+++ b/examples/react/src/examples/TouchDevice/index.tsx
@@ -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"
/>
);
};
diff --git a/examples/react/src/examples/TouchDevice/touch-device.css b/examples/react/src/examples/TouchDevice/touch-device.css
new file mode 100644
index 00000000..92f85c27
--- /dev/null
+++ b/examples/react/src/examples/TouchDevice/touch-device.css
@@ -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;
+}
diff --git a/examples/react/src/examples/TouchDevice/touch-device.module.css b/examples/react/src/examples/TouchDevice/touch-device.module.css
deleted file mode 100644
index b5f65209..00000000
--- a/examples/react/src/examples/TouchDevice/touch-device.module.css
+++ /dev/null
@@ -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);
- }
-}
diff --git a/examples/react/src/examples/Validation/validation.module.css b/examples/react/src/examples/Validation/validation.module.css
index c19a8723..3fbe2f94 100644
--- a/examples/react/src/examples/Validation/validation.module.css
+++ b/examples/react/src/examples/Validation/validation.module.css
@@ -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;
}
diff --git a/examples/svelte/src/routes/examples/node-resizer/+page.svelte b/examples/svelte/src/routes/examples/node-resizer/+page.svelte
index 39778156..b7479b03 100644
--- a/examples/svelte/src/routes/examples/node-resizer/+page.svelte
+++ b/examples/svelte/src/routes/examples/node-resizer/+page.svelte
@@ -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]}
>
diff --git a/examples/svelte/src/routes/examples/validation/style.css b/examples/svelte/src/routes/examples/validation/style.css
index 6839e129..a6bbf75a 100644
--- a/examples/svelte/src/routes/examples/validation/style.css
+++ b/examples/svelte/src/routes/examples/validation/style.css
@@ -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;
}
diff --git a/packages/react/CHANGELOG.md b/packages/react/CHANGELOG.md
index 69b51bf7..051fdbd9 100644
--- a/packages/react/CHANGELOG.md
+++ b/packages/react/CHANGELOG.md
@@ -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
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/react/src/components/Handle/index.tsx b/packages/react/src/components/Handle/index.tsx
index 36778039..75c36b8c 100644
--- a/packages/react/src/components/Handle/index.tsx
+++ b/packages/react/src/components/Handle/index.tsx
@@ -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(
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(
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}
diff --git a/packages/react/src/hooks/useDrag.ts b/packages/react/src/hooks/useDrag.ts
index 52d3c6f6..ee26cc57 100644
--- a/packages/react/src/hooks/useDrag.ts
+++ b/packages/react/src/hooks/useDrag.ts
@@ -31,24 +31,22 @@ export function useDrag({
const xyDrag = useRef();
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(() => {
diff --git a/packages/react/src/store/index.ts b/packages/react/src/store/index.ts
index 823d5022..a2b98c1a 100644
--- a/packages/react/src/store/index.ts
+++ b/packages/react/src/store/index.ts
@@ -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);
diff --git a/packages/svelte/CHANGELOG.md b/packages/svelte/CHANGELOG.md
index df03a57a..4635387f 100644
--- a/packages/svelte/CHANGELOG.md
+++ b/packages/svelte/CHANGELOG.md
@@ -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
diff --git a/packages/svelte/src/lib/components/Handle/Handle.svelte b/packages/svelte/src/lib/components/Handle/Handle.svelte
index f8a43dd4..e35804fc 100644
--- a/packages/svelte/src/lib/components/Handle/Handle.svelte
+++ b/packages/svelte/src/lib/components/Handle/Handle.svelte
@@ -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
@@ -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}
diff --git a/packages/svelte/src/lib/components/NodeWrapper/NodeWrapper.svelte b/packages/svelte/src/lib/components/NodeWrapper/NodeWrapper.svelte
index a8b4f895..50dda4e7 100644
--- a/packages/svelte/src/lib/components/NodeWrapper/NodeWrapper.svelte
+++ b/packages/svelte/src/lib/components/NodeWrapper/NodeWrapper.svelte
@@ -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 })}
diff --git a/packages/svelte/src/lib/plugins/NodeResizer/ResizeControl.svelte b/packages/svelte/src/lib/plugins/NodeResizer/ResizeControl.svelte
index 56caa8b5..d3d1d793 100644
--- a/packages/svelte/src/lib/plugins/NodeResizer/ResizeControl.svelte
+++ b/packages/svelte/src/lib/plugins/NodeResizer/ResizeControl.svelte
@@ -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('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[]) => {
diff --git a/packages/system/src/styles/init.css b/packages/system/src/styles/init.css
index 46628842..72f0b2e8 100644
--- a/packages/system/src/styles/init.css
+++ b/packages/system/src/styles/init.css
@@ -223,6 +223,10 @@ svg.xy-flow__connectionline {
min-width: 5px;
min-height: 5px;
+ &.connectingfrom {
+ pointer-events: all;
+ }
+
&.connectionindicator {
pointer-events: all;
cursor: crosshair;
diff --git a/packages/system/src/xyhandle/XYHandle.ts b/packages/system/src/xyhandle/XYHandle.ts
index 4ddb5313..4f99a97c 100644
--- a/packages/system/src/xyhandle/XYHandle.ts
+++ b/packages/system/src/xyhandle/XYHandle.ts
@@ -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;
diff --git a/packages/system/src/xyhandle/utils.ts b/packages/system/src/xyhandle/utils.ts
index b829f691..8c82f6e3 100644
--- a/packages/system/src/xyhandle/utils.ts
+++ b/packages/system/src/xyhandle/utils.ts
@@ -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;
diff --git a/packages/system/src/xyresizer/XYResizer.ts b/packages/system/src/xyresizer/XYResizer.ts
index c02ca47c..1953b327 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!, 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);
}
diff --git a/packages/system/src/xyresizer/utils.ts b/packages/system/src/xyresizer/utils.ts
index a651df3f..5c7f8532 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';
@@ -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,
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,
};
}