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 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 737169d194fc29c82ee784b561065f287e259f88 Mon Sep 17 00:00:00 2001 From: Nivesh Rajbhandari Date: Thu, 2 Feb 2012 15:35:27 -0800 Subject: Fixing keyboard shortcut and tooltip for hand and 3d tools. Signed-off-by: Nivesh Rajbhandari --- js/data/tools-data.js | 6 +++--- js/mediators/keyboard-mediator.js | 6 ++++++ 2 files changed, 9 insertions(+), 3 deletions(-) (limited to 'js') diff --git a/js/data/tools-data.js b/js/data/tools-data.js index 8ea84574..de965dbc 100644 --- a/js/data/tools-data.js +++ b/js/data/tools-data.js @@ -37,7 +37,7 @@ exports.ToolsData = Montage.create(Montage, { "properties": "rotate3DProperties", "spriteSheet": true, "action": "Rotate3DTool", - "toolTip": "3D Rotate Object Tool", + "toolTip": "3D Rotate Object Tool (W)", "cursor": "auto", "lastInGroup": false, "container": false, @@ -48,7 +48,7 @@ exports.ToolsData = Montage.create(Montage, { "properties": "translate3DProperties", "spriteSheet": true, "action": "Translate3DTool", - "toolTip": "3D Translate Object Tool", + "toolTip": "3D Translate Object Tool (G)", "cursor": "auto", "lastInGroup": true, "container": false, @@ -206,7 +206,7 @@ exports.ToolsData = Montage.create(Montage, { "properties": "panProperties", "spriteSheet": true, "action": "PanTool", - "toolTip": "Pan Tool", + "toolTip": "Hand Tool (H)", "cursor": "url('images/tools/hand_down.png'), default", "lastInGroup": false, "container": false, diff --git a/js/mediators/keyboard-mediator.js b/js/mediators/keyboard-mediator.js index 144932c0..a1fdead3 100644 --- a/js/mediators/keyboard-mediator.js +++ b/js/mediators/keyboard-mediator.js @@ -178,6 +178,12 @@ exports.KeyboardMediator = Montage.create(Component, { return; } + if(evt.keyCode === Keyboard.H ) { + evt.preventDefault(); + this.application.ninja.handleSelectTool({"detail": this.application.ninja.toolsData.defaultToolsData[15]}); + return; + } + if(evt.keyCode === Keyboard.Z ) { evt.preventDefault(); this.application.ninja.handleSelectTool({"detail": this.application.ninja.toolsData.defaultToolsData[16]}); -- cgit v1.2.3 From db73f720b692d63b55f7c773579fe23336ec0486 Mon Sep 17 00:00:00 2001 From: Nivesh Rajbhandari Date: Thu, 2 Feb 2012 16:40:08 -0800 Subject: Update PI when element is changed by one of the tools. Signed-off-by: Nivesh Rajbhandari --- js/panels/properties/content.reel/content.js | 18 ++++++++++++++++-- 1 file changed, 16 insertions(+), 2 deletions(-) (limited to 'js') diff --git a/js/panels/properties/content.reel/content.js b/js/panels/properties/content.reel/content.js index 3cedee6d..e2ea1374 100644 --- a/js/panels/properties/content.reel/content.js +++ b/js/panels/properties/content.reel/content.js @@ -97,8 +97,22 @@ exports.Content = Montage.create(Component, { value: function(event) { // console.log("Element Change PI ", event.detail.source); // If the event comes from the pi don't need to update if(event.detail.source && event.detail.source !== "pi") { - this.positionSize.leftPosition = parseFloat(ElementsMediator.getProperty(this.application.ninja.selectedElements[0]._element, "left")); - this.positionSize.topPosition = parseFloat(ElementsMediator.getProperty(this.application.ninja.selectedElements[0]._element, "top")); + // TODO - This should only update the properties that were changed. + var el = this.application.ninja.selectedElements[0]._element || this.application.ninja.selectedElements[0]; + this.positionSize.leftPosition = parseFloat(ElementsMediator.getProperty(el, "left")); + this.positionSize.topPosition = parseFloat(ElementsMediator.getProperty(el, "top")); + this.positionSize.heightSize = parseFloat(ElementsMediator.getProperty(el, "height")); + this.positionSize.widthSize = parseFloat(ElementsMediator.getProperty(el, "width")); + + if(this.threeD.inGlobalMode) + { + this.threeD.x3D = ElementsMediator.get3DProperty(el, "x3D"); + this.threeD.y3D = ElementsMediator.get3DProperty(el, "y3D"); + this.threeD.z3D = ElementsMediator.get3DProperty(el, "z3D"); + this.threeD.xAngle = ElementsMediator.get3DProperty(el, "xAngle"); + this.threeD.yAngle = ElementsMediator.get3DProperty(el, "yAngle"); + this.threeD.zAngle = ElementsMediator.get3DProperty(el, "zAngle"); + } } } }, -- cgit v1.2.3 From 854a6d1be334782c8e232601e6d562a11296e55a Mon Sep 17 00:00:00 2001 From: Nivesh Rajbhandari Date: Fri, 3 Feb 2012 14:06:26 -0800 Subject: Update grid and planes when elementChange event signifies the "matrix", "left", "top", "width" or "height" properties have changed. Signed-off-by: Nivesh Rajbhandari --- js/helper-classes/3D/draw-utils.js | 34 ++++++++++++++++++++++- js/mediators/element-mediator.js | 6 ++-- js/panels/Color/colortoolbar.reel/colortoolbar.js | 8 +++--- js/stage/layout.js | 4 +++ 4 files changed, 44 insertions(+), 8 deletions(-) (limited to 'js') diff --git a/js/helper-classes/3D/draw-utils.js b/js/helper-classes/3D/draw-utils.js index fd96af4d..fe617548 100644 --- a/js/helper-classes/3D/draw-utils.js +++ b/js/helper-classes/3D/draw-utils.js @@ -71,6 +71,9 @@ var DrawUtils = exports.DrawUtils = Montage.create(Component, { _selectionCtr : {value: null, writable: true }, + // Properties that require element planes to be updated + _updatePlaneProps : {value: ["matrix", "left", "top", "width", "height"], writable: false }, + /////////////////////////////////////////////////////////////////////// // Property accessors /////////////////////////////////////////////////////////////////////// @@ -124,11 +127,38 @@ var DrawUtils = exports.DrawUtils = Montage.create(Component, { } }, + _shouldUpdatePlanes: { + value: function(props) { + if(!props) + { + return false; + } + else if (typeof props === "string") + { + return (this._updatePlaneProps.indexOf(props) !== -1); + } + + for (var p in props) + { + if(this._updatePlaneProps.indexOf(p) !== -1) + { + return true; + } + } + + return false; + } + }, + // TODO - Check why handleElementChange is being fired before handleAddElement handleElementChange: { value: function(event) { + if(!event.detail || !event.detail.data) + { + return; + } var els = event.detail.data.els; - if(els) + if(els && this._shouldUpdatePlanes(event.detail.data.prop)) { var len = els.length, i = 0, @@ -141,7 +171,9 @@ var DrawUtils = exports.DrawUtils = Montage.create(Component, { el.elementModel.props3D.elementPlane.init(); } + this.application.ninja.stage.layout.draw(); this.drawWorkingPlane(); + this.draw3DCompass(); } } }, diff --git a/js/mediators/element-mediator.js b/js/mediators/element-mediator.js index 1d0aef44..b2bc5355 100644 --- a/js/mediators/element-mediator.js +++ b/js/mediators/element-mediator.js @@ -425,7 +425,7 @@ exports.ElementMediator = Montage.create(NJComponent, { el.elementModel.controller["set3DProperties"](el, props, i, update3DModel); } - NJevent("element" + eventType, {type : "set3DProperties", source: source, data: {"els": els, "prop": props, "value": props}, redraw: null}); + NJevent("element" + eventType, {type : "set3DProperties", source: source, data: {"els": els, "prop": "matrix", "value": props}, redraw: null}); } }, @@ -660,11 +660,11 @@ exports.ElementMediator = Montage.create(NJComponent, { if(isChanging) { - NJevent("elementChanging", {type : "setMatrix", source: null, data: {"el": el, "prop": "matrix", "value": mat}, redraw: null}); + NJevent("elementChanging", {type : "setMatrix", source: null, data: {"els": [el], "prop": "matrix", "value": mat}, redraw: null}); } else { - NJevent("elementChange", {type : "setMatrix", source: null, data: {"el": el, "prop": "matrix", "value": mat}, redraw: null}); + NJevent("elementChange", {type : "setMatrix", source: null, data: {"els": [el], "prop": "matrix", "value": mat}, redraw: null}); } } }, diff --git a/js/panels/Color/colortoolbar.reel/colortoolbar.js b/js/panels/Color/colortoolbar.reel/colortoolbar.js index 10ae8b6e..6b8e476b 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)', mode:'rgb', wasSetByCode: false, type: 'change'}, 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: true, 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)', mode:'rgb', wasSetByCode: false, type: 'change'}, 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: true, type: 'change'}, webGlColor: [1, 1, 1, 1]} }, //////////////////////////////////////////////////////////////////// // @@ -86,8 +86,8 @@ exports.ColorToolbar = Montage.create(Component, { this.application.ninja.colorController.addButton('chip', this.fill_btn); this.application.ninja.colorController.addButton('chip', this.stroke_btn); // - this.fill_btn.color('rgb', {wasSetByCode: false, type: 'change', color: {r: 255, g: 255, b: 255}, css: 'rgb(255,255,255)'}); - this.stroke_btn.color('rgb', {wasSetByCode: false, type: 'change', color: {r: 0, g: 0, b: 0}, css: 'rgb(0,0,0)'}); + this.fill_btn.color('rgb', {wasSetByCode: true, type: 'change', color: {r: 255, g: 255, b: 255}, css: 'rgb(255,255,255)'}); + this.stroke_btn.color('rgb', {wasSetByCode: true, type: 'change', color: {r: 0, g: 0, b: 0}, css: 'rgb(0,0,0)'}); } }, //////////////////////////////////////////////////////////////////// diff --git a/js/stage/layout.js b/js/stage/layout.js index dd5be081..c369fc30 100644 --- a/js/stage/layout.js +++ b/js/stage/layout.js @@ -74,6 +74,9 @@ exports.Layout = Montage.create(Component, { handleElementAdded: { value: function(event) { this.domTree.push(event.detail); + + this.draw(); + this.draw3DInfo(false); } }, @@ -82,6 +85,7 @@ exports.Layout = Montage.create(Component, { this.domTree.splice(this.domTree.indexOf(event.detail), 1); this.draw(); + this.draw3DInfo(false); } }, -- cgit v1.2.3 From 130c1d3bfeedfc50ab3481c7d8c2e83af224feac Mon Sep 17 00:00:00 2001 From: Nivesh Rajbhandari Date: Fri, 3 Feb 2012 14:06:26 -0800 Subject: Update grid and planes when elementChange event signifies the "matrix", "left", "top", "width" or "height" properties have changed. Signed-off-by: Nivesh Rajbhandari --- js/helper-classes/3D/draw-utils.js | 6 ++++-- 1 file changed, 4 insertions(+), 2 deletions(-) (limited to 'js') diff --git a/js/helper-classes/3D/draw-utils.js b/js/helper-classes/3D/draw-utils.js index fe617548..08a27618 100644 --- a/js/helper-classes/3D/draw-utils.js +++ b/js/helper-classes/3D/draw-utils.js @@ -168,7 +168,10 @@ var DrawUtils = exports.DrawUtils = Montage.create(Component, { for(i=0; i < len; i++) { item = els[i]; el = item._element || item; - el.elementModel.props3D.elementPlane.init(); + if(el.elementModel.props3D.elementPlane) + { + el.elementModel.props3D.elementPlane.init(); + } } this.application.ninja.stage.layout.draw(); @@ -1097,7 +1100,6 @@ var DrawUtils = exports.DrawUtils = Montage.create(Component, { var tmpCanvas = this.application.ninja.stage.canvas; var tmpStage = this.application.ninja.currentDocument.documentRoot; this.viewUtils.pushViewportObj( tmpCanvas ); - var tmpStage = this.application.ninja.currentDocument.documentRoot;