You've already forked obsidian-visualiser
Progressing on the CSS rework
This commit is contained in:
@@ -216,47 +216,45 @@ function getCenter(n: { x: number, y: number }, i: { x: number, y: number }, r:
|
||||
<Suspense>
|
||||
<template #default>
|
||||
<div id="canvas" ref="canvas" @pointerdown="onPointerDown" @wheel.passive="onWheel" @touchstart.passive="onTouchStart"
|
||||
@dragstart.prevent="" class="canvas-wrapper node-insert-event mod-zoomed-out"
|
||||
@dragstart.prevent="" class="relative overflow-hidden"
|
||||
: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">
|
||||
<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">
|
||||
<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">
|
||||
<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">
|
||||
<path d="M5 12h14"></path>
|
||||
</svg>
|
||||
</div>
|
||||
<div class="border border-light-35 dark:border-dark-35 bg-light-10 dark:bg-dark-10 absolute top-2 left-2 z-[100] overflow-hidden">
|
||||
<div @click="zoom = clamp(zoom * 1.1, minZoom, 3)" class="w-8 h-8 flex justify-center items-center p-2 hover:bg-light-30 dark:hover:bg-dark-30 cursor-pointer"
|
||||
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">
|
||||
<path d="M5 12h14"></path>
|
||||
<path d="M12 5v14"></path>
|
||||
</svg>
|
||||
</div>
|
||||
<div @click="zoom = 1" class="w-8 h-8 flex justify-center items-center p-2 hover:bg-light-30 dark:hover:bg-dark-30 cursor-pointer" 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">
|
||||
<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="w-8 h-8 flex justify-center items-center p-2 hover:bg-light-30 dark:hover:bg-dark-30 cursor-pointer" 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">
|
||||
<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="w-8 h-8 flex justify-center items-center p-2 hover:bg-light-30 dark:hover:bg-dark-30 cursor-pointer"
|
||||
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">
|
||||
<path d="M5 12h14"></path>
|
||||
</svg>
|
||||
</div>
|
||||
</div>
|
||||
<div class="canvas"
|
||||
@@ -274,7 +272,6 @@ function getCenter(n: { x: number, y: number }, i: { x: number, y: number }, r:
|
||||
</div>
|
||||
</template>
|
||||
</div>
|
||||
<span v-if="TMP_dragPoint" :style="{ display: 'block', backgroundColor: 'red', borderRadius: '8px', width: '8px', height: '8px', transform: `translate(-4px, -4px) translate(${TMP_dragPoint.x}px, ${TMP_dragPoint.y}px)` }"></span>
|
||||
</div>
|
||||
</template>
|
||||
<template #fallback>
|
||||
|
||||
Reference in New Issue
Block a user