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

New Canvas zoom with dbl click and starting to work on tag API

Browse Source
This commit is contained in:
Peaceultime
2024-09-03 16:42:57 +02:00
parent c091a6d261
commit 2b293a0c1a
16 changed files with 353 additions and 77 deletions
Download Patch File Download Diff File Expand all files Collapse all files

35
components/explorer/PreviewContent.vue
View File

@@ -1,15 +1,15 @@
<template>
<Teleport to="#teleports" v-if="display && (!fetched || loaded)">
<div class="absolute border-2 border-light-35 dark:border-dark-35 max-w-[550px] max-h-[450px] bg-light-0 dark:bg-dark-0 text-light-100 dark:text-dark-100" :class="[{'is-loaded': fetched}, type === 'Markdown' ? 'overflow-auto' : 'overflow-hidden']" :style="pos"
<div class="absolute border-2 border-light-35 dark:border-dark-35 max-w-[550px] max-h-[450px] bg-light-0 dark:bg-dark-0 text-light-100 dark:text-dark-100" :class="[{'is-loaded': fetched}, file?.type === 'Markdown' ? 'overflow-auto' : 'overflow-hidden']" :style="pos"
@mouseenter="debounce(show, 250)" @mouseleave="debounce(() => display = false, 250)">
<div v-if="pending" class="loading"></div>
<template v-else-if="content !==''">
<div v-if="type === 'Markdown'" class="p-6 ms-6">
<ProseH1>{{ title }}</ProseH1>
<Markdown v-model="content"></Markdown>
<template v-else-if="!!file">
<div v-if="file.type === 'Markdown'" class="p-6 ms-6">
<ProseH1>{{ file.title }}</ProseH1>
<Markdown v-model="file.content"></Markdown>
</div>
<div v-else-if="type === 'Canvas'" class="w-[550px] h-[450px] overflow-hidden">
<CanvasRenderer :canvas="JSON.parse(content) " />
<div v-else-if="file.type === 'Canvas'" class="w-[550px] h-[450px] overflow-hidden">
<CanvasRenderer :canvas="JSON.parse(file.content) " />
</div>
<div class="h-100 w-100 flex flex-1 flex-col justify-center items-center" v-else>
<div class="text-3xl font-extralight tracking-wide text-light-60 dark:text-dark-60">Fichier vide</div>
@@ -28,6 +28,7 @@
</template>
<script setup lang="ts">
import type { CommentedFile } from '~/types/api';
const props = defineProps({
project: {
@@ -43,30 +44,20 @@ const props = defineProps({
required: false,
}
})
const content = ref(''), title = ref(''), type = ref(''), display = ref(false), pending = ref(false), fetched = ref(false);
const file = ref<CommentedFile | null>();
const display = ref(false), pending = ref(false), fetched = ref(false);
const el = ref(), pos = ref<Record<string, string>>();
const loaded = computed(() => !pending.value && fetched.value && content.value !== '');
const loaded = computed(() => !pending.value && fetched.value && file.value !== undefined);
async function fetch()
{
fetched.value = true;
pending.value = true;
const data = await $fetch(`/api/project/${props.project}/file`, {
method: 'get',
query: {
path: props.path,
},
});
const { data } = await useFetch(`/api/project/${props.project}/file/${encodeURIComponent(props.path)}`);
pending.value = false;
if(data && data[0])
{
content.value = data[0].content;
title.value = data[0].title;
type.value = data[0].type;
}
file.value = data.value;
}
async function show()
{