diff options
Diffstat (limited to 'js/stage')
-rwxr-xr-x | js/stage/layout.js | 2 | ||||
-rwxr-xr-x | js/stage/stage-deps.js | 10 | ||||
-rwxr-xr-x | js/stage/stage.reel/stage.html | 3 | ||||
-rwxr-xr-x | js/stage/stage.reel/stage.js | 116 |
4 files changed, 100 insertions, 31 deletions
diff --git a/js/stage/layout.js b/js/stage/layout.js index 0a76dbe5..9c5e2167 100755 --- a/js/stage/layout.js +++ b/js/stage/layout.js | |||
@@ -156,7 +156,7 @@ exports.Layout = Montage.create(Component, { | |||
156 | drawTagOutline: { | 156 | drawTagOutline: { |
157 | value: function (item) { | 157 | value: function (item) { |
158 | 158 | ||
159 | if(!item || (item.nodeType !== 1)) return; | 159 | if(!item || !this.application.ninja.selectionController.isNodeTraversable(item)) return; |
160 | 160 | ||
161 | // TODO Bind the layoutview mode to the current document | 161 | // TODO Bind the layoutview mode to the current document |
162 | // var mode = this.application.ninja.currentDocument.layoutMode; | 162 | // var mode = this.application.ninja.currentDocument.layoutMode; |
diff --git a/js/stage/stage-deps.js b/js/stage/stage-deps.js index a71b77be..1825eb06 100755 --- a/js/stage/stage-deps.js +++ b/js/stage/stage-deps.js | |||
@@ -52,7 +52,7 @@ exports.StageDeps = Montage.create(Component, { | |||
52 | userContentLeft: { | 52 | userContentLeft: { |
53 | get: function() { return this._userContentLeft; }, | 53 | get: function() { return this._userContentLeft; }, |
54 | set: function(value) { | 54 | set: function(value) { |
55 | if(value) { | 55 | if(value != null) { |
56 | viewUtils.setUserContentLeft(value); | 56 | viewUtils.setUserContentLeft(value); |
57 | } | 57 | } |
58 | } | 58 | } |
@@ -65,7 +65,7 @@ exports.StageDeps = Montage.create(Component, { | |||
65 | userContentTop: { | 65 | userContentTop: { |
66 | get: function() { return this._userContentTop; }, | 66 | get: function() { return this._userContentTop; }, |
67 | set: function(value) { | 67 | set: function(value) { |
68 | if(value) { | 68 | if(value != null) { |
69 | viewUtils.setUserContentTop(value); | 69 | viewUtils.setUserContentTop(value); |
70 | } | 70 | } |
71 | } | 71 | } |
@@ -95,12 +95,6 @@ exports.StageDeps = Montage.create(Component, { | |||
95 | handleAppLoaded: { | 95 | handleAppLoaded: { |
96 | value: function() { | 96 | value: function() { |
97 | 97 | ||
98 | Object.defineBinding(this, "currentDocument", { | ||
99 | boundObject: this.application.ninja, | ||
100 | boundObjectPropertyPath: "currentDocument", | ||
101 | oneway: true | ||
102 | }); | ||
103 | |||
104 | Object.defineBinding(this, "userContentLeft", { | 98 | Object.defineBinding(this, "userContentLeft", { |
105 | boundObject: this.stage, | 99 | boundObject: this.stage, |
106 | boundObjectPropertyPath: "_userContentLeft", | 100 | boundObjectPropertyPath: "_userContentLeft", |
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 b181dc70..cac99326 100755 --- a/js/stage/stage.reel/stage.js +++ b/js/stage/stage.reel/stage.js | |||
@@ -118,6 +118,9 @@ exports.Stage = Montage.create(Component, { | |||
118 | _userContentTop: { value: 0 }, | 118 | _userContentTop: { value: 0 }, |
119 | _userContentBorder: { value: 0 }, | 119 | _userContentBorder: { value: 0 }, |
120 | 120 | ||
121 | _maxHorizontalScroll: { value: 0 }, | ||
122 | _maxVerticalScroll: { value: 0 }, | ||
123 | |||
121 | documentRoot: { | 124 | documentRoot: { |
122 | get: function () { return this._documentRoot; }, | 125 | get: function () { return this._documentRoot; }, |
123 | set: function(value) { this._documentRoot = value; } | 126 | set: function(value) { this._documentRoot = value; } |
@@ -161,6 +164,60 @@ exports.Stage = Montage.create(Component, { | |||
161 | set: function(value) { this._userContentBorder = value; } | 164 | set: function(value) { this._userContentBorder = value; } |
162 | }, | 165 | }, |
163 | 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 | |||
164 | willDraw: { | 221 | willDraw: { |
165 | value: function() { | 222 | value: function() { |
166 | if(this.resizeCanvases) { | 223 | if(this.resizeCanvases) { |
@@ -261,10 +318,12 @@ exports.Stage = Montage.create(Component, { | |||
261 | 318 | ||
262 | this._scrollLeft = 0; | 319 | this._scrollLeft = 0; |
263 | this._scrollTop = 0; | 320 | this._scrollTop = 0; |
264 | this._userContentLeft = 0; | 321 | this._userContentLeft = this._documentOffsetLeft; |
265 | this._userContentTop = 0; | 322 | this._userContentTop = this._documentOffsetTop; |
266 | 323 | ||
267 | this.application.ninja.currentDocument._window.addEventListener("scroll", this, false); | 324 | this._maxHorizontalScroll = this._documentRoot.scrollWidth - this._canvas.width - 11; |
325 | this._maxVerticalScroll = this._documentRoot.scrollHeight - this._canvas.height - 11; | ||
326 | this.application.ninja.currentDocument.model.views.design.iframe.contentWindow.addEventListener("scroll", this, false); | ||
268 | } | 327 | } |
269 | 328 | ||
270 | 329 | ||
@@ -272,7 +331,7 @@ exports.Stage = Montage.create(Component, { | |||
272 | // 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 |
273 | this.application.ninja.toolsData.selectedToolInstance._configure(true); | 332 | this.application.ninja.toolsData.selectedToolInstance._configure(true); |
274 | 333 | ||
275 | this.addEventListener("change@appModel.show3dGrid", this, false); | 334 | this.addPropertyChangeListener("appModel.show3dGrid", this, false); |
276 | 335 | ||
277 | this.layout.handleOpenDocument(); | 336 | this.layout.handleOpenDocument(); |
278 | } | 337 | } |
@@ -281,10 +340,9 @@ exports.Stage = Montage.create(Component, { | |||
281 | /** | 340 | /** |
282 | * Event handler for the change @ 3DGrid | 341 | * Event handler for the change @ 3DGrid |
283 | */ | 342 | */ |
284 | handleEvent: { | 343 | handleChange: { |
285 | value: function(e) { | 344 | value: function(notification) { |
286 | if(e.type === "change@appModel.show3dGrid") { | 345 | if("appModel.show3dGrid" === notification.currentPropertyPath) { |
287 | |||
288 | if(this.appModel.show3dGrid) { | 346 | if(this.appModel.show3dGrid) { |
289 | 347 | ||
290 | drawUtils.drawXY = true; | 348 | drawUtils.drawXY = true; |
@@ -382,9 +440,9 @@ exports.Stage = Montage.create(Component, { | |||
382 | handleMousewheel: { | 440 | handleMousewheel: { |
383 | value: function(event) { | 441 | value: function(event) { |
384 | if(event._event.wheelDelta > 0) { | 442 | if(event._event.wheelDelta > 0) { |
385 | this._iframeContainer.scrollTop -= 20; | 443 | this.application.ninja.currentDocument.model.views.design.document.body.scrollTop -= 20; |
386 | } else { | 444 | } else { |
387 | this._iframeContainer.scrollTop += 20; | 445 | this.application.ninja.currentDocument.model.views.design.document.body.scrollTop += 20; |
388 | } | 446 | } |
389 | } | 447 | } |
390 | }, | 448 | }, |
@@ -459,11 +517,17 @@ exports.Stage = Montage.create(Component, { | |||
459 | this.userContentLeft = this._documentOffsetLeft - this._scrollLeft + this._userContentBorder; | 517 | this.userContentLeft = this._documentOffsetLeft - this._scrollLeft + this._userContentBorder; |
460 | this.userContentTop = this._documentOffsetTop - this._scrollTop + this._userContentBorder; | 518 | this.userContentTop = this._documentOffsetTop - this._scrollTop + this._userContentBorder; |
461 | } else { | 519 | } else { |
462 | this._scrollLeft = this.application.ninja.currentDocument.documentRoot.scrollLeft; | 520 | this._scrollLeft = this.application.ninja.currentDocument.model.views.design.document.body.scrollLeft; |
463 | this._scrollTop = this.application.ninja.currentDocument.documentRoot.scrollTop; | 521 | this._scrollTop = this.application.ninja.currentDocument.model.views.design.document.body.scrollTop; |
522 | |||
523 | this.userContentLeft = this._documentOffsetLeft - this._scrollLeft; | ||
524 | this.userContentTop = this._documentOffsetTop - this._scrollTop; | ||
464 | 525 | ||
465 | this.userContentLeft = -this._scrollLeft; | 526 | // TODO - scroll events are not dependable. We may need to use a timer to simulate |
466 | this.userContentTop = -this._scrollTop; | 527 | // scrollBegin and scrollEnd. For now, the Pan Tool will keep track of the stage's scroll values |
528 | // on mouse down. | ||
529 | // this._maxHorizontalScroll = this._documentRoot.scrollWidth - this._canvas.width - 11; | ||
530 | // this._maxVerticalScroll = this._documentRoot.scrollHeight - this._canvas.height - 11; | ||
467 | } | 531 | } |
468 | 532 | ||
469 | // Need to clear the snap cache and set up the drag plane | 533 | // Need to clear the snap cache and set up the drag plane |
@@ -501,11 +565,16 @@ exports.Stage = Montage.create(Component, { | |||
501 | */ | 565 | */ |