diff --git a/src/extensions/core/simpleTouchSupport.ts b/src/extensions/core/simpleTouchSupport.ts index fc7e956f0..aebf78254 100644 --- a/src/extensions/core/simpleTouchSupport.ts +++ b/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 +let touchZooming = false let touchCount = 0 app.registerExtension({ name: 'Comfy.SimpleTouchSupport', setup() { - // @ts-expect-error fixme ts strict error - let touchDist - // @ts-expect-error fixme ts strict error - let touchTime - // @ts-expect-error fixme ts strict error - let lastTouch - // @ts-expect-error fixme ts strict error - let lastScale - // @ts-expect-error fixme ts strict error - function getMultiTouchPos(e) { + let touchDist: number | null = null + let touchTime: Date | null = null + let lastTouch: { clientX: number; clientY: number } | null = null + let lastScale: number | null = null + function getMultiTouchPos(e: TouchEvent) { 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) { + function getMultiTouchCenter(e: TouchEvent) { 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('touchend', (e: TouchEvent) => { - touchCount-- + app.canvasEl.parentElement?.addEventListener( + 'touchend', + (e: TouchEvent) => { + touchCount -= e.changedTouches.length - if (e.touches?.length !== 1) touchZooming = false - // @ts-expect-error fixme ts strict error - if (touchTime && !e.touches?.length) { - if (new Date().getTime() - touchTime > 600) { - if (e.target === app.canvasEl) { - app.canvasEl.dispatchEvent( - new PointerEvent('pointerdown', { - button: 2, - clientX: e.changedTouches[0].clientX, - clientY: e.changedTouches[0].clientY - }) - ) - e.preventDefault() + if (e.touches?.length !== 1) touchZooming = false + if (touchTime && !e.touches?.length) { + if (new Date().getTime() - touchTime.getTime() > 600) { + if (e.target === app.canvasEl) { + app.canvasEl.dispatchEvent( + new PointerEvent('pointerdown', { + button: 2, + clientX: e.changedTouches[0].clientX, + clientY: e.changedTouches[0].clientY + }) + ) + 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) => [ + const convertScaleToOffset = (scale: number) => [ 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 () { - // @ts-expect-error fixme ts strict error +LGraphCanvas.prototype.processMouseDown = function (e: PointerEvent) { 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, arguments) + return processMouseDown.apply(this, [e]) } const processMouseMove = LGraphCanvas.prototype.processMouseMove -LGraphCanvas.prototype.processMouseMove = function () { - // @ts-expect-error fixme ts strict error +LGraphCanvas.prototype.processMouseMove = function (e: PointerEvent) { if (touchZooming || touchCount > 1) { return } - // @ts-expect-error fixme ts strict error - return processMouseMove.apply(this, arguments) + return processMouseMove.apply(this, [e]) }