Testing @vueuse/gesture on CnavasRenderer

components/canvas/CanvasRenderer.vue

@@ -234,12 +234,23 @@ dark:border-dark-cyan
 dark:border-dark-purple
 
 */
+
+const dragHandler = ({ delta: [x, y] }: { delta: number[] }) => { 
+    dispX.value += x / zoom.value;
+    dispY.value += y / zoom.value;
+}
+const pinchHandler = ({ offset: [z] }: { offset: number[] }) => { 
+    zoom.value = clamp(z, minZoom.value, 3);
+}
+const wheelHandler = ({ delta: [x, y] }: { delta: number[] }) => { 
+    zoom.value = clamp(zoom.value + y * -0.001, minZoom.value, 3);
+}
 </script>
 
 <template>
     <Suspense>
-        <template #default>
+        <template #default> <!-- @pointerdown="onPointerDown" @touchstart="onTouchStart" -->
-            <div id="canvas" @pointerdown="onPointerDown" @wheel.passive="onWheel" @touchstart="onTouchStart"
+            <div id="canvas" v-drag="dragHandler" v-pinch="pinchHandler" v-wheel="wheelHandler"
                 @dragstart.prevent="" class="absolute top-0 left-0 overflow-hidden w-full h-full touch-none"
                 :style="{ '--zoom-multiplier': (1 / Math.pow(zoom, 0.7)) }">
                 <div class="border border-light-35 dark:border-dark-35 bg-light-10 dark:bg-dark-10 absolute sm:top-2 top-10 left-2 z-30 overflow-hidden">

nuxt.config.ts

@@ -5,7 +5,7 @@ export default defineNuxtConfig({
     "@nuxtjs/color-mode",
     "nuxt-security",
     "@nuxtjs/tailwindcss",
-    "@vueuse/nuxt"
+    "@vueuse/nuxt",
   ],
   runtimeConfig: {
     dbFile: 'db.sqlite',

package.json

@@ -4,6 +4,7 @@
     "@nuxtjs/tailwindcss": "^6.12.1",
     "@types/bun": "^1.1.8",
     "@types/diff": "^5.2.2",
+    "@vueuse/gesture": "^2.0.0",
     "@vueuse/nuxt": "^11.0.3",
     "hast-util-to-html": "^9.0.2",
     "nuxt": "^3.13.1",

plugins/vueuse.gesture.ts

@@ -0,0 +1,5 @@
+import { GesturePlugin } from '@vueuse/gesture'
+
+export default defineNuxtPlugin((nuxtApp) => {
+  nuxtApp.vueApp.use(GesturePlugin)
+})