gridviz 3.0.16 → 3.0.18

package/package.json

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

package/src/button/Button.js

@@ -46,7 +46,7 @@ export class Button {
         this.style('display', 'flex')
         this.style('justify-content', 'center')
         this.style('align-items', 'center')
-        this.style('width', '30px')
+        this.style('width', '35px')
         this.style('height', '30px')
         // this.style(padding , '4px'
 

package/src/button/ZoomButtons.js

@@ -11,80 +11,80 @@ export class ZoomButtons extends Button {
      * @param {Object} opts
      */
     constructor(opts) {
-        super(opts);
-    
-        this.onZoom = opts.onZoom; // custom user event handler
-        this.delta = opts.delta || 0.2;
-    
+        super(opts)
+
+        this.onZoom = opts.onZoom // custom user event handler
+        this.delta = opts.delta || 0.2
+
         // Create zoom in button
-        this.zoomInBtn = document.createElement('a');
-        this.zoomInBtn.id = 'zoom-in';
-        this.zoomInBtn.className = 'gridviz-zoom-button';
-        this.zoomInBtn.title = 'Zoom in';
-        this.zoomInBtn.textContent = '+';
+        this.zoomInBtn = document.createElement('a')
+        this.zoomInBtn.id = 'zoom-in'
+        this.zoomInBtn.className = 'gridviz-zoom-button'
+        this.zoomInBtn.title = 'Zoom in'
+        this.zoomInBtn.textContent = '+'
         this.zoomInBtn.addEventListener('click', (e) => {
-            this.zoomIn(e);
-        });
+            this.zoomIn(e)
+        })
         this.zoomInBtn.addEventListener('mouseover', () => {
-            this.zoomInBtn.style.backgroundColor = 'lightgrey';
-        });
+            this.zoomInBtn.style.backgroundColor = 'lightgrey'
+        })
         this.zoomInBtn.addEventListener('mouseout', () => {
-            this.zoomInBtn.style.backgroundColor = '#ffffff';
-        });
-    
+            this.zoomInBtn.style.backgroundColor = '#ffffff'
+        })
+
         // Create zoom out button
-        this.zoomOutBtn = document.createElement('a');
-        this.zoomOutBtn.id = 'zoom-out';
-        this.zoomOutBtn.className = 'gridviz-zoom-button';
-        this.zoomOutBtn.title = 'Zoom out';
-        this.zoomOutBtn.textContent = '-';
+        this.zoomOutBtn = document.createElement('a')
+        this.zoomOutBtn.id = 'zoom-out'
+        this.zoomOutBtn.className = 'gridviz-zoom-button'
+        this.zoomOutBtn.title = 'Zoom out'
+        this.zoomOutBtn.textContent = '-'
         this.zoomOutBtn.addEventListener('click', (e) => {
-            this.zoomOut(e);
-        });
+            this.zoomOut(e)
+        })
         this.zoomOutBtn.addEventListener('mouseover', () => {
-            this.zoomOutBtn.style.backgroundColor = 'lightgrey';
-        });
+            this.zoomOutBtn.style.backgroundColor = 'lightgrey'
+        })
         this.zoomOutBtn.addEventListener('mouseout', () => {
-            this.zoomOutBtn.style.backgroundColor = '#ffffff';
-        });
-    
+            this.zoomOutBtn.style.backgroundColor = '#ffffff'
+        })
+
         // Set common styles for buttons
-        const buttons = [this.zoomInBtn, this.zoomOutBtn];
+        const buttons = [this.zoomInBtn, this.zoomOutBtn]
         buttons.forEach((btn, index) => {
-            btn.style.alignItems = 'center';
-            btn.style.justifyContent = 'center';
-            btn.style.display = 'flex';
-            btn.style.border = 'none';
-            btn.style.color = 'black';
-            btn.style.textAlign = 'center';
-            btn.style.textDecoration = 'none';
-            btn.style.padding = '4px';
-            btn.style.fontSize = '20px';
-            btn.style.fontWeight = 'bold';
-            btn.style.userSelect = 'none';
-            btn.style.backgroundColor = '#ffffff';
-            if (index === 0) btn.style.borderBottom = '1px solid grey'; // Zoom in button only
-        });
-    
+            btn.style.alignItems = 'center'
+            btn.style.justifyContent = 'center'
+            btn.style.display = 'flex'
+            btn.style.border = 'none'
+            btn.style.color = 'black'
+            btn.style.textAlign = 'center'
+            btn.style.textDecoration = 'none'
+            btn.style.padding = '4px'
+            btn.style.fontSize = '24px'
+            btn.style.fontWeight = 'bold'
+            btn.style.userSelect = 'none'
+            btn.style.backgroundColor = '#ffffff'
+            if (index === 0) btn.style.borderBottom = '1px solid grey' // Zoom in button only
+        })
+
         // Unset parent class height and display for dual buttons
