gridviz 2.0.28 → 2.0.31

package/src/GeoCanvas.js

@@ -0,0 +1,419 @@
+//@ts-check
+'use strict'
+
+/** @typedef { {xMin: number, xMax: number, yMin: number, yMax: number} } Envelope */
+
+import { select } from 'd3-selection'
+import { zoom, zoomIdentity } from 'd3-zoom'
+
+/**
+ * A HTML canvas for geo data display, enhanced with zoom and pan capabilities.
+ *
+ * @author Joseph Davies, Julien Gaffuri
+ */
+export class GeoCanvas {
+    /**
+     * @constructor
+     * @param {HTMLCanvasElement} canvas
+     * @param {object} center Geographical coordinates of the center
+     * @param {number} zf The zoom factor (pixel size, in ground m)
+     * @param {object} opts
+     */
+    constructor(canvas, center, zf, opts) {
+        this.opts = opts || {}
+
+        /** @type {HTMLCanvasElement} */
+        this.canvas = canvas
+
+        /** @type {number} */
+        this.w = this.canvas.offsetWidth
+        /** @type {number} */
+        this.h = this.canvas.offsetHeight
+
+        this.canvas.width = this.w
+        this.canvas.height = this.h
+
+        const ctx = this.canvas.getContext('2d')
+        if (!ctx) throw 'Impossible to create canvas 2D context'
+        /**@type {CanvasRenderingContext2D} */
+        this.ctx = ctx
+
+        // set geo coordinates of the center
+        this.center = center || { x: this.w * 0.5, y: this.h * 0.5 }
+
+        // zoom factor: pixel size, in m/pix
+        /** @type {number} */
+        this.zf = zf
+
+        /** Background color.
+         * @type {string} */
+        this.backgroundColor = opts.backgroundColor || 'white'
+
+        /** @type {function():void} */
+        this.onZoomStartFun = opts.onZoomStartFun
+
+        /** @type {function():void} */
+        this.onZoomEndFun = opts.onZoomEndFun
+
+        /** @type {function():void} */
+        this.onZoomFun = opts.onZoomFun
+
+        //current extent
+        /** @type {Envelope} */
+        this.extGeo = { xMin: NaN, xMax: NaN, yMin: NaN, yMax: NaN }
+        this.updateExtentGeo()
+
+        //rely on d3 zoom for pan/zoom
+        if (!opts.disableZoom) {
+            let tP = zoomIdentity
+            const z = zoom()
+                //to make the zooming a bit faster
+                .wheelDelta((e) => -e.deltaY * (e.deltaMode === 1 ? 0.07 : e.deltaMode ? 1 : 0.004))
+                .on('zoom', (e) => {
+                    const t = e.transform
+                    const f = tP.k / t.k
+                    if (f == 1) {
+                        //pan
+                        const dx = tP.x - t.x
+                        const dy = tP.y - t.y
+                        this.pan(dx * this.getZf(), -dy * this.getZf())
+                    } else {
+                        const se = e.sourceEvent
+                        if (se instanceof WheelEvent) {
+                            //zoom at the mouse position
+                            this.zoom(
+                                f,
+                                this.pixToGeoX(e.sourceEvent.offsetX),
+                                this.pixToGeoY(e.sourceEvent.offsetY)
+                            )
+                        } else if (se instanceof TouchEvent) {
+                            //compute average position of the touches
+                            let tx = 0,
+                                ty = 0
+                            for (let tt of se.targetTouches) {
+                                tx += tt.clientX
+                                ty += tt.clientY
+                            }
+                            tx /= se.targetTouches.length
+                            ty /= se.targetTouches.length
+                            //zoom at this average position
+                            this.zoom(f, this.pixToGeoX(tx), this.pixToGeoY(ty))
+                        }
+                    }
+                    tP = t
+
+                    if (this.onZoomFun) this.onZoomFun(e)
+                })
+                .on('start', (e) => {
+                    this.canvasSave.c = document.createElement('canvas')
+                    this.canvasSave.c.setAttribute('width', '' + this.w)
+                    this.canvasSave.c.setAttribute('height', '' + this.h)
+                    this.canvasSave.c.getContext('2d').drawImage(this.canvas, 0, 0)
+                    this.canvasSave.dx = 0
+                    this.canvasSave.dy = 0
+                    this.canvasSave.f = 1
+
+                    if (this.onZoomStartFun) this.onZoomStartFun(e)
+                })
+                .on('end', (e) => {
+                    this.redraw(true)
+                    this.canvasSave = { c: null, dx: 0, dy: 0, f: 1 }
+
+                    if (this.onZoomEndFun) this.onZoomEndFun(e)
+                })
+            z(select(this.canvas))
+        }
+        //select(this.canvas).call(z);
+
+        /** Zoom extent, to limit zoom in and out
+         *  @type {Array.<number>} */
+        this.zfExtent = [0, Infinity]
+
+        /** Canvas state, to be used to avoid unnecessary redraws on zoom/pan
+         *  @type {{c:HTMLCanvasElement|null,dx:number,dy:number,f:number}} */
+        this.canvasSave = { c: null, dx: 0, dy: 0, f: 1 }
+    }
+
+    /** @param {{x:number,y:number}} v Geographical coordinates of the center */
+    setCenter(v) {
+        this.center = v
+    }
+    /** @returns {{x:number,y:number}} Geographical coordinates of the center */
+    getCenter() {
+        return this.center
+    }
+
+    /** @param {number} v The zoom factor (pixel size, in ground m) */
+    setZf(v) {
+        this.zf = v
+        if (this.slider) this.slider.attr('value', +this.zf)
+    }
+    /** @returns {number} The zoom factor (pixel size, in ground m) */
+    getZf() {
+        return this.zf
+    }
+
+    /** @param {Array.<number>} v */
+    setZfExtent(v) {
+        this.zfExtent = v
+    }
+    /** @returns {Array.<number>} */
+    getZfExtent() {
+        return this.zfExtent
+    }
+
+    /** Initialise canvas transform with identity transformation. */
+    initCanvasTransform() {
+        this.ctx.setTransform(1, 0, 0, 1, 0, 0)
+    }
+
+    /** Initialise canvas transform with geo to screen transformation, so that geo objects can be drawn directly in geo coordinates. */
+    setCanvasTransform() {
+        const k = 1 / this.getZf()
+        const tx = -this.center.x / this.getZf() + this.w * 0.5
+        const ty = this.center.y / this.getZf() + this.h * 0.5
+        this.ctx.setTransform(k, 0, 0, -k, tx, ty)
+    }
+
+    /** Get the transformation matrix to webGL screen coordinates, within [-1,1]*[-1,1] */
+    getWebGLTransform() {
+        const kx = 2.0 / (this.w * this.getZf())
+        const ky = 2.0 / (this.h * this.getZf())
+        return [kx, 0.0, 0.0, 0.0, ky, 0.0, -kx * this.center.x, -ky * this.center.y, 1.0]
+    }
+
+    /** The function specifying how to draw the map.
+     * @param {boolean} strong */
+    redraw(strong = true) {
+        throw new Error('Method redraw not implemented.')
+    }
+
+    /**
+     * Clear. To be used before a redraw for example.
+     * @param {string} color
+     */
+    clear(color = 'white') {
+        if (this.opts.transparentBackground) {
+            this.ctx.clearRect(0, 0, this.w, this.h)
+        } else {
+            if (this.ctx) this.ctx.fillStyle = color
+            this.ctx.fillRect(0, 0, this.w, this.h)
+        }
+    }
+
+    /**
+     * @param {number} dxGeo
+     * @param {number} dyGeo
+     */
+    pan(dxGeo = 0, dyGeo = 0) {
+        //TODO force extend to remain
+        this.center.x += dxGeo
+        this.center.y += dyGeo
+        this.updateExtentGeo()
+
+        if (this.canvasSave.c) {
+            this.canvasSave.dx -= dxGeo / this.getZf()
+            this.canvasSave.dy += dyGeo / this.getZf()
+            this.clear(this.backgroundColor)
+            this.ctx.drawImage(this.canvasSave.c, this.canvasSave.dx, this.canvasSave.dy)
+        }
+    }
+
+    /**
+     * Zoom.
+     * @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.
+     */
+    zoom(f = 1, xGeo = this.center.x, yGeo = this.center.y) {
+        //TODO force geo extend to remain
+
+        //trying to zoom in/out beyond limit
+        if (this.zfExtent[0] == this.getZf() && f <= 1) return
+        if (this.zfExtent[1] == this.getZf() && f >= 1) return
+
+        //ensure zoom extent preserved
+        const newZf = f * this.getZf()
+        if (newZf < this.zfExtent[0]) f = this.zfExtent[0] / this.getZf()
+        if (newZf > this.zfExtent[1]) f = this.zfExtent[1] / this.getZf()
+
+        this.setZf(f * this.getZf())
+        const dxGeo = (xGeo - this.center.x) * (1 - f)
+        this.center.x += dxGeo
+        const dyGeo = (yGeo - this.center.y) * (1 - f)
+        this.center.y += dyGeo
+        this.updateExtentGeo()
+
+        //TODO
+        //this.redraw(false)
+        if (this.canvasSave.c) {
+            this.clear(this.backgroundColor)
+            this.canvasSave.f /= f
+            this.canvasSave.dx = this.geoToPixX(xGeo) * (1 - this.canvasSave.f)
+            this.canvasSave.dy = this.geoToPixY(yGeo) * (1 - this.canvasSave.f)
+            this.clear(this.backgroundColor)
+            this.ctx.drawImage(
+                this.canvasSave.c,
+                this.canvasSave.dx,
+                this.canvasSave.dy,
+                this.canvasSave.f * this.canvasSave.c.width,
+                this.canvasSave.f * this.canvasSave.c.height
+            )
+        }
+    }
+
+    /**
+     * @param {number} marginPx
+     * @returns {Envelope} The envelope of the view, in geo coordinates.
+     */
+    updateExtentGeo(marginPx = 20) {
+        this.extGeo = {
+            xMin: this.pixToGeoX(-marginPx),
+            xMax: this.pixToGeoX(this.w + marginPx),
+            yMin: this.pixToGeoY(this.h + marginPx),
+            yMax: this.pixToGeoY(-marginPx),
+        }
+        return this.extGeo
+    }
+
+    /**
+     * Check if the object has to be drawn
+     *
+     * @param {{x:number,y:number}} obj
+     */
+    toDraw(obj) {
+        if (obj.x < this.extGeo.xMin) return false
+        if (obj.x > this.extGeo.xMax) return false
+        if (obj.y < this.extGeo.yMin) return false
+        if (obj.y > this.extGeo.yMax) return false
+        return true
+    }
+
+    //conversion functions
+    /**
+     * @param {number} xGeo Geo x coordinate, in m.
+     * @returns {number} Screen x coordinate, in pix.
+     */
+    geoToPixX(xGeo) {
+        return (xGeo - this.center.x) / this.getZf() + this.w * 0.5
+    }
+    /**
+     * @param {number} yGeo Geo y coordinate, in m.
+     * @returns {number} Screen y coordinate, in pix.
+     */
+    geoToPixY(yGeo) {
+        return -(yGeo - this.center.y) / this.getZf() + this.h * 0.5
+    }
+    /**
+     * @param {number} x Screen x coordinate, in pix.
+     * @returns {number} Geo x coordinate, in m.
+     */
+    pixToGeoX(x) {
+        return (x - this.w * 0.5) * this.getZf() + this.center.x
+    }
+    /**
+     * @param {number} y Screen y coordinate, in pix.
+     * @returns {number} Geo y coordinate, in m.
+     */
+    pixToGeoY(y) {
+        return -(y - this.h * 0.5) * this.getZf() + this.center.y
+    }
+
+    /** Get x,y,z elements from URL and assign them to the view center and zoom level. */
+    setViewFromURL() {
+        const x = GeoCanvas.getParameterByName('x'),
+            y = GeoCanvas.getParameterByName('y'),
+            z = GeoCanvas.getParameterByName('z')
+        const c = this.getCenter()
+        if (x != null && x != undefined && !isNaN(+x)) c.x = +x
+        if (y != null && y != undefined && !isNaN(+y)) c.y = +y
+        if (z != null && z != undefined && !isNaN(+z)) this.setZf(+z)
+    }
+
+    /**
+     *
+     * @param {string} id
+     * @param {object} opts
+     * @returns {this}
+     */
+    addZoomSlider(id, opts) {
+        opts = opts || {}
+        opts.width = opts.width || '30px'
+        opts.height = opts.height || '300px'
+
+        //the div element
+        const div = select('#' + id)
+        if (div.empty()) {
+            console.error('Could not find div element to build zoom slider. Id: ' + id)
+            return this
+        }
+
+        const th = this
+        /** */
+        this.slider = div
+            .append('input')
+            .attr('type', 'range')
+            .attr('min', this.getZfExtent()[0])
+            .attr('max', this.getZfExtent()[1])
+            .attr('value', this.getZf())
+            .on('input', function (d) {
+                if (!this || !this.value) return
+                const v = +this.value
+                select(this).attr('value', v)
+                th.setZf(v)
+                //redraw
+                th.redraw()
+            })
+            .style('width', opts.width)
+            .style('height', opts.height)
+            .style('opacity', 0.7)
+            .on('mouseover', function (d) {
+                select(this).style('opacity', 1)
+            })
+            .on('mouseout', function (d) {
+                select(this).style('opacity', 0.7)
+            })
+            .style('-webkit-appearance', 'slider-vertical') //for chrome
+            .style('writing-mode', 'bt-lr') //for IE/edge
+            .attr('orient', 'vertical') //for firefox
+            .style('background', 'lightgray')
+            .style('outline', 'none')
+            .style('-webkit-transition', '.2s')
+            .style('transition', 'opacity .2s')
+
+        //TODO
+        /*select(".slider::-webkit-slider-thumb")
+            .style("-webkit-appearance", "none")
+            .style("appearance", "none")
+            .style("width", "30px")
+            .style("height", "40px")
+            .style("background", "black")
+            .style("cursor", "pointer")*/
+
+        /*select("slider::-moz-range-thumb")
+            .style("-webkit-appearance", "none")
+            .style("width", "30px")
+            .style("height", "40px")
+            .style("background", "#04AA6D")
+            .style("cursor", "pointer")*/
+        /*
+            .slider::ms-thumb,
+        .slider::-moz-range-thumb {
+        }*/
+
+        return this
+    }
+
+    /**
+     * Get a URL parameter by name.
+     *
+     * @param {string} name
+     * @returns {string | null}
+     */
+    static getParameterByName(name) {
+        name = name.replace(/[\[]/, '\\[').replace(/[\]]/, '\\]')
+        var regex = new RegExp('[\\?&]' + name + '=([^&#]*)'),
+            results = regex.exec(location.search)
+        return !results ? null : decodeURIComponent(results[1].replace(/\+/g, ' '))
+    }
+}

