Apple-2-Tools
/
apple2js
mirror of https://github.com/whscullin/apple2js.git
1
0
Fork 0
Code Issues Projects Releases Wiki Activity

Add touch screen handling (#113) 

* Add touch screen handling

* Feedback
This commit is contained in:
Will Scullin 2022-05-13 06:55:03 -07:00 committed by GitHub
parent 26796900a3
commit c648735b8a
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
3 changed files with 79 additions and 17 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
css/apple2.css
View File

@ -217,6 +217,8 @@ canvas {
image-rendering: optimizeSpeed;
width: 592px;
height: 416px;
touch-action: manipulation;
user-select: none;
}
#screen.mouseMode {

3
index.html
View File

@ -1,6 +1,9 @@
<!DOCTYPE html>
<head>
<title>PreApple II</title>
<meta name="viewport" content="width=640, user-scalable=no" />
<meta name="apple-mobile-web-app-capable" content="yes">
<link rel="stylesheet" type="text/css" href="css/apple2.css" />
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.0.2/css/all.css" />
</head>

91
js/ui/mouse.ts
View File

@ -1,30 +1,87 @@
import type Mouse from '../cards/mouse';
import { enableMouseMode } from './joystick';
type TouchEventWithTarget = TouchEvent & { target: HTMLCanvasElement };
export class MouseUI {
private mouse: Mouse;
constructor(private canvas: HTMLCanvasElement) {
this.canvas.addEventListener(
'mousemove',
(event: MouseEvent & { target: HTMLCanvasElement} ) => {
const { offsetX, offsetY, target } = event;
this.mouse.setMouseXY(
offsetX,
offsetY,
target.clientWidth,
target.clientHeight
);
const updateTouchXY = (event: TouchEventWithTarget) => {
const { targetTouches, target } = event;
if (targetTouches.length < 1) {
return;
}
);
const rect = target.getBoundingClientRect();
const leftPad = (rect.width - 560) / 2 + rect.left;
const topPad = (rect.height - 384) / 2 + rect.top;
const { clientX, clientY } = targetTouches[0];
const xPos = clientX - leftPad;
const yPos = clientY - topPad;
this.mouse.setMouseXY(
Math.max(Math.min(xPos, 559), 0),
Math.max(Math.min(yPos, 383), 0),
560,
384,
);
};
this.canvas.addEventListener('mousedown', () => {
this.mouse.setMouseDown(true);
});
if ('ontouchstart' in window) {
this.canvas.addEventListener(
'touchmove',
(event: TouchEventWithTarget) => {
updateTouchXY(event);
}
);
this.canvas.addEventListener('mouseup', () => {
this.mouse.setMouseDown(false);
});
this.canvas.addEventListener(
'touchstart',
(event: TouchEventWithTarget) => {
updateTouchXY(event);
// Make sure the mouse down is processed in a different
// pass as the move, so that a simple tap isn't treated like
// a drag.
setTimeout(() => this.mouse.setMouseDown(true), 100);
}
);
this.canvas.addEventListener(
'touchend',
(event: TouchEventWithTarget) => {
updateTouchXY(event);
this.mouse.setMouseDown(false);
}
);
this.canvas.addEventListener(
'touchcancel',
(event: TouchEventWithTarget) => {
updateTouchXY(event);
this.mouse.setMouseDown(false);
}
);
} else {
this.canvas.addEventListener(
'mousemove',
(event: MouseEvent & { target: HTMLCanvasElement} ) => {
const { offsetX, offsetY, target } = event;
this.mouse.setMouseXY(
offsetX,
offsetY,
target.clientWidth,
target.clientHeight
);
}
);
this.canvas.addEventListener('mousedown', () => {
this.mouse.setMouseDown(true);
});
this.canvas.addEventListener('mouseup', () => {
this.mouse.setMouseDown(false);
});
}
}
setMouse = (mouse: Mouse) => {