Merge branch 'main' into dev

2025-02-02 14:33:53 +01:00
parent d47f670ed9 03a61d6903
commit 95fe446c55
9 changed files with 290 additions and 152 deletions
@@ -2,7 +2,7 @@
@author: Crystian
@title: Crystools
@nickname: Crystools
-@version: 1.20.0
+@version: 1.21.0
@project: "https://github.com/crystian/ComfyUI-Crystools",
@description: Plugins for multiples uses, mainly for debugging, you need them! IG: https://www.instagram.com/crystian.ia
 """
@@ -1 +1 @@
-version = "1.20.0"
+version = "1.21.0"
@@ -1,7 +1,7 @@
 [project]
 name = "comfyui-crystools"
 description = "With this suit, you can see the resources monitor, progress bar & time elapsed, metadata and compare between two images, compare between two JSONs, show any value to console/display, pipes, and more!\nThis provides better nodes to load/save images, previews, etc, and see \"hidden\" data without loading a new workflow."
-version = "1.20.0"
+version = "1.21.0"
 license = { file = "LICENSE" }
 dependencies = ["deepdiff", "torch", "numpy", "Pillow", "pynvml", "py-cpuinfo"]

@@ -1 +1 @@
-1.20.0
+1.21.0
@@ -1,5 +1,5 @@
 /* Vertical UI */
-.comfy-menu {
+.comfy-menu, .side-bar-panel {
  #crystools-monitors-root {
    /*background-color: red;*/
    box-shadow: 3px 3px 10px rgba(0, 0, 0, 0.3);
@@ -91,6 +91,15 @@
  }
 }

+/* side-bar-panel */
+.side-bar-panel {
+  #crystools-monitors-root {
+    width: 230px;
+    margin-left: auto;
+    margin-right: auto;
+  }
+}
+
 .comfyui-queue-button {
  /*width: unset !important;*/
 }
@@ -4,6 +4,12 @@ import { MonitorUI } from './monitorUI.js';
 import { Colors } from './styles.js';
 import { convertNumberToPascalCase } from './utils.js';
 import { ComfyKeyMenuDisplayOption, MenuDisplayOptions } from './progressBarUIBase.js';
+var MonitorPoistion;
+(function (MonitorPoistion) {
+    MonitorPoistion["Top"] = "Top";
+    MonitorPoistion["Sidebar"] = "Sidebar";
+    MonitorPoistion["Floating"] = "Floating";
+})(MonitorPoistion || (MonitorPoistion = {}));
 class CrystoolsMonitor {
    constructor() {
        Object.defineProperty(this, "idExtensionName", {
@@ -30,6 +36,12 @@ class CrystoolsMonitor {
            writable: true,
            value: null
        });
+        Object.defineProperty(this, "settingsMonitorPosition", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: void 0
+        });
        Object.defineProperty(this, "settingsRate", {
            enumerable: true,
            configurable: true,
@@ -96,6 +108,18 @@ class CrystoolsMonitor {
            writable: true,
            value: void 0
        });
+        Object.defineProperty(this, "monitorPositionId", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: 'Crystools.MonitorPosition'
+        });
+        Object.defineProperty(this, "monitorPosition", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: MonitorPoistion.Top
+        });
        Object.defineProperty(this, "monitorWidthId", {
            enumerable: true,
            configurable: true,
@@ -120,6 +144,44 @@ class CrystoolsMonitor {
            writable: true,
            value: 30
        });
+        Object.defineProperty(this, "createSettingsMonitorPosition", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: () => {
+                this.settingsMonitorPosition = {
+                    id: this.monitorPositionId,
+                    name: 'Position (floating not implemented yet)',
+                    category: ['Crystools', this.menuPrefix + ' Configuration', 'position'],
+                    tooltip: 'Only for new UI',
+                    experimental: true,
+                    data: [],
+                    type: 'combo',
+                    options: (value) => {
+                        const position = app.ui.settings.getSettingValue(this.monitorPositionId, this.monitorPosition);
+                        return [{
+                                value: MonitorPoistion.Top,
+                                text: MonitorPoistion.Top,
+                                selected: value === position,
+                            }, {
+                                value: MonitorPoistion.Sidebar,
+                                text: MonitorPoistion.Sidebar,
+                                selected: value === position,
+                            }, {
+                                value: MonitorPoistion.Floating,
+                                text: MonitorPoistion.Floating,
+                                selected: value === position,
+                            }];
+                    },
+                    defaultValue: this.monitorPosition,
+                    onChange: (_value) => {
+                        if (this.monitorUI) {
+                            this.moveMonitor(this.menuDisplayOption);
+                        }
+                    },
+                };
+            }
+        });
        Object.defineProperty(this, "createSettingsRate", {
            enumerable: true,
            configurable: true,
@@ -183,6 +245,76 @@ class CrystoolsMonitor {
                };
            }
        });
+        Object.defineProperty(this, "createSettingsMonitorWidth", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: () => {
+                this.settingsMonitorWidth = {
+                    id: this.monitorWidthId,
+                    name: 'Pixel Width',
+                    category: ['Crystools', this.menuPrefix + ' Configuration', 'width'],
+                    tooltip: 'The width of the monitor in pixels on the UI (only on top/bottom UI)',
+                    type: 'slider',
+                    attrs: {
+                        min: 60,
+                        max: 100,
+                        step: 1,
+                    },
+                    defaultValue: this.monitorWidth,
+                    onChange: (value) => {
+                        let valueNumber;
+                        try {
+                            valueNumber = parseInt(value);
+                            if (isNaN(valueNumber)) {
+                                throw new Error('invalid value');
+                            }
+                        }
+                        catch (error) {
+                            console.error(error);
+                            return;
+                        }
+                        const h = app.ui.settings.getSettingValue(this.monitorHeightId, this.monitorHeight);
+                        this.monitorUI?.updateMonitorSize(valueNumber, h);
+                    },
+                };
+            }
+        });
+        Object.defineProperty(this, "createSettingsMonitorHeight", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: () => {
+                this.settingsMonitorHeight = {
+                    id: this.monitorHeightId,
+                    name: 'Pixel Height',
+                    category: ['Crystools', this.menuPrefix + ' Configuration', 'height'],
+                    tooltip: 'The height of the monitor in pixels on the UI (only on top/bottom UI)',
+                    type: 'slider',
+                    attrs: {
+                        min: 16,
+                        max: 50,
+                        step: 1,
+                    },
+                    defaultValue: this.monitorHeight,
+                    onChange: async (value) => {
+                        let valueNumber;
+                        try {
+                            valueNumber = parseInt(value);
+                            if (isNaN(valueNumber)) {
+                                throw new Error('invalid value');
+                            }
+                        }
+                        catch (error) {
+                            console.error(error);
+                            return;
+                        }
+                        const w = await app.ui.settings.getSettingValue(this.monitorWidthId, this.monitorWidth);
+                        this.monitorUI?.updateMonitorSize(w, valueNumber);
+                    },
+                };
+            }
+        });
        Object.defineProperty(this, "createSettingsCPU", {
            enumerable: true,
            configurable: true,
@@ -377,76 +509,6 @@ class CrystoolsMonitor {
                };
            }
        });
-        Object.defineProperty(this, "createSettingsMonitorWidth", {
-            enumerable: true,
-            configurable: true,
-            writable: true,
-            value: () => {
-                this.settingsMonitorWidth = {
-                    id: this.monitorWidthId,
-                    name: 'Pixel Width',
-                    category: ['Crystools', this.menuPrefix + ' Configuration', 'width'],
-                    tooltip: 'The width of the monitor in pixels on the UI (only on floating UI)',
-                    type: 'slider',
-                    attrs: {
-                        min: 60,
-                        max: 100,
-                        step: 1,
-                    },
-                    defaultValue: this.monitorWidth,
-                    onChange: (value) => {
-                        let valueNumber;
-                        try {
-                            valueNumber = parseInt(value);
-                            if (isNaN(valueNumber)) {
-                                throw new Error('invalid value');
-                            }
-                        }
-                        catch (error) {
-                            console.error(error);
-                            return;
-                        }
-                        const h = app.ui.settings.getSettingValue(this.monitorHeightId, this.monitorHeight);
-                        this.monitorUI?.updateMonitorSize(valueNumber, h);
-                    },
-                };
-            }
-        });
-        Object.defineProperty(this, "createSettingsMonitorHeight", {
-            enumerable: true,
-            configurable: true,
-            writable: true,
-            value: () => {
-                this.settingsMonitorHeight = {
-                    id: this.monitorHeightId,
-                    name: 'Pixel Height',
-                    category: ['Crystools', this.menuPrefix + ' Configuration', 'height'],
-                    tooltip: 'The height of the monitor in pixels on the UI (only on floating UI)',
-                    type: 'slider',
-                    attrs: {
-                        min: 16,
-                        max: 50,
-                        step: 1,
-                    },
-                    defaultValue: this.monitorHeight,
-                    onChange: async (value) => {
-                        let valueNumber;
-                        try {
-                            valueNumber = parseInt(value);
-                            if (isNaN(valueNumber)) {
-                                throw new Error('invalid value');
-                            }
-                        }
-                        catch (error) {
-                            console.error(error);
-                            return;
-                        }
-                        const w = await app.ui.settings.getSettingValue(this.monitorWidthId, this.monitorWidth);
-                        this.monitorUI?.updateMonitorSize(w, valueNumber);
-                    },
-                };
-            }
-        });
        Object.defineProperty(this, "createSettings", {
            enumerable: true,
            configurable: true,
@@ -455,6 +517,7 @@ class CrystoolsMonitor {
                app.ui.settings.addSetting(this.settingsRate);
                app.ui.settings.addSetting(this.settingsMonitorHeight);
                app.ui.settings.addSetting(this.settingsMonitorWidth);
+                app.ui.settings.addSetting(this.settingsMonitorPosition);
                app.ui.settings.addSetting(this.monitorRAMElement);
                app.ui.settings.addSetting(this.monitorCPUElement);
                void this.getHDDsFromServer().then((data) => {
@@ -504,9 +567,9 @@ class CrystoolsMonitor {
            enumerable: true,
            configurable: true,
            writable: true,
-            value: (position) => {
+            value: (menuPosition) => {
                let parentElement;
-                switch (position) {
+                switch (menuPosition) {
                    case MenuDisplayOptions.Disabled:
                        parentElement = document.getElementById('queue-button');
                        if (parentElement && this.monitorUI.rootElement) {
@@ -518,7 +581,20 @@ class CrystoolsMonitor {
                        break;
                    case MenuDisplayOptions.Top:
                    case MenuDisplayOptions.Bottom:
-                        app.menu?.settingsGroup.element.before(this.crystoolsButtonGroup.element);
+                        const position = app.ui.settings.getSettingValue(this.monitorPositionId, this.monitorPosition);
+                        if (position === MonitorPoistion.Top) {
+                            app.menu?.settingsGroup.element.before(this.crystoolsButtonGroup.element);
+                        }
+                        else {
+                            parentElement = document.getElementsByClassName('side-bar-panel')[0];
+                            if (parentElement) {
+                                parentElement.insertBefore(this.crystoolsButtonGroup.element, parentElement.firstChild);
+                            }
+                            else {
+                                console.error('Crystools: parentElement to move monitors not found! back to top');
+                                app.ui.settings.setSettingValue(this.monitorPositionId, MonitorPoistion.Top);
+                            }
+                        }
                }
            }
        });
@@ -623,6 +699,7 @@ class CrystoolsMonitor {
                if (this.monitorUI) {
                    return;
                }
+                this.createSettingsMonitorPosition();
                this.createSettingsRate();
                this.createSettingsMonitorHeight();
                this.createSettingsMonitorWidth();
@@ -5,12 +5,19 @@ import { Colors } from './styles.js';
 import { convertNumberToPascalCase } from './utils.js';
 import { ComfyKeyMenuDisplayOption, MenuDisplayOptions } from './progressBarUIBase.js';

+enum MonitorPoistion {
+  'Top' = 'Top',
+  'Sidebar' = 'Sidebar',
+  'Floating' = 'Floating',
+}
+
 class CrystoolsMonitor {
  readonly idExtensionName = 'Crystools.monitor';
  private readonly menuPrefix = commonPrefix;
  private menuDisplayOption: MenuDisplayOptions = MenuDisplayOptions.Disabled;
  private crystoolsButtonGroup: ComfyButtonGroup = null;

+  private settingsMonitorPosition: TMonitorSettings;
  private settingsRate: TMonitorSettings;
  private settingsMonitorHeight: TMonitorSettings;
  private settingsMonitorWidth: TMonitorSettings;
@@ -24,11 +31,48 @@ class CrystoolsMonitor {

  private monitorUI: MonitorUI;

+  private readonly monitorPositionId = 'Crystools.MonitorPosition';
+  private readonly monitorPosition: MonitorPoistion = MonitorPoistion.Top;
  private readonly monitorWidthId = 'Crystools.MonitorWidth';
  private readonly monitorWidth = 60;
  private readonly monitorHeightId = 'Crystools.MonitorHeight';
  private readonly monitorHeight = 30;

+  createSettingsMonitorPosition = (): void => {
+    this.settingsMonitorPosition = {
+      id: this.monitorPositionId,
+      name: 'Position (floating not implemented yet)',
+      category: ['Crystools', this.menuPrefix + ' Configuration', 'position'],
+      tooltip: 'Only for new UI',
+      experimental: true,
+      data: [],
+      type: 'combo',
+      options: (value: string): any => {
+        const position = app.ui.settings.getSettingValue(this.monitorPositionId, this.monitorPosition);
+        return [{
+          value: MonitorPoistion.Top,
+          text: MonitorPoistion.Top,
+          selected: value === position,
+        }, {
+          value: MonitorPoistion.Sidebar,
+          text: MonitorPoistion.Sidebar,
+          selected: value === position,
+        }, {
+          value: MonitorPoistion.Floating,
+          text: MonitorPoistion.Floating,
+          selected: value === position,
+        }];
+      },
+      defaultValue: this.monitorPosition,
+      // @ts-ignore
+      onChange: (_value: string): void => {
+        if (this.monitorUI) {
+          this.moveMonitor(this.menuDisplayOption);
+        }
+      },
+    };
+  };
+
  createSettingsRate = (): void => {
    this.settingsRate = {
      id: 'Crystools.RefreshRate',
@@ -92,6 +136,72 @@ class CrystoolsMonitor {
    };
  };

+  createSettingsMonitorWidth = (): void => {
+    this.settingsMonitorWidth = {
+      id: this.monitorWidthId,
+      name: 'Pixel Width',
+      category: ['Crystools', this.menuPrefix + ' Configuration', 'width'],
+      tooltip: 'The width of the monitor in pixels on the UI (only on top/bottom UI)',
+      type: 'slider',
+      attrs: {
+        min: 60,
+        max: 100,
+        step: 1,
+      },
+      defaultValue: this.monitorWidth,
+      // @ts-ignore
+      onChange: (value: string): void => {
+        let valueNumber: number;
+
+        try {
+          valueNumber = parseInt(value);
+          if (isNaN(valueNumber)) {
+            throw new Error('invalid value');
+          }
+        } catch (error) {
+          console.error(error);
+          return;
+        }
+
+        const h = app.ui.settings.getSettingValue(this.monitorHeightId, this.monitorHeight);
+        this.monitorUI?.updateMonitorSize(valueNumber, h);
+      },
+    };
+  };
+
+  createSettingsMonitorHeight = (): void => {
+    this.settingsMonitorHeight = {
+      id: this.monitorHeightId,
+      name: 'Pixel Height',
+      category: ['Crystools', this.menuPrefix + ' Configuration', 'height'],
+      tooltip: 'The height of the monitor in pixels on the UI (only on top/bottom UI)',
+      type: 'slider',
+      attrs: {
+        min: 16,
+        max: 50,
+        step: 1,
+      },
+      defaultValue: this.monitorHeight,
+      // @ts-ignore
+      onChange: async(value: string): void => {
+        let valueNumber: number;
+
+        try {
+          valueNumber = parseInt(value);
+          if (isNaN(valueNumber)) {
+            throw new Error('invalid value');
+          }
+        } catch (error) {
+          console.error(error);
+          return;
+        }
+
+        const w = await app.ui.settings.getSettingValue(this.monitorWidthId, this.monitorWidth);
+        this.monitorUI?.updateMonitorSize(w, valueNumber);
+      },
+    };
+  };
+
  createSettingsCPU = (): void => {
    // CPU Variables
    this.monitorCPUElement = {
@@ -286,76 +396,11 @@ class CrystoolsMonitor {
    };
  };

-  createSettingsMonitorWidth = (): void => {
-    this.settingsMonitorWidth = {
-      id: this.monitorWidthId,
-      name: 'Pixel Width',
-      category: ['Crystools', this.menuPrefix + ' Configuration', 'width'],
-      tooltip: 'The width of the monitor in pixels on the UI (only on floating UI)',
-      type: 'slider',
-      attrs: {
-        min: 60,
-        max: 100,
-        step: 1,
-      },
-      defaultValue: this.monitorWidth,
-      // @ts-ignore
-      onChange: (value: string): void => {
-        let valueNumber: number;
-
-        try {
-          valueNumber = parseInt(value);
-          if (isNaN(valueNumber)) {
-            throw new Error('invalid value');
-          }
-        } catch (error) {
-          console.error(error);
-          return;
-        }
-
-        const h = app.ui.settings.getSettingValue(this.monitorHeightId, this.monitorHeight);
-        this.monitorUI?.updateMonitorSize(valueNumber, h);
-      },
-    };
-  };
-
-  createSettingsMonitorHeight = (): void => {
-    this.settingsMonitorHeight = {
-      id: this.monitorHeightId,
-      name: 'Pixel Height',
-      category: ['Crystools', this.menuPrefix + ' Configuration', 'height'],
-      tooltip: 'The height of the monitor in pixels on the UI (only on floating UI)',
-      type: 'slider',
-      attrs: {
-        min: 16,
-        max: 50,
-        step: 1,
-      },
-      defaultValue: this.monitorHeight,
-      // @ts-ignore
-      onChange: async(value: string): void => {
-        let valueNumber: number;
-
-        try {
-          valueNumber = parseInt(value);
-          if (isNaN(valueNumber)) {
-            throw new Error('invalid value');
-          }
-        } catch (error) {
-          console.error(error);
-          return;
-        }
-
-        const w = await app.ui.settings.getSettingValue(this.monitorWidthId, this.monitorWidth);
-        this.monitorUI?.updateMonitorSize(w, valueNumber);
-      },
-    };
-  };
-
  createSettings = (): void => {
    app.ui.settings.addSetting(this.settingsRate);
    app.ui.settings.addSetting(this.settingsMonitorHeight);
    app.ui.settings.addSetting(this.settingsMonitorWidth);
+    app.ui.settings.addSetting(this.settingsMonitorPosition);
    app.ui.settings.addSetting(this.monitorRAMElement);
    app.ui.settings.addSetting(this.monitorCPUElement);

@@ -398,10 +443,10 @@ class CrystoolsMonitor {
    }
  };

-  moveMonitor = (position: MenuDisplayOptions): void => {
+  moveMonitor = (menuPosition: MenuDisplayOptions): void => {
    let parentElement: Element | null | undefined;

-    switch (position) {
+    switch (menuPosition) {
      case MenuDisplayOptions.Disabled:
        parentElement = document.getElementById('queue-button');
        if (parentElement && this.monitorUI.rootElement) {
@@ -413,9 +458,19 @@ class CrystoolsMonitor {

      case MenuDisplayOptions.Top:
      case MenuDisplayOptions.Bottom:
-        app.menu?.settingsGroup.element.before(this.crystoolsButtonGroup.element);
+        const position = app.ui.settings.getSettingValue(this.monitorPositionId, this.monitorPosition);
+        if(position === MonitorPoistion.Top) {
+          app.menu?.settingsGroup.element.before(this.crystoolsButtonGroup.element);
+        } else {
+          parentElement = document.getElementsByClassName('side-bar-panel')[0];
+          if(parentElement){
+            parentElement.insertBefore(this.crystoolsButtonGroup.element, parentElement.firstChild);
+          } else {
+            console.error('Crystools: parentElement to move monitors not found! back to top');
+            app.ui.settings.setSettingValue(this.monitorPositionId, MonitorPoistion.Top);
+          }
+        }
    }
-
  };

  updateAllWidget = (): void => {
@@ -493,6 +548,7 @@ class CrystoolsMonitor {
      return;
    }

+    this.createSettingsMonitorPosition();
    this.createSettingsRate();
    this.createSettingsMonitorHeight();
    this.createSettingsMonitorWidth();
@@ -90,7 +90,6 @@ class CrystoolsProgressBar {
                    this.progressBarUI.showSection(this.menuDisplayOption === MenuDisplayOptions.Disabled);
                }
                if (this.menuDisplayOption === MenuDisplayOptions.Disabled && this.progressBarUI.showProgressBarFlag) {
-                    console.log('updateDisplay progress bar');
                    this.progressBarUI.updateDisplay(this.currentStatus, this.timeStart, this.currentProgress);
                }
            }
@@ -107,7 +106,6 @@ class CrystoolsProgressBar {
                }
                this.menuDisplayOption = app.ui.settings.getSettingValue(ComfyKeyMenuDisplayOption, MenuDisplayOptions.Disabled);
                app.ui.settings.addEventListener(`${ComfyKeyMenuDisplayOption}.change`, (e) => {
-                    console.log('Comfy.UseNewMenu.change desde progress bar', e.detail.value);
                    this.updateDisplay(e.detail.value);
                });
                const progressBarElement = document.createElement('div');
@@ -36,7 +36,6 @@ class CrystoolsProgressBar {
      this.progressBarUI.showSection(this.menuDisplayOption === MenuDisplayOptions.Disabled);
    }
    if (this.menuDisplayOption === MenuDisplayOptions.Disabled && this.progressBarUI.showProgressBarFlag) {
-      console.log('updateDisplay progress bar');
      this.progressBarUI.updateDisplay(this.currentStatus, this.timeStart, this.currentProgress);
    }
  };
@@ -51,7 +50,6 @@ class CrystoolsProgressBar {

    this.menuDisplayOption = app.ui.settings.getSettingValue(ComfyKeyMenuDisplayOption, MenuDisplayOptions.Disabled);
    app.ui.settings.addEventListener(`${ComfyKeyMenuDisplayOption}.change`, (e: any) => {
-        console.log('Comfy.UseNewMenu.change desde progress bar', e.detail.value);
        this.updateDisplay(e.detail.value);
      },
    );
@@ -1 +1 @@
 .20.0
 .21.0