gridviz 3.0.14 → 3.0.16

package/src/style/TanakaStyle.js

@@ -1,68 +1,69 @@
-//@ts-check
-'use strict'
-
-import { SideStyle } from './SideStyle.js'
-import { SquareColorCategoryWebGLStyle } from './SquareColorCategoryWebGLStyle.js'
-import { classifier as clFun, colorClassifier as cclFun } from '../utils/scale.js'
-
-/**
- * @see https://manifold.net/doc/mfd9/example__tanaka_contours.htm
- *
- * @module style
- * @author Julien Gaffuri
- */
-export class TanakaStyle {
-    /**
-     * @param {function(import('../core/Dataset.js').Cell):number} value Function that returns the value of a cell
-     * @param {Array.<number>} breaks The break values
-     * @param {Array.<string>} colors The colors, one more than the break values
-     * @param {object} opts
-     * @returns {Array.<import("../core/Style").Style>}
-     */
-    static get(value, breaks, colors, opts = {}) {
-
-        //shadow colors
-        opts.colorDark = opts.colorDark || '#111'
-        opts.colorBright = opts.colorBright || '#ddd'
-
-        /** @type { function(number, number):number } */
-        opts.width = opts.width || ((sideValue, resolution, z) => {
-            const minWG = 1 * z
-            const maxWG = 4 * z
-            const step = (maxWG - minWG) / 3
-            return Math.min(minWG + (sideValue - 1) * step, maxWG)
-        })
-
-        //make classifier
-        const classifier = clFun(breaks)
-        //make colors table
-        const colorsDict = {};
-        for (let i = 0; i < colors.length; i++) colorsDict[i + ""] = colors[i]
-
-        const cellStyle = new SquareColorCategoryWebGLStyle({
-            code: cell => classifier(value(cell)),
-            color: colorsDict
-        })
-
-        const getSideValue = (side) => {
-            const cl1 = side.c1 ? classifier(value(side.c1)) : -1
-            const cl2 = side.c2 ? classifier(value(side.c2)) : -1
-            return cl1 - cl2
-        }
-
-        /** The side style, for the shadow effect */
-        const sideStyle = new SideStyle({
-            //white or black, depending on orientation and value
-            color: (side) => {
-                const v = getSideValue(side)
-                if (v === 0) return
-                if (side.or === 'v') return v < 0 ? opts.colorBright : opts.colorDark
-                return v < 0 ? opts.colorDark : opts.colorBright
-            },
-            //width depends on the value, that is the number of classes of difference
-            width: (side, resolution, z) => opts.width(Math.abs(getSideValue(side)), resolution, z)
-        })
-
-        return [cellStyle, sideStyle]
-    }
-}
+//@ts-check
+'use strict'
+
+import { SideStyle } from './SideStyle.js'
+import { SquareColorCategoryWebGLStyle } from './SquareColorCategoryWebGLStyle.js'
+import { classifier as clFun, colorClassifier as cclFun } from '../utils/scale.js'
+
+/**
+ * @see https://manifold.net/doc/mfd9/example__tanaka_contours.htm
+ *
+ * @module style
+ * @author Julien Gaffuri
+ */
+export class TanakaStyle {
+    /**
+     * @param {function(import('../core/Dataset.js').Cell):number} value Function that returns the value of a cell
+     * @param {Array.<number>} breaks The break values
+     * @param {Array.<string>} colors The colors, one more than the break values
+     * @param {object} opts
+     * @returns {Array.<import("../core/Style").Style>}
+     */
+    static get(value, breaks, colors, opts = {}) {
+        //shadow colors
+        opts.colorDark = opts.colorDark || '#111'
+        opts.colorBright = opts.colorBright || '#ddd'
+
+        /** @type { function(number, number):number } */
+        opts.width =
+            opts.width ||
+            ((sideValue, resolution, z) => {
+                const minWG = 1 * z
+                const maxWG = 4 * z
+                const step = (maxWG - minWG) / 3
+                return Math.min(minWG + (sideValue - 1) * step, maxWG)
+            })
+
+        //make classifier
+        const classifier = clFun(breaks)
+        //make colors table
+        const colorsDict = {}
+        for (let i = 0; i < colors.length; i++) colorsDict[i + ''] = colors[i]
+
+        const cellStyle = new SquareColorCategoryWebGLStyle({
+            code: (cell) => classifier(value(cell)),
+            color: colorsDict,
+        })
+
+        const getSideValue = (side) => {
+            const cl1 = side.c1 ? classifier(value(side.c1)) : -1
+            const cl2 = side.c2 ? classifier(value(side.c2)) : -1
+            return cl1 - cl2
+        }
+
+        /** The side style, for the shadow effect */
+        const sideStyle = new SideStyle({
+            //white or black, depending on orientation and value
+            color: (side) => {
+                const v = getSideValue(side)
+                if (v === 0) return
+                if (side.or === 'v') return v < 0 ? opts.colorBright : opts.colorDark
+                return v < 0 ? opts.colorDark : opts.colorBright
+            },
+            //width depends on the value, that is the number of classes of difference
+            width: (side, resolution, z) => opts.width(Math.abs(getSideValue(side)), resolution, z),
+        })
+
+        return [cellStyle, sideStyle]
+    }
+}

