From 2c6339a9191033c937c2bac3e181c2bc380f4c48 Mon Sep 17 00:00:00 2001 From: Nivesh Rajbhandari Date: Mon, 12 Mar 2012 12:00:07 -0700 Subject: Fixed element mediator, PI, and eye-dropper to handle different borders sides and gradients. Signed-off-by: Nivesh Rajbhandari --- js/controllers/elements/element-controller.js | 32 ++++++++++++++++++--------- js/mediators/element-mediator.js | 15 ++----------- js/models/color-model.js | 3 +++ js/panels/properties.reel/properties.js | 4 +++- js/tools/EyedropperTool.js | 17 +++++++++----- 5 files changed, 41 insertions(+), 30 deletions(-) diff --git a/js/controllers/elements/element-controller.js b/js/controllers/elements/element-controller.js index ec0335b4..9f00604f 100755 --- a/js/controllers/elements/element-controller.js +++ b/js/controllers/elements/element-controller.js @@ -74,8 +74,9 @@ var ElementController = exports.ElementController = Montage.create(NJComponent, //-------------------------------------------------------------------------------------------------------- // Routines to get/set color properties + // borderSide : "top", "right", "bottom", or "left" getColor: { - value: function(el, isFill) { + value: function(el, isFill, borderSide) { var colorObj, color, image; @@ -87,22 +88,29 @@ var ElementController = exports.ElementController = Montage.create(NJComponent, { return el.elementModel.fill; } -// return this.application.ninja.stylesController.getElementStyle(el, "background-color"); //TODO: Once logic for color and gradient is established, this needs to be revised color = this.getProperty(el, "background-color"); image = this.getProperty(el, "background-image"); } else { - // TODO - Need to figure out which border side user wants - if(el.elementModel.stroke) + // Try getting border color from specific side first + if(borderSide) { - return el.elementModel.stroke; + color = this.getProperty(el, "border-" + borderSide + "-color"); + image = this.getProperty(el, "border-" + borderSide + "-image"); + } + + // If no color was found, look up the shared border color + if(!color && !image) + { + if(el.elementModel.stroke) + { + return el.elementModel.stroke; + } + color = this.getProperty(el, "border-color"); + image = this.getProperty(el, "border-image"); } - // TODO - Need to figure out which border side user wants -// return this.application.ninja.stylesController.getElementStyle(el, "border-color"); - color = this.getProperty(el, "border-color"); - image = this.getProperty(el, "border-image"); } if(color || image) { @@ -120,11 +128,15 @@ var ElementController = exports.ElementController = Montage.create(NJComponent, { el.elementModel.fill = colorObj; } - else + else if(!borderSide) { // TODO - Need to update border style and width also el.elementModel.stroke = colorObj; } + else + { + // TODO - Should update specific border sides too + } return colorObj; } diff --git a/js/mediators/element-mediator.js b/js/mediators/element-mediator.js index 127f73e1..d62fa1f8 100755 --- a/js/mediators/element-mediator.js +++ b/js/mediators/element-mediator.js @@ -459,13 +459,12 @@ exports.ElementMediator = Montage.create(NJComponent, { //-------------------------------------------------------------------------------------------------------- // Routines to get/set color - // for now just return the bg/fill color getColor: { - value: function(el, isFill) { + value: function(el, isFill, borderSide) { if(!el.elementModel) { NJUtils.makeModelFromElement(el); } - return el.elementModel.controller["getColor"](el, isFill); + return el.elementModel.controller["getColor"](el, isFill, borderSide); } }, @@ -621,16 +620,6 @@ exports.ElementMediator = Montage.create(NJComponent, { } }, - getColor2: { - value: function(el, prop, mutator) { - if(!el.elementModel) { - NJUtils.makeModelFromElement(el); - } - - return this.getColor(el, (prop === "background")); - } - }, - //-------------------------------------------------------------------------------------------------------- // Routines to get/set 3D properties get3DProperty: { diff --git a/js/models/color-model.js b/js/models/color-model.js index 2c86422f..4189fbef 100755 --- a/js/models/color-model.js +++ b/js/models/color-model.js @@ -574,6 +574,9 @@ exports.ColorModel = Montage.create(Component, { temp = this.hslToRgb(color.h/360, color.s/100, color.l/100); } else if (color.r !== undefined) { temp = color; + } else if (color.gradientMode) { + // TODO - Need to handle gradients at some point + return null; } temp.a = color.a; } diff --git a/js/panels/properties.reel/properties.js b/js/panels/properties.reel/properties.js index eb9faa8b..947d7937 100755 --- a/js/panels/properties.reel/properties.js +++ b/js/panels/properties.reel/properties.js @@ -302,13 +302,15 @@ exports.Properties = Montage.create(Component, { } else { - currentValue = ElementsMediator.getColor2(el, control.prop, control.valueMutator); if(control.prop === "border") { + // TODO - For now, always return the top border if multiple border sides + currentValue = ElementsMediator.getColor(el, false, "top"); this.application.ninja.colorController.colorModel.input = "stroke"; } else if(control.prop === "background") { + currentValue = ElementsMediator.getColor(el, true); this.application.ninja.colorController.colorModel.input = "fill"; } diff --git a/js/tools/EyedropperTool.js b/js/tools/EyedropperTool.js index 6e71c693..927b86cf 100755 --- a/js/tools/EyedropperTool.js +++ b/js/tools/EyedropperTool.js @@ -152,10 +152,14 @@ exports.EyedropperTool = Montage.create(toolBase, { { color = this.application.ninja.colorController.getColorObjFromCss(c); } - else + else if(c.mode !== "gradient") { color = this.application.ninja.colorController.getColorObjFromCss(c.color.css); } + else + { + color = c; + } } this._updateColor(color, false); @@ -175,7 +179,8 @@ exports.EyedropperTool = Montage.create(toolBase, { if(updateColorToolBar) { eventType = "change"; - if (color && color.value) + // TODO - Color chips in toolbar doesn't support gradients yet + if (color && color.value && (color.mode !== "gradient")) { var input = this.application.ninja.colorController.colorModel.input; @@ -295,10 +300,10 @@ exports.EyedropperTool = Montage.create(toolBase, { x = tmpPt[0]; y = tmpPt[1]; - if(x < innerBounds[0][0]) return ElementsMediator.getProperty(elt, "border-left-color"); - if(x > innerBounds[2][0]) return ElementsMediator.getProperty(elt, "border-right-color"); - if(y < innerBounds[0][1]) return ElementsMediator.getProperty(elt, "border-top-color"); - if(y > innerBounds[1][1]) return ElementsMediator.getProperty(elt, "border-bottom-color"); + if(x < innerBounds[0][0]) return ElementsMediator.getColor(elt, false, "left"); + if(x > innerBounds[2][0]) return ElementsMediator.getColor(elt, false, "right"); + if(y < innerBounds[0][1]) return ElementsMediator.getColor(elt, false, "top"); + if(y > innerBounds[1][1]) return ElementsMediator.getColor(elt, false, "bottom"); } return ElementsMediator.getColor(elt, true); -- cgit v1.2.3