From 20e9d1d39669bf1cc6ceb08428fe8254b549b6d8 Mon Sep 17 00:00:00 2001
From: Braks <78412429+bcakmakoglu@users.noreply.github.com>
Date: Thu, 21 Oct 2021 17:42:33 +0200
Subject: [PATCH] update: fix names

---
 examples/Basic/Basic.vue                      |   6 +-
 examples/CustomNode/CustomNode.vue            |   6 +-
 examples/DragNDrop/DnD.vue                    |  14 +-
 examples/DragNDrop/Sidebar.vue                |   2 +-
 examples/DragNDrop/dnd.css                    |   2 +-
 examples/EdgeTypes/EdgeTypesExample.vue       |   6 +-
 examples/EdgeWithButton/EdgeWithButton.vue    |   2 +-
 examples/Edges/EdgesExample.vue               |   6 +-
 examples/Empty/EmptyExample.vue               |   6 +-
 examples/Layouting/LayoutingExample.vue       |   5 +-
 examples/Layouting/initial-elements.ts        |  18 +-
 .../NodeTypeChange/NodeTypeChangeExample.vue  |   2 +-
 examples/Overview/Overview.vue                |   6 +-
 rollup.ts                                     |   4 +-
 src/components/UserSelection/utils.ts         |   8 +-
 src/composables/useHandle.ts                  |   6 +-
 src/container/Flow/Flow.vue                   |   2 +-
 src/container/ZoomPane/ZoomPane.vue           | 157 +++++++++++++++++-
 src/store/index.ts                            |   2 +-
 src/store/useFlowStore.ts                     |   4 +-
 src/types/actions.ts                          |   2 +-
 src/types/store.ts                            |   6 +-
 src/utils/graph.ts                            |   2 +-
 23 files changed, 210 insertions(+), 64 deletions(-)

diff --git a/examples/Basic/Basic.vue b/examples/Basic/Basic.vue
index 8173c483..6ce3e7c5 100644
--- a/examples/Basic/Basic.vue
+++ b/examples/Basic/Basic.vue
@@ -28,9 +28,9 @@ const rfInstance = ref<OnLoadParams | null>(null)
 const onElementsRemove = (elementsToRemove: Elements) =>
   (elements.value = removeElements(elementsToRemove, elements.value as Elements))
 const onConnect = (params: Edge | Connection) => (elements.value = addEdge(params, elements.value as Elements))
