95 lines
3.9 KiB
Vue
95 lines
3.9 KiB
Vue
<template>
|
|
<div class="absolute overflow-visible">
|
|
<input v-if="editing" @click="e => e.stopImmediatePropagation()" :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" v-model="edge.label" />
|
|
<div v-else-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" @click.left="select" @dblclick.left="edit">{{ edge.label }}</div>
|
|
<svg ref="dom" 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(${focusing ? 6 : 3}px * var(--zoom-multiplier));`" style="stroke-linecap: butt;" :class="style.stroke" class="fill-none stroke-[4px]" :d="path!.path"></path>
|
|
<path style="stroke-width: calc(22px * var(--zoom-multiplier));" class="fill-none transition-opacity z-30 opacity-0 hover:opacity-25" :class="[style.stroke, { 'opacity-25': focusing }]" :d="path!.path" @click="select" @dblclick="edit"></path>
|
|
</g>
|
|
</svg>
|
|
</div>
|
|
</template>
|
|
|
|
<script setup lang="ts">
|
|
import { getPath, labelCenter, type Direction } from '#shared/canvas.util';
|
|
import type { Element } from '../CanvasEditor.vue';
|
|
import type { CanvasEdge, CanvasNode } from '~/types/canvas';
|
|
|
|
const rotation: Record<Direction, string> = {
|
|
top: "180",
|
|
bottom: "0",
|
|
left: "90",
|
|
right: "270"
|
|
};
|
|
|
|
const { edge, nodes } = defineProps<{
|
|
edge: CanvasEdge
|
|
nodes: CanvasNode[]
|
|
}>();
|
|
|
|
const emit = defineEmits<{
|
|
(e: 'select', id: Element): void,
|
|
(e: 'edit', id: Element): void,
|
|
(e: 'move', id: string, from: string, to: string): void,
|
|
(e: 'input', id: string, text?: string): void,
|
|
}>();
|
|
|
|
const dom = useTemplateRef('dom');
|
|
const focusing = ref(false), editing = ref(false);
|
|
|
|
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));
|
|
|
|
let oldText = edge.label;
|
|
|
|
function select(e: Event) {
|
|
if(editing.value)
|
|
return;
|
|
|
|
console.log("Selecting %s (edge)", edge.id);
|
|
|
|
focusing.value = true;
|
|
emit('select', { type: 'edge', id: edge.id });
|
|
}
|
|
function edit(e: Event) {
|
|
oldText = edge.label;
|
|
|
|
console.log("Editing %s (edge)", edge.id);
|
|
|
|
focusing.value = true;
|
|
editing.value = true;
|
|
|
|
e.stopImmediatePropagation();
|
|
emit('edit', { type: 'edge', id: edge.id });
|
|
}
|
|
function unselect() {
|
|
if(editing.value)
|
|
{
|
|
const text = edge.label;
|
|
|
|
if(text !== oldText)
|
|
{
|
|
edge.label = oldText;
|
|
|
|
emit('input', edge.id, text);
|
|
}
|
|
}
|
|
focusing.value = false;
|
|
editing.value = false;
|
|
}
|
|
|
|
defineExpose({ unselect, dom, id: edge.id });
|
|
|
|
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}`, outline: `outline-light-${edge.color?.class} dark:outline-dark-${edge.color?.class}` } :
|
|
{ fill: `fill-colored`, stroke: `stroke-[color:var(--canvas-color)]`, outline: `outline-[color:var(--canvas-color)]` } :
|
|
{ stroke: `stroke-light-40 dark:stroke-dark-40`, fill: `fill-light-40 dark:fill-dark-40`, outline: `outline-light-40 dark:outline-dark-40` }
|
|
});
|
|
</script> |