1 files changed, 861 insertions, 0 deletions

diff --git a/js/stage/stage.reel/stage.js b/js/stage/stage.reel/stage.js
new file mode 100644
index 00000000..3e0b852e
--- /dev/null
+++ b/js/stage/stage.reel/stage.js
@@ -0,0 +1,861 @@
+/* <copyright>
+This file contains proprietary software owned by Motorola Mobility, Inc.<br/>
+No rights, expressed or implied, whatsoever to this software are provided by Motorola Mobility, Inc. hereunder.<br/>
+(c) Copyright 2011 Motorola Mobility, Inc.  All Rights Reserved.
+</copyright> */
+
+var Montage = require("montage/core/core").Montage,
+    Component = require("montage/ui/component").Component;
+
+var drawUtils = require("js/helper-classes/3D/draw-utils").DrawUtils;
+var vecUtils = require("js/helper-classes/3D/vec-utils").VecUtils;
+
+exports.Stage = Montage.create(Component, {
+
+    // TODO - Need to figure out how to remove this dependency
+    // Needed by some tools that depend on selectionDrawn event to set up some logic
+    drawNow: { value : false },
+
+    // TO REVIEW
+    zoomFactor: {value : 1 },
+
+    _canvasSelectionPrefs:  { value: { "thickness" : 1.0, "color" : "#46a1ff" } },
+    _editSymbolPrefs:       { value: { "thickness" : 2.0, "color" : "#C61F00" } },
+
+    _canvasDrawingPrefs:    { value: { "thickness" : 1.0, "color" : "#000" } },
+    drawingContextPreferences: { get: function() { return this._canvasDrawingPrefs; } },
+
+    _iframeContainer: { value: null },
+
+    _scrollFlag: {value: true, writable: true},
+    outFlag: { value: false, writable: true },
+
+    _resizeCanvases: { value: true },
+
+        viewUtils: {
+                get: function()  {  return this.stageDeps.viewUtils;  }
+        },
+
+        snapManager: {
+                get: function()  {  return this.stageDeps.snapManager;  }
+        },
+
+    resizeCanvases: {
+        get: function() {
+            return this._resizeCanvases;
+        },
+        set: function(value) {
+            this._resizeCanvases = value;
+            if(value) {
+                this.needsDraw = true;
+            }
+        }
+    },
+
+    _updatedStage: { value: false },
+
+    updatedStage: {
+        get: function() {
+            return this._updatedStage;
+        },
+        set: function(value) {
+            this._updatedStage = value;
+            if(value) {
+                this.needsDraw = true;
+            }
+        }
+    },
+
+    _currentDocumentStageView: {
+        value: "front"
+    },
+
+    currentDocumentStageView: {
+        get: function() {
+            return this._currentDocumentStageView;
+        },
+        set: function(value) {
+            if(this._currentDocumentStageView !== value) {
+                this._currentDocumentStageView = value;
+                this.setStageView(this.currentDocumentStageView);
+            }
+        }
+    },
+
+    contextMenu: {
+        value: false
+    },
+
+    /** MAIN CANVASES **/
+    _canvas: { value: null },   // selection bounds, 3d normals and the overall 3d selection box use this canvas
+    canvas: { get: function() { return this._canvas; } },
+
+    _context: { value: null },
+    context: { get: function() { return this._context; } },
+
+    _layoutCanvas: { value: null },
+    layoutCanvas: { get: function() { return this._layoutCanvas; } },
+
+    _drawingCanvas: { value: null },
+    drawingCanvas: { get: function() { return this._drawingCanvas; } },
+
+    _drawingContext: { value: null },
+    drawingContext: { get: function() { return this._drawingContext; } },
+
+    _clickPoint: { value: { x: { value: null }, y: { value: null } } },
+
+    // We will set this to false while moving objects to improve performance
+    showSelectionBounds: { value: true },
+
+    _documentRoot:          { value: null },
+    _viewport:              { value: null },
+    _documentOffsetLeft:    { value: 0 },
+    _documentOffsetTop:     { value: 0 },
+    _scrollLeft:            { value: 0 },
+    _scrollTop:             { value: 0 },
+    _userContentLeft:       { value: 0 },
+    _userContentTop:        { value: 0 },
+    _userContentBorder:     { value: 0 },
+    savedLeftScroll:        { value: null },
+    savedTopScroll:         { value: null },
+
+
+    documentRoot: {
+        get: function () { return this._documentRoot; },
+        set: function(value) { this._documentRoot = value; }
+    },
+
+    viewport: {
+        get: function () { return this._viewport; },
+        set: function(value) { this._viewport = value; }
+    },
+
+    documentOffsetLeft: {
+        get: function() { return this._documentOffsetLeft; },
+        set: function(value) { this._documentOffsetLeft = value; }
+    },
+
+    documentOffsetTop: {
+        get: function() { return this._documentOffsetTop },
+        set: function(value) { this._documentOffsetTop = value; }
+    },
+
+    scrollLeft: {
+        get: function() { return this._scrollLeft; }
+    },
+
+    scrollTop: {
+        get: function() { return this._scrollTop; }
+    },
+
+    userContentLeft: {
+        get: function() { return this._userContentLeft; },
+        set: function(value) { this._userContentLeft = value; }
+    },
+
+    userContentTop: {
+        get: function() { return this._userContentTop; },
+        set: function(value) { this._userContentTop = value; }
+    },
+
+    userContentBorder: {
+        get: function() { return this._userContentBorder; },
+        set: function(value) { this._userContentBorder = value; }
+    },
+
+    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.element.offsetWidth - 11 ;
+                this._canvas.height = this._layoutCanvas.height = this._drawingCanvas.height = this.element.offsetHeight - 11;// - 26 - 26;
+
+                // Hack for now until a full component
+                this.layout.draw();
+            }
+            else if(this.updatedStage) {
+                this.layout.draw();
+                this.layout.draw3DInfo();
+            }
+        }
+    },
+
+    didDraw: {
+        value: function() {
+            this.resizeCanvases = false;
+            this.updatedStage = false;
+        }
+    },
+
+    prepareForDraw: {
+        value: function() {
+
+            this._context = this._canvas.getContext("2d");
+            this._drawingContext= this._drawingCanvas.getContext("2d");
+
+            this._scrollLeft = this._iframeContainer.scrollLeft;
+            this._scrollTop = this._iframeContainer.scrollTop;
+            this._userContentLeft = this._documentOffsetLeft - this._scrollLeft + this._userContentBorder;
+            this._userContentTop = this._documentOffsetTop - this._scrollTop + this._userContentBorder;
+
+            // TODO: Fix the mouse wheel scroll
+            // this._canvas.addEventListener("mousewheel", this, false);
+
+            // Setup event listeners
+            this._drawingCanvas.addEventListener("mousedown", this, false);
+            this._drawingCanvas.addEventListener("mouseup", this, false);
+            this._drawingCanvas.addEventListener("dblclick", this, false);
+
+            // Hide the canvas
+            this.hideCanvas(true);
+
+            this.eventManager.addEventListener( "appMouseUp", this, false);
+
+
+            this.eventManager.addEventListener( "openDocument", this, false);
+            this.eventManager.addEventListener( "enableStageMove", this, false);
+            this.eventManager.addEventListener( "disableStageMove", this, false);
+
+            this.eventManager.addEventListener( "selectionChange", this, false);
+            this.eventManager.addEventListener( "elementChanging", this, false);
+            this.eventManager.addEventListener( "elementChange", this, false);
+
+        }
+    },
+
+    // Event details will contain the active document prior to opening a new one
+    handleOpenDocument: {
+        value: function(evt) {
+            
+            var prevActiveDocument = evt.detail;
+            // Hide current document is one is open
+            if(prevActiveDocument) {
+                prevActiveDocument.container.style["display"] = "none";
+                if(prevActiveDocument.documentType === "htm" || prevActiveDocument.documentType === "html") this.hideCanvas(true);
+            }
+
+            this.hideCanvas(false);
+
+            this._documentRoot = this.application.ninja.currentDocument.documentRoot;
+            this._viewport = this.application.ninja.currentDocument.documentRoot.parentNode;
+
+            this.documentOffsetLeft = this._viewport.offsetLeft;
+            this.documentOffsetTop = this._viewport.offsetTop;
+