gridviz 2.1.16 → 3.0.0

package/src/utils/stretching.js

@@ -2,171 +2,128 @@
 'use strict'
 
 
+//TODO invert for circular
+//TODO use Math.sqrt
+//TODO validate
+
+
 /**
  * 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
  */
 
+//identity function
+const identity = t => t
+identity.invert = identity
 
-export const powerScale = (exponent = 3) => t => Math.pow(t, exponent)
-export const powerInverseScale = (exponent = 3) => t => 1 - Math.pow(1 - t, 1 / exponent)
+
+/**
+ * @param {number} base 
+ * @returns {function(number):number}
+ */
 export const exponentialScale = (base = 3) => {
-    if (base == 0) return t => t
+    if (base == 0) return identity
     const a = (Math.exp(base) - 1)
-    return t => (Math.exp(t * base) - 1) / a
-}
-export const logarithmicScale = (base = 3) => {
-    if (base == 0) return t => t
-    return t => 1 - (1 / base) * Math.log(Math.exp(base) * (1 - t) + t)
+    const f = t => (Math.exp(t * base) - 1) / a
+    f.invert = t => Math.log(a * t + 1) / base
+    return f
 }
 
-export const circularScale = (alpha = 0.8) => {
-    if (alpha == 0) return t => t
-    if (alpha == 1) return t => Math.sqrt(t * (2 - t))
-    else {
-        const a = alpha / (1 - alpha)
-        return t => Math.sqrt(1 / (a * a) + t * (2 / a + 2 - t)) - 1 / a
-    }
-}
-export const circularInverseScale = (alpha = 0.8) => {
-    const f = circularScale(alpha)
-    return t => 1 - f(1 - t)
+/**
+ * @param {number} base 
+ * @returns {function(number):number}
+ */
+export const logarithmicScale = (base = 3) => {
+    if (base == 0) return identity
+    const a = Math.exp(base), b = 1 - a
+    const f = t => 1 - Math.log(a + t * b) / base
+    f.invert = t => (Math.exp((1 - t) * base) - a) / b
+    return f
 }
 
 
 
 
 
-
-
-
-// deprecated
-
-
-/**
- * Function [0,1]->[0,1] to stretch range of values.
- * Polynomial
- *
- * @param {number} t The value to stretch, within [0,1]
- * @param {number} exponent 1: no stretching. <1: show low values. >1: show high values.
- * @returns {number} The stretched value, within [0,1]
- */
-export const sPow = (t, exponent = 3) => Math.pow(t, exponent)
-
-/**
- * Function [0,1]->[0,1] to stretch range of values.
- * Polynomial (reverse)
- *
- * @param {number} t The value to stretch, within [0,1]
- * @param {number} exponent 1: no stretching. <1: show low values. >1: show high values.
- * @returns {number} The stretched value, within [0,1]
- */
-export const sPowRev = (t, exponent = 3) => 1 - Math.pow(1 - t, 1 / exponent)
-
-/**
- * Function [0,1]->[0,1] to stretch range of values.
- * Exponential
- *
- * @param {number} t The value to stretch, within [0,1]
- * @param {number} base 0: no stretching. -Inf: show low values. Inf: show high values.
- * @returns {number} The stretched value, within [0,1]
- */
-export const sExp = (t, base = 3) => (base == 0 ? t : (Math.exp(t * base) - 1) / (Math.exp(base) - 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} base 0: no stretching. -Inf: show low values. Inf: show high values.
- * @returns {number} The stretched value, within [0,1]
+ * @param {number} exponent 
+ * @returns {function(number):number}
  */
-export const sExpRev = (t, base = 3) =>
-    base == 0 ? t : 1 - (1 / base) * Math.log(Math.exp(base) * (1 - t) + t)
+export const powerScale = (exponent = 3) => {
+    if (exponent == 1) return identity
+    //TODO if (exponent == 0.5) return Math.sqrt
+    const f = t => Math.pow(t, exponent)
+    const a = 1 / exponent
+    f.invert = t => Math.pow(t, a)
+    return f
+}
 
 /**
- * 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]
+ * @param {number} exponent 
+ * @returns {function(number):number}
  */
-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
+export const powerInverseScale = (exponent = 3) => {
+    if (exponent == 1) return identity
+    //TODO if (exponent == 2) return t => 1 - Math.sqrt(1 - t)
+    const a = 1 / exponent
+    const f = t => 1 - Math.pow(1 - t, a)
+    f.invert = t => 1 - Math.pow(1 - t, exponent)
+    return f
 }
 
-/**
- * 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} base
- * @returns {number}
- */
-export const sExpInverse = (y, base = 3) =>
-    base == 0 ? y : (1 / base) * Math.log(1 - y + y * Math.exp(base))
 
 /**
- * Inverse function of sExpRev
- * @param {number} y
- * @param {number} base
- * @returns {number}
+ * @param {number} circularity 
+ * @returns {function(number):number}
  */
-export const sExpRevInverse = (y, base = 3) => (Math.exp(-base * y) - 1) / (Math.exp(-base) - 1)
+export const circularScale = (circularity = 0.8) => {
+    if (circularity == 0) return identity
+    if (circularity == 1) return t => Math.sqrt(t * (2 - t))
+    else {
+        const a = circularity / (1 - circularity)
+        return t => Math.sqrt(1 / (a * a) + t * (2 / a + 2 - t)) - 1 / a
+    }
+}
 
 /**
- * Inverse function of sPow
- * @param {number} y
- * @param {number} exponent
- * @returns {number}
+ * @param {number} circularity 
+ * @returns {function(number):number}
  */
-
-export const sPowInverse = (y, exponent = 3) => Math.pow(y, 1 / exponent)
-
+export const circularInverseScale = (circularity = 0.8) => {
+    if (circularity == 0) return identity
+    const f = circularScale(circularity)
+    return t => 1 - f(1 - t)
+}
 
 
 
 
-/**
- * Inverse function of sPowRev
- * @param {number} y
- * @param {number} exponent
- * @returns {number}
- */
-export const sPowRevInverse = (y, exponent = 3) => 1 - Math.pow(1 - y, exponent)
 
-//test code
+//test
 /*
-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)
+const test = (f, fun, a, err = 1e-12) => {
+    for (let t = 0; t <= 1; t += 1 / 50) {
+        const er = t - f.invert(f(t))
+        if (Math.abs(er) < err) continue
+        console.log(fun, a, er)
+    }
 }
-*/
+
+for (let fun of [powerScale, powerInverseScale])
+    for (let exp = -30; exp <= 50; exp += 1) {
+        if (exp == 0) continue
+        const f = fun(exp)
+        test(f, fun, exp)
+    }
+
+
+for (let fun of [exponentialScale, logarithmicScale])
+    for (let base = -20; base <= 20; base += 1) {
+        //if (exp == 0) continue
+        const f = fun(base)
+        test(f, fun, base, 1e-10)
+    }
+*/

package/src/utils/{Utils.js → utils.js}

@@ -7,6 +7,7 @@
  * @param {number} v the value
  * @param {Array.<number>} breaks the breaks
  * @returns The class id, from 0 to breaks.length
+ * @deprecated use getClassifier instead
  */
 export function getClass(v, breaks) {
     if (!breaks) return
@@ -16,6 +17,20 @@ export function getClass(v, breaks) {
     return breaks.length
 }
 
+
+
+//take 'nice' value (power of ten, or multiple)
+export function nice(v, multiples = [8, 6, 5, 4, 2.5, 2]) {
+    //compute bigger power of ten below
+    const v_ = Math.pow(10, Math.floor(Math.log10(v)))
+    for (let multiple of multiples)
+        if (v_ * multiple <= v) return v_ * multiple
+    return v_
+}
+
+
+
+
 export let monitor = false
 
 let previousDate

package/src/utils/webGLUtils.js

@@ -7,10 +7,11 @@
  * @param {object} opts
  * @returns {{canvas:HTMLCanvasElement, gl:WebGLRenderingContext}}
  */
-export function makeWebGLCanvas(width, height, opts) {
+export function makeWebGLCanvas(width, height, opts={}) {
     const canvas = document.createElement('canvas')
     canvas.setAttribute('width', width)
     canvas.setAttribute('height', height)
+    /** @type {WebGLRenderingContext} */
     const gl = canvas.getContext('webgl', opts)
     if (!gl) {
         throw new Error('Unable to initialize WebGL. Your browser or machine may not support it.')
@@ -61,10 +62,8 @@ export function createShader(gl, type, ...sources) {
 export function checkWebGLSupport() {
     try {
         const canvas = document.createElement('canvas')
-        return !!window.WebGLRenderingContext &&
-            (canvas.getContext('webgl') || canvas.getContext('experimental-webgl'))
-            ? true
-            : false
+        return !!(!!window.WebGLRenderingContext &&
+            (canvas.getContext('webgl') || canvas.getContext('experimental-webgl')))
     } catch (err) {
         return false
     }

package/src/utils/zoomUtils.js

@@ -4,7 +4,7 @@
 /**
  *
  * @param {import("../App").App} app
- * @param {number} zfTarget
+ * @param {number} zTarget
  * @param {number} factor
  * @param {number} delayMs
  * @param {function|undefined} callback
@@ -13,7 +13,7 @@
  */
 export function zoomTo(
     app,
-    zfTarget,
+    zTarget,
     factor = 1.01,
     delayMs = 0,
     callback = undefined,
@@ -26,22 +26,22 @@ export function zoomTo(
         factor = 1.01
     }
 
-    const zfIni = app.getZoomFactor()
-    if (zfTarget == zfIni) return
-    if (zfTarget < zfIni) factor = 1 / factor
-    let zf = zfIni
+    const zIni = map.getZoom()
+    if (zTarget == zIni) return
+    if (zTarget < zIni) factor = 1 / factor
+    let z = zIni
     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
+        z = map.getZoom() * factor
+        if (zTarget > zIni && z > zTarget) z = zTarget
+        if (zTarget < zIni && z < zTarget) z = zTarget
 
         //set new zoom level
-        app.setZoomFactor(zf)
-        app.redraw()
+        map.setZoom(z)
+        map.redraw()
 
         //target reached
-        if (zf == zfTarget) {
+        if (z == zTarget) {
             clearInterval(timer)
             //trigger callback, if any
             if (callback)
@@ -58,7 +58,7 @@ export function zoomTo(
  * @param {import("../App").App} app
  * @param {number} xTarget
  * @param {number} yTarget
- * @param {number} zfTarget
+ * @param {number} zTarget
  * @param {number} progressFactorPix
  * @param {number} delayMs
  * @param {function|undefined} callback
@@ -69,38 +69,38 @@ export function goToStraight(
     app,
     xTarget = NaN,
     yTarget = NaN,
-    zfTarget = NaN,
+    zTarget = NaN,
     progressFactorPix = 5,
     delayMs = 0,
     callback = undefined,
     delayBeforeCallBackMs = 0
 ) {
     //store initial position/zoom
-    const zfIni = app.getZoomFactor()
-    const cIni = app.getGeoCenter()
+    const zIni = map.getZoom()
+    const cIni = map.getView()
 
     //default
     xTarget = isNaN(xTarget) ? cIni.x : xTarget
     yTarget = isNaN(yTarget) ? cIni.y : yTarget
-    zfTarget = isNaN(zfTarget) ? zfIni : zfTarget
+    zTarget = isNaN(zTarget) ? zIni : zTarget
 
     //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
+    const ddx = (progressFactorPix * zIni * dx) / d
+    const ddy = (progressFactorPix * zIni * dy) / d
 
     //prepare for zoom
-    let r = zfTarget / zfIni
-    const n = d / (progressFactorPix * zfIni)
+    let r = zTarget / zIni
+    const n = d / (progressFactorPix * zIni)
     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()
+            const c = map.getView()
             let nx = c.x + ddx
             let ny = c.y + ddy
             //if went too far, stop at target values
@@ -108,23 +108,23 @@ export function goToStraight(
             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 })
+            map.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
+            const z = map.getZoom()
+            let nz = zoomFactor * z
             //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
+            if (nz < zTarget && zTarget < z) nz = zTarget
+            if (z < zTarget && zTarget < nz) nz = zTarget
+            map.setZoom(nz)
+            if (nz == zTarget) r = 1
         }
 
         //redraw
-        app.redraw()
+        map.redraw()
 
         //if target reached, stop
         if (d == 0 && r == 1) {