mirrors/Remotely
3
0
Fork 0
mirror of https://github.com/immense/Remotely.git synced 2025-10-26 11:27:15 +00:00
Code Issues Packages Projects Releases Wiki Activity

Touch input fixes.

Browse Source
This commit is contained in:
Jared Goodwin 2019-03-21 07:06:50 -07:00
parent d67230d185
commit aa04a00c9f
5 changed files with 50 additions and 25 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
Remotely_Server/wwwroot/css/osk.css
View File

@ -1,14 +1,16 @@
.osk-wrapper {
position: fixed;;
position: fixed;
top: calc(100% + 250px);
left: 50%;
transform:translate(-50%, -100%);
transform: translate(-50%, -100%);
background-color: rgb(30, 30, 30);
padding: 5px 20px 20px 20px;
border-radius: 30px;
transition: .5s top;
white-space: nowrap;
z-index: 1;
-ms-touch-action: manipulation;
touch-action: manipulation;
}
.osk-wrapper.open {
top: 100%;

3
Remotely_Server/wwwroot/css/remote-control.css
View File

@ -117,7 +117,8 @@ button[disabled] {
max-width: 99vw;
max-height: 99vh;
z-index: 1;
touch-action: double-tap-zoom;
-ms-touch-action: manipulation;
touch-action: manipulation;
}
#connectBox {

31
Remotely_Server/wwwroot/scripts/RemoteControl/UI.js
View File

@ -21,6 +21,8 @@ var isDragging;
var currentPointerDevice;
var currentTouchCount;
var rightClickOpen;
var longPressTimer;
var cancelNextClick;
export function ApplyInputHandlers(sockets) {
document.querySelector("#menuButton").addEventListener("click", (ev) => {
HorizontalBars.forEach(x => {
@ -123,7 +125,6 @@ export function ApplyInputHandlers(sockets) {
sockets.SendMouseMove(percentX, percentY);
});
ScreenViewer.addEventListener("mousedown", function (e) {
currentPointerDevice = "Mouse";
if (e.button != 0 && e.button != 2) {
return;
}
@ -133,7 +134,6 @@ export function ApplyInputHandlers(sockets) {
sockets.SendMouseDown(e.button, percentX, percentY);
});
ScreenViewer.addEventListener("mouseup", function (e) {
currentPointerDevice = "Mouse";
if (e.button != 0 && e.button != 2) {
return;
}
@ -143,6 +143,10 @@ export function ApplyInputHandlers(sockets) {
sockets.SendMouseUp(e.button, percentX, percentY);
});
ScreenViewer.addEventListener("click", function (e) {
if (cancelNextClick) {
cancelNextClick = false;
return;
}
if (currentPointerDevice == "Mouse") {
e.preventDefault();
e.stopPropagation();
@ -153,6 +157,12 @@ export function ApplyInputHandlers(sockets) {
sockets.SendTap(percentX, percentY);
}
});
ScreenViewer.addEventListener("dblclick", function (e) {
var percentX = e.offsetX / ScreenViewer.clientWidth;
var percentY = e.offsetY / ScreenViewer.clientHeight;
sockets.SendMouseDown(2, percentX, percentY);
sockets.SendMouseUp(2, percentX, percentY);
});
ScreenViewer.addEventListener("contextmenu", (ev) => {
ev.preventDefault();
});
@ -162,6 +172,9 @@ export function ApplyInputHandlers(sockets) {
e.stopPropagation();
return;
}
if (e.touches.length > 1) {
cancelNextClick = true;
}
isDragging = false;
currentPointerDevice = "Touch";
currentTouchCount = e.touches.length;
@ -170,12 +183,6 @@ export function ApplyInputHandlers(sockets) {
if (focusedInput) {
focusedInput.blur();
}
if (e.touches.length > 2) {
var percentX = (e.touches[0].pageX - ScreenViewer.getBoundingClientRect().left) / ScreenViewer.clientWidth;
var percentY = (e.touches[0].pageY - ScreenViewer.getBoundingClientRect().top) / ScreenViewer.clientHeight;
sockets.SendMouseDown(2, percentX, percentY);
sockets.SendMouseUp(2, percentX, percentY);
}
});
ScreenViewer.addEventListener("touchmove", function (e) {
if (rightClickOpen) {
@ -193,7 +200,6 @@ export function ApplyInputHandlers(sockets) {
else if (isDragging) {
e.preventDefault();
e.stopPropagation();
sockets.SendMouseDown(0, percentX, percentY);
sockets.SendMouseMove(percentX, percentY);
}
});
@ -202,9 +208,14 @@ export function ApplyInputHandlers(sockets) {
currentTouchCount = e.touches.length;
if (e.touches.length == 1) {
isDragging = true;
var percentX = (e.touches[0].pageX - ScreenViewer.getBoundingClientRect().left) / ScreenViewer.clientWidth;
var percentY = (e.touches[0].pageY - ScreenViewer.getBoundingClientRect().top) / ScreenViewer.clientHeight;
sockets.SendMouseMove(percentX, percentY);
sockets.SendMouseDown(0, percentX, percentY);
return;
}
if (currentTouchCount == 0 && rightClickOpen) {
if (currentTouchCount == 0) {
cancelNextClick = false;
rightClickOpen = false;
}
if (isDragging) {

2
Remotely_Server/wwwroot/scripts/RemoteControl/UI.js.map
View File

File diff suppressed because one or more lines are too long

33
Remotely_Server/wwwroot/scripts/RemoteControl/UI.ts
View File

@ -25,6 +25,8 @@ var isDragging: boolean;
var currentPointerDevice: "Mouse" | "Touch";
var currentTouchCount: number;
var rightClickOpen: boolean;
var longPressTimer: number;
var cancelNextClick: boolean;
export function ApplyInputHandlers(sockets: RCBrowserSockets) {
document.querySelector("#menuButton").addEventListener("click", (ev) => {
@ -130,7 +132,6 @@ export function ApplyInputHandlers(sockets: RCBrowserSockets) {
sockets.SendMouseMove(percentX, percentY);
});
ScreenViewer.addEventListener("mousedown", function (e) {
currentPointerDevice = "Mouse";
if (e.button != 0 && e.button != 2) {
return;
}
@ -140,7 +141,6 @@ export function ApplyInputHandlers(sockets: RCBrowserSockets) {
sockets.SendMouseDown(e.button, percentX, percentY);
});
ScreenViewer.addEventListener("mouseup", function (e) {
currentPointerDevice = "Mouse";
if (e.button != 0 && e.button != 2) {
return;
}
@ -151,6 +151,10 @@ export function ApplyInputHandlers(sockets: RCBrowserSockets) {
});
ScreenViewer.addEventListener("click", function (e) {
if (cancelNextClick) {
cancelNextClick = false;
return;
}
if (currentPointerDevice == "Mouse") {
e.preventDefault();
e.stopPropagation();
@ -161,7 +165,12 @@ export function ApplyInputHandlers(sockets: RCBrowserSockets) {
sockets.SendTap(percentX, percentY);
}
});
ScreenViewer.addEventListener("dblclick", function (e) {
var percentX = e.offsetX / ScreenViewer.clientWidth;
var percentY = e.offsetY / ScreenViewer.clientHeight;
sockets.SendMouseDown(2, percentX, percentY);
sockets.SendMouseUp(2, percentX, percentY);
});
ScreenViewer.addEventListener("contextmenu", (ev) => {
ev.preventDefault();
});
@ -171,6 +180,9 @@ export function ApplyInputHandlers(sockets: RCBrowserSockets) {
e.stopPropagation();
return;
}
if (e.touches.length > 1) {
cancelNextClick = true;
}
isDragging = false;
currentPointerDevice = "Touch";
currentTouchCount = e.touches.length;
@ -179,12 +191,6 @@ export function ApplyInputHandlers(sockets: RCBrowserSockets) {
if (focusedInput) {
focusedInput.blur();
}
if (e.touches.length > 2) {
var percentX = (e.touches[0].pageX - ScreenViewer.getBoundingClientRect().left) / ScreenViewer.clientWidth;
var percentY = (e.touches[0].pageY - ScreenViewer.getBoundingClientRect().top) / ScreenViewer.clientHeight;
sockets.SendMouseDown(2, percentX, percentY);
sockets.SendMouseUp(2, percentX, percentY);
}
});
ScreenViewer.addEventListener("touchmove", function (e) {
@ -204,7 +210,6 @@ export function ApplyInputHandlers(sockets: RCBrowserSockets) {
else if (isDragging) {
e.preventDefault();
e.stopPropagation();
sockets.SendMouseDown(0, percentX, percentY);
sockets.SendMouseMove(percentX, percentY);
}
});
@ -214,13 +219,19 @@ export function ApplyInputHandlers(sockets: RCBrowserSockets) {
if (e.touches.length == 1) {
isDragging = true;
var percentX = (e.touches[0].pageX - ScreenViewer.getBoundingClientRect().left) / ScreenViewer.clientWidth;
var percentY = (e.touches[0].pageY - ScreenViewer.getBoundingClientRect().top) / ScreenViewer.clientHeight;
sockets.SendMouseMove(percentX, percentY);
sockets.SendMouseDown(0, percentX, percentY);
return;
}
if (currentTouchCount == 0 && rightClickOpen) {
if (currentTouchCount == 0) {
cancelNextClick = false;
rightClickOpen = false;
}
if (isDragging) {
var percentX = (e.changedTouches[0].pageX - ScreenViewer.getBoundingClientRect().left) / ScreenViewer.clientWidth;
var percentY = (e.changedTouches[0].pageY - ScreenViewer.getBoundingClientRect().top) / ScreenViewer.clientHeight;