comfyanonymous
9 months ago
4 changed files with 252 additions and 62 deletions
@ -0,0 +1,102 @@
|
||||
import { app } from "../../scripts/app.js"; |
||||
|
||||
let touchZooming; |
||||
let touchCount = 0; |
||||
|
||||
app.registerExtension({ |
||||
name: "Comfy.SimpleTouchSupport", |
||||
setup() { |
||||
let zoomPos; |
||||
let touchTime; |
||||
let lastTouch; |
||||
|
||||
function getMultiTouchPos(e) { |
||||
return Math.hypot(e.touches[0].clientX - e.touches[1].clientX, e.touches[0].clientY - e.touches[1].clientY); |
||||
} |
||||
|
||||
app.canvasEl.addEventListener( |
||||
"touchstart", |
||||
(e) => { |
||||
touchCount++; |
||||
lastTouch = null; |
||||
if (e.touches?.length === 1) { |
||||
// Store start time for press+hold for context menu
|
||||
touchTime = new Date(); |
||||
lastTouch = e.touches[0]; |
||||
} else { |
||||
touchTime = null; |
||||
if (e.touches?.length === 2) { |
||||
// Store center pos for zoom
|
||||
zoomPos = getMultiTouchPos(e); |
||||
app.canvas.pointer_is_down = false; |
||||
} |
||||
} |
||||
}, |
||||
true |
||||
); |
||||
|
||||
app.canvasEl.addEventListener("touchend", (e) => { |
||||
touchZooming = false; |
||||
touchCount = e.touches?.length ?? touchCount - 1; |
||||
if (touchTime && !e.touches?.length) { |
||||
if (new Date() - touchTime > 600) { |
||||
try { |
||||
// hack to get litegraph to use this event
|
||||
e.constructor = CustomEvent; |
||||
} catch (error) {} |
||||
e.clientX = lastTouch.clientX; |
||||
e.clientY = lastTouch.clientY; |
||||
|
||||
app.canvas.pointer_is_down = true; |
||||
app.canvas._mousedown_callback(e); |
||||
} |
||||
touchTime = null; |
||||
} |
||||
}); |
||||
|
||||
app.canvasEl.addEventListener( |
||||
"touchmove", |
||||
(e) => { |
||||
touchTime = null; |
||||
if (e.touches?.length === 2) { |
||||
app.canvas.pointer_is_down = false; |
||||
touchZooming = true; |
||||
LiteGraph.closeAllContextMenus(); |
||||
app.canvas.search_box?.close(); |
||||
const newZoomPos = getMultiTouchPos(e); |
||||
|
||||
const midX = (e.touches[0].clientX + e.touches[1].clientX) / 2; |
||||
const midY = (e.touches[0].clientY + e.touches[1].clientY) / 2; |
||||
|
||||
let scale = app.canvas.ds.scale; |
||||
const diff = zoomPos - newZoomPos; |
||||
if (diff > 0.5) { |
||||
scale *= 1 / 1.07; |
||||
} else if (diff < -0.5) { |
||||
scale *= 1.07; |
||||
} |
||||
app.canvas.ds.changeScale(scale, [midX, midY]); |
||||
app.canvas.setDirty(true, true); |
||||
zoomPos = newZoomPos; |
||||
} |
||||
}, |
||||
true |
||||
); |
||||
}, |
||||
}); |
||||
|
||||
const processMouseDown = LGraphCanvas.prototype.processMouseDown; |
||||
LGraphCanvas.prototype.processMouseDown = function (e) { |
||||
if (touchZooming || touchCount) { |
||||
return; |
||||
} |
||||
return processMouseDown.apply(this, arguments); |
||||
}; |
||||
|
||||
const processMouseMove = LGraphCanvas.prototype.processMouseMove; |
||||
LGraphCanvas.prototype.processMouseMove = function (e) { |
||||
if (touchZooming || touchCount > 1) { |
||||
return; |
||||
} |
||||
return processMouseMove.apply(this, arguments); |
||||
}; |
||||
Loading…
Reference in new issue