cd098bc9f3
Two annotation-editor asks: - Line tool: same drag flow as the arrow, no arrowhead. New toolbar button between arrow and rect, shortcut L. - Text box is resizable: swapped the single-line input for a textarea with resize:both and a drag corner. Enter still commits, Shift+Enter inserts a newline, blur commits. Multi-line rendering steps the fillText baseline by 1.15x the font size per line so the baked pixels match the live layout. The textarea swallows its own pointer events so drag-resizing the corner doesn't leak to the canvas underneath.
151 lines
8.3 KiB
HTML
151 lines
8.3 KiB
HTML
<!doctype html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="utf-8">
|
|
<title>Screenshot editor</title>
|
|
<link rel="stylesheet" href="editor.css">
|
|
</head>
|
|
<body>
|
|
<div class="topbar">
|
|
<button class="btn" id="back" title="Back to sidebar panel">
|
|
<svg viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round"><path d="M13 8H3M6 5L3 8l3 3"/></svg>
|
|
</button>
|
|
|
|
<!-- Crop mode splits the topbar into a confirm/cancel prompt while the
|
|
user is dragging a crop rectangle. Copy / Save / Discard live in
|
|
the toolbar now, so only the maximize + sound + close cluster on
|
|
the right needs to yield to the crop confirm buttons. -->
|
|
<button class="btn wide" id="apply-crop" hidden title="Apply the crop (Enter)">
|
|
<svg viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round"><path d="M3 8l3 3 7-7"/></svg>
|
|
<span>Apply crop</span>
|
|
</button>
|
|
<button class="btn wide" id="cancel-crop" hidden title="Cancel crop (Esc)">
|
|
<svg viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round"><path d="M4 4l8 8M12 4l-8 8"/></svg>
|
|
<span>Cancel</span>
|
|
</button>
|
|
|
|
<span class="spacer"></span>
|
|
<button class="btn danger" id="discard" title="Discard this capture and return to the panel">
|
|
<svg viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round">
|
|
<path d="M3 4h10"/>
|
|
<path d="M6 4V2h4v2"/>
|
|
<path d="M4 4l1 10h6l1-10"/>
|
|
<path d="M7 6.5v5M9 6.5v5"/>
|
|
</svg>
|
|
</button>
|
|
<button class="btn" id="toggle-sound" title="Toggle sound"></button>
|
|
<button class="btn" id="toggle-max" title="Expand the sidebar to full window / restore">
|
|
<svg viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="1.5"><path d="M2 6V2h4M14 6V2h-4M2 10v4h4M14 10v4h-4"/></svg>
|
|
</button>
|
|
<button class="btn" id="close-sidebar" title="Close the sidebar">
|
|
<svg viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round"><path d="M4 4l8 8M12 4l-8 8"/></svg>
|
|
</button>
|
|
</div>
|
|
|
|
<!-- Toolbar rows are grouped so that when the sidebar is too narrow to
|
|
hold everything, whole categories wrap together (tools stay with
|
|
tools, swatches with swatches, widths with widths, history with
|
|
history) instead of one dot spilling to a lonely second row.
|
|
`.tool-cluster` centres itself so on a maximized sidebar the drawing
|
|
groups sit in the middle of the row and the Copy/Save actions
|
|
right-anchor cleanly against the edge, instead of the tools crowding
|
|
the left when there's a lot of empty space. -->
|
|
<div class="toolbar">
|
|
<div class="tool-cluster">
|
|
<div class="tgroup" role="group" aria-label="Tools">
|
|
<button class="tool" data-tool="crop" title="Crop (C)">
|
|
<svg viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"><path d="M4 1v11h11M1 4h11v11"/></svg>
|
|
</button>
|
|
<button class="tool" data-tool="arrow" title="Arrow (A)">
|
|
<svg viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round"><path d="M3 13L13 3M13 3H8M13 3v5"/></svg>
|
|
</button>
|
|
<button class="tool" data-tool="line" title="Line (L)">
|
|
<svg viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round"><path d="M3 13L13 3"/></svg>
|
|
</button>
|
|
<button class="tool" data-tool="rect" title="Rectangle (R)">
|
|
<svg viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="1.5"><rect x="2.5" y="3.5" width="11" height="9"/></svg>
|
|
</button>
|
|
<button class="tool" data-tool="ellipse" title="Ellipse (O)">
|
|
<svg viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="1.5"><ellipse cx="8" cy="8" rx="5.5" ry="4"/></svg>
|
|
</button>
|
|
<button class="tool" data-tool="pen" title="Pen (P)">
|
|
<svg viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M2 14c1-3 3-6 6-8s5-3 6-3l-3 4c-2 1-4 3-6 4s-2 2-3 3z"/></svg>
|
|
</button>
|
|
<button class="tool" data-tool="text" title="Text (T)">
|
|
<svg viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round"><path d="M3 3h10M8 3v10M6 13h4"/></svg>
|
|
</button>
|
|
<button class="tool" data-tool="blur" title="Blur / mosaic redaction (B)">
|
|
<svg viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="1.5"><rect x="2.5" y="2.5" width="11" height="11"/><path d="M5 6h1M8 6h1M11 6h1M5 9h1M8 9h1M11 9h1M5 12h1M8 12h1M11 12h1"/></svg>
|
|
</button>
|
|
</div>
|
|
|
|
<div class="tgroup" role="group" aria-label="Colours">
|
|
<button class="swatch active" data-color="#ff3b30" style="background:#ff3b30" title="Red"></button>
|
|
<button class="swatch" data-color="#d6ff3d" style="background:#d6ff3d" title="Acid"></button>
|
|
<button class="swatch" data-color="#ffcc00" style="background:#ffcc00" title="Yellow"></button>
|
|
<button class="swatch" data-color="#0aa8ff" style="background:#0aa8ff" title="Blue"></button>
|
|
<button class="swatch" data-color="#ffffff" style="background:#ffffff" title="White"></button>
|
|
<button class="swatch" data-color="#000000" style="background:#000000" title="Black"></button>
|
|
</div>
|
|
|
|
<div class="tgroup" role="group" aria-label="Widths">
|
|
<button class="width" data-width="3" title="Thin"><span class="dot" style="width:4px;height:4px"></span></button>
|
|
<button class="width active" data-width="5" title="Medium"><span class="dot" style="width:7px;height:7px"></span></button>
|
|
<button class="width" data-width="9" title="Thick"><span class="dot" style="width:11px;height:11px"></span></button>
|
|
</div>
|
|
|
|
<div class="tgroup" role="group" aria-label="History">
|
|
<button class="btn" id="undo" title="Undo (Ctrl+Z)" disabled>
|
|
<svg viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round"><path d="M3 8c0-3 2-5 5-5s5 2 5 5-2 5-5 5"/><path d="M6 5L3 8l3 3"/></svg>
|
|
</button>
|
|
<button class="btn" id="redo" title="Redo (Ctrl+Shift+Z)" disabled>
|
|
<svg viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round"><path d="M13 8c0-3-2-5-5-5S3 5 3 8s2 5 5 5"/><path d="M10 5l3 3-3 3"/></svg>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Actions cluster — Copy / Save — anchored to the right of the toolbar.
|
|
Uses margin-left:auto so on wide sidebars it lives out at the end
|
|
of the drawing-tool row; when the sidebar is narrow enough that the
|
|
drawing tools already ate the width, it wraps as its own row to the
|
|
right instead of jumping the tools around. -->
|
|
<div class="tgroup actions" role="group" aria-label="Actions">
|
|
<button class="btn wide" id="copy" title="Copy PNG to clipboard (Ctrl+C)">
|
|
<svg viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="1.5"><rect x="4" y="4" width="9" height="10"/><path d="M3 12V3h9"/></svg>
|
|
<span>Copy</span>
|
|
</button>
|
|
<button class="btn wide primary" id="save" title="Save PNG (Ctrl+S)">
|
|
<svg viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="1.5"><path d="M8 2v9M4 7l4 4 4-4M2 14h12"/></svg>
|
|
<span>Save</span>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="board" id="board">
|
|
<div class="empty" id="empty">
|
|
<div>Loading capture…</div>
|
|
</div>
|
|
<div class="stage" id="stage" hidden>
|
|
<canvas id="base"></canvas>
|
|
<canvas id="over"></canvas>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Footer strip: the current capture's filename lives here now (moved out
|
|
of the topbar so its length can never push the window-control icons
|
|
to a second row), with an "Open in folder" affordance for jumping to
|
|
the scratch dir in the OS file explorer. -->
|
|
<div class="footer">
|
|
<span class="fname" id="name">screenshot</span>
|
|
<button class="fbtn" id="open-folder" title="Open the scratch folder in the file explorer">
|
|
<svg viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M2 5h4l1.5 2H14v6H2z"/><path d="M2 5V3h5"/></svg>
|
|
<span>Open in folder</span>
|
|
</button>
|
|
</div>
|
|
|
|
<div class="toast" id="toast"></div>
|
|
<a id="download-link" style="display:none"></a>
|
|
|
|
<script src="editor.js"></script>
|
|
</body>
|
|
</html>
|