gridviz 3.0.19 → 3.0.21

package/src/style/SquareColorWebGLStyle.js

@@ -1,126 +1,126 @@
-//@ts-check
-'use strict'
-
-import { Style } from '../core/Style.js'
-import { makeWebGLCanvas } from '../utils/webGLUtils.js'
-import { WebGLSquareColoringAdvanced } from '../utils/WebGLSquareColoringAdvanced.js'
-
-/**
- * Style based on webGL
- * To show cells as colored squares, with computation of the colors on GPU side (faster than JavaScript side).
- * Alls squares with the same size
- *
- * @module style
- * @author Julien Gaffuri
- */
-export class SquareColorWebGLStyle extends Style {
-    /** @param {object} opts */
-    constructor(opts) {
-        super(opts)
-        opts = opts || {}
-
-        /**
-         * 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.
-         * The stretching is performed on GPU side (fragment shader).
-         * @type {{ fun:string, alpha:number }} */
-        this.stretching = opts.stretching
-
-        /**
-         * The sample of the color ramp.
-         * The color is computed on GPU side (fragment shader) based on those values (linear interpolation).
-         * @type {Array.<string>} */
-        this.colors =
-            opts.colors ||
-            [
-                'rgb(158, 1, 66)',
-                'rgb(248, 142, 83)',
-                'rgb(251, 248, 176)',
-                'rgb(137, 207, 165)',
-                'rgb(94, 79, 162)',
-            ].reverse()
-        if (opts.color)
-            this.colors = [
-                opts.color(0),
-                opts.color(0.2),
-                opts.color(0.4),
-                opts.color(0.6),
-                opts.color(0.8),
-                opts.color(1),
-            ]
-
-        /**
-         * 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,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, z) => ...
-    }
-
-    /**
-     * @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
-
-        //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(
-            geoCanvas.w + '',
-            geoCanvas.h + '',
-            this.opacity != undefined ? { premultipliedAlpha: false } : undefined
-        )
-        if (!cvWGL) {
-            console.error('No webGL')
-            return
-        }
-
-        //add vertice and fragment data
-        const r2 = resolution / 2
-        const verticesBuffer = []
-        const tBuffer = []
-        for (let cell of cells) {
-            const t = this.tFun(cell, resolution, z, viewScale)
-            if (t == null || t == undefined) continue
-            verticesBuffer.push(cell.x + r2, cell.y + r2)
-            tBuffer.push(t > 1 ? 1 : t < 0 ? 0 : t)
-        }
-
-        //compute pixel size
-        const sizeGeo = this.size ? this.size(resolution, z) : resolution + 0.2 * z
-
-        //compute opacity
-        const op = this.opacity ? this.opacity(resolution, z) : undefined
-
-        //
-        const wgp = new WebGLSquareColoringAdvanced(cvWGL.gl, this.colors, this.stretching, sizeGeo / z, op)
-
-        //draw
-        wgp.draw(verticesBuffer, tBuffer, geoCanvas.getWebGLTransform())
-
-        // draw in canvas geo
-        // NOTE: drawing each tile this way is very inefficient. WebGL is best used with fewer, heavier/larger draw calls.
-        geoCanvas.initCanvasTransform()
-        geoCanvas.offscreenCtx.drawImage(cvWGL.canvas, 0, 0)
-
-        //update legends
-        this.updateLegends({ style: this, resolution: resolution, z: z, viewScale: viewScale })
-    }
-}
+//@ts-check
+'use strict'
+
+import { Style } from '../core/Style.js'
+import { makeWebGLCanvas } from '../utils/webGLUtils.js'
+import { WebGLSquareColoringAdvanced } from '../utils/WebGLSquareColoringAdvanced.js'
+
+/**
+ * Style based on webGL
+ * To show cells as colored squares, with computation of the colors on GPU side (faster than JavaScript side).
+ * Alls squares with the same size
+ *
+ * @module style
+ * @author Julien Gaffuri
+ */
+export class SquareColorWebGLStyle extends Style {
+    /** @param {object} opts */
+    constructor(opts) {
+        super(opts)
+        opts = opts || {}
+
+        /**
+         * 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.
+         * The stretching is performed on GPU side (fragment shader).
+         * @type {{ fun:string, alpha:number }} */
+        this.stretching = opts.stretching
+
+        /**
+         * The sample of the color ramp.
+         * The color is computed on GPU side (fragment shader) based on those values (linear interpolation).
+         * @type {Array.<string>} */
+        this.colors =
+            opts.colors ||
+            [
+                'rgb(158, 1, 66)',
+                'rgb(248, 142, 83)',
+                'rgb(251, 248, 176)',
+                'rgb(137, 207, 165)',
+                'rgb(94, 79, 162)',
+            ].reverse()
+        if (opts.color)
+            this.colors = [
+                opts.color(0),
+                opts.color(0.2),
+                opts.color(0.4),
+                opts.color(0.6),
+                opts.color(0.8),
+                opts.color(1),
+            ]
+
+        /**
+         * 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,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, z) => ...
+    }
+
+    /**
+     * @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
+
+        //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(
+            geoCanvas.w + '',
+            geoCanvas.h + '',
+            this.opacity != undefined ? { premultipliedAlpha: false } : undefined
+        )
+        if (!cvWGL) {
+            console.error('No webGL')
+            return
+        }
+
+        //add vertice and fragment data
+        const r2 = resolution / 2
+        const verticesBuffer = []
+        const tBuffer = []
+        for (let cell of cells) {
+            const t = this.tFun(cell, resolution, z, viewScale)
+            if (t == null || t == undefined) continue
+            verticesBuffer.push(cell.x + r2, cell.y + r2)
+            tBuffer.push(t > 1 ? 1 : t < 0 ? 0 : t)
+        }
+
+        //compute pixel size
+        const sizeGeo = this.size ? this.size(resolution, z) : resolution + 0.2 * z
+
+        //compute opacity
+        const op = this.opacity ? this.opacity(resolution, z) : undefined
+
+        //
+        const wgp = new WebGLSquareColoringAdvanced(cvWGL.gl, this.colors, this.stretching, sizeGeo / z, op)
+
+        //draw
+        wgp.draw(verticesBuffer, tBuffer, geoCanvas.getWebGLTransform())
+
+        // draw in canvas geo
+        // NOTE: drawing each tile this way is very inefficient. WebGL is best used with fewer, heavier/larger draw calls.
+        geoCanvas.initCanvasTransform()
+        geoCanvas.offscreenCtx.drawImage(cvWGL.canvas, 0, 0)
+
+        //update legends
+        this.updateLegends({ style: this, resolution: resolution, z: z, viewScale: viewScale })
+    }
+}

package/src/style/StrokeStyle.js

@@ -1,135 +1,135 @@
-//@ts-check
-'use strict'
-
-import { Style } from '../core/Style.js'
-
-/**
- * @module style
- * @author Julien Gaffuri
- */
-export class StrokeStyle 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.strokeColor = opts.strokeColor || (() => '#666') //(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) => {}
-
-        /** The stroke line width in geographical unit.
-         * @type {function(import('../core/Dataset.js').Cell,number,number,object):number} */
-        this.strokeWidth = opts.strokeWidth || ((cell, resolution, z) => z * 1.5) //(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 size.
-     *
-     * @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
-
-        const r2 = resolution * 0.5
-        for (let c of cells) {
-            //color
-            const col = this.strokeColor ? this.strokeColor(c, resolution, z, viewScale) : undefined
-            if (!col || col === 'none') continue
-            ctx.strokeStyle = col
-
-            //size - in geo unit
-            const size = this.size ? this.size(c, resolution, z, viewScale) : resolution
-
-            //width
-            const wi = this.strokeWidth ? this.strokeWidth(c, resolution, z, viewScale) : 1 * z
-            if (!wi || wi <= 0) continue
-            ctx.lineWidth = wi
-
-            //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)
-
-            if (shape === 'square') {
-                //draw square
-                const d = resolution * (1 - size / resolution) * 0.5
-                ctx.beginPath()
-                ctx.rect(c.x + d + offset.dx, c.y + d + offset.dy, size, size)
-                ctx.stroke()
-            } 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.stroke()
-            } 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.lineTo(c.x + r2 - s2, c.y + r2)
-                ctx.stroke()
-            } else if (shape === 'donut') {
-                console.error('Not implemented')
-            } 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.closePath()
-                ctx.stroke()
-            } 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.closePath()
-                ctx.stroke()
-            } 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.closePath()
-                ctx.stroke()
-            } 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.closePath()
-                ctx.stroke()
-            } else {
-                throw new Error('Unexpected shape:' + shape)
-            }
-        }
-
-        //update legends
-        this.updateLegends({ style: this, resolution: resolution, z: z, viewScale: viewScale })
-    }
-}
+//@ts-check
+'use strict'
+
+import { Style } from '../core/Style.js'
+
+/**
+ * @module style
+ * @author Julien Gaffuri
+ */
+export class StrokeStyle 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.strokeColor = opts.strokeColor || (() => '#666') //(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) => {}
+
+        /** The stroke line width in geographical unit.
+         * @type {function(import('../core/Dataset.js').Cell,number,number,object):number} */
+        this.strokeWidth = opts.strokeWidth || ((cell, resolution, z) => z * 1.5) //(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 size.
+     *
+     * @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
+
+        const r2 = resolution * 0.5
+        for (let c of cells) {
+            //color
+            const col = this.strokeColor ? this.strokeColor(c, resolution, z, viewScale) : undefined
+            if (!col || col === 'none') continue
+            ctx.strokeStyle = col
+
+            //size - in geo unit
+            const size = this.size ? this.size(c, resolution, z, viewScale) : resolution
+
+            //width
+            const wi = this.strokeWidth ? this.strokeWidth(c, resolution, z, viewScale) : 1 * z
+            if (!wi || wi <= 0) continue
+            ctx.lineWidth = wi
+
+            //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)
+
+            if (shape === 'square') {
+                //draw square
+                const d = resolution * (1 - size / resolution) * 0.5
+                ctx.beginPath()
+                ctx.rect(c.x + d + offset.dx, c.y + d + offset.dy, size, size)
+                ctx.stroke()
+            } 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.stroke()
+            } 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.lineTo(c.x + r2 - s2, c.y + r2)
+                ctx.stroke()
+            } else if (shape === 'donut') {
+                console.error('Not implemented')
+            } 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.closePath()
+                ctx.stroke()
+            } 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.closePath()
+                ctx.stroke()
+            } 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.closePath()
+                ctx.stroke()
+            } 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.closePath()
+                ctx.stroke()
+            } else {
+                throw new Error('Unexpected shape:' + shape)
+            }
+        }
+
+        //update legends
+        this.updateLegends({ style: this, resolution: resolution, z: z, viewScale: viewScale })
+    }
+}

package/src/style/TanakaStyle.js

@@ -1,69 +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]
+    }
+}