13 files changed, 156 insertions, 258 deletions

diff --git a/js/controllers/elements/shapes-controller.js b/js/controllers/elements/shapes-controller.js
index 8d7b74f0..e9a5f865 100755
--- a/js/controllers/elements/shapes-controller.js
+++ b/js/controllers/elements/shapes-controller.js
@@ -129,7 +129,7 @@ exports.ShapesController = Montage.create(CanvasController, {
                     el.elementModel.shapeModel.GLWorld.render();
                     break;
                 case "useWebGl":
-                    canvas = njModule.NJUtils.makeNJElement("canvas", "Canvas", "shape", el.className, true);
+                    canvas = njModule.NJUtils.make("canvas", el.className, this.application.ninja.currentDocument);
                     canvas.setAttribute("data-RDGE-id", njModule.NJUtils.generateRandom());
                     canvas.width = el.width;
                     canvas.height = el.height;
diff --git a/js/lib/NJUtils.js b/js/lib/NJUtils.js
index 301af3f1..5aaeb5f2 100755
--- a/js/lib/NJUtils.js
+++ b/js/lib/NJUtils.js
@@ -5,16 +5,15 @@ No rights, expressed or implied, whatsoever to this software are provided by Mot
 </copyright> */
 
 var Montage = require("montage/core/core").Montage,
+    Component = require("montage/ui/component").Component,
     Uuid = require("montage/core/uuid").Uuid,
     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 = Object.create(Object.prototype, {
-    
-    
-    
+exports.NJUtils = Montage.create(Component, {
+
     /* =============== DOM Access ================ */
     
     ///// Quick "getElementById"
@@ -95,14 +94,73 @@ exports.NJUtils = Object.create(Object.prototype, {
         }
     },
 
-    ///// 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);
+    createModelWithShape: {
+        value: function(el, selection) {
+            el.elementModel = Montage.create(ElementModel).initialize(el, true, selection);
+        }
+    },
 
-            return el;
+    createModelWithSelection: {
+        value: function(el, selection) {
+            el.elementModel = Montage.create(ElementModel).initialize(el, false, selection);
+        }
+    },
+
+    createModelForComponent: {
+        value: function(el, selection) {
+            el.elementModel = Montage.create(ElementModel).initialize(el, false, selection, true);
+        }
+    },
+
+    // TODO: Find a better place for this method
+    stylesFromDraw: {
+        value: function(element, width, height, drawData, pos) {
+            var styles = {};
+
+            styles['position'] = pos ? pos: "absolute";
+            styles['left'] = (Math.round(drawData.midPt[0] - 0.5 * width)) - this.application.ninja.currentSelectedContainer.offsetLeft + 'px';
+            styles['top'] = (Math.round(drawData.midPt[1] - 0.5 * height)) - this.application.ninja.currentSelectedContainer.offsetTop + 'px';
+            styles['width'] = width + 'px';
+            styles['height'] = height + 'px';
+
+            // TODO: Check why Canvas has different tranform styles from default.
+            if(!MathUtils.isIdentityMatrix(drawData.planeMat)) {
+                styles['-webkit-transform-style'] = 'preserve-3d';
+                styles['-webkit-transform'] = this.getElementMatrix(drawData.planeMat, drawData.midPt);
+            }
+
+            if(element.nodeName === "CANVAS") {
+                element.width = width;
+                element.height = height;
+                delete styles['width'];
+                delete styles['height'];
+
+                styles['-webkit-transform-style'] = 'preserve-3d';
+            }
+
+            return styles;
+        }
+    },
+
+    // Get the matrix for the actual element being added to the user document.
+    // TODO: Find a better place for this method
+    getElementMatrix: {
+        value: function(planeMat, midPt) {
+            var divMat, flatMat, flatMatSafe;
+            // we should not need to worry about divide by zero below since we snapped to the point
+            divMat = planeMat.slice(0);
+            divMat[12] = 0.0;
+            divMat[13] = 0.0;
+            //divMat[14] = 0.0;
+            divMat[14] = midPt[2];
+
+            // set the left and top of the element such that the center of the rectangle is at the mid point
+            this.application.ninja.stage.setStageAsViewport();
+
+            flatMat = divMat;
+            flatMatSafe = MathUtils.scientificToDecimal(flatMat, 10);
+
+            return "matrix3d(" + flatMatSafe + ")";
         }
     },
 
diff --git a/js/mediators/drag-drop-mediator.js b/js/mediators/drag-drop-mediator.js
index b0aba5b6..59086ef6 100755
--- a/js/mediators/drag-drop-mediator.js
+++ b/js/mediators/drag-drop-mediator.js
@@ -114,11 +114,13 @@ exports.DragDropMediator = Montage.create(Component, {
                             var self = this;
                                                 //
                                                 if (e.currentTarget.fileType.indexOf('svg') !== -1) {
-                                                        element = NJUtils.makeNJElement('embed', 'SVG', 'block');//TODO: Verify this is proper
+                                                        element = NJUtils.make('embed', null, this.application.ninja.currentDocument);//TODO: Verify this is proper
+                                NJUtils.createModelWithSelection(element, "SVG");
                                                         element.type = 'image/svg+xml';
                                         element.src = url+'/'+fileName;
                                                 } else {
-                                                        element = NJUtils.makeNJElement('image', 'image', 'image');
+                                                        element = NJUtils.make('image', null, this.application.ninja.currentDocument);
+                                NJUtils.createModel(element);
                                         element.src = url+'/'+fileName;
                                                 }
                                                 //Adding element once it is loaded
diff --git a/js/models/element-model.js b/js/models/element-model.js
index 72d61806..966158e4 100755
--- a/js/models/element-model.js
+++ b/js/models/element-model.js
@@ -32,24 +32,38 @@ exports.ElementModel = Montage.create(Montage, {
     shapeModel:     { value: null },
     isIn2DSnapCache : { value: false },
 
+    isComponent:    { value: false },
+
     fill:           { value: null },
     stroke:         { value: null },
 
     initialize: {
-        value: function(el, isShape) {
+        value: function(el, isShape, selection, isComponent) {
             var elementName, controller;
 
             elementName = el.nodeName.toLowerCase();
-            controller = this.elementNameToController(elementName);
 
             this.type = el.nodeName;
-            this.selection = elementName;
-            this.controller = ControllerFactory.getController(controller);
-            this.pi = this.elementNameToPi(elementName);
+            this.selection = selection ? selection : elementName;
+
+            if(isComponent) {
+                controller = "component";
+                this.pi = this.elementNameToPi(selection.replace(/\s+/g, ''));
+                this.isComponent = true;
+            } else {
+                controller = this.elementNameToController(elementName);
+                this.pi = this.elementNameToPi(elementName);
+            }
+
             this.props3D = Montage.create(Properties3D);
 
-            //shapeModel: { value: shapeProps},
-//            isShape:    { value: isShape}
+            if(isShape) {
+                this.controller = ControllerFactory.getController("shape");
+                this.shapeModel = Montage.create(ShapeModel);
+                this.isShape = true;
+            } else {
+                this.controller = ControllerFactory.getController(controller);
+            }
 
             return this;
 
diff --git a/js/panels/components-panel.reel/components-panel.js b/js/panels/components-panel.reel/components-panel.js
index 79eac37b..4169423b 100755
--- a/js/panels/components-panel.reel/components-panel.js
+++ b/js/panels/components-panel.reel/components-panel.js
@@ -317,81 +317,77 @@ exports.ComponentsPanel = Montage.create(Component, {
 
             switch(name) {
                 case "anchor":
-                    el = NJUtils.makeNJElement("a", "Anchor", "component");
-                    el.elementModel.pi = "AnchorPi";
+                    el = document.application.njUtils.make("a", null, this.application.ninja.currentDocument);
+                    document.application.njUtils.createModelForComponent(el, "Anchor");
                     el.setAttribute("href", "http://www.motorola.com");
                     el.innerHTML = "link";
                     break;
                 case "button":