package/src/LabelLayer.js

@@ -0,0 +1,190 @@
+//@ts-check
+'use strict'
+
+import { csv } from 'd3-fetch'
+
+/** A label. The name is the text to show. (x,y) are the coordinates in the same CRS as the grid.
+ * @typedef {{name: string, x:number, y:number }} Label */
+
+/**
+ * A (generic) layer for placename labels, to be shown on top of the grid layers.
+ * The input is a CSV file with the position (x, y) of the labels and name + some other info on the label importance.
+ * If the label data is not in the expected format or in the same CRS as the grid, it can be corrected with the "preprocess" function.
+ * The selection of the label, their style (font, weight, etc.) and color can be specified depending on their importance and the zoom level.
+ *
+ * @author Joseph Davies, Julien Gaffuri
+ */
+export class LabelLayer {
+    /**
+     * @param {object} opts
+     */
+    constructor(opts) {
+        opts = opts || {}
+
+        /**
+         * The URL of the label data, as CSV file.
+         * The file should contain the information for each label such as the text, the position and other information for the display of the label according to the zoom level.
+         * If necessary, this data can be reformated with the 'preprocess' parameter.
+         * @private
+         * @type {string} */
+        this.url = opts.url
+
+        /** Specify if and how a label should be drawn, depending on its importance and the zoom level.
+         * @private
+         * @type {function(Label,number):string} */
+        this.style = opts.style || (() => 'bold 1em Arial')
+
+        /** Specify the label color, depending on its importance and the zoom level.
+         * @private
+         * @type {function(Label,number):string} */
+        this.color = opts.color || (opts.dark ? () => '#ddd' : () => '#222')
+
+        /** Specify the label halo color, depending on its importance and the zoom level.
+         * @private
+         * @type {function(Label,number):string} */
+        this.haloColor = opts.haloColor || (opts.dark ? () => '#000000BB' : () => '#FFFFFFBB')
+
+        /** Specify the label halo width, depending on its importance and the zoom level.
+         * @private
+         * @type {function(Label,number):number} */
+        this.haloWidth = opts.haloWidth || (() => 4)
+
+        /** The anchor where to draw the text, from label position. See HTML-canvas textAlign property.
+         * "left" || "right" || "center" || "start" || "end"
+         * @private
+         * @type {CanvasTextAlign} */
+        this.textAlign = opts.textAlign || 'start'
+
+        /**
+         * @private
+         * @type {Array.<number>} */
+        this.offsetPix = opts.offsetPix || [5, 5]
+
+        /**
+         * A preprocess to run on each label after loading.
+         * It can be used to apply some specific treatment before, format the label data, project coordinates, etc.
+         * Return false if the label should not be kept.
+         * @private
+         * @type {function(Label):boolean} */
+        this.preprocess = opts.preprocess
+
+        /**
+         * @private
+         * @type {Array.<Label> | undefined} */
+        this.labels = undefined
+
+        /**
+         * @private
+         * @type {string} */
+        this.loadingStatus = 'notLoaded'
+    }
+
+    /**
+     * Draw the label layer.
+     *
+     * @param {import("./GeoCanvas").GeoCanvas} cg The canvas where to draw the layer.
+     * @returns {void}
+     */
+    draw(cg) {
+        //load labels, if not done yet.
+        if (!this.labels) {
+            this.load(cg.redraw)
+            return
+        }
+
+        //zoom factor
+        const zf = cg.getZf()
+
+        //text align
+        cg.ctx.textAlign = this.textAlign || 'start'
+
+        //line join and cap
+        cg.ctx.lineJoin = 'bevel' //|| "round" || "miter";
+        cg.ctx.lineCap = 'butt' //|| "round" || "square";
+
+        //draw in pix coordinates
+        cg.initCanvasTransform()
+
+        //draw labels, one by one
+        for (const lb of this.labels) {
+            //get label style
+            const st = this.style(lb, zf)
+            if (!st) continue
+            cg.ctx.font = st
+
+            //check label within the view, to be drawn
+            if (!cg.toDraw(lb)) continue
+
+            //position
+            const xP = cg.geoToPixX(lb.x) + this.offsetPix[0]
+            const yP = cg.geoToPixY(lb.y) - this.offsetPix[1]
+
+            //label stroke, for the halo
+            if (this.haloColor && this.haloWidth) {
+                const hc = this.haloColor(lb, zf)
+                const hw = this.haloWidth(lb, zf)
+                if (hc && hw && hw > 0) {
+                    cg.ctx.strokeStyle = hc
+                    cg.ctx.lineWidth = hw
+                    cg.ctx.strokeText(lb.name, xP, yP)
+                }
+            }
+
+            //label fill
+            if (this.color) {
+                const col = this.color(lb, zf)
+                if (col) {
+                    cg.ctx.fillStyle = col
+                    cg.ctx.fillText(lb.name, xP, yP)
+                }
+            }
+        }
+    }
+
+    /**
+     * Load data for labels, from URL this.url
+     * @param {function():void} callback
+     * @private
+     */
+    async load(callback) {
+        if (!this.url) {
+            console.log('Failed loading labels: No URL specified. ' + this.url)
+            this.loadingStatus = 'failed'
+            this.labels = []
+            return
+        }
+
+        //check if data already loaded
+        if (this.loadingStatus != 'notLoaded') return
+
+        //load data
+        this.loadingStatus = 'loading'
+
+        try {
+            /** @type { Array.<Label> } */
+            const data = await csv(this.url)
+
+            //preprocess/filter
+            if (this.preprocess) {
+                this.labels = []
+                for (const c of data) {
+                    const b = this.preprocess(c)
+                    if (b == false) continue
+                    this.labels.push(c)
+                }
+            } else {
+                //store labels
+                this.labels = data
+            }
+
+            this.loadingStatus = 'loaded'
+
+            //redraw
+            if (callback) callback()
+        } catch (error) {
+            console.log('Failed loading labels from ' + this.url)
+            this.labels = []
+            this.loadingStatus = 'failed'
+        }
+    }
+}

