Skip to content

Commit e6f533f

Browse files
authored
fix: use "tap" for mobile compatibility (#117)
This PR registers "tap" event handlers in addition to the "click" handlers already installed. This makes the simulator register clicks correctly on mobile devices.
1 parent 2cf3a99 commit e6f533f

File tree

6 files changed

+20
-13
lines changed

6 files changed

+20
-13
lines changed

package.json

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -33,6 +33,7 @@
3333
"scripts": {
3434
"test": "jest",
3535
"start": "webpack serve --open --config webpack.dev.js",
36+
"start-host": "webpack serve --config webpack.dev.js --host 0.0.0.0",
3637
"build": "webpack --config webpack.prod.js",
3738
"format": "prettier . --write",
3839
"lint": "prettier . --check && eslint src/"

src/graphics/viewport.ts

Lines changed: 6 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
import { Graphics, EventSystem } from "pixi.js";
1+
import { Graphics, EventSystem, FederatedPointerEvent } from "pixi.js";
22
import * as pixi_viewport from "pixi-viewport";
33
import { deselectElement } from "../types/viewportManager";
44

@@ -47,11 +47,14 @@ export class Viewport extends pixi_viewport.Viewport {
4747
});
4848

4949
// Only deselect if it's a genuine click, not a drag
50-
this.on("click", (event) => {
50+
const onClick = (event: FederatedPointerEvent) => {
5151
if (!this.isDragging && event.target === this) {
5252
deselectElement();
5353
}
54-
});
54+
};
55+
this.on("click", onClick, this);
56+
// NOTE: this is "click" for mobile devices
57+
this.on("tap", onClick, this);
5558
}
5659

5760
clear() {

src/index.ejs

Lines changed: 6 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -21,12 +21,12 @@
2121
<div class="wheel-container">
2222
<div class="wheel-label">Speed</div>
2323
<div class="circular-slider">
24-
<input
25-
type="range"
26-
id="speed-wheel"
27-
min="0.5"
28-
max="4"
29-
step="0.1"
24+
<input
25+
type="range"
26+
id="speed-wheel"
27+
min="0.5"
28+
max="4"
29+
step="0.1"
3030
value="1"
3131
>
3232
</div>

src/types/devices/device.ts

Lines changed: 3 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -92,6 +92,8 @@ export abstract class Device extends Sprite {
9292

9393
this.on("pointerdown", this.onPointerDown, this);
9494
this.on("click", this.onClick, this);
95+
// NOTE: this is "click" for mobile devices
96+
this.on("tap", this.onClick, this);
9597
}
9698

9799
// Function to add the ID label to the device
@@ -146,7 +148,7 @@ export abstract class Device extends Sprite {
146148
break;
147149
}
148150
default:
149-
console.warn("Packets type unrecognized");
151+
console.warn("Packet's type unrecognized");
150152
}
151153
}
152154

@@ -160,7 +162,6 @@ export abstract class Device extends Sprite {
160162
}
161163

162164
onPointerDown(event: FederatedPointerEvent): void {
163-
console.log("Entered onPointerDown");
164165
if (!Device.connectionTarget) {
165166
selectElement(this);
166167
}
@@ -177,8 +178,6 @@ export abstract class Device extends Sprite {
177178

178179
connectTo(adyacentId: DeviceId): boolean {
179180
// Connects both devices with an edge.
180-
// console.log("Entered connectTo");
181-
182181
const edgeId = this.viewgraph.addEdge(this.id, adyacentId);
183182
if (edgeId) {
184183
const adyacentDevice = this.viewgraph.getDevice(adyacentId);

src/types/edge.ts

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -42,6 +42,8 @@ export class Edge extends Graphics {
4242
this.interactive = true;
4343
this.cursor = "pointer";
4444
this.on("click", () => selectElement(this));
45+
// NOTE: this is "click" for mobile devices
46+
this.on("tap", () => selectElement(this));
4547
}
4648

4749
nodePosition(nodeId: DeviceId): Point | undefined {

src/types/packet.ts

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -56,6 +56,8 @@ export class Packet extends Graphics {
5656
this.interactive = true;
5757
this.cursor = "pointer";
5858
this.on("click", this.onClick, this);
59+
// NOTE: this is "click" for mobile devices
60+
this.on("tap", this.onClick, this);
5961
}
6062

6163
onClick(e: FederatedPointerEvent) {

0 commit comments

Comments
 (0)