41 lines
1.8 KiB
Vue
41 lines
1.8 KiB
Vue
<template>
|
|
<div class="absolute top-0 left-0 w-full h-full origin-center pointer-events-none *:pointer-events-auto *:select-none" v-if="canvas">
|
|
<div>
|
|
<CanvasNode v-for="node of canvas.nodes" :key="node.id" :node="node" />
|
|
</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="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) as CanvasContent | undefined);
|
|
|
|
const loading = ref(false);
|
|
if(overview.value && !overview.value.content)
|
|
{
|
|
loading.value = true;
|
|
await get(path);
|
|
loading.value = false;
|
|
}
|
|
const canvas = computed(() => overview.value && overview.value.content ? JSON.parse(overview.value.content) as Canvas : undefined);
|
|
|
|
</script> |