From b1cf6bdf6e99d909647206124549f1e98ec65742 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Robin=20Fa=CC=88=C3=9Fler?= <robin@webcontact.de>
Date: Fri, 15 Nov 2024 14:40:14 +0100
Subject: [PATCH 1/3] refactor: renaming enableWheelOnKey property for better
 understanding

---
 docs/src/.vuepress/components/HtmlDemo.vue    |  17 ++
 .../.vuepress/components/ReactivityDemo.vue   | 270 +++++++++++-------
 docs/src/.vuepress/components/SvgDemo.vue     |  21 ++
 src/components/ScrollOverlay.vue              |  68 ++---
 src/components/VueZoomable.vue                |  75 +++--
 src/composables/useWheel.ts                   |  49 ++--
 src/examples/ReactivityDemo.vue               | 270 +++++++++++-------
 7 files changed, 486 insertions(+), 284 deletions(-)

diff --git a/docs/src/.vuepress/components/HtmlDemo.vue b/docs/src/.vuepress/components/HtmlDemo.vue
index 4a852ca..9cb6590 100644
--- a/docs/src/.vuepress/components/HtmlDemo.vue
+++ b/docs/src/.vuepress/components/HtmlDemo.vue
@@ -46,6 +46,23 @@
     :touchEnabled="touchEnabled" :minZoom="0.3" :maxZoom="2" :dblClickZoomStep="0.4" :wheelZoomStep="0.01"
     :enableControllButton="enableControllButton" :enableWheelOnKey="documentFlow ? 'Control' : undefined"
     @zoom="showEvent" @panned="showEvent">
+  <VueZoomable
+    style="width: 500px; height: 500px; border: 1px solid black"
+    :zoomEnabled="zoomEnabled"
+    :panEnabled="panEnabled"
+    selector="#boxes"
+    :dblClickEnabled="dbClickEnabled"
+    :wheelEnabled="mouseWheelZoomEnabled"
+    :touchEnabled="touchEnabled"
+    :minZoom="0.3"
+    :maxZoom="2"
+    :dblClickZoomStep="0.4"
+    :wheelZoomStep="0.01"
+    :enableControllButton="enableControllButton"
+    :wheelKey="documentFlow ? 'Control' : undefined"
+    @zoom="showEvent"
+    @panned="showEvent"
+  >
     <div id="boxes">
       <div>
         <div></div>
diff --git a/docs/src/.vuepress/components/ReactivityDemo.vue b/docs/src/.vuepress/components/ReactivityDemo.vue
index 9cc0b7c..a2c2a42 100644
--- a/docs/src/.vuepress/components/ReactivityDemo.vue
+++ b/docs/src/.vuepress/components/ReactivityDemo.vue
@@ -1,33 +1,40 @@
-
 <template>
   <section v-if="documentFlow">
     <h1>Chapter 1</h1>
     <p>
-      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce non ultrices mi, nec cursus justo. Ut efficitur, dui
-      nec consectetur consequat, lorem elit tincidunt metus, vel ultrices elit velit ac lectus. Proin in eros non nisi
-      venenatis bibendum. Integer nec neque sit amet velit varius tempus. Integer viverra ligula nec nunc egestas, non
-      ullamcorper mauris venenatis. Nullam sit amet pharetra odio, eget ultrices enim. Aenean non nisl auctor, vulputate
-      quam sit amet, tincidunt lectus. Duis vitae elit sed justo tincidunt sodales id ac est. Vivamus eu orci dapibus,
-      hendrerit nulla in, vehicula libero.
+      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce non
+      ultrices mi, nec cursus justo. Ut efficitur, dui nec consectetur
+      consequat, lorem elit tincidunt metus, vel ultrices elit velit ac lectus.
+      Proin in eros non nisi venenatis bibendum. Integer nec neque sit amet
+      velit varius tempus. Integer viverra ligula nec nunc egestas, non
+      ullamcorper mauris venenatis. Nullam sit amet pharetra odio, eget ultrices
+      enim. Aenean non nisl auctor, vulputate quam sit amet, tincidunt lectus.
+      Duis vitae elit sed justo tincidunt sodales id ac est. Vivamus eu orci
+      dapibus, hendrerit nulla in, vehicula libero.
     </p>
     <p>
-      Sed pulvinar bibendum metus, quis lacinia urna varius non. Duis eget velit quam. Vestibulum consectetur vehicula
-      facilisis. Nunc egestas et enim ut facilisis. In volutpat augue eget risus faucibus malesuada. Ut et quam elit.
-      Fusce quis tincidunt elit. Nullam gravida justo ut feugiat mollis.
+      Sed pulvinar bibendum metus, quis lacinia urna varius non. Duis eget velit
+      quam. Vestibulum consectetur vehicula facilisis. Nunc egestas et enim ut
+      facilisis. In volutpat augue eget risus faucibus malesuada. Ut et quam
+      elit. Fusce quis tincidunt elit. Nullam gravida justo ut feugiat mollis.
     </p>
     <h2>Section 1.1</h2>
     <p>
-      Vivamus maximus scelerisque ligula, vel fringilla odio consectetur nec. Duis eleifend, erat quis maximus ultrices,
-      elit arcu congue nibh, nec elementum eros purus nec nulla. Fusce aliquet lacus id ligula rhoncus, in sodales lectus
-      fringilla. Maecenas et purus et erat pulvinar interdum vel sit amet quam. Vestibulum facilisis turpis nec metus
-      congue posuere.
+      Vivamus maximus scelerisque ligula, vel fringilla odio consectetur nec.
+      Duis eleifend, erat quis maximus ultrices, elit arcu congue nibh, nec
+      elementum eros purus nec nulla. Fusce aliquet lacus id ligula rhoncus, in
+      sodales lectus fringilla. Maecenas et purus et erat pulvinar interdum vel
+      sit amet quam. Vestibulum facilisis turpis nec metus congue posuere.
     </p>
     <h2>Section 1.2</h2>
     <p>
-      Nulla vehicula lectus felis, in feugiat massa dignissim id. Vivamus eget magna ac eros viverra mattis ac sit amet
-      nulla. Pellentesque venenatis risus ut ex suscipit, in auctor nulla consequat. Proin rhoncus semper risus, a dapibus
-      turpis luctus a. Nullam nec tincidunt sapien. Vivamus gravida ultricies lacus, in eleifend nunc cursus ut. In hac
-      habitasse platea dictumst. Duis ut purus nec sapien convallis pellentesque vel eu erat.
+      Nulla vehicula lectus felis, in feugiat massa dignissim id. Vivamus eget
+      magna ac eros viverra mattis ac sit amet nulla. Pellentesque venenatis
+      risus ut ex suscipit, in auctor nulla consequat. Proin rhoncus semper
+      risus, a dapibus turpis luctus a. Nullam nec tincidunt sapien. Vivamus
+      gravida ultricies lacus, in eleifend nunc cursus ut. In hac habitasse
+      platea dictumst. Duis ut purus nec sapien convallis pellentesque vel eu
+      erat.
     </p>
   </section>
 
@@ -66,15 +73,15 @@
     </div>
     <div>
       <label>Pan X</label>
-      <input type="number" v-model="pan.x">
+      <input type="number" v-model="pan.x" />
     </div>
     <div>
       <label>Pan Y</label>
-      <input type="number" v-model="pan.y">
+      <input type="number" v-model="pan.y" />
     </div>
     <div>
       <label>Zoom</label>
-      <input type="number" v-model="zoom">
+      <input type="number" v-model="zoom" />
     </div>
     <div>
       <label>Slot Content Type</label>
@@ -85,17 +92,34 @@
     </div>
     <div>
       <label>Selector</label>
-      <input type="text" v-model="selector">
+      <input type="text" v-model="selector" />
     </div>
   </form>
 
   <div v-if="slotContentType === 'svg'">
-    <VueZoomable style="width: 500px; height: 500px; border: 1px solid black" :selector="selector"
-      :zoomEnabled="zoomEnabled" :panEnabled="panEnabled" :initialPanX="100" :initialPanY="120" :initialZoom="1.5"
-      :svgChild="true" :dblClickEnabled="dblClickEnabled" :wheelEnabled="mouseWheelZoomEnabled"
-      :touchEnabled="touchEnabled" :minZoom="0.3" :maxZoom="2" :dblClickZoomStep="0.4" :wheelZoomStep="0.01"
-      v-model:pan="pan" v-model:zoom="zoom" :enableWheelOnKey="documentFlow ? 'Control' : undefined"
-      :enableControllButton="enableControllButton" @zoom="showEvent" @panned="showEvent">
+    <VueZoomable
+      style="width: 500px; height: 500px; border: 1px solid black"
+      :selector="selector"
+      :zoomEnabled="zoomEnabled"
+      :panEnabled="panEnabled"
+      :initialPanX="100"
+      :initialPanY="120"
+      :initialZoom="1.5"
+      :svgChild="true"
+      :dblClickEnabled="dblClickEnabled"
+      :wheelEnabled="mouseWheelZoomEnabled"
+      :touchEnabled="touchEnabled"
+      :minZoom="0.3"
+      :maxZoom="2"
+      :dblClickZoomStep="0.4"
+      :wheelZoomStep="0.01"
+      v-model:pan="pan"
+      v-model:zoom="zoom"
+      :wheelKey="documentFlow ? 'Control' : undefined"
+      :enableControllButton="enableControllButton"
+      @zoom="showEvent"
+      @panned="showEvent"
+    >
       <svg class="mysvg" v-if="visible">
         <g id="zoomable-content">
           <circle x="10" y="10" r="50" />
