2 files changed, 62 insertions, 42 deletions

diff --git a/js/stage/layout.js b/js/stage/layout.js
index 56bb70bf..a94dd10c 100755
--- a/js/stage/layout.js
+++ b/js/stage/layout.js
@@ -53,36 +53,38 @@ exports.Layout = Montage.create(Component, {
             this.ctx.lineWidth = this.ctxLineWidth;
             this.ctx.fillStyle = this.drawFillColor;
 
-            this.eventManager.addEventListener("elementAdded", this, false);
+//            this.eventManager.addEventListener("elementAdded", this, false);
             this.eventManager.addEventListener("elementDeleted", this, false);
 
             this.eventManager.addEventListener("selectionChange", this, false);
 
             this.eventManager.addEventListener("deleteSelection", this, false);
-
-//            this.addEventListener("change@stage.appModel.layoutView", this.handleLayoutView, false);
-
         }
     },
 
-    handleLayoutView: {
+    handleOpenDocument: {
         value: function() {
-            console.log(this.stage.appModel.layoutView);
+            // Initial elements to draw is the entire node list
+            this.elementsToDraw = this.application.ninja.documentController.activeDocument._liveNodeList;
+
+            // Draw the elements and the 3d info
+            this.draw();
+            this.draw3DInfo(false);
         }
     },
 
+    // No need to keep track of the added elements. We now have a live node list of the dom
     handleElementAdded: {
         value: function(event) {
-            this.domTree.push(event.detail);
-
-            this.draw();
-            this.draw3DInfo(false);
+            // this.domTree.push(event.detail);
+            // this.draw();
+            // this.draw3DInfo(false);
         }
     },
 
     handleElementDeleted: {
         value: function(event) {
-            this.domTree.splice(this.domTree.indexOf(event.detail), 1);
+            //this.domTree.splice(this.domTree.indexOf(event.detail), 1);
         }
     },
 
@@ -96,8 +98,13 @@ exports.Layout = Montage.create(Component, {
 
     handleSelectionChange: {
         value: function(event) {
-            this.elementsToDraw = [];
+            // Make an array copy of the line node list which is not an array like object
+            this.domTree = Array.prototype.slice.call(this.application.ninja.documentController.activeDocument._liveNodeList, 0);
+
+            // Clear the elements to draw
+            this.elementsToDraw.length = 0;
 
+            // Draw the non selected elements
             if(!event.detail.isDocument) {
                 var tmp = event.detail.elements.map(function(element){ return element._element});
 
@@ -111,13 +118,15 @@ exports.Layout = Montage.create(Component, {
             this.draw(); // Not a reel yet :)
             this.draw3DInfo(false);
 
-
+            // Clear the domTree copy
+            this.domTree.length = 0;
         }
     },
 
     draw: {
         value: function() {
             this.clearCanvas();
+
             var els = this.elementsToDraw.length;
             for(var i = 0, el; i < els; i++){
                 this.drawTagOutline(this.elementsToDraw[i]);
@@ -127,15 +136,15 @@ exports.Layout = Montage.create(Component, {
 
     draw3DInfo: {
         value: function(updatePlanes) {
-            if(updatePlanes)
-            {
+            if(updatePlanes) {
                 drawUtils.updatePlanes();
             }
-            if(this.stage.appModel.show3dGrid)
-            {
+
+            if(this.stage.appModel.show3dGrid) {
                 this.application.ninja.stage.stageDeps.snapManager.updateWorkingPlaneFromView();
                 drawUtils.drawWorkingPlane();
             }
+
             drawUtils.draw3DCompass();
         }
     },
@@ -152,29 +161,22 @@ exports.Layout = Montage.create(Component, {
             if(!item) return;
 
             // TODO Bind the layoutview mode to the current document
-//            var mode  = this.application.ninja.currentDocument.layoutMode;
+            // var mode  = this.application.ninja.currentDocument.layoutMode;
 
             if(this.layoutView === "layoutOff") return;
             
             // Don't draw outlines for shapes.
             // TODO Use the element mediator/controller/model to see if its a shape
-            /*
-            if (utilsModule.utils.isElementAShape(item))
-            {
-                return;
-            }
-            */
+            // if (utilsModule.utils.isElementAShape(item)) return;
 
-            /**
-             * New Drawing layout code using 3D calculations
-            */
+
+            // draw the layout
             viewUtils.setViewportObj( item );
             var bounds3D = viewUtils.getElementViewBounds3D( item );
             var tmpMat = viewUtils.getLocalToGlobalMatrix( item );
 
             var zoomFactor = 1;
-            if (this.stage._viewport.style && this.stage._viewport.style.zoom)
-            {
+            if (this.stage._viewport.style && this.stage._viewport.style.zoom) {
                                 zoomFactor = Number(this.stage._viewport.style.zoom);
             }
 
@@ -185,8 +187,7 @@ exports.Layout = Montage.create(Component, {
                 var localPt = bounds3D[j];
                 var tmpPt = viewUtils.localToGlobal2(localPt, tmpMat);
 
-                if(zoomFactor !== 1)
-                {
+                if(zoomFactor !== 1) {
                     tmpPt = vecUtils.vecScale(3, tmpPt, zoomFactor);
 
                     tmpPt[0] += sSL*(zoomFactor - 1);
@@ -255,14 +256,6 @@ exports.Layout = Montage.create(Component, {
         value: function(elements) {
             this.clearCanvas();
             this.WalkDOM(this.application.ninja.currentDocument.documentRoot, elements);
-
-            //drawUtils.updatePlanes();
-
-            if(this.application.ninja.currentDocument.draw3DGrid) {
-                //drawUtils.drawWorkingPlane();
-            }
-            
-            //drawUtils.draw3DCompass();
         }
     },
 
diff --git a/js/stage/stage.reel/stage.js b/js/stage/stage.reel/stage.js
index 6bb626c2..755c7ff1 100755
--- a/js/stage/stage.reel/stage.js
+++ b/js/stage/stage.reel/stage.js
@@ -262,6 +262,8 @@ exports.Stage = Montage.create(Component, {
             this.application.ninja.toolsData.selectedToolInstance._configure(true);
 
             this.addEventListener("change@appModel.show3dGrid", this, false);
+
+            this.layout.handleOpenDocument();
         }
     },
 
@@ -519,12 +521,37 @@ exports.Stage = Montage.create(Component, {
      */
     GetElement: {
         value: function(pos) {
-            var point = webkitConvertPointFromPageToNode(this.canvas, new WebKitPoint(pos.pageX, pos.pageY));
-            return this.application.ninja.currentDocument.GetElementFromPoint(point.x + this.scrollLeft,point.y + this.scrollTop);
+            var point = webkitConvertPointFromPageToNode(this.canvas, new WebKitPoint(pos.pageX, pos.pageY)),
+                elt = this.application.ninja.currentDocument.GetElementFromPoint(point.x + this.scrollLeft,point.y + this.scrollTop);
+
+            // workaround Chrome 3d bug
+            if(this.application.ninja.currentDocument.inExclusion(elt) !== -1)
+            {
+                return this._getElementUsingSnapping(point);
+            } else {
+                return elt;
+            }
         }
     },
 
-
+    /**
+     * _getElementUsingSnapping: Returns the object at point using snap manager
+     *
+     * @param: point
+     * @return: Returns the Object in the user document under the point
+     */
+    _getElementUsingSnapping: {
+        value: function(point) {
+            this.stageDeps.snapManager.enableElementSnap( true );
+            var hitRec = this.stageDeps.snapManager.snap(point.x, point.y, true);
+            this.stageDeps.snapManager.enableElementSnap( this.stageDeps.snapManager.elementSnapEnabledAppLevel() );
+            if (hitRec) {
+                return hitRec.getElement();
+            } else {
+                return null;
+            }
+        }
+    },