19 files changed, 318 insertions, 127 deletions

diff --git a/js/components/ui/property-control.reel/property-control.js b/js/components/ui/property-control.reel/property-control.js
index 58b1be9f..cd59c02c 100755
--- a/js/components/ui/property-control.reel/property-control.js
+++ b/js/components/ui/property-control.reel/property-control.js
@@ -9,7 +9,7 @@ var Montage = require("montage/core/core").Montage,
     HotText = require("js/components/hottext.reel").HotText,
     HotTextUnit = require("js/components/hottextunit.reel").HotTextUnit,
     Slider = require("js/components/slider.reel").Slider,
-    Button = require("js/components/button.reel").Button,
+    Button = require("montage/ui/button.reel").Button,
     Checkbox = require("js/components/checkbox.reel").Checkbox,
     Combobox = require("js/components/combobox.reel").Combobox,
     TextField = require("js/components/TextField.reel").TextField,
diff --git a/js/controllers/elements/element-controller.js b/js/controllers/elements/element-controller.js
index 70aba54e..b35251ad 100755
--- a/js/controllers/elements/element-controller.js
+++ b/js/controllers/elements/element-controller.js
@@ -228,22 +228,6 @@ var ElementController = exports.ElementController = Montage.create(NJComponent,
                         mat = this.transformStringToMat( xformStr );
                     if (!mat)
                         mat = Matrix.I(4);
-
-                    var zoom = this.application.ninja.elementMediator.getProperty(el, "zoom");
-                    if (zoom)
-                    {
-                        zoom = Number(zoom);
-                        if (zoom != 1)
-                        {
-                            var zoomMat = Matrix.create(  [
-                                [ zoom,    0,    0, 0],
-                                [    0, zoom,    0, 0],
-                                [    0,    0, zoom, 0],
-                                [    0,    0,    0, 1]
-                            ] );
-                            glmat4.multiply( zoomMat, mat, mat );
-                        }
-                    }
                 }
 
                 el.elementModel.props3D.matrix3d = mat;
diff --git a/js/controllers/elements/shapes-controller.js b/js/controllers/elements/shapes-controller.js
index d72d9c14..b3ac9ddb 100755
--- a/js/controllers/elements/shapes-controller.js
+++ b/js/controllers/elements/shapes-controller.js
@@ -6,10 +6,9 @@ No rights, expressed or implied, whatsoever to this software are provided by Mot
 
 var Montage =                   require("montage/core/core").Montage,
     CanvasController = require("js/controllers/elements/canvas-controller").CanvasController,
-    njModule = require("js/lib/NJUtils");
-
-var World = require("js/lib/drawing/world").World;
-var MaterialsModel = require("js/models/materials-model").MaterialsModel;
+    njModule = require("js/lib/NJUtils"),
+    World = require("js/lib/drawing/world").World,
+    MaterialsModel = require("js/models/materials-model").MaterialsModel;
 
 exports.ShapesController = Montage.create(CanvasController, {
 
@@ -100,6 +99,12 @@ exports.ShapesController = Montage.create(CanvasController, {
                         el.elementModel.shapeModel.GLWorld.render();
                     }
                     break;
+                case "editStrokeMaterial":
+                    NJevent("showMaterialPopup",{materialId : el.elementModel.shapeModel.strokeMaterial.getName()});
+                    break;
+                case "editFillMaterial":
+                    NJevent("showMaterialPopup",{materialId : el.elementModel.shapeModel.fillMaterial.getName()});
+                    break;
                 default:
                     CanvasController.setProperty(el, p, value);
             }
diff --git a/js/controllers/elements/stage-controller.js b/js/controllers/elements/stage-controller.js
index 34bb1fb5..97ea3aa5 100755
--- a/js/controllers/elements/stage-controller.js
+++ b/js/controllers/elements/stage-controller.js
@@ -129,5 +129,46 @@ exports.StageController = Montage.create(ElementController, {
         value: function(el, rule, selector) {
             el.elementModel.transitionStopRule.selectorText = selector;
         }
+    },
+
+    getMatrix: {
+        value: function(el) {
+            if(el.elementModel && el.elementModel.props3D && el.elementModel.props3D.matrix3d)
+            {
+                return el.elementModel.props3D.matrix3d.slice(0);
+            }
+            else
+            {
+                var mat;
+
+                if (el)
+                {
+                    var xformStr = this.application.ninja.elementMediator.getProperty(el, "-webkit-transform");
+                    if (xformStr)
+                        mat = this.transformStringToMat( xformStr );
+                    if (!mat)
+                        mat = Matrix.I(4);
+
+                    var zoom = this.application.ninja.elementMediator.getProperty(el, "zoom");
+                    if (zoom)
+                    {
+                        zoom = Number(zoom);
+                        if (zoom != 1)
+                        {
+                            var zoomMat = Matrix.create(  [
+                                [ zoom,    0,    0, 0],
+                                [    0, zoom,    0, 0],
+                                [    0,    0, zoom, 0],
+                                [    0,    0,    0, 1]
+                            ] );
+                            glmat4.multiply( zoomMat, mat, mat );
+                        }
+                    }
+                }
+
+                el.elementModel.props3D.matrix3d = mat;
+                return mat;
+            }
+        }
     }
 });
diff --git a/js/data/pi/pi-data.js b/js/data/pi/pi-data.js
index ba03c347..53fec3be 100755
--- a/js/data/pi/pi-data.js
+++ b/js/data/pi/pi-data.js
@@ -402,6 +402,13 @@ exports.PiData = Montage.create( Montage, {
                             items : { boundObject: "this.application.ninja.appModel", boundProperty: "materials" },
                             enabled: { boundObject: "this.controls", boundProperty: "useWebGl" },
                             divider : true
+                        },
+                        {
+                            type: "button",
+                            id: "editStrokeMaterial",
+                            prop: "editStrokeMaterial",
+                            label: "Edit",
+                            enabled: { boundObject: "this.controls", boundProperty: "useWebGl" }
                         }
                     ],
                     [
@@ -414,6 +421,13 @@ exports.PiData = Montage.create( Montage, {
                             dataField: "_name",
                             items : { boundObject: "this.application.ninja.appModel", boundProperty: "materials" },
                             enabled: { boundObject: "this.controls", boundProperty: "useWebGl" }
+                        },
+                        {
+                            type: "button",
+                            id: "editFillMaterial",
+                            prop: "editFillMaterial",
+                            label: "Edit",
+                            enabled: { boundObject: "this.controls", boundProperty: "useWebGl" }
                         }
                     ]
                 ]
@@ -481,6 +495,13 @@ exports.PiData = Montage.create( Montage, {
                             items : { boundObject: "this.application.ninja.appModel", boundProperty: "materials" },
                             enabled: { boundObject: "this.controls", boundProperty: "useWebGl" },
                             divider : true
+                        },
+                        {
+                            type: "button",
+                            id: "editStrokeMaterial",
+                            prop: "editStrokeMaterial",
+                            label: "Edit",
+                            enabled: { boundObject: "this.controls", boundProperty: "useWebGl" }
                         }
                     ]
                 ]
@@ -568,6 +589,13 @@ exports.PiData = Montage.create( Montage, {
                             items : { boundObject: "this.application.ninja.appModel", boundProperty: "materials" },
                             enabled: { boundObject: "this.controls", boundProperty: "useWebGl" },
                             divider : true
+                        },
+                        {
+