Peaceultime/obsidian-visualiser
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Changing some visuals

Browse Source
This commit is contained in:
Peaceultime
2024-05-08 00:34:59 +02:00
parent f3bc4f3e1e
commit 7a0e8a95a9
5 changed files with 46 additions and 38 deletions
Download Patch File Download Diff File Expand all files Collapse all files

23
components/CanvasNode.vue
View File

@@ -26,6 +26,7 @@ function darken(rgb: string): boolean
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) };
const size = Math.max(props.node.width, props.node.height);
if(props.node.color !== undefined)
{
@@ -35,14 +36,17 @@ if(props.node.color !== undefined)
</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" :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.33">
<template v-if="props.node.type === 'group' || props.zoom > Math.min(0.38, 1000 / size)">
<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 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"/>
<ContentRenderer :value="props.node.text" />
</div>
</div>
</div>
@@ -51,7 +55,9 @@ if(props.node.color !== undefined)
<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">
<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>
@@ -60,6 +66,9 @@ if(props.node.color !== undefined)
</div>
</template>
</div>
<div v-if="props.node.type === 'group' && props.node.label !== undefined" class="canvas-group-label" :class="{'mod-foreground-dark': darken(getColor(props?.node?.color ?? '')), 'mod-foreground-light': !darken(getColor(props?.node?.color ?? ''))}">{{ props.node.label }}</div>
<div v-if="props.node.type === 'group' && props.node.label !== undefined" class="canvas-group-label"
:style="{ transform: 'translate(0, -100%) scale(' + (1 / Math.pow(zoom, 0.8)) + ')' }"
:class="{'mod-foreground-dark': darken(getColor(props?.node?.color ?? '')), 'mod-foreground-light': !darken(getColor(props?.node?.color ?? ''))}">
{{ props.node.label }}</div>
</div>
</template>

38
components/CanvasRenderer.client.vue
View File

@@ -14,10 +14,9 @@ let centerX = ref(0), centerY = ref(0), canvas = ref<HTMLDivElement>();
let minX = ref(+Infinity), minY = ref(+Infinity), maxX = ref(-Infinity), maxY = ref(-Infinity);
let bbox = ref<DOMRect>();
onMounted(async () => {
await nextTick();
let _minX = +Infinity, _minY = +Infinity, _maxX = -Infinity, _maxY = -Infinity;
let _minX = +Infinity, _minY = +Infinity, _maxX = -Infinity, _maxY = -Infinity;
onMounted(async () => {
props.canvas.body.nodes.forEach((e) => {
_minX = Math.min(_minX, e.x);
_minY = Math.min(_minY, e.y);
@@ -25,23 +24,35 @@ onMounted(async () => {
_maxY = Math.max(_maxY, e.y + e.height);
});
await nextTick();
window.addEventListener('resize', onResize);
onResize();
dispX.value = -(_maxX + _minX) / 2;
dispY.value = -(_maxY + _minY) / 2;
zoom.value = minZoom.value;
});
onUnmounted(() => {
window.removeEventListener('resize', onResize);
})
const onResize = (event?: Event) => {
minX.value = _minX = _minX - 32;
minY.value = _minY = _minY - 32;
maxX.value = _maxX = _maxX + 32;
maxY.value = _maxY = _maxY + 32;
minZoom.value = zoom.value = Math.min((canvas.value?.clientWidth ?? 0) / (_maxX - _minX), (canvas.value?.clientHeight ?? 0) / (_maxY - _minY)) * 0.9;
minZoom.value = Math.min((canvas.value?.clientWidth ?? 0) / (_maxX - _minX), (canvas.value?.clientHeight ?? 0) / (_maxY - _minY)) * 0.9;
zoom.value = clamp(zoom.value, minZoom.value, 3);
bbox.value = canvas.value?.getBoundingClientRect();
await nextTick();
centerX.value = (bbox.value?.width ?? 0) / 2;
centerY.value = (bbox.value?.height ?? 0) / 2;
dispX.value = -(_maxX + _minX) / 2;
dispY.value = -(_maxY + _minY) / 2;
})
}
const onPointerDown = (event: PointerEvent) => {
if (event.isPrimary === false) return;
@@ -72,12 +83,7 @@ const onPointerUp = (event: PointerEvent) => {
}
const onWheel = (event: WheelEvent) => {
zoom.value *= 1 + (event.deltaY * -0.001);
if (zoom.value > 3)
zoom.value = 3;
if (zoom.value < minZoom.value)
zoom.value = minZoom.value;
zoom.value = clamp(zoom.value * 1 + (event.deltaY * -0.001), minZoom.value, 3);
}
const reset = (_: MouseEvent) => {