1 files changed, 210 insertions, 146 deletions

diff --git a/js/stage/stage.reel/stage.js b/js/stage/stage.reel/stage.js
index 7c587989..817220d4 100755
--- a/js/stage/stage.reel/stage.js
+++ b/js/stage/stage.reel/stage.js
@@ -29,10 +29,10 @@ ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF THE
 POSSIBILITY OF SUCH DAMAGE.
 </copyright> */
 
-var Montage =   require("montage/core/core").Montage,
+var Montage = require("montage/core/core").Montage,
     Component = require("montage/ui/component").Component,
     drawUtils = require("js/helper-classes/3D/draw-utils").DrawUtils,
-    vecUtils =  require("js/helper-classes/3D/vec-utils").VecUtils;
+    vecUtils = require("js/helper-classes/3D/vec-utils").VecUtils;
 
 exports.Stage = Montage.create(Component, {
 
@@ -46,8 +46,20 @@ exports.Stage = Montage.create(Component, {
     drawNow: { value : false },
     switchedFromCodeDoc: { value : false },
 
+    drawLayout: { value : false },
+    updatePlanes: { value : false },
+    draw3DInfo: { value : false },
+
     // TO REVIEW
-    zoomFactor: {value : 1 },
+    zoomFactor: {
+        get: function() {
+            if (this._viewport && this._viewport.style && this._viewport.style.zoom) {
+                return Number(this._viewport.style.zoom);
+            } else {
+                return 1;
+            }
+        }
+    },
 
     _canvasSelectionPrefs:  { value: { "thickness" : 1.0, "color" : "#46a1ff" } },
     _canvasDrawingPrefs:    { value: { "thickness" : 1.0, "color" : "#000" } },
@@ -85,7 +97,21 @@ exports.Stage = Montage.create(Component, {
         set: function(value) {
             this._resizeCanvases = value;
             if(value) {
-                this.needsDraw = true;
+                // TODO GET THE SCROLL SIZE FROM THE CSS -- 11 px
+                this._canvas.width = this._layoutCanvas.width = this._drawingCanvas.width = this._gridCanvas.width = this.bindingView.width = this.element.offsetWidth - 11;
+                this._canvas.height = this._layoutCanvas.height = this._drawingCanvas.height = this._gridCanvas.height =  this.bindingView.height = this.element.offsetHeight - 11;// - 26 - 26;
+
+                if(this.currentDocument) {
+                    if(this.currentDocument.currentView === "design") {
+                        this.drawLayout = true;
+                        this.updatePlanes = true;
+                        this.draw3DInfo = true;
+                        this.needsDrawSelection = true;
+                    }
+                    if(this.currentDocument.model && this.currentDocument.model.documentRoot) {
+                        this.currentDocument.model.documentRoot.elementModel.setProperty("offsetCache", false);
+                    }
+                }
             }
         }
     },
@@ -99,6 +125,44 @@ exports.Stage = Montage.create(Component, {
         set: function(value) {
             this._updatedStage = value;
             if(value) {
+                if(this.currentDocument) {
+                    if(this.currentDocument.currentView === "design") {
+                        this.drawLayout = true;
+                        this.updatePlanes = true;
+                        this.draw3DInfo = true;
+                        this.needsDrawSelection = true;
+                    }
+                    if(this.currentDocument.model && this.currentDocument.model.documentRoot) {
+                        this.currentDocument.model.documentRoot.elementModel.setProperty("offsetCache", false);
+                    }
+                }
+            }
+        }
+    },
+
+    _needsDrawSelection: { value: false },
+
+    needsDrawSelection: {
+        get: function() {
+            return this._needsDrawSelection;
+        },
+        set: function(value) {
+            this._needsDrawSelection = value;
+            if(value) {
+                this.needsDraw = true;
+            }
+        }
+    },
+
+    _needsDrawTool: { value: null },
+
+    needsDrawTool: {
+        get: function() {
+            return this._needsDrawTool;
+        },
+        set: function(value) {
+            this._needsDrawTool = value;
+            if(value) {
                 this.needsDraw = true;
             }
         }
@@ -346,20 +410,55 @@ exports.Stage = Montage.create(Component, {
 
     willDraw: {
         value: function() {
-            if(this.resizeCanvases) {
-                // TODO GET THE SCROLL SIZE FROM THE CSS -- 11 px
-                this._canvas.width = this._layoutCanvas.width = this._drawingCanvas.width = this._gridCanvas.width = this.bindingView.width = this.element.offsetWidth - 11;
-                this._canvas.height = this._layoutCanvas.height = this._drawingCanvas.height = this._gridCanvas.height =  this.bindingView.height = this.element.offsetHeight - 11;// - 26 - 26;
-                // Hack for now until a full component
-                this.layout.draw();
-                if(this.currentDocument && (this.currentDocument.currentView === "design")) {
-                    this.layout.draw3DInfo(true);
+            if(this._needsDrawTool) {
+//                console.log("drawTool");
+                this.application.ninja.toolsData.selectedToolInstance.HandleMouseMove(this._needsDrawTool);
+                this.needsDrawTool = null;
+            }
+        }
+    },
+
+    draw: {
+        value: function() {
+            if(!this.currentDocument) return;
+
+            if(this.draw3DInfo) {
+//                console.log("draw3DInfo");
+                if(this.updatePlanes) {
+//                    console.log("updatePlanes");
+                    drawUtils.updatePlanes();
+                    this.stageDeps.snapManager._isCacheInvalid = true;
+                    this.updatePlanes = false;
+                }
+                if(this.appModel.show3dGrid) {
+//                    console.log("show3dGrid");
+                    this.stageDeps.snapManager.updateWorkingPlaneFromView();
                 }
-            } else if(this.updatedStage) {
+//                console.log("drawWorkingPlane");
+                drawUtils.drawWorkingPlane();
+                this.draw3DInfo = false;
+            }
+            if(this.drawLayout) {
+                this.layout.clearCanvas();
+//                console.log("drawLayout");
                 this.layout.draw();
-                this.layout.draw3DInfo(true);
+                this.drawLayout = false;
+            }
+
+            if(this._needsDrawSelection) {
+                this.clearCanvas();
+                if(this.currentDocument.model.domContainer !== this.currentDocument.model.documentRoot) {
+                    this.drawDomContainer(this.currentDocument.model.domContainer);
+                }
+                //TODO Set this variable in the needs draw so that it does not have to be calculated again for each draw for selection change
+                if(this.application.ninja.selectedElements.length) {
+                    drawUtils.drawSelectionBounds(this.application.ninja.selectedElements, this.showSelectionBounds);
+                }
+                NJevent("selectionDrawn");
+                this.needsDrawSelection = false;
             }
         }
+
     },
 
     didDraw: {
@@ -568,7 +667,7 @@ exports.Stage = Montage.create(Component, {
             this._clickPoint.y = point.y; // event.layerY;
 
             this.enableMouseInOut();
-
+            
             this.application.ninja.toolsData.selectedToolInstance.downPoint.x = point.x;
             this.application.ninja.toolsData.selectedToolInstance.downPoint.y = point.y;
             this.application.ninja.toolsData.selectedToolInstance.HandleLeftButtonDown(event);
@@ -630,7 +729,9 @@ exports.Stage = Montage.create(Component, {
 
     handleMousemove: {
         value: function(event) {
-            this.application.ninja.toolsData.selectedToolInstance.HandleMouseMove(event);
+//            this.application.ninja.toolsData.selectedToolInstance.HandleMouseMove(event);
+            // Set a flag here, and tell the tool to handle mouse move in our draw cycle
+            this.needsDrawTool = event;
         }
     },
 
@@ -653,25 +754,34 @@ exports.Stage = Montage.create(Component, {
 
     handleSelectionChange: {
         value: function(event) {
-            // TODO - this is a hack for now because some tools depend on selectionDrawn event for some logic
+            this.showSelectionBounds = true;
+            this.needsDrawSelection = true;
+            this.drawLayout = true;
+            this.layout.handleSelectionChange(event);
+            // TODO - Some tools currently depend on selectionDrawn event at this point, so force a draw here
             if(this.drawNow) {
                 this.draw();
                 this.drawNow = false;
-            } else {
-                this.needsDraw = true;
             }
         }
     },
 
     handleElementChanging: {
         value: function(event) {
-            this.needsDraw = true;
+            // TODO - This assumes only selected elements can have their properties modified
+            this.draw3DInfo = true;
+            this.showSelectionBounds = false;
+            this.needsDrawSelection = true;