From a0e9f628a3acab34854e95cd492e9e4d14b16a0d Mon Sep 17 00:00:00 2001 From: rgthree Date: Sun, 10 Dec 2023 14:37:22 -0500 Subject: [PATCH] Add a zoom option to bookmarks and cleanup typings for widgets. Fixes #73 --- ts/base_power_prompt.ts | 2 +- ts/bookmark.ts | 28 +++++++++++++++++++- ts/fast_groups_muter.ts | 4 +-- ts/typings/litegraph.d.ts | 56 +++++++++++++++++++++++++++++---------- web/bookmark.js | 17 ++++++++++-- web/fast_groups_muter.js | 4 +-- 6 files changed, 89 insertions(+), 22 deletions(-) diff --git a/ts/base_power_prompt.ts b/ts/base_power_prompt.ts index f595d2d..d56e14e 100644 --- a/ts/base_power_prompt.ts +++ b/ts/base_power_prompt.ts @@ -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); diff --git a/ts/bookmark.ts b/ts/bookmark.ts index a47f96e..6fe6d48 100644 --- a/ts/bookmark.ts +++ b/ts/bookmark.ts @@ -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('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(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); } } diff --git a/ts/fast_groups_muter.ts b/ts/fast_groups_muter.ts index 7788984..0f57f87 100644 --- a/ts/fast_groups_muter.ts +++ b/ts/fast_groups_muter.ts @@ -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); diff --git a/ts/typings/litegraph.d.ts b/ts/typings/litegraph.d.ts index 7a75622..7b61e4b 100644 --- a/ts/typings/litegraph.d.ts +++ b/ts/typings/litegraph.d.ts @@ -66,6 +66,40 @@ export type WidgetComboCallback = ( 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 { name: string | null; // @rgthree @@ -104,26 +138,20 @@ export interface IWidget { export interface IButtonWidget extends IWidget { type: "button"; } -export interface IToggleWidget - extends IWidget { +// @rgthree: adding options +export interface IToggleWidget extends IWidget { type: "toggle"; } -export interface ISliderWidget - extends IWidget { +// @rgthree: adding options +export interface ISliderWidget extends IWidget { type: "slider"; } -export interface INumberWidget extends IWidget { +// @rgthree: adding options +export interface INumberWidget extends IWidget { type: "number"; } -export interface IComboWidget - extends IWidget< - string[], - { - values: - | string[] - | ((widget: IComboWidget, node: LGraphNode) => string[]); - } | TOptions - > { +// @rgthree: adding options +export interface IComboWidget extends IWidget { value: T[0]; type: "combo"; callback?: WidgetComboCallback; diff --git a/web/bookmark.js b/web/bookmark.js index a51da82..ac33c3c 100644 --- a/web/bookmark.js +++ b/web/bookmark.js @@ -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() { diff --git a/web/fast_groups_muter.js b/web/fast_groups_muter.js index 85a028a..89b49bf 100644 --- a/web/fast_groups_muter.js +++ b/web/fast_groups_muter.js @@ -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); }