2 files changed, 64 insertions, 10 deletions

diff --git a/src/client/views/GestureOverlay.scss b/src/client/views/GestureOverlay.scss
index 31601efd4..2996b7073 100644
--- a/src/client/views/GestureOverlay.scss
+++ b/src/client/views/GestureOverlay.scss
@@ -5,4 +5,8 @@
     top: 0;
     left: 0;
     touch-action: none;
+}
+
+.mobileInkOverlay {
+    border: 5px dashed red;
 }
\ No newline at end of file
diff --git a/src/client/views/GestureOverlay.tsx b/src/client/views/GestureOverlay.tsx
index 4b8dfa119..7e74d1d33 100644
--- a/src/client/views/GestureOverlay.tsx
+++ b/src/client/views/GestureOverlay.tsx
@@ -19,7 +19,8 @@ import Palette from "./Palette";
 import MobileInterface from "../../mobile/MobileInterface";
 import { MainView } from "./MainView";
 import { DocServer } from "../DocServer";
-import { GestureContent } from "../../server/Message";
+import { GestureContent, MobileInkBoxContent } from "../../server/Message";
+import { Point } from "../northstar/model/idea/idea";
 
 @observer
 export default class GestureOverlay extends Touchable {
@@ -30,6 +31,10 @@ export default class GestureOverlay extends Touchable {
     @observable public Color: string = "rgb(244, 67, 54)";
     @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;
 
@@ -39,14 +44,6 @@ export default class GestureOverlay extends Touchable {
         GestureOverlay.Instance = this;
     }
 
-    manualDispatch = (content: GestureContent) => {
-        console.log(content);
-    }
-
-    showBox = (enableBox: boolean) => {
-        console.log("enable box?", enableBox);
-    }
-
     @action
     handleHandDown = (e: React.TouchEvent) => {
         const fingers = InteractionUtils.GetMyTargetTouches(e, this.prevPoints, true);
@@ -151,10 +148,11 @@ export default class GestureOverlay extends Touchable {
             const B = this.svgBounds;
             const points = this._points.map(p => ({ X: p.X - B.left, Y: p.Y - B.top }));
 
-            if (MobileInterface.Instance.drawingInk) {
+            if (MobileInterface.Instance && MobileInterface.Instance.drawingInk) {
                 const { selectedColor, selectedWidth } = InkingControl.Instance;
                 DocServer.Mobile.dispatchGesturePoints({
                     points: this._points,
+                    bounds: B,
                     color: selectedColor,
                     width: selectedWidth
                 });
@@ -249,12 +247,64 @@ 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>
+        );
+    }
+
     render() {
         return (
             <div className="gestureOverlay-cont" onPointerDown={this.onPointerDown} onTouchStart={this.onTouchStart}>
                 {this.currentStroke}
                 {this.props.children}
                 {this._palette}
+                {this.showMobileInkOverlay ? this.mobileInkOverlay : <></>}
             </div>);
     }
 }