From ddb0170b4f6bd6ee1ce1f94a26f0098c24901ba1 Mon Sep 17 00:00:00 2001
From: Christian Bastian <80225746+cdb-boop@users.noreply.github.com>
Date: Sun, 28 Jul 2024 07:30:46 -0400
Subject: [PATCH] Fixed touchscreen sidebar drag. - Forgot to extract touch
 from event.

---
 web/model-manager.js | 27 +++++++++------------------
 1 file changed, 9 insertions(+), 18 deletions(-)

diff --git a/web/model-manager.js b/web/model-manager.js
index 46b8fd0..f617f63 100644
--- a/web/model-manager.js
+++ b/web/model-manager.js
@@ -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();
     }