Add Subgraphs

src/LGraphNode.ts

@@ -16,21 +16,26 @@ import type {
   ISlotType,
   Point,
   Positionable,
+  ReadOnlyPoint,
   ReadOnlyRect,
   Rect,
   Size,
 } from "./interfaces"
 import type { LGraph } from "./LGraph"
 import type { Reroute, RerouteId } from "./Reroute"
+import type { SubgraphInputNode } from "./subgraph/SubgraphInputNode"
+import type { SubgraphOutputNode } from "./subgraph/SubgraphOutputNode"
 import type { CanvasMouseEvent } from "./types/events"
-import type { ISerialisedNode } from "./types/serialisation"
+import type { NodeLike } from "./types/NodeLike"
+import type { ISerialisedNode, SubgraphIO } from "./types/serialisation"
 import type { IBaseWidget, IWidgetOptions, TWidgetType, TWidgetValue } from "./types/widgets"
 
 import { getNodeInputOnPos, getNodeOutputOnPos } from "./canvas/measureSlots"
 import { NullGraphError } from "./infrastructure/NullGraphError"
+import { Rectangle } from "./infrastructure/Rectangle"
 import { BadgePosition, LGraphBadge } from "./LGraphBadge"
 import { LGraphCanvas } from "./LGraphCanvas"
-import { type LGraphNodeConstructor, LiteGraph } from "./litegraph"
+import { type LGraphNodeConstructor, LiteGraph, type SubgraphNode } from "./litegraph"
 import { LLink } from "./LLink"
 import { createBounds, isInRect, isInRectangle, isPointInRect, snapPoint } from "./measure"
 import { NodeInputSlot } from "./node/NodeInputSlot"
