33 lines
1.2 KiB
Vue
33 lines
1.2 KiB
Vue
<script setup lang="ts">
|
|
import type { CanvasColor } from "~/types/canvas";
|
|
|
|
type Direction = 'bottom' | 'top' | 'left' | 'right';
|
|
interface Props
|
|
{
|
|
path: {
|
|
path: string;
|
|
from: { x: number; y: number };
|
|
to: { x: number; y: number };
|
|
side: Direction;
|
|
};
|
|
color?: CanvasColor;
|
|
label?: string;
|
|
}
|
|
const props = defineProps<Props>();
|
|
|
|
const rotation: Record<Direction, string> = {
|
|
top: "180",
|
|
bottom: "0",
|
|
left: "90",
|
|
right: "270"
|
|
};
|
|
</script>
|
|
|
|
<template>
|
|
<g>
|
|
<path :style="`stroke-linecap: butt; stroke-width: calc(3px * var(--zoom-multiplier)); --canvas-color: ${color?.hex}`" :class="(color?.class ?? undefined) ?? ((color && color?.hex !== undefined) ? 'stroke-[var(--canvas-color)]' : 'stroke-light-40 dark:stroke-dark-40')" class="fill-none stroke-[4px]" :d="path.path"></path>
|
|
</g>
|
|
<g :style="`transform: translate(${path.to.x}px, ${path.to.y}px) scale(var(--zoom-multiplier)) rotate(${rotation[path.side]}deg); --canvas-color: ${color?.hex}`">
|
|
<polygon :class="(color?.class ?? undefined) ?? ((color && color?.hex !== undefined) ? 'fill-[var(--canvas-color)]' : 'fill-light-40 dark:fill-dark-40')" points="0,0 6.5,10.4 -6.5,10.4"></polygon>
|
|
</g>
|
|
</template> |