feat(options): add preventScrolling option

Signed-off-by: Braks <78412429+bcakmakoglu@users.noreply.github.com>

src/container/VueFlow/VueFlow.vue

@@ -15,6 +15,7 @@ import {
   FlowState,
   FlowInstance,
   Loading,
+  FlowOptions,
 } from '../../types'
 import ZoomPane from '../ZoomPane/ZoomPane.vue'
 import SelectionPane from '../SelectionPane/SelectionPane.vue'
@@ -24,7 +25,7 @@ import LoadingIndicator from '../../components/Loading/LoadingIndicator.vue'
 import { createHooks, initFlow, useWindow, useZoomPanHelper } from '../../composables'
 import { onLoadGetElements, onLoadProject, onLoadToObject } from '../../utils'
 
-interface FlowProps {
+interface FlowProps extends FlowOptions {
   id?: string
   store?: FlowStore
   modelValue?: Elements
@@ -95,6 +96,7 @@ const props = withDefaults(defineProps<FlowProps>(), {
     [Number.POSITIVE_INFINITY, Number.POSITIVE_INFINITY],
   ],
   arrowHeadColor: '#b1b1b7',
+  preventScrolling: true,
   zoomOnScroll: true,
   zoomOnPinch: true,
   zoomOnDoubleClick: true,
@@ -182,6 +184,7 @@ const transitionName = computed(() => {
         <template #default>
           <ZoomPane
             :key="`zoom-pane-${store.$id}`"
+            :prevent-scrolling="store.preventScrolling"
             :selection-key-code="store.selectionKeyCode"
             :zoom-activation-key-code="store.zoomActivationKeyCode"
             :default-zoom="store.defaultZoom"

src/container/ZoomPane/ZoomPane.vue

@@ -18,6 +18,7 @@ interface ZoomPaneProps {
   panOnScrollSpeed?: number
   panOnScrollMode?: PanOnScrollMode
   zoomOnDoubleClick?: boolean
+  preventScrolling?: boolean
 }
 
 const props = withDefaults(defineProps<ZoomPaneProps>(), {
@@ -32,6 +33,7 @@ const props = withDefaults(defineProps<ZoomPaneProps>(), {
   panOnScrollSpeed: 0.5,
   panOnScrollMode: PanOnScrollMode.Free,
   paneMoveable: true,
+  preventScrolling: true,
 })
 const store = useStore()
 const zoomPaneEl = templateRef<HTMLDivElement>('zoomPane', null)
@@ -47,6 +49,8 @@ const eventToFlowTransform = (eventTransform: ZoomTransform): FlowTransform => (
   zoom: eventTransform.k,
 })
 
+const noWheel = (event: Event) => (event.target as Element).closest('.nowheel')
+
 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)
@@ -102,6 +106,8 @@ invoke(async () => {
     if (props.panOnScroll && keyPress) {
       d3s
         ?.on('wheel', (event: WheelEvent) => {
+          console.log('wheel')
+          if (noWheel(event)) return
           event.preventDefault()
           event.stopImmediatePropagation()
 
@@ -132,7 +138,12 @@ invoke(async () => {
         })
         .on('wheel.zoom', null)
     } else if (typeof d3ZoomHandler !== 'undefined') {
-      d3s?.on('wheel', null).on('wheel.zoom', d3ZoomHandler)
+      d3s
+        ?.on('wheel', (event: WheelEvent) => {
+          if (!props.preventScrolling || noWheel(event)) return
+          event.preventDefault()
+        })
+        .on('wheel.zoom', d3ZoomHandler)
     }
   })
 
@@ -150,7 +161,7 @@ invoke(async () => {
     // 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
+    if (noWheel(event) && event.type === 'wheel') return false
 
     // when the target element is a node, we still allow zooming
     if (
@@ -209,11 +220,7 @@ export default {
   <div ref="zoomPane" class="vue-flow__renderer vue-flow__zoompane">
     <slot
       v-bind="{
-        transform: [
+        transform: store.transform,
-          clamp(transform.x, store.translateExtent[0][0], store.translateExtent[1][0]),
-          clamp(transform.y, store.translateExtent[0][0], store.translateExtent[1][0]),
-          clamp(transform.zoom, store.translateExtent[0][0], store.translateExtent[1][0]),
-        ],
         dimensions: { width, height },
       }"
     />

src/types/flow.ts

@@ -140,6 +140,7 @@ export interface FlowOptions {
   panOnScrollSpeed?: number
   panOnScrollMode?: PanOnScrollMode
   zoomOnDoubleClick?: boolean
+  preventScrolling?: boolean
   edgeUpdaterRadius?: number
   storageKey?: string
   loading?: Loading

src/utils/store.ts

@@ -54,6 +54,7 @@ export const initialState = (): FlowState => ({
     [Number.NEGATIVE_INFINITY, Number.NEGATIVE_INFINITY],
     [Number.POSITIVE_INFINITY, Number.POSITIVE_INFINITY],
   ],
+  preventScrolling: true,
   zoomOnScroll: true,
   zoomOnPinch: true,
   zoomOnDoubleClick: true,