358 lines
16 KiB
JavaScript
358 lines
16 KiB
JavaScript
import { app } from "../../scripts/app.js";
|
||
import { api } from "../../scripts/api.js";
|
||
|
||
const DIMENSIONS = ["guide_width", "guide_height", "canvas_width", "canvas_height"];
|
||
const HEIGHT = 310;
|
||
|
||
function widget(node, name) {
|
||
return node.widgets?.find((item) => item.name === name);
|
||
}
|
||
|
||
function inputSlot(node, name) {
|
||
return node.inputs?.findIndex((input) => input.name === name) ?? -1;
|
||
}
|
||
|
||
function connected(node, name) {
|
||
const slot = inputSlot(node, name);
|
||
return slot >= 0 && node.inputs[slot].link != null;
|
||
}
|
||
|
||
function inputValue(node, name, visited = new Set()) {
|
||
if (visited.has(node)) return undefined;
|
||
visited = new Set(visited).add(node);
|
||
const slot = inputSlot(node, name);
|
||
if (slot < 0 || node.inputs[slot].link == null) return widget(node, name)?.value;
|
||
const source = node.getInputNode(slot);
|
||
const link = node.getInputLink(slot);
|
||
if (!source || !link) return undefined;
|
||
const type = source.comfyClass || source.type;
|
||
if (type === "ComfySwitchNode") {
|
||
const selected = inputValue(source, "switch", visited);
|
||
if (typeof selected !== "boolean") return undefined;
|
||
return inputValue(source, selected ? "on_true" : "on_false", visited);
|
||
}
|
||
if (type === "Reroute") return inputValue(source, source.inputs[0].name, visited);
|
||
if (["PrimitiveInt", "PrimitiveBoolean", "PrimitiveNode", "easy int"].includes(type)) {
|
||
return inputValue(source, "value", visited);
|
||
}
|
||
return undefined;
|
||
}
|
||
|
||
function inputSignature(node, name, visited = new Set()) {
|
||
const slot = inputSlot(node, name);
|
||
if (slot < 0 || node.inputs[slot].link == null) return widget(node, name)?.value;
|
||
const source = node.getInputNode(slot);
|
||
const link = node.getInputLink(slot);
|
||
if (!source || !link || visited.has(source)) return node.inputs[slot].link;
|
||
visited = new Set(visited).add(source);
|
||
const type = source.comfyClass || source.type;
|
||
const identity = [node.inputs[slot].link, source.id, link.origin_slot, type];
|
||
if (type === "ComfySwitchNode") {
|
||
const selected = inputValue(source, "switch");
|
||
if (typeof selected === "boolean") {
|
||
return [...identity, selected, inputSignature(source, selected ? "on_true" : "on_false", visited)];
|
||
}
|
||
}
|
||
if (type === "EmptyMiniMaxH3LatentAV") {
|
||
return [...identity, inputSignature(source, "width", visited), inputSignature(source, "height", visited)];
|
||
}
|
||
if (type === "ImageFromBatch") {
|
||
return [...identity, inputSignature(source, "image", visited), inputSignature(source, "batch_index", visited)];
|
||
}
|
||
return [...identity,
|
||
source.widgets?.map(({ name, value }) => [name, ["string", "number", "boolean"].includes(typeof value) ? value : null]),
|
||
source.inputs?.map((input) => inputSignature(source, input.name, visited))];
|
||
}
|
||
|
||
function validDimension(value) {
|
||
return typeof value === "number" && Number.isInteger(value) && value > 0;
|
||
}
|
||
|
||
function createPositionEditor(node) {
|
||
const root = document.createElement("div");
|
||
root.className = "h3-guide-position";
|
||
root.style.cssText = `width:100%;height:${HEIGHT}px;display:flex;flex-direction:column;gap:6px;box-sizing:border-box;padding:6px;color:#dce5ef;font:12px sans-serif;`;
|
||
const canvas = document.createElement("canvas");
|
||
canvas.style.cssText = "width:100%;flex:1;min-height:100px;border:1px solid #435066;border-radius:5px;box-sizing:border-box;touch-action:none;cursor:grab;";
|
||
canvas.setAttribute("aria-label", "Drag guide position / 拖动参考区域");
|
||
const row = document.createElement("div");
|
||
row.style.cssText = "display:flex;gap:6px;align-items:center;flex-wrap:wrap;flex-shrink:0;";
|
||
const status = document.createElement("div");
|
||
status.style.cssText = "font-size:11px;line-height:15px;color:#a9b8cb;min-height:30px;flex-shrink:0;";
|
||
const coordinates = document.createElement("span");
|
||
coordinates.style.marginLeft = "auto";
|
||
const context = canvas.getContext("2d");
|
||
let view;
|
||
let drag;
|
||
let liveKey;
|
||
let frame;
|
||
let removed = false;
|
||
let executed;
|
||
let preview;
|
||
let queuedSignatures;
|
||
let previewError = "";
|
||
|
||
function signatures() {
|
||
return {
|
||
guide: JSON.stringify(connected(node, "image") ? inputSignature(node, "image") : DIMENSIONS.slice(0, 2).map((name) => inputSignature(node, name))),
|
||
canvas: JSON.stringify(connected(node, "latent") ? inputSignature(node, "latent") : DIMENSIONS.slice(2).map((name) => inputSignature(node, name))),
|
||
};
|
||
}
|
||
|
||
function dimensions(keys = signatures()) {
|
||
const guide = executed?.signatures.guide === keys.guide ? executed.guide : [];
|
||
const target = executed?.signatures.canvas === keys.canvas ? executed.canvas : [];
|
||
const values = DIMENSIONS.map((name, index) => {
|
||
const actual = index < 2 ? guide[index] : target[index - 2];
|
||
if (connected(node, index < 2 ? "image" : "latent")) return actual;
|
||
const live = inputValue(node, name);
|
||
return live === undefined ? actual : live;
|
||
});
|
||
return values.every(validDimension) ? values : null;
|
||
}
|
||
|
||
function position() {
|
||
return [Number(widget(node, "x").value), Number(widget(node, "y").value)];
|
||
}
|
||
|
||
function setPosition(x, y) {
|
||
for (const [name, value] of [["x", x], ["y", y]]) {
|
||
const target = widget(node, name);
|
||
target.value = Math.max(target.options?.min ?? -16384, Math.min(target.options?.max ?? 16384, Math.round(value)));
|
||
target.callback?.(target.value);
|
||
}
|
||
node.graph?.setDirtyCanvas(true, true);
|
||
draw();
|
||
}
|
||
|
||
function draw() {
|
||
if (removed) return;
|
||
const bounds = canvas.getBoundingClientRect();
|
||
if (!bounds.width || !bounds.height) return;
|
||
const dpr = window.devicePixelRatio || 1;
|
||
const width = Math.round(bounds.width * dpr);
|
||
const height = Math.round(bounds.height * dpr);
|
||
if (canvas.width !== width || canvas.height !== height) {
|
||
canvas.width = width;
|
||
canvas.height = height;
|
||
}
|
||
context.setTransform(dpr, 0, 0, dpr, 0, 0);
|
||
context.fillStyle = "#111923";
|
||
context.fillRect(0, 0, bounds.width, bounds.height);
|
||
const keys = signatures();
|
||
const sizes = dimensions(keys);
|
||
const [x, y] = position();
|
||
coordinates.textContent = `x ${x} · y ${y}`;
|
||
if (!sizes) {
|
||
view = null;
|
||
status.textContent = previewError || "尺寸尚未同步或来源已更改，点击“刷新预览”读取实际尺寸。";
|
||
return;
|
||
}
|
||
const [gw, gh, cw, ch] = sizes;
|
||
if (!drag || !view) {
|
||
const left = Math.min(0, x), top = Math.min(0, y);
|
||
const right = Math.max(cw, x + gw), bottom = Math.max(ch, y + gh);
|
||
const scale = Math.min((bounds.width - 36) / (right - left), (bounds.height - 36) / (bottom - top));
|
||
view = { scale, ox: (bounds.width - (right - left) * scale) / 2 - left * scale,
|
||
oy: (bounds.height - (bottom - top) * scale) / 2 - top * scale };
|
||
}
|
||
const { scale, ox, oy } = view;
|
||
context.fillStyle = "#233247";
|
||
context.fillRect(ox, oy, cw * scale, ch * scale);
|
||
context.strokeStyle = "#7d8fa8";
|
||
context.lineWidth = 1;
|
||
context.strokeRect(ox, oy, cw * scale, ch * scale);
|
||
context.save();
|
||
context.beginPath();
|
||
context.rect(ox, oy, cw * scale, ch * scale);
|
||
context.clip();
|
||
context.strokeStyle = "#384b62";
|
||
for (let i = 1; i < 3; i++) {
|
||
context.beginPath();
|
||
context.moveTo(ox + cw * scale * i / 3, oy);
|
||
context.lineTo(ox + cw * scale * i / 3, oy + ch * scale);
|
||
context.moveTo(ox, oy + ch * scale * i / 3);
|
||
context.lineTo(ox + cw * scale, oy + ch * scale * i / 3);
|
||
context.stroke();
|
||
}
|
||
context.restore();
|
||
if (preview?.signature === keys.guide && preview.image.complete && preview.image.naturalWidth) {
|
||
context.drawImage(preview.image, ox + x * scale, oy + y * scale, gw * scale, gh * scale);
|
||
} else {
|
||
context.fillStyle = "rgba(64, 164, 217, 0.35)";
|
||
context.fillRect(ox + x * scale, oy + y * scale, gw * scale, gh * scale);
|
||
context.fillStyle = "#d2f5ff";
|
||
context.font = "12px sans-serif";
|
||
context.textAlign = "center";
|
||
context.fillText("Guide", ox + (x + gw / 2) * scale, oy + (y + gh / 2) * scale + 4);
|
||
}
|
||
context.strokeStyle = "#65d5ff";
|
||
context.lineWidth = 2;
|
||
context.strokeRect(ox + x * scale, oy + y * scale, gw * scale, gh * scale);
|
||
const overflow = [gw > cw ? "宽度" : "", gh > ch ? "高度" : ""].filter(Boolean).join("和");
|
||
status.textContent = previewError || `Guide ${gw}×${gh} → 画布 ${cw}×${ch}${overflow ? ` · Guide ${overflow}超出画布` : ""}`;
|
||
}
|
||
|
||
function button(label, action) {
|
||
const element = document.createElement("button");
|
||
element.type = "button";
|
||
element.textContent = label;
|
||
element.style.cssText = "background:#26364b;color:#e1efff;border:1px solid #506783;border-radius:4px;padding:4px 8px;cursor:pointer;";
|
||
element.addEventListener("click", action);
|
||
row.appendChild(element);
|
||
return element;
|
||
}
|
||
const refreshButton = button("刷新预览 / Preview", async () => {
|
||
refreshButton.disabled = true;
|
||
previewError = "";
|
||
queuedSignatures = signatures();
|
||
try {
|
||
await app.queuePrompt(0, 1, [String(node.id)]);
|
||
} catch (error) {
|
||
queuedSignatures = null;
|
||
previewError = "预览失败，请重试。";
|
||
refreshButton.title = String(error);
|
||
} finally {
|
||
refreshButton.disabled = false;
|
||
draw();
|
||
}
|
||
});
|
||
refreshButton.title = "只运行此节点及其上游，读取视频第一帧或参考图片。";
|
||
function positionButton(label, action) {
|
||
button(label, () => {
|
||
const sizes = dimensions();
|
||
if (!sizes) return;
|
||
node.graph?.beforeChange();
|
||
action(sizes);
|
||
node.graph?.afterChange();
|
||
});
|
||
}
|
||
positionButton("居中 / Center", ([gw, gh, cw, ch]) => setPosition((cw - gw) / 2, (ch - gh) / 2));
|
||
positionButton("左上 / Origin", () => setPosition(0, 0));
|
||
row.appendChild(coordinates);
|
||
root.append(canvas, row, status);
|
||
root.title = "拖动参考图调整左上角坐标；按住 Shift 以 32 像素对齐。";
|
||
for (const type of ["pointerdown", "pointerup", "mousedown", "mouseup", "click", "dblclick"]) {
|
||
root.addEventListener(type, (event) => event.stopPropagation());
|
||
}
|
||
canvas.addEventListener("pointerdown", (event) => {
|
||
if (event.button !== 0 || !view || !dimensions()) return;
|
||
const bounds = canvas.getBoundingClientRect();
|
||
const [x, y] = position();
|
||
const [gw, gh] = dimensions();
|
||
const px = (event.clientX - bounds.left - view.ox) / view.scale;
|
||
const py = (event.clientY - bounds.top - view.oy) / view.scale;
|
||
if (px < x || py < y || px > x + gw || py > y + gh) return;
|
||
event.preventDefault();
|
||
node.graph?.beforeChange();
|
||
drag = { id: event.pointerId, x, y, px: event.clientX, py: event.clientY };
|
||
canvas.setPointerCapture(event.pointerId);
|
||
canvas.style.cursor = "grabbing";
|
||
});
|
||
canvas.addEventListener("pointermove", (event) => {
|
||
if (!drag || event.pointerId !== drag.id || !view) return;
|
||
const step = event.shiftKey ? 32 : 1;
|
||
setPosition(Math.round((drag.x + (event.clientX - drag.px) / view.scale) / step) * step,
|
||
Math.round((drag.y + (event.clientY - drag.py) / view.scale) / step) * step);
|
||
});
|
||
function endDrag() {
|
||
if (!drag) return;
|
||
drag = null;
|
||
canvas.style.cursor = "grab";
|
||
node.graph?.afterChange();
|
||
draw();
|
||
}
|
||
canvas.addEventListener("lostpointercapture", endDrag);
|
||
canvas.addEventListener("pointerup", endDrag);
|
||
canvas.addEventListener("pointercancel", endDrag);
|
||
|
||
const domWidget = node.addDOMWidget("guide_position_preview", "div", root, {
|
||
serialize: false, hideOnZoom: false,
|
||
getMinHeight: () => HEIGHT, getMaxHeight: () => HEIGHT, getHeight: () => HEIGHT,
|
||
});
|
||
domWidget.computeSize = (width) => [width, HEIGHT];
|
||
const observer = new ResizeObserver(draw);
|
||
observer.observe(canvas);
|
||
for (const name of [...DIMENSIONS, "x", "y"]) {
|
||
const target = widget(node, name);
|
||
const original = target.callback;
|
||
target.callback = function (...args) {
|
||
const result = original?.apply(this, args);
|
||
draw();
|
||
return result;
|
||
};
|
||
}
|
||
// Linked upstream widgets and graph zoom may change without this node's callbacks.
|
||
function refresh() {
|
||
if (removed) return;
|
||
const bounds = canvas.getBoundingClientRect();
|
||
const key = JSON.stringify([signatures(), position(), bounds.width, bounds.height]);
|
||
if (key !== liveKey) {
|
||
liveKey = key;
|
||
draw();
|
||
}
|
||
frame = requestAnimationFrame(refresh);
|
||
}
|
||
frame = requestAnimationFrame(refresh);
|
||
node.setSize([Math.max(node.size[0], 390), Math.max(node.size[1], node.computeSize()[1])]);
|
||
return {
|
||
draw,
|
||
executed(message) {
|
||
const keys = queuedSignatures || signatures();
|
||
queuedSignatures = null;
|
||
previewError = "";
|
||
executed = { guide: message.guide_size, canvas: message.canvas_size, signatures: keys };
|
||
preview = null;
|
||
const descriptor = message.guide_preview?.[0];
|
||
if (descriptor) {
|
||
const image = new Image();
|
||
const loaded = { image, signature: keys.guide };
|
||
preview = loaded;
|
||
image.onload = () => { if (preview === loaded) draw(); };
|
||
image.onerror = () => {
|
||
if (preview !== loaded) return;
|
||
previewError = "预览图片加载失败，请刷新预览。";
|
||
draw();
|
||
};
|
||
image.src = api.apiURL(`/view?${new URLSearchParams(descriptor)}`);
|
||
}
|
||
draw();
|
||
},
|
||
remove() {
|
||
removed = true;
|
||
cancelAnimationFrame(frame);
|
||
observer.disconnect();
|
||
},
|
||
};
|
||
}
|
||
|
||
app.registerExtension({
|
||
name: "MiniMaxH3.SpatialGuidePosition",
|
||
async beforeRegisterNodeDef(nodeType, nodeData) {
|
||
if (nodeData.name !== "MiniMaxH3GuidePosition") return;
|
||
const created = nodeType.prototype.onNodeCreated;
|
||
nodeType.prototype.onNodeCreated = function (...args) {
|
||
const result = created?.apply(this, args);
|
||
this.h3PositionEditor = createPositionEditor(this);
|
||
return result;
|
||
};
|
||
const configured = nodeType.prototype.onConfigure;
|
||
nodeType.prototype.onConfigure = function (...args) {
|
||
const result = configured?.apply(this, args);
|
||
requestAnimationFrame(() => this.h3PositionEditor?.draw());
|
||
return result;
|
||
};
|
||
const executed = nodeType.prototype.onExecuted;
|
||
nodeType.prototype.onExecuted = function (message, ...args) {
|
||
const result = executed?.call(this, message, ...args);
|
||
if (message.guide_size && message.canvas_size) this.h3PositionEditor?.executed(message);
|
||
return result;
|
||
};
|
||
const removed = nodeType.prototype.onRemoved;
|
||
nodeType.prototype.onRemoved = function (...args) {
|
||
this.h3PositionEditor?.remove();
|
||
return removed?.apply(this, args);
|
||
};
|
||
},
|
||
});
|