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