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

[Refactor] Add LGraphNode.layout (#907)

Browse Source 
Moves layout of LGraphNode slot and widget to `LGraphNode.layout`.
Codesearch shows that there is currently no usage on posY arg, so we can
just pass null to it instead.
https://cs.comfy.org/search?q=context:global+drawNodeWidgets&patternType=keyword&sm=0
This commit is contained in:
Chenlei Hu
2025-04-07 15:40:58 -04:00
committed by GitHub
parent 24dfbe8b2b
commit d77100c401
2 changed files with 17 additions and 14 deletions
Download Patch File Download Diff File Expand all files Collapse all files

10
src/LGraphCanvas.ts
View File

@@ -4295,11 +4295,7 @@ export class LGraphCanvas implements ConnectionColorContext {
// render inputs and outputs // render inputs and outputs
if (!node.collapsed) { if (!node.collapsed) {
const slotsBounds = node.layoutSlots() node.layout()
const widgetStartY = slotsBounds ? slotsBounds[1] + slotsBounds[3] : 0
node.layoutWidgets({ widgetStartY })
node.layoutWidgetInputSlots()
node.drawSlots(ctx, { node.drawSlots(ctx, {
fromSlot: this.linkConnector.renderLinks[0]?.fromSlot, fromSlot: this.linkConnector.renderLinks[0]?.fromSlot,
colorContext: this, colorContext: this,
@@ -4310,7 +4306,7 @@ export class LGraphCanvas implements ConnectionColorContext {
ctx.textAlign = "left" ctx.textAlign = "left"
ctx.globalAlpha = 1 ctx.globalAlpha = 1
this.drawNodeWidgets(node, widgetStartY, ctx) this.drawNodeWidgets(node, null, ctx)
} else if (this.render_collapsed_slots) { } else if (this.render_collapsed_slots) {
node.drawCollapsedSlots(ctx) node.drawCollapsedSlots(ctx)
} }
@@ -5215,7 +5211,7 @@ export class LGraphCanvas implements ConnectionColorContext {
*/ */
drawNodeWidgets( drawNodeWidgets(
node: LGraphNode, node: LGraphNode,
posY: number, _posY: null,
ctx: CanvasRenderingContext2D, ctx: CanvasRenderingContext2D,
): void { ): void {
node.drawWidgets(ctx, { node.drawWidgets(ctx, {

21
src/LGraphNode.ts
View File

@@ -3467,7 +3467,7 @@ export class LGraphNode implements Positionable, IPinnable, IColorable {
return [...this.inputs, ...this.outputs] return [...this.inputs, ...this.outputs]
} }
layoutSlot(slot: INodeSlot, options: { #layoutSlot(slot: INodeSlot, options: {
slotIndex: number slotIndex: number
}): void { }): void {
const { slotIndex } = options const { slotIndex } = options
@@ -3485,7 +3485,7 @@ export class LGraphNode implements Positionable, IPinnable, IColorable {
}) })
} }
layoutSlots(): ReadOnlyRect | null { #layoutSlots(): ReadOnlyRect | null {
const slots: LayoutElement<INodeSlot>[] = [] const slots: LayoutElement<INodeSlot>[] = []
for (const [i, slot] of this.inputs.entries()) { for (const [i, slot] of this.inputs.entries()) {
@@ -3494,7 +3494,7 @@ export class LGraphNode implements Positionable, IPinnable, IColorable {
/** Widget input slots are handled in {@link layoutWidgetInputSlots} */ /** Widget input slots are handled in {@link layoutWidgetInputSlots} */
if (this.widgets?.length && isWidgetInputSlot(slot)) continue if (this.widgets?.length && isWidgetInputSlot(slot)) continue
this.layoutSlot(slot, { this.#layoutSlot(slot, {
slotIndex: i, slotIndex: i,
}) })
if (slot._layoutElement) { if (slot._layoutElement) {
@@ -3502,7 +3502,7 @@ export class LGraphNode implements Positionable, IPinnable, IColorable {
} }
} }
for (const [i, slot] of this.outputs.entries()) { for (const [i, slot] of this.outputs.entries()) {
this.layoutSlot(slot, { this.#layoutSlot(slot, {
slotIndex: i, slotIndex: i,
}) })
if (slot._layoutElement) { if (slot._layoutElement) {
@@ -3594,7 +3594,7 @@ export class LGraphNode implements Positionable, IPinnable, IColorable {
* - {@link IBaseWidget.computedHeight} * - {@link IBaseWidget.computedHeight}
* - {@link IBaseWidget.y} * - {@link IBaseWidget.y}
*/ */
layoutWidgets(options: { widgetStartY: number }): void { #layoutWidgets(options: { widgetStartY: number }): void {
if (!this.widgets || !this.widgets.length) return if (!this.widgets || !this.widgets.length) return
const bodyHeight = this.bodyHeight const bodyHeight = this.bodyHeight
@@ -3671,7 +3671,7 @@ export class LGraphNode implements Positionable, IPinnable, IColorable {
/** /**
* Lays out the node's widget input slots. * Lays out the node's widget input slots.
*/ */
layoutWidgetInputSlots(): void { #layoutWidgetInputSlots(): void {
if (!this.widgets) return if (!this.widgets) return
const slotByWidgetName = new Map<string, INodeInputSlot & { index: number }>() const slotByWidgetName = new Map<string, INodeInputSlot & { index: number }>()
@@ -3690,10 +3690,17 @@ export class LGraphNode implements Positionable, IPinnable, IColorable {
const actualSlot = this.inputs[slot.index] const actualSlot = this.inputs[slot.index]
const offset = LiteGraph.NODE_SLOT_HEIGHT * 0.5 const offset = LiteGraph.NODE_SLOT_HEIGHT * 0.5
actualSlot.pos = [offset, widget.y + offset] actualSlot.pos = [offset, widget.y + offset]
this.layoutSlot(actualSlot, { slotIndex: slot.index }) this.#layoutSlot(actualSlot, { slotIndex: slot.index })
} }
} }
layout(): void {
const slotsBounds = this.#layoutSlots()
const widgetStartY = slotsBounds ? slotsBounds[1] + slotsBounds[3] : 0
this.#layoutWidgets({ widgetStartY })
this.#layoutWidgetInputSlots()
}
/** /**
* Draws a progress bar on the node. * Draws a progress bar on the node.
* @param ctx The canvas context to draw on * @param ctx The canvas context to draw on