42 lines
2.0 KiB
Vue
42 lines
2.0 KiB
Vue
<template>
|
|
<div class="absolute overflow-visible">
|
|
<div v-if="edge.label" :style="{ transform: `${labelPos} translate(-50%, -50%)` }" class="relative bg-light-20 dark:bg-dark-20 border border-light-35 dark:border-dark-35 px-4 py-2 z-20">{{ edge.label }}</div>
|
|
<svg class="absolute top-0 overflow-visible h-px w-px">
|
|
<g :style="{'--canvas-color': edge.color?.hex}" class="z-0">
|
|
<g :style="`transform: translate(${path!.to.x}px, ${path!.to.y}px) scale(var(--zoom-multiplier)) rotate(${rotation[path!.side]}deg);`">
|
|
<polygon :class="style.fill" points="0,0 6.5,10.4 -6.5,10.4"></polygon>
|
|
</g>
|
|
<path :style="`stroke-width: calc(3px * var(--zoom-multiplier));`" style="stroke-linecap: butt;" :class="style.stroke" class="fill-none stroke-[4px]" :d="path!.path"></path>
|
|
</g>
|
|
</svg>
|
|
</div>
|
|
</template>
|
|
|
|
<style>
|
|
.fill-colored
|
|
{
|
|
--tw-bg-opacity: 1;
|
|
fill: rgba(from var(--canvas-color) r g b / var(--tw-bg-opacity));
|
|
}
|
|
</style>
|
|
<script setup lang="ts">
|
|
import { getPath, labelCenter, rotation } from '#shared/canvas.util';
|
|
import type { CanvasEdge, CanvasNode } from '~/types/canvas';
|
|
|
|
const { edge, nodes } = defineProps<{
|
|
edge: CanvasEdge
|
|
nodes: CanvasNode[]
|
|
}>();
|
|
|
|
const from = computed(() => nodes!.find(f => f.id === edge.fromNode));
|
|
const to = computed(() => nodes!.find(f => f.id === edge.toNode));
|
|
const path = computed(() => getPath(from.value!, edge.fromSide, to.value!, edge.toSide));
|
|
const labelPos = computed(() => labelCenter(from.value!, edge.fromSide, to.value!, edge.toSide));
|
|
|
|
const style = computed(() => {
|
|
return edge.color ? edge.color?.class ?
|
|
{ fill: `fill-light-${edge.color?.class} dark:fill-dark-${edge.color?.class}`, stroke: `stroke-light-${edge.color?.class} dark:stroke-dark-${edge.color?.class}` } :
|
|
{ fill: `fill-colored`, stroke: `stroke-[color:var(--canvas-color)]` } :
|
|
{ stroke: `stroke-light-40 dark:stroke-dark-40`, fill: `fill-light-40 dark:fill-dark-40` }
|
|
});
|
|
</script> |