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>
-            <div id="canvas" @pointerdown="onPointerDown" @wheel.passive="onWheel" @touchstart="onTouchStart"
+        <template #default> <!-- @pointerdown="onPointerDown" @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">