gridviz 3.0.28 → 3.0.30

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "gridviz",
-    "version": "3.0.28",
+    "version": "3.0.30",
     "description": "Visualization tool for gridded statistics",
     "keywords": [
         "statistics",

package/src/index.js

@@ -24,10 +24,9 @@ export { TextStyle } from './style/TextStyle.js'
 export { PillarStyle } from './style/PillarStyle.js'
 export { SideStyle } from './style/SideStyle.js'
 export { ShadingStyle } from './style/ShadingStyle.js'
-//export { ContourStyle } from './style/ContourStyle.js'
 export { SideCategoryStyle } from './style/SideCategoryStyle.js'
 export { DotDensityStyle } from './style/DotDensityStyle.js'
-export { TanakaStyle } from './style/TanakaStyle.js'
+export { SideTanakaStyle } from './style/SideTanakaStyle.js'
 export { LegoStyle } from './style/LegoStyle.js'
 export { SquareColorWebGLStyle } from './style/SquareColorWebGLStyle.js'
 export { SquareColorCategoryWebGLStyle } from './style/SquareColorCategoryWebGLStyle.js'

package/src/style/LegoStyle.js

@@ -1,10 +1,14 @@
 //@ts-check
 'use strict'
 
-import { TanakaStyle } from './TanakaStyle.js'
+//import { TanakaStyle } from './SideTanakaStyle___OLD.js'
 import { StrokeStyle } from './StrokeStyle.js'
 import { SquareColorCategoryWebGLStyle } from './SquareColorCategoryWebGLStyle.js'
 import { Style } from '../core/Style.js'
+//import { SideStyle } from './SideStyle.js'
+import { classifier as clFun, colorClassifier as cclFun } from '../utils/scale.js'
+import { SideTanakaStyle } from './SideTanakaStyle.js'
+
 
 /**
  * @module style
@@ -30,12 +34,30 @@ export class LegoStyle {
             //"#eee" //whithe
         ]*/
 
-        opts.colDark = opts.colDark || '#333'
-        opts.colBright = opts.colBright || '#aaa'
-        opts.widthFactor = opts.widthFactor || 0.12
+        opts.colorDark = opts.colorDark || '#333'
+        opts.colorBright = opts.colorBright || '#aaa'
+
+        //make classifier
+        const classifier = clFun(breaks)
+        const classifier2 = cell => classifier(value(cell))
+        //make colors table
+        const colorsDict = {}
+        for (let i = 0; i < colors.length; i++) colorsDict[i + ''] = colors[i]
+
+        //make cell fill style
+        const cellStyle = new SquareColorCategoryWebGLStyle({
+            code: classifier2,
+            color: colorsDict,
+        })
+
+        //make tanaka side style
+        const tanakaStyle = new SideTanakaStyle({
+            classifier: () => classifier2,
+            colorDark : opts.colorDark,
+            colorBright : opts.colorBright,
+            diamond: opts.diamond,
+        })
 
-        //reuse tanaka as basis
-        const ts = TanakaStyle.get(value, breaks, colors, opts)
         //style to show limits between pieces
         const sst = new StrokeStyle({
             strokeColor: () => '#666',
@@ -44,9 +66,9 @@ export class LegoStyle {
         })
 
         return [
-            ts[0],
+            cellStyle,
             sst,
-            ts[1],
+            tanakaStyle,
             new LegoTopStyle({ colDark: opts.colDark, colBright: opts.colBright, filter: opts.filter }),
         ]
     }

package/src/style/ShadingStyle.js

@@ -3,7 +3,9 @@
 
 import { SideStyle } from './SideStyle.js'
 import { max } from 'd3-array'
-import { exponentialScale } from '../utils/stretching.js'
+
+/** @typedef {{ x:number, y:number, or:"v"|"h", c1:(import('../core/Dataset.js').Cell)|undefined, c2:(import('../core/Dataset.js').Cell)|undefined }} Side */
+
 
 /**
  * @module style
@@ -28,7 +30,7 @@ export class ShadingStyle extends SideStyle {
         const elevation = opts.elevation
 
         // compute side value as elevation difference and attach to side
-        const sideValue = (side) => {
+        const sideValue = (/** @type {Side} */ side) => {
             if (!side.c1) side.v = 0
             else if (!side.c2) side.v = 0
             else if (!side.c1[elevation]) side.v = 0
@@ -55,7 +57,5 @@ export class ShadingStyle extends SideStyle {
 
         this.width = (_, r, z) => opts.width | Math.min(2 * z, r / 3)
         this.diamond = opts.diamond
-
     }
-
 }

package/src/style/SideTanakaStyle.js

