Add files using upload-large-folder tool

.gitattributes

@@ -255,3 +255,25 @@ comfyui_layerstyle/workflow/1280x720_seven_person.jpg filter=lfs diff=lfs merge=
 comfyui_layerstyle/workflow/1280x720car.jpg filter=lfs diff=lfs merge=lfs -text
 comfyui_layerstyle/workflow/1280x768_city.png filter=lfs diff=lfs merge=lfs -text
 comfyui_layerstyle/workflow/1344x768_girl2.png filter=lfs diff=lfs merge=lfs -text
+comfyui_layerstyle/workflow/1344x768_redcar.png filter=lfs diff=lfs merge=lfs -text
+comfyui_layerstyle/workflow/1920x1080table.png filter=lfs diff=lfs merge=lfs -text
+comfyui_layerstyle/image/segment_anything_ultra_node.jpg filter=lfs diff=lfs merge=lfs -text
+comfyui_layerstyle/workflow/512x512.png filter=lfs diff=lfs merge=lfs -text
+comfyui_layerstyle/workflow/768x1344_dress.png filter=lfs diff=lfs merge=lfs -text
+comfyui_layerstyle/workflow/768x1344_beach.png filter=lfs diff=lfs merge=lfs -text
+comfyui_layerstyle/workflow/fox_512x512.png filter=lfs diff=lfs merge=lfs -text
+comfyui_layerstyle/workflow/girl_dino_1024.png filter=lfs diff=lfs merge=lfs -text
+comfyui_layerstyle/py/__pycache__/imagefunc.cpython-312.pyc filter=lfs diff=lfs merge=lfs -text
+comfyui_layerstyle/py/__pycache__/color_name.cpython-312.pyc filter=lfs diff=lfs merge=lfs -text
+ComfyUI_Qwen2-VL-Instruct/examples/Chat_with_single_image_workflow.png filter=lfs diff=lfs merge=lfs -text
+ComfyUI_Qwen2-VL-Instruct/examples/Chat_with_video_workflow.png filter=lfs diff=lfs merge=lfs -text
+ComfyUI_Qwen2-VL-Instruct/examples/Chat_with_multiple_images_workflow.png filter=lfs diff=lfs merge=lfs -text
+ComfyUI_Qwen2-VL-Instruct/examples/Chat_with_text_workflow.png filter=lfs diff=lfs merge=lfs -text
+ComfyUI_Qwen2-VL-Instruct/examples/ComfyUI_00509_.png filter=lfs diff=lfs merge=lfs -text
+ComfyUI_Qwen2-VL-Instruct/examples/ComfyUI_00532_.png filter=lfs diff=lfs merge=lfs -text
+ComfyUI_Qwen2-VL-Instruct/examples/ComfyUI_00508_.png filter=lfs diff=lfs merge=lfs -text
+comfyui_tensorrt/readme_images/image1.png filter=lfs diff=lfs merge=lfs -text
+comfyui_tensorrt/readme_images/image10.png filter=lfs diff=lfs merge=lfs -text
+comfyui_tensorrt/readme_images/image6.png filter=lfs diff=lfs merge=lfs -text
+comfyui_tensorrt/readme_images/image4.png filter=lfs diff=lfs merge=lfs -text
+comfyui_tensorrt/readme_images/image11.png filter=lfs diff=lfs merge=lfs -text

comfyui_layerstyle/py/__pycache__/color_name.cpython-312.pyc

@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:16469a66469399acb0769c5d47b332f5cd184833e183d28ab4766046c8ec1300
+size 102641

comfyui_layerstyle/py/__pycache__/imagefunc.cpython-312.pyc

@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:03e3bcec87456dfadefc28a7d89d2d66a374b44f340e25222d3b2e68aedee619
+size 151881

rgthree-comfy/src_web/comfyui/any_switch.ts

@@ -0,0 +1,101 @@
+import type { INodeInputSlot, INodeOutputSlot, LLink } from "typings/litegraph.js";
+import type { ComfyApp, ComfyNodeConstructor, ComfyObjectInfo } from "typings/comfy.js";
+
+import { app } from "scripts/app.js";
+import { IoDirection, addConnectionLayoutSupport, followConnectionUntilType } from "./utils.js";
+import { RgthreeBaseServerNode } from "./base_node.js";
+import { NodeTypesString } from "./constants.js";
+import { removeUnusedInputsFromEnd } from "./utils_inputs_outputs.js";
+import { debounce } from "rgthree/common/shared_utils.js";
+
+class RgthreeAnySwitch extends RgthreeBaseServerNode {
+  static override title = NodeTypesString.ANY_SWITCH;
+  static override type = NodeTypesString.ANY_SWITCH;
+  static comfyClass = NodeTypesString.ANY_SWITCH;
+
+  private stabilizeBound = this.stabilize.bind(this);
+  private nodeType: string | string[] | null = null;
+
+  constructor(title = RgthreeAnySwitch.title) {
+    super(title);
+    // Adding five. Note, configure will add as many as was in the stored workflow automatically.
+    this.addAnyInput(5);
+  }
+
+  override onConnectionsChange(
+    type: number,
+    slotIndex: number,
+    isConnected: boolean,
+    linkInfo: LLink,
+    ioSlot: INodeOutputSlot | INodeInputSlot,
+  ) {
+    super.onConnectionsChange?.(type, slotIndex, isConnected, linkInfo, ioSlot);
+    this.scheduleStabilize();
+  }
+
+  onConnectionsChainChange() {
+    this.scheduleStabilize();
+  }
+
+  scheduleStabilize(ms = 64) {
+    return debounce(this.stabilizeBound, ms);
+  }
+
+  private addAnyInput(num = 1) {
+    for (let i = 0; i < num; i++) {
+      this.addInput(
+        `any_${String(this.inputs.length + 1).padStart(2, "0")}`,
+        (this.nodeType || "*") as string,
+      );
+    }
+  }
+
+  stabilize() {
+    // First, clean up the dynamic number of inputs.
+    removeUnusedInputsFromEnd(this, 4);
+    this.addAnyInput();
+
+    // We prefer the inputs, then the output.
+    let connectedType = followConnectionUntilType(this, IoDirection.INPUT, undefined, true);
+    if (!connectedType) {
+      connectedType = followConnectionUntilType(this, IoDirection.OUTPUT, undefined, true);
+    }
+    // TODO: What this doesn't do is broadcast to other nodes when its type changes. Reroute node
+    // does, but, for now, if this was connected to another Any Switch, say, the second one wouldn't
+    // change its type when the first does. The user would need to change the connections.
+    this.nodeType = connectedType?.type || "*";
+    for (const input of this.inputs) {
+      input.type = this.nodeType as string; // So, types can indeed be arrays,,
+    }
+    for (const output of this.outputs) {
+      output.type = this.nodeType as string; // So, types can indeed be arrays,,
+      output.label =
+        output.type === "RGTHREE_CONTEXT"
+          ? "CONTEXT"
+          : Array.isArray(this.nodeType) || this.nodeType.includes(",")
+          ? connectedType?.label || String(this.nodeType)
+          : String(this.nodeType);
+    }
+  }
+
+  static override setUp(comfyClass: ComfyNodeConstructor, nodeData: ComfyObjectInfo) {
+    RgthreeBaseServerNode.registerForOverride(comfyClass, nodeData, RgthreeAnySwitch);
+    addConnectionLayoutSupport(RgthreeAnySwitch, app, [
+      ["Left", "Right"],
+      ["Right", "Left"],
+    ]);
+  }
+}
+
+app.registerExtension({
+  name: "rgthree.AnySwitch",
+  async beforeRegisterNodeDef(
+    nodeType: ComfyNodeConstructor,
+    nodeData: ComfyObjectInfo,
+    app: ComfyApp,
+  ) {
+    if (nodeData.name === "Any Switch (rgthree)") {
+      RgthreeAnySwitch.setUp(nodeType, nodeData);
+    }
+  },
+});

rgthree-comfy/src_web/comfyui/base_any_input_connected_node.ts

@@ -0,0 +1,345 @@
+import type { RgthreeBaseVirtualNodeConstructor } from "typings/rgthree.js";
+import type {
+  Vector2,
+  LLink,
+  INodeInputSlot,
+  INodeOutputSlot,
+  LGraphNode as TLGraphNode,
+  IWidget,
+} from "typings/litegraph.js";
+
+import { app } from "scripts/app.js";
+import { RgthreeBaseVirtualNode } from "./base_node.js";
+import { rgthree } from "./rgthree.js";
+
+import {
+  PassThroughFollowing,
+  addConnectionLayoutSupport,
+  addMenuItem,
+  getConnectedInputNodes,
+  getConnectedInputNodesAndFilterPassThroughs,
+  getConnectedOutputNodes,
+  getConnectedOutputNodesAndFilterPassThroughs,
+} from "./utils.js";
+
+/**
+ * A Virtual Node that allows any node's output to connect to it.
+ */
+export class BaseAnyInputConnectedNode extends RgthreeBaseVirtualNode {
+  override isVirtualNode = true;
+
+  /**
+   * Whether inputs show the immediate nodes, or follow and show connected nodes through
+   * passthrough nodes.
+   */
+  readonly inputsPassThroughFollowing: PassThroughFollowing = PassThroughFollowing.NONE;
+
+  debouncerTempWidth: number = 0;
+  schedulePromise: Promise<void> | null = null;
+
+  constructor(title = BaseAnyInputConnectedNode.title) {
+    super(title);
+  }
+
+  override onConstructed() {
+    this.addInput("", "*");
+    return super.onConstructed();
+  }
+
+  override clone() {
+    const cloned = super.clone();
+    // Copying to clipboard (and also, creating node templates) work by cloning nodes and, for some
+    // reason, it manually manipulates the cloned data. So, we want to keep the present input slots
+    // so if it's pasted/templatized the data is correct. Otherwise, clear the inputs and so the new
+    // node is ready to go, fresh.
+    if (!rgthree.canvasCurrentlyCopyingToClipboardWithMultipleNodes) {
+      while (cloned.inputs.length > 1) {
+        cloned.removeInput(cloned.inputs.length - 1);
+      }
+      if (cloned.inputs[0]) {
+        cloned.inputs[0].label = "";
+      }
+    }
+    return cloned;
+  }
+
+  /**
+   * Schedules a promise to run a stabilization, debouncing duplicate requests.
+   */
+  scheduleStabilizeWidgets(ms = 100) {
+    if (!this.schedulePromise) {
+      this.schedulePromise = new Promise((resolve) => {
+        setTimeout(() => {
+          this.schedulePromise = null;
+          this.doStablization();
+          resolve();
+        }, ms);
+      });
+    }
+    return this.schedulePromise;
+  }
+
+  /**
+   * Ensures we have at least one empty input at the end, returns true if changes were made, or false
+   * if no changes were needed.
+   */
+  private stabilizeInputsOutputs() : boolean {
+    let changed = false;
+    const hasEmptyInput = !this.inputs[this.inputs.length - 1]?.link;
+    if (!hasEmptyInput) {
+      this.addInput("", "*");
+      changed = true;
+    }
+    for (let index = this.inputs.length - 2; index >= 0; index--) {
+      const input = this.inputs[index]!;
+      if (!input.link) {
+        this.removeInput(index);
+        changed = true;
+      } else {
+        const node = getConnectedInputNodesAndFilterPassThroughs(
+          this,
+          this,
+          index,
+          this.inputsPassThroughFollowing,
+        )[0];
+        const newName = node?.title || "";
+        if (input.name !== newName) {
+          input.name = node?.title || "";
+          changed = true;
+        }
+      }
+    }
+    return changed;
+  }
+
+  /**
+   * Stabilizes the node's inputs and widgets.
+   */
+  private doStablization() {
+    if (!this.graph) {
+      return;
+    }
+    let dirty = false;
+
+    // When we add/remove widgets, litegraph is going to mess up the size, so we
+    // store it so we can retrieve it in computeSize. Hacky..
+    (this as any)._tempWidth = this.size[0];
+
+    dirty = this.stabilizeInputsOutputs();
+    const linkedNodes = getConnectedInputNodesAndFilterPassThroughs(this);
+    dirty = this.handleLinkedNodesStabilization(linkedNodes) || dirty;
+
+    // Only mark dirty if something's changed.
+    if (dirty) {
+      app.graph.setDirtyCanvas(true, true);
+    }
+
+    // Schedule another stabilization in the future.
+    this.scheduleStabilizeWidgets(500);
+  }
+
+  /**
+   * Handles stabilization of linked nodes. To be overridden. Should return true if changes were
+   * made, or false if no changes were needed.
+   */
+  handleLinkedNodesStabilization(linkedNodes: TLGraphNode[]) : boolean {
+    linkedNodes; // No-op, but makes overridding in VSCode cleaner.
+    throw new Error("handleLinkedNodesStabilization should be overridden.");
+  }
+
+  onConnectionsChainChange() {
+    this.scheduleStabilizeWidgets();
+  }
+
+  override onConnectionsChange(
+    type: number,
+    index: number,
+    connected: boolean,
+    linkInfo: LLink,
+    ioSlot: INodeOutputSlot | INodeInputSlot,
+  ) {
+    super.onConnectionsChange &&
+      super.onConnectionsChange(type, index, connected, linkInfo, ioSlot);
+    if (!linkInfo) return;
+    // Follow outputs to see if we need to trigger an onConnectionChange.
+    const connectedNodes = getConnectedOutputNodesAndFilterPassThroughs(this);
+    for (const node of connectedNodes) {
+      if ((node as BaseAnyInputConnectedNode).onConnectionsChainChange) {
+        (node as BaseAnyInputConnectedNode).onConnectionsChainChange();
+      }
+    }
+    this.scheduleStabilizeWidgets();
+  }
+
+  override removeInput(slot: number) {
+    (this as any)._tempWidth = this.size[0];
+    return super.removeInput(slot);
+  }
+
+  override addInput(name: string, type: string | -1, extra_info?: Partial<INodeInputSlot>) {
+    (this as any)._tempWidth = this.size[0];
+    return super.addInput(name, type, extra_info);
+  }
+
+  override addWidget<T extends IWidget>(
+    type: T["type"],
+    name: string,
+    value: T["value"],
+    callback?: T["callback"] | string,
+    options?: T["options"],
+  ) {
+    (this as any)._tempWidth = this.size[0];
+    return super.addWidget(type, name, value, callback, options);
+  }
+
+  /**
+   * Guess this doesn't exist in Litegraph...
+   */
+  override removeWidget(widgetOrSlot?: IWidget | number) {
+    (this as any)._tempWidth = this.size[0];
+    super.removeWidget(widgetOrSlot);
+  }
+
+  override computeSize(out: Vector2) {
+    let size = super.computeSize(out);
+    if ((this as any)._tempWidth) {
+      size[0] = (this as any)._tempWidth;
+      // We sometimes get repeated calls to compute size, so debounce before clearing.
+      this.debouncerTempWidth && clearTimeout(this.debouncerTempWidth);
+      this.debouncerTempWidth = setTimeout(() => {
+        (this as any)._tempWidth = null;
+      }, 32);
+    }
+    // If we're collapsed, then subtract the total calculated height of the other input slots.
+    if (this.properties["collapse_connections"]) {
+      const rows = Math.max(this.inputs?.length || 0, this.outputs?.length || 0, 1) - 1;
+      size[1] = size[1] - rows * LiteGraph.NODE_SLOT_HEIGHT;
+    }
+    setTimeout(() => {
+      app.graph.setDirtyCanvas(true, true);
+    }, 16);
+    return size;
+  }
+
+  /**
+   * When we connect our output, check our inputs and make sure we're not trying to connect a loop.
+   */
+  override onConnectOutput(
+    outputIndex: number,
+    inputType: string | -1,
+    inputSlot: INodeInputSlot,
+    inputNode: TLGraphNode,
+    inputIndex: number,
+  ): boolean {
+    let canConnect = true;
+    if (super.onConnectOutput) {
+      canConnect = super.onConnectOutput(outputIndex, inputType, inputSlot, inputNode, inputIndex);
+    }
+    if (canConnect) {
+      const nodes = getConnectedInputNodes(this); // We want passthrough nodes, since they will loop.
+      if (nodes.includes(inputNode)) {
+        alert(
+          `Whoa, whoa, whoa. You've just tried to create a connection that loops back on itself, ` +
+            `a situation that could create a time paradox, the results of which could cause a ` +
+            `chain reaction that would unravel the very fabric of the space time continuum, ` +
+            `and destroy the entire universe!`,
+        );
+        canConnect = false;
+      }
+    }
+    return canConnect;
+  }
+
+  override onConnectInput(
+    inputIndex: number,
+    outputType: string | -1,
+    outputSlot: INodeOutputSlot,
+    outputNode: TLGraphNode,
+    outputIndex: number,
+  ): boolean {
+    let canConnect = true;
+    if (super.onConnectInput) {
+      canConnect = super.onConnectInput(
+        inputIndex,
+        outputType,
+        outputSlot,
+        outputNode,
+        outputIndex,
+      );
+    }
+    if (canConnect) {
+      const nodes = getConnectedOutputNodes(this); // We want passthrough nodes, since they will loop.
+      if (nodes.includes(outputNode)) {
+        alert(
+          `Whoa, whoa, whoa. You've just tried to create a connection that loops back on itself, ` +
+            `a situation that could create a time paradox, the results of which could cause a ` +
+            `chain reaction that would unravel the very fabric of the space time continuum, ` +
+            `and destroy the entire universe!`,
+        );
+        canConnect = false;
+      }
+    }
+    return canConnect;
+  }
+
+  /**
+   * If something is dropped on us, just add it to the bottom. onConnectInput should already cancel
+   * if it's disallowed.
+   */
+  override connectByTypeOutput<T = any>(
+    slot: string | number,
+    sourceNode: TLGraphNode,
+    sourceSlotType: string,
+    optsIn: string,
+  ): T | null {
+    const lastInput = this.inputs[this.inputs.length - 1];
+    if (!lastInput?.link && lastInput?.type === "*") {
+      var sourceSlot = sourceNode.findOutputSlotByType(sourceSlotType, false, true);
+      return sourceNode.connect(sourceSlot, this, slot);
+    }
+    return super.connectByTypeOutput(slot, sourceNode, sourceSlotType, optsIn);
+  }
+
+  static override setUp() {
+    super.setUp();
+    addConnectionLayoutSupport(this, app, [
+      ["Left", "Right"],
+      ["Right", "Left"],
+    ]);
+    addMenuItem(this, app, {
+      name: (node) =>
+        `${node.properties?.["collapse_connections"] ? "Show" : "Collapse"} Connections`,
+      property: "collapse_connections",
+      prepareValue: (_value, node) => !node.properties?.["collapse_connections"],
+      callback: (_node) => {
+        app.graph.setDirtyCanvas(true, true);
+      },
+    });
+  }
+}
+
+// Ok, hack time! LGraphNode's connectByType is powerful, but for our nodes, that have multiple "*"
+// input types, it seems it just takes the first one, and disconnects it. I'd rather we don't do
+// that and instead take the next free one. If that doesn't work, then we'll give it to the old
+// method.
+const oldLGraphNodeConnectByType = LGraphNode.prototype.connectByType;
+LGraphNode.prototype.connectByType = function connectByType<T = any>(
+  slot: string | number,
+  sourceNode: TLGraphNode,
+  sourceSlotType: string,
+  optsIn: string,
+): T | null {
+  // If we're droppiong on a node, and the last input is free and an "*" type, then connect there
+  // first...
+  if (sourceNode.inputs) {
+    for (const [index, input] of sourceNode.inputs.entries()) {
+      if (!input.link && input.type === "*") {
+        this.connect(slot, sourceNode, index);
+        return null;
+      }
+    }
+  }
+  return ((oldLGraphNodeConnectByType &&
+    oldLGraphNodeConnectByType.call(this, slot, sourceNode, sourceSlotType, optsIn)) ||
+    null) as T;
+};

rgthree-comfy/src_web/comfyui/base_node.ts

