8 files changed, 2505 insertions, 2268 deletions

diff --git a/js/lib/NJUtils.js b/js/lib/NJUtils.js
index dae128e4..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"
@@ -54,13 +53,25 @@ exports.NJUtils = Object.create(Object.prototype, {
             return document.createTextNode(text);
         }
     },
-    
+
     ///// Quick "createElement" function "attr" can be classname or object
     ///// with attribute key/values
-    ///// Suppor for data attributes
-    make : {
-        value: function(tag, attr) {
-            var el = document.createElement(tag);
+    ///// Support for data attributes
+    ///// Support user/ninja document
+    make: {
+        value: function(tag, attr, doc) {
+            var _doc, el;
+
+            _doc = doc ? doc._document : document;
+            el = _doc.createElement(tag);
+            this.decor(el, attr);
+
+            return el;
+        }
+    },
+    
+    decor: {
+        value: function(el, attr) {
             if (typeof attr === 'object') {
                 for (var a in attr) {
                     if (attr.hasOwnProperty(a)) {
@@ -74,19 +85,82 @@ exports.NJUtils = Object.create(Object.prototype, {
             } else if (typeof attr === 'string') {
                 el.className = (el.className + ' ' + attr).trim();
             }
-            
-            return el;
         }
     },
 
-    ///// 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);
+    createModel: {
+        value: function(el) {
+            el.elementModel = Montage.create(ElementModel).initialize(el);
+        }
+    },
 
-            return el;
+    createModelWithShape: {
+        value: function(el, selection) {
+            el.elementModel = Montage.create(ElementModel).initialize(el, true, selection);
+        }
+    },
+
+    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 + ")";
         }
     },
 
@@ -94,8 +168,6 @@ exports.NJUtils = Object.create(Object.prototype, {
     ///// TODO: find a different place for this function
     makeElementModel: {
         value: function(el, selection, controller, isShape) {
-            //el.elementModel = Montage.create(ElementModel).initialize(el.nodeName, selection, controller, isShape);
-
             var p3d = Montage.create(Properties3D);
 
             var shapeProps = null;
diff --git a/js/lib/drawing/world.js b/js/lib/drawing/world.js
index 23e24347..b46a002b 100755
--- a/js/lib/drawing/world.js
+++ b/js/lib/drawing/world.js
@@ -993,17 +993,17 @@ World.prototype.importObjectJSON = function( jObj, parentGeomObj )
         switch (type)
         {
                 case 1:
-                        obj = new Rectangle();
+                        obj = Object.create(Rectangle, {});
                         obj.importJSON( jObj );
                         break;
 
                 case 2:         // circle
-                        obj = new Circle();
+                        obj = Object.create(Circle, {});
                         obj.importJSON( jObj );
                         break;
 
                 case 3:         // line
-            obj = new Line();
+            obj = Object.create(Line, {});
             obj.importJSON( jObj );
             break;
 
diff --git a/js/lib/geom/brush-stroke.js b/js/lib/geom/brush-stroke.js
index 1fae0c1d..6facdd5d 100755
--- a/js/lib/geom/brush-stroke.js
+++ b/js/lib/geom/brush-stroke.js
@@ -768,7 +768,7 @@ var BrushStroke = function GLBrushStroke() {
 
 }; //function BrushStroke ...class definition
 
-BrushStroke.prototype = new GeomObj();
+BrushStroke.prototype = Object.create(GeomObj, {});
 
 BrushStroke.prototype._CatmullRomSplineInterpolate = function(ctrlPts, t)
 {
diff --git a/js/lib/geom/circle.js b/js/lib/geom/circle.js
index 0f1f49a9..425b869a 100755
--- a/js/lib/geom/circle.js
+++ b/js/lib/geom/circle.js
@@ -4,9 +4,9 @@ No rights, expressed or implied, whatsoever to this software are provided by Mot
 (c) Copyright 2011 Motorola Mobility, Inc.  All Rights Reserved.
 </copyright> */
 
-var GeomObj                     = require("js/lib/geom/geom-obj").GeomObj;
-var ShapePrimitive      = require("js/lib/geom/shape-primitive").ShapePrimitive;
-var MaterialsModel      = require("js/models/materials-model").MaterialsModel;
+var GeomObj =           require("js/lib/geom/geom-obj").GeomObj;
+var ShapePrimitive =    require("js/lib/geom/shape-primitive").ShapePrimitive;
+var MaterialsModel = require("js/models/materials-model").MaterialsModel;
 var drawUtils           = require("js/helper-classes/3D/draw-utils").DrawUtils;
 var vecUtils            = require("js/helper-classes/3D/vec-utils").VecUtils;
 
@@ -16,744 +16,790 @@ var vecUtils		= require("js/helper-classes/3D/vec-utils").VecUtils;
 //      Derived from class GLGeomObj
 //              The position and dimensions of the stroke, fill, and inner Radius should be in pixels
 ///////////////////////////////////////////////////////////////////////
-var Circle = function GLCircle() {
-
-        this.init = function( world, xOffset, yOffset, width, height, strokeSize, strokeColor, fillColor, innerRadius, strokeMaterial, fillMaterial, strokeStyle) {
-                ///////////////////////////////////////////////////////////////////////
-                // Instance variables
+exports.Circle = Object.create(GeomObj, {
+
+    ///////////////////////////////////////////////////////////////////////
+    // Instance variables
+    ///////////////////////////////////////////////////////////////////////