From 2c8ddf29eaa2429ed3e17d7005d10c8e7974be1b Mon Sep 17 00:00:00 2001 From: rgthree Date: Tue, 30 Jul 2024 22:03:26 -0400 Subject: [PATCH] Cleanup for settings up virtual nodes --- .../comfyui/base_any_input_connected_node.ts | 10 +-- src_web/comfyui/base_node.ts | 16 +++- src_web/comfyui/base_node_mode_changer.ts | 4 - src_web/comfyui/bookmark.ts | 7 +- src_web/comfyui/bypasser.ts | 2 +- src_web/comfyui/fast_actions_button.ts | 9 +-- src_web/comfyui/fast_groups_bypasser.ts | 7 +- src_web/comfyui/fast_groups_muter.ts | 12 +-- src_web/comfyui/label.ts | 7 +- src_web/comfyui/muter.ts | 2 +- src_web/comfyui/random_unmuter.ts | 6 +- src_web/comfyui/reroute.ts | 4 +- src_web/comfyui/utils_widgets.ts | 79 +++++++++++-------- src_web/typings/rgthree.d.ts | 7 ++ web/comfyui/base_any_input_connected_node.js | 9 +-- web/comfyui/base_node.js | 9 +++ web/comfyui/base_node_mode_changer.js | 3 - web/comfyui/bookmark.js | 6 +- web/comfyui/bypasser.js | 2 +- web/comfyui/fast_actions_button.js | 8 +- web/comfyui/fast_groups_bypasser.js | 6 +- web/comfyui/fast_groups_muter.js | 10 +-- web/comfyui/label.js | 6 +- web/comfyui/muter.js | 2 +- web/comfyui/random_unmuter.js | 5 +- web/comfyui/reroute.js | 4 +- web/comfyui/utils_widgets.js | 53 +++++++------ 27 files changed, 138 insertions(+), 157 deletions(-) diff --git a/src_web/comfyui/base_any_input_connected_node.ts b/src_web/comfyui/base_any_input_connected_node.ts index da3a6be..dbe6a4d 100644 --- a/src_web/comfyui/base_any_input_connected_node.ts +++ b/src_web/comfyui/base_any_input_connected_node.ts @@ -280,12 +280,13 @@ export class BaseAnyInputConnectedNode extends RgthreeBaseVirtualNode { return super.connectByTypeOutput(slot, sourceNode, sourceSlotType, optsIn); } - static override setUp(clazz: RgthreeBaseVirtualNodeConstructor) { - addConnectionLayoutSupport(clazz, app, [ + static override setUp() { + super.setUp(); + addConnectionLayoutSupport(this, app, [ ["Left", "Right"], ["Right", "Left"], ]); - addMenuItem(clazz, app, { + addMenuItem(this, app, { name: (node) => `${node.properties?.["collapse_connections"] ? "Show" : "Collapse"} Connections`, property: "collapse_connections", @@ -294,9 +295,6 @@ export class BaseAnyInputConnectedNode extends RgthreeBaseVirtualNode { app.graph.setDirtyCanvas(true, true); }, }); - - LiteGraph.registerNodeType(clazz.type, clazz); - clazz.category = clazz._category; } } diff --git a/src_web/comfyui/base_node.ts b/src_web/comfyui/base_node.ts index f943302..9cfea35 100644 --- a/src_web/comfyui/base_node.ts +++ b/src_web/comfyui/base_node.ts @@ -1,4 +1,4 @@ -import { ComfyNodeConstructor, ComfyObjectInfo, NodeMode } from "typings/comfy.js"; +import type { ComfyNodeConstructor, ComfyObjectInfo, NodeMode } from "typings/comfy.js"; import type { IWidget, SerializedLGraphNode, @@ -8,13 +8,13 @@ import type { INodeOutputSlot, INodeInputSlot, } from "typings/litegraph.js"; +import type { RgthreeBaseServerNodeConstructor, RgthreeBaseVirtualNodeConstructor } from "typings/rgthree.js"; + import { ComfyWidgets } from "scripts/widgets.js"; import { app } from "scripts/app.js"; - import { LogLevel, rgthree } from "./rgthree.js"; import { addHelpMenuItem } from "./utils.js"; import { RgthreeHelpDialog } from "rgthree/common/dialog.js"; -import { RgthreeBaseServerNodeConstructor } from "typings/rgthree.js"; import { importIndividualNodesInnerOnDragDrop, importIndividualNodesInnerOnDragOver, @@ -279,6 +279,16 @@ export class RgthreeBaseVirtualNode extends RgthreeBaseNode { constructor(title = RgthreeBaseNode.title) { super(title, false); } + + static override setUp() { + if (!this.type) { + throw new Error(`Missing type for RgthreeBaseVirtualNode: ${this.title}`); + } + LiteGraph.registerNodeType(this.type, this); + if (this._category) { + this.category = this._category; + } + } } /** diff --git a/src_web/comfyui/base_node_mode_changer.ts b/src_web/comfyui/base_node_mode_changer.ts index 4d25f5e..75d99bf 100644 --- a/src_web/comfyui/base_node_mode_changer.ts +++ b/src_web/comfyui/base_node_mode_changer.ts @@ -100,8 +100,4 @@ export class BaseNodeModeChanger extends BaseAnyInputConnectedNode { forceWidgetToggle(widget: IWidget, skipOtherNodeCheck?: boolean) { (widget as any).doModeChange(!widget.value, skipOtherNodeCheck); } - - static override setUp(clazz: RgthreeBaseVirtualNodeConstructor) { - BaseAnyInputConnectedNode.setUp(clazz); - } } diff --git a/src_web/comfyui/bookmark.ts b/src_web/comfyui/bookmark.ts index 5a05847..1adda26 100644 --- a/src_web/comfyui/bookmark.ts +++ b/src_web/comfyui/bookmark.ts @@ -136,17 +136,12 @@ export class Bookmark extends RgthreeBaseVirtualNode { } canvas.setDirty(true, true); } - - static override setUp(clazz: RgthreeBaseVirtualNodeConstructor) { - LiteGraph.registerNodeType(clazz.type, clazz); - clazz.category = clazz._category; - } } app.registerExtension({ name: "rgthree.Bookmark", registerCustomNodes() { - Bookmark.setUp(Bookmark); + Bookmark.setUp(); }, }); diff --git a/src_web/comfyui/bypasser.ts b/src_web/comfyui/bypasser.ts index 7256a87..f469012 100644 --- a/src_web/comfyui/bypasser.ts +++ b/src_web/comfyui/bypasser.ts @@ -41,7 +41,7 @@ class BypasserNode extends BaseNodeModeChanger { app.registerExtension({ name: "rgthree.Bypasser", registerCustomNodes() { - BypasserNode.setUp(BypasserNode); + BypasserNode.setUp(); }, loadedGraphNode(node: LGraphNode) { if (node.type == BypasserNode.title) { diff --git a/src_web/comfyui/fast_actions_button.ts b/src_web/comfyui/fast_actions_button.ts index 3be60f9..aebada9 100644 --- a/src_web/comfyui/fast_actions_button.ts +++ b/src_web/comfyui/fast_actions_button.ts @@ -313,10 +313,9 @@ class FastActionsButton extends BaseAnyInputConnectedNode { } } - static override setUp(clazz: RgthreeBaseVirtualNodeConstructor) { - BaseAnyInputConnectedNode.setUp(clazz); - - addMenuItem(clazz, app, { + static override setUp() { + super.setUp(); + addMenuItem(this, app, { name: "➕ Append a Comfy Action", callback: (nodeArg: LGraphNode) => { (nodeArg as FastActionsButton).addComfyActionWidget(); @@ -328,7 +327,7 @@ class FastActionsButton extends BaseAnyInputConnectedNode { app.registerExtension({ name: "rgthree.FastActionsButton", registerCustomNodes() { - FastActionsButton.setUp(FastActionsButton); + FastActionsButton.setUp(); }, loadedGraphNode(node: LGraphNode) { if (node.type == FastActionsButton.title) { diff --git a/src_web/comfyui/fast_groups_bypasser.ts b/src_web/comfyui/fast_groups_bypasser.ts index d8271b4..45d87eb 100644 --- a/src_web/comfyui/fast_groups_bypasser.ts +++ b/src_web/comfyui/fast_groups_bypasser.ts @@ -22,17 +22,12 @@ export class FastGroupsBypasser extends BaseFastGroupsModeChanger { super(title); this.onConstructed(); } - - static override setUp(clazz: RgthreeBaseVirtualNodeConstructor) { - LiteGraph.registerNodeType(clazz.type, clazz); - clazz.category = clazz._category; - } } app.registerExtension({ name: "rgthree.FastGroupsBypasser", registerCustomNodes() { - FastGroupsBypasser.setUp(FastGroupsBypasser); + FastGroupsBypasser.setUp(); }, loadedGraphNode(node: FastGroupsBypasser) { if (node.type == FastGroupsBypasser.title) { diff --git a/src_web/comfyui/fast_groups_muter.ts b/src_web/comfyui/fast_groups_muter.ts index 329c77a..64cc8e7 100644 --- a/src_web/comfyui/fast_groups_muter.ts +++ b/src_web/comfyui/fast_groups_muter.ts @@ -466,11 +466,6 @@ export abstract class BaseFastGroupsModeChanger extends RgthreeBaseVirtualNode { `; } - - static override setUp(clazz: RgthreeBaseVirtualNodeConstructor) { - LiteGraph.registerNodeType(clazz.type, clazz); - clazz.category = clazz._category; - } } /** @@ -492,17 +487,12 @@ export class FastGroupsMuter extends BaseFastGroupsModeChanger { super(title); this.onConstructed(); } - - static override setUp(clazz: RgthreeBaseVirtualNodeConstructor) { - LiteGraph.registerNodeType(clazz.type, clazz); - clazz.category = clazz._category; - } } app.registerExtension({ name: "rgthree.FastGroupsMuter", registerCustomNodes() { - FastGroupsMuter.setUp(FastGroupsMuter); + FastGroupsMuter.setUp(); }, loadedGraphNode(node: LGraphNode) { if (node.type == FastGroupsMuter.title) { diff --git a/src_web/comfyui/label.ts b/src_web/comfyui/label.ts index ee4428c..e87b729 100644 --- a/src_web/comfyui/label.ts +++ b/src_web/comfyui/label.ts @@ -97,11 +97,6 @@ export class Label extends RgthreeBaseVirtualNode { LGraphCanvas.active_canvas.showShowNodePanel(this); } - static override setUp(clazz: RgthreeBaseVirtualNodeConstructor) { - LiteGraph.registerNodeType(clazz.type, clazz); - clazz.category = clazz._category; - } - override onShowCustomPanelInfo(panel: HTMLElement) { panel.querySelector('div.property[data-property="Mode"]')?.remove(); panel.querySelector('div.property[data-property="Color"]')?.remove(); @@ -207,6 +202,6 @@ LGraph.prototype.getNodeOnPos = function ( app.registerExtension({ name: "rgthree.Label", registerCustomNodes() { - Label.setUp(Label); + Label.setUp(); }, }); diff --git a/src_web/comfyui/muter.ts b/src_web/comfyui/muter.ts index b73f411..b093409 100644 --- a/src_web/comfyui/muter.ts +++ b/src_web/comfyui/muter.ts @@ -40,7 +40,7 @@ class MuterNode extends BaseNodeModeChanger { app.registerExtension({ name: "rgthree.Muter", registerCustomNodes() { - MuterNode.setUp(MuterNode); + MuterNode.setUp(); }, loadedGraphNode(node: LGraphNode) { if (node.type == MuterNode.title) { diff --git a/src_web/comfyui/random_unmuter.ts b/src_web/comfyui/random_unmuter.ts index aad0a49..5461db4 100644 --- a/src_web/comfyui/random_unmuter.ts +++ b/src_web/comfyui/random_unmuter.ts @@ -103,16 +103,12 @@ class RandomUnmuterNode extends BaseAnyInputConnectedNode { `; } - - static override setUp(clazz: RgthreeBaseVirtualNodeConstructor) { - BaseAnyInputConnectedNode.setUp(clazz); - } } app.registerExtension({ name: "rgthree.RandomUnmuter", registerCustomNodes() { - RandomUnmuterNode.setUp(RandomUnmuterNode); + RandomUnmuterNode.setUp(); }, loadedGraphNode(node: LGraphNode) { if (node.type == RandomUnmuterNode.title) { diff --git a/src_web/comfyui/reroute.ts b/src_web/comfyui/reroute.ts index 1ccafca..de76d6b 100644 --- a/src_web/comfyui/reroute.ts +++ b/src_web/comfyui/reroute.ts @@ -325,6 +325,7 @@ const SERVICE = new RerouteService(); */ class RerouteNode extends RgthreeBaseVirtualNode { static override title = NodeTypesString.REROUTE; + static override type = NodeTypesString.REROUTE; override comfyClass = NodeTypesString.REROUTE; static readonly title_mode = LiteGraph.NO_TITLE; @@ -1210,7 +1211,6 @@ addMenuItem(RerouteNode, app, { app.registerExtension({ name: "rgthree.Reroute", registerCustomNodes() { - LiteGraph.registerNodeType(RerouteNode.title, RerouteNode); - RerouteNode.category = RerouteNode._category; + RerouteNode.setUp(); }, }); diff --git a/src_web/comfyui/utils_widgets.ts b/src_web/comfyui/utils_widgets.ts index 8fc0cf5..764f50f 100644 --- a/src_web/comfyui/utils_widgets.ts +++ b/src_web/comfyui/utils_widgets.ts @@ -210,38 +210,7 @@ export class RgthreeBetterButtonWidget extends RgthreeBaseWidget { } draw(ctx: CanvasRenderingContext2D, node: LGraphNode, width: number, y: number, height: number) { - // First, add a shadow if we're not down or lowquality. - if (!isLowQuality() && !this.isMouseDownedAndOver) { - drawRoundedRectangle(ctx, { - width: width - 30 - 2, - height, - posY: y + 1, - posX: 15 + 1, - borderRadius: 4, - colorBackground: "#000000aa", - colorStroke: "#000000aa", - }); - } - - drawRoundedRectangle(ctx, { - width: width - 30, - height, - posY: y + (this.isMouseDownedAndOver ? 1 : 0), - posX: 15, - borderRadius: isLowQuality() ? 0 : 4, - colorBackground: this.isMouseDownedAndOver ? "#444" : LiteGraph.WIDGET_BGCOLOR, - }); - - if (!isLowQuality()) { - ctx.textBaseline = "middle"; - ctx.textAlign = "center"; - ctx.fillStyle = LiteGraph.WIDGET_TEXT_COLOR; - ctx.fillText( - this.name, - node.size[0] / 2, - y + height / 2 + (this.isMouseDownedAndOver ? 1 : 0), - ); - } + drawWidgetButton({ctx, node, width, height, y}, this.name, this.isMouseDownedAndOver); } override onMouseUp(event: AdjustedMouseEvent, pos: Vector2, node: LGraphNode) { @@ -424,3 +393,49 @@ export class RgthreeLabelWidget implements IWidget { return true; } } + +type DrawContext = { + ctx: CanvasRenderingContext2D, + node: LGraphNode, + width: number, + y: number, + height: number, +} + +/** + * Draws a better button. + */ +export function drawWidgetButton(drawCtx: DrawContext, text: string, isMouseDownedAndOver: boolean = false) { + // First, add a shadow if we're not down or lowquality. + if (!isLowQuality() && !isMouseDownedAndOver) { + drawRoundedRectangle(drawCtx.ctx, { + width: drawCtx.width - 30 - 2, + height: drawCtx.height, + posY: drawCtx.y + 1, + posX: 15 + 1, + borderRadius: 4, + colorBackground: "#000000aa", + colorStroke: "#000000aa", + }); + } + + drawRoundedRectangle(drawCtx.ctx, { + width: drawCtx.width - 30, + height: drawCtx.height, + posY: drawCtx.y + (isMouseDownedAndOver ? 1 : 0), + posX: 15, + borderRadius: isLowQuality() ? 0 : 4, + colorBackground: isMouseDownedAndOver ? "#444" : LiteGraph.WIDGET_BGCOLOR, + }); + + if (!isLowQuality()) { + drawCtx.ctx.textBaseline = "middle"; + drawCtx.ctx.textAlign = "center"; + drawCtx.ctx.fillStyle = LiteGraph.WIDGET_TEXT_COLOR; + drawCtx.ctx.fillText( + text, + drawCtx.node.size[0] / 2, + drawCtx.y + drawCtx.height / 2 + (isMouseDownedAndOver ? 1 : 0), + ); + } +} \ No newline at end of file diff --git a/src_web/typings/rgthree.d.ts b/src_web/typings/rgthree.d.ts index a74bf16..03e247a 100644 --- a/src_web/typings/rgthree.d.ts +++ b/src_web/typings/rgthree.d.ts @@ -5,6 +5,13 @@ import type {RgthreeBaseVirtualNode} from '../comfyui/base_node.js' export type AdjustedMouseCustomEvent = CustomEvent<{ originalEvent: AdjustedMouseEvent }>; +export interface RgthreeBaseNodeConstructor extends Constructor { + static type: string; + static category: string; + static comfyClass: string; + static exposedActions: string[]; +} + export interface RgthreeBaseVirtualNodeConstructor extends Constructor { static type: string; static category: string; diff --git a/web/comfyui/base_any_input_connected_node.js b/web/comfyui/base_any_input_connected_node.js index fb604a0..83d196d 100644 --- a/web/comfyui/base_any_input_connected_node.js +++ b/web/comfyui/base_any_input_connected_node.js @@ -163,12 +163,13 @@ export class BaseAnyInputConnectedNode extends RgthreeBaseVirtualNode { } return super.connectByTypeOutput(slot, sourceNode, sourceSlotType, optsIn); } - static setUp(clazz) { - addConnectionLayoutSupport(clazz, app, [ + static setUp() { + super.setUp(); + addConnectionLayoutSupport(this, app, [ ["Left", "Right"], ["Right", "Left"], ]); - addMenuItem(clazz, app, { + addMenuItem(this, app, { name: (node) => { var _a; return `${((_a = node.properties) === null || _a === void 0 ? void 0 : _a["collapse_connections"]) ? "Show" : "Collapse"} Connections`; }, property: "collapse_connections", prepareValue: (_value, node) => { var _a; return !((_a = node.properties) === null || _a === void 0 ? void 0 : _a["collapse_connections"]); }, @@ -176,8 +177,6 @@ export class BaseAnyInputConnectedNode extends RgthreeBaseVirtualNode { app.graph.setDirtyCanvas(true, true); }, }); - LiteGraph.registerNodeType(clazz.type, clazz); - clazz.category = clazz._category; } } const oldLGraphNodeConnectByType = LGraphNode.prototype.connectByType; diff --git a/web/comfyui/base_node.js b/web/comfyui/base_node.js index d4dedc8..e5fcb8c 100644 --- a/web/comfyui/base_node.js +++ b/web/comfyui/base_node.js @@ -168,6 +168,15 @@ export class RgthreeBaseVirtualNode extends RgthreeBaseNode { super(title, false); this.isVirtualNode = true; } + static setUp() { + if (!this.type) { + throw new Error(`Missing type for RgthreeBaseVirtualNode: ${this.title}`); + } + LiteGraph.registerNodeType(this.type, this); + if (this._category) { + this.category = this._category; + } + } } export class RgthreeBaseServerNode extends RgthreeBaseNode { constructor(title) { diff --git a/web/comfyui/base_node_mode_changer.js b/web/comfyui/base_node_mode_changer.js index 1c4c30d..f253334 100644 --- a/web/comfyui/base_node_mode_changer.js +++ b/web/comfyui/base_node_mode_changer.js @@ -76,9 +76,6 @@ export class BaseNodeModeChanger extends BaseAnyInputConnectedNode { forceWidgetToggle(widget, skipOtherNodeCheck) { widget.doModeChange(!widget.value, skipOtherNodeCheck); } - static setUp(clazz) { - BaseAnyInputConnectedNode.setUp(clazz); - } } BaseNodeModeChanger.collapsible = false; BaseNodeModeChanger["@toggleRestriction"] = { diff --git a/web/comfyui/bookmark.js b/web/comfyui/bookmark.js index 22772b9..4d5f7d4 100644 --- a/web/comfyui/bookmark.js +++ b/web/comfyui/bookmark.js @@ -82,10 +82,6 @@ export class Bookmark extends RgthreeBaseVirtualNode { } canvas.setDirty(true, true); } - static setUp(clazz) { - LiteGraph.registerNodeType(clazz.type, clazz); - clazz.category = clazz._category; - } } Bookmark.type = NodeTypesString.BOOKMARK; Bookmark.title = NodeTypesString.BOOKMARK; @@ -93,7 +89,7 @@ Bookmark.slot_start_y = -20; app.registerExtension({ name: "rgthree.Bookmark", registerCustomNodes() { - Bookmark.setUp(Bookmark); + Bookmark.setUp(); }, }); function isBookmark(node) { diff --git a/web/comfyui/bypasser.js b/web/comfyui/bypasser.js index 3cf0db2..3f97178 100644 --- a/web/comfyui/bypasser.js +++ b/web/comfyui/bypasser.js @@ -35,7 +35,7 @@ BypasserNode.title = NodeTypesString.FAST_BYPASSER; app.registerExtension({ name: "rgthree.Bypasser", registerCustomNodes() { - BypasserNode.setUp(BypasserNode); + BypasserNode.setUp(); }, loadedGraphNode(node) { if (node.type == BypasserNode.title) { diff --git a/web/comfyui/fast_actions_button.js b/web/comfyui/fast_actions_button.js index f427f26..fa8344d 100644 --- a/web/comfyui/fast_actions_button.js +++ b/web/comfyui/fast_actions_button.js @@ -234,9 +234,9 @@ class FastActionsButton extends BaseAnyInputConnectedNode { } } } - static setUp(clazz) { - BaseAnyInputConnectedNode.setUp(clazz); - addMenuItem(clazz, app, { + static setUp() { + super.setUp(); + addMenuItem(this, app, { name: "➕ Append a Comfy Action", callback: (nodeArg) => { nodeArg.addComfyActionWidget(); @@ -256,7 +256,7 @@ FastActionsButton.collapsible = false; app.registerExtension({ name: "rgthree.FastActionsButton", registerCustomNodes() { - FastActionsButton.setUp(FastActionsButton); + FastActionsButton.setUp(); }, loadedGraphNode(node) { if (node.type == FastActionsButton.title) { diff --git a/web/comfyui/fast_groups_bypasser.js b/web/comfyui/fast_groups_bypasser.js index 696eadf..80ee991 100644 --- a/web/comfyui/fast_groups_bypasser.js +++ b/web/comfyui/fast_groups_bypasser.js @@ -10,10 +10,6 @@ export class FastGroupsBypasser extends BaseFastGroupsModeChanger { this.modeOff = 4; this.onConstructed(); } - static setUp(clazz) { - LiteGraph.registerNodeType(clazz.type, clazz); - clazz.category = clazz._category; - } } FastGroupsBypasser.type = NodeTypesString.FAST_GROUPS_BYPASSER; FastGroupsBypasser.title = NodeTypesString.FAST_GROUPS_BYPASSER; @@ -21,7 +17,7 @@ FastGroupsBypasser.exposedActions = ["Bypass all", "Enable all", "Toggle all"]; app.registerExtension({ name: "rgthree.FastGroupsBypasser", registerCustomNodes() { - FastGroupsBypasser.setUp(FastGroupsBypasser); + FastGroupsBypasser.setUp(); }, loadedGraphNode(node) { if (node.type == FastGroupsBypasser.title) { diff --git a/web/comfyui/fast_groups_muter.js b/web/comfyui/fast_groups_muter.js index 430ad9a..7724480 100644 --- a/web/comfyui/fast_groups_muter.js +++ b/web/comfyui/fast_groups_muter.js @@ -376,10 +376,6 @@ export class BaseFastGroupsModeChanger extends RgthreeBaseVirtualNode { `; } - static setUp(clazz) { - LiteGraph.registerNodeType(clazz.type, clazz); - clazz.category = clazz._category; - } } BaseFastGroupsModeChanger.type = NodeTypesString.FAST_GROUPS_MUTER; BaseFastGroupsModeChanger.title = NodeTypesString.FAST_GROUPS_MUTER; @@ -405,10 +401,6 @@ export class FastGroupsMuter extends BaseFastGroupsModeChanger { this.modeOff = LiteGraph.NEVER; this.onConstructed(); } - static setUp(clazz) { - LiteGraph.registerNodeType(clazz.type, clazz); - clazz.category = clazz._category; - } } FastGroupsMuter.type = NodeTypesString.FAST_GROUPS_MUTER; FastGroupsMuter.title = NodeTypesString.FAST_GROUPS_MUTER; @@ -416,7 +408,7 @@ FastGroupsMuter.exposedActions = ["Bypass all", "Enable all", "Toggle all"]; app.registerExtension({ name: "rgthree.FastGroupsMuter", registerCustomNodes() { - FastGroupsMuter.setUp(FastGroupsMuter); + FastGroupsMuter.setUp(); }, loadedGraphNode(node) { if (node.type == FastGroupsMuter.title) { diff --git a/web/comfyui/label.js b/web/comfyui/label.js index 6dfd20e..14e1faf 100644 --- a/web/comfyui/label.js +++ b/web/comfyui/label.js @@ -62,10 +62,6 @@ export class Label extends RgthreeBaseVirtualNode { onDblClick(event, pos, canvas) { LGraphCanvas.active_canvas.showShowNodePanel(this); } - static setUp(clazz) { - LiteGraph.registerNodeType(clazz.type, clazz); - clazz.category = clazz._category; - } onShowCustomPanelInfo(panel) { var _a, _b; (_a = panel.querySelector('div.property[data-property="Mode"]')) === null || _a === void 0 ? void 0 : _a.remove(); @@ -151,6 +147,6 @@ LGraph.prototype.getNodeOnPos = function (x, y, nodes_list, margin) { app.registerExtension({ name: "rgthree.Label", registerCustomNodes() { - Label.setUp(Label); + Label.setUp(); }, }); diff --git a/web/comfyui/muter.js b/web/comfyui/muter.js index 6d0b796..f18210f 100644 --- a/web/comfyui/muter.js +++ b/web/comfyui/muter.js @@ -35,7 +35,7 @@ MuterNode.title = NodeTypesString.FAST_MUTER; app.registerExtension({ name: "rgthree.Muter", registerCustomNodes() { - MuterNode.setUp(MuterNode); + MuterNode.setUp(); }, loadedGraphNode(node) { if (node.type == MuterNode.title) { diff --git a/web/comfyui/random_unmuter.js b/web/comfyui/random_unmuter.js index cdf897d..171aee4 100644 --- a/web/comfyui/random_unmuter.js +++ b/web/comfyui/random_unmuter.js @@ -84,9 +84,6 @@ class RandomUnmuterNode extends BaseAnyInputConnectedNode { `; } - static setUp(clazz) { - BaseAnyInputConnectedNode.setUp(clazz); - } } RandomUnmuterNode.exposedActions = ["Mute all", "Enable all"]; RandomUnmuterNode.type = NodeTypesString.RANDOM_UNMUTER; @@ -94,7 +91,7 @@ RandomUnmuterNode.title = RandomUnmuterNode.type; app.registerExtension({ name: "rgthree.RandomUnmuter", registerCustomNodes() { - RandomUnmuterNode.setUp(RandomUnmuterNode); + RandomUnmuterNode.setUp(); }, loadedGraphNode(node) { if (node.type == RandomUnmuterNode.title) { diff --git a/web/comfyui/reroute.js b/web/comfyui/reroute.js index 7ef50bd..b7c0aa1 100644 --- a/web/comfyui/reroute.js +++ b/web/comfyui/reroute.js @@ -780,6 +780,7 @@ class RerouteNode extends RgthreeBaseVirtualNode { } } RerouteNode.title = NodeTypesString.REROUTE; +RerouteNode.type = NodeTypesString.REROUTE; RerouteNode.title_mode = LiteGraph.NO_TITLE; RerouteNode.collapsable = false; RerouteNode.layout_slot_offset = 5; @@ -934,7 +935,6 @@ addMenuItem(RerouteNode, app, { app.registerExtension({ name: "rgthree.Reroute", registerCustomNodes() { - LiteGraph.registerNodeType(RerouteNode.title, RerouteNode); - RerouteNode.category = RerouteNode._category; + RerouteNode.setUp(); }, }); diff --git a/web/comfyui/utils_widgets.js b/web/comfyui/utils_widgets.js index 3322fec..f086895 100644 --- a/web/comfyui/utils_widgets.js +++ b/web/comfyui/utils_widgets.js @@ -109,31 +109,7 @@ export class RgthreeBetterButtonWidget extends RgthreeBaseWidget { this.mouseUpCallback = mouseUpCallback; } draw(ctx, node, width, y, height) { - if (!isLowQuality() && !this.isMouseDownedAndOver) { - drawRoundedRectangle(ctx, { - width: width - 30 - 2, - height, - posY: y + 1, - posX: 15 + 1, - borderRadius: 4, - colorBackground: "#000000aa", - colorStroke: "#000000aa", - }); - } - drawRoundedRectangle(ctx, { - width: width - 30, - height, - posY: y + (this.isMouseDownedAndOver ? 1 : 0), - posX: 15, - borderRadius: isLowQuality() ? 0 : 4, - colorBackground: this.isMouseDownedAndOver ? "#444" : LiteGraph.WIDGET_BGCOLOR, - }); - if (!isLowQuality()) { - ctx.textBaseline = "middle"; - ctx.textAlign = "center"; - ctx.fillStyle = LiteGraph.WIDGET_TEXT_COLOR; - ctx.fillText(this.name, node.size[0] / 2, y + height / 2 + (this.isMouseDownedAndOver ? 1 : 0)); - } + drawWidgetButton({ ctx, node, width, height, y }, this.name, this.isMouseDownedAndOver); } onMouseUp(event, pos, node) { return this.mouseUpCallback(event, pos, node); @@ -247,3 +223,30 @@ export class RgthreeLabelWidget { return true; } } +export function drawWidgetButton(drawCtx, text, isMouseDownedAndOver = false) { + if (!isLowQuality() && !isMouseDownedAndOver) { + drawRoundedRectangle(drawCtx.ctx, { + width: drawCtx.width - 30 - 2, + height: drawCtx.height, + posY: drawCtx.y + 1, + posX: 15 + 1, + borderRadius: 4, + colorBackground: "#000000aa", + colorStroke: "#000000aa", + }); + } + drawRoundedRectangle(drawCtx.ctx, { + width: drawCtx.width - 30, + height: drawCtx.height, + posY: drawCtx.y + (isMouseDownedAndOver ? 1 : 0), + posX: 15, + borderRadius: isLowQuality() ? 0 : 4, + colorBackground: isMouseDownedAndOver ? "#444" : LiteGraph.WIDGET_BGCOLOR, + }); + if (!isLowQuality()) { + drawCtx.ctx.textBaseline = "middle"; + drawCtx.ctx.textAlign = "center"; + drawCtx.ctx.fillStyle = LiteGraph.WIDGET_TEXT_COLOR; + drawCtx.ctx.fillText(text, drawCtx.node.size[0] / 2, drawCtx.y + drawCtx.height / 2 + (isMouseDownedAndOver ? 1 : 0)); + } +}