Fix to canvas zoom

components/canvas/CanvasRenderer.vue

@@ -14,7 +14,7 @@ let centerX = ref(0), centerY = ref(0), canvas = ref<HTMLDivElement>();
 let minX = ref(+Infinity), minY = ref(+Infinity), maxX = ref(-Infinity), maxY = ref(-Infinity);
 let bbox = ref<DOMRect>();
 
-let lastPinchLength = 0;
+let lastDistance = 0;
 
 let _minX = +Infinity, _minY = +Infinity, _maxX = -Infinity, _maxY = -Infinity;
 
@@ -93,7 +93,7 @@ const onTouchStart = (event: TouchEvent) => {
     if(event.touches?.length === 2)
     {
         dragging = false;
-        lastPinchLength = length(event.touches[0].clientX, event.touches[0].clientY, event.touches[1].clientX, event.touches[1].clientY);
+        lastDistance = length(event.touches[0].clientX, event.touches[0].clientY, event.touches[1].clientX, event.touches[1].clientY);
 
         document.addEventListener('touchmove', onTouchMove);
         document.addEventListener('touchend', onTouchEnd);
@@ -111,10 +111,10 @@ const onTouchEnd = (event: TouchEvent) => {
 const onTouchMove = (event: TouchEvent) => {
     if(event.touches?.length === 2)
     {
-        const l = length(event.touches[0].clientX, event.touches[0].clientY, event.touches[1].clientX, event.touches[1].clientY);
-        zoom.value  = clamp(zoom.value + ((lastPinchLength - l) * -0.01), minZoom.value, 3);
+        const distance = length(event.touches[0].clientX, event.touches[0].clientY, event.touches[1].clientX, event.touches[1].clientY);
+        zoom.value  = clamp(zoom.value * (distance / lastDistance), minZoom.value, 3);
 
-        lastPinchLength = l;
+        lastDistance = distance;
     }
 }
 
@@ -276,6 +276,7 @@ function getCenter(n: { x: number, y: number }, i: { x: number, y: number }, r:
                         </div>
                     </template>
                 </div>
+                <span v-if="TMP_dragPoint" :style="{ display: 'block', backgroundColor: 'red', borderRadius: '8px', width: '8px', height: '8px', transform: `translate(-4px, -4px) translate(${TMP_dragPoint.x}px, ${TMP_dragPoint.y}px)` }"></span>
             </div>
         </template>
         <template #fallback>