gridviz 3.1.0 → 3.1.1

package/src/style/Interpolator.js

@@ -1,259 +1,283 @@
-//@ts-check
-'use strict'
-
-import { Style } from '../core/Style.js'
-import { isVisibleAt } from '../core/Drawable.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 (!isVisibleAt(s, 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;
-}
+//@ts-check
+'use strict'
+
+import { Style } from '../core/Style.js'
+import { isVisibleAt } from '../core/Drawable.js'
+import { cellsToMatrix } from '../utils/utils.js'
+
+/**
+ * A style which makes a finer grid from a grid, by bilinear interpolation of a value, and draws it with other styles.
+ * It does not draw anything by itself.
+ *
+ * @example
+ * const interpolator = new gridviz.Interpolator({ value: (c) => c.v, targetResolution: (r, z) => r / 5, interpolatedProperty: 'v' })
+ * interpolator.styles.push(someStyle)
+ *
+ * @module style
+ * @author Julien Gaffuri
+ */
+export class Interpolator extends Style {
+    /** @param {object} opts The options of the style (see Style for the others: filter, visible...).
+     * @param {function(import('../core/Dataset.js').Cell):number} opts.value The value to interpolate.
+     * @param {function(number, number):number} [opts.targetResolution] (resolution, z) => the resolution of the interpolated cells. Make sure that resolution/targetResolution is an integer. Default: resolution / 5.
+     * @param {string} [opts.interpolatedProperty] The property of the interpolated cells which holds the interpolated value. Default: 'value'.
+     * @param {'zero'|'average'} [opts.nodataHandling] What to do with the neighbour cells without value. Default: 'zero'.
+     * @param {Array.<Style>} [opts.styles] The styles which draw the interpolated cells.
+     */
+    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 the interpolated cells with the styles
+        this.drawStyles(cells, geoCanvas, targetResolution)
+    }
+
+    /**
+     * Draws cells with the styles of the interpolator: the interpolated cells.
+     *
+     * @param {Array.<import("../core/Dataset.js").Cell>} cells
+     * @param {import("../core/GeoCanvas.js").GeoCanvas} geoCanvas
+     * @param {number} resolution The resolution of the cells
+     * @protected
+     */
+    drawStyles(cells, geoCanvas, resolution) {
+        const z = geoCanvas.view.z
+        const ctx = geoCanvas.offscreenCtx
+        for (let s of this.styles) {
+            //check if style is visible
+            if (!isVisibleAt(s, 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, resolution)
+
+            //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/IsoFenceStyle.js

@@ -201,7 +201,7 @@ export class IsoFenceStyle extends Style {
         }
 
         //update legends
-        this.updateLegends({ style: this, resolution: resolution, z: z, viewScale: viewScale })
+        this.updateLegends({ style: this, resolution: resolution, z: z, viewScale: viewScale, cells: cells })
     }
 }
 

package/src/style/LegoStyle.js

@@ -34,8 +34,9 @@ export class LegoStyle {
             //"#eee" //whithe
         ]*/
 
-        opts.colorDark = opts.colorDark || '#333'
-        opts.colorBright = opts.colorBright || '#aaa'
+        //the dark and bright colors of the bricks: the sides and the top. colorDark and colorBright are the former names of colDark and colBright.
+        const colDark = opts.colDark || opts.colorDark || '#333'
+        const colBright = opts.colBright || opts.colorBright || '#aaa'
 
         //make classifier
         const classifier = clFun(breaks)
@@ -53,8 +54,8 @@ export class LegoStyle {
         //make tanaka side style
         const tanakaStyle = new SideTanakaStyle({
             classifier: () => classifier2,
-            colorDark : opts.colorDark,
-            colorBright : opts.colorBright,
+            colorDark: colDark,
+            colorBright: colBright,
             diamond: opts.diamond,
         })
 
@@ -69,7 +70,7 @@ export class LegoStyle {
             cellStyle,
             sst,
             tanakaStyle,
-            new LegoTopStyle({ colDark: opts.colDark, colBright: opts.colBright, filter: opts.filter }),
+            new LegoTopStyle({ colDark: colDark, colBright: colBright, filter: opts.filter }),
         ]
     }
 

package/src/style/MosaicStyle.js

@@ -94,6 +94,6 @@ export class MosaicStyle extends Style {
         }
 
         //update legends
-        this.updateLegends({ style: this, resolution: resolution, z: z, viewScale: viewScale })
+        this.updateLegends({ style: this, resolution: resolution, z: z, viewScale: viewScale, cells: cells })
     }
 }

package/src/style/NinjaStarStyle.js

@@ -97,6 +97,6 @@ export class NinjaStarStyle extends Style {
         }
 
         //update legends
-        this.updateLegends({ style: this, resolution: resolution, z: z, viewScale: viewScale })
+        this.updateLegends({ style: this, resolution: resolution, z: z, viewScale: viewScale, cells: cells })
     }
 }

package/src/style/PillarStyle.js

@@ -202,6 +202,6 @@ export class PillarStyle extends Style {
         ctx.lineCap = 'butt'
 
         //update legends
-        this.updateLegends({ style: this, resolution: resolution, z: z, viewScale: viewScale })
+        this.updateLegends({ style: this, resolution: resolution, z: z, viewScale: viewScale, cells: cells })
     }
 }