Add files using upload-large-folder tool

.gitattributes

@@ -277,3 +277,11 @@ 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_tensorrt/readme_images/image3.png filter=lfs diff=lfs merge=lfs -text
+comfyui_tensorrt/readme_images/image9.png filter=lfs diff=lfs merge=lfs -text
+rgthree-comfy/docs/rgthree_advanced_metadata.png filter=lfs diff=lfs merge=lfs -text
+rgthree-comfy/docs/rgthree_advanced.png filter=lfs diff=lfs merge=lfs -text
+comfyui_layerstyle/workflow/1344x768_hair.png filter=lfs diff=lfs merge=lfs -text
+rgthree-comfy/docs/rgthree_context.png filter=lfs diff=lfs merge=lfs -text
+rgthree-comfy/docs/rgthree_context_metadata.png filter=lfs diff=lfs merge=lfs -text
+comfyui_layerstyle/workflow/3840x2160car.jpg filter=lfs diff=lfs merge=lfs -text

rgthree-comfy/src_web/comfyui/services/config_service.ts

@@ -0,0 +1,40 @@
+// @ts-ignore
+import { rgthreeConfig } from "rgthree/config.js";
+import { getObjectValue, setObjectValue } from "rgthree/common/shared_utils.js";
+import { rgthreeApi } from "rgthree/common/rgthree_api.js";
+
+/**
+ * A singleton service exported as `SERVICE` to handle configuration routines.
+ */
+class ConfigService extends EventTarget {
+  getConfigValue(key: string, def?: any) {
+    return getObjectValue(rgthreeConfig, key, def);
+  }
+
+  getFeatureValue(key: string, def?: any) {
+    key = "features." + key.replace(/^features\./, "");
+    return getObjectValue(rgthreeConfig, key, def);
+  }
+
+  /**
+   * Given an object of key:value changes it will send to the server and wait for a successful
+   * response before setting the values on the local rgthreeConfig.
+   */
+  async setConfigValues(changed: { [key: string]: any }) {
+    const body = new FormData();
+    body.append("json", JSON.stringify(changed));
+    const response = await rgthreeApi.fetchJson("/config", { method: "POST", body });
+    if (response.status === "ok") {
+      for (const [key, value] of Object.entries(changed)) {
+        setObjectValue(rgthreeConfig, key, value);
+        this.dispatchEvent(new CustomEvent("config-change", { detail: { key, value } }));
+      }
+    } else {
+      return false;
+    }
+    return true;
+  }
+}
+
+/** The ConfigService singleton. */
+export const SERVICE = new ConfigService();

rgthree-comfy/src_web/comfyui/services/context_service.ts

@@ -0,0 +1,76 @@
+import type {DynamicContextNodeBase} from "../dynamic_context_base.js";
+
+import {app} from "scripts/app.js";
+import {NodeTypesString} from "../constants.js";
+import {getConnectedOutputNodesAndFilterPassThroughs} from "../utils.js";
+import {INodeInputSlot, INodeOutputSlot, INodeSlot, LGraphNode} from "typings/litegraph.js";
+
+export let SERVICE: ContextService;
+
+const OWNED_PREFIX = "+";
+const REGEX_PREFIX = /^[\+⚠️]\s*/;
+const REGEX_EMPTY_INPUT = /^\+\s*$/;
+
+export function stripContextInputPrefixes(name: string) {
+  return name.replace(REGEX_PREFIX, "");
+}
+
+export function getContextOutputName(inputName: string) {
+  if (inputName === "base_ctx") return "CONTEXT";
+  return stripContextInputPrefixes(inputName).toUpperCase();
+}
+
+export enum InputMutationOperation {
+  "UNKNOWN",
+  "ADDED",
+  "REMOVED",
+  "RENAMED",
+}
+
+export type InputMutation = {
+  operation: InputMutationOperation;
+  node: DynamicContextNodeBase;
+  slotIndex: number;
+  slot: INodeSlot;
+};
+
+export class ContextService {
+
+  constructor() {
+    if (SERVICE) {
+      throw new Error("ContextService was already instantiated.");
+    }
+  }
+
+  onInputChanges(node: any, mutation: InputMutation) {
+    const childCtxs = getConnectedOutputNodesAndFilterPassThroughs(
+      node,
+      node,
+      0,
+    ) as DynamicContextNodeBase[];
+    for (const childCtx of childCtxs) {
+      childCtx.handleUpstreamMutation(mutation);
+    }
+  }
+
+  getDynamicContextInputsData(node: DynamicContextNodeBase) {
+    return node
+      .getContextInputsList()
+      .map((input: INodeInputSlot, index: number) => ({
+        name: stripContextInputPrefixes(input.name),
+        type: String(input.type),
+        index,
+      }))
+      .filter((i) => i.type !== "*");
+  }
+
+  getDynamicContextOutputsData(node: LGraphNode) {
+    return node.outputs.map((output: INodeOutputSlot, index: number) => ({
+      name: stripContextInputPrefixes(output.name),
+      type: String(output.type),
+      index,
+    }));
+  }
+}
+
+SERVICE = new ContextService();

rgthree-comfy/src_web/comfyui/services/fast_groups_service.ts

@@ -0,0 +1,195 @@
+import { app } from "scripts/app.js";
+import type { BaseFastGroupsModeChanger } from "../fast_groups_muter.js";
+import {
+  type LGraph as TLGraph,
+  type LGraphCanvas as TLGraphCanvas,
+  LGraphGroup,
+  Vector4,
+} from "typings/litegraph.js";
+
+/**
+ * A service that keeps global state that can be shared by multiple FastGroupsMuter or
+ * FastGroupsBypasser nodes rather than calculate it on it's own.
+ */
+class FastGroupsService {
+  private msThreshold = 400;
+  private msLastUnsorted = 0;
+  private msLastAlpha = 0;
+  private msLastPosition = 0;
+
+  private groupsUnsorted: LGraphGroup[] = [];
+  private groupsSortedAlpha: LGraphGroup[] = [];
+  private groupsSortedPosition: LGraphGroup[] = [];
+
+  private readonly fastGroupNodes: BaseFastGroupsModeChanger[] = [];
+
+  private runScheduledForMs: number | null = null;
+  private runScheduleTimeout: number | null = null;
+  private runScheduleAnimation: number | null = null;
+
+  private cachedNodeBoundings: { [key: number]: Vector4 } | null = null;
+
+  constructor() {
+    // Don't need to do anything, wait until a signal.
+  }
+
+  addFastGroupNode(node: BaseFastGroupsModeChanger) {
+    this.fastGroupNodes.push(node);
+    // Schedule it because the node may not be ready to refreshWidgets (like, when added it may
+    // not have cloned properties to filter against, etc.).
+    this.scheduleRun(8);
+  }
+
+  removeFastGroupNode(node: BaseFastGroupsModeChanger) {
+    const index = this.fastGroupNodes.indexOf(node);
+    if (index > -1) {
+      this.fastGroupNodes.splice(index, 1);
+    }
+    // If we have no more group nodes, then clear out data; it could be because of a canvas clear.
+    if (!this.fastGroupNodes?.length) {
+      this.clearScheduledRun();
+      this.groupsUnsorted = [];
+      this.groupsSortedAlpha = [];
+      this.groupsSortedPosition = [];
+    }
+  }
+
+  private run() {
+    // We only run if we're scheduled, so if we're not, then bail.
+    if (!this.runScheduledForMs) {
+      return;
+    }
+    for (const node of this.fastGroupNodes) {
+      node.refreshWidgets();
+    }
+    this.clearScheduledRun();
+    this.scheduleRun();
+  }
+
+  private scheduleRun(ms = 500) {
+    // If we got a request for an immediate schedule and already have on scheduled for longer, then
+    // cancel the long one to expediate a fast one.
+    if (this.runScheduledForMs && ms < this.runScheduledForMs) {
+      this.clearScheduledRun();
+    }
+    if (!this.runScheduledForMs && this.fastGroupNodes.length) {
+      this.runScheduledForMs = ms;
+      this.runScheduleTimeout = setTimeout(() => {
+        this.runScheduleAnimation = requestAnimationFrame(() => this.run());
+      }, ms);
+    }
+  }
+
+  private clearScheduledRun() {
+    this.runScheduleTimeout && clearTimeout(this.runScheduleTimeout);
+    this.runScheduleAnimation && cancelAnimationFrame(this.runScheduleAnimation);
+    this.runScheduleTimeout = null;
+    this.runScheduleAnimation = null;
+    this.runScheduledForMs = null;
+  }
+
+  /**
+   * Returns the boundings for all nodes on the graph, then clears it after a short delay. This is
+   * to increase efficiency by caching the nodes' boundings when multiple groups are on the page.
+   */
+  getBoundingsForAllNodes() {
+    if (!this.cachedNodeBoundings) {
+      this.cachedNodeBoundings = {};
+      for (const node of app.graph._nodes) {
+        this.cachedNodeBoundings[node.id] = node.getBounding();
+      }
+      setTimeout(() => {
+        this.cachedNodeBoundings = null;
+      }, 50);
+    }
+    return this.cachedNodeBoundings;
+  }
+
+  /**
+   * This overrides `LGraphGroup.prototype.recomputeInsideNodes` to be much more efficient when
+   * calculating for many groups at once (only compute all nodes once in `getBoundingsForAllNodes`).
+   */
+  recomputeInsideNodesForGroup(group: LGraphGroup) {
+    const cachedBoundings = this.getBoundingsForAllNodes();
+    const nodes = group.graph._nodes;
+    group._nodes.length = 0;
+
+    for (const node of nodes) {
+      const node_bounding = cachedBoundings[node.id];
+      if (!node_bounding || !LiteGraph.overlapBounding(group._bounding, node_bounding)) {
+        continue;
+      }
+      group._nodes.push(node);
+    }
+  }
+
+  /**
+   * Everything goes through getGroupsUnsorted, so we only get groups once. However, LiteGraph's
+   * `recomputeInsideNodes` is inefficient when calling multiple groups (it iterates over all nodes
+   * each time). So, we'll do our own dang thing, once.
+   */
+  private getGroupsUnsorted(now: number) {
+    const canvas = app.canvas as TLGraphCanvas;
+    const graph = app.graph as TLGraph;
+
+    if (
+      // Don't recalculate nodes if we're moving a group (added by ComfyUI in app.js)
+      !canvas.selected_group_moving &&
+      (!this.groupsUnsorted.length || now - this.msLastUnsorted > this.msThreshold)
+    ) {
+      this.groupsUnsorted = [...graph._groups];
+      for (const group of this.groupsUnsorted) {
+        this.recomputeInsideNodesForGroup(group);
+        (group as any)._rgthreeHasAnyActiveNode = group._nodes.some(
+          (n) => n.mode === LiteGraph.ALWAYS,
+        );
+      }
+      this.msLastUnsorted = now;
+    }
+    return this.groupsUnsorted;
+  }
+
+  private getGroupsAlpha(now: number) {
+    const graph = app.graph as TLGraph;
+    if (!this.groupsSortedAlpha.length || now - this.msLastAlpha > this.msThreshold) {
+      this.groupsSortedAlpha = [...this.getGroupsUnsorted(now)].sort((a, b) => {
+        return a.title.localeCompare(b.title);
+      });
+      this.msLastAlpha = now;
+    }
+    return this.groupsSortedAlpha;
+  }
+
+  private getGroupsPosition(now: number) {
+    const graph = app.graph as TLGraph;
+    if (!this.groupsSortedPosition.length || now - this.msLastPosition > this.msThreshold) {
+      this.groupsSortedPosition = [...this.getGroupsUnsorted(now)].sort((a, b) => {
+        // Sort by y, then x, clamped to 30.
+        const aY = Math.floor(a._pos[1] / 30);
+        const bY = Math.floor(b._pos[1] / 30);
+        if (aY == bY) {
+          const aX = Math.floor(a._pos[0] / 30);
+          const bX = Math.floor(b._pos[0] / 30);
+          return aX - bX;
+        }
+        return aY - bY;
+      });
+      this.msLastPosition = now;
+    }
+    return this.groupsSortedPosition;
+  }
+
+  getGroups(sort?: string) {
+    const now = +new Date();
+    if (sort === "alphanumeric") {
+      return this.getGroupsAlpha(now);
+    }
+    if (sort === "position") {
+      return this.getGroupsPosition(now);
+    }
+    return this.getGroupsUnsorted(now);
+  }
+}
+
+/** The FastGroupsService singleton. */
+export const SERVICE = new FastGroupsService();

rgthree-comfy/src_web/comfyui/services/key_events_services.ts

@@ -0,0 +1,184 @@
+/**
+ * A service responsible for capturing keys within LiteGraph's canvas, and outside of it, allowing
+ * nodes and other services to confidently determine what's going on.
+ */
+class KeyEventService extends EventTarget {
+  readonly downKeys: { [key: string]: boolean } = {};
+  readonly shiftDownKeys: { [key: string]: boolean } = {};
+
+  ctrlKey = false;
+  altKey = false;
+  metaKey = false;
+  shiftKey = false;
+
+  private readonly isMac: boolean = !!(
+    navigator.platform?.toLocaleUpperCase().startsWith("MAC") ||
+    (navigator as any).userAgentData?.platform?.toLocaleUpperCase().startsWith("MAC")
+  );
+
+  constructor() {
+    super();
+    this.initialize();
+  }
+
+  initialize() {
+    const that = this;
+    // [🤮] Sometimes ComfyUI and/or LiteGraph stop propagation of key events which makes it hard
+    // to determine if keys are currently pressed. To attempt to get around this, we'll hijack
+    // LiteGraph's processKey to try to get better consistency.
+    const processKey = LGraphCanvas.prototype.processKey;
+    LGraphCanvas.prototype.processKey = function (e: KeyboardEvent) {
+      if (e.type === "keydown" || e.type === "keyup") {
+        that.handleKeyDownOrUp(e);
+      }
+      return processKey.apply(this, [...arguments] as any) as any;
+    };
+
+    // Now that ComfyUI has more non-canvas UI (like the top bar), we listen on window as well, and
+    // de-dupe when we get multiple events from both window and/or LiteGraph.
+    window.addEventListener("keydown", (e) => {
+      that.handleKeyDownOrUp(e);
+    });
+    window.addEventListener("keyup", (e) => {
+      that.handleKeyDownOrUp(e);
+    });
+
+    // If we get a visibilitychange, then clear the keys since we can't listen for keys up/down when
+    // not visible.
+    document.addEventListener("visibilitychange", (e) => {
+      this.clearKeydowns();
+    });
+
+    // If we get a blur, then also clear the keys since we can't listen for keys up/down when
+    // blurred. This can happen w/o a visibilitychange, like a browser alert.
+    window.addEventListener("blur", (e) => {
+      this.clearKeydowns();
+    });
+  }
+
+  /**
+   * Adds a new queue item, unless the last is the same.
+   */
+  handleKeyDownOrUp(e: KeyboardEvent) {
+    const key = e.key.toLocaleUpperCase();
+    // If we're already down, or already up, then ignore and don't fire.
+    if ((e.type === 'keydown' && this.downKeys[key] === true)
+        || (e.type === 'keyup' && this.downKeys[key] === undefined)) {
+      return;
+    }
+
+    this.ctrlKey = !!e.ctrlKey;
+    this.altKey = !!e.altKey;
+    this.metaKey = !!e.metaKey;
+    this.shiftKey = !!e.shiftKey;
+    if (e.type === "keydown") {
+      this.downKeys[key] = true;
+      this.dispatchCustomEvent("keydown", { originalEvent: e });
+
+      // If SHIFT is pressed down as well, then we need to keep track of this separetly to "release"
+      // it once SHIFT is also released.
+      if (this.shiftKey && key !== 'SHIFT') {
+        this.shiftDownKeys[key] = true;
+      }
+    } else if (e.type === "keyup") {
+      // See https://github.com/rgthree/rgthree-comfy/issues/238
+      // A little bit of a hack, but Mac reportedly does something odd with copy/paste. ComfyUI
+      // gobbles the copy event propagation, but it happens for paste too and reportedly 'Enter' which
+      // I can't find a reason for in LiteGraph/comfy. So, for Mac only, whenever we lift a Command
+      // (META) key, we'll also clear any other keys.
+      if (key === "META" && this.isMac) {
+        this.clearKeydowns();
+      } else {
+        delete this.downKeys[key];
+      }
+
+      // If we're releasing the SHIFT key, then we may also be releasing all other keys we pressed
+      // during the SHIFT key as well. We should get an additional keydown for them after.
+      if (key === 'SHIFT') {
+        for (const key in this.shiftDownKeys) {
+          delete this.downKeys[key];
+          delete this.shiftDownKeys[key];
+        }
+      }
+      this.dispatchCustomEvent("keyup", { originalEvent: e });
+    }
+
+  }
+
+  private clearKeydowns() {
+    this.ctrlKey = false;
+    this.altKey = false;
+    this.metaKey = false;
+    this.shiftKey = false;
+    for (const key in this.downKeys) delete this.downKeys[key];
+  }
+
+  /**
+   * Wraps `dispatchEvent` for easier CustomEvent dispatching.
+   */
+  private dispatchCustomEvent(event: string, detail?: any) {
+    if (detail != null) {
+      return this.dispatchEvent(new CustomEvent(event, { detail }));
+    }
+    return this.dispatchEvent(new CustomEvent(event));
+  }
+
+  /**
+   * Parses a shortcut string.
+   *
+   *   - 's' => ['S']
+   *   - 'shift + c' => ['SHIFT', 'C']
+   *   - 'shift + meta + @' => ['SHIFT', 'META', '@']
+   *   - 'shift + + + @' => ['SHIFT', '__PLUS__', '=']
+   *   - '+ + p' => ['__PLUS__', 'P']
+   */
+  private getKeysFromShortcut(shortcut: string | string[]) {
+    let keys;
+    if (typeof shortcut === "string") {
+      // Rip all spaces out. Note, Comfy swallows space, so we don't have to handle it. Otherwise,
+      // we would require space to be fed as "Space" or "Spacebar" instead of " ".
+      shortcut = shortcut.replace(/\s/g, "");
+      // Change a real "+" to something we can encode.
+      shortcut = shortcut.replace(/^\+/, "__PLUS__").replace(/\+\+/, "+__PLUS__");
+      keys = shortcut.split("+").map((i) => i.replace("__PLUS__", "+"));
+    } else {
+      keys = [...shortcut];
+    }
+    return keys.map((k) => k.toLocaleUpperCase());
+  }
+
+  /**
+   * Checks if all keys passed in are down.
+   */
+  areAllKeysDown(keys: string | string[]) {
+    keys = this.getKeysFromShortcut(keys);
+    return keys.every((k) => {
+      return this.downKeys[k];
+    });
+  }
+
+  /**
+   * Checks if only the keys passed in are down; optionally and additionally allowing "shift" key.
+   */
+  areOnlyKeysDown(keys: string | string[], alsoAllowShift = false) {
+    keys = this.getKeysFromShortcut(keys);
+    const allKeysDown = this.areAllKeysDown(keys);
+    const downKeysLength = Object.values(this.downKeys).length;
+    // All keys are down and they're the only ones.
+    if (allKeysDown && keys.length === downKeysLength) {
+      return true;
+    }
+    // Special case allowing the shift key in addition to the shortcut keys. This helps when a user
+    // may had originally defined "$" as a shortcut, but needs to press "shift + $" since it's an
+    // upper key character, etc.
+    if (alsoAllowShift && !keys.includes("SHIFT") && keys.length === downKeysLength - 1) {
+      // If we're holding down shift, have one extra key held down, and the original keys don't
+      // include shift, then we're good to go.
+      return allKeysDown && this.areAllKeysDown(["SHIFT"]);
+    }
+    return false;
+  }
+}
+
+/** The KeyEventService singleton. */
+export const SERVICE = new KeyEventService();

rgthree-comfy/src_web/comfyui/testing/comfyui_env.ts

@@ -0,0 +1,67 @@
+import { app } from "scripts/app.js";
+import { NodeTypesString } from "../constants.js";
+import { wait } from "rgthree/common/shared_utils.js";
+import type { LGraphNode } from "typings/litegraph.js";
+
+type addNodeOptions = {
+  placement?: string;
+};
+
+/**
+ * A testing environment to make setting up, clearing, and queuing more predictable in an
+ * integration test environment.
+ */
+export class ComfyUITestEnvironment {
+  private lastNode: LGraphNode | null = null;
+  private maxY = 0;
+
+  constructor() {}
+
+  async addNode(nodeString: string, options: addNodeOptions = {}) {
+    const [canvas, graph] = [app.canvas, app.graph];
+    const node = LiteGraph.createNode(nodeString);
+    let x = 0;
+    let y = 30;
+    if (this.lastNode) {
+      const placement = options.placement || "right";
+      if (placement === "under") {
+        x = this.lastNode.pos[0];
+        y = this.lastNode.pos[1] + this.lastNode.size[1] + 30;
+      } else if (placement === "right") {
+        x = this.lastNode.pos[0] + this.lastNode.size[0] + 100;
+        y = this.lastNode.pos[1];
+      } else if (placement === "start") {
+        x = 0;
+        y = this.maxY + 50;
+      }
+    }
+    canvas.graph.add(node);
+    node.pos = [x, y];
+    canvas.selectNode(node);
+    app.graph.setDirtyCanvas(true, true);
+    await wait();
+    this.lastNode = node;
+    this.maxY = Math.max(this.maxY, y + this.lastNode.size[1]);
+    return (this.lastNode = node);
+  }
+
+  async clear() {
+    app.clean();
+    app.graph.clear();
+    const nodeConfig = await this.addNode(NodeTypesString.KSAMPLER_CONFIG);
+    const displayAny = await this.addNode(NodeTypesString.DISPLAY_ANY);
+    nodeConfig.widgets[0]!.value = Math.round(Math.random() * 100);
+    nodeConfig.connect(0, displayAny, 0);
+    await this.queuePrompt();
+    app.clean();
+    app.graph.clear();
+    this.lastNode = null;
+    this.maxY = 0;
+    await wait();
+  }
+
+  async queuePrompt() {
+    await app.queuePrompt();
+    await wait(150);
+  }
+}

rgthree-comfy/src_web/comfyui/testing/runner.ts

@@ -0,0 +1,133 @@
+/**
+ * @fileoverview A set of methods that mimic a bit of the Jasmine testing library, but simpler and
+ * more succinct for manipulating a comfy integration test.
+ */
+import { wait } from "rgthree/common/shared_utils.js";
+
+type TestContext = {
+  label?: string;
+  beforeEach?: Function[];
+};
+
+let contexts: TestContext[] = [];
+
+export function describe(label: string, fn: Function) {
+  return async () => {
+    await describeRun(label, fn);
+  };
+}
+
+export async function describeRun(label: string, fn: Function) {
+  await wait();
+  contexts.push({ label });
+  console.group(`[Start] ${contexts[contexts.length - 1]!.label}`);
+  await fn();
+  contexts.pop();
+  console.groupEnd();
+}
+
+export async function should(declaration: string, fn: Function) {
+  if (!contexts[contexts.length - 1]) {
+    throw Error("Called should outside of a describe.");
+  }
+  console.group(`...should ${declaration}`);
+  try {
+    for (const context of contexts) {
+      for (const beforeEachFn of context?.beforeEach || []) {
+        await beforeEachFn();
+      }
+    }
+    await fn();
+  } catch (e: any) {
+    fail(e);
+  }
+  console.groupEnd();
+}
+
+export async function beforeEach(fn: Function) {
+  if (!contexts[contexts.length - 1]) {
+    throw Error("Called beforeEach outside of a describe.");
+  }
+  const last = contexts[contexts.length - 1]!;
+  last.beforeEach = last?.beforeEach || [];
+  last.beforeEach.push(fn);
+}
+
+export function fail(e: Error) {
+  log(`X Failure: ${e}`, "color:#600; background:#fdd; padding: 2px 6px;");
+}
+
+function log(msg: string, styles: string) {
+  if (styles) {
+    console.log(`%c ${msg}`, styles);
+  } else {
+    console.log(msg);
+  }
+}
+
+class Expectation {
+  private propertyLabel: string | null = "";
+  private expectedLabel: string | null = "";
+  private expectedFn!: (v: any) => boolean;
+  private value: any;
+
+  constructor(value: any) {
+    this.value = value;
+  }
+
+  toBe(labelOrExpected: any, maybeExpected?: any) {
+    const expected = maybeExpected !== undefined ? maybeExpected : labelOrExpected;
+    this.propertyLabel = maybeExpected !== undefined ? labelOrExpected : null;
+    this.expectedLabel = JSON.stringify(expected);
+    this.expectedFn = (v) => v == expected;
+    return this.toBeEval();
+  }
+  toBeUndefined(propertyLabel: string) {
+    this.expectedFn = (v) => v === undefined;
+    this.propertyLabel = propertyLabel || "";
+    this.expectedLabel = "undefined";
+    return this.toBeEval(true);
+  }
+  toBeNullOrUndefined(propertyLabel: string) {
+    this.expectedFn = (v) => v == null;
+    this.propertyLabel = propertyLabel || "";
+    this.expectedLabel = "null or undefined";
+    return this.toBeEval(true);
+  }
+  toBeTruthy(propertyLabel: string) {
+    this.expectedFn = (v) => !v;
+    this.propertyLabel = propertyLabel || "";
+    this.expectedLabel = "truthy";
+    return this.toBeEval(false);
+  }
+  toBeANumber(propertyLabel: string) {
+    this.expectedFn = (v) => typeof v === "number";
+    this.propertyLabel = propertyLabel || "";
+    this.expectedLabel = "a number";
+    return this.toBeEval();
+  }
+  toBeEval(strict = false) {
+    let evaluation = this.expectedFn(this.value);
+    let msg = `Expected ${this.propertyLabel ? this.propertyLabel + " to be " : ""}${
+      this.expectedLabel
+    }`;
+    msg += evaluation ? "." : `, but was ${JSON.stringify(this.value)}`;
+    this.log(evaluation, msg);
+    return evaluation;
+  }
+  log(value: boolean, msg: string) {
+    if (value) {
+      log(`🗸 ${msg}`, "color:#060; background:#cec; padding: 2px 6px;");
+    } else {
+      log(`X ${msg}`, "color:#600; background:#fdd; padding: 2px 6px;");
+    }
+  }
+}
+
+export function expect(value: any, msg?: string) {
+  const expectation = new Expectation(value);
+  if (msg) {
+    expectation.log(value, msg);
+  }
+  return expectation;
+}

