Cleanup for settings up virtual nodes

This commit is contained in:
rgthree
2024-07-30 22:03:26 -04:00
parent 2613da28c6
commit 2c8ddf29ea
27 changed files with 138 additions and 157 deletions
@@ -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;
}
}
+13 -3
View File
@@ -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;
}
}
}
/**
@@ -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);
}
}
+1 -6
View File
@@ -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();
},
});
+1 -1
View File
@@ -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) {
+4 -5
View File
@@ -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) {
+1 -6
View File
@@ -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) {
+1 -11
View File
@@ -466,11 +466,6 @@ export abstract class BaseFastGroupsModeChanger extends RgthreeBaseVirtualNode {
</li>
</ul>`;
}
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) {
+1 -6
View File
@@ -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 <T extends LGraphNode>(
app.registerExtension({
name: "rgthree.Label",
registerCustomNodes() {
Label.setUp(Label);
Label.setUp();
},
});
+1 -1
View File
@@ -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) {
+1 -5
View File
@@ -103,16 +103,12 @@ class RandomUnmuterNode extends BaseAnyInputConnectedNode {
</ul>
`;
}
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) {
+2 -2
View File
@@ -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();
},
});
+47 -32
View File
@@ -210,38 +210,7 @@ export class RgthreeBetterButtonWidget extends RgthreeBaseWidget<string> {
}
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<null> {
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),
);
}
}
+7
View File
@@ -5,6 +5,13 @@ import type {RgthreeBaseVirtualNode} from '../comfyui/base_node.js'
export type AdjustedMouseCustomEvent = CustomEvent<{ originalEvent: AdjustedMouseEvent }>;
export interface RgthreeBaseNodeConstructor extends Constructor<RgthreeBaseNode> {
static type: string;
static category: string;
static comfyClass: string;
static exposedActions: string[];
}
export interface RgthreeBaseVirtualNodeConstructor extends Constructor<RgthreeBaseVirtualNode> {
static type: string;
static category: string;
+4 -5
View File
@@ -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;
+9
View File
@@ -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) {
-3
View File
@@ -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"] = {
+1 -5
View File
@@ -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) {
+1 -1
View File
@@ -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) {
+4 -4
View File
@@ -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) {
+1 -5
View File
@@ -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) {
+1 -9
View File
@@ -376,10 +376,6 @@ export class BaseFastGroupsModeChanger extends RgthreeBaseVirtualNode {
</li>
</ul>`;
}
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) {
+1 -5
View File
@@ -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();
},
});
+1 -1
View File
@@ -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) {
+1 -4
View File
@@ -84,9 +84,6 @@ class RandomUnmuterNode extends BaseAnyInputConnectedNode {
</ul>
`;
}
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) {
+2 -2
View File
@@ -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();
},
});
+28 -25
View File
@@ -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));
}
}