ausboss
f1fedbf345
The stage could be squeezed to about 130 px on all three nodes: the declared floors counted the rows around it short, and the Clip node's rows alone take 450 px. A padded portrait clip ended up a sliver in a 16:9 canvas. - The stage's floor follows its width (stageHeightForWidth: 0.6 x width, 200 to 340 px). The panel's minimum is the measured rows around the stage plus that floor, so a corner drag stops there; before the panel is on screen a per-kind estimate stands in. A new node opens at it. - keepStageRoom grows the node to the same floor when a row appears later (Resize, a wrapping readout), and sets it as the stage's CSS minimum so Nodes 2.0, which sizes nodes by content, holds it too. - exactMinWidth and holdVueNodeMinWidth make 330 the real minimum width in both renderers (the classic corner drag jumped to 434; Nodes 2.0 went down to 225 and crushed the chip row). - The source card's "Choose an uploaded ..." line hides once a file is chosen, which is the room older layouts need for the new floor. - The LTX 2.3 example moves the two nodes under the Clip node down for its new height; the contract and a live load find no overlaps.
2213 lines
121 KiB
JavaScript
2213 lines
121 KiB
JavaScript
import { api } from "/scripts/api.js";
|
|
import { app } from "/scripts/app.js";
|
|
import { hideInputsInDef, hideWidget } from "./widget_visibility.mjs";
|
|
import { mountTransformTrim } from "./transform_trim.mjs";
|
|
import { clipOutputRate, inputNumber } from "./clip_rate.mjs";
|
|
import { BRAND, chainCallback, keepDomWidgetWidthAuto, notifyAusbossChange, showToast } from "./index.mjs";
|
|
import { WIDGET_FRAME, fillNodeHeight, holdVueNodeMinWidth } from "./panel_layout.mjs";
|
|
import { mediaViewQuery } from "./media_list.mjs";
|
|
import { createMediaPicker } from "./media_picker.mjs";
|
|
import { normalizeFillColor } from "./fill_color.mjs";
|
|
import { makeScrubInput } from "./scrub_input.mjs";
|
|
import { confirmDiscard } from "./discard_prompt.mjs";
|
|
import { featherGeneratedMask, overlayPlan, stitchBlendFromMask } from "./stitch_preview.mjs";
|
|
import { suppressCoreVideoPreview } from "./core_preview.mjs";
|
|
import {
|
|
INPUT_FOLDER_MODE,
|
|
LOCAL_PATH_MODE,
|
|
normalizeVideoOptions,
|
|
mediaSourceState,
|
|
videoSourceState,
|
|
} from "./video_source_card.mjs";
|
|
import {
|
|
canvasLocalPoint,
|
|
clamp,
|
|
cropForRotation,
|
|
declaredTransformDefaults,
|
|
fitSourceToAspect,
|
|
cropHandleCenters,
|
|
lockPadding,
|
|
lockedPadMinimum,
|
|
nearestHandle,
|
|
paddingAxis,
|
|
paddingHandleCenters,
|
|
parseAspectRatio,
|
|
resetTransformValues,
|
|
resizeCrop,
|
|
resolveCrop,
|
|
resolvePadding,
|
|
rotatedSize,
|
|
scaleToMegapixels,
|
|
sizeChain,
|
|
sizeChainTokens,
|
|
sourceChanged,
|
|
sourceResetValues,
|
|
stageHandleLayout,
|
|
stageHeightForWidth,
|
|
zoomAround,
|
|
} from "./transform_geometry.mjs";
|
|
import { clampFrame, clipInfo, frameTime } from "./timeline_math.mjs";
|
|
import { liftSocket } from "./widget_card.mjs";
|
|
|
|
const HIDDEN_WIDGETS = [
|
|
"image", "upload",
|
|
"video", "source_mode", "local_path",
|
|
"rotation_degrees", "crop_aspect_ratio", "crop_x", "crop_y", "crop_width", "crop_height",
|
|
"pad_left", "pad_top", "pad_right", "pad_bottom", "feather", "canvas_multiple", "fill_color",
|
|
"seek_mode", "frame_index", "frame_time",
|
|
"start_seconds", "end_seconds", "every_nth", "max_frames", "frame_snap", "fixed_frames",
|
|
// Stitch settings (clip and image nodes), driven by the editor's Inpaint & Stitch section.
|
|
"stitch_blend", "stitch_grow",
|
|
// Image-node resize block; hideWidget on a missing widget is a no-op, so
|
|
// the video node sharing this list is unaffected.
|
|
"resize_to_megapixels", "megapixels", "resize_method", "resolution_steps",
|
|
];
|
|
const trimInputDriven = (node, name) => node.inputs?.some(
|
|
(input) => (input.name === name || input.widget?.name === name) && input.link != null,
|
|
) ?? false;
|
|
|
|
const RESIZE_METHODS = ["lanczos", "area", "bicubic", "bilinear", "nearest-exact"];
|
|
const TRANSFORM_DEFAULTS = resetTransformValues(false);
|
|
const CORE_IMAGE_PREVIEW_WIDGET = "$$canvas-image-preview";
|
|
|
|
function installStyles() {
|
|
if (document.getElementById("ausboss-transform-styles")) return;
|
|
const style = document.createElement("style");
|
|
style.id = "ausboss-transform-styles";
|
|
style.textContent = `
|
|
.ausboss-transform-panel{display:flex;flex-direction:column;gap:8px;padding:8px;color:#ddd;font:12px system-ui;box-sizing:border-box;width:100%;height:100%;overflow:hidden}
|
|
.ausboss-transform-preview{width:100%;flex:1 1 180px;min-height:0;border:1px solid #50555b;border-radius:8px;background:#111;display:block;touch-action:none}
|
|
.ausboss-transform-source{display:flex;flex-direction:column;gap:7px;flex:0 0 auto;padding:8px;border:1px solid rgba(0,184,174,.28);border-radius:8px;background:rgba(0,0,0,.24)}
|
|
.ausboss-transform-source-heading{color:${BRAND};font:600 10px system-ui;letter-spacing:.08em;text-transform:uppercase}
|
|
.ausboss-transform-source-mode{display:grid;grid-template-columns:1fr 1fr;height:30px;padding:3px;border:1px solid #2a3437;border-radius:7px;background:#0f1516}
|
|
.ausboss-transform-source-mode button{border:0;border-radius:5px;background:transparent;color:#8ba3a1;font:600 12px system-ui;cursor:pointer}
|
|
.ausboss-transform-source-mode button:hover{color:#fff}.ausboss-transform-source-mode button.on{background:${BRAND};color:#04201d}
|
|
.ausboss-transform-source-field{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:7px;align-items:center}
|
|
.ausboss-transform-source-field select,.ausboss-transform-source-field input{box-sizing:border-box;width:100%;height:34px;min-width:0;padding:0 10px;border:1px solid #2a3437;border-radius:7px;outline:0;background:#0b0f10;color:#dce9e8;font:12px ui-monospace,"SF Mono",Menlo,Consolas,monospace}
|
|
.ausboss-transform-source-field select:focus,.ausboss-transform-source-field input:focus{border-color:${BRAND}}
|
|
.ausboss-transform-source-field .ausboss-media-pick{box-sizing:border-box;width:100%;height:34px;min-width:0;padding:0 28px 0 10px;border:1px solid #2a3437;border-radius:7px;background:#0b0f10 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%238ba3a1' stroke-width='1.5'/%3E%3C/svg%3E") no-repeat right 10px center;color:#dce9e8;font:12px ui-monospace,"SF Mono",Menlo,Consolas,monospace}
|
|
.ausboss-transform-source-field .ausboss-media-pick:hover,.ausboss-transform-source-field .ausboss-media-pick:focus-visible{border-color:${BRAND};outline:0}
|
|
.ausboss-transform-source-action{height:34px;box-sizing:border-box;white-space:nowrap}
|
|
.ausboss-transform-source-field:has(input[type=text]){grid-template-columns:minmax(0,1fr)}
|
|
.ausboss-transform-source-hint{overflow:hidden;color:#6f8886;font-size:10.5px;line-height:1.25;white-space:nowrap;text-overflow:ellipsis}
|
|
.lg-node:has(.ausboss-transform-panel) .image-preview{display:none!important}
|
|
.ausboss-transform-row{display:flex;gap:7px;align-items:center;flex:0 0 auto}.ausboss-transform-row>*{min-width:0;flex:1}
|
|
.ausboss-transform-canvas-row{justify-content:space-between}
|
|
.ausboss-transform-canvas-row>label{flex:0 0 auto;display:flex;align-items:center;gap:6px;color:#aeb4ba;font-size:11px;white-space:nowrap;cursor:default;user-select:none}
|
|
.ausboss-transform-canvas-row>label>span{color:#8ca8a5;font-weight:600;font-size:10px;letter-spacing:.06em;text-transform:uppercase}
|
|
.ausboss-transform-swatch{width:30px;height:22px;padding:1px;border:1px solid #555b63;border-radius:5px;background:#23272c;cursor:pointer}
|
|
.ausboss-transform-swatch::-webkit-color-swatch-wrapper{padding:1px}.ausboss-transform-swatch::-webkit-color-swatch{border:0;border-radius:3px}
|
|
.ausboss-transform-canvas-row input[type=checkbox]{accent-color:${BRAND};margin:0;cursor:pointer}
|
|
.ausboss-transform-resize-row{justify-content:flex-start;gap:14px}
|
|
.ausboss-transform-readout{flex:0 0 auto;margin-top:-3px;color:#c9d0d6;font:11px/14px system-ui;font-variant-numeric:tabular-nums;text-align:center;overflow:hidden;max-height:42px;cursor:default;user-select:none}
|
|
.ausboss-transform-readout:empty{display:none}
|
|
.ausboss-transform-readout span{color:#8ca8a5}.ausboss-transform-readout b{color:#fff;font-weight:600}
|
|
.ausboss-transform-readout i{display:block;color:#ffc46b;font-style:normal}
|
|
.ausboss-transform-aspects{display:flex;gap:5px;align-items:center;flex:0 0 auto}
|
|
.ausboss-transform-aspects>span{flex:0 0 auto;color:#8ca8a5;font-size:10px;padding:0 3px;user-select:none}
|
|
.ausboss-transform-aspect{flex:1 1 0;min-width:0;background:#262a30;color:#cfd6dc;border:1px solid #4a5058;border-radius:4px;height:28px;padding:3px 2px;font:600 10px system-ui;font-variant-numeric:tabular-nums;white-space:nowrap;cursor:pointer;text-align:center}
|
|
.ausboss-transform-aspect-flip{flex:0 0 30px;display:flex;align-items:center;justify-content:center;margin-right:3px}
|
|
.ausboss-transform-aspect-glyph{display:block;border:1px solid currentColor;border-radius:1px;box-sizing:border-box}
|
|
.ausboss-transform-aspect:hover{border-color:${BRAND};color:#fff}
|
|
.ausboss-transform-aspect.active{background:rgba(0,184,174,.18);border-color:${BRAND};color:#e5fffc}
|
|
.ausboss-transform-aspect.locked{background:rgba(0,184,174,.34);border-color:#e5fffc;color:#fff}
|
|
.ausboss-transform-aspect-lock{display:inline-block;margin-left:3px;vertical-align:-1px;line-height:0}
|
|
.ausboss-transform-button,.ausboss-transform-modal button{background:#30343a;color:#eee;border:1px solid #555b63;border-radius:5px;padding:7px 10px;cursor:pointer}
|
|
.ausboss-transform-button:hover,.ausboss-transform-modal button:hover{border-color:${BRAND};background:#383e44}
|
|
.ausboss-transform-file{position:relative;text-align:center;overflow:hidden}.ausboss-transform-file input{position:absolute;inset:0;width:100%;height:100%;opacity:0;cursor:pointer}
|
|
.ausboss-transform-modal{position:fixed;inset:0;z-index:100000;background:#101214;color:#e6e8ea;font:13px system-ui;display:grid;grid-template-rows:42px minmax(0,1fr) auto}
|
|
.ausboss-transform-header{display:flex;align-items:center;gap:12px;padding:0 12px;border-bottom:1px solid #30343a;background:#17191c}
|
|
.ausboss-transform-header strong{color:#fff}.ausboss-transform-header .spacer{flex:1}
|
|
.ausboss-transform-close{background:${BRAND}!important;border-color:${BRAND}!important;color:#06231f!important;font-weight:600}
|
|
.ausboss-transform-close:hover{filter:brightness(1.15)}
|
|
.ausboss-transform-danger{background:#4a1717!important;border-color:#a13a3a!important;color:#ffd9d9!important}
|
|
.ausboss-transform-danger:hover{background:#6b1f1f!important;border-color:#c74e4e!important}
|
|
.ausboss-transform-body{display:grid;grid-template-columns:270px minmax(320px,1fr) 250px;min-height:0}
|
|
.ausboss-transform-sidebar{padding:12px;border-right:1px solid #30343a;overflow:auto;background:#181b1e}
|
|
.ausboss-transform-sidebar.right{border-right:0;border-left:1px solid #30343a}
|
|
.ausboss-transform-section{border-bottom:1px solid #34383d;padding:0 0 13px;margin:0 0 13px}
|
|
.ausboss-transform-section h3{font-size:11px;color:${BRAND};text-transform:uppercase;margin:0 0 8px;display:flex;align-items:center;gap:7px}
|
|
.ausboss-legend{display:inline-block;flex:0 0 auto;width:10px;height:10px}
|
|
canvas.ausboss-legend{width:16px;height:16px}
|
|
.ausboss-legend-crop{background:#4bd8ef;border:1px solid #08272d}
|
|
.ausboss-legend-pad{background:#ff9d42;border:1px solid #3b2108;width:9px;height:9px;transform:rotate(45deg)}
|
|
.ausboss-final-preview{display:block;max-width:100%;margin:2px auto 0;border:1px solid #34383d;border-radius:6px;background:#0c0e10}
|
|
.ausboss-transform-section label{display:grid;grid-template-columns:88px 1fr 58px;gap:7px;align-items:center;margin:7px 0}
|
|
.ausboss-transform-section label>.ausboss-scrub:last-child{width:58px}
|
|
.ausboss-transform-section label>*{min-width:0}
|
|
.ausboss-transform-section input,.ausboss-transform-section select{box-sizing:border-box;width:100%;background:#0e1012;color:#eee;border:1px solid #454b52;border-radius:4px;padding:5px}
|
|
.ausboss-transform-stage{position:relative;min-width:0;min-height:0;background-color:#0c0e10;background-image:radial-gradient(#292d31 1px,transparent 1px);background-size:18px 18px;overflow:hidden}
|
|
.ausboss-transform-canvas{width:100%;height:100%;display:block;touch-action:none}
|
|
.ausboss-transform-status{line-height:1.55;color:#b8bec5;white-space:pre-wrap}.ausboss-transform-help{line-height:1.55;color:#aeb4ba}
|
|
.ausboss-transform-sidebar.right .ausboss-transform-section{margin-top:13px}
|
|
.ausboss-transform-section details{margin:8px 0 0}.ausboss-transform-section summary{cursor:pointer;color:#8de0da;font-size:11px;text-transform:uppercase;letter-spacing:.06em;list-style:none;user-select:none}
|
|
.ausboss-transform-section summary::before{content:"▸";display:inline-block;width:12px;transition:transform .12s}.ausboss-transform-section details[open] summary::before{transform:rotate(90deg)}
|
|
.ausboss-transform-section input[type=checkbox]{width:auto;justify-self:start;accent-color:${BRAND}}
|
|
.ausboss-transform-timeline{display:flex;flex-wrap:wrap;align-items:center;gap:6px;padding:8px 12px;border-top:1px solid #30343a;background:#17191c}
|
|
.ausboss-transform-timeline>.ausboss-transform-trim{flex-basis:100%}
|
|
.ausboss-transform-transport{display:flex;flex-wrap:wrap;align-items:center;gap:8px;flex-basis:100%}
|
|
.ausboss-transform-steps{display:flex;gap:4px;flex-wrap:wrap}.ausboss-transform-steps button{padding:5px 7px}
|
|
.ausboss-transform-badge{padding:3px 7px;border-radius:99px;background:#263034;color:#8de0da;font-size:11px}
|
|
@media(max-width:900px){.ausboss-transform-body{grid-template-columns:220px minmax(260px,1fr)}.ausboss-transform-sidebar.right{display:none}}
|
|
`;
|
|
document.head.appendChild(style);
|
|
}
|
|
|
|
function widget(node, name) { return node.widgets?.find((item) => item.name === name); }
|
|
function value(node, name, fallback = 0) { return widget(node, name)?.value ?? fallback; }
|
|
function setValue(node, name, next) {
|
|
const target = widget(node, name);
|
|
if (!target) return;
|
|
target.value = next;
|
|
target.callback?.(next);
|
|
}
|
|
function values(node) {
|
|
return Object.fromEntries(Object.keys(TRANSFORM_DEFAULTS).map((name) => [name, value(node, name, TRANSFORM_DEFAULTS[name])]));
|
|
}
|
|
|
|
function suppressCoreImagePreview(node) {
|
|
const previewIndex = node.widgets?.findIndex((item) => item.name === CORE_IMAGE_PREVIEW_WIDGET) ?? -1;
|
|
if (previewIndex >= 0) {
|
|
node.widgets[previewIndex].onRemove?.();
|
|
node.widgets.splice(previewIndex, 1);
|
|
}
|
|
if (node.__ausbossImgsSuppressed) return;
|
|
node.__ausbossImgsSuppressed = true;
|
|
node.__ausbossAddCustomWidget = node.addCustomWidget;
|
|
if (typeof node.addCustomWidget === "function") {
|
|
node.addCustomWidget = function (customWidget) {
|
|
if (customWidget?.name === CORE_IMAGE_PREVIEW_WIDGET) hideWidget(customWidget);
|
|
return node.__ausbossAddCustomWidget.call(this, customWidget);
|
|
};
|
|
}
|
|
node.__ausbossImgsDescriptor = Object.getOwnPropertyDescriptor(node, "imgs");
|
|
Object.defineProperty(node, "imgs", {
|
|
configurable: true,
|
|
enumerable: true,
|
|
get() { return undefined; },
|
|
set() {},
|
|
});
|
|
}
|
|
|
|
function sourceKey(node, kind) {
|
|
if (kind === "image") return String(value(node, "image", ""));
|
|
return videoSourceState(
|
|
value(node, "source_mode", INPUT_FOLDER_MODE),
|
|
value(node, "video", ""),
|
|
value(node, "local_path", ""),
|
|
).key;
|
|
}
|
|
|
|
function parseInputReference(selection) {
|
|
const normalized = String(selection || "").replaceAll("\\", "/");
|
|
const parts = normalized.split("/");
|
|
const filename = parts.pop() || "";
|
|
return { filename, subfolder: parts.join("/"), type: "input" };
|
|
}
|
|
|
|
function imageSourceUrl(selection) {
|
|
const reference = parseInputReference(selection);
|
|
return api.apiURL(`/view?${new URLSearchParams(reference)}`);
|
|
}
|
|
|
|
function videoParams(node, maxSize = 1600) {
|
|
return new URLSearchParams({
|
|
source_mode: String(value(node, "source_mode", "input folder")),
|
|
video: String(value(node, "video", "")),
|
|
local_path: String(value(node, "local_path", "")),
|
|
seek_mode: String(value(node, "seek_mode", "frame index")),
|
|
frame_index: String(Math.max(0, Math.round(Number(value(node, "frame_index", 0)) || 0))),
|
|
frame_time: String(Math.max(0, Number(value(node, "frame_time", 0)) || 0)),
|
|
max_width: String(maxSize),
|
|
max_height: String(maxSize),
|
|
});
|
|
}
|
|
|
|
async function uploadMedia(node, kind, file) {
|
|
const body = new FormData();
|
|
body.append("image", file, file.name);
|
|
body.append("type", "input");
|
|
const route = kind === "video" ? "/ausboss/transform/video/upload" : "/upload/image";
|
|
const response = await api.fetchApi(route, { method: "POST", body });
|
|
if (!response.ok) {
|
|
const text = await response.text();
|
|
let message = text;
|
|
try { message = JSON.parse(text).error || text; } catch {}
|
|
throw new Error(message || "Upload failed.");
|
|
}
|
|
const result = await response.json();
|
|
const selection = result.subfolder ? `${result.subfolder}/${result.name}` : result.name;
|
|
const target = widget(node, kind);
|
|
if (Array.isArray(target?.options?.values) && !target.options.values.includes(selection)) target.options.values.push(selection);
|
|
if (kind === "video") setValue(node, "source_mode", "input folder");
|
|
setValue(node, kind, selection);
|
|
return selection;
|
|
}
|
|
|
|
function resetTransform(node, includeTimeline = false) {
|
|
if (node.properties) { delete node.properties.ausboss_fit_aspect; delete node.properties.ausboss_aspect_lock; }
|
|
for (const [name, next] of Object.entries(declaredTransformDefaults(node.constructor?.nodeData, includeTimeline))) setValue(node, name, next);
|
|
node.setDirtyCanvas?.(true, true);
|
|
}
|
|
|
|
// The node face's Reset: only the shape - rotation, crop, padding. Fill,
|
|
// feather and Align stay, as they do when the source changes.
|
|
function resetGeometry(node) {
|
|
if (node.properties) { delete node.properties.ausboss_fit_aspect; delete node.properties.ausboss_aspect_lock; }
|
|
for (const [name, next] of Object.entries(sourceResetValues(false))) setValue(node, name, next);
|
|
node.setDirtyCanvas?.(true, true);
|
|
}
|
|
|
|
function createElement(tag, className, text) {
|
|
const element = document.createElement(tag);
|
|
if (className) element.className = className;
|
|
if (text !== undefined) element.textContent = text;
|
|
return element;
|
|
}
|
|
|
|
function addLabeledControl(section, title, control, suffix = "") {
|
|
const label = createElement("label");
|
|
label.append(createElement("span", "", title), control, createElement("span", "", suffix));
|
|
section.append(label);
|
|
return label;
|
|
}
|
|
|
|
function buildMediaSourceCard(state) {
|
|
const { node, kind } = state;
|
|
const root = createElement("div", "ausboss-transform-source");
|
|
const modes = createElement("div", "ausboss-transform-source-mode");
|
|
const uploadsMode = createElement("button", "", "Uploads");
|
|
const localMode = createElement("button", "", "Local path");
|
|
uploadsMode.type = localMode.type = "button";
|
|
uploadsMode.title = "Choose a video already in ComfyUI's input folder or upload another.";
|
|
localMode.title = "Read a video inside ComfyUI's input, output or temp folder in place, without copying it.";
|
|
modes.append(uploadsMode, localMode);
|
|
|
|
const field = createElement("div", "ausboss-transform-source-field");
|
|
// The media picker previews the hovered file, which a native <select> cannot.
|
|
const picker = createMediaPicker({
|
|
kind: kind === "video" ? "video" : "image",
|
|
placeholder: `Choose an uploaded ${kind}…`,
|
|
label: `Uploaded ${kind}`,
|
|
viewUrl: (name) => api.apiURL(`/view?${mediaViewQuery(name)}`),
|
|
getOptions: () => currentOptions(),
|
|
getValue: () => value(node, kind, ""),
|
|
onChange: (name) => {
|
|
setValue(node, kind, name);
|
|
sync();
|
|
notifyAusbossChange();
|
|
},
|
|
});
|
|
const localPath = createElement("input");
|
|
localPath.type = "text";
|
|
localPath.spellcheck = false;
|
|
localPath.placeholder = "/absolute/path/to/video.mp4";
|
|
localPath.setAttribute("aria-label", "Local video path");
|
|
const upload = createElement("label", "ausboss-transform-button ausboss-transform-file ausboss-transform-source-action");
|
|
const uploadText = createElement("span", "", "Upload");
|
|
upload.append(uploadText);
|
|
const fileInput = createElement("input");
|
|
fileInput.type = "file";
|
|
fileInput.accept = `${kind}/*`;
|
|
fileInput.setAttribute("aria-label", `Upload ${kind}`);
|
|
upload.append(fileInput);
|
|
const hint = createElement("div", "ausboss-transform-source-hint");
|
|
field.append(picker.element, upload);
|
|
root.append(kind === "image" ? createElement("div", "ausboss-transform-source-heading", "Image source") : modes, field, hint);
|
|
|
|
const currentOptions = () => {
|
|
const target = widget(node, kind);
|
|
let options = target?.options?.values;
|
|
if (typeof options === "function") options = options(target, node);
|
|
return normalizeVideoOptions(options, target?.value);
|
|
};
|
|
const sync = () => {
|
|
const source = mediaSourceState(
|
|
kind,
|
|
value(node, "source_mode", INPUT_FOLDER_MODE),
|
|
value(node, kind, ""),
|
|
value(node, "local_path", ""),
|
|
);
|
|
uploadsMode.classList.toggle("on", source.mode === INPUT_FOLDER_MODE);
|
|
localMode.classList.toggle("on", source.mode === LOCAL_PATH_MODE);
|
|
picker.refresh(value(node, kind, ""));
|
|
localPath.value = String(value(node, "local_path", ""));
|
|
field.replaceChildren();
|
|
if (source.mode === LOCAL_PATH_MODE) field.append(localPath);
|
|
else field.append(picker.element, upload);
|
|
hint.textContent = source.hint;
|
|
hint.title = source.mode === LOCAL_PATH_MODE
|
|
? `${source.hint} Only videos inside ComfyUI's input, output or temp folder can be read.`
|
|
: source.hint;
|
|
// "Choose an uploaded video" has done its job once one is chosen; its
|
|
// line goes to the picture. The Local path note stays while you type.
|
|
hint.style.display = source.mode !== LOCAL_PATH_MODE && source.selection ? "none" : "";
|
|
};
|
|
const chooseMode = (mode) => {
|
|
if (value(node, "source_mode", INPUT_FOLDER_MODE) === mode) return;
|
|
setValue(node, "source_mode", mode);
|
|
sync();
|
|
notifyAusbossChange();
|
|
};
|
|
uploadsMode.addEventListener("click", () => chooseMode(INPUT_FOLDER_MODE));
|
|
localMode.addEventListener("click", () => chooseMode(LOCAL_PATH_MODE));
|
|
const commitLocalPath = () => {
|
|
const next = localPath.value.trim();
|
|
if (next !== String(value(node, "local_path", ""))) {
|
|
setValue(node, "local_path", next);
|
|
notifyAusbossChange();
|
|
}
|
|
sync();
|
|
};
|
|
localPath.addEventListener("keydown", (event) => {
|
|
event.stopPropagation();
|
|
if (event.key === "Enter") localPath.blur();
|
|
if (event.key === "Escape") { localPath.value = String(value(node, "local_path", "")); localPath.blur(); }
|
|
});
|
|
localPath.addEventListener("blur", commitLocalPath);
|
|
fileInput.addEventListener("change", async () => {
|
|
if (!fileInput.files?.[0]) return;
|
|
fileInput.disabled = true;
|
|
uploadText.textContent = "Uploading…";
|
|
upload.setAttribute("aria-busy", "true");
|
|
try {
|
|
await uploadMedia(node, kind, fileInput.files[0]);
|
|
sync();
|
|
notifyAusbossChange();
|
|
} catch (error) {
|
|
showToast({ severity: "error", summary: "Crop + Rotate + Pad \u{1F18E}", detail: error.message, life: 8000 });
|
|
} finally {
|
|
fileInput.value = "";
|
|
fileInput.disabled = false;
|
|
uploadText.textContent = "Upload";
|
|
upload.removeAttribute("aria-busy");
|
|
}
|
|
});
|
|
root.addEventListener("pointerdown", (event) => {
|
|
if (event.target.closest("button,select,input,label")) event.stopPropagation();
|
|
});
|
|
state.syncSourceCard = sync;
|
|
sync();
|
|
return root;
|
|
}
|
|
|
|
export function installTransformNode(node, kind, mountPanel = null) {
|
|
installStyles();
|
|
const state = {
|
|
node, kind, image: null, sourceWidth: 0, sourceHeight: 0, metadata: null,
|
|
modal: null, canvas: null, previewCanvas: null, render: null, panelRender: null, drag: null,
|
|
view: { zoom: 1, panX: 0, panY: 0 }, grid: false, ready: false,
|
|
source: sourceKey(node, kind), frameController: null, frameObjectUrl: null,
|
|
playbackTimer: null, playing: false, playbackSession: 0, disposed: false, loadSerial: 0,
|
|
imageIndex: null, imageTime: null,
|
|
};
|
|
node.__ausbossTransformState = state;
|
|
state.isClip = Boolean(widget(node, "start_seconds") && widget(node, "end_seconds"));
|
|
state.trimViews = new Set();
|
|
if (state.isClip) {
|
|
// The executor includes every input in its cache key, even when
|
|
// IS_CHANGED ignores it. Preview position is UI state, not clip input.
|
|
for (const [name, constant] of [["seek_mode", "frame index"], ["frame_index", 0], ["frame_time", 0]]) {
|
|
widget(node, name).serializeValue = () => constant;
|
|
}
|
|
}
|
|
// No transform node sends a picture of its own, so a ComfyUI preview on
|
|
// one is always somebody else's: outputs are filed by node id, and a run
|
|
// queued in another workflow tab lands on the node with the same id here.
|
|
// The stage is the node's only picture, in both renderers (the video
|
|
// suppression also sets Nodes 2.0's hideOutputImages).
|
|
suppressCoreImagePreview(node);
|
|
suppressCoreVideoPreview(node);
|
|
if (kind === "video") installVideoDrop(state);
|
|
for (const name of HIDDEN_WIDGETS) hideWidget(widget(node, name));
|
|
liftSocket(node, "fixed_frames");
|
|
|
|
const panel = createElement("div", "ausboss-transform-panel");
|
|
const preview = createElement("canvas", "ausboss-transform-preview");
|
|
const row = createElement("div", "ausboss-transform-row");
|
|
const open = createElement("button", "ausboss-transform-button", "Open editor");
|
|
const resetCrop = createElement("button", "ausboss-transform-button", "Reset crop");
|
|
resetCrop.title = "Restore the full source crop; keep rotation, padding and timeline.";
|
|
resetCrop.addEventListener("click", () => {
|
|
setValue(node, "crop_aspect_ratio", "free");
|
|
if (node.properties) { delete node.properties.ausboss_fit_aspect; node.properties.ausboss_aspect_lock = false; }
|
|
fitCrop(state); updateModalInfo(state); notifyAusbossChange();
|
|
});
|
|
const reset = createElement("button", "ausboss-transform-button", "Reset");
|
|
reset.title = "Reset rotation, crop and padding. Fill, feather, Align and the timeline stay.";
|
|
reset.addEventListener("click", () => {
|
|
resetGeometry(node);
|
|
fitCrop(state); updateModalInfo(state); notifyAusbossChange();
|
|
});
|
|
row.append(open, resetCrop, reset);
|
|
panel.append(buildMediaSourceCard(state));
|
|
const readout = createElement("div", "ausboss-transform-readout");
|
|
state.readout = readout;
|
|
panel.append(preview, readout);
|
|
panel.append(buildAspectChipRow(state), buildAspectModeRow(state));
|
|
// Every transform node shows its canvas on the face - fill, feather and,
|
|
// where the node has it, the resize budget and step - so a wrong value is
|
|
// seen on the node, not discovered in the render. Both video nodes also
|
|
// get the timeline: the clip node trims with it, the frame picker scrubs.
|
|
panel.append(...buildCanvasRow(state));
|
|
if (kind === "video") panel.append(buildTrim(state));
|
|
panel.append(row);
|
|
state.previewCanvas = preview;
|
|
open.addEventListener("click", () => openEditor(state));
|
|
|
|
if (typeof node.addDOMWidget === "function" && mountPanel) {
|
|
mountPanel(node, panel);
|
|
} else if (typeof node.addDOMWidget === "function") {
|
|
const domWidget = node.addDOMWidget("ausboss_transform_preview", "ausboss_transform_preview", panel, {
|
|
serialize: false,
|
|
hideOnZoom: false,
|
|
});
|
|
keepDomWidgetWidthAuto(domWidget);
|
|
// Not saved with the workflow either: options.serialize only keeps it out
|
|
// of the prompt, and saved values come back by position.
|
|
domWidget.serialize = false;
|
|
// exactMinWidth: 330 is the node's real floor, without the frontend's
|
|
// number-widget padding that made the first corner drag jump to 434.
|
|
fillNodeHeight(domWidget, { minWidth: TRANSFORM_MIN_WIDTH, minHeight: () => transformPanelFloor(node), minNodeSize: [TRANSFORM_MIN_WIDTH, state.isClip ? 802 : kind === "video" ? 570 : 456], exactMinWidth: true });
|
|
} else {
|
|
node.addWidget?.("button", "Open editor", null, () => openEditor(state), { serialize: false });
|
|
}
|
|
// A fresh node opens at its floor: the stage as tall as its width asks.
|
|
node.setSize?.([
|
|
Math.max(TRANSFORM_MIN_WIDTH, Math.min(520, node.size?.[0] || TRANSFORM_MIN_WIDTH)),
|
|
node.computeSize?.()[1] || (state.isClip ? 842 : kind === "video" ? 635 : 511),
|
|
]);
|
|
if (typeof node.addDOMWidget === "function") {
|
|
// Redraw on wrapper size changes (node resize, zoom relayout);
|
|
// node.onResize is unreliable across frontends.
|
|
//
|
|
// This is not only about hit-testing. prepareCanvas() sizes the backing
|
|
// store from the element at DRAW time, and the canvas is CSS-stretched to
|
|
// its box, so a box that changes shape without a redraw displays the last
|
|
// frame at the wrong aspect. Both kinds need it: the video panel is a
|
|
// passive preview and has no other reason to redraw, which is exactly why
|
|
// it was the one that came out stretched.
|
|
state.panelResizeObserver = new ResizeObserver(() => draw(state));
|
|
state.panelResizeObserver.observe(preview);
|
|
// The graph scales the DOM widget with its zoom, so the backing store
|
|
// sized at one zoom turns to mush at another: redraw when it changes.
|
|
chainCallback(node, "onDrawForeground", function () {
|
|
if (state.isClip && !state.disposed) {
|
|
const rate = clipOutputRate(node, state.metadata?.fps, value(node, "every_nth", 1));
|
|
const linked = ["fixed_frames", "frame_load_cap", "max_frames", "start_frame", "end_frame", "start_seconds", "end_seconds", "every_nth"];
|
|
const signature = JSON.stringify([rate, ...linked.map(name => inputNumber(node, name, value(node, name, 0)))]);
|
|
if (signature !== state.trimRate) {
|
|
state.trimRate = signature;
|
|
for (const trim of state.trimViews) trim.sync();
|
|
}
|
|
}
|
|
if (state.disposed || state.zoomRedraw || Math.abs(panelOversample() - (state.panelOversample ?? 1)) < 0.01) return;
|
|
state.zoomRedraw = requestAnimationFrame(() => { state.zoomRedraw = null; if (!state.disposed) draw(state); });
|
|
});
|
|
}
|
|
if (typeof node.addDOMWidget === "function") {
|
|
// All transform nodes share inline handles. Wheel/middle-drag still
|
|
// belong to the graph; only direct handle gestures are captured.
|
|
state.panelInteractive = true;
|
|
state.panelAbort = new AbortController();
|
|
attachStageHandlers(state, preview, state.panelAbort.signal);
|
|
}
|
|
|
|
const watched = kind === "image" ? ["image"] : ["video", "source_mode", "local_path"];
|
|
for (const name of watched) {
|
|
const target = widget(node, name);
|
|
if (!target) continue;
|
|
chainCallback(target, "callback", function () {
|
|
state.syncSourceCard?.();
|
|
if (state.ready) onSourceChanged(state, true);
|
|
});
|
|
}
|
|
chainCallback(node, "onConnectionsChange", () => queueMicrotask(() => {
|
|
for (const trim of state.trimViews) trim.sync();
|
|
}));
|
|
chainCallback(node, "onConfigure", () => queueMicrotask(() => {
|
|
if (state.disposed) return;
|
|
for (const name of HIDDEN_WIDGETS) hideWidget(widget(node, name));
|
|
liftSocket(node, "fixed_frames");
|
|
state.syncSourceCard?.();
|
|
for (const trim of state.trimViews) trim.sync();
|
|
if (state.ready) onSourceChanged(state, false);
|
|
}));
|
|
queueMicrotask(async () => {
|
|
// Core's upload helper can add its button after our creation hook.
|
|
for (const name of HIDDEN_WIDGETS) hideWidget(widget(node, name));
|
|
liftSocket(node, "fixed_frames");
|
|
state.ready = true;
|
|
await onSourceChanged(state, false);
|
|
});
|
|
return state;
|
|
}
|
|
|
|
// Dropping a video file on the node uploads it and makes it the source,
|
|
// as core's upload widgets do for their own nodes. Core's canvas drop
|
|
// handler asks the node under the cursor first; a handled drop keeps it
|
|
// from spawning a separate Load Video node for the file.
|
|
const VIDEO_FILE_PATTERN = /\.(avi|m2ts|m4v|mkv|mov|mp4|mpeg|mpg|mts|webm)$/i;
|
|
|
|
function installVideoDrop(state) {
|
|
const node = state.node;
|
|
node.onDragOver = (event) => {
|
|
const items = event?.dataTransfer?.items;
|
|
return Boolean(items && Array.from(items).some((item) => item.kind === "file"));
|
|
};
|
|
node.onDragDrop = async (event) => {
|
|
const file = Array.from(event?.dataTransfer?.files ?? []).find(
|
|
(candidate) => String(candidate.type).startsWith("video/") || VIDEO_FILE_PATTERN.test(candidate.name),
|
|
);
|
|
if (!file) return false;
|
|
try {
|
|
await uploadMedia(node, "video", file);
|
|
state.syncSourceCard?.();
|
|
if (state.ready) await onSourceChanged(state, true);
|
|
notifyAusbossChange();
|
|
} catch (error) {
|
|
showToast({ severity: "error", summary: "Crop + Rotate + Pad \u{1F18E}", detail: error.message, life: 8000 });
|
|
}
|
|
return true;
|
|
};
|
|
}
|
|
|
|
// Format chips right under the preview: one tap pads the whole source to
|
|
// that aspect with centered fill bands (the editor's Pad to aspect), so an
|
|
// outpaint canvas is a single click. Tapping the lit chip clears it again.
|
|
const ASPECT_CHIP_ORDER = ["1:1", "4:3", "3:2", "16:9", "21:9"];
|
|
|
|
function buildAspectChipRow(state) {
|
|
const node = state.node;
|
|
const row = createElement("div", "ausboss-transform-aspects");
|
|
const flip = createElement("button", "ausboss-transform-aspect ausboss-transform-aspect-flip");
|
|
flip.type = "button";
|
|
const glyph = createElement("span", "ausboss-transform-aspect-glyph");
|
|
flip.append(glyph);
|
|
row.append(flip);
|
|
const caption = createElement("span", "", "Ratio");
|
|
caption.title = "Choose the target ratio, then use Crop or Pad below. Crop locks the crop shape without adding padding.";
|
|
row.append(caption);
|
|
const portrait = () => {
|
|
const [w, h] = String(node.properties?.ausboss_fit_aspect ?? "").split(":").map(Number);
|
|
return w && h && w !== h ? h > w : Boolean(node.properties?.ausboss_pad_portrait);
|
|
};
|
|
const oriented = (aspect) => portrait() ? aspect.split(":").reverse().join(":") : aspect;
|
|
flip.addEventListener("click", () => {
|
|
const next = !portrait();
|
|
const current = String(node.properties?.ausboss_fit_aspect ?? "");
|
|
node.properties ??= {};
|
|
node.properties.ausboss_pad_portrait = next;
|
|
if (state.image && /^\d+:\d+$/.test(current) && current !== "1:1") {
|
|
fitAspect(state, current.split(":").reverse().join(":"), aspectMode(state));
|
|
}
|
|
sync();
|
|
notifyAusbossChange();
|
|
});
|
|
// Three taps on one chip: pad to the format, lock it, clear it.
|
|
const chips = [];
|
|
for (const aspect of ASPECT_CHIP_ORDER) {
|
|
const chip = createElement("button", "ausboss-transform-aspect", aspect);
|
|
chip.type = "button";
|
|
chip.addEventListener("click", () => {
|
|
if (!state.image) return;
|
|
node.properties ??= {};
|
|
node.properties.ausboss_pad_portrait = portrait();
|
|
const ratio = oriented(aspect);
|
|
if (String(node.properties.ausboss_fit_aspect ?? "") !== ratio) fitAspect(state, ratio, aspectMode(state));
|
|
else if (!node.properties.ausboss_aspect_lock) setAspectLock(state, true);
|
|
else clearAspect(state);
|
|
sync();
|
|
});
|
|
chips.push({ chip, aspect }); row.append(chip);
|
|
}
|
|
const sync = () => {
|
|
const current = String(node.properties?.ausboss_fit_aspect ?? "");
|
|
const locked = Boolean(node.properties?.ausboss_aspect_lock);
|
|
flip.title = `${portrait() ? "Portrait" : "Landscape"} — click to flip to ${portrait() ? "landscape" : "portrait"}`;
|
|
flip.setAttribute("aria-label", flip.title);
|
|
flip.setAttribute("aria-pressed", String(portrait()));
|
|
glyph.style.width = portrait() ? "10px" : "16px";
|
|
glyph.style.height = portrait() ? "16px" : "10px";
|
|
for (const { chip, aspect } of chips) {
|
|
const ratio = oriented(aspect);
|
|
const active = ratio === current;
|
|
chip.replaceChildren(document.createTextNode(ratio));
|
|
if (active && locked) chip.append(lockGlyph());
|
|
chip.title = !active
|
|
? aspectMode(state) === "crop" ? `Crop to ${ratio}: lock the crop shape without padding.` : `Pad to ${ratio}: keep every source pixel and add centered fill bands.`
|
|
: locked
|
|
? `Locked to ${ratio} in ${aspectMode(state)} mode. Tap to clear.`
|
|
: `Padded to ${ratio}. Tap again to lock the format for crop and padding drags.`;
|
|
chip.classList.toggle("active", active);
|
|
chip.classList.toggle("locked", active && locked);
|
|
chip.setAttribute("aria-pressed", String(active));
|
|
}
|
|
};
|
|
sync();
|
|
state.syncAspectChips = sync;
|
|
return row;
|
|
}
|
|
|
|
function aspectMode(state) {
|
|
return state.node.properties?.ausboss_aspect_mode === "crop" ? "crop" : "pad";
|
|
}
|
|
|
|
function buildAspectModeRow(state) {
|
|
const row = createElement("div", "ausboss-transform-row ausboss-transform-aspect-modes");
|
|
const buttons = [];
|
|
for (const mode of ["crop", "pad"]) {
|
|
const button = createElement("button", "ausboss-transform-aspect", mode === "crop" ? "Crop" : "Pad");
|
|
button.type = "button";
|
|
button.title = mode === "crop" ? "Fit and lock the crop to the selected ratio; no padding." : "Keep the whole source and pad to the selected ratio.";
|
|
button.addEventListener("click", () => {
|
|
state.node.properties ??= {};
|
|
state.node.properties.ausboss_aspect_mode = mode;
|
|
const ratio = state.node.properties.ausboss_fit_aspect;
|
|
if (ratio && ratio !== "free") fitAspect(state, ratio, mode);
|
|
draw(state); notifyAusbossChange();
|
|
});
|
|
buttons.push([mode, button]); row.append(button);
|
|
}
|
|
const alignment = createElement("label", "ausboss-transform-alignment");
|
|
alignment.style.cssText = "display:flex;align-items:center;gap:5px;flex:0 0 118px";
|
|
const multiple = makeScrubInput({ value: value(state.node, "canvas_multiple", 1),
|
|
min: 1, max: 4096, step: 8, fineStep: 1, decimals: 0, width: 82, unit: "px",
|
|
title: "Align the output canvas to a pixel multiple (1 disables). Adds pixels on the right/bottom when needed.",
|
|
onChange: (amount) => { setValue(state.node, "canvas_multiple", amount); draw(state); updateModalInfo(state); },
|
|
onSettle: notifyAusbossChange });
|
|
alignment.append(createElement("span", "", "Align"), multiple.root);
|
|
row.append(alignment);
|
|
state.syncAspectMode = () => {
|
|
multiple.set(value(state.node, "canvas_multiple", 1));
|
|
for (const [mode, button] of buttons) {
|
|
button.classList.toggle("active", aspectMode(state) === mode);
|
|
button.setAttribute("aria-pressed", String(aspectMode(state) === mode));
|
|
}
|
|
};
|
|
state.syncAspectMode();
|
|
return row;
|
|
}
|
|
|
|
// A padlock drawn by hand: shackle arc over a filled body.
|
|
function lockGlyph() {
|
|
const glyph = createElement("span", "ausboss-transform-aspect-lock");
|
|
glyph.innerHTML = '<svg width="9" height="11" viewBox="0 0 9 11" aria-hidden="true"><path d="M2.2 5V3.4a2.3 2.3 0 0 1 4.6 0V5" fill="none" stroke="currentColor" stroke-width="1.3"/><rect x="1" y="4.8" width="7" height="5.4" rx="1.2" fill="currentColor"/></svg>';
|
|
return glyph;
|
|
}
|
|
|
|
// --- Aspect lock ----------------------------------------------------------
|
|
// The locked format is the chip row's / target select's aspect
|
|
// (properties.ausboss_fit_aspect) with properties.ausboss_aspect_lock on.
|
|
// Every handle gesture then re-solves the padding so crop plus padding keep
|
|
// that ratio (lockPadding, transform_geometry.mjs).
|
|
function lockRatio(state) {
|
|
const properties = state.node.properties;
|
|
if (aspectMode(state) === "crop" || !properties?.ausboss_aspect_lock || !state.sourceWidth || !state.sourceHeight) return null;
|
|
const source = rotatedSize(state.sourceWidth, state.sourceHeight, value(state.node, "rotation_degrees", 0));
|
|
return parseAspectRatio(String(properties.ausboss_fit_aspect ?? ""), source);
|
|
}
|
|
|
|
function applyAspectLock(state, driver = "x") {
|
|
const ratio = lockRatio(state);
|
|
if (!ratio) return false;
|
|
const source = rotatedSize(state.sourceWidth, state.sourceHeight, value(state.node, "rotation_degrees", 0));
|
|
const current = values(state.node);
|
|
const pads = lockPadding(current, resolveCrop(current, source), ratio, driver);
|
|
if (!pads) return false;
|
|
for (const [name, next] of Object.entries(pads)) setValue(state.node, name, next);
|
|
return true;
|
|
}
|
|
|
|
function setAspectLock(state, on) {
|
|
state.node.properties ??= {};
|
|
state.node.properties.ausboss_aspect_lock = Boolean(on);
|
|
if (aspectMode(state) === "crop") setValue(state.node, "crop_aspect_ratio", on ? state.node.properties.ausboss_fit_aspect : "free");
|
|
else if (on) applyAspectLock(state, "x");
|
|
draw(state); updateModalInfo(state); notifyAusbossChange();
|
|
}
|
|
|
|
function clearAspect(state) {
|
|
fitAspect(state, "free", aspectMode(state));
|
|
if (state.node.properties) { delete state.node.properties.ausboss_fit_aspect; state.node.properties.ausboss_aspect_lock = false; }
|
|
draw(state); updateModalInfo(state); notifyAusbossChange();
|
|
}
|
|
|
|
// Which axis a crop drag drove, for the lock: the one that changed more,
|
|
// the handle's own axis on a tie.
|
|
function cropDriver(before, after, handle) {
|
|
const dx = Math.abs(after.width - before.width);
|
|
const dy = Math.abs(after.height - before.height);
|
|
if (dx !== dy) return dx > dy ? "x" : "y";
|
|
return /[ns]/.test(handle) && !/[ew]/.test(handle) ? "y" : "x";
|
|
}
|
|
|
|
// The video nodes' canvas row under the format chips: fill swatch, feather
|
|
// amount and the resize budget - the three values a video outpaint model
|
|
// keys on (LTX's IC-LoRA wants pure black, a hard edge and 32-px sizes),
|
|
// editable on the face and mirrored from the hidden widgets on every draw.
|
|
function buildCanvasRow(state) {
|
|
const node = state.node;
|
|
const video = state.kind === "video";
|
|
const row = createElement("div", "ausboss-transform-row ausboss-transform-canvas-row");
|
|
const fillLabel = createElement("label");
|
|
const fill = createElement("input"); fill.type = "color"; fill.className = "ausboss-transform-swatch";
|
|
fill.title = video
|
|
? "Fill colour of the padding and rotation corners. Video outpaint models key on it: the LTX IC-LoRA paints pure black (#000000) and leaves other colours alone."
|
|
: "Fill colour of the padding and rotation corners.";
|
|
fill.addEventListener("input", () => { setValue(node, "fill_color", fill.value); draw(state); });
|
|
fill.addEventListener("change", () => notifyAusbossChange());
|
|
fillLabel.append(createElement("span", "", "Fill"), fill);
|
|
const featherLabel = createElement("label");
|
|
const feather = makeScrubInput({ value: value(node, "feather", 0), min: 0, max: 4096, step: 1, decimals: 0, width: 62, unit: "px",
|
|
title: video
|
|
? "Feather of the mask into the kept frames, in pixels. The frames keep a hard edge against the fill whatever the feather, so a black-band outpaint still sees its bars."
|
|
: "Feather of the mask into the kept pixels; the image keeps a hard edge against the fill.",
|
|
onChange: (amount) => { setValue(node, "feather", amount); draw(state); updateModalInfo(state); }, onSettle: notifyAusbossChange });
|
|
featherLabel.append(createElement("span", "", "Feather"), feather.root);
|
|
const resizeLabel = createElement("label");
|
|
const resize = createElement("input"); resize.type = "checkbox";
|
|
resize.title = "Resize the output to a megapixel budget, each side rounded to the step (32 for LTX and Wan). The budget and step open in a row below.";
|
|
resize.addEventListener("change", () => {
|
|
setValue(node, "resize_to_megapixels", resize.checked);
|
|
draw(state); updateModalInfo(state); notifyAusbossChange();
|
|
});
|
|
resizeLabel.append(createElement("span", "", "Resize"), resize);
|
|
row.append(fillLabel, featherLabel);
|
|
// The resize budget and its step share a row that only shows while
|
|
// Resize is on: the step decides the final size as much as the budget
|
|
// (LTX wants 32), so it belongs on the face, not only in the editor.
|
|
const resizeRow = createElement("div", "ausboss-transform-row ausboss-transform-canvas-row ausboss-transform-resize-row");
|
|
const budgetLabel = createElement("label");
|
|
const budget = makeScrubInput({ value: value(node, "megapixels", 1), min: 0.01, max: 16, step: 0.05, fineStep: 0.01, decimals: 2, width: 72, unit: "MP",
|
|
title: "Output budget in megapixels (x 1024x1024). The size readout under the picture shows where it lands.",
|
|
onChange: (amount) => { setValue(node, "megapixels", amount); draw(state); updateModalInfo(state); }, onSettle: notifyAusbossChange });
|
|
budgetLabel.append(createElement("span", "", "Megapixels"), budget.root);
|
|
const stepLabel = createElement("label");
|
|
const steps = makeScrubInput({ value: value(node, "resolution_steps", 1), min: 1, max: 256, step: 8, fineStep: 1, decimals: 0, width: 66, unit: "px",
|
|
title: "Rounds each resized side to a multiple of this (32 for LTX and Wan, 8 or 64 for image models). Each side rounds on its own, so a large step can stretch the picture slightly; the readout warns above 1%.",
|
|
onChange: (amount) => { setValue(node, "resolution_steps", amount); draw(state); updateModalInfo(state); }, onSettle: notifyAusbossChange });
|
|
stepLabel.append(createElement("span", "", "Step"), steps.root);
|
|
resizeRow.append(budgetLabel, stepLabel);
|
|
const hasResize = Boolean(widget(node, "resize_to_megapixels"));
|
|
if (hasResize) row.append(resizeLabel);
|
|
const sync = () => {
|
|
fill.value = normalizeColor(value(node, "fill_color", "#808080"));
|
|
fill.title = `${fill.title.split(" Now ")[0]} Now ${fill.value}.`;
|
|
feather.set(value(node, "feather", 0));
|
|
resize.checked = Boolean(value(node, "resize_to_megapixels", false));
|
|
budget.set(value(node, "megapixels", 1));
|
|
steps.set(value(node, "resolution_steps", 1));
|
|
resizeRow.style.display = hasResize && resize.checked ? "" : "none";
|
|
};
|
|
sync();
|
|
state.syncCanvasRow = sync;
|
|
chainCallback(node, "onConfigure", () => queueMicrotask(sync));
|
|
for (const element of [row, resizeRow]) {
|
|
element.addEventListener("pointerdown", (event) => { if (event.target.closest("input,label")) event.stopPropagation(); });
|
|
}
|
|
return [row, resizeRow];
|
|
}
|
|
|
|
// The size chain in words under the stage: every step that sets the output
|
|
// size, the one the run emits last and brightest, and an amber line when the
|
|
// steps stretch the picture or the resize undoes Align. Its tooltip spells
|
|
// the whole chain out. A DOM line rather than canvas text, so it wraps on a
|
|
// narrow node and never covers the picture being judged.
|
|
function syncReadout(state) {
|
|
const readout = state.readout;
|
|
if (!readout) return;
|
|
if (!state.image || !state.sourceWidth || !state.sourceHeight) { readout.replaceChildren(); readout.title = ""; return; }
|
|
const current = values(state.node);
|
|
const source = rotatedSize(state.sourceWidth, state.sourceHeight, current.rotation_degrees);
|
|
const { tokens, warnings } = sizeChainTokens(sizeChain(current, source, resizeRequest(state.node)));
|
|
const parts = [];
|
|
tokens.forEach((token, index) => {
|
|
if (index) parts.push(" → ");
|
|
if (token.label) parts.push(createElement("span", "", `${token.label} `));
|
|
parts.push(index === tokens.length - 1 ? createElement("b", "", token.text) : token.text);
|
|
});
|
|
if (warnings.length) parts.push(createElement("i", "", `⚠ ${warnings.join(" · ")}`));
|
|
readout.replaceChildren(...parts);
|
|
readout.title = sizeLines(state).join("\n");
|
|
}
|
|
|
|
async function onSourceChanged(state, reset) {
|
|
const key = sourceKey(state.node, state.kind);
|
|
const changed = reset && sourceChanged(state.source, key, state.ready);
|
|
if (changed) {
|
|
// Geometry measured against the old pixels goes; fill, feather, the
|
|
// resize budget and the lit format chip stay - swapping the clip in an
|
|
// outpaint workflow used to reset the fill to grey and the feather to
|
|
// 24, which is exactly what the model cannot work with.
|
|
for (const [name, next] of Object.entries(sourceResetValues(state.kind === "video"))) setValue(state.node, name, next);
|
|
if (state.isClip) { setValue(state.node, "start_seconds", 0); setValue(state.node, "end_seconds", 0); }
|
|
resetView(state);
|
|
}
|
|
if (key) state.source = key;
|
|
await loadSource(state);
|
|
if (changed && state.image) refitAspect(state);
|
|
}
|
|
|
|
// A lit format chip is a standing request: the new source gets padded to
|
|
// it as well, so the canvas keeps its format across clips.
|
|
function refitAspect(state) {
|
|
const aspect = String(state.node.properties?.ausboss_fit_aspect ?? "");
|
|
if (!/^\d+:\d+$/.test(aspect)) return;
|
|
fitAspect(state, aspect, aspectMode(state));
|
|
}
|
|
|
|
async function loadSource(state) {
|
|
const serial = ++state.loadSerial;
|
|
try {
|
|
if (state.kind === "image") {
|
|
const selection = value(state.node, "image", "");
|
|
if (!selection) {
|
|
state.image = null; state.sourceWidth = state.sourceHeight = 0;
|
|
drawEmpty(state, "Choose a source to begin"); return;
|
|
}
|
|
const image = new Image();
|
|
await new Promise((resolve, reject) => {
|
|
image.onload = resolve; image.onerror = () => reject(new Error("Could not load image preview."));
|
|
image.src = imageSourceUrl(selection);
|
|
});
|
|
if (serial !== state.loadSerial || state.disposed) return;
|
|
state.image = image; state.sourceWidth = image.naturalWidth; state.sourceHeight = image.naturalHeight;
|
|
// Core's image-upload helper also installs a source preview. This node has
|
|
// its own transformed preview, so keep only the useful one.
|
|
suppressCoreImagePreview(state.node);
|
|
state.node.imageIndex = null;
|
|
} else {
|
|
const key = sourceKey(state.node, "video");
|
|
if (!key) { state.image = null; state.metadata = null; state.metadataKey = null; drawEmpty(state, "Choose a source to begin"); return; }
|
|
if (state.metadataKey !== key) {
|
|
const metaResponse = await api.fetchApi(`/ausboss/transform/video/metadata?${videoParams(state.node)}`);
|
|
const metadata = await metaResponse.json();
|
|
if (!metaResponse.ok) throw new Error(metadata.error || "Could not read video metadata.");
|
|
if (serial !== state.loadSerial) return;
|
|
state.metadata = metadata; state.metadataKey = key;
|
|
state.sourceWidth = metadata.width; state.sourceHeight = metadata.height;
|
|
state.storyboard = null; state.scrubPreviewTile = null; state.imageIndex = null; state.imageTime = null;
|
|
syncTimelineRange(state);
|
|
requestStoryboard(state, key);
|
|
}
|
|
await loadVideoFrame(state, serial);
|
|
}
|
|
draw(state); updateModalInfo(state);
|
|
} catch (error) {
|
|
if (serial !== state.loadSerial || state.disposed) return;
|
|
if (error?.name === "AbortError") return;
|
|
state.image = null;
|
|
drawEmpty(state, error.message);
|
|
}
|
|
}
|
|
|
|
function syncTimelineRange(state) {
|
|
for (const trim of state.trimViews) trim.sync();
|
|
if (!state.timelineLabel) return;
|
|
const info = clipInfo(state.metadata);
|
|
state.timelineLabel.textContent = `${clampFrame(value(state.node, "frame_index", 0), info)} / ${Math.max(0, info.count - 1)}`;
|
|
}
|
|
|
|
// Storyboard: a keyframe thumbnail strip the server builds once per file in
|
|
// the background. While it exists, dragging shows the nearest tile with zero
|
|
// network latency and the exact decoded frame replaces it a beat later.
|
|
// Best-effort — scrubbing works without it, just without the instant ghost.
|
|
async function requestStoryboard(state, key, attempt = 0) {
|
|
if (state.disposed || state.kind !== "video") return;
|
|
try {
|
|
const response = await api.fetchApi(`/ausboss/transform/video/storyboard?${videoParams(state.node)}`);
|
|
const payload = await response.json();
|
|
if (!response.ok || state.disposed || sourceKey(state.node, "video") !== key) return;
|
|
if (payload.status === "building") {
|
|
if (attempt < 40) setTimeout(() => requestStoryboard(state, key, attempt + 1), 1200);
|
|
return;
|
|
}
|
|
if (payload.status !== "ready") return;
|
|
const image = new Image();
|
|
await new Promise((resolve, reject) => { image.onload = resolve; image.onerror = reject; image.src = payload.sprite; });
|
|
if (state.disposed || sourceKey(state.node, "video") !== key) return;
|
|
state.storyboard = {
|
|
image, times: payload.times, count: payload.count,
|
|
tileWidth: payload.tile_width, tileHeight: payload.tile_height,
|
|
};
|
|
} catch { /* storyboard is an enhancement, never an error */ }
|
|
}
|
|
|
|
function showScrubGhost(state, frameIndex) {
|
|
const storyboard = state.storyboard;
|
|
if (!storyboard) return;
|
|
const info = clipInfo(state.metadata);
|
|
const moment = frameTime(frameIndex, info);
|
|
let tile = 0;
|
|
for (let index = 0; index < storyboard.times.length; index += 1) {
|
|
if (Math.abs(storyboard.times[index] - moment) < Math.abs(storyboard.times[tile] - moment)) tile = index;
|
|
}
|
|
// The tile stands in only while it is nearer the target than the frame
|
|
// already on the stage. A keyframe seconds away is worse than a slightly
|
|
// stale picture, and swapping between the two on every pointer move was
|
|
// the flicker: with one keyframe per clip the ghost was always frame 0.
|
|
const tileGap = Math.abs(storyboard.times[tile] - moment);
|
|
const imageGap = Number.isFinite(state.imageTime) ? Math.abs(state.imageTime - moment) : Infinity;
|
|
const next = tileGap + 0.5 / Math.max(1, info.fps || 30) < imageGap ? tile : null;
|
|
if (next === state.scrubPreviewTile) return;
|
|
state.scrubPreviewTile = next;
|
|
draw(state);
|
|
}
|
|
|
|
// Frame-only refresh for discrete jumps (step buttons, drag release):
|
|
// full-resolution fetch that also snaps the widgets to the decoded frame.
|
|
async function seekFrame(state) {
|
|
try {
|
|
await loadVideoFrame(state);
|
|
draw(state); updateModalInfo(state);
|
|
} catch (error) {
|
|
if (error?.name === "AbortError") return;
|
|
drawEmpty(state, error.message);
|
|
}
|
|
}
|
|
|
|
// Live scrubbing pump. Video players feel responsive because they always
|
|
// render *something* for the newest position instead of waiting for quiet.
|
|
// This keeps exactly one request in flight, fires the first one immediately
|
|
// (no debounce delay), and when a response lands it re-reads the widgets so
|
|
// the next fetch always targets the latest slider position — intermediate
|
|
// positions are skipped, never queued. Scrub frames are fetched at reduced
|
|
// size for fast decode+encode; the drag-release handler does one full-size
|
|
// fetch at the end.
|
|
const SCRUB_PREVIEW_SIZE = 640;
|
|
|
|
function requestScrubFrame(state) {
|
|
state.scrubPending = true;
|
|
if (state.scrubActive) return;
|
|
state.scrubActive = true;
|
|
(async () => {
|
|
while (state.scrubPending && !state.disposed) {
|
|
state.scrubPending = false;
|
|
try {
|
|
await loadVideoFrame(state, ++state.loadSerial, { maxSize: SCRUB_PREVIEW_SIZE, syncWidgets: false });
|
|
draw(state); updateModalInfo(state);
|
|
} catch (error) {
|
|
if (error?.name !== "AbortError") { drawEmpty(state, error.message); break; }
|
|
}
|
|
}
|
|
state.scrubActive = false;
|
|
})();
|
|
}
|
|
|
|
async function loadVideoFrame(state, serial = ++state.loadSerial, options = {}) {
|
|
const { maxSize = 1600, syncWidgets = true } = options;
|
|
state.frameController?.abort();
|
|
const controller = new AbortController();
|
|
state.frameController = controller;
|
|
const response = await api.fetchApi(`/ausboss/transform/video/frame?${videoParams(state.node, maxSize)}`, { signal: controller.signal });
|
|
if (!response.ok) {
|
|
const payload = await response.json().catch(() => ({}));
|
|
throw new Error(payload.error || "Could not decode video preview frame.");
|
|
}
|
|
const blob = await response.blob();
|
|
const objectUrl = URL.createObjectURL(blob);
|
|
const image = new Image();
|
|
try {
|
|
await new Promise((resolve, reject) => {
|
|
image.onload = resolve; image.onerror = () => reject(new Error("Could not display video frame.")); image.src = objectUrl;
|
|
});
|
|
if (serial !== state.loadSerial) return;
|
|
if (state.frameObjectUrl) URL.revokeObjectURL(state.frameObjectUrl);
|
|
state.frameObjectUrl = objectUrl; state.image = image;
|
|
state.scrubPreviewTile = null; // real frame arrived; drop the ghost tile
|
|
const actualIndex = Number(response.headers.get("X-AusBoss-Frame-Index"));
|
|
const actualTime = Number(response.headers.get("X-AusBoss-Frame-Time"));
|
|
// Where the picture on the stage comes from: the ghost rule compares
|
|
// storyboard tiles against it.
|
|
state.imageIndex = Number.isFinite(actualIndex) ? actualIndex : null;
|
|
state.imageTime = Number.isFinite(actualTime) ? actualTime : null;
|
|
// Writing the decoded position back is only safe when the user is not
|
|
// mid-scrub: a stale response overwriting frame_index would rubber-band
|
|
// the playhead to an older frame.
|
|
if (syncWidgets) {
|
|
if (Number.isFinite(actualIndex)) setValue(state.node, "frame_index", actualIndex);
|
|
if (Number.isFinite(actualTime)) setValue(state.node, "frame_time", actualTime);
|
|
syncTimelineRange(state);
|
|
}
|
|
} catch (error) {
|
|
URL.revokeObjectURL(objectUrl);
|
|
throw error;
|
|
}
|
|
}
|
|
|
|
function openEditor(state) {
|
|
if (state.modal) return;
|
|
const modal = createElement("div", "ausboss-transform-modal");
|
|
const header = createElement("div", "ausboss-transform-header");
|
|
header.append(createElement("strong", "", `${state.kind === "video" ? "Video" : "Image"} Crop + Rotate + Pad`), createElement("span", "ausboss-transform-badge", "AusBoss"));
|
|
header.append(createElement("span", "spacer"));
|
|
const cancel = createElement("button", "", "Cancel");
|
|
cancel.title = "Close without saving: puts back everything as it was when the editor opened (Esc)";
|
|
const close = createElement("button", "ausboss-transform-close", "Save & close"); header.append(cancel, close);
|
|
const body = createElement("div", "ausboss-transform-body");
|
|
const left = createElement("aside", "ausboss-transform-sidebar");
|
|
const stage = createElement("main", "ausboss-transform-stage");
|
|
const canvas = createElement("canvas", "ausboss-transform-canvas"); stage.append(canvas);
|
|
const right = createElement("aside", "ausboss-transform-sidebar right");
|
|
body.append(left, stage, right); modal.append(header, body);
|
|
state.modal = modal; state.canvas = canvas; state.openSnapshot = editorSnapshot(state.node);
|
|
buildControls(state, left);
|
|
const status = createElement("div", "ausboss-transform-status"); status.dataset.ausbossStatus = ""; right.append(status);
|
|
right.append(createElement("div", "ausboss-transform-help", "Drag cyan squares to crop. Drag inside the crop to move it. Orange diamonds add padding. The rotate knob at the top-right corner rotates; hold Shift to snap to 15 degrees. Wheel zooms. Middle mouse or Alt-drag pans."));
|
|
if (widget(state.node, "stitch_blend")) right.append(buildStitchSection(state));
|
|
if (state.kind === "video") modal.append(buildTimeline(state));
|
|
document.body.append(modal);
|
|
|
|
const abort = new AbortController(); state.modalAbort = abort;
|
|
close.addEventListener("click", () => closeEditor(state), { signal: abort.signal });
|
|
cancel.addEventListener("click", () => void cancelEditor(state), { signal: abort.signal });
|
|
attachStageHandlers(state, canvas, abort.signal);
|
|
canvas.addEventListener("wheel", (event) => wheelZoom(state, event), { signal: abort.signal, passive: false });
|
|
window.addEventListener("keydown", (event) => keyDown(state, event), { signal: abort.signal });
|
|
window.addEventListener("keyup", (event) => keyUp(state, event), { signal: abort.signal });
|
|
state.resizeObserver = new ResizeObserver(() => draw(state)); state.resizeObserver.observe(stage);
|
|
requestAnimationFrame(() => { resetView(state); draw(state); updateModalInfo(state); });
|
|
}
|
|
|
|
function closeEditor(state) {
|
|
const hadModal = Boolean(state.modal);
|
|
stopPlayback(state);
|
|
state.scrubPending = false;
|
|
state.modalAbort?.abort(); state.resizeObserver?.disconnect(); state.modal?.remove();
|
|
if (state.modalTrim) state.trimViews.delete(state.modalTrim);
|
|
state.modalTrim = null; state.timelineLabel = null;
|
|
state.modal = null; state.openSnapshot = null; state.canvas = null; state.finalPreviewCanvas = null; state.drag = null; state.grid = false; state.syncEditorControls = null; state.syncStitchControls = null; state.blendOverlay = null;
|
|
draw(state); state.node.setDirtyCanvas?.(true, true);
|
|
// Sidebar and timeline controls write widgets without a canvas drag, so a
|
|
// closing editor is their commit point. The disposal path (node removed,
|
|
// possibly mid-load teardown) must never trigger a capture.
|
|
if (hadModal && !state.disposed) notifyAusbossChange();
|
|
}
|
|
|
|
// Cancel is the editor's undo-everything: the controls write the node's
|
|
// widgets live, so the snapshot taken at open is what a cancel puts back.
|
|
// Properties carry the aspect lock and pad/crop mode; the preview DOM widget
|
|
// is display only.
|
|
function editorSnapshot(node) {
|
|
const widgets = {};
|
|
for (const item of node.widgets ?? []) {
|
|
if (!item.name || item.name === "ausboss_transform_preview") continue;
|
|
const current = item.value;
|
|
if (current === null || ["string", "number", "boolean"].includes(typeof current)) widgets[item.name] = current;
|
|
}
|
|
const properties = {};
|
|
for (const [key, current] of Object.entries(node.properties ?? {})) {
|
|
if (key.startsWith("ausboss_")) properties[key] = JSON.stringify(current);
|
|
}
|
|
return { widgets, properties };
|
|
}
|
|
|
|
// The clip node's playhead never reaches its output, so looking around the
|
|
// clip alone is not an edit worth a prompt. A discard still puts it back.
|
|
const CLIP_PLAYHEAD_WIDGETS = new Set(["seek_mode", "frame_index", "frame_time"]);
|
|
|
|
function editorChanged(state) {
|
|
const before = state.openSnapshot; if (!before) return false;
|
|
const now = editorSnapshot(state.node);
|
|
const keys = (a, b) => new Set([...Object.keys(a), ...Object.keys(b)]);
|
|
for (const name of keys(before.widgets, now.widgets)) {
|
|
if (state.isClip && CLIP_PLAYHEAD_WIDGETS.has(name)) continue;
|
|
if (!Object.is(before.widgets[name], now.widgets[name])) return true;
|
|
}
|
|
for (const key of keys(before.properties, now.properties)) if (before.properties[key] !== now.properties[key]) return true;
|
|
return false;
|
|
}
|
|
|
|
function restoreSnapshot(state, snapshot) {
|
|
const node = state.node;
|
|
node.properties ??= {};
|
|
for (const key of Object.keys(node.properties)) {
|
|
if (key.startsWith("ausboss_") && !(key in snapshot.properties)) delete node.properties[key];
|
|
}
|
|
for (const [key, text] of Object.entries(snapshot.properties)) node.properties[key] = JSON.parse(text);
|
|
// Only changed widgets go back, through their callbacks, so a source that
|
|
// never changed is not reloaded.
|
|
for (const [name, previous] of Object.entries(snapshot.widgets)) {
|
|
if (!Object.is(value(node, name, undefined), previous)) setValue(node, name, previous);
|
|
}
|
|
}
|
|
|
|
async function cancelEditor(state) {
|
|
if (!state.modal || state.discardPending) return;
|
|
if (editorChanged(state)) {
|
|
state.discardPending = true;
|
|
stopPlayback(state);
|
|
const discard = await confirmDiscard();
|
|
state.discardPending = false;
|
|
if (!discard || !state.modal) return;
|
|
restoreSnapshot(state, state.openSnapshot);
|
|
}
|
|
closeEditor(state);
|
|
}
|
|
|
|
// Inpaint & Stitch (clip and image nodes): the stitcher this node emits pastes
|
|
// the source back over the generated result. Blend is the ramp where generated
|
|
// pixels take over; it is deliberately separate from the padding feather,
|
|
// which shapes the mask the model sees. Grow moves the paste boundary and
|
|
// sits behind a disclosure - most outpaints never touch it.
|
|
function buildStitchSection(state) {
|
|
const node = state.node;
|
|
const section = createElement("section", "ausboss-transform-section");
|
|
section.append(sectionHeading("Inpaint & Stitch"));
|
|
section.append(createElement("div", "ausboss-transform-help", "Outside the paste mask the stitcher puts the source back bit-for-bit. Inside it - the padded and rotated-in area plus the blend ramp - the generation takes over."));
|
|
const blend = makeScrubInput({ value: value(node, "stitch_blend", 32), min: 0, max: 512, step: 1, decimals: 0,
|
|
title: "Ramp where generated pixels fade over the source, in pixels of the output. Separate from the padding feather.",
|
|
onChange: (amount) => { setValue(node, "stitch_blend", amount); draw(state); updateModalInfo(state); }, onSettle: notifyAusbossChange });
|
|
addLabeledControl(section, "Blend", blend.root, "px");
|
|
const show = createElement("input"); show.type = "checkbox"; show.checked = Boolean(state.showBlend);
|
|
show.title = "Tint the paste mask the stitcher will use - the same mask math as the backend, at preview resolution.";
|
|
show.addEventListener("change", () => { state.showBlend = show.checked; draw(state); });
|
|
addLabeledControl(section, "Show blend", show);
|
|
const advanced = createElement("details"); advanced.append(createElement("summary", "", "Advanced"));
|
|
const grow = makeScrubInput({ value: value(node, "stitch_grow", 0), min: -256, max: 256, step: 1, decimals: 0,
|
|
title: "Moves the paste boundary before the ramp. Positive lets the generation replace a strip of the source next to the seam; negative keeps more source.",
|
|
onChange: (amount) => { setValue(node, "stitch_grow", amount); draw(state); updateModalInfo(state); }, onSettle: notifyAusbossChange });
|
|
addLabeledControl(advanced, "Grow paste", grow.root, "px");
|
|
advanced.append(createElement("div", "ausboss-transform-help", "Use a few pixels of grow when a seam still shows: the generation then repaints the source edge too."));
|
|
section.append(advanced);
|
|
state.syncStitchControls = () => { blend.set(value(node, "stitch_blend", 32)); grow.set(value(node, "stitch_grow", 0)); };
|
|
return section;
|
|
}
|
|
|
|
// Show blend: the stitcher's paste mask, computed the way the backend
|
|
// computes it, at preview resolution. The generated-area mask (padding and
|
|
// rotation voids, everything the rotated source does not cover inside the
|
|
// crop) is rasterised on the pre-resize canvas, feathered like the
|
|
// transform, then grown and blurred by the stitch settings converted from
|
|
// output pixels through any resize - the same steps as
|
|
// stitch_blend_from_mask, mirrored in stitch_preview.mjs and tested against
|
|
// the Python helper. Cached on its inputs: a drag that changes geometry
|
|
// rebuilds it, a pan or zoom does not.
|
|
function blendOverlayCanvas(state, render) {
|
|
const node = state.node;
|
|
const { source, crop, padding } = render;
|
|
const rotation = Number(value(node, "rotation_degrees", 0)) || 0;
|
|
const feather = Math.max(0, Number(value(node, "feather", 0)) || 0);
|
|
const blend = Math.max(0, Number(value(node, "stitch_blend", 32)) || 0);
|
|
const grow = Number(value(node, "stitch_grow", 0)) || 0;
|
|
const resize = value(node, "resize_to_megapixels", false)
|
|
? scaleToMegapixels(padding.outputWidth, padding.outputHeight, value(node, "megapixels", 1), value(node, "resolution_steps", 1))
|
|
: null;
|
|
const key = JSON.stringify([state.sourceWidth, state.sourceHeight, rotation, crop, padding, feather, blend, grow, resize]);
|
|
if (state.blendOverlay?.key === key) return state.blendOverlay.canvas;
|
|
const plan = overlayPlan(padding.outputWidth, padding.outputHeight, resize);
|
|
const { width, height, k } = plan;
|
|
const raster = document.createElement("canvas"); raster.width = width; raster.height = height;
|
|
const rc = raster.getContext("2d", { willReadFrequently: true });
|
|
rc.fillStyle = "#fff"; rc.fillRect(0, 0, width, height);
|
|
rc.save();
|
|
rc.beginPath(); rc.rect(padding.left * k, padding.top * k, crop.width * k, crop.height * k); rc.clip();
|
|
rc.translate((padding.left - crop.x) * k + source.width * k / 2, (padding.top - crop.y) * k + source.height * k / 2);
|
|
rc.rotate(rotation * Math.PI / 180);
|
|
rc.fillStyle = "#000"; rc.fillRect(-state.sourceWidth * k / 2, -state.sourceHeight * k / 2, state.sourceWidth * k, state.sourceHeight * k);
|
|
rc.restore();
|
|
const pixels = rc.getImageData(0, 0, width, height).data;
|
|
let mask = new Float32Array(width * height);
|
|
for (let i = 0; i < mask.length; i++) mask[i] = pixels[i * 4] / 255;
|
|
mask = featherGeneratedMask(mask, width, height, feather * k);
|
|
mask = stitchBlendFromMask(mask, width, height, blend * plan.unit, grow * plan.unit);
|
|
const overlay = document.createElement("canvas"); overlay.width = width; overlay.height = height;
|
|
const oc = overlay.getContext("2d"); const image = oc.createImageData(width, height); const data = image.data;
|
|
for (let i = 0; i < mask.length; i++) { data[i * 4] = 0; data[i * 4 + 1] = 184; data[i * 4 + 2] = 174; data[i * 4 + 3] = Math.round(mask[i] * 150); }
|
|
oc.putImageData(image, 0, 0);
|
|
state.blendOverlay = { key, canvas: overlay, mask, width, height };
|
|
return overlay;
|
|
}
|
|
|
|
function drawBlendOverlay(context, state, render) {
|
|
const overlay = blendOverlayCanvas(state, render);
|
|
const { outputRect } = render;
|
|
context.save(); context.imageSmoothingEnabled = true;
|
|
context.drawImage(overlay, outputRect.x, outputRect.y, outputRect.width, outputRect.height);
|
|
context.restore();
|
|
}
|
|
|
|
// Section headers carry a small marker matching the on-canvas handle for
|
|
// that group (cyan square = crop, green knob = rotate, orange diamond =
|
|
// padding), teaching the editor's color language without a word of text.
|
|
function legendMarker(kind) {
|
|
if (kind === "rotate") {
|
|
const canvas = document.createElement("canvas");
|
|
canvas.width = canvas.height = 32; // drawn 2x, displayed at 16px for crispness
|
|
canvas.className = "ausboss-legend";
|
|
const context = canvas.getContext("2d");
|
|
context.fillStyle = "#73e36a";
|
|
context.beginPath(); context.arc(16, 16, 15, 0, Math.PI * 2); context.fill();
|
|
drawRotateGlyph(context, 16, 16, 7, "#0c2210");
|
|
return canvas;
|
|
}
|
|
return createElement("span", `ausboss-legend ausboss-legend-${kind}`);
|
|
}
|
|
|
|
function sectionHeading(title, markerKind = null) {
|
|
const heading = createElement("h3");
|
|
if (markerKind) heading.append(legendMarker(markerKind));
|
|
heading.append(createElement("span", "", title));
|
|
return heading;
|
|
}
|
|
|
|
function buildControls(state, sidebar) {
|
|
const node = state.node;
|
|
const cropSection = createElement("section", "ausboss-transform-section"); cropSection.append(sectionHeading("Crop", "crop"));
|
|
const ratio = createElement("select");
|
|
// Options come from the widget the backend registered, so custom presets
|
|
// from ausboss_presets.json appear here automatically.
|
|
const ratioWidget = widget(node, "crop_aspect_ratio");
|
|
let ratioValues = ratioWidget?.options?.values;
|
|
if (typeof ratioValues === "function") ratioValues = ratioValues(ratioWidget, node);
|
|
if (!Array.isArray(ratioValues) || !ratioValues.length) ratioValues = ["free", "source", "1:1", "9:16", "16:9", "2:3", "3:2", "3:4", "4:3", "9:21", "21:9"];
|
|
// The target is a UI preference, separate from the inner crop lock.
|
|
// Pad to aspect deliberately unlocks that inner crop to keep all pixels.
|
|
const currentRatio = String(node.properties?.ausboss_fit_aspect ?? value(node, "crop_aspect_ratio", "free"));
|
|
if (!ratioValues.includes(currentRatio)) ratioValues = [...ratioValues, currentRatio];
|
|
for (const optionValue of ratioValues) {
|
|
const option = createElement("option", "", optionValue); option.value = optionValue; ratio.append(option);
|
|
}
|
|
ratio.value = currentRatio;
|
|
ratio.setAttribute("aria-label", "Target aspect");
|
|
ratio.title = "Choose a target, then Crop or Pad. Changing the target alone does not alter your framing.";
|
|
ratio.addEventListener("change", () => {
|
|
node.properties ??= {}; node.properties.ausboss_fit_aspect = ratio.value;
|
|
if (node.properties.ausboss_aspect_lock) {
|
|
if (aspectMode(state) === "crop") {
|
|
setValue(node, "crop_aspect_ratio", ratio.value);
|
|
if (ratio.value === "free") node.properties.ausboss_aspect_lock = false;
|
|
} else if (ratio.value === "free") node.properties.ausboss_aspect_lock = false;
|
|
else applyAspectLock(state, "x");
|
|
}
|
|
draw(state); updateModalInfo(state);
|
|
notifyAusbossChange();
|
|
});
|
|
addLabeledControl(cropSection, "Target aspect", ratio);
|
|
const lock = createElement("input"); lock.type = "checkbox";
|
|
lock.title = "Crop mode locks the crop rectangle without padding. Pad mode adjusts padding to keep the output ratio.";
|
|
lock.addEventListener("change", () => {
|
|
if (lock.checked && ratio.value === "free") { lock.checked = false; return; }
|
|
node.properties ??= {};
|
|
if (lock.checked) node.properties.ausboss_fit_aspect = ratio.value;
|
|
setAspectLock(state, lock.checked);
|
|
});
|
|
addLabeledControl(cropSection, "Lock aspect", lock);
|
|
const fitRow = createElement("div", "ausboss-transform-row");
|
|
for (const [mode, title, tip] of [
|
|
["crop", "Crop to aspect", "Center the largest crop inside the rotated source. Removes pixels and resets padding."],
|
|
["pad", "Pad to aspect", "Keep the full rotated source. Add centered fill-color bands to reach the target aspect; no stretching or cropping."],
|
|
]) {
|
|
const button = createElement("button", "", title); button.title = tip;
|
|
button.addEventListener("click", () => fitAspect(state, ratio.value, mode)); fitRow.append(button);
|
|
}
|
|
cropSection.append(fitRow, createElement("div", "ausboss-transform-help", "Crop trims. Pad keeps the whole source. Both replace the current crop and padding; rotation stays. Free restores the full source."));
|
|
|
|
const rotateSection = createElement("section", "ausboss-transform-section"); rotateSection.append(sectionHeading("Rotate", "rotate"));
|
|
const rotation = createElement("input"); rotation.type = "range"; rotation.min = "-180"; rotation.max = "180"; rotation.step = "0.1"; rotation.value = value(node, "rotation_degrees", 0);
|
|
const rotationNumber = makeScrubInput({ value: Number(rotation.value), min: -180, max: 180, step: 1, fineStep: 0.1, decimals: 1,
|
|
title: "Rotation in degrees. Shift scrubs in tenths. The crop stays over the same part of the picture.",
|
|
onChange: (degrees) => setRotation(state, degrees), onSettle: () => { settleRotation(state); notifyAusbossChange(); } });
|
|
rotation.addEventListener("input", () => setRotation(state, Number(rotation.value)));
|
|
rotation.addEventListener("change", () => { settleRotation(state); notifyAusbossChange(); });
|
|
addLabeledControl(rotateSection, "Degrees", rotation, ""); rotateSection.append(rotationNumber.root);
|
|
const zeroRotation = createElement("button", "", "Reset rotation");
|
|
zeroRotation.addEventListener("click", () => { setRotation(state, 0); settleRotation(state); notifyAusbossChange(); });
|
|
rotateSection.append(zeroRotation);
|
|
|
|
const padSection = createElement("section", "ausboss-transform-section"); padSection.append(sectionHeading("Padding & mask", "pad"));
|
|
const color = createElement("input"); color.type = "color"; color.value = normalizeColor(value(node, "fill_color", "#808080")); color.addEventListener("input", () => { setValue(node, "fill_color", color.value); draw(state); });
|
|
addLabeledControl(padSection, "Fill", color);
|
|
// Feather: slider for coarse sweeps plus a number box (with up/down
|
|
// arrows) for granular single-pixel control.
|
|
const feather = createElement("input"); feather.type = "range"; feather.min = "0"; feather.max = "512"; feather.step = "1"; feather.value = value(node, "feather", 24);
|
|
const applyFeather = (raw) => {
|
|
const amount = Math.max(0, Math.min(4096, Math.round(Number(raw) || 0)));
|
|
setValue(node, "feather", amount); draw(state);
|
|
};
|
|
const featherNumber = makeScrubInput({ value: Number(feather.value), min: 0, max: 4096, step: 1, decimals: 0,
|
|
title: "Mask feather in pixels.", onChange: applyFeather, onSettle: notifyAusbossChange });
|
|
feather.addEventListener("input", () => applyFeather(feather.value));
|
|
const featherLabel = addLabeledControl(padSection, "Feather", feather); featherLabel.lastElementChild.replaceWith(featherNumber.root);
|
|
const multiple = makeScrubInput({ value: value(node, "canvas_multiple", 1), min: 1, max: 4096, step: 1, decimals: 0,
|
|
title: "Round the outer canvas up to a pixel multiple. This can slightly change the fitted aspect.",
|
|
onChange: (amount) => { setValue(node, "canvas_multiple", amount); draw(state); }, onSettle: notifyAusbossChange });
|
|
addLabeledControl(padSection, "Multiple", multiple.root, "px");
|
|
const resetPad = createElement("button", "", "Reset padding"); resetPad.title = "Remove all padding; a locked format is released.";
|
|
resetPad.addEventListener("click", () => { for (const name of ["pad_left", "pad_top", "pad_right", "pad_bottom"]) setValue(node, name, 0); if (node.properties) node.properties.ausboss_aspect_lock = false; draw(state); updateModalInfo(state); notifyAusbossChange(); }); padSection.append(resetPad);
|
|
|
|
// Resize to a pixel budget (image and clip nodes): mirrors the core Scale
|
|
// Image to Total Pixels trio - megapixels, method, resolution steps -
|
|
// so the output lands render-ready without another node.
|
|
let resizeSection = null;
|
|
if (widget(node, "resize_to_megapixels")) {
|
|
resizeSection = createElement("section", "ausboss-transform-section");
|
|
resizeSection.append(sectionHeading("Resize output"));
|
|
const enable = createElement("input"); enable.type = "checkbox";
|
|
enable.checked = Boolean(value(node, "resize_to_megapixels", false));
|
|
const applyResize = () => {
|
|
setValue(node, "resize_to_megapixels", enable.checked);
|
|
draw(state);
|
|
updateModalInfo(state);
|
|
};
|
|
enable.addEventListener("change", applyResize);
|
|
addLabeledControl(resizeSection, "Resize", enable);
|
|
const budget = makeScrubInput({
|
|
value: value(node, "megapixels", 1),
|
|
min: 0.01, max: 16, step: 0.05, fineStep: 0.01, decimals: 2,
|
|
title: "Output budget in megapixels (x 1024x1024).",
|
|
onChange: (amount) => {
|
|
setValue(node, "megapixels", amount);
|
|
draw(state);
|
|
updateModalInfo(state);
|
|
},
|
|
});
|
|
addLabeledControl(resizeSection, "Megapixels", budget.root, "MP");
|
|
const method = createElement("select");
|
|
for (const name of RESIZE_METHODS) {
|
|
const option = createElement("option", "", name); option.value = name; method.append(option);
|
|
}
|
|
method.value = String(value(node, "resize_method", "lanczos"));
|
|
if (!RESIZE_METHODS.includes(method.value)) method.value = "lanczos";
|
|
method.addEventListener("change", () => { setValue(node, "resize_method", method.value); });
|
|
addLabeledControl(resizeSection, "Method", method);
|
|
const steps = makeScrubInput({
|
|
value: value(node, "resolution_steps", 1),
|
|
min: 1, max: 256, step: 1, decimals: 0,
|
|
title: "Rounds each resized dimension to a multiple of this.",
|
|
onChange: (step) => {
|
|
setValue(node, "resolution_steps", step);
|
|
draw(state);
|
|
updateModalInfo(state);
|
|
},
|
|
});
|
|
addLabeledControl(resizeSection, "Steps", steps.root, "px");
|
|
}
|
|
|
|
const actions = createElement("section", "ausboss-transform-section"); actions.append(sectionHeading("View & reset"));
|
|
const resetViewButton = createElement("button", "", "Reset view"); resetViewButton.addEventListener("click", () => { resetView(state); draw(state); });
|
|
const resetAll = createElement("button", "ausboss-transform-danger", "Reset transform");
|
|
resetAll.title = "Reset rotation, crop, padding, fill, feather and Align. Keep the source, current frame, trim window, fixed length, resize and stitch settings.";
|
|
resetAll.addEventListener("click", () => { resetTransform(node); resetView(state); draw(state); updateModalInfo(state); });
|
|
actions.append(resetViewButton, resetAll);
|
|
|
|
// Live preview of the actual output composite (no overlays), so the final
|
|
// result is always visible while adjusting handles.
|
|
const previewSection = createElement("section", "ausboss-transform-section");
|
|
previewSection.append(sectionHeading("Preview"));
|
|
const finalPreview = createElement("canvas", "ausboss-final-preview");
|
|
previewSection.append(finalPreview);
|
|
state.finalPreviewCanvas = finalPreview;
|
|
|
|
sidebar.append(cropSection, rotateSection, padSection);
|
|
if (resizeSection) sidebar.append(resizeSection);
|
|
sidebar.append(actions, previewSection);
|
|
state.syncEditorControls = () => {
|
|
rotation.value = value(node, "rotation_degrees", 0); rotationNumber.set(Number(rotation.value));
|
|
feather.value = Math.min(512, value(node, "feather", 24)); featherNumber.set(value(node, "feather", 24));
|
|
multiple.set(value(node, "canvas_multiple", 1)); color.value = normalizeColor(value(node, "fill_color", "#808080"));
|
|
ratio.value = node.properties?.ausboss_fit_aspect ?? value(node, "crop_aspect_ratio", "free");
|
|
lock.checked = Boolean(node.properties?.ausboss_aspect_lock);
|
|
lock.disabled = ratio.value === "free";
|
|
};
|
|
}
|
|
|
|
// Renders what the node will actually output: fill background, the rotated
|
|
// source clipped to the crop, placed inside the padded canvas. No handles,
|
|
// no dashes - the composite itself.
|
|
function drawFinalPreview(state) {
|
|
const canvas = state.finalPreviewCanvas;
|
|
if (!canvas || !state.image || !state.sourceWidth || !state.sourceHeight) return;
|
|
const current = values(state.node);
|
|
const source = rotatedSize(state.sourceWidth, state.sourceHeight, current.rotation_degrees);
|
|
const crop = resolveCrop(current, source);
|
|
const padding = resolvePadding(current, crop);
|
|
const scale = Math.min(226 / padding.outputWidth, 260 / padding.outputHeight);
|
|
const width = Math.max(1, Math.round(padding.outputWidth * scale));
|
|
const height = Math.max(1, Math.round(padding.outputHeight * scale));
|
|
const dpr = window.devicePixelRatio || 1;
|
|
canvas.style.width = `${width}px`; canvas.style.height = `${height}px`;
|
|
const pixelWidth = Math.round(width * dpr); const pixelHeight = Math.round(height * dpr);
|
|
if (canvas.width !== pixelWidth || canvas.height !== pixelHeight) { canvas.width = pixelWidth; canvas.height = pixelHeight; }
|
|
const context = canvas.getContext("2d");
|
|
context.setTransform(dpr, 0, 0, dpr, 0, 0);
|
|
context.fillStyle = normalizeColor(current.fill_color);
|
|
context.fillRect(0, 0, width, height);
|
|
context.save();
|
|
context.beginPath();
|
|
context.rect(padding.left * scale, padding.top * scale, crop.width * scale, crop.height * scale);
|
|
context.clip();
|
|
context.translate(
|
|
(padding.left - crop.x) * scale + source.width * scale / 2,
|
|
(padding.top - crop.y) * scale + source.height * scale / 2
|
|
);
|
|
context.rotate((Number(current.rotation_degrees) || 0) * Math.PI / 180);
|
|
drawSourceImage(context, state, scale);
|
|
context.restore();
|
|
}
|
|
|
|
function buildTimeline(state) {
|
|
const timeline = createElement("div", "ausboss-transform-timeline");
|
|
const transport = createElement("div", "ausboss-transform-transport");
|
|
const label = createElement("span", "ausboss-transform-badge", "0 / 0");
|
|
label.title = "Playhead frame / last frame";
|
|
const steps = createElement("div", "ausboss-transform-steps");
|
|
const commands = [["|<", "first"], ["-100", -100], ["-50", -50], ["-25", -25], ["-1", -1], ["Play", "play"], ["+1", 1], ["+25", 25], ["+50", 50], ["+100", 100], [">|", "last"]];
|
|
for (const [text, command] of commands) {
|
|
const button = createElement("button", "", text); if (command === "play") state.playButton = button;
|
|
button.title = command === "play" ? "Play / pause (Space)" : typeof command === "number" ? `Step ${command > 0 ? "+" : ""}${command} frames (Arrow keys step 1, Shift 10)` : command === "first" ? "First frame (Home)" : "Last frame (End)";
|
|
button.addEventListener("click", () => timelineCommand(state, command)); steps.append(button);
|
|
}
|
|
transport.append(label, steps);
|
|
if (state.isClip) {
|
|
const marks = createElement("div", "ausboss-transform-steps");
|
|
for (const [text, command, tip] of [["Set IN", "setIn", "Put IN at the playhead (I)"], ["Set OUT", "setOut", "Put OUT at the playhead (O)"]]) {
|
|
const button = createElement("button", "", text); button.title = tip;
|
|
button.addEventListener("click", () => timelineCommand(state, command)); marks.append(button);
|
|
}
|
|
transport.append(marks);
|
|
}
|
|
timeline.append(transport, buildTrim(state));
|
|
state.timelineLabel = label;
|
|
state.modalTrim = [...state.trimViews].at(-1);
|
|
syncTimelineRange(state);
|
|
return timeline;
|
|
}
|
|
|
|
// One timeline component on every surface (node face, editor): the clip
|
|
// node's with IN/OUT handles, the frame picker's with the playhead alone.
|
|
function buildTrim(state) {
|
|
const control = mountTransformTrim({
|
|
get: (name, fallback) => value(state.node, name, fallback),
|
|
set: (name, next) => {
|
|
setValue(state.node, name, next);
|
|
for (const view of state.trimViews) if (view !== control) view.sync();
|
|
},
|
|
has: (name) => Boolean(widget(state.node, name)),
|
|
driven: (name) => trimInputDriven(state.node, name),
|
|
number: (name, fallback) => inputNumber(state.node, name, value(state.node, name, fallback)),
|
|
outputRate: () => clipOutputRate(state.node, state.metadata?.fps, value(state.node, "every_nth", 1)),
|
|
metadata: () => state.metadata,
|
|
trim: state.isClip,
|
|
onSeek: (frame, settled) => scrubTo(state, frame, settled),
|
|
onCommit: notifyAusbossChange,
|
|
});
|
|
state.trimViews.add(control);
|
|
return control.root;
|
|
}
|
|
|
|
function setPlayhead(state, index) {
|
|
const info = clipInfo(state.metadata);
|
|
const frame = clampFrame(index, info);
|
|
setValue(state.node, "seek_mode", "frame index");
|
|
setValue(state.node, "frame_index", frame);
|
|
setValue(state.node, "frame_time", frameTime(frame, info));
|
|
return frame;
|
|
}
|
|
|
|
// The playhead moved. While a gesture is live the pump fetches a reduced
|
|
// frame (one request in flight, the latest position wins) and a storyboard
|
|
// tile stands in when it is nearer; on release, one full-size fetch that
|
|
// also snaps the widgets to the decoded frame.
|
|
function scrubTo(state, index, settled) {
|
|
const frame = setPlayhead(state, index);
|
|
syncTimelineRange(state);
|
|
if (settled) { void seekFrame(state); return; }
|
|
showScrubGhost(state, frame);
|
|
requestScrubFrame(state);
|
|
}
|
|
|
|
// Light variant for continuous motion (playback, held arrow keys): reduced
|
|
// preview size, widgets still snapped since only the caller writes position.
|
|
async function seekFrameLight(state) {
|
|
try {
|
|
await loadVideoFrame(state, ++state.loadSerial, { maxSize: SCRUB_PREVIEW_SIZE });
|
|
draw(state); updateModalInfo(state);
|
|
} catch (error) {
|
|
if (error?.name === "AbortError") return;
|
|
drawEmpty(state, error.message);
|
|
}
|
|
}
|
|
|
|
async function timelineCommand(state, command, light = false) {
|
|
if (command === "play") { state.playing ? stopPlayback(state) : startPlayback(state); return; }
|
|
const info = clipInfo(state.metadata);
|
|
if (!info.count) return;
|
|
const current = clampFrame(value(state.node, "frame_index", 0), info);
|
|
if (command === "setIn" || command === "setOut") {
|
|
if (!state.isClip) return;
|
|
// The rail knows which way the length is set (OUT, a Length, a
|
|
// connected input) and what that edge may do.
|
|
const trim = [...state.trimViews][0];
|
|
if (!trim) return;
|
|
const edge = command === "setIn" ? "start" : "end";
|
|
const window = trim.window();
|
|
// In free trim a mark past the other edge takes that edge along.
|
|
if (trim.plan()?.mode === "free") {
|
|
if (edge === "start" && current > window.last) trim.moveEdge("end", current, false);
|
|
if (edge === "end" && current < window.first) trim.moveEdge("start", current, false);
|
|
}
|
|
trim.moveEdge(edge, current, true);
|
|
syncTimelineRange(state);
|
|
return;
|
|
}
|
|
let next = current;
|
|
if (command === "first") next = 0; else if (command === "last") next = info.count - 1; else next += Number(command);
|
|
setPlayhead(state, next);
|
|
syncTimelineRange(state);
|
|
await (light ? seekFrameLight(state) : seekFrame(state));
|
|
}
|
|
|
|
// Playback correctness note: each tick awaits a frame fetch, and a Pause
|
|
// press usually lands during that await. The tick must therefore re-check
|
|
// after the await — against a session counter, not just a boolean — so a
|
|
// paused (or paused-then-restarted) loop's in-flight tick dies instead of
|
|
// re-scheduling itself as a zombie that can no longer be stopped.
|
|
function startPlayback(state) {
|
|
state.playButton.textContent = "Pause";
|
|
state.playing = true;
|
|
const session = (state.playbackSession = (state.playbackSession || 0) + 1);
|
|
const delay = Math.max(20, Math.round(1000 / Math.max(1, state.metadata?.fps || 30)));
|
|
const tick = async () => {
|
|
if (!state.playing || state.playbackSession !== session) return;
|
|
const before = Number(value(state.node, "frame_index", 0));
|
|
await timelineCommand(state, 1, true);
|
|
if (!state.playing || state.playbackSession !== session) return;
|
|
if (Number(value(state.node, "frame_index", 0)) === before) { stopPlayback(state); return; }
|
|
state.playbackTimer = window.setTimeout(tick, delay);
|
|
};
|
|
state.playbackTimer = window.setTimeout(tick, delay);
|
|
}
|
|
function stopPlayback(state) {
|
|
const wasPlaying = Boolean(state.playing);
|
|
state.playing = false;
|
|
state.playbackSession = (state.playbackSession || 0) + 1; // orphan in-flight ticks
|
|
if (state.playbackTimer) clearTimeout(state.playbackTimer);
|
|
state.playbackTimer = null;
|
|
if (state.playButton) state.playButton.textContent = "Play";
|
|
// Land on a full-resolution frame after light playback previews.
|
|
if (wasPlaying) void seekFrame(state);
|
|
}
|
|
|
|
function keyDown(state, event) {
|
|
if (!state.modal || ["INPUT", "SELECT", "TEXTAREA"].includes(event.target?.tagName)) return;
|
|
if (state.discardPending) return;
|
|
if (event.key === "Escape") { void cancelEditor(state); return; }
|
|
if (state.kind === "video" && event.code === "Space") { event.preventDefault(); timelineCommand(state, "play"); }
|
|
if (state.kind === "video" && (event.key === "ArrowLeft" || event.key === "ArrowRight")) {
|
|
// Light fetches while the key repeats; keyup lands a full-size frame.
|
|
event.preventDefault(); timelineCommand(state, (event.shiftKey ? 10 : 1) * (event.key === "ArrowLeft" ? -1 : 1), true);
|
|
}
|
|
if (state.kind === "video" && (event.key === "Home" || event.key === "End")) {
|
|
event.preventDefault(); timelineCommand(state, event.key === "Home" ? "first" : "last");
|
|
}
|
|
if (state.isClip && (event.key === "i" || event.key === "I" || event.key === "o" || event.key === "O") && !event.ctrlKey && !event.metaKey && !event.altKey) {
|
|
event.preventDefault(); timelineCommand(state, event.key.toLowerCase() === "i" ? "setIn" : "setOut");
|
|
}
|
|
}
|
|
|
|
function keyUp(state, event) {
|
|
if (!state.modal || state.kind !== "video") return;
|
|
if (event.key === "ArrowLeft" || event.key === "ArrowRight") void seekFrame(state);
|
|
}
|
|
|
|
function fitCrop(state) {
|
|
setValue(state.node, "crop_x", 0); setValue(state.node, "crop_y", 0); setValue(state.node, "crop_width", 0); setValue(state.node, "crop_height", 0); draw(state);
|
|
}
|
|
function fitAspect(state, aspect, mode) {
|
|
if (!state.image || !state.sourceWidth || !state.sourceHeight) return;
|
|
const source = rotatedSize(state.sourceWidth, state.sourceHeight, value(state.node, "rotation_degrees", 0));
|
|
for (const [name, next] of Object.entries(fitSourceToAspect(source, aspect, mode))) setValue(state.node, name, next);
|
|
state.node.properties ??= {}; state.node.properties.ausboss_fit_aspect = aspect;
|
|
state.node.properties.ausboss_aspect_mode = mode;
|
|
state.node.properties.ausboss_aspect_lock = mode === "crop" && aspect !== "free";
|
|
if (aspect === "free") state.node.properties.ausboss_aspect_lock = false;
|
|
resetView(state); draw(state); updateModalInfo(state); notifyAusbossChange();
|
|
}
|
|
// Every rotation control (slider, number box, Reset rotation, the knob)
|
|
// comes through rotateTo, so they all keep the crop the same way
|
|
// (cropForRotation). The crop is carried from where the gesture began, not
|
|
// step by step: a sweep out and back returns the same crop, and a crop
|
|
// squeezed at a canvas edge mid-sweep grows back. The start is re-taken
|
|
// whenever anything but rotateTo changed the geometry since its last write.
|
|
const ROTATION_KEYS = [
|
|
"rotation_degrees", "crop_aspect_ratio", "crop_x", "crop_y", "crop_width", "crop_height",
|
|
"pad_left", "pad_top", "pad_right", "pad_bottom",
|
|
];
|
|
function rotationBase(state) {
|
|
const now = values(state.node);
|
|
const base = state.rotationBase;
|
|
if (base?.written && ROTATION_KEYS.every((name) => now[name] === base.written[name])) return base;
|
|
state.rotationBase = { rotation: Number(now.rotation_degrees) || 0, values: now, written: null };
|
|
return state.rotationBase;
|
|
}
|
|
function settleRotation(state) { state.rotationBase = null; }
|
|
function rotateTo(state, degrees) {
|
|
const base = rotationBase(state);
|
|
const next = Math.round(clamp(degrees, -180, 180) * 10) / 10;
|
|
setValue(state.node, "rotation_degrees", next);
|
|
if (state.sourceWidth && state.sourceHeight) {
|
|
const crop = cropForRotation(base.values, state.sourceWidth, state.sourceHeight, base.rotation, next);
|
|
for (const [name, amount] of Object.entries(crop)) setValue(state.node, name, amount);
|
|
// The lock re-solves padding from the gesture's starting pads.
|
|
for (const name of ["pad_left", "pad_top", "pad_right", "pad_bottom"]) setValue(state.node, name, base.values[name]);
|
|
}
|
|
applyAspectLock(state, "x");
|
|
base.written = values(state.node);
|
|
}
|
|
function setRotation(state, degrees) {
|
|
rotateTo(state, degrees); draw(state); updateModalInfo(state);
|
|
}
|
|
function resetView(state) { state.view = { zoom: 1, panX: 0, panY: 0 }; }
|
|
|
|
// Resolve CSS color names with the browser's own parser. An invalid
|
|
// assignment leaves fillStyle unchanged, so probing twice from different
|
|
// starting values separates "parsed" from "ignored".
|
|
let colorProbeContext = null;
|
|
function resolveCssColorName(name) {
|
|
try {
|
|
colorProbeContext ??= document.createElement("canvas").getContext("2d");
|
|
const context = colorProbeContext;
|
|
context.fillStyle = "#000000"; context.fillStyle = name;
|
|
const first = String(context.fillStyle);
|
|
context.fillStyle = "#ffffff"; context.fillStyle = name;
|
|
return first === String(context.fillStyle) && /^#[0-9a-f]{6}$/i.test(first) ? first : null;
|
|
} catch { return null; }
|
|
}
|
|
function normalizeColor(value) { return normalizeFillColor(value, resolveCssColorName); }
|
|
|
|
// The panel never zooms or pans: fit-only, so it cannot fight graph zoom.
|
|
const PANEL_VIEW = Object.freeze({ zoom: 1, panX: 0, panY: 0 });
|
|
|
|
// Geometry (source, crop, padding) is always read live from the widgets;
|
|
// the screen mapping is either fitted fresh or, mid-drag, the frozen map
|
|
// captured at pointerdown — a live refit would change the scale under the
|
|
// pointer and make the grabbed handle slip.
|
|
function renderGeometry(state, width, height, view, map = null) {
|
|
const source = rotatedSize(state.sourceWidth, state.sourceHeight, value(state.node, "rotation_degrees", 0));
|
|
const crop = resolveCrop(values(state.node), source); const padding = resolvePadding(values(state.node), crop);
|
|
const layout = map?.layout ?? stageHandleLayout(width, height);
|
|
let scale, originX, originY;
|
|
if (map) {
|
|
({ scale, originX, originY } = map);
|
|
} else {
|
|
const margin = layout.margin; const union = { x: Math.min(0, crop.x - padding.left), y: Math.min(0, crop.y - padding.top) };
|
|
union.width = Math.max(source.width, crop.x - padding.left + padding.outputWidth) - union.x;
|
|
union.height = Math.max(source.height, crop.y - padding.top + padding.outputHeight) - union.y;
|
|
const fit = Math.max(0.01, Math.min((width - margin * 2) / union.width, (height - margin * 2) / union.height));
|
|
scale = fit * view.zoom;
|
|
originX = (width - union.width * fit) / 2 - union.x * fit + view.panX;
|
|
originY = (height - union.height * fit) / 2 - union.y * fit + view.panY;
|
|
}
|
|
const rect = (x, y, w, h) => ({ x: originX + x * scale, y: originY + y * scale, width: w * scale, height: h * scale });
|
|
const sourceRect = rect(0, 0, source.width, source.height);
|
|
const cropRect = rect(crop.x, crop.y, crop.width, crop.height);
|
|
const outputRect = rect(crop.x - padding.left, crop.y - padding.top, padding.outputWidth, padding.outputHeight);
|
|
return { source, crop, padding, scale, originX, originY, layout, sourceRect, cropRect, outputRect };
|
|
}
|
|
|
|
// The node preview sits in a DOM widget the graph scales with its zoom, so
|
|
// its backing store is sized for the zoom in play (capped) - the same
|
|
// sharpness core's canvas-drawn image previews get for free.
|
|
const PREVIEW_MAX_OVERSAMPLE = 4;
|
|
function panelOversample() {
|
|
const zoom = Number(app.canvas?.ds?.scale) || 1;
|
|
return clamp(zoom, 1, PREVIEW_MAX_OVERSAMPLE);
|
|
}
|
|
|
|
function prepareCanvas(canvas, oversample = 1) {
|
|
const width = Math.max(1, canvas.clientWidth || 1); const height = Math.max(1, canvas.clientHeight || 1); const dpr = (window.devicePixelRatio || 1) * oversample;
|
|
const pixelWidth = Math.round(width * dpr); const pixelHeight = Math.round(height * dpr);
|
|
if (canvas.width !== pixelWidth || canvas.height !== pixelHeight) { canvas.width = pixelWidth; canvas.height = pixelHeight; }
|
|
const context = canvas.getContext("2d"); context.setTransform(dpr, 0, 0, dpr, 0, 0); context.clearRect(0, 0, width, height); return { context, width, height };
|
|
}
|
|
|
|
function draw(state) {
|
|
syncReadout(state);
|
|
state.syncCanvasRow?.();
|
|
state.syncAspectChips?.();
|
|
state.syncAspectMode?.();
|
|
state.syncEditorControls?.();
|
|
state.syncStitchControls?.();
|
|
for (const canvas of [state.canvas, state.previewCanvas]) {
|
|
if (!canvas) continue;
|
|
const compact = canvas === state.previewCanvas;
|
|
if (compact) state.panelOversample = panelOversample();
|
|
const { context, width, height } = prepareCanvas(canvas, compact ? state.panelOversample : 1);
|
|
if (!state.image || !state.sourceWidth || !state.sourceHeight) {
|
|
if (compact) state.panelRender = null; else state.render = null;
|
|
drawEmptyCanvas(context, width, height, "Choose a source to begin"); continue;
|
|
}
|
|
const frozen = state.drag?.canvas === canvas ? state.drag.map : null;
|
|
const render = renderGeometry(state, width, height, compact ? PANEL_VIEW : state.view, frozen);
|
|
if (compact) state.panelRender = render; else state.render = render;
|
|
drawScene(context, state, render, compact, !compact || Boolean(state.panelInteractive));
|
|
}
|
|
drawFinalPreview(state);
|
|
keepStageRoom(state);
|
|
}
|
|
|
|
// The picture is what the node face is for, so the stage never gets shorter
|
|
// than stageHeightForWidth for its width: the panel's floor is the rows
|
|
// around the stage plus that, and a corner drag stops there. The rows are
|
|
// measured on every draw; before the panel is on screen, these stand in:
|
|
// the rows of a node with no file picked yet, as the examples open (the
|
|
// canvas row's Resize adds the budget row under it).
|
|
const PANEL_CHROME_ESTIMATE = { image: 262, video: 365, clip: 451 };
|
|
const RESIZE_ROW = 30;
|
|
// Node width minus stage width: the DOM widget frame, panel padding, borders.
|
|
const PANEL_SIDE_INSET = 38;
|
|
// The narrowest face the chip row and the button rows fit on.
|
|
export const TRANSFORM_MIN_WIDTH = 330;
|
|
|
|
function stageWidth(state) {
|
|
return state.previewCanvas?.clientWidth || Math.max(0, (Number(state.node.size?.[0]) || TRANSFORM_MIN_WIDTH) - PANEL_SIDE_INSET);
|
|
}
|
|
|
|
// Everything in the panel but the stage: rows, the gaps between the shown
|
|
// ones, and the panel's own padding. Null while the panel is not laid out.
|
|
function measureChrome(state) {
|
|
const stage = state.previewCanvas;
|
|
const panel = stage?.parentElement;
|
|
if (!panel?.isConnected || !panel.offsetHeight) return state.chromeHeight ?? null;
|
|
const style = getComputedStyle(panel);
|
|
const gap = parseFloat(style.rowGap) || 0;
|
|
let height = (parseFloat(style.paddingTop) || 0) + (parseFloat(style.paddingBottom) || 0);
|
|
let shown = 0;
|
|
for (const child of panel.children) {
|
|
if (getComputedStyle(child).display === "none") continue;
|
|
shown += 1;
|
|
if (child !== stage) height += child.offsetHeight;
|
|
}
|
|
state.chromeHeight = Math.round(height + Math.max(0, shown - 1) * gap);
|
|
return state.chromeHeight;
|
|
}
|
|
|
|
// The panel's minimum height: its rows, the stage floor with the stage's
|
|
// border, and the frame the frontend insets a DOM widget by.
|
|
export function transformPanelFloor(node) {
|
|
const state = node?.__ausbossTransformState;
|
|
if (!state) return 0;
|
|
const estimate = PANEL_CHROME_ESTIMATE[state.isClip ? "clip" : state.kind] + (value(node, "resize_to_megapixels", false) ? RESIZE_ROW : 0);
|
|
return (state.chromeHeight ?? estimate) + stageHeightForWidth(stageWidth(state)) + 2 + WIDGET_FRAME;
|
|
}
|
|
|
|
// A row that appears later (Resize on, a readout that wraps) would squeeze
|
|
// the stage under its floor: the node grows by the difference instead, so
|
|
// it costs node height, not picture. Never shrinks a node.
|
|
function keepStageRoom(state) {
|
|
const height = state.previewCanvas?.clientHeight ?? 0;
|
|
const node = state.node;
|
|
if (state.disposed || !height || !node.size) return;
|
|
// Nodes 2.0 has no layout floor for width: lend it the face's own, or a
|
|
// corner drag squeezes the chips and buttons down to 225px.
|
|
holdVueNodeMinWidth(state.previewCanvas.parentElement, TRANSFORM_MIN_WIDTH);
|
|
measureChrome(state);
|
|
const floor = stageHeightForWidth(stageWidth(state));
|
|
// Nodes 2.0 sizes a node from its content, so the floor also has to be
|
|
// the stage's own minimum there; in the classic view the layout floor
|
|
// already keeps the panel this tall.
|
|
const minimum = `${floor}px`;
|
|
if (state.previewCanvas.style.minHeight !== minimum) state.previewCanvas.style.minHeight = minimum;
|
|
if (height >= floor - 1) { state.stageGrowth = null; return; }
|
|
// The DOM follows a new node size a frame later, so a second draw before
|
|
// then reads the same short stage: wait for it instead of growing twice.
|
|
const pending = state.stageGrowth;
|
|
if (pending && pending.height === height && node.size[1] >= pending.target) return;
|
|
const target = node.size[1] + (floor - height);
|
|
state.stageGrowth = { height, target };
|
|
node.setSize?.([node.size[0], target]);
|
|
node.setDirtyCanvas?.(true, true);
|
|
}
|
|
|
|
function drawScene(context, state, render, compact, interactive) {
|
|
const { sourceRect, cropRect, outputRect } = render; context.save();
|
|
context.fillStyle = normalizeColor(value(state.node, "fill_color", "#808080")); context.fillRect(outputRect.x, outputRect.y, outputRect.width, outputRect.height);
|
|
context.save(); context.translate(sourceRect.x + sourceRect.width / 2, sourceRect.y + sourceRect.height / 2); context.rotate((Number(value(state.node, "rotation_degrees", 0)) || 0) * Math.PI / 180);
|
|
drawSourceImage(context, state, render.scale); context.restore();
|
|
context.save(); context.globalCompositeOperation = "source-over"; context.fillStyle = "rgba(8,10,12,.62)";
|
|
const full = { x: 0, y: 0, width: context.canvas.width, height: context.canvas.height }; context.beginPath(); context.rect(full.x, full.y, full.width, full.height); context.rect(cropRect.x, cropRect.y, cropRect.width, cropRect.height); context.fill("evenodd"); context.restore();
|
|
if (!compact && state.showBlend && widget(state.node, "stitch_blend")) drawBlendOverlay(context, state, render);
|
|
context.strokeStyle = "#4bd8ef"; context.lineWidth = compact ? 1 : 2; context.setLineDash([7, 5]); context.strokeRect(cropRect.x, cropRect.y, cropRect.width, cropRect.height);
|
|
context.strokeStyle = "#ff9d42"; context.setLineDash([5, 5]); context.strokeRect(outputRect.x, outputRect.y, outputRect.width, outputRect.height); context.setLineDash([]);
|
|
if (interactive) {
|
|
if (state.grid) drawGrid(context, cropRect);
|
|
drawCropHandles(context, cropRect, state.drag?.kind === "crop" ? state.drag.name : null);
|
|
drawPaddingHandles(context, outputRect, render.layout.padOffset, state.drag?.kind === "padding" ? state.drag.name : null);
|
|
drawRotationHandle(context, state, render, state.drag?.kind === "rotation");
|
|
// The face has its readout line under the stage (syncReadout).
|
|
if (!compact) drawOutputSize(context, state, render);
|
|
}
|
|
context.restore();
|
|
}
|
|
|
|
function resizeRequest(node) {
|
|
return value(node, "resize_to_megapixels", false)
|
|
? { megapixels: value(node, "megapixels", 1), steps: value(node, "resolution_steps", 1) }
|
|
: null;
|
|
}
|
|
|
|
// The size readout, drawn OUTSIDE the image: under the output rect, above
|
|
// it when the bottom would run off the stage, so it never sits on the
|
|
// pixels being judged. It names every step that sets the size - crop,
|
|
// padding, the Align rounding, the resize - wrapping at the arrows on a
|
|
// narrow stage, with the size the run emits last and brightest, and an
|
|
// amber line when the steps stretch the picture or the resize undoes Align.
|
|
const READOUT_LINE = 15;
|
|
function drawOutputSize(context, state, render) {
|
|
const { tokens, warnings } = sizeChainTokens(sizeChain(values(state.node), render.source, resizeRequest(state.node)));
|
|
const { outputRect } = render;
|
|
context.save();
|
|
const viewWidth = context.canvas.clientWidth || context.canvas.width;
|
|
const viewHeight = context.canvas.clientHeight || context.canvas.height;
|
|
const maxWidth = Math.max(80, viewWidth - 24);
|
|
const muted = "11px system-ui";
|
|
const strong = "600 12px system-ui";
|
|
const measure = (font, text) => { context.font = font; return context.measureText(text).width; };
|
|
// Every piece after the first starts with its arrow, also at the start of
|
|
// a wrapped line, so a line's width is the sum of its pieces.
|
|
const arrow = "→ ";
|
|
const pieces = tokens.map((token, index) => {
|
|
const last = index === tokens.length - 1;
|
|
const lead = index ? arrow : "";
|
|
const label = token.label ? `${token.label} ` : "";
|
|
const gap = last ? 0 : measure(muted, " ");
|
|
return { lead, label, text: token.text, last, width: measure(muted, lead + label) + measure(last ? strong : muted, token.text) + gap };
|
|
});
|
|
const lines = [[]];
|
|
let lineWidth = 0;
|
|
for (const piece of pieces) {
|
|
if (lines.at(-1).length && lineWidth + piece.width > maxWidth) { lines.push([]); lineWidth = 0; }
|
|
lines.at(-1).push(piece);
|
|
lineWidth += piece.width;
|
|
}
|
|
const warningText = warnings.length ? `⚠ ${warnings.join(" · ")}` : "";
|
|
const widths = lines.map((line) => line.reduce((sum, piece) => sum + piece.width, 0));
|
|
if (warningText) widths.push(measure(muted, warningText));
|
|
const boxWidth = Math.min(viewWidth - 8, Math.max(...widths) + 12);
|
|
const boxHeight = (lines.length + (warningText ? 1 : 0)) * READOUT_LINE + 5;
|
|
const x = clamp(outputRect.x + outputRect.width / 2 - boxWidth / 2, 4, Math.max(4, viewWidth - boxWidth - 4));
|
|
let top = outputRect.y + outputRect.height + 6;
|
|
if (top + boxHeight > viewHeight - 4) top = outputRect.y - 6 - boxHeight;
|
|
if (top < 4) top = Math.max(4, viewHeight - boxHeight - 4);
|
|
context.fillStyle = "rgba(8,10,12,0.82)";
|
|
context.beginPath(); context.roundRect(x, top, boxWidth, boxHeight, 6); context.fill();
|
|
const write = (font, color, text, cursor, baseline) => {
|
|
context.font = font; context.fillStyle = color; context.fillText(text, cursor, baseline);
|
|
return cursor + context.measureText(text).width;
|
|
};
|
|
lines.forEach((line, row) => {
|
|
const baseline = top + 1 + (row + 1) * READOUT_LINE;
|
|
let cursor = x + 6;
|
|
for (const piece of line) {
|
|
cursor = write(muted, "#7f8b93", piece.lead, cursor, baseline);
|
|
cursor = write(muted, "#8ca8a5", piece.label, cursor, baseline);
|
|
cursor = write(piece.last ? strong : muted, piece.last ? "#ffffff" : "#c9d0d6", piece.text, cursor, baseline);
|
|
cursor += piece.last ? 0 : measure(muted, " ");
|
|
}
|
|
});
|
|
if (warningText) write(muted, "#ffc46b", warningText, x + 6, top + 1 + (lines.length + 1) * READOUT_LINE);
|
|
context.restore();
|
|
}
|
|
|
|
// Draws the current source frame centered on the (already translated and
|
|
// rotated) origin. During a scrub, the nearest storyboard tile stands in for
|
|
// the real frame until its decode lands.
|
|
function drawSourceImage(context, state, scale) {
|
|
const width = state.sourceWidth * scale;
|
|
const height = state.sourceHeight * scale;
|
|
const storyboard = state.storyboard;
|
|
if (state.scrubPreviewTile != null && storyboard) {
|
|
context.drawImage(
|
|
storyboard.image,
|
|
state.scrubPreviewTile * storyboard.tileWidth, 0, storyboard.tileWidth, storyboard.tileHeight,
|
|
-width / 2, -height / 2, width, height
|
|
);
|
|
return;
|
|
}
|
|
context.drawImage(state.image, -width / 2, -height / 2, width, height);
|
|
}
|
|
|
|
function drawGrid(context, rect) {
|
|
context.save(); context.strokeStyle = "rgba(255,255,255,.35)"; context.lineWidth = 1;
|
|
for (const fraction of [1 / 3, 1 / 2, 2 / 3]) {
|
|
context.beginPath(); context.moveTo(rect.x + rect.width * fraction, rect.y); context.lineTo(rect.x + rect.width * fraction, rect.y + rect.height); context.stroke();
|
|
context.beginPath(); context.moveTo(rect.x, rect.y + rect.height * fraction); context.lineTo(rect.x + rect.width, rect.y + rect.height * fraction); context.stroke();
|
|
}
|
|
context.restore();
|
|
}
|
|
function drawCropHandles(context, rect, active) {
|
|
for (const handle of cropHandleCenters(rect)) { context.fillStyle = handle.name === active ? "#fff" : "#4bd8ef"; context.fillRect(handle.x - 6, handle.y - 6, 12, 12); context.strokeStyle = "#08272d"; context.strokeRect(handle.x - 6, handle.y - 6, 12, 12); }
|
|
}
|
|
function drawPaddingHandles(context, rect, offset, active) {
|
|
for (const handle of paddingHandleCenters(rect, offset)) { context.save(); context.translate(handle.x, handle.y); context.rotate(Math.PI / 4); context.fillStyle = handle.name === active ? "#fff" : "#ff9d42"; context.fillRect(-8, -8, 16, 16); context.strokeStyle = "#3b2108"; context.strokeRect(-8, -8, 16, 16); context.restore(); }
|
|
}
|
|
// The knob rides the actual top-right corner of the image being rotated
|
|
// (the rotated quad's corner, not any bounding box), so it stays physically
|
|
// attached and orbits with the image as the angle changes - the same mental
|
|
// model as grabbing an object's corner in a design tool.
|
|
function rotationAnchor(state, render) {
|
|
const angle = (Number(value(state.node, "rotation_degrees", 0)) || 0) * Math.PI / 180;
|
|
const centerX = render.sourceRect.x + render.sourceRect.width / 2;
|
|
const centerY = render.sourceRect.y + render.sourceRect.height / 2;
|
|
const halfWidth = state.sourceWidth * render.scale / 2;
|
|
const halfHeight = state.sourceHeight * render.scale / 2;
|
|
const cos = Math.cos(angle);
|
|
const sin = Math.sin(angle);
|
|
// Unrotated top-right corner (+hw, -hh) rotated about the image center.
|
|
const corner = {
|
|
x: centerX + halfWidth * cos + halfHeight * sin,
|
|
y: centerY + halfWidth * sin - halfHeight * cos,
|
|
};
|
|
const length = Math.hypot(corner.x - centerX, corner.y - centerY) || 1;
|
|
const direction = { x: (corner.x - centerX) / length, y: (corner.y - centerY) / length };
|
|
const arm = render.layout?.rotateArm ?? 34;
|
|
return { corner, handle: { x: corner.x + direction.x * arm, y: corner.y + direction.y * arm } };
|
|
}
|
|
function rotationHandle(state, render) {
|
|
return rotationAnchor(state, render).handle;
|
|
}
|
|
function drawRotationHandle(context, state, render, active) {
|
|
const { corner, handle } = rotationAnchor(state, render);
|
|
context.strokeStyle = "#73e36a";
|
|
context.beginPath(); context.moveTo(corner.x, corner.y); context.lineTo(handle.x, handle.y); context.stroke();
|
|
context.fillStyle = active ? "#fff" : "#73e36a";
|
|
context.beginPath(); context.arc(handle.x, handle.y, 13, 0, Math.PI * 2); context.fill();
|
|
context.strokeStyle = "#173516"; context.stroke();
|
|
drawRotateGlyph(context, handle.x, handle.y, 6, "#0c2210");
|
|
if (!active) return;
|
|
// Live readout while the knob is held, nudged to stay inside the stage.
|
|
const degrees = Number(value(state.node, "rotation_degrees", 0)) || 0;
|
|
const text = `${degrees.toFixed(1)}°`;
|
|
context.save();
|
|
context.font = "12px system-ui";
|
|
const textWidth = context.measureText(text).width;
|
|
const viewWidth = context.canvas.clientWidth || context.canvas.width;
|
|
const viewHeight = context.canvas.clientHeight || context.canvas.height;
|
|
const x = clamp(handle.x + 20, 8, Math.max(8, viewWidth - textWidth - 10));
|
|
const y = clamp(handle.y - 20, 18, Math.max(18, viewHeight - 8));
|
|
context.fillStyle = "rgba(8,10,12,0.85)";
|
|
context.beginPath(); context.roundRect(x - 5, y - 13, textWidth + 10, 18, 6); context.fill();
|
|
context.fillStyle = "#c9f2c4";
|
|
context.fillText(text, x, y);
|
|
context.restore();
|
|
}
|
|
|
|
// Vector rotate-arrow glyph (circular arc + arrowhead), crisp at any zoom
|
|
// and identical on every platform — no emoji font involved.
|
|
function drawRotateGlyph(context, x, y, radius, color) {
|
|
const startAngle = -0.4 * Math.PI;
|
|
const endAngle = 1.1 * Math.PI;
|
|
context.save();
|
|
context.strokeStyle = color;
|
|
context.fillStyle = color;
|
|
context.lineWidth = 2;
|
|
context.lineCap = "round";
|
|
context.beginPath();
|
|
context.arc(x, y, radius, startAngle, endAngle);
|
|
context.stroke();
|
|
// Arrowhead at the arc's end, pointing along the direction of travel.
|
|
const tipBase = { x: x + radius * Math.cos(endAngle), y: y + radius * Math.sin(endAngle) };
|
|
const tangent = { x: -Math.sin(endAngle), y: Math.cos(endAngle) };
|
|
const normal = { x: Math.cos(endAngle), y: Math.sin(endAngle) };
|
|
context.beginPath();
|
|
context.moveTo(tipBase.x + tangent.x * 4.6, tipBase.y + tangent.y * 4.6);
|
|
context.lineTo(tipBase.x - tangent.x * 1.2 + normal.x * 3.1, tipBase.y - tangent.y * 1.2 + normal.y * 3.1);
|
|
context.lineTo(tipBase.x - tangent.x * 1.2 - normal.x * 3.1, tipBase.y - tangent.y * 1.2 - normal.y * 3.1);
|
|
context.closePath();
|
|
context.fill();
|
|
context.restore();
|
|
}
|
|
|
|
// One wiring for both stages (editor canvas and compact panel): pointer
|
|
// capture starts on handle hits only, empty presses fall through so the
|
|
// node itself can still drag, and pointercancel plus mouseleave both end a
|
|
// gesture in case the capture was refused.
|
|
function attachStageHandlers(state, canvas, signal) {
|
|
canvas.addEventListener("pointerdown", (event) => pointerDown(state, canvas, event), { signal });
|
|
canvas.addEventListener("pointermove", (event) => pointerMove(state, canvas, event), { signal });
|
|
canvas.addEventListener("pointerup", (event) => pointerUp(state, canvas, event), { signal });
|
|
canvas.addEventListener("pointercancel", (event) => pointerUp(state, canvas, event), { signal });
|
|
canvas.addEventListener("mouseleave", (event) => {
|
|
if (state.drag?.canvas === canvas) pointerUp(state, canvas, event);
|
|
else canvas.style.cursor = "default";
|
|
}, { signal });
|
|
}
|
|
|
|
function surfaceRender(state, canvas) {
|
|
return canvas === state.previewCanvas ? state.panelRender : state.render;
|
|
}
|
|
|
|
// The single hit-test order both surfaces share; hit radii are ~2-3x the
|
|
// drawn handle so handles stay grabbable on the compact panel.
|
|
function handleGroups(state, render) {
|
|
return [
|
|
{ kind: "rotation", priority: 0, radius: 24, handles: [{ name: "rotation", ...rotationHandle(state, render) }] },
|
|
{ kind: "padding", priority: 1, radius: 24, handles: paddingHandleCenters(render.outputRect, render.layout.padOffset) },
|
|
{ kind: "crop", priority: 2, radius: 22, handles: cropHandleCenters(render.cropRect) },
|
|
];
|
|
}
|
|
|
|
function pointerDown(state, canvas, event) {
|
|
if (state.drag) return;
|
|
const render = surfaceRender(state, canvas);
|
|
if (canvas === state.canvas && (event.button === 1 || event.altKey)) {
|
|
state.drag = { kind: "pan", canvas, start: canvasLocalPoint(canvas, event), view: { ...state.view } };
|
|
} else if (event.button === 0 && render) {
|
|
const point = canvasLocalPoint(canvas, event);
|
|
const selected = nearestHandle(point, handleGroups(state, render));
|
|
const base = {
|
|
canvas, start: point,
|
|
// Everything a drag computes against, frozen at grab time (map plus
|
|
// world snapshots) so a mid-gesture refit cannot move the target.
|
|
map: { scale: render.scale, originX: render.originX, originY: render.originY, layout: render.layout },
|
|
source: { ...render.source },
|
|
center: { x: render.sourceRect.x + render.sourceRect.width / 2, y: render.sourceRect.y + render.sourceRect.height / 2 },
|
|
crop: { ...render.crop },
|
|
padding: { ...render.padding },
|
|
rotation: Number(value(state.node, "rotation_degrees", 0)),
|
|
};
|
|
if (selected) state.drag = { ...selected, ...base };
|
|
else if (inside(point, render.cropRect)) state.drag = { kind: "move", ...base };
|
|
}
|
|
// No hit: no capture and no preventDefault, so an empty press on the
|
|
// panel falls through and the node drags as usual.
|
|
if (!state.drag) return;
|
|
if (state.drag.kind === "rotation") settleRotation(state);
|
|
event.preventDefault(); event.stopPropagation();
|
|
try { canvas.setPointerCapture(event.pointerId); } catch { /* mouse fallback */ }
|
|
state.grid = state.drag.kind === "rotation";
|
|
draw(state);
|
|
}
|
|
|
|
function pointerMove(state, canvas, event) {
|
|
const point = canvasLocalPoint(canvas, event);
|
|
const drag = state.drag;
|
|
if (!drag || drag.canvas !== canvas) { updateCursor(state, canvas, point); return; }
|
|
event.preventDefault();
|
|
const dxScreen = point.x - drag.start.x; const dyScreen = point.y - drag.start.y;
|
|
if (drag.kind === "pan") { state.view.panX = drag.view.panX + dxScreen; state.view.panY = drag.view.panY + dyScreen; }
|
|
else if (drag.kind === "rotation") {
|
|
const startAngle = Math.atan2(drag.start.y - drag.center.y, drag.start.x - drag.center.x);
|
|
const nextAngle = Math.atan2(point.y - drag.center.y, point.x - drag.center.x);
|
|
let degrees = drag.rotation + (nextAngle - startAngle) * 180 / Math.PI;
|
|
if (event.shiftKey) degrees = Math.round(degrees / 15) * 15;
|
|
rotateTo(state, degrees);
|
|
} else if (drag.kind === "crop") {
|
|
const ratio = parseAspectRatio(value(state.node, "crop_aspect_ratio", "free"), drag.source);
|
|
const next = resizeCrop(drag.crop, drag.name, dxScreen / drag.map.scale, dyScreen / drag.map.scale, drag.source, ratio);
|
|
setCrop(state.node, next);
|
|
applyAspectLock(state, cropDriver(drag.crop, next, drag.name));
|
|
} else if (drag.kind === "move") {
|
|
const crop = drag.crop;
|
|
setCrop(state.node, { ...crop, x: Math.round(clamp(crop.x + dxScreen / drag.map.scale, 0, drag.source.width - crop.width)), y: Math.round(clamp(crop.y + dyScreen / drag.map.scale, 0, drag.source.height - crop.height)) });
|
|
} else if (drag.kind === "padding") {
|
|
const delta = (drag.name === "pad_left" || drag.name === "pad_right" ? dxScreen : dyScreen) / drag.map.scale;
|
|
const sign = drag.name === "pad_left" || drag.name === "pad_top" ? -1 : 1;
|
|
let next = Math.max(0, Math.round(drag.padding[drag.name.replace("pad_", "")] + delta * sign));
|
|
// Under a lock the handle stops where the other axis would need
|
|
// negative padding; the other axis then follows.
|
|
const ratio = lockRatio(state);
|
|
if (ratio) next = Math.max(next, lockedPadMinimum(values(state.node), resolveCrop(values(state.node), drag.source), ratio, drag.name));
|
|
setValue(state.node, drag.name, next);
|
|
if (ratio) applyAspectLock(state, paddingAxis(drag.name));
|
|
}
|
|
draw(state); updateModalInfo(state);
|
|
}
|
|
|
|
function pointerUp(state, canvas, event) {
|
|
const drag = state.drag;
|
|
if (!drag || drag.canvas !== canvas) return;
|
|
const kind = drag.kind;
|
|
state.drag = null; state.grid = false;
|
|
if (kind === "rotation") settleRotation(state);
|
|
try { canvas.releasePointerCapture(event.pointerId); } catch {}
|
|
draw(state); state.node.setDirtyCanvas?.(true, true);
|
|
// Widgets were written throughout the drag; tell the tracker once, on
|
|
// release. A pan only moves the view and serializes nothing.
|
|
if (kind !== "pan") notifyAusbossChange();
|
|
}
|
|
function inside(point, rect) { return point.x >= rect.x && point.x <= rect.x + rect.width && point.y >= rect.y && point.y <= rect.y + rect.height; }
|
|
function setCrop(node, crop) { setValue(node, "crop_x", crop.x); setValue(node, "crop_y", crop.y); setValue(node, "crop_width", crop.width); setValue(node, "crop_height", crop.height); }
|
|
function updateCursor(state, canvas, point) {
|
|
const render = surfaceRender(state, canvas);
|
|
if (!render) return;
|
|
const selected = nearestHandle(point, handleGroups(state, render));
|
|
canvas.style.cursor = selected?.kind === "rotation" ? "crosshair" : selected ? "grab" : inside(point, render.cropRect) ? "move" : "default";
|
|
}
|
|
function wheelZoom(state, event) { event.preventDefault(); const point = canvasLocalPoint(state.canvas, event); state.view = zoomAround(state.view, state.view.zoom * Math.exp(-event.deltaY * 0.0015), point); draw(state); }
|
|
|
|
function updateModalInfo(state) {
|
|
if (!state.modal || !state.sourceWidth) return; const status = state.modal.querySelector("[data-ausboss-status]"); if (!status) return;
|
|
const frame = state.kind === "video" ? `\nFrame ${value(state.node, "frame_index", 0)} at ${Number(value(state.node, "frame_time", 0)).toFixed(3)}s` : "";
|
|
const stitch = widget(state.node, "stitch_blend") ? `\nStitch blend ${value(state.node, "stitch_blend", 32)} px${Number(value(state.node, "stitch_grow", 0)) ? `, grow ${value(state.node, "stitch_grow", 0)} px` : ""}` : "";
|
|
status.textContent = `${sizeLines(state).join("\n")}${stitch}${frame}`;
|
|
}
|
|
|
|
// The output size in the order the run builds it, one step per line: the
|
|
// editor's status panel and the face readout's tooltip.
|
|
function sizeLines(state) {
|
|
const current = values(state.node);
|
|
const source = rotatedSize(state.sourceWidth, state.sourceHeight, current.rotation_degrees);
|
|
const resize = resizeRequest(state.node);
|
|
const chain = sizeChain(current, source, resize);
|
|
const pad = resolvePadding(current, chain.crop);
|
|
const lines = [
|
|
`Source ${state.sourceWidth} x ${state.sourceHeight}`,
|
|
`Rotated ${source.width} x ${source.height}`,
|
|
`Crop ${chain.crop.x}, ${chain.crop.y}, ${chain.crop.width} x ${chain.crop.height}`,
|
|
`Padding ${current.pad_left} / ${current.pad_top} / ${current.pad_right} / ${current.pad_bottom} → ${chain.padded.width} x ${chain.padded.height}`,
|
|
];
|
|
const extraRight = pad.right - Math.max(0, Math.round(Number(current.pad_right) || 0));
|
|
const extraBottom = pad.bottom - Math.max(0, Math.round(Number(current.pad_bottom) || 0));
|
|
lines.push(extraRight || extraBottom
|
|
? `Align ${chain.multiple} → ${chain.canvas.width} x ${chain.canvas.height} (+${extraRight} right, +${extraBottom} bottom)`
|
|
: `Canvas ${chain.canvas.width} x ${chain.canvas.height}`);
|
|
if (chain.resized) {
|
|
const megapixels = (chain.resized.width * chain.resized.height / 1048576).toFixed(2);
|
|
lines.push(`Resize ${Number(resize.megapixels).toFixed(2)} MP, steps ${resize.steps} → ${chain.resized.width} x ${chain.resized.height} (${megapixels} MP)`);
|
|
}
|
|
for (const warning of sizeChainTokens(chain).warnings) lines.push(`⚠ ${warning}`);
|
|
if (chain.resized && (extraRight || extraBottom)) {
|
|
lines.push("Align's strip is fill the model paints. With Resize on, Step already rounds the size, so Align 1 leaves no strip.");
|
|
}
|
|
return lines;
|
|
}
|
|
function drawEmpty(state, text) { state.render = null; state.panelRender = null; syncReadout(state); for (const canvas of [state.canvas, state.previewCanvas]) { if (!canvas) continue; const prepared = prepareCanvas(canvas); drawEmptyCanvas(prepared.context, prepared.width, prepared.height, text); } }
|
|
function drawEmptyCanvas(context, width, height, text) { context.fillStyle = "#111"; context.fillRect(0, 0, width, height); context.fillStyle = "#9ba2aa"; context.font = "13px system-ui"; context.textAlign = "center"; context.fillText(text, width / 2, height / 2); context.textAlign = "left"; }
|
|
|
|
// True when the node is an AusBoss transform node whose editor can open
|
|
// (installed by installTransformNode). Used by the pack-wide command.
|
|
export function openTransformEditorForNode(node) {
|
|
const state = node?.__ausbossTransformState;
|
|
if (!state) return false;
|
|
openEditor(state);
|
|
return true;
|
|
}
|
|
|
|
export function disposeTransformNode(node) {
|
|
const state = node.__ausbossTransformState; if (!state) return; state.disposed = true; closeEditor(state); state.panelAbort?.abort(); state.panelResizeObserver?.disconnect(); state.frameController?.abort(); if (state.frameObjectUrl) URL.revokeObjectURL(state.frameObjectUrl);
|
|
if (node.__ausbossImgsSuppressed) {
|
|
const descriptor = node.__ausbossImgsDescriptor;
|
|
if (descriptor) Object.defineProperty(node, "imgs", descriptor); else delete node.imgs;
|
|
if (node.__ausbossAddCustomWidget) node.addCustomWidget = node.__ausbossAddCustomWidget;
|
|
delete node.__ausbossImgsSuppressed;
|
|
delete node.__ausbossImgsDescriptor;
|
|
delete node.__ausbossAddCustomWidget;
|
|
}
|
|
delete node.__ausbossTransformState;
|
|
}
|
|
|
|
export function registerTransformExtension(nodeClass, kind, mountPanel = null) {
|
|
app.registerExtension({
|
|
name: `ausboss.transform.${nodeClass}`,
|
|
beforeRegisterNodeDef(nodeType, nodeData) {
|
|
if (nodeData.name !== nodeClass) return;
|
|
hideInputsInDef(nodeData, HIDDEN_WIDGETS);
|
|
chainCallback(nodeType.prototype, "onNodeCreated", function () { installTransformNode(this, kind, mountPanel); });
|
|
chainCallback(nodeType.prototype, "onRemoved", function () { disposeTransformNode(this); });
|
|
},
|
|
});
|
|
}
|