Skip to content

Commit 297aa88

Browse files
Add touch support for simulator inputs. (#69)
1 parent 0f900b1 commit 297aa88

File tree

2 files changed

+30
-10
lines changed

2 files changed

+30
-10
lines changed

src/board/buttons.ts

Lines changed: 15 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -8,7 +8,8 @@ export class Button {
88

99
private keyListener: (e: KeyboardEvent) => void;
1010
private mouseDownListener: (e: MouseEvent) => void;
11-
private mouseUpListener: (e: MouseEvent) => void;
11+
private touchStartListener: (e: TouchEvent) => void;
12+
private mouseUpTouchEndListener: (e: MouseEvent | TouchEvent) => void;
1213
private mouseLeaveListener: (e: MouseEvent) => void;
1314

1415
constructor(
@@ -39,10 +40,12 @@ export class Button {
3940

4041
this.mouseDownListener = (e) => {
4142
e.preventDefault();
42-
this._mouseDown = true;
43-
this.press();
43+
this.mouseDownTouchStartAction();
4444
};
45-
this.mouseUpListener = (e) => {
45+
this.touchStartListener = (e) => {
46+
this.mouseDownTouchStartAction();
47+
};
48+
this.mouseUpTouchEndListener = (e) => {
4649
e.preventDefault();
4750
if (this._mouseDown) {
4851
this._mouseDown = false;
@@ -57,7 +60,9 @@ export class Button {
5760
};
5861

5962
this.element.addEventListener("mousedown", this.mouseDownListener);
60-
this.element.addEventListener("mouseup", this.mouseUpListener);
63+
this.element.addEventListener("touchstart", this.touchStartListener);
64+
this.element.addEventListener("mouseup", this.mouseUpTouchEndListener);
65+
this.element.addEventListener("touchend", this.mouseUpTouchEndListener);
6166
this.element.addEventListener("keydown", this.keyListener);
6267
this.element.addEventListener("keyup", this.keyListener);
6368
this.element.addEventListener("mouseleave", this.mouseLeaveListener);
@@ -84,6 +89,11 @@ export class Button {
8489
this.render();
8590
}
8691

92+
private mouseDownTouchStartAction() {
93+
this._mouseDown = true;
94+
this.press();
95+
}
96+
8797
press() {
8898
this.setValueInternal(
8999
this.state.value === this.state.min ? this.state.max : this.state.min,

src/board/pins.ts

Lines changed: 15 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -7,7 +7,8 @@ export class Pin {
77

88
private keyListener: (e: KeyboardEvent) => void;
99
private mouseDownListener: (e: MouseEvent) => void;
10-
private mouseUpListener: (e: MouseEvent) => void;
10+
private touchStartListener: (e: TouchEvent) => void;
11+
private mouseUpTouchEndListener: (e: MouseEvent | TouchEvent) => void;
1112
private mouseLeaveListener: (e: MouseEvent) => void;
1213

1314
constructor(
@@ -39,10 +40,12 @@ export class Pin {
3940

4041
this.mouseDownListener = (e) => {
4142
e.preventDefault();
42-
this._mouseDown = true;
43-
this.press();
43+
this.mouseDownTouchStartAction();
4444
};
45-
this.mouseUpListener = (e) => {
45+
this.touchStartListener = (e) => {
46+
this.mouseDownTouchStartAction();
47+
};
48+
this.mouseUpTouchEndListener = (e) => {
4649
e.preventDefault();
4750
if (this._mouseDown) {
4851
this._mouseDown = false;
@@ -59,7 +62,9 @@ export class Pin {
5962
if (this.ui) {
6063
const { element } = this.ui;
6164
element.addEventListener("mousedown", this.mouseDownListener);
62-
element.addEventListener("mouseup", this.mouseUpListener);
65+
element.addEventListener("touchstart", this.touchStartListener);
66+
element.addEventListener("mouseup", this.mouseUpTouchEndListener);
67+
element.addEventListener("touchend", this.mouseUpTouchEndListener);
6368
element.addEventListener("keydown", this.keyListener);
6469
element.addEventListener("keyup", this.keyListener);
6570
element.addEventListener("mouseleave", this.mouseLeaveListener);
@@ -80,6 +85,11 @@ export class Pin {
8085
this.render();
8186
}
8287

88+
private mouseDownTouchStartAction() {
89+
this._mouseDown = true;
90+
this.press();
91+
}
92+
8393
press() {
8494
this.setValueInternal(
8595
this.state.value === this.state.min ? this.state.max : this.state.min,

0 commit comments

Comments
 (0)