@wcardinal/wcardinal-ui 0.425.0 → 0.426.0

package/dist/wcardinal-ui.cjs.js

@@ -1,5 +1,5 @@
 /*
- Winter Cardinal UI v0.425.0
+ Winter Cardinal UI v0.426.0
  Copyright (C) 2019 Toshiba Corporation
  SPDX-License-Identifier: Apache-2.0
 
@@ -358,91 +358,6 @@ var buildBarUv = function (uvs, voffset, textureUvs) {
     uvs[++iuv] = textureUvs.y2;
 };
 
-/*
- * Copyright (C) 2019 Toshiba Corporation
- * SPDX-License-Identifier: Apache-2.0
- */
-var UtilCharacterIterator = /** @class */ (function () {
-    function UtilCharacterIterator() {
-        this.target = "";
-        this.position = 0;
-    }
-    UtilCharacterIterator.prototype.init = function (target) {
-        this.target = target;
-        this.position = 0;
-    };
-    UtilCharacterIterator.prototype.hasNext = function () {
-        return this.position < this.target.length;
-    };
-    UtilCharacterIterator.prototype.findNextBreak = function (target, istart) {
-        var iend = target.length;
-        for (var i = istart; i < iend; ++i) {
-            var code = target.charCodeAt(i);
-            if (!this.isLowSurrogate(code) && !this.isVariationSelector(code)) {
-                return i;
-            }
-        }
-        return iend;
-    };
-    UtilCharacterIterator.prototype.isHighSurrogate = function (code) {
-        return 0xd800 <= code && code <= 0xdbff;
-    };
-    UtilCharacterIterator.prototype.isLowSurrogate = function (code) {
-        return 0xdc00 <= code && code <= 0xdfff;
-    };
-    UtilCharacterIterator.prototype.isVariationSelector = function (code) {
-        return 0xfe00 <= code && code <= 0xfe0f;
-    };
-    UtilCharacterIterator.prototype.next = function () {
-        var target = this.target;
-        var position = this.position;
-        var nextBreak = this.findNextBreak(target, position + 1);
-        var result = target.substring(position, nextBreak);
-        this.position = nextBreak;
-        return result;
-    };
-    /**
-     * Advances the position if the next character is not equal to
-     * the given `except`.
-     *
-     * @param except
-     * @return true if the position is advanced
-     */
-    UtilCharacterIterator.prototype.advance = function (except) {
-        var target = this.target;
-        var position = this.position;
-        var nextBreak = this.findNextBreak(target, position + 1);
-        if (target.substring(position, nextBreak) !== except) {
-            this.position = nextBreak;
-            return true;
-        }
-        return false;
-    };
-    /**
-     * Closes this iterator.
-     *
-     * @returns true if closed.
-     */
-    UtilCharacterIterator.prototype.close = function () {
-        var length = this.target.length;
-        if (this.position < length) {
-            this.position = length;
-            return true;
-        }
-        return false;
-    };
-    UtilCharacterIterator.from = function (target) {
-        if (UtilCharacterIterator._instance == null) {
-            UtilCharacterIterator._instance = new UtilCharacterIterator();
-        }
-        var instance = UtilCharacterIterator._instance;
-        instance.init(target);
-        return instance;
-    };
-    UtilCharacterIterator._instance = null;
-    return UtilCharacterIterator;
-}());
-
 /*
  * Copyright (C) 2019 Toshiba Corporation
  * SPDX-License-Identifier: Apache-2.0
@@ -501,6 +416,19 @@ var toLength = function (p0x, p0y, p1x, p1y) {
     return Math.sqrt(dx01 * dx01 + dy01 * dy01);
 };
 
+/*
+ * Copyright (C) 2019 Toshiba Corporation
+ * SPDX-License-Identifier: Apache-2.0
+ */
+var Character = {
+    ASCII: "!\"#$%&'()*+,-./0123456789:;<=>?@ABCDEFGHIJKLMNOPQRSTUVWXYZ[\\]^_`abcdefghijklmnopqrstuvwxyz{|}~",
+    SPACE: " ",
+    TAB: "\t",
+    SOFT_TAB: "    ",
+    DOTS: "...",
+    NEW_LINE: "\n"
+};
+
 var TEXT_VERTEX_COUNT = 4;
 var TEXT_VERTEX_COUNT_SHIFT = 2;
 var TEXT_INDEX_COUNT = 2;
@@ -847,7 +775,7 @@ var invertAlignVertical = function (align) {
             return EShapeTextAlignVertical.OUTSIDE_TOP;
     }
 };
