plotboilerplate 1.12.7 → 1.13.0

package/src/esm/utils/datastructures/Color.d.ts

@@ -8,7 +8,13 @@
  * @modified 2020-10-23 Ported to Typescript.
  * @modified 2021-02-08 Fixed a lot of es2015 compatibility issues.
  * @modified 2021-02-08 Added basic tsdoc/jsdoc comments.
- * @version 0.0.9
+ * @modified 2021-11-05 Fixing the regex to parse rgba-strings.
+ * @modified 2021-11-05 Added return value `this` to all modifier functions (for chaining).
+ * @modified 2021-11-07 Changed the behavior of `darken` and `lighten`: the passed value is handled relative now which makes values much easier predictable and makes the change feel more 'natural'.
+ * @modified 2021-11-07 Did the same with `saturate` and `desaturate`.
+ * @modified 2021-11-07 Did the same with the `fadein` and `fadeout` functions.
+ * @modified 2021-11-07 Added setRed, setGreen, setBlue, setHue, setSaturation, setLiminance functions.
+ * @version 0.0.10
  **/
 /**
  * @classdesc A color class, inspired by neolitec's Javascript class.
@@ -101,13 +107,13 @@ export declare class Color {
      */
     red(): number;
     /**
-    * Get the green component of this RGB(A) color. This method just returns the `g` color attribute.
-    *
-    * @method green
-    * @instance
-    * @memberof Color
-    * @return {number} A value between 0.0 and 1.0.
-    */
+     * Get the green component of this RGB(A) color. This method just returns the `g` color attribute.
+     *
+     * @method green
+     * @instance
+     * @memberof Color
+     * @return {number} A value between 0.0 and 1.0.
+     */
     green(): number;
     /**
      * Get the blue component of this RGB(A) color. This method just returns the `b` color attribute.
@@ -118,6 +124,13 @@ export declare class Color {
      * @return {number} A value between 0.0 and 1.0.
      */
     blue(): number;
+    setRed(r: number): this;
+    setBlue(b: number): this;
+    setAlpha(a: number): this;
+    setGreen(g: number): this;
+    setHue(h: number): this;
+    setSaturation(s: number): this;
+    setLuminance(l: number): this;
     /**
      * Get this color as a CSS `hsl` string.
      *
@@ -181,13 +194,13 @@ export declare class Color {
      * @return {number} A value between 0.0 and 1.0.
      */
     alpha(): number;
-    saturate(v: string | number): void;
-    desaturate(v: string | number): void;
-    lighten(v: string | number): void;
-    darken(v: string | number): void;
-    fadein(v: string | number): void;
-    fadeout(v: string | number): void;
-    spin(v: string | number): void;
+    saturate(v: string | number): Color;
+    desaturate(v: string | number): Color;
+    lighten(v: string | number): Color;
+    darken(v: string | number): Color;
+    fadein(v: string | number): Color;
+    fadeout(v: string | number): Color;
+    spin(v: string | number): Color;
     static makeRGB(...args: any[]): Color;
     static makeHSL(...args: Array<number | string>): Color;
     static makeHEX(value: string): Color;

package/src/esm/utils/datastructures/Color.js

@@ -8,7 +8,13 @@
  * @modified 2020-10-23 Ported to Typescript.
  * @modified 2021-02-08 Fixed a lot of es2015 compatibility issues.
  * @modified 2021-02-08 Added basic tsdoc/jsdoc comments.
- * @version 0.0.9
+ * @modified 2021-11-05 Fixing the regex to parse rgba-strings.
+ * @modified 2021-11-05 Added return value `this` to all modifier functions (for chaining).
+ * @modified 2021-11-07 Changed the behavior of `darken` and `lighten`: the passed value is handled relative now which makes values much easier predictable and makes the change feel more 'natural'.
+ * @modified 2021-11-07 Did the same with `saturate` and `desaturate`.
+ * @modified 2021-11-07 Did the same with the `fadein` and `fadeout` functions.
+ * @modified 2021-11-07 Added setRed, setGreen, setBlue, setHue, setSaturation, setLiminance functions.
+ * @version 0.0.10
  **/
 /**
  * @classdesc A color class, inspired by neolitec's Javascript class.
@@ -31,8 +37,7 @@ export class Color {
         this.h = this.s = this.l = 0;
         this.a = 1;
     }
-    ;
-    // --- RGB ---------------------------------- 
+    // --- RGB ----------------------------------
     /**
      * Get this color as a CSS `rgb` string.
      *
@@ -46,7 +51,6 @@ export class Color {
     cssRGB() {
         return "rgb(" + Math.round(255 * this.r) + "," + Math.round(255 * this.g) + "," + Math.round(255 * this.b) + ")";
     }
-    ;
     /**
      * Get this color as a CSS `rgba` string.
      *
@@ -58,9 +62,8 @@ export class Color {
      * @return {string} This color as a CSS rgba string.
      */
     cssRGBA() {
-        return "rgba(" + Math.round(255 * this.r) + "," + Math.round(255 * this.g) + "," + Math.round(255 * this.b) + "," + this.a + ")";
+        return `rgba(${Math.round(255 * this.r)},${Math.round(255 * this.g)},${Math.round(255 * this.b)},${this.a})`;
     }