package/src/style/TextStyle.js

@@ -1,111 +1,110 @@
-//@ts-check
-'use strict'
-
-import { Style } from '../core/Style.js'
-
-/**
- * @module style
- * @author Julien Gaffuri
- */
-export class TextStyle extends Style {
-    /** @param {object} opts */
-    constructor(opts) {
-        super(opts)
-        opts = opts || {}
-
-        /** A function returning the text of a cell.
-         * @type {function(import('../core/Dataset.js').Cell, number, number, object):string} */
-        this.text = opts.text || (() => 'X') //(c,r,z,vs) => {}
-
-        /** A function returning the color of the cell.
-         * @type {function(import('../core/Dataset.js').Cell, number, number, object):string} */
-        this.color = opts.color || (() => "black") //(c,r,z,vs) => {}
-
-        /** A function returning the font size of a cell in geo unit.
-         * @type {function(import('../core/Dataset.js').Cell, number, number,object):number} */
-        this.fontSize = opts.fontSize || ((cell, resolution) => resolution) //(c,r,z,vs) => {}
-
-        /** The text font family.
-         * @type {function(import('../core/Dataset.js').Cell, number, number, object):string} */
-        this.fontFamily = opts.fontFamily || (() => 'Arial')
-
-        /** The text font weight.
-         * @type {function(import('../core/Dataset.js').Cell, number, number, object):string} */
-        this.fontWeight = opts.fontWeight || (() => 'bold')
-    }
-
-    /**
-     * Draw cells as text.
-     *
-     * @param {Array.<import("../core/Dataset").Cell>} cells
-     * @param {import("../core/GeoCanvas").GeoCanvas} geoCanvas
-     * @param {number} resolution
-     */
-    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
-
-        //draw with HTML canvas
-        //in screen coordinates
-        geoCanvas.initCanvasTransform()
-
-        for (let cell of cells) {
-            //get cell text
-            const text = this.text ? this.text(cell, resolution, z, viewScale) : undefined
-            if (text == undefined || text == null || text + '' === '') continue
-
-            //color
-            const col = this.color ? this.color(cell, resolution, z, viewScale) : undefined
-            if (!col) continue
-            geoCanvas.ctx.fillStyle = col
-
-            //font size
-            //size - in pixel unit
-            const fontSizePix = this.fontSize(cell, resolution, z, viewScale) / z
-            if (!fontSizePix) continue
-
-            //set font
-            const fontFamily = this.fontFamily ? this.fontFamily(cell, resolution, z, viewScale) : 'Arial'
-            const fontWeight = this.fontWeight ? this.fontWeight(cell, resolution, z, viewScale) : 'bold'
-            geoCanvas.ctx.font = fontWeight + ' ' + fontSizePix + 'px ' + fontFamily
-
-            //get offset
-            const offset = this.offset(cell, resolution, z)
-
-            //text position
-            geoCanvas.ctx.textAlign = 'center'
-            const tx = geoCanvas.geoToPixX(cell.x + resolution * 0.5 + offset.dx)
-            const ty = geoCanvas.geoToPixY(cell.y + resolution * 0.5 + offset.dy) + fontSizePix * 0.3 //it should be 0.5 but 0.3 seems to work better
-
-            //draw the text
-            geoCanvas.ctx.fillText(text, tx, ty)
-        }
-
-        //update legends
-        this.updateLegends({ style: this, resolution: resolution, z: z, viewScale: viewScale })
-    }
-
-    /**
-     * Build a function [0,1]->string for characters legend
-     *
-     * @param {Array.<string>} chars
-     * @param {(function(number):number)|undefined} scale
-     * @returns {function(number):string}
-     */
-    static textScale(chars, scale = undefined) {
-        const nb = chars.length
-        return (t) => {
-            if (scale) t = scale(t)
-            if (t == 0) return ""
-            if (t >= 1) return chars[nb - 1]
-            return chars[Math.floor(t * nb)]
-        }
-    }
-}
+//@ts-check
+'use strict'
+
+import { Style } from '../core/Style.js'
+
+/**
+ * @module style
+ * @author Julien Gaffuri
+ */
+export class TextStyle extends Style {
+    /** @param {object} opts */
+    constructor(opts) {
+        super(opts)
+        opts = opts || {}
+
+        /** A function returning the text of a cell.
+         * @type {function(import('../core/Dataset.js').Cell, number, number, object):string} */
+        this.text = opts.text || (() => 'X') //(c,r,z,vs) => {}
+
+        /** A function returning the color of the cell.
+         * @type {function(import('../core/Dataset.js').Cell, number, number, object):string} */
+        this.color = opts.color || (() => 'black') //(c,r,z,vs) => {}
+
+        /** A function returning the font size of a cell in geo unit.
+         * @type {function(import('../core/Dataset.js').Cell, number, number,object):number} */
+        this.fontSize = opts.fontSize || ((cell, resolution) => resolution) //(c,r,z,vs) => {}
+
+        /** The text font family.
+         * @type {function(import('../core/Dataset.js').Cell, number, number, object):string} */
+        this.fontFamily = opts.fontFamily || (() => 'Arial')
+
+        /** The text font weight.
+         * @type {function(import('../core/Dataset.js').Cell, number, number, object):string} */
+        this.fontWeight = opts.fontWeight || (() => 'bold')
+    }
+
+    /**
+     * Draw cells as text.
+     *
+     * @param {Array.<import("../core/Dataset").Cell>} cells
+     * @param {import("../core/GeoCanvas").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
+        //get view scale
+        const viewScale = this.viewScale ? this.viewScale(cells, resolution, z) : undefined
+
+        //draw with HTML canvas
+        //in screen coordinates
+        geoCanvas.initCanvasTransform()
+
+        for (let cell of cells) {
+            //get cell text
+            const text = this.text ? this.text(cell, resolution, z, viewScale) : undefined
+            if (text == undefined || text == null || text + '' === '') continue
+
+            //color
+            const col = this.color ? this.color(cell, resolution, z, viewScale) : undefined
+            if (!col) continue
+            ctx.fillStyle = col
+
+            //font size
+            //size - in pixel unit
+            const fontSizePix = this.fontSize(cell, resolution, z, viewScale) / z
+            if (!fontSizePix) continue
+
+            //set font
+            const fontFamily = this.fontFamily ? this.fontFamily(cell, resolution, z, viewScale) : 'Arial'
+            const fontWeight = this.fontWeight ? this.fontWeight(cell, resolution, z, viewScale) : 'bold'
+            ctx.font = fontWeight + ' ' + fontSizePix + 'px ' + fontFamily
+
+            //get offset
+            const offset = this.offset(cell, resolution, z)
+
+            //text position
+            ctx.textAlign = 'center'
+            const tx = geoCanvas.geoToPixX(cell.x + resolution * 0.5 + offset.dx)
+            const ty = geoCanvas.geoToPixY(cell.y + resolution * 0.5 + offset.dy) + fontSizePix * 0.3 //it should be 0.5 but 0.3 seems to work better
+
+            //draw the text
+            ctx.fillText(text, tx, ty)
+        }
+
+        //update legends
+        this.updateLegends({ style: this, resolution: resolution, z: z, viewScale: viewScale })
+    }
+
+    /**
+     * Build a function [0,1]->string for characters legend
+     *
+     * @param {Array.<string>} chars
+     * @param {(function(number):number)|undefined} scale
+     * @returns {function(number):string}
+     */
+    static textScale(chars, scale = undefined) {
+        const nb = chars.length
+        return (t) => {
+            if (scale) t = scale(t)
+            if (t == 0) return ''
+            if (t >= 1) return chars[nb - 1]
+            return chars[Math.floor(t * nb)]
+        }
+    }
+}