From 8fee6ca5f1c1e2889d03ee4d42df007de6c8bcf7 Mon Sep 17 00:00:00 2001
From: Peaceultime <clem31470@gmail.com>
Date: Sun, 29 Sep 2024 14:27:51 +0200
Subject: [PATCH] Progressing on picture cropping selection

---
 db.sqlite              | Bin 860160 -> 860160 bytes
 pages/user/profile.vue |  24 +++++++++++++-----------
 2 files changed, 13 insertions(+), 11 deletions(-)

diff --git a/db.sqlite b/db.sqlite
index 81c2c5d001e1b0d58939bab400f17f7e7aa31def..84a1d69093811800669d5f2ed5536269cc64f69f 100644
GIT binary patch
delta 3686
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

delta 4611
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
V)x>Ud)DZF>zE{p!yzOTDzW|Sc$WZ_Q

diff --git a/pages/user/profile.vue b/pages/user/profile.vue
index 660514c..4478ecc 100644
--- a/pages/user/profile.vue
+++ b/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> = {
-    '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));
+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), 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">