diff options
Diffstat (limited to 'js/stage/stage.reel')
-rwxr-xr-x | js/stage/stage.reel/stage.html | 3 | ||||
-rwxr-xr-x | js/stage/stage.reel/stage.js | 73 |
2 files changed, 66 insertions, 10 deletions
diff --git a/js/stage/stage.reel/stage.html b/js/stage/stage.reel/stage.html index 30c3d231..88cd6149 100755 --- a/js/stage/stage.reel/stage.html +++ b/js/stage/stage.reel/stage.html | |||
@@ -22,6 +22,9 @@ | |||
22 | "prototype": "js/stage/stage-deps", | 22 | "prototype": "js/stage/stage-deps", |
23 | "properties": { | 23 | "properties": { |
24 | "stage": {"@": "owner"} | 24 | "stage": {"@": "owner"} |
25 | }, | ||
26 | "bindings": { | ||
27 | "currentDocument": {"<-": "@owner.activeDocument"} | ||
25 | } | 28 | } |
26 | }, | 29 | }, |
27 | 30 | ||
diff --git a/js/stage/stage.reel/stage.js b/js/stage/stage.reel/stage.js index deed4112..cac99326 100755 --- a/js/stage/stage.reel/stage.js +++ b/js/stage/stage.reel/stage.js | |||
@@ -164,6 +164,60 @@ exports.Stage = Montage.create(Component, { | |||
164 | set: function(value) { this._userContentBorder = value; } | 164 | set: function(value) { this._userContentBorder = value; } |
165 | }, | 165 | }, |
166 | 166 | ||
167 | _activeDocument : { | ||
168 | value : null, | ||
169 | enumerable : false | ||
170 | }, | ||
171 | |||
172 | activeDocument : { | ||
173 | get : function() { | ||
174 | return this._activeDocument; | ||
175 | }, | ||
176 | set : function(document) { | ||
177 | ///// If the document is null set default stylesheets to null | ||
178 | |||
179 | if(!document) { | ||
180 | return false; | ||
181 | } | ||
182 | |||
183 | ///// setting document via binding | ||
184 | this._activeDocument = document; | ||
185 | |||
186 | }, | ||
187 | enumerable : false | ||
188 | }, | ||
189 | |||
190 | _userPaddingLeft: { value: 0 }, | ||
191 | _userPaddingTop: { value: 0 }, | ||
192 | |||
193 | userPaddingLeft: { | ||
194 | get: function() { return this._userPaddingLeft; }, | ||
195 | set: function(value) { | ||
196 | this._userPaddingLeft = value; | ||
197 | this._documentOffsetLeft = -value; | ||
198 | if(!this._documentRoot) { | ||
199 | this._documentRoot = this.application.ninja.currentDocument.documentRoot; | ||
200 | } | ||
201 | this._documentRoot.ownerDocument.getElementsByTagName("HTML")[0].style["padding-left"] = -value + "px"; | ||
202 | this.userContentLeft = this._documentOffsetLeft; | ||
203 | this.updatedStage = true; | ||
204 | } | ||
205 | }, | ||
206 | |||
207 | userPaddingTop: { | ||
208 | get: function() { return this._userPaddingTop; }, | ||
209 | set: function(value) { | ||
210 | this._userPaddingTop = value; | ||
211 | this._documentOffsetTop = -value; | ||
212 | if(!this._documentRoot) { | ||
213 | this._documentRoot = this.application.ninja.currentDocument.documentRoot; | ||
214 | } | ||
215 | this._documentRoot.ownerDocument.getElementsByTagName("HTML")[0].style["padding-top"] = -value + "px"; | ||
216 | this.userContentTop = this._documentOffsetTop; | ||
217 | this.updatedStage = true; | ||
218 | } | ||
219 | }, | ||
220 | |||
167 | willDraw: { | 221 | willDraw: { |
168 | value: function() { | 222 | value: function() { |
169 | if(this.resizeCanvases) { | 223 | if(this.resizeCanvases) { |
@@ -264,8 +318,8 @@ exports.Stage = Montage.create(Component, { | |||
264 | 318 | ||
265 | this._scrollLeft = 0; | 319 | this._scrollLeft = 0; |
266 | this._scrollTop = 0; | 320 | this._scrollTop = 0; |
267 | this._userContentLeft = 0; | 321 | this._userContentLeft = this._documentOffsetLeft; |
268 | this._userContentTop = 0; | 322 | this._userContentTop = this._documentOffsetTop; |
269 | 323 | ||
270 | this._maxHorizontalScroll = this._documentRoot.scrollWidth - this._canvas.width - 11; | 324 | this._maxHorizontalScroll = this._documentRoot.scrollWidth - this._canvas.width - 11; |
271 | this._maxVerticalScroll = this._documentRoot.scrollHeight - this._canvas.height - 11; | 325 | this._maxVerticalScroll = this._documentRoot.scrollHeight - this._canvas.height - 11; |
@@ -277,7 +331,7 @@ exports.Stage = Montage.create(Component, { | |||
277 | // TODO - We will need to modify this once we support switching between multiple documents | 331 | // TODO - We will need to modify this once we support switching between multiple documents |
278 | this.application.ninja.toolsData.selectedToolInstance._configure(true); | 332 | this.application.ninja.toolsData.selectedToolInstance._configure(true); |
279 | 333 | ||
280 | this.addEventListener("change@appModel.show3dGrid", this, false); | 334 | this.addPropertyChangeListener("appModel.show3dGrid", this, false); |
281 | 335 | ||
282 | this.layout.handleOpenDocument(); | 336 | this.layout.handleOpenDocument(); |
283 | } | 337 | } |
@@ -286,10 +340,9 @@ exports.Stage = Montage.create(Component, { | |||
286 | /** | 340 | /** |
287 | * Event handler for the change @ 3DGrid | 341 | * Event handler for the change @ 3DGrid |
288 | */ | 342 | */ |
289 | handleEvent: { | 343 | handleChange: { |
290 | value: function(e) { | 344 | value: function(notification) { |
291 | if(e.type === "change@appModel.show3dGrid") { | 345 | if("appModel.show3dGrid" === notification.currentPropertyPath) { |
292 | |||
293 | if(this.appModel.show3dGrid) { | 346 | if(this.appModel.show3dGrid) { |
294 | 347 | ||
295 | drawUtils.drawXY = true; | 348 | drawUtils.drawXY = true; |
@@ -467,8 +520,8 @@ exports.Stage = Montage.create(Component, { | |||
467 | this._scrollLeft = this.application.ninja.currentDocument.model.views.design.document.body.scrollLeft; | 520 | this._scrollLeft = this.application.ninja.currentDocument.model.views.design.document.body.scrollLeft; |
468 | this._scrollTop = this.application.ninja.currentDocument.model.views.design.document.body.scrollTop; | 521 | this._scrollTop = this.application.ninja.currentDocument.model.views.design.document.body.scrollTop; |
469 | 522 | ||
470 | this.userContentLeft = -this._scrollLeft; | 523 | this.userContentLeft = this._documentOffsetLeft - this._scrollLeft; |
471 | this.userContentTop = -this._scrollTop; | 524 | this.userContentTop = this._documentOffsetTop - this._scrollTop; |
472 | 525 | ||
473 | // TODO - scroll events are not dependable. We may need to use a timer to simulate | 526 | // TODO - scroll events are not dependable. We may need to use a timer to simulate |
474 | // scrollBegin and scrollEnd. For now, the Pan Tool will keep track of the stage's scroll values | 527 | // scrollBegin and scrollEnd. For now, the Pan Tool will keep track of the stage's scroll values |
@@ -559,7 +612,7 @@ exports.Stage = Montage.create(Component, { | |||
559 | var point, element, | 612 | var point, element, |
560 | docView = this.application.ninja.currentDocument.model.views.design; | 613 | docView = this.application.ninja.currentDocument.model.views.design; |
561 | 614 | ||
562 | point = webkitConvertPointFromPageToNode(this.canvas, new WebKitPoint(position.pageX - docView.iframe.contentWindow.pageXOffset, position.pageY - docView.iframe.contentWindow.pageYOffset)); | 615 | point = webkitConvertPointFromPageToNode(this.canvas, new WebKitPoint(position.pageX - docView.iframe.contentWindow.pageXOffset + this.documentOffsetLeft, position.pageY - docView.iframe.contentWindow.pageYOffset + this.documentOffsetTop)); |
563 | element = this.application.ninja.currentDocument.model.views.design.getElementFromPoint(point.x - this.userContentLeft,point.y - this.userContentTop); | 616 | element = this.application.ninja.currentDocument.model.views.design.getElementFromPoint(point.x - this.userContentLeft,point.y - this.userContentTop); |
564 | 617 | ||
565 | if(!element) debugger; | 618 | if(!element) debugger; |