6 files changed, 194 insertions, 41 deletions

diff --git a/js/lib/NJUtils.js b/js/lib/NJUtils.js
index 67bb59c4..dae128e4 100755
--- a/js/lib/NJUtils.js
+++ b/js/lib/NJUtils.js
@@ -94,10 +94,10 @@ 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);
-            if(selection === "Stage") {
-                p3d.init(el, true);
-            }
+
             var shapeProps = null;
             var pi = controller + "Pi";
 
@@ -143,6 +143,7 @@ exports.NJUtils = Object.create(Object.prototype, {
                     isShape:    { value: isShape}
             });
 
+
         }
     },
 
@@ -167,15 +168,12 @@ exports.NJUtils = Object.create(Object.prototype, {
                     break;
                 case "canvas":
                     isShape = el.getAttribute("data-RDGE-id");
-                    if(isShape)
-                    {
+                    if(isShape) {
                         // TODO - Need more info about the shape
                         selection = "canvas";
                         controller = "shape";
                         isShape = true;
-                    }
-                    else
-                    {
+                    } else {
                         selection = "canvas";
                         controller = "canvas";
                     }
diff --git a/js/lib/drawing/world.js b/js/lib/drawing/world.js
index 1a391338..7ce23921 100755
--- a/js/lib/drawing/world.js
+++ b/js/lib/drawing/world.js
@@ -362,9 +362,9 @@ var World = function GLWorld( canvas, use3D, preserveDrawingBuffer ) {
     
     // start RDGE passing your runtime object, and false to indicate we don't need a an initialization state
     // in the case of a procedurally built scene an init state is not needed for loading data
+        this._canvas.rdgeid = this._canvas.getAttribute( "data-RDGE-id" );
         if (this._useWebGL) {
                 rdgeStarted = true;
-                this._canvas.rdgeid = this._canvas.getAttribute( "data-RDGE-id" );
                 RDGE.globals.engine.unregisterCanvas( this._canvas );
                 RDGE.globals.engine.registerCanvas(this._canvas, this);
                 RDGE.RDGEStart( this._canvas );
@@ -758,7 +758,7 @@ World.prototype.exportJSON = function () {
         // would not be destructive of the data.  You would be wrong...
         // We need to rebuild everything
     if (this._useWebGL) {
-        if (worldObj.children && (worldObj.children.length === 1)) {
+        if (worldObj.children && (worldObj.children.length >= 1)) {
             this.rebuildTree(this._geomRoot);
             this.restartRenderLoop();
                 }
@@ -835,8 +835,11 @@ World.prototype.importJSON = function (jObj) {
 
         // import the objects
         // there should be exactly one child of the parent object
-        if (jObj.children && (jObj.children.length === 1))
-                this.importObjectsJSON( jObj.children[0] );
+        if (jObj.children)
+        {
+                for (var i=0;  i<jObj.children.length;  i++)
+                        this.importObjectsJSON( jObj.children[i] );
+        }
         else
                 throw new Error ("unrecoverable canvas import error - inconsistent root object: " + jObj.children );
 
diff --git a/js/lib/geom/brush-stroke.js b/js/lib/geom/brush-stroke.js
index efd21c4a..1fae0c1d 100755
--- a/js/lib/geom/brush-stroke.js
+++ b/js/lib/geom/brush-stroke.js
@@ -117,7 +117,7 @@ var BrushStroke = function GLBrushStroke() {
     };
 
     this.getPoint = function (index) {
-        return this._Points[index];
+        return this._Points[index].slice(0);
     };
 
     this.addPoint = function (pt) {
@@ -399,7 +399,7 @@ var BrushStroke = function GLBrushStroke() {
 
             // ***** unproject all the centered points and convert them to 2D (plane space)*****
             // (undo the projection step performed by the browser)
-            localPoint = this._unprojectPt(localPoint, 1400); //todo get the perspective distance from the canvas
+            //localPoint = this._unprojectPt(localPoint, 1400); //todo get the perspective distance from the canvas
             localPoint = MathUtils.transformPoint(localPoint, this._planeMatInv);
 
             //add to the list of local points
@@ -568,17 +568,17 @@ var BrushStroke = function GLBrushStroke() {
         }
         ctx.save();
         ctx.clearRect(0, 0, bboxWidth, bboxHeight);
-        this.drawToContext(ctx, 0, 0, false);
+        this.drawToContext(ctx, false);
         ctx.restore();
     } //this.render()
 
-    this.drawToContext = function(ctx, origX, origY, drawStageWorldPts){
+    this.drawToContext = function(ctx, drawStageWorldPts, stageWorldDeltaX, stageWorldDeltaY, stageWorldToScreenMat){
         var points = this._LocalPoints;
-        if (drawStageWorldPts){
+        if (drawStageWorldPts){ //this is usually true when we're drawing the brush stroke on the stage (no canvas yet)
             points = this._Points;
         }
         var numPoints = points.length;
-
+        var tempP, p;
         if (this._strokeUseCalligraphic) {
             //build the stamp for the brush stroke
             var t=0;
@@ -623,9 +623,23 @@ var BrushStroke = function GLBrushStroke() {
                 //ctx.strokeStyle="rgba("+parseInt(255*currStrokeColor[0])+","+parseInt(255*currStrokeColor[1])+","+parseInt(255*currStrokeColor[2])+","+alphaVal+")";
                 ctx.translate(disp[0],disp[1]);
                 ctx.beginPath();
-                ctx.moveTo(points[0][0]-origX, points[0][1]-origY);
+                if (drawStageWorldPts) {
+                    tempP = points[0].slice(0);
+                    tempP[0]+=stageWorldDeltaX; tempP[1]+=stageWorldDeltaY;
+                    p = MathUtils.transformAndDivideHomogeneousPoint(tempP, stageWorldToScreenMat);
+                } else {
+                    p = points[0];
+                }
+                ctx.moveTo(p[0],p[1]);
                 for (var i=0;i<numPoints;i++){
-                    ctx.lineTo(points[i][0]-origX, points[i][1]-origY);
+                    if (drawStageWorldPts) {
+                        tempP = points[i].slice(0);
+                        tempP[0]+=stageWorldDeltaX; tempP[1]+=stageWorldDeltaY;
+                        p = MathUtils.transformAndDivideHomogeneousPoint(tempP, stageWorldToScreenMat);
+                    } else {
+                        p = points[i];
+                    }
+                    ctx.lineTo(p[0],p[1]);
                 }
                 ctx.stroke();
                 ctx.restore();
@@ -641,13 +655,27 @@ var BrushStroke = function GLBrushStroke() {
             ctx.strokeStyle="rgba("+parseInt(255*this._strokeColor[0])+","+parseInt(255*this._strokeColor[1])+","+parseInt(255*this._strokeColor[2])+","+alphaVal+")";
             for (var l=0;l<numlayers;l++){
                 ctx.beginPath();
-                ctx.moveTo(points[0][0]-origX, points[0][1]-origY);
+                if (drawStageWorldPts) {
+                    tempP = points[0].slice(0);
+                    tempP[0]+=stageWorldDeltaX; tempP[1]+=stageWorldDeltaY;
+                    p = MathUtils.transformAndDivideHomogeneousPoint(tempP, stageWorldToScreenMat);
+                } else {
+                    p = points[0];
+                }
+                ctx.moveTo(p[0],p[1]);
                 if (numPoints===1){
                     //display a tiny segment as a single point
-                   ctx.lineTo(points[0][0]-origX, points[0][1]-origY+0.01);
+                   ctx.lineTo(p[0],p[1]+0.01);
                 }
                 for (var i=1;i<numPoints;i++){
-                    ctx.lineTo(points[i][0]-origX, points[i][1]-origY);
+                    if (drawStageWorldPts) {
+                        tempP = points[i].slice(0);
+                        tempP[0]+=stageWorldDeltaX; tempP[1]+=stageWorldDeltaY;
+                        p = MathUtils.transformAndDivideHomogeneousPoint(tempP, stageWorldToScreenMat);
+                    } else {
+                        p = points[i];
+                    }
+                    ctx.lineTo(p[0],p[1]);
                 }
                 ctx.lineWidth=2*l+minStrokeWidth;
                 ctx.stroke();
diff --git a/js/lib/geom/circle.js b/js/lib/geom/circle.js
index 218dcfa6..0f1f49a9 100755
--- a/js/lib/geom/circle.js
+++ b/js/lib/geom/circle.js
@@ -4,9 +4,12 @@ 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;
+
 ///////////////////////////////////////////////////////////////////////
 // Class GLCircle
 //      GL representation of a circle.