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

Merge branch 'master' of github.com:ajaxorg/editor

Browse source 
Conflicts:
	src/ace/VirtualRenderer.js
This commit is contained in:
mikedeboer 2010-09-29 19:52:45 +02:00
commit 605e50cb00
6 changed files with 304 additions and 138 deletions
Download patch file Download diff file Expand all files Collapse all files

17
src/ace/Editor.js
View file

@ -104,7 +104,7 @@ var Editor = function(renderer, doc) {
this.$onDocumentModeChange = ace.bind(this.onDocumentModeChange, this);
doc.addEventListener("changeMode", this.$onDocumentModeChange);
this.$onDocumentChangeTabSize = ace.bind(this.renderer.draw, this.renderer);
this.$onDocumentChangeTabSize = ace.bind(this.renderer.updateText, this.renderer);
doc.addEventListener("changeTabSize", this.$onDocumentChangeTabSize);
this.$onDocumentChangeBreakpoint = ace.bind(this.onDocumentChangeBreakpoint, this);
@ -123,14 +123,11 @@ var Editor = function(renderer, doc) {
this.bgTokenizer.setLines(this.doc.lines);
this.bgTokenizer.start(0);
var _self = this;
_self.renderer.scrollToRow(doc.getScrollTopRow());
this.renderer.draw(false, function() {
_self.onCursorChange();
_self.onSelectionChange();
_self.onDocumentChangeBreakpoint();
_self.renderer.scrollToRow(doc.getScrollTopRow());
});
this.onCursorChange();
this.onSelectionChange();
this.onDocumentChangeBreakpoint();
this.renderer.scrollToRow(doc.getScrollTopRow());
this.renderer.updateFull();
};
this.getDocument = function() {
@ -258,7 +255,6 @@ var Editor = function(renderer, doc) {
}
this.renderer.setTokenizer(this.bgTokenizer);
this.renderer.draw();
};
@ -453,7 +449,6 @@ var Editor = function(renderer, doc) {
return;
this.renderer.setShowInvisibles(showInvisibles);
this.renderer.draw();
};
this.getShowInvisibles = function() {

1
src/ace/MEventEmitter.js
View file

@ -26,6 +26,7 @@ require.def("ace/MEventEmitter", ["ace/lib/lang"], function(lang) {
}
};
MEventEmitter.on =
MEventEmitter.addEventListener = function(eventName, callback) {
this.$eventRegistry = this.$eventRegistry || {};

60
src/ace/RenderLoop.js Normal file
View file

@ -0,0 +1,60 @@
/**
* Ajax.org Code Editor (ACE)
*
* @copyright 2010, Ajax.org Services B.V.
* @license LGPLv3 <http://www.gnu.org/licenses/lgpl-3.0.txt>
* @author Fabian Jakobs <fabian AT ajax DOT org>
*/
require.def("ace/RenderLoop", function() {
var RenderLoop = function(onRender) {
this.onRender = onRender;
this.pending = false;
this.changes = 0;
};
(function() {
this.schedule = function(change) {
this.changes = this.changes | change;
if (!this.pending) {
this.pending = true;
var _self = this;
this.setTimeoutZero(function() {
_self.pending = false;
_self.onRender(_self.changes);
_self.changes = 0;
})
}
};
if (window.postMessage) {
this.messageName = "zero-timeout-message";
this.setTimeoutZero = function(callback) {
if (!this.attached) {
var _self = this;
window.addEventListener("message", function(e) {
if (e.source == window && _self.callback && e.data == _self.messageName) {
e.stopPropagation();
_self.callback();
}
}, false);
this.attached = true;
}
this.callback = callback;
window.postMessage(this.messageName, "*");
}
} else {
this.setTimeoutZero = function(callback) {
setTimeout(callback, 0);
}
}
}).call(RenderLoop.prototype);
return RenderLoop;
});

321
src/ace/VirtualRenderer.js
View file

@ -7,20 +7,24 @@
*/
require.def("ace/VirtualRenderer",
[
"ace/ace",
"ace/lib/oop",
"ace/lib/lang",
"ace/lib/dom",
"ace/lib/event",
"ace/layer/Gutter",
"ace/layer/Marker",
"ace/layer/Text",
"ace/layer/Cursor",
"ace/ScrollBar",
"ace/RenderLoop",
"ace/MEventEmitter"
], function(ace, oop, lang, GutterLayer, MarkerLayer, TextLayer, CursorLayer, ScrollBar, MEventEmitter) {
], function(
oop, lang, dom, event, GutterLayer, MarkerLayer, TextLayer,
CursorLayer, ScrollBar, RenderLoop, MEventEmitter) {
var VirtualRenderer = function(container) {
this.container = container;
ace.addCssClass(this.container, "ace_editor");
dom.addCssClass(this.container, "ace_editor");
this.scroller = document.createElement("div");
this.scroller.className = "ace_scroller";
@ -59,24 +63,41 @@ var VirtualRenderer = function(container) {
this.showInvisibles = false;
this.$drawCallbacks = [];
this.$updatePrintMargin();
this.onResize();
var self = this;
this.$textLayer.addEventListener("changeCharaterSize", function() {
self.characterWidth = textLayer.getCharacterWidth();
self.lineHeight = textLayer.getLineHeight();
self.onResize();
self.$loop.schedule(self.CHANGE_FULL);
});
ace.addListener(this.$gutter, "click", lang.bind(this.$onGutterClick, this));
ace.addListener(this.$gutter, "dblclick", lang.bind(this.$onGutterClick, this));
event.addListener(this.$gutter, "click", lang.bind(this.$onGutterClick, this));
event.addListener(this.$gutter, "dblclick", lang.bind(this.$onGutterClick, this));
this.$size = {
width: 0,
height: 0,
scrollerHeight: 0,
scrollerWidth: 0
};
this.$updatePrintMargin();
this.$loop = new RenderLoop(lang.bind(this.$renderChanges, this));
this.$loop.schedule(this.CHANGE_FULL);
};
(function() {
ace.implement(this, MEventEmitter);
this.CHANGE_CURSOR = 1;
this.CHANGE_MARKER = 2;
this.CHANGE_GUTTER = 4;
this.CHANGE_SCROLL = 8;
this.CHANGE_LINES = 16;
this.CHANGE_TEXT = 32;
this.CHANGE_SIZE = 64
this.CHANGE_FULL = 128;
oop.implement(this, MEventEmitter);
this.setDocument = function(doc) {
this.lines = doc.lines;
@ -84,15 +105,86 @@ var VirtualRenderer = function(container) {
this.$cursorLayer.setDocument(doc);
this.$markerLayer.setDocument(doc);
this.$textLayer.setDocument(doc);
this.$loop.schedule(this.CHANGE_FULL);
};
/**
* Triggers partial update of the text layer
*/
this.updateLines = function(firstRow, lastRow) {
if (!this.$updateLines) {
this.$updateLines = {
firstRow: firstRow,
lastRow: lastRow
}
}
else {
if (this.$updateLines.firstRow > firstRow)
this.$updateLines.firstRow = firstRow;
if (this.$updateLines.lastRow < lastRow)
this.$updateLines.lastRow = lastRow;
}
this.$loop.schedule(this.CHANGE_FULL);
};
/**
* Triggers full update of the text layer
*/
this.updateText = function() {
this.$loop.schedule(this.CHANGE_TEXT);
};
/**
* Triggers a full update of all layers
*/
this.updateFull = function() {
this.$loop.schedule(this.CHANGE_FULL);
};
/**
* Triggers resize of the editor
*/
this.onResize = function() {
this.$loop.schedule(this.CHANGE_SIZE);
var height = dom.getInnerHeight(this.container);
if (this.$size.height != height) {
this.$size.height = height;
this.scroller.style.height = height + "px";
this.scrollBar.setHeight(height);
if (this.doc) {
this.scrollToY(this.getScrollTop());
this.$loop.schedule(this.CHANGE_FULL);
}
}
var width = dom.getInnerWidth(this.container);
if (this.$size.width != width) {
this.$size.width = width;
var gutterWidth = this.$gutter.offsetWidth;
this.scroller.style.left = gutterWidth + "px";
this.scroller.style.width = Math.max(0, width - gutterWidth - this.scrollBar.getWidth()) + "px";
}
this.$size.scrollerWidth = this.scroller.clientWidth;
this.$size.scrollerHeight = this.scroller.clientHeight;
};
this.setTokenizer = function(tokenizer) {
this.$textLayer.setTokenizer(tokenizer);
this.$loop.schedule(this.CHANGE_TEXT);
};
this.$onGutterClick = function(e) {
var pageX = ace.getDocumentX(e);
var pageY = ace.getDocumentY(e);
var pageX = event.getDocumentX(e);
var pageY = event.getDocumentY(e);
var event = {
row: this.screenToTextCoordinates(pageX, pageY).row,
@ -107,6 +199,8 @@ var VirtualRenderer = function(container) {
this.setShowInvisibles = function(showInvisibles) {
this.$showInvisibles = showInvisibles;
this.$textLayer.setShowInvisibles(showInvisibles);
this.$loop.schedule(this.CHANGE_TEXT);
};
this.getShowInvisibles = function() {
@ -164,24 +258,6 @@ var VirtualRenderer = function(container) {
return this.layerConfig.lastRow || 0;
};
this.onResize = function()
{
var height = ace.getInnerHeight(this.container);
this.scroller.style.height = height + "px";
this.scrollBar.setHeight(height);
var width = ace.getInnerWidth(this.container);
var gutterWidth = this.$gutter.offsetWidth;
this.scroller.style.left = gutterWidth + "px";
this.scroller.style.width = Math.max(0, width - gutterWidth - this.scrollBar.getWidth()) + "px";
if (this.doc) {
this.$updateScrollBar();
this.scrollToY(this.getScrollTop());
this.draw();
}
};
this.onScroll = function(e) {
this.scrollToY(e.data);
};
@ -191,64 +267,83 @@ var VirtualRenderer = function(container) {
this.scrollBar.setScrollTop(this.scrollTop);
};
this.updateLines = function(firstRow, lastRow) {
var layerConfig = this.layerConfig;
this.$renderChanges = function(changes) {
if (!changes)
return;
// if the update changes the width of the document do a full redraw
if (layerConfig.width != this.$getLongestLine())
return this.$draw(false);
if (firstRow > layerConfig.lastRow + 1) { return; }
if (lastRow < layerConfig.firstRow) { return; }
// if the last row is unknown -> redraw everything
if (lastRow === undefined) {
this.draw();
// text, scrolling and resize changes can cause the view port size to change
if (!this.layerConfig ||
changes & this.CHANGE_FULL ||
changes & this.CHANGE_SIZE ||
changes & this.CHANGE_TEXT ||
changes & this.CHANGE_LINES ||
changes & this.CHANGE_SCROLL
)
this.$computeLayerConfig();
// full
if (changes & this.CHANGE_FULL) {
this.$textLayer.update(this.layerConfig);
this.$gutterLayer.update(this.layerConfig);
this.$markerLayer.update(this.layerConfig);
this.$cursorLayer.update(this.layerConfig);
this.$updateScrollBar();
return;
}
// scrolling
if (changes & this.CHANGE_SCROLL) {
if (changes & this.CHANGE_TEXT || changes & this.CHANGE_LINES) {
this.$textLayer.scrollLines(this.layerConfig);
this.$gutterLayer.update(this.layerConfig);
this.$markerLayer.update(this.layerConfig);
this.$cursorLayer.update(this.layerConfig);
}
else {
this.$textLayer.update(this.layerConfig);
this.$gutterLayer.update(this.layerConfig);
this.$markerLayer.update(this.layerConfig);
this.$cursorLayer.update(this.layerConfig);
}
this.$updateScrollBar();
return;
}
if (changes & this.CHANGE_TEXT) {
this.$textLayer.update(this.layerConfig);
this.$gutterLayer.update(this.layerConfig);
}
else if (changes & this.CHANGE_LINES) {
this.$updateLines();
}
else if (changes & this.CHANGE_SCROLL) {
this.$textLayer.scrollLines(this.layerConfig);
this.$gutterLayer.update(this.layerConfig);
} if (changes & this.CHANGE_GUTTER) {
this.$gutterLayer.update(this.layerConfig);
}
// else update only the changed rows
this.$textLayer.updateLines(layerConfig, firstRow, lastRow);
if (changes & this.CHANGE_CURSOR)
this.$cursorLayer.update(this.layerConfig);
if (changes & this.CHANGE_MARKER) {
this.$markerLayer.update(this.layerConfig);
}
if (changes & this.CHANGE_SIZE)
this.$updateScrollBar();
};
this.draw = function(scrollOnly, callback) {
this.$draw(scrollOnly);
callback && callback();
// if (this.$drawTimer) {
// clearInterval(this.$drawTimer);
// this.scrollOnly = this.scrollOnly && scrollOnly;
// } else {
// this.scollOnly = scrollOnly;
// }
//
// if (callback)
// this.$drawCallbacks.push(callback);
//
// var _self = this;
// this.$drawTimer = setTimeout(function() {
// _self.$draw(_self.scrollOnly);
// for (var i=0; i<_self.$drawCallbacks.length; i++)
// _self.$drawCallbacks[i]();
//
// _self.$drawCallbacks = [];
// delete _self.$drawTimer;
// }, 0);
};
this.$draw = function(scrollOnly) {
//var start = new Date();
var lines = this.lines;
this.$computeLayerConfig = function() {
var offset = this.scrollTop % this.lineHeight;
var minHeight = this.scroller.clientHeight + offset;
var minHeight = this.$size.scrollerHeight + this.lineHeight;
var longestLine = this.$getLongestLine();
var widthChanged = this.layerConfig && (this.layerConfig.width != longestLine);
var widthChanged = !this.layerConfig ? true : (this.layerConfig.width != longestLine);
var lineCount = Math.ceil(minHeight / this.lineHeight);
var firstRow = Math.round((this.scrollTop - offset) / this.lineHeight);
var lastRow = Math.min(lines.length, firstRow + lineCount) - 1;
var lastRow = Math.min(this.lines.length, firstRow + lineCount) - 1;
var layerConfig = this.layerConfig = {
width : longestLine,
@ -256,55 +351,69 @@ var VirtualRenderer = function(container) {
lastRow : lastRow,
lineHeight : this.lineHeight,
characterWidth : this.characterWidth,
minHeight : minHeight,
scrollOnly: !!scrollOnly
minHeight : minHeight
};
this.content.style.marginTop = (-offset) + "px";
this.content.style.height = minHeight + "px";
for ( var i = 0; i < this.layers.length; i++) {
var layer = this.layers[i];
if (widthChanged) {
var style = layer.element.style;
style.width = longestLine + "px";
}
layer.update(layerConfig);
};
this.$gutterLayer.element.style.marginTop = (-offset) + "px";
this.$gutterLayer.update(layerConfig);
this.content.style.marginTop = (-offset) + "px";
this.content.style.height = minHeight + "px";
};
//console.log("compute", new Date() - start, "ms")
this.$updateScrollBar();
//console.log("compute+render", new Date() - start, "ms")
this.$updateLines = function() {
var firstRow = this.$updateLines.firstRow;
var lastRow = this.$updateLines.lastRow;
var layerConfig = this.layerConfig;
// if the update changes the width of the document do a full redraw
if (layerConfig.width != this.$getLongestLine())
return this.$textLayer.update(layerConfig);
if (firstRow > layerConfig.lastRow + 1) { return; }
if (lastRow < layerConfig.firstRow) { return; }
// if the last row is unknown -> redraw everything
if (lastRow === undefined)
return this.$textLayer.update(layerConfig);
// else update only the changed rows
this.$textLayer.updateLines(layerConfig, firstRow, lastRow);
};
this.$getLongestLine = function() {
var charCount = this.doc.getScreenWidth();
if (this.$showInvisibles)
charCount += 1;
return Math.max(this.scroller.clientWidth, Math.round(charCount * this.characterWidth));
return Math.max(this.$size.scrollerWidth, Math.round(charCount * this.characterWidth));
};
this.addMarker = function(range, clazz, type) {
return this.$markerLayer.addMarker(range, clazz, type);
this.$loop.schedule(this.CHANGE_MARKER);
};
this.removeMarker = function(markerId) {
this.$markerLayer.removeMarker(markerId);
this.$loop.schedule(this.CHANGE_MARKER);
};
this.setBreakpoints = function(rows) {
this.$gutterLayer.setBreakpoints(rows);
this.$loop.schedule(this.CHANGE_GUTTER);
};
this.updateCursor = function(position, overwrite) {
this.$cursorLayer.setCursor(position, overwrite);
this.$cursorLayer.update(this.layerConfig);
this.$loop.schedule(this.CHANGE_CURSOR);
};
this.hideCursor = function() {
@ -325,19 +434,19 @@ var VirtualRenderer = function(container) {
this.scrollToY(top);
}
if (this.getScrollTop() + this.scroller.clientHeight < top
if (this.getScrollTop() + this.$size.scrollerHeight < top
+ this.lineHeight) {
this.scrollToY(top + this.lineHeight - this.scroller.clientHeight);
this.scrollToY(top + this.lineHeight - this.$size.scrollerHeight);
}
if (this.scroller.scrollLeft > left) {
this.scroller.scrollLeft = left;
}
if (this.scroller.scrollLeft + this.scroller.clientWidth < left
if (this.scroller.scrollLeft + this.$size.scrollerWidth < left
+ this.characterWidth) {
this.scroller.scrollLeft = Math.round(left + this.characterWidth
- this.scroller.clientWidth);
- this.$size.scrollerWidth);
}
},
@ -354,14 +463,12 @@ var VirtualRenderer = function(container) {
};
this.scrollToY = function(scrollTop) {
var maxHeight = this.lines.length * this.lineHeight
- this.scroller.clientHeight;
var maxHeight = this.lines.length * this.lineHeight - this.$size.scrollerHeight;
var scrollTop = Math.max(0, Math.min(maxHeight, scrollTop));
if (this.scrollTop !== scrollTop) {
this.scrollTop = scrollTop;
this.$updateScrollBar();
this.draw(true);
this.$loop.schedule(this.CHANGE_SCROLL);
}
};
@ -385,11 +492,11 @@ var VirtualRenderer = function(container) {
};
this.visualizeFocus = function() {
ace.addCssClass(this.container, "ace_focus");
dom.addCssClass(this.container, "ace_focus");
};
this.visualizeBlur = function() {
ace.removeCssClass(this.container, "ace_focus");
dom.removeCssClass(this.container, "ace_focus");
};
this.showComposition = function(position) {

18
src/ace/layer/Cursor.js
View file

@ -69,15 +69,27 @@ var Cursor = function(parentEl) {
};
this.getPixelPosition = function() {
return this.pixelPos || {
left : 0,
top : 0
if (!this.config || !this.position) {
return {
left : 0,
top : 0
};
}
var cursorLeft = Math.round(this.position.column * this.config.characterWidth);
var cursorTop = this.position.row * this.config.lineHeight;
return {
left : cursorLeft,
top : cursorTop
};
};
this.update = function(config) {
if (!this.position)
return;
this.config = config;
var cursorLeft = Math.round(this.position.column * config.characterWidth);
var cursorTop = this.position.row * config.lineHeight;

25
src/ace/layer/Text.js
View file

@ -126,12 +126,16 @@ var Text = function(parentEl) {
}
};
this.$scrollLines = function(oldConfig, config) {
if (oldConfig.lastRow < config.firstRow)
return this.$fullUpdate(config);
this.scrollLines = function(config) {
this.$computeTabString();
var oldConfig = this.config;
this.config = config;
if (!oldConfig || oldConfig.lastRow < config.firstRow)
return this.update(config);
if (config.lastRow < oldConfig.firstRow)
return this.$fullUpdate(config);
return this.update(config);
var el = this.element;
@ -175,21 +179,8 @@ var Text = function(parentEl) {
};
this.update = function(config) {
if (!config.minHeight)
return;
this.$computeTabString();
if (this.config && config.scrollOnly) {
this.$scrollLines(this.config, config);
} else {
this.$fullUpdate(config);
}
this.config = config;
};
this.$fullUpdate = function(config) {
var html = [];
for ( var i = config.firstRow; i <= config.lastRow; i++) {
html.push("<div class='ace_line' style='height:" + this.$characterSize.height + "px;", "width:",