Progress on image cropping

pages/user/profile.vue

@@ -1,4 +1,6 @@
 <script setup lang="ts">
+import type { DragState, InternalDragOptions } from '@vueuse/gesture';
+
 definePageMeta({
     guestsGoesTo: '/user/login'
 });
@@ -7,24 +9,55 @@ 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');
+const dialog = useTemplateRef('dialog'), bounds = useTemplateRef('bounds');
 const files = ref<File[]>([]), imgURL = ref<string |null>(null);
+const { top, left, update } = useElementBounding(bounds);
 
-const posX = ref(0), posY = ref(0), sizeX = ref(128), sizeY = ref(128);
+const posX = ref(0), posY = ref(0), size = ref(128);
 
 async function loadImage(f: File[])
 {
     files.value = f;
     if(f.length > 0)
+    {
         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 - sizeX.value);
+    posX.value = clamp(posX.value + x, 0, 256 - size.value);
-    posY.value = clamp(posY.value + y, 0, 256 - sizeY.value);
+    posY.value = clamp(posY.value + y, 0, 256 - size.value);
+};
+
+const axisModifier: Record<string, (data: { values: number[]}) => void> = {
+    'nw': ({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), 0, 256 - Math.max(posX.value, posY.value));
+    },
+    '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), 0, 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), 0, 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), 0, 256 - Math.max(posX.value, posY.value));
+    },
+};
+
+const axisOptions: Partial<InternalDragOptions> = {
+    bounds: [[0, 0], [256, 256]],
 }
 </script>
 
@@ -38,23 +71,30 @@ const dragHandler = ({ delta: [x, y] }: { delta: number[] }) => {
                 <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">
+                <div class="w-[640px] h-[320px] flex justify-center gap-4 items-center">
-                    <div class="w-[256px] h-[256px] relative">
+                    <div class="w-[256px] h-[256px] relative" ref="bounds">
-                        <Picture :src="imgURL ?? undefined" :width=256 :height=256 class="inline-block select-none">
+                        <Picture :src="imgURL ?? undefined" :width=256 :height=256 class="inline-block select-none" :style="{ filter: `saturate(0.3) contrast(0.5)` }">
                             <Icon :icon="`icons/unknown`" :width=256 :height=256></Icon>
                         </Picture>
-                        <div v-if="imgURL" class="border-2 border-dashed border-light-50 dark:border-dark-50 absolute cursor-move" :style="{
+                        <div class="z-[3] absolute top-0 bottom-0 left-0 right-0" v-if="imgURL">
-                            top: `${posY}px`,
+                            <Picture :src="imgURL" :width=256 :height=256 :style="{
-                            left: `${posX}px`,
+                                clipPath: `polygon(${posX}px ${posY}px, ${posX}px ${posY + size}px, ${posX + size}px ${posY + size}px, ${posX + size}px ${posY}px)`,
-                            width: `${sizeX}px`,
+                            }"></Picture>
-                            height: `${sizeX}px`,
+                            <div class="border border-dashed border-light-20 dark:border-dark-20 absolute cursor-move" :style="{
-                        }" v-drag="dragHandler">
+                                top: `${posY}px`,
-                            <span class=""></span>
+                                left: `${posX}px`,
-                            <span class=""></span>
+                                width: `${size}px`,
-                            <span class=""></span>
+                                height: `${size}px`,
-                            <span class=""></span>
+                            }" 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>
+                    <span v-if="imgURL" class="text-light-100 dark:text-dark-100">></span>
+                    <div v-if="imgURL" class="relative bg-light-red dark:bg-dark-red bg-no-repeat w-32 h-32" :style="{backgroundImage: `url(${imgURL})`, backgroundPosition: `left -${posX + (posX + size)}px top -${posY + (256 / size)}px`, backgroundSize: `${256 / size * 100}%`}"></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">
                     <div class="flex gap-3">