strokes drawn on mobile interface are translated properly to desktop mobile ink overlay

1 files changed, 18 insertions, 13 deletions

diff --git a/src/mobile/MobileInkOverlay.tsx b/src/mobile/MobileInkOverlay.tsx
index 240d23b32..71dd20c51 100644
--- a/src/mobile/MobileInkOverlay.tsx
+++ b/src/mobile/MobileInkOverlay.tsx
@@ -9,8 +9,7 @@ import { GestureUtils } from "../pen-gestures/GestureUtils";
 export default class MobileInkOverlay extends React.Component {
     public static Instance: MobileInkOverlay;
 
-    private _mobileWidth: number = 0;
-    private _mobileHeight: number = 0;
+    @observable private _scale: number = 1;
     @observable private _width: number = 0;
     @observable private _height: number = 0;
     @observable private _x: number = -300;
@@ -21,28 +20,34 @@ export default class MobileInkOverlay extends React.Component {
         MobileInkOverlay.Instance = this;
     }
 
+    initialSize(mobileWidth: number, mobileHeight: number) {
+        const maxWidth = window.innerWidth - 30; // TODO: may not be window ?? figure out how to not include library ????
+        const maxHeight = window.innerHeight - 30; // -30 for padding
+        const scale = Math.min(maxWidth / mobileWidth, maxHeight / mobileHeight);
+        return { width: mobileWidth * scale, height: mobileHeight * scale, scale: scale };
+    }
+
     @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;
+        const scaledSize = this.initialSize(width ? width : 0, height ? height : 0);
+        this._width = scaledSize.width;
+        this._height = scaledSize.height;
+        this._scale = scaledSize.scale;
         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,
+            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(points[0].X, points[0].Y);