@@ -104,12 +128,28 @@
     </VueZoomable>
   </div>
   <div v-else>
-    <VueZoomable style="width: 500px; height: 500px; border: 1px solid black" :selector="selector"
-      :zoomEnabled="zoomEnabled" :panEnabled="panEnabled" :initialPanX="100" :initialPanY="120" :initialZoom="1.5"
-      :dblClickEnabled="dblClickEnabled" :wheelEnabled="mouseWheelZoomEnabled" :touchEnabled="touchEnabled" :minZoom="0.3"
-      :maxZoom="2" :dblClickZoomStep="0.4" :wheelZoomStep="0.01" v-model:pan="pan" v-model:zoom="zoom"
-      :enableWheelOnKey="documentFlow ? 'Control' : undefined" :enableControllButton="enableControllButton"
-      @zoom="showEvent" @panned="showEvent">
+    <VueZoomable
+      style="width: 500px; height: 500px; border: 1px solid black"
+      :selector="selector"
+      :zoomEnabled="zoomEnabled"
+      :panEnabled="panEnabled"
+      :initialPanX="100"
+      :initialPanY="120"
+      :initialZoom="1.5"
+      :dblClickEnabled="dblClickEnabled"
+      :wheelEnabled="mouseWheelZoomEnabled"
+      :touchEnabled="touchEnabled"
+      :minZoom="0.3"
+      :maxZoom="2"
+      :dblClickZoomStep="0.4"
+      :wheelZoomStep="0.01"
+      v-model:pan="pan"
+      v-model:zoom="zoom"
+      :wheelKey="documentFlow ? 'Control' : undefined"
+      :enableControllButton="enableControllButton"
+      @zoom="showEvent"
+      @panned="showEvent"
+    >
       <div id="zoomable-content">
         <div>
           <div></div>
@@ -123,116 +163,142 @@
     </VueZoomable>
   </div>
 
-  <div>
-    zoom: {{ zoom }}
-  </div>
-  <div>
-    pan: {{ pan }}
-  </div>
+  <div>zoom: {{ zoom }}</div>
+  <div>pan: {{ pan }}</div>
 
   <section v-if="documentFlow">
     <h1>Chapter 1</h1>
     <p>
-      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce non ultrices mi, nec cursus justo. Ut efficitur, dui
-      nec consectetur consequat, lorem elit tincidunt metus, vel ultrices elit velit ac lectus. Proin in eros non nisi
-      venenatis bibendum. Integer nec neque sit amet velit varius tempus. Integer viverra ligula nec nunc egestas, non
-      ullamcorper mauris venenatis. Nullam sit amet pharetra odio, eget ultrices enim. Aenean non nisl auctor, vulputate
-      quam sit amet, tincidunt lectus. Duis vitae elit sed justo tincidunt sodales id ac est. Vivamus eu orci dapibus,
-      hendrerit nulla in, vehicula libero.
+      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce non
+      ultrices mi, nec cursus justo. Ut efficitur, dui nec consectetur
+      consequat, lorem elit tincidunt metus, vel ultrices elit velit ac lectus.
+      Proin in eros non nisi venenatis bibendum. Integer nec neque sit amet
+      velit varius tempus. Integer viverra ligula nec nunc egestas, non
+      ullamcorper mauris venenatis. Nullam sit amet pharetra odio, eget ultrices
+      enim. Aenean non nisl auctor, vulputate quam sit amet, tincidunt lectus.
+      Duis vitae elit sed justo tincidunt sodales id ac est. Vivamus eu orci
+      dapibus, hendrerit nulla in, vehicula libero.
     </p>
     <p>
-      Sed pulvinar bibendum metus, quis lacinia urna varius non. Duis eget velit quam. Vestibulum consectetur vehicula
-      facilisis. Nunc egestas et enim ut facilisis. In volutpat augue eget risus faucibus malesuada. Ut et quam elit.
-      Fusce quis tincidunt elit. Nullam gravida justo ut feugiat mollis.
+      Sed pulvinar bibendum metus, quis lacinia urna varius non. Duis eget velit
+      quam. Vestibulum consectetur vehicula facilisis. Nunc egestas et enim ut
+      facilisis. In volutpat augue eget risus faucibus malesuada. Ut et quam
+      elit. Fusce quis tincidunt elit. Nullam gravida justo ut feugiat mollis.
     </p>
     <h2>Section 1.1</h2>
     <p>
-      Vivamus maximus scelerisque ligula, vel fringilla odio consectetur nec. Duis eleifend, erat quis maximus ultrices,
-      elit arcu congue nibh, nec elementum eros purus nec nulla. Fusce aliquet lacus id ligula rhoncus, in sodales lectus
-      fringilla. Maecenas et purus et erat pulvinar interdum vel sit amet quam. Vestibulum facilisis turpis nec metus
-      congue posuere.
+      Vivamus maximus scelerisque ligula, vel fringilla odio consectetur nec.
+      Duis eleifend, erat quis maximus ultrices, elit arcu congue nibh, nec
+      elementum eros purus nec nulla. Fusce aliquet lacus id ligula rhoncus, in
+      sodales lectus fringilla. Maecenas et purus et erat pulvinar interdum vel
+      sit amet quam. Vestibulum facilisis turpis nec metus congue posuere.
     </p>
     <h2>Section 1.2</h2>
     <p>
-      Nulla vehicula lectus felis, in feugiat massa dignissim id. Vivamus eget magna ac eros viverra mattis ac sit amet
-      nulla. Pellentesque venenatis risus ut ex suscipit, in auctor nulla consequat. Proin rhoncus semper risus, a dapibus
-      turpis luctus a. Nullam nec tincidunt sapien. Vivamus gravida ultricies lacus, in eleifend nunc cursus ut. In hac
-      habitasse platea dictumst. Duis ut purus nec sapien convallis pellentesque vel eu erat.
+      Nulla vehicula lectus felis, in feugiat massa dignissim id. Vivamus eget
+      magna ac eros viverra mattis ac sit amet nulla. Pellentesque venenatis
+      risus ut ex suscipit, in auctor nulla consequat. Proin rhoncus semper
+      risus, a dapibus turpis luctus a. Nullam nec tincidunt sapien. Vivamus
+      gravida ultricies lacus, in eleifend nunc cursus ut. In hac habitasse
+      platea dictumst. Duis ut purus nec sapien convallis pellentesque vel eu
+      erat.
     </p>
     <!-- Continue with more paragraphs, sections, and chapters as needed to fill a couple of pages -->
 
     <h1>Chapter 2</h1>
     <p>
-      Phasellus blandit velit at eros efficitur, in mollis dui feugiat. Fusce euismod mauris nec varius volutpat. Quisque
-      dapibus augue et ex ultricies, ac vestibulum dolor facilisis. Sed mattis est sed ipsum feugiat, ut blandit nunc
-      tristique. Aliquam et volutpat nulla, vel ullamcorper purus. Proin condimentum lacus ac congue varius. Maecenas a
-      cursus elit. Nulla facilisi. Integer eu quam eget arcu laoreet vehicula.
+      Phasellus blandit velit at eros efficitur, in mollis dui feugiat. Fusce
+      euismod mauris nec varius volutpat. Quisque dapibus augue et ex ultricies,
+      ac vestibulum dolor facilisis. Sed mattis est sed ipsum feugiat, ut
+      blandit nunc tristique. Aliquam et volutpat nulla, vel ullamcorper purus.
+      Proin condimentum lacus ac congue varius. Maecenas a cursus elit. Nulla
+      facilisi. Integer eu quam eget arcu laoreet vehicula.
     </p>
     <h2>Section 2.1</h2>
     <p>
-      Nunc rhoncus, risus nec euismod porttitor, urna nisi accumsan turpis, vitae euismod turpis arcu eget velit. Nulla a
-      elit vel enim accumsan egestas. Nulla facilisi. Duis nec magna risus. Etiam euismod hendrerit dolor. Integer vel est
-      vitae purus auctor vehicula. Vivamus feugiat felis id tortor hendrerit blandit. Nullam nec tortor eu neque tincidunt
-      mollis. Aenean tincidunt sit amet lacus eu suscipit. Fusce vitae nulla ultrices, convallis odio non, accumsan justo.
+      Nunc rhoncus, risus nec euismod porttitor, urna nisi accumsan turpis,
+      vitae euismod turpis arcu eget velit. Nulla a elit vel enim accumsan
+      egestas. Nulla facilisi. Duis nec magna risus. Etiam euismod hendrerit
+      dolor. Integer vel est vitae purus auctor vehicula. Vivamus feugiat felis
+      id tortor hendrerit blandit. Nullam nec tortor eu neque tincidunt mollis.
+      Aenean tincidunt sit amet lacus eu suscipit. Fusce vitae nulla ultrices,
+      convallis odio non, accumsan justo.
     </p>
     <h2>Section 2.2</h2>
     <p>
