gridviz 3.0.14 → 3.0.16

package/src/style/JoyPlotStyle.js

@@ -1,128 +1,127 @@
-//@ts-check
-'use strict'
-
-import { Style } from '../core/Style.js'
-
-/**
- * @module style
- * @author Julien Gaffuri
- */
-export class JoyPlotStyle extends Style {
-    /** @param {object} opts */
-    constructor(opts) {
-        super(opts)
-        opts = opts || {}
-
-        /** A function returning the height of a cell in geographical unit.
-         * @type {function(import('../core/Dataset.js').Cell, number, number, object):number} */
-        this.height = opts.height || ((c, r) => r * Math.random()) //(c,r,z,vs) => {}
-
-        /**
-         * @type {function(number,{min:number, max:number},number,number):string} */
-        this.lineColor = opts.lineColor || ((y, ys, r, z) => '#BBB')
-        /**
-         * @type {function(number,{min:number, max:number},number,number):number} */
-        this.lineWidth = opts.lineWidth || ((y, ys, r, z) => z)
-        /**
-         * @type {function(number,{min:number, max:number},number,number):string} */
-        this.fillColor = opts.fillColor || ((y, ys, r, z) => '#c08c5968')
-    }
-
-
-    /**
-     * @param {Array.<import("../core/Dataset.js").Cell>} cells
-     * @param {import("../core/GeoCanvas.js").GeoCanvas} geoCanvas
-     * @param {number} resolution
-     * @override
-     */
-    draw(cells, geoCanvas, resolution) {
-
-        //filter
-        if (this.filter) cells = cells.filter(this.filter)
-
-        //
-        const z = geoCanvas.view.z
-
-        //get view scale
-        const viewScale = this.viewScale ? this.viewScale(cells, resolution, z) : undefined
-
-        //index cells by y and x
-        /**  @type {object} */
-        const ind = {}
-        for (const cell of cells) {
-            let row = ind[cell.y]
-            if (!row) {
-                row = {}
-                ind[cell.y] = row
-            }
-            row[cell.x] = this.height(cell, resolution, z, viewScale)
-        }
-
-        //compute extent
-        const e = geoCanvas.extGeo
-        if (!e) return
-        const xMin = Math.floor(e.xMin / resolution) * resolution
-        const xMax = Math.floor(e.xMax / resolution) * resolution
-        const yMin = Math.floor(e.yMin / resolution) * resolution
-        const yMax = Math.floor(e.yMax / resolution) * resolution
-
-        /**  @type {{min:number, max:number}} */
-        const ys = { min: yMin, max: yMax }
-
-        //draw lines, row by row, stating from the top
-        geoCanvas.ctx.lineJoin = 'round'
-        for (let y = yMax; y >= yMin; y -= resolution) {
-            //get row
-            const row = ind[y]
-
-            //no row
-            if (!row) continue
-
-            //place first point
-            geoCanvas.ctx.beginPath()
-            geoCanvas.ctx.moveTo(xMin - resolution / 2, y)
-
-            //store the previous height
-            /** @type {number|undefined} */
-            let hG_
-
-            //go through the line cells
-            for (let x = xMin; x <= xMax; x += resolution) {
-                //get column value
-                /** @type {number} */
-                let hG = row[x]
-                if (!hG) hG = 0
-
-                if (hG || hG_) {
-                    //draw line only when at least one of both values is non-null
-                    //TODO test bezierCurveTo
-                    geoCanvas.ctx.lineTo(x + resolution / 2, y + hG)
-                } else {
-                    //else move the point
-                    geoCanvas.ctx.moveTo(x + resolution / 2, y)
-                }
-                //store the previous value
-                hG_ = hG
-            }
-
-            //last point
-            if (hG_) geoCanvas.ctx.lineTo(xMax + resolution / 2, y)
-
-            //draw fill
-            const fc = this.fillColor(y, ys, resolution, z)
-            if (fc && fc != 'none') {
-                geoCanvas.ctx.fillStyle = fc
-                geoCanvas.ctx.fill()
-            }
-
-            //draw line
-            const lc = this.lineColor(y, ys, resolution, z)
-            const lw = this.lineWidth(y, ys, resolution, z)
-            if (lc && lc != 'none' && lw > 0) {
-                geoCanvas.ctx.strokeStyle = lc
-                geoCanvas.ctx.lineWidth = lw
-                geoCanvas.ctx.stroke()
-            }
-        }
-    }
-}
+//@ts-check
+'use strict'
+
+import { Style } from '../core/Style.js'
+
+/**
+ * @module style
+ * @author Julien Gaffuri
+ */
+export class JoyPlotStyle extends Style {
+    /** @param {object} opts */
+    constructor(opts) {
+        super(opts)
+        opts = opts || {}
+
+        /** A function returning the height of a cell in geographical unit.
+         * @type {function(import('../core/Dataset.js').Cell, number, number, object):number} */
+        this.height = opts.height || ((c, r) => r * Math.random()) //(c,r,z,vs) => {}
+
+        /**
+         * @type {function(number,{min:number, max:number},number,number):string} */
+        this.lineColor = opts.lineColor || ((y, ys, r, z) => '#BBB')
+        /**
+         * @type {function(number,{min:number, max:number},number,number):number} */
+        this.lineWidth = opts.lineWidth || ((y, ys, r, z) => z)
+        /**
+         * @type {function(number,{min:number, max:number},number,number):string} */
+        this.fillColor = opts.fillColor || ((y, ys, r, z) => '#c08c5968')
+    }
+
+    /**
+     * @param {Array.<import("../core/Dataset.js").Cell>} cells
+     * @param {import("../core/GeoCanvas.js").GeoCanvas} geoCanvas
+     * @param {number} resolution
+     * @override
+     */
+    draw(cells, geoCanvas, resolution) {
+        //filter
+        if (this.filter) cells = cells.filter(this.filter)
+
+        //
+        const z = geoCanvas.view.z
+        const ctx = geoCanvas.offscreenCtx
+
+        //get view scale
+        const viewScale = this.viewScale ? this.viewScale(cells, resolution, z) : undefined
+
+        //index cells by y and x
+        /**  @type {object} */
+        const ind = {}
+        for (const cell of cells) {
+            let row = ind[cell.y]
+            if (!row) {
+                row = {}
+                ind[cell.y] = row
+            }
+            row[cell.x] = this.height(cell, resolution, z, viewScale)
+        }
+
+        //compute extent
+        const e = geoCanvas.extGeo
+        if (!e) return
+        const xMin = Math.floor(e.xMin / resolution) * resolution
+        const xMax = Math.floor(e.xMax / resolution) * resolution
+        const yMin = Math.floor(e.yMin / resolution) * resolution
+        const yMax = Math.floor(e.yMax / resolution) * resolution
+
+        /**  @type {{min:number, max:number}} */
+        const ys = { min: yMin, max: yMax }
+
+        //draw lines, row by row, stating from the top
+        ctx.lineJoin = 'round'
+        for (let y = yMax; y >= yMin; y -= resolution) {
+            //get row
+            const row = ind[y]
+
+            //no row
+            if (!row) continue
+
+            //place first point
+            ctx.beginPath()
+            ctx.moveTo(xMin - resolution / 2, y)
+
+            //store the previous height
+            /** @type {number|undefined} */
+            let hG_
+
+            //go through the line cells
+            for (let x = xMin; x <= xMax; x += resolution) {
+                //get column value
+                /** @type {number} */
+                let hG = row[x]
+                if (!hG) hG = 0
+
+                if (hG || hG_) {
+                    //draw line only when at least one of both values is non-null
+                    //TODO test bezierCurveTo
+                    ctx.lineTo(x + resolution / 2, y + hG)
+                } else {
+                    //else move the point
+                    ctx.moveTo(x + resolution / 2, y)
+                }
+                //store the previous value
+                hG_ = hG
+            }
+
+            //last point
+            if (hG_) ctx.lineTo(xMax + resolution / 2, y)
+
+            //draw fill
+            const fc = this.fillColor(y, ys, resolution, z)
+            if (fc && fc != 'none') {
+                ctx.fillStyle = fc
+                ctx.fill()
+            }
+
+            //draw line
+            const lc = this.lineColor(y, ys, resolution, z)
+            const lw = this.lineWidth(y, ys, resolution, z)
+            if (lc && lc != 'none' && lw > 0) {
+                ctx.strokeStyle = lc
+                ctx.lineWidth = lw
+                ctx.stroke()
+            }
+        }
+    }
+}

