From 62950be0320234914cc83e8f340c0bcf81ed60d8 Mon Sep 17 00:00:00 2001
From: Peaceultime <clem31470@gmail.com>
Date: Thu, 9 Jan 2025 16:41:36 +0100
Subject: [PATCH] Minimal history handler, handle node move. Auto parse JSON
 content for accurate typing.

---
 components/CanvasEditor.vue            | 283 ++++++++++++++++---------
 components/canvas/CanvasNodeEditor.vue | 105 +++++++++
 pages/explore/edit/index.vue           |   8 +-
 server/api/file/content/[path].get.ts  |   4 +-
 shared/general.utils.ts                |  15 ++
 types/content.d.ts                     |   2 +-
 6 files changed, 315 insertions(+), 102 deletions(-)
 create mode 100644 components/canvas/CanvasNodeEditor.vue

diff --git a/components/CanvasEditor.vue b/components/CanvasEditor.vue
index 410578c..9f3bbb7 100644
--- a/components/CanvasEditor.vue
+++ b/components/CanvasEditor.vue
@@ -8,7 +8,22 @@ const rotation: Record<Direction, string> = {
     right: "270"
 };
 
+interface ActionMap {
+    move: Position;
+    edit: string;
+    resize: string;
+}
+type Action = keyof ActionMap;
+interface HistoryAction<T extends Action = Action>
+{
+    event: T;
+    element: number | number[];
+    from: ActionMap[T];
+    to: ActionMap[T];
+}
+
 const cancelEvent = (e: Event) => e.preventDefault();
+const stopPropagation = (e: Event) => e.stopImmediatePropagation();
 function center(touches: TouchList): Position
 {
     const pos = { x: 0, y: 0 };
@@ -28,38 +43,37 @@ function distance(touches: TouchList): number
     const [A, B] = touches;
     return Math.hypot(B.clientX - A.clientX, B.clientY - A.clientY);
 }
+function contains(group: CanvasNode, node: CanvasNode): boolean
+{
+    return group.x < node.x && group.y < node.y && group.x + group.width > node.x + node.width && group.y + group.height > node.y + node.height;
+}
 </script>
 
 <script setup lang="ts">
-import { useDrag, useHover, usePinch, useWheel } from '@vueuse/gesture';
 import { Icon } from '@iconify/vue/dist/iconify.js';
 import { clamp } from '#shared/general.utils';
-import type { CanvasContent, CanvasEdge, CanvasNode } from '~/types/canvas';
+import type { CanvasContent, CanvasNode } from '~/types/canvas';
 import { labelCenter, getPath } from '#shared/canvas.util';
-import FakeA from './prose/FakeA.vue';
 
-const { canvas } = defineProps<{
-    canvas: CanvasContent
-}>();
+const canvas = defineModel<CanvasContent>({ required: true, });
 
 const dispX = ref(0), dispY = ref(0), minZoom = ref(0.1), zoom = ref(0.5);
-const focusing = ref<CanvasNode | CanvasEdge>(), editing = ref<CanvasNode | CanvasEdge>();
+const focusing = ref<number>(), editing = ref<number>();
 const canvasRef = useTemplateRef('canvasRef');
+const nodes = useTemplateRef('nodes');
 
