gridviz 2.0.28 → 2.0.29

package/src/utils/WebGLSquareColoringKS.js

@@ -0,0 +1,153 @@
+//@ts-check
+'use strict'
+
+import { initShaderProgram, createShader } from './webGLUtils'
+import { color } from 'd3-color'
+
+/**
+ * Everything to easily draw colored squares with webGL.
+ * All the same size, but different fill color.
+ * The color interpolation is computed in the fragment shader program, by the GPU, thus it is less flexible but faster.
+ */
+export class WebGLSquareColoringKS {
+    //see:
+    //https://webglfundamentals.org/
+    //https://webglfundamentals.org/webgl/lessons/fr/webgl-shaders-and-glsl.html#les-uniforms-dans-les-shaders-de-vertex
+    //https://thebookofshaders.com/glossary/?search=mix
+    //https://thebookofshaders.com/06/
+    //https://thebookofshaders.com/glossary/
+
+    /**
+     *
+     * @param {*} gl
+     * @param {Array.<String>} colors
+     * @param {{fun:string,alpha:number}} stretching
+     * @param {number} sizePix
+     */
+    constructor(gl, colors, stretching, sizePix = 10) {
+        /** @type {WebGLRenderingContext} */
+        this.gl = gl
+
+        /** @type {WebGLShader} */
+        const vShader = createShader(
+            gl,
+            gl.VERTEX_SHADER,
+            `
+        attribute vec2 pos;
+        uniform float sizePix;
+        uniform vec3 data[2];
+        uniform mat3 mat;
+
+        varying float vt;
+
+        void main() {
+
+            //one vertex for each screen pixels
+            //list of data as uniform
+            //compute smoothed t here from uniforms
+
+            //compute cell screen position
+            gl_Position = vec4(mat * vec3(pos, 1.0), 1.0);
+
+            //set pixel size - same for all
+            gl_PointSize = sizePix;
+
+            //pass the pixel value to the fragment as varying
+            vt = data[2];
+        }
+      `
+        )
+
+        //prepare fragment shader code
+        //declare the uniform and other variables
+        let fshString = `
+        precision mediump float;
+        varying float vt;
+        uniform float alpha;
+        uniform vec4 c0;
+        uniform vec4 c1;
+        uniform vec4 c2;
+        uniform vec4 c3;
+        uniform vec4 c4;
+        void main(void) {
+            if(vt == 0.0) return;
+            float t = 1.0 - (1.0 / alpha) * log(exp(alpha) * (1.0 - vt) + vt);
+            vec4 cI;
+            vec4 cF;
+            if(t<1.0/4.0) { cI=c0; cF=c1; t=t*4.0; }
+            else if(t<2.0/4.0) { cI=c1; cF=c2; t=4.0*t-1.0; }
+            else if(t<3.0/4.0) { cI=c2; cF=c3; t=4.0*t-2.0; }
+            else { cI=c3; cF=c4; t=4.0*t-3.0; }
+            gl_FragColor = mix(cI, cF, t);
+        }`
+
+        /** @type {WebGLShader} */
+        const fShader = createShader(gl, gl.FRAGMENT_SHADER, fshString)
+
+        /** @type {WebGLProgram} */
+        this.program = initShaderProgram(gl, vShader, fShader)
+        gl.useProgram(this.program)
+
+        //set uniforms
+
+        //sizePix
+        gl.uniform1f(gl.getUniformLocation(this.program, 'sizePix'), 1.0 * sizePix)
+
+        //stretching alpha factor
+        gl.uniform1f(gl.getUniformLocation(this.program, 'alpha'), stretching ? 1.0 * stretching.alpha : 0.0)
+
+        //colors
+        for (let i = 0; i < colors.length; i++) {
+            const c = color(colors[i])
+            gl.uniform4fv(gl.getUniformLocation(this.program, 'c' + i), [
+                +c.r / 255.0,
+                +c.g / 255.0,
+                +c.b / 255.0,
+                +c.opacity,
+            ])
+        }
+    }
+
+    /**  */
+    draw(verticesBuffer, data, transfoMat) {
+        const gl = this.gl
+        const program = this.program
+
+        //vertice data
+        gl.bindBuffer(gl.ARRAY_BUFFER, gl.createBuffer())
+        gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(verticesBuffer), gl.STATIC_DRAW)
+        const position = gl.getAttribLocation(program, 'pos')
+        gl.vertexAttribPointer(
+            position,
+            2, //numComponents
+            gl.FLOAT, //type
+            false, //normalise
+            0, //stride
+            0 //offset
+        )
+        gl.enableVertexAttribArray(position)
+
+        //t data
+        /*gl.bindBuffer(gl.ARRAY_BUFFER, gl.createBuffer());
+        gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(tBuffer), gl.STATIC_DRAW);
+        const t = gl.getAttribLocation(program, "t");
+        gl.vertexAttribPointer(t, 1, gl.FLOAT, false, 0, 0);
+        gl.enableVertexAttribArray(t);*/
+
+        //data
+        //gl.uniformMatrix3fv(gl.getUniformLocation(program, "mat"), false, new Float32Array(transfoMat));
+        gl.uniform3fv(gl.getUniformLocation(program, 'data'), 2, new Float32Array(data))
+
+        //transformation
+        gl.uniformMatrix3fv(gl.getUniformLocation(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);
+
+        gl.drawArrays(gl.POINTS, 0, verticesBuffer.length / 2)
+    }
+}

