gridviz 3.0.23 → 3.0.24

package/src/core/Tooltip.js

@@ -1,182 +1,182 @@
-//@ts-check
-'use strict'
-
-import { select } from 'd3-selection'
-//import { transition } from "d3-transition";
-
-/**
- * A generic class to make a tooltip.
- * It is a div element, which can be moved under the mouse pointer and filled with some information in html.
- * @module core
- */
-export class Tooltip {
-    /**
-     * @param {object} opts
-     */
-    constructor(opts) {
-        opts = opts || {}
-
-        /** @type {string} */
-        this.maxWidth = opts.maxWidth || '20em'
-        /** @type {string} */
-        this.fontSize = opts.fontSize || '1.2em'
-        /** @type {string} */
-        this.background = opts.background || 'white'
-        /** @type {string} */
-        this.padding = opts.padding || '5px'
-        /** @type {string} */
-        this.border = opts.border || '0px'
-        /** @type {string} */
-        this['border-radius'] = opts['border-radius'] || '0px'
-        /** @type {string} */
-        this['box-shadow'] = opts['box-shadow'] || '5px 5px 5px grey'
-        /** @type {string} */
-        this['font-family'] = opts['font-family'] || 'Helvetica, Arial, sans-serif'
-
-        /** @type {number} */
-        this.transitionDuration = opts.transitionDuration || 100
-        /** @type {number} */
-        this.xOffset = opts.xOffset || 30
-        /** @type {number} */
-        this.yOffset = opts.yOffset || 20
-        /** @type {number} */ // e.g. to prevent mouse cursor covering cell being highlighted
-        this.yMouseOffset = opts.yMouseOffset || 0
-        /** @type {number} */
-        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 = 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)
-        this.tooltip.style('overflow', 'hidden')
-        this.tooltip.style('font-size', this.fontSize)
-        this.tooltip.style('background', this.background)
-        this.tooltip.style('padding', this.padding)
-        this.tooltip.style('border', this.border)
-        this.tooltip.style('border-radius', this['border-radius'])
-        this.tooltip.style('box-shadow', this['box-shadow'])
-        this.tooltip.style('font-family', this['font-family'])
-        this.tooltip.style('position', 'absolute')
-        this.tooltip.style('pointer-events', 'none')
-        this.tooltip.style('opacity', '0')
-        this.tooltip.style('text-wrap', 'nowrap')
-        this.tooltip.style('z-index', 99999999) // important for leaflet-gridviz etc
-
-        // 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')
-    }
-
-    /** Show the tooltip */
-    show() {
-        // @ts-ignore
-        this.tooltip.transition().duration(this.transitionDuration).style('opacity', 1)
-    }
-
-    /** Hide the tooltip */
-    hide() {
-        // @ts-ignore
-        this.tooltip.transition().duration(this.transitionDuration).style('opacity', 0)
-    }
-
-    /**
-     * Set the content of the tooltip.
-     * @param {string} html
-     */
-    html(html) {
-        this.tooltip.html(html)
-    }
-
-    /**
-     * Set the position of the tooltip at the mouse event position.
-     * @param {MouseEvent} event
-     */
-    setPosition(event) {
-        // Get the bounding rect of the parent container (map2)
-        let parentRect = this.parentElement.getBoundingClientRect()
-
-        // 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')
-
-        // 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'
-        }
-    }
-
-    /*
-	my.mouseover = function (event, html) {
-		if (html) my.html(html);
-		my.setPosition(event);
-		my.show()
-		//this.ensureTooltipInsideContainer();
-	};
-	
-	my.mousemove = function (event) {
-		my.setPosition(event);
-		//this.ensureTooltipInsideContainer();
-	};
-	
-	my.mouseout = function () {
-		my.hide();
-	};*/
-
-    style(k, v) {
-        if (arguments.length == 1) return this.tooltip.style(k)
-        this.tooltip.style(k, v)
-        return this
-    }
-
-    attr(k, v) {
-        if (arguments.length == 1) return this.tooltip.attr(k)
-        this.tooltip.attr(k, v)
-        return this
-    }
-}
+//@ts-check
+'use strict'
+
+import { select } from 'd3-selection'
+//import { transition } from "d3-transition";
+
+/**
+ * A generic class to make a tooltip.
+ * It is a div element, which can be moved under the mouse pointer and filled with some information in html.
+ * @module core
+ */
+export class Tooltip {
+    /**
+     * @param {object} opts
+     */
+    constructor(opts) {
+        opts = opts || {}
+
+        /** @type {string} */
+        this.maxWidth = opts.maxWidth || '20em'
+        /** @type {string} */
+        this.fontSize = opts.fontSize || '1.2em'
+        /** @type {string} */
+        this.background = opts.background || 'white'
+        /** @type {string} */
+        this.padding = opts.padding || '5px'
+        /** @type {string} */
+        this.border = opts.border || '0px'
+        /** @type {string} */
+        this['border-radius'] = opts['border-radius'] || '0px'
+        /** @type {string} */
+        this['box-shadow'] = opts['box-shadow'] || '5px 5px 5px grey'
+        /** @type {string} */
+        this['font-family'] = opts['font-family'] || 'Helvetica, Arial, sans-serif'
+
+        /** @type {number} */
+        this.transitionDuration = opts.transitionDuration || 100
+        /** @type {number} */
+        this.xOffset = opts.xOffset || 30
+        /** @type {number} */
+        this.yOffset = opts.yOffset || 20
+        /** @type {number} */ // e.g. to prevent mouse cursor covering cell being highlighted
+        this.yMouseOffset = opts.yMouseOffset || 0
+        /** @type {number} */
+        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 = 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)
+        this.tooltip.style('overflow', 'hidden')
+        this.tooltip.style('font-size', this.fontSize)
+        this.tooltip.style('background', this.background)
+        this.tooltip.style('padding', this.padding)
+        this.tooltip.style('border', this.border)
+        this.tooltip.style('border-radius', this['border-radius'])
+        this.tooltip.style('box-shadow', this['box-shadow'])
+        this.tooltip.style('font-family', this['font-family'])
+        this.tooltip.style('position', 'absolute')
+        this.tooltip.style('pointer-events', 'none')
+        this.tooltip.style('opacity', '0')
+        this.tooltip.style('text-wrap', 'nowrap')
+        this.tooltip.style('z-index', 99999999) // important for leaflet-gridviz etc
+
+        // 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')
+    }
+
+    /** Show the tooltip */
+    show() {
+        // @ts-ignore
+        this.tooltip.transition().duration(this.transitionDuration).style('opacity', 1)
+    }
+
+    /** Hide the tooltip */
+    hide() {
+        // @ts-ignore
+        this.tooltip.transition().duration(this.transitionDuration).style('opacity', 0)
+    }
+
+    /**
+     * Set the content of the tooltip.
+     * @param {string} html
+     */
+    html(html) {
+        this.tooltip.html(html)
+    }
+
+    /**
+     * Set the position of the tooltip at the mouse event position.
+     * @param {MouseEvent} event
+     */
+    setPosition(event) {
+        // Get the bounding rect of the parent container (map2)
+        let parentRect = this.parentElement.getBoundingClientRect()
+
+        // 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')
+
+        // 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'
+        }
+    }
+
+    /*
+	my.mouseover = function (event, html) {
+		if (html) my.html(html);
+		my.setPosition(event);
+		my.show()
+		//this.ensureTooltipInsideContainer();
+	};
+	
+	my.mousemove = function (event) {
+		my.setPosition(event);
+		//this.ensureTooltipInsideContainer();
+	};
+	
+	my.mouseout = function () {
+		my.hide();
+	};*/
+
+    style(k, v) {
+        if (arguments.length == 1) return this.tooltip.style(k)
+        this.tooltip.style(k, v)
+        return this
+    }
+
+    attr(k, v) {
+        if (arguments.length == 1) return this.tooltip.attr(k)
+        this.tooltip.attr(k, v)
+        return this
+    }
+}