rgthree-comfy/src_web/comfyui/tests/context_dynamic_tests.ts

@@ -0,0 +1,191 @@
+import type {
+  LiteGraph as TLiteGraph,
+  LGraphCanvas as TLGraphCanvas,
+  LGraph as TLGraph,
+  LGraphNode as TLGraphNode,
+  Vector2,
+  LGraphNode,
+} from "typings/litegraph.js";
+import {rgthree} from "../rgthree.js";
+import {NodeTypesString} from "../constants.js";
+import {wait} from "rgthree/common/shared_utils.js";
+import {describe, should, beforeEach, expect, describeRun} from "../testing/runner.js";
+import {ComfyUITestEnvironment} from "../testing/comfyui_env.js";
+
+declare const LiteGraph: typeof TLiteGraph;
+
+const env = new ComfyUITestEnvironment();
+
+function verifyInputAndOutputName(
+  node: LGraphNode,
+  index: number,
+  inputName: string | null,
+  isLinked?: boolean,
+) {
+  if (inputName != null) {
+    expect(node.inputs[index]!.name).toBe(`input ${index} name`, inputName);
+  }
+  if (isLinked) {
+    expect(node.inputs[index]!.link).toBeANumber(`input ${index} connection`);
+  } else if (isLinked === false) {
+    expect(node.inputs[index]!.link).toBeNullOrUndefined(`input ${index} connection`);
+  }
+  if (inputName != null) {
+    if (inputName === "+") {
+      expect(node.outputs[index]).toBeUndefined(`output ${index}`);
+    } else {
+      let outputName =
+        inputName === "base_ctx" ? "CONTEXT" : inputName.replace(/^\+\s/, "").toUpperCase();
+      expect(node.outputs[index]!.name).toBe(`output ${index} name`, outputName);
+    }
+  }
+}
+
+function vertifyInputsStructure(node: LGraphNode, expectedLength: number) {
+  expect(node.inputs.length).toBe("inputs length", expectedLength);
+  expect(node.outputs.length).toBe("outputs length", expectedLength - 1);
+  verifyInputAndOutputName(node, expectedLength - 1, "+", false);
+}
+
+(window as any).rgthree_tests = (window as any).rgthree_tests || {};
+(window as any).rgthree_tests.test_dynamic_context = describe("ContextDynamicTest", async () => {
+  let nodeConfig!: TLGraphNode;
+  let nodeCtx!: TLGraphNode;
+
+  let lastNode: LGraphNode | null = null;
+
+  await beforeEach(async () => {
+    await env.clear();
+    lastNode = nodeConfig = await env.addNode(NodeTypesString.KSAMPLER_CONFIG);
+    lastNode = nodeCtx = await env.addNode(NodeTypesString.DYNAMIC_CONTEXT);
+    nodeConfig.connect(0, nodeCtx, 1); // steps
+    nodeConfig.connect(2, nodeCtx, 2); // cfg
+    nodeConfig.connect(4, nodeCtx, 3); // scheduler
+    nodeConfig.connect(0, nodeCtx, 4); // This is the step.1
+    nodeConfig.connect(0, nodeCtx, 5); // This is the step.2
+    nodeCtx.disconnectInput(2);
+    nodeCtx.disconnectInput(5);
+    nodeConfig.connect(0, nodeCtx, 6); // This is the step.3
+    nodeCtx.disconnectInput(6);
+    await wait();
+  });
+
+  await should("add correct inputs", async () => {
+    vertifyInputsStructure(nodeCtx, 8);
+    let i = 0;
+    verifyInputAndOutputName(nodeCtx, i++, "base_ctx", false);
+    verifyInputAndOutputName(nodeCtx, i++, "+ steps", true);
+    verifyInputAndOutputName(nodeCtx, i++, "+ cfg", false);
+    verifyInputAndOutputName(nodeCtx, i++, "+ scheduler", true);
+    verifyInputAndOutputName(nodeCtx, i++, "+ steps.1", true);
+    verifyInputAndOutputName(nodeCtx, i++, "+ steps.2", false);
+    verifyInputAndOutputName(nodeCtx, i++, "+ steps.3", false);
+  });
+
+  await should("add evaluate correct outputs", async () => {
+    const displayAny1 = await env.addNode(NodeTypesString.DISPLAY_ANY, {placement: "right"});
+    const displayAny2 = await env.addNode(NodeTypesString.DISPLAY_ANY, {placement: "under"});
+    const displayAny3 = await env.addNode(NodeTypesString.DISPLAY_ANY, {placement: "under"});
+    const displayAny4 = await env.addNode(NodeTypesString.DISPLAY_ANY, {placement: "under"});
+
+    nodeCtx.connect(1, displayAny1, 0); // steps
+    nodeCtx.connect(3, displayAny2, 0); // scheduler
+    nodeCtx.connect(4, displayAny3, 0); // steps.1
+    nodeCtx.connect(6, displayAny4, 0); // steps.3 (unlinked)
+
+    await env.queuePrompt();
+
+    expect(displayAny1.widgets![0]!.value).toBe("output 1", 30);
+    expect(displayAny2.widgets![0]!.value).toBe("output 3", '"normal"');
+    expect(displayAny3.widgets![0]!.value).toBe("output 4", 30);
+    expect(displayAny4.widgets![0]!.value).toBe("output 6", "None");
+  });
+
+  await describeRun("Nested", async () => {
+    let nodeConfig2!: TLGraphNode;
+    let nodeCtx2!: TLGraphNode;
+
+    await beforeEach(async () => {
+      nodeConfig2 = await env.addNode(NodeTypesString.KSAMPLER_CONFIG, {placement: "start"});
+      nodeConfig2.widgets[0]!.value = 111;
+      nodeConfig2.widgets[2]!.value = 11.1;
+      nodeCtx2 = await env.addNode(NodeTypesString.DYNAMIC_CONTEXT, {placement: "right"});
+      nodeConfig2.connect(0, nodeCtx2, 1); // steps
+      nodeConfig2.connect(2, nodeCtx2, 2); // cfg
+      nodeConfig2.connect(3, nodeCtx2, 3); // sampler
+      nodeConfig2.connect(2, nodeCtx2, 4); // This is the cfg.1
+      nodeConfig2.connect(0, nodeCtx2, 5); // This is the steps.1
+      nodeCtx2.disconnectInput(2);
+      nodeCtx2.disconnectInput(5);
+      nodeConfig2.connect(2, nodeCtx2, 6); // This is the cfg.2
+      nodeCtx2.disconnectInput(6);
+
+      await wait();
+    });
+
+    await should("disallow context node to be connected to non-first spot.", async () => {
+      // Connect to first node.
+      let expectedInputs = 8;
+
+      nodeCtx2.connect(0, nodeCtx, expectedInputs - 1);
+      console.log(nodeCtx.inputs);
+
+      vertifyInputsStructure(nodeCtx, expectedInputs);
+      verifyInputAndOutputName(nodeCtx, 0, "base_ctx", false);
+      verifyInputAndOutputName(nodeCtx, nodeCtx.inputs.length - 1, null, false);
+
+      nodeCtx2.connect(0, nodeCtx, 0);
+      expectedInputs = 14;
+      vertifyInputsStructure(nodeCtx, expectedInputs);
+      verifyInputAndOutputName(nodeCtx, 0, "base_ctx", true);
+      verifyInputAndOutputName(nodeCtx, expectedInputs - 1, null, false);
+    });
+
+    await should("add inputs from connected above owned.", async () => {
+      // Connect to first node.
+      nodeCtx2.connect(0, nodeCtx, 0);
+
+      let expectedInputs = 14;
+      vertifyInputsStructure(nodeCtx, expectedInputs);
+      let i = 0;
+      verifyInputAndOutputName(nodeCtx, i++, "base_ctx", true);
+      verifyInputAndOutputName(nodeCtx, i++, "steps", false);
+      verifyInputAndOutputName(nodeCtx, i++, "cfg", false);
+      verifyInputAndOutputName(nodeCtx, i++, "sampler", false);
+      verifyInputAndOutputName(nodeCtx, i++, "cfg.1", false);
+      verifyInputAndOutputName(nodeCtx, i++, "steps.1", false);
+      verifyInputAndOutputName(nodeCtx, i++, "cfg.2", false);
+      verifyInputAndOutputName(nodeCtx, i++, "+ steps.2", true);
+      verifyInputAndOutputName(nodeCtx, i++, "+ cfg.3", false);
+      verifyInputAndOutputName(nodeCtx, i++, "+ scheduler", true);
+      verifyInputAndOutputName(nodeCtx, i++, "+ steps.3", true);
+      verifyInputAndOutputName(nodeCtx, i++, "+ steps.4", false);
+      verifyInputAndOutputName(nodeCtx, i++, "+ steps.5", false);
+      verifyInputAndOutputName(nodeCtx, i++, "+", false);
+    });
+
+    await should("add then remove inputs when disconnected.", async () => {
+      // Connect to first node.
+      nodeCtx2.connect(0, nodeCtx, 0);
+
+      let expectedInputs = 14;
+      expect(nodeCtx.inputs.length).toBe("inputs length", expectedInputs);
+      expect(nodeCtx.outputs.length).toBe("outputs length", expectedInputs - 1);
+
+      nodeCtx.disconnectInput(0);
+
+      expectedInputs = 8;
+      expect(nodeCtx.inputs.length).toBe("inputs length", expectedInputs);
+      expect(nodeCtx.outputs.length).toBe("outputs length", expectedInputs - 1);
+      let i = 0;
+      verifyInputAndOutputName(nodeCtx, i++, "base_ctx", false);
+      verifyInputAndOutputName(nodeCtx, i++, "+ steps", true);
+      verifyInputAndOutputName(nodeCtx, i++, "+ cfg", false);
+      verifyInputAndOutputName(nodeCtx, i++, "+ scheduler", true);
+      verifyInputAndOutputName(nodeCtx, i++, "+ steps.1", true);
+      verifyInputAndOutputName(nodeCtx, i++, "+ steps.2", false);
+      verifyInputAndOutputName(nodeCtx, i++, "+ steps.3", false);
+      verifyInputAndOutputName(nodeCtx, i++, "+", false);
+    });
+  });
+});

rgthree-comfy/src_web/common/components/base_custom_element.ts

@@ -0,0 +1,131 @@
+import { $el } from "rgthree/common/utils_dom.js";
+
+const CSS_STYLE_SHEETS = new Map<string, string>();
+const HTML_TEMPLATE_FILES = new Map<string, string>();
+
+/**
+ * Fetches the stylesheet for the component, matched by the element name (minus the "rgthree-"
+ * prefix).
+ */
+async function getStyleSheet(name: string) {
+  if (!CSS_STYLE_SHEETS.has(name)) {
+    try {
+      const response = await fetch(
+        `rgthree/common/components/${name.replace("rgthree-", "").replace(/\-/g, "_")}.css`,
+      );
+      const text = await response.text();
+      CSS_STYLE_SHEETS.set(name, text);
+    } catch (e) {
+      alert("Error loading rgthree custom component css.");
+    }
+  }
+  return CSS_STYLE_SHEETS.get(name)!;
+}
+
+/**
+ * Fetches the stylesheet for the component, matched by the element name (minus the "rgthree-"
+ * prefix).
+ */
+async function getTemplateMarkup(name: string) {
+  if (!HTML_TEMPLATE_FILES.has(name)) {
+    try {
+      const response = await fetch(
+        `rgthree/common/components/${name.replace("rgthree-", "").replace(/\-/g, "_")}.html`,
+      );
+      const text = await response.text();
+      HTML_TEMPLATE_FILES.set(name, text);
+    } catch (e) {
+      // alert("Error loading rgthree custom component markup.");
+    }
+  }
+  return HTML_TEMPLATE_FILES.get(name)!;
+}
+
+/**
+ * A base custom element.
+ */
+export abstract class RgthreeCustomElement extends HTMLElement {
+  static NAME = "rgthree-override";
+
+  static create<T extends RgthreeCustomElement>(): T {
+    if (this.name === "rgthree-override") {
+      throw new Error("Must override component NAME");
+    }
+    if (!customElements.get(this.name)) {
+      customElements.define(this.NAME, this as unknown as CustomElementConstructor);
+    }
+    return document.createElement(this.NAME) as T;
+  }
+
+  protected connected: boolean = false;
+  protected shadow!: ShadowRoot;
+  protected readonly templates = new Map<string, HTMLTemplateElement>();
+
+  onFirstConnected(): void {
+    // Optionally overridden.
+  };
+  onReconnected(): void {
+    // Optionally overridden.
+  };
+  onConnected(): void {
+    // Optionally overridden.
+  };
+  onDisconnected(): void {
+    // Optionally overridden.
+  };
+
+  async connectedCallback() {
+    const elementName = (this.constructor as any).NAME as string;
+    const wasConnected = this.connected;
+    if (!wasConnected) {
+      this.connected = true;
+    }
+    if (!this.shadow) {
+      const [stylesheet, markup] = await Promise.all([
+        getStyleSheet(elementName),
+        getTemplateMarkup(elementName),
+      ]);
+
+      if (markup) {
+        const temp = $el('div')
+        const templatesMarkup = markup.match(/<template[^]*?<\/template>/gm) || [];
+        for(const markup of templatesMarkup) {
+          temp.innerHTML = markup;
+          const template = temp.children[0];
+          if (!(template instanceof HTMLTemplateElement)) {
+            throw new Error('Not a template element.');
+          }
+          const id = template.getAttribute('id');
+          if (!id) {
+            throw new Error('Not template id.');
+          }
+          this.templates.set(id, template);
+        }
+      }
+
+      this.shadow = this.attachShadow({mode: "open"});
+      const sheet = new CSSStyleSheet();
+      sheet.replaceSync(stylesheet);
+      this.shadow.adoptedStyleSheets = [sheet];
+
+      let template;
+      if (this.templates.has(elementName)) {
+        template = this.templates.get(elementName);
+      } else if (this.templates.has(elementName.replace('rgthree-', ''))) {
+        template = this.templates.get(elementName.replace('rgthree-', ''))
+      }
+      if (template) {
+        this.shadow.appendChild(template.content.cloneNode(true));
+      }
+
+      this.onFirstConnected();
+    } else {
+      this.onReconnected();
+    }
+    this.onConnected();
+  }
+  disconnectedCallback() {
+    this.connected = false;
+    this.onDisconnected()
+  }
+}

rgthree-comfy/src_web/common/css/buttons.scss

@@ -0,0 +1,106 @@
+:not(#fakeid) .rgthree-button-reset {
+  position: relative;
+  appearance: none;
+  cursor: pointer;
+  border: 0;
+  background: transparent;
+  color: inherit;
+  padding: 0;
+  margin: 0;
+
+}
+:not(#fakeid) .rgthree-button {
+  --padding-top: 7px;
+  --padding-bottom: 9px;
+  --padding-x: 16px;
+  position: relative;
+  cursor: pointer;
+  border: 0;
+  border-radius: 0.25rem;
+  background: rgba(0, 0, 0, 0.5);
+  color: white;
+  font-family: system-ui, sans-serif;
+  font-size: calc(16rem / 16);
+  line-height: 1;
+  white-space: nowrap;
+  text-decoration: none;
+  margin: 0.25rem;
+  box-shadow: 0px 0px 2px rgb(0, 0, 0);
+  background: #212121;
+  transition: all 0.1s ease-in-out;
+  padding: var(--padding-top) var(--padding-x) var(--padding-bottom);
+  display: inline-flex;
+  flex-direction: row;
+  align-items: center;
+  justify-content: center;
+
+  &::before,
+  &::after {
+    content: "";
+    display: block;
+    position: absolute;
+    border-radius: 0.25rem;
+    left: 0;
+    top: 0;
+    width: 100%;
+    height: 100%;
+    box-shadow:
+      inset 1px 1px 0px rgba(255, 255, 255, 0.12),
+      inset -1px -1px 0px rgba(0, 0, 0, 0.75);
+    background: linear-gradient(to bottom, rgba(255, 255, 255, 0.06), rgba(0, 0, 0, 0.15));
+    mix-blend-mode: screen;
+  }
+
+  &::after {
+    mix-blend-mode: multiply;
+  }
+
+  &:hover {
+    background: #303030;
+  }
+  &:active {
+    box-shadow: 0px 0px 0px rgba(0, 0, 0, 0);
+    background: #121212;
+    padding: calc(var(--padding-top) + 1px) calc(var(--padding-x) - 1px)
+      calc(var(--padding-bottom) - 1px) calc(var(--padding-x) + 1px);
+  }
+
+  &:active::before,
+  &:active::after {
+    box-shadow:
+      1px 1px 0px rgba(255, 255, 255, 0.15),
+      inset 1px 1px 0px rgba(0, 0, 0, 0.5),
+      inset 1px 3px 5px rgba(0, 0, 0, 0.33);
+  }
+
+  &.-blue {
+    background: #346599 !important;
+  }
+  &.-blue:hover {
+    background: #3b77b8 !important;
+  }
+  &.-blue:active {
+    background: #1d5086 !important;
+  }
+
+  &.-green {
+    background: linear-gradient(to bottom, rgba(255, 255, 255, 0.06), rgba(0, 0, 0, 0.15)), #14580b;
+  }
+  &.-green:hover {
+    background: linear-gradient(to bottom, rgba(255, 255, 255, 0.06), rgba(0, 0, 0, 0.15)), #1a6d0f;
+  }
+  &.-green:active {
+    background: linear-gradient(to bottom, rgba(0, 0, 0, 0.15), rgba(255, 255, 255, 0.06)), #0f3f09;
+  }
+
+  &[disabled] {
+    box-shadow: none;
+    background: #666 !important;
+    color: #aaa;
+    pointer-events: none;
+  }
+  &[disabled]::before,
+  &[disabled]::after {
+    display: none;
+  }
+}

rgthree-comfy/src_web/common/css/dialog.scss

