@wcardinal/wcardinal-ui 0.405.0 → 0.406.0

package/dist/wcardinal-ui.js

@@ -1,5 +1,5 @@
 /*
- Winter Cardinal UI v0.405.0
+ Winter Cardinal UI v0.406.0
  Copyright (C) 2019 Toshiba Corporation
  SPDX-License-Identifier: Apache-2.0
 
@@ -4549,21 +4549,6 @@
         return -ax <= x && x <= +ax && -ay <= y && y <= +ay;
     };
 
-    /*
-     * Copyright (C) 2019 Toshiba Corporation
-     * SPDX-License-Identifier: Apache-2.0
-     */
-    var toGradientSerialized = function (gradient) {
-        var points = gradient.points;
-        var result = "[".concat(gradient.direction);
-        for (var i = 0, imax = points.length, j = 1; i < imax; i += 1, j += 3) {
-            var point = points[i];
-            result += ",".concat(point.color, ",").concat(point.alpha, ",").concat(point.position);
-        }
-        result += "]";
-        return result;
-    };
-
     /*
      * Copyright (C) 2019 Toshiba Corporation
      * SPDX-License-Identifier: Apache-2.0
@@ -4964,16 +4949,6 @@
                 }
             }
         };
-        Object.defineProperty(EShapeBase.prototype, "image", {
-            get: function () {
-                return this._image;
-            },
-            set: function (image) {
-                this._image = image;
-            },
-            enumerable: false,
-            configurable: true
-        });
         Object.defineProperty(EShapeBase.prototype, "points", {
             get: function () {
                 return this._points;
@@ -5122,20 +5097,6 @@
             }
             return childrenSerialized;
         };
-        EShapeBase.prototype.serializeImage = function (manager) {
-            var image = this._image;
-            return image != null ? manager.addResource(image.src) : -1;
-        };
-        EShapeBase.prototype.serializeGradient = function (manager) {
-            var gradient = this.gradient;
-            if (gradient != null) {
-                if (gradient.serialized == null) {
-                    gradient.serialized = toGradientSerialized(gradient);
-                }
-                return manager.addResource(gradient.serialized);
-            }
-            return -1;
-        };
         EShapeBase.prototype.serializeState = function (manager) {
             var state = this.state;
             return (this.interactive ? 1 : 0) | (state.isFocusable ? 0 : 2) | (state.isActive ? 4 : 0);
@@ -8153,6 +8114,21 @@
         return EShapeTextImpl;
     }());
 
+    /*
+     * Copyright (C) 2019 Toshiba Corporation
+     * SPDX-License-Identifier: Apache-2.0
+     */
+    var toGradientSerialized = function (gradient) {
+        var points = gradient.points;
+        var result = "[".concat(gradient.direction);
+        for (var i = 0, imax = points.length, j = 1; i < imax; i += 1, j += 3) {
+            var point = points[i];
+            result += ",".concat(point.color, ",").concat(point.alpha, ",").concat(point.position);
+        }
+        result += "]";
+        return result;
+    };
+
     /*
      * Copyright (C) 2019 Toshiba Corporation
      * SPDX-License-Identifier: Apache-2.0
@@ -8221,11 +8197,9 @@
                 if (this._image !== image) {
                     if (image != null) {
                         this._image = image;
-                        this.imageSrc = image.src;
                     }
                     else {
                         this._image = undefined;
-                        this.imageSrc = undefined;
                     }
                     var parent_1 = this.parent;
                     if (parent_1 != null) {
@@ -8236,6 +8210,20 @@
             enumerable: false,
             configurable: true
         });
+        EShapePrimitive.prototype.serializeImage = function (manager) {
+            var image = this._image;
+            return image != null ? manager.addResource(image.url) : -1;
+        };
+        EShapePrimitive.prototype.serializeGradient = function (manager) {
+            var gradient = this.gradient;
+            if (gradient != null) {
+                if (gradient.serialized == null) {
+                    gradient.serialized = toGradientSerialized(gradient);
+                }
+                return manager.addResource(gradient.serialized);
+            }
+            return -1;
+        };
         return EShapePrimitive;
     }(EShapeBase));
 
@@ -17947,6 +17935,9 @@
             enumerable: false,
             configurable: true
         });
+        EShapeGroupViewer.prototype.serializeGradient = function (manager) {
+            return -1;
+        };
         Object.defineProperty(EShapeGroupViewer.prototype, "radius", {
             get: function () {
                 return 0;
@@ -17967,6 +17958,9 @@
             enumerable: false,
             configurable: true
         });
+        EShapeGroupViewer.prototype.serializeImage = function (manager) {
+            return -1;
+        };
         Object.defineProperty(EShapeGroupViewer.prototype, "points", {
             get: function () {
                 return undefined;
@@ -21173,12 +21167,10 @@
                 }
             }
         };
-        DynamicSDFFontGenerator.prototype.updateTexture = function (source) {
+        DynamicSDFFontGenerator.prototype.updateTexture = function (width, height, source) {
             var gl = this._gl;
             var canvas = this._canvas;
             if (gl != null && gl.isContextLost() !== true && canvas != null) {
-                var width = source.width;
-                var height = source.height;
                 if (canvas.width !== width || canvas.height !== height) {
                     canvas.width = width;
                     canvas.height = height;
@@ -21541,7 +21533,7 @@
                             context.fillText(data.character, data.origin.x, data.origin.y);
                         }
                         // Convert to SDF font texture
-                        generator.updateTexture(canvas);
+                        generator.updateTexture(width, height, canvas);
                         generator.render();
                         generator.read(canvas);
                         return true;
@@ -21692,9 +21684,9 @@
      */
     var DynamicAtlasItemImage = /** @class */ (function (_super) {
         __extends(DynamicAtlasItemImage, _super);
-        function DynamicAtlasItemImage(image, baseTexture) {
-            var _this = _super.call(this, image.src, image.width / baseTexture.resolution, image.height / baseTexture.resolution, 0, baseTexture) || this;
-            _this.image = image;
+        function DynamicAtlasItemImage(src, width, height, source, baseTexture) {
+            var _this = _super.call(this, src, width / baseTexture.resolution, height / baseTexture.resolution, 0, baseTexture) || this;
+            _this.source = source;
             return _this;
         }
         DynamicAtlasItemImage.prototype.render = function (context) {
@@ -21703,12 +21695,21 @@
             var y = frame.y;
             var w = frame.width;
             var h = frame.height;
-            var image = this.image;
-            context.drawImage(image, x, y, w, h);
-            context.drawImage(image, 0, 0, 1, h, x - 1, y - 1, 1, h + 2);
-            context.drawImage(image, 0, 0, w, 1, x, y - 1, w, 1);
-            context.drawImage(image, w - 1, 0, 1, h, x + w, y - 1, 1, h + 2);
-            context.drawImage(image, 0, h - 1, w, 1, x, y + h, w, 1);
+            var source = this.source;
+            if (source instanceof ImageData) {
+                context.putImageData(source, x, y);
+                context.putImageData(source, x - 1, y, 0, 0, 1, h);
+                context.putImageData(source, x, y - 1, 0, 0, w, 1);
+                context.putImageData(source, x + w, y, w - 1, 0, 1, h);
+                context.putImageData(source, x, y + h, 0, h - 1, w, 1);
+            }
+            else {
+                context.drawImage(source, x, y, w, h);
+                context.drawImage(source, 0, 0, 1, h, x - 1, y - 1, 1, h + 2);
+                context.drawImage(source, 0, 0, w, 1, x, y - 1, w, 1);
+                context.drawImage(source, w - 1, 0, 1, h, x + w, y - 1, 1, h + 2);
+                context.drawImage(source, 0, h - 1, w, 1, x, y + h, w, 1);
+            }
         };
         return DynamicAtlasItemImage;
     }(DynamicAtlasItem));
@@ -22061,24 +22062,18 @@
         };
         EShapeRenderer.prototype.updateAtlas = function (shape, atlas, fontAtlases, defaultTexture, baseTexture) {
             // Texture
-            // Do not access the shape.image.src here.
+            // Do not access the shape.image.source here.
             // It slows down the rendering speed significantly.
-            var imageSrc = shape.imageSrc;
-            if (imageSrc != null) {
-                var textureItem = atlas.get(imageSrc);
+            var image = shape.image;
+            if (image != null) {
+                var textureItem = atlas.get(image.url);
                 if (textureItem != null) {
                     shape.texture = textureItem.texture;
                 }
                 else {
-                    var image = shape.image;
-                    if (image != null) {
-                        var newTextureItem = new DynamicAtlasItemImage(image, baseTexture);
-                        shape.texture = newTextureItem.texture;
-                        atlas.set(newTextureItem.id, newTextureItem);
-                    }
-                    else {
-                        shape.texture = defaultTexture;
-                    }
+                    var newTextureItem = new DynamicAtlasItemImage(image.url, image.width, image.height, image.source, baseTexture);
+                    shape.texture = newTextureItem.texture;
+                    atlas.set(newTextureItem.id, newTextureItem);
                 }
             }
             else {
@@ -22246,7 +22241,7 @@
             _this._pixelScale = 1;
             _this._pixelScaleId = -2; // Since this._shapeScaleId starts from -1.
             _this._shapeScale = 1;
-            _this._shapeScaleId = -1; // Since PIXI.Transform._worldID starts from zero.
+            _this._shapeScaleId = -1; // Since Transform._worldID starts from zero.
             _this._work = new pixi_js.Point();
             _this._buffers = [];
             return _this;
@@ -28963,345 +28958,6 @@
         return DDynamicTextGeometry;
     }(pixi_js.MeshGeometry));
 
-    /*
-     * Copyright (C) 2019 Toshiba Corporation
-     * SPDX-License-Identifier: Apache-2.0
-     */
-    var DDynamicTextStyle = /** @class */ (function () {
-        function DDynamicTextStyle(options, onChange) {
-            var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l;
-            this._id = 0;
-            this._idApproved = -1;
-            var defaultOptions = this.getDefaultOptions();
-            if (options) {
-                this._align = (_a = options.align) !== null && _a !== void 0 ? _a : defaultOptions.align;
-                this._fontFamily = (_b = options.fontFamily) !== null && _b !== void 0 ? _b : defaultOptions.fontFamily;
-                this._fontSize = (_c = options.fontSize) !== null && _c !== void 0 ? _c : defaultOptions.fontSize;
-                this._fontStyle = (_d = options.fontStyle) !== null && _d !== void 0 ? _d : defaultOptions.fontStyle;
-                this._fontVariant = (_e = options.fontVariant) !== null && _e !== void 0 ? _e : defaultOptions.fontVariant;
-                this._fontWeight = (_f = options.fontWeight) !== null && _f !== void 0 ? _f : defaultOptions.fontWeight;
-                this._fill = (_g = options.fill) !== null && _g !== void 0 ? _g : defaultOptions.fill;
-                this._clipping = (_h = options.clipping) !== null && _h !== void 0 ? _h : defaultOptions.clipping;
-                this._fitting = (_j = options.fitting) !== null && _j !== void 0 ? _j : defaultOptions.fitting;
-                this._wordWrap = toEnum((_k = options.wordWrap) !== null && _k !== void 0 ? _k : defaultOptions.wordWrap, DDynamicTextStyleWordWrap);
-                this._lineHeight = (_l = options.lineHeight) !== null && _l !== void 0 ? _l : defaultOptions.lineHeight;
-            }
-            else {
-                this._align = defaultOptions.align;
-                this._fontFamily = defaultOptions.fontFamily;
-                this._fontSize = defaultOptions.fontSize;
-                this._fontStyle = defaultOptions.fontStyle;
-                this._fontVariant = defaultOptions.fontVariant;
-                this._fontWeight = defaultOptions.fontWeight;
-                this._fill = defaultOptions.fill;
-                this._clipping = defaultOptions.clipping;
-                this._fitting = defaultOptions.fitting;
-                this._wordWrap = toEnum(defaultOptions.wordWrap, DDynamicTextStyleWordWrap);
-                this._lineHeight = defaultOptions.lineHeight;
-            }
-            this._fontSizeFitted = this._fontSize;
-            this._lineHeightFitted = this._lineHeight;
-            this._isFontFitted = false;
-            this._fontIdFontSize = this._fontSize;
-            this._fontIdId = -1;
-            this._fontId = "";
-            this._fontIdApproved = "";
-            this._fillApproved = 0x000000;
-            this._onChange = onChange;
-        }
-        DDynamicTextStyle.prototype.getDefaultOptions = function () {
-            var result = DDynamicTextStyle.DEFAULT_OPTIONS;
-            if (result == null) {
-                result = this.newDefaultOptions();
-                DDynamicTextStyle.DEFAULT_OPTIONS = result;
-            }
-            return result;
-        };
-        DDynamicTextStyle.prototype.newDefaultOptions = function () {
-            var theme = DThemes.getInstance().get("DBase");
-            return {
-                align: "left",
-                fontFamily: theme.getFontFamilly(),
-                fontSize: theme.getFontSize(),
-                fontStyle: "normal",
-                fontVariant: "normal",
-                fontWeight: "normal",
-                fill: theme.getColor(new DBaseStateSetImpl()),
-                clipping: true,
-                fitting: false,
-                wordWrap: DDynamicTextStyleWordWrap.NONE,
-                lineHeight: theme.getLineHeight()
-            };
-        };
-        Object.defineProperty(DDynamicTextStyle.prototype, "id", {
-            get: function () {
-                return this._id;
-            },
-            enumerable: false,
-            configurable: true
-        });
-        Object.defineProperty(DDynamicTextStyle.prototype, "idApproved", {
-            get: function () {
-                return this._idApproved;
-            },
-            enumerable: false,
-            configurable: true
-        });
-        Object.defineProperty(DDynamicTextStyle.prototype, "fontId", {
-            get: function () {
-                this.update();
-                return this._fontId;
-            },
-            enumerable: false,
-            configurable: true
-        });
-        Object.defineProperty(DDynamicTextStyle.prototype, "fontIdFontSize", {
-            get: function () {
-                this.update();
-                return this._fontSizeFitted;
-            },
-            enumerable: false,
-            configurable: true
-        });
-        Object.defineProperty(DDynamicTextStyle.prototype, "fontIdApproved", {
-            get: function () {
-                return this._fontIdApproved;
-            },
-            enumerable: false,
-            configurable: true
-        });
-        Object.defineProperty(DDynamicTextStyle.prototype, "fill", {
-            get: function () {
-                return this._fill;
-            },
-            set: function (fill) {
-                if (this._fill !== fill) {
-                    this._fill = fill;
-                    this.onChange();
-                }
-            },
-            enumerable: false,
-            configurable: true
-        });
-        DDynamicTextStyle.prototype.onChange = function () {
-            this._id += 1;
-            this._onChange();
-        };
-        Object.defineProperty(DDynamicTextStyle.prototype, "fillApproved", {
-            get: function () {
-                return this._fillApproved;
-            },
-            enumerable: false,
-            configurable: true
-        });
-        DDynamicTextStyle.prototype.approve = function () {
-            this.update();
-            this._idApproved = this._id;
-            this._fontIdApproved = this._fontId;
-            this._fillApproved = this._fill;
-        };
-        Object.defineProperty(DDynamicTextStyle.prototype, "fontFamily", {
-            get: function () {
-                return this._fontFamily;
-            },
-            set: function (fontFamily) {
-                if (this._fontFamily !== fontFamily) {
-                    this._fontFamily = fontFamily;
-                    this.onChange();
-                }
-            },
-            enumerable: false,
-            configurable: true
-        });
-        Object.defineProperty(DDynamicTextStyle.prototype, "fontSize", {
-            get: function () {
-                return this._fontSize;
-            },
-            set: function (fontSize) {
-                if (this._fontSize !== fontSize) {
-                    this._fontSize = fontSize;
-                    this._fontSizeFitted = fontSize;
-                    this._lineHeightFitted = this._lineHeight;
-                    this._isFontFitted = false;
-                    this.onChange();
-                }
-            },
-            enumerable: false,
-            configurable: true
-        });
-        Object.defineProperty(DDynamicTextStyle.prototype, "fontSizeFitted", {
-            get: function () {
-                return this._fontSizeFitted;
-            },
-            enumerable: false,
-            configurable: true
-        });
-        Object.defineProperty(DDynamicTextStyle.prototype, "isFontFitted", {
-            get: function () {
-                return this._isFontFitted;
-            },
-            enumerable: false,
-            configurable: true
-        });
-        Object.defineProperty(DDynamicTextStyle.prototype, "fontStyle", {
-            get: function () {
-                return this._fontStyle;
-            },
-            set: function (fontStyle) {
-                if (this._fontStyle !== fontStyle) {
-                    this._fontStyle = fontStyle;
-                    this.onChange();
-                }
-            },
-            enumerable: false,
-            configurable: true
-        });
-        Object.defineProperty(DDynamicTextStyle.prototype, "fontVariant", {
-            get: function () {
-                return this._fontVariant;
-            },
-            set: function (fontVariant) {
-                if (this._fontVariant !== fontVariant) {
-                    this._fontVariant = fontVariant;
-                    this.onChange();
-                }
-            },
-            enumerable: false,
-            configurable: true
-        });
-        Object.defineProperty(DDynamicTextStyle.prototype, "fontWeight", {
-            get: function () {
-                return this._fontWeight;
-            },
-            set: function (fontWeight) {
-                if (this._fontWeight !== fontWeight) {
-                    this._fontWeight = fontWeight;
-                    this.onChange();
-                }
-            },
-            enumerable: false,
-            configurable: true
-        });
-        DDynamicTextStyle.prototype.update = function () {
-            if (this._fontIdId !== this._id) {
-                this._fontIdId = this._id;
-                var fontIdFontSize = this._fitting ? this._fontSizeFitted : this._fontSize;
-                this._fontIdFontSize = fontIdFontSize;
-                this._fontId = this.toFontId(fontIdFontSize);
-            }
-        };
-        DDynamicTextStyle.prototype.toFontId = function (fontSize) {
-            return "".concat(this._fontStyle, " ").concat(this._fontVariant, " ").concat(this._fontWeight, " ").concat(fontSize, "px ").concat(this._fontFamily);
-        };
-        Object.defineProperty(DDynamicTextStyle.prototype, "clipping", {
-            get: function () {
-                return this._clipping;
-            },
-            set: function (clipping) {
-                if (this._clipping !== clipping) {
-                    this._clipping = clipping;
-                    this.onChange();
-                }
-            },
-            enumerable: false,
-            configurable: true
-        });
-        Object.defineProperty(DDynamicTextStyle.prototype, "fitting", {
-            get: function () {
-                return this._fitting;
-            },
-            set: function (fitting) {
-                if (this._fitting !== fitting) {
-                    this._fitting = fitting;
-                    this.onChange();
-                }
-            },
-            enumerable: false,
-            configurable: true
-        });
-        Object.defineProperty(DDynamicTextStyle.prototype, "wordWrap", {
-            get: function () {
-                return this._wordWrap;
-            },
-            set: function (wordWrap) {
-                if (this._wordWrap !== wordWrap) {
-                    this._wordWrap = wordWrap;
-                    this.onChange();
-                }
-            },
-            enumerable: false,
-            configurable: true
-        });
-        Object.defineProperty(DDynamicTextStyle.prototype, "lineHeight", {
-            get: function () {
-                return this._lineHeight;
-            },
-            set: function (lineHeight) {
-                if (this._lineHeight !== lineHeight) {
-                    this._lineHeight = lineHeight;
-                    this._fontSizeFitted = this._fontSize;
-                    this._lineHeightFitted = lineHeight;
-                    this._isFontFitted = false;
-                    this.onChange();
-                }
-            },
-            enumerable: false,
-            configurable: true
-        });
-        Object.defineProperty(DDynamicTextStyle.prototype, "lineHeightFitted", {
-            get: function () {
-                return this._lineHeightFitted;
-            },
-            set: function (lineHeightFitted) {
-                if (this._lineHeightFitted !== lineHeightFitted) {
-                    this._lineHeightFitted = lineHeightFitted;
-                    this.onChange();
-                }
-            },
-            enumerable: false,
-            configurable: true
-        });
-        DDynamicTextStyle.prototype.fit = function (fontSize, lineHeight) {
-            var isChanged = false;
-            if (fontSize < this._fontSizeFitted) {
-                this._fontSizeFitted = fontSize;
-                isChanged = true;
-            }
-            if (this._lineHeightFitted !== lineHeight) {
-                this._lineHeightFitted = lineHeight;
-                isChanged = true;
-            }
-            if (this._isFontFitted !== true) {
-                this._isFontFitted = true;
-                isChanged = true;
-            }
-            if (isChanged) {
-                this.onChange();
-            }
-            return isChanged;
-        };
-        DDynamicTextStyle.prototype.unfit = function () {
-            var isChanged = false;
-            if (this._isFontFitted !== false) {
-                this._isFontFitted = false;
-                isChanged = true;
-            }
-            if (this._fontSizeFitted !== this._fontSize) {
-                this._fontSizeFitted = this._fontSize;
-                isChanged = true;
-            }
-            if (this._lineHeightFitted !== this._lineHeight) {
-                this._lineHeightFitted = this._lineHeight;
-                isChanged = true;
-            }
-            if (isChanged) {
-                this.onChange();
-            }
-            return isChanged;
-        };
-        return DDynamicTextStyle;
-    }());
-
     /*
      * Copyright (C) 2019 Toshiba Corporation
      * SPDX-License-Identifier: Apache-2.0
@@ -29379,13 +29035,11 @@
      */
     var DDynamicText = /** @class */ (function (_super) {
         __extends(DDynamicText, _super);
-        function DDynamicText(options) {
+        function DDynamicText(style) {
             var _this = _super.call(this, new DDynamicTextGeometry(), new pixi_js.MeshMaterial(pixi_js.Texture.EMPTY)) || this;
-            _this._style = new DDynamicTextStyle(options, function () {
-                _this._isDirty = true;
-                _this._isGeometryDirty = true;
-                _this._atlas = null;
-                _this.update_();
+            _this._style = style;
+            style.on("change", function () {
+                _this.onStyleChange();
             });
             _this._text = "";
             _this._textApproved = "";
@@ -29409,15 +29063,21 @@
             };
             return _this;
         }
+        DDynamicText.prototype.onStyleChange = function () {
+            this._isDirty = true;
+            this._isGeometryDirty = true;
+            this._atlas = null;
+            this.update_();
+        };
         DDynamicText.prototype.update_ = function () {
             var layer = DApplications.getLayer(this);
             if (layer) {
-                var style = this._style;
                 if (this._isDirty) {
                     this._isDirty = false;
                     var text = this._text;
                     var textApproved = this._textApproved;
                     this._textApproved = text;
+                    var style = this._style;
                     var fontId = style.fontId;
                     var fontIdApproved = style.fontIdApproved;
                     var fontIdFontSize = style.fontIdFontSize;
@@ -29610,203 +29270,737 @@
      * Copyright (C) 2019 Toshiba Corporation
      * SPDX-License-Identifier: Apache-2.0
      */
-    var toTextStyle = function (theme, options, state) {
-        var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l;
-        var style = (_a = options === null || options === void 0 ? void 0 : options.text) === null || _a === void 0 ? void 0 : _a.style;
-        if (style != null) {
-            var fill = (_b = style.fill) !== null && _b !== void 0 ? _b : theme.getColor(state);
-            var fontSize = (_c = style.fontSize) !== null && _c !== void 0 ? _c : theme.getFontSize();
-            var fontFamily = (_d = style.fontFamily) !== null && _d !== void 0 ? _d : theme.getFontFamilly();
-            var fontWeight = (_e = style.fontWeight) !== null && _e !== void 0 ? _e : theme.getFontWeight();
-            var fontStyle = (_f = style.fontStyle) !== null && _f !== void 0 ? _f : theme.getFontStyle();
-            var fontVariant = (_g = style.fontVariant) !== null && _g !== void 0 ? _g : theme.getFontVariant();
-            var clipping = (_h = style.clipping) !== null && _h !== void 0 ? _h : theme.getTextStyleClipping();
-            var fitting = (_j = style.fitting) !== null && _j !== void 0 ? _j : theme.getTextStyleFitting();
-            var wordWrap = (_k = style.wordWrap) !== null && _k !== void 0 ? _k : theme.getTextStyleWordWrap();
-            var lineHeight = (_l = style.lineHeight) !== null && _l !== void 0 ? _l : theme.getLineHeight();
-            return {
-                fill: fill,
-                fontSize: fontSize,
-                fontFamily: fontFamily,
-                fontWeight: fontWeight,
-                fontStyle: fontStyle,
-                fontVariant: fontVariant,
-                clipping: clipping,
-                fitting: fitting,
-                wordWrap: wordWrap,
-                lineHeight: lineHeight
-            };
+    var DDynamicTextStyle = /** @class */ (function (_super) {
+        __extends(DDynamicTextStyle, _super);
+        function DDynamicTextStyle(parent, theme, options) {
+            var _a, _b, _c, _d, _e, _f, _g, _h, _j;
+            var _this = _super.call(this) || this;
+            _this._id = 0;
+            _this._idApproved = -1;
+            if (options) {
+                _this._fontFamily = (_a = options.fontFamily) !== null && _a !== void 0 ? _a : theme.getFontFamilly();
+                _this._fontSize = (_b = options.fontSize) !== null && _b !== void 0 ? _b : theme.getFontSize();
+                _this._fontStyle = (_c = options.fontStyle) !== null && _c !== void 0 ? _c : theme.getFontStyle();
+                _this._fontVariant = (_d = options.fontVariant) !== null && _d !== void 0 ? _d : theme.getFontVariant();
+                _this._fontWeight = (_e = options.fontWeight) !== null && _e !== void 0 ? _e : theme.getFontWeight();
+                _this._clipping = (_f = options.clipping) !== null && _f !== void 0 ? _f : theme.getTextStyleClipping();
+                _this._fitting = (_g = options.fitting) !== null && _g !== void 0 ? _g : theme.getTextStyleFitting();
+                _this._wordWrap = toEnum((_h = options.wordWrap) !== null && _h !== void 0 ? _h : theme.getTextStyleWordWrap(), DDynamicTextStyleWordWrap);
+                _this._lineHeight = (_j = options.lineHeight) !== null && _j !== void 0 ? _j : theme.getLineHeight();
+            }
+            else {
+                _this._fontFamily = theme.getFontFamilly();
+                _this._fontSize = theme.getFontSize();
+                _this._fontStyle = theme.getFontStyle();
+                _this._fontVariant = theme.getFontVariant();
+                _this._fontWeight = theme.getFontWeight();
+                _this._clipping = theme.getTextStyleClipping();
+                _this._fitting = theme.getTextStyleFitting();
+                _this._wordWrap = theme.getTextStyleWordWrap();
+                _this._lineHeight = theme.getLineHeight();
+            }
+            _this._fill = theme.getColor(parent.state);
+            _this._fontSizeFitted = _this._fontSize;
+            _this._lineHeightFitted = _this._lineHeight;
+            _this._isFontFitted = false;
+            _this._fontIdFontSize = _this._fontSize;
+            _this._fontIdId = -1;
+            _this._fontId = "";
+            _this._fontIdApproved = "";
+            _this._fillApproved = 0x000000;
+            return _this;
         }
-        return {
-            fill: theme.getColor(state),
-            fontSize: theme.getFontSize(),
-            fontFamily: theme.getFontFamilly(),
-            fontWeight: theme.getFontWeight(),
-            fontStyle: theme.getFontStyle(),
-            fontVariant: theme.getFontVariant(),
-            clipping: theme.getTextStyleClipping(),
-            fitting: theme.getTextStyleFitting(),
-            wordWrap: theme.getTextStyleWordWrap(),
-            lineHeight: theme.getLineHeight()
+        Object.defineProperty(DDynamicTextStyle.prototype, "id", {
+            get: function () {
+                return this._id;
+            },
+            enumerable: false,
+            configurable: true
+        });
+        Object.defineProperty(DDynamicTextStyle.prototype, "idApproved", {
+            get: function () {
+                return this._idApproved;
+            },
+            enumerable: false,
+            configurable: true
+        });
+        Object.defineProperty(DDynamicTextStyle.prototype, "fontId", {
+            get: function () {
+                this.update();
+                return this._fontId;
+            },
+            enumerable: false,
+            configurable: true
+        });
+        Object.defineProperty(DDynamicTextStyle.prototype, "fontIdFontSize", {
+            get: function () {
+                this.update();
+                return this._fontSizeFitted;
+            },
+            enumerable: false,
+            configurable: true
+        });
+        Object.defineProperty(DDynamicTextStyle.prototype, "fontIdApproved", {
+            get: function () {
+                return this._fontIdApproved;
+            },
+            enumerable: false,
+            configurable: true
+        });
+        Object.defineProperty(DDynamicTextStyle.prototype, "fill", {
+            get: function () {
+                return this._fill;
+            },
+            set: function (fill) {
+                if (this._fill !== fill) {
+                    this._fill = fill;
+                    this.onChange();
+                }
+            },
+            enumerable: false,
+            configurable: true
+        });
+        DDynamicTextStyle.prototype.onChange = function () {
+            this._id += 1;
+            this.emit("change", this);
         };
-    };
-    var toTextAlign = function (theme, options) {
-        var _a, _b, _c;
-        var align = (_a = options === null || options === void 0 ? void 0 : options.text) === null || _a === void 0 ? void 0 : _a.align;
-        return {
-            vertical: toEnum((_b = align === null || align === void 0 ? void 0 : align.vertical) !== null && _b !== void 0 ? _b : theme.getTextAlignVertical(), DAlignVertical),
-            horizontal: toEnum((_c = align === null || align === void 0 ? void 0 : align.horizontal) !== null && _c !== void 0 ? _c : theme.getTextAlignHorizontal(), DAlignHorizontal)
+        Object.defineProperty(DDynamicTextStyle.prototype, "fillApproved", {
+            get: function () {
+                return this._fillApproved;
+            },
+            enumerable: false,
+            configurable: true
+        });
+        DDynamicTextStyle.prototype.approve = function () {
+            this.update();
+            this._idApproved = this._id;
+            this._fontIdApproved = this._fontId;
+            this._fillApproved = this._fill;
         };
-    };
-    /**
-     * A base class for UI classes with a text support.
-     * See {@link DTextBaseEvents} for event defaults.
-     */
-    var DTextBase = /** @class */ (function (_super) {
-        __extends(DTextBase, _super);
-        function DTextBase() {
-            return _super !== null && _super.apply(this, arguments) || this;
-        }
-        DTextBase.prototype.init = function (options) {
-            var _a, _b, _c, _d;
-            _super.prototype.init.call(this, options);
-            var theme = this.theme;
-            this._textValue = (_b = (_a = options === null || options === void 0 ? void 0 : options.text) === null || _a === void 0 ? void 0 : _a.value) !== null && _b !== void 0 ? _b : theme.newTextValue();
-            this._textValueComputed = this.computeTextValue();
-            var text = options === null || options === void 0 ? void 0 : options.text;
-            this._textColor = text === null || text === void 0 ? void 0 : text.color;
-            this._textAlpha = text === null || text === void 0 ? void 0 : text.alpha;
-            this._textStyle = toTextStyle(theme, options, this.state);
-            this._textAlign = toTextAlign(theme, options);
-            this._textFormatter = (_c = text === null || text === void 0 ? void 0 : text.formatter) !== null && _c !== void 0 ? _c : theme.getTextFormatter();
-            this._isTextVisible = true;
-            this._isOverflowMaskEnabled = (_d = options === null || options === void 0 ? void 0 : options.mask) !== null && _d !== void 0 ? _d : theme.isOverflowMaskEnabled();
-            this.onTextChange();
-            this.createOrUpdateText();
+        Object.defineProperty(DDynamicTextStyle.prototype, "fontFamily", {
+            get: function () {
+                return this._fontFamily;
+            },
+            set: function (fontFamily) {
+                if (this._fontFamily !== fontFamily) {
+                    this._fontFamily = fontFamily;
+                    this.onChange();
+                }
+            },
+            enumerable: false,
+            configurable: true
+        });
+        Object.defineProperty(DDynamicTextStyle.prototype, "fontSize", {
+            get: function () {
+                return this._fontSize;
+            },
+            set: function (fontSize) {
+                if (this._fontSize !== fontSize) {
+                    this._fontSize = fontSize;
+                    this._fontSizeFitted = fontSize;
+                    this._lineHeightFitted = this._lineHeight;
+                    this._isFontFitted = false;
+                    this.onChange();
+                }
+            },
+            enumerable: false,
+            configurable: true
+        });
+        Object.defineProperty(DDynamicTextStyle.prototype, "fontSizeFitted", {
+            get: function () {
+                return this._fontSizeFitted;
+            },
+            enumerable: false,
+            configurable: true
+        });
+        Object.defineProperty(DDynamicTextStyle.prototype, "isFontFitted", {
+            get: function () {
+                return this._isFontFitted;
+            },
+            enumerable: false,
+            configurable: true
+        });
+        Object.defineProperty(DDynamicTextStyle.prototype, "fontStyle", {
+            get: function () {
+                return this._fontStyle;
+            },
+            set: function (fontStyle) {
+                if (this._fontStyle !== fontStyle) {
+                    this._fontStyle = fontStyle;
+                    this.onChange();
+                }
+            },
+            enumerable: false,
+            configurable: true
+        });
+        Object.defineProperty(DDynamicTextStyle.prototype, "fontVariant", {
+            get: function () {
+                return this._fontVariant;
+            },
+            set: function (fontVariant) {
+                if (this._fontVariant !== fontVariant) {
+                    this._fontVariant = fontVariant;
+                    this.onChange();
+                }
+            },
+            enumerable: false,
+            configurable: true
+        });
+        Object.defineProperty(DDynamicTextStyle.prototype, "fontWeight", {
+            get: function () {
+                return this._fontWeight;
+            },
+            set: function (fontWeight) {
+                if (this._fontWeight !== fontWeight) {
+                    this._fontWeight = fontWeight;
+                    this.onChange();
+                }
+            },
+            enumerable: false,
+            configurable: true
+        });
+        DDynamicTextStyle.prototype.update = function () {
+            if (this._fontIdId !== this._id) {
+                this._fontIdId = this._id;
+                var fontIdFontSize = this._fitting ? this._fontSizeFitted : this._fontSize;
+                this._fontIdFontSize = fontIdFontSize;
+                this._fontId = this.toFontId(fontIdFontSize);
+            }
         };
-        Object.defineProperty(DTextBase.prototype, "text", {
+        DDynamicTextStyle.prototype.toFontId = function (fontSize) {
+            return "".concat(this._fontStyle, " ").concat(this._fontVariant, " ").concat(this._fontWeight, " ").concat(fontSize, "px ").concat(this._fontFamily);
+        };
+        Object.defineProperty(DDynamicTextStyle.prototype, "clipping", {
             get: function () {
-                return this._textValue;
+                return this._clipping;
             },
-            set: function (text) {
-                if (this._textValue !== text) {
-                    this._textValue = text;
-                    this.updateTextValue();
+            set: function (clipping) {
+                if (this._clipping !== clipping) {
+                    this._clipping = clipping;
+                    this.onChange();
                 }
             },
             enumerable: false,
             configurable: true
         });
-        DTextBase.prototype.onTextChange = function () {
-            // DO NOTHING
+        Object.defineProperty(DDynamicTextStyle.prototype, "fitting", {
+            get: function () {
+                return this._fitting;
+            },
+            set: function (fitting) {
+                if (this._fitting !== fitting) {
+                    this._fitting = fitting;
+                    this.onChange();
+                }
+            },
+            enumerable: false,
+            configurable: true
+        });
+        Object.defineProperty(DDynamicTextStyle.prototype, "wordWrap", {
+            get: function () {
+                return this._wordWrap;
+            },
+            set: function (wordWrap) {
+                if (this._wordWrap !== wordWrap) {
+                    this._wordWrap = wordWrap;
+                    this.onChange();
+                }
+            },
+            enumerable: false,
+            configurable: true
+        });
+        Object.defineProperty(DDynamicTextStyle.prototype, "lineHeight", {
+            get: function () {
+                return this._lineHeight;
+            },
+            set: function (lineHeight) {
+                if (this._lineHeight !== lineHeight) {
+                    this._lineHeight = lineHeight;
+                    this._fontSizeFitted = this._fontSize;
+                    this._lineHeightFitted = lineHeight;
+                    this._isFontFitted = false;
+                    this.onChange();
+                }
+            },
+            enumerable: false,
+            configurable: true
+        });
+        Object.defineProperty(DDynamicTextStyle.prototype, "lineHeightFitted", {
+            get: function () {
+                return this._lineHeightFitted;
+            },
+            set: function (lineHeightFitted) {
+                if (this._lineHeightFitted !== lineHeightFitted) {
+                    this._lineHeightFitted = lineHeightFitted;
+                    this.onChange();
+                }
+            },
+            enumerable: false,
+            configurable: true
+        });
+        DDynamicTextStyle.prototype.fit = function (fontSize, lineHeight) {
+            var isChanged = false;
+            if (fontSize < this._fontSizeFitted) {
+                this._fontSizeFitted = fontSize;
+                isChanged = true;
+            }
+            if (this._lineHeightFitted !== lineHeight) {
+                this._lineHeightFitted = lineHeight;
+                isChanged = true;
+            }
+            if (this._isFontFitted !== true) {
+                this._isFontFitted = true;
+                isChanged = true;
+            }
+            if (isChanged) {
+                this.onChange();
+            }
+            return isChanged;
         };
-        DTextBase.prototype.computeTextValue = function () {
-            var textValue = this._textValue;
-            if (textValue !== undefined) {
-                if (isFunction(textValue)) {
-                    var result = textValue(this.state);
-                    if (result !== undefined) {
-                        return result;
-                    }
+        DDynamicTextStyle.prototype.unfit = function () {
+            var isChanged = false;
+            if (this._isFontFitted !== false) {
+                this._isFontFitted = false;
+                isChanged = true;
+            }
+            if (this._fontSizeFitted !== this._fontSize) {
+                this._fontSizeFitted = this._fontSize;
+                isChanged = true;
+            }
+            if (this._lineHeightFitted !== this._lineHeight) {
+                this._lineHeightFitted = this._lineHeight;
+                isChanged = true;
+            }
+            if (isChanged) {
+                this.onChange();
+            }
+            return isChanged;
+        };
+        return DDynamicTextStyle;
+    }(pixi_js.utils.EventEmitter));
+
+    var DTextPieceAlignImpl = /** @class */ (function () {
+        function DTextPieceAlignImpl(parent, theme, options) {
+            var _a, _b;
+            this._parent = parent;
+            this._vertical = toEnum((_a = options === null || options === void 0 ? void 0 : options.vertical) !== null && _a !== void 0 ? _a : theme.getTextAlignVertical(), DAlignVertical);
+            this._horizontal = toEnum((_b = options === null || options === void 0 ? void 0 : options.horizontal) !== null && _b !== void 0 ? _b : theme.getTextAlignHorizontal(), DAlignHorizontal);
+        }
+        Object.defineProperty(DTextPieceAlignImpl.prototype, "vertical", {
+            get: function () {
+                return this._vertical;
+            },
+            set: function (vertical) {
+                vertical = toEnum(vertical, DAlignVertical);
+                if (this._vertical !== vertical) {
+                    this._vertical = vertical;
+                    this.onChange();
                 }
-                else {
-                    return textValue;
+            },
+            enumerable: false,
+            configurable: true
+        });
+        Object.defineProperty(DTextPieceAlignImpl.prototype, "horizontal", {
+            get: function () {
+                return this._horizontal;
+            },
+            set: function (horizontal) {
+                horizontal = toEnum(horizontal, DAlignHorizontal);
+                if (this._horizontal !== horizontal) {
+                    this._horizontal = horizontal;
+                    this.onChange();
+                }
+            },
+            enumerable: false,
+            configurable: true
+        });
+        DTextPieceAlignImpl.prototype.set = function (vertical, horizontal) {
+            var isChanged = false;
+            if (vertical != null) {
+                vertical = toEnum(vertical, DAlignVertical);
+                if (this._vertical !== vertical) {
+                    this._vertical = vertical;
+                    isChanged = true;
                 }
             }
-            return this.theme.getTextValue(this.state);
+            if (horizontal != null) {
+                horizontal = toEnum(horizontal, DAlignHorizontal);
+                if (this._horizontal !== horizontal) {
+                    this._horizontal = horizontal;
+                    isChanged = true;
+                }
+            }
+            if (isChanged) {
+                this.onChange();
+            }
+            return this;
         };
-        DTextBase.prototype.createOrUpdateText = function () {
-            var textValueComputed = this._textValueComputed;
-            if (textValueComputed !== undefined) {
-                var formatted = this._textFormatter(textValueComputed, this);
-                var text = this._text;
-                if (text == null) {
-                    if (0 < formatted.length) {
-                        var newText = this.newText();
-                        newText.visible = this._isTextVisible;
-                        this._text = newText;
-                        this.addChild(newText);
-                        this.updateTextPosition(newText);
-                        var overflowMask = this.getOverflowMask();
-                        if (overflowMask) {
-                            newText.mask = overflowMask;
-                        }
-                        newText.text = formatted;
-                        this.toDirty();
-                        DApplications.update(this);
-                    }
+        DTextPieceAlignImpl.prototype.onChange = function () {
+            var parent = this._parent;
+            parent.toDirty();
+            DApplications.update(parent);
+        };
+        return DTextPieceAlignImpl;
+    }());
+
+    /*
+     * Copyright (C) 2019 Toshiba Corporation
+     * SPDX-License-Identifier: Apache-2.0
+     */
+    var DTextPieceStyleImpl = /** @class */ (function () {
+        function DTextPieceStyleImpl(parent, style) {
+            this._parent = parent;
+            this._style = style;
+        }
+        Object.defineProperty(DTextPieceStyleImpl.prototype, "fontFamily", {
+            get: function () {
+                return this._style.fontFamily;
+            },
+            set: function (fontFamily) {
+                var style = this._style;
+                if (style.fontFamily !== fontFamily) {
+                    style.fontFamily = fontFamily;
+                    this.onChange();
                 }
-                else if (text.text !== formatted) {
-                    text.text = formatted;
-                    this.toDirty();
-                    DApplications.update(this);
+            },
+            enumerable: false,
+            configurable: true
+        });
+        Object.defineProperty(DTextPieceStyleImpl.prototype, "fontSize", {
+            get: function () {
+                return this._style.fontSize;
+            },
+            set: function (fontSize) {
+                var style = this._style;
+                if (style.fontSize !== fontSize) {
+                    style.fontSize = fontSize;
+                    this.onChange();
+                }
+            },
+            enumerable: false,
+            configurable: true
+        });
+        Object.defineProperty(DTextPieceStyleImpl.prototype, "fontStyle", {
+            get: function () {
+                return this._style.fontStyle;
+            },
+            set: function (fontStyle) {
+                var style = this._style;
+                if (style.fontStyle !== fontStyle) {
+                    style.fontStyle = fontStyle;
+                    this.onChange();
                 }
+            },
+            enumerable: false,
+            configurable: true
+        });
+        Object.defineProperty(DTextPieceStyleImpl.prototype, "fontVariant", {
+            get: function () {
+                return this._style.fontVariant;
+            },
+            set: function (fontVariant) {
+                var style = this._style;
+                if (style.fontVariant !== fontVariant) {
+                    style.fontVariant = fontVariant;
+                    this.onChange();
+                }
+            },
+            enumerable: false,
+            configurable: true
+        });
+        Object.defineProperty(DTextPieceStyleImpl.prototype, "fontWeight", {
+            get: function () {
+                return this._style.fontWeight;
+            },
+            set: function (fontWeight) {
+                var style = this._style;
+                if (style.fontWeight !== fontWeight) {
+                    style.fontWeight = fontWeight;
+                    this.onChange();
+                }
+            },
+            enumerable: false,
+            configurable: true
+        });
+        Object.defineProperty(DTextPieceStyleImpl.prototype, "clipping", {
+            get: function () {
+                return this._style.clipping;
+            },
+            set: function (clipping) {
+                var style = this._style;
+                if (style.clipping !== clipping) {
+                    style.clipping = clipping;
+                    this.onChange();
+                }
+            },
+            enumerable: false,
+            configurable: true
+        });
+        Object.defineProperty(DTextPieceStyleImpl.prototype, "fitting", {
+            get: function () {
+                return this._style.fitting;
+            },
+            set: function (fitting) {
+                var style = this._style;
+                if (style.fitting !== fitting) {
+                    style.fitting = fitting;
+                    this.onChange();
+                }
+            },
+            enumerable: false,
+            configurable: true
+        });
+        Object.defineProperty(DTextPieceStyleImpl.prototype, "wordWrap", {
+            get: function () {
+                return this._style.wordWrap;
+            },
+            set: function (wordWrap) {
+                wordWrap = toEnum(wordWrap, DDynamicTextStyleWordWrap);
+                var style = this._style;
+                if (style.wordWrap !== wordWrap) {
+                    style.wordWrap = wordWrap;
+                    this.onChange();
+                }
+            },
+            enumerable: false,
+            configurable: true
+        });
+        Object.defineProperty(DTextPieceStyleImpl.prototype, "lineHeight", {
+            get: function () {
+                return this._style.lineHeight;
+            },
+            set: function (lineHeight) {
+                var style = this._style;
+                if (style.lineHeight !== lineHeight) {
+                    style.lineHeight = lineHeight;
+                    this.onChange();
+                }
+            },
+            enumerable: false,
+            configurable: true
+        });
+        DTextPieceStyleImpl.prototype.onChange = function () {
+            DApplications.update(this._parent);
+        };
+        return DTextPieceStyleImpl;
+    }());
+
+    var DTextPieceImpl = /** @class */ (function (_super) {
+        __extends(DTextPieceImpl, _super);
+        function DTextPieceImpl(parent, theme, options) {
+            var _a, _b;
+            var _this = _super.call(this) || this;
+            _this._parent = parent;
+            _this._theme = theme;
+            _this._value = (_a = options === null || options === void 0 ? void 0 : options.value) !== null && _a !== void 0 ? _a : theme.newTextValue();
+            _this._computed = _this.newComputed();
+            _this._color = options === null || options === void 0 ? void 0 : options.color;
+            _this._alpha = options === null || options === void 0 ? void 0 : options.alpha;
+            var dstyle = new DDynamicTextStyle(parent, theme, options === null || options === void 0 ? void 0 : options.style);
+            _this._dstyle = dstyle;
+            _this._style = new DTextPieceStyleImpl(parent, dstyle);
+            _this._align = new DTextPieceAlignImpl(parent, theme, options === null || options === void 0 ? void 0 : options.align);
+            _this._formatter = (_b = options === null || options === void 0 ? void 0 : options.formatter) !== null && _b !== void 0 ? _b : theme.getTextFormatter();
+            _this._isVisible = true;
+            _this.onComputedChange();
+            if (_this.updateObject()) {
+                parent.toDirty();
+                DApplications.update(parent);
             }
-            else {
-                var text = this._text;
-                if (text != null && text.text !== "") {
-                    text.text = "";
-                    this.toDirty();
-                    DApplications.update(this);
+            return _this;
+        }
+        Object.defineProperty(DTextPieceImpl.prototype, "value", {
+            get: function () {
+                return this._value;
+            },
+            set: function (value) {
+                if (this._value !== value) {
+                    this._value = value;
+                    this.onValueChange();
                 }
+            },
+            enumerable: false,
+            configurable: true
+        });
+        DTextPieceImpl.prototype.getValue = function () {
+            return this._value;
+        };
+        DTextPieceImpl.prototype.setValue = function (value, forcibly) {
+            if (forcibly || this._value !== value) {
+                this._value = value;
+                this.onValueChange(forcibly);
             }
         };
-        DTextBase.prototype.newText = function () {
-            return new DDynamicText(this._textStyle);
+        DTextPieceImpl.prototype.onValueChange = function (forcibly) {
+            var newComputed = this.newComputed();
+            if (forcibly || this._computed !== newComputed) {
+                this._computed = newComputed;
+                this.onComputedChange();
+                if (this.updateObject()) {
+                    var parent_1 = this._parent;
+                    parent_1.toDirty();
+                    DApplications.update(parent_1);
+                }
+            }
         };
-        DTextBase.prototype.getOverflowMask = function () {
-            if (this._isOverflowMaskEnabled) {
-                if (this._overflowMask == null) {
-                    this._overflowMask = new DBaseOverflowMaskSimple(this);
-                    this._reflowable.add(this._overflowMask);
-                    this.toDirty();
+        DTextPieceImpl.prototype.compute = function (forcibly) {
+            this.onValueChange(forcibly);
+        };
+        Object.defineProperty(DTextPieceImpl.prototype, "computed", {
+            get: function () {
+                return this._computed;
+            },
+            enumerable: false,
+            configurable: true
+        });
+        Object.defineProperty(DTextPieceImpl.prototype, "formatter", {
+            get: function () {
+                return this._formatter;
+            },
+            set: function (formatter) {
+                if (this._formatter !== formatter) {
+                    this._formatter = formatter;
+                    this.onValueChange(true);
+                }
+            },
+            enumerable: false,
+            configurable: true
+        });
+        Object.defineProperty(DTextPieceImpl.prototype, "color", {
+            get: function () {
+                return this._color;
+            },
+            set: function (color) {
+                if (this._color !== color) {
+                    this._color = color;
+                    this.onColorChange();
+                }
+            },
+            enumerable: false,
+            configurable: true
+        });
+        Object.defineProperty(DTextPieceImpl.prototype, "alpha", {
+            get: function () {
+                return this._alpha;
+            },
+            set: function (alpha) {
+                if (this._alpha !== alpha) {
+                    this._alpha = alpha;
+                    this.onColorChange();
+                }
+            },
+            enumerable: false,
+            configurable: true
+        });
+        DTextPieceImpl.prototype.onColorChange = function () {
+            var object = this._object;
+            if (object != null) {
+                var parent_2 = this._parent;
+                var state = parent_2.state;
+                var color = this.newColor(state);
+                var alpha = this.newAlpha(state);
+                var style = object.style;
+                if (style.fill !== color || object.alpha !== alpha) {
+                    style.fill = color;
+                    object.alpha = alpha;
+                    DApplications.update(parent_2);
                 }
-                return this._overflowMask;
             }
-            return null;
         };
-        DTextBase.prototype.updateTextPosition = function (text) {
-            var align = this._textAlign;
-            var padding = this._padding;
-            var auto = this._auto;
-            var textX = 0;
-            var pleft = padding.getLeft();
-            var alignHorizontal = align.horizontal;
-            if (auto.width.isOn || alignHorizontal === DAlignHorizontal.LEFT) {
-                textX = pleft;
+        Object.defineProperty(DTextPieceImpl.prototype, "align", {
+            get: function () {
+                return this._align;
+            },
+            enumerable: false,
+            configurable: true
+        });
+        Object.defineProperty(DTextPieceImpl.prototype, "style", {
+            get: function () {
+                return this._style;
+            },
+            enumerable: false,
+            configurable: true
+        });
+        Object.defineProperty(DTextPieceImpl.prototype, "object", {
+            get: function () {
+                return this._object;
+            },
+            enumerable: false,
+            configurable: true
+        });
+        DTextPieceImpl.prototype.update = function (layouter) {
+            // Compute a value
+            var newComputed = this.newComputed();
+            if (this._computed !== newComputed) {
+                this._computed = newComputed;
+                this.onComputedChange();
+                this.updateObject();
+            }
+            var object = this._object;
+            if (object != null) {
+                // Update the color
+                var state = this._parent.state;
+                object.style.fill = this.newColor(state);
+                object.alpha = this.newAlpha(state);
+                // Layout
+                layouter.set(object);
             }
             else {
-                var width = this.width;
-                var textWidth = text.width;
-                var pright = padding.getRight();
-                if (alignHorizontal === DAlignHorizontal.CENTER) {
-                    textX = pleft + (width - pleft - pright - textWidth) * 0.5;
+                // Layout
+                layouter.set(null);
+            }
+        };
+        DTextPieceImpl.prototype.updateObject = function () {
+            var computed = this._computed;
+            if (computed !== undefined) {
+                var formatted = this._formatter(computed, this);
+                var object = this._object;
+                if (object == null) {
+                    if (0 < formatted.length) {
+                        var newObject = this.newObject();
+                        newObject.visible = this._isVisible;
+                        this._object = newObject;
+                        var parent_3 = this._parent;
+                        parent_3.addChild(newObject);
+                        var overflowMask = parent_3.getOverflowMask();
+                        if (overflowMask) {
+                            newObject.mask = overflowMask;
+                        }
+                        newObject.text = formatted;
+                        return true;
+                    }
                 }
-                else {
-                    textX = width - textWidth - pright;
+                else if (object.text !== formatted) {
+                    object.text = formatted;
+                    return true;
                 }
             }
-            var textY = 0;
-            var ptop = padding.getTop();
-            var alignVertical = align.vertical;
-            if (auto.height.isOn || alignVertical === DAlignVertical.TOP) {
-                textY = ptop;
-            }
             else {
-                var height = this.height;
-                var textHeight = text.height;
-                var pbottom = padding.getBottom();
-                if (alignVertical === DAlignVertical.MIDDLE) {
-                    textY = ptop + (height - ptop - pbottom - textHeight) * 0.5;
+                var object = this._object;
+                if (object != null && object.text !== "") {
+                    object.text = "";
+                    return true;
+                }
+            }
+            return false;
+        };
+        DTextPieceImpl.prototype.newComputed = function () {
+            var value = this._value;
+            if (value !== undefined) {
+                if (isFunction(value)) {
+                    var result = value(this._parent.state);
+                    if (result !== undefined) {
+                        return result;
+                    }
                 }
                 else {
-                    textY = height - textHeight - pbottom;
+                    return value;
                 }
             }
-            text.position.set(textX, textY);
+            return this._theme.getTextValue(this._parent.state);
         };
-        DTextBase.prototype.getTextColor = function (theme, state) {
-            var color = this._textColor;
+        DTextPieceImpl.prototype.newColor = function (state) {
+            var color = this._color;
             if (color !== undefined) {
                 if (isFunction(color)) {
                     var result = color(state);
@@ -29818,10 +30012,10 @@
                     return color;
                 }
             }
-            return theme.getColor(state);
+            return this._theme.getColor(state);
         };
-        DTextBase.prototype.getTextAlpha = function (theme, state) {
-            var alpha = this._textAlpha;
+        DTextPieceImpl.prototype.newAlpha = function (state) {
+            var alpha = this._alpha;
             if (alpha !== undefined) {
                 if (isFunction(alpha)) {
                     var result = alpha(state);
@@ -29833,57 +30027,144 @@
                     return alpha;
                 }
             }
-            return theme.getAlpha(state);
+            return this._theme.getAlpha(state);
         };
-        DTextBase.prototype.updateTextColor = function (text) {
-            var theme = this.theme;
-            var state = this.state;
-            text.style.fill = this.getTextColor(theme, state);
-            text.alpha = this.getTextAlpha(theme, state);
+        DTextPieceImpl.prototype.newObject = function () {
+            return new DDynamicText(this._dstyle);
         };
-        DTextBase.prototype.updateTextValue = function () {
-            var newTextValueComputed = this.computeTextValue();
-            if (this._textValueComputed !== newTextValueComputed) {
-                this._textValueComputed = newTextValueComputed;
-                this.onTextChange();
-                this.createOrUpdateText();
-            }
+        Object.defineProperty(DTextPieceImpl.prototype, "visible", {
+            get: function () {
+                var object = this._object;
+                if (object != null) {
+                    return object.visible;
+                }
+                return this._isVisible;
+            },
+            set: function (visible) {
+                var object = this._object;
+                if (object != null) {
+                    object.visible = visible;
+                }
+                this._isVisible = visible;
+            },
+            enumerable: false,
+            configurable: true
+        });
+        DTextPieceImpl.prototype.show = function () {
+            this.visible = true;
+            return this;
         };
-        DTextBase.prototype.updateText = function () {
-            var text = this._text;
-            if (text) {
-                this.updateTextValue();
-                this.updateTextPosition(text);
-                this.updateTextColor(text);
+        DTextPieceImpl.prototype.hide = function () {
+            this.visible = false;
+            return this;
+        };
+        DTextPieceImpl.prototype.isShown = function () {
+            return this.visible;
+        };
+        DTextPieceImpl.prototype.onComputedChange = function () {
+            this.emit("change", this);
+        };
+        DTextPieceImpl.prototype.destroy = function () {
+            var object = this._object;
+            if (object) {
+                this._object = undefined;
+                object.destroy();
             }
+            return this;
         };
-        DTextBase.prototype.showText = function () {
-            var text = this._text;
-            if (text) {
-                text.visible = true;
+        return DTextPieceImpl;
+    }(pixi_js.utils.EventEmitter));
+
+    /*
+     * Copyright (C) 2019 Toshiba Corporation
+     * SPDX-License-Identifier: Apache-2.0
+     */
+    /**
+     * A base class for UI classes with a text support.
+     * See {@link DTextBaseEvents} for event defaults.
+     */
+    var DTextBase = /** @class */ (function (_super) {
+        __extends(DTextBase, _super);
+        function DTextBase() {
+            return _super !== null && _super.apply(this, arguments) || this;
+        }
+        DTextBase.prototype.init = function (options) {
+            _super.prototype.init.call(this, options);
+            this.getText();
+        };
+        DTextBase.prototype.getOverflowMask = function () {
+            var result = this._overflowMask;
+            if (result === undefined) {
+                result = this.newOverflowMask();
+                this._overflowMask = result;
             }
-            this._isTextVisible = true;
+            return null;
         };
-        DTextBase.prototype.hideText = function () {
-            var text = this._text;
-            if (text) {
-                text.visible = false;
+        DTextBase.prototype.newOverflowMask = function () {
+            var _a, _b;
+            if ((_b = (_a = this._options) === null || _a === void 0 ? void 0 : _a.mask) !== null && _b !== void 0 ? _b : this.theme.isOverflowMaskEnabled()) {
+                var result = new DBaseOverflowMaskSimple(this);
+                this._reflowable.add(result);
+                this.toDirty();
+                return result;
+            }
+            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 {
@@ -29897,7 +30178,6 @@
             // Text
             var text = this._text;
             if (text) {
-                this._text = null;
                 text.destroy();
             }
             // Overflow mask
@@ -30529,7 +30809,7 @@
             }
             return false;
         };
-        DImagePieceContainerImpl.prototype.updateTextAndImage = function (layouter) {
+        DImagePieceContainerImpl.prototype.update = function (layouter) {
             var pieces = this._pieces;
             for (var i = 0, imax = pieces.length; i < imax; ++i) {
                 var piece = pieces[i];
@@ -30539,6 +30819,54 @@
                 layouter.add(piece);
             }
         };
+        Object.defineProperty(DImagePieceContainerImpl.prototype, "object", {
+            get: function () {
+                return this._pieces[0].object;
+            },
+            enumerable: false,
+            configurable: true
+        });
+        Object.defineProperty(DImagePieceContainerImpl.prototype, "align", {
+            get: function () {
+                return this._pieces[0].align;
+            },
+            enumerable: false,
+            configurable: true
+        });
+        Object.defineProperty(DImagePieceContainerImpl.prototype, "margin", {
+            get: function () {
+                return this._pieces[0].margin;
+            },
+            enumerable: false,
+            configurable: true
+        });
+        Object.defineProperty(DImagePieceContainerImpl.prototype, "tint", {
+            get: function () {
+                return this._pieces[0].tint;
+            },
+            enumerable: false,
+            configurable: true
+        });
+        Object.defineProperty(DImagePieceContainerImpl.prototype, "source", {
+            get: function () {
+                return this._pieces[0].source;
+            },
+            set: function (source) {
+                this._pieces[0].source = source;
+            },
+            enumerable: false,
+            configurable: true
+        });
+        Object.defineProperty(DImagePieceContainerImpl.prototype, "rotation", {
+            get: function () {
+                return this._pieces[0].rotation;
+            },
+            set: function (rotation) {
+                this._pieces[0].rotation = rotation;
+            },
+            enumerable: false,
+            configurable: true
+        });
         DImagePieceContainerImpl.prototype.add = function (options) {
             var result = this.newImage(this._theme, options);
             this._pieces.push(result);
@@ -30613,24 +30941,13 @@
             _super.prototype.onStateChange.call(this, newState, oldState);
             this.getImage().onStateChange(newState, oldState);
         };
-        DImageBase.prototype.updateText = function () {
-            this.updateTextValue();
-            this.updateTextAndImage();
-        };
-        DImageBase.prototype.updateTextAndImage = function () {
-            var _a;
-            var layouter = ((_a = DImageBase.LAYOUTER) !== null && _a !== void 0 ? _a : (DImageBase.LAYOUTER = new DImagePieceLayouter()));
-            this.getImage().updateTextAndImage(layouter);
-            var text = this._text;
-            if (text != null) {
-                this.updateTextColor(text);
-                layouter.set(text);
-            }
-            else {
-                layouter.set(null);
-            }
+        DImageBase.prototype.onReflowTextAndImage = function () {
+            var layouter = this.getLayouter();
+            this.getImage().update(layouter);
+            var text = this.getText();
+            text.update(layouter);
             var auto = this._auto;
-            layouter.execute(this._padding, this._textAlign, auto.width.isOn ? null : this.width, auto.height.isOn ? null : this.height);
+            layouter.execute(this._padding, text.align, auto.width.isOn ? null : this.width, auto.height.isOn ? null : this.height);
             layouter.clear();
         };
         DImageBase.prototype.isRefitable = function (target) {
@@ -31919,16 +32236,16 @@
                     return _this.containsPoint(point);
                 },
                 onStart: function () {
-                    _this.hideText();
+                    _this.text.hide();
                 },
                 onCancel: function () {
-                    _this.showText();
+                    _this.text.show();
                 },
                 onEnd: function () {
                     // DO NOTHING
                 },
                 getValue: function () {
-                    return _this._textValueComputed;
+                    return _this.text.computed;
                 },
                 onValueInput: function (newValue) {
                     _this.onValueInput(newValue);
@@ -31947,7 +32264,7 @@
         };
         Object.defineProperty(DInput.prototype, "value", {
             get: function () {
-                return this._textValueComputed;
+                return this.text.computed;
             },
             set: function (value) {
                 this.text = value;
@@ -31955,9 +32272,13 @@
             enumerable: false,
             configurable: true
         });
-        DInput.prototype.onTextChange = function () {
-            _super.prototype.onTextChange.call(this);
-            this.validate();
+        DInput.prototype.newText = function () {
+            var _this = this;
+            var result = _super.prototype.newText.call(this);
+            result.on("change", function () {
+                _this.validate();
+            });
+            return result;
         };
         DInput.prototype.onValueChange = function (newValue, oldValue) {
             this.emit("change", newValue, oldValue, this);
@@ -35216,7 +35537,7 @@
     var toImageElement = function (dataUrl) {
         var cachedImageElement = imageElementCache[dataUrl];
         if (cachedImageElement != null) {
-            if (cachedImageElement instanceof HTMLImageElement) {
+            if ("url" in cachedImageElement) {
                 return Promise.resolve(cachedImageElement);
             }
             else {
@@ -35227,8 +35548,14 @@
             var result = new Promise(function (resolve, reject) {
                 var imageElement = document.createElement("img");
                 imageElement.onload = function () {
-                    imageElementCache[dataUrl] = imageElement;
-                    resolve(imageElement);
+                    var resolved = {
+                        url: dataUrl,
+                        width: imageElement.width,
+                        height: imageElement.height,
+                        source: imageElement
+                    };
+                    imageElementCache[dataUrl] = resolved;
+                    resolve(resolved);
                 };
                 imageElement.onabort = imageElement.onerror = function () {
                     reject();
@@ -40383,6 +40710,9 @@
             enumerable: false,
             configurable: true
         });
+        EShapeGroup.prototype.serializeGradient = function (manager) {
+            return -1;
+        };
         Object.defineProperty(EShapeGroup.prototype, "radius", {
             get: function () {
                 var children = this.children;
@@ -40420,6 +40750,9 @@
             enumerable: false,
             configurable: true
         });
+        EShapeGroup.prototype.serializeImage = function (manager) {
+            return -1;
+        };
         Object.defineProperty(EShapeGroup.prototype, "points", {
             get: function () {
                 var children = this.children;
@@ -44581,9 +44914,9 @@
             var shortcuts = this._shortcuts;
             if (shortcuts != null && 0 < shortcuts.length) {
                 var shortcut = shortcuts[0];
-                var shortcutText = this.newText();
+                var shortcutText = this.newShortcutText();
                 this._shortcutText = shortcutText;
-                this.snippet.add(this._shortcutText, true);
+                this.snippet.add(shortcutText, true);
                 shortcutText.text = UtilKeyboardEvent.toString(shortcut);
             }
             else {
@@ -44591,6 +44924,10 @@
             }
             this._shortcutMargin = this.theme.getShortcutTextMargin();
         };
+        DMenuItemText.prototype.newShortcutText = function () {
+            var _a, _b;
+            return new DDynamicText(new DDynamicTextStyle(this, this.theme, (_b = (_a = this._options) === null || _a === void 0 ? void 0 : _a.text) === null || _b === void 0 ? void 0 : _b.style));
+        };
         DMenuItemText.prototype.updateShortcutText = function () {
             var text = this._shortcutText;
             var margin = this._shortcutMargin;
@@ -44615,8 +44952,7 @@
                 text.position.set(textX, textY);
             }
         };
-        DMenuItemText.prototype.updateTextColor = function (text) {
-            _super.prototype.updateTextColor.call(this, text);
+        DMenuItemText.prototype.updateShortcutColor = function () {
             var shortcutText = this._shortcutText;
             if (shortcutText != null) {
                 var theme = this.theme;
@@ -44625,8 +44961,9 @@
                 shortcutText.alpha = theme.getShortcutAlpha(state);
             }
         };
-        DMenuItemText.prototype.updateText = function () {
-            _super.prototype.updateText.call(this);
+        DMenuItemText.prototype.onReflow = function () {
+            _super.prototype.onReflow.call(this);
+            this.updateShortcutColor();
             this.updateShortcutText();
         };
         DMenuItemText.prototype.getType = function () {
@@ -46326,9 +46663,9 @@
      */
     var createImageSdf = function (dataUrl, convertToSdf) {
         if (convertToSdf) {
-            return toImageElement(dataUrl).then(function (imageElement) {
+            return toImageElement(dataUrl).then(function (image) {
                 var generator = DynamicSDFFontGenerator.getInstance().init();
-                generator.updateTexture(imageElement);
+                generator.updateTexture(image.width, image.height, image.source);
                 generator.render();
                 var canvas = document.createElement("canvas");
                 generator.read(canvas);
@@ -46336,8 +46673,8 @@
             });
         }
         else {
-            return toImageElement(dataUrl).then(function (imageElement) {
-                return new EShapeImageSdf(imageElement);
+            return toImageElement(dataUrl).then(function (image) {
+                return new EShapeImageSdf(image);
             });
         }
     };
@@ -46347,8 +46684,8 @@
      * SPDX-License-Identifier: Apache-2.0
      */
     var createImage = function (dataUrl) {
-        return toImageElement(dataUrl).then(function (imageElement) {
-            return new EShapeImage(imageElement);
+        return toImageElement(dataUrl).then(function (image) {
+            return new EShapeImage(image);
         });
     };
 
@@ -53086,7 +53423,7 @@
                     var view = DPickerColorGradientView.from(1, 10, checkers, texture);
                     this._view = view;
                     view.setRectangle(0, 0, 0, texture.width, texture.height);
-                    view.setData(0, this._textValueComputed);
+                    view.setData(0, this.text.computed);
                     view.update();
                     this.image = view;
                 }
@@ -53095,13 +53432,13 @@
         DButtonColorGradient.prototype.onActivate = function (e) {
             var _this = this;
             _super.prototype.onActivate.call(this, e);
-            var value = this._textValueComputed;
+            var computed = this.text.computed;
             var dialog = this.dialog;
-            if (value != null) {
-                dialog.value.fromObject(value);
+            if (computed != null) {
+                dialog.value.fromObject(computed);
             }
             dialog.open(this).then(function (newValue) {
-                _this.onValueChange(newValue, _this.toClone(value));
+                _this.onValueChange(newValue, _this.toClone(computed));
             });
         };
         DButtonColorGradient.prototype.toClone = function (value) {
@@ -53112,17 +53449,15 @@
             return result;
         };
         DButtonColorGradient.prototype.onValueChange = function (newValue, oldValue) {
-            var value = this._textValueComputed;
-            if (value != null) {
-                value.fromObject(newValue);
+            var computed = this.text.computed;
+            if (computed != null) {
+                computed.fromObject(newValue);
             }
             var view = this._view;
             if (view != null) {
                 view.update();
             }
-            this.onTextChange();
-            this.createOrUpdateText();
-            DApplications.update(this);
+            this.text.compute(true);
             this.emit("change", newValue, oldValue, this);
         };
         Object.defineProperty(DButtonColorGradient.prototype, "dialog", {
@@ -53155,7 +53490,7 @@
         };
         Object.defineProperty(DButtonColorGradient.prototype, "value", {
             get: function () {
-                return this._textValueComputed;
+                return this.text.computed;
             },
             enumerable: false,
             configurable: true
@@ -53244,14 +53579,14 @@
             var _this = this;
             _super.prototype.onActivate.call(this, e);
             var dialog = this.dialog;
-            var value = this._textValueComputed;
-            if (value != null) {
+            var computed = this.text.computed;
+            if (computed != null) {
                 var dialogCurrent = dialog.current;
-                dialogCurrent.color = value.color;
-                dialogCurrent.alpha = value.alpha;
+                dialogCurrent.color = computed.color;
+                dialogCurrent.alpha = computed.alpha;
                 var dialogNew = dialog.new;
-                dialogNew.color = value.color;
-                dialogNew.alpha = value.alpha;
+                dialogNew.color = computed.color;
+                dialogNew.alpha = computed.alpha;
             }
             dialog.open(this).then(function () {
                 _this.onValueChange(_this.toClone(dialog.new), _this.toClone(dialog.current));
@@ -53264,10 +53599,10 @@
             };
         };
         DButtonColor.prototype.onValueChange = function (newValue, oldValue) {
-            var value = this._textValueComputed;
-            if (value != null) {
-                value.color = newValue.color;
-                value.alpha = newValue.alpha;
+            var computed = this.text.computed;
+            if (computed != null) {
+                computed.color = newValue.color;
+                computed.alpha = newValue.alpha;
             }
             this.onColorChange();
             this.emit("change", newValue, oldValue, this);
@@ -53275,16 +53610,12 @@
         DButtonColor.prototype.onColorChange = function () {
             var image = this.image.get(0);
             if (image != null) {
-                var value = this._textValueComputed;
-                if (value != null) {
-                    image.tint.color = value.color;
+                var computed = this.text.computed;
+                if (computed != null) {
+                    image.tint.color = computed.color;
                 }
             }
-            this.updateTextForcibly();
-        };
-        DButtonColor.prototype.updateTextForcibly = function () {
-            this.onTextChange();
-            this.createOrUpdateText();
+            this.text.compute(true);
         };
         Object.defineProperty(DButtonColor.prototype, "dialog", {
             get: function () {
@@ -53328,13 +53659,14 @@
         });
         DButtonColor.prototype.newValue = function () {
             var _this = this;
-            var value = this._textValueComputed;
-            return new DPickerColorAndAlpha(value, function (color) {
-                value.color = color;
+            var text = this.text;
+            var computed = text.computed;
+            return new DPickerColorAndAlpha(computed, function (color) {
+                computed.color = color;
                 _this.onColorChange();
             }, function (alpha) {
-                value.alpha = alpha;
-                _this.updateTextForcibly();
+                computed.alpha = alpha;
+                text.compute(true);
             });
         };
         DButtonColor.prototype.getType = function () {
@@ -53371,7 +53703,7 @@
             var _this = this;
             var _a, _b;
             _super.prototype.onActivate.call(this, e);
-            var value = (_b = (_a = this._textValueComputed) === null || _a === void 0 ? void 0 : _a.getTime()) !== null && _b !== void 0 ? _b : Date.now();
+            var value = (_b = (_a = this.text.computed) === null || _a === void 0 ? void 0 : _a.getTime()) !== null && _b !== void 0 ? _b : Date.now();
             var dialog = this.dialog;
             dialog.current = new Date(value);
             dialog.new = new Date(value);
@@ -53415,11 +53747,11 @@
         Object.defineProperty(DButtonDate.prototype, "value", {
             get: function () {
                 var _a;
-                return (_a = this._textValueComputed) !== null && _a !== void 0 ? _a : new Date();
+                return (_a = this.text.computed) !== null && _a !== void 0 ? _a : new Date();
             },
             set: function (value) {
-                var textValueComputed = this._textValueComputed;
-                if (textValueComputed === undefined || textValueComputed.getTime() !== value.getTime()) {
+                var computed = this.text.computed;
+                if (computed === undefined || computed.getTime() !== value.getTime()) {
                     this.text = value;
                 }
             },
@@ -53515,7 +53847,7 @@
             var _this = this;
             var _a, _b;
             _super.prototype.onActivate.call(this, e);
-            var value = (_b = (_a = this._textValueComputed) === null || _a === void 0 ? void 0 : _a.getTime()) !== null && _b !== void 0 ? _b : Date.now();
+            var value = (_b = (_a = this.text.computed) === null || _a === void 0 ? void 0 : _a.getTime()) !== null && _b !== void 0 ? _b : Date.now();
             var dialog = this.dialog;
             dialog.current = new Date(value);
             dialog.new = new Date(value);
@@ -53568,11 +53900,11 @@
         Object.defineProperty(DButtonDatetime.prototype, "value", {
             get: function () {
                 var _a;
-                return (_a = this._textValueComputed) !== null && _a !== void 0 ? _a : new Date();
+                return (_a = this.text.computed) !== null && _a !== void 0 ? _a : new Date();
             },
             set: function (value) {
-                var textValueComputed = this._textValueComputed;
-                if (textValueComputed === undefined || textValueComputed.getTime() !== value.getTime()) {
+                var computed = this.text.computed;
+                if (computed === undefined || computed.getTime() !== value.getTime()) {
                     this.text = value;
                 }
             },
@@ -56657,7 +56989,7 @@
             var _a;
             _super.prototype.onActivate.call(this, e);
             var dialog = this.dialog;
-            var oldValue = (_a = this._textValueComputed) !== null && _a !== void 0 ? _a : null;
+            var oldValue = (_a = this.text.computed) !== null && _a !== void 0 ? _a : null;
             this._dialogSetter(dialog, oldValue);
             dialog.open(this).then(function () {
                 var newValue = _this._dialogGetter(dialog);
@@ -56690,7 +57022,7 @@
         Object.defineProperty(DButtonSelect.prototype, "value", {
             get: function () {
                 var _a;
-                return (_a = this._textValueComputed) !== null && _a !== void 0 ? _a : null;
+                return (_a = this.text.computed) !== null && _a !== void 0 ? _a : null;
             },
             set: function (value) {
                 this.text = value;
@@ -56717,7 +57049,7 @@
             var _this = this;
             var _a, _b;
             _super.prototype.onActivate.call(this, e);
-            var value = (_b = (_a = this._textValueComputed) === null || _a === void 0 ? void 0 : _a.getTime()) !== null && _b !== void 0 ? _b : Date.now();
+            var value = (_b = (_a = this.text.computed) === null || _a === void 0 ? void 0 : _a.getTime()) !== null && _b !== void 0 ? _b : Date.now();
             var dialog = this.dialog;
             dialog.current = new Date(value);
             dialog.new = new Date(value);
@@ -56769,11 +57101,11 @@
         Object.defineProperty(DButtonTime.prototype, "value", {
             get: function () {
                 var _a;
-                return (_a = this._textValueComputed) !== null && _a !== void 0 ? _a : new Date();
+                return (_a = this.text.computed) !== null && _a !== void 0 ? _a : new Date();
             },
             set: function (value) {
-                var textValueComputed = this._textValueComputed;
-                if (textValueComputed === undefined || textValueComputed.getTime() !== value.getTime()) {
+                var computed = this.text.computed;
+                if (computed === undefined || computed.getTime() !== value.getTime()) {
                     this.text = value;
                 }
             },
@@ -65933,7 +66265,7 @@
             _this._delayDone = (_a = delay === null || delay === void 0 ? void 0 : delay.done) !== null && _a !== void 0 ? _a : theme.getDoneDelay();
             var delayClose = delay === null || delay === void 0 ? void 0 : delay.close;
             _this._delayClose = delayClose !== undefined ? delayClose : theme.getCloseDelay();
-            _this._messageText = _this.message.text;
+            _this._messageText = _this.message.text.value;
             return _this;
         }
         DDialogProcessing.prototype.newMessage = function (options) {
@@ -66291,7 +66623,7 @@
             }
             state.unlock();
             if (this._isTextEnabled) {
-                this._textValueBackup = parent.text;
+                this._textValueBackup = parent.text.value;
                 var textValue = this._textValue;
                 if (textValue !== undefined) {
                     parent.text = textValue;
@@ -69433,7 +69765,7 @@
             var selecting = this._column.selecting;
             var dialog = selecting.dialog;
             if (dialog) {
-                var oldValue_1 = (_a = this._textValueComputed) !== null && _a !== void 0 ? _a : null;
+                var oldValue_1 = (_a = this.text.computed) !== null && _a !== void 0 ? _a : null;
                 selecting.setter(dialog, oldValue_1);
                 dialog.open(this).then(function () {
                     var newValue = selecting.getter(dialog);
@@ -69490,11 +69822,8 @@
         });
         Object.defineProperty(DTableBodyCellSelectDialog.prototype, "value", {
             get: function () {
-                var textValueComputed = this._textValueComputed;
-                if (textValueComputed !== undefined) {
-                    return textValueComputed;
-                }
-                return null;
+                var _a;
+                return (_a = this.text.computed) !== null && _a !== void 0 ? _a : null;
             },
             set: function (value) {
                 this.text = value;
@@ -69506,10 +69835,7 @@
             this._row = row;
             this._rowIndex = rowIndex;
             if (forcibly) {
-                this._textValue = value;
-                this._textValueComputed = value;
-                this.onTextChange();
-                this.createOrUpdateText();
+                this.text.setValue(value, true);
             }
             else {
                 this.text = value;
@@ -69638,7 +69964,7 @@
                 promise().then(function (newValue) {
                     var _a;
                     if (_this._isSyncEnabled) {
-                        var oldValue = (_a = _this._textValueComputed) !== null && _a !== void 0 ? _a : null;
+                        var oldValue = (_a = _this.text.computed) !== null && _a !== void 0 ? _a : null;
                         if (newValue !== oldValue) {
                             _this.text = newValue;
                             _this.onValueChange(newValue, oldValue);
@@ -69691,11 +70017,8 @@
         });
         Object.defineProperty(DTableBodyCellSelectPromise.prototype, "value", {
             get: function () {
-                var textValueComputed = this._textValueComputed;
-                if (textValueComputed !== undefined) {
-                    return textValueComputed;
-                }
-                return null;
+                var _a;
+                return (_a = this.text.computed) !== null && _a !== void 0 ? _a : null;
             },
             set: function (value) {
                 this.text = value;
@@ -69707,10 +70030,7 @@
             this._row = row;
             this._rowIndex = rowIndex;
             if (forcibly) {
-                this._textValue = value;
-                this._textValueComputed = value;
-                this.onTextChange();
-                this.createOrUpdateText();
+                this.text.setValue(value, true);
             }
             else {
                 this.text = value;
@@ -70165,24 +70485,21 @@
             this._rowIndex = rowIndex;
             if (value instanceof Date) {
                 if (forcibly) {
-                    this._textValue = value;
-                    this._textValueComputed = value;
-                    this.onTextChange();
-                    this.createOrUpdateText();
+                    this.text.setValue(value, true);
                 }
                 else {
                     this.text = value;
                 }
             }
             else if (isNumber(value)) {
-                var textValueComputed = this._textValueComputed;
-                if (textValueComputed === undefined) {
+                var text = this.text;
+                var computed = text.computed;
+                if (computed === undefined) {
                     this.text = new Date(value);
                 }
-                else if (textValueComputed.getTime() !== value) {
-                    textValueComputed.setTime(value);
-                    this.onTextChange();
-                    this.createOrUpdateText();
+                else if (computed.getTime() !== value) {
+                    computed.setTime(value);
+                    text.compute(true);
                 }
             }
             DTableBodyCells.set(this, row, columnIndex, this._column);
@@ -70258,24 +70575,21 @@
             this._rowIndex = rowIndex;
             if (value instanceof Date) {
                 if (forcibly) {
-                    this._textValue = value;
-                    this._textValueComputed = value;
-                    this.onTextChange();
-                    this.createOrUpdateText();
+                    this.text.setValue(value, true);
                 }
                 else {
                     this.text = value;
                 }
             }
             else if (isNumber(value)) {
-                var textValueComputed = this._textValueComputed;
-                if (textValueComputed == null) {
+                var text = this.text;
+                var computed = text.computed;
+                if (computed == null) {
                     this.text = new Date(value);
                 }
-                else if (textValueComputed.getTime() !== value) {
-                    textValueComputed.setTime(value);
-                    this.onTextChange();
-                    this.createOrUpdateText();
+                else if (computed.getTime() !== value) {
+                    computed.setTime(value);
+                    text.compute(true);
                 }
             }
             DTableBodyCells.set(this, row, columnIndex, this._column);
@@ -71201,24 +71515,21 @@
             this._rowIndex = rowIndex;
             if (value instanceof Date) {
                 if (forcibly) {
-                    this._textValue = value;
-                    this._textValueComputed = value;
-                    this.onTextChange();
-                    this.createOrUpdateText();
+                    this.text.setValue(value, true);
                 }
                 else {
                     this.text = value;
                 }
             }
             else if (isNumber(value)) {
-                var textValueComputed = this._textValueComputed;
-                if (textValueComputed == null) {
+                var text = this.text;
+                var computed = text.computed;
+                if (computed == null) {
                     this.text = new Date(value);
                 }
-                else if (textValueComputed.getTime() !== value) {
-                    textValueComputed.setTime(value);
-                    this.onTextChange();
-                    this.createOrUpdateText();
+                else if (computed.getTime() !== value) {
+                    computed.setTime(value);
+                    text.compute(true);
                 }
             }
             DTableBodyCells.set(this, row, columnIndex, this._column);