package/src/utils/stretching.js

@@ -0,0 +1,131 @@
+//@ts-check
+'use strict'
+
+/**
+ * Some function [0,1]->[0,1] to stretch range of values.
+ * @see https://github.com/eurostat/gridviz/blob/master/docs/reference.md#stretching
+ * @see https://observablehq.com/@jgaffuri/stretching
+ */
+
+/**
+ * Function [0,1]->[0,1] to stretch range of values.
+ * Polynomial
+ *
+ * @param {number} t The value to stretch, within [0,1]
+ * @param {number} alpha 1: no stretching. <1: show low values. >1: show high values.
+ * @returns {number} The stretched value, within [0,1]
+ */
+export const sPow = (t, alpha = 3) => Math.pow(t, alpha)
+
+/**
+ * Function [0,1]->[0,1] to stretch range of values.
+ * Polynomial (reverse)
+ *
+ * @param {number} t The value to stretch, within [0,1]
+ * @param {number} alpha 1: no stretching. <1: show low values. >1: show high values.
+ * @returns {number} The stretched value, within [0,1]
+ */
+export const sPowRev = (t, alpha = 3) => 1 - Math.pow(1 - t, 1 / alpha)
+
+/**
+ * Function [0,1]->[0,1] to stretch range of values.
+ * Exponential
+ *
+ * @param {number} t The value to stretch, within [0,1]
+ * @param {number} alpha 0: no stretching. -Inf: show low values. Inf: show high values.
+ * @returns {number} The stretched value, within [0,1]
+ */
+export const sExp = (t, alpha = 3) => (alpha == 0 ? t : (Math.exp(t * alpha) - 1) / (Math.exp(alpha) - 1))
+
+/**
+ * Function [0,1]->[0,1] to stretch range of values.
+ * Exponential (reverse)
+ *
+ * @param {number} t The value to stretch, within [0,1]
+ * @param {number} alpha 0: no stretching. -Inf: show low values. Inf: show high values.
+ * @returns {number} The stretched value, within [0,1]
+ */
+export const sExpRev = (t, alpha = 3) =>
+    alpha == 0 ? t : 1 - (1 / alpha) * Math.log(Math.exp(alpha) * (1 - t) + t)
+
+/**
+ * Function [0,1]->[0,1] to stretch range of values.
+ * Circle, show low values
+ * NB: sCircleHigh and sCircleLow are inverse functions of each other.
+ *
+ * @param {number} t The value to stretch, within [0,1]
+ * @param {number} alpha 0: no stretching. 1: perfect circle section
+ * @returns {number} The stretched value, within [0,1]
+ */
+export const sCircleLow = (t, alpha = 0.8) => {
+    if (alpha == 0) return t
+    if (alpha == 1) return Math.sqrt(t * (2 - t))
+    const a = alpha / (1 - alpha)
+    return Math.sqrt(1 / (a * a) + t * (2 / a + 2 - t)) - 1 / a
+}
+
+/**
+ * Function [0,1]->[0,1] to stretch range of values.
+ * Circle, show high values
+ * NB: sCircleHigh and sCircleLow are inverse functions of each other.
+ *
+ * @param {number} t The value to stretch, within [0,1]
+ * @param {number} alpha 0: no stretching. 1: perfect circle section
+ * @returns {number} The stretched value, within [0,1]
+ */
+export const sCircleHigh = (t, alpha = 0.8) => 1 - sCircleLow(1 - t, alpha)
+
+/**
+ * Inverse functions
+ */
+
+/**
+ * Inverse function of sExp
+ * @param {number} y
+ * @param {number} alpha
+ * @returns {number}
+ */
+export const sExpInverse = (y, alpha = 3) =>
+    alpha == 0 ? y : (1 / alpha) * Math.log(1 - y + y * Math.exp(alpha))
+
+/**
+ * Inverse function of sExpRev
+ * @param {number} y
+ * @param {number} alpha
+ * @returns {number}
+ */
+export const sExpRevInverse = (y, alpha = 3) => (Math.exp(-alpha * y) - 1) / (Math.exp(-alpha) - 1)
+
+/**
+ * Inverse function of sPow
+ * @param {number} y
+ * @param {number} alpha
+ * @returns {number}
+ */
+
+export const sPowInverse = (y, alpha = 3) => Math.pow(y, 1 / alpha)
+
+/**
+ * Inverse function of sPowRev
+ * @param {number} y
+ * @param {number} alpha
+ * @returns {number}
+ */
+export const sPowRevInverse = (y, alpha = 3) => 1 - Math.pow(1 - y, alpha)
+
+//test code
+/*
+for (let i = 0; i <= 1; i += 0.001) {
+  //const v = gviz.sExp(gviz.sExpInverse(i));
+  //const v = gviz.sExpInverse(gviz.sExp(i));
+  //const v = gviz.sExpRev(gviz.sExpRevInverse(i));
+  //const v = gviz.sExpRevInverse(gviz.sExpRev(i));
+  //const v = gviz.sPow(gviz.sPowInverse(i));
+  //const v = gviz.sPowInverse(gviz.sPow(i));
+  //const v = gviz.sPowRev(gviz.sPowRevInverse(i));
+  //const v = gviz.sPowRevInverse(gviz.sPowRev(i));
+  //const v = gviz.sCircleLow(gviz.sCircleHigh(i));
+  //const v = gviz.sCircleHigh(gviz.sCircleLow(i));
+  console.log(i - v)
+}
+*/

