mirror of
https://github.com/github/awesome-copilot.git
synced 2026-07-16 19:03:26 +00:00
Add APNG Studio canvas extension (#2272)
* Add APNG Studio canvas extension APNG Studio is an interactive GitHub Copilot canvas extension for building Animated PNG (APNG) files from frames: draw or upload frames, tune per-frame timing and compositing, preview live, send the result to a phone by QR, and export an animated .png. Adds extensions/apng-studio/ with the required .github/plugin/plugin.json and assets/preview.png, and regenerates .github/plugin/marketplace.json. Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com> * Address review feedback for APNG Studio Security and robustness (extension.mjs): - Reject "." and ".." project ids so canvas/action input cannot resolve outside artifacts/. - Bound request bodies (1 MiB JSON, 40 MiB frame upload); return 413 when exceeded. - Reject malformed JSON with 400 instead of coercing to {}, so a truncated body cannot trigger destructive routes such as /frames/clear. - Scope shares per project so one canvas cannot rotate or stop another's share; the LAN server is shared and torn down once no shares remain. - get_state treats hiddenFirst as active only with >=2 frames, matching the encoder, so a single-frame project reports the correct duration. Accessibility (web/): - Expose Pen/Eraser state with aria-pressed and keep it in sync in setTool. - Mark the toast as an aria-live status region. Packaging: - Add extensions/apng-studio/.gitignore with artifacts/ so the documented runtime-data exclusion holds for this extension. - Update the README install section to reference the committed awesome-copilot extension path. Regenerated .github/plugin/marketplace.json. * Use "GitHub Copilot app" wording Update the plugin description (and regenerated marketplace entry) to refer to the host as the GitHub Copilot app. * Address deeper review for APNG Studio Security: - Require a per-server access token on every loopback data/mutation request (minted per canvas server, carried in the iframe URL, attached to every renderer request). Static assets stay public. Blocks a local process or cross-origin page from reading state or driving mutations. Concurrency and durability: - Serialize the load-mutate-save cycle per project; dedupe concurrent first loads; write project.json via temp file + rename. Lifecycle: - Track SSE clients per instance and end them before server.close(). - Stop a project's LAN share only when no other panel references it. Correctness: - Report exact numerator/denominator total duration; handle pointercancel. QR and accessibility: - Place QR version bits least-significant-bit first (versions 7-10). - Associate delay/fps/dispose/blend labels with their inputs via for=. * Address deeper concurrency and validation review for APNG Studio - Run assemble() under the project lock; add_color_frame renders and appends within one lock. - Validate uploaded frames (PNG chunk scan, size + dimension checks) before writing; first frame stores real dimensions; CanvasError maps to 400. - Validate move delta; clear frames in memory before deleting files. - Route the open-handler rename through applySettings. - Deduplicate LAN share startup; clean up if the canvas closes mid-start. - End SSE streams before server.close(); skip dead streams in broadcast. - Exact fractional duration; drawing surface stays >= 1px; refresh state before re-seeding "start from last frame". * Address review: PNG format validation, share bind, limits, a11y - Validate uploaded frames are 8-bit RGBA non-interlaced PNGs (standard compression/filter); reject formats the codec can't encode. - Cap projects at 600 frames (add + duplicate). - Bind the LAN share server to the private address, not 0.0.0.0; require a private address and rebind when it changes while idle; build the URL from the bound address. - Align width/height inputs and clampSize to the 2048 maximum. - Size the drawing surface by width + aspect ratio for narrow panels. - set_frame with an unknown frameId returns a validation error. * Address review: encoded-byte budget, timing modes, id keys, load errors - 256 MiB aggregate encoded-byte budget (add + duplicate); per-frame size tracked and backfilled on load, so a frame count alone no longer bounds assembly memory. - Frame timing is one exclusive mode (delayMs | fps | delayNum/delayDen); combinations are rejected instead of producing hybrid delays. - Collision-resistant project storage keys: safe ids are used verbatim (existing projects still load) and only unsafe ids get a hash suffix, so "foo/bar" and "foo?bar" can't share a directory. - Load only treats a missing file as a new project; other read/parse errors surface instead of silently overwriting real data. - Share server binds to a real LAN interface (skips virtual/VPN/container, prefers physical NICs and common ranges). - Generated export names get millisecond + random suffix to avoid same-second overwrite. - PNG validator accepts the encoder's Uint8Array so agent solid-color frames aren't rejected. * Address review: crash-safe frame writes, server startup, APNG first frame - Write the PNG before mutating project metadata on add/duplicate, and delete after persisting, so an interrupted disk op can't dangle a reference or advance unsaved state. - Evict a project from the in-memory cache if its save fails, so a transient write error can't desync the live session from disk. - Reject on the loopback server's listen error and drop a half-initialized instance so startup failures clean up and can retry. - Normalize APNG dispose_op PREVIOUS to BACKGROUND on the first animated frame (spec requirement). - Release decoded ImageBitmaps after use so a large upload batch doesn't retain native image memory. - Surface otherwise-silent async UI failures via a toast; check the state response is ok before parsing it. --------- Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com>
This commit is contained in:
Andrea Liliana Griffiths
committed by
GitHub
GitHub
parent
f8d98b41d1
commit
0916fe444d
@@ -0,0 +1,669 @@
|
||||
"use strict";
|
||||
|
||||
// ---- tiny helpers -------------------------------------------------------
|
||||
const $ = (id) => document.getElementById(id);
|
||||
const nonce = () => Date.now().toString(36) + Math.random().toString(36).slice(2, 6);
|
||||
|
||||
// The server mints a per-session access token and passes it in this iframe's
|
||||
// URL. Attach it to every data request so other local origins that guess the
|
||||
// port cannot read state or drive mutations.
|
||||
const ACCESS_KEY = new URLSearchParams(location.search).get("k") || "";
|
||||
function withKey(path) {
|
||||
const u = new URL(path, location.origin);
|
||||
if (ACCESS_KEY) u.searchParams.set("k", ACCESS_KEY);
|
||||
return u.pathname + u.search;
|
||||
}
|
||||
|
||||
async function api(path, body) {
|
||||
const res = await fetch(withKey(path), {
|
||||
method: "POST",
|
||||
headers: { "Content-Type": "application/json" },
|
||||
body: JSON.stringify(body || {}),
|
||||
});
|
||||
if (!res.ok) throw new Error((await res.text()) || res.statusText);
|
||||
const text = await res.text();
|
||||
return text ? JSON.parse(text) : {};
|
||||
}
|
||||
|
||||
function toast(msg, ms = 2600) {
|
||||
const t = $("toast");
|
||||
t.textContent = msg;
|
||||
t.hidden = false;
|
||||
clearTimeout(toast._t);
|
||||
toast._t = setTimeout(() => (t.hidden = true), ms);
|
||||
}
|
||||
|
||||
// Surface any otherwise-unhandled async-handler failure to the user instead of
|
||||
// letting it become a silent unhandled rejection with no feedback.
|
||||
if (typeof window !== "undefined") {
|
||||
window.addEventListener("unhandledrejection", (e) => {
|
||||
toast("Error: " + (e.reason?.message || e.reason || "something went wrong"));
|
||||
});
|
||||
}
|
||||
|
||||
function clampSize(w, h, max = 2048) {
|
||||
w = Math.max(1, Math.round(w));
|
||||
h = Math.max(1, Math.round(h));
|
||||
const longer = Math.max(w, h);
|
||||
if (longer > max) {
|
||||
const s = max / longer;
|
||||
w = Math.max(1, Math.round(w * s));
|
||||
h = Math.max(1, Math.round(h * s));
|
||||
}
|
||||
return { w, h };
|
||||
}
|
||||
|
||||
// ---- state --------------------------------------------------------------
|
||||
let state = { name: "animation", width: 256, height: 256, loops: 0, hiddenFirst: false, frames: [] };
|
||||
let assetNonce = nonce();
|
||||
|
||||
function defaultDelay() {
|
||||
const v = parseInt($("in-delay-all").value, 10);
|
||||
return Number.isFinite(v) && v >= 0 ? v : 120;
|
||||
}
|
||||
|
||||
async function refreshState() {
|
||||
const res = await fetch(withKey("/state"));
|
||||
if (!res.ok) throw new Error((await res.text()) || res.statusText);
|
||||
state = await res.json();
|
||||
assetNonce = nonce();
|
||||
render();
|
||||
}
|
||||
|
||||
// ---- rendering ----------------------------------------------------------
|
||||
function render() {
|
||||
renderPreview();
|
||||
renderMeta();
|
||||
renderSettings();
|
||||
renderFrames();
|
||||
syncDrawStage();
|
||||
}
|
||||
|
||||
function renderPreview() {
|
||||
const img = $("preview");
|
||||
const empty = $("empty-preview");
|
||||
const has = state.frames.length > 0;
|
||||
empty.hidden = has;
|
||||
if (has) {
|
||||
img.src = withKey(`/preview.png?n=${assetNonce}`);
|
||||
img.hidden = false;
|
||||
img.classList.toggle("pixelated", Math.max(state.width, state.height) < 96);
|
||||
} else {
|
||||
img.hidden = true;
|
||||
}
|
||||
}
|
||||
|
||||
function renderMeta() {
|
||||
const n = state.frames.length;
|
||||
const hidden = state.hiddenFirst && n >= 2;
|
||||
const animated = hidden ? state.frames.slice(1) : state.frames;
|
||||
const totalMs = Math.round(
|
||||
animated.reduce((a, f) => a + (f.delayNum || 0) / (f.delayDen || 1000), 0) * 1000
|
||||
);
|
||||
$("meta-frames").textContent = `${n} frame${n === 1 ? "" : "s"}${hidden ? " · 1 static" : ""}`;
|
||||
$("meta-duration").textContent = `${(totalMs / 1000).toFixed(1)}s`;
|
||||
$("meta-loops").textContent = state.loops === 0 ? "loops ∞" : `loops ${state.loops}`;
|
||||
const busy = n === 0;
|
||||
$("btn-export").disabled = busy;
|
||||
$("btn-download").disabled = busy;
|
||||
$("btn-restart").disabled = busy;
|
||||
$("btn-share").disabled = busy;
|
||||
}
|
||||
|
||||
function renderSettings() {
|
||||
const n = state.frames.length;
|
||||
const hasFrames = n > 0;
|
||||
const w = $("in-width"),
|
||||
h = $("in-height"),
|
||||
l = $("in-loops");
|
||||
if (document.activeElement !== w) w.value = state.width;
|
||||
if (document.activeElement !== h) h.value = state.height;
|
||||
if (document.activeElement !== l) l.value = state.loops;
|
||||
w.disabled = hasFrames;
|
||||
h.disabled = hasFrames;
|
||||
$("dim-hint").style.display = hasFrames ? "block" : "none";
|
||||
|
||||
const hf = $("in-hidden-first");
|
||||
hf.checked = !!state.hiddenFirst;
|
||||
hf.disabled = n < 2;
|
||||
$("hidden-first-label").classList.toggle("disabled", n < 2);
|
||||
$("hidden-first-hint").hidden = !(state.hiddenFirst && n >= 2);
|
||||
|
||||
for (const id of ["btn-delay-all", "btn-fps", "btn-ops-all"]) $(id).disabled = !hasFrames;
|
||||
}
|
||||
|
||||
function renderFrames() {
|
||||
const strip = $("frame-strip");
|
||||
const empty = $("empty-frames");
|
||||
strip.innerHTML = "";
|
||||
empty.hidden = state.frames.length > 0;
|
||||
const hidden = state.hiddenFirst && state.frames.length >= 2;
|
||||
state.frames.forEach((f, i) => {
|
||||
const isStatic = hidden && i === 0;
|
||||
const card = document.createElement("div");
|
||||
card.className = "frame-card" + (isStatic ? " is-static" : "");
|
||||
|
||||
const thumbWrap = document.createElement("div");
|
||||
thumbWrap.className = "checker frame-thumb-wrap";
|
||||
const thumb = document.createElement("img");
|
||||
thumb.className = "frame-thumb";
|
||||
thumb.alt = `Frame ${i + 1}`;
|
||||
thumb.src = withKey(`/frame?id=${encodeURIComponent(f.id)}&n=${assetNonce}`);
|
||||
thumbWrap.appendChild(thumb);
|
||||
if (isStatic) {
|
||||
const badge = document.createElement("span");
|
||||
badge.className = "static-badge";
|
||||
badge.textContent = "STATIC";
|
||||
thumbWrap.appendChild(badge);
|
||||
}
|
||||
|
||||
const body = document.createElement("div");
|
||||
body.className = "frame-body";
|
||||
|
||||
const idx = document.createElement("div");
|
||||
idx.className = "frame-index";
|
||||
idx.textContent = isStatic ? `#${i + 1} · fallback` : `#${i + 1}`;
|
||||
|
||||
// Inputs (declared first so the shared commit closure can read them).
|
||||
const numIn = numberInput(f.delayNum, 0, 65535, "Delay numerator");
|
||||
const denIn = numberInput(f.delayDen, 1, 65535, "Delay denominator");
|
||||
const disposeSel = selectEl(
|
||||
[[0, "None"], [1, "Background"], [2, "Previous"]],
|
||||
f.disposeOp,
|
||||
"Dispose op — what to do with the canvas after this frame"
|
||||
);
|
||||
const blendSel = selectEl(
|
||||
[[0, "Source"], [1, "Over"]],
|
||||
f.blendOp,
|
||||
"Blend op — how this frame is drawn onto the canvas"
|
||||
);
|
||||
const msHint = document.createElement("span");
|
||||
msHint.className = "ms-hint muted";
|
||||
|
||||
const updateHint = () => {
|
||||
const num = parseInt(numIn.value, 10) || 0;
|
||||
const den = parseInt(denIn.value, 10) || 1000;
|
||||
const ms = Math.round((num / den) * 1000);
|
||||
const fps = num > 0 ? den / num : 0;
|
||||
const fpsTxt = fps ? ` · ${Number.isInteger(fps) ? fps : fps.toFixed(1)} fps` : "";
|
||||
msHint.textContent = `= ${ms} ms${fpsTxt}`;
|
||||
};
|
||||
updateHint();
|
||||
const commit = () =>
|
||||
api("/frames/props", {
|
||||
id: f.id,
|
||||
delayNum: parseInt(numIn.value, 10) || 0,
|
||||
delayDen: parseInt(denIn.value, 10) || 1000,
|
||||
disposeOp: parseInt(disposeSel.value, 10) || 0,
|
||||
blendOp: parseInt(blendSel.value, 10) || 0,
|
||||
}).catch((e) => toast("Error: " + e.message));
|
||||
|
||||
numIn.addEventListener("input", updateHint);
|
||||
denIn.addEventListener("input", updateHint);
|
||||
numIn.addEventListener("change", commit);
|
||||
denIn.addEventListener("change", commit);
|
||||
disposeSel.addEventListener("change", commit);
|
||||
blendSel.addEventListener("change", commit);
|
||||
|
||||
const delayRow = document.createElement("div");
|
||||
delayRow.className = "frame-field";
|
||||
delayRow.append(fieldLabel("delay"), numIn, slash(), denIn, msHint);
|
||||
|
||||
const opsRow = document.createElement("div");
|
||||
opsRow.className = "frame-field";
|
||||
opsRow.append(fieldLabel("dispose"), disposeSel);
|
||||
const blendRow = document.createElement("div");
|
||||
blendRow.className = "frame-field";
|
||||
blendRow.append(fieldLabel("blend"), blendSel);
|
||||
|
||||
const actions = document.createElement("div");
|
||||
actions.className = "frame-actions";
|
||||
actions.append(
|
||||
iconBtn("◀", "Move left", i === 0, () => api("/frames/move", { id: f.id, delta: -1 })),
|
||||
iconBtn("▶", "Move right", i === state.frames.length - 1, () =>
|
||||
api("/frames/move", { id: f.id, delta: 1 })
|
||||
),
|
||||
iconBtn("⧉", "Duplicate", false, () => api("/frames/duplicate", { id: f.id })),
|
||||
iconBtn("✕", "Delete", false, () => api("/frames/delete", { id: f.id }), true)
|
||||
);
|
||||
|
||||
if (isStatic) {
|
||||
[numIn, denIn, disposeSel, blendSel].forEach((el) => (el.disabled = true));
|
||||
msHint.textContent = "not animated";
|
||||
}
|
||||
|
||||
body.append(idx, delayRow, opsRow, blendRow, actions);
|
||||
card.append(thumbWrap, body);
|
||||
strip.appendChild(card);
|
||||
});
|
||||
}
|
||||
|
||||
function numberInput(value, min, max, title) {
|
||||
const el = document.createElement("input");
|
||||
el.type = "number";
|
||||
el.className = "num-in";
|
||||
el.min = String(min);
|
||||
el.max = String(max);
|
||||
el.step = "1";
|
||||
el.value = value;
|
||||
el.title = title;
|
||||
return el;
|
||||
}
|
||||
|
||||
function selectEl(options, value, title) {
|
||||
const s = document.createElement("select");
|
||||
s.className = "frame-select";
|
||||
s.title = title;
|
||||
for (const [val, text] of options) {
|
||||
const o = document.createElement("option");
|
||||
o.value = String(val);
|
||||
o.textContent = text;
|
||||
s.appendChild(o);
|
||||
}
|
||||
s.value = String(value);
|
||||
return s;
|
||||
}
|
||||
|
||||
function fieldLabel(text) {
|
||||
const s = document.createElement("span");
|
||||
s.className = "frame-label muted";
|
||||
s.textContent = text;
|
||||
return s;
|
||||
}
|
||||
|
||||
function slash() {
|
||||
const s = document.createElement("span");
|
||||
s.className = "slash muted";
|
||||
s.textContent = "/";
|
||||
return s;
|
||||
}
|
||||
|
||||
function iconBtn(label, title, disabled, onClick, danger) {
|
||||
const b = document.createElement("button");
|
||||
b.className = "icon-btn" + (danger ? " danger" : "");
|
||||
b.textContent = label;
|
||||
b.title = title;
|
||||
b.setAttribute("aria-label", title);
|
||||
b.disabled = !!disabled;
|
||||
b.addEventListener("click", async () => {
|
||||
try {
|
||||
await onClick();
|
||||
} catch (e) {
|
||||
toast("Error: " + e.message);
|
||||
}
|
||||
});
|
||||
return b;
|
||||
}
|
||||
|
||||
// ---- settings handlers --------------------------------------------------
|
||||
async function commitLoops() {
|
||||
await api("/settings", { loops: parseInt($("in-loops").value, 10) || 0 });
|
||||
}
|
||||
async function commitDim() {
|
||||
if (state.frames.length > 0) return;
|
||||
const w = parseInt($("in-width").value, 10);
|
||||
const h = parseInt($("in-height").value, 10);
|
||||
const { w: cw, h: ch } = clampSize(w || state.width, h || state.height);
|
||||
await api("/settings", { width: cw, height: ch });
|
||||
}
|
||||
function debounce(fn, ms) {
|
||||
let t = null;
|
||||
return () => {
|
||||
clearTimeout(t);
|
||||
t = setTimeout(fn, ms);
|
||||
};
|
||||
}
|
||||
// Commit on `input` (fires for stepper buttons and arrow keys in every engine,
|
||||
// including the host WebKit view where `change` is unreliable for steppers) as
|
||||
// well as `change` (final blur/Enter). The `input` path is debounced so holding
|
||||
// an arrow or typing a value doesn't spam the server.
|
||||
const commitDimSoon = debounce(commitDim, 300);
|
||||
const commitLoopsSoon = debounce(commitLoops, 300);
|
||||
for (const id of ["in-width", "in-height"]) {
|
||||
$(id).addEventListener("input", commitDimSoon);
|
||||
$(id).addEventListener("change", commitDim);
|
||||
}
|
||||
$("in-loops").addEventListener("input", commitLoopsSoon);
|
||||
$("in-loops").addEventListener("change", commitLoops);
|
||||
$("in-hidden-first").addEventListener("change", async (e) => {
|
||||
await api("/settings", { hiddenFirst: e.target.checked });
|
||||
});
|
||||
$("btn-delay-all").addEventListener("click", async () => {
|
||||
const ms = defaultDelay();
|
||||
await api("/frames/props-all", { delayMs: ms });
|
||||
toast(`All delays set to ${ms} ms`);
|
||||
});
|
||||
$("btn-fps").addEventListener("click", async () => {
|
||||
const fps = Math.max(1, Math.min(120, parseInt($("in-fps").value, 10) || 12));
|
||||
await api("/frames/props-all", { fps });
|
||||
toast(`All frames set to ${fps} fps`);
|
||||
});
|
||||
$("btn-ops-all").addEventListener("click", async () => {
|
||||
await api("/frames/props-all", {
|
||||
disposeOp: parseInt($("in-dispose-all").value, 10) || 0,
|
||||
blendOp: parseInt($("in-blend-all").value, 10) || 0,
|
||||
});
|
||||
toast("Applied dispose & blend to all frames");
|
||||
});
|
||||
$("btn-clear").addEventListener("click", async () => {
|
||||
if (!state.frames.length) return;
|
||||
if (!confirm("Remove all frames?")) return;
|
||||
await api("/frames/clear", {});
|
||||
});
|
||||
|
||||
// ---- export / download --------------------------------------------------
|
||||
$("btn-export").addEventListener("click", async () => {
|
||||
try {
|
||||
const r = await api("/export", {});
|
||||
$("saved-path").hidden = false;
|
||||
$("saved-path").textContent = "Saved: " + r.path;
|
||||
toast("Exported " + r.name);
|
||||
} catch (e) {
|
||||
toast("Export failed: " + e.message);
|
||||
}
|
||||
});
|
||||
$("btn-download").addEventListener("click", async () => {
|
||||
const res = await fetch(withKey(`/preview.png?n=${nonce()}`));
|
||||
const blob = await res.blob();
|
||||
const a = document.createElement("a");
|
||||
a.href = URL.createObjectURL(blob);
|
||||
a.download = (state.name || "animation").replace(/[^\w.-]+/g, "_") + ".png";
|
||||
document.body.appendChild(a);
|
||||
a.click();
|
||||
a.remove();
|
||||
setTimeout(() => URL.revokeObjectURL(a.href), 4000);
|
||||
});
|
||||
$("btn-restart").addEventListener("click", () => {
|
||||
// Re-assigning an identical src is a no-op, so bump the nonce to force a
|
||||
// fresh fetch and restart the animation from the first frame.
|
||||
assetNonce = nonce();
|
||||
renderPreview();
|
||||
});
|
||||
|
||||
// ---- send to phone ------------------------------------------------------
|
||||
let shareCountdown = null;
|
||||
|
||||
$("btn-share").addEventListener("click", async () => {
|
||||
const btn = $("btn-share");
|
||||
btn.disabled = true;
|
||||
try {
|
||||
const info = await api("/share/start", {});
|
||||
openSharePanel(info);
|
||||
} catch (e) {
|
||||
toast("Couldn't start sharing: " + e.message);
|
||||
} finally {
|
||||
btn.disabled = state.frames.length === 0;
|
||||
}
|
||||
});
|
||||
|
||||
$("btn-share-stop").addEventListener("click", stopSharing);
|
||||
|
||||
function openSharePanel(info) {
|
||||
$("share-panel").hidden = false;
|
||||
// Cache-bust the QR so a new token's code is fetched each time.
|
||||
$("share-qr-img").src = withKey(`/share/qr.png?ts=${Date.now()}`);
|
||||
const link = $("share-url");
|
||||
link.href = info.url;
|
||||
link.textContent = info.url.replace(/^https?:\/\//, "");
|
||||
startShareCountdown(info.expiresAt);
|
||||
}
|
||||
|
||||
function startShareCountdown(expiresAt) {
|
||||
clearInterval(shareCountdown);
|
||||
const tick = () => {
|
||||
const ms = expiresAt - Date.now();
|
||||
if (ms <= 0) {
|
||||
clearInterval(shareCountdown);
|
||||
$("share-panel").hidden = true;
|
||||
toast("Phone link expired");
|
||||
api("/share/stop", {}).catch(() => {});
|
||||
return;
|
||||
}
|
||||
const m = Math.floor(ms / 60000);
|
||||
const s = Math.floor((ms % 60000) / 1000);
|
||||
$("share-expiry").textContent = `Expires in ${m}:${String(s).padStart(2, "0")}`;
|
||||
};
|
||||
tick();
|
||||
shareCountdown = setInterval(tick, 1000);
|
||||
}
|
||||
|
||||
async function stopSharing() {
|
||||
clearInterval(shareCountdown);
|
||||
$("share-panel").hidden = true;
|
||||
try {
|
||||
await api("/share/stop", {});
|
||||
} catch (_) {
|
||||
/* server may have already expired the share */
|
||||
}
|
||||
}
|
||||
|
||||
// ---- upload -------------------------------------------------------------
|
||||
$("btn-upload").addEventListener("click", () => $("file-input").click());
|
||||
$("file-input").addEventListener("change", async (e) => {
|
||||
const files = [...e.target.files];
|
||||
e.target.value = "";
|
||||
if (files.length) await addFiles(files);
|
||||
});
|
||||
|
||||
async function addFiles(files) {
|
||||
try {
|
||||
toast(`Adding ${files.length} image${files.length === 1 ? "" : "s"}…`);
|
||||
if (state.frames.length === 0) {
|
||||
const first = await createImageBitmap(files[0]);
|
||||
const { w, h } = clampSize(first.width, first.height);
|
||||
first.close?.();
|
||||
await api("/settings", { width: w, height: h });
|
||||
await refreshState();
|
||||
}
|
||||
for (const f of files) await addImageFile(f);
|
||||
toast("Frames added");
|
||||
} catch (e) {
|
||||
toast("Upload error: " + e.message);
|
||||
}
|
||||
}
|
||||
|
||||
async function addImageFile(file) {
|
||||
const bmp = await createImageBitmap(file);
|
||||
const c = document.createElement("canvas");
|
||||
c.width = state.width;
|
||||
c.height = state.height;
|
||||
try {
|
||||
drawContain(c.getContext("2d"), bmp, state.width, state.height);
|
||||
} finally {
|
||||
// Release the decoded bitmap right after the synchronous draw so a large
|
||||
// batch doesn't retain native image memory until GC.
|
||||
bmp.close?.();
|
||||
}
|
||||
const blob = await new Promise((r) => c.toBlob(r, "image/png"));
|
||||
await postFrame(blob, defaultDelay());
|
||||
}
|
||||
|
||||
function drawContain(ctx, img, W, H) {
|
||||
const s = Math.min(W / img.width, H / img.height);
|
||||
const dw = img.width * s;
|
||||
const dh = img.height * s;
|
||||
ctx.clearRect(0, 0, W, H);
|
||||
ctx.drawImage(img, (W - dw) / 2, (H - dh) / 2, dw, dh);
|
||||
}
|
||||
|
||||
async function postFrame(blob, delayMs) {
|
||||
const res = await fetch(withKey(`/frames?delayMs=${delayMs || 0}`), { method: "POST", body: blob });
|
||||
if (!res.ok) throw new Error(await res.text());
|
||||
}
|
||||
|
||||
// ---- drawing ------------------------------------------------------------
|
||||
const drawCanvas = $("draw-canvas");
|
||||
const dctx = drawCanvas.getContext("2d");
|
||||
let drawTool = "pen";
|
||||
let drawing = false;
|
||||
let lastPt = null;
|
||||
|
||||
$("btn-toggle-draw").addEventListener("click", () => {
|
||||
const panel = $("draw-panel");
|
||||
panel.hidden = !panel.hidden;
|
||||
if (!panel.hidden) initDrawCanvas();
|
||||
});
|
||||
$("btn-cancel-draw").addEventListener("click", () => ($("draw-panel").hidden = true));
|
||||
$("tool-pen").addEventListener("click", () => setTool("pen"));
|
||||
$("tool-eraser").addEventListener("click", () => setTool("eraser"));
|
||||
function setTool(t) {
|
||||
drawTool = t;
|
||||
$("tool-pen").classList.toggle("active", t === "pen");
|
||||
$("tool-eraser").classList.toggle("active", t === "eraser");
|
||||
$("tool-pen").setAttribute("aria-pressed", String(t === "pen"));
|
||||
$("tool-eraser").setAttribute("aria-pressed", String(t === "eraser"));
|
||||
}
|
||||
$("btn-clear-draw").addEventListener("click", () => {
|
||||
dctx.clearRect(0, 0, drawCanvas.width, drawCanvas.height);
|
||||
});
|
||||
$("btn-fill").addEventListener("click", () => {
|
||||
dctx.save();
|
||||
dctx.globalCompositeOperation = "source-over";
|
||||
dctx.fillStyle = $("draw-color").value;
|
||||
dctx.fillRect(0, 0, drawCanvas.width, drawCanvas.height);
|
||||
dctx.restore();
|
||||
});
|
||||
$("opt-onion").addEventListener("change", syncOnion);
|
||||
$("opt-from-last").addEventListener("change", initDrawCanvas);
|
||||
|
||||
function syncDrawStage() {
|
||||
// Size the drawing surface to the project dimensions and scale for display.
|
||||
if (drawCanvas.width !== state.width || drawCanvas.height !== state.height) {
|
||||
drawCanvas.width = state.width;
|
||||
drawCanvas.height = state.height;
|
||||
}
|
||||
const longer = Math.max(state.width, state.height) || 1;
|
||||
const scale = Math.min(360, Math.max(200, longer)) / longer;
|
||||
const dispW = Math.max(1, Math.round(state.width * scale));
|
||||
// Drive the display size from the width plus the intrinsic aspect ratio and
|
||||
// let height follow, so a narrow side panel (CSS max-width) shrinks the
|
||||
// surface proportionally instead of stretching a fixed height.
|
||||
const ratio = `${state.width} / ${state.height}`;
|
||||
drawCanvas.style.width = dispW + "px";
|
||||
drawCanvas.style.height = "auto";
|
||||
drawCanvas.style.aspectRatio = ratio;
|
||||
drawCanvas.style.imageRendering = scale > 1.4 ? "pixelated" : "auto";
|
||||
const onion = $("onion-img");
|
||||
onion.style.width = dispW + "px";
|
||||
onion.style.height = "auto";
|
||||
onion.style.aspectRatio = ratio;
|
||||
if (!$("draw-panel").hidden) syncOnion();
|
||||
}
|
||||
|
||||
function lastFrame() {
|
||||
return state.frames.length ? state.frames[state.frames.length - 1] : null;
|
||||
}
|
||||
|
||||
function syncOnion() {
|
||||
const onion = $("onion-img");
|
||||
const lf = lastFrame();
|
||||
if ($("opt-onion").checked && lf) {
|
||||
onion.src = withKey(`/frame?id=${encodeURIComponent(lf.id)}&n=${assetNonce}`);
|
||||
onion.hidden = false;
|
||||
} else {
|
||||
onion.hidden = true;
|
||||
}
|
||||
}
|
||||
|
||||
function initDrawCanvas() {
|
||||
syncDrawStage();
|
||||
dctx.clearRect(0, 0, drawCanvas.width, drawCanvas.height);
|
||||
const lf = lastFrame();
|
||||
if ($("opt-from-last").checked && lf) {
|
||||
const img = new Image();
|
||||
img.onload = () => dctx.drawImage(img, 0, 0, drawCanvas.width, drawCanvas.height);
|
||||
img.src = withKey(`/frame?id=${encodeURIComponent(lf.id)}&n=${assetNonce}`);
|
||||
}
|
||||
syncOnion();
|
||||
}
|
||||
|
||||
function canvasPoint(e) {
|
||||
const rect = drawCanvas.getBoundingClientRect();
|
||||
return {
|
||||
x: (e.clientX - rect.left) * (drawCanvas.width / rect.width),
|
||||
y: (e.clientY - rect.top) * (drawCanvas.height / rect.height),
|
||||
};
|
||||
}
|
||||
function strokeTo(pt) {
|
||||
dctx.globalCompositeOperation = drawTool === "eraser" ? "destination-out" : "source-over";
|
||||
dctx.strokeStyle = $("draw-color").value;
|
||||
dctx.fillStyle = $("draw-color").value;
|
||||
dctx.lineWidth = parseInt($("draw-size").value, 10) || 6;
|
||||
dctx.lineCap = "round";
|
||||
dctx.lineJoin = "round";
|
||||
if (lastPt) {
|
||||
dctx.beginPath();
|
||||
dctx.moveTo(lastPt.x, lastPt.y);
|
||||
dctx.lineTo(pt.x, pt.y);
|
||||
dctx.stroke();
|
||||
} else {
|
||||
dctx.beginPath();
|
||||
dctx.arc(pt.x, pt.y, dctx.lineWidth / 2, 0, Math.PI * 2);
|
||||
dctx.fill();
|
||||
}
|
||||
lastPt = pt;
|
||||
}
|
||||
drawCanvas.addEventListener("pointerdown", (e) => {
|
||||
drawing = true;
|
||||
lastPt = null;
|
||||
drawCanvas.setPointerCapture(e.pointerId);
|
||||
strokeTo(canvasPoint(e));
|
||||
});
|
||||
drawCanvas.addEventListener("pointermove", (e) => {
|
||||
if (drawing) strokeTo(canvasPoint(e));
|
||||
});
|
||||
function endStroke() {
|
||||
drawing = false;
|
||||
lastPt = null;
|
||||
}
|
||||
drawCanvas.addEventListener("pointerup", endStroke);
|
||||
drawCanvas.addEventListener("pointerleave", endStroke);
|
||||
drawCanvas.addEventListener("pointercancel", endStroke);
|
||||
|
||||
$("btn-add-drawing").addEventListener("click", async () => {
|
||||
const blob = await new Promise((r) => drawCanvas.toBlob(r, "image/png"));
|
||||
await postFrame(blob, defaultDelay());
|
||||
toast("Frame added");
|
||||
if ($("opt-from-last").checked) {
|
||||
// Pull the just-added frame into state before re-seeding the canvas, so
|
||||
// "start from last frame" copies it instead of the previous frame (or a
|
||||
// blank canvas on the first add), which the async SSE update may not
|
||||
// have delivered yet.
|
||||
await refreshState();
|
||||
initDrawCanvas();
|
||||
}
|
||||
});
|
||||
|
||||
// ---- live updates -------------------------------------------------------
|
||||
let eventSource = null;
|
||||
function connectEvents() {
|
||||
try {
|
||||
if (eventSource) eventSource.close();
|
||||
eventSource = new EventSource(withKey("/events"));
|
||||
eventSource.onmessage = () => refreshState();
|
||||
} catch (_) {
|
||||
eventSource = null; /* SSE unavailable; manual reload still works */
|
||||
}
|
||||
}
|
||||
|
||||
$("btn-reload").addEventListener("click", async () => {
|
||||
const btn = $("btn-reload");
|
||||
const glyph = $("reload-glyph");
|
||||
btn.disabled = true;
|
||||
glyph.classList.add("spinning");
|
||||
try {
|
||||
// Recover a dropped live-update stream, then pull the latest state and
|
||||
// rebuild the preview + thumbnails against a fresh cache-busting nonce.
|
||||
if (!eventSource || eventSource.readyState === 2) connectEvents();
|
||||
await refreshState();
|
||||
toast("Reloaded");
|
||||
} catch (e) {
|
||||
toast("Reload failed: " + e.message);
|
||||
} finally {
|
||||
glyph.classList.remove("spinning");
|
||||
btn.disabled = false;
|
||||
}
|
||||
});
|
||||
|
||||
connectEvents();
|
||||
refreshState();
|
||||
@@ -0,0 +1,189 @@
|
||||
<!doctype html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
||||
<title>APNG Studio</title>
|
||||
<link rel="stylesheet" href="styles.css" />
|
||||
</head>
|
||||
<body>
|
||||
<header class="app-header">
|
||||
<div>
|
||||
<h1>APNG Studio</h1>
|
||||
<p class="muted" id="subtitle">Assemble an animated PNG from frames.</p>
|
||||
</div>
|
||||
<div class="header-actions">
|
||||
<button class="btn btn-sm" id="btn-reload"
|
||||
title="Reload — re-sync frames and rebuild the preview">
|
||||
<span class="reload-glyph" id="reload-glyph">↻</span> Reload
|
||||
</button>
|
||||
<span class="badge" id="mime-badge">image/apng</span>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<!-- Preview -->
|
||||
<section class="card">
|
||||
<div class="preview-wrap checker">
|
||||
<img id="preview" alt="APNG preview" src="data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==" />
|
||||
<div class="empty-preview" id="empty-preview">
|
||||
<span>No frames yet</span>
|
||||
<small class="muted">Upload images or draw a frame below.</small>
|
||||
</div>
|
||||
</div>
|
||||
<div class="preview-meta">
|
||||
<span id="meta-frames">0 frames</span>
|
||||
<span class="dot">·</span>
|
||||
<span id="meta-duration">0.0s</span>
|
||||
<span class="dot">·</span>
|
||||
<span id="meta-loops">loops ∞</span>
|
||||
</div>
|
||||
<div class="row gap">
|
||||
<button class="btn btn-primary" id="btn-export">Export .png</button>
|
||||
<button class="btn" id="btn-download">Download</button>
|
||||
<button class="btn" id="btn-share">Send to phone</button>
|
||||
<button class="btn btn-ghost" id="btn-restart" title="Restart animation">↺ Replay</button>
|
||||
</div>
|
||||
<p class="saved-path muted" id="saved-path" hidden></p>
|
||||
|
||||
<!-- Send to phone -->
|
||||
<div class="share-panel" id="share-panel" hidden>
|
||||
<div class="share-qr checker">
|
||||
<img id="share-qr-img" alt="QR code — scan with your phone camera to open the animation" />
|
||||
</div>
|
||||
<div class="share-body">
|
||||
<div class="share-title">Scan with your phone camera</div>
|
||||
<p class="muted tiny">Your phone must be on the same Wi‑Fi as this computer.</p>
|
||||
<a class="share-url" id="share-url" href="#" target="_blank" rel="noopener"></a>
|
||||
<div class="share-foot">
|
||||
<span class="muted tiny" id="share-expiry"></span>
|
||||
<button class="btn btn-sm btn-ghost" id="btn-share-stop">Stop</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Settings -->
|
||||
<section class="card">
|
||||
<div class="section-title">Settings</div>
|
||||
<div class="settings-grid">
|
||||
<label class="field">
|
||||
<span>Width</span>
|
||||
<input type="number" id="in-width" min="1" max="2048" step="1" />
|
||||
</label>
|
||||
<label class="field">
|
||||
<span>Height</span>
|
||||
<input type="number" id="in-height" min="1" max="2048" step="1" />
|
||||
</label>
|
||||
<label class="field">
|
||||
<span>Loops <small class="muted">(0 = ∞)</small></span>
|
||||
<input type="number" id="in-loops" min="0" max="65535" step="1" />
|
||||
</label>
|
||||
<div class="field">
|
||||
<span>First frame</span>
|
||||
<label class="chk" id="hidden-first-label">
|
||||
<input type="checkbox" id="in-hidden-first" /> Static fallback
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
<p class="muted tiny" id="dim-hint">Canvas size can only change while there are no frames.</p>
|
||||
<p class="muted tiny" id="hidden-first-hint" hidden>
|
||||
Frame 1 is shown by viewers without APNG support and is not part of the loop.
|
||||
</p>
|
||||
|
||||
<div class="subsection">
|
||||
<div class="subsection-title">Apply to all frames</div>
|
||||
<div class="apply-rows">
|
||||
<span class="inline">
|
||||
<label class="mini" for="in-delay-all">Delay</label>
|
||||
<input type="number" id="in-delay-all" min="0" max="65535" step="10" value="120" />
|
||||
<span class="mini">ms</span>
|
||||
<button class="btn btn-sm" id="btn-delay-all">Apply</button>
|
||||
</span>
|
||||
<span class="inline">
|
||||
<label class="mini" for="in-fps">Frame rate</label>
|
||||
<input type="number" id="in-fps" min="1" max="120" step="1" value="12" />
|
||||
<span class="mini">fps</span>
|
||||
<button class="btn btn-sm" id="btn-fps">Set</button>
|
||||
</span>
|
||||
<span class="inline">
|
||||
<label class="mini" for="in-dispose-all">Dispose</label>
|
||||
<select id="in-dispose-all">
|
||||
<option value="0">None</option>
|
||||
<option value="1">Background</option>
|
||||
<option value="2">Previous</option>
|
||||
</select>
|
||||
<label class="mini" for="in-blend-all">Blend</label>
|
||||
<select id="in-blend-all">
|
||||
<option value="0">Source</option>
|
||||
<option value="1">Over</option>
|
||||
</select>
|
||||
<button class="btn btn-sm" id="btn-ops-all">Apply</button>
|
||||
</span>
|
||||
</div>
|
||||
<details class="help">
|
||||
<summary>What do dispose & blend do?</summary>
|
||||
<ul>
|
||||
<li><b>Blend · Source</b> replaces the canvas region with this frame (alpha included). <b>Over</b> composites this frame on top of what's already there — use it with transparency to build an image up frame by frame.</li>
|
||||
<li><b>Dispose · None</b> keeps the frame on screen for the next one. <b>Background</b> clears it to transparent first. <b>Previous</b> restores whatever was there before this frame.</li>
|
||||
</ul>
|
||||
</details>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Frames -->
|
||||
<section class="card">
|
||||
<div class="section-title row between">
|
||||
<span>Frames</span>
|
||||
<button class="btn btn-sm btn-ghost danger" id="btn-clear">Clear all</button>
|
||||
</div>
|
||||
<div class="frame-strip" id="frame-strip"></div>
|
||||
<div class="empty-frames muted" id="empty-frames">Frames you add appear here in order.</div>
|
||||
</section>
|
||||
|
||||
<!-- Add frames -->
|
||||
<section class="card">
|
||||
<div class="section-title">Add frames</div>
|
||||
<div class="row gap wrap">
|
||||
<button class="btn" id="btn-upload">⬆ Upload images</button>
|
||||
<button class="btn" id="btn-toggle-draw">✎ Draw a frame</button>
|
||||
<input type="file" id="file-input" accept="image/*" multiple hidden />
|
||||
</div>
|
||||
|
||||
<!-- Draw panel -->
|
||||
<div class="draw-panel" id="draw-panel" hidden>
|
||||
<div class="draw-tools">
|
||||
<label class="tool">
|
||||
<span>Color</span>
|
||||
<input type="color" id="draw-color" value="#3b82f6" />
|
||||
</label>
|
||||
<label class="tool">
|
||||
<span>Size</span>
|
||||
<input type="range" id="draw-size" min="1" max="48" value="6" />
|
||||
</label>
|
||||
<div class="tool-group" role="group" aria-label="Tool">
|
||||
<button class="btn btn-sm tool-btn active" id="tool-pen" aria-pressed="true">Pen</button>
|
||||
<button class="btn btn-sm tool-btn" id="tool-eraser" aria-pressed="false">Eraser</button>
|
||||
</div>
|
||||
<button class="btn btn-sm" id="btn-fill">Fill</button>
|
||||
<button class="btn btn-sm" id="btn-clear-draw">Clear</button>
|
||||
</div>
|
||||
<div class="draw-options">
|
||||
<label class="chk"><input type="checkbox" id="opt-onion" /> Onion skin</label>
|
||||
<label class="chk"><input type="checkbox" id="opt-from-last" /> Start from last frame</label>
|
||||
</div>
|
||||
<div class="canvas-stage checker" id="canvas-stage">
|
||||
<img id="onion-img" class="onion" alt="" src="data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==" hidden />
|
||||
<canvas id="draw-canvas"></canvas>
|
||||
</div>
|
||||
<div class="row gap">
|
||||
<button class="btn btn-primary btn-sm" id="btn-add-drawing">Add frame</button>
|
||||
<button class="btn btn-sm btn-ghost" id="btn-cancel-draw">Close</button>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<div class="toast" id="toast" role="status" aria-live="polite" hidden></div>
|
||||
|
||||
<script src="app.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,620 @@
|
||||
:root {
|
||||
--radius: 10px;
|
||||
--radius-sm: 7px;
|
||||
--gap: 12px;
|
||||
--card-bg: var(--background-color-default, #ffffff);
|
||||
--muted: var(--text-color-muted, #59636e);
|
||||
--border: var(--border-color-default, #d1d9e0);
|
||||
--fg: var(--text-color-default, #1f2328);
|
||||
--accent: var(--true-color-blue, #0969da);
|
||||
--danger: var(--true-color-red, #cf222e);
|
||||
}
|
||||
|
||||
* {
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
/* Ensure the `hidden` attribute always wins over element display rules. */
|
||||
[hidden] {
|
||||
display: none !important;
|
||||
}
|
||||
|
||||
body {
|
||||
margin: 0;
|
||||
padding: 14px 14px 40px;
|
||||
background: var(--background-color-default, #ffffff);
|
||||
color: var(--fg);
|
||||
font-family: var(--font-sans, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif);
|
||||
font-size: var(--text-body-medium, 14px);
|
||||
line-height: var(--leading-body-medium, 20px);
|
||||
-webkit-font-smoothing: antialiased;
|
||||
}
|
||||
|
||||
h1 {
|
||||
font-family: var(--font-sans-display, var(--font-sans, sans-serif));
|
||||
font-size: var(--text-title-medium, 18px);
|
||||
font-weight: var(--font-weight-semibold, 600);
|
||||
line-height: 1.2;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.app-header {
|
||||
display: flex;
|
||||
align-items: flex-start;
|
||||
justify-content: space-between;
|
||||
gap: var(--gap);
|
||||
margin-bottom: 14px;
|
||||
}
|
||||
|
||||
.header-actions {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.reload-glyph {
|
||||
display: inline-block;
|
||||
}
|
||||
.reload-glyph.spinning {
|
||||
animation: apng-spin 0.6s linear infinite;
|
||||
}
|
||||
@keyframes apng-spin {
|
||||
to {
|
||||
transform: rotate(360deg);
|
||||
}
|
||||
}
|
||||
|
||||
.muted {
|
||||
color: var(--muted);
|
||||
}
|
||||
.tiny {
|
||||
font-size: var(--text-caption, 11px);
|
||||
}
|
||||
.muted.tiny {
|
||||
margin: 8px 0 0;
|
||||
}
|
||||
|
||||
.badge {
|
||||
font-family: var(--font-mono, monospace);
|
||||
font-size: var(--text-code-inline, 12px);
|
||||
color: var(--muted);
|
||||
border: 1px solid var(--border);
|
||||
border-radius: 999px;
|
||||
padding: 2px 9px;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
#subtitle {
|
||||
margin: 3px 0 0;
|
||||
font-size: var(--text-body-small, 12px);
|
||||
}
|
||||
|
||||
.card {
|
||||
background: var(--card-bg);
|
||||
border: 1px solid var(--border);
|
||||
border-radius: var(--radius);
|
||||
padding: 14px;
|
||||
margin-bottom: 14px;
|
||||
}
|
||||
|
||||
.section-title {
|
||||
font-weight: var(--font-weight-semibold, 600);
|
||||
margin-bottom: 12px;
|
||||
}
|
||||
|
||||
.row {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
.row.gap {
|
||||
gap: 8px;
|
||||
}
|
||||
.row.wrap {
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
.row.between,
|
||||
.between {
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
/* Buttons */
|
||||
.btn {
|
||||
appearance: none;
|
||||
border: 1px solid var(--border);
|
||||
background: var(--background-color-default, #fff);
|
||||
color: var(--fg);
|
||||
border-radius: var(--radius-sm);
|
||||
padding: 7px 12px;
|
||||
font-size: var(--text-body-small, 13px);
|
||||
font-weight: 500;
|
||||
cursor: pointer;
|
||||
transition: background 120ms ease, border-color 120ms ease, opacity 120ms ease;
|
||||
}
|
||||
.btn:hover {
|
||||
background: var(--n-2-10, rgba(0, 0, 0, 0.04));
|
||||
}
|
||||
.btn:active {
|
||||
transform: translateY(0.5px);
|
||||
}
|
||||
.btn:disabled {
|
||||
opacity: 0.45;
|
||||
cursor: not-allowed;
|
||||
}
|
||||
.btn-sm {
|
||||
padding: 4px 9px;
|
||||
font-size: var(--text-caption, 12px);
|
||||
}
|
||||
.btn-primary {
|
||||
background: var(--accent);
|
||||
border-color: var(--accent);
|
||||
color: var(--color-white, #fff);
|
||||
}
|
||||
.btn-primary:hover {
|
||||
filter: brightness(1.06);
|
||||
background: var(--accent);
|
||||
}
|
||||
.btn-ghost {
|
||||
background: transparent;
|
||||
border-color: transparent;
|
||||
}
|
||||
.btn-ghost:hover {
|
||||
background: var(--n-2-10, rgba(0, 0, 0, 0.05));
|
||||
}
|
||||
.danger {
|
||||
color: var(--danger);
|
||||
}
|
||||
|
||||
/* Preview */
|
||||
.preview-wrap {
|
||||
position: relative;
|
||||
border-radius: var(--radius-sm);
|
||||
border: 1px solid var(--border);
|
||||
min-height: 160px;
|
||||
max-height: 320px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
overflow: hidden;
|
||||
padding: 10px;
|
||||
}
|
||||
#preview {
|
||||
max-width: 100%;
|
||||
max-height: 300px;
|
||||
image-rendering: auto;
|
||||
display: block;
|
||||
}
|
||||
#preview.pixelated {
|
||||
image-rendering: pixelated;
|
||||
}
|
||||
.empty-preview {
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 4px;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
background: var(--background-color-default, #fff);
|
||||
text-align: center;
|
||||
}
|
||||
.preview-meta {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 7px;
|
||||
justify-content: center;
|
||||
color: var(--muted);
|
||||
font-size: var(--text-body-small, 12px);
|
||||
margin: 10px 0 12px;
|
||||
}
|
||||
.preview-meta .dot {
|
||||
opacity: 0.5;
|
||||
}
|
||||
.saved-path {
|
||||
margin: 10px 0 0;
|
||||
font-family: var(--font-mono, monospace);
|
||||
font-size: var(--text-caption, 11px);
|
||||
word-break: break-all;
|
||||
}
|
||||
|
||||
/* Checkerboard for transparency */
|
||||
.checker {
|
||||
--checker-base: var(--background-color-default, #fff);
|
||||
--checker-square: var(--border-color-default, #d9dbe0);
|
||||
background-color: var(--checker-base);
|
||||
background-image:
|
||||
linear-gradient(45deg, var(--checker-square) 25%, transparent 25%),
|
||||
linear-gradient(-45deg, var(--checker-square) 25%, transparent 25%),
|
||||
linear-gradient(45deg, transparent 75%, var(--checker-square) 75%),
|
||||
linear-gradient(-45deg, transparent 75%, var(--checker-square) 75%);
|
||||
background-size: 16px 16px;
|
||||
background-position: 0 0, 0 8px, 8px -8px, -8px 0;
|
||||
}
|
||||
|
||||
/* Send to phone */
|
||||
.share-panel {
|
||||
display: flex;
|
||||
gap: var(--gap);
|
||||
align-items: center;
|
||||
margin-top: 12px;
|
||||
padding: 12px;
|
||||
border: 1px solid var(--border);
|
||||
border-radius: var(--radius);
|
||||
background: var(--card-bg);
|
||||
}
|
||||
.share-qr {
|
||||
flex-shrink: 0;
|
||||
padding: 8px;
|
||||
border-radius: var(--radius-sm);
|
||||
line-height: 0;
|
||||
}
|
||||
.share-qr img {
|
||||
width: 132px;
|
||||
height: 132px;
|
||||
image-rendering: pixelated;
|
||||
display: block;
|
||||
}
|
||||
.share-body {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 4px;
|
||||
min-width: 0;
|
||||
}
|
||||
.share-title {
|
||||
font-weight: var(--font-weight-semibold, 600);
|
||||
}
|
||||
.share-url {
|
||||
font-family: var(--font-mono, monospace);
|
||||
font-size: var(--text-code-inline, 12px);
|
||||
color: var(--accent);
|
||||
word-break: break-all;
|
||||
text-decoration: none;
|
||||
margin-top: 2px;
|
||||
}
|
||||
.share-url:hover {
|
||||
text-decoration: underline;
|
||||
}
|
||||
.share-foot {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
gap: 8px;
|
||||
margin-top: 6px;
|
||||
}
|
||||
|
||||
/* Settings */
|
||||
.settings-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(2, minmax(0, 1fr));
|
||||
gap: 10px;
|
||||
}
|
||||
.field {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 4px;
|
||||
font-size: var(--text-body-small, 12px);
|
||||
color: var(--muted);
|
||||
}
|
||||
.field .inline {
|
||||
display: flex;
|
||||
gap: 6px;
|
||||
}
|
||||
input[type="number"],
|
||||
input[type="text"] {
|
||||
width: 100%;
|
||||
padding: 6px 8px;
|
||||
border: 1px solid var(--border);
|
||||
border-radius: var(--radius-sm);
|
||||
background: var(--background-color-default, #fff);
|
||||
color: var(--fg);
|
||||
font-size: var(--text-body-medium, 13px);
|
||||
font-family: inherit;
|
||||
}
|
||||
input:focus-visible,
|
||||
.btn:focus-visible,
|
||||
select:focus-visible {
|
||||
outline: 2px solid var(--color-focus-outline, var(--accent));
|
||||
outline-offset: 1px;
|
||||
}
|
||||
|
||||
/* hidden-first checkbox living inside the settings grid */
|
||||
.field .chk {
|
||||
color: var(--fg);
|
||||
font-size: var(--text-body-small, 12px);
|
||||
padding: 4px 0;
|
||||
}
|
||||
.field .chk.disabled {
|
||||
opacity: 0.45;
|
||||
cursor: not-allowed;
|
||||
}
|
||||
|
||||
/* Settings subsection: apply-to-all controls */
|
||||
.subsection {
|
||||
margin-top: 14px;
|
||||
padding-top: 12px;
|
||||
border-top: 1px dashed var(--border);
|
||||
}
|
||||
.subsection-title {
|
||||
font-size: var(--text-caption, 11px);
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.04em;
|
||||
color: var(--muted);
|
||||
font-weight: 600;
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
.apply-rows {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 8px;
|
||||
}
|
||||
.apply-rows .inline {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
flex-wrap: wrap;
|
||||
gap: 6px;
|
||||
}
|
||||
.apply-rows .inline input[type="number"] {
|
||||
width: 68px;
|
||||
}
|
||||
.apply-rows select {
|
||||
padding: 5px 7px;
|
||||
border: 1px solid var(--border);
|
||||
border-radius: var(--radius-sm);
|
||||
background: var(--background-color-default, #fff);
|
||||
color: var(--fg);
|
||||
font-size: var(--text-body-small, 12px);
|
||||
font-family: inherit;
|
||||
}
|
||||
.mini {
|
||||
font-size: 11px;
|
||||
color: var(--muted);
|
||||
}
|
||||
.help {
|
||||
margin-top: 12px;
|
||||
font-size: var(--text-body-small, 12px);
|
||||
}
|
||||
.help summary {
|
||||
cursor: pointer;
|
||||
color: var(--accent);
|
||||
font-size: var(--text-caption, 11px);
|
||||
}
|
||||
.help ul {
|
||||
margin: 8px 0 0;
|
||||
padding-left: 18px;
|
||||
color: var(--muted);
|
||||
}
|
||||
.help li {
|
||||
margin-bottom: 5px;
|
||||
}
|
||||
.help b {
|
||||
color: var(--fg);
|
||||
}
|
||||
|
||||
/* Frame strip */
|
||||
.frame-strip {
|
||||
display: flex;
|
||||
gap: 10px;
|
||||
overflow-x: auto;
|
||||
padding-bottom: 6px;
|
||||
}
|
||||
.frame-card {
|
||||
flex: 0 0 auto;
|
||||
width: 168px;
|
||||
border: 1px solid var(--border);
|
||||
border-radius: var(--radius-sm);
|
||||
overflow: hidden;
|
||||
background: var(--card-bg);
|
||||
}
|
||||
.frame-card.is-static {
|
||||
border-color: var(--accent);
|
||||
border-style: dashed;
|
||||
}
|
||||
.frame-thumb-wrap {
|
||||
position: relative;
|
||||
border-bottom: 1px solid var(--border);
|
||||
}
|
||||
.frame-thumb {
|
||||
width: 100%;
|
||||
height: 88px;
|
||||
object-fit: contain;
|
||||
display: block;
|
||||
}
|
||||
.static-badge {
|
||||
position: absolute;
|
||||
top: 5px;
|
||||
left: 5px;
|
||||
background: var(--accent);
|
||||
color: var(--color-white, #fff);
|
||||
font-size: 9px;
|
||||
font-weight: 700;
|
||||
letter-spacing: 0.04em;
|
||||
padding: 1px 5px;
|
||||
border-radius: 4px;
|
||||
}
|
||||
.frame-body {
|
||||
padding: 7px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 6px;
|
||||
}
|
||||
.frame-index {
|
||||
font-size: var(--text-caption, 11px);
|
||||
color: var(--muted);
|
||||
font-weight: 600;
|
||||
}
|
||||
.frame-field {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
flex-wrap: wrap;
|
||||
gap: 4px;
|
||||
}
|
||||
.frame-label {
|
||||
font-size: 10px;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.03em;
|
||||
min-width: 46px;
|
||||
}
|
||||
.num-in {
|
||||
width: 52px !important;
|
||||
padding: 3px 4px !important;
|
||||
font-size: var(--text-caption, 11px) !important;
|
||||
text-align: center;
|
||||
}
|
||||
.slash {
|
||||
font-size: 11px;
|
||||
}
|
||||
.ms-hint {
|
||||
flex-basis: 100%;
|
||||
font-size: 10px;
|
||||
}
|
||||
.frame-select {
|
||||
flex: 1;
|
||||
min-width: 0;
|
||||
padding: 3px 4px;
|
||||
border: 1px solid var(--border);
|
||||
border-radius: 5px;
|
||||
background: var(--background-color-default, #fff);
|
||||
color: var(--fg);
|
||||
font-size: var(--text-caption, 11px);
|
||||
font-family: inherit;
|
||||
}
|
||||
.frame-actions {
|
||||
display: flex;
|
||||
gap: 3px;
|
||||
margin-top: 1px;
|
||||
}
|
||||
.icon-btn {
|
||||
flex: 1;
|
||||
appearance: none;
|
||||
border: 1px solid var(--border);
|
||||
background: transparent;
|
||||
color: var(--fg);
|
||||
border-radius: 5px;
|
||||
padding: 3px 0;
|
||||
cursor: pointer;
|
||||
font-size: 12px;
|
||||
line-height: 1;
|
||||
}
|
||||
.icon-btn:hover {
|
||||
background: var(--n-2-10, rgba(0, 0, 0, 0.05));
|
||||
}
|
||||
.icon-btn.danger:hover {
|
||||
background: var(--true-color-red-muted, rgba(207, 34, 46, 0.1));
|
||||
}
|
||||
.icon-btn:disabled {
|
||||
opacity: 0.35;
|
||||
cursor: not-allowed;
|
||||
}
|
||||
.empty-frames {
|
||||
font-size: var(--text-body-small, 12px);
|
||||
padding: 4px 0 0;
|
||||
}
|
||||
|
||||
/* Draw panel */
|
||||
.draw-panel {
|
||||
margin-top: 14px;
|
||||
padding-top: 14px;
|
||||
border-top: 1px dashed var(--border);
|
||||
}
|
||||
.draw-tools {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
align-items: center;
|
||||
gap: 10px;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
.tool {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 5px;
|
||||
font-size: var(--text-caption, 12px);
|
||||
color: var(--muted);
|
||||
}
|
||||
.tool input[type="color"] {
|
||||
width: 30px;
|
||||
height: 26px;
|
||||
padding: 0;
|
||||
border: 1px solid var(--border);
|
||||
border-radius: 6px;
|
||||
background: none;
|
||||
cursor: pointer;
|
||||
}
|
||||
.tool-group {
|
||||
display: inline-flex;
|
||||
gap: 0;
|
||||
}
|
||||
.tool-group .tool-btn {
|
||||
border-radius: 0;
|
||||
margin-left: -1px;
|
||||
}
|
||||
.tool-group .tool-btn:first-child {
|
||||
border-radius: var(--radius-sm) 0 0 var(--radius-sm);
|
||||
margin-left: 0;
|
||||
}
|
||||
.tool-group .tool-btn:last-child {
|
||||
border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
|
||||
}
|
||||
.tool-btn.active {
|
||||
background: var(--accent);
|
||||
border-color: var(--accent);
|
||||
color: var(--color-white, #fff);
|
||||
}
|
||||
.draw-options {
|
||||
display: flex;
|
||||
gap: 16px;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
.chk {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 6px;
|
||||
font-size: var(--text-body-small, 12px);
|
||||
cursor: pointer;
|
||||
}
|
||||
.canvas-stage {
|
||||
position: relative;
|
||||
border: 1px solid var(--border);
|
||||
border-radius: var(--radius-sm);
|
||||
overflow: hidden;
|
||||
margin-bottom: 10px;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
}
|
||||
.canvas-stage .onion,
|
||||
.canvas-stage canvas {
|
||||
position: relative;
|
||||
max-width: 100%;
|
||||
display: block;
|
||||
touch-action: none;
|
||||
}
|
||||
.canvas-stage .onion {
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
margin: auto;
|
||||
opacity: 0.28;
|
||||
pointer-events: none;
|
||||
object-fit: contain;
|
||||
}
|
||||
#draw-canvas {
|
||||
cursor: crosshair;
|
||||
}
|
||||
|
||||
/* Toast */
|
||||
.toast {
|
||||
position: fixed;
|
||||
left: 50%;
|
||||
bottom: 18px;
|
||||
transform: translateX(-50%);
|
||||
background: var(--fg);
|
||||
color: var(--background-color-default, #fff);
|
||||
padding: 8px 14px;
|
||||
border-radius: 999px;
|
||||
font-size: var(--text-body-small, 12px);
|
||||
box-shadow: 0 4px 16px rgba(0, 0, 0, 0.22);
|
||||
z-index: 50;
|
||||
max-width: 90%;
|
||||
text-align: center;
|
||||
}
|
||||
.toast[hidden] {
|
||||
display: none;
|
||||
}
|
||||
Reference in New Issue
Block a user