Update grid and planes when elementChange event signifies the "matrix", "left", "top", "width" or "height" properties have changed.

Signed-off-by: Nivesh Rajbhandari <mqg734@motorola.com>

4 files changed, 44 insertions, 8 deletions

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);
         }
     },