@@ -0,0 +1,462 @@
+import type { ComfyNodeConstructor, ComfyObjectInfo, NodeMode } from "typings/comfy.js";
+import type {
+  IWidget,
+  SerializedLGraphNode,
+  LGraphNode as TLGraphNode,
+  LGraphCanvas,
+  ContextMenuItem,
+  INodeOutputSlot,
+  INodeInputSlot,
+} from "typings/litegraph.js";
+import type { RgthreeBaseServerNodeConstructor, RgthreeBaseVirtualNodeConstructor } from "typings/rgthree.js";
+
+import { ComfyWidgets } from "scripts/widgets.js";
+import { SERVICE as KEY_EVENT_SERVICE } from "./services/key_events_services.js";
+import { app } from "scripts/app.js";
+import { LogLevel, rgthree } from "./rgthree.js";
+import { addHelpMenuItem } from "./utils.js";
+import { RgthreeHelpDialog } from "rgthree/common/dialog.js";
+import {
+  importIndividualNodesInnerOnDragDrop,
+  importIndividualNodesInnerOnDragOver,
+} from "./feature_import_individual_nodes.js";
+import { defineProperty } from "rgthree/common/shared_utils.js";
+
+/**
+ * A base node with standard methods, directly extending the LGraphNode.
+ * This can be used for ui-nodes and a further base for server nodes.
+ */
+export abstract class RgthreeBaseNode extends LGraphNode {
+  /**
+   * Action strings that can be exposed and triggered from other nodes, like Fast Actions Button.
+   */
+  static exposedActions: string[] = [];
+
+  static override title: string = "__NEED_CLASS_TITLE__";
+  static category = "rgthree";
+  static _category = "rgthree"; // `category` seems to get reset by comfy, so reset to this after.
+
+  /**
+   * The comfyClass is property ComfyUI and extensions may care about, even through it is only for
+   * server nodes. RgthreeBaseServerNode below overrides this with the expected value and we just
+   * set it here so extensions that are none the wiser don't break on some unchecked string method
+   * call on an undefined calue.
+   */
+  comfyClass: string = "__NEED_COMFY_CLASS__";
+
+  /** Used by the ComfyUI-Manager badge. */
+  readonly nickname = "rgthree";
+  /** Are we a virtual node? */
+  readonly isVirtualNode: boolean = false;
+  /** Are we able to be dropped on (if config is enabled too). */
+  isDropEnabled = false;
+  /** A state member determining if we're currently removed. */
+  removed = false;
+  /** A state member determining if we're currently "configuring."" */
+  configuring = false;
+  /** A temporary width value that can be used to ensure compute size operates correctly. */
+  _tempWidth = 0;
+
+  /** Private Mode member so we can override the setter/getter and call an `onModeChange`. */
+  private rgthree_mode: NodeMode;
+  /** An internal bool set when `onConstructed` is run. */
+  private __constructed__ = false;
+  /** The help dialog. */
+  private helpDialog: RgthreeHelpDialog | null = null;
+
+  constructor(title = RgthreeBaseNode.title, skipOnConstructedCall = true) {
+    super(title);
+    if (title == "__NEED_CLASS_TITLE__") {
+      throw new Error("RgthreeBaseNode needs overrides.");
+    }
+    // Ensure these exist since some other extensions will break in their onNodeCreated.
+    this.widgets = this.widgets || [];
+    this.properties = this.properties || {};
+
+    // Some checks we want to do after we're constructed, looking that data is set correctly and
+    // that our base's `onConstructed` was called (if not, set a DEV warning).
+    setTimeout(() => {
+      // Check we have a comfyClass defined.
+      if (this.comfyClass == "__NEED_COMFY_CLASS__") {
+        throw new Error("RgthreeBaseNode needs a comfy class override.");
+      }
+      // Ensure we've called onConstructed before we got here.
+      this.checkAndRunOnConstructed();
+    });
+
+    defineProperty(this, 'mode', {
+      get: () => {
+        return this.rgthree_mode;
+      },
+      set: (mode: NodeMode) => {
+        if (this.rgthree_mode != mode) {
+          const oldMode = this.rgthree_mode;
+          this.rgthree_mode = mode;
+          this.onModeChange(oldMode, mode);
+        }
+      },
+    });
+  }
+
+  private checkAndRunOnConstructed() {
+    if (!this.__constructed__) {
+      this.onConstructed();
+      const [n, v] = rgthree.logger.logParts(
+        LogLevel.DEV,
+        `[RgthreeBaseNode] Child class did not call onConstructed for "${this.type}.`,
+      );
+      console[n]?.(...v);
+    }
+    return this.__constructed__;
+  }
+
+  onDragOver(e: DragEvent): boolean {
+    if (!this.isDropEnabled) return false;
+    return importIndividualNodesInnerOnDragOver(this, e);
+  }
+
+  async onDragDrop(e: DragEvent): Promise<boolean> {
+    if (!this.isDropEnabled) return false;
+    return importIndividualNodesInnerOnDragDrop(this, e);
+  }
+
+  /**
+   * When a node is finished with construction, we must call this. Failure to do so will result in
+   * an error message from the timeout in this base class. This is broken out and becomes the
+   * responsibility of the child class because
+   */
+  onConstructed() {
+    if (this.__constructed__) return false;
+    // This is kinda a hack, but if this.type is still null, then set it to undefined to match.
+    this.type = this.type ?? undefined;
+    this.__constructed__ = true;
+    rgthree.invokeExtensionsAsync("nodeCreated", this);
+    return this.__constructed__;
+  }
+
+  override configure(info: SerializedLGraphNode<TLGraphNode>): void {
+    this.configuring = true;
+    super.configure(info);
+    // Fix https://github.com/comfyanonymous/ComfyUI/issues/1448 locally.
+    // Can removed when fixed and adopted.
+    for (const w of this.widgets || []) {
+      w.last_y = w.last_y || 0;
+    }
+    this.configuring = false;
+  }
+
+  /**
+   * Override clone for, at the least, deep-copying properties.
+   */
+  override clone() {
+    const cloned = super.clone();
+    // This is whild, but LiteGraph clone doesn't deep clone data, so we will. We'll use structured
+    // clone, which most browsers in 2022 support, but but we'll check.
+    if (cloned.properties && !!window.structuredClone) {
+      cloned.properties = structuredClone(cloned.properties);
+    }
+    return cloned;
+  }
+
+  /** When a mode change, we want all connected nodes to match. */
+  onModeChange(from: NodeMode, to: NodeMode) {
+    // Override
+  }
+
+  /**
+   * Given a string, do something. At the least, handle any `exposedActions` that may be called and
+   * passed into from other nodes, like Fast Actions Button
+   */
+  async handleAction(action: string) {
+    action; // No-op. Should be overridden but OK if not.
+  }
+
+  /**
+   * Guess this doesn't exist in Litegraph...
+   */
+  removeWidget(widgetOrSlot?: IWidget | number) {
+    if (typeof widgetOrSlot === "number") {
+      this.widgets.splice(widgetOrSlot, 1);
+    } else if (widgetOrSlot) {
+      const index = this.widgets.indexOf(widgetOrSlot);
+      if (index > -1) {
+        this.widgets.splice(index, 1);
+      }
+    }
+  }
+
+  /**
+   * A default version of the logive when a node does not set `getSlotMenuOptions`. This is
+   * necessary because child nodes may want to define getSlotMenuOptions but LiteGraph then won't do
+   * it's default logic. This bakes it so child nodes can call this instead (and this doesn't set
+   * getSlotMenuOptions for all child nodes in case it doesn't exist).
+   */
+  defaultGetSlotMenuOptions(slot: {
+    input?: INodeInputSlot;
+    output?: INodeOutputSlot;
+  }): ContextMenuItem[] | null {
+    const menu_info: ContextMenuItem[] = [];
+    if (slot?.output?.links?.length) {
+      menu_info.push({ content: "Disconnect Links", slot: slot });
+    }
+    let inputOrOutput = slot.input || slot.output;
+    if (inputOrOutput) {
+      if (inputOrOutput.removable) {
+        menu_info.push(
+          inputOrOutput.locked ? { content: "Cannot remove" } : { content: "Remove Slot", slot },
+        );
+      }
+      if (!inputOrOutput.nameLocked) {
+        menu_info.push({ content: "Rename Slot", slot });
+      }
+    }
+    return menu_info;
+  }
+
+  override onRemoved(): void {
+    super.onRemoved?.();
+    this.removed = true;
+  }
+
+  static setUp<T extends RgthreeBaseNode>(...args: any[]) {
+    // No-op.
+  }
+
+  /**
+   * A function to provide help text to be overridden.
+   */
+  getHelp() {
+    return "";
+  }
+
+  showHelp() {
+    const help = this.getHelp() || (this.constructor as any).help;
+    if (help) {
+      this.helpDialog = new RgthreeHelpDialog(this, help).show();
+      this.helpDialog.addEventListener("close", (e) => {
+        this.helpDialog = null;
+      });
+    }
+  }
+
+  override onKeyDown(event: KeyboardEvent): void {
+    KEY_EVENT_SERVICE.handleKeyDownOrUp(event);
+    if (event.key == "?" && !this.helpDialog) {
+      this.showHelp();
+    }
+  }
+
+  override onKeyUp(event: KeyboardEvent): void {
+    KEY_EVENT_SERVICE.handleKeyDownOrUp(event);
+  }
+
+  override getExtraMenuOptions(canvas: LGraphCanvas, options: ContextMenuItem[]): void {
+    // Some other extensions override getExtraMenuOptions on the nodeType as it comes through from
+    // the server, so we can call out to that if we don't have our own.
+    if (super.getExtraMenuOptions) {
+      super.getExtraMenuOptions?.apply(this, [canvas, options]);
+    } else if ((this.constructor as any).nodeType?.prototype?.getExtraMenuOptions) {
+      (this.constructor as any).nodeType?.prototype?.getExtraMenuOptions?.apply(this, [
+        canvas,
+        options,
+      ]);
+    }
+    // If we have help content, then add a menu item.
+    const help = this.getHelp() || (this.constructor as any).help;
+    if (help) {
+      addHelpMenuItem(this, help, options);
+    }
+  }
+}
+
+/**
+ * A virtual node. Right now, this is just a wrapper for RgthreeBaseNode (which was the initial
+ * base virtual node).
+ *
+ * TODO: Make RgthreeBaseNode private and move all virtual nodes to this class; cleanup
+ * RgthreeBaseNode assumptions that its virtual.
+ */
+export class RgthreeBaseVirtualNode extends RgthreeBaseNode {
+  override isVirtualNode = true;
+
+  constructor(title = RgthreeBaseNode.title) {
+    super(title, false);
+  }
+
+  static override setUp() {
+    if (!this.type) {
+      throw new Error(`Missing type for RgthreeBaseVirtualNode: ${this.title}`);
+    }
+    LiteGraph.registerNodeType(this.type, this);
+    if (this._category) {
+      this.category = this._category;
+    }
+  }
+}
+
+/**
+ * A base node with standard methods, extending the LGraphNode.
+ * This is somewhat experimental, but if comfyui is going to keep breaking widgets and inputs, it
+ * seems safer than NOT overriding.
+ */
+export class RgthreeBaseServerNode extends RgthreeBaseNode {
+  static nodeData: ComfyObjectInfo | null = null;
+  static nodeType: ComfyNodeConstructor | null = null;
+
+  // Drop is enabled by default for server nodes.
+  override isDropEnabled = true;
+
+  constructor(title: string) {
+    super(title, true);
+    this.serialize_widgets = true;
+    this.setupFromServerNodeData();
+    this.onConstructed();
+  }
+
+  getWidgets() {
+    return ComfyWidgets;
+  }
+
+  /**
+   * This takes the server data and builds out the inputs, outputs and widgets. It's similar to the
+   * ComfyNode constructor in registerNodes in ComfyUI's app.js, but is more stable and thus
+   * shouldn't break as often when it modifyies widgets and types.
+   */
+  async setupFromServerNodeData() {
+    const nodeData = (this.constructor as any).nodeData;
+    if (!nodeData) {
+      throw Error("No node data");
+    }
+
+    // Necessary for serialization so Comfy backend can check types.
+    // Serialized as `class_type`. See app.js#graphToPrompt
+    this.comfyClass = nodeData.name;
+
+    let inputs = nodeData["input"]["required"];
+    if (nodeData["input"]["optional"] != undefined) {
+      inputs = Object.assign({}, inputs, nodeData["input"]["optional"]);
+    }
+
+    const WIDGETS = this.getWidgets();
+
+    const config: { minWidth: number; minHeight: number; widget?: null | { options: any } } = {
+      minWidth: 1,
+      minHeight: 1,
+      widget: null,
+    };
+    for (const inputName in inputs) {
+      const inputData = inputs[inputName];
+      const type = inputData[0];
+      // If we're forcing the input, just do it now and forget all that widget stuff.
+      // This is one of the differences from ComfyNode and provides smoother experience for inputs
+      // that are going to remain inputs anyway.
+      // Also, it fixes https://github.com/comfyanonymous/ComfyUI/issues/1404 (for rgthree nodes)
+      if (inputData[1]?.forceInput) {
+        this.addInput(inputName, type);
+      } else {
+        let widgetCreated = true;
+        if (Array.isArray(type)) {
+          // Enums
+          Object.assign(config, WIDGETS.COMBO(this, inputName, inputData, app) || {});
+        } else if (`${type}:${inputName}` in WIDGETS) {
+          // Support custom widgets by Type:Name
+          Object.assign(
+            config,
+            WIDGETS[`${type}:${inputName}`]!(this, inputName, inputData, app) || {},
+          );
+        } else if (type in WIDGETS) {
+          // Standard type widgets
+          Object.assign(config, WIDGETS[type]!(this, inputName, inputData, app) || {});
+        } else {
+          // Node connection inputs
+          this.addInput(inputName, type);
+          widgetCreated = false;
+        }
+
+        // Don't actually need this right now, but ported it over from ComfyWidget.
+        if (widgetCreated && inputData[1]?.forceInput && config?.widget) {
+          if (!config.widget.options) config.widget.options = {};
+          config.widget.options.forceInput = inputData[1].forceInput;
+        }
+        if (widgetCreated && inputData[1]?.defaultInput && config?.widget) {
+          if (!config.widget.options) config.widget.options = {};
+          config.widget.options.defaultInput = inputData[1].defaultInput;
+        }
+      }
+    }
+
+    for (const o in nodeData["output"]) {
+      let output = nodeData["output"][o];
+      if (output instanceof Array) output = "COMBO";
+      const outputName = nodeData["output_name"][o] || output;
+      const outputShape = nodeData["output_is_list"][o]
+        ? LiteGraph.GRID_SHAPE
+        : LiteGraph.CIRCLE_SHAPE;
+      this.addOutput(outputName, output, { shape: outputShape });
+    }
+
+    const s = this.computeSize();
+    s[0] = Math.max(config.minWidth, s[0] * 1.5);
+    s[1] = Math.max(config.minHeight, s[1]);
+    this.size = s;
+    this.serialize_widgets = true;
+  }
+
+  static __registeredForOverride__: boolean = false;
+  static registerForOverride(
+    comfyClass: ComfyNodeConstructor,
+    nodeData: ComfyObjectInfo,
+    rgthreeClass: RgthreeBaseServerNodeConstructor,
+  ) {
+    if (OVERRIDDEN_SERVER_NODES.has(comfyClass)) {
+      throw Error(
+        `Already have a class to override ${
+          comfyClass.type || comfyClass.name || comfyClass.title
+        }`,
+      );
+    }
+    OVERRIDDEN_SERVER_NODES.set(comfyClass, rgthreeClass);
+    // Mark the rgthreeClass as `__registeredForOverride__` because ComfyUI will repeatedly call
+    // this and certain setups will only want to setup once (like adding context menus, etc).
+    if (!rgthreeClass.__registeredForOverride__) {
+      rgthreeClass.__registeredForOverride__ = true;
+      rgthreeClass.nodeType = comfyClass;
+      rgthreeClass.nodeData = nodeData;
+      rgthreeClass.onRegisteredForOverride(comfyClass, rgthreeClass);
+    }
+  }
+
+  static onRegisteredForOverride(comfyClass: any, rgthreeClass: any) {
+    // To be overridden
+  }
+}
+
+/**
+ * Keeps track of the rgthree-comfy nodes that come from the server (and want to be ComfyNodes) that
+ * we override into a own, more flexible and cleaner nodes.
+ */
+const OVERRIDDEN_SERVER_NODES = new Map<any, any>();
+
+const oldregisterNodeType = LiteGraph.registerNodeType;
+/**
+ * ComfyUI calls registerNodeType with its ComfyNode, but we don't trust that will remain stable, so
+ * we need to identify it, intercept it, and supply our own class for the node.
+ */
+LiteGraph.registerNodeType = async function (nodeId: string, baseClass: any) {
+  const clazz = OVERRIDDEN_SERVER_NODES.get(baseClass) || baseClass;
+  if (clazz !== baseClass) {
+    const classLabel = clazz.type || clazz.name || clazz.title;
+    const [n, v] = rgthree.logger.logParts(
+      LogLevel.DEBUG,
+      `${nodeId}: replacing default ComfyNode implementation with custom ${classLabel} class.`,
+    );
+    console[n]?.(...v);
+    // Note, we don't currently call our rgthree.invokeExtensionsAsync w/ beforeRegisterNodeDef as
+    // this runs right after that. However, this does mean that extensions cannot actually change
+    // anything about overriden server rgthree nodes in their beforeRegisterNodeDef (as when comfy
+    // calls it, it's for the wrong ComfyNode class). Calling it here, however, would re-run
+    // everything causing more issues than not. If we wanted to support beforeRegisterNodeDef then
+    // it would mean rewriting ComfyUI's registerNodeDef which, frankly, is not worth it.
+  }
+  return oldregisterNodeType.call(LiteGraph, nodeId, clazz);
+};

rgthree-comfy/src_web/comfyui/base_node_collector.ts

@@ -0,0 +1,98 @@
+import type { INodeOutputSlot, LGraphNode } from "typings/litegraph.js";
+import { rgthree } from "./rgthree.js";
+import { BaseAnyInputConnectedNode } from "./base_any_input_connected_node.js";
+import {
+  PassThroughFollowing,
+  getConnectedInputNodes,
+  getConnectedInputNodesAndFilterPassThroughs,
+  shouldPassThrough,
+} from "./utils.js";
+
+/**
+ * Base collector node that monitors changing inputs and outputs.
+ */
+export class BaseCollectorNode extends BaseAnyInputConnectedNode {
+  /**
+   * We only want to show nodes through re_route nodes, other pass through nodes show each input.
+   */
+  override readonly inputsPassThroughFollowing: PassThroughFollowing =
+    PassThroughFollowing.REROUTE_ONLY;
+
+  readonly logger = rgthree.newLogSession("[BaseCollectorNode]");
+
+  constructor(title?: string) {
+    super(title);
+  }
+
+  override clone() {
+    const cloned = super.clone();
+    return cloned;
+  }
+
+  override handleLinkedNodesStabilization(linkedNodes: LGraphNode[]) {
+    return false; // No-op, no widgets.
+  }
+
+  /**
+   * When we connect an input, check to see if it's already connected and cancel it.
+   */
+  override onConnectInput(
+    inputIndex: number,
+    outputType: string | -1,
+    outputSlot: INodeOutputSlot,
+    outputNode: LGraphNode,
+    outputIndex: number,
+  ): boolean {
+    let canConnect = super.onConnectInput(
+      inputIndex,
+      outputType,
+      outputSlot,
+      outputNode,
+      outputIndex,
+    );
+    if (canConnect) {
+      const allConnectedNodes = getConnectedInputNodes(this); // We want passthrough nodes, since they will loop.
+      const nodesAlreadyInSlot = getConnectedInputNodes(this, undefined, inputIndex);
+      if (allConnectedNodes.includes(outputNode)) {
+        // If we're connecting to the same slot, then allow it by replacing the one we have.
+        // const slotsOriginNode = getOriginNodeByLink(this.inputs[inputIndex]?.link);
+        const [n, v] = this.logger.debugParts(
+          `${outputNode.title} is already connected to ${this.title}.`,
+        );
+        console[n]?.(...v);
+        if (nodesAlreadyInSlot.includes(outputNode)) {
+          const [n, v] = this.logger.debugParts(
+            `... but letting it slide since it's for the same slot.`,
+          );
+          console[n]?.(...v);
+        } else {
+          canConnect = false;
+        }
+      }
+      if (canConnect && shouldPassThrough(outputNode, PassThroughFollowing.REROUTE_ONLY)) {
+        const connectedNode = getConnectedInputNodesAndFilterPassThroughs(
+          outputNode,
+          undefined,
+          undefined,
+          PassThroughFollowing.REROUTE_ONLY,
+        )[0];
+        if (connectedNode && allConnectedNodes.includes(connectedNode)) {
+          // If we're connecting to the same slot, then allow it by replacing the one we have.
+          const [n, v] = this.logger.debugParts(
+            `${connectedNode.title} is already connected to ${this.title}.`,
+          );
+          console[n]?.(...v);
+          if (nodesAlreadyInSlot.includes(connectedNode)) {
+            const [n, v] = this.logger.debugParts(
+              `... but letting it slide since it's for the same slot.`,
+            );
+            console[n]?.(...v);
+          } else {
+            canConnect = false;
+          }
+        }
+      }
+    }
+    return canConnect;
+  }
+}

rgthree-comfy/src_web/comfyui/base_node_mode_changer.ts

@@ -0,0 +1,120 @@
+import type { RgthreeBaseVirtualNodeConstructor } from "typings/rgthree.js";
+import type {
+  LGraphNode as TLGraphNode,
+  IWidget,
+  SerializedLGraphNode,
+} from "typings/litegraph.js";
+import { BaseAnyInputConnectedNode } from "./base_any_input_connected_node.js";
+import { PassThroughFollowing } from "./utils.js";
+import { wait } from "rgthree/common/shared_utils.js";
+
+export class BaseNodeModeChanger extends BaseAnyInputConnectedNode {
+  override readonly inputsPassThroughFollowing: PassThroughFollowing = PassThroughFollowing.ALL;
+
+  static collapsible = false;
+  override isVirtualNode = true;
+
+  // These Must be overriden
+  readonly modeOn: number = -1;
+  readonly modeOff: number = -1;
+
+  static "@toggleRestriction" = {
+    type: "combo",
+    values: ["default", "max one", "always one"],
+  };
+
+  constructor(title?: string) {
+    super(title);
+    this.properties["toggleRestriction"] = "default";
+  }
+
+  override onConstructed(): boolean {
+    wait(10).then(() => {
+      if (this.modeOn < 0 || this.modeOff < 0) {
+        throw new Error("modeOn and modeOff must be overridden.");
+      }
+    });
+    this.addOutput("OPT_CONNECTION", "*");
+    return super.onConstructed();
+  }
+
+  override configure(info: SerializedLGraphNode<TLGraphNode>): void {
+    // Patch a small issue (~14h) where multiple OPT_CONNECTIONS may have been created.
+    // https://github.com/rgthree/rgthree-comfy/issues/206
+    // TODO: This can probably be removed within a few weeks.
+    if (info.outputs?.length) {
+      info.outputs.length = 1;
+    }
+    super.configure(info);
+  }
+
+  override handleLinkedNodesStabilization(linkedNodes: TLGraphNode[]) {
+    let changed = false;
+    for (const [index, node] of linkedNodes.entries()) {
+      let widget = this.widgets && this.widgets[index];
+      if (!widget) {
+        // When we add a widget, litegraph is going to mess up the size, so we
+        // store it so we can retrieve it in computeSize. Hacky..
+        (this as any)._tempWidth = this.size[0];
+        widget = this.addWidget("toggle", "", false, "", { on: "yes", off: "no" });
+        changed = true;
+      }
+      if (node) {
+        changed = this.setWidget(widget, node) || changed;
+      }
+    }
+    if (this.widgets && this.widgets.length > linkedNodes.length) {
+      this.widgets.length = linkedNodes.length;
+      changed = true;
+    }
+    return changed;
+  }
+
+  private setWidget(widget: IWidget, linkedNode: TLGraphNode, forceValue?: boolean) {
+    let changed = false;
+    const value = forceValue == null ? linkedNode.mode === this.modeOn : forceValue;
+    let name =  `Enable ${linkedNode.title}`;
+    // Need to set initally
+    if (widget.name !== name) {
+      widget.name = `Enable ${linkedNode.title}`;
+      widget.options = { on: "yes", off: "no" };
+      widget.value = value;
+      (widget as any).doModeChange = (forceValue?: boolean, skipOtherNodeCheck?: boolean) => {
+        let newValue = forceValue == null ? linkedNode.mode === this.modeOff : forceValue;
+        if (skipOtherNodeCheck !== true) {
+          if (newValue && this.properties?.["toggleRestriction"]?.includes(" one")) {
+            for (const widget of this.widgets) {
+              (widget as any).doModeChange(false, true);
+            }
+          } else if (!newValue && this.properties?.["toggleRestriction"] === "always one") {
+            newValue = this.widgets.every((w) => !w.value || w === widget);
+          }
+        }
+        linkedNode.mode = (newValue ? this.modeOn : this.modeOff) as 1 | 2 | 3 | 4;
+        widget.value = newValue;
+      };
+      widget.callback = () => {
+        (widget as any).doModeChange();
+      };
+      changed = true;
+    }
+    if (forceValue != null) {
+      const newMode = (forceValue ? this.modeOn : this.modeOff) as 1 | 2 | 3 | 4;
+      if (linkedNode.mode !== newMode) {
+        linkedNode.mode = newMode;
+        changed = true;
+      }
+    }
+    return changed;
+  }
+
+  forceWidgetOff(widget: IWidget, skipOtherNodeCheck?: boolean) {
+    (widget as any).doModeChange(false, skipOtherNodeCheck);
+  }
+  forceWidgetOn(widget: IWidget, skipOtherNodeCheck?: boolean) {
+    (widget as any).doModeChange(true, skipOtherNodeCheck);
+  }
+  forceWidgetToggle(widget: IWidget, skipOtherNodeCheck?: boolean) {
+    (widget as any).doModeChange(!widget.value, skipOtherNodeCheck);
+  }
+}

rgthree-comfy/src_web/comfyui/base_power_prompt.ts

@@ -0,0 +1,364 @@
+import { api } from "scripts/api.js";
+import type {
+  LLink,
+  IComboWidget,
+  LGraphNode,
+  INodeOutputSlot,
+  INodeInputSlot,
+  IWidget,
+  SerializedLGraphNode,
+} from "typings/litegraph.js";
+import type { ComfyObjectInfo, ComfyGraphNode } from "typings/comfy.js";
+import { wait } from "rgthree/common/shared_utils.js";
+import { rgthree } from "./rgthree.js";
+
+/** Wraps a node instance keeping closure without mucking the finicky types. */
+export class PowerPrompt {
+  readonly isSimple: boolean;
+  readonly node: ComfyGraphNode;
+  readonly promptEl: HTMLTextAreaElement;
+  nodeData: ComfyObjectInfo;
+  readonly combos: { [key: string]: IComboWidget } = {};
+  readonly combosValues: { [key: string]: string[] } = {};
+  boundOnFreshNodeDefs!: (event: CustomEvent) => void;
+
+  private configuring = false;
+
+  constructor(node: ComfyGraphNode, nodeData: ComfyObjectInfo) {
+    this.node = node;
+    this.node.properties = this.node.properties || {};
+
+    this.node.properties["combos_filter"] = "";
+
+    this.nodeData = nodeData;
+    this.isSimple = this.nodeData.name.includes("Simple");
+
+    this.promptEl = (node.widgets[0]! as any).inputEl;
+    this.addAndHandleKeyboardLoraEditWeight();
+
+    this.patchNodeRefresh();
+
+    const oldConfigure = this.node.configure;
+    this.node.configure = (info: SerializedLGraphNode) => {
+      this.configuring = true;
+      oldConfigure?.apply(this.node, [info]);
+      this.configuring = false;
+    };
+
+    const oldOnConnectionsChange = this.node.onConnectionsChange;
+    this.node.onConnectionsChange = (
+      type: number,
+      slotIndex: number,
+      isConnected: boolean,
+      link_info: LLink,
+      _ioSlot: INodeOutputSlot | INodeInputSlot,
+    ) => {
+      oldOnConnectionsChange?.apply(this.node, [type, slotIndex, isConnected, link_info, _ioSlot]);
+      this.onNodeConnectionsChange(type, slotIndex, isConnected, link_info, _ioSlot);
+    };
+
+    const oldOnConnectInput = this.node.onConnectInput;
+    this.node.onConnectInput = (
+      inputIndex: number,
+      outputType: INodeOutputSlot["type"],
+      outputSlot: INodeOutputSlot,
+      outputNode: LGraphNode,
+      outputIndex: number,
+    ) => {
+      let canConnect = true;
+      if (oldOnConnectInput) {
+        canConnect = oldOnConnectInput.apply(this.node, [
+          inputIndex,
+          outputType,
+          outputSlot,
+          outputNode,
+          outputIndex,
+        ]);
+      }
+      return (
+        this.configuring ||
+        rgthree.loadingApiJson ||
+        (canConnect && !this.node.inputs[inputIndex]!.disabled)
+      );
+    };
+
+    const oldOnConnectOutput = this.node.onConnectOutput;
+    this.node.onConnectOutput = (
+      outputIndex: number,
+      inputType: INodeInputSlot["type"],
+      inputSlot: INodeInputSlot,
+      inputNode: LGraphNode,
+      inputIndex: number,
+    ) => {
+      let canConnect = true;
+      if (oldOnConnectOutput) {
+        canConnect = oldOnConnectOutput?.apply(this.node, [
+          outputIndex,
+          inputType,
+          inputSlot,
+          inputNode,
+          inputIndex,
+        ]);
+      }
+      return (
+        this.configuring ||
+        rgthree.loadingApiJson ||
+        (canConnect && !this.node.outputs[outputIndex]!.disabled)
+      );
+    };
+
+    const onPropertyChanged = this.node.onPropertyChanged;
+    this.node.onPropertyChanged = (property: string, value: any, prevValue: any) => {
+      onPropertyChanged && onPropertyChanged.call(this, property, value, prevValue);
+      if (property === "combos_filter") {
+        this.refreshCombos(this.nodeData);
+      }
+    };
+
+    // Strip all widgets but prompt (we'll re-add them in refreshCombos)
+    // this.node.widgets.splice(1);
+    for (let i = this.node.widgets.length - 1; i >= 0; i--) {
+      if (this.shouldRemoveServerWidget(this.node.widgets[i]!)) {
+        this.node.widgets.splice(i, 1);
+      }
+    }
+
+    this.refreshCombos(nodeData);
+    setTimeout(() => {
+      this.stabilizeInputsOutputs();
+    }, 32);
+  }
+
+  /**
+   * Cleans up optional out puts when we don't have the optional input. Purely a vanity function.
+   */
+  onNodeConnectionsChange(
+    _type: number,
+    _slotIndex: number,
+    _isConnected: boolean,
+    _linkInfo: LLink,
+    _ioSlot: INodeOutputSlot | INodeInputSlot,
+  ) {
+    this.stabilizeInputsOutputs();
+  }
+
+  private stabilizeInputsOutputs() {
+    // If we are currently "configuring" then skip this stabilization. The connected nodes may
+    // not yet be configured.
+    if (this.configuring || rgthree.loadingApiJson) {
+      return;
+    }
+    // If our first input is connected, then we can show the proper output.
+    const clipLinked = this.node.inputs.some((i) => i.name.includes("clip") && !!i.link);
+    const modelLinked = this.node.inputs.some((i) => i.name.includes("model") && !!i.link);
+    for (const output of this.node.outputs) {
+      const type = (output.type as string).toLowerCase();
+      if (type.includes("model")) {
+        output.disabled = !modelLinked;
+      } else if (type.includes("conditioning")) {
+        output.disabled = !clipLinked;
+      } else if (type.includes("clip")) {
+        output.disabled = !clipLinked;
+      } else if (type.includes("string")) {
+        // Our text prompt is always enabled, but let's color it so it stands out
+        // if the others are disabled. #7F7 is Litegraph's default.
+        output.color_off = "#7F7";
+        output.color_on = "#7F7";
+      }
+      if (output.disabled) {
+        // this.node.disconnectOutput(index);
+      }
+    }
+  }
+
+  onFreshNodeDefs(event: CustomEvent) {
+    this.refreshCombos(event.detail[this.nodeData.name]);
+  }
+
+  shouldRemoveServerWidget(widget: IWidget) {
+    return (
+      widget.name?.startsWith("insert_") ||
+      widget.name?.startsWith("target_") ||
+      widget.name?.startsWith("crop_") ||
+      widget.name?.startsWith("values_")
+    );
+  }
+
+  refreshCombos(nodeData: ComfyObjectInfo) {
+    this.nodeData = nodeData;
+    let filter: RegExp | null = null;
+    if (this.node.properties["combos_filter"]?.trim()) {
+      try {
+        filter = new RegExp(this.node.properties["combos_filter"].trim(), "i");
+      } catch (e) {
+        console.error(`Could not parse "${filter}" for Regular Expression`, e);
+        filter = null;
+      }
+    }
+
+    // Add the combo for hidden inputs of nodeData
+    let data = Object.assign(
+      {},
+      this.nodeData.input?.optional || {},
+      this.nodeData.input?.hidden || {},
+    );
+
+    for (const [key, value] of Object.entries(data)) {
+      //Object.entries(this.nodeData.input?.hidden || {})) {
+      if (Array.isArray(value[0])) {
+        let values = value[0] as string[];
+        if (key.startsWith("insert")) {
+          values = filter
+            ? values.filter(
+                (v, i) => i < 1 || (i == 1 && v.match(/^disable\s[a-z]/i)) || filter?.test(v),
+              )
+            : values;
+          const shouldShow =
+            values.length > 2 || (values.length > 1 && !values[1]!.match(/^disable\s[a-z]/i));
+          if (shouldShow) {
+            if (!this.combos[key]) {
+              this.combos[key] = this.node.addWidget(
+                "combo",
+                key,
+                values,
+                (selected) => {
+                  if (selected !== values[0] && !selected.match(/^disable\s[a-z]/i)) {
+                    // We wait a frame because if we use a keydown event to call, it'll wipe out
+                    // the selection.
+                    wait().then(() => {
+                      if (key.includes("embedding")) {
+                        this.insertSelectionText(`embedding:${selected}`);
+                      } else if (key.includes("saved")) {
+                        this.insertSelectionText(
+                          this.combosValues[`values_${key}`]![values.indexOf(selected)]!,
+                        );
+                      } else if (key.includes("lora")) {
+                        this.insertSelectionText(`<lora:${selected}:1.0>`);
+                      }
+                      this.combos[key]!.value = values[0];
+                    });
+                  }
+                },
+                {
+                  values,
+                  serialize: true, // Don't include this in prompt.
+                },
+              );
+              (this.combos[key]! as any).oldComputeSize = this.combos[key]!.computeSize;
+              let node = this.node;
+              this.combos[key]!.computeSize = function (width: number) {
+                const size = (this as any).oldComputeSize?.(width) || [
+                  width,
+                  LiteGraph.NODE_WIDGET_HEIGHT,
+                ];
+                if (this === node.widgets[node.widgets.length - 1]) {
+                  size[1] += 10;
+                }
+                return size;
+              };
+            }
+            this.combos[key]!.options!.values = values;
+            this.combos[key]!.value = values[0];
+          } else if (!shouldShow && this.combos[key]) {
+            this.node.widgets.splice(this.node.widgets.indexOf(this.combos[key]!), 1);
+            delete this.combos[key];
+          }
+        } else if (key.startsWith("values")) {
+          this.combosValues[key] = values;
+        }
+      }
+    }
+  }
+
+  insertSelectionText(text: string) {
+    if (!this.promptEl) {
+      console.error("Asked to insert text, but no textbox found.");
+      return;
+    }
+    let prompt = this.promptEl.value;
+    // Use selectionEnd as the split; if we have highlighted text, then we likely don't want to
+    // overwrite it (we could have just deleted it more easily).
+    let first = prompt.substring(0, this.promptEl.selectionEnd).replace(/ +$/, "");
+    first = first + (["\n"].includes(first[first.length - 1]!) ? "" : first.length ? " " : "");
+    let second = prompt.substring(this.promptEl.selectionEnd).replace(/^ +/, "");
+    second = (["\n"].includes(second[0]!) ? "" : second.length ? " " : "") + second;
+    this.promptEl.value = first + text + second;
+    this.promptEl.focus();
+    this.promptEl.selectionStart = first.length;
+    this.promptEl.selectionEnd = first.length + text.length;
+  }
+
+  /**
+   * Adds a keydown event listener to our prompt so we can see if we're using the
+   * ctrl/cmd + up/down arrows shortcut. This kind of competes with the core extension
+   * "Comfy.EditAttention" but since that only handles parenthesis and listens on window, we should
+   * be able to intercept and cancel the bubble if we're doing the same action within the lora tag.
+   */
+  addAndHandleKeyboardLoraEditWeight() {
+    this.promptEl.addEventListener("keydown", (event: KeyboardEvent) => {
+      // If we're not doing a ctrl/cmd + arrow key, then bail.
+      if (!(event.key === "ArrowUp" || event.key === "ArrowDown")) return;
+      if (!event.ctrlKey && !event.metaKey) return;
+      // Unfortunately, we can't see Comfy.EditAttention delta in settings, so we hardcode to 0.01.
+      // We can acutally do better too, let's make it .1 by default, and .01 if also holding shift.
+      const delta = event.shiftKey ? 0.01 : 0.1;
+
+      let start = this.promptEl.selectionStart;
+      let end = this.promptEl.selectionEnd;
+      let fullText = this.promptEl.value;
+      let selectedText = fullText.substring(start, end);
+
+      // We don't care about fully rewriting Comfy.EditAttention, we just want to see if our
+      // selected text is a lora, which will always start with "<lora:". So work backwards until we
+      // find something that we know can't be a lora, or a "<".
+      if (!selectedText) {
+        const stopOn = "<>()\r\n\t"; // Allow spaces, since they can be in the filename
+        if (fullText[start] == ">") {
+          start -= 2;
+          end -= 2;
+        }
+        if (fullText[end - 1] == "<") {
+          start += 2;
+          end += 2;
+        }
+        while (!stopOn.includes(fullText[start]!) && start > 0) {
+          start--;
+        }
+        while (!stopOn.includes(fullText[end - 1]!) && end < fullText.length) {
+          end++;
+        }
+        selectedText = fullText.substring(start, end);
+      }
+
+      // Bail if this isn't a lora.
+      if (!selectedText.startsWith("<lora:") || !selectedText.endsWith(">")) {
+        return;
+      }
+
+      let weight = Number(selectedText.match(/:(-?\d*(\.\d*)?)>$/)?.[1]) ?? 1;
+      weight += event.key === "ArrowUp" ? delta : -delta;
+      const updatedText = selectedText.replace(/(:-?\d*(\.\d*)?)?>$/, `:${weight.toFixed(2)}>`);
+
+      // Handle the new value and cancel the bubble so Comfy.EditAttention doesn't also try.
+      this.promptEl.setRangeText(updatedText, start, end, "select");
+      event.preventDefault();
+      event.stopPropagation();
+    });
+  }
+
+  /**
+   * Patches over api.getNodeDefs in comfy's api.js to fire a custom event that we can listen to
+   * here and manually refresh our combos when a request comes in to fetch the node data; which
+   * only happens once at startup (but before custom nodes js runs), and then after clicking
+   * the "Refresh" button in the floating menu, which is what we care about.
+   */
+  patchNodeRefresh() {
+    this.boundOnFreshNodeDefs = this.onFreshNodeDefs.bind(this);
+    api.addEventListener("fresh-node-defs", this.boundOnFreshNodeDefs as EventListener);
+    const oldNodeRemoved = this.node.onRemoved;
+    this.node.onRemoved = () => {
+      oldNodeRemoved?.call(this.node);
+      api.removeEventListener("fresh-node-defs", this.boundOnFreshNodeDefs as EventListener);
+    };
+  }
+}

