Fix incorrect touch event handling by accurately tracking touch points (#3622)

src/extensions/core/simpleTouchSupport.ts

@@ -2,42 +2,35 @@ import { LGraphCanvas, LiteGraph } from '@comfyorg/litegraph'
 
 import { app } from '../../scripts/app'
 
-// @ts-expect-error fixme ts strict error
+let touchZooming = false
-let touchZooming
 let touchCount = 0
 
 app.registerExtension({
   name: 'Comfy.SimpleTouchSupport',
   setup() {
-    // @ts-expect-error fixme ts strict error
+    let touchDist: number | null = null
-    let touchDist
+    let touchTime: Date | null = null
-    // @ts-expect-error fixme ts strict error
+    let lastTouch: { clientX: number; clientY: number } | null = null
-    let touchTime
+    let lastScale: number | null = null
-    // @ts-expect-error fixme ts strict error
+    function getMultiTouchPos(e: TouchEvent) {
-    let lastTouch
-    // @ts-expect-error fixme ts strict error
-    let lastScale
-    // @ts-expect-error fixme ts strict error
-    function getMultiTouchPos(e) {
       return Math.hypot(
         e.touches[0].clientX - e.touches[1].clientX,
         e.touches[0].clientY - e.touches[1].clientY
       )
     }
 
-    // @ts-expect-error fixme ts strict error
+    function getMultiTouchCenter(e: TouchEvent) {
-    function getMultiTouchCenter(e) {
       return {
         clientX: (e.touches[0].clientX + e.touches[1].clientX) / 2,
         clientY: (e.touches[0].clientY + e.touches[1].clientY) / 2
       }
     }
 
-    // @ts-expect-error fixme ts strict error
+    app.canvasEl.parentElement?.addEventListener(
-    app.canvasEl.parentElement.addEventListener(
       'touchstart',
       (e: TouchEvent) => {
-        touchCount++
+        touchCount += e.changedTouches.length
+
         lastTouch = null
         lastScale = null
         if (e.touches?.length === 1) {
@@ -59,35 +52,34 @@ app.registerExtension({
       true
     )
 
-    // @ts-expect-error fixme ts strict error
+    app.canvasEl.parentElement?.addEventListener(
-    app.canvasEl.parentElement.addEventListener('touchend', (e: TouchEvent) => {
+      'touchend',
-      touchCount--
+      (e: TouchEvent) => {
+        touchCount -= e.changedTouches.length
 
-      if (e.touches?.length !== 1) touchZooming = false
+        if (e.touches?.length !== 1) touchZooming = false
-      // @ts-expect-error fixme ts strict error
+        if (touchTime && !e.touches?.length) {
-      if (touchTime && !e.touches?.length) {
+          if (new Date().getTime() - touchTime.getTime() > 600) {
-        if (new Date().getTime() - touchTime > 600) {
+            if (e.target === app.canvasEl) {
-          if (e.target === app.canvasEl) {
+              app.canvasEl.dispatchEvent(
-            app.canvasEl.dispatchEvent(
+                new PointerEvent('pointerdown', {
-              new PointerEvent('pointerdown', {
+                  button: 2,
-                button: 2,
+                  clientX: e.changedTouches[0].clientX,
-                clientX: e.changedTouches[0].clientX,
+                  clientY: e.changedTouches[0].clientY
-                clientY: e.changedTouches[0].clientY
+                })
-              })
+              )
-            )
+              e.preventDefault()
-            e.preventDefault()
+            }
           }
+          touchTime = null
         }
-        touchTime = null
       }
-    })
+    )
 
-    // @ts-expect-error fixme ts strict error
+    app.canvasEl.parentElement?.addEventListener(
-    app.canvasEl.parentElement.addEventListener(
       'touchmove',
       (e) => {
         touchTime = null
-        // @ts-expect-error fixme ts strict error
         if (e.touches?.length === 2 && lastTouch && !e.ctrlKey && !e.shiftKey) {
           e.preventDefault() // Prevent browser from zooming when two textareas are touched
           app.canvas.pointer.isDown = false
@@ -100,7 +92,7 @@ app.registerExtension({
 
           const center = getMultiTouchCenter(e)
 
-          // @ts-expect-error fixme ts strict error
+          if (lastScale === null || touchDist === null) return
           let scale = (lastScale * newTouchDist) / touchDist
 
           const newX = (center.clientX - lastTouch.clientX) / scale
@@ -124,8 +116,7 @@ app.registerExtension({
 
           const newScale = app.canvas.ds.scale
 
-          // @ts-expect-error fixme ts strict error
+          const convertScaleToOffset = (scale: number) => [
-          const convertScaleToOffset = (scale) => [
             center.clientX / scale - app.canvas.ds.offset[0],
             center.clientY / scale - app.canvas.ds.offset[1]
           ]
@@ -147,22 +138,18 @@ app.registerExtension({
 })
 
 const processMouseDown = LGraphCanvas.prototype.processMouseDown
-LGraphCanvas.prototype.processMouseDown = function () {
+LGraphCanvas.prototype.processMouseDown = function (e: PointerEvent) {
-  // @ts-expect-error fixme ts strict error
   if (touchZooming || touchCount) {
     return
   }
   app.canvas.pointer.isDown = false // Prevent context menu from opening on second tap
-  // @ts-expect-error fixme ts strict error
+  return processMouseDown.apply(this, [e])
-  return processMouseDown.apply(this, arguments)
 }
 
 const processMouseMove = LGraphCanvas.prototype.processMouseMove
-LGraphCanvas.prototype.processMouseMove = function () {
+LGraphCanvas.prototype.processMouseMove = function (e: PointerEvent) {
-  // @ts-expect-error fixme ts strict error
   if (touchZooming || touchCount > 1) {
     return
   }
-  // @ts-expect-error fixme ts strict error
+  return processMouseMove.apply(this, [e])
-  return processMouseMove.apply(this, arguments)
 }