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