color history service

Resources/EditorData/AtomicEditor/editor/ui/colorchooser.tb.txt

@@ -1,39 +1,86 @@
+# == Atomic Color Chooser =====================================================
+
+definitions
+	colorspot
+		lp: width: 60, height: 26, max-width: 70, max-height: 32
+
 TBLayout: axis: y, distribution: gravity, position: left
-	lp: min-width: 300
 	TBLayout: axis: x, distribution: gravity
-		TBColorWheel: id: colorwheel, skin: HSVSkin
-				lp: width: 256, height: 256
-		TBSlider: id: lslider, axis: y, min: 0, max: 255, value: 128
-	TBLayout: axis: x, distribution: available, gravity: left right
-		TBColorWidget: id: colornew, color: blue, skin: Checkerboard
-				lp: width: 128, height: 64, max-width: 150, max-height: 80
-		TBColorWidget: id: colorold, color: red, skin: Checkerboard
-				lp: width: 128, height: 64, max-width: 150, max-height: 80
-	TBLayout: axis: y, distribution: gravity
 		TBLayout: axis: x, distribution: gravity
-			TBTextField: text: " R ", id: redlabel
-			TBInlineSelect: id: redselect, min: 0, max: 255, connection: rconn
-			TBSlider: id: redslider, min: 0, max: 255, connection: rconn
-		TBLayout: axis: x, distribution: gravity
-			TBTextField: text: " G ", id: greenlabel
-			TBInlineSelect: id: greenselect, min: 0, max: 255, connection: gconn
-			TBSlider: id: greenslider, min: 0, max: 255, connection: gconn
-		TBLayout: axis: x, distribution: gravity
-			TBTextField: text: " B ", id: bluelabel
-			TBInlineSelect: id: blueselect, min: 0, max: 255, connection: bconn
-			TBSlider: id: blueslider, min: 0, max: 255, connection: bconn
-		TBSeparator: gravity: left right
-		TBLayout: axis: x, distribution: gravity
-			TBTextField: text: " A ", id: alphalabel
-			TBInlineSelect: id: alphaselect, min: 0, max: 255, connection: aconn
-			TBSlider: id: alphaslider, min: 0, max: 255, value: 255, connection: aconn
-		TBSeparator: gravity: left right
+			TBColorWheel: id: colorwheel, skin: HSVSkin
+					lp: width: 256, height: 256
+			TBSlider: id: lslider, axis: y, min: 0, max: 255, value: 128
+
+		TBLayout: axis: y, distribution: gravity
+
+			TBLayout: axis: x, distribution: available, gravity: left right
+				TBColorWidget: id: colornew, color: blue, skin: Checkerboard
+					lp: width: 128, height: 64, max-width: 150, max-height: 80
+					TBTextField: text: "  New color"
+				TBColorWidget: id: colorold, color: red, skin: Checkerboard
+					lp: width: 128, height: 64, max-width: 150, max-height: 80
+					TBTextField: text: "  Old color"
+
+			TBLayout: axis: x, distribution: gravity
+				TBTextField: text: " R ", id: redlabel
+				TBInlineSelect: id: redselect, min: 0, max: 255, connection: rconn
+				TBSlider: id: redslider, min: 0, max: 255, connection: rconn
+			TBLayout: axis: x, distribution: gravity
+				TBTextField: text: " G ", id: greenlabel
+				TBInlineSelect: id: greenselect, min: 0, max: 255, connection: gconn
+				TBSlider: id: greenslider, min: 0, max: 255, connection: gconn
+			TBLayout: axis: x, distribution: gravity
+				TBTextField: text: " B ", id: bluelabel
+				TBInlineSelect: id: blueselect, min: 0, max: 255, connection: bconn
+				TBSlider: id: blueslider, min: 0, max: 255, connection: bconn
+			TBSeparator: gravity: left right
+			TBLayout: axis: x, distribution: gravity
+				TBTextField: text: " A ", id: alphalabel
+				TBInlineSelect: id: alphaselect, min: 0, max: 255, connection: aconn
+				TBSlider: id: alphaslider, min: 0, max: 255, value: 255, connection: aconn
+
+	TBLayout: axis: y, distribution: gravity, spacing: 8
+
+		TBLayout: axis: x, distribution: available, gravity: left
+			TBButton: id: history0
+				@include definitions>colorspot
+				TBColorWidget: id: chistory0, color: #000000, skin: Checkerboard
+			TBButton: id: history1
+				@include definitions>colorspot
+				TBColorWidget: id: chistory1, color: #ffffff, skin: Checkerboard
+			TBButton: id: history2
+				@include definitions>colorspot
+				TBColorWidget: id: chistory2, color: #00ff00, skin: Checkerboard
+			TBButton: id: history3
+				@include definitions>colorspot
+				TBColorWidget: id: chistory3, color: #0000ff, skin: Checkerboard
+			TBButton: id: history4
+				@include definitions>colorspot
+				TBColorWidget: id: chistory4, color: #ff0000, skin: Checkerboard
+			TBButton: id: history5
+				@include definitions>colorspot
+				TBColorWidget: id: chistory5, color: #ff00ff, skin: Checkerboard
+			TBButton: id: history6
+				@include definitions>colorspot
+				TBColorWidget: id: chistory6, color: #ffff00, skin: Checkerboard
+			TBButton: id: history7
+				@include definitions>colorspot
+				TBColorWidget: id: chistory7, color: #668866, skin: Checkerboard
+
 		TBLayout: axis: x, distribution: available, gravity: left right
