Merge pull request #693 from ajaxorg/feature/animscroll

* Added animation for scrolling for find and gotoline

build/demo/kitchen-sink/kitchen-sink-uncompressed.js

@@ -11873,6 +11873,14 @@ var Editor = function(renderer, session) {
         return this.$highlightSelectedWord;
     };
     
+    this.setAnimatedScroll = function(shouldAnimate){
+        this.renderer.setAnimatedScroll(shouldAnimate);
+    }
+    
+    this.getAnimatedScroll = function(){
+        this.rendered.getAnimatedScroll();
+    }
+
     this.setShowInvisibles = function(showInvisibles) {
         if (this.getShowInvisibles() == showInvisibles)
             return;
@@ -12484,7 +12492,17 @@ var Editor = function(renderer, session) {
         var range = this.$search.find(this.session);
         if (range) {
             this.session.unfold(range);
-            this.selection.setSelectionRange(range); // this scrolls selection into view
+            this.$blockScrolling += 1;
+            this.selection.setSelectionRange(range);
+            this.$blockScrolling -= 1;
+            
+            var cursor = this.getCursorPosition();
+            if (!this.isRowFullyVisible(cursor.row))
+                this.scrollToLine(cursor.row, true);
+                
+            //@todo scroll X
+            //if (!this.isRowFullyVisible(cursor.row))
+                //this.scrollToLine(cursor.row, true);
         }
     };
 
@@ -12504,7 +12522,8 @@ var Editor = function(renderer, session) {
 
 
 exports.Editor = Editor;
-});/* vim:ts=4:sts=4:sw=4:
+});
+/* vim:ts=4:sts=4:sw=4:
  * ***** BEGIN LICENSE BLOCK *****
  * Version: MPL 1.1/GPL 2.0/LGPL 2.1
  *
@@ -14731,6 +14750,8 @@ var VirtualRenderer = function(container, theme) {
     this.$horizScroll = true;
     this.$horizScrollAlwaysVisible = true;
     
+    this.$animatedScroll = false;
+
     this.scrollBar = new ScrollBar(container);
     this.scrollBar.addEventListener("scroll", function(e) {
         _self.session.setScrollTop(e.data);
@@ -14902,6 +14923,14 @@ var VirtualRenderer = function(container, theme) {
         return this.session.adjustWrapLimit(limit);
     };
     
+    this.setAnimatedScroll = function(shouldAnimate){
+        this.$animatedScroll = shouldAnimate;
+    }
+    
+    this.getAnimatedscroll = function(){
+        return this.$animatedScroll
+    }
+
     this.setShowInvisibles = function(showInvisibles) {
         if (this.$textLayer.setShowInvisibles(showInvisibles))
             this.$loop.schedule(this.CHANGE_TEXT);
@@ -15332,13 +15361,46 @@ var VirtualRenderer = function(container, theme) {
         this.session.setScrollTop(row * this.lineHeight);
     };
 
+    //@todo I would like to make this animation a setting. How?
+
+    var STEPS = 10;
+    function calcSteps(fromValue, toValue){
+        var i     = 0,
+            l     = STEPS,
+            steps = [],
+            func  = function(t, x_min, dx) {
+                if ((t /= .5) < 1)
+                    return dx / 2 * Math.pow(t, 3) + x_min;
+                return dx / 2 * (Math.pow(t - 2, 3) + 2) + x_min;
+            };
+
+        for (i = 0; i < l; ++i)
+            steps.push(func(i / STEPS, fromValue, toValue - fromValue));
+        steps.push(toValue);
+        
+        return steps;
+    }
+
     this.scrollToLine = function(line, center) {
         var pos = this.$cursorLayer.getPixelPosition({row: line, column: 0});
         var offset = pos.top;
         if (center)
             offset -= this.$size.scrollerHeight / 2;
             
-        this.session.setScrollTop(offset);
+        if (this.$animatedScroll && Math.abs(offset - this.scrollTop) < 10000) {
+            var i = 0, _self = this, 
+                steps = calcSteps(this.scrollTop, offset);
+            clearInterval(_self.$timer);
+            this.$timer = setInterval(function(){
+                _self.session.setScrollTop(steps[i]);
+                
+                if (++i == STEPS + 1)
+                    clearInterval(_self.$timer);
+            }, 10);
+        }
+        else {
+            this.session.setScrollTop(offset);
+        }
     };
 
     this.scrollToY = function(scrollTop) {

build/kitchen-sink.html

@@ -11,7 +11,7 @@
     
     Ace
       version 0.2.0
-      commit  cbd29bc541998e7c2bee817d048aead94760f557
+      commit  d6a1779f4b00794b0dc56917371e25492083e6d7
 
     
     -->

build/src/ace-uncompressed-noconflict.js

@@ -2987,6 +2987,14 @@ var Editor = function(renderer, session) {
         return this.$highlightSelectedWord;
     };
     
+    this.setAnimatedScroll = function(shouldAnimate){
+        this.renderer.setAnimatedScroll(shouldAnimate);
+    }
+    
+    this.getAnimatedScroll = function(){
+        this.rendered.getAnimatedScroll();
+    }
+
     this.setShowInvisibles = function(showInvisibles) {
         if (this.getShowInvisibles() == showInvisibles)
             return;
@@ -3598,7 +3606,17 @@ var Editor = function(renderer, session) {
         var range = this.$search.find(this.session);
         if (range) {
             this.session.unfold(range);
-            this.selection.setSelectionRange(range); // this scrolls selection into view
+            this.$blockScrolling += 1;
+            this.selection.setSelectionRange(range);
+            this.$blockScrolling -= 1;
+            
+            var cursor = this.getCursorPosition();
+            if (!this.isRowFullyVisible(cursor.row))
+                this.scrollToLine(cursor.row, true);
+                
+            //@todo scroll X
+            //if (!this.isRowFullyVisible(cursor.row))
+                //this.scrollToLine(cursor.row, true);
         }
     };
 
@@ -3618,7 +3636,8 @@ var Editor = function(renderer, session) {
 
 
 exports.Editor = Editor;
-});/* ***** BEGIN LICENSE BLOCK *****
+});
+/* ***** BEGIN LICENSE BLOCK *****
  * Version: MPL 1.1/GPL 2.0/LGPL 2.1
  *
  * The contents of this file are subject to the Mozilla Public License Version
@@ -11926,6 +11945,8 @@ var VirtualRenderer = function(container, theme) {
     this.$horizScroll = true;
     this.$horizScrollAlwaysVisible = true;
     
+    this.$animatedScroll = false;
+
     this.scrollBar = new ScrollBar(container);
     this.scrollBar.addEventListener("scroll", function(e) {
         _self.session.setScrollTop(e.data);
@@ -12097,6 +12118,14 @@ var VirtualRenderer = function(container, theme) {
         return this.session.adjustWrapLimit(limit);
     };
     
+    this.setAnimatedScroll = function(shouldAnimate){
+        this.$animatedScroll = shouldAnimate;
+    }
+    
+    this.getAnimatedscroll = function(){
+        return this.$animatedScroll
+    }
+
     this.setShowInvisibles = function(showInvisibles) {
         if (this.$textLayer.setShowInvisibles(showInvisibles))
             this.$loop.schedule(this.CHANGE_TEXT);
@@ -12527,13 +12556,46 @@ var VirtualRenderer = function(container, theme) {
         this.session.setScrollTop(row * this.lineHeight);
     };
 
+    //@todo I would like to make this animation a setting. How?
+
+    var STEPS = 10;
+    function calcSteps(fromValue, toValue){
+        var i     = 0,
+            l     = STEPS,
+            steps = [],
+            func  = function(t, x_min, dx) {
+                if ((t /= .5) < 1)
+                    return dx / 2 * Math.pow(t, 3) + x_min;
+                return dx / 2 * (Math.pow(t - 2, 3) + 2) + x_min;
+            };
+
+        for (i = 0; i < l; ++i)
+            steps.push(func(i / STEPS, fromValue, toValue - fromValue));
+        steps.push(toValue);
+        
+        return steps;
+    }
+
     this.scrollToLine = function(line, center) {
         var pos = this.$cursorLayer.getPixelPosition({row: line, column: 0});
         var offset = pos.top;
         if (center)
             offset -= this.$size.scrollerHeight / 2;
             
-        this.session.setScrollTop(offset);
+        if (this.$animatedScroll && Math.abs(offset - this.scrollTop) < 10000) {
+            var i = 0, _self = this, 
+                steps = calcSteps(this.scrollTop, offset);
+            clearInterval(_self.$timer);
+            this.$timer = setInterval(function(){
+                _self.session.setScrollTop(steps[i]);
+                
+                if (++i == STEPS + 1)
+                    clearInterval(_self.$timer);
+            }, 10);
+        }
+        else {
+            this.session.setScrollTop(offset);
+        }
     };
 
     this.scrollToY = function(scrollTop) {

build/src/ace-uncompressed.js

@@ -2987,6 +2987,14 @@ var Editor = function(renderer, session) {
         return this.$highlightSelectedWord;
     };
     
+    this.setAnimatedScroll = function(shouldAnimate){
+        this.renderer.setAnimatedScroll(shouldAnimate);
+    }
+    
+    this.getAnimatedScroll = function(){
+        this.rendered.getAnimatedScroll();
+    }
+
     this.setShowInvisibles = function(showInvisibles) {
         if (this.getShowInvisibles() == showInvisibles)
             return;
@@ -3598,7 +3606,17 @@ var Editor = function(renderer, session) {
         var range = this.$search.find(this.session);
         if (range) {
             this.session.unfold(range);
-            this.selection.setSelectionRange(range); // this scrolls selection into view
+            this.$blockScrolling += 1;
+            this.selection.setSelectionRange(range);
+            this.$blockScrolling -= 1;
+            
+            var cursor = this.getCursorPosition();
+            if (!this.isRowFullyVisible(cursor.row))
+                this.scrollToLine(cursor.row, true);
+                
+            //@todo scroll X
+            //if (!this.isRowFullyVisible(cursor.row))
+                //this.scrollToLine(cursor.row, true);
         }
     };
 
@@ -3618,7 +3636,8 @@ var Editor = function(renderer, session) {
 
 
 exports.Editor = Editor;
-});/* ***** BEGIN LICENSE BLOCK *****
+});
+/* ***** BEGIN LICENSE BLOCK *****
  * Version: MPL 1.1/GPL 2.0/LGPL 2.1
  *
  * The contents of this file are subject to the Mozilla Public License Version
@@ -11926,6 +11945,8 @@ var VirtualRenderer = function(container, theme) {
     this.$horizScroll = true;
     this.$horizScrollAlwaysVisible = true;
     
+    this.$animatedScroll = false;
+
     this.scrollBar = new ScrollBar(container);
     this.scrollBar.addEventListener("scroll", function(e) {
         _self.session.setScrollTop(e.data);
@@ -12097,6 +12118,14 @@ var VirtualRenderer = function(container, theme) {
         return this.session.adjustWrapLimit(limit);
     };
     
+    this.setAnimatedScroll = function(shouldAnimate){
+        this.$animatedScroll = shouldAnimate;
+    }
+    
+    this.getAnimatedscroll = function(){
+        return this.$animatedScroll
+    }
+
     this.setShowInvisibles = function(showInvisibles) {
         if (this.$textLayer.setShowInvisibles(showInvisibles))
             this.$loop.schedule(this.CHANGE_TEXT);
@@ -12527,13 +12556,46 @@ var VirtualRenderer = function(container, theme) {
         this.session.setScrollTop(row * this.lineHeight);
     };
 
+    //@todo I would like to make this animation a setting. How?
+
+    var STEPS = 10;
+    function calcSteps(fromValue, toValue){
+        var i     = 0,
+            l     = STEPS,
+            steps = [],
+            func  = function(t, x_min, dx) {
+                if ((t /= .5) < 1)
+                    return dx / 2 * Math.pow(t, 3) + x_min;
+                return dx / 2 * (Math.pow(t - 2, 3) + 2) + x_min;
+            };
+
+        for (i = 0; i < l; ++i)
+            steps.push(func(i / STEPS, fromValue, toValue - fromValue));
+        steps.push(toValue);
+        
+        return steps;
+    }
+
     this.scrollToLine = function(line, center) {
         var pos = this.$cursorLayer.getPixelPosition({row: line, column: 0});
         var offset = pos.top;
         if (center)
             offset -= this.$size.scrollerHeight / 2;
             
-        this.session.setScrollTop(offset);
+        if (this.$animatedScroll && Math.abs(offset - this.scrollTop) < 10000) {
+            var i = 0, _self = this, 
+                steps = calcSteps(this.scrollTop, offset);
+            clearInterval(_self.$timer);
+            this.$timer = setInterval(function(){
+                _self.session.setScrollTop(steps[i]);
+                
+                if (++i == STEPS + 1)
+                    clearInterval(_self.$timer);
+            }, 10);
+        }
+        else {
+            this.session.setScrollTop(offset);
+        }
     };
 
     this.scrollToY = function(scrollTop) {

build/textarea/src/ace-bookmarklet.js

@@ -3554,6 +3554,14 @@ var Editor = function(renderer, session) {
         return this.$highlightSelectedWord;
     };
     
+    this.setAnimatedScroll = function(shouldAnimate){
+        this.renderer.setAnimatedScroll(shouldAnimate);
+    }
+    
+    this.getAnimatedScroll = function(){
+        this.rendered.getAnimatedScroll();
+    }
+
     this.setShowInvisibles = function(showInvisibles) {
         if (this.getShowInvisibles() == showInvisibles)
             return;
@@ -4165,7 +4173,17 @@ var Editor = function(renderer, session) {
         var range = this.$search.find(this.session);
         if (range) {
             this.session.unfold(range);
-            this.selection.setSelectionRange(range); // this scrolls selection into view
+            this.$blockScrolling += 1;
+            this.selection.setSelectionRange(range);
+            this.$blockScrolling -= 1;
+            
+            var cursor = this.getCursorPosition();
+            if (!this.isRowFullyVisible(cursor.row))
+                this.scrollToLine(cursor.row, true);
+                
+            //@todo scroll X
+            //if (!this.isRowFullyVisible(cursor.row))
+                //this.scrollToLine(cursor.row, true);
         }
     };
 
@@ -4185,7 +4203,8 @@ var Editor = function(renderer, session) {
 
 
 exports.Editor = Editor;
-});/* ***** BEGIN LICENSE BLOCK *****
+});
+/* ***** BEGIN LICENSE BLOCK *****
  * Version: MPL 1.1/GPL 2.0/LGPL 2.1
  *
  * The contents of this file are subject to the Mozilla Public License Version
@@ -12432,6 +12451,8 @@ var VirtualRenderer = function(container, theme) {
     this.$horizScroll = true;
     this.$horizScrollAlwaysVisible = true;
     
+    this.$animatedScroll = false;
+
     this.scrollBar = new ScrollBar(container);
     this.scrollBar.addEventListener("scroll", function(e) {
         _self.session.setScrollTop(e.data);
@@ -12603,6 +12624,14 @@ var VirtualRenderer = function(container, theme) {
         return this.session.adjustWrapLimit(limit);
     };
     
+    this.setAnimatedScroll = function(shouldAnimate){
+        this.$animatedScroll = shouldAnimate;
+    }
+    
+    this.getAnimatedscroll = function(){
+        return this.$animatedScroll
+    }
+
     this.setShowInvisibles = function(showInvisibles) {
         if (this.$textLayer.setShowInvisibles(showInvisibles))
             this.$loop.schedule(this.CHANGE_TEXT);
@@ -13033,13 +13062,46 @@ var VirtualRenderer = function(container, theme) {
         this.session.setScrollTop(row * this.lineHeight);
     };
 
+    //@todo I would like to make this animation a setting. How?
+
+    var STEPS = 10;
+    function calcSteps(fromValue, toValue){
+        var i     = 0,
+            l     = STEPS,
+            steps = [],
+            func  = function(t, x_min, dx) {
+                if ((t /= .5) < 1)
+                    return dx / 2 * Math.pow(t, 3) + x_min;
+                return dx / 2 * (Math.pow(t - 2, 3) + 2) + x_min;
+            };
+
+        for (i = 0; i < l; ++i)
+            steps.push(func(i / STEPS, fromValue, toValue - fromValue));
+        steps.push(toValue);
+        
+        return steps;
+    }
+
     this.scrollToLine = function(line, center) {
         var pos = this.$cursorLayer.getPixelPosition({row: line, column: 0});
         var offset = pos.top;
         if (center)
             offset -= this.$size.scrollerHeight / 2;
             
-        this.session.setScrollTop(offset);
+        if (this.$animatedScroll && Math.abs(offset - this.scrollTop) < 10000) {
+            var i = 0, _self = this, 
+                steps = calcSteps(this.scrollTop, offset);
+            clearInterval(_self.$timer);
+            this.$timer = setInterval(function(){
+                _self.session.setScrollTop(steps[i]);
+                
+                if (++i == STEPS + 1)
+                    clearInterval(_self.$timer);
+            }, 10);
+        }
+        else {
+            this.session.setScrollTop(offset);
+        }
     };
 
     this.scrollToY = function(scrollTop) {

lib/ace/editor.js

@@ -602,6 +602,14 @@ var Editor = function(renderer, session) {
         return this.$highlightSelectedWord;
     };
     
+    this.setAnimatedScroll = function(shouldAnimate){
+        this.renderer.setAnimatedScroll(shouldAnimate);
+    }
+    
+    this.getAnimatedScroll = function(){
+        this.rendered.getAnimatedScroll();
+    }
+
     this.setShowInvisibles = function(showInvisibles) {
         if (this.getShowInvisibles() == showInvisibles)
             return;
@@ -1213,7 +1221,17 @@ var Editor = function(renderer, session) {
         var range = this.$search.find(this.session);
         if (range) {
             this.session.unfold(range);
-            this.selection.setSelectionRange(range); // this scrolls selection into view
+            this.$blockScrolling += 1;
+            this.selection.setSelectionRange(range);
+            this.$blockScrolling -= 1;
+            
+            var cursor = this.getCursorPosition();
+            if (!this.isRowFullyVisible(cursor.row))
+                this.scrollToLine(cursor.row, true);
+                
+            //@todo scroll X
+            //if (!this.isRowFullyVisible(cursor.row))
+                //this.scrollToLine(cursor.row, true);
         }
     };
 

lib/ace/virtual_renderer.js

@@ -103,6 +103,8 @@ var VirtualRenderer = function(container, theme) {
     this.$horizScroll = true;
     this.$horizScrollAlwaysVisible = true;
 
+    this.$animatedScroll = false;
+
     this.scrollBar = new ScrollBar(container);
     this.scrollBar.addEventListener("scroll", function(e) {
         _self.session.setScrollTop(e.data);
@@ -274,6 +276,14 @@ var VirtualRenderer = function(container, theme) {
         return this.session.adjustWrapLimit(limit);
     };
 
+    this.setAnimatedScroll = function(shouldAnimate){
+        this.$animatedScroll = shouldAnimate;
+    }
+    
+    this.getAnimatedscroll = function(){
+        return this.$animatedScroll
+    }
+
     this.setShowInvisibles = function(showInvisibles) {
         if (this.$textLayer.setShowInvisibles(showInvisibles))
             this.$loop.schedule(this.CHANGE_TEXT);
@@ -704,13 +714,44 @@ var VirtualRenderer = function(container, theme) {
         this.session.setScrollTop(row * this.lineHeight);
     };
 
+    var STEPS = 10;
+    function calcSteps(fromValue, toValue){
+        var i     = 0,
+            l     = STEPS,
+            steps = [],
+            func  = function(t, x_min, dx) {
+                if ((t /= .5) < 1)
+                    return dx / 2 * Math.pow(t, 3) + x_min;
+                return dx / 2 * (Math.pow(t - 2, 3) + 2) + x_min;
+            };
+
+        for (i = 0; i < l; ++i)
+            steps.push(func(i / STEPS, fromValue, toValue - fromValue));
+        steps.push(toValue);
+        
+        return steps;
+    }
+
     this.scrollToLine = function(line, center) {
         var pos = this.$cursorLayer.getPixelPosition({row: line, column: 0});
         var offset = pos.top;
         if (center)
             offset -= this.$size.scrollerHeight / 2;
 
-        this.session.setScrollTop(offset);
+        if (this.$animatedScroll && Math.abs(offset - this.scrollTop) < 10000) {
+        var i = 0, _self = this, 
+                steps = calcSteps(this.scrollTop, offset);
+        clearInterval(_self.$timer);
+        this.$timer = setInterval(function(){
+            _self.session.setScrollTop(steps[i]);
+            
+            if (++i == STEPS + 1)
+                clearInterval(_self.$timer);
+        }, 10);
+        }
+        else {
+            this.session.setScrollTop(offset);
+        }
     };
 
     this.scrollToY = function(scrollTop) {