[Refactor] Move slot code out of LGraphNode (#981)

Moves collapsed node slot render code to the slot instances.

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
+    // Render the first connected slot only.
-    let input_slot: NodeInputSlot | undefined
-    let output_slot: NodeOutputSlot | undefined
-
-    // get first connected slot to render
     for (const slot of this.#concreteInputs) {
-      if (slot.link == null) {
+      if (slot.link != null) {
-        continue
+        slot.drawCollapsed(ctx)
+        break
       }
-      input_slot = slot
-      break
     }
     for (const slot of this.#concreteOutputs) {
-      if (!slot.links || !slot.links.length) {
+      if (slot.links?.length) {
-        continue
+        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],
-      })
     }
   }
 

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<INodeInputSlot, "boundingRect">, node: LGraphNode) {
     super(slot, node)
     this.link = slot.link

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<INodeOutputSlot, "boundingRect">, 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 {

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 }) {
+  drawCollapsed(ctx: CanvasRenderingContext2D) {
-    const [x, y] = options.pos
+    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
   }
 }