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

Filter ProseA hover cards with the provided hash

This commit is contained in:
Peaceultime 2024-12-17 22:39:17 +01:00
parent cb2c19fada
commit 7bdf6ccd13
8 changed files with 130 additions and 128 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

BIN
bun.lockb
View File

Binary file not shown.

73
components/Markdown.vue
View File

@ -1,26 +1,49 @@
<template>
<template v-if="content && content.length > 0">
<Suspense :timeout="0">
<MarkdownRenderer #default :key="key" v-if="node" :node="node" :proses="proses"></MarkdownRenderer>
<template #fallback><Loading /></template>
</Suspense>
</template>
</template>
<script setup lang="ts">
import { hash } from 'ohash'
const { content } = defineProps({
content: {
type: String,
required: true,
},
proses: {
type: Object
}
})
const parser = useMarkdown();
const key = computed(() => hash(content));
const node = computed(() => content ? parser(content) : undefined);
</script>
<template v-if="content && content.length > 0">
<div><MarkdownRenderer #default v-if="data" :node="data" :proses="proses"></MarkdownRenderer></div>
</template>
</template>
<script setup lang="ts">
import type { Component } from 'vue';
import { heading } from 'hast-util-heading';
import { headingRank } from 'hast-util-heading-rank';
import { parseId } from '~/shared/general.utils';
import type { Root } from 'hast';
const { content, proses, filter } = defineProps<{
content: string
proses?: Array<string | Component>
filter?: string
}>();
const parser = useMarkdown(), data = ref<Root>();
const node = computed(() => content ? parser(content) : undefined);
watch([node], () => {
if(!node.value)
data.value = undefined;
else if(!filter)
{
data.value = node.value;
}
else
{
const start = node.value?.children.findIndex(e => heading(e) && parseId(e.properties.id as string | undefined) === filter) ?? -1;
if(start === -1)
data.value = node.value;
else
{
let end = start;
const rank = headingRank(node.value.children[start])!;
while(end < node.value.children.length)
{
end++;
if(heading(node.value.children[end]) && headingRank(node.value.children[end])! >= rank)
break;
}
data.value = { ...node.value, children: node.value.children.slice(start, end) };
}
}
}, { immediate: true, });
</script>

92
components/canvas/Canvas.vue
View File

