gridviz 2.0.38 → 2.0.40

package/src/style/TextStyle.js

@@ -1,132 +1,132 @@
-//@ts-check
-'use strict'
-
-import { Style } from '../Style.js'
-
-/**
- *
- * @author Julien Gaffuri
- */
-export class TextStyle 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 text.
-         * @type {string} */
-        this.textCol = opts.textCol
-
-        /** A function returning the text of a cell.
-         * @type {function(number,number,import("../Style").Stat|undefined):string} */
-        this.text = opts.text || ((v, r, s, z) => 'X')
-
-        /** 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 name of the column/attribute of the tabular data where to retrieve the variable for font size.
-         * @type {string} */
-        this.fontSizeCol = opts.fontSizeCol
-
-        /** A function returning the font size of a cell in geo unit.
-         * @type {function(number,number,import("../Style").Stat|undefined,number):number} */
-        this.fontSize = opts.fontSize || ((v, r, s, z) => r * 0.8)
-
-        /** The text font family.
-         * @type {string} */
-        this.fontFamily = opts.fontFamily || 'Arial'
-
-        /** The text font weight.
-         * @type {string} */
-        this.fontWeight = opts.fontWeight || 'bold'
-    }
-
-    /**
-     * Draw cells as text.
-     *
-     * @param {Array.<import("../Dataset").Cell>} cells
-     * @param {number} r
-     * @param {import("../GeoCanvas").GeoCanvas} cg
-     */
-    draw(cells, r, cg) {
-        //filter
-        if (this.filter) cells = cells.filter(this.filter)
-
-        //zoom factor
-        const zf = cg.getZf()
-
-        let statText
-        if (this.textCol) {
-            //compute text variable statistics
-            statText = Style.getStatistics(cells, (c) => c[this.textCol], true)
-        }
-
-        let statColor
-        if (this.colorCol) {
-            //compute color variable statistics
-            statColor = Style.getStatistics(cells, (c) => c[this.colorCol], true)
-        }
-
-        let statFontSize
-        if (this.fontSizeCol) {
-            //if size is used, sort cells by size so that the biggest are drawn first
-            cells.sort((c1, c2) => c2[this.fontSizeCol] - c1[this.fontSizeCol])
-            //and compute size variable statistics
-            statFontSize = Style.getStatistics(cells, (c) => c[this.fontSizeCol], true)
-        }
-
-        //draw with HTML canvas
-        //in screen coordinates
-        cg.initCanvasTransform()
-
-        for (let cell of cells) {
-            //get cell text
-            const text = this.text ? this.text(cell[this.textCol], r, statText) : undefined
-            if (text == undefined || text == null || text + '' === '') continue
-
-            //color
-            const col = this.color ? this.color(cell[this.colorCol], r, statColor) : undefined
-            if (!col) continue
-            cg.ctx.fillStyle = col
-
-            //font size
-            //size - in pixel unit
-            const fontSizePix = this.fontSize(cell[this.fontSizeCol], r, statFontSize, zf) / zf
-
-            //set font
-            const fontFamily = this.fontFamily || 'Arial'
-            const fontWeight = this.fontWeight || 'bold'
-            cg.ctx.font = fontWeight + ' ' + fontSizePix + 'px ' + fontFamily
-
-            //get offset
-            const offset = this.offset(cell, r, zf)
-
-            //text position
-            cg.ctx.textAlign = 'center'
-            const tx = cg.geoToPixX(cell.x + r * 0.5 + offset.dx)
-            const ty = cg.geoToPixY(cell.y + r * 0.5 + offset.dy) + fontSizePix * 0.3 //it should be 0.5 but 0.3 seems to work better
-
-            //draw the text
-            cg.ctx.fillText(text, tx, ty)
-        }
-
-        //update legends
-        this.updateLegends({ style: this, r: r, zf: zf, sColor: statColor })
-    }
-
-    /**
-     * Build a function [0,1]->string for characters legend
-     *
-     * @param {Array.<string>} chars
-     * @returns {function(number):string}
-     */
-    static getCharLegendFun(chars) {
-        const nb = chars.length
-        return (t) => (t == 0 ? '' : t == 1 ? chars[nb - 1] : chars[Math.floor(t * nb)])
-    }
-}
+//@ts-check
+'use strict'
+
+import { Style } from '../Style.js'
+
+/**
+ *
+ * @author Julien Gaffuri
+ */
+export class TextStyle 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 text.
+         * @type {string} */
+        this.textCol = opts.textCol
+
+        /** A function returning the text of a cell.
+         * @type {function(number,number,import("../Style").Stat|undefined,number):string} */
+        this.text = opts.text || ((v, r, s, z) => 'X')
+
+        /** 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,number):string} */
+        this.color = opts.color || (() => '#EA6BAC')
+
+        /** The name of the column/attribute of the tabular data where to retrieve the variable for font size.
+         * @type {string} */
+        this.fontSizeCol = opts.fontSizeCol
+
+        /** A function returning the font size of a cell in geo unit.
+         * @type {function(number,number,import("../Style").Stat|undefined,number):number} */
+        this.fontSize = opts.fontSize || ((v, r, s, z) => r * 0.8)
+
+        /** The text font family.
+         * @type {string} */
+        this.fontFamily = opts.fontFamily || 'Arial'
+
+        /** The text font weight.
+         * @type {string} */
+        this.fontWeight = opts.fontWeight || 'bold'
+    }
+
+    /**
+     * Draw cells as text.
+     *
+     * @param {Array.<import("../Dataset").Cell>} cells
+     * @param {number} r
+     * @param {import("../GeoCanvas").GeoCanvas} cg
+     */
+    draw(cells, r, cg) {
+        //filter
+        if (this.filter) cells = cells.filter(this.filter)
+
+        //zoom factor
+        const zf = cg.getZf()
+
+        let statText
+        if (this.textCol) {
+            //compute text variable statistics
+            statText = Style.getStatistics(cells, (c) => c[this.textCol], true)
+        }
+
+        let statColor
+        if (this.colorCol) {
+            //compute color variable statistics
+            statColor = Style.getStatistics(cells, (c) => c[this.colorCol], true)
+        }
+
+        let statFontSize
+        if (this.fontSizeCol) {
+            //if size is used, sort cells by size so that the biggest are drawn first
+            cells.sort((c1, c2) => c2[this.fontSizeCol] - c1[this.fontSizeCol])
+            //and compute size variable statistics
+            statFontSize = Style.getStatistics(cells, (c) => c[this.fontSizeCol], true)
+        }
+
+        //draw with HTML canvas
+        //in screen coordinates
+        cg.initCanvasTransform()
+
+        for (let cell of cells) {
+            //get cell text
+            const text = this.text ? this.text(cell[this.textCol], r, statText, zf) : undefined
+            if (text == undefined || text == null || text + '' === '') continue
+
+            //color
+            const col = this.color ? this.color(cell[this.colorCol], r, statColor, zf) : undefined
+            if (!col) continue
+            cg.ctx.fillStyle = col
+
+            //font size
+            //size - in pixel unit
+            const fontSizePix = this.fontSize(cell[this.fontSizeCol], r, statFontSize, zf) / zf
+
+            //set font
+            const fontFamily = this.fontFamily || 'Arial'
+            const fontWeight = this.fontWeight || 'bold'
+            cg.ctx.font = fontWeight + ' ' + fontSizePix + 'px ' + fontFamily
+
+            //get offset
+            const offset = this.offset(cell, r, zf)
+
+            //text position
+            cg.ctx.textAlign = 'center'
+            const tx = cg.geoToPixX(cell.x + r * 0.5 + offset.dx)
+            const ty = cg.geoToPixY(cell.y + r * 0.5 + offset.dy) + fontSizePix * 0.3 //it should be 0.5 but 0.3 seems to work better
+
+            //draw the text
+            cg.ctx.fillText(text, tx, ty)
+        }
+
+        //update legends
+        this.updateLegends({ style: this, r: r, zf: zf, sColor: statColor })
+    }
+
+    /**
+     * Build a function [0,1]->string for characters legend
+     *
+     * @param {Array.<string>} chars
+     * @returns {function(number):string}
+     */
+    static getCharLegendFun(chars) {
+        const nb = chars.length
+        return (t) => (t == 0 ? '' : t == 1 ? chars[nb - 1] : chars[Math.floor(t * nb)])
+    }
+}

