visual fixes

crystian · Sep 24, 2024 · 348c05d · 348c05d
1 parent 3f71a4c
commit 348c05d
Show file tree

Hide file tree

Showing 13 changed files with 86 additions and 114 deletions.
diff --git 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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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;
 }