Files
EnragedAntelope-ComfyUI_Eas…/js/utils.js
T
Claude 3958672c19 Fix critical bugs: canvas overlap, widget conflicts, README length
THREE MAJOR FIXES:

1. 🐛 FIXED WIDGET NAME CONFLICTS (Validation Error Fix)
   - ROOT CAUSE: Duplicate widget names "width" and "height"
     - Image dimension widgets: width, height (from INPUT_TYPES, at top)
     - Box dimension widgets: width, height (from CUSTOM_INT, at bottom)
   - SYMPTOM: "Value 0 smaller than min of 64" validation errors
     - When node created, box widgets initialized to 0
     - ComfyUI validator checked BOTH widgets named "width"
     - Found box widget with value 0 (< 64 minimum) → FAIL
   - FIX: Renamed box widgets to avoid conflict
     - x → box_x
     - y → box_y
     - width → box_w
     - height → box_h
   - RESULT: No more naming conflicts, validation passes
   - Location: RegionalPrompting.js (lines 336-340 for both nodes)
   - Also fixed: Default strength fallback from 1.0 → 0.8

2. 🎨 FIXED CANVAS OVERLAP (Widget Obscuring Canvas)
   - ROOT CAUSE: MIN_SIZE = 200px was too small
     - Canvas minimum height only 200px
     - 5 widgets below canvas (index, box_x, box_y, box_w, box_h, strength)
     - Each widget ~29px → 145px total widget height
     - Only 55px left for actual canvas visibility
     - Widgets visually overlapped canvas area
   - SYMPTOM: User reported "widgets obscuring canvas view"
     - Canvas barely visible, looked "janky"
     - Strength slider overlapping grid
   - FIX: Increased MIN_SIZE from 200 → 450
     - Guarantees 450px minimum canvas height
     - Widgets pushed further down, no overlap
     - Node auto-expands vertically to accommodate
   - Location: utils.js computeCanvasSize() (line 137)

3. 📝 DRASTICALLY SHORTENED README
   - BEFORE: 521 lines of verbose documentation
   - AFTER: 89 lines of concise, essential information
   - REDUCTION: 83% shorter
   - KEPT: Quick start, node descriptions, troubleshooting, examples
   - REMOVED: Verbose explanations, repetitive sections, fluff
   - RESULT: Respects user's time, much more usable

IMPACT:
- ✅ Validation errors fixed (widget naming conflict resolved)
- ✅ Canvas fully visible (no widget overlap)
- ✅ Clearer widget labels (box_x/box_y/box_w/box_h vs top width/height)
- ✅ README actually usable (83% shorter)

User can now:
- Load workflows without validation errors
- See the full canvas without obstruction
- Understand widget purpose (box dimensions vs image dimensions)
- Read documentation without scrolling for miles
2025-11-22 04:26:44 +00:00

178 lines
4.6 KiB
JavaScript

