Progressing on CanvasEditor

components/canvas/CanvasEdge.vue

@@ -1,15 +1,9 @@
 <script setup lang="ts">
+import type { Direction, Path } from "~/shared/canvas.util";
 import type { CanvasColor } from "~/types/canvas";
 
-type Direction = 'bottom' | 'top' | 'left' | 'right';
-
 const props = defineProps<{
-    path: {
-        path: string;
-        from: { x: number; y: number };
-        to: { x: number; y: number };
-        side: Direction;
-    };
+    path: Path;
     color?: CanvasColor;
     label?: string;
 }>();

components/canvas/CanvasRenderer.vue

@@ -11,19 +11,23 @@
         </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="getPath(getNode(canvas.nodes, edge.fromNode)!, edge.fromSide, getNode(canvas.nodes, edge.toNode)!, edge.toSide)"
+                :path="getPath(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">
+import { labelCenter, getNode, getPath } from '#shared/canvas.util';
+import type { CanvasContent } from '~/types/content';
+import type { CanvasContent as Canvas } from '~/types/canvas';
+
 const { path } = defineProps<{
     path: string
 }>();
 
 const { content, get } = useContent();
-const overview = computed(() => content.value.find(e => e.path === path));
+const overview = computed(() => content.value.find(e => e.path === path) as CanvasContent | undefined);
 
 const loading = ref(false);
 if(overview.value && !overview.value.content)
@@ -32,90 +36,6 @@ if(overview.value && !overview.value.content)
     await get(path);
     loading.value = false;
 }
-const canvas = computed(() => overview.value && overview.value.content ? JSON.parse(overview.value.content) as CanvasContent : undefined);
+const canvas = computed(() => overview.value && overview.value.content ? JSON.parse(overview.value.content) as Canvas : undefined);
 
-</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 getPath(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>