Comfy-Org/ComfyUI_frontend
1
0
Fork 0
mirror of https://github.com/Comfy-Org/ComfyUI_frontend.git synced 2026-03-07 06:00:03 +00:00
Code Issues Packages Projects Releases Wiki Activity

[Bug] Fix layout issue caused by absolute positioned slots (#908)

Browse Source 
Before:

![image](https://github.com/user-attachments/assets/00bbbf14-a153-4301-b4c4-0c30cb2ebcc7)

After:

![image](https://github.com/user-attachments/assets/2247a0a5-2757-478c-b701-9ceab7a133cc)

Workflow:

[dynamically_added_input.json](https://github.com/user-attachments/files/19640371/dynamically_added_input.json)

This PR also fixes the issue that output slot's `pos` property is not
relative to node pos.
This commit is contained in:
Chenlei Hu
2025-04-07 19:52:58 -04:00
committed by GitHub
parent d77100c401
commit bf5e3f3c77
2 changed files with 113 additions and 5 deletions
Download Patch File Download Diff File Expand all files Collapse all files

31
src/LGraphNode.ts
View File

@@ -2871,16 +2871,37 @@ export class LGraphNode implements Positionable, IPinnable, IColorable {
// default vertical slots
const offset = LiteGraph.NODE_SLOT_HEIGHT * 0.5
const slotIndex = is_input
? this.#defaultVerticalInputs.indexOf(this.inputs[slot_number])
: this.#defaultVerticalOutputs.indexOf(this.outputs[slot_number])
out[0] = is_input
? nodeX + offset
: nodeX + this.size[0] + 1 - offset
out[1] =
nodeY +
(slot_number + 0.7) * LiteGraph.NODE_SLOT_HEIGHT +
(slotIndex + 0.7) * LiteGraph.NODE_SLOT_HEIGHT +
(this.constructor.slot_start_y || 0)
return out
}
/**
* @internal The inputs that are not positioned with absolute coordinates.
*/
get #defaultVerticalInputs() {
return this.inputs.filter((slot: INodeInputSlot) => !(
slot.pos ||
(this.widgets?.length && isWidgetInputSlot(slot))
))
}
/**
* @internal The outputs that are not positioned with absolute coordinates.
*/
get #defaultVerticalOutputs() {
return this.outputs.filter((slot: INodeOutputSlot) => !slot.pos)
}
/**
* Gets the position of an input slot, in graph co-ordinates.
*
@@ -2902,7 +2923,8 @@ export class LGraphNode implements Positionable, IPinnable, IColorable {
// default vertical slots
const offsetX = LiteGraph.NODE_SLOT_HEIGHT * 0.5
const nodeOffsetY = this.constructor.slot_start_y || 0
const slotY = (slot + 0.7) * LiteGraph.NODE_SLOT_HEIGHT
const slotIndex = this.#defaultVerticalInputs.indexOf(this.inputs[slot])
const slotY = (slotIndex + 0.7) * LiteGraph.NODE_SLOT_HEIGHT
return [nodeX + offsetX, nodeY + slotY + nodeOffsetY]
}
@@ -2924,12 +2946,13 @@ export class LGraphNode implements Positionable, IPinnable, IColorable {
}
const outputPos = outputs?.[slot]?.pos
if (outputPos) return outputPos
if (outputPos) return [nodeX + outputPos[0], nodeY + outputPos[1]]
// default vertical slots
const offsetX = LiteGraph.NODE_SLOT_HEIGHT * 0.5
const nodeOffsetY = this.constructor.slot_start_y || 0
const slotY = (slot + 0.7) * LiteGraph.NODE_SLOT_HEIGHT
const slotIndex = this.#defaultVerticalOutputs.indexOf(this.outputs[slot])
const slotY = (slotIndex + 0.7) * LiteGraph.NODE_SLOT_HEIGHT
// TODO: Why +1?
return [nodeX + width + 1 - offsetX, nodeY + slotY + nodeOffsetY]