-			TBEditField: id: infohex, text: "#000000", readonly: 1
-				font: size: 16
-			TBEditField: id: infohsl, text: "0.0, 0.0, 0,0", readonly: 1
-				font: size: 16
-	TBSeparator: gravity: left right, skin: AESeparator
-	TBLayout:
-		TBButton: text: OK, id: cokbutton
-		TBButton: text: Cancel, id: ccancelbutton
+			TBLayout: axis: x, distribution: available, gravity: left
+				TBTextField: text: "RGB ", text-align: right
+					font: size: 15
+				TBEditField: id: infohex, text: "#000000", readonly: 1
+					font: size: 15
+			TBLayout: axis: x, distribution: available, gravity: left
+				TBTextField: text: "HSL ", text-align: right
+					font: size: 15
+				TBEditField: id: infohsl, text: "-0.00, -0.00, -0,00", readonly: 1
+					font: size: 15
+
+		TBSeparator: gravity: left right, skin: AESeparator
+
+		TBLayout:
+			TBButton: text: OK, id: cokbutton
+			TBButton: text: Cancel, id: ccancelbutton

Script/AtomicEditor/editor/Preferences.ts

@@ -65,6 +65,26 @@ class Preferences {
         this.write();
     }
 
+    addColorHistory(path: string): void {
+        var index = this._prefs.colorHistory.indexOf(path);   // search array for entry
+        if (index >= 0) {                                     // if its in there, 
+            this._prefs.colorHistory.splice(index, 1);        // REMOVE it.
+        }
+        this._prefs.colorHistory.unshift(path);               // now add it to beginning of array
+        this.updateColorHistory(true);                        // update and write out
+    }
+
+    updateColorHistory(write: boolean = false): void {
+
+        var len = this._prefs.colorHistory.length;                 // we only need indexes 0-7 now
+        var over = 8;
+        if ( len >= over )                                         // have MOaR than we need
+            this._prefs.colorHistory.splice( over, len - over );   // remove the excess
+
+        if (write)
+            this.write();
+    }
+
     getPreferencesFullPath(): string {
         var filePath = this.fileSystem.getAppPreferencesDir("AtomicEditor", "Preferences");
         filePath += "prefs.json";
@@ -153,6 +173,10 @@ class Preferences {
         return this._prefs.recentProjects;
     }
 
+    get colorHistory(): string[] {
+        return this._prefs.colorHistory;
+    }
+
     get uiData(): UserInterfaceData {
         return this._prefs.uiData;
     }
@@ -323,6 +347,8 @@ class PreferencesFormat {
 
         this.recentProjects = [];
 
+        this.colorHistory = [ "#000000", "#ffffff", "#00ff00", "#0000ff", "#ff0000", "#ff00ff", "#ffff00", "#668866" ];
+
         this.editorWindow = {
             x: 0,
             y: 0,
@@ -377,6 +403,11 @@ class PreferencesFormat {
             updatedMissingDefaults = true;
         }
 
+        if (!prefs.colorHistory) {
+            prefs.colorHistory = this.colorHistory;
+            updatedMissingDefaults = true;
+        }
+
         if (!prefs.editorWindow) {
             prefs.editorWindow = this.editorWindow;
             updatedMissingDefaults = true;
@@ -411,6 +442,7 @@ class PreferencesFormat {
     codeEditor: MonacoEditorSettings;
     uiData: UserInterfaceData;
     editorBuildData: EditorBuildData;
+    colorHistory: string[];
 }
 
 export = Preferences;

Script/AtomicEditor/ui/frames/inspector/ColorChooser.ts

@@ -22,6 +22,7 @@
 // http://axonflux.com/handy-rgb-to-hsl-and-rgb-to-hsv-color-model-c
 
 import EditorUI = require("ui/EditorUI");
+import Preferences = require("editor/Preferences");
 
 class ColorChooser extends Atomic.UIWindow {
 
@@ -76,6 +77,8 @@ class ColorChooser extends Atomic.UIWindow {
 
         (<Atomic.UIButton>this.getWidget("cokbutton")).onClick = () => {
 
+            Preferences.getInstance().addColorHistory(this.infohex.text);
+
             this.sendEvent("UIWidgetEditComplete", { widget : this });
             this.unsubscribeFromEvent("WidgetDeleted");
             this.close();
@@ -121,6 +124,16 @@ class ColorChooser extends Atomic.UIWindow {
 
         Atomic.ui.blockChangedEvents = true;
 
+        var colorhist = Preferences.getInstance().colorHistory;
+        (<Atomic.UIColorWidget>this.getWidget("chistory0")).setColorString(colorhist[0]);
+        (<Atomic.UIColorWidget>this.getWidget("chistory1")).setColorString(colorhist[1]);
+        (<Atomic.UIColorWidget>this.getWidget("chistory2")).setColorString(colorhist[2]);
+        (<Atomic.UIColorWidget>this.getWidget("chistory3")).setColorString(colorhist[3]);
+        (<Atomic.UIColorWidget>this.getWidget("chistory4")).setColorString(colorhist[4]);
+        (<Atomic.UIColorWidget>this.getWidget("chistory5")).setColorString(colorhist[5]);
+        (<Atomic.UIColorWidget>this.getWidget("chistory6")).setColorString(colorhist[6]);
+        (<Atomic.UIColorWidget>this.getWidget("chistory7")).setColorString(colorhist[7]);
+
         this.oldcolor.setAlpha( startRGBA[3] * 255 );
         this.a_sld.setValue(this.rgbhsla[6]);
 
@@ -130,9 +143,8 @@ class ColorChooser extends Atomic.UIWindow {
 
     handleWidgetEvent(ev: Atomic.UIWidgetEvent) {
 
+        let changed = false;
         if (ev.type == Atomic.UI_EVENT_TYPE_CHANGED) {
-
-            let changed = false;
             let hsltargets = ["colorwheel", "lslider"];
             let rgbtargets = {
                 "redselect" : 0,
@@ -142,7 +154,7 @@ class ColorChooser extends Atomic.UIWindow {
                 "blueselect" : 2,
                 "blueslider" : 2,
                 "alphaslider" : 3
-            }
+            };
 
             if (hsltargets.indexOf(ev.target.id) > -1) {
 
@@ -163,15 +175,61 @@ class ColorChooser extends Atomic.UIWindow {
                 this.update_hslwidgets();
 
             }
+        }
 
-            if (changed) {
-
-                this.sendEvent("ColorChooserChanged", { widget : this });
+        if (ev.type == Atomic.UI_EVENT_TYPE_CLICK) {
 
+            if ( ev.target.id == "history0" || ev.target.id == "history1"
+                    || ev.target.id == "history2" || ev.target.id == "history3"
+                    || ev.target.id == "history4" || ev.target.id == "history5"
+                    || ev.target.id == "history6" || ev.target.id == "history7") {
+                var which = ev.target.id.charAt(7); //parseInt(ev.target.id); // which button was pressed
+                var colorcell = Preferences.getInstance().colorHistory[which]; // get the string
+                this.ColorFromString ( colorcell );
             }
 
         }
 
+        if (changed) {
+
+            this.sendEvent("ColorChooserChanged", { widget : this });
+
+        }
+
+    }
+
+    ColorFromString ( colorString: String ) {
+
+        let changed = false;
+        let hslx = colorString.split ( "," );
+        if ( colorString.indexOf( "#" ) == 0 && colorString.length == 7 ) { // decode well formed RGB
+
+            this.rgbhsla[0] = parseInt ( colorString.slice ( 1, 3 ), 16 );
+            this.rgbhsla[1] = parseInt ( colorString.slice ( 3, 5 ), 16 );
+            this.rgbhsla[2] = parseInt ( colorString.slice ( 5, 7 ), 16 );
+            this.recalc_hsl();
+            changed = true;
+
+        }
+        else if ( hslx.length == 2 ) {  // decode HSL
+
+            this.rgbhsla[3] = parseFloat ( hslx[0] );
+            this.rgbhsla[4] = parseFloat ( hslx[1] );
+            this.rgbhsla[5] = parseFloat ( hslx[2] );
+            this.recalc_rgb();
+            changed = true;
+
+        }
+
+        if (changed) {
+
+            this.fixcolor();
+            this.update_hslwidgets();
+            this.update_rgbwidgets();
+            this.sendEvent("ColorChooserChanged", { widget : this });
+
+        }
+
     }
 
     // return current color choice as a RGBA array