144 lines
3.8 KiB
JavaScript
144 lines
3.8 KiB
JavaScript
// When true, moving the mouse updates coords
|
|
const canvas = document.getElementById("canvas");
|
|
let isDragging = false;
|
|
let runUpdate = false;
|
|
let xLast = 0;
|
|
let yLast = 0;
|
|
let mod = 2;
|
|
let px = 0;
|
|
let py = 0;
|
|
let x1 = 0;
|
|
let y1 = 0;
|
|
let x2 = 0;
|
|
let y2 = 0;
|
|
let m = undefined; // slope value
|
|
|
|
|
|
canvas.addEventListener('touchstart', e => { onPress(e); });
|
|
canvas.addEventListener('mousedown', e => { onPress(e); });
|
|
canvas.addEventListener('touchmove', e => { onMoveing(e); });
|
|
canvas.addEventListener('mousemove', e => { onMoveing(e); });
|
|
canvas.addEventListener('touchend', e => { onRelease(e); });
|
|
canvas.addEventListener('mouseup', e => { onRelease(e); });
|
|
|
|
|
|
// Run update when true every 100 ms
|
|
setInterval(function () {
|
|
if (runUpdate) {
|
|
doAjax("/update-coords", "x=" + px + "&y=" + py, "move");
|
|
}
|
|
}, 100);
|
|
|
|
// Update mod
|
|
setInterval(function () {
|
|
if (runUpdate) {
|
|
mod += 1;
|
|
}
|
|
}, 250);
|
|
|
|
|
|
const onPress = (e) => {
|
|
isDragging = true;
|
|
runUpdate = true;
|
|
xLast = e.offsetX;
|
|
yLast = e.offsetY;
|
|
updateText(xLast, yLast);
|
|
}
|
|
|
|
|
|
const onMoveing = (e) => {
|
|
if (isDragging === true) {
|
|
x1 = xLast;
|
|
y1 = yLast;
|
|
|
|
if (e.type === 'mousemove') {
|
|
x2 = e.offsetX;
|
|
y2 = e.offsetY;
|
|
xLast = e.offsetX;
|
|
yLast = e.offsetY;
|
|
} else if (e.type === 'touchmove') {
|
|
x2 = parseInt(e.touches[0].clientX, 10);
|
|
y2 = parseInt(e.touches[0].clientY, 10);
|
|
xLast = parseInt(e.touches[0].clientX, 10);
|
|
yLast = parseInt(e.touches[0].clientY, 10);
|
|
}
|
|
|
|
// Calculate the delta of the points
|
|
if (x2 > x1) {
|
|
px = mod // Is growing
|
|
} else {
|
|
px = -mod // Is shrinking
|
|
}
|
|
|
|
if (y2 > y1) {
|
|
py = mod // Is growing
|
|
} else {
|
|
py = -mod // Is shrinking
|
|
}
|
|
|
|
m = (y2-y1)/(x2-x1)
|
|
if (m === undefined) {
|
|
py = 0;
|
|
} else if (!isFinite(m)) {
|
|
px = 0;
|
|
}
|
|
|
|
if ( (m > 0.05 && m <= 1) && (m > -0.05 && m >= -1) ) {
|
|
py = 0;
|
|
}
|
|
|
|
updateText(px, py);
|
|
}
|
|
}
|
|
|
|
|
|
const onRelease = (e) => {
|
|
if (isDragging === true) {
|
|
isDragging = false;
|
|
runUpdate = false;
|
|
mod = 3;
|
|
xLast = 0;
|
|
yLast = 0;
|
|
px = 0;
|
|
py = 0;
|
|
updateText(px, py);
|
|
}
|
|
}
|
|
|
|
|
|
const updateText = (x, y) => {
|
|
const coordsTxt = "X coords: " + x + ", Y coords: " + y;
|
|
document.getElementById("cordsText").innerText = coordsTxt;
|
|
}
|
|
|
|
|
|
|
|
// Click events
|
|
document.getElementById("singleClickBtn").addEventListener('mouseup', e => { onSingleClick(e); });
|
|
document.getElementById("singleClickBtn").addEventListener('touchend', e => { onSingleClick(e); });
|
|
document.getElementById("doubleClickBtn").addEventListener('mouseup', e => { onDoubleClick(e); });
|
|
document.getElementById("doubleClickBtn").addEventListener('touchend', e => { onDoubleClick(e); });
|
|
|
|
const onSingleClick = (e) => {
|
|
doAjax("/single-click", "ref=null", "singleClick");
|
|
}
|
|
|
|
const onDoubleClick = (e) => {
|
|
doAjax("/double-click", "ref=null", "doubleClick");
|
|
}
|
|
|
|
|
|
|
|
// Key input events
|
|
// document.getElementById("sendKeysField").addEventListener('input', e => { onSendKeys(e); });
|
|
// document.getElementById("sendKeysField").addEventListener('change', e => { onSendKeys(e); });
|
|
document.getElementById("sendKeysBtn").addEventListener('mouseup', e => { onSendKeys(e); });
|
|
document.getElementById("sendKeysBtn").addEventListener('touchend', e => { onSendKeys(e); });
|
|
|
|
const onSendKeys = (e) => {
|
|
let target = document.getElementById("sendKeysField");
|
|
const text = target.value;
|
|
doAjax("/send-key", "text=" + text, "sendKeys");
|
|
target.value = "";
|
|
}
|