Add mask color in addColor et add an example for it

package.json

 {
   "name": "coloration-demo",
-  "version": "0.0.2",
+  "version": "0.0.3",
   "license": "MIT",
   "repository": {
     "type": "git",

projects/coloration/package.json

 {
   "name": "coloration-lib",
-  "version": "0.0.2",
+  "version": "0.0.3",
   "license": "MIT",
   "repository": {
     "type": "git",

projects/coloration/src/lib/coloration.ts

@@ -28,6 +28,8 @@ export interface ColorData {
     /** Value/lightness value [-100,100] */  v?: number;
     // Other
     /** luminosity value [-1,1] */ luminosity?: number;
+    /** color mask */ maskColor?: string;
+    /** color mask opacity [0,1] */ maskOpacity?: number;
 }
 
 export class Coloration {
@@ -88,6 +90,7 @@ export class Coloration {
     /**
      * change the luminosity of a color
      * @param lum value between -1 and 1
+     * @returns Coloration
      */
     changeLuminosity(lum: number): Coloration {
         lum = this.minmax(lum, -1, 1);
@@ -99,6 +102,7 @@ export class Coloration {
      * add color with a mark
      * @param color additional color
      * @param opacity value of opacity between 0 and 1 for the additional color
+     * @returns Coloration
      */
     maskColor(color: string, opacity: number = 1): Coloration {
 
@@ -123,12 +127,17 @@ export class Coloration {
     /**
      * change color with color parameters
      * @param colorData additionnal parameters
+     * @returns Coloration
      */
     addColor(colorData: ColorData) {
         if (colorData.luminosity) {
             this.changeLuminosity(colorData.luminosity);
         }
 
+        if (colorData.maskColor) {
+            this.maskColor(colorData.maskColor, this.minmax(colorData.maskOpacity || 0, 0, 1));
+        }
+
         if (colorData.r || colorData.g || colorData.b) {
             if (colorData.r) {
                 console.log(this.rgb.r, colorData.r, this.rgb.r + colorData.r);
@@ -167,7 +176,7 @@ export class Coloration {
      * @returns RGB
      */
     getRGB(): RGB {
-        return Object.assign({}, this.rgb);
+        return this.value<RGB>(() => Object.assign({}, this.rgb));
     }
 
     /**
@@ -175,7 +184,7 @@ export class Coloration {
      * @returns HSV
      */
     getHSV(): HSV {
-        return Object.assign({}, this.hsv);
+        return this.value<HSV>(() => Object.assign({}, this.hsv));
     }
 
     /**
@@ -183,7 +192,7 @@ export class Coloration {
      * @returns string of #HEX
      */
     toHEX(): string {
-        return '#' + (0x1000000 + this.intColor).toString(16).slice(1);
+        return this.value<string>(() => '#' + (0x1000000 + this.intColor).toString(16).slice(1));
     }
 
     /**
@@ -191,7 +200,7 @@ export class Coloration {
      * @returns string of HVL(H, S%, V%)
      */
     toHSL(): string {
-        return `hsl(${this.hsv.h}, ${this.hsv.s}%, ${this.hsv.v}%)`;
+        return this.value<string>(() => `hsl(${this.hsv.h}, ${this.hsv.s}%, ${this.hsv.v}%)`);
     }
 
     /**
@@ -199,7 +208,7 @@ export class Coloration {
      * @returns string of RGB(R, G, B)
      */
     toRGB(): string {
-        return `rgb(${this.rgb.r}, ${this.rgb.g}, ${this.rgb.b})`;
+        return this.value<string>(() => `rgb(${this.rgb.r}, ${this.rgb.g}, ${this.rgb.b})`);
     }
 
     /**
@@ -378,4 +387,13 @@ export class Coloration {
         return Math.min(Math.max(value || defaultValue, min), max);
     }
 
+    /**
+     * test is intColor is valid for return a vlaue
+     * @param value callback of value
+     * @returns value or null
+     */
+    private value<L>(value: () => L): L {
+        return !isNaN(this.intColor) ? value() : null;
+    }
+
 }

src/app/app.component.html

-<h1>{{ title }}</h1>
+<h1>coloration-lib</h1>
 <h2>Test to change color: </h2>
 
 <main>
@@ -7,7 +7,9 @@
       <legend>Base</legend>
       <label>Color : <input type="text"
                [(value)]="baseColor"
-               (change)="baseColor = $event.target.value"></label>
+               (change)="baseColor = $event.target.value"
+               placeholder="black, #000, rgb(0,0,0), hsl(0,0%,0%)"
+               title="black, #000, rgb(0,0,0), hsl(0,0%,0%)"></label>
       <div [style.background-color]="baseColor">&nbsp;</div>
 
     </fieldset>
@@ -70,25 +72,44 @@
                    [value]="value"
                    (change)="value = $event.target.value"></label>
         </div>
+        <div class="maskColor">
+          <label><span>Mask color:</span><input type="text"
+                   [value]="maskColor"
+                   (change)="maskColor = $event.target.value"
+                   placeholder="black, #000, rgb(0,0,0), hsl(0,0%,0%)"
+                   title="black, #000, rgb(0,0,0), hsl(0,0%,0%)"></label>
+        </div>
+        <div class="maskOpacity">
+          <label><span>Mask opacity:</span><input type="number"
+                   min="0"
+                   max="1"
+                   step="0.01"
+                   [value]="maskOpacity"
+                   (change)="maskOpacity = $event.target.value"></label>
+        </div>
       </div>
-      <div>
+      <div class="button">
         <button type="button"
                 (click)="change()">Change</button>
       </div>
     </fieldset>
   </form>
   <aside>
-    <div>
-      HEX : {{colorHex}}
-      <div [style.background-color]="colorHex">&nbsp;</div>
-    </div>
-    <div>
-      RGB : {{colorRgb}}
-      <div [style.background-color]="colorRgb">&nbsp;</div>
-    </div>
-    <div>
-      HSL : {{colorHsl}}
-      <div [style.background-color]="colorHsl">&nbsp;</div>
-    </div>
+    <fieldset>
+      <legend>Result</legend>
+      <div [style.background-image]="colorHex ? 'linear-gradient(to right, '+baseColor+', '+colorHex+')' : baseColor">&nbsp;</div>
+      <div>
+        HEX : {{colorHex || '--'}}
+        <div [style.background-color]="colorHex">&nbsp;</div>
+      </div>
+      <div>
+        RGB : {{colorRgb || '--'}}
+        <div [style.background-color]="colorRgb">&nbsp;</div>
+      </div>
+      <div>
+        HSL : {{colorHsl || '--'}}
+        <div [style.background-color]="colorHsl">&nbsp;</div>
+      </div>
+    </fieldset>
   </aside>
 </main>
\ No newline at end of file

src/app/app.component.scss

@@ -5,7 +5,7 @@ main {
 }
 
 form {
-    flex: 2;
+    flex: 3;
 }
 
 aside {
@@ -17,9 +17,10 @@ aside {
     display: grid;
     width: 100%;
     grid-template:
-        "lum .     .    " 35px
-        "red green blue " 35px
-        "hue sat   value" 35px / 1fr 1fr 1fr;
+        "lum   .       .    " 35px
+        "color opacity .    " 35px
+        "red   green   blue " 35px
+        "hue   sat     value" 35px / 1fr 1fr 1fr;
 
     label {
         display:flex;
@@ -30,14 +31,23 @@ aside {
     span {
         flex: 1;
     }
+
+    input {
+        width: 120px;
+    }
 } 
 
-.luminosity {
-    grid-area: lum;   
-}
+.luminosity { grid-area: lum; }
+.maskColor { grid-area: color;}
+.maskOpacity{ grid-area: opacity;}
 .red { grid-area: red;}
 .green { grid-area: green;}
 .blue { grid-area: blue;}
 .hue {grid-area: hue;}
 .saturation { grid-area: sat;}
-.value{ grid-area: value;}
\ No newline at end of file
+.value{ grid-area: value;}
+
+.button {
+    text-align: center;
+    padding-top: 10px;
+}
\ No newline at end of file

src/app/app.component.ts

@@ -7,8 +7,6 @@ import { Coloration } from 'projects/coloration/src/public_api';
   styleUrls: ['./app.component.scss']
 })
 export class AppComponent {
-  title = 'coloration-demo';
-
   baseColor = '';
 
   luminosity = 0.00;
@@ -18,6 +16,8 @@ export class AppComponent {
   hue = 0;
   saturation = 0;
   value = 0;
+  maskColor = '';
+  maskOpacity = 1;
 
   colorHex: string;
   colorRgb: string;
@@ -35,7 +35,9 @@ export class AppComponent {
       h: this.hue,
       s: this.saturation,
       v: this.value,
-      luminosity: this.luminosity
+      luminosity: this.luminosity,
+      maskColor: this.maskColor,
+      maskOpacity: this.maskOpacity
     });
 
     console.log(color);