gridviz 3.0.14 → 3.0.16

package/src/style/SideStyle.js

@@ -1,205 +1,212 @@
-//@ts-check
-'use strict'
-
-import { Style } from '../core/Style.js'
-
-/** @typedef {{ x:number, y:number, or:"v"|"h", c1:(import('../core/Dataset').Cell)|undefined, c2:(import('../core/Dataset').Cell)|undefined }} Side */
-
-/**
- * @typedef {function(Array.<Side>,number, number):*} SideViewScale */
-
-/**
- * @module style
- * @author Julien Gaffuri
- */
-export class SideStyle extends Style {
-    /** @param {object} opts */
-    constructor(opts = {}) {
-        super(opts)
-
-        /** A function returning the color of a cell side.
-         * @type {function(Side, number, number, object):string} */
-        this.color = opts.color || ((side, resolution, z, sideViewScale) => '#EA6BAC')
-
-        /** A function returning the width of a cell side, in geo unit
-         * @type {function(Side, number, number, object):number} */
-        this.width = opts.width || ((side, resolution, z, sideViewScale) => resolution / 5)
-
-        /** A function returning the length of a cell side, in geo unit
-         * @type {function(Side, number, number, object):number} */
-        this.length = opts.length || ((side, resolution, z, sideViewScale) => resolution)
-
-        /** Set to A or true so that the side is drawn as a diamond */
-        this.diamond = opts.diamond
-    }
-
-    /**
-     * @param {Array.<import("../core/Dataset").Cell>} cells
-     * @param {number} resolution
-     * @param {import("../core/GeoCanvas").GeoCanvas} geoCanvas
-     */
-    draw(cells, geoCanvas, resolution) {
-
-        //filter
-        if (this.filter) cells = cells.filter(this.filter)
-
-        //
-        const z = geoCanvas.view.z
-
-        //build sides
-
-        /**  @type {Array.<Side>} */
-        const sides = SideStyle.buildSides(cells, resolution)
-        if (sides.length == 0) return
-
-        //get side view scale
-        const viewScale = this.viewScale ? this.viewScale(sides, resolution, z) : undefined
-
-        //draw sides
-
-        geoCanvas.ctx.lineCap = 'butt'
-        const r2 = resolution * 0.5
-        for (let side of sides) {
-
-            //color
-            /** @type {string|undefined} */
-            const col = this.color ? this.color(side, resolution, z, viewScale) : undefined
-            if (!col || col == 'none') continue
-
-            if (this.diamond) {
-
-                //set color
-                geoCanvas.ctx.fillStyle = col
-
-                //draw diamond
-                const x = side.x, y = side.y
-                geoCanvas.ctx.beginPath()
-                geoCanvas.ctx.moveTo(x - r2, y)
-                geoCanvas.ctx.lineTo(x, y + r2)
-                geoCanvas.ctx.lineTo(x + r2, y)
-                geoCanvas.ctx.lineTo(x, y - r2)
-                geoCanvas.ctx.closePath()
-                geoCanvas.ctx.fill()
-
-            } else {
-
-                //width
-                /** @type {number|undefined} */
-                const wG = this.width ? this.width(side, resolution, z, viewScale) : undefined
-                if (!wG || wG <= 0) continue
-
-                //length
-                /** @type {number|undefined} */
-                const lG = this.length ? this.length(side, resolution, z, viewScale) : undefined
-                if (!lG || lG <= 0) continue
-                const lG2 = lG * 0.5
-
-                //set width
-                geoCanvas.ctx.lineWidth = wG
-                //set color
-                geoCanvas.ctx.strokeStyle = col
-
-                //draw segment with correct orientation
-                const x = side.x, y = side.y
-                geoCanvas.ctx.beginPath()
-                if (side.or === "v") {
-                    geoCanvas.ctx.moveTo(x, y - lG2)
-                    geoCanvas.ctx.lineTo(x, y + lG2)
-                } else {
-                    geoCanvas.ctx.moveTo(x - lG2, y)
-                    geoCanvas.ctx.lineTo(x + lG2, y)
-                }
-                geoCanvas.ctx.stroke()
-            }
-        }
-
-        //update legends
-        this.updateLegends({ style: this, resolution: resolution, z: z, viewScale: viewScale })
-    }
-
-
-
-    /**
-     * 
-     * @param {Array.<import('../core/Dataset').Cell>} cells The cells to use to build the sides.
-     * @param {number} resolution The cells resolution
-     * @param {boolean} withHorizontal Set to true to build horizontal sides, false otherwise.
-     * @param {boolean} withVertical Set to true to build vertical sides, false otherwise.
-     * @param {boolean} center Set to true so that the side coordinate are those of its center point rather than its left/bottom point (the side x,y coordinates are those of the left point for horizontal sides, and of the bottom point for vertical sides)
-     * @returns { Array.<Side> }
-     */
-    static buildSides(cells, resolution, withHorizontal = true, withVertical = true, center = true) {
-        /** @type { Array.<Side> } */
-        const sides = []
-
-        const r2 = center ? resolution / 2 : 0
-
-        //make horizontal sides
-        //sort cells by x and y
-        cells.sort((c1, c2) => (c2.x == c1.x ? c1.y - c2.y : c1.x - c2.x))
-        let c1 = cells[0]
-        for (let i = 1; i < cells.length; i++) {
-            let c2 = cells[i]
-
-            if ((c1.y + resolution == c2.y) && (c1.x == c2.x))
-                //cells in same column and touch along horizontal side
-                //make shared side
-                sides.push({
-                    or: 'h',
-                    x: c1.x + r2, y: c2.y,
-                    c1: c1, c2: c2
-                })
-            else {
-                //cells do not touch along horizontal side
-                //make two sides: top one for c1, bottom for c2
-                sides.push({
-                    or: 'h',
-                    x: c1.x + r2, y: c1.y + resolution,
-                    c1: c1, c2: undefined
-                })
-                sides.push({
-                    or: 'h',
-                    x: c2.x + r2, y: c2.y,
-                    c1: undefined, c2: c2
-                })
-            }
-
-            c1 = c2
-        }
-
-        //make vertical sides
-        //sort cells by y and x
-        cells.sort((c1, c2) => (c2.y == c1.y ? c1.x - c2.x : c1.y - c2.y))
-        c1 = cells[0]
-        for (let i = 1; i < cells.length; i++) {
-            let c2 = cells[i]
-
-            if ((c1.x + resolution == c2.x) && (c1.y == c2.y))
-                //cells in same row and touch along vertical side
-                //make shared side
-                sides.push({
-                    or: 'v',
-                    x: c1.x + resolution, y: c1.y + r2,
-                    c1: c1, c2: c2
-                })
-            else {
-                //cells do not touch along vertical side
-                //make two sides: right one for c1, left for c2
-                sides.push({
-                    or: 'v',
-                    x: c1.x + resolution, y: c1.y + r2,
-                    c1: c1, c2: undefined
-                })
-                sides.push({
-                    or: 'v',
-                    x: c2.x, y: c2.y + r2,
-                    c1: undefined, c2: c2
-                })
-            }
-
-            c1 = c2
-        }
-        return sides
-    }
-
-}
+//@ts-check
+'use strict'
+
+import { Style } from '../core/Style.js'
+
+/** @typedef {{ x:number, y:number, or:"v"|"h", c1:(import('../core/Dataset').Cell)|undefined, c2:(import('../core/Dataset').Cell)|undefined }} Side */
+
+/**
+ * @typedef {function(Array.<Side>,number, number):*} SideViewScale */
+
+/**
+ * @module style
+ * @author Julien Gaffuri
+ */
+export class SideStyle extends Style {
+    /** @param {object} opts */
+    constructor(opts = {}) {
+        super(opts)
+
+        /** A function returning the color of a cell side.
+         * @type {function(Side, number, number, object):string} */
+        this.color = opts.color || ((side, resolution, z, sideViewScale) => '#EA6BAC')
+
+        /** A function returning the width of a cell side, in geo unit
+         * @type {function(Side, number, number, object):number} */
+        this.width = opts.width || ((side, resolution, z, sideViewScale) => resolution / 5)
+
+        /** A function returning the length of a cell side, in geo unit
+         * @type {function(Side, number, number, object):number} */
+        this.length = opts.length || ((side, resolution, z, sideViewScale) => resolution)
+
+        /** Set to A or true so that the side is drawn as a diamond */
+        this.diamond = opts.diamond
+    }
+
+    /**
+     * @param {Array.<import("../core/Dataset").Cell>} cells
+     * @param {number} resolution
+     * @param {import("../core/GeoCanvas").GeoCanvas} geoCanvas
+     */
+    draw(cells, geoCanvas, resolution) {
+        //filter
+        if (this.filter) cells = cells.filter(this.filter)
+
+        //
+        const z = geoCanvas.view.z
+        const ctx = geoCanvas.offscreenCtx
+
+        //build sides
+
+        /**  @type {Array.<Side>} */
+        const sides = SideStyle.buildSides(cells, resolution)
+        if (sides.length == 0) return
+
+        //get side view scale
+        const viewScale = this.viewScale ? this.viewScale(sides, resolution, z) : undefined
+
+        //draw sides
+
+        ctx.lineCap = 'butt'
+        const r2 = resolution * 0.5
+        for (let side of sides) {
+            //color
+            /** @type {string|undefined} */
+            const col = this.color ? this.color(side, resolution, z, viewScale) : undefined
+            if (!col || col == 'none') continue
+
+            if (this.diamond) {
+                //set color
+                ctx.fillStyle = col
+
+                //draw diamond
+                const x = side.x,
+                    y = side.y
+                ctx.beginPath()
+                ctx.moveTo(x - r2, y)
+                ctx.lineTo(x, y + r2)
+                ctx.lineTo(x + r2, y)
+                ctx.lineTo(x, y - r2)
+                ctx.closePath()
+                ctx.fill()
+            } else {
+                //width
+                /** @type {number|undefined} */
+                const wG = this.width ? this.width(side, resolution, z, viewScale) : undefined
+                if (!wG || wG <= 0) continue
+
+                //length
+                /** @type {number|undefined} */
+                const lG = this.length ? this.length(side, resolution, z, viewScale) : undefined
+                if (!lG || lG <= 0) continue
+                const lG2 = lG * 0.5
+
+                //set width
+                ctx.lineWidth = wG
+                //set color
+                ctx.strokeStyle = col
+
+                //draw segment with correct orientation
+                const x = side.x,
+                    y = side.y
+                ctx.beginPath()
+                if (side.or === 'v') {
+                    ctx.moveTo(x, y - lG2)
+                    ctx.lineTo(x, y + lG2)
+                } else {
+                    ctx.moveTo(x - lG2, y)
+                    ctx.lineTo(x + lG2, y)
+                }
+                ctx.stroke()
+            }
+        }
+
+        //update legends
+        this.updateLegends({ style: this, resolution: resolution, z: z, viewScale: viewScale })
+    }
+
+    /**
+     *
+     * @param {Array.<import('../core/Dataset').Cell>} cells The cells to use to build the sides.
+     * @param {number} resolution The cells resolution
+     * @param {boolean} withHorizontal Set to true to build horizontal sides, false otherwise.
+     * @param {boolean} withVertical Set to true to build vertical sides, false otherwise.
+     * @param {boolean} center Set to true so that the side coordinate are those of its center point rather than its left/bottom point (the side x,y coordinates are those of the left point for horizontal sides, and of the bottom point for vertical sides)
+     * @returns { Array.<Side> }
+     */
+    static buildSides(cells, resolution, withHorizontal = true, withVertical = true, center = true) {
+        /** @type { Array.<Side> } */
+        const sides = []
+
+        const r2 = center ? resolution / 2 : 0
+
+        //make horizontal sides
+        //sort cells by x and y
+        cells.sort((c1, c2) => (c2.x == c1.x ? c1.y - c2.y : c1.x - c2.x))
+        let c1 = cells[0]
+        for (let i = 1; i < cells.length; i++) {
+            let c2 = cells[i]
+
+            if (c1.y + resolution == c2.y && c1.x == c2.x)
+                //cells in same column and touch along horizontal side
+                //make shared side
+                sides.push({
+                    or: 'h',
+                    x: c1.x + r2,
+                    y: c2.y,
+                    c1: c1,
+                    c2: c2,
+                })
+            else {
+                //cells do not touch along horizontal side
+                //make two sides: top one for c1, bottom for c2
+                sides.push({
+                    or: 'h',
+                    x: c1.x + r2,
+                    y: c1.y + resolution,
+                    c1: c1,
+                    c2: undefined,
+                })
+                sides.push({
+                    or: 'h',
+                    x: c2.x + r2,
+                    y: c2.y,
+                    c1: undefined,
+                    c2: c2,
+                })
+            }
+
+            c1 = c2
+        }
+
+        //make vertical sides
+        //sort cells by y and x
+        cells.sort((c1, c2) => (c2.y == c1.y ? c1.x - c2.x : c1.y - c2.y))
+        c1 = cells[0]
+        for (let i = 1; i < cells.length; i++) {
+            let c2 = cells[i]
+
+            if (c1.x + resolution == c2.x && c1.y == c2.y)
+                //cells in same row and touch along vertical side
+                //make shared side
+                sides.push({
+                    or: 'v',
+                    x: c1.x + resolution,
+                    y: c1.y + r2,
+                    c1: c1,
+                    c2: c2,
+                })
+            else {
+                //cells do not touch along vertical side
+                //make two sides: right one for c1, left for c2
+                sides.push({
+                    or: 'v',
+                    x: c1.x + resolution,
+                    y: c1.y + r2,
+                    c1: c1,
+                    c2: undefined,
+                })
+                sides.push({
+                    or: 'v',
+                    x: c2.x,
+                    y: c2.y + r2,
+                    c1: undefined,
+                    c2: c2,
+                })
+            }
+
+            c1 = c2
+        }
+        return sides
+    }
+}

