gridviz 3.0.26 → 3.0.28

package/src/button/ZoomButtons.js

@@ -1,103 +1,103 @@
-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)
-        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
+
+        // 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)
+        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)
+    }
+}

package/src/core/Dataset.js

@@ -1,154 +1,154 @@
-//@ts-check
-'use strict'
-
-/**
- * A grid cell.
- * @typedef {{x: number, y: number}} Cell */
-
-/**
- * A dataset component, of grid cells.
- * @abstract
- *
- * @module core
- * @author Joseph Davies, Julien Gaffuri
- */
-export class Dataset {
-    /**
-     * @param {import("./Map.js").Map} map The map.
-     * @param {string} url The URL of the dataset.
-     * @param {number} resolution The dataset resolution, in the CRS geographical unit.
-     * @param {{preprocess?:function(Cell):boolean, mixedResolution?:function(Cell):number}} opts
-     * @abstract
-     */
-    constructor(map, url, resolution, opts = {}) {
-        /**
-         * The map.
-         * @protected
-         * @type {import("./Map.js").Map} */
-        this.map = map
-
-        /**
-         * The url of the dataset.
-         * @protected
-         * @type {string} */
-        this.url = url
-
-        /**
-         * The dataset resolution in geographical unit.
-         * @protected
-         * @type {number} */
-        this.resolution = resolution
-
-        /**
-         * In case the dataset is a dataset with cells having different resolution,
-         * this is the function returning the resolution of each cell.
-         * @protected
-         * @type {(function(Cell):number )| undefined } */
-        this.mixedResolution = opts.mixedResolution
-
-        /**
-         * A preprocess to run on each cell after loading. It can be used to apply some specific treatment before or compute a new column. And also to determine which cells to keep after loading.
-         * @type {(function(Cell):boolean )| undefined } */
-        this.preprocess = opts.preprocess || undefined
-
-        /** The cells within the view
-         * @protected
-         * @type {Array.<Cell>} */
-        this.cellsViewCache = []
-    }
-
-    /**
-     * Request data within a geographic envelope.
-     *
-     * @abstract
-     * @param {import("./GeoCanvas").Envelope|undefined} extGeo
-     * @returns {this}
-     */
-    getData(extGeo = undefined) {
-        throw new Error('Method getData not implemented.')
-    }
-
-    /**
-     * Fill the view cache with all cells which are within a geographical envelope.
-     * @abstract
-     * @param {import("./GeoCanvas").Envelope} extGeo The view geographical envelope.
-     * @returns {void}
-     */
-    updateViewCache(extGeo) {
-        throw new Error('Method updateViewCache not implemented.')
-    }
-
-    /**
-     * Get a cell under a given position, if any.
-     *
-     * @param {{x:number,y:number}} posGeo
-     * @param {Array.<Cell>} cells Some cells from the dataset (a subset if necessary, usually the view cache).
-     * @returns {Cell|undefined}
-     */
-    getCellFromPosition(posGeo, cells) {
-        //compute candidate cell position
-        /** @type {number} */
-        //const r = this.getResolution()
-        /** @type {number} */
-        //const cellX = r * Math.floor(posGeo.x / r)
-        /** @type {number} */
-        //const cellY = r * Math.floor(posGeo.y / r)
-
-        /*/get cell
-        for (const cell of cells) {
-            if (cell.x != cellX) continue
-            if (cell.y != cellY) continue
-            return cell
-        }
-        return undefined*/
-
-        //rare case of mixed resolution dataset
-        if (this.mixedResolution) {
-            for (const c of cells) {
-                /** @type {number} */
-                const r = +this.mixedResolution(c)
-                if (posGeo.x < c.x) continue
-                else if (c.x + r < posGeo.x) continue
-                else if (posGeo.y < c.y) continue
-                else if (c.y + r < posGeo.y) continue
-                else return c
-            }
-            return undefined
-        }
-
-        //common case
-
-        /** @type {number} */
-        const r = this.getResolution()
-        for (const cell of cells) {
-            if (posGeo.x < cell.x) continue
-            else if (cell.x + r < posGeo.x) continue
-            else if (posGeo.y < cell.y) continue
-            else if (cell.y + r < posGeo.y) continue
-            else return cell
-        }
-        return undefined
-    }
-
-    //getters and setters
-
-    /** @returns {number} */
-    getResolution() {
-        return this.resolution
-    }
-
-    /** @returns {Array.<Cell>} */
-    getViewCache() {
-        return this.cellsViewCache
-    }
-
-    /**
-     * Return the relevant dataset for a specified zoom.
-     * @param {number} z
-     * @param {number} minPixelsPerCell
-     * @returns {Dataset|undefined}
-     * */
-    getDataset(z, minPixelsPerCell) {
-        return this
-    }
-}
+//@ts-check
+'use strict'
+
+/**
+ * A grid cell.
+ * @typedef {{x: number, y: number}} Cell */
+
+/**
+ * A dataset component, of grid cells.
+ * @abstract
+ *
+ * @module core
+ * @author Joseph Davies, Julien Gaffuri
+ */
+export class Dataset {
+    /**
+     * @param {import("./Map.js").Map} map The map.
+     * @param {string} url The URL of the dataset.
+     * @param {number} resolution The dataset resolution, in the CRS geographical unit.
+     * @param {{preprocess?:function(Cell):boolean, mixedResolution?:function(Cell):number}} opts
+     * @abstract
+     */
+    constructor(map, url, resolution, opts = {}) {
+        /**
+         * The map.
+         * @protected
+         * @type {import("./Map.js").Map} */
+        this.map = map
+
+        /**
+         * The url of the dataset.
+         * @protected
+         * @type {string} */
+        this.url = url
+
+        /**
+         * The dataset resolution in geographical unit.
+         * @protected
+         * @type {number} */
+        this.resolution = resolution
+
+        /**
+         * In case the dataset is a dataset with cells having different resolution,
+         * this is the function returning the resolution of each cell.
+         * @protected
+         * @type {(function(Cell):number )| undefined } */
+        this.mixedResolution = opts.mixedResolution
+
+        /**
+         * A preprocess to run on each cell after loading. It can be used to apply some specific treatment before or compute a new column. And also to determine which cells to keep after loading.
+         * @type {(function(Cell):boolean )| undefined } */
+        this.preprocess = opts.preprocess || undefined
+
+        /** The cells within the view
+         * @protected
+         * @type {Array.<Cell>} */
+        this.cellsViewCache = []
+    }
+
+    /**
+     * Request data within a geographic envelope.
+     *
+     * @abstract
+     * @param {import("./GeoCanvas").Envelope|undefined} extGeo
+     * @returns {this}
+     */
+    getData(extGeo = undefined) {
+        throw new Error('Method getData not implemented.')
+    }
+
+    /**
+     * Fill the view cache with all cells which are within a geographical envelope.
+     * @abstract
+     * @param {import("./GeoCanvas").Envelope} extGeo The view geographical envelope.
+     * @returns {void}
+     */
+    updateViewCache(extGeo) {
+        throw new Error('Method updateViewCache not implemented.')
+    }
+
+    /**
+     * Get a cell under a given position, if any.
+     *
+     * @param {{x:number,y:number}} posGeo
+     * @param {Array.<Cell>} cells Some cells from the dataset (a subset if necessary, usually the view cache).
+     * @returns {Cell|undefined}
+     */
+    getCellFromPosition(posGeo, cells) {
+        //compute candidate cell position
+        /** @type {number} */
+        //const r = this.getResolution()
+        /** @type {number} */
+        //const cellX = r * Math.floor(posGeo.x / r)
+        /** @type {number} */
+        //const cellY = r * Math.floor(posGeo.y / r)
+
+        /*/get cell
+        for (const cell of cells) {
+            if (cell.x != cellX) continue
+            if (cell.y != cellY) continue
+            return cell
+        }
+        return undefined*/
+
+        //rare case of mixed resolution dataset
+        if (this.mixedResolution) {
+            for (const c of cells) {
+                /** @type {number} */
+                const r = +this.mixedResolution(c)
+                if (posGeo.x < c.x) continue
+                else if (c.x + r < posGeo.x) continue
+                else if (posGeo.y < c.y) continue
+                else if (c.y + r < posGeo.y) continue
+                else return c
+            }
+            return undefined
+        }
+
+        //common case
+
+        /** @type {number} */
+        const r = this.getResolution()
+        for (const cell of cells) {
+            if (posGeo.x < cell.x) continue
+            else if (cell.x + r < posGeo.x) continue
+            else if (posGeo.y < cell.y) continue
+            else if (cell.y + r < posGeo.y) continue
+            else return cell
+        }
+        return undefined
+    }
+
+    //getters and setters
+
+    /** @returns {number} */
+    getResolution() {
+        return this.resolution
+    }
+
+    /** @returns {Array.<Cell>} */
+    getViewCache() {
+        return this.cellsViewCache
+    }
+
+    /**
+     * Return the relevant dataset for a specified zoom.
+     * @param {number} z
+     * @param {number} minPixelsPerCell
+     * @returns {Dataset|undefined}
+     * */
+    getDataset(z, minPixelsPerCell) {
+        return this
+    }
+}

