bug fixed the radial menu

3 files changed, 106 insertions, 70 deletions

diff --git a/src/client/views/GestureOverlay.tsx b/src/client/views/GestureOverlay.tsx
index b85f35fe4..a2d57a69c 100644
--- a/src/client/views/GestureOverlay.tsx
+++ b/src/client/views/GestureOverlay.tsx
@@ -27,6 +27,7 @@ import { listSpec } from "../../new_fields/Schema";
 import { List } from "../../new_fields/List";
 import { CollectionViewType } from "./collections/CollectionView";
 import TouchScrollableMenu, { TouchScrollableMenuItem } from "./TouchScrollableMenu";
+import { RadialMenu } from "./nodes/RadialMenu";
 
 @observer
 export default class GestureOverlay extends Touchable {
@@ -104,6 +105,16 @@ export default class GestureOverlay extends Touchable {
     }
 
     onReactTouchStart = (te: React.TouchEvent) => {
+        console.log("STARTING");
+        console.log(te.touches);
+        // if (RadialMenu.Instance._display === true) {
+        //     console.log("display", RadialMenu.Instance._display);
+        //     runInAction(() => { RadialMenu.Instance._display = false; });
+        //     te.preventDefault();
+        //     te.stopPropagation();
+        //     return;
+        // }
+
         const actualPts: React.Touch[] = [];
         for (let i = 0; i < te.touches.length; i++) {
             const pt: any = te.touches.item(i);
@@ -127,9 +138,10 @@ export default class GestureOverlay extends Touchable {
 
         ptsToDelete.forEach(pt => this.prevPoints.delete(pt));
         const nts = this.getNewTouches(te);
-
+        console.log(this.prevPoints.size, nts.ntt.length, nts.nt.length, nts.nct.length);
         if (nts.nt.length < 5) {
             const target = document.elementFromPoint(te.changedTouches.item(0).clientX, te.changedTouches.item(0).clientY);
+            console.log(te.touches);
             target?.dispatchEvent(
                 new CustomEvent<InteractionUtils.MultiTouchEvent<React.TouchEvent>>("dashOnTouchStart",
                     {
@@ -144,33 +156,41 @@ export default class GestureOverlay extends Touchable {
                     }
                 )
             );
-            if (this.prevPoints.size === 1 && this._holdTimer === undefined) {
+            console.log("2");
+            if (nts.nt.length === 1) {
                 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
+                    console.log(this.prevPoints.size, nts.ntt.length, nts.nt.length, nts.nct.length);
+                    if (nts.nt.length === 1) {
+                        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));
+                            )
+                        );
+                        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);
+                    }
+
+                }, (500));
+            }
+            else {
+                clearTimeout(this._holdTimer);
             }
             document.removeEventListener("touchmove", this.onReactTouchMove);
             document.removeEventListener("touchend", this.onReactTouchEnd);
