move text measuring into separate module
This commit is contained in:
nightwing
parent
f4d1dc7c13
commit
f352165725
4 changed files with 183 additions and 127 deletions
|
|
@ -2393,14 +2393,17 @@ var EditSession = function(text, mode) {
|
|||
|
||||
return screenRows;
|
||||
};
|
||||
|
||||
// For every keystroke this gets called once per char in the whole doc!!
|
||||
// Wouldn't hurt to make it a bit faster for c >= 0x1100
|
||||
|
||||
|
||||
/**
|
||||
* @private
|
||||
*
|
||||
*/
|
||||
this.$setFontMetrics = function(fm) {
|
||||
// todo
|
||||
}
|
||||
|
||||
// For every keystroke this gets called once per char in the whole doc!!
|
||||
// Wouldn't hurt to make it a bit faster for c >= 0x1100
|
||||
function isFullWidth(c) {
|
||||
if (c < 0x1100)
|
||||
return false;
|
||||
|
|
|
|||
158
lib/ace/layer/font_metrics.js
Normal file
158
lib/ace/layer/font_metrics.js
Normal file
|
|
@ -0,0 +1,158 @@
|
|||
/* ***** BEGIN LICENSE BLOCK *****
|
||||
* Distributed under the BSD license:
|
||||
*
|
||||
* Copyright (c) 2010, Ajax.org B.V.
|
||||
* All rights reserved.
|
||||
*
|
||||
* Redistribution and use in source and binary forms, with or without
|
||||
* modification, are permitted provided that the following conditions are met:
|
||||
* * Redistributions of source code must retain the above copyright
|
||||
* notice, this list of conditions and the following disclaimer.
|
||||
* * Redistributions in binary form must reproduce the above copyright
|
||||
* notice, this list of conditions and the following disclaimer in the
|
||||
* documentation and/or other materials provided with the distribution.
|
||||
* * Neither the name of Ajax.org B.V. nor the
|
||||
* names of its contributors may be used to endorse or promote products
|
||||
* derived from this software without specific prior written permission.
|
||||
*
|
||||
* THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS "AS IS" AND
|
||||
* ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO, THE IMPLIED
|
||||
* WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR PURPOSE ARE
|
||||
* DISCLAIMED. IN NO EVENT SHALL AJAX.ORG B.V. BE LIABLE FOR ANY
|
||||
* DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES
|
||||
* (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES;
|
||||
* LOSS OF USE, DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND
|
||||
* ON ANY THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT
|
||||
* (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE OF THIS
|
||||
* SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.
|
||||
*
|
||||
* ***** END LICENSE BLOCK ***** */
|
||||
|
||||
define(function(require, exports, module) {
|
||||
|
||||
var oop = require("../lib/oop");
|
||||
var dom = require("../lib/dom");
|
||||
var lang = require("../lib/lang");
|
||||
var EventEmitter = require("../lib/event_emitter").EventEmitter;
|
||||
|
||||
var CHAR_COUNT = 0;
|
||||
|
||||
var FontMetrics = exports.FontMetrics = function(parentEl, interval) {
|
||||
this.el = dom.createElement("div");
|
||||
this.$setMeasureNodeStyles(this.el.style, true);
|
||||
|
||||
this.$main = dom.createElement("div");
|
||||
this.$setMeasureNodeStyles(this.$main.style);
|
||||
|
||||
this.$measureNode = dom.createElement("div");
|
||||
this.$setMeasureNodeStyles(this.$measureNode.style);
|
||||
|
||||
|
||||
this.el.appendChild(this.$main);
|
||||
this.el.appendChild(this.$measureNode);
|
||||
parentEl.appendChild(this.el);
|
||||
|
||||
if (!CHAR_COUNT)
|
||||
this.$testFractionalRect();
|
||||
this.$measureNode.textContent = lang.stringRepeat("X", CHAR_COUNT);
|
||||
|
||||
this.$characterSize = {width: 0, height: 0};
|
||||
this.checkForSizeChanges();
|
||||
};
|
||||
|
||||
(function() {
|
||||
|
||||
oop.implement(this, EventEmitter);
|
||||
|
||||
this.$characterSize = {width: 0, height: 0};
|
||||
|
||||
this.$testFractionalRect = function() {
|
||||
var el = dom.createElement("div");
|
||||
this.$setMeasureNodeStyles(el.style);
|
||||
el.style.width = "0.2px";
|
||||
document.documentElement.appendChild(el);
|
||||
var w = el.getBoundingClientRect().width;
|
||||
if (w > 0 && w < 1)
|
||||
CHAR_COUNT = 1;
|
||||
else
|
||||
CHAR_COUNT = 100;
|
||||
el.parentNode.removeChild(el);
|
||||
};
|
||||
|
||||
this.$setMeasureNodeStyles = function(style, isRoot) {
|
||||
style.width = style.height = "auto";
|
||||
style.left = style.top = "-100px";
|
||||
style.visibility = "hidden";
|
||||
style.position = "fixed";
|
||||
style.whiteSpace = "pre";
|
||||
style.font = "inherit";
|
||||
style.overflow = isRoot ? "hidden" : "visible";
|
||||
};
|
||||
|
||||
this.checkForSizeChanges = function() {
|
||||
var size = this.$measureSizes();
|
||||
if (size && (this.$characterSize.width !== size.width || this.$characterSize.height !== size.height)) {
|
||||
this.$measureNode.style.fontWeight = "bold";
|
||||
var boldSize = this.$measureSizes();
|
||||
this.$measureNode.style.fontWeight = "";
|
||||
this.$characterSize = size;
|
||||
this.charSizes = Object.create(null);
|
||||
this.allowBoldFonts = boldSize && boldSize.width === size.width && boldSize.height === size.height;
|
||||
this._emit("changeCharacterSize", {data: size});
|
||||
}
|
||||
};
|
||||
|
||||
this.$pollSizeChanges = function() {
|
||||
if (this.$pollSizeChangesTimer)
|
||||
return this.$pollSizeChangesTimer;
|
||||
var self = this;
|
||||
return this.$pollSizeChangesTimer = setInterval(function() {
|
||||
self.checkForSizeChanges();
|
||||
}, 500);
|
||||
};
|
||||
|
||||
this.setPolling = function(val) {
|
||||
if (val) {
|
||||
this.$pollSizeChanges();
|
||||
} else {
|
||||
if (this.$pollSizeChangesTimer)
|
||||
this.$pollSizeChangesTimer;
|
||||
}
|
||||
};
|
||||
|
||||
this.$measureSizes = function() {
|
||||
var rect = this.$measureNode.getBoundingClientRect();
|
||||
var size = {
|
||||
height: rect.height,
|
||||
width: rect.width / CHAR_COUNT
|
||||
};
|
||||
// Size and width can be null if the editor is not visible or
|
||||
// detached from the document
|
||||
if (size.width === 0 || size.height === 0)
|
||||
return null;
|
||||
return size;
|
||||
};
|
||||
|
||||
this.$measureCharWidth = function(ch) {
|
||||
this.$main.textContent = lang.stringRepeat(ch, CHAR_COUNT);
|
||||
var rect = this.$main.getBoundingClientRect();
|
||||
return rect.width / CHAR_COUNT;
|
||||
};
|
||||
|
||||
this.getCharacterWidth = function(ch) {
|
||||
var w = this.charSizes[ch];
|
||||
if (w === undefined) {
|
||||
this.charSizes[ch] = this.$measureCharWidth(ch) / this.$characterSize.width;
|
||||
}
|
||||
return w;
|
||||
};
|
||||
|
||||
this.destroy = function() {
|
||||
clearInterval(this.$pollSizeChangesTimer);
|
||||
if (this.el && this.el.parentNode)
|
||||
this.el.parentNode.removeChild(this.el);
|
||||
};
|
||||
|
||||
}).call(FontMetrics.prototype);
|
||||
|
||||
});
|
||||
|
|
@ -41,10 +41,6 @@ var Text = function(parentEl) {
|
|||
this.element = dom.createElement("div");
|
||||
this.element.className = "ace_layer ace_text-layer";
|
||||
parentEl.appendChild(this.element);
|
||||
|
||||
this.$characterSize = {width: 0, height: 0};
|
||||
this.checkForSizeChanges();
|
||||
this.$pollSizeChanges();
|
||||
};
|
||||
|
||||
(function() {
|
||||
|
|
@ -63,132 +59,27 @@ var Text = function(parentEl) {
|
|||
};
|
||||
|
||||
this.getLineHeight = function() {
|
||||
return this.$characterSize.height || 0;
|
||||
return this.$fontMetrics.$characterSize.height || 0;
|
||||
};
|
||||
|
||||
this.getCharacterWidth = function() {
|
||||
return this.$characterSize.width || 0;
|
||||
return this.$fontMetrics.$characterSize.width || 0;
|
||||
};
|
||||
|
||||
this.$setFontMetrics = function(measure) {
|
||||
this.$fontMetrics = measure;
|
||||
this.$fontMetrics.on("changeCharacterSize", function(e) {
|
||||
this._signal("changeCharacterSize", e);
|
||||
}.bind(this));
|
||||
this.$pollSizeChanges();
|
||||
}
|
||||
|
||||
this.checkForSizeChanges = function() {
|
||||
var size = this.$measureSizes();
|
||||
if (size && (this.$characterSize.width !== size.width || this.$characterSize.height !== size.height)) {
|
||||
this.$measureNode.style.fontWeight = "bold";
|
||||
var boldSize = this.$measureSizes();
|
||||
this.$measureNode.style.fontWeight = "";
|
||||
this.$characterSize = size;
|
||||
this.allowBoldFonts = boldSize && boldSize.width === size.width && boldSize.height === size.height;
|
||||
this._emit("changeCharacterSize", {data: size});
|
||||
}
|
||||
this.$fontMetrics.checkForSizeChanges();
|
||||
};
|
||||
|
||||
this.$pollSizeChanges = function() {
|
||||
var self = this;
|
||||
this.$pollSizeChangesTimer = setInterval(function() {
|
||||
self.checkForSizeChanges();
|
||||
}, 500);
|
||||
return this.$pollSizeChangesTimer = this.$fontMetrics.$pollSizeChanges();
|
||||
};
|
||||
|
||||
this.$fontStyles = {
|
||||
fontFamily : 1,
|
||||
fontSize : 1,
|
||||
fontWeight : 1,
|
||||
fontStyle : 1,
|
||||
lineHeight : 1
|
||||
};
|
||||
|
||||
this.$measureSizes = useragent.isIE || useragent.isOldGecko ? function() {
|
||||
var n = 1000;
|
||||
if (!this.$measureNode) {
|
||||
var measureNode = this.$measureNode = dom.createElement("div");
|
||||
var style = measureNode.style;
|
||||
|
||||
style.width = style.height = "auto";
|
||||
style.left = style.top = (-n * 40) + "px";
|
||||
|
||||
style.visibility = "hidden";
|
||||
style.position = "fixed";
|
||||
style.overflow = "visible";
|
||||
style.whiteSpace = "nowrap";
|
||||
|
||||
// in FF 3.6 monospace fonts can have a fixed sub pixel width.
|
||||
// that's why we have to measure many characters
|
||||
// Note: characterWidth can be a float!
|
||||
measureNode.innerHTML = lang.stringRepeat("Xy", n);
|
||||
|
||||
if (this.element.ownerDocument.body) {
|
||||
this.element.ownerDocument.body.appendChild(measureNode);
|
||||
} else {
|
||||
var container = this.element.parentNode;
|
||||
while (!dom.hasCssClass(container, "ace_editor"))
|
||||
container = container.parentNode;
|
||||
container.appendChild(measureNode);
|
||||
}
|
||||
}
|
||||
|
||||
// Size and width can be null if the editor is not visible or
|
||||
// detached from the document
|
||||
if (!this.element.offsetWidth)
|
||||
return null;
|
||||
|
||||
var style = this.$measureNode.style;
|
||||
var computedStyle = dom.computedStyle(this.element);
|
||||
for (var prop in this.$fontStyles)
|
||||
style[prop] = computedStyle[prop];
|
||||
|
||||
var size = {
|
||||
height: this.$measureNode.offsetHeight,
|
||||
width: this.$measureNode.offsetWidth / (n * 2)
|
||||
};
|
||||
|
||||
// Size and width can be null if the editor is not visible or
|
||||
// detached from the document
|
||||
if (size.width == 0 || size.height == 0)
|
||||
return null;
|
||||
|
||||
return size;
|
||||
}
|
||||
: function() {
|
||||
if (!this.$measureNode) {
|
||||
var measureNode = this.$measureNode = dom.createElement("div");
|
||||
var style = measureNode.style;
|
||||
|
||||
style.width = style.height = "auto";
|
||||
style.left = style.top = -100 + "px";
|
||||
|
||||
style.visibility = "hidden";
|
||||
style.position = "fixed";
|
||||
style.overflow = "visible";
|
||||
style.whiteSpace = "nowrap";
|
||||
|
||||
// fixes fractional fixed-width fonts; see http://git.io/CavZNw
|
||||
measureNode.innerHTML = lang.stringRepeat("X", 100);
|
||||
|
||||
var container = this.element.parentNode;
|
||||
while (container && !dom.hasCssClass(container, "ace_editor"))
|
||||
container = container.parentNode;
|
||||
|
||||
if (!container)
|
||||
return this.$measureNode = null;
|
||||
|
||||
container.appendChild(measureNode);
|
||||
}
|
||||
|
||||
var rect = this.$measureNode.getBoundingClientRect();
|
||||
|
||||
var size = {
|
||||
height: rect.height,
|
||||
width: rect.width / 100
|
||||
};
|
||||
|
||||
// Size and width can be null if the editor is not visible or
|
||||
// detached from the document
|
||||
if (size.width == 0 || size.height == 0)
|
||||
return null;
|
||||
|
||||
return size;
|
||||
};
|
||||
|
||||
this.setSession = function(session) {
|
||||
this.session = session;
|
||||
this.$computeTabString();
|
||||
|
|
|
|||
|
|
@ -42,6 +42,7 @@ var CursorLayer = require("./layer/cursor").Cursor;
|
|||
var HScrollBar = require("./scrollbar").HScrollBar;
|
||||
var VScrollBar = require("./scrollbar").VScrollBar;
|
||||
var RenderLoop = require("./renderloop").RenderLoop;
|
||||
var FontMetrics = require("./layer/font_metrics").FontMetrics;
|
||||
var EventEmitter = require("./lib/event_emitter").EventEmitter;
|
||||
var editorCss = require("./requirejs/text!./css/editor.css");
|
||||
|
||||
|
|
@ -125,10 +126,12 @@ var VirtualRenderer = function(container, theme) {
|
|||
column : 0
|
||||
};
|
||||
|
||||
this.$textLayer.addEventListener("changeCharacterSize", function() {
|
||||
this.$fontMetrics = new FontMetrics(this.container, 500);
|
||||
this.$textLayer.$setFontMetrics(this.$fontMetrics);
|
||||
this.$textLayer.addEventListener("changeCharacterSize", function(e) {
|
||||
_self.updateCharacterSize();
|
||||
_self.onResize(true, _self.gutterWidth, _self.$size.width, _self.$size.height);
|
||||
_self._signal("changeCharacterSize");
|
||||
_self._signal("changeCharacterSize", e);
|
||||
});
|
||||
|
||||
this.$size = {
|
||||
|
|
@ -235,6 +238,7 @@ var VirtualRenderer = function(container, theme) {
|
|||
this.$gutterLayer.setSession(session);
|
||||
this.$textLayer.setSession(session);
|
||||
this.$loop.schedule(this.CHANGE_FULL);
|
||||
this.session.$setFontMetrics(this.$fontMetrics);
|
||||
};
|
||||
|
||||
/**
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue