[Refactor] LGraphNode.drawCollapsedSlots (#500)

src/LGraphCanvas.ts

@@ -4782,55 +4782,7 @@ export class LGraphCanvas implements ConnectionColorContext {
 
       this.drawNodeWidgets(node, max_y, ctx)
     } else if (this.render_collapsed_slots) {
-      // if collapsed
+      node.drawCollapsedSlots(ctx)
-      let input_slot = null
-      let output_slot = null
-      let slot
-
-      // get first connected slot to render
-      if (node.inputs) {
-        for (let i = 0; i < node.inputs.length; i++) {
-          slot = node.inputs[i]
-          if (slot.link == null) {
-            continue
-          }
-          input_slot = slot
-          break
-        }
-      }
-      if (node.outputs) {
-        for (let i = 0; i < node.outputs.length; i++) {
-          slot = node.outputs[i]
-          if (!slot.links || !slot.links.length) {
-            continue
-          }
-          output_slot = slot
-        }
-      }
-
-      if (input_slot) {
-        let x = 0
-        let y = LiteGraph.NODE_TITLE_HEIGHT * -0.5 // center
-        if (horizontal) {
-          x = node._collapsed_width * 0.5
-          y = -LiteGraph.NODE_TITLE_HEIGHT
-        }
-        toClass(NodeInputSlot, input_slot).drawCollapsed(ctx, {
-          pos: [x, y],
-        })
-      }
-
-      if (output_slot) {
-        let x = node._collapsed_width
-        let y = LiteGraph.NODE_TITLE_HEIGHT * -0.5 // center
-        if (horizontal) {
-          x = node._collapsed_width * 0.5
-          y = 0
-        }
-        toClass(NodeOutputSlot, output_slot).drawCollapsed(ctx, {
-          pos: [x, y],
-        })
-      }
     }
 
     if (node.clip_area) {

src/LGraphNode.ts

@@ -3146,4 +3146,53 @@ export class LGraphNode implements Positionable, IPinnable {
     }
     ctx.restore()
   }
+
+  /**
+   * When {@link LGraphNode.collapsed} is `true`, this method draws the node's collapsed slots.
+   */
+  drawCollapsedSlots(ctx: CanvasRenderingContext2D): void {
+    // if collapsed
+    let input_slot: INodeInputSlot | null = null
+    let output_slot: INodeOutputSlot | null = null
+
+    // get first connected slot to render
+    for (const slot of this.inputs ?? []) {
+      if (slot.link == null) {
+        continue
+      }
+      input_slot = slot
+      break
+    }
+    for (const slot of this.outputs ?? []) {
+      if (!slot.links || !slot.links.length) {
+        continue
+      }
+      output_slot = slot
+      break
+    }
+
+    if (input_slot) {
+      let x = 0
+      let y = LiteGraph.NODE_TITLE_HEIGHT * -0.5 // center
+      if (this.horizontal) {
+        x = this._collapsed_width * 0.5
+        y = -LiteGraph.NODE_TITLE_HEIGHT
+      }
+      toClass(NodeInputSlot, input_slot).drawCollapsed(ctx, {
+        pos: [x, y],
+      })
+    }
+
+    if (output_slot) {
+      let x = this._collapsed_width
+      let y = LiteGraph.NODE_TITLE_HEIGHT * -0.5 // center
+      if (this.horizontal) {
+        x = this._collapsed_width * 0.5
+        y = 0
+      }
+      toClass(NodeOutputSlot, output_slot).drawCollapsed(ctx, {
+        pos: [x, y],
+      })
+    }
+  }
 }