Peaceultime
/
obsidian-visualiser
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Progress on image cropping

This commit is contained in:
Peaceultime 2024-09-12 17:24:24 +02:00
parent 6856d3b9af
commit 0fb4246d26
1 changed files with 57 additions and 17 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

68
pages/user/profile.vue
View File

@ -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="{
<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: `${sizeX}px`,
height: `${sizeX}px`,
width: `${size}px`,
height: `${size}px`,
}" v-drag="dragHandler">
<span class=""></span>
<span class=""></span>
<span class=""></span>
<span class=""></span>
</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">