Canvas CSS update

server/tasks/sync.ts

@@ -1,8 +1,10 @@
 import useDatabase from "~/composables/useDatabase";
 import { extname, basename } from 'node:path';
-import type { File } from '~/types/api';
+import type { File, FileType } from '~/types/api';
+import { InputTypeHTMLAttribute } from "vue";
+import { CanvasColor, CanvasContent } from "~/types/canvas";
 
-const typeMapping: Record<string, string> = {
+const typeMapping: Record<string, FileType> = {
     ".md": "Markdown",
     ".canvas": "Canvas"
 }
@@ -36,7 +38,7 @@ export default defineTask({
                         order: order && order[1] ? order[1] : 50,
                         title: order && order[2] ? order[2] : title,
                         type: 'Folder',
-                        content: undefined
+                        content: null
                     }
                 }
 
@@ -44,13 +46,14 @@ export default defineTask({
                 const title = basename(e.path, extension);
                 const order = /(\d+)\. ?(.+)/gsmi.exec(title);
                 const path = (e.path as string).split('/').map(f => { const check = /(\d+)\. ?(.+)/gsmi.exec(f); return check && check[2] ? check[2] : f }).join('/');
+                const content = (await $fetch(`https://git.peaceultime.com/api/v1/repos/peaceultime/system-aspect/raw/${encodeURIComponent(e.path)}`));
 
                 return { 
                     path: (extension === '.md' ? path.replace(extension, '') : path).toLowerCase().replaceAll(" ", "-").normalize("NFD").replace(/[\u0300-\u036f]/g, ""), 
                     order: order && order[1] ? order[1] : 50,
                     title: order && order[2] ? order[2] : title,
                     type: (typeMapping[extension] ?? 'File'), 
-                    content: await $fetch(`https://git.peaceultime.com/api/v1/repos/peaceultime/system-aspect/raw/${encodeURIComponent(e.path)}`)
+                    content: reshapeContent(content as string, typeMapping[extension] ?? 'File')
                 }
             }));
 
@@ -100,4 +103,37 @@ export default defineTask({
             return { result: false };
         }
     },
-})
+})
+
+function reshapeContent(content: string, type: FileType): string | null
+{
+    switch(type)
+    {
+        case "Markdown":
+        case "File":
+            return content;
+        case "Canvas":
+            const data = JSON.parse(content) as CanvasContent;
+            data.edges.forEach(e => e.color = typeof e.color === 'string' ? getColor(e.color) : undefined);
+            data.nodes.forEach(e => e.color = typeof e.color === 'string' ? getColor(e.color) : undefined);
+            return JSON.stringify(data);
+        default:
+        case 'Folder': 
+            return null;
+    }
+}
+function getColor(color: string): CanvasColor
+{
+    const colors: Record<string, string> = {
+        '1': 'fill-light-red dark:fill-dark-red stroke-light-red dark:stroke-dark-red',
+        '2': 'fill-light-orange dark:fill-dark-orange stroke-light-orange dark:stroke-dark-orange',
+        '3': 'fill-light-yellow dark:fill-dark-yellow stroke-light-yellow dark:stroke-dark-yellow',
+        '4': 'fill-light-green dark:fill-dark-green stroke-light-green dark:stroke-dark-green',
+        '5': 'fill-light-cyan dark:fill-dark-cyan stroke-light-cyan dark:stroke-dark-cyan',
+        '6': 'fill-light-purple dark:fill-dark-purple stroke-light-purple dark:stroke-dark-purple',
+    };
+    if(colors.hasOwnProperty(color))
+        return { class: colors[color] };
+    else
+        return { hex: color };
+}