gridviz 2.0.37 → 2.0.39

package/src/style/LegoStyle.js

@@ -1,112 +1,112 @@
-//@ts-check
-'use strict'
-
-import { TanakaStyle } from './TanakaStyle.js'
-import { StrokeStyle } from './StrokeStyle.js'
-import { SquareColorCatWGLStyle } from './SquareColorCatWGLStyle.js'
-import { Style } from '../Style.js'
-
-/**
- * @author Julien Gaffuri
- */
-export class LegoStyle {
-    /**
-     * @param {string} col
-     * @param {object} opts
-     * @returns {Array.<Style>}
-     */
-    static get(col, 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(col, opts)
-        //style to show limits between pieces
-        const sst = new StrokeStyle({
-            strokeColor: () => '#666',
-            strokeWidth: (v, r, s, 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(string):string} col
-     * @param {object} opts
-     * @returns {Array.<Style>}
-     */
-    static getCat(col, opts) {
-        opts = opts || {}
-
-        opts.colDark = opts.colDark || '#333'
-        opts.colBright = opts.colBright || '#aaa'
-
-        //
-        const s = new SquareColorCatWGLStyle({ colorCol: col, color: opts.color })
-        //style to show limits between pieces
-        const sst = new StrokeStyle({ strokeColor: () => '#666', strokeWidth: (v, r, s, 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, r, cg) {
-        //filter
-        if (this.filter) cells = cells.filter(this.filter)
-
-        cg.ctx.lineWidth = 0.6 * cg.getZf()
-
-        //dark part
-        cg.ctx.strokeStyle = this.colDark
-        for (let c of cells) {
-            cg.ctx.beginPath()
-            cg.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)
-            cg.ctx.stroke()
-        }
-
-        //bright part
-        cg.ctx.strokeStyle = this.colBright
-        for (let c of cells) {
-            cg.ctx.beginPath()
-            cg.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)
-            cg.ctx.stroke()
-        }
-    }
-}
+//@ts-check
+'use strict'
+
+import { TanakaStyle } from './TanakaStyle.js'
+import { StrokeStyle } from './StrokeStyle.js'
+import { SquareColorCatWGLStyle } from './SquareColorCatWGLStyle.js'
+import { Style } from '../Style.js'
+
+/**
+ * @author Julien Gaffuri
+ */
+export class LegoStyle {
+    /**
+     * @param {string} col
+     * @param {object} opts
+     * @returns {Array.<Style>}
+     */
+    static get(col, 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(col, opts)
+        //style to show limits between pieces
+        const sst = new StrokeStyle({
+            strokeColor: () => '#666',
+            strokeWidth: (v, r, s, 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(string):string} col
+     * @param {object} opts
+     * @returns {Array.<Style>}
+     */
+    static getCat(col, opts) {
+        opts = opts || {}
+
+        opts.colDark = opts.colDark || '#333'
+        opts.colBright = opts.colBright || '#aaa'
+
+        //
+        const s = new SquareColorCatWGLStyle({ colorCol: col, color: opts.color })
+        //style to show limits between pieces
+        const sst = new StrokeStyle({ strokeColor: () => '#666', strokeWidth: (v, r, s, 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, r, cg) {
+        //filter
+        if (this.filter) cells = cells.filter(this.filter)
+
+        cg.ctx.lineWidth = 0.6 * cg.getZf()
+
+        //dark part
+        cg.ctx.strokeStyle = this.colDark
+        for (let c of cells) {
+            cg.ctx.beginPath()
+            cg.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)
+            cg.ctx.stroke()
+        }
+
+        //bright part
+        cg.ctx.strokeStyle = this.colBright
+        for (let c of cells) {
+            cg.ctx.beginPath()
+            cg.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)
+            cg.ctx.stroke()
+        }
+    }
+}

package/src/style/MosaicStyle.js

@@ -1,107 +1,107 @@
-//@ts-check
-'use strict'
-
-import { Style } from '../Style.js'
-
-/**
- * @author Julien Gaffuri
- */
-export class MosaicStyle 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 color of the cell.
-         * @type {function(number,number,import("../Style").Stat|undefined):string} */
-        this.color = opts.color || (() => '#EA6BAC')
-
-        /** The mosaic factor, within [0,0.5]. Set to 0 for no mosaic effect. Set to 0.5 for strong mosaic effect.
-         * @type {number} */
-        this.mosaicFactor = opts.mosaicFactor || 0.15
-
-        /** The mosaic shadow factor, within [0,0.5]. Set to 0 for no mosaic shadow. Set to 0.5 for strong mosaic shadow.
-         * @type {number} */
-        this.shadowFactor = opts.shadowFactor || 0.2
-
-        /** The mosaic shadow color.
-         * @type {string} */
-        this.shadowColor = opts.shadowColor || '#555'
-    }
-
-    /**
-     *
-     * @param {Array.<import("../Dataset").Cell>} cells
-     * @param {number} resolution
-     * @param {import("../GeoCanvas").GeoCanvas} cg
-     */
-    draw(cells, resolution, cg) {
-        //filter
-        if (this.filter) cells = cells.filter(this.filter)
-
-        //zoom factor
-        const zf = cg.getZf()
-
-        let statColor
-        if (this.colorCol) {
-            //compute color variable statistics
-            statColor = Style.getStatistics(cells, (c) => c[this.colorCol], true)
-        }
-
-        //set stroke style, for shadow
-        cg.ctx.strokeStyle = this.shadowColor
-        cg.ctx.lineWidth = this.shadowFactor * resolution
-        cg.ctx.lineJoin = 'round'
-        cg.ctx.lineCap = 'butt'
-
-        //function to compute position mosaic effect
-        const d = resolution * this.mosaicFactor
-        const mosaic = () => {
-            return { x: Math.random() * d, y: Math.random() * d }
-        }
-
-        //draw with HTML canvas in geo coordinates
-        cg.setCanvasTransform()
-
-        for (let cell of cells) {
-            //set fill color
-            const col = this.color ? this.color(cell[this.colorCol], resolution, statColor) : undefined
-            if (!col || col === 'none') continue
-            cg.ctx.fillStyle = col
-
-            //get offset
-            const offset = this.offset(cell, resolution, zf)
-
-            //compute position mosaic effect
-            const ll = mosaic(),
-                ul = mosaic(),
-                lr = mosaic(),
-                ur = mosaic()
-
-            //stroke
-            if (this.shadowFactor > 0) {
-                cg.ctx.beginPath()
-                cg.ctx.moveTo(cell.x + offset.dx + ll.x, cell.y + offset.dy + ll.y)
-                cg.ctx.lineTo(cell.x + offset.dx + resolution - lr.x, cell.y + offset.dy + lr.y)
-                cg.ctx.lineTo(cell.x + offset.dx + resolution - ur.x, cell.y + offset.dy + resolution - ur.y)
-                cg.ctx.stroke()
-            }
-
-            //fill
-
-            cg.ctx.beginPath()
-            cg.ctx.moveTo(cell.x + offset.dx + ll.x, cell.y + offset.dy + ll.y)
-            cg.ctx.lineTo(cell.x + offset.dx + resolution - lr.x, cell.y + offset.dy + lr.y)
-            cg.ctx.lineTo(cell.x + offset.dx + resolution - ur.x, cell.y + offset.dy + resolution - ur.y)
-            cg.ctx.lineTo(cell.x + offset.dx + ul.x, cell.y + offset.dy + resolution - ul.y)
-            cg.ctx.fill()
-        }
-
-        //update legends
-        this.updateLegends({ style: this, r: resolution, zf: zf, sColor: statColor })
-    }
-}
+//@ts-check
+'use strict'
+
+import { Style } from '../Style.js'
+
+/**
+ * @author Julien Gaffuri
+ */
+export class MosaicStyle 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 color of the cell.
+         * @type {function(number,number,import("../Style").Stat|undefined):string} */
+        this.color = opts.color || (() => '#EA6BAC')
+
+        /** The mosaic factor, within [0,0.5]. Set to 0 for no mosaic effect. Set to 0.5 for strong mosaic effect.
+         * @type {number} */
+        this.mosaicFactor = opts.mosaicFactor || 0.15
+
+        /** The mosaic shadow factor, within [0,0.5]. Set to 0 for no mosaic shadow. Set to 0.5 for strong mosaic shadow.
+         * @type {number} */
+        this.shadowFactor = opts.shadowFactor || 0.2
+
+        /** The mosaic shadow color.
+         * @type {string} */
+        this.shadowColor = opts.shadowColor || '#555'
+    }
+
+    /**
+     *
+     * @param {Array.<import("../Dataset").Cell>} cells
+     * @param {number} resolution
+     * @param {import("../GeoCanvas").GeoCanvas} cg
+     */
+    draw(cells, resolution, cg) {
+        //filter
+        if (this.filter) cells = cells.filter(this.filter)
+
+        //zoom factor
+        const zf = cg.getZf()
+
+        let statColor
+        if (this.colorCol) {
+            //compute color variable statistics
+            statColor = Style.getStatistics(cells, (c) => c[this.colorCol], true)
+        }
+
+        //set stroke style, for shadow
+        cg.ctx.strokeStyle = this.shadowColor
+        cg.ctx.lineWidth = this.shadowFactor * resolution
+        cg.ctx.lineJoin = 'round'
+        cg.ctx.lineCap = 'butt'
+
+        //function to compute position mosaic effect
+        const d = resolution * this.mosaicFactor
+        const mosaic = () => {
+            return { x: Math.random() * d, y: Math.random() * d }
+        }
+
+        //draw with HTML canvas in geo coordinates
+        cg.setCanvasTransform()
+
+        for (let cell of cells) {
+            //set fill color
+            const col = this.color ? this.color(cell[this.colorCol], resolution, statColor) : undefined
+            if (!col || col === 'none') continue
+            cg.ctx.fillStyle = col
+
+            //get offset
+            const offset = this.offset(cell, resolution, zf)
+
+            //compute position mosaic effect
+            const ll = mosaic(),
+                ul = mosaic(),
+                lr = mosaic(),
+                ur = mosaic()
+
+            //stroke
+            if (this.shadowFactor > 0) {
+                cg.ctx.beginPath()
+                cg.ctx.moveTo(cell.x + offset.dx + ll.x, cell.y + offset.dy + ll.y)
+                cg.ctx.lineTo(cell.x + offset.dx + resolution - lr.x, cell.y + offset.dy + lr.y)
+                cg.ctx.lineTo(cell.x + offset.dx + resolution - ur.x, cell.y + offset.dy + resolution - ur.y)
+                cg.ctx.stroke()
+            }
+
+            //fill
+
+            cg.ctx.beginPath()
+            cg.ctx.moveTo(cell.x + offset.dx + ll.x, cell.y + offset.dy + ll.y)
+            cg.ctx.lineTo(cell.x + offset.dx + resolution - lr.x, cell.y + offset.dy + lr.y)
+            cg.ctx.lineTo(cell.x + offset.dx + resolution - ur.x, cell.y + offset.dy + resolution - ur.y)
+            cg.ctx.lineTo(cell.x + offset.dx + ul.x, cell.y + offset.dy + resolution - ul.y)
+            cg.ctx.fill()
+        }
+
+        //update legends
+        this.updateLegends({ style: this, r: resolution, zf: zf, sColor: statColor })
+    }
+}