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. --- js/panels/color/colorpanelbase.reel/colorpanelbase.js | 6 +++++- 1 file changed, 5 insertions(+), 1 deletion(-) (limited to 'js/panels/color/colorpanelbase.reel/colorpanelbase.js') 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); } -- cgit v1.2.3 From b435e97ff312eea15086069ce0ab6991acac32ff Mon Sep 17 00:00:00 2001 From: Jose Antonio Marquez Date: Mon, 25 Jun 2012 11:52:28 -0700 Subject: Color Popup Test Candidate Preliminary check in for testing to commence on new color popup functionality. --- .../color/colorpanelbase.reel/colorpanelbase.js | 26 +++++++++++----------- 1 file changed, 13 insertions(+), 13 deletions(-) (limited to 'js/panels/color/colorpanelbase.reel/colorpanelbase.js') diff --git a/js/panels/color/colorpanelbase.reel/colorpanelbase.js b/js/panels/color/colorpanelbase.reel/colorpanelbase.js index bf2ada96..b3045db1 100755 --- a/js/panels/color/colorpanelbase.reel/colorpanelbase.js +++ b/js/panels/color/colorpanelbase.reel/colorpanelbase.js @@ -170,7 +170,7 @@ exports.ColorPanelBase = Montage.create(Component, { this.addButton('current', this.btnCurrent); this.addButton('previous', this.btnPrevious); // - this.addButton('hexinput', this.hextext); + this.addButton('hexinput', this.hextext, this.colorManager); this.addButton('reset', this.btnDefault); this.addButton('nocolor', this.btnNoColor); this.addButton('swap', this.btnSwap); @@ -461,7 +461,7 @@ exports.ColorPanelBase = Montage.create(Component, { //////////////////////////////////////////////////////////////////// // addButton: { - value: function (type, button) { + value: function (type, button, manager) { // switch (type.toLocaleLowerCase()) { case 'chip': @@ -487,7 +487,7 @@ exports.ColorPanelBase = Montage.create(Component, { } } else { this.drawNoColor(this, this.cvs); - } + }9 this.colorValue = c; this.colorMode = m; this.otherInput = false; @@ -677,8 +677,8 @@ exports.ColorPanelBase = Montage.create(Component, { case 'hexinput': var hexinp = HotText.create(); hexinp.element = button; - hexinp.labelFunction = this._updateHexValue.bind(this); - hexinp.inputFunction = this._hottextHexInput.bind(this); + hexinp.labelFunction = this._updateHexValue.bind(manager); + hexinp.inputFunction = this._hottextHexInput.bind(manager); hexinp.needsDraw = true; this._buttons.hexinput.push(hexinp); return hexinp; @@ -1248,23 +1248,23 @@ exports.ColorPanelBase = Montage.create(Component, { } //Checking for panel mode and converting the color to the panel mode if (this._panelMode === 'hsl') { - rgb = this.colorManager.hexToRgb(color); + rgb = this.hexToRgb(color); if (rgb) { - update = this.colorManager.rgbToHsl(rgb.r, rgb.g, rgb.b); + update = this.rgbToHsl(rgb.r, rgb.g, rgb.b); update.wasSetByCode = false; update.type = 'change'; - this.colorManager.hsl = update; + this.hsl = update; } else { - this.colorManager.applyNoColor(false); + this.applyNoColor(false); } } else { - update = this.colorManager.hexToRgb(color); + update = this.hexToRgb(color); if (update) { update.wasSetByCode = false; update.type = 'change'; - this.colorManager.rgb = update; + this.rgb = update; } else { - this.colorManager.applyNoColor(false); + this.applyNoColor(false); } } } @@ -1273,7 +1273,7 @@ exports.ColorPanelBase = Montage.create(Component, { // _updateHexValue: { value: function (v) { - return this.colorManager.hex; + return this.hex; } }, //////////////////////////////////////////////////////////////////// -- cgit v1.2.3 From 9ebf80d943b894242d90cf62bc3078c6a83041ad Mon Sep 17 00:00:00 2001 From: Jose Antonio Marquez Date: Tue, 26 Jun 2012 13:39:56 -0700 Subject: Fixing gradient/solid color toggle Also added a null value setter fix for no color hex --- js/panels/color/colorpanelbase.reel/colorpanelbase.js | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) (limited to 'js/panels/color/colorpanelbase.reel/colorpanelbase.js') diff --git a/js/panels/color/colorpanelbase.reel/colorpanelbase.js b/js/panels/color/colorpanelbase.reel/colorpanelbase.js index b3045db1..db46ced7 100755 --- a/js/panels/color/colorpanelbase.reel/colorpanelbase.js +++ b/js/panels/color/colorpanelbase.reel/colorpanelbase.js @@ -482,12 +482,14 @@ exports.ColorPanelBase = Montage.create(Component, { this.ctx.clearRect(0, 0, this.cvs.width, this.cvs.height); if (m === 'gradient') { this.style.backgroundImage = c.css; + this.style.backgroundColor = 'transparent'; } else { this.style.backgroundColor = c.css; + this.style.backgroundImage = 'none'; } } else { this.drawNoColor(this, this.cvs); - }9 + } this.colorValue = c; this.colorMode = m; this.otherInput = false; -- cgit v1.2.3 From f704705fd85c1af44ad86f8c29e8e93d330796e5 Mon Sep 17 00:00:00 2001 From: Jose Antonio Marquez Date: Wed, 27 Jun 2012 15:31:53 -0700 Subject: Adding a dismiss step when switching popups This is needed to allow for model to change during draw routines --- js/panels/color/colorpanelbase.reel/colorpanelbase.js | 4 ++++ 1 file changed, 4 insertions(+) (limited to 'js/panels/color/colorpanelbase.reel/colorpanelbase.js') diff --git a/js/panels/color/colorpanelbase.reel/colorpanelbase.js b/js/panels/color/colorpanelbase.reel/colorpanelbase.js index db46ced7..40c384fb 100755 --- a/js/panels/color/colorpanelbase.reel/colorpanelbase.js +++ b/js/panels/color/colorpanelbase.reel/colorpanelbase.js @@ -1469,6 +1469,10 @@ exports.ColorPanelBase = Montage.create(Component, { } } } else { + if (this.colorManager.input === 'chip') { + this.application.ninja.colorController.colorPopupManager.hideColorPopup(); + return; + } //TODO: Change popup to use montage's built in popup this.application.ninja.colorController.colorPopupManager.hideColorPopup(); // -- cgit v1.2.3 From 4f0104b0120219cbba2e0ac02c7b6aea437dd212 Mon Sep 17 00:00:00 2001 From: Jose Antonio Marquez Date: Wed, 27 Jun 2012 16:26:16 -0700 Subject: Fixing minor color history bug --- js/panels/color/colorpanelbase.reel/colorpanelbase.js | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) (limited to 'js/panels/color/colorpanelbase.reel/colorpanelbase.js') diff --git a/js/panels/color/colorpanelbase.reel/colorpanelbase.js b/js/panels/color/colorpanelbase.reel/colorpanelbase.js index 40c384fb..7208c2da 100755 --- a/js/panels/color/colorpanelbase.reel/colorpanelbase.js +++ b/js/panels/color/colorpanelbase.reel/colorpanelbase.js @@ -1452,6 +1452,10 @@ exports.ColorPanelBase = Montage.create(Component, { } else if (input === 'fill') { other = 'stroke'; } + if (this.colorManager.input === 'chip') { + this.application.ninja.colorController.colorPopupManager.hideColorPopup(); + return; + } //TODO: Change popup to use montage's built in popup if (this.colorManager.input === input) { // @@ -1469,10 +1473,6 @@ exports.ColorPanelBase = Montage.create(Component, { } } } else { - if (this.colorManager.input === 'chip') { - this.application.ninja.colorController.colorPopupManager.hideColorPopup(); - return; - } //TODO: Change popup to use montage's built in popup this.application.ninja.colorController.colorPopupManager.hideColorPopup(); // -- cgit v1.2.3 From 5cd0ec9be1de5014c227118333be8ec596e908bd Mon Sep 17 00:00:00 2001 From: Jose Antonio Marquez Date: Wed, 27 Jun 2012 17:27:17 -0700 Subject: Fixing history bug --- js/panels/color/colorpanelbase.reel/colorpanelbase.js | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) (limited to 'js/panels/color/colorpanelbase.reel/colorpanelbase.js') diff --git a/js/panels/color/colorpanelbase.reel/colorpanelbase.js b/js/panels/color/colorpanelbase.reel/colorpanelbase.js index 7208c2da..24eb86ea 100755 --- a/js/panels/color/colorpanelbase.reel/colorpanelbase.js +++ b/js/panels/color/colorpanelbase.reel/colorpanelbase.js @@ -1421,6 +1421,10 @@ exports.ColorPanelBase = Montage.create(Component, { // selectInputType: { value: function (type) { + if (this.colorManager.input === 'chip') { + this.application.ninja.colorController.colorPopupManager.hideColorPopup(); + return; + } //Checking for the type to be formatted as expected, otherwise we unselected all buttons try { type._event.srcElement.inputType; @@ -1452,10 +1456,6 @@ exports.ColorPanelBase = Montage.create(Component, { } else if (input === 'fill') { other = 'stroke'; } - if (this.colorManager.input === 'chip') { - this.application.ninja.colorController.colorPopupManager.hideColorPopup(); - return; - } //TODO: Change popup to use montage's built in popup if (this.colorManager.input === input) { // -- cgit v1.2.3 From 0fea630c01f82d964670bcc2084a638c5e4c5dc7 Mon Sep 17 00:00:00 2001 From: Jose Antonio Marquez Date: Thu, 28 Jun 2012 10:33:02 -0700 Subject: Fixing color panel sliders updating --- .../color/colorpanelbase.reel/colorpanelbase.js | 59 +++++++++------------- 1 file changed, 23 insertions(+), 36 deletions(-) (limited to 'js/panels/color/colorpanelbase.reel/colorpanelbase.js') diff --git a/js/panels/color/colorpanelbase.reel/colorpanelbase.js b/js/panels/color/colorpanelbase.reel/colorpanelbase.js index 24eb86ea..855d4afa 100755 --- a/js/panels/color/colorpanelbase.reel/colorpanelbase.js +++ b/js/panels/color/colorpanelbase.reel/colorpanelbase.js @@ -982,58 +982,45 @@ exports.ColorPanelBase = Montage.create(Component, { _updateValueFromSH: { value: function (e) { // - var update; + var update, type; // if (!e._event.wasSetByCode) { + // + if (!e.target.cInputType) { + type = 'hottext'; + } else { + type = 'slider' + } + // if (e.target.changesColor) { - // - //this.application.ninja.colorController.colorPopupManager.hideColorPopup(); // if (this.panelMode === 'rgb') { - if (e.target.cInputType === 'slider') { - // - if (this.colorManager.rgb && Math.round(this._combo[0].slider.value) === this.colorManager.rgb.r && Math.round(this._combo[1].slider.value) === this.colorManager.rgb.g && Math.round(this._combo[2].slider.value) === this.colorManager.rgb.b) { - return; - } - // - update = { r: Math.round(this._combo[0].slider.value), g: Math.round(this._combo[1].slider.value), b: Math.round(this._combo[2].slider.value) }; - } else { - // - if (this.colorManager.rgb && Math.round(this._combo[0].hottext.value) === this.colorManager.rgb.r && Math.round(this._combo[1].hottext.value) === this.colorManager.rgb.g && Math.round(this._combo[2].hottext.value) === this.colorManager.rgb.b) { - return; - } - // - update = { r: Math.round(this._combo[0].hottext.value), g: Math.round(this._combo[1].hottext.value), b: Math.round(this._combo[2].hottext.value) }; + // + if (this.colorManager.rgb && Math.round(this._combo[0][type].value) === this.colorManager.rgb.r && Math.round(this._combo[1][type].value) === this.colorManager.rgb.g && Math.round(this._combo[2][type].value) === this.colorManager.rgb.b) { + return; } + // + update = { r: Math.round(this._combo[0][type].value), g: Math.round(this._combo[1][type].value), b: Math.round(this._combo[2][type].value) }; + // update.wasSetByCode = false; update.type = 'change'; this.colorManager.rgb = update; } else if (this.panelMode === 'hsl') { - if (e.target.cInputType === 'slider') { - // - if (this.colorManager.hsl && Math.round(this._combo[0].slider.value) === this.colorManager.hsl.h && Math.round(this._combo[1].slider.value) === this.colorManager.hsl.s && Math.round(this._combo[2].slider.value) === this.colorManager.hsl.l) { - return; - } - // - update = { h: Math.round(this._combo[0].slider.value), s: Math.round(this._combo[1].slider.value), l: Math.round(this._combo[2].slider.value) }; - } else { - // - if (this.colorManager.hsl && Math.round(this._combo[0].hottext.value) === this.colorManager.hsl.h && Math.round(this._combo[1].hottext.value) === this.colorManager.hsl.s && Math.round(this._combo[2].hottext.value) === this.colorManager.hsl.l) { - return; - } - // - update = { h: Math.round(this._combo[0].hottext.value), s: Math.round(this._combo[1].hottext.value), l: Math.round(this._combo[2].hottext.value) }; + // + if (this.colorManager.hsl && Math.round(this._combo[0][type].value) === this.colorManager.hsl.h && Math.round(this._combo[1][type].value) === this.colorManager.hsl.s && Math.round(this._combo[2][type].value) === this.colorManager.hsl.l) { + return; } + // + update = { h: Math.round(this._combo[0][type].value), s: Math.round(this._combo[1][type].value), l: Math.round(this._combo[2][type].value) }; + // update.wasSetByCode = false; update.type = 'change'; this.colorManager.hsl = update; } } else { - if (e.target.cInputType === 'slider') { - update = { value: this._combo[3].slider.value / 100, wasSetByCode: false, type: 'change' }; - } else { - update = { value: this._combo[3].hottext.value / 100, wasSetByCode: false, type: 'change' }; - } + // + update = { value: this._combo[3][type].value / 100, wasSetByCode: false, type: 'change' }; + // this.colorManager.alpha = update; } } -- cgit v1.2.3 From 769d3e569ca58acff5ff3530bca8998459f2f08d Mon Sep 17 00:00:00 2001 From: Jose Antonio Marquez Date: Thu, 28 Jun 2012 11:21:40 -0700 Subject: Fixing chips updating with alpha change --- js/panels/color/colorpanelbase.reel/colorpanelbase.js | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) (limited to 'js/panels/color/colorpanelbase.reel/colorpanelbase.js') diff --git a/js/panels/color/colorpanelbase.reel/colorpanelbase.js b/js/panels/color/colorpanelbase.reel/colorpanelbase.js index 855d4afa..5ac93dbc 100755 --- a/js/panels/color/colorpanelbase.reel/colorpanelbase.js +++ b/js/panels/color/colorpanelbase.reel/colorpanelbase.js @@ -260,7 +260,7 @@ exports.ColorPanelBase = Montage.create(Component, { return; } //Checking for event mode to be color change (NOT PANEL MODE RELATED) - if (e._event.mode === 'hsv' || e._event.mode === 'hsl' || e._event.mode === 'rgb' || e._event.mode === 'hex' || e._event.mode === 'nocolor' || e._event.mode === 'gradient') { + if (e._event.mode === 'hsv' || e._event.mode === 'hsl' || e._event.mode === 'rgb' || e._event.mode === 'hex' || e._event.mode === 'nocolor' || e._event.mode === 'gradient' || e._event.mode === 'alpha') { //Checking for panel color mode (RGB or HSL) to assign correct slider values if (this.panelMode === 'rgb' && e._event.rgba) { this._combo[0].slider.value = e._event.rgba.r; @@ -1019,7 +1019,7 @@ exports.ColorPanelBase = Montage.create(Component, { } } else { // - update = { value: this._combo[3][type].value / 100, wasSetByCode: false, type: 'change' }; + update = { value: this._combo[3][type].value/100, wasSetByCode: false, type: 'change' }; // this.colorManager.alpha = update; } -- cgit v1.2.3