diff --git a/src/ace/VirtualRenderer.js b/src/ace/VirtualRenderer.js index 0e65e529..faed30ed 100644 --- a/src/ace/VirtualRenderer.js +++ b/src/ace/VirtualRenderer.js @@ -42,6 +42,12 @@ ace.VirtualRenderer = function(container) { this.$updatePrintMargin(); this.onResize(); + var self = this; + this.textLayer.addEventListener("changeCharaterSize", function() { + self.characterWidth = textLayer.getCharacterWidth(); + self.lineHeight = textLayer.getLineHeight(); + self.onResize(); + }); ace.addListener(this.$gutter, "click", ace.bind(this.$onGutterClick, this)); ace.addListener(this.$gutter, "dblclick", ace.bind(this.$onGutterClick, this)); }; diff --git a/src/ace/layer/Text.js b/src/ace/layer/Text.js index 96bbf5c1..651cec98 100644 --- a/src/ace/layer/Text.js +++ b/src/ace/layer/Text.js @@ -5,11 +5,14 @@ ace.layer.Text = function(parentEl) { this.element.className = "layer text-layer"; parentEl.appendChild(this.element); - this.$measureSizes(); + this.$characterSize = this.$measureSizes(); + this.$pollSizeChanges(); }; (function() { + ace.implement(this, ace.MEventEmitter); + this.EOF_CHAR = "¶"; this.EOL_CHAR = "¬"; this.TAB_CHAR = "→"; @@ -20,11 +23,22 @@ ace.layer.Text = function(parentEl) { }; this.getLineHeight = function() { - return this.lineHeight; + return this.$characterSize.height || 1; }; this.getCharacterWidth = function() { - return this.characterWidth; + return this.$characterSize.width || 1; + }; + + this.$pollSizeChanges = function() { + var self = this; + setInterval(function() { + var size = self.$measureSizes(); + if (self.$characterSize.width !== size.width || self.$characterSize.height !== size.height) { + self.$characterSize = size; + self.$dispatchEvent("changeCharaterSize", {data: size}); + } + }, 500); }; this.$measureSizes = function() { @@ -36,27 +50,19 @@ ace.layer.Text = function(parentEl) { style.position = "absolute"; style.overflow = "visible"; - var parent = this.element.parentNode; - var sibling = this.element.nextSibling; - - document.body.appendChild(this.element); - measureNode.innerHTML = new Array(1000).join("Xy"); this.element.appendChild(measureNode); // 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! - this.lineHeight = measureNode.offsetHeight; - this.characterWidth = measureNode.offsetWidth / 2000; + var size = { + height: measureNode.offsetHeight, + width: measureNode.offsetWidth / 2000 + }; this.element.removeChild(measureNode); - - if (sibling) { - parent.insertBefore(this.element, sibling); - } else { - parent.appendChild(this.element); - } + return size; }; this.setDocument = function(doc) {