update: fix names

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,

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

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 })

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))

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'

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({

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

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>

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(