abstracted mobile ink overlay stuff into its own component

3 files changed, 81 insertions, 51 deletions

diff --git a/src/client/DocServer.ts b/src/client/DocServer.ts
index 132128182..a1cb42df2 100644
--- a/src/client/DocServer.ts
+++ b/src/client/DocServer.ts
@@ -6,6 +6,7 @@ import { SerializationHelper } from './util/SerializationHelper';
 import { RefField } from '../new_fields/RefField';
 import { Id, HandleUpdate } from '../new_fields/FieldSymbols';
 import GestureOverlay from './views/GestureOverlay';
+import MobileInkOverlay from '../mobile/MobileInkOverlay';
 
 /**
  * This class encapsulates the transfer and cross-client synchronization of
@@ -100,10 +101,11 @@ export namespace DocServer {
             alert("Your connection to the server has been terminated.");
         });
         _socket.addEventListener("receiveGesturePoints", (content: GestureContent) => {
-            GestureOverlay.Instance.drawStrokeToMobileInkBox(content);
+            MobileInkOverlay.Instance.drawStroke(content);
         });
         _socket.addEventListener("receiveBoxTrigger", (content: MobileInkBoxContent) => {
             GestureOverlay.Instance.enableMobileInkBox(content);
+            MobileInkOverlay.Instance.initMobileInkOverlay(content);
         });
     }
 
diff --git a/src/client/views/GestureOverlay.tsx b/src/client/views/GestureOverlay.tsx
index 7e74d1d33..81284b543 100644
--- a/src/client/views/GestureOverlay.tsx
+++ b/src/client/views/GestureOverlay.tsx
@@ -21,6 +21,7 @@ import { MainView } from "./MainView";
 import { DocServer } from "../DocServer";
 import { GestureContent, MobileInkBoxContent } from "../../server/Message";
 import { Point } from "../northstar/model/idea/idea";
+import MobileInkOverlay from "../../mobile/MobileInkOverlay";
 
 @observer
 export default class GestureOverlay extends Touchable {
@@ -32,8 +33,6 @@ export default class GestureOverlay extends Touchable {
     @observable public Width: number = 5;
 
     @observable private showMobileInkOverlay: boolean = false;
-    @observable private mobileInkOverlaySize: { width: number, height: number } = { width: 500, height: 700 };
-    @observable private mobileInkOverlayPosition: { x: number, y: number } = { x: 300, y: 0 };
 
     private _d1: Doc | undefined;
     private thumbIdentifier?: number;
@@ -247,55 +246,9 @@ export default class GestureOverlay extends Touchable {
         );
     }
 
-    drawStrokeToMobileInkBox = (content: GestureContent) => {
-        console.log(content);
-        const { points, bounds } = content;
-
-        const B = {
-            right: bounds.right + this.mobileInkOverlayPosition.x,
-            left: bounds.left + this.mobileInkOverlayPosition.x,
-            bottom: bounds.bottom + this.mobileInkOverlayPosition.y,
-            top: bounds.top + this.mobileInkOverlayPosition.y,
-            width: bounds.width,
-            height: bounds.height
-        };
-
-        const target = document.elementFromPoint(points[0].X, points[0].Y);
-        target?.dispatchEvent(
-            new CustomEvent<GestureUtils.GestureEvent>("dashOnGesture",
-                {
-                    bubbles: true,
-                    detail: {
-                        points: points,
-                        gesture: GestureUtils.Gestures.Stroke,
-                        bounds: B
-                    }
-                }
-            )
-        );
-    }
-
     @action
     enableMobileInkBox = (content: MobileInkBoxContent) => {
-        const { enableBox, width, height } = content;
-        console.log("enable box?", enableBox, width, height);
-        this.showMobileInkOverlay = enableBox;
-        this.mobileInkOverlaySize = { width: width ? width : 0, height: height ? height : 0 };
-        this.mobileInkOverlayPosition = { x: 300, y: 25 }; // TODO put at center of screen
-
-    }
-
-    @computed get mobileInkOverlay() {
-        return (
-            <div className="mobileInkOverlay" style={{
-                width: this.mobileInkOverlaySize.width,
-                height: this.mobileInkOverlaySize.height,
-                position: "absolute",
-                transform: `translate(${this.mobileInkOverlayPosition.x}px, ${this.mobileInkOverlayPosition.y}px)`,
-                zIndex: 30000,
-                pointerEvents: "none"
-            }}></div>
-        );
+        this.showMobileInkOverlay = content.enableBox;
     }
 
     render() {
@@ -304,7 +257,7 @@ export default class GestureOverlay extends Touchable {
                 {this.currentStroke}
                 {this.props.children}
                 {this._palette}
-                {this.showMobileInkOverlay ? this.mobileInkOverlay : <></>}
+                {this.showMobileInkOverlay ? <MobileInkOverlay /> : <></>}
             </div>);
     }
 }
diff --git a/src/mobile/MobileInkOverlay.tsx b/src/mobile/MobileInkOverlay.tsx
new file mode 100644
index 000000000..240d23b32
--- /dev/null
+++ b/src/mobile/MobileInkOverlay.tsx
@@ -0,0 +1,75 @@
+import React = require('react');
+import { observer } from "mobx-react";
+import { MobileInkBoxContent, GestureContent } from "../server/Message";
+import { observable, action } from "mobx";
+import { GestureUtils } from "../pen-gestures/GestureUtils";
+
+
+@observer
+export default class MobileInkOverlay extends React.Component {
+    public static Instance: MobileInkOverlay;
+
+    private _mobileWidth: number = 0;
+    private _mobileHeight: number = 0;
+    @observable private _width: number = 0;
+    @observable private _height: number = 0;
+    @observable private _x: number = -300;
+    @observable private _y: number = -300;
+
+    constructor(props: Readonly<{}>) {
+        super(props);
+        MobileInkOverlay.Instance = this;
+    }
+
+    @action
+    initMobileInkOverlay(content: MobileInkBoxContent) {
+        const { width, height } = content;
+        this._mobileWidth = width ? width : 0;
+        this._mobileHeight = height ? height : 0;
+        this._width = width ? width : 0;
+        this._height = height ? height : 0;
+        this._x = 300; // TODO: center on screen
+        this._y = 25; // TODO: center on screen
+    }
+
+    drawStroke = (content: GestureContent) => {
+        const { points, bounds } = content;
+        const scale = 1;
+
+        const B = {
+            right: bounds.right + this._x,
+            left: bounds.left + this._x, // TODO: scale
+            bottom: bounds.bottom + this._y,
+            top: bounds.top + this._y, // TODO: scale
+            width: bounds.width * scale,
+            height: bounds.height * scale,
+        };
+
+        const target = document.elementFromPoint(points[0].X, points[0].Y);
+        target?.dispatchEvent(
+            new CustomEvent<GestureUtils.GestureEvent>("dashOnGesture",
+                {
+                    bubbles: true,
+                    detail: {
+                        points: points,
+                        gesture: GestureUtils.Gestures.Stroke,
+                        bounds: B
+                    }
+                }
+            )
+        );
+    }
+
+    render() {
+        return (
+            <div className="mobileInkOverlay" style={{
+                width: this._width,
+                height: this._height,
+                position: "absolute",
+                transform: `translate(${this._x}px, ${this._y}px)`,
+                zIndex: 30000,
+                pointerEvents: "none"
+            }}></div>
+        );
+    }
+}
\ No newline at end of file