package/src/core/Drawable.js

@@ -1,78 +1,78 @@
-//@ts-check
-'use strict'
-
-/**
- * This is an abstract class used to group elements shared between Layer and Style classes.
- *
- * @abstract
- * @module core
- * @author Joseph Davies, Julien Gaffuri
- */
-export class Drawable {
-    /**
-     * @param {object} opts
-     */
-    constructor(opts) {
-        opts = opts || {}
-
-        /** A function specifying if the element should be visible or not.
-         * The function parameter is the zoom level.
-         * @type {function(number):boolean} */
-        this.visible = opts.visible
-
-        /** A function returning the alpha (transparency/opacity), between 0.0 (fully transparent) and 1.0 (fully opaque).
-         *  The function parameter is the zoom level.
-         * (see CanvasRenderingContext2D: globalAlpha property)
-         * @type {(function(number):number)|undefined} */
-        this.alpha = opts.alpha
-
-        /** A function returning the blend operation.
-         * The function parameter is the zoom level.
-         * (see CanvasRenderingContext2D: globalCompositeOperation property)
-         * @type {function(number):GlobalCompositeOperation} */
-        this.blendOperation = opts.blendOperation || ((z) => 'source-over')
-
-        /** @type {(function(number):string)|undefined} */
-        this.filterColor = opts.filterColor // (z) => "#eee7"
-        /** @type {(function(number):GlobalCompositeOperation|"none")|undefined} */
-        this.filterBlendOperation = opts.filterBlendOperation // (z) => "multiply"
-    }
-
-    /**
-     * Draw layer filter.
-     *
-     * @param {import("./GeoCanvas.js").GeoCanvas} geoCanvas The canvas where to draw the layer.
-     * @returns {void}
-     * @abstract
-     */
-    drawFilter(geoCanvas) {
-        //no filter: return
-        if (!this.filterColor) return
-
-        //get filter
-        const fc = this.filterColor(geoCanvas.view.z)
-
-        //no filter: return
-        if (!fc || fc == 'none') return
-
-        //draw filter
-
-        //set color
-        geoCanvas.offscreenCtx.fillStyle = fc
-
-        //save blend mode and set new, if any
-        let bo = undefined, bo2 = undefined
-        if (this.filterBlendOperation) {
-            bo = geoCanvas.offscreenCtx.globalCompositeOperation
-            bo2 = this.filterBlendOperation(geoCanvas.view.z)
-        }
-        if (bo2 && bo2 != "none") geoCanvas.offscreenCtx.globalCompositeOperation = bo2;
-
-        //draw
-        geoCanvas.offscreenCtx.fillRect(0, 0, geoCanvas.w, geoCanvas.h)
-
-        //restore blend mode
-        if (bo) geoCanvas.offscreenCtx.globalCompositeOperation = bo;
-
-    }
-}
+//@ts-check
+'use strict'
+
+/**
+ * This is an abstract class used to group elements shared between Layer and Style classes.
+ *
+ * @abstract
+ * @module core
+ * @author Joseph Davies, Julien Gaffuri
+ */
+export class Drawable {
+    /**
+     * @param {object} opts
+     */
+    constructor(opts) {
+        opts = opts || {}
+
+        /** A function specifying if the element should be visible or not.
+         * The function parameter is the zoom level.
+         * @type {function(number):boolean} */
+        this.visible = opts.visible
+
+        /** A function returning the alpha (transparency/opacity), between 0.0 (fully transparent) and 1.0 (fully opaque).
+         *  The function parameter is the zoom level.
+         * (see CanvasRenderingContext2D: globalAlpha property)
+         * @type {(function(number):number)|undefined} */
+        this.alpha = opts.alpha
+
+        /** A function returning the blend operation.
+         * The function parameter is the zoom level.
+         * (see CanvasRenderingContext2D: globalCompositeOperation property)
+         * @type {function(number):GlobalCompositeOperation} */
+        this.blendOperation = opts.blendOperation || ((z) => 'source-over')
+
+        /** @type {(function(number):string)|undefined} */
+        this.filterColor = opts.filterColor // (z) => "#eee7"
+        /** @type {(function(number):GlobalCompositeOperation|"none")|undefined} */
+        this.filterBlendOperation = opts.filterBlendOperation // (z) => "multiply"
+    }
+
+    /**
+     * Draw layer filter.
+     *
+     * @param {import("./GeoCanvas.js").GeoCanvas} geoCanvas The canvas where to draw the layer.
+     * @returns {void}
+     * @abstract
+     */
+    drawFilter(geoCanvas) {
+        //no filter: return
+        if (!this.filterColor) return
+
+        //get filter
+        const fc = this.filterColor(geoCanvas.view.z)
+
+        //no filter: return
+        if (!fc || fc == 'none') return
+
+        //draw filter
+
+        //set color
+        geoCanvas.offscreenCtx.fillStyle = fc
+
+        //save blend mode and set new, if any
+        let bo = undefined, bo2 = undefined
+        if (this.filterBlendOperation) {
+            bo = geoCanvas.offscreenCtx.globalCompositeOperation
+            bo2 = this.filterBlendOperation(geoCanvas.view.z)
+        }
+        if (bo2 && bo2 != "none") geoCanvas.offscreenCtx.globalCompositeOperation = bo2;
+
+        //draw
+        geoCanvas.offscreenCtx.fillRect(0, 0, geoCanvas.w, geoCanvas.h)
+
+        //restore blend mode
+        if (bo) geoCanvas.offscreenCtx.globalCompositeOperation = bo;
+
+    }
+}