Fixed touchscreen sidebar drag.

- 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

View File

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