TBNilles/ComfyUI-Model-Manager
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Added ability to resize model manager when in sidebar by dragging on edges.

Browse Source 
- Sidebar vertical and horizontal initial sizes on start up can be changed in settings.
This commit is contained in:
Christian Bastian
2024-07-27 02:32:08 -04:00
parent 9c1ac43870
commit 76d6eb587c
3 changed files with 252 additions and 38 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
__init__.py
View File

@@ -195,9 +195,9 @@ def ui_rules():
Rule("download-save-description-as-text-file", True, bool),
Rule("sidebar-default-height", 0.5, float, 0.0, 1.0),
Rule("sidebar-default-width", 0.5, float, 0.0, 1.0),
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("text-input-always-hide-search-button", False, bool),
Rule("text-input-always-hide-clear-button", False, bool),

61
web/model-manager.css
View File

@@ -9,8 +9,6 @@
padding: 8px;
position: fixed;
overflow: hidden;
top: 0;
left: 0;
width: 100%;
z-index: 2000;
@@ -18,8 +16,8 @@
border-radius: 0;
box-shadow: none;
justify-content: unset;
max-height: unset;
max-width: unset;
max-height: 100vh;
max-width: 100vw;
transform: none;
/*disable double-tap zoom on model manager*/
touch-action: manipulation;
@@ -45,6 +43,45 @@
pointer-events: auto;
}
/* sidebar */
.model-manager {
--model-manager-sidebar-width-left: 50vw;
--model-manager-sidebar-width-right: 50vw;
--model-manager-sidebar-height-top: 50vh;
--model-manager-sidebar-height-bottom: 50vh;
--model-manager-left: 0;
--model-manager-right: 0;
--model-manager-top: 0;
--model-manager-bottom: 0;
left: var(--model-manager-left);
top: var(--model-manager-right);
right: var(--model-manager-top);
bottom: var(--model-manager-bottom);
}
.model-manager.cursor-drag-left,
.model-manager.cursor-drag-right {
cursor: ew-resize;
}
.model-manager.cursor-drag-top,
.model-manager.cursor-drag-bottom {
cursor: ns-resize;
}
.model-manager.cursor-drag-top.cursor-drag-left,
.model-manager.cursor-drag-bottom.cursor-drag-right {
cursor: nwse-resize;
}
.model-manager.cursor-drag-top.cursor-drag-right,
.model-manager.cursor-drag-bottom.cursor-drag-left {
cursor: nesw-resize;
}
/* sidebar buttons */
.model-manager .sidebar-buttons {
overflow: hidden;
@@ -61,23 +98,23 @@
}
.model-manager[data-sidebar-state="left"] {
width: 50%;
left: 0%;
width: var(--model-manager-sidebar-width-left);
right: auto;
}
.model-manager[data-sidebar-state="top"] {
height: 50%;
top: 0%;
height: var(--model-manager-sidebar-height-top);
bottom: auto;
}
.model-manager[data-sidebar-state="bottom"] {
height: 50%;
top: 50%;
height: var(--model-manager-sidebar-height-bottom);
top: auto;
}
.model-manager[data-sidebar-state="right"] {
width: 50%;
left: 50%;
width: var(--model-manager-sidebar-width-right);
left: auto;
}
/* common */

225
web/model-manager.js
View File