package/src/utils/Utils.js

@@ -1,35 +1,35 @@
-//@ts-check
-'use strict'
-
-/**
- * Get the class id from a value and class break values
- *
- * @param {number} v the value
- * @param {Array.<number>} breaks the breaks
- * @returns The class id, from 0 to breaks.length
- */
-export function getClass(v, breaks) {
-    if (!breaks) return
-    if (breaks.length == 0) return 0
-    if (v <= breaks[0]) return 0
-    for (let i = 1; i < breaks.length; i++) if (breaks[i - 1] < v && v <= breaks[i]) return i
-    return breaks.length
-}
-
-export let monitor = false
-
-let previousDate
-export function monitorDuration(message) {
-    const nowDate = Date.now()
-
-    //first call
-    if (!previousDate) {
-        previousDate = nowDate
-        console.log(previousDate, message)
-        return
-    }
-
-    const d = nowDate - previousDate
-    previousDate = nowDate
-    console.log(d, message)
-}
+//@ts-check
+'use strict'
+
+/**
+ * Get the class id from a value and class break values
+ *
+ * @param {number} v the value
+ * @param {Array.<number>} breaks the breaks
+ * @returns The class id, from 0 to breaks.length
+ */
+export function getClass(v, breaks) {
+    if (!breaks) return
+    if (breaks.length == 0) return 0
+    if (v <= breaks[0]) return 0
+    for (let i = 1; i < breaks.length; i++) if (breaks[i - 1] < v && v <= breaks[i]) return i
+    return breaks.length
+}
+
+export let monitor = false
+
+let previousDate
+export function monitorDuration(message) {
+    const nowDate = Date.now()
+
+    //first call
+    if (!previousDate) {
+        previousDate = nowDate
+        console.log(previousDate, message)
+        return
+    }
+
+    const d = nowDate - previousDate
+    previousDate = nowDate
+    console.log(d, message)
+}