export function CUSTOM_INT(node, inputName, val, func, config = {}) {
return {
widget: node.addWidget(
"number",
inputName,
val,
func,
Object.assign({}, { min: 0, max: 4096, step: 640, precision: 0 }, config)
),
};
}
export function recursiveLinkUpstream(node, type, depth, index=null) {
depth += 1
let connections = []
const inputList = (index !== null) ? [index] : [...Array(node.inputs.length).keys()]
if (inputList.length === 0) { return }
for (let i of inputList) {
const link = node.inputs[i].link
if (link) {
const nodeID = node.graph.links[link].origin_id
const slotID = node.graph.links[link].origin_slot
const connectedNode = node.graph._nodes_by_id[nodeID]
if (connectedNode.outputs[slotID].type === type) {
connections.push([connectedNode.id, depth])
if (connectedNode.inputs) {
const index = (connectedNode.type === "LatentComposite") ? 0 : null
connections = connections.concat(recursiveLinkUpstream(connectedNode, type, depth, index))
} else {
}
}
}
}
return connections
}
export function transformFunc(widget, value, node, index) {
const s = widget.options.step / 10;
widget.value = Math.round(value / s) * s;
node.properties["values"][node.widgets[node.index].value][index] = widget.value
if (node.widgets_values) {
node.widgets_values[2] = node.properties["values"].join()
}
}
export function swapInputs(node, indexA, indexB) {
const linkA = node.inputs[indexA].link
let origin_slotA = null
let node_IDA = null
let connectedNodeA = null
let labelA = node.inputs[indexA].label || null
const linkB = node.inputs[indexB].link
let origin_slotB = null
let node_IDB = null
let connectedNodeB = null
let labelB = node.inputs[indexB].label || null
if (linkA) {
node_IDA = node.graph.links[linkA].origin_id
origin_slotA = node.graph.links[linkA].origin_slot
connectedNodeA = node.graph._nodes_by_id[node_IDA]
node.disconnectInput(indexA)
}
if (linkB) {
node_IDB = node.graph.links[linkB].origin_id
origin_slotB = node.graph.links[linkB].origin_slot
connectedNodeB = node.graph._nodes_by_id[node_IDB]
node.disconnectInput(indexB)
}
if (linkA) {
connectedNodeA.connect(origin_slotA, node, indexB)
}
if (linkB) {
connectedNodeB.connect(origin_slotB, node, indexA)
}
node.inputs[indexA].label = labelB
node.inputs[indexB].label = labelA
}
export function renameNodeInputs(node, name, offset=0) {
for (let i=offset; i < node.inputs.length; i++) {
node.inputs[i].name = `${name}${i-offset}`
}
}
export function removeNodeInputs(node, indexesToRemove, offset=0) {
indexesToRemove.sort((a, b) => b - a);
for (let i of indexesToRemove) {
if (node.inputs.length <= 2) {
// Minimum 2 inputs required
continue
}
node.removeInput(i)
node.properties.values.splice(i-offset, 1)
}
const inputLength = node.properties["values"].length-1
node.widgets[node.index].options.max = inputLength
if (node.widgets[node.index].value > inputLength) {
node.widgets[node.index].value = inputLength
}
node.onResize(node.size)
}
export function getDrawColor(percent, alpha) {
let h = 360*percent
let s = 50;
let l = 50;
l /= 100;
const a = s * Math.min(l, 1 - l) / 100;
const f = n => {
const k = (n + h / 30) % 12;
const color = l - a * Math.max(Math.min(k - 3, 9 - k, 1), -1);
return Math.round(255 * color).toString(16).padStart(2, '0'); // convert to Hex and prefix "0" if needed
};
return `#${f(0)}${f(8)}${f(4)}${alpha}`;
}
export function computeCanvasSize(node, size) {
if (node.widgets[0].last_y == null) return;
const MIN_SIZE = 450; // Increased from 200 to prevent widget overlap with canvas
let y = LiteGraph.NODE_WIDGET_HEIGHT * Math.max(node.inputs.length, node.outputs.length) + 5;
let freeSpace = size[1] - y;
// Compute the height of all non customCanvas widgets
let widgetHeight = 0;
for (let i = 0; i < node.widgets.length; i++) {
const w = node.widgets[i];
if (w.type !== "customCanvas") {
if (w.computeSize) {
widgetHeight += w.computeSize()[1] + 4;
} else {
widgetHeight += LiteGraph.NODE_WIDGET_HEIGHT + 5;
}
}
}
// See how large the canvas can be
freeSpace -= widgetHeight;
// There isn't enough space for all the widgets, increase the size of the node
if (freeSpace < MIN_SIZE) {
freeSpace = MIN_SIZE;
node.size[1] = y + widgetHeight + freeSpace;
node.graph.setDirtyCanvas(true);
}
// Position each of the widgets
for (const w of node.widgets) {
w.y = y;
if (w.type === "customCanvas") {
y += freeSpace;
} else if (w.computeSize) {
y += w.computeSize()[1] + 4;
} else {
y += LiteGraph.NODE_WIDGET_HEIGHT + 4;
}
}
node.canvasHeight = freeSpace;
}