@@ -3817,8 +3817,8 @@ class SettingsView {
/** @type {HTMLInputElement} */ "download-save-description-as-text-file": null,
//"sidebar-default-height": null,
//"sidebar-default-width": null,
/** @type {HTMLInputElement} */ "sidebar-default-width": null,
/** @type {HTMLInputElement} */ "sidebar-default-height": null,
/** @type {HTMLInputElement} */ "sidebar-control-always-compact": null,
/** @type {HTMLInputElement} */ "text-input-always-hide-search-button": null,
/** @type {HTMLInputElement} */ "text-input-always-hide-clear-button": null,
@@ -4070,29 +4070,31 @@ class SettingsView {
textContent: "Save notes by default.",
}),
$el("h2", ["Window"]),
/*
$el("input", {
$: (el) => (settings["sidebar-default-width"] = el),
type: "number",
name: "default sidebar width",
textContent: "Initial sidebar width",
value: 0.5,
min: 0.0,
max: 1.0,
step: 0.05,
}),
$el("input", {
$: (el) => (settings["sidebar-default-height"] = el),
type: "number",
name: "default sidebar height",
textContent: "Initial sidebar height",
value: 0.5,
min: 0.0,
max: 1.0,
step: 0.05,
}),
*/
sidebarControl,
$el("label", [
"Sidebar width (on start up)",
$el("input", {
$: (el) => (settings["sidebar-default-width"] = el),
type: "range",
name: "default sidebar width",
value: 0.5,
min: 0.0,
max: 1.0,
step: 0.01,
}),
]),
$el("label", [
"Sidebar height (on start up)",
$el("input", {
$: (el) => (settings["sidebar-default-height"] = el),
type: "range",
name: "default sidebar height",
value: 0.5,
min: 0.0,
max: 1.0,
step: 0.01,
}),
]),
$checkbox({
$: (el) => (settings["text-input-always-hide-search-button"] = el),
textContent: "Always hide \"Search\" buttons.",
@@ -4338,6 +4340,9 @@ class ModelManager extends ComfyDialog {
/** @type {HTMLButtonElement} */
#closeModelInfoButton = null;
/** @type {String} */
#dragSidebarState = "";
constructor() {
super();
@@ -4469,6 +4474,128 @@ class ModelManager extends ComfyDialog {
new ResizeObserver(GenerateDynamicTabTextCallback(modelManager, tabInfoButtons, 704)).observe(modelManager);
new ResizeObserver(() => this.#updateSidebarButtons()).observe(modelManager);
const EDGE_DELTA = 4;
document.addEventListener("mouseup", (e) => {
this.#dragSidebarState = "";
modelManager.classList.remove("cursor-drag-left");
modelManager.classList.remove("cursor-drag-top");
modelManager.classList.remove("cursor-drag-right");
modelManager.classList.remove("cursor-drag-bottom");
});
modelManager.addEventListener("mousedown", (e) => {
const left = modelManager.offsetLeft;
const top = modelManager.offsetTop;
const width = modelManager.offsetWidth;
const height = modelManager.offsetHeight;
const right = left + width;
const bottom = top + height;
const x = e.pageX;
const y = e.pageY;
if (!(x >= left && x <= right && y >= top && y <= bottom)) {
// click was not in model manager
return;
}
const isOnEdgeLeft = x - left <= EDGE_DELTA;
const isOnEdgeRight = right - x <= EDGE_DELTA;
const isOnEdgeTop = y - top <= EDGE_DELTA;
const isOnEdgeBottom = bottom - y <= EDGE_DELTA;
const sidebarState = this.element.dataset["sidebarState"];
if (sidebarState === "left" && isOnEdgeRight) {
this.#dragSidebarState = sidebarState;
}
else if (sidebarState === "right" && isOnEdgeLeft) {
this.#dragSidebarState = sidebarState;
}
else if (sidebarState === "top" && isOnEdgeBottom) {
this.#dragSidebarState = sidebarState;
}
else if (sidebarState === "bottom" && isOnEdgeTop) {
this.#dragSidebarState = sidebarState;
}
if (this.#dragSidebarState !== "") {
e.preventDefault();
}
});
modelManager.addEventListener("mousemove", (e) => {
if (this.#dragSidebarState !== "") {
// do not update cursor style while dragging
return;
}
/** @type {HTMLDivElement} */
const left = modelManager.offsetLeft;
const top = modelManager.offsetTop;
const width = modelManager.offsetWidth;
const height = modelManager.offsetHeight;
const right = left + width;
const bottom = top + height;
const x = e.pageX;
const y = e.pageY;
const isOnEdgeLeft = x - left <= EDGE_DELTA;
const isOnEdgeRight = right - x <= EDGE_DELTA;
const isOnEdgeTop = y - top <= EDGE_DELTA;
const isOnEdgeBottom = bottom - y <= EDGE_DELTA;
const updateClass = (add, className) => {
if (add) {
modelManager.classList.add(className);
}
else {
modelManager.classList.remove(className);
}
};
updateClass(isOnEdgeLeft, "cursor-drag-left");
updateClass(isOnEdgeTop, "cursor-drag-top");
updateClass(isOnEdgeRight, "cursor-drag-right");
updateClass(isOnEdgeBottom, "cursor-drag-bottom");
});
document.addEventListener("mousemove", (e) => {
const sidebarState = this.#dragSidebarState;
if (sidebarState === "") {
return;
}
e.preventDefault();
const x = e.pageX;
const y = e.pageY;
const pageWidth = document.documentElement.scrollWidth;
const pageHeight = document.documentElement.scrollHeight;
if (sidebarState === "left") {
const pixels = this.#clampSidebarWidth(x).toString() + "px";
modelManager.style.setProperty("--model-manager-sidebar-width-left", pixels);
}
else if (sidebarState === "right") {
const pixels = this.#clampSidebarWidth(pageWidth - x).toString() + "px";
modelManager.style.setProperty("--model-manager-sidebar-width-right", pixels);
}
else if (sidebarState === "top") {
const pixels = this.#clampSidebarHeight(y).toString() + "px";
modelManager.style.setProperty("--model-manager-sidebar-height-top", pixels);
}
else if (sidebarState === "bottom") {
const pixels = this.#clampSidebarHeight(pageHeight - y).toString() + "px";
modelManager.style.setProperty("--model-manager-sidebar-height-bottom", pixels);
}
});
new ResizeObserver(() => {
//
}).observe(modelManager);
this.#init();
}
@@ -4479,11 +4606,39 @@ 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 widths & heights
const pageWidth = document.documentElement.scrollWidth;
const pageHeight = document.documentElement.scrollHeight;
const x = Math.floor(pageWidth * settings["sidebar-default-width"].value);
const y = Math.floor(pageHeight * settings["sidebar-default-height"].value);
console.log(settings["sidebar-default-width"].value);
console.log(settings["sidebar-default-height"].value);
console.log(x);
console.log(y);
const leftPixels = this.#clampSidebarWidth(x).toString() + "px";
this.element.style.setProperty("--model-manager-sidebar-width-left", leftPixels);
const rightPixels = this.#clampSidebarWidth(pageWidth - x).toString() + "px";
this.element.style.setProperty("--model-manager-sidebar-width-right", rightPixels);
const topPixels = this.#clampSidebarHeight(y).toString() + "px";
this.element.style.setProperty("--model-manager-sidebar-height-top", topPixels);
const bottomPixels = this.#clampSidebarHeight(pageHeight - y).toString() + "px";
this.element.style.setProperty("--model-manager-sidebar-height-bottom", bottomPixels);
}
}
#resetManagerContentsScroll = () => {
@@ -4560,6 +4715,28 @@ class ModelManager extends ComfyDialog {
this.#sidebarSelect.style.display = "none";
}
}
/**
* @param {Number} x
* @returns {Number}
*/
#clampSidebarWidth(x) {
const pageWidth = document.documentElement.scrollWidth;
const min = Math.min(375, pageWidth); // TODO: magic numbers
const max = Math.floor(pageWidth * 0.95); // TODO: magic numbers
return Math.min(Math.max(x, min), max);
}
/**
* @param {Number} y
* @returns {Number}
*/
#clampSidebarHeight(y) {
const pageHeight = document.documentElement.scrollHeight;
const min = Math.min(250, pageHeight); // TODO: magic numbers
const max = Math.floor(pageHeight * 0.95); // TODO: magic numbers
return Math.min(Math.max(y, min), max);
}
}
/** @type {ModelManager | undefined} */