@wcardinal/wcardinal-ui 0.404.0 → 0.406.0

package/dist/wcardinal-ui.cjs.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
 
@@ -71,7 +71,6 @@ var EShapeUploadeds = {};
  */
 var EShapeUploadedImpl = /** @class */ (function () {
     function EShapeUploadedImpl(buffer, vertexOffset, indexOffset, vertexCount, indexCount, builders) {
-        this.buffer = buffer;
         this._builders = builders;
         this._vertexOffset = vertexOffset;
         this._indexOffset = indexOffset;
@@ -80,20 +79,38 @@ var EShapeUploadedImpl = /** @class */ (function () {
     }
     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;
@@ -104,9 +121,6 @@ var EShapeUploadedImpl = /** @class */ (function () {
         }
         return true;
     };
-    EShapeUploadedImpl.prototype.getBuffer = function () {
-        return this.buffer;
-    };
     EShapeUploadedImpl.prototype.getVertexOffset = function () {
         return this._vertexOffset;
     };
@@ -489,7 +503,7 @@ var TEXT_INDEX_COUNT_SHIFT = 1;
 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) {
@@ -1486,7 +1500,8 @@ var EShapeStrokeSide = {
  * 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;
@@ -1506,6 +1521,26 @@ var BuilderBase = /** @class */ (function () {
         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;
     };
@@ -2108,6 +2143,13 @@ var EShapeBarPoints = /** @class */ (function () {
         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();
@@ -4510,21 +4552,6 @@ var hitTestBBox = function (x, y, ax, ay) {
     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
@@ -4925,16 +4952,6 @@ var EShapeBase = /** @class */ (function (_super) {
             }
         }
     };
-    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;
@@ -5083,20 +5100,6 @@ var EShapeBase = /** @class */ (function (_super) {
         }
         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);
@@ -7781,6 +7784,7 @@ var EShapeTextImpl = /** @class */ (function () {
         this._parent = parent;
         this._enable = true;
         this._value = value;
+        this._plength = this._length = value.length;
         this._color = color;
         this._alpha = alpha;
         this._family = family;
@@ -7816,39 +7820,60 @@ var EShapeTextImpl = /** @class */ (function () {
         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;
@@ -7982,7 +8007,18 @@ var EShapeTextImpl = /** @class */ (function () {
         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;
@@ -8081,6 +8117,21 @@ var EShapeTextImpl = /** @class */ (function () {
     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
@@ -8149,11 +8200,9 @@ var EShapePrimitive = /** @class */ (function (_super) {
             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) {
@@ -8164,6 +8213,20 @@ var EShapePrimitive = /** @class */ (function (_super) {
         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));
 
@@ -8520,22 +8583,24 @@ var EShapeBar = /** @class */ (function (_super) {
  */
 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);
@@ -8605,7 +8670,8 @@ var BuilderBar = /** @class */ (function (_super) {
  * 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;
@@ -8640,10 +8706,11 @@ var BuilderText = /** @class */ (function () {
         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);
@@ -8652,21 +8719,51 @@ var BuilderText = /** @class */ (function () {
             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;
@@ -8835,8 +8932,8 @@ var createBarUploaded = function (buffer, shape, voffset, ioffset, antialiasWeig
     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;
@@ -17841,6 +17938,9 @@ var EShapeGroupViewer = /** @class */ (function (_super) {
         enumerable: false,
         configurable: true
     });
+    EShapeGroupViewer.prototype.serializeGradient = function (manager) {
+        return -1;
+    };
     Object.defineProperty(EShapeGroupViewer.prototype, "radius", {
         get: function () {
             return 0;
@@ -17861,6 +17961,9 @@ var EShapeGroupViewer = /** @class */ (function (_super) {
         enumerable: false,
         configurable: true
     });
+    EShapeGroupViewer.prototype.serializeImage = function (manager) {
+        return -1;
+    };
     Object.defineProperty(EShapeGroupViewer.prototype, "points", {
         get: function () {
             return undefined;
@@ -19753,6 +19856,8 @@ var EShapeLinePoints = /** @class */ (function () {
         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;
@@ -19764,7 +19869,14 @@ var EShapeLinePoints = /** @class */ (function () {
     }
     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
@@ -19821,7 +19933,6 @@ var EShapeLinePoints = /** @class */ (function () {
         if (this._formatter || this._style & EShapePointsStyle.FORMATTER_MASK) {
             var uploaded = parent.uploaded;
             if (uploaded && !uploaded.isCompatible(parent)) {
-                parent.uploaded = undefined;
                 parent.toDirty();
             }
         }
@@ -19925,6 +20036,7 @@ var EShapeLinePoints = /** @class */ (function () {
                     if (result == null) {
                         result = {
                             length: 0,
+                            plength: 0,
                             values: [],
                             segments: [],
                             boundary: [0, 0, 0, 0],
@@ -19935,6 +20047,9 @@ var EShapeLinePoints = /** @class */ (function () {
                     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 {
@@ -20024,6 +20139,11 @@ var EShapeLinePoints = /** @class */ (function () {
                     }
                 }
             }
+            var newLength = newValuesLength >> 1;
+            this._length = newLength;
+            if (this._plength < newLength) {
+                this._plength = newLength;
+            }
         }
         // Segments
         if (newSegments != null) {
@@ -20089,7 +20209,6 @@ var EShapeLinePoints = /** @class */ (function () {
                     parent_1.updateUploaded();
                 }
                 else {
-                    parent_1.uploaded = undefined;
                     parent_1.toDirty();
                 }
             }
@@ -21051,12 +21170,10 @@ var DynamicSDFFontGenerator = /** @class */ (function () {
             }
         }
     };
-    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;
@@ -21419,7 +21536,7 @@ var DynamicSDFFontAtlas = /** @class */ (function () {
                         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;
@@ -21570,9 +21687,9 @@ var DynamicSDFFontAtlases = /** @class */ (function () {
  */
 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) {
@@ -21581,12 +21698,21 @@ var DynamicAtlasItemImage = /** @class */ (function (_super) {
         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));
@@ -21771,12 +21897,6 @@ var EShapeBuffer = /** @class */ (function () {
             }
         }
     };
-    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();
@@ -21785,28 +21905,18 @@ var EShapeBuffer = /** @class */ (function () {
         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);
@@ -21955,24 +22065,18 @@ var EShapeRenderer = /** @class */ (function (_super) {
     };
     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 {
@@ -22140,7 +22244,7 @@ var EShapeContainer = /** @class */ (function (_super) {
         _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;
@@ -28857,345 +28961,6 @@ var DDynamicTextGeometry = /** @class */ (function (_super) {
     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
@@ -29273,13 +29038,11 @@ var UtilFont = /** @class */ (function () {
  */
 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 = "";
@@ -29303,15 +29066,21 @@ var DDynamicText = /** @class */ (function (_super) {
         };
         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;
@@ -29504,203 +29273,737 @@ var DDynamicText = /** @class */ (function (_super) {
  * 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()
-    };
-};
-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, "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);
     };
-};
-/**
- * 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, "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(DTextBase.prototype, "text", {
+    Object.defineProperty(DDynamicTextStyle.prototype, "fontFamily", {
         get: function () {
-            return this._textValue;
+            return this._fontFamily;
         },
-        set: function (text) {
-            if (this._textValue !== text) {
-                this._textValue = text;
-                this.updateTextValue();
+        set: function (fontFamily) {
+            if (this._fontFamily !== fontFamily) {
+                this._fontFamily = fontFamily;
+                this.onChange();
             }
         },
         enumerable: false,
         configurable: true
     });
-    DTextBase.prototype.onTextChange = function () {
-        // DO NOTHING
+    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);
+        }
     };
-    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.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();
             }
-            else {
-                return textValue;
+        },
+        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 this.theme.getTextValue(this.state);
+        return isChanged;
     };
-    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);
-                }
+    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 if (text.text !== formatted) {
-                text.text = formatted;
-                this.toDirty();
-                DApplications.update(this);
+        },
+        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;
             }
         }
-        else {
-            var text = this._text;
-            if (text != null && text.text !== "") {
-                text.text = "";
-                this.toDirty();
-                DApplications.update(this);
+        if (horizontal != null) {
+            horizontal = toEnum(horizontal, DAlignHorizontal);
+            if (this._horizontal !== horizontal) {
+                this._horizontal = horizontal;
+                isChanged = true;
             }
         }
+        if (isChanged) {
+            this.onChange();
+        }
+        return this;
     };
-    DTextBase.prototype.newText = function () {
-        return new DDynamicText(this._textStyle);
+    DTextPieceAlignImpl.prototype.onChange = function () {
+        var parent = this._parent;
+        parent.toDirty();
+        DApplications.update(parent);
     };
-    DTextBase.prototype.getOverflowMask = function () {
-        if (this._isOverflowMaskEnabled) {
-            if (this._overflowMask == null) {
-                this._overflowMask = new DBaseOverflowMaskSimple(this);
-                this._reflowable.add(this._overflowMask);
-                this.toDirty();
+    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();
             }
-            return this._overflowMask;
+        },
+        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);
         }
-        return null;
+        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;
     };
-    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;
+    DTextPieceImpl.prototype.setValue = function (value, forcibly) {
+        if (forcibly || this._value !== value) {
+            this._value = value;
+            this.onValueChange(forcibly);
         }
-        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;
+    };
+    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);
             }
-            else {
-                textX = width - textWidth - pright;
+        }
+    };
+    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);
             }
         }
-        var textY = 0;
-        var ptop = padding.getTop();
-        var alignVertical = align.vertical;
-        if (auto.height.isOn || alignVertical === DAlignVertical.TOP) {
-            textY = ptop;
+    };
+    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 {
+            // 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 if (object.text !== formatted) {
+                object.text = formatted;
+                return true;
+            }
         }
         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);
@@ -29712,10 +30015,10 @@ var DTextBase = /** @class */ (function (_super) {
                 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);
@@ -29727,57 +30030,144 @@ var DTextBase = /** @class */ (function (_super) {
                 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;
+        }
+        else {
+            return null;
         }
-        this._isTextVisible = false;
+    };
+    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 {
@@ -29791,7 +30181,6 @@ var DTextBase = /** @class */ (function (_super) {
         // Text
         var text = this._text;
         if (text) {
-            this._text = null;
             text.destroy();
         }
         // Overflow mask
@@ -30423,7 +30812,7 @@ var DImagePieceContainerImpl = /** @class */ (function () {
         }
         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];
@@ -30433,6 +30822,54 @@ var DImagePieceContainerImpl = /** @class */ (function () {
             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);
@@ -30507,24 +30944,13 @@ var DImageBase = /** @class */ (function (_super) {
         _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) {
@@ -31813,16 +32239,16 @@ var DInput = /** @class */ (function (_super) {
                 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);
@@ -31841,7 +32267,7 @@ var DInput = /** @class */ (function (_super) {
     };
     Object.defineProperty(DInput.prototype, "value", {
         get: function () {
-            return this._textValueComputed;
+            return this.text.computed;
         },
         set: function (value) {
             this.text = value;
@@ -31849,9 +32275,13 @@ var DInput = /** @class */ (function (_super) {
         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);
@@ -35110,7 +35540,7 @@ var imageElementCache = {};
 var toImageElement = function (dataUrl) {
     var cachedImageElement = imageElementCache[dataUrl];
     if (cachedImageElement != null) {
-        if (cachedImageElement instanceof HTMLImageElement) {
+        if ("url" in cachedImageElement) {
             return Promise.resolve(cachedImageElement);
         }
         else {
@@ -35121,8 +35551,14 @@ var toImageElement = function (dataUrl) {
         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();
@@ -36237,18 +36673,20 @@ var buildRectangleRoundedUv = function (uvs, voffset, textureUvs, worldSize) {
  */
 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);
@@ -36330,8 +36768,8 @@ var createRectangleRoundedUploaded = function (buffer, shape, voffset, ioffset,
     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;
@@ -37202,10 +37640,11 @@ var buildCircleUv = function (uvs, voffset, textureUvs) {
  */
 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;
@@ -37213,7 +37652,8 @@ var BuilderCircle = /** @class */ (function (_super) {
         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);
@@ -37279,8 +37719,8 @@ var createCircleUploaded = function (buffer, shape, voffset, ioffset, antialiasW
     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;
@@ -37305,21 +37745,22 @@ var loadShapeCircle = function () {
 
 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) {
@@ -37707,24 +38148,53 @@ var buildTransformedLineClosedSegmentVertexStepAndColorFill = function (vertices
  */
 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);
@@ -37973,19 +38443,21 @@ var BuilderMarkerBase = /** @class */ (function (_super) {
  */
 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);
@@ -38090,12 +38562,13 @@ var BuilderMarkerTriangleTail = /** @class */ (function (_super) {
  */
 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;
@@ -38103,7 +38576,8 @@ var BuilderMarkerCircle = /** @class */ (function (_super) {
         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);
@@ -38211,20 +38685,27 @@ var BuilderMarkerCircleTail = /** @class */ (function (_super) {
  * 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) {
@@ -38654,17 +39135,19 @@ var buildRectangleUv = function (uvs, voffset, textureUvs, worldSize) {
  */
 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);
@@ -38803,31 +39286,31 @@ var toMarkerIndexCount = function (type) {
     }
     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
@@ -38864,10 +39347,10 @@ var createLineUploaded = function (buffer, shape, voffset, ioffset, antialiasWei
     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;
@@ -39366,15 +39849,17 @@ var loadShapeConnectorLine = function () {
  */
 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);
@@ -39447,8 +39932,8 @@ var createRectanglePivotedUploaded = function (buffer, shape, voffset, ioffset,
     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;
@@ -39466,7 +39951,7 @@ var createGroupUploaded = function (buffer, shape, voffset, ioffset) {
     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;
@@ -39753,6 +40238,20 @@ var EShapeGroupPoints = /** @class */ (function () {
         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;
@@ -40214,6 +40713,9 @@ var EShapeGroup = /** @class */ (function (_super) {
         enumerable: false,
         configurable: true
     });
+    EShapeGroup.prototype.serializeGradient = function (manager) {
+        return -1;
+    };
     Object.defineProperty(EShapeGroup.prototype, "radius", {
         get: function () {
             var children = this.children;
@@ -40251,6 +40753,9 @@ var EShapeGroup = /** @class */ (function (_super) {
         enumerable: false,
         configurable: true
     });
+    EShapeGroup.prototype.serializeImage = function (manager) {
+        return -1;
+    };
     Object.defineProperty(EShapeGroup.prototype, "points", {
         get: function () {
             var children = this.children;
@@ -40455,15 +40960,17 @@ var loadShapeGroupShadowed = function () {
  */
 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);
@@ -40536,8 +41043,8 @@ var createRectangleUploaded = function (buffer, shape, voffset, ioffset, antiali
     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;
@@ -40772,21 +41279,23 @@ var buildImageSdfUv = function (uvs, voffset, textureUv) {
  */
 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);
@@ -40862,8 +41371,8 @@ var createImageSdfUploaded = function (buffer, shape, voffset, ioffset, antialia
     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;
@@ -40907,20 +41416,27 @@ var loadShapeImageSdf = function () {
  * 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) {
@@ -40947,8 +41463,8 @@ var createLabelUploaded = function (buffer, shape, voffset, ioffset, antialiasWe
     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;
@@ -41084,7 +41600,7 @@ var buildNullUv = function (uvs, voffset, vcount) {
 };
 
 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) {
@@ -41138,8 +41654,8 @@ var buildLineOfAnyColor = function (voffset, vcountPerPoint, point, pointCount,
  */
 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;
@@ -41147,10 +41663,39 @@ var BuilderLineOfAny = /** @class */ (function (_super) {
         _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) {
@@ -41162,7 +41707,9 @@ var BuilderLineOfAny = /** @class */ (function (_super) {
         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;
@@ -41637,6 +42184,8 @@ var EShapeLineOfAnyPointsImpl = /** @class */ (function () {
         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);
@@ -41645,7 +42194,14 @@ var EShapeLineOfAnyPointsImpl = /** @class */ (function () {
     }
     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
@@ -41790,6 +42346,11 @@ var EShapeLineOfAnyPointsImpl = /** @class */ (function () {
                     isUpdated = true;
                 }
             }
+            var newLength = newValuesLength >> 1;
+            this._length = newLength;
+            if (this._plength < newLength) {
+                this._plength = newLength;
+            }
         }
         //
         if (isDirty) {
@@ -41801,7 +42362,6 @@ var EShapeLineOfAnyPointsImpl = /** @class */ (function () {
                     parent_1.updateUploaded();
                 }
                 else {
-                    parent_1.uploaded = undefined;
                     parent_1.toDirty();
                 }
             }
@@ -41876,7 +42436,8 @@ var BuilderLineOfCircles = /** @class */ (function (_super) {
     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;
@@ -41892,9 +42453,10 @@ var BuilderLineOfCircles = /** @class */ (function (_super) {
         }
         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);
@@ -42012,15 +42574,15 @@ var createLineOfAnyUploaded = function (buffer, shape, voffset, vcountPerPoint,
     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;
@@ -42103,13 +42665,14 @@ var loadShapeLineOfCircles = function () {
  */
 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;
@@ -42121,9 +42684,10 @@ var BuilderLineOfRectangleRoundeds = /** @class */ (function (_super) {
         }
         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);
@@ -42342,7 +42906,8 @@ var BuilderLineOfRectangles = /** @class */ (function (_super) {
     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;
@@ -42354,9 +42919,10 @@ var BuilderLineOfRectangles = /** @class */ (function (_super) {
         }
         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);
@@ -42967,13 +43533,14 @@ var buildTriangleRoundedUv = function (uvs, voffset, textureUvs, radius, worldSi
  */
 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;
@@ -42984,9 +43551,10 @@ var BuilderLineOfTriangleRoundeds = /** @class */ (function (_super) {
         }
         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);
@@ -43349,7 +43917,8 @@ var BuilderLineOfTriangles = /** @class */ (function (_super) {
     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;
@@ -43365,9 +43934,10 @@ var BuilderLineOfTriangles = /** @class */ (function (_super) {
         }
         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);
@@ -43573,7 +44143,7 @@ var loadShapeLineOfTriangles = function () {
  */
 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);
 };
 
@@ -43793,10 +44363,11 @@ var buildSemicircleUv = function (uvs, voffset, textureUvs) {
  */
 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;
@@ -43804,7 +44375,8 @@ var BuilderSemicircle = /** @class */ (function (_super) {
         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);
@@ -43870,8 +44442,8 @@ var createSemicircleUploaded = function (buffer, shape, voffset, ioffset, antial
     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;
@@ -43940,17 +44512,19 @@ var loadShapeSemicircle = function () {
  */
 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);
@@ -44012,8 +44586,8 @@ var createTriangleUploaded = function (buffer, shape, voffset, ioffset, antialia
     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;
@@ -44042,18 +44616,20 @@ var loadShapeTriangle = function () {
  */
 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);
@@ -44129,8 +44705,8 @@ var createTriangleRoundedUploaded = function (buffer, shape, voffset, ioffset, a
     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;
@@ -44341,9 +44917,9 @@ var DMenuItemText = /** @class */ (function (_super) {
         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 {
@@ -44351,6 +44927,10 @@ var DMenuItemText = /** @class */ (function (_super) {
         }
         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;
@@ -44375,8 +44955,7 @@ var DMenuItemText = /** @class */ (function (_super) {
             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;
@@ -44385,8 +44964,9 @@ var DMenuItemText = /** @class */ (function (_super) {
             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 () {
@@ -46086,9 +46666,9 @@ var EShapeActionValueMiscWrite = /** @class */ (function (_super) {
  */
 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);
@@ -46096,8 +46676,8 @@ var createImageSdf = function (dataUrl, convertToSdf) {
         });
     }
     else {
-        return toImageElement(dataUrl).then(function (imageElement) {
-            return new EShapeImageSdf(imageElement);
+        return toImageElement(dataUrl).then(function (image) {
+            return new EShapeImageSdf(image);
         });
     }
 };
@@ -46107,8 +46687,8 @@ var createImageSdf = function (dataUrl, convertToSdf) {
  * 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);
     });
 };
 
@@ -50161,6 +50741,12 @@ var DThemeWhiteInput = /** @class */ (function (_super) {
         }
         return DThemeWhiteConstants.BORDER_COLOR;
     };
+    DThemeWhiteInput.prototype.getOutlineColor = function (state) {
+        if (state.isInvalid) {
+            return DThemeWhiteConstants.INVALID_COLOR;
+        }
+        return _super.prototype.getOutlineColor.call(this, state);
+    };
     DThemeWhiteInput.prototype.getHeight = function () {
         return this.getLineHeight();
     };
@@ -52165,14 +52751,14 @@ var loadThemeWhitePane = function () {
  * Copyright (C) 2019 Toshiba Corporation
  * SPDX-License-Identifier: Apache-2.0
  */
-var formatter$l = function (value) {
-    if (value) {
-        var text = value.text;
-        if (isString(text)) {
-            return text;
+var formatter$l = function (item) {
+    if (item) {
+        var value = item.text.value;
+        if (isString(value)) {
+            return value;
         }
-        else if (text != null) {
-            var computed = text(value.state);
+        else if (value != null) {
+            var computed = value(item.state);
             if (computed != null) {
                 return computed;
             }
@@ -52198,19 +52784,19 @@ var DThemeWhiteSelect = /** @class */ (function (_super) {
  * Copyright (C) 2019 Toshiba Corporation
  * SPDX-License-Identifier: Apache-2.0
  */
-var formatter$k = function (values) {
-    if (values) {
+var formatter$k = function (items) {
+    if (items) {
         var result = "";
         var delimiter = "";
-        for (var i = 0, imax = values.length; i < imax; ++i) {
-            var value = values[i];
-            var text = value.text;
-            if (isString(text)) {
-                result += delimiter + text;
+        for (var i = 0, imax = items.length; i < imax; ++i) {
+            var item = items[i];
+            var value = item.text.value;
+            if (isString(value)) {
+                result += delimiter + value;
                 delimiter = ", ";
             }
-            else if (text != null) {
-                var computed = text(value.state);
+            else if (value != null) {
+                var computed = value(item.state);
                 if (computed != null) {
                     result += delimiter + computed;
                     delimiter = ", ";
@@ -61135,6 +61721,12 @@ var DThemeDarkInput = /** @class */ (function (_super) {
         }
         return null;
     };
+    DThemeDarkInput.prototype.getOutlineColor = function (state) {
+        if (state.isInvalid) {
+            return DThemeDarkConstants.INVALID_COLOR;
+        }
+        return _super.prototype.getOutlineColor.call(this, state);
+    };
     DThemeDarkInput.prototype.getHeight = function () {
         return this.getLineHeight();
     };
@@ -63137,14 +63729,14 @@ var loadThemeDarkPane = function () {
  * Copyright (C) 2019 Toshiba Corporation
  * SPDX-License-Identifier: Apache-2.0
  */
-var formatter$a = function (value) {
-    if (value) {
-        var text = value.text;
-        if (isString(text)) {
-            return text;
+var formatter$a = function (item) {
+    if (item) {
+        var value = item.text.value;
+        if (isString(value)) {
+            return value;
         }
-        else if (text != null) {
-            var computed = text(value.state);
+        else if (value != null) {
+            var computed = value(item.state);
             if (computed != null) {
                 return computed;
             }
@@ -63170,19 +63762,19 @@ var DThemeDarkSelect = /** @class */ (function (_super) {
  * Copyright (C) 2019 Toshiba Corporation
  * SPDX-License-Identifier: Apache-2.0
  */
-var formatter$9 = function (values) {
-    if (values) {
+var formatter$9 = function (items) {
+    if (items) {
         var result = "";
         var delimiter = "";
-        for (var i = 0, imax = values.length; i < imax; ++i) {
-            var value = values[i];
-            var text = value.text;
-            if (isString(text)) {
-                result += delimiter + text;
+        for (var i = 0, imax = items.length; i < imax; ++i) {
+            var item = items[i];
+            var value = item.text.value;
+            if (isString(value)) {
+                result += delimiter + value;
                 delimiter = ", ";
             }
-            else if (text != null) {
-                var computed = text(value.state);
+            else if (value != null) {
+                var computed = value(item.state);
                 if (computed != null) {
                     result += delimiter + computed;
                     delimiter = ", ";
@@ -74032,7 +74624,7 @@ var DButtonColorGradient = /** @class */ (function (_super) {
                 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;
             }
@@ -74041,13 +74633,13 @@ var DButtonColorGradient = /** @class */ (function (_super) {
     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) {
@@ -74058,17 +74650,15 @@ var DButtonColorGradient = /** @class */ (function (_super) {
         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", {
@@ -74101,7 +74691,7 @@ var DButtonColorGradient = /** @class */ (function (_super) {
     };
     Object.defineProperty(DButtonColorGradient.prototype, "value", {
         get: function () {
-            return this._textValueComputed;
+            return this.text.computed;
         },
         enumerable: false,
         configurable: true
@@ -74190,14 +74780,14 @@ var DButtonColor = /** @class */ (function (_super) {
         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));
@@ -74210,10 +74800,10 @@ var DButtonColor = /** @class */ (function (_super) {
         };
     };
     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);
@@ -74221,16 +74811,12 @@ var DButtonColor = /** @class */ (function (_super) {
     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 () {
@@ -74274,13 +74860,14 @@ var DButtonColor = /** @class */ (function (_super) {
     });
     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 () {
@@ -74317,7 +74904,7 @@ var DButtonDate = /** @class */ (function (_super) {
         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);
@@ -74361,11 +74948,11 @@ var DButtonDate = /** @class */ (function (_super) {
     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;
             }
         },
@@ -74391,7 +74978,7 @@ var DButtonDatetime = /** @class */ (function (_super) {
         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);
@@ -74444,11 +75031,11 @@ var DButtonDatetime = /** @class */ (function (_super) {
     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;
             }
         },
@@ -77533,7 +78120,7 @@ var DButtonSelect = /** @class */ (function (_super) {
         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);
@@ -77566,7 +78153,7 @@ var DButtonSelect = /** @class */ (function (_super) {
     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;
@@ -77593,7 +78180,7 @@ var DButtonTime = /** @class */ (function (_super) {
         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);
@@ -77645,11 +78232,11 @@ var DButtonTime = /** @class */ (function (_super) {
     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;
             }
         },
@@ -86789,7 +87376,7 @@ var DDialogProcessing = /** @class */ (function (_super) {
         _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) {
@@ -87147,7 +87734,7 @@ var DIndicatorProcessing = /** @class */ (function () {
         }
         state.unlock();
         if (this._isTextEnabled) {
-            this._textValueBackup = parent.text;
+            this._textValueBackup = parent.text.value;
             var textValue = this._textValue;
             if (textValue !== undefined) {
                 parent.text = textValue;
@@ -90248,7 +90835,7 @@ var DTableBodyCellSelectDialog = /** @class */ (function (_super) {
         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);
@@ -90305,11 +90892,8 @@ var DTableBodyCellSelectDialog = /** @class */ (function (_super) {
     });
     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;
@@ -90321,10 +90905,7 @@ var DTableBodyCellSelectDialog = /** @class */ (function (_super) {
         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;
@@ -90453,7 +91034,7 @@ var DTableBodyCellSelectPromise = /** @class */ (function (_super) {
             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);
@@ -90506,11 +91087,8 @@ var DTableBodyCellSelectPromise = /** @class */ (function (_super) {
     });
     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;
@@ -90522,10 +91100,7 @@ var DTableBodyCellSelectPromise = /** @class */ (function (_super) {
         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;
@@ -90980,24 +91555,21 @@ var DTableBodyCellDate = /** @class */ (function (_super) {
         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);
@@ -91073,24 +91645,21 @@ var DTableBodyCellDatetime = /** @class */ (function (_super) {
         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);
@@ -91962,24 +92531,21 @@ var DTableBodyCellTime = /** @class */ (function (_super) {
         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);
@@ -99469,8 +100035,8 @@ exports.toLineVertexCount = toLineVertexCount;
 exports.toLinkOptions = toLinkOptions;
 exports.toMerged = toMerged;
 exports.toPadded = toPadded;
+exports.toPointCount = toPointCount;
 exports.toPointsBoundary = toPointsBoundary;
-exports.toPointsCount = toPointsCount;
 exports.toResized = toResized;
 exports.toScaleInvariant = toScaleInvariant;
 exports.toSizeNormalized = toSizeNormalized;