gridviz 3.0.34 → 3.0.36

package/src/style/JoyPlotStyle.js

@@ -1,180 +1,180 @@
-//@ts-check
-'use strict'
-
-import { Style } from '../core/Style.js'
-import { cellsToGrid } from '../utils/utils.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 = cellsToGrid(cells, cell => this.height(cell, resolution, z, viewScale))
-
-
-        //make grid
-        /**  @type {object} */
-        /*const grid = cellsToGrid2(cells, resolution, cell => this.height(cell, resolution, z, viewScale))
-        if (!grid.maxI || !grid.maxJ) return
-
-        //TODO
-        const ys = { min: grid.y0 + resolution * grid.minI, max: grid.y0 + resolution * grid.maxI }
-
-        //draw lines, row by row, stating from the top
-        ctx.lineJoin = 'round'
-        for (let i = grid.minI; i <= grid.maxI; i++) {
-
-            //Get row data
-            const row = grid[i]
-            if (!row) continue
-
-            // y of the row
-            const y = grid.y0 - i * resolution
-
-            //store the previous height
-            let hG_
-
-            for (let j = grid.minJ; j <= grid.maxJ; j++) {
-                //get column value
-                let hG = row[j]
-                if (!hG) hG = 0
-
-                // x of the cell
-                const x = grid.x0 + j * resolution
-
-                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(grid.x0 + resolution * grid.maxJ + 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()
-            }
-        }
-        */
-
-        //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
-
-        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
-            let hG_
-
-            //go through the line cells
-            for (let x = xMin; x <= xMax; x += resolution) {
-                //get column value
-                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()
-            }
-        }
-    }
-}
+//@ts-check
+'use strict'
+
+import { Style } from '../core/Style.js'
+import { cellsToGrid } from '../utils/utils.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 = cellsToGrid(cells, cell => this.height(cell, resolution, z, viewScale))
+
+
+        //make grid
+        /**  @type {object} */
+        /*const grid = cellsToGrid2(cells, resolution, cell => this.height(cell, resolution, z, viewScale))
+        if (!grid.maxI || !grid.maxJ) return
+
+        //TODO
+        const ys = { min: grid.y0 + resolution * grid.minI, max: grid.y0 + resolution * grid.maxI }
+
+        //draw lines, row by row, stating from the top
+        ctx.lineJoin = 'round'
+        for (let i = grid.minI; i <= grid.maxI; i++) {
+
+            //Get row data
+            const row = grid[i]
+            if (!row) continue
+
+            // y of the row
+            const y = grid.y0 - i * resolution
+
+            //store the previous height
+            let hG_
+
+            for (let j = grid.minJ; j <= grid.maxJ; j++) {
+                //get column value
+                let hG = row[j]
+                if (!hG) hG = 0
+
+                // x of the cell
+                const x = grid.x0 + j * resolution
+
+                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(grid.x0 + resolution * grid.maxJ + 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()
+            }
+        }
+        */
+
+        //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
+
+        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
+            let hG_
+
+            //go through the line cells
+            for (let x = xMin; x <= xMax; x += resolution) {
+                //get column value
+                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,132 +1,132 @@
-//@ts-check
-'use strict'
-
-//import { TanakaStyle } from './SideTanakaStyle___OLD.js'
-import { StrokeStyle } from './StrokeStyle.js'
-import { SquareColorCategoryWebGLStyle } from './SquareColorCategoryWebGLStyle.js'
-import { Style } from '../core/Style.js'
-//import { SideStyle } from './SideStyle.js'
-import { classifier as clFun, colorClassifier as cclFun } from '../utils/scale.js'
-import { SideTanakaStyle } from './SideTanakaStyle.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.colorDark = opts.colorDark || '#333'
-        opts.colorBright = opts.colorBright || '#aaa'
-
-        //make classifier
-        const classifier = clFun(breaks)
-        const classifier2 = cell => classifier(value(cell))
-        //make colors table
-        const colorsDict = {}
-        for (let i = 0; i < colors.length; i++) colorsDict[i + ''] = colors[i]
-
-        //make cell fill style
-        const cellStyle = new SquareColorCategoryWebGLStyle({
-            code: classifier2,
-            color: colorsDict,
-        })
-
-        //make tanaka side style
-        const tanakaStyle = new SideTanakaStyle({
-            classifier: () => classifier2,
-            colorDark : opts.colorDark,
-            colorBright : opts.colorBright,
-            diamond: opts.diamond,
-        })
-
-        //style to show limits between pieces
-        const sst = new StrokeStyle({
-            strokeColor: () => '#666',
-            strokeWidth: (c, r, z) => 0.2 * z,
-            filter: opts.filter,
-        })
-
-        return [
-            cellStyle,
-            sst,
-            tanakaStyle,
-            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()
-        }
-    }
-}
+//@ts-check
+'use strict'
+
+//import { TanakaStyle } from './SideTanakaStyle___OLD.js'
+import { StrokeStyle } from './StrokeStyle.js'
+import { SquareColorCategoryWebGLStyle } from './SquareColorCategoryWebGLStyle.js'
+import { Style } from '../core/Style.js'
+//import { SideStyle } from './SideStyle.js'
+import { classifier as clFun, colorClassifier as cclFun } from '../utils/scale.js'
+import { SideTanakaStyle } from './SideTanakaStyle.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.colorDark = opts.colorDark || '#333'
+        opts.colorBright = opts.colorBright || '#aaa'
+
+        //make classifier
+        const classifier = clFun(breaks)
+        const classifier2 = cell => classifier(value(cell))
+        //make colors table
+        const colorsDict = {}
+        for (let i = 0; i < colors.length; i++) colorsDict[i + ''] = colors[i]
+
+        //make cell fill style
+        const cellStyle = new SquareColorCategoryWebGLStyle({
+            code: classifier2,
+            color: colorsDict,
+        })
+
+        //make tanaka side style
+        const tanakaStyle = new SideTanakaStyle({
+            classifier: () => classifier2,
+            colorDark : opts.colorDark,
+            colorBright : opts.colorBright,
+            diamond: opts.diamond,
+        })
+
+        //style to show limits between pieces
+        const sst = new StrokeStyle({
+            strokeColor: () => '#666',
+            strokeWidth: (c, r, z) => 0.2 * z,
+            filter: opts.filter,
+        })
+
+        return [
+            cellStyle,
+            sst,
+            tanakaStyle,
+            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()
+        }
+    }
+}