From 724c1c1228aa601fdbbed93dde68a5a9fa9c5ae9 Mon Sep 17 00:00:00 2001
From: bobzel <zzzman@gmail.com>
Date: Wed, 20 Jul 2022 09:12:11 -0400
Subject: added a 'guest' login mode.  added ability for mainView to be any
 doc, not just a docking collection.

---
 src/mobile/MobileInkOverlay.tsx | 119 +++++++++++++++++++---------------------
 1 file changed, 56 insertions(+), 63 deletions(-)

(limited to 'src/mobile/MobileInkOverlay.tsx')

diff --git a/src/mobile/MobileInkOverlay.tsx b/src/mobile/MobileInkOverlay.tsx
index d668d134e..6415099fd 100644
--- a/src/mobile/MobileInkOverlay.tsx
+++ b/src/mobile/MobileInkOverlay.tsx
@@ -1,13 +1,12 @@
 import React = require('react');
-import { observer } from "mobx-react";
-import { MobileInkOverlayContent, GestureContent, UpdateMobileInkOverlayPositionContent, MobileDocumentUploadContent } from "../server/Message";
-import { observable, action } from "mobx";
-import { GestureUtils } from "../pen-gestures/GestureUtils";
-import "./MobileInkOverlay.scss";
-import { DragManager } from "../client/util/DragManager";
+import { action, observable } from 'mobx';
+import { observer } from 'mobx-react';
 import { DocServer } from '../client/DocServer';
+import { DragManager } from '../client/util/DragManager';
 import { Doc } from '../fields/Doc';