-    ;
     /**
      * Get the red component of this RGB(A)color. This method just returns the `r` color attribute.
      *
@@ -69,18 +72,20 @@ export class Color {
      * @memberof Color
      * @return {number} A value between 0.0 and 1.0.
      */
-    red() { return this.r; }
-    ;
+    red() {
+        return this.r;
+    }
     /**
-    * Get the green component of this RGB(A) color. This method just returns the `g` color attribute.
-    *
-    * @method green
-    * @instance
-    * @memberof Color
-    * @return {number} A value between 0.0 and 1.0.
-    */
-    green() { return this.g; }
-    ;
+     * Get the green component of this RGB(A) color. This method just returns the `g` color attribute.
+     *
+     * @method green
+     * @instance
+     * @memberof Color
+     * @return {number} A value between 0.0 and 1.0.
+     */
+    green() {
+        return this.g;
+    }
     /**
      * Get the blue component of this RGB(A) color. This method just returns the `b` color attribute.
      *
@@ -89,9 +94,44 @@ export class Color {
      * @memberof Color
      * @return {number} A value between 0.0 and 1.0.
      */
-    blue() { return this.b; }
-    ;
-    // --- HSL ---------------------------------- 
+    blue() {
+        return this.b;
+    }
+    setRed(r) {
+        this.r = r;
+        return this;
+    }
+    setBlue(b) {
+        this.b = b;
+        Color.Converter.RGBToHSL(this);
+        return this;
+    }
+    setAlpha(a) {
+        this.a = a;
+        Color.Converter.RGBToHSL(this);
+        return this;
+    }
+    setGreen(g) {
+        this.g = g;
+        Color.Converter.RGBToHSL(this);
+        return this;
+    }
+    setHue(h) {
+        this.h = h;
+        Color.Converter.HSLToRGB(this);
+        return this;
+    }
+    setSaturation(s) {
+        this.s = s;
+        Color.Converter.HSLToRGB(this);
+        return this;
+    }
+    setLuminance(l) {
+        this.l = l;
+        Color.Converter.HSLToRGB(this);
+        return this;
+    }
+    // --- HSL ----------------------------------
     /**
      * Get this color as a CSS `hsl` string.
      *
@@ -103,7 +143,6 @@ export class Color {
     cssHSL() {
         return "hsl(" + Math.round(360 * this.h) + "," + Math.round(100 * this.s) + "%," + Math.round(100 * this.l) + "%)";
     }
-    ;
     /**
      * Get this color as a CSS `hsla` string.
      *
@@ -113,9 +152,16 @@ export class Color {
      * @return {string} This color as a CSS hsla string.
      */
     cssHSLA() {
-        return "hsla(" + Math.round(360 * this.h) + "," + Math.round(100 * this.s) + "%," + Math.round(100 * this.l) + "%," + Math.round(this.a) + ")";
+        return ("hsla(" +
+            Math.round(360 * this.h) +
+            "," +
+            Math.round(100 * this.s) +
+            "%," +
+            Math.round(100 * this.l) +
+            "%," +
+            Math.round(this.a) +
+            ")");
     }
-    ;
     /**
      * Get the hue component of this HSL(A) color. This method just returns the `h` color attribute.
      *
@@ -124,8 +170,9 @@ export class Color {
      * @memberof Color
      * @return {number} A value between 0.0 and 1.0.
      */
-    hue() { return this.h; }
-    ;
+    hue() {
+        return this.h;
+    }
     /**
      * Get the saturation component of this HSL(A) color. This method just returns the `s` color attribute.
      *
@@ -134,8 +181,9 @@ export class Color {
      * @memberof Color
      * @return {number} A value between 0.0 and 1.0.
      */
-    saturation() { return this.s; }
-    ;
+    saturation() {
+        return this.s;
+    }
     /**
      * Get the lightness component of this HSL(A) color. This method just returns the `l` color attribute.
      *
@@ -144,8 +192,9 @@ export class Color {
      * @memberof Color
      * @return {number} A value between 0.0 and 1.0.
      */