-var buildTextVertex = function (vertices, uvs, voffset, vcount, originX, originY, sizeX, sizeY, textAtlas, textSize, textValue, textStyle, textAlignHorizontal, textAlignVertical, textOffsetHorizontal, textOffsetVertical, textSpacingHorizontal, textSpacingVertical, textDirection, textPaddingHorizontal, textPaddingVertical, textClipping, textFitting, textWorld, textureUvs, internalTransform) {
+var buildTextVertex = function (vertices, uvs, voffset, vcount, originX, originY, sizeX, sizeY, textAtlas, textSize, textCharacters, textStyle, textAlignHorizontal, textAlignVertical, textOffsetHorizontal, textOffsetVertical, textSpacingHorizontal, textSpacingVertical, textDirection, textPaddingHorizontal, textPaddingVertical, textClipping, textFitting, textWorld, textureUvs, internalTransform) {
     // Calculate the transformed positions
     //
     //  0               1
@@ -939,15 +867,14 @@ var buildTextVertex = function (vertices, uvs, voffset, vcount, originX, originY
     var lineWidth = 0;
     var lineCount = 1;
     var textAtlasCharacters = textAtlas.characters;
-    var iterator = UtilCharacterIterator.from(textValue);
     var advancePrevious = 0;
-    while (iterator.hasNext()) {
-        var character = iterator.next();
-        if (character !== "\n") {
+    for (var i = 0, imax = textCharacters.length; i < imax; ++i) {
+        var character = textCharacters[i];
+        if (character !== Character.NEW_LINE) {
             if (0 < advancePrevious) {
                 lineWidth += Math.max(0, advancePrevious + textSpacingHorizontal);
             }
-            var data = textAtlasCharacters[character];
+            var data = textAtlasCharacters.get(character);
             if (data) {
                 advancePrevious = data.advance;
                 heightChar = data.height;
@@ -1091,12 +1018,11 @@ var buildTextVertex = function (vertices, uvs, voffset, vcount, originX, originY
     var cy3 = by3;
     lineWidth = 0;
     advancePrevious = 0;
-    iterator.position = 0;
     lineCount = 0;
     var iv = voffset * 2;
-    for (; iterator.hasNext(); iv += 8) {
-        var character = iterator.next();
-        if (character !== "\n") {
+    for (var i = 0, imax = textCharacters.length; i < imax; i += 1, iv += 8) {
+        var character = textCharacters[i];
+        if (character !== Character.NEW_LINE) {
             var lineWidthPrevious = lineWidth;
             if (0 < advancePrevious) {
                 lineWidth += Math.max(0, advancePrevious + textSpacingHorizontal);
@@ -1107,12 +1033,12 @@ var buildTextVertex = function (vertices, uvs, voffset, vcount, originX, originY
             cy0 = by0 + ay;
             cx3 = bx3 + ax;
             cy3 = by3 + ay;
-            var data = textAtlasCharacters[character];
+            var data = textAtlasCharacters.get(character);
             lineCount += 1;
             if (data) {
                 var advance = data.advance;
                 if (lineWidthMaximum < (lineWidth + advance) * scaleX) {
-                    var dots = textAtlasCharacters["..."];
+                    var dots = textAtlasCharacters.get(Character.DOTS);
                     if (dots) {
                         if (1 < lineCount &&
                             lineWidthMaximum < (lineWidth + dots.advance) * scaleX) {
@@ -1129,9 +1055,10 @@ var buildTextVertex = function (vertices, uvs, voffset, vcount, originX, originY
                         advancePrevious = dots.advance;
                         writeCharacter(vertices, uvs, iv, dots, textAtlas, snx, sny, cx0, cy0, cx3, cy3, duvx01, duvy01, duvx03, duvy03, uvx0, uvy0);
                         for (iv += 8; true; iv += 8) {
-                            if (iterator.hasNext() && iterator.advance("\n")) {
+                            if (i + 1 < imax && textCharacters[i + 1] !== Character.NEW_LINE) {
                                 writeCharacterEmpty(vertices, uvs, iv, cx0, cy0, cx3, cy3, uvx0, uvy0, uvx3, uvy3);
                                 lineCount += 1;
+                                i += 1;
                             }
                             else {
                                 iv -= 8;
@@ -7800,6 +7727,9 @@ var EShapeTextImpl = /** @class */ (function () {
         this.padding = new EShapeTextOffsetImpl(parent, 10, 10);
         this._clipping = false;
         this._fitting = false;
+        this._characters = [];
+        this._nacharacters = [];
+        this.updateCharacters(value);
     }
     Object.defineProperty(EShapeTextImpl.prototype, "enable", {
         get: function () {
@@ -7826,7 +7756,8 @@ var EShapeTextImpl = /** @class */ (function () {
                 if (this._plength < length_1) {
                     this._plength = length_1;
                 }
-                if (this.isCompatible(value)) {
+                this.updateCharacters(value);
+                if (this.isCompatible()) {
                     this._parent.updateUploaded();
                 }
                 else {
@@ -7838,7 +7769,78 @@ var EShapeTextImpl = /** @class */ (function () {
         enumerable: false,
         configurable: true
     });
-    EShapeTextImpl.prototype.isCompatible = function (value) {
+    Object.defineProperty(EShapeTextImpl.prototype, "characters", {
+        get: function () {
+            return this._characters;
+        },
+        enumerable: false,
+        configurable: true
+    });
+    Object.defineProperty(EShapeTextImpl.prototype, "nacharacters", {
+        get: function () {
+            return this._nacharacters;
+        },
+        enumerable: false,
+        configurable: true
+    });
+    EShapeTextImpl.prototype.updateCharacters = function (value) {
+        var characters = this._characters;
+        var charactersLength = characters.length;
+        var icharacters = 0;
+        var nacharacters = this._nacharacters;
+        var nacharactersLength = nacharacters.length;
+        var inacharacters = 0;
+        for (var i = 0, imax = value.length; i < imax;) {
+            if (value.charCodeAt(i) <= 0xff) {
+                // Add an ASCII character
+                var ac = value.substring(i, i + 1);
+                if (icharacters < charactersLength) {
+                    characters[icharacters] = ac;
+                }
+                else {
+                    characters.push(ac);
+                }
+                icharacters += 1;
+                i += 1;
+                continue;
+            }
+            var j = i + 1;
+            for (; j < imax; ++j) {
+                var cc = value.charCodeAt(j);
+                if ((0xdc00 <= cc && cc <= 0xdfff) || (0xfe00 <= cc && cc <= 0xfe0f)) {
+                    // Low surrogate
+                    // Variation selector
+                    continue;
+                }
+                break;
+            }
+            // Add an non-ascii character
+            var nac = value.substring(i, j);
+            if (icharacters < charactersLength) {
+                characters[icharacters] = nac;
+            }
+            else {
+                characters.push(nac);
+            }
+            icharacters += 1;
+            if (inacharacters < nacharactersLength) {
+                nacharacters[inacharacters] = nac;
+            }
+            else {
+                nacharacters.push(nac);
+            }
+            inacharacters += 1;
+            // Go to the next
+            i = j;
+        }
+        if (icharacters < charactersLength) {
+            characters.length = icharacters;
+        }
+        if (inacharacters < nacharactersLength) {
+            nacharacters.length = inacharacters;
+        }
+    };
+    EShapeTextImpl.prototype.isCompatible = function () {
         // Compatibility check
         var parent = this._parent;
         var uploaded = parent.uploaded;
@@ -7847,18 +7849,17 @@ var EShapeTextImpl = /** @class */ (function () {
         }
         // Character code check
         var atlas = this.atlas;
-        var characters = atlas && atlas.characters;
-        if (characters != null) {
-            for (var i = 0, imax = value.length; i < imax; ++i) {
-                var char = value[i];
-                if (!(char in characters)) {
-                    return false;
-                }
-            }
-        }
-        else {
+        if (atlas == null) {
             return false;
         }
+        var atlasCharacters = atlas.characters;
+        var nacharacters = this._nacharacters;
+        for (var i = 0, imax = nacharacters.length; i < imax; ++i) {
+            if (!atlasCharacters.has(nacharacters[i])) {
+                return false;
+            }
+        }
+        // Done
         return true;
     };
     Object.defineProperty(EShapeTextImpl.prototype, "length", {
@@ -8013,7 +8014,8 @@ var EShapeTextImpl = /** @class */ (function () {
             if (this._plength < length_2) {
                 this._plength = length_2;
             }
-            if (this.isCompatible(value)) {
+            this.updateCharacters(value);
+            if (this.isCompatible()) {
                 isChangedUploaded = true;
             }
             else {
@@ -8844,7 +8846,7 @@ var BuilderText = /** @class */ (function () {
                 textWorld = [0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0];
                 text.world = textWorld;
             }
-            buildTextVertex(buffer.vertices, buffer.uvs, this.vertexOffset, this.vertexCount, 0, 0, shapeSize.x, shapeSize.y, textAtlas, textSize, textValue, textStyle, textAlignHorizontal, textAlignVertical, textOffsetHorizontal, textOffsetVertical, textSpacingHorizontal, textSpacingVertical, textDirection, textPaddingHorizontal, textPaddingVertical, textClipping, textFitting, textWorld, toTextureUvs(textTexture), shape.transform.internalTransform);
+            buildTextVertex(buffer.vertices, buffer.uvs, this.vertexOffset, this.vertexCount, 0, 0, shapeSize.x, shapeSize.y, textAtlas, textSize, text.characters, textStyle, textAlignHorizontal, textAlignVertical, textOffsetHorizontal, textOffsetVertical, textSpacingHorizontal, textSpacingVertical, textDirection, textPaddingHorizontal, textPaddingVertical, textClipping, textFitting, textWorld, toTextureUvs(textTexture), shape.transform.internalTransform);
         }
     };
     BuilderText.prototype.updateColor = function (buffer, shape) {
@@ -21159,12 +21161,6 @@ var DynamicAtlasItemFontAtlas = /** @class */ (function (_super) {
     return DynamicAtlasItemFontAtlas;
 }(DynamicAtlasItem));
 
-/*
- * Copyright (C) 2019 Toshiba Corporation
- * SPDX-License-Identifier: Apache-2.0
- */
-var ASCII_CHARACTERS = "!\"#$%&'()*+,-./0123456789:;<=>?@ABCDEFGHIJKLMNOPQRSTUVWXYZ[\\]^_`abcdefghijklmnopqrstuvwxyz{|}~";
-
 /*
  * Copyright (C) 2019 Toshiba Corporation
  * SPDX-License-Identifier: Apache-2.0
@@ -21184,7 +21180,7 @@ var DynamicFontAtlasCharacterOrigin = /** @class */ (function () {
 var DynamicFontAtlasCharacter = /** @class */ (function () {
     function DynamicFontAtlasCharacter(type, character, x, y, width, height, advance) {
         this.ref = 1;
-        this.life = 10;
+        this.life = DynamicFontAtlasCharacter.LIFE;
         this.character = character;
         this.x = x;
         this.y = y;
@@ -21194,6 +21190,7 @@ var DynamicFontAtlasCharacter = /** @class */ (function () {
         this.origin = new DynamicFontAtlasCharacterOrigin(0, 0);
         this.type = type;
     }
+    DynamicFontAtlasCharacter.LIFE = 10;
     return DynamicFontAtlasCharacter;
 }());
 
@@ -21613,10 +21610,17 @@ var DynamicSDFFontAtlas = /** @class */ (function () {
         this._generator = DynamicSDFFontGenerator.getInstance().init();
         this._canvas = document.createElement("canvas");
         this._font = new DynamicSDFFontAtlasFont(fontFamily);
-        this._characters = {};
-        this._length = 0;
         this._width = 1;
         this._height = 1;
+        var characters = new Map();
+        characters.set(Character.SPACE, this.newChar(Character.SPACE, DynamicFontAtlasCharacterType.SPACE_R));
+        characters.set(Character.TAB, this.newChar(Character.SOFT_TAB, DynamicFontAtlasCharacterType.SPACE_R));
+        characters.set(Character.DOTS, this.newChar(Character.DOTS, DynamicFontAtlasCharacterType.LETTER_RNB));
+        for (var i = 0, imax = Character.ASCII.length; i < imax; ++i) {
+            var ac = Character.ASCII[i];
+            characters.set(ac, this.newChar(ac, DynamicFontAtlasCharacterType.LETTER_RNB));
+        }
+        this._characters = characters;
         this._isDirty = true;
     }
     Object.defineProperty(DynamicSDFFontAtlas.prototype, "id", {
@@ -21674,143 +21678,109 @@ var DynamicSDFFontAtlas = /** @class */ (function () {
         configurable: true
     });
     DynamicSDFFontAtlas.prototype.begin = function () {
-        this._length = 0;
-        var characters = this._characters;
-        for (var id in characters) {
-            characters[id].ref = 0;
-        }
+        this._characters.forEach(function (character) {
+            if (!(character.type & DynamicFontAtlasCharacterType.RESERVED)) {
+                character.ref = 0;
+            }
+        });
     };
     DynamicSDFFontAtlas.prototype.end = function () {
+        var _this = this;
         var characters = this._characters;
-        for (var id in characters) {
-            var data = characters[id];
-            if (data.ref <= 0) {
-                data.life -= 1;
-                if (data.life <= 0) {
-                    delete characters[id];
-                    this._isDirty = true;
+        characters.forEach(function (character, id) {
+            if (character.ref <= 0 && !(character.type & DynamicFontAtlasCharacterType.RESERVED)) {
+                character.life -= 1;
+                if (character.life <= 0) {
+                    characters.delete(id);
+                    _this._isDirty = true;
                 }
             }
-        }
+        });
     };
-    DynamicSDFFontAtlas.prototype.addAscii = function () {
-        this.addChar(" ", " ", DynamicFontAtlasCharacterType.SPACE_R);
-        this.addChar("\t", "    ", DynamicFontAtlasCharacterType.SPACE_R);
-        this.addChar("...", "...", DynamicFontAtlasCharacterType.LETTER_RNB);
-        for (var i = 0, imax = ASCII_CHARACTERS.length; i < imax; ++i) {
-            var char = ASCII_CHARACTERS[i];
-            this.addChar(char, char, DynamicFontAtlasCharacterType.LETTER_RNB);
-        }
+    DynamicSDFFontAtlas.prototype.newChar = function (character, type) {
+        return new DynamicFontAtlasCharacter(type, character, 0, 0, 1, 1, 0);
     };
-    DynamicSDFFontAtlas.prototype.addChar = function (id, character, type) {
-        var characters = this._characters;
-        if (!this.isIgnored(character)) {
-            var data = characters[id];
+    DynamicSDFFontAtlas.prototype.add = function (characters, nacharacters) {
+        var cs = this._characters;
+        for (var i = 0, imax = nacharacters.length; i < imax; ++i) {
+            var nac = nacharacters[i];
+            var data = cs.get(nac);
             if (data != null) {
-                if (data.ref <= 0) {
-                    this._length += 1;
-                }
                 data.ref += 1;
             }
             else {
-                characters[id] = new DynamicFontAtlasCharacter(type, character, 0, 0, 1, 1, 0);
-                this._length += 1;
+                cs.set(nac, this.newChar(nac, DynamicFontAtlasCharacterType.LETTER));
                 this._isDirty = true;
             }
         }
     };
-    DynamicSDFFontAtlas.prototype.isIgnored = function (character) {
-        switch (character) {
-            case "\n": // Line feed
-                return true;
-            case "\r": // Carriage return
-                return true;
-            case "\v": // Vertical tab
-                return true;
-            case "\f": // Form feed
-                return true;
-            case "\u0085": // Next line
-                return true;
-        }
-        return false;
-    };
-    DynamicSDFFontAtlas.prototype.add = function (characters, type) {
-        if (type === void 0) { type = DynamicFontAtlasCharacterType.LETTER; }
-        var iterator = UtilCharacterIterator.from(characters);
-        while (iterator.hasNext()) {
-            var character = iterator.next();
-            this.addChar(character, character, type);
-        }
-    };
     DynamicSDFFontAtlas.prototype.get = function (id) {
-        return this._characters[id];
+        return this._characters.get(id);
     };
     DynamicSDFFontAtlas.prototype.update = function () {
         if (this._isDirty) {
             var canvas = this._canvas;
             var generator = this._generator;
             if (canvas != null && generator != null) {
-                var context = canvas.getContext("2d");
-                if (context != null) {
+                var context_1 = canvas.getContext("2d");
+                if (context_1 != null) {
                     this._isDirty = false;
                     var font = this._font;
+                    var fontSize_1 = font.size + 14;
                     var characters = this._characters;
-                    var characterSize = font.size + 14;
-                    var width = this.toPowerOf2(Math.ceil(Math.sqrt(this._length)) * characterSize);
-                    this._width = width;
+                    var width_1 = this.toPowerOf2(Math.ceil(Math.sqrt(characters.size)) * fontSize_1);
+                    this._width = width_1;
                     var fontStyle = (font.italic ? "italic " : "") + (font.size + "px ") + font.id;
-                    context.font = fontStyle;
-                    context.textAlign = "left";
-                    context.textBaseline = "alphabetic";
-                    context.lineWidth = 0;
-                    context.lineCap = "round";
-                    context.lineJoin = "miter";
-                    context.miterLimit = 10;
-                    context.fillStyle = "#FFFFFF";
-                    UtilFont.measure(context, font);
-                    var offsetX = 7;
-                    var offsetY = Math.round((characterSize - (font.ascent + font.descent)) * 0.5 + font.ascent);
-                    var x = 0;
-                    var y = 0;
-                    for (var id in characters) {
-                        var data = characters[id];
-                        var advance = context.measureText(data.character).width;
-                        var characterWidth = Math.ceil(offsetX + advance + offsetX);
-                        var characterHeight = characterSize;
-                        if (width <= x + characterWidth) {
-                            x = 0;
-                            y += characterSize;
+                    context_1.font = fontStyle;
+                    context_1.textAlign = "left";
+                    context_1.textBaseline = "alphabetic";
+                    context_1.lineWidth = 0;
+                    context_1.lineCap = "round";
+                    context_1.lineJoin = "miter";
+                    context_1.miterLimit = 10;
+                    context_1.fillStyle = "#FFFFFF";
+                    UtilFont.measure(context_1, font);
+                    var offsetX_1 = 7;
+                    var offsetY_1 = Math.round((fontSize_1 - (font.ascent + font.descent)) * 0.5 + font.ascent);
+                    var x_1 = 0;
+                    var y_1 = 0;
+                    characters.forEach(function (character) {
+                        var advance = context_1.measureText(character.character).width;
+                        var characterWidth = Math.ceil(offsetX_1 + advance + offsetX_1);
+                        var characterHeight = fontSize_1;
+                        if (width_1 <= x_1 + characterWidth) {
+                            x_1 = 0;
+                            y_1 += fontSize_1;
                         }
-                        data.x = x;
-                        data.y = y;
-                        data.width = characterWidth;
-                        data.height = characterHeight;
-                        data.advance = advance;
-                        data.origin.x = x + offsetX;
-                        data.origin.y = y + offsetY;
-                        x += characterWidth;
-                    }
-                    var height = (this._height = y + characterSize);
+                        character.x = x_1;
+                        character.y = y_1;
+                        character.width = characterWidth;
+                        character.height = characterHeight;
+                        character.advance = advance;
+                        character.origin.x = x_1 + offsetX_1;
+                        character.origin.y = y_1 + offsetY_1;
+                        x_1 += characterWidth;
+                    });
+                    var height = (this._height = y_1 + fontSize_1);
                     // Make a input canvas
                     // Here, we need to reset the context because
                     // context settings will be lost when we set the width/height.
-                    canvas.width = width;
+                    canvas.width = width_1;
                     canvas.height = height;
-                    context.font = fontStyle;
-                    context.textAlign = "left";
-                    context.textBaseline = "alphabetic";
-                    context.lineWidth = 0;
-                    context.lineCap = "round";
-                    context.lineJoin = "miter";
-                    context.miterLimit = 10;
-                    context.fillStyle = "#FFFFFF";
-                    context.clearRect(0, 0, width, height);
-                    for (var id in characters) {
-                        var data = characters[id];
-                        context.fillText(data.character, data.origin.x, data.origin.y);
-                    }
+                    context_1.font = fontStyle;
+                    context_1.textAlign = "left";
+                    context_1.textBaseline = "alphabetic";
+                    context_1.lineWidth = 0;
+                    context_1.lineCap = "round";
+                    context_1.lineJoin = "miter";
+                    context_1.miterLimit = 10;
+                    context_1.fillStyle = "#FFFFFF";
+                    context_1.clearRect(0, 0, width_1, height);
+                    characters.forEach(function (character) {
+                        context_1.fillText(character.character, character.origin.x, character.origin.y);
+                    });
                     // Convert to SDF font texture
-                    generator.updateTexture(width, height, canvas);
+                    generator.updateTexture(width_1, height, canvas);
                     generator.render();
                     generator.read(canvas);
                     return true;
@@ -21821,7 +21791,7 @@ var DynamicSDFFontAtlas = /** @class */ (function () {
     };
     Object.defineProperty(DynamicSDFFontAtlas.prototype, "length", {
         get: function () {
-            return this._length;
+            return this._characters.size;
         },
         enumerable: false,
         configurable: true
@@ -21846,10 +21816,7 @@ var DynamicSDFFontAtlas = /** @class */ (function () {
         if (canvas != null) {
             this._canvas = null;
         }
-        var characters = this._characters;
-        for (var id in characters) {
-            delete characters[id];
-        }
+        this._characters.clear();
     };
     DynamicSDFFontAtlas.prototype.toPowerOf2 = function (size) {
         var result = 32;
@@ -21867,52 +21834,45 @@ var DynamicSDFFontAtlas = /** @class */ (function () {
  */
 var DynamicSDFFontAtlases = /** @class */ (function () {
     function DynamicSDFFontAtlases() {
-        this._atlases = {};
+        this._atlases = new Map();
     }
     DynamicSDFFontAtlases.prototype.begin = function () {
-        var atlases = this._atlases;
-        for (var family in atlases) {
-            var atlas = atlases[family];
+        this._atlases.forEach(function (atlas) {
             atlas.begin();
-        }
+        });
     };
     DynamicSDFFontAtlases.prototype.end = function () {
         var atlases = this._atlases;
-        for (var family in atlases) {
-            var atlas = atlases[family];
-            if (0 < atlas.length) {
-                atlas.addAscii();
-            }
+        atlases.forEach(function (atlas, family) {
             atlas.end();
             if (atlas.length <= 0) {
                 atlas.destroy();
-                delete atlases[family];
+                atlases.delete(family);
             }
-        }
+        });
     };
-    DynamicSDFFontAtlases.prototype.add = function (family, targets) {
-        var atlas = this._atlases[family];
+    DynamicSDFFontAtlases.prototype.add = function (family, characters, nacharacters) {
+        var atlases = this._atlases;
+        var atlas = atlases.get(family);
         if (atlas != null) {
-            atlas.add(targets);
+            atlas.add(characters, nacharacters);
         }
         else {
             var newAtlas = new DynamicSDFFontAtlas(family);
-            newAtlas.add(targets);
-            this._atlases[family] = newAtlas;
+            newAtlas.add(characters, nacharacters);
+            atlases.set(family, newAtlas);
         }
     };
     DynamicSDFFontAtlases.prototype.get = function (family) {
-        var atlas = this._atlases[family];
+        var atlas = this._atlases.get(family);
         if (atlas != null) {
             return atlas;
         }
         return null;
     };
     DynamicSDFFontAtlases.prototype.update = function (baseAtlas) {
-        var atlases = this._atlases;
         var baseTexture = baseAtlas.getBaseTexture();
-        for (var family in atlases) {
-            var atlas = atlases[family];
+        this._atlases.forEach(function (atlas) {
             if (atlas.update()) {
                 var atlasId = atlas.id;
                 var item = baseAtlas.get(atlasId);
@@ -21930,15 +21890,14 @@ var DynamicSDFFontAtlases = /** @class */ (function () {
                     baseAtlas.set(atlasId, new DynamicAtlasItemFontAtlas(atlas, baseTexture));
                 }
             }
-        }
+        });
     };
     DynamicSDFFontAtlases.prototype.destroy = function () {
         var atlases = this._atlases;
-        for (var family in atlases) {
-            var atlas = atlases[family];
+        atlases.forEach(function (atlas) {
             atlas.destroy();
-        }
-        this._atlases = {};
+        });
+        atlases.clear();
     };
     return DynamicSDFFontAtlases;
 }());
@@ -22326,9 +22285,9 @@ var EShapeRenderer = /** @class */ (function (_super) {
         }
         // Font texture atlas
         var text = shape.text;
-        var textValue = text.value;
-        if (0 < textValue.length) {
-            fontAtlases.add(text.family, textValue);
+        var textCharacters = text.characters;
+        if (0 < textCharacters.length) {
+            fontAtlases.add(text.family, textCharacters, text.nacharacters);
         }
     };
     EShapeRenderer.prototype.updateAtlases = function (shapes, atlas, fontAtlases, defaultTexture, baseTexture) {
@@ -28695,6 +28654,74 @@ var DDynamicTextMeasureResult = /** @class */ (function () {
     return DDynamicTextMeasureResult;
 }());
 
+/*
+ * Copyright (C) 2019 Toshiba Corporation
+ * SPDX-License-Identifier: Apache-2.0
+ */
+var UtilCharacterIterator = /** @class */ (function () {
+    function UtilCharacterIterator() {
+        this.target = "";
+        this.position = 0;
+    }
+    UtilCharacterIterator.prototype.init = function (target) {
+        this.target = target;
+        this.position = 0;
+    };
+    UtilCharacterIterator.prototype.hasNext = function () {
+        return this.position < this.target.length;
+    };
+    UtilCharacterIterator.prototype.findNextBreak = function (target, istart) {
+        var iend = target.length;
+        for (var i = istart; i < iend; ++i) {
+            var code = target.charCodeAt(i);
+            if (!this.isLowSurrogate(code) && !this.isVariationSelector(code)) {
+                return i;
+            }
+        }
+        return iend;
+    };
+    UtilCharacterIterator.prototype.isHighSurrogate = function (code) {
+        return 0xd800 <= code && code <= 0xdbff;
+    };
+    UtilCharacterIterator.prototype.isLowSurrogate = function (code) {
+        return 0xdc00 <= code && code <= 0xdfff;
+    };
+    UtilCharacterIterator.prototype.isVariationSelector = function (code) {
+        return 0xfe00 <= code && code <= 0xfe0f;
+    };
+    UtilCharacterIterator.prototype.next = function () {
+        var target = this.target;
+        var position = this.position;
+        var nextBreak = this.findNextBreak(target, position + 1);
+        var result = target.substring(position, nextBreak);
+        this.position = nextBreak;
+        return result;
+    };
+    /**
+     * Closes this iterator.
+     *
+     * @returns true if closed.
+     */
+    UtilCharacterIterator.prototype.close = function () {
+        var length = this.target.length;
+        if (this.position < length) {
+            this.position = length;
+            return true;
+        }
+        return false;
+    };
+    UtilCharacterIterator.from = function (target) {
+        if (UtilCharacterIterator._instance == null) {
+            UtilCharacterIterator._instance = new UtilCharacterIterator();
+        }
+        var instance = UtilCharacterIterator._instance;
+        instance.init(target);
+        return instance;
+    };
+    UtilCharacterIterator._instance = null;
+    return UtilCharacterIterator;
+}());
+
 /*
  * Copyright (C) 2019 Toshiba Corporation
  * SPDX-License-Identifier: Apache-2.0
@@ -28705,7 +28732,6 @@ var DDynamicTextStyleWordWrap = {
     BREAK_ALL: 2
 };
 
-var NEW_LINE = "\n";
 var DDynamicTextMeasure = /** @class */ (function () {
     function DDynamicTextMeasure() {
     }
@@ -28775,7 +28801,7 @@ var DDynamicTextMeasure = /** @class */ (function () {
         while (iterator.hasNext()) {
             var characterPosition = iterator.position;
             var character = iterator.next();
-            if (character === NEW_LINE) {
+            if (character === Character.NEW_LINE) {
                 if (result.isPushableAtNewLine(clippingHeight, lineHeight, fontHeight)) {
                     result.newLine(lineHeight);
                 }
@@ -28807,7 +28833,7 @@ var DDynamicTextMeasure = /** @class */ (function () {
     DDynamicTextMeasure.measure1b = function (iterator, clippingWidth, clippingHeight, fontHeight, lineHeight, atlas, result) {
         while (iterator.hasNext()) {
             var character = iterator.next();
-            if (character === NEW_LINE) {
+            if (character === Character.NEW_LINE) {
                 if (result.isPushableAtNewLine(clippingHeight, lineHeight, fontHeight)) {
                     result.newLine(lineHeight);
                 }
@@ -28838,7 +28864,7 @@ var DDynamicTextMeasure = /** @class */ (function () {
     DDynamicTextMeasure.measure1 = function (iterator, clippingWidth, clippingHeight, fontHeight, lineHeight, atlas, result) {
         while (iterator.hasNext()) {
             var character = iterator.next();
-            if (character === NEW_LINE) {
+            if (character === Character.NEW_LINE) {
                 if (result.isPushableAtNewLine(clippingHeight, lineHeight, fontHeight)) {
                     result.newLine(lineHeight);
                 }
@@ -28870,7 +28896,7 @@ var DDynamicTextMeasure = /** @class */ (function () {
         while (iterator.hasNext()) {
             var characterPosition = iterator.position;
             var character = iterator.next();
-            if (character === NEW_LINE) {
+            if (character === Character.NEW_LINE) {
                 result.newLine(lineHeight);
             }
             else {
@@ -28892,7 +28918,7 @@ var DDynamicTextMeasure = /** @class */ (function () {
     DDynamicTextMeasure.measure2b = function (iterator, clippingWidth, lineHeight, atlas, result) {
         while (iterator.hasNext()) {
             var character = iterator.next();
-            if (character === NEW_LINE) {
+            if (character === Character.NEW_LINE) {
                 result.newLine(lineHeight);
             }
             else {
@@ -28913,7 +28939,7 @@ var DDynamicTextMeasure = /** @class */ (function () {
     DDynamicTextMeasure.measure2 = function (iterator, clippingWidth, lineHeight, atlas, result) {
         while (iterator.hasNext()) {
             var character = iterator.next();
-            if (character === NEW_LINE) {
+            if (character === Character.NEW_LINE) {
                 result.newLine(lineHeight);
             }
             else {
@@ -28933,7 +28959,7 @@ var DDynamicTextMeasure = /** @class */ (function () {
     DDynamicTextMeasure.measure3 = function (iterator, clippingWidth, clippingHeight, fontHeight, lineHeight, atlas, result) {
         while (iterator.hasNext()) {
             var character = iterator.next();
-            if (character === NEW_LINE) {
+            if (character === Character.NEW_LINE) {
                 if (result.isPushableAtNewLine(clippingHeight, lineHeight, fontHeight)) {
                     result.newLine(lineHeight);
                 }
@@ -28957,7 +28983,7 @@ var DDynamicTextMeasure = /** @class */ (function () {
     DDynamicTextMeasure.measure4 = function (iterator, lineHeight, atlas, result) {
         while (iterator.hasNext()) {
             var character = iterator.next();
-            if (character === NEW_LINE) {
+            if (character === Character.NEW_LINE) {
                 result.newLine(lineHeight);
             }
             else {
@@ -28970,7 +28996,7 @@ var DDynamicTextMeasure = /** @class */ (function () {
     };
     DDynamicTextMeasure.measure5 = function (iterator, clippingWidth, lineHeight, atlas, result, close) {
         result.clipped = true;
-        var dots = atlas.get("...");
+        var dots = atlas.get(Character.DOTS);
         if (dots != null) {
             while (!result.isPushable(clippingWidth, dots)) {
                 if (!result.pop()) {
@@ -28986,7 +29012,7 @@ var DDynamicTextMeasure = /** @class */ (function () {
         }
         else {
             while (iterator.hasNext()) {
-                if (iterator.next() === NEW_LINE) {
+                if (iterator.next() === Character.NEW_LINE) {
                     result.newLine(lineHeight);
                     break;
                 }
@@ -29070,47 +29096,61 @@ var DDynamicTextMeasure = /** @class */ (function () {
 var DDynamicTextGeometry = /** @class */ (function (_super) {
     __extends(DDynamicTextGeometry, _super);
     function DDynamicTextGeometry() {
-        var _this = _super.call(this, new Float32Array(64), new Float32Array(64), new Uint16Array(48)) || this;
+        var _a, _b, _c;
+        var _this = _super.call(this, ((_a = DDynamicTextGeometry.VERTICES) !== null && _a !== void 0 ? _a : (DDynamicTextGeometry.VERTICES = new Float32Array(0))), ((_b = DDynamicTextGeometry.UVS) !== null && _b !== void 0 ? _b : (DDynamicTextGeometry.UVS = new Float32Array(0))), ((_c = DDynamicTextGeometry.INDICES) !== null && _c !== void 0 ? _c : (DDynamicTextGeometry.INDICES = new Uint16Array(0)))) || this;
         _this.width = 0;
         _this.height = 0;
         _this.scale = 1;
         _this.scaled = false;
         _this.clipped = false;
+        _this.vertexBuffer = _this.getBuffer("aVertexPosition");
+        _this.vertices = DDynamicTextGeometry.VERTICES;
+        _this.uvBuffer = _this.getBuffer("aTextureCoord");
+        _this.uvs = DDynamicTextGeometry.UVS;
+        _this.indexBuffer = _this.getIndex();
+        _this.indices = DDynamicTextGeometry.INDICES;
+        _this.nchars = 0;
         return _this;
     }
     DDynamicTextGeometry.prototype.update = function (text, atlas, modifier) {
-        var vertexBuffer = this.getBuffer("aVertexPosition");
-        var uvBuffer = this.getBuffer("aTextureCoord");
-        var indexBuffer = this.getIndex();
         var result = DDynamicTextMeasure.measure(text, atlas, modifier);
-        var requiredTextSize = Math.ceil(result.count / 8) << 3;
-        var requiredVertexSize = requiredTextSize << 3;
-        if (vertexBuffer.data.length < requiredVertexSize) {
-            vertexBuffer.data = new Float32Array(requiredVertexSize);
-            uvBuffer.data = new Float32Array(requiredVertexSize);
-        }
-        var requiredIndexSize = requiredTextSize * 6;
-        if (indexBuffer.data.length < requiredIndexSize) {
-            indexBuffer.data = new Uint16Array(requiredIndexSize);
-        }
-        var vertices = vertexBuffer.data;
-        var uvs = uvBuffer.data;
-        var indices = indexBuffer.data;
+        var resultCount = result.count;
+        var nchars = ((resultCount >> 3) + (resultCount & 0x7 ? 1 : 0)) << 3;
+        if (this.nchars < nchars) {
+            this.nchars = nchars;
+            var nvertex = nchars << 3;
+            this.vertices = new Float32Array(nvertex);
+            this.uvs = new Float32Array(nvertex);
+            this.vertexBuffer.data = this.vertices;
+            this.uvBuffer.data = this.uvs;
+            var nindex = (nchars << 2) + (nchars << 1);
+            this.indices = new Uint16Array(nindex);
+            this.indexBuffer.data = this.indices;
+            this.initIndices(this.indices);
+            this.indexBuffer.update();
+        }
+        else {
+            nchars = this.nchars;
+        }
+        if (nchars <= 0) {
+            return;
+        }
+        var vertices = this.vertices;
+        var uvs = this.uvs;
         if (atlas != null) {
-            var count = result.count;
             var characters = result.characters;
             var scale = result.scale;
-            for (var i = 0; i < count; ++i) {
+            var fw = 1 / atlas.width;
+            var fh = 1 / atlas.height;
+            for (var i = 0; i < resultCount; ++i) {
                 var character = characters[i];
                 var cx = character.x;
                 var cy = character.y;
                 var cc = character.character;
-                var w = atlas.width;
-                var h = atlas.height;
-                this.writeCharacter(vertices, uvs, indices, i, cx, cy, scale, cc, w, h);
+                this.fill(vertices, uvs, i, cx, cy, scale, cc, fw, fh);
             }
-            for (var i = count, imax = vertices.length >> 3; i < imax; ++i) {
-                this.writeCharacterEmpty(vertices, uvs, indices, i);
+            for (var i = resultCount; i < nchars; ++i) {
+                this.fillBlank(vertices, uvs, i);
             }
             this.width = result.width * scale;
             this.height = result.height * scale;
@@ -29119,8 +29159,8 @@ var DDynamicTextGeometry = /** @class */ (function (_super) {
             this.clipped = result.clipped;
         }
         else {
-            for (var i = 0, imax = vertices.length >> 3; i < imax; ++i) {
-                this.writeCharacterEmpty(vertices, uvs, indices, i);
+            for (var i = 0; i < nchars; ++i) {
+                this.fillBlank(vertices, uvs, i);
             }
             this.width = 0;
             this.height = 0;
@@ -29128,11 +29168,10 @@ var DDynamicTextGeometry = /** @class */ (function (_super) {
             this.scaled = false;
             this.clipped = false;
         }
-        vertexBuffer.update();
-        uvBuffer.update();
-        indexBuffer.update();
+        this.vertexBuffer.update();
+        this.uvBuffer.update();
     };
-    DDynamicTextGeometry.prototype.writeCharacter = function (vertices, uvs, indices, index, x, y, scale, character, width, height) {
+    DDynamicTextGeometry.prototype.fill = function (vertices, uvs, index, x, y, scale, character, fw, fh) {
         var cx = character.x;
         var cy = character.y;
         var cw = character.width;
@@ -29151,10 +29190,10 @@ var DDynamicTextGeometry = /** @class */ (function (_super) {
         vertices[iv + 5] = y1;
         vertices[iv + 6] = x0;
         vertices[iv + 7] = y1;
-        var u0 = cx / width;
-        var v0 = cy / height;
-        var u1 = (cx + cw) / width;
-        var v1 = (cy + ch) / height;
+        var u0 = cx * fw;
+        var v0 = cy * fh;
+        var u1 = (cx + cw) * fw;
+        var v1 = (cy + ch) * fh;
         uvs[iv + 0] = u0;
         uvs[iv + 1] = v0;
         uvs[iv + 2] = u1;
@@ -29163,16 +29202,8 @@ var DDynamicTextGeometry = /** @class */ (function (_super) {
         uvs[iv + 5] = v1;
         uvs[iv + 6] = u0;
         uvs[iv + 7] = v1;
-        var ii = index * 6;
-        var vo = index << 2;
-        indices[ii + 0] = vo + 0;
-        indices[ii + 1] = vo + 1;
-        indices[ii + 2] = vo + 3;
-        indices[ii + 3] = vo + 1;
-        indices[ii + 4] = vo + 2;
-        indices[ii + 5] = vo + 3;
-    };
-    DDynamicTextGeometry.prototype.writeCharacterEmpty = function (vertices, uvs, indices, index) {
+    };
+    DDynamicTextGeometry.prototype.fillBlank = function (vertices, uvs, index) {
         var iv = index << 3;
         vertices[iv + 0] = 0;
         vertices[iv + 1] = 0;
@@ -29190,14 +29221,16 @@ var DDynamicTextGeometry = /** @class */ (function (_super) {
         uvs[iv + 5] = 0;
         uvs[iv + 6] = 0;
         uvs[iv + 7] = 0;
-        var ii = index * 6;
-        var vo = index << 2;
-        indices[ii + 0] = vo + 0;
-        indices[ii + 1] = vo + 1;
-        indices[ii + 2] = vo + 3;
-        indices[ii + 3] = vo + 1;
-        indices[ii + 4] = vo + 2;
-        indices[ii + 5] = vo + 3;
+    };
+    DDynamicTextGeometry.prototype.initIndices = function (indices) {
+        for (var iv = 0, ivmax = this.nchars << 2, ii = 0; iv < ivmax; iv += 4, ii += 6) {
+            indices[ii] = iv;
+            indices[ii + 1] = iv + 1;
+            indices[ii + 2] = iv + 3;
+            indices[ii + 3] = iv + 1;
+            indices[ii + 4] = iv + 2;
+            indices[ii + 5] = iv + 3;
+        }
     };
     return DDynamicTextGeometry;
 }(pixi_js.MeshGeometry));
@@ -70090,26 +70123,26 @@ var DynamicFontAtlas = /** @class */ (function () {
         var padding = this.toPadding(fontSize);
         this._padding = padding;
         this._font = new DynamicFontAtlasFont(fontId, fontSize, fontColor, padding);
-        this._characters = {};
-        this._length = 0;
         this._unrefCount = 0;
         this._width = 1;
         this._height = 1;
-        this._revision = 0;
         this._revisionUpdated = 0;
         this._texture = pixi_js.Texture.from(this._canvas, {
             mipmap: pixi_js.MIPMAP_MODES.OFF,
             resolution: resolution,
             scaleMode: pixi_js.SCALE_MODES.NEAREST
         });
-        var characters = this._characters;
-        this.add_(" ", " ", characters, DynamicFontAtlasCharacterType.SPACE_R);
-        this.add_("\t", "    ", characters, DynamicFontAtlasCharacterType.SPACE_R);
-        this.add_("...", "...", characters, DynamicFontAtlasCharacterType.LETTER_RNB);
-        for (var i = 0, imax = ASCII_CHARACTERS.length; i < imax; ++i) {
-            var char = ASCII_CHARACTERS[i];
-            this.add_(char, char, characters, DynamicFontAtlasCharacterType.LETTER_RNB);
-        }
+        var characters = new Map();
+        characters.set(Character.SPACE, this.newChar(Character.SPACE, DynamicFontAtlasCharacterType.SPACE_R));
+        characters.set(Character.TAB, this.newChar(Character.SOFT_TAB, DynamicFontAtlasCharacterType.SPACE_R));
+        characters.set(Character.DOTS, this.newChar(Character.DOTS, DynamicFontAtlasCharacterType.LETTER_RNB));
+        for (var i = 0, imax = Character.ASCII.length; i < imax; ++i) {
+            var ac = Character.ASCII[i];
+            characters.set(ac, this.newChar(ac, DynamicFontAtlasCharacterType.LETTER_RNB));
+        }
+        this._characters = characters;
+        this._createds = new Map();
+        this._revision = 1;
     }
     DynamicFontAtlas.prototype.toPadding = function (fontSize) {
         return Math.max(3, Math.ceil(fontSize * 0.2));
@@ -70163,86 +70196,106 @@ var DynamicFontAtlas = /** @class */ (function () {
         enumerable: false,
         configurable: true
     });
-    DynamicFontAtlas.prototype.add_ = function (id, character, characters, type) {
-        if (!this.isIgnored(character)) {
-            var data = characters[id];
-            if (data != null) {
-                if (!(data.type & DynamicFontAtlasCharacterType.RESERVED)) {
-                    if (data.ref === 0) {
+    DynamicFontAtlas.prototype.newChar = function (character, type) {
+        var advance = this.getAdvance(character);
+        var padding = this._padding;
+        var width = Math.ceil(padding + advance + padding);
+        var height = this.font.height;
+        return new DynamicFontAtlasCharacter(type, character, -width, // Setting X and Y to zeros leads to render the character at the UV coordinate (0, 0).
+        -height, width, height, advance);
+    };
+    DynamicFontAtlas.prototype.add = function (characters, type) {
+        var cs = this._characters;
+        var cds = this._createds;
+        for (var i = 0, imax = characters.length; i < imax;) {
+            if (characters.charCodeAt(i) <= 0xff) {
+                // Ignore ASCII characters
+                i += 1;
+                continue;
+            }
+            var j = i + 1;
+            for (; j < imax; ++j) {
+                var cc = characters.charCodeAt(j);
+                if ((0xdc00 <= cc && cc <= 0xdfff) || (0xfe00 <= cc && cc <= 0xfe0f)) {
+                    // Low surrogate
+                    // Variation selector
+                    continue;
+                }
+                break;
+            }
+            // Increment the reference count or create a new one
+            var nac = characters.substring(i, j);
+            var c = cs.get(nac);
+            if (c != null) {
+                if (!(c.type & DynamicFontAtlasCharacterType.RESERVED)) {
+                    if (c.ref === 0) {
                         this._unrefCount -= 1;
                     }
-                    data.ref += 1;
+                    c.ref += 1;
                 }
             }
             else {
-                var advance = this.getAdvance(character);
-                var padding = this._padding;
-                var width = Math.ceil(padding + advance + padding);
-                var height = this.font.height;
-                characters[id] = new DynamicFontAtlasCharacter(type, character, -width, // Setting X and Y to zeros leads to render the letter at the UV coordinate (0, 0).
-                -height, width, height, advance);
-                this._length += 1;
+                var cd = cds.get(nac);
+                if (cd != null) {
+                    cd.ref = 1;
+                    cs.set(nac, cd);
+                }
+                else {
+                    var newCharacter = this.newChar(nac, type);
+                    cs.set(nac, newCharacter);
+                    cds.set(nac, newCharacter);
+                }
                 this._revision += 1;
             }
+            // Go to the next
+            i = j;
         }
     };
-    DynamicFontAtlas.prototype.isIgnored = function (character) {
-        switch (character) {
-            case "\n": // Line feed
-                return true;
-            case "\r": // Carriage return
-                return true;
-            case "\v": // Vertical tab
-                return true;
-            case "\f": // Form feed
-                return true;
-            case "\u0085": // Next line
-                return true;
-        }
-        return false;
-    };
-    DynamicFontAtlas.prototype.remove_ = function (id, characters) {
-        var data = characters[id];
-        if (data != null) {
-            if (!(data.type & DynamicFontAtlasCharacterType.RESERVED) && 0 < data.ref) {
-                data.ref -= 1;
-                if (data.ref === 0) {
+    DynamicFontAtlas.prototype.remove = function (characters) {
+        var cs = this._characters;
+        for (var i = 0, imax = characters.length; i < imax;) {
+            if (characters.charCodeAt(i) <= 0xff) {
+                // Ignore ASCII characters
+                i += 1;
+                continue;
+            }
+            var j = i + 1;
+            for (; j < imax; ++j) {
+                var cc = characters.charCodeAt(j);
+                if ((0xdc00 <= cc && cc <= 0xdfff) || (0xfe00 <= cc && cc <= 0xfe0f)) {
+                    // Low surrogate
+                    // Variation selector
+                    continue;
+                }
+                break;
+            }
+            // Decrement the reference count
+            var nac = characters.substring(i, j);
+            var c = cs.get(nac);
+            if (c != null && 0 < c.ref && !(c.type & DynamicFontAtlasCharacterType.RESERVED)) {
+                c.ref -= 1;
+                if (c.ref === 0) {
                     this._unrefCount += 1;
                 }
             }
+            // Go to the next
+            i = j;
         }
     };
-    DynamicFontAtlas.prototype.cleanup_ = function () {
-        if (this._length >> 1 <= this._unrefCount) {
-            var characters = this._characters;
-            for (var character in characters) {
-                if (characters[character].ref <= 0) {
-                    delete characters[character];
+    DynamicFontAtlas.prototype.cleanup = function () {
+        var characters = this._characters;
+        if (characters.size >> 1 <= this._unrefCount) {
+            characters.forEach(function (char, id) {
+                if (char.ref <= 0) {
+                    characters.delete(id);
                 }
-            }
-            this._length -= this._unrefCount;
+            });
             this._revision += 1;
             this._unrefCount = 0;
         }
     };
-    DynamicFontAtlas.prototype.add = function (targets, type) {
-        if (type === void 0) { type = DynamicFontAtlasCharacterType.LETTER; }
-        var characters = this._characters;
-        var iterator = UtilCharacterIterator.from(targets);
-        while (iterator.hasNext()) {
-            var character = iterator.next();
-            this.add_(character, character, characters, type);
-        }
-    };
-    DynamicFontAtlas.prototype.remove = function (targets) {
-        var characters = this._characters;
-        var iterator = UtilCharacterIterator.from(targets);
-        while (iterator.hasNext()) {
-            this.remove_(iterator.next(), characters);
-        }
-    };
     DynamicFontAtlas.prototype.get = function (id) {
-        return this._characters[id];
+        return this._characters.get(id);
     };
     DynamicFontAtlas.prototype.getAdvance = function (target) {
         var context = this.getContext();
@@ -70281,52 +70334,50 @@ var DynamicFontAtlas = /** @class */ (function () {
         return context;
     };
     DynamicFontAtlas.prototype.update = function () {
-        this.cleanup_();
+        this.cleanup();
         if (this._revisionUpdated < this._revision) {
             this._revisionUpdated = this._revision;
             var canvas = this._canvas;
             if (canvas != null) {
                 var font = this._font;
-                var fontHeight = font.height;
+                var fontHeight_1 = font.height;
                 var characters = this._characters;
-                var width = (this._width = this.toPowerOf2(Math.ceil(Math.sqrt(this._length)) * fontHeight));
-                var offsetX = this._padding;
-                var x = 0;
-                var y = 0;
-                for (var key in characters) {
-                    var character = characters[key];
-                    if (width <= x + character.width) {
-                        x = 0;
-                        y += fontHeight;
+                var width_1 = (this._width = this.toPowerOf2(Math.ceil(Math.sqrt(characters.size)) * fontHeight_1));
+                var offsetX_1 = this._padding;
+                var x_1 = 0;
+                var y_1 = 0;
+                characters.forEach(function (character) {
+                    if (width_1 <= x_1 + character.width) {
+                        x_1 = 0;
+                        y_1 += fontHeight_1;
                     }
-                    character.x = x;
-                    character.y = y;
-                    character.origin.x = x + offsetX;
-                    x += character.width;
-                }
-                var height = (this._height = y + fontHeight);
+                    character.x = x_1;
+                    character.y = y_1;
+                    character.origin.x = x_1 + offsetX_1;
+                    x_1 += character.width;
+                });
+                var height = (this._height = y_1 + fontHeight_1);
                 // Make an input canvas
                 // Here, we need to reset the context because
                 // context settings will be lost when we set the width/height.
                 var baseTexture = this._texture.baseTexture;
                 var resolution = baseTexture.resolution;
-                var realWidth = Math.ceil(width * resolution);
+                var realWidth = Math.ceil(width_1 * resolution);
                 var realHeight = Math.ceil(height * resolution);
                 canvas.width = realWidth;
                 canvas.height = realHeight;
-                var context = this.getContext();
-                if (context != null) {
-                    UtilFont.measure(context, font);
-                    var offsetY = Math.round((fontHeight - (font.ascent + font.descent)) * 0.5 + font.ascent);
-                    context.save();
-                    context.scale(resolution, resolution);
-                    context.clearRect(0, 0, width, height);
-                    for (var key in characters) {
-                        var character = characters[key];
-                        character.origin.y = character.y + offsetY;
-                        context.fillText(key, character.origin.x, character.origin.y);
-                    }
-                    context.restore();
+                var context_1 = this.getContext();
+                if (context_1 != null) {
+                    UtilFont.measure(context_1, font);
+                    var offsetY_1 = Math.round((fontHeight_1 - (font.ascent + font.descent)) * 0.5 + font.ascent);
+                    context_1.save();
+                    context_1.scale(resolution, resolution);
+                    context_1.clearRect(0, 0, width_1, height);
+                    characters.forEach(function (character) {
+                        character.origin.y = character.y + offsetY_1;
+                        context_1.fillText(character.character, character.origin.x, character.origin.y);
+                    });
+                    context_1.restore();
                 }
                 baseTexture.setRealSize(realWidth, realHeight);
                 return true;
@@ -70342,7 +70393,7 @@ var DynamicFontAtlas = /** @class */ (function () {
     };
     Object.defineProperty(DynamicFontAtlas.prototype, "length", {
         get: function () {
-            return this._length;
+            return this._characters.size;
         },
         enumerable: false,
         configurable: true
@@ -70352,10 +70403,9 @@ var DynamicFontAtlas = /** @class */ (function () {
         if (canvas != null) {
             this._canvas = null;
         }
-        var characters = this._characters;
-        for (var character in characters) {
-            delete characters[character];
-        }
+        this._characters.clear();
+        this._createds.clear();
+        this._unrefCount = 0;
     };
     DynamicFontAtlas.prototype.toPowerOf2 = function (size) {
         var result = 32;
@@ -70404,7 +70454,7 @@ var DynamicFontAtlases = /** @class */ (function () {
             atlas = new DynamicFontAtlas(fontId, fontSize, fontColor, this._resolution);
             colorToAtlas.set(fontColor, atlas);
         }
-        atlas.add(targets);
+        atlas.add(targets, DynamicFontAtlasCharacterType.LETTER);
     };
     DynamicFontAtlases.prototype.remove = function (fontId, fontColor, targets) {
         var colorToAtlas = this._atlases.get(fontId);
@@ -77676,22 +77726,7 @@ var DPane = /** @class */ (function (_super) {
         });
     };
     DPane.prototype.onScrollBarUpdate = function (isRegionVisible) {
-        var overflowMask = this._overflowMask;
-        if (overflowMask != null) {
-            var content = this.content;
-            if (isRegionVisible) {
-                if (content.mask !== overflowMask) {
-                    content.mask = overflowMask;
-                    DApplications.update(this);
-                }
-            }
-            else {
-                if (content.mask) {
-                    content.mask = null;
-                    DApplications.update(this);
-                }
-            }
-        }
+        // DO NOTHING
     };
     DPane.prototype.initScrollBar = function (scrollbar) {
         var _this = this;
@@ -77764,14 +77799,18 @@ var DPane = /** @class */ (function (_super) {
     };
     DPane.prototype.getOverflowMask = function () {
         var result = this._overflowMask;
-        if (result == null) {
-            result = new DBaseOverflowMask(this);
+        if (result === undefined) {
+            result = this.newOverflowMask();
             this._overflowMask = result;
-            this.reflowable.add(result);
-            this.toDirty();
         }
         return result;
     };
+    DPane.prototype.newOverflowMask = function () {
+        var result = new DBaseOverflowMask(this);
+        this.reflowable.add(result);
+        this.toDirty();
+        return result;
+    };
     DPane.prototype.onWheel = function (e, deltas, global) {
         var content = this.content;
         var x = this.getWheelContentX(content, deltas.deltaX * deltas.lowest);
@@ -100706,6 +100745,7 @@ exports.BuilderTriangleRounded = BuilderTriangleRounded;
 exports.CIRCLE_INDEX_COUNT = CIRCLE_INDEX_COUNT;
 exports.CIRCLE_VERTEX_COUNT = CIRCLE_VERTEX_COUNT;
 exports.CIRCLE_WORLD_SIZE = CIRCLE_WORLD_SIZE;
+exports.Character = Character;
 exports.DAlignHorizontal = DAlignHorizontal;
 exports.DAlignVertical = DAlignVertical;
 exports.DAlignWith = DAlignWith;