@@ -0,0 +1,152 @@
+//@ts-check
+'use strict'
+
+import { Style } from '../core/Style.js'
+import { SideStyle } from './SideStyle.js'
+
+/** @typedef {{ x:number, y:number, or:"v"|"h", c1:(import('../core/Dataset.js').Cell)|undefined, c2:(import('../core/Dataset.js').Cell)|undefined }} Side */
+
+/**
+ * @typedef {function(Array.<Side>,number, number):*} SideViewScale */
+
+/**
+ * @module style
+ * @author Julien Gaffuri
+ */
+export class SideTanakaStyle extends Style {
+    /** @param {object} opts */
+    constructor(opts = {}) {
+        super(opts)
+
+        /** A function returning the cells classifier.
+         * The cell classifier is a function that for each cell returns its class number (int).
+        */
+        this.classifier = opts.classifier || ((cells, resolution, z) => c => 1)
+
+        /** A function returning the width of a cell side, in geo unit
+         * @type {function(Side, number, number, number, object):number} */
+        this.width = opts.width || ((side, sideValue, resolution, z, sidesScale) => Math.abs(sideValue) * Math.min(2 * z, resolution / 3))
+
+        /** 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, sidesScale) => resolution)
+
+        // the dark color: for side facing away from light (coming from NW)
+        this.colorDark = opts.colorDark || '#111'
+        // the bright color: for side facing the light (coming from NW)
+        this.colorBright = opts.colorBright || '#ddd'
+        //
+        this.revert = opts.revert == undefined? false : opts.revert
+
+        /** Set to A or true so that the side is drawn as a diamond */
+        this.diamond = opts.diamond
+
+        /* Determines what to do for limit sides, between a cell with value and one with no value
+        * steep: the cell value absence is equivalent to 0. It shows potentially a steep limit then.
+        * skip: no side is drawn
+        * step: a side with a 1 step */
+        this.limit = opts.limit || "steep"
+    }
+
+    /**
+     * @param {Array.<import("../core/Dataset.js").Cell>} cells
+     * @param {number} resolution
+     * @param {import("../core/GeoCanvas.js").GeoCanvas} geoCanvas
+     */
+    draw(cells, geoCanvas, resolution) {
+        //filter
+        if (this.filter) cells = cells.filter(this.filter)
+
+        //
+        const z = geoCanvas.view.z
+        const ctx = geoCanvas.offscreenCtx
+
+        //get cell classifier
+        const classifier = this.classifier(cells, resolution, z)
+
+        //get side value: class change difference
+        const getSideValue = (/** @type {{ c1: Side; c2: Side; }} */ side) => {
+            const cl1 = side.c1 ? classifier(side.c1) : undefined
+            const cl2 = side.c2 ? classifier(side.c2) : undefined
+            if (cl1 === undefined && cl2 === undefined) return undefined
+            if (cl1 === undefined) return this.limit=="none"? undefined : this.limit=="steep"? cl2 : Math.sign(cl2)
+            if (cl2 === undefined) return this.limit=="none"? undefined : this.limit=="steep"? -cl1 : Math.sign(-cl1)
+            return cl2 - cl1
+        }
+
+        //build sides
+        //TODO build only those with different codes ?
+        /**  @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
+        ctx.lineCap = 'butt'
+        const r2 = resolution * 0.5
+        const cd = this.revert? this.colorBright : this.colorDark
+        const cb = this.revert? this.colorDark : this.colorBright
+        for (let side of sides) {
+
+            //get side value
+            const v = getSideValue(side)
+            if (v === undefined || v === 0) continue
+
+            //color
+            /** @type {string|undefined} */
+            const col = ((v < 0 && side.or === 'h') || (v > 0 && side.or === 'v')) ? cb : cd
+            if (!col || col == 'none') continue
+
+            if (this.diamond) {
+                //set color
+                ctx.fillStyle = col
+
+                //draw diamond
+                const x = side.x,
+                    y = side.y
+                ctx.beginPath()
+                ctx.moveTo(x - r2, y)
+                ctx.lineTo(x, y + r2)
+                ctx.lineTo(x + r2, y)
+                ctx.lineTo(x, y - r2)
+                ctx.closePath()
+                ctx.fill()
+            } else {
+                //width
+                /** @type {number|undefined} */
+                const wG = this.width ? this.width(side, v, 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 width
+                ctx.lineWidth = wG
+                //set color
+                ctx.strokeStyle = col
+
+                //draw segment with correct orientation
+                const x = side.x,
+                    y = side.y
+                ctx.beginPath()
+                if (side.or === 'v') {
+                    ctx.moveTo(x, y - lG2)
+                    ctx.lineTo(x, y + lG2)
+                } else {
+                    ctx.moveTo(x - lG2, y)
+                    ctx.lineTo(x + lG2, y)
+                }
+                ctx.stroke()
+            }
+        }
+
+        //update legends
+        this.updateLegends({ style: this, resolution: resolution, z: z, viewScale: viewScale })
+    }
+
+}

package/src/style/{TanakaStyle.js → SideTanakaStyle___OLD.js}

@@ -1,9 +1,6 @@
 //@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
@@ -17,7 +14,7 @@ export class TanakaStyle {
      * @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>}
+     * @returns {Array.<import("../core/Style.js").Style>}
      */
     static get(value, breaks, colors, opts = {}) {
         //shadow colors

package/src/utils/scale.js

@@ -168,6 +168,7 @@ export const viewScaleCombination = (obj) => {
     }
 }
 
+
 /**
  * Return a classifier function from break values.
  * The classifier function returns the class id (from 0 to breaks.length) from a value to classifiy.
@@ -188,6 +189,20 @@ export function classifier(breaks) {
     return classifier
 }
 
+/**
+ * @param {number} min
+ * @param {number} max
+ * @param {number} nbClass
+ */
+export function classifierMinMax(min, max, nbClass) {
+    const breaks = []
+    const step = (max - min) / nbClass
+    for (let i = 1; i < nbClass; i++) breaks.push(min + i * step)
+    return classifier(breaks)
+}
+
+
+
 /**
  * Return a color classifier function from break values.
  * The classifier function returns the color from a value to classifiy.

package/src/style/ContourStyle.js

@@ -1,21 +0,0 @@
-//@ts-check
-'use strict'
-
-import { SideStyle } from './SideStyle.js'
-
-/** @typedef {{x:number,y:number,or:"v"|"h",value:number}} Side */
-
-/**
- *
- * @module style
- * @author Julien Gaffuri
- */
-export class ContourStyle extends SideStyle {
-    /** @param {object} opts */
-    constructor(opts) {
-        super(opts)
-        //opts = opts || {}
-
-        //TODO
-    }
-}