From 031a51c2fee1ebd110c8edb0dc42552bdb641fef Mon Sep 17 00:00:00 2001
From: Peaceultime <clem31470@gmail.com>
Date: Wed, 18 Dec 2024 17:35:34 +0100
Subject: [PATCH] Change explorer pages structure to isolates them from there
 renderers allowing to fetch data outside of the renderers

---
 bun.lockb                            | Bin 454111 -> 454111 bytes
 components/Markdown.vue              |  49 ------
 components/MarkdownRenderer.vue      | 154 ++++++-------------
 components/ProsesRenderer.vue        | 115 ++++++++++++++
 components/canvas/Canvas.vue         | 216 ---------------------------
 components/canvas/CanvasNode.vue     |   2 +-
 components/canvas/CanvasRenderer.vue | 109 ++++++++++++++
 components/page/Canvas.vue           | 165 ++++++++++++++++++++
 components/page/Markdown.vue         |  26 ++++
 components/prose/ProseA.vue          |   2 +-
 db.sqlite-shm                        | Bin 32768 -> 32768 bytes
 db.sqlite-wal                        | Bin 313152 -> 387312 bytes
 pages/explore/[...path].vue          |  40 +----
 pages/explore/edit/index.vue         |   2 +-
 todo.md                              |   2 +-
 15 files changed, 470 insertions(+), 412 deletions(-)
 delete mode 100644 components/Markdown.vue
 create mode 100644 components/ProsesRenderer.vue
 delete mode 100644 components/canvas/Canvas.vue
 create mode 100644 components/canvas/CanvasRenderer.vue
 create mode 100644 components/page/Canvas.vue
 create mode 100644 components/page/Markdown.vue

diff --git a/bun.lockb b/bun.lockb
index 4b7bf2d29eb4dd11227d001b50758b39836c2f20..a69b11ad8f6ec94e80d9b76795a45a4126438541 100644
GIT binary patch
delta 39
ucmcbATl)TO>4p}@7N!>FEi6lCvNOgR>lx@7w6B@T0>rG_*UV%y4gml`We+j{

delta 39
qcmcbATl)TO>4p}@7N!>FEi6lCvNJJ&LHnASEI`b<ea%cZ;}8HUJq_jn

diff --git a/components/Markdown.vue b/components/Markdown.vue
deleted file mode 100644
index d06cf89..0000000
--- a/components/Markdown.vue
+++ /dev/null
@@ -1,49 +0,0 @@
-<template>
-	<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>
\ No newline at end of file
diff --git a/components/MarkdownRenderer.vue b/components/MarkdownRenderer.vue
index 70d8d8b..6253c6e 100644
--- a/components/MarkdownRenderer.vue
+++ b/components/MarkdownRenderer.vue
@@ -1,115 +1,49 @@
-<script lang="ts">
-import type { RootContent, Root } from 'hast';
-import { Text, Comment } from 'vue';
+<template>
+	<div v-if="content && content.length > 0">
+		<ProsesRenderer #default v-if="data" :node="data" :proses="proses" />
+	</div>
+</template>
 
-import ProseP from '~/components/prose/ProseP.vue';
-import ProseA from '~/components/prose/ProseA.vue';
-import ProseBlockquote from '~/components/prose/ProseBlockquote.vue';
-import ProseCallout from './prose/ProseCallout.vue';
-import ProseCode from '~/components/prose/ProseCode.vue';
-import ProsePre from '~/components/prose/ProsePre.vue';
-import ProseEm from '~/components/prose/ProseEm.vue';
-import ProseH1 from '~/components/prose/ProseH1.vue';
-import ProseH2 from '~/components/prose/ProseH2.vue';
-import ProseH3 from '~/components/prose/ProseH3.vue';
-import ProseH4 from '~/components/prose/ProseH4.vue';
-import ProseH5 from '~/components/prose/ProseH5.vue';
-import ProseH6 from '~/components/prose/ProseH6.vue';
-import ProseHr from '~/components/prose/ProseHr.vue';
-import ProseImg from '~/components/prose/ProseImg.vue';
-import ProseUl from '~/components/prose/ProseUl.vue';
-import ProseOl from '~/components/prose/ProseOl.vue';
-import ProseLi from '~/components/prose/ProseLi.vue';
-import ProseSmall from './prose/ProseSmall.vue';
-import ProseStrong from '~/components/prose/ProseStrong.vue';
-import ProseTable from '~/components/prose/ProseTable.vue';
-import ProseTag from '~/components/prose/ProseTag.vue';
-import ProseThead from '~/components/prose/ProseThead.vue';
-import ProseTbody from '~/components/prose/ProseTbody.vue';
-import ProseTd from '~/components/prose/ProseTd.vue';
-import ProseTh from '~/components/prose/ProseTh.vue';
-import ProseTr from '~/components/prose/ProseTr.vue';
-import ProseScript from '~/components/prose/ProseScript.vue';
+<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 proseList = {
-    "p": ProseP,
-    "a": ProseA,
-    "blockquote": ProseBlockquote,
-    "callout": ProseCallout,
-    "code": ProseCode,
-    "pre": ProsePre,
-    "em": ProseEm,
-    "h1": ProseH1,
-    "h2": ProseH2,
-    "h3": ProseH3,
-    "h4": ProseH4,
-    "h5": ProseH5,
-    "h6": ProseH6,
-    "hr": ProseHr,
-    "img": ProseImg,
-    "ul": ProseUl,
-    "ol": ProseOl,
-    "li": ProseLi,
-    "small": ProseSmall,
-    "strong": ProseStrong,
-    "table": ProseTable,
-    "tag": ProseTag,
-    "thead": ProseThead,
-    "tbody": ProseTbody,
-    "td": ProseTd,
-    "th": ProseTh,
-    "tr": ProseTr,
-    "script": ProseScript
-};
+const { content, proses, filter } = defineProps<{
+	content: string
+	proses?: Array<string | Component>
+	filter?: string
+}>();
 
