gridviz 3.0.31 → 3.0.33

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "gridviz",
-    "version": "3.0.31",
+    "version": "3.0.33",
     "description": "Visualization tool for gridded statistics",
     "keywords": [
         "statistics",

package/src/core/Drawable.js

@@ -30,7 +30,7 @@ export class Drawable {
          * The function parameter is the zoom level.
          * (see CanvasRenderingContext2D: globalCompositeOperation property)
          * @type {function(number):GlobalCompositeOperation} */
-        this.blendOperation = opts.blendOperation || ((z) => 'source-over')
+        this.blendOperation = opts.blendOperation //|| ((z) => 'source-over')
 
         /** @type {(function(number):string)|undefined} */
         this.filterColor = opts.filterColor // (z) => "#eee7"
@@ -39,7 +39,7 @@ export class Drawable {
     }
 
     /**
-     * Draw layer filter.
+     * Draw filter.
      *
      * @param {import("./GeoCanvas.js").GeoCanvas} geoCanvas The canvas where to draw the layer.
      * @returns {void}

package/src/core/Map.js

@@ -76,6 +76,7 @@ export class Map {
         this.legend = opts.legendContainer
             ? select(opts.legendContainer) // Wrap the provided HTML node in a D3 selection
             : null
+        this._legendProvidedByUser = !!opts.legendContainer
         if (!this.legend) this.initialiseLegend()
 
         //tooltip
@@ -181,14 +182,19 @@ export class Map {
         const z = this.geoCanvas.view.z
         this.updateExtentGeo()
 
+        const ctx = this.geoCanvas.offscreenCtx
+
         //go through the layers
         for (const layer of this.layers) {
             //check if layer is visible
             if (layer.visible && !layer.visible(z)) continue
 
             //set layer alpha and blend mode
-            this.geoCanvas.offscreenCtx.globalAlpha = layer.alpha ? layer.alpha(z) : 1.0
-            if (layer.blendOperation) this.geoCanvas.offscreenCtx.globalCompositeOperation = layer.blendOperation(z)
+            if (layer.alpha || layer.blendOperation) {
+                ctx.save()
+                if (layer.alpha) ctx.globalAlpha = layer.alpha(z)
+                if (layer.blendOperation) ctx.globalCompositeOperation = layer.blendOperation(z)
+            }
 
             //set affin transform to draw with geographical coordinates
             this.geoCanvas.setCanvasTransform()
@@ -200,8 +206,7 @@ export class Map {
             if (layer.filterColor) layer.drawFilter(this.geoCanvas)
 
             //restore default alpha and blend operation
-            this.geoCanvas.offscreenCtx.globalAlpha = 1.0
-            this.geoCanvas.offscreenCtx.globalCompositeOperation = this.defaultGlobalCompositeOperation
+            if (layer.alpha || layer.blendOperation) ctx.restore()
         }
 
         // one drawImage call: draw the offscreen canvas to the main canvas
@@ -536,7 +541,10 @@ export class Map {
         this.geoCanvas.canvas.remove()
 
         // remove legend
-        this.legend?.remove()
+        // only remove legend if gridviz created it
+        if (!this._legendProvidedByUser) {
+            this.legend?.remove()
+        }
 
         // remove tooltip
         this.tooltip.tooltip?.remove()

package/src/index.js

@@ -23,6 +23,7 @@ export { SegmentStyle } from './style/SegmentStyle.js'
 export { TextStyle } from './style/TextStyle.js'
 export { PillarStyle } from './style/PillarStyle.js'
 export { SideStyle } from './style/SideStyle.js'
+export { ShadingRayStyle } from './style/ShadingRayStyle.js'
 export { ShadingStyle } from './style/ShadingStyle.js'
 export { SideCategoryStyle } from './style/SideCategoryStyle.js'
 export { DotDensityStyle } from './style/DotDensityStyle.js'
@@ -35,6 +36,7 @@ export { NinjaStarStyle } from './style/NinjaStarStyle.js'
 export { TimeSeriesStyle } from './style/TimeSeriesStyle.js'
 export { IsoFenceStyle } from './style/IsoFenceStyle.js'
 export { ImageStyle } from './style/ImageStyle.js'
+export { Interpolator } from './style/Interpolator.js'
 
 // export additional layers
 export { GridLayer } from './layer/GridLayer.js'
@@ -62,7 +64,7 @@ export { TernaryLegend } from './legend/TernaryLegend.js'
 export * from './utils/stretching.js'
 export * from './utils/scale.js'
 export * from './utils/ternary.js'
-export { nice } from './utils/utils.js'
+export { nice, cellsToMatrix } from './utils/utils.js'
 
 import { GeoCanvas } from './core/GeoCanvas.js'
 export const getParameterByName = GeoCanvas.getParameterByName

package/src/layer/GridLayer.js

@@ -60,15 +60,26 @@ export class GridLayer extends Layer {
         //update dataset view cache
         dsc.updateViewCache(geoCanvas.extGeo)
 
+
+        //set layer alpha and blend mode
+        if (this.alpha || this.blendOperation) {
+            ctx.save()
+            if (this.alpha) ctx.globalAlpha = this.alpha(z)
+            if (this.blendOperation) ctx.globalCompositeOperation = this.blendOperation(z)
+        }
+
         //draw cells, style by style
         for (const s of this.styles) {
             //check if style is visible
             if (s.visible && !s.visible(z)) continue
 
-            //set style alpha and blend mode
-            //TODO: multiply by layer alpha ?
-            ctx.globalAlpha = s.alpha ? s.alpha(z) : 1.0
-            if (s.blendOperation) ctx.globalCompositeOperation = s.blendOperation(z)
+            // set style alpha and blend mode
+            //TODO: multiply style alpha by layer alpha ?
+            if (s.alpha || s.blendOperation) {
+                ctx.save()
+                if (s.alpha) ctx.globalAlpha = s.alpha(z)
+                if (s.blendOperation) ctx.globalCompositeOperation = s.blendOperation(z)
+            }
 
             //set affin transform to draw with geographical coordinates
             geoCanvas.setCanvasTransform()
@@ -78,8 +89,14 @@ export class GridLayer extends Layer {
 
             //draw style filter
             if (s.filterColor) s.drawFilter(geoCanvas)
+
+            //restore default alpha and blend operation - before style change
+            if (s.alpha || s.blendOperation) ctx.restore()
         }
 
+        //restore default alpha and blend operation - before layer change
+        if (this.alpha || this.blendOperation) ctx.restore()
+
         //add legend element
         if (legend) {
             for (const s of this.styles) {

package/src/legend/TernaryLegend.js

@@ -19,7 +19,7 @@ export class TernaryLegend extends Legend {
         this.classifier = opts.classifier
 
         this.width = opts.width || 150
-        this.selectionColor = this.selectionColor || 'red'
+        this.selectionColor = opts.selectionColor || 'red'
         this.tooltip = opts.tooltip
         this.texts = opts.texts
 

package/src/style/Interpolator.js

@@ -0,0 +1,258 @@
+//@ts-check
+'use strict'
+
+import { Style } from '../core/Style.js'
+import { cellsToMatrix } from '../utils/utils.js'
+
+/**
+ * @module style
+ * @author Julien Gaffuri
+ */
+export class Interpolator extends Style {
+    /** @param {object} opts */
+    constructor(opts) {
+        super(opts)
+        opts = opts || {}
+
+        /** The cell value to interpolate
+         * @type { function } } */
+        this.value = opts.value //(c) => elevation
+
+        /** The target resolution. As a function (resolution, z) => targetResolution
+         * NB: Try to make sure that resolution/targetResolution is an integer.
+         * @type { function } } */
+        this.targetResolution = opts.targetResolution || ((r, z) => r / 5)
+
+        /** the property name to store the interpolated value in the cell
+         * @type { string } } */
+        this.interpolatedProperty = opts.interpolatedProperty || 'value'
+
+        // the interpolation method: currently only 'bilinear' is supported
+        //this.method = opts.method || 'bilinear' // 'nearest', 'bilinear'
+
+        /** when a neighbor cell has no value, take zero value or average of surrounding cells
+         * @type { string } } */
+        this.nodataHandling = opts.nodataHandling || "zero" // 'zero', 'average'
+
+        /** The styles to represent the interpolated grid.
+         * @type {Array.<Style>} */
+        this.styles = opts.styles || []
+    }
+
+
+    /**
+     *
+     * @param {Array.<import("../core/Dataset.js").Cell>} cells
+     * @param {import("../core/GeoCanvas.js").GeoCanvas} geoCanvas
+     * @param {number} resolution
+     */
+    draw(cells, geoCanvas, resolution) {
+
+        //filter cells
+        if (this.filter) cells = cells.filter(this.filter)
+        if (cells.length == 0) return;
+
+        //
+        const z = geoCanvas.view.z
+
+        //get view scale
+        //const viewScale = this.viewScale ? this.viewScale(cells, resolution, z) : undefined
+
+        //index cells by y and x
+        let m = cellsToMatrix(cells, resolution, c => this.value(c))
+        const x0 = m.x0, y0 = m.y0
+
+        //get target resolution and scale factor
+        let targetResolution = this.targetResolution(resolution, z)
+        const scaleFactor = Math.round(resolution / targetResolution)
+        targetResolution = resolution / scaleFactor
+
+        // compute ray casting shadow
+        m = bilinearInterpolator(m, scaleFactor, this.nodataHandling);
+
+        // make cells
+        cells = []
+        const ra = (resolution - targetResolution) / 2
+        for (let i = 0; i < m.length; i++) {
+            const row = m[i]
+            const y = y0 - i * targetResolution + ra
+            for (let j = 0; j < row.length; j++) {
+                const v = row[j]
+                if (!v) continue
+                const c = { x: x0 + j * targetResolution + ra, y: y }
+                c[this.interpolatedProperty] = v
+                cells.push(c)
+            }
+        }
+
+        //draw smoothed cells from styles
+        const ctx = geoCanvas.offscreenCtx
+        for (let s of this.styles) {
+
+            //check if style is visible
+            if (s.visible && !s.visible(z)) continue
+
+            //set style alpha and blend mode
+            //TODO: multiply by layer alpha ?
+            if (s.alpha || s.blendOperation) {
+                ctx.save()
+                if (s.alpha) ctx.globalAlpha = s.alpha(z)
+                if (s.blendOperation) ctx.globalCompositeOperation = s.blendOperation(z)
+            }
+
+            //set affin transform to draw with geographical coordinates
+            geoCanvas.setCanvasTransform()
+
+            //draw with style
+            s.draw(cells, geoCanvas, targetResolution)
+
+            //draw style filter
+            if (s.filterColor) s.drawFilter(geoCanvas)
+
+            //restore ctx
+            if (s.alpha || s.blendOperation) ctx.restore()
+        }
+
+    }
+}
+
+
+const interp = (topLeft, topRight, bottomLeft, bottomRight, xRatio, yRatio) => {
+    const top = topLeft + (topRight - topLeft) * xRatio;
+    const bottom = bottomLeft + (bottomRight - bottomLeft) * xRatio;
+    return top + (bottom - top) * yRatio;
+}
+
+
+function bilinearInterpolator(grid, scaleFactor = 5, nodataHandling = "zero") {
+
+    if (scaleFactor === 1) return grid;
+
+    // input grid dimensions
+    const rows = grid.length;
+    if (rows === 0) return [];
+    const cols = grid[0].length;
+
+    // output grid dimensions
+    const fineRows = rows * scaleFactor;
+    const fineCols = cols * scaleFactor;
+    const fineGrid = Array(fineRows).fill().map(() => Array(fineCols).fill(undefined));
+
+    // check if scale factor is even
+    const sfIsEven = scaleFactor % 2 === 0
+
+    //compute output grid values
+    for (let i = 0; i < fineRows; i++) {
+
+        const coarseI = Math.min(Math.floor(i / scaleFactor), rows - 2);
+        const yRatio = (i % scaleFactor) / scaleFactor;
+        const i_ = coarseI * scaleFactor + (scaleFactor / 2)
+
+        for (let j = 0; j < fineCols; j++) {
+            const coarseJ = Math.min(Math.floor(j / scaleFactor), cols - 2);
+            const xRatio = (j % scaleFactor) / scaleFactor;
+            const j_ = coarseJ * scaleFactor + (scaleFactor / 2)
+
+            // get four corner values
+            const topLeft = grid[coarseI][coarseJ];
+            const topRight = grid[coarseI][coarseJ + 1];
+            const bottomLeft = grid[coarseI + 1][coarseJ];
+            const bottomRight = grid[coarseI + 1][coarseJ + 1];
+
+
+            if (sfIsEven) {
+                if (topLeft === undefined && i <= i_ && j <= j_) continue
+                if (topRight === undefined && i <= i_ && j >= j_) continue
+                if (bottomLeft === undefined && i >= i_ && j <= j_) continue
+                if (bottomRight === undefined && i >= i_ && j >= j_) continue
+            } else {
+                if (topLeft === undefined && i < i_ && j < j_) continue
+                if (topRight === undefined && i < i_ && j > j_) continue
+                if (bottomLeft === undefined && i > i_ && j < j_) continue
+                if (bottomRight === undefined && i > i_ && j > j_) continue
+            }
+
+            if(nodataHandling === "zero") {
+                // replace undefined values by zero
+                fineGrid[i][j] = interp(topLeft || 0, topRight || 0, bottomLeft || 0, bottomRight || 0, xRatio, yRatio)
+                continue
+            }
+
+            // general case: bilinear interpolation
+            // If all four are defined, interpolate normally
+            if (topLeft !== undefined && topRight !== undefined && bottomLeft !== undefined && bottomRight !== undefined) {
+                fineGrid[i][j] = interp(topLeft, topRight, bottomLeft, bottomRight, xRatio, yRatio)
+                continue
+            }
+
+            // If only one is not defined, use average value of 2 adjacents and interpolate
+            if (topLeft === undefined && topRight !== undefined && bottomLeft !== undefined && bottomRight !== undefined) {
+                const v = topRight + bottomLeft
+                fineGrid[i][j] = interp(v / 2, topRight, bottomLeft, bottomRight, xRatio, yRatio)
+                continue
+            }
+            if (topLeft !== undefined && topRight === undefined && bottomLeft !== undefined && bottomRight !== undefined) {
+                const v = topLeft + bottomRight
+                fineGrid[i][j] = interp(topLeft, v / 2, bottomLeft, bottomRight, xRatio, yRatio)
+                continue
+            }
+            if (topLeft !== undefined && topRight !== undefined && bottomLeft === undefined && bottomRight !== undefined) {
+                const v = topLeft + bottomRight
+                fineGrid[i][j] = interp(topLeft, topRight, v / 2, bottomRight, xRatio, yRatio)
+                continue
+            }
+            if (topLeft !== undefined && topRight !== undefined && bottomLeft !== undefined && bottomRight === undefined) {
+                const v = topRight + bottomLeft
+                fineGrid[i][j] = interp(topLeft, topRight, bottomLeft, v / 2, xRatio, yRatio)
+                continue
+            }
+
+            // If only two diagonally opposite points are defined, interpolate along diagonal
+            if (topLeft !== undefined && bottomRight !== undefined) {
+                const t = (xRatio + yRatio) * Math.SQRT1_2
+                fineGrid[i][j] = topLeft * (1 - t) + bottomRight * t;
+                continue
+            }
+            if (topRight !== undefined && bottomLeft !== undefined) {
+                const t = (1 - xRatio + yRatio) * Math.SQRT1_2
+                fineGrid[i][j] = topRight * (1 - t) + bottomLeft * t;
+                continue
+            }
+
+            // If only two adjacent points are defined, interpolate between them
+            if (topLeft !== undefined && bottomLeft !== undefined) {
+                fineGrid[i][j] = bottomLeft * yRatio + topLeft * (1 - yRatio);
+                continue
+            }
+            if (topRight !== undefined && bottomRight !== undefined) {
+                fineGrid[i][j] = bottomRight * yRatio + topRight * (1 - yRatio);
+                continue
+            }
+            if (topLeft !== undefined && topRight !== undefined) {
+                fineGrid[i][j] = topRight * xRatio + topLeft * (1 - xRatio);
+            }
+            if (bottomLeft !== undefined && bottomRight !== undefined) {
+                fineGrid[i][j] = bottomRight * xRatio + bottomLeft * (1 - xRatio);
+                continue
+            }
+
+            // If only one point is defined, use that value
+            if (topLeft !== undefined) {
+                fineGrid[i][j] = topLeft;
+                continue
+            }
+            if (topRight !== undefined) {
+                fineGrid[i][j] = topRight;
+                continue
+            }
+            if (bottomLeft !== undefined) {
+                fineGrid[i][j] = bottomLeft;
+                continue
+            }
+            if (bottomRight !== undefined) {
+                fineGrid[i][j] = bottomRight;
+            }
+        }
+    }
+    return fineGrid;
+}

package/src/style/JoyPlotStyle.js

@@ -2,6 +2,7 @@
 'use strict'
 
 import { Style } from '../core/Style.js'
+import { cellsToGrid } from '../utils/utils.js'
 
 /**
  * @module style
@@ -47,15 +48,70 @@ export class JoyPlotStyle extends Style {
 
         //index cells by y and x
         /**  @type {object} */
-        const ind = {}
-        for (const cell of cells) {
-            let row = ind[cell.y]
-            if (!row) {
-                row = {}
-                ind[cell.y] = row
+        const ind = cellsToGrid(cells, cell => this.height(cell, resolution, z, viewScale))
+
+
+        //make grid
+        /**  @type {object} */
+        /*const grid = cellsToGrid2(cells, resolution, cell => this.height(cell, resolution, z, viewScale))
+        if (!grid.maxI || !grid.maxJ) return
+
+        //TODO
+        const ys = { min: grid.y0 + resolution * grid.minI, max: grid.y0 + resolution * grid.maxI }
+
+        //draw lines, row by row, stating from the top
+        ctx.lineJoin = 'round'
+        for (let i = grid.minI; i <= grid.maxI; i++) {
+
+            //Get row data
+            const row = grid[i]
+            if (!row) continue
+
+            // y of the row
+            const y = grid.y0 - i * resolution
+
+            //store the previous height
+            let hG_
+
+            for (let j = grid.minJ; j <= grid.maxJ; j++) {
+                //get column value
+                let hG = row[j]
+                if (!hG) hG = 0
+
+                // x of the cell
+                const x = grid.x0 + j * resolution
+
+                if (hG || hG_) {
+                    //draw line only when at least one of both values is non-null
+                    //TODO test bezierCurveTo
+                    ctx.lineTo(x + resolution / 2, y + hG)
+                } else {
+                    //else move the point
+                    ctx.moveTo(x + resolution / 2, y)
+                }
+                //store the previous value
+                hG_ = hG
+            }
+            //last point
+            if (hG_) ctx.lineTo(grid.x0 + resolution * grid.maxJ + resolution / 2, y)
+
+            //draw fill
+            const fc = this.fillColor(y, ys, resolution, z)
+            if (fc && fc != 'none') {
+                ctx.fillStyle = fc
+                ctx.fill()
+            }
+
+            //draw line
+            const lc = this.lineColor(y, ys, resolution, z)
+            const lw = this.lineWidth(y, ys, resolution, z)
+            if (lc && lc != 'none' && lw > 0) {
+                ctx.strokeStyle = lc
+                ctx.lineWidth = lw
+                ctx.stroke()
             }
-            row[cell.x] = this.height(cell, resolution, z, viewScale)
         }
+        */
 
         //compute extent
         const e = geoCanvas.extGeo
@@ -65,7 +121,6 @@ export class JoyPlotStyle extends Style {
         const yMin = Math.floor(e.yMin / resolution) * resolution
         const yMax = Math.floor(e.yMax / resolution) * resolution
 
-        /**  @type {{min:number, max:number}} */
         const ys = { min: yMin, max: yMax }
 
         //draw lines, row by row, stating from the top
@@ -82,13 +137,11 @@ export class JoyPlotStyle extends Style {
             ctx.moveTo(xMin - resolution / 2, y)
 
             //store the previous height
-            /** @type {number|undefined} */
             let hG_
 
             //go through the line cells
             for (let x = xMin; x <= xMax; x += resolution) {
                 //get column value
-                /** @type {number} */
                 let hG = row[x]
                 if (!hG) hG = 0