-    lightness() { return this.l; }
-    ;
+    lightness() {
+        return this.l;
+    }
     // --- HEX ----------------------------------
     /**
      * Get this color as a CSS-HEX string (non-alpha): #rrggbb
@@ -156,13 +205,15 @@ export class Color {
      * @return {string} This color as a CSS-HEX string.
      */
     cssHEX() {
-        return "#" +
-            (255 * this.r < 16 ? "0" : "") + Math.round(255 * this.r).toString(16) +
-            (255 * this.g < 16 ? "0" : "") + Math.round(255 * this.g).toString(16) +
-            (255 * this.b < 16 ? "0" : "") + Math.round(255 * this.b).toString(16);
+        return ("#" +
+            (255 * this.r < 16 ? "0" : "") +
+            Math.round(255 * this.r).toString(16) +
+            (255 * this.g < 16 ? "0" : "") +
+            Math.round(255 * this.g).toString(16) +
+            (255 * this.b < 16 ? "0" : "") +
+            Math.round(255 * this.b).toString(16));
     }
-    ;
-    // --- Transparency ---------------------------------- 
+    // --- Transparency ----------------------------------
     /**
      * Get the alpha channel (transparency) of this color.
      *
@@ -171,67 +222,193 @@ export class Color {
      * @memberof Color
      * @return {number} A value between 0.0 and 1.0.
      */
-    alpha() { return this.a; }
-    ;
-    // --- Modifiers ---------------------------------- 
+    alpha() {
+        return this.a;
+    }
+    // --- Modifiers ----------------------------------
+    //   saturate(v: string | number): Color {
+    //     if ("string" == typeof v && v.indexOf("%") > -1 && (v = parseInt(v)) != NaN) {
+    //       this.s += v / 100;
+    //     } else if ("number" == typeof v) {
+    //       // range 255
+    //       this.s += v / 255;
+    //     } else {
+    //       throw new Error("error: bad modifier format (percent or number)");
+    //     }
+    //     if (this.s > 1) this.s = 1;
+    //     else if (this.s < 0) this.s = 0;
+    //     Color.Converter.HSLToRGB(this);
+    //     return this;
+    //   }
     saturate(v) {
-        if ("string" == typeof v && v.indexOf("%") > -1 && (v = parseInt(v)) != NaN)
-            this.s += v / 100;
-        else if ("number" == typeof v) // range 255 
-            this.s += v / 255;
-        else
+        if ("string" == typeof v && v.indexOf("%") > -1 && (v = parseInt(v)) != NaN) {
+            this.s += (1 - this.s) * (v / 100);
+        }
+        else if ("number" == typeof v) {
+            if (v >= -0.0 && v <= 1.0) {
+                // range 255
+                this.s += (1 - this.s) * v;
+            }
+            else {
+                // range 0-1
+                this.s += (1 - this.s) * (v / 255);
+            }
+        }
+        else {
             throw new Error("error: bad modifier format (percent or number)");
+        }
         if (this.s > 1)
             this.s = 1;
         else if (this.s < 0)
             this.s = 0;
         Color.Converter.HSLToRGB(this);
+        return this;
     }
-    ;
     desaturate(v) {
-        this.saturate("-" + v);
+        if ("string" == typeof v && v.indexOf("%") > -1 && (v = parseInt(v)) != NaN) {
+            this.s -= v / 100;
+        }
+        else if ("number" == typeof v) {
+            if (v >= 0.0 && v <= 1.0) {
+                // range 255
+                this.s -= this.s * v;
+            }
+            else {
+                // range 0-1
+                this.s -= this.s * (v / 255);
+            }
+        }
+        else {
+            throw new Error("error: bad modifier format (percent or number)");
+        }
+        if (this.s > 1)
+            this.s = 1;
+        else if (this.s < 0)
+            this.s = 0;
+        Color.Converter.HSLToRGB(this);
+        return this;
     }
