gridviz 2.0.31 → 2.0.33

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "gridviz",
-    "version": "2.0.31",
+    "version": "2.0.33",
     "description": "Visualization tool for gridded statistics",
     "keywords": [
         "statistics",

package/src/App.js

@@ -160,6 +160,9 @@ export class App {
 
             if (monitor) monitorDuration('End redraw')
 
+            // listen for resize events on the App's container and handle them
+            this.defineResizeObserver(container, canvas)
+
             return this
         }
 
@@ -651,4 +654,38 @@ export class App {
         this.cg.setViewFromURL()
         return this
     }
+
+    /**
+     * @description Add a resize event observer to the Apps container and update the canvas accordingly
+     * @param {HTMLDivElement} container The App's container element
+     * @param {HTMLCanvasElement} canvas The App canvas element
+     * @memberof App
+     */
+    defineResizeObserver(container, canvas) {
+        // listen to resize events
+        const resizeObserver = new ResizeObserver((entries) => {
+            // make sure canvas has been built
+            if (container.clientWidth > 0 && container.clientHeight > 0) {
+                // make sure we dont exceed loop limit first
+                // see: https://stackoverflow.com/questions/49384120/resizeobserver-loop-limit-exceeded
+                window.requestAnimationFrame(() => {
+                    if (!Array.isArray(entries) || !entries.length) {
+                        return
+                    }
+                    // update the app and canvas size
+                    if (this.h !== container.clientHeight || this.w !== container.clientWidth) {
+                        this.h = container.clientHeight
+                        this.w = container.clientWidth
+                        this.cg.h = container.clientHeight
+                        this.cg.w = container.clientWidth
+                        canvas.setAttribute('width', '' + this.w)
+                        canvas.setAttribute('height', '' + this.h)
+                        this.redraw()
+                    }
+                })
+            }
+        })
+
+        resizeObserver.observe(container)
+    }
 }