rgthree-comfy/src_web/comfyui/bookmark.ts

@@ -0,0 +1,163 @@
+import { app } from "scripts/app.js";
+import { RgthreeBaseVirtualNode } from "./base_node.js";
+import { SERVICE as KEY_EVENT_SERVICE } from "./services/key_events_services.js";
+import { NodeTypesString } from "./constants.js";
+import type {
+  LGraph,
+  LGraphCanvas,
+  INumberWidget,
+  LGraphNode,
+  Vector2,
+} from "typings/litegraph.js";
+import { getClosestOrSelf, queryOne } from "rgthree/common/utils_dom.js";
+
+/**
+ * A bookmark node. Can be placed anywhere in the workflow, and given a shortcut key that will
+ * navigate to that node, with it in the top-left corner.
+ */
+export class Bookmark extends RgthreeBaseVirtualNode {
+  static override type = NodeTypesString.BOOKMARK;
+  static override title = NodeTypesString.BOOKMARK;
+  override comfyClass = NodeTypesString.BOOKMARK;
+
+  // Really silly, but Litegraph assumes we have at least one input/output... so we need to
+  // counteract it's computeSize calculation by offsetting the start.
+  static slot_start_y = -20;
+
+  // LiteGraph adds mroe spacing than we want when calculating a nodes' `_collapsed_width`, so we'll
+  // override it with a setter and re-set it measured exactly as we want.
+  ___collapsed_width: number = 0;
+
+  override isVirtualNode = true;
+  override serialize_widgets = true;
+
+  //@ts-ignore - TS Doesn't like us overriding a property with accessors but, too bad.
+  override get _collapsed_width() {
+    return this.___collapsed_width;
+  }
+
+  override set _collapsed_width(width: number) {
+    const canvas = app.canvas as LGraphCanvas;
+    const ctx = canvas.canvas.getContext("2d")!;
+    const oldFont = ctx.font;
+    ctx.font = canvas.title_text_font;
+    this.___collapsed_width = 40 + ctx.measureText(this.title).width;
+    ctx.font = oldFont;
+  }
+
+  readonly keypressBound;
+
+  constructor(title = Bookmark.title) {
+    super(title);
+    const nextShortcutChar = getNextShortcut();
+    this.addWidget(
+      "text",
+      "shortcut_key",
+      nextShortcutChar,
+      (value: string, ...args) => {
+        value = value.trim()[0] || "1";
+      },
+      {
+        y: 8,
+      },
+    );
+    this.addWidget<INumberWidget>("number", "zoom", 1, (value: number) => {}, {
+      y: 8 + LiteGraph.NODE_WIDGET_HEIGHT + 4,
+      max: 2,
+      min: 0.5,
+      precision: 2,
+    });
+    this.keypressBound = this.onKeypress.bind(this);
+    this.title = "🔖";
+    this.onConstructed();
+  }
+
+  // override computeSize(out?: Vector2 | undefined): Vector2 {
+  //   super.computeSize(out);
+  //   const minHeight = (this.widgets?.length || 0) * (LiteGraph.NODE_WIDGET_HEIGHT + 4) + 16;
+  //   this.size[1] = Math.max(minHeight, this.size[1]);
+  // }
+
+  get shortcutKey(): string {
+    return this.widgets[0]?.value?.toLocaleLowerCase() ?? "";
+  }
+
+  override onAdded(graph: LGraph): void {
+    KEY_EVENT_SERVICE.addEventListener("keydown", this.keypressBound as EventListener);
+  }
+
+  override onRemoved(): void {
+    KEY_EVENT_SERVICE.removeEventListener("keydown", this.keypressBound as EventListener);
+  }
+
+  onKeypress(event: CustomEvent<{ originalEvent: KeyboardEvent }>) {
+    const originalEvent = event.detail.originalEvent;
+    const target = (originalEvent.target as HTMLElement)!;
+    if (getClosestOrSelf(target, 'input,textarea,[contenteditable="true"]')) {
+      return;
+    }
+
+    // Only the shortcut keys are held down, otionally including "shift".
+    if (KEY_EVENT_SERVICE.areOnlyKeysDown(this.widgets[0]!.value, true)) {
+      this.canvasToBookmark();
+      originalEvent.preventDefault();
+      originalEvent.stopPropagation();
+    }
+  }
+
+  /**
+   * Called from LiteGraph's `processMouseDown` after it would invoke the input box for the
+   * shortcut_key, so we check if it exists and then add our own event listener so we can track the
+   * keys down for the user.
+   */
+  override onMouseDown(event: MouseEvent, pos: Vector2, graphCanvas: LGraphCanvas): void {
+    const input = queryOne<HTMLInputElement>(".graphdialog > input.value");
+    if (input && input.value === this.widgets[0]?.value) {
+      input.addEventListener("keydown", (e) => {
+        // ComfyUI swallows keydown on inputs, so we need to call out to rgthree to use downkeys.
+        KEY_EVENT_SERVICE.handleKeyDownOrUp(e);
+        e.preventDefault();
+        e.stopPropagation();
+        input.value = Object.keys(KEY_EVENT_SERVICE.downKeys).join(" + ");
+      });
+    }
+  }
+
+  canvasToBookmark() {
+    const canvas = app.canvas as LGraphCanvas;
+    // ComfyUI seemed to break us again, but couldn't repro. No reason to not check, I guess.
+    // https://github.com/rgthree/rgthree-comfy/issues/71
+    if (canvas?.ds?.offset) {
+      canvas.ds.offset[0] = -this.pos[0] + 16;
+      canvas.ds.offset[1] = -this.pos[1] + 40;
+    }
+    if (canvas?.ds?.scale != null) {
+      canvas.ds.scale = Number(this.widgets[1]!.value || 1);
+    }
+    canvas.setDirty(true, true);
+  }
+}
+
+app.registerExtension({
+  name: "rgthree.Bookmark",
+  registerCustomNodes() {
+    Bookmark.setUp();
+  },
+});
+
+function isBookmark(node: LGraphNode): node is Bookmark {
+  return node.type === NodeTypesString.BOOKMARK;
+}
+
+function getExistingShortcuts() {
+  const graph: LGraph = app.graph;
+  const bookmarkNodes = graph._nodes.filter(isBookmark);
+  const usedShortcuts = new Set(bookmarkNodes.map((n) => n.shortcutKey));
+  return usedShortcuts;
+}
+
+const SHORTCUT_DEFAULTS = "1234567890abcdefghijklmnopqrstuvwxyz".split("");
+function getNextShortcut() {
+  const existingShortcuts = getExistingShortcuts();
+  return SHORTCUT_DEFAULTS.find((char) => !existingShortcuts.has(char)) ?? "1";
+}

rgthree-comfy/src_web/comfyui/bypasser.ts

@@ -0,0 +1,51 @@
+import { app } from "scripts/app.js";
+import { BaseNodeModeChanger } from "./base_node_mode_changer.js";
+import { NodeTypesString } from "./constants.js";
+import type { LGraphNode } from "typings/litegraph.js";
+
+const MODE_BYPASS = 4;
+const MODE_ALWAYS = 0;
+
+class BypasserNode extends BaseNodeModeChanger {
+  static override exposedActions = ["Bypass all", "Enable all", "Toggle all"];
+
+  static override type = NodeTypesString.FAST_BYPASSER;
+  static override title = NodeTypesString.FAST_BYPASSER;
+  override comfyClass = NodeTypesString.FAST_BYPASSER;
+
+  override readonly modeOn = MODE_ALWAYS;
+  override readonly modeOff = MODE_BYPASS;
+
+  constructor(title = BypasserNode.title) {
+    super(title);
+    this.onConstructed();
+  }
+
+  override async handleAction(action: string) {
+    if (action === "Bypass all") {
+      for (const widget of this.widgets) {
+        this.forceWidgetOff(widget, true);
+      }
+    } else if (action === "Enable all") {
+      for (const widget of this.widgets) {
+        this.forceWidgetOn(widget, true);
+      }
+    } else if (action === "Toggle all") {
+      for (const widget of this.widgets) {
+        this.forceWidgetToggle(widget, true);
+      }
+    }
+  }
+}
+
+app.registerExtension({
+  name: "rgthree.Bypasser",
+  registerCustomNodes() {
+    BypasserNode.setUp();
+  },
+  loadedGraphNode(node: LGraphNode) {
+    if (node.type == BypasserNode.title) {
+      (node as any)._tempWidth = node.size[0];
+    }
+  },
+});

rgthree-comfy/src_web/comfyui/comfy_ui_bar.ts

@@ -0,0 +1,120 @@
+import { app } from "scripts/app.js";
+import { ComfyButtonGroup } from "scripts/ui/components/buttonGroup.js";
+import { ComfyButton } from "scripts/ui/components/button.js";
+import { iconGear, iconStarFilled, logoRgthree } from "rgthree/common/media/svgs.js";
+import { createElement, empty, queryOne } from "rgthree/common/utils_dom.js";
+import { SERVICE as BOOKMARKS_SERVICE } from "./services/bookmarks_services.js";
+import { SERVICE as CONFIG_SERVICE } from "./services/config_service.js";
+import { ComfyPopup } from "scripts/ui/components/popup.js";
+import { RgthreeConfigDialog } from "./config.js";
+
+let rgthreeButtonGroup: ComfyButtonGroup | null = null;
+
+function addRgthreeTopBarButtons() {
+  if (!CONFIG_SERVICE.getFeatureValue("comfy_top_bar_menu.enabled")) {
+    if (rgthreeButtonGroup?.element?.parentElement) {
+      rgthreeButtonGroup.element.parentElement.removeChild(rgthreeButtonGroup.element);
+    }
+    return;
+  } else if (rgthreeButtonGroup) {
+    app.menu?.settingsGroup.element.before(rgthreeButtonGroup.element);
+    return;
+  }
+
+  const buttons = [];
+
+  const rgthreeButton = new ComfyButton({
+    icon: "rgthree",
+    tooltip: "rgthree-comfy",
+    // content: 'rgthree-comfy',
+    app,
+    enabled: true,
+    classList: "comfyui-button comfyui-menu-mobile-collapse primary",
+  });
+  buttons.push(rgthreeButton);
+  rgthreeButton.iconElement.style.width = "1.2rem";
+  rgthreeButton.iconElement.innerHTML = logoRgthree;
+  rgthreeButton.withPopup(
+    new ComfyPopup(
+      { target: rgthreeButton.element, classList: "rgthree-top-menu" },
+      createElement("menu", {
+        children: [
+          createElement("li", {
+            child: createElement("button.rgthree-button-reset", {
+              html: iconGear + "Settings (rgthree-comfy)",
+              onclick: () => new RgthreeConfigDialog().show(),
+            }),
+          }),
+          createElement("li", {
+            child: createElement("button.rgthree-button-reset", {
+              html: iconStarFilled + "Star on Github",
+              onclick: () => window.open("https://github.com/rgthree/rgthree-comfy", "_blank"),
+            }),
+          }),
+        ],
+      }),
+    ),
+    "click",
+  );
+
+  if (CONFIG_SERVICE.getFeatureValue("comfy_top_bar_menu.button_bookmarks.enabled")) {
+    const bookmarksListEl = createElement("menu");
+    bookmarksListEl.appendChild(
+      createElement("li.rgthree-message", {
+        child: createElement("span", { text: "No bookmarks in current workflow." }),
+      }),
+    );
+    const bookmarksButton = new ComfyButton({
+      icon: "bookmark",
+      tooltip: "Workflow Bookmarks (rgthree-comfy)",
+      app,
+    });
+    const bookmarksPopup = new ComfyPopup(
+      { target: bookmarksButton.element, classList: "rgthree-top-menu" },
+      bookmarksListEl,
+    );
+    bookmarksPopup.addEventListener("open", () => {
+      const bookmarks = BOOKMARKS_SERVICE.getCurrentBookmarks();
+      empty(bookmarksListEl);
+      if (bookmarks.length) {
+        for (const b of bookmarks) {
+          bookmarksListEl.appendChild(
+            createElement("li", {
+              child: createElement("button.rgthree-button-reset", {
+                text: `[${b.shortcutKey}] ${b.title}`,
+                onclick: () => {
+                  b.canvasToBookmark();
+                },
+              }),
+            }),
+          );
+        }
+      } else {
+        bookmarksListEl.appendChild(
+          createElement("li.rgthree-message", {
+            child: createElement("span", { text: "No bookmarks in current workflow." }),
+          }),
+        );
+      }
+      bookmarksPopup.update();
+    });
+    bookmarksButton.withPopup(bookmarksPopup, "hover");
+    buttons.push(bookmarksButton);
+  }
+
+  rgthreeButtonGroup = new ComfyButtonGroup(...buttons);
+  app.menu?.settingsGroup.element.before(rgthreeButtonGroup.element);
+}
+
+app.registerExtension({
+  name: "rgthree.TopMenu",
+  async setup() {
+    addRgthreeTopBarButtons();
+
+    CONFIG_SERVICE.addEventListener("config-change", ((e: CustomEvent) => {
+      if (e.detail?.key?.includes("features.comfy_top_bar_menu")) {
+        addRgthreeTopBarButtons();
+      }
+    }) as EventListener);
+  },
+});

rgthree-comfy/src_web/comfyui/config.ts

@@ -0,0 +1,406 @@
+import { app } from "scripts/app.js";
+import { RgthreeDialog, RgthreeDialogOptions } from "rgthree/common/dialog.js";
+import { createElement as $el, query as $$ } from "rgthree/common/utils_dom.js";
+import { checkmark, logoRgthree } from "rgthree/common/media/svgs.js";
+import { LogLevel, rgthree } from "./rgthree.js";
+import { SERVICE as CONFIG_SERVICE } from "./services/config_service.js";
+
+/** Types of config used as a hint for the form handling. */
+enum ConfigType {
+  UNKNOWN,
+  BOOLEAN,
+  STRING,
+  NUMBER,
+  ARRAY,
+}
+
+enum ConfigInputType {
+  UNKNOWN,
+  CHECKLIST, // Which is a multiselect array.
+}
+
+const TYPE_TO_STRING = {
+  [ConfigType.UNKNOWN]: "unknown",
+  [ConfigType.BOOLEAN]: "boolean",
+  [ConfigType.STRING]: "string",
+  [ConfigType.NUMBER]: "number",
+  [ConfigType.ARRAY]: "array",
+};
+
+type ConfigurationSchema = {
+  key: string;
+  type: ConfigType;
+  label: string;
+  inputType?: ConfigInputType,
+  options?: string[] | number[] | ConfigurationSchemaOption[];
+  description?: string;
+  subconfig?: ConfigurationSchema[];
+  isDevOnly?: boolean;
+  onSave?: (value: any) => void;
+};
+
+type ConfigurationSchemaOption = { value: any; label: string };
+
+/**
+ * A static schema of sorts to layout options found in the config.
+ */
+const CONFIGURABLE: { [key: string]: ConfigurationSchema[] } = {
+  features: [
+    {
+      key: "features.progress_bar.enabled",
+      type: ConfigType.BOOLEAN,
+      label: "Prompt Progress Bar",
+      description: `Shows a minimal progress bar for nodes and steps at the top of the app.`,
+      subconfig: [
+        {
+          key: "features.progress_bar.height",
+          type: ConfigType.NUMBER,
+          label: "Height of the bar",
+        },
+        {
+          key: "features.progress_bar.position",
+          type: ConfigType.STRING,
+          label: "Position at top or bottom of window",
+          options: ["top", "bottom"],
+        },
+      ],
+    },
+    {
+      key: "features.import_individual_nodes.enabled",
+      type: ConfigType.BOOLEAN,
+      label: "Import Individual Nodes Widgets",
+      description:
+        "Dragging & Dropping a similar image/JSON workflow onto (most) current workflow nodes" +
+        "will allow you to import that workflow's node's widgets when it has the same " +
+        "id and type. This is useful when you have several images and you'd like to import just " +
+        "one part of a previous iteration, like a seed, or prompt.",
+    },
+  ],
+  menus: [
+    {
+      key: "features.comfy_top_bar_menu.enabled",
+      type: ConfigType.BOOLEAN,
+      label: "Enable Top Bar Menu",
+      description:
+        "Have quick access from ComfyUI's new top bar to rgthree-comfy bookmarks, settings " +
+        "(and more to come).",
+    },
+    {
+      key: "features.menu_queue_selected_nodes",
+      type: ConfigType.BOOLEAN,
+      label: "Show 'Queue Selected Output Nodes'",
+      description:
+        "Will show a menu item in the right-click context menus to queue (only) the selected " +
+        "output nodes.",
+    },
+    {
+      key: "features.menu_auto_nest.subdirs",
+      type: ConfigType.BOOLEAN,
+      label: "Auto Nest Subdirectories in Menus",
+      description:
+        "When a large, flat list of values contain sub-directories, auto nest them. (Like, for " +
+        "a large list of checkpoints).",
+      subconfig: [
+        {
+          key: "features.menu_auto_nest.threshold",
+          type: ConfigType.NUMBER,
+          label: "Number of items needed to trigger nesting.",
+        },
+      ],
+    },
+    {
+      key: "features.menu_bookmarks.enabled",
+      type: ConfigType.BOOLEAN,
+      label: "Show Bookmarks in context menu",
+      description: "Will list bookmarks in the rgthree-comfy right-click context menu.",
+    },
+  ],
+  groups: [
+    {
+      key: "features.group_header_fast_toggle.enabled",
+      type: ConfigType.BOOLEAN,
+      label: "Show fast toggles in Group Headers",
+      description: "Show quick toggles in Groups' Headers to quickly mute, bypass or queue.",
+      subconfig: [
+        {
+          key: "features.group_header_fast_toggle.toggles",
+          type: ConfigType.ARRAY,
+          label: "Which toggles to show.",
+          inputType: ConfigInputType.CHECKLIST,
+          options: [
+            { value: "queue", label: "queue" },
+            { value: "bypass", label: "bypass" },
+            { value: "mute", label: "mute" },
+          ],
+        },
+        {
+          key: "features.group_header_fast_toggle.show",
+          type: ConfigType.STRING,
+          label: "When to show them.",
+          options: [
+            { value: "hover", label: "on hover" },
+            { value: "always", label: "always" },
+          ],
+        },
+      ],
+    },
+  ],
+  advanced: [
+    {
+      key: "features.show_alerts_for_corrupt_workflows",
+      type: ConfigType.BOOLEAN,
+      label: "Detect Corrupt Workflows",
+      description:
+        "Will show a message at the top of the screen when loading a workflow that has " +
+        "corrupt linking data.",
+    },
+    {
+      key: "log_level",
+      type: ConfigType.STRING,
+      label: "Log level for browser dev console.",
+      description:
+        "Further down the list, the more verbose logs to the console will be. For instance, " +
+        "selecting 'IMPORTANT' means only important message will be logged to the browser " +
+        "console, while selecting 'WARN' will log all messages at or higher than WARN, including " +
+        "'ERROR' and 'IMPORTANT' etc.",
+      options: ["IMPORTANT", "ERROR", "WARN", "INFO", "DEBUG", "DEV"],
+      isDevOnly: true,
+      onSave: function (value: LogLevel) {
+        rgthree.setLogLevel(value);
+      },
+    },
+    {
+      key: "features.invoke_extensions_async.node_created",
+      type: ConfigType.BOOLEAN,
+      label: "Allow other extensions to call nodeCreated on rgthree-nodes.",
+      isDevOnly: true,
+      description:
+        "Do not disable unless you are having trouble (and then file an issue at rgthree-comfy)." +
+        "Prior to Apr 2024 it was not possible for other extensions to invoke their nodeCreated " +
+        "event on some rgthree-comfy nodes. Now it's possible and this option is only here in " +
+        "for easy if something is wrong.",
+    },
+  ],
+};
+
+/**
+ * Creates a new fieldrow for main or sub configuration items.
+ */
+function fieldrow(item: ConfigurationSchema) {
+  const initialValue = CONFIG_SERVICE.getConfigValue(item.key);
+  const container = $el(`div.fieldrow.-type-${TYPE_TO_STRING[item.type]}`, {
+    dataset: {
+      name: item.key,
+      initial: initialValue,
+      type: item.type,
+    },
+  });
+
+  $el(`label[for="${item.key}"]`, {
+    children: [
+      $el(`span[text="${item.label}"]`),
+      item.description ? $el("small", { html: item.description }) : null,
+    ],
+    parent: container,
+  });
+
+  let input;
+  if (item.options?.length) {
+    if (item.inputType === ConfigInputType.CHECKLIST) {
+      const initialValueList = initialValue || [];
+      input = $el<HTMLSelectElement>(`fieldset.rgthree-checklist-group[id="${item.key}"]`, {
+        parent: container,
+        children: item.options.map((o) => {
+          const label = (o as ConfigurationSchemaOption).label || String(o);
+          const value = (o as ConfigurationSchemaOption).value || o;
+          const id = `${item.key}_${value}`;
+          return $el<HTMLSpanElement>(`span.rgthree-checklist-item`, {
+            children: [
+              $el<HTMLInputElement>(`input[type="checkbox"][value="${value}"]`, {
+                id,
+                checked: initialValueList.includes(value),
+              }),
+              $el<HTMLInputElement>(`label`, {
+                for: id,
+                text: label,
+              })
+            ]
+          });
+        }),
+      });
+    } else {
+      input = $el<HTMLSelectElement>(`select[id="${item.key}"]`, {
+        parent: container,
+        children: item.options.map((o) => {
+          const label = (o as ConfigurationSchemaOption).label || String(o);
+          const value = (o as ConfigurationSchemaOption).value || o;
+          const valueSerialized = JSON.stringify({ value: value });
+          return $el<HTMLOptionElement>(`option[value="${valueSerialized}"]`, {
+            text: label,
+            selected: valueSerialized === JSON.stringify({ value: initialValue }),
+          });
+        }),
+      });
+    }
+  } else if (item.type === ConfigType.BOOLEAN) {
+    container.classList.toggle("-checked", !!initialValue);
+    input = $el<HTMLInputElement>(`input[type="checkbox"][id="${item.key}"]`, {
+      parent: container,
+      checked: initialValue,
+    });
+  } else {
+    input = $el(`input[id="${item.key}"]`, {
+      parent: container,
+      value: initialValue,
+    });
+  }
+  $el("div.fieldrow-value", { children: [input], parent: container });
+  return container;
+}
+
+/**
+ * A dialog to edit rgthree-comfy settings and config.
+ */
+export class RgthreeConfigDialog extends RgthreeDialog {
+  constructor() {
+    const content = $el("div");
+
+    content.appendChild(RgthreeConfigDialog.buildFieldset(CONFIGURABLE["features"]!, "Features"));
+    content.appendChild(RgthreeConfigDialog.buildFieldset(CONFIGURABLE["menus"]!, "Menus"));
+    content.appendChild(RgthreeConfigDialog.buildFieldset(CONFIGURABLE["groups"]!, "Groups"));
+    content.appendChild(RgthreeConfigDialog.buildFieldset(CONFIGURABLE["advanced"]!, "Advanced"));
+
+    content.addEventListener("input", (e) => {
+      const changed = this.getChangedFormData();
+      ($$(".save-button", this.element)[0] as HTMLButtonElement).disabled =
+        !Object.keys(changed).length;
+    });
+    content.addEventListener("change", (e) => {
+      const changed = this.getChangedFormData();
+      ($$(".save-button", this.element)[0] as HTMLButtonElement).disabled =
+        !Object.keys(changed).length;
+    });
+
+    const dialogOptions: RgthreeDialogOptions = {
+      class: "-iconed -settings",
+      title: logoRgthree + `<h2>Settings - rgthree-comfy</h2>`,
+      content,
+      onBeforeClose: () => {
+        const changed = this.getChangedFormData();
+        if (Object.keys(changed).length) {
+          return confirm("Looks like there are unsaved changes. Are you sure you want close?");
+        }
+        return true;
+      },
+      buttons: [
+        {
+          label: "Save",
+          disabled: true,
+          className: "rgthree-button save-button -blue",
+          callback: async (e) => {
+            const changed = this.getChangedFormData();
+            if (!Object.keys(changed).length) {
+              this.close();
+              return;
+            }
+            const success = await CONFIG_SERVICE.setConfigValues(changed);
+            if (success) {
+              for (const key of Object.keys(changed)) {
+                Object.values(CONFIGURABLE)
+                  .flat()
+                  .find((f) => f.key === key)
+                  ?.onSave?.(changed[key]);
+              }
+              this.close();
+              rgthree.showMessage({
+                id: "config-success",
+                message: `${checkmark} Successfully saved rgthree-comfy settings!`,
+                timeout: 4000,
+              });
+              ($$(".save-button", this.element)[0] as HTMLButtonElement).disabled = true;
+            } else {
+              alert("There was an error saving rgthree-comfy configuration.");
+            }
+          },
+        },
+      ],
+    };
+    super(dialogOptions);
+  }
+
+  private static buildFieldset(datas: ConfigurationSchema[], label: string) {
+    const fieldset = $el(`fieldset`, { children: [$el(`legend[text="${label}"]`)] });
+    for (const data of datas) {
+      if (data.isDevOnly && !rgthree.isDevMode()) {
+        continue;
+      }
+      const container = $el("div.formrow");
+      container.appendChild(fieldrow(data));
+
+      if (data.subconfig) {
+        for (const subfeature of data.subconfig) {
+          container.appendChild(fieldrow(subfeature));
+        }
+      }
+      fieldset.appendChild(container);
+    }
+    return fieldset;
+  }
+
+  getChangedFormData() {
+    return $$("[data-name]", this.contentElement).reduce((acc: { [key: string]: any }, el) => {
+      const name = el.dataset["name"]!;
+      const type = el.dataset["type"]!;
+      const initialValue = CONFIG_SERVICE.getConfigValue(name);
+      let currentValueEl = $$("fieldset.rgthree-checklist-group, input, textarea, select", el)[0] as HTMLInputElement;
+      let currentValue: any = null;
+      if (type === String(ConfigType.BOOLEAN)) {
+        currentValue = currentValueEl.checked;
+        // Not sure I like this side effect in here, but it's easy to just do it now.
+        el.classList.toggle("-checked", currentValue);
+      } else {
+        currentValue = currentValueEl?.value;
+        if (currentValueEl.nodeName === "SELECT") {
+          currentValue = JSON.parse(currentValue).value;
+        } else if (currentValueEl.classList.contains('rgthree-checklist-group')) {
+          currentValue = [];
+          for (const check of $$<HTMLInputElement>('input[type="checkbox"]', currentValueEl)) {
+            if (check.checked) {
+              currentValue.push(check.value);
+            }
+          }
+        } else if (type === String(ConfigType.NUMBER)) {
+          currentValue = Number(currentValue) || initialValue;
+        }
+      }
+      if (JSON.stringify(currentValue) !== JSON.stringify(initialValue)) {
+        acc[name] = currentValue;
+      }
+      return acc;
+    }, {});
+  }
+}
+
+app.ui.settings.addSetting({
+  id: "rgthree.config",
+  name: "Open rgthree-comfy config",
+  type: () => {
+    // Adds a row to open the dialog from the ComfyUI settings.
+    return $el("tr.rgthree-comfyui-settings-row", {
+      children: [
+        $el("td", {
+          child: `<div>${logoRgthree} [rgthree-comfy] configuration / settings</div>`,
+        }),
+        $el("td", {
+          child: $el('button.rgthree-button.-blue[text="rgthree-comfy settings"]', {
+            events: {
+              click: (e: PointerEvent) => {
+                new RgthreeConfigDialog().show();
+              },
+            },
+          }),
+        }),
+      ],
+    });
+  },
+});

