luxick/datascape
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Canvas V2

Browse Source
This commit is contained in:
luxick
2026-10-04 15:58:27 +02:00
parent 95002a34ad
commit 06da56d0a0
7 changed files with 1008 additions and 333 deletions
Download Patch File Download Diff File Expand all files Collapse all files
assets/canvas/canvas.js
+884 -239
View File
File diff suppressed because it is too large Load Diff
assets/canvas/main.html
+3 -46
View File
@@ -13,61 +13,18 @@ navigation and canvas.js can save on pagehide. */}}
{{define "shell"}}
<div class="canvas-app" data-version="{{.Version}}"{{if .Error}} data-readonly{{end}}>
<div class="canvas-bar">
<span class="canvas-title truncate">{{.Title}}</span>
{{if not .Error}}
<span class="canvas-tools">
<button type="button" class="btn btn-tool" data-canvas="text" title="Add a note (or double-click the background)">TEXT</button>
<button type="button" class="btn btn-tool" data-canvas="file" title="Add a file or page">FILE</button>
<button type="button" class="btn btn-tool" data-canvas="link" title="Add a web link">LINK</button>
<button type="button" class="btn btn-tool" data-canvas="group" title="Group the selection">GROUP</button>
<span class="toolbar-sep"></span>
<span class="dropdown">
<button type="button" class="btn btn-tool dropdown-toggle" title="Color of the selection">COLOR▾</button>
<div class="dropdown-menu canvas-colors">
<button type="button" class="btn btn-tool btn-block" data-canvas="color" data-value="">None</button>
<button type="button" class="btn btn-tool btn-block" data-canvas="color" data-value="1"><span class="canvas-swatch" data-color="1"></span>Red</button>
<button type="button" class="btn btn-tool btn-block" data-canvas="color" data-value="2"><span class="canvas-swatch" data-color="2"></span>Orange</button>
<button type="button" class="btn btn-tool btn-block" data-canvas="color" data-value="3"><span class="canvas-swatch" data-color="3"></span>Yellow</button>
<button type="button" class="btn btn-tool btn-block" data-canvas="color" data-value="4"><span class="canvas-swatch" data-color="4"></span>Green</button>
<button type="button" class="btn btn-tool btn-block" data-canvas="color" data-value="5"><span class="canvas-swatch" data-color="5"></span>Cyan</button>
<button type="button" class="btn btn-tool btn-block" data-canvas="color" data-value="6"><span class="canvas-swatch" data-color="6"></span>Purple</button>
</div>
</span>
<input type="color" class="canvas-color-input" title="Custom color of the selection" value="#c48401" />
<span class="dropdown">
<button type="button" class="btn btn-tool dropdown-toggle" title="Arrows of the selected connections">ARROWS▾</button>
<div class="dropdown-menu">
<button type="button" class="btn btn-tool btn-block" data-canvas="ends" data-value="none arrow">One way →</button>
<button type="button" class="btn btn-tool btn-block" data-canvas="ends" data-value="arrow arrow">Both ways ↔</button>
<button type="button" class="btn btn-tool btn-block" data-canvas="ends" data-value="none none">No arrows —</button>
<button type="button" class="btn btn-tool btn-block" data-canvas="ends" data-value="reverse">Reverse ⇄</button>
</div>
</span>
<span class="toolbar-sep"></span>
<button type="button" class="btn btn-tool" data-canvas="undo" title="Undo (Ctrl+Z)">↶</button>
<button type="button" class="btn btn-tool" data-canvas="redo" title="Redo (Ctrl+Y)">↷</button>
<button type="button" class="btn btn-tool danger" data-canvas="delete" title="Delete the selection (Del)">DEL</button>
<span class="toolbar-sep"></span>
<button type="button" class="btn btn-tool" data-canvas="zoomout" title="Zoom out">−</button>
<button type="button" class="btn btn-tool canvas-zoom" data-canvas="zoomreset" title="Zoom to 100%">100%</button>
<button type="button" class="btn btn-tool" data-canvas="zoomin" title="Zoom in">+</button>
<button type="button" class="btn btn-tool" data-canvas="fit" title="Show everything">FIT</button>
</span>
<span class="canvas-status muted" aria-live="polite"></span>
{{end}}
</div>
{{if .Error}}<p class="canvas-error">This canvas cannot be edited: {{.Error}}</p>{{end}}
<div class="canvas-stage">
<div class="canvas-node-toolbar" hidden>{{template "editor-toolbar"}}</div>
<div class="canvas-viewport" tabindex="0">
<div class="canvas-world">
<svg class="canvas-edges" aria-hidden="true"></svg>
<div class="canvas-edge-labels"></div>
<div class="canvas-nodes">{{range .Nodes}}{{template "canvas-node" .}}{{end}}</div>
</div>
<p class="canvas-hint"{{if .Nodes}} hidden{{end}}>Double-click to add a note</p>
<p class="canvas-hint"{{if .Nodes}} hidden{{end}}>Double-click to add a note. Right-click or long-press for more.</p>
</div>
<div class="canvas-statusbar muted"><span class="canvas-status" aria-live="polite"></span><span class="canvas-zoom"></span></div>
{{if not .Error}}<div class="canvas-editor-toolbar" hidden>{{template "editor-toolbar"}}</div>{{end}}
</div>
<script type="application/json" id="canvas-data">{{.Doc}}</script>
</div>
assets/canvas/node.html
+1 -1
View File
@@ -13,7 +13,7 @@ units; canvas.js keeps style and data-color in sync while editing. */}}
{{define "canvas-file"}}<a class="canvas-card" href="{{.URL}}"><span class="canvas-card-icon">{{.Icon}}</span><span class="truncate">{{.Name}}</span></a>{{end}}
{{define "canvas-link"}}<a class="canvas-card" href="{{.URL}}" target="_blank" rel="noopener noreferrer"><img class="canvas-card-icon" src="https://icons.duckduckgo.com/ip3/{{.Host}}.ico" alt="" width="16" height="16" draggable="false"><span class="canvas-card-text"><span class="truncate">{{.Host}}</span><span class="muted truncate">{{.URL}}</span></span></a>{{end}}
{{define "canvas-link"}}<a class="canvas-card" href="{{.URL}}" target="_blank" rel="noopener noreferrer" title="{{.URL}}"><img class="canvas-card-icon" src="https://icons.duckduckgo.com/ip3/{{.Host}}.ico" alt="" width="16" height="16" draggable="false"><span class="canvas-card-text">{{if .Label}}<span class="truncate">{{.Label}}</span><span class="muted truncate">{{.Host}}</span>{{else}}<span class="truncate">{{.Host}}</span><span class="muted truncate">{{.URL}}</span>{{end}}</span></a>{{end}}
{{define "canvas-missing"}}<p class="canvas-missing">Missing: {{.}}</p>{{end}}