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

Fix node resizing while zooming

Browse Source
This commit is contained in:
peterkogo
2024-11-07 13:26:54 +01:00
parent 2fa9a92042
commit d14e616b73
4 changed files with 23 additions and 7 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
.changeset/tidy-onions-talk.md
View File

@@ -4,4 +4,4 @@
'@xyflow/svelte': patch
---
Fix node dragging while zooming on flow that does not cover whole browser window.
Fix node dragging & resizing while zooming on flow that does not cover whole browser window.

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

@@ -56,13 +56,14 @@ function ResizeControl({
domNode: resizeControlRef.current,
nodeId: id,
getStoreItems: () => {
const { nodeLookup, transform, snapGrid, snapToGrid, nodeOrigin } = store.getState();
const { nodeLookup, transform, snapGrid, snapToGrid, nodeOrigin, domNode } = store.getState();
return {
nodeLookup,
transform,
snapGrid,
snapToGrid,
nodeOrigin,
paneDomNode: domNode,
};
},
onChange: (change: XYResizerChange, childChanges: XYResizerChildChange[]) => {

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, nodeOrigin } = useStore();
const { nodeLookup, snapGrid, viewport, nodes, nodeOrigin, domNode } = useStore();
const contextNodeId = getContext<string>('svelteflow__node_id');
$: id = typeof nodeId === 'string' ? nodeId : contextNodeId;
@@ -65,7 +65,8 @@
transform: [$viewport.x, $viewport.y, $viewport.zoom],
snapGrid: $snapGrid ?? undefined,
snapToGrid: !!$snapGrid,
nodeOrigin: $nodeOrigin
nodeOrigin: $nodeOrigin,
paneDomNode: $domNode
};
},
onChange: (change: XYResizerChange, childChanges: XYResizerChildChange[]) => {

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

@@ -45,6 +45,7 @@ type XYResizerParams = {
snapGrid?: [number, number];
snapToGrid: boolean;
nodeOrigin: NodeOrigin;
paneDomNode: HTMLDivElement | null;
};
onChange: (changes: XYResizerChange, childChanges: XYResizerChildChange[]) => void;
onEnd?: () => void;
@@ -109,6 +110,7 @@ export function XYResizer({ domNode, nodeId, getStoreItems, onChange, onEnd }: X
const controlDirection = getControlDirection(controlPosition);
let node: InternalNodeBase | undefined = undefined;
let containerBounds: DOMRect | null = null;
let childNodes: XYResizerChildChange[] = [];
let parentNode: InternalNodeBase | undefined = undefined; // Needed to fix expandParent
let parentExtent: CoordinateExtent | undefined = undefined;
@@ -116,14 +118,20 @@ export function XYResizer({ domNode, nodeId, getStoreItems, onChange, onEnd }: X
const dragHandler = drag<HTMLDivElement, unknown>()
.on('start', (event: ResizeDragEvent) => {
const { nodeLookup, transform, snapGrid, snapToGrid, nodeOrigin } = getStoreItems();
const { nodeLookup, transform, snapGrid, snapToGrid, nodeOrigin, paneDomNode } = getStoreItems();
node = nodeLookup.get(nodeId);
if (!node) {
return;
}
const { xSnapped, ySnapped } = getPointerPosition(event.sourceEvent, { transform, snapGrid, snapToGrid });
containerBounds = paneDomNode?.getBoundingClientRect() ?? null;
const { xSnapped, ySnapped } = getPointerPosition(event.sourceEvent, {
transform,
snapGrid,
snapToGrid,
containerBounds,
});
prevValues = {
width: node.measured.width ?? 0,
@@ -178,7 +186,13 @@ export function XYResizer({ domNode, nodeId, getStoreItems, onChange, onEnd }: X
})
.on('drag', (event: ResizeDragEvent) => {
const { transform, snapGrid, snapToGrid, nodeOrigin: storeNodeOrigin } = getStoreItems();
const pointerPosition = getPointerPosition(event.sourceEvent, { transform, snapGrid, snapToGrid });
const pointerPosition = getPointerPosition(event.sourceEvent, {
transform,
snapGrid,
snapToGrid,
containerBounds,
});
const childChanges: XYResizerChildChange[] = [];
if (!node) {