gridviz 3.0.11 → 3.0.13

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "gridviz",
-    "version": "3.0.11",
+    "version": "3.0.13",
     "description": "Visualization tool for gridded statistics",
     "keywords": [
         "statistics",
@@ -56,16 +56,16 @@
         "d3-scale": "^4.0.2",
         "d3-selection": "^3.0.0",
         "d3-zoom": "^3.0.0",
-        "jsdoc": "^4.0.2"
+        "jsdoc": "^4.0.4"
     },
     "devDependencies": {
         "@babel/preset-env": "^7.25.4",
         "babel-loader": "^8.1.0",
         "jshint": "^2.12.0",
         "prettier": "2.8.8",
-        "webpack": "^5.94.0",
+        "webpack": "^5.96.1",
         "webpack-cli": "^5.1.4",
-        "webpack-dev-server": "^4.15.1",
+        "webpack-dev-server": "^5.1.0",
         "webpack-livereload-plugin": "^3.0.2"
     },
     "engines": {

package/src/core/GeoCanvas.js

@@ -129,6 +129,16 @@ export class GeoCanvas {
         }
         //select(this.canvas).call(z);
 
+        //center extent
+        /** @type {number|undefined} */
+        this.xMin = opts.centerExtent? opts.centerExtent[0] : undefined
+        /** @type {number|undefined} */
+        this.yMin = opts.centerExtent? opts.centerExtent[1] : undefined
+        /** @type {number|undefined} */
+        this.xMax = opts.centerExtent? opts.centerExtent[2] : undefined
+        /** @type {number|undefined} */
+        this.yMax = opts.centerExtent? opts.centerExtent[3] : undefined
+
         /** Zoom extent, to limit zoom in and out
          *  @type {Array.<number>} */
         this.zoomExtent = opts.zoomExtent || [0, Infinity]
@@ -142,6 +152,18 @@ export class GeoCanvas {
     getView() { return this.view }
 
 
+    /** @param {Array.<number>} v */
+    setCenterExtent(v) {
+        this.xMin = v[0]
+        this.yMin = v[1]
+        this.xMax = v[2]
+        this.yMax = v[3]
+    }
+    /** @returns {Array.<number|undefined>} */
+    getCenterExtent() {
+        return [this.xMin, this.yMin, this.xMax, this.yMax]
+    }
+
     /** @param {Array.<number>} v */
     setZoomExtent(v) {
         this.zoomExtent = v
@@ -194,7 +216,14 @@ export class GeoCanvas {
      * @param {number} dyGeo
      */
     pan(dxGeo = 0, dyGeo = 0) {
-        //TODO force extend to remain
+
+        //ensures x/y extent
+        if(this.xMin != undefined && this.view.x + dxGeo < this.xMin) dxGeo = this.xMin - this.view.x
+        if(this.yMin != undefined && this.view.y + dyGeo < this.yMin) dyGeo = this.yMin - this.view.y
+        if(this.xMax != undefined && this.view.x + dxGeo > this.xMax) dxGeo = this.xMax - this.view.x
+        if(this.yMax != undefined && this.view.y + dyGeo > this.yMax) dyGeo = this.yMax - this.view.y
+
+        //pan
         this.view.x += dxGeo
         this.view.y += dyGeo
         this.updateExtentGeo()
@@ -210,7 +239,7 @@ export class GeoCanvas {
 
     /**
      * Zoom.
-     * @param {number} f The , within ]0, Infinity]. 1 is for no change. <1 to zoom-in, >1 to zoom-out.
+     * @param {number} f The zoom factor, within ]0, Infinity]. 1 is for no change. <1 to zoom-in, >1 to zoom-out.
      * @param {number} xGeo The x geo position fixed in the screen.
      * @param {number} yGeo The y geo position fixed in the screen.
      */
@@ -227,9 +256,19 @@ export class GeoCanvas {
         if (newZf > this.zoomExtent[1]) f = this.zoomExtent[1] / this.view.z
 
         this.view.z *= f
-        const dxGeo = (xGeo - this.view.x) * (1 - f)
+
+        //compute pan
+        let dxGeo = (xGeo - this.view.x) * (1 - f)
+        let dyGeo = (yGeo - this.view.y) * (1 - f)
+
+        //ensures x/y extent
+        if(this.xMin != undefined && this.view.x + dxGeo < this.xMin) dxGeo = this.xMin - this.view.x
+        if(this.yMin != undefined && this.view.y + dyGeo < this.yMin) dyGeo = this.yMin - this.view.y
+        if(this.xMax != undefined && this.view.x + dxGeo > this.xMax) dxGeo = this.xMax - this.view.x
+        if(this.yMax != undefined && this.view.y + dyGeo > this.yMax) dyGeo = this.yMax - this.view.y
+
+        //pan
         this.view.x += dxGeo
-        const dyGeo = (yGeo - this.view.y) * (1 - f)
         this.view.y += dyGeo
         this.updateExtentGeo()
 

package/src/core/Map.js

@@ -343,6 +343,16 @@ export class Map {
     }
 
 
+    /** @returns {Array.<number|undefined>} */
+    getCenterExtent() {
+        return this.geoCanvas.getCenterExtent()
+    }
+    /** @param {Array.<number>} val @returns {this} */
+    setCenterExtent(val) {
+        this.geoCanvas.setCenterExtent(val)
+        return this
+    }
+
     /** @returns {Array.<number>} */
     getZoomExtent() {
         return this.geoCanvas.getZoomExtent()

package/src/index.js

@@ -50,14 +50,13 @@ export { ColorDiscreteLegend } from './legend/ColorDiscreteLegend.js'
 export { ColorCategoryLegend } from './legend/ColorCategoryLegend.js'
 export { SizeLegend, sizeLegend, sizeLegendViewScale, sizeDiscreteLegend, sizeDiscreteViewScaleLegend } from './legend/SizeLegend.js'
 export { OrientationLegend, orientationLegend } from './legend/OrientationLegend.js'
-export { TrivariateLegend } from './legend/TrivariateLegend.js'
+export { TernaryLegend } from './legend/TernaryLegend.js'
 
 // export { goToStraight, zoomTo } from "./utils/zoomUtils"
 export * from './utils/stretching.js'
 export * from './utils/scale.js'
-export * from './utils/trivariate.js'
-export * from './utils/chernoff.js'
-export { nice, loadImage } from './utils/utils.js'
+export * from './utils/ternary.js'
+export { nice } from './utils/utils.js'
 
 import { GeoCanvas } from './core/GeoCanvas.js'
 export const getParameterByName = GeoCanvas.getParameterByName

package/src/legend/ColorLegend.js

@@ -16,11 +16,12 @@ export class ColorLegend extends Legend {
         super(opts)
         opts = opts || {}
 
-        //a function [0,1]->color for continuous colors
-        //or array of colors for discrete colors
+        //a function [0,1]->color for continuous colors.
+        //it can take as second argument the viewscale.
         this.colorScale = opts.colorScale
 
         //function (t[0,1]) -> value (for label text)
+        //it can take as second argument the viewscale.
         this.textScale = opts.textScale || (t => t)
 
         this.margin = opts.margin || 5

package/src/legend/{TrivariateLegend.js → TernaryLegend.js}

@@ -9,7 +9,7 @@ import { Legend } from '../core/Legend.js'
  * @module legend
  * @author Julien Gaffuri
  */
-export class TrivariateLegend extends Legend {
+export class TernaryLegend extends Legend {
     /** @param {Object} opts */
     constructor(opts) {
         super(opts)

package/src/style/ImageStyle.js

@@ -14,17 +14,19 @@ export class ImageStyle extends Style {
         super(opts)
         opts = opts || {}
 
-        /** A function returning the image code of a cell.
+        /** A function returning the image URL of a cell.
          * @type {function(import('../core/Dataset.js').Cell, number, number, object):string} */
-        this.imageCode = opts.imageCode || (() => '') //(c,r,z,vs) => {}
-
-        /** The dictionnary code -> image
-         *  @type {object}        */
-        this.images = opts.images || {}
+        this.image = opts.image || (() => '') //(c,r,z,vs) => {}
 
         /** The image size in ground meters
          *  @type {function(import('../core/Dataset.js').Cell, number, number, object):number}        */
         this.size = opts.size || ((cell, resolution) => resolution)
+
+        /** Dictionnary of preloaded images. url -> image
+         * @private
+         * @type {object} */
+        this.cache = {}
+
     }
 
     /**
@@ -33,7 +35,7 @@ export class ImageStyle extends Style {
      * @param {number} resolution
      * @override
      */
-    draw(cells, geoCanvas, resolution) {
+    async draw(cells, geoCanvas, resolution) {
 
         //
         const z = geoCanvas.view.z,
@@ -48,28 +50,47 @@ export class ImageStyle extends Style {
         //
         for (let cell of cells) {
 
-            //get cell image code
-            const code = this.imageCode(cell, resolution, z, viewScale)
-
-            //get image
-            const image = this.images[code]
-            if (!image) continue
+            //get cell image url
+            const url = this.image(cell, resolution, z, viewScale)
+            if (!url) continue
 
             //size and position values
             let sizePix = this.size(cell, resolution, z, viewScale) / z
             if (!sizePix) continue
-            const d = (resolutionPix - sizePix) / 2
-
-            try {
-                geoCanvas.ctx.drawImage(image, geoCanvas.geoToPixX(cell.x) + d, geoCanvas.geoToPixY(cell.y) + d -resolutionPix, sizePix, sizePix)
-
-                /*/red color filter
-                geoCanvas.ctx.globalCompositeOperation = 'source-in';
-                geoCanvas.ctx.fillStyle = 'red';
-                geoCanvas.ctx.fillRect(geoCanvas.geoToPixX(cell.x) + d, geoCanvas.geoToPixY(cell.y) + d, sizePix, sizePix);
-                geoCanvas.ctx.globalCompositeOperation = 'source-over';*/
-            } catch (error) {
-                console.error(error)
+
+            //get image from cache
+            const image = this.cache[url]
+
+            //loading, keep waiting
+            if (image == "loading") return;
+
+            //no image: load it
+            else if (!image) {
+                //tag as loading
+                this.cache[url] = "loading"
+
+                //define image
+                const img = new Image()
+                img.onload = () => {
+                    //store image data in cache and redraw
+                    this.cache[url] = img
+                    geoCanvas.redraw()
+                }
+                img.onerror = () => {
+                    //case when no image
+                    console.warn("Could not retrieve image from", url)
+                }
+                //set URL to launch the download
+                img.src = url
+
+            } else {
+                //draw image
+                const d = (resolutionPix - sizePix) / 2
+                try {
+                    geoCanvas.ctx.drawImage(image, geoCanvas.geoToPixX(cell.x) + d, geoCanvas.geoToPixY(cell.y) + d - resolutionPix, sizePix, sizePix)
+                } catch (error) {
+                    console.error(error)
+                }
             }
 
         }

package/src/utils/{trivariate.js → ternary.js}

@@ -5,7 +5,7 @@ import { interpolateLab } from "d3-interpolate"
 
 
 
-export const trivariateClassifier = (properties, totalFunction, opts = {}) => {
+export const ternaryClassifier = (properties, totalFunction, opts = {}) => {
 
     //the three properties
     const p0 = properties[0], p1 = properties[1], p2 = properties[2]
@@ -83,7 +83,7 @@ export const trivariateClassifier = (properties, totalFunction, opts = {}) => {
 
 
 
-export const trivariateColorClassifier = (properties, totalFunction, colors, opts = {}) => {
+export const ternaryColorClassifier = (properties, totalFunction, colors, opts = {}) => {
 
     //the three colors
     const [color0, color1, color2] = colors || ["red", "green", "blue"]
@@ -102,7 +102,7 @@ export const trivariateColorClassifier = (properties, totalFunction, colors, opt
     const centerColor = opts.centerColor || colorInterpolation(mixColorFunction(color0, color1), color2)(0.333)
 
     //make classifier
-    const classifier = trivariateClassifier(properties, totalFunction, opts)
+    const classifier = ternaryClassifier(properties, totalFunction, opts)
 
     //the output color classifier method
     const fun = c => {
@@ -134,7 +134,7 @@ export const trivariateColorClassifier = (properties, totalFunction, colors, opt
 const orderedIndexesDec = arr => [...arr.keys()].sort((a, b) => arr[b] - arr[a]);
 const orderedIndexesInc = arr => [...arr.keys()].sort((a, b) => arr[a] - arr[b]);
 
-export const trivariateClassifier = (properties, totalFunction, opts = {}) => {
+export const ternaryClassifier = (properties, totalFunction, opts = {}) => {
     const lowThreshold = opts.lowThreshold || [1 / 3, 1 / 3, 1 / 3]
     const highThreshold = opts.highThreshold || [2 / 3, 2 / 3, 2 / 3]
     const colors = opts.colors || ["red", "green", "blue"]
@@ -175,7 +175,7 @@ export const trivariateClassifier = (properties, totalFunction, opts = {}) => {
 */
 
 /*
-export const trivariateClassifier3 = (properties, totalFunction, opts = {}) => {
+export const ternaryClassifier3 = (properties, totalFunction, opts = {}) => {
     const [a01, a12, a20] = opts.thresholds || [1/3, 1/3, 1/3]
     const [c0, c1, c2] = opts.colors || ["red", "green", "blue"]
     const centerColor = opts.centerColor || "gray"

package/src/utils/utils.js

@@ -29,6 +29,8 @@ export function nice(v, multiples = [8, 6, 5, 4, 2.5, 2]) {
 }
 
 
+/*
+//no longer used
 export function loadImage(src) {
     return new Promise((resolve, reject) => {
         const img = new Image();
@@ -37,7 +39,7 @@ export function loadImage(src) {
         img.src = src;
     });
 }
-
+*/
 
 
 /*

package/src/utils/chernoff.js

@@ -1,24 +0,0 @@
-//@ts-check
-'use strict'
-
-import { loadImage } from '../utils/utils.js'
-
-//
-
-/**
- * Load chernoff images
- * See for example: https://github.com/jgaffuri/chernoff-faces
- * @param {object} out 
- * @param {string} baseURL 
- * @param {function|undefined} callback 
- * @returns 
- */
-export async function loadChernoffFacesImages(out, baseURL, callback = undefined) {
-    out = out || {}
-    for (let s of ["f", "m"])
-        for (let a of ["y", "m", "o"])
-            for (let i = 0; i <= 2; i++)
-                out[s + a + i] = await loadImage(baseURL + (s + a + i) + ".png")
-    if (callback) callback()
-    return out
-}