From 3839b003dcf9d4a7f2140041142308ef9cd7ee5d Mon Sep 17 00:00:00 2001
From: Peaceultime <clem31470@gmail.com>
Date: Wed, 8 Jan 2025 17:39:34 +0100
Subject: [PATCH] New event handling system for CanvasEditor in progress.

---
 components/CanvasEditor.vue | 244 ++++++++++++++++++++++++++++--------
 components/Editor.vue       |   2 +-
 db.sqlite-shm               | Bin 32768 -> 32768 bytes
 db.sqlite-wal               | Bin 906432 -> 1227792 bytes
 4 files changed, 192 insertions(+), 54 deletions(-)

diff --git a/components/CanvasEditor.vue b/components/CanvasEditor.vue
index d2405d1..8931593 100644
--- a/components/CanvasEditor.vue
+++ b/components/CanvasEditor.vue
@@ -1,4 +1,5 @@
 <script lang="ts">
+import type { Position } from '#shared/canvas.util';
 type Direction = 'bottom' | 'top' | 'left' | 'right';
 const rotation: Record<Direction, string> = {
     top: "180",
@@ -6,6 +7,27 @@ const rotation: Record<Direction, string> = {
     left: "90",
     right: "270"
 };
+
+const cancelEvent = (e: Event) => e.preventDefault();
+function center(touches: TouchList): Position
+{
+    const pos = { x: 0, y: 0 };
+
+    for(const touch of touches)
+    {
+        pos.x += touch.clientX;
+        pos.y += touch.clientY;
+    }
+
+    pos.x /= touches.length;
+    pos.y /= touches.length;
+    return pos;
+}
+function distance(touches: TouchList): number
+{
+    const [A, B] = touches;
+    return Math.hypot(B.clientX - A.clientX, B.clientY - A.clientY);
+}
 </script>
 
 <script setup lang="ts">
@@ -29,14 +51,14 @@ const nodes = computed(() => {
         { bg: `bg-light-${e.color?.class} dark:bg-dark-${e.color?.class}`, border: `border-light-${e.color?.class} dark:border-dark-${e.color?.class}`, outline: `outline-light-${e.color?.class} dark:outline-dark-${e.color?.class}` } : 
         { bg: `bg-colored`, border: `border-[color:var(--canvas-color)]`, outline: `outline-[color:var(--canvas-color)]` } : 
         { border: `border-light-40 dark:border-dark-40`, bg: `bg-light-40 dark:bg-dark-40`, outline: `outline-light-40 dark:outline-dark-40` } }))
