From 86c72ab08a0c1deca0a1eb940f363537b98689b1 Mon Sep 17 00:00:00 2001
From: Braks <78412429+bcakmakoglu@users.noreply.github.com>
Date: Thu, 14 Apr 2022 14:28:28 +0200
Subject: [PATCH] fix: clamp zoom pan helper transformations

# What's changed?

* Clamp x, y positions before applying transformations so we can't position the d3container outside the permissable translate extent
---
 package/src/composables/useZoomPanHelper.ts | 9 +++++++--
 1 file changed, 7 insertions(+), 2 deletions(-)

diff --git a/package/src/composables/useZoomPanHelper.ts b/package/src/composables/useZoomPanHelper.ts
index e2d0c2e6..33fe2955 100644
--- a/package/src/composables/useZoomPanHelper.ts
+++ b/package/src/composables/useZoomPanHelper.ts
@@ -1,7 +1,7 @@
 import { zoomIdentity } from 'd3-zoom'
 import useVueFlow from './useVueFlow'
 import useWindow from './useWindow'
-import { getRectOfNodes, pointToRendererPoint, getTransformForBounds } from '~/utils'
+import { getRectOfNodes, pointToRendererPoint, getTransformForBounds, clampPosition } from '~/utils'
 import { GraphNode, Store, ViewportFuncs, D3Selection } from '~/types'
 
 const DEFAULT_PADDING = 0.1
@@ -57,7 +57,12 @@ export default (store: Store = useVueFlow().store): ViewportFuncs => {
   }
 
   const transformViewport = (x: number, y: number, zoom: number, duration?: number) => {
-    const nextTransform = zoomIdentity.translate(x, y).scale(zoom)
+    const { x: clampedX, y: clampedY } = clampPosition(
+      { x: store.viewport.x - x, y: store.viewport.y - y },
+      store.translateExtent,
+    )
+
+    const nextTransform = zoomIdentity.translate(-clampedX, -clampedY).scale(zoom)
     if (store.d3Selection && store.d3Zoom) {
       store.d3Zoom.transform(transition(store.d3Selection, duration), nextTransform)
     }