mirror of
https://github.com/mofeng-git/One-KVM.git
synced 2025-12-13 01:30:31 +08:00
315 lines
10 KiB
JavaScript
315 lines
10 KiB
JavaScript
/*****************************************************************************
|
||
# #
|
||
# KVMD - The main Pi-KVM daemon. #
|
||
# #
|
||
# Copyright (C) 2018-2021 Maxim Devaev <mdevaev@gmail.com> #
|
||
# #
|
||
# This program is free software: you can redistribute it and/or modify #
|
||
# it under the terms of the GNU General Public License as published by #
|
||
# the Free Software Foundation, either version 3 of the License, or #
|
||
# (at your option) any later version. #
|
||
# #
|
||
# This program is distributed in the hope that it will be useful, #
|
||
# but WITHOUT ANY WARRANTY; without even the implied warranty of #
|
||
# MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the #
|
||
# GNU General Public License for more details. #
|
||
# #
|
||
# You should have received a copy of the GNU General Public License #
|
||
# along with this program. If not, see <https://www.gnu.org/licenses/>. #
|
||
# #
|
||
*****************************************************************************/
|
||
|
||
|
||
"use strict";
|
||
|
||
|
||
import {tools, $} from "../tools.js";
|
||
import {Keypad} from "../keypad.js";
|
||
|
||
|
||
export function Mouse(record_callback) {
|
||
var self = this;
|
||
|
||
/************************************************************************/
|
||
|
||
var __record_callback = record_callback;
|
||
|
||
var __ws = null;
|
||
var __online = true;
|
||
var __absolute = true;
|
||
|
||
var __keypad = null;
|
||
|
||
var __current_pos = {x: 0, y: 0};
|
||
var __sent_pos = {x: 0, y: 0};
|
||
var __wheel_delta = {x: 0, y: 0};
|
||
var __relative_deltas = [];
|
||
|
||
var __stream_hovered = false;
|
||
|
||
var __init__ = function() {
|
||
__keypad = new Keypad("div#stream-mouse-buttons", __sendButton);
|
||
|
||
$("hid-mouse-led").title = "Mouse free";
|
||
|
||
document.onpointerlockchange = __relativeCapturedHandler; // Only for relative
|
||
document.onpointerlockerror = __relativeCapturedHandler;
|
||
$("stream-box").onmouseenter = () => __streamHoveredHandler(true);
|
||
$("stream-box").onmouseleave = () => __streamHoveredHandler(false);
|
||
$("stream-box").onmousedown = (event) => __streamButtonHandler(event, true);
|
||
$("stream-box").onmouseup = (event) => __streamButtonHandler(event, false);
|
||
$("stream-box").oncontextmenu = (event) => event.preventDefault();
|
||
$("stream-box").onmousemove = __streamMoveHandler;
|
||
$("stream-box").onwheel = __streamWheelHandler;
|
||
$("stream-box").ontouchstart = (event) => __streamTouchMoveHandler(event);
|
||
|
||
setInterval(__sendMove, 100);
|
||
};
|
||
|
||
/************************************************************************/
|
||
|
||
self.setSocket = function(ws) {
|
||
__ws = ws;
|
||
$("stream-box").classList.toggle("stream-box-mouse-enabled", ws);
|
||
if (!__absolute && __isRelativeCaptured()) {
|
||
document.exitPointerLock();
|
||
}
|
||
__updateOnlineLeds();
|
||
};
|
||
|
||
self.setState = function(state, hid_online, hid_busy) {
|
||
if (!hid_online) {
|
||
__online = null;
|
||
} else {
|
||
__online = (state.online && !hid_busy);
|
||
}
|
||
if (!__absolute && state.absolute && __isRelativeCaptured()) {
|
||
document.exitPointerLock();
|
||
}
|
||
if (__absolute && !state.absolute) {
|
||
__relative_deltas = [];
|
||
}
|
||
__absolute = state.absolute;
|
||
__updateOnlineLeds();
|
||
};
|
||
|
||
self.releaseAll = function() {
|
||
__keypad.releaseAll();
|
||
};
|
||
|
||
var __streamHoveredHandler = function(hovered) {
|
||
if (__absolute) {
|
||
__stream_hovered = hovered;
|
||
__updateOnlineLeds();
|
||
}
|
||
};
|
||
|
||
var __updateOnlineLeds = function() {
|
||
let is_captured;
|
||
if (__absolute) {
|
||
is_captured = (__stream_hovered || tools.browser.is_ios);
|
||
} else {
|
||
is_captured = __isRelativeCaptured();
|
||
}
|
||
let led = "led-gray";
|
||
let title = "Mouse free";
|
||
|
||
if (__ws) {
|
||
if (__online === null) {
|
||
led = "led-red";
|
||
title = (is_captured ? "Mouse captured, HID offline" : "Mouse free, HID offline");
|
||
} else if (__online) {
|
||
if (is_captured) {
|
||
led = "led-green";
|
||
title = "Mouse captured";
|
||
}
|
||
} else {
|
||
led = "led-yellow";
|
||
title = (is_captured ? "Mouse captured, inactive/busy" : "Mouse free, inactive/busy");
|
||
}
|
||
} else {
|
||
if (is_captured) {
|
||
title = "Mouse captured, Pi-KVM offline";
|
||
}
|
||
}
|
||
$("hid-mouse-led").className = led;
|
||
$("hid-mouse-led").title = title;
|
||
};
|
||
|
||
var __isRelativeCaptured = function() {
|
||
return (document.pointerLockElement === $("stream-box"));
|
||
};
|
||
|
||
var __isRelativeSquashed = function() {
|
||
return $("hid-mouse-squash-switch").checked;
|
||
};
|
||
|
||
var __relativeCapturedHandler = function() {
|
||
tools.info("Relative mouse", (__isRelativeCaptured() ? "captured" : "released"), "by pointer lock");
|
||
__updateOnlineLeds();
|
||
};
|
||
|
||
var __streamButtonHandler = function(event, state) {
|
||
// https://www.w3schools.com/jsref/event_button.asp
|
||
event.preventDefault();
|
||
if (__absolute || __isRelativeCaptured()) {
|
||
switch (event.button) {
|
||
case 0: __keypad.emit("left", state); break;
|
||
case 2: __keypad.emit("right", state); break;
|
||
case 1: __keypad.emit("middle", state); break;
|
||
case 3: __keypad.emit("up", state); break;
|
||
case 4: __keypad.emit("down", state); break;
|
||
}
|
||
} else if (!__absolute && !__isRelativeCaptured() && !state) {
|
||
$("stream-box").requestPointerLock();
|
||
}
|
||
};
|
||
|
||
var __streamTouchMoveHandler = function(event) {
|
||
event.preventDefault();
|
||
if (__absolute) {
|
||
if (event.touches[0].target && event.touches[0].target.getBoundingClientRect) {
|
||
let rect = event.touches[0].target.getBoundingClientRect();
|
||
__current_pos = {
|
||
x: Math.round(event.touches[0].clientX - rect.left),
|
||
y: Math.round(event.touches[0].clientY - rect.top),
|
||
};
|
||
__sendMove();
|
||
}
|
||
}
|
||
};
|
||
|
||
var __streamMoveHandler = function(event) {
|
||
if (__absolute) {
|
||
let rect = event.target.getBoundingClientRect();
|
||
__current_pos = {
|
||
x: Math.max(Math.round(event.clientX - rect.left), 0),
|
||
y: Math.max(Math.round(event.clientY - rect.top), 0),
|
||
};
|
||
} else if (__isRelativeCaptured()) {
|
||
let delta = {
|
||
x: Math.min(Math.max(-127, event.movementX), 127),
|
||
y: Math.min(Math.max(-127, event.movementY), 127),
|
||
};
|
||
if (__isRelativeSquashed()) {
|
||
__relative_deltas.push(delta);
|
||
} else {
|
||
tools.debug("Mouse: relative:", delta);
|
||
__sendEvent("mouse_relative", {"delta": delta});
|
||
}
|
||
}
|
||
};
|
||
|
||
var __sendButton = function(button, state) {
|
||
tools.debug("Mouse: button", (state ? "pressed:" : "released:"), button);
|
||
__sendMove();
|
||
__sendEvent("mouse_button", {"button": button, "state": state});
|
||
};
|
||
|
||
var __sendMove = function() {
|
||
if (__absolute) {
|
||
let pos = __current_pos;
|
||
if (pos.x !== __sent_pos.x || pos.y !== __sent_pos.y) {
|
||
let geo = __getVideoGeometry();
|
||
let to = {
|
||
"x": __translatePosition(pos.x, geo.x, geo.width, -32768, 32767),
|
||
"y": __translatePosition(pos.y, geo.y, geo.height, -32768, 32767),
|
||
};
|
||
tools.debug("Mouse: moved:", to);
|
||
__sendEvent("mouse_move", {"to": to});
|
||
__sent_pos = pos;
|
||
}
|
||
} else if (__relative_deltas.length) {
|
||
tools.debug("Mouse: relative:", __relative_deltas);
|
||
__sendEvent("mouse_relative", {"delta": __relative_deltas, "squash": true});
|
||
__relative_deltas = [];
|
||
}
|
||
};
|
||
|
||
var __getVideoGeometry = function() {
|
||
// Первоначально обновление геометрии считалось через ResizeObserver.
|
||
// Но оно не ловило некоторые события, например в последовательности:
|
||
// - Находять в HD переходим в фулскрин
|
||
// - Меняем разрешение на маленькое
|
||
// - Убираем фулскрин
|
||
// - Переходим в HD
|
||
// - Видим нарушение пропорций
|
||
// Так что теперь используются быстре рассчеты через offset*
|
||
// вместо getBoundingClientRect().
|
||
let el_image = $("stream-image");
|
||
let real_width = el_image.naturalWidth;
|
||
let real_height = el_image.naturalHeight;
|
||
let view_width = el_image.offsetWidth;
|
||
let view_height = el_image.offsetHeight;
|
||
let ratio = Math.min(view_width / real_width, view_height / real_height);
|
||
return {
|
||
"x": Math.round((view_width - ratio * real_width) / 2),
|
||
"y": Math.round((view_height - ratio * real_height) / 2),
|
||
"width": Math.round(ratio * real_width),
|
||
"height": Math.round(ratio * real_height),
|
||
};
|
||
};
|
||
|
||
var __translatePosition = function(x, a, b, c, d) {
|
||
let translated = Math.round((x - a) / b * (d - c) + c);
|
||
if (translated < c) {
|
||
return c;
|
||
} else if (translated > d) {
|
||
return d;
|
||
}
|
||
return translated;
|
||
};
|
||
|
||
var __streamWheelHandler = function(event) {
|
||
// https://learn.javascript.ru/mousewheel
|
||
// https://stackoverflow.com/a/24595588
|
||
if (event.preventDefault) {
|
||
event.preventDefault();
|
||
}
|
||
|
||
if (!__absolute && !__isRelativeCaptured()) {
|
||
return;
|
||
}
|
||
|
||
let delta = {x: 0, y: 0};
|
||
|
||
if (tools.browser.is_firefox && !tools.browser.is_mac) {
|
||
if (event.deltaX !== 0) {
|
||
delta.x = event.deltaX / Math.abs(event.deltaX) * (-5);
|
||
}
|
||
if (event.deltaY !== 0) {
|
||
delta.y = event.deltaY / Math.abs(event.deltaY) * (-5);
|
||
}
|
||
} else {
|
||
let factor = (tools.browser.is_mac ? 5 : 1);
|
||
|
||
__wheel_delta.x += event.deltaX * factor; // Horizontal scrolling
|
||
if (Math.abs(__wheel_delta.x) >= 100) {
|
||
delta.x = __wheel_delta.x / Math.abs(__wheel_delta.x) * (-5);
|
||
__wheel_delta.x = 0;
|
||
}
|
||
|
||
__wheel_delta.y += event.deltaY * factor; // Vertical scrolling
|
||
if (Math.abs(__wheel_delta.y) >= 100) {
|
||
delta.y = __wheel_delta.y / Math.abs(__wheel_delta.y) * (-5);
|
||
__wheel_delta.y = 0;
|
||
}
|
||
}
|
||
|
||
if (delta.x || delta.y) {
|
||
tools.debug("Mouse: scrolled:", delta);
|
||
__sendEvent("mouse_wheel", {"delta": delta});
|
||
}
|
||
};
|
||
|
||
var __sendEvent = function(event_type, event) {
|
||
event = {"event_type": event_type, "event": event};
|
||
if (__ws) {
|
||
__ws.send(JSON.stringify(event));
|
||
}
|
||
__record_callback(event);
|
||
};
|
||
|
||
__init__();
|
||
}
|