package/src/utils/WebGLRectangleColoring.js

@@ -1,106 +1,106 @@
-//@ts-check
-'use strict'
-
-import { initShaderProgram, createShader } from './webGLUtils.js'
-
-/**
- * Everything to easily draw colored rectangles with webGL.
- */
-export class WebGLRectangleColoring {
-    //TODO: add color alpha/opacity
-
-    /**
-     *
-     * @param {WebGLRenderingContext} gl
-     */
-    constructor(gl) {
-        this.gl = gl
-
-        this.program = initShaderProgram(
-            gl,
-            createShader(
-                gl,
-                gl.VERTEX_SHADER,
-                `
-            attribute vec2 pos;
-            uniform mat3 mat;
-            attribute vec3 color;
-            varying vec3 vColor;
-            void main() {
-              gl_Position = vec4(mat * vec3(pos, 1.0), 1.0);
-              vColor = color;
-            }
-          `
-            ),
-            createShader(
-                gl,
-                gl.FRAGMENT_SHADER,
-                `
-            precision mediump float;
-            varying vec3 vColor;
-            void main(void) {
-               gl_FragColor = vec4(vColor, 1.0);
-            }`
-            )
-        )
-        gl.useProgram(this.program)
-
-        //buffer data
-        this.verticesBuffer = []
-        this.colorsBuffer = []
-    }
-
-    /** Add data to vertices/color buffers for color rectangle drawing */
-    addRectangleData(x1, x2, y1, y2, cR = 0, cG = 0, cB = 1, cA = 0) {
-        //TODO cA
-        //add vertices
-        this.verticesBuffer.push(x1, y1, x2, y1, x1, y2, x2, y2)
-
-        //colors, 3 parts (RGB), one per vertice
-        this.colorsBuffer.push(cR, cG, cB, cR, cG, cB, cR, cG, cB, cR, cG, cB)
-    }
-
-    /**  */
-    draw(transfoMat) {
-        const gl = this.gl
-
-        //vertice data
-        gl.bindBuffer(gl.ARRAY_BUFFER, gl.createBuffer())
-        gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(this.verticesBuffer), gl.STATIC_DRAW)
-        const position = gl.getAttribLocation(this.program, 'pos')
-        gl.vertexAttribPointer(
-            position,
-            2, //numComponents
-            gl.FLOAT, //type
-            false, //normalise
-            0, //stride
-            0 //offset
-        )
-        gl.enableVertexAttribArray(position)
-
-        //color data
-        gl.bindBuffer(gl.ARRAY_BUFFER, gl.createBuffer())
-        gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(this.colorsBuffer), gl.STATIC_DRAW)
-        var color = gl.getAttribLocation(this.program, 'color')
-        gl.vertexAttribPointer(color, 3, gl.FLOAT, false, 0, 0)
-        gl.enableVertexAttribArray(color)
-
-        //transformation
-        gl.uniformMatrix3fv(gl.getUniformLocation(this.program, 'mat'), false, new Float32Array(transfoMat))
-
-        // Enable the depth test
-        //gl.enable(gl.DEPTH_TEST);
-        // Clear the color buffer bit
-        gl.clear(gl.COLOR_BUFFER_BIT)
-        // Set the view port
-        //gl.viewport(0, 0, cg.w, cg.h);
-
-        for (let i = 0; i < this.verticesBuffer.length / 8; i++) {
-            gl.drawArrays(
-                gl.TRIANGLE_STRIP, // mode,see https://miro.medium.com/max/700/0*HQHB5lCGqlOUiysy.jpg
-                i * 4, // vertex list start
-                4 // vertex count
-            )
-        }
-    }
-}
+//@ts-check
+'use strict'
+
+import { initShaderProgram, createShader } from './webGLUtils.js'
+
+/**
+ * Everything to easily draw colored rectangles with webGL.
+ */
+export class WebGLRectangleColoring {
+    //TODO: add color alpha/opacity
+
+    /**
+     *
+     * @param {WebGLRenderingContext} gl
+     */
+    constructor(gl) {
+        this.gl = gl
+
+        this.program = initShaderProgram(
+            gl,
+            createShader(
+                gl,
+                gl.VERTEX_SHADER,
+                `
+            attribute vec2 pos;
+            uniform mat3 mat;
+            attribute vec3 color;
+            varying vec3 vColor;
+            void main() {
+              gl_Position = vec4(mat * vec3(pos, 1.0), 1.0);
+              vColor = color;
+            }
+          `
+            ),
+            createShader(
+                gl,
+                gl.FRAGMENT_SHADER,
+                `
+            precision mediump float;
+            varying vec3 vColor;
+            void main(void) {
+               gl_FragColor = vec4(vColor, 1.0);
+            }`
+            )
+        )
+        gl.useProgram(this.program)
+
+        //buffer data
+        this.verticesBuffer = []
+        this.colorsBuffer = []
+    }
+
+    /** Add data to vertices/color buffers for color rectangle drawing */
+    addRectangleData(x1, x2, y1, y2, cR = 0, cG = 0, cB = 1, cA = 0) {
+        //TODO cA
+        //add vertices
+        this.verticesBuffer.push(x1, y1, x2, y1, x1, y2, x2, y2)
+
+        //colors, 3 parts (RGB), one per vertice
+        this.colorsBuffer.push(cR, cG, cB, cR, cG, cB, cR, cG, cB, cR, cG, cB)
+    }
+
+    /**  */
+    draw(transfoMat) {
+        const gl = this.gl
+
+        //vertice data
+        gl.bindBuffer(gl.ARRAY_BUFFER, gl.createBuffer())
+        gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(this.verticesBuffer), gl.STATIC_DRAW)
+        const position = gl.getAttribLocation(this.program, 'pos')
+        gl.vertexAttribPointer(
+            position,
+            2, //numComponents
+            gl.FLOAT, //type
+            false, //normalise
+            0, //stride
+            0 //offset
+        )
+        gl.enableVertexAttribArray(position)
+
+        //color data
+        gl.bindBuffer(gl.ARRAY_BUFFER, gl.createBuffer())
+        gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(this.colorsBuffer), gl.STATIC_DRAW)
+        var color = gl.getAttribLocation(this.program, 'color')
+        gl.vertexAttribPointer(color, 3, gl.FLOAT, false, 0, 0)
+        gl.enableVertexAttribArray(color)
+
+        //transformation
+        gl.uniformMatrix3fv(gl.getUniformLocation(this.program, 'mat'), false, new Float32Array(transfoMat))
+
+        // Enable the depth test
+        //gl.enable(gl.DEPTH_TEST);
+        // Clear the color buffer bit
+        gl.clear(gl.COLOR_BUFFER_BIT)
+        // Set the view port
+        //gl.viewport(0, 0, cg.w, cg.h);
+
+        for (let i = 0; i < this.verticesBuffer.length / 8; i++) {
+            gl.drawArrays(
+                gl.TRIANGLE_STRIP, // mode,see https://miro.medium.com/max/700/0*HQHB5lCGqlOUiysy.jpg
+                i * 4, // vertex list start
+                4 // vertex count
+            )
+        }
+    }
+}