Merge pull request #896 from jaredkhan/high-res

High resolution rendering

OZprivate/rawJS/OZTreeModule/src/controller/controller.js

@@ -58,10 +58,15 @@ class Controller {
   }
   setup_canvas(canvas) {
     this.canvas = canvas;
-    canvas.width = canvas.clientWidth;
-    canvas.height = canvas.clientHeight;
+    canvas.width = Math.floor(canvas.clientWidth * window.devicePixelRatio);
+    canvas.height = Math.floor(canvas.clientHeight * window.devicePixelRatio);
     this.renderer.setup_canvas(canvas);
-    tree_state.setup_canvas(canvas);
+    tree_state.setup_canvas(canvas, canvas.clientWidth, canvas.clientHeight);
+  }
+  resize_canvas() {
+    this.setup_canvas(this.canvas);
+    this.cancel_flight();
+    this.re_calc();
   }
   reset() {
     return this.leap_to(this.root.metacode);  // NB: root is always a node, so ozID positive
@@ -122,16 +127,6 @@ class Controller {
         return;
       }
       call_hook("before_draw");
-      if ((tree_state.widthres != this.canvas.clientWidth)||(tree_state.heightres != this.canvas.clientHeight))
-      {
-          // we are setting 1px on canvas = 1px on screen (client)
-          this.canvas.width = this.canvas.clientWidth;
-          this.canvas.height = this.canvas.clientHeight;
-          this.cancel_flight();
-          this.re_calc();
-          this.renderer.setup_canvas(this.canvas);
-          tree_state.setup_canvas(this.canvas);
-      }
       reset_global_button_action();
       tree_state.last_render_at = new Date();
       this.renderer.refresh(this.root);

OZprivate/rawJS/OZTreeModule/src/interactor/interactor.js

@@ -1,13 +1,24 @@
 import get_mouse_interactor from './mouse';
 import get_touch_interactor from './touch';
 
+const listenForDevicePixelRatioChanges = (callback) => {
+  const mqString = `(resolution: ${window.devicePixelRatio}dppx)`;
+  const media = matchMedia(mqString);
+  const onUpdate = () => {
+    callback();
+    listenForDevicePixelRatioChanges(callback);
+  }
+  media.addEventListener("change", (onUpdate), { once: true });
+};
+
 class Interactor {
   constructor() {
     this.mouse_interactor = get_mouse_interactor();
     this.touch_interactor = get_touch_interactor();
   }
   bind_listener(canvas) {
     window.addEventListener('resize', this.window_resize.bind(this), false);
+    listenForDevicePixelRatioChanges(this.window_resize.bind(this));
     this.mouse_interactor.bind_listener(canvas);
     this.touch_interactor.bind_listener(canvas);
   }
@@ -16,7 +27,8 @@ class Interactor {
     this.mouse_interactor.add_controller(controller);
     this.touch_interactor.add_controller(controller);
   }
-  window_resize(event) {
+  window_resize() {
+    this.controller.resize_canvas();
     this.controller.trigger_refresh_loop();
   }
 }

OZprivate/rawJS/OZTreeModule/src/render/renderer.js

@@ -28,12 +28,15 @@ function add_controller(_c) {
 function setup_canvas(_c) {
   canvas = _c;
   context = canvas.getContext("2d");
+  context.scale(window.devicePixelRatio, window.devicePixelRatio);
   if (!bg_canvas) {
     bg_canvas = document.createElement('canvas');
     bg_context = bg_canvas.getContext('2d');
   }
   bg_canvas.width = _c.width;
   bg_canvas.height = _c.height;
+  bg_context.resetTransform();
+  bg_context.scale(window.devicePixelRatio, window.devicePixelRatio);
 }
 
 function set_temp_context(_c) {

OZprivate/rawJS/OZTreeModule/src/tree_state.js

@@ -38,15 +38,15 @@ class TreeState {
       }
     }
   }
-  setup_canvas(canvas) {
+  setup_canvas(canvas, width_logical_pixels, height_logical_pixels) {
     this._canvas = canvas;
     if (this._xp === null) {
-      this._xp = canvas.width/3;
-      this._yp = canvas.height - 200;
+      this._xp = width_logical_pixels / 3;
+      this._yp = height_logical_pixels - 200;
       this._ws = 1;   
     }
-    this.widthres = canvas.width;
-    this.heightres = canvas.height;
+    this.widthres = width_logical_pixels;
+    this.heightres = height_logical_pixels;
     this._update_focal_area()
     call_hook("window_size_change");
   }

OZprivate/rawJS/OZTreeModule/tests/test_position_helper.js

@@ -12,7 +12,7 @@ import { set_pre_calculator } from '../src/projection/pre_calc/pre_calc';
 import { set_horizon_calculator } from '../src/projection/horizon_calc/horizon_calc';
 
 function fake_controller(factory, widthres, heightres) {
-  tree_state.setup_canvas({ width: widthres, height: heightres });
+  tree_state.setup_canvas({ width: widthres, height: heightres }, widthres, heightres);
 
   const controller = {
     root: factory.get_root(),

OZprivate/rawJS/OZTreeModule/tests/test_tree_state.js

@@ -23,23 +23,31 @@ function test_focal_area(test, expected, message) {
 }
 
 test('focal_area', function (test) {
-  tree_state.setup_canvas({ width: 2000, height: 1000 });
+  tree_state.setup_canvas({ width: 2000, height: 1000 }, 2000, 1000);
   test_focal_area(test, {
     xmin: 2000 * 0.025,
     xmax: 2000 - 2000 * 0.025,
     ymin: 1000 * 0.025,
     ymax: 1000 - 1000 * 0.025,
   }, "Applied border to 2000x1000");
 
-  tree_state.setup_canvas({ width: 500, height: 900 });
+  tree_state.setup_canvas({ width: 4000, height: 2000 }, 2000, 1000);
+  test_focal_area(test, {
+    xmin: 2000 * 0.025,
+    xmax: 2000 - 2000 * 0.025,
+    ymin: 1000 * 0.025,
+    ymax: 1000 - 1000 * 0.025,
+  }, "Applied border to 2000x1000 in 2x resolution");
+
+  tree_state.setup_canvas({ width: 500, height: 900 }, 500, 900);
   test_focal_area(test, {
     xmin: 500 * 0.025,
     xmax: 500 - 500 * 0.025,
     ymin: 900 * 0.025,
     ymax: 900 - 900 * 0.025,
   }, "Applied border to 500x900");
 
-  tree_state.setup_canvas({ width: 2000, height: 1000 });
+  tree_state.setup_canvas({ width: 2000, height: 1000 }, 2000, 1000);
   tree_state.constrain_focal_area(0.75, 0.66);
   test_focal_area(test, {
     xmin: 2000 * (1-0.75) + 2000 * 0.025,
@@ -48,7 +56,7 @@ test('focal_area', function (test) {
     ymax: 1000 - 1000 * 0.025,
   }, "Landscape: constrained by increasing xmin by 1-perc");
 
-  tree_state.setup_canvas({ width: 1000, height: 2000 });
+  tree_state.setup_canvas({ width: 1000, height: 2000 }, 1000, 2000);
   tree_state.constrain_focal_area(0.75, 0.66);
   test_focal_area(test, {
     xmin: 1000 * 0.025,

views/treeviewer/life_expert.html

@@ -59,6 +59,7 @@
                 width: document.getElementById("OneZoomCanvasID").width,
                 height: document.getElementById("OneZoomCanvasID").height,
             });
+            context.scale(window.devicePixelRatio, window.devicePixelRatio);
             onezoom.controller.draw_single_frame(context);
             lnk.href = URL.createObjectURL(new Blob([context.getSerializedSvg(true)], {
                 type: "image/svg+xml",