-    ;
+    //   lighten(v: string | number): Color {
+    //     if ("string" == typeof v && v.indexOf("%") > -1 && (v = parseInt(v)) != NaN) {
+    //       this.l += v / 100;
+    //     } else if ("number" == typeof v) {
+    //       if (v >= -1.0 && v <= 1.0) {
+    //         // range 0.0...1.0
+    //         this.l += v;
+    //       } else {
+    //         // range 255
+    //         this.l += v / 255;
+    //       }
+    //     } else {
+    //       throw new Error("error: bad modifier format (percent or number)");
+    //     }
+    //     if (this.l > 1) this.l = 1;
+    //     else if (this.l < 0) this.l = 0;
+    //     Color.Converter.HSLToRGB(this);
+    //     return this;
+    //   }
     lighten(v) {
-        if ("string" == typeof v && v.indexOf("%") > -1 && (v = parseInt(v)) != NaN)
-            this.l += v / 100;
-        else if ("number" == typeof v) // range 255 
-            this.l += v / 255;
-        else
+        if ("string" == typeof v && v.indexOf("%") > -1 && (v = parseInt(v)) != NaN) {
+            this.l += (1 - this.l) * (v / 100);
+        }
+        else if ("number" == typeof v) {
+            if (v >= 0.0 && v <= 1.0) {
+                // range 0.0...1.0
+                this.l += (1 - this.l) * v;
+            }
+            else {
+                // range 255
+                this.l += (1 - this.l) * (v / 255);
+            }
+        }
+        else {
             throw new Error("error: bad modifier format (percent or number)");
+        }
         if (this.l > 1)
             this.l = 1;
         else if (this.l < 0)
             this.l = 0;
         Color.Converter.HSLToRGB(this);
+        return this;
     }
-    ;
     darken(v) {
-        this.lighten("-" + v);
+        if ("string" == typeof v && v.indexOf("%") > -1 && (v = parseInt(v)) != NaN) {
+            this.l -= this.l * (v / 100);
+        }
+        else if ("number" == typeof v) {
+            if (v >= 0.0 && v <= 1.0) {
+                // range 0.0...1.0
+                this.l -= this.l * v;
+            }
+            else {
+                // range 255
+                this.l -= this.l * (v / 255);
+            }
+        }
+        else {
+            throw new Error("error: bad modifier format (percent or number)");
+        }
+        if (this.l > 1)
+            this.l = 1;
+        else if (this.l < 0)
+            this.l = 0;
+        Color.Converter.HSLToRGB(this);
+        return this;
     }
-    ;
     fadein(v) {
-        if ("string" == typeof v && v.indexOf("%") > -1 && (v = parseInt(v)) != NaN)
-            this.a += v / 100;
-        else if ("number" == typeof v) // range 255 
-            this.a += v / 255;
-        else
+        if ("string" == typeof v && v.indexOf("%") > -1 && (v = parseInt(v)) != NaN) {
+            this.a += (1 - this.a) * (v / 100);
+        }
+        else if ("number" == typeof v) {
+            if (v >= 0.0 && v <= 1.0) {
+                // range 0-1
+                this.a += (1 - this.a) * v;
+            }
+            else {
+                // range 255
+                this.a += (1 - this.a) * (v / 255);
+            }
+        }
+        else {
             throw new Error("error: bad modifier format (percent or number)");
+        }
+        console.log("New alpha", this.a);
         if (this.a > 1)
             this.a = 1;
         else if (this.a < 0)
             this.a = 0;
         Color.Converter.HSLToRGB(this);
+        return this;
     }
-    ;
     fadeout(v) {
-        this.fadein("-" + v);
+        if ("string" == typeof v && v.indexOf("%") > -1 && (v = parseInt(v)) != NaN) {
+            this.a -= v / 100;
+        }
+        else if ("number" == typeof v) {
+            if (v >= 0.0 && v <= 1.0) {
+                // range 0-1
+                this.a -= v;
+            }
+            else {
+                // range 255
+                this.a -= v / 255;
+            }
+        }
+        else {
+            throw new Error("error: bad modifier format (percent or number)");
+        }
+        if (this.a > 1)
+            this.a = 1;
+        else if (this.a < 0)
+            this.a = 0;
+        Color.Converter.HSLToRGB(this);
+        return this;
     }