package/src/utils/webGLUtils.js

@@ -0,0 +1,71 @@
+//@ts-check
+'use strict'
+
+/**
+ * @param {string} width
+ * @param {string} height
+ * @param {object} opts
+ * @returns {{canvas:HTMLCanvasElement, gl:WebGLRenderingContext}}
+ */
+export function makeWebGLCanvas(width, height, opts) {
+    const canvas = document.createElement('canvas')
+    canvas.setAttribute('width', width)
+    canvas.setAttribute('height', height)
+    const gl = canvas.getContext('webgl', opts)
+    if (!gl) {
+        throw new Error('Unable to initialize WebGL. Your browser or machine may not support it.')
+    }
+    return { canvas: canvas, gl: gl }
+}
+
+/**
+ * Initialize a shader program, so WebGL knows how to draw our data
+ *
+ * @param {WebGLRenderingContext} gl
+ * @param  {...WebGLShader} shaders
+ * @returns {WebGLProgram}
+ */
+export function initShaderProgram(gl, ...shaders) {
+    /** @type {WebGLProgram|null} */
+    const program = gl.createProgram()
+    if (program == null) throw new Error('Cannot create webGL program')
+    for (const shader of shaders) gl.attachShader(program, shader)
+    gl.linkProgram(program)
+    if (gl.getProgramParameter(program, gl.LINK_STATUS)) return program
+    throw new Error(gl.getProgramInfoLog(program) || 'Cannot create webGL program (2)')
+}
+
+/**
+ * Creates a shader of the given type, uploads the source and compiles it.
+ *
+ * @param {WebGLRenderingContext} gl
+ * @param {number} type
+ * @param  {...string} sources
+ * @returns {WebGLShader}
+ */
+export function createShader(gl, type, ...sources) {
+    /** @type {WebGLShader|null} */
+    const shader = gl.createShader(type)
+    if (shader == null) throw new Error('Cannot create webGL shader')
+    gl.shaderSource(shader, sources.join('\n'))
+    gl.compileShader(shader)
+    if (gl.getShaderParameter(shader, gl.COMPILE_STATUS)) return shader
+    throw new Error(gl.getShaderInfoLog(shader) || 'Cannot create webGL shader (2)')
+}
+
+/**
+ * Check if webGL is supported
+ *
+ * @returns {boolean}
+ */
+export function checkWebGLSupport() {
+    try {
+        const canvas = document.createElement('canvas')
+        return !!window.WebGLRenderingContext &&
+            (canvas.getContext('webgl') || canvas.getContext('experimental-webgl'))
+            ? true
+            : false
+    } catch (err) {
+        return false
+    }
+}

package/src/utils/zoomUtils.js

