diff --git a/packages/react/CHANGELOG.md b/packages/react/CHANGELOG.md index 5828b7c4..951f4895 100644 --- a/packages/react/CHANGELOG.md +++ b/packages/react/CHANGELOG.md @@ -2,6 +2,14 @@ ## 12.0.0-next.6 +## Minor changes + +- pass Node/Edge types to changes thanks @FelipeEmos +- use position instead of positionAbsolute for `getNodesBounds` +- add second option param to `screenToFlowPosition` for configuring if `snapToGrid` should be used + +## 12.0.0-next.6 + ### Minor changes - fix `deleteElements` diff --git a/packages/react/src/hooks/useViewportHelper.ts b/packages/react/src/hooks/useViewportHelper.ts index 481bae15..39320459 100644 --- a/packages/react/src/hooks/useViewportHelper.ts +++ b/packages/react/src/hooks/useViewportHelper.ts @@ -86,8 +86,8 @@ const useViewportHelper = (): ViewportHelperFunctions => { panZoom?.setViewport(viewport, { duration: options?.duration }); }, - screenToFlowPosition: (position: XYPosition) => { - const { transform, snapToGrid, snapGrid, domNode } = store.getState(); + screenToFlowPosition: (position: XYPosition, options: { snapToGrid: boolean } = { snapToGrid: true }) => { + const { transform, snapGrid, domNode } = store.getState(); if (!domNode) { return position; @@ -100,7 +100,7 @@ const useViewportHelper = (): ViewportHelperFunctions => { y: position.y - domY, }; - return pointToRendererPoint(correctedPosition, transform, snapToGrid, snapGrid || [1, 1]); + return pointToRendererPoint(correctedPosition, transform, options.snapToGrid, snapGrid); }, flowToScreenPosition: (position: XYPosition) => { const { transform, domNode } = store.getState(); diff --git a/packages/react/src/types/general.ts b/packages/react/src/types/general.ts index 82cb23ce..9a36e41f 100644 --- a/packages/react/src/types/general.ts +++ b/packages/react/src/types/general.ts @@ -55,7 +55,7 @@ export type ViewportHelperFunctions = { fitView: FitView; setCenter: SetCenter; fitBounds: FitBounds; - screenToFlowPosition: (position: XYPosition) => XYPosition; + screenToFlowPosition: (position: XYPosition, options?: { snapToGrid: boolean }) => XYPosition; flowToScreenPosition: (position: XYPosition) => XYPosition; viewportInitialized: boolean; }; diff --git a/packages/svelte/CHANGELOG.md b/packages/svelte/CHANGELOG.md index b2fef4b0..96044f85 100644 --- a/packages/svelte/CHANGELOG.md +++ b/packages/svelte/CHANGELOG.md @@ -1,5 +1,11 @@ # @xyflow/svelte +## 0.0.34 + +## Minor changes + +- add second option param to `screenToFlowPosition` for configuring if `snapToGrid` should be used + ## 0.0.33 ### Bugfix diff --git a/packages/svelte/src/lib/hooks/useSvelteFlow.ts b/packages/svelte/src/lib/hooks/useSvelteFlow.ts index c4da0c2b..d47ee45b 100644 --- a/packages/svelte/src/lib/hooks/useSvelteFlow.ts +++ b/packages/svelte/src/lib/hooks/useSvelteFlow.ts @@ -53,7 +53,7 @@ export function useSvelteFlow(): { nodes?: (Node | { id: Node['id'] })[]; edges?: (Edge | { id: Edge['id'] })[]; }) => Promise<{ deletedNodes: Node[]; deletedEdges: Edge[] }>; - screenToFlowPosition: (position: XYPosition) => XYPosition; + screenToFlowPosition: (position: XYPosition, options?: { snapToGrid: boolean }) => XYPosition; flowToScreenPosition: (position: XYPosition) => XYPosition; viewport: Writable; updateNode: ( @@ -228,14 +228,17 @@ export function useSvelteFlow(): { deletedEdges: matchingEdges }; }, - screenToFlowPosition: (position: XYPosition) => { + screenToFlowPosition: ( + position: XYPosition, + options: { snapToGrid: boolean } = { snapToGrid: true } + ) => { const _domNode = get(domNode); if (!_domNode) { return position; } - const _snapGrid = get(snapGrid); + const _snapGrid = options.snapToGrid ? get(snapGrid) : false; const { x, y, zoom } = get(viewport); const { x: domX, y: domY } = _domNode.getBoundingClientRect(); const correctedPosition = {