@@ -0,0 +1,129 @@
+
+.rgthree-dialog {
+  outline: 0;
+  border: 0;
+  border-radius: 6px;
+  background: #414141;
+  color: #fff;
+  box-shadow:
+    inset 1px 1px 0px rgba(255, 255, 255, 0.05),
+    inset -1px -1px 0px rgba(0, 0, 0, 0.5),
+    2px 2px 20px rgb(0, 0, 0);
+  max-width: 800px;
+  box-sizing: border-box;
+  font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
+  font-size: 1rem;
+  padding: 0;
+  max-height: calc(100% - 32px);
+
+  *, *::before, *::after {
+    box-sizing: inherit;
+  }
+}
+
+.rgthree-dialog-container {
+  // padding: 16px;
+  > * {
+    padding: 8px 16px;
+
+    &:first-child {
+      padding-top: 16px;
+    }
+    &:last-child {
+      padding-bottom: 16px;
+    }
+  }
+}
+
+.rgthree-dialog.-iconed::after {
+  content: "";
+  font-size: 276px;
+  position: absolute;
+  right: 0px;
+  bottom: 0px;
+  opacity: 0.15;
+  display: block;
+  width: 237px;
+  overflow: hidden;
+  height: 186px;
+  line-height: 1;
+  pointer-events: none;
+  z-index: -1;
+}
+.rgthree-dialog.-iconed.-help::after {
+  content: "🛟";
+}
+.rgthree-dialog.-iconed.-settings::after {
+  content: "⚙️";
+}
+
+@media (max-width: 832px) {
+  .rgthree-dialog {
+    max-width: calc(100% - 32px);
+  }
+}
+
+.rgthree-dialog-container-title {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  justify-content: start;
+}
+.rgthree-dialog-container-title > svg:first-child {
+  width: 36px;
+  height: 36px;
+  margin-right: 16px;
+}
+.rgthree-dialog-container-title h2 {
+  font-size: calc(22rem / 16);
+  margin: 0;
+  font-weight: bold;
+}
+
+.rgthree-dialog-container-title h2 small {
+  font-size: calc(13rem / 16);
+  font-weight: normal;
+  opacity: 0.75;
+}
+
+.rgthree-dialog-container-content {
+  overflow: auto;
+  max-height: calc(100vh - 200px); /* Arbitrary height to copensate for margin, title, and footer.*/
+}
+.rgthree-dialog-container-content p {
+  font-size: calc(13rem / 16);
+  margin-top: 0;
+}
+
+.rgthree-dialog-container-content ul li p {
+  margin-bottom: 4px;
+}
+
+.rgthree-dialog-container-content ul li p + p {
+  margin-top: 0.5em;
+}
+
+.rgthree-dialog-container-content ul li ul {
+  margin-top: 0.5em;
+  margin-bottom: 1em;
+}
+
+.rgthree-dialog-container-content p code {
+  display: inline-block;
+  padding: 2px 4px;
+  margin: 0px 2px;
+  border: 1px solid rgba(255, 255, 255, 0.25);
+  border-radius: 3px;
+  background: rgba(255, 255, 255, 0.1);
+}
+
+.rgthree-dialog-container-footer {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+body.rgthree-dialog-open > *:not(.rgthree-dialog):not(.rgthree-top-messages-container) {
+  filter: blur(5px);
+}
+

rgthree-comfy/src_web/common/css/dialog_lora_chooser.scss

@@ -0,0 +1,161 @@
+
+.rgthree-lora-chooser-dialog {
+  max-width: 100%;
+
+
+  .rgthree-dialog-container-title {
+    display: flex;
+    flex-direction: column;
+  }
+  .rgthree-dialog-container-title h2 {
+    display: flex;
+    width: 100%;
+  }
+  .rgthree-lora-chooser-search {
+    margin-left: auto;
+    border-radius: 50px;
+    width: 50%;
+    max-width: 170px;
+    padding: 2px 8px;
+  }
+
+  .rgthree-lora-chooser-header {
+    display: flex;
+    flex-direction: row;
+  }
+
+  .rgthree-lora-filters-container {
+    svg {width: 16px; height: 16px;}
+  }
+
+  .rgthree-dialog-container-content {
+    width: 80vw;
+    height: 80vh;
+  }
+
+  .rgthree-button-reset {
+    width: 32px;
+    height: 32px;
+    > svg {width: 100%; height: 100%;}
+
+  }
+
+  ul.rgthree-lora-chooser-list {
+    list-style: none;
+    margin: 0;
+    padding: 0;
+    position: relative;
+    display: flex;
+    flex-direction: row;
+    flex-wrap: wrap;
+    align-items: start;
+    justify-content: space-around;
+
+    > li {
+      position: relative;
+      flex: 0 0 auto;
+      width: 170px;
+      max-width: 100%;
+      margin: 8px 8px 16px;
+
+      label {
+        position: absolute;
+        display: block;
+        inset: 0;
+        z-index: 3;
+        cursor: pointer;
+      }
+      input[type="checkbox"] {
+        position: absolute;
+        right: 8px;
+        top: 8px;
+        margin: 0;
+        z-index: 2;
+        appearance: none;
+        background-color: #fff;
+        width: 48px;
+        height: 48px;
+        border-radius: 4px;
+        border: 1px solid rgba(120,120,120,1);
+        opacity: 0;
+        transition: opacity 0.15s ease-in-out;
+
+        &:checked {
+          opacity: 1;
+          background: #0060df;
+          &::before {
+            content: "";
+            display: block;
+            width: 100%;
+            height: 100%;
+            box-shadow: inset 100px 100px #fff;
+            clip-path: polygon(40.13% 68.39%, 23.05% 51.31%, 17.83% 48.26%, 12.61% 49.57%, 9.57% 53.04%, 8% 60%, 34.13% 85.87%, 39.82% 89.57%, 45.88% 86.73%, 90.66% 32.39%, 88.92% 26.1%, 83.03% 22.17%, 76.94% 22.62%)
+          }
+        }
+      }
+
+
+      figure {
+        position: relative;
+        display: block;
+        margin: 0 0 8px;
+        padding: 0;
+        border: 1px solid rgba(120, 120, 120, .8);
+        background: rgba(120, 120, 120, .5);
+        width: 100%;
+        padding-top: 120%;
+        transition: box-shadow 0.15s ease-in-out;
+        opacity: 0.75;
+        &::after {
+          content: '';
+          display: block;
+          position: absolute;
+          inset: 0;
+        }
+
+        &:empty {
+          &::before {
+            content: 'No image.';
+            color: rgba(200, 200, 200, .8);
+            position: absolute;
+            display: block;
+            inset: 0;
+            font-size: 1.2em;
+            text-align: center;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+          }
+        }
+
+        > img, > video {
+          position: absolute;
+          width: 100%;
+          height: 100%;
+          top: 0;
+          left: 0;
+          object-fit: cover;
+        }
+      }
+      div {
+        word-wrap: break-word;
+        font-size: 0.8rem;
+        opacity: 0.75;
+      }
+
+      &:hover figure::after{
+        box-shadow: 0px 2px 6px rgba(0,0,0,0.75);
+      }
+      :checked ~ figure::after {
+        box-shadow: 0 0 5px #fff, 0px 0px 15px rgba(49, 131, 255, 0.88), inset 0 0 3px #fff, inset 0px 0px 5px rgba(49, 131, 255, 0.88)
+      }
+
+      &:hover *,
+      &:hover input[type="checkbox"],
+      :checked ~ * {
+        opacity: 1
+      }
+
+    }
+  }
+}

rgthree-comfy/src_web/common/css/dialog_model_info.scss

@@ -0,0 +1,396 @@
+
+.rgthree-info-dialog {
+
+  width: 90vw;
+  max-width: 960px;
+
+  .rgthree-info-area {
+    list-style: none;
+    padding: 0;
+    margin: 0;
+    display: flex;
+
+    > li {
+      display: inline-flex;
+      margin: 0;
+      vertical-align: top;
+
+      + li {
+        margin-left: 6px;
+      }
+      &:not(.-link) + li.-link {
+        margin-left: auto;
+      }
+
+      &.rgthree-info-tag > * {
+        min-height: 24px;
+        border-radius: 4px;
+        line-height: 1;
+        color: rgba(255,255,255,0.85);
+        background: rgb(69, 92, 85);;
+        font-size: 14px;
+        font-weight: bold;
+        text-decoration: none;
+        display: flex;
+        height: 1.6em;
+        padding-left: .5em;
+        padding-right: .5em;
+        padding-bottom: .1em;
+        align-content: center;
+        justify-content: center;
+        align-items: center;
+        box-shadow: inset 0px 0px 0 1px  rgba(0, 0, 0, 0.5);
+
+        > svg {
+          width: 16px;
+          height: 16px;
+
+          &:last-child {
+            margin-left: .5em;
+          }
+        }
+
+
+        &[href] {
+          box-shadow: inset 0px 1px 0px rgba(255,255,255,0.25), inset 0px -1px 0px rgba(0,0,0,0.66);
+        }
+
+        &:empty {
+          display: none;
+        }
+      }
+
+      // &.-civitai > * {
+      //   color: #ddd;
+      //   background: #1b65aa;
+      //   transition: all 0.15s ease-in-out;
+      //   &:hover {
+      //     color: #fff;
+      //     border-color: #1971c2;
+      //     background: #1971c2;
+      //   }
+      // }
+      &.-type > * {
+        background: rgb(73, 54, 94);
+        color: rgb(228, 209, 248);
+      }
+
+      &.rgthree-info-menu {
+        margin-left: auto;
+
+        :not(#fakeid) & .rgthree-button {
+          margin: 0;
+          min-height: 24px;
+          padding: 0 12px;
+        }
+
+        svg {
+          width: 16px;
+          height: 16px;
+        }
+      }
+    }
+  }
+
+  .rgthree-info-table {
+    border-collapse: collapse;
+    margin: 16px 0px;
+    width: 100%;
+    font-size: 12px;
+
+    tr.editable button {
+      display: flex;
+      width: 28px;
+      height: 28px;
+      align-items: center;
+      justify-content: center;
+
+      svg + svg {display: none;}
+    }
+    tr.editable.-rgthree-editing button {
+      svg {display: none;}
+      svg + svg {display: inline-block;}
+    }
+
+    td {
+      position: relative;
+      border: 1px solid rgba(255,255,255,0.25);
+      padding: 0;
+      vertical-align: top;
+
+      &:first-child {
+        background: rgba(255,255,255,0.075);
+        width: 10px; // Small, so it doesn't adjust.
+        > *:first-child {
+          white-space: nowrap;
+          padding-right: 32px;
+        }
+
+        small {
+          display: block;
+          margin-top: 2px;
+          opacity: 0.75;
+
+          > [data-action] {
+            text-decoration: underline;
+            cursor: pointer;
+            &:hover {
+              text-decoration: none;
+            }
+          }
+        }
+      }
+
+      a, a:hover, a:visited {
+        color: inherit;
+      }
+
+      svg {
+        width: 1.3333em;
+        height: 1.3333em;
+        vertical-align: -0.285em;
+
+        &.logo-civitai {
+          margin-right: 0.3333em;
+        }
+      }
+
+      > *:first-child {
+        display: block;
+        padding: 6px 10px;
+      }
+
+      > input, > textarea{
+        padding: 5px 10px;
+        border: 0;
+        box-shadow: inset 1px 1px 5px 0px rgba(0,0,0,0.5);
+        font: inherit;
+        appearance: none;
+        background: #fff;
+        color: #121212;
+        resize: vertical;
+
+        &:only-child {
+          width: 100%;
+        }
+      }
+
+      :not(#fakeid) & .rgthree-button[data-action="fetch-civitai"] {
+        font-size: inherit;
+        padding: 6px 16px;
+        margin: 2px;
+      }
+    }
+
+    tr[data-field-name="userNote"] td > span:first-child {
+      white-space: pre;
+    }
+
+    tr.rgthree-info-table-break-row td {
+      border: 0;
+      background: transparent;
+      padding: 12px 4px 4px;
+      font-size: 1.2em;
+
+      > small {
+        font-style: italic;
+        opacity: 0.66;
+      }
+
+      &:empty {
+        padding: 4px;
+      }
+    }
+
+    td .-help {
+      border: 1px solid currentColor;
+      position: absolute;
+      right: 5px;
+      top: 6px;
+      line-height: 1;
+      font-size: 11px;
+      width: 12px;
+      height: 12px;
+      border-radius: 8px;
+      display: flex;
+      align-content: center;
+      justify-content: center;
+      cursor: help;
+      &::before {
+        content: '?';
+      }
+
+    }
+
+    td > ul.rgthree-info-trained-words-list {
+      list-style: none;
+      padding: 2px 8px;
+      margin: 0;
+      display: flex;
+      flex-direction: row;
+      flex-wrap: wrap;
+      max-height: 15vh;
+      overflow: auto;
+
+      > li {
+        display: inline-flex;
+        margin: 2px;
+        vertical-align: top;
+        border-radius: 4px;
+        line-height: 1;
+        color: rgba(255,255,255,0.85);
+        background: rgb(73, 91, 106);
+        font-size: 1.2em;
+        font-weight: 600;
+        text-decoration: none;
+        display: flex;
+        height: 1.6em;
+        align-content: center;
+        justify-content: center;
+        align-items: center;
+        box-shadow: inset 0px 0px 0 1px  rgba(0, 0, 0, 0.5);
+        cursor: pointer;
+        white-space: nowrap;
+        max-width: 183px;
+
+        &:hover {
+          background: rgb(68, 109, 142);
+        }
+
+        > svg {
+          width: auto;
+          height: 1.2em;
+        }
+
+        > span {
+          padding-left: .5em;
+          padding-right: .5em;
+          padding-bottom: .1em;
+          text-overflow: ellipsis;
+          overflow: hidden;
+        }
+
+        > small {
+          align-self: stretch;
+          display: flex;
+          align-items: center;
+          justify-content: center;
+          padding: 0 0.5em;
+          background: rgba(0,0,0,0.2);
+        }
+
+        &.-rgthree-is-selected {
+          background: rgb(42, 126, 193);
+        }
+      }
+    }
+  }
+
+  .rgthree-info-images {
+    list-style:none;
+    padding:0;
+    margin:0;
+    scroll-snap-type: x mandatory;
+    display:flex;
+    flex-direction:row;
+    overflow: auto;
+
+    > li {
+      scroll-snap-align: start;
+      max-width: 90%;
+      flex: 0 0 auto;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      flex-direction: column;
+      overflow: hidden;
+      padding: 0;
+      margin: 6px;
+      font-size: 0;
+      position: relative;
+
+      figure {
+        margin: 0;
+        position: static;
+
+        figcaption {
+          position: absolute;
+          left: 0;
+          width: 100%;
+          bottom: 0;
+          padding: 12px;
+          font-size: 12px;
+          background: rgba(0,0,0,0.85);
+          opacity: 0;
+          transform: translateY(50px);
+          transition: all 0.25s ease-in-out;
+
+          > span {
+            display: inline-block;
+            padding: 2px 4px;
+            margin: 2px;
+            border-radius: 2px;
+            border: 1px solid rgba(255,255,255,0.2);
+            word-break: break-word;
+
+            label {
+              display: inline;
+              padding: 0;
+              margin: 0;
+              opacity: 0.5;
+              pointer-events: none;
+              user-select: none;
+            }
+            a {
+              color: inherit;
+              text-decoration: underline;
+              &:hover {
+                text-decoration: none;
+              }
+
+              svg {
+                height: 10px;
+                margin-left: 4px;
+                fill: currentColor;
+              }
+            }
+          }
+          &:empty {
+            text-align: center;
+
+            &::before {
+              content: 'No data.';
+            }
+          }
+        }
+      }
+
+      &:hover figure figcaption {
+        opacity: 1;
+        transform: translateY(0px);
+      }
+
+      .rgthree-info-table {
+        width: calc(100% - 16px);
+      }
+    }
+  }
+
+  .rgthree-info-civitai-link {
+    margin: 8px;
+    color: #eee;
+
+    a, a:hover, a:visited {
+      color: inherit;
+      text-decoration: none;
+    }
+
+    > svg {
+      width: 16px;
+      height: 16px;
+      margin-right: 8px;
+    }
+  }
+}
+
+

rgthree-comfy/src_web/common/css/menu.scss

@@ -0,0 +1,108 @@
+
+
+.rgthree-menu {
+  list-style: none;
+  padding: 0;
+  margin: 0;
+  position: fixed;
+  z-index: 999999;
+  pointer-events: none;
+  opacity: 0;
+  transition: opacity 0.08s ease-in-out;
+
+  color: #dde;
+  background-color: #111;
+  font-size: 12px;
+  box-shadow: 0 0 10px black !important;
+
+  > li {
+    position: relative;
+    padding: 4px 6px;
+    z-index: 9999;
+    white-space: nowrap;
+
+    &[role="button"] {
+      background-color: var(--comfy-menu-bg) !important;
+      color: var(--input-text);
+      cursor: pointer;
+      &:hover {
+        filter: brightness(155%);
+      }
+    }
+  }
+
+  &[state^="measuring"] {
+    display: block;
+    opacity: 0;
+  }
+  &[state="open"] {
+    display: block;
+    opacity: 1;
+    pointer-events: all;
+  }
+}
+
+
+.rgthree-top-menu {
+  box-sizing: border-box;
+  white-space: nowrap;
+  background: var(--content-bg);
+  color: var(--content-fg);
+  display: flex;
+  flex-direction: column;
+  * {
+    box-sizing: inherit;
+  }
+
+  menu {
+    list-style: none;
+    padding: 0;
+    margin: 0;
+
+    > li:not(#fakeid) {
+      list-style: none;
+      padding: 0;
+      margin: 0;
+
+      > button {
+        cursor: pointer;
+        padding: 8px 12px 8px 8px;
+        width: 100%;
+        text-align: start;
+        display: flex;
+        flex-direction: row;
+        align-items: center;
+        justify-content: start;
+
+        &:hover {
+          background-color: var(--comfy-input-bg);
+        }
+
+        svg {
+          height: 16px;
+          width: auto;
+          margin-inline-end: 0.6em;
+
+          &.github-star {
+            fill: rgb(227, 179, 65);
+          }
+        }
+      }
+
+      &.rgthree-message {
+        // ComfyUI's code has strange behavior that that always puts the popupat to if its less than
+        // 30px... we'll force our message to be at least 32px tall so it won't do that unless it's
+        // actually on the bottom.
+        min-height: 32px;
+        > span {
+          padding: 8px 12px;
+          display: block;
+          width: 100%;
+          text-align: center;
+          font-style: italic;
+          font-size: 12px;
+        }
+      }
+    }
+  }
+}

rgthree-comfy/src_web/common/css/pages_base.scss

@@ -0,0 +1,69 @@
+
+html, body {
+
+}
+html {
+  font-size: 100%;
+  overflow-y: scroll;
+  -webkit-text-size-adjust: 100%;
+  -ms-text-size-adjust: 100%;
+  box-sizing: border-box;
+}
+*, *:before, *:after {
+  box-sizing: inherit
+}
+
+:root {
+  --header-height: 56px;
+  --progress-height: 12px;
+}
+
+button {
+  all: unset;
+}
+
+.-bevel {
+  position: relative;
+}
+.-bevel::before {
+  content: '';
+  position: absolute;
+  left: 0;
+  top: 0;
+  width: 100%;
+  height: 100%;
+  border: 1px solid red;
+  border-color: rgba(255,255,255,0.15) rgba(255,255,255,0.15) rgba(0,0,0,0.5) rgba(0,0,0,0.5);
+  z-index: 5;
+  pointer-events: none;
+}
+
+
+body {
+  background: #202020;
+  font-family: Arial, sans-serif;
+  font-size: calc(16 * 0.0625rem);
+  font-weight: 400;
+  margin: 0;
+  padding-top: calc(var(--header-height) + var(--progress-height));
+  color: #ffffff;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: start;
+}
+
+.app-header {
+  height: var( --header-height);
+  padding: 0;
+  position: fixed;
+  z-index: 99;
+  top: 0;
+  left: 0;
+  width: 100%;
+  background: #353535;
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  justify-content: start;
+}

rgthree-comfy/src_web/common/media/svgs.ts

@@ -0,0 +1,186 @@
+import { createElement as $el } from "../utils_dom.js";
+
+// Some svg repo : https://www.svgrepo.com/svg/326731/open-outline
+
+export const logoRgthree = `<svg viewBox="0 0 256 256" fill="currentColor" class="rgthree-logo">
+    <path d="M88.503,158.997 L152.731,196.103 L152.738,196.092 L152.762,196.103 L152.769,196.106 L152.771,196.103 L183.922,142.084     L174.153,136.437 L148.611,180.676 L101.512,153.484 L132.193,30.415 L156.124,71.869 L165.896,66.225 L128.002,0.59 "></path>
+    <path d="M55.586,148.581l13.44,47.521l0.014,0.051l0.168-0.051l10.689-3.022l-6.589-23.313l45.609,26.335l0.087,0.051l0.027-0.051     l5.617-9.718l-42.648-24.622l35.771-143.45L33.232,164.729l9.77,5.645L55.586,148.581z M87.394,93.484l-16.708,67.018l-5.018-17.747     l-8.028,2.27L87.394,93.484z"></path>
+    <path d="M189.85,107.717 L137.892,137.718 L143.532,147.49 L185.723,123.133 L231.109,201.746 L24.895,201.746 L37.363,180.146     L27.592,174.505 L5.347,213.03 L250.653,213.03 "></path>
+    <path d="M5.347,247.299v8.111h245.307v-8.111l-41.94-0.003c-1.336,0-2.404-1.065-2.441-2.396v-12.14     c0.037-1.315,1.089-2.368,2.41-2.385h41.972v-8.11H5.347v8.11h41.951c1.338,0.017,2.427,1.104,2.427,2.449v12.01     c0,1.365-1.105,2.462-2.457,2.462L5.347,247.299z M139.438,247.296c-1.334,0-2.406-1.065-2.439-2.396v-12.14     c0.033-1.315,1.085-2.368,2.41-2.385h46.415c1.335,0.017,2.425,1.104,2.425,2.449v12.01c0,1.365-1.103,2.462-2.459,2.462H139.438z       M70.193,247.296c-1.339,0-2.408-1.065-2.441-2.396v-12.14c0.033-1.315,1.086-2.368,2.407-2.385h46.418     c1.336,0.017,2.425,1.104,2.425,2.449v12.01c0,1.365-1.103,2.462-2.458,2.462H70.193z"></path>
+  </svg>`;
+
+export const github = `<svg viewBox="0 0 16 16" fill="currentColor" class="github-logo">
+    <path d="M8 0c4.42 0 8 3.58 8 8a8.013 8.013 0 0 1-5.45 7.59c-.4.08-.55-.17-.55-.38 0-.27.01-1.13.01-2.2 0-.75-.25-1.23-.54-1.48 1.78-.2 3.65-.88 3.65-3.95 0-.88-.31-1.59-.82-2.15.08-.2.36-1.02-.08-2.12 0 0-.67-.22-2.2.82-.64-.18-1.32-.27-2-.27-.68 0-1.36.09-2 .27-1.53-1.03-2.2-.82-2.2-.82-.44 1.1-.16 1.92-.08 2.12-.51.56-.82 1.28-.82 2.15 0 3.06 1.86 3.75 3.64 3.95-.23.2-.44.55-.51 1.07-.46.21-1.61.55-2.33-.66-.15-.24-.6-.83-1.23-.82-.67.01-.27.38.01.53.34.19.73.9.82 1.13.16.45.68 1.31 2.69.94 0 .67.01 1.3.01 1.49 0 .21-.15.45-.55.38A7.995 7.995 0 0 1 0 8c0-4.42 3.58-8 8-8Z"></path>
+  </svg>`;
+
+export const iconStarFilled = `<svg viewBox="0 0 16 16" fill="currentColor" class="github-star">
+    <path d="M8 .25a.75.75 0 0 1 .673.418l1.882 3.815 4.21.612a.75.75 0 0 1 .416 1.279l-3.046 2.97.719 4.192a.751.751 0 0 1-1.088.791L8 12.347l-3.766 1.98a.75.75 0 0 1-1.088-.79l.72-4.194L.818 6.374a.75.75 0 0 1 .416-1.28l4.21-.611L7.327.668A.75.75 0 0 1 8 .25Z"></path>
+  </svg>`;
+
+export const iconReplace = `<svg viewBox="0 0 52 52" fill="currentColor">
+    <path d="M20,37.5c0-0.8-0.7-1.5-1.5-1.5h-15C2.7,36,2,36.7,2,37.5v11C2,49.3,2.7,50,3.5,50h15c0.8,0,1.5-0.7,1.5-1.5 V37.5z"/>
+    <path d="M8.1,22H3.2c-1,0-1.5,0.9-0.9,1.4l8,8.3c0.4,0.3,1,0.3,1.4,0l8-8.3c0.6-0.6,0.1-1.4-0.9-1.4h-4.7 c0-5,4.9-10,9.9-10V6C15,6,8.1,13,8.1,22z"/>
+    <path d="M41.8,20.3c-0.4-0.3-1-0.3-1.4,0l-8,8.3c-0.6,0.6-0.1,1.4,0.9,1.4h4.8c0,6-4.1,10-10.1,10v6 c9,0,16.1-7,16.1-16H49c1,0,1.5-0.9,0.9-1.4L41.8,20.3z"/>
+    <path d="M50,3.5C50,2.7,49.3,2,48.5,2h-15C32.7,2,32,2.7,32,3.5v11c0,0.8,0.7,1.5,1.5,1.5h15c0.8,0,1.5-0.7,1.5-1.5 V3.5z"/>
+  </svg>`;
+
+export const iconNode = `<svg viewBox="0 -0.5 25 25" fill="none">
+    <path fill-rule="evenodd" clip-rule="evenodd" d="M15.5 19H9.5C7.29086 19 5.5 17.2091 5.5 15V9C5.5 6.79086 7.29086 5 9.5 5H15.5C17.7091 5 19.5 6.79086 19.5 9V15C19.5 17.2091 17.7091 19 15.5 19Z" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+    <path d="M19.5 9.75C19.9142 9.75 20.25 9.41421 20.25 9C20.25 8.58579 19.9142 8.25 19.5 8.25V9.75ZM5.5 8.25C5.08579 8.25 4.75 8.58579 4.75 9C4.75 9.41421 5.08579 9.75 5.5 9.75V8.25ZM11.5 14.25C11.0858 14.25 10.75 14.5858 10.75 15C10.75 15.4142 11.0858 15.75 11.5 15.75V14.25ZM13.5 15.75C13.9142 15.75 14.25 15.4142 14.25 15C14.25 14.5858 13.9142 14.25 13.5 14.25V15.75ZM19.5 8.25H5.5V9.75H19.5V8.25ZM11.5 15.75H13.5V14.25H11.5V15.75Z" fill="currentColor" />
+  </svg>`;
+
+export const iconGear = `<svg viewBox="0 0 24 24" fill="currentColor">
+    <path fill-rule="evenodd" clip-rule="evenodd" d="M12.7848 0.449982C13.8239 0.449982 14.7167 1.16546 14.9122 2.15495L14.9991 2.59495C15.3408 4.32442 17.1859 5.35722 18.9016 4.7794L19.3383 4.63233C20.3199 4.30175 21.4054 4.69358 21.9249 5.56605L22.7097 6.88386C23.2293 7.75636 23.0365 8.86366 22.2504 9.52253L21.9008 9.81555C20.5267 10.9672 20.5267 13.0328 21.9008 14.1844L22.2504 14.4774C23.0365 15.1363 23.2293 16.2436 22.7097 17.1161L21.925 18.4339C21.4054 19.3064 20.3199 19.6982 19.3382 19.3676L18.9017 19.2205C17.1859 18.6426 15.3408 19.6754 14.9991 21.405L14.9122 21.845C14.7167 22.8345 13.8239 23.55 12.7848 23.55H11.2152C10.1761 23.55 9.28331 22.8345 9.08781 21.8451L9.00082 21.4048C8.65909 19.6754 6.81395 18.6426 5.09822 19.2205L4.66179 19.3675C3.68016 19.6982 2.59465 19.3063 2.07505 18.4338L1.2903 17.1161C0.770719 16.2436 0.963446 15.1363 1.74956 14.4774L2.09922 14.1844C3.47324 13.0327 3.47324 10.9672 2.09922 9.8156L1.74956 9.52254C0.963446 8.86366 0.77072 7.75638 1.2903 6.8839L2.07508 5.56608C2.59466 4.69359 3.68014 4.30176 4.66176 4.63236L5.09831 4.77939C6.81401 5.35722 8.65909 4.32449 9.00082 2.59506L9.0878 2.15487C9.28331 1.16542 10.176 0.449982 11.2152 0.449982H12.7848ZM12 15.3C13.8225 15.3 15.3 13.8225 15.3 12C15.3 10.1774 13.8225 8.69998 12 8.69998C10.1774 8.69998 8.69997 10.1774 8.69997 12C8.69997 13.8225 10.1774 15.3 12 15.3Z" />
+  </svg>`;
+
+export const checkmark = `<svg viewBox="0 0 32 32" fill="currentColor" class="icon-checkmark">
+    <g transform="translate(-518.000000, -1039.000000)">
+      <path d="M548.783,1040.2 C547.188,1038.57 544.603,1038.57 543.008,1040.2 L528.569,1054.92 L524.96,1051.24 C523.365,1049.62 520.779,1049.62 519.185,1051.24 C517.59,1052.87 517.59,1055.51 519.185,1057.13 L525.682,1063.76 C527.277,1065.39 529.862,1065.39 531.457,1063.76 L548.783,1046.09 C550.378,1044.46 550.378,1041.82 548.783,1040.2"></path>
+    </g>
+  </svg>`;
+
+export const logoCivitai = `<svg viewBox="0 0 178 178" class="logo-civitai">
+    <defs>
+      <linearGradient id="bgblue" gradientUnits="userSpaceOnUse" x1="89.3" y1="-665.5" x2="89.3" y2="-841.1" gradientTransform="matrix(1 0 0 -1 0 -664)">
+        <stop offset="0" style="stop-color:#1284F7"/>
+        <stop offset="1" style="stop-color:#0A20C9"/>
+      </linearGradient>
+    </defs>
+    <path fill="#000" d="M13.3,45.4v87.7l76,43.9l76-43.9V45.4l-76-43.9L13.3,45.4z"/>
+    <path style="fill:url(#bgblue);" d="M89.3,29.2l52,30v60l-52,30l-52-30v-60 L89.3,29.2 M89.3,1.5l-76,43.9v87.8l76,43.9l76-43.9V45.4L89.3,1.5z" />
+    <path fill="#FFF" d="M104.1,97.2l-14.9,8.5l-14.9-8.5v-17l14.9-8.5l14.9,8.5h18.2V69.7l-33-19l-33,19v38.1l33,19l33-19V97.2H104.1z" />
+  </svg>`;
+
+export const iconOutLink = `<svg viewBox="0 0 32 32">
+    <path d="M 18 5 L 18 7 L 23.5625 7 L 11.28125 19.28125 L 12.71875 20.71875 L 25 8.4375 L 25 14 L 27 14 L 27 5 Z M 5 9 L 5 27 L 23 27 L 23 14 L 21 16 L 21 25 L 7 25 L 7 11 L 16 11 L 18 9 Z"></path>
+  </svg>`;
+
+export const link = `<svg viewBox="0 0 640 512">
+    <path d="M598.6 41.41C570.1 13.8 534.8 0 498.6 0s-72.36 13.8-99.96 41.41l-43.36 43.36c15.11 8.012 29.47 17.58 41.91 30.02c3.146 3.146 5.898 6.518 8.742 9.838l37.96-37.96C458.5 72.05 477.1 64 498.6 64c20.67 0 40.1 8.047 54.71 22.66c14.61 14.61 22.66 34.04 22.66 54.71s-8.049 40.1-22.66 54.71l-133.3 133.3C405.5 343.1 386 352 365.4 352s-40.1-8.048-54.71-22.66C296 314.7 287.1 295.3 287.1 274.6s8.047-40.1 22.66-54.71L314.2 216.4C312.1 212.5 309.9 208.5 306.7 205.3C298.1 196.7 286.8 192 274.6 192c-11.93 0-23.1 4.664-31.61 12.97c-30.71 53.96-23.63 123.6 22.39 169.6C293 402.2 329.2 416 365.4 416c36.18 0 72.36-13.8 99.96-41.41L598.6 241.3c28.45-28.45 42.24-66.01 41.37-103.3C639.1 102.1 625.4 68.16 598.6 41.41zM234 387.4L196.1 425.3C181.5 439.1 162 448 141.4 448c-20.67 0-40.1-8.047-54.71-22.66c-14.61-14.61-22.66-34.04-22.66-54.71s8.049-40.1 22.66-54.71l133.3-133.3C234.5 168 253.1 160 274.6 160s40.1 8.048 54.71 22.66c14.62 14.61 22.66 34.04 22.66 54.71s-8.047 40.1-22.66 54.71L325.8 295.6c2.094 3.939 4.219 7.895 7.465 11.15C341.9 315.3 353.3 320 365.4 320c11.93 0 23.1-4.664 31.61-12.97c30.71-53.96 23.63-123.6-22.39-169.6C346.1 109.8 310.8 96 274.6 96C238.4 96 202.3 109.8 174.7 137.4L41.41 270.7c-27.6 27.6-41.41 63.78-41.41 99.96c-.0001 36.18 13.8 72.36 41.41 99.97C69.01 498.2 105.2 512 141.4 512c36.18 0 72.36-13.8 99.96-41.41l43.36-43.36c-15.11-8.012-29.47-17.58-41.91-30.02C239.6 394.1 236.9 390.7 234 387.4z"/>
+  </svg>`;
+
+export const pencil = `<svg viewBox="0 0 24 24">
+    <path d="M 16.9375 1.0625 L 3.875 14.125 L 1.0742188 22.925781 L 9.875 20.125 L 22.9375 7.0625 C 22.9375 7.0625 22.8375 4.9615 20.9375 3.0625 C 19.0375 1.1625 16.9375 1.0625 16.9375 1.0625 z M 17.3125 2.6875 C 18.3845 2.8915 19.237984 3.3456094 19.896484 4.0214844 C 20.554984 4.6973594 21.0185 5.595 21.3125 6.6875 L 19.5 8.5 L 15.5 4.5 L 16.9375 3.0625 L 17.3125 2.6875 z M 4.9785156 15.126953 C 4.990338 15.129931 6.1809555 15.430955 7.375 16.625 C 8.675 17.825 8.875 18.925781 8.875 18.925781 L 8.9179688 18.976562 L 5.3691406 20.119141 L 3.8730469 18.623047 L 4.9785156 15.126953 z"/>
+  </svg>`;
+
+export const dotdotdot = `<svg viewBox="0 0 24 24" fill="currentColor">
+  <circle cy="12" r="3" cx="3"></circle>
+  <circle cy="12" r="3" cx="12"></circle>
+  <circle cx="21" cy="12" r="3"></circle>
+</svg>`;
+
+export const models = `<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+    <path d="M4 4h6v6h-6z"></path>
+<path d="M14 4h6v6h-6z"></path>
+<path d="M4 14h6v6h-6z"></path>
+<path d="M17 17m-3 0a3 3 0 1 0 6 0a3 3 0 1 0 -6 0"></path>
+</svg>`;
+
+/** https://www.svgrepo.com/svg/402308/pencil */
+export const pencilColored = `<svg viewBox="0 0 64 64">
+    <path fill="#ffce31" d="M7.934 41.132L39.828 9.246l14.918 14.922l-31.895 31.886z"></path>
+    <path d="M61.3 4.6l-1.9-1.9C55.8-.9 50-.9 46.3 2.7l-6.5 6.5l15 15l6.5-6.5c3.6-3.6 3.6-9.5 0-13.1" fill="#ed4c5c"></path>
+    <path fill="#93a2aa" d="M35.782 13.31l4.1-4.102l14.92 14.92l-4.1 4.101z"></path>
+    <path fill="#c7d3d8" d="M37.338 14.865l4.1-4.101l11.739 11.738l-4.102 4.1z"></path>
+    <path fill="#fed0ac" d="M7.9 41.1l-6.5 17l4.5 4.5l17-6.5z"/>
+    <path d="M.3 61.1c-.9 2.4.3 3.5 2.7 2.6l8.2-3.1l-7.7-7.7l-3.2 8.2" fill="#333"></path>
+    <path fill="#ffdf85" d="M7.89 41.175l27.86-27.86l4.95 4.95l-27.86 27.86z"/>
+    <path fill="#ff8736" d="M17.904 51.142l27.86-27.86l4.95 4.95l-27.86 27.86z"></path>
+  </svg>`;
+
+/** https://www.svgrepo.com/svg/395640/save */
+export const diskColored = `<svg viewBox="-0.01 -0.008 100.016 100.016">
+  <path fill="#26f" fill_="#23475F" d="M88.555-.008H83v.016a2 2 0 0 1-2 2H19a2 2 0 0 1-2-2v-.016H4a4 4 0 0 0-4 4v92.016a4 4 0 0 0 4 4h92a4 4 0 0 0 4-4V11.517c.049-.089-11.436-11.454-11.445-11.525z"/>
+  <path fill="#04d" fill_="#1C3C50" d="M81.04 53.008H18.96a2 2 0 0 0-2 2v45h66.08v-45c0-1.106-.895-2-2-2zm-61.957-10h61.834a2 2 0 0 0 2-2V.547A1.993 1.993 0 0 1 81 2.007H19c-.916 0-1.681-.62-1.917-1.46v40.46a2 2 0 0 0 2 2.001z"/>
+  <path fill="#EBF0F1" d="M22 55.977h56a2 2 0 0 1 2 2v37.031a2 2 0 0 1-2 2H22c-1.104 0-2-.396-2-1.5V57.977a2 2 0 0 1 2-2z"/>
+  <path fill="#BCC4C8" d="M25 77.008h50v1H25v-1zm0 10h50v1H25v-1z"/>
+  <path fill="#1C3C50" d="M7 84.008h3a2 2 0 0 1 2 2v3a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2v-3a2 2 0 0 1 2-2zm83 0h3a2 2 0 0 1 2 2v3a2 2 0 0 1-2 2h-3a2 2 0 0 1-2-2v-3a2 2 0 0 1 2-2z"/>
+  <path fill="#BCC4C8" d="M37 1.981v36.026a2 2 0 0 0 2 2h39a2 2 0 0 0 2-2V1.981c0 .007-42.982.007-43 0zm37 29.027a2 2 0 0 1-2 2h-6a2 2 0 0 1-2-2V10.981a2 2 0 0 1 2-2h6a2 2 0 0 1 2 2v20.027z"/>
+  <path fill="#FF9D00" d="M78 55.977H22a2 2 0 0 0-2 2v10.031h60V57.977a2 2 0 0 0-2-2z"/>
+</svg>`;
+
+/** https://www.svgrepo.com/svg/229838/folder */
+export const folderColored = `<svg viewBox="0 0 501.379 501.379">
+  <path style="fill:#EF9F2C;" d="M406.423,93.889H205.889c-17.067,0-30.933-13.867-30.933-30.933s-13.867-30.933-30.933-30.933H30.956
+      c-17.067,0-30.933,13.867-30.933,30.933v375.467c0,17.067,13.867,30.933,30.933,30.933h375.467
+      c17.067,0,30.933-13.867,30.933-30.933v-313.6C436.289,107.756,422.423,93.889,406.423,93.889z"/>
+  <path style="fill:#FEC656;" d="M470.423,157.889H97.089c-13.867,0-26.667,9.6-29.867,22.4l-66.133,249.6
+    c-5.333,19.2,9.6,38.4,29.867,38.4h373.333c13.867,0,26.667-9.6,29.867-22.4l66.133-248.533
+    C505.623,177.089,490.689,157.889,470.423,157.889z"/>
+</svg>`;
+
+export const modelsColored = `<svg viewBox="0 0 24 24">
+  <path fill="#aa3366" d="M0 0h10v10h-10z"></path>
+  <path d="M14 0h10v10h-10z" fill="#3366aa"></path>
+  <path d="M0 14h10v10h-10z" fill="#66aa33"></path>
+  <path fill="#dd9922" d="M19 19m-5 0 a5 5 0 1 0 10 0 a5 5 0 1 0 -10 0"></path>
+</svg>`;
+
+export const legoBlocksColored = `<svg viewBox="0 0 512 512">
+  <g>
+    <rect x="57.67" style="fill:#00BAB9;" width="101.275" height="78.769"/>
+    <rect x="205.363" style="fill:#00BAB9;" width="101.275" height="78.769"/>
+    <rect x="353.055" style="fill:#00BAB9;" width="101.275" height="78.769"/>
+  </g>
+  <polygon style="fill:#B8DE6F;" points="478.242,289.758 478.242,512 33.758,512 33.758,289.758 256,267.253 "/>
+  <polygon style="fill:#41D4D3;" points="478.242,67.516 478.242,289.758 33.758,289.758 33.758,67.516 57.67,67.516 158.945,67.516
+    205.363,67.516 306.637,67.516 353.055,67.516 454.33,67.516 "/>
+  <g>
+    <circle style="fill:#00BAB9;" cx="402.286" cy="143.473" r="8.44"/>
+    <circle style="fill:#00BAB9;" cx="368.527" cy="177.231" r="8.44"/>
+  </g>
+  <circle style="fill:#7BD288;" cx="109.714" cy="436.044" r="8.44"/>
+</svg>`;
+
+export const legoBlockColored = `<svg viewBox="0 0 256 256">
+  <style>
+  .s0 { fill: #ff0000 }
+  .s1 { fill: #c30000 }
+  .s2 { fill: #800000 }
+  .s3 { fill: #cc0000 }
+  .s4 { fill: #e00000 }
+  </style>
+  <g id="Folder 2">
+  <path id="Shape 1 copy 2" class="s0" d="m128 61l116 45-116 139-116-139z"/>
+  <path id="Shape 1" class="s1" d="m12 106l116 45v95l-116-45z"/>
+  <path id="Shape 1 copy" class="s2" d="m244 106l-116 45v95l116-45z"/>
+  <g id="Folder 1">
+    <path id="Shape 2" class="s3" d="m102 111.2c0-6.1 11.4-9.9 25.5-9.9 14.1 0 25.5 3.8 25.5 9.9 0 3.3 0 13.3 0 16.6 0 6.1-11.4 10.9-25.5 10.9-14.1 0-25.5-4.8-25.5-10.9 0-3.3 0-13.3 0-16.6z"/>
+    <path id="Shape 2 copy 4" class="s1" d="m102 111.2c0-6.1 11.4-9.9 25.5-9.9 14.1 0 25.5 3.8 25.5 9.9 0 3.3 0 13.3 0 16.6 0 6.1-11.4 10.9-25.5 10.9-14.1 0-25.5-4.8-25.5-10.9 0-3.3 0-13.3 0-16.6z"/>
+    <path id="Shape 2 copy 2" class="s2" d="m127.5 101.3c14.1 0 25.5 3.8 25.5 9.9 0 3.3 0 13.3 0 16.6 0 6.1-11.4 10.9-25.5 10.9 0-13.1 0-25.7 0-37.4z"/>
+    <path id="Shape 2 copy" class="s0" d="m127.5 118.8c-12.2 0-22-3.4-22-7.6 0-4.2 9.8-7.7 22-7.7 12.2 0 22 3.5 22 7.7 0 4.2-9.8 7.6-22 7.6zm0 0c-12.2 0-22-3.4-22-7.6 0-4.2 9.8-7.7 22-7.7 12.2 0 22 3.5 22 7.7 0 4.2-9.8 7.6-22 7.6z"/>
+  </g>
+  <g id="Folder 1 copy">
+    <path id="Shape 2" class="s4" d="m103 67.5c0-5.8 11-9.5 24.5-9.5 13.5 0 24.5 3.7 24.5 9.5 0 3.2 0 12.8 0 16 0 5.8-11 10.5-24.5 10.5-13.5 0-24.5-4.7-24.5-10.5 0-3.2 0-12.8 0-16z"/>
+    <path id="Shape 2 copy 4" class="s1" d="m103 67.5c0-5.8 11-9.5 24.5-9.5 13.5 0 24.5 3.7 24.5 9.5 0 3.2 0 12.8 0 16 0 5.8-11 10.5-24.5 10.5-13.5 0-24.5-4.7-24.5-10.5 0-3.2 0-12.8 0-16z"/>
+    <path id="Shape 2 copy 2" class="s2" d="m127.5 58c13.5 0 24.5 3.7 24.5 9.5 0 3.2 0 12.8 0 16 0 5.8-11 10.5-24.5 10.5 0-12.6 0-24.8 0-36z"/>
+    <path id="Shape 2 copy" class="s0" d="m127.5 74.9c-11.7 0-21.2-3.3-21.2-7.4 0-4.1 9.5-7.4 21.2-7.4 11.7 0 21.2 3.3 21.2 7.4 0 4.1-9.5 7.4-21.2 7.4zm0 0c-11.7 0-21.2-3.3-21.2-7.4 0-4.1 9.5-7.4 21.2-7.4 11.7 0 21.2 3.3 21.2 7.4 0 4.1-9.5 7.4-21.2 7.4z"/>
+  </g>
+  <g id="Folder 1 copy 2">
+    <path id="Shape 2" class="s4" d="m161 89.5c0-5.8 11-9.5 24.5-9.5 13.5 0 24.5 3.7 24.5 9.5 0 3.2 0 12.8 0 16 0 5.8-11 10.5-24.5 10.5-13.5 0-24.5-4.7-24.5-10.5 0-3.2 0-12.8 0-16z"/>
+    <path id="Shape 2 copy 4" class="s1" d="m161 89.5c0-5.8 11-9.5 24.5-9.5 13.5 0 24.5 3.7 24.5 9.5 0 3.2 0 12.8 0 16 0 5.8-11 10.5-24.5 10.5-13.5 0-24.5-4.7-24.5-10.5 0-3.2 0-12.8 0-16z"/>
+    <path id="Shape 2 copy 2" class="s2" d="m185.5 80c13.5 0 24.5 3.7 24.5 9.5 0 3.2 0 12.8 0 16 0 5.8-11 10.5-24.5 10.5 0-12.6 0-24.8 0-36z"/>
+    <path id="Shape 2 copy" class="s0" d="m185.5 96.9c-11.7 0-21.2-3.3-21.2-7.4 0-4.1 9.5-7.4 21.2-7.4 11.7 0 21.2 3.3 21.2 7.4 0 4.1-9.5 7.4-21.2 7.4zm0 0c-11.7 0-21.2-3.3-21.2-7.4 0-4.1 9.5-7.4 21.2-7.4 11.7 0 21.2 3.3 21.2 7.4 0 4.1-9.5 7.4-21.2 7.4z"/>
+  </g>
+  <g id="Folder 1 copy 3">
+    <path id="Shape 2" class="s4" d="m45 89.5c0-5.8 11-9.5 24.5-9.5 13.5 0 24.5 3.7 24.5 9.5 0 3.2 0 12.8 0 16 0 5.8-11 10.5-24.5 10.5-13.5 0-24.5-4.7-24.5-10.5 0-3.2 0-12.8 0-16z"/>
+    <path id="Shape 2 copy 4" class="s1" d="m45 89.5c0-5.8 11-9.5 24.5-9.5 13.5 0 24.5 3.7 24.5 9.5 0 3.2 0 12.8 0 16 0 5.8-11 10.5-24.5 10.5-13.5 0-24.5-4.7-24.5-10.5 0-3.2 0-12.8 0-16z"/>
+    <path id="Shape 2 copy 2" class="s2" d="m69.5 80c13.5 0 24.5 3.7 24.5 9.5 0 3.2 0 12.8 0 16 0 5.8-11 10.5-24.5 10.5 0-12.6 0-24.8 0-36z"/>
+    <path id="Shape 2 copy" class="s0" d="m69.5 96.9c-11.7 0-21.2-3.3-21.2-7.4 0-4.1 9.5-7.4 21.2-7.4 11.7 0 21.2 3.3 21.2 7.4 0 4.1-9.5 7.4-21.2 7.4zm0 0c-11.7 0-21.2-3.3-21.2-7.4 0-4.1 9.5-7.4 21.2-7.4 11.7 0 21.2 3.3 21.2 7.4 0 4.1-9.5 7.4-21.2 7.4z"/>
+  </g>
+  </g>
+</svg>`;
+
+export const gearColored = `<svg viewBox="0 0 128 128" preserveAspectRatio="xMidYMid meet">
+  <path d="M124 71.85v-15.7c0-.59-.45-1.09-1.03-1.15l-17.83-1.89c-.47-.05-.85-.38-.98-.83c-.86-2.95-2.03-5.76-3.48-8.39c-.23-.41-.19-.92.11-1.28l11.28-13.94c.37-.46.34-1.13-.08-1.54l-11.1-11.1a1.15 1.15 0 0 0-1.54-.08L85.39 27.22c-.37.3-.87.33-1.28.11a41.796 41.796 0 0 0-8.39-3.48c-.45-.13-.78-.51-.83-.98L73 5.03C72.94 4.45 72.44 4 71.85 4h-15.7c-.59 0-1.09.45-1.15 1.03l-1.89 17.83c-.05.47-.38.85-.83.98c-2.95.86-5.76 2.03-8.39 3.48c-.41.23-.92.19-1.28-.11L28.67 15.94a1.15 1.15 0 0 0-1.54.08l-11.1 11.1a1.15 1.15 0 0 0-.08 1.54L27.23 42.6c.3.37.33.87.11 1.28a41.796 41.796 0 0 0-3.48 8.39c-.13.45-.51.78-.98.83L5.03 55c-.58.06-1.03.56-1.03 1.15v15.7c0 .59.45 1.09 1.03 1.15l17.83 1.89c.47.05.85.38.98.83c.86 2.95 2.03 5.76 3.48 8.39c.23.41.19.92-.11 1.28L15.94 99.33c-.37.46-.34 1.13.08 1.54l11.1 11.1c.42.42 1.08.45 1.54.08l13.94-11.28c.37-.3.87-.33 1.28-.11c2.64 1.45 5.45 2.62 8.39 3.48c.45.13.78.51.83.98l1.9 17.85c.06.59.56 1.03 1.15 1.03h15.7c.59 0 1.09-.45 1.15-1.03l1.89-17.83c.05-.47.38-.85.83-.98c2.95-.86 5.76-2.03 8.39-3.48c.41-.23.92-.19 1.28.11l13.94 11.28c.46.37 1.13.34 1.54-.08l11.1-11.1c.42-.42.45-1.08.08-1.54l-11.28-13.94c-.3-.37-.33-.87-.11-1.28c1.45-2.64 2.62-5.45 3.48-8.39c.13-.45.51-.78.98-.83L122.97 73c.58-.06 1.03-.56 1.03-1.15zm-60 3.43c-6.23 0-11.28-5.05-11.28-11.28S57.77 52.72 64 52.72S75.28 57.77 75.28 64S70.23 75.28 64 75.28z" fill="#82aec0"></path>
+  <path d="M80.56 49.48c3.67 4.18 5.78 9.77 5.43 15.85c-.65 11.16-9.83 20.19-21 20.68c-4.75.21-9.18-1.09-12.86-3.45c-.28-.18-.58.2-.34.44a22.412 22.412 0 0 0 17.85 6.67c10.78-.85 19.56-9.5 20.55-20.27c.77-8.36-3.06-15.87-9.23-20.33c-.29-.2-.62.15-.4.41z" fill="#2f7889"></path>
+  <path d="M43.87 65.32c-.67-13.15 7.83-22.79 20.01-22.79c.65 0 1.68 0 2.48.92c1.01 1.18 1.1 2.6 0 3.77c-.81.86-1.95.92-2.53 1c-12.3 1.59-15.18 9.35-15.83 16.77c-.03.33.06 2.35-1.71 2.56c-2.15.25-2.41-1.91-2.42-2.23z" fill="#b9e4ea"></path>
+  <path d="M25.24 65.87c-.01-22.03 15.9-40.19 38.13-41.05c.68-.03 2.45 0 3.55.99c1.01.91 1.38 2.51.79 3.82c-.95 2.11-2.85 2.07-3.36 2.09c-18.51.66-34.18 15.73-34.19 33.95c0 .29-.05.58-.15.84l-.1.25c-.76 1.98-3.52 2.09-4.43.18c-.15-.34-.24-.7-.24-1.07z" fill="#94d1e0"></path>
+</svg>`;
+
+export function $svg(markup: string, attrs: { [key: string]: string }) {
+  if (!markup.match(/^\s*<svg/)) {
+    throw new Error("Cannot call $svg with non-svg markup.");
+  }
+  return $el(markup, attrs || {});
+}

rgthree-comfy/src_web/scripts_comfy/ui/components/button.ts

@@ -0,0 +1,23 @@
+import type { ComfyApp } from "typings/comfy.js";
+
+type ComfyButtonProps = {
+  icon?: string;
+  overIcon?: string;
+  iconSize?: number;
+  content?: string | HTMLElement;
+  tooltip?: string;
+  enabled?: boolean;
+  action?: (e: Event, btn: ComfyButton) => void;
+  classList?: string;
+  visibilitySetting?: { id: string, showValue: any };
+  app?: ComfyApp;
+}
+
+export declare class ComfyButton {
+  element: HTMLElement;
+  iconElement: HTMLElement;
+  contentElement: HTMLElement;
+  constructor(props: ComfyButtonProps);
+  updateIcon(): void;
+  withPopup(popup: any, mode: "click"|"hover"): this;
+};

rgthree-comfy/src_web/scripts_comfy/ui/components/buttonGroup.ts

@@ -0,0 +1,10 @@
+import type {ComfyButton} from "scripts/ui/components/button.js";
+
+export declare class ComfyButtonGroup {
+  element: HTMLElement;
+  constructor(...buttons: Array<ComfyButton|HTMLDivElement>);
+  insert(button: ComfyButton, index: number): void;
+  append(button: ComfyButton): void;
+  remove(indexOrButton: ComfyButton|number): ComfyButton|HTMLElement|void;
+  update(): void;
+};

rgthree-comfy/src_web/scripts_comfy/ui/components/popup.ts

@@ -0,0 +1,16 @@
+type ComfyPopupProps = {
+  target: HTMLElement;
+  container?: HTMLElement;
+  classList?: string;
+  ignoreTarget?: boolean,
+  closeOnEscape?: boolean,
+  position?: "absolute" | "relative",
+  horizontal?: "left" | "right"
+}
+
+export declare class ComfyPopup extends EventTarget {
+  element: HTMLDivElement;
+  constructor(props: ComfyPopupProps, ...children: HTMLElement[]);
+  toggle(): void;
+  update(): void;
+};

rgthree-comfy/web/comfyui/any_switch.js

@@ -0,0 +1,69 @@
+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 {
+    constructor(title = RgthreeAnySwitch.title) {
+        super(title);
+        this.stabilizeBound = this.stabilize.bind(this);
+        this.nodeType = null;
+        this.addAnyInput(5);
+    }
+    onConnectionsChange(type, slotIndex, isConnected, linkInfo, ioSlot) {
+        var _a;
+        (_a = super.onConnectionsChange) === null || _a === void 0 ? void 0 : _a.call(this, type, slotIndex, isConnected, linkInfo, ioSlot);
+        this.scheduleStabilize();
+    }
+    onConnectionsChainChange() {
+        this.scheduleStabilize();
+    }
+    scheduleStabilize(ms = 64) {
+        return debounce(this.stabilizeBound, ms);
+    }
+    addAnyInput(num = 1) {
+        for (let i = 0; i < num; i++) {
+            this.addInput(`any_${String(this.inputs.length + 1).padStart(2, "0")}`, (this.nodeType || "*"));
+        }
+    }
+    stabilize() {
+        removeUnusedInputsFromEnd(this, 4);
+        this.addAnyInput();
+        let connectedType = followConnectionUntilType(this, IoDirection.INPUT, undefined, true);
+        if (!connectedType) {
+            connectedType = followConnectionUntilType(this, IoDirection.OUTPUT, undefined, true);
+        }
+        this.nodeType = (connectedType === null || connectedType === void 0 ? void 0 : connectedType.type) || "*";
+        for (const input of this.inputs) {
+            input.type = this.nodeType;
+        }
+        for (const output of this.outputs) {
+            output.type = this.nodeType;
+            output.label =
+                output.type === "RGTHREE_CONTEXT"
+                    ? "CONTEXT"
+                    : Array.isArray(this.nodeType) || this.nodeType.includes(",")
+                        ? (connectedType === null || connectedType === void 0 ? void 0 : connectedType.label) || String(this.nodeType)
+                        : String(this.nodeType);
+        }
+    }
+    static setUp(comfyClass, nodeData) {
+        RgthreeBaseServerNode.registerForOverride(comfyClass, nodeData, RgthreeAnySwitch);
+        addConnectionLayoutSupport(RgthreeAnySwitch, app, [
+            ["Left", "Right"],
+            ["Right", "Left"],
+        ]);
+    }
+}
+RgthreeAnySwitch.title = NodeTypesString.ANY_SWITCH;
+RgthreeAnySwitch.type = NodeTypesString.ANY_SWITCH;
+RgthreeAnySwitch.comfyClass = NodeTypesString.ANY_SWITCH;
+app.registerExtension({
+    name: "rgthree.AnySwitch",
+    async beforeRegisterNodeDef(nodeType, nodeData, app) {
+        if (nodeData.name === "Any Switch (rgthree)") {
+            RgthreeAnySwitch.setUp(nodeType, nodeData);
+        }
+    },
+});

rgthree-comfy/web/comfyui/base_any_input_connected_node.js

@@ -0,0 +1,206 @@
+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";
+export class BaseAnyInputConnectedNode extends RgthreeBaseVirtualNode {
+    constructor(title = BaseAnyInputConnectedNode.title) {
+        super(title);
+        this.isVirtualNode = true;
+        this.inputsPassThroughFollowing = PassThroughFollowing.NONE;
+        this.debouncerTempWidth = 0;
+        this.schedulePromise = null;
+    }
+    onConstructed() {
+        this.addInput("", "*");
+        return super.onConstructed();
+    }
+    clone() {
+        const cloned = super.clone();
+        if (!rgthree.canvasCurrentlyCopyingToClipboardWithMultipleNodes) {
+            while (cloned.inputs.length > 1) {
+                cloned.removeInput(cloned.inputs.length - 1);
+            }
+            if (cloned.inputs[0]) {
+                cloned.inputs[0].label = "";
+            }
+        }
+        return cloned;
+    }
+    scheduleStabilizeWidgets(ms = 100) {
+        if (!this.schedulePromise) {
+            this.schedulePromise = new Promise((resolve) => {
+                setTimeout(() => {
+                    this.schedulePromise = null;
+                    this.doStablization();
+                    resolve();
+                }, ms);
+            });
+        }
+        return this.schedulePromise;
+    }
+    stabilizeInputsOutputs() {
+        var _a;
+        let changed = false;
+        const hasEmptyInput = !((_a = this.inputs[this.inputs.length - 1]) === null || _a === void 0 ? void 0 : _a.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 === null || node === void 0 ? void 0 : node.title) || "";
+                if (input.name !== newName) {
+                    input.name = (node === null || node === void 0 ? void 0 : node.title) || "";
+                    changed = true;
+                }
+            }
+        }
+        return changed;
+    }
+    doStablization() {
+        if (!this.graph) {
+            return;
+        }
+        let dirty = false;
+        this._tempWidth = this.size[0];
+        dirty = this.stabilizeInputsOutputs();
+        const linkedNodes = getConnectedInputNodesAndFilterPassThroughs(this);
+        dirty = this.handleLinkedNodesStabilization(linkedNodes) || dirty;
+        if (dirty) {
+            app.graph.setDirtyCanvas(true, true);
+        }
+        this.scheduleStabilizeWidgets(500);
+    }
+    handleLinkedNodesStabilization(linkedNodes) {
+        linkedNodes;
+        throw new Error("handleLinkedNodesStabilization should be overridden.");
+    }
+    onConnectionsChainChange() {
+        this.scheduleStabilizeWidgets();
+    }
+    onConnectionsChange(type, index, connected, linkInfo, ioSlot) {
+        super.onConnectionsChange &&
+            super.onConnectionsChange(type, index, connected, linkInfo, ioSlot);
+        if (!linkInfo)
+            return;
+        const connectedNodes = getConnectedOutputNodesAndFilterPassThroughs(this);
+        for (const node of connectedNodes) {
+            if (node.onConnectionsChainChange) {
+                node.onConnectionsChainChange();
+            }
+        }
+        this.scheduleStabilizeWidgets();
+    }
+    removeInput(slot) {
+        this._tempWidth = this.size[0];
+        return super.removeInput(slot);
+    }
+    addInput(name, type, extra_info) {
+        this._tempWidth = this.size[0];
+        return super.addInput(name, type, extra_info);
+    }
+    addWidget(type, name, value, callback, options) {
+        this._tempWidth = this.size[0];
+        return super.addWidget(type, name, value, callback, options);
+    }
+    removeWidget(widgetOrSlot) {
+        this._tempWidth = this.size[0];
+        super.removeWidget(widgetOrSlot);
+    }
+    computeSize(out) {
+        var _a, _b;
+        let size = super.computeSize(out);
+        if (this._tempWidth) {
+            size[0] = this._tempWidth;
+            this.debouncerTempWidth && clearTimeout(this.debouncerTempWidth);
+            this.debouncerTempWidth = setTimeout(() => {
+                this._tempWidth = null;
+            }, 32);
+        }
+        if (this.properties["collapse_connections"]) {
+            const rows = Math.max(((_a = this.inputs) === null || _a === void 0 ? void 0 : _a.length) || 0, ((_b = this.outputs) === null || _b === void 0 ? void 0 : _b.length) || 0, 1) - 1;
+            size[1] = size[1] - rows * LiteGraph.NODE_SLOT_HEIGHT;
+        }
+        setTimeout(() => {
+            app.graph.setDirtyCanvas(true, true);
+        }, 16);
+        return size;
+    }
+    onConnectOutput(outputIndex, inputType, inputSlot, inputNode, inputIndex) {
+        let canConnect = true;
+        if (super.onConnectOutput) {
+            canConnect = super.onConnectOutput(outputIndex, inputType, inputSlot, inputNode, inputIndex);
+        }
+        if (canConnect) {
+            const nodes = getConnectedInputNodes(this);
+            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;
+    }
+    onConnectInput(inputIndex, outputType, outputSlot, outputNode, outputIndex) {
+        let canConnect = true;
+        if (super.onConnectInput) {
+            canConnect = super.onConnectInput(inputIndex, outputType, outputSlot, outputNode, outputIndex);
+        }
+        if (canConnect) {
+            const nodes = getConnectedOutputNodes(this);
+            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;
+    }
+    connectByTypeOutput(slot, sourceNode, sourceSlotType, optsIn) {
+        const lastInput = this.inputs[this.inputs.length - 1];
+        if (!(lastInput === null || lastInput === void 0 ? void 0 : lastInput.link) && (lastInput === null || lastInput === void 0 ? void 0 : lastInput.type) === "*") {
+            var sourceSlot = sourceNode.findOutputSlotByType(sourceSlotType, false, true);
+            return sourceNode.connect(sourceSlot, this, slot);
+        }
+        return super.connectByTypeOutput(slot, sourceNode, sourceSlotType, optsIn);
+    }
+    static setUp() {
+        super.setUp();
+        addConnectionLayoutSupport(this, app, [
+            ["Left", "Right"],
+            ["Right", "Left"],
+        ]);
+        addMenuItem(this, app, {
+            name: (node) => { var _a; return `${((_a = node.properties) === null || _a === void 0 ? void 0 : _a["collapse_connections"]) ? "Show" : "Collapse"} Connections`; },
+            property: "collapse_connections",
+            prepareValue: (_value, node) => { var _a; return !((_a = node.properties) === null || _a === void 0 ? void 0 : _a["collapse_connections"]); },
+            callback: (_node) => {
+                app.graph.setDirtyCanvas(true, true);
+            },
+        });
+    }
+}
+const oldLGraphNodeConnectByType = LGraphNode.prototype.connectByType;
+LGraphNode.prototype.connectByType = function connectByType(slot, sourceNode, sourceSlotType, optsIn) {
+    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);
+};

