Administrator/NanoKVM-USB-MIRROR
1
0
Fork 0
mirror of https://github.com/sipeed/NanoKVM-USB.git synced 2026-09-11 05:59:57 -05:00
Code Issues Packages Projects Releases Wiki Activity

fix: mouse position wrong after scaling

Browse Source
This commit is contained in:
Guoguo
2025-12-01 19:15:01 +08:00
parent 00bc1aa01c
commit 71d0823f67
2 changed files with 81 additions and 12 deletions
Download Patch File Download Diff File Expand all files Collapse all files

44
browser/src/components/mouse/absolute.tsx
View File

@@ -106,11 +106,47 @@ export const Absolute = () => {
}
async function send(event: MouseEvent, scroll: number = 0) {
const rect = canvas!.getBoundingClientRect();
const x = Math.abs(event.clientX - rect.left);
const y = Math.abs(event.clientY - rect.top);
const {x, y} = getCorrectedCoords(event.clientX, event.clientY);
await device.sendMouseAbsoluteData(keyRef.current, 1, 1, x, y, scroll);
}
await device.sendMouseAbsoluteData(keyRef.current, rect.width, rect.height, x, y, scroll);
function getCorrectedCoords(clientX: number, clientY: number) {
if (!canvas) {
return { x: 0, y: 0 };
}
const rect = canvas.getBoundingClientRect();
const videoElement = canvas as HTMLVideoElement;
if (!videoElement.videoWidth || !videoElement.videoHeight) {
const x = (clientX - rect.left) / rect.width;
const y = (clientY - rect.top) / rect.height;
return { x, y };
}
const videoRatio = videoElement.videoWidth / videoElement.videoHeight;
const elementRatio = rect.width / rect.height;
let renderedWidth = rect.width;
let renderedHeight = rect.height;
let offsetX = 0;
let offsetY = 0;
if (videoRatio > elementRatio) {
renderedHeight = rect.width / videoRatio;
offsetY = (rect.height - renderedHeight) / 2;
} else {
renderedWidth = rect.height * videoRatio;
offsetX = (rect.width - renderedWidth) / 2;
}
const x = (clientX - rect.left - offsetX) / renderedWidth;
const y = (clientY - rect.top - offsetY) / renderedHeight;
const finalX = Math.max(0, Math.min(1, x));
const finalY = Math.max(0, Math.min(1, y));
return { x: finalX, y: finalY };
}
return () => {

49
desktop/src/renderer/src/components/mouse/absolute.tsx
View File

@@ -105,21 +105,54 @@ export const Absolute = (): ReactElement => {
(keyRef.current.right ? 2 : 0) |
(keyRef.current.mid ? 4 : 0)
const rect = canvas!.getBoundingClientRect()
const x = Math.abs(event.clientX - rect.left)
const y = Math.abs(event.clientY - rect.top)
const {x, y} = getCorrectedCoords(event.clientX, event.clientY);
await window.electron.ipcRenderer.invoke(
IpcEvents.SEND_MOUSE_ABSOLUTE,
key,
rect.width,
rect.height,
x,
y,
scroll
1, 1, x, y, scroll
)
}
function getCorrectedCoords(clientX: number, clientY: number) {
if (!canvas) {
return { x: 0, y: 0 };
}
const rect = canvas.getBoundingClientRect();
const videoElement = canvas as HTMLVideoElement;
if (!videoElement.videoWidth || !videoElement.videoHeight) {
const x = (clientX - rect.left) / rect.width;
const y = (clientY - rect.top) / rect.height;
return { x, y };
}
const videoRatio = videoElement.videoWidth / videoElement.videoHeight;
const elementRatio = rect.width / rect.height;
let renderedWidth = rect.width;
let renderedHeight = rect.height;
let offsetX = 0;
let offsetY = 0;
if (videoRatio > elementRatio) {
renderedHeight = rect.width / videoRatio;
offsetY = (rect.height - renderedHeight) / 2;
} else {
renderedWidth = rect.height * videoRatio;
offsetX = (rect.width - renderedWidth) / 2;
}
const x = (clientX - rect.left - offsetX) / renderedWidth;
const y = (clientY - rect.top - offsetY) / renderedHeight;
const finalX = Math.max(0, Math.min(1, x));
const finalY = Math.max(0, Math.min(1, y));
return { x: finalX, y: finalY };
}
return (): void => {
canvas.removeEventListener('mousemove', handleMouseMove)
canvas.removeEventListener('mousedown', handleMouseDown)