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>

types/api.d.ts

@@ -6,11 +6,7 @@ export interface SuccessHandler
 export interface ErrorHandler
 {
     success: false;
-    error: Error | ZodError<{
-        username: string;
-        email: string;
-        password: string;
-    }>;
+    error: Error | ZodError;
 }
 export type Return = SuccessHandler | ErrorHandler;
 
@@ -29,16 +25,19 @@ export interface Navigation {
     private: boolean;
     children?: Navigation[];
 }
+export type FileMetadata = Record<string, boolean | string | number>;
+export type FileType = 'Markdown' | 'Canvas' | 'File' | 'Folder';
 export interface File {
     project: number;
     path: string;
     owner: number;
     title: string;
     order: number;
-    type: 'Markdown' | 'Canvas' | 'File' | 'Folder';
+    type: FileType;
     content: string;
     navigable: boolean;
     private: boolean;
+    metadata: FileMetadata;
 }
 export interface Comment {
     project: number;
@@ -53,21 +52,21 @@ export interface User {
     id: number;
     username: string;
 }
-export interface ProjectSearch extends Project
+export type ProjectSearch = Project &
 {
     pages: number;
     username: string;
 }
-export interface FileSearch extends File
+export type FileSearch = Omit<File, 'content'> &
 {
     comments: number;
     username: string;
 }
-export interface CommentSearch extends Comment
+export type CommentSearch = Comment &
 {
     username: string;
 }
-export interface UserSearch extends User
+export type UserSearch = User &
 {
 }
 export interface Search {