From afb4e89052265681902ca6bd0c419bc851673fba Mon Sep 17 00:00:00 2001
From: Igor Zinken <igor.zinken@igorski.nl>
Date: Fri, 5 Feb 2021 10:17:27 +0100
Subject: [PATCH] Implemented layer opacity control

---
 .../layer-filters/layer-filters.vue           | 31 ++++++++++++++++---
 .../options-panel/layer-filters/messages.json |  1 +
 src/factories/filters-factory.js              |  5 +++
 src/rendering/canvas-elements/layer-sprite.js | 10 +++++-
 tests/unit/factories/filters-factory.spec.js  | 13 ++++++--
 5 files changed, 51 insertions(+), 9 deletions(-)

diff --git a/src/components/options-panel/layer-filters/layer-filters.vue b/src/components/options-panel/layer-filters/layer-filters.vue
index d9a719f..7be3309 100644
--- a/src/components/options-panel/layer-filters/layer-filters.vue
+++ b/src/components/options-panel/layer-filters/layer-filters.vue
@@ -31,6 +31,15 @@
                     name="enabled"
                 />
             </div>
+            <div class="wrapper input">
+                <label v-t="'opacity'"></label>
+                <slider
+                    v-model="opacity"
+                    :min="0"
+                    :max="100"
+                    :tooltip="'none'"
+                />
+            </div>
             <div class="wrapper input">
                 <label v-t="'gamma'"></label>
                 <slider
@@ -124,6 +133,14 @@ export default {
         filters() {
             return this.activeLayer.filters;
         },
+        opacity: {
+            get() {
+                return this.internalValue.opacity * 100;
+            },
+            set( value ) {
+                this.internalValue.opacity = value / 100;
+            }
+        },
         gamma: {
             get() {
                 return this.internalValue.gamma * 100;
@@ -173,9 +190,13 @@ export default {
                 }, 250 );
             },
         },
-        activeLayer( value ) {
+        activeLayer( value, oldValue ) {
             if ( !value ) {
                 this.close(); // document has been closed
+            } else if ( oldValue && value.id !== oldValue.id ) {
+                this.cancel( this.orgLayerId ); // layer has switched
+            } else {
+                this.optLayerIndex = this.activeLayerIndex;
             }
         }
     },
@@ -211,17 +232,17 @@ export default {
             this.internalValue = FiltersFactory.create();
             this.update();
         },
