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

Added model manager sidebar drag support for touch screens.

Browse Source 
- Tweaked min/max dimensions and active drag area.
This commit is contained in:
Christian Bastian
2024-07-27 02:58:30 -04:00
parent 76d6eb587c
commit d43c99d182
1 changed files with 20 additions and 15 deletions
Download Patch File Download Diff File Expand all files Collapse all files

35
web/model-manager.js
View File

@@ -4474,17 +4474,19 @@ class ModelManager extends ComfyDialog {
new ResizeObserver(GenerateDynamicTabTextCallback(modelManager, tabInfoButtons, 704)).observe(modelManager); new ResizeObserver(GenerateDynamicTabTextCallback(modelManager, tabInfoButtons, 704)).observe(modelManager);
new ResizeObserver(() => this.#updateSidebarButtons()).observe(modelManager); new ResizeObserver(() => this.#updateSidebarButtons()).observe(modelManager);
const EDGE_DELTA = 4; const EDGE_DELTA = 8;
document.addEventListener("mouseup", (e) => { const endDragSidebar = (e) => {
this.#dragSidebarState = ""; this.#dragSidebarState = "";
modelManager.classList.remove("cursor-drag-left"); modelManager.classList.remove("cursor-drag-left");
modelManager.classList.remove("cursor-drag-top"); modelManager.classList.remove("cursor-drag-top");
modelManager.classList.remove("cursor-drag-right"); modelManager.classList.remove("cursor-drag-right");
modelManager.classList.remove("cursor-drag-bottom"); modelManager.classList.remove("cursor-drag-bottom");
}); };
document.addEventListener("mouseup", (e) => endDragSidebar(e));
document.addEventListener("touchend", (e) => endDragSidebar(e));
modelManager.addEventListener("mousedown", (e) => { const detectDragSidebar = (e) => {
const left = modelManager.offsetLeft; const left = modelManager.offsetLeft;
const top = modelManager.offsetTop; const top = modelManager.offsetTop;
const width = modelManager.offsetWidth; const width = modelManager.offsetWidth;
@@ -4521,10 +4523,13 @@ class ModelManager extends ComfyDialog {
if (this.#dragSidebarState !== "") { if (this.#dragSidebarState !== "") {
e.preventDefault(); e.preventDefault();
e.stopPropagation();
} }
}); };
modelManager.addEventListener("mousedown", (e) => detectDragSidebar(e));
modelManager.addEventListener("touchstart", (e) => detectDragSidebar(e));
modelManager.addEventListener("mousemove", (e) => { const updateSidebarCursor = (e) => {
if (this.#dragSidebarState !== "") { if (this.#dragSidebarState !== "") {
// do not update cursor style while dragging // do not update cursor style while dragging
return; return;
@@ -4558,9 +4563,11 @@ class ModelManager extends ComfyDialog {
updateClass(isOnEdgeTop, "cursor-drag-top"); updateClass(isOnEdgeTop, "cursor-drag-top");
updateClass(isOnEdgeRight, "cursor-drag-right"); updateClass(isOnEdgeRight, "cursor-drag-right");
updateClass(isOnEdgeBottom, "cursor-drag-bottom"); updateClass(isOnEdgeBottom, "cursor-drag-bottom");
}); };
modelManager.addEventListener("mousemove", (e) => updateSidebarCursor(e));
modelManager.addEventListener("touchmove", (e) => updateSidebarCursor(e));
document.addEventListener("mousemove", (e) => { const updateDragSidebar = (e) => {
const sidebarState = this.#dragSidebarState; const sidebarState = this.#dragSidebarState;
if (sidebarState === "") { if (sidebarState === "") {
return; return;
@@ -4590,11 +4597,9 @@ class ModelManager extends ComfyDialog {
const pixels = this.#clampSidebarHeight(pageHeight - y).toString() + "px"; const pixels = this.#clampSidebarHeight(pageHeight - y).toString() + "px";
modelManager.style.setProperty("--model-manager-sidebar-height-bottom", pixels); modelManager.style.setProperty("--model-manager-sidebar-height-bottom", pixels);
} }
}); };
document.addEventListener("mousemove", (e) => updateDragSidebar(e));
new ResizeObserver(() => { document.addEventListener("touchmove", (e) => updateDragSidebar(e));
//
}).observe(modelManager);
this.#init(); this.#init();
} }
@@ -4722,7 +4727,7 @@ class ModelManager extends ComfyDialog {
*/ */
#clampSidebarWidth(x) { #clampSidebarWidth(x) {
const pageWidth = document.documentElement.scrollWidth; const pageWidth = document.documentElement.scrollWidth;
const min = Math.min(375, pageWidth); // TODO: magic numbers const min = Math.floor(pageWidth * 0.15); // TODO: magic numbers
const max = Math.floor(pageWidth * 0.95); // TODO: magic numbers const max = Math.floor(pageWidth * 0.95); // TODO: magic numbers
return Math.min(Math.max(x, min), max); return Math.min(Math.max(x, min), max);
} }
@@ -4733,7 +4738,7 @@ class ModelManager extends ComfyDialog {
*/ */
#clampSidebarHeight(y) { #clampSidebarHeight(y) {
const pageHeight = document.documentElement.scrollHeight; const pageHeight = document.documentElement.scrollHeight;
const min = Math.min(250, pageHeight); // TODO: magic numbers const min = Math.floor(pageHeight * 0.15); // TODO: magic numbers
const max = Math.floor(pageHeight * 0.95); // TODO: magic numbers const max = Math.floor(pageHeight * 0.95); // TODO: magic numbers
return Math.min(Math.max(y, min), max); return Math.min(Math.max(y, min), max);
} }