Progress on image cropping
This commit is contained in:
parent
6856d3b9af
commit
0fb4246d26
|
|
@ -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);
|
||||
posY.value = clamp(posY.value + y, 0, 256 - sizeY.value);
|
||||
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[]}) => 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-[256px] h-[256px] relative">
|
||||
<Picture :src="imgURL ?? undefined" :width=256 :height=256 class="inline-block select-none">
|
||||
<div class="w-[640px] h-[320px] flex justify-center gap-4 items-center">
|
||||
<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>
|
||||
</Picture>
|
||||
<div v-if="imgURL" class="border-2 border-dashed border-light-50 dark:border-dark-50 absolute cursor-move" :style="{
|
||||
top: `${posY}px`,
|
||||
left: `${posX}px`,
|
||||
width: `${sizeX}px`,
|
||||
height: `${sizeX}px`,
|
||||
}" v-drag="dragHandler">
|
||||
<span class=""></span>
|
||||
<span class=""></span>
|
||||
<span class=""></span>
|
||||
<span class=""></span>
|
||||
<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>
|
||||
<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">
|
||||
|
|
|
|||
Loading…
Reference in New Issue