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

Small fixes

This commit is contained in:
Peaceultime 2024-10-28 09:21:44 +01:00
parent fa2d8e5035
commit fef8c092a9
3 changed files with 16 additions and 75 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

16
components/canvas/CanvasRenderer.vue
View File

@ -149,14 +149,6 @@ dark:border-dark-purple
*/
const dragHandler = useDrag(({ event: Event, delta: [x, y] }: { event: Event, delta: number[] }) => {
event?.preventDefault();
dispX.value += x / zoom.value;
dispY.value += y / zoom.value;
}, {
domTarget: canvas,
eventOptions: { passive: false, }
})
const pinchHandler = usePinch(({ event: Event, offset: [z] }: { event: Event, offset: number[] }) => {
event?.preventDefault();
console.log(z);
@ -172,6 +164,14 @@ const wheelHandler = useWheel(({ event: Event, delta: [x, y] }: { event: Event,
domTarget: canvas,
eventOptions: { passive: false, }
})
const dragHandler = useDrag(({ event: Event, delta: [x, y] }: { event: Event, delta: number[] }) => {
event?.preventDefault();
dispX.value += x / zoom.value;
dispY.value += y / zoom.value;
}, {
domTarget: canvas,
eventOptions: { passive: false, }
})
</script>
<template>

75
pages/user/profile.vue
View File

@ -1,5 +1,5 @@
<script setup lang="ts">
import type { DragState, InternalDragOptions } from '@vueuse/gesture';
import { format } from '#imports';
definePageMeta({
guestsGoesTo: '/user/login'
@ -9,11 +9,8 @@ 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'), bounds = useTemplateRef('bounds');
const dialog = useTemplateRef('dialog');
const files = ref<File[]>([]), imgURL = ref<string |null>(null);
const { top, left, update } = useElementBounding(bounds);
const posX = ref(0), posY = ref(0), size = ref(128);
async function loadImage(f: File[])
{
@ -22,46 +19,10 @@ async function loadImage(f: File[])
{
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 - size.value);
posY.value = clamp(posY.value + y, 0, 256 - size.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), 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), 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), 128, 256 - Math.max(posX.value, posY.value));
},
};
const axisOptions: Partial<InternalDragOptions> = {
bounds: [[0, 0], [256, 256]],
}
</script>
@ -70,32 +31,12 @@ const axisOptions: Partial<InternalDragOptions> = {
<Title>Votre profil</Title>
</Head>
<div v-if="user" class="flex-1 grid gap-4 grid-cols-3">
<div class="border border-light-35 dark:border-dark-35 p-4 flex gap-4 col-span-2">
<Picture @click="() => dialog?.show()" :src="`/users/${user?.id}/normal.jpg`" :width=128 :height=128 class="inline-block hover:bg-light-70 hover:bg-opacity-50 hover:opacity-50 transition-all cursor-pointer">
<Icon :icon="`icons/unknown`" :width=128 :height=128></Icon>
</Picture>
<div class="border border-light-35 dark:border-dark-35 p-4 flex gap-4 col-span-2 self-start">
<Image @click="() => dialog?.show()" :src="`/users/${user?.id}/normal.jpg`" :width=128 :height=128 class="inline-flex hover:bg-light-70 hover:bg-opacity-50 hover:opacity-50 transition-all cursor-pointer" fallback-icon="user-unknown" />
<Dialog :close-icon="true" :focused="false" ref="dialog">
<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>
</Picture>
<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 class="w-[256px] h-[256px]">
<Image :src="imgURL" :width="256" :height="256" fallback-icon="user-unknown" class="inline-block select-none" :style="{ filter: `saturate(0.3) contrast(0.5)` }"/>
</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">
@ -115,8 +56,8 @@ const axisOptions: Partial<InternalDragOptions> = {
<span>Inscrit depuis le {{ format(new Date(user.signin_timestamp), 'dd/MM/yyyy') }}</span>
</div>
</div>
<div class="p-4 flex gap-4 flex-col">
<button @click="clear()" class="py-1 transition-all duration-200 mb-4 border border-light-35 dark:border-dark-35 bg-light-20 dark:bg-dark-20 hover:border-light-50 dark:hover:border-dark-50 hover:bg-light-30 dark:hover:bg-dark-30">Se déconnecter</button>
<div class="px-4 py-2 flex gap-4 flex-col">
<button @click="clear()" class="py-1 transition-all duration-200 mb-3 border border-light-35 dark:border-dark-35 bg-light-20 dark:bg-dark-20 hover:border-light-50 dark:hover:border-dark-50 hover:bg-light-30 dark:hover:bg-dark-30">Se déconnecter</button>
<button @click="" class="py-1 transition-all duration-200 border border-light-35 dark:border-dark-35 bg-light-20 dark:bg-dark-20 hover:border-light-50 dark:hover:border-dark-50 hover:bg-light-30 dark:hover:bg-dark-30">Mettre à jour le profil</button>
<button @click="" class="py-1 transition-all duration-200 border border-light-35 dark:border-dark-35 bg-light-20 dark:bg-dark-20 hover:border-light-red dark:hover:border-dark-red hover:bg-light-30 dark:hover:bg-dark-30 text-light-red dark:text-dark-red">Supprimer le compte</button>
</div>

0
public/icons/unknown.svg → public/icons/user-unknown.svg
View File

Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 362 B

After

Width:  |  Height:  |  Size: 362 B