-      Aenean in nibh eget velit aliquet iaculis. Donec et purus ut lectus hendrerit efficitur. Maecenas vulputate justo
-      nec enim ullamcorper luctus. Integer varius nisi eu massa iaculis, vel auctor erat blandit. Nulla facilisi. Praesent
-      eget bibendum lectus. Donec dignissim velit id nisl feugiat, a vestibulum felis consequat. Pellentesque habitant
-      morbi tristique senectus et netus et malesuada fames ac turpis egestas.
+      Aenean in nibh eget velit aliquet iaculis. Donec et purus ut lectus
+      hendrerit efficitur. Maecenas vulputate justo nec enim ullamcorper luctus.
+      Integer varius nisi eu massa iaculis, vel auctor erat blandit. Nulla
+      facilisi. Praesent eget bibendum lectus. Donec dignissim velit id nisl
+      feugiat, a vestibulum felis consequat. Pellentesque habitant morbi
+      tristique senectus et netus et malesuada fames ac turpis egestas.
     </p>
     <!-- Continue with more paragraphs, sections, and chapters as needed to fill a couple of pages -->
     <h1>Chapter 1</h1>
     <p>
-      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce non ultrices mi, nec cursus justo. Ut efficitur, dui
-      nec consectetur consequat, lorem elit tincidunt metus, vel ultrices elit velit ac lectus. Proin in eros non nisi
-      venenatis bibendum. Integer nec neque sit amet velit varius tempus. Integer viverra ligula nec nunc egestas, non
-      ullamcorper mauris venenatis. Nullam sit amet pharetra odio, eget ultrices enim. Aenean non nisl auctor, vulputate
-      quam sit amet, tincidunt lectus. Duis vitae elit sed justo tincidunt sodales id ac est. Vivamus eu orci dapibus,
-      hendrerit nulla in, vehicula libero.
+      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce non
+      ultrices mi, nec cursus justo. Ut efficitur, dui nec consectetur
+      consequat, lorem elit tincidunt metus, vel ultrices elit velit ac lectus.
+      Proin in eros non nisi venenatis bibendum. Integer nec neque sit amet
+      velit varius tempus. Integer viverra ligula nec nunc egestas, non
+      ullamcorper mauris venenatis. Nullam sit amet pharetra odio, eget ultrices
+      enim. Aenean non nisl auctor, vulputate quam sit amet, tincidunt lectus.
+      Duis vitae elit sed justo tincidunt sodales id ac est. Vivamus eu orci
+      dapibus, hendrerit nulla in, vehicula libero.
     </p>
     <p>
-      Sed pulvinar bibendum metus, quis lacinia urna varius non. Duis eget velit quam. Vestibulum consectetur vehicula
-      facilisis. Nunc egestas et enim ut facilisis. In volutpat augue eget risus faucibus malesuada. Ut et quam elit.
-      Fusce quis tincidunt elit. Nullam gravida justo ut feugiat mollis.
+      Sed pulvinar bibendum metus, quis lacinia urna varius non. Duis eget velit
+      quam. Vestibulum consectetur vehicula facilisis. Nunc egestas et enim ut
+      facilisis. In volutpat augue eget risus faucibus malesuada. Ut et quam
+      elit. Fusce quis tincidunt elit. Nullam gravida justo ut feugiat mollis.
     </p>
     <h2>Section 1.1</h2>
     <p>
-      Vivamus maximus scelerisque ligula, vel fringilla odio consectetur nec. Duis eleifend, erat quis maximus ultrices,
-      elit arcu congue nibh, nec elementum eros purus nec nulla. Fusce aliquet lacus id ligula rhoncus, in sodales lectus
-      fringilla. Maecenas et purus et erat pulvinar interdum vel sit amet quam. Vestibulum facilisis turpis nec metus
-      congue posuere.
+      Vivamus maximus scelerisque ligula, vel fringilla odio consectetur nec.
+      Duis eleifend, erat quis maximus ultrices, elit arcu congue nibh, nec
+      elementum eros purus nec nulla. Fusce aliquet lacus id ligula rhoncus, in
+      sodales lectus fringilla. Maecenas et purus et erat pulvinar interdum vel
+      sit amet quam. Vestibulum facilisis turpis nec metus congue posuere.
     </p>
     <h2>Section 1.2</h2>
     <p>
-      Nulla vehicula lectus felis, in feugiat massa dignissim id. Vivamus eget magna ac eros viverra mattis ac sit amet
-      nulla. Pellentesque venenatis risus ut ex suscipit, in auctor nulla consequat. Proin rhoncus semper risus, a dapibus
-      turpis luctus a. Nullam nec tincidunt sapien. Vivamus gravida ultricies lacus, in eleifend nunc cursus ut. In hac
-      habitasse platea dictumst. Duis ut purus nec sapien convallis pellentesque vel eu erat.
+      Nulla vehicula lectus felis, in feugiat massa dignissim id. Vivamus eget
+      magna ac eros viverra mattis ac sit amet nulla. Pellentesque venenatis
+      risus ut ex suscipit, in auctor nulla consequat. Proin rhoncus semper
+      risus, a dapibus turpis luctus a. Nullam nec tincidunt sapien. Vivamus
+      gravida ultricies lacus, in eleifend nunc cursus ut. In hac habitasse
+      platea dictumst. Duis ut purus nec sapien convallis pellentesque vel eu
+      erat.
     </p>
     <!-- Continue with more paragraphs, sections, and chapters as needed to fill a couple of pages -->
 
     <h1>Chapter 2</h1>
     <p>
-      Phasellus blandit velit at eros efficitur, in mollis dui feugiat. Fusce euismod mauris nec varius volutpat. Quisque
-      dapibus augue et ex ultricies, ac vestibulum dolor facilisis. Sed mattis est sed ipsum feugiat, ut blandit nunc
-      tristique. Aliquam et volutpat nulla, vel ullamcorper purus. Proin condimentum lacus ac congue varius. Maecenas a
-      cursus elit. Nulla facilisi. Integer eu quam eget arcu laoreet vehicula.
+      Phasellus blandit velit at eros efficitur, in mollis dui feugiat. Fusce
+      euismod mauris nec varius volutpat. Quisque dapibus augue et ex ultricies,
+      ac vestibulum dolor facilisis. Sed mattis est sed ipsum feugiat, ut
+      blandit nunc tristique. Aliquam et volutpat nulla, vel ullamcorper purus.
+      Proin condimentum lacus ac congue varius. Maecenas a cursus elit. Nulla
+      facilisi. Integer eu quam eget arcu laoreet vehicula.
     </p>
     <h2>Section 2.1</h2>
     <p>
-      Nunc rhoncus, risus nec euismod porttitor, urna nisi accumsan turpis, vitae euismod turpis arcu eget velit. Nulla a
-      elit vel enim accumsan egestas. Nulla facilisi. Duis nec magna risus. Etiam euismod hendrerit dolor. Integer vel est
-      vitae purus auctor vehicula. Vivamus feugiat felis id tortor hendrerit blandit. Nullam nec tortor eu neque tincidunt
-      mollis. Aenean tincidunt sit amet lacus eu suscipit. Fusce vitae nulla ultrices, convallis odio non, accumsan justo.
+      Nunc rhoncus, risus nec euismod porttitor, urna nisi accumsan turpis,
+      vitae euismod turpis arcu eget velit. Nulla a elit vel enim accumsan
+      egestas. Nulla facilisi. Duis nec magna risus. Etiam euismod hendrerit
+      dolor. Integer vel est vitae purus auctor vehicula. Vivamus feugiat felis
+      id tortor hendrerit blandit. Nullam nec tortor eu neque tincidunt mollis.
+      Aenean tincidunt sit amet lacus eu suscipit. Fusce vitae nulla ultrices,
+      convallis odio non, accumsan justo.
     </p>
     <h2>Section 2.2</h2>
     <p>
-      Aenean in nibh eget velit aliquet iaculis. Donec et purus ut lectus hendrerit efficitur. Maecenas vulputate justo
-      nec enim ullamcorper luctus. Integer varius nisi eu massa iaculis, vel auctor erat blandit. Nulla facilisi. Praesent
-      eget bibendum lectus. Donec dignissim velit id nisl feugiat, a vestibulum felis consequat. Pellentesque habitant
-      morbi tristique senectus et netus et malesuada fames ac turpis egestas.
+      Aenean in nibh eget velit aliquet iaculis. Donec et purus ut lectus
+      hendrerit efficitur. Maecenas vulputate justo nec enim ullamcorper luctus.
+      Integer varius nisi eu massa iaculis, vel auctor erat blandit. Nulla
+      facilisi. Praesent eget bibendum lectus. Donec dignissim velit id nisl
+      feugiat, a vestibulum felis consequat. Pellentesque habitant morbi
+      tristique senectus et netus et malesuada fames ac turpis egestas.
     </p>
     <!-- Continue with more paragraphs, sections, and chapters as needed to fill a couple of pages -->
   </section>