-    ;
     spin(v) {
         if ("string" == typeof v && v.indexOf("%") > -1 && (v = parseInt(v)) != NaN)
             this.h += v / 100;
-        else if ("number" == typeof v) // range 360 
+        else if ("number" == typeof v)
+            // range 360
             this.h += v / 360;
         else
             throw new Error("error: bad modifier format (percent or number)");
@@ -240,8 +417,8 @@ export class Color {
         else if (this.h < 0)
             this.h = 0;
         Color.Converter.HSLToRGB(this);
+        return this;
     }
-    ;
     static makeRGB(...args) {
         const c = new Color();
         let sanitized;
@@ -251,12 +428,15 @@ export class Color {
         c.r = sanitized[0];
         c.g = sanitized[1];
         c.b = sanitized[2];
-        if (arguments.length == 4)
+        if (arguments.length == 4) {
             c.a = arguments[3];
+        }
+        else {
+            c.a = 1.0;
+        }
         Color.Converter.RGBToHSL(c);
         return c;
     }
-    ;
     static makeHSL(...args) {
         const c = new Color();
         let sanitized;
@@ -268,15 +448,16 @@ export class Color {
         c.l = sanitized[2];
         if (arguments.length == 4)
             c.a = arguments[3];
+        else
+            c.a = 1.0;
         Color.Converter.HSLToRGB(c);
         return c;
     }
-    ;
     static makeHEX(value) {
         var c = new Color(), sanitized;
         // Edit Ika 2018-0308
         // Allow leading '#'
-        if (value && value.startsWith('#'))
+        if (value && value.startsWith("#"))
             value = value.substr(1);
         Color.Validator.checkHEX(value);
         if (value.length == 3) {
@@ -290,10 +471,10 @@ export class Color {
         c.r = sanitized[0];
         c.g = sanitized[1];
         c.b = sanitized[2];
+        c.a = 1.0; // TODO: Accept #xxxxxxxx (8 chars, too, for alpha)
         Color.Converter.RGBToHSL(c);
         return c;
     }
-    ;
     /**
      * Parse the given color string. Currently only these formate are recognized: hex, rgb, rgba.
      *
@@ -304,24 +485,30 @@ export class Color {
      * @return {Color} The color instance that's represented by the given string.
      */
     static parse(str) {
-        if (typeof str == 'undefined')
+        if (typeof str == "undefined")
             return null;
         if ((str = str.trim().toLowerCase()).length == 0)
             return null;
-        if (str.startsWith('#'))
+        if (str.startsWith("#"))
             return Color.makeHEX(str.substring(1, str.length));
-        if (str.startsWith('rgb')) {
-            var parts = /^rgba?\((\d+),\s*(\d+),\s*(\d+)(?:,\s*(0\.\d+))?\)$/.exec(str);
+        if (str.startsWith("rgb")) {
+            var parts = str.match(/^rgba?\(\s*(\d{1,3})\s*,\s*(\d{1,3})\s*,\s*(\d{1,3})\s*,?\s*(\d*(?:\.\d+\s*)?)\)$/);
+            if (!parts) {
+                throw "Unrecognized color format (2): " + str;
+            }
             // [ str, r, g, b, a|undefined ]
-            if (typeof parts[4] == 'undefined')
+            //   console.log("parts", parts);
+            if (parts.length <= 4 || typeof parts[4] == "undefined" || parts[4] == "") {
                 return Color.makeRGB(parts[1], parts[2], parts[3]);
-            else
-                return Color.makeRGB(parts[1], parts[2], parts[3], parts[4]);
+            }
+            else {
+                return Color.makeRGB(parts[1], parts[2], parts[3], Number(parts[4]));
+            }
+        }
+        else {
+            throw "Unrecognized color format (1): " + str;
         }
-        else
-            throw "Unrecognized color format: " + str;
     }
-    ;
     /**
      * Create a clone of this color (RGB).
      *
@@ -333,7 +520,6 @@ export class Color {
     clone() {
         return Color.makeRGB(this.r, this.g, this.b, this.a);
     }
-    ;
     /**
      * Interpolate this color on the RGB scale.
      *
@@ -351,8 +537,7 @@ export class Color {
         this.a += (c.a - c.a) * t;
         return this;
     }
-    ;
-}
+} // END class
 Color.Sanitizer = {
     RGB: function (...args) {
         var o = [];
@@ -370,17 +555,21 @@ Color.Sanitizer = {
                 o[i] = c / 100;
             }
             else {
-                // console.log( 'allAreFrac', allAreFrac, arguments );
-                if ("string" == typeof c && (c = parseInt(c)) == NaN)
+                if ("string" == typeof c && (c = parseInt(c)) == NaN) {
                     throw new Error("Bad format");
-                if (c < 0)
+                }
+                if (c < 0) {
                     throw new Error("Bad format");
+                }
                 //else if( allAreFrac ) o[i] = c; // c >= 0 && c <= 1 (all)
-                else if (c >= 0 && c < 1)
+                else if (c >= 0 && c < 1) {
                     o[i] = c;
+                }
                 // else if(c >= 0.0 && c <= 1.0) o[i] = c;
-                else if (c >= 1 && c < 256)
-                    o[i] = c / 255; // ???
+                else if (c >= 1 && c < 256) {
+                    o[i] = c / 255;
+                }
+                // ???
                 // else if(c >= 0 && c < 256) o[i] = c/255;
                 else
                     throw new Error("Bad format (" + c + ")");
@@ -503,5 +692,4 @@ Color.Converter = {
         return p;
     }
 };
-; // END class
 //# sourceMappingURL=Color.js.map