aboutsummaryrefslogtreecommitdiff
path: root/js/stage/stage.reel
diff options
context:
space:
mode:
Diffstat (limited to 'js/stage/stage.reel')
-rwxr-xr-xjs/stage/stage.reel/stage.css47
-rwxr-xr-xjs/stage/stage.reel/stage.html27
-rwxr-xr-xjs/stage/stage.reel/stage.js175
3 files changed, 159 insertions, 90 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
43span.CodeMirror-matchhighlight { background: #e9e9e9 }
44.CodeMirror-focused span.CodeMirror-matchhighlight { background: #e7e4ff; !important }
45div.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 30c3d231..7a9619cd 100755
--- a/js/stage/stage.reel/stage.html
+++ b/js/stage/stage.reel/stage.html
@@ -11,32 +11,22 @@
11 11
12 <script type="text/montage-serialization"> 12 <script type="text/montage-serialization">
13 { 13 {
14 "stageView" : { 14 "stageDeps": {
15 "prototype": "js/stage/stage-view.reel",
16 "properties": {
17 "element": {"#": "stageView"}
18 }
19 },
20
21 "StageDeps1": {
22 "prototype": "js/stage/stage-deps", 15 "prototype": "js/stage/stage-deps",
23 "properties": { 16 "properties": {
24 "stage": {"@": "owner"} 17 "stage": {"@": "owner"}
25 } 18 }
26 }, 19 },
27 20
28 "layout1": { 21 "layout": {
29 "prototype": "js/stage/layout", 22 "prototype": "js/stage/layout",
30 "properties": { 23 "properties": {
31 "canvas": {"#": "layoutCanvas"}, 24 "canvas": {"#": "layoutCanvas"},
32 "stage": {"@": "owner"} 25 "stage": {"@": "owner"}
33 }, 26 },
34 "bindings": { 27 "bindings": {
35 "layoutView": { 28 "layoutView": {"<-": "@owner.appModel.layoutView"},
36 "boundObject": {"@": "owner" }, 29 "currentDocument": {"<-": "@owner.currentDocument"}
37 "boundObjectPropertyPath": "appModel.layoutView",
38 "oneway": true
39 }
40 } 30 }
41 }, 31 },
42 32
@@ -57,11 +47,11 @@
57 "element": {"#": "stageAndScenesContainer"}, 47 "element": {"#": "stageAndScenesContainer"},
58 "_iframeContainer": {"#": "iframeContainer"}, 48 "_iframeContainer": {"#": "iframeContainer"},
59 "_layoutCanvas": {"#": "layoutCanvas"}, 49 "_layoutCanvas": {"#": "layoutCanvas"},
50 "_gridCanvas": {"#": "gridCanvas"},
60 "_canvas": {"#": "stageCanvas"}, 51 "_canvas": {"#": "stageCanvas"},
61 "_drawingCanvas": {"#": "drawingCanvas"}, 52 "_drawingCanvas": {"#": "drawingCanvas"},
62 "stageDeps": {"@": "StageDeps1"}, 53 "stageDeps": {"@": "stageDeps"},
63 "layout": {"@": "layout1"}, 54 "layout": {"@": "layout"},
64 "stageView": {"@": "stageView"},
65 "textTool": {"@": "textTool"}, 55 "textTool": {"@": "textTool"},
66 "focusManager": {"@": "focusManager"} 56 "focusManager": {"@": "focusManager"}
67 }, 57 },
@@ -80,9 +70,10 @@
80<body> 70<body>
81 71
82 <section data-montage-id="stageAndScenesContainer" class="stageAndScenesContainer"> 72 <section data-montage-id="stageAndScenesContainer" class="stageAndScenesContainer">
83 <section data-montage-id="stageView"></section> 73 <section id="codeViewContainer" class="codeViewContainer"></section>
84 <section data-montage-id="iframeContainer" id="iframeContainer"></section> 74 <section data-montage-id="iframeContainer" id="iframeContainer"></section>
85 <section data-montage-id="textToolObject"></section> 75 <section data-montage-id="textToolObject"></section>
76 <canvas data-montage-id="gridCanvas" class="gridCanvas"></canvas>
86 <canvas data-montage-id="layoutCanvas" class="layoutCanvas"></canvas> 77 <canvas data-montage-id="layoutCanvas" class="layoutCanvas"></canvas>
87 <canvas data-montage-id="stageCanvas" class="stageCanvas"></canvas> 78 <canvas data-montage-id="stageCanvas" class="stageCanvas"></canvas>
88 <canvas data-montage-id="drawingCanvas" class="drawingCanvas"></canvas> 79 <canvas data-montage-id="drawingCanvas" class="drawingCanvas"></canvas>
diff --git a/js/stage/stage.reel/stage.js b/js/stage/stage.reel/stage.js
index c7afb95c..d8f7313b 100755
--- a/js/stage/stage.reel/stage.js
+++ b/js/stage/stage.reel/stage.js
@@ -97,6 +97,12 @@ exports.Stage = Montage.create(Component, {
97 _layoutCanvas: { value: null }, 97 _layoutCanvas: { value: null },
98 layoutCanvas: { get: function() { return this._layoutCanvas; } }, 98 layoutCanvas: { get: function() { return this._layoutCanvas; } },
99 99
100 _gridCanvas: { value: null },
101 gridCanvas: { get: function() { return this._gridCanvas; } },
102
103 _gridContext: { value: null },
104 gridContext: { get: function() { return this._gridContext; } },
105
100 _drawingCanvas: { value: null }, 106 _drawingCanvas: { value: null },
101 drawingCanvas: { get: function() { return this._drawingCanvas; } }, 107 drawingCanvas: { get: function() { return this._drawingCanvas; } },
102 108
@@ -155,27 +161,49 @@ exports.Stage = Montage.create(Component, {
155 set: function(value) { this._userContentBorder = value; } 161 set: function(value) { this._userContentBorder = value; }
156 }, 162 },
157 163
158 _activeDocument : { 164 _currentDocument: {
159 value : null, 165 value : null
160 enumerable : false
161 }, 166 },
162 167
163 activeDocument : { 168 currentDocument : {
164 get : function() { 169 get : function() {
165 return this._activeDocument; 170 return this._currentDocument;
166 }, 171 },
167 set : function(document) { 172 set : function(value) {
168 ///// If the document is null set default stylesheets to null 173 if (value === this._currentDocument) {
174 return;
175 }
176
177 if(!this._currentDocument && value.currentView === "design") {
178 this.showRulers();
179 this.hideCanvas(false);
180 }
169 181
170 if(!document) { 182 if(this.currentDocument && (this.currentDocument.currentView === "design")) {
171 return false; 183 this.currentDocument.model.scrollLeft = this._scrollLeft;
184 this.currentDocument.model.scrollTop = this._scrollTop;
172 } 185 }
173 186
174 ///// setting document via binding 187 this._currentDocument = value;
175 this._activeDocument = document;
176 188
177 }, 189 if(!value) {
178 enumerable : false 190 this.hideRulers();
191 this.hideCanvas(true);
192 drawUtils._eltArray.length = 0;
193 drawUtils._planesArray.length = 0;
194 } else if(this._currentDocument.currentView === "design") {
195 this.restoreAllPanels();
196 this.hideCanvas(false);
197 this.showRulers();
198
199 this.clearAllCanvas();
200 this.initWithDocument();
201 } else {
202 this.collapseAllPanels();
203 this.hideCanvas(true);
204 this.hideRulers();
205 }
206 }
179 }, 207 },
180 208
181 _userPaddingLeft: { value: 0 }, 209 _userPaddingLeft: { value: 0 },
@@ -186,8 +214,8 @@ exports.Stage = Montage.create(Component, {
186 set: function(value) { 214 set: function(value) {
187 this._userPaddingLeft = value; 215 this._userPaddingLeft = value;
188 this._documentOffsetLeft = -value; 216 this._documentOffsetLeft = -value;
189 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";
190 this.userContentLeft = this._documentOffsetLeft; 218 this.userContentLeft = this._documentOffsetLeft - this._scrollLeft;
191 this.updatedStage = true; 219 this.updatedStage = true;
192 } 220 }
193 }, 221 },
@@ -197,8 +225,8 @@ exports.Stage = Montage.create(Component, {
197 set: function(value) { 225 set: function(value) {
198 this._userPaddingTop = value; 226 this._userPaddingTop = value;
199 this._documentOffsetTop = -value; 227 this._documentOffsetTop = -value;
200