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

Changing some visuals

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
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
app.vue
View File

@ -5,7 +5,7 @@ provide('tags/descriptions', tags);
</script>
<template>
<div class="published-container print is-readable-line-width has-navigation has-graph has-outline" style="">
<div class="published-container print has-navigation has-outline" style="">
<div class="site-body">
<LeftComponent />
<MainComponent />

18
assets/global.css
View File

@ -2,7 +2,7 @@
/* -------------------------- */
.published-container {
/* Page */
--page-width: 1000px;
--page-width: 1600px;
--page-side-padding: 32px;
/* Page titles */
--page-title-color: var(--h1-color);
@ -26,7 +26,7 @@
--graph-height: 260px;
/* Sidebars */
--sidebar-font-size: 14px;
--sidebar-left-width: 280px;
--sidebar-left-width: 360px;
--sidebar-left-background: var(--background-primary);
--sidebar-left-border-width: 1px;
--sidebar-left-border-color: var(--background-modifier-border);
@ -3825,16 +3825,8 @@ body {
width: 100%;
}
.published-container.is-readable-line-width .site-body-left-column {
flex-basis: calc((100vw - var(--page-width)) / 2);
}
.published-container.is-readable-line-width .site-body-right-column {
width: calc((100vw - var(--page-width)) / 2);
}
.canvas-node-container .markdown-preview-sizer {
max-width: initial !important;
width: calc(100vw - var(--page-width) - var(--sidebar-left-width));
}
.published-container.is-readable-line-width .markdown-preview-sizer {
@ -4155,7 +4147,7 @@ body {
width: var(--sidebar-left-width);
flex: 0 0 var(--sidebar-left-width);
min-width: var(--sidebar-left-width);
padding: 32px 0 0 18px;
padding: 32px 18px 0 36px;
position: relative;
display: flex;
background-color: var(--sidebar-left-background);
@ -4170,7 +4162,7 @@ body {
.site-body-left-column .site-body-left-column-inner {
width: var(--sidebar-left-width);
max-width: 100%;
margin-left: auto;
margin-right: auto;
height: 100%;
display: flex;
flex-direction: column;

21
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,12 +36,15 @@ 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" />
</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>

36
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;
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) => {

3
pages/[...slug].vue
View File

@ -6,7 +6,6 @@ function toggleLeftPanel(_: Event) {
</script>
<script setup lang="ts">
const { page } = useContent()
useContentHead(page);
@ -20,6 +19,8 @@ onMounted(() => {
icon = document.querySelector('.site-header .clickable-icon');
icon?.removeEventListener('click', toggleLeftPanel);
icon?.addEventListener('click', toggleLeftPanel);
document.querySelector(".published-container")?.classList.toggle('is-readable-line-width', !page.value || page.value._type !== 'canvas');
})
</script>