gridviz 2.0.48 → 2.0.49

package/package.json

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

package/src/App.js

@@ -110,11 +110,23 @@ export class App {
                 //update dataset view cache
                 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
+
                 //draw cells, style by style
                 if (strong)
                     for (const s of layer.styles) {
+                        //check if style is visible
+                        if (!s.visible) continue
                         if (zf > s.maxZoom) continue
                         if (zf < s.minZoom) continue
+
+                        //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
+
                         s.draw(dsc.getViewCache(), dsc.getResolution(), this.cg)
                     }
 

package/src/Layer.js

@@ -10,7 +10,7 @@ export class Layer {
     /**
      * @param {import("./Dataset").Dataset} dataset The multi resolution dataset to show.
      * @param {Array.<import("./Style").Style>} styles The styles, ordered in drawing order.
-     * @param {{visible?:boolean,minZoom?:number,maxZoom?:number,pixNb?:number,cellInfoHTML?:function(import("./Dataset").Cell):string}} opts
+     * @param {{visible?:boolean,alpha?:number,blendOperation?:GlobalCompositeOperation,minZoom?:number,maxZoom?:number,pixNb?:number,cellInfoHTML?:function(import("./Dataset").Cell):string}} opts
      *      minZoom: The minimum zoom level when to show the layer. maxZoom: The maximum zoom level when to show the layer
      */
     constructor(dataset, styles, opts = {}) {
@@ -23,7 +23,17 @@ export class Layer {
 
         /** An attribute to specify if a layer should be drawn or not
          * @type {boolean} */
-        this.visible = opts.visible == false ? false : true
+        this.visible = opts.visible === false ? false : true
+
+        /** The alpha of the layer, between 0.0 (fully transparent) and 1.0 (fully opaque).
+         * (see CanvasRenderingContext2D: globalAlpha property)
+         * @type {number|undefined} */
+        this.alpha = opts.alpha
+
+        /** The blend operation
+         * (see CanvasRenderingContext2D: globalCompositeOperation property)
+         * @type {GlobalCompositeOperation} */
+        this.blendOperation = opts.blendOperation || '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},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?:number,blendOperation?: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) {
@@ -33,6 +33,20 @@ export class Style {
          * @type {function(import('./Dataset').Cell,number,number):{dx:number,dy:number}} */
         this.offset = opts.offset || ((c, r, zf) => ({ dx: 0, dy: 0 }))
 
+        /** An attribute to specify if a style should be drawn or not
+         * @type {boolean} */
+        this.visible = opts.visible === false ? false : true
+
+        /** The alpha of the style, between 0.0 (fully transparent) and 1.0 (fully opaque).
+         * (see CanvasRenderingContext2D: globalAlpha property)
+         * @type {number|undefined} */
+        this.alpha = opts.alpha
+
+        /** The blend operation
+         * (see CanvasRenderingContext2D: globalCompositeOperation property)
+         * @type {GlobalCompositeOperation} */
+        this.blendOperation = opts.blendOperation || 'normal'
+
         /** The minimum zoom factor: Below this level, the layer is not shown.
          * @type {number}
          * */