-const onLoad = (revueFlowInstance: OnLoadParams) => {
-  revueFlowInstance.fitView({ padding: 0.1 })
-  rfInstance.value = revueFlowInstance
+const onLoad = (flowInstance: OnLoadParams) => {
+  flowInstance.fitView({ padding: 0.1 })
+  rfInstance.value = flowInstance
 }
 
 const updatePos = () => {
diff --git a/examples/CustomNode/CustomNode.vue b/examples/CustomNode/CustomNode.vue
index e6ea2e22..ea28e6c4 100644
--- a/examples/CustomNode/CustomNode.vue
+++ b/examples/CustomNode/CustomNode.vue
@@ -25,9 +25,9 @@ const nodeTypes = {
   selectorNode: ColorSelectorNode,
 }
 
-const onLoad = (revueFlowInstance: OnLoadParams) => {
-  revueFlowInstance.fitView()
-  console.log('flow loaded:', revueFlowInstance)
+const onLoad = (flowInstance: OnLoadParams) => {
+  flowInstance.fitView()
+  console.log('flow loaded:', flowInstance)
 }
 const onNodeDragStop = (_: MouseEvent, node: Node) => console.log('drag stop', node)
 const onElementClick = (_: MouseEvent, element: FlowElement) => console.log('click', element)
diff --git a/examples/DragNDrop/DnD.vue b/examples/DragNDrop/DnD.vue
index e49c1180..ee8890a4 100644
--- a/examples/DragNDrop/DnD.vue
+++ b/examples/DragNDrop/DnD.vue
@@ -3,7 +3,7 @@ import Sidebar from './Sidebar.vue'
 import Flow, { addEdge, removeElements, Controls, OnLoadParams, Elements, Connection, Edge, ElementId, Node } from '~/index'
 import './dnd.css'
 
-const revueFlowInstance = ref<OnLoadParams>()
+const flowInstance = ref<OnLoadParams>()
 const elements = ref<Elements>([
   {
     id: '1',
@@ -26,15 +26,15 @@ const onDragOver = (event: DragEvent) => {
 const onConnect = (params: Connection | Edge) => (elements.value = addEdge(params, elements.value as Elements))
 const onElementsRemove = (elementsToRemove: Elements) =>
   (elements.value = removeElements(elementsToRemove, elements.value as Elements))
-const onLoad = (instance: OnLoadParams) => (revueFlowInstance.value = instance)
+const onLoad = (instance: OnLoadParams) => (flowInstance.value = instance)
 
 const onDrop = (event: DragEvent) => {
   event.preventDefault()
 
-  if (revueFlowInstance.value) {
-    console.log(event.dataTransfer?.getData('application/revueflow'))
-    const type = event.dataTransfer?.getData('application/revueflow')
-    const position = revueFlowInstance.value.project({ x: event.clientX, y: event.clientY - 40 })
+  if (flowInstance.value) {
+    console.log(event.dataTransfer?.getData('application/vueflow'))
+    const type = event.dataTransfer?.getData('application/vueflow')
+    const position = flowInstance.value.project({ x: event.clientX, y: event.clientY - 40 })
     const newNode = {
       id: getId(),
       type,
@@ -48,7 +48,7 @@ const onDrop = (event: DragEvent) => {
 </script>
 <template>
   <div class="dndflow">
-    <div class="revueflow-wrapper" @drop="onDrop">
+    <div class="vueflow-wrapper" @drop="onDrop">
       <Flow :elements="elements" @elements-remove="onElementsRemove" @load="onLoad" @connect="onConnect" @dragover="onDragOver">
         <Controls />
       </Flow>
diff --git a/examples/DragNDrop/Sidebar.vue b/examples/DragNDrop/Sidebar.vue
index e00eb6d9..39c8681e 100644
--- a/examples/DragNDrop/Sidebar.vue
+++ b/examples/DragNDrop/Sidebar.vue
@@ -1,7 +1,7 @@
 <script lang="ts" setup>
 const onDragStart = (event: DragEvent, nodeType: string) => {
   if (event.dataTransfer) {
-    event.dataTransfer.setData('application/revueflow', nodeType)
+    event.dataTransfer.setData('application/vueflow', nodeType)
     event.dataTransfer.effectAllowed = 'move'
   }
 }
diff --git a/examples/DragNDrop/dnd.css b/examples/DragNDrop/dnd.css
index 6ff6d489..7a74e437 100644
--- a/examples/DragNDrop/dnd.css
+++ b/examples/DragNDrop/dnd.css
@@ -20,7 +20,7 @@
   margin-bottom: 10px;
 }
 
-.dndflow .revueflow-wrapper {
+.dndflow .vue-flow-wrapper {
   flex-grow: 1;
   height: 100%;
 }
diff --git a/examples/EdgeTypes/EdgeTypesExample.vue b/examples/EdgeTypes/EdgeTypesExample.vue
index ae8d41ab..6f0b6235 100644
--- a/examples/EdgeTypes/EdgeTypesExample.vue
+++ b/examples/EdgeTypes/EdgeTypesExample.vue
@@ -5,9 +5,9 @@
 import { getElements } from './utils'
 import Flow, { removeElements, addEdge, MiniMap, Controls, Background, OnLoadParams, Connection, Edge, Elements } from '~/index'
 
-const onLoad = (reactFlowInstance: OnLoadParams) => {
-  reactFlowInstance.fitView()
-  console.log(reactFlowInstance.getElements())
+const onLoad = (flowInstance: OnLoadParams) => {
+  flowInstance.fitView()
+  console.log(flowInstance.getElements())
 }
 
 const elements = ref<Elements>(getElements())
diff --git a/examples/EdgeWithButton/EdgeWithButton.vue b/examples/EdgeWithButton/EdgeWithButton.vue
index 6c4bb8d3..75f4b7a1 100644
--- a/examples/EdgeWithButton/EdgeWithButton.vue
+++ b/examples/EdgeWithButton/EdgeWithButton.vue
@@ -32,7 +32,7 @@ const elements = ref<Elements>([
   },
 ] as Elements)
 
-const onLoad = (reactFlowInstance: OnLoadParams) => reactFlowInstance.fitView()
+const onLoad = (flowInstance: OnLoadParams) => flowInstance.fitView()
 const onElementsRemove = (elementsToRemove: Elements) =>
   (elements.value = removeElements(elementsToRemove, elements.value as Elements))
 const onConnect = (params: Connection | Edge) =>
diff --git a/examples/Edges/EdgesExample.vue b/examples/Edges/EdgesExample.vue
index 477c89fe..3d78e977 100644
--- a/examples/Edges/EdgesExample.vue
+++ b/examples/Edges/EdgesExample.vue
@@ -81,9 +81,9 @@ const edgeTypes: Record<string, any> = {
 
 const elements = ref<Elements>(initialElements as Elements)
 
-const onLoad = (reactFlowInstance: OnLoadParams) => reactFlowInstance.fitView()
-const onNodeDragStop = (_: MouseEvent, node: Node) => console.log('drag stop', node)
-const onElementClick = (_: MouseEvent, element: FlowElement) => console.log('click', element)
+const onLoad = (flowInstance: OnLoadParams) => flowInstance.fitView()
+const onNodeDragStop = (node: Node) => console.log('drag stop', node)
+const onElementClick = (element: FlowElement) => console.log('click', element)
 const onElementsRemove = (elementsToRemove: Elements) => (elements.value = removeElements(elementsToRemove, elements.value))
 const onConnect = (params: Connection | Edge) => (elements.value = addEdge(params, elements.value))
 </script>
diff --git a/examples/Empty/EmptyExample.vue b/examples/Empty/EmptyExample.vue
index 6f38d111..379b832c 100644
--- a/examples/Empty/EmptyExample.vue
+++ b/examples/Empty/EmptyExample.vue
@@ -20,9 +20,9 @@ const elements = ref<Elements>([])
 const onElementsRemove = (elementsToRemove: Elements) => (elements.value = removeElements(elementsToRemove, elements.value))
 const onConnect = (params: Connection | Edge) => (elements.value = addEdge(params, elements.value))
 
-const onLoad = (reactFlowInstance: OnLoadParams) => console.log('flow loaded:', reactFlowInstance)
-const onElementClick = (_: MouseEvent, element: FlowElement) => console.log('click', element)
-const onNodeDragStop = (_: MouseEvent, node: Node) => console.log('drag stop', node)
+const onLoad = (flowInstance: OnLoadParams) => console.log('flow loaded:', flowInstance)
+const onElementClick = (element: FlowElement) => console.log('click', element)
+const onNodeDragStop = (node: Node) => console.log('drag stop', node)
 
 const buttonStyle: CSSProperties = { position: 'absolute', left: '10px', top: '10px', zIndex: 4 }
 const addRandomNode = () => {
diff --git a/examples/Layouting/LayoutingExample.vue b/examples/Layouting/LayoutingExample.vue
index 88740d00..3867c65c 100644
--- a/examples/Layouting/LayoutingExample.vue
+++ b/examples/Layouting/LayoutingExample.vue
@@ -14,9 +14,10 @@ const nodeExtent: NodeExtent = [
 ]
 
 const elements = ref<Elements>(initialElements)
-const onConnect = (params: Connection | Edge) => (elements.value = addEdge(params, elements.value))
+const onConnect = (params: Connection | Edge) => (elements.value = addEdge({ ...params, animated: true }, elements.value))
 const onElementsRemove = (elementsToRemove: Elements) => (elements.value = removeElements(elementsToRemove, elements.value))
 
+// todo changing elements not properly updating flowchart...
 const onLayout = (direction: string) => {
   const isHorizontal = direction === 'LR'
   dagreGraph.setGraph({ rankdir: direction })
@@ -50,7 +51,7 @@ const onLayout = (direction: string) => {
       :node-extent="nodeExtent"
       @connect="onConnect"
       @clements-remove="onElementsRemove"
-      @load="() => onLayout('TB')"
+      @load="() => onLayout('LR')"
     >
       <Controls />
     </Flow>
diff --git a/examples/Layouting/initial-elements.ts b/examples/Layouting/initial-elements.ts
index c6b8dfcb..4bc1982e 100644
--- a/examples/Layouting/initial-elements.ts
+++ b/examples/Layouting/initial-elements.ts
@@ -56,16 +56,16 @@ const elements: Elements = [
     position,
   },
   { id: '7', type: 'output', data: { label: 'output' }, position: { x: 400, y: 450 } },
-  { id: 'e12', source: '1', target: '2', type: 'smoothstep' },
-  { id: 'e13', source: '1', target: '3', type: 'smoothstep' },
-  { id: 'e22a', source: '2', target: '2a', type: 'smoothstep' },
-  { id: 'e22b', source: '2', target: '2b', type: 'smoothstep' },
-  { id: 'e22c', source: '2', target: '2c', type: 'smoothstep' },
-  { id: 'e2c2d', source: '2c', target: '2d', type: 'smoothstep' },
+  { id: 'e12', source: '1', target: '2', type: 'smoothstep', animated: true },
+  { id: 'e13', source: '1', target: '3', type: 'smoothstep', animated: true },
+  { id: 'e22a', source: '2', target: '2a', type: 'smoothstep', animated: true },
+  { id: 'e22b', source: '2', target: '2b', type: 'smoothstep', animated: true },
+  { id: 'e22c', source: '2', target: '2c', type: 'smoothstep', animated: true },
+  { id: 'e2c2d', source: '2c', target: '2d', type: 'smoothstep', animated: true },
 
-  { id: 'e45', source: '4', target: '5', type: 'smoothstep' },
-  { id: 'e56', source: '5', target: '6', type: 'smoothstep' },
-  { id: 'e57', source: '5', target: '7', type: 'smoothstep' },
+  { id: 'e45', source: '4', target: '5', type: 'smoothstep', animated: true },
+  { id: 'e56', source: '5', target: '6', type: 'smoothstep', animated: true },
+  { id: 'e57', source: '5', target: '7', type: 'smoothstep', animated: true },
 ] as Elements
 
 export default elements
diff --git a/examples/NodeTypeChange/NodeTypeChangeExample.vue b/examples/NodeTypeChange/NodeTypeChangeExample.vue
index 06a378ee..783de9c9 100644
--- a/examples/NodeTypeChange/NodeTypeChangeExample.vue
+++ b/examples/NodeTypeChange/NodeTypeChangeExample.vue
@@ -27,7 +27,7 @@ const elements = ref<Elements>(initialElements)
 
 const onConnect = (params: Connection | Edge) => (elements.value = addEdge(params, elements.value))
 
-const onLoad = (reactFlowInstance: OnLoadParams) => reactFlowInstance.fitView()
+const onLoad = (flowInstance: OnLoadParams) => flowInstance.fitView()
 
 const changeType = () => {
   elements.value = elements.value.map((el) => {
diff --git a/examples/Overview/Overview.vue b/examples/Overview/Overview.vue
index 209bfb7e..eac4de56 100644
--- a/examples/Overview/Overview.vue
+++ b/examples/Overview/Overview.vue
@@ -35,9 +35,9 @@ const onSelectionContextMenu = (event: MouseEvent, nodes: Node[]) => {
 const onElementClick = (_: MouseEvent, element: FlowElement) =>
   console.log(`${isNode(element) ? 'node' : 'edge'} click:`, element)
 const onSelectionChange = (elements: Elements | null) => console.log('selection change', elements)
-const onLoad = (reactFlowInstance: OnLoadParams) => {
-  console.log('flow loaded:', reactFlowInstance)
-  reactFlowInstance.fitView()
+const onLoad = (flowInstance: OnLoadParams) => {
+  console.log('flow loaded:', flowInstance)
+  flowInstance.fitView()
 }
 
 const onMoveEnd = (transform?: FlowTransform) => console.log('zoom/move end', transform)
diff --git a/rollup.ts b/rollup.ts
index 61b391e2..af28e5ad 100644
--- a/rollup.ts
+++ b/rollup.ts
@@ -27,7 +27,7 @@ for (const { external, iife } of activePackages) {
     '@vueuse/core': 'VueUse',
   }
 
-  const iifeName = 'RevueFlow'
+  const iifeName = 'VueFlow'
   const functionNames = ['vue-flow']
 
   for (const fn of functionNames) {
@@ -89,7 +89,7 @@ for (const { external, iife } of activePackages) {
         }),
         commonjs({ include: 'node_modules/**' }),
         replace({
-          __REACT_FLOW_VERSION__: JSON.stringify(pkg.version),
+          __VUE_FLOW_VERSION__: JSON.stringify(pkg.version),
           preventAssignment: true,
         }),
       ],
diff --git a/src/components/UserSelection/utils.ts b/src/components/UserSelection/utils.ts
index 81a00e0b..dc72ab1b 100644
--- a/src/components/UserSelection/utils.ts
+++ b/src/components/UserSelection/utils.ts
@@ -1,12 +1,10 @@
 import { XYPosition } from '~/types'
 
 export function getMousePosition(event: MouseEvent): XYPosition | void {
-  const revueFlowNode = (event.target as Element).closest('.vue-flow')
-  if (!revueFlowNode) {
-    return
-  }
+  const flowNode = (event.target as Element).closest('.vue-flow')
+  if (!flowNode) return
 
-  const containerBounds = revueFlowNode.getBoundingClientRect()
+  const containerBounds = flowNode.getBoundingClientRect()
 
   return {
     x: event.clientX - containerBounds.left,
diff --git a/src/composables/useHandle.ts b/src/composables/useHandle.ts
index 5d3ccd99..2c696729 100644
--- a/src/composables/useHandle.ts
+++ b/src/composables/useHandle.ts
@@ -82,7 +82,7 @@ export default () => {
     },
     elementEdgeUpdaterType?: HandleType,
   ) => {
-    const revueFlowNode = (event.target as Element).closest('.vue-flow')
+    const flowNode = (event.target as Element).closest('.vue-flow')
     // when vue-flow is used inside a shadow root we can't use document
     const doc = getHostForElement(event.target as HTMLElement)
 
@@ -92,10 +92,10 @@ export default () => {
     const elementBelowIsTarget = elementBelow?.classList.contains('target')
     const elementBelowIsSource = elementBelow?.classList.contains('source')
 
-    if (!revueFlowNode || (!elementBelowIsTarget && !elementBelowIsSource && !elementEdgeUpdaterType)) return
+    if (!flowNode || (!elementBelowIsTarget && !elementBelowIsSource && !elementEdgeUpdaterType)) return
 
     const handleType = elementEdgeUpdaterType || (elementBelowIsTarget ? 'target' : 'source')
-    const containerBounds = revueFlowNode.getBoundingClientRect()
+    const containerBounds = flowNode.getBoundingClientRect()
     let recentHoveredHandle: Element
 
     store.connectionPosition.x = event.clientX - containerBounds.left
diff --git a/src/container/Flow/Flow.vue b/src/container/Flow/Flow.vue
index a1b4fc69..a5668a5e 100644
--- a/src/container/Flow/Flow.vue
+++ b/src/container/Flow/Flow.vue
@@ -129,7 +129,7 @@ const init = (opts: typeof props) => {
 onBeforeUnmount(() => store?.$dispose())
 
 watch(props, (val) => init(val))
-init(props)
+onMounted(() => init(props))
 
 const nodeTypes = createNodeTypes({ ...defaultNodeTypes, ...props.nodeTypes })
 const edgeTypes = createEdgeTypes({ ...defaultEdgeTypes, ...props.edgeTypes })
diff --git a/src/container/ZoomPane/ZoomPane.vue b/src/container/ZoomPane/ZoomPane.vue
index 7536e243..fd16500d 100644
--- a/src/container/ZoomPane/ZoomPane.vue
+++ b/src/container/ZoomPane/ZoomPane.vue
@@ -1,8 +1,11 @@
 <script lang="ts" setup>
 import { onMounted } from 'vue'
-import { KeyCode, PanOnScrollMode } from '~/types'
-import { useHooks, useStore, useZoom, useZoomPanHelper } from '~/composables'
-import { onLoadGetElements, onLoadProject, onLoadToObject } from '~/utils/graph'
+import { D3ZoomEvent, zoom, zoomIdentity, ZoomTransform } from 'd3-zoom'
+import { get } from '@vueuse/core'
+import { pointer, select } from 'd3-selection'
+import { FlowTransform, KeyCode, PanOnScrollMode } from '~/types'
+import { useHooks, useKeyPress, useStore, useZoomPanHelper } from '~/composables'
+import { clamp, onLoadGetElements, onLoadProject, onLoadToObject } from '~/utils/graph'
 
 interface ZoomPaneProps {
   selectionKeyCode?: KeyCode
@@ -36,13 +39,157 @@ const hooks = useHooks()
 
 const zoomPaneEl = templateRef<HTMLDivElement>('zoom-pane', null)
 
+const viewChanged = (prevTransform: FlowTransform, eventTransform: ZoomTransform): boolean =>
+  prevTransform.x !== eventTransform.x || prevTransform.y !== eventTransform.y || prevTransform.zoom !== eventTransform.k
+
+const eventToFlowTransform = (eventTransform: ZoomTransform): FlowTransform => ({
+  x: eventTransform.x,
+  y: eventTransform.y,
+  zoom: eventTransform.k,
+})
+
+const clampedX = clamp(props.defaultPosition[0], store.translateExtent[0][0], store.translateExtent[1][0])
+const clampedY = clamp(props.defaultPosition[1], store.translateExtent[0][1], store.translateExtent[1][1])
+const clampedZoom = clamp(props.defaultZoom, store.minZoom, store.maxZoom)
+const transform = ref({ x: clampedX, y: clampedY, zoom: clampedZoom })
+
+const d3Zoom = ref(zoom<HTMLDivElement, any>().scaleExtent([store.minZoom, store.maxZoom]).translateExtent(store.translateExtent))
+const d3Selection = ref()
+
+until(zoomPaneEl)
+  .toBeTruthy()
+  .then(() => {
+    const d3z = get(d3Zoom)!
+    d3Selection.value = select(zoomPaneEl.value).call(d3z)
+    const d3s = get(d3Selection)!
+    const d3ZoomHandler = d3s.on('wheel.zoom')
+
+    const updatedTransform = zoomIdentity.translate(clampedX, clampedY).scale(clampedZoom)
+    d3z.transform(d3s, updatedTransform)
+    store.initD3Zoom({ d3Zoom: d3z, d3Selection: d3s, d3ZoomHandler })
+    store.transform = [updatedTransform.x, updatedTransform.y, updatedTransform.k]
+
+    const applyZoomHandlers = () => {
+      d3z.on('start', (event: D3ZoomEvent<HTMLDivElement, any>) => {
+        if (viewChanged(transform.value, event.transform)) {
+          const flowTransform = eventToFlowTransform(event.transform)
+          transform.value = flowTransform
+
+          hooks.moveStart.trigger(flowTransform)
+        }
+      })
+
+      d3z.on('end', (event: D3ZoomEvent<HTMLDivElement, any>) => {
+        if (viewChanged(transform.value, event.transform)) {
+          const flowTransform = eventToFlowTransform(event.transform)
+          transform.value = flowTransform
+
+          hooks.moveEnd.trigger(flowTransform)
+        }
+      })
+
+      useKeyPress(props.selectionKeyCode, (keyPress) => {
+        if (keyPress) {
+          d3z.on('zoom', null)
+        } else {
+          d3z.on('zoom', (event: D3ZoomEvent<HTMLDivElement, any>) => {
+            const flowTransform = eventToFlowTransform(event.transform)
+            transform.value = flowTransform
+
+            hooks.move.trigger(flowTransform)
+          })
+        }
+      })
+
+      useKeyPress(props.zoomActivationKeyCode, (keyPress) => {
+        if (props.panOnScroll && keyPress) {
+          d3s
+            ?.on('wheel', (event: WheelEvent) => {
+              event.preventDefault()
+              event.stopImmediatePropagation()
+
+              const currentZoom = d3s?.property('__zoom').k || 1
+
+              if (event.ctrlKey && props.zoomOnPinch) {
+                const point = pointer(event)
+                // taken from https://github.com/d3/d3-zoom/blob/master/src/zoom.js
+                const pinchDelta = -event.deltaY * (event.deltaMode === 1 ? 0.05 : event.deltaMode ? 1 : 0.002) * 10
+                const zoom = currentZoom * Math.pow(2, pinchDelta)
+                if (d3s) d3z.scaleTo(d3s, zoom, point)
+
+                return
+              }
+
+              // increase scroll speed in firefox
+              // firefox: deltaMode === 1; chrome: deltaMode === 0
+              const deltaNormalize = event.deltaMode === 1 ? 20 : 1
+              const deltaX = props.panOnScrollMode === PanOnScrollMode.Vertical ? 0 : event.deltaX * deltaNormalize
+              const deltaY = props.panOnScrollMode === PanOnScrollMode.Horizontal ? 0 : event.deltaY * deltaNormalize
+
+              if (d3s && props.panOnScrollSpeed)
+                d3z?.translateBy(
+                  d3s,
+                  -(deltaX / currentZoom) * props.panOnScrollSpeed,
+                  -(deltaY / currentZoom) * props.panOnScrollSpeed,
+                )
+            })
+            .on('wheel.zoom', null)
+        } else if (typeof d3ZoomHandler !== 'undefined') {
+          d3s?.on('wheel', null).on('wheel.zoom', d3ZoomHandler)
+        }
+      })
+    }
+
+    const applyZoomFilter = () => {
+      const keyPress = useKeyPress(props.selectionKeyCode)
+      d3z.filter((event: MouseEvent) => {
+        const zoomScroll = props.zoomOnScroll
+        const pinchZoom = props.zoomOnPinch && event.ctrlKey
+
+        // if all interactions are disabled, we prevent all zoom events
+        if (!props.paneMoveable && !zoomScroll && !props.panOnScroll && !props.zoomOnDoubleClick && !props.zoomOnPinch)
+          return false
+
+        // during a selection we prevent all other interactions
+        if (keyPress.value) return false
+
+        // if zoom on double click is disabled, we prevent the double click event
+        if (!props.zoomOnDoubleClick && event.type === 'dblclick') return false
+
+        if ((event.target as Element).closest('.nowheel') && event.type === 'wheel') return false
+
+        // when the target element is a node, we still allow zooming
+        if (
+          ((event.target as Element).closest('.vue-flow__node') || (event.target as Element).closest('.vue-flow__edge')) &&
+          event.type !== 'wheel'
+        )
+          return false
+
+        // when the target element is a node selection, we still allow zooming
+        if ((event.target as Element).closest('.vue-flow__nodesselection') && event.type !== 'wheel') return false
+
+        if (!props.zoomOnPinch && event.ctrlKey && event.type === 'wheel') return false
+
+        // when there is no scroll handling enabled, we prevent all wheel events
+        if (!zoomScroll && !props.panOnScroll && !pinchZoom && event.type === 'wheel') return false
+
+        // if the pane is not movable, we prevent dragging it with mousestart or touchstart
+        if (!props.paneMoveable && (event.type === 'mousedown' || event.type === 'touchstart')) return false
+
+        // default filter for d3-zoom
+        return (!event.ctrlKey || event.type === 'wheel') && !event.button
+      })
+    }
+
+    applyZoomHandlers()
+    applyZoomFilter()
+  })
+
 const { width, height } = useElementBounding(zoomPaneEl)
 store.dimensions = {
   width: width.value,
   height: height.value,
 }
-
-const { transform } = useZoom(zoomPaneEl, props)
 store.transform = [transform.value.x, transform.value.y, transform.value.zoom]
 
 watch(width, (val) => (store.dimensions.width = val))
diff --git a/src/store/index.ts b/src/store/index.ts
index 8279caa4..d7f28009 100644
--- a/src/store/index.ts
+++ b/src/store/index.ts
@@ -54,7 +54,7 @@ export const initialState = (): FlowState => ({
 
   multiSelectionActive: false,
 
-  revueFlowVersion: typeof __VUE_FLOW_VERSION__ !== 'undefined' ? __VUE_FLOW_VERSION__ : '-',
+  vueFlowVersion: typeof __VUE_FLOW_VERSION__ !== 'undefined' ? __VUE_FLOW_VERSION__ : '-',
 })
 
 export { default as useFlowStore } from './useFlowStore'
diff --git a/src/store/useFlowStore.ts b/src/store/useFlowStore.ts
index 9721216e..5ab7f774 100644
--- a/src/store/useFlowStore.ts
+++ b/src/store/useFlowStore.ts
@@ -1,6 +1,6 @@
 import { setActivePinia, createPinia, defineStore, StoreDefinition } from 'pinia'
 import isEqual from 'fast-deep-equal'
-import { Edge, FlowState, Node, RevueFlowActions } from '~/types'
+import { Edge, FlowState, Node, FlowActions } from '~/types'
 import { clampPosition, getDimensions } from '~/utils'
 import { getConnectedEdges, getNodesInside, getRectOfNodes, isEdge, isNode, parseEdge, parseNode } from '~/utils/graph'
 import { getHandleBounds } from '~/components/Nodes/utils'
@@ -11,7 +11,7 @@ type NextElements = {
 }
 const pinia = createPinia()
 
-export default function useFlowStore(preloadedState: FlowState): StoreDefinition<string, FlowState, any, RevueFlowActions> {
+export default function useFlowStore(preloadedState: FlowState): StoreDefinition<string, FlowState, any, FlowActions> {
   setActivePinia(pinia)
 
   return defineStore({
diff --git a/src/types/actions.ts b/src/types/actions.ts
index f1d8fdc2..be2c987b 100644
--- a/src/types/actions.ts
+++ b/src/types/actions.ts
@@ -3,7 +3,7 @@ import { NodeDiffUpdate, NodeDimensionUpdate, NodeExtent, NodePosUpdate, Transla
 import { InitD3ZoomPayload } from './panel'
 import { SetConnectionId } from './connection'
 
-export interface RevueFlowActions {
+export interface FlowActions {
   setElements: (elements: Elements) => void
   updateNodeDimensions: (update: NodeDimensionUpdate) => void
   updateNodePos: (payload: NodePosUpdate) => void
diff --git a/src/types/store.ts b/src/types/store.ts
index 81f6f9fe..e833f522 100644
--- a/src/types/store.ts
+++ b/src/types/store.ts
@@ -4,7 +4,7 @@ import { HandleType } from './handle'
 import { ConnectionMode, OnConnectEndFunc, OnConnectFunc, OnConnectStartFunc, OnConnectStopFunc } from './connection'
 import { Edge } from './edge'
 import { Node, NodeExtent, TranslateExtent } from './node'
-import { RevueFlowActions } from './actions'
+import { FlowActions } from './actions'
 import { D3Selection, D3Zoom, D3ZoomHandler } from '~/types/panel'
 
 export interface FlowState {
@@ -44,7 +44,7 @@ export interface FlowState {
 
   multiSelectionActive: boolean
 
-  revueFlowVersion: string
+  vueFlowVersion: string
 
   onConnect?: OnConnectFunc
   onConnectStart?: OnConnectStartFunc
@@ -52,4 +52,4 @@ export interface FlowState {
   onConnectEnd?: OnConnectEndFunc
 }
 
-export type FlowStore = Store<string, FlowState, any, RevueFlowActions>
+export type FlowStore = Store<string, FlowState, any, FlowActions>
diff --git a/src/utils/graph.ts b/src/utils/graph.ts
index e5231d96..52a03f40 100644
--- a/src/utils/graph.ts
+++ b/src/utils/graph.ts
@@ -75,7 +75,7 @@ export const removeElements = (elementsToRemove: Elements, elements: Elements):
 }
 
 const getEdgeId = ({ source, sourceHandle, target, targetHandle }: Connection): ElementId =>
-  `revueflow__edge-${source}${sourceHandle}-${target}${targetHandle}`
+  `vueflow__edge-${source}${sourceHandle}-${target}${targetHandle}`
 
 const connectionExists = (edge: Edge, elements: Elements) => {
   return elements.some(