diff options
author | Valerio Virgillito | 2012-06-04 10:20:57 -0700 |
---|---|---|
committer | Valerio Virgillito | 2012-06-04 10:20:57 -0700 |
commit | c1ec69879028220b0c3f11ad6e24035bf527802c (patch) | |
tree | 043bfe4ec9e08f4f598a4845ae5fbcddacc7c8fb /js/stage/stage.reel/stage.js | |
parent | 3abba04025dbc0daadb08184833a2558c442b8e1 (diff) | |
parent | 266460e52831c5b3a3473be420756fd88bb8aced (diff) | |
download | ninja-c1ec69879028220b0c3f11ad6e24035bf527802c.tar.gz |
Merge pull request #264 from mencio/document-bindings-fix
Document bindings fix - Changing the documents architecture to use bindings instead of events
Diffstat (limited to 'js/stage/stage.reel/stage.js')
-rwxr-xr-x | js/stage/stage.reel/stage.js | 175 |
1 files changed, 104 insertions, 71 deletions
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 | 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"; |
201 | this.userContentTop = this._documentOffsetTop; | 229 | this.userContentTop = this._documentOffsetTop - this._scrollTop; |
202 | this.updatedStage = true; | 230 | this.updatedStage = true; |
203 | } | 231 | } |
204 | }, | 232 | }, |
@@ -207,11 +235,14 @@ exports.Stage = Montage.create(Component, { | |||
207 | value: function() { | 235 | value: function() { |
208 | if(this.resizeCanvases) { | 236 | if(this.resizeCanvases) { |
209 | // TODO GET THE SCROLL SIZE FROM THE CSS -- 11 px | 237 | // TODO GET THE SCROLL SIZE FROM THE CSS -- 11 px |
210 | this._canvas.width = this._layoutCanvas.width = this._drawingCanvas.width = this.element.offsetWidth - 11 ; | 238 | 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; | 239 | this._canvas.height = this._layoutCanvas.height = this._drawingCanvas.height = this._gridCanvas.height = this.element.offsetHeight - 11;// - 26 - 26; |
212 | 240 | ||
213 | // Hack for now until a full component | 241 | // Hack for now until a full component |
214 | this.layout.draw(); | 242 | this.layout.draw(); |
243 | if(this.currentDocument) { | ||
244 | this.layout.draw3DInfo(true); | ||
245 | } | ||
215 | } else if(this.updatedStage) { | 246 | } else if(this.updatedStage) { |
216 | this.layout.draw(); | 247 | this.layout.draw(); |
217 | this.layout.draw3DInfo(true); | 248 | this.layout.draw3DInfo(true); |
@@ -231,6 +262,7 @@ exports.Stage = Montage.create(Component, { | |||
231 | 262 | ||
232 | this._context = this._canvas.getContext("2d"); | 263 | this._context = this._canvas.getContext("2d"); |
233 | this._drawingContext= this._drawingCanvas.getContext("2d"); | 264 | this._drawingContext= this._drawingCanvas.getContext("2d"); |
265 | this._gridContext= this._gridCanvas.getContext("2d"); | ||
234 | 266 | ||
235 | // Setup event listeners | 267 | // Setup event listeners |
236 | this._drawingCanvas.addEventListener("mousedown", this, false); | 268 | this._drawingCanvas.addEventListener("mousedown", this, false); |
@@ -270,14 +302,18 @@ exports.Stage = Montage.create(Component, { | |||
270 | }, | 302 | }, |
271 | 303 | ||
272 | initWithDocument: { | 304 | initWithDocument: { |
273 | value: function(didSwitch) { | 305 | value: function() { |
274 | var designView = this.application.ninja.currentDocument.model.views.design; | 306 | var model = this.currentDocument.model, |
307 | designView = this.currentDocument.model.views.design, | ||
308 | didSwitch = false; | ||
275 | 309 | ||
276 | this.hideCanvas(false); | 310 | if(model.scrollLeft != null) { |
311 | didSwitch = true; | ||
312 | } | ||
277 | 313 | ||
278 | // Recalculate the canvas sizes because of splitter resizing | 314 | // Recalculate the canvas sizes because of splitter resizing |
279 | this._canvas.width = this._layoutCanvas.width = this._drawingCanvas.width = this.element.offsetWidth - 11 ; | 315 | 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; | 316 | this._canvas.height = this._layoutCanvas.height = this._drawingCanvas.height = this._gridCanvas.height = this.element.offsetHeight - 11; |
281 | 317 | ||
282 | designView.iframe.contentWindow.addEventListener("scroll", this, false); | 318 | designView.iframe.contentWindow.addEventListener("scroll", this, false); |
283 | 319 | ||
@@ -295,8 +331,7 @@ exports.Stage = Montage.create(Component, { | |||
295 | this._scrollLeft = 0; | 331 | this._scrollLeft = 0; |
296 | this._scrollTop = 0; | 332 | this._scrollTop = 0; |
297 | 333 | ||
298 | this.stageDeps.handleOpenDocument(); | 334 | this.initialize3DOnOpenDocument(); |
299 | this.layout.handleOpenDocument(); | ||
300 | 335 | ||
301 | if(designView._template) { | 336 | if(designView._template) { |
302 | var initialLeft = parseInt((this.canvas.width - designView._template.size.width)/2); | 337 | var initialLeft = parseInt((this.canvas.width - designView._template.size.width)/2); |
@@ -310,8 +345,8 @@ exports.Stage = Montage.create(Component, { | |||
310 | } | 345 | } |
311 | 346 | ||
312 | if(didSwitch) { | 347 | if(didSwitch) { |
313 | this.application.ninja.currentDocument.model.views.design.document.body.scrollLeft = this.application.ninja.currentDocument.model.scrollLeft; | 348 | this.currentDocument.model.views.design.document.body.scrollLeft = this.currentDocument.model.scrollLeft; |
314 | this.application.ninja.currentDocument.model.views.design.document.body.scrollTop = this.application.ninja.currentDocument.model.scrollTop; | 349 | this.currentDocument.model.views.design.document.body.scrollTop = this.currentDocument.model.scrollTop; |
315 | this.handleScroll(); | 350 | this.handleScroll(); |
316 | } else { | 351 | } else { |
317 | this.centerStage(); | 352 | this.centerStage(); |
@@ -425,9 +460,9 @@ exports.Stage = Montage.create(Component, { | |||
425 | handleMousewheel: { | 460 | handleMousewheel: { |
426 | value: function(event) { | 461 | value: function(event) { |
427 | if(event._event.wheelDelta > 0) { | 462 | if(event._event.wheelDelta > 0) { |
428 | this.application.ninja.currentDocument.model.views.design.document.body.scrollTop -= 20; | 463 | this.currentDocument.model.views.design.document.body.scrollTop -= 20; |
429 | } else { | 464 | } else { |
430 | this.application.ninja.currentDocument.model.views.design.document.body.scrollTop += 20; | 465 | this.currentDocument.model.views.design.document.body.scrollTop += 20; |
431 | } | 466 | } |
432 | } | 467 | } |
433 | }, | 468 | }, |
@@ -495,8 +530,8 @@ exports.Stage = Montage.create(Component, { | |||
495 | handleScroll: { | 530 | handleScroll: { |
496 | value: function() { | 531 | value: function() { |
497 | 532 | ||
498 | this._scrollLeft = this.application.ninja.currentDocument.model.views.design.document.body.scrollLeft; | 533 | this._scrollLeft = this.currentDocument.model.views.design.document.body.scrollLeft; |
499 | this._scrollTop = this.application.ninja.currentDocument.model.views.design.document.body.scrollTop; | 534 | this._scrollTop = this.currentDocument.model.views.design.document.body.scrollTop; |
500 | 535 | ||
501 | this.userContentLeft = this._documentOffsetLeft - this._scrollLeft; | 536 | this.userContentLeft = this._documentOffsetLeft - this._scrollLeft; |
502 | this.userContentTop = this._documentOffsetTop - this._scrollTop; | 537 | this.userContentTop = this._documentOffsetTop - this._scrollTop; |
@@ -519,11 +554,12 @@ exports.Stage = Montage.create(Component, { | |||
519 | this._canvas.style.visibility = "hidden"; | 554 | this._canvas.style.visibility = "hidden"; |
520 | this._layoutCanvas.style.visibility = "hidden"; | 555 | this._layoutCanvas.style.visibility = "hidden"; |
521 | this._drawingCanvas.style.visibility = "hidden"; | 556 | this._drawingCanvas.style.visibility = "hidden"; |
557 | this._gridCanvas.style.visibility = "hidden"; | ||
522 | } else { | 558 | } else { |
5 |