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 enhancements.

Browse Source
This commit is contained in:
Jared Goodwin 2020-04-04 16:09:45 -07:00
parent e686d80bd6
commit 7b7aa3bfc9
4 changed files with 47 additions and 13 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
Server/wwwroot/css/remote-control.css
View File

@ -6,6 +6,7 @@
padding: 0;
-ms-touch-action: none;
touch-action: none;
overscroll-behavior-y: contain;
}
button {

25
Server/wwwroot/scripts/RemoteControl/UI.js
View File

@ -1,6 +1,7 @@
import { Remotely } from "./Main.js";
import { PopupMessage } from "../UI.js";
import { RemoteControlMode } from "../Enums/RemoteControlMode.js";
import { GetDistanceBetween } from "../Utilities.js";
export var AudioButton = document.getElementById("audioButton");
export var MenuButton = document.getElementById("menuButton");
export var MenuFrame = document.getElementById("menuFrame");
@ -44,6 +45,7 @@ var cancelNextViewerClick;
var isPinchZooming;
var startPinchPoint1;
var startPinchPoint2;
var startPinchDistance;
var isMenuButtonDragging;
var startMenuDraggingY;
var startLongPressTimeout;
@ -101,11 +103,11 @@ export function ApplyInputHandlers(sockets) {
uploadFiles(FileTransferInput.files);
});
FitToScreenButton.addEventListener("click", (ev) => {
var button = ev.currentTarget;
button.classList.toggle("toggled");
if (button.classList.contains("toggled")) {
FitToScreenButton.classList.toggle("toggled");
if (FitToScreenButton.classList.contains("toggled")) {
ScreenViewer.style.removeProperty("max-width");
ScreenViewer.style.removeProperty("max-height");
ScreenViewer.style.width = "100%";
}
else {
ScreenViewer.style.maxWidth = "unset";
@ -245,6 +247,7 @@ export function ApplyInputHandlers(sockets) {
if (currentTouchCount == 2) {
startPinchPoint1 = { X: e.touches[0].pageX, Y: e.touches[0].pageY, IsEmpty: false };
startPinchPoint2 = { X: e.touches[1].pageX, Y: e.touches[1].pageY, IsEmpty: false };
startPinchDistance = GetDistanceBetween(startPinchPoint1.X, startPinchPoint1.Y, startPinchPoint2.X, startPinchPoint2.Y);
}
isDragging = false;
KeyboardButton.removeAttribute("hidden");
@ -259,10 +262,20 @@ export function ApplyInputHandlers(sockets) {
var percentX = (e.touches[0].pageX - ScreenViewer.getBoundingClientRect().left) / ScreenViewer.clientWidth;
var percentY = (e.touches[0].pageY - ScreenViewer.getBoundingClientRect().top) / ScreenViewer.clientHeight;
if (e.touches.length == 2) {
var distance1 = Math.hypot(startPinchPoint1.X - e.touches[0].pageX, startPinchPoint1.Y - e.touches[0].pageY);
var distance2 = Math.hypot(startPinchPoint2.X - e.touches[1].pageX, startPinchPoint2.Y - e.touches[1].pageY);
if (distance1 > 5 || distance2 > 5) {
var pinchPoint1 = { X: e.touches[0].pageX, Y: e.touches[0].pageY, IsEmpty: false };
var pinchPoint2 = { X: e.touches[1].pageX, Y: e.touches[1].pageY, IsEmpty: false };
var pinchDistance = GetDistanceBetween(pinchPoint1.X, pinchPoint1.Y, pinchPoint2.X, pinchPoint2.Y);
if (Math.abs(pinchDistance - startPinchDistance) > 5) {
isPinchZooming = true;
if (FitToScreenButton.classList.contains("toggled")) {
FitToScreenButton.click();
}
var currentWidth = Number(ScreenViewer.style.width.slice(0, -1));
var newWidth = Math.max(100, currentWidth + (pinchDistance - startPinchDistance));
currentWidth = newWidth;
ScreenViewer.style.width = String(currentWidth) + "%";
startPinchDistance = pinchDistance;
// TODO: Scroll wrapper.
}
return;
}

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

File diff suppressed because one or more lines are too long

32
Server/wwwroot/scripts/RemoteControl/UI.ts
View File

@ -3,6 +3,7 @@ import { Remotely } from "./Main.js";
import { PopupMessage } from "../UI.js";
import { RemoteControlMode } from "../Enums/RemoteControlMode.js";
import { Point } from "../Models/Point.js";
import { GetDistanceBetween } from "../Utilities.js";
export var AudioButton = document.getElementById("audioButton") as HTMLButtonElement;
export var MenuButton = document.getElementById("menuButton") as HTMLButtonElement;
@ -48,6 +49,7 @@ var cancelNextViewerClick: boolean;
var isPinchZooming: boolean;
var startPinchPoint1: Point;
var startPinchPoint2: Point;
var startPinchDistance: number;
var isMenuButtonDragging: boolean;
var startMenuDraggingY: number;
var startLongPressTimeout: number;
@ -106,11 +108,11 @@ export function ApplyInputHandlers(sockets: RCBrowserSockets) {
uploadFiles(FileTransferInput.files);
});
FitToScreenButton.addEventListener("click", (ev) => {
var button = ev.currentTarget as HTMLButtonElement;
button.classList.toggle("toggled");
if (button.classList.contains("toggled")) {
FitToScreenButton.classList.toggle("toggled");
if (FitToScreenButton.classList.contains("toggled")) {
ScreenViewer.style.removeProperty("max-width");
ScreenViewer.style.removeProperty("max-height");
ScreenViewer.style.width = "100%";
}
else {
ScreenViewer.style.maxWidth = "unset";
@ -254,6 +256,10 @@ export function ApplyInputHandlers(sockets: RCBrowserSockets) {
if (currentTouchCount == 2) {
startPinchPoint1 = { X: e.touches[0].pageX, Y: e.touches[0].pageY, IsEmpty: false };
startPinchPoint2 = { X: e.touches[1].pageX, Y: e.touches[1].pageY, IsEmpty: false };
startPinchDistance = GetDistanceBetween(startPinchPoint1.X,
startPinchPoint1.Y,
startPinchPoint2.X,
startPinchPoint2.Y);
}
isDragging = false;
KeyboardButton.removeAttribute("hidden");
@ -272,10 +278,24 @@ export function ApplyInputHandlers(sockets: RCBrowserSockets) {
var percentY = (e.touches[0].pageY - ScreenViewer.getBoundingClientRect().top) / ScreenViewer.clientHeight;
if (e.touches.length == 2) {
var distance1 = Math.hypot(startPinchPoint1.X - e.touches[0].pageX, startPinchPoint1.Y - e.touches[0].pageY);
var distance2 = Math.hypot(startPinchPoint2.X - e.touches[1].pageX, startPinchPoint2.Y - e.touches[1].pageY);
if (distance1 > 5 || distance2 > 5) {
var pinchPoint1 = { X: e.touches[0].pageX, Y: e.touches[0].pageY, IsEmpty: false };
var pinchPoint2 = { X: e.touches[1].pageX, Y: e.touches[1].pageY, IsEmpty: false };
var pinchDistance = GetDistanceBetween(pinchPoint1.X,
pinchPoint1.Y,
pinchPoint2.X,
pinchPoint2.Y);
if (Math.abs(pinchDistance - startPinchDistance) > 5) {
isPinchZooming = true;
if (FitToScreenButton.classList.contains("toggled")) {
FitToScreenButton.click();
}
var currentWidth = Number(ScreenViewer.style.width.slice(0, -1));
var newWidth = Math.max(100, currentWidth + (pinchDistance - startPinchDistance));
currentWidth = newWidth;
ScreenViewer.style.width = String(currentWidth) + "%";
startPinchDistance = pinchDistance;
// TODO: Scroll wrapper.
}
return;
}