fix: do not cache devicePixelRatio (#3844)

* fix: do not cache devicePixelRatio * feat: add `devicePixelRatio` change listener --------- Co-authored-by: Dominik Moritz <domoritz@gmail.com>
vega · Dec 19, 2023 · ae698ee · ae698ee
1 parent 9f08746
commit ae698ee
Show file tree

Hide file tree

Showing 5 changed files with 32 additions and 4 deletions.
diff --git a/docs/docs/api/view.md b/docs/docs/api/view.md
@@ -37,6 +37,7 @@ Constructor that creates a new View instance for the provided [Vega dataflow *ru
 - *tooltip*: Handler function invoked to support tooltip display. See the [tooltip](#view_tooltip) method.
 - *locale*: Locale definitions for string parsing and formatting of number and date values. The locale object should contain `number` and/or `time` properties with [locale definitions](../locale). If unspecified, the current default locale at the time of instantiation will be used for the View instance. <small>{% include tag ver="5.12" %}</small>
 - *expr*: Alternate evaluator for Vega expressions. See the [interpreter](../../../usage/interpreter) usage documentation. <small>{% include tag ver="5.13" %}</small>
+- *watchPixelRatio*: Boolean flag allowing an event listener to trigger a re-render when the pixel ratio of the page changes (such as via zooming or changing monitors).
 
 The View constructor call is typically followed by a chain of method calls to setup the desired view configuration. After this chain, the [runAsync](#view_runAsync) method evaluates the underlying dataflow graph to update and render the visualization.
 

diff --git a/packages/vega-scenegraph/src/util/canvas/resize.js b/packages/vega-scenegraph/src/util/canvas/resize.js
@@ -2,14 +2,12 @@ function devicePixelRatio() {
   return typeof window !== 'undefined' ? window.devicePixelRatio || 1 : 1;
 }
 
-var pixelRatio = devicePixelRatio();
-
 export default function(canvas, width, height, origin, scaleFactor, opt) {
   const inDOM = typeof HTMLElement !== 'undefined'
               && canvas instanceof HTMLElement
               && canvas.parentNode != null,
         context = canvas.getContext('2d'),
-        ratio = inDOM ? pixelRatio : scaleFactor;
+        ratio = inDOM ? devicePixelRatio() : scaleFactor;
 
   canvas.width = width * ratio;
   canvas.height = height * ratio;

diff --git a/packages/vega-typings/types/runtime/index.d.ts b/packages/vega-typings/types/runtime/index.d.ts
@@ -65,6 +65,7 @@ export interface ViewOptions {
   tooltip?: TooltipHandler;
   locale?: LocaleFormatters;
   expr?: any;
+  watchPixelRatio?: boolean;
 }
 
 export class View {

diff --git a/packages/vega-view/src/View.js b/packages/vega-view/src/View.js
@@ -18,6 +18,7 @@ import {getState, setState} from './state';
 import timer from './timer';
 import defaultTooltip from './tooltip';
 import trap from './trap';
+import watchPixelRatio from './watchPixelRatio';
 
 import {Dataflow, asyncCallback} from 'vega-dataflow';
 import {locale} from 'vega-format';
@@ -113,6 +114,8 @@ export default function View(spec, options) {
 
   // initialize DOM container(s) and renderer
   if (options.container) view.initialize(options.container, options.bind);
+
+  if (options.watchPixelRatio) view._watchPixelRatio();
 }
 
 function lookupSignal(view, name) {
@@ -385,5 +388,8 @@ inherits(View, Dataflow, {
 
   // -- SAVE / RESTORE STATE ----
   getState,
-  setState
+  setState,
+
+  // RE-RENDER ON ZOOM
+  _watchPixelRatio: watchPixelRatio
 });
diff --git a/packages/vega-view/src/watchPixelRatio.js b/packages/vega-view/src/watchPixelRatio.js
@@ -0,0 +1,22 @@
+export default function() {
+  // based on https://developer.mozilla.org/en-US/docs/Web/API/Window/devicePixelRatio#monitoring_screen_resolution_or_zoom_level_changes
+  if (this.renderer() === 'canvas' && this._renderer._canvas) {
+    let remove = null;
+    const updatePixelRatio = () => {
+      if (remove != null) {
+        remove();
+      }
+      const media = matchMedia(`(resolution: ${window.devicePixelRatio}dppx)`);
+      media.addEventListener('change', updatePixelRatio);
+      remove = () => {
+        media.removeEventListener('change', updatePixelRatio);
+      };
+
+      this._renderer._canvas.getContext('2d').pixelRatio = window.devicePixelRatio || 1;
+      this._redraw = true;
+      this._resize = 1;
+      this.resize().runAsync();
+    };
+    updatePixelRatio();
+  }
+}