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

Progressing on picture cropping selection

This commit is contained in:
Peaceultime 2024-09-29 14:27:51 +02:00
parent 0fb4246d26
commit 8fee6ca5f1
2 changed files with 13 additions and 11 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

BIN
db.sqlite
View File

Binary file not shown.

24
pages/user/profile.vue
View File

@ -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">