59 lines
2.8 KiB
Vue
59 lines
2.8 KiB
Vue
<script setup lang="ts">
|
|
import type { CanvasNode } from '~/types/canvas';
|
|
|
|
interface Props {
|
|
node: CanvasNode;
|
|
zoom: number;
|
|
}
|
|
|
|
const props = defineProps<Props>();
|
|
|
|
const size = Math.max(props.node.width, props.node.height);
|
|
const colors = computed(() => {
|
|
if(props.node.color)
|
|
{
|
|
const color = props.node.color;
|
|
return color?.class ? { bg: `bg-light-${color?.class} dark:bg-dark-${color?.class}`, border: `border-light-${color?.class} dark:border-dark-${color?.class}`} : { bg: `bg-colored`, border: `border-[color:var(--canvas-color)]` };
|
|
}
|
|
else
|
|
{
|
|
return { border: `border-light-40 dark:border-dark-40`, bg: `bg-light-40 dark:bg-dark-40` };
|
|
}
|
|
})
|
|
</script>
|
|
|
|
<style>
|
|
.bg-colored
|
|
{
|
|
--tw-bg-opacity: 1;
|
|
background-color: rgba(from var(--canvas-color) r g b / var(--tw-bg-opacity));
|
|
}
|
|
</style>
|
|
|
|
<template>
|
|
<div class="absolute" :style="{transform: `translate(${node.x}px, ${node.y}px)`, width: `${node.width}px`, height: `${node.height}px`, '--canvas-color': node.color?.hex}" :class="{'-z-10': node.type === 'group', 'z-10': node.type !== 'group'}">
|
|
<div :class="[colors.border]" class="border-2 bg-light-20 dark:bg-dark-20 overflow-hidden contain-strict w-full h-full flex">
|
|
<div class="w-full h-full py-2 px-4 flex !bg-opacity-[0.07]" :class="colors.bg">
|
|
<template v-if="node.type === 'group' || zoom > Math.min(0.4, 1000 / size)">
|
|
<div v-if="node.text?.length > 0" class="flex items-center">
|
|
<Markdown v-model="node.text" />
|
|
</div>
|
|
</template>
|
|
<template v-else>
|
|
<div class="flex flex-1 justify-center items-center bg-light-30 dark:bg-dark-30">
|
|
<div class="">
|
|
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none"
|
|
stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"
|
|
class="svg-icon lucide-align-left">
|
|
<line x1="21" y1="6" x2="3" y2="6"></line>
|
|
<line x1="15" y1="12" x2="3" y2="12"></line>
|
|
<line x1="17" y1="18" x2="3" y2="18"></line>
|
|
</svg>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
</div>
|
|
</div>
|
|
<div v-if="node.type === 'group' && node.label !== undefined" :class="[colors.border]" style="max-width: 100%; font-size: calc(18px * var(--zoom-multiplier))" class="origin-bottom-left tracking-wider border-4 truncate inline-block text-light-100 dark:text-dark-100 absolute bottom-[100%] mb-2 px-2 py-1 font-thin">{{ node.label }}</div>
|
|
</div>
|
|
</template> |