#1240 - Fixes click events for touch devices

Details:
- Moves mouseIsOnNode, getQuadNodes and getNodeAtPosition from
bindEventHandlers to new private methods
- Tweaks mouse events forged from TouchCaptor to make them identifiable
- Updates createMouseListener so that it checks for node under the mouse
when the event comes from the TouchCaptor

Author: jacomyal

src/core/captors/touch.ts

@@ -13,6 +13,8 @@ const DRAG_TIMEOUT = 200;
 const TOUCH_INERTIA_RATIO = 3;
 const TOUCH_INERTIA_DURATION = 200;
 
+export type FakeSigmaMouseEvent = MouseEvent & { isFakeSigmaMouseEvent?: true };
+
 /**
  * Event types.
  */
@@ -79,6 +81,8 @@ export default class TouchCaptor extends Captor<TouchCaptorEvents> {
       ctrlKey: e.ctrlKey,
     });
 
+    (mouseEvent as FakeSigmaMouseEvent).isFakeSigmaMouseEvent = true;
+
     (emitter || this.container).dispatchEvent(mouseEvent);
   }
 

src/sigma.ts

@@ -40,7 +40,7 @@ import { edgeLabelsToDisplayFromNodes, LabelGrid } from "./core/labels";
 import { Settings, DEFAULT_SETTINGS, validateSettings } from "./settings";
 import { INodeProgram } from "./rendering/webgl/programs/common/node";
 import { IEdgeProgram } from "./rendering/webgl/programs/common/edge";
-import TouchCaptor from "./core/captors/touch";
+import TouchCaptor, { FakeSigmaMouseEvent } from "./core/captors/touch";
 import { identity, multiplyVec2 } from "./utils/matrices";
 import { doEdgeCollideWithPoint, isPixelColored } from "./utils/edge-collisions";
 
@@ -368,6 +368,62 @@ export default class Sigma extends TypedEventEmitter<SigmaEvents> {
     return this;
   }
 
+  /**
+   * Method that checks whether or not a node collides with a given position.
+   */
+  private mouseIsOnNode({ x, y }: Coordinates, { x: nodeX, y: nodeY }: Coordinates, size: number): boolean {
+    return (
+      x > nodeX - size &&
+      x < nodeX + size &&
+      y > nodeY - size &&
+      y < nodeY + size &&
+      Math.sqrt(Math.pow(x - nodeX, 2) + Math.pow(y - nodeY, 2)) < size
+    );
+  }
+
+  /**
+   * Method that returns all nodes in quad at a given position.
+   */
+  private getQuadNodes(position: Coordinates): string[] {
+    const mouseGraphPosition = this.viewportToFramedGraph(position);
+
+    return this.quadtree.point(mouseGraphPosition.x, 1 - mouseGraphPosition.y);
+  }
+
+  /**
+   * Method that returns the closest node to a given position.
+   */
+  private getNodeAtPosition(position: Coordinates): string | null {
+    const { x, y } = position;
+    const quadNodes = this.getQuadNodes(position);
+
+    // We will hover the node whose center is closest to mouse
+    let minDistance = Infinity,
+      nodeAtPosition = null;
+
+    for (let i = 0, l = quadNodes.length; i < l; i++) {
+      const node = quadNodes[i];
+
+      const data = this.nodeDataCache[node];
+
+      const nodePosition = this.framedGraphToViewport(data);
+
+      const size = this.scaleSize(data.size);
+
+      if (!data.hidden && this.mouseIsOnNode(position, nodePosition, size)) {
+        const distance = Math.sqrt(Math.pow(x - nodePosition.x, 2) + Math.pow(y - nodePosition.y, 2));
+
+        // TODO: sort by min size also for cases where center is the same
+        if (distance < minDistance) {
+          minDistance = distance;
+          nodeAtPosition = node;
+        }
+      }
+    }
+
+    return nodeAtPosition;
+  }
+
   /**
    * Method binding event handlers.
    *
@@ -382,62 +438,16 @@ export default class Sigma extends TypedEventEmitter<SigmaEvents> {
 
     window.addEventListener("resize", this.activeListeners.handleResize);
 
-    // Function checking if the mouse is on the given node
-    const mouseIsOnNode = (mouseX: number, mouseY: number, nodeX: number, nodeY: number, size: number): boolean => {
-      return (
-        mouseX > nodeX - size &&
-        mouseX < nodeX + size &&
-        mouseY > nodeY - size &&
-        mouseY < nodeY + size &&
-        Math.sqrt(Math.pow(mouseX - nodeX, 2) + Math.pow(mouseY - nodeY, 2)) < size
-      );
-    };
-
-    // Function returning the nodes in the mouse's quad
-    const getQuadNodes = (mouseX: number, mouseY: number) => {
-      const mouseGraphPosition = this.viewportToFramedGraph({ x: mouseX, y: mouseY });
-
-      // TODO: minus 1? lol
-      return this.quadtree.point(mouseGraphPosition.x, 1 - mouseGraphPosition.y);
-    };
-
     // Handling mouse move
     this.activeListeners.handleMove = (e: MouseCoords): void => {
-      // NOTE: for the canvas renderer, testing the pixel's alpha should
-      // give some boost but this slows things down for WebGL empirically.
-
-      const quadNodes = getQuadNodes(e.x, e.y);
-
       const baseEvent = {
         event: e,
         preventSigmaDefault(): void {
           this.event.preventSigmaDefault();
         },
       };
 
-      // We will hover the node whose center is closest to mouse
-      let minDistance = Infinity,
-        nodeToHover = null;
-
-      for (let i = 0, l = quadNodes.length; i < l; i++) {
-        const node = quadNodes[i];
-
-        const data = this.nodeDataCache[node];
-
-        const pos = this.framedGraphToViewport(data);
-
-        const size = this.scaleSize(data.size);
-
-        if (!data.hidden && mouseIsOnNode(e.x, e.y, pos.x, pos.y, size)) {
-          const distance = Math.sqrt(Math.pow(e.x - pos.x, 2) + Math.pow(e.y - pos.y, 2));
-
-          // TODO: sort by min size also for cases where center is the same
-          if (distance < minDistance) {
-            minDistance = distance;
-            nodeToHover = node;
-          }
-        }
-      }
+      const nodeToHover = this.getNodeAtPosition(e);
 
       if (nodeToHover && this.hoveredNode !== nodeToHover && !this.nodeDataCache[nodeToHover].hidden) {
         // Handling passing from one node to the other directly
@@ -457,7 +467,7 @@ export default class Sigma extends TypedEventEmitter<SigmaEvents> {
 
         const size = this.scaleSize(data.size);
 
-        if (!mouseIsOnNode(e.x, e.y, pos.x, pos.y, size)) {
+        if (!this.mouseIsOnNode(e, pos, size)) {
           const node = this.hoveredNode;
           this.hoveredNode = null;
 
@@ -487,10 +497,13 @@ export default class Sigma extends TypedEventEmitter<SigmaEvents> {
           },
         };
 
-        if (this.hoveredNode)
+        const isFakeSigmaMouseEvent = (e.original as FakeSigmaMouseEvent).isFakeSigmaMouseEvent;
+        const nodeAtPosition = isFakeSigmaMouseEvent ? this.getNodeAtPosition(e) : this.hoveredNode;
+
+        if (nodeAtPosition)
           return this.emit(`${eventType}Node`, {
             ...baseEvent,
-            node: this.hoveredNode,
+            node: nodeAtPosition,
           });
 
         if (eventType === "wheel" ? this.settings.enableEdgeWheelEvents : this.settings.enableEdgeClickEvents) {