Progressing on picture cropping selection

pages/user/profile.vue

@@ -33,26 +33,30 @@ const dragHandler = ({ delta: [x, y] }: { delta: number[] }) => {
     posY.value = clamp(posY.value + y, 0, 256 - size.value);
 };
 
-const axisModifier: Record<string, (data: { values: number[]}) => void> = {
+const axisModifier: Record<string, (data: { values: number[], delta: number[] }) => void> = {
-    'nw': ({values: [x, y]}: { values: number[]}): void => {
+    'nw': ({values: [x, y], delta: [_x, _y]}: { values: number[], delta: number[] }): void => {
-        x = clamp(x - left.value, 0, 256) - posX.value;
+        x = clamp(x - left.value, 0, 256);
-        y = clamp(y - top.value, 0, 256) - posY.value;
+        y = clamp(y - top.value, 0, 256);
-        size.value = clamp(Math.min(x, y), 0, 256 - Math.max(posX.value, posY.value));
+
+        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), 0, 256 - Math.max(posX.value, 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), 0, 256 - Math.max(posX.value, 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), 0, 256 - Math.max(posX.value, posY.value));
+        size.value = clamp(Math.min(x, y), 128, 256 - Math.max(posX.value, posY.value));
     },
 };
 
@@ -71,7 +75,7 @@ const axisOptions: Partial<InternalDragOptions> = {
                 <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">
+                <div class="w-[640px] h-[320px] flex justify-center gap-4 items-center mb-6">
                     <div class="w-[256px] h-[256px] relative" ref="bounds">
                         <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>
@@ -93,8 +97,6 @@ const axisOptions: Partial<InternalDragOptions> = {
                             <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">