1 files changed, 98 insertions, 4 deletions
diff --git a/src/client/views/GestureOverlay.tsx b/src/client/views/GestureOverlay.tsx
index 3631d3204..afae61630 100644
--- a/src/client/views/GestureOverlay.tsx
+++ b/src/client/views/GestureOverlay.tsx
@@ -59,6 +59,7 @@ export default class GestureOverlay extends Touchable {
     private thumbIdentifier?: number;
     private pointerIdentifier?: number;
     private _hands: Map<number, React.Touch[]> = new Map<number, React.Touch[]>();
+    private _holdTimer: NodeJS.Timeout | undefined;
 
     protected multiTouchDisposer?: InteractionUtils.MultiTouchEventDisposer;
 
@@ -129,7 +130,7 @@ export default class GestureOverlay extends Touchable {
 
         if (nts.nt.length < 5) {
             const target = document.elementFromPoint(te.changedTouches.item(0).clientX, te.changedTouches.item(0).clientY);
-            target?.dispatchEvent(
+            target ?.dispatchEvent(
                 new CustomEvent<InteractionUtils.MultiTouchEvent<React.TouchEvent>>("dashOnTouchStart",
                     {
                         bubbles: true,
@@ -143,6 +144,34 @@ export default class GestureOverlay extends Touchable {
                     }
                 )
             );
+            if (this.prevPoints.size === 1 && this._holdTimer === undefined) {
+                console.log("started");
+                this._holdTimer = setTimeout(() => {
+                    console.log("hold");
+                    const target = document.elementFromPoint(te.changedTouches.item(0).clientX, te.changedTouches.item(0).clientY);
+                    target ?.dispatchEvent(
+                        new CustomEvent<InteractionUtils.MultiTouchEvent<React.TouchEvent>>("dashOnTouchHoldStart",
+                            {
+                                bubbles: true,
+                                detail: {
+                                    fingers: this.prevPoints.size,
+                                    targetTouches: nts.ntt,
+                                    touches: nts.nt,
+                                    changedTouches: nts.nct,
+                                    touchEvent: te
+                                }
+                            }
+                        )
+                    );
+                    this._holdTimer = undefined;
+                    document.removeEventListener("touchmove", this.onReactTouchMove);
+                    document.removeEventListener("touchend", this.onReactTouchEnd);
+                    document.removeEventListener("touchmove", this.onReactHoldTouchMove);
+                    document.removeEventListener("touchend", this.onReactHoldTouchEnd);
+                    document.addEventListener("touchmove", this.onReactHoldTouchMove);
+                    document.addEventListener("touchend", this.onReactHoldTouchEnd);
+                }, (1000));
+            }
             document.removeEventListener("touchmove", this.onReactTouchMove);
             document.removeEventListener("touchend", this.onReactTouchEnd);
             document.addEventListener("touchmove", this.onReactTouchMove);
@@ -155,8 +184,69 @@ export default class GestureOverlay extends Touchable {
         }
     }
 
+    onReactHoldTouchMove = (e: TouchEvent) => {
+        const nts: any = this.getNewTouches(e);
+        if (this.prevPoints.size === 1 && this._holdTimer) {
+            clearTimeout(this._holdTimer);
+            this._holdTimer = undefined;
+        }
+        document.dispatchEvent(
+            new CustomEvent<InteractionUtils.MultiTouchEvent<TouchEvent>>("dashOnTouchHoldMove",
+                {
+                    bubbles: true,
+                    detail: {
+                        fingers: this.prevPoints.size,
+                        targetTouches: nts.ntt,
+                        touches: nts.nt,
+                        changedTouches: nts.nct,
+                        touchEvent: e
+                    }
+                })
+        );
+    }
+
+    onReactHoldTouchEnd = (e: TouchEvent) => {
+        const nts: any = this.getNewTouches(e);
+        if (this.prevPoints.size === 1 && this._holdTimer) {
+            clearTimeout(this._holdTimer);
+            this._holdTimer = undefined;
+        }
+        document.dispatchEvent(
+            new CustomEvent<InteractionUtils.MultiTouchEvent<TouchEvent>>("dashOnTouchHoldEnd",
+                {
+                    bubbles: true,
+                    detail: {
+                        fingers: this.prevPoints.size,
+                        targetTouches: nts.ntt,
+                        touches: nts.nt,
+                        changedTouches: nts.nct,
+                        touchEvent: e
+                    }
+                })
+        );
+        for (let i = 0; i < e.changedTouches.length; i++) {
+            const pt = e.changedTouches.item(i);
+            if (pt) {
+                if (this.prevPoints.has(pt.identifier)) {
+                    this.prevPoints.delete(pt.identifier);
+                }
+            }
+        }
+
+        if (this.prevPoints.size === 0) {
+            document.removeEventListener("touchmove", this.onReactTouchMove);
+            document.removeEventListener("touchend", this.onReactTouchEnd);
+        }
+        e.stopPropagation();
+    }
+
+
     onReactTouchMove = (e: TouchEvent) => {
         const nts: any = this.getNewTouches(e);
+        if (this.prevPoints.size === 1 && this._holdTimer) {
+            clearTimeout(this._holdTimer);
+            this._holdTimer = undefined;
+        }
         document.dispatchEvent(
             new CustomEvent<InteractionUtils.MultiTouchEvent<TouchEvent>>("dashOnTouchMove",
                 {
@@ -174,6 +264,10 @@ export default class GestureOverlay extends Touchable {
 
     onReactTouchEnd = (e: TouchEvent) => {
         const nts: any = this.getNewTouches(e);
+        if (this.prevPoints.size === 1 && this._holdTimer) {
+            clearTimeout(this._holdTimer);
+            this._holdTimer = undefined;
+        }
         document.dispatchEvent(
             new CustomEvent<InteractionUtils.MultiTouchEvent<TouchEvent>>("dashOnTouchEnd",
                 {
@@ -210,7 +304,7 @@ export default class GestureOverlay extends Touchable {
             if (pt.radiusX > 1 && pt.radiusY > 1) {
                 for (let j = 0; j < e.targetTouches.length; j++) {
                     const tPt = e.targetTouches.item(j);
-                    if (tPt?.screenX === pt?.screenX && tPt?.screenY === pt?.screenY) {
+                    if (tPt ?.screenX === pt ?.screenX && tPt ?.screenY === pt ?.screenY) {
                         if (pt && this.prevPoints.has(pt.identifier)) {
                             fingers.push(pt);
                         }
@@ -412,8 +506,8 @@ export default class GestureOverlay extends Touchable {
                     callbackFn: callback
                 }
             });
-        target1?.dispatchEvent(ge);
-        target2?.dispatchEvent(ge);
+        target1 ?.dispatchEvent(ge);
+        target2 ?.dispatchEvent(ge);
         return actionPerformed;
     }