@ -154,71 +154,63 @@ const pinchHandler = usePinch(({ event, offset: [z] }: { event: Event, offset: n
zoom.value = clamp(z / 2048, minZoom.value, 3);
}, {
domTarget: canvas,
eventOptions: { passive: false, }
})
const dragHandler = useDrag(({ event, delta: [x, y] }: { event: Event, delta: number[] }) => {
dispX.value += x / zoom.value;
dispY.value += y / zoom.value;
}, {
domTarget: canvas,
eventOptions: { passive: false, }
})
const wheelHandler = useWheel(({ event, delta: [x, y] }: { event: Event, delta: number[] }) => {
zoom.value = clamp(zoom.value + y * -0.001, minZoom.value, 3);
}, {
domTarget: canvas,
eventOptions: { passive: false, }
})
</script>
<template>
<Suspense>
<template #default>
<div id="canvas" ref="canvas" class="absolute top-0 left-0 overflow-hidden w-full h-full touch-none"
:style="{ '--zoom-multiplier': (1 / Math.pow(zoom, 0.7)) }">
<div class="border border-light-35 dark:border-dark-35 bg-light-10 dark:bg-dark-10 absolute sm:top-2 top-10 left-2 z-[35] overflow-hidden">
<Tooltip message="Zoom avant" side="right">
<div @click="zoom = clamp(zoom * 1.1, minZoom, 3)" class="w-8 h-8 flex justify-center items-center p-2 hover:bg-light-30 dark:hover:bg-dark-30 cursor-pointer">
<Icon icon="radix-icons:plus" />
</div>
</Tooltip>
<Tooltip message="Reset" side="right">
<div @click="zoom = 1" class="w-8 h-8 flex justify-center items-center p-2 hover:bg-light-30 dark:hover:bg-dark-30 cursor-pointer">
<Icon icon="radix-icons:reload" />
</div>
</Tooltip>
<Tooltip message="Tout contenir" side="right">
<div @click="reset" class="w-8 h-8 flex justify-center items-center p-2 hover:bg-light-30 dark:hover:bg-dark-30 cursor-pointer">
<Icon icon="radix-icons:corners" />
</div>
</Tooltip>
<Tooltip message="Zoom arrière" side="right">
<div @click="zoom = clamp(zoom * 0.9, minZoom, 3)" class="w-8 h-8 flex justify-center items-center p-2 hover:bg-light-30 dark:hover:bg-dark-30 cursor-pointer">
<Icon icon="radix-icons:minus" />
</div>
</Tooltip>
</div>
<div class="absolute top-0 left-0 w-full h-full origin-center pointer-events-none *:pointer-events-auto *:select-none"
:style="{transform: `scale(${zoom}) translate(${dispX}px, ${dispY}px)`}">
<div>
<CanvasNode v-for="node of props.canvas.nodes" :key="node.id" :node="node" :zoom="zoom" />
<div>
<div id="canvas" ref="canvas" class="absolute top-0 left-0 overflow-hidden w-full h-full touch-none"
:style="{ '--zoom-multiplier': (1 / Math.pow(zoom, 0.7)) }">
<div class="border border-light-35 dark:border-dark-35 bg-light-10 dark:bg-dark-10 absolute sm:top-2 top-10 left-2 z-[35] overflow-hidden">
<Tooltip message="Zoom avant" side="right">
<div @click="zoom = clamp(zoom * 1.1, minZoom, 3)" class="w-8 h-8 flex justify-center items-center p-2 hover:bg-light-30 dark:hover:bg-dark-30 cursor-pointer">
<Icon icon="radix-icons:plus" />
</div>
<template v-for="edge of props.canvas.edges">
<div :key="edge.id" v-if="edge.label" class="absolute z-10"
:style="{ transform: labelCenter(getNode(edge.fromNode)!, edge.fromSide, getNode(edge.toNode)!, edge.toSide) }">
<div class="relative bg-light-20 dark:bg-dark-20 border border-light-35 dark:border-dark-35 px-4 py-2 -translate-x-[50%] -translate-y-[50%]">{{ edge.label }}</div>
</div>
</template>
<svg class="absolute top-0 left-0 overflow-visible w-full h-full origin-top pointer-events-none">
<CanvasEdge v-for="edge of props.canvas.edges" :key="edge.id"
:path="path(getNode(edge.fromNode)!, edge.fromSide, getNode(edge.toNode)!, edge.toSide)"
:color="edge.color" :label="edge.label" />
</svg>
</div>
</Tooltip>
<Tooltip message="Reset" side="right">
<div @click="zoom = 1" class="w-8 h-8 flex justify-center items-center p-2 hover:bg-light-30 dark:hover:bg-dark-30 cursor-pointer">
<Icon icon="radix-icons:reload" />
</div>
</Tooltip>
<Tooltip message="Tout contenir" side="right">
<div @click="reset" class="w-8 h-8 flex justify-center items-center p-2 hover:bg-light-30 dark:hover:bg-dark-30 cursor-pointer">
<Icon icon="radix-icons:corners" />
</div>
</Tooltip>
<Tooltip message="Zoom arrière" side="right">
<div @click="zoom = clamp(zoom * 0.9, minZoom, 3)" class="w-8 h-8 flex justify-center items-center p-2 hover:bg-light-30 dark:hover:bg-dark-30 cursor-pointer">
<Icon icon="radix-icons:minus" />
</div>
</Tooltip>
</div>
</template>
<template #fallback>
<div class="loading"></div>
</template>
</Suspense>
<div class="absolute top-0 left-0 w-full h-full origin-center pointer-events-none *:pointer-events-auto *:select-none"
:style="{transform: `scale(${zoom}) translate(${dispX}px, ${dispY}px)`}">
<div>
<CanvasNode v-for="node of props.canvas.nodes" :key="node.id" :node="node" :zoom="zoom" />
</div>
<template v-for="edge of props.canvas.edges">
<div :key="edge.id" v-if="edge.label" class="absolute z-10"
:style="{ transform: labelCenter(getNode(edge.fromNode)!, edge.fromSide, getNode(edge.toNode)!, edge.toSide) }">
<div class="relative bg-light-20 dark:bg-dark-20 border border-light-35 dark:border-dark-35 px-4 py-2 -translate-x-[50%] -translate-y-[50%]">{{ edge.label }}</div>
</div>
</template>
<svg class="absolute top-0 left-0 overflow-visible w-full h-full origin-top pointer-events-none">
<CanvasEdge v-for="edge of props.canvas.edges" :key="edge.id"
:path="path(getNode(edge.fromNode)!, edge.fromSide, getNode(edge.toNode)!, edge.toSide)"
:color="edge.color" :label="edge.label" />
</svg>
</div>
</div>
</div>
</template>

87
components/prose/ProseA.vue
View File

@ -1,33 +1,18 @@
<template>
<NuxtLink class="text-accent-blue inline-flex items-center" v-if="overview"
:to="{ name: 'explore-path', params: { path: overview.path }, hash: hash }" :class="class">
<HoverCard class="max-w-[600px] max-h-[600px] w-full overflow-auto z-[45]" :class="{'overflow-hidden !p-0': overview.type === 'canvas'}" @open="load">
<template #content>
<template v-if="loading">
<Loading />
</template>
<template v-else-if="overview.type === 'markdown'">
<div class="px-10">
<Markdown :content="content!.content" />
</div>
</template>
<template v-else-if="overview.type === 'canvas'">
<div class="w-[600px] h-[600px] relative">
<Canvas :canvas="JSON.parse(content!.content)" />
</div>
</template>
</template>
<template #default>
<slot v-bind="$attrs"></slot>
<Icon class="w-4 h-4 inline-block" v-if="overview && overview.type !== 'markdown'" :icon="iconByType[overview.type]" />
</template>
</HoverCard>
</NuxtLink>
<NuxtLink v-else-if="href" :to="href" :class="class" class="text-accent-blue inline-flex items-center">
<slot v-bind="$attrs"></slot>
<Icon class="w-4 h-4 inline-block" v-if="overview && overview.type !== 'markdown'" :height="20" :width="20" :icon="iconByType[overview.type]" />
</NuxtLink>
<slot :class="class" v-else v-bind="$attrs"></slot>
<NuxtLink class="text-accent-blue inline-flex items-center"
:to="overview ? { name: 'explore-path', params: { path: overview.path }, hash: hash } : href" :class="class">
<HoverCard class="max-w-[600px] max-h-[600px] w-full overflow-auto z-[45]" :class="{'overflow-hidden !p-0': overview?.type === 'canvas'}" @open="load" :disabled="!overview">
<template #content>
<Loading v-if="loading" />
<Markdown v-else-if="overview?.type === 'markdown'" class="px-10" :content="content!.content" :filter="hash.substring(1)" />
<Canvas v-else-if="overview?.type === 'canvas'" class="w-[600px] h-[600px] relative" :canvas="JSON.parse(content!.content)" />
</template>
<template #default>
<slot v-bind="$attrs"></slot>
<Icon class="w-4 h-4 inline-block" v-if="overview && overview.type !== 'markdown'" :icon="iconByType[overview.type]" />
</template>
</HoverCard>
</NuxtLink>
</template>
<script setup lang="ts">
@ -36,41 +21,41 @@ import { Icon } from '@iconify/vue/dist/iconify.js';
import { iconByType } from '#shared/general.utils';
const { href } = defineProps<{
href: string
class?: string
href: string
class?: string
}>();
const { hash, pathname, protocol } = parseURL(href);
const overview = ref<{
path: string;
owner: number;
title: string;
type: "file" | "folder" | "markdown" | "canvas";
navigable: boolean;
private: boolean;
order: number;
visit: number;
path: string;
owner: number;
title: string;
type: "file" | "folder" | "markdown" | "canvas";
navigable: boolean;
private: boolean;
order: number;
visit: number;
}>(), content = ref<{
content: string;
content: string;
}>(), loading = ref(false), fetched = ref(false);
if(!!pathname && !protocol)
{
try {
overview.value = await $fetch(`/api/file/overview/${encodeURIComponent(pathname)}`);
} catch(e) {}
try {
overview.value = await $fetch(`/api/file/overview/${encodeURIComponent(pathname)}`);
} catch(e) {}
}
async function load()
{
if(fetched.value === true)
return;
if(fetched.value === true)
return;
fetched.value = true;
loading.value = true;
try {
content.value = await $fetch(`/api/file/content/${encodeURIComponent(pathname)}`);
} catch(e) { }
loading.value = false;
fetched.value = true;
loading.value = true;
try {
content.value = await $fetch(`/api/file/content/${encodeURIComponent(pathname)}`);
} catch(e) { }
loading.value = false;
}
</script>

BIN
db.sqlite-shm
View File

Binary file not shown.

BIN
db.sqlite-wal
View File

Binary file not shown.

2
package.json
View File

@ -19,6 +19,8 @@
"codemirror": "^6.0.1",
"drizzle-orm": "^0.35.3",
"hast": "^1.0.0",
"hast-util-heading": "^3.0.0",
"hast-util-heading-rank": "^3.0.0",
"lodash.capitalize": "^4.2.1",
"mdast-util-find-and-replace": "^3.0.1",
"nodemailer": "^6.9.16",

4
todo.md
View File

@ -1,8 +1,8 @@
- [x] Mot de passe oublié
- [x] Rename auto des liens au changement de path
- [ ] Autocomplete des liens dans l'editeur
- [ ] Editeur de graphe
- [ ] Filtrage de lien avec le header id
- [ ] Editeur de graphe
- [ ] Autocomplete des liens dans l'editeur
- [ ] Embed de lien (le ![[]] de Obsidian)
- [ ] Rework la structure projet
- [ ] Limite de taille par projet (100 Mo ?)