rgthree-comfy/src_web/comfyui/constants.ts

@@ -0,0 +1,62 @@
+import {SERVICE as CONFIG_SERVICE} from "./services/config_service.js";
+
+export function addRgthree(str: string) {
+  return str + " (rgthree)";
+}
+
+export function stripRgthree(str: string) {
+  return str.replace(/\s*\(rgthree\)$/, "");
+}
+
+export const NodeTypesString = {
+  ANY_SWITCH: addRgthree("Any Switch"),
+  CONTEXT: addRgthree("Context"),
+  CONTEXT_BIG: addRgthree("Context Big"),
+  CONTEXT_SWITCH: addRgthree("Context Switch"),
+  CONTEXT_SWITCH_BIG: addRgthree("Context Switch Big"),
+  CONTEXT_MERGE: addRgthree("Context Merge"),
+  CONTEXT_MERGE_BIG: addRgthree("Context Merge Big"),
+  DYNAMIC_CONTEXT: addRgthree("Dynamic Context"),
+  DYNAMIC_CONTEXT_SWITCH: addRgthree("Dynamic Context Switch"),
+  DISPLAY_ANY: addRgthree("Display Any"),
+  NODE_MODE_RELAY: addRgthree("Mute / Bypass Relay"),
+  NODE_MODE_REPEATER: addRgthree("Mute / Bypass Repeater"),
+  FAST_MUTER: addRgthree("Fast Muter"),
+  FAST_BYPASSER: addRgthree("Fast Bypasser"),
+  FAST_GROUPS_MUTER: addRgthree("Fast Groups Muter"),
+  FAST_GROUPS_BYPASSER: addRgthree("Fast Groups Bypasser"),
+  FAST_ACTIONS_BUTTON: addRgthree("Fast Actions Button"),
+  LABEL: addRgthree("Label"),
+  POWER_PROMPT: addRgthree("Power Prompt"),
+  POWER_PROMPT_SIMPLE: addRgthree("Power Prompt - Simple"),
+  SDXL_EMPTY_LATENT_IMAGE: addRgthree("SDXL Empty Latent Image"),
+  SDXL_POWER_PROMPT_POSITIVE: addRgthree("SDXL Power Prompt - Positive"),
+  SDXL_POWER_PROMPT_NEGATIVE: addRgthree("SDXL Power Prompt - Simple / Negative"),
+  POWER_LORA_LOADER: addRgthree("Power Lora Loader"),
+  KSAMPLER_CONFIG: addRgthree("KSampler Config"),
+  NODE_COLLECTOR: addRgthree("Node Collector"),
+  REROUTE: addRgthree("Reroute"),
+  RANDOM_UNMUTER: addRgthree("Random Unmuter"),
+  SEED: addRgthree("Seed"),
+  BOOKMARK: addRgthree("Bookmark"),
+  IMAGE_COMPARER: addRgthree("Image Comparer"),
+  IMAGE_INSET_CROP: addRgthree("Image Inset Crop"),
+};
+
+/**
+ * Gets the list of nodes from NoteTypeString above, filtering any that are not applicable.
+ */
+export function getNodeTypeStrings() {
+  return Object.values(NodeTypesString)
+    .map((i) => stripRgthree(i))
+    .filter((i) => {
+      if (
+        i.startsWith("Dynamic Context") &&
+        !CONFIG_SERVICE.getConfigValue("unreleased.dynamic_context.enabled")
+      ) {
+        return false;
+      }
+      return true;
+    })
+    .sort();
+}

rgthree-comfy/src_web/comfyui/context.ts

@@ -0,0 +1,483 @@
+import type {
+  INodeInputSlot,
+  INodeOutputSlot,
+  LGraphCanvas as TLGraphCanvas,
+  LGraphNode as TLGraphNode,
+  LLink,
+} from "typings/litegraph.js";
+import type { ComfyNodeConstructor, ComfyObjectInfo } from "typings/comfy.js";
+import { app } from "scripts/app.js";
+import {
+  IoDirection,
+  addConnectionLayoutSupport,
+  addMenuItem,
+  matchLocalSlotsToServer,
+  replaceNode,
+} from "./utils.js";
+import { RgthreeBaseServerNode } from "./base_node.js";
+import { SERVICE as KEY_EVENT_SERVICE } from "./services/key_events_services.js";
+import { RgthreeBaseServerNodeConstructor } from "typings/rgthree.js";
+import { debounce, wait } from "rgthree/common/shared_utils.js";
+import { removeUnusedInputsFromEnd } from "./utils_inputs_outputs.js";
+import { NodeTypesString } from "./constants.js";
+
+/**
+ * Takes a non-context node and determins for its input or output slot, if there is a valid
+ * connection for an opposite context output or input slot.
+ */
+function findMatchingIndexByTypeOrName(
+  otherNode: TLGraphNode,
+  otherSlot: INodeInputSlot | INodeOutputSlot,
+  ctxSlots: INodeInputSlot[] | INodeOutputSlot[],
+) {
+  const otherNodeType = (otherNode.type || "").toUpperCase();
+  const otherNodeName = (otherNode.title || "").toUpperCase();
+  let otherSlotType = otherSlot.type as string;
+  if (Array.isArray(otherSlotType) || otherSlotType.includes(",")) {
+    otherSlotType = "COMBO";
+  }
+  const otherSlotName = otherSlot.name.toUpperCase().replace("OPT_", "").replace("_NAME", "");
+  let ctxSlotIndex = -1;
+  if (["CONDITIONING", "INT", "STRING", "FLOAT", "COMBO"].includes(otherSlotType)) {
+    ctxSlotIndex = ctxSlots.findIndex((ctxSlot) => {
+      const ctxSlotName = ctxSlot.name.toUpperCase().replace("OPT_", "").replace("_NAME", "");
+      let ctxSlotType = ctxSlot.type as string;
+      if (Array.isArray(ctxSlotType) || ctxSlotType.includes(",")) {
+        ctxSlotType = "COMBO";
+      }
+      if (ctxSlotType !== otherSlotType) {
+        return false;
+      }
+      // Straightforward matches.
+      if (
+        ctxSlotName === otherSlotName ||
+        (ctxSlotName === "SEED" && otherSlotName.includes("SEED")) ||
+        (ctxSlotName === "STEP_REFINER" && otherSlotName.includes("AT_STEP")) ||
+        (ctxSlotName === "STEP_REFINER" && otherSlotName.includes("REFINER_STEP"))
+      ) {
+        return true;
+      }
+      // If postive other node, try to match conditining and text.
+      if (
+        (otherNodeType.includes("POSITIVE") || otherNodeName.includes("POSITIVE")) &&
+        ((ctxSlotName === "POSITIVE" && otherSlotType === "CONDITIONING") ||
+          (ctxSlotName === "TEXT_POS_G" && otherSlotName.includes("TEXT_G")) ||
+          (ctxSlotName === "TEXT_POS_L" && otherSlotName.includes("TEXT_L")))
+      ) {
+        return true;
+      }
+      if (
+        (otherNodeType.includes("NEGATIVE") || otherNodeName.includes("NEGATIVE")) &&
+        ((ctxSlotName === "NEGATIVE" && otherSlotType === "CONDITIONING") ||
+          (ctxSlotName === "TEXT_NEG_G" && otherSlotName.includes("TEXT_G")) ||
+          (ctxSlotName === "TEXT_NEG_L" && otherSlotName.includes("TEXT_L")))
+      ) {
+        return true;
+      }
+      return false;
+    });
+  } else {
+    ctxSlotIndex = ctxSlots.map((s) => s.type).indexOf(otherSlotType);
+  }
+  return ctxSlotIndex;
+}
+
+/**
+ * A Base Context node for other context based nodes to extend.
+ */
+export class BaseContextNode extends RgthreeBaseServerNode {
+  constructor(title: string) {
+    super(title);
+  }
+
+  // LiteGraph adds more spacing than we want when calculating a nodes' `_collapsed_width`, so we'll
+  // override it with a setter and re-set it measured exactly as we want.
+  ___collapsed_width: number = 0;
+
+  //@ts-ignore - TS Doesn't like us overriding a property with accessors but, too bad.
+  override get _collapsed_width() {
+    return this.___collapsed_width;
+  }
+
+  override set _collapsed_width(width: number) {
+    const canvas = app.canvas as TLGraphCanvas;
+    const ctx = canvas.canvas.getContext("2d")!;
+    const oldFont = ctx.font;
+    ctx.font = canvas.title_text_font;
+    let title = this.title.trim();
+    this.___collapsed_width = 30 + (title ? 10 + ctx.measureText(title).width : 0);
+    ctx.font = oldFont;
+  }
+
+  override connectByType<T = any>(
+    slot: string | number,
+    sourceNode: TLGraphNode,
+    sourceSlotType: string,
+    optsIn: string,
+  ): T | null {
+    let canConnect =
+      super.connectByType &&
+      super.connectByType.call(this, slot, sourceNode, sourceSlotType, optsIn);
+    if (!super.connectByType) {
+      canConnect = LGraphNode.prototype.connectByType.call(
+        this,
+        slot,
+        sourceNode,
+        sourceSlotType,
+        optsIn,
+      );
+    }
+    if (!canConnect && slot === 0) {
+      const ctrlKey = KEY_EVENT_SERVICE.ctrlKey;
+      // Okay, we've dragged a context and it can't connect.. let's connect all the other nodes.
+      // Unfortunately, we don't know which are null now, so we'll just connect any that are
+      // not already connected.
+      for (const [index, input] of (sourceNode.inputs || []).entries()) {
+        if (input.link && !ctrlKey) {
+          continue;
+        }
+        const thisOutputSlot = findMatchingIndexByTypeOrName(sourceNode, input, this.outputs);
+        if (thisOutputSlot > -1) {
+          this.connect(thisOutputSlot, sourceNode, index);
+        }
+      }
+    }
+    return null;
+  }
+
+  override connectByTypeOutput<T = any>(
+    slot: string | number,
+    sourceNode: TLGraphNode,
+    sourceSlotType: string,
+    optsIn: string,
+  ): T | null {
+    let canConnect =
+      super.connectByTypeOutput &&
+      super.connectByTypeOutput.call(this, slot, sourceNode, sourceSlotType, optsIn);
+    if (!super.connectByType) {
+      canConnect = LGraphNode.prototype.connectByTypeOutput.call(
+        this,
+        slot,
+        sourceNode,
+        sourceSlotType,
+        optsIn,
+      );
+    }
+    if (!canConnect && slot === 0) {
+      const ctrlKey = KEY_EVENT_SERVICE.ctrlKey;
+      // Okay, we've dragged a context and it can't connect.. let's connect all the other nodes.
+      // Unfortunately, we don't know which are null now, so we'll just connect any that are
+      // not already connected.
+      for (const [index, output] of (sourceNode.outputs || []).entries()) {
+        if (output.links?.length && !ctrlKey) {
+          continue;
+        }
+        const thisInputSlot = findMatchingIndexByTypeOrName(sourceNode, output, this.inputs);
+        if (thisInputSlot > -1) {
+          sourceNode.connect(index, this, thisInputSlot);
+        }
+      }
+    }
+    return null;
+  }
+
+  static override setUp(
+    comfyClass: ComfyNodeConstructor,
+    nodeData: ComfyObjectInfo,
+    ctxClass: RgthreeBaseServerNodeConstructor,
+  ) {
+    RgthreeBaseServerNode.registerForOverride(comfyClass, nodeData, ctxClass);
+    // [🤮] ComfyUI only adds "required" inputs to the outputs list when dragging an output to
+    // empty space, but since RGTHREE_CONTEXT is optional, it doesn't get added to the menu because
+    // ...of course. So, we'll manually add it. Of course, we also have to do this in a timeout
+    // because ComfyUI clears out `LiteGraph.slot_types_default_out` in its own 'Comfy.SlotDefaults'
+    // extension and we need to wait for that to happen.
+    wait(500).then(() => {
+      LiteGraph.slot_types_default_out["RGTHREE_CONTEXT"] =
+        LiteGraph.slot_types_default_out["RGTHREE_CONTEXT"] || [];
+      LiteGraph.slot_types_default_out["RGTHREE_CONTEXT"].push(comfyClass.comfyClass);
+    });
+  }
+
+  static override onRegisteredForOverride(comfyClass: any, ctxClass: any) {
+    addConnectionLayoutSupport(ctxClass, app, [
+      ["Left", "Right"],
+      ["Right", "Left"],
+    ]);
+    setTimeout(() => {
+      ctxClass.category = comfyClass.category;
+    });
+  }
+}
+
+/**
+ * The original Context node.
+ */
+class ContextNode extends BaseContextNode {
+  static override title = NodeTypesString.CONTEXT;
+  static override type = NodeTypesString.CONTEXT;
+  static comfyClass = NodeTypesString.CONTEXT;
+
+  constructor(title = ContextNode.title) {
+    super(title);
+  }
+
+  static override setUp(comfyClass: ComfyNodeConstructor, nodeData: ComfyObjectInfo) {
+    BaseContextNode.setUp(comfyClass, nodeData, ContextNode);
+  }
+
+  static override onRegisteredForOverride(comfyClass: any, ctxClass: any) {
+    BaseContextNode.onRegisteredForOverride(comfyClass, ctxClass);
+    addMenuItem(ContextNode, app, {
+      name: "Convert To Context Big",
+      callback: (node) => {
+        replaceNode(node, ContextBigNode.type);
+      },
+    });
+  }
+}
+
+/**
+ * The Context Big node.
+ */
+class ContextBigNode extends BaseContextNode {
+  static override title = NodeTypesString.CONTEXT_BIG;
+  static override type = NodeTypesString.CONTEXT_BIG;
+  static comfyClass = NodeTypesString.CONTEXT_BIG;
+
+  constructor(title = ContextBigNode.title) {
+    super(title);
+  }
+
+  static override setUp(comfyClass: ComfyNodeConstructor, nodeData: ComfyObjectInfo) {
+    BaseContextNode.setUp(comfyClass, nodeData, ContextBigNode);
+  }
+
+  static override onRegisteredForOverride(comfyClass: any, ctxClass: any) {
+    BaseContextNode.onRegisteredForOverride(comfyClass, ctxClass);
+    addMenuItem(ContextBigNode, app, {
+      name: "Convert To Context (Original)",
+      callback: (node) => {
+        replaceNode(node, ContextNode.type);
+      },
+    });
+  }
+}
+
+/**
+ * A base node for Context Switche nodes and Context Merges nodes that will always add another empty
+ * ctx input, no less than five.
+ */
+class BaseContextMultiCtxInputNode extends BaseContextNode {
+  private stabilizeBound = this.stabilize.bind(this);
+
+  constructor(title: string) {
+    super(title);
+    // Adding five. Note, configure will add as many as was in the stored workflow automatically.
+    this.addContextInput(5);
+  }
+
+  private addContextInput(num = 1) {
+    for (let i = 0; i < num; i++) {
+      this.addInput(`ctx_${String(this.inputs.length + 1).padStart(2, "0")}`, "RGTHREE_CONTEXT");
+    }
+  }
+
+  override onConnectionsChange(
+    type: number,
+    slotIndex: number,
+    isConnected: boolean,
+    link: LLink,
+    ioSlot: INodeInputSlot | INodeOutputSlot,
+  ): void {
+    super.onConnectionsChange?.apply(this, [...arguments] as any);
+    if (type === LiteGraph.INPUT) {
+      this.scheduleStabilize();
+    }
+  }
+
+  private scheduleStabilize(ms = 64) {
+    return debounce(this.stabilizeBound, 64);
+  }
+
+  /**
+   * Stabilizes the inputs; removing any disconnected ones from the bottom, then adding an empty
+   * one to the end so we always have one empty one to expand.
+   */
+  private stabilize() {
+    removeUnusedInputsFromEnd(this, 4);
+    this.addContextInput();
+  }
+}
+
+/**
+ * The Context Switch (original) node.
+ */
+class ContextSwitchNode extends BaseContextMultiCtxInputNode {
+  static override title = NodeTypesString.CONTEXT_SWITCH;
+  static override type = NodeTypesString.CONTEXT_SWITCH;
+  static comfyClass = NodeTypesString.CONTEXT_SWITCH;
+
+  constructor(title = ContextSwitchNode.title) {
+    super(title);
+  }
+
+  static override setUp(comfyClass: ComfyNodeConstructor, nodeData: ComfyObjectInfo) {
+    BaseContextNode.setUp(comfyClass, nodeData, ContextSwitchNode);
+  }
+
+  static override onRegisteredForOverride(comfyClass: any, ctxClass: any) {
+    BaseContextNode.onRegisteredForOverride(comfyClass, ctxClass);
+    addMenuItem(ContextSwitchNode, app, {
+      name: "Convert To Context Switch Big",
+      callback: (node) => {
+        replaceNode(node, ContextSwitchBigNode.type);
+      },
+    });
+  }
+}
+
+/**
+ * The Context Switch Big node.
+ */
+class ContextSwitchBigNode extends BaseContextMultiCtxInputNode {
+  static override title = NodeTypesString.CONTEXT_SWITCH_BIG;
+  static override type = NodeTypesString.CONTEXT_SWITCH_BIG;
+  static comfyClass = NodeTypesString.CONTEXT_SWITCH_BIG;
+
+  constructor(title = ContextSwitchBigNode.title) {
+    super(title);
+  }
+
+  static override setUp(comfyClass: ComfyNodeConstructor, nodeData: ComfyObjectInfo) {
+    BaseContextNode.setUp(comfyClass, nodeData, ContextSwitchBigNode);
+  }
+
+  static override onRegisteredForOverride(comfyClass: any, ctxClass: any) {
+    BaseContextNode.onRegisteredForOverride(comfyClass, ctxClass);
+    addMenuItem(ContextSwitchBigNode, app, {
+      name: "Convert To Context Switch",
+      callback: (node) => {
+        replaceNode(node, ContextSwitchNode.type);
+      },
+    });
+  }
+}
+
+/**
+ * The Context Merge (original) node.
+ */
+class ContextMergeNode extends BaseContextMultiCtxInputNode {
+  static override title = NodeTypesString.CONTEXT_MERGE;
+  static override type = NodeTypesString.CONTEXT_MERGE;
+  static comfyClass = NodeTypesString.CONTEXT_MERGE;
+
+  constructor(title = ContextMergeNode.title) {
+    super(title);
+  }
+
+  static override setUp(comfyClass: ComfyNodeConstructor, nodeData: ComfyObjectInfo) {
+    BaseContextNode.setUp(comfyClass, nodeData, ContextMergeNode);
+  }
+
+  static override onRegisteredForOverride(comfyClass: any, ctxClass: any) {
+    BaseContextNode.onRegisteredForOverride(comfyClass, ctxClass);
+    addMenuItem(ContextMergeNode, app, {
+      name: "Convert To Context Merge Big",
+      callback: (node) => {
+        replaceNode(node, ContextMergeBigNode.type);
+      },
+    });
+  }
+}
+
+/**
+ * The Context Switch Big node.
+ */
+class ContextMergeBigNode extends BaseContextMultiCtxInputNode {
+  static override title = NodeTypesString.CONTEXT_MERGE_BIG;
+  static override type = NodeTypesString.CONTEXT_MERGE_BIG;
+  static comfyClass = NodeTypesString.CONTEXT_MERGE_BIG;
+
+  constructor(title = ContextMergeBigNode.title) {
+    super(title);
+  }
+
+  static override setUp(comfyClass: ComfyNodeConstructor, nodeData: ComfyObjectInfo) {
+    BaseContextNode.setUp(comfyClass, nodeData, ContextMergeBigNode);
+  }
+
+  static override onRegisteredForOverride(comfyClass: any, ctxClass: any) {
+    BaseContextNode.onRegisteredForOverride(comfyClass, ctxClass);
+    addMenuItem(ContextMergeBigNode, app, {
+      name: "Convert To Context Switch",
+      callback: (node) => {
+        replaceNode(node, ContextMergeNode.type);
+      },
+    });
+  }
+}
+
+const contextNodes = [
+  ContextNode,
+  ContextBigNode,
+  ContextSwitchNode,
+  ContextSwitchBigNode,
+  ContextMergeNode,
+  ContextMergeBigNode,
+];
+const contextTypeToServerDef: { [type: string]: ComfyObjectInfo } = {};
+
+function fixBadConfigs(node: ContextNode) {
+  // Dumb mistake, but let's fix our mispelling. This will probably need to stay in perpetuity to
+  // keep any old workflows operating.
+  const wrongName = node.outputs.find((o, i) => o.name === "CLIP_HEIGTH");
+  if (wrongName) {
+    wrongName.name = "CLIP_HEIGHT";
+  }
+}
+
+app.registerExtension({
+  name: "rgthree.Context",
+  async beforeRegisterNodeDef(nodeType: ComfyNodeConstructor, nodeData: ComfyObjectInfo) {
+    // Loop over out context nodes and see if any match the server data.
+    for (const ctxClass of contextNodes) {
+      if (nodeData.name === ctxClass.type) {
+        contextTypeToServerDef[ctxClass.type] = nodeData;
+        ctxClass.setUp(nodeType, nodeData);
+        break;
+      }
+    }
+  },
+
+  async nodeCreated(node: TLGraphNode) {
+    const type = node.type || (node.constructor as any).type;
+    const serverDef = type && contextTypeToServerDef[type];
+    if (serverDef) {
+      fixBadConfigs(node as ContextNode);
+      matchLocalSlotsToServer(node, IoDirection.OUTPUT, serverDef);
+      // Switches don't need to change inputs, only context outputs
+      if (!type!.includes("Switch") && !type!.includes("Merge")) {
+        matchLocalSlotsToServer(node, IoDirection.INPUT, serverDef);
+      }
+      // }, 100);
+    }
+  },
+
+  /**
+   * When we're loaded from the server, check if we're using an out of date version and update our
+   * inputs / outputs to match.
+   */
+  async loadedGraphNode(node: TLGraphNode) {
+    const type = node.type || (node.constructor as any).type;
+    const serverDef = type && contextTypeToServerDef[type];
+    if (serverDef) {
+      fixBadConfigs(node as ContextNode);
+      matchLocalSlotsToServer(node, IoDirection.OUTPUT, serverDef);
+      // Switches don't need to change inputs, only context outputs
+      if (!type!.includes("Switch") && !type!.includes("Merge")) {
+        matchLocalSlotsToServer(node, IoDirection.INPUT, serverDef);
+      }
+    }
+  },
+});

rgthree-comfy/src_web/comfyui/dialog_info.ts

