diff options
Diffstat (limited to 'js/stage/stage.reel/stage.js')
-rwxr-xr-x | js/stage/stage.reel/stage.js | 144 |
1 files changed, 73 insertions, 71 deletions
diff --git a/js/stage/stage.reel/stage.js b/js/stage/stage.reel/stage.js index cac99326..69cfa7ba 100755 --- a/js/stage/stage.reel/stage.js +++ b/js/stage/stage.reel/stage.js | |||
@@ -108,7 +108,6 @@ exports.Stage = Montage.create(Component, { | |||
108 | // We will set this to false while moving objects to improve performance | 108 | // We will set this to false while moving objects to improve performance |
109 | showSelectionBounds: { value: true }, | 109 | showSelectionBounds: { value: true }, |
110 | 110 | ||
111 | _documentRoot: { value: null }, | ||
112 | _viewport: { value: null }, | 111 | _viewport: { value: null }, |
113 | _documentOffsetLeft: { value: 0 }, | 112 | _documentOffsetLeft: { value: 0 }, |
114 | _documentOffsetTop: { value: 0 }, | 113 | _documentOffsetTop: { value: 0 }, |
@@ -121,11 +120,6 @@ exports.Stage = Montage.create(Component, { | |||
121 | _maxHorizontalScroll: { value: 0 }, | 120 | _maxHorizontalScroll: { value: 0 }, |
122 | _maxVerticalScroll: { value: 0 }, | 121 | _maxVerticalScroll: { value: 0 }, |
123 | 122 | ||
124 | documentRoot: { | ||
125 | get: function () { return this._documentRoot; }, | ||
126 | set: function(value) { this._documentRoot = value; } | ||
127 | }, | ||
128 | |||
129 | viewport: { | 123 | viewport: { |
130 | get: function () { return this._viewport; }, | 124 | get: function () { return this._viewport; }, |
131 | set: function(value) { this._viewport = value; } | 125 | set: function(value) { this._viewport = value; } |
@@ -195,10 +189,7 @@ exports.Stage = Montage.create(Component, { | |||
195 | set: function(value) { | 189 | set: function(value) { |
196 | this._userPaddingLeft = value; | 190 | this._userPaddingLeft = value; |
197 | this._documentOffsetLeft = -value; | 191 | this._documentOffsetLeft = -value; |
198 | if(!this._documentRoot) { | 192 | this.application.ninja.currentDocument.documentRoot.ownerDocument.getElementsByTagName("HTML")[0].style["padding-left"] = -value + "px"; |
199 | this._documentRoot = this.application.ninja.currentDocument.documentRoot; | ||
200 | } | ||
201 | this._documentRoot.ownerDocument.getElementsByTagName("HTML")[0].style["padding-left"] = -value + "px"; | ||
202 | this.userContentLeft = this._documentOffsetLeft; | 193 | this.userContentLeft = this._documentOffsetLeft; |
203 | this.updatedStage = true; | 194 | this.updatedStage = true; |
204 | } | 195 | } |
@@ -209,10 +200,7 @@ exports.Stage = Montage.create(Component, { | |||
209 | set: function(value) { | 200 | set: function(value) { |
210 | this._userPaddingTop = value; | 201 | this._userPaddingTop = value; |
211 | this._documentOffsetTop = -value; | 202 | this._documentOffsetTop = -value; |
212 | if(!this._documentRoot) { | 203 | this.application.ninja.currentDocument.documentRoot.ownerDocument.getElementsByTagName("HTML")[0].style["padding-top"] = -value + "px"; |
213 | this._documentRoot = this.application.ninja.currentDocument.documentRoot; | ||
214 | } | ||
215 | this._documentRoot.ownerDocument.getElementsByTagName("HTML")[0].style["padding-top"] = -value + "px"; | ||
216 | this.userContentTop = this._documentOffsetTop; | 204 | this.userContentTop = this._documentOffsetTop; |
217 | this.updatedStage = true; | 205 | this.updatedStage = true; |
218 | } | 206 | } |
@@ -287,46 +275,17 @@ exports.Stage = Montage.create(Component, { | |||
287 | this._canvas.width = this._layoutCanvas.width = this._drawingCanvas.width = this.element.offsetWidth - 11 ; | 275 | this._canvas.width = this._layoutCanvas.width = this._drawingCanvas.width = this.element.offsetWidth - 11 ; |
288 | this._canvas.height = this._layoutCanvas.height = this._drawingCanvas.height = this.element.offsetHeight - 11; | 276 | this._canvas.height = this._layoutCanvas.height = this._drawingCanvas.height = this.element.offsetHeight - 11; |
289 | 277 | ||
290 | this._documentRoot = this.application.ninja.currentDocument.documentRoot; | ||
291 | |||
292 | // Hardcode this value so that it does not fail for the new stage architecture | ||
293 | // TODO: Remove marker for old template: NINJA-STAGE-REWORK | ||
294 | if(this.application.ninja.currentDocument.documentRoot.id === "UserContent") { | ||
295 | this._viewport = this.application.ninja.currentDocument.documentRoot.parentNode; | ||
296 | |||
297 | this.documentOffsetLeft = this._viewport.offsetLeft; | ||
298 | this.documentOffsetTop = this._viewport.offsetTop; | ||
299 | |||
300 | // Center the stage | ||
301 | this.centerStage(); | ||
302 | |||
303 | this._scrollLeft = this._iframeContainer.scrollLeft; | ||
304 | this._scrollTop = this._iframeContainer.scrollTop; | ||
305 | this.application.ninja.currentDocument.savedLeftScroll = this._iframeContainer.scrollLeft; | ||
306 | this.application.ninja.currentDocument.savedTopScroll = this._iframeContainer.scrollTop; | ||
307 | |||
308 | this.userContentBorder = parseInt(this._documentRoot.elementModel.controller.getProperty(this._documentRoot, "border")); | ||
309 | |||
310 | this._userContentLeft = this._documentOffsetLeft - this._scrollLeft + this._userContentBorder; | ||
311 | this._userContentTop = this._documentOffsetTop - this._scrollTop + this._userContentBorder; | ||
312 | |||
313 | this._iframeContainer.addEventListener("scroll", this, false); | ||
314 | 278 | ||
315 | this.application.ninja.currentDocument.iframe.style.opacity = 1.0; | 279 | this.userContentBorder = 0; |
316 | } else { | ||
317 | this.userContentBorder = 0; | ||
318 | |||
319 | this._scrollLeft = 0; | ||
320 | this._scrollTop = 0; | ||
321 | this._userContentLeft = this._documentOffsetLeft; | ||
322 | this._userContentTop = this._documentOffsetTop; | ||
323 | |||
324 | this._maxHorizontalScroll = this._documentRoot.scrollWidth - this._canvas.width - 11; | ||
325 | this._maxVerticalScroll = this._documentRoot.scrollHeight - this._canvas.height - 11; | ||
326 | this.application.ninja.currentDocument.model.views.design.iframe.contentWindow.addEventListener("scroll", this, false); | ||
327 | } | ||
328 | 280 | ||
281 | this._scrollLeft = 0; | ||
282 | this._scrollTop = 0; | ||
283 | this._userContentLeft = this._documentOffsetLeft; | ||
284 | this._userContentTop = this._documentOffsetTop; | ||
329 | 285 | ||
286 | this._maxHorizontalScroll = this.application.ninja.currentDocument.documentRoot.scrollWidth - this._canvas.width - 11; | ||
287 | this._maxVerticalScroll = this.application.ninja.currentDocument.documentRoot.scrollHeight - this._canvas.height - 11; | ||
288 | this.application.ninja.currentDocument.model.views.design.iframe.contentWindow.addEventListener("scroll", this, false); | ||
330 | 289 | ||
331 | // TODO - We will need to modify this once we support switching between multiple documents | 290 | // TODO - We will need to modify this once we support switching between multiple documents |
332 | this.application.ninja.toolsData.selectedToolInstance._configure(true); | 291 | this.application.ninja.toolsData.selectedToolInstance._configure(true); |
@@ -509,26 +468,19 @@ exports.Stage = Montage.create(Component, { | |||
509 | */ | 468 | */ |
510 | handleScroll: { | 469 | handleScroll: { |
511 | value: function() { | 470 | value: function() { |
512 | // TODO: Remove marker for old template: NINJA-STAGE-REWORK | ||
513 | if(this.application.ninja.currentDocument.documentRoot.id === "UserContent") { | ||
514 | this._scrollLeft = this._iframeContainer.scrollLeft; | ||
515 | this._scrollTop = this._iframeContainer.scrollTop; | ||
516 | 471 | ||
517 | this.userContentLeft = this._documentOffsetLeft - this._scrollLeft + this._userContentBorder; | 472 | this._scrollLeft = this.application.ninja.currentDocument.model.views.design.document.body.scrollLeft; |
518 | this.userContentTop = this._documentOffsetTop - this._scrollTop + this._userContentBorder; | 473 | this._scrollTop = this.application.ninja.currentDocument.model.views.design.document.body.scrollTop; |
519 | } else { | ||
520 | this._scrollLeft = this.application.ninja.currentDocument.model.views.design.document.body.scrollLeft; | ||
521 | this._scrollTop = this.application.ninja.currentDocument.model.views.design.document.body.scrollTop; | ||
522 | 474 | ||
523 | this.userContentLeft = this._documentOffsetLeft - this._scrollLeft; | 475 | this.userContentLeft = this._documentOffsetLeft - this._scrollLeft; |
524 | this.userContentTop = this._documentOffsetTop - this._scrollTop; | 476 | this.userContentTop = this._documentOffsetTop - this._scrollTop; |
477 | |||
478 | // TODO - scroll events are not dependable. We may need to use a timer to simulate | ||
479 | // scrollBegin and scrollEnd. For now, the Pan Tool will keep track of the stage's scroll values | ||
480 | // on mouse down. | ||
481 | // this._maxHorizontalScroll = this.application.ninja.currentDocument.documentRoot.scrollWidth - this._canvas.width - 11; | ||
482 | // this._maxVerticalScroll = this.application.ninja.currentDocument.documentRoot.scrollHeight - this._canvas.height - 11; | ||
525 | 483 | ||
526 | // TODO - scroll events are not dependable. We may need to use a timer to simulate | ||
527 | // scrollBegin and scrollEnd. For now, the Pan Tool will keep track of the stage's scroll values | ||
528 | // on mouse down. | ||
529 | // this._maxHorizontalScroll = this._documentRoot.scrollWidth - this._canvas.width - 11; | ||
530 | // this._maxVerticalScroll = this._documentRoot.scrollHeight - this._canvas.height - 11; | ||
531 | } | ||
532 | 484 | ||
533 | // Need to clear the snap cache and set up the drag plane | 485 | // Need to clear the snap cache and set up the drag plane |
534 | //snapManager.setupDragPlaneFromPlane( workingPlane ); | 486 | //snapManager.setupDragPlaneFromPlane( workingPlane ); |
@@ -566,8 +518,8 @@ exports.Stage = Montage.create(Component, { | |||
566 | centerStage: { | 518 | centerStage: { |
567 | value: function() { | 519 | value: function() { |
568 | if(this.application.ninja.currentDocument.documentRoot.id === "UserContent") { | 520 | if(this.application.ninja.currentDocument.documentRoot.id === "UserContent") { |
569 | this._iframeContainer.scrollLeft = this._documentOffsetLeft - (this._iframeContainer.offsetWidth - this._documentRoot.parentNode.offsetWidth)/2; | 521 | this._iframeContainer.scrollLeft = this._documentOffsetLeft - (this._iframeContainer.offsetWidth - this.application.ninja.currentDocument.documentRoot.parentNode.offsetWidth)/2; |
570 | this._iframeContainer.scrollTop = this._documentOffsetTop - (this._iframeContainer.offsetHeight - this._documentRoot.parentNode.offsetHeight)/2; | 522 | this._iframeContainer.scrollTop = this._documentOffsetTop - (this._iframeContainer.offsetHeight - this.application.ninja.currentDocument.documentRoot.parentNode.offsetHeight)/2; |
571 | 523 | ||
572 | this._scrollLeft = this._iframeContainer.scrollLeft; | 524 | this._scrollLeft = this._iframeContainer.scrollLeft; |
573 | this._scrollTop = this._iframeContainer.scrollTop; | 525 | this._scrollTop = this._iframeContainer.scrollTop; |
@@ -593,6 +545,14 @@ exports.Stage = Montage.create(Component, { | |||
593 | } | 545 | } |
594 | }, | 546 | }, |
595 | 547 | ||
548 | clearAllCanvas: { | ||
549 | value: function() { | ||
550 | this._drawingContext.clearRect(0, 0, this._drawingCanvas.width, this._drawingCanvas.height); | ||
551 | this.context.clearRect(0, 0, this.canvas.width, this.canvas.height); | ||
552 | this.layout.clearCanvas(); | ||
553 | } | ||
554 | }, | ||
555 | |||
596 | SelectTool: { | 556 | SelectTool: { |
597 | value: function(cursor) { | 557 | value: function(cursor) { |
598 | this._drawingCanvas.style.cursor = cursor; | 558 | this._drawingCanvas.style.cursor = cursor; |
@@ -1045,5 +1005,47 @@ exports.Stage = Montage.create(Component, { | |||
1045 | this._iframeContainer.scrollTop = this.application.ninja.documentController.activeDocument.savedTopScroll; | 1005 | this._iframeContainer.scrollTop = this.application.ninja.documentController.activeDocument.savedTopScroll; |
1046 | this._scrollTop = this.application.ninja.documentController.activeDocument.savedTopScroll; | 1006 | this._scrollTop = this.application.ninja.documentController.activeDocument.savedTopScroll; |
1047 | } | 1007 | } |
1048 | } | 1008 | }, |
1009 | |||
1010 | showRulers:{ | ||
1011 | value:function(){ | ||
1012 | this.application.ninja.rulerTop.style.display = "block"; | ||
1013 | this.application.ninja.rulerLeft.style.display = "block"; | ||
1014 | } | ||
1015 | }, | ||
1016 | hideRulers:{ | ||
1017 | value:function(){ | ||
1018 | this.application.ninja.rulerTop.style.display = "none"; | ||
1019 | this.application.ninja.rulerLeft.style.display = "none"; | ||
1020 | } | ||
1021 | }, | ||
1022 | showCodeViewBar:{ | ||
1023 | value:function(isCodeView){ | ||
1024 | if(isCodeView === true) { | ||
1025 | this.application.ninja.editorViewOptions.element.style.display = "block"; | ||
1026 | this.application.ninja.documentBar.element.style.display = "none"; | ||
1027 | } else { | ||
1028 | this.application.ninja.documentBar.element.style.display = "block"; | ||
1029 | this.application.ninja.editorViewOptions.element.style.display = "none"; | ||
1030 | } | ||
1031 | } | ||
1032 | }, | ||
1033 | |||
1034 | collapseAllPanels:{ | ||
1035 | value:function(){ | ||
1036 | this.application.ninja.panelSplitter.collapse(); | ||
1037 | this.application.ninja.timelineSplitter.collapse(); | ||
1038 | this.application.ninja.toolsSplitter.collapse(); | ||
1039 | this.application.ninja.optionsSplitter.collapse(); | ||
1040 | } | ||
1041 | }, | ||
1042 | restoreAllPanels:{ | ||