-const nodes = computed(() => {
-    return canvas.nodes.map(e => ({ ...e, class: e.color ? e.color?.class ? 
-        { bg: `bg-light-${e.color?.class} dark:bg-dark-${e.color?.class}`, border: `border-light-${e.color?.class} dark:border-dark-${e.color?.class}`, outline: `outline-light-${e.color?.class} dark:outline-dark-${e.color?.class}` } : 
-        { bg: `bg-colored`, border: `border-[color:var(--canvas-color)]`, outline: `outline-[color:var(--canvas-color)]` } : 
-        { border: `border-light-40 dark:border-dark-40`, bg: `bg-light-40 dark:bg-dark-40`, outline: `outline-light-40 dark:outline-dark-40` } }))
-});
 const edges = computed(() => {
-    return canvas.edges.map(e => { 
-        const from = canvas.nodes.find(f => f.id === e.fromNode), to = canvas.nodes.find(f => f.id === e.toNode);
+    return canvas.value.edges.map(e => { 
+        const from = canvas.value.nodes.find(f => f.id === e.fromNode), to = canvas.value.nodes.find(f => f.id === e.toNode);
         const path = getPath(from!, e.fromSide, to!, e.toSide)!;
         return { ...e, from, to, path };
     });
 });
 
+const history = ref<HistoryAction[]>([]);
+const historyPos = ref(-1);
+const lastActiveAction = computed(() => history.value.length > 0 && historyPos.value > -1 ? history.value[historyPos.value] : undefined);
+
 const reset = (_: MouseEvent) => {
     zoom.value = minZoom.value; 
 
@@ -67,6 +81,12 @@ const reset = (_: MouseEvent) => {
     dispY.value = 0;
 }
 
+function addAction<T extends Action = Action>(event: Action, element: number | number[], from: ActionMap[T], to: ActionMap[T])
+{
+    historyPos.value++;
+    history.value.splice(historyPos.value, history.value.length - historyPos.value);
+    history.value[historyPos.value] = { event, element, from, to };
+}
 onMounted(() => {
     let lastX = 0, lastY = 0, lastDistance = 0;
     let box = canvasRef.value?.getBoundingClientRect()!;
@@ -103,20 +123,17 @@ onMounted(() => {
         }
     }, { passive: true });
     canvasRef.value?.addEventListener('wheel', (e) => {
-        if(!editing.value)
-        {
-            if((zoom.value >= 3 && e.deltaY < 0) || (zoom.value <= minZoom.value && e.deltaY > 0))
-                return;
+        if((zoom.value >= 3 && e.deltaY < 0) || (zoom.value <= minZoom.value && e.deltaY > 0))
+            return;
 
-            const diff = Math.exp(e.deltaY * -0.001);
-            const centerX = (box.x + box.width / 2), centerY = (box.y + box.height / 2);
-            const mousex = centerX - e.clientX, mousey = centerY - e.clientY;
+        const diff = Math.exp(e.deltaY * -0.001);
+        const centerX = (box.x + box.width / 2), centerY = (box.y + box.height / 2);
+        const mousex = centerX - e.clientX, mousey = centerY - e.clientY;
 
-            dispX.value -= mousex / (diff * zoom.value) - mousex / zoom.value;
-            dispY.value -= mousey / (diff * zoom.value) - mousey / zoom.value;
+        dispX.value -= mousex / (diff * zoom.value) - mousex / zoom.value;
+        dispY.value -= mousey / (diff * zoom.value) - mousey / zoom.value;
 
-            zoom.value = clamp(zoom.value * diff, minZoom.value, 3);
-        }
+        zoom.value = clamp(zoom.value * diff, minZoom.value, 3);
     }, { passive: true });
     canvasRef.value?.addEventListener('touchstart', (e) => {
         ({ x: lastX, y: lastY } = center(e.touches));
@@ -165,59 +182,155 @@ onMounted(() => {
             zoom.value = clamp(zoom.value * diff, minZoom.value, 3); //@TODO
         }
     };
+});
+
+function move(index: number, x: number, y: number)
+{
+    const node = canvas.value.nodes[index];
+    const oldx = node.x, oldy = node.y;
+    
+    forElements(index, (e) => {
+        e.x -= x / zoom.value;
+        e.y -= y / zoom.value;
+    });
+
+    if(lastActiveAction.value && lastActiveAction.value.event === 'move' && lastActiveAction.value.element === index)
+    {
+        const action = lastActiveAction.value as HistoryAction<'move'>;
+
+        action.to.x -= x / zoom.value;
+        action.to.y -= y / zoom.value;
+    }
+    else
+    {
+        addAction('move', index, { x: oldx, y: oldy }, { x: canvas.value.nodes[index].x, y: canvas.value.nodes[index].y });
+    }
+}
+function select(node: CanvasNode, index: number, event: Event)
+{
+    if(focusing.value !== index)
+    {
+        unselect();
+    }
+
+    nodes.value![index]?.dom?.addEventListener('click', stopPropagation);
+    canvasRef.value?.addEventListener('click', unselect, { once: true });
+
+    focusing.value = index;
+}
+function edit(node: CanvasNode, index: number, event: Event)
+{
+    nodes.value![index]?.dom?.addEventListener('wheel', stopPropagation);
+    canvasRef.value?.addEventListener('click', unselect, { once: true });
+
+    editing.value = index;
+}
+
+const unselect = () => {
+    if(focusing.value !== undefined)
+    {
+        nodes.value![focusing.value]?.dom?.removeEventListener('click', stopPropagation);
+        nodes.value![focusing.value]?.unselect();
+    }
+    focusing.value = undefined;
+
+    if(editing.value !== undefined)
+    {
+        debugger;
+        nodes.value![editing.value]?.dom?.removeEventListener('wheel', stopPropagation);
+        nodes.value![editing.value]?.dom?.removeEventListener('click', stopPropagation);
+        nodes.value![editing.value]?.unselect();
+    }
+    editing.value = undefined;
+};
+const undo = () => {
+    if(!lastActiveAction.value)
+        return;
+
+    switch(lastActiveAction.value.event)
+    {
+        case 'move':
+        {
+            const action = lastActiveAction.value as HistoryAction<'move'>;
+
+            const x = action.to.x - action.from.x, y = action.to.y - action.from.y;
+
+            forElements(action.element, (e) => {
+                e.x -= x;
+                e.y -= y;
+            });
+
+            break;
+        }
+        case 'edit':
+        {
+            const action = lastActiveAction.value as HistoryAction<'edit'>;
+
+            forElements(action.element, (e) => {
+                e.text = action.from;
+            });
+            break;
+        }
+    }
+
+    historyPos.value--;
+};
+const redo = () => {
+    if(!history.value || history.value.length - 1 <= historyPos.value)
+        return;
+
+    historyPos.value++;
+    
+    if(!lastActiveAction.value)
+    {
+        historyPos.value--;
+        return;
+    }
+
+    switch(lastActiveAction.value.event)
+    {
+        case 'move':
+        {
+            const action = lastActiveAction.value as HistoryAction<'move'>;
+
+            const x = action.from.x - action.to.x, y = action.from.y - action.to.y;
+
+            forElements(action.element, (e) => {
+                e.x -= x;
+                e.y -= y;
+            });
+            break;
+        }
+        case 'edit':
+        {
+            const action = lastActiveAction.value as HistoryAction<'edit'>;
+
+            forElements(action.element, (e) => {
+                e.text = action.to;
+            });
+            break;
+        }
+    }
+};
+
+useShortcuts({
+    meta_z: undo,
+    meta_y: redo,
 })
 
-function selectNode(node: CanvasNode, e: MouseEvent)
+function forElements(element: number | number[], fn: (e: CanvasNode) => void)
 {
-    const target = e.currentTarget as HTMLElement;
-    let lastX = 0, lastY = 0;
-
-    const unselect = (_e: MouseEvent) => {
-        if(_e.button === 0 && _e.target !== target)
+    if(Array.isArray(element))
+    {
+        for(const e of element)
         {
-            focusing.value = undefined;
+            fn(canvas.value.nodes[e]);
         }
-    };
-    const dragStart = (_e: MouseEvent) => {
-        if(e.button !== 0)
-            return;
-
-        lastX = _e.clientX;
-        lastY= _e.clientY;
-
-        window.addEventListener('mousemove', dragMove, { passive: true });
-        window.addEventListener('mouseup', dragEnd, { passive: true });
-    };
-    const dragMove = (_e: MouseEvent) => {
-        node.x -= (lastX - e.clientX)/ zoom.value;
-        node.y -= (lastY - e.clientY)/ zoom.value;
-        
-        focusing.value = node;
-
-        lastX = _e.clientX;
-        lastY= _e.clientY;
     }
-    const dragEnd = (_e: MouseEvent) => {
-        window.removeEventListener('mousemove', dragMove);
-        window.removeEventListener('mouseup', dragEnd);
+    else
+    {
+        fn(canvas.value.nodes[element]);
     }
-
-    window.removeEventListener('mousemove', dragMove);
-    window.removeEventListener('mouseup', dragEnd);
-    target.removeEventListener('mousedown', dragStart);
-
-    focusing.value = node;
-
-    //canvasRef.value?.addEventListener('mousedown', unselect, { once: true, passive: true });
-    target.addEventListener('mousedown', dragStart, { passive: true });
-}
-function editNode(node: CanvasNode, e: MouseEvent)
-{
-    editing.value = node;
-}
-function resizeNode(e: MouseEvent, x: number, y: number)
-{
-    const target = e.currentTarget;
 }
 </script>
 
@@ -287,29 +400,7 @@ function resizeNode(e: MouseEvent, x: number, y: number)
                 }" class="h-full">
                     <div class="absolute top-0 left-0 w-full h-full pointer-events-none *:pointer-events-auto *:select-none touch-none">
                         <div>
-                            <div v-for="node of nodes" :key="node.id" class="absolute" :style="{transform: `translate(${node.x}px, ${node.y}px)`, width: `${node.width}px`, height: `${node.height}px`, '--canvas-color': node.color?.hex}" :class="{'-z-10': node.type === 'group', 'z-10': node.type !== 'group'}">
-                                <div v-if="editing?.id !== node.id" style="outline-style: solid;" :class="[node.class.border, node.class.outline, { '!outline-4 cursor-move': focusing?.id === node.id }]" class="outline-0 transition-[outline-width] border-2 bg-light-20 dark:bg-dark-20 w-full h-full flex">
-                                    <div class="w-full h-full py-2 px-4 flex !bg-opacity-[0.07]" :class="node.class.bg" @click.left="(e) => selectNode(node, e)" @dblclick.left="(e) => editNode(node, e)">
-                                        <div v-if="node.text?.length > 0" class="flex items-center">
-                                            <MarkdownRenderer :content="node.text" :proses="{ a: FakeA }" />
-                                        </div>
-                                    </div>
-                                    <div v-if="focusing?.id === node.id">
-                                        <span @mousedown="(e) => resizeNode(e,  0, -1)" id=" n" class="cursor-n-resize  absolute -top-2     left-0    right-0  h-4"></span> <!-- North      -->
-                                        <span @mousedown="(e) => resizeNode(e,  0,  1)" id=" s" class="cursor-s-resize  absolute -bottom-2  left-0    right-0  h-4"></span> <!-- South      -->
-                                        <span @mousedown="(e) => resizeNode(e, -1,  0)" id=" e" class="cursor-e-resize  absolute  top-0     bottom-0 -left-2   w-4"></span> <!-- East       -->
-                                        <span @mousedown="(e) => resizeNode(e,  1,  0)" id=" w" class="cursor-w-resize  absolute  top-0     bottom-0 -right-2  w-4"></span> <!-- West       -->
-                                        <span @mousedown="(e) => resizeNode(e,  1, -1)" id="nw" class="cursor-nw-resize absolute -top-2    -left-2    w-4      h-4"></span> <!-- North West -->
-                                        <span @mousedown="(e) => resizeNode(e, -1, -1)" id="ne" class="cursor-ne-resize absolute -top-2    -right-2   w-4      h-4"></span> <!-- North East -->
-                                        <span @mousedown="(e) => resizeNode(e, -1,  1)" id="se" class="cursor-se-resize absolute -bottom-2 -right-2   w-4      h-4"></span> <!-- South East -->
-                                        <span @mousedown="(e) => resizeNode(e,  1,  1)" id="sw" class="cursor-sw-resize absolute -bottom-2 -left-2    w-4      h-4"></span> <!-- South West -->
-                                    </div>
-                                </div>
-                                <div v-else style="outline-style: solid;" :class="[node.class.border, node.class.outline, { '!outline-4': focusing?.id === node.id }]" class="outline-0 transition-[outline-width] border-2 bg-light-20 dark:bg-dark-20 overflow-hidden contain-strict w-full h-full flex" >
-                                    <Editor v-model="node.text" />
-                                </div>
-                                <div v-if="node.type === 'group' && node.label !== undefined" :class="node.class.border" style="max-width: 100%; font-size: calc(18px * var(--zoom-multiplier))" class="origin-bottom-left tracking-wider border-4 truncate inline-block text-light-100 dark:text-dark-100 absolute bottom-[100%] mb-2 px-2 py-1 font-thin">{{ node.label }}</div>
-                            </div>
+                            <CanvasNodeEditor v-for="(node, index) of canvas.nodes" :key="node.id" ref="nodes" :node="node" :index="index" @select="select" @edit="edit" @move="move"/>
                         </div>
                         <template v-for="edge of edges">
                             <div :key="edge.id" v-if="edge.label" class="absolute z-10"
@@ -330,7 +421,7 @@ function resizeNode(e: MouseEvent, x: number, y: number)
             </ContextMenuTrigger>
             <ContextMenuPortal>
                 <ContextMenuContent>
-                    <ContextMenuItem @select="(e) => canvas.nodes.push({ id: useId(), })" >Nouveau</ContextMenuItem>
+                    <ContextMenuItem @select="(e) => canvas.value.nodes.push({ id: useId(), })" >Nouveau</ContextMenuItem>
                 </ContextMenuContent>
             </ContextMenuPortal>
         </ContextMenuRoot> -->
diff --git a/components/canvas/CanvasNodeEditor.vue b/components/canvas/CanvasNodeEditor.vue
new file mode 100644
index 0000000..bba31a0
--- /dev/null
+++ b/components/canvas/CanvasNodeEditor.vue
@@ -0,0 +1,105 @@
+<template>
+    <div class="absolute" ref="dom" :style="{transform: `translate(${node.x}px, ${node.y}px)`, width: `${node.width}px`, height: `${node.height}px`, '--canvas-color': node.color?.hex}" :class="{'-z-10': node.type === 'group', 'z-10': node.type !== 'group'}">
+        <div v-if="!editing || node.type === 'group'" style="outline-style: solid;" :class="[style.border, style.outline, { '!outline-4 cursor-move': focusing }]" class="outline-0 transition-[outline-width] border-2 bg-light-20 dark:bg-dark-20 w-full h-full flex">
+            <div class="w-full h-full py-2 px-4 flex !bg-opacity-[0.07]" :class="style.bg" @click.left="(e) => selectNode(node, e)" @dblclick.left="(e) => editNode(node, e)">
+                <div v-if="node.text?.length > 0" class="flex items-center">
+                    <MarkdownRenderer :content="node.text" :proses="{ a: FakeA }" />
+                </div>
+            </div>
+            <div v-if="focusing">
+                <span @mousedown="(e) => resizeNode(e,  1, -1)" id="nw" class="cursor-nw-resize absolute -top-2    -left-2  w-4 h-4"></span> <!-- North West -->
+                <span @mousedown="(e) => resizeNode(e, -1, -1)" id="ne" class="cursor-ne-resize absolute -top-2    -right-2 w-4 h-4"></span> <!-- North East -->
+                <span @mousedown="(e) => resizeNode(e, -1,  1)" id="se" class="cursor-se-resize absolute -bottom-2 -right-2 w-4 h-4"></span> <!-- South East -->
+                <span @mousedown="(e) => resizeNode(e,  1,  1)" id="sw" class="cursor-sw-resize absolute -bottom-2 -left-2  w-4 h-4"></span> <!-- South West -->
+            </div>
+        </div>
+        <div v-else style="outline-style: solid;" :class="[style.border, style.outline, { '!outline-4': focusing }]" class="outline-0 transition-[outline-width] border-2 bg-light-20 dark:bg-dark-20 overflow-hidden contain-strict w-full h-full flex" >
+            <Editor v-model="node.text" />
+        </div>
+        <div v-if="!editing && node.type === 'group' && node.label !== undefined"  @click.left="(e) => selectNode(node, e)" @dblclick.left="(e) => editNode(node, e)" :class="style.border" style="max-width: 100%; font-size: calc(18px * var(--zoom-multiplier))" class="origin-bottom-left tracking-wider border-4 truncate inline-block text-light-100 dark:text-dark-100 absolute bottom-[100%] mb-2 px-2 py-1 font-thin">{{ node.label }}</div>
+        <input v-else-if="editing && node.type === 'group'" v-model="node.label" autofocus :class="[style.border, style.outline]" style="max-width: 100%; font-size: calc(18px * var(--zoom-multiplier))" class="origin-bottom-left tracking-wider border-4 truncate inline-block text-light-100 dark:text-dark-100 absolute bottom-[100%] appearance-none bg-transparent outline-4 mb-2 px-2 py-1 font-thin min-w-4" />
+    </div>
+</template>
+
+<script setup lang="ts">
+import FakeA from '../prose/FakeA.vue';
+import type { CanvasNode } from '~/types/canvas';
+
+const { node, index } = defineProps<{
+    node: CanvasNode
+    index: number
+}>();
+
+const emit = defineEmits<{
+    (e: 'select', node: CanvasNode, index: number, event: Event): void,
+    (e: 'edit', node: CanvasNode, index: number, event: Event): void,
+    (e: 'resize', node: CanvasNode, index: number, event: Event): void,
+    (e: 'move', index: number, x: number, y: number): void,
+    (e: 'resize', index: number, x: number, y: number): void,
+}>();
+
+const dom = useTemplateRef('dom');
+const focusing = ref(false), editing = ref(false);
+
+function selectNode(node: CanvasNode, _e: Event) {
+    if(editing.value)
+        return;
+
+    focusing.value = true;
+    emit('select', node, index, _e);
+
+    dom.value?.addEventListener('mousedown', dragstart, { passive: true });
+}
+function editNode(node: CanvasNode, e: Event) {
+    focusing.value = true;
+    editing.value = true;
+
+    dom.value?.removeEventListener('mousedown', dragstart);
+    emit('edit', node, index, e);
+}
+function resizeNode(e: Event, x: number, y: number) {
+    e.stopImmediatePropagation();
+    emit('resize', node, index, e);
+}
+function unselect() {
+    focusing.value = false;
+    editing.value = false;
+
+    dom.value?.removeEventListener('mousedown', dragstart);
+}
+
+let lastx = 0, lasty = 0;
+const dragmove = (e: MouseEvent) => {
+    if(e.button !== 0)
+        return;
+
+    emit('move', index, lastx - e.clientX, lasty - e.clientY);
+
+    lastx = e.clientX, lasty = e.clientY;
+};
+const dragend = (e: MouseEvent) => {
+    if(e.button !== 0)
+        return;
+    
+    window.removeEventListener('mousemove', dragmove);
+    window.removeEventListener('mouseup', dragend);
+};
+const dragstart = (e: MouseEvent) => {
+    if(e.button !== 0)
+        return;
+    
+    lastx = e.clientX, lasty = e.clientY;
+
+    window.addEventListener('mousemove', dragmove, { passive: true });
+    window.addEventListener('mouseup', dragend, { passive: true });
+};
+
+defineExpose({ unselect, dom });
+
+const style = computed(() => {
+    return node.color ? node.color?.class ? 
+        { bg: `bg-light-${node.color?.class} dark:bg-dark-${node.color?.class}`, border: `border-light-${node.color?.class} dark:border-dark-${node.color?.class}`, outline: `outline-light-${node.color?.class} dark:outline-dark-${node.color?.class}` } : 
+        { bg: `bg-colored`, border: `border-[color:var(--canvas-color)]`, outline: `outline-[color:var(--canvas-color)]` } : 
+        { border: `border-light-40 dark:border-dark-40`, bg: `bg-light-40 dark:bg-dark-40`, outline: `outline-light-40 dark:outline-dark-40` }
+});
+</script>
\ No newline at end of file
diff --git a/pages/explore/edit/index.vue b/pages/explore/edit/index.vue
index 8bcf53a..9d51850 100644
--- a/pages/explore/edit/index.vue
+++ b/pages/explore/edit/index.vue
@@ -186,7 +186,7 @@
 									</SplitterGroup>
 								</template>
 								<template v-else-if="selected.type === 'canvas'">
-									<CanvasEditor :canvas="JSON.parse(selected.content ?? '{}')" />
+									<CanvasEditor v-if="selected.content" :modelValue="selected.content" />
 								</template>
 								<template v-else-if="selected.type === 'map'">
 									<span class="flex flex-1 justify-center items-center"><ProseH3>Editeur de carte en cours de développement</ProseH3></span>
@@ -206,8 +206,8 @@
 <script setup lang="ts">
 import { Icon } from '@iconify/vue/dist/iconify.js';
 import type { Instruction } from '@atlaskit/pragmatic-drag-and-drop-hitbox/dist/types/tree-item';
-import { parsePath } from '#shared/general.utils';
-import type { ExploreContent, FileType, MarkdownContent, TreeItem } from '~/types/content';
+import { convertContent, parsePath } from '#shared/general.utils';
+import type { CanvasContent, ExploreContent, FileType, TreeItem } from '~/types/content';
 import { iconByType } from '#shared/general.utils';
 import FakeA from '~/components/prose/FakeA.vue';
 
@@ -247,7 +247,7 @@ watch(selected, async (value, old) => {
 
 				if(storedEdit)
 				{
-					selected.value.content = storedEdit;
+					selected.value.content = convertContent(selected.value.type, storedEdit);
 					contentStatus.value = 'success';
 				}
 				else
diff --git a/server/api/file/content/[path].get.ts b/server/api/file/content/[path].get.ts
index b6fd8ce..75285d4 100644
--- a/server/api/file/content/[path].get.ts
+++ b/server/api/file/content/[path].get.ts
@@ -1,6 +1,7 @@
 import { eq, sql } from 'drizzle-orm';
 import useDatabase from '~/composables/useDatabase';
 import { explorerContentTable } from '~/db/schema';
+import { convertContent } from '~/shared/general.utils';
 
 export default defineEventHandler(async (e) => {
     const path = decodeURIComponent(getRouterParam(e, "path") ?? '');
@@ -16,6 +17,7 @@ export default defineEventHandler(async (e) => {
     const content = db.select({ 
         'content': sql<string>`cast(${explorerContentTable.content} as TEXT)`.as('content'),
         'private': explorerContentTable.private,
+        'type': explorerContentTable.type,
         'owner': explorerContentTable.owner,
         'visit': explorerContentTable.visit,
     }).from(explorerContentTable).where(eq(explorerContentTable.path, sql.placeholder('path'))).prepare().get({ path });
@@ -45,7 +47,7 @@ export default defineEventHandler(async (e) => {
             content.content = convertFromStorableLinks(content.content);
         }
 
-        return content.content;
+        return convertContent(content.type, content.content);
     }
     
     setResponseStatus(e, 404);
diff --git a/shared/general.utils.ts b/shared/general.utils.ts
index 531922c..99d7c2a 100644
--- a/shared/general.utils.ts
+++ b/shared/general.utils.ts
@@ -1,3 +1,4 @@
+import type { CanvasContent } from '~/types/canvas';
 import type { FileType } from '~/types/content';
 
 export function unifySlug(slug: string | string[]): string
@@ -46,6 +47,20 @@ export function clamp(x: number, min: number, max: number): number {
         return min;
     return x;
 }
+export function convertContent(type: FileType, content: string): CanvasContent | string {
+    switch(type)
+    {
+        case 'canvas':
+            return JSON.parse(content) as CanvasContent;
+        case 'map':
+        case 'file':
+        case 'folder':
+        case 'markdown':
+            return content;
+        default:
+            return content;
+    }
+}
 
 export const iconByType: Record<FileType, string> = {
     'folder': 'lucide:folder',
diff --git a/types/content.d.ts b/types/content.d.ts
index 88fedf6..2c99fd9 100644
--- a/types/content.d.ts
+++ b/types/content.d.ts
@@ -15,7 +15,7 @@ export interface Overview {
 }
 export interface CanvasContent extends Overview {
     type: 'canvas';
-    content?: string;
+    content?: Canvas;
 }
 export interface MapContent extends Overview {
     type: 'map';