@@ -0,0 +1,421 @@
+import {RgthreeDialog, RgthreeDialogOptions} from "rgthree/common/dialog.js";
+import {
+  createElement as $el,
+  empty,
+  appendChildren,
+  getClosestOrSelf,
+  queryOne,
+  query,
+  setAttributes,
+} from "rgthree/common/utils_dom.js";
+import {
+  logoCivitai,
+  link,
+  pencilColored,
+  diskColored,
+  dotdotdot,
+} from "rgthree/common/media/svgs.js";
+import {RgthreeModelInfo} from "typings/rgthree.js";
+import {LORA_INFO_SERVICE} from "rgthree/common/model_info_service.js";
+import {rgthree} from "./rgthree.js";
+import {MenuButton} from "rgthree/common/menu.js";
+import {generateId, injectCss} from "rgthree/common/shared_utils.js";
+import {rgthreeApi} from "rgthree/common/rgthree_api.js";
+
+/**
+ * A dialog that displays information about a model/lora/etc.
+ */
+abstract class RgthreeInfoDialog extends RgthreeDialog {
+  private modifiedModelData = false;
+  private modelInfo: RgthreeModelInfo | null = null;
+
+  constructor(file: string, type: string = "lora") {
+    const dialogOptions: RgthreeDialogOptions = {
+      class: "rgthree-info-dialog",
+      title: `<h2>Loading...</h2>`,
+      content: "<center>Loading..</center>",
+      onBeforeClose: () => {
+        return true;
+      },
+    };
+    super(dialogOptions);
+    this.init(file);
+  }
+
+  abstract getModelInfo(file: string): Promise<RgthreeModelInfo | null>;
+  abstract refreshModelInfo(file: string): Promise<RgthreeModelInfo | null>;
+  abstract clearModelInfo(file: string): Promise<RgthreeModelInfo | null>;
+
+  private async init(file: string) {
+    const cssPromise = injectCss("rgthree/common/css/dialog_model_info.css");
+    this.modelInfo = await this.getModelInfo(file);
+    await cssPromise;
+    this.setContent(this.getInfoContent());
+    this.setTitle(this.modelInfo?.["name"] || this.modelInfo?.["file"] || "Unknown");
+    this.attachEvents();
+  }
+
+  protected override getCloseEventDetail(): {detail: any} {
+    const detail = {
+      dirty: this.modifiedModelData,
+    };
+    return {detail};
+  }
+
+  private attachEvents() {
+    this.contentElement.addEventListener("click", async (e: MouseEvent) => {
+      const target = getClosestOrSelf(e.target as HTMLElement, "[data-action]");
+      const action = target?.getAttribute("data-action");
+      if (!target || !action) {
+        return;
+      }
+      await this.handleEventAction(action, target, e);
+    });
+  }
+
+  private async handleEventAction(action: string, target: HTMLElement, e?: Event) {
+    const info = this.modelInfo!;
+    if (!info?.file) {
+      return;
+    }
+    if (action === "fetch-civitai") {
+      this.modelInfo = await this.refreshModelInfo(info.file);
+      this.setContent(this.getInfoContent());
+      this.setTitle(this.modelInfo?.["name"] || this.modelInfo?.["file"] || "Unknown");
+    } else if (action === "copy-trained-words") {
+      const selected = query(".-rgthree-is-selected", target.closest("tr")!);
+      const text = selected.map((el) => el.getAttribute("data-word")).join(", ");
+      await navigator.clipboard.writeText(text);
+      rgthree.showMessage({
+        id: "copy-trained-words-" + generateId(4),
+        type: "success",
+        message: `Successfully copied ${selected.length} key word${
+          selected.length === 1 ? "" : "s"
+        }.`,
+        timeout: 4000,
+      });
+    } else if (action === "toggle-trained-word") {
+      target?.classList.toggle("-rgthree-is-selected");
+      const tr = target.closest("tr");
+      if (tr) {
+        const span = queryOne("td:first-child > *", tr)!;
+        let small = queryOne("small", span);
+        if (!small) {
+          small = $el("small", {parent: span});
+        }
+        const num = query(".-rgthree-is-selected", tr).length;
+        small.innerHTML = num
+          ? `${num} selected | <span role="button" data-action="copy-trained-words">Copy</span>`
+          : "";
+        // this.handleEventAction('copy-trained-words', target, e);
+      }
+    } else if (action === "edit-row") {
+      const tr = target!.closest("tr")!;
+      const td = queryOne("td:nth-child(2)", tr)!;
+      const input = td.querySelector("input,textarea");
+      if (!input) {
+        const fieldName = tr.dataset["fieldName"] as string;
+        tr.classList.add("-rgthree-editing");
+        const isTextarea = fieldName === "userNote";
+        const input = $el(`${isTextarea ? "textarea" : 'input[type="text"]'}`, {
+          value: td.textContent,
+        });
+        input.addEventListener("keydown", (e) => {
+          if (!isTextarea && e.key === "Enter") {
+            const modified = saveEditableRow(info!, tr, true);
+            this.modifiedModelData = this.modifiedModelData || modified;
+            e.stopPropagation();
+            e.preventDefault();
+          } else if (e.key === "Escape") {
+            const modified = saveEditableRow(info!, tr, false);
+            this.modifiedModelData = this.modifiedModelData || modified;
+            e.stopPropagation();
+            e.preventDefault();
+          }
+        });
+        appendChildren(empty(td), [input]);
+        input.focus();
+      } else if (target!.nodeName.toLowerCase() === "button") {
+        const modified = saveEditableRow(info!, tr, true);
+        this.modifiedModelData = this.modifiedModelData || modified;
+      }
+      e?.preventDefault();
+      e?.stopPropagation();
+    }
+  }
+
+  private getInfoContent() {
+    const info = this.modelInfo || {};
+    const civitaiLink = info.links?.find((i) => i.includes("civitai.com/models"));
+    const html = `
+      <ul class="rgthree-info-area">
+        <li title="Type" class="rgthree-info-tag -type -type-${(
+          info.type || ""
+        ).toLowerCase()}"><span>${info.type || ""}</span></li>
+        <li title="Base Model" class="rgthree-info-tag -basemodel -basemodel-${(
+          info.baseModel || ""
+        ).toLowerCase()}"><span>${info.baseModel || ""}</span></li>
+        <li class="rgthree-info-menu" stub="menu"></li>
+        ${
+          ""
+          //   !civitaiLink
+          //     ? ""
+          //     : `
+          //   <li title="Visit on Civitai" class="-link -civitai"><a href="${civitaiLink}" target="_blank">Civitai ${link}</a></li>
+          // `
+        }
+      </ul>
+
+      <table class="rgthree-info-table">
+        ${infoTableRow("File", info.file || "")}
+        ${infoTableRow("Hash (sha256)", info.sha256 || "")}
+        ${
+          civitaiLink
+            ? infoTableRow(
+                "Civitai",
+                `<a href="${civitaiLink}" target="_blank">${logoCivitai}View on Civitai</a>`,
+              )
+            : info.raw?.civitai?.error === "Model not found"
+              ? infoTableRow(
+                  "Civitai",
+                  '<i>Model not found</i> <span class="-help" title="The model was not found on civitai with the sha256 hash. It\'s possible the model was removed, re-uploaded, or was never on civitai to begin with."></span>',
+                )
+              : info.raw?.civitai?.error
+                ? infoTableRow("Civitai", info.raw?.civitai?.error)
+                : !info.raw?.civitai
+                  ? infoTableRow(
+                      "Civitai",
+                      `<button class="rgthree-button" data-action="fetch-civitai">Fetch info from civitai</button>`,
+                    )
+                  : ""
+        }
+
+        ${infoTableRow(
+          "Name",
+          info.name || info.raw?.metadata?.ss_output_name || "",
+          "The name for display.",
+          "name",
+        )}
+
+        ${
+          !info.baseModelFile && !info.baseModelFile
+            ? ""
+            : infoTableRow(
+                "Base Model",
+                (info.baseModel || "") + (info.baseModelFile ? ` (${info.baseModelFile})` : ""),
+              )
+        }
+
+
+        ${
+          !info.trainedWords?.length
+            ? ""
+            : infoTableRow(
+                "Trained Words",
+                getTrainedWordsMarkup(info.trainedWords) ?? "",
+                "Trained words from the metadata and/or civitai. Click to select for copy.",
+              )
+        }
+
+        ${
+          !info.raw?.metadata?.ss_clip_skip || info.raw?.metadata?.ss_clip_skip == "None"
+            ? ""
+            : infoTableRow("Clip Skip", info.raw?.metadata?.ss_clip_skip)
+        }
+        ${infoTableRow(
+          "Strength Min",
+          info.strengthMin ?? "",
+          "The recommended minimum strength, In the Power Lora Loader node, strength will signal when it is below this threshold.",
+          "strengthMin",
+        )}
+        ${infoTableRow(
+          "Strength Max",
+          info.strengthMax ?? "",
+          "The recommended maximum strength. In the Power Lora Loader node, strength will signal when it is above this threshold.",
+          "strengthMax",
+        )}
+        ${
+          "" /*infoTableRow(
+          "User Tags",
+          info.userTags?.join(", ") ?? "",
+          "A list of tags to make filtering easier  in the Power Lora Chooser.",
+          "userTags",
+        )*/
+        }
+        ${infoTableRow(
+          "Additional Notes",
+          info.userNote ?? "",
+          "Additional notes you'd like to keep and reference in the info dialog.",
+          "userNote",
+        )}
+
+      </table>
+
+      <ul class="rgthree-info-images">${
+        info.images
+          ?.map(
+            (img) => `
+        <li>
+          <figure>
+            <img src="${img.url}" />
+            <figcaption><!--
+              -->${imgInfoField(
+                "",
+                img.civitaiUrl
+                  ? `<a href="${img.civitaiUrl}" target="_blank">civitai${link}</a>`
+                  : undefined,
+              )}<!--
+              -->${imgInfoField("seed", img.seed)}<!--
+              -->${imgInfoField("steps", img.steps)}<!--
+              -->${imgInfoField("cfg", img.cfg)}<!--
+              -->${imgInfoField("sampler", img.sampler)}<!--
+              -->${imgInfoField("model", img.model)}<!--
+              -->${imgInfoField("positive", img.positive)}<!--
+              -->${imgInfoField("negative", img.negative)}<!--
+            --><!--${
+              ""
+              //   img.resources?.length
+              //     ? `
+              //   <tr><td>Resources</td><td><ul>
+              //   ${(img.resources || [])
+              //     .map(
+              //       (r) => `
+              //     <li>[${r.type || ""}] ${r.name || ""} ${
+              //       r.weight != null ? `@ ${r.weight}` : ""
+              //     }</li>
+              //   `,
+              //     )
+              //     .join("")}
+              //   </ul></td></tr>
+              // `
+              //     : ""
+            }--></figcaption>
+          </figure>
+        </li>`,
+          )
+          .join("") ?? ""
+      }</ul>
+    `;
+
+    const div = $el("div", {html});
+
+    if (rgthree.isDevMode()) {
+      setAttributes(queryOne('[stub="menu"]', div)!, {
+        children: [
+          new MenuButton({
+            icon: dotdotdot,
+            options: [
+              {label: "More Actions", type: "title"},
+              {
+                label: "Open API JSON",
+                callback: async (e: PointerEvent) => {
+                  if (this.modelInfo?.file) {
+                    window.open(
+                      `rgthree/api/loras/info?file=${encodeURIComponent(this.modelInfo.file)}`,
+                    );
+                  }
+                },
+              },
+              {
+                label: "Clear all local info",
+                callback: async (e: PointerEvent) => {
+                  if (this.modelInfo?.file) {
+                    this.modelInfo = await LORA_INFO_SERVICE.clearFetchedInfo(this.modelInfo.file);
+                    this.setContent(this.getInfoContent());
+                    this.setTitle(
+                      this.modelInfo?.["name"] || this.modelInfo?.["file"] || "Unknown",
+                    );
+                  }
+                },
+              },
+            ],
+          }),
+        ],
+      });
+    }
+
+    return div;
+  }
+}
+
+export class RgthreeLoraInfoDialog extends RgthreeInfoDialog {
+  override async getModelInfo(file: string) {
+    return LORA_INFO_SERVICE.getInfo(file, false, false);
+  }
+  override async refreshModelInfo(file: string) {
+    return LORA_INFO_SERVICE.refreshInfo(file);
+  }
+  override async clearModelInfo(file: string) {
+    return LORA_INFO_SERVICE.clearFetchedInfo(file);
+  }
+}
+
+/**
+ * Generates a uniform markup string for a table row.
+ */
+function infoTableRow(
+  name: string,
+  value: string | number,
+  help: string = "",
+  editableFieldName = "",
+) {
+  return `
+    <tr class="${editableFieldName ? "editable" : ""}" ${
+      editableFieldName ? `data-field-name="${editableFieldName}"` : ""
+    }>
+      <td><span>${name} ${help ? `<span class="-help" title="${help}"></span>` : ""}<span></td>
+      <td ${editableFieldName ? "" : 'colspan="2"'}>${
+        String(value).startsWith("<") ? value : `<span>${value}<span>`
+      }</td>
+      ${
+        editableFieldName
+          ? `<td style="width: 24px;"><button class="rgthree-button-reset rgthree-button-edit" data-action="edit-row">${pencilColored}${diskColored}</button></td>`
+          : ""
+      }
+    </tr>`;
+}
+
+function getTrainedWordsMarkup(words: RgthreeModelInfo["trainedWords"]) {
+  let markup = `<ul class="rgthree-info-trained-words-list">`;
+  for (const wordData of words || []) {
+    markup += `<li title="${wordData.word}" data-word="${
+      wordData.word
+    }" class="rgthree-info-trained-words-list-item" data-action="toggle-trained-word">
+      <span>${wordData.word}</span>
+      ${wordData.civitai ? logoCivitai : ""}
+      ${wordData.count != null ? `<small>${wordData.count}</small>` : ""}
+    </li>`;
+  }
+  markup += `</ul>`;
+  return markup;
+}
+
+/**
+ * Saves / cancels an editable row. Returns a boolean if the data was modified.
+ */
+function saveEditableRow(info: RgthreeModelInfo, tr: HTMLElement, saving = true): boolean {
+  const fieldName = tr.dataset["fieldName"] as "file";
+  const input = queryOne<HTMLInputElement>("input,textarea", tr)!;
+  let newValue = info[fieldName] ?? "";
+  let modified = false;
+  if (saving) {
+    newValue = input!.value;
+    if (fieldName.startsWith("strength")) {
+      if (Number.isNaN(Number(newValue))) {
+        alert(`You must enter a number into the ${fieldName} field.`);
+        return false;
+      }
+      newValue = (Math.round(Number(newValue) * 100) / 100).toFixed(2);
+    }
+    LORA_INFO_SERVICE.savePartialInfo(info.file!, {[fieldName]: newValue});
+    modified = true;
+  }
+  tr.classList.remove("-rgthree-editing");
+  const td = queryOne("td:nth-child(2)", tr)!;
+  appendChildren(empty(td), [$el("span", {text: newValue})]);
+  return modified;
+}
+
+function imgInfoField(label: string, value?: string | number) {
+  return value != null ? `<span>${label ? `<label>${label} </label>` : ""}${value}</span>` : "";
+}

rgthree-comfy/src_web/comfyui/display_any.ts

@@ -0,0 +1,73 @@
+import { app } from "scripts/app.js";
+import { ComfyWidgets } from "scripts/widgets.js";
+import type { LGraphNode as TLGraphNode } from "typings/litegraph.js";
+import type { ComfyApp, ComfyNodeConstructor, ComfyObjectInfo } from "typings/comfy.js";
+import { addConnectionLayoutSupport } from "./utils.js";
+import { rgthree } from "./rgthree.js";
+
+let hasShownAlertForUpdatingInt = false;
+
+app.registerExtension({
+  name: "rgthree.DisplayAny",
+  async beforeRegisterNodeDef(
+    nodeType: ComfyNodeConstructor,
+    nodeData: ComfyObjectInfo,
+    app: ComfyApp,
+  ) {
+    if (nodeData.name === "Display Any (rgthree)" || nodeData.name === "Display Int (rgthree)") {
+      const onNodeCreated = nodeType.prototype.onNodeCreated;
+      nodeType.prototype.onNodeCreated = function () {
+        onNodeCreated ? onNodeCreated.apply(this, []) : undefined;
+
+        (this as any).showValueWidget = ComfyWidgets["STRING"](
+          this,
+          "output",
+          ["STRING", { multiline: true }],
+          app,
+        ).widget;
+        (this as any).showValueWidget.inputEl!.readOnly = true;
+        (this as any).showValueWidget.serializeValue = async (node: TLGraphNode, index: number) => {
+          const n =
+            rgthree.getNodeFromInitialGraphToPromptSerializedWorkflowBecauseComfyUIBrokeStuff(node);
+          if (n) {
+            // Since we need a round trip to get the value, the serizalized value means nothing, and
+            // saving it to the metadata would just be confusing. So, we clear it here.
+            n.widgets_values![index] = "";
+          } else {
+            console.warn(
+              "No serialized node found in workflow. May be attributed to " +
+                "https://github.com/comfyanonymous/ComfyUI/issues/2193",
+            );
+          }
+          return "";
+        };
+      };
+
+      addConnectionLayoutSupport(nodeType, app, [["Left"], ["Right"]]);
+
+      const onExecuted = nodeType.prototype.onExecuted;
+      nodeType.prototype.onExecuted = function (message: any) {
+        onExecuted?.apply(this, [message]);
+        (this as any).showValueWidget.value = message.text[0];
+      };
+    }
+  },
+
+  // This ports Display Int to DisplayAny, but ComfyUI still shows an error.
+  // If https://github.com/comfyanonymous/ComfyUI/issues/1527 is fixed, this could work.
+  // async loadedGraphNode(node: TLGraphNode) {
+  //   if (node.type === "Display Int (rgthree)") {
+  //     replaceNode(node, "Display Any (rgthree)", new Map([["input", "source"]]));
+  //     if (!hasShownAlertForUpdatingInt) {
+  //       hasShownAlertForUpdatingInt = true;
+  //       setTimeout(() => {
+  //         alert(
+  //           "Don't worry, your 'Display Int' nodes have been updated to the new " +
+  //             "'Display Any' nodes! You can ignore the error message underneath (for that node)." +
+  //             "\n\nThanks.\n- rgthree",
+  //         );
+  //       }, 128);
+  //     }
+  //   }
+  // },
+});

rgthree-comfy/src_web/comfyui/dynamic_context.ts

@@ -0,0 +1,297 @@
+import {app} from "scripts/app.js";
+import {
+  IoDirection,
+  followConnectionUntilType,
+  getConnectedInputInfosAndFilterPassThroughs,
+} from "./utils.js";
+import {rgthree} from "./rgthree.js";
+import {
+  SERVICE as CONTEXT_SERVICE,
+  InputMutation,
+  InputMutationOperation,
+} from "./services/context_service.js";
+import {NodeTypesString} from "./constants.js";
+import {removeUnusedInputsFromEnd} from "./utils_inputs_outputs.js";
+import {INodeInputSlot, INodeOutputSlot, INodeSlot, LGraphNode, LLink} from "typings/litegraph.js";
+import {ComfyNodeConstructor, ComfyObjectInfo} from "typings/comfy.js";
+import {DynamicContextNodeBase} from "./dynamic_context_base.js";
+import {SERVICE as CONFIG_SERVICE} from "./services/config_service.js";
+
+const OWNED_PREFIX = "+";
+const REGEX_OWNED_PREFIX = /^\+\s*/;
+const REGEX_EMPTY_INPUT = /^\+\s*$/;
+
+/**
+ * The Dynamic Context node.
+ */
+export class DynamicContextNode extends DynamicContextNodeBase {
+  static override title = NodeTypesString.DYNAMIC_CONTEXT;
+  static override type = NodeTypesString.DYNAMIC_CONTEXT;
+  static comfyClass = NodeTypesString.DYNAMIC_CONTEXT;
+
+  constructor(title = DynamicContextNode.title) {
+    super(title);
+  }
+
+  override onNodeCreated() {
+    this.addInput("base_ctx", "RGTHREE_DYNAMIC_CONTEXT");
+    this.ensureOneRemainingNewInputSlot();
+    super.onNodeCreated();
+  }
+
+  override onConnectionsChange(
+    type: number,
+    slotIndex: number,
+    isConnected: boolean,
+    link: LLink,
+    ioSlot: INodeSlot,
+  ): void {
+    super.onConnectionsChange?.call(this, type, slotIndex, isConnected, link, ioSlot);
+    if (this.configuring) {
+      return;
+    }
+    if (type === LiteGraph.INPUT) {
+      if (isConnected) {
+        this.handleInputConnected(slotIndex);
+      } else {
+        this.handleInputDisconnected(slotIndex);
+      }
+    }
+  }
+
+  override onConnectInput(
+    inputIndex: number,
+    outputType: INodeOutputSlot["type"],
+    outputSlot: INodeOutputSlot,
+    outputNode: LGraphNode,
+    outputIndex: number,
+  ): boolean {
+    let canConnect = true;
+    if (super.onConnectInput) {
+      canConnect = super.onConnectInput.apply(this, [...arguments] as any);
+    }
+    if (
+      canConnect &&
+      outputNode instanceof DynamicContextNode &&
+      outputIndex === 0 &&
+      inputIndex !== 0
+    ) {
+      const [n, v] = rgthree.logger.warnParts(
+        "Currently, you can only connect a context node in the first slot.",
+      );
+      console[n]?.call(console, ...v);
+      canConnect = false;
+    }
+    return canConnect;
+  }
+
+  handleInputConnected(slotIndex: number) {
+    const ioSlot = this.inputs[slotIndex];
+    const connectedIndexes = [];
+    if (slotIndex === 0) {
+      let baseNodeInfos = getConnectedInputInfosAndFilterPassThroughs(this, this, 0);
+      const baseNodes = baseNodeInfos.map((n) => n.node)!;
+      const baseNodesDynamicCtx = baseNodes[0] as DynamicContextNodeBase;
+      if (baseNodesDynamicCtx?.provideInputsData) {
+        const inputsData = CONTEXT_SERVICE.getDynamicContextInputsData(baseNodesDynamicCtx);
+        console.log("inputsData", inputsData);
+        for (const input of baseNodesDynamicCtx.provideInputsData()) {
+          if (input.name === "base_ctx" || input.name === "+") {
+            continue;
+          }
+          this.addContextInput(input.name, input.type, input.index);
+          this.stabilizeNames();
+        }
+      }
+    } else if (this.isInputSlotForNewInput(slotIndex)) {
+      this.handleNewInputConnected(slotIndex);
+    }
+  }
+
+  isInputSlotForNewInput(slotIndex: number) {
+    const ioSlot = this.inputs[slotIndex];
+    return ioSlot && ioSlot.name === "+" && ioSlot.type === "*";
+  }
+
+  handleNewInputConnected(slotIndex: number) {
+    if (!this.isInputSlotForNewInput(slotIndex)) {
+      throw new Error('Expected the incoming slot index to be the "new input" input.');
+    }
+    const ioSlot = this.inputs[slotIndex]!;
+    let cxn = null;
+    if (ioSlot.link != null) {
+      cxn = followConnectionUntilType(this, IoDirection.INPUT, slotIndex, true);
+    }
+    if (cxn?.type && cxn?.name) {
+      let name = this.addOwnedPrefix(this.getNextUniqueNameForThisNode(cxn.name));
+      if (name.match(/^\+\s*[A-Z_]+(\.\d+)?$/)) {
+        name = name.toLowerCase();
+      }
+      ioSlot.name = name;
+      ioSlot.type = cxn.type as string;
+      ioSlot.removable = true;
+      while (!this.outputs[slotIndex]) {
+        this.addOutput("*", "*");
+      }
+      this.outputs[slotIndex]!.type = cxn.type as string;
+      this.outputs[slotIndex]!.name = this.stripOwnedPrefix(name).toLocaleUpperCase();
+      // This is a dumb override for ComfyUI's widgetinputs issues.
+      if (cxn.type === "COMBO" || cxn.type.includes(",") || Array.isArray(cxn.type)) {
+        (this.outputs[slotIndex] as any).widget = true;
+      }
+      this.inputsMutated({
+        operation: InputMutationOperation.ADDED,
+        node: this,
+        slotIndex,
+        slot: ioSlot,
+      });
+      this.stabilizeNames();
+      this.ensureOneRemainingNewInputSlot();
+    }
+  }
+
+  handleInputDisconnected(slotIndex: number) {
+    const inputs = this.getContextInputsList();
+    if (slotIndex === 0) {
+      for (let index = inputs.length - 1; index > 0; index--) {
+        if (index === 0 || index === inputs.length - 1) {
+          continue;
+        }
+        const input = inputs[index]!;
+        if (!this.isOwnedInput(input.name)) {
+          if (input.link || this.outputs[index]?.links?.length) {
+            this.renameContextInput(index, input.name, true);
+          } else {
+            this.removeContextInput(index);
+          }
+        }
+      }
+      this.setSize(this.computeSize());
+      this.setDirtyCanvas(true, true);
+    }
+  }
+
+  ensureOneRemainingNewInputSlot() {
+    removeUnusedInputsFromEnd(this, 1, REGEX_EMPTY_INPUT);
+    this.addInput(OWNED_PREFIX, "*");
+  }
+
+  getNextUniqueNameForThisNode(desiredName: string) {
+    const inputs = this.getContextInputsList();
+    const allExistingKeys = inputs.map((i) => this.stripOwnedPrefix(i.name).toLocaleUpperCase());
+    desiredName = this.stripOwnedPrefix(desiredName);
+    let newName = desiredName;
+    let n = 0;
+    while (allExistingKeys.includes(newName.toLocaleUpperCase())) {
+      newName = `${desiredName}.${++n}`;
+    }
+    return newName;
+  }
+
+  override removeInput(slotIndex: number) {
+    const slot = this.inputs[slotIndex]!;
+    super.removeInput(slotIndex);
+    if (this.outputs[slotIndex]) {
+      this.removeOutput(slotIndex);
+    }
+    this.inputsMutated({operation: InputMutationOperation.REMOVED, node: this, slotIndex, slot});
+    this.stabilizeNames();
+  }
+
+  stabilizeNames() {
+    const inputs = this.getContextInputsList();
+    const names: string[] = [];
+    for (const [index, input] of inputs.entries()) {
+      if (index === 0 || index === inputs.length - 1) {
+        continue;
+      }
+      input.label = undefined;
+      this.outputs[index]!.label = undefined;
+      let origName = this.stripOwnedPrefix(input.name).replace(/\.\d+$/, "");
+      let name = input.name;
+      if (!this.isOwnedInput(name)) {
+        names.push(name.toLocaleUpperCase());
+      } else {
+        let n = 0;
+        name = this.addOwnedPrefix(origName);
+        while (names.includes(this.stripOwnedPrefix(name).toLocaleUpperCase())) {
+          name = `${this.addOwnedPrefix(origName)}.${++n}`;
+        }
+        names.push(this.stripOwnedPrefix(name).toLocaleUpperCase());
+        if (input.name !== name) {
+          this.renameContextInput(index, name);
+        }
+      }
+    }
+  }
+
+  override getSlotMenuOptions(slot: {
+    slot: number;
+    input?: INodeInputSlot | undefined;
+    output?: INodeOutputSlot | undefined;
+  }) {
+    const editable = this.isOwnedInput(slot.input!.name) && this.type !== "*";
+    return [
+      {
+        content: "✏️ Rename Input",
+        disabled: !editable,
+        callback: () => {
+          var dialog = app.canvas.createDialog(
+            "<span class='name'>Name</span><input autofocus type='text'/><button>OK</button>",
+            {},
+          );
+          var dialogInput = dialog.querySelector("input")!;
+          if (dialogInput) {
+            dialogInput.value = this.stripOwnedPrefix(slot.input!.name || "");
+          }
+          var inner = () => {
+            this.handleContextMenuRenameInputDialog(slot.slot, dialogInput.value);
+            dialog.close();
+          };
+          dialog.querySelector("button")!.addEventListener("click", inner);
+          dialogInput.addEventListener("keydown", (e) => {
+            dialog.is_modified = true;
+            if (e.keyCode == 27) {
+              dialog.close();
+            } else if (e.keyCode == 13) {
+              inner();
+            } else if (e.keyCode != 13 && (e.target as HTMLElement)?.localName != "textarea") {
+              return;
+            }
+            e.preventDefault();
+            e.stopPropagation();
+          });
+          dialogInput.focus();
+        },
+      },
+      {
+        content: "🗑️ Delete Input",
+        disabled: !editable,
+        callback: () => {
+          this.removeInput(slot.slot);
+        },
+      },
+    ];
+  }
+
+  handleContextMenuRenameInputDialog(slotIndex: number, value: string) {
+    app.graph.beforeChange();
+    this.renameContextInput(slotIndex, value);
+    this.stabilizeNames();
+    this.setDirtyCanvas(true, true);
+    app.graph.afterChange();
+  }
+}
+
+const contextDynamicNodes = [DynamicContextNode];
+app.registerExtension({
+  name: "rgthree.DynamicContext",
+  async beforeRegisterNodeDef(nodeType: ComfyNodeConstructor, nodeData: ComfyObjectInfo) {
+    if (!CONFIG_SERVICE.getConfigValue("unreleased.dynamic_context.enabled")) {
+      return;
+    }
+    if (nodeData.name === DynamicContextNode.type) {
+      DynamicContextNode.setUp(nodeType, nodeData);
+    }
+  },
+});

