move resizeObserver out of redraw calls

eurostat · Nov 21, 2024 · b0e9448 · b0e9448
1 parent bdb4576
commit b0e9448
Show file tree

Hide file tree

Showing 3 changed files with 46 additions and 64 deletions.
diff --git a/dist/gridviz.js b/dist/gridviz.js
diff --git a/examples/test/rendering-test.html b/examples/test/rendering-test.html
@@ -41,7 +41,7 @@
             const style = new gridviz.ShapeColorSizeStyle({ color: colorFunction })
 
             //add layer to map
-            map.layers = [new gridviz.GridLayer(dataset, [style], { minPixelsPerCell: 2 })]
+            map.layers = [new gridviz.GridLayer(dataset, [style], { minPixelsPerCell: 1 })]
         </script>
     </body>
 </html>
diff --git a/src/core/Map.js b/src/core/Map.js
@@ -38,7 +38,7 @@ export class Map {
         }
 
         //https://css-tricks.com/absolute-positioning-inside-relative-positioning/
-        this.container.style.position = "relative"; // container element must have relative positioning
+        this.container.style.position = 'relative' // container element must have relative positioning
 
         //set dimensions
         /** @type {number} */
@@ -54,14 +54,15 @@ export class Map {
          * @type {GeoCanvas}
          * @private */
         this.geoCanvas = new GeoCanvas(this._canvas, opts.x, opts.y, opts.z, opts)
-        this.geoCanvas.redraw = () => { this.redraw() }
+        this.geoCanvas.redraw = () => {
+            this.redraw()
+        }
 
         // legend div
         this.legendDivId = opts.legendDivId || 'gvizLegend'
         this.legend = select('#' + this.legendDivId)
         if (this.legend.empty()) this.initialiseLegend()
 
-
         //tooltip
 
         // set App container as default parent element for tooltip
@@ -81,6 +82,9 @@ export class Map {
         this.geoCanvas.canvas.addEventListener('mousemove', this.mouseMoveHandler)
         this.geoCanvas.canvas.addEventListener('mouseout', this.mouseOutHandler)
 
+        // listen for resize events on the App's container and handle them
+        this.defineResizeObserver(this.container, this._canvas)
+
         // add extra logic to onZoomStartFun
         this.geoCanvas.onZoomStartFun = (e) => {
             if (opts.onZoomStartFun) opts.onZoomStartFun(e)
@@ -104,10 +108,10 @@ export class Map {
             opts.defaultGlobalCompositeOperation || this.geoCanvas.ctx.globalCompositeOperation
     }
 
-    /** 
-     * @protected 
+    /**
+     * @protected
      * @returns {HTMLCanvasElement}
-    */
+     */
     initialiseCanvas() {
         const canvas = document.createElement('canvas')
         canvas.setAttribute('width', '' + this.w)
@@ -116,7 +120,6 @@ export class Map {
         return canvas
     }
 
-
     initialiseLegend() {
         this.legend = select(this.container.id && this.container.id != '' ? '#' + this.container.id : 'body')
             .append('div')
@@ -138,8 +141,8 @@ export class Map {
 
     /**
      * Set/get layer stack.
-     * 
-     * @param {undefined|import("./Layer.js").Layer|import("./Layer.js").Layer[]} layers 
+     *
+     * @param {undefined|import("./Layer.js").Layer|import("./Layer.js").Layer[]} layers
      * @returns { this | import("./Layer.js").Layer[] }
      */
     layers_(layers) {
@@ -165,14 +168,12 @@ export class Map {
 
         //go through the layers
         for (const layer of this.layers) {
-
             //check if layer is visible
             if (layer.visible && !layer.visible(z)) continue
 
             //set layer alpha and blend mode
             this.geoCanvas.ctx.globalAlpha = layer.alpha ? layer.alpha(z) : 1.0
-            if (layer.blendOperation)
-                this.geoCanvas.ctx.globalCompositeOperation = layer.blendOperation(z)
+            if (layer.blendOperation) this.geoCanvas.ctx.globalCompositeOperation = layer.blendOperation(z)
 
             //set affin transform to draw with geographical coordinates
             this.geoCanvas.setCanvasTransform()
@@ -181,24 +182,17 @@ export class Map {
             layer.draw(this.geoCanvas, this.legend)
 
             //draw layer filter
-            if (layer.filterColor)
-                layer.drawFilter(this.geoCanvas)
+            if (layer.filterColor) layer.drawFilter(this.geoCanvas)
 
             //restore default alpha and blend operation
             this.geoCanvas.ctx.globalAlpha = 1.0
             this.geoCanvas.ctx.globalCompositeOperation = this.defaultGlobalCompositeOperation
         }
-
-        //
         this.canvasSave = null
 
-        // listen for resize events on the App's container and handle them
-        this.defineResizeObserver(this.container, this._canvas)
-
         return this
     }
 
-
     /**
      * @param {number} marginPx
      * @returns {import('./GeoCanvas.js').Envelope}
@@ -208,8 +202,6 @@ export class Map {
         return this.geoCanvas.updateExtentGeo(marginPx)
     }
 
-
-
     /** @param {MouseEvent} e */
     focusCell(e) {
         //compute mouse geo position
@@ -274,7 +266,6 @@ export class Map {
         }
     }
 
-
     /**
      * Return the cell HTML info at a given geo position.
      * This is usefull for user interactions, to show this info where the user clicks for example.
@@ -316,8 +307,7 @@ export class Map {
         }
     }
 
-
-    /** 
+    /**
      * @param {number} x
      * @param {number} y
      * @param {number|undefined} z
@@ -330,7 +320,9 @@ export class Map {
     }
 
     /** @returns {import('./GeoCanvas.js').View} */
-    getView() { return this.geoCanvas.view }
+    getView() {
+        return this.geoCanvas.view
+    }
 
     /** @returns {number} */
     getZoom() {
@@ -342,7 +334,6 @@ export class Map {
         return this
     }
 
-
     /** @returns {Array.<number|undefined>} */
     getCenterExtent() {
         return this.geoCanvas.getCenterExtent()
@@ -363,8 +354,6 @@ export class Map {
         return this
     }
 
-
-
     /** @returns {string} */
     getBackgroundColor() {
         return this.geoCanvas.backgroundColor
@@ -395,7 +384,7 @@ export class Map {
             x: opts?.x,
             y: opts?.y,
             onZoom: opts?.onZoom,
-            delta: opts?.delta || 0.2
+            delta: opts?.delta || 0.2,
         })
 
         return this
@@ -418,7 +407,7 @@ export class Map {
             id: opts?.id || 'gridviz-fullscreen-button',
             class: opts?.class,
             x: opts?.x,
-            y: opts?.y
+            y: opts?.y,
         })
 
         return this