From 7a6119646270a03ae68fb364d9b13e87227e5a80 Mon Sep 17 00:00:00 2001
From: zsviczian <viczian.zsolt@gmail.com>
Date: Thu, 10 Feb 2022 10:22:33 +0100
Subject: [PATCH] fix: mobile link click (#4742)

* add tolerance to redirect pointerDown_Up check

* Update src/components/App.tsx

Co-authored-by: David Luzar <luzar.david@gmail.com>

* Update App.tsx

* lint

* lint

* fix for ipad/mobile

* Update App.tsx

* Update App.tsx

* Update App.tsx

* testing if isIPad works on iOS15

* Update App.tsx

* Update keys.ts

* Update keys.ts

* lint

* test

* removed isTouchScreen

* isTouchScreen

* lint

* lint

* Update App.tsx

* tweak

Co-authored-by: David Luzar <luzar.david@gmail.com>
Co-authored-by: ad1992 <aakansha1216@gmail.com>
---
 src/components/App.tsx | 21 ++++++++++++++++-----
 1 file changed, 16 insertions(+), 5 deletions(-)

diff --git a/src/components/App.tsx b/src/components/App.tsx
index a0a15dba..e6113d03 100644
--- a/src/components/App.tsx
+++ b/src/components/App.tsx
@@ -2386,11 +2386,21 @@ class App extends React.Component<AppProps, AppState> {
     });
   };
 
-  private redirectToLink = (event: React.PointerEvent<HTMLCanvasElement>) => {
+  private redirectToLink = (
+    event: React.PointerEvent<HTMLCanvasElement>,
+    isTouchScreen: boolean,
+  ) => {
+    const draggedDistance = distance2d(
+      this.lastPointerDown!.clientX,
+      this.lastPointerDown!.clientY,
+      this.lastPointerUp!.clientX,
+      this.lastPointerUp!.clientY,
+    );
     if (
       !this.hitLinkElement ||
-      this.lastPointerDown!.clientX !== this.lastPointerUp!.clientX ||
-      this.lastPointerDown!.clientY !== this.lastPointerUp!.clientY
+      // For touch screen allow dragging threshold else strict check
+      (isTouchScreen && draggedDistance > DRAGGING_THRESHOLD) ||
+      (!isTouchScreen && draggedDistance !== 0)
     ) {
       return;
     }
@@ -2888,7 +2898,8 @@ class App extends React.Component<AppProps, AppState> {
     event: React.PointerEvent<HTMLCanvasElement>,
   ) => {
     this.lastPointerUp = event;
-    if (this.isMobile) {
+    const isTouchScreen = ["pen", "touch"].includes(event.pointerType);
+    if (isTouchScreen) {
       const scenePointer = viewportCoordsToSceneCoords(
         { clientX: event.clientX, clientY: event.clientY },
         this.state,
@@ -2906,7 +2917,7 @@ class App extends React.Component<AppProps, AppState> {
       this.hitLinkElement &&
       !this.state.selectedElementIds[this.hitLinkElement.id]
     ) {
-      this.redirectToLink(event);
+      this.redirectToLink(event, isTouchScreen);
     }
 
     this.removePointer(event);