rgthree-comfy/web/comfyui/base_node.js

@@ -0,0 +1,291 @@
+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";
+export class RgthreeBaseNode extends LGraphNode {
+    constructor(title = RgthreeBaseNode.title, skipOnConstructedCall = true) {
+        super(title);
+        this.comfyClass = "__NEED_COMFY_CLASS__";
+        this.nickname = "rgthree";
+        this.isVirtualNode = false;
+        this.isDropEnabled = false;
+        this.removed = false;
+        this.configuring = false;
+        this._tempWidth = 0;
+        this.__constructed__ = false;
+        this.helpDialog = null;
+        if (title == "__NEED_CLASS_TITLE__") {
+            throw new Error("RgthreeBaseNode needs overrides.");
+        }
+        this.widgets = this.widgets || [];
+        this.properties = this.properties || {};
+        setTimeout(() => {
+            if (this.comfyClass == "__NEED_COMFY_CLASS__") {
+                throw new Error("RgthreeBaseNode needs a comfy class override.");
+            }
+            this.checkAndRunOnConstructed();
+        });
+        defineProperty(this, 'mode', {
+            get: () => {
+                return this.rgthree_mode;
+            },
+            set: (mode) => {
+                if (this.rgthree_mode != mode) {
+                    const oldMode = this.rgthree_mode;
+                    this.rgthree_mode = mode;
+                    this.onModeChange(oldMode, mode);
+                }
+            },
+        });
+    }
+    checkAndRunOnConstructed() {
+        var _a;
+        if (!this.__constructed__) {
+            this.onConstructed();
+            const [n, v] = rgthree.logger.logParts(LogLevel.DEV, `[RgthreeBaseNode] Child class did not call onConstructed for "${this.type}.`);
+            (_a = console[n]) === null || _a === void 0 ? void 0 : _a.call(console, ...v);
+        }
+        return this.__constructed__;
+    }
+    onDragOver(e) {
+        if (!this.isDropEnabled)
+            return false;
+        return importIndividualNodesInnerOnDragOver(this, e);
+    }
+    async onDragDrop(e) {
+        if (!this.isDropEnabled)
+            return false;
+        return importIndividualNodesInnerOnDragDrop(this, e);
+    }
+    onConstructed() {
+        var _a;
+        if (this.__constructed__)
+            return false;
+        this.type = (_a = this.type) !== null && _a !== void 0 ? _a : undefined;
+        this.__constructed__ = true;
+        rgthree.invokeExtensionsAsync("nodeCreated", this);
+        return this.__constructed__;
+    }
+    configure(info) {
+        this.configuring = true;
+        super.configure(info);
+        for (const w of this.widgets || []) {
+            w.last_y = w.last_y || 0;
+        }
+        this.configuring = false;
+    }
+    clone() {
+        const cloned = super.clone();
+        if (cloned.properties && !!window.structuredClone) {
+            cloned.properties = structuredClone(cloned.properties);
+        }
+        return cloned;
+    }
+    onModeChange(from, to) {
+    }
+    async handleAction(action) {
+        action;
+    }
+    removeWidget(widgetOrSlot) {
+        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);
+            }
+        }
+    }
+    defaultGetSlotMenuOptions(slot) {
+        var _a, _b;
+        const menu_info = [];
+        if ((_b = (_a = slot === null || slot === void 0 ? void 0 : slot.output) === null || _a === void 0 ? void 0 : _a.links) === null || _b === void 0 ? void 0 : _b.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;
+    }
+    onRemoved() {
+        var _a;
+        (_a = super.onRemoved) === null || _a === void 0 ? void 0 : _a.call(this);
+        this.removed = true;
+    }
+    static setUp(...args) {
+    }
+    getHelp() {
+        return "";
+    }
+    showHelp() {
+        const help = this.getHelp() || this.constructor.help;
+        if (help) {
+            this.helpDialog = new RgthreeHelpDialog(this, help).show();
+            this.helpDialog.addEventListener("close", (e) => {
+                this.helpDialog = null;
+            });
+        }
+    }
+    onKeyDown(event) {
+        KEY_EVENT_SERVICE.handleKeyDownOrUp(event);
+        if (event.key == "?" && !this.helpDialog) {
+            this.showHelp();
+        }
+    }
+    onKeyUp(event) {
+        KEY_EVENT_SERVICE.handleKeyDownOrUp(event);
+    }
+    getExtraMenuOptions(canvas, options) {
+        var _a, _b, _c, _d, _e, _f;
+        if (super.getExtraMenuOptions) {
+            (_a = super.getExtraMenuOptions) === null || _a === void 0 ? void 0 : _a.apply(this, [canvas, options]);
+        }
+        else if ((_c = (_b = this.constructor.nodeType) === null || _b === void 0 ? void 0 : _b.prototype) === null || _c === void 0 ? void 0 : _c.getExtraMenuOptions) {
+            (_f = (_e = (_d = this.constructor.nodeType) === null || _d === void 0 ? void 0 : _d.prototype) === null || _e === void 0 ? void 0 : _e.getExtraMenuOptions) === null || _f === void 0 ? void 0 : _f.apply(this, [
+                canvas,
+                options,
+            ]);
+        }
+        const help = this.getHelp() || this.constructor.help;
+        if (help) {
+            addHelpMenuItem(this, help, options);
+        }
+    }
+}
+RgthreeBaseNode.exposedActions = [];
+RgthreeBaseNode.title = "__NEED_CLASS_TITLE__";
+RgthreeBaseNode.category = "rgthree";
+RgthreeBaseNode._category = "rgthree";
+export class RgthreeBaseVirtualNode extends RgthreeBaseNode {
+    constructor(title = RgthreeBaseNode.title) {
+        super(title, false);
+        this.isVirtualNode = true;
+    }
+    static 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;
+        }
+    }
+}
+export class RgthreeBaseServerNode extends RgthreeBaseNode {
+    constructor(title) {
+        super(title, true);
+        this.isDropEnabled = true;
+        this.serialize_widgets = true;
+        this.setupFromServerNodeData();
+        this.onConstructed();
+    }
+    getWidgets() {
+        return ComfyWidgets;
+    }
+    async setupFromServerNodeData() {
+        var _a, _b, _c;
+        const nodeData = this.constructor.nodeData;
+        if (!nodeData) {
+            throw Error("No node data");
+        }
+        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: 1,
+            minHeight: 1,
+            widget: null,
+        };
+        for (const inputName in inputs) {
+            const inputData = inputs[inputName];
+            const type = inputData[0];
+            if ((_a = inputData[1]) === null || _a === void 0 ? void 0 : _a.forceInput) {
+                this.addInput(inputName, type);
+            }
+            else {
+                let widgetCreated = true;
+                if (Array.isArray(type)) {
+                    Object.assign(config, WIDGETS.COMBO(this, inputName, inputData, app) || {});
+                }
+                else if (`${type}:${inputName}` in WIDGETS) {
+                    Object.assign(config, WIDGETS[`${type}:${inputName}`](this, inputName, inputData, app) || {});
+                }
+                else if (type in WIDGETS) {
+                    Object.assign(config, WIDGETS[type](this, inputName, inputData, app) || {});
+                }
+                else {
+                    this.addInput(inputName, type);
+                    widgetCreated = false;
+                }
+                if (widgetCreated && ((_b = inputData[1]) === null || _b === void 0 ? void 0 : _b.forceInput) && (config === null || config === void 0 ? void 0 : config.widget)) {
+                    if (!config.widget.options)
+                        config.widget.options = {};
+                    config.widget.options.forceInput = inputData[1].forceInput;
+                }
+                if (widgetCreated && ((_c = inputData[1]) === null || _c === void 0 ? void 0 : _c.defaultInput) && (config === null || config === void 0 ? void 0 : 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 registerForOverride(comfyClass, nodeData, rgthreeClass) {
+        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);
+        if (!rgthreeClass.__registeredForOverride__) {
+            rgthreeClass.__registeredForOverride__ = true;
+            rgthreeClass.nodeType = comfyClass;
+            rgthreeClass.nodeData = nodeData;
+            rgthreeClass.onRegisteredForOverride(comfyClass, rgthreeClass);
+        }
+    }
+    static onRegisteredForOverride(comfyClass, rgthreeClass) {
+    }
+}
+RgthreeBaseServerNode.nodeData = null;
+RgthreeBaseServerNode.nodeType = null;
+RgthreeBaseServerNode.__registeredForOverride__ = false;
+const OVERRIDDEN_SERVER_NODES = new Map();
+const oldregisterNodeType = LiteGraph.registerNodeType;
+LiteGraph.registerNodeType = async function (nodeId, baseClass) {
+    var _a;
+    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.`);
+        (_a = console[n]) === null || _a === void 0 ? void 0 : _a.call(console, ...v);
+    }
+    return oldregisterNodeType.call(LiteGraph, nodeId, clazz);
+};

rgthree-comfy/web/comfyui/base_node_collector.js

@@ -0,0 +1,51 @@
+import { rgthree } from "./rgthree.js";
+import { BaseAnyInputConnectedNode } from "./base_any_input_connected_node.js";
+import { PassThroughFollowing, getConnectedInputNodes, getConnectedInputNodesAndFilterPassThroughs, shouldPassThrough, } from "./utils.js";
+export class BaseCollectorNode extends BaseAnyInputConnectedNode {
+    constructor(title) {
+        super(title);
+        this.inputsPassThroughFollowing = PassThroughFollowing.REROUTE_ONLY;
+        this.logger = rgthree.newLogSession("[BaseCollectorNode]");
+    }
+    clone() {
+        const cloned = super.clone();
+        return cloned;
+    }
+    handleLinkedNodesStabilization(linkedNodes) {
+        return false;
+    }
+    onConnectInput(inputIndex, outputType, outputSlot, outputNode, outputIndex) {
+        var _a, _b, _c, _d;
+        let canConnect = super.onConnectInput(inputIndex, outputType, outputSlot, outputNode, outputIndex);
+        if (canConnect) {
+            const allConnectedNodes = getConnectedInputNodes(this);
+            const nodesAlreadyInSlot = getConnectedInputNodes(this, undefined, inputIndex);
+            if (allConnectedNodes.includes(outputNode)) {
+                const [n, v] = this.logger.debugParts(`${outputNode.title} is already connected to ${this.title}.`);
+                (_a = console[n]) === null || _a === void 0 ? void 0 : _a.call(console, ...v);
+                if (nodesAlreadyInSlot.includes(outputNode)) {
+                    const [n, v] = this.logger.debugParts(`... but letting it slide since it's for the same slot.`);
+                    (_b = console[n]) === null || _b === void 0 ? void 0 : _b.call(console, ...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)) {
+                    const [n, v] = this.logger.debugParts(`${connectedNode.title} is already connected to ${this.title}.`);
+                    (_c = console[n]) === null || _c === void 0 ? void 0 : _c.call(console, ...v);
+                    if (nodesAlreadyInSlot.includes(connectedNode)) {
+                        const [n, v] = this.logger.debugParts(`... but letting it slide since it's for the same slot.`);
+                        (_d = console[n]) === null || _d === void 0 ? void 0 : _d.call(console, ...v);
+                    }
+                    else {
+                        canConnect = false;
+                    }
+                }
+            }
+        }
+        return canConnect;
+    }
+}