@@ -298,6 +318,7 @@ export default class GestureOverlay extends Touchable {
     }
 
     handleHandDown = async (e: React.TouchEvent) => {
+        clearTimeout(this._holdTimer!);
         const fingers = new Array<React.Touch>();
         for (let i = 0; i < e.touches.length; i++) {
             const pt: any = e.touches.item(i);
@@ -347,6 +368,7 @@ export default class GestureOverlay extends Touchable {
         const thumbDoc = await Cast(CurrentUserUtils.setupThumbDoc(CurrentUserUtils.UserDocument), Doc);
         if (thumbDoc) {
             runInAction(() => {
+                RadialMenu.Instance._display = false;
                 this._inkToTextDoc = FieldValue(Cast(thumbDoc.inkToTextDoc, Doc));
                 this._thumbDoc = thumbDoc;
                 this._thumbX = thumb.clientX;
diff --git a/src/client/views/nodes/DocumentView.tsx b/src/client/views/nodes/DocumentView.tsx
index 6b400113b..d4e3546f7 100644
--- a/src/client/views/nodes/DocumentView.tsx
+++ b/src/client/views/nodes/DocumentView.tsx
@@ -124,24 +124,27 @@ export class DocumentView extends DocComponent<DocumentViewProps, Document>(Docu
     private _firstY: number = -1;
 
 
+
     handle1PointerHoldStart = (e: Event, me: InteractionUtils.MultiTouchEvent<React.TouchEvent>): any => {
-        this.addHoldMoveListeners();
-        this.addHoldEndListeners();
-        this.onRadialMenu(e, me);
-        const pt = InteractionUtils.GetMyTargetTouches(me, this.prevPoints, true)[0];
-        this._firstX = pt.pageX;
-        this._firstY = pt.pageY;
+        console.log("START");
+        if (RadialMenu.Instance._display === false) {
+            this.addHoldMoveListeners();
+            this.addHoldEndListeners();
+            this.onRadialMenu(e, me);
+            const pt = me.touchEvent.touches[me.touchEvent.touches.length - 1];
+            this._firstX = pt.pageX;
+            this._firstY = pt.pageY;
+        }
 
     }
 
     handle1PointerHoldMove = (e: Event, me: InteractionUtils.MultiTouchEvent<TouchEvent>): void => {
-        const pt = InteractionUtils.GetMyTargetTouches(me, this.prevPoints, true)[0];
-        console.log(pt.pageX, this._firstX, pt.pageY, this._firstY);
+        const pt = me.touchEvent.touches[me.touchEvent.touches.length - 1];
+
         if (this._firstX === -1 || this._firstY === -1) {
             return;
         }
         if (Math.abs(pt.pageX - this._firstX) > 150 || Math.abs(pt.pageY - this._firstY) > 150) {
-            console.log("WHY");
             this.handle1PointerHoldEnd(e, me);
         }
     }
@@ -154,20 +157,22 @@ export class DocumentView extends DocComponent<DocumentViewProps, Document>(Docu
 
     @action
     onRadialMenu = (e: Event, me: InteractionUtils.MultiTouchEvent<React.TouchEvent>): void => {
-        const pt = InteractionUtils.GetMyTargetTouches(me, this.prevPoints, true)[0];
-
-        RadialMenu.Instance.openMenu();
+        console.log("DISPLAYMENUUUU");
+        console.log(me.touchEvent.touches);
+        // console.log(InteractionUtils.GetMyTargetTouches(me, this.prevPoints, true));
+        // const pt = InteractionUtils.GetMyTargetTouches(me, this.prevPoints, true)[0];
+        const pt = me.touchEvent.touches[me.touchEvent.touches.length - 1];
+        RadialMenu.Instance.openMenu(pt.pageX - 15, pt.pageY - 15);
 
         RadialMenu.Instance.addItem({ description: "Open Fields", event: () => this.props.addDocTab(Docs.Create.KVPDocument(this.props.Document, { width: 300, height: 300 }), undefined, "onRight"), icon: "layer-group", selected: -1 });
         RadialMenu.Instance.addItem({ description: "Delete this document", event: () => this.props.ContainingCollectionView?.removeDocument(this.props.Document), icon: "trash", selected: -1 });
         RadialMenu.Instance.addItem({ description: "Open in a new tab", event: () => this.props.addDocTab(this.props.Document, undefined, "onRight"), icon: "folder", selected: -1 });
         RadialMenu.Instance.addItem({ description: "Pin to Presentation", event: () => this.props.pinToPres(this.props.Document), icon: "map-pin", selected: -1 });
 
-        RadialMenu.Instance.displayMenu(pt.pageX - 15, pt.pageY - 15);
         if (!SelectionManager.IsSelected(this, true)) {
             SelectionManager.SelectDoc(this, false);
         }
-        e.stopPropagation();
+
     }
 
     @action
diff --git a/src/client/views/nodes/RadialMenu.tsx b/src/client/views/nodes/RadialMenu.tsx
index 74c5f53bd..a6fb72a7b 100644
--- a/src/client/views/nodes/RadialMenu.tsx
+++ b/src/client/views/nodes/RadialMenu.tsx
@@ -24,12 +24,19 @@ export class RadialMenu extends React.Component {
     private _reactionDisposer?: IReactionDisposer;
 
 
+    catchTouch = (te: React.TouchEvent) => {
+        console.log("caught");
+        te.stopPropagation();
+        te.preventDefault();
+    }
+
     @action
     onPointerDown = (e: PointerEvent) => {
         this._mouseDown = true;
         this._mouseX = e.clientX;
         this._mouseY = e.clientY;
         document.addEventListener("pointermove", this.onPointerMove);
+
     }
 
     @observable
@@ -42,7 +49,6 @@ export class RadialMenu extends React.Component {
         const deltX = this._mouseX - curX;
         const deltY = this._mouseY - curY;
         const scale = Math.hypot(deltY, deltX);
-
         if (scale < 150 && scale > 50) {
             const rad = Math.atan2(deltY, deltX) + Math.PI;
             let closest = 0;
@@ -83,6 +89,7 @@ export class RadialMenu extends React.Component {
 
     @action
     componentDidMount = () => {
+        console.log(this._pageX);
         document.addEventListener("pointerdown", this.onPointerDown);
         document.addEventListener("pointerup", this.onPointerUp);
         this.previewcircle();
@@ -98,7 +105,7 @@ export class RadialMenu extends React.Component {
 
     @observable private _pageX: number = 0;
     @observable private _pageY: number = 0;
-    @observable private _display: boolean = false;
+    @observable _display: boolean = false;
     @observable private _yRelativeToTop: boolean = true;
 
 
@@ -124,35 +131,34 @@ export class RadialMenu extends React.Component {
     displayMenu = (x: number, y: number) => {
         //maxX and maxY will change if the UI/font size changes, but will work for any amount
         //of items added to the menu
-
-        this._pageX = x;
-        this._pageY = y;
+        this._mouseX = x;
+        this._mouseY = y;
         this._shouldDisplay = true;
     }
-
-    get pageX() {
-        const x = this._pageX;
-        if (x < 0) {
-            return 0;
-        }
-        const width = this._width;
-        if (x + width > window.innerWidth - RadialMenu.buffer) {
-            return window.innerWidth - RadialMenu.buffer - width;
-        }
-        return x;
-    }
-
-    get pageY() {
-        const y = this._pageY;
-        if (y < 0) {
-            return 0;
-        }
-        const height = this._height;
-        if (y + height > window.innerHeight - RadialMenu.buffer) {
-            return window.innerHeight - RadialMenu.buffer - height;
-        }
-        return y;
-    }
+    // @computed
+    // get pageX() {
+    //     const x = this._pageX;
+    //     if (x < 0) {
+    //         return 0;
+    //     }
+    //     const width = this._width;
+    //     if (x + width > window.innerWidth - RadialMenu.buffer) {
+    //         return window.innerWidth - RadialMenu.buffer - width;
+    //     }
+    //     return x;
+    // }
+    // @computed
+    // get pageY() {
+    //     const y = this._pageY;
+    //     if (y < 0) {
+    //         return 0;
+    //     }
+    //     const height = this._height;
+    //     if (y + height > window.innerHeight - RadialMenu.buffer) {
+    //         return window.innerHeight - RadialMenu.buffer - height;
+    //     }
+    //     return y;
+    // }
 
     @computed get menuItems() {
         return this._items.map((item, index) => <RadialMenuItem {...item} key={item.description} closeMenu={this.closeMenu} max={this._items.length} min={index} selected={this._closest} />);
@@ -166,7 +172,10 @@ export class RadialMenu extends React.Component {
     }
 
     @action
-    openMenu = () => {
+    openMenu = (x: number, y: number) => {
+
+        this._pageX = x;
+        this._pageY = y;
         this._shouldDisplay;
         this._display = true;
     }
@@ -207,12 +216,12 @@ export class RadialMenu extends React.Component {
         if (!this._display) {
             return null;
         }
-        const style = this._yRelativeToTop ? { left: this._mouseX - 150, top: this._mouseY - 150 } :
-            { left: this._mouseX - 150, top: this._mouseY - 150 };
+        const style = this._yRelativeToTop ? { left: this._pageX - 130, top: this._pageY - 130 } :
+            { left: this._pageX - 130, top: this._pageY - 130 };
 
         return (
 
-            <div className="radialMenu-cont" style={style}>
+            <div className="radialMenu-cont" onTouchStart={this.catchTouch} style={style}>
                 <canvas id="newCanvas" style={{ position: "absolute" }} height="300" width="300"> Your browser does not support the HTML5 canvas tag.</canvas>
                 {this.menuItems}
             </div>