package/src/dataset/COGeo.js

@@ -1,25 +1,25 @@
-//@ts-check
-'use strict'
-
-import { Dataset } from '../core/Dataset.js'
-
-/**
- * @todo
- * A dataset composed of a COGeo file.
- * @see https://www.cogeo.org/
- *
- * @module dataset
- * @author Joseph Davies, Julien Gaffuri
- */
-export class COGeo extends Dataset {
-    /**
-     *
-     * @param {String} url
-     * @param {{preprocess?:(function(import("../core/Dataset").Cell):boolean)}} opts
-     */
-    constructor(map, url, opts = {}) {
-        super(map, url, 0, opts)
-    }
-
-    //TODO Use https://geotiffjs.github.io/
-}
+//@ts-check
+'use strict'
+
+import { Dataset } from '../core/Dataset.js'
+
+/**
+ * @todo
+ * A dataset composed of a COGeo file.
+ * @see https://www.cogeo.org/
+ *
+ * @module dataset
+ * @author Joseph Davies, Julien Gaffuri
+ */
+export class COGeo extends Dataset {
+    /**
+     *
+     * @param {String} url
+     * @param {{preprocess?:(function(import("../core/Dataset").Cell):boolean)}} opts
+     */
+    constructor(map, url, opts = {}) {
+        super(map, url, 0, opts)
+    }
+
+    //TODO Use https://geotiffjs.github.io/
+}