-        cancel() {
-            this.update( this.orgFilters );
+        cancel( optLayerIndex ) {
+            this.update( this.orgFilters, optLayerIndex );
             this.close();
         },
         close() {
             this.$emit( "close" );
         },
-        update( optData ) {
+        update( optData, optLayerIndex ) {
             const filters = optData || { ...this.internalValue };
             this.updateLayer({
-                index: this.activeLayerIndex,
+                index: optLayerIndex ?? this.activeLayerIndex,
                 opts: { filters }
             });
         }
diff --git a/src/components/options-panel/layer-filters/messages.json b/src/components/options-panel/layer-filters/messages.json
index 64d53c3..0d2511e 100644
--- a/src/components/options-panel/layer-filters/messages.json
+++ b/src/components/options-panel/layer-filters/messages.json
@@ -2,6 +2,7 @@
     "en-US": {
         "filtersForLayer": "Filters for layer \"{name}\"",
         "enabled": "Filters active",
+        "opacity": "Opacity",
         "gamma": "Gamma",
         "contrast": "Contrast",
         "brightness": "Brightness",
diff --git a/src/factories/filters-factory.js b/src/factories/filters-factory.js
index ccf07aa..2786430 100644
--- a/src/factories/filters-factory.js
+++ b/src/factories/filters-factory.js
@@ -25,6 +25,7 @@ let defaultFilters = null;
 const FiltersFactory = {
     create({
         enabled    = true,
+        opacity    = 1,
         gamma      = .5,
         brightness = .5,
         contrast   = 0,
@@ -33,6 +34,7 @@ const FiltersFactory = {
     } = {}) {
         return {
             enabled,
+            opacity,
             gamma,
             brightness,
             contrast,
@@ -48,6 +50,7 @@ const FiltersFactory = {
     serialize( filters ) {
         return {
             e: filters.enabled,
+            o: filters.opacity,
             g: filters.gamma,
             b: filters.brightness,
             c: filters.contrast,
@@ -63,6 +66,7 @@ const FiltersFactory = {
      deserialize( filters = {} ) {
          return FiltersFactory.create({
              enabled: filters.e,
+             opacity: filters.o,
              gamma: filters.g,
              brightness: filters.b,
              contrast: filters.c,
@@ -85,6 +89,7 @@ export const hasFilters = filters => {
 
 export const isEqual = ( filters, filtersToCompareTo = {} ) => {
     return filters.enabled    === filtersToCompareTo.enabled    &&
+           filters.opacity    === filtersToCompareTo.opacity    &&
            filters.gamma      === filtersToCompareTo.gamma      &&
            filters.brightness === filtersToCompareTo.brightness &&
            filters.contrast   === filtersToCompareTo.contrast   &&
diff --git a/src/rendering/canvas-elements/layer-sprite.js b/src/rendering/canvas-elements/layer-sprite.js
index 07a8dbf..1878e61 100644
--- a/src/rendering/canvas-elements/layer-sprite.js
+++ b/src/rendering/canvas-elements/layer-sprite.js
@@ -519,6 +519,11 @@ class LayerSprite extends ZoomableSprite {
             orgBounds = this._bounds;
             this._bounds = scaleRectangle( orgBounds, scale );
         }
+        const { enabled, opacity } = this.layer.filters;
+        const altOpacity = enabled && opacity !== 1;
+        if ( altOpacity ) {
+            documentContext.globalAlpha = opacity;
+        }
         // invoke base class behaviour to render bitmap
         super.draw( documentContext, viewport );
 
@@ -535,7 +540,10 @@ class LayerSprite extends ZoomableSprite {
             renderTempCanvas( this.canvas, documentContext );
             documentContext.restore();
         }
-
+        if ( altOpacity ) {
+            documentContext.globalAlpha = 1; // restore document opacity
+        }
+        
         if ( !omitOutlines ) {
 
             const { zoomFactor } = this.canvas;
diff --git a/tests/unit/factories/filters-factory.spec.js b/tests/unit/factories/filters-factory.spec.js
index bdb27ff..e347294 100644
--- a/tests/unit/factories/filters-factory.spec.js
+++ b/tests/unit/factories/filters-factory.spec.js
@@ -6,6 +6,7 @@ describe( "Filters factory", () => {
             const filters = FiltersFactory.create();
             expect( filters ).toEqual({
                 enabled: true,
+                opacity: 1,
                 gamma: .5,
                 brightness: .5,
                 contrast: 0,
@@ -17,6 +18,7 @@ describe( "Filters factory", () => {
         it( "should be able to create a filters list from given arguments", () => {
             const filters = FiltersFactory.create({
                 enabled: false,
+                opacity: .3,
                 gamma: .7,
                 brightness: .6,
                 contrast: .3,
@@ -25,6 +27,7 @@ describe( "Filters factory", () => {
             });
             expect( filters ).toEqual({
                 enabled: false,
+                opacity: .3,
                 gamma: .7,
                 brightness: .6,
                 contrast: .3,
@@ -38,6 +41,7 @@ describe( "Filters factory", () => {
         it( "should do so without data loss", async () => {
             const filters = FiltersFactory.create({
                 enabled: false,
+                opacity: .4,
                 gamma: .7,
                 brightness: .6,
                 contrast: .3,
@@ -58,7 +62,10 @@ describe( "Filters factory", () => {
         });
 
         it( "should consider a configuration where one of the properties deviates from the default as active", () => {
-            let filter = FiltersFactory.create({ gamma: .7 });
+            let filter = FiltersFactory.create({ opacity: .5 });
+            expect( hasFilters( filter )).toBe( true );
+
+            filter = FiltersFactory.create({ gamma: .7 });
             expect( hasFilters( filter )).toBe( true );
 
             filter = FiltersFactory.create({ brightness: .3 });
@@ -77,8 +84,8 @@ describe( "Filters factory", () => {
 
     it( "should know when two filters instances are equal", () => {
         const defaultFilter = FiltersFactory.create();
-        [ "enabled", "gamma", "brightness", "contrast", "vibrance", "desaturate" ].forEach( property => {
-            const filters = FiltersFactory.create({ [ property ]: 1 });
+        [ "enabled", "opacity", "gamma", "brightness", "contrast", "vibrance", "desaturate" ].forEach( property => {
+            const filters = FiltersFactory.create({ [ property ]: .88 });
             expect( isEqual( filters, defaultFilter )).toBe( false );
         });
         expect( isEqual( defaultFilter, FiltersFactory.create() )).toBe( true );