diff options
Diffstat (limited to 'js/stage/stage.reel')
-rwxr-xr-x | js/stage/stage.reel/stage.css | 47 | ||||
-rwxr-xr-x | js/stage/stage.reel/stage.html | 10 | ||||
-rwxr-xr-x | js/stage/stage.reel/stage.js | 64 |
3 files changed, 73 insertions, 48 deletions
diff --git a/js/stage/stage.reel/stage.css b/js/stage/stage.reel/stage.css index 54b9761b..13537ba1 100755 --- a/js/stage/stage.reel/stage.css +++ b/js/stage/stage.reel/stage.css | |||
@@ -10,4 +10,49 @@ | |||
10 | box-flex: 1; | 10 | box-flex: 1; |
11 | position: relative; | 11 | position: relative; |
12 | overflow: hidden; | 12 | overflow: hidden; |
13 | } \ No newline at end of file | 13 | } |
14 | |||
15 | .codeViewContainer { | ||
16 | position: absolute; | ||
17 | top: 0px; | ||
18 | left: 0px; | ||
19 | margin: 0px; | ||
20 | padding: 0px; | ||
21 | background-color: #ffffff; | ||
22 | width: 100%; | ||
23 | height: 100%; | ||
24 | overflow:auto; | ||
25 | cursor:text; | ||
26 | } | ||
27 | |||
28 | .codeViewContainer .CodeMirror { | ||
29 | width: 100%; | ||
30 | height: 100%; | ||
31 | background: white; | ||
32 | } | ||
33 | |||
34 | .codeViewContainer .CodeMirror-scroll { | ||
35 | height: 100%; | ||
36 | overflow: auto; | ||
37 | } | ||
38 | |||
39 | .codeViewContainer>div{ | ||
40 | width:2500px;/*to prevent scrolling of editor container in the middle of the page for short files*/ | ||
41 | } | ||
42 | |||
43 | span.CodeMirror-matchhighlight { background: #e9e9e9 } | ||
44 | .CodeMirror-focused span.CodeMirror-matchhighlight { background: #e7e4ff; !important } | ||
45 | div.CodeMirror span.CodeMirror-matchingbracket {color: #000 !important;background-color: #ffd500;} | ||
46 | .CodeMirror-completions select {background-color:#e8f2ff;border:1px solid #c1c1c1;box-shadow: 8px 8px 8px rgba(0, 0, 0, 0.8);} | ||
47 | .CodeMirror-completions {z-index:6001 !important;} | ||
48 | |||
49 | .cm-s-default .activeline {background: #e8f2ff; !important} | ||
50 | .cm-s-eclipse .activeline {background: #e8f2ff; !important} | ||
51 | .cm-s-elegant .activeline {background: #e8f2ff; !important} | ||
52 | .cm-s-neat .activeline {background: #e8f2ff; !important} | ||
53 | .cm-s-night .activeline {background: #8da6ce; !important} | ||
54 | .cm-s-cobalt .activeline {background: #8da6ce; !important} | ||
55 | .cm-s-monokai .activeline {background: #8da6ce; !important} | ||
56 | .cm-s-rubyblue .activeline {background: #3E7087; !important} | ||
57 | .cm-s-lesser-dark .activeline {background: #8da6ce; !important} | ||
58 | .cm-s-xq-dark .activeline {background: #8da6ce; !important} \ No newline at end of file | ||
diff --git a/js/stage/stage.reel/stage.html b/js/stage/stage.reel/stage.html index 45667e06..7a9619cd 100755 --- a/js/stage/stage.reel/stage.html +++ b/js/stage/stage.reel/stage.html | |||
@@ -11,13 +11,6 @@ | |||
11 | 11 | ||
12 | <script type="text/montage-serialization"> | 12 | <script type="text/montage-serialization"> |
13 | { | 13 | { |
14 | "stageView" : { | ||
15 | "prototype": "js/stage/stage-view.reel", | ||
16 | "properties": { | ||
17 | "element": {"#": "stageView"} | ||
18 | } | ||
19 | }, | ||
20 | |||
21 | "stageDeps": { | 14 | "stageDeps": { |
22 | "prototype": "js/stage/stage-deps", | 15 | "prototype": "js/stage/stage-deps", |
23 | "properties": { | 16 | "properties": { |
@@ -59,7 +52,6 @@ | |||
59 | "_drawingCanvas": {"#": "drawingCanvas"}, | 52 | "_drawingCanvas": {"#": "drawingCanvas"}, |
60 | "stageDeps": {"@": "stageDeps"}, | 53 | "stageDeps": {"@": "stageDeps"}, |
61 | "layout": {"@": "layout"}, | 54 | "layout": {"@": "layout"}, |
62 | "stageView": {"@": "stageView"}, | ||
63 | "textTool": {"@": "textTool"}, | 55 | "textTool": {"@": "textTool"}, |
64 | "focusManager": {"@": "focusManager"} | 56 | "focusManager": {"@": "focusManager"} |
65 | }, | 57 | }, |
@@ -78,7 +70,7 @@ | |||
78 | <body> | 70 | <body> |
79 | 71 | ||
80 | <section data-montage-id="stageAndScenesContainer" class="stageAndScenesContainer"> | 72 | <section data-montage-id="stageAndScenesContainer" class="stageAndScenesContainer"> |
81 | <section data-montage-id="stageView"></section> | 73 | <section id="codeViewContainer" class="codeViewContainer"></section> |
82 | <section data-montage-id="iframeContainer" id="iframeContainer"></section> | 74 | <section data-montage-id="iframeContainer" id="iframeContainer"></section> |
83 | <section data-montage-id="textToolObject"></section> | 75 | <section data-montage-id="textToolObject"></section> |
84 | <canvas data-montage-id="gridCanvas" class="gridCanvas"></canvas> | 76 | <canvas data-montage-id="gridCanvas" class="gridCanvas"></canvas> |
diff --git a/js/stage/stage.reel/stage.js b/js/stage/stage.reel/stage.js index 5a1d7f78..4d9296a1 100755 --- a/js/stage/stage.reel/stage.js +++ b/js/stage/stage.reel/stage.js | |||
@@ -192,7 +192,6 @@ exports.Stage = Montage.create(Component, { | |||
192 | drawUtils._eltArray.length = 0; | 192 | drawUtils._eltArray.length = 0; |
193 | drawUtils._planesArray.length = 0; | 193 | drawUtils._planesArray.length = 0; |
194 | } else if(this._currentDocument.currentView === "design") { | 194 | } else if(this._currentDocument.currentView === "design") { |
195 | this.showCodeViewBar(false); | ||
196 | this.restoreAllPanels(); | 195 | this.restoreAllPanels(); |
197 | this.hideCanvas(false); | 196 | this.hideCanvas(false); |
198 | this.showRulers(); | 197 | this.showRulers(); |
@@ -200,13 +199,12 @@ exports.Stage = Montage.create(Component, { | |||
200 | this.clearAllCanvas(); | 199 | this.clearAllCanvas(); |
201 | this.initWithDocument(); | 200 | this.initWithDocument(); |
202 | } else { | 201 | } else { |
203 | this.showCodeViewBar(true); | ||
204 | this.collapseAllPanels(); | 202 | this.collapseAllPanels(); |
205 | this.hideCanvas(true); | 203 | this.hideCanvas(true); |
206 | this.hideRulers(); | 204 | this.hideRulers(); |
207 | } | 205 | } |
208 | } | 206 | } |
209 | }, | 207 | }, |
210 | 208 | ||
211 | _userPaddingLeft: { value: 0 }, | 209 | _userPaddingLeft: { value: 0 }, |
212 | _userPaddingTop: { value: 0 }, | 210 | _userPaddingTop: { value: 0 }, |
@@ -216,7 +214,7 @@ exports.Stage = Montage.create(Component, { | |||
216 | set: function(value) { | 214 | set: function(value) { |
217 | this._userPaddingLeft = value; | 215 | this._userPaddingLeft = value; |
218 | this._documentOffsetLeft = -value; | 216 | this._documentOffsetLeft = -value; |
219 | this.application.ninja.currentDocument.model.documentRoot.ownerDocument.getElementsByTagName("HTML")[0].style["padding-left"] = -value + "px"; | 217 | this.currentDocument.model.documentRoot.ownerDocument.getElementsByTagName("HTML")[0].style["padding-left"] = -value + "px"; |
220 | this.userContentLeft = this._documentOffsetLeft - this._scrollLeft; | 218 | this.userContentLeft = this._documentOffsetLeft - this._scrollLeft; |
221 | this.updatedStage = true; | 219 | this.updatedStage = true; |
222 | } | 220 | } |
@@ -227,7 +225,7 @@ exports.Stage = Montage.create(Component, { | |||
227 | set: function(value) { | 225 | set: function(value) { |
228 | this._userPaddingTop = value; | 226 | this._userPaddingTop = value; |
229 | this._documentOffsetTop = -value; | 227 | this._documentOffsetTop = -value; |
230 | this.application.ninja.currentDocument.model.documentRoot.ownerDocument.getElementsByTagName("HTML")[0].style["padding-top"] = -value + "px"; | 228 | this.currentDocument.model.documentRoot.ownerDocument.getElementsByTagName("HTML")[0].style["padding-top"] = -value + "px"; |
231 | this.userContentTop = this._documentOffsetTop - this._scrollTop; | 229 | this.userContentTop = this._documentOffsetTop - this._scrollTop; |
232 | this.updatedStage = true; | 230 | this.updatedStage = true; |
233 | } | 231 | } |
@@ -242,7 +240,7 @@ exports.Stage = Montage.create(Component, { | |||
242 | 240 | ||
243 | // Hack for now until a full component | 241 | // Hack for now until a full component |
244 | this.layout.draw(); | 242 | this.layout.draw(); |
245 | if(this.application.ninja.currentDocument) { | 243 | if(this.currentDocument) { |
246 | this.layout.draw3DInfo(true); | 244 | this.layout.draw3DInfo(true); |
247 | } | 245 | } |
248 | } else if(this.updatedStage) { | 246 | } else if(this.updatedStage) { |
@@ -347,8 +345,8 @@ exports.Stage = Montage.create(Component, { | |||
347 | } | 345 | } |
348 | 346 | ||
349 | if(didSwitch) { | 347 | if(didSwitch) { |
350 | this.application.ninja.currentDocument.model.views.design.document.body.scrollLeft = this.currentDocument.model.scrollLeft; | 348 | this.currentDocument.model.views.design.document.body.scrollLeft = this.currentDocument.model.scrollLeft; |
351 | this.application.ninja.currentDocument.model.views.design.document.body.scrollTop = this.currentDocument.model.scrollTop; | 349 | this.currentDocument.model.views.design.document.body.scrollTop = this.currentDocument.model.scrollTop; |
352 | this.handleScroll(); | 350 | this.handleScroll(); |
353 | } else { | 351 | } else { |
354 | this.centerStage(); | 352 | this.centerStage(); |
@@ -462,9 +460,9 @@ exports.Stage = Montage.create(Component, { | |||
462 | handleMousewheel: { | 460 | handleMousewheel: { |
463 | value: function(event) { | 461 | value: function(event) { |
464 | if(event._event.wheelDelta > 0) { | 462 | if(event._event.wheelDelta > 0) { |
465 | this.application.ninja.currentDocument.model.views.design.document.body.scrollTop -= 20; | 463 | this.currentDocument.model.views.design.document.body.scrollTop -= 20; |
466 | } else { | 464 | } else { |
467 | this.application.ninja.currentDocument.model.views.design.document.body.scrollTop += 20; | 465 | this.currentDocument.model.views.design.document.body.scrollTop += 20; |
468 | } | 466 | } |
469 | } | 467 | } |
470 | }, | 468 | }, |
@@ -532,8 +530,8 @@ exports.Stage = Montage.create(Component, { | |||
532 | handleScroll: { | 530 | handleScroll: { |
533 | value: function() { | 531 | value: function() { |
534 | 532 | ||
535 | this._scrollLeft = this.application.ninja.currentDocument.model.views.design.document.body.scrollLeft; | 533 | this._scrollLeft = this.currentDocument.model.views.design.document.body.scrollLeft; |
536 | this._scrollTop = this.application.ninja.currentDocument.model.views.design.document.body.scrollTop; | 534 | this._scrollTop = this.currentDocument.model.views.design.document.body.scrollTop; |
537 | 535 | ||
538 | this.userContentLeft = this._documentOffsetLeft - this._scrollLeft; | 536 | this.userContentLeft = this._documentOffsetLeft - this._scrollLeft; |
539 | this.userContentTop = this._documentOffsetTop - this._scrollTop; | 537 | this.userContentTop = this._documentOffsetTop - this._scrollTop; |
@@ -571,7 +569,7 @@ exports.Stage = Montage.create(Component, { | |||
571 | */ | 569 | */ |
572 | centerStage: { | 570 | centerStage: { |
573 | value: function() { | 571 | value: function() { |
574 | var designView = this.application.ninja.currentDocument.model.views.design; | 572 | var designView = this.currentDocument.model.views.design; |
575 | if(designView._template) { | 573 | if(designView._template) { |
576 | designView.document.body.scrollLeft = this._documentOffsetLeft - parseInt((this.canvas.width - designView._template.size.width)/2); | 574 | designView.document.body.scrollLeft = this._documentOffsetLeft - parseInt((this.canvas.width - designView._template.size.width)/2); |
577 | designView.document.body.scrollTop = this._documentOffsetTop - parseInt((this.canvas.height - designView._template.size.height)/2); | 575 | designView.document.body.scrollTop = this._documentOffsetTop - parseInt((this.canvas.height - designView._template.size.height)/2); |
@@ -630,21 +628,21 @@ exports.Stage = Montage.create(Component, { | |||
630 | getElement: { | 628 | getElement: { |
631 | value: function(position, selectable) { | 629 | value: function(position, selectable) { |
632 | var point, element, | 630 | var point, element, |
633 | docView = this.application.ninja.currentDocument.model.views.design; | 631 | docView = this.currentDocument.model.views.design; |
634 | 632 | ||
635 | point = webkitConvertPointFromPageToNode(this.canvas, new WebKitPoint(position.pageX - docView.iframe.contentWindow.pageXOffset + this.documentOffsetLeft, position.pageY - docView.iframe.contentWindow.pageYOffset + this.documentOffsetTop)); | 633 | point = webkitConvertPointFromPageToNode(this.canvas, new WebKitPoint(position.pageX - docView.iframe.contentWindow.pageXOffset + this.documentOffsetLeft, position.pageY - docView.iframe.contentWindow.pageYOffset + this.documentOffsetTop)); |
636 | element = this.application.ninja.currentDocument.model.views.design.getElementFromPoint(point.x - this.userContentLeft,point.y - this.userContentTop); |