aboutsummaryrefslogtreecommitdiff
diff options
context:
space:
mode:
authorValerio Virgillito2012-05-18 14:01:00 -0700
committerValerio Virgillito2012-05-18 14:01:00 -0700
commit66edf78c7e5df11218ef733686965beab05c7c7d (patch)
treedc3ce4dd828501c88de7c275b6d04efa8972c209
parent24d1873302b2fffc25d254e15e8aa36f59eedb88 (diff)
downloadninja-66edf78c7e5df11218ef733686965beab05c7c7d.tar.gz
fixing a scrolling issue when multiple documents are switched
Signed-off-by: Valerio Virgillito <valerio@motorola.com>
-rwxr-xr-xjs/document/document-html.js11
-rwxr-xr-xjs/document/models/html.js17
-rwxr-xr-xjs/helper-classes/3D/view-utils.js9
-rwxr-xr-xjs/stage/stage.reel/stage.js69
4 files changed, 40 insertions, 66 deletions
diff --git a/js/document/document-html.js b/js/document/document-html.js
index 0037c94d..983da966 100755
--- a/js/document/document-html.js
+++ b/js/document/document-html.js
@@ -139,7 +139,11 @@ exports.HtmlDocument = Montage.create(Component, {
139 //this.gridVerticalSpacing = this.application.ninja.stage.drawUtils.gridVerticalSpacing; 139 //this.gridVerticalSpacing = this.application.ninja.stage.drawUtils.gridVerticalSpacing;
140 140
141 // Serialize the current scroll position 141 // Serialize the current scroll position
142 // TODO: Implement 142 this.model.scrollLeft = this.application.ninja.stage._scrollLeft;
143 this.model.scrollTop = this.application.ninja.stage._scrollTop;
144 this.model.userContentLeft = this.application.ninja.stage._userContentLeft;
145 this.model.userContentTop = this.application.ninja.stage._userContentTop;
146
143 147
144 // Serialize the selection 148 // Serialize the selection
145 this.model.selection = this.application.ninja.selectedElements.slice(0); 149 this.model.selection = this.application.ninja.selectedElements.slice(0);
@@ -163,7 +167,10 @@ exports.HtmlDocument = Montage.create(Component, {
163 //this.application.ninja.stage.drawUtils.gridVerticalSpacing = this.gridVerticalSpacing; 167 //this.application.ninja.stage.drawUtils.gridVerticalSpacing = this.gridVerticalSpacing;
164 168
165 // Deserialize the current scroll position 169 // Deserialize the current scroll position
166 // TODO: Implement 170 this.application.ninja.stage._scrollLeft = this.model.scrollLeft;
171 this.application.ninja.stage._scrollTop = this.model.scrollTop;
172 this.application.ninja.stage._userContentLeft = this.model.userContentLeft;
173 this.application.ninja.stage._userContentTop = this.model.userContentTop;
167 174
168 this.application.ninja.selectedElements = this.model.selection.slice(0); 175 this.application.ninja.selectedElements = this.model.selection.slice(0);
169 176
diff --git a/js/document/models/html.js b/js/document/models/html.js
index 67457863..a97b4b5a 100755
--- a/js/document/models/html.js
+++ b/js/document/models/html.js
@@ -28,6 +28,23 @@ exports.HtmlDocumentModel = Montage.create(BaseDocumentModel, {
28 value: false 28 value: false
29 }, 29 },
30 //////////////////////////////////////////////////////////////////// 30 ////////////////////////////////////////////////////////////////////
31 //
32 scrollLeft: {
33 value: null
34 },
35
36 scrollTop: {
37 value: null
38 },
39
40 userContentLeft: {
41 value: null
42 },
43
44 userContentTop: {
45 value: null
46 },
47 ////////////////////////////////////////////////////////////////////
31 // 48 //
32 baseHref: { 49 baseHref: {
33 value: null 50 value: null
diff --git a/js/helper-classes/3D/view-utils.js b/js/helper-classes/3D/view-utils.js
index 20f61be1..75530af3 100755
--- a/js/helper-classes/3D/view-utils.js
+++ b/js/helper-classes/3D/view-utils.js
@@ -1303,15 +1303,6 @@ exports.ViewUtils = Montage.create(Component, {
1303// MISCELLANEOUS 1303// MISCELLANEOUS
1304// event.layerX/Y: var pt = viewUtils.getMousePoint(event); 1304// event.layerX/Y: var pt = viewUtils.getMousePoint(event);
1305 1305
1306 getStageDimension: {
1307 value: function()
1308 {
1309 var width = parseInt(this.application.ninja.stage.documentRoot.elementModel.stageDimension.style.getProperty("width"));
1310 var height= parseInt(this.application.ninja.stage.documentRoot.elementModel.stageDimension.style.getProperty("height"));
1311 return[width,height];
1312 }
1313 },
1314
1315 getStage: { 1306 getStage: {
1316 value: function() 1307 value: function()
1317 { 1308 {
diff --git a/js/stage/stage.reel/stage.js b/js/stage/stage.reel/stage.js
index 8da89fb9..73d3aaf4 100755
--- a/js/stage/stage.reel/stage.js
+++ b/js/stage/stage.reel/stage.js
@@ -108,7 +108,6 @@ exports.Stage = Montage.create(Component, {
108 // We will set this to false while moving objects to improve performance 108 // We will set this to false while moving objects to improve performance
109 showSelectionBounds: { value: true }, 109 showSelectionBounds: { value: true },
110 110
111 _documentRoot: { value: null },
112 _viewport: { value: null }, 111 _viewport: { value: null },
113 _documentOffsetLeft: { value: 0 }, 112 _documentOffsetLeft: { value: 0 },
114 _documentOffsetTop: { value: 0 }, 113 _documentOffsetTop: { value: 0 },
@@ -121,11 +120,6 @@ exports.Stage = Montage.create(Component, {
121 _maxHorizontalScroll: { value: 0 }, 120 _maxHorizontalScroll: { value: 0 },
122 _maxVerticalScroll: { value: 0 }, 121 _maxVerticalScroll: { value: 0 },
123 122
124 documentRoot: {
125 get: function () { return this._documentRoot; },
126 set: function(value) { this._documentRoot = value; }
127 },
128
129 viewport: { 123 viewport: {
130 get: function () { return this._viewport; }, 124 get: function () { return this._viewport; },
131 set: function(value) { this._viewport = value; } 125 set: function(value) { this._viewport = value; }
@@ -195,10 +189,7 @@ exports.Stage = Montage.create(Component, {
195 set: function(value) { 189 set: function(value) {
196 this._userPaddingLeft = value; 190 this._userPaddingLeft = value;
197 this._documentOffsetLeft = -value; 191 this._documentOffsetLeft = -value;
198 if(!this._documentRoot) { 192 this.application.ninja.currentDocument.documentRoot.ownerDocument.getElementsByTagName("HTML")[0].style["padding-left"] = -value + "px";
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; 193 this.userContentLeft = this._documentOffsetLeft;
203 this.updatedStage = true; 194 this.updatedStage = true;
204 } 195 }
@@ -209,10 +200,7 @@ exports.Stage = Montage.create(Component, {
209 set: function(value) { 200 set: function(value) {
210 this._userPaddingTop = value; 201 this._userPaddingTop = value;
211 this._documentOffsetTop = -value; 202 this._documentOffsetTop = -value;
212 if(!this._documentRoot) { 203 this.application.ninja.currentDocument.documentRoot.ownerDocument.getElementsByTagName("HTML")[0].style["padding-top"] = -value + "px";
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; 204 this.userContentTop = this._documentOffsetTop;
217 this.updatedStage = true; 205 this.updatedStage = true;
218 } 206 }
@@ -287,46 +275,17 @@ exports.Stage = Montage.create(Component, {
287 this._canvas.width = this._layoutCanvas.width = this._drawingCanvas.width = this.element.offsetWidth - 11 ; 275 this._canvas.width = this._layoutCanvas.width = this._drawingCanvas.width = this.element.offsetWidth - 11 ;
288 this._canvas.height = this._layoutCanvas.height = this._drawingCanvas.height = this.element.offsetHeight - 11; 276 this._canvas.height = this._layoutCanvas.height = this._drawingCanvas.height = this.element.offsetHeight - 11;
289 277
290 this._documentRoot = this.application.ninja.currentDocument.documentRoot;
291
292 // Hardcode this value so that it does not fail for the new stage architecture
293 // TODO: Remove marker for old template: NINJA-STAGE-REWORK
294 if(this.application.ninja.currentDocument.documentRoot.id === "UserContent") {
295 this._viewport = this.application.ninja.currentDocument.documentRoot.parentNode;
296
297 this.documentOffsetLeft = this._viewport.offsetLeft;
298 this.documentOffsetTop = this._viewport.offsetTop;
299
300 // Center the stage
301 this.centerStage();
302
303 this._scrollLeft = this._iframeContainer.scrollLeft;
304 this._scrollTop = this._iframeContainer.scrollTop;
305 this.application.ninja.currentDocument.savedLeftScroll = this._iframeContainer.scrollLeft;
306 this.application.ninja.currentDocument.savedTopScroll = this._iframeContainer.scrollTop;
307
308 this.userContentBorder = parseInt(this._documentRoot.elementModel.controller.getProperty(this._documentRoot, "border"));
309
310 this._userContentLeft = this._documentOffsetLeft - this._scrollLeft + this._userContentBorder;
311 this._userContentTop = this._documentOffsetTop - this._scrollTop + this._userContentBorder;
312
313 this._iframeContainer.addEventListener("scroll", this, false);
314 278
315 this.application.ninja.currentDocument.iframe.style.opacity = 1.0; 279 this.userContentBorder = 0;
316 } else {
317 this.userContentBorder = 0;
318
319 this._scrollLeft = 0;
320 this._scrollTop = 0;
321 this._userContentLeft = this._documentOffsetLeft;
322 this._userContentTop = this._documentOffsetTop;
323
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);
327 }
328 280
281 this._scrollLeft = 0;
282 this._scrollTop = 0;
283 this._userContentLeft = this._documentOffsetLeft;
284 this._userContentTop = this._documentOffsetTop;
329 285
286 this._maxHorizontalScroll = this.application.ninja.currentDocument.documentRoot.scrollWidth - this._canvas.width - 11;
287 this._maxVerticalScroll = this.application.ninja.currentDocument.documentRoot.scrollHeight - this._canvas.height - 11;
288 this.application.ninja.currentDocument.model.views.design.iframe.contentWindow.addEventListener("scroll", this, false);
330 289
331 // TODO - We will need to modify this once we support switching between multiple documents 290 // TODO - We will need to modify this once we support switching between multiple documents
332 this.application.ninja.toolsData.selectedToolInstance._configure(true); 291 this.application.ninja.toolsData.selectedToolInstance._configure(true);
@@ -526,8 +485,8 @@ exports.Stage = Montage.create(Component, {
526 // TODO - scroll events are not dependable. We may need to use a timer to simulate 485 // TODO - scroll events are not dependable. We may need to use a timer to simulate
527 // scrollBegin and scrollEnd. For now, the Pan Tool will keep track of the stage's scroll values 486 // scrollBegin and scrollEnd. For now, the Pan Tool will keep track of the stage's scroll values
528 // on mouse down. 487 // on mouse down.
529// this._maxHorizontalScroll = this._documentRoot.scrollWidth - this._canvas.width - 11; 488// this._maxHorizontalScroll = this.application.ninja.currentDocument.documentRoot.scrollWidth - this._canvas.width - 11;
530// this._maxVerticalScroll = this._documentRoot.scrollHeight - this._canvas.height - 11; 489// this._maxVerticalScroll = this.application.ninja.currentDocument.documentRoot.scrollHeight - this._canvas.height - 11;
531 } 490 }
532 491
533 // Need to clear the snap cache and set up the drag plane 492 // Need to clear the snap cache and set up the drag plane
@@ -566,8 +525,8 @@ exports.Stage = Montage.create(Component, {
566 centerStage: { 525 centerStage: {
567 value: function() { 526 value: function() {
568 if(this.application.ninja.currentDocument.documentRoot.id === "UserContent") { 527 if(this.application.ninja.currentDocument.documentRoot.id === "UserContent") {
569 this._iframeContainer.scrollLeft = this._documentOffsetLeft - (this._iframeContainer.offsetWidth - this._documentRoot.parentNode.offsetWidth)/2; 528 this._iframeContainer.scrollLeft = this._documentOffsetLeft - (this._iframeContainer.offsetWidth - this.application.ninja.currentDocument.documentRoot.parentNode.offsetWidth)/2;
570 this._iframeContainer.scrollTop = this._documentOffsetTop - (this._iframeContainer.offsetHeight - this._documentRoot.parentNode.offsetHeight)/2; 529 this._iframeContainer.scrollTop = this._documentOffsetTop - (this._iframeContainer.offsetHeight - this.application.ninja.currentDocument.documentRoot.parentNode.offsetHeight)/2;
571 530
572 this._scrollLeft = this._iframe