-        this.style('height', 'unset');
-        this.style('display', 'unset');
-    
+        this.style('height', 'unset')
+        this.style('display', 'unset')
+
         // Set position
         if (opts.x) {
-            this.style('left', opts.x + 'px');
+            this.style('left', opts.x + 'px')
         } else {
-            this.style('right', '10px');
+            this.style('right', '10px')
         }
         if (opts.y) {
-            this.style('top', opts.y + 'px');
+            this.style('top', opts.y + 'px')
         } else {
-            this.style('top', '10px');
+            this.style('top', '10px')
         }
-    
+
         // Append buttons to the container
-        this.div.node().appendChild(this.zoomInBtn);
-        this.div.node().appendChild(this.zoomOutBtn);
+        this.div.node().appendChild(this.zoomInBtn)
+        this.div.node().appendChild(this.zoomOutBtn)
     }
 
     /* Zoom in */

package/src/core/GeoCanvas.js

@@ -87,24 +87,29 @@ export class GeoCanvas {
                 .on('zoom', (e) => {
                     const t = e.transform
                     const f = tP.k / t.k
-                    if (f == 1) {
-                        //pan
+
+                    // Get container's bounding rect to adjust for offsets
+                    const containerRect = this.canvas.getBoundingClientRect()
+
+                    // Adjust for container's offset and zoom center
+                    const offsetX = e.sourceEvent.offsetX - containerRect.left
+                    const offsetY = e.sourceEvent.offsetY - containerRect.top
+
+                    if (f === 1) {
+                        // Pan logic
                         const dx = tP.x - t.x
                         const dy = tP.y - t.y
                         this.pan(dx * this.view.z, -dy * this.view.z)
                     } else {
                         const se = e.sourceEvent
+
                         if (se instanceof WheelEvent) {
-                            //zoom at the mouse position
-                            this.zoom(
-                                f,
-                                this.pixToGeoX(e.sourceEvent.offsetX),
-                                this.pixToGeoY(e.sourceEvent.offsetY)
-                            )
+                            // Zoom at mouse position, adjusted by container offset
+                            this.zoom(f, this.pixToGeoX(offsetX), this.pixToGeoY(offsetY))
                         } else if (se instanceof TouchEvent) {
                             if (!se.targetTouches.length) return
-                            //pinch zoom
-                            //compute average position of the touches
+
+                            // Compute average position of the touches
                             let tx = 0,
                                 ty = 0
                             for (let tt of se.targetTouches) {
@@ -113,7 +118,12 @@ export class GeoCanvas {
                             }
                             tx /= se.targetTouches.length
                             ty /= se.targetTouches.length
-                            //zoom at this average position
+
+                            // Adjust for container's offset
+                            tx -= containerRect.left
+                            ty -= containerRect.top
+
+                            // Zoom at the average touch position
                             this.zoom(f, this.pixToGeoX(tx), this.pixToGeoY(ty))
                         }
                     }

package/src/core/Map.js

@@ -60,9 +60,10 @@ export class Map {
         }
 
         // legend div
-        this.legendDivId = opts.legendDivId || 'gvizLegend'
-        this.legend = select('#' + this.legendDivId)
-        if (this.legend.empty()) this.initialiseLegend()
+        this.legend = opts.legendContainer
+            ? select(opts.legendContainer) // Wrap the provided HTML node in a D3 selection
+            : null
+        if (!this.legend) this.initialiseLegend()
 
         //tooltip
 
@@ -122,9 +123,9 @@ export class Map {
     }
 
     initialiseLegend() {
-        this.legend = select(this.container.id && this.container.id != '' ? '#' + this.container.id : 'body')
-            .append('div')
-            .attr('id', this.legendDivId)
+        this.legend = select(this.container)
+            .append('div') // Create a new container
+            .attr('id', 'gridviz-legend')
             .style('position', 'absolute')
             .style('width', 'auto')
             .style('height', 'auto')
@@ -174,8 +175,7 @@ export class Map {
 
             //set layer alpha and blend mode
             this.geoCanvas.offscreenCtx.globalAlpha = layer.alpha ? layer.alpha(z) : 1.0
-            if (layer.blendOperation)
-                this.geoCanvas.offscreenCtx.globalCompositeOperation = layer.blendOperation(z)
+            if (layer.blendOperation) this.geoCanvas.offscreenCtx.globalCompositeOperation = layer.blendOperation(z)
 
             //set affin transform to draw with geographical coordinates
             this.geoCanvas.setCanvasTransform()
@@ -290,8 +290,8 @@ export class Map {
             /** @type {import("./Layer.js").Layer} */
             const layer = this.layers[i]
             if (layer.visible && !layer.visible(z)) continue
+            if (layer.cellInfoHTML === 'none') continue // this is necessary in order to not show tooltips for layers 'on top' (e.g. population circles on top of squares)
             if (!layer.cellInfoHTML) continue
-            //if (layer.cellInfoHTML === 'none') continue
             if (!layer.getDataset) continue
             const dsc = layer.getDataset(z)
             if (!dsc) continue
@@ -433,35 +433,43 @@ export class Map {
      * @memberof App
      */
     defineResizeObserver() {
-        // listen to resize events
+        // Track whether the observer is currently processing a resize event
+        let resizePending = false
+
         const resizeObserver = new ResizeObserver((entries) => {
+            if (!Array.isArray(entries) || !entries.length) return
+
             let container = this.container
-            // make sure canvas has been built
+
+            // Ensure the container has valid dimensions
             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 map and canvas size
-                    if (this.h !== container.clientHeight || this.w !== container.clientWidth) {
-                        this.h = container.clientHeight
-                        this.w = container.clientWidth
-                        this.geoCanvas.h = container.clientHeight
-                        this.geoCanvas.w = container.clientWidth
-                        this.geoCanvas.canvas.setAttribute('width', '' + this.w)
-                        this.geoCanvas.canvas.setAttribute('height', '' + this.h)
-                        // offscreen canvas
-                        this.geoCanvas.offscreenCanvas.setAttribute('width', '' + this.w)
-                        this.geoCanvas.offscreenCanvas.setAttribute('height', '' + this.h)
-                        this.redraw()
-
-                        //update button positions
-                        // if (this.zoomButtons) this.zoomButtons.node.style.left = this.w - 50 + 'px'
-                        // if (this.fullscreenButton) this.fullscreenButton.node.style.left = this.w - 50 + 'px'
-                    }
-                })
+                if (!resizePending) {
+                    resizePending = true // Prevent overlapping resize triggers
+
+                    window.requestAnimationFrame(() => {
+                        resizePending = false // Reset the flag after processing
+
+                        // Check for size changes
+                        if (this.h !== container.clientHeight || this.w !== container.clientWidth) {
+                            this.h = container.clientHeight
+                            this.w = container.clientWidth
+
+                            // Update geoCanvas sizes
+                            this.geoCanvas.h = this.h
+                            this.geoCanvas.w = this.w
+                            this.geoCanvas.canvas.setAttribute('width', String(this.w))
+                            this.geoCanvas.canvas.setAttribute('height', String(this.h))
+                            this.geoCanvas.offscreenCanvas.setAttribute('width', String(this.w))
+                            this.geoCanvas.offscreenCanvas.setAttribute('height', String(this.h))
+
+                            this.redraw()
+
+                            // Optionally reposition UI elements
+                            // if (this.zoomButtons) this.zoomButtons.node.style.left = this.w - 50 + 'px';
+                            // if (this.fullscreenButton) this.fullscreenButton.node.style.left = this.w - 50 + 'px';
+                        }
+                    })
+                }
             }
         })
 

package/src/core/Tooltip.js

@@ -16,8 +16,6 @@ export class Tooltip {
     constructor(opts) {
         opts = opts || {}
 
-        /** @type {string} */
-        this.div = opts.div || 'tooltip_eurostat'
         /** @type {string} */
         this.maxWidth = opts.maxWidth || '20em'
         /** @type {string} */
@@ -47,21 +45,15 @@ export class Tooltip {
         this.xMouseOffset = opts.xMouseOffset || 0
         /** @type {HTMLElement} */
         this.parentElement = opts.parentElement || document.body
+        /** @type {HTMLElement} */
+        this.tooltipElement = opts.tooltipElement || null
 
         /**
          * @public
          * @type {import("d3-selection").Selection} */
-        this.tooltip = select('#' + this.div)
-
-        if (this.tooltip.empty()) {
-            //create tooltip DOM node
-            // this.tooltip = select(
-            //     '#' + this.parentElement.id && this.parentElement.id != ''
-            //         ? '#' + this.parentElement.id
-            //         : 'body'
-            // )
-            this.tooltip = select('body').append('div').attr('id', this.div)
-        }
+        this.tooltip = opts.tooltipElement
+            ? select(opts.tooltipElement) // Wrap the provided HTML node in a D3 selection
+            : select(this.parentElement).append('div').attr('id', 'gridviz-tooltip').attr('class', 'gridviz-tooltip') // create default element
 
         //initialise
         this.tooltip.style('max-width', this.maxWidth)
@@ -78,6 +70,10 @@ export class Tooltip {
         this.tooltip.style('opacity', '0')
         this.tooltip.style('text-wrap', 'nowrap')
 
+        // these placeholders are needed to prevent an infinite DOM resizeObserver loop:
+        this.tooltip.style('left', '0')
+        this.tooltip.style('top', '0')
+
         // aria-labels (thanks to wahlatlas)
         this.tooltip.attr('role', 'tooltip').attr('aria-live', 'polite')
     }
@@ -107,14 +103,51 @@ export class Tooltip {
      * @param {MouseEvent} event
      */
     setPosition(event) {
+        // Get the bounding rect of the parent container (map2)
         let parentRect = this.parentElement.getBoundingClientRect()
 
-        let x = event.pageX + this.xOffset
-        let y = event.pageY - this.yOffset
+        // Get the mouse position (relative to the parent container)
+        let x = event.clientX - parentRect.left + this.xOffset // Relative to parent
+        let y = event.clientY - parentRect.top - this.yOffset // Relative to parent
 
+        // Now, apply the position to the tooltip
         this.tooltip.style('left', x + 'px').style('top', y + 'px')
 
-        this.ensureTooltipInsideContainer(event, parentRect)
+        // Ensure the tooltip stays inside the parent container
+        this.ensureTooltipInsideContainer(event, parentRect, this.tooltip.node())
+    }
+    /**
+     * @function ensureTooltipInsideContainer
+     * @description Prevents the tooltip from overflowing out of the App container (ensures that the tooltip is inside the gridviz container)
+     * @param {MouseEvent} event
+     * @param {DOMRect} parentRect
+     * @param {HTMLElement} tooltipNode
+     */
+    ensureTooltipInsideContainer(event, parentRect, tooltipNode) {
+        let node = tooltipNode
+        let parentWidth = parentRect.width
+        let parentHeight = parentRect.height
+
+        // Ensure tooltip doesn't go beyond the right edge
+        if (node.offsetLeft + node.clientWidth > parentWidth) {
+            let left = event.clientX - node.clientWidth - this.xOffset
+            node.style.left = left + 'px'
+        }
+
+        // Ensure tooltip doesn't go beyond the bottom edge
+        if (node.offsetTop + node.clientHeight > parentHeight) {
+            node.style.top = parentHeight - node.clientHeight + 'px'
+        }
+
+        // Ensure tooltip doesn't go above the top edge
+        if (node.offsetTop < 0) {
+            node.style.top = 0 + 'px'
+        }
+
+        // Ensure tooltip doesn't go beyond the left edge
+        if (node.offsetLeft < 0) {
+            node.style.left = 0 + 'px'
+        }
     }
 
     /*
@@ -145,39 +178,4 @@ export class Tooltip {
         this.tooltip.attr(k, v)
         return this
     }
-
-    /**
-     * @function ensureTooltipInsideContainer
-     * @description Prevents the tooltip from overflowing out of the App container (ensures that the tooltip is inside the gridviz container)
-     * @param {MouseEvent} event
-     * @param {DOMRect} parentRect
-     */
-    ensureTooltipInsideContainer = function (event, parentRect) {
-        let node = this.tooltip.node()
-        let parentWidth = parentRect.width
-        let parentHeight = parentRect.height
-
-        //too far right
-        if (node.offsetLeft > parentRect.left + parentWidth - node.clientWidth) {
-            let left = event.x - node.clientWidth - this.xOffset
-            node.style.left = left + 'px'
-            // check if mouse covers tooltip
-            if (node.offsetLeft + node.clientWidth > event.x) {
-                //move tooltip left so it doesnt cover mouse
-                let left2 = event.x - node.clientWidth - this.xOffset
-                node.style.left = left2 + 'px'
-            }
-            // node.style.top = node.offsetTop + config.yOffset + "px";
-        }
-
-        //too far down
-        if (node.offsetTop + node.clientHeight > parentRect.top + parentHeight) {
-            node.style.top = node.offsetTop - node.clientHeight + 'px'
-        }
-
-        //too far up
-        if (node.offsetTop < parentRect.top) {
-            node.style.top = parentRect.top + this.yOffset + 'px'
-        }
-    }
 }

package/src/utils/utils.js

@@ -7,7 +7,7 @@
  * @param {number} v the value
  * @param {Array.<number>} breaks the breaks
  * @returns The class id, from 0 to breaks.length
- * @deprecated use getClassifier instead
+ * @deprecated use getClassifier instead.
  */
 export function getClass(v, breaks) {
     if (!breaks) return