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.

package.json

@@ -33,6 +33,7 @@
   "scripts": {
     "test": "jest",
     "start": "webpack serve --open --config webpack.dev.js",
+    "start-host": "webpack serve --config webpack.dev.js --host 0.0.0.0",
     "build": "webpack --config webpack.prod.js",
     "format": "prettier . --write",
     "lint": "prettier . --check && eslint src/"

src/graphics/viewport.ts

@@ -1,4 +1,4 @@
-import { Graphics, EventSystem } from "pixi.js";
+import { Graphics, EventSystem, FederatedPointerEvent } from "pixi.js";
 import * as pixi_viewport from "pixi-viewport";
 import { deselectElement } from "../types/viewportManager";
 
@@ -47,11 +47,14 @@ export class Viewport extends pixi_viewport.Viewport {
     });
 
     // Only deselect if it's a genuine click, not a drag
-    this.on("click", (event) => {
+    const onClick = (event: FederatedPointerEvent) => {
       if (!this.isDragging && event.target === this) {
         deselectElement();
       }
-    });
+    };
+    this.on("click", onClick, this);
+    // NOTE: this is "click" for mobile devices
+    this.on("tap", onClick, this);
   }
 
   clear() {

src/index.ejs

@@ -21,12 +21,12 @@
         <div class="wheel-container">
           <div class="wheel-label">Speed</div>
           <div class="circular-slider">
-            <input 
-              type="range" 
-              id="speed-wheel" 
-              min="0.5" 
-              max="4" 
-              step="0.1" 
+            <input
+              type="range"
+              id="speed-wheel"
+              min="0.5"
+              max="4"
+              step="0.1"
               value="1"
             >
           </div>

src/types/devices/device.ts

@@ -92,6 +92,8 @@ export abstract class Device extends Sprite {
 
     this.on("pointerdown", this.onPointerDown, this);
     this.on("click", this.onClick, this);
+    // NOTE: this is "click" for mobile devices
+    this.on("tap", this.onClick, this);
   }
 
   // Function to add the ID label to the device
@@ -146,7 +148,7 @@ export abstract class Device extends Sprite {
         break;
       }
       default:
-        console.warn("Packet’s type unrecognized");
+        console.warn("Packet's type unrecognized");
     }
   }
 
@@ -160,7 +162,6 @@ export abstract class Device extends Sprite {
   }
 
   onPointerDown(event: FederatedPointerEvent): void {
-    console.log("Entered onPointerDown");
     if (!Device.connectionTarget) {
       selectElement(this);
     }
@@ -177,8 +178,6 @@ export abstract class Device extends Sprite {
 
   connectTo(adyacentId: DeviceId): boolean {
     // Connects both devices with an edge.
-    // console.log("Entered connectTo");
-
     const edgeId = this.viewgraph.addEdge(this.id, adyacentId);
     if (edgeId) {
       const adyacentDevice = this.viewgraph.getDevice(adyacentId);

src/types/edge.ts

@@ -42,6 +42,8 @@ export class Edge extends Graphics {
     this.interactive = true;
     this.cursor = "pointer";
     this.on("click", () => selectElement(this));
+    // NOTE: this is "click" for mobile devices
+    this.on("tap", () => selectElement(this));
   }
 
   nodePosition(nodeId: DeviceId): Point | undefined {

src/types/packet.ts

@@ -56,6 +56,8 @@ export class Packet extends Graphics {
     this.interactive = true;
     this.cursor = "pointer";
     this.on("click", this.onClick, this);
+    // NOTE: this is "click" for mobile devices
+    this.on("tap", this.onClick, this);
   }
 
   onClick(e: FederatedPointerEvent) {