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

Merge pull request #3963 from xyflow/node-resizer-origin

Browse Source 
Fix nodeResizer for orgins other then [0, 0]
This commit is contained in:
Moritz Klack
2024-02-29 13:22:58 +01:00
committed by GitHub
parent 45e83f89f6 52bdb12cf1
commit f7af76e76e
9 changed files with 91 additions and 58 deletions
Download Patch File Download Diff File Expand all files Collapse all files
examples/react/src/examples/NodeResizer/index.tsx
+16 -7
View File
@@ -50,7 +50,9 @@ const initialNodes: Node[] = [
maxHeight: 200, maxHeight: 200,
}, },
position: { x: 0, y: 60 }, position: { x: 0, y: 60 },
style: { ...nodeStyle, width: 100, height: 80 }, width: 100,
height: 80,
style: { ...nodeStyle },
}, },
{ {
id: '1b', id: '1b',
@@ -64,9 +66,9 @@ const initialNodes: Node[] = [
maxHeight: 400, maxHeight: 400,
}, },
position: { x: 250, y: 0 }, position: { x: 250, y: 0 },
width: 174,
height: 123,
style: { style: {
width: 174,
height: 123,
...nodeStyle, ...nodeStyle,
}, },
}, },
@@ -75,7 +77,9 @@ const initialNodes: Node[] = [
type: 'customResizer', type: 'customResizer',
data: { label: 'custom resize icon' }, data: { label: 'custom resize icon' },
position: { x: 0, y: 200 }, position: { x: 0, y: 200 },
style: { width: 100, height: 60, ...nodeStyle }, width: 100,
height: 60,
style: { ...nodeStyle },
}, },
{ {
id: '3', id: '3',
@@ -94,7 +98,8 @@ const initialNodes: Node[] = [
keepAspectRatio: true, keepAspectRatio: true,
}, },
position: { x: 400, y: 200 }, position: { x: 400, y: 200 },
style: { ...nodeStyle, height: 50 }, height: 50,
style: { ...nodeStyle },
}, },
{ {
id: '4', id: '4',
@@ -121,7 +126,9 @@ const initialNodes: Node[] = [
type: 'defaultResizer', type: 'defaultResizer',
data: { label: 'Parent', keepAspectRatio: true }, data: { label: 'Parent', keepAspectRatio: true },
position: { x: 700, y: 0 }, position: { x: 700, y: 0 },
style: { ...nodeStyle, width: 300, height: 400 }, width: 300,
height: 400,
style: { ...nodeStyle },
}, },
{ {
id: '5a', id: '5a',
@@ -132,7 +139,9 @@ const initialNodes: Node[] = [
position: { x: 50, y: 50 }, position: { x: 50, y: 50 },
parentNode: '5', parentNode: '5',
extent: 'parent', extent: 'parent',
style: { ...nodeStyle, width: 50, height: 100 }, width: 50,
height: 100,
style: { ...nodeStyle },
}, },
{ {
id: '5b', id: '5b',
examples/svelte/src/routes/examples/node-resizer/+page.svelte
+3 -1
View File
@@ -111,9 +111,10 @@
{ {
id: '5a', id: '5a',
type: 'defaultResizer', type: 'defaultResizer',
data: { label: 'Child' }, data: { label: 'Child with extent parent' },
position: { x: 50, y: 50 }, position: { x: 50, y: 50 },
parentNode: '5', parentNode: '5',
extent: 'parent',
style: nodeStyle style: nodeStyle
}, },
{ {
@@ -137,6 +138,7 @@
maxZoom={5} maxZoom={5}
snapGrid={snapToGrid ? [10, 10] : undefined} snapGrid={snapToGrid ? [10, 10] : undefined}
fitView fitView
nodeOrigin={[0.5, 0.5]}
> >
<Controls /> <Controls />
<Panel position="bottom-right"> <Panel position="bottom-right">
packages/react/CHANGELOG.md
+1
View File
@@ -13,6 +13,7 @@
- `disableKeyboardA11y` now also disables Enter and Escape for selecting/deselecting nodes and edges - `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 - 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 - 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 ## 12.0.0-next.9
packages/react/src/additional-components/NodeResizer/NodeResizeControl.tsx
+2 -1
View File
@@ -50,12 +50,13 @@ function ResizeControl({
domNode: resizeControlRef.current, domNode: resizeControlRef.current,
nodeId: id, nodeId: id,
getStoreItems: () => { getStoreItems: () => {
const { nodeLookup, transform, snapGrid, snapToGrid } = store.getState(); const { nodeLookup, transform, snapGrid, snapToGrid, nodeOrigin } = store.getState();
return { return {
nodeLookup, nodeLookup,
transform, transform,
snapGrid, snapGrid,
snapToGrid, snapToGrid,
nodeOrigin,
}; };
}, },
onChange: (change: XYResizerChange, childChanges: XYResizerChildChange[]) => { onChange: (change: XYResizerChange, childChanges: XYResizerChildChange[]) => {
packages/svelte/CHANGELOG.md
+1
View File
@@ -11,6 +11,7 @@
- better cursor defaults for the pane, nodes and edges - better cursor defaults for the pane, nodes and edges
- add `initialWidth` and `initialHeight` node attributes for specifying initial dimensions for ssr - add `initialWidth` and `initialHeight` node attributes for specifying initial dimensions for ssr
- fix `NodeResizer` when used in combination with `nodeOrigin`
## 0.0.36 ## 0.0.36
packages/svelte/src/lib/components/NodeWrapper/NodeWrapper.svelte
+1 -1
View File
@@ -184,7 +184,7 @@
style:z-index={zIndex} style:z-index={zIndex}
style:transform="translate({positionOriginX}px, {positionOriginY}px)" style:transform="translate({positionOriginX}px, {positionOriginY}px)"
style:visibility={initialized ? 'visible' : 'hidden'} style:visibility={initialized ? 'visible' : 'hidden'}
style="{inlineStyleDimensions.width} {inlineStyleDimensions.height} {style ?? ''};" style="{style ?? ''};{inlineStyleDimensions.width}{inlineStyleDimensions.height}"
on:click={onSelectNodeHandler} on:click={onSelectNodeHandler}
on:mouseenter={(event) => dispatch('nodemouseenter', { node, event })} on:mouseenter={(event) => dispatch('nodemouseenter', { node, event })}
on:mouseleave={(event) => dispatch('nodemouseleave', { node, event })} on:mouseleave={(event) => dispatch('nodemouseleave', { node, event })}
packages/svelte/src/lib/plugins/NodeResizer/ResizeControl.svelte
+3 -2
View File
@@ -35,7 +35,7 @@
let className: $$Props['class'] = ''; let className: $$Props['class'] = '';
export { className as 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'); const contextNodeId = getContext<string>('svelteflow__node_id');
$: id = typeof nodeId === 'string' ? nodeId : contextNodeId; $: id = typeof nodeId === 'string' ? nodeId : contextNodeId;
@@ -64,7 +64,8 @@
nodeLookup: $nodeLookup, nodeLookup: $nodeLookup,
transform: [$viewport.x, $viewport.y, $viewport.zoom], transform: [$viewport.x, $viewport.y, $viewport.zoom],
snapGrid: $snapGrid ?? undefined, snapGrid: $snapGrid ?? undefined,
snapToGrid: !!$snapGrid snapToGrid: !!$snapGrid,
nodeOrigin: $nodeOrigin
}; };
}, },
onChange: (change: XYResizerChange, childChanges: XYResizerChildChange[]) => { onChange: (change: XYResizerChange, childChanges: XYResizerChildChange[]) => {
packages/system/src/xyresizer/XYResizer.ts
+39 -34
View File
@@ -3,7 +3,7 @@ import { select } from 'd3-selection';
import { getControlDirection, getDimensionsAfterResize, getResizeDirection } from './utils'; import { getControlDirection, getDimensionsAfterResize, getResizeDirection } from './utils';
import { getPointerPosition } 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'; import type { OnResize, OnResizeEnd, OnResizeStart, ResizeDragEvent, ShouldResize, ControlPosition } from './types';
const initPrevValues = { width: 0, height: 0, x: 0, y: 0 }; const initPrevValues = { width: 0, height: 0, x: 0, y: 0 };
@@ -42,6 +42,7 @@ type XYResizerParams = {
transform: Transform; transform: Transform;
snapGrid?: [number, number]; snapGrid?: [number, number];
snapToGrid: boolean; snapToGrid: boolean;
nodeOrigin: NodeOrigin;
}; };
onChange: (changes: XYResizerChange, childChanges: XYResizerChildChange[]) => void; onChange: (changes: XYResizerChange, childChanges: XYResizerChildChange[]) => void;
onEnd?: () => 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 [ return [
[parent.position.x + child.position.x, parent.position.y + child.position.y], [x - originOffsetX, y - originOffsetY],
[ [x + width - originOffsetX, y + height - originOffsetY],
parent.position.x + child.position.x + child.computed!.width!,
parent.position.y + child.position.y + child.computed!.height!,
],
]; ];
} }
@@ -109,7 +114,7 @@ export function XYResizer({ domNode, nodeId, getStoreItems, onChange }: XYResize
const dragHandler = drag<HTMLDivElement, unknown>() const dragHandler = drag<HTMLDivElement, unknown>()
.on('start', (event: ResizeDragEvent) => { .on('start', (event: ResizeDragEvent) => {
const { nodeLookup, transform, snapGrid, snapToGrid } = getStoreItems(); const { nodeLookup, transform, snapGrid, snapToGrid, nodeOrigin } = getStoreItems();
node = nodeLookup.get(nodeId); node = nodeLookup.get(nodeId);
if (node) { if (node) {
@@ -151,7 +156,7 @@ export function XYResizer({ domNode, nodeId, getStoreItems, onChange }: XYResize
}); });
if (child.extent === 'parent' || child.expandParent) { if (child.extent === 'parent' || child.expandParent) {
const extent = nodeToChildExtent(child, node!); const extent = nodeToChildExtent(child, node!, child.origin ?? nodeOrigin);
if (childExtent) { if (childExtent) {
childExtent = [ childExtent = [
@@ -169,14 +174,14 @@ export function XYResizer({ domNode, nodeId, getStoreItems, onChange }: XYResize
} }
}) })
.on('drag', (event: ResizeDragEvent) => { .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 pointerPosition = getPointerPosition(event.sourceEvent, { transform, snapGrid, snapToGrid });
const childChanges: XYResizerChildChange[] = []; const childChanges: XYResizerChildChange[] = [];
if (node) { if (node) {
const change = { ...initChange };
const { x: prevX, y: prevY, width: prevWidth, height: prevHeight } = prevValues; const { x: prevX, y: prevY, width: prevWidth, height: prevHeight } = prevValues;
const change = { ...initChange };
const nodeOrigin = node.origin ?? storeNodeOrigin;
const { width, height, x, y } = getDimensionsAfterResize( const { width, height, x, y } = getDimensionsAfterResize(
startValues, startValues,
@@ -184,6 +189,7 @@ export function XYResizer({ domNode, nodeId, getStoreItems, onChange }: XYResize
pointerPosition, pointerPosition,
boundaries, boundaries,
keepAspectRatio, keepAspectRatio,
nodeOrigin,
parentExtent, parentExtent,
childExtent childExtent
); );
@@ -191,40 +197,39 @@ export function XYResizer({ domNode, nodeId, getStoreItems, onChange }: XYResize
const isWidthChange = width !== prevWidth; const isWidthChange = width !== prevWidth;
const isHeightChange = height !== prevHeight; const isHeightChange = height !== prevHeight;
if (controlDirection.affectsX || controlDirection.affectsY) { const isXPosChange = x !== prevX && isWidthChange;
const isXPosChange = x !== prevX && isWidthChange; const isYPosChange = y !== prevY && isHeightChange;
const isYPosChange = y !== prevY && isHeightChange;
if (isXPosChange || isYPosChange) { if (isXPosChange || isYPosChange || nodeOrigin[0] === 1 || nodeOrigin[1] == 1) {
change.isXPosChange = isXPosChange; change.isXPosChange = isXPosChange;
change.isYPosChange = isYPosChange; change.isYPosChange = isYPosChange;
change.x = isXPosChange ? x : prevX; change.x = isXPosChange ? x : prevX;
change.y = isYPosChange ? y : prevY; change.y = isYPosChange ? y : prevY;
prevValues.x = change.x; prevValues.x = change.x;
prevValues.y = change.y; prevValues.y = change.y;
// Fix expandParent when resizing from top/left // Fix expandParent when resizing from top/left
if (parentNode && node.expandParent) { if (parentNode && node.expandParent) {
if (change.x < 0) { if (change.x < 0) {
prevValues.x = 0; prevValues.x = 0;
startValues.x = startValues.x - change.x; startValues.x = startValues.x - change.x;
} }
if (change.y < 0) { if (change.y < 0) {
prevValues.y = 0; prevValues.y = 0;
startValues.y = startValues.y - change.y; startValues.y = startValues.y - change.y;
}
} }
} }
if (childNodes.length > 0) { if (childNodes.length > 0) {
const xChange = x - prevX; const xChange = x - prevX;
const yChange = y - prevY; const yChange = y - prevY;
for (const childNode of childNodes) { for (const childNode of childNodes) {
childNode.position = { childNode.position = {
x: childNode.position.x - xChange, x: childNode.position.x - xChange + nodeOrigin[0] * (width - prevWidth),
y: childNode.position.y - yChange, y: childNode.position.y - yChange + nodeOrigin[1] * (height - prevHeight),
}; };
childChanges.push(childNode); childChanges.push(childNode);
} }
packages/system/src/xyresizer/utils.ts
+25 -12
View File
@@ -1,4 +1,4 @@
import { CoordinateExtent } from '../types'; import { CoordinateExtent, NodeOrigin } from '../types';
import { getPointerPosition } from '../utils'; import { getPointerPosition } from '../utils';
import { ControlPosition } from './types'; 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 * 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 * 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 * 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! * 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, * 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) * 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. * 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 startValues - starting values of resize
* @param controlDirection - dimensions affected by the resize * @param controlDirection - dimensions affected by the resize
* @param pointerPosition - the current pointer position corrected for snapping * @param pointerPosition - the current pointer position corrected for snapping
@@ -115,6 +117,7 @@ export function getDimensionsAfterResize(
pointerPosition: ReturnType<typeof getPointerPosition>, pointerPosition: ReturnType<typeof getPointerPosition>,
boundaries: { minWidth: number; maxWidth: number; minHeight: number; maxHeight: number }, boundaries: { minWidth: number; maxWidth: number; minHeight: number; maxHeight: number },
keepAspectRatio: boolean, keepAspectRatio: boolean,
nodeOrigin: NodeOrigin,
extent?: CoordinateExtent, extent?: CoordinateExtent,
childExtent?: CoordinateExtent childExtent?: CoordinateExtent
) { ) {
@@ -132,6 +135,9 @@ export function getDimensionsAfterResize(
const newWidth = startWidth + (affectsX ? -distX : distX); const newWidth = startWidth + (affectsX ? -distX : distX);
const newHeight = startHeight + (affectsY ? -distY : distY); 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 // Check if maxWidth, minWWidth, maxHeight, minHeight are restricting the resize
let clampX = getSizeClamp(newWidth, minWidth, maxWidth); let clampX = getSizeClamp(newWidth, minWidth, maxWidth);
let clampY = getSizeClamp(newHeight, minHeight, maxHeight); let clampY = getSizeClamp(newHeight, minHeight, maxHeight);
@@ -141,15 +147,15 @@ export function getDimensionsAfterResize(
let xExtentClamp = 0; let xExtentClamp = 0;
let yExtentClamp = 0; let yExtentClamp = 0;
if (affectsX && distX < 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) { } else if (!affectsX && distX > 0) {
xExtentClamp = getUpperExtentClamp(startX + newWidth, extent[1][0]); xExtentClamp = getUpperExtentClamp(startX + newWidth + originOffsetX, extent[1][0]);
} }
if (affectsY && distY < 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) { } 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); clampX = Math.max(clampX, xExtentClamp);
@@ -187,10 +193,12 @@ export function getDimensionsAfterResize(
if (extent) { if (extent) {
let aspectExtentClamp = 0; let aspectExtentClamp = 0;
if ((!affectsX && !affectsY) || (affectsX && !affectsY && isDiagonal)) { 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 { } else {
aspectExtentClamp = 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); clampX = Math.max(clampX, aspectExtentClamp);
} }
@@ -216,10 +224,12 @@ export function getDimensionsAfterResize(
if (extent) { if (extent) {
let aspectExtentClamp = 0; let aspectExtentClamp = 0;
if ((!affectsX && !affectsY) || (affectsY && !affectsX && isDiagonal)) { 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 { } else {
aspectExtentClamp = 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); 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 { return {
width: startWidth + (affectsX ? -distX : distX), width: startWidth + (affectsX ? -distX : distX),
height: startHeight + (affectsY ? -distY : distY), height: startHeight + (affectsY ? -distY : distY),
x: affectsX ? startX + distX : startX, x: nodeOrigin[0] * distX * (!affectsX ? 1 : -1) + x,
y: affectsY ? startY + distY : startY, y: nodeOrigin[1] * distY * (!affectsY ? 1 : -1) + y,
}; };
} }