Layer recolorability

engine/src/base/Layer.js

@@ -34,6 +34,7 @@ Wick.Layer = class extends Wick.Base {
         this.hidden = args.hidden === undefined ? false : args.hidden;
         this.opacity = args.opacity === undefined ? 1 : args.opacity;
         this.name = args.name || null;
+        this._layerColor = args.layerColor || Wick.GUIElement.LAYER_LABEL_ACTIVE_FILL_COLOR
     }
 
     _serialize (args) {
@@ -88,6 +89,17 @@ Wick.Layer = class extends Wick.Base {
         else this._opacity = 1;
     }
 
+    /**
+     * The color of the layer on the timeline.
+     * @type {paper.color}
+     */
+    get layerColor(){
+        return this._layerColor
+    }
+    set layerColor(color){
+        this._layerColor = color
+    }
+
     /**
      * Set this layer to be the active layer in its timeline.
      */

engine/src/base/Selection.js

@@ -81,6 +81,7 @@ Wick.Selection = class extends Wick.Base {
             "strokeWidth",
             "fillColor",
             "strokeColor",
+            "layerColor",
             "name",
             "filename",
             "fontSize",
@@ -754,6 +755,18 @@ Wick.Selection = class extends Wick.Base {
         this._setSingleAttribute('strokeWidth', strokeWidth);
     }
 
+    /**
+     * The color of the layer.
+     * @type {paper.color}
+     */
+    get layerColor(){
+        return this._getSingleAttribute('layerColor')
+    }
+
+    set layerColor(layerColor){
+        this._setSingleAttribute('layerColor', layerColor)
+    }
+
     /**
      * The font family of the selected object.
      * @type {string}

engine/src/gui/Layer.js

@@ -76,9 +76,60 @@ Wick.GUIElement.Layer = class extends Wick.GUIElement {
         if (this.model.hidden) {
             ctx.fillStyle = Wick.GUIElement.LAYER_LABEL_HIDDEN_FILL_COLOR;
         } else if (this.model.isActive) {
-            ctx.fillStyle = Wick.GUIElement.LAYER_LABEL_ACTIVE_FILL_COLOR;
+            ctx.fillStyle = this.model.layerColor;
         } else {
-            ctx.fillStyle = Wick.GUIElement.LAYER_LABEL_INACTIVE_FILL_COLOR;
+            let color = this.model.layerColor; //"#b7b7b7"
+            let red, green, blue;
+            if(color.includes("#")){
+                // Parse original RGB values
+                red = parseRGB(color)[0];
+                green = parseRGB(color)[1];
+                blue = parseRGB(color)[2]
+            }
+            else{
+                color = color.replace(/[^\d.,]/g, '').split(',').map(Number);
+                red = color[0]
+                green = color[1]
+                blue = color[2]
+            }
+
+            // Overlay factor (0–1)
+            let customAlpha = 200 // edit this to tweak how light the inactive color is
+            let overlayAlpha = customAlpha / 255;
+
+            // Overlay color (183,183,183)
+            let overlay = 183;
+
+            // Blend each channel
+            red = Math.round(overlay * overlayAlpha + red * (1 - overlayAlpha));
+            green = Math.round(overlay * overlayAlpha + green * (1 - overlayAlpha));
+            blue = Math.round(overlay * overlayAlpha + blue * (1 - overlayAlpha));
+
+            ctx.fillStyle = "#" + toHex(red) + toHex(green) + toHex(blue);
+        }
+
+        // Convert back to hex string
+        function toHex(n) {
+            return n.toString(16).padStart(2, '0');
+        }
+
+        function parseRGB(color) {
+            let red, green, blue, alpha;
+            if (color.includes('#')){
+                // condense color down to rgba values
+                color = color.replace(/^#/, '');
+
+                // Parse original RGB values
+                red = parseInt(color.substring(0, 2), 16);
+                green = parseInt(color.substring(2, 4), 16);
+                blue = parseInt(color.substring(4, 6), 16);
+                alpha = parseInt(color.substring(6, 8));
+                return [red, green, blue, alpha]
+            }
+            else {
+                color = color.match(/[\d.]+/g).map(Number);
+                return color;
+            }
         }
 
         if(this.model.isSelected) {
@@ -101,15 +152,32 @@ Wick.GUIElement.Layer = class extends Wick.GUIElement {
         ctx.restore();
 
         // Label text
+        let color = this.model.layerColor;
+        let warm = false;
+        let rgb = parseRGB(color);
+        if((rgb[0] - rgb[2]) > 0 && rgb[1] < 113) warm = true
         var maxWidth = Wick.GUIElement.LAYERS_CONTAINER_WIDTH - 10;
         ctx.save();
         ctx.beginPath();
         ctx.rect(0, 0, maxWidth, this.gridCellHeight);
         ctx.clip();
         ctx.font = "16px " + Wick.GUIElement.LAYER_LABEL_FONT_FAMILY;
-        ctx.fillStyle = this.model.isActive
-          ? Wick.GUIElement.LAYER_LABEL_ACTIVE_FONT_COLOR
-          : Wick.GUIElement.LAYER_LABEL_INACTIVE_FONT_COLOR;
+        if(this.model.isActive == true) {
+            if(warm == false){
+                ctx.fillStyle = Wick.GUIElement.LAYER_LABEL_ACTIVE_FONT_COLOR
+            }
+            else {
+                ctx.fillStyle = "#ffffff"
+            }
+        }
+        else{
+            if(warm == false){
+                ctx.fillStyle = Wick.GUIElement.LAYER_LABEL_INACTIVE_FONT_COLOR;
+            }
+            else{
+                ctx.fillStyle = "#c5c5c5"
+            }
+        }
         ctx.fillText(this.model.name, 57, this.gridCellHeight / 2 + 6);
         ctx.restore();
 

jsconfig.json

@@ -1,5 +1,6 @@
 {
   "compilerOptions": {
+    "ignoreDeprecations": "6.0",
     "baseUrl": "src"
   },
   "include": ["src"]