diff --git a/lib/ace/edit_session.js b/lib/ace/edit_session.js index cc7d72b0..e4b3d54c 100644 --- a/lib/ace/edit_session.js +++ b/lib/ace/edit_session.js @@ -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; diff --git a/lib/ace/layer/font_metrics.js b/lib/ace/layer/font_metrics.js new file mode 100644 index 00000000..45fa44cb --- /dev/null +++ b/lib/ace/layer/font_metrics.js @@ -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); + +}); diff --git a/lib/ace/layer/text.js b/lib/ace/layer/text.js index 4290233d..50b00196 100644 --- a/lib/ace/layer/text.js +++ b/lib/ace/layer/text.js @@ -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(); diff --git a/lib/ace/virtual_renderer.js b/lib/ace/virtual_renderer.js index f1757d92..4559f79d 100644 --- a/lib/ace/virtual_renderer.js +++ b/lib/ace/virtual_renderer.js @@ -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); }; /**