gridviz 3.0.15 → 3.0.17

package/package.json

@@ -1,74 +1,74 @@
-{
-    "name": "gridviz",
-    "version": "3.0.15",
-    "description": "Visualization tool for gridded statistics",
-    "keywords": [
-        "statistics",
-        "grid",
-        "gridded",
-        "grids",
-        "gridded statistics",
-        "dataviz",
-        "csv",
-        "GIS",
-        "WebGL",
-        "d3",
-        "cartography",
-        "bertin",
-        "geospatial",
-        "mapping"
-    ],
-    "homepage": "https://github.com/eurostat/gridviz",
-    "author": "Joseph Davies, Julien Gaffuri",
-    "license": "EUPL-1.2",
-    "repository": {
-        "type": "git",
-        "url": "git+https://github.com/eurostat/gridviz.git"
-    },
-    "bugs": {
-        "url": "https://github.com/eurostat/gridviz/issues",
-        "email": "Joseph.DAVIES@ext.ec.europa.eu"
-    },
-    "type": "module",
-    "main": "dist/gridviz.min.js",
-    "module": "dist/gridviz.min.js",
-    "exports": {
-        "umd": "./dist/gridviz.min.js",
-        "default": "./src/index.js"
-    },
-    "scripts": {
-        "start": "export NODE_OPTIONS=--openssl-legacy-provider && webpack --config webpack.config.dev.cjs",
-        "start-dev": "webpack --config webpack.config.dev.cjs",
-        "server": "webpack serve -c webpack.config.dev.cjs",
-        "doc": "jsdoc -c docs/jsdoc/jsdoc.conf.json",
-        "bp": "webpack --config webpack.config.prod.cjs",
-        "test": "jest"
-    },
-    "files": [
-        "dist/**/*.js",
-        "src/**/*.js"
-    ],
-    "dependencies": {
-        "d3-array": "^3.2.4",
-        "d3-color": "^3.1.0",
-        "d3-fetch": "^3.0.1",
-        "d3-random": "^3.0.1",
-        "d3-scale": "^4.0.2",
-        "d3-selection": "^3.0.0",
-        "d3-zoom": "^3.0.0",
-        "jsdoc": "^4.0.4"
-    },
-    "devDependencies": {
-        "@babel/preset-env": "^7.25.4",
-        "babel-loader": "^8.1.0",
-        "jshint": "^2.12.0",
-        "prettier": "2.8.8",
-        "webpack": "^5.96.1",
-        "webpack-cli": "^5.1.4",
-        "webpack-dev-server": "^5.1.0",
-        "webpack-livereload-plugin": "^3.0.2"
-    },
-    "engines": {
-        "node": ">=14"
-    }
-}
+{
+    "name": "gridviz",
+    "version": "3.0.17",
+    "description": "Visualization tool for gridded statistics",
+    "keywords": [
+        "statistics",
+        "grid",
+        "gridded",
+        "grids",
+        "gridded statistics",
+        "dataviz",
+        "csv",
+        "GIS",
+        "WebGL",
+        "d3",
+        "cartography",
+        "bertin",
+        "geospatial",
+        "mapping"
+    ],
+    "homepage": "https://github.com/eurostat/gridviz",
+    "author": "Joseph Davies, Julien Gaffuri",
+    "license": "EUPL-1.2",
+    "repository": {
+        "type": "git",
+        "url": "git+https://github.com/eurostat/gridviz.git"
+    },
+    "bugs": {
+        "url": "https://github.com/eurostat/gridviz/issues",
+        "email": "Joseph.DAVIES@ext.ec.europa.eu"
+    },
+    "type": "module",
+    "main": "dist/gridviz.min.js",
+    "module": "dist/gridviz.min.js",
+    "exports": {
+        "umd": "./dist/gridviz.min.js",
+        "default": "./src/index.js"
+    },
+    "scripts": {
+        "start": "webpack --config webpack.config.dev.cjs",
+        "server": "webpack serve -c webpack.config.dev.cjs",
+        "doc": "jsdoc -c docs/jsdoc/jsdoc.conf.json",
+        "build-prod": "webpack --config webpack.config.prod.cjs",
+        "test": "jest",
+        "format": "prettier --write ."
+    },
+    "files": [
+        "dist/**/*.js",
+        "src/**/*.js"
+    ],
+    "dependencies": {
+        "d3-array": "^3.2.4",
+        "d3-color": "^3.1.0",
+        "d3-fetch": "^3.0.1",
+        "d3-random": "^3.0.1",
+        "d3-scale": "^4.0.2",
+        "d3-selection": "^3.0.0",
+        "d3-zoom": "^3.0.0",
+        "jsdoc": "^4.0.4"
+    },
+    "devDependencies": {
+        "@babel/preset-env": "^7.25.4",
+        "babel-loader": "^8.1.0",
+        "jshint": "^2.12.0",
+        "prettier": "^2.8.8",
+        "webpack": "^5.96.1",
+        "webpack-cli": "^5.1.4",
+        "webpack-dev-server": "^5.1.0",
+        "webpack-livereload-plugin": "^3.0.2"
+    },
+    "engines": {
+        "node": ">=14"
+    }
+}

package/src/button/ZoomButtons.js

@@ -1,96 +1,101 @@
-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
-
-        // zoom in btn
-        this.zoomInBtn = document.createElement('a')
-        this.zoomInBtn.innerHTML = `<a id="zoomin" class="gridviz-zoom-button" title="Zoom in">+</a>`
-        this.zoomInBtn.title = 'Zoom in'
-        this.zoomInBtn.addEventListener('click', (e) => {
-            this.zoomIn(e)
-        })
-        this.zoomInBtn.addEventListener('mouseover', (e) => {
-            this.zoomInBtn.style.backgroundColor = 'lightgrey'
-        })
-        this.zoomInBtn.addEventListener('mouseout', (e) => {
-            this.zoomInBtn.style.backgroundColor = '#ffffff'
-        })
-
-        // zoom out btn
-        this.zoomOutBtn = document.createElement('a')
-        this.zoomOutBtn.innerHTML = `<a id="zoomin" class="gridviz-zoom-button" title="Zoom out">-</a>`
-        this.zoomOutBtn.title = 'Zoom out'
-        this.zoomOutBtn.addEventListener('click', (e) => {
-            this.zoomOut(e)
-        })
-        this.zoomOutBtn.addEventListener('mouseover', (e) => {
-            this.zoomOutBtn.style.backgroundColor = 'lightgrey'
-        })
-        this.zoomOutBtn.addEventListener('mouseout', (e) => {
-            this.zoomOutBtn.style.backgroundColor = '#ffffff'
-        })
-
-        //set styles
-        let btns = [this.zoomInBtn, this.zoomOutBtn]
-        btns.forEach((btn, i) => {
-            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'
-            if (i == 0) btn.style.borderBottom = '1px solid grey'
-        })
-
-        // 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 to button 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)
-    }
-
-    /* Zoom out */
-    zoomOut(e) {
-        this.map.setZoom(this.map.getZoom() * (1 + this.delta)).redraw()
-        if (this.onZoom) this.onZoom(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
+
+        // 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.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'
+        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)
+    }
+
+    /* Zoom out */
+    zoomOut(e) {
+        this.map.setZoom(this.map.getZoom() * (1 + this.delta)).redraw()
+        if (this.onZoom) this.onZoom(e)
+    }
+}