rgthree-comfy/src_web/comfyui/dynamic_context_base.ts

@@ -0,0 +1,237 @@
+import type {INodeInputSlot} from "typings/litegraph.js";
+
+import {BaseContextNode} from "./context.js";
+import {ComfyNodeConstructor, ComfyObjectInfo} from "typings/comfy.js";
+import {RgthreeBaseServerNode} from "./base_node.js";
+import {moveArrayItem, wait} from "rgthree/common/shared_utils.js";
+import {RgthreeInvisibleWidget} from "./utils_widgets.js";
+import {
+  getContextOutputName,
+  InputMutation,
+  InputMutationOperation,
+} from "./services/context_service.js";
+import {app} from "scripts/app.js";
+import {SERVICE as CONTEXT_SERVICE} from "./services/context_service.js";
+
+const OWNED_PREFIX = "+";
+const REGEX_OWNED_PREFIX = /^\+\s*/;
+const REGEX_EMPTY_INPUT = /^\+\s*$/;
+
+export type InputLike = {
+  name: string;
+  type: string | -1;
+  label?: string;
+  link: number | null;
+  removable?: boolean;
+};
+
+/**
+ * The base context node that contains some shared between DynamicContext nodes. Not labels
+ * `abstract` so we can reference `this` in static methods.
+ */
+export class DynamicContextNodeBase extends BaseContextNode {
+  protected readonly hasShadowInputs: boolean = false;
+
+  getContextInputsList(): InputLike[] {
+    return this.inputs;
+  }
+
+  provideInputsData() {
+    const inputs = this.getContextInputsList();
+    return inputs
+      .map((input, index) => ({
+        name: this.stripOwnedPrefix(input.name),
+        type: String(input.type),
+        index,
+      }))
+      .filter((i) => i.type !== "*");
+  }
+
+  addOwnedPrefix(name: string) {
+    return `+ ${this.stripOwnedPrefix(name)}`;
+  }
+
+  isOwnedInput(inputOrName: string | null | INodeInputSlot) {
+    const name = typeof inputOrName == "string" ? inputOrName : inputOrName?.name || "";
+    return REGEX_OWNED_PREFIX.test(name);
+  }
+
+  stripOwnedPrefix(name: string) {
+    return name.replace(REGEX_OWNED_PREFIX, "");
+  }
+
+  // handleUpstreamMutation(mutation: InputMutation) {
+  //   throw new Error('handleUpstreamMutation not overridden!')
+  // }
+
+  handleUpstreamMutation(mutation: InputMutation) {
+    console.log(`[node ${this.id}] handleUpstreamMutation`, mutation);
+    if (mutation.operation === InputMutationOperation.ADDED) {
+      const slot = mutation.slot;
+      if (!slot) {
+        throw new Error("Cannot have an ADDED mutation without a provided slot data.");
+      }
+      this.addContextInput(
+        this.stripOwnedPrefix(slot.name),
+        slot.type as string,
+        mutation.slotIndex,
+      );
+      return;
+    }
+    if (mutation.operation === InputMutationOperation.REMOVED) {
+      const slot = mutation.slot;
+      if (!slot) {
+        throw new Error("Cannot have an REMOVED mutation without a provided slot data.");
+      }
+      this.removeContextInput(mutation.slotIndex);
+      return;
+    }
+    if (mutation.operation === InputMutationOperation.RENAMED) {
+      const slot = mutation.slot;
+      if (!slot) {
+        throw new Error("Cannot have an RENAMED mutation without a provided slot data.");
+      }
+      this.renameContextInput(mutation.slotIndex, slot.name);
+      return;
+    }
+  }
+  override clone() {
+    const cloned = super.clone();
+    while (cloned.inputs.length > 1) {
+      cloned.removeInput(cloned.inputs.length - 1);
+    }
+    while (cloned.widgets.length > 1) {
+      cloned.removeWidget(cloned.widgets.length - 1);
+    }
+    while (cloned.outputs.length > 1) {
+      cloned.removeOutput(cloned.outputs.length - 1);
+    }
+    return cloned;
+  }
+
+  /**
+   * Adds the basic output_keys widget. Should be called _after_ specific nodes setup their inputs
+   * or widgets.
+   */
+  override onNodeCreated() {
+    const node = this;
+    this.addCustomWidget(
+      new RgthreeInvisibleWidget("output_keys", "RGTHREE_DYNAMIC_CONTEXT_OUTPUTS", "", () => {
+        return (node.outputs || [])
+          .map((o, i) => i > 0 && o.name)
+          .filter((n) => n !== false)
+          .join(",");
+      }),
+    );
+  }
+
+  addContextInput(name: string, type: string, slot = -1) {
+    const inputs = this.getContextInputsList();
+    if (this.hasShadowInputs) {
+      inputs.push({name, type, link: null});
+    } else {
+      this.addInput(name, type);
+    }
+    if (slot > -1) {
+      moveArrayItem(inputs, inputs.length - 1, slot);
+    } else {
+      slot = inputs.length - 1;
+    }
+    if (type !== "*") {
+      const output = this.addOutput(getContextOutputName(name), type);
+      if (type === "COMBO" || String(type).includes(",") || Array.isArray(type)) {
+        (output as any).widget = true;
+      }
+      if (slot > -1) {
+        moveArrayItem(this.outputs, this.outputs.length - 1, slot);
+      }
+    }
+    this.fixInputsOutputsLinkSlots();
+    this.inputsMutated({
+      operation: InputMutationOperation.ADDED,
+      node: this,
+      slotIndex: slot,
+      slot: inputs[slot]!,
+    });
+  }
+
+  removeContextInput(slotIndex: number) {
+    if (this.hasShadowInputs) {
+      const inputs = this.getContextInputsList();
+      const input = inputs.splice(slotIndex, 1)[0];
+      if (this.outputs[slotIndex]) {
+        this.removeOutput(slotIndex);
+      }
+    } else {
+      this.removeInput(slotIndex);
+    }
+  }
+
+  renameContextInput(index: number, newName: string, forceOwnBool: boolean | null = null) {
+    const inputs = this.getContextInputsList();
+    const input = inputs[index]!;
+    const oldName = input.name;
+    newName = this.stripOwnedPrefix(newName.trim() || this.getSlotDefaultInputLabel(index));
+    if (forceOwnBool === true || (this.isOwnedInput(oldName) && forceOwnBool !== false)) {
+      newName = this.addOwnedPrefix(newName);
+    }
+    if (oldName !== newName) {
+      input.name = newName;
+      input.removable = this.isOwnedInput(newName);
+      this.outputs[index]!.name = getContextOutputName(inputs[index]!.name);
+      this.inputsMutated({
+        node: this,
+        operation: InputMutationOperation.RENAMED,
+        slotIndex: index,
+        slot: input,
+      });
+    }
+  }
+
+  getSlotDefaultInputLabel(slotIndex: number) {
+    const inputs = this.getContextInputsList();
+    const input = inputs[slotIndex]!;
+    let defaultLabel = this.stripOwnedPrefix(input.name).toLowerCase();
+    return defaultLabel.toLocaleLowerCase();
+  }
+
+  inputsMutated(mutation: InputMutation) {
+    CONTEXT_SERVICE.onInputChanges(this, mutation);
+  }
+
+  fixInputsOutputsLinkSlots() {
+    if (!this.hasShadowInputs) {
+      const inputs = this.getContextInputsList();
+      for (let index = inputs.length - 1; index > 0; index--) {
+        const input = inputs[index]!;
+        if ((input === null || input === void 0 ? void 0 : input.link) != null) {
+          app.graph.links[input.link!]!.target_slot = index;
+        }
+      }
+    }
+    const outputs = this.outputs;
+    for (let index = outputs.length - 1; index > 0; index--) {
+      const output = outputs[index];
+      if (output) {
+        output.nameLocked = true;
+        for (const link of output.links || []) {
+          app.graph.links[link!]!.origin_slot = index;
+        }
+      }
+    }
+  }
+
+  static override setUp(comfyClass: ComfyNodeConstructor, nodeData: ComfyObjectInfo) {
+    RgthreeBaseServerNode.registerForOverride(comfyClass, nodeData, this);
+    // [🤮] ComfyUI only adds "required" inputs to the outputs list when dragging an output to
+    // empty space, but since RGTHREE_CONTEXT is optional, it doesn't get added to the menu because
+    // ...of course. So, we'll manually add it. Of course, we also have to do this in a timeout
+    // because ComfyUI clears out `LiteGraph.slot_types_default_out` in its own 'Comfy.SlotDefaults'
+    // extension and we need to wait for that to happen.
+    wait(500).then(() => {
+      LiteGraph.slot_types_default_out["RGTHREE_DYNAMIC_CONTEXT"] =
+        LiteGraph.slot_types_default_out["RGTHREE_DYNAMIC_CONTEXT"] || [];
+      LiteGraph.slot_types_default_out["RGTHREE_DYNAMIC_CONTEXT"].push(comfyClass.comfyClass);
+    });
+  }
+}

rgthree-comfy/src_web/comfyui/dynamic_context_switch.ts

@@ -0,0 +1,207 @@
+import type {ComfyNodeConstructor, ComfyObjectInfo} from "typings/comfy.js";
+import type {INodeSlot, LGraphNode, LLink, LGraphCanvas} from "typings/litegraph.js";
+
+import {app} from "scripts/app.js";
+import {DynamicContextNodeBase, InputLike} from "./dynamic_context_base.js";
+import {NodeTypesString} from "./constants.js";
+import {
+  InputMutation,
+  SERVICE as CONTEXT_SERVICE,
+  stripContextInputPrefixes,
+  getContextOutputName,
+} from "./services/context_service.js";
+import {getConnectedInputNodesAndFilterPassThroughs} from "./utils.js";
+import {debounce, moveArrayItem} from "rgthree/common/shared_utils.js";
+import {measureText} from "./utils_canvas.js";
+import {SERVICE as CONFIG_SERVICE} from "./services/config_service.js";
+
+type ShadowInputData = {
+  node: LGraphNode;
+  slot: number;
+  shadowIndex: number;
+  shadowIndexIfShownSingularly: number;
+  shadowIndexFull: number;
+  nodeIndex: number;
+  type: string | -1;
+  name: string;
+  key: string;
+  // isDuplicatedBefore: boolean,
+  duplicatesBefore: number[];
+  duplicatesAfter: number[];
+};
+
+/**
+ * The Context Switch  node.
+ */
+class DynamicContextSwitchNode extends DynamicContextNodeBase {
+  static override title = NodeTypesString.DYNAMIC_CONTEXT_SWITCH;
+  static override type = NodeTypesString.DYNAMIC_CONTEXT_SWITCH;
+  static comfyClass = NodeTypesString.DYNAMIC_CONTEXT_SWITCH;
+
+  protected override readonly hasShadowInputs = true;
+
+  // override hasShadowInputs = true;
+
+  /**
+   * We should be able to assume that `lastInputsList` is the input list after the last, major
+   * synchronous change. Which should mean, if we're handling a change that is currently live, but
+   * not represented in our node (like, an upstream node has already removed an input), then we
+   * should be able to compar the current InputList to this `lastInputsList`.
+   */
+  lastInputsList: ShadowInputData[] = [];
+
+  private shadowInputs: (InputLike & {count: number})[] = [
+    {name: "base_ctx", type: "RGTHREE_DYNAMIC_CONTEXT", link: null, count: 0},
+  ];
+
+  constructor(title = DynamicContextSwitchNode.title) {
+    super(title);
+  }
+
+  override getContextInputsList() {
+    return this.shadowInputs;
+  }
+  override handleUpstreamMutation(mutation: InputMutation) {
+    this.scheduleHardRefresh();
+  }
+
+  override onConnectionsChange(
+    type: number,
+    slotIndex: number,
+    isConnected: boolean,
+    link: LLink,
+    ioSlot: INodeSlot,
+  ): void {
+    super.onConnectionsChange?.call(this, type, slotIndex, isConnected, link, ioSlot);
+    if (this.configuring) {
+      return;
+    }
+    if (type === LiteGraph.INPUT) {
+      this.scheduleHardRefresh();
+    }
+  }
+
+  scheduleHardRefresh(ms = 64) {
+    return debounce(() => {
+      this.refreshInputsAndOutputs();
+    }, ms);
+  }
+
+  override onNodeCreated() {
+    this.addInput("ctx_1", "RGTHREE_DYNAMIC_CONTEXT");
+    this.addInput("ctx_2", "RGTHREE_DYNAMIC_CONTEXT");
+    this.addInput("ctx_3", "RGTHREE_DYNAMIC_CONTEXT");
+    this.addInput("ctx_4", "RGTHREE_DYNAMIC_CONTEXT");
+    this.addInput("ctx_5", "RGTHREE_DYNAMIC_CONTEXT");
+    super.onNodeCreated();
+  }
+
+  override addContextInput(name: string, type: string, slot?: number): void {}
+
+  /**
+   * This is a "hard" refresh of the list, but looping over the actual context inputs, and
+   * recompiling the shadowInputs and outputs.
+   */
+  private refreshInputsAndOutputs() {
+    const inputs: (InputLike & {count: number})[] = [
+      {name: "base_ctx", type: "RGTHREE_DYNAMIC_CONTEXT", link: null, count: 0},
+    ];
+    let numConnected = 0;
+    for (let i = 0; i < this.inputs.length; i++) {
+      const childCtxs = getConnectedInputNodesAndFilterPassThroughs(
+        this,
+        this,
+        i,
+      ) as DynamicContextNodeBase[];
+      if (childCtxs.length > 1) {
+        throw new Error("How is there more than one input?");
+      }
+      const ctx = childCtxs[0];
+      if (!ctx) continue;
+      numConnected++;
+      const slotsData = CONTEXT_SERVICE.getDynamicContextInputsData(ctx);
+      console.log(slotsData);
+      for (const slotData of slotsData) {
+        const found = inputs.find(
+          (n) => getContextOutputName(slotData.name) === getContextOutputName(n.name),
+        );
+        if (found) {
+          found.count += 1;
+          continue;
+        }
+        inputs.push({
+          name: slotData.name,
+          type: slotData.type,
+          link: null,
+          count: 1,
+        });
+      }
+    }
+    this.shadowInputs = inputs;
+    // First output is always CONTEXT, so "p" is the offset.
+    let i = 0;
+    for (i; i < this.shadowInputs.length; i++) {
+      const data = this.shadowInputs[i]!;
+      let existing = this.outputs.find(
+        (o) => getContextOutputName(o.name) === getContextOutputName(data.name),
+      );
+      if (!existing) {
+        existing = this.addOutput(getContextOutputName(data.name), data.type);
+      }
+      moveArrayItem(this.outputs, existing, i);
+      delete existing.rgthree_status;
+      if (data.count !== numConnected) {
+        existing.rgthree_status = "WARN";
+      }
+    }
+    while (this.outputs[i]) {
+      const output = this.outputs[i];
+      if (output?.links?.length) {
+        output.rgthree_status = "ERROR";
+        i++;
+      } else {
+        this.removeOutput(i);
+      }
+    }
+    this.fixInputsOutputsLinkSlots();
+  }
+
+  override onDrawForeground(ctx: CanvasRenderingContext2D, canvas: LGraphCanvas): void {
+    const low_quality = (canvas?.ds?.scale ?? 1) < 0.6;
+    if (low_quality || this.size[0] <= 10) {
+      return;
+    }
+    let y = LiteGraph.NODE_SLOT_HEIGHT - 1;
+    const w = this.size[0];
+    ctx.save();
+    ctx.font = "normal " + LiteGraph.NODE_SUBTEXT_SIZE + "px Arial";
+    ctx.textAlign = "right";
+
+    for (const output of this.outputs) {
+      if (!output.rgthree_status) {
+        y += LiteGraph.NODE_SLOT_HEIGHT;
+        continue;
+      }
+      const x = w - 20 - measureText(ctx, output.name);
+      if (output.rgthree_status === "ERROR") {
+        ctx.fillText("🛑", x, y);
+      } else if (output.rgthree_status === "WARN") {
+        ctx.fillText("⚠️", x, y);
+      }
+      y += LiteGraph.NODE_SLOT_HEIGHT;
+    }
+    ctx.restore();
+  }
+}
+
+app.registerExtension({
+  name: "rgthree.DynamicContextSwitch",
+  async beforeRegisterNodeDef(nodeType: ComfyNodeConstructor, nodeData: ComfyObjectInfo) {
+    if (!CONFIG_SERVICE.getConfigValue("unreleased.dynamic_context.enabled")) {
+      return;
+    }
+    if (nodeData.name === DynamicContextSwitchNode.type) {
+      DynamicContextSwitchNode.setUp(nodeType, nodeData);
+    }
+  },
+});

rgthree-comfy/src_web/comfyui/fast_actions_button.ts

@@ -0,0 +1,343 @@
+import type { RgthreeBaseVirtualNodeConstructor } from "typings/rgthree.js";
+import type { ComfyApp, ComfyWidget } from "typings/comfy.js";
+import type { IWidget, LGraph, LGraphNode, SerializedLGraphNode } from "typings/litegraph.js";
+import type { RgthreeBaseNode } from "./base_node.js";
+
+import { app } from "scripts/app.js";
+import { BaseAnyInputConnectedNode } from "./base_any_input_connected_node.js";
+import { NodeTypesString } from "./constants.js";
+import { addMenuItem } from "./utils.js";
+import { rgthree } from "./rgthree.js";
+
+const MODE_ALWAYS = 0;
+const MODE_MUTE = 2;
+const MODE_BYPASS = 4;
+
+/**
+ * The Fast Actions Button.
+ *
+ * This adds a button that the user can connect any node to and then choose an action to take on
+ * that node when the button is pressed. Default actions are "Mute," "Bypass," and "Enable," but
+ * Nodes can expose actions additional actions that can then be called back.
+ */
+class FastActionsButton extends BaseAnyInputConnectedNode {
+  static override type = NodeTypesString.FAST_ACTIONS_BUTTON;
+  static override title = NodeTypesString.FAST_ACTIONS_BUTTON;
+  override comfyClass = NodeTypesString.FAST_ACTIONS_BUTTON;
+
+  readonly logger = rgthree.newLogSession("[FastActionsButton]");
+
+  static "@buttonText" = { type: "string" };
+  static "@shortcutModifier" = {
+    type: "combo",
+    values: ["ctrl", "alt", "shift"],
+  };
+  static "@shortcutKey" = { type: "string" };
+
+  static collapsible = false;
+
+  override readonly isVirtualNode = true;
+
+  override serialize_widgets = true;
+
+  readonly buttonWidget: IWidget;
+
+  readonly widgetToData = new Map<IWidget, { comfy?: ComfyApp; node?: LGraphNode }>();
+  readonly nodeIdtoFunctionCache = new Map<number, string>();
+
+  readonly keypressBound;
+  readonly keyupBound;
+
+  private executingFromShortcut = false;
+
+  constructor(title?: string) {
+    super(title);
+    this.properties["buttonText"] = "🎬 Action!";
+    this.properties["shortcutModifier"] = "alt";
+    this.properties["shortcutKey"] = "";
+    this.buttonWidget = this.addWidget(
+      "button",
+      this.properties["buttonText"],
+      null,
+      () => {
+        this.executeConnectedNodes();
+      },
+      { serialize: false },
+    );
+
+    this.keypressBound = this.onKeypress.bind(this);
+    this.keyupBound = this.onKeyup.bind(this);
+    this.onConstructed();
+  }
+
+  /** When we're given data to configure, like from a PNG or JSON. */
+  override configure(info: SerializedLGraphNode<LGraphNode>): void {
+    super.configure(info);
+    // Since we add the widgets dynamically, we need to wait to set their values
+    // with a short timeout.
+    setTimeout(() => {
+      if (info.widgets_values) {
+        for (let [index, value] of info.widgets_values.entries()) {
+          if (index > 0) {
+            if (value.startsWith("comfy_action:")) {
+              value = value.replace("comfy_action:", "");
+              this.addComfyActionWidget(index, value);
+            }
+            if (this.widgets[index]) {
+              this.widgets[index]!.value = value;
+            }
+          }
+        }
+      }
+    }, 100);
+  }
+
+  override clone() {
+    const cloned = super.clone();
+    cloned.properties["buttonText"] = "🎬 Action!";
+    cloned.properties["shortcutKey"] = "";
+    return cloned;
+  }
+
+  override onAdded(graph: LGraph): void {
+    window.addEventListener("keydown", this.keypressBound);
+    window.addEventListener("keyup", this.keyupBound);
+  }
+
+  override onRemoved(): void {
+    window.removeEventListener("keydown", this.keypressBound);
+    window.removeEventListener("keyup", this.keyupBound);
+  }
+
+  async onKeypress(event: KeyboardEvent) {
+    const target = (event.target as HTMLElement)!;
+    if (
+      this.executingFromShortcut ||
+      target.localName == "input" ||
+      target.localName == "textarea"
+    ) {
+      return;
+    }
+    if (
+      this.properties["shortcutKey"].trim() &&
+      this.properties["shortcutKey"].toLowerCase() === event.key.toLowerCase()
+    ) {
+      const shortcutModifier = this.properties["shortcutModifier"];
+      let good = shortcutModifier === "ctrl" && event.ctrlKey;
+      good = good || (shortcutModifier === "alt" && event.altKey);
+      good = good || (shortcutModifier === "shift" && event.shiftKey);
+      good = good || (shortcutModifier === "meta" && event.metaKey);
+      if (good) {
+        setTimeout(() => {
+          this.executeConnectedNodes();
+        }, 20);
+        this.executingFromShortcut = true;
+        event.preventDefault();
+        event.stopImmediatePropagation();
+        app.canvas.dirty_canvas = true;
+        return false;
+      }
+    }
+    return;
+  }
+
+  onKeyup(event: KeyboardEvent) {
+    const target = (event.target as HTMLElement)!;
+    if (target.localName == "input" || target.localName == "textarea") {
+      return;
+    }
+    this.executingFromShortcut = false;
+  }
+
+  override onPropertyChanged(property: string, value: any, _prevValue: any): boolean | void {
+    if (property == "buttonText") {
+      this.buttonWidget.name = value;
+    }
+    if (property == "shortcutKey") {
+      value = value.trim();
+      this.properties["shortcutKey"] = (value && value[0].toLowerCase()) || "";
+    }
+  }
+
+  override handleLinkedNodesStabilization(linkedNodes: LGraphNode[]) {
+    let changed = false;
+    // Remove any widgets and data for widgets that are no longer linked.
+    for (const [widget, data] of this.widgetToData.entries()) {
+      if (!data.node) {
+        continue;
+      }
+      if (!linkedNodes.includes(data.node)) {
+        const index = this.widgets.indexOf(widget);
+        if (index > -1) {
+          this.widgetToData.delete(widget);
+          this.removeWidget(widget);
+          changed = true;
+        } else {
+          const [m, a] = this.logger.debugParts("Connected widget is not in widgets... weird.");
+          console[m]?.(...a);
+        }
+      }
+    }
+
+    const badNodes: LGraphNode[] = []; // Nodes that are deleted elsewhere may not exist in linkedNodes.
+    let indexOffset = 1; // Start with button, increment when we hit a non-node widget (like comfy)
+    for (const [index, node] of linkedNodes.entries()) {
+      // Sometimes linkedNodes is stale.
+      if (!node) {
+        const [m, a] = this.logger.debugParts("linkedNode provided that does not exist. ");
+        console[m]?.(...a);
+        badNodes.push(node);
+        continue;
+      }
+      let widgetAtSlot = this.widgets[index + indexOffset];
+      if (widgetAtSlot && this.widgetToData.get(widgetAtSlot)?.comfy) {
+        indexOffset++;
+        widgetAtSlot = this.widgets[index + indexOffset];
+      }
+
+      if (!widgetAtSlot || this.widgetToData.get(widgetAtSlot)?.node?.id !== node.id) {
+        // Find the next widget that matches the node.
+        let widget: IWidget | null = null;
+        for (let i = index + indexOffset; i < this.widgets.length; i++) {
+          if (this.widgetToData.get(this.widgets[i]!)?.node?.id === node.id) {
+            widget = this.widgets.splice(i, 1)[0]!;
+            this.widgets.splice(index + indexOffset, 0, widget);
+            changed = true;
+            break;
+          }
+        }
+        if (!widget) {
+          // Add a widget at this spot.
+          const exposedActions: string[] = (node.constructor as any).exposedActions || [];
+          widget = this.addWidget("combo", node.title, "None", "", {
+            values: ["None", "Mute", "Bypass", "Enable", ...exposedActions],
+          });
+          (widget as ComfyWidget).serializeValue = async (_node: LGraphNode, _index: number) => {
+            return widget?.value;
+          };
+          this.widgetToData.set(widget, { node });
+          changed = true;
+        }
+      }
+    }
+
+    // Go backwards through widgets, and remove any that are not in out widgetToData
+    for (let i = this.widgets.length - 1; i > linkedNodes.length + indexOffset - 1; i--) {
+      const widgetAtSlot = this.widgets[i];
+      if (widgetAtSlot && this.widgetToData.get(widgetAtSlot)?.comfy) {
+        continue;
+      }
+      this.removeWidget(widgetAtSlot);
+      changed = true;
+    }
+    return changed;
+  }
+
+  override removeWidget(widgetOrSlot?: number | IWidget): void {
+    const widget = typeof widgetOrSlot === "number" ? this.widgets[widgetOrSlot] : widgetOrSlot;
+    if (widget && this.widgetToData.has(widget)) {
+      this.widgetToData.delete(widget);
+    }
+    super.removeWidget(widgetOrSlot);
+  }
+
+  /**
+   * Runs through the widgets, and executes the actions.
+   */
+  async executeConnectedNodes() {
+    for (const widget of this.widgets) {
+      if (widget == this.buttonWidget) {
+        continue;
+      }
+      const action = widget.value;
+      const { comfy, node } = this.widgetToData.get(widget) ?? {};
+      if (comfy) {
+        if (action === "Queue Prompt") {
+          await comfy.queuePrompt(0);
+        }
+        continue;
+      }
+      if (node) {
+        if (action === "Mute") {
+          node.mode = MODE_MUTE;
+        } else if (action === "Bypass") {
+          node.mode = MODE_BYPASS;
+        } else if (action === "Enable") {
+          node.mode = MODE_ALWAYS;
+        }
+        // If there's a handleAction, always call it.
+        if ((node as RgthreeBaseNode).handleAction) {
+          await (node as RgthreeBaseNode).handleAction(action);
+        }
+        app.graph.change();
+        continue;
+      }
+      console.warn("Fast Actions Button has a widget without correct data.");
+    }
+  }
+
+  /**
+   * Adds a ComfyActionWidget at the provided slot (or end).
+   */
+  addComfyActionWidget(slot?: number, value?: string) {
+    let widget = this.addWidget(
+      "combo",
+      "Comfy Action",
+      "None",
+      () => {
+        if (widget.value.startsWith("MOVE ")) {
+          this.widgets.push(this.widgets.splice(this.widgets.indexOf(widget), 1)[0]!);
+          widget.value = (widget as any)["lastValue_"];
+        } else if (widget.value.startsWith("REMOVE ")) {
+          this.removeWidget(widget);
+        }
+        (widget as any)["lastValue_"] = widget.value;
+      },
+      {
+        values: ["None", "Queue Prompt", "REMOVE Comfy Action", "MOVE to end"],
+      },
+    );
+    (widget as any)["lastValue_"] = value;
+
+    (widget as ComfyWidget).serializeValue = async (_node: LGraphNode, _index: number) => {
+      return `comfy_app:${widget?.value}`;
+    };
+    this.widgetToData.set(widget, { comfy: app });
+
+    if (slot != null) {
+      this.widgets.splice(slot, 0, this.widgets.splice(this.widgets.indexOf(widget), 1)[0]!);
+    }
+    return widget;
+  }
+
+  override onSerialize(o: SerializedLGraphNode) {
+    super.onSerialize && super.onSerialize(o);
+    for (let [index, value] of (o.widgets_values || []).entries()) {
+      if (this.widgets[index]?.name === "Comfy Action") {
+        o.widgets_values![index] = `comfy_action:${value}`;
+      }
+    }
+  }
+
+  static override setUp() {
+    super.setUp();
+    addMenuItem(this, app, {
+      name: "➕ Append a Comfy Action",
+      callback: (nodeArg: LGraphNode) => {
+        (nodeArg as FastActionsButton).addComfyActionWidget();
+      },
+    });
+  }
+}
+
+app.registerExtension({
+  name: "rgthree.FastActionsButton",
+  registerCustomNodes() {
+    FastActionsButton.setUp();
+  },
+  loadedGraphNode(node: LGraphNode) {
+    if (node.type == FastActionsButton.title) {
+      (node as FastActionsButton)._tempWidth = node.size[0];
+    }
+  },
+});

