gridviz 3.0.15 → 3.0.17

package/src/style/ShapeColorSizeStyle.js

@@ -1,132 +1,147 @@
-//@ts-check
-'use strict'
-
-import { Style } from '../core/Style.js'
-
-/**
- * A very generic style that shows grid cells with specific color, size and shape.
- * It can be used to show variables as cell colors, cell size, cell shape, or any combination of the three visual variables.
- *
- * @module style
- * @author Joseph Davies, Julien Gaffuri
- */
-export class ShapeColorSizeStyle extends Style {
-    /** @param {object} opts */
-    constructor(opts) {
-        super(opts)
-        opts = opts || {}
-
-        /** A function returning the color of the cell.
-         * @type {function(import('../core/Dataset.js').Cell, number, number, object):string} */
-        this.color = opts.color || (() => "#EA6BAC") //(c,r,z,vs) => {}
-
-        /** A function returning the size of a cell in geographical unit.
-         * @type {function(import('../core/Dataset.js').Cell, number, number, object):number} */
-        this.size = opts.size || ((cell, resolution) => resolution) //(c,r,z,vs) => {}
-
-        /** A function returning the shape of a cell.
-         * @type {function(import("../core/Dataset.js").Cell,number, number,object):import("../core/Style.js").Shape} */
-        this.shape = opts.shape || (() => "square") //(c,r,z,vs) => {}
-    }
-
-    /**
-     * Draw cells as squares, with various colors and sizes.
-     * 
-     * @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)
-
-        //zoom
-        const z = geoCanvas.view.z
-
-        //get view scale
-        const viewScale = this.viewScale ? this.viewScale(cells, resolution, z) : undefined
-
-        const r2 = resolution * 0.5
-        for (let c of cells) {
-            //color
-            let col = this.color ? this.color(c, resolution, z, viewScale) : "black"
-            if (!col || col === 'none') continue
-
-            //size
-            const size = this.size ? this.size(c, resolution, z, viewScale) : resolution
-            if (!size) continue
-
-            //shape
-            const shape = this.shape ? this.shape(c, resolution, z, viewScale) : 'square'
-            if (shape === 'none') continue
-
-            //get offset
-            const offset = this.offset(c, resolution, z)
-
-            geoCanvas.ctx.fillStyle = col
-            if (shape === 'square') {
-                //draw square
-                const d = resolution * (1 - size / resolution) * 0.5
-                geoCanvas.ctx.fillRect(c.x + d + offset.dx, c.y + d + offset.dy, size, size)
-            } else if (shape === 'circle') {
-                //draw circle
-                geoCanvas.ctx.beginPath()
-                geoCanvas.ctx.arc(c.x + r2 + offset.dx, c.y + r2 + offset.dy, size * 0.5, 0, 2 * Math.PI, false)
-                geoCanvas.ctx.fill()
-            } else if (shape === 'donut') {
-                //draw donut
-                const xc = c.x + r2 + offset.dx,
-                    yc = c.y + r2 + offset.dy
-                geoCanvas.ctx.beginPath()
-                geoCanvas.ctx.moveTo(xc, yc)
-                geoCanvas.ctx.arc(xc, yc, r2, 0, 2 * Math.PI)
-                geoCanvas.ctx.arc(xc, yc, (1 - size / resolution) * r2, 0, 2 * Math.PI, true)
-                geoCanvas.ctx.closePath()
-                geoCanvas.ctx.fill()
-            } else if (shape === 'diamond') {
-                const s2 = size * 0.5
-                geoCanvas.ctx.beginPath()
-                geoCanvas.ctx.moveTo(c.x + r2 - s2, c.y + r2)
-                geoCanvas.ctx.lineTo(c.x + r2, c.y + r2 + s2)
-                geoCanvas.ctx.lineTo(c.x + r2 + s2, c.y + r2)
-                geoCanvas.ctx.lineTo(c.x + r2, c.y + r2 - s2)
-                geoCanvas.ctx.fill()
-            } else if (shape === 'triangle_up') {
-                const dr2 = (size - resolution) / 2
-                geoCanvas.ctx.beginPath()
-                geoCanvas.ctx.moveTo(c.x - dr2, c.y - dr2)
-                geoCanvas.ctx.lineTo(c.x + r2, c.y + resolution + dr2)
-                geoCanvas.ctx.lineTo(c.x + resolution + dr2, c.y - dr2)
-                geoCanvas.ctx.fill()
-            } else if (shape === 'triangle_down') {
-                const dr2 = (size - resolution) / 2
-                geoCanvas.ctx.beginPath()
-                geoCanvas.ctx.moveTo(c.x - dr2, c.y + resolution + dr2)
-                geoCanvas.ctx.lineTo(c.x + r2, c.y - dr2)
-                geoCanvas.ctx.lineTo(c.x + resolution + dr2, c.y + resolution + dr2)
-                geoCanvas.ctx.fill()
-            } else if (shape === 'triangle_left') {
-                const dr2 = (size - resolution) / 2
-                geoCanvas.ctx.beginPath()
-                geoCanvas.ctx.moveTo(c.x + resolution + dr2, c.y + resolution + dr2)
-                geoCanvas.ctx.lineTo(c.x - dr2, c.y + r2)
-                geoCanvas.ctx.lineTo(c.x + resolution + dr2, c.y - dr2)
-                geoCanvas.ctx.fill()
-            } else if (shape === 'triangle_right') {
-                const dr2 = (size - resolution) / 2
-                geoCanvas.ctx.beginPath()
-                geoCanvas.ctx.moveTo(c.x - dr2, c.y - dr2)
-                geoCanvas.ctx.lineTo(c.x + resolution + dr2, c.y + r2)
-                geoCanvas.ctx.lineTo(c.x - dr2, c.y + resolution + dr2)
-                geoCanvas.ctx.fill()
-            } else {
-                throw new Error('Unexpected shape:' + shape)
-            }
-        }
-
-        //update legends
-        this.updateLegends({ viewScale: viewScale, resolution: resolution, z: z, cells: cells })
-    }
-}
+//@ts-check
+'use strict'
+
+import { Style } from '../core/Style.js'
+
+/**
+ * A very generic style that shows grid cells with specific color, size and shape.
+ * It can be used to show variables as cell colors, cell size, cell shape, or any combination of the three visual variables.
+ *
+ * @module style
+ * @author Joseph Davies, Julien Gaffuri
+ */
+export class ShapeColorSizeStyle extends Style {
+    /** @param {object} opts */
+    constructor(opts) {
+        super(opts)
+        opts = opts || {}
+        /** @type {(function(import('../core/Dataset.js').Cell, number, number, object):string) | string} */
+        this.color = opts.color || '#EA6BAC'
+
+        /** @type {(function(import('../core/Dataset.js').Cell, number, number, object):number) | number} */
+        this.size = opts.size || ((cell, resolution) => resolution)
+
+        /** @type {(function(import("../core/Dataset.js").Cell,number, number,object):import("../core/Style.js").Shape) | string} */
+        this.shape = opts.shape || 'square'
+    }
+
+    /**
+     * Draw cells as squares, with various colors and sizes.
+     *
+     * @param {Array.<import("../core/Dataset.js").Cell>} cells - The grid cells to draw.
+     * @param {import("../core/GeoCanvas.js").GeoCanvas} geoCanvas - The canvas to draw on.
+     * @param {number} resolution - Resolution of the grid.
+     * @override
+     */
+    draw(cells, geoCanvas, resolution) {
+        //filter
+        if (this.filter) cells = cells.filter(this.filter)
+
+        //zoom
+        const z = geoCanvas.view.z
+
+        //get view scale
+        const viewScale = this.viewScale ? this.viewScale(cells, resolution, z) : undefined
+
+        const r2 = resolution * 0.5
+
+        // Precompute if color, size, and shape are functions, for efficiency
+        const isColorFunction = typeof this.color === 'function'
+        const isSizeFunction = typeof this.size === 'function'
+        const isShapeFunction = typeof this.shape === 'function'
+
+        const defaultColor = this.color || 'black'
+        const defaultSize = this.size || resolution
+        const defaultShape = this.shape || 'square'
+
+        // Optimized
+        const colorFunction = isColorFunction ? this.color : null
+        const sizeFunction = isSizeFunction ? this.size : null
+        const shapeFunction = isShapeFunction ? this.shape : null
+
+        for (let c of cells) {
+            // Determine color
+            //@ts-ignore
+            const col = colorFunction ? colorFunction(c, resolution, z, viewScale) : defaultColor
+            if (!col || col === 'none') continue
+
+            // Determine size
+            //@ts-ignore
+            const size = sizeFunction ? sizeFunction(c, resolution, z, viewScale) : defaultSize
+            if (!size) continue
+
+            // Determine shape
+            //@ts-ignore
+            const shape = shapeFunction ? shapeFunction(c, resolution, z, viewScale) : defaultShape
+            if (shape === 'none') continue
+
+            //get offset
+            const offset = this.offset(c, resolution, z)
+
+            //get context
+            const ctx = geoCanvas.offscreenCtx
+            ctx.fillStyle = col
+            if (shape === 'square') {
+                //draw square
+                const d = resolution * (1 - size / resolution) * 0.5
+                ctx.fillRect(c.x + d + offset.dx, c.y + d + offset.dy, size, size)
+            } else if (shape === 'circle') {
+                //draw circle
+                ctx.beginPath()
+                ctx.arc(c.x + r2 + offset.dx, c.y + r2 + offset.dy, size * 0.5, 0, 2 * Math.PI, false)
+                ctx.fill()
+            } else if (shape === 'donut') {
+                //draw donut
+                const xc = c.x + r2 + offset.dx,
+                    yc = c.y + r2 + offset.dy
+                ctx.beginPath()
+                ctx.moveTo(xc, yc)
+                ctx.arc(xc, yc, r2, 0, 2 * Math.PI)
+                ctx.arc(xc, yc, (1 - size / resolution) * r2, 0, 2 * Math.PI, true)
+                ctx.closePath()
+                ctx.fill()
+            } else if (shape === 'diamond') {
+                const s2 = size * 0.5
+                ctx.beginPath()
+                ctx.moveTo(c.x + r2 - s2, c.y + r2)
+                ctx.lineTo(c.x + r2, c.y + r2 + s2)
+                ctx.lineTo(c.x + r2 + s2, c.y + r2)
+                ctx.lineTo(c.x + r2, c.y + r2 - s2)
+                ctx.fill()
+            } else if (shape === 'triangle_up') {
+                const dr2 = (size - resolution) / 2
+                ctx.beginPath()
+                ctx.moveTo(c.x - dr2, c.y - dr2)
+                ctx.lineTo(c.x + r2, c.y + resolution + dr2)
+                ctx.lineTo(c.x + resolution + dr2, c.y - dr2)
+                ctx.fill()
+            } else if (shape === 'triangle_down') {
+                const dr2 = (size - resolution) / 2
+                ctx.beginPath()
+                ctx.moveTo(c.x - dr2, c.y + resolution + dr2)
+                ctx.lineTo(c.x + r2, c.y - dr2)
+                ctx.lineTo(c.x + resolution + dr2, c.y + resolution + dr2)
+                ctx.fill()
+            } else if (shape === 'triangle_left') {
+                const dr2 = (size - resolution) / 2
+                ctx.beginPath()
+                ctx.moveTo(c.x + resolution + dr2, c.y + resolution + dr2)
+                ctx.lineTo(c.x - dr2, c.y + r2)
+                ctx.lineTo(c.x + resolution + dr2, c.y - dr2)
+                ctx.fill()
+            } else if (shape === 'triangle_right') {
+                const dr2 = (size - resolution) / 2
+                ctx.beginPath()
+                ctx.moveTo(c.x - dr2, c.y - dr2)
+                ctx.lineTo(c.x + resolution + dr2, c.y + r2)
+                ctx.lineTo(c.x - dr2, c.y + resolution + dr2)
+                ctx.fill()
+            } else {
+                throw new Error('Unexpected shape:' + shape)
+            }
+        }
+
+        //update legends
+        this.updateLegends({ viewScale: viewScale, resolution: resolution, z: z, cells: cells })
+    }
+}

package/src/style/SideCategoryStyle.js

@@ -1,114 +1,112 @@
-//@ts-check
-'use strict'
-
-import { SideStyle } from './SideStyle.js'
-
-/**
- * A style to show the sides of grid cells based on their different categories.
- *
- * @module style
- * @author Julien Gaffuri
- */
-export class SideCategoryStyle extends SideStyle {
-    /** @param {object} opts */
-    constructor(opts) {
-        super(opts)
-        opts = opts || {}
-
-        /** A function returning the category code of a cell.
-         * @type {function(import('../core/Dataset.js').Cell, number, number):string} */
-        this.code = opts.code
-
-        /**
-         * The dictionary (string -> color) which give the color of each category.
-         * @type {object} */
-        this.color = opts.color
-
-    }
-
-    /**
-     * @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
-
-        //build sides
-
-        /**  @type {Array.<import('./SideStyle.js').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) {
-
-            //get category codes for both cells
-            const code1 = side.c1 ? this.code(side.c1, resolution, z) : undefined
-            const code2 = side.c2 ? this.code(side.c2, resolution, z) : undefined
-            if (code1 == code2) continue
-
-            //width
-            /** @type {number|undefined} */
-            const wG = this.width ? this.width(side, resolution, z, viewScale) : undefined
-            if (!wG || wG <= 0) continue
-            const w2 = wG * 0.5
-
-            //set width
-            geoCanvas.ctx.lineWidth = wG
-
-            //draw segment with correct orientation
-            if (side.or === 'h') {
-                //top line
-                if (code2) {
-                    geoCanvas.ctx.beginPath()
-                    geoCanvas.ctx.strokeStyle = this.color[code2]
-                    geoCanvas.ctx.moveTo(side.x-r2, side.y + w2)
-                    geoCanvas.ctx.lineTo(side.x+r2, side.y + w2)
-                    geoCanvas.ctx.stroke()
-                }
-
-                //bottom line
-                if (code1) {
-                    geoCanvas.ctx.beginPath()
-                    geoCanvas.ctx.strokeStyle = this.color[code1]
-                    geoCanvas.ctx.moveTo(side.x-r2, side.y - w2)
-                    geoCanvas.ctx.lineTo(side.x+r2, side.y - w2)
-                    geoCanvas.ctx.stroke()
-                }
-            } else {
-                //right line
-                if (code2) {
-                    geoCanvas.ctx.beginPath()
-                    geoCanvas.ctx.strokeStyle = this.color[code2]
-                    geoCanvas.ctx.moveTo(side.x + w2, side.y-r2)
-                    geoCanvas.ctx.lineTo(side.x + w2, side.y+r2)
-                    geoCanvas.ctx.stroke()
-                }
-
-                //left line
-                if (code1) {
-                    geoCanvas.ctx.beginPath()
-                    geoCanvas.ctx.strokeStyle = this.color[code1]
-                    geoCanvas.ctx.moveTo(side.x - w2, side.y-r2)
-                    geoCanvas.ctx.lineTo(side.x - w2, side.y+r2)
-                    geoCanvas.ctx.stroke()
-                }
-            }
-        }
-
-        //update legends
-        this.updateLegends({ style: this, resolution: resolution, z: z, viewScale: viewScale })
-    }
-}
+//@ts-check
+'use strict'
+
+import { SideStyle } from './SideStyle.js'
+
+/**
+ * A style to show the sides of grid cells based on their different categories.
+ *
+ * @module style
+ * @author Julien Gaffuri
+ */
+export class SideCategoryStyle extends SideStyle {
+    /** @param {object} opts */
+    constructor(opts) {
+        super(opts)
+        opts = opts || {}
+
+        /** A function returning the category code of a cell.
+         * @type {function(import('../core/Dataset.js').Cell, number, number):string} */
+        this.code = opts.code
+
+        /**
+         * The dictionary (string -> color) which give the color of each category.
+         * @type {object} */
+        this.color = opts.color
+    }
+
+    /**
+     * @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
+        const ctx = geoCanvas.offscreenCtx
+
+        //build sides
+
+        /**  @type {Array.<import('./SideStyle.js').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) {
+            //get category codes for both cells
+            const code1 = side.c1 ? this.code(side.c1, resolution, z) : undefined
+            const code2 = side.c2 ? this.code(side.c2, resolution, z) : undefined
+            if (code1 == code2) continue
+
+            //width
+            /** @type {number|undefined} */
+            const wG = this.width ? this.width(side, resolution, z, viewScale) : undefined
+            if (!wG || wG <= 0) continue
+            const w2 = wG * 0.5
+
+            //set width
+            ctx.lineWidth = wG
+
+            //draw segment with correct orientation
+            if (side.or === 'h') {
+                //top line
+                if (code2) {
+                    ctx.beginPath()
+                    ctx.strokeStyle = this.color[code2]
+                    ctx.moveTo(side.x - r2, side.y + w2)
+                    ctx.lineTo(side.x + r2, side.y + w2)
+                    ctx.stroke()
+                }
+
+                //bottom line
+                if (code1) {
+                    ctx.beginPath()
+                    ctx.strokeStyle = this.color[code1]
+                    ctx.moveTo(side.x - r2, side.y - w2)
+                    ctx.lineTo(side.x + r2, side.y - w2)
+                    ctx.stroke()
+                }
+            } else {
+                //right line
+                if (code2) {
+                    ctx.beginPath()
+                    ctx.strokeStyle = this.color[code2]
+                    ctx.moveTo(side.x + w2, side.y - r2)
+                    ctx.lineTo(side.x + w2, side.y + r2)
+                    ctx.stroke()
+                }
+
+                //left line
+                if (code1) {
+                    ctx.beginPath()
+                    ctx.strokeStyle = this.color[code1]
+                    ctx.moveTo(side.x - w2, side.y - r2)
+                    ctx.lineTo(side.x - w2, side.y + r2)
+                    ctx.stroke()
+                }
+            }
+        }
+
+        //update legends
+        this.updateLegends({ style: this, resolution: resolution, z: z, viewScale: viewScale })
+    }
+}