Merge pull request #200 from mqg734/Dom-Architecture

Scrolling support for stage.

2 files changed, 60 insertions, 21 deletions

diff --git a/js/stage/stage.reel/stage.js b/js/stage/stage.reel/stage.js
index 171c4f36..1f661513 100755
--- a/js/stage/stage.reel/stage.js
+++ b/js/stage/stage.reel/stage.js
@@ -118,6 +118,9 @@ exports.Stage = Montage.create(Component, {
     _userContentTop:        { value: 0 },
     _userContentBorder:     { value: 0 },
 
+    _maxHorizontalScroll:   { value: 0 },
+    _maxVerticalScroll:     { value: 0 },
+
     documentRoot: {
         get: function () { return this._documentRoot; },
         set: function(value) { this._documentRoot = value; }
@@ -264,7 +267,9 @@ exports.Stage = Montage.create(Component, {
                 this._userContentLeft = 0;
                 this._userContentTop = 0;
 
-                //this.application.ninja.currentDocument._window.addEventListener("scroll", this, false);
+                this._maxHorizontalScroll = this._documentRoot.scrollWidth - this._canvas.width - 11;
+                this._maxVerticalScroll = this._documentRoot.scrollHeight - this._canvas.height - 11;
+                this.application.ninja.currentDocument.model.views.design.iframe.contentWindow.addEventListener("scroll", this, false);
             }
 
 
@@ -464,6 +469,12 @@ exports.Stage = Montage.create(Component, {
 
                 this.userContentLeft = -this._scrollLeft;
                 this.userContentTop = -this._scrollTop;
+
+                // TODO - scroll events are not dependable.  We may need to use a timer to simulate
+                // scrollBegin and scrollEnd. For now, the Pan Tool will keep track of the stage's scroll values
+                // on mouse down.
+//                this._maxHorizontalScroll = this._documentRoot.scrollWidth - this._canvas.width - 11;
+//                this._maxVerticalScroll = this._documentRoot.scrollHeight - this._canvas.height - 11;
             }
 
             // Need to clear the snap cache and set up the drag plane
@@ -543,7 +554,7 @@ exports.Stage = Montage.create(Component, {
             var point, element;
 
             point = webkitConvertPointFromPageToNode(this.canvas, new WebKitPoint(position.pageX, position.pageY));
-            element = this.application.ninja.currentDocument.model.views.design.getElementFromPoint(point.x + this.scrollLeft,point.y + this.scrollTop);
+            element = this.application.ninja.currentDocument.model.views.design.getElementFromPoint(point.x + this.userContentLeft,point.y + this.userContentTop);
 
             // workaround Chrome 3d bug
             if(this.application.ninja.toolsData.selectedToolInstance._canSnap && this.application.ninja.currentDocument.inExclusion(element) !== -1) {
diff --git a/js/tools/PanTool.js b/js/tools/PanTool.js
index ce7606a1..132ac0b1 100755
--- a/js/tools/PanTool.js
+++ b/js/tools/PanTool.js
@@ -21,6 +21,9 @@ exports.PanTool = Montage.create(toolBase,
         _lastGPt :{value: [0,0], writable:true},
         _lastY :{value: 0, writable:true},
 
+        _maxHorizontalScroll: {value: 0, writable:true},
+        _maxVerticalScroll: {value: 0, writable:true},
+
     Configure: {
         value: function ( doActivate )
                 {
@@ -43,10 +46,19 @@ exports.PanTool = Montage.create(toolBase,
 
     HandleLeftButtonDown: {
         value : function ( event ) {
-            this._isDrawing = true;
-                        this.isDrawing = true;
- 
-                                this.mouseDown( event );
+            // Determine the maximum horizontal and vertical scroll values
+            this._maxHorizontalScroll = this.application.ninja.currentDocument.documentRoot.scrollWidth - this.application.ninja.stage._canvas.width - 11;
+            this._maxVerticalScroll = this.application.ninja.currentDocument.documentRoot.scrollHeight - this.application.ninja.stage._canvas.height - 11;
+            if((this._maxHorizontalScroll > 0) || (this._maxVerticalScroll > 0) || this._altKeyDown)
+            {
+                this._isDrawing = true;
+                this.isDrawing = true;
+                this.mouseDown( event );
+            }
+//            else
+//            {
+//                console.log("nothing to scroll");
+//            }
        }
     },
 
@@ -136,8 +148,8 @@ exports.PanTool = Montage.create(toolBase,
                                 delta = 10*event.wheelDelta/120;
                         //console.log( "delta: " + delta );
 
-            this.application.ninja.stage._iframeContainer.scrollLeft += delta;
-            this.application.ninja.stage._scrollLeft += delta;
+            this.application.ninja.currentDocument.documentRoot.scrollLeft += delta;
+//            this.application.ninja.stage._scrollLeft += delta;
 
                         delta *= zoom;
            
@@ -291,17 +303,19 @@ exports.PanTool = Montage.create(toolBase,
                         if (this._isDrawing)
                         {
                                 // get the global screen point
-                                var gPt = [point.x, point.y, this._globalPt[2]];
+                                var gPt = [point.x, point.y, this._globalPt[2]],
+                    dx,
+                    dy;
                                 if (this._altKeyDown)
                                 {
-                                        var dy = 5*(point.y - this._lastY);
+                                        dy = 5*(point.y - this._lastY);
                                         this._globalPt[2] += dy;
                                         gPt = [this._lastGPt[0], this._lastGPt[1], this._globalPt[2]];
                                 }
                                 else if (this._shiftKeyDown)
                                 {
-                                        var dx = Math.abs( this._shiftPt[0] - gPt[0] ),
-                                                dy = Math.abs( this._shiftPt[1] - gPt[1] );
+                                        dx = Math.abs( this._shiftPt[0] - gPt[0] );
+                                        dy = Math.abs( this._shiftPt[1] - gPt[1] );
 
                                         if (dx >= dy)
                                                 gPt[1] = this._shiftPt[1];
@@ -310,16 +324,28 @@ exports.PanTool = Montage.create(toolBase,
                                 }
 
                                 // update the scrollbars
-                                var deltaGPt = VecUtils.vecSubtract(2, gPt, this._lastGPt);
+                                var deltaGPt = vecUtils.vecSubtract(2, gPt, this._lastGPt);
                                 this._lastGPt = gPt.slice();
                                 this._lastY = point.y;
-
-                                var oldLeft = this.application.ninja.stage._iframeContainer.scrollLeft,
-                                        oldTop  = this.application.ninja.stage._iframeContainer.scrollTop;
-                                this.application.ninja.stage._iframeContainer.scrollLeft -= deltaGPt[0];
-                                this.application.ninja.stage._iframeContainer.scrollTop  -= deltaGPt[1];
-                                deltaGPt[0] = oldLeft - this.application.ninja.stage._iframeContainer.scrollLeft;
-                                deltaGPt[1] = oldTop  - this.application.ninja.stage._iframeContainer.scrollTop;
+                var limitX = false;
+                var limitY = false;
+
+                                var oldLeft = this.application.ninja.currentDocument.documentRoot.scrollLeft,
+                                        oldTop  = this.application.ninja.currentDocument.documentRoot.scrollTop,
+                    newLeft = oldLeft - deltaGPt[0],
+                    newTop = oldTop - deltaGPt[1];
+                if((newLeft < 0) || (newLeft > this._maxHorizontalScroll))
+                {
+                    limitX = true;
+                }
+                if((newTop < 0) || (newTop > this._maxVerticalScroll))
+                {
+                    limitY = true;
+                }
+                this.application.ninja.currentDocument.documentRoot.scrollLeft -= deltaGPt[0];
+                this.application.ninja.currentDocument.documentRoot.scrollTop  -= deltaGPt[1];
+                                deltaGPt[0] = oldLeft - this.application.ninja.currentDocument.documentRoot.scrollLeft;
+                                deltaGPt[1] = oldTop  - this.application.ninja.currentDocument.documentRoot.scrollTop;
 
                                 gPt[0] -= deltaGPt[0];
                                 gPt[1] -= deltaGPt[1];
@@ -334,7 +360,7 @@ exports.PanTool = Montage.create(toolBase,
 
                                 // limit the change
                                 var ucMat = viewUtils.getMatrixFromElement(this.application.ninja.currentDocument.documentRoot);
-                                var tooMuch = false
+                                var tooMuch = false;
                                 if ((ucMat[12] >  12000) && (delta[0] > 0))  tooMuch = true;
                                 if ((ucMat[12] < -12000) && (delta[0] < 0))  tooMuch = true;
                                 if ((ucMat[13] >  12000) && (delta[1] > 0))  tooMuch = true;
@@ -349,6 +375,8 @@ exports.PanTool = Montage.create(toolBase,
                                 else
                                         this._worldPt = wPt;
 
+                if(limitX) delta[0] = 0;
+                if(limitY) delta[1] = 0;
                                 // update everything
                                 var transMat = Matrix.Translation( delta );
                                 this.applyDeltaMat( transMat );