diff options
Diffstat (limited to 'js/stage/stage.reel')
-rwxr-xr-x | js/stage/stage.reel/stage.html | 17 | ||||
-rwxr-xr-x | js/stage/stage.reel/stage.js | 82 |
2 files changed, 66 insertions, 33 deletions
diff --git a/js/stage/stage.reel/stage.html b/js/stage/stage.reel/stage.html index 30c3d231..45667e06 100755 --- a/js/stage/stage.reel/stage.html +++ b/js/stage/stage.reel/stage.html | |||
@@ -18,25 +18,22 @@ | |||
18 | } | 18 | } |
19 | }, | 19 | }, |
20 | 20 | ||
21 | "StageDeps1": { | 21 | "stageDeps": { |
22 | "prototype": "js/stage/stage-deps", | 22 | "prototype": "js/stage/stage-deps", |
23 | "properties": { | 23 | "properties": { |
24 | "stage": {"@": "owner"} | 24 | "stage": {"@": "owner"} |
25 | } | 25 | } |
26 | }, | 26 | }, |
27 | 27 | ||
28 | "layout1": { | 28 | "layout": { |
29 | "prototype": "js/stage/layout", | 29 | "prototype": "js/stage/layout", |
30 | "properties": { | 30 | "properties": { |
31 | "canvas": {"#": "layoutCanvas"}, | 31 | "canvas": {"#": "layoutCanvas"}, |
32 | "stage": {"@": "owner"} | 32 | "stage": {"@": "owner"} |
33 | }, | 33 | }, |
34 | "bindings": { | 34 | "bindings": { |
35 | "layoutView": { | 35 | "layoutView": {"<-": "@owner.appModel.layoutView"}, |
36 | "boundObject": {"@": "owner" }, | 36 | "currentDocument": {"<-": "@owner.currentDocument"} |
37 | "boundObjectPropertyPath": "appModel.layoutView", | ||
38 | "oneway": true | ||
39 | } | ||
40 | } | 37 | } |
41 | }, | 38 | }, |
42 | 39 | ||
@@ -57,10 +54,11 @@ | |||
57 | "element": {"#": "stageAndScenesContainer"}, | 54 | "element": {"#": "stageAndScenesContainer"}, |
58 | "_iframeContainer": {"#": "iframeContainer"}, | 55 | "_iframeContainer": {"#": "iframeContainer"}, |
59 | "_layoutCanvas": {"#": "layoutCanvas"}, | 56 | "_layoutCanvas": {"#": "layoutCanvas"}, |
57 | "_gridCanvas": {"#": "gridCanvas"}, | ||
60 | "_canvas": {"#": "stageCanvas"}, | 58 | "_canvas": {"#": "stageCanvas"}, |
61 | "_drawingCanvas": {"#": "drawingCanvas"}, | 59 | "_drawingCanvas": {"#": "drawingCanvas"}, |
62 | "stageDeps": {"@": "StageDeps1"}, | 60 | "stageDeps": {"@": "stageDeps"}, |
63 | "layout": {"@": "layout1"}, | 61 | "layout": {"@": "layout"}, |
64 | "stageView": {"@": "stageView"}, | 62 | "stageView": {"@": "stageView"}, |
65 | "textTool": {"@": "textTool"}, | 63 | "textTool": {"@": "textTool"}, |
66 | "focusManager": {"@": "focusManager"} | 64 | "focusManager": {"@": "focusManager"} |
@@ -83,6 +81,7 @@ | |||
83 | <section data-montage-id="stageView"></section> | 81 | <section data-montage-id="stageView"></section> |
84 | <section data-montage-id="iframeContainer" id="iframeContainer"></section> | 82 | <section data-montage-id="iframeContainer" id="iframeContainer"></section> |
85 | <section data-montage-id="textToolObject"></section> | 83 | <section data-montage-id="textToolObject"></section> |
84 | <canvas data-montage-id="gridCanvas" class="gridCanvas"></canvas> | ||
86 | <canvas data-montage-id="layoutCanvas" class="layoutCanvas"></canvas> | 85 | <canvas data-montage-id="layoutCanvas" class="layoutCanvas"></canvas> |
87 | <canvas data-montage-id="stageCanvas" class="stageCanvas"></canvas> | 86 | <canvas data-montage-id="stageCanvas" class="stageCanvas"></canvas> |
88 | <canvas data-montage-id="drawingCanvas" class="drawingCanvas"></canvas> | 87 | <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..4505ff66 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,28 +161,35 @@ 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 | } | ||
169 | 176 | ||
170 | if(!document) { | 177 | if(!this._currentDocument && value.currentView === "design") { |
171 | return false; | 178 | this.showRulers(); |
179 | this.hideCanvas(false); | ||
172 | } | 180 | } |
173 | 181 | ||
174 | ///// setting document via binding | 182 | this._currentDocument = value; |
175 | this._activeDocument = document; | ||
176 | 183 | ||
184 | if(!value) { | ||
185 | this.hideRulers(); | ||
186 | this.hideCanvas(true); | ||
187 | } else if(this._currentDocument.currentView === "design") { | ||
188 | this.clearAllCanvas(); | ||
189 | this.initWithDocument(false); | ||
190 | } | ||
191 | } | ||
177 | }, | 192 | }, |
178 | enumerable : false | ||
179 | }, | ||
180 | 193 | ||
181 | _userPaddingLeft: { value: 0 }, | 194 | _userPaddingLeft: { value: 0 }, |
182 | _userPaddingTop: { value: 0 }, | 195 | _userPaddingTop: { value: 0 }, |
@@ -187,7 +200,7 @@ exports.Stage = Montage.create(Component, { | |||
187 | this._userPaddingLeft = value; | 200 | this._userPaddingLeft = value; |
188 | this._documentOffsetLeft = -value; | 201 | this._documentOffsetLeft = -value; |
189 | this.application.ninja.currentDocument.model.documentRoot.ownerDocument.getElementsByTagName("HTML")[0].style["padding-left"] = -value + "px"; | 202 | this.application.ninja.currentDocument.model.documentRoot.ownerDocument.getElementsByTagName("HTML")[0].style["padding-left"] = -value + "px"; |
190 | this.userContentLeft = this._documentOffsetLeft; | 203 | this.userContentLeft = this._documentOffsetLeft - this._scrollLeft; |
191 | this.updatedStage = true; | 204 | this.updatedStage = true; |
192 | } | 205 | } |
193 | }, | 206 | }, |
@@ -198,7 +211,7 @@ exports.Stage = Montage.create(Component, { | |||
198 | this._userPaddingTop = value; | 211 | this._userPaddingTop = value; |
199 | this._documentOffsetTop = -value; | 212 | this._documentOffsetTop = -value; |
200 | this.application.ninja.currentDocument.model.documentRoot.ownerDocument.getElementsByTagName("HTML")[0].style["padding-top"] = -value + "px"; | 213 | this.application.ninja.currentDocument.model.documentRoot.ownerDocument.getElementsByTagName("HTML")[0].style["padding-top"] = -value + "px"; |
201 | this.userContentTop = this._documentOffsetTop; | 214 | this.userContentTop = this._documentOffsetTop - this._scrollTop; |
202 | this.updatedStage = true; | 215 | this.updatedStage = true; |
203 | } | 216 | } |
204 | }, | 217 | }, |
@@ -207,11 +220,14 @@ exports.Stage = Montage.create(Component, { | |||
207 | value: function() { | 220 | value: function() { |
208 | if(this.resizeCanvases) { | 221 | if(this.resizeCanvases) { |
209 | // TODO GET THE SCROLL SIZE FROM THE CSS -- 11 px | 222 | // TODO GET THE SCROLL SIZE FROM THE CSS -- 11 px |
210 | this._canvas.width = this._layoutCanvas.width = this._drawingCanvas.width = this.element.offsetWidth - 11 ; | 223 | this._canvas.width = this._layoutCanvas.width = this._drawingCanvas.width = this._gridCanvas.width = this.element.offsetWidth - 11 ; |
211 | this._canvas.height = this._layoutCanvas.height = this._drawingCanvas.height = this.element.offsetHeight - 11;// - 26 - 26; | 224 | this._canvas.height = this._layoutCanvas.height = this._drawingCanvas.height = this._gridCanvas.height = this.element.offsetHeight - 11;// - 26 - 26; |
212 | 225 | ||
213 | // Hack for now until a full component | 226 | // Hack for now until a full component |
214 | this.layout.draw(); | 227 | this.layout.draw(); |
228 | if(this.application.ninja.currentDocument) { | ||
229 | this.layout.draw3DInfo(true); | ||
230 | } | ||
215 | } else if(this.updatedStage) { | 231 | } else if(this.updatedStage) { |
216 | this.layout.draw(); | 232 | this.layout.draw(); |
217 | this.layout.draw3DInfo(true); | 233 | this.layout.draw3DInfo(true); |
@@ -231,6 +247,7 @@ exports.Stage = Montage.create(Component, { | |||
231 | 247 | ||
232 | this._context = this._canvas.getContext("2d"); | 248 | this._context = this._canvas.getContext("2d"); |
233 | this._drawingContext= this._drawingCanvas.getContext("2d"); | 249 | this._drawingContext= this._drawingCanvas.getContext("2d"); |
250 | this._gridContext= this._gridCanvas.getContext("2d"); | ||
234 | 251 | ||
235 | // Setup event listeners | 252 | // Setup event listeners |
236 | this._drawingCanvas.addEventListener("mousedown", this, false); | 253 | this._drawingCanvas.addEventListener("mousedown", this, false); |
@@ -273,11 +290,9 @@ exports.Stage = Montage.create(Component, { | |||
273 | value: function(didSwitch) { | 290 | value: function(didSwitch) { |
274 | var designView = this.application.ninja.currentDocument.model.views.design; | 291 | var designView = this.application.ninja.currentDocument.model.views.design; |
275 | 292 | ||
276 | this.hideCanvas(false); | ||
277 | |||
278 | // Recalculate the canvas sizes because of splitter resizing | 293 | // Recalculate the canvas sizes because of splitter resizing |
279 | this._canvas.width = this._layoutCanvas.width = this._drawingCanvas.width = this.element.offsetWidth - 11 ; | 294 | this._canvas.width = this._layoutCanvas.width = this._drawingCanvas.width = this._gridCanvas.width = this.element.offsetWidth - 11 ; |
280 | this._canvas.height = this._layoutCanvas.height = this._drawingCanvas.height = this.element.offsetHeight - 11; | 295 | this._canvas.height = this._layoutCanvas.height = this._drawingCanvas.height = this._gridCanvas.height = this.element.offsetHeight - 11; |
281 | 296 | ||
282 | designView.iframe.contentWindow.addEventListener("scroll", this, false); | 297 | designView.iframe.contentWindow.addEventListener("scroll", this, false); |
283 | 298 | ||
@@ -295,8 +310,7 @@ exports.Stage = Montage.create(Component, { | |||
295 | this._scrollLeft = 0; | 310 | this._scrollLeft = 0; |
296 | this._scrollTop = 0; | 311 | this._scrollTop = 0; |
297 | 312 | ||
298 | this.stageDeps.handleOpenDocument(); | 313 | this.initialize3DOnOpenDocument(); |
299 | this.layout.handleOpenDocument(); | ||
300 | 314 | ||
301 | if(designView._template) { | 315 | if(designView._template) { |
302 | var initialLeft = parseInt((this.canvas.width - designView._template.size.width)/2); | 316 | var initialLeft = parseInt((this.canvas.width - designView._template.size.width)/2); |
@@ -519,11 +533,12 @@ exports.Stage = Montage.create(Component, { | |||
519 | this._canvas.style.visibility = "hidden"; | 533 | this._canvas.style.visibility = "hidden"; |
520 | this._layoutCanvas.style.visibility = "hidden"; | 534 | this._layoutCanvas.style.visibility = "hidden"; |
521 | this._drawingCanvas.style.visibility = "hidden"; | 535 | this._drawingCanvas.style.visibility = "hidden"; |
536 | this._gridCanvas.style.visibility = "hidden"; | ||
522 | } else { | 537 | } else { |
523 | this._canvas.style.visibility = "visible"; | 538 | this._canvas.style.visibility = "visible"; |
524 | this._la |