2 files changed, 60 insertions, 38 deletions
diff --git a/js/stage/stage.reel/stage.html b/js/stage/stage.reel/stage.html
index 12a331c3..30c3d231 100755
--- a/js/stage/stage.reel/stage.html
+++ b/js/stage/stage.reel/stage.html
@@ -79,13 +79,13 @@
 </head>
 <body>
-    <section id="stageAndScenesContainer" class="stageAndScenesContainer">
+    <section data-montage-id="stageAndScenesContainer" class="stageAndScenesContainer">
-        <section id="stageView"></section>
+        <section data-montage-id="stageView"></section>
-        <section id="iframeContainer"></section>
+        <section data-montage-id="iframeContainer" id="iframeContainer"></section>
-        <section id="textToolObject"></section>
+        <section data-montage-id="textToolObject"></section>
-        <canvas id="layoutCanvas"></canvas>
+        <canvas data-montage-id="layoutCanvas" class="layoutCanvas"></canvas>
-        <canvas id="stageCanvas"></canvas>
+        <canvas data-montage-id="stageCanvas" class="stageCanvas"></canvas>
-        <canvas id="drawingCanvas"></canvas>
+        <canvas data-montage-id="drawingCanvas" class="drawingCanvas"></canvas>
    </section>
 </body>