package/src/style/LegoStyle.js

@@ -1,110 +1,110 @@
-//@ts-check
-'use strict'
-
-import { TanakaStyle } from './TanakaStyle.js'
-import { StrokeStyle } from './StrokeStyle.js'
-import { SquareColorCategoryWebGLStyle } from './SquareColorCategoryWebGLStyle.js'
-import { Style } from '../core/Style.js'
-
-/**
- * @module style
- * @author Julien Gaffuri
- */
-export class LegoStyle {
-
-    static get(value, breaks, colors, opts = {}) {
-        opts = opts || {}
-
-        //the colors
-        //http://www.jennyscrayoncollection.com/2021/06/all-current-lego-colors.html
-        //https://leonawicz.github.io/legocolors/reference/figures/README-plot-1.png
-        /*opts.colors = opts.colors || [
-            '#00852b', //darker green
-            '#afd246', //light green
-            '#fac80a', //dark yellow
-            '#bb805a', //brown
-            '#d67923', //mostard
-            '#cb4e29', //redish
-            '#b40000', //red
-            '#720012', //dark red
-            //"purple",
-            //"#eee" //whithe
-        ]*/
-
-        opts.colDark = opts.colDark || '#333'
-        opts.colBright = opts.colBright || '#aaa'
-        opts.widthFactor = opts.widthFactor || 0.12
-
-        //reuse tanaka as basis
-        const ts = TanakaStyle.get(value, breaks, colors, opts)
-        //style to show limits between pieces
-        const sst = new StrokeStyle({
-            strokeColor: () => '#666',
-            strokeWidth: (c, r, z) => 0.2 * z,
-            filter: opts.filter,
-        })
-
-        return [
-            ts[0],
-            sst,
-            ts[1],
-            new LegoTopStyle({ colDark: opts.colDark, colBright: opts.colBright, filter: opts.filter }),
-        ]
-    }
-
-    /**
-     * @param {function(import('../core/Dataset.js').Cell):string} code
-     * @param {object} color
-     * @param {object} opts
-     * @returns {Array.<Style>}
-     */
-    static getCategory(code, color, opts) {
-        opts = opts || {}
-
-        opts.colDark = opts.colDark || '#333'
-        opts.colBright = opts.colBright || '#aaa'
-
-        //
-        const s = new SquareColorCategoryWebGLStyle({ code: code, color: color })
-        //style to show limits between pieces
-        const sst = new StrokeStyle({ strokeColor: () => '#666', strokeWidth: (c, r, z) => 0.2 * z })
-
-        return [s, sst, new LegoTopStyle({ colDark: opts.colDark, colBright: opts.colBright })]
-    }
-}
-
-/**
- * A style to draw top circle of lego bricks.
- */
-class LegoTopStyle extends Style {
-    /** @param {object|undefined} opts */
-    constructor(opts) {
-        super(opts)
-        opts = opts || {}
-        this.colDark = opts.colDark || '#333'
-        this.colBright = opts.colBright || '#aaa'
-    }
-
-    draw(cells, geoCanvas, r) {
-        //filter
-        if (this.filter) cells = cells.filter(this.filter)
-
-        geoCanvas.ctx.lineWidth = 0.6 * geoCanvas.view.z
-
-        //dark part
-        geoCanvas.ctx.strokeStyle = this.colDark
-        for (let c of cells) {
-            geoCanvas.ctx.beginPath()
-            geoCanvas.ctx.arc(c.x + r * 0.5, c.y + r * 0.5, r * 0.55 * 0.5, Math.PI / 4, -Math.PI * (3 / 4), true)
-            geoCanvas.ctx.stroke()
-        }
-
-        //bright part
-        geoCanvas.ctx.strokeStyle = this.colBright
-        for (let c of cells) {
-            geoCanvas.ctx.beginPath()
-            geoCanvas.ctx.arc(c.x + r * 0.5, c.y + r * 0.5, r * 0.55 * 0.5, Math.PI / 4, -Math.PI * (3 / 4), false)
-            geoCanvas.ctx.stroke()
-        }
-    }
-}
+//@ts-check
+'use strict'
+
+import { TanakaStyle } from './TanakaStyle.js'
+import { StrokeStyle } from './StrokeStyle.js'
+import { SquareColorCategoryWebGLStyle } from './SquareColorCategoryWebGLStyle.js'
+import { Style } from '../core/Style.js'
+
+/**
+ * @module style
+ * @author Julien Gaffuri
+ */
+export class LegoStyle {
+    static get(value, breaks, colors, opts = {}) {
+        opts = opts || {}
+
+        //the colors
+        //http://www.jennyscrayoncollection.com/2021/06/all-current-lego-colors.html
+        //https://leonawicz.github.io/legocolors/reference/figures/README-plot-1.png
+        /*opts.colors = opts.colors || [
+            '#00852b', //darker green
+            '#afd246', //light green
+            '#fac80a', //dark yellow
+            '#bb805a', //brown
+            '#d67923', //mostard
+            '#cb4e29', //redish
+            '#b40000', //red
+            '#720012', //dark red
+            //"purple",
+            //"#eee" //whithe
+        ]*/
+
+        opts.colDark = opts.colDark || '#333'
+        opts.colBright = opts.colBright || '#aaa'
+        opts.widthFactor = opts.widthFactor || 0.12
+
+        //reuse tanaka as basis
+        const ts = TanakaStyle.get(value, breaks, colors, opts)
+        //style to show limits between pieces
+        const sst = new StrokeStyle({
+            strokeColor: () => '#666',
+            strokeWidth: (c, r, z) => 0.2 * z,
+            filter: opts.filter,
+        })
+
+        return [
+            ts[0],
+            sst,
+            ts[1],
+            new LegoTopStyle({ colDark: opts.colDark, colBright: opts.colBright, filter: opts.filter }),
+        ]
+    }
+
+    /**
+     * @param {function(import('../core/Dataset.js').Cell):string} code
+     * @param {object} color
+     * @param {object} opts
+     * @returns {Array.<Style>}
+     */
+    static getCategory(code, color, opts) {
+        opts = opts || {}
+
+        opts.colDark = opts.colDark || '#333'
+        opts.colBright = opts.colBright || '#aaa'
+
+        //
+        const s = new SquareColorCategoryWebGLStyle({ code: code, color: color })
+        //style to show limits between pieces
+        const sst = new StrokeStyle({ strokeColor: () => '#666', strokeWidth: (c, r, z) => 0.2 * z })
+
+        return [s, sst, new LegoTopStyle({ colDark: opts.colDark, colBright: opts.colBright })]
+    }
+}
+
+/**
+ * A style to draw top circle of lego bricks.
+ */
+class LegoTopStyle extends Style {
+    /** @param {object|undefined} opts */
+    constructor(opts) {
+        super(opts)
+        opts = opts || {}
+        this.colDark = opts.colDark || '#333'
+        this.colBright = opts.colBright || '#aaa'
+    }
+
+    draw(cells, geoCanvas, r) {
+        //filter
+        if (this.filter) cells = cells.filter(this.filter)
+        const ctx = geoCanvas.offscreenCtx
+
+        ctx.lineWidth = 0.6 * geoCanvas.view.z
+
+        //dark part
+        ctx.strokeStyle = this.colDark
+        for (let c of cells) {
+            ctx.beginPath()
+            ctx.arc(c.x + r * 0.5, c.y + r * 0.5, r * 0.55 * 0.5, Math.PI / 4, -Math.PI * (3 / 4), true)
+            ctx.stroke()
+        }
+
+        //bright part
+        ctx.strokeStyle = this.colBright
+        for (let c of cells) {
+            ctx.beginPath()
+            ctx.arc(c.x + r * 0.5, c.y + r * 0.5, r * 0.55 * 0.5, Math.PI / 4, -Math.PI * (3 / 4), false)
+            ctx.stroke()
+        }
+    }
+}