From a7b141a9170042f579a4cb215f321044c4bd0ef4 Mon Sep 17 00:00:00 2001 From: moklick Date: Wed, 12 Feb 2025 12:51:52 +0100 Subject: [PATCH 1/2] chore(screenToflowPosition): use correct defaults add snapGrid --- packages/react/src/hooks/useViewportHelper.ts | 13 +++++++++---- 1 file changed, 9 insertions(+), 4 deletions(-) diff --git a/packages/react/src/hooks/useViewportHelper.ts b/packages/react/src/hooks/useViewportHelper.ts index 5e7e6cfa..9a773d14 100644 --- a/packages/react/src/hooks/useViewportHelper.ts +++ b/packages/react/src/hooks/useViewportHelper.ts @@ -7,6 +7,7 @@ import { type XYPosition, rendererPointToPoint, getDimensions, + SnapGrid, } from '@xyflow/system'; import { useStoreApi } from '../hooks/useStore'; @@ -119,21 +120,25 @@ const useViewportHelper = (): ViewportHelperFunctions => { return Promise.resolve(true); }, - screenToFlowPosition: (clientPosition: XYPosition, options: { snapToGrid: boolean } = { snapToGrid: true }) => { - const { transform, snapGrid, domNode } = store.getState(); + screenToFlowPosition: ( + clientPosition: XYPosition, + options: { snapToGrid?: boolean; snapGrid?: SnapGrid } = {} + ) => { + const { transform, snapGrid, snapToGrid, domNode } = store.getState(); if (!domNode) { return clientPosition; } const { x: domX, y: domY } = domNode.getBoundingClientRect(); - const correctedPosition = { x: clientPosition.x - domX, y: clientPosition.y - domY, }; + const _snapGrid = options.snapGrid ?? snapGrid; + const _snapToGrid = options.snapToGrid ?? snapToGrid; - return pointToRendererPoint(correctedPosition, transform, options.snapToGrid, snapGrid); + return pointToRendererPoint(correctedPosition, transform, _snapToGrid, _snapGrid); }, flowToScreenPosition: (flowPosition: XYPosition) => { const { transform, domNode } = store.getState(); From 4d3f19e88b984ce6743970560d7367d174500f32 Mon Sep 17 00:00:00 2001 From: moklick Date: Wed, 12 Feb 2025 13:06:00 +0100 Subject: [PATCH 2/2] chore(changeset): add --- .changeset/quick-cobras-report.md | 5 +++++ 1 file changed, 5 insertions(+) create mode 100644 .changeset/quick-cobras-report.md diff --git a/.changeset/quick-cobras-report.md b/.changeset/quick-cobras-report.md new file mode 100644 index 00000000..68ed7250 --- /dev/null +++ b/.changeset/quick-cobras-report.md @@ -0,0 +1,5 @@ +--- +'@xyflow/react': patch +--- + +Add snapGrid option to screenToFlowPosition and set snapToGrid to false