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 From 2e24eaa71b260fd11632d8a124874b238c9aa82a Mon Sep 17 00:00:00 2001 From: Jon Reid Date: Wed, 1 Feb 2012 16:02:37 -0800 Subject: Delete unneeded compass log file (IKNINJA 1101). Update base styles for better colors on HTML buttons. Change project panel so it shows no project by default. --- js/panels/Project/projectpanelbase.reel/ProjectPanelBase.js | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) (limited to 'js') diff --git a/js/panels/Project/projectpanelbase.reel/ProjectPanelBase.js b/js/panels/Project/projectpanelbase.reel/ProjectPanelBase.js index 31582153..e5173005 100644 --- a/js/panels/Project/projectpanelbase.reel/ProjectPanelBase.js +++ b/js/panels/Project/projectpanelbase.reel/ProjectPanelBase.js @@ -577,11 +577,11 @@ exports.ProjectPanelBase = (require("montage/core/core").Montage).create(require arrLinkedScrollersLength = arrLinkedScrollers.length, i = 0, that = this; - + /* if (this.firstTimeDraw) { this.hasActiveProject="large"; } - + */ if (!this.hasActiveProject) { -- cgit v1.2.3 From f07bbfaa60c3fb7c2412c5aa97b49d114d6a88ea Mon Sep 17 00:00:00 2001 From: Valerio Virgillito Date: Wed, 1 Feb 2012 16:43:08 -0800 Subject: Adding njUtils as a component and adding it to the application object Signed-off-by: Valerio Virgillito --- js/lib/nj-utils.js | 214 +++++++++++++++++++++++++++++++++++++++++++++++ js/ninja.reel/ninja.html | 8 +- js/ninja.reel/ninja.js | 2 + 3 files changed, 223 insertions(+), 1 deletion(-) create mode 100644 js/lib/nj-utils.js (limited to 'js') diff --git a/js/lib/nj-utils.js b/js/lib/nj-utils.js new file mode 100644 index 00000000..59ea6095 --- /dev/null +++ b/js/lib/nj-utils.js @@ -0,0 +1,214 @@ +/* +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. + */ + +var Montage = require("montage/core/core").Montage, + Component = require("montage/ui/component").Component, + ElementModel = require("js/models/element-model").ElementModel, + Properties3D = require("js/models/properties-3d").Properties3D, + ShapeModel = require("js/models/shape-model").ShapeModel, + ControllerFactory = require("js/controllers/elements/controller-factory").ControllerFactory; + +exports.NJUtils = Montage.create( Component, { + + + + /* =============== DOM Access ================ */ + + ///// Quick "getElementById" + $ : { + value: function(id) { + return document.getElementById(id); + } + }, + + ///// Quick "getElementsByClassName" which also returns as an Array + ///// Can return as NodeList by passing true as second argument + $$ : { + value: function(className, asNodeList) { + var list = document.getElementsByClassName(className); + return (asNodeList) ? list : this.toArray(list); + } + }, + + ///// Get child nodes of element + ///// Omit filter to only return element nodes + ///// Pass in filter function to minimize collection, or + ///// set to true to include all nodes + children : { + value : function(el, filter) { + var f = filter || function(item) { + return item.nodeType === 1; + }; + return this.toArray(el.childNodes).filter(f); + } + }, + + /* ============= DOM Manipulation ============= */ + + ///// Creates and returns text node from string + textNode : { + value: function(text) { + return document.createTextNode(text); + } + }, + + ///// Quick "createElement" function "attr" can be classname or object + ///// with attribute key/values + make : { + value: function(tag, attr) { + var el = document.createElement(tag); + if (typeof attr === 'object') { + for (var a in attr) { + if (attr.hasOwnProperty(a)) { + el[a] = attr[a]; + } + } + } else if (typeof attr === 'string') { + el.className = (el.className + ' ' + attr).trim(); + } + + return el; + } + }, + + ///// Element factory function for Ninja Elements + ///// selection is the string displayed in the PI + makeNJElement: { + value: function(tag, selection, controller, attr, isShape) { + var el = this.make(tag, attr); + this.makeElementModel(el, selection, controller, isShape); + + return el; + } + }, + + ///// Element Model creation for existing elements + ///// TODO: find a different place for this function + makeElementModel: { + value: function(el, selection, controller, isShape) { + var p3d = Montage.create(Properties3D).init(el); + var shapeProps = null; + if(isShape) { + shapeProps = Montage.create(ShapeModel); + } + + el.elementModel = Montage.create(ElementModel, { + type: { value: el.nodeName}, + selection: { value: selection}, + controller: { value: ControllerFactory.getController(controller)}, + pi: { value: controller + "Pi"}, + props3D: { value: p3d}, + shapeModel: { value: shapeProps} + }); + + } + }, + + ///// Element Model creation for existing elements based on element type. + ///// TODO: find a different place for this function and return different element models based on type. + makeElementModel2: { + value: function(el) { + this.makeElementModel(el, "Div", "block", false); + } + }, + + ///// Removes all child nodes and returns node + ///// Accepts a single node, or an array of dom nodes + empty : { + value: function(node) { + var elements = [], + self = this; + if (node.constructor === Array) { + node.forEach(function(el) { self.empty(el) }); + } else { + this.toArray(node.childNodes).forEach(function(child) { + child.parentNode.removeChild(child); + }); + } + + return node; + } + }, + + queryParentSelector : { + value: function(el, strSelector) { + // queryParentSelector: + // Given a DOM element el (required), walk up the DOM tree + // and find the first parent that matches selector strSelector (required). + // Returns: The element that matches, or false if there is no match + // or if insufficient parameters are supplied. + + if ((typeof(el) === "undefined") || (typeof(strSelector) === "undefined")) { + // Parameters are required, m'kay? + return false; + } else if ((typeof(el) !== "object") || (typeof(strSelector) !== "string" )) { + // You also have to use the right parameters. + return false; + } + + // First, get an empty clone of the parent. + var myParent = el.parentNode; + var clone = myParent.cloneNode(false); + if (clone === null) { + return false; + } + + // If we're at the top of the DOM, our clone will be an htmlDocument. + // htmlDocument has no tagName. + if (typeof(clone.tagName) !== "undefined") { + // create a bogus div to use as a base for querySelector + var temp = document.createElement("div"); + + // Append the clone to the bogus div + temp.appendChild(clone); + + // Now we can use querySelector! Sweet. + var selectorTest = temp.querySelector(strSelector); + + // What has querySelector returned? + if (selectorTest === null) { + // No match, so recurse. + return this.queryParentSelector(myParent, strSelector); + } else { + // Match! Return the element. + return myParent; + } + } else { + // We're at the top of the DOM so we're done. + return false; + } + } + + }, + + /* ================= Style methods ================= */ + + ///// Get computed height of element + height : { + value: function(node, pseudo) { + return node.ownerDocument.defaultView.getComputedStyle(node, pseudo).getPropertyValue('height'); + } + }, + + /* ================= Array methods ================= */ + + ///// Return an array from an array-like object + toArray : { + value: function(arrayLikeObj) { + return Array.prototype.slice.call(arrayLikeObj); + } + }, + + /* ================= String methods ================= */ + + ///// Return the last part of a path (e.g. filename) + getFileNameFromPath : { + value: function(path) { + return path.substr(path.lastIndexOf('/') + 1); + } + } + +}); diff --git a/js/ninja.reel/ninja.html b/js/ninja.reel/ninja.html index 706c8243..f3ff3d58 100644 --- a/js/ninja.reel/ninja.html +++ b/js/ninja.reel/ninja.html @@ -259,6 +259,11 @@ "name": "NewFileWorkflowController" }, + "njUtils": { + "module":"js/lib/nj-utils", + "name": "NJUtils" + }, + "owner": { "module": "js/ninja.reel", "name": "Ninja", @@ -279,7 +284,8 @@ "stylesController": {"@": "stylesController"}, "filePickerController": {"@": "filePickerController"}, "newFileController": {"@": "newFileController"}, - "documentBar": {"@": "documentBar"} + "documentBar": {"@": "documentBar"}, + "njUtils": {"@": "njUtils"} } } diff --git a/js/ninja.reel/ninja.js b/js/ninja.reel/ninja.js index 465533cd..7115b228 100644 --- a/js/ninja.reel/ninja.js +++ b/js/ninja.reel/ninja.js @@ -34,6 +34,8 @@ exports.Ninja = Montage.create(Component, { templateDidLoad: { value: function() { + this.application.njutils = this.njUtils; + this.eventManager.addEventListener( "preloadFinish", this, false); } }, -- 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(-) (limited to 'js') 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(-) (limited to 'js') 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 From 1159924ecae4e7d371d40cee00e0e56d1605ffda Mon Sep 17 00:00:00 2001 From: Valerio Virgillito Date: Wed, 1 Feb 2012 23:53:47 -0800 Subject: Fixes for montage integration Signed-off-by: Valerio Virgillito --- js/helper-classes/RDGE/GLBrushStroke.js | 1 + js/helper-classes/RDGE/GLSubpath.js | 1 + js/ninja.reel/ninja.js | 15 ++++++++------- .../PanelContainer/PanelContainer.reel/PanelContainer.js | 4 ++-- 4 files changed, 12 insertions(+), 9 deletions(-) (limited to 'js') diff --git a/js/helper-classes/RDGE/GLBrushStroke.js b/js/helper-classes/RDGE/GLBrushStroke.js index 89292ad8..e3b14bf7 100644 --- a/js/helper-classes/RDGE/GLBrushStroke.js +++ b/js/helper-classes/RDGE/GLBrushStroke.js @@ -4,6 +4,7 @@ No rights, expressed or implied, whatsoever to this software are provided by Mot (c) Copyright 2011 Motorola Mobility, Inc. All Rights Reserved. */ +// Todo: This shoudl be converted to a module var VecUtils = require("js/helper-classes/3D/vec-utils").VecUtils; diff --git a/js/helper-classes/RDGE/GLSubpath.js b/js/helper-classes/RDGE/GLSubpath.js index 25b12093..55b7e49a 100644 --- a/js/helper-classes/RDGE/GLSubpath.js +++ b/js/helper-classes/RDGE/GLSubpath.js @@ -4,6 +4,7 @@ No rights, expressed or implied, whatsoever to this software are provided by Mot (c) Copyright 2011 Motorola Mobility, Inc. All Rights Reserved. */ +// Todo: This shoudl be converted to a module var VecUtils = require("js/helper-classes/3D/vec-utils").VecUtils; diff --git a/js/ninja.reel/ninja.js b/js/ninja.reel/ninja.js index 7115b228..48c72a1d 100644 --- a/js/ninja.reel/ninja.js +++ b/js/ninja.reel/ninja.js @@ -96,9 +96,16 @@ exports.Ninja = Montage.create(Component, { } }, + _didDraw: { + value: false + }, + didDraw: { value: function() { - NJevent("appLoaded"); + if(!this._didDraw) { + NJevent("appLoaded"); + this._didDraw = true; + } } }, @@ -165,12 +172,6 @@ exports.Ninja = Montage.create(Component, { } }, - handleLivePreview: { - value: function(event) { - - } - }, - executeLivePreview: { value: function() { var background, overflow, transitionStopRule; diff --git a/js/panels/PanelContainer/PanelContainer.reel/PanelContainer.js b/js/panels/PanelContainer/PanelContainer.reel/PanelContainer.js index 57187af1..66333cc0 100644 --- a/js/panels/PanelContainer/PanelContainer.reel/PanelContainer.js +++ b/js/panels/PanelContainer/PanelContainer.reel/PanelContainer.js @@ -91,7 +91,7 @@ exports.PanelContainer = Montage.create(Component, { this.panelSplitter.disabled = true; } - this.needsDraw = true; +// this.needsDraw = true; this.addEventListener("change@appModel.PropertiesPanel", this, false); this.addEventListener("change@appModel.ProjectPanel", this, false); @@ -198,7 +198,7 @@ exports.PanelContainer = Montage.create(Component, { minHeights += this.repeater.childComponents[i].element.offsetHeight; } else { this._panels[i].isLocked = false; - this.repeater.childComponents[i].needsDraw = true; + if(this.repeater.childComponents[i]) this.repeater.child