@@ -249,7 +315,7 @@ const slotContentType = ref("html");
 const selector = ref("#zoomable-content");
 
 function showEvent(ev: any) {
-  console.log(ev)
+  console.log(ev);
   // zoom.value = ev.zoom;
   // pan.value = {
   //   x: ev.pan.x,
@@ -263,7 +329,7 @@ let dblClickEnabled = ref(true);
 let touchEnabled = ref(true);
 let mouseWheelZoomEnabled = ref(true);
 let visible = ref(true);
-let documentFlow = ref(true)
+let documentFlow = ref(true);
 let enableControllButton = ref(true);
 </script>
 
@@ -278,12 +344,12 @@ let enableControllButton = ref(true);
   flex-direction: column;
 }
 
-#zoomable-content>div {
+#zoomable-content > div {
   display: flex;
   flex-direction: row;
 }
 
-#zoomable-content>div>div {
+#zoomable-content > div > div {
   margin: 50px;
   background-color: blue;
   height: 100px;
diff --git a/docs/src/.vuepress/components/SvgDemo.vue b/docs/src/.vuepress/components/SvgDemo.vue
index da61800..ab2df72 100644
--- a/docs/src/.vuepress/components/SvgDemo.vue
+++ b/docs/src/.vuepress/components/SvgDemo.vue
@@ -49,6 +49,27 @@
     :minZoom="0.3" :maxZoom="2" :dblClickZoomStep="0.4" :wheelZoomStep="0.01"
     :enableWheelOnKey="documentFlow ? 'Control' : undefined" :enableControllButton="enableControllButton"
     @zoom="showEvent" @panned="showEvent">
+  <VueZoomable
+    style="width: 500px; height: 500px; border: 1px solid black"
+    selector="#container1"
+    :zoomEnabled="zoomEnabled"
+    :panEnabled="panEnabled"
+    :initialPanX="100"
+    :initialPanY="120"
+    :initialZoom="1.5"
+    :svgChild="true"
+    :dblClickEnabled="dbClickEnabled"
+    :wheelEnabled="mouseWheelZoomEnabled"
+    :touchEnabled="touchEnabled"
+    :minZoom="0.3"
+    :maxZoom="2"
+    :dblClickZoomStep="0.4"
+    :wheelZoomStep="0.01"
+    :wheelKey="documentFlow ? 'Control' : undefined"
+    :enableControllButton="enableControllButton"
+    @zoom="showEvent"
+    @panned="showEvent"
+  >
     <svg class="mysvg" v-if="visible">
       <g id="container1">
         <circle x="10" y="10" r="50" />
diff --git a/src/components/ScrollOverlay.vue b/src/components/ScrollOverlay.vue
index e886258..9034aef 100644
--- a/src/components/ScrollOverlay.vue
+++ b/src/components/ScrollOverlay.vue
@@ -1,4 +1,4 @@
-<!-- 
+<!--
     This is heavily inspired by:
     https://developers.google.com/maps/documentation/javascript/examples/control-default
 
@@ -6,23 +6,27 @@
 -->
 
 <template>
-    <div class="overlay" :class="{ hidden: hideOverlay }">
-        <p>Use '{{ props.enableWheelOnKey }}' + 'scroll' to zoom</p>
-    </div>
+  <div class="overlay" :class="{ hidden: hideOverlay }">
+    <p>Use '{{ props.enableWheelOnKey }}' + 'scroll' to zoom</p>
+  </div>
 </template>
 
 <script setup lang="ts">
 import { inject, ref, Ref } from 'vue';
 
 const props = defineProps({
-    enableWheelOnKey: {
-        type: String,
-        default: undefined,
-    }
+  enableWheelOnKey: {
+      type: String,
+      default: undefined,
+  }
 })
+wheelKey: {
+  type: String,
+  default: undefined,
+});
 
 interface Injection {
-    hideOverlay: Ref<boolean>
+  hideOverlay: Ref<boolean>
 }
 
 const { hideOverlay } = inject<Injection>('hideOverlay') as Injection;
@@ -30,38 +34,38 @@ const { hideOverlay } = inject<Injection>('hideOverlay') as Injection;
 
 <style scoped>
 .overlay {
-    position: absolute;
+  position: absolute;
 
-    top: 0;
-    right: 0;
-    bottom: 0;
-    left: 0;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  left: 0;
 
-    background: rgba(0, 0, 0, 0.45);
-    pointer-events: none;
+  background: rgba(0, 0, 0, 0.45);
+  pointer-events: none;
 
-    opacity: 1;
-    transition-duration: .3s;
+  opacity: 1;
+  transition-duration: 0.3s;
 }
 
 .overlay.hidden {
-    transition-duration: .8s;
-    opacity: 0;
+  transition-duration: 0.8s;
+  opacity: 0;
 }
 
 .overlay p {
-    color: white;
-    font-family: sans-serif;
-    font-size: 22px;
+  color: white;
+  font-family: sans-serif;
+  font-size: 22px;
 
-    position: relative;
-    margin: 0;
-    top: 50%;
-    -o-transform: translateY(-50%);
-    transform: translateY(-50%);
-    -webkit-transform: translateY(-50%);
-    -ms-transform: translateY(-50%);
+  position: relative;
+  margin: 0;
+  top: 50%;
+  -o-transform: translateY(-50%);
+  transform: translateY(-50%);
+  -webkit-transform: translateY(-50%);
+  -ms-transform: translateY(-50%);
 
-    text-align: center;
+  text-align: center;
 }
-</style>
\ No newline at end of file
+</style>
diff --git a/src/components/VueZoomable.vue b/src/components/VueZoomable.vue
index f5916dd..4d549c1 100644
--- a/src/components/VueZoomable.vue
+++ b/src/components/VueZoomable.vue
@@ -1,20 +1,34 @@
 <template>
-  <div ref="container" class="container" :class="$style.container" @mousedown="onMouseDown" @dblclick="mouse.onDblClick"
-    @touchstart="touch.onTouchStart" @wheel="wheel.onWheel" @mouseleave="onMouseLeave" @mouseenter="onMouseEnter">
-    <ControllButtons v-if="props.enableControllButton" @button-home="button.onHome" @button-pan="button.onPan"
-      @button-zoom="button.onZoom" @mousedown="updateHideOverlay(true);"></ControllButtons>
+  <div
+    ref="container"
+    class="container"
+    :class="$style.container"
+    @mousedown="onMouseDown"
+    @dblclick="mouse.onDblClick"
+    @touchstart="touch.onTouchStart"
+    @wheel="wheel.onWheel"
+    @mouseleave="onMouseLeave"
+    @mouseenter="onMouseEnter"
+  >
+    <ControllButtons
+      v-if="props.enableControllButton"
+      @button-home="button.onHome"
+      @button-pan="button.onPan"
+      @button-zoom="button.onZoom"
+      @mousedown="updateHideOverlay(true)"
+    ></ControllButtons>
     <slot></slot>
   </div>
 </template>
 
 <script setup lang="ts">
-import { computed, ref, Ref, createApp, onMounted, watch } from 'vue';
+import { computed, ref, Ref, createApp, onMounted, watch } from "vue";
 import { useMouse } from "../composables/useMouse";
 import { useTouch } from "../composables/useTouch";
 import { useWheel } from "../composables/useWheel";
 import { useButtons } from "../composables/useButtons";
 import ControllButtons from "./ControllButtons.vue";
-import ScrollOverlay from './ScrollOverlay.vue';
+import ScrollOverlay from "./ScrollOverlay.vue";
 
 const hideOverlay: Ref<boolean> = ref(true);
 
@@ -97,14 +111,16 @@ let props = defineProps({
     type: Number,
     default: 0.1,
   },
-  enableWheelOnKey: {
+  wheelKey: {
     type: String,
     default: undefined,
-  }
+  },
 });
 
 let container = ref();
