diff --git a/src/LGraphCanvas.ts b/src/LGraphCanvas.ts index 698edfed7..bf2217d46 100644 --- a/src/LGraphCanvas.ts +++ b/src/LGraphCanvas.ts @@ -4295,11 +4295,7 @@ export class LGraphCanvas implements ConnectionColorContext { // render inputs and outputs if (!node.collapsed) { - const slotsBounds = node.layoutSlots() - const widgetStartY = slotsBounds ? slotsBounds[1] + slotsBounds[3] : 0 - node.layoutWidgets({ widgetStartY }) - node.layoutWidgetInputSlots() - + node.layout() node.drawSlots(ctx, { fromSlot: this.linkConnector.renderLinks[0]?.fromSlot, colorContext: this, @@ -4310,7 +4306,7 @@ export class LGraphCanvas implements ConnectionColorContext { ctx.textAlign = "left" ctx.globalAlpha = 1 - this.drawNodeWidgets(node, widgetStartY, ctx) + this.drawNodeWidgets(node, null, ctx) } else if (this.render_collapsed_slots) { node.drawCollapsedSlots(ctx) } @@ -5215,7 +5211,7 @@ export class LGraphCanvas implements ConnectionColorContext { */ drawNodeWidgets( node: LGraphNode, - posY: number, + _posY: null, ctx: CanvasRenderingContext2D, ): void { node.drawWidgets(ctx, { diff --git a/src/LGraphNode.ts b/src/LGraphNode.ts index 84ad98913..75d4a59cb 100644 --- a/src/LGraphNode.ts +++ b/src/LGraphNode.ts @@ -3467,7 +3467,7 @@ export class LGraphNode implements Positionable, IPinnable, IColorable { return [...this.inputs, ...this.outputs] } - layoutSlot(slot: INodeSlot, options: { + #layoutSlot(slot: INodeSlot, options: { slotIndex: number }): void { const { slotIndex } = options @@ -3485,7 +3485,7 @@ export class LGraphNode implements Positionable, IPinnable, IColorable { }) } - layoutSlots(): ReadOnlyRect | null { + #layoutSlots(): ReadOnlyRect | null { const slots: LayoutElement[] = [] 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} */ if (this.widgets?.length && isWidgetInputSlot(slot)) continue - this.layoutSlot(slot, { + this.#layoutSlot(slot, { slotIndex: i, }) if (slot._layoutElement) { @@ -3502,7 +3502,7 @@ export class LGraphNode implements Positionable, IPinnable, IColorable { } } for (const [i, slot] of this.outputs.entries()) { - this.layoutSlot(slot, { + this.#layoutSlot(slot, { slotIndex: i, }) if (slot._layoutElement) { @@ -3594,7 +3594,7 @@ export class LGraphNode implements Positionable, IPinnable, IColorable { * - {@link IBaseWidget.computedHeight} * - {@link IBaseWidget.y} */ - layoutWidgets(options: { widgetStartY: number }): void { + #layoutWidgets(options: { widgetStartY: number }): void { if (!this.widgets || !this.widgets.length) return const bodyHeight = this.bodyHeight @@ -3671,7 +3671,7 @@ export class LGraphNode implements Positionable, IPinnable, IColorable { /** * Lays out the node's widget input slots. */ - layoutWidgetInputSlots(): void { + #layoutWidgetInputSlots(): void { if (!this.widgets) return const slotByWidgetName = new Map() @@ -3690,10 +3690,17 @@ export class LGraphNode implements Positionable, IPinnable, IColorable { const actualSlot = this.inputs[slot.index] const offset = LiteGraph.NODE_SLOT_HEIGHT * 0.5 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. * @param ctx The canvas context to draw on