nodes/rgthree-rgthree-comfy
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Add a zoom option to bookmarks and cleanup typings for widgets. Fixes #73

Browse Source
This commit is contained in:
rgthree
2023-12-10 14:37:22 -05:00
parent c45b9e5e93
commit a0e9f628a3
6 changed files with 89 additions and 22 deletions
Download Patch File Download Diff File Expand all files Collapse all files
ts/base_power_prompt.ts
+1 -1
View File
@@ -175,7 +175,7 @@ export class PowerPrompt {
return size;
};
}
this.combos[key]!.options.values = values;
this.combos[key]!.options!.values = values;
this.combos[key]!.value = values[0];
} else if (!shouldShow && this.combos[key]) {
this.node.widgets.splice(this.node.widgets.indexOf(this.combos[key]!), 1);
ts/bookmark.ts
+27 -1
View File
@@ -7,6 +7,9 @@ import {
type LGraph as TLGraph,
type LiteGraph as TLiteGraph,
LGraphCanvas as TLGraphCanvas,
ISliderWidget,
INumberWidget,
Vector2,
} from "./typings/litegraph.js";
declare const LiteGraph: typeof TLiteGraph;
@@ -21,6 +24,10 @@ export class Bookmark extends RgthreeBaseNode {
static override type = NodeTypesString.BOOKMARK;
static override title = "🔖";
// Really silly, but Litegraph assumes we have at least one input/output... so we need to
// counteract it's computeSize calculation by offsetting the start.
static slot_start_y = -20;
// LiteGraph adds mroe spacing than we want when calculating a nodes' `_collapsed_width`, so we'll
// override it with a setter and re-set it measured exactly as we want.
___collapsed_width: number = 0;
@@ -48,10 +55,26 @@ export class Bookmark extends RgthreeBaseNode {
super(title);
this.addWidget('text', 'shortcut_key', '1', (value: string, ...args) => {
value = value.trim()[0] || '1';
},{
y: 8,
});
this.addWidget<INumberWidget>('number', 'zoom', 1, (value: number) => {
}, {
y: 8 + LiteGraph.NODE_WIDGET_HEIGHT + 4,
max: 2,
min: 0.5,
precision: 2,
});
this.keypressBound = this.onKeypress.bind(this);
}
// override computeSize(out?: Vector2 | undefined): Vector2 {
// super.computeSize(out);
// const minHeight = (this.widgets?.length || 0) * (LiteGraph.NODE_WIDGET_HEIGHT + 4) + 16;
// this.size[1] = Math.max(minHeight, this.size[1]);
// }
static override setUp<T extends RgthreeBaseNode>(clazz: new (title?: string) => T) {
LiteGraph.registerNodeType((clazz as any).type, clazz);
@@ -83,8 +106,11 @@ export class Bookmark extends RgthreeBaseNode {
if (canvas?.ds?.offset) {
canvas.ds.offset[0] = -this.pos[0] + 16;
canvas.ds.offset[1] = -this.pos[1] + 40;
canvas.setDirty(true, true);
}
if (canvas?.ds?.scale != null) {
canvas.ds.scale = Number(this.widgets[1]!.value || 1);
}
canvas.setDirty(true, true);
}
}
ts/fast_groups_muter.ts
+2 -2
View File
@@ -323,7 +323,7 @@ export class FastGroupsMuter extends RgthreeBaseNode {
posY: number,
height: number,
) {
const lowQuality = (canvas.ds?.scale || 1) < 0.5;
const lowQuality = (canvas.ds?.scale || 1) <= 0.5;
let margin = 15;
let outline_color = LiteGraph.WIDGET_OUTLINE_COLOR;
@@ -408,7 +408,7 @@ export class FastGroupsMuter extends RgthreeBaseNode {
node.properties?.[PROPERTY_SHOW_NAV] !== false &&
pos[0] >= node.size[0] - 15 - 28 - 1
) {
const lowQuality = (canvas.ds?.scale || 1) < 0.5;
const lowQuality = (canvas.ds?.scale || 1) <= 0.5;
if (!lowQuality) {
// Clicked on right half with nav arrow, go to the group.
app.canvas.centerOnNode(group);
ts/typings/litegraph.d.ts
Vendored
+42 -14
View File
@@ -66,6 +66,40 @@ export type WidgetComboCallback<T extends IWidget = IWidget> = (
event?: MouseEvent
) => void;
// @rgthree
export type IWidgetOptions = {
y?: number; // ?
property?: string;
serialize?: boolean; // ComfyUI in app.js
forceInput?: boolean; // ComfyUI in app.js
defaultInput?: boolean; // ComfyUI in app.js
}
// @rgthree
export type IWidgetToggleOptions = IWidgetOptions & {
on?: string;
off?: string;
}
// @rgthree
export type IWidgetNumberOptions = IWidgetOptions & {
precision?: number;
max?: number;
min?: number;
}
// @rgthree
export type IWidgetSliderOptions = IWidgetNumberOptions & {
slider_color?: string;
marker_color?: string;
}
// @rgthree
export type IWidgetComboOptions = IWidgetOptions & {
values?: string[] | ((widget: IComboWidget, node: LGraphNode) => string[]);
}
export interface IWidget<TValue = any, TOptions = any> {
name: string | null;
// @rgthree
@@ -104,26 +138,20 @@ export interface IWidget<TValue = any, TOptions = any> {
export interface IButtonWidget extends IWidget<null, {}> {
type: "button";
}
export interface IToggleWidget
extends IWidget<boolean, { on?: string; off?: string }> {
// @rgthree: adding options
export interface IToggleWidget extends IWidget<boolean, IWidgetToggleOptions> {
type: "toggle";
}
export interface ISliderWidget
extends IWidget<number, { max: number; min: number }> {
// @rgthree: adding options
export interface ISliderWidget extends IWidget<number, IWidgetSliderOptions> {
type: "slider";
}
export interface INumberWidget extends IWidget<number, { precision: number }> {
// @rgthree: adding options
export interface INumberWidget extends IWidget<number, IWidgetNumberOptions> {
type: "number";
}
export interface IComboWidget
extends IWidget<
string[],
{
values:
| string[]
| ((widget: IComboWidget, node: LGraphNode) => string[]);
} | TOptions
> {
// @rgthree: adding options
export interface IComboWidget extends IWidget<string[], IWidgetComboOptions> {
value: T[0];
type: "combo";
callback?: WidgetComboCallback;
web/bookmark.js
+15 -2
View File
@@ -20,6 +20,15 @@ export class Bookmark extends RgthreeBaseNode {
this.serialize_widgets = true;
this.addWidget('text', 'shortcut_key', '1', (value, ...args) => {
value = value.trim()[0] || '1';
}, {
y: 8,
});
this.addWidget('number', 'zoom', 1, (value) => {
}, {
y: 8 + LiteGraph.NODE_WIDGET_HEIGHT + 4,
max: 2,
min: 0.5,
precision: 2,
});
this.keypressBound = this.onKeypress.bind(this);
}
@@ -43,17 +52,21 @@ export class Bookmark extends RgthreeBaseNode {
}
}
canvasToBookmark() {
var _a;
var _a, _b;
const canvas = app.canvas;
if ((_a = canvas === null || canvas === void 0 ? void 0 : canvas.ds) === null || _a === void 0 ? void 0 : _a.offset) {
canvas.ds.offset[0] = -this.pos[0] + 16;
canvas.ds.offset[1] = -this.pos[1] + 40;
canvas.setDirty(true, true);
}
if (((_b = canvas === null || canvas === void 0 ? void 0 : canvas.ds) === null || _b === void 0 ? void 0 : _b.scale) != null) {
canvas.ds.scale = Number(this.widgets[1].value || 1);
}
canvas.setDirty(true, true);
}
}
Bookmark.type = NodeTypesString.BOOKMARK;
Bookmark.title = "🔖";
Bookmark.slot_start_y = -20;
app.registerExtension({
name: "rgthree.Bookmark",
registerCustomNodes() {
web/fast_groups_muter.js
+2 -2
View File
@@ -237,7 +237,7 @@ export class FastGroupsMuter extends RgthreeBaseNode {
options: { on: "yes", off: "no" },
draw: function (ctx, node, width, posY, height) {
var _a, _b;
const lowQuality = (((_a = canvas.ds) === null || _a === void 0 ? void 0 : _a.scale) || 1) < 0.5;
const lowQuality = (((_a = canvas.ds) === null || _a === void 0 ? void 0 : _a.scale) || 1) <= 0.5;
let margin = 15;
let outline_color = LiteGraph.WIDGET_OUTLINE_COLOR;
let background_color = LiteGraph.WIDGET_BGCOLOR;
@@ -302,7 +302,7 @@ export class FastGroupsMuter extends RgthreeBaseNode {
if (event.type == "pointerdown") {
if (((_a = node.properties) === null || _a === void 0 ? void 0 : _a[PROPERTY_SHOW_NAV]) !== false &&
pos[0] >= node.size[0] - 15 - 28 - 1) {
const lowQuality = (((_b = canvas.ds) === null || _b === void 0 ? void 0 : _b.scale) || 1) < 0.5;
const lowQuality = (((_b = canvas.ds) === null || _b === void 0 ? void 0 : _b.scale) || 1) <= 0.5;
if (!lowQuality) {
app.canvas.centerOnNode(group);
}