Merge branch 'main' of https://github.com/hayden-fr/ComfyUI-Model-Manager

2024-09-23 14:55:57 -04:00
parent 91e5c882fc 67fcfa015b
commit cb99f3fb62
3 changed files with 124 additions and 70 deletions
--- a/init.py
+++ b/init.py
@@ -205,6 +205,7 @@ def ui_rules():
        Rule("sidebar-control-always-compact", False, bool),
        Rule("sidebar-default-width", 0.5, float, 0.0, 1.0),
        Rule("sidebar-default-height", 0.5, float, 0.0, 1.0),
+        Rule("sidebar-default-state", "None", str),
        Rule("text-input-always-hide-search-button", False, bool),
        Rule("text-input-always-hide-clear-button", False, bool),
        
--- a/web/model-manager.css
+++ b/web/model-manager.css
@@ -10,7 +10,7 @@
    position: fixed;
    overflow: hidden;
    width: 100%;
-    z-index: 2000; /*needs to be below the dialog modal element*/
+    z-index: 1100; /*needs to be below the dialog modal element*/
    
    /*override comfy-modal settings*/
    border-radius: 0;
@@ -91,6 +91,7 @@
    overflow: hidden;
    color: var(--input-text);
    display: flex;
+    gap: 2px;
    flex-direction: row-reverse;
    flex-wrap: wrap;
 }
@@ -152,7 +153,7 @@
    width: 100%;
 }

-.model-manager button {
+.model-manager button, .model-manager .model-manager-head .topbar-right select {
    margin: 0;
 	border: 2px solid var(--border-color);
 }
@@ -172,6 +173,11 @@
    cursor: not-allowed;
 }

+.model-manager select:hover{
+    filter: brightness(1.2);
+    cursor: pointer;
+}
+
 .model-manager button.block {
    width: 100%;
 }
