diff options
Diffstat (limited to 'js/stage/stage.reel/stage.js')
-rwxr-xr-x | js/stage/stage.reel/stage.js | 82 |
1 files changed, 68 insertions, 14 deletions
diff --git a/js/stage/stage.reel/stage.js b/js/stage/stage.reel/stage.js index f4de3070..8cbe3210 100755 --- a/js/stage/stage.reel/stage.js +++ b/js/stage/stage.reel/stage.js | |||
@@ -19,6 +19,7 @@ exports.Stage = Montage.create(Component, { | |||
19 | // TODO - Need to figure out how to remove this dependency | 19 | // TODO - Need to figure out how to remove this dependency |
20 | // Needed by some tools that depend on selectionDrawn event to set up some logic | 20 | // Needed by some tools that depend on selectionDrawn event to set up some logic |
21 | drawNow: { value : false }, | 21 | drawNow: { value : false }, |
22 | switchedFromCodeDoc: { value : false }, | ||
22 | 23 | ||
23 | // TO REVIEW | 24 | // TO REVIEW |
24 | zoomFactor: {value : 1 }, | 25 | zoomFactor: {value : 1 }, |
@@ -26,6 +27,9 @@ exports.Stage = Montage.create(Component, { | |||
26 | _canvasSelectionPrefs: { value: { "thickness" : 1.0, "color" : "#46a1ff" } }, | 27 | _canvasSelectionPrefs: { value: { "thickness" : 1.0, "color" : "#46a1ff" } }, |
27 | _canvasDrawingPrefs: { value: { "thickness" : 1.0, "color" : "#000" } }, | 28 | _canvasDrawingPrefs: { value: { "thickness" : 1.0, "color" : "#000" } }, |
28 | drawingContextPreferences: { get: function() { return this._canvasDrawingPrefs; } }, | 29 | drawingContextPreferences: { get: function() { return this._canvasDrawingPrefs; } }, |
30 | bindingView: { | ||
31 | value: null | ||
32 | }, | ||
29 | 33 | ||
30 | _iframeContainer: { | 34 | _iframeContainer: { |
31 | value: null, | 35 | value: null, |
@@ -249,9 +253,15 @@ exports.Stage = Montage.create(Component, { | |||
249 | this.currentDocument.model.documentOffsetTop = this._documentOffsetTop; | 253 | this.currentDocument.model.documentOffsetTop = this._documentOffsetTop; |
250 | this.currentDocument.model.userContentLeft = this._userContentLeft; | 254 | this.currentDocument.model.userContentLeft = this._userContentLeft; |
251 | this.currentDocument.model.userContentTop = this._userContentTop; | 255 | this.currentDocument.model.userContentTop = this._userContentTop; |
256 | this.currentDocument.model.templateLeft = this.templateLeft; | ||
257 | this.currentDocument.model.templateTop = this.templateTop; | ||
258 | this.currentDocument.model.minLeftElement = this.minLeftElement; | ||
259 | this.currentDocument.model.minTopElement = this.minTopElement; | ||
252 | 260 | ||
253 | //call configure false with the old document on the selected tool to tear down down any temp. stuff | 261 | //call configure false with the old document on the selected tool to tear down down any temp. stuff |
254 | this.application.ninja.toolsData.selectedToolInstance._configure(false); | 262 | this.application.ninja.toolsData.selectedToolInstance._configure(false); |
263 | } else if(this.currentDocument && (this.currentDocument.currentView === "code")) { | ||
264 | this.switchedFromCodeDoc = true; // Switching from code document affects stage's size and scrollbar | ||
255 | } | 265 | } |
256 | 266 | ||
257 | this._currentDocument = value; | 267 | this._currentDocument = value; |
@@ -262,7 +272,8 @@ exports.Stage = Montage.create(Component, { | |||
262 | drawUtils._eltArray.length = 0; | 272 | drawUtils._eltArray.length = 0; |
263 | drawUtils._planesArray.length = 0; | 273 | drawUtils._planesArray.length = 0; |
264 | } else if(this._currentDocument.currentView === "design") { | 274 | } else if(this._currentDocument.currentView === "design") { |
265 | this.restoreAllPanels(); | 275 | this.restoreAllPanels(this.switchedFromCodeDoc); |
276 | this.switchedFromCodeDoc = false; | ||
266 | this.hideCanvas(false); | 277 | this.hideCanvas(false); |
267 | this.showRulers(); | 278 | this.showRulers(); |
268 | 279 | ||
@@ -279,6 +290,13 @@ exports.Stage = Montage.create(Component, { | |||
279 | _userPaddingLeft: { value: 0 }, | 290 | _userPaddingLeft: { value: 0 }, |
280 | _userPaddingTop: { value: 0 }, | 291 | _userPaddingTop: { value: 0 }, |
281 | 292 | ||
293 | templateLeft: { value: 0 }, | ||
294 | templateTop: { value: 0 }, | ||
295 | |||
296 | // keep track of the elements that determine the minimum left and top scrollable amount | ||
297 | minLeftElement: { value: null }, | ||
298 | minTopElement: { value: null }, | ||
299 | |||
282 | userPaddingLeft: { | 300 | userPaddingLeft: { |
283 | get: function() { return this._userPaddingLeft; }, | 301 | get: function() { return this._userPaddingLeft; }, |
284 | set: function(value) { | 302 | set: function(value) { |
@@ -305,9 +323,8 @@ exports.Stage = Montage.create(Component, { | |||
305 | value: function() { | 323 | value: function() { |
306 | if(this.resizeCanvases) { | 324 | if(this.resizeCanvases) { |
307 | // TODO GET THE SCROLL SIZE FROM THE CSS -- 11 px | 325 | // TODO GET THE SCROLL SIZE FROM THE CSS -- 11 px |
308 | this._canvas.width = this._layoutCanvas.width = this._drawingCanvas.width = this._gridCanvas.width = this.element.offsetWidth - 11 ; | 326 | this._canvas.width = this._layoutCanvas.width = this._drawingCanvas.width = this._gridCanvas.width = this.bindingView.width = this.element.offsetWidth - 11; |
309 | this._canvas.height = this._layoutCanvas.height = this._drawingCanvas.height = this._gridCanvas.height = this.element.offsetHeight - 11;// - 26 - 26; | 327 | this._canvas.height = this._layoutCanvas.height = this._drawingCanvas.height = this._gridCanvas.height = this.bindingView.height = this.element.offsetHeight - 11;// - 26 - 26; |
310 | |||
311 | // Hack for now until a full component | 328 | // Hack for now until a full component |
312 | this.layout.draw(); | 329 | this.layout.draw(); |
313 | if(this.currentDocument && (this.currentDocument.currentView === "design")) { | 330 | if(this.currentDocument && (this.currentDocument.currentView === "design")) { |
@@ -343,8 +360,6 @@ exports.Stage = Montage.create(Component, { | |||
343 | // Hide the canvas | 360 | // Hide the canvas |
344 | this.hideCanvas(true); | 361 | this.hideCanvas(true); |
345 | 362 | ||
346 | this.eventManager.addEventListener( "appMouseUp", this, false); | ||
347 | |||
348 | this.eventManager.addEventListener( "enableStageMove", this, false); | 363 | this.eventManager.addEventListener( "enableStageMove", this, false); |
349 | this.eventManager.addEventListener( "disableStageMove", this, false); | 364 | this.eventManager.addEventListener( "disableStageMove", this, false); |
350 | 365 | ||
@@ -374,6 +389,10 @@ exports.Stage = Montage.create(Component, { | |||
374 | this._userContentTop = this.currentDocument.model.userContentTop; | 389 | this._userContentTop = this.currentDocument.model.userContentTop; |
375 | this._scrollLeft = this.currentDocument.model.scrollLeft; | 390 | this._scrollLeft = this.currentDocument.model.scrollLeft; |
376 | this._scrollTop = this.currentDocument.model.scrollTop; | 391 | this._scrollTop = this.currentDocument.model.scrollTop; |
392 | this.templateLeft = this.currentDocument.model.templateLeft; | ||
393 | this.templateTop = this.currentDocument.model.templateTop; | ||
394 | this.minLeftElement = this.currentDocument.model.minLeftElement; | ||
395 | this.minTopElement = this.currentDocument.model.minTopElement; | ||
377 | } else { | 396 | } else { |
378 | this._userPaddingLeft = 0; | 397 | this._userPaddingLeft = 0; |
379 | this._userPaddingTop = 0; | 398 | this._userPaddingTop = 0; |
@@ -383,11 +402,15 @@ exports.Stage = Montage.create(Component, { | |||
383 | this._userContentTop = 0; | 402 | this._userContentTop = 0; |
384 | this._scrollLeft = 0; | 403 | this._scrollLeft = 0; |
385 | this._scrollTop = 0; | 404 | this._scrollTop = 0; |
405 | this.templateLeft = 0; | ||
406 | this.templateTop = 0; | ||
407 | this.minLeftElement = null; | ||
408 | this.minTopElement = null; | ||
386 | } | 409 | } |
387 | 410 | ||
388 | // Recalculate the canvas sizes because of splitter resizing | 411 | // Recalculate the canvas sizes because of splitter resizing |
389 | this._canvas.width = this._layoutCanvas.width = this._drawingCanvas.width = this._gridCanvas.width = this.element.offsetWidth - 11 ; | 412 | this._canvas.width = this._layoutCanvas.width = this._drawingCanvas.width = this._gridCanvas.width = this.bindingView.width = this.element.offsetWidth - 11 ; |
390 | this._canvas.height = this._layoutCanvas.height = this._drawingCanvas.height = this._gridCanvas.height = this.element.offsetHeight - 11; | 413 | this._canvas.height = this._layoutCanvas.height = this._drawingCanvas.height = this._gridCanvas.height = this.bindingView.height = this.element.offsetHeight - 11; |
391 | 414 | ||
392 | designView.iframe.contentWindow.addEventListener("scroll", this, false); | 415 | designView.iframe.contentWindow.addEventListener("scroll", this, false); |
393 | 416 | ||
@@ -400,9 +423,11 @@ exports.Stage = Montage.create(Component, { | |||
400 | var initialTop = parseInt((this.canvas.height - designView._template.size.height)/2); | 423 | var initialTop = parseInt((this.canvas.height - designView._template.size.height)/2); |
401 | if(initialLeft > this.documentOffsetLeft) { | 424 | if(initialLeft > this.documentOffsetLeft) { |
402 | this.userPaddingLeft = -initialLeft; | 425 | this.userPaddingLeft = -initialLeft; |
426 | this.templateLeft = -initialLeft; | ||
403 | } | 427 | } |
404 | if(initialTop > this.documentOffsetTop) { | 428 | if(initialTop > this.documentOffsetTop) { |
405 | this.userPaddingTop = -initialTop; | 429 | this.userPaddingTop = -initialTop; |
430 | this.templateTop = -initialTop; | ||
406 | } | 431 | } |
407 | } | 432 | } |
408 | 433 | ||
@@ -454,6 +479,7 @@ exports.Stage = Montage.create(Component, { | |||
454 | 479 | ||
455 | enableMouseInOut: { | 480 | enableMouseInOut: { |
456 | value: function() { | 481 | value: function() { |
482 | document.addEventListener("mouseup", this, true); | ||
457 | this._drawingCanvas.addEventListener("mouseout", this, false); | 483 | this._drawingCanvas.addEventListener("mouseout", this, false); |
458 | this._drawingCanvas.addEventListener("mouseover", this, false); | 484 | this._drawingCanvas.addEventListener("mouseover", this, false); |
459 | } | 485 | } |
@@ -466,6 +492,19 @@ exports.Stage = Montage.create(Component, { | |||
466 | } | 492 | } |
467 | }, | 493 | }, |
468 | 494 | ||
495 | captureMouseup: { | ||
496 | value: function(event) { | ||
497 | var target = event._event.target.getAttribute("data-montage-id"); | ||
498 | |||
499 | if(target && target === "drawingCanvas") { | ||
500 | return true; | ||
501 | } else { | ||
502 | this.handleAppMouseUp(event); | ||
503 | return true; | ||
504 | } | ||
505 | } | ||
506 | }, | ||
507 | |||
469 | handleMouseout: { | 508 | handleMouseout: { |
470 | value: function(event) { | 509 | value: function(event) { |
471 | this.outFlag = true; | 510 | this.outFlag = true; |
@@ -480,6 +519,11 @@ exports.Stage = Montage.create(Component, { | |||
480 | 519 | ||
481 | handleMousedown: { | 520 | handleMousedown: { |
482 | value: function(event) { | 521 | value: function(event) { |
522 | |||
523 | // Increase the canvas to cover the scroll bars | ||
524 | this._drawingCanvas.height = this._drawingCanvas.height + 11; | ||
525 | this._drawingCanvas.width = this._drawingCanvas.width + 11; | ||
526 | |||
483 | // Call the focus manager to set focus to blur any focus'd elements | 527 | // Call the focus manager to set focus to blur any focus'd elements |
484 | this.focusManager.setFocus(); | 528 | this.focusManager.setFocus(); |
485 | 529 | ||
@@ -509,13 +553,18 @@ exports.Stage = Montage.create(Component, { | |||
509 | 553 | ||
510 | handleMouseup: { | 554 | handleMouseup: { |
511 | value: function(event) { | 555 | value: function(event) { |
556 | // Restore canvas to un-cover the scroll bars. | ||
557 | this._drawingCanvas.height = this._drawingCanvas.height - 11; | ||
558 | this._drawingCanvas.width = this._drawingCanvas.width - 11; | ||
512 | // If the mouse up comes from dismissing the context menu return | 559 | // If the mouse up comes from dismissing the context menu return |
560 | |||
513 | if(this.contextMenu) { | 561 | if(this.contextMenu) { |
514 | this.contextMenu = false; | 562 | this.contextMenu = false; |
515 | return; | 563 | return; |
516 | } | 564 | } |
517 | 565 | ||
518 | //this.disableMouseInOut(); | 566 | this.disableMouseInOut(); |
567 | document.removeEventListener("mouseup", this, true); | ||
519 | 568 | ||
520 | this.application.ninja.toolsData.selectedToolInstance.HandleLeftButtonUp(event); | 569 | this.application.ninja.toolsData.selectedToolInstance.HandleLeftButtonUp(event); |
521 | 570 | ||
@@ -563,12 +612,17 @@ exports.Stage = Montage.create(Component, { | |||
563 | handleAppMouseUp: { | 612 | handleAppMouseUp: { |
564 | value: function(event) { | 613 | value: function(event) { |
565 | if(this.outFlag) { | 614 | if(this.outFlag) { |
615 | this._drawingCanvas.height = this._drawingCanvas.height - 11; | ||