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

Fixed touchscreen sidebar drag.

Browse Source 
- Forgot to extract touch from event.
This commit is contained in:
Christian Bastian
2024-07-28 07:30:46 -04:00
parent 44d7084aa0
commit ddb0170b4f
1 changed files with 9 additions and 18 deletions
Download Patch File Download Diff File Expand all files Collapse all files

27
web/model-manager.js
View File

@@ -4550,7 +4550,7 @@ class ModelManager extends ComfyDialog {
document.addEventListener("mouseup", (e) => endDragSidebar(e)); document.addEventListener("mouseup", (e) => endDragSidebar(e));
document.addEventListener("touchend", (e) => endDragSidebar(e)); document.addEventListener("touchend", (e) => endDragSidebar(e));
const detectDragSidebar = (e) => { const detectDragSidebar = (e, x, y) => {
const left = modelManager.offsetLeft; const left = modelManager.offsetLeft;
const top = modelManager.offsetTop; const top = modelManager.offsetTop;
const width = modelManager.offsetWidth; const width = modelManager.offsetWidth;
@@ -4558,9 +4558,6 @@ class ModelManager extends ComfyDialog {
const right = left + width; const right = left + width;
const bottom = top + height; const bottom = top + height;
const x = e.clientX;
const y = e.clientY;
if (!(x >= left && x <= right && y >= top && y <= bottom)) { if (!(x >= left && x <= right && y >= top && y <= bottom)) {
// click was not in model manager // click was not in model manager
return; return;
@@ -4590,10 +4587,10 @@ class ModelManager extends ComfyDialog {
e.stopPropagation(); e.stopPropagation();
} }
}; };
modelManager.addEventListener("mousedown", (e) => detectDragSidebar(e)); modelManager.addEventListener("mousedown", (e) => detectDragSidebar(e, e.clientX, e.clientY));
modelManager.addEventListener("touchstart", (e) => detectDragSidebar(e)); modelManager.addEventListener("touchstart", (e) => detectDragSidebar(e, e.touches[0].clientX, e.touches[0].clientY));
const updateSidebarCursor = (e) => { const updateSidebarCursor = (e, x, y) => {
if (this.#dragSidebarState !== "") { if (this.#dragSidebarState !== "") {
// do not update cursor style while dragging // do not update cursor style while dragging
return; return;
@@ -4606,9 +4603,6 @@ class ModelManager extends ComfyDialog {
const right = left + width; const right = left + width;
const bottom = top + height; const bottom = top + height;
const x = e.clientX;
const y = e.clientY;
const isOnEdgeLeft = x - left <= EDGE_DELTA; const isOnEdgeLeft = x - left <= EDGE_DELTA;
const isOnEdgeRight = right - x <= EDGE_DELTA; const isOnEdgeRight = right - x <= EDGE_DELTA;
const isOnEdgeTop = y - top <= EDGE_DELTA; const isOnEdgeTop = y - top <= EDGE_DELTA;
@@ -4629,10 +4623,10 @@ class ModelManager extends ComfyDialog {
updateClass(sidebarState === "left" && isOnEdgeRight, "cursor-drag-right"); updateClass(sidebarState === "left" && isOnEdgeRight, "cursor-drag-right");
updateClass(sidebarState === "top" && isOnEdgeBottom, "cursor-drag-bottom"); updateClass(sidebarState === "top" && isOnEdgeBottom, "cursor-drag-bottom");
}; };
modelManager.addEventListener("mousemove", (e) => updateSidebarCursor(e)); modelManager.addEventListener("mousemove", (e) => updateSidebarCursor(e, e.clientX, e.clientY));
modelManager.addEventListener("touchmove", (e) => updateSidebarCursor(e)); modelManager.addEventListener("touchmove", (e) => updateSidebarCursor(e, e.touches[0].clientX, e.touches[0].clientY));
const updateDragSidebar = (e) => { const updateDragSidebar = (e, x, y) => {
const sidebarState = this.#dragSidebarState; const sidebarState = this.#dragSidebarState;
if (sidebarState === "") { if (sidebarState === "") {
return; return;
@@ -4640,9 +4634,6 @@ class ModelManager extends ComfyDialog {
e.preventDefault(); e.preventDefault();
const x = e.clientX;
const y = e.clientY;
const width = window.innerWidth; const width = window.innerWidth;
const height = window.innerHeight; const height = window.innerHeight;
@@ -4663,8 +4654,8 @@ class ModelManager extends ComfyDialog {
modelManager.style.setProperty("--model-manager-sidebar-height-bottom", pixels); modelManager.style.setProperty("--model-manager-sidebar-height-bottom", pixels);
} }
}; };
document.addEventListener("mousemove", (e) => updateDragSidebar(e)); document.addEventListener("mousemove", (e) => updateDragSidebar(e, e.clientX, e.clientY));
document.addEventListener("touchmove", (e) => updateDragSidebar(e)); document.addEventListener("touchmove", (e) => updateDragSidebar(e, e.touches[0].clientX, e.touches[0].clientY));
this.#init(); this.#init();
} }