package/src/style/SquareColorCategoryWebGLStyle.js

@@ -1,108 +1,107 @@
-//@ts-check
-'use strict'
-
-import { Style } from '../core/Style.js'
-import { makeWebGLCanvas } from '../utils/webGLUtils.js'
-import { WebGLSquareColoringCatAdvanced } from '../utils/WebGLSquareColoringCatAdvanced.js'
-
-/**
- * Style based on webGL
- * To show cells as colored squares, from categories.
- * All cells are drawn as squares, with the same size
- *
- * @module style
- * @author Julien Gaffuri
- */
-export class SquareColorCategoryWebGLStyle extends Style {
-    /** @param {object} opts */
-    constructor(opts) {
-        super(opts)
-        opts = opts || {}
-
-        /**
-         * A function returning the category code of the cell, for coloring.
-         * @type {function(import('../core/Dataset.js').Cell):string} */
-        this.code = opts.code
-
-        /**
-         * The dictionary (code -> color) which gives the color of each category code.
-         * @type {object} */
-        opts.color = opts.color || undefined
-
-        /** @type { Array.<string> } */
-        const codes = Object.keys(opts.color)
-
-        /** @type { object } @private */
-        this.catToI = {}
-        for (let i = 0; i < codes.length; i++) this.catToI[codes[i]] = i + ''
-
-        /** @type { Array.<string> } @private */
-        this.colors = []
-        for (const code of codes)
-            this.colors.push(opts.color['' + code])
-
-        /**
-         * A function returning the size of the cells, in geographical unit. All cells have the same size.
-         * @type {function(number,number):number} */
-        this.size = opts.size // (resolution, z) => ...
-
-        /**
-         * @private
-         * @type { WebGLSquareColoringCatAdvanced } */
-        this.wgp = new WebGLSquareColoringCatAdvanced(this.colors)
-    }
-
-    /**
-     * @param {Array.<import("../core/Dataset.js").Cell>} cells
-     * @param {import("../core/GeoCanvas.js").GeoCanvas} geoCanvas
-     * @param {number} resolution
-     */
-    draw(cells, geoCanvas, resolution) {
-
-        //filter
-        if (this.filter) cells = cells.filter(this.filter)
-
-        //
-        const z = geoCanvas.view.z
-
-        //add vertice and fragment data
-        const r2 = resolution / 2
-        let c, nb = cells.length
-        const verticesBuffer = []
-        const iBuffer = []
-        for (let i = 0; i < nb; i++) {
-            c = cells[i]
-            const cat = this.code(c)
-            if (cat == undefined) {
-                console.log('Unexpected category: ' + cat)
-                continue
-            }
-            /** @type {number} */
-            const i_ = this.catToI[cat]
-            if (isNaN(+i_)) {
-                console.log('Unexpected category index: ' + cat + ' ' + i_)
-                continue
-            }
-            verticesBuffer.push(c.x + r2, c.y + r2)
-            iBuffer.push(+i_)
-        }
-
-        //create canvas and webgl renderer
-        const cvWGL = makeWebGLCanvas(geoCanvas.w + '', geoCanvas.h + '')
-        if (!cvWGL) {
-            console.error('No webGL')
-            return
-        }
-
-        //draw
-        const sizeGeo = this.size ? this.size(resolution, z) : resolution + 0.2 * z
-        this.wgp.draw(cvWGL.gl, verticesBuffer, iBuffer, geoCanvas.getWebGLTransform(), sizeGeo / z)
-
-        //draw in canvas geo
-        geoCanvas.initCanvasTransform()
-        geoCanvas.ctx.drawImage(cvWGL.canvas, 0, 0)
-
-        //update legends
-        this.updateLegends({ style: this, resolution: resolution, z: z })
-    }
-}
+//@ts-check
+'use strict'
+
+import { Style } from '../core/Style.js'
+import { makeWebGLCanvas } from '../utils/webGLUtils.js'
+import { WebGLSquareColoringCatAdvanced } from '../utils/WebGLSquareColoringCatAdvanced.js'
+
+/**
+ * Style based on webGL
+ * To show cells as colored squares, from categories.
+ * All cells are drawn as squares, with the same size
+ *
+ * @module style
+ * @author Julien Gaffuri
+ */
+export class SquareColorCategoryWebGLStyle extends Style {
+    /** @param {object} opts */
+    constructor(opts) {
+        super(opts)
+        opts = opts || {}
+
+        /**
+         * A function returning the category code of the cell, for coloring.
+         * @type {function(import('../core/Dataset.js').Cell):string} */
+        this.code = opts.code
+
+        /**
+         * The dictionary (code -> color) which gives the color of each category code.
+         * @type {object} */
+        opts.color = opts.color || undefined
+
+        /** @type { Array.<string> } */
+        const codes = Object.keys(opts.color)
+
+        /** @type { object } @private */
+        this.catToI = {}
+        for (let i = 0; i < codes.length; i++) this.catToI[codes[i]] = i + ''
+
+        /** @type { Array.<string> } @private */
+        this.colors = []
+        for (const code of codes) this.colors.push(opts.color['' + code])
+
+        /**
+         * A function returning the size of the cells, in geographical unit. All cells have the same size.
+         * @type {function(number,number):number} */
+        this.size = opts.size // (resolution, z) => ...
+
+        /**
+         * @private
+         * @type { WebGLSquareColoringCatAdvanced } */
+        this.wgp = new WebGLSquareColoringCatAdvanced(this.colors)
+    }
+
+    /**
+     * @param {Array.<import("../core/Dataset.js").Cell>} cells
+     * @param {import("../core/GeoCanvas.js").GeoCanvas} geoCanvas
+     * @param {number} resolution
+     */
+    draw(cells, geoCanvas, resolution) {
+        //filter
+        if (this.filter) cells = cells.filter(this.filter)
+
+        //
+        const z = geoCanvas.view.z
+
+        //add vertice and fragment data
+        const r2 = resolution / 2
+        let c,
+            nb = cells.length
+        const verticesBuffer = []
+        const iBuffer = []
+        for (let i = 0; i < nb; i++) {
+            c = cells[i]
+            const cat = this.code(c)
+            if (cat == undefined) {
+                console.log('Unexpected category: ' + cat)
+                continue
+            }
+            /** @type {number} */
+            const i_ = this.catToI[cat]
+            if (isNaN(+i_)) {
+                console.log('Unexpected category index: ' + cat + ' ' + i_)
+                continue
+            }
+            verticesBuffer.push(c.x + r2, c.y + r2)
+            iBuffer.push(+i_)
+        }
+
+        //create canvas and webgl renderer
+        const cvWGL = makeWebGLCanvas(geoCanvas.w + '', geoCanvas.h + '')
+        if (!cvWGL) {
+            console.error('No webGL')
+            return
+        }
+
+        //draw
+        const sizeGeo = this.size ? this.size(resolution, z) : resolution + 0.2 * z
+        this.wgp.draw(cvWGL.gl, verticesBuffer, iBuffer, geoCanvas.getWebGLTransform(), sizeGeo / z)
+
+        //draw in canvas geo
+        geoCanvas.initCanvasTransform()
+        geoCanvas.offscreenCtx.drawImage(cvWGL.canvas, 0, 0)
+
+        //update legends
+        this.updateLegends({ style: this, resolution: resolution, z: z })
+    }
+}