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

Refactoring search, navigation, canvas and others to fit the new data model

Browse Source
This commit is contained in:
Peaceultime
2024-08-06 00:15:09 +02:00
parent e28d72fd1b
commit a3d0b3b5bd
26 changed files with 409 additions and 253 deletions
Download Patch File Download Diff File Expand all files Collapse all files

10
components/canvas/CanvasNode.vue
View File

@@ -36,14 +36,14 @@ 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': node?.color?.startsWith('#') ? hexToRgb(node.color) : undefined}">
<div class="canvas-node-container">
<template v-if="props.node.type === 'group' || props.zoom > Math.min(0.38, 1000 / size)">
<template v-if="node.type === 'group' || 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 v-if="node.text?.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"/>
<Markdown :content="node.text"/>
</div>
</div>
</div>
@@ -61,6 +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" :class="{'mod-foreground-dark': darken(getColor(props?.node?.color ?? '')), 'mod-foreground-light': !darken(getColor(props?.node?.color ?? ''))}">{{ props.node.label }}</div>
<div v-if="node.type === 'group' && node.label !== undefined" class="canvas-group-label" :class="{'mod-foreground-dark': darken(getColor(node?.color ?? '')), 'mod-foreground-light': !darken(getColor(node?.color ?? ''))}">{{ node.label }}</div>
</div>
</template>

14
components/canvas/CanvasRenderer.client.vue
View File

@@ -1,11 +1,11 @@
<script setup lang="ts">
import("~/assets/canvas.css")
import type { Canvas, CanvasNode } from '~/types/canvas';
import type { CanvasContent, CanvasNode } from '~/types/canvas';
interface Props
{
canvas: Canvas;
canvas: CanvasContent;
}
const props = defineProps<Props>();
@@ -19,7 +19,7 @@ let lastPinchLength = 0;
let _minX = +Infinity, _minY = +Infinity, _maxX = -Infinity, _maxY = -Infinity;
onMounted(async () => {
props.canvas.body.nodes.forEach((e) => {
props.canvas.nodes.forEach((e) => {
_minX = Math.min(_minX, e.x);
_minY = Math.min(_minY, e.y);
_maxX = Math.max(_maxX, e.x + e.width);
@@ -157,7 +157,7 @@ function edgePos(side: 'bottom' | 'top' | 'left' | 'right', pos: { x: number, y:
}
function getNode(id: string): CanvasNode | undefined
{
return props.canvas.body.nodes.find(e => e.id === id);
return props.canvas.nodes.find(e => e.id === id);
}
function mK(e: { minX: number, minY: number, maxX: number, maxY: number }, t: 'bottom' | 'top' | 'left' | 'right'): { x: number, y: number } {
switch (t) {
@@ -258,12 +258,12 @@ function getCenter(n: { x: number, y: number }, i: { x: number, y: number }, r:
<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"
<CanvasEdge v-for="edge of props.canvas.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">
<CanvasNode v-for="node of props.canvas.nodes" :key="node.id" :node="node" :zoom="zoom" />
<template v-for="edge of props.canvas.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>