gridviz 2.1.17 → 3.0.1

package/src/style/SideStyle.js

@@ -1,9 +1,12 @@
 //@ts-check
 'use strict'
 
-import { Style } from '../Style.js'
+import { Style } from '../core/Style.js'
 
-/** @typedef {{x:number,y:number,or:"v"|"h",value:number}} Side */
+/** @typedef {{ x:number, y:number, or:"v"|"h", c1:(import('../core/Dataset').Cell)|undefined, c2:(import('../core/Dataset').Cell)|undefined }} Side */
+
+/**
+ * @typedef {function(Array.<Side>,number, number):*} SideViewScale */
 
 /**
  *
@@ -11,59 +14,103 @@ import { Style } from '../Style.js'
  */
 export class SideStyle extends Style {
     /** @param {object} opts */
-    constructor(opts) {
+    constructor(opts = {}) {
         super(opts)
-        opts = opts || {}
-
-        /** The name of the column/attribute of the tabular data where to retrieve the variable for the cell values.
-         * @type {string} */
-        this.valueCol = opts.valueCol
-
-        /** A function returning the value of a cell side. This value is computed from the two adjacent cell values.
-         * For horizontal sides, v1 is the value of the cell below and v2 the value of the cell above.
-         * For vertical sides, v1 is the value of the cell left and v2 the value of the cell right.
-         * @type {function(number|undefined,number|undefined,number,import("../Style").Stat|undefined,number):number} */
-        this.value = opts.value || ((v1, v2, r, s, zf) => 1)
 
         /** A function returning the color of a cell side.
-         * @type {function(Side,number,import("../Style").Stat|undefined,number):string} */
-        this.color = opts.color || (() => '#EA6BAC')
+         * @type {function(Side, number, number, object):string} */
+        this.color = opts.color || ((side, resolution, z, sideViewScale) => '#EA6BAC')
 
         /** A function returning the width of a cell side, in geo unit
-         * @type {function(Side,number,import("../Style").Stat|undefined,number):number} */
-        this.width = opts.width || ((side, r, s, zf) => (r * side.value) / 5)
-
-        /** orientation. Set to 90 to show sides as slope lines for example.
-         * @type {number} */
-        this.orientation = opts.orientation || 0
+         * @type {function(Side, number, number, object):number} */
+        this.width = opts.width || ((side, resolution, z, sideViewScale) => resolution / 5)
 
-        /** A fill color for the cells.
-         * @type {function(import("../Dataset").Cell):string} */
-        this.fillColor = opts.fillColor
+        /** A function returning the length of a cell side, in geo unit
+         * @type {function(Side, number, number, object):number} */
+        this.length = opts.length || ((side, resolution, z, sideViewScale) => resolution)
     }
 
     /**
-     * @param {Array.<import("../Dataset").Cell>} cells
-     * @param {number} r
-     * @param {import("../GeoCanvas").GeoCanvas} cg
+     * @param {Array.<import("../core/Dataset").Cell>} cells
+     * @param {number} resolution
+     * @param {import("../core/GeoCanvas").GeoCanvas} geoCanvas
      */
-    draw(cells, r, cg) {
+    draw(cells, geoCanvas, resolution) {
+
         //filter
         if (this.filter) cells = cells.filter(this.filter)
 
-        //zoom factor
-        const zf = cg.getZf()
+        //
+        const z = geoCanvas.view.z
 
-        //compute stats on cell values
-        let statValue
-        if (this.valueCol) {
-            //compute color variable statistics
-            statValue = Style.getStatistics(cells, (c) => c[this.valueCol], true)
-        }
+        //build sides
 
         /**  @type {Array.<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) {
+
+            //color
+            /** @type {string|undefined} */
+            const col = this.color ? this.color(side, resolution, z, viewScale) : undefined
+            if (!col || col == 'none') continue
+
+            //width
+            /** @type {number|undefined} */
+            const wG = this.width ? this.width(side, resolution, z, viewScale) : undefined
+            if (!wG || wG <= 0) continue
+
+            //length
+            /** @type {number|undefined} */
+            const lG = this.length ? this.length(side, resolution, z, viewScale) : undefined
+            if (!lG || lG <= 0) continue
+            const lG2 = lG * 0.5
+
+            //set color and width
+            geoCanvas.ctx.strokeStyle = col
+            geoCanvas.ctx.lineWidth = wG
+
+            //draw segment with correct orientation
+            geoCanvas.ctx.beginPath()
+            if (side.or === "v") {
+                geoCanvas.ctx.moveTo(side.x, side.y + r2 - lG2)
+                geoCanvas.ctx.lineTo(side.x, side.y + r2 + lG2)
+            } else {
+                geoCanvas.ctx.moveTo(side.x + r2 - lG2, side.y)
+                geoCanvas.ctx.lineTo(side.x + r2 + lG2, side.y)
+            }
+            geoCanvas.ctx.stroke()
+        }
+
+        //update legends
+        this.updateLegends({ style: this, resolution: resolution, z: z, viewScale: viewScale })
+    }
+
+
+
+    /**
+     * 
+     * @param {Array.<import('../core/Dataset').Cell>} cells The cells to use to build the sides. The side x,y coordinates are those of the left point for horizontal sides, and of the bottom point for vertical sides.
+     * @param {number} resolution The cells resolution
+     * @param {boolean} withHorizontal Set to true to build horizontal sides, false otherwise.
+     * @param {boolean} withVertical Set to true to build vertical sides, false otherwise.
+     * @param {boolean} center Set to true so that the side coordinate are those of its center point rather than its left/bottom point.
+     * @returns { Array.<Side> }
+     */
+    static buildSides(cells, resolution, withHorizontal = true, withVertical = true, center = false) {
+        /** @type { Array.<Side> } */
         const sides = []
 
+        const r2 = center ? resolution / 2 : 0
+
         //make horizontal sides
         //sort cells by x and y
         cells.sort((c1, c2) => (c2.x == c1.x ? c1.y - c2.y : c1.x - c2.x))
@@ -71,29 +118,26 @@ export class SideStyle extends Style {
         for (let i = 1; i < cells.length; i++) {
             let c2 = cells[i]
 
-            if ((c1.y + r == c2.y) && (c1.x == c2.x))
+            if ((c1.y + resolution == c2.y) && (c1.x == c2.x))
                 //cells in same column and touch along horizontal side
                 //make shared side
                 sides.push({
-                    x: c1.x,
-                    y: c2.y,
                     or: 'h',
-                    value: this.value(c1[this.valueCol], c2[this.valueCol], r, statValue, zf),
+                    x: c1.x + r2, y: c2.y,
+                    c1: c1, c2: c2
                 })
             else {
                 //cells do not touch along horizontal side
                 //make two sides: top one for c1, bottom for c2
                 sides.push({
-                    x: c1.x,
-                    y: c1.y + r,
                     or: 'h',
-                    value: this.value(c1[this.valueCol], undefined, r, statValue, zf),
+                    x: c1.x + r2, y: c1.y + resolution,
+                    c1: c1, c2: undefined
                 })
                 sides.push({
-                    x: c2.x,
-                    y: c2.y,
                     or: 'h',
-                    value: this.value(undefined, c2[this.valueCol], r, statValue, zf),
+                    x: c2.x + r2, y: c2.y,
+                    c1: undefined, c2: c2
                 })
             }
 
@@ -107,110 +151,32 @@ export class SideStyle extends Style {
         for (let i = 1; i < cells.length; i++) {
             let c2 = cells[i]
 
-            if ((c1.x + r == c2.x) && (c1.y == c2.y))
+            if ((c1.x + resolution == c2.x) && (c1.y == c2.y))
                 //cells in same row and touch along vertical side
                 //make shared side
                 sides.push({
-                    x: c1.x + r,
-                    y: c1.y,
                     or: 'v',
-                    value: this.value(c1[this.valueCol], c2[this.valueCol], r, statValue, zf),
+                    x: c1.x + resolution, y: c1.y + r2,
+                    c1: c1, c2: c2
                 })
             else {
                 //cells do not touch along vertical side
                 //make two sides: right one for c1, left for c2
                 sides.push({
-                    x: c1.x + r,
-                    y: c1.y,
                     or: 'v',
-                    value: this.value(c1[this.valueCol], undefined, r, statValue, zf),
+                    x: c1.x + resolution, y: c1.y + r2,
+                    c1: c1, c2: undefined
                 })
                 sides.push({
-                    x: c2.x,
-                    y: c2.y,
                     or: 'v',
-                    value: this.value(undefined, c2[this.valueCol], r, statValue, zf),
+                    x: c2.x, y: c2.y + r2,
+                    c1: undefined, c2: c2
                 })
             }
 
             c1 = c2
         }
-
-        //
-        if (sides.length == 0) return
-
-        //compute stats on sides
-        const statSides = SideStyle.getSideStatistics(sides, true)
-
-        //draw in geo coordinates
-        cg.setCanvasTransform()
-
-        //draw cells, if fillColor specified
-        if (this.fillColor)
-            for (let c of cells) {
-                const fc = this.fillColor(c)
-                if (!fc || fc == 'none') continue
-                cg.ctx.fillStyle = fc
-                cg.ctx.fillRect(c.x, c.y, r, r)
-            }
-
-        //draw sides
-        cg.ctx.lineCap = 'butt'
-        const r2 = r / 2
-        for (let s of sides) {
-            //color
-            /** @type {string|undefined} */
-            const col = this.color ? this.color(s, r, statSides, zf) : undefined
-            if (!col || col == 'none') continue
-
-            //width
-            /** @type {number|undefined} */
-            const wG = this.width ? this.width(s, r, statSides, zf) : undefined
-            if (!wG || wG <= 0) continue
-
-            //set color and width
-            cg.ctx.strokeStyle = col
-            cg.ctx.lineWidth = wG
-
-            //draw segment with correct orientation
-            cg.ctx.beginPath()
-            if (this.orientation == 90) {
-                cg.ctx.moveTo(s.x + r2, s.y + r2)
-                if (s.or === 'h') cg.ctx.lineTo(s.x + r2, s.y - r2)
-                else cg.ctx.lineTo(s.x - r2, s.y + r2)
-            } else {
-                cg.ctx.moveTo(s.x, s.y)
-                cg.ctx.lineTo(s.x + (s.or === 'h' ? r : 0), s.y + (s.or === 'v' ? r : 0))
-            }
-            cg.ctx.stroke()
-        }
-
-        //update legends
-        this.updateLegends({ style: this, r: r, zf: zf })
+        return sides
     }
 
-    /**
-     * Compute some statistics on a value of some sides.
-     * This is used to define how to draw specifically the sides within the view.
-     *
-     * @param {Array.<Side>} sides
-     * @param {boolean} ignoreZeros
-     * @returns {import("../Style").Stat | undefined}
-     */
-    static getSideStatistics(sides, ignoreZeros) {
-        if (!sides || sides.length == 0) return undefined
-        let min = Infinity
-        let max = -Infinity
-        //let sum = 0
-        //let nb = 0
-        for (const s of sides) {
-            const v = s.value
-            if (ignoreZeros && !v) continue
-            if (v < min) min = v
-            if (v > max) max = v
-            //sum += v
-            //nb++
-        }
-        return { min: min, max: max }
-    }
 }

package/src/style/{SquareColorCatWGLStyle.js → SquareColorCategoryWebGLStyle.js}

@@ -1,51 +1,49 @@
 //@ts-check
 'use strict'
 
-import { Style } from '../Style.js'
+import { Style } from '../core/Style.js'
 import { makeWebGLCanvas } from '../utils/webGLUtils.js'
 import { WebGLSquareColoringCatAdvanced } from '../utils/WebGLSquareColoringCatAdvanced.js'
-import { monitor, monitorDuration } from '../utils/Utils.js'
 
 /**
  * Style based on webGL
  * To show cells as colored squares, from categories.
- * Alls squares with the same size
+ * All cells are drawn as squares, with the same size
  *
  * @author Julien Gaffuri
  */
-export class SquareColorCatWGLStyle extends Style {
+export class SquareColorCategoryWebGLStyle 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 category of the cell, for coloring.
+         * The name of the column/attribute of the tabular data where to retrieve the category code of the cell, for coloring.
          * @type {string} */
-        this.colorCol = opts.colorCol
+        this.code = opts.code
 
         /**
-         * The dictionary (string -> color) which give the color of each category.
+         * The dictionary (code -> color) which gives the color of each category code.
          * @type {object} */
         opts.color = opts.color || undefined
 
-        /** @type { Array.<string> } @private */
-        const keys = Object.keys(opts.color)
+        /** @type { Array.<string> } */
+        const codes = Object.keys(opts.color)
 
         /** @type { object } @private */
         this.catToI = {}
-        for (let i = 0; i < keys.length; i++) this.catToI[keys[i]] = i + ''
+        for (let i = 0; i < codes.length; i++) this.catToI[codes[i]] = i + ''
 
         /** @type { Array.<string> } @private */
         this.colors = []
-        for (let i = 0; i < keys.length; i++) {
-            this.colors.push(opts.color['' + keys[i]])
-        }
+        for (const code of codes)
+            this.colors.push(opts.color['' + code])
 
         /**
          * A function returning the size of the cells, in geographical unit. All cells have the same size.
          * @type {function(number,number):number} */
-        this.size = opts.size // (resolution, zf) => ...
+        this.size = opts.size // (resolution, z) => ...
 
         /**
          * @private
@@ -54,28 +52,26 @@ export class SquareColorCatWGLStyle extends Style {
     }
 
     /**
-     * @param {Array.<import("../Dataset").Cell>} cells
-     * @param {number} r
-     * @param {import("../GeoCanvas").GeoCanvas} cg
+     * @param {Array.<import("../core/Dataset.js").Cell>} cells
+     * @param {import("../core/GeoCanvas.js").GeoCanvas} geoCanvas
+     * @param {number} resolution
      */
-    draw(cells, r, cg) {
-        if (monitor) monitorDuration('*** SquareColorCatWGLStyle draw')
+    draw(cells, geoCanvas, resolution) {
 
         //filter
         if (this.filter) cells = cells.filter(this.filter)
 
-        //zoom factor
-        const zf = cg.getZf()
+        //
+        const z = geoCanvas.view.z
 
         //add vertice and fragment data
-        const r2 = r / 2
-        let c,
-            nb = cells.length
+        const r2 = resolution / 2
+        let c, nb = cells.length
         const verticesBuffer = []
         const iBuffer = []
         for (let i = 0; i < nb; i++) {
             c = cells[i]
-            const cat = c[this.colorCol]
+            const cat = c[this.code]
             if (cat == undefined) {
                 console.log('Unexpected category: ' + cat)
                 continue
@@ -90,31 +86,22 @@ export class SquareColorCatWGLStyle extends Style {
             iBuffer.push(+i_)
         }
 
-        if (monitor) monitorDuration('   webgl program inputs preparation')
-
         //create canvas and webgl renderer
-        const cvWGL = makeWebGLCanvas(cg.w + '', cg.h + '')
+        const cvWGL = makeWebGLCanvas(geoCanvas.w + '', geoCanvas.h + '')
         if (!cvWGL) {
             console.error('No webGL')
             return
         }
-        if (monitor) monitorDuration('   web GL canvas creation')
 
         //draw
-        const sizeGeo = this.size ? this.size(r, zf) : r + 0.2 * zf
-        this.wgp.draw(cvWGL.gl, verticesBuffer, iBuffer, cg.getWebGLTransform(), sizeGeo / zf)
-
-        if (monitor) monitorDuration('   webgl drawing')
+        const sizeGeo = this.size ? this.size(resolution, z) : resolution + 0.2 * z
+        this.wgp.draw(cvWGL.gl, verticesBuffer, iBuffer, geoCanvas.getWebGLTransform(), sizeGeo / z)
 
         //draw in canvas geo
-        cg.initCanvasTransform()
-        cg.ctx.drawImage(cvWGL.canvas, 0, 0)
-
-        if (monitor) monitorDuration('   canvas drawing')
+        geoCanvas.initCanvasTransform()
+        geoCanvas.ctx.drawImage(cvWGL.canvas, 0, 0)
 
         //update legends
-        this.updateLegends({ style: this, r: r, zf: zf })
-
-        if (monitor) monitorDuration('*** SquareColorCatWGLStyle end draw')
+        this.updateLegends({ style: this, resolution: resolution, z: z })
     }
-}
+}

package/src/style/{SquareColorWGLStyle.js → SquareColorWebGLStyle.js}

@@ -1,10 +1,9 @@
 //@ts-check
 'use strict'
 
-import { Style } from '../Style.js'
+import { Style } from '../core/Style.js'
 import { makeWebGLCanvas } from '../utils/webGLUtils.js'
 import { WebGLSquareColoringAdvanced } from '../utils/WebGLSquareColoringAdvanced.js'
-import { monitor, monitorDuration } from '../utils/Utils.js'
 
 /**
  * Style based on webGL
@@ -13,21 +12,16 @@ import { monitor, monitorDuration } from '../utils/Utils.js'
  *
  * @author Julien Gaffuri
  */
-export class SquareColorWGLStyle extends Style {
+export class SquareColorWebGLStyle 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 t value (within [0,1]) of the cell.
-         * @type {function(number,number,import("../Style").Stat):number} */
-        this.tFun = opts.tFun || ((v, r, s) => v / s.max)
+         * A function returning a t value (within [0,1]) for a cell.
+         * @type {function(import('../core/Dataset.js').Cell,number,number,object):number} */
+        this.tFun = opts.tFun //(c,r,z,vs) => {}
 
         /**
          * Distribution stretching method.
@@ -62,85 +56,70 @@ export class SquareColorWGLStyle extends Style {
          * Define the opacity of the style, within [0,1].
          * If this opacity is defined, the individual color opacity will be ignored.
          * @type {function(number,number):number} */
-        this.opacity = opts.opacity // (r,zf) => ...
+        this.opacity = opts.opacity // (r,z) => ...
 
         /**
          * A function returning the size of the cells, in geographical unit. All cells have the same size.
          * @type {function(number,number):number} */
-        this.size = opts.size // (resolution, zf) => ...
+        this.size = opts.size // (resolution, z) => ...
     }
 
     /**
-     * @param {Array.<import("../Dataset").Cell>} cells
-     * @param {number} r
-     * @param {import("../GeoCanvas").GeoCanvas} cg
+     * @param {Array.<import("../core/Dataset.js").Cell>} cells
+     * @param {import("../core/GeoCanvas.js").GeoCanvas} geoCanvas
+     * @param {number} resolution
      */
-    draw(cells, r, cg) {
-        if (monitor) monitorDuration('*** SquareColorWGLStyle draw')
+    draw(cells, geoCanvas, resolution) {
 
         //filter
         if (this.filter) cells = cells.filter(this.filter)
 
-        //zoom factor
-        const zf = cg.getZf()
-
-        //compute color variable statistics
-        const statColor = Style.getStatistics(cells, (c) => c[this.colorCol], true)
-        if (monitor) monitorDuration('   color stats computation')
+        //
+        const z = geoCanvas.view.z
 
-        if (!statColor) return
+        //get view scale
+        const viewScale = this.viewScale ? this.viewScale(cells, resolution, z) : undefined
 
         //create canvas and webgl renderer
         //for opacity control, see: https://webglfundamentals.org/webgl/lessons/webgl-and-alpha.html
         const cvWGL = makeWebGLCanvas(
-            cg.w + '',
-            cg.h + '',
+            geoCanvas.w + '',
+            geoCanvas.h + '',
             this.opacity != undefined ? { premultipliedAlpha: false } : undefined
         )
         if (!cvWGL) {
             console.error('No webGL')
             return
         }
-        if (monitor) monitorDuration('   web GL canvas creation')
 
         //add vertice and fragment data
-        const r2 = r / 2
+        const r2 = resolution / 2
         const verticesBuffer = []
         const tBuffer = []
-        for (let c of cells) {
-            const t = this.tFun(c[this.colorCol], r, statColor)
+        for (let cell of cells) {
+            const t = this.tFun(cell, resolution, z, viewScale)
             if (t == null || t == undefined) continue
-            verticesBuffer.push(c.x + r2, c.y + r2)
+            verticesBuffer.push(cell.x + r2, cell.y + r2)
             tBuffer.push(t > 1 ? 1 : t < 0 ? 0 : t)
         }
 
-        if (monitor) monitorDuration('   webgl drawing data preparation')
-
         //compute pixel size
-        const sizeGeo = this.size ? this.size(r, zf) : r + 0.2 * zf
+        const sizeGeo = this.size ? this.size(resolution, z) : resolution + 0.2 * z
 
         //compute opacity
-        const op = this.opacity ? this.opacity(r, zf) : undefined
+        const op = this.opacity ? this.opacity(resolution, z) : undefined
 
         //
-        const wgp = new WebGLSquareColoringAdvanced(cvWGL.gl, this.colors, this.stretching, sizeGeo / zf, op)
-
-        if (monitor) monitorDuration('   webgl program preparation')
+        const wgp = new WebGLSquareColoringAdvanced(cvWGL.gl, this.colors, this.stretching, sizeGeo / z, op)
 
         //draw
-        wgp.draw(verticesBuffer, tBuffer, cg.getWebGLTransform())
-
-        if (monitor) monitorDuration('   webgl drawing')
+        wgp.draw(verticesBuffer, tBuffer, geoCanvas.getWebGLTransform())
 
         //draw in canvas geo
-        cg.initCanvasTransform()
-        cg.ctx.drawImage(cvWGL.canvas, 0, 0)
-
-        if (monitor) monitorDuration('   canvas drawing')
+        geoCanvas.initCanvasTransform()
+        geoCanvas.ctx.drawImage(cvWGL.canvas, 0, 0)
 
         //update legends
-        this.updateLegends({ style: this, r: r, zf: zf, sColor: statColor })
-
-        if (monitor) monitorDuration('*** SquareColorWGLStyle end draw')
+        this.updateLegends({ style: this, resolution: resolution, z: z, viewScale: viewScale })
     }
 }