gridviz 3.1.0 → 3.1.1

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "gridviz",
-    "version": "3.1.0",
+    "version": "3.1.1",
     "description": "Visualization tool for gridded statistics",
     "keywords": [
         "statistics",
@@ -42,6 +42,7 @@
         "doc": "jsdoc -c docs/jsdoc/jsdoc.conf.json",
         "build-prod": "webpack --config webpack.config.prod.cjs",
         "test": "node --test \"test/*.test.js\"",
+        "test:browser": "node test/browser/run.mjs",
         "format": "prettier --write ."
     },
     "files": [
@@ -55,13 +56,14 @@
         "d3-random": "^3.0.1",
         "d3-scale": "^4.0.2",
         "d3-selection": "^3.0.0",
-        "d3-zoom": "^3.0.0",
-        "jsdoc": "^4.0.4"
+        "d3-zoom": "^3.0.0"
     },
     "devDependencies": {
         "@babel/preset-env": "^7.25.4",
         "babel-loader": "^8.1.0",
+        "jsdoc": "^4.0.4",
         "jshint": "^2.12.0",
+        "playwright-core": "^1.64.1",
         "prettier": "^2.8.8",
         "webpack": "^5.96.1",
         "webpack-cli": "^5.1.4",

package/src/button/Button.js

@@ -1,68 +1,77 @@
-import { select } from 'd3-selection'
-
-/**
- * Parent class for button elements used to interact with the gridviz viewer.
- *
- * @module button
- * @author Joseph Davies, Julien Gaffuri
- */
-export class Button {
-    /**
-     * @param {Object} opts
-     * opts.parentNode
-     * opts.id
-     * opts.title
-     * opts.class
-     * opts.onClickFunction
-     * opts.x
-     * opts.y
-     */
-    constructor(opts = {}) {
-        this.map = opts.map
-        this.parentNode = opts.parentNode || opts.map.container
-
-        // the div element
-        if (opts.id) this.div = select('#' + opts.id)
-
-        if (!this.div || this.div.empty()) {
-            this.div = select(document.createElement('div'))
-            if (opts.id) this.div.attr('id', opts.id)
-        }
-
-        if (opts.title) this.div.attr('title', opts.title)
-        this.div.classed('gridviz-button', true)
-        if (opts.class) for (const c of String(opts.class).split(/\s+/)) if (c) this.div.classed(c, true)
-
-        // add events
-        if (opts.onClickFunction) this.div.on('click', opts.onClickFunction)
-
-        //set styles
-        this.style(
-            'box-shadow',
-            '0 7px 8px rgba(0,47,103,.08), 0 0 22px rgba(0,47,103,.04), 0 12px 17px rgba(0,47,103,.04), 0 -4px 4px rgba(0,47,103,.04)'
-        ) //.ecl-u-shadow-3
-        this.style('background-color', '#ffffff')
-        this.style('position', 'absolute')
-        this.style('cursor', 'pointer')
-        this.style('display', 'flex')
-        this.style('justify-content', 'center')
-        this.style('align-items', 'center')
-        this.style('width', '35px')
-        this.style('height', '30px')
-        // this.style(padding , '4px'
-
-        // append to parent
-        this.parentNode.appendChild(this.div.node())
-    }
-
-    /**
-     * Apply a style to the button div.
-     * @param {string} k
-     * @param {string} v
-     * @returns {this}
-     */
-    style(k, v) {
-        this.div.style(k, v)
-        return this
-    }
-}
+import { select } from 'd3-selection'
+
+/**
+ * Parent class for button elements used to interact with the gridviz viewer.
+ *
+ * @module button
+ * @author Joseph Davies, Julien Gaffuri
+ */
+export class Button {
+    /**
+     * @param {Object} opts
+     * opts.parentNode
+     * opts.id
+     * opts.title
+     * opts.class
+     * opts.onClickFunction
+     * opts.x
+     * opts.y
+     */
+    constructor(opts = {}) {
+        this.map = opts.map
+        this.parentNode = opts.parentNode || opts.map.container
+
+        // the div element
+        if (opts.id) this.div = select('#' + opts.id)
+
+        if (!this.div || this.div.empty()) {
+            this.div = select(document.createElement('div'))
+            if (opts.id) this.div.attr('id', opts.id)
+        }
+
+        if (opts.title) this.div.attr('title', opts.title)
+        this.div.classed('gridviz-button', true)
+        if (opts.class) for (const c of String(opts.class).split(/\s+/)) if (c) this.div.classed(c, true)
+
+        // add events
+        if (opts.onClickFunction) this.div.on('click', opts.onClickFunction)
+
+        //set styles: the look of the map controls of the statistical atlas (white, with a thin border and rounded corners).
+        //Each one is a CSS variable with the usual value as fallback, so that a page can change it without !important:
+        //--gridviz-button-color, --gridviz-button-background, --gridviz-button-hover-background, --gridviz-button-border-color,
+        //--gridviz-button-radius and --gridviz-button-size (the width and height, border included)
+        this.style('box-sizing', 'border-box')
+        this.style('box-shadow', 'none')
+        this.style('background-color', Button.BACKGROUND)
+        this.style('border', '1px solid var(--gridviz-button-border-color, #0e47cb)')
+        this.style('border-radius', 'var(--gridviz-button-radius, 10px)')
+        this.style('color', 'var(--gridviz-button-color, #0e47cb)')
+        this.style('overflow', 'hidden')
+        this.style('position', 'absolute')
+        this.style('cursor', 'pointer')
+        this.style('display', 'flex')
+        this.style('justify-content', 'center')
+        this.style('align-items', 'center')
+        this.style('width', 'var(--gridviz-button-size, 38px)')
+        this.style('height', 'var(--gridviz-button-size, 38px)')
+
+        // append to parent
+        this.parentNode.appendChild(this.div.node())
+    }
+
+    /** The background of a button. */
+    static BACKGROUND = 'var(--gridviz-button-background, #ffffff)'
+    /** The background of a button when the mouse is over it. */
+    static HOVER_BACKGROUND = 'var(--gridviz-button-hover-background, #f4f4f4)'
+
+    /**
+     * Apply a style to the button div.
+     * @param {string} k
+     * @param {string} v
+     * @returns {this}
+     */
+    style(k, v) {
+        this.div.style(k, v)
+        return this
+    }
+}

package/src/button/FullscreenButton.js

@@ -1,123 +1,123 @@
-import { Button } from './Button.js'
-
-/**
- * Button for toggling fullscreen mode
- *
- * @module button
- * @author Joseph Davies, Julien Gaffuri
- */
-export class FullscreenButton extends Button {
-    /**
-     * @param {Object} opts
-     * opts.parentNode - the node that the button is appended to
-     * opts.canvas - the gridviz canvas
-     * opts.id
-     * opts.title - HTML title attribute
-     * opts.class - css class
-     * opts.onClickFunction
-     * opts.x - x position of the button
-     * opts.y - y position of the button
-     */
-
-    // default state
-    isFullscreen = false
-
-    constructor(opts) {
-        super(opts)
-        this.div.classed('gridviz-fullscreen-button', true)
-
-        // append fullscreen icon to button container
-        this.div.node().innerHTML = `
-        <svg
-            class="gridviz-fullscreen-icon"
-            style="height: 1.2rem; width: 1.2rem; fill:black; margin:0;"
-            focusable="false"
-            aria-hidden="true"
-        >
-            <svg fill="#000000" viewBox="0 0 96 96" xmlns="http://www.w3.org/2000/svg">
-            <title/>
-            <g>
-            <path d="M30,0H6A5.9966,5.9966,0,0,0,0,6V30a6,6,0,0,0,12,0V12H30A6,6,0,0,0,30,0Z"/>
-            <path d="M90,0H66a6,6,0,0,0,0,12H84V30a6,6,0,0,0,12,0V6A5.9966,5.9966,0,0,0,90,0Z"/>
-            <path d="M30,84H12V66A6,6,0,0,0,0,66V90a5.9966,5.9966,0,0,0,6,6H30a6,6,0,0,0,0-12Z"/>
-            <path d="M90,60a5.9966,5.9966,0,0,0-6,6V84H66a6,6,0,0,0,0,12H90a5.9966,5.9966,0,0,0,6-6V66A5.9966,5.9966,0,0,0,90,60Z"/>
-            </g>
-            </svg>
-        </svg>
-        `
-
-        //save initial map dimensions
-        this.defaultHeight = this.map.h
-        this.defaultWidth = this.map.w
-
-        // event handler
-        this.div.on('click', (e) => {
-            this.onClickFunction(e)
-        })
-        this.div.on('mouseover', (e) => {
-            this.style('background-color', 'lightgrey')
-        })
-        this.div.on('mouseout', (e) => {
-            this.style('background-color', '#ffffff')
-        })
-
-        //set position
-        if (opts.x) {
-            this.style('left', opts.x + 'px')
-        } else {
-            this.style('right', '10px')
-        }
-        if (opts.y) {
-            this.style('top', opts.y + 'px')
-        } else {
-            this.style('top', '90px')
-        }
-    }
-
-    onClickFunction(e) {
-        if (this.isFullscreen) {
-            this.closeFullscreen(this.map.container)
-            //resize canvas to default
-            this.map.h = this.defaultHeight
-            this.map.w = this.defaultWidth
-            this.map.geoCanvas.h = this.defaultHeight
-            this.map.geoCanvas.w = this.defaultWidth
-            this.map.geoCanvas.canvas.setAttribute('width', '' + this.defaultWidth)
-            this.map.geoCanvas.canvas.setAttribute('height', '' + this.defaultHeight)
-            this.map.redraw()
-            this.isFullscreen = false
-        } else {
-            this.openFullscreen(this.map.container)
-            //resize canvas to fullscreen
-            this.map.h = window.screen.height
-            this.map.w = window.screen.width
-            this.isFullscreen = true
-        }
-    }
-
-    /* Open fullscreen */
-    openFullscreen(elem) {
-        if (elem.requestFullscreen) {
-            elem.requestFullscreen()
-        } else if (elem.webkitRequestFullscreen) {
-            /* Safari */
-            elem.webkitRequestFullscreen()
-        } else if (elem.msRequestFullscreen) {
-            /* IE11 */
-            elem.msRequestFullscreen()
-        }
-    }
-
-    /* Close fullscreen */
-    closeFullscreen() {
-        if (document.exitFullscreen) {
-            document.exitFullscreen()
-        } else if (document.webkitExitFullscreen) {
-            /* Safari */
-            document.webkitExitFullscreen()
-        } else if (document.msExitFullscreen) {
-            /* IE11 */
-            document.msExitFullscreen()
-        }
-    }
-}
+import { Button } from './Button.js'
+
+/**
+ * Button for toggling fullscreen mode
+ *
+ * @module button
+ * @author Joseph Davies, Julien Gaffuri
+ */
+export class FullscreenButton extends Button {
+    /**
+     * @param {Object} opts
+     * opts.parentNode - the node that the button is appended to
+     * opts.canvas - the gridviz canvas
+     * opts.id
+     * opts.title - HTML title attribute
+     * opts.class - css class
+     * opts.onClickFunction
+     * opts.x - x position of the button
+     * opts.y - y position of the button
+     */
+
+    // default state
+    isFullscreen = false
+
+    constructor(opts) {
+        super(opts)
+        this.div.classed('gridviz-fullscreen-button', true)
+
+        // append fullscreen icon to button container
+        this.div.node().innerHTML = `
+        <svg
+            class="gridviz-fullscreen-icon"
+            style="height: 20px; width: 20px; fill: currentColor; margin:0;"
+            focusable="false"
+            aria-hidden="true"
+        >
+            <svg fill="currentColor" viewBox="0 0 96 96" xmlns="http://www.w3.org/2000/svg">
+            <title/>
+            <g>
+            <path d="M30,0H6A5.9966,5.9966,0,0,0,0,6V30a6,6,0,0,0,12,0V12H30A6,6,0,0,0,30,0Z"/>
+            <path d="M90,0H66a6,6,0,0,0,0,12H84V30a6,6,0,0,0,12,0V6A5.9966,5.9966,0,0,0,90,0Z"/>
+            <path d="M30,84H12V66A6,6,0,0,0,0,66V90a5.9966,5.9966,0,0,0,6,6H30a6,6,0,0,0,0-12Z"/>
+            <path d="M90,60a5.9966,5.9966,0,0,0-6,6V84H66a6,6,0,0,0,0,12H90a5.9966,5.9966,0,0,0,6-6V66A5.9966,5.9966,0,0,0,90,60Z"/>
+            </g>
+            </svg>
+        </svg>
+        `
+
+        //save initial map dimensions
+        this.defaultHeight = this.map.h
+        this.defaultWidth = this.map.w
+
+        // event handler
+        this.div.on('click', (e) => {
+            this.onClickFunction(e)
+        })
+        this.div.on('mouseover', (e) => {
+            this.style('background-color', Button.HOVER_BACKGROUND)
+        })
+        this.div.on('mouseout', (e) => {
+            this.style('background-color', Button.BACKGROUND)
+        })
+
+        //set position
+        if (opts.x) {
+            this.style('left', opts.x + 'px')
+        } else {
+            this.style('right', '10px')
+        }
+        if (opts.y) {
+            this.style('top', opts.y + 'px')
+        } else {
+            this.style('top', '90px')
+        }
+    }
+
+    onClickFunction(e) {
+        if (this.isFullscreen) {
+            this.closeFullscreen(this.map.container)
+            //resize canvas to default
+            this.map.h = this.defaultHeight
+            this.map.w = this.defaultWidth
+            this.map.geoCanvas.h = this.defaultHeight
+            this.map.geoCanvas.w = this.defaultWidth
+            this.map.geoCanvas.canvas.setAttribute('width', '' + this.defaultWidth)
+            this.map.geoCanvas.canvas.setAttribute('height', '' + this.defaultHeight)
+            this.map.redraw()
+            this.isFullscreen = false
+        } else {
+            this.openFullscreen(this.map.container)
+            //resize canvas to fullscreen
+            this.map.h = window.screen.height
+            this.map.w = window.screen.width
+            this.isFullscreen = true
+        }
+    }
+
+    /* Open fullscreen */
+    openFullscreen(elem) {
+        if (elem.requestFullscreen) {
+            elem.requestFullscreen()
+        } else if (elem.webkitRequestFullscreen) {
+            /* Safari */
+            elem.webkitRequestFullscreen()
+        } else if (elem.msRequestFullscreen) {
+            /* IE11 */
+            elem.msRequestFullscreen()
+        }
+    }
+
+    /* Close fullscreen */
+    closeFullscreen() {
+        if (document.exitFullscreen) {
+            document.exitFullscreen()
+        } else if (document.webkitExitFullscreen) {
+            /* Safari */
+            document.webkitExitFullscreen()
+        } else if (document.msExitFullscreen) {
+            /* IE11 */
+            document.msExitFullscreen()
+        }
+    }
+}

package/src/button/ZoomButtons.js

@@ -1,104 +1,109 @@
-import { Button } from './Button.js'
-
-/**
- * Button for toggling fullscreen mode
- *
- * @module button
- * @author Joseph Davies, Julien Gaffuri
- */
-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
-        this.div.classed('gridviz-zoom-buttons', true)
-
-        // Create zoom in button
-        this.zoomInBtn = document.createElement('a')
-        this.zoomInBtn.id = 'zoom-in'
-        this.zoomInBtn.className = 'gridviz-zoom-button gridviz-zoom-button--in'
-        this.zoomInBtn.title = 'Zoom in'
-        this.zoomInBtn.textContent = '+'
-        this.zoomInBtn.addEventListener('click', (e) => {
-            this.zoomIn(e)
-        })
-        this.zoomInBtn.addEventListener('mouseover', () => {
-            this.zoomInBtn.style.backgroundColor = 'lightgrey'
-        })
-        this.zoomInBtn.addEventListener('mouseout', () => {
-            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 gridviz-zoom-button--out'
-        this.zoomOutBtn.title = 'Zoom out'
-        this.zoomOutBtn.textContent = '-'
-        this.zoomOutBtn.addEventListener('click', (e) => {
-            this.zoomOut(e)
-        })
-        this.zoomOutBtn.addEventListener('mouseover', () => {
-            this.zoomOutBtn.style.backgroundColor = 'lightgrey'
-        })
-        this.zoomOutBtn.addEventListener('mouseout', () => {
-            this.zoomOutBtn.style.backgroundColor = '#ffffff'
-        })
-
-        // Set common styles for buttons
-        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 = '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')
-
-        // Set position
-        if (opts.x) {
-            this.style('left', opts.x + 'px')
-        } else {
-            this.style('right', '10px')
-        }
-        if (opts.y) {
-            this.style('top', opts.y + 'px')
-        } else {
-            this.style('top', '10px')
-        }
-
-        // Append buttons to the container
-        this.div.node().appendChild(this.zoomInBtn)
-        this.div.node().appendChild(this.zoomOutBtn)
-    }
-
-    /* Zoom in */
-    zoomIn(e) {
-        this.map.setZoom(this.map.getZoom() * (1 - this.delta)).redraw()
-        if (this.onZoom) this.onZoom(e)
-        if (this.map.geoCanvas.onZoomFun) this.map.geoCanvas.onZoomFun(e)
-    }
-
-    /* Zoom out */
-    zoomOut(e) {
-        this.map.setZoom(this.map.getZoom() * (1 + this.delta)).redraw()
-        if (this.onZoom) this.onZoom(e)
-        if (this.map.geoCanvas.onZoomFun) this.map.geoCanvas.onZoomFun(e)
-    }
-}
+import { Button } from './Button.js'
+
+/**
+ * Button for toggling fullscreen mode
+ *
+ * @module button
+ * @author Joseph Davies, Julien Gaffuri
+ */
+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
+        this.div.classed('gridviz-zoom-buttons', true)
+
+        // Create zoom in button
+        this.zoomInBtn = document.createElement('a')
+        this.zoomInBtn.id = 'zoom-in'
+        this.zoomInBtn.className = 'gridviz-zoom-button gridviz-zoom-button--in'
+        this.zoomInBtn.title = 'Zoom in'
+        this.zoomInBtn.textContent = '+'
+        this.zoomInBtn.addEventListener('click', (e) => {
+            this.zoomIn(e)
+        })
+        this.zoomInBtn.addEventListener('mouseover', () => {
+            this.zoomInBtn.style.backgroundColor = Button.HOVER_BACKGROUND
+        })
+        this.zoomInBtn.addEventListener('mouseout', () => {
+            this.zoomInBtn.style.backgroundColor = Button.BACKGROUND
+        })
+
+        // Create zoom out button
+        this.zoomOutBtn = document.createElement('a')
+        this.zoomOutBtn.id = 'zoom-out'
+        this.zoomOutBtn.className = 'gridviz-zoom-button gridviz-zoom-button--out'
+        this.zoomOutBtn.title = 'Zoom out'
+        this.zoomOutBtn.textContent = String.fromCharCode(0x2212) // a minus sign, as wide as the plus (not a literal character, which breaks in pages without a charset)
+        this.zoomOutBtn.addEventListener('click', (e) => {
+            this.zoomOut(e)
+        })
+        this.zoomOutBtn.addEventListener('mouseover', () => {
+            this.zoomOutBtn.style.backgroundColor = Button.HOVER_BACKGROUND
+        })
+        this.zoomOutBtn.addEventListener('mouseout', () => {
+            this.zoomOutBtn.style.backgroundColor = Button.BACKGROUND
+        })
+
+        // Set common styles for buttons
+        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 = 'var(--gridviz-button-color, #0e47cb)'
+            btn.style.fontFamily = "'Helvetica Neue', Arial, Helvetica, sans-serif"
+            btn.style.textAlign = 'center'
+            btn.style.textDecoration = 'none'
+            btn.style.padding = '0'
+            btn.style.boxSizing = 'border-box'
+            // the size of the button, less its border
+            btn.style.width = 'calc(var(--gridviz-button-size, 38px) - 2px)'
+            btn.style.height = 'calc(var(--gridviz-button-size, 38px) - 2px)'
+            btn.style.fontSize = '22px'
+            btn.style.fontWeight = 'bold'
+            btn.style.userSelect = 'none'
+            btn.style.backgroundColor = Button.BACKGROUND
+            if (index === 0) btn.style.borderBottom = '1px solid #ccc' // Zoom in button only
+        })
+
+        // Unset parent class height and display for dual buttons
+        this.style('height', 'unset')
+        this.style('display', 'unset')
+
+        // Set position
+        if (opts.x) {
+            this.style('left', opts.x + 'px')
+        } else {
+            this.style('right', '10px')
+        }
+        if (opts.y) {
+            this.style('top', opts.y + 'px')
+        } else {
+            this.style('top', '10px')
+        }
+
+        // Append buttons to the container
+        this.div.node().appendChild(this.zoomInBtn)
+        this.div.node().appendChild(this.zoomOutBtn)
+    }
+
+    /* Zoom in */
+    zoomIn(e) {
+        this.map.setZoom(this.map.getZoom() * (1 - this.delta)).redraw()
+        if (this.onZoom) this.onZoom(e)
+        if (this.map.geoCanvas.onZoomFun) this.map.geoCanvas.onZoomFun(e)
+    }
+
+    /* Zoom out */
+    zoomOut(e) {
+        this.map.setZoom(this.map.getZoom() * (1 + this.delta)).redraw()
+        if (this.onZoom) this.onZoom(e)
+        if (this.map.geoCanvas.onZoomFun) this.map.geoCanvas.onZoomFun(e)
+    }
+}