-
+import { GestureUtils } from '../pen-gestures/GestureUtils';
+import { GestureContent, MobileDocumentUploadContent, MobileInkOverlayContent, UpdateMobileInkOverlayPositionContent } from '../server/Message';
+import './MobileInkOverlay.scss';
 
 @observer
 export default class MobileInkOverlay extends React.Component {
@@ -18,7 +17,7 @@ export default class MobileInkOverlay extends React.Component {
     @observable private _height: number = 0;
     @observable private _x: number = -300;
     @observable private _y: number = -300;
-    @observable private _text: string = "";
+    @observable private _text: string = '';
 
     @observable private _offsetX: number = 0;
     @observable private _offsetY: number = 0;
@@ -49,7 +48,7 @@ export default class MobileInkOverlay extends React.Component {
         this._scale = scaledSize.scale;
         this._x = 300; // TODO: center on screen
         this._y = 25; // TODO: center on screen
-        this._text = text ? text : "";
+        this._text = text ? text : '';
     }
 
     @action
@@ -64,31 +63,29 @@ export default class MobileInkOverlay extends React.Component {
         // TODO: figure out why strokes drawn in corner of mobile interface dont get inserted
 
         const { points, bounds } = content;
-        console.log("received points", points, bounds);
+        console.log('received points', points, bounds);
 
         const B = {
-            right: (bounds.right * this._scale) + this._x,
-            left: (bounds.left * this._scale) + this._x, // TODO: scale
-            bottom: (bounds.bottom * this._scale) + this._y,
-            top: (bounds.top * this._scale) + this._y, // TODO: scale
+            right: bounds.right * this._scale + this._x,
+            left: bounds.left * this._scale + this._x, // TODO: scale
+            bottom: bounds.bottom * this._scale + this._y,
+            top: bounds.top * this._scale + this._y, // TODO: scale
             width: bounds.width * this._scale,
             height: bounds.height * this._scale,
         };
 
         const target = document.elementFromPoint(this._x + 10, this._y + 10);
         target?.dispatchEvent(
-            new CustomEvent<GestureUtils.GestureEvent>("dashOnGesture",
-                {
-                    bubbles: true,
-                    detail: {
-                        points: points,
-                        gesture: GestureUtils.Gestures.Stroke,
-                        bounds: B
-                    }
-                }
-            )
+            new CustomEvent<GestureUtils.GestureEvent>('dashOnGesture', {
+                bubbles: true,
+                detail: {
+                    points: points,
+                    gesture: GestureUtils.Gestures.Stroke,
+                    bounds: B,
+                },
+            })
         );
-    }
+    };
 
     uploadDocument = async (content: MobileDocumentUploadContent) => {
         const { docId } = content;
@@ -100,36 +97,34 @@ export default class MobileInkOverlay extends React.Component {
             const complete = new DragManager.DragCompleteEvent(false, dragData);
 
             if (target) {
-                console.log("dispatching upload doc!!!!", target, doc);
+                console.log('dispatching upload doc!!!!', target, doc);
                 target.dispatchEvent(
-                    new CustomEvent<DragManager.DropEvent>("dashOnDrop",
-                        {
-                            bubbles: true,
-                            detail: {
-                                x: this._x,
-                                y: this._y,
-                                complete: complete,
-                                altKey: false,
-                                metaKey: false,
-                                ctrlKey: false,
-                                shiftKey: false,
-                                embedKey: false
-                            }
-                        }
-                    )
+                    new CustomEvent<DragManager.DropEvent>('dashOnDrop', {
+                        bubbles: true,
+                        detail: {
+                            x: this._x,
+                            y: this._y,
+                            complete: complete,
+                            altKey: false,
+                            metaKey: false,
+                            ctrlKey: false,
+                            shiftKey: false,
+                            embedKey: false,
+                        },
+                    })
                 );
             } else {
-                alert("TARGET IS UNDEFINED");
+                alert('TARGET IS UNDEFINED');
             }
         }
-    }
+    };
 
     @action
     dragStart = (e: React.PointerEvent) => {
-        document.removeEventListener("pointermove", this.dragging);
-        document.removeEventListener("pointerup", this.dragEnd);
-        document.addEventListener("pointermove", this.dragging);
-        document.addEventListener("pointerup", this.dragEnd);
+        document.removeEventListener('pointermove', this.dragging);
+        document.removeEventListener('pointerup', this.dragEnd);
+        document.addEventListener('pointermove', this.dragging);
+        document.addEventListener('pointerup', this.dragEnd);
 
         this._isDragging = true;
         this._offsetX = e.pageX - this._mainCont.current!.getBoundingClientRect().left;
@@ -137,7 +132,7 @@ export default class MobileInkOverlay extends React.Component {
 
         e.preventDefault();
         e.stopPropagation();
-    }
+    };
 
     @action
     dragging = (e: PointerEvent) => {
@@ -150,41 +145,39 @@ export default class MobileInkOverlay extends React.Component {
 
         e.preventDefault();
         e.stopPropagation();
-    }
+    };
 
     @action
     dragEnd = (e: PointerEvent) => {
-        document.removeEventListener("pointermove", this.dragging);
-        document.removeEventListener("pointerup", this.dragEnd);
+        document.removeEventListener('pointermove', this.dragging);
+        document.removeEventListener('pointerup', this.dragEnd);
 
         this._isDragging = false;
 
         e.preventDefault();
         e.stopPropagation();
-    }
+    };
 
     render() {
-
         return (
-            <div className="mobileInkOverlay"
+            <div
+                className="mobileInkOverlay"
                 style={{
                     width: this._width,
                     height: this._height,
-                    position: "absolute",
+                    position: 'absolute',
                     transform: `translate(${this._x}px, ${this._y}px)`,
                     zIndex: 30000,
-                    pointerEvents: "none",
-                    borderStyle: this._isDragging ? "solid" : "dashed",
-                }
-                }
-                ref={this._mainCont}
-            >
+                    pointerEvents: 'none',
+                    borderStyle: this._isDragging ? 'solid' : 'dashed',
+                }}
+                ref={this._mainCont}>
                 <p>{this._text}</p>
                 <div className="mobileInkOverlay-border top" onPointerDown={this.dragStart}></div>
                 <div className="mobileInkOverlay-border bottom" onPointerDown={this.dragStart}></div>
                 <div className="mobileInkOverlay-border left" onPointerDown={this.dragStart}></div>
                 <div className="mobileInkOverlay-border right" onPointerDown={this.dragStart}></div>
-            </div >
+            </div>
         );
     }
-}
\ No newline at end of file
+}
-- 
cgit v1.2.3-70-g09d2

