From fa2d8e50353260708a6ef49370eb495b2646a715 Mon Sep 17 00:00:00 2001
From: Peaceultime <clem31470@gmail.com>
Date: Thu, 3 Oct 2024 16:11:46 +0200
Subject: [PATCH] Fix pinch zoom

---
 components/canvas/CanvasRenderer.vue | 32 +++++++++++++++++++++-------
 1 file changed, 24 insertions(+), 8 deletions(-)

diff --git a/components/canvas/CanvasRenderer.vue b/components/canvas/CanvasRenderer.vue
index 9bb7b58..a29e3a1 100644
--- a/components/canvas/CanvasRenderer.vue
+++ b/components/canvas/CanvasRenderer.vue
@@ -1,5 +1,7 @@
 <script setup lang="ts">
+import { useDrag, usePinch, useWheel } from '@vueuse/gesture';
 import type { CanvasContent, CanvasNode } from '~/types/canvas';
+import { clamp } from '#imports';
 
 interface Props
 {
@@ -8,6 +10,7 @@ interface Props
 const props = defineProps<Props>();
 
 const dispX = ref(0), dispY = ref(0), minZoom = ref(0.1), zoom = ref(0.5);
+const canvas = useTemplateRef('canvas');
 
 const reset = (_: MouseEvent) => {
     zoom.value = minZoom.value; 
@@ -146,22 +149,35 @@ dark:border-dark-purple
 
 */
 
-const dragHandler = ({ delta: [x, y] }: { delta: number[] }) => { 
+const dragHandler = useDrag(({ event: Event, delta: [x, y] }: { event: Event, delta: number[] }) => { 
+    event?.preventDefault();
     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[] }) => { 
+}, {
+    domTarget: canvas,
+    eventOptions: { passive: false, }
+})
+const pinchHandler = usePinch(({ event: Event, offset: [z] }: { event: Event, offset: number[] }) => { 
+    event?.preventDefault();
+    console.log(z);
+    zoom.value = clamp(z / 2048, minZoom.value, 3);
+}, {
+    domTarget: canvas,
+    eventOptions: { passive: false, }
+})
+const wheelHandler = useWheel(({ event: Event, delta: [x, y] }: { event: Event, delta: number[] }) => { 
+    event?.preventDefault();
     zoom.value = clamp(zoom.value + y * -0.001, minZoom.value, 3);
-}
+}, {
+    domTarget: canvas,
+    eventOptions: { passive: false, }
+})
 </script>
 
 <template>
     <Suspense>
         <template #default>
-            <div id="canvas" v-drag="dragHandler" v-pinch="pinchHandler" v-wheel="wheelHandler" class="absolute top-0 left-0 overflow-hidden w-full h-full touch-none"
+            <div id="canvas" ref="canvas" 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">
                     <div @click="zoom = clamp(zoom * 1.1, minZoom, 3)" class="w-8 h-8 flex justify-center items-center p-2 hover:bg-light-30 dark:hover:bg-dark-30 cursor-pointer"