JSON canvas initial
This commit is contained in:
@@ -0,0 +1,88 @@
|
||||
{{define "headerActions"}}
|
||||
<a class="btn" href="{{.PostURL}}" title="Back to the page">PAGE</a>
|
||||
<span class="dropdown">
|
||||
<button type="button" class="btn dropdown-toggle" data-action="canvas-menu" title="Canvas actions">CANVAS▾</button>
|
||||
<div class="dropdown-menu align-right">
|
||||
<button type="button" class="btn btn-block" data-action="canvas-rename">Rename…</button>
|
||||
<button type="button" class="btn btn-block danger" data-action="canvas-delete">Delete canvas</button>
|
||||
</div>
|
||||
</span>
|
||||
<button class="btn" type="button" data-action="canvas-save" title="Save (Ctrl+S)">SAVE</button>
|
||||
{{end}}
|
||||
|
||||
{{define "content"}}
|
||||
<script>
|
||||
// Full-bleed view mode: the canvas surface owns the viewport instead of the
|
||||
// centred reading column. Set here rather than server-side for the same
|
||||
// reason the editor does it — one class, no extra template plumbing.
|
||||
document.body.classList.add('canvas-mode');
|
||||
</script>
|
||||
{{if .CanvasError}}
|
||||
<div class="content">
|
||||
<h1>{{.ActiveCanvas}}</h1>
|
||||
<p class="canvas-broken">This canvas could not be opened — {{.CanvasError}}</p>
|
||||
<p>Fix it in the file itself, then reload.
|
||||
<a href="{{.ActiveCanvas}}.canvas?raw">view the raw file</a> ·
|
||||
<a href="{{.PostURL}}">back to the page</a></p>
|
||||
</div>
|
||||
{{else}}
|
||||
<div class="canvas-app">
|
||||
<nav class="canvas-tabs row" aria-label="Page views">
|
||||
<a class="canvas-tab" href="{{.PostURL}}">PAGE</a>
|
||||
{{range .Canvases}}<a class="canvas-tab{{if .Active}} is-active{{end}}" href="{{.URL}}">{{.Name}}</a>{{end}}
|
||||
</nav>
|
||||
<div class="canvas-toolbar row">
|
||||
<button type="button" class="btn btn-tool" data-action="undo" title="Undo (Ctrl+Z)" disabled>↶</button>
|
||||
<button type="button" class="btn btn-tool" data-action="redo" title="Redo (Ctrl+Shift+Z)" disabled>↷</button>
|
||||
<span class="toolbar-sep"></span>
|
||||
<button type="button" class="btn btn-tool" data-action="add-text" title="Add text node (T)">TEXT</button>
|
||||
<button type="button" class="btn btn-tool" data-action="add-file" title="Add file node (F)">FILE</button>
|
||||
<button type="button" class="btn btn-tool" data-action="add-link" title="Add link node (L)">LINK</button>
|
||||
<button type="button" class="btn btn-tool" data-action="add-group" title="Add group (G)">GROUP</button>
|
||||
<span class="toolbar-sep"></span>
|
||||
<span class="dropdown">
|
||||
<button type="button" class="btn btn-tool dropdown-toggle" data-action="color-menu" title="Colour of the selection">■▾</button>
|
||||
<div class="dropdown-menu canvas-color-menu">
|
||||
<button type="button" class="btn btn-tool btn-block" data-color="">Default</button>
|
||||
<button type="button" class="btn btn-tool btn-block" data-color="1"><span class="canvas-swatch" data-swatch="1"></span> Red</button>
|
||||
<button type="button" class="btn btn-tool btn-block" data-color="2"><span class="canvas-swatch" data-swatch="2"></span> Orange</button>
|
||||
<button type="button" class="btn btn-tool btn-block" data-color="3"><span class="canvas-swatch" data-swatch="3"></span> Yellow</button>
|
||||
<button type="button" class="btn btn-tool btn-block" data-color="4"><span class="canvas-swatch" data-swatch="4"></span> Green</button>
|
||||
<button type="button" class="btn btn-tool btn-block" data-color="5"><span class="canvas-swatch" data-swatch="5"></span> Cyan</button>
|
||||
<button type="button" class="btn btn-tool btn-block" data-color="6"><span class="canvas-swatch" data-swatch="6"></span> Purple</button>
|
||||
</div>
|
||||
</span>
|
||||
<button type="button" class="btn btn-tool" data-action="delete-selection" title="Delete selection (Del)">×</button>
|
||||
<span class="toolbar-sep"></span>
|
||||
<button type="button" class="btn btn-tool" data-action="zoom-out" title="Zoom out (−)">−</button>
|
||||
<button type="button" class="btn btn-tool" data-action="zoom-reset" title="Reset zoom to 100% (0)"><span data-canvas-zoom>100%</span></button>
|
||||
<button type="button" class="btn btn-tool" data-action="zoom-in" title="Zoom in (+)">+</button>
|
||||
<button type="button" class="btn btn-tool" data-action="fit" title="Fit to content (9)">FIT</button>
|
||||
<span class="canvas-status muted" data-canvas-status></span>
|
||||
</div>
|
||||
<div class="canvas-surface" id="canvas-surface" tabindex="0">
|
||||
<div class="canvas-world" id="canvas-world">
|
||||
<div class="canvas-layer" id="canvas-groups"></div>
|
||||
<svg class="canvas-edges" id="canvas-edges" xmlns="http://www.w3.org/2000/svg"></svg>
|
||||
<div class="canvas-layer" id="canvas-nodes"></div>
|
||||
</div>
|
||||
<div class="canvas-marquee" id="canvas-marquee" hidden></div>
|
||||
<div class="canvas-hint muted" data-canvas-hint hidden>
|
||||
Empty canvas — use the toolbar to add a node. Drag the background to pan, ctrl+wheel to zoom.
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<script>window.CANVAS_DATA = {{.CanvasJSON}};</script>
|
||||
<script src="/_/editor/vendor/codemirror.bundle.js?v={{editorBundleVersion}}"></script>
|
||||
<script src="/_/editor/wikicomplete.js"></script>
|
||||
<script src="/_/canvas/doc.js"></script>
|
||||
<script src="/_/canvas/view.js"></script>
|
||||
<script src="/_/canvas/select.js"></script>
|
||||
<script src="/_/canvas/nodes.js"></script>
|
||||
<script src="/_/canvas/edges.js"></script>
|
||||
<script src="/_/canvas/interact.js"></script>
|
||||
<script src="/_/canvas/edit.js"></script>
|
||||
<script src="/_/canvas/save.js"></script>
|
||||
<script src="/_/canvas/main.js"></script>
|
||||
{{end}}
|
||||
{{end}}
|
||||
Reference in New Issue
Block a user