rgthree-comfy/web/comfyui/base_node_mode_changer.js

@@ -0,0 +1,100 @@
+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 {
+    constructor(title) {
+        super(title);
+        this.inputsPassThroughFollowing = PassThroughFollowing.ALL;
+        this.isVirtualNode = true;
+        this.modeOn = -1;
+        this.modeOff = -1;
+        this.properties["toggleRestriction"] = "default";
+    }
+    onConstructed() {
+        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();
+    }
+    configure(info) {
+        var _a;
+        if ((_a = info.outputs) === null || _a === void 0 ? void 0 : _a.length) {
+            info.outputs.length = 1;
+        }
+        super.configure(info);
+    }
+    handleLinkedNodesStabilization(linkedNodes) {
+        let changed = false;
+        for (const [index, node] of linkedNodes.entries()) {
+            let widget = this.widgets && this.widgets[index];
+            if (!widget) {
+                this._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;
+    }
+    setWidget(widget, linkedNode, forceValue) {
+        let changed = false;
+        const value = forceValue == null ? linkedNode.mode === this.modeOn : forceValue;
+        let name = `Enable ${linkedNode.title}`;
+        if (widget.name !== name) {
+            widget.name = `Enable ${linkedNode.title}`;
+            widget.options = { on: "yes", off: "no" };
+            widget.value = value;
+            widget.doModeChange = (forceValue, skipOtherNodeCheck) => {
+                var _a, _b, _c;
+                let newValue = forceValue == null ? linkedNode.mode === this.modeOff : forceValue;
+                if (skipOtherNodeCheck !== true) {
+                    if (newValue && ((_b = (_a = this.properties) === null || _a === void 0 ? void 0 : _a["toggleRestriction"]) === null || _b === void 0 ? void 0 : _b.includes(" one"))) {
+                        for (const widget of this.widgets) {
+                            widget.doModeChange(false, true);
+                        }
+                    }
+                    else if (!newValue && ((_c = this.properties) === null || _c === void 0 ? void 0 : _c["toggleRestriction"]) === "always one") {
+                        newValue = this.widgets.every((w) => !w.value || w === widget);
+                    }
+                }
+                linkedNode.mode = (newValue ? this.modeOn : this.modeOff);
+                widget.value = newValue;
+            };
+            widget.callback = () => {
+                widget.doModeChange();
+            };
+            changed = true;
+        }
+        if (forceValue != null) {
+            const newMode = (forceValue ? this.modeOn : this.modeOff);
+            if (linkedNode.mode !== newMode) {
+                linkedNode.mode = newMode;
+                changed = true;
+            }
+        }
+        return changed;
+    }
+    forceWidgetOff(widget, skipOtherNodeCheck) {
+        widget.doModeChange(false, skipOtherNodeCheck);
+    }
+    forceWidgetOn(widget, skipOtherNodeCheck) {
+        widget.doModeChange(true, skipOtherNodeCheck);
+    }
+    forceWidgetToggle(widget, skipOtherNodeCheck) {
+        widget.doModeChange(!widget.value, skipOtherNodeCheck);
+    }
+}
+BaseNodeModeChanger.collapsible = false;
+BaseNodeModeChanger["@toggleRestriction"] = {
+    type: "combo",
+    values: ["default", "max one", "always one"],
+};

rgthree-comfy/web/comfyui/base_power_prompt.js

@@ -0,0 +1,251 @@
+import { api } from "../../scripts/api.js";
+import { wait } from "../../rgthree/common/shared_utils.js";
+import { rgthree } from "./rgthree.js";
+export class PowerPrompt {
+    constructor(node, nodeData) {
+        this.combos = {};
+        this.combosValues = {};
+        this.configuring = false;
+        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].inputEl;
+        this.addAndHandleKeyboardLoraEditWeight();
+        this.patchNodeRefresh();
+        const oldConfigure = this.node.configure;
+        this.node.configure = (info) => {
+            this.configuring = true;
+            oldConfigure === null || oldConfigure === void 0 ? void 0 : oldConfigure.apply(this.node, [info]);
+            this.configuring = false;
+        };
+        const oldOnConnectionsChange = this.node.onConnectionsChange;
+        this.node.onConnectionsChange = (type, slotIndex, isConnected, link_info, _ioSlot) => {
+            oldOnConnectionsChange === null || oldOnConnectionsChange === void 0 ? void 0 : 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, outputType, outputSlot, outputNode, outputIndex) => {
+            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, inputType, inputSlot, inputNode, inputIndex) => {
+            let canConnect = true;
+            if (oldOnConnectOutput) {
+                canConnect = oldOnConnectOutput === null || oldOnConnectOutput === void 0 ? void 0 : 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, value, prevValue) => {
+            onPropertyChanged && onPropertyChanged.call(this, property, value, prevValue);
+            if (property === "combos_filter") {
+                this.refreshCombos(this.nodeData);
+            }
+        };
+        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);
+    }
+    onNodeConnectionsChange(_type, _slotIndex, _isConnected, _linkInfo, _ioSlot) {
+        this.stabilizeInputsOutputs();
+    }
+    stabilizeInputsOutputs() {
+        if (this.configuring || rgthree.loadingApiJson) {
+            return;
+        }
+        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.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")) {
+                output.color_off = "#7F7";
+                output.color_on = "#7F7";
+            }
+            if (output.disabled) {
+            }
+        }
+    }
+    onFreshNodeDefs(event) {
+        this.refreshCombos(event.detail[this.nodeData.name]);
+    }
+    shouldRemoveServerWidget(widget) {
+        var _a, _b, _c, _d;
+        return (((_a = widget.name) === null || _a === void 0 ? void 0 : _a.startsWith("insert_")) ||
+            ((_b = widget.name) === null || _b === void 0 ? void 0 : _b.startsWith("target_")) ||
+            ((_c = widget.name) === null || _c === void 0 ? void 0 : _c.startsWith("crop_")) ||
+            ((_d = widget.name) === null || _d === void 0 ? void 0 : _d.startsWith("values_")));
+    }
+    refreshCombos(nodeData) {
+        var _a, _b, _c;
+        this.nodeData = nodeData;
+        let filter = null;
+        if ((_a = this.node.properties["combos_filter"]) === null || _a === void 0 ? void 0 : _a.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;
+            }
+        }
+        let data = Object.assign({}, ((_b = this.nodeData.input) === null || _b === void 0 ? void 0 : _b.optional) || {}, ((_c = this.nodeData.input) === null || _c === void 0 ? void 0 : _c.hidden) || {});
+        for (const [key, value] of Object.entries(data)) {
+            if (Array.isArray(value[0])) {
+                let values = value[0];
+                if (key.startsWith("insert")) {
+                    values = filter
+                        ? values.filter((v, i) => i < 1 || (i == 1 && v.match(/^disable\s[a-z]/i)) || (filter === null || filter === void 0 ? void 0 : 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)) {
+                                    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,
+                            });
+                            this.combos[key].oldComputeSize = this.combos[key].computeSize;
+                            let node = this.node;
+                            this.combos[key].computeSize = function (width) {
+                                var _a, _b;
+                                const size = ((_b = (_a = this).oldComputeSize) === null || _b === void 0 ? void 0 : _b.call(_a, 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) {
+        if (!this.promptEl) {
+            console.error("Asked to insert text, but no textbox found.");
+            return;
+        }
+        let prompt = this.promptEl.value;
+        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;
+    }
+    addAndHandleKeyboardLoraEditWeight() {
+        this.promptEl.addEventListener("keydown", (event) => {
+            var _a, _b;
+            if (!(event.key === "ArrowUp" || event.key === "ArrowDown"))
+                return;
+            if (!event.ctrlKey && !event.metaKey)
+                return;
+            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);
+            if (!selectedText) {
+                const stopOn = "<>()\r\n\t";
+                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);
+            }
+            if (!selectedText.startsWith("<lora:") || !selectedText.endsWith(">")) {
+                return;
+            }
+            let weight = (_b = Number((_a = selectedText.match(/:(-?\d*(\.\d*)?)>$/)) === null || _a === void 0 ? void 0 : _a[1])) !== null && _b !== void 0 ? _b : 1;
+            weight += event.key === "ArrowUp" ? delta : -delta;
+            const updatedText = selectedText.replace(/(:-?\d*(\.\d*)?)?>$/, `:${weight.toFixed(2)}>`);
+            this.promptEl.setRangeText(updatedText, start, end, "select");
+            event.preventDefault();
+            event.stopPropagation();
+        });
+    }
+    patchNodeRefresh() {
+        this.boundOnFreshNodeDefs = this.onFreshNodeDefs.bind(this);
+        api.addEventListener("fresh-node-defs", this.boundOnFreshNodeDefs);
+        const oldNodeRemoved = this.node.onRemoved;
+        this.node.onRemoved = () => {
+            oldNodeRemoved === null || oldNodeRemoved === void 0 ? void 0 : oldNodeRemoved.call(this.node);
+            api.removeEventListener("fresh-node-defs", this.boundOnFreshNodeDefs);
+        };
+    }
+}

rgthree-comfy/web/comfyui/bookmark.js

@@ -0,0 +1,110 @@
+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 { getClosestOrSelf, queryOne } from "../../rgthree/common/utils_dom.js";
+export class Bookmark extends RgthreeBaseVirtualNode {
+    get _collapsed_width() {
+        return this.___collapsed_width;
+    }
+    set _collapsed_width(width) {
+        const canvas = app.canvas;
+        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;
+    }
+    constructor(title = Bookmark.title) {
+        super(title);
+        this.comfyClass = NodeTypesString.BOOKMARK;
+        this.___collapsed_width = 0;
+        this.isVirtualNode = true;
+        this.serialize_widgets = true;
+        const nextShortcutChar = getNextShortcut();
+        this.addWidget("text", "shortcut_key", nextShortcutChar, (value, ...args) => {
+            value = value.trim()[0] || "1";
+        }, {
+            y: 8,
+        });
+        this.addWidget("number", "zoom", 1, (value) => { }, {
+            y: 8 + LiteGraph.NODE_WIDGET_HEIGHT + 4,
+            max: 2,
+            min: 0.5,
+            precision: 2,
+        });
+        this.keypressBound = this.onKeypress.bind(this);
+        this.title = "🔖";
+        this.onConstructed();
+    }
+    get shortcutKey() {
+        var _a, _b, _c;
+        return (_c = (_b = (_a = this.widgets[0]) === null || _a === void 0 ? void 0 : _a.value) === null || _b === void 0 ? void 0 : _b.toLocaleLowerCase()) !== null && _c !== void 0 ? _c : "";
+    }
+    onAdded(graph) {
+        KEY_EVENT_SERVICE.addEventListener("keydown", this.keypressBound);
+    }
+    onRemoved() {
+        KEY_EVENT_SERVICE.removeEventListener("keydown", this.keypressBound);
+    }
+    onKeypress(event) {
+        const originalEvent = event.detail.originalEvent;
+        const target = originalEvent.target;
+        if (getClosestOrSelf(target, 'input,textarea,[contenteditable="true"]')) {
+            return;
+        }
+        if (KEY_EVENT_SERVICE.areOnlyKeysDown(this.widgets[0].value, true)) {
+            this.canvasToBookmark();
+            originalEvent.preventDefault();
+            originalEvent.stopPropagation();
+        }
+    }
+    onMouseDown(event, pos, graphCanvas) {
+        var _a;
+        const input = queryOne(".graphdialog > input.value");
+        if (input && input.value === ((_a = this.widgets[0]) === null || _a === void 0 ? void 0 : _a.value)) {
+            input.addEventListener("keydown", (e) => {
+                KEY_EVENT_SERVICE.handleKeyDownOrUp(e);
+                e.preventDefault();
+                e.stopPropagation();
+                input.value = Object.keys(KEY_EVENT_SERVICE.downKeys).join(" + ");
+            });
+        }
+    }
+    canvasToBookmark() {
+        var _a, _b;
+        const canvas = app.canvas;
+        if ((_a = canvas === null || canvas === void 0 ? void 0 : canvas.ds) === null || _a === void 0 ? void 0 : _a.offset) {
+            canvas.ds.offset[0] = -this.pos[0] + 16;
+            canvas.ds.offset[1] = -this.pos[1] + 40;
+        }
+        if (((_b = canvas === null || canvas === void 0 ? void 0 : canvas.ds) === null || _b === void 0 ? void 0 : _b.scale) != null) {
+            canvas.ds.scale = Number(this.widgets[1].value || 1);
+        }
+        canvas.setDirty(true, true);
+    }
+}
+Bookmark.type = NodeTypesString.BOOKMARK;
+Bookmark.title = NodeTypesString.BOOKMARK;
+Bookmark.slot_start_y = -20;
+app.registerExtension({
+    name: "rgthree.Bookmark",
+    registerCustomNodes() {
+        Bookmark.setUp();
+    },
+});
+function isBookmark(node) {
+    return node.type === NodeTypesString.BOOKMARK;
+}
+function getExistingShortcuts() {
+    const graph = 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() {
+    var _a;
+    const existingShortcuts = getExistingShortcuts();
+    return (_a = SHORTCUT_DEFAULTS.find((char) => !existingShortcuts.has(char))) !== null && _a !== void 0 ? _a : "1";
+}

rgthree-comfy/web/comfyui/bypasser.js

@@ -0,0 +1,45 @@
+import { app } from "../../scripts/app.js";
+import { BaseNodeModeChanger } from "./base_node_mode_changer.js";
+import { NodeTypesString } from "./constants.js";
+const MODE_BYPASS = 4;
+const MODE_ALWAYS = 0;
+class BypasserNode extends BaseNodeModeChanger {
+    constructor(title = BypasserNode.title) {
+        super(title);
+        this.comfyClass = NodeTypesString.FAST_BYPASSER;
+        this.modeOn = MODE_ALWAYS;
+        this.modeOff = MODE_BYPASS;
+        this.onConstructed();
+    }
+    async handleAction(action) {
+        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);
+            }
+        }
+    }
+}
+BypasserNode.exposedActions = ["Bypass all", "Enable all", "Toggle all"];
+BypasserNode.type = NodeTypesString.FAST_BYPASSER;
+BypasserNode.title = NodeTypesString.FAST_BYPASSER;
+app.registerExtension({
+    name: "rgthree.Bypasser",
+    registerCustomNodes() {
+        BypasserNode.setUp();
+    },
+    loadedGraphNode(node) {
+        if (node.type == BypasserNode.title) {
+            node._tempWidth = node.size[0];
+        }
+    },
+});

