From affafafc4db16e5f918c74dfc919025d4c563cc6 Mon Sep 17 00:00:00 2001 From: Nivesh Rajbhandari Date: Tue, 31 Jan 2012 17:30:53 -0800 Subject: Updated color code to handle shapes. Signed-off-by: Nivesh Rajbhandari --- js/controllers/color-controller.js | 97 ++++----------------------- js/controllers/elements/element-controller.js | 43 +++++++++++- js/controllers/elements/shapes-controller.js | 2 +- js/mediators/element-mediator.js | 2 +- js/models/color-model.js | 4 +- 5 files changed, 59 insertions(+), 89 deletions(-) (limited to 'js') diff --git a/js/controllers/color-controller.js b/js/controllers/color-controller.js index 87180873..925b525d 100644 --- a/js/controllers/color-controller.js +++ b/js/controllers/color-controller.js @@ -175,76 +175,21 @@ exports.ColorController = Montage.create(Component, { }, //////////////////////////////////////////////////////////////////// // - setBackground: { + setColor: { enumerable: true, - value: function (type, background, selection) { - //TODO: Remove hack - var elements, i, hack = [], hackNone = []; + value: function (mode, color, isFill, selection) { + var elements; //The selection is optional, if none, it asks for the currently selected elements if (selection) { elements = selection; } else { elements = this.application.ninja.selectedElements; } - // - for (i=0; elements[i]; i++) { - hack[i] = background; - hackNone[i] = 'none'; - } - // - if (elements && elements.length > 0) { - switch (type) { - case 'image': - ElementsMediator.setProperty(elements, "background-image", hack, {"background-image": background}, "Change", "color-controller"); - ElementsMediator.setProperty(elements, "background-color", hackNone, {"background-color": 'none'}, "Change", "color-controller"); - break; - case 'color': - //TODO: Add logic to handle setting color when image (like gradients) is applied - //TODO: Handle applying to multiple items, currently, we need to create a dummy array of the same value - ElementsMediator.setProperty(elements, "background-image", hackNone, {"background-image": 'none'}, "Change", "color-controller"); - ElementsMediator.setProperty(elements, "background-color", hack, {"background-color": background}, "Change", "color-controller"); - break; - case 'background': - break; - } - // - //console.log(this.getColorObjFromCss('#333')); - } - } - }, - //////////////////////////////////////////////////////////////////// - // - setBorder: { - enumerable: true, - value: function (type, border, selection) { - // - var elements, i, hack = [], hackNone = []; - //The selection is optional, if none, it asks for the currently selected elements - if (selection) { - elements = selection; - } else { - elements = this.application.ninja.selectedElements; - } - // - for (i=0; elements[i]; i++) { - hack[i] = border; - hackNone[i] = 'none'; - } - // - if (elements && elements.length > 0) { - switch (type) { - case 'image': - //TODO: Figure out why color must be removed, might be related to the CSS - ElementsMediator.setProperty(elements, "border-color", hackNone, {"border-color": 'none'}, "Change", "color-controller"); - ElementsMediator.setProperty(elements, "border-image", hack, {"border-image": border}, "Change", "color-controller"); - break; - case 'color': - ElementsMediator.setProperty(elements, "border-image", hackNone, {"border-image": 'none'}, "Change", "color-controller"); - ElementsMediator.setProperty(elements, "border-color", hack, {"border-color": border}, "Change", "color-controller"); - break; - case 'border': - break; - } + if (elements && elements.length) { + var colorInfo = { mode:mode, + color:color + }; + ElementsMediator.setColor(elements, colorInfo, isFill, "Change", "color-controller"); } } }, @@ -264,8 +209,10 @@ exports.ColorController = Montage.create(Component, { color = {value: null, css: 'none'}; } else if (panelMode === 'rgb' && e._event.rgba && mode !== 'gradient') { color = e._event.rgba; + color.webGlColor = e._event.webGlColor; } else if (panelMode === 'hsl' && e._event.hsla && mode !== 'gradient') { color = e._event.hsla; + color.webGlColor = e._event.webGlColor; } else if (mode !== 'gradient'){ color = {value: e._event.hex, css: '#'+e._event.hex}; } else if (mode === 'gradient'){ @@ -280,32 +227,14 @@ exports.ColorController = Montage.create(Component, { // if(e._event.wasSetByCode) return; // - if (mode === 'nocolor') { - //TODO: Add a check instead of setting properties - this.setBackground('image', color.css, false); - this.setBackground('color', color.css, false); - this.setBackground('background', color.css, false); - } else if (mode === 'gradient') { - this.setBackground('image', color.css, false); - } else { - this.setBackground('color', color.css, false); - } + this.setColor(mode, color, true); } else if (input === 'stroke') { // this.stroke = color; // if(e._event.wasSetByCode) return; - // - if (mode === 'nocolor') { - //TODO: Add a check instead of setting properties - this.setBorder('image', color.css, false); - this.setBorder('color', color.css, false); - this.setBorder('border', color.css, false); - } else if (mode === 'gradient') { - this.setBorder('image', color.css, false); - } else { - this.setBorder('color', color.css, false); - } + + this.setColor(mode, color, false); } //////////////////////////////////////////////////////////// //////////////////////////////////////////////////////////// diff --git a/js/controllers/elements/element-controller.js b/js/controllers/elements/element-controller.js index f254220c..8a0735f7 100644 --- a/js/controllers/elements/element-controller.js +++ b/js/controllers/elements/element-controller.js @@ -83,13 +83,52 @@ var ElementController = exports.ElementController = Montage.create(NJComponent, setColor: { value: function(el, color, isFill) { + var mode = color.mode; if(isFill) { - this.application.ninja.stylesController.setElementStyle(el, "background-color", color.color.css); + if(mode) + { + switch (mode) { + case 'nocolor': + this.setProperty(el, "background-image", "none"); + this.setProperty(el, "background-color", "none"); + break; + case 'gradient': + this.setProperty(el, "background-image", color.color.css); + this.setProperty(el, "background-color", "none"); + break; + default: + this.setProperty(el, "background-image", "none"); + this.setProperty(el, "background-color", color.color.css); + } + } + else + { + this.application.ninja.stylesController.setElementStyle(el, "background-color", color.color.css); + } } else { - this.application.ninja.stylesController.setElementStyle(el, "border-color", color.color.css); + if(mode) + { + switch (mode) { + case 'nocolor': + this.setProperty(el, "border-image", "none"); + this.setProperty(el, "border-color", "none"); + break; + case 'gradient': + this.setProperty(el, "border-image", color.color.css); + this.setProperty(el, "border-color", "none"); + break; + default: + this.setProperty(el, "border-image", "none"); + this.setProperty(el, "border-color", color.color.css); + } + } + else + { + this.application.ninja.stylesController.setElementStyle(el, "border-color", color.color.css); + } } } }, diff --git a/js/controllers/elements/shapes-controller.js b/js/controllers/elements/shapes-controller.js index d34644a7..92353f28 100644 --- a/js/controllers/elements/shapes-controller.js +++ b/js/controllers/elements/shapes-controller.js @@ -168,7 +168,7 @@ exports.ShapesController = Montage.create(CanvasController, { setColor: { value: function(el, color, isFill) { // TODO - Format color for webGL before setting - color = color.webGlColor; + color = color.webGlColor || color.color.webGlColor; if(isFill) { el.elementModel.shapeModel.GLGeomObj.setFillColor(color); diff --git a/js/mediators/element-mediator.js b/js/mediators/element-mediator.js index 91b09475..4c34e668 100644 --- a/js/mediators/element-mediator.js +++ b/js/mediators/element-mediator.js @@ -457,7 +457,7 @@ exports.ElementMediator = Montage.create(NJComponent, { if(!currentValue) { var that = this; currentValue = els.map(function(item) { - return that.getColor(item._element); + return that.getColor(item._element, isFill); }); } diff --git a/js/models/color-model.js b/js/models/color-model.js index 7e5fee1f..b06281f8 100644 --- a/js/models/color-model.js +++ b/js/models/color-model.js @@ -415,8 +415,10 @@ exports.ColorModel = Montage.create(Component, { colorEvent.alpha = this.alpha.value; if (this.hsl) colorEvent.hsla = {h: this.hsl.h, s: this.hsl.s, l: this.hsl.l, a: this.alpha.value, css: 'hsla('+this.hsl.h+', '+this.hsl.s+'%, '+this.hsl.l+'%, '+this.alpha.value+')'}; - if (this.rgb) + if (this.rgb) { colorEvent.rgba = {r: this.rgb.r, g: this.rgb.g, b: this.rgb.b, a: this.alpha.value, css: 'rgba('+ this.rgb.r +', '+this.rgb.g+', '+this.rgb.b+', '+this.alpha.value+')'}; + colorEvent.webGlColor = [this.rgb.r/255, this.rgb.g/255, this.rgb.b/255, this.alpha.value]; + } if (this.hex) colorEvent.hex = this.hex; //Standard values that apply to any event -- cgit v1.2.3