103 lines
2.5 KiB
JavaScript
103 lines
2.5 KiB
JavaScript
|
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);
|
||
|
|
};
|