update(docs): README.md

* minor updates in zoompane and interaction example

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

README.md

@@ -51,18 +51,33 @@ $ yarn add @braks/vue-flow
 
 ```vue
 <template>
-  <Flow :elements="elements"></Flow>
+  <VueFlow :elements="elements"></VueFlow>
 </template>
 <script lang="ts" setup>
-import { Flow, Elements } from '@braks/vue-flow'
+import { VueFlow, Elements, Position } from '@braks/vue-flow'
 
 const elements = ref<Elements>([
   {
     id: '1',
     data: {
-      label: 'This is a <strong>default node</strong>',
+      label: 'node 1',
     },
     position: { x: 100, y: 100 },
+    targetPosition: Position.Right
+  },
+  {
+    id: '2',
+    data: {
+      label: 'node 2',
+    },
+    position: { x: 100, y: 200 },
+    sourcePosition: Position.Left
+  },
+  {
+    id: 'e1-2',
+    label: 'default edge',
+    target: '2',
+    source: '1',
   },
 ])
 </script>

examples/Interaction/InteractionExample.vue

@@ -36,7 +36,7 @@ const onConnect = (params: Connection | Edge) => (elements.value = addEdge(param
 const isSelectable = ref(false)
 const isDraggable = ref(false)
 const isConnectable = ref(false)
-const zoomOnScroll = ref(false)
+const zoomOnScroll = ref(true)
 const zoomOnPinch = ref(false)
 const panOnScroll = ref(false)
 const panOnScrollMode = ref<PanOnScrollMode>(PanOnScrollMode.Free)

src/container/ZoomPane/ZoomPane.vue

@@ -143,11 +143,11 @@ until(zoomPaneEl)
 
     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
+      if (!props.paneMoveable && !props.zoomOnScroll && !props.panOnScroll && !props.zoomOnDoubleClick && !props.zoomOnPinch)
+        return false
 
       // during a selection we prevent all other interactions
       if (keyPress.value) return false
@@ -170,7 +170,7 @@ until(zoomPaneEl)
       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 (!props.zoomOnScroll && !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