rgthree-comfy/src_web/comfyui/fast_groups_bypasser.ts

@@ -0,0 +1,37 @@
+import { RgthreeBaseVirtualNodeConstructor } from "typings/rgthree.js";
+import { app } from "scripts/app.js";
+import { NodeTypesString } from "./constants.js";
+import { BaseFastGroupsModeChanger } from "./fast_groups_muter.js";
+
+/**
+ * Fast Bypasser implementation that looks for groups in the workflow and adds toggles to mute them.
+ */
+export class FastGroupsBypasser extends BaseFastGroupsModeChanger {
+  static override type = NodeTypesString.FAST_GROUPS_BYPASSER;
+  static override title = NodeTypesString.FAST_GROUPS_BYPASSER;
+  override comfyClass = NodeTypesString.FAST_GROUPS_BYPASSER;
+
+  static override exposedActions = ["Bypass all", "Enable all", "Toggle all"];
+
+  protected override helpActions = "bypass and enable";
+
+  override readonly modeOn = LiteGraph.ALWAYS;
+  override readonly modeOff = 4; // Used by Comfy for "bypass"
+
+  constructor(title = FastGroupsBypasser.title) {
+    super(title);
+    this.onConstructed();
+  }
+}
+
+app.registerExtension({
+  name: "rgthree.FastGroupsBypasser",
+  registerCustomNodes() {
+    FastGroupsBypasser.setUp();
+  },
+  loadedGraphNode(node: FastGroupsBypasser) {
+    if (node.type == FastGroupsBypasser.title) {
+      node.tempSize = [...node.size];
+    }
+  },
+});

rgthree-comfy/src_web/comfyui/fast_groups_muter.ts

@@ -0,0 +1,502 @@
+import { app } from "scripts/app.js";
+import { RgthreeBaseVirtualNode } from "./base_node.js";
+import { NodeTypesString } from "./constants.js";
+import {
+  type LGraphNode,
+  type LGraph as TLGraph,
+  LGraphCanvas as TLGraphCanvas,
+  Vector2,
+  SerializedLGraphNode,
+  IWidget,
+} from "typings/litegraph.js";
+import { SERVICE as FAST_GROUPS_SERVICE } from "./services/fast_groups_service.js";
+import { drawNodeWidget, fitString } from "./utils_canvas.js";
+import { RgthreeBaseVirtualNodeConstructor } from "typings/rgthree.js";
+
+const PROPERTY_SORT = "sort";
+const PROPERTY_SORT_CUSTOM_ALPHA = "customSortAlphabet";
+const PROPERTY_MATCH_COLORS = "matchColors";
+const PROPERTY_MATCH_TITLE = "matchTitle";
+const PROPERTY_SHOW_NAV = "showNav";
+const PROPERTY_RESTRICTION = "toggleRestriction";
+
+/**
+ * Fast Muter implementation that looks for groups in the workflow and adds toggles to mute them.
+ */
+export abstract class BaseFastGroupsModeChanger extends RgthreeBaseVirtualNode {
+  static override type = NodeTypesString.FAST_GROUPS_MUTER;
+  static override title = NodeTypesString.FAST_GROUPS_MUTER;
+
+  static override exposedActions = ["Mute all", "Enable all", "Toggle all"];
+
+  readonly modeOn: number = LiteGraph.ALWAYS;
+  readonly modeOff: number = LiteGraph.NEVER;
+
+  private debouncerTempWidth: number = 0;
+  tempSize: Vector2 | null = null;
+
+  // We don't need to serizalize since we'll just be checking group data on startup anyway
+  override serialize_widgets = false;
+
+  protected helpActions = "mute and unmute";
+
+  static "@matchColors" = { type: "string" };
+  static "@matchTitle" = { type: "string" };
+  static "@showNav" = { type: "boolean" };
+  static "@sort" = {
+    type: "combo",
+    values: ["position", "alphanumeric", "custom alphabet"],
+  };
+  static "@customSortAlphabet" = { type: "string" };
+
+  static "@toggleRestriction" = {
+    type: "combo",
+    values: ["default", "max one", "always one"],
+  };
+
+  constructor(title = FastGroupsMuter.title) {
+    super(title);
+    this.properties[PROPERTY_MATCH_COLORS] = "";
+    this.properties[PROPERTY_MATCH_TITLE] = "";
+    this.properties[PROPERTY_SHOW_NAV] = true;
+    this.properties[PROPERTY_SORT] = "position";
+    this.properties[PROPERTY_SORT_CUSTOM_ALPHA] = "";
+    this.properties[PROPERTY_RESTRICTION] = "default";
+  }
+
+  override onConstructed(): boolean {
+    this.addOutput("OPT_CONNECTION", "*");
+    return super.onConstructed();
+  }
+
+  override configure(info: SerializedLGraphNode<LGraphNode>): void {
+    // Patch a small issue (~14h) where multiple OPT_CONNECTIONS may have been created.
+    // https://github.com/rgthree/rgthree-comfy/issues/206
+    // TODO: This can probably be removed within a few weeks.
+    if (info.outputs?.length) {
+      info.outputs.length = 1;
+    }
+    super.configure(info);
+  }
+
+  override onAdded(graph: TLGraph): void {
+    FAST_GROUPS_SERVICE.addFastGroupNode(this);
+  }
+
+  override onRemoved(): void {
+    FAST_GROUPS_SERVICE.removeFastGroupNode(this);
+  }
+
+  refreshWidgets() {
+    const canvas = app.canvas as TLGraphCanvas;
+    let sort = this.properties?.[PROPERTY_SORT] || "position";
+    let customAlphabet: string[] | null = null;
+    if (sort === "custom alphabet") {
+      const customAlphaStr = this.properties?.[PROPERTY_SORT_CUSTOM_ALPHA]?.replace(/\n/g, "");
+      if (customAlphaStr && customAlphaStr.trim()) {
+        customAlphabet = customAlphaStr.includes(",")
+          ? customAlphaStr.toLocaleLowerCase().split(",")
+          : customAlphaStr.toLocaleLowerCase().trim().split("");
+      }
+      if (!customAlphabet?.length) {
+        sort = "alphanumeric";
+        customAlphabet = null;
+      }
+    }
+
+    const groups = [...FAST_GROUPS_SERVICE.getGroups(sort)];
+    // The service will return pre-sorted groups for alphanumeric and position. If this node has a
+    // custom sort, then we need to sort it manually.
+    if (customAlphabet?.length) {
+      groups.sort((a, b) => {
+        let aIndex = -1;
+        let bIndex = -1;
+        // Loop and find indexes. As we're finding multiple, a single for loop is more efficient.
+        for (const [index, alpha] of customAlphabet!.entries()) {
+          aIndex =
+            aIndex < 0 ? (a.title.toLocaleLowerCase().startsWith(alpha) ? index : -1) : aIndex;
+          bIndex =
+            bIndex < 0 ? (b.title.toLocaleLowerCase().startsWith(alpha) ? index : -1) : bIndex;
+          if (aIndex > -1 && bIndex > -1) {
+            break;
+          }
+        }
+        // Now compare.
+        if (aIndex > -1 && bIndex > -1) {
+          const ret = aIndex - bIndex;
+          if (ret === 0) {
+            return a.title.localeCompare(b.title);
+          }
+          return ret;
+        } else if (aIndex > -1) {
+          return -1;
+        } else if (bIndex > -1) {
+          return 1;
+        }
+        return a.title.localeCompare(b.title);
+      });
+    }
+
+    // See if we're filtering by colors, and match against the built-in keywords and actuial hex
+    // values.
+    let filterColors = (
+      (this.properties?.[PROPERTY_MATCH_COLORS] as string)?.split(",") || []
+    ).filter((c) => c.trim());
+    if (filterColors.length) {
+      filterColors = filterColors.map((color) => {
+        color = color.trim().toLocaleLowerCase();
+        if (LGraphCanvas.node_colors[color]) {
+          color = LGraphCanvas.node_colors[color]!.groupcolor;
+        }
+        color = color.replace("#", "").toLocaleLowerCase();
+        if (color.length === 3) {
+          color = color.replace(/(.)(.)(.)/, "$1$1$2$2$3$3");
+        }
+        return `#${color}`;
+      });
+    }
+
+    // Go over the groups
+    let index = 0;
+    for (const group of groups) {
+      if (filterColors.length) {
+        let groupColor = group.color?.replace("#", "").trim().toLocaleLowerCase();
+        if (!groupColor) {
+          continue;
+        }
+        if (groupColor.length === 3) {
+          groupColor = groupColor.replace(/(.)(.)(.)/, "$1$1$2$2$3$3");
+        }
+        groupColor = `#${groupColor}`;
+        if (!filterColors.includes(groupColor)) {
+          continue;
+        }
+      }
+      if (this.properties?.[PROPERTY_MATCH_TITLE]?.trim()) {
+        try {
+          if (!new RegExp(this.properties[PROPERTY_MATCH_TITLE], "i").exec(group.title)) {
+            continue;
+          }
+        } catch (e) {
+          console.error(e);
+          continue;
+        }
+      }
+      const widgetName = `Enable ${group.title}`;
+      let widget = this.widgets.find((w) => w.name === widgetName);
+      if (!widget) {
+        // When we add a widget, litegraph is going to mess up the size, so we
+        // store it so we can retrieve it in computeSize. Hacky..
+        this.tempSize = [...this.size];
+        widget = this.addCustomWidget<IWidget<boolean>>({
+          name: "RGTHREE_TOGGLE_AND_NAV",
+          label: "",
+          value: false,
+          disabled: false,
+          options: { on: "yes", off: "no" },
+          draw: function (
+            ctx: CanvasRenderingContext2D,
+            node: LGraphNode,
+            width: number,
+            posY: number,
+            height: number,
+          ) {
+            const widgetData = drawNodeWidget(ctx, {
+              width,
+              height,
+              posY,
+            });
+
+            const showNav = node.properties?.[PROPERTY_SHOW_NAV] !== false;
+
+            // Render from right to left, since the text on left will take available space.
+            // `currentX` markes the current x position moving backwards.
+            let currentX = widgetData.width - widgetData.margin;
+
+            // The nav arrow
+            if (!widgetData.lowQuality && showNav) {
+              currentX -= 7; // Arrow space margin
+              const midY = widgetData.posY + widgetData.height * 0.5;
+              ctx.fillStyle = ctx.strokeStyle = "#89A";
+              ctx.lineJoin = "round";
+              ctx.lineCap = "round";
+              const arrow = new Path2D(`M${currentX} ${midY} l -7 6 v -3 h -7 v -6 h 7 v -3 z`);
+              ctx.fill(arrow);
+              ctx.stroke(arrow);
+              currentX -= 14;
+
+              currentX -= 7;
+              ctx.strokeStyle = widgetData.colorOutline;
+              ctx.stroke(new Path2D(`M ${currentX} ${widgetData.posY} v ${widgetData.height}`));
+            } else if (widgetData.lowQuality && showNav) {
+              currentX -= 28;
+            }
+
+            // The toggle itself.
+            currentX -= 7;
+            ctx.fillStyle = this.value ? "#89A" : "#333";
+            ctx.beginPath();
+            const toggleRadius = height * 0.36;
+            ctx.arc(currentX - toggleRadius, posY + height * 0.5, toggleRadius, 0, Math.PI * 2);
+            ctx.fill();
+            currentX -= toggleRadius * 2;
+
+            if (!widgetData.lowQuality) {
+              currentX -= 4;
+              ctx.textAlign = "right";
+              ctx.fillStyle = this.value ? widgetData.colorText : widgetData.colorTextSecondary;
+              const label = this.label || this.name;
+              const toggleLabelOn = this.options.on || "true";
+              const toggleLabelOff = this.options.off || "false";
+              ctx.fillText(
+                this.value ? toggleLabelOn : toggleLabelOff,
+                currentX,
+                posY + height * 0.7,
+              );
+              currentX -= Math.max(
+                ctx.measureText(toggleLabelOn).width,
+                ctx.measureText(toggleLabelOff).width,
+              );
+
+              currentX -= 7;
+              ctx.textAlign = "left";
+              let maxLabelWidth =
+                widgetData.width - widgetData.margin - 10 - (widgetData.width - currentX);
+              if (label != null) {
+                ctx.fillText(
+                  fitString(ctx, label, maxLabelWidth),
+                  widgetData.margin + 10,
+                  posY + height * 0.7,
+                );
+              }
+            }
+          },
+          serializeValue(serializedNode: SerializedLGraphNode, widgetIndex: number) {
+            return this.value;
+          },
+          mouse(event: PointerEvent, pos: Vector2, node: LGraphNode) {
+            if (event.type == "pointerdown") {
+              if (
+                node.properties?.[PROPERTY_SHOW_NAV] !== false &&
+                pos[0] >= node.size[0] - 15 - 28 - 1
+              ) {
+                const canvas = app.canvas as TLGraphCanvas;
+                const lowQuality = (canvas.ds?.scale || 1) <= 0.5;
+                if (!lowQuality) {
+                  // Clicked on right half with nav arrow, go to the group, center on group and set
+                  // zoom to see it all.
+                  canvas.centerOnNode(group);
+                  const zoomCurrent = canvas.ds?.scale || 1;
+                  const zoomX = canvas.canvas.width / group._size[0] - 0.02;
+                  const zoomY = canvas.canvas.height / group._size[1] - 0.02;
+                  canvas.setZoom(Math.min(zoomCurrent, zoomX, zoomY), [
+                    canvas.canvas.width / 2,
+                    canvas.canvas.height / 2,
+                  ]);
+                  canvas.setDirty(true, true);
+                }
+              } else {
+                this.value = !this.value;
+                setTimeout(() => {
+                  this.callback?.(this.value, app.canvas, node, pos, event);
+                }, 20);
+              }
+            }
+            return true;
+          },
+        });
+        (widget as any).doModeChange = (force?: boolean, skipOtherNodeCheck?: boolean) => {
+          group.recomputeInsideNodes();
+          const hasAnyActiveNodes = group._nodes.some((n) => n.mode === LiteGraph.ALWAYS);
+          let newValue = force != null ? force : !hasAnyActiveNodes;
+          if (skipOtherNodeCheck !== true) {
+            if (newValue && this.properties?.[PROPERTY_RESTRICTION]?.includes(" one")) {
+              for (const widget of this.widgets) {
+                (widget as any).doModeChange(false, true);
+              }
+            } else if (!newValue && this.properties?.[PROPERTY_RESTRICTION] === "always one") {
+              newValue = this.widgets.every((w) => !w.value || w === widget);
+            }
+          }
+          for (const node of group._nodes) {
+            node.mode = (newValue ? this.modeOn : this.modeOff) as 1 | 2 | 3 | 4;
+          }
+          (group as any)._rgthreeHasAnyActiveNode = newValue;
+          widget!.value = newValue;
+          app.graph.setDirtyCanvas(true, false);
+        };
+        widget.callback = () => {
+          (widget as any).doModeChange();
+        };
+
+        this.setSize(this.computeSize());
+      }
+      if (widget.name != widgetName) {
+        widget.name = widgetName;
+        this.setDirtyCanvas(true, false);
+      }
+      if (widget.value != (group as any)._rgthreeHasAnyActiveNode) {
+        widget.value = (group as any)._rgthreeHasAnyActiveNode;
+        this.setDirtyCanvas(true, false);
+      }
+      if (this.widgets[index] !== widget) {
+        const oldIndex = this.widgets.findIndex((w) => w === widget);
+        this.widgets.splice(index, 0, this.widgets.splice(oldIndex, 1)[0]!);
+        this.setDirtyCanvas(true, false);
+      }
+      index++;
+    }
+
+    // Everything should now be in order, so let's remove all remaining widgets.
+    while ((this.widgets || [])[index]) {
+      this.removeWidget(index++);
+    }
+  }
+
+  override computeSize(out?: Vector2) {
+    let size = super.computeSize(out);
+    if (this.tempSize) {
+      size[0] = Math.max(this.tempSize[0], size[0]);
+      size[1] = Math.max(this.tempSize[1], size[1]);
+      // We sometimes get repeated calls to compute size, so debounce before clearing.
+      this.debouncerTempWidth && clearTimeout(this.debouncerTempWidth);
+      this.debouncerTempWidth = setTimeout(() => {
+        this.tempSize = null;
+      }, 32);
+    }
+    setTimeout(() => {
+      app.graph.setDirtyCanvas(true, true);
+    }, 16);
+    return size;
+  }
+
+  override async handleAction(action: string) {
+    if (action === "Mute all" || action === "Bypass all") {
+      const alwaysOne = this.properties?.[PROPERTY_RESTRICTION] === "always one";
+      for (const [index, widget] of this.widgets.entries()) {
+        (widget as any)?.doModeChange(alwaysOne && !index ? true : false, true);
+      }
+    } else if (action === "Enable all") {
+      const onlyOne = this.properties?.[PROPERTY_RESTRICTION].includes(" one");
+      for (const [index, widget] of this.widgets.entries()) {
+        (widget as any)?.doModeChange(onlyOne && index > 0 ? false : true, true);
+      }
+    } else if (action === "Toggle all") {
+      const onlyOne = this.properties?.[PROPERTY_RESTRICTION].includes(" one");
+      let foundOne = false;
+      for (const [index, widget] of this.widgets.entries()) {
+        // If you have only one, then we'll stop at the first.
+        let newValue: boolean = onlyOne && foundOne ? false : !widget.value;
+        foundOne = foundOne || newValue;
+        (widget as any)?.doModeChange(newValue, true);
+      }
+      // And if you have always one, then we'll flip the last
+      if (!foundOne && this.properties?.[PROPERTY_RESTRICTION] === "always one") {
+        (this.widgets[this.widgets.length - 1] as any)?.doModeChange(true, true);
+      }
+    }
+  }
+
+  override getHelp() {
+    return `
+      <p>The ${this.type!.replace(
+        "(rgthree)",
+        "",
+      )} is an input-less node that automatically collects all groups in your current
+      workflow and allows you to quickly ${this.helpActions} all nodes within the group.</p>
+      <ul>
+        <li>
+          <p>
+            <strong>Properties.</strong> You can change the following properties (by right-clicking
+            on the node, and select "Properties" or "Properties Panel" from the menu):
+          </p>
+          <ul>
+            <li><p>
+              <code>${PROPERTY_MATCH_COLORS}</code> - Only add groups that match the provided
+              colors. Can be ComfyUI colors (red, pale_blue) or hex codes (#a4d399). Multiple can be
+              added, comma delimited.
+            </p></li>
+            <li><p>
+              <code>${PROPERTY_MATCH_TITLE}</code> - Filter the list of toggles by title match
+              (string match, or regular expression).
+            </p></li>
+            <li><p>
+              <code>${PROPERTY_SHOW_NAV}</code> - Add / remove a quick navigation arrow to take you
+              to the group. <i>(default: true)</i>
+              </p></li>
+            <li><p>
+              <code>${PROPERTY_SORT}</code> - Sort the toggles' order by "alphanumeric", graph
+              "position", or "custom alphabet". <i>(default: "position")</i>
+            </p></li>
+            <li>
+              <p>
+                <code>${PROPERTY_SORT_CUSTOM_ALPHA}</code> - When the
+                <code>${PROPERTY_SORT}</code> property is "custom alphabet" you can define the
+                alphabet to use here, which will match the <i>beginning</i> of each group name and
+                sort against it. If group titles do not match any custom alphabet entry, then they
+                will be put after groups that do, ordered alphanumerically.
+              </p>
+              <p>
+                This can be a list of single characters, like "zyxw..." or comma delimited strings
+                for more control, like "sdxl,pro,sd,n,p".
+              </p>
+              <p>
+                Note, when two group title match the same custom alphabet entry, the <i>normal
+                alphanumeric alphabet</i> breaks the tie. For instance, a custom alphabet of
+                "e,s,d" will order groups names like "SDXL, SEGS, Detailer" eventhough the custom
+                alphabet has an "e" before "d" (where one may expect "SE" to be before "SD").
+              </p>
+              <p>
+                To have "SEGS" appear before "SDXL" you can use longer strings. For instance, the
+                custom alphabet value of "se,s,f" would work here.
+              </p>
+            </li>
+            <li><p>
+              <code>${PROPERTY_RESTRICTION}</code> - Optionally, attempt to restrict the number of
+              widgets that can be enabled to a maximum of one, or always one.
+              </p>
+              <p><em><strong>Note:</strong> If using "max one" or "always one" then this is only
+              enforced when clicking a toggle on this node; if nodes within groups are changed
+              outside of the initial toggle click, then these restriction will not be enforced, and
+              could result in a state where more than one toggle is enabled. This could also happen
+              if nodes are overlapped with multiple groups.
+            </p></li>
+
+          </ul>
+        </li>
+      </ul>`;
+  }
+}
+
+/**
+ * Fast Bypasser implementation that looks for groups in the workflow and adds toggles to mute them.
+ */
+export class FastGroupsMuter extends BaseFastGroupsModeChanger {
+  static override type = NodeTypesString.FAST_GROUPS_MUTER;
+  static override title = NodeTypesString.FAST_GROUPS_MUTER;
+  override comfyClass = NodeTypesString.FAST_GROUPS_MUTER;
+
+  static override exposedActions = ["Bypass all", "Enable all", "Toggle all"];
+
+  protected override helpActions = "mute and unmute";
+
+  override readonly modeOn: number = LiteGraph.ALWAYS;
+  override readonly modeOff: number = LiteGraph.NEVER;
+
+  constructor(title = FastGroupsMuter.title) {
+    super(title);
+    this.onConstructed();
+  }
+}
+
+app.registerExtension({
+  name: "rgthree.FastGroupsMuter",
+  registerCustomNodes() {
+    FastGroupsMuter.setUp();
+  },
+  loadedGraphNode(node: LGraphNode) {
+    if (node.type == FastGroupsMuter.title) {
+      (node as FastGroupsMuter).tempSize = [...node.size];
+    }
+  },
+});

rgthree-comfy/src_web/comfyui/feature_group_fast_toggle.ts

