rubz
c6c26a35fa
- LiteGraph caches a widget's .width the first time it lays a custom-typed widget out and reuses that cached value on every later draw() call. For a divider/status/preset widget added before the node reaches its final size, that cached width goes stale and never updates, making section-divider lines and the status box stop partway across the node instead of spanning it, and clipping/unevenly sizing the preset chips. All three shared widgets now read node.size[0] directly in draw() instead of trusting the widgetWidth parameter, which sidesteps the stale cache entirely. - Add a ?v=2 query string to every import of the shared/*.mjs modules. aiohttp's static file server doesn't send Cache-Control: no-store for these (unlike the top-level registered extension .js files), so browsers were free to keep serving an old cached copy even across a hard reload. A versioned import URL forces a fresh fetch regardless of cache state.
88 lines
3.4 KiB
JavaScript
88 lines
3.4 KiB
JavaScript
// Draw-only widgets (no mouse/click handling) shared across CraftKit nodes.
|
|
// type: "custom" is deliberate — it is not a name ComfyUI's Nodes 2.0 Vue
|
|
// widget registry recognizes, so Vue falls through to its WidgetLegacy
|
|
// bridge, which calls our draw() unmodified in both classic LiteGraph and
|
|
// Nodes 2.0. computeSize MUST return [width, height] (passing width through)
|
|
// rather than a hardcoded value — a fixed/wrong computeSize previously broke
|
|
// node layout on click when this was tried without care (see the comment on
|
|
// the preset-chip widget in smart_resize.js's git history).
|
|
//
|
|
// draw() intentionally ignores its own `widgetWidth` parameter and reads
|
|
// `node.size[0]` instead. LiteGraph caches a `.width` on custom-typed widget
|
|
// objects the first time it lays them out and reuses that cached value on
|
|
// later draws — for a widget added before the node reaches its final size
|
|
// (e.g. before later Python widgets are added, or before an explicit
|
|
// node.setSize() call), that cache goes stale and draw() keeps receiving the
|
|
// old, too-narrow width forever, making the divider line/status box stop
|
|
// partway across the node instead of spanning it. node.size[0] is always
|
|
// live, so reading it directly sidesteps the stale cache entirely.
|
|
|
|
const DIVIDER_HEIGHT = 20;
|
|
|
|
export function createDividerWidget(label) {
|
|
return {
|
|
name: `_div_${label}`,
|
|
type: "custom",
|
|
value: null,
|
|
serialize: false,
|
|
options: {},
|
|
computeSize(width) {
|
|
return [width, DIVIDER_HEIGHT];
|
|
},
|
|
draw(ctx, node, widgetWidth, y, height) {
|
|
const w = node?.size?.[0] || widgetWidth;
|
|
const lx = 14;
|
|
ctx.save();
|
|
ctx.font = "bold 10px sans-serif";
|
|
ctx.textBaseline = "middle";
|
|
ctx.textAlign = "left";
|
|
ctx.fillStyle = "#888";
|
|
ctx.fillText(label, lx, y + height / 2);
|
|
const lineX = lx + ctx.measureText(label).width + 8;
|
|
ctx.beginPath();
|
|
ctx.moveTo(lineX, y + height / 2);
|
|
ctx.lineTo(w - 14, y + height / 2);
|
|
ctx.strokeStyle = "#333";
|
|
ctx.lineWidth = 1;
|
|
ctx.stroke();
|
|
ctx.restore();
|
|
},
|
|
};
|
|
}
|
|
|
|
const STATUS_HEIGHT = 24;
|
|
|
|
export function createStatusWidget(placeholderText) {
|
|
return {
|
|
name: "_status",
|
|
type: "custom",
|
|
value: null,
|
|
serialize: false,
|
|
options: {},
|
|
_text: "",
|
|
computeSize(width) {
|
|
return [width, STATUS_HEIGHT];
|
|
},
|
|
draw(ctx, node, widgetWidth, y, height) {
|
|
const w = node?.size?.[0] || widgetWidth;
|
|
const margin = 14;
|
|
const innerW = w - margin * 2;
|
|
ctx.save();
|
|
ctx.beginPath();
|
|
if (ctx.roundRect) ctx.roundRect(margin, y + 2, innerW, height - 4, 4);
|
|
else ctx.rect(margin, y + 2, innerW, height - 4);
|
|
ctx.fillStyle = "#111";
|
|
ctx.fill();
|
|
ctx.strokeStyle = this._text ? "#3a3a3a" : "#222";
|
|
ctx.lineWidth = 1;
|
|
ctx.stroke();
|
|
ctx.font = "11px sans-serif";
|
|
ctx.textAlign = "center";
|
|
ctx.textBaseline = "middle";
|
|
ctx.fillStyle = this._text ? "#f28f41" : "#666";
|
|
ctx.fillText(this._text || placeholderText, w / 2, y + height / 2);
|
|
ctx.restore();
|
|
},
|
|
};
|
|
}
|