From 830b011d94d728882286d72e129f7405134957c7 Mon Sep 17 00:00:00 2001 From: Nivesh Rajbhandari Date: Wed, 1 Feb 2012 17:05:07 -0800 Subject: Updated color code in the PI to go through element mediator. Signed-off-by: Nivesh Rajbhandari --- js/panels/Color/colortoolbar.reel/colortoolbar.js | 64 +++--------- js/panels/properties/content.reel/content.js | 119 ++++++++-------------- 2 files changed, 56 insertions(+), 127 deletions(-) (limited to 'js/panels') diff --git a/js/panels/Color/colortoolbar.reel/colortoolbar.js b/js/panels/Color/colortoolbar.reel/colortoolbar.js index 19fe7b85..10ae8b6e 100644 --- a/js/panels/Color/colortoolbar.reel/colortoolbar.js +++ b/js/panels/Color/colortoolbar.reel/colortoolbar.js @@ -20,7 +20,7 @@ exports.ColorToolbar = Montage.create(Component, { //Storing stroke (stores color in mode use to select color) _stroke: { enumerable: false, - value: {colorMode: 'rgb', color: {r: 0, g: 0, b: 0, a: 1, css: 'rgb(0,0,0)'}, webGlColor: [0, 0, 0, 1]} + value: {colorMode: 'rgb', color: {r: 0, g: 0, b: 0, a: 1, css: 'rgb(0,0,0)', mode:'rgb', wasSetByCode: false, type: 'change'}, webGlColor: [0, 0, 0, 1]} }, //////////////////////////////////////////////////////////////////// // @@ -39,7 +39,7 @@ exports.ColorToolbar = Montage.create(Component, { //Storing fill (stores color in mode use to select color) _fill: { enumerable: false, - value: {colorMode: 'rgb', color: {r: 255, g: 255, b: 255, a: 1, css: 'rgb(255,255,255)'}, webGlColor: [1, 1, 1, 1]} + value: {colorMode: 'rgb', color: {r: 255, g: 255, b: 255, a: 1, css: 'rgb(255,255,255)', mode:'rgb', wasSetByCode: false, type: 'change'}, webGlColor: [1, 1, 1, 1]} }, //////////////////////////////////////////////////////////////////// // @@ -95,76 +95,38 @@ exports.ColorToolbar = Montage.create(Component, { didDraw: { enumerable: false, value: function() { - // + this.fill_btn.addEventListener('change', function (e) { - // - var temp; - // - this.fill = e._event; - // - if (e._event.color && e._event.color.l) { - temp = this.application.ninja.colorController.colorModel.hslToRgb(e._event.color.h/360, e._event.color.s/100, e._event.color.l/100); - temp.a = e._event.color.a; - } else if (e._event.color && e._event.color.r){ - temp = e._event.color; - temp.a = e._event.color.a; - } else { - temp = null; - } - //WebGL uses array - if (temp) { - this.fill.webGlColor = [temp.r/255, temp.g/255, temp.b/255, temp.a]; - } else { - this.fill.webGlColor = null; - } - // + this.fill = e._event; + this.fill.webGlColor = this.application.ninja.colorController.colorModel.colorToWebGl(e._event.color); this.application.ninja.colorController.colorModel.input = 'fill'; - // - var color = e._event.color; + + var color = e._event.color; if (e._event.colorMode !== 'nocolor' && color) { color.wasSetByCode = false; color.type = 'change'; + color.mode = e._event.colorMode; this.application.ninja.colorController.colorModel[e._event.colorMode] = color; } else { this.application.ninja.colorController.colorModel.applyNoColor(); } - // this.application.ninja.colorController.colorModel.input = 'chip'; }.bind(this)); - // - this.stroke_btn.addEventListener('change', function (e) { - // - var temp; - // + + this.stroke_btn.addEventListener('change', function (e) { this.stroke = e._event; - // - if (e._event.color && e._event.color.l) { - temp = this.application.ninja.colorController.colorModel.hslToRgb(e._event.color.h/360, e._event.color.s/100, e._event.color.l/100); - temp.a = e._event.color.a; - } else if (e._event.color && e._event.color.r){ - temp = e._event.color; - temp.a = e._event.color.a; - } else { - temp = null; - } - //WebGL uses array - if (temp) { - this.stroke.webGlColor = [temp.r/255, temp.g/255, temp.b/255, temp.a]; - } else { - this.stroke.webGlColor = null; - } - // + this.stroke.webGlColor = this.application.ninja.colorController.colorModel.colorToWebGl(e._event.color); this.application.ninja.colorController.colorModel.input = 'stroke'; - // + var color = e._event.color; if (e._event.colorMode !== 'nocolor' && color) { color.wasSetByCode = false; color.type = 'change'; + color.mode = e._event.colorMode; this.application.ninja.colorController.colorModel[e._event.colorMode] = color; } else { this.application.ninja.colorController.colorModel.applyNoColor(); } - // this.application.ninja.colorController.colorModel.input = 'chip'; }.bind(this)); } diff --git a/js/panels/properties/content.reel/content.js b/js/panels/properties/content.reel/content.js index fe6faef8..34c38e70 100644 --- a/js/panels/properties/content.reel/content.js +++ b/js/panels/properties/content.reel/content.js @@ -141,7 +141,8 @@ exports.Content = Montage.create(Component, { displayElementProperties: { value: function (el) { - var customPI; + var customPI, + currentValue; this.elementName = el.elementModel.selection; this.elementId.value = el.getAttribute("id") || ""; @@ -180,87 +181,50 @@ exports.Content = Montage.create(Component, { for(var j = 0, fields; fields = customSec.Section[j]; j++) { for(var k = 0, control; control = fields[k]; k++) { - if(control.prop !== "border-color" && control.prop !== "background-color") { - var currentValue = ElementsMediator.getProperty(el, control.prop, control.valueMutator); + if(control.type !== "color") { + currentValue = ElementsMediator.getProperty(el, control.prop, control.valueMutator); currentValue ? currentValue = currentValue : currentValue = control.defaultValue; this.customSections[0].content.controls[control.id] = currentValue; } + else + { + currentValue = ElementsMediator.getColor2(el, control.prop, control.valueMutator); + if(control.prop === "border") + { + this.application.ninja.colorController.colorModel.input = "stroke"; + } + else if(control.prop === "background") + { + this.application.ninja.colorController.colorModel.input = "fill"; + } + + debugger; + if(currentValue) + { + if(currentValue.mode === "gradient") + { + this.application.ninja.colorController.colorModel["gradient"] = + {value: currentValue.color, wasSetByCode: true, type: 'change'}; + } + else + { + if (currentValue.color.a !== undefined) + { + this.application.ninja.colorController.colorModel.alpha = + {value: currentValue.color.a, wasSetByCode: true, type: 'change'}; + } + this.application.ninja.colorController.colorModel[currentValue.color.mode] = currentValue.color; + } + } + else + { + this.application.ninja.colorController.colorModel.alpha = {value: 1, wasSetByCode: true, type: 'change'}; + this.application.ninja.colorController.colorModel.applyNoColor(); + } + } } } } - - - //TODO: Once logic for color and gradient is established, this needs to be revised - - var color, background, backgroundImage, borderColor = ElementsMediator.getProperty(el, "border-color"), borderImage = ElementsMediator.getProperty(el, "border-image"); - this.application.ninja.colorController.colorModel.input = "stroke"; - if(borderColor || borderImage) { - if (borderImage && borderImage !== 'none' && borderImage.indexOf('-webkit') >= 0) { - //Gradient - color = this.application.ninja.colorController.getColorObjFromCss(borderImage); - if (color && color.value) { - this.application.ninja.colorController.colorModel[color.mode] = {value: color.value, wasSetByCode: true, type: 'change'}; - } else { - this.application.ninja.colorController.colorModel.alpha = {value: 1, wasSetByCode: true, type: 'change'}; - this.application.ninja.colorController.colorModel.applyNoColor(); - } - } else { - //Solid - color = this.application.ninja.colorController.getColorObjFromCss(borderColor); - if (color && color.value) { - color.value.wasSetByCode = true; - color.value.type = 'change'; - if (color.value.a) { - this.application.ninja.colorController.colorModel.alpha = {value: color.value.a, wasSetByCode: true, type: 'change'}; - } - this.application.ninja.colorController.colorModel[color.mode] = color.value; - } else { - this.application.ninja.colorController.colorModel.alpha = {value: 1, wasSetByCode: true, type: 'change'}; - this.application.ninja.colorController.colorModel.applyNoColor(); - } - } - } else { - this.application.ninja.colorController.colorModel.alpha = {value: 1, wasSetByCode: true, type: 'change'}; - this.application.ninja.colorController.colorModel.applyNoColor(); - } - // - background = ElementsMediator.getProperty(el, "background-color"); - backgroundImage = ElementsMediator.getProperty(el, "background-image"); - this.application.ninja.colorController.colorModel.input = "fill"; - if(background || backgroundImage) { - if (backgroundImage && backgroundImage !== 'none' && backgroundImage.indexOf('-webkit') >= 0) { - //Gradient - color = this.application.ninja.colorController.getColorObjFromCss(backgroundImage); - if (color && color.value) { - this.application.ninja.colorController.colorModel[color.mode] = {value: color.value, wasSetByCode: true, type: 'change'}; - } else { - this.application.ninja.colorController.colorModel.alpha = {value: 1, wasSetByCode: true, type: 'change'}; - this.application.ninja.colorController.colorModel.applyNoColor(); - } - } else { - //Solid - color = this.application.ninja.colorController.getColorObjFromCss(background); - if (color && color.value) { - color.value.wasSetByCode = true; - color.value.type = 'change'; - if (color.value.a) { - this.application.ninja.colorController.colorModel.alpha = {value: color.value.a, wasSetByCode: true, type: 'change'}; - } - this.application.ninja.colorController.colorModel[color.mode] = color.value; - } else { - this.application.ninja.colorController.colorModel.alpha = {value: 1, wasSetByCode: true, type: 'change'}; - this.application.ninja.colorController.colorModel.applyNoColor(); - } - } - } else { - this.application.ninja.colorController.colorModel.alpha = {value: 1, wasSetByCode: true, type: 'change'}; - this.application.ninja.colorController.colorModel.applyNoColor(); - } - - - - - } }, @@ -300,6 +264,8 @@ exports.Content = Montage.create(Component, { handlePropertyChange: { value: function(e) { + if(e.wasSetByCode) return; + var newValue; e.units ? newValue = e.value + e.units : newValue = e.value; @@ -317,6 +283,7 @@ exports.Content = Montage.create(Component, { handlePropertyChanging: { value: function(e) { + if(e.wasSetByCode) return; // ElementsMediator.setProperty(this.application.ninja.selectedElements, "border-style", [this.customSections[0].content.controls.borderStyle], "Changing", "pi"); ElementsMediator.setProperty(this.application.ninja.selectedElements, e.prop, [e.value + "px"], "Changing", "pi"); -- cgit v1.2.3 From 01efeff045e7196bab37fc60f7030969ad650d6c Mon Sep 17 00:00:00 2001 From: Nivesh Rajbhandari Date: Wed, 1 Feb 2012 21:14:17 -0800 Subject: Removed border special-casing from PI since the mediator now handles this generically. Updated mediator's set stroke routine to use the setColor routine. Signed-off-by: Nivesh Rajbhandari --- js/panels/properties/content.reel/content.js | 7 ------- 1 file changed, 7 deletions(-) (limited to 'js/panels') diff --git a/js/panels/properties/content.reel/content.js b/js/panels/properties/content.reel/content.js index 34c38e70..6cb66071 100644 --- a/js/panels/properties/content.reel/content.js +++ b/js/panels/properties/content.reel/content.js @@ -198,7 +198,6 @@ exports.Content = Montage.create(Component, { this.application.ninja.colorController.colorModel.input = "fill"; } - debugger; if(currentValue) { if(currentValue.mode === "gradient") @@ -270,12 +269,6 @@ exports.Content = Montage.create(Component, { e.units ? newValue = e.value + e.units : newValue = e.value; - if(e.prop === "border-width") {// || e.prop === "border-style") { - ElementsMediator.setProperty(this.application.ninja.selectedElements, "border-style", [this.customSections[0].content.controls.borderStyle], "Change", "pi"); - } else if(e.prop === "border-style") { - ElementsMediator.setProperty(this.application.ninja.selectedElements, "border-width", [this.customSections[0].content.controls.borderWidth + "px"], "Change", "pi"); - } - ElementsMediator.setProperty(this.application.ninja.selectedElements, e.prop, [newValue], "Change", "pi"); } -- cgit v1.2.3 From db73f720b692d63b55f7c773579fe23336ec0486 Mon Sep 17 00:00:00 2001 From: Nivesh Rajbhandari Date: Thu, 2 Feb 2012 16:40:08 -0800 Subject: Update PI when element is changed by one of the tools. Signed-off-by: Nivesh Rajbhandari --- js/panels/properties/content.reel/content.js | 18 ++++++++++++++++-- 1 file changed, 16 insertions(+), 2 deletions(-) (limited to 'js/panels') diff --git a/js/panels/properties/content.reel/content.js b/js/panels/properties/content.reel/content.js index 3cedee6d..e2ea1374 100644 --- a/js/panels/properties/content.reel/content.js +++ b/js/panels/properties/content.reel/content.js @@ -97,8 +97,22 @@ exports.Content = Montage.create(Component, { value: function(event) { // console.log("Element Change PI ", event.detail.source); // If the event comes from the pi don't need to update if(event.detail.source && event.detail.source !== "pi") { - this.positionSize.leftPosition = parseFloat(ElementsMediator.getProperty(this.application.ninja.selectedElements[0]._element, "left")); - this.positionSize.topPosition = parseFloat(ElementsMediator.getProperty(this.application.ninja.selectedElements[0]._element, "top")); + // TODO - This should only update the properties that were changed. + var el = this.application.ninja.selectedElements[0]._element || this.application.ninja.selectedElements[0]; + this.positionSize.leftPosition = parseFloat(ElementsMediator.getProperty(el, "left")); + this.positionSize.topPosition = parseFloat(ElementsMediator.getProperty(el, "top")); + this.positionSize.heightSize = parseFloat(ElementsMediator.getProperty(el, "height")); + this.positionSize.widthSize = parseFloat(ElementsMediator.getProperty(el, "width")); + + if(this.threeD.inGlobalMode) + { + this.threeD.x3D = ElementsMediator.get3DProperty(el, "x3D"); + this.threeD.y3D = ElementsMediator.get3DProperty(el, "y3D"); + this.threeD.z3D = ElementsMediator.get3DProperty(el, "z3D"); + this.threeD.xAngle = ElementsMediator.get3DProperty(el, "xAngle"); + this.threeD.yAngle = ElementsMediator.get3DProperty(el, "yAngle"); + this.threeD.zAngle = ElementsMediator.get3DProperty(el, "zAngle"); + } } } }, -- cgit v1.2.3 From 854a6d1be334782c8e232601e6d562a11296e55a Mon Sep 17 00:00:00 2001 From: Nivesh Rajbhandari Date: Fri, 3 Feb 2012 14:06:26 -0800 Subject: Update grid and planes when elementChange event signifies the "matrix", "left", "top", "width" or "height" properties have changed. Signed-off-by: Nivesh Rajbhandari --- js/panels/Color/colortoolbar.reel/colortoolbar.js | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) (limited to 'js/panels') diff --git a/js/panels/Color/colortoolbar.reel/colortoolbar.js b/js/panels/Color/colortoolbar.reel/colortoolbar.js index 10ae8b6e..6b8e476b 100644 --- a/js/panels/Color/colortoolbar.reel/colortoolbar.js +++ b/js/panels/Color/colortoolbar.reel/colortoolbar.js @@ -20,7 +20,7 @@ exports.ColorToolbar = Montage.create(Component, { //Storing stroke (stores color in mode use to select color) _stroke: { enumerable: false, - value: {colorMode: 'rgb', color: {r: 0, g: 0, b: 0, a: 1, css: 'rgb(0,0,0)', mode:'rgb', wasSetByCode: false, type: 'change'}, webGlColor: [0, 0, 0, 1]} + value: {colorMode: 'rgb', color: {r: 0, g: 0, b: 0, a: 1, css: 'rgb(0,0,0)', mode:'rgb', wasSetByCode: true, type: 'change'}, webGlColor: [0, 0, 0, 1]} }, //////////////////////////////////////////////////////////////////// // @@ -39,7 +39,7 @@ exports.ColorToolbar = Montage.create(Component, { //Storing fill (stores color in mode use to select color) _fill: { enumerable: false, - value: {colorMode: 'rgb', color: {r: 255, g: 255, b: 255, a: 1, css: 'rgb(255,255,255)', mode:'rgb', wasSetByCode: false, type: 'change'}, webGlColor: [1, 1, 1, 1]} + value: {colorMode: 'rgb', color: {r: 255, g: 255, b: 255, a: 1, css: 'rgb(255,255,255)', mode:'rgb', wasSetByCode: true, type: 'change'}, webGlColor: [1, 1, 1, 1]} }, //////////////////////////////////////////////////////////////////// // @@ -86,8 +86,8 @@ exports.ColorToolbar = Montage.create(Component, { this.application.ninja.colorController.addButton('chip', this.fill_btn); this.application.ninja.colorController.addButton('chip', this.stroke_btn); // - this.fill_btn.color('rgb', {wasSetByCode: false, type: 'change', color: {r: 255, g: 255, b: 255}, css: 'rgb(255,255,255)'}); - this.stroke_btn.color('rgb', {wasSetByCode: false, type: 'change', color: {r: 0, g: 0, b: 0}, css: 'rgb(0,0,0)'}); + this.fill_btn.color('rgb', {wasSetByCode: true, type: 'change', color: {r: 255, g: 255, b: 255}, css: 'rgb(255,255,255)'}); + this.stroke_btn.color('rgb', {wasSetByCode: true, type: 'change', color: {r: 0, g: 0, b: 0}, css: 'rgb(0,0,0)'}); } }, //////////////////////////////////////////////////////////////////// -- cgit v1.2.3 From fd44b7c326acf413367667690e937709f03601e3 Mon Sep 17 00:00:00 2001 From: Nivesh Rajbhandari Date: Fri, 3 Feb 2012 17:09:02 -0800 Subject: We were only updating the first custom section in the PI. Signed-off-by: Nivesh Rajbhandari --- js/panels/properties/content.reel/content.js | 7 +++++-- 1 file changed, 5 insertions(+), 2 deletions(-) (limited to 'js/panels') diff --git a/js/panels/properties/content.reel/content.js b/js/panels/properties/content.reel/content.js index 20dc308f..0088447a 100644 --- a/js/panels/properties/content.reel/content.js +++ b/js/panels/properties/content.reel/content.js @@ -197,8 +197,11 @@ exports.Content = Montage.create(Component, { if(control.type !== "color") { currentValue = ElementsMediator.getProperty(el, control.prop, control.valueMutator); - currentValue ? currentValue = currentValue : currentValue = control.defaultValue; - this.customSections[0].content.controls[control.id] = currentValue; + if(currentValue === null) + { + currentValue = control.defaultValue; + } + this.customSections[i].content.controls[control.id] = currentValue; } else { -- cgit v1.2.3