diff options
Diffstat (limited to 'js/stage/stage.reel')
-rwxr-xr-x | js/stage/stage.reel/stage.css | 13 | ||||
-rwxr-xr-x | js/stage/stage.reel/stage.html | 12 | ||||
-rwxr-xr-x | js/stage/stage.reel/stage.js | 61 |
3 files changed, 69 insertions, 17 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 5e913c76..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, |
@@ -256,6 +260,8 @@ exports.Stage = Montage.create(Component, { | |||
256 | 260 | ||
257 | //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 |
258 | 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 | ||
259 | } | 265 | } |
260 | 266 | ||
261 | this._currentDocument = value; | 267 | this._currentDocument = value; |
@@ -266,7 +272,8 @@ exports.Stage = Montage.create(Component, { | |||
266 | drawUtils._eltArray.length = 0; | 272 | drawUtils._eltArray.length = 0; |
267 | drawUtils._planesArray.length = 0; | 273 | drawUtils._planesArray.length = 0; |
268 | } else if(this._currentDocument.currentView === "design") { | 274 | } else if(this._currentDocument.currentView === "design") { |
269 | this.restoreAllPanels(); | 275 | this.restoreAllPanels(this.switchedFromCodeDoc); |
276 | this.switchedFromCodeDoc = false; | ||
270 | this.hideCanvas(false); | 277 | this.hideCanvas(false); |
271 | this.showRulers(); | 278 | this.showRulers(); |
272 | 279 | ||
@@ -316,9 +323,8 @@ exports.Stage = Montage.create(Component, { | |||
316 | value: function() { | 323 | value: function() { |
317 | if(this.resizeCanvases) { | 324 | if(this.resizeCanvases) { |
318 | // TODO GET THE SCROLL SIZE FROM THE CSS -- 11 px | 325 | // TODO GET THE SCROLL SIZE FROM THE CSS -- 11 px |
319 | 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; |
320 | 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; |
321 | |||
322 | // Hack for now until a full component | 328 | // Hack for now until a full component |
323 | this.layout.draw(); | 329 | this.layout.draw(); |
324 | if(this.currentDocument && (this.currentDocument.currentView === "design")) { | 330 | if(this.currentDocument && (this.currentDocument.currentView === "design")) { |
@@ -354,8 +360,6 @@ exports.Stage = Montage.create(Component, { | |||
354 | // Hide the canvas | 360 | // Hide the canvas |
355 | this.hideCanvas(true); | 361 | this.hideCanvas(true); |
356 | 362 | ||
357 | this.eventManager.addEventListener( "appMouseUp", this, false); | ||
358 | |||
359 | this.eventManager.addEventListener( "enableStageMove", this, false); | 363 | this.eventManager.addEventListener( "enableStageMove", this, false); |
360 | this.eventManager.addEventListener( "disableStageMove", this, false); | 364 | this.eventManager.addEventListener( "disableStageMove", this, false); |
361 | 365 | ||
@@ -405,8 +409,8 @@ exports.Stage = Montage.create(Component, { | |||
405 | } | 409 | } |
406 | 410 | ||
407 | // Recalculate the canvas sizes because of splitter resizing | 411 | // Recalculate the canvas sizes because of splitter resizing |
408 | 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 ; |
409 | 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; |
410 | 414 | ||
411 | designView.iframe.contentWindow.addEventListener("scroll", this, false); | 415 | designView.iframe.contentWindow.addEventListener("scroll", this, false); |
412 | 416 | ||
@@ -475,6 +479,7 @@ exports.Stage = Montage.create(Component, { | |||
475 | 479 | ||
476 | enableMouseInOut: { | 480 | enableMouseInOut: { |
477 | value: function() { | 481 | value: function() { |
482 | document.addEventListener("mouseup", this, true); | ||
478 | this._drawingCanvas.addEventListener("mouseout", this, false); | 483 | this._drawingCanvas.addEventListener("mouseout", this, false); |
479 | this._drawingCanvas.addEventListener("mouseover", this, false); | 484 | this._drawingCanvas.addEventListener("mouseover", this, false); |
480 | } | 485 | } |
@@ -487,6 +492,19 @@ exports.Stage = Montage.create(Component, { | |||
487 | } | 492 | } |
488 | }, | 493 | }, |
489 | 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 | |||
490 | handleMouseout: { | 508 | handleMouseout: { |
491 | value: function(event) { | 509 | value: function(event) { |
492 | this.outFlag = true; | 510 | this.outFlag = true; |
@@ -501,6 +519,11 @@ exports.Stage = Montage.create(Component, { | |||
501 | 519 | ||
502 | handleMousedown: { | 520 | handleMousedown: { |
503 | 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 | |||
504 | // 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 |
505 | this.focusManager.setFocus(); | 528 | this.focusManager.setFocus(); |
506 | 529 | ||
@@ -530,13 +553,18 @@ exports.Stage = Montage.create(Component, { | |||
530 | 553 | ||
531 | handleMouseup: { | 554 | handleMouseup: { |
532 | 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; | ||
533 | // If the mouse up comes from dismissing the context menu return | 559 | // If the mouse up comes from dismissing the context menu return |
560 | |||
534 | if(this.contextMenu) { | 561 | if(this.contextMenu) { |
535 | this.contextMenu = false; | 562 | this.contextMenu = false; |
536 | return; | 563 | return; |
537 | } | 564 | } |
538 | 565 | ||
539 | //this.disableMouseInOut(); | 566 | this.disableMouseInOut(); |
567 | document.removeEventListener("mouseup", this, true); | ||
540 | 568 | ||
541 | this.application.ninja.toolsData.selectedToolInstance.HandleLeftButtonUp(event); | 569 | this.application.ninja.toolsData.selectedToolInstance.HandleLeftButtonUp(event); |
542 | 570 | ||
@@ -584,12 +612,17 @@ exports.Stage = Montage.create(Component, { | |||