@@ -181,7 +186,7 @@ export interface LGraphNode {
  * @param type a type for the node
  */
 // eslint-disable-next-line @typescript-eslint/no-unsafe-declaration-merging
-export class LGraphNode implements Positionable, IPinnable, IColorable {
+export class LGraphNode implements NodeLike, Positionable, IPinnable, IColorable {
   // Static properties used by dynamic child classes
   static title?: string
   static MAX_CONSOLE?: number
@@ -206,6 +211,10 @@ export class LGraphNode implements Positionable, IPinnable, IColorable {
     return `normal ${LiteGraph.NODE_SUBTEXT_SIZE}px ${LiteGraph.NODE_FONT}`
   }
 
+  get displayType(): string {
+    return this.type
+  }
+
   graph: LGraph | null = null
   id: NodeId
   type: string = ""
@@ -338,6 +347,14 @@ export class LGraphNode implements Positionable, IPinnable, IColorable {
   selected?: boolean
   showAdvanced?: boolean
 
+  declare comfyClass?: string
+  declare isVirtualNode?: boolean
+  applyToGraph?(extraLinks?: LLink[]): void
+
+  isSubgraphNode(): this is SubgraphNode {
+    return false
+  }
+
   /** @inheritdoc {@link renderArea} */
   #renderArea: Float32Array = new Float32Array(4)
   /**
@@ -349,16 +366,23 @@ export class LGraphNode implements Positionable, IPinnable, IColorable {
   }
 
   /** @inheritdoc {@link boundingRect} */
-  #boundingRect: Float32Array = new Float32Array(4)
+  #boundingRect: Rectangle = new Rectangle()
+
   /**
    * Cached node position & area as `x, y, width, height`.  Includes changes made by {@link onBounding}, if present.
    *
    * Determines the node hitbox and other rendering effects.  Calculated once at the start of every frame.
    */
-  get boundingRect(): ReadOnlyRect {
+  get boundingRect(): Rectangle {
     return this.#boundingRect
   }
 
+  /** The offset from {@link pos} to the top-left of {@link boundingRect}. */
+  get boundingOffset(): ReadOnlyPoint {
+    const { pos: [posX, posY], boundingRect: [bX, bY] } = this
+    return [posX - bX, posY - bY]
+  }
+
   /** {@link pos} and {@link size} values are backed by this {@link Rect}. */
   _posSize: Float32Array = new Float32Array(4)
   _pos: Point = this._posSize.subarray(0, 2)
@@ -443,16 +467,16 @@ export class LGraphNode implements Positionable, IPinnable, IColorable {
     this: LGraphNode,
     target_slot: number,
     type: unknown,
-    output: INodeOutputSlot,
-    node: LGraphNode,
+    output: INodeOutputSlot | SubgraphIO,
+    node: LGraphNode | SubgraphInputNode,
     slot: number,
   ): boolean
   onConnectOutput?(
     this: LGraphNode,
     slot: number,
     type: unknown,
-    input: INodeInputSlot,
-    target_node: number | LGraphNode,
+    input: INodeInputSlot | SubgraphIO,
+    target_node: number | LGraphNode | SubgraphOutputNode,
     target_slot: number,
   ): boolean
   onResize?(this: LGraphNode, size: Size): void
@@ -2360,9 +2384,9 @@ export class LGraphNode implements Positionable, IPinnable, IColorable {
   }
 
   canConnectTo(
-    node: LGraphNode,
-    toSlot: INodeInputSlot,
-    fromSlot: INodeOutputSlot,
+    node: NodeLike,
+    toSlot: INodeInputSlot | SubgraphIO,
+    fromSlot: INodeOutputSlot | SubgraphIO,
   ) {
     return this.id !== node.id && LiteGraph.isValidConnection(fromSlot.type, toSlot.type)
   }
@@ -2572,7 +2596,6 @@ export class LGraphNode implements Positionable, IPinnable, IColorable {
 
     this.setDirtyCanvas(false, true)
     graph.afterChange()
-    graph.connectionChange(this)
 
     return link
   }
@@ -2740,7 +2763,6 @@ export class LGraphNode implements Positionable, IPinnable, IColorable {
     }
 
     this.setDirtyCanvas(false, true)
-    graph.connectionChange(this)
     return true
   }
 
@@ -2821,7 +2843,6 @@ export class LGraphNode implements Positionable, IPinnable, IColorable {
     }
 
     this.setDirtyCanvas(false, true)
-    graph?.connectionChange(this)
     return true
   }
 

src/LLink.ts

@@ -9,7 +9,9 @@ import type {
 } from "./interfaces"
 import type { LGraphNode, NodeId } from "./LGraphNode"
 import type { Reroute, RerouteId } from "./Reroute"
-import type { Serialisable, SerialisableLLink } from "./types/serialisation"
+import type { Serialisable, SerialisableLLink, SubgraphIO } from "./types/serialisation"
+
+import { SUBGRAPH_INPUT_ID, SUBGRAPH_OUTPUT_ID } from "@/constants"
 
 export type LinkId = number
 
@@ -22,18 +24,54 @@ export type SerialisedLLinkArray = [
   type: ISlotType,
 ]
 
-export interface ResolvedConnection {
+// Resolved connection union; eliminates subgraph in/out as a possibility
+export type ResolvedConnection = BaseResolvedConnection &
+  (
+    (ResolvedSubgraphInput & ResolvedNormalOutput) |
+    (ResolvedNormalInput & ResolvedSubgraphOutput) |
+    (ResolvedNormalInput & ResolvedNormalOutput)
+  )
+
+interface BaseResolvedConnection {
+  link: LLink
+  inputNode?: LGraphNode
+  input?: INodeInputSlot
+  outputNode?: LGraphNode
+  output?: INodeOutputSlot
+  subgraphOutput?: SubgraphIO
+  subgraphInput?: SubgraphIO
+}
+
+interface ResolvedNormalInput {
   inputNode: LGraphNode | undefined
-  outputNode: LGraphNode | undefined
   input: INodeInputSlot | undefined
+  subgraphOutput?: undefined
+}
+
+interface ResolvedNormalOutput {
+  outputNode: LGraphNode | undefined
   output: INodeOutputSlot | undefined
-  link: LLink
+  subgraphInput?: undefined
 }
 
-type BasicReadonlyNetwork = Pick<ReadonlyLinkNetwork, "getNodeById" | "links" | "getLink">
+interface ResolvedSubgraphInput {
+  inputNode?: undefined
+  input?: undefined
+  subgraphOutput: SubgraphIO
+}
+
+interface ResolvedSubgraphOutput {
+  outputNode?: undefined
+  output?: undefined
+  subgraphInput: SubgraphIO
+}
+
+type BasicReadonlyNetwork = Pick<ReadonlyLinkNetwork, "getNodeById" | "links" | "getLink" | "inputNode" | "outputNode">
 
 // this is the class in charge of storing link information
 export class LLink implements LinkSegment, Serialisable<SerialisableLLink> {
+  static _drawDebug = false
+
   /** Link ID */
   id: LinkId
   parentId?: RerouteId
@@ -83,6 +121,16 @@ export class LLink implements LinkSegment, Serialisable<SerialisableLLink> {
     return this.isFloatingOutput || this.isFloatingInput
   }
 
+  /** `true` if this link is connected to a subgraph input node (the actual origin is in a different graph). */
+  get originIsIoNode(): boolean {
+    return this.origin_id === SUBGRAPH_INPUT_ID
+  }
+
+  /** `true` if this link is connected to a subgraph output node (the actual target is in a different graph). */
+  get targetIsIoNode(): boolean {
+    return this.target_id === SUBGRAPH_OUTPUT_ID
+  }
+
   constructor(
     id: LinkId,
     type: ISlotType,
@@ -230,10 +278,20 @@ export class LLink implements LinkSegment, Serialisable<SerialisableLLink> {
    */
   resolve(network: BasicReadonlyNetwork): ResolvedConnection {
     const inputNode = this.target_id === -1 ? undefined : network.getNodeById(this.target_id) ?? undefined
-    const outputNode = this.origin_id === -1 ? undefined : network.getNodeById(this.origin_id) ?? undefined
     const input = inputNode?.inputs[this.target_slot]
+    const subgraphInput = this.originIsIoNode ? network.inputNode?.slots[this.origin_slot] : undefined
+    if (subgraphInput) {
+      return { inputNode, input, subgraphInput, link: this }
+    }
+
+    const outputNode = this.origin_id === -1 ? undefined : network.getNodeById(this.origin_id) ?? undefined
     const output = outputNode?.outputs[this.origin_slot]
-    return { inputNode, outputNode, input, output, link: this }
+    const subgraphOutput = this.targetIsIoNode ? network.outputNode?.slots[this.target_slot] : undefined
+    if (subgraphOutput) {
+      return { outputNode, output, subgraphInput: undefined, subgraphOutput, link: this }
+    }
+
+    return { inputNode, outputNode, input, output, subgraphInput, subgraphOutput, link: this }
   }
 
   configure(o: LLink | SerialisedLLinkArray) {

src/LiteGraphGlobal.ts

@@ -5,13 +5,16 @@ import { ContextMenu } from "./ContextMenu"
 import { CurveEditor } from "./CurveEditor"
 import { DragAndScale } from "./DragAndScale"
 import { LabelPosition, SlotDirection, SlotShape, SlotType } from "./draw"
+import { Rectangle } from "./infrastructure/Rectangle"
 import { LGraph } from "./LGraph"
 import { LGraphCanvas } from "./LGraphCanvas"
 import { LGraphGroup } from "./LGraphGroup"
 import { LGraphNode } from "./LGraphNode"
 import { LLink } from "./LLink"
 import { distance, isInsideRectangle, overlapBounding } from "./measure"
 import { Reroute } from "./Reroute"
+import { SubgraphIONodeBase } from "./subgraph/SubgraphIONodeBase"
+import { SubgraphSlot } from "./subgraph/SubgraphSlotBase"
 import {
   LGraphEventMode,
   LinkDirection,
@@ -324,7 +327,21 @@ export class LiteGraphGlobal {
   ContextMenu = ContextMenu
   CurveEditor = CurveEditor
   Reroute = Reroute
-  InputIndicators = InputIndicators
+
+  constructor() {
+    Object.defineProperty(this, "Classes", { writable: false })
+  }
+
+  Classes = {
+    get SubgraphSlot() { return SubgraphSlot },
+    get SubgraphIONodeBase() { return SubgraphIONodeBase },
+
+    // Rich drawing
+    get Rectangle() { return Rectangle },
+
+    // Debug / helpers
+    get InputIndicators() { return InputIndicators },
+  }
 
   onNodeTypeRegistered?(type: string, base_class: typeof LGraphNode): void
   onNodeTypeReplaced?(type: string, base_class: typeof LGraphNode, prev: unknown): void

src/canvas/LinkConnector.ts

@@ -4,6 +4,10 @@ import type { ConnectingLink, ItemLocator, LinkNetwork, LinkSegment } from "@/in
 import type { INodeInputSlot, INodeOutputSlot } from "@/interfaces"
 import type { LGraphNode } from "@/LGraphNode"
 import type { Reroute } from "@/Reroute"
+import type { SubgraphInput } from "@/subgraph/SubgraphInput"
+import type { SubgraphInputNode } from "@/subgraph/SubgraphInputNode"
+import type { SubgraphOutput } from "@/subgraph/SubgraphOutput"
+import type { SubgraphOutputNode } from "@/subgraph/SubgraphOutputNode"
 import type { CanvasPointerEvent } from "@/types/events"
 import type { IBaseWidget } from "@/types/widgets"
 
@@ -15,7 +19,9 @@ import { FloatingRenderLink } from "./FloatingRenderLink"
 import { MovingInputLink } from "./MovingInputLink"
 import { MovingLinkBase } from "./MovingLinkBase"
 import { MovingOutputLink } from "./MovingOutputLink"
+import { ToInputFromIoNodeLink } from "./ToInputFromIoNodeLink"
 import { ToInputRenderLink } from "./ToInputRenderLink"
+import { ToOutputFromIoNodeLink } from "./ToOutputFromIoNodeLink"
 import { ToOutputFromRerouteLink } from "./ToOutputFromRerouteLink"
 import { ToOutputRenderLink } from "./ToOutputRenderLink"
 
@@ -39,7 +45,14 @@ export interface LinkConnectorState {
 }
 
 /** Discriminated union to simplify type narrowing. */
-type RenderLinkUnion = MovingInputLink | MovingOutputLink | FloatingRenderLink | ToInputRenderLink | ToOutputRenderLink
+type RenderLinkUnion =
+  | MovingInputLink
+  | MovingOutputLink
+  | FloatingRenderLink
+  | ToInputRenderLink
+  | ToOutputRenderLink
+  | ToInputFromIoNodeLink
+  | ToOutputFromIoNodeLink
 
 export interface LinkConnectorExport {
   renderLinks: RenderLink[]
@@ -261,6 +274,24 @@ export class LinkConnector {
     this.#setLegacyLinks(true)
   }
 
+  dragNewFromSubgraphInput(network: LinkNetwork, inputNode: SubgraphInputNode, input: SubgraphInput, fromReroute?: Reroute): void {
+    if (this.isConnecting) throw new Error("Already dragging links.")
+
+    const renderLink = new ToInputFromIoNodeLink(network, inputNode, input, fromReroute)
+    this.renderLinks.push(renderLink)
+
+    this.state.connectingTo = "input"
+  }
+
+  dragNewFromSubgraphOutput(network: LinkNetwork, outputNode: SubgraphOutputNode, output: SubgraphOutput, fromReroute?: Reroute): void {
+    if (this.isConnecting) throw new Error("Already dragging links.")
+
+    const renderLink = new ToOutputFromIoNodeLink(network, outputNode, output, fromReroute)
+    this.renderLinks.push(renderLink)
+
+    this.state.connectingTo = "output"
+  }
+
   /**
    * Drags a new link from a reroute to an input slot.
    * @param network The network that the link being connected belongs to
@@ -523,7 +554,8 @@ export class LinkConnector {
     if (connectingTo === "output") {
       // Dropping new output link
       const output = node.findOutputByType(firstLink.fromSlot.type)?.slot
-      if (!output) {
+      console.debug("out", node, output, firstLink.fromSlot)
+      if (output === undefined) {
         console.warn(`Could not find slot for link type: [${firstLink.fromSlot.type}].`)
         return
       }
@@ -532,7 +564,8 @@ export class LinkConnector {
     } else if (connectingTo === "input") {
       // Dropping new input link
       const input = node.findInputByType(firstLink.fromSlot.type)?.slot
-      if (!input) {
+      console.debug("in", node, input, firstLink.fromSlot)
+      if (input === undefined) {
         console.warn(`Could not find slot for link type: [${firstLink.fromSlot.type}].`)
         return
       }
@@ -616,7 +649,7 @@ export class LinkConnector {
       const afterRerouteId = link instanceof MovingLinkBase ? link.link?.parentId : link.fromReroute?.id
 
       return {
-        node: link.node,
+        node: link.node as LGraphNode,
         slot: link.fromSlotIndex,
         input,
         output,
@@ -690,7 +723,7 @@ export class LinkConnector {
 
 /** Validates that a single {@link RenderLink} can be dropped on the specified reroute. */
 function canConnectInputLinkToReroute(
-  link: ToInputRenderLink | MovingInputLink | FloatingRenderLink,
+  link: ToInputRenderLink | MovingInputLink | FloatingRenderLink | ToInputFromIoNodeLink,
   inputNode: LGraphNode,
   input: INodeInputSlot,
   reroute: Reroute,