From 6b4cb9e9372d50939b3b2921255c1fcad1b8aea7 Mon Sep 17 00:00:00 2001
From: Braks <78412429+bcakmakoglu@users.noreply.github.com>
Date: Wed, 17 Nov 2021 00:31:53 +0100
Subject: [PATCH] update(docs): README.md

* minor updates in zoompane and interaction example

Signed-off-by: Braks <78412429+bcakmakoglu@users.noreply.github.com>
---
 README.md                                   | 21 ++++++++++++++++++---
 examples/Interaction/InteractionExample.vue |  2 +-
 src/container/ZoomPane/ZoomPane.vue         |  6 +++---
 3 files changed, 22 insertions(+), 7 deletions(-)

diff --git a/README.md b/README.md
index b2b3c5bd..42591065 100644
--- a/README.md
+++ b/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>
diff --git a/examples/Interaction/InteractionExample.vue b/examples/Interaction/InteractionExample.vue
index ad2cf008..51b8a771 100644
--- a/examples/Interaction/InteractionExample.vue
+++ b/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)
diff --git a/src/container/ZoomPane/ZoomPane.vue b/src/container/ZoomPane/ZoomPane.vue
index d8b1755e..51fe0188 100644
--- a/src/container/ZoomPane/ZoomPane.vue
+++ b/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