diff --git a/package-lock.json b/package-lock.json index 56570c5..7e714d0 100644 --- a/package-lock.json +++ b/package-lock.json @@ -5,8 +5,7 @@ "packages": { "": { "devDependencies": { - "@comfyorg/comfyui-frontend-types": "^1.15.5", - "@comfyorg/litegraph": "^0.11.3", + "@comfyorg/comfyui-frontend-types": "^1.26.4", "prettier": "^3.3.3", "sass": "^1.77.8", "typescript": "^5.5.4", @@ -64,24 +63,15 @@ } }, "node_modules/@comfyorg/comfyui-frontend-types": { - "version": "1.15.5", - "resolved": "https://registry.npmjs.org/@comfyorg/comfyui-frontend-types/-/comfyui-frontend-types-1.15.5.tgz", - "integrity": "sha512-SPxvpFabzTEoYczFoUHcc7hgUTXyHLjJh1yNjWkkvJgZrJAQAKeqD9/YT/EMKqzDSphPM2KPu2Yh9VJgpjXVcw==", + "version": "1.26.4", + "resolved": "https://registry.npmjs.org/@comfyorg/comfyui-frontend-types/-/comfyui-frontend-types-1.26.4.tgz", + "integrity": "sha512-t0Gqj6mCmenJQDmZSZWnpoQlZMt9iUdxnHaqSSuBEI1R6Od4Spked4SzTU4YSTSy7lN2u9Kf1xbihKqsY5vgdg==", "dev": true, - "dependencies": { - "@comfyorg/litegraph": "^0.11.5" - }, "peerDependencies": { "vue": "^3.5.13", "zod": "^3.23.8" } }, - "node_modules/@comfyorg/litegraph": { - "version": "0.11.5", - "resolved": "https://registry.npmjs.org/@comfyorg/litegraph/-/litegraph-0.11.5.tgz", - "integrity": "sha512-GBNloRNLEI/R+7zFcrXauMND1VJAMYqjheX6hcbqucCzSHBNlkcJnbhstvILSPIuv0GP1tEgzN4EDe5JtKIqoQ==", - "dev": true - }, "node_modules/@jridgewell/sourcemap-codec": { "version": "1.5.0", "resolved": "https://registry.npmjs.org/@jridgewell/sourcemap-codec/-/sourcemap-codec-1.5.0.tgz", @@ -524,9 +514,9 @@ } }, "node_modules/typescript": { - "version": "5.5.4", - "resolved": "https://registry.npmjs.org/typescript/-/typescript-5.5.4.tgz", - "integrity": "sha512-Mtq29sKDAEYP7aljRgtPOpTvOfbwRWlS6dPRzwjdE+C0R4brX/GUyhHSecbHMFLNBLcJIPt9nl9yG5TZ1weH+Q==", + "version": "5.9.2", + "resolved": "https://registry.npmjs.org/typescript/-/typescript-5.9.2.tgz", + "integrity": "sha512-CWBzXQrc/qOkhidw1OzBTQuYRbfyxDXJMVJ1XNwUHGROVmuaeiEm3OslpZ1RV96d7SKKjZKrSJu3+t/xlw3R9A==", "dev": true, "bin": { "tsc": "bin/tsc", diff --git a/package.json b/package.json index dda2bf6..8cdbf4e 100644 --- a/package.json +++ b/package.json @@ -3,8 +3,7 @@ "prettier": "^3.3.3", "typescript": "^5.5.4", "sass": "^1.77.8", - "@comfyorg/litegraph": "^0.11.3", - "@comfyorg/comfyui-frontend-types": "^1.15.5", + "@comfyorg/comfyui-frontend-types": "^1.26.4", "web-tree-sitter": "0.25.6" }, "scripts": { diff --git a/pyproject.toml b/pyproject.toml index b5173dc..1fb159c 100644 --- a/pyproject.toml +++ b/pyproject.toml @@ -1,7 +1,7 @@ [project] name = "rgthree-comfy" description = "Making ComfyUI more comfortable." -version = "1.0.2508012353" +version = "1.0.2508160121" license = { file = "LICENSE" } dependencies = [] diff --git a/src_web/comfyui/any_switch.ts b/src_web/comfyui/any_switch.ts index cfbcd5e..9e72642 100644 --- a/src_web/comfyui/any_switch.ts +++ b/src_web/comfyui/any_switch.ts @@ -1,13 +1,18 @@ -import type { INodeInputSlot, INodeOutputSlot, LGraphNodeConstructor, LLink } from "@comfyorg/litegraph"; -import type { ComfyApp } from "@comfyorg/frontend"; -import type { ComfyNodeDef } from "typings/comfy.js"; +import type { + ComfyApp, + INodeInputSlot, + INodeOutputSlot, + LGraphNode, + LLink, +} from "@comfyorg/frontend"; +import type {ComfyNodeDef} from "typings/comfy.js"; -import { app } from "scripts/app.js"; -import { IoDirection, addConnectionLayoutSupport, followConnectionUntilType } from "./utils.js"; -import { RgthreeBaseServerNode } from "./base_node.js"; -import { NodeTypesString } from "./constants.js"; -import { removeUnusedInputsFromEnd } from "./utils_inputs_outputs.js"; -import { debounce } from "rgthree/common/shared_utils.js"; +import {app} from "scripts/app.js"; +import {IoDirection, addConnectionLayoutSupport, followConnectionUntilType} from "./utils.js"; +import {RgthreeBaseServerNode} from "./base_node.js"; +import {NodeTypesString} from "./constants.js"; +import {removeUnusedInputsFromEnd} from "./utils_inputs_outputs.js"; +import {debounce} from "rgthree/common/shared_utils.js"; class RgthreeAnySwitch extends RgthreeBaseServerNode { static override title = NodeTypesString.ANY_SWITCH; @@ -74,12 +79,12 @@ class RgthreeAnySwitch extends RgthreeBaseServerNode { output.type === "RGTHREE_CONTEXT" ? "CONTEXT" : Array.isArray(this.nodeType) || this.nodeType.includes(",") - ? connectedType?.label || String(this.nodeType) - : String(this.nodeType); + ? connectedType?.label || String(this.nodeType) + : String(this.nodeType); } } - static override setUp(comfyClass: LGraphNodeConstructor, nodeData: ComfyNodeDef) { + static override setUp(comfyClass: typeof LGraphNode, nodeData: ComfyNodeDef) { RgthreeBaseServerNode.registerForOverride(comfyClass, nodeData, RgthreeAnySwitch); addConnectionLayoutSupport(RgthreeAnySwitch, app, [ ["Left", "Right"], @@ -90,7 +95,7 @@ class RgthreeAnySwitch extends RgthreeBaseServerNode { app.registerExtension({ name: "rgthree.AnySwitch", - async beforeRegisterNodeDef(nodeType: LGraphNodeConstructor, nodeData: any, app: ComfyApp) { + async beforeRegisterNodeDef(nodeType: typeof LGraphNode, nodeData: any, app: ComfyApp) { if (nodeData.name === "Any Switch (rgthree)") { RgthreeAnySwitch.setUp(nodeType, nodeData); } diff --git a/src_web/comfyui/base_any_input_connected_node.ts b/src_web/comfyui/base_any_input_connected_node.ts index a2b1d49..283175e 100644 --- a/src_web/comfyui/base_any_input_connected_node.ts +++ b/src_web/comfyui/base_any_input_connected_node.ts @@ -4,9 +4,14 @@ import type { INodeInputSlot, INodeOutputSlot, LGraphNode as TLGraphNode, - IWidget, ISlotType, -} from "@comfyorg/litegraph"; + ConnectByTypeOptions, + TWidgetType, + IWidgetOptions, + IWidget, + IBaseWidget, + WidgetTypeMap, +} from "@comfyorg/frontend"; import {app} from "scripts/app.js"; import {RgthreeBaseVirtualNode} from "./base_node.js"; @@ -20,8 +25,6 @@ import { getConnectedOutputNodes, getConnectedOutputNodesAndFilterPassThroughs, } from "./utils.js"; -import {ConnectByTypeOptions} from "@comfyorg/litegraph/dist/LGraphNode.js"; -import {TWidgetType, IWidgetOptions} from "@comfyorg/litegraph/dist/types/widgets.js"; /** * A Virtual Node that allows any node's output to connect to it. @@ -177,28 +180,31 @@ export class BaseAnyInputConnectedNode extends RgthreeBaseVirtualNode { return super.removeInput(slot); } - override addInput(name: string, type: string | -1, extra_info?: Partial) { + override addInput>( + name: string, + type: ISlotType, + extra_info?: TProperties | undefined, + ): INodeInputSlot & TProperties { (this as any)._tempWidth = this.size[0]; return super.addInput(name, type, extra_info); } - override addWidget( - type: TWidgetType, + override addWidget( + type: Type, name: string, - value: string | number | boolean | object, - callback: IWidget["callback"] | string | null, + value: TValue, + callback: IBaseWidget["callback"] | string | null, options?: IWidgetOptions | string, - ): IWidget { + ): + | IBaseWidget> + | WidgetTypeMap[Type] { (this as any)._tempWidth = this.size[0]; return super.addWidget(type, name, value, callback, options); } - /** - * Guess this doesn't exist in Litegraph... - */ - override removeWidget(widgetOrSlot?: IWidget | number) { + override removeWidget(widget: IBaseWidget | IWidget | number | undefined): void { (this as any)._tempWidth = this.size[0]; - super.removeWidget(widgetOrSlot); + super.removeWidget(widget); } override computeSize(out: Vector2) { diff --git a/src_web/comfyui/base_node.ts b/src_web/comfyui/base_node.ts index 83ff8a3..b37c198 100644 --- a/src_web/comfyui/base_node.ts +++ b/src_web/comfyui/base_node.ts @@ -5,11 +5,13 @@ import type { IFoundSlot, LGraphEventMode, LGraphNodeConstructor, -} from "@comfyorg/litegraph"; -import type {ISerialisedNode} from "@comfyorg/litegraph/dist/types/serialisation.js"; + ISerialisedNode, + IBaseWidget, +} from "@comfyorg/frontend"; import type {ComfyNodeDef} from "typings/comfy.js"; import type {RgthreeBaseServerNodeConstructor} from "typings/rgthree.js"; +import {app} from "scripts/app.js"; import {ComfyWidgets} from "scripts/widgets.js"; import {SERVICE as KEY_EVENT_SERVICE} from "./services/key_events_services.js"; import {LogLevel, rgthree} from "./rgthree.js"; @@ -179,19 +181,14 @@ export abstract class RgthreeBaseNode extends LGraphNode { } /** - * Guess this doesn't exist in Litegraph... + * This didn't exist in LiteGraph/Comfy, but now it's added. Ours was a bit more flexible, though. */ - removeWidget(widgetOrSlot?: IWidget | number) { - if (!this.widgets) { - return; + override removeWidget(widget: IBaseWidget | IWidget | number | undefined): void { + if (typeof widget === "number") { + widget = this.widgets[widget]; } - const widget = typeof widgetOrSlot === "number" ? this.widgets[widgetOrSlot] : widgetOrSlot; - if (widget) { - const index = this.widgets.indexOf(widget); - if (index > -1) { - this.widgets.splice(index, 1); - } - widget.onRemove?.(); + if (widget != null) { + super.removeWidget(widget as IBaseWidget); } } @@ -201,8 +198,8 @@ export abstract class RgthreeBaseNode extends LGraphNode { replaceWidget(widgetOrSlot: IWidget | number | undefined, newWidget: IWidget) { let index = null; if (widgetOrSlot) { - index = typeof widgetOrSlot === 'number' ? widgetOrSlot : this.widgets.indexOf(widgetOrSlot); - this.removeWidget(index); + index = typeof widgetOrSlot === "number" ? widgetOrSlot : this.widgets.indexOf(widgetOrSlot); + this.removeWidget(this.widgets[index]!); } index = index != null ? index : this.widgets.length - 1; if (this.widgets.includes(newWidget)) { @@ -283,10 +280,7 @@ export abstract class RgthreeBaseNode extends LGraphNode { if (super.getExtraMenuOptions) { super.getExtraMenuOptions?.apply(this, [canvas, options]); } else if (this.constructor.nodeType?.prototype?.getExtraMenuOptions) { - this.constructor.nodeType?.prototype?.getExtraMenuOptions?.apply(this, [ - canvas, - options, - ]); + this.constructor.nodeType?.prototype?.getExtraMenuOptions?.apply(this, [canvas, options]); } // If we have help content, then add a menu item. const help = this.getHelp() || (this.constructor as any).help; @@ -433,7 +427,7 @@ export class RgthreeBaseServerNode extends RgthreeBaseNode { static __registeredForOverride__: boolean = false; static registerForOverride( - comfyClass: LGraphNodeConstructor, + comfyClass: typeof LGraphNode, nodeData: ComfyNodeDef, rgthreeClass: RgthreeBaseServerNodeConstructor, ) { diff --git a/src_web/comfyui/base_node_collector.ts b/src_web/comfyui/base_node_collector.ts index be8157d..3007630 100644 --- a/src_web/comfyui/base_node_collector.ts +++ b/src_web/comfyui/base_node_collector.ts @@ -1,6 +1,7 @@ -import type { INodeOutputSlot, LGraphNode } from "@comfyorg/litegraph"; -import { rgthree } from "./rgthree.js"; -import { BaseAnyInputConnectedNode } from "./base_any_input_connected_node.js"; +import type {INodeOutputSlot, LGraphNode} from "@comfyorg/frontend"; + +import {rgthree} from "./rgthree.js"; +import {BaseAnyInputConnectedNode} from "./base_any_input_connected_node.js"; import { PassThroughFollowing, getConnectedInputNodes, diff --git a/src_web/comfyui/base_node_mode_changer.ts b/src_web/comfyui/base_node_mode_changer.ts index b54cf0d..b9cd32f 100644 --- a/src_web/comfyui/base_node_mode_changer.ts +++ b/src_web/comfyui/base_node_mode_changer.ts @@ -1,9 +1,8 @@ -import type { LGraphNode, IWidget} from "@comfyorg/litegraph"; -import type { ISerialisedNode } from "@comfyorg/litegraph/dist/types/serialisation.js"; +import type {LGraphNode, IWidget} from "@comfyorg/frontend"; -import { BaseAnyInputConnectedNode } from "./base_any_input_connected_node.js"; -import { PassThroughFollowing } from "./utils.js"; -import { wait } from "rgthree/common/shared_utils.js"; +import {BaseAnyInputConnectedNode} from "./base_any_input_connected_node.js"; +import {PassThroughFollowing} from "./utils.js"; +import {wait} from "rgthree/common/shared_utils.js"; export class BaseNodeModeChanger extends BaseAnyInputConnectedNode { override readonly inputsPassThroughFollowing: PassThroughFollowing = PassThroughFollowing.ALL; @@ -38,12 +37,12 @@ export class BaseNodeModeChanger extends BaseAnyInputConnectedNode { override handleLinkedNodesStabilization(linkedNodes: LGraphNode[]) { let changed = false; for (const [index, node] of linkedNodes.entries()) { - let widget = this.widgets && this.widgets[index]; + let widget: IWidget | undefined = this.widgets && this.widgets[index]; if (!widget) { // When we add a widget, litegraph is going to mess up the size, so we // store it so we can retrieve it in computeSize. Hacky.. (this as any)._tempWidth = this.size[0]; - widget = this.addWidget("toggle", "", false, "", { on: "yes", off: "no" }); + widget = this.addWidget("toggle", "", false, "", {on: "yes", off: "no"}) as IWidget; changed = true; } if (node) { @@ -60,11 +59,11 @@ export class BaseNodeModeChanger extends BaseAnyInputConnectedNode { private setWidget(widget: IWidget, linkedNode: LGraphNode, forceValue?: boolean) { let changed = false; const value = forceValue == null ? linkedNode.mode === this.modeOn : forceValue; - let name = `Enable ${linkedNode.title}`; + let name = `Enable ${linkedNode.title}`; // Need to set initally if (widget.name !== name) { widget.name = `Enable ${linkedNode.title}`; - widget.options = { on: "yes", off: "no" }; + widget.options = {on: "yes", off: "no"}; widget.value = value; (widget as any).doModeChange = (forceValue?: boolean, skipOtherNodeCheck?: boolean) => { let newValue = forceValue == null ? linkedNode.mode === this.modeOff : forceValue; diff --git a/src_web/comfyui/base_power_prompt.ts b/src_web/comfyui/base_power_prompt.ts index 7ca264a..4f9b46e 100644 --- a/src_web/comfyui/base_power_prompt.ts +++ b/src_web/comfyui/base_power_prompt.ts @@ -3,10 +3,10 @@ import type { LGraphNode, INodeOutputSlot, INodeInputSlot, - IWidget, -} from "@comfyorg/litegraph"; -import type {ISerialisedNode} from "@comfyorg/litegraph/dist/types/serialisation.js"; -import type {IComboWidget} from "@comfyorg/litegraph/dist/types/widgets.js"; + ISerialisedNode, + IComboWidget, + IBaseWidget, +} from "@comfyorg/frontend"; import type {ComfyNodeDef} from "typings/comfy.js"; import {api} from "scripts/api.js"; @@ -177,7 +177,7 @@ export class PowerPrompt { this.refreshCombos(event.detail[this.nodeData.name]); } - shouldRemoveServerWidget(widget: IWidget) { + shouldRemoveServerWidget(widget: IBaseWidget) { return ( widget.name?.startsWith("insert_") || widget.name?.startsWith("target_") || @@ -222,7 +222,7 @@ export class PowerPrompt { this.combos[key] = this.node.addWidget( "combo", key, - values, + values[0]!, (selected) => { if (selected !== values[0] && !selected.match(/^disable\s[a-z]/i)) { // We wait a frame because if we use a keydown event to call, it'll wipe out diff --git a/src_web/comfyui/bookmark.ts b/src_web/comfyui/bookmark.ts index 508076b..5a707e2 100644 --- a/src_web/comfyui/bookmark.ts +++ b/src_web/comfyui/bookmark.ts @@ -1,6 +1,4 @@ -import type {LGraph, LGraphCanvas, LGraphNode} from "@comfyorg/litegraph"; -import type {Point} from "@comfyorg/litegraph/dist/interfaces.js"; -import type {CanvasMouseEvent} from "@comfyorg/litegraph/dist/types/events.js"; +import type {LGraph, LGraphCanvas, LGraphNode, Point, CanvasMouseEvent} from "@comfyorg/frontend"; import {app} from "scripts/app.js"; import {RgthreeBaseVirtualNode} from "./base_node.js"; diff --git a/src_web/comfyui/bypasser.ts b/src_web/comfyui/bypasser.ts index 1b17079..0cfb51f 100644 --- a/src_web/comfyui/bypasser.ts +++ b/src_web/comfyui/bypasser.ts @@ -1,4 +1,4 @@ -import type {LGraphNode} from "@comfyorg/litegraph"; +import type {LGraphNode} from "@comfyorg/frontend"; import {app} from "scripts/app.js"; import {BaseNodeModeChanger} from "./base_node_mode_changer.js"; diff --git a/src_web/comfyui/context.ts b/src_web/comfyui/context.ts index 90721c0..a49b7a9 100644 --- a/src_web/comfyui/context.ts +++ b/src_web/comfyui/context.ts @@ -5,9 +5,8 @@ import type { LGraphNode as TLGraphNode, LLink, ISlotType, - LGraphNodeConstructor, -} from "@comfyorg/litegraph"; -import type {ConnectByTypeOptions} from "@comfyorg/litegraph/dist/LGraphNode.js"; + ConnectByTypeOptions, +} from "@comfyorg/frontend"; import type {ComfyNodeDef} from "typings/comfy.js"; import {app} from "scripts/app.js"; @@ -188,7 +187,7 @@ export class BaseContextNode extends RgthreeBaseServerNode { } static override setUp( - comfyClass: LGraphNodeConstructor, + comfyClass: typeof LGraphNode, nodeData: ComfyNodeDef, ctxClass: RgthreeBaseServerNodeConstructor, ) { @@ -201,7 +200,7 @@ export class BaseContextNode extends RgthreeBaseServerNode { 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); + LiteGraph.slot_types_default_out["RGTHREE_CONTEXT"].push((comfyClass as any).comfyClass); }); } @@ -228,7 +227,7 @@ class ContextNode extends BaseContextNode { super(title); } - static override setUp(comfyClass: LGraphNodeConstructor, nodeData: ComfyNodeDef) { + static override setUp(comfyClass: typeof LGraphNode, nodeData: ComfyNodeDef) { BaseContextNode.setUp(comfyClass, nodeData, ContextNode); } @@ -255,7 +254,7 @@ class ContextBigNode extends BaseContextNode { super(title); } - static override setUp(comfyClass: LGraphNodeConstructor, nodeData: ComfyNodeDef) { + static override setUp(comfyClass: typeof LGraphNode, nodeData: ComfyNodeDef) { BaseContextNode.setUp(comfyClass, nodeData, ContextBigNode); } @@ -328,7 +327,7 @@ class ContextSwitchNode extends BaseContextMultiCtxInputNode { super(title); } - static override setUp(comfyClass: LGraphNodeConstructor, nodeData: ComfyNodeDef) { + static override setUp(comfyClass: typeof LGraphNode, nodeData: ComfyNodeDef) { BaseContextNode.setUp(comfyClass, nodeData, ContextSwitchNode); } @@ -355,7 +354,7 @@ class ContextSwitchBigNode extends BaseContextMultiCtxInputNode { super(title); } - static override setUp(comfyClass: LGraphNodeConstructor, nodeData: ComfyNodeDef) { + static override setUp(comfyClass: typeof LGraphNode, nodeData: ComfyNodeDef) { BaseContextNode.setUp(comfyClass, nodeData, ContextSwitchBigNode); } @@ -382,7 +381,7 @@ class ContextMergeNode extends BaseContextMultiCtxInputNode { super(title); } - static override setUp(comfyClass: LGraphNodeConstructor, nodeData: ComfyNodeDef) { + static override setUp(comfyClass: typeof LGraphNode, nodeData: ComfyNodeDef) { BaseContextNode.setUp(comfyClass, nodeData, ContextMergeNode); } @@ -409,7 +408,7 @@ class ContextMergeBigNode extends BaseContextMultiCtxInputNode { super(title); } - static override setUp(comfyClass: LGraphNodeConstructor, nodeData: ComfyNodeDef) { + static override setUp(comfyClass: typeof LGraphNode, nodeData: ComfyNodeDef) { BaseContextNode.setUp(comfyClass, nodeData, ContextMergeBigNode); } @@ -445,7 +444,7 @@ function fixBadConfigs(node: ContextNode) { app.registerExtension({ name: "rgthree.Context", - async beforeRegisterNodeDef(nodeType: LGraphNodeConstructor, nodeData: ComfyNodeDef) { + async beforeRegisterNodeDef(nodeType: typeof LGraphNode, nodeData: ComfyNodeDef) { // Loop over out context nodes and see if any match the server data. for (const ctxClass of contextNodes) { if (nodeData.name === ctxClass.type) { diff --git a/src_web/comfyui/display_any.ts b/src_web/comfyui/display_any.ts index 9cf4667..f2c725a 100644 --- a/src_web/comfyui/display_any.ts +++ b/src_web/comfyui/display_any.ts @@ -1,4 +1,4 @@ -import type {LGraphNodeConstructor, LGraphNode as TLGraphNode} from "@comfyorg/litegraph"; +import type {LGraphNodeConstructor, LGraphNode as TLGraphNode} from "@comfyorg/frontend"; import type {ComfyNodeDef} from "typings/comfy.js"; import type {ComfyApp} from "@comfyorg/frontend"; @@ -11,11 +11,7 @@ let hasShownAlertForUpdatingInt = false; app.registerExtension({ name: "rgthree.DisplayAny", - async beforeRegisterNodeDef( - nodeType: LGraphNodeConstructor, - nodeData: ComfyNodeDef, - app: ComfyApp, - ) { + async beforeRegisterNodeDef(nodeType: typeof LGraphNode, nodeData: ComfyNodeDef, app: ComfyApp) { if (nodeData.name === "Display Any (rgthree)" || nodeData.name === "Display Int (rgthree)") { const onNodeCreated = nodeType.prototype.onNodeCreated; nodeType.prototype.onNodeCreated = function () { @@ -45,7 +41,7 @@ app.registerExtension({ }; }; - addConnectionLayoutSupport(nodeType, app, [["Left"], ["Right"]]); + addConnectionLayoutSupport(nodeType as LGraphNodeConstructor, app, [["Left"], ["Right"]]); const onExecuted = nodeType.prototype.onExecuted; nodeType.prototype.onExecuted = function (message: any) { diff --git a/src_web/comfyui/dynamic_context.ts b/src_web/comfyui/dynamic_context.ts index c6ca853..a964d62 100644 --- a/src_web/comfyui/dynamic_context.ts +++ b/src_web/comfyui/dynamic_context.ts @@ -6,8 +6,7 @@ import type { ISlotType, LGraphNode, LLink, - LGraphNodeConstructor -} from "@comfyorg/litegraph"; +} from "@comfyorg/frontend"; import type {ComfyNodeDef} from "typings/comfy.js"; import {app} from "scripts/app.js"; @@ -292,7 +291,7 @@ export class DynamicContextNode extends DynamicContextNodeBase { const contextDynamicNodes = [DynamicContextNode]; app.registerExtension({ name: "rgthree.DynamicContext", - async beforeRegisterNodeDef(nodeType: LGraphNodeConstructor, nodeData: ComfyNodeDef) { + async beforeRegisterNodeDef(nodeType: typeof LGraphNode, nodeData: ComfyNodeDef) { if (!CONFIG_SERVICE.getConfigValue("unreleased.dynamic_context.enabled")) { return; } diff --git a/src_web/comfyui/dynamic_context_base.ts b/src_web/comfyui/dynamic_context_base.ts index f919ab2..d9a2512 100644 --- a/src_web/comfyui/dynamic_context_base.ts +++ b/src_web/comfyui/dynamic_context_base.ts @@ -1,4 +1,4 @@ -import type {INodeInputSlot, LGraphNodeConstructor} from "@comfyorg/litegraph"; +import type {INodeInputSlot, LGraphNodeConstructor} from "@comfyorg/frontend"; import type {ComfyNodeDef} from "typings/comfy.js"; import {app} from "scripts/app.js"; @@ -23,6 +23,7 @@ export type InputLike = { label?: string; link: number | null; removable?: boolean; + boundingRect: any; }; /** @@ -128,7 +129,7 @@ export class DynamicContextNodeBase extends BaseContextNode { addContextInput(name: string, type: string, slot = -1) { const inputs = this.getContextInputsList(); if (this.hasShadowInputs) { - inputs.push({name, type, link: null}); + inputs.push({name, type, link: null, boundingRect: null}); } else { this.addInput(name, type); } @@ -221,7 +222,7 @@ export class DynamicContextNodeBase extends BaseContextNode { } } - static override setUp(comfyClass: LGraphNodeConstructor, nodeData: ComfyNodeDef) { + static override setUp(comfyClass: typeof LGraphNode, nodeData: ComfyNodeDef) { RgthreeBaseServerNode.registerForOverride(comfyClass, nodeData, this); // [🤮] ComfyUI only adds "required" inputs to the outputs list when dragging an output to // empty space, but since RGTHREE_CONTEXT is optional, it doesn't get added to the menu because @@ -231,7 +232,9 @@ export class DynamicContextNodeBase extends BaseContextNode { 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); + LiteGraph.slot_types_default_out["RGTHREE_DYNAMIC_CONTEXT"].push( + (comfyClass as LGraphNodeConstructor).comfyClass, + ); }); } } diff --git a/src_web/comfyui/dynamic_context_switch.ts b/src_web/comfyui/dynamic_context_switch.ts index 7bae5d6..b2f090b 100644 --- a/src_web/comfyui/dynamic_context_switch.ts +++ b/src_web/comfyui/dynamic_context_switch.ts @@ -5,8 +5,7 @@ import type { INodeInputSlot, INodeOutputSlot, ISlotType, - LGraphNodeConstructor, -} from "@comfyorg/litegraph"; +} from "@comfyorg/frontend"; import type {ComfyNodeDef} from "typings/comfy.js"; import {app} from "scripts/app.js"; @@ -58,7 +57,7 @@ class DynamicContextSwitchNode extends DynamicContextNodeBase { lastInputsList: ShadowInputData[] = []; private shadowInputs: (InputLike & {count: number})[] = [ - {name: "base_ctx", type: "RGTHREE_DYNAMIC_CONTEXT", link: null, count: 0}, + {name: "base_ctx", type: "RGTHREE_DYNAMIC_CONTEXT", link: null, count: 0, boundingRect: null}, ]; constructor(title = DynamicContextSwitchNode.title) { @@ -111,7 +110,7 @@ class DynamicContextSwitchNode extends DynamicContextNodeBase { */ private refreshInputsAndOutputs() { const inputs: (InputLike & {count: number})[] = [ - {name: "base_ctx", type: "RGTHREE_DYNAMIC_CONTEXT", link: null, count: 0}, + {name: "base_ctx", type: "RGTHREE_DYNAMIC_CONTEXT", link: null, count: 0, boundingRect: null}, ]; let numConnected = 0; for (let i = 0; i < this.inputs.length; i++) { @@ -141,6 +140,7 @@ class DynamicContextSwitchNode extends DynamicContextNodeBase { type: slotData.type, link: null, count: 1, + boundingRect: null, }); } } @@ -203,7 +203,7 @@ class DynamicContextSwitchNode extends DynamicContextNodeBase { app.registerExtension({ name: "rgthree.DynamicContextSwitch", - async beforeRegisterNodeDef(nodeType: LGraphNodeConstructor, nodeData: ComfyNodeDef) { + async beforeRegisterNodeDef(nodeType: typeof LGraphNode, nodeData: ComfyNodeDef) { if (!CONFIG_SERVICE.getConfigValue("unreleased.dynamic_context.enabled")) { return; } diff --git a/src_web/comfyui/fast_actions_button.ts b/src_web/comfyui/fast_actions_button.ts index 67ef7a5..821b199 100644 --- a/src_web/comfyui/fast_actions_button.ts +++ b/src_web/comfyui/fast_actions_button.ts @@ -1,14 +1,20 @@ -import type {LGraph, LGraphNode} from "@comfyorg/litegraph"; -import type {IButtonWidget, IComboWidget, IWidget} from "@comfyorg/litegraph/dist/types/widgets.js"; +import type { + LGraph, + LGraphNode, + ISerialisedNode, + IButtonWidget, + IComboWidget, + IWidget, + IBaseWidget, +} from "@comfyorg/frontend"; import type {ComfyApp} from "@comfyorg/frontend"; -import type { RgthreeBaseVirtualNode } from "./base_node.js"; +import type {RgthreeBaseVirtualNode} from "./base_node.js"; import {app} from "scripts/app.js"; import {BaseAnyInputConnectedNode} from "./base_any_input_connected_node.js"; import {NodeTypesString} from "./constants.js"; import {addMenuItem} from "./utils.js"; import {rgthree} from "./rgthree.js"; -import {ISerialisedNode} from "@comfyorg/litegraph/dist/types/serialisation.js"; const MODE_ALWAYS = 0; const MODE_MUTE = 2; @@ -218,7 +224,7 @@ class FastActionsButton extends BaseAnyInputConnectedNode { const exposedActions: string[] = (node.constructor as any).exposedActions || []; widget = this.addWidget("combo", node.title, "None", "", { values: ["None", "Mute", "Bypass", "Enable", ...exposedActions], - }); + }) as IWidget; widget.serializeValue = async (_node: LGraphNode, _index: number) => { return widget?.value; }; @@ -240,12 +246,12 @@ class FastActionsButton extends BaseAnyInputConnectedNode { return changed; } - override removeWidget(widgetOrSlot?: number | IWidget): void { - const widget = typeof widgetOrSlot === "number" ? this.widgets[widgetOrSlot] : widgetOrSlot; - if (widget && this.widgetToData.has(widget)) { - this.widgetToData.delete(widget); + override removeWidget(widget: IBaseWidget | IWidget | number | undefined): void { + widget = typeof widget === "number" ? this.widgets[widget] : widget; + if (widget && this.widgetToData.has(widget as IWidget)) { + this.widgetToData.delete(widget as IWidget); } - super.removeWidget(widgetOrSlot); + super.removeWidget(widget); } /** diff --git a/src_web/comfyui/fast_groups_bypasser.ts b/src_web/comfyui/fast_groups_bypasser.ts index ad530a7..4e18b07 100644 --- a/src_web/comfyui/fast_groups_bypasser.ts +++ b/src_web/comfyui/fast_groups_bypasser.ts @@ -1,8 +1,8 @@ -import type { Size } from "@comfyorg/litegraph"; +import type {Size} from "@comfyorg/frontend"; import {app} from "scripts/app.js"; -import { NodeTypesString } from "./constants.js"; -import { BaseFastGroupsModeChanger } from "./fast_groups_muter.js"; +import {NodeTypesString} from "./constants.js"; +import {BaseFastGroupsModeChanger} from "./fast_groups_muter.js"; /** * Fast Bypasser implementation that looks for groups in the workflow and adds toggles to mute them. diff --git a/src_web/comfyui/fast_groups_muter.ts b/src_web/comfyui/fast_groups_muter.ts index 0d0ce8a..642dff8 100644 --- a/src_web/comfyui/fast_groups_muter.ts +++ b/src_web/comfyui/fast_groups_muter.ts @@ -5,9 +5,9 @@ import type { Vector2, Size, LGraphGroup, -} from "@comfyorg/litegraph"; -import type {CanvasMouseEvent} from "@comfyorg/litegraph/dist/types/events.js"; -import type {Point} from "@comfyorg/litegraph/dist/interfaces.js"; + CanvasMouseEvent, + Point, +} from "@comfyorg/frontend"; import {app} from "scripts/app.js"; import {RgthreeBaseVirtualNode} from "./base_node.js"; @@ -191,7 +191,9 @@ export abstract class BaseFastGroupsModeChanger extends RgthreeBaseVirtualNode { // When we add a widget, litegraph is going to mess up the size, so we // store it so we can retrieve it in computeSize. Hacky.. this.tempSize = [...this.size] as Size; - widget = this.addCustomWidget(new FastGroupsToggleRowWidget(group, this)); + widget = this.addCustomWidget( + new FastGroupsToggleRowWidget(group, this), + ) as FastGroupsToggleRowWidget; this.setSize(this.computeSize()); isDirty = true; } diff --git a/src_web/comfyui/feature_group_fast_toggle.ts b/src_web/comfyui/feature_group_fast_toggle.ts index 93f1f4e..1e55dbc 100644 --- a/src_web/comfyui/feature_group_fast_toggle.ts +++ b/src_web/comfyui/feature_group_fast_toggle.ts @@ -3,9 +3,9 @@ import type { LGraphGroup as TLGraphGroup, LGraph as TLGraph, Vector2, -} from "@comfyorg/litegraph"; + CanvasMouseEvent, +} from "@comfyorg/frontend"; import type {AdjustedMouseCustomEvent} from "typings/rgthree.js"; -import type { CanvasMouseEvent } from "@comfyorg/litegraph/dist/types/events.js"; import {app} from "scripts/app.js"; import {rgthree} from "./rgthree.js"; @@ -58,7 +58,6 @@ function clickedOnToggleButton(e: CanvasMouseEvent, group: TLGraphGroup): string app.registerExtension({ name: "rgthree.GroupHeaderToggles", async setup() { - /** * LiteGraph won't call `drawGroups` unless the canvas is dirty. Other nodes will do this, but * in small workflows, we'll want to trigger it dirty so we can be drawn if we're in hover mode. diff --git a/src_web/comfyui/feature_import_individual_nodes.ts b/src_web/comfyui/feature_import_individual_nodes.ts index fd51b3f..f01aa87 100644 --- a/src_web/comfyui/feature_import_individual_nodes.ts +++ b/src_web/comfyui/feature_import_individual_nodes.ts @@ -1,4 +1,4 @@ -import type {INodeSlot, LGraphNode, LGraphNodeConstructor} from "@comfyorg/litegraph"; +import type {INodeSlot, LGraphNode, LGraphNodeConstructor} from "@comfyorg/frontend"; import type {ComfyNodeDef} from "typings/comfy.js"; import {app} from "scripts/app.js"; @@ -12,7 +12,7 @@ import {NodeTypesString} from "./constants.js"; */ app.registerExtension({ name: "rgthree.ImportIndividualNodes", - async beforeRegisterNodeDef(nodeType: LGraphNodeConstructor, nodeData: ComfyNodeDef) { + async beforeRegisterNodeDef(nodeType: typeof LGraphNode, nodeData: ComfyNodeDef) { const onDragOver = nodeType.prototype.onDragOver; nodeType.prototype.onDragOver = function (e: DragEvent) { let handled = onDragOver?.apply?.(this, [...arguments] as any); @@ -50,7 +50,7 @@ export async function importIndividualNodesInnerOnDragDrop(node: LGraphNode, e: let handled = false; const {workflow, prompt} = await tryToGetWorkflowDataFromEvent(e); const exact = (workflow?.nodes || []).find( - (n) => + (n: any) => n.id === node.id && n.type === node.type && (dynamicWidgetLengthNodes.includes(node.type) || @@ -73,19 +73,6 @@ export async function importIndividualNodesInnerOnDragDrop(node: LGraphNode, e: " Would you like to set the widget values?", ) ) { - // [🤮] Until https://github.com/Comfy-Org/ComfyUI_frontend/issues/3512 is resolved, we need - // to remove the `_layoutElement` field on inputs and outputs before calling configure. This - // field is not documented in the typing, but we can be a good citizen and store them in a map - // and add them back after the configure call. This can be removed if the above issue gets - // resolved. - const slotToLayoutElement = new Map(); - for (const slot of [...(node.inputs || []), ...(node.outputs || [])]) { - if (slot._layoutElement) { - slotToLayoutElement.set(slot, slot._layoutElement); - delete slot._layoutElement; - } - } - node.configure({ // Title is overridden if it's not supplied; set it to the current then. title: node.title, @@ -93,12 +80,6 @@ export async function importIndividualNodesInnerOnDragDrop(node: LGraphNode, e: mode: exact.mode, } as any); handled = true; - - // [🤮] Until https://github.com/Comfy-Org/ComfyUI_frontend/issues/3512 is resolved, we add - // back any `_layoutElement` we popped off for the configure call. - for (const [slot, layoutElement] of slotToLayoutElement.entries()) { - slot._layoutElement = layoutElement; - } } return handled; } diff --git a/src_web/comfyui/image_comparer.ts b/src_web/comfyui/image_comparer.ts index 52ed6f0..3c648f8 100644 --- a/src_web/comfyui/image_comparer.ts +++ b/src_web/comfyui/image_comparer.ts @@ -1,6 +1,13 @@ -import {LGraphCanvas, LGraphNode, Vector2, LGraphNodeConstructor} from "@comfyorg/litegraph"; -import type {CanvasMouseEvent} from "@comfyorg/litegraph/dist/types/events.js"; -import type {ISerialisedNode} from "@comfyorg/litegraph/dist/types/serialisation.js"; +import { + LGraphCanvas, + LGraphNode, + Vector2, + LGraphNodeConstructor, + CanvasMouseEvent, + ISerialisedNode, + Point, + CanvasPointerEvent, +} from "@comfyorg/frontend"; import type {ComfyNodeDef} from "typings/comfy.js"; import {app} from "scripts/app.js"; @@ -10,7 +17,6 @@ import {NodeTypesString} from "./constants.js"; import {addConnectionLayoutSupport} from "./utils.js"; import {RgthreeBaseHitAreas, RgthreeBaseWidget, RgthreeBaseWidgetBounds} from "./utils_widgets.js"; import {measureText} from "./utils_canvas.js"; -import {Point, Size} from "@comfyorg/litegraph/dist/interfaces.js"; type ComfyImageServerData = {filename: string; type: string; subfolder: string}; type ComfyImageData = {name: string; selected: boolean; url: string; img?: HTMLImageElement}; @@ -115,7 +121,7 @@ export class RgthreeImageComparer extends RgthreeBaseServerNode { override onNodeCreated() { this.canvasWidget = this.addCustomWidget( new RgthreeImageComparerWidget("rgthree_comparer", this), - ); + ) as RgthreeImageComparerWidget; this.setSize(this.computeSize()); this.setDirtyCanvas(true, true); } @@ -139,25 +145,25 @@ export class RgthreeImageComparer extends RgthreeBaseServerNode { } } - override onMouseDown(event: CanvasMouseEvent, pos: Point, canvas: LGraphCanvas): boolean { + override onMouseDown(event: CanvasPointerEvent, pos: Point, canvas: LGraphCanvas): boolean { super.onMouseDown?.(event, pos, canvas); this.setIsPointerDown(true); return false; } - override onMouseEnter(event: CanvasMouseEvent): void { + override onMouseEnter(event: CanvasPointerEvent): void { super.onMouseEnter?.(event); this.setIsPointerDown(!!app.canvas.pointer_is_down); this.isPointerOver = true; } - override onMouseLeave(event: CanvasMouseEvent): void { + override onMouseLeave(event: CanvasPointerEvent): void { super.onMouseLeave?.(event); this.setIsPointerDown(false); this.isPointerOver = false; } - override onMouseMove(event: MouseEvent, pos: Point, canvas: LGraphCanvas): void { + override onMouseMove(event: CanvasPointerEvent, pos: Point, canvas: LGraphCanvas): void { super.onMouseMove?.(event, pos, canvas); this.pointerOverPos = [...pos] as Point; this.imageIndex = this.pointerOverPos[0] > this.size[0] / 2 ? 1 : 0; @@ -217,7 +223,7 @@ export class RgthreeImageComparer extends RgthreeBaseServerNode { `; } - static override setUp(comfyClass: LGraphNodeConstructor, nodeData: ComfyNodeDef) { + static override setUp(comfyClass: typeof LGraphNode, nodeData: ComfyNodeDef) { RgthreeBaseServerNode.registerForOverride(comfyClass, nodeData, RgthreeImageComparer); } @@ -237,7 +243,7 @@ type RgthreeImageComparerWidgetValue = { }; class RgthreeImageComparerWidget extends RgthreeBaseWidget { - override readonly type = 'custom'; + override readonly type = "custom"; private node: RgthreeImageComparer; @@ -466,7 +472,7 @@ class RgthreeImageComparerWidget extends RgthreeBaseWidget) { + LiteGraph.ContextMenu = function ( + values: IContextMenuValue[], + options: IContextMenuOptions, + ) { const threshold = CONFIG_SERVICE.getConfigValue("features.menu_auto_nest.threshold", 20); const enabled = CONFIG_SERVICE.getConfigValue("features.menu_auto_nest.subdirs", false); @@ -54,7 +57,7 @@ app.registerExtension({ return existingContextMenu.apply(this as any, [...arguments] as any); } - const folders: { [key: string]: IContextMenuValue[] } = {}; + const folders: {[key: string]: IContextMenuValue[]} = {}; const specialOps: IContextMenuValue[] = []; const folderless: IContextMenuValue[] = []; for (const value of values) { @@ -62,9 +65,9 @@ app.registerExtension({ folderless.push(value); continue; } - const newValue = typeof value === "string" ? { content: value } : Object.assign({}, value); + const newValue = typeof value === "string" ? {content: value} : Object.assign({}, value); (newValue as any).rgthree_originalValue = (value as any).rgthree_originalValue || value; - const valueContent = newValue.content || ''; + const valueContent = newValue.content || ""; const splitBy = valueContent.indexOf("/") > -1 ? "/" : "\\"; const valueSplit = valueContent.split(splitBy); if (valueSplit.length > 1) { @@ -83,7 +86,7 @@ app.registerExtension({ if (foldersCount > 0) { // Propogate the original callback down through the options. (options as any).rgthree_originalCallback = - (options as any).rgthree_originalCallback || + (options as any).rgthree_originalCallback || (options.parentMenu?.options as any)?.rgthree_originalCallback || options.callback; const oldCallback = (options as any)?.rgthree_originalCallback; @@ -118,7 +121,7 @@ app.registerExtension({ values = ([] as IContextMenuValue[]).concat( specialOps.map((f) => { if (typeof f === "string") { - f = { content: f }; + f = {content: f}; } f!.callback = newCallback; return f; @@ -126,7 +129,7 @@ app.registerExtension({ newValues, folderless.map((f) => { if (typeof f === "string") { - f = { content: f }; + f = {content: f}; } f!.callback = newCallback; return f; diff --git a/src_web/comfyui/menu_copy_image.ts b/src_web/comfyui/menu_copy_image.ts index 9403226..b4c5dac 100644 --- a/src_web/comfyui/menu_copy_image.ts +++ b/src_web/comfyui/menu_copy_image.ts @@ -1,4 +1,4 @@ -import type {IContextMenuValue, LGraphCanvas, LGraphNodeConstructor} from "@comfyorg/litegraph"; +import type {IContextMenuValue, LGraphCanvas} from "@comfyorg/frontend"; import type {ComfyNodeDef} from "typings/comfy.js"; import {app} from "scripts/app.js"; @@ -31,7 +31,7 @@ const clipboardSupportedPromise = new Promise(async (resolve) => { */ app.registerExtension({ name: "rgthree.CopyImageToClipboard", - async beforeRegisterNodeDef(nodeType: LGraphNodeConstructor, nodeData: ComfyNodeDef) { + async beforeRegisterNodeDef(nodeType: typeof LGraphNode, nodeData: ComfyNodeDef) { if (nodeData.name.toLowerCase().includes("image")) { if (await clipboardSupportedPromise) { const getExtraMenuOptions = nodeType.prototype.getExtraMenuOptions; diff --git a/src_web/comfyui/menu_queue_node.ts b/src_web/comfyui/menu_queue_node.ts index cc7e397..eee283d 100644 --- a/src_web/comfyui/menu_queue_node.ts +++ b/src_web/comfyui/menu_queue_node.ts @@ -1,4 +1,8 @@ -import type {IContextMenuValue, LGraphCanvas as TLGraphCanvas, LGraphNodeConstructor} from "@comfyorg/litegraph"; +import type { + IContextMenuValue, + LGraphCanvas as TLGraphCanvas, + LGraphNode, +} from "@comfyorg/frontend"; import type {ComfyNodeDef} from "typings/comfy.js"; import {app} from "scripts/app.js"; @@ -41,7 +45,7 @@ function showQueueGroupNodesMenuIfGroupIsSelected( rgthree.lastCanvasMouseEvent.canvasY, ); - const outputNodes = group && getOutputNodes(group._nodes); + const outputNodes: LGraphNode[] | null = (group && getOutputNodes(group._nodes)) || null; const menuItem = { content: `Queue Group Output Nodes (rgthree)  `, className: "rgthree-contextmenu-item", @@ -64,7 +68,7 @@ function showQueueGroupNodesMenuIfGroupIsSelected( */ app.registerExtension({ name: "rgthree.QueueNode", - async beforeRegisterNodeDef(nodeType: LGraphNodeConstructor, nodeData: ComfyNodeDef) { + async beforeRegisterNodeDef(nodeType: typeof LGraphNode, nodeData: ComfyNodeDef) { const getExtraMenuOptions = nodeType.prototype.getExtraMenuOptions; nodeType.prototype.getExtraMenuOptions = function ( canvas: TLGraphCanvas, diff --git a/src_web/comfyui/muter.ts b/src_web/comfyui/muter.ts index d36dab6..89fe00f 100644 --- a/src_web/comfyui/muter.ts +++ b/src_web/comfyui/muter.ts @@ -1,8 +1,8 @@ -import type { LGraphNode } from "@comfyorg/litegraph"; +import type {LGraphNode} from "@comfyorg/frontend"; import {app} from "scripts/app.js"; -import { BaseNodeModeChanger } from "./base_node_mode_changer.js"; -import { NodeTypesString } from "./constants.js"; +import {BaseNodeModeChanger} from "./base_node_mode_changer.js"; +import {NodeTypesString} from "./constants.js"; const MODE_MUTE = 2; const MODE_ALWAYS = 0; diff --git a/src_web/comfyui/node_collector.ts b/src_web/comfyui/node_collector.ts index 6ed2954..589b049 100644 --- a/src_web/comfyui/node_collector.ts +++ b/src_web/comfyui/node_collector.ts @@ -7,9 +7,9 @@ import type { ContextMenu, IContextMenuValue, Size, -} from "@comfyorg/litegraph"; -import type {ISerialisedNode} from "@comfyorg/litegraph/dist/types/serialisation.js"; -import type {Point} from "@comfyorg/litegraph/dist/interfaces"; + ISerialisedNode, + Point, +} from "@comfyorg/frontend"; import {app} from "scripts/app.js"; import {addConnectionLayoutSupport} from "./utils.js"; diff --git a/src_web/comfyui/node_mode_relay.ts b/src_web/comfyui/node_mode_relay.ts index 0a0bbac..005c097 100644 --- a/src_web/comfyui/node_mode_relay.ts +++ b/src_web/comfyui/node_mode_relay.ts @@ -6,7 +6,8 @@ import type { LGraphNode, LLink, Vector2, -} from "@comfyorg/litegraph"; + ISerialisedNode, +} from "@comfyorg/frontend"; import {app} from "scripts/app.js"; import { @@ -15,12 +16,11 @@ import { getConnectedInputNodesAndFilterPassThroughs, getConnectedOutputNodesAndFilterPassThroughs, } from "./utils.js"; -import { wait } from "rgthree/common/shared_utils.js"; -import { BaseCollectorNode } from "./base_node_collector.js"; -import { NodeTypesString, stripRgthree } from "./constants.js"; -import { fitString } from "./utils_canvas.js"; -import { rgthree } from "./rgthree.js"; -import { ISerialisedNode } from "@comfyorg/litegraph/dist/types/serialisation.js"; +import {wait} from "rgthree/common/shared_utils.js"; +import {BaseCollectorNode} from "./base_node_collector.js"; +import {NodeTypesString, stripRgthree} from "./constants.js"; +import {fitString} from "./utils_canvas.js"; +import {rgthree} from "./rgthree.js"; const MODE_ALWAYS = 0; const MODE_MUTE = 2; diff --git a/src_web/comfyui/node_mode_repeater.ts b/src_web/comfyui/node_mode_repeater.ts index 134445e..aa82a6e 100644 --- a/src_web/comfyui/node_mode_repeater.ts +++ b/src_web/comfyui/node_mode_repeater.ts @@ -5,18 +5,17 @@ import type { LGraphGroup, LGraphNode, LLink, -} from "@comfyorg/litegraph"; +} from "@comfyorg/frontend"; import {app} from "scripts/app.js"; -import { BaseCollectorNode } from "./base_node_collector.js"; -import { NodeTypesString, stripRgthree } from "./constants.js"; +import {BaseCollectorNode} from "./base_node_collector.js"; +import {NodeTypesString, stripRgthree} from "./constants.js"; import { PassThroughFollowing, addConnectionLayoutSupport, getConnectedInputNodesAndFilterPassThroughs, getConnectedOutputNodesAndFilterPassThroughs, } from "./utils.js"; -import { ISerialisedNode } from "@comfyorg/litegraph/dist/types/serialisation.js"; class NodeModeRepeater extends BaseCollectorNode { override readonly inputsPassThroughFollowing: PassThroughFollowing = PassThroughFollowing.ALL; diff --git a/src_web/comfyui/power_conductor.ts b/src_web/comfyui/power_conductor.ts index cfc6bf7..a3ae5fd 100644 --- a/src_web/comfyui/power_conductor.ts +++ b/src_web/comfyui/power_conductor.ts @@ -1,5 +1,5 @@ import type {Parser, Node, Tree} from "web-tree-sitter"; -import type {IStringWidget, IWidget} from "@comfyorg/litegraph/dist/types/widgets"; +import type {IStringWidget, IWidget} from "@comfyorg/frontend"; import {app} from "scripts/app.js"; import {Exposed, execute, PyTuple} from "rgthree/common/py_parser.js"; @@ -77,7 +77,7 @@ class ComfyNodeWrapper { } @Exposed get widgets() { - return new PyTuple(this.getNode().widgets?.map((w) => new ComfyWidgetWrapper(w))); + return new PyTuple(this.getNode().widgets?.map((w) => new ComfyWidgetWrapper(w as IWidget))); } @Exposed get mode() { diff --git a/src_web/comfyui/power_lora_loader.ts b/src_web/comfyui/power_lora_loader.ts index 9e023cd..76585d0 100644 --- a/src_web/comfyui/power_lora_loader.ts +++ b/src_web/comfyui/power_lora_loader.ts @@ -4,13 +4,13 @@ import type { Vector2, IContextMenuValue, IFoundSlot, - LGraphNodeConstructor, -} from "@comfyorg/litegraph"; -import type {CanvasMouseEvent} from "@comfyorg/litegraph/dist/types/events.js"; -import type {ISerialisedNode} from "@comfyorg/litegraph/dist/types/serialisation.js"; -import type {ICustomWidget} from "@comfyorg/litegraph/dist/types/widgets"; -import type {RgthreeModelInfo} from "typings/rgthree.js"; + CanvasMouseEvent, + ISerialisedNode, + ICustomWidget, + CanvasPointerEvent, +} from "@comfyorg/frontend"; import type {ComfyNodeDef} from "typings/comfy.js"; +import type {RgthreeModelInfo} from "typings/rgthree.js"; import {app} from "scripts/app.js"; import {RgthreeBaseServerNode} from "./base_node.js"; @@ -118,7 +118,7 @@ class RgthreePowerLoraLoader extends RgthreeBaseServerNode { this.loraWidgetsCounter++; const widget = this.addCustomWidget( new PowerLoraLoaderWidget("lora_" + this.loraWidgetsCounter), - ); + ) as PowerLoraLoaderWidget; if (lora) widget.setLora(lora); if (this.widgetButtonSpacer) { moveArrayItem(this.widgets, widget, this.widgets.indexOf(this.widgetButtonSpacer)); @@ -138,7 +138,7 @@ class RgthreePowerLoraLoader extends RgthreeBaseServerNode { this.widgetButtonSpacer = this.addCustomWidget( new RgthreeDividerWidget({marginTop: 4, marginBottom: 0, thickness: 0}), - ); + ) as RgthreeDividerWidget; this.addCustomWidget( new RgthreeBetterButtonWidget( @@ -322,7 +322,7 @@ class RgthreePowerLoraLoader extends RgthreeBaseServerNode { } } - static override setUp(comfyClass: LGraphNodeConstructor, nodeData: ComfyNodeDef) { + static override setUp(comfyClass: typeof LGraphNode, nodeData: ComfyNodeDef) { RgthreeBaseServerNode.registerForOverride(comfyClass, nodeData, NODE_CLASS); } @@ -745,22 +745,22 @@ class PowerLoraLoaderWidget extends RgthreeBaseWidget (this.value[prop] = Number(v)), event); } - override onMouseUp(event: CanvasMouseEvent, pos: Vector2, node: TLGraphNode): boolean | void { + override onMouseUp(event: CanvasPointerEvent, pos: Vector2, node: TLGraphNode): boolean | void { super.onMouseUp(event, pos, node); this.haveMouseMovedStrength = false; } @@ -804,7 +804,7 @@ const NODE_CLASS = RgthreePowerLoraLoader; /** Register the node. */ app.registerExtension({ name: "rgthree.PowerLoraLoader", - async beforeRegisterNodeDef(nodeType: LGraphNodeConstructor, nodeData: ComfyNodeDef) { + async beforeRegisterNodeDef(nodeType: typeof LGraphNode, nodeData: ComfyNodeDef) { if (nodeData.name === NODE_CLASS.type) { NODE_CLASS.setUp(nodeType, nodeData); } diff --git a/src_web/comfyui/power_primitive.ts b/src_web/comfyui/power_primitive.ts index f4d7dd3..a4e4847 100644 --- a/src_web/comfyui/power_primitive.ts +++ b/src_web/comfyui/power_primitive.ts @@ -6,10 +6,10 @@ import type { IContextMenuValue, INodeOutputSlot, ISlotType, - LGraphNode, + ISerialisedNode, LLink, -} from "@comfyorg/litegraph"; -import type {ISerialisedNode} from "@comfyorg/litegraph/dist/types/serialisation.js"; + IBaseWidget, +} from "@comfyorg/frontend"; import type {ComfyNodeDef} from "typings/comfy.js"; import {app} from "scripts/app.js"; @@ -47,7 +47,7 @@ class RgthreePowerPrimitive extends RgthreeBaseServerNode { this.properties[PROPERTY_HIDE_TYPE_SELECTOR] = false; } - static override setUp(comfyClass: LGraphNodeConstructor, nodeData: ComfyNodeDef) { + static override setUp(comfyClass: typeof LGraphNode, nodeData: ComfyNodeDef) { RgthreeBaseServerNode.registerForOverride(comfyClass, nodeData, NODE_CLASS); } @@ -124,7 +124,7 @@ class RgthreePowerPrimitive extends RgthreeBaseServerNode { { values: Object.keys(PRIMITIVES), }, - ); + ) as IWidget; this.outputTypeWidget.hidden = this.properties[PROPERTY_HIDE_TYPE_SELECTOR]; } this.setTypedData(); @@ -143,7 +143,7 @@ class RgthreePowerPrimitive extends RgthreeBaseServerNode { this.typeState = newTypeState; let value = this.valueWidget?.value ?? null; - let newWidget = null; + let newWidget: IWidget | null= null; // If we're linked, then set the UI to an empty string widget input, since the ComfyUI is rather // confusing by showing a value that is not the actual value used (from the input). if (linked) { @@ -154,10 +154,10 @@ class RgthreePowerPrimitive extends RgthreeBaseServerNode { newWidget.value = value ? "" : String(value); } else if (type === "INT" || type === "FLOAT") { const isFloat = type === "FLOAT"; - newWidget = this.addWidget("number", name, value ?? 1, undefined, { + newWidget = this.addWidget("number", name, value ?? 1 as any, undefined, { precision: isFloat ? 1 : 0, step2: isFloat ? 0.1 : 0, - }); + }) as IWidget; value = Number(value); value = value == null || isNaN(value) ? 0 : value; newWidget.value = value; @@ -165,7 +165,7 @@ class RgthreePowerPrimitive extends RgthreeBaseServerNode { newWidget = this.addWidget("toggle", name, !!(value ?? true), undefined, { on: "true", off: "false", - }); + }) as IWidget; if (typeof value === "string") { value = !["false", "null", "None", "", "0"].includes(value.toLowerCase()); } @@ -187,9 +187,9 @@ class RgthreePowerPrimitive extends RgthreeBaseServerNode { // Set the input data. if (!this.inputs?.length) { - this.addInput("value", "*", {widget: this.valueWidget}); + this.addInput("value", "*", {widget: this.valueWidget as any}); } else { - this.inputs[0]!.widget = this.valueWidget; + this.inputs[0]!.widget = this.valueWidget as any; } // Set the output data. @@ -246,7 +246,7 @@ const NODE_CLASS = RgthreePowerPrimitive; /** Register the node. */ app.registerExtension({ name: "rgthree.PowerPrimitive", - async beforeRegisterNodeDef(nodeType: LGraphNodeConstructor, nodeData: ComfyNodeDef) { + async beforeRegisterNodeDef(nodeType: typeof LGraphNode, nodeData: ComfyNodeDef) { if (nodeData.name === NODE_CLASS.type) { NODE_CLASS.setUp(nodeType, nodeData); } diff --git a/src_web/comfyui/power_prompt.ts b/src_web/comfyui/power_prompt.ts index a80c7fd..5a8ede7 100644 --- a/src_web/comfyui/power_prompt.ts +++ b/src_web/comfyui/power_prompt.ts @@ -1,4 +1,4 @@ -import type {LGraphNode, LGraphNodeConstructor} from "@comfyorg/litegraph"; +import type {LGraphNode, LGraphNodeConstructor} from "@comfyorg/frontend"; import type {ComfyNodeDef} from "typings/comfy.js"; import {app} from "scripts/app.js"; @@ -9,7 +9,7 @@ import {NodeTypesString} from "./constants.js"; let nodeData: ComfyNodeDef | null = null; app.registerExtension({ name: "rgthree.PowerPrompt", - async beforeRegisterNodeDef(nodeType: LGraphNodeConstructor, passedNodeData: ComfyNodeDef) { + async beforeRegisterNodeDef(nodeType: typeof LGraphNode, passedNodeData: ComfyNodeDef) { if (passedNodeData.name.includes("Power Prompt") && passedNodeData.name.includes("rgthree")) { nodeData = passedNodeData; const onNodeCreated = nodeType.prototype.onNodeCreated; @@ -17,7 +17,7 @@ app.registerExtension({ onNodeCreated ? onNodeCreated.apply(this, []) : undefined; (this as any).powerPrompt = new PowerPrompt(this as LGraphNode, passedNodeData); }; - addConnectionLayoutSupport(nodeType, app, [ + addConnectionLayoutSupport(nodeType as LGraphNodeConstructor, app, [ ["Left", "Right"], ["Right", "Left"], ]); diff --git a/src_web/comfyui/power_puter.ts b/src_web/comfyui/power_puter.ts index 8b2df61..0b9ea8e 100644 --- a/src_web/comfyui/power_puter.ts +++ b/src_web/comfyui/power_puter.ts @@ -3,11 +3,9 @@ import type { IWidget, LGraphNodeConstructor, Vector2, - Vector4, -} from "@comfyorg/litegraph"; + CanvasMouseEvent, +} from "@comfyorg/frontend"; import type {ComfyNodeDef} from "typings/comfy.js"; -import type {CanvasMouseEvent} from "@comfyorg/litegraph/dist/types/events.js"; -import type {ISerialisedNode} from "@comfyorg/litegraph/dist/types/serialisation.js"; import {app} from "scripts/app.js"; import {RgthreeBaseServerNode} from "./base_node.js"; @@ -25,6 +23,8 @@ import { } from "./utils_canvas.js"; import {rgthree} from "./rgthree.js"; +type Vector4 = [number, number, number, number]; + const ALPHABET = "abcdefghijklmnopqrstuv".split(""); const OUTPUT_TYPES = ["STRING", "INT", "FLOAT", "BOOLEAN", "*"]; @@ -55,7 +55,7 @@ class RgthreePowerPuter extends RgthreeBaseServerNode { // this.outputTypeWidget // } - static override setUp(comfyClass: LGraphNodeConstructor, nodeData: ComfyNodeDef) { + static override setUp(comfyClass: typeof LGraphNode, nodeData: ComfyNodeDef) { RgthreeBaseServerNode.registerForOverride(comfyClass, nodeData, NODE_CLASS); } @@ -76,7 +76,9 @@ class RgthreePowerPuter extends RgthreeBaseServerNode { private addInitialWidgets() { if (!this.outputTypeWidget) { - this.outputTypeWidget = this.addCustomWidget(new OutputsWidget("outputs", this)); + this.outputTypeWidget = this.addCustomWidget( + new OutputsWidget("outputs", this), + ) as OutputsWidget; this.expressionWidget = ComfyWidgets["STRING"]( this, "code", @@ -209,7 +211,7 @@ class OutputsWidget extends RgthreeBaseWidget { // Handle a string being passed in, as the original Power Puter output widget was a string. let outputs = typeof v === "string" ? [v] : [...v.outputs]; // Handle a case where the initial version used "BOOL" instead of "BOOLEAN" incorrectly. - outputs = outputs.map(o => o === 'BOOL' ? 'BOOLEAN' : o) + outputs = outputs.map((o) => (o === "BOOL" ? "BOOLEAN" : o)); this._value.outputs = outputs; } @@ -452,7 +454,7 @@ class OutputsWidget extends RgthreeBaseWidget { /** Register the node. */ app.registerExtension({ name: "rgthree.PowerPuter", - async beforeRegisterNodeDef(nodeType: LGraphNodeConstructor, nodeData: ComfyNodeDef) { + async beforeRegisterNodeDef(nodeType: typeof LGraphNode, nodeData: ComfyNodeDef) { if (nodeData.name === NODE_CLASS.type) { NODE_CLASS.setUp(nodeType, nodeData); } diff --git a/src_web/comfyui/random_unmuter.ts b/src_web/comfyui/random_unmuter.ts index 82c3816..4485f3e 100644 --- a/src_web/comfyui/random_unmuter.ts +++ b/src_web/comfyui/random_unmuter.ts @@ -1,10 +1,10 @@ -import type { LGraphNode } from "@comfyorg/litegraph"; +import type {LGraphNode} from "@comfyorg/frontend"; import {app} from "scripts/app.js"; -import { BaseAnyInputConnectedNode } from "./base_any_input_connected_node.js"; -import { NodeTypesString } from "./constants.js"; -import { rgthree } from "./rgthree.js"; -import { getConnectedInputNodesAndFilterPassThroughs } from "./utils.js"; +import {BaseAnyInputConnectedNode} from "./base_any_input_connected_node.js"; +import {NodeTypesString} from "./constants.js"; +import {rgthree} from "./rgthree.js"; +import {getConnectedInputNodesAndFilterPassThroughs} from "./utils.js"; const MODE_MUTE = 2; const MODE_ALWAYS = 0; diff --git a/src_web/comfyui/reroute.ts b/src_web/comfyui/reroute.ts index cba7b08..e0d06c6 100644 --- a/src_web/comfyui/reroute.ts +++ b/src_web/comfyui/reroute.ts @@ -6,10 +6,11 @@ import type { INodeInputSlot, INodeOutputSlot, LGraphNode as TLGraphNode, -} from "@comfyorg/litegraph"; -import type {LinkDirection} from "@comfyorg/litegraph/dist/types/globalEnums.js"; -import type {ISerialisedNode} from "@comfyorg/litegraph/dist/types/serialisation.js"; -import type {Point, Size} from "@comfyorg/litegraph/dist/interfaces.js"; + LinkDirection, + ISerialisedNode, + Point, + Size, +} from "@comfyorg/frontend"; import {app} from "scripts/app.js"; import { diff --git a/src_web/comfyui/rgthree.ts b/src_web/comfyui/rgthree.ts index 4c05f85..942713f 100644 --- a/src_web/comfyui/rgthree.ts +++ b/src_web/comfyui/rgthree.ts @@ -5,12 +5,11 @@ import type { LGraph as TLGraph, IContextMenuOptions, ISerialisedGraph, -} from "@comfyorg/litegraph"; -import type { CanvasMouseEvent, CanvasPointerExtensions, -} from "@comfyorg/litegraph/dist/types/events.js"; -import type {NodeId} from "@comfyorg/litegraph/dist/LGraphNode.js"; + NodeId, + ISerialisedNode, +} from "@comfyorg/frontend"; import type {ComfyApiFormat, ComfyApiPrompt} from "typings/comfy.js"; import type {Bookmark} from "./bookmark.js"; import type {ComfyApp} from "@comfyorg/frontend"; @@ -33,7 +32,6 @@ import { logoRgthree, } from "rgthree/common/media/svgs.js"; import {createElement, queryAll, query} from "rgthree/common/utils_dom.js"; -import { ISerialisedNode } from "@comfyorg/litegraph/dist/types/serialisation.js"; export enum LogLevel { IMPORTANT = 1, @@ -231,7 +229,7 @@ class Rgthree extends EventTarget { /** Stores a node id that we will use to queu only that output node (with `queueOutputNode`). */ private queueNodeIds: NodeId[] | null = null; - readonly version = CONFIG_SERVICE.getConfigValue('version'); + readonly version = CONFIG_SERVICE.getConfigValue("version"); logger = new LogSession("[rgthree]"); @@ -852,7 +850,7 @@ class Rgthree extends EventTarget { */ getNodeFromInitialGraphToPromptSerializedWorkflowBecauseComfyUIBrokeStuff( node: LGraphNode, - ): ISerialisedNode | null { + ): ISerialisedNode | null { return ( this.initialGraphToPromptSerializedWorkflowBecauseComfyUIBrokeStuff?.nodes?.find( (n: ISerialisedNode) => n.id === node.id, @@ -1031,15 +1029,14 @@ export const rgthree = new Rgthree(); // Expose it on window because, why not. (window as any).rgthree = rgthree; - app.registerExtension({ - name: "Comfy.RgthreeComfy", + name: "Comfy.RgthreeComfy", - aboutPageBadges: [ - { - label: `rgthree-comfy v${rgthree.version}`, - url: 'https://github.com/rgthree/rgthree-comfy', - icon: 'rgthree-comfy-about-badge-logo' - } - ], -}) \ No newline at end of file + aboutPageBadges: [ + { + label: `rgthree-comfy v${rgthree.version}`, + url: "https://github.com/rgthree/rgthree-comfy", + icon: "rgthree-comfy-about-badge-logo", + }, + ], +}); diff --git a/src_web/comfyui/seed.ts b/src_web/comfyui/seed.ts index 188bc71..8e749fa 100644 --- a/src_web/comfyui/seed.ts +++ b/src_web/comfyui/seed.ts @@ -5,17 +5,18 @@ import type { IWidget, LGraphCanvas, IContextMenuValue, - LGraphNodeConstructor -} from "@comfyorg/litegraph"; -import type {ISerialisedNode} from "@comfyorg/litegraph/dist/types/serialisation"; + LGraphNodeConstructor, + ISerialisedNode, + IButtonWidget, +} from "@comfyorg/frontend"; import type {ComfyNodeDef, ComfyApiPrompt} from "typings/comfy.js"; import {app} from "scripts/app.js"; -import { ComfyWidgets } from "scripts/widgets.js"; -import { RgthreeBaseServerNode } from "./base_node.js"; -import { rgthree } from "./rgthree.js"; -import { addConnectionLayoutSupport } from "./utils.js"; -import { NodeTypesString } from "./constants.js"; +import {ComfyWidgets} from "scripts/widgets.js"; +import {RgthreeBaseServerNode} from "./base_node.js"; +import {rgthree} from "./rgthree.js"; +import {addConnectionLayoutSupport} from "./utils.js"; +import {NodeTypesString} from "./constants.js"; const LAST_SEED_BUTTON_LABEL = "♻️ (Use Last Queued Seed)"; @@ -111,35 +112,35 @@ class RgthreeSeed extends RgthreeBaseServerNode { this.addWidget( "button", "🎲 Randomize Each Time", - '', + "", () => { this.seedWidget.value = SPECIAL_SEED_RANDOM; }, - { serialize: false }, + {serialize: false}, ); this.addWidget( "button", "🎲 New Fixed Random", - '', + "", () => { this.seedWidget.value = Math.floor(Math.random() * this.randomRange) * (step / 10) + this.randMin; }, - { serialize: false }, + {serialize: false}, ); this.lastSeedButton = this.addWidget( "button", LAST_SEED_BUTTON_LABEL, - '', + "", () => { this.seedWidget.value = this.lastSeed != null ? this.lastSeed : this.seedWidget.value; this.lastSeedButton.name = LAST_SEED_BUTTON_LABEL; this.lastSeedButton.disabled = true; }, - { width: 50, serialize: false }, - ); + {width: 50, serialize: false} as any, + ) as IButtonWidget; this.lastSeedButton.disabled = true; } @@ -170,7 +171,7 @@ class RgthreeSeed extends RgthreeBaseServerNode { this.lastSeedValue = ComfyWidgets["STRING"]( this, "last_seed", - ["STRING", { multiline: true }], + ["STRING", {multiline: true}], app, ).widget as unknown as IWidget; this.lastSeedValue!.inputEl!.readOnly = true; @@ -272,7 +273,7 @@ class RgthreeSeed extends RgthreeBaseServerNode { return seedToUse ?? inputSeed; } - static override setUp(comfyClass: LGraphNodeConstructor, nodeData: ComfyNodeDef) { + static override setUp(comfyClass: typeof LGraphNode, nodeData: ComfyNodeDef) { RgthreeBaseServerNode.registerForOverride(comfyClass, nodeData, RgthreeSeed); } @@ -289,7 +290,7 @@ class RgthreeSeed extends RgthreeBaseServerNode { app.registerExtension({ name: "rgthree.Seed", - async beforeRegisterNodeDef(nodeType: LGraphNodeConstructor, nodeData: ComfyNodeDef) { + async beforeRegisterNodeDef(nodeType: typeof LGraphNode, nodeData: ComfyNodeDef) { if (nodeData.name === RgthreeSeed.type) { RgthreeSeed.setUp(nodeType, nodeData); } diff --git a/src_web/comfyui/services/config_service.ts b/src_web/comfyui/services/config_service.ts index 0b409c6..4737ab1 100644 --- a/src_web/comfyui/services/config_service.ts +++ b/src_web/comfyui/services/config_service.ts @@ -1,7 +1,7 @@ // @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"; +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. @@ -20,14 +20,14 @@ class ConfigService extends EventTarget { * 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 }) { + 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 }); + 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 } })); + this.dispatchEvent(new CustomEvent("config-change", {detail: {key, value}})); } } else { return false; diff --git a/src_web/comfyui/services/context_service.ts b/src_web/comfyui/services/context_service.ts index c0a8227..3a3cfaf 100644 --- a/src_web/comfyui/services/context_service.ts +++ b/src_web/comfyui/services/context_service.ts @@ -2,7 +2,7 @@ import type {DynamicContextNodeBase} from "../dynamic_context_base.js"; import {NodeTypesString} from "../constants.js"; import {getConnectedOutputNodesAndFilterPassThroughs} from "../utils.js"; -import {INodeInputSlot, INodeOutputSlot, INodeSlot, LGraphNode} from "@comfyorg/litegraph"; +import {INodeInputSlot, INodeOutputSlot, INodeSlot, LGraphNode} from "@comfyorg/frontend"; export let SERVICE: ContextService; @@ -34,7 +34,6 @@ export type InputMutation = { }; export class ContextService { - constructor() { if (SERVICE) { throw new Error("ContextService was already instantiated."); diff --git a/src_web/comfyui/services/fast_groups_service.ts b/src_web/comfyui/services/fast_groups_service.ts index af3bcd5..8f233ce 100644 --- a/src_web/comfyui/services/fast_groups_service.ts +++ b/src_web/comfyui/services/fast_groups_service.ts @@ -1,13 +1,14 @@ -import type {BaseFastGroupsModeChanger} from "../fast_groups_muter.js"; import type { LGraph as TLGraph, LGraphCanvas as TLGraphCanvas, LGraphGroup, - Vector4, -} from "@comfyorg/litegraph"; +} from "@comfyorg/frontend"; +import type {BaseFastGroupsModeChanger} from "../fast_groups_muter.js"; import {app} from "scripts/app.js"; +type Vector4 = [number, number, number, number]; + /** * A service that keeps global state that can be shared by multiple FastGroupsMuter or * FastGroupsBypasser nodes rather than calculate it on it's own. @@ -142,9 +143,7 @@ class FastGroupsService { this.groupsUnsorted = [...graph._groups]; for (const group of this.groupsUnsorted) { this.recomputeInsideNodesForGroup(group); - group.rgthree_hasAnyActiveNode = group._nodes.some( - (n) => n.mode === LiteGraph.ALWAYS, - ); + group.rgthree_hasAnyActiveNode = group._nodes.some((n) => n.mode === LiteGraph.ALWAYS); } this.msLastUnsorted = now; } diff --git a/src_web/comfyui/testing/comfyui_env.ts b/src_web/comfyui/testing/comfyui_env.ts index 8dd70f0..23d8833 100644 --- a/src_web/comfyui/testing/comfyui_env.ts +++ b/src_web/comfyui/testing/comfyui_env.ts @@ -1,4 +1,4 @@ -import type {LGraphNode} from "@comfyorg/litegraph"; +import type {LGraphNode} from "@comfyorg/frontend"; import {app} from "scripts/app.js"; import {wait} from "rgthree/common/shared_utils.js"; diff --git a/src_web/comfyui/tests/context_dynamic_tests.ts b/src_web/comfyui/tests/context_dynamic_tests.ts index 13082bf..45c2b2c 100644 --- a/src_web/comfyui/tests/context_dynamic_tests.ts +++ b/src_web/comfyui/tests/context_dynamic_tests.ts @@ -1,4 +1,4 @@ -import type {LGraphNode} from "@comfyorg/litegraph"; +import type {LGraphNode} from "@comfyorg/frontend"; import {NodeTypesString} from "../constants.js"; import {wait} from "rgthree/common/shared_utils.js"; diff --git a/src_web/comfyui/tests/image_or_latent_size_tests.ts b/src_web/comfyui/tests/image_or_latent_size_tests.ts index 6636098..3c35972 100644 --- a/src_web/comfyui/tests/image_or_latent_size_tests.ts +++ b/src_web/comfyui/tests/image_or_latent_size_tests.ts @@ -1,4 +1,4 @@ -import type {LGraphNode} from "@comfyorg/litegraph"; +import type {LGraphNode} from "@comfyorg/frontend"; import {NodeTypesString} from "../constants"; import {ComfyUITestEnvironment} from "../testing/comfyui_env"; diff --git a/src_web/comfyui/tests/power_puter.ts b/src_web/comfyui/tests/power_puter.ts index e9d8e97..2edf0ff 100644 --- a/src_web/comfyui/tests/power_puter.ts +++ b/src_web/comfyui/tests/power_puter.ts @@ -1,4 +1,4 @@ -import type {LGraphNode} from "@comfyorg/litegraph"; +import type {LGraphNode} from "@comfyorg/frontend"; import {NodeTypesString} from "../constants"; import {ComfyUITestEnvironment} from "../testing/comfyui_env"; diff --git a/src_web/comfyui/utils.ts b/src_web/comfyui/utils.ts index 1647095..da75f81 100644 --- a/src_web/comfyui/utils.ts +++ b/src_web/comfyui/utils.ts @@ -12,8 +12,12 @@ import type { IContextMenuValue, ISlotType, LGraphNodeConstructor, -} from "@comfyorg/litegraph"; -import type {ComfyApp} from "@comfyorg/frontend"; + LGraphEventMode, + NodeProperty, + LinkDirection, + Point, + ComfyApp, +} from "@comfyorg/frontend"; import type {ComfyNodeDef} from "typings/comfy.js"; import type {Constructor} from "typings/rgthree"; @@ -21,9 +25,6 @@ import {app} from "scripts/app.js"; import {api} from "scripts/api.js"; import {Resolver, getResolver, wait} from "rgthree/common/shared_utils.js"; import {RgthreeHelpDialog} from "rgthree/common/dialog.js"; -import {NodeProperty} from "@comfyorg/litegraph/dist/LGraphNode"; -import {LinkDirection} from "@comfyorg/litegraph/dist/types/globalEnums"; -import {Point} from "@comfyorg/litegraph/dist/interfaces"; /** * Override the api.getNodeDefs call to add a hook for refreshing node defs. @@ -564,11 +565,11 @@ export function getConnectedNodesInfo( linkIds = currentNode.inputs?.map((i) => i.link) || []; } } - let graph = app.graph as LGraph; + let graph = app.graph; for (const linkId of linkIds) { let link: LLink | null = null; if (typeof linkId == "number") { - link = graph.links[linkId] as LLink; + link = graph.links[linkId] ?? null; } if (!link) { continue; @@ -965,9 +966,12 @@ export function getOutputNodes(nodes: LGraphNode[]) { /** * Gets a full color string, including parsing from the LGraphCanvas data. */ -export function getFullColor(color?: string, liteGraphKey: 'groupcolor'|'color'|'bgcolor' = 'color') { +export function getFullColor( + color?: string, + liteGraphKey: "groupcolor" | "color" | "bgcolor" = "color", +) { if (!color) { - return ''; + return ""; } if (LGraphCanvas.node_colors[color]) { color = LGraphCanvas.node_colors[color]![liteGraphKey]; diff --git a/src_web/comfyui/utils_canvas.ts b/src_web/comfyui/utils_canvas.ts index 87fb163..68432df 100644 --- a/src_web/comfyui/utils_canvas.ts +++ b/src_web/comfyui/utils_canvas.ts @@ -1,4 +1,4 @@ -import type {LGraphCanvas as TLGraphCanvas, Vector2} from "@comfyorg/litegraph"; +import type {LGraphCanvas as TLGraphCanvas, Vector2} from "@comfyorg/frontend"; import {app} from "scripts/app.js"; diff --git a/src_web/comfyui/utils_inputs_outputs.ts b/src_web/comfyui/utils_inputs_outputs.ts index 63f6d93..f3ede08 100644 --- a/src_web/comfyui/utils_inputs_outputs.ts +++ b/src_web/comfyui/utils_inputs_outputs.ts @@ -1,4 +1,4 @@ -import type { LGraphNode } from "@comfyorg/litegraph"; +import type {LGraphNode} from "@comfyorg/frontend"; /** Removes all inputs from the end. */ export function removeUnusedInputsFromEnd(node: LGraphNode, minNumber = 1, nameMatch?: RegExp) { @@ -11,4 +11,4 @@ export function removeUnusedInputsFromEnd(node: LGraphNode, minNumber = 1, nameM } break; } -} \ No newline at end of file +} diff --git a/src_web/comfyui/utils_menu.ts b/src_web/comfyui/utils_menu.ts index b3773a1..fdf921a 100644 --- a/src_web/comfyui/utils_menu.ts +++ b/src_web/comfyui/utils_menu.ts @@ -1,11 +1,11 @@ import type { LGraphCanvas as TLGraphCanvas, - IWidget, LGraphNode, - ContextMenuEventListener, ContextMenu, - IContextMenuItem, -} from "@comfyorg/litegraph"; + IContextMenuValue, + IBaseWidget, + IContextMenuOptions, +} from "@comfyorg/frontend"; import {app} from "scripts/app.js"; import {rgthreeApi} from "rgthree/common/rgthree_api.js"; @@ -19,7 +19,7 @@ const PASS_THROUGH = function (item: T) { */ export async function showLoraChooser( event: PointerEvent | MouseEvent, - callback: ContextMenuEventListener, + callback: IContextMenuOptions["callback"], parentMenu?: ContextMenu | null, loras?: string[], ) { @@ -43,10 +43,10 @@ export async function showLoraChooser( * @param mapFn The function used to map each node to the context menu item. If null is returned * it will be filtered out (rather than use a separate filter method). */ -export function showNodesChooser( +export function showNodesChooser( event: PointerEvent | MouseEvent, mapFn: (n: LGraphNode) => T | null, - callback: ContextMenuEventListener, + callback: IContextMenuOptions["callback"], parentMenu?: ContextMenu, ) { const canvas = app.canvas as TLGraphCanvas; @@ -74,11 +74,11 @@ export function showNodesChooser( * @param mapFn The function used to map each node to the context menu item. If null is returned * it will be filtered out (rather than use a separate filter method). */ -export function showWidgetsChooser( +export function showWidgetsChooser( event: PointerEvent | MouseEvent, node: LGraphNode, - mapFn: (n: IWidget) => T | null, - callback: ContextMenuEventListener, + mapFn: (n: IBaseWidget) => T | null, + callback: IContextMenuOptions["callback"], parentMenu?: ContextMenu, ) { const options: T[] = (node.widgets || []) diff --git a/src_web/comfyui/utils_widgets.ts b/src_web/comfyui/utils_widgets.ts index 06ef7e1..f8045c5 100644 --- a/src_web/comfyui/utils_widgets.ts +++ b/src_web/comfyui/utils_widgets.ts @@ -1,20 +1,16 @@ import type { LGraphNode, - Size, LGraphCanvas as TLGraphCanvas, Vector2, - Vector4, -} from "@comfyorg/litegraph"; -import type {CanvasMouseEvent} from "@comfyorg/litegraph/dist/types/events.js"; -import type {ICustomWidget, IWidgetOptions} from "@comfyorg/litegraph/dist/types/widgets.js"; + ICustomWidget, + IWidgetOptions, + CanvasPointerEvent, +} from "@comfyorg/frontend"; import {app} from "scripts/app.js"; -import { - drawNodeWidget, - drawWidgetButton, - fitString, - isLowQuality, -} from "./utils_canvas.js"; +import {drawNodeWidget, drawWidgetButton, fitString, isLowQuality} from "./utils_canvas.js"; + +type Vector4 = [number, number, number, number]; /** * Draws a label on teft, and a value on the right, ellipsizing when out of space. @@ -50,10 +46,30 @@ export function drawLabelAndValue( export type RgthreeBaseWidgetBounds = { /** The bounds, either [x, width] assuming the full height, or [x, y, width, height] if height. */ bounds: Vector2 | Vector4; - onDown?(event: CanvasMouseEvent, pos: Vector2, node: LGraphNode, bounds: RgthreeBaseWidgetBounds): boolean | void; - onUp?(event: CanvasMouseEvent, pos: Vector2, node: LGraphNode, bounds: RgthreeBaseWidgetBounds): boolean | void; - onMove?(event: CanvasMouseEvent, pos: Vector2, node: LGraphNode, bounds: RgthreeBaseWidgetBounds): boolean | void; - onClick?(event: CanvasMouseEvent, pos: Vector2, node: LGraphNode, bounds: RgthreeBaseWidgetBounds): boolean | void; + onDown?( + event: CanvasPointerEvent, + pos: Vector2, + node: LGraphNode, + bounds: RgthreeBaseWidgetBounds, + ): boolean | void; + onUp?( + event: CanvasPointerEvent, + pos: Vector2, + node: LGraphNode, + bounds: RgthreeBaseWidgetBounds, + ): boolean | void; + onMove?( + event: CanvasPointerEvent, + pos: Vector2, + node: LGraphNode, + bounds: RgthreeBaseWidgetBounds, + ): boolean | void; + onClick?( + event: CanvasPointerEvent, + pos: Vector2, + node: LGraphNode, + bounds: RgthreeBaseWidgetBounds, + ): boolean | void; data?: any; wasMouseClickedAndIsOver?: boolean; }; @@ -105,7 +121,7 @@ export abstract class RgthreeBaseWidget implem return clickedX && pos[1] >= bounds[1] && pos[1] <= bounds[1] + bounds[3]!; } - mouse(event: CanvasMouseEvent, pos: Vector2, node: LGraphNode) { + mouse(event: CanvasPointerEvent, pos: Vector2, node: LGraphNode) { const canvas = app.canvas as TLGraphCanvas; if (event.type == "pointerdown") { @@ -156,7 +172,7 @@ export abstract class RgthreeBaseWidget implem } this.downedHitAreasForClick.length = 0; if (wasMouseDownedAndOver) { - const thisHandled = this.onMouseClick(event, pos, node) + const thisHandled = this.onMouseClick(event, pos, node); anyHandled = anyHandled || thisHandled == true; } return this.onMouseUp(event, pos, node) ?? anyHandled; @@ -196,7 +212,7 @@ export abstract class RgthreeBaseWidget implem } /** An event that fires when the pointer is pressed down (once). */ - onMouseDown(event: CanvasMouseEvent, pos: Vector2, node: LGraphNode): boolean | void { + onMouseDown(event: CanvasPointerEvent, pos: Vector2, node: LGraphNode): boolean | void { return; } @@ -204,7 +220,7 @@ export abstract class RgthreeBaseWidget implem * An event that fires when the pointer is let go. Only fires if this was the widget that was * originally pressed down. */ - onMouseUp(event: CanvasMouseEvent, pos: Vector2, node: LGraphNode): boolean | void { + onMouseUp(event: CanvasPointerEvent, pos: Vector2, node: LGraphNode): boolean | void { return; } @@ -212,7 +228,7 @@ export abstract class RgthreeBaseWidget implem * An event that fires when the pointer is let go _over the widget_ and when the widget that was * originally pressed down. */ - onMouseClick(event: CanvasMouseEvent, pos: Vector2, node: LGraphNode): boolean | void { + onMouseClick(event: CanvasPointerEvent, pos: Vector2, node: LGraphNode): boolean | void { return; } @@ -221,7 +237,7 @@ export abstract class RgthreeBaseWidget implem * of the widget. Check `isMouseDownedAndOver` to determine if the mouse is currently over the * widget or not. */ - onMouseMove(event: CanvasMouseEvent, pos: Vector2, node: LGraphNode): boolean | void { + onMouseMove(event: CanvasPointerEvent, pos: Vector2, node: LGraphNode): boolean | void { return; } } @@ -234,11 +250,11 @@ export class RgthreeBetterButtonWidget extends RgthreeBaseWidget { value: string = ""; label: string = ""; - mouseClickCallback: (event: CanvasMouseEvent, pos: Vector2, node: LGraphNode) => boolean | void; + mouseClickCallback: (event: CanvasPointerEvent, pos: Vector2, node: LGraphNode) => boolean | void; constructor( name: string, - mouseClickCallback: (event: CanvasMouseEvent, pos: Vector2, node: LGraphNode) => boolean | void, + mouseClickCallback: (event: CanvasPointerEvent, pos: Vector2, node: LGraphNode) => boolean | void, label?: string, ) { super(name); @@ -255,7 +271,7 @@ export class RgthreeBetterButtonWidget extends RgthreeBaseWidget { ); } - override onMouseClick(event: CanvasMouseEvent, pos: Vector2, node: LGraphNode) { + override onMouseClick(event: CanvasPointerEvent, pos: Vector2, node: LGraphNode) { return this.mouseClickCallback(event, pos, node); } } @@ -280,7 +296,7 @@ export class RgthreeBetterTextWidget extends RgthreeBaseWidget { } } - override mouse(event: CanvasMouseEvent, pos: Vector2, node: LGraphNode): boolean { + override mouse(event: CanvasPointerEvent, pos: Vector2, node: LGraphNode): boolean { const canvas = app.canvas as TLGraphCanvas; if (event.type == "pointerdown") { canvas.prompt("Label", this.value, (v: string) => (this.value = v), event); @@ -354,7 +370,7 @@ export type RgthreeLabelWidgetOptions = { /** A label to put on the right side. */ actionLabel?: "__PLUS_ICON__" | string; - actionCallback?: (event: PointerEvent | CanvasMouseEvent) => void; + actionCallback?: (event: PointerEvent | CanvasPointerEvent) => void; }; /** @@ -427,7 +443,7 @@ export class RgthreeLabelWidget extends RgthreeBaseWidget { ctx.restore(); } - override mouse(event: CanvasMouseEvent, nodePos: Vector2, node: LGraphNode): boolean { + override mouse(event: CanvasPointerEvent, nodePos: Vector2, node: LGraphNode): boolean { if ( event.type !== "pointerdown" || isLowQuality() || diff --git a/src_web/common/dialog.ts b/src_web/common/dialog.ts index d421eb3..2f10710 100644 --- a/src_web/common/dialog.ts +++ b/src_web/common/dialog.ts @@ -1,4 +1,4 @@ -import type { LGraphNode, LGraphNodeConstructor } from "@comfyorg/litegraph"; +import type { LGraphNode, LGraphNodeConstructor } from "@comfyorg/frontend"; import { createElement as $el, getClosestOrSelf, setAttributes } from "./utils_dom.js"; type RgthreeDialogButton = { diff --git a/src_web/common/link_fixer.ts b/src_web/common/link_fixer.ts index 0daa047..1ec3cf7 100644 --- a/src_web/common/link_fixer.ts +++ b/src_web/common/link_fixer.ts @@ -5,10 +5,12 @@ import type { ISlotType, INodeOutputSlot, INodeInputSlot, -} from "@comfyorg/litegraph"; -import type {NodeId} from "@comfyorg/litegraph/dist/LGraphNode"; -import type {ISerialisedNode, ISerialisedGraph} from "@comfyorg/litegraph/dist/types/serialisation"; -import type {SerialisedLLinkArray, LinkId} from "@comfyorg/litegraph/dist/LLink"; + SerialisedLLinkArray, + LinkId, + ISerialisedNode, + ISerialisedGraph, + NodeId, +} from "@comfyorg/frontend"; /** * The bad links data returned from either a fixer `check()`, or the results of a `fix()` call. diff --git a/src_web/common/prompt_service.ts b/src_web/common/prompt_service.ts index 6e7b038..6020450 100644 --- a/src_web/common/prompt_service.ts +++ b/src_web/common/prompt_service.ts @@ -10,7 +10,7 @@ import type { ComfyApiPrompt, } from "typings/comfy.js"; import { api } from "scripts/api.js"; -import type { LGraph as TLGraph, LGraphCanvas as TLGraphCanvas } from "@comfyorg/litegraph"; +import type { LGraph as TLGraph, LGraphCanvas as TLGraphCanvas } from "@comfyorg/frontend"; import { Resolver, getResolver } from "./shared_utils.js"; /** diff --git a/src_web/common/utils_workflow.ts b/src_web/common/utils_workflow.ts index dfdd8fb..4c3668e 100644 --- a/src_web/common/utils_workflow.ts +++ b/src_web/common/utils_workflow.ts @@ -1,8 +1,8 @@ -import type { ISerialisedGraph } from "@comfyorg/litegraph/dist/types/serialisation"; -import type { ComfyApiFormat } from "typings/comfy.js"; +import type {ISerialisedGraph} from "@comfyorg/frontend"; +import type {ComfyApiFormat} from "typings/comfy.js"; -import { getResolver } from "./shared_utils.js"; -import { getPngMetadata, getWebpMetadata } from "./comfyui_shim.js"; +import {getResolver} from "./shared_utils.js"; +import {getPngMetadata, getWebpMetadata} from "./comfyui_shim.js"; /** * Parses the workflow JSON and do any necessary cleanup. @@ -18,7 +18,7 @@ function parseWorkflowJson(stringJson?: string) { export async function tryToGetWorkflowDataFromEvent( e: DragEvent, -): Promise<{ workflow: ISerialisedGraph | null; prompt: ComfyApiFormat | null }> { +): Promise<{workflow: ISerialisedGraph | null; prompt: ComfyApiFormat | null}> { let work; for (const file of e.dataTransfer?.files || []) { const data = await tryToGetWorkflowDataFromFile(file); @@ -34,12 +34,12 @@ export async function tryToGetWorkflowDataFromEvent( return tryToGetWorkflowDataFromFile(await (await fetch(uri)).blob()); } } - return { workflow: null, prompt: null }; + return {workflow: null, prompt: null}; } export async function tryToGetWorkflowDataFromFile( file: File | Blob, -): Promise<{ workflow: ISerialisedGraph | null; prompt: ComfyApiFormat | null }> { +): Promise<{workflow: ISerialisedGraph | null; prompt: ComfyApiFormat | null}> { if (file.type === "image/png") { const pngInfo = await getPngMetadata(file); return { @@ -53,20 +53,20 @@ export async function tryToGetWorkflowDataFromFile( // Support loading workflows from that webp custom node. const workflow = parseWorkflowJson(pngInfo?.workflow || pngInfo?.Workflow || "null"); const prompt = parseWorkflowJson(pngInfo?.prompt || pngInfo?.Prompt || "null"); - return { workflow, prompt }; + return {workflow, prompt}; } if (file.type === "application/json" || (file as File).name?.endsWith(".json")) { - const resolver = getResolver<{ workflow: any; prompt: any }>(); + const resolver = getResolver<{workflow: any; prompt: any}>(); const reader = new FileReader(); reader.onload = async () => { const json = parseWorkflowJson(reader.result as string); const isApiJson = Object.values(json).every((v: any) => v.class_type); const prompt = isApiJson ? json : null; const workflow = !isApiJson && !json?.templates ? json : null; - return { workflow, prompt }; + return {workflow, prompt}; }; return resolver.promise; } - return { workflow: null, prompt: null }; + return {workflow: null, prompt: null}; } diff --git a/src_web/link_fixer/link_page.ts b/src_web/link_fixer/link_page.ts index 61f6621..024ff6b 100644 --- a/src_web/link_fixer/link_page.ts +++ b/src_web/link_fixer/link_page.ts @@ -1,8 +1,8 @@ -import type { ISerialisedGraph } from "@comfyorg/litegraph/dist/types/serialisation"; -import type { BadLinksData } from "../common/link_fixer.js"; +import type {ISerialisedGraph} from "@comfyorg/frontend"; +import type {BadLinksData} from "../common/link_fixer.js"; -import { WorkflowLinkFixer } from "../common/link_fixer.js"; -import { getPngMetadata } from "../common/comfyui_shim.js"; +import {WorkflowLinkFixer} from "../common/link_fixer.js"; +import {getPngMetadata} from "../common/comfyui_shim.js"; function wait(ms = 16, value?: any) { return new Promise((resolve) => { @@ -208,7 +208,7 @@ export class LinkPage { filename += ".json"; } const json = JSON.stringify(this.graphFinalResults.graph, null, 2); - const blob = new Blob([json], { type: "application/json" }); + const blob = new Blob([json], {type: "application/json"}); const url = URL.createObjectURL(blob); const anchor = document.createElement("a"); anchor.download = filename; diff --git a/src_web/scripts_comfy/widgets.ts b/src_web/scripts_comfy/widgets.ts index 9b60049..7a6508d 100644 --- a/src_web/scripts_comfy/widgets.ts +++ b/src_web/scripts_comfy/widgets.ts @@ -1,6 +1,4 @@ -import type {ComfyApp} from "@comfyorg/frontend"; -import type {IWidget, LGraphNode} from "@comfyorg/litegraph"; -import type {IStringWidget, IComboWidget} from "@comfyorg/litegraph/dist/types/widgets"; +import type {ComfyApp, IStringWidget, IComboWidget, IWidget, LGraphNode} from "@comfyorg/frontend"; type ComfyWidgetFn = ( node: LGraphNode, diff --git a/src_web/typings/index.d.ts b/src_web/typings/index.d.ts index 96e1732..ac6f9f0 100644 --- a/src_web/typings/index.d.ts +++ b/src_web/typings/index.d.ts @@ -12,7 +12,7 @@ import type { LGraph as TLGraph, LGraphCanvas as TLGraphCanvas, LiteGraph as TLiteGraph, -} from "@comfyorg/litegraph"; +} from "@comfyorg/frontend"; declare global { const LiteGraph: typeof TLiteGraph; diff --git a/src_web/typings/litegraph.d.ts b/src_web/typings/litegraph.d.ts index f2b3167..161f832 100644 --- a/src_web/typings/litegraph.d.ts +++ b/src_web/typings/litegraph.d.ts @@ -4,9 +4,9 @@ * adding properties/methods that rgthree-comfy adds/uses. Mostly the latter are prefixed 'rgthree_' * but not always. */ -import "@comfyorg/litegraph"; +import "@comfyorg/frontend"; -declare module "@comfyorg/litegraph" { +declare module "@comfyorg/frontend" { interface INodeSlot { // @rgthree: Hides a slot for rgthree-comfy draw methods. hidden?: boolean; @@ -25,6 +25,9 @@ declare module "@comfyorg/litegraph" { } interface LGraphNode { + // @rgthree: rgthree-comfy added this before comfyui did and it was a bit more flexible. + removeWidget(widget: IBaseWidget|IWidget|number|undefined): void; + // @rgthree (Fix): Implementation allows a falsy value to be returned and it will suppress the // menu all together. // NOTE: [🤮] We can't actually augment this because it's a return.. but keeping here because @@ -79,7 +82,7 @@ declare module "@comfyorg/litegraph" { } } -declare module "@comfyorg/litegraph/dist/types/widgets" { +declare module "@/lib/litegraph/src/types/widgets" { interface IBaseWidget { // @rgthree (Fix): Where is this in Comfy types? inputEl?: HTMLInputElement; @@ -89,7 +92,7 @@ declare module "@comfyorg/litegraph/dist/types/widgets" { } } -declare module "@comfyorg/litegraph/dist/interfaces" { +declare module "@/lib/litegraph/src/interfaces" { // @rgthree (Fix): widget is (or was?) available when inputs were moved from a widget. interface IFoundSlot { widget?: IBaseWidget; diff --git a/src_web/typings/rgthree.d.ts b/src_web/typings/rgthree.d.ts index 52d3103..e1573a0 100644 --- a/src_web/typings/rgthree.d.ts +++ b/src_web/typings/rgthree.d.ts @@ -1,7 +1,7 @@ /** * Typings specific to rgthree-comfy. */ -import type { LGraphNode, Vector2 } from "@comfyorg/litegraph"; +import type { LGraphNode, Vector2 } from "@comfyorg/frontend"; import type { CanvasMouseEvent } from "@comfyorg/litegraph/dist/types/events.js"; import type { RgthreeBaseNode, RgthreeBaseVirtualNode } from '../comfyui/base_node.js' diff --git a/tsconfig.json b/tsconfig.json index 0ed1b82..fd7d330 100644 --- a/tsconfig.json +++ b/tsconfig.json @@ -7,13 +7,13 @@ // ], "baseUrl": "./", "paths": { - // `@comfyorg/litegraph` is how ComfyUi-Frontend augments litegraph.d.ts, so we should match. - "@comfyorg/litegraph": ["node_modules/@comfyorg/litegraph/dist/litegraph.d.ts"], - // ComfyUi-Frontend also augments one other module with the dist/ so we must keep it. - "@comfyorg/litegraph/dist/*": ["node_modules/@comfyorg/litegraph/dist/*"], - // Theser are just vanity. Currently nothing else augments it but, if a dependency were to we - // may need to change these. + // Main comfyui typedefs. "@comfyorg/frontend": ["node_modules/@comfyorg/comfyui-frontend-types/index.d.ts"], + // ComfyUI augments old litegraph types with these module names, so we need to map them back + // to itself to "see" these augmentations in our code. + "@/lib/litegraph/src/types/widgets": ["node_modules/@comfyorg/comfyui-frontend-types/index.d.ts"], + "@/lib/litegraph/src/interfaces": ["node_modules/@comfyorg/comfyui-frontend-types/index.d.ts"], + "@/lib/litegraph/src/litegraph": ["node_modules/@comfyorg/comfyui-frontend-types/index.d.ts"], // Tree Sitter, for parsing python in js. "web-tree-sitter": ["node_modules/web-tree-sitter/web-tree-sitter.d.ts"], "typings/*": ["src_web/typings/*"], diff --git a/web/comfyui/base_any_input_connected_node.js b/web/comfyui/base_any_input_connected_node.js index 0e8ebd1..aa868fc 100644 --- a/web/comfyui/base_any_input_connected_node.js +++ b/web/comfyui/base_any_input_connected_node.js @@ -109,9 +109,9 @@ export class BaseAnyInputConnectedNode extends RgthreeBaseVirtualNode { this._tempWidth = this.size[0]; return super.addWidget(type, name, value, callback, options); } - removeWidget(widgetOrSlot) { + removeWidget(widget) { this._tempWidth = this.size[0]; - super.removeWidget(widgetOrSlot); + super.removeWidget(widget); } computeSize(out) { var _a, _b; diff --git a/web/comfyui/base_node.js b/web/comfyui/base_node.js index 8f1cccc..01d4cd9 100644 --- a/web/comfyui/base_node.js +++ b/web/comfyui/base_node.js @@ -1,3 +1,4 @@ +import { app } from "../../scripts/app.js"; import { ComfyWidgets } from "../../scripts/widgets.js"; import { SERVICE as KEY_EVENT_SERVICE } from "./services/key_events_services.js"; import { LogLevel, rgthree } from "./rgthree.js"; @@ -92,25 +93,19 @@ export class RgthreeBaseNode extends LGraphNode { async handleAction(action) { action; } - removeWidget(widgetOrSlot) { - var _a; - if (!this.widgets) { - return; + removeWidget(widget) { + if (typeof widget === "number") { + widget = this.widgets[widget]; } - const widget = typeof widgetOrSlot === "number" ? this.widgets[widgetOrSlot] : widgetOrSlot; - if (widget) { - const index = this.widgets.indexOf(widget); - if (index > -1) { - this.widgets.splice(index, 1); - } - (_a = widget.onRemove) === null || _a === void 0 ? void 0 : _a.call(widget); + if (widget != null) { + super.removeWidget(widget); } } replaceWidget(widgetOrSlot, newWidget) { let index = null; if (widgetOrSlot) { - index = typeof widgetOrSlot === 'number' ? widgetOrSlot : this.widgets.indexOf(widgetOrSlot); - this.removeWidget(index); + index = typeof widgetOrSlot === "number" ? widgetOrSlot : this.widgets.indexOf(widgetOrSlot); + this.removeWidget(this.widgets[index]); } index = index != null ? index : this.widgets.length - 1; if (this.widgets.includes(newWidget)) { @@ -171,10 +166,7 @@ export class RgthreeBaseNode extends LGraphNode { (_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, - ]); + (_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) { diff --git a/web/comfyui/base_power_prompt.js b/web/comfyui/base_power_prompt.js index 0e1fccf..450b9b1 100644 --- a/web/comfyui/base_power_prompt.js +++ b/web/comfyui/base_power_prompt.js @@ -137,7 +137,7 @@ export class PowerPrompt { 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) => { + this.combos[key] = this.node.addWidget("combo", key, values[0], (selected) => { if (selected !== values[0] && !selected.match(/^disable\s[a-z]/i)) { wait().then(() => { if (key.includes("embedding")) { diff --git a/web/comfyui/dynamic_context_base.js b/web/comfyui/dynamic_context_base.js index a827567..8c788d5 100644 --- a/web/comfyui/dynamic_context_base.js +++ b/web/comfyui/dynamic_context_base.js @@ -88,7 +88,7 @@ export class DynamicContextNodeBase extends BaseContextNode { addContextInput(name, type, slot = -1) { const inputs = this.getContextInputsList(); if (this.hasShadowInputs) { - inputs.push({ name, type, link: null }); + inputs.push({ name, type, link: null, boundingRect: null }); } else { this.addInput(name, type); diff --git a/web/comfyui/dynamic_context_switch.js b/web/comfyui/dynamic_context_switch.js index a59bd98..a91197e 100644 --- a/web/comfyui/dynamic_context_switch.js +++ b/web/comfyui/dynamic_context_switch.js @@ -12,7 +12,7 @@ class DynamicContextSwitchNode extends DynamicContextNodeBase { this.hasShadowInputs = true; this.lastInputsList = []; this.shadowInputs = [ - { name: "base_ctx", type: "RGTHREE_DYNAMIC_CONTEXT", link: null, count: 0 }, + { name: "base_ctx", type: "RGTHREE_DYNAMIC_CONTEXT", link: null, count: 0, boundingRect: null }, ]; } getContextInputsList() { @@ -48,7 +48,7 @@ class DynamicContextSwitchNode extends DynamicContextNodeBase { refreshInputsAndOutputs() { var _a; const inputs = [ - { name: "base_ctx", type: "RGTHREE_DYNAMIC_CONTEXT", link: null, count: 0 }, + { name: "base_ctx", type: "RGTHREE_DYNAMIC_CONTEXT", link: null, count: 0, boundingRect: null }, ]; let numConnected = 0; for (let i = 0; i < this.inputs.length; i++) { @@ -73,6 +73,7 @@ class DynamicContextSwitchNode extends DynamicContextNodeBase { type: slotData.type, link: null, count: 1, + boundingRect: null, }); } } diff --git a/web/comfyui/fast_actions_button.js b/web/comfyui/fast_actions_button.js index 0cdf9ba..5fb633d 100644 --- a/web/comfyui/fast_actions_button.js +++ b/web/comfyui/fast_actions_button.js @@ -169,12 +169,12 @@ class FastActionsButton extends BaseAnyInputConnectedNode { } return changed; } - removeWidget(widgetOrSlot) { - const widget = typeof widgetOrSlot === "number" ? this.widgets[widgetOrSlot] : widgetOrSlot; + removeWidget(widget) { + widget = typeof widget === "number" ? this.widgets[widget] : widget; if (widget && this.widgetToData.has(widget)) { this.widgetToData.delete(widget); } - super.removeWidget(widgetOrSlot); + super.removeWidget(widget); } async executeConnectedNodes() { var _a; diff --git a/web/comfyui/feature_import_individual_nodes.js b/web/comfyui/feature_import_individual_nodes.js index 2f78ee2..ca5058a 100644 --- a/web/comfyui/feature_import_individual_nodes.js +++ b/web/comfyui/feature_import_individual_nodes.js @@ -55,22 +55,12 @@ export async function importIndividualNodesInnerOnDragDrop(node, e) { } else if (confirm("[rgthree-comfy] Found a matching node (same id & type) in the dropped workflow." + " Would you like to set the widget values?")) { - const slotToLayoutElement = new Map(); - for (const slot of [...(node.inputs || []), ...(node.outputs || [])]) { - if (slot._layoutElement) { - slotToLayoutElement.set(slot, slot._layoutElement); - delete slot._layoutElement; - } - } node.configure({ title: node.title, widgets_values: [...((exact === null || exact === void 0 ? void 0 : exact.widgets_values) || [])], mode: exact.mode, }); handled = true; - for (const [slot, layoutElement] of slotToLayoutElement.entries()) { - slot._layoutElement = layoutElement; - } } return handled; } diff --git a/web/comfyui/image_comparer.js b/web/comfyui/image_comparer.js index ef21e58..4c5d6b8 100644 --- a/web/comfyui/image_comparer.js +++ b/web/comfyui/image_comparer.js @@ -187,7 +187,7 @@ RgthreeImageComparer["@comparer_mode"] = { class RgthreeImageComparerWidget extends RgthreeBaseWidget { constructor(name, node) { super(name); - this.type = 'custom'; + this.type = "custom"; this.hitAreas = {}; this.selected = []; this._value = { images: [] }; diff --git a/web/comfyui/menu_auto_nest.js b/web/comfyui/menu_auto_nest.js index e9288e9..d720ee8 100644 --- a/web/comfyui/menu_auto_nest.js +++ b/web/comfyui/menu_auto_nest.js @@ -42,7 +42,7 @@ app.registerExtension({ } const newValue = typeof value === "string" ? { content: value } : Object.assign({}, value); newValue.rgthree_originalValue = value.rgthree_originalValue || value; - const valueContent = newValue.content || ''; + const valueContent = newValue.content || ""; const splitBy = valueContent.indexOf("/") > -1 ? "/" : "\\"; const valueSplit = valueContent.split(splitBy); if (valueSplit.length > 1) { diff --git a/web/comfyui/menu_queue_node.js b/web/comfyui/menu_queue_node.js index 7a5876b..635d8fe 100644 --- a/web/comfyui/menu_queue_node.js +++ b/web/comfyui/menu_queue_node.js @@ -26,7 +26,7 @@ function showQueueGroupNodesMenuIfGroupIsSelected(existingOptions) { } const group = rgthree.lastCanvasMouseEvent && app.graph.getGroupOnPos(rgthree.lastCanvasMouseEvent.canvasX, rgthree.lastCanvasMouseEvent.canvasY); - const outputNodes = group && getOutputNodes(group._nodes); + const outputNodes = (group && getOutputNodes(group._nodes)) || null; const menuItem = { content: `Queue Group Output Nodes (rgthree)  `, className: "rgthree-contextmenu-item", diff --git a/web/comfyui/power_puter.js b/web/comfyui/power_puter.js index 2412733..52231b3 100644 --- a/web/comfyui/power_puter.js +++ b/web/comfyui/power_puter.js @@ -128,7 +128,7 @@ class OutputsWidget extends RgthreeBaseWidget { } set value(v) { let outputs = typeof v === "string" ? [v] : [...v.outputs]; - outputs = outputs.map(o => o === 'BOOL' ? 'BOOLEAN' : o); + outputs = outputs.map((o) => (o === "BOOL" ? "BOOLEAN" : o)); this._value.outputs = outputs; } get value() { diff --git a/web/comfyui/rgthree.js b/web/comfyui/rgthree.js index c5ac1b7..193a3a8 100644 --- a/web/comfyui/rgthree.js +++ b/web/comfyui/rgthree.js @@ -126,7 +126,7 @@ class Rgthree extends EventTarget { this.settingsDialog = null; this.progressBarEl = null; this.queueNodeIds = null; - this.version = CONFIG_SERVICE.getConfigValue('version'); + this.version = CONFIG_SERVICE.getConfigValue("version"); this.logger = new LogSession("[rgthree]"); this.monitorBadLinksAlerted = false; this.monitorLinkTimeout = null; @@ -729,8 +729,8 @@ app.registerExtension({ aboutPageBadges: [ { label: `rgthree-comfy v${rgthree.version}`, - url: 'https://github.com/rgthree/rgthree-comfy', - icon: 'rgthree-comfy-about-badge-logo' - } + url: "https://github.com/rgthree/rgthree-comfy", + icon: "rgthree-comfy-about-badge-logo", + }, ], }); diff --git a/web/comfyui/seed.js b/web/comfyui/seed.js index 56e9ff2..efd5240 100644 --- a/web/comfyui/seed.js +++ b/web/comfyui/seed.js @@ -59,14 +59,14 @@ class RgthreeSeed extends RgthreeBaseServerNode { this.randMax = Math.min(1125899906842624, (_b = this.seedWidget.options.max) !== null && _b !== void 0 ? _b : 0); this.randMin = Math.max(0, (_c = this.seedWidget.options.min) !== null && _c !== void 0 ? _c : 0); this.randomRange = (this.randMax - Math.max(0, this.randMin)) / (step / 10); - this.addWidget("button", "🎲 Randomize Each Time", '', () => { + this.addWidget("button", "🎲 Randomize Each Time", "", () => { this.seedWidget.value = SPECIAL_SEED_RANDOM; }, { serialize: false }); - this.addWidget("button", "🎲 New Fixed Random", '', () => { + this.addWidget("button", "🎲 New Fixed Random", "", () => { this.seedWidget.value = Math.floor(Math.random() * this.randomRange) * (step / 10) + this.randMin; }, { serialize: false }); - this.lastSeedButton = this.addWidget("button", LAST_SEED_BUTTON_LABEL, '', () => { + this.lastSeedButton = this.addWidget("button", LAST_SEED_BUTTON_LABEL, "", () => { this.seedWidget.value = this.lastSeed != null ? this.lastSeed : this.seedWidget.value; this.lastSeedButton.name = LAST_SEED_BUTTON_LABEL; this.lastSeedButton.disabled = true; diff --git a/web/comfyui/utils.js b/web/comfyui/utils.js index ce8d117..41f4c68 100644 --- a/web/comfyui/utils.js +++ b/web/comfyui/utils.js @@ -337,7 +337,7 @@ export function getConnectedOutputNodesAndFilterPassThroughs(startNode, currentN return filterOutPassthroughNodes(getConnectedNodesInfo(startNode, IoDirection.OUTPUT, currentNode, slot, passThroughFollowing), passThroughFollowing).map((n) => n.node); } export function getConnectedNodesInfo(startNode, dir = IoDirection.INPUT, currentNode, slot, passThroughFollowing = PassThroughFollowing.ALL, originTravelFromSlot) { - var _a, _b, _c, _d, _e, _f; + var _a, _b, _c, _d, _e, _f, _g; currentNode = currentNode || startNode; let rootNodes = []; if (startNode === currentNode || shouldPassThrough(currentNode, passThroughFollowing)) { @@ -363,7 +363,7 @@ export function getConnectedNodesInfo(startNode, dir = IoDirection.INPUT, curren for (const linkId of linkIds) { let link = null; if (typeof linkId == "number") { - link = graph.links[linkId]; + link = (_g = graph.links[linkId]) !== null && _g !== void 0 ? _g : null; } if (!link) { continue; @@ -640,9 +640,9 @@ export function getOutputNodes(nodes) { return (n.mode != LiteGraph.NEVER && ((_a = n.constructor.nodeData) === null || _a === void 0 ? void 0 : _a.output_node)); })) || []); } -export function getFullColor(color, liteGraphKey = 'color') { +export function getFullColor(color, liteGraphKey = "color") { if (!color) { - return ''; + return ""; } if (LGraphCanvas.node_colors[color]) { color = LGraphCanvas.node_colors[color][liteGraphKey]; diff --git a/web/comfyui/utils_widgets.js b/web/comfyui/utils_widgets.js index 56cd196..dabce08 100644 --- a/web/comfyui/utils_widgets.js +++ b/web/comfyui/utils_widgets.js @@ -1,5 +1,5 @@ import { app } from "../../scripts/app.js"; -import { drawNodeWidget, drawWidgetButton, fitString, isLowQuality, } from "./utils_canvas.js"; +import { drawNodeWidget, drawWidgetButton, fitString, isLowQuality } from "./utils_canvas.js"; export function drawLabelAndValue(ctx, label, value, width, posY, height, options) { var _a; const outerMargin = 15;