diff options
Diffstat (limited to 'js/stage/stage.reel/stage.js')
-rwxr-xr-x | js/stage/stage.reel/stage.js | 82 |
1 files changed, 58 insertions, 24 deletions
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._layoutCanvas.style.visibility = "visible"; | 539 | this._layoutCanvas.style.visibility = "visible"; |
525 | this._drawingCanvas.style.visibility = "visible"; | 540 | this._drawingCanvas.style.visibility = "visible"; |
526 | 541 | this._gridCanvas.style.visibility = "visible"; | |
527 | } | 542 | } |
528 | } | 543 | } |
529 | }, | 544 | }, |
@@ -560,10 +575,17 @@ exports.Stage = Montage.create(Component, { | |||
560 | } | 575 | } |
561 | }, | 576 | }, |
562 | 577 | ||
578 | clearGridCanvas: { | ||
579 | value: function() { | ||
580 | this._gridContext.clearRect(0, 0, this._gridCanvas.width, this._gridCanvas.height); | ||
581 | } | ||
582 | }, | ||
583 | |||
563 | clearAllCanvas: { | 584 | clearAllCanvas: { |
564 | value: function() { | 585 | value: function() { |
565 | this._drawingContext.clearRect(0, 0, this._drawingCanvas.width, this._drawingCanvas.height); | 586 | this._drawingContext.clearRect(0, 0, this._drawingCanvas.width, this._drawingCanvas.height); |
566 | this.context.clearRect(0, 0, this.canvas.width, this.canvas.height); | 587 | this.context.clearRect(0, 0, this.canvas.width, this.canvas.height); |
588 | this._gridContext.clearRect(0, 0, this._gridCanvas.width, this._gridCanvas.height); | ||
567 | this.layout.clearCanvas(); | 589 | this.layout.clearCanvas(); |
568 | } | 590 | } |
569 | }, | 591 | }, |
@@ -1061,6 +1083,18 @@ exports.Stage = Montage.create(Component, { | |||
1061 | this.application.ninja.toolsSplitter.restore(); | 1083 | this.application.ninja.toolsSplitter.restore(); |
1062 | this.application.ninja.optionsSplitter.restore(); | 1084 | this.application.ninja.optionsSplitter.restore(); |
1063 | } | 1085 | } |
1086 | }, | ||
1087 | |||
1088 | initialize3DOnOpenDocument: { | ||
1089 | value: function() { | ||
1090 | |||
1091 | workingPlane = [0,0,1,0]; | ||
1092 | |||
1093 | this.snapManager._isCacheInvalid = true; | ||
1094 | this.snapManager.setupDragPlaneFromPlane (workingPlane); | ||
1095 | |||
1096 | this.drawUtils.initializeFromDocument(); | ||
1097 | } | ||
1064 | } | 1098 | } |
1065 | 1099 | ||
1066 | }); \ No newline at end of file | 1100 | }); \ No newline at end of file |