From ab5532c8e6d42046d4294c4f594466d1dd341e6c Mon Sep 17 00:00:00 2001
From: EtSL33py <dimone48@mail.ru>
Date: Thu, 19 Sep 2024 11:47:34 +0300
Subject: [PATCH 01/10] upd

---
 __init__.py           |  1 +
 web/model-manager.css | 20 ++++++++++++++------
 web/model-manager.js  | 33 +++++++++++++++++++++++++--------
 3 files changed, 40 insertions(+), 14 deletions(-)

diff --git a/__init__.py b/__init__.py
index 6aadb9b..09af7e3 100644
--- a/__init__.py
+++ b/__init__.py
@@ -200,6 +200,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", "left", str),
         Rule("text-input-always-hide-search-button", False, bool),
         Rule("text-input-always-hide-clear-button", False, bool),
         
diff --git a/web/model-manager.css b/web/model-manager.css
index 305ced2..33fcd14 100644
--- a/web/model-manager.css
+++ b/web/model-manager.css
@@ -10,7 +10,7 @@
     position: fixed;
     overflow: hidden;
     width: 100%;
-    z-index: 2000;
+    z-index: 1100;
     
     /*override comfy-modal settings*/
     border-radius: 0;
@@ -87,6 +87,7 @@
     overflow: hidden;
     color: var(--input-text);
     display: flex;
+    gap: 2px;
     flex-direction: row-reverse;
     flex-wrap: wrap;
 }
@@ -148,7 +149,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);
 }
@@ -168,6 +169,11 @@
     cursor: not-allowed;
 }
 
+.model-manager select:hover{
+    filter: brightness(1.2);
+    cursor: pointer;
+}
+
 .model-manager button.block {
     width: 100%;
 }