package/src/dataset/CSVGrid.js

@@ -1,112 +1,112 @@
-//@ts-check
-'use strict'
-
-/** @typedef {{ dims: object, crs: string, tileSizeCell: number, originPoint: {x:number,y:number}, resolutionGeo: number, tilingBounds:import("../core/GeoCanvas.js").Envelope }} GridInfo */
-
-import { dsv } from 'd3-fetch'
-import { Dataset } from '../core/Dataset.js'
-
-/**
- * A dataset composed of a single CSV file (not tiled).
- *
- * @module dataset
- * @author Joseph Davies, Julien Gaffuri
- */
-export class CSVGrid extends Dataset {
-    /**
-     * @param {import("../core/Map.js").Map} map The map.
-     * @param {string} url The URL of the dataset.
-     * @param {number} resolution The dataset resolution in geographical unit.
-     * @param {{preprocess?:(function(import("../core/Dataset.js").Cell):boolean),delimiter?:string}} opts
-     */
-    constructor(map, url, resolution, opts = {}) {
-        super(map, url, resolution, opts)
-
-        /**
-         * @private
-         * @type {Array.<import("../core/Dataset.js").Cell>} */
-        this.cells = []
-
-        /**
-         * @private
-         * @type {string} */
-        this.delimiter = opts.delimiter || ','
-
-        /**
-         * @type {string}
-         * @private  */
-        this.infoLoadingStatus = 'notLoaded'
-
-        //get data
-        this.getData(undefined)
-    }
-
-    /**
-     * Request data within a geographic envelope.
-     * @param {import("../core/GeoCanvas.js").Envelope|undefined} e
-     */
-    getData(e) {
-        //check if data already loaded
-        if (this.infoLoadingStatus != 'notLoaded') return this
-
-        //load data
-        this.infoLoadingStatus = 'loading'
-        ;(async () => {
-            try {
-                const data = await dsv(this.delimiter, this.url)
-
-                //convert coordinates in numbers
-                for (const c of data) {
-                    c.x = +c.x
-                    c.y = +c.y
-                }
-
-                //preprocess/filter
-                if (this.preprocess) {
-                    this.cells = []
-                    for (const c of data) {
-                        const b = this.preprocess(c)
-                        if (b == false) continue
-                        this.cells.push(c)
-                    }
-                } else {
-                    this.cells = data
-                }
-
-                //TODO check if redraw is necessary
-                //that is if the dataset belongs to a layer which is visible at the current zoom level
-
-                //redraw map
-                if (this.map) this.map.redraw()
-
-                this.infoLoadingStatus = 'loaded'
-            } catch (error) {
-                //mark as failed
-                this.infoLoadingStatus = 'failed'
-                this.cells = []
-            }
-        })()
-
-        return this
-    }
-
-    /**
-     * Fill the view cache with all cells which are within a geographical envelope.
-     *
-     * @param {import("../core/GeoCanvas.js").Envelope} extGeo
-     * @returns {void}
-     */
-    updateViewCache(extGeo) {
-        //data not loaded yet
-        if (!this.cells) return
-
-        this.cellsViewCache = []
-        for (const cell of this.cells) {
-            if (+cell.x + this.resolution < extGeo.xMin) continue
-            if (+cell.x - this.resolution > extGeo.xMax) continue
-            if (+cell.y + this.resolution < extGeo.yMin) continue
-            if (+cell.y - this.resolution > extGeo.yMax) continue
-            this.cellsViewCache.push(cell)
-        }
-    }
-}
+//@ts-check
+'use strict'
+
+/** @typedef {{ dims: object, crs: string, tileSizeCell: number, originPoint: {x:number,y:number}, resolutionGeo: number, tilingBounds:import("../core/GeoCanvas.js").Envelope }} GridInfo */
+
+import { dsv } from 'd3-fetch'
+import { Dataset } from '../core/Dataset.js'
+
+/**
+ * A dataset composed of a single CSV file (not tiled).
+ *
+ * @module dataset
+ * @author Joseph Davies, Julien Gaffuri
+ */
+export class CSVGrid extends Dataset {
+    /**
+     * @param {import("../core/Map.js").Map} map The map.
+     * @param {string} url The URL of the dataset.
+     * @param {number} resolution The dataset resolution in geographical unit.
+     * @param {{preprocess?:(function(import("../core/Dataset.js").Cell):boolean),delimiter?:string}} opts
+     */
+    constructor(map, url, resolution, opts = {}) {
+        super(map, url, resolution, opts)
+
+        /**
+         * @private
+         * @type {Array.<import("../core/Dataset.js").Cell>} */
+        this.cells = []
+
+        /**
+         * @private
+         * @type {string} */
+        this.delimiter = opts.delimiter || ','
+
+        /**
+         * @type {string}
+         * @private  */
+        this.infoLoadingStatus = 'notLoaded'
+
+        //get data
+        this.getData(undefined)
+    }
+
+    /**
+     * Request data within a geographic envelope.
+     * @param {import("../core/GeoCanvas.js").Envelope|undefined} e
+     */
+    getData(e) {
+        //check if data already loaded
+        if (this.infoLoadingStatus != 'notLoaded') return this
+
+        //load data
+        this.infoLoadingStatus = 'loading'
+        ;(async () => {
+            try {
+                const data = await dsv(this.delimiter, this.url)
+
+                //convert coordinates in numbers
+                for (const c of data) {
+                    c.x = +c.x
+                    c.y = +c.y
+                }
+
+                //preprocess/filter
+                if (this.preprocess) {
+                    this.cells = []
+                    for (const c of data) {
+                        const b = this.preprocess(c)
+                        if (b == false) continue
+                        this.cells.push(c)
+                    }
+                } else {
+                    this.cells = data
+                }
+
+                //TODO check if redraw is necessary
+                //that is if the dataset belongs to a layer which is visible at the current zoom level
+
+                //redraw map
+                if (this.map) this.map.redraw()
+
+                this.infoLoadingStatus = 'loaded'
+            } catch (error) {
+                //mark as failed
+                this.infoLoadingStatus = 'failed'
+                this.cells = []
+            }
+        })()
+
+        return this
+    }
+
+    /**
+     * Fill the view cache with all cells which are within a geographical envelope.
+     *
+     * @param {import("../core/GeoCanvas.js").Envelope} extGeo
+     * @returns {void}
+     */
+    updateViewCache(extGeo) {
+        //data not loaded yet
+        if (!this.cells) return
+
+        this.cellsViewCache = []
+        for (const cell of this.cells) {
+            if (+cell.x + this.resolution < extGeo.xMin) continue
+            if (+cell.x - this.resolution > extGeo.xMax) continue
+            if (+cell.y + this.resolution < extGeo.yMin) continue
+            if (+cell.y - this.resolution > extGeo.yMax) continue
+            this.cellsViewCache.push(cell)
+        }
+    }
+}