diff options
author | Armen Kesablyan | 2012-05-25 11:22:58 -0700 |
---|---|---|
committer | Armen Kesablyan | 2012-05-25 11:22:58 -0700 |
commit | 81239571c538f72e398fafa5b07725bf1bbb2d5d (patch) | |
tree | d31c876f5af61565eff8c934c9e5f119696d46e0 /js/stage/stage.reel/stage.js | |
parent | e8c4e98c24092a360eb2f637983fd104fbb67f66 (diff) | |
parent | 9c8d724dd1605ee2e5257591e0bfaad575cbc906 (diff) | |
download | ninja-81239571c538f72e398fafa5b07725bf1bbb2d5d.tar.gz |
Merge branch 'refs/heads/dom-architecture' into binding
Diffstat (limited to 'js/stage/stage.reel/stage.js')
-rwxr-xr-x | js/stage/stage.reel/stage.js | 109 |
1 files changed, 62 insertions, 47 deletions
diff --git a/js/stage/stage.reel/stage.js b/js/stage/stage.reel/stage.js index 69cfa7ba..c7afb95c 100755 --- a/js/stage/stage.reel/stage.js +++ b/js/stage/stage.reel/stage.js | |||
@@ -117,9 +117,6 @@ exports.Stage = Montage.create(Component, { | |||
117 | _userContentTop: { value: 0 }, | 117 | _userContentTop: { value: 0 }, |
118 | _userContentBorder: { value: 0 }, | 118 | _userContentBorder: { value: 0 }, |
119 | 119 | ||
120 | _maxHorizontalScroll: { value: 0 }, | ||
121 | _maxVerticalScroll: { value: 0 }, | ||
122 | |||
123 | viewport: { | 120 | viewport: { |
124 | get: function () { return this._viewport; }, | 121 | get: function () { return this._viewport; }, |
125 | set: function(value) { this._viewport = value; } | 122 | set: function(value) { this._viewport = value; } |
@@ -189,7 +186,7 @@ exports.Stage = Montage.create(Component, { | |||
189 | set: function(value) { | 186 | set: function(value) { |
190 | this._userPaddingLeft = value; | 187 | this._userPaddingLeft = value; |
191 | this._documentOffsetLeft = -value; | 188 | this._documentOffsetLeft = -value; |
192 | this.application.ninja.currentDocument.documentRoot.ownerDocument.getElementsByTagName("HTML")[0].style["padding-left"] = -value + "px"; | 189 | this.application.ninja.currentDocument.model.documentRoot.ownerDocument.getElementsByTagName("HTML")[0].style["padding-left"] = -value + "px"; |
193 | this.userContentLeft = this._documentOffsetLeft; | 190 | this.userContentLeft = this._documentOffsetLeft; |
194 | this.updatedStage = true; | 191 | this.updatedStage = true; |
195 | } | 192 | } |
@@ -200,7 +197,7 @@ exports.Stage = Montage.create(Component, { | |||
200 | set: function(value) { | 197 | set: function(value) { |
201 | this._userPaddingTop = value; | 198 | this._userPaddingTop = value; |
202 | this._documentOffsetTop = -value; | 199 | this._documentOffsetTop = -value; |
203 | this.application.ninja.currentDocument.documentRoot.ownerDocument.getElementsByTagName("HTML")[0].style["padding-top"] = -value + "px"; | 200 | this.application.ninja.currentDocument.model.documentRoot.ownerDocument.getElementsByTagName("HTML")[0].style["padding-top"] = -value + "px"; |
204 | this.userContentTop = this._documentOffsetTop; | 201 | this.userContentTop = this._documentOffsetTop; |
205 | this.updatedStage = true; | 202 | this.updatedStage = true; |
206 | } | 203 | } |
@@ -235,14 +232,6 @@ exports.Stage = Montage.create(Component, { | |||
235 | this._context = this._canvas.getContext("2d"); | 232 | this._context = this._canvas.getContext("2d"); |
236 | this._drawingContext= this._drawingCanvas.getContext("2d"); | 233 | this._drawingContext= this._drawingCanvas.getContext("2d"); |
237 | 234 | ||
238 | this._scrollLeft = this._iframeContainer.scrollLeft; | ||
239 | this._scrollTop = this._iframeContainer.scrollTop; | ||
240 | this._userContentLeft = this._documentOffsetLeft - this._scrollLeft + this._userContentBorder; | ||
241 | this._userContentTop = this._documentOffsetTop - this._scrollTop + this._userContentBorder; | ||
242 | |||
243 | // TODO: Fix the mouse wheel scroll | ||
244 | // this._canvas.addEventListener("mousewheel", this, false); | ||
245 | |||
246 | // Setup event listeners | 235 | // Setup event listeners |
247 | this._drawingCanvas.addEventListener("mousedown", this, false); | 236 | this._drawingCanvas.addEventListener("mousedown", this, false); |
248 | this._drawingCanvas.addEventListener("mouseup", this, false); | 237 | this._drawingCanvas.addEventListener("mouseup", this, false); |
@@ -256,6 +245,7 @@ exports.Stage = Montage.create(Component, { | |||
256 | 245 | ||
257 | 246 | ||
258 | this.eventManager.addEventListener( "openDocument", this, false); | 247 | this.eventManager.addEventListener( "openDocument", this, false); |
248 | this.eventManager.addEventListener( "switchDocument", this, false); | ||
259 | this.eventManager.addEventListener( "enableStageMove", this, false); | 249 | this.eventManager.addEventListener( "enableStageMove", this, false); |
260 | this.eventManager.addEventListener( "disableStageMove", this, false); | 250 | this.eventManager.addEventListener( "disableStageMove", this, false); |
261 | 251 | ||
@@ -269,30 +259,66 @@ exports.Stage = Montage.create(Component, { | |||
269 | // Event details will contain the active document prior to opening a new one | 259 | // Event details will contain the active document prior to opening a new one |
270 | handleOpenDocument: { | 260 | handleOpenDocument: { |
271 | value: function(evt) { | 261 | value: function(evt) { |
262 | this.initWithDocument(); | ||
263 | } | ||
264 | }, | ||
265 | |||
266 | handleSwitchDocument: { | ||
267 | value: function(evt) { | ||
268 | this.initWithDocument(true); | ||
269 | } | ||
270 | }, | ||
271 | |||
272 | initWithDocument: { | ||
273 | value: function(didSwitch) { | ||
274 | var designView = this.application.ninja.currentDocument.model.views.design; | ||
275 | |||
272 | this.hideCanvas(false); | 276 | this.hideCanvas(false); |
273 | 277 | ||
274 | // Recalculate the canvas sizes because of splitter resizing | 278 | // Recalculate the canvas sizes because of splitter resizing |
275 | this._canvas.width = this._layoutCanvas.width = this._drawingCanvas.width = this.element.offsetWidth - 11 ; | 279 | this._canvas.width = this._layoutCanvas.width = this._drawingCanvas.width = this.element.offsetWidth - 11 ; |
276 | this._canvas.height = this._layoutCanvas.height = this._drawingCanvas.height = this.element.offsetHeight - 11; | 280 | this._canvas.height = this._layoutCanvas.height = this._drawingCanvas.height = this.element.offsetHeight - 11; |
277 | 281 | ||
282 | designView.iframe.contentWindow.addEventListener("scroll", this, false); | ||
283 | |||
284 | this.addPropertyChangeListener("appModel.show3dGrid", this, false); | ||
285 | |||
286 | this._userPaddingLeft = 0; | ||
287 | this._userPaddingTop = 0; | ||
288 | |||
289 | this._documentOffsetLeft = 0; | ||
290 | this._documentOffsetTop = 0; | ||
278 | 291 | ||
279 | this.userContentBorder = 0; | 292 | this._userContentLeft = 0; |
293 | this._userContentTop = 0; | ||
280 | 294 | ||
281 | this._scrollLeft = 0; | 295 | this._scrollLeft = 0; |
282 | this._scrollTop = 0; | 296 | this._scrollTop = 0; |
283 | this._userContentLeft = this._documentOffsetLeft; | ||
284 | this._userContentTop = this._documentOffsetTop; | ||
285 | 297 | ||
286 | this._maxHorizontalScroll = this.application.ninja.currentDocument.documentRoot.scrollWidth - this._canvas.width - 11; | 298 | this.stageDeps.handleOpenDocument(); |
287 | this._maxVerticalScroll = this.application.ninja.currentDocument.documentRoot.scrollHeight - this._canvas.height - 11; | 299 | this.layout.handleOpenDocument(); |
288 | this.application.ninja.currentDocument.model.views.design.iframe.contentWindow.addEventListener("scroll", this, false); | ||
289 | 300 | ||
290 | // TODO - We will need to modify this once we support switching between multiple documents | 301 | if(designView._template) { |
291 | this.application.ninja.toolsData.selectedToolInstance._configure(true); | 302 | var initialLeft = parseInt((this.canvas.width - designView._template.size.width)/2); |
303 | var initialTop = parseInt((this.canvas.height - designView._template.size.height)/2); | ||
304 | if(initialLeft > this.documentOffsetLeft) { | ||
305 | this.userPaddingLeft = -initialLeft; | ||
306 | } | ||
307 | if(initialTop > this.documentOffsetTop) { | ||
308 | this.userPaddingTop = -initialTop; | ||
309 | } | ||
310 | } | ||
292 | 311 | ||
293 | this.addPropertyChangeListener("appModel.show3dGrid", this, false); | 312 | if(didSwitch) { |
313 | this.application.ninja.currentDocument.model.views.design.document.body.scrollLeft = this.application.ninja.currentDocument.model.scrollLeft; | ||
314 | this.application.ninja.currentDocument.model.views.design.document.body.scrollTop = this.application.ninja.currentDocument.model.scrollTop; | ||
315 | this.handleScroll(); | ||
316 | } else { | ||
317 | this.centerStage(); | ||
318 | } | ||
294 | 319 | ||
295 | this.layout.handleOpenDocument(); | 320 | // TODO - We will need to modify this once we support switching between multiple documents |
321 | this.application.ninja.toolsData.selectedToolInstance._configure(true); | ||
296 | } | 322 | } |
297 | }, | 323 | }, |
298 | 324 | ||
@@ -475,20 +501,10 @@ exports.Stage = Montage.create(Component, { | |||
475 | this.userContentLeft = this._documentOffsetLeft - this._scrollLeft; | 501 | this.userContentLeft = this._documentOffsetLeft - this._scrollLeft; |
476 | this.userContentTop = this._documentOffsetTop - this._scrollTop; | 502 | this.userContentTop = this._documentOffsetTop - this._scrollTop; |
477 | 503 | ||
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; | ||
483 | |||
484 | |||
485 | // Need to clear the snap cache and set up the drag plane | 504 | // Need to clear the snap cache and set up the drag plane |
486 | //snapManager.setupDragPlaneFromPlane( workingPlane ); | 505 | //snapManager.setupDragPlaneFromPlane( workingPlane ); |
487 | this.stageDeps.snapManager._isCacheInvalid = true; | 506 | this.stageDeps.snapManager._isCacheInvalid = true; |
488 | 507 | this.updatedStage = true; | |
489 | this.needsDraw = true; | ||
490 | this.layout.draw(); | ||
491 | //this._toolsList.action("DrawHandles"); | ||
492 | } | 508 | } |
493 | }, | 509 | }, |
494 | 510 | ||
@@ -517,16 +533,15 @@ exports.Stage = Montage.create(Component, { | |||
517 | */ | 533 | */ |
518 | centerStage: { | 534 | centerStage: { |
519 | value: function() { | 535 | value: function() { |
520 | if(this.application.ninja.currentDocument.documentRoot.id === "UserContent") { | 536 | var designView = this.application.ninja.currentDocument.model.views.design; |
521 | this._iframeContainer.scrollLeft = this._documentOffsetLeft - (this._iframeContainer.offsetWidth - this.application.ninja.currentDocument.documentRoot.parentNode.offsetWidth)/2; | 537 | if(designView._template) { |
522 | this._iframeContainer.scrollTop = this._documentOffsetTop - (this._iframeContainer.offsetHeight - this.application.ninja.currentDocument.documentRoot.parentNode.offsetHeight)/2; | 538 | designView.document.body.scrollLeft = this._documentOffsetLeft - parseInt((this.canvas.width - designView._template.size.width)/2); |
523 | 539 | designView.document.body.scrollTop = this._documentOffsetTop - parseInt((this.canvas.height - designView._template.size.height)/2); | |
524 | this._scrollLeft = this._iframeContainer.scrollLeft; | ||
525 | this._scrollTop = this._iframeContainer.scrollTop; | ||
526 | } else { | 540 | } else { |
527 | this._scrollLeft = this._userContentLeft = this.application.ninja.currentDocument.model.views.design.document.body.scrollLeft = 0; | 541 | designView.document.body.scrollLeft = this._documentOffsetLeft; |
528 | this._scrollTop = this._userContentTop = this.application.ninja.currentDocument.model.views.design.document.body.scrollTop = 0; | 542 | designView.document.body.scrollTop = this._documentOffsetTop; |
529 | } | 543 | } |
544 | this.handleScroll(); | ||
530 | } | 545 | } |
531 | }, | 546 | }, |
532 | 547 | ||
@@ -889,7 +904,7 @@ exports.Stage = Montage.create(Component, { | |||
889 | 904 | ||
890 | setStageAsViewport: { | 905 | setStageAsViewport: { |
891 | value: function() { | 906 | value: function() { |
892 | this.stageDeps.viewUtils.setViewportObj(this.application.ninja.currentDocument.documentRoot); | 907 | this.stageDeps.viewUtils.setViewportObj(this.application.ninja.currentDocument.model.documentRoot); |
893 | } | 908 | } |
894 | }, | 909 | }, |
895 | 910 | ||
@@ -897,7 +912,7 @@ exports.Stage = Montage.create(Component, { | |||
897 | value: function(value) { | 912 | value: function(value) { |
898 | if(!this._firstDraw) | 913 | if(!this._firstDraw) |
899 | { | 914 | { |
900 | var userContent = this.application.ninja.currentDocument.documentRoot; | 915 | var userContent = this.application.ninja.currentDocument.model.documentRoot; |
901 | if (userContent) | 916 | if (userContent) |
902 | { | 917 | { |
903 | var w = this._canvas.width, |