From 32c41a56fd870f28be70c9b9cfb4fe6dfbb16654 Mon Sep 17 00:00:00 2001
From: Jose Antonio Marquez
Date: Sat, 23 Jun 2012 19:22:53 -0700
Subject: Adding support for gradients on chips

Need to handle other color modes, currently only handling HSV and gradients. Working on getting other modes supported. Also, will need clean up color popup manager after completion.
---
 .../color/colorpanelbase.reel/colorpanelbase.js    |  6 +++-
 js/panels/color/colorpopup-manager.js              | 34 +++++++++++++++++-----
 2 files changed, 31 insertions(+), 9 deletions(-)

(limited to 'js/panels/color')

diff --git a/js/panels/color/colorpanelbase.reel/colorpanelbase.js b/js/panels/color/colorpanelbase.reel/colorpanelbase.js
index 26d4932f..bf2ada96 100755
--- a/js/panels/color/colorpanelbase.reel/colorpanelbase.js
+++ b/js/panels/color/colorpanelbase.reel/colorpanelbase.js
@@ -480,7 +480,11 @@ exports.ColorPanelBase = Montage.create(Component, {
                         }
                         if (c && c.css) {
                             this.ctx.clearRect(0, 0, this.cvs.width, this.cvs.height);
-                            this.style.backgroundColor = c.css;
+                            if (m === 'gradient') {
+                            	this.style.backgroundImage = c.css;
+                            } else {
+	                            this.style.backgroundColor = c.css;
+                            }
                         } else {
                             this.drawNoColor(this, this.cvs);
                         }
diff --git a/js/panels/color/colorpopup-manager.js b/js/panels/color/colorpopup-manager.js
index 29f9ec94..0ea02192 100755
--- a/js/panels/color/colorpopup-manager.js
+++ b/js/panels/color/colorpopup-manager.js
@@ -106,10 +106,20 @@ exports.ColorPopupManager = Montage.create(Component, {
     },
     ////////////////////////////////////////////////////////////////////
     //
+    _popupChipBtn: {
+    	value: null
+    },
+    ////////////////////////////////////////////////////////////////////
+    //
     _popupGradientChipBase: {
     	value: null
     },
     ////////////////////////////////////////////////////////////////////
+    //
+    _popupGradientChipBtn: {
+    	value: null
+    },
+    ////////////////////////////////////////////////////////////////////
     //Storing color manager
     _colorManager: {
         value: null
@@ -208,7 +218,7 @@ exports.ColorPopupManager = Montage.create(Component, {
     	value: function (e) {
     		//
     		var ctx,
-    			cvs = this.application.ninja.colorController.colorView.currentChip.getElementsByTagName('canvas')[0],
+    			cvs = this._popupChipBtn.getElementsByTagName('canvas')[0],
     			rgb = this._popupChipBase.colorManager.rgb,
 				hsl = this._popupChipBase.colorManager.hsl,
 				alpha = this._popupChipBase.colorManager.alpha.value;
@@ -236,7 +246,7 @@ exports.ColorPopupManager = Montage.create(Component, {
 				ctx.stroke();
 			}
     		//
-    		this.application.ninja.colorController.colorView.currentChip.color('rgb', {r: rgb.r, g: rgb.g, b: rgb.b, a: alpha, css: 'rgba('+rgb.r+', '+rgb.g+', '+rgb.b+', '+alpha+')'});
+    		this._popupChipBtn.color('rgb', {r: rgb.r, g: rgb.g, b: rgb.b, a: alpha, css: 'rgba('+rgb.r+', '+rgb.g+', '+rgb.b+', '+alpha+')'});
     	}
     },
     ////////////////////////////////////////////////////////////////////
@@ -245,7 +255,7 @@ exports.ColorPopupManager = Montage.create(Component, {
     	value: function (e) {
     		//
     		var ctx,
-    			cvs = this.application.ninja.colorController.colorView.currentChip.getElementsByTagName('canvas')[0],
+    			cvs = this._popupGradientChipBtn.getElementsByTagName('canvas')[0],
     			rgb = this._popupGradientChipBase.colorManager.rgb,
 				hsl = this._popupGradientChipBase.colorManager.hsl,
 				alpha = this._popupGradientChipBase.colorManager.alpha.value;
@@ -273,7 +283,7 @@ exports.ColorPopupManager = Montage.create(Component, {
 				ctx.stroke();
 			}
     		//
-    		this.application.ninja.colorController.colorView.currentChip.color('rgb', {r: rgb.r, g: rgb.g, b: rgb.b, a: alpha, css: 'rgba('+rgb.r+', '+rgb.g+', '+rgb.b+', '+alpha+')'});
+    		this._popupGradientChipBtn.color('rgb', {r: rgb.r, g: rgb.g, b: rgb.b, a: alpha, css: 'rgba('+rgb.r+', '+rgb.g+', '+rgb.b+', '+alpha+')'});
     	}
     },
     ////////////////////////////////////////////////////////////////////
@@ -294,6 +304,8 @@ exports.ColorPopupManager = Montage.create(Component, {
 	    			return;
     			}
     			//
+    			this._popupChipBtn = this.application.ninja.colorController.colorView.currentChip;
+    			//
     			this._colorChipPopupDrawing = true;
     			////////////////////////////////////////////////////
     			//Initializing events
@@ -370,6 +382,8 @@ exports.ColorPopupManager = Montage.create(Component, {
 	    		this.hideGradientChipPopup();
     			return;
     		} else {
+    			//
+    			this._popupGradientChipBtn = this.application.ninja.colorController.colorView.currentChip;
 	    		//
     			this._colorGradientPopupDrawing = true;
     			////////////////////////////////////////////////////
@@ -590,16 +604,20 @@ exports.ColorPopupManager = Montage.create(Component, {
     			if (e._event.hsv) {
     				this._popupChipBase.colorManager.hsv = {h: e._event.hsv.h, s: e._event.hsv.s, v: e._event.hsv.v, type: e._event.type, wasSetByCode: e._event.wasSetByCode};
     				this.colorChipChange(e);
-    			} else {
-	    			//console.log(e._event);
+    			} else if (!this._popupBase || (this._popupBase && !this._popupBase.opened)){
+	    			if (e._event.gradient && !e._event.wasSetByCode) {
+	    				//
+		    			this._popupChipBtn.color('gradient', e._event.gradient);
+	    			}
     			}
     			return;
     		} else if (this._popupGradientChipBase && this._popupGradientChipBase.opened) {
     			if (e._event.hsv) {
     				this._popupGradientChipBase.colorManager.hsv = {h: e._event.hsv.h, s: e._event.hsv.s, v: e._event.hsv.v, type: e._event.type, wasSetByCode: e._event.wasSetByCode};
     				this.colorGradientChipChange(e);
-    			} else {
-	    			//console.log(e._event);
+    			} else if (!this._popupBase || (this._popupBase && !this._popupBase.opened)){
+	    			//
+		    		this._popupChipBtn.color('gradient', e._event.gradient);
     			}
     			return;
     		}
-- 
cgit v1.2.3