diff --git a/src/LGraphNode.ts b/src/LGraphNode.ts index fb85762dd..f1389d5fd 100644 --- a/src/LGraphNode.ts +++ b/src/LGraphNode.ts @@ -3413,40 +3413,18 @@ export class LGraphNode implements Positionable, IPinnable, IColorable { * When {@link LGraphNode.collapsed} is `true`, this method draws the node's collapsed slots. */ drawCollapsedSlots(ctx: CanvasRenderingContext2D): void { - // if collapsed - let input_slot: NodeInputSlot | undefined - let output_slot: NodeOutputSlot | undefined - - // get first connected slot to render + // Render the first connected slot only. for (const slot of this.#concreteInputs) { - if (slot.link == null) { - continue + if (slot.link != null) { + slot.drawCollapsed(ctx) + break } - input_slot = slot - break } for (const slot of this.#concreteOutputs) { - if (!slot.links || !slot.links.length) { - continue + if (slot.links?.length) { + slot.drawCollapsed(ctx) + break } - output_slot = slot - break - } - - if (input_slot) { - const x = 0 - const y = LiteGraph.NODE_TITLE_HEIGHT * -0.5 - input_slot.drawCollapsed(ctx, { - pos: [x, y], - }) - } - - if (output_slot) { - const x = this._collapsed_width ?? LiteGraph.NODE_COLLAPSED_WIDTH - const y = LiteGraph.NODE_TITLE_HEIGHT * -0.5 - output_slot.drawCollapsed(ctx, { - pos: [x, y], - }) } } diff --git a/src/node/NodeInputSlot.ts b/src/node/NodeInputSlot.ts index 87ed25dfe..baf4e3f76 100644 --- a/src/node/NodeInputSlot.ts +++ b/src/node/NodeInputSlot.ts @@ -1,4 +1,4 @@ -import type { INodeInputSlot, INodeOutputSlot, OptionalProps } from "@/interfaces" +import type { INodeInputSlot, INodeOutputSlot, OptionalProps, ReadOnlyPoint } from "@/interfaces" import type { LGraphNode } from "@/LGraphNode" import type { LinkId } from "@/LLink" @@ -13,6 +13,10 @@ export class NodeInputSlot extends NodeSlot implements INodeInputSlot { return !!this.widget } + get collapsedPos(): ReadOnlyPoint { + return [0, LiteGraph.NODE_TITLE_HEIGHT * -0.5] + } + constructor(slot: OptionalProps, node: LGraphNode) { super(slot, node) this.link = slot.link diff --git a/src/node/NodeOutputSlot.ts b/src/node/NodeOutputSlot.ts index f94b45e0b..6f3e1de1b 100644 --- a/src/node/NodeOutputSlot.ts +++ b/src/node/NodeOutputSlot.ts @@ -1,4 +1,4 @@ -import type { INodeInputSlot, INodeOutputSlot, OptionalProps } from "@/interfaces" +import type { INodeInputSlot, INodeOutputSlot, OptionalProps, ReadOnlyPoint } from "@/interfaces" import type { LGraphNode } from "@/LGraphNode" import type { LinkId } from "@/LLink" @@ -7,6 +7,8 @@ import { LiteGraph } from "@/litegraph" import { type IDrawOptions, NodeSlot } from "@/node/NodeSlot" export class NodeOutputSlot extends NodeSlot implements INodeOutputSlot { + #node: LGraphNode + links: LinkId[] | null _data?: unknown slot_index?: number @@ -15,11 +17,19 @@ export class NodeOutputSlot extends NodeSlot implements INodeOutputSlot { return false } + get collapsedPos(): ReadOnlyPoint { + return [ + this.#node._collapsed_width ?? LiteGraph.NODE_COLLAPSED_WIDTH, + LiteGraph.NODE_TITLE_HEIGHT * -0.5, + ] + } + constructor(slot: OptionalProps, node: LGraphNode) { super(slot, node) this.links = slot.links this._data = slot._data this.slot_index = slot.slot_index + this.#node = node } override isValidTarget(fromSlot: INodeInputSlot | INodeOutputSlot): boolean { diff --git a/src/node/NodeSlot.ts b/src/node/NodeSlot.ts index c84f7d5dc..93e1c4f1e 100644 --- a/src/node/NodeSlot.ts +++ b/src/node/NodeSlot.ts @@ -49,6 +49,9 @@ export abstract class NodeSlot implements INodeSlot { ]) } + /** The center point of this slot when the node is collapsed. */ + abstract get collapsedPos(): ReadOnlyPoint + #node: LGraphNode get node(): LGraphNode { return this.#node @@ -204,11 +207,11 @@ export abstract class NodeSlot implements INodeSlot { ctx.lineWidth = originalLineWidth } - drawCollapsed(ctx: CanvasRenderingContext2D, options: { pos: Point }) { - const [x, y] = options.pos + drawCollapsed(ctx: CanvasRenderingContext2D) { + const [x, y] = this.collapsedPos // Save original styles - const originalFillStyle = ctx.fillStyle + const { fillStyle } = ctx ctx.fillStyle = "#686" ctx.beginPath() @@ -234,6 +237,6 @@ export abstract class NodeSlot implements INodeSlot { ctx.fill() // Restore original styles - ctx.fillStyle = originalFillStyle + ctx.fillStyle = fillStyle } }