rgthree-comfy/web/comfyui/comfy_ui_bar.js

@@ -0,0 +1,100 @@
+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 } 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 = null;
+function addRgthreeTopBarButtons() {
+    var _a, _b, _c;
+    if (!CONFIG_SERVICE.getFeatureValue("comfy_top_bar_menu.enabled")) {
+        if ((_a = rgthreeButtonGroup === null || rgthreeButtonGroup === void 0 ? void 0 : rgthreeButtonGroup.element) === null || _a === void 0 ? void 0 : _a.parentElement) {
+            rgthreeButtonGroup.element.parentElement.removeChild(rgthreeButtonGroup.element);
+        }
+        return;
+    }
+    else if (rgthreeButtonGroup) {
+        (_b = app.menu) === null || _b === void 0 ? void 0 : _b.settingsGroup.element.before(rgthreeButtonGroup.element);
+        return;
+    }
+    const buttons = [];
+    const rgthreeButton = new ComfyButton({
+        icon: "rgthree",
+        tooltip: "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);
+    (_c = app.menu) === null || _c === void 0 ? void 0 : _c.settingsGroup.element.before(rgthreeButtonGroup.element);
+}
+app.registerExtension({
+    name: "rgthree.TopMenu",
+    async setup() {
+        addRgthreeTopBarButtons();
+        CONFIG_SERVICE.addEventListener("config-change", ((e) => {
+            var _a, _b;
+            if ((_b = (_a = e.detail) === null || _a === void 0 ? void 0 : _a.key) === null || _b === void 0 ? void 0 : _b.includes("features.comfy_top_bar_menu")) {
+                addRgthreeTopBarButtons();
+            }
+        }));
+    },
+});

rgthree-comfy/web/comfyui/config.js

@@ -0,0 +1,368 @@
+import { app } from "../../scripts/app.js";
+import { RgthreeDialog } 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 { rgthree } from "./rgthree.js";
+import { SERVICE as CONFIG_SERVICE } from "./services/config_service.js";
+var ConfigType;
+(function (ConfigType) {
+    ConfigType[ConfigType["UNKNOWN"] = 0] = "UNKNOWN";
+    ConfigType[ConfigType["BOOLEAN"] = 1] = "BOOLEAN";
+    ConfigType[ConfigType["STRING"] = 2] = "STRING";
+    ConfigType[ConfigType["NUMBER"] = 3] = "NUMBER";
+    ConfigType[ConfigType["ARRAY"] = 4] = "ARRAY";
+})(ConfigType || (ConfigType = {}));
+var ConfigInputType;
+(function (ConfigInputType) {
+    ConfigInputType[ConfigInputType["UNKNOWN"] = 0] = "UNKNOWN";
+    ConfigInputType[ConfigInputType["CHECKLIST"] = 1] = "CHECKLIST";
+})(ConfigInputType || (ConfigInputType = {}));
+const TYPE_TO_STRING = {
+    [ConfigType.UNKNOWN]: "unknown",
+    [ConfigType.BOOLEAN]: "boolean",
+    [ConfigType.STRING]: "string",
+    [ConfigType.NUMBER]: "number",
+    [ConfigType.ARRAY]: "array",
+};
+const CONFIGURABLE = {
+    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) {
+                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.",
+        },
+    ],
+};
+function fieldrow(item) {
+    var _a;
+    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 ((_a = item.options) === null || _a === void 0 ? void 0 : _a.length) {
+        if (item.inputType === ConfigInputType.CHECKLIST) {
+            const initialValueList = initialValue || [];
+            input = $el(`fieldset.rgthree-checklist-group[id="${item.key}"]`, {
+                parent: container,
+                children: item.options.map((o) => {
+                    const label = o.label || String(o);
+                    const value = o.value || o;
+                    const id = `${item.key}_${value}`;
+                    return $el(`span.rgthree-checklist-item`, {
+                        children: [
+                            $el(`input[type="checkbox"][value="${value}"]`, {
+                                id,
+                                checked: initialValueList.includes(value),
+                            }),
+                            $el(`label`, {
+                                for: id,
+                                text: label,
+                            })
+                        ]
+                    });
+                }),
+            });
+        }
+        else {
+            input = $el(`select[id="${item.key}"]`, {
+                parent: container,
+                children: item.options.map((o) => {
+                    const label = o.label || String(o);
+                    const value = o.value || o;
+                    const valueSerialized = JSON.stringify({ value: value });
+                    return $el(`option[value="${valueSerialized}"]`, {
+                        text: label,
+                        selected: valueSerialized === JSON.stringify({ value: initialValue }),
+                    });
+                }),
+            });
+        }
+    }
+    else if (item.type === ConfigType.BOOLEAN) {
+        container.classList.toggle("-checked", !!initialValue);
+        input = $el(`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;
+}
+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].disabled =
+                !Object.keys(changed).length;
+        });
+        content.addEventListener("change", (e) => {
+            const changed = this.getChangedFormData();
+            $$(".save-button", this.element)[0].disabled =
+                !Object.keys(changed).length;
+        });
+        const dialogOptions = {
+            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) => {
+                        var _a, _b;
+                        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)) {
+                                (_b = (_a = Object.values(CONFIGURABLE)
+                                    .flat()
+                                    .find((f) => f.key === key)) === null || _a === void 0 ? void 0 : _a.onSave) === null || _b === void 0 ? void 0 : _b.call(_a, changed[key]);
+                            }
+                            this.close();
+                            rgthree.showMessage({
+                                id: "config-success",
+                                message: `${checkmark} Successfully saved rgthree-comfy settings!`,
+                                timeout: 4000,
+                            });
+                            $$(".save-button", this.element)[0].disabled = true;
+                        }
+                        else {
+                            alert("There was an error saving rgthree-comfy configuration.");
+                        }
+                    },
+                },
+            ],
+        };
+        super(dialogOptions);
+    }
+    static buildFieldset(datas, label) {
+        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, 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];
+            let currentValue = null;
+            if (type === String(ConfigType.BOOLEAN)) {
+                currentValue = currentValueEl.checked;
+                el.classList.toggle("-checked", currentValue);
+            }
+            else {
+                currentValue = currentValueEl === null || currentValueEl === void 0 ? void 0 : currentValueEl.value;
+                if (currentValueEl.nodeName === "SELECT") {
+                    currentValue = JSON.parse(currentValue).value;
+                }
+                else if (currentValueEl.classList.contains('rgthree-checklist-group')) {
+                    currentValue = [];
+                    for (const check of $$('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: () => {
+        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) => {
+                                new RgthreeConfigDialog().show();
+                            },
+                        },
+                    }),
+                }),
+            ],
+        });
+    },
+});

rgthree-comfy/web/comfyui/constants.js

@@ -0,0 +1,53 @@
+import { SERVICE as CONFIG_SERVICE } from "./services/config_service.js";
+export function addRgthree(str) {
+    return str + " (rgthree)";
+}
+export function stripRgthree(str) {
+    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"),
+};
+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/web/comfyui/context.js

@@ -0,0 +1,323 @@
+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 { debounce, wait } from "../../rgthree/common/shared_utils.js";
+import { removeUnusedInputsFromEnd } from "./utils_inputs_outputs.js";
+import { NodeTypesString } from "./constants.js";
+function findMatchingIndexByTypeOrName(otherNode, otherSlot, ctxSlots) {
+    const otherNodeType = (otherNode.type || "").toUpperCase();
+    const otherNodeName = (otherNode.title || "").toUpperCase();
+    let otherSlotType = otherSlot.type;
+    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;
+            if (Array.isArray(ctxSlotType) || ctxSlotType.includes(",")) {
+                ctxSlotType = "COMBO";
+            }
+            if (ctxSlotType !== otherSlotType) {
+                return false;
+            }
+            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 ((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;
+}
+export class BaseContextNode extends RgthreeBaseServerNode {
+    constructor(title) {
+        super(title);
+        this.___collapsed_width = 0;
+    }
+    get _collapsed_width() {
+        return this.___collapsed_width;
+    }
+    set _collapsed_width(width) {
+        const canvas = app.canvas;
+        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;
+    }
+    connectByType(slot, sourceNode, sourceSlotType, optsIn) {
+        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;
+            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;
+    }
+    connectByTypeOutput(slot, sourceNode, sourceSlotType, optsIn) {
+        var _a;
+        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;
+            for (const [index, output] of (sourceNode.outputs || []).entries()) {
+                if (((_a = output.links) === null || _a === void 0 ? void 0 : _a.length) && !ctrlKey) {
+                    continue;
+                }
+                const thisInputSlot = findMatchingIndexByTypeOrName(sourceNode, output, this.inputs);
+                if (thisInputSlot > -1) {
+                    sourceNode.connect(index, this, thisInputSlot);
+                }
+            }
+        }
+        return null;
+    }
+    static setUp(comfyClass, nodeData, ctxClass) {
+        RgthreeBaseServerNode.registerForOverride(comfyClass, nodeData, ctxClass);
+        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 onRegisteredForOverride(comfyClass, ctxClass) {
+        addConnectionLayoutSupport(ctxClass, app, [
+            ["Left", "Right"],
+            ["Right", "Left"],
+        ]);
+        setTimeout(() => {
+            ctxClass.category = comfyClass.category;
+        });
+    }
+}
+class ContextNode extends BaseContextNode {
+    constructor(title = ContextNode.title) {
+        super(title);
+    }
+    static setUp(comfyClass, nodeData) {
+        BaseContextNode.setUp(comfyClass, nodeData, ContextNode);
+    }
+    static onRegisteredForOverride(comfyClass, ctxClass) {
+        BaseContextNode.onRegisteredForOverride(comfyClass, ctxClass);
+        addMenuItem(ContextNode, app, {
+            name: "Convert To Context Big",
+            callback: (node) => {
+                replaceNode(node, ContextBigNode.type);
+            },
+        });
+    }
+}
+ContextNode.title = NodeTypesString.CONTEXT;
+ContextNode.type = NodeTypesString.CONTEXT;
+ContextNode.comfyClass = NodeTypesString.CONTEXT;
+class ContextBigNode extends BaseContextNode {
+    constructor(title = ContextBigNode.title) {
+        super(title);
+    }
+    static setUp(comfyClass, nodeData) {
+        BaseContextNode.setUp(comfyClass, nodeData, ContextBigNode);
+    }
+    static onRegisteredForOverride(comfyClass, ctxClass) {
+        BaseContextNode.onRegisteredForOverride(comfyClass, ctxClass);
+        addMenuItem(ContextBigNode, app, {
+            name: "Convert To Context (Original)",
+            callback: (node) => {
+                replaceNode(node, ContextNode.type);
+            },
+        });
+    }
+}
+ContextBigNode.title = NodeTypesString.CONTEXT_BIG;
+ContextBigNode.type = NodeTypesString.CONTEXT_BIG;
+ContextBigNode.comfyClass = NodeTypesString.CONTEXT_BIG;
+class BaseContextMultiCtxInputNode extends BaseContextNode {
+    constructor(title) {
+        super(title);
+        this.stabilizeBound = this.stabilize.bind(this);
+        this.addContextInput(5);
+    }
+    addContextInput(num = 1) {
+        for (let i = 0; i < num; i++) {
+            this.addInput(`ctx_${String(this.inputs.length + 1).padStart(2, "0")}`, "RGTHREE_CONTEXT");
+        }
+    }
+    onConnectionsChange(type, slotIndex, isConnected, link, ioSlot) {
+        var _a;
+        (_a = super.onConnectionsChange) === null || _a === void 0 ? void 0 : _a.apply(this, [...arguments]);
+        if (type === LiteGraph.INPUT) {
+            this.scheduleStabilize();
+        }
+    }
+    scheduleStabilize(ms = 64) {
+        return debounce(this.stabilizeBound, 64);
+    }
+    stabilize() {
+        removeUnusedInputsFromEnd(this, 4);
+        this.addContextInput();
+    }
+}
+class ContextSwitchNode extends BaseContextMultiCtxInputNode {
+    constructor(title = ContextSwitchNode.title) {
+        super(title);
+    }
+    static setUp(comfyClass, nodeData) {
+        BaseContextNode.setUp(comfyClass, nodeData, ContextSwitchNode);
+    }
+    static onRegisteredForOverride(comfyClass, ctxClass) {
+        BaseContextNode.onRegisteredForOverride(comfyClass, ctxClass);
+        addMenuItem(ContextSwitchNode, app, {
+            name: "Convert To Context Switch Big",
+            callback: (node) => {
+                replaceNode(node, ContextSwitchBigNode.type);
+            },
+        });
+    }
+}
+ContextSwitchNode.title = NodeTypesString.CONTEXT_SWITCH;
+ContextSwitchNode.type = NodeTypesString.CONTEXT_SWITCH;
+ContextSwitchNode.comfyClass = NodeTypesString.CONTEXT_SWITCH;
+class ContextSwitchBigNode extends BaseContextMultiCtxInputNode {
+    constructor(title = ContextSwitchBigNode.title) {
+        super(title);
+    }
+    static setUp(comfyClass, nodeData) {
+        BaseContextNode.setUp(comfyClass, nodeData, ContextSwitchBigNode);
+    }
+    static onRegisteredForOverride(comfyClass, ctxClass) {
+        BaseContextNode.onRegisteredForOverride(comfyClass, ctxClass);
+        addMenuItem(ContextSwitchBigNode, app, {
+            name: "Convert To Context Switch",
+            callback: (node) => {
+                replaceNode(node, ContextSwitchNode.type);
+            },
+        });
+    }
+}
+ContextSwitchBigNode.title = NodeTypesString.CONTEXT_SWITCH_BIG;
+ContextSwitchBigNode.type = NodeTypesString.CONTEXT_SWITCH_BIG;
+ContextSwitchBigNode.comfyClass = NodeTypesString.CONTEXT_SWITCH_BIG;
+class ContextMergeNode extends BaseContextMultiCtxInputNode {
+    constructor(title = ContextMergeNode.title) {
+        super(title);
+    }
+    static setUp(comfyClass, nodeData) {
+        BaseContextNode.setUp(comfyClass, nodeData, ContextMergeNode);
+    }
+    static onRegisteredForOverride(comfyClass, ctxClass) {
+        BaseContextNode.onRegisteredForOverride(comfyClass, ctxClass);
+        addMenuItem(ContextMergeNode, app, {
+            name: "Convert To Context Merge Big",
+            callback: (node) => {
+                replaceNode(node, ContextMergeBigNode.type);
+            },
+        });
+    }
+}
+ContextMergeNode.title = NodeTypesString.CONTEXT_MERGE;
+ContextMergeNode.type = NodeTypesString.CONTEXT_MERGE;
+ContextMergeNode.comfyClass = NodeTypesString.CONTEXT_MERGE;
+class ContextMergeBigNode extends BaseContextMultiCtxInputNode {
+    constructor(title = ContextMergeBigNode.title) {
+        super(title);
+    }
+    static setUp(comfyClass, nodeData) {
+        BaseContextNode.setUp(comfyClass, nodeData, ContextMergeBigNode);
+    }
+    static onRegisteredForOverride(comfyClass, ctxClass) {
+        BaseContextNode.onRegisteredForOverride(comfyClass, ctxClass);
+        addMenuItem(ContextMergeBigNode, app, {
+            name: "Convert To Context Switch",
+            callback: (node) => {
+                replaceNode(node, ContextMergeNode.type);
+            },
+        });
+    }
+}
+ContextMergeBigNode.title = NodeTypesString.CONTEXT_MERGE_BIG;
+ContextMergeBigNode.type = NodeTypesString.CONTEXT_MERGE_BIG;
+ContextMergeBigNode.comfyClass = NodeTypesString.CONTEXT_MERGE_BIG;
+const contextNodes = [
+    ContextNode,
+    ContextBigNode,
+    ContextSwitchNode,
+    ContextSwitchBigNode,
+    ContextMergeNode,
+    ContextMergeBigNode,
+];
+const contextTypeToServerDef = {};
+function fixBadConfigs(node) {
+    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, nodeData) {
+        for (const ctxClass of contextNodes) {
+            if (nodeData.name === ctxClass.type) {
+                contextTypeToServerDef[ctxClass.type] = nodeData;
+                ctxClass.setUp(nodeType, nodeData);
+                break;
+            }
+        }
+    },
+    async nodeCreated(node) {
+        const type = node.type || node.constructor.type;
+        const serverDef = type && contextTypeToServerDef[type];
+        if (serverDef) {
+            fixBadConfigs(node);
+            matchLocalSlotsToServer(node, IoDirection.OUTPUT, serverDef);
+            if (!type.includes("Switch") && !type.includes("Merge")) {
+                matchLocalSlotsToServer(node, IoDirection.INPUT, serverDef);
+            }
+        }
+    },
+    async loadedGraphNode(node) {
+        const type = node.type || node.constructor.type;
+        const serverDef = type && contextTypeToServerDef[type];
+        if (serverDef) {
+            fixBadConfigs(node);
+            matchLocalSlotsToServer(node, IoDirection.OUTPUT, serverDef);
+            if (!type.includes("Switch") && !type.includes("Merge")) {
+                matchLocalSlotsToServer(node, IoDirection.INPUT, serverDef);
+            }
+        }
+    },
+});

rgthree-comfy/web/comfyui/dialog_info.js

@@ -0,0 +1,280 @@
+import { RgthreeDialog } 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 { 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";
+class RgthreeInfoDialog extends RgthreeDialog {
+    constructor(file, type = "lora") {
+        const dialogOptions = {
+            class: "rgthree-info-dialog",
+            title: `<h2>Loading...</h2>`,
+            content: "<center>Loading..</center>",
+            onBeforeClose: () => {
+                return true;
+            },
+        };
+        super(dialogOptions);
+        this.modifiedModelData = false;
+        this.modelInfo = null;
+        this.init(file);
+    }
+    async init(file) {
+        var _a, _b;
+        const cssPromise = injectCss("rgthree/common/css/dialog_model_info.css");
+        this.modelInfo = await this.getModelInfo(file);
+        await cssPromise;
+        this.setContent(this.getInfoContent());
+        this.setTitle(((_a = this.modelInfo) === null || _a === void 0 ? void 0 : _a["name"]) || ((_b = this.modelInfo) === null || _b === void 0 ? void 0 : _b["file"]) || "Unknown");
+        this.attachEvents();
+    }
+    getCloseEventDetail() {
+        const detail = {
+            dirty: this.modifiedModelData,
+        };
+        return { detail };
+    }
+    attachEvents() {
+        this.contentElement.addEventListener("click", async (e) => {
+            const target = getClosestOrSelf(e.target, "[data-action]");
+            const action = target === null || target === void 0 ? void 0 : target.getAttribute("data-action");
+            if (!target || !action) {
+                return;
+            }
+            await this.handleEventAction(action, target, e);
+        });
+    }
+    async handleEventAction(action, target, e) {
+        var _a, _b;
+        const info = this.modelInfo;
+        if (!(info === null || info === void 0 ? void 0 : info.file)) {
+            return;
+        }
+        if (action === "fetch-civitai") {
+            this.modelInfo = await this.refreshModelInfo(info.file);
+            this.setContent(this.getInfoContent());
+            this.setTitle(((_a = this.modelInfo) === null || _a === void 0 ? void 0 : _a["name"]) || ((_b = this.modelInfo) === null || _b === void 0 ? void 0 : _b["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 === null || target === void 0 ? void 0 : 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>`
+                    : "";
+            }
+        }
+        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"];
+                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 === null || e === void 0 ? void 0 : e.preventDefault();
+            e === null || e === void 0 ? void 0 : e.stopPropagation();
+        }
+    }
+    getInfoContent() {
+        var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t, _u, _v, _w, _x, _y;
+        const info = this.modelInfo || {};
+        const civitaiLink = (_a = info.links) === null || _a === void 0 ? void 0 : _a.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>
+        ${""}
+      </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>`)
+            : ((_c = (_b = info.raw) === null || _b === void 0 ? void 0 : _b.civitai) === null || _c === void 0 ? void 0 : _c.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>')
+                : ((_e = (_d = info.raw) === null || _d === void 0 ? void 0 : _d.civitai) === null || _e === void 0 ? void 0 : _e.error)
+                    ? infoTableRow("Civitai", (_g = (_f = info.raw) === null || _f === void 0 ? void 0 : _f.civitai) === null || _g === void 0 ? void 0 : _g.error)
+                    : !((_h = info.raw) === null || _h === void 0 ? void 0 : _h.civitai)
+                        ? infoTableRow("Civitai", `<button class="rgthree-button" data-action="fetch-civitai">Fetch info from civitai</button>`)
+                        : ""}
+
+        ${infoTableRow("Name", info.name || ((_k = (_j = info.raw) === null || _j === void 0 ? void 0 : _j.metadata) === null || _k === void 0 ? void 0 : _k.ss_output_name) || "", "The name for display.", "name")}
+
+        ${!info.baseModelFile && !info.baseModelFile
+            ? ""
+            : infoTableRow("Base Model", (info.baseModel || "") + (info.baseModelFile ? ` (${info.baseModelFile})` : ""))}
+
+
+        ${!((_l = info.trainedWords) === null || _l === void 0 ? void 0 : _l.length)
+            ? ""
+            : infoTableRow("Trained Words", (_m = getTrainedWordsMarkup(info.trainedWords)) !== null && _m !== void 0 ? _m : "", "Trained words from the metadata and/or civitai. Click to select for copy.")}
+
+        ${!((_p = (_o = info.raw) === null || _o === void 0 ? void 0 : _o.metadata) === null || _p === void 0 ? void 0 : _p.ss_clip_skip) || ((_r = (_q = info.raw) === null || _q === void 0 ? void 0 : _q.metadata) === null || _r === void 0 ? void 0 : _r.ss_clip_skip) == "None"
+            ? ""
+            : infoTableRow("Clip Skip", (_t = (_s = info.raw) === null || _s === void 0 ? void 0 : _s.metadata) === null || _t === void 0 ? void 0 : _t.ss_clip_skip)}
+        ${infoTableRow("Strength Min", (_u = info.strengthMin) !== null && _u !== void 0 ? _u : "", "The recommended minimum strength, In the Power Lora Loader node, strength will signal when it is below this threshold.", "strengthMin")}
+        ${infoTableRow("Strength Max", (_v = info.strengthMax) !== null && _v !== void 0 ? _v : "", "The recommended maximum strength. In the Power Lora Loader node, strength will signal when it is above this threshold.", "strengthMax")}
+        ${""}
+        ${infoTableRow("Additional Notes", (_w = info.userNote) !== null && _w !== void 0 ? _w : "", "Additional notes you'd like to keep and reference in the info dialog.", "userNote")}
+
+      </table>
+
+      <ul class="rgthree-info-images">${(_y = (_x = info.images) === null || _x === void 0 ? void 0 : _x.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)}<!--
+            --><!--${""}--></figcaption>
+          </figure>
+        </li>`).join("")) !== null && _y !== void 0 ? _y : ""}</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) => {
+                                    var _a;
+                                    if ((_a = this.modelInfo) === null || _a === void 0 ? void 0 : _a.file) {
+                                        window.open(`rgthree/api/loras/info?file=${encodeURIComponent(this.modelInfo.file)}`);
+                                    }
+                                },
+                            },
+                            {
+                                label: "Clear all local info",
+                                callback: async (e) => {
+                                    var _a, _b, _c;
+                                    if ((_a = this.modelInfo) === null || _a === void 0 ? void 0 : _a.file) {
+                                        this.modelInfo = await LORA_INFO_SERVICE.clearFetchedInfo(this.modelInfo.file);
+                                        this.setContent(this.getInfoContent());
+                                        this.setTitle(((_b = this.modelInfo) === null || _b === void 0 ? void 0 : _b["name"]) || ((_c = this.modelInfo) === null || _c === void 0 ? void 0 : _c["file"]) || "Unknown");
+                                    }
+                                },
+                            },
+                        ],
+                    }),
+                ],
+            });
+        }
+        return div;
+    }
+}
+export class RgthreeLoraInfoDialog extends RgthreeInfoDialog {
+    async getModelInfo(file) {
+        return LORA_INFO_SERVICE.getInfo(file, false, false);
+    }
+    async refreshModelInfo(file) {
+        return LORA_INFO_SERVICE.refreshInfo(file);
+    }
+    async clearModelInfo(file) {
+        return LORA_INFO_SERVICE.clearFetchedInfo(file);
+    }
+}
+function infoTableRow(name, value, help = "", 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) {
+    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;
+}
+function saveEditableRow(info, tr, saving = true) {
+    var _a;
+    const fieldName = tr.dataset["fieldName"];
+    const input = queryOne("input,textarea", tr);
+    let newValue = (_a = info[fieldName]) !== null && _a !== void 0 ? _a : "";
+    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, value) {
+    return value != null ? `<span>${label ? `<label>${label} </label>` : ""}${value}</span>` : "";
+}

