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, firstRow : 0,
firstRowScreen: 0, firstRowScreen: 0,
lastRow : 0, lastRow : 0,
lineHeight : 1,
characterWidth : 1,
minHeight : 1, minHeight : 1,
maxHeight : 1, maxHeight : 1,
offset : 0, offset : 0,
@ -74,9 +72,9 @@ var Window = exports.Window = function(theme) {
scrollerWidth: 0 scrollerWidth: 0
}; };
this.characterSize = { this.charSize = {
height: 0, height: 1,
width: 0 width: 1
}; };
this.scrollLeft = 0; this.scrollLeft = 0;
@ -109,7 +107,7 @@ var Window = exports.Window = function(theme) {
}; };
this.getLastFullyVisibleRow = function() { 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; return this.layerConfig.firstRow - 1 + flint;
}; };
@ -123,10 +121,10 @@ var Window = exports.Window = function(theme) {
var position = this.buffer.selection.getCursor(); var position = this.buffer.selection.getCursor();
var pos = this.buffer.documentToScreenPosition(position); var pos = this.buffer.documentToScreenPosition(position);
var cursorLeft = Math.round( 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)) var cursorTop = (pos.row - (onScreen ? this.layerConfig.firstRowScreen : 0))
* this.characterSize.height; * this.charSize.height;
return { return {
left : cursorLeft, 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 * Returns the height in pixels required to render this row on the screen
**/ **/
this.getRowHeight = function(row) { this.getRowHeight = function(row) {
return this.buffer.getRowLength(row) * this.characterSize.height; return this.buffer.getRowLength(row) * this.charSize.height;
}; };
// SCROLLING // SCROLLING
@ -177,15 +175,15 @@ var Window = exports.Window = function(theme) {
}; };
this.getScrollTopRow = function() { this.getScrollTopRow = function() {
return this.scrollTop / this.characterSize.height; return this.scrollTop / this.charSize.height;
}; };
this.getScrollBottomRow = function() { 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.scrollToRow = function(row) {
this.scrollToY(row * this.characterSize.height); this.scrollToY(row * this.charSize.height);
}; };
this.scrollToLine = function(line, center) { this.scrollToLine = function(line, center) {
@ -213,8 +211,8 @@ var Window = exports.Window = function(theme) {
this.scrollToY(top); this.scrollToY(top);
} }
if (this.scrollTop + this.size.scrollerHeight < top + this.characterSize.height) if (this.scrollTop + this.size.scrollerHeight < top + this.charSize.height)
this.scrollToY(top + this.characterSize.height - this.size.scrollerHeight); this.scrollToY(top + this.charSize.height - this.size.scrollerHeight);
var scrollLeft = this.scrollLeft; var scrollLeft = this.scrollLeft;
@ -222,8 +220,8 @@ var Window = exports.Window = function(theme) {
this.scrollToX(left); this.scrollToX(left);
} }
if (scrollLeft + this.size.scrollerWidth < left + this.characterSize.width) if (scrollLeft + this.size.scrollerWidth < left + this.charSize.width)
this.scrollToX(Math.round(left + this.characterSize.width - this.size.scrollerWidth)); this.scrollToX(Math.round(left + this.charSize.width - this.size.scrollerWidth));
}; };
// SETTINGS // SETTINGS
@ -336,10 +334,10 @@ var Window = exports.Window = function(theme) {
}; };
this.setComputedCharacterSize = function(size) { 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; return;
this.characterSize = size; this.charSize = size;
this._emit("changeCharacterSize") 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.update = function(config) {
this.pixelPos = this.model.getCursorPixelPosition(true); 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.left = this.pixelPos.left + "px";
this.cursor.style.top = this.pixelPos.top + "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 buffer = this.model.buffer;
var fold = buffer.getNextFold(i); var fold = buffer.getNextFold(i);
var foldStart = fold ? fold.start.row : Infinity; var foldStart = fold ? fold.start.row : Infinity;
var lineHeight = this.model.charSize.height;
while (true) { while (true) {
if(i > foldStart) { if(i > foldStart) {
@ -120,12 +121,11 @@ var Gutter = function(model, parentEl) {
this.$breakpoints[i] ? " ace_breakpoint " : " ", this.$breakpoints[i] ? " ace_breakpoint " : " ",
annotation.className, annotation.className,
"' title='", annotation.text.join("\n"), "' title='", annotation.text.join("\n"),
"' style='height:", config.lineHeight, "px;'>", (i+1)); "' style='height:", lineHeight, "px;'>", (i+1));
var wrappedRowLength = buffer.getRowLength(i) - 1; var wrappedRowLength = buffer.getRowLength(i) - 1;
while (wrappedRowLength--) { while (wrappedRowLength--)
html.push("</div><div class='ace_gutter-cell' style='height:", config.lineHeight, "px'>&brvbar;</div>"); html.push("</div><div class='ace_gutter-cell' style='height:", lineHeight, "px'>&brvbar;</div>");
}
html.push("</div>"); html.push("</div>");

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

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

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

@ -283,7 +283,7 @@ var Text = function(model, parentEl) {
} else { } else {
screenColumn += 1; screenColumn += 1;
return "<span class='ace_cjk' style='width:" + return "<span class='ace_cjk' style='width:" +
(self.config.characterWidth * 2) + (self.model.charSize.width * 2) +
"px'>" + c + "</span>"; "px'>" + c + "</span>";
} }
}; };
@ -304,8 +304,8 @@ var Text = function(model, parentEl) {
var chars = 0; var chars = 0;
var split = 0; var split = 0;
var splitChars; var splitChars;
var characterWidth = this.config.characterWidth;
var screenColumn = 0; var screenColumn = 0;
var charSize = this.model.charSize;
var self = this; var self = this;
if (!splits || splits.length == 0) if (!splits || splits.length == 0)
@ -315,7 +315,7 @@ var Text = function(model, parentEl) {
if (!onlyContents) { if (!onlyContents) {
stringBuilder.push("<div class='ace_line' style='height:", 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) { if (!onlyContents) {
stringBuilder.push("</div>", stringBuilder.push("</div>",
"<div class='ace_line' style='height:", "<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")); var textLayer = new TextLayer(document.createElement("div"));
textLayer.setSession(session); textLayer.setSession(session);
textLayer.$computeTabString(); textLayer.$computeTabString();
// TODO refactor
textLayer.config = { textLayer.config = {
characterWidth: 10, characterWidth: 10,
lineHeight: 20 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) { var MeasureText = exports.MeasureText = function(parentEl, interval) {
this.parentEl = parentEl; this.parentEl = parentEl;
this.$characterSize = this.$measureSizes() || {width: 0, height: 0}; this.$charSize = this.$measureSizes() || {width: 0, height: 0};
this.$pollSizeChanges(interval); this.$pollSizeChanges(interval);
}; };
@ -56,15 +56,15 @@ var MeasureText = exports.MeasureText = function(parentEl, interval) {
this.getCharacterSize = function() { this.getCharacterSize = function() {
return { return {
height: this.$characterSize.height || 1, height: this.$charSize.height || 1,
width: this.$characterSize.width || 1 width: this.$charSize.width || 1
} }
}; };
this.checkForSizeChanges = function() { this.checkForSizeChanges = function() {
var size = this.$measureSizes(); var size = this.$measureSizes();
if (size && (this.$characterSize.width !== size.width || this.$characterSize.height !== size.height)) { if (size && (this.$charSize.width !== size.width || this.$charSize.height !== size.height)) {
this.$characterSize = size; this.$charSize = size;
this._emit("changeCharacterSize", {data: 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(){ this.adjustWrapLimit = function(){
var availableWidth = this.model.size.scrollerWidth - this.model.padding * 2; 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); return this.session.adjustWrapLimit(limit);
}; };
@ -257,7 +257,7 @@ var WindowView = function(windowModel, container) {
} }
var style = this.$printMarginEl.style; 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"; style.visibility = this.model.showPrintMargin ? "visible" : "hidden";
}; };
@ -301,10 +301,6 @@ var WindowView = function(windowModel, container) {
}; };
this.updateCharacterSize = function() { this.updateCharacterSize = function() {
var size = this.$measureText.getCharacterSize();
this.characterWidth = size.width;
this.lineHeight = size.height;
this.updatePrintMargin(); this.updatePrintMargin();
this.onResize(true); this.onResize(true);
this.$loop.schedule(this.CHANGE_FULL); this.$loop.schedule(this.CHANGE_FULL);
@ -389,8 +385,9 @@ var WindowView = function(windowModel, container) {
this.$computeLayerConfig = function() { this.$computeLayerConfig = function() {
var session = this.session; var session = this.session;
var offset = this.model.scrollTop % this.lineHeight; var charSize = this.model.charSize;
var minHeight = this.model.size.scrollerHeight + this.lineHeight; var offset = this.model.scrollTop % charSize.height;
var minHeight = this.model.size.scrollerHeight + charSize.height;
var longestLine = this.$getLongestLine(); var longestLine = this.$getLongestLine();
var widthChanged = this.model.layerConfig.width != longestLine; var widthChanged = this.model.layerConfig.width != longestLine;
@ -401,11 +398,11 @@ var WindowView = function(windowModel, container) {
if (horizScrollChanged) if (horizScrollChanged)
this.scroller.style.overflowX = horizScroll ? "scroll" : "hidden"; 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))); 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 lineCount = Math.ceil(minHeight / charSize.height) - 1;
var firstRow = Math.max(0, Math.round((this.model.scrollTop - offset) / this.lineHeight)); var firstRow = Math.max(0, Math.round((this.model.scrollTop - offset) / charSize.height));
var lastRow = firstRow + lineCount; var lastRow = firstRow + lineCount;
// Map lines on the screen to lines in the document. // Map lines on the screen to lines in the document.
@ -427,7 +424,7 @@ var WindowView = function(windowModel, container) {
+ this.model.getRowHeight(lastRow) + this.model.getRowHeight(lastRow)
+ firstRowHeight; + firstRowHeight;
offset = this.model.scrollTop - firstRowScreen * this.lineHeight; offset = this.model.scrollTop - firstRowScreen * charSize.height;
this.model.layerConfig = { this.model.layerConfig = {
width : longestLine, width : longestLine,
@ -435,8 +432,6 @@ var WindowView = function(windowModel, container) {
firstRow : firstRow, firstRow : firstRow,
firstRowScreen: firstRowScreen, firstRowScreen: firstRowScreen,
lastRow : lastRow, lastRow : lastRow,
lineHeight : this.lineHeight,
characterWidth : this.characterWidth,
minHeight : minHeight, minHeight : minHeight,
maxHeight : maxHeight, maxHeight : maxHeight,
offset : offset, offset : offset,
@ -488,7 +483,7 @@ var WindowView = function(windowModel, container) {
if (this.model.showInvisibles) if (this.model.showInvisibles)
charCount += 1; 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() { this.updateFrontMarkers = function() {
@ -545,19 +540,20 @@ var WindowView = function(windowModel, container) {
var canvasPos = this.scroller.getBoundingClientRect(); var canvasPos = this.scroller.getBoundingClientRect();
var col = Math.round((pageX + this.model.scrollLeft - canvasPos.left - this.model.padding - dom.getPageScrollLeft()) 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()) 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)); return this.session.screenToDocumentPosition(row, Math.max(col, 0));
}; };
this.textToScreenCoordinates = function(row, column) { this.textToScreenCoordinates = function(row, column) {
var charSize = this.model.charSize;
var canvasPos = this.scroller.getBoundingClientRect(); var canvasPos = this.scroller.getBoundingClientRect();
var pos = this.session.documentToScreenPosition(row, column); var pos = this.session.documentToScreenPosition(row, column);
var x = this.model.padding + Math.round(pos.column * this.characterWidth); var x = this.model.padding + Math.round(pos.column * charSize.width);
var y = pos.row * this.lineHeight; var y = pos.row * charSize.height;
return { return {
pageX: canvasPos.left + x - this.model.scrollLeft, pageX: canvasPos.left + x - this.model.scrollLeft,
@ -586,7 +582,7 @@ var WindowView = function(windowModel, container) {
var style = this.$composition.style; var style = this.$composition.style;
style.top = pos.top + "px"; style.top = pos.top + "px";
style.left = (pos.left + this.model.padding) + "px"; style.left = (pos.left + this.model.padding) + "px";
style.height = this.lineHeight + "px"; style.height = this.model.charSize.height + "px";
this.hideCursor(); this.hideCursor();
}; };

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

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