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

Finish canvas fixes + add privates content ignore

This commit is contained in:
Peaceultime 2024-05-11 00:50:59 +02:00
parent 7a0e8a95a9
commit a4729b8d84
5 changed files with 67 additions and 32 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

7
assets/canvas.css
View File

@ -809,7 +809,7 @@ body.is-mobile .canvas-node-resizer {
.canvas-edges path.canvas-display-path {
pointer-events: none;
stroke-width: calc(3px * var(--zoom-multiplier));
stroke-width: calc(3px);
stroke: rgb(var(--canvas-color));
fill: none;
transition: stroke-width 100ms ease-out;
@ -817,7 +817,7 @@ body.is-mobile .canvas-node-resizer {
.canvas-edges path.canvas-interaction-path {
pointer-events: stroke;
stroke-width: calc(24px * var(--zoom-multiplier));
stroke-width: calc(24px);
stroke-linecap: round;
stroke: transparent;
fill: none;
@ -839,9 +839,6 @@ body.is-mobile .canvas-node-resizer {
stroke-linecap: round;
stroke-linejoin: round;
stroke-width: 1px;
transform-box: fill-box;
transform: scale(var(--zoom-multiplier));
transform-origin: center top;
}
.canvas-edges g.is-focused path.canvas-display-path,

12
components/CanvasEdge.vue
View File

@ -3,10 +3,12 @@ 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>();
@ -30,6 +32,12 @@ if (props.color !== undefined) {
</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>
<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>

18
components/CanvasNode.vue
View File

@ -36,15 +36,12 @@ 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 > 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>
@ -55,9 +52,7 @@ 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>
@ -66,9 +61,6 @@ if(props.node.color !== undefined)
</div>
</template>
</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 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>
</template>

57
components/CanvasRenderer.client.vue
View File

@ -146,6 +146,7 @@ function path(from: CanvasNode, fromSide: 'bottom' | 'top' | 'left' | 'right', t
{
return {
path: '',
from: {},
to: {},
toSide: '',
}
@ -158,49 +159,83 @@ function bezier(from: { x: number, y: number }, fromSide: 'bottom' | 'top' | 'le
const r = Math.hypot(from.x - to.x, from.y - to.y), o = clamp(r / 2, 70, 150), a = edgePos(fromSide, from, o), s = edgePos(toSide, to, o);
return {
path: `M${from.x},${from.y} C${a.x},${a.y} ${s.x},${s.y} ${to.x},${to.y}`,
from: from,
to: to,
side: toSide,
};
}
function labelCenter(from: CanvasNode, fromSide: 'bottom' | 'top' | 'left' | 'right', to: CanvasNode, toSide: 'bottom' | 'top' | 'left' | 'right'): string {
const a = mK(getBbox(from), fromSide), l = mK(getBbox(to), toSide);
const r = Math.hypot(a.x - l.x, a.y - l.y), o = clamp(r / 2, 70, 150), b = edgePos(fromSide, a, o), s = edgePos(toSide, l, o);
const center = getCenter(a, l, b, s, 0.5);
return `translate(${center.x}px, ${center.y}px)`;
}
function getCenter(n: { x: number, y: number }, i: { x: number, y: number }, r: { x: number, y: number }, o: { x: number, y: number }, e: number): { x: number, y: number } {
const a = 1 - e, s = a * a * a, l = 3 * e * a * a, c = 3 * e * e * a, u = e * e * e;
return {
x: s * n.x + l * r.x + c * o.x + u * i.x,
y: s * n.y + l * r.y + c * o.y + u * i.y
};
}
</script>
<template>
<div ref="canvas" @pointerdown="onPointerDown" @wheel.passive="onWheel"
@touchstart.prevent="" @dragstart.prevent="" class="canvas-wrapper node-insert-event mod-zoomed-out">
<div class="canvas-controls" style="z-index: 421;">
<div ref="canvas" @pointerdown="onPointerDown" @wheel.passive="onWheel" @touchstart.prevent="" @dragstart.prevent=""
class="canvas-wrapper node-insert-event mod-zoomed-out"
:style="{ '--zoom-multiplier': (1 / Math.pow(zoom, 0.7)) }">
<div class="canvas-controls" style="z-index: 999;">
<div class="canvas-control-group">
<div @click="zoom = clamp(zoom * 1.1, minZoom, 3)" class="canvas-control-item" aria-label="Zoom in" data-tooltip-position="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-plus">
<div @click="zoom = clamp(zoom * 1.1, minZoom, 3)" class="canvas-control-item" aria-label="Zoom in"
data-tooltip-position="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-plus">
<path d="M5 12h14"></path>
<path d="M12 5v14"></path>
</svg>
</div>
<div @click="zoom = 1" class="canvas-control-item" aria-label="Reset zoom" data-tooltip-position="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-rotate-cw">
<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-rotate-cw">
<path d="M21 12a9 9 0 1 1-9-9c2.52 0 4.93 1 6.74 2.74L21 8"></path>
<path d="M21 3v5h-5"></path>
</svg>
</div>
<div @click="reset" class="canvas-control-item" aria-label="Zoom to fit" data-tooltip-position="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-maximize">
<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-maximize">
<path d="M8 3H5a2 2 0 0 0-2 2v3"></path>
<path d="M21 8V5a2 2 0 0 0-2-2h-3"></path>
<path d="M3 16v3a2 2 0 0 0 2 2h3"></path>
<path d="M16 21h3a2 2 0 0 0 2-2v-3"></path>
</svg>
</div>
<div @click="zoom = clamp(zoom * 0.9, minZoom, 3)" class="canvas-control-item" aria-label="Zoom out" data-tooltip-position="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-minus">
<div @click="zoom = clamp(zoom * 0.9, minZoom, 3)" class="canvas-control-item" aria-label="Zoom out"
data-tooltip-position="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-minus">
<path d="M5 12h14"></path>
</svg>
</div>
</div>
</div>
<div class="canvas" :style="{transform: `translate(${centerX}px, ${centerY}px) scale(${zoom}) translate(${dispX}px, ${dispY}px)`}">
<div class="canvas"
:style="{transform: `translate(${centerX}px, ${centerY}px) scale(${zoom}) translate(${dispX}px, ${dispY}px)`}">
<svg class="canvas-edges">
<CanvasEdge v-for="edge of props.canvas.body.edges" :key="edge.id" :path="path(getNode(edge.fromNode)!, edge.fromSide, getNode(edge.toNode)!, edge.toSide)" :color="edge.color"/>
<CanvasEdge v-for="edge of props.canvas.body.edges" :key="edge.id"
:path="path(getNode(edge.fromNode)!, edge.fromSide, getNode(edge.toNode)!, edge.toSide)"
:color="edge.color" :label="edge.label" />
</svg>
<CanvasNode v-for="node of props.canvas.body.nodes" :key="node.id" :node="node" :zoom="zoom" />
<template v-for="edge of props.canvas.body.edges">
<div :key="edge.id" v-if="edge.label" class="canvas-path-label-wrapper"
:style="{ transform: labelCenter(getNode(edge.fromNode)!, edge.fromSide, getNode(edge.toNode)!, edge.toSide) }">
<div class="canvas-path-label">{{ edge.label }}</div>
</div>
</template>
</div>
</div>
</template>

3
nuxt.config.ts
View File

@ -8,6 +8,9 @@ export default defineNuxtConfig({
documentDriven: {
injectPage: true,
},
ignores: [
'98.Privé'
],
contentHead: true,
markdown: {
toc: { depth: 3, searchDepth: 3 },