53 lines
2.7 KiB
Vue
53 lines
2.7 KiB
Vue
<script setup lang="ts">
|
|
import type { CanvasNode } from '~/types/canvas';
|
|
|
|
interface Props {
|
|
node: CanvasNode;
|
|
zoom: number;
|
|
}
|
|
|
|
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 props = defineProps<Props>();
|
|
|
|
const classes: any = { 'canvas-node-group': props.node.type === 'group', 'is-themed': props.node.color !== undefined, 'mod-canvas-color-custom': (props.node?.color?.startsWith('#') ?? false) };
|
|
|
|
if(props.node.color !== undefined)
|
|
{
|
|
if (!props.node.color.startsWith('#'))
|
|
classes['mod-canvas-color-' + props.node.color] = true;
|
|
}
|
|
</script>
|
|
|
|
<template>
|
|
<div class="canvas-node" :class="classes" :style="{transform: `translate(${node.x}px, ${node.y}px)`, width: `${node.width}px`, height: `${node.height}px`, '--canvas-node-width': `${node.width}px`, '--canvas-node-height': `${node.height}px`, '--canvas-color': props.node?.color?.startsWith('#') ? hexToRgb(props.node.color) : undefined}">
|
|
<div class="canvas-node-container">
|
|
<template v-if="props.node.type === 'group' || props.zoom > 0.5">
|
|
<div class="canvas-node-content markdown-embed">
|
|
<div v-if="props.node.text?.body?.children?.length > 0" class="markdown-embed-content node-insert-event" style="">
|
|
<div class="markdown-preview-view markdown-rendered node-insert-event show-indentation-guide allow-fold-headings allow-fold-lists">
|
|
<div class="markdown-preview-sizer markdown-preview-section">
|
|
<ContentRenderer :value="props.node.text"/>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
<template v-else>
|
|
<div class="canvas-node-placeholder">
|
|
<div class="canvas-icon-placeholder">
|
|
<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 v-if="props.node.type === 'group' && props.node.label !== undefined" class="canvas-group-label">{{ props.node.label }}</div>
|
|
</div>
|
|
</template> |