From 092079625f8d190b16b7a486767dcfb311d80d03 Mon Sep 17 00:00:00 2001
From: cha0s <git@cha0s.io>
Date: Sat, 20 Apr 2019 02:15:04 -0500
Subject: [PATCH] refactor: scaling

---
 packages/graphics/proton/text-node-renderer.js |  5 ++---
 packages/graphics/stage.js                     | 13 ++++++++-----
 packages/physics/body-view.js                  |  4 ++--
 3 files changed, 12 insertions(+), 10 deletions(-)

diff --git a/packages/graphics/proton/text-node-renderer.js b/packages/graphics/proton/text-node-renderer.js
index f29a5d4..4b066be 100644
--- a/packages/graphics/proton/text-node-renderer.js
+++ b/packages/graphics/proton/text-node-renderer.js
@@ -35,10 +35,9 @@ export class TextNode {
     )`;
     div.style.opacity = alpha;
     const camera = stage.camera;
-    const stageScale = stage.scale;
-    const position = Vector.mul([particle.p.x, particle.p.y], stageScale);
+    const position = [particle.p.x, particle.p.y];
     if (camera) {
-      const realOffset = Vector.mul(camera.realOffset, stageScale);
+      const realOffset = camera.realOffset;
       position[0] -= realOffset[0];
       position[1] += realOffset[1];
     }
diff --git a/packages/graphics/stage.js b/packages/graphics/stage.js
index 0d638ac..ddbd8a6 100644
--- a/packages/graphics/stage.js
+++ b/packages/graphics/stage.js
@@ -25,6 +25,8 @@ export class Stage extends decorate(Container) {
     this.element.style.width = '100%';
     // DOM parent.
     this.parent = undefined;
+    // Set scale.
+    this.scale = visibleScale;
     // Canvas renderer.
     this.renderer = new Renderer(size);
     this.renderer.element.style.width = '100%';
@@ -59,8 +61,6 @@ export class Stage extends decorate(Container) {
     this.element.appendChild(this.ui);
     this.element.tabIndex = 0;
     this.on('cameraChanged', this.onCameraChanged, this);
-    // Set scale.
-    this.scale = visibleScale;
   }
 
   addToDom(parent) {
@@ -81,8 +81,8 @@ export class Stage extends decorate(Container) {
     const node = window.document.createElement('div');
     node.className = 'ui';
     node.style.position = 'absolute';
-    node.style.width = `${this.size[0]}px`;
-    node.style.height = `${this.size[1]}px`;
+    node.style.width = `${this.size[0] / this.scale[0]}px`;
+    node.style.height = `${this.size[1] / this.scale[1]}px`;
     node.style.left = 0;
     node.style.top = 0;
     node.style.transformOrigin = '0 0 0';
@@ -186,7 +186,10 @@ export class Stage extends decorate(Container) {
     }
     // Precalc the transformation ratio and apply it to the UI layer.
     this._transformRatio = this.size[0] / this.element.clientWidth;
-    this.ui.style.transform = `scale(${1 / this._transformRatio})`;
+    const scaleFactor = 1 / this._transformRatio;
+    const scaleX = scaleFactor * this.scale[0];
+    const scaleY = scaleFactor * this.scale[1];
+    this.ui.style.transform = `scaleX(${scaleX}) scaleY(${scaleY})`;
     this.emit('displaySizeChanged', this.displaySize);
   }
 
diff --git a/packages/physics/body-view.js b/packages/physics/body-view.js
index e4c6bb1..2465f64 100644
--- a/packages/physics/body-view.js
+++ b/packages/physics/body-view.js
@@ -28,7 +28,7 @@ export class BodyView extends Renderable {
         primitives.drawLine(
           lastVertice,
           vertice,
-          Primitives.lineStyle(new Color(255, 255, 0), 0.5),
+          Primitives.lineStyle(new Color(255, 255, 0), 1),
         );
       }
       lastVertice = vertice;
@@ -36,7 +36,7 @@ export class BodyView extends Renderable {
     primitives.drawLine(
       lastVertice,
       firstVertice,
-      Primitives.lineStyle(new Color(255, 255, 0), 0.5),
+      Primitives.lineStyle(new Color(255, 255, 0), 1),
     );
   }