gridviz 2.0.49 → 2.0.51

package/package.json

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

package/src/App.js

@@ -111,8 +111,8 @@ export class App {
                 if (strong) dsc.updateViewCache(this.cg.extGeo)
 
                 //set layer alpha and blend mode
-                this.cg.ctx.globalAlpha = layer.alpha === undefined ? 1 : layer.alpha
-                this.cg.ctx.globalCompositeOperation = layer.blendOperation
+                this.cg.ctx.globalAlpha = layer.alpha ? layer.alpha(zf) : 1.0
+                this.cg.ctx.globalCompositeOperation = layer.blendOperation(zf)
 
                 //draw cells, style by style
                 if (strong)
@@ -124,14 +124,14 @@ export class App {
 
                         //set style alpha and blend mode
                         //TODO: multiply by layer alpha ?
-                        this.cg.ctx.globalAlpha = s.alpha === undefined ? 1 : s.alpha
-                        this.cg.ctx.globalCompositeOperation = s.blendOperation
+                        this.cg.ctx.globalAlpha = s.alpha ? s.alpha(zf) : 1.0
+                        this.cg.ctx.globalCompositeOperation = s.blendOperation(zf)
 
                         s.draw(dsc.getViewCache(), dsc.getResolution(), this.cg)
                     }
 
                 //add legend element
-                if (this.legend && strong)
+                if (this.legend && strong) {
                     for (const s of layer.styles) {
                         if (zf > s.maxZoom) continue
                         if (zf < s.minZoom) continue
@@ -157,6 +157,11 @@ export class App {
                             }
                         }
                     }
+                }
+
+                //restore default alpha and blend operation
+                this.cg.ctx.globalAlpha = 1.0
+                this.cg.ctx.globalCompositeOperation = "normal"
             }
 
             //draw boundary layer

package/src/Layer.js

@@ -25,15 +25,16 @@ export class Layer {
          * @type {boolean} */
         this.visible = opts.visible === false ? false : true
 
-        /** The alpha of the layer, between 0.0 (fully transparent) and 1.0 (fully opaque).
+        /** A function returning the alpha (transparency/opacity), between 0.0 (fully transparent) and 1.0 (fully opaque).
+         *  The function parameter is the zoom factor.
          * (see CanvasRenderingContext2D: globalAlpha property)
-         * @type {number|undefined} */
+         * @type {function(number):number|undefined} */
         this.alpha = opts.alpha
 
-        /** The blend operation
+        /** A function returning the blend operation. The function parameter is the zoom factor.
          * (see CanvasRenderingContext2D: globalCompositeOperation property)
          * @type {GlobalCompositeOperation} */
-        this.blendOperation = opts.blendOperation || 'normal'
+        this.blendOperation = opts.blendOperation || (zf => 'normal')
 
         /** The minimum zoom factor: Below this level, the layer is not shown.
          * @type {number} */

package/src/Style.js

@@ -17,7 +17,7 @@
 export class Style {
     /**
      * @abstract
-     * @param {{filter?:function(import('./Dataset').Cell):boolean,offset?:function(import('./Dataset').Cell,number,number):{dx:number,dy:number},visible?:boolean,alpha?:number,blendOperation?:GlobalCompositeOperation,minZoom?:number,maxZoom?:number}} opts
+     * @param {{filter?:function(import('./Dataset').Cell):boolean,offset?:function(import('./Dataset').Cell,number,number):{dx:number,dy:number},visible?:boolean,alpha?:function(number):number,blendOperation?:function(number):GlobalCompositeOperation,minZoom?:number,maxZoom?:number}} opts
      *      minZoom: The minimum zoom level when to show the layer. maxZoom: The maximum zoom level when to show the layer
      */
     constructor(opts) {
@@ -37,15 +37,16 @@ export class Style {
          * @type {boolean} */
         this.visible = opts.visible === false ? false : true
 
-        /** The alpha of the style, between 0.0 (fully transparent) and 1.0 (fully opaque).
+        /** A function returning the alpha (transparency/opacity), between 0.0 (fully transparent) and 1.0 (fully opaque).
+         *  The function parameter is the zoom factor.
          * (see CanvasRenderingContext2D: globalAlpha property)
-         * @type {number|undefined} */
+         * @type {function(number):number|undefined} */
         this.alpha = opts.alpha
 
-        /** The blend operation
+        /** A function returning the blend operation. The function parameter is the zoom factor.
          * (see CanvasRenderingContext2D: globalCompositeOperation property)
-         * @type {GlobalCompositeOperation} */
-        this.blendOperation = opts.blendOperation || 'normal'
+         * @type {function(number):GlobalCompositeOperation} */
+        this.blendOperation = opts.blendOperation || (zf => 'normal')
 
         /** The minimum zoom factor: Below this level, the layer is not shown.
          * @type {number}