rgthree-comfy/web/comfyui/display_any.js

@@ -0,0 +1,35 @@
+import { app } from "../../scripts/app.js";
+import { ComfyWidgets } from "../../scripts/widgets.js";
+import { addConnectionLayoutSupport } from "./utils.js";
+import { rgthree } from "./rgthree.js";
+let hasShownAlertForUpdatingInt = false;
+app.registerExtension({
+    name: "rgthree.DisplayAny",
+    async beforeRegisterNodeDef(nodeType, nodeData, app) {
+        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.showValueWidget = ComfyWidgets["STRING"](this, "output", ["STRING", { multiline: true }], app).widget;
+                this.showValueWidget.inputEl.readOnly = true;
+                this.showValueWidget.serializeValue = async (node, index) => {
+                    const n = rgthree.getNodeFromInitialGraphToPromptSerializedWorkflowBecauseComfyUIBrokeStuff(node);
+                    if (n) {
+                        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) {
+                onExecuted === null || onExecuted === void 0 ? void 0 : onExecuted.apply(this, [message]);
+                this.showValueWidget.value = message.text[0];
+            };
+        }
+    },
+});

rgthree-comfy/web/comfyui/dynamic_context.js

@@ -0,0 +1,253 @@
+import { app } from "../../scripts/app.js";
+import { IoDirection, followConnectionUntilType, getConnectedInputInfosAndFilterPassThroughs, } from "./utils.js";
+import { rgthree } from "./rgthree.js";
+import { SERVICE as CONTEXT_SERVICE, InputMutationOperation, } from "./services/context_service.js";
+import { NodeTypesString } from "./constants.js";
+import { removeUnusedInputsFromEnd } from "./utils_inputs_outputs.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*$/;
+export class DynamicContextNode extends DynamicContextNodeBase {
+    constructor(title = DynamicContextNode.title) {
+        super(title);
+    }
+    onNodeCreated() {
+        this.addInput("base_ctx", "RGTHREE_DYNAMIC_CONTEXT");
+        this.ensureOneRemainingNewInputSlot();
+        super.onNodeCreated();
+    }
+    onConnectionsChange(type, slotIndex, isConnected, link, ioSlot) {
+        var _a;
+        (_a = super.onConnectionsChange) === null || _a === void 0 ? void 0 : _a.call(this, type, slotIndex, isConnected, link, ioSlot);
+        if (this.configuring) {
+            return;
+        }
+        if (type === LiteGraph.INPUT) {
+            if (isConnected) {
+                this.handleInputConnected(slotIndex);
+            }
+            else {
+                this.handleInputDisconnected(slotIndex);
+            }
+        }
+    }
+    onConnectInput(inputIndex, outputType, outputSlot, outputNode, outputIndex) {
+        var _a;
+        let canConnect = true;
+        if (super.onConnectInput) {
+            canConnect = super.onConnectInput.apply(this, [...arguments]);
+        }
+        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.");
+            (_a = console[n]) === null || _a === void 0 ? void 0 : _a.call(console, ...v);
+            canConnect = false;
+        }
+        return canConnect;
+    }
+    handleInputConnected(slotIndex) {
+        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];
+            if (baseNodesDynamicCtx === null || baseNodesDynamicCtx === void 0 ? void 0 : 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) {
+        const ioSlot = this.inputs[slotIndex];
+        return ioSlot && ioSlot.name === "+" && ioSlot.type === "*";
+    }
+    handleNewInputConnected(slotIndex) {
+        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 === null || cxn === void 0 ? void 0 : cxn.type) && (cxn === null || cxn === void 0 ? void 0 : 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;
+            ioSlot.removable = true;
+            while (!this.outputs[slotIndex]) {
+                this.addOutput("*", "*");
+            }
+            this.outputs[slotIndex].type = cxn.type;
+            this.outputs[slotIndex].name = this.stripOwnedPrefix(name).toLocaleUpperCase();
+            if (cxn.type === "COMBO" || cxn.type.includes(",") || Array.isArray(cxn.type)) {
+                this.outputs[slotIndex].widget = true;
+            }
+            this.inputsMutated({
+                operation: InputMutationOperation.ADDED,
+                node: this,
+                slotIndex,
+                slot: ioSlot,
+            });
+            this.stabilizeNames();
+            this.ensureOneRemainingNewInputSlot();
+        }
+    }
+    handleInputDisconnected(slotIndex) {
+        var _a, _b;
+        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 || ((_b = (_a = this.outputs[index]) === null || _a === void 0 ? void 0 : _a.links) === null || _b === void 0 ? void 0 : _b.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) {
+        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;
+    }
+    removeInput(slotIndex) {
+        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 = [];
+        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);
+                }
+            }
+        }
+    }
+    getSlotMenuOptions(slot) {
+        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) => {
+                        var _a;
+                        dialog.is_modified = true;
+                        if (e.keyCode == 27) {
+                            dialog.close();
+                        }
+                        else if (e.keyCode == 13) {
+                            inner();
+                        }
+                        else if (e.keyCode != 13 && ((_a = e.target) === null || _a === void 0 ? void 0 : _a.localName) != "textarea") {
+                            return;
+                        }
+                        e.preventDefault();
+                        e.stopPropagation();
+                    });
+                    dialogInput.focus();
+                },
+            },
+            {
+                content: "🗑️ Delete Input",
+                disabled: !editable,
+                callback: () => {
+                    this.removeInput(slot.slot);
+                },
+            },
+        ];
+    }
+    handleContextMenuRenameInputDialog(slotIndex, value) {
+        app.graph.beforeChange();
+        this.renameContextInput(slotIndex, value);
+        this.stabilizeNames();
+        this.setDirtyCanvas(true, true);
+        app.graph.afterChange();
+    }
+}
+DynamicContextNode.title = NodeTypesString.DYNAMIC_CONTEXT;
+DynamicContextNode.type = NodeTypesString.DYNAMIC_CONTEXT;
+DynamicContextNode.comfyClass = NodeTypesString.DYNAMIC_CONTEXT;
+const contextDynamicNodes = [DynamicContextNode];
+app.registerExtension({
+    name: "rgthree.DynamicContext",
+    async beforeRegisterNodeDef(nodeType, nodeData) {
+        if (!CONFIG_SERVICE.getConfigValue("unreleased.dynamic_context.enabled")) {
+            return;
+        }
+        if (nodeData.name === DynamicContextNode.type) {
+            DynamicContextNode.setUp(nodeType, nodeData);
+        }
+    },
+});

rgthree-comfy/web/comfyui/dynamic_context_base.js

