Scale sizes up on phones (#162)

src/gfx/core.js

@@ -488,7 +488,8 @@ import * as custom from "./custom";
 import * as layout from "./layout";
 import * as shapes from "./shapes";
 import * as ui from "./ui";
+import * as viewport from "./viewport";
 
 export { default as decal } from "./decal";
 export * from "./sprite";
-export { custom, layout, primitive, shapes, ui };
+export { custom, layout, primitive, shapes, ui, viewport };

src/gfx/viewport.js

@@ -0,0 +1,4 @@
+export const IS_PHONE = window.matchMedia("only screen and (max-device-width: 812px) and (-webkit-min-device-pixel-ratio: 1.5)").matches;
+export const IS_TABLET = window.matchMedia("only screen and (max-device-width: 1366px) and (-webkit-min-device-pixel-ratio: 1.5)").matches;
+
+export const IS_MOBILE = IS_PHONE || IS_TABLET;

src/index.js

@@ -68,6 +68,10 @@ function initialize() {
     canvas = document.createElement("canvas");
     document.body.appendChild(canvas);
 
+    if (gfx.viewport.IS_PHONE) {
+        canvas.style.width = "100%";
+    }
+
     // Reducer needs access to the views in order to save their state
     // for undo/redo.
     const reduct = reducer.reduct(es6, views, (id, { x, y }) => {

src/stage/basestage.js

@@ -52,10 +52,11 @@ export default class BaseStage {
     computeDimensions() {
         this.ctx.scale(1.0, 1.0);
         this._height = window.innerHeight - 40;
-        if (window.matchMedia("only screen and (max-device-width: 812px) and (-webkit-min-device-pixel-ratio: 1.5)").matches) {
-            this._width = window.innerWidth;
+        if (gfxCore.viewport.IS_PHONE) {
+            this._width = window.innerWidth * 0.75;
+            this._height *= 0.75;
         }
-        else if (window.matchMedia("only screen and (max-device-width: 1366px) and (-webkit-min-device-pixel-ratio: 1.5)").matches) {
+        else if (gfxCore.viewport.IS_TABLET) {
             this._width = window.innerWidth;
         }
         else {
@@ -104,11 +105,10 @@ export default class BaseStage {
 
     getMousePos(e) {
         const rect = this.canvas.getBoundingClientRect();
-        return {
-            // TODO: scale
-            x: (e.clientX - rect.left),
-            y: (e.clientY - rect.top),
-        };
+        // Scaling
+        const x = ((e.clientX - rect.left) / rect.width) * this._width;
+        const y = ((e.clientY - rect.top) / rect.height) * this.height;
+        return { x, y };
     }
 
     /**

src/stage/stage.js

@@ -440,9 +440,7 @@ export default class Stage extends BaseStage {
     }
 
     getMousePos(e) {
-        const rect = this.canvas.getBoundingClientRect();
-        const x = e.clientX - rect.left;
-        const y = e.clientY - rect.top;
+        const { x, y } = super.getMousePos(e);
 
         return { x: x - this.sidebarWidth, y, sidebar: x - this.sidebarWidth < 0 };
     }