diff options
author | Eric Guzman | 2012-06-11 13:28:42 -0700 |
---|---|---|
committer | Eric Guzman | 2012-06-11 13:28:42 -0700 |
commit | 3a4727ffc350216a434a7c6977b6a23653b77780 (patch) | |
tree | c5dff306f8803c36a16163ba5df1e7f492e762b5 /js/stage/stage.reel/stage.js | |
parent | d6b46ba496c9c8974ae39bb476aea35bcd1ddaf1 (diff) | |
parent | 337efc667372326ae2f9984d89a47bb151016774 (diff) | |
download | ninja-3a4727ffc350216a434a7c6977b6a23653b77780.tar.gz |
Merge branch 'binding' of github.com:dhg637/ninja-internal into binding
Diffstat (limited to 'js/stage/stage.reel/stage.js')
-rwxr-xr-x | js/stage/stage.reel/stage.js | 178 |
1 files changed, 106 insertions, 72 deletions
diff --git a/js/stage/stage.reel/stage.js b/js/stage/stage.reel/stage.js index c7afb95c..30ee1e40 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,51 @@ 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; | ||
185 | //call configure false with the old document on the selected tool to tear down down any temp. stuff | ||
186 | this.application.ninja.toolsData.selectedToolInstance._configure(false); | ||
172 | } | 187 | } |
173 | 188 | ||
174 | ///// setting document via binding | 189 | this._currentDocument = value; |
175 | this._activeDocument = document; | ||
176 | 190 | ||
177 | }, | 191 | if(!value) { |
178 | enumerable : false | 192 | this.hideRulers(); |
193 | this.hideCanvas(true); | ||
194 | drawUtils._eltArray.length = 0; | ||
195 | drawUtils._planesArray.length = 0; | ||
196 | } else if(this._currentDocument.currentView === "design") { | ||
197 | this.restoreAllPanels(); | ||
198 | this.hideCanvas(false); | ||
199 | this.showRulers(); | ||
200 | |||
201 | this.clearAllCanvas(); | ||
202 | this.initWithDocument(); | ||
203 | } else { | ||
204 | this.collapseAllPanels(); | ||
205 | this.hideCanvas(true); | ||
206 | this.hideRulers(); | ||
207 | } | ||
208 | } | ||
179 | }, | 209 | }, |
180 | 210 | ||
181 | _userPaddingLeft: { value: 0 }, | 211 | _userPaddingLeft: { value: 0 }, |
@@ -186,8 +216,8 @@ exports.Stage = Montage.create(Component, { | |||
186 | set: function(value) { | 216 | set: function(value) { |
187 | this._userPaddingLeft = value; | 217 | this._userPaddingLeft = value; |
188 | this._documentOffsetLeft = -value; | 218 | this._documentOffsetLeft = -value; |
189 | this.application.ninja.currentDocument.model.documentRoot.ownerDocument.getElementsByTagName("HTML")[0].style["padding-left"] = -value + "px"; | 219 | this.currentDocument.model.documentRoot.ownerDocument.getElementsByTagName("HTML")[0].style["padding-left"] = -value + "px"; |
190 | this.userContentLeft = this._documentOffsetLeft; | 220 | this.userContentLeft = this._documentOffsetLeft - this._scrollLeft; |
191 | this.updatedStage = true; | 221 | this.updatedStage = true; |
192 | } | 222 | } |
193 | }, | 223 | }, |
@@ -197,8 +227,8 @@ exports.Stage = Montage.create(Component, { | |||
197 | set: function(value) { | 227 | set: function(value) { |
198 | this._userPaddingTop = value; | 228 | this._userPaddingTop = value; |
199 | this._documentOffsetTop = -value; | 229 | this._documentOffsetTop = -value; |
200 | this.application.ninja.currentDocument.model.documentRoot.ownerDocument.getElementsByTagName("HTML")[0].style["padding-top"] = -value + "px"; | 230 | this.currentDocument.model.documentRoot.ownerDocument.getElementsByTagName("HTML")[0].style["padding-top"] = -value + "px"; |
201 | this.userContentTop = this._documentOffsetTop; | 231 | this.userContentTop = this._documentOffsetTop - this._scrollTop; |
202 | this.updatedStage = true; | 232 | this.updatedStage = true; |
203 | } | 233 | } |
204 | }, | 234 | }, |
@@ -207,11 +237,14 @@ exports.Stage = Montage.create(Component, { | |||
207 | value: function() { | 237 | value: function() { |
208 | if(this.resizeCanvases) { | 238 | if(this.resizeCanvases) { |
209 | // TODO GET THE SCROLL SIZE FROM THE CSS -- 11 px | 239 | // TODO GET THE SCROLL SIZE FROM THE CSS -- 11 px |
210 | this._canvas.width = this._layoutCanvas.width = this._drawingCanvas.width = this.element.offsetWidth - 11 ; | 240 | 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; | 241 | this._canvas.height = this._layoutCanvas.height = this._drawingCanvas.height = this._gridCanvas.height = this.element.offsetHeight - 11;// - 26 - 26; |
212 | 242 | ||
213 | // Hack for now until a full component | 243 | // Hack for now until a full component |
214 | this.layout.draw(); | 244 | this.layout.draw(); |
245 | if(this.currentDocument && (this.currentDocument.currentView === "design")) { | ||
246 | this.layout.draw3DInfo(true); | ||
247 | } | ||
215 | } else if(this.updatedStage) { | 248 | } else if(this.updatedStage) { |
216 | this.layout.draw(); | 249 | this.layout.draw(); |
217 | this.layout.draw3DInfo(true); | 250 | this.layout.draw3DInfo(true); |
@@ -231,6 +264,7 @@ exports.Stage = Montage.create(Component, { | |||
231 | 264 | ||
232 | this._context = this._canvas.getContext("2d"); | 265 | this._context = this._canvas.getContext("2d"); |
233 | this._drawingContext= this._drawingCanvas.getContext("2d"); | 266 | this._drawingContext= this._drawingCanvas.getContext("2d"); |
267 | this._gridContext= this._gridCanvas.getContext("2d"); | ||
234 | 268 | ||
235 | // Setup event listeners | 269 | // Setup event listeners |
236 | this._drawingCanvas.addEventListener("mousedown", this, false); | 270 | this._drawingCanvas.addEventListener("mousedown", this, false); |
@@ -270,14 +304,18 @@ exports.Stage = Montage.create(Component, { | |||
270 | }, | 304 | }, |
271 | 305 | ||
272 | initWithDocument: { | 306 | initWithDocument: { |
273 | value: function(didSwitch) { | 307 | value: function() { |
274 | var designView = this.application.ninja.currentDocument.model.views.design; | 308 | var model = this.currentDocument.model, |
309 | designView = this.currentDocument.model.views.design, | ||
310 | didSwitch = false; | ||
275 | 311 | ||
276 | this.hideCanvas(false); | 312 | if(model.scrollLeft != null) { |
313 | didSwitch = true; | ||
314 | } | ||
277 | 315 | ||
278 | // Recalculate the canvas sizes because of splitter resizing | 316 | // Recalculate the canvas sizes because of splitter resizing |
279 | this._canvas.width = this._layoutCanvas.width = this._drawingCanvas.width = this.element.offsetWidth - 11 ; | 317 | 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; | 318 | this._canvas.height = this._layoutCanvas.height = this._drawingCanvas.height = this._gridCanvas.height = this.element.offsetHeight - 11; |
281 | 319 | ||
282 | designView.iframe.contentWindow.addEventListener("scroll", this, false); | 320 | designView.iframe.contentWindow.addEventListener("scroll", this, false); |
283 | 321 | ||
@@ -295,8 +333,7 @@ exports.Stage = Montage.create(Component, { | |||
295 | this._scrollLeft = 0; | 333 | this._scrollLeft = 0; |
296 | this._scrollTop = 0; | 334 | this._scrollTop = 0; |
297 | 335 | ||
298 | this.stageDeps.handleOpenDocument(); | 336 | this.initialize3DOnOpenDocument(); |
299 | this.layout.handleOpenDocument(); | ||
300 | 337 | ||
301 | if(designView._template) { | 338 | if(designView._template) { |
302 | var initialLeft = parseInt((this.canvas.width - designView._template.size.width)/2); | 339 | var initialLeft = parseInt((this.canvas.width - designView._template.size.width)/2); |
@@ -310,13 +347,12 @@ exports.Stage = Montage.create(Component, { | |||
310 | } | 347 | } |
311 | 348 | ||
312 | if(didSwitch) { | 349 | if(didSwitch) { |
313 | this.application.ninja.currentDocument.model.views.design.document.body.scrollLeft = this.application.ninja.currentDocument.model.scrollLeft; | 350 | 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; | 351 | this.currentDocument.model.views.design.document.body.scrollTop = this.currentDocument.model.scrollTop; |
315 | this.handleScroll(); | 352 | this.handleScroll(); |
316 | } else { | 353 | } else { |
317 | this.centerStage(); | 354 | this.centerStage(); |
318 | } | 355 | } |
319 | |||
320 | // TODO - We will need to modify this once we support switching between multiple documents | 356 | // TODO - We will need to modify this once we support switching between multiple documents |
321 | this.application.ninja.toolsData.selectedToolInstance._configure(true); | 357 | this.application.ninja.toolsData.selectedToolInstance._configure(true); |
322 | } | 358 | } |
@@ -425,9 +461,9 @@ exports.Stage = Montage.create(Component, { | |||
425 | handleMousewheel: { | 461 | handleMousewheel: { |
426 | value: function(event) { | 462 | value: function(event) { |
427 | if(event._event.wheelDelta > 0) { | 463 | if(event._event.wheelDelta > 0) { |
428 | this.application.ninja.currentDocument.model.views.design.document.body.scrollTop -= 20; | 464 | this.currentDocument.model.views.design.document.body.scrollTop -= 20; |
429 | } else { | 465 | } else { |
430 | this.application.ninja.currentDocument.model.views.design.document.body.scrollTop += 20; | 466 | this.currentDocument.model.views.design.document.body.scrollTop += 20; |
431 | } | 467 | } |
432 | } | 468 | } |
433 | }, | 469 | }, |
@@ -495,8 +531,8 @@ exports.Stage = Montage.create(Component, { | |||
495 | handleScroll: { | 531 | handleScroll: { |
496 | value: function() { | 532 | value: function() { |
497 | 533 | ||
498 | this._scrollLeft = this.application.ninja.currentDocument.model.views.design.document.body.scrollLeft; | 534 | this._scrollLeft = this.currentDocument.model.views.design.document.body.scrollLeft; |
499 | this._scrollTop = this.application.ninja.currentDocument.model.views.design.document.body.scrollTop; | 535 | this._scrollTop = this.currentDocument.model.views.design.document.body.scrollTop; |
500 | 536 | ||
501 | this.userContentLeft = this._documentOffsetLeft - this._scrollLeft; | 537 | this.userContentLeft = this._documentOffsetLeft - this._scrollLeft; |
502 |