@wcardinal/wcardinal-ui 0.404.0 → 0.406.0

package/dist/wcardinal-ui.js

@@ -1,5 +1,5 @@
 /*
- Winter Cardinal UI v0.404.0
+ Winter Cardinal UI v0.406.0
  Copyright (C) 2019 Toshiba Corporation
  SPDX-License-Identifier: Apache-2.0
 
@@ -68,7 +68,6 @@
      */
     var EShapeUploadedImpl = /** @class */ (function () {
         function EShapeUploadedImpl(buffer, vertexOffset, indexOffset, vertexCount, indexCount, builders) {
-            this.buffer = buffer;
             this._builders = builders;
             this._vertexOffset = vertexOffset;
             this._indexOffset = indexOffset;
@@ -77,20 +76,38 @@
         }
         EShapeUploadedImpl.prototype.init = function (shape) {
             shape.uploaded = this;
-            var buffer = this.buffer;
             var builders = this._builders;
             for (var i = 0, imax = builders.length; i < imax; ++i) {
-                builders[i].init(buffer);
+                builders[i].init();
             }
             this.update(shape);
             return this;
         };
+        EShapeUploadedImpl.prototype.reinit = function (buffer, shape, vertexOffset, indexOffset) {
+            var builders = this._builders;
+            var voffset = vertexOffset;
+            var ioffset = indexOffset;
+            for (var i = 0, imax = builders.length; i < imax; ++i) {
+                var builder = builders[i];
+                if (!builder.reinit(buffer, shape, voffset, ioffset)) {
+                    return false;
+                }
+                var vertexCount = builder.vertexCount;
+                var indexCount = builder.indexCount;
+                voffset += vertexCount;
+                ioffset += indexCount;
+            }
+            this._vertexCount = voffset - vertexOffset;
+            this._indexCount = ioffset - indexOffset;
+            this.update(shape);
+            return true;
+        };
         EShapeUploadedImpl.prototype.update = function (shape) {
-            var buffer = this.buffer;
             var builders = this._builders;
             for (var i = 0, imax = builders.length; i < imax; ++i) {
-                builders[i].update(buffer, shape);
+                builders[i].update(shape);
             }
+            return this;
         };
         EShapeUploadedImpl.prototype.isCompatible = function (shape) {
             var builders = this._builders;
@@ -101,9 +118,6 @@
             }
             return true;
         };
-        EShapeUploadedImpl.prototype.getBuffer = function () {
-            return this.buffer;
-        };
         EShapeUploadedImpl.prototype.getVertexOffset = function () {
             return this._vertexOffset;
         };
@@ -486,7 +500,7 @@
     var TEXT_FMIN = 0.00001;
     var TEXT_WORK_POINT = new pixi_js.Point();
     var toTextBufferCount = function (shape) {
-        var l = shape.text.value.length;
+        var l = shape.text.plength;
         return ((l >> 3) + (0 < (l & 0x7) ? 1 : 0)) << 3;
     };
     var buildTextClipping = function (clippings, voffset, vcount) {
@@ -1483,7 +1497,8 @@
      * SPDX-License-Identifier: Apache-2.0
      */
     var BuilderBase = /** @class */ (function () {
-        function BuilderBase(vertexOffset, indexOffset, vertexCount, indexCount) {
+        function BuilderBase(buffer, vertexOffset, indexOffset, vertexCount, indexCount) {
+            this.buffer = buffer;
             this.vertexOffset = vertexOffset;
             this.indexOffset = indexOffset;
             this.vertexCount = vertexCount;
@@ -1503,6 +1518,26 @@
             this.texture = null;
             this.textureTransformId = -1;
         }
+        BuilderBase.prototype.reinit = function (buffer, shape, vertexOffset, indexOffset) {
+            if (this.buffer !== buffer ||
+                this.vertexOffset !== vertexOffset ||
+                this.indexOffset !== indexOffset) {
+                if (buffer.check(vertexOffset, indexOffset, this.vertexCount, this.indexCount)) {
+                    this.inited = BuilderFlag.NONE;
+                    this.buffer = buffer;
+                    this.vertexOffset = vertexOffset;
+                    this.indexOffset = indexOffset;
+                    this.init();
+                    return true;
+                }
+                else {
+                    return false;
+                }
+            }
+            else {
+                return true;
+            }
+        };
         BuilderBase.prototype.isCompatible = function (shape) {
             return true;
         };
@@ -2105,6 +2140,13 @@
             enumerable: false,
             configurable: true
         });
+        Object.defineProperty(EShapeBarPoints.prototype, "plength", {
+            get: function () {
+                return 2;
+            },
+            enumerable: false,
+            configurable: true
+        });
         Object.defineProperty(EShapeBarPoints.prototype, "id", {
             get: function () {
                 this.update();
@@ -4507,21 +4549,6 @@
         return -ax <= x && x <= +ax && -ay <= y && y <= +ay;
     };
 
-    /*
-     * Copyright (C) 2019 Toshiba Corporation
-     * SPDX-License-Identifier: Apache-2.0
-     */
-    var toGradientSerialized = function (gradient) {
-        var points = gradient.points;
-        var result = "[".concat(gradient.direction);
-        for (var i = 0, imax = points.length, j = 1; i < imax; i += 1, j += 3) {
-            var point = points[i];
-            result += ",".concat(point.color, ",").concat(point.alpha, ",").concat(point.position);
-        }
-        result += "]";
-        return result;
-    };
-
     /*
      * Copyright (C) 2019 Toshiba Corporation
      * SPDX-License-Identifier: Apache-2.0
@@ -4922,16 +4949,6 @@
                 }
             }
         };
-        Object.defineProperty(EShapeBase.prototype, "image", {
-            get: function () {
-                return this._image;
-            },
-            set: function (image) {
-                this._image = image;
-            },
-            enumerable: false,
-            configurable: true
-        });
         Object.defineProperty(EShapeBase.prototype, "points", {
             get: function () {
                 return this._points;
@@ -5080,20 +5097,6 @@
             }
             return childrenSerialized;
         };
-        EShapeBase.prototype.serializeImage = function (manager) {
-            var image = this._image;
-            return image != null ? manager.addResource(image.src) : -1;
-        };
-        EShapeBase.prototype.serializeGradient = function (manager) {
-            var gradient = this.gradient;
-            if (gradient != null) {
-                if (gradient.serialized == null) {
-                    gradient.serialized = toGradientSerialized(gradient);
-                }
-                return manager.addResource(gradient.serialized);
-            }
-            return -1;
-        };
         EShapeBase.prototype.serializeState = function (manager) {
             var state = this.state;
             return (this.interactive ? 1 : 0) | (state.isFocusable ? 0 : 2) | (state.isActive ? 4 : 0);
@@ -7778,6 +7781,7 @@
             this._parent = parent;
             this._enable = true;
             this._value = value;
+            this._plength = this._length = value.length;
             this._color = color;
             this._alpha = alpha;
             this._family = family;
@@ -7813,39 +7817,60 @@
             set: function (value) {
                 if (this._value !== value) {
                     this._value = value;
-                    // Compatibility check
-                    var parent_1 = this._parent;
-                    var uploaded = parent_1.uploaded;
-                    if (uploaded == null || !uploaded.isCompatible(parent_1)) {
-                        this.atlas = undefined;
-                        parent_1.toDirty();
-                        return;
+                    var length_1 = value.length;
+                    this._length = length_1;
+                    if (this._plength < length_1) {
+                        this._plength = length_1;
                     }
-                    // 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)) {
-                                this.atlas = undefined;
-                                parent_1.toDirty();
-                                return;
-                            }
-                        }
+                    if (this.isCompatible(value)) {
+                        this._parent.updateUploaded();
                     }
                     else {
                         this.atlas = undefined;
-                        parent_1.toDirty();
-                        return;
+                        this._parent.toDirty();
                     }
-                    // Update uploaded
-                    parent_1.updateUploaded();
                 }
             },
             enumerable: false,
             configurable: true
         });
+        EShapeTextImpl.prototype.isCompatible = function (value) {
+            // Compatibility check
+            var parent = this._parent;
+            var uploaded = parent.uploaded;
+            if (uploaded == null || !uploaded.isCompatible(parent)) {
+                return false;
+            }
+            // 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 {
+                return false;
+            }
+            return true;
+        };
+        Object.defineProperty(EShapeTextImpl.prototype, "length", {
+            get: function () {
+                return this._length;
+            },
+            enumerable: false,
+            configurable: true
+        });
+        Object.defineProperty(EShapeTextImpl.prototype, "plength", {
+            get: function () {
+                return this._plength;
+            },
+            enumerable: false,
+            configurable: true
+        });
         Object.defineProperty(EShapeTextImpl.prototype, "family", {
             get: function () {
                 return this._family;
@@ -7979,7 +8004,18 @@
             var isChangedUploaded = false;
             if (value != null && this._value !== value) {
                 this._value = value;
-                isChangedDirty = true;
+                var length_2 = value.length;
+                this._length = length_2;
+                if (this._plength < length_2) {
+                    this._plength = length_2;
+                }
+                if (this.isCompatible(value)) {
+                    isChangedUploaded = true;
+                }
+                else {
+                    this.atlas = undefined;
+                    isChangedDirty = true;
+                }
             }
             if (color != null && this._color !== color) {
                 this._color = color;
@@ -8078,6 +8114,21 @@
         return EShapeTextImpl;
     }());
 
+    /*
+     * Copyright (C) 2019 Toshiba Corporation
+     * SPDX-License-Identifier: Apache-2.0
+     */
+    var toGradientSerialized = function (gradient) {
+        var points = gradient.points;
+        var result = "[".concat(gradient.direction);
+        for (var i = 0, imax = points.length, j = 1; i < imax; i += 1, j += 3) {
+            var point = points[i];
+            result += ",".concat(point.color, ",").concat(point.alpha, ",").concat(point.position);
+        }
+        result += "]";
+        return result;
+    };
+
     /*
      * Copyright (C) 2019 Toshiba Corporation
      * SPDX-License-Identifier: Apache-2.0
@@ -8146,11 +8197,9 @@
                 if (this._image !== image) {
                     if (image != null) {
                         this._image = image;
-                        this.imageSrc = image.src;
                     }
                     else {
                         this._image = undefined;
-                        this.imageSrc = undefined;
                     }
                     var parent_1 = this.parent;
                     if (parent_1 != null) {
@@ -8161,6 +8210,20 @@
             enumerable: false,
             configurable: true
         });
+        EShapePrimitive.prototype.serializeImage = function (manager) {
+            var image = this._image;
+            return image != null ? manager.addResource(image.url) : -1;
+        };
+        EShapePrimitive.prototype.serializeGradient = function (manager) {
+            var gradient = this.gradient;
+            if (gradient != null) {
+                if (gradient.serialized == null) {
+                    gradient.serialized = toGradientSerialized(gradient);
+                }
+                return manager.addResource(gradient.serialized);
+            }
+            return -1;
+        };
         return EShapePrimitive;
     }(EShapeBase));
 
@@ -8517,22 +8580,24 @@
      */
     var BuilderBar = /** @class */ (function (_super) {
         __extends(BuilderBar, _super);
-        function BuilderBar(vertexOffset, indexOffset) {
-            var _this = _super.call(this, vertexOffset, indexOffset, BAR_VERTEX_COUNT, BAR_INDEX_COUNT) || this;
+        function BuilderBar(buffer, vertexOffset, indexOffset) {
+            var _this = _super.call(this, buffer, vertexOffset, indexOffset, BAR_VERTEX_COUNT, BAR_INDEX_COUNT) || this;
             _this.pointsId = -1;
             _this.pointsStyle = EShapePointsStyle.NONE;
             return _this;
         }
-        BuilderBar.prototype.init = function (buffer) {
+        BuilderBar.prototype.init = function () {
             var voffset = this.vertexOffset;
             var ioffset = this.indexOffset;
+            var buffer = this.buffer;
             buffer.updateClippings();
             buffer.updateIndices();
             buildBarClipping(buffer.clippings, voffset);
             buildBarIndex(buffer.indices, voffset, ioffset);
             this.inited |= BuilderFlag.CLIPPING_AND_INDEX;
         };
-        BuilderBar.prototype.update = function (buffer, shape) {
+        BuilderBar.prototype.update = function (shape) {
+            var buffer = this.buffer;
             this.updateVertexStepAndColorFill(buffer, shape);
             this.updateColorStroke(buffer, shape);
             this.updateUv(buffer, shape);
@@ -8602,7 +8667,8 @@
      * SPDX-License-Identifier: Apache-2.0
      */
     var BuilderText = /** @class */ (function () {
-        function BuilderText(vertexOffset, indexOffset, vertexCount, indexCount) {
+        function BuilderText(buffer, vertexOffset, indexOffset, vertexCount, indexCount) {
+            this.buffer = buffer;
             this.vertexOffset = vertexOffset;
             this.indexOffset = indexOffset;
             this.vertexCount = vertexCount;
@@ -8637,10 +8703,11 @@
             this.clipping = false;
             this.fitting = false;
         }
-        BuilderText.prototype.init = function (buffer) {
+        BuilderText.prototype.init = function () {
             var vcount = this.vertexCount;
             if (0 < vcount) {
                 // Clippings
+                var buffer = this.buffer;
                 var voffset = this.vertexOffset;
                 buffer.updateClippings();
                 buildTextClipping(buffer.clippings, voffset, vcount);
@@ -8649,21 +8716,51 @@
                 buildTextIndex(buffer.indices, voffset, this.indexOffset, this.indexCount);
             }
             this.inited |= BuilderFlag.CLIPPING_AND_INDEX;
+            return this;
+        };
+        BuilderText.prototype.reinit = function (buffer, shape, vertexOffset, indexOffset) {
+            var tcount = toTextBufferCount(shape);
+            var vertexCount = tcount << TEXT_VERTEX_COUNT_SHIFT;
+            var indexCount = tcount << TEXT_INDEX_COUNT_SHIFT;
+            if (this.buffer !== buffer ||
+                this.vertexOffset !== vertexOffset ||
+                this.indexOffset !== indexOffset ||
+                this.vertexCount !== vertexCount ||
+                this.indexCount !== indexCount) {
+                if (buffer.check(vertexOffset, indexOffset, vertexCount, indexCount)) {
+                    this.inited = BuilderFlag.NONE;
+                    this.buffer = buffer;
+                    this.vertexOffset = vertexOffset;
+                    this.indexOffset = indexOffset;
+                    this.vertexCount = vertexCount;
+                    this.indexCount = indexCount;
+                    this.init();
+                    return true;
+                }
+                else {
+                    return false;
+                }
+            }
+            else {
+                return true;
+            }
         };
         BuilderText.prototype.isCompatible = function (shape) {
             return toTextBufferCount(shape) << TEXT_VERTEX_COUNT_SHIFT === this.vertexCount;
         };
-        BuilderText.prototype.update = function (buffer, shape) {
+        BuilderText.prototype.update = function (shape) {
             var vcount = this.vertexCount;
             if (0 < vcount) {
                 var textAtlas = shape.text.atlas;
                 if (textAtlas != null) {
+                    var buffer = this.buffer;
                     this.updateVertex(buffer, shape, textAtlas);
                     this.updateColorFill(buffer, shape);
                     this.updateColorStroke(buffer, shape);
                     this.updateStep(buffer, shape);
                 }
             }
+            return this;
         };
         BuilderText.prototype.updateVertex = function (buffer, shape, textAtlas) {
             var size = shape.size;
@@ -8832,8 +8929,8 @@
         var icount = BAR_INDEX_COUNT + ticount;
         if (buffer.check(voffset, ioffset, vcount, icount)) {
             return new EShapeUploadedImpl(buffer, voffset, ioffset, vcount, icount, [
-                new BuilderBar(voffset, ioffset),
-                new BuilderText(voffset + BAR_VERTEX_COUNT, ioffset + BAR_INDEX_COUNT, tvcount, ticount)
+                new BuilderBar(buffer, voffset, ioffset),
+                new BuilderText(buffer, voffset + BAR_VERTEX_COUNT, ioffset + BAR_INDEX_COUNT, tvcount, ticount)
             ]).init(shape);
         }
         return null;
@@ -17838,6 +17935,9 @@
             enumerable: false,
             configurable: true
         });
+        EShapeGroupViewer.prototype.serializeGradient = function (manager) {
+            return -1;
+        };
         Object.defineProperty(EShapeGroupViewer.prototype, "radius", {
             get: function () {
                 return 0;
@@ -17858,6 +17958,9 @@
             enumerable: false,
             configurable: true
         });
+        EShapeGroupViewer.prototype.serializeImage = function (manager) {
+            return -1;
+        };
         Object.defineProperty(EShapeGroupViewer.prototype, "points", {
             get: function () {
                 return undefined;
@@ -19750,6 +19853,8 @@
             this._valuesBaseLength = 0;
             this._values = [];
             this._segments = [];
+            this._length = 0;
+            this._plength = 0;
             var parentSize = parent.size;
             var parentSizeX = parentSize.x;
             var parentSizeY = parentSize.y;
@@ -19761,7 +19866,14 @@
         }
         Object.defineProperty(EShapeLinePoints.prototype, "length", {
             get: function () {
-                return this._values.length >> 1;
+                return this._length;
+            },
+            enumerable: false,
+            configurable: true
+        });
+        Object.defineProperty(EShapeLinePoints.prototype, "plength", {
+            get: function () {
+                return this._plength;
             },
             enumerable: false,
             configurable: true
@@ -19818,7 +19930,6 @@
             if (this._formatter || this._style & EShapePointsStyle.FORMATTER_MASK) {
                 var uploaded = parent.uploaded;
                 if (uploaded && !uploaded.isCompatible(parent)) {
-                    parent.uploaded = undefined;
                     parent.toDirty();
                 }
             }
@@ -19922,6 +20033,7 @@
                         if (result == null) {
                             result = {
                                 length: 0,
+                                plength: 0,
                                 values: [],
                                 segments: [],
                                 boundary: [0, 0, 0, 0],
@@ -19932,6 +20044,9 @@
                         var segments = this._segments;
                         var length_1 = values.length >> 1;
                         formatter(length_1, values, segments, style, result);
+                        if (result.plength < result.length) {
+                            result.plength = result.length;
+                        }
                         toPointsBoundary(result.values, result.boundary);
                     }
                     else {
@@ -20021,6 +20136,11 @@
                         }
                     }
                 }
+                var newLength = newValuesLength >> 1;
+                this._length = newLength;
+                if (this._plength < newLength) {
+                    this._plength = newLength;
+                }
             }
             // Segments
             if (newSegments != null) {
@@ -20086,7 +20206,6 @@
                         parent_1.updateUploaded();
                     }
                     else {
-                        parent_1.uploaded = undefined;
                         parent_1.toDirty();
                     }
                 }
@@ -21048,12 +21167,10 @@
                 }
             }
         };
-        DynamicSDFFontGenerator.prototype.updateTexture = function (source) {
+        DynamicSDFFontGenerator.prototype.updateTexture = function (width, height, source) {
             var gl = this._gl;
             var canvas = this._canvas;
             if (gl != null && gl.isContextLost() !== true && canvas != null) {
-                var width = source.width;
-                var height = source.height;
                 if (canvas.width !== width || canvas.height !== height) {
                     canvas.width = width;
                     canvas.height = height;
@@ -21416,7 +21533,7 @@
                             context.fillText(data.character, data.origin.x, data.origin.y);
                         }
                         // Convert to SDF font texture
-                        generator.updateTexture(canvas);
+                        generator.updateTexture(width, height, canvas);
                         generator.render();
                         generator.read(canvas);
                         return true;
@@ -21567,9 +21684,9 @@
      */
     var DynamicAtlasItemImage = /** @class */ (function (_super) {
         __extends(DynamicAtlasItemImage, _super);
-        function DynamicAtlasItemImage(image, baseTexture) {
-            var _this = _super.call(this, image.src, image.width / baseTexture.resolution, image.height / baseTexture.resolution, 0, baseTexture) || this;
-            _this.image = image;
+        function DynamicAtlasItemImage(src, width, height, source, baseTexture) {
+            var _this = _super.call(this, src, width / baseTexture.resolution, height / baseTexture.resolution, 0, baseTexture) || this;
+            _this.source = source;
             return _this;
         }
         DynamicAtlasItemImage.prototype.render = function (context) {
@@ -21578,12 +21695,21 @@
             var y = frame.y;
             var w = frame.width;
             var h = frame.height;
-            var image = this.image;
-            context.drawImage(image, x, y, w, h);
-            context.drawImage(image, 0, 0, 1, h, x - 1, y - 1, 1, h + 2);
-            context.drawImage(image, 0, 0, w, 1, x, y - 1, w, 1);
-            context.drawImage(image, w - 1, 0, 1, h, x + w, y - 1, 1, h + 2);
-            context.drawImage(image, 0, h - 1, w, 1, x, y + h, w, 1);
+            var source = this.source;
+            if (source instanceof ImageData) {
+                context.putImageData(source, x, y);
+                context.putImageData(source, x - 1, y, 0, 0, 1, h);
+                context.putImageData(source, x, y - 1, 0, 0, w, 1);
+                context.putImageData(source, x + w, y, w - 1, 0, 1, h);
+                context.putImageData(source, x, y + h, 0, h - 1, w, 1);
+            }
+            else {
+                context.drawImage(source, x, y, w, h);
+                context.drawImage(source, 0, 0, 1, h, x - 1, y - 1, 1, h + 2);
+                context.drawImage(source, 0, 0, w, 1, x, y - 1, w, 1);
+                context.drawImage(source, w - 1, 0, 1, h, x + w, y - 1, 1, h + 2);
+                context.drawImage(source, 0, h - 1, w, 1, x, y + h, w, 1);
+            }
         };
         return DynamicAtlasItemImage;
     }(DynamicAtlasItem));
@@ -21768,12 +21894,6 @@
                 }
             }
         };
-        EShapeBuffer.prototype.isCompatible = function (shape, uploaded, vindex, iindex) {
-            return (uploaded.getBuffer() === this &&
-                uploaded.getVertexOffset() === vindex &&
-                uploaded.getIndexOffset() === iindex &&
-                uploaded.isCompatible(shape));
-        };
         EShapeBuffer.prototype.update = function (iterator, antialiasWeight, noMoreThanOne) {
             var builder = this._builder;
             builder.begin();
@@ -21782,28 +21902,18 @@
             var shape = iterator.get();
             for (; shape != null; shape = iterator.next()) {
                 var uploaded = shape.uploaded;
-                if (uploaded == null || !this.isCompatible(shape, uploaded, vindex, iindex)) {
-                    break;
-                }
-                uploaded.update(shape);
-                uploaded.buildUnit(builder);
-                vindex += uploaded.getVertexCount();
-                iindex += uploaded.getIndexCount();
-                if (noMoreThanOne) {
-                    iterator.next();
-                    builder.end();
-                    this._vertexCount = vindex;
-                    this._indexCount = iindex;
-                    return 0 < builder.units.length;
-                }
-            }
-            for (; shape != null; shape = iterator.next()) {
-                var creater = EShapeUploadeds[shape.type] || EShapeUploadeds[EShapeType.GROUP];
-                if (creater == null) {
-                    break;
-                }
-                var uploaded = creater(this, shape, vindex, iindex, antialiasWeight);
                 if (uploaded == null) {
+                    var creator = EShapeUploadeds[shape.type] || EShapeUploadeds[EShapeType.GROUP];
+                    if (creator == null) {
+                        break;
+                    }
+                    var newUploaded = creator(this, shape, vindex, iindex, antialiasWeight);
+                    if (newUploaded == null) {
+                        break;
+                    }
+                    uploaded = newUploaded;
+                }
+                else if (!uploaded.reinit(this, shape, vindex, iindex)) {
                     break;
                 }
                 uploaded.buildUnit(builder);
@@ -21952,24 +22062,18 @@
         };
         EShapeRenderer.prototype.updateAtlas = function (shape, atlas, fontAtlases, defaultTexture, baseTexture) {
             // Texture
-            // Do not access the shape.image.src here.
+            // Do not access the shape.image.source here.
             // It slows down the rendering speed significantly.
-            var imageSrc = shape.imageSrc;
-            if (imageSrc != null) {
-                var textureItem = atlas.get(imageSrc);
+            var image = shape.image;
+            if (image != null) {
+                var textureItem = atlas.get(image.url);
                 if (textureItem != null) {
                     shape.texture = textureItem.texture;
                 }
                 else {
-                    var image = shape.image;
-                    if (image != null) {
-                        var newTextureItem = new DynamicAtlasItemImage(image, baseTexture);
-                        shape.texture = newTextureItem.texture;
-                        atlas.set(newTextureItem.id, newTextureItem);
-                    }
-                    else {
-                        shape.texture = defaultTexture;
-                    }
+                    var newTextureItem = new DynamicAtlasItemImage(image.url, image.width, image.height, image.source, baseTexture);
+                    shape.texture = newTextureItem.texture;
+                    atlas.set(newTextureItem.id, newTextureItem);
                 }
             }
             else {
@@ -22137,7 +22241,7 @@
             _this._pixelScale = 1;
             _this._pixelScaleId = -2; // Since this._shapeScaleId starts from -1.
             _this._shapeScale = 1;
-            _this._shapeScaleId = -1; // Since PIXI.Transform._worldID starts from zero.
+            _this._shapeScaleId = -1; // Since Transform._worldID starts from zero.
             _this._work = new pixi_js.Point();
             _this._buffers = [];
             return _this;
@@ -28854,345 +28958,6 @@
         return DDynamicTextGeometry;
     }(pixi_js.MeshGeometry));
 
-    /*
-     * Copyright (C) 2019 Toshiba Corporation
-     * SPDX-License-Identifier: Apache-2.0
-     */
-    var DDynamicTextStyle = /** @class */ (function () {
-        function DDynamicTextStyle(options, onChange) {
-            var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l;
-            this._id = 0;
-            this._idApproved = -1;
-            var defaultOptions = this.getDefaultOptions();
-            if (options) {
-                this._align = (_a = options.align) !== null && _a !== void 0 ? _a : defaultOptions.align;
-                this._fontFamily = (_b = options.fontFamily) !== null && _b !== void 0 ? _b : defaultOptions.fontFamily;
-                this._fontSize = (_c = options.fontSize) !== null && _c !== void 0 ? _c : defaultOptions.fontSize;
-                this._fontStyle = (_d = options.fontStyle) !== null && _d !== void 0 ? _d : defaultOptions.fontStyle;
-                this._fontVariant = (_e = options.fontVariant) !== null && _e !== void 0 ? _e : defaultOptions.fontVariant;
-                this._fontWeight = (_f = options.fontWeight) !== null && _f !== void 0 ? _f : defaultOptions.fontWeight;
-                this._fill = (_g = options.fill) !== null && _g !== void 0 ? _g : defaultOptions.fill;
-                this._clipping = (_h = options.clipping) !== null && _h !== void 0 ? _h : defaultOptions.clipping;
-                this._fitting = (_j = options.fitting) !== null && _j !== void 0 ? _j : defaultOptions.fitting;
-                this._wordWrap = toEnum((_k = options.wordWrap) !== null && _k !== void 0 ? _k : defaultOptions.wordWrap, DDynamicTextStyleWordWrap);
-                this._lineHeight = (_l = options.lineHeight) !== null && _l !== void 0 ? _l : defaultOptions.lineHeight;
-            }
-            else {
-                this._align = defaultOptions.align;
-                this._fontFamily = defaultOptions.fontFamily;
-                this._fontSize = defaultOptions.fontSize;
-                this._fontStyle = defaultOptions.fontStyle;
-                this._fontVariant = defaultOptions.fontVariant;
-                this._fontWeight = defaultOptions.fontWeight;
-                this._fill = defaultOptions.fill;
-                this._clipping = defaultOptions.clipping;
-                this._fitting = defaultOptions.fitting;
-                this._wordWrap = toEnum(defaultOptions.wordWrap, DDynamicTextStyleWordWrap);
-                this._lineHeight = defaultOptions.lineHeight;
-            }
-            this._fontSizeFitted = this._fontSize;
-            this._lineHeightFitted = this._lineHeight;
-            this._isFontFitted = false;
-            this._fontIdFontSize = this._fontSize;
-            this._fontIdId = -1;
-            this._fontId = "";
-            this._fontIdApproved = "";
-            this._fillApproved = 0x000000;
-            this._onChange = onChange;
-        }
-        DDynamicTextStyle.prototype.getDefaultOptions = function () {
-            var result = DDynamicTextStyle.DEFAULT_OPTIONS;
-            if (result == null) {
-                result = this.newDefaultOptions();
-                DDynamicTextStyle.DEFAULT_OPTIONS = result;
-            }
-            return result;
-        };
-        DDynamicTextStyle.prototype.newDefaultOptions = function () {
-            var theme = DThemes.getInstance().get("DBase");
-            return {
-                align: "left",
-                fontFamily: theme.getFontFamilly(),
-                fontSize: theme.getFontSize(),
-                fontStyle: "normal",
-                fontVariant: "normal",
-                fontWeight: "normal",
-                fill: theme.getColor(new DBaseStateSetImpl()),
-                clipping: true,
-                fitting: false,
-                wordWrap: DDynamicTextStyleWordWrap.NONE,
-                lineHeight: theme.getLineHeight()
-            };
-        };
-        Object.defineProperty(DDynamicTextStyle.prototype, "id", {
-            get: function () {
-                return this._id;
-            },
-            enumerable: false,
-            configurable: true
-        });
-        Object.defineProperty(DDynamicTextStyle.prototype, "idApproved", {
-            get: function () {
-                return this._idApproved;
-            },
-            enumerable: false,
-            configurable: true
-        });
-        Object.defineProperty(DDynamicTextStyle.prototype, "fontId", {
-            get: function () {
-                this.update();
-                return this._fontId;
-            },
-            enumerable: false,
-            configurable: true
-        });
-        Object.defineProperty(DDynamicTextStyle.prototype, "fontIdFontSize", {
-            get: function () {
-                this.update();
-                return this._fontSizeFitted;
-            },
-            enumerable: false,
-            configurable: true
-        });
-        Object.defineProperty(DDynamicTextStyle.prototype, "fontIdApproved", {
-            get: function () {
-                return this._fontIdApproved;
-            },
-            enumerable: false,
-            configurable: true
-        });
-        Object.defineProperty(DDynamicTextStyle.prototype, "fill", {
-            get: function () {
-                return this._fill;
-            },
-            set: function (fill) {
-                if (this._fill !== fill) {
-                    this._fill = fill;
-                    this.onChange();
-                }
-            },
-            enumerable: false,
-            configurable: true
-        });
-        DDynamicTextStyle.prototype.onChange = function () {
-            this._id += 1;
-            this._onChange();
-        };
-        Object.defineProperty(DDynamicTextStyle.prototype, "fillApproved", {
-            get: function () {
-                return this._fillApproved;
-            },
-            enumerable: false,
-            configurable: true
-        });
-        DDynamicTextStyle.prototype.approve = function () {
-            this.update();
-            this._idApproved = this._id;
-            this._fontIdApproved = this._fontId;
-            this._fillApproved = this._fill;
-        };
-        Object.defineProperty(DDynamicTextStyle.prototype, "fontFamily", {
-            get: function () {
-                return this._fontFamily;
-            },
-            set: function (fontFamily) {
-                if (this._fontFamily !== fontFamily) {
-                    this._fontFamily = fontFamily;
-                    this.onChange();
-                }
-            },
-            enumerable: false,
-            configurable: true
-        });
-        Object.defineProperty(DDynamicTextStyle.prototype, "fontSize", {
-            get: function () {
-                return this._fontSize;
-            },
-            set: function (fontSize) {
-                if (this._fontSize !== fontSize) {
-                    this._fontSize = fontSize;
-                    this._fontSizeFitted = fontSize;
-                    this._lineHeightFitted = this._lineHeight;
-                    this._isFontFitted = false;
-                    this.onChange();
-                }
-            },
-            enumerable: false,
-            configurable: true
-        });
-        Object.defineProperty(DDynamicTextStyle.prototype, "fontSizeFitted", {
-            get: function () {
-                return this._fontSizeFitted;
-            },
-            enumerable: false,
-            configurable: true
-        });
-        Object.defineProperty(DDynamicTextStyle.prototype, "isFontFitted", {
-            get: function () {
-                return this._isFontFitted;
-            },
-            enumerable: false,
-            configurable: true
-        });
-        Object.defineProperty(DDynamicTextStyle.prototype, "fontStyle", {
-            get: function () {
-                return this._fontStyle;
-            },
-            set: function (fontStyle) {
-                if (this._fontStyle !== fontStyle) {
-                    this._fontStyle = fontStyle;
-                    this.onChange();
-                }
-            },
-            enumerable: false,
-            configurable: true
-        });
-        Object.defineProperty(DDynamicTextStyle.prototype, "fontVariant", {
-            get: function () {
-                return this._fontVariant;
-            },
-            set: function (fontVariant) {
-                if (this._fontVariant !== fontVariant) {
-                    this._fontVariant = fontVariant;
-                    this.onChange();
-                }
-            },
-            enumerable: false,
-            configurable: true
-        });
-        Object.defineProperty(DDynamicTextStyle.prototype, "fontWeight", {
-            get: function () {
-                return this._fontWeight;
-            },
-            set: function (fontWeight) {
-                if (this._fontWeight !== fontWeight) {
-                    this._fontWeight = fontWeight;
-                    this.onChange();
-                }
-            },
-            enumerable: false,
-            configurable: true
-        });
-        DDynamicTextStyle.prototype.update = function () {
-            if (this._fontIdId !== this._id) {
-                this._fontIdId = this._id;
-                var fontIdFontSize = this._fitting ? this._fontSizeFitted : this._fontSize;
-                this._fontIdFontSize = fontIdFontSize;
-                this._fontId = this.toFontId(fontIdFontSize);
-            }
-        };
-        DDynamicTextStyle.prototype.toFontId = function (fontSize) {
-            return "".concat(this._fontStyle, " ").concat(this._fontVariant, " ").concat(this._fontWeight, " ").concat(fontSize, "px ").concat(this._fontFamily);
-        };
-        Object.defineProperty(DDynamicTextStyle.prototype, "clipping", {
-            get: function () {
-                return this._clipping;
-            },
-            set: function (clipping) {
-                if (this._clipping !== clipping) {
-                    this._clipping = clipping;
-                    this.onChange();
-                }
-            },
-            enumerable: false,
-            configurable: true
-        });
-        Object.defineProperty(DDynamicTextStyle.prototype, "fitting", {
-            get: function () {
-                return this._fitting;
-            },
-            set: function (fitting) {
-                if (this._fitting !== fitting) {
-                    this._fitting = fitting;
-                    this.onChange();
-                }
-            },
-            enumerable: false,
-            configurable: true
-        });
-        Object.defineProperty(DDynamicTextStyle.prototype, "wordWrap", {
-            get: function () {
-                return this._wordWrap;
-            },
-            set: function (wordWrap) {
-                if (this._wordWrap !== wordWrap) {
-                    this._wordWrap = wordWrap;
-                    this.onChange();
-                }
-            },
-            enumerable: false,
-            configurable: true
-        });
-        Object.defineProperty(DDynamicTextStyle.prototype, "lineHeight", {
-            get: function () {
-                return this._lineHeight;
-            },
-            set: function (lineHeight) {
-                if (this._lineHeight !== lineHeight) {
-                    this._lineHeight = lineHeight;
-                    this._fontSizeFitted = this._fontSize;
-                    this._lineHeightFitted = lineHeight;
-                    this._isFontFitted = false;
-                    this.onChange();
-                }
-            },
-            enumerable: false,
-            configurable: true
-        });
-        Object.defineProperty(DDynamicTextStyle.prototype, "lineHeightFitted", {
-            get: function () {
-                return this._lineHeightFitted;
-            },
-            set: function (lineHeightFitted) {
-                if (this._lineHeightFitted !== lineHeightFitted) {
-                    this._lineHeightFitted = lineHeightFitted;
-                    this.onChange();
-                }
-            },
-            enumerable: false,
-            configurable: true
-        });
-        DDynamicTextStyle.prototype.fit = function (fontSize, lineHeight) {
-            var isChanged = false;
-            if (fontSize < this._fontSizeFitted) {
-                this._fontSizeFitted = fontSize;
-                isChanged = true;
-            }
-            if (this._lineHeightFitted !== lineHeight) {
-                this._lineHeightFitted = lineHeight;
-                isChanged = true;
-            }
-            if (this._isFontFitted !== true) {
-                this._isFontFitted = true;
-                isChanged = true;
-            }
-            if (isChanged) {
-                this.onChange();
-            }
-            return isChanged;
-        };
-        DDynamicTextStyle.prototype.unfit = function () {
-            var isChanged = false;
-            if (this._isFontFitted !== false) {
-                this._isFontFitted = false;
-                isChanged = true;
-            }
-            if (this._fontSizeFitted !== this._fontSize) {
-                this._fontSizeFitted = this._fontSize;
-                isChanged = true;
-            }
-            if (this._lineHeightFitted !== this._lineHeight) {
-                this._lineHeightFitted = this._lineHeight;
-                isChanged = true;
-            }
-            if (isChanged) {
-                this.onChange();
-            }
-            return isChanged;
-        };
-        return DDynamicTextStyle;
-    }());
-
     /*
      * Copyright (C) 2019 Toshiba Corporation
      * SPDX-License-Identifier: Apache-2.0
@@ -29270,13 +29035,11 @@
      */
     var DDynamicText = /** @class */ (function (_super) {
         __extends(DDynamicText, _super);
-        function DDynamicText(options) {
+        function DDynamicText(style) {
             var _this = _super.call(this, new DDynamicTextGeometry(), new pixi_js.MeshMaterial(pixi_js.Texture.EMPTY)) || this;
-            _this._style = new DDynamicTextStyle(options, function () {
-                _this._isDirty = true;
-                _this._isGeometryDirty = true;
-                _this._atlas = null;
-                _this.update_();
+            _this._style = style;
+            style.on("change", function () {
+                _this.onStyleChange();
             });
             _this._text = "";
             _this._textApproved = "";
@@ -29300,15 +29063,21 @@
             };
             return _this;
         }
+        DDynamicText.prototype.onStyleChange = function () {
+            this._isDirty = true;
+            this._isGeometryDirty = true;
+            this._atlas = null;
+            this.update_();
+        };
         DDynamicText.prototype.update_ = function () {
             var layer = DApplications.getLayer(this);
             if (layer) {
-                var style = this._style;
                 if (this._isDirty) {
                     this._isDirty = false;
                     var text = this._text;
                     var textApproved = this._textApproved;
                     this._textApproved = text;
+                    var style = this._style;
                     var fontId = style.fontId;
                     var fontIdApproved = style.fontIdApproved;
                     var fontIdFontSize = style.fontIdFontSize;
@@ -29501,203 +29270,737 @@
      * Copyright (C) 2019 Toshiba Corporation
      * SPDX-License-Identifier: Apache-2.0
      */
-    var toTextStyle = function (theme, options, state) {
-        var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l;
-        var style = (_a = options === null || options === void 0 ? void 0 : options.text) === null || _a === void 0 ? void 0 : _a.style;
-        if (style != null) {
-            var fill = (_b = style.fill) !== null && _b !== void 0 ? _b : theme.getColor(state);
-            var fontSize = (_c = style.fontSize) !== null && _c !== void 0 ? _c : theme.getFontSize();
-            var fontFamily = (_d = style.fontFamily) !== null && _d !== void 0 ? _d : theme.getFontFamilly();
-            var fontWeight = (_e = style.fontWeight) !== null && _e !== void 0 ? _e : theme.getFontWeight();
-            var fontStyle = (_f = style.fontStyle) !== null && _f !== void 0 ? _f : theme.getFontStyle();
-            var fontVariant = (_g = style.fontVariant) !== null && _g !== void 0 ? _g : theme.getFontVariant();
-            var clipping = (_h = style.clipping) !== null && _h !== void 0 ? _h : theme.getTextStyleClipping();
-            var fitting = (_j = style.fitting) !== null && _j !== void 0 ? _j : theme.getTextStyleFitting();
-            var wordWrap = (_k = style.wordWrap) !== null && _k !== void 0 ? _k : theme.getTextStyleWordWrap();
-            var lineHeight = (_l = style.lineHeight) !== null && _l !== void 0 ? _l : theme.getLineHeight();
-            return {
-                fill: fill,
-                fontSize: fontSize,
-                fontFamily: fontFamily,
-                fontWeight: fontWeight,
-                fontStyle: fontStyle,
-                fontVariant: fontVariant,
-                clipping: clipping,
-                fitting: fitting,
-                wordWrap: wordWrap,
-                lineHeight: lineHeight
-            };
+    var DDynamicTextStyle = /** @class */ (function (_super) {
+        __extends(DDynamicTextStyle, _super);
+        function DDynamicTextStyle(parent, theme, options) {
+            var _a, _b, _c, _d, _e, _f, _g, _h, _j;
+            var _this = _super.call(this) || this;
+            _this._id = 0;
+            _this._idApproved = -1;
+            if (options) {
+                _this._fontFamily = (_a = options.fontFamily) !== null && _a !== void 0 ? _a : theme.getFontFamilly();
+                _this._fontSize = (_b = options.fontSize) !== null && _b !== void 0 ? _b : theme.getFontSize();
+                _this._fontStyle = (_c = options.fontStyle) !== null && _c !== void 0 ? _c : theme.getFontStyle();
+                _this._fontVariant = (_d = options.fontVariant) !== null && _d !== void 0 ? _d : theme.getFontVariant();
+                _this._fontWeight = (_e = options.fontWeight) !== null && _e !== void 0 ? _e : theme.getFontWeight();
+                _this._clipping = (_f = options.clipping) !== null && _f !== void 0 ? _f : theme.getTextStyleClipping();
+                _this._fitting = (_g = options.fitting) !== null && _g !== void 0 ? _g : theme.getTextStyleFitting();
+                _this._wordWrap = toEnum((_h = options.wordWrap) !== null && _h !== void 0 ? _h : theme.getTextStyleWordWrap(), DDynamicTextStyleWordWrap);
+                _this._lineHeight = (_j = options.lineHeight) !== null && _j !== void 0 ? _j : theme.getLineHeight();
+            }
+            else {
+                _this._fontFamily = theme.getFontFamilly();
+                _this._fontSize = theme.getFontSize();
+                _this._fontStyle = theme.getFontStyle();
+                _this._fontVariant = theme.getFontVariant();
+                _this._fontWeight = theme.getFontWeight();
+                _this._clipping = theme.getTextStyleClipping();
+                _this._fitting = theme.getTextStyleFitting();
+                _this._wordWrap = theme.getTextStyleWordWrap();
+                _this._lineHeight = theme.getLineHeight();
+            }
+            _this._fill = theme.getColor(parent.state);
+            _this._fontSizeFitted = _this._fontSize;
+            _this._lineHeightFitted = _this._lineHeight;
+            _this._isFontFitted = false;
+            _this._fontIdFontSize = _this._fontSize;
+            _this._fontIdId = -1;
+            _this._fontId = "";
+            _this._fontIdApproved = "";
+            _this._fillApproved = 0x000000;
+            return _this;
         }
-        return {
-            fill: theme.getColor(state),
-            fontSize: theme.getFontSize(),
-            fontFamily: theme.getFontFamilly(),
-            fontWeight: theme.getFontWeight(),
-            fontStyle: theme.getFontStyle(),
-            fontVariant: theme.getFontVariant(),
-            clipping: theme.getTextStyleClipping(),
-            fitting: theme.getTextStyleFitting(),
-            wordWrap: theme.getTextStyleWordWrap(),
-            lineHeight: theme.getLineHeight()
+        Object.defineProperty(DDynamicTextStyle.prototype, "id", {
+            get: function () {
+                return this._id;
+            },
+            enumerable: false,
+            configurable: true
+        });
+        Object.defineProperty(DDynamicTextStyle.prototype, "idApproved", {
+            get: function () {
+                return this._idApproved;
+            },
+            enumerable: false,
+            configurable: true
+        });
+        Object.defineProperty(DDynamicTextStyle.prototype, "fontId", {
+            get: function () {
+                this.update();
+                return this._fontId;
+            },
+            enumerable: false,
+            configurable: true
+        });
+        Object.defineProperty(DDynamicTextStyle.prototype, "fontIdFontSize", {
+            get: function () {
+                this.update();
+                return this._fontSizeFitted;
+            },
+            enumerable: false,
+            configurable: true
+        });
+        Object.defineProperty(DDynamicTextStyle.prototype, "fontIdApproved", {
+            get: function () {
+                return this._fontIdApproved;
+            },
+            enumerable: false,
+            configurable: true
+        });
+        Object.defineProperty(DDynamicTextStyle.prototype, "fill", {
+            get: function () {
+                return this._fill;
+            },
+            set: function (fill) {
+                if (this._fill !== fill) {
+                    this._fill = fill;
+                    this.onChange();
+                }
+            },
+            enumerable: false,
+            configurable: true
+        });
+        DDynamicTextStyle.prototype.onChange = function () {
+            this._id += 1;
+            this.emit("change", this);
         };
-    };
-    var toTextAlign = function (theme, options) {
-        var _a, _b, _c;
-        var align = (_a = options === null || options === void 0 ? void 0 : options.text) === null || _a === void 0 ? void 0 : _a.align;
-        return {
-            vertical: toEnum((_b = align === null || align === void 0 ? void 0 : align.vertical) !== null && _b !== void 0 ? _b : theme.getTextAlignVertical(), DAlignVertical),
-            horizontal: toEnum((_c = align === null || align === void 0 ? void 0 : align.horizontal) !== null && _c !== void 0 ? _c : theme.getTextAlignHorizontal(), DAlignHorizontal)
+        Object.defineProperty(DDynamicTextStyle.prototype, "fillApproved", {
+            get: function () {
+                return this._fillApproved;
+            },
+            enumerable: false,
+            configurable: true
+        });
+        DDynamicTextStyle.prototype.approve = function () {
+            this.update();
+            this._idApproved = this._id;
+            this._fontIdApproved = this._fontId;
+            this._fillApproved = this._fill;
         };
-    };
-    /**
-     * A base class for UI classes with a text support.
-     * See {@link DTextBaseEvents} for event defaults.
-     */
-    var DTextBase = /** @class */ (function (_super) {
-        __extends(DTextBase, _super);
-        function DTextBase() {
-            return _super !== null && _super.apply(this, arguments) || this;
-        }
-        DTextBase.prototype.init = function (options) {
-            var _a, _b, _c, _d;
-            _super.prototype.init.call(this, options);
-            var theme = this.theme;
-            this._textValue = (_b = (_a = options === null || options === void 0 ? void 0 : options.text) === null || _a === void 0 ? void 0 : _a.value) !== null && _b !== void 0 ? _b : theme.newTextValue();
-            this._textValueComputed = this.computeTextValue();
-            var text = options === null || options === void 0 ? void 0 : options.text;
-            this._textColor = text === null || text === void 0 ? void 0 : text.color;
-            this._textAlpha = text === null || text === void 0 ? void 0 : text.alpha;
-            this._textStyle = toTextStyle(theme, options, this.state);
-            this._textAlign = toTextAlign(theme, options);
-            this._textFormatter = (_c = text === null || text === void 0 ? void 0 : text.formatter) !== null && _c !== void 0 ? _c : theme.getTextFormatter();
-            this._isTextVisible = true;
-            this._isOverflowMaskEnabled = (_d = options === null || options === void 0 ? void 0 : options.mask) !== null && _d !== void 0 ? _d : theme.isOverflowMaskEnabled();
-            this.onTextChange();
-            this.createOrUpdateText();
+        Object.defineProperty(DDynamicTextStyle.prototype, "fontFamily", {
+            get: function () {
+                return this._fontFamily;
+            },
+            set: function (fontFamily) {
+                if (this._fontFamily !== fontFamily) {
+                    this._fontFamily = fontFamily;
+                    this.onChange();
+                }
+            },
+            enumerable: false,
+            configurable: true
+        });
+        Object.defineProperty(DDynamicTextStyle.prototype, "fontSize", {
+            get: function () {
+                return this._fontSize;
+            },
+            set: function (fontSize) {
+                if (this._fontSize !== fontSize) {
+                    this._fontSize = fontSize;
+                    this._fontSizeFitted = fontSize;
+                    this._lineHeightFitted = this._lineHeight;
+                    this._isFontFitted = false;
+                    this.onChange();
+                }
+            },
+            enumerable: false,
+            configurable: true
+        });
+        Object.defineProperty(DDynamicTextStyle.prototype, "fontSizeFitted", {
+            get: function () {
+                return this._fontSizeFitted;
+            },
+            enumerable: false,
+            configurable: true
+        });
+        Object.defineProperty(DDynamicTextStyle.prototype, "isFontFitted", {
+            get: function () {
+                return this._isFontFitted;
+            },
+            enumerable: false,
+            configurable: true
+        });
+        Object.defineProperty(DDynamicTextStyle.prototype, "fontStyle", {
+            get: function () {
+                return this._fontStyle;
+            },
+            set: function (fontStyle) {
+                if (this._fontStyle !== fontStyle) {
+                    this._fontStyle = fontStyle;
+                    this.onChange();
+                }
+            },
+            enumerable: false,
+            configurable: true
+        });
+        Object.defineProperty(DDynamicTextStyle.prototype, "fontVariant", {
+            get: function () {
+                return this._fontVariant;
+            },
+            set: function (fontVariant) {
+                if (this._fontVariant !== fontVariant) {
+                    this._fontVariant = fontVariant;
+                    this.onChange();
+                }
+            },
+            enumerable: false,
+            configurable: true
+        });
+        Object.defineProperty(DDynamicTextStyle.prototype, "fontWeight", {
+            get: function () {
+                return this._fontWeight;
+            },
+            set: function (fontWeight) {
+                if (this._fontWeight !== fontWeight) {
+                    this._fontWeight = fontWeight;
+                    this.onChange();
+                }
+            },
+            enumerable: false,
+            configurable: true
+        });
+        DDynamicTextStyle.prototype.update = function () {
+            if (this._fontIdId !== this._id) {
+                this._fontIdId = this._id;
+                var fontIdFontSize = this._fitting ? this._fontSizeFitted : this._fontSize;
+                this._fontIdFontSize = fontIdFontSize;
+                this._fontId = this.toFontId(fontIdFontSize);
+            }
         };
-        Object.defineProperty(DTextBase.prototype, "text", {
+        DDynamicTextStyle.prototype.toFontId = function (fontSize) {
+            return "".concat(this._fontStyle, " ").concat(this._fontVariant, " ").concat(this._fontWeight, " ").concat(fontSize, "px ").concat(this._fontFamily);
+        };
+        Object.defineProperty(DDynamicTextStyle.prototype, "clipping", {
             get: function () {
-                return this._textValue;
+                return this._clipping;
             },
-            set: function (text) {
-                if (this._textValue !== text) {
-                    this._textValue = text;
-                    this.updateTextValue();
+            set: function (clipping) {
+                if (this._clipping !== clipping) {
+                    this._clipping = clipping;
+                    this.onChange();
                 }
             },
             enumerable: false,
             configurable: true
         });
-        DTextBase.prototype.onTextChange = function () {
-            // DO NOTHING
+        Object.defineProperty(DDynamicTextStyle.prototype, "fitting", {
+            get: function () {
+                return this._fitting;
+            },
+            set: function (fitting) {
+                if (this._fitting !== fitting) {
+                    this._fitting = fitting;
+                    this.onChange();
+                }
+            },
+            enumerable: false,
+            configurable: true
+        });
+        Object.defineProperty(DDynamicTextStyle.prototype, "wordWrap", {
+            get: function () {
+                return this._wordWrap;
+            },
+            set: function (wordWrap) {
+                if (this._wordWrap !== wordWrap) {
+                    this._wordWrap = wordWrap;
+                    this.onChange();
+                }
+            },
+            enumerable: false,
+            configurable: true
+        });
+        Object.defineProperty(DDynamicTextStyle.prototype, "lineHeight", {
+            get: function () {
+                return this._lineHeight;
+            },
+            set: function (lineHeight) {
+                if (this._lineHeight !== lineHeight) {
+                    this._lineHeight = lineHeight;
+                    this._fontSizeFitted = this._fontSize;
+                    this._lineHeightFitted = lineHeight;
+                    this._isFontFitted = false;
+                    this.onChange();
+                }
+            },
+            enumerable: false,
+            configurable: true
+        });
+        Object.defineProperty(DDynamicTextStyle.prototype, "lineHeightFitted", {
+            get: function () {
+                return this._lineHeightFitted;
+            },
+            set: function (lineHeightFitted) {
+                if (this._lineHeightFitted !== lineHeightFitted) {
+                    this._lineHeightFitted = lineHeightFitted;
+                    this.onChange();
+                }
+            },
+            enumerable: false,
+            configurable: true
+        });
+        DDynamicTextStyle.prototype.fit = function (fontSize, lineHeight) {
+            var isChanged = false;
+            if (fontSize < this._fontSizeFitted) {
+                this._fontSizeFitted = fontSize;
+                isChanged = true;
+            }
+            if (this._lineHeightFitted !== lineHeight) {
+                this._lineHeightFitted = lineHeight;
+                isChanged = true;
+            }
+            if (this._isFontFitted !== true) {
+                this._isFontFitted = true;
+                isChanged = true;
+            }
+            if (isChanged) {
+                this.onChange();
+            }
+            return isChanged;
         };
-        DTextBase.prototype.computeTextValue = function () {
-            var textValue = this._textValue;
-            if (textValue !== undefined) {
-                if (isFunction(textValue)) {
-                    var result = textValue(this.state);
-                    if (result !== undefined) {
-                        return result;
-                    }
+        DDynamicTextStyle.prototype.unfit = function () {
+            var isChanged = false;
+            if (this._isFontFitted !== false) {
+                this._isFontFitted = false;
+                isChanged = true;
+            }
+            if (this._fontSizeFitted !== this._fontSize) {
+                this._fontSizeFitted = this._fontSize;
+                isChanged = true;
+            }
+            if (this._lineHeightFitted !== this._lineHeight) {
+                this._lineHeightFitted = this._lineHeight;
+                isChanged = true;
+            }
+            if (isChanged) {
+                this.onChange();
+            }
+            return isChanged;
+        };
+        return DDynamicTextStyle;
+    }(pixi_js.utils.EventEmitter));
+
+    var DTextPieceAlignImpl = /** @class */ (function () {
+        function DTextPieceAlignImpl(parent, theme, options) {
+            var _a, _b;
+            this._parent = parent;
+            this._vertical = toEnum((_a = options === null || options === void 0 ? void 0 : options.vertical) !== null && _a !== void 0 ? _a : theme.getTextAlignVertical(), DAlignVertical);
+            this._horizontal = toEnum((_b = options === null || options === void 0 ? void 0 : options.horizontal) !== null && _b !== void 0 ? _b : theme.getTextAlignHorizontal(), DAlignHorizontal);
+        }
+        Object.defineProperty(DTextPieceAlignImpl.prototype, "vertical", {
+            get: function () {
+                return this._vertical;
+            },
+            set: function (vertical) {
+                vertical = toEnum(vertical, DAlignVertical);
+                if (this._vertical !== vertical) {
+                    this._vertical = vertical;
+                    this.onChange();
                 }
-                else {
-                    return textValue;
+            },
+            enumerable: false,
+            configurable: true
+        });
+        Object.defineProperty(DTextPieceAlignImpl.prototype, "horizontal", {
+            get: function () {
+                return this._horizontal;
+            },
+            set: function (horizontal) {
+                horizontal = toEnum(horizontal, DAlignHorizontal);
+                if (this._horizontal !== horizontal) {
+                    this._horizontal = horizontal;
+                    this.onChange();
+                }
+            },
+            enumerable: false,
+            configurable: true
+        });
+        DTextPieceAlignImpl.prototype.set = function (vertical, horizontal) {
+            var isChanged = false;
+            if (vertical != null) {
+                vertical = toEnum(vertical, DAlignVertical);
+                if (this._vertical !== vertical) {
+                    this._vertical = vertical;
+                    isChanged = true;
+                }
+            }
+            if (horizontal != null) {
+                horizontal = toEnum(horizontal, DAlignHorizontal);
+                if (this._horizontal !== horizontal) {
+                    this._horizontal = horizontal;
+                    isChanged = true;
                 }
             }
-            return this.theme.getTextValue(this.state);
+            if (isChanged) {
+                this.onChange();
+            }
+            return this;
         };
-        DTextBase.prototype.createOrUpdateText = function () {
-            var textValueComputed = this._textValueComputed;
-            if (textValueComputed !== undefined) {
-                var formatted = this._textFormatter(textValueComputed, this);
-                var text = this._text;
-                if (text == null) {
-                    if (0 < formatted.length) {
-                        var newText = this.newText();
-                        newText.visible = this._isTextVisible;
-                        this._text = newText;
-                        this.addChild(newText);
-                        this.updateTextPosition(newText);
-                        var overflowMask = this.getOverflowMask();
-                        if (overflowMask) {
-                            newText.mask = overflowMask;
-                        }
-                        newText.text = formatted;
-                        this.toDirty();
-                        DApplications.update(this);
-                    }
+        DTextPieceAlignImpl.prototype.onChange = function () {
+            var parent = this._parent;
+            parent.toDirty();
+            DApplications.update(parent);
+        };
+        return DTextPieceAlignImpl;
+    }());
+
+    /*
+     * Copyright (C) 2019 Toshiba Corporation
+     * SPDX-License-Identifier: Apache-2.0
+     */
+    var DTextPieceStyleImpl = /** @class */ (function () {
+        function DTextPieceStyleImpl(parent, style) {
+            this._parent = parent;
+            this._style = style;
+        }
+        Object.defineProperty(DTextPieceStyleImpl.prototype, "fontFamily", {
+            get: function () {
+                return this._style.fontFamily;
+            },
+            set: function (fontFamily) {
+                var style = this._style;
+                if (style.fontFamily !== fontFamily) {
+                    style.fontFamily = fontFamily;
+                    this.onChange();
                 }
-                else if (text.text !== formatted) {
-                    text.text = formatted;
-                    this.toDirty();
-                    DApplications.update(this);
+            },
+            enumerable: false,
+            configurable: true
+        });
+        Object.defineProperty(DTextPieceStyleImpl.prototype, "fontSize", {
+            get: function () {
+                return this._style.fontSize;
+            },
+            set: function (fontSize) {
+                var style = this._style;
+                if (style.fontSize !== fontSize) {
+                    style.fontSize = fontSize;
+                    this.onChange();
+                }
+            },
+            enumerable: false,
+            configurable: true
+        });
+        Object.defineProperty(DTextPieceStyleImpl.prototype, "fontStyle", {
+            get: function () {
+                return this._style.fontStyle;
+            },
+            set: function (fontStyle) {
+                var style = this._style;
+                if (style.fontStyle !== fontStyle) {
+                    style.fontStyle = fontStyle;
+                    this.onChange();
+                }
+            },
+            enumerable: false,
+            configurable: true
+        });
+        Object.defineProperty(DTextPieceStyleImpl.prototype, "fontVariant", {
+            get: function () {
+                return this._style.fontVariant;
+            },
+            set: function (fontVariant) {
+                var style = this._style;
+                if (style.fontVariant !== fontVariant) {
+                    style.fontVariant = fontVariant;
+                    this.onChange();
+                }
+            },
+            enumerable: false,
+            configurable: true
+        });
+        Object.defineProperty(DTextPieceStyleImpl.prototype, "fontWeight", {
+            get: function () {
+                return this._style.fontWeight;
+            },
+            set: function (fontWeight) {
+                var style = this._style;
+                if (style.fontWeight !== fontWeight) {
+                    style.fontWeight = fontWeight;
+                    this.onChange();
+                }
+            },
+            enumerable: false,
+            configurable: true
+        });
+        Object.defineProperty(DTextPieceStyleImpl.prototype, "clipping", {
+            get: function () {
+                return this._style.clipping;
+            },
+            set: function (clipping) {
+                var style = this._style;
+                if (style.clipping !== clipping) {
+                    style.clipping = clipping;
+                    this.onChange();
+                }
+            },
+            enumerable: false,
+            configurable: true
+        });
+        Object.defineProperty(DTextPieceStyleImpl.prototype, "fitting", {
+            get: function () {
+                return this._style.fitting;
+            },
+            set: function (fitting) {
+                var style = this._style;
+                if (style.fitting !== fitting) {
+                    style.fitting = fitting;
+                    this.onChange();
                 }
+            },
+            enumerable: false,
+            configurable: true
+        });
+        Object.defineProperty(DTextPieceStyleImpl.prototype, "wordWrap", {
+            get: function () {
+                return this._style.wordWrap;
+            },
+            set: function (wordWrap) {
+                wordWrap = toEnum(wordWrap, DDynamicTextStyleWordWrap);
+                var style = this._style;
+                if (style.wordWrap !== wordWrap) {
+                    style.wordWrap = wordWrap;
+                    this.onChange();
+                }
+            },
+            enumerable: false,
+            configurable: true
+        });
+        Object.defineProperty(DTextPieceStyleImpl.prototype, "lineHeight", {
+            get: function () {
+                return this._style.lineHeight;
+            },
+            set: function (lineHeight) {
+                var style = this._style;
+                if (style.lineHeight !== lineHeight) {
+                    style.lineHeight = lineHeight;
+                    this.onChange();
+                }
+            },
+            enumerable: false,
+            configurable: true
+        });
+        DTextPieceStyleImpl.prototype.onChange = function () {
+            DApplications.update(this._parent);
+        };
+        return DTextPieceStyleImpl;
+    }());
+
+    var DTextPieceImpl = /** @class */ (function (_super) {
+        __extends(DTextPieceImpl, _super);
+        function DTextPieceImpl(parent, theme, options) {
+            var _a, _b;
+            var _this = _super.call(this) || this;
+            _this._parent = parent;
+            _this._theme = theme;
+            _this._value = (_a = options === null || options === void 0 ? void 0 : options.value) !== null && _a !== void 0 ? _a : theme.newTextValue();
+            _this._computed = _this.newComputed();
+            _this._color = options === null || options === void 0 ? void 0 : options.color;
+            _this._alpha = options === null || options === void 0 ? void 0 : options.alpha;
+            var dstyle = new DDynamicTextStyle(parent, theme, options === null || options === void 0 ? void 0 : options.style);
+            _this._dstyle = dstyle;
+            _this._style = new DTextPieceStyleImpl(parent, dstyle);
+            _this._align = new DTextPieceAlignImpl(parent, theme, options === null || options === void 0 ? void 0 : options.align);
+            _this._formatter = (_b = options === null || options === void 0 ? void 0 : options.formatter) !== null && _b !== void 0 ? _b : theme.getTextFormatter();
+            _this._isVisible = true;
+            _this.onComputedChange();
+            if (_this.updateObject()) {
+                parent.toDirty();
+                DApplications.update(parent);
             }
-            else {
-                var text = this._text;
-                if (text != null && text.text !== "") {
-                    text.text = "";
-                    this.toDirty();
-                    DApplications.update(this);
+            return _this;
+        }
+        Object.defineProperty(DTextPieceImpl.prototype, "value", {
+            get: function () {
+                return this._value;
+            },
+            set: function (value) {
+                if (this._value !== value) {
+                    this._value = value;
+                    this.onValueChange();
                 }
+            },
+            enumerable: false,
+            configurable: true
+        });
+        DTextPieceImpl.prototype.getValue = function () {
+            return this._value;
+        };
+        DTextPieceImpl.prototype.setValue = function (value, forcibly) {
+            if (forcibly || this._value !== value) {
+                this._value = value;
+                this.onValueChange(forcibly);
             }
         };
-        DTextBase.prototype.newText = function () {
-            return new DDynamicText(this._textStyle);
+        DTextPieceImpl.prototype.onValueChange = function (forcibly) {
+            var newComputed = this.newComputed();
+            if (forcibly || this._computed !== newComputed) {
+                this._computed = newComputed;
+                this.onComputedChange();
+                if (this.updateObject()) {
+                    var parent_1 = this._parent;
+                    parent_1.toDirty();
+                    DApplications.update(parent_1);
+                }
+            }
         };
-        DTextBase.prototype.getOverflowMask = function () {
-            if (this._isOverflowMaskEnabled) {
-                if (this._overflowMask == null) {
-                    this._overflowMask = new DBaseOverflowMaskSimple(this);
-                    this._reflowable.add(this._overflowMask);
-                    this.toDirty();
+        DTextPieceImpl.prototype.compute = function (forcibly) {
+            this.onValueChange(forcibly);
+        };
+        Object.defineProperty(DTextPieceImpl.prototype, "computed", {
+            get: function () {
+                return this._computed;
+            },
+            enumerable: false,
+            configurable: true
+        });
+        Object.defineProperty(DTextPieceImpl.prototype, "formatter", {
+            get: function () {
+                return this._formatter;
+            },
+            set: function (formatter) {
+                if (this._formatter !== formatter) {
+                    this._formatter = formatter;
+                    this.onValueChange(true);
+                }
+            },
+            enumerable: false,
+            configurable: true
+        });
+        Object.defineProperty(DTextPieceImpl.prototype, "color", {
+            get: function () {
+                return this._color;
+            },
+            set: function (color) {
+                if (this._color !== color) {
+                    this._color = color;
+                    this.onColorChange();
+                }
+            },
+            enumerable: false,
+            configurable: true
+        });
+        Object.defineProperty(DTextPieceImpl.prototype, "alpha", {
+            get: function () {
+                return this._alpha;
+            },
+            set: function (alpha) {
+                if (this._alpha !== alpha) {
+                    this._alpha = alpha;
+                    this.onColorChange();
+                }
+            },
+            enumerable: false,
+            configurable: true
+        });
+        DTextPieceImpl.prototype.onColorChange = function () {
+            var object = this._object;
+            if (object != null) {
+                var parent_2 = this._parent;
+                var state = parent_2.state;
+                var color = this.newColor(state);
+                var alpha = this.newAlpha(state);
+                var style = object.style;
+                if (style.fill !== color || object.alpha !== alpha) {
+                    style.fill = color;
+                    object.alpha = alpha;
+                    DApplications.update(parent_2);
                 }
-                return this._overflowMask;
             }
-            return null;
         };
-        DTextBase.prototype.updateTextPosition = function (text) {
-            var align = this._textAlign;
-            var padding = this._padding;
-            var auto = this._auto;
-            var textX = 0;
-            var pleft = padding.getLeft();
-            var alignHorizontal = align.horizontal;
-            if (auto.width.isOn || alignHorizontal === DAlignHorizontal.LEFT) {
-                textX = pleft;
+        Object.defineProperty(DTextPieceImpl.prototype, "align", {
+            get: function () {
+                return this._align;
+            },
+            enumerable: false,
+            configurable: true
+        });
+        Object.defineProperty(DTextPieceImpl.prototype, "style", {
+            get: function () {
+                return this._style;
+            },
+            enumerable: false,
+            configurable: true
+        });
+        Object.defineProperty(DTextPieceImpl.prototype, "object", {
+            get: function () {
+                return this._object;
+            },
+            enumerable: false,
+            configurable: true
+        });
+        DTextPieceImpl.prototype.update = function (layouter) {
+            // Compute a value
+            var newComputed = this.newComputed();
+            if (this._computed !== newComputed) {
+                this._computed = newComputed;
+                this.onComputedChange();
+                this.updateObject();
+            }
+            var object = this._object;
+            if (object != null) {
+                // Update the color
+                var state = this._parent.state;
+                object.style.fill = this.newColor(state);
+                object.alpha = this.newAlpha(state);
+                // Layout
+                layouter.set(object);
             }
             else {
-                var width = this.width;
-                var textWidth = text.width;
-                var pright = padding.getRight();
-                if (alignHorizontal === DAlignHorizontal.CENTER) {
-                    textX = pleft + (width - pleft - pright - textWidth) * 0.5;
+                // Layout
+                layouter.set(null);
+            }
+        };
+        DTextPieceImpl.prototype.updateObject = function () {
+            var computed = this._computed;
+            if (computed !== undefined) {
+                var formatted = this._formatter(computed, this);
+                var object = this._object;
+                if (object == null) {
+                    if (0 < formatted.length) {
+                        var newObject = this.newObject();
+                        newObject.visible = this._isVisible;
+                        this._object = newObject;
+                        var parent_3 = this._parent;
+                        parent_3.addChild(newObject);
+                        var overflowMask = parent_3.getOverflowMask();
+                        if (overflowMask) {
+                            newObject.mask = overflowMask;
+                        }
+                        newObject.text = formatted;
+                        return true;
+                    }
                 }
-                else {
-                    textX = width - textWidth - pright;
+                else if (object.text !== formatted) {
+                    object.text = formatted;
+                    return true;
                 }
             }
-            var textY = 0;
-            var ptop = padding.getTop();
-            var alignVertical = align.vertical;
-            if (auto.height.isOn || alignVertical === DAlignVertical.TOP) {
-                textY = ptop;
-            }
             else {
-                var height = this.height;
-                var textHeight = text.height;
-                var pbottom = padding.getBottom();
-                if (alignVertical === DAlignVertical.MIDDLE) {
-                    textY = ptop + (height - ptop - pbottom - textHeight) * 0.5;
+                var object = this._object;
+                if (object != null && object.text !== "") {
+                    object.text = "";
+                    return true;
+                }
+            }
+            return false;
+        };
+        DTextPieceImpl.prototype.newComputed = function () {
+            var value = this._value;
+            if (value !== undefined) {
+                if (isFunction(value)) {
+                    var result = value(this._parent.state);
+                    if (result !== undefined) {
+                        return result;
+                    }
                 }
                 else {
-                    textY = height - textHeight - pbottom;
+                    return value;
                 }
             }
-            text.position.set(textX, textY);
+            return this._theme.getTextValue(this._parent.state);
         };
-        DTextBase.prototype.getTextColor = function (theme, state) {
-            var color = this._textColor;
+        DTextPieceImpl.prototype.newColor = function (state) {
+            var color = this._color;
             if (color !== undefined) {
                 if (isFunction(color)) {
                     var result = color(state);
@@ -29709,10 +30012,10 @@
                     return color;
                 }
             }
-            return theme.getColor(state);
+            return this._theme.getColor(state);
         };
-        DTextBase.prototype.getTextAlpha = function (theme, state) {
-            var alpha = this._textAlpha;
+        DTextPieceImpl.prototype.newAlpha = function (state) {
+            var alpha = this._alpha;
             if (alpha !== undefined) {
                 if (isFunction(alpha)) {
                     var result = alpha(state);
@@ -29724,57 +30027,144 @@
                     return alpha;
                 }
             }
-            return theme.getAlpha(state);
+            return this._theme.getAlpha(state);
         };
-        DTextBase.prototype.updateTextColor = function (text) {
-            var theme = this.theme;
-            var state = this.state;
-            text.style.fill = this.getTextColor(theme, state);
-            text.alpha = this.getTextAlpha(theme, state);
+        DTextPieceImpl.prototype.newObject = function () {
+            return new DDynamicText(this._dstyle);
         };
-        DTextBase.prototype.updateTextValue = function () {
-            var newTextValueComputed = this.computeTextValue();
-            if (this._textValueComputed !== newTextValueComputed) {
-                this._textValueComputed = newTextValueComputed;
-                this.onTextChange();
-                this.createOrUpdateText();
-            }
+        Object.defineProperty(DTextPieceImpl.prototype, "visible", {
+            get: function () {
+                var object = this._object;
+                if (object != null) {
+                    return object.visible;
+                }
+                return this._isVisible;
+            },
+            set: function (visible) {
+                var object = this._object;
+                if (object != null) {
+                    object.visible = visible;
+                }
+                this._isVisible = visible;
+            },
+            enumerable: false,
+            configurable: true
+        });
+        DTextPieceImpl.prototype.show = function () {
+            this.visible = true;
+            return this;
         };
-        DTextBase.prototype.updateText = function () {
-            var text = this._text;
-            if (text) {
-                this.updateTextValue();
-                this.updateTextPosition(text);
-                this.updateTextColor(text);
+        DTextPieceImpl.prototype.hide = function () {
+            this.visible = false;
+            return this;
+        };
+        DTextPieceImpl.prototype.isShown = function () {
+            return this.visible;
+        };
+        DTextPieceImpl.prototype.onComputedChange = function () {
+            this.emit("change", this);
+        };
+        DTextPieceImpl.prototype.destroy = function () {
+            var object = this._object;
+            if (object) {
+                this._object = undefined;
+                object.destroy();
             }
+            return this;
         };
-        DTextBase.prototype.showText = function () {
-            var text = this._text;
-            if (text) {
-                text.visible = true;
+        return DTextPieceImpl;
+    }(pixi_js.utils.EventEmitter));
+
+    /*
+     * Copyright (C) 2019 Toshiba Corporation
+     * SPDX-License-Identifier: Apache-2.0
+     */
+    /**
+     * A base class for UI classes with a text support.
+     * See {@link DTextBaseEvents} for event defaults.
+     */
+    var DTextBase = /** @class */ (function (_super) {
+        __extends(DTextBase, _super);
+        function DTextBase() {
+            return _super !== null && _super.apply(this, arguments) || this;
+        }
+        DTextBase.prototype.init = function (options) {
+            _super.prototype.init.call(this, options);
+            this.getText();
+        };
+        DTextBase.prototype.getOverflowMask = function () {
+            var result = this._overflowMask;
+            if (result === undefined) {
+                result = this.newOverflowMask();
+                this._overflowMask = result;
             }
-            this._isTextVisible = true;
+            return null;
         };
-        DTextBase.prototype.hideText = function () {
-            var text = this._text;
-            if (text) {
-                text.visible = false;
+        DTextBase.prototype.newOverflowMask = function () {
+            var _a, _b;
+            if ((_b = (_a = this._options) === null || _a === void 0 ? void 0 : _a.mask) !== null && _b !== void 0 ? _b : this.theme.isOverflowMaskEnabled()) {
+                var result = new DBaseOverflowMaskSimple(this);
+                this._reflowable.add(result);
+                this.toDirty();
+                return result;
             }
-            this._isTextVisible = false;
+            else {
+                return null;
+            }
+        };
+        Object.defineProperty(DTextBase.prototype, "text", {
+            get: function () {
+                var _a;
+                return ((_a = this._text) !== null && _a !== void 0 ? _a : (this._text = this.newText()));
+            },
+            set: function (text) {
+                this.text.value = text;
+            },
+            enumerable: false,
+            configurable: true
+        });
+        DTextBase.prototype.getText = function () {
+            var _a;
+            return ((_a = this._text) !== null && _a !== void 0 ? _a : (this._text = this.newText()));
+        };
+        DTextBase.prototype.newText = function () {
+            var _a;
+            return new DTextPieceImpl(this, this.theme, (_a = this._options) === null || _a === void 0 ? void 0 : _a.text);
         };
         DTextBase.prototype.onReflow = function () {
             _super.prototype.onReflow.call(this);
-            this.updateText();
+            this.onReflowTextAndImage();
+        };
+        DTextBase.prototype.getLayouter = function () {
+            var _a;
+            return ((_a = DTextBase.LAYOUTER) !== null && _a !== void 0 ? _a : (DTextBase.LAYOUTER = new DImagePieceLayouter()));
+        };
+        DTextBase.prototype.onReflowTextAndImage = function () {
+            var layouter = this.getLayouter();
+            var text = this.getText();
+            text.update(layouter);
+            var auto = this._auto;
+            layouter.execute(this._padding, text.align, auto.width.isOn ? null : this.width, auto.height.isOn ? null : this.height);
+            layouter.clear();
         };
         DTextBase.prototype.isRefitable = function (target) {
-            return _super.prototype.isRefitable.call(this, target) || (target != null && target === this._text);
+            if (_super.prototype.isRefitable.call(this, target)) {
+                return true;
+            }
+            if (target != null) {
+                var text = this._text;
+                if (text != null && target === text.object) {
+                    return true;
+                }
+            }
+            return false;
         };
         DTextBase.prototype.applyTitle = function () {
-            var text = this._text;
-            if (this._title.length <= 0 && text && "clipped" in text && text.clipped) {
+            var object = this.text.object;
+            if (this._title.length <= 0 && object != null && object.clipped) {
                 var layer = DApplications.getLayer(this);
                 if (layer) {
-                    layer.view.title = text.text;
+                    layer.view.title = object.text;
                 }
             }
             else {
@@ -29788,7 +30178,6 @@
             // Text
             var text = this._text;
             if (text) {
-                this._text = null;
                 text.destroy();
             }
             // Overflow mask
@@ -30420,7 +30809,7 @@
             }
             return false;
         };
-        DImagePieceContainerImpl.prototype.updateTextAndImage = function (layouter) {
+        DImagePieceContainerImpl.prototype.update = function (layouter) {
             var pieces = this._pieces;
             for (var i = 0, imax = pieces.length; i < imax; ++i) {
                 var piece = pieces[i];
@@ -30430,6 +30819,54 @@
                 layouter.add(piece);
             }
         };
+        Object.defineProperty(DImagePieceContainerImpl.prototype, "object", {
+            get: function () {
+                return this._pieces[0].object;
+            },
+            enumerable: false,
+            configurable: true
+        });
+        Object.defineProperty(DImagePieceContainerImpl.prototype, "align", {
+            get: function () {
+                return this._pieces[0].align;
+            },
+            enumerable: false,
+            configurable: true
+        });
+        Object.defineProperty(DImagePieceContainerImpl.prototype, "margin", {
+            get: function () {
+                return this._pieces[0].margin;
+            },
+            enumerable: false,
+            configurable: true
+        });
+        Object.defineProperty(DImagePieceContainerImpl.prototype, "tint", {
+            get: function () {
+                return this._pieces[0].tint;
+            },
+            enumerable: false,
+            configurable: true
+        });
+        Object.defineProperty(DImagePieceContainerImpl.prototype, "source", {
+            get: function () {
+                return this._pieces[0].source;
+            },
+            set: function (source) {
+                this._pieces[0].source = source;
+            },
+            enumerable: false,
+            configurable: true
+        });
+        Object.defineProperty(DImagePieceContainerImpl.prototype, "rotation", {
+            get: function () {
+                return this._pieces[0].rotation;
+            },
+            set: function (rotation) {
+                this._pieces[0].rotation = rotation;
+            },
+            enumerable: false,
+            configurable: true
+        });
         DImagePieceContainerImpl.prototype.add = function (options) {
             var result = this.newImage(this._theme, options);
             this._pieces.push(result);
@@ -30504,24 +30941,13 @@
             _super.prototype.onStateChange.call(this, newState, oldState);
             this.getImage().onStateChange(newState, oldState);
         };
-        DImageBase.prototype.updateText = function () {
-            this.updateTextValue();
-            this.updateTextAndImage();
-        };
-        DImageBase.prototype.updateTextAndImage = function () {
-            var _a;
-            var layouter = ((_a = DImageBase.LAYOUTER) !== null && _a !== void 0 ? _a : (DImageBase.LAYOUTER = new DImagePieceLayouter()));
-            this.getImage().updateTextAndImage(layouter);
-            var text = this._text;
-            if (text != null) {
-                this.updateTextColor(text);
-                layouter.set(text);
-            }
-            else {
-                layouter.set(null);
-            }
+        DImageBase.prototype.onReflowTextAndImage = function () {
+            var layouter = this.getLayouter();
+            this.getImage().update(layouter);
+            var text = this.getText();
+            text.update(layouter);
             var auto = this._auto;
-            layouter.execute(this._padding, this._textAlign, auto.width.isOn ? null : this.width, auto.height.isOn ? null : this.height);
+            layouter.execute(this._padding, text.align, auto.width.isOn ? null : this.width, auto.height.isOn ? null : this.height);
             layouter.clear();
         };
         DImageBase.prototype.isRefitable = function (target) {
@@ -31810,16 +32236,16 @@
                     return _this.containsPoint(point);
                 },
                 onStart: function () {
-                    _this.hideText();
+                    _this.text.hide();
                 },
                 onCancel: function () {
-                    _this.showText();
+                    _this.text.show();
                 },
                 onEnd: function () {
                     // DO NOTHING
                 },
                 getValue: function () {
-                    return _this._textValueComputed;
+                    return _this.text.computed;
                 },
                 onValueInput: function (newValue) {
                     _this.onValueInput(newValue);
@@ -31838,7 +32264,7 @@
         };
         Object.defineProperty(DInput.prototype, "value", {
             get: function () {
-                return this._textValueComputed;
+                return this.text.computed;
             },
             set: function (value) {
                 this.text = value;
@@ -31846,9 +32272,13 @@
             enumerable: false,
             configurable: true
         });
-        DInput.prototype.onTextChange = function () {
-            _super.prototype.onTextChange.call(this);
-            this.validate();
+        DInput.prototype.newText = function () {
+            var _this = this;
+            var result = _super.prototype.newText.call(this);
+            result.on("change", function () {
+                _this.validate();
+            });
+            return result;
         };
         DInput.prototype.onValueChange = function (newValue, oldValue) {
             this.emit("change", newValue, oldValue, this);
@@ -35107,7 +35537,7 @@
     var toImageElement = function (dataUrl) {
         var cachedImageElement = imageElementCache[dataUrl];
         if (cachedImageElement != null) {
-            if (cachedImageElement instanceof HTMLImageElement) {
+            if ("url" in cachedImageElement) {
                 return Promise.resolve(cachedImageElement);
             }
             else {
@@ -35118,8 +35548,14 @@
             var result = new Promise(function (resolve, reject) {
                 var imageElement = document.createElement("img");
                 imageElement.onload = function () {
-                    imageElementCache[dataUrl] = imageElement;
-                    resolve(imageElement);
+                    var resolved = {
+                        url: dataUrl,
+                        width: imageElement.width,
+                        height: imageElement.height,
+                        source: imageElement
+                    };
+                    imageElementCache[dataUrl] = resolved;
+                    resolve(resolved);
                 };
                 imageElement.onabort = imageElement.onerror = function () {
                     reject();
@@ -36234,18 +36670,20 @@
      */
     var BuilderRectangleRounded = /** @class */ (function (_super) {
         __extends(BuilderRectangleRounded, _super);
-        function BuilderRectangleRounded(vertexOffset, indexOffset, vertexCount, indexCount) {
-            var _this = _super.call(this, vertexOffset, indexOffset, vertexCount, indexCount) || this;
+        function BuilderRectangleRounded(buffer, vertexOffset, indexOffset) {
+            var _this = _super.call(this, buffer, vertexOffset, indexOffset, RECTANGLE_ROUNDED_VERTEX_COUNT, RECTANGLE_ROUNDED_INDEX_COUNT) || this;
             _this.radius = 0;
             _this.corner = 0;
             return _this;
         }
-        BuilderRectangleRounded.prototype.init = function (buffer) {
+        BuilderRectangleRounded.prototype.init = function () {
+            var buffer = this.buffer;
             buffer.updateIndices();
             buildRectangleRoundedIndex(buffer.indices, this.vertexOffset, this.indexOffset);
             this.inited |= BuilderFlag.INDEX;
         };
-        BuilderRectangleRounded.prototype.update = function (buffer, shape) {
+        BuilderRectangleRounded.prototype.update = function (shape) {
+            var buffer = this.buffer;
             this.updateVertexClippingStepAndUv(buffer, shape);
             this.updateColorFill(buffer, shape);
             this.updateColorStroke(buffer, shape);
@@ -36327,8 +36765,8 @@
         var icount = RECTANGLE_ROUNDED_INDEX_COUNT + ticount;
         if (buffer.check(voffset, ioffset, vcount, icount)) {
             return new EShapeUploadedImpl(buffer, voffset, ioffset, vcount, icount, [
-                new BuilderRectangleRounded(voffset, ioffset, vcount - tvcount, icount - ticount),
-                new BuilderText(voffset + RECTANGLE_ROUNDED_VERTEX_COUNT, ioffset + RECTANGLE_ROUNDED_INDEX_COUNT, tvcount, ticount)
+                new BuilderRectangleRounded(buffer, voffset, ioffset),
+                new BuilderText(buffer, voffset + RECTANGLE_ROUNDED_VERTEX_COUNT, ioffset + RECTANGLE_ROUNDED_INDEX_COUNT, tvcount, ticount)
             ]).init(shape);
         }
         return null;
@@ -37199,10 +37637,11 @@
      */
     var BuilderCircle = /** @class */ (function (_super) {
         __extends(BuilderCircle, _super);
-        function BuilderCircle(vertexOffset, indexOffset) {
-            return _super.call(this, vertexOffset, indexOffset, CIRCLE_VERTEX_COUNT, CIRCLE_INDEX_COUNT) || this;
+        function BuilderCircle(buffer, vertexOffset, indexOffset) {
+            return _super.call(this, buffer, vertexOffset, indexOffset, CIRCLE_VERTEX_COUNT, CIRCLE_INDEX_COUNT) || this;
         }
-        BuilderCircle.prototype.init = function (buffer) {
+        BuilderCircle.prototype.init = function () {
+            var buffer = this.buffer;
             buffer.updateClippings();
             buffer.updateIndices();
             var voffset = this.vertexOffset;
@@ -37210,7 +37649,8 @@
             buildCircleIndex(buffer.indices, voffset, this.indexOffset);
             this.inited |= BuilderFlag.CLIPPING_AND_INDEX;
         };
-        BuilderCircle.prototype.update = function (buffer, shape) {
+        BuilderCircle.prototype.update = function (shape) {
+            var buffer = this.buffer;
             this.updateVertexAndStep(buffer, shape);
             this.updateColorFill(buffer, shape);
             this.updateColorStroke(buffer, shape);
@@ -37276,8 +37716,8 @@
         var icount = CIRCLE_INDEX_COUNT + ticount;
         if (buffer.check(voffset, ioffset, vcount, icount)) {
             return new EShapeUploadedImpl(buffer, voffset, ioffset, vcount, icount, [
-                new BuilderCircle(voffset, ioffset),
-                new BuilderText(voffset + CIRCLE_VERTEX_COUNT, ioffset + CIRCLE_INDEX_COUNT, tvcount, ticount)
+                new BuilderCircle(buffer, voffset, ioffset),
+                new BuilderText(buffer, voffset + CIRCLE_VERTEX_COUNT, ioffset + CIRCLE_INDEX_COUNT, tvcount, ticount)
             ]).init(shape);
         }
         return null;
@@ -37302,21 +37742,22 @@
 
     var LINE_FMIN = 0.00001;
     var LINE_WORK_POINT = new pixi_js.Point();
-    var toPointsCount = function (points) {
+    var toPointCount = function (points) {
         if (points) {
-            return points.formatted.length;
+            return points.formatted.plength;
         }
         return 0;
     };
     var toLinePointCount = function (points) {
-        return Math.ceil(toPointsCount(points) / 12) * 12;
+        var pointCount = toPointCount(points);
+        return ((pointCount >> 4) + (0 < (pointCount & 0xf) ? 1 : 0)) << 4;
     };
     var toLineVertexCount = function (pointCount, isClosed) {
         if (isClosed) {
-            return pointCount * 4 + 2;
+            return (pointCount << 2) + 2;
         }
         else {
-            return pointCount * 4;
+            return pointCount << 2;
         }
     };
     var toLineIndexCount = function (pointCount, isClosed) {
@@ -37704,24 +38145,53 @@
      */
     var BuilderLine = /** @class */ (function (_super) {
         __extends(BuilderLine, _super);
-        function BuilderLine(vertexOffset, indexOffset, vertexCount, indexCount) {
-            var _this = _super.call(this, vertexOffset, indexOffset, vertexCount, indexCount) || this;
+        function BuilderLine(buffer, vertexOffset, indexOffset, vertexCount, indexCount) {
+            var _this = _super.call(this, buffer, vertexOffset, indexOffset, vertexCount, indexCount) || this;
             _this.pointId = -1;
             _this.pointCount = 0;
             _this.pointsClosed = false;
             _this.length = 1;
             return _this;
         }
-        BuilderLine.prototype.init = function (buffer) {
+        BuilderLine.prototype.init = function () {
+            var buffer = this.buffer;
             buffer.updateIndices();
             buildLineIndex(buffer.indices, this.vertexOffset, this.indexOffset, this.indexCount);
             this.inited |= BuilderFlag.INDEX;
         };
+        BuilderLine.prototype.reinit = function (buffer, shape, vertexOffset, indexOffset) {
+            var pointCount = toLinePointCount(shape.points);
+            var vertexCount = toLineVertexCount(pointCount, true);
+            var indexCount = toLineIndexCount(pointCount, true);
+            if (this.buffer !== buffer ||
+                this.vertexOffset !== vertexOffset ||
+                this.indexOffset !== indexOffset ||
+                this.vertexCount !== vertexCount ||
+                this.indexCount !== indexCount) {
+                if (buffer.check(vertexOffset, indexOffset, vertexCount, indexCount)) {
+                    this.inited = BuilderFlag.NONE;
+                    this.buffer = buffer;
+                    this.vertexOffset = vertexOffset;
+                    this.indexOffset = indexOffset;
+                    this.vertexCount = vertexCount;
+                    this.indexCount = indexCount;
+                    this.init();
+                    return true;
+                }
+                else {
+                    return false;
+                }
+            }
+            else {
+                return true;
+            }
+        };
         BuilderLine.prototype.isCompatible = function (shape) {
             var vcount = toLineVertexCount(toLinePointCount(shape.points), true);
             return vcount === this.vertexCount;
         };
-        BuilderLine.prototype.update = function (buffer, shape) {
+        BuilderLine.prototype.update = function (shape) {
+            var buffer = this.buffer;
             this.updateLineClipping(buffer, shape);
             this.updateLineVertexStepAndColorFill(buffer, shape);
             this.updateColorStroke(buffer, shape);
@@ -37970,19 +38440,21 @@
      */
     var BuilderMarkerTriangle = /** @class */ (function (_super) {
         __extends(BuilderMarkerTriangle, _super);
-        function BuilderMarkerTriangle(vertexOffset, indexOffset) {
-            var _this = _super.call(this, vertexOffset, indexOffset, TRIANGLE_VERTEX_COUNT, TRIANGLE_INDEX_COUNT) || this;
+        function BuilderMarkerTriangle(buffer, vertexOffset, indexOffset) {
+            var _this = _super.call(this, buffer, vertexOffset, indexOffset, TRIANGLE_VERTEX_COUNT, TRIANGLE_INDEX_COUNT) || this;
             _this.pointId = -1;
             return _this;
         }
-        BuilderMarkerTriangle.prototype.init = function (buffer) {
+        BuilderMarkerTriangle.prototype.init = function () {
+            var buffer = this.buffer;
             buffer.updateClippings();
             buffer.updateIndices();
             buildTriangleClipping(buffer.clippings, this.vertexOffset);
             buildTriangleIndex(buffer.indices, this.vertexOffset, this.indexOffset);
             this.inited |= BuilderFlag.CLIPPING_AND_INDEX;
         };
-        BuilderMarkerTriangle.prototype.update = function (buffer, shape) {
+        BuilderMarkerTriangle.prototype.update = function (shape) {
+            var buffer = this.buffer;
             this.updateVertexStepAndUv(buffer, shape);
             this.updateColorFill(buffer, shape);
             this.updateColorStroke(buffer, shape);
@@ -38087,12 +38559,13 @@
      */
     var BuilderMarkerCircle = /** @class */ (function (_super) {
         __extends(BuilderMarkerCircle, _super);
-        function BuilderMarkerCircle(vertexOffset, indexOffset) {
-            var _this = _super.call(this, vertexOffset, indexOffset, CIRCLE_VERTEX_COUNT, CIRCLE_INDEX_COUNT) || this;
+        function BuilderMarkerCircle(buffer, vertexOffset, indexOffset) {
+            var _this = _super.call(this, buffer, vertexOffset, indexOffset, CIRCLE_VERTEX_COUNT, CIRCLE_INDEX_COUNT) || this;
             _this.pointId = -1;
             return _this;
         }
-        BuilderMarkerCircle.prototype.init = function (buffer) {
+        BuilderMarkerCircle.prototype.init = function () {
+            var buffer = this.buffer;
             buffer.updateClippings();
             buffer.updateIndices();
             var vertexOffset = this.vertexOffset;
@@ -38100,7 +38573,8 @@
             buildCircleIndex(buffer.indices, vertexOffset, this.indexOffset);
             this.inited |= BuilderFlag.CLIPPING_AND_INDEX;
         };
-        BuilderMarkerCircle.prototype.update = function (buffer, shape) {
+        BuilderMarkerCircle.prototype.update = function (shape) {
+            var buffer = this.buffer;
             this.updateVertexAndStep(buffer, shape);
             this.updateColorFill(buffer, shape);
             this.updateColorStroke(buffer, shape);
@@ -38208,20 +38682,27 @@
      * SPDX-License-Identifier: Apache-2.0
      */
     var BuilderNull = /** @class */ (function () {
-        function BuilderNull(vertexOffset, indexOffset) {
+        function BuilderNull(buffer, vertexOffset, indexOffset) {
+            this.buffer = buffer;
             this.vertexOffset = vertexOffset;
             this.indexOffset = indexOffset;
             this.vertexCount = 0;
             this.indexCount = 0;
             this.texture = null;
         }
-        BuilderNull.prototype.init = function (buffer) {
-            // DO NOTHING
+        BuilderNull.prototype.init = function () {
+            return this;
+        };
+        BuilderNull.prototype.reinit = function (buffer, shape, vertexOffset, indexOffset) {
+            this.buffer = buffer;
+            this.vertexOffset = vertexOffset;
+            this.indexOffset = indexOffset;
+            return true;
         };
         BuilderNull.prototype.isCompatible = function (shape) {
             return true;
         };
-        BuilderNull.prototype.update = function (buffer, shape) {
+        BuilderNull.prototype.update = function (shape) {
             this.texture = toTexture(shape);
         };
         BuilderNull.prototype.buildUnit = function (builder) {
@@ -38651,17 +39132,19 @@
      */
     var BuilderMarkerRectangle = /** @class */ (function (_super) {
         __extends(BuilderMarkerRectangle, _super);
-        function BuilderMarkerRectangle(vertexOffset, indexOffset) {
-            var _this = _super.call(this, vertexOffset, indexOffset, RECTANGLE_VERTEX_COUNT, RECTANGLE_INDEX_COUNT) || this;
+        function BuilderMarkerRectangle(buffer, vertexOffset, indexOffset) {
+            var _this = _super.call(this, buffer, vertexOffset, indexOffset, RECTANGLE_VERTEX_COUNT, RECTANGLE_INDEX_COUNT) || this;
             _this.pointId = -1;
             return _this;
         }
-        BuilderMarkerRectangle.prototype.init = function (buffer) {
+        BuilderMarkerRectangle.prototype.init = function () {
+            var buffer = this.buffer;
             buffer.updateIndices();
             buildRectangleIndex(buffer.indices, this.vertexOffset, this.indexOffset);
             this.inited |= BuilderFlag.INDEX;
         };
-        BuilderMarkerRectangle.prototype.update = function (buffer, shape) {
+        BuilderMarkerRectangle.prototype.update = function (shape) {
+            var buffer = this.buffer;
             this.updateVertexClippingStepAndUv(buffer, shape);
             this.updateColorFill(buffer, shape);
             this.updateColorStroke(buffer, shape);
@@ -38800,31 +39283,31 @@
         }
         return 0;
     };
-    var toBuilderMarkerHead = function (type, vertexOffset, indexOffset) {
+    var toBuilderMarkerHead = function (type, buffer, vertexOffset, indexOffset) {
         switch (type) {
             case EShapePointsMarkerType.NONE:
-                return new BuilderNull(vertexOffset, indexOffset);
+                return new BuilderNull(buffer, vertexOffset, indexOffset);
             case EShapePointsMarkerType.CIRCLE:
-                return new BuilderMarkerCircleHead(vertexOffset, indexOffset);
+                return new BuilderMarkerCircleHead(buffer, vertexOffset, indexOffset);
             case EShapePointsMarkerType.TRIANGLE:
-                return new BuilderMarkerTriangleHead(vertexOffset, indexOffset);
+                return new BuilderMarkerTriangleHead(buffer, vertexOffset, indexOffset);
             case EShapePointsMarkerType.RECTANGLE:
-                return new BuilderMarkerRectangleHead(vertexOffset, indexOffset);
+                return new BuilderMarkerRectangleHead(buffer, vertexOffset, indexOffset);
         }
-        return new BuilderNull(vertexOffset, indexOffset);
+        return new BuilderNull(buffer, vertexOffset, indexOffset);
     };
-    var toBuilderMarkerTail = function (type, vertexOffset, indexOffset) {
+    var toBuilderMarkerTail = function (type, buffer, vertexOffset, indexOffset) {
         switch (type) {
             case EShapePointsMarkerType.NONE:
-                return new BuilderNull(vertexOffset, indexOffset);
+                return new BuilderNull(buffer, vertexOffset, indexOffset);
             case EShapePointsMarkerType.CIRCLE:
-                return new BuilderMarkerCircleTail(vertexOffset, indexOffset);
+                return new BuilderMarkerCircleTail(buffer, vertexOffset, indexOffset);
             case EShapePointsMarkerType.TRIANGLE:
-                return new BuilderMarkerTriangleTail(vertexOffset, indexOffset);
+                return new BuilderMarkerTriangleTail(buffer, vertexOffset, indexOffset);
             case EShapePointsMarkerType.RECTANGLE:
-                return new BuilderMarkerRectangleTail(vertexOffset, indexOffset);
+                return new BuilderMarkerRectangleTail(buffer, vertexOffset, indexOffset);
         }
-        return new BuilderNull(vertexOffset, indexOffset);
+        return new BuilderNull(buffer, vertexOffset, indexOffset);
     };
     var createLineUploaded = function (buffer, shape, voffset, ioffset, antialiasWeight) {
         // Line
@@ -38861,10 +39344,10 @@
         var icount = licount + mhicount + mticount + ticount;
         if (buffer.check(voffset, ioffset, vcount, icount)) {
             return new EShapeUploadedImpl(buffer, voffset, ioffset, vcount, icount, [
-                new BuilderLine(voffset, ioffset, lvcount, licount),
-                toBuilderMarkerTail(mttype, mtvoffset, mtioffset),
-                toBuilderMarkerHead(mhtype, mhvoffset, mhioffset),
-                new BuilderText(tvoffset, tioffset, tvcount, ticount)
+                new BuilderLine(buffer, voffset, ioffset, lvcount, licount),
+                toBuilderMarkerTail(mttype, buffer, mtvoffset, mtioffset),
+                toBuilderMarkerHead(mhtype, buffer, mhvoffset, mhioffset),
+                new BuilderText(buffer, tvoffset, tioffset, tvcount, ticount)
             ]).init(shape);
         }
         return null;
@@ -39363,15 +39846,17 @@
      */
     var BuilderRectanglePivoted = /** @class */ (function (_super) {
         __extends(BuilderRectanglePivoted, _super);
-        function BuilderRectanglePivoted() {
-            return _super !== null && _super.apply(this, arguments) || this;
+        function BuilderRectanglePivoted(buffer, vertexOffset, indexOffset) {
+            return _super.call(this, buffer, vertexOffset, indexOffset, RECTANGLE_VERTEX_COUNT, RECTANGLE_INDEX_COUNT) || this;
         }
-        BuilderRectanglePivoted.prototype.init = function (buffer) {
+        BuilderRectanglePivoted.prototype.init = function () {
+            var buffer = this.buffer;
             buffer.updateIndices();
             buildRectangleIndex(buffer.indices, this.vertexOffset, this.indexOffset);
             this.inited |= BuilderFlag.INDEX;
         };
-        BuilderRectanglePivoted.prototype.update = function (buffer, shape) {
+        BuilderRectanglePivoted.prototype.update = function (shape) {
+            var buffer = this.buffer;
             this.updateVertexClippingStepAndUv(buffer, shape);
             this.updateColorFill(buffer, shape);
             this.updateColorStroke(buffer, shape);
@@ -39444,8 +39929,8 @@
         var icount = RECTANGLE_INDEX_COUNT + ticount;
         if (buffer.check(voffset, ioffset, vcount, icount)) {
             return new EShapeUploadedImpl(buffer, voffset, ioffset, vcount, icount, [
-                new BuilderRectanglePivoted(voffset, ioffset, vcount - tvcount, icount - ticount),
-                new BuilderText(voffset + RECTANGLE_VERTEX_COUNT, ioffset + RECTANGLE_INDEX_COUNT, tvcount, ticount)
+                new BuilderRectanglePivoted(buffer, voffset, ioffset),
+                new BuilderText(buffer, voffset + RECTANGLE_VERTEX_COUNT, ioffset + RECTANGLE_INDEX_COUNT, tvcount, ticount)
             ]).init(shape);
         }
         return null;
@@ -39463,7 +39948,7 @@
         var icount = ticount;
         if (buffer.check(voffset, ioffset, vcount, icount)) {
             return new EShapeUploadedImpl(buffer, voffset, ioffset, vcount, icount, [
-                new BuilderText(voffset, ioffset, tvcount, ticount)
+                new BuilderText(buffer, voffset, ioffset, tvcount, ticount)
             ]).init(shape);
         }
         return null;
@@ -39750,6 +40235,20 @@
             enumerable: false,
             configurable: true
         });
+        Object.defineProperty(EShapeGroupPoints.prototype, "plength", {
+            get: function () {
+                var children = this._parent.children;
+                if (0 < children.length) {
+                    var points = children[children.length - 1].points;
+                    if (points != null) {
+                        return points.plength;
+                    }
+                }
+                return 0;
+            },
+            enumerable: false,
+            configurable: true
+        });
         Object.defineProperty(EShapeGroupPoints.prototype, "id", {
             get: function () {
                 var children = this._parent.children;
@@ -40211,6 +40710,9 @@
             enumerable: false,
             configurable: true
         });
+        EShapeGroup.prototype.serializeGradient = function (manager) {
+            return -1;
+        };
         Object.defineProperty(EShapeGroup.prototype, "radius", {
             get: function () {
                 var children = this.children;
@@ -40248,6 +40750,9 @@
             enumerable: false,
             configurable: true
         });
+        EShapeGroup.prototype.serializeImage = function (manager) {
+            return -1;
+        };
         Object.defineProperty(EShapeGroup.prototype, "points", {
             get: function () {
                 var children = this.children;
@@ -40452,15 +40957,17 @@
      */
     var BuilderRectangle = /** @class */ (function (_super) {
         __extends(BuilderRectangle, _super);
-        function BuilderRectangle() {
-            return _super !== null && _super.apply(this, arguments) || this;
+        function BuilderRectangle(buffer, vertexOffset, indexOffset) {
+            return _super.call(this, buffer, vertexOffset, indexOffset, RECTANGLE_VERTEX_COUNT, RECTANGLE_INDEX_COUNT) || this;
         }
-        BuilderRectangle.prototype.init = function (buffer) {
+        BuilderRectangle.prototype.init = function () {
+            var buffer = this.buffer;
             buffer.updateIndices();
             buildRectangleIndex(buffer.indices, this.vertexOffset, this.indexOffset);
             this.inited |= BuilderFlag.INDEX;
         };
-        BuilderRectangle.prototype.update = function (buffer, shape) {
+        BuilderRectangle.prototype.update = function (shape) {
+            var buffer = this.buffer;
             this.updateVertexClippingStepAndUv(buffer, shape);
             this.updateColorFill(buffer, shape);
             this.updateColorStroke(buffer, shape);
@@ -40533,8 +41040,8 @@
         var icount = RECTANGLE_INDEX_COUNT + ticount;
         if (buffer.check(voffset, ioffset, vcount, icount)) {
             return new EShapeUploadedImpl(buffer, voffset, ioffset, vcount, icount, [
-                new BuilderRectangle(voffset, ioffset, vcount - tvcount, icount - ticount),
-                new BuilderText(voffset + RECTANGLE_VERTEX_COUNT, ioffset + RECTANGLE_INDEX_COUNT, tvcount, ticount)
+                new BuilderRectangle(buffer, voffset, ioffset),
+                new BuilderText(buffer, voffset + RECTANGLE_VERTEX_COUNT, ioffset + RECTANGLE_INDEX_COUNT, tvcount, ticount)
             ]).init(shape);
         }
         return null;
@@ -40769,21 +41276,23 @@
      */
     var BuilderImageSdf = /** @class */ (function (_super) {
         __extends(BuilderImageSdf, _super);
-        function BuilderImageSdf(vertexOffset, indexOffset) {
-            var _this = _super.call(this, vertexOffset, indexOffset, IMAGE_SDF_VERTEX_COUNT, IMAGE_SDF_INDEX_COUNT) || this;
+        function BuilderImageSdf(buffer, vertexOffset, indexOffset) {
+            var _this = _super.call(this, buffer, vertexOffset, indexOffset, IMAGE_SDF_VERTEX_COUNT, IMAGE_SDF_INDEX_COUNT) || this;
             _this.textureWidth = -1;
             _this.textureHeight = -1;
             return _this;
         }
-        BuilderImageSdf.prototype.init = function (buffer) {
+        BuilderImageSdf.prototype.init = function () {
             var voffset = this.vertexOffset;
+            var buffer = this.buffer;
             buffer.updateClippings();
             buffer.updateIndices();
             buildImageSdfClipping(buffer.clippings, voffset);
             buildImageSdfIndex(buffer.indices, voffset, this.indexOffset);
             this.inited |= BuilderFlag.CLIPPING_AND_INDEX;
         };
-        BuilderImageSdf.prototype.update = function (buffer, shape) {
+        BuilderImageSdf.prototype.update = function (shape) {
+            var buffer = this.buffer;
             this.updateVertexAndStep(buffer, shape);
             this.updateColorFill(buffer, shape);
             this.updateColorStroke(buffer, shape);
@@ -40859,8 +41368,8 @@
         var icount = IMAGE_SDF_INDEX_COUNT + ticount;
         if (buffer.check(voffset, ioffset, vcount, icount)) {
             return new EShapeUploadedImpl(buffer, voffset, ioffset, vcount, icount, [
-                new BuilderImageSdf(voffset, ioffset),
-                new BuilderText(voffset + IMAGE_SDF_VERTEX_COUNT, ioffset + IMAGE_SDF_INDEX_COUNT, tvcount, ticount)
+                new BuilderImageSdf(buffer, voffset, ioffset),
+                new BuilderText(buffer, voffset + IMAGE_SDF_VERTEX_COUNT, ioffset + IMAGE_SDF_INDEX_COUNT, tvcount, ticount)
             ]).init(shape);
         }
         return null;
@@ -40904,20 +41413,27 @@
      * SPDX-License-Identifier: Apache-2.0
      */
     var BuilderLabel = /** @class */ (function () {
-        function BuilderLabel(vertexOffset, indexOffset, vertexCount, indexCount) {
+        function BuilderLabel(buffer, vertexOffset, indexOffset) {
+            this.buffer = buffer;
             this.vertexOffset = vertexOffset;
             this.indexOffset = indexOffset;
-            this.vertexCount = vertexCount;
-            this.indexCount = indexCount;
+            this.vertexCount = 0;
+            this.indexCount = 0;
             this.texture = null;
         }
-        BuilderLabel.prototype.init = function (buffer) {
-            // DO NOTHING
+        BuilderLabel.prototype.init = function () {
+            return this;
+        };
+        BuilderLabel.prototype.reinit = function (buffer, shape, vertexOffset, indexOffset) {
+            this.buffer = buffer;
+            this.vertexOffset = vertexOffset;
+            this.indexOffset = indexOffset;
+            return true;
         };
         BuilderLabel.prototype.isCompatible = function (shape) {
             return true;
         };
-        BuilderLabel.prototype.update = function (buffer, shape) {
+        BuilderLabel.prototype.update = function (shape) {
             this.texture = toTexture(shape);
         };
         BuilderLabel.prototype.buildUnit = function (builder) {
@@ -40944,8 +41460,8 @@
         var icount = ticount;
         if (buffer.check(voffset, ioffset, vcount, icount)) {
             return new EShapeUploadedImpl(buffer, voffset, ioffset, vcount, icount, [
-                new BuilderLabel(voffset, ioffset, vcount - tvcount, icount - ticount),
-                new BuilderText(voffset, ioffset, tvcount, ticount)
+                new BuilderLabel(buffer, voffset, ioffset),
+                new BuilderText(buffer, voffset, ioffset, tvcount, ticount)
             ]).init(shape);
         }
         return null;
@@ -41081,7 +41597,7 @@
     };
 
     var toLineOfAnyPointCount = function (pointCount) {
-        return Math.ceil(pointCount / 12) * 12;
+        return ((pointCount >> 4) + (0 < (pointCount & 0xf) ? 1 : 0)) << 4;
     };
     var buildLineOfAnyColor = function (voffset, vcountPerPoint, point, pointCount, colors, isEnabled, colorDef, alphaDef) {
         if (isEnabled) {
@@ -41135,8 +41651,8 @@
      */
     var BuilderLineOfAny = /** @class */ (function (_super) {
         __extends(BuilderLineOfAny, _super);
-        function BuilderLineOfAny(vertexOffset, indexOffset, vertexCount, indexCount, pointCountReserved) {
-            var _this = _super.call(this, vertexOffset, indexOffset, vertexCount, indexCount) || this;
+        function BuilderLineOfAny(buffer, vertexOffset, indexOffset, vertexCount, indexCount, pointCountReserved, vcountPerPoint, icountPerPoint) {
+            var _this = _super.call(this, buffer, vertexOffset, indexOffset, vertexCount, indexCount) || this;
             _this.pointId = -1;
             _this.pointCount = 0;
             _this.pointCountReserved = pointCountReserved;
@@ -41144,10 +41660,39 @@
             _this.pointOffsetId = -1;
             _this.pointFillId = -1;
             _this.pointStrokeId = -1;
+            _this.vcountPerPoint = vcountPerPoint;
+            _this.icountPerPoint = icountPerPoint;
             return _this;
         }
+        BuilderLineOfAny.prototype.reinit = function (buffer, shape, vertexOffset, indexOffset) {
+            var pointCount = toLineOfAnyPointCount(toPointCount(shape.points));
+            if (this.buffer !== buffer ||
+                this.vertexOffset !== vertexOffset ||
+                this.indexOffset !== indexOffset ||
+                this.pointCountReserved !== pointCount) {
+                var vertexCount = pointCount * this.vcountPerPoint;
+                var indexCount = pointCount * this.icountPerPoint;
+                if (buffer.check(vertexOffset, indexOffset, vertexCount, indexCount)) {
+                    this.inited = BuilderFlag.NONE;
+                    this.buffer = buffer;
+                    this.vertexOffset = vertexOffset;
+                    this.indexOffset = indexOffset;
+                    this.vertexCount = vertexCount;
+                    this.indexCount = indexCount;
+                    this.pointCountReserved = pointCount;
+                    this.init();
+                    return true;
+                }
+                else {
+                    return false;
+                }
+            }
+            else {
+                return true;
+            }
+        };
         BuilderLineOfAny.prototype.isCompatible = function (shape) {
-            var pointCount = toLineOfAnyPointCount(toPointsCount(shape.points));
+            var pointCount = toLineOfAnyPointCount(toPointCount(shape.points));
             return pointCount === this.pointCountReserved;
         };
         BuilderLineOfAny.prototype.updateLineOfAnyColorFill = function (buffer, shape, points, vcountPerPoint) {
@@ -41159,7 +41704,9 @@
             var colorFill = fill.color;
             var alphaFill = isFillEnabled ? fill.alpha : 0;
             var isFillChanged = colorFill !== this.colorFill || alphaFill !== this.alphaFill;
-            if (isPointFillChanged || isFillChanged) {
+            var isNotInited = !(this.inited & BuilderFlag.COLOR_FILL);
+            if (isNotInited || isPointFillChanged || isFillChanged) {
+                this.inited |= BuilderFlag.COLOR_FILL;
                 this.colorFill = colorFill;
                 this.alphaFill = alphaFill;
                 this.pointFillId = pointFillId;
@@ -41634,6 +42181,8 @@
             this._values = [];
             this._valuesLength = 0;
             this._segments = [];
+            this._length = 0;
+            this._plength = 0;
             this._size = new EShapeLineOfAnyPointsPointImpl(this, EShapeDefaults.SIZE_X, EShapeDefaults.SIZE_Y);
             this._offset = new EShapeLineOfAnyPointsPointImpl(this, 0, 0);
             this._fill = new EShapeLineOfAnyPointsFillImpl(parent);
@@ -41642,7 +42191,14 @@
         }
         Object.defineProperty(EShapeLineOfAnyPointsImpl.prototype, "length", {
             get: function () {
-                return this._values.length >> 1;
+                return this._length;
+            },
+            enumerable: false,
+            configurable: true
+        });
+        Object.defineProperty(EShapeLineOfAnyPointsImpl.prototype, "plength", {
+            get: function () {
+                return this._plength;
             },
             enumerable: false,
             configurable: true
@@ -41787,6 +42343,11 @@
                         isUpdated = true;
                     }
                 }
+                var newLength = newValuesLength >> 1;
+                this._length = newLength;
+                if (this._plength < newLength) {
+                    this._plength = newLength;
+                }
             }
             //
             if (isDirty) {
@@ -41798,7 +42359,6 @@
                         parent_1.updateUploaded();
                     }
                     else {
-                        parent_1.uploaded = undefined;
                         parent_1.toDirty();
                     }
                 }
@@ -41873,7 +42433,8 @@
         function BuilderLineOfCircles() {
             return _super !== null && _super.apply(this, arguments) || this;
         }
-        BuilderLineOfCircles.prototype.init = function (buffer) {
+        BuilderLineOfCircles.prototype.init = function () {
+            var buffer = this.buffer;
             buffer.updateClippings();
             buffer.updateIndices();
             var clippings = buffer.clippings;
@@ -41889,9 +42450,10 @@
             }
             this.inited |= BuilderFlag.CLIPPING_AND_INDEX;
         };
-        BuilderLineOfCircles.prototype.update = function (buffer, shape) {
+        BuilderLineOfCircles.prototype.update = function (shape) {
             var points = shape.points;
             if (points instanceof EShapeLineOfAnyPointsImpl) {
+                var buffer = this.buffer;
                 this.updateVertexAndStep(buffer, shape, points);
                 this.updateLineOfAnyColorFill(buffer, shape, points, CIRCLE_VERTEX_COUNT);
                 this.updateLineOfAnyColorStroke(buffer, shape, points, CIRCLE_VERTEX_COUNT);
@@ -42009,15 +42571,15 @@
         var tvcount = tcount << TEXT_VERTEX_COUNT_SHIFT;
         var ticount = tcount << TEXT_INDEX_COUNT_SHIFT;
         var points = shape.points;
-        var pointCount = toLineOfAnyPointCount(toPointsCount(points));
+        var pointCount = toLineOfAnyPointCount(toPointCount(points));
         var pvcount = pointCount * vcountPerPoint;
         var picount = pointCount * icountPerPoint;
         var vcount = pvcount + tvcount;
         var icount = picount + ticount;
         if (buffer.check(voffset, ioffset, vcount, icount)) {
             return new EShapeUploadedImpl(buffer, voffset, ioffset, vcount, icount, [
-                new constructor(voffset, ioffset, pvcount, picount, pointCount),
-                new BuilderText(voffset + pvcount, ioffset + picount, tvcount, ticount)
+                new constructor(buffer, voffset, ioffset, pvcount, picount, pointCount, vcountPerPoint, icountPerPoint),
+                new BuilderText(buffer, voffset + pvcount, ioffset + picount, tvcount, ticount)
             ]).init(shape);
         }
         return null;
@@ -42100,13 +42662,14 @@
      */
     var BuilderLineOfRectangleRoundeds = /** @class */ (function (_super) {
         __extends(BuilderLineOfRectangleRoundeds, _super);
-        function BuilderLineOfRectangleRoundeds(vertexOffset, indexOffset, vertexCount, indexCount, pointCountReserved) {
-            var _this = _super.call(this, vertexOffset, indexOffset, vertexCount, indexCount, pointCountReserved) || this;
+        function BuilderLineOfRectangleRoundeds(buffer, vertexOffset, indexOffset, vertexCount, indexCount, pointCountReserved, vcountPerPoint, icountPerPoint) {
+            var _this = _super.call(this, buffer, vertexOffset, indexOffset, vertexCount, indexCount, pointCountReserved, vcountPerPoint, icountPerPoint) || this;
             _this.radius = 0;
             _this.corner = 0;
             return _this;
         }
-        BuilderLineOfRectangleRoundeds.prototype.init = function (buffer) {
+        BuilderLineOfRectangleRoundeds.prototype.init = function () {
+            var buffer = this.buffer;
             buffer.updateIndices();
             var indices = buffer.indices;
             var voffset = this.vertexOffset;
@@ -42118,9 +42681,10 @@
             }
             this.inited |= BuilderFlag.INDEX;
         };
-        BuilderLineOfRectangleRoundeds.prototype.update = function (buffer, shape) {
+        BuilderLineOfRectangleRoundeds.prototype.update = function (shape) {
             var points = shape.points;
             if (points instanceof EShapeLineOfAnyPointsImpl) {
+                var buffer = this.buffer;
                 this.updateVertexClippingStepAndUv(buffer, shape, points);
                 this.updateLineOfAnyColorFill(buffer, shape, points, RECTANGLE_ROUNDED_VERTEX_COUNT);
                 this.updateLineOfAnyColorStroke(buffer, shape, points, RECTANGLE_ROUNDED_VERTEX_COUNT);
@@ -42339,7 +42903,8 @@
         function BuilderLineOfRectangles() {
             return _super !== null && _super.apply(this, arguments) || this;
         }
-        BuilderLineOfRectangles.prototype.init = function (buffer) {
+        BuilderLineOfRectangles.prototype.init = function () {
+            var buffer = this.buffer;
             buffer.updateIndices();
             var indices = buffer.indices;
             var voffset = this.vertexOffset;
@@ -42351,9 +42916,10 @@
             }
             this.inited |= BuilderFlag.INDEX;
         };
-        BuilderLineOfRectangles.prototype.update = function (buffer, shape) {
+        BuilderLineOfRectangles.prototype.update = function (shape) {
             var points = shape.points;
             if (points instanceof EShapeLineOfAnyPointsImpl) {
+                var buffer = this.buffer;
                 this.updateVertexClippingStepAndUv(buffer, shape, points);
                 this.updateLineOfAnyColorFill(buffer, shape, points, RECTANGLE_VERTEX_COUNT);
                 this.updateLineOfAnyColorStroke(buffer, shape, points, RECTANGLE_VERTEX_COUNT);
@@ -42964,13 +43530,14 @@
      */
     var BuilderLineOfTriangleRoundeds = /** @class */ (function (_super) {
         __extends(BuilderLineOfTriangleRoundeds, _super);
-        function BuilderLineOfTriangleRoundeds(vertexOffset, indexOffset, vertexCount, indexCount, pointCountReserved) {
-            var _this = _super.call(this, vertexOffset, indexOffset, vertexCount, indexCount, pointCountReserved) || this;
+        function BuilderLineOfTriangleRoundeds(buffer, vertexOffset, indexOffset, vertexCount, indexCount, pointCountReserved, vcountPerPoint, icountPerPoint) {
+            var _this = _super.call(this, buffer, vertexOffset, indexOffset, vertexCount, indexCount, pointCountReserved, vcountPerPoint, icountPerPoint) || this;
             _this.radius = 0;
             _this.corner = 0;
             return _this;
         }
-        BuilderLineOfTriangleRoundeds.prototype.init = function (buffer) {
+        BuilderLineOfTriangleRoundeds.prototype.init = function () {
+            var buffer = this.buffer;
             buffer.updateIndices();
             var voffset = this.vertexOffset;
             var ioffset = this.indexOffset;
@@ -42981,9 +43548,10 @@
             }
             this.inited |= BuilderFlag.INDEX;
         };
-        BuilderLineOfTriangleRoundeds.prototype.update = function (buffer, shape) {
+        BuilderLineOfTriangleRoundeds.prototype.update = function (shape) {
             var points = shape.points;
             if (points instanceof EShapeLineOfAnyPointsImpl) {
+                var buffer = this.buffer;
                 this.updateVertexClippingStepAndUv(buffer, shape, points);
                 this.updateLineOfAnyColorFill(buffer, shape, points, TRIANGLE_ROUNDED_VERTEX_COUNT);
                 this.updateLineOfAnyColorStroke(buffer, shape, points, TRIANGLE_ROUNDED_VERTEX_COUNT);
@@ -43346,7 +43914,8 @@
         function BuilderLineOfTriangles() {
             return _super !== null && _super.apply(this, arguments) || this;
         }
-        BuilderLineOfTriangles.prototype.init = function (buffer) {
+        BuilderLineOfTriangles.prototype.init = function () {
+            var buffer = this.buffer;
             buffer.updateClippings();
             buffer.updateIndices();
             var clippings = buffer.clippings;
@@ -43362,9 +43931,10 @@
             }
             this.inited |= BuilderFlag.CLIPPING_AND_INDEX;
         };
-        BuilderLineOfTriangles.prototype.update = function (buffer, shape) {
+        BuilderLineOfTriangles.prototype.update = function (shape) {
             var points = shape.points;
             if (points instanceof EShapeLineOfAnyPointsImpl) {
+                var buffer = this.buffer;
                 this.updateVertexStepAndUvs(buffer, shape, points);
                 this.updateLineOfAnyColorFill(buffer, shape, points, TRIANGLE_VERTEX_COUNT);
                 this.updateLineOfAnyColorStroke(buffer, shape, points, TRIANGLE_VERTEX_COUNT);
@@ -43570,7 +44140,7 @@
      */
     var createNullUploaded = function (buffer, shape, voffset, ioffset) {
         return new EShapeUploadedImpl(buffer, voffset, ioffset, 0, 0, [
-            new BuilderNull(voffset, ioffset)
+            new BuilderNull(buffer, voffset, ioffset)
         ]).init(shape);
     };
 
@@ -43790,10 +44360,11 @@
      */
     var BuilderSemicircle = /** @class */ (function (_super) {
         __extends(BuilderSemicircle, _super);
-        function BuilderSemicircle(vertexOffset, indexOffset) {
-            return _super.call(this, vertexOffset, indexOffset, SEMICIRCLE_VERTEX_COUNT, SEMICIRCLE_INDEX_COUNT) || this;
+        function BuilderSemicircle(buffer, vertexOffset, indexOffset) {
+            return _super.call(this, buffer, vertexOffset, indexOffset, SEMICIRCLE_VERTEX_COUNT, SEMICIRCLE_INDEX_COUNT) || this;
         }
-        BuilderSemicircle.prototype.init = function (buffer) {
+        BuilderSemicircle.prototype.init = function () {
+            var buffer = this.buffer;
             buffer.updateClippings();
             buffer.updateIndices();
             var voffset = this.vertexOffset;
@@ -43801,7 +44372,8 @@
             buildSemicircleIndex(buffer.indices, voffset, this.indexOffset);
             this.inited |= BuilderFlag.CLIPPING_AND_INDEX;
         };
-        BuilderSemicircle.prototype.update = function (buffer, shape) {
+        BuilderSemicircle.prototype.update = function (shape) {
+            var buffer = this.buffer;
             this.updateVertexAndStep(buffer, shape);
             this.updateColorFill(buffer, shape);
             this.updateColorStroke(buffer, shape);
@@ -43867,8 +44439,8 @@
         var icount = SEMICIRCLE_INDEX_COUNT + ticount;
         if (buffer.check(voffset, ioffset, vcount, icount)) {
             return new EShapeUploadedImpl(buffer, voffset, ioffset, vcount, icount, [
-                new BuilderSemicircle(voffset, ioffset),
-                new BuilderText(voffset + SEMICIRCLE_VERTEX_COUNT, ioffset + SEMICIRCLE_INDEX_COUNT, tvcount, ticount)
+                new BuilderSemicircle(buffer, voffset, ioffset),
+                new BuilderText(buffer, voffset + SEMICIRCLE_VERTEX_COUNT, ioffset + SEMICIRCLE_INDEX_COUNT, tvcount, ticount)
             ]).init(shape);
         }
         return null;
@@ -43937,17 +44509,19 @@
      */
     var BuilderTriangle = /** @class */ (function (_super) {
         __extends(BuilderTriangle, _super);
-        function BuilderTriangle() {
-            return _super !== null && _super.apply(this, arguments) || this;
+        function BuilderTriangle(buffer, vertexOffset, indexOffset) {
+            return _super.call(this, buffer, vertexOffset, indexOffset, TRIANGLE_VERTEX_COUNT, TRIANGLE_INDEX_COUNT) || this;
         }
-        BuilderTriangle.prototype.init = function (buffer) {
+        BuilderTriangle.prototype.init = function () {
+            var buffer = this.buffer;
             buffer.updateClippings();
             buffer.updateIndices();
             buildTriangleClipping(buffer.clippings, this.vertexOffset);
             buildTriangleIndex(buffer.indices, this.vertexOffset, this.indexOffset);
             this.inited |= BuilderFlag.CLIPPING_AND_INDEX;
         };
-        BuilderTriangle.prototype.update = function (buffer, shape) {
+        BuilderTriangle.prototype.update = function (shape) {
+            var buffer = this.buffer;
             this.updateVertexStepAndUv(buffer, shape);
             this.updateColorFill(buffer, shape);
             this.updateColorStroke(buffer, shape);
@@ -44009,8 +44583,8 @@
         var icount = TRIANGLE_INDEX_COUNT + ticount;
         if (buffer.check(voffset, ioffset, vcount, icount)) {
             return new EShapeUploadedImpl(buffer, voffset, ioffset, vcount, icount, [
-                new BuilderTriangle(voffset, ioffset, vcount - tvcount, icount - ticount),
-                new BuilderText(voffset + TRIANGLE_VERTEX_COUNT, ioffset + TRIANGLE_INDEX_COUNT, tvcount, ticount)
+                new BuilderTriangle(buffer, voffset, ioffset),
+                new BuilderText(buffer, voffset + TRIANGLE_VERTEX_COUNT, ioffset + TRIANGLE_INDEX_COUNT, tvcount, ticount)
             ]).init(shape);
         }
         return null;
@@ -44039,18 +44613,20 @@
      */
     var BuilderTriangleRounded = /** @class */ (function (_super) {
         __extends(BuilderTriangleRounded, _super);
-        function BuilderTriangleRounded(vertexOffset, indexOffset, vertexCount, indexCount) {
-            var _this = _super.call(this, vertexOffset, indexOffset, vertexCount, indexCount) || this;
+        function BuilderTriangleRounded(buffer, vertexOffset, indexOffset) {
+            var _this = _super.call(this, buffer, vertexOffset, indexOffset, TRIANGLE_ROUNDED_VERTEX_COUNT, TRIANGLE_ROUNDED_INDEX_COUNT) || this;
             _this.radius = 0;
             _this.corner = 0;
             return _this;
         }
-        BuilderTriangleRounded.prototype.init = function (buffer) {
+        BuilderTriangleRounded.prototype.init = function () {
+            var buffer = this.buffer;
             buffer.updateIndices();
             buildTriangleRoundedIndex(buffer.indices, this.vertexOffset, this.indexOffset);
             this.inited |= BuilderFlag.INDEX;
         };
-        BuilderTriangleRounded.prototype.update = function (buffer, shape) {
+        BuilderTriangleRounded.prototype.update = function (shape) {
+            var buffer = this.buffer;
             this.updateVertexClippingStepAndUv(buffer, shape);
             this.updateColorFill(buffer, shape);
             this.updateColorStroke(buffer, shape);
@@ -44126,8 +44702,8 @@
         var icount = TRIANGLE_ROUNDED_INDEX_COUNT + ticount;
         if (buffer.check(voffset, ioffset, vcount, icount)) {
             return new EShapeUploadedImpl(buffer, voffset, ioffset, vcount, icount, [
-                new BuilderTriangleRounded(voffset, ioffset, vcount - tvcount, icount - ticount),
-                new BuilderText(voffset + TRIANGLE_ROUNDED_VERTEX_COUNT, ioffset + TRIANGLE_ROUNDED_INDEX_COUNT, tvcount, ticount)
+                new BuilderTriangleRounded(buffer, voffset, ioffset),
+                new BuilderText(buffer, voffset + TRIANGLE_ROUNDED_VERTEX_COUNT, ioffset + TRIANGLE_ROUNDED_INDEX_COUNT, tvcount, ticount)
             ]).init(shape);
         }
         return null;
@@ -44338,9 +44914,9 @@
             var shortcuts = this._shortcuts;
             if (shortcuts != null && 0 < shortcuts.length) {
                 var shortcut = shortcuts[0];
-                var shortcutText = this.newText();
+                var shortcutText = this.newShortcutText();
                 this._shortcutText = shortcutText;
-                this.snippet.add(this._shortcutText, true);
+                this.snippet.add(shortcutText, true);
                 shortcutText.text = UtilKeyboardEvent.toString(shortcut);
             }
             else {
@@ -44348,6 +44924,10 @@
             }
             this._shortcutMargin = this.theme.getShortcutTextMargin();
         };
+        DMenuItemText.prototype.newShortcutText = function () {
+            var _a, _b;
+            return new DDynamicText(new DDynamicTextStyle(this, this.theme, (_b = (_a = this._options) === null || _a === void 0 ? void 0 : _a.text) === null || _b === void 0 ? void 0 : _b.style));
+        };
         DMenuItemText.prototype.updateShortcutText = function () {
             var text = this._shortcutText;
             var margin = this._shortcutMargin;
@@ -44372,8 +44952,7 @@
                 text.position.set(textX, textY);
             }
         };
-        DMenuItemText.prototype.updateTextColor = function (text) {
-            _super.prototype.updateTextColor.call(this, text);
+        DMenuItemText.prototype.updateShortcutColor = function () {
             var shortcutText = this._shortcutText;
             if (shortcutText != null) {
                 var theme = this.theme;
@@ -44382,8 +44961,9 @@
                 shortcutText.alpha = theme.getShortcutAlpha(state);
             }
         };
-        DMenuItemText.prototype.updateText = function () {
-            _super.prototype.updateText.call(this);
+        DMenuItemText.prototype.onReflow = function () {
+            _super.prototype.onReflow.call(this);
+            this.updateShortcutColor();
             this.updateShortcutText();
         };
         DMenuItemText.prototype.getType = function () {
@@ -46083,9 +46663,9 @@
      */
     var createImageSdf = function (dataUrl, convertToSdf) {
         if (convertToSdf) {
-            return toImageElement(dataUrl).then(function (imageElement) {
+            return toImageElement(dataUrl).then(function (image) {
                 var generator = DynamicSDFFontGenerator.getInstance().init();
-                generator.updateTexture(imageElement);
+                generator.updateTexture(image.width, image.height, image.source);
                 generator.render();
                 var canvas = document.createElement("canvas");
                 generator.read(canvas);
@@ -46093,8 +46673,8 @@
             });
         }
         else {
-            return toImageElement(dataUrl).then(function (imageElement) {
-                return new EShapeImageSdf(imageElement);
+            return toImageElement(dataUrl).then(function (image) {
+                return new EShapeImageSdf(image);
             });
         }
     };
@@ -46104,8 +46684,8 @@
      * SPDX-License-Identifier: Apache-2.0
      */
     var createImage = function (dataUrl) {
-        return toImageElement(dataUrl).then(function (imageElement) {
-            return new EShapeImage(imageElement);
+        return toImageElement(dataUrl).then(function (image) {
+            return new EShapeImage(image);
         });
     };
 
@@ -52843,7 +53423,7 @@
                     var view = DPickerColorGradientView.from(1, 10, checkers, texture);
                     this._view = view;
                     view.setRectangle(0, 0, 0, texture.width, texture.height);
-                    view.setData(0, this._textValueComputed);
+                    view.setData(0, this.text.computed);
                     view.update();
                     this.image = view;
                 }
@@ -52852,13 +53432,13 @@
         DButtonColorGradient.prototype.onActivate = function (e) {
             var _this = this;
             _super.prototype.onActivate.call(this, e);
-            var value = this._textValueComputed;
+            var computed = this.text.computed;
             var dialog = this.dialog;
-            if (value != null) {
-                dialog.value.fromObject(value);
+            if (computed != null) {
+                dialog.value.fromObject(computed);
             }
             dialog.open(this).then(function (newValue) {
-                _this.onValueChange(newValue, _this.toClone(value));
+                _this.onValueChange(newValue, _this.toClone(computed));
             });
         };
         DButtonColorGradient.prototype.toClone = function (value) {
@@ -52869,17 +53449,15 @@
             return result;
         };
         DButtonColorGradient.prototype.onValueChange = function (newValue, oldValue) {
-            var value = this._textValueComputed;
-            if (value != null) {
-                value.fromObject(newValue);
+            var computed = this.text.computed;
+            if (computed != null) {
+                computed.fromObject(newValue);
             }
             var view = this._view;
             if (view != null) {
                 view.update();
             }
-            this.onTextChange();
-            this.createOrUpdateText();
-            DApplications.update(this);
+            this.text.compute(true);
             this.emit("change", newValue, oldValue, this);
         };
         Object.defineProperty(DButtonColorGradient.prototype, "dialog", {
@@ -52912,7 +53490,7 @@
         };
         Object.defineProperty(DButtonColorGradient.prototype, "value", {
             get: function () {
-                return this._textValueComputed;
+                return this.text.computed;
             },
             enumerable: false,
             configurable: true
@@ -53001,14 +53579,14 @@
             var _this = this;
             _super.prototype.onActivate.call(this, e);
             var dialog = this.dialog;
-            var value = this._textValueComputed;
-            if (value != null) {
+            var computed = this.text.computed;
+            if (computed != null) {
                 var dialogCurrent = dialog.current;
-                dialogCurrent.color = value.color;
-                dialogCurrent.alpha = value.alpha;
+                dialogCurrent.color = computed.color;
+                dialogCurrent.alpha = computed.alpha;
                 var dialogNew = dialog.new;
-                dialogNew.color = value.color;
-                dialogNew.alpha = value.alpha;
+                dialogNew.color = computed.color;
+                dialogNew.alpha = computed.alpha;
             }
             dialog.open(this).then(function () {
                 _this.onValueChange(_this.toClone(dialog.new), _this.toClone(dialog.current));
@@ -53021,10 +53599,10 @@
             };
         };
         DButtonColor.prototype.onValueChange = function (newValue, oldValue) {
-            var value = this._textValueComputed;
-            if (value != null) {
-                value.color = newValue.color;
-                value.alpha = newValue.alpha;
+            var computed = this.text.computed;
+            if (computed != null) {
+                computed.color = newValue.color;
+                computed.alpha = newValue.alpha;
             }
             this.onColorChange();
             this.emit("change", newValue, oldValue, this);
@@ -53032,16 +53610,12 @@
         DButtonColor.prototype.onColorChange = function () {
             var image = this.image.get(0);
             if (image != null) {
-                var value = this._textValueComputed;
-                if (value != null) {
-                    image.tint.color = value.color;
+                var computed = this.text.computed;
+                if (computed != null) {
+                    image.tint.color = computed.color;
                 }
             }
-            this.updateTextForcibly();
-        };
-        DButtonColor.prototype.updateTextForcibly = function () {
-            this.onTextChange();
-            this.createOrUpdateText();
+            this.text.compute(true);
         };
         Object.defineProperty(DButtonColor.prototype, "dialog", {
             get: function () {
@@ -53085,13 +53659,14 @@
         });
         DButtonColor.prototype.newValue = function () {
             var _this = this;
-            var value = this._textValueComputed;
-            return new DPickerColorAndAlpha(value, function (color) {
-                value.color = color;
+            var text = this.text;
+            var computed = text.computed;
+            return new DPickerColorAndAlpha(computed, function (color) {
+                computed.color = color;
                 _this.onColorChange();
             }, function (alpha) {
-                value.alpha = alpha;
-                _this.updateTextForcibly();
+                computed.alpha = alpha;
+                text.compute(true);
             });
         };
         DButtonColor.prototype.getType = function () {
@@ -53128,7 +53703,7 @@
             var _this = this;
             var _a, _b;
             _super.prototype.onActivate.call(this, e);
-            var value = (_b = (_a = this._textValueComputed) === null || _a === void 0 ? void 0 : _a.getTime()) !== null && _b !== void 0 ? _b : Date.now();
+            var value = (_b = (_a = this.text.computed) === null || _a === void 0 ? void 0 : _a.getTime()) !== null && _b !== void 0 ? _b : Date.now();
             var dialog = this.dialog;
             dialog.current = new Date(value);
             dialog.new = new Date(value);
@@ -53172,11 +53747,11 @@
         Object.defineProperty(DButtonDate.prototype, "value", {
             get: function () {
                 var _a;
-                return (_a = this._textValueComputed) !== null && _a !== void 0 ? _a : new Date();
+                return (_a = this.text.computed) !== null && _a !== void 0 ? _a : new Date();
             },
             set: function (value) {
-                var textValueComputed = this._textValueComputed;
-                if (textValueComputed === undefined || textValueComputed.getTime() !== value.getTime()) {
+                var computed = this.text.computed;
+                if (computed === undefined || computed.getTime() !== value.getTime()) {
                     this.text = value;
                 }
             },
@@ -53272,7 +53847,7 @@
             var _this = this;
             var _a, _b;
             _super.prototype.onActivate.call(this, e);
-            var value = (_b = (_a = this._textValueComputed) === null || _a === void 0 ? void 0 : _a.getTime()) !== null && _b !== void 0 ? _b : Date.now();
+            var value = (_b = (_a = this.text.computed) === null || _a === void 0 ? void 0 : _a.getTime()) !== null && _b !== void 0 ? _b : Date.now();
             var dialog = this.dialog;
             dialog.current = new Date(value);
             dialog.new = new Date(value);
@@ -53325,11 +53900,11 @@
         Object.defineProperty(DButtonDatetime.prototype, "value", {
             get: function () {
                 var _a;
-                return (_a = this._textValueComputed) !== null && _a !== void 0 ? _a : new Date();
+                return (_a = this.text.computed) !== null && _a !== void 0 ? _a : new Date();
             },
             set: function (value) {
-                var textValueComputed = this._textValueComputed;
-                if (textValueComputed === undefined || textValueComputed.getTime() !== value.getTime()) {
+                var computed = this.text.computed;
+                if (computed === undefined || computed.getTime() !== value.getTime()) {
                     this.text = value;
                 }
             },
@@ -56414,7 +56989,7 @@
             var _a;
             _super.prototype.onActivate.call(this, e);
             var dialog = this.dialog;
-            var oldValue = (_a = this._textValueComputed) !== null && _a !== void 0 ? _a : null;
+            var oldValue = (_a = this.text.computed) !== null && _a !== void 0 ? _a : null;
             this._dialogSetter(dialog, oldValue);
             dialog.open(this).then(function () {
                 var newValue = _this._dialogGetter(dialog);
@@ -56447,7 +57022,7 @@
         Object.defineProperty(DButtonSelect.prototype, "value", {
             get: function () {
                 var _a;
-                return (_a = this._textValueComputed) !== null && _a !== void 0 ? _a : null;
+                return (_a = this.text.computed) !== null && _a !== void 0 ? _a : null;
             },
             set: function (value) {
                 this.text = value;
@@ -56474,7 +57049,7 @@
             var _this = this;
             var _a, _b;
             _super.prototype.onActivate.call(this, e);
-            var value = (_b = (_a = this._textValueComputed) === null || _a === void 0 ? void 0 : _a.getTime()) !== null && _b !== void 0 ? _b : Date.now();
+            var value = (_b = (_a = this.text.computed) === null || _a === void 0 ? void 0 : _a.getTime()) !== null && _b !== void 0 ? _b : Date.now();
             var dialog = this.dialog;
             dialog.current = new Date(value);
             dialog.new = new Date(value);
@@ -56526,11 +57101,11 @@
         Object.defineProperty(DButtonTime.prototype, "value", {
             get: function () {
                 var _a;
-                return (_a = this._textValueComputed) !== null && _a !== void 0 ? _a : new Date();
+                return (_a = this.text.computed) !== null && _a !== void 0 ? _a : new Date();
             },
             set: function (value) {
-                var textValueComputed = this._textValueComputed;
-                if (textValueComputed === undefined || textValueComputed.getTime() !== value.getTime()) {
+                var computed = this.text.computed;
+                if (computed === undefined || computed.getTime() !== value.getTime()) {
                     this.text = value;
                 }
             },
@@ -65690,7 +66265,7 @@
             _this._delayDone = (_a = delay === null || delay === void 0 ? void 0 : delay.done) !== null && _a !== void 0 ? _a : theme.getDoneDelay();
             var delayClose = delay === null || delay === void 0 ? void 0 : delay.close;
             _this._delayClose = delayClose !== undefined ? delayClose : theme.getCloseDelay();
-            _this._messageText = _this.message.text;
+            _this._messageText = _this.message.text.value;
             return _this;
         }
         DDialogProcessing.prototype.newMessage = function (options) {
@@ -66048,7 +66623,7 @@
             }
             state.unlock();
             if (this._isTextEnabled) {
-                this._textValueBackup = parent.text;
+                this._textValueBackup = parent.text.value;
                 var textValue = this._textValue;
                 if (textValue !== undefined) {
                     parent.text = textValue;
@@ -69190,7 +69765,7 @@
             var selecting = this._column.selecting;
             var dialog = selecting.dialog;
             if (dialog) {
-                var oldValue_1 = (_a = this._textValueComputed) !== null && _a !== void 0 ? _a : null;
+                var oldValue_1 = (_a = this.text.computed) !== null && _a !== void 0 ? _a : null;
                 selecting.setter(dialog, oldValue_1);
                 dialog.open(this).then(function () {
                     var newValue = selecting.getter(dialog);
@@ -69247,11 +69822,8 @@
         });
         Object.defineProperty(DTableBodyCellSelectDialog.prototype, "value", {
             get: function () {
-                var textValueComputed = this._textValueComputed;
-                if (textValueComputed !== undefined) {
-                    return textValueComputed;
-                }
-                return null;
+                var _a;
+                return (_a = this.text.computed) !== null && _a !== void 0 ? _a : null;
             },
             set: function (value) {
                 this.text = value;
@@ -69263,10 +69835,7 @@
             this._row = row;
             this._rowIndex = rowIndex;
             if (forcibly) {
-                this._textValue = value;
-                this._textValueComputed = value;
-                this.onTextChange();
-                this.createOrUpdateText();
+                this.text.setValue(value, true);
             }
             else {
                 this.text = value;
@@ -69395,7 +69964,7 @@
                 promise().then(function (newValue) {
                     var _a;
                     if (_this._isSyncEnabled) {
-                        var oldValue = (_a = _this._textValueComputed) !== null && _a !== void 0 ? _a : null;
+                        var oldValue = (_a = _this.text.computed) !== null && _a !== void 0 ? _a : null;
                         if (newValue !== oldValue) {
                             _this.text = newValue;
                             _this.onValueChange(newValue, oldValue);
@@ -69448,11 +70017,8 @@
         });
         Object.defineProperty(DTableBodyCellSelectPromise.prototype, "value", {
             get: function () {
-                var textValueComputed = this._textValueComputed;
-                if (textValueComputed !== undefined) {
-                    return textValueComputed;
-                }
-                return null;
+                var _a;
+                return (_a = this.text.computed) !== null && _a !== void 0 ? _a : null;
             },
             set: function (value) {
                 this.text = value;
@@ -69464,10 +70030,7 @@
             this._row = row;
             this._rowIndex = rowIndex;
             if (forcibly) {
-                this._textValue = value;
-                this._textValueComputed = value;
-                this.onTextChange();
-                this.createOrUpdateText();
+                this.text.setValue(value, true);
             }
             else {
                 this.text = value;
@@ -69922,24 +70485,21 @@
             this._rowIndex = rowIndex;
             if (value instanceof Date) {
                 if (forcibly) {
-                    this._textValue = value;
-                    this._textValueComputed = value;
-                    this.onTextChange();
-                    this.createOrUpdateText();
+                    this.text.setValue(value, true);
                 }
                 else {
                     this.text = value;
                 }
             }
             else if (isNumber(value)) {
-                var textValueComputed = this._textValueComputed;
-                if (textValueComputed === undefined) {
+                var text = this.text;
+                var computed = text.computed;
+                if (computed === undefined) {
                     this.text = new Date(value);
                 }
-                else if (textValueComputed.getTime() !== value) {
-                    textValueComputed.setTime(value);
-                    this.onTextChange();
-                    this.createOrUpdateText();
+                else if (computed.getTime() !== value) {
+                    computed.setTime(value);
+                    text.compute(true);
                 }
             }
             DTableBodyCells.set(this, row, columnIndex, this._column);
@@ -70015,24 +70575,21 @@
             this._rowIndex = rowIndex;
             if (value instanceof Date) {
                 if (forcibly) {
-                    this._textValue = value;
-                    this._textValueComputed = value;
-                    this.onTextChange();
-                    this.createOrUpdateText();
+                    this.text.setValue(value, true);
                 }
                 else {
                     this.text = value;
                 }
             }
             else if (isNumber(value)) {
-                var textValueComputed = this._textValueComputed;
-                if (textValueComputed == null) {
+                var text = this.text;
+                var computed = text.computed;
+                if (computed == null) {
                     this.text = new Date(value);
                 }
-                else if (textValueComputed.getTime() !== value) {
-                    textValueComputed.setTime(value);
-                    this.onTextChange();
-                    this.createOrUpdateText();
+                else if (computed.getTime() !== value) {
+                    computed.setTime(value);
+                    text.compute(true);
                 }
             }
             DTableBodyCells.set(this, row, columnIndex, this._column);
@@ -70958,24 +71515,21 @@
             this._rowIndex = rowIndex;
             if (value instanceof Date) {
                 if (forcibly) {
-                    this._textValue = value;
-                    this._textValueComputed = value;
-                    this.onTextChange();
-                    this.createOrUpdateText();
+                    this.text.setValue(value, true);
                 }
                 else {
                     this.text = value;
                 }
             }
             else if (isNumber(value)) {
-                var textValueComputed = this._textValueComputed;
-                if (textValueComputed == null) {
+                var text = this.text;
+                var computed = text.computed;
+                if (computed == null) {
                     this.text = new Date(value);
                 }
-                else if (textValueComputed.getTime() !== value) {
-                    textValueComputed.setTime(value);
-                    this.onTextChange();
-                    this.createOrUpdateText();
+                else if (computed.getTime() !== value) {
+                    computed.setTime(value);
+                    text.compute(true);
                 }
             }
             DTableBodyCells.set(this, row, columnIndex, this._column);
@@ -76766,7 +77320,7 @@
         buildImageSdfUv: buildImageSdfUv,
         toLineOfAnyPointCount: toLineOfAnyPointCount,
         buildLineOfAnyColor: buildLineOfAnyColor,
-        toPointsCount: toPointsCount,
+        toPointCount: toPointCount,
         toLinePointCount: toLinePointCount,
         toLineVertexCount: toLineVertexCount,
         toLineIndexCount: toLineIndexCount,