gridviz 2.1.13 → 2.1.14

package/src/style/SquareColorWGLStyle.js

@@ -1,146 +1,146 @@
-//@ts-check
-'use strict'
-
-import { Style } from '../Style.js'
-import { makeWebGLCanvas } from '../utils/webGLUtils.js'
-import { WebGLSquareColoringAdvanced } from '../utils/WebGLSquareColoringAdvanced.js'
-import { monitor, monitorDuration } from '../utils/Utils.js'
-
-/**
- * Style based on webGL
- * To show cells as colored squares, with computation of the colors on GPU side (faster than JavaScript side).
- * Alls squares with the same size
- *
- * @author Julien Gaffuri
- */
-export class SquareColorWGLStyle extends Style {
-    /** @param {object} opts */
-    constructor(opts) {
-        super(opts)
-        opts = opts || {}
-
-        /**
-         * The name of the column/attribute of the tabular data where to retrieve the variable for color.
-         * @type {string} */
-        this.colorCol = opts.colorCol
-
-        /**
-         * A function returning the t value (within [0,1]) of the cell.
-         * @type {function(number,number,import("../Style").Stat):number} */
-        this.tFun = opts.tFun || ((v, r, s) => v / s.max)
-
-        /**
-         * Distribution stretching method.
-         * The stretching is performed on GPU side (fragment shader).
-         * @type {{ fun:string, alpha:number }} */
-        this.stretching = opts.stretching
-
-        /**
-         * The sample of the color ramp.
-         * The color is computed on GPU side (fragment shader) based on those values (linear interpolation).
-         * @type {Array.<string>} */
-        this.colors =
-            opts.colors ||
-            [
-                'rgb(158, 1, 66)',
-                'rgb(248, 142, 83)',
-                'rgb(251, 248, 176)',
-                'rgb(137, 207, 165)',
-                'rgb(94, 79, 162)',
-            ].reverse()
-        if (opts.color)
-            this.colors = [
-                opts.color(0),
-                opts.color(0.2),
-                opts.color(0.4),
-                opts.color(0.6),
-                opts.color(0.8),
-                opts.color(1),
-            ]
-
-        /**
-         * Define the opacity of the style, within [0,1].
-         * If this opacity is defined, the individual color opacity will be ignored.
-         * @type {function(number,number):number} */
-        this.opacity = opts.opacity // (r,zf) => ...
-
-        /**
-         * 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, zf) => ...
-    }
-
-    /**
-     * @param {Array.<import("../Dataset").Cell>} cells
-     * @param {number} r
-     * @param {import("../GeoCanvas").GeoCanvas} cg
-     */
-    draw(cells, r, cg) {
-        if (monitor) monitorDuration('*** SquareColorWGLStyle draw')
-
-        //filter
-        if (this.filter) cells = cells.filter(this.filter)
-
-        //zoom factor
-        const zf = cg.getZf()
-
-        //compute color variable statistics
-        const statColor = Style.getStatistics(cells, (c) => c[this.colorCol], true)
-        if (monitor) monitorDuration('   color stats computation')
-
-        if (!statColor) return
-
-        //create canvas and webgl renderer
-        //for opacity control, see: https://webglfundamentals.org/webgl/lessons/webgl-and-alpha.html
-        const cvWGL = makeWebGLCanvas(
-            cg.w + '',
-            cg.h + '',
-            this.opacity != undefined ? { premultipliedAlpha: false } : undefined
-        )
-        if (!cvWGL) {
-            console.error('No webGL')
-            return
-        }
-        if (monitor) monitorDuration('   web GL canvas creation')
-
-        //add vertice and fragment data
-        const r2 = r / 2
-        const verticesBuffer = []
-        const tBuffer = []
-        for (let c of cells) {
-            const t = this.tFun(c[this.colorCol], r, statColor)
-            if (t == null || t == undefined) continue
-            verticesBuffer.push(c.x + r2, c.y + r2)
-            tBuffer.push(t > 1 ? 1 : t < 0 ? 0 : t)
-        }
-
-        if (monitor) monitorDuration('   webgl drawing data preparation')
-
-        //compute pixel size
-        const sizeGeo = this.size ? this.size(r, zf) : r + 0.2 * zf
-
-        //compute opacity
-        const op = this.opacity ? this.opacity(r, zf) : undefined
-
-        //
-        const wgp = new WebGLSquareColoringAdvanced(cvWGL.gl, this.colors, this.stretching, sizeGeo / zf, op)
-
-        if (monitor) monitorDuration('   webgl program preparation')
-
-        //draw
-        wgp.draw(verticesBuffer, tBuffer, cg.getWebGLTransform())
-
-        if (monitor) monitorDuration('   webgl drawing')
-
-        //draw in canvas geo
-        cg.initCanvasTransform()
-        cg.ctx.drawImage(cvWGL.canvas, 0, 0)
-
-        if (monitor) monitorDuration('   canvas drawing')
-
-        //update legends
-        this.updateLegends({ style: this, r: r, zf: zf, sColor: statColor })
-
-        if (monitor) monitorDuration('*** SquareColorWGLStyle end draw')
-    }
-}
+//@ts-check
+'use strict'
+
+import { Style } from '../Style.js'
+import { makeWebGLCanvas } from '../utils/webGLUtils.js'
+import { WebGLSquareColoringAdvanced } from '../utils/WebGLSquareColoringAdvanced.js'
+import { monitor, monitorDuration } from '../utils/Utils.js'
+
+/**
+ * Style based on webGL
+ * To show cells as colored squares, with computation of the colors on GPU side (faster than JavaScript side).
+ * Alls squares with the same size
+ *
+ * @author Julien Gaffuri
+ */
+export class SquareColorWGLStyle extends Style {
+    /** @param {object} opts */
+    constructor(opts) {
+        super(opts)
+        opts = opts || {}
+
+        /**
+         * The name of the column/attribute of the tabular data where to retrieve the variable for color.
+         * @type {string} */
+        this.colorCol = opts.colorCol
+
+        /**
+         * A function returning the t value (within [0,1]) of the cell.
+         * @type {function(number,number,import("../Style").Stat):number} */
+        this.tFun = opts.tFun || ((v, r, s) => v / s.max)
+
+        /**
+         * Distribution stretching method.
+         * The stretching is performed on GPU side (fragment shader).
+         * @type {{ fun:string, alpha:number }} */
+        this.stretching = opts.stretching
+
+        /**
+         * The sample of the color ramp.
+         * The color is computed on GPU side (fragment shader) based on those values (linear interpolation).
+         * @type {Array.<string>} */
+        this.colors =
+            opts.colors ||
+            [
+                'rgb(158, 1, 66)',
+                'rgb(248, 142, 83)',
+                'rgb(251, 248, 176)',
+                'rgb(137, 207, 165)',
+                'rgb(94, 79, 162)',
+            ].reverse()
+        if (opts.color)
+            this.colors = [
+                opts.color(0),
+                opts.color(0.2),
+                opts.color(0.4),
+                opts.color(0.6),
+                opts.color(0.8),
+                opts.color(1),
+            ]
+
+        /**
+         * Define the opacity of the style, within [0,1].
+         * If this opacity is defined, the individual color opacity will be ignored.
+         * @type {function(number,number):number} */
+        this.opacity = opts.opacity // (r,zf) => ...
+
+        /**
+         * 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, zf) => ...
+    }
+
+    /**
+     * @param {Array.<import("../Dataset").Cell>} cells
+     * @param {number} r
+     * @param {import("../GeoCanvas").GeoCanvas} cg
+     */
+    draw(cells, r, cg) {
+        if (monitor) monitorDuration('*** SquareColorWGLStyle draw')
+
+        //filter
+        if (this.filter) cells = cells.filter(this.filter)
+
+        //zoom factor
+        const zf = cg.getZf()
+
+        //compute color variable statistics
+        const statColor = Style.getStatistics(cells, (c) => c[this.colorCol], true)
+        if (monitor) monitorDuration('   color stats computation')
+
+        if (!statColor) return
+
+        //create canvas and webgl renderer
+        //for opacity control, see: https://webglfundamentals.org/webgl/lessons/webgl-and-alpha.html
+        const cvWGL = makeWebGLCanvas(
+            cg.w + '',
+            cg.h + '',
+            this.opacity != undefined ? { premultipliedAlpha: false } : undefined
+        )
+        if (!cvWGL) {
+            console.error('No webGL')
+            return
+        }
+        if (monitor) monitorDuration('   web GL canvas creation')
+
+        //add vertice and fragment data
+        const r2 = r / 2
+        const verticesBuffer = []
+        const tBuffer = []
+        for (let c of cells) {
+            const t = this.tFun(c[this.colorCol], r, statColor)
+            if (t == null || t == undefined) continue
+            verticesBuffer.push(c.x + r2, c.y + r2)
+            tBuffer.push(t > 1 ? 1 : t < 0 ? 0 : t)
+        }
+
+        if (monitor) monitorDuration('   webgl drawing data preparation')
+
+        //compute pixel size
+        const sizeGeo = this.size ? this.size(r, zf) : r + 0.2 * zf
+
+        //compute opacity
+        const op = this.opacity ? this.opacity(r, zf) : undefined
+
+        //
+        const wgp = new WebGLSquareColoringAdvanced(cvWGL.gl, this.colors, this.stretching, sizeGeo / zf, op)
+
+        if (monitor) monitorDuration('   webgl program preparation')
+
+        //draw
+        wgp.draw(verticesBuffer, tBuffer, cg.getWebGLTransform())
+
+        if (monitor) monitorDuration('   webgl drawing')
+
+        //draw in canvas geo
+        cg.initCanvasTransform()
+        cg.ctx.drawImage(cvWGL.canvas, 0, 0)
+
+        if (monitor) monitorDuration('   canvas drawing')
+
+        //update legends
+        this.updateLegends({ style: this, r: r, zf: zf, sColor: statColor })
+
+        if (monitor) monitorDuration('*** SquareColorWGLStyle end draw')
+    }
+}

package/src/style/StrokeStyle.js

@@ -1,131 +1,131 @@
-//@ts-check
-'use strict'
-
-import { Style } from '../Style.js'
-
-/**
- *
- * @author Julien Gaffuri
- */
-export class StrokeStyle extends Style {
-    /** @param {object} opts */
-    constructor(opts) {
-        super(opts)
-        opts = opts || {}
-
-        /** The name of the column/attribute of the tabular data where to retrieve the variable for color.
-         * @type {string} */
-        this.strokeColorCol = opts.strokeColorCol
-
-        /** A function returning the color of the stroke.
-         * @type {function(number,number,import("../Style").Stat|undefined):string} */
-        this.strokeColor = opts.strokeColor || (() => '#666')
-
-        /** The name of the column/attribute of the tabular data where to retrieve the variable for size.
-         * @type {string} */
-        this.sizeCol = opts.sizeCol
-
-        /** A function returning the size of a cell in geographical unit.
-         * @type {function(number,number,import("../Style").Stat|undefined,number):number} */
-        this.size = opts.size
-
-        /** The stroke line width, in pixels.
-         * @type {string} */
-        this.strokeWidthCol = opts.strokeWidthCol
-
-        /** The stroke line width in geographical unit.
-         * @type {function(number,number,import("../Style").Stat|undefined,number):number} */
-        this.strokeWidth = opts.strokeWidth // (v,r,s,z)=>...
-
-        /** A function returning the shape of a cell.
-         * @type {function(import("../Dataset").Cell):import("../Style").Shape} */
-        this.shape = opts.shape || (() => 'square')
-    }
-
-    /**
-     * Draw cells as squares, with various colors and size.
-     *
-     * @param {Array.<import("../Dataset").Cell>} cells
-     * @param {number} r
-     * @param {import("../GeoCanvas").GeoCanvas} cg
-     */
-    draw(cells, r, cg) {
-        //filter
-        if (this.filter) cells = cells.filter(this.filter)
-
-        //zoom factor
-        const zf = cg.getZf()
-
-        let statColor
-        if (this.strokeColorCol) statColor = Style.getStatistics(cells, (c) => c[this.strokeColorCol], true)
-
-        let statSize
-        if (this.sizeCol) statSize = Style.getStatistics(cells, (c) => c[this.sizeCol], true)
-
-        let statWidth
-        if (this.strokeWidthCol) statWidth = Style.getStatistics(cells, (c) => c[this.strokeWidthCol], true)
-
-        //draw with HTML canvas
-        //in geo coordinates
-        cg.setCanvasTransform()
-
-        const r2 = r * 0.5
-        for (let cell of cells) {
-            //color
-            const col = this.strokeColor
-                ? this.strokeColor(cell[this.strokeColorCol], r, statColor)
-                : undefined
-            if (!col || col === 'none') continue
-            cg.ctx.strokeStyle = col
-
-            //size
-            /** @type {function(number,number,import("../Style").Stat|undefined,number):number} */
-            let s_ = this.size || (() => r)
-            //size - in geo unit
-            const sG = s_(cell[this.sizeCol], r, statSize, zf)
-
-            //width
-            const wi = this.strokeWidth
-                ? this.strokeWidth(cell[this.strokeWidthCol], r, statWidth, zf)
-                : 1 * zf
-            if (!wi || wi <= 0) continue
-            cg.ctx.lineWidth = wi
-
-            //shape
-            const shape = this.shape ? this.shape(cell) : 'square'
-            if (shape === 'none') continue
-
-            //get offset
-            const offset = this.offset(cell, r, zf)
-
-            if (shape === 'square') {
-                //draw square
-                const d = r * (1 - sG / r) * 0.5
-                cg.ctx.beginPath()
-                cg.ctx.rect(cell.x + d + offset.dx, cell.y + d + offset.dy, sG, sG)
-                cg.ctx.stroke()
-            } else if (shape === 'circle') {
-                //draw circle
-                cg.ctx.beginPath()
-                cg.ctx.arc(cell.x + r2 + offset.dx, cell.y + r2 + offset.dy, sG * 0.5, 0, 2 * Math.PI, false)
-                cg.ctx.stroke()
-            } else if (shape === 'diamond') {
-                const s2 = sG * 0.5
-                cg.ctx.beginPath()
-                cg.ctx.moveTo(cell.x + r2 - s2, cell.y + r2)
-                cg.ctx.lineTo(cell.x + r2, cell.y + r2 + s2)
-                cg.ctx.lineTo(cell.x + r2 + s2, cell.y + r2)
-                cg.ctx.lineTo(cell.x + r2, cell.y + r2 - s2)
-                cg.ctx.lineTo(cell.x + r2 - s2, cell.y + r2)
-                cg.ctx.stroke()
-            } else if (shape === 'donut') {
-                console.error('Not implemented')
-            } else {
-                throw new Error('Unexpected shape:' + shape)
-            }
-        }
-
-        //update legends
-        //this.updateLegends({ style: this, r: resolution, zf: zf, sSize: statSize, sColor: statColor });
-    }
-}
+//@ts-check
+'use strict'
+
+import { Style } from '../Style.js'
+
+/**
+ *
+ * @author Julien Gaffuri
+ */
+export class StrokeStyle extends Style {
+    /** @param {object} opts */
+    constructor(opts) {
+        super(opts)
+        opts = opts || {}
+
+        /** The name of the column/attribute of the tabular data where to retrieve the variable for color.
+         * @type {string} */
+        this.strokeColorCol = opts.strokeColorCol
+
+        /** A function returning the color of the stroke.
+         * @type {function(number,number,import("../Style").Stat|undefined):string} */
+        this.strokeColor = opts.strokeColor || (() => '#666')
+
+        /** The name of the column/attribute of the tabular data where to retrieve the variable for size.
+         * @type {string} */
+        this.sizeCol = opts.sizeCol
+
+        /** A function returning the size of a cell in geographical unit.
+         * @type {function(number,number,import("../Style").Stat|undefined,number):number} */
+        this.size = opts.size
+
+        /** The stroke line width, in pixels.
+         * @type {string} */
+        this.strokeWidthCol = opts.strokeWidthCol
+
+        /** The stroke line width in geographical unit.
+         * @type {function(number,number,import("../Style").Stat|undefined,number):number} */
+        this.strokeWidth = opts.strokeWidth // (v,r,s,z)=>...
+
+        /** A function returning the shape of a cell.
+         * @type {function(import("../Dataset").Cell):import("../Style").Shape} */
+        this.shape = opts.shape || (() => 'square')
+    }
+
+    /**
+     * Draw cells as squares, with various colors and size.
+     *
+     * @param {Array.<import("../Dataset").Cell>} cells
+     * @param {number} r
+     * @param {import("../GeoCanvas").GeoCanvas} cg
+     */
+    draw(cells, r, cg) {
+        //filter
+        if (this.filter) cells = cells.filter(this.filter)
+
+        //zoom factor
+        const zf = cg.getZf()
+
+        let statColor
+        if (this.strokeColorCol) statColor = Style.getStatistics(cells, (c) => c[this.strokeColorCol], true)
+
+        let statSize
+        if (this.sizeCol) statSize = Style.getStatistics(cells, (c) => c[this.sizeCol], true)
+
+        let statWidth
+        if (this.strokeWidthCol) statWidth = Style.getStatistics(cells, (c) => c[this.strokeWidthCol], true)
+
+        //draw with HTML canvas
+        //in geo coordinates
+        cg.setCanvasTransform()
+
+        const r2 = r * 0.5
+        for (let cell of cells) {
+            //color
+            const col = this.strokeColor
+                ? this.strokeColor(cell[this.strokeColorCol], r, statColor)
+                : undefined
+            if (!col || col === 'none') continue
+            cg.ctx.strokeStyle = col
+
+            //size
+            /** @type {function(number,number,import("../Style").Stat|undefined,number):number} */
+            let s_ = this.size || (() => r)
+            //size - in geo unit
+            const sG = s_(cell[this.sizeCol], r, statSize, zf)
+
+            //width
+            const wi = this.strokeWidth
+                ? this.strokeWidth(cell[this.strokeWidthCol], r, statWidth, zf)
+                : 1 * zf
+            if (!wi || wi <= 0) continue
+            cg.ctx.lineWidth = wi
+
+            //shape
+            const shape = this.shape ? this.shape(cell) : 'square'
+            if (shape === 'none') continue
+
+            //get offset
+            const offset = this.offset(cell, r, zf)
+
+            if (shape === 'square') {
+                //draw square
+                const d = r * (1 - sG / r) * 0.5
+                cg.ctx.beginPath()
+                cg.ctx.rect(cell.x + d + offset.dx, cell.y + d + offset.dy, sG, sG)
+                cg.ctx.stroke()
+            } else if (shape === 'circle') {
+                //draw circle
+                cg.ctx.beginPath()
+                cg.ctx.arc(cell.x + r2 + offset.dx, cell.y + r2 + offset.dy, sG * 0.5, 0, 2 * Math.PI, false)
+                cg.ctx.stroke()
+            } else if (shape === 'diamond') {
+                const s2 = sG * 0.5
+                cg.ctx.beginPath()
+                cg.ctx.moveTo(cell.x + r2 - s2, cell.y + r2)
+                cg.ctx.lineTo(cell.x + r2, cell.y + r2 + s2)
+                cg.ctx.lineTo(cell.x + r2 + s2, cell.y + r2)
+                cg.ctx.lineTo(cell.x + r2, cell.y + r2 - s2)
+                cg.ctx.lineTo(cell.x + r2 - s2, cell.y + r2)
+                cg.ctx.stroke()
+            } else if (shape === 'donut') {
+                console.error('Not implemented')
+            } else {
+                throw new Error('Unexpected shape:' + shape)
+            }
+        }
+
+        //update legends
+        //this.updateLegends({ style: this, r: resolution, zf: zf, sSize: statSize, sColor: statColor });
+    }
+}