diff --git a/README.md b/README.md index cb964ad..dccae42 100644 --- a/README.md +++ b/README.md @@ -42,16 +42,18 @@ Download, browse and delete models in ComfyUI. ### ComfyUI Node Graph +Model Manager Demo Screenshot + +- Drag a model onto the graph to add a new node. +- Drag a model onto an existing node to set the model field. (Must be exact on input if multiple inputs use model name text.) +- Drag an embedding onto a text area, or highlight any number of nodes, to add it to the end. +- Drag preview image in model info onto the graph to load embedded workflow. + Model Manager Demo Screenshot - Button to copy a model to the ComfyUI clipboard or embedding to system clipboard. (Embedding copying requires secure http connection.) - Button to add model to ComfyUI graph or embedding to selected nodes. (For small screens/low resolution.) - Button to load workflows embedded in previews. (Can alternatively drag full-sized image in model info onto node graph.) -- Right, left, top and bottom toggleable sidebar modes. -- Drag a model onto the graph to add a new node. -- Drag a model onto an existing node to set the model field. (Must be exact on input if multiple inputs use model name text.) -- Drag an embedding onto a text area, or highlight any number of nodes, to add it to the end. -- Drag preview image in model info onto the graph to load embedded workflow. ### Settings Tab diff --git a/demo/tab-model-drag-add.gif b/demo/tab-model-drag-add.gif new file mode 100644 index 0000000..897b474 Binary files /dev/null and b/demo/tab-model-drag-add.gif differ diff --git a/web/model-manager.js b/web/model-manager.js index 09d913d..c25fa1d 100644 --- a/web/model-manager.js +++ b/web/model-manager.js @@ -4529,7 +4529,7 @@ class ModelManager extends ComfyDialog { modelManager.style.setProperty("--model-manager-sidebar-width-right", (rightDecimal * width) + "px"); modelManager.style.setProperty("--model-manager-sidebar-height-top", + (topDecimal * height) + "px"); modelManager.style.setProperty("--model-manager-sidebar-height-bottom", (bottomDecimal * height) + "px"); - }); + }); const EDGE_DELTA = 8; @@ -4773,7 +4773,7 @@ class ModelManager extends ComfyDialog { } #updateSidebarButtons = () => { - const managerRect = document.body.getBoundingClientRect(); + const managerRect = this.element.getBoundingClientRect(); const isNarrow = managerRect.width < 768; // TODO: `minWidth` is a magic value const alwaysShowCompactSidebarControls = this.#settingsView.elements.settings["sidebar-control-always-compact"].checked; if (isNarrow || alwaysShowCompactSidebarControls) {