aboutsummaryrefslogtreecommitdiff
path: root/js/stage/stage.reel
diff options
context:
space:
mode:
authorJose Antonio Marquez2012-06-26 13:40:44 -0700
committerJose Antonio Marquez2012-06-26 13:40:44 -0700
commit81747f839bf5d176a15511303f7d2a0e4028e5bb (patch)
tree5afab7fb834f9df27d2bf35f6414a906c27ec598 /js/stage/stage.reel
parent9ebf80d943b894242d90cf62bc3078c6a83041ad (diff)
parent87a8b62f71bb72274c3dd1fa389e88c12d482ebb (diff)
downloadninja-81747f839bf5d176a15511303f7d2a0e4028e5bb.tar.gz
Merge branch 'refs/heads/Ninja-Internal' into Color
Diffstat (limited to 'js/stage/stage.reel')
-rwxr-xr-xjs/stage/stage.reel/stage.css13
-rwxr-xr-xjs/stage/stage.reel/stage.html12
-rwxr-xr-xjs/stage/stage.reel/stage.js45
3 files changed, 59 insertions, 11 deletions
diff --git a/js/stage/stage.reel/stage.css b/js/stage/stage.reel/stage.css
index 13537ba1..2c2e30d3 100755
--- a/js/stage/stage.reel/stage.css
+++ b/js/stage/stage.reel/stage.css
@@ -12,6 +12,16 @@
12 overflow: hidden; 12 overflow: hidden;
13} 13}
14 14
15.montage-editor-container {
16 z-index: 8;
17 display: none;
18 position: absolute;
19}
20
21.stageAndScenesContainer .montage-editor {
22 -webkit-user-select:text;
23}
24
15.codeViewContainer { 25.codeViewContainer {
16 position: absolute; 26 position: absolute;
17 top: 0px; 27 top: 0px;
@@ -55,4 +65,5 @@ div.CodeMirror span.CodeMirror-matchingbracket {color: #000 !important;backgroun
55.cm-s-monokai .activeline {background: #8da6ce; !important} 65.cm-s-monokai .activeline {background: #8da6ce; !important}
56.cm-s-rubyblue .activeline {background: #3E7087; !important} 66.cm-s-rubyblue .activeline {background: #3E7087; !important}
57.cm-s-lesser-dark .activeline {background: #8da6ce; !important} 67.cm-s-lesser-dark .activeline {background: #8da6ce; !important}
58.cm-s-xq-dark .activeline {background: #8da6ce; !important} \ No newline at end of file 68.cm-s-xq-dark .activeline {background: #8da6ce; !important}
69
diff --git a/js/stage/stage.reel/stage.html b/js/stage/stage.reel/stage.html
index 2ed596f3..215f8f2e 100755
--- a/js/stage/stage.reel/stage.html
+++ b/js/stage/stage.reel/stage.html
@@ -40,7 +40,13 @@
40 "focusManager": { 40 "focusManager": {
41 "object": "js/components/focus-manager.reel" 41 "object": "js/components/focus-manager.reel"
42 }, 42 },
43 43
44 "bindingView": {
45 "prototype": "js/stage/binding-view.reel",
46 "properties" : {
47 "element": {"#": "bindingView" }
48 }
49 },
44 "owner": { 50 "owner": {
45 "prototype": "js/stage/stage.reel", 51 "prototype": "js/stage/stage.reel",
46 "properties": { 52 "properties": {
@@ -53,7 +59,8 @@
53 "stageDeps": {"@": "stageDeps"}, 59 "stageDeps": {"@": "stageDeps"},
54 "layout": {"@": "layout"}, 60 "layout": {"@": "layout"},
55 "textTool": {"@": "textTool"}, 61 "textTool": {"@": "textTool"},
56 "focusManager": {"@": "focusManager"} 62 "focusManager": {"@": "focusManager"},
63 "bindingView": {"@": "bindingView"}
57 }, 64 },
58 "bindings": { 65 "bindings": {
59 "currentDocumentStageView": { 66 "currentDocumentStageView": {
@@ -77,6 +84,7 @@
77 <canvas data-montage-id="layoutCanvas" class="layoutCanvas"></canvas> 84 <canvas data-montage-id="layoutCanvas" class="layoutCanvas"></canvas>
78 <canvas data-montage-id="stageCanvas" class="stageCanvas"></canvas> 85 <canvas data-montage-id="stageCanvas" class="stageCanvas"></canvas>
79 <canvas data-montage-id="drawingCanvas" class="drawingCanvas"></canvas> 86 <canvas data-montage-id="drawingCanvas" class="drawingCanvas"></canvas>
87 <section data-montage-id="bindingView"></section>
80 </section> 88 </section>
81 89
82</body> 90</body>
diff --git a/js/stage/stage.reel/stage.js b/js/stage/stage.reel/stage.js
index 319ffe87..8cbe3210 100755
--- a/js/stage/stage.reel/stage.js
+++ b/js/stage/stage.reel/stage.js
@@ -27,6 +27,9 @@ exports.Stage = Montage.create(Component, {
27 _canvasSelectionPrefs: { value: { "thickness" : 1.0, "color" : "#46a1ff" } }, 27 _canvasSelectionPrefs: { value: { "thickness" : 1.0, "color" : "#46a1ff" } },
28 _canvasDrawingPrefs: { value: { "thickness" : 1.0, "color" : "#000" } }, 28 _canvasDrawingPrefs: { value: { "thickness" : 1.0, "color" : "#000" } },
29 drawingContextPreferences: { get: function() { return this._canvasDrawingPrefs; } }, 29 drawingContextPreferences: { get: function() { return this._canvasDrawingPrefs; } },
30 bindingView: {
31 value: null
32 },
30 33
31 _iframeContainer: { 34 _iframeContainer: {
32 value: null, 35 value: null,
@@ -320,9 +323,8 @@ exports.Stage = Montage.create(Component, {
320 value: function() { 323 value: function() {
321 if(this.resizeCanvases) { 324 if(this.resizeCanvases) {
322 // TODO GET THE SCROLL SIZE FROM THE CSS -- 11 px 325 // TODO GET THE SCROLL SIZE FROM THE CSS -- 11 px
323 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;
324 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;
325
326 // Hack for now until a full component 328 // Hack for now until a full component
327 this.layout.draw(); 329 this.layout.draw();
328 if(this.currentDocument && (this.currentDocument.currentView === "design")) { 330 if(this.currentDocument && (this.currentDocument.currentView === "design")) {
@@ -358,8 +360,6 @@ exports.Stage = Montage.create(Component, {
358 // Hide the canvas 360 // Hide the canvas
359 this.hideCanvas(true); 361 this.hideCanvas(true);
360 362
361 this.eventManager.addEventListener( "appMouseUp", this, false);
362
363 this.eventManager.addEventListener( "enableStageMove", this, false); 363 this.eventManager.addEventListener( "enableStageMove", this, false);
364 this.eventManager.addEventListener( "disableStageMove", this, false); 364 this.eventManager.addEventListener( "disableStageMove", this, false);
365 365
@@ -409,8 +409,8 @@ exports.Stage = Montage.create(Component, {
409 } 409 }
410 410
411 // Recalculate the canvas sizes because of splitter resizing 411 // Recalculate the canvas sizes because of splitter resizing
412 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 ;
413 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;
414 414
415 designView.iframe.contentWindow.addEventListener("scroll", this, false); 415 designView.iframe.contentWindow.addEventListener("scroll", this, false);
416 416
@@ -479,6 +479,7 @@ exports.Stage = Montage.create(Component, {
479 479
480 enableMouseInOut: { 480 enableMouseInOut: {
481 value: function() { 481 value: function() {
482 document.addEventListener("mouseup", this, true);
482 this._drawingCanvas.addEventListener("mouseout", this, false); 483 this._drawingCanvas.addEventListener("mouseout", this, false);
483 this._drawingCanvas.addEventListener("mouseover", this, false); 484 this._drawingCanvas.addEventListener("mouseover", this, false);
484 } 485 }
@@ -491,6 +492,19 @@ exports.Stage = Montage.create(Component, {
491 } 492 }
492 }, 493 },
493 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
494 handleMouseout: { 508 handleMouseout: {
495 value: function(event) { 509 value: function(event) {
496 this.outFlag = true; 510 this.outFlag = true;
@@ -505,6 +519,11 @@ exports.Stage = Montage.create(Component, {
505 519
506 handleMousedown: { 520 handleMousedown: {
507 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
508 // 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
509 this.focusManager.setFocus(); 528 this.focusManager.setFocus();
510 529
@@ -534,13 +553,18 @@ exports.Stage = Montage.create(Component, {
534 553
535 handleMouseup: { 554 handleMouseup: {
536 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;
537 // If the mouse up comes from dismissing the context menu return 559 // If the mouse up comes from dismissing the context menu return
560
538 if(this.contextMenu) { 561 if(this.contextMenu) {
539 this.contextMenu = false; 562 this.contextMenu = false;
540 return; 563 return;
541 } 564 }
542 565
543 //this.disableMouseInOut(); 566 this.disableMouseInOut();
567 document.removeEventListener("mouseup", this, true);
544 568
545 this.application.ninja.toolsData.selectedToolInstance.HandleLeftButtonUp(event); 569 this.application.ninja.toolsData.selectedToolInstance.HandleLeftButtonUp(event);
546 570
@@ -588,12 +612,17 @@ exports.Stage = Montage.create(Component, {
588 handleAppMouseUp: { 612 handleAppMouseUp: {
589 value: function(event) { 613 value: function(event) {
590 if(this.outFlag) { 614 if(this.outFlag) {
615 this._drawingCanvas.height = this._drawingCanvas.height - 11;
616 this._drawingCanvas.width = this._drawingCanvas.width - 11;
617
591 if(this.application.ninja.toolsData.selectedToolInstance.isDrawing) { 618 if(this.application.ninja.toolsData.selectedToolInstance.isDrawing) {
592 this.application.ninja.toolsData.selectedToolInstance.HandleLeftButtonUp(event); 619 this.application.ninja.toolsData.selectedToolInstance.HandleLeftButtonUp(event);
593 } 620 }
594 this.disableMouseInOut(); 621 this.disableMouseInOut();
595 this.outFlag = false; 622 this.outFlag = false;
596 } 623 }
624
625 document.removeEventListener("mouseup", this, true);
597 } 626 }
598 }, 627 },
599 628