@@ -0,0 +1,304 @@
+import type {
+  LGraphCanvas as TLGraphCanvas,
+  LGraphGroup as TLGraphGroup,
+  LGraph as TLGraph,
+  AdjustedMouseEvent,
+  Vector2,
+} from "typings/litegraph.js";
+import type {AdjustedMouseCustomEvent} from "typings/rgthree.js";
+
+import {app} from "scripts/app.js";
+import {rgthree} from "./rgthree.js";
+import {getOutputNodes} from "./utils.js";
+import {SERVICE as CONFIG_SERVICE} from "./services/config_service.js";
+
+const BTN_SIZE = 20;
+const BTN_MARGIN: Vector2 = [6, 6];
+const BTN_SPACING = 8;
+const BTN_GRID = BTN_SIZE / 8;
+
+const TOGGLE_TO_MODE = new Map([
+  ["MUTE", LiteGraph.NEVER],
+  ["BYPASS", 4],
+]);
+
+function getToggles() {
+  return [...CONFIG_SERVICE.getFeatureValue("group_header_fast_toggle.toggles", [])].reverse();
+}
+
+/**
+ * Determines if the user clicked on an fast header icon.
+ */
+function clickedOnToggleButton(e: AdjustedMouseEvent, group: TLGraphGroup): string | null {
+  const toggles = getToggles();
+  const pos = group.pos;
+  const size = group.size;
+  for (let i = 0; i < toggles.length; i++) {
+    const toggle = toggles[i];
+    if (
+      LiteGraph.isInsideRectangle(
+        e.canvasX,
+        e.canvasY,
+        pos[0] + size[0] - (BTN_SIZE + BTN_MARGIN[0]) * (i + 1),
+        pos[1] + BTN_MARGIN[1],
+        BTN_SIZE,
+        BTN_SIZE,
+      )
+    ) {
+      return toggle;
+    }
+  }
+  return null;
+}
+
+/**
+ * Registers the GroupHeaderToggles which places a mute and/or bypass icons in groups headers for
+ * quick, single-click ability to mute/bypass.
+ */
+app.registerExtension({
+  name: "rgthree.GroupHeaderToggles",
+  async setup() {
+
+    /**
+     * LiteGraph won't call `drawGroups` unless the canvas is dirty. Other nodes will do this, but
+     * in small workflows, we'll want to trigger it dirty so we can be drawn if we're in hover mode.
+     */
+    setInterval(() => {
+      if (
+        CONFIG_SERVICE.getFeatureValue("group_header_fast_toggle.enabled") &&
+        CONFIG_SERVICE.getFeatureValue("group_header_fast_toggle.show") !== "always"
+      ) {
+        app.canvas.setDirty(true, true);
+      }
+    }, 250);
+
+    /**
+     * Handles a click on the icon area if the user has the extension enable from settings.
+     * Hooks into the already overriden mouse down processor from rgthree.
+     */
+    rgthree.addEventListener("on-process-mouse-down", ((e: AdjustedMouseCustomEvent) => {
+      if (!CONFIG_SERVICE.getFeatureValue("group_header_fast_toggle.enabled")) return;
+
+      const canvas = app.canvas as TLGraphCanvas;
+      if (canvas.selected_group) {
+        const originalEvent = e.detail.originalEvent;
+        const group = canvas.selected_group;
+        const clickedOnToggle = clickedOnToggleButton(originalEvent, group) || "";
+        const toggleAction = clickedOnToggle?.toLocaleUpperCase();
+        if (toggleAction) {
+          if (toggleAction === "QUEUE") {
+            const outputNodes = getOutputNodes(group._nodes);
+            if (!outputNodes?.length) {
+              rgthree.showMessage({
+                id: "no-output-in-group",
+                type: "warn",
+                timeout: 4000,
+                message: "No output nodes for group!",
+              });
+            } else {
+              rgthree.queueOutputNodes(outputNodes.map((n) => n.id));
+            }
+          } else {
+            const toggleMode = TOGGLE_TO_MODE.get(toggleAction);
+            if (toggleMode) {
+              group.recomputeInsideNodes();
+              const hasAnyActiveNodes = group._nodes.some((n) => n.mode === LiteGraph.ALWAYS);
+              const isAllMuted =
+                !hasAnyActiveNodes && group._nodes.every((n) => n.mode === LiteGraph.NEVER);
+              const isAllBypassed =
+                !hasAnyActiveNodes && !isAllMuted && group._nodes.every((n) => n.mode === 4);
+
+              let newMode: 0 | 1 | 2 | 3 | 4 = LiteGraph.ALWAYS;
+              if (toggleMode === LiteGraph.NEVER) {
+                newMode = isAllMuted ? LiteGraph.ALWAYS : LiteGraph.NEVER;
+              } else {
+                newMode = isAllBypassed ? LiteGraph.ALWAYS : 4;
+              }
+              for (const node of group._nodes) {
+                node.mode = newMode;
+              }
+            }
+          }
+          // Make it such that we're not then moving the group on drag.
+          canvas.selected_group = null;
+          canvas.dragging_canvas = false;
+        }
+      }
+    }) as EventListener);
+
+    /**
+     * Overrides LiteGraph's Canvas method for drawingGroups and, after calling the original, checks
+     * that the user has enabled fast toggles and draws them on the top-right of the app..
+     */
+    const drawGroups = LGraphCanvas.prototype.drawGroups;
+    LGraphCanvas.prototype.drawGroups = function (
+      canvasEl: HTMLCanvasElement,
+      ctx: CanvasRenderingContext2D,
+    ) {
+      drawGroups.apply(this, [...arguments] as any);
+
+      if (
+        !CONFIG_SERVICE.getFeatureValue("group_header_fast_toggle.enabled") ||
+        !rgthree.lastAdjustedMouseEvent
+      ) {
+        return;
+      }
+
+      const graph = app.graph as TLGraph;
+
+      let groups: TLGraphGroup[];
+      // Default to hover if not always.
+      if (CONFIG_SERVICE.getFeatureValue("group_header_fast_toggle.show") !== "always") {
+        const hoverGroup = graph.getGroupOnPos(
+          rgthree.lastAdjustedMouseEvent.canvasX,
+          rgthree.lastAdjustedMouseEvent.canvasY,
+        );
+        groups = hoverGroup ? [hoverGroup] : [];
+      } else {
+        groups = graph._groups || [];
+      }
+
+      if (!groups.length) {
+        return;
+      }
+
+      const toggles = getToggles();
+
+      ctx.save();
+      for (const group of groups || []) {
+        let anyActive = false;
+        let allMuted = !!group._nodes.length;
+        let allBypassed = allMuted;
+
+        // Find the current state of the group's nodes.
+        for (const node of group._nodes) {
+          anyActive = anyActive || node.mode === LiteGraph.ALWAYS;
+          allMuted = allMuted && node.mode === LiteGraph.NEVER;
+          allBypassed = allBypassed && node.mode === 4;
+          if (anyActive || (!allMuted && !allBypassed)) {
+            break;
+          }
+        }
+
+        // Display each toggle.
+        for (let i = 0; i < toggles.length; i++) {
+          const toggle = toggles[i];
+          const pos = group._pos;
+          const size = group._size;
+          ctx.fillStyle = ctx.strokeStyle = group.color || "#335";
+          const x = pos[0] + size[0] - BTN_MARGIN[0] - BTN_SIZE - (BTN_SPACING + BTN_SIZE) * i;
+          const y = pos[1] + BTN_MARGIN[1];
+          const midX = x + BTN_SIZE / 2;
+          const midY = y + BTN_SIZE / 2;
+          if (toggle === "queue") {
+            const outputNodes = getOutputNodes(group._nodes);
+            const oldGlobalAlpha = ctx.globalAlpha;
+            if (!outputNodes?.length) {
+              ctx.globalAlpha = 0.5;
+            }
+            ctx.lineJoin = "round";
+            ctx.lineCap = "round";
+            const arrowSizeX = BTN_SIZE * 0.6;
+            const arrowSizeY = BTN_SIZE * 0.7;
+            const arrow = new Path2D(
+              `M ${x + arrowSizeX / 2} ${midY} l 0 -${arrowSizeY / 2} l ${arrowSizeX} ${arrowSizeY / 2} l -${arrowSizeX} ${arrowSizeY / 2} z`,
+            );
+            ctx.stroke(arrow);
+            if (outputNodes?.length) {
+              ctx.fill(arrow);
+            }
+            ctx.globalAlpha = oldGlobalAlpha;
+          } else {
+            const on = toggle === "bypass" ? allBypassed : allMuted;
+
+            ctx.beginPath();
+            ctx.lineJoin = "round";
+            ctx.rect(x, y, BTN_SIZE, BTN_SIZE);
+
+            ctx.lineWidth = 2;
+            if (toggle === "mute") {
+              ctx.lineJoin = "round";
+              ctx.lineCap = "round";
+
+              if (on) {
+                ctx.stroke(
+                  new Path2D(`
+                    ${eyeFrame(midX, midY)}
+                    ${eyeLashes(midX, midY)}
+                `),
+                );
+              } else {
+                const radius = BTN_GRID * 1.5;
+
+                // Eyeball fill
+                ctx.fill(
+                  new Path2D(`
+                    ${eyeFrame(midX, midY)}
+                    ${eyeFrame(midX, midY, -1)}
+                    ${circlePath(midX, midY, radius)}
+                    ${circlePath(midX + BTN_GRID / 2, midY - BTN_GRID / 2, BTN_GRID * 0.375)}
+                  `),
+                  "evenodd",
+                );
+
+                // Eye Outline Stroke
+                ctx.stroke(new Path2D(`${eyeFrame(midX, midY)} ${eyeFrame(midX, midY, -1)}`));
+
+                // Eye lashes (faded)
+                ctx.globalAlpha = this.editor_alpha * 0.5;
+                ctx.stroke(new Path2D(`${eyeLashes(midX, midY)} ${eyeLashes(midX, midY, -1)}`));
+                ctx.globalAlpha = this.editor_alpha;
+              }
+            } else {
+              const lineChanges = on
+                ? `a ${BTN_GRID * 3}, ${BTN_GRID * 3} 0 1, 1 ${BTN_GRID * 3 * 2},0
+                  l ${BTN_GRID * 2.0} 0`
+                : `l ${BTN_GRID * 8} 0`;
+
+              ctx.stroke(
+                new Path2D(`
+                  M ${x} ${midY}
+                  ${lineChanges}
+                  M ${x + BTN_SIZE} ${midY} l -2  2
+                  M ${x + BTN_SIZE} ${midY} l -2 -2
+                `),
+              );
+              ctx.fill(new Path2D(`${circlePath(x + BTN_GRID * 3, midY, BTN_GRID * 1.8)}`));
+            }
+          }
+        }
+      }
+      ctx.restore();
+    };
+  },
+});
+
+function eyeFrame(midX: number, midY: number, yFlip = 1) {
+  return `
+      M ${midX - BTN_SIZE / 2} ${midY}
+      c ${BTN_GRID * 1.5} ${yFlip * BTN_GRID * 2.5}, ${BTN_GRID * (8 - 1.5)} ${
+        yFlip * BTN_GRID * 2.5
+      }, ${BTN_GRID * 8} 0
+  `;
+}
+
+function eyeLashes(midX: number, midY: number, yFlip = 1) {
+  return `
+    M ${midX - BTN_GRID * 3.46} ${midY + yFlip * BTN_GRID * 0.9} l -1.15  ${1.25 * yFlip}
+    M ${midX - BTN_GRID * 2.38} ${midY + yFlip * BTN_GRID * 1.6} l -0.90  ${1.5 * yFlip}
+    M ${midX - BTN_GRID * 1.15} ${midY + yFlip * BTN_GRID * 1.95} l -0.50  ${1.75 * yFlip}
+    M ${midX + BTN_GRID * 0.0} ${midY + yFlip * BTN_GRID * 2.0} l  0.00  ${2.0 * yFlip}
+    M ${midX + BTN_GRID * 1.15} ${midY + yFlip * BTN_GRID * 1.95} l  0.50  ${1.75 * yFlip}
+    M ${midX + BTN_GRID * 2.38} ${midY + yFlip * BTN_GRID * 1.6} l  0.90  ${1.5 * yFlip}
+    M ${midX + BTN_GRID * 3.46} ${midY + yFlip * BTN_GRID * 0.9} l  1.15  ${1.25 * yFlip}
+`;
+}
+
+function circlePath(cx: number, cy: number, radius: number) {
+  return `
+      M ${cx} ${cy}
+      m ${radius}, 0
+      a ${radius},${radius} 0 1, 1 -${radius * 2},0
+      a ${radius},${radius} 0 1, 1  ${radius * 2},0
+  `;
+}

rgthree-comfy/src_web/comfyui/feature_import_individual_nodes.ts

@@ -0,0 +1,69 @@
+import { tryToGetWorkflowDataFromEvent } from "rgthree/common/utils_workflow.js";
+import { app } from "scripts/app.js";
+import type { ComfyNode, ComfyNodeConstructor, ComfyObjectInfo } from "typings/comfy.js";
+import { SERVICE as CONFIG_SERVICE } from "./services/config_service.js";
+
+/**
+ * Registers the GroupHeaderToggles which places a mute and/or bypass icons in groups headers for
+ * quick, single-click ability to mute/bypass.
+ */
+app.registerExtension({
+  name: "rgthree.ImportIndividualNodes",
+  async beforeRegisterNodeDef(nodeType: ComfyNodeConstructor, nodeData: ComfyObjectInfo) {
+    const onDragOver = nodeType.prototype.onDragOver;
+    nodeType.prototype.onDragOver = function (e: DragEvent) {
+      let handled = onDragOver?.apply?.(this, [...arguments] as any);
+      if (handled != null) {
+        return handled;
+      }
+      return importIndividualNodesInnerOnDragOver(this, e);
+    };
+
+    const onDragDrop = nodeType.prototype.onDragDrop;
+    nodeType.prototype.onDragDrop = async function (e: DragEvent) {
+      const alreadyHandled = await onDragDrop?.apply?.(this, [...arguments] as any);
+      if (alreadyHandled) {
+        return alreadyHandled;
+      }
+      return importIndividualNodesInnerOnDragDrop(this, e);
+    };
+  },
+});
+
+export function importIndividualNodesInnerOnDragOver(node: ComfyNode, e: DragEvent): boolean {
+  return (
+    (node.widgets?.length && !!CONFIG_SERVICE.getFeatureValue("import_individual_nodes.enabled")) ||
+    false
+  );
+}
+
+export async function importIndividualNodesInnerOnDragDrop(node: ComfyNode, e: DragEvent) {
+  if (!node.widgets?.length || !CONFIG_SERVICE.getFeatureValue("import_individual_nodes.enabled")) {
+    return false;
+  }
+
+  let handled = false;
+  const { workflow, prompt } = await tryToGetWorkflowDataFromEvent(e);
+  if (!handled && workflow) {
+    const exact = (workflow.nodes || []).find((n) => n.id === node.id && n.type === node.type);
+    if (
+      exact?.widgets_values?.length &&
+      confirm(
+        "Found a node match from embedded workflow (same id & type) in this workflow. Would you like to set the widget values?",
+      )
+    ) {
+      node.configure({
+        // Title is overridden if it's not supplied; set it to the current then.
+        title: node.title,
+        widgets_values: [...(exact?.widgets_values || [])]
+      } as any);
+      handled = true;
+    }
+  }
+  if (!handled && workflow) {
+    handled = !confirm(
+      "No exact match found in workflow. Would you like to replace the whole workflow?",
+    );
+  }
+  return handled;
+}

rgthree-comfy/src_web/comfyui/image_comparer.ts

@@ -0,0 +1,474 @@
+import { app } from "scripts/app.js";
+import { api } from "scripts/api.js";
+import { RgthreeBaseServerNode } from "./base_node.js";
+import { NodeTypesString } from "./constants.js";
+import { ComfyNodeConstructor, ComfyObjectInfo } from "typings/comfy.js";
+import {
+  AdjustedMouseEvent,
+  LGraphCanvas,
+  LGraphNode,
+  SerializedLGraphNode,
+  Vector2,
+} from "typings/litegraph.js";
+import { addConnectionLayoutSupport } from "./utils.js";
+import {
+  RgthreeBaseHitAreas,
+  RgthreeBaseWidget,
+  RgthreeBaseWidgetBounds,
+} from "./utils_widgets.js";
+import { measureText } from "./utils_canvas.js";
+
+type ComfyImageServerData = { filename: string; type: string; subfolder: string };
+type ComfyImageData = { name: string; selected: boolean; url: string; img?: HTMLImageElement };
+type OldExecutedPayload = {
+  images: ComfyImageServerData[];
+};
+type ExecutedPayload = {
+  a_images?: ComfyImageServerData[];
+  b_images?: ComfyImageServerData[];
+};
+
+function imageDataToUrl(data: ComfyImageServerData) {
+  return api.apiURL(
+    `/view?filename=${encodeURIComponent(data.filename)}&type=${data.type}&subfolder=${
+      data.subfolder
+    }${app.getPreviewFormatParam()}${app.getRandParam()}`,
+  );
+}
+
+/**
+ * Compares two images in one canvas node.
+ */
+export class RgthreeImageComparer extends RgthreeBaseServerNode {
+  static override title = NodeTypesString.IMAGE_COMPARER;
+  static override type = NodeTypesString.IMAGE_COMPARER;
+  static comfyClass = NodeTypesString.IMAGE_COMPARER;
+
+  // These is what the core preview image node uses to show the context menu. May not be that helpful
+  // since it likely will always be "0" when a context menu is invoked without manually changing
+  // something.
+  imageIndex: number = 0;
+  imgs: InstanceType<typeof Image>[] = [];
+
+  override serialize_widgets = true;
+
+  isPointerDown = false;
+  isPointerOver = false;
+  pointerOverPos: Vector2 = [0, 0];
+
+  private canvasWidget: RgthreeImageComparerWidget | null = null;
+
+  static "@comparer_mode" = {
+    type: "combo",
+    values: ["Slide", "Click"],
+  };
+
+  constructor(title = RgthreeImageComparer.title) {
+    super(title);
+    this.properties["comparer_mode"] = "Slide";
+  }
+
+  override onExecuted(output: ExecutedPayload | OldExecutedPayload) {
+    super.onExecuted?.(output);
+    if ("images" in output) {
+      this.canvasWidget!.value = {
+        images: (output.images || []).map((d, i) => {
+          return {
+            name: i === 0 ? "A" : "B",
+            selected: true,
+            url: imageDataToUrl(d),
+          };
+        }),
+      };
+    } else {
+      output.a_images = output.a_images || [];
+      output.b_images = output.b_images || [];
+      const imagesToChoose: ComfyImageData[] = [];
+      const multiple = output.a_images.length + output.b_images.length > 2;
+      for (const [i, d] of output.a_images.entries()) {
+        imagesToChoose.push({
+          name: output.a_images.length > 1 || multiple ? `A${i + 1}` : "A",
+          selected: i === 0,
+          url: imageDataToUrl(d),
+        });
+      }
+      for (const [i, d] of output.b_images.entries()) {
+        imagesToChoose.push({
+          name: output.b_images.length > 1 || multiple ? `B${i + 1}` : "B",
+          selected: i === 0,
+          url: imageDataToUrl(d),
+        });
+      }
+      this.canvasWidget!.value = { images: imagesToChoose };
+    }
+  }
+
+  override onSerialize(o: SerializedLGraphNode) {
+    super.onSerialize && super.onSerialize(o);
+    for (let [index, widget_value] of (o.widgets_values || []).entries()) {
+      if (this.widgets[index]?.name === "rgthree_comparer") {
+        o.widgets_values![index] = (
+          this.widgets[index] as RgthreeImageComparerWidget
+        ).value.images.map((d) => {
+          d = { ...d };
+          delete d.img;
+          return d;
+        });
+      }
+    }
+  }
+
+  override onNodeCreated() {
+    this.canvasWidget = this.addCustomWidget(
+      new RgthreeImageComparerWidget("rgthree_comparer", this),
+    );
+    this.setSize(this.computeSize());
+    this.setDirtyCanvas(true, true);
+  }
+
+  /**
+   * Sets mouse as down or up based on param. If it's down, we also loop to check pointer is still
+   * down. This is because LiteGraph doesn't fire `onMouseUp` every time there's a mouse up, so we
+   * need to manually monitor `pointer_is_down` and, when it's no longer true, set mouse as up here.
+   */
+  private setIsPointerDown(down: boolean = this.isPointerDown) {
+    const newIsDown = down && !!app.canvas.pointer_is_down;
+    if (this.isPointerDown !== newIsDown) {
+      this.isPointerDown = newIsDown;
+      this.setDirtyCanvas(true, false);
+    }
+    this.imageIndex = this.isPointerDown ? 1 : 0;
+    if (this.isPointerDown) {
+      requestAnimationFrame(() => {
+        this.setIsPointerDown();
+      });
+    }
+  }
+
+  override onMouseDown(event: MouseEvent, pos: Vector2, graphCanvas: LGraphCanvas): void {
+    super.onMouseDown?.(event, pos, graphCanvas);
+    this.setIsPointerDown(true);
+  }
+
+  override onMouseEnter(event: MouseEvent, pos: Vector2, graphCanvas: LGraphCanvas): void {
+    super.onMouseEnter?.(event, pos, graphCanvas);
+    this.setIsPointerDown(!!app.canvas.pointer_is_down);
+    this.isPointerOver = true;
+  }
+
+  override onMouseLeave(event: MouseEvent, pos: Vector2, graphCanvas: LGraphCanvas): void {
+    super.onMouseLeave?.(event, pos, graphCanvas);
+    this.setIsPointerDown(false);
+    this.isPointerOver = false;
+  }
+
+  override onMouseMove(event: MouseEvent, pos: Vector2, graphCanvas: LGraphCanvas): void {
+    super.onMouseMove?.(event, pos, graphCanvas);
+    this.pointerOverPos = [...pos];
+    this.imageIndex = this.pointerOverPos[0] > this.size[0] / 2 ? 1 : 0;
+  }
+
+  override getHelp(): string {
+    return `
+      <p>
+        The ${this.type!.replace("(rgthree)", "")} node compares two images on top of each other.
+      </p>
+      <ul>
+        <li>
+          <p>
+            <strong>Notes</strong>
+          </p>
+          <ul>
+            <li><p>
+              The right-click menu may show image options (Open Image, Save Image, etc.) which will
+              correspond to the first image (image_a) if clicked on the left-half of the node, or
+              the second image if on the right half of the node.
+            </p></li>
+          </ul>
+        </li>
+        <li>
+          <p>
+            <strong>Inputs</strong>
+          </p>
+          <ul>
+            <li><p>
+              <code>image_a</code> <i>Optional.</i> The first image to use to compare.
+              image_a.
+            </p></li>
+            <li><p>
+              <code>image_b</code> <i>Optional.</i> The second image to use to compare.
+            </p></li>
+            <li><p>
+              <b>Note</b> <code>image_a</code> and <code>image_b</code> work best when a single
+              image is provided. However, if each/either are a batch, you can choose which item
+              from each batch are chosen to be compared. If either <code>image_a</code> or
+              <code>image_b</code> are not provided, the node will choose the first two from the
+              provided input if it's a batch, otherwise only show the single image (just as
+              Preview Image would).
+            </p></li>
+          </ul>
+        </li>
+        <li>
+          <p>
+            <strong>Properties.</strong> You can change the following properties (by right-clicking
+            on the node, and select "Properties" or "Properties Panel" from the menu):
+          </p>
+          <ul>
+            <li><p>
+              <code>comparer_mode</code> - Choose between "Slide" and "Click". Defaults to "Slide".
+            </p></li>
+          </ul>
+        </li>
+      </ul>`;
+  }
+
+  static override setUp(comfyClass: ComfyNodeConstructor, nodeData: ComfyObjectInfo) {
+    RgthreeBaseServerNode.registerForOverride(comfyClass, nodeData, RgthreeImageComparer);
+  }
+
+  static override onRegisteredForOverride(comfyClass: any) {
+    addConnectionLayoutSupport(RgthreeImageComparer, app, [
+      ["Left", "Right"],
+      ["Right", "Left"],
+    ]);
+    setTimeout(() => {
+      RgthreeImageComparer.category = comfyClass.category;
+    });
+  }
+}
+
+type RgthreeImageComparerWidgetValue = {
+  images: ComfyImageData[];
+};
+
+class RgthreeImageComparerWidget extends RgthreeBaseWidget<RgthreeImageComparerWidgetValue> {
+  private node: RgthreeImageComparer;
+
+  protected override hitAreas: RgthreeBaseHitAreas<any> = {
+    // We dynamically set this when/if we draw the labels.
+  };
+
+  private selected: [ComfyImageData?, ComfyImageData?] = [];
+
+  constructor(name: string, node: RgthreeImageComparer) {
+    super(name);
+    this.node = node;
+  }
+
+  private _value: RgthreeImageComparerWidgetValue = { images: [] };
+
+  set value(v: RgthreeImageComparerWidgetValue) {
+    // Despite `v` typed as RgthreeImageComparerWidgetValue, we may have gotten an array of strings
+    // from previous versions. We can handle that gracefully.
+    let cleanedVal;
+    if (Array.isArray(v)) {
+      cleanedVal = v.map((d, i) => {
+        if (!d || typeof d === "string") {
+          // We usually only have two here, so they're selected.
+          d = { url: d, name: i == 0 ? "A" : "B", selected: true };
+        }
+        return d;
+      });
+    } else {
+      cleanedVal = v.images || [];
+    }
+
+    // If we have multiple items in our sent value but we don't have both an "A" and a "B" then
+    // just simplify it down to the first two in the list.
+    if (cleanedVal.length > 2) {
+      const hasAAndB =
+        cleanedVal.some((i) => i.name.startsWith("A")) &&
+        cleanedVal.some((i) => i.name.startsWith("B"));
+      if (!hasAAndB) {
+        cleanedVal = [cleanedVal[0], cleanedVal[1]];
+      }
+    }
+
+    let selected = cleanedVal.filter((d) => d.selected);
+    // None are selected.
+    if (!selected.length && cleanedVal.length) {
+      cleanedVal[0]!.selected = true;
+    }
+
+    selected = cleanedVal.filter((d) => d.selected);
+    if (selected.length === 1 && cleanedVal.length > 1) {
+      cleanedVal.find((d) => !d.selected)!.selected = true;
+    }
+
+    this._value.images = cleanedVal;
+
+    selected = cleanedVal.filter((d) => d.selected);
+    this.setSelected(selected as [ComfyImageData, ComfyImageData]);
+  }
+
+  get value() {
+    return this._value;
+  }
+
+  setSelected(selected: [ComfyImageData, ComfyImageData]) {
+    this._value.images.forEach((d) => (d.selected = false));
+    this.node.imgs.length = 0;
+    for (const sel of selected) {
+      if (!sel.img) {
+        sel.img = new Image();
+        sel.img.src = sel.url;
+        this.node.imgs.push(sel.img);
+      }
+      sel.selected = true;
+    }
+    this.selected = selected;
+  }
+
+  draw(ctx: CanvasRenderingContext2D, node: RgthreeImageComparer, width: number, y: number) {
+    this.hitAreas = {};
+    if (this.value.images.length > 2) {
+      ctx.textAlign = "left";
+      ctx.textBaseline = "top";
+      ctx.font = `14px Arial`;
+      // Let's calculate the widths of all the labels.
+      const drawData: any = [];
+      const spacing = 5;
+      let x = 0;
+      for (const img of this.value.images) {
+        const width = measureText(ctx, img.name);
+        drawData.push({
+          img,
+          text: img.name,
+          x,
+          width: measureText(ctx, img.name),
+        });
+        x += width + spacing;
+      }
+      x = (node.size[0] - (x - spacing)) / 2;
+      for (const d of drawData) {
+        ctx.fillStyle = d.img.selected ? "rgba(180, 180, 180, 1)" : "rgba(180, 180, 180, 0.5)";
+        ctx.fillText(d.text, x, y);
+        this.hitAreas[d.text] = {
+          bounds: [x, y, d.width, 14],
+          data: d.img,
+          onDown: this.onSelectionDown,
+        };
+        x += d.width + spacing;
+      }
+      y += 20;
+    }
+
+    if (node.properties?.["comparer_mode"] === "Click") {
+      this.drawImage(ctx, this.selected[this.node.isPointerDown ? 1 : 0], y);
+    } else {
+      this.drawImage(ctx, this.selected[0], y);
+      if (node.isPointerOver) {
+        this.drawImage(ctx, this.selected[1], y, this.node.pointerOverPos[0]);
+      }
+    }
+  }
+
+  private onSelectionDown(
+    event: AdjustedMouseEvent,
+    pos: Vector2,
+    node: LGraphNode,
+    bounds?: RgthreeBaseWidgetBounds,
+  ) {
+    const selected = [...this.selected];
+    if (bounds?.data.name.startsWith("A")) {
+      selected[0] = bounds.data;
+    } else if (bounds?.data.name.startsWith("B")) {
+      selected[1] = bounds.data;
+    }
+    this.setSelected(selected as [ComfyImageData, ComfyImageData]);
+  }
+
+  private drawImage(
+    ctx: CanvasRenderingContext2D,
+    image: ComfyImageData | undefined,
+    y: number,
+    cropX?: number,
+  ) {
+    if (!image?.img?.naturalWidth || !image?.img?.naturalHeight) {
+      return;
+    }
+    let [nodeWidth, nodeHeight] = this.node.size;
+    const imageAspect = image?.img.naturalWidth / image?.img.naturalHeight;
+    let height = nodeHeight - y;
+    const widgetAspect = nodeWidth / height;
+    let targetWidth, targetHeight;
+    let offsetX = 0;
+    if (imageAspect > widgetAspect) {
+      targetWidth = nodeWidth;
+      targetHeight = nodeWidth / imageAspect;
+    } else {
+      targetHeight = height;
+      targetWidth = height * imageAspect;
+      offsetX = (nodeWidth - targetWidth) / 2;
+    }
+    const widthMultiplier = image?.img.naturalWidth / targetWidth;
+
+    const sourceX = 0;
+    const sourceY = 0;
+    const sourceWidth =
+      cropX != null ? (cropX - offsetX) * widthMultiplier : image?.img.naturalWidth;
+    const sourceHeight = image?.img.naturalHeight;
+    const destX = (nodeWidth - targetWidth) / 2;
+    const destY = y + (height - targetHeight) / 2;
+    const destWidth = cropX != null ? cropX - offsetX : targetWidth;
+    const destHeight = targetHeight;
+    ctx.save();
+    ctx.beginPath();
+    let globalCompositeOperation = ctx.globalCompositeOperation;
+    if (cropX) {
+      ctx.rect(destX, destY, destWidth, destHeight);
+      ctx.clip();
+    }
+    ctx.drawImage(
+      image?.img,
+      sourceX,
+      sourceY,
+      sourceWidth,
+      sourceHeight,
+      destX,
+      destY,
+      destWidth,
+      destHeight,
+    );
+    // Shows a label overlayed on the image. Not perfect, keeping commented out.
+    // ctx.globalCompositeOperation = "difference";
+    // ctx.fillStyle = "rgba(180, 180, 180, 1)";
+    // ctx.textAlign = "center";
+    // ctx.font = `32px Arial`;
+    // ctx.fillText(image.name, nodeWidth / 2, y + 32);
+    if (cropX != null && cropX >= (nodeWidth - targetWidth) / 2 && cropX <= targetWidth + offsetX) {
+      ctx.beginPath();
+      ctx.moveTo(cropX, destY);
+      ctx.lineTo(cropX, destY + destHeight);
+      ctx.globalCompositeOperation = "difference";
+      ctx.strokeStyle = "rgba(255,255,255, 1)";
+      ctx.stroke();
+    }
+    ctx.globalCompositeOperation = globalCompositeOperation;
+    ctx.restore();
+  }
+
+  computeSize(width: number): Vector2 {
+    return [width, 20];
+  }
+
+  serializeValue(serializedNode: SerializedLGraphNode, widgetIndex: number) {
+    const v = [];
+    for (const data of this._value.images) {
+      // Remove the img since it can't serialize.
+      const d = { ...data };
+      delete d.img;
+      v.push(d);
+    }
+    return { images: v };
+  }
+}
+
+app.registerExtension({
+  name: "rgthree.ImageComparer",
+  async beforeRegisterNodeDef(nodeType: ComfyNodeConstructor, nodeData: ComfyObjectInfo) {
+    if (nodeData.name === RgthreeImageComparer.type) {
+      RgthreeImageComparer.setUp(nodeType, nodeData);
+    }
+  },
+});