From 2cb9ab6a1c15eb2ea82d7b1fb42f07783d5dda64 Mon Sep 17 00:00:00 2001
From: David Li
Date: Sun, 6 May 2018 12:31:53 -0400
Subject: [PATCH] Scale sizes up on phones (#162)
---
src/gfx/core.js | 3 ++-
src/gfx/viewport.js | 4 ++++
src/index.js | 4 ++++
src/stage/basestage.js | 16 ++++++++--------
src/stage/stage.js | 4 +---
5 files changed, 19 insertions(+), 12 deletions(-)
create mode 100644 src/gfx/viewport.js
diff --git a/src/gfx/core.js b/src/gfx/core.js
index 2c37aa6b..3d0043c0 100644
--- a/src/gfx/core.js
+++ b/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 };
diff --git a/src/gfx/viewport.js b/src/gfx/viewport.js
new file mode 100644
index 00000000..8ee49cc6
--- /dev/null
+++ b/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;
diff --git a/src/index.js b/src/index.js
index 99e30ec5..6ea659e2 100644
--- a/src/index.js
+++ b/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 }) => {
diff --git a/src/stage/basestage.js b/src/stage/basestage.js
index 7c1dd2fa..c2e0174e 100644
--- a/src/stage/basestage.js
+++ b/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 };
}
/**
diff --git a/src/stage/stage.js b/src/stage/stage.js
index 39013da8..4b76b615 100644
--- a/src/stage/stage.js
+++ b/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 };
}