-let transformTarget = computed<HTMLElement>(() => container.value?.querySelector(props.selector))
+let transformTarget = computed<HTMLElement>(() =>
+  container.value?.querySelector(props.selector)
+);
 
 let zoom = ref(props.minZoom);
 if (props.initialZoom >= props.minZoom && props.initialZoom <= props.maxZoom) {
@@ -133,8 +149,9 @@ watch(
       pan.value.x = props.pan.x;
       pan.value.y = props.pan.y;
     }
-  }
-  , { deep: true });
+  },
+  { deep: true }
+);
 
 function emit(name: string, event: ZoomableEvent) {
   if (name === "zoom") {
@@ -166,37 +183,41 @@ watch(
 );
 
 onMounted(() => {
-  const placeholder = document.createElement('div');
-  const scrollOverlayApp = createApp(ScrollOverlay, { enableWheelOnKey: props.enableWheelOnKey });
+  const placeholder = document.createElement("div");
+  const scrollOverlayApp = createApp(ScrollOverlay, {
+    enableWheelOnKey: props.enableWheelOnKey,
+  });
 
   // needs to be injected before it is mounted
   scrollOverlayApp.provide("hideOverlay", { hideOverlay });
 
-  scrollOverlayApp.mount(placeholder)
+  scrollOverlayApp.mount(placeholder);
   container.value.appendChild(placeholder);
 
   setTransform();
 });
 
-
 const pressedKeys: Ref<Set<String>> = ref(new Set<String>());
 
 onMounted(() => {
   window.addEventListener(
-    'wheel',
-    event => {
-      if (!isInContainer.value || props.enableWheelOnKey !== "Control") return;
+    "wheel",
+    (event) => {
+      if (!isInContainer.value || props.wheelKey !== "Control") return;
       if (event.ctrlKey) event.preventDefault();
-    }, { passive: false },
+    },
+    { passive: false }
   );
 
   // track the keys, which are currently pressed
-  document.addEventListener('keydown', (event) => {
+  document.addEventListener("keydown", (event) => {
     pressedKeys.value.add(event.key);
-    if (event.key === props.enableWheelOnKey) hideOverlay.value = true;
+    if (event.key === props.wheelKey) hideOverlay.value = true;
+  });
+  document.addEventListener("keyup", (event) => {
+    pressedKeys.value.delete(event.key);
   });
-  document.addEventListener('keyup', (event) => { pressedKeys.value.delete(event.key); });
-})
+});
 
 // track if the mouse is in the container
 const isInContainer = ref(false);
@@ -210,8 +231,12 @@ function onMouseLeave() {
   isInContainer.value = false;
 }
 
-function showOverlay() { hideOverlay.value = false; }
-function updateHideOverlay(newHideOverlay: boolean) { hideOverlay.value = newHideOverlay; }
+function showOverlay() {
+  hideOverlay.value = false;
+}
+function updateHideOverlay(newHideOverlay: boolean) {
+  hideOverlay.value = newHideOverlay;
+}
 
 let mouse = useMouse(props, emit, pan, zoom, updateHideOverlay);
 let touch = useTouch(props, emit, pan, zoom, updateHideOverlay);
diff --git a/src/composables/useWheel.ts b/src/composables/useWheel.ts
index a325c68..c7bce14 100644
--- a/src/composables/useWheel.ts
+++ b/src/composables/useWheel.ts
@@ -2,30 +2,33 @@ import { Ref } from "vue";
 import { useMove } from "./move";
 
 export function useWheel(
-    props: any,
-    emit: any,
-    pan: Ref<{ x: number, y: number }>,
-    zoom: Ref<number>,
-    pressedKeys: Ref<Set<String>>,
-    showOverlay: Function) {
+  props: any,
+  emit: any,
+  pan: Ref<{ x: number; y: number }>,
+  zoom: Ref<number>,
+  pressedKeys: Ref<Set<String>>,
+  showOverlay: Function
+) {
+  const { changeZoom } = useMove(props, emit, pan, zoom, showOverlay);
 
-    const { changeZoom } = useMove(props, emit, pan, zoom, showOverlay);
-
-
-    function onWheel(ev: WheelEvent) {
-        // check if all conditions are met to scroll
-        if (!props.wheelEnabled || !props.zoomEnabled) return;
-        if (props.enableWheelOnKey !== undefined && !pressedKeys.value.has(props.enableWheelOnKey)) {
-            showOverlay();
-            return;
-        }
-
-        // normalizes the value of ev.deltaY to either be 1 or -1 and multiplies it with the double click zoom step?
-        const deltaZoom = props.dblClickZoomStep * ev.deltaY / Math.abs(ev.deltaY);
-        changeZoom(deltaZoom, "wheel");
+  function onWheel(ev: WheelEvent) {
+    // check if all conditions are met to scroll
+    if (!props.wheelEnabled || !props.zoomEnabled) return;
+    if (
+      props.wheelKey !== undefined &&
+      !pressedKeys.value.has(props.wheelKey)
+    ) {
+      showOverlay();
+      return;
     }
 
-    return {
-        onWheel,
-    }
+    // normalizes the value of ev.deltaY to either be 1 or -1 and multiplies it with the double click zoom step?
+    const deltaZoom =
+      (props.dblClickZoomStep * ev.deltaY) / Math.abs(ev.deltaY);
+    changeZoom(deltaZoom, "wheel");
+  }
+
+  return {
+    onWheel,
+  };
 }
diff --git a/src/examples/ReactivityDemo.vue b/src/examples/ReactivityDemo.vue
index 28f2bcd..270275a 100644
--- a/src/examples/ReactivityDemo.vue
+++ b/src/examples/ReactivityDemo.vue
@@ -1,33 +1,40 @@
-
 <template>
   <section v-if="documentFlow">
     <h1>Chapter 1</h1>
     <p>
-      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce non ultrices mi, nec cursus justo. Ut efficitur, dui
-      nec consectetur consequat, lorem elit tincidunt metus, vel ultrices elit velit ac lectus. Proin in eros non nisi
-      venenatis bibendum. Integer nec neque sit amet velit varius tempus. Integer viverra ligula nec nunc egestas, non
-      ullamcorper mauris venenatis. Nullam sit amet pharetra odio, eget ultrices enim. Aenean non nisl auctor, vulputate
-      quam sit amet, tincidunt lectus. Duis vitae elit sed justo tincidunt sodales id ac est. Vivamus eu orci dapibus,
-      hendrerit nulla in, vehicula libero.
+      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce non
+      ultrices mi, nec cursus justo. Ut efficitur, dui nec consectetur
+      consequat, lorem elit tincidunt metus, vel ultrices elit velit ac lectus.
+      Proin in eros non nisi venenatis bibendum. Integer nec neque sit amet
+      velit varius tempus. Integer viverra ligula nec nunc egestas, non
+      ullamcorper mauris venenatis. Nullam sit amet pharetra odio, eget ultrices
+      enim. Aenean non nisl auctor, vulputate quam sit amet, tincidunt lectus.
+      Duis vitae elit sed justo tincidunt sodales id ac est. Vivamus eu orci
+      dapibus, hendrerit nulla in, vehicula libero.
     </p>
     <p>
-      Sed pulvinar bibendum metus, quis lacinia urna varius non. Duis eget velit quam. Vestibulum consectetur vehicula
-      facilisis. Nunc egestas et enim ut facilisis. In volutpat augue eget risus faucibus malesuada. Ut et quam elit.
-      Fusce quis tincidunt elit. Nullam gravida justo ut feugiat mollis.
+      Sed pulvinar bibendum metus, quis lacinia urna varius non. Duis eget velit
+      quam. Vestibulum consectetur vehicula facilisis. Nunc egestas et enim ut
+      facilisis. In volutpat augue eget risus faucibus malesuada. Ut et quam
+      elit. Fusce quis tincidunt elit. Nullam gravida justo ut feugiat mollis.
     </p>
     <h2>Section 1.1</h2>
     <p>
-      Vivamus maximus scelerisque ligula, vel fringilla odio consectetur nec. Duis eleifend, erat quis maximus ultrices,
-      elit arcu congue nibh, nec elementum eros purus nec nulla. Fusce aliquet lacus id ligula rhoncus, in sodales lectus
-      fringilla. Maecenas et purus et erat pulvinar interdum vel sit amet quam. Vestibulum facilisis turpis nec metus
-      congue posuere.
+      Vivamus maximus scelerisque ligula, vel fringilla odio consectetur nec.
+      Duis eleifend, erat quis maximus ultrices, elit arcu congue nibh, nec
+      elementum eros purus nec nulla. Fusce aliquet lacus id ligula rhoncus, in
+      sodales lectus fringilla. Maecenas et purus et erat pulvinar interdum vel
+      sit amet quam. Vestibulum facilisis turpis nec metus congue posuere.
     </p>
     <h2>Section 1.2</h2>
     <p>
-      Nulla vehicula lectus felis, in feugiat massa dignissim id. Vivamus eget magna ac eros viverra mattis ac sit amet
-      nulla. Pellentesque venenatis risus ut ex suscipit, in auctor nulla consequat. Proin rhoncus semper risus, a dapibus
-      turpis luctus a. Nullam nec tincidunt sapien. Vivamus gravida ultricies lacus, in eleifend nunc cursus ut. In hac
-      habitasse platea dictumst. Duis ut purus nec sapien convallis pellentesque vel eu erat.
+      Nulla vehicula lectus felis, in feugiat massa dignissim id. Vivamus eget
+      magna ac eros viverra mattis ac sit amet nulla. Pellentesque venenatis
+      risus ut ex suscipit, in auctor nulla consequat. Proin rhoncus semper
+      risus, a dapibus turpis luctus a. Nullam nec tincidunt sapien. Vivamus
+      gravida ultricies lacus, in eleifend nunc cursus ut. In hac habitasse
+      platea dictumst. Duis ut purus nec sapien convallis pellentesque vel eu
+      erat.
     </p>
   </section>
 
@@ -66,15 +73,15 @@
     </div>
     <div>
       <label>Pan X</label>
-      <input type="number" v-model="pan.x">
+      <input type="number" v-model="pan.x" />
     </div>
     <div>
       <label>Pan Y</label>
-      <input type="number" v-model="pan.y">
+      <input type="number" v-model="pan.y" />
     </div>
     <div>
       <label>Zoom</label>
-      <input type="number" v-model="zoom">
+      <input type="number" v-model="zoom" />
     </div>
     <div>
       <label>Slot Content Type</label>
@@ -85,17 +92,34 @@
     </div>
     <div>
       <label>Selector</label>
-      <input type="text" v-model="selector">
+      <input type="text" v-model="selector" />
     </div>
   </form>
 
   <div v-if="slotContentType === 'svg'">
-    <VueZoomable style="width: 500px; height: 500px; border: 1px solid black" :selector="selector"
-      :zoomEnabled="zoomEnabled" :panEnabled="panEnabled" :initialPanX="100" :initialPanY="120" :initialZoom="1.5"
-      :svgChild="true" :dblClickEnabled="dblClickEnabled" :wheelEnabled="mouseWheelZoomEnabled"
-      :touchEnabled="touchEnabled" :minZoom="0.3" :maxZoom="2" :dblClickZoomStep="0.4" :wheelZoomStep="0.01"
-      v-model:pan="pan" v-model:zoom="zoom" :enableWheelOnKey="documentFlow ? 'Control' : undefined"
-      :enableControllButton="enableControllButton" @zoom="showEvent" @panned="showEvent">
+    <VueZoomable
+      style="width: 500px; height: 500px; border: 1px solid black"
+      :selector="selector"
+      :zoomEnabled="zoomEnabled"
+      :panEnabled="panEnabled"
+      :initialPanX="100"
+      :initialPanY="120"
+      :initialZoom="1.5"
+      :svgChild="true"
+      :dblClickEnabled="dblClickEnabled"
+      :wheelEnabled="mouseWheelZoomEnabled"
+      :touchEnabled="touchEnabled"
+      :minZoom="0.3"
+      :maxZoom="2"
+      :dblClickZoomStep="0.4"
+      :wheelZoomStep="0.01"
+      v-model:pan="pan"
+      v-model:zoom="zoom"
+      :wheelKey="documentFlow ? 'Control' : undefined"
+      :enableControllButton="enableControllButton"
+      @zoom="showEvent"
+      @panned="showEvent"
+    >
       <svg class="mysvg" v-if="visible">
         <g id="zoomable-content">
           <circle x="10" y="10" r="50" />
@@ -104,12 +128,28 @@
     </VueZoomable>
   </div>
   <div v-else>
-    <VueZoomable style="width: 500px; height: 500px; border: 1px solid black" :selector="selector"
-      :zoomEnabled="zoomEnabled" :panEnabled="panEnabled" :initialPanX="100" :initialPanY="120" :initialZoom="1.5"
-      :dblClickEnabled="dblClickEnabled" :wheelEnabled="mouseWheelZoomEnabled" :touchEnabled="touchEnabled" :minZoom="0.3"
-      :maxZoom="2" :dblClickZoomStep="0.4" :wheelZoomStep="0.01" v-model:pan="pan" v-model:zoom="zoom"
-      :enableWheelOnKey="documentFlow ? 'Control' : undefined" :enableControllButton="enableControllButton"
-      @zoom="showEvent" @panned="showEvent">
+    <VueZoomable
+      style="width: 500px; height: 500px; border: 1px solid black"
+      :selector="selector"
+      :zoomEnabled="zoomEnabled"
+      :panEnabled="panEnabled"
+      :initialPanX="100"
+      :initialPanY="120"
+      :initialZoom="1.5"
+      :dblClickEnabled="dblClickEnabled"
+      :wheelEnabled="mouseWheelZoomEnabled"
+      :touchEnabled="touchEnabled"
+      :minZoom="0.3"
+      :maxZoom="2"
+      :dblClickZoomStep="0.4"
+      :wheelZoomStep="0.01"
+      v-model:pan="pan"
+      v-model:zoom="zoom"
+      :wheelKey="documentFlow ? 'Control' : undefined"
+      :enableControllButton="enableControllButton"
+      @zoom="showEvent"
+      @panned="showEvent"
+    >
       <div id="zoomable-content">
         <div>
           <div></div>
@@ -123,116 +163,142 @@
     </VueZoomable>
   </div>
 
-  <div>
-    zoom: {{ zoom }}
-  </div>
-  <div>
-    pan: {{ pan }}
-  </div>
+  <div>zoom: {{ zoom }}</div>
+  <div>pan: {{ pan }}</div>
 
   <section v-if="documentFlow">
     <h1>Chapter 1</h1>
     <p>
-      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce non ultrices mi, nec cursus justo. Ut efficitur, dui
-      nec consectetur consequat, lorem elit tincidunt metus, vel ultrices elit velit ac lectus. Proin in eros non nisi
-      venenatis bibendum. Integer nec neque sit amet velit varius tempus. Integer viverra ligula nec nunc egestas, non
-      ullamcorper mauris venenatis. Nullam sit amet pharetra odio, eget ultrices enim. Aenean non nisl auctor, vulputate
-      quam sit amet, tincidunt lectus. Duis vitae elit sed justo tincidunt sodales id ac est. Vivamus eu orci dapibus,
-      hendrerit nulla in, vehicula libero.
+      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce non
+      ultrices mi, nec cursus justo. Ut efficitur, dui nec consectetur
+      consequat, lorem elit tincidunt metus, vel ultrices elit velit ac lectus.
+      Proin in eros non nisi venenatis bibendum. Integer nec neque sit amet
+      velit varius tempus. Integer viverra ligula nec nunc egestas, non
+      ullamcorper mauris venenatis. Nullam sit amet pharetra odio, eget ultrices
+      enim. Aenean non nisl auctor, vulputate quam sit amet, tincidunt lectus.
+      Duis vitae elit sed justo tincidunt sodales id ac est. Vivamus eu orci
+      dapibus, hendrerit nulla in, vehicula libero.
     </p>
     <p>
-      Sed pulvinar bibendum metus, quis lacinia urna varius non. Duis eget velit quam. Vestibulum consectetur vehicula
-      facilisis. Nunc egestas et enim ut facilisis. In volutpat augue eget risus faucibus malesuada. Ut et quam elit.
-      Fusce quis tincidunt elit. Nullam gravida justo ut feugiat mollis.
+      Sed pulvinar bibendum metus, quis lacinia urna varius non. Duis eget velit
+      quam. Vestibulum consectetur vehicula facilisis. Nunc egestas et enim ut
+      facilisis. In volutpat augue eget risus faucibus malesuada. Ut et quam
+      elit. Fusce quis tincidunt elit. Nullam gravida justo ut feugiat mollis.
     </p>
     <h2>Section 1.1</h2>
     <p>
-      Vivamus maximus scelerisque ligula, vel fringilla odio consectetur nec. Duis eleifend, erat quis maximus ultrices,
-      elit arcu congue nibh, nec elementum eros purus nec nulla. Fusce aliquet lacus id ligula rhoncus, in sodales lectus
-      fringilla. Maecenas et purus et erat pulvinar interdum vel sit amet quam. Vestibulum facilisis turpis nec metus
-      congue posuere.
+      Vivamus maximus scelerisque ligula, vel fringilla odio consectetur nec.
+      Duis eleifend, erat quis maximus ultrices, elit arcu congue nibh, nec
+      elementum eros purus nec nulla. Fusce aliquet lacus id ligula rhoncus, in
+      sodales lectus fringilla. Maecenas et purus et erat pulvinar interdum vel
+      sit amet quam. Vestibulum facilisis turpis nec metus congue posuere.
     </p>
     <h2>Section 1.2</h2>
     <p>
-      Nulla vehicula lectus felis, in feugiat massa dignissim id. Vivamus eget magna ac eros viverra mattis ac sit amet
-      nulla. Pellentesque venenatis risus ut ex suscipit, in auctor nulla consequat. Proin rhoncus semper risus, a dapibus
-      turpis luctus a. Nullam nec tincidunt sapien. Vivamus gravida ultricies lacus, in eleifend nunc cursus ut. In hac
-      habitasse platea dictumst. Duis ut purus nec sapien convallis pellentesque vel eu erat.
+      Nulla vehicula lectus felis, in feugiat massa dignissim id. Vivamus eget
+      magna ac eros viverra mattis ac sit amet nulla. Pellentesque venenatis
+      risus ut ex suscipit, in auctor nulla consequat. Proin rhoncus semper
+      risus, a dapibus turpis luctus a. Nullam nec tincidunt sapien. Vivamus
+      gravida ultricies lacus, in eleifend nunc cursus ut. In hac habitasse
+      platea dictumst. Duis ut purus nec sapien convallis pellentesque vel eu
+      erat.
     </p>
     <!-- Continue with more paragraphs, sections, and chapters as needed to fill a couple of pages -->
 
     <h1>Chapter 2</h1>
     <p>
-      Phasellus blandit velit at eros efficitur, in mollis dui feugiat. Fusce euismod mauris nec varius volutpat. Quisque
-      dapibus augue et ex ultricies, ac vestibulum dolor facilisis. Sed mattis est sed ipsum feugiat, ut blandit nunc
-      tristique. Aliquam et volutpat nulla, vel ullamcorper purus. Proin condimentum lacus ac congue varius. Maecenas a
-      cursus elit. Nulla facilisi. Integer eu quam eget arcu laoreet vehicula.
+      Phasellus blandit velit at eros efficitur, in mollis dui feugiat. Fusce
+      euismod mauris nec varius volutpat. Quisque dapibus augue et ex ultricies,
+      ac vestibulum dolor facilisis. Sed mattis est sed ipsum feugiat, ut
+      blandit nunc tristique. Aliquam et volutpat nulla, vel ullamcorper purus.
+      Proin condimentum lacus ac congue varius. Maecenas a cursus elit. Nulla
+      facilisi. Integer eu quam eget arcu laoreet vehicula.
     </p>
     <h2>Section 2.1</h2>
     <p>
-      Nunc rhoncus, risus nec euismod porttitor, urna nisi accumsan turpis, vitae euismod turpis arcu eget velit. Nulla a
-      elit vel enim accumsan egestas. Nulla facilisi. Duis nec magna risus. Etiam euismod hendrerit dolor. Integer vel est
-      vitae purus auctor vehicula. Vivamus feugiat felis id tortor hendrerit blandit. Nullam nec tortor eu neque tincidunt
-      mollis. Aenean tincidunt sit amet lacus eu suscipit. Fusce vitae nulla ultrices, convallis odio non, accumsan justo.
+      Nunc rhoncus, risus nec euismod porttitor, urna nisi accumsan turpis,
+      vitae euismod turpis arcu eget velit. Nulla a elit vel enim accumsan
+      egestas. Nulla facilisi. Duis nec magna risus. Etiam euismod hendrerit
+      dolor. Integer vel est vitae purus auctor vehicula. Vivamus feugiat felis
+      id tortor hendrerit blandit. Nullam nec tortor eu neque tincidunt mollis.
+      Aenean tincidunt sit amet lacus eu suscipit. Fusce vitae nulla ultrices,
+      convallis odio non, accumsan justo.
     </p>
     <h2>Section 2.2</h2>
     <p>
-      Aenean in nibh eget velit aliquet iaculis. Donec et purus ut lectus hendrerit efficitur. Maecenas vulputate justo
-      nec enim ullamcorper luctus. Integer varius nisi eu massa iaculis, vel auctor erat blandit. Nulla facilisi. Praesent
-      eget bibendum lectus. Donec dignissim velit id nisl feugiat, a vestibulum felis consequat. Pellentesque habitant
-      morbi tristique senectus et netus et malesuada fames ac turpis egestas.
+      Aenean in nibh eget velit aliquet iaculis. Donec et purus ut lectus
+      hendrerit efficitur. Maecenas vulputate justo nec enim ullamcorper luctus.
+      Integer varius nisi eu massa iaculis, vel auctor erat blandit. Nulla
+      facilisi. Praesent eget bibendum lectus. Donec dignissim velit id nisl
+      feugiat, a vestibulum felis consequat. Pellentesque habitant morbi
+      tristique senectus et netus et malesuada fames ac turpis egestas.
     </p>
     <!-- Continue with more paragraphs, sections, and chapters as needed to fill a couple of pages -->
     <h1>Chapter 1</h1>
     <p>
-      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce non ultrices mi, nec cursus justo. Ut efficitur, dui
-      nec consectetur consequat, lorem elit tincidunt metus, vel ultrices elit velit ac lectus. Proin in eros non nisi
-      venenatis bibendum. Integer nec neque sit amet velit varius tempus. Integer viverra ligula nec nunc egestas, non
-      ullamcorper mauris venenatis. Nullam sit amet pharetra odio, eget ultrices enim. Aenean non nisl auctor, vulputate
-      quam sit amet, tincidunt lectus. Duis vitae elit sed justo tincidunt sodales id ac est. Vivamus eu orci dapibus,
-      hendrerit nulla in, vehicula libero.
+      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce non
+      ultrices mi, nec cursus justo. Ut efficitur, dui nec consectetur
+      consequat, lorem elit tincidunt metus, vel ultrices elit velit ac lectus.
+      Proin in eros non nisi venenatis bibendum. Integer nec neque sit amet
+      velit varius tempus. Integer viverra ligula nec nunc egestas, non
+      ullamcorper mauris venenatis. Nullam sit amet pharetra odio, eget ultrices
+      enim. Aenean non nisl auctor, vulputate quam sit amet, tincidunt lectus.
+      Duis vitae elit sed justo tincidunt sodales id ac est. Vivamus eu orci
+      dapibus, hendrerit nulla in, vehicula libero.
     </p>
     <p>
-      Sed pulvinar bibendum metus, quis lacinia urna varius non. Duis eget velit quam. Vestibulum consectetur vehicula
-      facilisis. Nunc egestas et enim ut facilisis. In volutpat augue eget risus faucibus malesuada. Ut et quam elit.
-      Fusce quis tincidunt elit. Nullam gravida justo ut feugiat mollis.
+      Sed pulvinar bibendum metus, quis lacinia urna varius non. Duis eget velit
+      quam. Vestibulum consectetur vehicula facilisis. Nunc egestas et enim ut
+      facilisis. In volutpat augue eget risus faucibus malesuada. Ut et quam
+      elit. Fusce quis tincidunt elit. Nullam gravida justo ut feugiat mollis.
     </p>
     <h2>Section 1.1</h2>
     <p>
-      Vivamus maximus scelerisque ligula, vel fringilla odio consectetur nec. Duis eleifend, erat quis maximus ultrices,
-      elit arcu congue nibh, nec elementum eros purus nec nulla. Fusce aliquet lacus id ligula rhoncus, in sodales lectus
-      fringilla. Maecenas et purus et erat pulvinar interdum vel sit amet quam. Vestibulum facilisis turpis nec metus
-      congue posuere.
+      Vivamus maximus scelerisque ligula, vel fringilla odio consectetur nec.
+      Duis eleifend, erat quis maximus ultrices, elit arcu congue nibh, nec
+      elementum eros purus nec nulla. Fusce aliquet lacus id ligula rhoncus, in
+      sodales lectus fringilla. Maecenas et purus et erat pulvinar interdum vel
+      sit amet quam. Vestibulum facilisis turpis nec metus congue posuere.
     </p>
     <h2>Section 1.2</h2>
     <p>
-      Nulla vehicula lectus felis, in feugiat massa dignissim id. Vivamus eget magna ac eros viverra mattis ac sit amet
-      nulla. Pellentesque venenatis risus ut ex suscipit, in auctor nulla consequat. Proin rhoncus semper risus, a dapibus
-      turpis luctus a. Nullam nec tincidunt sapien. Vivamus gravida ultricies lacus, in eleifend nunc cursus ut. In hac
-      habitasse platea dictumst. Duis ut purus nec sapien convallis pellentesque vel eu erat.
+      Nulla vehicula lectus felis, in feugiat massa dignissim id. Vivamus eget
+      magna ac eros viverra mattis ac sit amet nulla. Pellentesque venenatis
+      risus ut ex suscipit, in auctor nulla consequat. Proin rhoncus semper
+      risus, a dapibus turpis luctus a. Nullam nec tincidunt sapien. Vivamus
+      gravida ultricies lacus, in eleifend nunc cursus ut. In hac habitasse
+      platea dictumst. Duis ut purus nec sapien convallis pellentesque vel eu
+      erat.
     </p>
     <!-- Continue with more paragraphs, sections, and chapters as needed to fill a couple of pages -->
 
     <h1>Chapter 2</h1>
     <p>
-      Phasellus blandit velit at eros efficitur, in mollis dui feugiat. Fusce euismod mauris nec varius volutpat. Quisque
-      dapibus augue et ex ultricies, ac vestibulum dolor facilisis. Sed mattis est sed ipsum feugiat, ut blandit nunc
-      tristique. Aliquam et volutpat nulla, vel ullamcorper purus. Proin condimentum lacus ac congue varius. Maecenas a
-      cursus elit. Nulla facilisi. Integer eu quam eget arcu laoreet vehicula.
+      Phasellus blandit velit at eros efficitur, in mollis dui feugiat. Fusce
+      euismod mauris nec varius volutpat. Quisque dapibus augue et ex ultricies,
+      ac vestibulum dolor facilisis. Sed mattis est sed ipsum feugiat, ut
+      blandit nunc tristique. Aliquam et volutpat nulla, vel ullamcorper purus.
+      Proin condimentum lacus ac congue varius. Maecenas a cursus elit. Nulla
+      facilisi. Integer eu quam eget arcu laoreet vehicula.
     </p>
     <h2>Section 2.1</h2>
     <p>
-      Nunc rhoncus, risus nec euismod porttitor, urna nisi accumsan turpis, vitae euismod turpis arcu eget velit. Nulla a
-      elit vel enim accumsan egestas. Nulla facilisi. Duis nec magna risus. Etiam euismod hendrerit dolor. Integer vel est
-      vitae purus auctor vehicula. Vivamus feugiat felis id tortor hendrerit blandit. Nullam nec tortor eu neque tincidunt
-      mollis. Aenean tincidunt sit amet lacus eu suscipit. Fusce vitae nulla ultrices, convallis odio non, accumsan justo.
+      Nunc rhoncus, risus nec euismod porttitor, urna nisi accumsan turpis,
+      vitae euismod turpis arcu eget velit. Nulla a elit vel enim accumsan
+      egestas. Nulla facilisi. Duis nec magna risus. Etiam euismod hendrerit
+      dolor. Integer vel est vitae purus auctor vehicula. Vivamus feugiat felis
+      id tortor hendrerit blandit. Nullam nec tortor eu neque tincidunt mollis.
+      Aenean tincidunt sit amet lacus eu suscipit. Fusce vitae nulla ultrices,
+      convallis odio non, accumsan justo.
     </p>
     <h2>Section 2.2</h2>
     <p>
-      Aenean in nibh eget velit aliquet iaculis. Donec et purus ut lectus hendrerit efficitur. Maecenas vulputate justo
-      nec enim ullamcorper luctus. Integer varius nisi eu massa iaculis, vel auctor erat blandit. Nulla facilisi. Praesent
-      eget bibendum lectus. Donec dignissim velit id nisl feugiat, a vestibulum felis consequat. Pellentesque habitant
-      morbi tristique senectus et netus et malesuada fames ac turpis egestas.
+      Aenean in nibh eget velit aliquet iaculis. Donec et purus ut lectus
+      hendrerit efficitur. Maecenas vulputate justo nec enim ullamcorper luctus.
+      Integer varius nisi eu massa iaculis, vel auctor erat blandit. Nulla
+      facilisi. Praesent eget bibendum lectus. Donec dignissim velit id nisl
+      feugiat, a vestibulum felis consequat. Pellentesque habitant morbi
+      tristique senectus et netus et malesuada fames ac turpis egestas.
     </p>
     <!-- Continue with more paragraphs, sections, and chapters as needed to fill a couple of pages -->
   </section>
@@ -248,7 +314,7 @@ const slotContentType = ref("html");
 const selector = ref("#zoomable-content");
 
 function showEvent(ev: any) {
-  console.log(ev)
+  console.log(ev);
   // zoom.value = ev.zoom;
   // pan.value = {
   //   x: ev.pan.x,
@@ -262,7 +328,7 @@ let dblClickEnabled = ref(true);
 let touchEnabled = ref(true);
 let mouseWheelZoomEnabled = ref(true);
 let visible = ref(true);
-let documentFlow = ref(true)
+let documentFlow = ref(true);
 let enableControllButton = ref(true);
 </script>
 
@@ -277,12 +343,12 @@ let enableControllButton = ref(true);
   flex-direction: column;
 }
 
-#zoomable-content>div {
+#zoomable-content > div {
   display: flex;
   flex-direction: row;
 }
 
-#zoomable-content>div>div {
+#zoomable-content > div > div {
   margin: 50px;
   background-color: blue;
   height: 100px;

From 2f5b40fd5898412c911aba959bfe4dc38c39d104 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Robin=20Fa=CC=88=C3=9Fler?= <robin@webcontact.de>
Date: Fri, 15 Nov 2024 14:40:35 +0100
Subject: [PATCH 2/3] refactor: use ScrollOverlay inside VueZoomable component

---
 src/components/VueZoomable.vue | 60 ++++++++++++++--------------------
 1 file changed, 25 insertions(+), 35 deletions(-)

diff --git a/src/components/VueZoomable.vue b/src/components/VueZoomable.vue
index 4d549c1..f949a90 100644
--- a/src/components/VueZoomable.vue
+++ b/src/components/VueZoomable.vue
@@ -1,28 +1,30 @@
 <template>
-  <div
-    ref="container"
-    class="container"
-    :class="$style.container"
-    @mousedown="onMouseDown"
-    @dblclick="mouse.onDblClick"
-    @touchstart="touch.onTouchStart"
-    @wheel="wheel.onWheel"
-    @mouseleave="onMouseLeave"
-    @mouseenter="onMouseEnter"
-  >
-    <ControllButtons
-      v-if="props.enableControllButton"
-      @button-home="button.onHome"
-      @button-pan="button.onPan"
-      @button-zoom="button.onZoom"
-      @mousedown="updateHideOverlay(true)"
-    ></ControllButtons>
-    <slot></slot>
-  </div>
+  <ScrollOverlay :wheel-key="wheelKey" :wheel-enabled="wheelEnabled">
+    <div
+      ref="container"
+      class="container"
+      :class="$style.container"
+      @mousedown="onMouseDown"
+      @dblclick="mouse.onDblClick"
+      @touchstart="touch.onTouchStart"
+      @wheel="wheel.onWheel"
+      @mouseleave="onMouseLeave"
+      @mouseenter="onMouseEnter"
+    >
+      <ControllButtons
+        v-if="props.enableControllButton"
+        @button-home="button.onHome"
+        @button-pan="button.onPan"
+        @button-zoom="button.onZoom"
+        @mousedown="updateHideOverlay(true)"
+      ></ControllButtons>
+      <slot></slot>
+    </div>
+  </ScrollOverlay>
 </template>
 
 <script setup lang="ts">
-import { computed, ref, Ref, createApp, onMounted, watch } from "vue";
+import { computed, ref, Ref, onMounted, watch, provide } from "vue";
 import { useMouse } from "../composables/useMouse";
 import { useTouch } from "../composables/useTouch";
 import { useWheel } from "../composables/useWheel";
@@ -182,20 +184,7 @@ watch(
   }
 );
 
-onMounted(() => {
-  const placeholder = document.createElement("div");
-  const scrollOverlayApp = createApp(ScrollOverlay, {
-    enableWheelOnKey: props.enableWheelOnKey,
-  });
-
-  // needs to be injected before it is mounted
-  scrollOverlayApp.provide("hideOverlay", { hideOverlay });
-
-  scrollOverlayApp.mount(placeholder);
-  container.value.appendChild(placeholder);
-
-  setTransform();
-});
+provide("hideOverlay", { hideOverlay });
 
 const pressedKeys: Ref<Set<String>> = ref(new Set<String>());
 
@@ -253,6 +242,7 @@ function onMouseDown(event: MouseEvent) {
 .container {
   overflow: hidden;
   position: relative;
+  min-height: 100%;
 
   transition: transform 0.1s ease-out;
 

From a544348ea7eaa4d404df5f6d66e9df9b35d3d55f Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Robin=20Fa=CC=88=C3=9Fler?= <robin@webcontact.de>
Date: Fri, 15 Nov 2024 14:41:18 +0100
Subject: [PATCH 3/3] feat: add condition to show overlay only if wheel is
 enabled

---
 src/components/ScrollOverlay.vue | 36 ++++++++++++++++++++------------
 1 file changed, 23 insertions(+), 13 deletions(-)

diff --git a/src/components/ScrollOverlay.vue b/src/components/ScrollOverlay.vue
index 9034aef..6ca5aaa 100644
--- a/src/components/ScrollOverlay.vue
+++ b/src/components/ScrollOverlay.vue
@@ -6,35 +6,45 @@
 -->
 
 <template>
-  <div class="overlay" :class="{ hidden: hideOverlay }">
-    <p>Use '{{ props.enableWheelOnKey }}' + 'scroll' to zoom</p>
+  <div class="scroll-overlay">
+    <div
+      v-if="props.wheelEnabled"
+      class="overlay"
+      :class="{ hidden: hideOverlay }"
+    >
+      <p>Use '{{ props.wheelKey }}' + 'scroll' to zoom</p>
+    </div>
+    <slot />
   </div>
 </template>
 
 <script setup lang="ts">
-import { inject, ref, Ref } from 'vue';
+import { inject, ref, Ref } from "vue";
 
 const props = defineProps({
-  enableWheelOnKey: {
-      type: String,
-      default: undefined,
-  }
-})
-wheelKey: {
-  type: String,
-  default: undefined,
+  wheelKey: {
+    type: String,
+    default: undefined,
+  },
+  wheelEnabled: {
+    type: Boolean,
+  },
 });
 
 interface Injection {
-  hideOverlay: Ref<boolean>
+  hideOverlay: Ref<boolean>;
 }
 
-const { hideOverlay } = inject<Injection>('hideOverlay') as Injection;
+const { hideOverlay } = inject<Injection>("hideOverlay") as Injection;
 </script>
 
 <style scoped>
+.scroll-overlay {
+  position: relative;
+}
 .overlay {
   position: absolute;
+  z-index: 9999;
 
   top: 0;
   right: 0;