package/src/Layer.js

@@ -0,0 +1,92 @@
+//@ts-check
+'use strict'
+
+/**
+ * A layer, which specifies a dataset to be shown with specified styles.
+ *
+ * @author Joseph Davies, Julien Gaffuri
+ */
+export class Layer {
+    /**
+     * @param {import("./Dataset").Dataset} dataset The multi resolution dataset to show.
+     * @param {Array.<import("./Style").Style>} styles The styles, ordered in drawing order.
+     * @param {{visible?:boolean,minZoom?:number,maxZoom?:number,pixNb?:number,cellInfoHTML?:function(import("./Dataset").Cell):string}} opts
+     *      minZoom: The minimum zoom level when to show the layer. maxZoom: The maximum zoom level when to show the layer
+     */
+    constructor(dataset, styles, opts = {}) {
+        opts = opts || {}
+
+        /** @type {import("./Dataset").Dataset} */
+        this.dataset = dataset
+        /** @type {Array.<import("./Style").Style>} */
+        this.styles = styles
+
+        /** An attribute to specify if a layer should be drawn or not
+         * @type {boolean} */
+        this.visible = opts.visible == false ? false : true
+
+        /** The minimum zoom factor: Below this level, the layer is not shown.
+         * @type {number} */
+        this.minZoom = opts.minZoom || 0
+
+        /** The maximum zoom factor: Above this level, the layer is not shown.
+         * @type {number} */
+        this.maxZoom = opts.maxZoom || Infinity
+
+        //ensure acceptable values for the zoom limits.
+        if (this.minZoom >= this.maxZoom)
+            throw new Error('Unexpected zoom limits for layer. Zoom min should be smaller than zoom max.')
+
+        /** Unit: number of pixels
+         * @type {number} */
+        this.pixNb = opts.pixNb || 3
+
+        /**
+         * The function returning cell information as HTML.
+         * This is typically used for tooltip information.
+         * @type {function(import("./Dataset").Cell, number):string} */
+        this.cellInfoHTML = opts.cellInfoHTML || Layer.defaultCellInfoHTML
+    }
+
+    /**
+     * Return the relevant dataset component for a specified zoom factor.
+     *
+     * @param {number} zf
+     * @returns {import("./DatasetComponent").DatasetComponent|undefined}
+     * */
+    getDatasetComponent(zf) {
+        if (zf < this.minZoom || zf > this.maxZoom) return
+
+        //special case whith single component dataset
+        if (this.dataset.datasetComponents.length == 1) return this.dataset.datasetComponents[0]
+
+        const rs = this.dataset.resolutions
+        let i = 0
+        let z = rs[i] / this.pixNb
+        while (z < zf && i < rs.length) {
+            i++
+            z = rs[i] / this.pixNb
+        }
+        //if (i == 0) return this.dataset.datasetComponents[0];
+        //return this.dataset.datasetComponents[i - 1];
+        if (i == rs.length) return this.dataset.datasetComponents[rs.length - 1]
+        return this.dataset.datasetComponents[i]
+    }
+
+    /**
+     * The default function returning cell information as HTML.
+     * This is typically used for tooltip information.
+     *
+     * @param {import("./Dataset").Cell} cell
+     * @returns {string}
+     */
+    static defaultCellInfoHTML(cell) {
+        const buf = []
+        for (const key of Object.keys(cell)) {
+            if (key === 'x') continue
+            if (key === 'y') continue
+            buf.push('<b>', key, '</b>', ' : ', cell[key], '<br>')
+        }
+        return buf.join('')
+    }
+}