-})
+});
 const edges = computed(() => {
     return canvas.edges.map(e => { 
         const from = canvas.nodes.find(f => f.id === e.fromNode), to = canvas.nodes.find(f => f.id === e.toNode);
         const path = getPath(from!, e.fromSide, to!, e.toSide)!;
         return { ...e, from, to, path };
     });
-})
+});
 
 const reset = (_: MouseEvent) => {
     zoom.value = minZoom.value; 
@@ -45,56 +67,162 @@ const reset = (_: MouseEvent) => {
     dispY.value = 0;
 }
 
-const cancelEvent = (e: Event) => e.preventDefault()
-useHover(({ hovering }) => {
-    if (!hovering) {
-        //@ts-ignore
-        window.removeEventListener('wheel', cancelEvent, { passive: false });
-        document.removeEventListener('gesturestart', cancelEvent)
-        document.removeEventListener('gesturechange', cancelEvent)
-        return
-    }
-    
-    window.addEventListener('wheel', cancelEvent, { passive: false });
-    document.addEventListener('gesturestart', cancelEvent)
-    document.addEventListener('gesturechange', cancelEvent)
-}, {
-    domTarget: canvasRef,
-});
+onMounted(() => {
+    let lastX = 0, lastY = 0, lastDistance = 0;
+    let box = canvasRef.value?.getBoundingClientRect()!;
+    const dragMove = (e: MouseEvent) => {
+        dispX.value -= (lastX - e.clientX) / zoom.value;
+        dispY.value -= (lastY - e.clientY) / zoom.value;
+        lastX = e.clientX;
+        lastY = e.clientY;
+    };
+    const dragEnd = (e: MouseEvent) => {
+        window.removeEventListener('mouseup', dragEnd);
+        window.removeEventListener('mousemove', dragMove);
+    };
+    canvasRef.value?.addEventListener('mouseenter', () => { 
+        window.addEventListener('wheel', cancelEvent, { passive: false });
+        document.addEventListener('gesturestart', cancelEvent);
+        document.addEventListener('gesturechange', cancelEvent);
 
-const dragHandler = useDrag(({ delta: [x, y] }: { delta: number[] }) => { 
-    if(editing.value === undefined)
-    {
-        dispX.value += x / zoom.value;
-        dispY.value += y / zoom.value;
+        canvasRef.value?.addEventListener('mouseleave', () => {
+            window.removeEventListener('wheel', cancelEvent);
+            document.removeEventListener('gesturestart', cancelEvent);
+            document.removeEventListener('gesturechange', cancelEvent);
+        });
+    })
+    window.addEventListener('resize', () => box = canvasRef.value?.getBoundingClientRect()!);
+    canvasRef.value?.addEventListener('mousedown', (e) => {
+        if(e.button === 1)
+        {
+            lastX = e.clientX;
+            lastY = e.clientY;
+
+            window.addEventListener('mouseup', dragEnd, { passive: true });
+            window.addEventListener('mousemove', dragMove, { passive: true });
+        }
+    }, { passive: true });
+    canvasRef.value?.addEventListener('wheel', (e) => {
+        if(!editing.value)
+        {
+            if((zoom.value >= 3 && e.deltaY < 0) || (zoom.value <= minZoom.value && e.deltaY > 0))
+                return;
+
+            const diff = Math.exp(e.deltaY * -0.001);
+            const centerX = (box.x + box.width / 2), centerY = (box.y + box.height / 2);
+            const mousex = centerX - e.clientX, mousey = centerY - e.clientY;
+
+            dispX.value -= mousex / (diff * zoom.value) - mousex / zoom.value;
+            dispY.value -= mousey / (diff * zoom.value) - mousey / zoom.value;
+
+            zoom.value = clamp(zoom.value * diff, minZoom.value, 3);
+        }
+    }, { passive: true });
+    canvasRef.value?.addEventListener('touchstart', (e) => {
+        ({ x: lastX, y: lastY } = center(e.touches));
+
+        if(e.touches.length > 1)
+        {
+            lastDistance = distance(e.touches);
+        }
+
+        canvasRef.value?.addEventListener('touchend', touchend, { passive: true });
+        canvasRef.value?.addEventListener('touchcancel', touchcancel, { passive: true });
+        canvasRef.value?.addEventListener('touchmove', touchmove, { passive: true });
+    }, { passive: true });
+    const touchend = (e: TouchEvent) => {
+        if(e.touches.length > 1)
+        {
+            ({ x: lastX, y: lastY } = center(e.touches));
+        }
+
+        canvasRef.value?.removeEventListener('touchend', touchend);
+        canvasRef.value?.removeEventListener('touchcancel', touchcancel);
+        canvasRef.value?.removeEventListener('touchmove', touchmove);
+    };
+    const touchcancel = (e: TouchEvent) => {
+        if(e.touches.length > 1)
+        {
+            ({ x: lastX, y: lastY } = center(e.touches));
+        }
+
+        canvasRef.value?.removeEventListener('touchend', touchend);
+        canvasRef.value?.removeEventListener('touchcancel', touchcancel);
+        canvasRef.value?.removeEventListener('touchmove', touchmove);
+    };
+    const touchmove = (e: TouchEvent) => {
+        const pos = center(e.touches);
+        dispX.value -= (lastX - pos.x);
+        dispY.value -= (lastY - pos.y);
+        lastX = pos.x;
+        lastY = pos.y;
+
+        if(e.touches.length === 2)
+        {
+            const dist = distance(e.touches);
+            const diff = lastDistance / dist;
+            
+            zoom.value = clamp(zoom.value * diff, minZoom.value, 3); //@TODO
+        }
+    };
+})
+
+function selectNode(node: CanvasNode, e: MouseEvent)
+{
+    const target = e.currentTarget as HTMLElement;
+    let lastX = 0, lastY = 0;
+
+    const unselect = (_e: MouseEvent) => {
+        if(_e.button === 0 && _e.target !== target)
+        {
+            focusing.value = undefined;
+        }
+    };
+    const dragStart = (_e: MouseEvent) => {
+        if(e.button !== 0)
+            return;
+
+        lastX = _e.clientX;
+        lastY= _e.clientY;
+
+        window.addEventListener('mousemove', dragMove, { passive: true });
+        window.addEventListener('mouseup', dragEnd, { passive: true });
+    };
+    const dragMove = (_e: MouseEvent) => {
+        node.x -= (lastX - e.clientX)/ zoom.value;
+        node.y -= (lastY - e.clientY)/ zoom.value;
+        
+        focusing.value = node;
+
+        lastX = _e.clientX;
+        lastY= _e.clientY;
     }
-}, {
-    useTouch: true,
-    domTarget: canvasRef,
-});
-const wheelHandler = useWheel(({ delta: [x, y] }: { delta: number[] }) => {
-    if(editing.value === undefined)
-    {
-        zoom.value = clamp(zoom.value + y * -0.001, minZoom.value, 3);
+    const dragEnd = (_e: MouseEvent) => {
+        window.removeEventListener('mousemove', dragMove);
+        window.removeEventListener('mouseup', dragEnd);
     }
-}, {
-    eventOptions: {
-        capture: true,
-    },
-    domTarget: canvasRef,
-});
-const pinchHandler = usePinch(({ offset: [z] }: { offset: number[] }) => {
-    if(editing.value === undefined)
-    {
-        zoom.value = clamp(z / 2048, minZoom.value, 3);
-    }
-}, {
-    domTarget: canvasRef,
-});
+
+    window.removeEventListener('mousemove', dragMove);
+    window.removeEventListener('mouseup', dragEnd);
+    target.removeEventListener('mousedown', dragStart);
+
+    focusing.value = node;
+
+    //canvasRef.value?.addEventListener('mousedown', unselect, { once: true, passive: true });
+    target.addEventListener('mousedown', dragStart, { passive: true });
+}
+function editNode(node: CanvasNode, e: MouseEvent)
+{
+    editing.value = node;
+}
+function resizeNode(e: MouseEvent, x: number, y: number)
+{
+    const target = e.currentTarget;
+}
 </script>
 
 <template>
-    <div ref="canvasRef" class="absolute top-0 left-0 overflow-hidden w-full h-full touch-none" :style="{ '--zoom-multiplier': (1 / Math.pow(zoom, 0.7)) }" @click.self="() => { focusing = undefined; editing = undefined; }">
+    <div ref="canvasRef" 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="flex flex-col absolute sm:top-2 top-10 left-2 z-[35] overflow-hidden gap-4">
             <div class="border border-light-35 dark:border-dark-35 bg-light-10 dark:bg-dark-10">
                 <Tooltip message="Zoom avant" side="right">
@@ -140,19 +268,29 @@ const pinchHandler = usePinch(({ offset: [z] }: { offset: number[] }) => {
                 <div :style="{
                     '--tw-translate-x': `${dispX}px`,
                     '--tw-translate-y': `${dispY}px`,
-                    '--tw-scale-x': `${zoom}`,
-                    '--tw-scale-y': `${zoom}`,
-                    transform: 'scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y)) translate3d(var(--tw-translate-x), var(--tw-translate-y), 0)'
-                }">
-                    <div class="absolute top-0 left-0 w-full h-full origin-center pointer-events-none *:pointer-events-auto *:select-none touch-none">
+                    '--tw-scale': `${zoom}`,
+                    'transform': 'scale3d(var(--tw-scale), var(--tw-scale), 1) translate3d(var(--tw-translate-x), var(--tw-translate-y), 0)',
+                    'transform-origin': 'center center',
+                }" class="h-full">
+                    <div class="absolute top-0 left-0 w-full h-full pointer-events-none *:pointer-events-auto *:select-none touch-none">
                         <div>
                             <div v-for="node of nodes" :key="node.id" class="absolute" :style="{transform: `translate(${node.x}px, ${node.y}px)`, width: `${node.width}px`, height: `${node.height}px`, '--canvas-color': node.color?.hex}" :class="{'-z-10': node.type === 'group', 'z-10': node.type !== 'group'}">
-                                <div v-if="editing?.id !== node.id" style="outline-style: solid;" :class="[node.class.border, node.class.outline, { '!outline-4': focusing?.id === node.id }]" class="outline-0 transition-[outline-width] border-2 bg-light-20 dark:bg-dark-20 overflow-hidden contain-strict w-full h-full flex" @click.left="() => { focusing = node; editing = undefined; }" @dblclick="() => { if(node.type === 'text') editing = node; }">
-                                    <div class="w-full h-full py-2 px-4 flex !bg-opacity-[0.07]" :class="node.class.bg">
+                                <div v-if="editing?.id !== node.id" style="outline-style: solid;" :class="[node.class.border, node.class.outline, { '!outline-4 cursor-move': focusing?.id === node.id }]" class="outline-0 transition-[outline-width] border-2 bg-light-20 dark:bg-dark-20 w-full h-full flex">
+                                    <div class="w-full h-full py-2 px-4 flex !bg-opacity-[0.07]" :class="node.class.bg" @click.left="(e) => selectNode(node, e)" @dblclick.left="(e) => editNode(node, e)">
                                         <div v-if="node.text?.length > 0" class="flex items-center">
                                             <MarkdownRenderer :content="node.text" :proses="{ a: FakeA }" />
                                         </div>
                                     </div>
+                                    <div v-if="focusing?.id === node.id">
+                                        <span @mousedown="(e) => resizeNode(e,  0, -1)" id=" n" class="cursor-n-resize  absolute -top-2     left-0    right-0  h-4"></span> <!-- North      -->
+                                        <span @mousedown="(e) => resizeNode(e,  0,  1)" id=" s" class="cursor-s-resize  absolute -bottom-2  left-0    right-0  h-4"></span> <!-- South      -->
+                                        <span @mousedown="(e) => resizeNode(e, -1,  0)" id=" e" class="cursor-e-resize  absolute  top-0     bottom-0 -left-2   w-4"></span> <!-- East       -->
+                                        <span @mousedown="(e) => resizeNode(e,  1,  0)" id=" w" class="cursor-w-resize  absolute  top-0     bottom-0 -right-2  w-4"></span> <!-- West       -->
+                                        <span @mousedown="(e) => resizeNode(e,  1, -1)" id="nw" class="cursor-nw-resize absolute -top-2    -left-2    w-4      h-4"></span> <!-- North West -->
+                                        <span @mousedown="(e) => resizeNode(e, -1, -1)" id="ne" class="cursor-ne-resize absolute -top-2    -right-2   w-4      h-4"></span> <!-- North East -->
+                                        <span @mousedown="(e) => resizeNode(e, -1,  1)" id="se" class="cursor-se-resize absolute -bottom-2 -right-2   w-4      h-4"></span> <!-- South East -->
+                                        <span @mousedown="(e) => resizeNode(e,  1,  1)" id="sw" class="cursor-sw-resize absolute -bottom-2 -left-2    w-4      h-4"></span> <!-- South West -->
+                                    </div>
                                 </div>
                                 <div v-else style="outline-style: solid;" :class="[node.class.border, node.class.outline, { '!outline-4': focusing?.id === node.id }]" class="outline-0 transition-[outline-width] border-2 bg-light-20 dark:bg-dark-20 overflow-hidden contain-strict w-full h-full flex" >
                                     <Editor v-model="node.text" />
diff --git a/components/Editor.vue b/components/Editor.vue
index 23676dc..57f63ba 100644
--- a/components/Editor.vue
+++ b/components/Editor.vue
@@ -91,7 +91,7 @@ watchEffect(() => {
 .cm-editor
 {
     @apply bg-transparent;
-    @apply flex-1
+    @apply flex-1;
 }
 .cm-editor .cm-content
 {
diff --git a/db.sqlite-shm b/db.sqlite-shm
index ca9fdfebc1205506830a823048d0cd28436f8db8..145a480d9b9005b6ab6bc83e376a8f6bf9a1f65d 100644
GIT binary patch
delta 330
zcmb7=%Ps=}6o&tAX4Jjv+M@2XG_jXhkl0GY$~*7^c4jA$h(=$)(zfZ|LOg+mg^XKK
z>RJ@7qGn=a>r2kbpL0&W#j$O}wvClgW?UX&w~zucw{5t2XEj<m+{_hs6Wisrxy9h*
zOlkRGYQp*Nz32Auyp=!vPUVx|T`0A_WTv*JNf*t%*<@kfi67}iXFAuVu9VZQ?)9iA
zz35f%Dygh5RRktgR8vbmjWp3rEA0g7q?;c47+{DIqKuKo+P9MV1t)&2Q)P6atgdyV
vJ3T0`XBG6OqCWJgZ}$xb7CvgIqX9nwT4<w#5M6}nrJq5Di7-mc^JXJI41Z#z

delta 173
zcmZo@U}|V!s+V}A%K!o$K+MR%AaDmr_XDwtPyfufEuKP$Can0~6_6z^a7g3$taAN(
zq^buR1qL8<|04mYFdIV%h_$h|n0d1S>k*&L4y+c8lfMMs*=)qBz&iOuIEZ1Q4geeY
BImG|~

diff --git a/db.sqlite-wal b/db.sqlite-wal
index d07a3f996d977314e69673b2003908220645fb2f..9ad58f4271b79d03038f3f6002896c0968299cb6 100644
GIT binary patch
delta 2180
zcmZYAdrVVT9Kdnjw<yq32Evq%hYTnL#&lz#yoB%^uRySn@w5yxhf{gfE>OT;H7JyV
zgF@@Dm`z)iy7E{Y3KBpiilDQg!W1lz(O{H<Sy*H^a_%{Qoj>kBH~HlIyZ4uSZokrB
zycSzY8j?n&F=;}Yl4c}9(nxc13%QlF=(6nB*c%uam~CEl17gMdGfCfVE6c2zd~Ti2
zRDV@OHx>kyom0`JwBeb~uJF}`w9X{PI(^6HU5vGnqx+ml?>flJ0dqB6D1LD2jXz@L
z7+YFd%_yC^&V{TJu(%c%?)<~rM~GEoOkerlMVV^<7_t+94LQ?DU0ZuDVka=By4oi#
zb?mo;tag*hi0CEF{rEd<q-rtsqOftmFwVaSDv>0()I>(?x}Q2Ge|-os5ysBf>#H<3
zpXezToC#*UwKF`*O{!Bu7MzK(%8i|zmOYDOkmUe&;jfMrTA-FdEC*vUO*cWC|FIUb
z1AwuHJ#B{vd8UXRz?k29UcwheN3KG~1&krIJ<{P6?TQ!|V+D`ASw@1GXo}^BNCbu!
zGC~@;7TL(=LY5zbvBF8t%dh|3-3wVLsEKY&FGq2UUmzBWvAc5zMN7k>v5<uU7M-f%
zeCqPeC}Lq48`|S|%-4ID7saaF02_=PCV#3B8$(v*hOyQ5+n08XOp%be1GbmVGSGVV
zh!Jzgm|?aRJ55*92pP42do9;T_WNGzMhsuTJNn{Aw(d<UWYhw-Cl)Poa^gA=!xvDj
z`PXGO>B=-@`Cv%q+w#=U4x8UYEFT*(IYPw!`G;gS#e@_K`lqMKH9VpZG9k{?mz5ij
z1B^{6cD4l60>$d2k1|Z|Kz6nStC>Cj@A&UtRUVL)0w&kBvv)6#b|F@ZvBVtvTl_O}
zbBfjL0lOre`Lg*mM+aHG9%KF&8`}7DC9f#f%mb`AytN?rLQFbj%{+`fS^r*T^lPCG
zvg3g5`!+z%spIewJC3oA!4lWlq6%lo_>!z3a~V<Q@7$PS7lRldV*?5CRxf>++bJfU
zm5gdPKb*LmzsWLMQy`PhVr=2<ZFO^sXdJS6iHd0?BPtxWJzEuLA~uh)En3f!{rnkt
zmPnVuv)O(ywNn(U|3+*XV^<D2f5I;KxEj{<lB{q`8R5t*oU-yeiWt6t#EFNRp6c}g
zipg_9?XqC+VXNc@2gu~PSS@70Q@z-pnGRVVVAV+`y!iNMYQ*v|=E>LieE!PAk79~(
z>P<%2%)FLYpkIJu9Am7digT*5;6EUn0JUR2J=RSpd&6K&F@Z6!X@(PzA%%yz;wfOP
za-&#6#!N=+DaK;9s@ISDrd_0JN;+Um+&Qa|g9#ImDd`xicZgW*?Vfr78ABpiGnEk{
zOD(4+t`ji^#>7#)Ih&!ZYmixknp+C(u9uyS2V&M3YxlBPj+)6n37JsBy0KZC{H3Q%
kxl)3d5M$@_-&rWNflZK+p!UK2bl;k;VG=MCfs(ZUAMWH#+5i9m

delta 35
rcmbR6!|T9G^M)427N!>F7M2#)7Pc1l7LFFq7OocV7M?A<2d)4B@$(GE