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

have two marker layers. One in front and one behind the text.

Browse source
This commit is contained in:
Fabian Jakobs 2011-02-12 15:25:14 +01:00
commit e37dc3f7e4
1 changed files with 37 additions and 15 deletions
Download patch file Download diff file Expand all files Collapse all files

52
lib/ace/virtual_renderer.js
View file

@ -75,19 +75,19 @@ 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.$markerLayer = 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);
this.canvas = textLayer.element; this.canvas = textLayer.element;
this.$markerFront = new MarkerLayer(this.content);
this.characterWidth = textLayer.getCharacterWidth(); this.characterWidth = textLayer.getCharacterWidth();
this.lineHeight = textLayer.getLineHeight(); this.lineHeight = textLayer.getLineHeight();
this.$cursorLayer = new CursorLayer(this.content); this.$cursorLayer = new CursorLayer(this.content);
this.$cursorPadding = 8; this.$cursorPadding = 8;
this.layers = [ this.$markerLayer, textLayer, this.$cursorLayer ];
this.scrollBar = new ScrollBar(container); this.scrollBar = new ScrollBar(container);
this.scrollBar.addEventListener("scroll", this.onScroll.bind(this)); this.scrollBar.addEventListener("scroll", this.onScroll.bind(this));
@ -133,14 +133,17 @@ var VirtualRenderer = function(container, theme) {
this.CHANGE_LINES = 16; this.CHANGE_LINES = 16;
this.CHANGE_TEXT = 32; this.CHANGE_TEXT = 32;
this.CHANGE_SIZE = 64; this.CHANGE_SIZE = 64;
this.CHANGE_FULL = 128; this.CHANGE_MARKER_BACK = 128;
this.CHANGE_MARKER_FRONT = 256;
this.CHANGE_FULL = 512;
oop.implement(this, EventEmitter); oop.implement(this, EventEmitter);
this.setSession = function(session) { this.setSession = function(session) {
this.session = session; this.session = session;
this.$cursorLayer.setSession(session); this.$cursorLayer.setSession(session);
this.$markerLayer.setSession(session); this.$markerBack.setSession(session);
this.$markerFront.setSession(session);
this.$gutterLayer.setSession(session); this.$gutterLayer.setSession(session);
this.$textLayer.setSession(session); this.$textLayer.setSession(session);
this.$loop.schedule(this.CHANGE_FULL); this.$loop.schedule(this.CHANGE_FULL);
@ -384,7 +387,8 @@ var VirtualRenderer = function(container, theme) {
if (changes & this.CHANGE_FULL) { if (changes & this.CHANGE_FULL) {
this.$textLayer.update(this.layerConfig); this.$textLayer.update(this.layerConfig);
this.showGutter && this.$gutterLayer.update(this.layerConfig); this.showGutter && this.$gutterLayer.update(this.layerConfig);
this.$markerLayer.update(this.layerConfig); this.$markerBack.update(this.layerConfig);
this.$markerFront.update(this.layerConfig);
this.$cursorLayer.update(this.layerConfig); this.$cursorLayer.update(this.layerConfig);
this.$updateScrollBar(); this.$updateScrollBar();
this.scrollCursorIntoView(); this.scrollCursorIntoView();
@ -398,7 +402,8 @@ var VirtualRenderer = function(container, theme) {
else else
this.$textLayer.scrollLines(this.layerConfig); this.$textLayer.scrollLines(this.layerConfig);
this.showGutter && this.$gutterLayer.update(this.layerConfig); this.showGutter && this.$gutterLayer.update(this.layerConfig);
this.$markerLayer.update(this.layerConfig); this.$markerBack.update(this.layerConfig);
this.$markerFront.update(this.layerConfig);
this.$cursorLayer.update(this.layerConfig); this.$cursorLayer.update(this.layerConfig);
this.$updateScrollBar(); this.$updateScrollBar();
return; return;
@ -419,8 +424,12 @@ var VirtualRenderer = function(container, theme) {
if (changes & this.CHANGE_CURSOR) if (changes & this.CHANGE_CURSOR)
this.$cursorLayer.update(this.layerConfig); this.$cursorLayer.update(this.layerConfig);
if (changes & this.CHANGE_MARKER) { if (changes & (this.CHANGE_MARKER | this.CHANGE_MARKER_FRONT)) {
this.$markerLayer.update(this.layerConfig); this.$markerFront.update(this.layerConfig);
}
if (changes & (this.CHANGE_MARKER | this.CHANGE_MARKER_BACK)) {
this.$markerBack.update(this.layerConfig);
} }
if (changes & this.CHANGE_SIZE) if (changes & this.CHANGE_SIZE)
@ -505,15 +514,28 @@ var VirtualRenderer = function(container, theme) {
return Math.max(this.$size.scrollerWidth - this.$padding * 2, Math.round(charCount * this.characterWidth)); return Math.max(this.$size.scrollerWidth - this.$padding * 2, Math.round(charCount * this.characterWidth));
}; };
this.addMarker = function(range, clazz, type) { this.addMarker = function(range, clazz, type, inFront) {
var id = this.$markerLayer.addMarker(range, clazz, type); if (inFront) {
this.$loop.schedule(this.CHANGE_MARKER); var id = this.$markerFront.addMarker(range, clazz, type);
return id; this.$loop.schedule(this.CHANGE_MARKER_FRONT);
}
else {
var id = this.$markerBack.addMarker(range, clazz, type);
this.$loop.schedule(this.CHANGE_MARKER_BACK);
}
return [id, !!inFront];
}; };
this.removeMarker = function(markerId) { this.removeMarker = function(markerId) {
this.$markerLayer.removeMarker(markerId); if (markerId[1]) {
this.$loop.schedule(this.CHANGE_MARKER); this.$markerFront.removeMarker(markerId[0]);
this.$loop.schedule(this.CHANGE_MARKER_FRONT);
}
else {
this.$markerBack.removeMarker(markerId[0]);
this.$loop.schedule(this.CHANGE_MARKER_BACK);
}
}; };
this.addGutterDecoration = function(row, className){ this.addGutterDecoration = function(row, className){