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 +- 3 files changed, 55 insertions(+), 87 deletions(-) (limited to 'js/controllers') 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); -- 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 ++++++++++++---- 3 files changed, 76 insertions(+), 12 deletions(-) (limited to 'js/controllers') 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(); } -- 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 +++---------- 1 file changed, 3 insertions(+), 10 deletions(-) (limited to 'js/controllers') 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); } }, -- cgit v1.2.3 From cbcc9dcadaf62b3b0aef380f022bf6c365785627 Mon Sep 17 00:00:00 2001 From: Eric Guzman Date: Thu, 2 Feb 2012 10:36:05 -0800 Subject: Tree Controller - Initial add --- js/controllers/tree-controller.js | 219 ++++++++++++++++++++++++++++++++++++++ 1 file changed, 219 insertions(+) create mode 100644 js/controllers/tree-controller.js (limited to 'js/controllers') diff --git a/js/controllers/tree-controller.js b/js/controllers/tree-controller.js new file mode 100644 index 00000000..45e4c4ba --- /dev/null +++ b/js/controllers/tree-controller.js @@ -0,0 +1,219 @@ +/* + This file contains proprietary software owned by Motorola Mobility, Inc.
+ No rights, expressed or implied, whatsoever to this software are provided by Motorola Mobility, Inc. hereunder.
+ (c) Copyright 2011 Motorola Mobility, Inc. All Rights Reserved. + */ +/** + @module montage/ui/controller/tree-controller + @requires montage/core/core + @requires montage/ui/controller/object-controller + @requires montage/core/event/mutable-event + */ +var Montage = require("montage").Montage, + ObjectController = require("montage/ui/controller/object-controller").ObjectController, + ArrayController = require("montage/ui/controller/array-controller").ArrayController, + MutableEvent = require("montage/core/event/mutable-event").MutableEvent; +/** + TODO: Write description like the array controllers: The ArrayController helps with organizing a hierarchical + collection of objects, and managing user selection within that collection. + You can assign a TreeController instance as the contentProvider property for a TreeView object. + @class module:montage/ui/controller/tree-controller.TreeController + @classdesc + @extends module:montage/ui/controller/object-controller.ObjectController +*/ +var TreeController = exports.TreeController = Montage.create(ObjectController, /** @lends module:montage/ui/controller/tree-controller.TreeController# */ { + + rootKey : { + value: null + }, + + branchKey : { + value: 'children' + }, + + _root : { + value : null + }, + root : { + get: function() { + return this._root; + }, + set: function(value) { + this._root = value; + + this.initArrayControllers(); + } + }, + + rootController: { + value: null + }, + + initArrayControllers : { + value: function() { + var self = this; + + ///// Declare function to initialize controller for each node + ///// that is a branch + + function initController(array, depth) { + var controller = Montage.create(ArrayController, { + content : { value: array }, + delegate : { value: self }, + isSelectionEnabled : { value: true }}); + + if(depth === 0) { + self.rootController = controller; + } + + self.branchControllers.push({ + depth : depth, + controller : controller + + }); + } + + ///// Recursive function that finds all branch nodes and initializes + ///// an array controller + + function walk(node, init, depth) { + var children = node[self.branchKey]; + + if(children) { + //init(children, depth); + + children.forEach(function(child) { + walk(child, init, ++depth); + }); + + node['treeNodeType'] = 'branch'; + } else { + node['treeNodeType'] = 'leaf'; + } + } + + walk(this._root, initController, 0); + + } + }, + + /** + @private + */ + _selectedIndexes: { + value: null, + enumerable: false + }, + + /** + Description TODO + @type {Function} + @default null + */ + selectedIndexes: { + get: function() { + + }, + set: function(value) { + + } + }, + + lazyLoad : { + value: false + }, + + branchControllers: { + value: [] + }, + + addBranchController : { + value: function(controller) { + if(this.delegate) { + controller.delegate = this.delegate; + } + + this.branchControllers.push(controller); + } + }, + + /** + @private + */ + _content: { + enumerable: false, + value: null + }, + /** + The content managed by the TreeController. + @type {Function} + @default {String} null + */ + content: { + get: function() { + return this._content; + }, + set: function(value) { + if (this._content === value) { + return; + } + + this._content = value; + + //TODO for right now assume that any content change invalidates the selection completely; we'll need to address this of course + this.selectedObjects = null; + + if (this.rootKey) { + if (value[this.rootKey]) { + this.root = value[this.rootKey]; + } else { + console.log('No root key found in content data'); + } + } else { + this.root = value; + } + + + } + }, + + addObjects : { + value: function() { + + var objects = Array.prototype.slice.call(arguments), + i, + objectCount = objects.length, + selectedContentIndexes, firstIndex; + + for (i = 0; i < objectCount; i++) { + this.content.push(objects[i]); + } + + if (this.selectObjectsOnAddition) { + selectedContentIndexes = []; + firstIndex = this.content.length-objectCount; + for (i = 0; i < objectCount; i++) { + selectedContentIndexes[i] = firstIndex++; + } + this.selectedContentIndexes = selectedContentIndexes; + this.selectedObjects = objects; + } + + if (this.clearFilterFunctionOnAddition) { + this.filterFunction = null; + } + + if (this.automaticallyOrganizeObjects) { + this.organizeObjects(); + } + + } + }, + + insertChildBefore : { value : function() {} }, + + insertChildAfter : { value : function() {} } + + + +}); -- cgit v1.2.3 From 5c5f4eabdc4befe3fb6da44bc8ad5fef20642f21 Mon Sep 17 00:00:00 2001 From: Eric Guzman Date: Thu, 2 Feb 2012 14:58:21 -0800 Subject: Tree Controller - Clean out unused code --- js/controllers/tree-controller.js | 48 ++++++--------------------------------- 1 file changed, 7 insertions(+), 41 deletions(-) (limited to 'js/controllers') diff --git a/js/controllers/tree-controller.js b/js/controllers/tree-controller.js index 45e4c4ba..2b2e910c 100644 --- a/js/controllers/tree-controller.js +++ b/js/controllers/tree-controller.js @@ -53,37 +53,15 @@ var TreeController = exports.TreeController = Montage.create(ObjectController, / value: function() { var self = this; - ///// Declare function to initialize controller for each node - ///// that is a branch - - function initController(array, depth) { - var controller = Montage.create(ArrayController, { - content : { value: array }, - delegate : { value: self }, - isSelectionEnabled : { value: true }}); - - if(depth === 0) { - self.rootController = controller; - } - - self.branchControllers.push({ - depth : depth, - controller : controller - - }); - } - ///// Recursive function that finds all branch nodes and initializes - ///// an array controller + ///// sets the tree node type to "branch" or "leaf" function walk(node, init, depth) { - var children = node[self.branchKey]; - - if(children) { - //init(children, depth); + var branch = node[self.branchKey]; - children.forEach(function(child) { - walk(child, init, ++depth); + if(branch) { + branch.forEach(function(node) { + walk(node, init, ++depth); }); node['treeNodeType'] = 'branch'; @@ -92,7 +70,7 @@ var TreeController = exports.TreeController = Montage.create(ObjectController, / } } - walk(this._root, initController, 0); + walk(this._root, 0); } }, @@ -119,10 +97,6 @@ var TreeController = exports.TreeController = Montage.create(ObjectController, / } }, - lazyLoad : { - value: false - }, - branchControllers: { value: [] }, @@ -160,7 +134,6 @@ var TreeController = exports.TreeController = Montage.create(ObjectController, / this._content = value; - //TODO for right now assume that any content change invalidates the selection completely; we'll need to address this of course this.selectedObjects = null; if (this.rootKey) { @@ -173,7 +146,6 @@ var TreeController = exports.TreeController = Montage.create(ObjectController, / this.root = value; } - } }, @@ -208,12 +180,6 @@ var TreeController = exports.TreeController = Montage.create(ObjectController, / } } - }, - - insertChildBefore : { value : function() {} }, - - insertChildAfter : { value : function() {} } - - + } }); -- cgit v1.2.3