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(-) 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 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/controllers/color-controller.js | 3 + js/controllers/elements/element-controller.js | 53 +++++++++- js/controllers/elements/shapes-controller.js | 32 ++++-- js/data/pi/pi-data.js | 16 ++- js/mediators/element-mediator.js | 11 +- js/models/color-model.js | 39 ++++++- js/models/element-model.js | 8 +- js/models/shape-model.js | 2 + js/panels/Color/colortoolbar.reel/colortoolbar.js | 64 +++--------- js/panels/properties/content.reel/content.js | 119 ++++++++-------------- js/tools/LineTool.js | 4 + js/tools/OvalTool.js | 8 ++ js/tools/RectTool.js | 8 ++ 13 files changed, 221 insertions(+), 146 deletions(-) diff --git a/js/controllers/color-controller.js b/js/controllers/color-controller.js index 925b525d..e3b15f1c 100644 --- a/js/controllers/color-controller.js +++ b/js/controllers/color-controller.js @@ -218,6 +218,9 @@ exports.ColorController = Montage.create(Component, { } else if (mode === 'gradient'){ color = e._event.value.value; } + color.mode = panelMode; + color.wasSetByCode = true; + color.type = "change"; //////////////////////////////////////////////////////////// //////////////////////////////////////////////////////////// // diff --git a/js/controllers/elements/element-controller.js b/js/controllers/elements/element-controller.js index 8a0735f7..892ac2f2 100644 --- a/js/controllers/elements/element-controller.js +++ b/js/controllers/elements/element-controller.js @@ -69,15 +69,56 @@ var ElementController = exports.ElementController = Montage.create(NJComponent, // Routines to get/set color properties getColor: { value: function(el, isFill) { + var colorObj, + color, + image; + + // Return cached value if one exists if(isFill) { - return this.application.ninja.stylesController.getElementStyle(el, "background-color"); + if(el.elementModel.fill) + { + 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 - return this.application.ninja.stylesController.getElementStyle(el, "border-color"); + if(el.elementModel.stroke) + { + return el.elementModel.stroke; + } + // 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) { + if (image && image !== 'none' && image.indexOf('-webkit') >= 0) { + //Gradient + colorObj = this.application.ninja.colorController.getColorObjFromCss(image); + } else { + //Solid + colorObj = this.application.ninja.colorController.getColorObjFromCss(color); + } + } + + // Update cache + if(isFill) + { + el.elementModel.fill = colorObj; + } + else + { + el.elementModel.stroke = colorObj; + } + + return colorObj; } }, @@ -92,7 +133,8 @@ var ElementController = exports.ElementController = Montage.create(NJComponent, case 'nocolor': this.setProperty(el, "background-image", "none"); this.setProperty(el, "background-color", "none"); - break; + el.elementModel.fill = null; + return; case 'gradient': this.setProperty(el, "background-image", color.color.css); this.setProperty(el, "background-color", "none"); @@ -106,6 +148,7 @@ var ElementController = exports.ElementController = Montage.create(NJComponent, { this.application.ninja.stylesController.setElementStyle(el, "background-color", color.color.css); } + el.elementModel.fill = color; } else { @@ -115,7 +158,8 @@ var ElementController = exports.ElementController = Montage.create(NJComponent, case 'nocolor': this.setProperty(el, "border-image", "none"); this.setProperty(el, "border-color", "none"); - break; + el.elementModel.stroke = null; + return; case 'gradient': this.setProperty(el, "border-image", color.color.css); this.setProperty(el, "border-color", "none"); @@ -129,6 +173,7 @@ var ElementController = exports.ElementController = Montage.create(NJComponent, { this.application.ninja.stylesController.setElementStyle(el, "border-color", color.color.css); } + el.elementModel.stroke = color; } } }, diff --git a/js/controllers/elements/shapes-controller.js b/js/controllers/elements/shapes-controller.js index 92353f28..1717db94 100644 --- a/js/controllers/elements/shapes-controller.js +++ b/js/controllers/elements/shapes-controller.js @@ -48,6 +48,8 @@ exports.ShapesController = Montage.create(CanvasController, { switch(p) { case "strokeSize": case "innerRadius": + case "border": + case "background": return this.getShapeProperty(el, p); default: return CanvasController.getProperty(el, p); @@ -154,30 +156,44 @@ exports.ShapesController = Montage.create(CanvasController, { // Routines to get/set color properties getColor: { value: function(el, isFill) { + var color, + css; if(isFill) { - return this.getShapeProperty(el, "fill"); + if(el.elementModel.shapeModel.background) + { + return el.elementModel.shapeModel.background; + } + color = this.getShapeProperty(el, "fill"); } else { - return this.getShapeProperty(el, "stroke"); + if(el.elementModel.shapeModel.border) + { + return el.elementModel.shapeModel.border; + } + color = this.getShapeProperty(el, "stroke"); } + + css = this.application.ninja.colorController.colorModel.webGlToCss(color); + return this.application.ninja.colorController.getColorObjFromCss(css); } }, setColor: { value: function(el, color, isFill) { - // TODO - Format color for webGL before setting - color = color.webGlColor || color.color.webGlColor; + var webGl = color.webGlColor || color.color.webGlColor; if(isFill) { - el.elementModel.shapeModel.GLGeomObj.setFillColor(color); - this.setShapeProperty(el, "fill", color); + el.elementModel.shapeModel.GLGeomObj.setFillColor(webGl); + this.setShapeProperty(el, "fill", webGl); + this.setShapeProperty(el, "background", color); } else { - el.elementModel.shapeModel.GLGeomObj.setStrokeColor(color); - this.setShapeProperty(el, "stroke", color); + el.elementModel.shapeModel.GLGeomObj.setStrokeColor(webGl); + this.setShapeProperty(el, "stroke", webGl); + this.setShapeProperty(el, "border", color); } el.elementModel.shapeModel.GLWorld.render(); } diff --git a/js/data/pi/pi-data.js b/js/data/pi/pi-data.js index f162e919..748f19bb 100644 --- a/js/data/pi/pi-data.js +++ b/js/data/pi/pi-data.js @@ -23,13 +23,13 @@ exports.PiData = Montage.create( Montage, { { type : "color", id : "colorStroke", - prop: "border-color", + prop: "border", label : "Stroke" }, { type : "color", id : "colorFill", - prop: "background-color", + prop: "background", divider : true } ], @@ -102,11 +102,13 @@ exports.PiData = Montage.create( Montage, { { type : "color", id : "colorStroke", + prop: "border", label : "Stroke" }, { type : "color", id : "colorFill", + prop: "background", divider : true } ], @@ -221,13 +223,13 @@ exports.PiData = Montage.create( Montage, { { type : "color", id : "colorStroke", - prop: "border-color", + prop: "border", label : "Stroke" }, { type : "color", id : "colorFill", - prop: "background-color", + prop: "background", divider : true } ], @@ -279,10 +281,12 @@ exports.PiData = Montage.create( Montage, { [ { type : "color", + prop: "border", id : "stroke" }, { type : "color", + prop: "background", id : "fill", divider : true } @@ -387,11 +391,13 @@ exports.PiData = Montage.create( Montage, { [ { type : "color", + prop: "border", id : "stroke" }, { type : "color", id : "fill", + prop: "background", visible : false, divider : true } @@ -438,10 +444,12 @@ exports.PiData = Montage.create( Montage, { [ { type : "color", + prop: "border", id : "stroke" }, { type : "color", + prop: "background", id : "fill", divider : true } diff --git a/js/mediators/element-mediator.js b/js/mediators/element-mediator.js index 4c34e668..7c5c161c 100644 --- a/js/mediators/element-mediator.js +++ b/js/mediators/element-mediator.js @@ -431,7 +431,7 @@ exports.ElementMediator = Montage.create(NJComponent, { getColor: { value: function(el, isFill) { if(!el.elementModel) { - NJUtils.makeElementModel(el, "Div", "block"); + NJUtils.makeElementModel2(el); } return el.elementModel.controller["getColor"](el, isFill); } @@ -589,6 +589,15 @@ exports.ElementMediator = Montage.create(NJComponent, { } }, + getColor2: { + value: function(el, prop, mutator) { + if(!el.elementModel) { + NJUtils.makeElementModel2(el); + } + + return this.getColor(el, (prop === "background")); + } + }, //-------------------------------------------------------------------------------------------------------- // Routines to get/set 3D properties diff --git a/js/models/color-model.js b/js/models/color-model.js index b06281f8..2c86422f 100644 --- a/js/models/color-model.js +++ b/js/models/color-model.js @@ -562,7 +562,44 @@ exports.ColorModel = Montage.create(Component, { //Returning RGB object return {r: Math.round(r * 255), g: Math.round(g * 255), b: Math.round(b * 255)}; } - } + }, + //////////////////////////////////////////////////////////////////// + //Returns WebGL color array in [r, g, b, a] format where the values are [0,1] given a color object + colorToWebGl: { + enumerable: true, + value: function (color) { + var temp; + if (color) { + if(color.l !== undefined) { + temp = this.hslToRgb(color.h/360, color.s/100, color.l/100); + } else if (color.r !== undefined) { + temp = color; + } + temp.a = color.a; + } + //WebGL uses array + if (temp) { + return [temp.r/255, temp.g/255, temp.b/255, temp.a]; + } else { + return null; + } + } + }, + //////////////////////////////////////////////////////////////////// + //Returns CSS string given a WebGL color array in [r, g, b, a] format where the values are [0,1] + webGlToCss: { + enumerable: true, + value: function (color) { + if(color && (color.length === 4)) + { + return 'rgba(' + color[0]*255 + ', ' + color[1]*255 + ', ' + color[2]*255 + ', ' + color[3] +')'; + } + else + { + return null; + } + } + } //////////////////////////////////////////////////////////////////// //////////////////////////////////////////////////////////////////// //////////////////////////////////////////////////////////////////// diff --git a/js/models/element-model.js b/js/models/element-model.js index 6e1ac07a..831e8b1e 100644 --- a/js/models/element-model.js +++ b/js/models/element-model.js @@ -37,6 +37,12 @@ exports.ElementModel = Montage.create(Montage, { /** * SnapManager 2d Snap Cache Info */ - isIn2DSnapCache : { value: false } + isIn2DSnapCache : { value: false }, + + /** + * Color info + */ + fill: { value: null }, + stroke: { value: null } }); \ No newline at end of file diff --git a/js/models/shape-model.js b/js/models/shape-model.js index 9d4fff6f..b643a7b5 100644 --- a/js/models/shape-model.js +++ b/js/models/shape-model.js @@ -20,10 +20,12 @@ exports.ShapeModel = Montage.create(Component, { strokeMaterialIndex: { value: null }, strokeStyle: { value: null }, strokeStyleIndex: { value: null }, + border: { value: null }, // Store css value for ColorController fill: { value: null }, fillMaterial: { value: null }, fillMaterialIndex: { value: null }, + background: { value: null }, // Store css value for ColorController // Line-specific slope: { value: null }, 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"); diff --git a/js/tools/LineTool.js b/js/tools/LineTool.js index 042ba0b2..a0d5a182 100644 --- a/js/tools/LineTool.js +++ b/js/tools/LineTool.js @@ -225,6 +225,10 @@ exports.LineTool = Montage.create(ShapeTool, { canvas.elementModel.pi = "LinePi"; canvas.elementModel.shapeModel.strokeSize = this.options.strokeSize.value + " " + this.options.strokeSize.units; canvas.elementModel.shapeModel.stroke = strokeColor; + if(strokeColor) + { + canvas.elementModel.shapeModel.border = this.application.ninja.colorController.colorToolbar.stroke; + } canvas.elementModel.shapeModel.strokeMaterial = strokeMaterial; canvas.elementModel.shapeModel.strokeMaterialIndex = strokeIndex; diff --git a/js/tools/OvalTool.js b/js/tools/OvalTool.js index e0f1f03f..2fa5411b 100644 --- a/js/tools/OvalTool.js +++ b/js/tools/OvalTool.js @@ -75,6 +75,14 @@ exports.OvalTool = Montage.create(ShapeTool, { canvas.elementModel.shapeModel.strokeSize = this.options.strokeSize.value + " " + this.options.strokeSize.units; canvas.elementModel.shapeModel.stroke = strokeColor; canvas.elementModel.shapeModel.fill = fillColor; + if(strokeColor) + { + canvas.elementModel.shapeModel.border = this.application.ninja.colorController.colorToolbar.stroke; + } + if(fillColor) + { + canvas.elementModel.shapeModel.background = this.application.ninja.colorController.colorToolbar.fill; + } canvas.elementModel.shapeModel.innerRadius = this.options.innerRadius.value + " " + this.options.innerRadius.units; diff --git a/js/tools/RectTool.js b/js/tools/RectTool.js index fbf1693e..94d80b53 100644 --- a/js/tools/RectTool.js +++ b/js/tools/RectTool.js @@ -94,6 +94,14 @@ exports.RectTool = Montage.create(ShapeTool, { canvas.elementModel.shapeModel.strokeSize = this.options.strokeSize.value + " " + this.options.strokeSize.units; canvas.elementModel.shapeModel.stroke = strokeColor; canvas.elementModel.shapeModel.fill = fillColor; + if(strokeColor) + { + canvas.elementModel.shapeModel.border = this.application.ninja.colorController.colorToolbar.stroke; + } + if(fillColor) + { + canvas.elementModel.shapeModel.background = this.application.ninja.colorController.colorToolbar.fill; + } canvas.elementModel.shapeModel.tlRadius = this.options.TLRadiusControl.value + " " + this.options.TLRadiusControl.units; canvas.elementModel.shapeModel.trRadius = this.options.TRRadiusControl.value + " " + this.options.TRRadiusControl.units; -- 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/controllers/elements/element-controller.js | 13 +++---------- js/panels/properties/content.reel/content.js | 7 ------- js/tools/FillTool.js | 20 +++++++++++++++++--- 3 files changed, 20 insertions(+), 20 deletions(-) diff --git a/js/controllers/elements/element-controller.js b/js/controllers/elements/element-controller.js index 892ac2f2..9b13e703 100644 --- a/js/controllers/elements/element-controller.js +++ b/js/controllers/elements/element-controller.js @@ -144,10 +144,6 @@ var ElementController = exports.ElementController = Montage.create(NJComponent, this.setProperty(el, "background-color", color.color.css); } } - else - { - this.application.ninja.stylesController.setElementStyle(el, "background-color", color.color.css); - } el.elementModel.fill = color; } else @@ -169,10 +165,6 @@ var ElementController = exports.ElementController = Montage.create(NJComponent, this.setProperty(el, "border-color", color.color.css); } } - else - { - this.application.ninja.stylesController.setElementStyle(el, "border-color", color.color.css); - } el.elementModel.stroke = color; } } @@ -187,8 +179,9 @@ var ElementController = exports.ElementController = Montage.create(NJComponent, setStroke: { value: function(el, stroke) { - var border = stroke.borderWidth + stroke.borderUnits + " " + stroke.borderStyle + " " + stroke.color.color.css; - this.application.ninja.stylesController.setElementStyle(el, "border", border); + this.application.ninja.stylesController.setElementStyle(el, "border-width", stroke.borderWidth + stroke.borderUnits); + this.application.ninja.stylesController.setElementStyle(el, "border-style", stroke.borderStyle); + this.setColor(el, stroke.color, false); } }, 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"); } diff --git a/js/tools/FillTool.js b/js/tools/FillTool.js index 477966da..fabcec69 100644 --- a/js/tools/FillTool.js +++ b/js/tools/FillTool.js @@ -54,10 +54,24 @@ exports.FillTool = Montage.create(ModifierToolBase, { value: function(event) { this.isDrawing = true; - if(this._canColor) + if(this._canColor && this.application.ninja.selectedElements.length) { - var color = this.application.ninja.colorController.colorToolbar.fill; - ElementsMediator.setColor(this.application.ninja.selectedElements, color, true, "Change", "fillTool"); + var color = this.application.ninja.colorController.colorToolbar.fill, + colorInfo; + if(color && color.color) + { + colorInfo = { mode:color.colorMode, + color:color.color + }; + ElementsMediator.setColor(this.application.ninja.selectedElements, colorInfo, true, "Change", "fillTool"); + } + else + { + colorInfo = { mode:"nocolor", + color:color.color + }; + ElementsMediator.setColor(this.application.ninja.selectedElements, colorInfo, true, "Change", "fillTool"); + } } } } -- cgit v1.2.3