jyapayne/ace
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Merge pull request #693 from ajaxorg/feature/animscroll

Browse source 
* Added animation for scrolling for find and gotoline
This commit is contained in:
Garen Torikian 2012-04-10 10:41:00 -07:00
commit f1c609db1e
9 changed files with 340 additions and 33 deletions
Download patch file Download diff file Expand all files Collapse all files

68
build/demo/kitchen-sink/kitchen-sink-uncompressed.js
View file

@ -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) {

2
build/kitchen-sink.html
View file

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

2
build/src/ace-noconflict.js
View file

File diff suppressed because one or more lines are too long

68
build/src/ace-uncompressed-noconflict.js
View file

@ -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) {

68
build/src/ace-uncompressed.js
View file

@ -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) {

2
build/src/ace.js
View file

File diff suppressed because one or more lines are too long

68
build/textarea/src/ace-bookmarklet.js
View file

@ -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) {

20
lib/ace/editor.js
View file

@ -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);
}
};

43
lib/ace/virtual_renderer.js
View file

@ -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) {