Comfy-Org/ComfyUI_frontend
1
0
Fork 0
mirror of https://github.com/Comfy-Org/ComfyUI_frontend.git synced 2026-02-02 22:37:32 +00:00
Code Issues Packages Projects Releases Wiki Activity

Increase node input & output slot hitboxes (#45)

Browse Source 
* Fix render bug - invalid slot shown as valid

* Increase hitbox of input/output slots

Improves UX by making wiring nodes easier.

* Add variable input hitbox width
This commit is contained in:
filtered
2024-08-06 00:30:15 +10:00
committed by GitHub
parent c981b93084
commit d2c72243f8
1 changed files with 13 additions and 16 deletions
Download Patch File Download Diff File Expand all files Collapse all files

29
src/litegraph.js
View File

@@ -6519,12 +6519,9 @@ LGraphNode.prototype.executeAction = function(action)
} else {
//check if I have a slot below de mouse
var slot = this.isOverNodeInput( node, e.canvasX, e.canvasY, pos );
if (slot != -1 && node.inputs[slot]) {
var slot_type = node.inputs[slot].type;
if ( LiteGraph.isValidConnection( firstLink.output.type, slot_type ) ) {
this._highlight_input = pos;
this._highlight_input_slot = node.inputs[slot]; // XXX CHECK THIS
}
if (slot != -1 && node.inputs[slot] && LiteGraph.isValidConnection(firstLink.output.type, node.inputs[slot].type)) {
this._highlight_input = pos;
this._highlight_input_slot = node.inputs[slot]; // XXX CHECK THIS
} else {
this._highlight_input = null;
this._highlight_input_slot = null; // XXX CHECK THIS
@@ -6541,11 +6538,8 @@ LGraphNode.prototype.executeAction = function(action)
} else {
//check if I have a slot below de mouse
var slot = this.isOverNodeOutput( node, e.canvasX, e.canvasY, pos );
if (slot != -1 && node.outputs[slot]) {
var slot_type = node.outputs[slot].type;
if ( LiteGraph.isValidConnection( firstLink.input.type, slot_type ) ) {
this._highlight_output = pos;
}
if (slot != -1 && node.outputs[slot] && LiteGraph.isValidConnection(firstLink.input.type, node.outputs[slot].type)) {
this._highlight_output = pos;
} else {
this._highlight_output = null;
}
@@ -7032,13 +7026,16 @@ LGraphNode.prototype.executeAction = function(action)
20
);
} else {
// TODO: Find a cheap way to measure text, and do it on node label change instead of here
// Input icon width + text approximation
const width = 20 + (((input.label?.length ?? input.name?.length) || 3) * 7)
is_inside = isInsideRectangle(
canvasx,
canvasy,
link_pos[0] - 10,
link_pos[1] - 5,
40,
10
link_pos[1] - 10,
width,
20
);
}
if (is_inside) {
@@ -7082,9 +7079,9 @@ LGraphNode.prototype.executeAction = function(action)
canvasx,
canvasy,
link_pos[0] - 10,
link_pos[1] - 5,
link_pos[1] - 10,
40,
10
20
);
}
if (is_inside) {