@@ -256,7 +262,7 @@
 .model-manager .model-tab-group {
    display: flex;
    gap: 4px;
-    height: 40px;
+    height: 44px;
 }

 .model-manager .model-tab-group .tab-button {
@@ -272,6 +278,7 @@

 .model-manager .model-tab-group .tab-button.active {
    background-color: var(--bg-color);
+    margin-bottom: -2px;
    cursor: default;
    position: relative;
    z-index: 1;
@@ -462,7 +469,7 @@
 }

 .model-manager .comfy-grid .model-label {
-	background-color: rgb(from var(--content-hover-bg) r g b / 0.5);
+	background-color: rgb(from var(--content-hover-bg) r g b / 0.6);
 	width: 100%;
 	height: 2.2rem;
 	position: absolute;
@@ -600,7 +607,8 @@
    position: relative;
    top: 0;
    bottom: 0;
-    font-size: 24px;
+    font-size: 20px;
+    text-align-last: center;
    -o-appearance: none;
    -ms-appearance: none;
    -webkit-appearance: none;
@@ -701,7 +709,7 @@

 .model-manager .model-manager-settings input[type="number"],
 .model-manager .tag-generator-settings input[type="number"]{
-    width: 50px;
+    width: 60px;
 }

 .model-manager .search-settings-text {
--- a/web/model-manager.js
+++ b/web/model-manager.js
@@ -97,35 +97,8 @@ class KeyComboListener {
  }
 }

-/**
- * Handles Firefox's drag event, which returns different coordinates and then fails when calling `elementFromPoint`.
- * @param {DragEvent} event
- * @returns {[Number, Number, HTMLElement]} [clientX, clientY, targetElement]
- */
-function elementFromDragEvent(event) {
-  let clientX = null;
-  let clientY = null;
-  let target;
-  const userAgentString = navigator.userAgent;
-  if (userAgentString.indexOf('Firefox') > -1) {
-    clientX = event.clientX;
-    clientY = event.clientY;
-    const screenOffsetX = window.screenLeft;
-    if (clientX >= screenOffsetX) {
-      clientX = clientX - screenOffsetX;
-    }
-    const screenOffsetY = window.screenTop;
-    if (clientY >= screenOffsetY) {
-      clientY = clientY - screenOffsetY;
-    }
-    target = document.elementFromPoint(clientX, clientY);
-  } else {
-    clientX = event.clientX;
-    clientY = event.clientY;
-    target = document.elementFromPoint(event.clientX, event.clientY);
-  }
-  return [clientX, clientY, target];
-}
+// This is used in Firefox to bypass the ‘dragend’ event because it returns incorrect ‘clientX’ and ‘clientY’
+const IS_FIREFOX = navigator.userAgent.indexOf('Firefox') > -1;

 /**
 * @param {string} url
@@ -1970,20 +1943,16 @@ class ModelGrid {
   * @param {boolean} removeEmbeddingExtension
   * @param {boolean} strictlyOnWidget
   */
-  static #dragAddModel(
+  static dragAddModel(
    event,
    modelType,
    path,
    removeEmbeddingExtension,
    strictlyOnWidget,
  ) {
-    const [clientX, clientY, target] = elementFromDragEvent(event);
+    const target = document.elementFromPoint(event.clientX, event.clientY);
    if (modelType !== 'embeddings' && target.id === 'graph-canvas') {
-      //const pos = app.canvas.convertEventToCanvasOffset(event);
-      const pos = app.canvas.convertEventToCanvasOffset({
-        clientX: clientX,
-        clientY: clientY,
-      });
+      const pos = app.canvas.convertEventToCanvasOffset(event);

      const node = app.graph.getNodeOnPos(
        pos[0],
@@ -2152,6 +2121,47 @@ class ModelGrid {
    const previewThumbnailFormat =
      settingsElements['model-preview-thumbnail-type'].value;
    if (models.length > 0) {
+
+      const $overlay = IS_FIREFOX
+        ? ((
+          modelType,
+          path,
+          removeEmbeddingExtension,
+          strictDragToAdd,
+        ) => {
+          return $el('div.model-preview-overlay', {
+            ondragstart: (e) =>{
+              const data = {
+                modelType: modelType,
+                path: path,
+                removeEmbeddingExtension: removeEmbeddingExtension,
+                strictDragToAdd: strictDragToAdd,
+              };
+              e.dataTransfer.setData('manager-model', JSON.stringify(data));
+              e.dataTransfer.setData('text/plain', '');
+            },
+            draggable: true,
+          });
+        })
+        : ((
+          modelType,
+          path,
+          removeEmbeddingExtension,
+          strictDragToAdd,
+        ) => {
+          return $el('div.model-preview-overlay', {
+            ondragend: (e) =>
+              ModelGrid.dragAddModel(
+                e,
+                modelType,
+                path,
+                removeEmbeddingExtension,
+                strictDragToAdd,
+              ),
+            draggable: true,
+          });
+        });
+
      return models.map((item) => {
        const previewInfo = item.preview;
        const previewThumbnail = $el('img.model-preview', {
@@ -2262,20 +2272,14 @@ class ModelGrid {
          },
          }).element,
        ];
-        const dragAdd = (e) =>
-          ModelGrid.#dragAddModel(
-            e,
+        return $el('div.item', {}, [
+          previewThumbnail,
+          $overlay(
            modelType,
            path,
            removeEmbeddingExtension,
            strictDragToAdd,
-          );
-        return $el('div.item', {}, [
-          previewThumbnail,
-          $el('div.model-preview-overlay', {
-            ondragend: (e) => dragAdd(e),
-            draggable: true,
-          }),
+          ),
          $el(
            'div.model-preview-top-right',
            {
@@ -4644,6 +4648,9 @@ class SettingsView {
  /** @return {() => Promise<void>} */
  #updateModels = async () => {};

+  /** @return {() => void} */
+  #updateSidebarSettings = () => {};
+
  /**
   * @param {Object} settingsData
   * @param {boolean} updateModels
@@ -4677,6 +4684,8 @@ class SettingsView {
      }
    }

+    this.#updateSidebarSettings(settings);
+
    if (updateModels) {
      await this.#updateModels(); // Is this slow?
    }
@@ -4741,9 +4750,11 @@ class SettingsView {
  /**
   * @param {() => Promise<void>} updateModels
   * @param {() => void} updateSidebarButtons
+   * @param {(settings: Object) => void} updateSidebarSettings
   */
-  constructor(updateModels, updateSidebarButtons) {
+  constructor(updateModels, updateSidebarButtons, updateSidebarSettings) {
    this.#updateModels = updateModels;
+    this.#updateSidebarSettings = updateSidebarSettings;
    const settings = this.elements.settings;

    const sidebarControl = $checkbox({
@@ -4851,6 +4862,7 @@ class SettingsView {
          {
            style: { color: 'var(--fg-color)' },
            href: 'https://github.com/hayden-fr/ComfyUI-Model-Manager/issues/',
+            target: '_blank',
          },
          ['File bugs and issues here.'],
        ),
@@ -4886,6 +4898,11 @@ class SettingsView {
            'vae_approx',
          ],
        }),
+        $select({
+          $: (el) => (settings['sidebar-default-state'] = el),
+          textContent: 'Default model manager position (on start up)',
+          options: ['Left', 'Right', 'Top', 'Bottom', 'None'],
+        }),	  
        $checkbox({
          $: (el) => (settings['model-real-time-search'] = el),
          textContent: 'Real-time search',
@@ -5119,6 +5136,7 @@ function GenerateSidebarToggleRadioAndSelect(labels, activationCallbacks = []) {
    'select',
    {
      name: 'sidebar-select',
+      classList: 'icon-button',
      onchange: (event) => {
        const select = event.target;
        const children = select.children;
@@ -5197,9 +5215,7 @@ function GenerateSidebarToggleRadioAndSelect(labels, activationCallbacks = []) {
    );
  }
  radioButtonGroup.append.apply(radioButtonGroup, buttons);
-  buttons[0].click();
  buttons[0].style.display = 'none';
-
  return [radioButtonGroup, select];
 }

@@ -5256,6 +5272,7 @@ class ModelManager extends ComfyDialog {

    this.#settingsView = new SettingsView(this.#refreshModels, () =>
      this.#updateSidebarButtons(),
+      this.#updateSidebarSettings,
    );

    this.#modelInfo = new ModelInfo(
@@ -5306,11 +5323,7 @@ class ModelManager extends ComfyDialog {
        ['◼', '◨', '⬒', '⬓', '◧'],
        [
          () => {
-            const element = this.element;
-            if (element) {
-              // callback on initialization as default state
-              element.dataset['sidebarState'] = 'none';
-            }
+            this.element.dataset['sidebarState'] = 'none';
          },
          () => {
            this.element.dataset['sidebarState'] = 'right';
@@ -5631,6 +5644,20 @@ class ModelManager extends ComfyDialog {
      updateDragSidebar(e, e.touches[0].clientX, e.touches[0].clientY),
    );

+    if(IS_FIREFOX){
+      app.canvasContainer.addEventListener('drop', (e) => {
+        if (e.dataTransfer.types.includes('manager-model')){
+          const data = JSON.parse(e.dataTransfer.getData('manager-model'));
+          ModelGrid.dragAddModel(
+            e,
+            data.modelType,
+            data.path,
+            data.removeEmbeddingExtension,
+            data.strictDragToAdd,
+          );
+        }
+      });
+    }
    this.#init();
  }

@@ -5641,16 +5668,19 @@ class ModelManager extends ComfyDialog {
    const settings = this.#settingsView.elements.settings;

    {
-      // initialize buttons' visibility state
-      const hideSearchButtons =
-        settings['text-input-always-hide-search-button'].checked;
-      const hideClearSearchButtons =
-        settings['text-input-always-hide-clear-button'].checked;
-      this.#downloadView.elements.searchButton.style.display = hideSearchButtons
-        ? 'none'
-        : '';
-      this.#downloadView.elements.clearSearchButton.style.display =
-        hideClearSearchButtons ? 'none' : '';
+      // set initial sidebar state
+      const newSidebarState = settings['sidebar-default-state'].value;
+      let buttonNumb = 0;
+      if (newSidebarState === 'Right') {
+        buttonNumb = 1;
+      } else if (newSidebarState === 'Top') {
+        buttonNumb = 2;
+      } else if (newSidebarState === 'Bottom') {
+        buttonNumb = 3;
+      } else if (newSidebarState === 'Left') {
+        buttonNumb = 4;
+      }
+      this.#sidebarButtonGroup.children[buttonNumb].click();
    }

    {
@@ -5695,6 +5725,21 @@ class ModelManager extends ComfyDialog {
    }
  }

+  #updateSidebarSettings = (settings) => {
+    {
+      // update buttons' visibility state
+      const hideSearchButtons =
+        settings['text-input-always-hide-search-button'].checked;
+      const hideClearSearchButtons =
+        settings['text-input-always-hide-clear-button'].checked;
+      this.#downloadView.elements.searchButton.style.display = hideSearchButtons
+        ? 'none'
+        : '';
+      this.#downloadView.elements.clearSearchButton.style.display =
+        hideClearSearchButtons ? 'none' : '';
+    }
+  }
+
  #resetManagerContentsScroll = () => {
    this.#tabManagerContents.scrollTop = 0;
  };