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

- add animated scrolling to the demo

Browse source 
- fix infinite loop
- fix some typos
This commit is contained in:
Fabian Jakobs 2012-04-12 13:00:20 +02:00
commit 9deb81fcaf
4 changed files with 55 additions and 43 deletions
Download patch file Download diff file Expand all files Collapse all files

12
demo/kitchen-sink/demo.js
View file

@ -41,7 +41,7 @@
define(function(require, exports, module) { define(function(require, exports, module) {
require("ace/lib/fixoldbrowsers"); require("ace/lib/fixoldbrowsers");
require("ace/config").init(); require("ace/config").init();
var env = {}; var env = {};
var event = require("ace/lib/event"); var event = require("ace/lib/event");
@ -301,6 +301,7 @@ var showGutterEl = document.getElementById("show_gutter");
var showPrintMarginEl = document.getElementById("show_print_margin"); var showPrintMarginEl = document.getElementById("show_print_margin");
var highlightSelectedWordE = document.getElementById("highlight_selected_word"); var highlightSelectedWordE = document.getElementById("highlight_selected_word");
var showHScrollEl = document.getElementById("show_hscroll"); var showHScrollEl = document.getElementById("show_hscroll");
var animateScrollEl = document.getElementById("animate_scroll");
var softTabEl = document.getElementById("soft_tab"); var softTabEl = document.getElementById("soft_tab");
var behavioursEl = document.getElementById("enable_behaviours"); var behavioursEl = document.getElementById("enable_behaviours");
@ -320,12 +321,12 @@ modes.forEach(function(mode) {
bindDropdown("doc", function(value) { bindDropdown("doc", function(value) {
var doc = docsByName[value].doc; var doc = docsByName[value].doc;
if (!docsByName[value].initialized) { if (!docsByName[value].initialized) {
docsByName[value].initialized = true; docsByName[value].initialized = true;
doc.setMode(modesByName[docsByName[value].name].mode); doc.setMode(modesByName[docsByName[value].name].mode);
} }
var session = env.split.setSession(doc); var session = env.split.setSession(doc);
session.name = doc.name; session.name = doc.name;
@ -357,6 +358,7 @@ function updateUIEditorOptions() {
showPrintMarginEl.checked = editor.renderer.getShowPrintMargin(); showPrintMarginEl.checked = editor.renderer.getShowPrintMargin();
highlightSelectedWordE.checked = editor.getHighlightSelectedWord(); highlightSelectedWordE.checked = editor.getHighlightSelectedWord();
showHScrollEl.checked = editor.renderer.getHScrollBarAlwaysVisible(); showHScrollEl.checked = editor.renderer.getHScrollBarAlwaysVisible();
animateScrollEl.checked = editor.getAnimatedScroll();
softTabEl.checked = session.getUseSoftTabs(); softTabEl.checked = session.getUseSoftTabs();
behavioursEl.checked = editor.getBehavioursEnabled(); behavioursEl.checked = editor.getBehavioursEnabled();
} }
@ -440,6 +442,10 @@ bindCheckbox("show_hscroll", function(checked) {
env.editor.renderer.setHScrollBarAlwaysVisible(checked); env.editor.renderer.setHScrollBarAlwaysVisible(checked);
}); });
bindCheckbox("animate_scroll", function(checked) {
env.editor.setAnimatedScroll(checked);
});
bindCheckbox("soft_tab", function(checked) { bindCheckbox("soft_tab", function(checked) {
env.editor.getSession().setUseSoftTabs(checked); env.editor.getSession().setUseSoftTabs(checked);
}); });

15
kitchen-sink.html
View file

@ -7,12 +7,12 @@
<title>Ace Kitchen Sink</title> <title>Ace Kitchen Sink</title>
<meta name="author" content="Fabian Jakobs"> <meta name="author" content="Fabian Jakobs">
<link rel="stylesheet" href="demo/kitchen-sink/styles.css" type="text/css" media="screen" charset="utf-8"> <link rel="stylesheet" href="demo/kitchen-sink/styles.css" type="text/css" media="screen" charset="utf-8">
<!-- <!--
Ace Ace
version %version% version %version%
commit %commit% commit %commit%
--> -->
</head> </head>
<body> <body>
@ -132,6 +132,13 @@
<input type="checkbox" name="show_hscroll" id="show_hscroll"> <input type="checkbox" name="show_hscroll" id="show_hscroll">
</td> </td>
</tr> </tr>
<tr>
<td >
<label for="animate_scroll">Animate scrolling</label>
</td><td>
<input type="checkbox" name="animate_scroll" id="animate_scroll">
</td>
</tr>
<tr> <tr>
<td > <td >
<label for="keybinding">Key Binding</label> <label for="keybinding">Key Binding</label>
@ -210,7 +217,7 @@
<script src="demo/kitchen-sink/require.js" data-main="demo/kitchen-sink/demo" type="text/javascript"></script> <script src="demo/kitchen-sink/require.js" data-main="demo/kitchen-sink/demo" type="text/javascript"></script>
<!--DEVEL --> <!--DEVEL -->
<!--PACKAGE <!--PACKAGE
<script src="demo/kitchen-sink/kitchen-sink-uncompressed.js" data-ace-suffix="-uncompressed.js" data-ace-base="demo/kitchen-sink" type="text/javascript" charset="utf-8"></script> <script src="demo/kitchen-sink/kitchen-sink-uncompressed.js" data-ace-suffix="-uncompressed.js" data-ace-base="demo/kitchen-sink" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript" charset="utf-8"> <script type="text/javascript" charset="utf-8">

22
lib/ace/editor.js
View file

@ -292,7 +292,7 @@ var Editor = function(renderer, session) {
else else
lastRow = Infinity; lastRow = Infinity;
this.renderer.updateLines(range.start.row, lastRow); this.renderer.updateLines(range.start.row, lastRow);
this._emit("change", e); this._emit("change", e);
// update cursor because tab characters can influence the cursor position // update cursor because tab characters can influence the cursor position
@ -341,7 +341,7 @@ var Editor = function(renderer, session) {
if (this.getHighlightActiveLine()) { if (this.getHighlightActiveLine()) {
var cursor = this.getCursorPosition(), var cursor = this.getCursorPosition(),
foldLine = this.session.getFoldLine(cursor.row); foldLine = this.session.getFoldLine(cursor.row);
if ((this.getSelectionStyle() != "line" || !this.selection.isMultiLine())) { if ((this.getSelectionStyle() != "line" || !this.selection.isMultiLine())) {
var range; var range;
if (foldLine) { if (foldLine) {
@ -605,14 +605,14 @@ var Editor = function(renderer, session) {
this.getHighlightSelectedWord = function() { this.getHighlightSelectedWord = function() {
return this.$highlightSelectedWord; return this.$highlightSelectedWord;
}; };
this.setAnimatedScroll = function(shouldAnimate){ this.setAnimatedScroll = function(shouldAnimate){
this.renderer.setAnimatedScroll(shouldAnimate); this.renderer.setAnimatedScroll(shouldAnimate);
} };
this.getAnimatedScroll = function(){ this.getAnimatedScroll = function(){
this.rendered.getAnimatedScroll(); this.renderer.getAnimatedScroll();
} };
this.setShowInvisibles = function(showInvisibles) { this.setShowInvisibles = function(showInvisibles) {
if (this.getShowInvisibles() == showInvisibles) if (this.getShowInvisibles() == showInvisibles)
@ -1158,7 +1158,7 @@ var Editor = function(renderer, session) {
this.selection.setSelectionRange(range); this.selection.setSelectionRange(range);
this.renderer.scrollSelectionIntoView(range.start, range.end); this.renderer.scrollSelectionIntoView(range.start, range.end);
} }
return replaced; return replaced;
}; };
@ -1185,7 +1185,7 @@ var Editor = function(renderer, session) {
this.selection.setSelectionRange(selection); this.selection.setSelectionRange(selection);
this.$blockScrolling -= 1; this.$blockScrolling -= 1;
return replaced; return replaced;
}; };
@ -1242,11 +1242,11 @@ var Editor = function(renderer, session) {
this.$blockScrolling += 1; this.$blockScrolling += 1;
this.selection.setSelectionRange(range); this.selection.setSelectionRange(range);
this.$blockScrolling -= 1; this.$blockScrolling -= 1;
var cursor = this.getCursorPosition(); var cursor = this.getCursorPosition();
if (!this.isRowFullyVisible(cursor.row)) if (!this.isRowFullyVisible(cursor.row))
this.scrollToLine(cursor.row, true); this.scrollToLine(cursor.row, true);
//@todo scroll X //@todo scroll X
//if (!this.isRowFullyVisible(cursor.row)) //if (!this.isRowFullyVisible(cursor.row))
//this.scrollToLine(cursor.row, true); //this.scrollToLine(cursor.row, true);

49
lib/ace/virtual_renderer.js
View file

@ -60,13 +60,13 @@ dom.importCssString(editorCss, "ace_editor");
var VirtualRenderer = function(container, theme) { var VirtualRenderer = function(container, theme) {
var _self = this; var _self = this;
this.container = container; this.container = container;
// TODO: this breaks rendering in Cloud9 with multiple ace instances // TODO: this breaks rendering in Cloud9 with multiple ace instances
// // Imports CSS once per DOM document ('ace_editor' serves as an identifier). // // Imports CSS once per DOM document ('ace_editor' serves as an identifier).
// dom.importCssString(editorCss, "ace_editor", container.ownerDocument); // dom.importCssString(editorCss, "ace_editor", container.ownerDocument);
dom.addCssClass(container, "ace_editor"); dom.addCssClass(container, "ace_editor");
this.setTheme(theme); this.setTheme(theme);
@ -74,7 +74,7 @@ var VirtualRenderer = function(container, theme) {
this.$gutter = dom.createElement("div"); this.$gutter = dom.createElement("div");
this.$gutter.className = "ace_gutter"; this.$gutter.className = "ace_gutter";
this.container.appendChild(this.$gutter); this.container.appendChild(this.$gutter);
this.scroller = dom.createElement("div"); this.scroller = dom.createElement("div");
this.scroller.className = "ace_scroller"; this.scroller.className = "ace_scroller";
this.container.appendChild(this.scroller); this.container.appendChild(this.scroller);
@ -84,8 +84,8 @@ var VirtualRenderer = function(container, theme) {
this.scroller.appendChild(this.content); this.scroller.appendChild(this.content);
this.$gutterLayer = new GutterLayer(this.$gutter); this.$gutterLayer = new GutterLayer(this.$gutter);
this.$gutterLayer.on("changeGutterWidth", this.onResize.bind(this, true)); this.$gutterLayer.on("changeGutterWidth", this.onResize.bind(this, true));
this.$markerBack = new MarkerLayer(this.content); this.$markerBack = new MarkerLayer(this.content);
var textLayer = this.$textLayer = new TextLayer(this.content); var textLayer = this.$textLayer = new TextLayer(this.content);
@ -112,12 +112,12 @@ var VirtualRenderer = function(container, theme) {
this.scrollTop = 0; this.scrollTop = 0;
this.scrollLeft = 0; this.scrollLeft = 0;
event.addListener(this.scroller, "scroll", function() { event.addListener(this.scroller, "scroll", function() {
var scrollLeft = _self.scroller.scrollLeft; var scrollLeft = _self.scroller.scrollLeft;
_self.scrollLeft = scrollLeft; _self.scrollLeft = scrollLeft;
_self.session.setScrollLeft(scrollLeft); _self.session.setScrollLeft(scrollLeft);
if (scrollLeft == 0) { if (scrollLeft == 0) {
_self.$gutter.className = "ace_gutter"; _self.$gutter.className = "ace_gutter";
} }
@ -285,11 +285,11 @@ var VirtualRenderer = function(container, theme) {
this.setAnimatedScroll = function(shouldAnimate){ this.setAnimatedScroll = function(shouldAnimate){
this.$animatedScroll = shouldAnimate; this.$animatedScroll = shouldAnimate;
} };
this.getAnimatedscroll = function(){ this.getAnimatedScroll = function(){
return this.$animatedScroll return this.$animatedScroll;
} };
this.setShowInvisibles = function(showInvisibles) { this.setShowInvisibles = function(showInvisibles) {
if (this.$textLayer.setShowInvisibles(showInvisibles)) if (this.$textLayer.setShowInvisibles(showInvisibles))
@ -369,7 +369,7 @@ var VirtualRenderer = function(container, theme) {
// this persists in IE9 // this persists in IE9
if (useragent.isIE) if (useragent.isIE)
return; return;
if (this.layerConfig.lastRow === 0) if (this.layerConfig.lastRow === 0)
return; return;
@ -445,13 +445,13 @@ var VirtualRenderer = function(container, theme) {
// horizontal scrolling // horizontal scrolling
if (changes & this.CHANGE_H_SCROLL) { if (changes & this.CHANGE_H_SCROLL) {
this.scroller.scrollLeft = this.scrollLeft; this.scroller.scrollLeft = this.scrollLeft;
// read the value after writing it since the value might get clipped // read the value after writing it since the value might get clipped
var scrollLeft = this.scroller.scrollLeft; var scrollLeft = this.scroller.scrollLeft;
this.scrollLeft = scrollLeft; this.scrollLeft = scrollLeft;
this.session.setScrollLeft(scrollLeft); this.session.setScrollLeft(scrollLeft);
} }
// full // full
if (changes & this.CHANGE_FULL) { if (changes & this.CHANGE_FULL) {
this.$textLayer.checkForSizeChanges(); this.$textLayer.checkForSizeChanges();
@ -726,7 +726,7 @@ var VirtualRenderer = function(container, theme) {
var i = 0; var i = 0;
var l = this.STEPS; var l = this.STEPS;
var steps = []; var steps = [];
var func = function(t, x_min, dx) { var func = function(t, x_min, dx) {
if ((t /= .5) < 1) if ((t /= .5) < 1)
return dx / 2 * Math.pow(t, 3) + x_min; return dx / 2 * Math.pow(t, 3) + x_min;
@ -736,7 +736,7 @@ var VirtualRenderer = function(container, theme) {
for (i = 0; i < l; ++i) for (i = 0; i < l; ++i)
steps.push(func(i / this.STEPS, fromValue, toValue - fromValue)); steps.push(func(i / this.STEPS, fromValue, toValue - fromValue));
steps.push(toValue); steps.push(toValue);
return steps; return steps;
}; };
@ -747,15 +747,14 @@ var VirtualRenderer = function(container, theme) {
offset -= this.$size.scrollerHeight / 2; offset -= this.$size.scrollerHeight / 2;
if (this.$animatedScroll && Math.abs(offset - this.scrollTop) < 10000) { if (this.$animatedScroll && Math.abs(offset - this.scrollTop) < 10000) {
var i = 0;
var _self = this; var _self = this;
var steps = _self.$calcSteps(this.scrollTop, offset); var steps = _self.$calcSteps(this.scrollTop, offset);
clearInterval(_self.$timer); clearInterval(this.$timer);
this.$timer = setInterval(function() { this.$timer = setInterval(function() {
_self.session.setScrollTop(steps[i]); _self.session.setScrollTop(steps.shift());
if (++i == this.STEPS + 1) if (!steps.length)
clearInterval(_self.$timer); clearInterval(_self.$timer);
}, 10); }, 10);
} }
@ -865,7 +864,7 @@ var VirtualRenderer = function(container, theme) {
this._loadTheme = function(name, callback) { this._loadTheme = function(name, callback) {
if (!config.get("packaged")) if (!config.get("packaged"))
return callback(); return callback();
var base = name.split("/").pop(); var base = name.split("/").pop();
var filename = config.get("themePath") + "/theme-" + base + config.get("suffix"); var filename = config.get("themePath") + "/theme-" + base + config.get("suffix");
net.loadScript(filename, callback); net.loadScript(filename, callback);
@ -877,14 +876,14 @@ var VirtualRenderer = function(container, theme) {
this.$themeValue = theme; this.$themeValue = theme;
if (!theme || typeof theme == "string") { if (!theme || typeof theme == "string") {
var moduleName = theme || "ace/theme/textmate"; var moduleName = theme || "ace/theme/textmate";
var module; var module;
try { try {
module = require(moduleName); module = require(moduleName);
} catch (e) {}; } catch (e) {};
if (module) if (module)
return afterLoad(module); return afterLoad(module);
_self._loadTheme(moduleName, function() { _self._loadTheme(moduleName, function() {
require([theme], function(module) { require([theme], function(module) {
if (_self.$themeValue !== theme) if (_self.$themeValue !== theme)