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

don't use layerConfig.{lineHeight,characterHeight}

Browse source 
anymore
This commit is contained in:
Fabian Jakobs 2011-07-29 12:45:35 +02:00
commit 82e2920599
9 changed files with 66 additions and 76 deletions
Download patch file Download diff file Expand all files Collapse all files

34
lib/ace/model/window.js
View file

@ -59,8 +59,6 @@ var Window = exports.Window = function(theme) {
firstRow : 0,
firstRowScreen: 0,
lastRow : 0,
lineHeight : 1,
characterWidth : 1,
minHeight : 1,
maxHeight : 1,
offset : 0,
@ -74,9 +72,9 @@ var Window = exports.Window = function(theme) {
scrollerWidth: 0
};
this.characterSize = {
height: 0,
width: 0
this.charSize = {
height: 1,
width: 1
};
this.scrollLeft = 0;
@ -109,7 +107,7 @@ var Window = exports.Window = function(theme) {
};
this.getLastFullyVisibleRow = function() {
var flint = Math.floor((this.layerConfig.height + this.layerConfig.offset) / this.characterSize.height);
var flint = Math.floor((this.layerConfig.height + this.layerConfig.offset) / this.charSize.height);
return this.layerConfig.firstRow - 1 + flint;
};
@ -123,10 +121,10 @@ var Window = exports.Window = function(theme) {
var position = this.buffer.selection.getCursor();
var pos = this.buffer.documentToScreenPosition(position);
var cursorLeft = Math.round(
this.padding + pos.column * this.characterSize.width
this.padding + pos.column * this.charSize.width
);
var cursorTop = (pos.row - (onScreen ? this.layerConfig.firstRowScreen : 0))
* this.characterSize.height;
* this.charSize.height;
return {
left : cursorLeft,
@ -138,7 +136,7 @@ var Window = exports.Window = function(theme) {
* Returns the height in pixels required to render this row on the screen
**/
this.getRowHeight = function(row) {
return this.buffer.getRowLength(row) * this.characterSize.height;
return this.buffer.getRowLength(row) * this.charSize.height;
};
// SCROLLING
@ -177,15 +175,15 @@ var Window = exports.Window = function(theme) {
};
this.getScrollTopRow = function() {
return this.scrollTop / this.characterSize.height;
return this.scrollTop / this.charSize.height;
};
this.getScrollBottomRow = function() {
return Math.max(0, Math.floor((this.scrollTop + this.size.scrollerHeight) / this.characterSize.height) - 1);
return Math.max(0, Math.floor((this.scrollTop + this.size.scrollerHeight) / this.charSize.height) - 1);
};
this.scrollToRow = function(row) {
this.scrollToY(row * this.characterSize.height);
this.scrollToY(row * this.charSize.height);
};
this.scrollToLine = function(line, center) {
@ -213,8 +211,8 @@ var Window = exports.Window = function(theme) {
this.scrollToY(top);
}
if (this.scrollTop + this.size.scrollerHeight < top + this.characterSize.height)
this.scrollToY(top + this.characterSize.height - this.size.scrollerHeight);
if (this.scrollTop + this.size.scrollerHeight < top + this.charSize.height)
this.scrollToY(top + this.charSize.height - this.size.scrollerHeight);
var scrollLeft = this.scrollLeft;
@ -222,8 +220,8 @@ var Window = exports.Window = function(theme) {
this.scrollToX(left);
}
if (scrollLeft + this.size.scrollerWidth < left + this.characterSize.width)
this.scrollToX(Math.round(left + this.characterSize.width - this.size.scrollerWidth));
if (scrollLeft + this.size.scrollerWidth < left + this.charSize.width)
this.scrollToX(Math.round(left + this.charSize.width - this.size.scrollerWidth));
};
// SETTINGS
@ -336,10 +334,10 @@ var Window = exports.Window = function(theme) {
};
this.setComputedCharacterSize = function(size) {
if (this.characterSize.height == size.height && this.characterSize.width == size.width)
if (this.charSize.height == size.height && this.charSize.width == size.width)
return;
this.characterSize = size;
this.charSize = size;
this._emit("changeCharacterSize")
}

2
lib/ace/view/layer/cursor.js
View file

@ -88,7 +88,7 @@ var Cursor = function(model, parentEl) {
this.update = function(config) {
this.pixelPos = this.model.getCursorPixelPosition(true);
var charSize = this.model.characterSize;
var charSize = this.model.charSize;
this.cursor.style.left = this.pixelPos.left + "px";
this.cursor.style.top = this.pixelPos.top + "px";

8
lib/ace/view/layer/gutter.js
View file

@ -104,6 +104,7 @@ var Gutter = function(model, parentEl) {
var buffer = this.model.buffer;
var fold = buffer.getNextFold(i);
var foldStart = fold ? fold.start.row : Infinity;
var lineHeight = this.model.charSize.height;
while (true) {
if(i > foldStart) {
@ -120,12 +121,11 @@ var Gutter = function(model, parentEl) {
this.$breakpoints[i] ? " ace_breakpoint " : " ",
annotation.className,
"' title='", annotation.text.join("\n"),
"' style='height:", config.lineHeight, "px;'>", (i+1));
"' style='height:", lineHeight, "px;'>", (i+1));
var wrappedRowLength = buffer.getRowLength(i) - 1;
while (wrappedRowLength--) {
html.push("</div><div class='ace_gutter-cell' style='height:", config.lineHeight, "px'>&brvbar;</div>");
}
while (wrappedRowLength--)
html.push("</div><div class='ace_gutter-cell' style='height:", lineHeight, "px'>&brvbar;</div>");
html.push("</div>");

40
lib/ace/view/layer/marker.js
View file

@ -62,7 +62,7 @@ var Marker = function(model, parentEl) {
return;
this.config = config;
var model = this.model;
var html = [];
for ( var key in this.markers) {
@ -73,9 +73,9 @@ var Marker = function(model, parentEl) {
range = range.toScreenRange(this.model.buffer);
if (marker.renderer) {
var top = this.$getTop(range.start.row, config);
var top = this.$getTop(range.start.row);
var left = Math.round(
this.model.padding + range.start.column * config.characterWidth
this.model.padding + range.start.column * model.charSize.width
);
marker.renderer(html, range, left, top, config);
}
@ -99,8 +99,8 @@ var Marker = function(model, parentEl) {
this.element = dom.setInnerHtml(this.element, html.join(""));
};
this.$getTop = function(row, layerConfig) {
return (row - layerConfig.firstRowScreen) * layerConfig.lineHeight;
this.$getTop = function(row) {
return (row - this.model.layerConfig.firstRowScreen) * this.model.charSize.height;
};
/**
@ -134,13 +134,12 @@ var Marker = function(model, parentEl) {
*/
this.drawMultiLineMarker = function(stringBuilder, range, clazz, layerConfig, type) {
// from selection start to the end of the line
var charSize = this.model.charSize;
var padding = type === "background" ? 0 : this.model.padding;
var height = layerConfig.lineHeight;
var width = Math.round(layerConfig.width - (range.start.column * layerConfig.characterWidth));
var top = this.$getTop(range.start.row, layerConfig);
var left = Math.round(
padding + range.start.column * layerConfig.characterWidth
);
var height = charSize.height;
var width = Math.round(layerConfig.width - (range.start.column * charSize.width));
var top = this.$getTop(range.start.row);
var left = Math.round(padding + range.start.column * charSize.width);
stringBuilder.push(
"<div class='", clazz, "' style='",
@ -151,8 +150,8 @@ var Marker = function(model, parentEl) {
);
// from start of the last line to the selection end
top = this.$getTop(range.end.row, layerConfig);
width = Math.round(range.end.column * layerConfig.characterWidth);
top = this.$getTop(range.end.row);
width = Math.round(range.end.column * charSize.width);
stringBuilder.push(
"<div class='", clazz, "' style='",
@ -163,10 +162,10 @@ var Marker = function(model, parentEl) {
);
// all the complete lines
height = (range.end.row - range.start.row - 1) * layerConfig.lineHeight;
height = (range.end.row - range.start.row - 1) * charSize.height;
if (height < 0)
return;
top = this.$getTop(range.start.row + 1, layerConfig);
top = this.$getTop(range.start.row + 1);
width = layerConfig.width;
stringBuilder.push(
@ -182,18 +181,17 @@ var Marker = function(model, parentEl) {
* Draws a marker which covers one single full line
*/
this.drawSingleLineMarker = function(stringBuilder, range, clazz, layerConfig, extraLength, type) {
var charSize = this.model.charSize;
var padding = type === "background" ? 0 : this.model.padding;
var height = layerConfig.lineHeight;
var height = charSize.height;
if (type === "background")
var width = layerConfig.width;
else
width = Math.round((range.end.column + (extraLength || 0) - range.start.column) * layerConfig.characterWidth);
width = Math.round((range.end.column + (extraLength || 0) - range.start.column) * charSize.width);
var top = this.$getTop(range.start.row, layerConfig);
var left = Math.round(
padding + range.start.column * layerConfig.characterWidth
);
var top = this.$getTop(range.start.row);
var left = Math.round(padding + range.start.column * charSize.width);
stringBuilder.push(
"<div class='", clazz, "' style='",

8
lib/ace/view/layer/text.js
View file

@ -283,7 +283,7 @@ var Text = function(model, parentEl) {
} else {
screenColumn += 1;
return "<span class='ace_cjk' style='width:" +
(self.config.characterWidth * 2) +
(self.model.charSize.width * 2) +
"px'>" + c + "</span>";
}
};
@ -304,8 +304,8 @@ var Text = function(model, parentEl) {
var chars = 0;
var split = 0;
var splitChars;
var characterWidth = this.config.characterWidth;
var screenColumn = 0;
var charSize = this.model.charSize;
var self = this;
if (!splits || splits.length == 0)
@ -315,7 +315,7 @@ var Text = function(model, parentEl) {
if (!onlyContents) {
stringBuilder.push("<div class='ace_line' style='height:",
this.config.lineHeight, "px",
charSize.height, "px",
"'>"
);
}
@ -342,7 +342,7 @@ var Text = function(model, parentEl) {
if (!onlyContents) {
stringBuilder.push("</div>",
"<div class='ace_line' style='height:",
this.config.lineHeight, "px",
charSize.height, "px",
"'>"
);
}

1
lib/ace/view/layer/text_text.js
View file

@ -55,6 +55,7 @@ module.exports = {
var textLayer = new TextLayer(document.createElement("div"));
textLayer.setSession(session);
textLayer.$computeTabString();
// TODO refactor
textLayer.config = {
characterWidth: 10,
lineHeight: 20

10
lib/ace/view/measure_text.js
View file

@ -46,7 +46,7 @@ var EventEmitter = require("ace/lib/event_emitter").EventEmitter;
var MeasureText = exports.MeasureText = function(parentEl, interval) {
this.parentEl = parentEl;
this.$characterSize = this.$measureSizes() || {width: 0, height: 0};
this.$charSize = this.$measureSizes() || {width: 0, height: 0};
this.$pollSizeChanges(interval);
};
@ -56,15 +56,15 @@ var MeasureText = exports.MeasureText = function(parentEl, interval) {
this.getCharacterSize = function() {
return {
height: this.$characterSize.height || 1,
width: this.$characterSize.width || 1
height: this.$charSize.height || 1,
width: this.$charSize.width || 1
}
};
this.checkForSizeChanges = function() {
var size = this.$measureSizes();
if (size && (this.$characterSize.width !== size.width || this.$characterSize.height !== size.height)) {
this.$characterSize = size;
if (size && (this.$charSize.width !== size.width || this.$charSize.height !== size.height)) {
this.$charSize = size;
this._emit("changeCharacterSize", {data: size});
}
};

36
lib/ace/view/window_view.js
View file

@ -218,7 +218,7 @@ var WindowView = function(windowModel, container) {
this.adjustWrapLimit = function(){
var availableWidth = this.model.size.scrollerWidth - this.model.padding * 2;
var limit = Math.floor(availableWidth / this.characterWidth) - 1;
var limit = Math.floor(availableWidth / this.model.charSize.width) - 1;
return this.session.adjustWrapLimit(limit);
};
@ -257,7 +257,7 @@ var WindowView = function(windowModel, container) {
}
var style = this.$printMarginEl.style;
style.left = ((this.characterWidth * this.model.printMarginColumn) + this.model.padding * 2) + "px";
style.left = ((this.model.charSize.width * this.model.printMarginColumn) + this.model.padding * 2) + "px";
style.visibility = this.model.showPrintMargin ? "visible" : "hidden";
};
@ -301,10 +301,6 @@ var WindowView = function(windowModel, container) {
};
this.updateCharacterSize = function() {
var size = this.$measureText.getCharacterSize();
this.characterWidth = size.width;
this.lineHeight = size.height;
this.updatePrintMargin();
this.onResize(true);
this.$loop.schedule(this.CHANGE_FULL);
@ -389,8 +385,9 @@ var WindowView = function(windowModel, container) {
this.$computeLayerConfig = function() {
var session = this.session;
var offset = this.model.scrollTop % this.lineHeight;
var minHeight = this.model.size.scrollerHeight + this.lineHeight;
var charSize = this.model.charSize;
var offset = this.model.scrollTop % charSize.height;
var minHeight = this.model.size.scrollerHeight + charSize.height;
var longestLine = this.$getLongestLine();
var widthChanged = this.model.layerConfig.width != longestLine;
@ -401,11 +398,11 @@ var WindowView = function(windowModel, container) {
if (horizScrollChanged)
this.scroller.style.overflowX = horizScroll ? "scroll" : "hidden";
var maxHeight = this.session.getScreenLength() * this.lineHeight;
var maxHeight = this.session.getScreenLength() * charSize.height;
this.model.scrollToY(Math.max(0, Math.min(this.model.scrollTop, maxHeight - this.model.size.scrollerHeight)));
var lineCount = Math.ceil(minHeight / this.lineHeight) - 1;
var firstRow = Math.max(0, Math.round((this.model.scrollTop - offset) / this.lineHeight));
var lineCount = Math.ceil(minHeight / charSize.height) - 1;
var firstRow = Math.max(0, Math.round((this.model.scrollTop - offset) / charSize.height));
var lastRow = firstRow + lineCount;
// Map lines on the screen to lines in the document.
@ -427,7 +424,7 @@ var WindowView = function(windowModel, container) {
+ this.model.getRowHeight(lastRow)
+ firstRowHeight;
offset = this.model.scrollTop - firstRowScreen * this.lineHeight;
offset = this.model.scrollTop - firstRowScreen * charSize.height;
this.model.layerConfig = {
width : longestLine,
@ -435,8 +432,6 @@ var WindowView = function(windowModel, container) {
firstRow : firstRow,
firstRowScreen: firstRowScreen,
lastRow : lastRow,
lineHeight : this.lineHeight,
characterWidth : this.characterWidth,
minHeight : minHeight,
maxHeight : maxHeight,
offset : offset,
@ -488,7 +483,7 @@ var WindowView = function(windowModel, container) {
if (this.model.showInvisibles)
charCount += 1;
return Math.max(this.model.size.scrollerWidth, Math.round(charCount * this.characterWidth));
return Math.max(this.model.size.scrollerWidth, Math.round(charCount * this.model.charSize.width));
};
this.updateFrontMarkers = function() {
@ -545,19 +540,20 @@ var WindowView = function(windowModel, container) {
var canvasPos = this.scroller.getBoundingClientRect();
var col = Math.round((pageX + this.model.scrollLeft - canvasPos.left - this.model.padding - dom.getPageScrollLeft())
/ this.characterWidth);
/ this.model.charSize.width);
var row = Math.floor((pageY + this.model.scrollTop - canvasPos.top - dom.getPageScrollTop())
/ this.lineHeight);
/ this.model.charSize.height);
return this.session.screenToDocumentPosition(row, Math.max(col, 0));
};
this.textToScreenCoordinates = function(row, column) {
var charSize = this.model.charSize;
var canvasPos = this.scroller.getBoundingClientRect();
var pos = this.session.documentToScreenPosition(row, column);
var x = this.model.padding + Math.round(pos.column * this.characterWidth);
var y = pos.row * this.lineHeight;
var x = this.model.padding + Math.round(pos.column * charSize.width);
var y = pos.row * charSize.height;
return {
pageX: canvasPos.left + x - this.model.scrollLeft,
@ -586,7 +582,7 @@ var WindowView = function(windowModel, container) {
var style = this.$composition.style;
style.top = pos.top + "px";
style.left = (pos.left + this.model.padding) + "px";
style.height = this.lineHeight + "px";
style.height = this.model.charSize.height + "px";
this.hideCursor();
};

3
lib/ace/view/window_view_test.js
View file

@ -69,9 +69,6 @@ module.exports = {
renderer.setPadding(0);
renderer.setSession(new Buffer("1234"));
renderer.characterWidth = 10;
renderer.lineHeight = 15;
assert.position(renderer.screenToTextCoordinates(0, 0), 0, 0);
assert.position(renderer.screenToTextCoordinates(4, 0), 0, 0);
assert.position(renderer.screenToTextCoordinates(5, 0), 0, 1);