@@ -0,0 +1,142 @@
+//@ts-check
+'use strict'
+
+/**
+ *
+ * @param {import("../App").App} app
+ * @param {number} zfTarget
+ * @param {number} factor
+ * @param {number} delayMs
+ * @param {function|undefined} callback
+ * @param {number} delayBeforeCallBackMs
+ * @returns
+ */
+export function zoomTo(
+    app,
+    zfTarget,
+    factor = 1.01,
+    delayMs = 0,
+    callback = undefined,
+    delayBeforeCallBackMs = 0
+) {
+    //ensure good factor value: >1
+    factor = factor || 1.01
+    if (factor < 1) {
+        console.error('Unexpected value for factor: ' + factor + '. Set to default value 1.01')
+        factor = 1.01
+    }
+
+    const zfIni = app.getZoomFactor()
+    if (zfTarget == zfIni) return
+    if (zfTarget < zfIni) factor = 1 / factor
+    let zf = zfIni
+    let timer = setInterval(() => {
+        //compute new zoom level
+        zf = app.getZoomFactor() * factor
+        if (zfTarget > zfIni && zf > zfTarget) zf = zfTarget
+        if (zfTarget < zfIni && zf < zfTarget) zf = zfTarget
+
+        //set new zoom level
+        app.setZoomFactor(zf)
+        app.redraw()
+
+        //target reached
+        if (zf == zfTarget) {
+            clearInterval(timer)
+            //trigger callback, if any
+            if (callback)
+                setTimeout(() => {
+                    callback()
+                }, delayBeforeCallBackMs)
+        }
+    }, delayMs)
+    return timer
+}
+
+/**
+ *
+ * @param {import("../App").App} app
+ * @param {number} xTarget
+ * @param {number} yTarget
+ * @param {number} zfTarget
+ * @param {number} progressFactorPix
+ * @param {number} delayMs
+ * @param {function|undefined} callback
+ * @param {number} delayBeforeCallBackMs
+ * @returns
+ */
+export function goToStraight(
+    app,
+    xTarget = NaN,
+    yTarget = NaN,
+    zfTarget = NaN,
+    progressFactorPix = 5,
+    delayMs = 0,
+    callback = undefined,
+    delayBeforeCallBackMs = 0
+) {
+    //store initial position/zoom
+    const zfIni = app.getZoomFactor()
+    const cIni = app.getGeoCenter()
+
+    //default
+    xTarget = isNaN(xTarget) ? cIni.x : xTarget
+    yTarget = isNaN(yTarget) ? cIni.y : yTarget
+    zfTarget = isNaN(zfTarget) ? zfIni : zfTarget
+
+    //prepare for pan
+    const dx = xTarget - cIni.x
+    const dy = yTarget - cIni.y
+    let d = Math.hypot(dx, dy)
+    const ddx = (progressFactorPix * zfIni * dx) / d
+    const ddy = (progressFactorPix * zfIni * dy) / d
+
+    //prepare for zoom
+    let r = zfTarget / zfIni
+    const n = d / (progressFactorPix * zfIni)
+    const zoomFactor = d > 0 ? Math.pow(r, 1 / n) : Math.pow(r, 1 / 10) //TODO not 10 ?
+
+    //timer
+    let timer = setInterval(() => {
+        //compute and set new position
+        if (d > 0) {
+            const c = app.getGeoCenter()
+            let nx = c.x + ddx
+            let ny = c.y + ddy
+            //if went too far, stop at target values
+            if (nx < xTarget && xTarget < c.x) nx = xTarget
+            if (c.x < xTarget && xTarget < nx) nx = xTarget
+            if (ny < yTarget && yTarget < c.y) ny = yTarget
+            if (c.y < yTarget && yTarget < ny) ny = yTarget
+            app.setGeoCenter({ x: nx, y: ny })
+            if (nx == xTarget && ny == yTarget) d = 0
+        }
+
+        //compute and set new zoom
+        if (r != 1) {
+            const zf = app.getZoomFactor()
+            let nzf = zoomFactor * zf
+            //if went too far, stop at target values
+            if (nzf < zfTarget && zfTarget < zf) nzf = zfTarget
+            if (zf < zfTarget && zfTarget < nzf) nzf = zfTarget
+            app.setZoomFactor(nzf)
+            if (nzf == zfTarget) r = 1
+        }
+
+        //redraw
+        app.redraw()
+
+        //if target reached, stop
+        if (d == 0 && r == 1) {
+            //console.log("OK !")
+            clearInterval(timer)
+            //trigger callback, if any
+            if (callback)
+                setTimeout(() => {
+                    callback()
+                }, delayBeforeCallBackMs)
+        }
+    }, delayMs)
+
+    return timer
+}