Support variable-width text

Updated from 2011 patch by fjakobs: 36ebe6c496 * removes old double-width CJK handling * replaces monospace assumptions with measurements of actual text * appears to work for Latin, CJK, Thai, Malayalam in ad-hoc testing * does NOT fully handle RTL text issues (Hebrew, Arabic) Conflicts: demo/kitchen-sink/doclist.js lib/ace/edit_session.js lib/ace/layer/text.js lib/ace/virtual_renderer.js
2013-09-15 11:09:23 -07:00 · 2013-09-15 11:09:23 -07:00 · bcba9bea6e
commit bcba9bea6e
parent 08b88485c8
7 changed files with 159 additions and 40 deletions
--- a/demo/kitchen-sink/doclist.js
+++ b/demo/kitchen-sink/doclist.js
@ -67,6 +67,7 @@ function makeHuge(txt) {

 var docs = {
    "docs/javascript.js": {order: 1, name: "JavaScript"},
+    "docs/international.md": "International Text",

    "docs/latex.tex": {name: "LaTeX", wrapped: true},
    "docs/markdown.md": {name: "Markdown", wrapped: true},
--- a/demo/kitchen-sink/docs/international.md
+++ b/demo/kitchen-sink/docs/international.md
@ -0,0 +1,7 @@
+Pinyin Simplified
+-----------------
+反对方山东队但是上
+
+Thai
+----
+อักษรไทย
--- a/lib/ace/edit_session.js
+++ b/lib/ace/edit_session.js
@ -1832,7 +1832,6 @@ var EditSession = function(text, mode) {

    // "Tokens"
    var CHAR = 1,
-        CHAR_EXT = 2,
        PLACEHOLDER_START = 3,
        PLACEHOLDER_BODY =  4,
        PUNCTUATION = 9,
@ -1862,10 +1861,6 @@ var EditSession = function(text, mode) {
                // Get all the TAB_SPACEs.
                replace(/12/g, function() {
                    len -= 1;
-                }).
-                // Get all the CHAR_EXT/multipleWidth characters.
-                replace(/2/g, function() {
-                    len -= 1;
                });

            lastDocSplit += len;
@ -1959,7 +1954,7 @@ var EditSession = function(text, mode) {

            // === ELSE ===
            split = lastSplit + wrapLimit;
-            // The split is inside of a CHAR or CHAR_EXT token and no space
+            // The split is inside of a CHAR token and no space
            // around -> force a split.
            addSplit(split);
        }
@ -1993,10 +1988,6 @@ var EditSession = function(text, mode) {
                arr.push(SPACE);
            } else if((c > 39 && c < 48) || (c > 57 && c < 64)) {
                arr.push(PUNCTUATION);
-            }
-            // full width characters
-            else if (c >= 0x1100 && isFullWidth(c)) {
-                arr.push(CHAR, CHAR_EXT);
            } else {
                arr.push(CHAR);
            }
@ -2028,12 +2019,7 @@ var EditSession = function(text, mode) {
            if (c == 9) {
                screenColumn += this.getScreenTabSize(screenColumn);
            }
-            // full width characters
-            else if (c >= 0x1100 && isFullWidth(c)) {
-                screenColumn += 2;
-            } else {
                screenColumn += 1;
-            }
            if (screenColumn > maxScreenColumn) {
                break;
            }
--- a/lib/ace/layer/cursor.js
+++ b/lib/ace/layer/cursor.js
@ -170,11 +170,17 @@ var Cursor = function(parentEl) {
        if (!position)
            position = this.session.selection.getCursor();
        var pos = this.session.documentToScreenPosition(position);
-        var cursorLeft = this.$padding + pos.column * this.config.characterWidth;
+        var textWidth = this.config.textWidth(pos.row, pos.column);
+        var cursorLeft = this.$padding + textWidth;
        var cursorTop = (pos.row - (onScreen ? this.config.firstRowScreen : 0)) *
            this.config.lineHeight;
+        var cursorWidth = (this.config.textWidth(pos.row, pos.column + 1) - textWidth) || this.config.characterWidth;

-        return {left : cursorLeft, top : cursorTop};
+        return {
+            left : cursorLeft,
+        	top : cursorTop,
+        	width: cursorWidth
+        };
    };

    this.update = function(config) {
@ -198,7 +204,7 @@ var Cursor = function(parentEl) {

            style.left = pixelPos.left + "px";
            style.top = pixelPos.top + "px";
-            style.width = config.characterWidth + "px";
+            style.width = pixelPos.width + "px";
            style.height = config.lineHeight + "px";
        }
        while (this.cursors.length > cursorIndex)
--- a/lib/ace/layer/marker.js
+++ b/lib/ace/layer/marker.js
@ -78,7 +78,7 @@ var Marker = function(parentEl) {
            range = range.toScreenRange(this.session);
            if (marker.renderer) {
                var top = this.$getTop(range.start.row, config);
-                var left = this.$padding + range.start.column * config.characterWidth;
+                var left = this.$padding + config.textWidth(range.start.row, range.start.column);
                marker.renderer(html, range, left, top, config);
            } else if (marker.type == "fullLine") {
                this.drawFullLineMarker(html, range, marker.clazz, config);
@ -129,8 +129,10 @@ var Marker = function(parentEl) {
        // from selection start to the end of the line
        var padding = this.$padding;
        var height = config.lineHeight;
+        var textWidth = config.textWidth(range.start.row, range.start.column);
+        var left = padding + textWidth;
+        var width = config.width - textWidth;
        var top = this.$getTop(range.start.row, config);
-        var left = padding + range.start.column * config.characterWidth;
        extraStyle = extraStyle || "";

        stringBuilder.push(
@ -143,7 +145,7 @@ var Marker = function(parentEl) {

        // from start of the last line to the selection end
        top = this.$getTop(range.end.row, config);
-        var width = range.end.column * config.characterWidth;
+        var width = config.textWidth(range.end.row, range.end.column);

        stringBuilder.push(
            "<div class='", clazz, "' style='",
@ -171,10 +173,11 @@ var Marker = function(parentEl) {
    // Draws a marker which covers part or whole width of a single screen line
    this.drawSingleLineMarker = function(stringBuilder, range, clazz, config, extraLength, extraStyle) {
        var height = config.lineHeight;
-        var width = (range.end.column + (extraLength || 0) - range.start.column) * config.characterWidth;
+        var textWidth = config.textWidth(range.start.row, range.start.column);
+        var width = config.textWidth(range.start.row, range.end.column + (extraLength || 0)) - textWidth;

        var top = this.$getTop(range.start.row, config);
-        var left = this.$padding + range.start.column * config.characterWidth;
+        var left = this.$padding + textWidth;

        stringBuilder.push(
            "<div class='", clazz, "' style='",
--- a/lib/ace/layer/text.js
+++ b/lib/ace/layer/text.js
@ -321,7 +321,7 @@ var Text = function(parentEl) {

    this.$renderToken = function(stringBuilder, screenColumn, token, value) {
        var self = this;
-        var replaceReg = /\t|&|<|( +)|([\x00-\x1f\x80-\xa0\u1680\u180E\u2000-\u200f\u2028\u2029\u202F\u205F\u3000\uFEFF])|[\u1100-\u115F\u11A3-\u11A7\u11FA-\u11FF\u2329-\u232A\u2E80-\u2E99\u2E9B-\u2EF3\u2F00-\u2FD5\u2FF0-\u2FFB\u3000-\u303E\u3041-\u3096\u3099-\u30FF\u3105-\u312D\u3131-\u318E\u3190-\u31BA\u31C0-\u31E3\u31F0-\u321E\u3220-\u3247\u3250-\u32FE\u3300-\u4DBF\u4E00-\uA48C\uA490-\uA4C6\uA960-\uA97C\uAC00-\uD7A3\uD7B0-\uD7C6\uD7CB-\uD7FB\uF900-\uFAFF\uFE10-\uFE19\uFE30-\uFE52\uFE54-\uFE66\uFE68-\uFE6B\uFF01-\uFF60\uFFE0-\uFFE6]/g;
+        var replaceReg = /\t|&|<|( +)|([\x00-\x1f\x80-\xa0\u1680\u180E\u2000-\u200f\u2028\u2029\u202F\u205F\uFEFF])]/g;
        var replaceFunc = function(c, a, b, tabIdx, idx4) {
            if (a) {
                return self.showInvisibles ?
@ -335,21 +335,8 @@ var Text = function(parentEl) {
                var tabSize = self.session.getScreenTabSize(screenColumn + tabIdx);
                screenColumn += tabSize - 1;
                return self.$tabStrings[tabSize];
-            } else if (c == "\u3000") {
-                // U+3000 is both invisible AND full-width, so must be handled uniquely
-                var classToUse = self.showInvisibles ? "ace_cjk ace_invisible ace_invisible_space" : "ace_cjk";
-                var space = self.showInvisibles ? self.SPACE_CHAR : "";
-                screenColumn += 1;
-                return "<span class='" + classToUse + "' style='width:" +
-                    (self.config.characterWidth * 2) +
-                    "px'>" + space + "</span>";
            } else if (b) {
                return "<span class='ace_invisible ace_invisible_space ace_invalid'>" + self.SPACE_CHAR + "</span>";
-            } else {
-                screenColumn += 1;
-                return "<span class='ace_cjk' style='width:" +
-                    (self.config.characterWidth * 2) +
-                    "px'>" + c + "</span>";
            }
        };

@ -367,6 +354,101 @@ var Text = function(parentEl) {
        }
        return screenColumn + value.length;
    };
+    
+    this.$measureText = function(tokens, column) {
+        // build HTML for tokens
+        var stringBuilder = [];
+        var len = 0;
+        var i = 0;
+        var screenColumn = 0; // TODO
+        while (len < column && i < tokens.length) {
+            var token = tokens[i++];
+            
+            var self = this;
+            var replaceReg = /\t|&|<|( +)|([\v\f \u00a0\u2000\u2001\u2002\u2003\u2004\u2005\u2006\u2007\u2008\u2009\u200a\u200b\u2028\u2029\u3000])/g;
+            var replaceFunc = function(c, a, b, tabIdx, idx4) {
+                if (c.charCodeAt(0) == 32) {
+                    return new Array(c.length+1).join("&#160;");
+                } else if (c == "\t") {
+                    var tabSize = self.session.getScreenTabSize(screenColumn + tabIdx);
+                    screenColumn += tabSize - 1;
+                    return self.$tabStrings[tabSize];
+                } else if (c == "&") {
+                    if (useragent.isOldGecko)
+                        return "&";
+                    else
+                        return "&amp;";
+                } else if (c == "<") {
+                    return "&lt;";
+                } else if (c.match(/[\v\f \u00a0\u2000\u2001\u2002\u2003\u2004\u2005\u2006\u2007\u2008\u2009\u200a\u200b\u2028\u2029\u3000]/)) {
+                    if (self.showInvisibles) {
+                        var space = new Array(c.length+1).join(self.SPACE_CHAR);
+                        return "<span class='ace_invisible'>" + space + "</span>";
+                    } else {
+                        return "&#160;";
+                    }
+                }
+            };
+
+            var value = token.value;
+
+            // truncate once length is larger than 'column'
+            len += value.length;
+            if (len > column)
+                value = value.substring(0, value.length - (len - column));
+                
+            var output = value.replace(replaceReg, replaceFunc);
+
+            
+            if (!this.$textToken[token.type]) {
+                var classes = "ace_" + token.type.replace(/\./g, " ace_");
+                stringBuilder.push("<span class='", classes, "'>", output, "</span>");
+            }
+            else {
+                stringBuilder.push(output);
+            }            
+        }
+
+        // render line off screen
+        var el = document.createElement("div");
+        var style = el.style;
+        style.position = "absolute";
+        style.top = "-1000px";
+        el.className = "ace_line";
+        el.innerHTML = stringBuilder.join("");
+        this.element.appendChild(el);
+
+        // measure pixel length
+        var width = el.offsetWidth;
+        this.element.removeChild(el);
+        
+        return width;
+    }
+    
+    this.textWidth = function(row, column) {
+        //return this.$characterSize.width * column;
+        var line = this.session.getTokens(row);
+
+        // cache in tokens object
+        // this way the cache gets invalidated automatically when the tokens change
+        if (line.widthCache && line.widthCache[column]) {
+            // invalidate if font size has changed
+            if (line.widthCache.rowHeight == this.getLineHeight()) {
+                return line.widthCache[column];
+            }
+            else
+                delete line.widthCache;
+        }
+
+        var width = this.$measureText(line, column);
+        
+        if (!line.widthCache)
+            line.widthCache = { rowHeight: this.getLineHeight() };
+            
+        line.widthCache[column] = width;
+        
+        return width;
+    };

    this.renderIndentGuide = function(stringBuilder, value, max) {
        var cols = value.search(this.$indentGuideRe);
--- a/lib/ace/virtual_renderer.js
+++ b/lib/ace/virtual_renderer.js
@ -150,6 +150,7 @@ var VirtualRenderer = function(container, theme) {
        lastRow : 0,
        lineHeight : 0,
        characterWidth : 0,
+        textWidth: function() { return 1; },
        minHeight : 1,
        maxHeight : 1,
        offset : 0,
@ -997,6 +998,7 @@ var VirtualRenderer = function(container, theme) {
            lastRow : lastRow,
            lineHeight : lineHeight,
            characterWidth : this.characterWidth,
+            textWidth: this.$textLayer.textWidth.bind(this.$textLayer),
            minHeight : minHeight,
            maxHeight : maxHeight,
            offset : offset,
@ -1389,12 +1391,44 @@ var VirtualRenderer = function(container, theme) {
        return {row: row, column: col, side: offset - col > 0 ? 1 : -1};
    };

+    this.$findColumn = function(row, width) {
+        // binary search to find the screen column
+        var min = 0;
+        var max = this.session.getLine(row).length;
+        
+        while (true) {
+            if (max <= 0)
+                return null;
+                
+            // if the range has length one pick the closes characte
+            if (max-min == 1) {
+                var wMin = this.$textLayer.textWidth(row, min);
+                var wMax = this.$textLayer.textWidth(row, max);
+                
+                if (Math.abs(wMin-width) < Math.abs(wMax-width))
+                    return min;
+                else
+                    return max;
+            }
+            else {
+                // same as Math.floor((max-min)/2) but faster
+                var pivot = min + ((max - min) >> 1);
+                var w = this.$textLayer.textWidth(row, pivot);
+                if (w == width)
+                    return pivot;
+                else if (w > width)
+                    max = pivot;
+                else 
+                    min = pivot;
+            }
+        }
+    };
+
    this.screenToTextCoordinates = function(x, y) {
        var canvasPos = this.scroller.getBoundingClientRect();

-        var col = Math.round(
-            (x + this.scrollLeft - canvasPos.left - this.$padding) / this.characterWidth
-        );
+        var width = x + this.scroller.scrollLeft - canvasPos.left - this.$padding - dom.getPageScrollLeft();
+        var col = this.$findColumn(row, width);

        var row = (y + this.scrollTop - canvasPos.top) / this.lineHeight;