43 lines
1.4 KiB
Vue
43 lines
1.4 KiB
Vue
<script setup lang="ts">
|
|
interface Props
|
|
{
|
|
path: {
|
|
path: string;
|
|
from: { x: number; y: number };
|
|
to: { x: number; y: number };
|
|
side: 'bottom' | 'top' | 'left' | 'right';
|
|
};
|
|
color?: string;
|
|
label?: string;
|
|
}
|
|
const props = defineProps<Props>();
|
|
|
|
const rotation = {
|
|
top: "180",
|
|
bottom: "0",
|
|
left: "90",
|
|
right: "270"
|
|
};
|
|
|
|
function hexToRgb(hex: string): string {
|
|
return `${parseInt(hex.substring(1, 3), 16)}, ${parseInt(hex.substring(3, 5), 16)}, ${parseInt(hex.substring(5, 7), 16)}`;
|
|
}
|
|
|
|
const classes: any = { 'is-themed': props.color !== undefined, 'mod-canvas-color-custom': (props?.color?.startsWith('#') ?? false) };
|
|
|
|
if (props.color !== undefined) {
|
|
if (!props.color.startsWith('#'))
|
|
classes['mod-canvas-color-' + props.color] = true;
|
|
}
|
|
</script>
|
|
|
|
<template>
|
|
<g :class="classes"
|
|
:style="{ '--canvas-color': props?.color?.startsWith('#') ? hexToRgb(props.color) : undefined }">
|
|
<path class="canvas-display-path" :d="props.path.path"></path>
|
|
</g>
|
|
<g :class="classes"
|
|
:style="{ '--canvas-color': props?.color?.startsWith('#') ? hexToRgb(props.color) : undefined, transform: `translate(${props.path.to.x}px, ${props.path.to.y}px) rotate(${rotation[props.path.side]}deg)` }">
|
|
<polygon class="canvas-path-end" points="0,0 6.5,10.4 -6.5,10.4"></polygon>
|
|
</g>
|
|
</template> |