digital-garbageandClaude Sonnet 5.5
aa31b95ea5
- Header: view toggles (Assets/Preview/Properties/Auto-hide) move to the top bar; progress, the prompt warning and scene actions (rate, upscale, interpolate) move to the row under the toolbar; the timeline head never wraps from 1000px up and never clips its controls. The top bar grows a line instead of spilling when it wraps. - Kit: every literal pixel size in element CSS is a token (the ratchet test is now zero); Composer's text box follows the viewport; the catalogue shows the component sizes. - test:viewport adds a fake ComfyUI queue and socket for the render-running state and asserts the header is one row. - Auto Montage removed (button, window, code, README/docs, tests). Saved projects holding pieces it made still load: the reused flag is kept. Co-Authored-By: Claude Sonnet 5.5 <noreply@anthropic.com>
34 lines
1.4 KiB
JavaScript
34 lines
1.4 KiB
JavaScript
// What a run is doing, beside Generate: the step it is on, a bar, and how long it has been going (this page's own clock).
|
|
import { composer as c } from "../../composer/composer.js";
|
|
import { QUEUED, RUNNING } from "../../shell/run.js";
|
|
|
|
export const elapsed = (ms) => { const s = Math.max(0, Math.floor(ms / 1000)); return `${String(Math.floor(s / 60)).padStart(2, "0")}m ${String(s % 60).padStart(2, "0")}s`; };
|
|
|
|
export default {
|
|
id: "generate-progress",
|
|
mount: "timeline.toolbar.end",
|
|
needs: ["generate"],
|
|
setup({ host, app }) {
|
|
const g = app.generate;
|
|
const bar = c.progress.inline({ label: "Generating" });
|
|
bar.setHidden(true);
|
|
host.append(bar.node);
|
|
let since = 0;
|
|
const draw = () => {
|
|
const s = g.state(), working = s.phase === QUEUED || s.phase === RUNNING;
|
|
if (working && !since) since = Date.now();
|
|
if (!working) since = 0;
|
|
bar.setHidden(!working);
|
|
if (!working) { return; }
|
|
const pr = s.progress;
|
|
bar.setValue(pr && pr.max ? (pr.value / pr.max) * 100 : 0);
|
|
bar.setText(`${s.phase === QUEUED ? "Queued" : pr && pr.max ? `Step ${pr.value}/${pr.max}` : "Running"} · ${elapsed(Date.now() - since)}`);
|
|
|
|
};
|
|
const off = g.subscribe(draw);
|
|
const timer = setInterval(() => { if (since) draw(); }, 1000); // the clock ticks between ComfyUI's messages
|
|
draw();
|
|
return () => { off(); clearInterval(timer); bar.destroy(); };
|
|
},
|
|
};
|