gridviz 2.1.16 → 3.0.0

package/src/core/Style.js

@@ -0,0 +1,84 @@
+//@ts-check
+'use strict'
+
+import { Drawable } from "./Drawable.js"
+
+/** @typedef {"square"|"circle"|"diamond"|"donut"|"none"} Shape */
+
+/**
+ * viewScale type
+ * Returns an object from a list of cells, 
+ * @typedef {function(Array.<import('./Dataset.js').Cell>,number, number):*} ViewScale */
+
+/**
+ * A style, to show a grid dataset.
+ *
+ * @author Joseph Davies, Julien Gaffuri
+ */
+export class Style extends Drawable {
+    /**
+     * @abstract
+     * @param {{filter?:function(import('./Dataset').Cell):boolean, offset?:function(import('./Dataset').Cell, number, number):{dx:number,dy:number}, visible?:function(number):boolean,alpha?:function(number):number,blendOperation?:function(number):GlobalCompositeOperation,drawFun?:function,viewScale?:ViewScale}} opts
+     */
+    constructor(opts) {
+        super(opts)
+        opts = opts || {}
+
+        /**
+        * @type {ViewScale|undefined} */
+        this.viewScale = opts.viewScale
+
+        /** A filter function to apply to the cell list, to filter out some cells not to be drawn (such as for example the cells with value=0).
+        * @protected
+        * @type {function(import('./Dataset').Cell):boolean} */
+        this.filter = opts.filter || (() => true)
+
+        /** An offset. This is to alter the position of all symbols in a given direction. In geographical unit.
+         * @protected
+         * @type {function(import('./Dataset').Cell,number,number):{dx:number,dy:number}} */
+        this.offset = opts.offset || ((c, r, z) => ({ dx: 0, dy: 0 }))
+
+        /** A draw function for the style.
+         * @type {function|undefined} */
+        this.drawFun = opts.drawFun
+
+        /**
+         * @public
+         * @type {Array.<import("./Legend").Legend>} */
+        this.legends = []
+    }
+
+    /**
+     * Draw cells.
+     *
+     * @param {Array.<import('./Dataset').Cell>} cells The cells to draw.
+     * @param {import("./GeoCanvas").GeoCanvas} geoCanvas The canvas where to draw them.
+     * @param {number} resolution Their resolution (in geographic unit)
+     * @abstract
+     */
+    draw(cells, geoCanvas, resolution) {
+        if (this.drawFun) this.drawFun(cells, geoCanvas, resolution)
+        else throw new Error('Method draw not implemented.')
+    }
+
+    //getters and setters
+
+    /** @returns {function(import('./Dataset').Cell,number,number):{dx:number,dy:number}} */
+    getOffset() {
+        return this.offset
+    }
+    /** @param {function(import('./Dataset').Cell,number,number):{dx:number,dy:number}} val @returns {this} */
+    setOffset(val) {
+        this.offset = val
+        return this
+    }
+
+    /** Hide all legend elements of the style, if any
+     * @param {object} opts
+     * @returns {this} */
+    updateLegends(opts) {
+        for (const lg of this.legends) lg.update(opts)
+        return this
+    }
+
+}

package/src/dataset/COGeo.js

@@ -1,7 +1,7 @@
 //@ts-check
 'use strict'
 
-import { DatasetComponent } from '../DatasetComponent.js'
+import { Dataset } from '../core/Dataset.js'
 
 /**
  * @todo
@@ -10,14 +10,14 @@ import { DatasetComponent } from '../DatasetComponent.js'
  *
  * @author Joseph Davies, Julien Gaffuri
  */
-export class COGeo extends DatasetComponent {
+export class COGeo extends Dataset {
     /**
      *
      * @param {String} url
-     * @param {{preprocess?:(function(import("../Dataset").Cell):boolean)}} opts
+     * @param {{preprocess?:(function(import("../core/Dataset").Cell):boolean)}} opts
      */
-    constructor(url, opts = {}) {
-        super(url, 0, opts)
+    constructor(map, url, opts = {}) {
+        super(map, url, 0, opts)
     }
 
     //TODO Use https://geotiffjs.github.io/

package/src/dataset/CSVGrid.js

@@ -1,83 +1,85 @@
 //@ts-check
 'use strict'
 
-/** @typedef {{ dims: object, crs: string, tileSizeCell: number, originPoint: {x:number,y:number}, resolutionGeo: number, tilingBounds:import("../Dataset").Envelope }} GridInfo */
+/** @typedef {{ dims: object, crs: string, tileSizeCell: number, originPoint: {x:number,y:number}, resolutionGeo: number, tilingBounds:import("../core/GeoCanvas.js").Envelope }} GridInfo */
 
 import { csv } from 'd3-fetch'
-import { DatasetComponent } from '../DatasetComponent.js'
+import { Dataset } from '../core/Dataset.js'
 
 /**
  * A dataset composed of a single CSV file (not tiled).
  *
  * @author Joseph Davies, Julien Gaffuri
  */
-export class CSVGrid extends DatasetComponent {
+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("../Dataset").Cell):boolean)}} opts
+     * @param {{preprocess?:(function(import("../core/Dataset.js").Cell):boolean)}} opts
      */