@@ -0,0 +1,189 @@
+import { BaseContextNode } from "./context.js";
+import { RgthreeBaseServerNode } from "./base_node.js";
+import { moveArrayItem, wait } from "../../rgthree/common/shared_utils.js";
+import { RgthreeInvisibleWidget } from "./utils_widgets.js";
+import { getContextOutputName, 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 class DynamicContextNodeBase extends BaseContextNode {
+    constructor() {
+        super(...arguments);
+        this.hasShadowInputs = false;
+    }
+    getContextInputsList() {
+        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) {
+        return `+ ${this.stripOwnedPrefix(name)}`;
+    }
+    isOwnedInput(inputOrName) {
+        const name = typeof inputOrName == "string" ? inputOrName : (inputOrName === null || inputOrName === void 0 ? void 0 : inputOrName.name) || "";
+        return REGEX_OWNED_PREFIX.test(name);
+    }
+    stripOwnedPrefix(name) {
+        return name.replace(REGEX_OWNED_PREFIX, "");
+    }
+    handleUpstreamMutation(mutation) {
+        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, 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;
+        }
+    }
+    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;
+    }
+    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, type, 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.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) {
+        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, newName, forceOwnBool = 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) {
+        const inputs = this.getContextInputsList();
+        const input = inputs[slotIndex];
+        let defaultLabel = this.stripOwnedPrefix(input.name).toLowerCase();
+        return defaultLabel.toLocaleLowerCase();
+    }
+    inputsMutated(mutation) {
+        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 setUp(comfyClass, nodeData) {
+        RgthreeBaseServerNode.registerForOverride(comfyClass, nodeData, this);
+        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/web/comfyui/dynamic_context_switch.js

@@ -0,0 +1,146 @@
+import { app } from "../../scripts/app.js";
+import { DynamicContextNodeBase } from "./dynamic_context_base.js";
+import { NodeTypesString } from "./constants.js";
+import { SERVICE as CONTEXT_SERVICE, 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";
+class DynamicContextSwitchNode extends DynamicContextNodeBase {
+    constructor(title = DynamicContextSwitchNode.title) {
+        super(title);
+        this.hasShadowInputs = true;
+        this.lastInputsList = [];
+        this.shadowInputs = [
+            { name: "base_ctx", type: "RGTHREE_DYNAMIC_CONTEXT", link: null, count: 0 },
+        ];
+    }
+    getContextInputsList() {
+        return this.shadowInputs;
+    }
+    handleUpstreamMutation(mutation) {
+        this.scheduleHardRefresh();
+    }
+    onConnectionsChange(type, slotIndex, isConnected, link, ioSlot) {
+        var _a;
+        (_a = super.onConnectionsChange) === null || _a === void 0 ? void 0 : _a.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);
+    }
+    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();
+    }
+    addContextInput(name, type, slot) { }
+    refreshInputsAndOutputs() {
+        var _a;
+        const inputs = [
+            { 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);
+            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;
+        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 ((_a = output === null || output === void 0 ? void 0 : output.links) === null || _a === void 0 ? void 0 : _a.length) {
+                output.rgthree_status = "ERROR";
+                i++;
+            }
+            else {
+                this.removeOutput(i);
+            }
+        }
+        this.fixInputsOutputsLinkSlots();
+    }
+    onDrawForeground(ctx, canvas) {
+        var _a, _b;
+        const low_quality = ((_b = (_a = canvas === null || canvas === void 0 ? void 0 : canvas.ds) === null || _a === void 0 ? void 0 : _a.scale) !== null && _b !== void 0 ? _b : 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();
+    }
+}
+DynamicContextSwitchNode.title = NodeTypesString.DYNAMIC_CONTEXT_SWITCH;
+DynamicContextSwitchNode.type = NodeTypesString.DYNAMIC_CONTEXT_SWITCH;
+DynamicContextSwitchNode.comfyClass = NodeTypesString.DYNAMIC_CONTEXT_SWITCH;
+app.registerExtension({
+    name: "rgthree.DynamicContextSwitch",
+    async beforeRegisterNodeDef(nodeType, nodeData) {
+        if (!CONFIG_SERVICE.getConfigValue("unreleased.dynamic_context.enabled")) {
+            return;
+        }
+        if (nodeData.name === DynamicContextSwitchNode.type) {
+            DynamicContextSwitchNode.setUp(nodeType, nodeData);
+        }
+    },
+});

rgthree-comfy/web/comfyui/fast_actions_button.js

@@ -0,0 +1,272 @@
+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;
+class FastActionsButton extends BaseAnyInputConnectedNode {
+    constructor(title) {
+        super(title);
+        this.comfyClass = NodeTypesString.FAST_ACTIONS_BUTTON;
+        this.logger = rgthree.newLogSession("[FastActionsButton]");
+        this.isVirtualNode = true;
+        this.serialize_widgets = true;
+        this.widgetToData = new Map();
+        this.nodeIdtoFunctionCache = new Map();
+        this.executingFromShortcut = false;
+        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();
+    }
+    configure(info) {
+        super.configure(info);
+        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);
+    }
+    clone() {
+        const cloned = super.clone();
+        cloned.properties["buttonText"] = "🎬 Action!";
+        cloned.properties["shortcutKey"] = "";
+        return cloned;
+    }
+    onAdded(graph) {
+        window.addEventListener("keydown", this.keypressBound);
+        window.addEventListener("keyup", this.keyupBound);
+    }
+    onRemoved() {
+        window.removeEventListener("keydown", this.keypressBound);
+        window.removeEventListener("keyup", this.keyupBound);
+    }
+    async onKeypress(event) {
+        const target = event.target;
+        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) {
+        const target = event.target;
+        if (target.localName == "input" || target.localName == "textarea") {
+            return;
+        }
+        this.executingFromShortcut = false;
+    }
+    onPropertyChanged(property, value, _prevValue) {
+        if (property == "buttonText") {
+            this.buttonWidget.name = value;
+        }
+        if (property == "shortcutKey") {
+            value = value.trim();
+            this.properties["shortcutKey"] = (value && value[0].toLowerCase()) || "";
+        }
+    }
+    handleLinkedNodesStabilization(linkedNodes) {
+        var _a, _b, _c, _d, _e, _f, _g, _h;
+        let changed = false;
+        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.");
+                    (_a = console[m]) === null || _a === void 0 ? void 0 : _a.call(console, ...a);
+                }
+            }
+        }
+        const badNodes = [];
+        let indexOffset = 1;
+        for (const [index, node] of linkedNodes.entries()) {
+            if (!node) {
+                const [m, a] = this.logger.debugParts("linkedNode provided that does not exist. ");
+                (_b = console[m]) === null || _b === void 0 ? void 0 : _b.call(console, ...a);
+                badNodes.push(node);
+                continue;
+            }
+            let widgetAtSlot = this.widgets[index + indexOffset];
+            if (widgetAtSlot && ((_c = this.widgetToData.get(widgetAtSlot)) === null || _c === void 0 ? void 0 : _c.comfy)) {
+                indexOffset++;
+                widgetAtSlot = this.widgets[index + indexOffset];
+            }
+            if (!widgetAtSlot || ((_e = (_d = this.widgetToData.get(widgetAtSlot)) === null || _d === void 0 ? void 0 : _d.node) === null || _e === void 0 ? void 0 : _e.id) !== node.id) {
+                let widget = null;
+                for (let i = index + indexOffset; i < this.widgets.length; i++) {
+                    if (((_g = (_f = this.widgetToData.get(this.widgets[i])) === null || _f === void 0 ? void 0 : _f.node) === null || _g === void 0 ? void 0 : _g.id) === node.id) {
+                        widget = this.widgets.splice(i, 1)[0];
+                        this.widgets.splice(index + indexOffset, 0, widget);
+                        changed = true;
+                        break;
+                    }
+                }
+                if (!widget) {
+                    const exposedActions = node.constructor.exposedActions || [];
+                    widget = this.addWidget("combo", node.title, "None", "", {
+                        values: ["None", "Mute", "Bypass", "Enable", ...exposedActions],
+                    });
+                    widget.serializeValue = async (_node, _index) => {
+                        return widget === null || widget === void 0 ? void 0 : widget.value;
+                    };
+                    this.widgetToData.set(widget, { node });
+                    changed = true;
+                }
+            }
+        }
+        for (let i = this.widgets.length - 1; i > linkedNodes.length + indexOffset - 1; i--) {
+            const widgetAtSlot = this.widgets[i];
+            if (widgetAtSlot && ((_h = this.widgetToData.get(widgetAtSlot)) === null || _h === void 0 ? void 0 : _h.comfy)) {
+                continue;
+            }
+            this.removeWidget(widgetAtSlot);
+            changed = true;
+        }
+        return changed;
+    }
+    removeWidget(widgetOrSlot) {
+        const widget = typeof widgetOrSlot === "number" ? this.widgets[widgetOrSlot] : widgetOrSlot;
+        if (widget && this.widgetToData.has(widget)) {
+            this.widgetToData.delete(widget);
+        }
+        super.removeWidget(widgetOrSlot);
+    }
+    async executeConnectedNodes() {
+        var _a;
+        for (const widget of this.widgets) {
+            if (widget == this.buttonWidget) {
+                continue;
+            }
+            const action = widget.value;
+            const { comfy, node } = (_a = this.widgetToData.get(widget)) !== null && _a !== void 0 ? _a : {};
+            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 (node.handleAction) {
+                    await node.handleAction(action);
+                }
+                app.graph.change();
+                continue;
+            }
+            console.warn("Fast Actions Button has a widget without correct data.");
+        }
+    }
+    addComfyActionWidget(slot, value) {
+        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["lastValue_"];
+            }
+            else if (widget.value.startsWith("REMOVE ")) {
+                this.removeWidget(widget);
+            }
+            widget["lastValue_"] = widget.value;
+        }, {
+            values: ["None", "Queue Prompt", "REMOVE Comfy Action", "MOVE to end"],
+        });
+        widget["lastValue_"] = value;
+        widget.serializeValue = async (_node, _index) => {
+            return `comfy_app:${widget === null || widget === void 0 ? void 0 : 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;
+    }
+    onSerialize(o) {
+        var _a;
+        super.onSerialize && super.onSerialize(o);
+        for (let [index, value] of (o.widgets_values || []).entries()) {
+            if (((_a = this.widgets[index]) === null || _a === void 0 ? void 0 : _a.name) === "Comfy Action") {
+                o.widgets_values[index] = `comfy_action:${value}`;
+            }
+        }
+    }
+    static setUp() {
+        super.setUp();
+        addMenuItem(this, app, {
+            name: "➕ Append a Comfy Action",
+            callback: (nodeArg) => {
+                nodeArg.addComfyActionWidget();
+            },
+        });
+    }
+}
+FastActionsButton.type = NodeTypesString.FAST_ACTIONS_BUTTON;
+FastActionsButton.title = NodeTypesString.FAST_ACTIONS_BUTTON;
+FastActionsButton["@buttonText"] = { type: "string" };
+FastActionsButton["@shortcutModifier"] = {
+    type: "combo",
+    values: ["ctrl", "alt", "shift"],
+};
+FastActionsButton["@shortcutKey"] = { type: "string" };
+FastActionsButton.collapsible = false;
+app.registerExtension({
+    name: "rgthree.FastActionsButton",
+    registerCustomNodes() {
+        FastActionsButton.setUp();
+    },
+    loadedGraphNode(node) {
+        if (node.type == FastActionsButton.title) {
+            node._tempWidth = node.size[0];
+        }
+    },
+});

rgthree-comfy/web/comfyui/fast_groups_bypasser.js

@@ -0,0 +1,27 @@
+import { app } from "../../scripts/app.js";
+import { NodeTypesString } from "./constants.js";
+import { BaseFastGroupsModeChanger } from "./fast_groups_muter.js";
+export class FastGroupsBypasser extends BaseFastGroupsModeChanger {
+    constructor(title = FastGroupsBypasser.title) {
+        super(title);
+        this.comfyClass = NodeTypesString.FAST_GROUPS_BYPASSER;
+        this.helpActions = "bypass and enable";
+        this.modeOn = LiteGraph.ALWAYS;
+        this.modeOff = 4;
+        this.onConstructed();
+    }
+}
+FastGroupsBypasser.type = NodeTypesString.FAST_GROUPS_BYPASSER;
+FastGroupsBypasser.title = NodeTypesString.FAST_GROUPS_BYPASSER;
+FastGroupsBypasser.exposedActions = ["Bypass all", "Enable all", "Toggle all"];
+app.registerExtension({
+    name: "rgthree.FastGroupsBypasser",
+    registerCustomNodes() {
+        FastGroupsBypasser.setUp();
+    },
+    loadedGraphNode(node) {
+        if (node.type == FastGroupsBypasser.title) {
+            node.tempSize = [...node.size];
+        }
+    },
+});

rgthree-comfy/web/comfyui/fast_groups_muter.js

@@ -0,0 +1,418 @@
+import { app } from "../../scripts/app.js";
+import { RgthreeBaseVirtualNode } from "./base_node.js";
+import { NodeTypesString } from "./constants.js";
+import { SERVICE as FAST_GROUPS_SERVICE } from "./services/fast_groups_service.js";
+import { drawNodeWidget, fitString } from "./utils_canvas.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";
+export class BaseFastGroupsModeChanger extends RgthreeBaseVirtualNode {
+    constructor(title = FastGroupsMuter.title) {
+        super(title);
+        this.modeOn = LiteGraph.ALWAYS;
+        this.modeOff = LiteGraph.NEVER;
+        this.debouncerTempWidth = 0;
+        this.tempSize = null;
+        this.serialize_widgets = false;
+        this.helpActions = "mute and unmute";
+        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";
+    }
+    onConstructed() {
+        this.addOutput("OPT_CONNECTION", "*");
+        return super.onConstructed();
+    }
+    configure(info) {
+        var _a;
+        if ((_a = info.outputs) === null || _a === void 0 ? void 0 : _a.length) {
+            info.outputs.length = 1;
+        }
+        super.configure(info);
+    }
+    onAdded(graph) {
+        FAST_GROUPS_SERVICE.addFastGroupNode(this);
+    }
+    onRemoved() {
+        FAST_GROUPS_SERVICE.removeFastGroupNode(this);
+    }
+    refreshWidgets() {
+        var _a, _b, _c, _d, _e, _f, _g, _h;
+        const canvas = app.canvas;
+        let sort = ((_a = this.properties) === null || _a === void 0 ? void 0 : _a[PROPERTY_SORT]) || "position";
+        let customAlphabet = null;
+        if (sort === "custom alphabet") {
+            const customAlphaStr = (_c = (_b = this.properties) === null || _b === void 0 ? void 0 : _b[PROPERTY_SORT_CUSTOM_ALPHA]) === null || _c === void 0 ? void 0 : _c.replace(/\n/g, "");
+            if (customAlphaStr && customAlphaStr.trim()) {
+                customAlphabet = customAlphaStr.includes(",")
+                    ? customAlphaStr.toLocaleLowerCase().split(",")
+                    : customAlphaStr.toLocaleLowerCase().trim().split("");
+            }
+            if (!(customAlphabet === null || customAlphabet === void 0 ? void 0 : customAlphabet.length)) {
+                sort = "alphanumeric";
+                customAlphabet = null;
+            }
+        }
+        const groups = [...FAST_GROUPS_SERVICE.getGroups(sort)];
+        if (customAlphabet === null || customAlphabet === void 0 ? void 0 : customAlphabet.length) {
+            groups.sort((a, b) => {
+                let aIndex = -1;
+                let bIndex = -1;
+                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;
+                    }
+                }
+                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);
+            });
+        }
+        let filterColors = (((_e = (_d = this.properties) === null || _d === void 0 ? void 0 : _d[PROPERTY_MATCH_COLORS]) === null || _e === void 0 ? void 0 : _e.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}`;
+            });
+        }
+        let index = 0;
+        for (const group of groups) {
+            if (filterColors.length) {
+                let groupColor = (_f = group.color) === null || _f === void 0 ? void 0 : _f.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 ((_h = (_g = this.properties) === null || _g === void 0 ? void 0 : _g[PROPERTY_MATCH_TITLE]) === null || _h === void 0 ? void 0 : _h.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) {
+                this.tempSize = [...this.size];
+                widget = this.addCustomWidget({
+                    name: "RGTHREE_TOGGLE_AND_NAV",
+                    label: "",
+                    value: false,
+                    disabled: false,
+                    options: { on: "yes", off: "no" },
+                    draw: function (ctx, node, width, posY, height) {
+                        var _a;
+                        const widgetData = drawNodeWidget(ctx, {
+                            width,
+                            height,
+                            posY,
+                        });
+                        const showNav = ((_a = node.properties) === null || _a === void 0 ? void 0 : _a[PROPERTY_SHOW_NAV]) !== false;
+                        let currentX = widgetData.width - widgetData.margin;
+                        if (!widgetData.lowQuality && showNav) {
+                            currentX -= 7;
+                            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;
+                        }
+                        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, widgetIndex) {
+                        return this.value;
+                    },
+                    mouse(event, pos, node) {
+                        var _a, _b, _c;
+                        if (event.type == "pointerdown") {
+                            if (((_a = node.properties) === null || _a === void 0 ? void 0 : _a[PROPERTY_SHOW_NAV]) !== false &&
+                                pos[0] >= node.size[0] - 15 - 28 - 1) {
+                                const canvas = app.canvas;
+                                const lowQuality = (((_b = canvas.ds) === null || _b === void 0 ? void 0 : _b.scale) || 1) <= 0.5;
+                                if (!lowQuality) {
+                                    canvas.centerOnNode(group);
+                                    const zoomCurrent = ((_c = canvas.ds) === null || _c === void 0 ? void 0 : _c.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(() => {
+                                    var _a;
+                                    (_a = this.callback) === null || _a === void 0 ? void 0 : _a.call(this, this.value, app.canvas, node, pos, event);
+                                }, 20);
+                            }
+                        }
+                        return true;
+                    },
+                });
+                widget.doModeChange = (force, skipOtherNodeCheck) => {
+                    var _a, _b, _c;
+                    group.recomputeInsideNodes();
+                    const hasAnyActiveNodes = group._nodes.some((n) => n.mode === LiteGraph.ALWAYS);
+                    let newValue = force != null ? force : !hasAnyActiveNodes;
+                    if (skipOtherNodeCheck !== true) {
+                        if (newValue && ((_b = (_a = this.properties) === null || _a === void 0 ? void 0 : _a[PROPERTY_RESTRICTION]) === null || _b === void 0 ? void 0 : _b.includes(" one"))) {
+                            for (const widget of this.widgets) {
+                                widget.doModeChange(false, true);
+                            }
+                        }
+                        else if (!newValue && ((_c = this.properties) === null || _c === void 0 ? void 0 : _c[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);
+                    }
+                    group._rgthreeHasAnyActiveNode = newValue;
+                    widget.value = newValue;
+                    app.graph.setDirtyCanvas(true, false);
+                };
+                widget.callback = () => {
+                    widget.doModeChange();
+                };
+                this.setSize(this.computeSize());
+            }
+            if (widget.name != widgetName) {
+                widget.name = widgetName;
+                this.setDirtyCanvas(true, false);
+            }
+            if (widget.value != group._rgthreeHasAnyActiveNode) {
+                widget.value = group._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++;
+        }
+        while ((this.widgets || [])[index]) {
+            this.removeWidget(index++);
+        }
+    }
+    computeSize(out) {
+        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]);
+            this.debouncerTempWidth && clearTimeout(this.debouncerTempWidth);
+            this.debouncerTempWidth = setTimeout(() => {
+                this.tempSize = null;
+            }, 32);
+        }
+        setTimeout(() => {
+            app.graph.setDirtyCanvas(true, true);
+        }, 16);
+        return size;
+    }
+    async handleAction(action) {
+        var _a, _b, _c, _d, _e;
+        if (action === "Mute all" || action === "Bypass all") {
+            const alwaysOne = ((_a = this.properties) === null || _a === void 0 ? void 0 : _a[PROPERTY_RESTRICTION]) === "always one";
+            for (const [index, widget] of this.widgets.entries()) {
+                widget === null || widget === void 0 ? void 0 : widget.doModeChange(alwaysOne && !index ? true : false, true);
+            }
+        }
+        else if (action === "Enable all") {
+            const onlyOne = (_b = this.properties) === null || _b === void 0 ? void 0 : _b[PROPERTY_RESTRICTION].includes(" one");
+            for (const [index, widget] of this.widgets.entries()) {
+                widget === null || widget === void 0 ? void 0 : widget.doModeChange(onlyOne && index > 0 ? false : true, true);
+            }
+        }
+        else if (action === "Toggle all") {
+            const onlyOne = (_c = this.properties) === null || _c === void 0 ? void 0 : _c[PROPERTY_RESTRICTION].includes(" one");
+            let foundOne = false;
+            for (const [index, widget] of this.widgets.entries()) {
+                let newValue = onlyOne && foundOne ? false : !widget.value;
+                foundOne = foundOne || newValue;
+                widget === null || widget === void 0 ? void 0 : widget.doModeChange(newValue, true);
+            }
+            if (!foundOne && ((_d = this.properties) === null || _d === void 0 ? void 0 : _d[PROPERTY_RESTRICTION]) === "always one") {
+                (_e = this.widgets[this.widgets.length - 1]) === null || _e === void 0 ? void 0 : _e.doModeChange(true, true);
+            }
+        }
+    }
+    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>`;
+    }
+}
+BaseFastGroupsModeChanger.type = NodeTypesString.FAST_GROUPS_MUTER;
+BaseFastGroupsModeChanger.title = NodeTypesString.FAST_GROUPS_MUTER;
+BaseFastGroupsModeChanger.exposedActions = ["Mute all", "Enable all", "Toggle all"];
+BaseFastGroupsModeChanger["@matchColors"] = { type: "string" };
+BaseFastGroupsModeChanger["@matchTitle"] = { type: "string" };
+BaseFastGroupsModeChanger["@showNav"] = { type: "boolean" };
+BaseFastGroupsModeChanger["@sort"] = {
+    type: "combo",
+    values: ["position", "alphanumeric", "custom alphabet"],
+};
+BaseFastGroupsModeChanger["@customSortAlphabet"] = { type: "string" };
+BaseFastGroupsModeChanger["@toggleRestriction"] = {
+    type: "combo",
+    values: ["default", "max one", "always one"],
+};
+export class FastGroupsMuter extends BaseFastGroupsModeChanger {
+    constructor(title = FastGroupsMuter.title) {
+        super(title);
+        this.comfyClass = NodeTypesString.FAST_GROUPS_MUTER;
+        this.helpActions = "mute and unmute";
+        this.modeOn = LiteGraph.ALWAYS;
+        this.modeOff = LiteGraph.NEVER;
+        this.onConstructed();
+    }
+}
+FastGroupsMuter.type = NodeTypesString.FAST_GROUPS_MUTER;
+FastGroupsMuter.title = NodeTypesString.FAST_GROUPS_MUTER;
+FastGroupsMuter.exposedActions = ["Bypass all", "Enable all", "Toggle all"];
+app.registerExtension({
+    name: "rgthree.FastGroupsMuter",
+    registerCustomNodes() {
+        FastGroupsMuter.setUp();
+    },
+    loadedGraphNode(node) {
+        if (node.type == FastGroupsMuter.title) {
+            node.tempSize = [...node.size];
+        }
+    },
+});

rgthree-comfy/web/comfyui/feature_group_fast_toggle.js

@@ -0,0 +1,217 @@
+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 = [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();
+}
+function clickedOnToggleButton(e, group) {
+    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;
+}
+app.registerExtension({
+    name: "rgthree.GroupHeaderToggles",
+    async setup() {
+        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);
+        rgthree.addEventListener("on-process-mouse-down", ((e) => {
+            if (!CONFIG_SERVICE.getFeatureValue("group_header_fast_toggle.enabled"))
+                return;
+            const canvas = app.canvas;
+            if (canvas.selected_group) {
+                const originalEvent = e.detail.originalEvent;
+                const group = canvas.selected_group;
+                const clickedOnToggle = clickedOnToggleButton(originalEvent, group) || "";
+                const toggleAction = clickedOnToggle === null || clickedOnToggle === void 0 ? void 0 : clickedOnToggle.toLocaleUpperCase();
+                if (toggleAction) {
+                    if (toggleAction === "QUEUE") {
+                        const outputNodes = getOutputNodes(group._nodes);
+                        if (!(outputNodes === null || outputNodes === void 0 ? void 0 : 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 = 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;
+                            }
+                        }
+                    }
+                    canvas.selected_group = null;
+                    canvas.dragging_canvas = false;
+                }
+            }
+        }));
+        const drawGroups = LGraphCanvas.prototype.drawGroups;
+        LGraphCanvas.prototype.drawGroups = function (canvasEl, ctx) {
+            drawGroups.apply(this, [...arguments]);
+            if (!CONFIG_SERVICE.getFeatureValue("group_header_fast_toggle.enabled") ||
+                !rgthree.lastAdjustedMouseEvent) {
+                return;
+            }
+            const graph = app.graph;
+            let groups;
+            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;
+                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;
+                    }
+                }
+                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 === null || outputNodes === void 0 ? void 0 : 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 === null || outputNodes === void 0 ? void 0 : 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;
+                                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");
+                                ctx.stroke(new Path2D(`${eyeFrame(midX, midY)} ${eyeFrame(midX, midY, -1)}`));
+                                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, midY, 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, midY, 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, cy, radius) {
+    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/web/comfyui/feature_import_individual_nodes.js

@@ -0,0 +1,54 @@
+import { tryToGetWorkflowDataFromEvent } from "../../rgthree/common/utils_workflow.js";
+import { app } from "../../scripts/app.js";
+import { SERVICE as CONFIG_SERVICE } from "./services/config_service.js";
+app.registerExtension({
+    name: "rgthree.ImportIndividualNodes",
+    async beforeRegisterNodeDef(nodeType, nodeData) {
+        const onDragOver = nodeType.prototype.onDragOver;
+        nodeType.prototype.onDragOver = function (e) {
+            var _a;
+            let handled = (_a = onDragOver === null || onDragOver === void 0 ? void 0 : onDragOver.apply) === null || _a === void 0 ? void 0 : _a.call(onDragOver, this, [...arguments]);
+            if (handled != null) {
+                return handled;
+            }
+            return importIndividualNodesInnerOnDragOver(this, e);
+        };
+        const onDragDrop = nodeType.prototype.onDragDrop;
+        nodeType.prototype.onDragDrop = async function (e) {
+            var _a;
+            const alreadyHandled = await ((_a = onDragDrop === null || onDragDrop === void 0 ? void 0 : onDragDrop.apply) === null || _a === void 0 ? void 0 : _a.call(onDragDrop, this, [...arguments]));
+            if (alreadyHandled) {
+                return alreadyHandled;
+            }
+            return importIndividualNodesInnerOnDragDrop(this, e);
+        };
+    },
+});
+export function importIndividualNodesInnerOnDragOver(node, e) {
+    var _a;
+    return ((((_a = node.widgets) === null || _a === void 0 ? void 0 : _a.length) && !!CONFIG_SERVICE.getFeatureValue("import_individual_nodes.enabled")) ||
+        false);
+}
+export async function importIndividualNodesInnerOnDragDrop(node, e) {
+    var _a, _b;
+    if (!((_a = node.widgets) === null || _a === void 0 ? void 0 : _a.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 (((_b = exact === null || exact === void 0 ? void 0 : exact.widgets_values) === null || _b === void 0 ? void 0 : _b.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: node.title,
+                widgets_values: [...((exact === null || exact === void 0 ? void 0 : exact.widgets_values) || [])]
+            });
+            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/web/comfyui/image_comparer.js

@@ -0,0 +1,363 @@
+import { app } from "../../scripts/app.js";
+import { api } from "../../scripts/api.js";
+import { RgthreeBaseServerNode } from "./base_node.js";
+import { NodeTypesString } from "./constants.js";
+import { addConnectionLayoutSupport } from "./utils.js";
+import { RgthreeBaseWidget, } from "./utils_widgets.js";
+import { measureText } from "./utils_canvas.js";
+function imageDataToUrl(data) {
+    return api.apiURL(`/view?filename=${encodeURIComponent(data.filename)}&type=${data.type}&subfolder=${data.subfolder}${app.getPreviewFormatParam()}${app.getRandParam()}`);
+}
+export class RgthreeImageComparer extends RgthreeBaseServerNode {
+    constructor(title = RgthreeImageComparer.title) {
+        super(title);
+        this.imageIndex = 0;
+        this.imgs = [];
+        this.serialize_widgets = true;
+        this.isPointerDown = false;
+        this.isPointerOver = false;
+        this.pointerOverPos = [0, 0];
+        this.canvasWidget = null;
+        this.properties["comparer_mode"] = "Slide";
+    }
+    onExecuted(output) {
+        var _a;
+        (_a = super.onExecuted) === null || _a === void 0 ? void 0 : _a.call(this, 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 = [];
+            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 };
+        }
+    }
+    onSerialize(o) {
+        var _a;
+        super.onSerialize && super.onSerialize(o);
+        for (let [index, widget_value] of (o.widgets_values || []).entries()) {
+            if (((_a = this.widgets[index]) === null || _a === void 0 ? void 0 : _a.name) === "rgthree_comparer") {
+                o.widgets_values[index] = this.widgets[index].value.images.map((d) => {
+                    d = { ...d };
+                    delete d.img;
+                    return d;
+                });
+            }
+        }
+    }
+    onNodeCreated() {
+        this.canvasWidget = this.addCustomWidget(new RgthreeImageComparerWidget("rgthree_comparer", this));
+        this.setSize(this.computeSize());
+        this.setDirtyCanvas(true, true);
+    }
+    setIsPointerDown(down = 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();
+            });
+        }
+    }
+    onMouseDown(event, pos, graphCanvas) {
+        var _a;
+        (_a = super.onMouseDown) === null || _a === void 0 ? void 0 : _a.call(this, event, pos, graphCanvas);
+        this.setIsPointerDown(true);
+    }
+    onMouseEnter(event, pos, graphCanvas) {
+        var _a;
+        (_a = super.onMouseEnter) === null || _a === void 0 ? void 0 : _a.call(this, event, pos, graphCanvas);
+        this.setIsPointerDown(!!app.canvas.pointer_is_down);
+        this.isPointerOver = true;
+    }
+    onMouseLeave(event, pos, graphCanvas) {
+        var _a;
+        (_a = super.onMouseLeave) === null || _a === void 0 ? void 0 : _a.call(this, event, pos, graphCanvas);
+        this.setIsPointerDown(false);
+        this.isPointerOver = false;
+    }
+    onMouseMove(event, pos, graphCanvas) {
+        var _a;
+        (_a = super.onMouseMove) === null || _a === void 0 ? void 0 : _a.call(this, event, pos, graphCanvas);
+        this.pointerOverPos = [...pos];
+        this.imageIndex = this.pointerOverPos[0] > this.size[0] / 2 ? 1 : 0;
+    }
+    getHelp() {
+        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 setUp(comfyClass, nodeData) {
+        RgthreeBaseServerNode.registerForOverride(comfyClass, nodeData, RgthreeImageComparer);
+    }
+    static onRegisteredForOverride(comfyClass) {
+        addConnectionLayoutSupport(RgthreeImageComparer, app, [
+            ["Left", "Right"],
+            ["Right", "Left"],
+        ]);
+        setTimeout(() => {
+            RgthreeImageComparer.category = comfyClass.category;
+        });
+    }
+}
+RgthreeImageComparer.title = NodeTypesString.IMAGE_COMPARER;
+RgthreeImageComparer.type = NodeTypesString.IMAGE_COMPARER;
+RgthreeImageComparer.comfyClass = NodeTypesString.IMAGE_COMPARER;
+RgthreeImageComparer["@comparer_mode"] = {
+    type: "combo",
+    values: ["Slide", "Click"],
+};
+class RgthreeImageComparerWidget extends RgthreeBaseWidget {
+    constructor(name, node) {
+        super(name);
+        this.hitAreas = {};
+        this.selected = [];
+        this._value = { images: [] };
+        this.node = node;
+    }
+    set value(v) {
+        let cleanedVal;
+        if (Array.isArray(v)) {
+            cleanedVal = v.map((d, i) => {
+                if (!d || typeof d === "string") {
+                    d = { url: d, name: i == 0 ? "A" : "B", selected: true };
+                }
+                return d;
+            });
+        }
+        else {
+            cleanedVal = v.images || [];
+        }
+        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);
+        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);
+    }
+    get value() {
+        return this._value;
+    }
+    setSelected(selected) {
+        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, node, width, y) {
+        var _a;
+        this.hitAreas = {};
+        if (this.value.images.length > 2) {
+            ctx.textAlign = "left";
+            ctx.textBaseline = "top";
+            ctx.font = `14px Arial`;
+            const drawData = [];
+            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 (((_a = node.properties) === null || _a === void 0 ? void 0 : _a["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]);
+            }
+        }
+    }
+    onSelectionDown(event, pos, node, bounds) {
+        const selected = [...this.selected];
+        if (bounds === null || bounds === void 0 ? void 0 : bounds.data.name.startsWith("A")) {
+            selected[0] = bounds.data;
+        }
+        else if (bounds === null || bounds === void 0 ? void 0 : bounds.data.name.startsWith("B")) {
+            selected[1] = bounds.data;
+        }
+        this.setSelected(selected);
+    }
+    drawImage(ctx, image, y, cropX) {
+        var _a, _b;
+        if (!((_a = image === null || image === void 0 ? void 0 : image.img) === null || _a === void 0 ? void 0 : _a.naturalWidth) || !((_b = image === null || image === void 0 ? void 0 : image.img) === null || _b === void 0 ? void 0 : _b.naturalHeight)) {
+            return;
+        }
+        let [nodeWidth, nodeHeight] = this.node.size;
+        const imageAspect = (image === null || image === void 0 ? void 0 : image.img.naturalWidth) / (image === null || image === void 0 ? void 0 : 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 === null || image === void 0 ? void 0 : image.img.naturalWidth) / targetWidth;
+        const sourceX = 0;
+        const sourceY = 0;
+        const sourceWidth = cropX != null ? (cropX - offsetX) * widthMultiplier : image === null || image === void 0 ? void 0 : image.img.naturalWidth;
+        const sourceHeight = image === null || image === void 0 ? void 0 : 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 === null || image === void 0 ? void 0 : image.img, sourceX, sourceY, sourceWidth, sourceHeight, destX, destY, destWidth, destHeight);
+        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) {
+        return [width, 20];
+    }
+    serializeValue(serializedNode, widgetIndex) {
+        const v = [];
+        for (const data of this._value.images) {
+            const d = { ...data };
+            delete d.img;
+            v.push(d);
+        }
+        return { images: v };
+    }
+}
+app.registerExtension({
+    name: "rgthree.ImageComparer",
+    async beforeRegisterNodeDef(nodeType, nodeData) {
+        if (nodeData.name === RgthreeImageComparer.type) {
+            RgthreeImageComparer.setUp(nodeType, nodeData);
+        }
+    },
+});

rgthree-comfy/web/comfyui/image_inset_crop.js

@@ -0,0 +1,59 @@
+import { app } from "../../scripts/app.js";
+import { RgthreeBaseServerNode } from "./base_node.js";
+import { NodeTypesString } from "./constants.js";
+class ImageInsetCrop extends RgthreeBaseServerNode {
+    constructor(title = ImageInsetCrop.title) {
+        super(title);
+    }
+    onAdded(graph) {
+        const measurementWidget = this.widgets[0];
+        let callback = measurementWidget.callback;
+        measurementWidget.callback = (...args) => {
+            this.setWidgetStep();
+            callback && callback.apply(measurementWidget, [...args]);
+        };
+        this.setWidgetStep();
+    }
+    configure(info) {
+        super.configure(info);
+        this.setWidgetStep();
+    }
+    setWidgetStep() {
+        const measurementWidget = this.widgets[0];
+        for (let i = 1; i <= 4; i++) {
+            if (measurementWidget.value === "Pixels") {
+                this.widgets[i].options.step = 80;
+                this.widgets[i].options.max = ImageInsetCrop.maxResolution;
+            }
+            else {
+                this.widgets[i].options.step = 10;
+                this.widgets[i].options.max = 99;
+            }
+        }
+    }
+    async handleAction(action) {
+        if (action === "Reset Crop") {
+            for (const widget of this.widgets) {
+                if (["left", "right", "top", "bottom"].includes(widget.name)) {
+                    widget.value = 0;
+                }
+            }
+        }
+    }
+    static setUp(comfyClass, nodeData) {
+        RgthreeBaseServerNode.registerForOverride(comfyClass, nodeData, ImageInsetCrop);
+    }
+}
+ImageInsetCrop.title = NodeTypesString.IMAGE_INSET_CROP;
+ImageInsetCrop.type = NodeTypesString.IMAGE_INSET_CROP;
+ImageInsetCrop.comfyClass = NodeTypesString.IMAGE_INSET_CROP;
+ImageInsetCrop.exposedActions = ["Reset Crop"];
+ImageInsetCrop.maxResolution = 8192;
+app.registerExtension({
+    name: "rgthree.ImageInsetCrop",
+    async beforeRegisterNodeDef(nodeType, nodeData, _app) {
+        if (nodeData.name === NodeTypesString.IMAGE_INSET_CROP) {
+            ImageInsetCrop.setUp(nodeType, nodeData);
+        }
+    },
+});