From 348c05d55164d0a021cd37f77ee29a9abc184808 Mon Sep 17 00:00:00 2001 From: Crystian Date: Wed, 25 Sep 2024 01:28:45 +0200 Subject: [PATCH] visual fixes --- web/monitor.js | 8 ++++---- web/monitor.ts | 26 ++++---------------------- web/monitorUI.d.ts | 3 ++- web/monitorUI.js | 23 ++++++++++++----------- web/monitorUI.ts | 15 ++++++++------- web/progressBar.js | 2 +- web/progressBar.ts | 19 +++++++------------ web/progressBarUI.d.ts | 7 +++++-- web/progressBarUI.js | 33 +++++++++++++++++++++++++-------- web/progressBarUI.ts | 25 +++++++++++++++---------- web/progressBarUIBase.d.ts | 3 +-- web/progressBarUIBase.js | 26 +------------------------- web/progressBarUIBase.ts | 10 +--------- 13 files changed, 86 insertions(+), 114 deletions(-) diff --git a/web/monitor.js b/web/monitor.js index 4a64279..a0a531b 100644 --- a/web/monitor.js +++ b/web/monitor.js @@ -551,9 +551,9 @@ class CrystoolsMonitor { configurable: true, writable: true, value: (monitorSettings) => { - const value = app.ui.settings.getSettingValue(monitorSettings.id, monitorSettings.defaultValue); - if (monitorSettings.htmlMonitorRef) { - monitorSettings.htmlMonitorRef.style.display = value ? 'flex' : 'none'; + if (this.monitorUI) { + const value = app.ui.settings.getSettingValue(monitorSettings.id, monitorSettings.defaultValue); + this.monitorUI.showMonitor(monitorSettings, value); } } }); @@ -637,7 +637,7 @@ class CrystoolsMonitor { this.createSettings(); const currentRate = parseFloat(app.ui.settings.getSettingValue(this.settingsRate.id, this.settingsRate.defaultValue)); this.newMenu = app.ui.settings.getSettingValue('Comfy.UseNewMenu', 'Disabled'); - this.monitorUI = new MonitorUI(this.monitorCPUElement, this.monitorRAMElement, this.monitorHDDElement, this.monitorGPUSettings, this.monitorVRAMSettings, this.monitorTemperatureSettings, currentRate, (this.newMenu === NewMenuOptions.Disabled)); + this.monitorUI = new MonitorUI(this.monitorCPUElement, this.monitorRAMElement, this.monitorHDDElement, this.monitorGPUSettings, this.monitorVRAMSettings, this.monitorTemperatureSettings, currentRate); this.updateDisplay(); this.registerListeners(); } diff --git a/web/monitor.ts b/web/monitor.ts index f92d7a8..1826e85 100644 --- a/web/monitor.ts +++ b/web/monitor.ts @@ -404,19 +404,12 @@ class CrystoolsMonitor { }); }; - // eslint-disable-next-line complexity moveMonitor = (position: NewMenuOptions): void => { let parentElement: Element | null | undefined; switch (position) { case NewMenuOptions.Disabled: parentElement = document.getElementById('queue-button'); - // TODO remove this - if (document.getElementById('ProgressBarUI')) { - // @ts-ignore - document.getElementById('ProgressBarUI').style.display = 'flex'; - - } if (parentElement && this.monitorUI.htmlRoot) { parentElement.insertAdjacentElement('afterend', this.monitorUI.htmlRoot); } else { @@ -426,26 +419,16 @@ class CrystoolsMonitor { case NewMenuOptions.Top: case NewMenuOptions.Bottom: - // TODO remove this - if (document.getElementById('ProgressBarUI')) { - // @ts-ignore - document.getElementById('ProgressBarUI').style.display = 'none'; - } - //comfyui-button-group - this.monitorUI.htmlRoot.classList.add('comfyui-button-group'); - // this.monitorUI.htmlRoot.classList.add('comfyui-menu-mobile-collapse'); + this.monitorUI.htmlRoot?.classList.add('comfyui-button-group'); parentElement = document.getElementsByClassName('comfyui-menu-push')[0]; if (parentElement && this.monitorUI.htmlRoot) { parentElement.insertAdjacentElement('afterend', this.monitorUI.htmlRoot); - // parentElement.appendChild(this.monitorUI.htmlRoot); } else { console.error('Crystools: parentElement to move monitors not found!', parentElement); } break; } - - }; updateAllWidget = (): void => { @@ -469,9 +452,9 @@ class CrystoolsMonitor { * @param monitorSettings */ updateWidget = (monitorSettings: TMonitorSettings): void => { - const value = app.ui.settings.getSettingValue(monitorSettings.id, monitorSettings.defaultValue); - if (monitorSettings.htmlMonitorRef) { - monitorSettings.htmlMonitorRef.style.display = value ? 'flex' : 'none'; + if (this.monitorUI) { + const value = app.ui.settings.getSettingValue(monitorSettings.id, monitorSettings.defaultValue); + this.monitorUI.showMonitor(monitorSettings, value); } }; @@ -544,7 +527,6 @@ class CrystoolsMonitor { this.monitorVRAMSettings, this.monitorTemperatureSettings, currentRate, - (this.newMenu === NewMenuOptions.Disabled), ); this.updateDisplay(); diff --git a/web/monitorUI.d.ts b/web/monitorUI.d.ts index af5056b..16328fc 100644 --- a/web/monitorUI.d.ts +++ b/web/monitorUI.d.ts @@ -9,7 +9,7 @@ export declare class MonitorUI extends ProgressBarUIBase { private currentRate; lastMonitor: number; styleSheet: HTMLStyleElement; - constructor(monitorCPUElement: TMonitorSettings, monitorRAMElement: TMonitorSettings, monitorHDDElement: TMonitorSettings, monitorGPUSettings: TMonitorSettings[], monitorVRAMSettings: TMonitorSettings[], monitorTemperatureSettings: TMonitorSettings[], currentRate: number, showSection: boolean); + constructor(monitorCPUElement: TMonitorSettings, monitorRAMElement: TMonitorSettings, monitorHDDElement: TMonitorSettings, monitorGPUSettings: TMonitorSettings[], monitorVRAMSettings: TMonitorSettings[], monitorTemperatureSettings: TMonitorSettings[], currentRate: number); createDOM: () => void; createDOMGPUMonitor: (monitorSettings?: TMonitorSettings) => void; orderMonitors: () => void; @@ -19,4 +19,5 @@ export declare class MonitorUI extends ProgressBarUIBase { updatedAnimationDuration: (monitorSettings: TMonitorSettings, value: number) => void; createMonitor: (monitorSettings?: TMonitorSettings) => HTMLDivElement; updateMonitorSize: (width: number, height: number) => void; + showMonitor: (monitorSettings: TMonitorSettings, value: boolean) => void; } diff --git a/web/monitorUI.js b/web/monitorUI.js index 347345e..454dc1e 100644 --- a/web/monitorUI.js +++ b/web/monitorUI.js @@ -1,8 +1,8 @@ import { ProgressBarUIBase } from './progressBarUIBase.js'; import { createStyleSheet, formatBytes } from './utils.js'; export class MonitorUI extends ProgressBarUIBase { - constructor(monitorCPUElement, monitorRAMElement, monitorHDDElement, monitorGPUSettings, monitorVRAMSettings, monitorTemperatureSettings, currentRate, showSection) { - super('queue-button', 'crystools-root', showSection); + constructor(monitorCPUElement, monitorRAMElement, monitorHDDElement, monitorGPUSettings, monitorVRAMSettings, monitorTemperatureSettings, currentRate) { + super('queue-button', 'crystools-root'); Object.defineProperty(this, "monitorCPUElement", { enumerable: true, configurable: true, @@ -45,12 +45,6 @@ export class MonitorUI extends ProgressBarUIBase { writable: true, value: currentRate }); - Object.defineProperty(this, "showSection", { - enumerable: true, - configurable: true, - writable: true, - value: showSection - }); Object.defineProperty(this, "lastMonitor", { enumerable: true, configurable: true, @@ -163,9 +157,6 @@ export class MonitorUI extends ProgressBarUIBase { configurable: true, writable: true, value: (monitorSettings, percent, used, total) => { - if (!this.showSection) { - return; - } if (!(monitorSettings.htmlMonitorSliderRef && monitorSettings.htmlMonitorLabelRef)) { return; } @@ -269,6 +260,16 @@ export class MonitorUI extends ProgressBarUIBase { }`; } }); + Object.defineProperty(this, "showMonitor", { + enumerable: true, + configurable: true, + writable: true, + value: (monitorSettings, value) => { + if (monitorSettings.htmlMonitorRef) { + monitorSettings.htmlMonitorRef.style.display = value ? 'flex' : 'none'; + } + } + }); this.createDOM(); this.styleSheet = createStyleSheet('crystools-monitors-size'); } diff --git a/web/monitorUI.ts b/web/monitorUI.ts index cbf66cc..cf50d9c 100644 --- a/web/monitorUI.ts +++ b/web/monitorUI.ts @@ -13,9 +13,8 @@ export class MonitorUI extends ProgressBarUIBase { private monitorVRAMSettings: TMonitorSettings[], private monitorTemperatureSettings: TMonitorSettings[], private currentRate: number, - showSection: boolean, ) { - super('queue-button', 'crystools-root', showSection); + super('queue-button', 'crystools-root'); this.createDOM(); this.styleSheet = createStyleSheet('crystools-monitors-size'); @@ -117,12 +116,7 @@ export class MonitorUI extends ProgressBarUIBase { }); }; - // eslint-disable-next-line complexity updateMonitor = (monitorSettings: TMonitorSettings, percent: number, used?: number, total?: number): void => { - if (!this.showSection) { - return; - } - if (!(monitorSettings.htmlMonitorSliderRef && monitorSettings.htmlMonitorLabelRef)) { return; } @@ -132,6 +126,7 @@ export class MonitorUI extends ProgressBarUIBase { } // console.log('updateMonitor', monitorSettings.id, percent); + const prefix = monitorSettings.monitorTitle ? monitorSettings.monitorTitle + ' - ' : ''; let title = `${Math.floor(percent)}${monitorSettings.symbol}`; let postfix = ''; @@ -222,4 +217,10 @@ export class MonitorUI extends ProgressBarUIBase { height: ${height}px; width: ${width}px; }`; }; + + showMonitor = (monitorSettings: TMonitorSettings, value: boolean): void => { + if (monitorSettings.htmlMonitorRef) { + monitorSettings.htmlMonitorRef.style.display = value ? 'flex' : 'none'; + } + }; } diff --git a/web/progressBar.js b/web/progressBar.js index ea5c071..020c05a 100644 --- a/web/progressBar.js +++ b/web/progressBar.js @@ -89,7 +89,7 @@ class CrystoolsProgressBar { const newMenu = app.ui.settings.getSettingValue('Comfy.UseNewMenu', 'Disabled'); if (newMenu !== this.newMenu) { this.newMenu = newMenu; - this.progressBarUI.showFullSection(this.newMenu === NewMenuOptions.Disabled); + this.progressBarUI.showSection(this.newMenu === NewMenuOptions.Disabled); } this.progressBarUI.updateDisplay(this.currentStatus, this.timeStart, this.currentProgress); }); diff --git a/web/progressBar.ts b/web/progressBar.ts index 20cac8a..989b066 100644 --- a/web/progressBar.ts +++ b/web/progressBar.ts @@ -35,19 +35,15 @@ class CrystoolsProgressBar { }; updateDisplay = (): void => { - const newMenu = app.ui.settings.getSettingValue('Comfy.UseNewMenu', 'Disabled'); + setTimeout(() => { + const newMenu = app.ui.settings.getSettingValue('Comfy.UseNewMenu', 'Disabled'); + if (newMenu !== this.newMenu) { + this.newMenu = newMenu; - if (newMenu !== this.newMenu) { - this.newMenu = newMenu; - - this.progressBarUI.showSection = (this.newMenu === NewMenuOptions.Disabled); - if (this.progressBarUI.showSection) { - this.setup(); + this.progressBarUI.showSection(this.newMenu === NewMenuOptions.Disabled); } - } - // this.progressBarUI.showSection = (this.newMenu !== NewMenuOptions.Disabled); - // this.progressBarUI.htmlContainer.style.display = 'none'; - this.progressBarUI.updateDisplay(this.currentStatus, this.timeStart, this.currentProgress); + this.progressBarUI.updateDisplay(this.currentStatus, this.timeStart, this.currentProgress); + }); }; // automatically called by ComfyUI @@ -58,7 +54,6 @@ class CrystoolsProgressBar { return; } - this.newMenu = app.ui.settings.getSettingValue('Comfy.UseNewMenu', 'Disabled'); this.progressBarUI = new ProgressBarUI((this.newMenu === NewMenuOptions.Disabled), this.centerNode); diff --git a/web/progressBarUI.d.ts b/web/progressBarUI.d.ts index 8d2755f..88c82e5 100644 --- a/web/progressBarUI.d.ts +++ b/web/progressBarUI.d.ts @@ -1,14 +1,17 @@ import { EStatus, ProgressBarUIBase } from './progressBarUIBase.js'; export declare class ProgressBarUI extends ProgressBarUIBase { + showSectionFlag: boolean; private centerNode; htmlProgressSliderRef: HTMLDivElement; htmlProgressLabelRef: HTMLDivElement; currentStatus: EStatus; timeStart: number; currentProgress: number; - progressBar: boolean; - constructor(showSection: boolean, centerNode: () => void); + showProgressBarFlag: boolean; + constructor(showSectionFlag: boolean, centerNode: () => void); createDOM: () => void; updateDisplay: (currentStatus: EStatus, timeStart: number, currentProgress: number) => void; + showSection: (value: boolean) => void; showProgressBar: (value: boolean) => void; + private displaySection; } diff --git a/web/progressBarUI.js b/web/progressBarUI.js index dc7f821..238c280 100644 --- a/web/progressBarUI.js +++ b/web/progressBarUI.js @@ -1,12 +1,12 @@ import { EStatus, ProgressBarUIBase } from './progressBarUIBase.js'; export class ProgressBarUI extends ProgressBarUIBase { - constructor(showSection, centerNode) { - super('queue-button', 'crystools-root', showSection); - Object.defineProperty(this, "showSection", { + constructor(showSectionFlag, centerNode) { + super('queue-button', 'crystools-root'); + Object.defineProperty(this, "showSectionFlag", { enumerable: true, configurable: true, writable: true, - value: showSection + value: showSectionFlag }); Object.defineProperty(this, "centerNode", { enumerable: true, @@ -44,7 +44,7 @@ export class ProgressBarUI extends ProgressBarUIBase { writable: true, value: void 0 }); - Object.defineProperty(this, "progressBar", { + Object.defineProperty(this, "showProgressBarFlag", { enumerable: true, configurable: true, writable: true, @@ -79,7 +79,7 @@ export class ProgressBarUI extends ProgressBarUIBase { configurable: true, writable: true, value: (currentStatus, timeStart, currentProgress) => { - if (!(this.showSection && this.progressBar)) { + if (!(this.showSectionFlag && this.showProgressBarFlag)) { return; } if (!(this.htmlProgressLabelRef && this.htmlProgressSliderRef)) { @@ -108,13 +108,30 @@ export class ProgressBarUI extends ProgressBarUIBase { } } }); + Object.defineProperty(this, "showSection", { + enumerable: true, + configurable: true, + writable: true, + value: (value) => { + this.showSectionFlag = value; + this.displaySection(); + } + }); Object.defineProperty(this, "showProgressBar", { enumerable: true, configurable: true, writable: true, value: (value) => { - this.progressBar = value; - this.showFullSectionOnDemand(this.progressBar && this.showSection); + this.showProgressBarFlag = value; + this.displaySection(); + } + }); + Object.defineProperty(this, "displaySection", { + enumerable: true, + configurable: true, + writable: true, + value: () => { + this.htmlContainer.style.display = (this.showSectionFlag && this.showProgressBarFlag) ? 'block' : 'none'; } }); this.createDOM(); diff --git a/web/progressBarUI.ts b/web/progressBarUI.ts index 5e6164e..5337911 100644 --- a/web/progressBarUI.ts +++ b/web/progressBarUI.ts @@ -6,13 +6,13 @@ export class ProgressBarUI extends ProgressBarUIBase { currentStatus: EStatus; timeStart: number; currentProgress: number; - progressBar: boolean; + showProgressBarFlag: boolean; constructor( - showSection: boolean, + public showSectionFlag: boolean, private centerNode: () => void, ) { - super('queue-button', 'crystools-root', showSection); + super('queue-button', 'crystools-root'); this.createDOM(); } @@ -41,11 +41,7 @@ export class ProgressBarUI extends ProgressBarUIBase { // eslint-disable-next-line complexity updateDisplay = (currentStatus: EStatus, timeStart: number, currentProgress: number): void => { - if (!this.showSection) { - return; - } - - if (!this.progressBar) { + if (!(this.showSectionFlag && this.showProgressBarFlag)) { return; } @@ -84,9 +80,18 @@ export class ProgressBarUI extends ProgressBarUIBase { }; + public showSection = (value: boolean): void => { + this.showSectionFlag = value; + this.displaySection(); + }; + // remember it can't have more parameters because it is used on settings automatically public showProgressBar = (value: boolean): void => { - this.progressBar = value; - this.htmlContainer.style.display = this.progressBar ? 'block' : 'none'; + this.showProgressBarFlag = value; + this.displaySection(); + }; + + private displaySection = (): void => { + this.htmlContainer.style.display = (this.showSectionFlag && this.showProgressBarFlag) ? 'block' : 'none'; }; } diff --git a/web/progressBarUIBase.d.ts b/web/progressBarUIBase.d.ts index e71591b..10d29c0 100644 --- a/web/progressBarUIBase.d.ts +++ b/web/progressBarUIBase.d.ts @@ -11,11 +11,10 @@ export declare enum NewMenuOptions { export declare abstract class ProgressBarUIBase { parentId: string; rootId: string; - showSection: boolean; htmlRoot: HTMLElement | null; htmlContainer: HTMLDivElement; protected htmlClassMonitor: string; - protected constructor(parentId: string, rootId: string, showSection: boolean); + protected constructor(parentId: string, rootId: string); private createRoot; abstract createDOM(): void; } diff --git a/web/progressBarUIBase.js b/web/progressBarUIBase.js index e74e3b6..d0ba68d 100644 --- a/web/progressBarUIBase.js +++ b/web/progressBarUIBase.js @@ -11,7 +11,7 @@ export var NewMenuOptions; NewMenuOptions["Bottom"] = "Bottom"; })(NewMenuOptions || (NewMenuOptions = {})); export class ProgressBarUIBase { - constructor(parentId, rootId, showSection) { + constructor(parentId, rootId) { Object.defineProperty(this, "parentId", { enumerable: true, configurable: true, @@ -24,12 +24,6 @@ export class ProgressBarUIBase { writable: true, value: rootId }); - Object.defineProperty(this, "showSection", { - enumerable: true, - configurable: true, - writable: true, - value: showSection - }); Object.defineProperty(this, "htmlRoot", { enumerable: true, configurable: true, @@ -71,24 +65,6 @@ export class ProgressBarUIBase { this.htmlRoot.append(this.htmlContainer); } }); - Object.defineProperty(this, "showFullSection", { - enumerable: true, - configurable: true, - writable: true, - value: (value) => { - this.showSection = value; - this.htmlContainer.style.display = this.showSection ? 'flex' : 'none'; - } - }); - Object.defineProperty(this, "showFullSectionOnDemand", { - enumerable: true, - configurable: true, - writable: true, - value: (value) => { - this.htmlContainer.style.display = value ? 'flex' : 'none'; - } - }); this.createRoot(); - this.showFullSection(this.showSection); } } diff --git a/web/progressBarUIBase.ts b/web/progressBarUIBase.ts index b1ff7c1..4ac4621 100644 --- a/web/progressBarUIBase.ts +++ b/web/progressBarUIBase.ts @@ -18,10 +18,8 @@ export abstract class ProgressBarUIBase { protected constructor( public parentId: string, public rootId: string, - public showSection: boolean, ) { this.createRoot(); - // this.showFullSection(this.showSection); } private createRoot = (): void => { @@ -39,19 +37,13 @@ export abstract class ProgressBarUIBase { console.error('Crystools: parentElement not found', this.parentId); } } - // TODO remove this - this.showSection = true; + this.htmlContainer = document.createElement('div'); this.htmlContainer.classList.add(this.htmlClassMonitor); this.htmlContainer.setAttribute('id', this.constructor.name); this.htmlRoot.append(this.htmlContainer); }; - // public showFullSection(value: boolean): void { - // this.showSection = value; - // this.htmlContainer.style.display = value ? 'flex' : 'none'; - // } - abstract createDOM(): void; // abstract updateDisplay(currentStatus: EStatus, timeStart: number, currentProgress: number): void;