-export default defineComponent({
-    name: 'MarkdownRenderer',
-    props: {
-        node: {
-            type: Object,
-            required: true
-        },
-        proses: {
-            type: Object,
-            default: () => ({})
-        }
-    },
-    async setup(props) {
-        if(props.proses)
-        {
-            for(const prose of Object.keys(props.proses))
-            {
-                if(typeof props.proses[prose] === 'string')
-                    props.proses[prose] = await resolveComponent(props.proses[prose]);
-            }
-        }
-        return { tags: Object.assign({}, proseList, props.proses) };
-    },
-    render(ctx: any) {
-        const { node, tags } = ctx;
+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(!node)
-            return null;
-
-        return h('div', null, {default: () => (node as Root).children.map(e => renderNode(e, tags)).filter(e => !!e)});
-    }
-});
-
-function renderNode(node: RootContent, tags: Record<string, any>): VNode | undefined
-{
-    if(node.type === 'text' && node.value.length > 0 && node.value !== '\n')
-    {
-        return h(Text, node.value);
-    }
-    else if(node.type === 'comment' && node.value.length > 0 && node.value !== '\n')
-    {
-        return h(Comment, node.value);
-    }
-    else if(node.type === 'element')
-    {
-        return h(tags[node.tagName] ?? node.tagName, { ...node.properties, class: node.properties.className }, { default: () => node.children.map(e => renderNode(e, tags)).filter(e => !!e) });
-    }
-
-    return undefined;
-}
+		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>
\ No newline at end of file
diff --git a/components/ProsesRenderer.vue b/components/ProsesRenderer.vue
new file mode 100644
index 0000000..70d8d8b
--- /dev/null
+++ b/components/ProsesRenderer.vue
@@ -0,0 +1,115 @@
+<script lang="ts">
+import type { RootContent, Root } from 'hast';
+import { Text, Comment } from 'vue';
+
+import ProseP from '~/components/prose/ProseP.vue';
+import ProseA from '~/components/prose/ProseA.vue';
+import ProseBlockquote from '~/components/prose/ProseBlockquote.vue';
+import ProseCallout from './prose/ProseCallout.vue';
+import ProseCode from '~/components/prose/ProseCode.vue';
+import ProsePre from '~/components/prose/ProsePre.vue';
+import ProseEm from '~/components/prose/ProseEm.vue';
+import ProseH1 from '~/components/prose/ProseH1.vue';
+import ProseH2 from '~/components/prose/ProseH2.vue';
+import ProseH3 from '~/components/prose/ProseH3.vue';
+import ProseH4 from '~/components/prose/ProseH4.vue';
+import ProseH5 from '~/components/prose/ProseH5.vue';
+import ProseH6 from '~/components/prose/ProseH6.vue';
+import ProseHr from '~/components/prose/ProseHr.vue';
+import ProseImg from '~/components/prose/ProseImg.vue';
+import ProseUl from '~/components/prose/ProseUl.vue';
+import ProseOl from '~/components/prose/ProseOl.vue';
+import ProseLi from '~/components/prose/ProseLi.vue';
+import ProseSmall from './prose/ProseSmall.vue';
+import ProseStrong from '~/components/prose/ProseStrong.vue';
+import ProseTable from '~/components/prose/ProseTable.vue';
+import ProseTag from '~/components/prose/ProseTag.vue';
+import ProseThead from '~/components/prose/ProseThead.vue';
+import ProseTbody from '~/components/prose/ProseTbody.vue';
+import ProseTd from '~/components/prose/ProseTd.vue';
+import ProseTh from '~/components/prose/ProseTh.vue';
+import ProseTr from '~/components/prose/ProseTr.vue';
+import ProseScript from '~/components/prose/ProseScript.vue';
+
+const proseList = {
+    "p": ProseP,
+    "a": ProseA,
+    "blockquote": ProseBlockquote,
+    "callout": ProseCallout,
+    "code": ProseCode,
+    "pre": ProsePre,
+    "em": ProseEm,
+    "h1": ProseH1,
+    "h2": ProseH2,
+    "h3": ProseH3,
+    "h4": ProseH4,
+    "h5": ProseH5,
+    "h6": ProseH6,
+    "hr": ProseHr,
+    "img": ProseImg,
+    "ul": ProseUl,
+    "ol": ProseOl,
+    "li": ProseLi,
+    "small": ProseSmall,
+    "strong": ProseStrong,
+    "table": ProseTable,
+    "tag": ProseTag,
+    "thead": ProseThead,
+    "tbody": ProseTbody,
+    "td": ProseTd,
+    "th": ProseTh,
+    "tr": ProseTr,
+    "script": ProseScript
+};
+
+export default defineComponent({
+    name: 'MarkdownRenderer',
+    props: {
+        node: {
+            type: Object,
+            required: true
+        },
+        proses: {
+            type: Object,
+            default: () => ({})
+        }
+    },
+    async setup(props) {
+        if(props.proses)
+        {
+            for(const prose of Object.keys(props.proses))
+            {
+                if(typeof props.proses[prose] === 'string')
+                    props.proses[prose] = await resolveComponent(props.proses[prose]);
+            }
+        }
+        return { tags: Object.assign({}, proseList, props.proses) };
+    },
+    render(ctx: any) {
+        const { node, tags } = ctx;
+
+        if(!node)
+            return null;
+
+        return h('div', null, {default: () => (node as Root).children.map(e => renderNode(e, tags)).filter(e => !!e)});
+    }
+});
+
+function renderNode(node: RootContent, tags: Record<string, any>): VNode | undefined
+{
+    if(node.type === 'text' && node.value.length > 0 && node.value !== '\n')
+    {
+        return h(Text, node.value);
+    }
+    else if(node.type === 'comment' && node.value.length > 0 && node.value !== '\n')
+    {
+        return h(Comment, node.value);
+    }
+    else if(node.type === 'element')
+    {
+        return h(tags[node.tagName] ?? node.tagName, { ...node.properties, class: node.properties.className }, { default: () => node.children.map(e => renderNode(e, tags)).filter(e => !!e) });
+    }
+
+    return undefined;
+}
+</script>
\ No newline at end of file
diff --git a/components/canvas/Canvas.vue b/components/canvas/Canvas.vue
deleted file mode 100644
index db236c3..0000000
--- a/components/canvas/Canvas.vue
+++ /dev/null
@@ -1,216 +0,0 @@
-<script setup lang="ts">
-import { useDrag, usePinch, useWheel } from '@vueuse/gesture';
-import type { CanvasContent, CanvasNode } from '~/types/canvas';
-import { Icon } from '@iconify/vue/dist/iconify.js';
-import { clamp } from '#shared/general.utils';
-
-interface Props
-{
-    canvas: CanvasContent;
-}
-const props = defineProps<Props>();
-
-const dispX = ref(0), dispY = ref(0), minZoom = ref(0.1), zoom = ref(0.5);
-const canvas = useTemplateRef('canvas');
-
-const reset = (_: MouseEvent) => {
-    zoom.value = minZoom.value; 
-
-    dispX.value = 0; 
-    dispY.value = 0;
-}
-function edgePos(side: 'bottom' | 'top' | 'left' | 'right', pos: { x: number, y: number }, offset: number): { x: number, y: number } {
-    switch (side) {
-        case "left":
-            return {
-                x: pos.x - offset,
-                y: pos.y
-            };
-        case "right":
-            return {
-                x: pos.x + offset,
-                y: pos.y
-            };
-        case "top":
-            return {
-                x: pos.x,
-                y: pos.y - offset
-            };
-        case "bottom":
-            return {
-                x: pos.x,
-                y: pos.y + offset
-            }
-    }
-}
-function getNode(id: string): CanvasNode | undefined
-{
-    return props.canvas.nodes.find(e => e.id === id);
-}
-function posFromDir(e: { minX: number, minY: number, maxX: number, maxY: number }, t: 'bottom' | 'top' | 'left' | 'right'): { x: number, y: number } {
-    switch (t) {
-        case "top":
-            return { x: (e.minX + e.maxX) / 2, y: e.minY };
-        case "right":
-            return { x: e.maxX, y: (e.minY + e.maxY) / 2 };
-        case "bottom":
-            return { x: (e.minX + e.maxX) / 2, y: e.maxY };
-        case "left":
-            return { x: e.minX, y: (e.minY + e.maxY) / 2 };
-    }
-}
-function getBbox(node: CanvasNode): { minX: number, minY: number, maxX: number, maxY: number } {
-    return { minX: node.x, minY: node.y, maxX: node.x + node.width, maxY: node.y + node.height };
-}
-function path(from: CanvasNode, fromSide: 'bottom' | 'top' | 'left' | 'right', to: CanvasNode, toSide: 'bottom' | 'top' | 'left' | 'right'): any {
-    if(from === undefined || to === undefined)
-    {
-        return {
-            path: '',
-            from: {},
-            to: {},
-            toSide: '',
-        }
-    }
-    const start = posFromDir(getBbox(from), fromSide), end = posFromDir(getBbox(to), toSide);
-    return bezier(start, fromSide, end, toSide);
-}
-function bezier(from: { x: number, y: number }, fromSide: 'bottom' | 'top' | 'left' | 'right', to: { x: number, y: number }, toSide: 'bottom' | 'top' | 'left' | 'right'): any {
-    const r = Math.hypot(from.x - to.x, from.y - to.y), o = clamp(r / 2, 70, 150), a = edgePos(fromSide, from, o), s = edgePos(toSide, to, o);
-    return {
-        path: `M${from.x},${from.y} C${a.x},${a.y} ${s.x},${s.y} ${to.x},${to.y}`,
-        from: from,
-        to: to,
-        side: toSide,
-    };
-}
-function labelCenter(from: CanvasNode, fromSide: 'bottom' | 'top' | 'left' | 'right', to: CanvasNode, toSide: 'bottom' | 'top' | 'left' | 'right'): string {
-    const start = posFromDir(getBbox(from), fromSide), end = posFromDir(getBbox(to), toSide);
-    const len = Math.hypot(start.x - end.x, start.y - end.y), offset = clamp(len / 2, 70, 150), b = edgePos(fromSide, start, offset), s = edgePos(toSide, end, offset);
-    const center = getCenter(start, end, b, s, 0.5);
-    return `translate(${center.x}px, ${center.y}px)`;
-}
-function getCenter(n: { x: number, y: number }, i: { x: number, y: number }, r: { x: number, y: number }, o: { x: number, y: number }, e: number): { x: number, y: number } {
-    const a = 1 - e, s = a * a * a, l = 3 * e * a * a, c = 3 * e * e * a, u = e * e * e;
-    return {
-        x: s * n.x + l * r.x + c * o.x + u * i.x,
-        y: s * n.y + l * r.y + c * o.y + u * i.y
-    };
-}
-/*
-
-stroke-light-red
-stroke-light-orange
-stroke-light-yellow
-stroke-light-green
-stroke-light-cyan
-stroke-light-purple
-dark:stroke-dark-red
-dark:stroke-dark-orange
-dark:stroke-dark-yellow
-dark:stroke-dark-green
-dark:stroke-dark-cyan
-dark:stroke-dark-purple
-fill-light-red
-fill-light-orange
-fill-light-yellow
-fill-light-green
-fill-light-cyan
-fill-light-purple
-dark:fill-dark-red
-dark:fill-dark-orange
-dark:fill-dark-yellow
-dark:fill-dark-green
-dark:fill-dark-cyan
-dark:fill-dark-purple
-bg-light-red
-bg-light-orange
-bg-light-yellow
-bg-light-green
-bg-light-cyan
-bg-light-purple
-dark:bg-dark-red
-dark:bg-dark-orange
-dark:bg-dark-yellow
-dark:bg-dark-green
-dark:bg-dark-cyan
-dark:bg-dark-purple
-border-light-red
-border-light-orange
-border-light-yellow
-border-light-green
-border-light-cyan
-border-light-purple
-dark:border-dark-red
-dark:border-dark-orange
-dark:border-dark-yellow
-dark:border-dark-green
-dark:border-dark-cyan
-dark:border-dark-purple
-
-*/
-
-const pinchHandler = usePinch(({ event, offset: [z] }: { event: Event, offset: number[] }) => { 
-    zoom.value = clamp(z / 2048, minZoom.value, 3);
-}, {
-    domTarget: canvas,
-})
-const dragHandler = useDrag(({ event, delta: [x, y] }: { event: Event, delta: number[] }) => { 
-    dispX.value += x / zoom.value;
-    dispY.value += y / zoom.value;
-}, {
-    domTarget: canvas,
-})
-const wheelHandler = useWheel(({ event, delta: [x, y] }: { event: Event, delta: number[] }) => { 
-    zoom.value = clamp(zoom.value + y * -0.001, minZoom.value, 3);
-}, {
-    domTarget: canvas,
-})
-</script>
-
-<template>
-    <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>
-                </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>
-                <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>
\ No newline at end of file
diff --git a/components/canvas/CanvasNode.vue b/components/canvas/CanvasNode.vue
index 6dfcf63..6693ab2 100644
--- a/components/canvas/CanvasNode.vue
+++ b/components/canvas/CanvasNode.vue
@@ -37,7 +37,7 @@ const colors = computed(() => {
             <div class="w-full h-full py-2 px-4 flex !bg-opacity-[0.07]" :class="colors.bg">
                 <template v-if="node.type === 'group' || zoom > Math.min(0.4, 1000 / size)">
                     <div v-if="node.text?.length > 0" class="flex items-center">
-                        <Markdown :content="node.text" />
+                        <MarkdownRenderer :content="node.text" />
                     </div>
                 </template>
                 <template v-else>
diff --git a/components/canvas/CanvasRenderer.vue b/components/canvas/CanvasRenderer.vue
new file mode 100644
index 0000000..ea49109
--- /dev/null
+++ b/components/canvas/CanvasRenderer.vue
@@ -0,0 +1,109 @@
+<template>
+    <div class="absolute top-0 left-0 w-full h-full origin-center pointer-events-none *:pointer-events-auto *:select-none">
+        <div>
+            <CanvasNode v-for="node of canvas.nodes" :key="node.id" :node="node" :zoom="zoom" />
+        </div>
+        <template v-for="edge of canvas.edges">
+            <div :key="edge.id" v-if="edge.label" class="absolute z-10"
+                :style="{ transform: labelCenter(getNode(canvas.nodes, edge.fromNode)!, edge.fromSide, getNode(canvas.nodes, 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 canvas.edges" :key="edge.id"
+                :path="path(getNode(canvas.nodes, edge.fromNode)!, edge.fromSide, getNode(canvas.nodes, edge.toNode)!, edge.toSide)"
+                :color="edge.color" :label="edge.label" />
+        </svg>
+    </div>
+</template>
+
+<script setup lang="ts">
+const { canvas, zoom } = defineProps<{
+    canvas: CanvasContent
+    zoom: number
+}>();
+</script>
+
+<script lang="ts">
+import { clamp } from '~/shared/general.utils';
+import type { CanvasContent, CanvasNode } from '~/types/canvas';
+
+function edgePos(side: 'bottom' | 'top' | 'left' | 'right', pos: { x: number, y: number }, offset: number): { x: number, y: number } {
+    switch (side) {
+        case "left":
+            return {
+                x: pos.x - offset,
+                y: pos.y
+            };
+        case "right":
+            return {
+                x: pos.x + offset,
+                y: pos.y
+            };
+        case "top":
+            return {
+                x: pos.x,
+                y: pos.y - offset
+            };
+        case "bottom":
+            return {
+                x: pos.x,
+                y: pos.y + offset
+            }
+    }
+}
+function getNode(nodes: CanvasNode[], id: string): CanvasNode | undefined
+{
+    return nodes.find(e => e.id === id);
+}
+function posFromDir(e: { minX: number, minY: number, maxX: number, maxY: number }, t: 'bottom' | 'top' | 'left' | 'right'): { x: number, y: number } {
+    switch (t) {
+        case "top":
+            return { x: (e.minX + e.maxX) / 2, y: e.minY };
+        case "right":
+            return { x: e.maxX, y: (e.minY + e.maxY) / 2 };
+        case "bottom":
+            return { x: (e.minX + e.maxX) / 2, y: e.maxY };
+        case "left":
+            return { x: e.minX, y: (e.minY + e.maxY) / 2 };
+    }
+}
+function getBbox(node: CanvasNode): { minX: number, minY: number, maxX: number, maxY: number } {
+    return { minX: node.x, minY: node.y, maxX: node.x + node.width, maxY: node.y + node.height };
+}
+function path(from: CanvasNode, fromSide: 'bottom' | 'top' | 'left' | 'right', to: CanvasNode, toSide: 'bottom' | 'top' | 'left' | 'right'): any {
+    if(from === undefined || to === undefined)
+    {
+        return {
+            path: '',
+            from: {},
+            to: {},
+            toSide: '',
+        }
+    }
+    const start = posFromDir(getBbox(from), fromSide), end = posFromDir(getBbox(to), toSide);
+    return bezier(start, fromSide, end, toSide);
+}
+function bezier(from: { x: number, y: number }, fromSide: 'bottom' | 'top' | 'left' | 'right', to: { x: number, y: number }, toSide: 'bottom' | 'top' | 'left' | 'right'): any {
+    const r = Math.hypot(from.x - to.x, from.y - to.y), o = clamp(r / 2, 70, 150), a = edgePos(fromSide, from, o), s = edgePos(toSide, to, o);
+    return {
+        path: `M${from.x},${from.y} C${a.x},${a.y} ${s.x},${s.y} ${to.x},${to.y}`,
+        from: from,
+        to: to,
+        side: toSide,
+    };
+}
+function labelCenter(from: CanvasNode, fromSide: 'bottom' | 'top' | 'left' | 'right', to: CanvasNode, toSide: 'bottom' | 'top' | 'left' | 'right'): string {
+    const start = posFromDir(getBbox(from), fromSide), end = posFromDir(getBbox(to), toSide);
+    const len = Math.hypot(start.x - end.x, start.y - end.y), offset = clamp(len / 2, 70, 150), b = edgePos(fromSide, start, offset), s = edgePos(toSide, end, offset);
+    const center = getCenter(start, end, b, s, 0.5);
+    return `translate(${center.x}px, ${center.y}px)`;
+}
+function getCenter(n: { x: number, y: number }, i: { x: number, y: number }, r: { x: number, y: number }, o: { x: number, y: number }, e: number): { x: number, y: number } {
+    const a = 1 - e, s = a * a * a, l = 3 * e * a * a, c = 3 * e * e * a, u = e * e * e;
+    return {
+        x: s * n.x + l * r.x + c * o.x + u * i.x,
+        y: s * n.y + l * r.y + c * o.y + u * i.y
+    };
+}
+</script>
\ No newline at end of file
diff --git a/components/page/Canvas.vue b/components/page/Canvas.vue
new file mode 100644
index 0000000..2a5d4cd
--- /dev/null
+++ b/components/page/Canvas.vue
@@ -0,0 +1,165 @@
+<script lang="ts">
+function cancelEvent(e: Event)
+{
+    e.preventDefault();
+}
+</script>
+
+<script setup lang="ts">
+import { useDrag, useHover, usePinch, useWheel } from '@vueuse/gesture';
+import type { CanvasContent } from '~/types/canvas';
+import { Icon } from '@iconify/vue/dist/iconify.js';
+import { clamp } from '#shared/general.utils';
+
+type CanvasOverview = any;
+const { overview } = defineProps<{
+    overview: CanvasOverview
+}>();
+
+const { data: canvas, status } = await useFetch(`/api/file/content/${encodeURIComponent(overview.path)}`, {
+    transform: (input) => input && input.content ? JSON.parse(input?.content) as CanvasContent : undefined
+});
+
+const { user } = useUserSession();
+const isOwner = computed(() => user.value?.id === overview.owner);
+
+const dispX = ref(0), dispY = ref(0), minZoom = ref(0.1), zoom = ref(0.5);
+const canvasRef = useTemplateRef('canvasRef');
+
+const reset = (_: MouseEvent) => {
+    zoom.value = minZoom.value; 
+
+    dispX.value = 0; 
+    dispY.value = 0;
+}
+
+/*
+
+stroke-light-red
+stroke-light-orange
+stroke-light-yellow
+stroke-light-green
+stroke-light-cyan
+stroke-light-purple
+dark:stroke-dark-red
+dark:stroke-dark-orange
+dark:stroke-dark-yellow
+dark:stroke-dark-green
+dark:stroke-dark-cyan
+dark:stroke-dark-purple
+fill-light-red
+fill-light-orange
+fill-light-yellow
+fill-light-green
+fill-light-cyan
+fill-light-purple
+dark:fill-dark-red
+dark:fill-dark-orange
+dark:fill-dark-yellow
+dark:fill-dark-green
+dark:fill-dark-cyan
+dark:fill-dark-purple
+bg-light-red
+bg-light-orange
+bg-light-yellow
+bg-light-green
+bg-light-cyan
+bg-light-purple
+dark:bg-dark-red
+dark:bg-dark-orange
+dark:bg-dark-yellow
+dark:bg-dark-green
+dark:bg-dark-cyan
+dark:bg-dark-purple
+border-light-red
+border-light-orange
+border-light-yellow
+border-light-green
+border-light-cyan
+border-light-purple
+dark:border-dark-red
+dark:border-dark-orange
+dark:border-dark-yellow
+dark:border-dark-green
+dark:border-dark-cyan
+dark:border-dark-purple
+
+*/
+
+const cancelEvent = (e: Event) => e.preventDefault()
+useHover(({ hovering }) => {
+    if (!hovering) {
+        //@ts-ignore
+        window.removeEventListener('wheel', cancelEvent, { passive: false });
+        document.removeEventListener('gesturestart', cancelEvent)
+        document.removeEventListener('gesturechange', cancelEvent)
+        return
+    }
+    
+    window.addEventListener('wheel', cancelEvent, { passive: false });
+    document.addEventListener('gesturestart', cancelEvent)
+    document.addEventListener('gesturechange', cancelEvent)
+}, {
+    domTarget: canvasRef,
+})
+
+const dragHandler = useDrag(({ delta: [x, y] }: { delta: number[] }) => { 
+    dispX.value += x / zoom.value;
+    dispY.value += y / zoom.value;
+}, {
+    domTarget: canvasRef,
+    passive: true,
+});
+const wheelHandler = useWheel(({ delta: [x, y] }: { delta: number[] }) => { 
+    zoom.value = clamp(zoom.value + y * -0.001, minZoom.value, 3);
+}, {
+    domTarget: canvasRef,
+    passive: true,
+});
+const pinchHandler = usePinch(({ offset: [z] }: { offset: number[] }) => {
+    zoom.value = clamp(z / 2048, minZoom.value, 3);
+}, {
+    domTarget: canvasRef,
+    passive: true,
+});
+</script>
+
+<template>
+    <Loading v-if="status === 'pending'" />
+    <div v-else-if="canvas">
+        <div ref="canvasRef" 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="flex flex-col absolute sm:top-2 top-10 left-2 z-[35] overflow-hidden gap-4">
+                <div class="border border-light-35 dark:border-dark-35 bg-light-10 dark:bg-dark-10">
+                    <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="border border-light-35 dark:border-dark-35 bg-light-10 dark:bg-dark-10" v-if="isOwner">
+                    <Tooltip message="Modifier" side="right">
+                        <NuxtLink :to="{ name: 'explore-edit', hash: '#' + overview.path }" 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:pencil-1" />
+                        </NuxtLink>
+                    </Tooltip>
+                </div>
+            </div>
+            <CanvasRenderer :style="{transform: `scale(${zoom}) translate(${dispX}px, ${dispY}px)`}" :canvas="canvas" :zoom="zoom" />
+        </div>
+    </div>
+</template>
\ No newline at end of file
diff --git a/components/page/Markdown.vue b/components/page/Markdown.vue
new file mode 100644
index 0000000..78289a9
--- /dev/null
+++ b/components/page/Markdown.vue
@@ -0,0 +1,26 @@
+<script setup lang="ts">
+type MarkdownOverview = any;
+const { overview } = defineProps<{
+    overview: MarkdownOverview
+}>();
+
+const { data: content, status } = await useFetch(`/api/file/content/${encodeURIComponent(overview.path)}`, { watch: [overview] });
+
+const { user } = useUserSession();
+const isOwner = computed(() => user.value?.id === overview.owner);
+</script>
+
+<template>
+    <div class="flex flex-1 justify-start items-start flex-col xl:px-24 md:px-8 px-4 py-6">
+        <Loading v-if="status === 'pending'" />
+        <template v-else>
+            <div class="flex flex-1 flex-row justify-between items-center">
+                <ProseH1>{{ overview.title }}</ProseH1>
+                <div class="flex gap-4">
+                    <NuxtLink :href="{ name: 'explore-edit', hash: '#' + overview.path }" v-if="isOwner"><Button>Modifier</Button></NuxtLink>
+                </div>
+            </div>
+            <MarkdownRenderer v-if="content" :content="content.content" />
+        </template>
+    </div>
+</template>
\ No newline at end of file
diff --git a/components/prose/ProseA.vue b/components/prose/ProseA.vue
index 6da4354..f25dbed 100644
--- a/components/prose/ProseA.vue
+++ b/components/prose/ProseA.vue
@@ -4,7 +4,7 @@
 		<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)" />
+				<MarkdownRenderer 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>
diff --git a/db.sqlite-shm b/db.sqlite-shm
index 8cfd3cc0d78508d30ed7e2ce53d350dc747a0f52..edf1143d557ce7d8cfe9c9725a48390360b2cc6d 100644
GIT binary patch
delta 227
zcmZo@U}|V!s+V}A%K!p`K+MR%AP@(nyMdTDV6I7x$L9L?m4Php7sjXx=7ksAnV(od
zs(PSNU;r}rKN5fnGcovVY&2(_Y{1AeS%lGL^A5&;4x9fu8S(S`G6XUNGlVjPGej~(
zGsJE_$het_lZ%0eL6Sj*!4Js&$~5^yxRszkLjXe%LkL3{Lj*$<LkvS4Smow-Q9`N!
D+fzX~

delta 186
zcmZo@U}|V!s+V}A%K!qJK+MR%Am9U}yMZ{aM~2y}&Fb3w%0QO)3u9E{Rqv*mW`^t}
zRXxxsFaVkR9|=H(nHZEdHkvbTV*2MWS%Ar7^FJpe{>@BGhnU#87<d>Y8B{hiGJR*7
R{2|;5D0+lx^SdY^RRD$EH*Np`

diff --git a/db.sqlite-wal b/db.sqlite-wal
index 2dc7d3a4b3c19618cf41423c6c0b8ab8481f1878..72f96d21c493fd30862adba82cfc26b2c15f4b9d 100644
GIT binary patch
delta 1097
zcmX@mC;Z`}ctZ<g3sVd878Zx&Y77hvY(UKLzA}*I{lXa4jqWe%CN1dx%nKA_;$OnR
ze~Etyf7#}P0qOjc*YfM@=`gW`a<W*OrY5CWCL8G*rJ1Gbnk1Q;=~|?knd=%E7@C@!
zm>MNpm>H!f{mh>JYa5H9GCR<$ZkPqalcq`wu;<R>0$Z?_f&V)HTK*=W1tt8`e@$f6
z*4G4Dz(|Y*Od3FyoYNhQnN+4XI5P=wB!pEMPHL>}-R`iR<v+h9AJ7I4WUDXRe!D((
zx@hF)0D(XJT0rN4RDgUBcifJDXQCV8_oY$A_c<Wn+i_eIxo&8{Ch!erYYv93KO$GO
zD&~}lQ^nSNh^?Er4xY}?-|G#tH6O#)E&QVT7ygAmpo*<U5L=s{b*sv>7R`X!T7+S%
zh25^3w`5!ysbXs>#8w8@@B5qD`ek9ZmSWhtuk|)_+=Mr~sA6j+#MVbiA0;nw=u5$D
zt;Ddkex|N&{)Ri=RI#-NV(aP@zRiC%OU}b=t--K$%Kit}<y-u|P{r0du&wMSa|3wm
RH+yXM7x>H1lJv8V4*)(lSfu~}

delta 17
YcmexxQT#xka6=1Y3sVd878Zx&07oqc3jhEB

diff --git a/pages/explore/[...path].vue b/pages/explore/[...path].vue
index 098c9f7..e836c37 100644
--- a/pages/explore/[...path].vue
+++ b/pages/explore/[...path].vue
@@ -1,5 +1,5 @@
 <template>
-    <div v-if="overviewStatus === 'pending'" class="flex">
+    <div v-if="status === 'pending'" class="flex">
         <Head>
             <Title>d[any] - Chargement</Title>
         </Head>
@@ -9,37 +9,15 @@
         <Head>
             <Title>d[any] - {{ overview.title }}</Title>
         </Head>
-        <template v-if="overview.type === 'markdown'">
-            <div class="flex flex-1 justify-start items-start flex-col xl:px-24 md:px-8 px-4 py-6">
-                <div class="flex flex-1 flex-row justify-between items-center">
-                    <ProseH1>{{ overview.title }}</ProseH1>
-                    <div class="flex gap-4">
-                        <NuxtLink :href="{ name: 'explore-edit', hash: '#' + overview.path }" v-if="isOwner"><Button>Modifier</Button></NuxtLink>
-                    </div>
-                </div>
-                <Markdown v-if="content" :content="content.content" />
-                <Loading v-else />
-            </div>
-        </template>
-        <template v-else-if="overview.type === 'canvas'">
-            <Canvas v-if="content" :canvas="JSON.parse(content.content)" />
-            <Loading v-else />
-        </template>
-        <template v-else>
-            <ProseH2 class="flex-1 text-center">Impossible d'afficher le contenu demandé</ProseH2>
-        </template>
+        <Markdown v-if="overview.type === 'markdown'" :overview="overview" />
+        <Canvas v-else-if="overview.type === 'canvas'" :overview="overview" />
+        <ProseH2 v-else class="flex-1 text-center">Impossible d'afficher le contenu demandé</ProseH2>
     </div>
-    <div v-else-if="overviewStatus === 'error'">
+    <div v-else-if="status === 'error'">
         <Head>
             <Title>d[any] - Erreur</Title>
         </Head>
-        <span>{{ overviewError?.message }}</span>
-    </div>
-    <div v-else-if="contentStatus === 'error'">
-        <Head>
-            <Title>d[any] - Erreur</Title>
-        </Head>
-        <span>{{ contentError?.message }}</span>
+        <span>{{ error?.message }}</span>
     </div>
     <div v-else>
         <Head>
@@ -53,9 +31,5 @@
 const route = useRouter().currentRoute;
 const path = computed(() => Array.isArray(route.value.params.path) ? route.value.params.path[0] : route.value.params.path);
 
-const { user } = useUserSession();
-
-const { data: overview, status: overviewStatus, error: overviewError } = await useFetch(`/api/file/overview/${encodeURIComponent(path.value)}`, { watch: [route, path], });
-const { data: content, status: contentStatus, error: contentError } = await useFetch(`/api/file/content/${encodeURIComponent(path.value)}`, { watch: [route, path], });
-const isOwner = computed(() => user.value?.id === overview.value?.owner);
+const { data: overview, status, error } = await useFetch(`/api/file/overview/${encodeURIComponent(path.value)}`, { watch: [route, path], });
 </script>
\ No newline at end of file
diff --git a/pages/explore/edit/index.vue b/pages/explore/edit/index.vue
index 5968eda..d511121 100644
--- a/pages/explore/edit/index.vue
+++ b/pages/explore/edit/index.vue
@@ -152,7 +152,7 @@
 										</SplitterPanel>
 										<SplitterResizeHandle class="bg-light-35 dark:bg-dark-35 w-px xl!mx-4 mx-2" />
 										<SplitterPanel asChild collapsible :collapsedSize="0" :minSize="20" v-slot="{ isCollapsed }">
-											<div class="flex-1 max-h-full !overflow-y-auto px-8" :class="{ 'hidden': isCollapsed }"><Markdown :content="debounced" :proses="{ 'a': FakeA }" /></div>
+											<div class="flex-1 max-h-full !overflow-y-auto px-8" :class="{ 'hidden': isCollapsed }"><MarkdownRenderer :content="debounced" :proses="{ 'a': FakeA }" /></div>
 										</SplitterPanel>
 									</SplitterGroup>
 								</template>
diff --git a/todo.md b/todo.md
index c8e3552..b13f6c1 100644
--- a/todo.md
+++ b/todo.md
@@ -1,6 +1,6 @@
 - [x] Mot de passe oublié
 - [x] Rename auto des liens au changement de path
-- [ ] Filtrage de lien avec le header id
+- [x] Filtrage de lien avec le header id
 - [ ] Editeur de graphe
 - [ ] Autocomplete des liens dans l'editeur
 - [ ] Embed de lien (le ![[]] de Obsidian)