Small fixes

components/canvas/CanvasRenderer.vue

@@ -149,14 +149,6 @@ dark:border-dark-purple
 
 */
 
-const dragHandler = useDrag(({ event: Event, delta: [x, y] }: { event: Event, delta: number[] }) => { 
-    event?.preventDefault();
-    dispX.value += x / zoom.value;
-    dispY.value += y / zoom.value;
-}, {
-    domTarget: canvas,
-    eventOptions: { passive: false, }
-})
 const pinchHandler = usePinch(({ event: Event, offset: [z] }: { event: Event, offset: number[] }) => { 
     event?.preventDefault();
     console.log(z);
@@ -172,6 +164,14 @@ const wheelHandler = useWheel(({ event: Event, delta: [x, y] }: { event: Event,
     domTarget: canvas,
     eventOptions: { passive: false, }
 })
+const dragHandler = useDrag(({ event: Event, delta: [x, y] }: { event: Event, delta: number[] }) => { 
+    event?.preventDefault();
+    dispX.value += x / zoom.value;
+    dispY.value += y / zoom.value;
+}, {
+    domTarget: canvas,
+    eventOptions: { passive: false, }
+})
 </script>
 
 <template>

pages/user/profile.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import type { DragState, InternalDragOptions } from '@vueuse/gesture';
+import { format } from '#imports';
 
 definePageMeta({
     guestsGoesTo: '/user/login'
@@ -9,11 +9,8 @@ const { user, clear } = useUserSession();
 const { data: projects } = useFetch(`/api/users/${user.value?.id}/projects`);
 const { data: comments } = useFetch(`/api/users/${user.value?.id}/comments`);
 
-const dialog = useTemplateRef('dialog'), bounds = useTemplateRef('bounds');
+const dialog = useTemplateRef('dialog');
 const files = ref<File[]>([]), imgURL = ref<string |null>(null);
-const { top, left, update } = useElementBounding(bounds);
-
-const posX = ref(0), posY = ref(0), size = ref(128);
 
 async function loadImage(f: File[])
 {
@@ -22,46 +19,10 @@ async function loadImage(f: File[])
     {
         imgURL.value = URL.createObjectURL(f[0]);
     }
-    update();
 }
 async function approveThumbnail()
 {
 
-}
-const dragHandler = ({ delta: [x, y] }: { delta: number[] }) => { 
-    posX.value = clamp(posX.value + x, 0, 256 - size.value);
-    posY.value = clamp(posY.value + y, 0, 256 - size.value);
-};
-
-const axisModifier: Record<string, (data: { values: number[], delta: number[] }) => void> = {
-    'nw': ({values: [x, y], delta: [_x, _y]}: { values: number[], delta: number[] }): void => {
-        x = clamp(x - left.value, 0, 256);
-        y = clamp(y - top.value, 0, 256);
-
-        const scale = 256 - Math.min(x, y) / size.value;
-        
-        top = top + 256 - scale;
-        left = left + 256 - scale;
-    },
-    'ne': ({values: [x, y]}: { values: number[]}): void => {
-        x = clamp(x - left.value, 0, 256) - posX.value;
-        y = clamp(y - top.value, 0, 256) - posY.value;
-        size.value = clamp(Math.min(x, y), 128, 256 - Math.max(posX.value, posY.value));
-    },
-    'sw': ({values: [x, y]}: { values: number[]}): void => {
-        x = clamp(x - left.value, 0, 256) - posX.value;
-        y = clamp(y - top.value, 0, 256) - posY.value;
-        size.value = clamp(Math.min(x, y), 128, 256 - Math.max(posX.value, posY.value));
-    },
-    'se': ({values: [x, y]}: { values: number[]}): void => {
-        x = clamp(x - left.value, 0, 256) - posX.value;
-        y = clamp(y - top.value, 0, 256) - posY.value;
-        size.value = clamp(Math.min(x, y), 128, 256 - Math.max(posX.value, posY.value));
-    },
-};
-
-const axisOptions: Partial<InternalDragOptions> = {
-    bounds: [[0, 0], [256, 256]],
 }
 </script>
 
@@ -70,32 +31,12 @@ const axisOptions: Partial<InternalDragOptions> = {
         <Title>Votre profil</Title>
     </Head>
     <div v-if="user" class="flex-1 grid gap-4 grid-cols-3">
-        <div class="border border-light-35 dark:border-dark-35 p-4 flex gap-4 col-span-2">
+        <div class="border border-light-35 dark:border-dark-35 p-4 flex gap-4 col-span-2 self-start">
-            <Picture @click="() => dialog?.show()" :src="`/users/${user?.id}/normal.jpg`" :width=128 :height=128 class="inline-block hover:bg-light-70 hover:bg-opacity-50 hover:opacity-50 transition-all cursor-pointer">
+            <Image @click="() => dialog?.show()" :src="`/users/${user?.id}/normal.jpg`" :width=128 :height=128 class="inline-flex hover:bg-light-70 hover:bg-opacity-50 hover:opacity-50 transition-all cursor-pointer" fallback-icon="user-unknown" />
-                <Icon :icon="`icons/unknown`" :width=128 :height=128></Icon>
-            </Picture>
             <Dialog :close-icon="true" :focused="false" ref="dialog">
                 <div class="w-[640px] h-[320px] flex justify-center gap-4 items-center mb-6">
-                    <div class="w-[256px] h-[256px] relative" ref="bounds">
+                    <div class="w-[256px] h-[256px]">
-                        <Picture :src="imgURL ?? undefined" :width=256 :height=256 class="inline-block select-none" :style="{ filter: `saturate(0.3) contrast(0.5)` }">
+                        <Image :src="imgURL" :width="256" :height="256" fallback-icon="user-unknown" class="inline-block select-none" :style="{ filter: `saturate(0.3) contrast(0.5)` }"/>
-                            <Icon :icon="`icons/unknown`" :width=256 :height=256></Icon>
-                        </Picture>
-                        <div class="z-[3] absolute top-0 bottom-0 left-0 right-0" v-if="imgURL">
-                            <Picture :src="imgURL" :width=256 :height=256 :style="{
-                                clipPath: `polygon(${posX}px ${posY}px, ${posX}px ${posY + size}px, ${posX + size}px ${posY + size}px, ${posX + size}px ${posY}px)`,
-                            }"></Picture>
-                            <div class="border border-dashed border-light-20 dark:border-dark-20 absolute cursor-move" :style="{
-                                top: `${posY}px`,
-                                left: `${posX}px`,
-                                width: `${size}px`,
-                                height: `${size}px`,
-                            }" v-drag="dragHandler">
-                            </div>
-                            <span :drag-options="axisOptions" v-drag="axisModifier['nw']" class="z-10 cursor-nw-resize absolute border-4 border-light-100 dark:border-dark-100" :style="{ top: `${posY}px`, left: `${posX}px`, }"></span>
-                            <span :drag-options="axisOptions" v-drag="axisModifier['ne']" class="z-10 cursor-ne-resize absolute border-4 border-light-100 dark:border-dark-100" :style="{ top: `${posY + size - 8}px`, left: `${posX}px`, }"></span>
-                            <span :drag-options="axisOptions" v-drag="axisModifier['sw']" class="z-10 cursor-sw-resize absolute border-4 border-light-100 dark:border-dark-100" :style="{ top: `${posY}px`, left: `${posX + size - 8}px`, }"></span>
-                            <span :drag-options="axisOptions" v-drag="axisModifier['se']" class="z-10 cursor-se-resize absolute border-4 border-light-100 dark:border-dark-100" :style="{ top: `${posY + size - 8}px`, left: `${posX + size - 8}px`, }"></span>
-                        </div>
                     </div>
                 </div>
                 <div class="border-t border-light-35 dark:border-dark-35 absolute bottom-0 left-0 right-0 p-4 flex justify-between">
@@ -115,8 +56,8 @@ const axisOptions: Partial<InternalDragOptions> = {
                 <span>Inscrit depuis le {{ format(new Date(user.signin_timestamp), 'dd/MM/yyyy') }}</span>
             </div>
         </div>
-        <div class="p-4 flex gap-4 flex-col">
+        <div class="px-4 py-2 flex gap-4 flex-col">
-            <button @click="clear()" class="py-1 transition-all duration-200 mb-4 border border-light-35 dark:border-dark-35 bg-light-20 dark:bg-dark-20 hover:border-light-50 dark:hover:border-dark-50 hover:bg-light-30 dark:hover:bg-dark-30">Se déconnecter</button>
+            <button @click="clear()" class="py-1 transition-all duration-200 mb-3 border border-light-35 dark:border-dark-35 bg-light-20 dark:bg-dark-20 hover:border-light-50 dark:hover:border-dark-50 hover:bg-light-30 dark:hover:bg-dark-30">Se déconnecter</button>
             <button @click="" class="py-1 transition-all duration-200 border border-light-35 dark:border-dark-35 bg-light-20 dark:bg-dark-20 hover:border-light-50 dark:hover:border-dark-50 hover:bg-light-30 dark:hover:bg-dark-30">Mettre à jour le profil</button>
             <button @click="" class="py-1 transition-all duration-200 border border-light-35 dark:border-dark-35 bg-light-20 dark:bg-dark-20 hover:border-light-red dark:hover:border-dark-red hover:bg-light-30 dark:hover:bg-dark-30 text-light-red dark:text-dark-red">Supprimer le compte</button>
         </div>