Comfy-Org/ComfyUI_frontend
1
0
Fork 0
mirror of https://github.com/Comfy-Org/ComfyUI_frontend.git synced 2026-05-01 03:31:58 +00:00
Code Issues Packages Projects Releases Wiki Activity

Touch support bug fixes (#1527)

Browse Source 
* Improved touch support

* Fix touch support scaling error

* Fix touch scaling precision on all zoom levels

* Improved touch experiene, fixed zooming on textarea elements and fixed context menu.

* Minor bug fix
This commit is contained in:
Lasse Lauwerys
2024-11-13 16:14:11 +01:00
committed by GitHub
parent 7e0d1d441d
commit d838777e04
1 changed files with 32 additions and 41 deletions
Download Patch File Download Diff File Expand all files Collapse all files

73
src/extensions/core/simpleTouchSupport.ts
View File

@@ -8,7 +8,7 @@ let touchCount = 0
app.registerExtension({ app.registerExtension({
name: 'Comfy.SimpleTouchSupport', name: 'Comfy.SimpleTouchSupport',
setup() { setup() {
let zoomPos let touchDist
let touchTime let touchTime
let lastTouch let lastTouch
let lastScale let lastScale
@@ -26,7 +26,7 @@ app.registerExtension({
} }
} }
app.canvasEl.addEventListener( app.canvasEl.parentElement.addEventListener(
'touchstart', 'touchstart',
(e: TouchEvent) => { (e: TouchEvent) => {
touchCount++ touchCount++
@@ -43,7 +43,7 @@ app.registerExtension({
lastScale = app.canvas.ds.scale lastScale = app.canvas.ds.scale
lastTouch = getMultiTouchCenter(e) lastTouch = getMultiTouchCenter(e)
zoomPos = getMultiTouchPos(e) touchDist = getMultiTouchPos(e)
app.canvas.pointer_is_down = false app.canvas.pointer_is_down = false
} }
} }
@@ -51,56 +51,47 @@ app.registerExtension({
true true
) )
app.canvasEl.addEventListener('touchend', (e: TouchEvent) => { app.canvasEl.parentElement.addEventListener('touchend', (e: TouchEvent) => {
touchCount = e.touches?.length ?? touchCount - 1 touchCount--
if (e.touches?.length !== 1) touchZooming = false if (e.touches?.length !== 1) touchZooming = false
if (touchTime && !e.touches?.length) { if (touchTime && !e.touches?.length) {
if (new Date().getTime() - touchTime > 600) { if (new Date().getTime() - touchTime > 600) {
try { if (e.target === app.canvasEl) {
// hack to get litegraph to use this event app.canvasEl.dispatchEvent(
e.constructor = CustomEvent new PointerEvent('pointerdown', {
} catch (error) {} button: 2,
// @ts-expect-error clientX: e.changedTouches[0].clientX,
e.clientX = lastTouch.clientX clientY: e.changedTouches[0].clientY
// @ts-expect-error })
e.clientY = lastTouch.clientY )
e.preventDefault()
app.canvas.pointer_is_down = true }
// @ts-expect-error
app.canvas._mousedown_callback(e)
} }
touchTime = null touchTime = null
} }
}) })
app.canvasEl.addEventListener( app.canvasEl.parentElement.addEventListener(
'touchmove', 'touchmove',
(e) => { (e) => {
touchTime = null touchTime = null
if (e.touches?.length === 2) { if (e.touches?.length === 2 && lastTouch && !e.ctrlKey && !e.shiftKey) {
e.preventDefault() // Prevent browser from zooming when two textareas are touched
app.canvas.pointer_is_down = false app.canvas.pointer_is_down = false
touchZooming = true touchZooming = true
// @ts-expect-error
LiteGraph.closeAllContextMenus() LiteGraph.closeAllContextMenus(window)
// @ts-expect-error // @ts-expect-error
app.canvas.search_box?.close() app.canvas.search_box?.close()
const newZoomPos = getMultiTouchPos(e) const newTouchDist = getMultiTouchPos(e)
const center = getMultiTouchCenter(e) const center = getMultiTouchCenter(e)
let scale = app.canvas.ds.scale let scale = (lastScale * newTouchDist) / touchDist
const diff = zoomPos - newZoomPos
scale = lastScale - diff / 100 const newX = (center.clientX - lastTouch.clientX) / scale
const newY = (center.clientY - lastTouch.clientY) / scale
const newX = ((center.clientX - lastTouch.clientX) * 1) / scale
const newY = ((center.clientY - lastTouch.clientY) * 1) / scale
const convertCanvasToOffset = (pos, scale) => [
pos[0] / scale - app.canvas.ds.offset[0],
pos[1] / scale - app.canvas.ds.offset[1]
]
// Code from LiteGraph // Code from LiteGraph
if (scale < app.canvas.ds.min_scale) { if (scale < app.canvas.ds.min_scale) {
@@ -113,20 +104,19 @@ app.registerExtension({
app.canvas.ds.scale = scale app.canvas.ds.scale = scale
// Code from LiteGraph
if (Math.abs(app.canvas.ds.scale - 1) < 0.01) { if (Math.abs(app.canvas.ds.scale - 1) < 0.01) {
app.canvas.ds.scale = 1 app.canvas.ds.scale = 1
} }
const newScale = app.canvas.ds.scale const newScale = app.canvas.ds.scale
var oldCenter = convertCanvasToOffset( const convertScaleToOffset = (scale) => [
[center.clientX, center.clientY], center.clientX / scale - app.canvas.ds.offset[0],
oldScale center.clientY / scale - app.canvas.ds.offset[1]
) ]
var newCenter = convertCanvasToOffset( var oldCenter = convertScaleToOffset(oldScale)
[center.clientX, center.clientY], var newCenter = convertScaleToOffset(newScale)
newScale
)
app.canvas.ds.offset[0] += newX + newCenter[0] - oldCenter[0] app.canvas.ds.offset[0] += newX + newCenter[0] - oldCenter[0]
app.canvas.ds.offset[1] += newY + newCenter[1] - oldCenter[1] app.canvas.ds.offset[1] += newY + newCenter[1] - oldCenter[1]
@@ -147,6 +137,7 @@ LGraphCanvas.prototype.processMouseDown = function (e) {
if (touchZooming || touchCount) { if (touchZooming || touchCount) {
return return
} }
app.canvas.pointer_is_down = false // Prevent context menu from opening on second tap
return processMouseDown.apply(this, arguments) return processMouseDown.apply(this, arguments)
} }