1 files changed, 17 insertions, 9 deletions

diff --git a/web/pw-visualizer/src/webgl/util.ts b/web/pw-visualizer/src/webgl/util.ts
index e08af3f..7b55d19 100644
--- a/web/pw-visualizer/src/webgl/util.ts
+++ b/web/pw-visualizer/src/webgl/util.ts
@@ -87,30 +87,39 @@ export class Resizer {
         this.viewbox = [...viewbox];
         this.el_box = [el.width, el.height];
 
+        // QUICK FIX:
+        // when filling the full display canvas, the turn bar will obstruct the bottom planets.
+        // to resolve this, we shift the viewbox up by 50px.
+        // This should be implemented in a cleaner way, though :(
+        let dy = 50 * viewbox[3] / el.height;
+        this.viewbox[1] -= dy;
+        this.viewbox[3] += dy;
+
         if (keep_aspect_ratio) {
             const or_width = this.viewbox[2];
             const or_height = this.viewbox[3];
 
-            const width_percentage =  this.viewbox[2] / el.width;
-            const height_percentage = this.viewbox[3] / el.height;
+            const width_percentage =  this.viewbox[2] / this.el_box[0];
+            const height_percentage = this.viewbox[3] / this.el_box[1];
+
 
             if (width_percentage < height_percentage) {
                 // width should be larger
-                this.viewbox[2] = height_percentage * el.width;
+                this.viewbox[2] = height_percentage * this.el_box[0];
             } else {
                 // height should be larger
-                this.viewbox[3] = width_percentage * el.height;
+                this.viewbox[3] = width_percentage * this.el_box[1];
             }
 
             this.viewbox[0] -= (this.viewbox[2] - or_width) / 2;
             this.viewbox[1] -= (this.viewbox[3] - or_height) / 2;
 
+
             this.scaleX = this.viewbox[2] / this.viewbox[3];
         }
 
         this.orig_viewbox = [...this.viewbox];
 
-        el.addEventListener("mouseenter", this.mouseenter.bind(this), { capture: false, passive: true});
         el.addEventListener("mouseleave", this.mouseleave.bind(this), { capture: false, passive: true});
         el.addEventListener("mousemove", this.mousemove.bind(this), { capture: false, passive: true});
         el.addEventListener("mousedown", this.mousedown.bind(this), { capture: false, passive: true});
@@ -127,15 +136,14 @@ export class Resizer {
         this.viewbox[1] = Math.min(this.viewbox[1] + this.viewbox[3], this.orig_viewbox[1] + this.orig_viewbox[3]) - this.viewbox[3];
     }
 
-    mouseenter() {
-        this.hoovering = true;
-    }
-
     mouseleave() {
         this.hoovering = false;
     }
 
     mousemove(e: MouseEvent) {
+        // when using mouseenter, hooveing will not be set to true if the mouse is already on the element when it is being created.
+        // TODO: is there a better way?
+        this.hoovering = true;
         this.mouse_pos = [e.offsetX, this.el_box[1] - e.offsetY];
 
         if (this.dragging) {