@@ -248,7 +254,7 @@
 .model-manager .model-tab-group {
     display: flex;
     gap: 4px;
-    height: 40px;
+    height: 44px;
 }
 
 .model-manager .model-tab-group .tab-button {
@@ -264,6 +270,7 @@
 
 .model-manager .model-tab-group .tab-button.active {
     background-color: var(--bg-color);
+    margin-bottom: -2px;
     cursor: default;
     position: relative;
     z-index: 1;
@@ -451,7 +458,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;
@@ -589,7 +596,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;
@@ -690,7 +698,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 {
diff --git a/web/model-manager.js b/web/model-manager.js
index fd55c67..714613f 100644
--- a/web/model-manager.js
+++ b/web/model-manager.js
@@ -2095,10 +2095,7 @@ class ModelGrid {
           systemSeparator,
         );
         let actionButtons = [];
-        if (
-          showAddButton &&
-          !(modelType === 'embeddings' && !navigator.clipboard)
-        ) {
+        if (showCopyButton) {
           actionButtons.push(
             new ComfyButton({
               icon: 'content-copy',
@@ -2114,7 +2111,7 @@ class ModelGrid {
             }).element,
           );
         }
-        if (showCopyButton) {
+        if (showAddButton && !(modelType === 'embeddings' && !navigator.clipboard)) {
           actionButtons.push(
             new ComfyButton({
               icon: 'plus-box-outline',
@@ -4394,6 +4391,9 @@ class SettingsView {
   /** @return {() => Promise<void>} */
   #updateModels = () => {};
 
+  /** @return {() => void} */
+  #updateSidebarSettings = () => {};
+
   /**
    * @param {Object} settingsData
    * @param {boolean} updateModels
@@ -4427,6 +4427,8 @@ class SettingsView {
       }
     }
 
+    this.#updateSidebarSettings(settings);
+
     if (updateModels) {
       await this.#updateModels(); // Is this slow?
     }
@@ -4491,9 +4493,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({
@@ -4569,6 +4573,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.'],
         ),
@@ -4604,6 +4609,11 @@ class SettingsView {
             'vae_approx',
           ],
         }),
+        $select({
+          $: (el) => (settings['sidebar-default-state'] = el),
+          textContent: 'Default model manager position',
+          options: ['left', 'right', 'top', 'bottom', 'none'],
+        }),	  
         $checkbox({
           $: (el) => (settings['model-real-time-search'] = el),
           textContent: 'Real-time search',
@@ -4833,6 +4843,7 @@ function GenerateSidebarToggleRadioAndSelect(labels, activationCallbacks = []) {
     'select',
     {
       name: 'sidebar-select',
+      classList: 'icon-button',
       onchange: (event) => {
         const select = event.target;
         const children = select.children;
@@ -4970,6 +4981,7 @@ class ModelManager extends ComfyDialog {
 
     this.#settingsView = new SettingsView(this.#refreshModels, () =>
       this.#updateSidebarButtons(),
+      this.#updateSidebarSettings,
     );
 
     this.#modelInfo = new ModelInfo(
@@ -5350,9 +5362,13 @@ class ModelManager extends ComfyDialog {
   async #init() {
     await this.#settingsView.reload(false);
     await this.#refreshModels();
+  }
 
-    const settings = this.#settingsView.elements.settings;
-
+  /**
+   * @param {settings: Object}
+   * @return {void}
+   */
+  #updateSidebarSettings = (settings) => {
     {
       // initialize buttons' visibility state
       const hideSearchButtons =
@@ -5374,6 +5390,7 @@ class ModelManager extends ComfyDialog {
       const xDecimal = settings['sidebar-default-width'].value;
       const yDecimal = settings['sidebar-default-height'].value;
 
+      this.element.dataset['sidebarState'] = settings['sidebar-default-state'].value;
       this.element.dataset['sidebarLeftWidthDecimal'] = xDecimal;
       this.element.dataset['sidebarRightWidthDecimal'] = xDecimal;
       this.element.dataset['sidebarTopHeightDecimal'] = yDecimal;

From 844f286f24ed8e992f442ec1de55296aa2799002 Mon Sep 17 00:00:00 2001
From: EtSL33py <dimone48@mail.ru>
Date: Thu, 19 Sep 2024 15:04:50 +0300
Subject: [PATCH 02/10] buttons are updated when default position is changed

---
 __init__.py          |  2 +-
 web/model-manager.js | 31 ++++++++++++++++++-------------
 2 files changed, 19 insertions(+), 14 deletions(-)

diff --git a/__init__.py b/__init__.py
index 09af7e3..5258cd5 100644
--- a/__init__.py
+++ b/__init__.py
@@ -200,7 +200,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", "left", str),
+        Rule("sidebar-default-state", "Left", str),
         Rule("text-input-always-hide-search-button", False, bool),
         Rule("text-input-always-hide-clear-button", False, bool),
         
diff --git a/web/model-manager.js b/web/model-manager.js
index 714613f..c7caea4 100644
--- a/web/model-manager.js
+++ b/web/model-manager.js
@@ -4612,7 +4612,7 @@ class SettingsView {
         $select({
           $: (el) => (settings['sidebar-default-state'] = el),
           textContent: 'Default model manager position',
-          options: ['left', 'right', 'top', 'bottom', 'none'],
+          options: ['Left', 'Right', 'Top', 'Bottom', 'None'],
         }),	  
         $checkbox({
           $: (el) => (settings['model-real-time-search'] = el),
@@ -4922,9 +4922,7 @@ function GenerateSidebarToggleRadioAndSelect(labels, activationCallbacks = []) {
     );
   }
   radioButtonGroup.append.apply(radioButtonGroup, buttons);
-  buttons[0].click();
   buttons[0].style.display = 'none';
-
   return [radioButtonGroup, select];
 }
 
@@ -5031,11 +5029,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';
@@ -5364,11 +5358,23 @@ class ModelManager extends ComfyDialog {
     await this.#refreshModels();
   }
 
-  /**
-   * @param {settings: Object}
-   * @return {void}
-   */
   #updateSidebarSettings = (settings) => {
+	  
+    const newSidebarState = settings['sidebar-default-state'].value;
+    let buttonNumb = 0;
+    if (newSidebarState === 'Left') {
+      buttonNumb = 4;
+    } else if (newSidebarState === 'Right') {
+      buttonNumb = 1;
+    } else if (newSidebarState === 'Top') {
+      buttonNumb = 2;
+    } else if (newSidebarState === 'Bottom') {
+      buttonNumb = 3;
+    }
+    if(!this.#sidebarButtonGroup.children[buttonNumb].classList.contains('radio-button-group-active')){
+      this.#sidebarButtonGroup.children[buttonNumb].click();
+    }
+	
     {
       // initialize buttons' visibility state
       const hideSearchButtons =
@@ -5390,7 +5396,6 @@ class ModelManager extends ComfyDialog {
       const xDecimal = settings['sidebar-default-width'].value;
       const yDecimal = settings['sidebar-default-height'].value;
 
-      this.element.dataset['sidebarState'] = settings['sidebar-default-state'].value;
       this.element.dataset['sidebarLeftWidthDecimal'] = xDecimal;
       this.element.dataset['sidebarRightWidthDecimal'] = xDecimal;
       this.element.dataset['sidebarTopHeightDecimal'] = yDecimal;

From 7a5d19eeec65426472760946532779ce08fafb10 Mon Sep 17 00:00:00 2001
From: EtSL33py <dimone48@mail.ru>
Date: Fri, 20 Sep 2024 03:30:11 +0300
Subject: [PATCH 03/10] defauls state is None, state and sizes are not updated
 when Save or Reload is pressed

---
 __init__.py          |  2 +-
 web/model-manager.js | 65 ++++++++++++++++++++++++--------------------
 2 files changed, 36 insertions(+), 31 deletions(-)

diff --git a/__init__.py b/__init__.py
index 5258cd5..111e564 100644
--- a/__init__.py
+++ b/__init__.py
@@ -200,7 +200,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", "Left", str),
+        Rule("sidebar-default-state", "None", str),
         Rule("text-input-always-hide-search-button", False, bool),
         Rule("text-input-always-hide-clear-button", False, bool),
         
diff --git a/web/model-manager.js b/web/model-manager.js
index c7caea4..b23e06d 100644
--- a/web/model-manager.js
+++ b/web/model-manager.js
@@ -4611,7 +4611,7 @@ class SettingsView {
         }),
         $select({
           $: (el) => (settings['sidebar-default-state'] = el),
-          textContent: 'Default model manager position',
+          textContent: 'Default model manager position (on start up)',
           options: ['Left', 'Right', 'Top', 'Bottom', 'None'],
         }),	  
         $checkbox({
@@ -5356,37 +5356,27 @@ class ModelManager extends ComfyDialog {
   async #init() {
     await this.#settingsView.reload(false);
     await this.#refreshModels();
-  }
 
-  #updateSidebarSettings = (settings) => {
-	  
-    const newSidebarState = settings['sidebar-default-state'].value;
-    let buttonNumb = 0;
-    if (newSidebarState === 'Left') {
-      buttonNumb = 4;
-    } else if (newSidebarState === 'Right') {
-      buttonNumb = 1;
-    } else if (newSidebarState === 'Top') {
-      buttonNumb = 2;
-    } else if (newSidebarState === 'Bottom') {
-      buttonNumb = 3;
-    }
-    if(!this.#sidebarButtonGroup.children[buttonNumb].classList.contains('radio-button-group-active')){
-      this.#sidebarButtonGroup.children[buttonNumb].click();
-    }
-	
+    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;
+      }
+      const button = this.#sidebarButtonGroup.children[buttonNumb];
+      if(!button.classList.contains('radio-button-group-active')){
+        button.click();
+      }
+	}
 
     {
       // set initial sidebar widths & heights
@@ -5430,6 +5420,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;
   };

From 5abbd0ccb893a20cbab85f8c0052ad32cc3ef320 Mon Sep 17 00:00:00 2001
From: EtSL33py <dimone48@mail.ru>
Date: Fri, 20 Sep 2024 03:35:02 +0300
Subject: [PATCH 04/10] Update model-manager.js

---
 web/model-manager.js | 5 +----
 1 file changed, 1 insertion(+), 4 deletions(-)

diff --git a/web/model-manager.js b/web/model-manager.js
index b23e06d..a95c940 100644
--- a/web/model-manager.js
+++ b/web/model-manager.js
@@ -5372,10 +5372,7 @@ class ModelManager extends ComfyDialog {
       } else if (newSidebarState === 'Left') {
         buttonNumb = 4;
       }
-      const button = this.#sidebarButtonGroup.children[buttonNumb];
-      if(!button.classList.contains('radio-button-group-active')){
-        button.click();
-      }
+      this.#sidebarButtonGroup.children[buttonNumb].click();
 	}
 
     {

From 81739c6d219cdfaf3a51ec522bb91d7cb00394e7 Mon Sep 17 00:00:00 2001
From: EtSL33py <dimone48@mail.ru>
Date: Fri, 20 Sep 2024 03:37:45 +0300
Subject: [PATCH 05/10] Update model-manager.js

---
 web/model-manager.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/web/model-manager.js b/web/model-manager.js
index a95c940..1e391b7 100644
--- a/web/model-manager.js
+++ b/web/model-manager.js
@@ -5373,7 +5373,7 @@ class ModelManager extends ComfyDialog {
         buttonNumb = 4;
       }
       this.#sidebarButtonGroup.children[buttonNumb].click();
-	}
+    }
 
     {
       // set initial sidebar widths & heights

From 20f933029271d526c56b949035fca7e641a85f50 Mon Sep 17 00:00:00 2001
From: EtSL33py <dimone48@mail.ru>
Date: Fri, 20 Sep 2024 15:48:34 +0300
Subject: [PATCH 06/10] use "drop" event instead of "dragend" in firefox

---
 web/model-manager.js | 100 ++++++++++++++++++++++---------------------
 1 file changed, 52 insertions(+), 48 deletions(-)

diff --git a/web/model-manager.js b/web/model-manager.js
index fd55c67..ea66954 100644
--- 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 ‘screenX’ and ‘screenY’
+const IS_FIREFOX = navigator.userAgent.indexOf('Firefox') > -1;
 
 /**
  * @param {string} url
@@ -1895,20 +1868,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.x, event.y);
     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],
@@ -2164,20 +2133,41 @@ class ModelGrid {
             },
           }).element,
         ];
-        const dragAdd = (e) =>
-          ModelGrid.#dragAddModel(
-            e,
-            modelType,
-            path,
-            removeEmbeddingExtension,
-            strictDragToAdd,
-          );
+
+        const overlay = (() => {
+          if(IS_FIREFOX){
+            const dragAdd = (e) =>{
+              const data = {
+                modelType: modelType,
+                path: path,
+                removeEmbeddingExtension: removeEmbeddingExtension,
+                strictDragToAdd: strictDragToAdd,
+              };
+              e.dataTransfer.setData('manager-model', JSON.stringify(data));
+            }
+            return $el('div.model-preview-overlay', {
+              ondragstart: (e) => dragAdd(e),
+              draggable: true,
+            });
+          } else {
+            const dragAdd = (e) =>
+            ModelGrid.dragAddModel(
+              e,
+              modelType,
+              path,
+              removeEmbeddingExtension,
+              strictDragToAdd,
+            );
+            return $el('div.model-preview-overlay', {
+              ondragend: (e) => dragAdd(e),
+              draggable: true,
+            });
+          }
+        })();
+
         return $el('div.item', {}, [
           previewThumbnail,
-          $el('div.model-preview-overlay', {
-            ondragend: (e) => dragAdd(e),
-            draggable: true,
-          }),
+          overlay,
           $el(
             'div.model-preview-top-right',
             {
@@ -5344,6 +5334,20 @@ class ModelManager extends ComfyDialog {
       updateDragSidebar(e, e.touches[0].clientX, e.touches[0].clientY),
     );
 
+    if(IS_FIREFOX){
+      app.canvasEl.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();
   }
 

From 8df9cee9304aae9d9285be1a61e180e26923b787 Mon Sep 17 00:00:00 2001
From: EtSL33py <dimone48@mail.ru>
Date: Fri, 20 Sep 2024 16:22:50 +0300
Subject: [PATCH 07/10] Update model-manager.js

---
 web/model-manager.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/web/model-manager.js b/web/model-manager.js
index ea66954..939d41c 100644
--- a/web/model-manager.js
+++ b/web/model-manager.js
@@ -97,7 +97,7 @@ class KeyComboListener {
   }
 }
 
-// This is used in Firefox to bypass the ‘dragend’ event because it returns incorrect ‘screenX’ and ‘screenY’
+// 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;
 
 /**

From c180d1b38047309469773544945a4afb86b9f332 Mon Sep 17 00:00:00 2001
From: EtSL33py <dimone48@mail.ru>
Date: Fri, 20 Sep 2024 16:28:25 +0300
Subject: [PATCH 08/10] Update model-manager.js

---
 web/model-manager.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/web/model-manager.js b/web/model-manager.js
index 939d41c..52e0855 100644
--- a/web/model-manager.js
+++ b/web/model-manager.js
@@ -1875,7 +1875,7 @@ class ModelGrid {
     removeEmbeddingExtension,
     strictlyOnWidget,
   ) {
-    const target = document.elementFromPoint(event.x, event.y);
+    const target = document.elementFromPoint(event.clientX, event.clientY);
     if (modelType !== 'embeddings' && target.id === 'graph-canvas') {
       const pos = app.canvas.convertEventToCanvasOffset(event);
 

From 42a5180dc969e2ae2d9fc722c9a7d88a6e410225 Mon Sep 17 00:00:00 2001
From: EtSL33py <dimone48@mail.ru>
Date: Fri, 20 Sep 2024 18:44:53 +0300
Subject: [PATCH 09/10] Update model-manager.js

---
 web/model-manager.js | 82 ++++++++++++++++++++++++++------------------
 1 file changed, 48 insertions(+), 34 deletions(-)

diff --git a/web/model-manager.js b/web/model-manager.js
index 52e0855..c478ec9 100644
--- a/web/model-manager.js
+++ b/web/model-manager.js
@@ -2043,6 +2043,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', {
@@ -2133,41 +2174,14 @@ class ModelGrid {
             },
           }).element,
         ];
-
-        const overlay = (() => {
-          if(IS_FIREFOX){
-            const dragAdd = (e) =>{
-              const data = {
-                modelType: modelType,
-                path: path,
-                removeEmbeddingExtension: removeEmbeddingExtension,
-                strictDragToAdd: strictDragToAdd,
-              };
-              e.dataTransfer.setData('manager-model', JSON.stringify(data));
-            }
-            return $el('div.model-preview-overlay', {
-              ondragstart: (e) => dragAdd(e),
-              draggable: true,
-            });
-          } else {
-            const dragAdd = (e) =>
-            ModelGrid.dragAddModel(
-              e,
-              modelType,
-              path,
-              removeEmbeddingExtension,
-              strictDragToAdd,
-            );
-            return $el('div.model-preview-overlay', {
-              ondragend: (e) => dragAdd(e),
-              draggable: true,
-            });
-          }
-        })();
-
         return $el('div.item', {}, [
           previewThumbnail,
-          overlay,
+          $overlay(
+            modelType,
+            path,
+            removeEmbeddingExtension,
+            strictDragToAdd,
+          ),
           $el(
             'div.model-preview-top-right',
             {
@@ -5335,7 +5349,7 @@ class ModelManager extends ComfyDialog {
     );
 
     if(IS_FIREFOX){
-      app.canvasEl.addEventListener('drop', (e) => {
+      app.canvasContainer.addEventListener('drop', (e) => {
         if (e.dataTransfer.types.includes('manager-model')){
           const data = JSON.parse(e.dataTransfer.getData('manager-model'));
           ModelGrid.dragAddModel(

From e05c83e5f9afda200336bf080d992f6f8e66d92e Mon Sep 17 00:00:00 2001
From: EtSL33py <dimone48@mail.ru>
Date: Fri, 20 Sep 2024 18:59:31 +0300
Subject: [PATCH 10/10] Update model-manager.js

---
 web/model-manager.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/web/model-manager.js b/web/model-manager.js
index c478ec9..e5a2a3e 100644
--- a/web/model-manager.js
+++ b/web/model-manager.js
@@ -2060,7 +2060,7 @@ class ModelGrid {
                 strictDragToAdd: strictDragToAdd,
               };
               e.dataTransfer.setData('manager-model', JSON.stringify(data));
-			  e.dataTransfer.setData('text/plain', '');
+              e.dataTransfer.setData('text/plain', '');
             },
             draggable: true,
           });