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

Merge pull request #347 from Gozala/bugs/paddings-342

Browse source 
Fixing render glitches #342
This commit is contained in:
Fabian Jakobs 2011-07-20 14:15:15 -07:00
commit cf5f5a4e4b
2 changed files with 34 additions and 20 deletions
Download patch file Download diff file Expand all files Collapse all files

2
lib/ace/editor.js
View file

@ -339,7 +339,7 @@ var Editor =function(renderer, session) {
} else { } else {
range = new Range(cursor.row, 0, cursor.row+1, 0); range = new Range(cursor.row, 0, cursor.row+1, 0);
} }
session.$highlightLineMarker = session.addMarker(range, "ace_active_line", "line"); session.$highlightLineMarker = session.addMarker(range, "ace_active_line", "background");
} }
}; };

52
lib/ace/layer/marker.js
View file

@ -55,7 +55,6 @@ var Marker = function(parentEl) {
this.setPadding = function(padding) { this.setPadding = function(padding) {
this.$padding = padding; this.$padding = padding;
}; };
this.setSession = function(session) { this.setSession = function(session) {
this.session = session; this.session = session;
}; };
@ -71,6 +70,7 @@ var Marker = function(parentEl) {
this.config = config; this.config = config;
var html = []; var html = [];
for ( var key in this.markers) { for ( var key in this.markers) {
var marker = this.markers[key]; var marker = this.markers[key];
@ -79,7 +79,6 @@ var Marker = function(parentEl) {
if (range.isEmpty()) continue; if (range.isEmpty()) continue;
range = range.toScreenRange(this.session); range = range.toScreenRange(this.session);
if (marker.renderer) { if (marker.renderer) {
var top = this.$getTop(range.start.row, config); var top = this.$getTop(range.start.row, config);
var left = Math.round(this.$padding + var left = Math.round(this.$padding +
@ -91,11 +90,17 @@ var Marker = function(parentEl) {
if (marker.type == "text") { if (marker.type == "text") {
this.drawTextMarker(html, range, marker.clazz, config); this.drawTextMarker(html, range, marker.clazz, config);
} else { } else {
this.drawMultiLineMarker(html, range, marker.clazz, config); this.drawMultiLineMarker(
html, range, marker.clazz, config,
marker.type === "background"
);
} }
} }
else { else {
this.drawSingleLineMarker(html, range, marker.clazz, config); this.drawSingleLineMarker(
html, range, marker.clazz, config,
null, marker.type === "background"
);
} }
} }
this.element = dom.setInnerHtml(this.element, html.join("")); this.element = dom.setInnerHtml(this.element, html.join(""));
@ -114,11 +119,11 @@ var Marker = function(parentEl) {
this.drawSingleLineMarker(stringBuilder, lineRange, clazz, layerConfig, 1); this.drawSingleLineMarker(stringBuilder, lineRange, clazz, layerConfig, 1);
// selection end // selection end
var row = range.end.row; row = range.end.row;
var lineRange = new Range(row, 0, row, range.end.column); lineRange = new Range(row, 0, row, range.end.column);
this.drawSingleLineMarker(stringBuilder, lineRange, clazz, layerConfig); this.drawSingleLineMarker(stringBuilder, lineRange, clazz, layerConfig);
for (var row = range.start.row + 1; row < range.end.row; row++) { for (row = range.start.row + 1; row < range.end.row; row++) {
lineRange.start.row = row; lineRange.start.row = row;
lineRange.end.row = row; lineRange.end.row = row;
lineRange.end.column = this.session.getScreenLastRowColumn(row); lineRange.end.column = this.session.getScreenLastRowColumn(row);
@ -126,12 +131,16 @@ var Marker = function(parentEl) {
} }
}; };
this.drawMultiLineMarker = function(stringBuilder, range, clazz, layerConfig) { this.drawMultiLineMarker = function(stringBuilder, range, clazz, layerConfig, ignorePadding) {
// from selection start to the end of the line // from selection start to the end of the line
var padding = ignorePadding ? 0 : this.$padding;
var height = layerConfig.lineHeight; var height = layerConfig.lineHeight;
var width = Math.round(layerConfig.width - (range.start.column * layerConfig.characterWidth)); var width = Math.round(layerConfig.width - (range.start.column * layerConfig.characterWidth));
var top = this.$getTop(range.start.row, layerConfig); var top = this.$getTop(range.start.row, layerConfig);
var left = Math.round(range.start.column * layerConfig.characterWidth); var left = Math.round(
padding + range.start.column * layerConfig.characterWidth
);
stringBuilder.push( stringBuilder.push(
"<div class='", clazz, "' style='", "<div class='", clazz, "' style='",
@ -142,36 +151,41 @@ var Marker = function(parentEl) {
); );
// from start of the last line to the selection end // from start of the last line to the selection end
var top = this.$getTop(range.end.row, layerConfig); top = this.$getTop(range.end.row, layerConfig);
var width = Math.round(range.end.column * layerConfig.characterWidth); width = Math.round(range.end.column * layerConfig.characterWidth);
stringBuilder.push( stringBuilder.push(
"<div class='", clazz, "' style='", "<div class='", clazz, "' style='",
"height:", height, "px;", "height:", height, "px;",
"width:", width, "px;",
"top:", top, "px;", "top:", top, "px;",
"width:", width, "px;'></div>" "left:", padding, "px;'></div>"
); );
// all the complete lines // all the complete lines
var height = (range.end.row - range.start.row - 1) * layerConfig.lineHeight; height = (range.end.row - range.start.row - 1) * layerConfig.lineHeight;
if (height < 0) if (height < 0)
return; return;
var top = this.$getTop(range.start.row + 1, layerConfig); top = this.$getTop(range.start.row + 1, layerConfig);
width = layerConfig.width;
stringBuilder.push( stringBuilder.push(
"<div class='", clazz, "' style='", "<div class='", clazz, "' style='",
"height:", height, "px;", "height:", height, "px;",
"width:", layerConfig.width, "px;", "width:", width, "px;",
"top:", top, "px;'></div>" "top:", top, "px;",
"left:", padding, "px;'></div>"
); );
}; };
this.drawSingleLineMarker = function(stringBuilder, range, clazz, layerConfig, extraLength) { this.drawSingleLineMarker = function(stringBuilder, range, clazz, layerConfig, extraLength, ignorePadding) {
var padding = ignorePadding ? 0 : this.$padding;
var height = layerConfig.lineHeight; var height = layerConfig.lineHeight;
var width = Math.round((range.end.column + (extraLength || 0) - range.start.column) * layerConfig.characterWidth); var width = Math.round((range.end.column + (extraLength || 0) - range.start.column) * layerConfig.characterWidth);
var top = this.$getTop(range.start.row, layerConfig); var top = this.$getTop(range.start.row, layerConfig);
var left = Math.round(this.$padding + var left = Math.round(
range.start.column * layerConfig.characterWidth); padding + range.start.column * layerConfig.characterWidth
);
stringBuilder.push( stringBuilder.push(
"<div class='", clazz, "' style='", "<div class='", clazz, "' style='",