IxMxAMAR
e8e673caf6
- Skip theme decoration (accent stripe + drawForeground/drawBackground) when node.flags.collapsed. LiteGraph keeps node.size[1] at the expanded height when collapsed and does NOT clip per-node draws, so the 4px left-edge accent stripe was painting a vertical bar past the bottom of the collapsed title pill. - Rewrite wire render mode dropdown with explicit label->value pairs. v0.3.0 used indexOf on a label-only array which mapped 1:1 to the setting value, but LiteGraph's constants are 0-based and non-contiguous (HIDDEN=-1, STRAIGHT=0, LINEAR=1, SPLINE=2). So picking "straight" actually set LINEAR, picking "linear" set SPLINE, and the bezier/ manhattan options sent invalid 3/4 that LiteGraph fell back to default for. v0.3.1 maps each label to the correct constant, drops the fictional "manhattan (L-shape)" option, and adds "hidden". All 33 JS tests still pass.
115 lines
3.9 KiB
JavaScript
115 lines
3.9 KiB
JavaScript
/**
|
|
* Wire (link/connection) theming.
|
|
*
|
|
* 1. Per-data-type color palette: mutate `app.canvas.default_connection_color_byType`
|
|
* and store originals so we can restore on theme removal.
|
|
* 2. Render mode (bezier/straight/linear/manhattan): set `app.canvas.links_render_mode`.
|
|
* 3. Thickness: scale LiteGraph's native `connections_width` property. (v0.2.x
|
|
* tried to mutate `ctx.lineWidth` inside a renderLink wrap, but LiteGraph
|
|
* overwrites lineWidth from connections_width inside the original
|
|
* renderLink anyway, so the wrap was a no-op.)
|
|
* 4. Opacity: wrap renderLink to scale globalAlpha. There is no native
|
|
* LiteGraph property for link opacity, so a wrap is necessary here.
|
|
*
|
|
* Verified against existing packs:
|
|
* - ComfyUI-Custom-Scripts mutates `links_render_mode`.
|
|
* - ComfyUI-KJNodes mutates `default_connection_color_byType` and wraps `renderLink`.
|
|
*/
|
|
|
|
let _originalColorByType = null;
|
|
let _originalConnectionsWidth = null;
|
|
let _renderLinkPatched = false;
|
|
let _wireState = {
|
|
thickness: 1.0, // multiplier on connections_width
|
|
opacity: 1.0, // ctx.globalAlpha multiplier (applied in wrap)
|
|
};
|
|
|
|
|
|
export function applyWirePalette(app, palette) {
|
|
if (!app?.canvas) return;
|
|
if (!_originalColorByType) {
|
|
_originalColorByType = { ...(app.canvas.default_connection_color_byType || {}) };
|
|
}
|
|
if (!palette) {
|
|
app.canvas.default_connection_color_byType = { ..._originalColorByType };
|
|
return;
|
|
}
|
|
// Apply theme palette merged over originals — unknown link types keep
|
|
// their original colors.
|
|
app.canvas.default_connection_color_byType = {
|
|
..._originalColorByType,
|
|
...palette,
|
|
};
|
|
}
|
|
|
|
|
|
/**
|
|
* Set the link render mode globally. Values match LiteGraph's actual constants
|
|
* (verified against ComfyUI's bundled litegraph: HIDDEN=-1, STRAIGHT=0,
|
|
* LINEAR=1, SPLINE=2). v0.2.x docs incorrectly claimed values were 1-indexed
|
|
* and there was a "Manhattan/L-shape" mode — neither was true.
|
|
*
|
|
* null = leave ComfyUI's own setting alone.
|
|
* -1 = hidden
|
|
* 0 = straight
|
|
* 1 = linear
|
|
* 2 = spline (bezier)
|
|
*/
|
|
export function applyWireRenderMode(app, mode) {
|
|
if (!app?.canvas) return;
|
|
if (mode !== null && mode !== undefined) {
|
|
app.canvas.links_render_mode = Number(mode);
|
|
app.canvas.setDirty?.(true, true);
|
|
}
|
|
}
|
|
|
|
|
|
/** Scale LiteGraph's native connections_width by `multiplier`. */
|
|
export function applyWireThickness(app, multiplier) {
|
|
_wireState.thickness = Number(multiplier) || 1.0;
|
|
if (!app?.canvas) return;
|
|
if (_originalConnectionsWidth === null) {
|
|
// LiteGraph defaults to 3 in modern builds; snapshot whatever is live.
|
|
_originalConnectionsWidth = app.canvas.connections_width ?? 3;
|
|
}
|
|
app.canvas.connections_width = _originalConnectionsWidth * _wireState.thickness;
|
|
app.canvas.setDirty?.(true, false);
|
|
}
|
|
|
|
|
|
export function setWireOpacity(alpha) {
|
|
_wireState.opacity = Math.max(0, Math.min(1, Number(alpha) || 1.0));
|
|
}
|
|
|
|
|
|
/**
|
|
* Install a one-time wrapper around LGraphCanvas.prototype.renderLink that
|
|
* applies the live opacity setting. Thickness is handled by mutating
|
|
* `connections_width` (see applyWireThickness) and does NOT require a wrap.
|
|
*/
|
|
export function ensureRenderLinkWrapped(LGraphCanvas) {
|
|
if (_renderLinkPatched || !LGraphCanvas?.prototype?.renderLink) return;
|
|
const original = LGraphCanvas.prototype.renderLink;
|
|
LGraphCanvas.prototype.renderLink = function (...args) {
|
|
if (_wireState.opacity === 1.0) {
|
|
return original.apply(this, args);
|
|
}
|
|
const ctx = args[0];
|
|
const prev = ctx.globalAlpha ?? 1;
|
|
ctx.globalAlpha = prev * _wireState.opacity;
|
|
const result = original.apply(this, args);
|
|
ctx.globalAlpha = prev;
|
|
return result;
|
|
};
|
|
_renderLinkPatched = true;
|
|
}
|
|
|
|
|
|
/** For tests only. */
|
|
export function _resetForTests() {
|
|
_originalColorByType = null;
|
|
_originalConnectionsWidth = null;
|
|
_renderLinkPatched = false;
|
|
_wireState = { thickness: 1.0, opacity: 1.0 };
|
|
}
|