diff --git a/js/stage/stage.reel/stage.js b/js/stage/stage.reel/stage.js
index 1ea14d64..b181dc70 100755
--- a/js/stage/stage.reel/stage.js
+++ b/js/stage/stage.reel/stage.js
@@ -231,33 +231,43 @@ exports.Stage = Montage.create(Component, {
            this._canvas.height = this._layoutCanvas.height = this._drawingCanvas.height = this.element.offsetHeight - 11;
            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;
-            // Center the stage
-            this.centerStage();
-            this._scrollLeft = this._iframeContainer.scrollLeft;
-            this._scrollTop = this._iframeContainer.scrollTop;
-            this.application.ninja.currentDocument.savedLeftScroll = this._iframeContainer.scrollLeft;
-            this.application.ninja.currentDocument.savedTopScroll = this._iframeContainer.scrollTop;
            // Hardcode this value so that it does not fail for the new stage architecture
            // TODO: Remove marker for old template: NINJA-STAGE-REWORK
            if(this.application.ninja.currentDocument.documentRoot.id === "UserContent") {
-                this.userContentBorder = 1; //parseInt(this._documentRoot.elementModel.controller.getProperty(this._documentRoot, "border"));
+                this._viewport = this.application.ninja.currentDocument.documentRoot.parentNode;
+                this.documentOffsetLeft = this._viewport.offsetLeft;
+                this.documentOffsetTop = this._viewport.offsetTop;
+                // Center the stage
+                this.centerStage();
+                this._scrollLeft = this._iframeContainer.scrollLeft;
+                this._scrollTop = this._iframeContainer.scrollTop;
+                this.application.ninja.currentDocument.savedLeftScroll = this._iframeContainer.scrollLeft;
+                this.application.ninja.currentDocument.savedTopScroll = this._iframeContainer.scrollTop;
+                this.userContentBorder = parseInt(this._documentRoot.elementModel.controller.getProperty(this._documentRoot, "border"));
+                this._userContentLeft = this._documentOffsetLeft - this._scrollLeft + this._userContentBorder;
+                this._userContentTop = this._documentOffsetTop - this._scrollTop + this._userContentBorder;
+                this._iframeContainer.addEventListener("scroll", this, false);
+                this.application.ninja.currentDocument.iframe.style.opacity = 1.0;
            } else {
                this.userContentBorder = 0;
-            }
-            this._userContentLeft = this._documentOffsetLeft - this._scrollLeft + this._userContentBorder;
+                this._scrollLeft = 0;
-            this._userContentTop = this._documentOffsetTop - this._scrollTop + this._userContentBorder;
+                this._scrollTop = 0;
+                this._userContentLeft = 0;
+                this._userContentTop = 0;
+                this.application.ninja.currentDocument._window.addEventListener("scroll", this, false);
+            }
-            this.application.ninja.currentDocument.iframe.style.opacity = 1.0;
-            this._iframeContainer.addEventListener("scroll", this, false);
            // TODO - We will need to modify this once we support switching between multiple documents
            this.application.ninja.toolsData.selectedToolInstance._configure(true);
@@ -415,13 +425,10 @@ 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
-            if(this.drawNow)
+            if(this.drawNow) {
-            {
                this.draw();
                this.drawNow = false;
-            }
+            } else {
-            else
-            {
                this.needsDraw = true;
            }
        }
@@ -444,11 +451,20 @@ exports.Stage = Montage.create(Component, {
     */
    handleScroll: {
        value: function() {
-            this._scrollLeft = this._iframeContainer.scrollLeft;
+             // TODO: Remove marker for old template: NINJA-STAGE-REWORK
-            this._scrollTop = this._iframeContainer.scrollTop;
+            if(this.application.ninja.currentDocument.documentRoot.id === "UserContent") {
+                this._scrollLeft = this._iframeContainer.scrollLeft;
+                this._scrollTop = this._iframeContainer.scrollTop;
-            this.userContentLeft = this._documentOffsetLeft - this._scrollLeft + this._userContentBorder;
+                this.userContentLeft = this._documentOffsetLeft - this._scrollLeft + this._userContentBorder;
-            this.userContentTop = this._documentOffsetTop - this._scrollTop + this._userContentBorder;
+                this.userContentTop = this._documentOffsetTop - this._scrollTop + this._userContentBorder;
+            } else {
+                this._scrollLeft = this.application.ninja.currentDocument.documentRoot.scrollLeft;
+                this._scrollTop = this.application.ninja.currentDocument.documentRoot.scrollTop;
+                this.userContentLeft = -this._scrollLeft;
+                this.userContentTop = -this._scrollTop;
+            }
            // Need to clear the snap cache and set up the drag plane
            //snapManager.setupDragPlaneFromPlane( workingPlane );
@@ -457,7 +473,6 @@ exports.Stage = Montage.create(Component, {
            this.needsDraw = true;
            this.layout.draw();
            //this._toolsList.action("DrawHandles");
        }
    },
@@ -687,7 +702,7 @@ exports.Stage = Montage.create(Component, {
 //            }
            var zoomFactor = 1;
-            if (this._viewport.style && this._viewport.style.zoom) {
+            if (this._viewport && this._viewport.style && this._viewport.style.zoom) {
                                zoomFactor = Number(this._viewport.style.zoom);
            }
@@ -840,6 +855,12 @@ exports.Stage = Montage.create(Component, {
        }
    },
+    setStageAsViewport: {
+        value: function() {
+            this.stageDeps.viewUtils.setViewportObj(this.application.ninja.currentDocument.documentRoot);
+        }
+    },
    setZoom: {
        value: function(value) {
            if(!this._firstDraw)
@@ -943,8 +964,9 @@ exports.Stage = Montage.create(Component, {
           this.application.ninja.documentController.activeDocument.savedLeftScroll = this._iframeContainer.scrollLeft;
           this.application.ninja.documentController.activeDocument.savedTopScroll = this._iframeContainer.scrollTop;
       }
-   },
+    },
-   restoreScroll:{
+    restoreScroll:{
       value: function(){
           this._iframeContainer.scrollLeft = this.application.ninja.documentController.activeDocument.savedLeftScroll;
           this._scrollLeft = this.application.ninja.documentController.activeDocument.savedLeftScroll;

diff --git a/js/stage/stage.reel/stage.html b/js/stage/stage.reel/stage.html index 12a331c3..30c3d231 100755 --- a/js/stage/stage.reel/stage.html +++ b/js/stage/stage.reel/stage.html
@@ -79,13 +79,13 @@
79	</head>	79	</head>
80	<body>	80	<body>
81		81
82	<section id="stageAndScenesContainer" class="stageAndScenesContainer">	82	<section data-montage-id="stageAndScenesContainer" class="stageAndScenesContainer">
83	<section id="stageView"></section>	83	<section data-montage-id="stageView"></section>
84	<section id="iframeContainer"></section>	84	<section data-montage-id="iframeContainer" id="iframeContainer"></section>
85	<section id="textToolObject"></section>	85	<section data-montage-id="textToolObject"></section>
86	<canvas id="layoutCanvas"></canvas>	86	<canvas data-montage-id="layoutCanvas" class="layoutCanvas"></canvas>
87	<canvas id="stageCanvas"></canvas>	87	<canvas data-montage-id="stageCanvas" class="stageCanvas"></canvas>
88	<canvas id="drawingCanvas"></canvas>	88	<canvas data-montage-id="drawingCanvas" class="drawingCanvas"></canvas>
89	</section>	89	</section>
90		90
91	</body>	91	</body>


diff --git a/js/stage/stage.reel/stage.js b/js/stage/stage.reel/stage.js index 1ea14d64..b181dc70 100755 --- a/js/stage/stage.reel/stage.js +++ b/js/stage/stage.reel/stage.js
@@ -231,33 +231,43 @@ exports.Stage = Montage.create(Component, {
231	this._canvas.height = this._layoutCanvas.height = this._drawingCanvas.height = this.element.offsetHeight - 11;	231	this._canvas.height = this._layoutCanvas.height = this._drawingCanvas.height = this.element.offsetHeight - 11;
232		232
233	this._documentRoot = this.application.ninja.currentDocument.documentRoot;	233	this._documentRoot = this.application.ninja.currentDocument.documentRoot;
234	this._viewport = this.application.ninja.currentDocument.documentRoot.parentNode;
235
236	this.documentOffsetLeft = this._viewport.offsetLeft;
237	this.documentOffsetTop = this._viewport.offsetTop;
238
239	// Center the stage
240	this.centerStage();
241
242	this._scrollLeft = this._iframeContainer.scrollLeft;
243	this._scrollTop = this._iframeContainer.scrollTop;
244	this.application.ninja.currentDocument.savedLeftScroll = this._iframeContainer.scrollLeft;
245	this.application.ninja.currentDocument.savedTopScroll = this._iframeContainer.scrollTop;
246		234
247	// Hardcode this value so that it does not fail for the new stage architecture	235	// Hardcode this value so that it does not fail for the new stage architecture
248	// TODO: Remove marker for old template: NINJA-STAGE-REWORK	236	// TODO: Remove marker for old template: NINJA-STAGE-REWORK
249	if(this.application.ninja.currentDocument.documentRoot.id === "UserContent") {	237	if(this.application.ninja.currentDocument.documentRoot.id === "UserContent") {
250	this.userContentBorder = 1; //parseInt(this._documentRoot.elementModel.controller.getProperty(this._documentRoot, "border"));	238	this._viewport = this.application.ninja.currentDocument.documentRoot.parentNode;
		239
		240	this.documentOffsetLeft = this._viewport.offsetLeft;
		241	this.documentOffsetTop = this._viewport.offsetTop;
		242
		243	// Center the stage
		244	this.centerStage();
		245
		246	this._scrollLeft = this._iframeContainer.scrollLeft;
		247	this._scrollTop = this._iframeContainer.scrollTop;
		248	this.application.ninja.currentDocument.savedLeftScroll = this._iframeContainer.scrollLeft;
		249	this.application.ninja.currentDocument.savedTopScroll = this._iframeContainer.scrollTop;
		250
		251	this.userContentBorder = parseInt(this._documentRoot.elementModel.controller.getProperty(this._documentRoot, "border"));
		252
		253	this._userContentLeft = this._documentOffsetLeft - this._scrollLeft + this._userContentBorder;
		254	this._userContentTop = this._documentOffsetTop - this._scrollTop + this._userContentBorder;
		255
		256	this._iframeContainer.addEventListener("scroll", this, false);
		257
		258	this.application.ninja.currentDocument.iframe.style.opacity = 1.0;
251	} else {	259	} else {
252	this.userContentBorder = 0;	260	this.userContentBorder = 0;
253	}
254		261
255	this._userContentLeft = this._documentOffsetLeft - this._scrollLeft + this._userContentBorder;	262	this._scrollLeft = 0;
256	this._userContentTop = this._documentOffsetTop - this._scrollTop + this._userContentBorder;	263	this._scrollTop = 0;
		264	this._userContentLeft = 0;
		265	this._userContentTop = 0;
		266
		267	this.application.ninja.currentDocument._window.addEventListener("scroll", this, false);
		268	}
257		269
258	this.application.ninja.currentDocument.iframe.style.opacity = 1.0;
259		270
260	this._iframeContainer.addEventListener("scroll", this, false);
261		271
262	// TODO - We will need to modify this once we support switching between multiple documents	272	// TODO - We will need to modify this once we support switching between multiple documents
263	this.application.ninja.toolsData.selectedToolInstance._configure(true);	273	this.application.ninja.toolsData.selectedToolInstance._configure(true);
@@ -415,13 +425,10 @@ exports.Stage = Montage.create(Component, {
415	handleSelectionChange: {	425	handleSelectionChange: {
416	value: function(event) {	426	value: function(event) {
417	// TODO - this is a hack for now because some tools depend on selectionDrawn event for some logic	427	// TODO - this is a hack for now because some tools depend on selectionDrawn event for some logic
418	if(this.drawNow)	428	if(this.drawNow) {
419	{
420	this.draw();	429	this.draw();
421	this.drawNow = false;	430	this.drawNow = false;
422	}	431	} else {
423	else
424	{
425	this.needsDraw = true;	432	this.needsDraw = true;
426	}	433	}
427	}	434	}
@@ -444,11 +451,20 @@ exports.Stage = Montage.create(Component, {
444	*/	451	*/
445	handleScroll: {	452	handleScroll: {
446	value: function() {	453	value: function() {
447	this._scrollLeft = this._iframeContainer.scrollLeft;	454	// TODO: Remove marker for old template: NINJA-STAGE-REWORK
448	this._scrollTop = this._iframeContainer.scrollTop;	455	if(this.application.ninja.currentDocument.documentRoot.id === "UserContent") {
		456	this._scrollLeft = this._iframeContainer.scrollLeft;
		457	this._scrollTop = this._iframeContainer.scrollTop;
449		458
450	this.userContentLeft = this._documentOffsetLeft - this._scrollLeft + this._userContentBorder;	459	this.userContentLeft = this._documentOffsetLeft - this._scrollLeft + this._userContentBorder;
451	this.userContentTop = this._documentOffsetTop - this._scrollTop + this._userContentBorder;	460	this.userContentTop = this._documentOffsetTop - this._scrollTop + this._userContentBorder;
		461	} else {
		462	this._scrollLeft = this.application.ninja.currentDocument.documentRoot.scrollLeft;
		463	this._scrollTop = this.application.ninja.currentDocument.documentRoot.scrollTop;
		464
		465	this.userContentLeft = -this._scrollLeft;
		466	this.userContentTop = -this._scrollTop;
		467	}
452		468
453	// Need to clear the snap cache and set up the drag plane	469	// Need to clear the snap cache and set up the drag plane
454	//snapManager.setupDragPlaneFromPlane( workingPlane );	470	//snapManager.setupDragPlaneFromPlane( workingPlane );
@@ -457,7 +473,6 @@ exports.Stage = Montage.create(Component, {
457	this.needsDraw = true;	473	this.needsDraw = true;
458	this.layout.draw();	474	this.layout.draw();
459	//this._toolsList.action("DrawHandles");	475	//this._toolsList.action("DrawHandles");
460
461	}	476	}
462	},	477	},
463		478
@@ -687,7 +702,7 @@ exports.Stage = Montage.create(Component, {
687	// }	702	// }
688		703
689	var zoomFactor = 1;	704	var zoomFactor = 1;
690	if (this._viewport.style && this._viewport.style.zoom) {	705	if (this._viewport && this._viewport.style && this._viewport.style.zoom) {
691	zoomFactor = Number(this._viewport.style.zoom);	706	zoomFactor = Number(this._viewport.style.zoom);
692	}	707	}
693		708
@@ -840,6 +855,12 @@ exports.Stage = Montage.create(Component, {
840	}	855	}
841	},	856	},
842		857
		858	setStageAsViewport: {
		859	value: function() {
		860	this.stageDeps.viewUtils.setViewportObj(this.application.ninja.currentDocument.documentRoot);
		861	}
		862	},
		863
843	setZoom: {	864	setZoom: {
844	value: function(value) {	865	value: function(value) {
845	if(!this._firstDraw)	866	if(!this._firstDraw)
@@ -943,8 +964,9 @@ exports.Stage = Montage.create(Component, {
943	this.application.ninja.documentController.activeDocument.savedLeftScroll = this._iframeContainer.scrollLeft;	964	this.application.ninja.documentController.activeDocument.savedLeftScroll = this._iframeContainer.scrollLeft;
944	this.application.ninja.documentController.activeDocument.savedTopScroll = this._iframeContainer.scrollTop;	965	this.application.ninja.documentController.activeDocument.savedTopScroll = this._iframeContainer.scrollTop;
945	}	966	}
946	},	967	},
947	restoreScroll:{	968
		969	restoreScroll:{
948	value: function(){	970	value: function(){
949	this._iframeContainer.scrollLeft = this.application.ninja.documentController.activeDocument.savedLeftScroll;	971	this._iframeContainer.scrollLeft = this.application.ninja.documentController.activeDocument.savedLeftScroll;
950	this._scrollLeft = this.application.ninja.documentController.activeDocument.savedLeftScroll;	972	this._scrollLeft = this.application.ninja.documentController.activeDocument.savedLeftScroll;