-    constructor(url, resolution, opts = {}) {
-        super(url, resolution, opts)
+    constructor(map, url, resolution, opts = {}) {
+        super(map, url, resolution, opts)
 
         /**
          * @private
-         * @type {Array.<import("../Dataset").Cell>} */
+         * @type {Array.<import("../core/Dataset.js").Cell>} */
         this.cells = []
 
         /**
          * @type {string}
          * @private  */
         this.infoLoadingStatus = 'notLoaded'
+
+        //get data
+        this.getData(undefined)
     }
 
     /**
      * Request data within a geographic envelope.
-     *
-     * @param {import("../Dataset").Envelope|undefined} e
-     * @param {function():void} redraw
+     * @param {import("../core/GeoCanvas.js").Envelope|undefined} e
      */
-    getData(e, redraw) {
+    getData(e) {
         //check if data already loaded
         if (this.infoLoadingStatus != 'notLoaded') return this
 
         //load data
         this.infoLoadingStatus = 'loading'
-        ;(async () => {
-            try {
-                const data = await csv(this.url)
-
-                //convert coordinates in numbers
-                for (const c of data) {
-                    c.x = +c.x
-                    c.y = +c.y
-                }
+            ; (async () => {
+                try {
+                    const data = await csv(this.url)
 
-                //preprocess/filter
-                if (this.preprocess) {
-                    this.cells = []
+                    //convert coordinates in numbers
                     for (const c of data) {
-                        const b = this.preprocess(c)
-                        if (b == false) continue
-                        this.cells.push(c)
+                        c.x = +c.x
+                        c.y = +c.y
                     }
-                } 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
+                    //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
 
-                //execute the callback, usually a draw function
-                if (redraw) redraw()
+                    //execute the callback, usually a draw function
+                    if (this.map) this.map.redraw()
 
-                this.infoLoadingStatus = 'loaded'
-            } catch (error) {
-                //mark as failed
-                this.infoLoadingStatus = 'failed'
-                this.cells = []
-            }
-        })()
+                    this.infoLoadingStatus = 'loaded'
+                } catch (error) {
+                    //mark as failed
+                    this.infoLoadingStatus = 'failed'
+                    this.cells = []
+                }
+            })()
 
         return this
     }
@@ -85,7 +87,7 @@ export class CSVGrid extends DatasetComponent {
     /**
      * Fill the view cache with all cells which are within a geographical envelope.
      *
-     * @param {import("../Dataset").Envelope} extGeo
+     * @param {import("../core/GeoCanvas.js").Envelope} extGeo
      * @returns {void}
      */
     updateViewCache(extGeo) {

package/src/dataset/GeoTIFF.js

@@ -1,7 +1,7 @@
 //@ts-check
 'use strict'
 
-import { DatasetComponent } from '../DatasetComponent.js'
+import { Dataset } from '../core/Dataset.js'
 //import { fromUrl } from "geotiff"
 
 /**
@@ -10,18 +10,14 @@ import { DatasetComponent } from '../DatasetComponent.js'
  *
  * @author Joseph Davies, Julien Gaffuri
  */
-export class GeoTIFF extends DatasetComponent {
-    /**
-     * @param {string} url The URL of the dataset.
-     * @param {number} resolution The dataset resolution in geographical unit.
-     * @param {{preprocess?:(function(import("../Dataset").Cell):boolean)}} opts
-     */
-    constructor(url, resolution, opts = {}) {
-        super(url, resolution, opts)
+export class GeoTIFF extends Dataset {
+
+    constructor(map, url, resolution, opts = {}) {
+        super(map, url, resolution, opts)
 
         /**
          * @private
-         * @type {Array.<import("../Dataset").Cell>} */
+         * @type {Array.<import("../core/Dataset").Cell>} */
         this.cells = []
 
         /**
@@ -33,10 +29,9 @@ export class GeoTIFF extends DatasetComponent {
     /**
      * Request data within a geographic envelope.
      *
-     * @param {import("../Dataset").Envelope|undefined} e
-     * @param {function():void} redraw
+     * @param {import("../core/GeoCanvas.js").Envelope|undefined} e
      */
-    getData(e, redraw) {
+    getData(e) {
         //check if data already loaded
         if (this.infoLoadingStatus != 'notLoaded') return this
 
@@ -108,7 +103,7 @@ export class GeoTIFF extends DatasetComponent {
     /**
      * Fill the view cache with all cells which are within a geographical envelope.
      *
-     * @param {import("../Dataset").Envelope} extGeo
+     * @param {import("../core/GeoCanvas.js").Envelope} extGeo
      * @returns {void}
      */
     updateViewCache(extGeo) {

package/src/dataset/{LGrid.js → JSGrid.js}

@@ -1,41 +1,40 @@
 //@ts-check
 'use strict'
 
-/** @typedef {{ dims: object, crs: string, tileSizeCell: number, originPoint: {x:number,y:number}, resolutionGeo: number, tilingBounds:import("../Dataset.js").Envelope }} GridInfo */
+/** @typedef {{ dims: object, crs: string, tileSizeCell: number, originPoint: {x:number,y:number}, resolutionGeo: number, tilingBounds:import("../core/GeoCanvas.js").Envelope }} GridInfo */
 
-import { DatasetComponent } from '../DatasetComponent.js'
+import { Dataset } from '../core/Dataset.js'
 
 /**
- * A dataset composed of a single CSV file (not tiled).
+ * A dataset composed of cells defined in javascript, or loaded outside of gridviz map.
  *
  * @author Joseph Davies, Julien Gaffuri
  */
-export class LGrid extends DatasetComponent {
+export class JSGrid extends Dataset {
     /**
      * @param {number} resolution The dataset resolution in geographical unit.
      * @param {Array.<Object>} cells The cells.
      */
     constructor(resolution, cells) {
-        super("", resolution)
+        super(undefined, "", resolution)
 
         /**
          * @private
-         * @type {Array.<import("../Dataset.js").Cell>} */
+         * @type {Array.<import("../core/MultiResolutionDataset.js").Cell>} */
         this.cells = cells || []
     }
 
     /**
      * Request data within a geographic envelope.
      *
-     * @param {import("../Dataset.js").Envelope|undefined} e
-     * @param {function():void} redraw
+     * @param {import("../core/GeoCanvas.js").Envelope|undefined} e
      */
-    getData(e, redraw) { return this }
+    getData(e) { return this }
 
     /**
      * Fill the view cache with all cells which are within a geographical envelope.
      *
-     * @param {import("../Dataset.js").Envelope} extGeo
+     * @param {import("../core/GeoCanvas.js").Envelope} extGeo
      * @returns {void}
      */
     updateViewCache(extGeo) {

package/src/dataset/TiledGrid.js

@@ -1,13 +1,11 @@
 //@ts-check
 'use strict'
 
-/** @typedef {{ dims: object, crs: string, tileSizeCell: number, originPoint: {x:number,y:number}, resolutionGeo: number, tilingBounds:import("../Dataset").Envelope, format:import("../DatasetComponent").Format }} GridInfo */
+/** @typedef {{ dims: object, crs: string, tileSizeCell: number, originPoint: {x:number,y:number}, resolutionGeo: number, tilingBounds:import("../core/GeoCanvas.js").Envelope }} GridInfo */
 
 // internal
-import { GridTile } from './GridTile.js'
-import { App } from '../App.js'
-import { DatasetComponent } from '../DatasetComponent.js'
-import { monitor, monitorDuration } from '../utils/Utils.js'
+import { Dataset } from '../core/Dataset.js'
+//import { monitor, monitorDuration } from '../utils/Utils.js'
 
 // external
 import { json, csv } from 'd3-fetch'
@@ -17,20 +15,14 @@ import { json, csv } from 'd3-fetch'
  *
  * @author Joseph Davies, Julien Gaffuri
  */
-export class TiledGrid extends DatasetComponent {
+export class TiledGrid extends Dataset {
     /**
+     * @param {import("../core/Map.js").Map} map The map.
      * @param {string} url The URL of the dataset.
-     * @param {App} app The application.
-     * @param {{preprocess?:(function(import("../Dataset").Cell):boolean) }} opts
+     * @param {{preprocess?:(function(import("../core/Dataset.js").Cell):boolean) }} opts
      */
-    constructor(url, app, opts = {}) {
-        super(url, 0, opts)
-
-        /**
-         * The app being used.
-         * @type {App}
-         */
-        this.app = app
+    constructor(map, url, opts = {}) {
+        super(map, url, 0, opts)
 
         /**
          * The grid info object, from the info.json file.
@@ -52,15 +44,15 @@ export class TiledGrid extends DatasetComponent {
          * */
         this.cache = {}
 
+        //launch loading
+        this.loadInfo()
     }
 
     /**
      * Load the info.json from the url.
-     *
-     * @param {function():void} callback
      * @returns this
      */
-    loadInfo(callback) {
+    loadInfo() {
         if (!this.info && this.infoLoadingStatus === 'notLoaded') {
             ; (async () => {
                 try {
@@ -68,14 +60,14 @@ export class TiledGrid extends DatasetComponent {
                     this.info = data
                     this.resolution = data.resolutionGeo
                     this.infoLoadingStatus = 'loaded'
-                    if (callback) callback()
+                    this.map.redraw()
                 } catch (error) {
                     //mark as failed
                     this.infoLoadingStatus = 'failed'
                 }
             })()
-        } else if (callback && (this.infoLoadingStatus === 'loaded' || this.infoLoadingStatus === 'failed'))
-            callback()
+        } else if ((this.infoLoadingStatus === 'loaded' || this.infoLoadingStatus === 'failed'))
+            this.map.redraw()
         return this
     }
 
@@ -83,12 +75,12 @@ export class TiledGrid extends DatasetComponent {
      * Compute a tiling envelope from a geographical envelope.
      * This is the function to use to know which tiles to download for a geographical view.
      *
-     * @param {import("../Dataset").Envelope} e
-     * @returns {import("../Dataset").Envelope|undefined}
+     * @param {import("../core/GeoCanvas.js").Envelope} e
+     * @returns {import("../core/GeoCanvas.js").Envelope|undefined}
      */
     getTilingEnvelope(e) {
         if (!this.info) {
-            this.loadInfo(() => { })
+            this.loadInfo()
             return
         }
 
@@ -107,23 +99,22 @@ export class TiledGrid extends DatasetComponent {
     /**
      * Request data within a geographic envelope.
      *
-     * @param {import("../Dataset").Envelope} extGeo
-     * @param {function():void} redrawFun
+     * @param {import('../core/GeoCanvas.js').Envelope} extGeo
      * @returns {this}
      */
-    getData(extGeo, redrawFun) {
+    getData(extGeo) {
         //TODO empty cache when it gets too big ?
 
         //check if info has been loaded
         if (!this.info) return this
 
         //tiles within the scope
-        /** @type {import("../Dataset").Envelope|undefined} */
+        /** @type {import("../core/GeoCanvas.js").Envelope|undefined} */
         const tb = this.getTilingEnvelope(extGeo)
         if (!tb) return this
 
         //grid bounds
-        /** @type {import("../Dataset").Envelope} */
+        /** @type {import("../core/GeoCanvas.js").Envelope} */
         const gb = this.info.tilingBounds
 
         for (let xT = Math.max(tb.xMin, gb.xMin); xT <= Math.min(tb.xMax, gb.xMax); xT++) {
@@ -132,7 +123,7 @@ export class TiledGrid extends DatasetComponent {
                 if (!this.cache[xT]) this.cache[xT] = {}
 
                 //check if tile exists in the cache
-                /** @type {GridTile} */
+                /** @type {object} */
                 let tile = this.cache[xT][yT]
                 if (tile) continue
 
@@ -140,11 +131,11 @@ export class TiledGrid extends DatasetComponent {
                 this.cache[xT][yT] = "loading";
                 (async () => {
                     //request tile
-                    /** @type {Array.<import("../Dataset").Cell>}  */
+                    /** @type {Array.<import("../core/Dataset.js").Cell>}  */
                     let cells
 
                     try {
-                        /** @type {Array.<import("../Dataset").Cell>}  */
+                        /** @type {Array.<import("../core/Dataset.js").Cell>}  */
                         // @ts-ignore
                         const data = await csv(this.url + xT + '/' + yT + '.csv')
 
@@ -174,23 +165,24 @@ export class TiledGrid extends DatasetComponent {
                         console.error('Tile info inknown')
                         return
                     }
-                    const tile_ = new GridTile(cells, xT, yT, this.info)
+                    const tile_ = getGridTile(cells, xT, yT, this.info)
                     this.cache[xT][yT] = tile_
 
                     //if (monitor) monitorDuration('storage')
 
                     //if no redraw is specified, then leave
-                    if (!redrawFun) return
+                    this.map.redraw()
 
                     //check if redraw is really needed, that is if:
 
                     // 1. the dataset belongs to a layer which is visible at the current zoom level
                     let redraw = false
                     //go through the layers
-                    const zf = this.app.getZoomFactor()
-                    for (const lay of this.app.layers) {
-                        if (!lay.visible) continue
-                        if (lay.getDatasetComponent(zf) != this) continue
+                    const z = this.map.getZoom()
+                    for (const lay of this.map.layers) {
+                        if (lay.visible && !lay.visible(z)) continue
+                        if (!lay.getDataset) continue
+                        if (lay.getDataset(z) != this) continue
                         //found one layer. No need to seek more.
                         redraw = true
                         break
@@ -200,7 +192,7 @@ export class TiledGrid extends DatasetComponent {
                     if (!redraw) return
 
                     // 2. the tile is within the view, that is its geo envelope intersects the viewer geo envelope.
-                    const env = this.app.updateExtentGeo()
+                    const env = this.map.updateExtentGeo()
                     const envT = tile_.extGeo
                     if (env.xMax <= envT.xMin) return
                     if (env.xMin >= envT.xMax) return
@@ -211,7 +203,7 @@ export class TiledGrid extends DatasetComponent {
                     //if (monitor) monitorDuration('*** TiledGrid parse end')
 
                     //redraw
-                    redrawFun()
+                    this.map.redraw()
                 })()
             }
         }
@@ -221,7 +213,7 @@ export class TiledGrid extends DatasetComponent {
     /**
      * Fill the view cache with all cells which are within a geographical envelope.
      * @abstract
-     * @param {import("../Dataset").Envelope} extGeo
+     * @param {import("../core/GeoCanvas.js").Envelope} extGeo
      * @returns {void}
      */
     updateViewCache(extGeo) {
@@ -232,19 +224,19 @@ export class TiledGrid extends DatasetComponent {
         if (!this.info) return
 
         //tiles within the scope
-        /** @type {import("../Dataset").Envelope|undefined} */
+        /** @type {import("../core/GeoCanvas.js").Envelope|undefined} */
         const tb = this.getTilingEnvelope(extGeo)
         if (!tb) return
 
         //grid bounds
-        /** @type {import("../Dataset").Envelope} */
+        /** @type {import("../core/GeoCanvas.js").Envelope} */
         const gb = this.info.tilingBounds
 
         for (let xT = Math.max(tb.xMin, gb.xMin); xT <= Math.min(tb.xMax, gb.xMax); xT++) {
             if (!this.cache[xT]) continue
             for (let yT = Math.max(tb.yMin, gb.yMin); yT <= Math.min(tb.yMax, gb.yMax); yT++) {
                 //get tile
-                /** @type {GridTile} */
+                /** @type {object} */
                 const tile = this.cache[xT][yT]
                 if (!tile || typeof tile === 'string') continue
 
@@ -262,3 +254,34 @@ export class TiledGrid extends DatasetComponent {
         }
     }
 }
+
+function getGridTile(cells, xT, yT, gridInfo) {
+
+    const tile = {}
+
+    /** @type {Array.<import("../core/Dataset").Cell>} */
+    tile.cells = cells
+    /** @type {number} */
+    tile.x = xT
+    /** @type {number} */
+    tile.y = yT
+
+    const r = gridInfo.resolutionGeo
+    const s = gridInfo.tileSizeCell
+
+    /** @type {import("../core/GeoCanvas").Envelope} */
+    tile.extGeo = {
+        xMin: gridInfo.originPoint.x + r * s * tile.x,
+        xMax: gridInfo.originPoint.x + r * s * (tile.x + 1),
+        yMin: gridInfo.originPoint.y + r * s * tile.y,
+        yMax: gridInfo.originPoint.y + r * s * (tile.y + 1),
+    }
+
+    //convert cell coordinates into geographical coordinates
+    for (let cell of tile.cells) {
+        cell.x = tile.extGeo.xMin + cell.x * r
+        cell.y = tile.extGeo.yMin + cell.y * r
+    }
+
+    return tile
+}