@wcardinal/wcardinal-ui 0.405.0 → 0.406.0

package/dist/wcardinal-ui.cjs.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
 
@@ -4552,21 +4552,6 @@ var hitTestBBox = function (x, y, ax, ay) {
     return -ax <= x && x <= +ax && -ay <= y && y <= +ay;
 };
 
-/*
- * Copyright (C) 2019 Toshiba Corporation
- * SPDX-License-Identifier: Apache-2.0
- */
-var toGradientSerialized = function (gradient) {
-    var points = gradient.points;
-    var result = "[".concat(gradient.direction);
-    for (var i = 0, imax = points.length, j = 1; i < imax; i += 1, j += 3) {
-        var point = points[i];
-        result += ",".concat(point.color, ",").concat(point.alpha, ",").concat(point.position);
-    }
-    result += "]";
-    return result;
-};
-
 /*
  * Copyright (C) 2019 Toshiba Corporation
  * SPDX-License-Identifier: Apache-2.0
@@ -4967,16 +4952,6 @@ var EShapeBase = /** @class */ (function (_super) {
             }
         }
     };
-    Object.defineProperty(EShapeBase.prototype, "image", {
-        get: function () {
-            return this._image;
-        },
-        set: function (image) {
-            this._image = image;
-        },
-        enumerable: false,
-        configurable: true
-    });
     Object.defineProperty(EShapeBase.prototype, "points", {
         get: function () {
             return this._points;
@@ -5125,20 +5100,6 @@ var EShapeBase = /** @class */ (function (_super) {
         }
         return childrenSerialized;
     };
-    EShapeBase.prototype.serializeImage = function (manager) {
-        var image = this._image;
-        return image != null ? manager.addResource(image.src) : -1;
-    };
-    EShapeBase.prototype.serializeGradient = function (manager) {
-        var gradient = this.gradient;
-        if (gradient != null) {
-            if (gradient.serialized == null) {
-                gradient.serialized = toGradientSerialized(gradient);
-            }
-            return manager.addResource(gradient.serialized);
-        }
-        return -1;
-    };
     EShapeBase.prototype.serializeState = function (manager) {
         var state = this.state;
         return (this.interactive ? 1 : 0) | (state.isFocusable ? 0 : 2) | (state.isActive ? 4 : 0);
@@ -8156,6 +8117,21 @@ var EShapeTextImpl = /** @class */ (function () {
     return EShapeTextImpl;
 }());
 
+/*
+ * Copyright (C) 2019 Toshiba Corporation
+ * SPDX-License-Identifier: Apache-2.0
+ */
+var toGradientSerialized = function (gradient) {
+    var points = gradient.points;
+    var result = "[".concat(gradient.direction);
+    for (var i = 0, imax = points.length, j = 1; i < imax; i += 1, j += 3) {
+        var point = points[i];
+        result += ",".concat(point.color, ",").concat(point.alpha, ",").concat(point.position);
+    }
+    result += "]";
+    return result;
+};
+
 /*
  * Copyright (C) 2019 Toshiba Corporation
  * SPDX-License-Identifier: Apache-2.0
@@ -8224,11 +8200,9 @@ var EShapePrimitive = /** @class */ (function (_super) {
             if (this._image !== image) {
                 if (image != null) {
                     this._image = image;
-                    this.imageSrc = image.src;
                 }
                 else {
                     this._image = undefined;
-                    this.imageSrc = undefined;
                 }
                 var parent_1 = this.parent;
                 if (parent_1 != null) {
@@ -8239,6 +8213,20 @@ var EShapePrimitive = /** @class */ (function (_super) {
         enumerable: false,
         configurable: true
     });
+    EShapePrimitive.prototype.serializeImage = function (manager) {
+        var image = this._image;
+        return image != null ? manager.addResource(image.url) : -1;
+    };
+    EShapePrimitive.prototype.serializeGradient = function (manager) {
+        var gradient = this.gradient;
+        if (gradient != null) {
+            if (gradient.serialized == null) {
+                gradient.serialized = toGradientSerialized(gradient);
+            }
+            return manager.addResource(gradient.serialized);
+        }
+        return -1;
+    };
     return EShapePrimitive;
 }(EShapeBase));
 
@@ -17950,6 +17938,9 @@ var EShapeGroupViewer = /** @class */ (function (_super) {
         enumerable: false,
         configurable: true
     });
+    EShapeGroupViewer.prototype.serializeGradient = function (manager) {
+        return -1;
+    };
     Object.defineProperty(EShapeGroupViewer.prototype, "radius", {
         get: function () {
             return 0;
@@ -17970,6 +17961,9 @@ var EShapeGroupViewer = /** @class */ (function (_super) {
         enumerable: false,
         configurable: true
     });
+    EShapeGroupViewer.prototype.serializeImage = function (manager) {
+        return -1;
+    };
     Object.defineProperty(EShapeGroupViewer.prototype, "points", {
         get: function () {
             return undefined;
@@ -21176,12 +21170,10 @@ var DynamicSDFFontGenerator = /** @class */ (function () {
             }
         }
     };
-    DynamicSDFFontGenerator.prototype.updateTexture = function (source) {
+    DynamicSDFFontGenerator.prototype.updateTexture = function (width, height, source) {
         var gl = this._gl;
         var canvas = this._canvas;
         if (gl != null && gl.isContextLost() !== true && canvas != null) {
-            var width = source.width;
-            var height = source.height;
             if (canvas.width !== width || canvas.height !== height) {
                 canvas.width = width;
                 canvas.height = height;
@@ -21544,7 +21536,7 @@ var DynamicSDFFontAtlas = /** @class */ (function () {
                         context.fillText(data.character, data.origin.x, data.origin.y);
                     }
                     // Convert to SDF font texture
-                    generator.updateTexture(canvas);
+                    generator.updateTexture(width, height, canvas);
                     generator.render();
                     generator.read(canvas);
                     return true;
@@ -21695,9 +21687,9 @@ var DynamicSDFFontAtlases = /** @class */ (function () {
  */
 var DynamicAtlasItemImage = /** @class */ (function (_super) {
     __extends(DynamicAtlasItemImage, _super);
-    function DynamicAtlasItemImage(image, baseTexture) {
-        var _this = _super.call(this, image.src, image.width / baseTexture.resolution, image.height / baseTexture.resolution, 0, baseTexture) || this;
-        _this.image = image;
+    function DynamicAtlasItemImage(src, width, height, source, baseTexture) {
+        var _this = _super.call(this, src, width / baseTexture.resolution, height / baseTexture.resolution, 0, baseTexture) || this;
+        _this.source = source;
         return _this;
     }
     DynamicAtlasItemImage.prototype.render = function (context) {
@@ -21706,12 +21698,21 @@ var DynamicAtlasItemImage = /** @class */ (function (_super) {
         var y = frame.y;
         var w = frame.width;
         var h = frame.height;
-        var image = this.image;
-        context.drawImage(image, x, y, w, h);
-        context.drawImage(image, 0, 0, 1, h, x - 1, y - 1, 1, h + 2);
-        context.drawImage(image, 0, 0, w, 1, x, y - 1, w, 1);
-        context.drawImage(image, w - 1, 0, 1, h, x + w, y - 1, 1, h + 2);
-        context.drawImage(image, 0, h - 1, w, 1, x, y + h, w, 1);
+        var source = this.source;
+        if (source instanceof ImageData) {
+            context.putImageData(source, x, y);
+            context.putImageData(source, x - 1, y, 0, 0, 1, h);
+            context.putImageData(source, x, y - 1, 0, 0, w, 1);
+            context.putImageData(source, x + w, y, w - 1, 0, 1, h);
+            context.putImageData(source, x, y + h, 0, h - 1, w, 1);
+        }
+        else {
+            context.drawImage(source, x, y, w, h);
+            context.drawImage(source, 0, 0, 1, h, x - 1, y - 1, 1, h + 2);
+            context.drawImage(source, 0, 0, w, 1, x, y - 1, w, 1);
+            context.drawImage(source, w - 1, 0, 1, h, x + w, y - 1, 1, h + 2);
+            context.drawImage(source, 0, h - 1, w, 1, x, y + h, w, 1);
+        }
     };
     return DynamicAtlasItemImage;
 }(DynamicAtlasItem));
@@ -22064,24 +22065,18 @@ var EShapeRenderer = /** @class */ (function (_super) {
     };
     EShapeRenderer.prototype.updateAtlas = function (shape, atlas, fontAtlases, defaultTexture, baseTexture) {
         // Texture
-        // Do not access the shape.image.src here.
+        // Do not access the shape.image.source here.
         // It slows down the rendering speed significantly.
-        var imageSrc = shape.imageSrc;
-        if (imageSrc != null) {
-            var textureItem = atlas.get(imageSrc);
+        var image = shape.image;
+        if (image != null) {
+            var textureItem = atlas.get(image.url);
             if (textureItem != null) {
                 shape.texture = textureItem.texture;
             }
             else {
-                var image = shape.image;
-                if (image != null) {
-                    var newTextureItem = new DynamicAtlasItemImage(image, baseTexture);
-                    shape.texture = newTextureItem.texture;
-                    atlas.set(newTextureItem.id, newTextureItem);
-                }
-                else {
-                    shape.texture = defaultTexture;
-                }
+                var newTextureItem = new DynamicAtlasItemImage(image.url, image.width, image.height, image.source, baseTexture);
+                shape.texture = newTextureItem.texture;
+                atlas.set(newTextureItem.id, newTextureItem);
             }
         }
         else {
@@ -22249,7 +22244,7 @@ var EShapeContainer = /** @class */ (function (_super) {
         _this._pixelScale = 1;
         _this._pixelScaleId = -2; // Since this._shapeScaleId starts from -1.
         _this._shapeScale = 1;
-        _this._shapeScaleId = -1; // Since PIXI.Transform._worldID starts from zero.
+        _this._shapeScaleId = -1; // Since Transform._worldID starts from zero.
         _this._work = new pixi_js.Point();
         _this._buffers = [];
         return _this;
@@ -28966,345 +28961,6 @@ var DDynamicTextGeometry = /** @class */ (function (_super) {
     return DDynamicTextGeometry;
 }(pixi_js.MeshGeometry));
 
-/*
- * Copyright (C) 2019 Toshiba Corporation
- * SPDX-License-Identifier: Apache-2.0
- */
-var DDynamicTextStyle = /** @class */ (function () {
-    function DDynamicTextStyle(options, onChange) {
-        var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l;
-        this._id = 0;
-        this._idApproved = -1;
-        var defaultOptions = this.getDefaultOptions();
-        if (options) {
-            this._align = (_a = options.align) !== null && _a !== void 0 ? _a : defaultOptions.align;
-            this._fontFamily = (_b = options.fontFamily) !== null && _b !== void 0 ? _b : defaultOptions.fontFamily;
-            this._fontSize = (_c = options.fontSize) !== null && _c !== void 0 ? _c : defaultOptions.fontSize;
-            this._fontStyle = (_d = options.fontStyle) !== null && _d !== void 0 ? _d : defaultOptions.fontStyle;
-            this._fontVariant = (_e = options.fontVariant) !== null && _e !== void 0 ? _e : defaultOptions.fontVariant;
-            this._fontWeight = (_f = options.fontWeight) !== null && _f !== void 0 ? _f : defaultOptions.fontWeight;
-            this._fill = (_g = options.fill) !== null && _g !== void 0 ? _g : defaultOptions.fill;
-            this._clipping = (_h = options.clipping) !== null && _h !== void 0 ? _h : defaultOptions.clipping;
-            this._fitting = (_j = options.fitting) !== null && _j !== void 0 ? _j : defaultOptions.fitting;
-            this._wordWrap = toEnum((_k = options.wordWrap) !== null && _k !== void 0 ? _k : defaultOptions.wordWrap, DDynamicTextStyleWordWrap);
-            this._lineHeight = (_l = options.lineHeight) !== null && _l !== void 0 ? _l : defaultOptions.lineHeight;
-        }
-        else {
-            this._align = defaultOptions.align;
-            this._fontFamily = defaultOptions.fontFamily;
-            this._fontSize = defaultOptions.fontSize;
-            this._fontStyle = defaultOptions.fontStyle;
-            this._fontVariant = defaultOptions.fontVariant;
-            this._fontWeight = defaultOptions.fontWeight;
-            this._fill = defaultOptions.fill;
-            this._clipping = defaultOptions.clipping;
-            this._fitting = defaultOptions.fitting;
-            this._wordWrap = toEnum(defaultOptions.wordWrap, DDynamicTextStyleWordWrap);
-            this._lineHeight = defaultOptions.lineHeight;
-        }
-        this._fontSizeFitted = this._fontSize;
-        this._lineHeightFitted = this._lineHeight;
-        this._isFontFitted = false;
-        this._fontIdFontSize = this._fontSize;
-        this._fontIdId = -1;
-        this._fontId = "";
-        this._fontIdApproved = "";
-        this._fillApproved = 0x000000;
-        this._onChange = onChange;
-    }
-    DDynamicTextStyle.prototype.getDefaultOptions = function () {
-        var result = DDynamicTextStyle.DEFAULT_OPTIONS;
-        if (result == null) {
-            result = this.newDefaultOptions();
-            DDynamicTextStyle.DEFAULT_OPTIONS = result;
-        }
-        return result;
-    };
-    DDynamicTextStyle.prototype.newDefaultOptions = function () {
-        var theme = DThemes.getInstance().get("DBase");
-        return {
-            align: "left",
-            fontFamily: theme.getFontFamilly(),
-            fontSize: theme.getFontSize(),
-            fontStyle: "normal",
-            fontVariant: "normal",
-            fontWeight: "normal",
-            fill: theme.getColor(new DBaseStateSetImpl()),
-            clipping: true,
-            fitting: false,
-            wordWrap: DDynamicTextStyleWordWrap.NONE,
-            lineHeight: theme.getLineHeight()
-        };
-    };
-    Object.defineProperty(DDynamicTextStyle.prototype, "id", {
-        get: function () {
-            return this._id;
-        },
-        enumerable: false,
-        configurable: true
-    });
-    Object.defineProperty(DDynamicTextStyle.prototype, "idApproved", {
-        get: function () {
-            return this._idApproved;
-        },
-        enumerable: false,
-        configurable: true
-    });
-    Object.defineProperty(DDynamicTextStyle.prototype, "fontId", {
-        get: function () {
-            this.update();
-            return this._fontId;
-        },
-        enumerable: false,
-        configurable: true
-    });
-    Object.defineProperty(DDynamicTextStyle.prototype, "fontIdFontSize", {
-        get: function () {
-            this.update();
-            return this._fontSizeFitted;
-        },
-        enumerable: false,
-        configurable: true
-    });
-    Object.defineProperty(DDynamicTextStyle.prototype, "fontIdApproved", {
-        get: function () {
-            return this._fontIdApproved;
-        },
-        enumerable: false,
-        configurable: true
-    });
-    Object.defineProperty(DDynamicTextStyle.prototype, "fill", {
-        get: function () {
-            return this._fill;
-        },
-        set: function (fill) {
-            if (this._fill !== fill) {
-                this._fill = fill;
-                this.onChange();
-            }
-        },
-        enumerable: false,
-        configurable: true
-    });
-    DDynamicTextStyle.prototype.onChange = function () {
-        this._id += 1;
-        this._onChange();
-    };
-    Object.defineProperty(DDynamicTextStyle.prototype, "fillApproved", {
-        get: function () {
-            return this._fillApproved;
-        },
-        enumerable: false,
-        configurable: true
-    });
-    DDynamicTextStyle.prototype.approve = function () {
-        this.update();
-        this._idApproved = this._id;
-        this._fontIdApproved = this._fontId;
-        this._fillApproved = this._fill;
-    };
-    Object.defineProperty(DDynamicTextStyle.prototype, "fontFamily", {
-        get: function () {
-            return this._fontFamily;
-        },
-        set: function (fontFamily) {
-            if (this._fontFamily !== fontFamily) {
-                this._fontFamily = fontFamily;
-                this.onChange();
-            }
-        },
-        enumerable: false,
-        configurable: true
-    });
-    Object.defineProperty(DDynamicTextStyle.prototype, "fontSize", {
-        get: function () {
-            return this._fontSize;
-        },
-        set: function (fontSize) {
-            if (this._fontSize !== fontSize) {
-                this._fontSize = fontSize;
-                this._fontSizeFitted = fontSize;
-                this._lineHeightFitted = this._lineHeight;
-                this._isFontFitted = false;
-                this.onChange();
-            }
-        },
-        enumerable: false,
-        configurable: true
-    });
-    Object.defineProperty(DDynamicTextStyle.prototype, "fontSizeFitted", {
-        get: function () {
-            return this._fontSizeFitted;
-        },
-        enumerable: false,
-        configurable: true
-    });
-    Object.defineProperty(DDynamicTextStyle.prototype, "isFontFitted", {
-        get: function () {
-            return this._isFontFitted;
-        },
-        enumerable: false,
-        configurable: true
-    });
-    Object.defineProperty(DDynamicTextStyle.prototype, "fontStyle", {
-        get: function () {
-            return this._fontStyle;
-        },
-        set: function (fontStyle) {
-            if (this._fontStyle !== fontStyle) {
-                this._fontStyle = fontStyle;
-                this.onChange();
-            }
-        },
-        enumerable: false,
-        configurable: true
-    });
-    Object.defineProperty(DDynamicTextStyle.prototype, "fontVariant", {
-        get: function () {
-            return this._fontVariant;
-        },
-        set: function (fontVariant) {
-            if (this._fontVariant !== fontVariant) {
-                this._fontVariant = fontVariant;
-                this.onChange();
-            }
-        },
-        enumerable: false,
-        configurable: true
-    });
-    Object.defineProperty(DDynamicTextStyle.prototype, "fontWeight", {
-        get: function () {
-            return this._fontWeight;
-        },
-        set: function (fontWeight) {
-            if (this._fontWeight !== fontWeight) {
-                this._fontWeight = fontWeight;
-                this.onChange();
-            }
-        },
-        enumerable: false,
-        configurable: true
-    });
-    DDynamicTextStyle.prototype.update = function () {
-        if (this._fontIdId !== this._id) {
-            this._fontIdId = this._id;
-            var fontIdFontSize = this._fitting ? this._fontSizeFitted : this._fontSize;
-            this._fontIdFontSize = fontIdFontSize;
-            this._fontId = this.toFontId(fontIdFontSize);
-        }
-    };
-    DDynamicTextStyle.prototype.toFontId = function (fontSize) {
-        return "".concat(this._fontStyle, " ").concat(this._fontVariant, " ").concat(this._fontWeight, " ").concat(fontSize, "px ").concat(this._fontFamily);
-    };
-    Object.defineProperty(DDynamicTextStyle.prototype, "clipping", {
-        get: function () {
-            return this._clipping;
-        },
-        set: function (clipping) {
-            if (this._clipping !== clipping) {
-                this._clipping = clipping;
-                this.onChange();
-            }
-        },
-        enumerable: false,
-        configurable: true
-    });
-    Object.defineProperty(DDynamicTextStyle.prototype, "fitting", {
-        get: function () {
-            return this._fitting;
-        },
-        set: function (fitting) {
-            if (this._fitting !== fitting) {
-                this._fitting = fitting;
-                this.onChange();
-            }
-        },
-        enumerable: false,
-        configurable: true
-    });
-    Object.defineProperty(DDynamicTextStyle.prototype, "wordWrap", {
-        get: function () {
-            return this._wordWrap;
-        },
-        set: function (wordWrap) {
-            if (this._wordWrap !== wordWrap) {
-                this._wordWrap = wordWrap;
-                this.onChange();
-            }
-        },
-        enumerable: false,
-        configurable: true
-    });
-    Object.defineProperty(DDynamicTextStyle.prototype, "lineHeight", {
-        get: function () {
-            return this._lineHeight;
-        },
-        set: function (lineHeight) {
-            if (this._lineHeight !== lineHeight) {
-                this._lineHeight = lineHeight;
-                this._fontSizeFitted = this._fontSize;
-                this._lineHeightFitted = lineHeight;
-                this._isFontFitted = false;
-                this.onChange();
-            }
-        },
-        enumerable: false,
-        configurable: true
-    });
-    Object.defineProperty(DDynamicTextStyle.prototype, "lineHeightFitted", {
-        get: function () {
-            return this._lineHeightFitted;
-        },
-        set: function (lineHeightFitted) {
-            if (this._lineHeightFitted !== lineHeightFitted) {
-                this._lineHeightFitted = lineHeightFitted;
-                this.onChange();
-            }
-        },
-        enumerable: false,
-        configurable: true
-    });
-    DDynamicTextStyle.prototype.fit = function (fontSize, lineHeight) {
-        var isChanged = false;
-        if (fontSize < this._fontSizeFitted) {
-            this._fontSizeFitted = fontSize;
-            isChanged = true;
-        }
-        if (this._lineHeightFitted !== lineHeight) {
-            this._lineHeightFitted = lineHeight;
-            isChanged = true;
-        }
-        if (this._isFontFitted !== true) {
-            this._isFontFitted = true;
-            isChanged = true;
-        }
-        if (isChanged) {
-            this.onChange();
-        }
-        return isChanged;
-    };
-    DDynamicTextStyle.prototype.unfit = function () {
-        var isChanged = false;
-        if (this._isFontFitted !== false) {
-            this._isFontFitted = false;
-            isChanged = true;
-        }
-        if (this._fontSizeFitted !== this._fontSize) {
-            this._fontSizeFitted = this._fontSize;
-            isChanged = true;
-        }
-        if (this._lineHeightFitted !== this._lineHeight) {
-            this._lineHeightFitted = this._lineHeight;
-            isChanged = true;
-        }
-        if (isChanged) {
-            this.onChange();
-        }
-        return isChanged;
-    };
-    return DDynamicTextStyle;
-}());
-
 /*
  * Copyright (C) 2019 Toshiba Corporation
  * SPDX-License-Identifier: Apache-2.0
@@ -29382,13 +29038,11 @@ var UtilFont = /** @class */ (function () {
  */
 var DDynamicText = /** @class */ (function (_super) {
     __extends(DDynamicText, _super);
-    function DDynamicText(options) {
+    function DDynamicText(style) {
         var _this = _super.call(this, new DDynamicTextGeometry(), new pixi_js.MeshMaterial(pixi_js.Texture.EMPTY)) || this;
-        _this._style = new DDynamicTextStyle(options, function () {
-            _this._isDirty = true;
-            _this._isGeometryDirty = true;
-            _this._atlas = null;
-            _this.update_();
+        _this._style = style;
+        style.on("change", function () {
+            _this.onStyleChange();
         });
         _this._text = "";
         _this._textApproved = "";
@@ -29412,15 +29066,21 @@ var DDynamicText = /** @class */ (function (_super) {
         };
         return _this;
     }
+    DDynamicText.prototype.onStyleChange = function () {
+        this._isDirty = true;
+        this._isGeometryDirty = true;
+        this._atlas = null;
+        this.update_();
+    };
     DDynamicText.prototype.update_ = function () {
         var layer = DApplications.getLayer(this);
         if (layer) {
-            var style = this._style;
             if (this._isDirty) {
                 this._isDirty = false;
                 var text = this._text;
                 var textApproved = this._textApproved;
                 this._textApproved = text;
+                var style = this._style;
                 var fontId = style.fontId;
                 var fontIdApproved = style.fontIdApproved;
                 var fontIdFontSize = style.fontIdFontSize;
@@ -29613,203 +29273,737 @@ var DDynamicText = /** @class */ (function (_super) {
  * Copyright (C) 2019 Toshiba Corporation
  * SPDX-License-Identifier: Apache-2.0
  */
-var toTextStyle = function (theme, options, state) {
-    var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l;
-    var style = (_a = options === null || options === void 0 ? void 0 : options.text) === null || _a === void 0 ? void 0 : _a.style;
-    if (style != null) {
-        var fill = (_b = style.fill) !== null && _b !== void 0 ? _b : theme.getColor(state);
-        var fontSize = (_c = style.fontSize) !== null && _c !== void 0 ? _c : theme.getFontSize();
-        var fontFamily = (_d = style.fontFamily) !== null && _d !== void 0 ? _d : theme.getFontFamilly();
-        var fontWeight = (_e = style.fontWeight) !== null && _e !== void 0 ? _e : theme.getFontWeight();
-        var fontStyle = (_f = style.fontStyle) !== null && _f !== void 0 ? _f : theme.getFontStyle();
-        var fontVariant = (_g = style.fontVariant) !== null && _g !== void 0 ? _g : theme.getFontVariant();
-        var clipping = (_h = style.clipping) !== null && _h !== void 0 ? _h : theme.getTextStyleClipping();
-        var fitting = (_j = style.fitting) !== null && _j !== void 0 ? _j : theme.getTextStyleFitting();
-        var wordWrap = (_k = style.wordWrap) !== null && _k !== void 0 ? _k : theme.getTextStyleWordWrap();
-        var lineHeight = (_l = style.lineHeight) !== null && _l !== void 0 ? _l : theme.getLineHeight();
-        return {
-            fill: fill,
-            fontSize: fontSize,
-            fontFamily: fontFamily,
-            fontWeight: fontWeight,
-            fontStyle: fontStyle,
-            fontVariant: fontVariant,
-            clipping: clipping,
-            fitting: fitting,
-            wordWrap: wordWrap,
-            lineHeight: lineHeight
-        };
+var DDynamicTextStyle = /** @class */ (function (_super) {
+    __extends(DDynamicTextStyle, _super);
+    function DDynamicTextStyle(parent, theme, options) {
+        var _a, _b, _c, _d, _e, _f, _g, _h, _j;
+        var _this = _super.call(this) || this;
+        _this._id = 0;
+        _this._idApproved = -1;
+        if (options) {
+            _this._fontFamily = (_a = options.fontFamily) !== null && _a !== void 0 ? _a : theme.getFontFamilly();
+            _this._fontSize = (_b = options.fontSize) !== null && _b !== void 0 ? _b : theme.getFontSize();
+            _this._fontStyle = (_c = options.fontStyle) !== null && _c !== void 0 ? _c : theme.getFontStyle();
+            _this._fontVariant = (_d = options.fontVariant) !== null && _d !== void 0 ? _d : theme.getFontVariant();
+            _this._fontWeight = (_e = options.fontWeight) !== null && _e !== void 0 ? _e : theme.getFontWeight();
+            _this._clipping = (_f = options.clipping) !== null && _f !== void 0 ? _f : theme.getTextStyleClipping();
+            _this._fitting = (_g = options.fitting) !== null && _g !== void 0 ? _g : theme.getTextStyleFitting();
+            _this._wordWrap = toEnum((_h = options.wordWrap) !== null && _h !== void 0 ? _h : theme.getTextStyleWordWrap(), DDynamicTextStyleWordWrap);
+            _this._lineHeight = (_j = options.lineHeight) !== null && _j !== void 0 ? _j : theme.getLineHeight();
+        }
+        else {
+            _this._fontFamily = theme.getFontFamilly();
+            _this._fontSize = theme.getFontSize();
+            _this._fontStyle = theme.getFontStyle();
+            _this._fontVariant = theme.getFontVariant();
+            _this._fontWeight = theme.getFontWeight();
+            _this._clipping = theme.getTextStyleClipping();
+            _this._fitting = theme.getTextStyleFitting();
+            _this._wordWrap = theme.getTextStyleWordWrap();
+            _this._lineHeight = theme.getLineHeight();
+        }
+        _this._fill = theme.getColor(parent.state);
+        _this._fontSizeFitted = _this._fontSize;
+        _this._lineHeightFitted = _this._lineHeight;
+        _this._isFontFitted = false;
+        _this._fontIdFontSize = _this._fontSize;
+        _this._fontIdId = -1;
+        _this._fontId = "";
+        _this._fontIdApproved = "";
+        _this._fillApproved = 0x000000;
+        return _this;
     }
-    return {
-        fill: theme.getColor(state),
-        fontSize: theme.getFontSize(),
-        fontFamily: theme.getFontFamilly(),
-        fontWeight: theme.getFontWeight(),
-        fontStyle: theme.getFontStyle(),
-        fontVariant: theme.getFontVariant(),
-        clipping: theme.getTextStyleClipping(),
-        fitting: theme.getTextStyleFitting(),
-        wordWrap: theme.getTextStyleWordWrap(),
-        lineHeight: theme.getLineHeight()
-    };
-};
-var toTextAlign = function (theme, options) {
-    var _a, _b, _c;
-    var align = (_a = options === null || options === void 0 ? void 0 : options.text) === null || _a === void 0 ? void 0 : _a.align;
-    return {
-        vertical: toEnum((_b = align === null || align === void 0 ? void 0 : align.vertical) !== null && _b !== void 0 ? _b : theme.getTextAlignVertical(), DAlignVertical),
-        horizontal: toEnum((_c = align === null || align === void 0 ? void 0 : align.horizontal) !== null && _c !== void 0 ? _c : theme.getTextAlignHorizontal(), DAlignHorizontal)
+    Object.defineProperty(DDynamicTextStyle.prototype, "id", {
+        get: function () {
+            return this._id;
+        },
+        enumerable: false,
+        configurable: true
+    });
+    Object.defineProperty(DDynamicTextStyle.prototype, "idApproved", {
+        get: function () {
+            return this._idApproved;
+        },
+        enumerable: false,
+        configurable: true
+    });
+    Object.defineProperty(DDynamicTextStyle.prototype, "fontId", {
+        get: function () {
+            this.update();
+            return this._fontId;
+        },
+        enumerable: false,
+        configurable: true
+    });
+    Object.defineProperty(DDynamicTextStyle.prototype, "fontIdFontSize", {
+        get: function () {
+            this.update();
+            return this._fontSizeFitted;
+        },
+        enumerable: false,
+        configurable: true
+    });
+    Object.defineProperty(DDynamicTextStyle.prototype, "fontIdApproved", {
+        get: function () {
+            return this._fontIdApproved;
+        },
+        enumerable: false,
+        configurable: true
+    });
+    Object.defineProperty(DDynamicTextStyle.prototype, "fill", {
+        get: function () {
+            return this._fill;
+        },
+        set: function (fill) {
+            if (this._fill !== fill) {
+                this._fill = fill;
+                this.onChange();
+            }
+        },
+        enumerable: false,
+        configurable: true
+    });
+    DDynamicTextStyle.prototype.onChange = function () {
+        this._id += 1;
+        this.emit("change", this);
     };
-};
-/**
- * A base class for UI classes with a text support.
- * See {@link DTextBaseEvents} for event defaults.
- */
-var DTextBase = /** @class */ (function (_super) {
-    __extends(DTextBase, _super);
-    function DTextBase() {
-        return _super !== null && _super.apply(this, arguments) || this;
-    }
-    DTextBase.prototype.init = function (options) {
-        var _a, _b, _c, _d;
-        _super.prototype.init.call(this, options);
-        var theme = this.theme;
-        this._textValue = (_b = (_a = options === null || options === void 0 ? void 0 : options.text) === null || _a === void 0 ? void 0 : _a.value) !== null && _b !== void 0 ? _b : theme.newTextValue();
-        this._textValueComputed = this.computeTextValue();
-        var text = options === null || options === void 0 ? void 0 : options.text;
-        this._textColor = text === null || text === void 0 ? void 0 : text.color;
-        this._textAlpha = text === null || text === void 0 ? void 0 : text.alpha;
-        this._textStyle = toTextStyle(theme, options, this.state);
-        this._textAlign = toTextAlign(theme, options);
-        this._textFormatter = (_c = text === null || text === void 0 ? void 0 : text.formatter) !== null && _c !== void 0 ? _c : theme.getTextFormatter();
-        this._isTextVisible = true;
-        this._isOverflowMaskEnabled = (_d = options === null || options === void 0 ? void 0 : options.mask) !== null && _d !== void 0 ? _d : theme.isOverflowMaskEnabled();
-        this.onTextChange();
-        this.createOrUpdateText();
+    Object.defineProperty(DDynamicTextStyle.prototype, "fillApproved", {
+        get: function () {
+            return this._fillApproved;
+        },
+        enumerable: false,
+        configurable: true
+    });
+    DDynamicTextStyle.prototype.approve = function () {
+        this.update();
+        this._idApproved = this._id;
+        this._fontIdApproved = this._fontId;
+        this._fillApproved = this._fill;
     };
-    Object.defineProperty(DTextBase.prototype, "text", {
+    Object.defineProperty(DDynamicTextStyle.prototype, "fontFamily", {
         get: function () {
-            return this._textValue;
+            return this._fontFamily;
         },
-        set: function (text) {
-            if (this._textValue !== text) {
-                this._textValue = text;
-                this.updateTextValue();
+        set: function (fontFamily) {
+            if (this._fontFamily !== fontFamily) {
+                this._fontFamily = fontFamily;
+                this.onChange();
             }
         },
         enumerable: false,
         configurable: true
     });
-    DTextBase.prototype.onTextChange = function () {
-        // DO NOTHING
+    Object.defineProperty(DDynamicTextStyle.prototype, "fontSize", {
+        get: function () {
+            return this._fontSize;
+        },
+        set: function (fontSize) {
+            if (this._fontSize !== fontSize) {
+                this._fontSize = fontSize;
+                this._fontSizeFitted = fontSize;
+                this._lineHeightFitted = this._lineHeight;
+                this._isFontFitted = false;
+                this.onChange();
+            }
+        },
+        enumerable: false,
+        configurable: true
+    });
+    Object.defineProperty(DDynamicTextStyle.prototype, "fontSizeFitted", {
+        get: function () {
+            return this._fontSizeFitted;
+        },
+        enumerable: false,
+        configurable: true
+    });
+    Object.defineProperty(DDynamicTextStyle.prototype, "isFontFitted", {
+        get: function () {
+            return this._isFontFitted;
+        },
+        enumerable: false,
+        configurable: true
+    });
+    Object.defineProperty(DDynamicTextStyle.prototype, "fontStyle", {
+        get: function () {
+            return this._fontStyle;
+        },
+        set: function (fontStyle) {
+            if (this._fontStyle !== fontStyle) {
+                this._fontStyle = fontStyle;
+                this.onChange();
+            }
+        },
+        enumerable: false,
+        configurable: true
+    });
+    Object.defineProperty(DDynamicTextStyle.prototype, "fontVariant", {
+        get: function () {
+            return this._fontVariant;
+        },
+        set: function (fontVariant) {
+            if (this._fontVariant !== fontVariant) {
+                this._fontVariant = fontVariant;
+                this.onChange();
+            }
+        },
+        enumerable: false,
+        configurable: true
+    });
+    Object.defineProperty(DDynamicTextStyle.prototype, "fontWeight", {
+        get: function () {
+            return this._fontWeight;
+        },
+        set: function (fontWeight) {
+            if (this._fontWeight !== fontWeight) {
+                this._fontWeight = fontWeight;
+                this.onChange();
+            }
+        },
+        enumerable: false,
+        configurable: true
+    });
+    DDynamicTextStyle.prototype.update = function () {
+        if (this._fontIdId !== this._id) {
+            this._fontIdId = this._id;
+            var fontIdFontSize = this._fitting ? this._fontSizeFitted : this._fontSize;
+            this._fontIdFontSize = fontIdFontSize;
+            this._fontId = this.toFontId(fontIdFontSize);
+        }
     };
-    DTextBase.prototype.computeTextValue = function () {
-        var textValue = this._textValue;
-        if (textValue !== undefined) {
-            if (isFunction(textValue)) {
-                var result = textValue(this.state);
-                if (result !== undefined) {
-                    return result;
-                }
+    DDynamicTextStyle.prototype.toFontId = function (fontSize) {
+        return "".concat(this._fontStyle, " ").concat(this._fontVariant, " ").concat(this._fontWeight, " ").concat(fontSize, "px ").concat(this._fontFamily);
+    };
+    Object.defineProperty(DDynamicTextStyle.prototype, "clipping", {
+        get: function () {
+            return this._clipping;
+        },
+        set: function (clipping) {
+            if (this._clipping !== clipping) {
+                this._clipping = clipping;
+                this.onChange();
             }
-            else {
-                return textValue;
+        },
+        enumerable: false,
+        configurable: true
+    });
+    Object.defineProperty(DDynamicTextStyle.prototype, "fitting", {
+        get: function () {
+            return this._fitting;
+        },
+        set: function (fitting) {
+            if (this._fitting !== fitting) {
+                this._fitting = fitting;
+                this.onChange();
+            }
+        },
+        enumerable: false,
+        configurable: true
+    });
+    Object.defineProperty(DDynamicTextStyle.prototype, "wordWrap", {
+        get: function () {
+            return this._wordWrap;
+        },
+        set: function (wordWrap) {
+            if (this._wordWrap !== wordWrap) {
+                this._wordWrap = wordWrap;
+                this.onChange();
+            }
+        },
+        enumerable: false,
+        configurable: true
+    });
+    Object.defineProperty(DDynamicTextStyle.prototype, "lineHeight", {
+        get: function () {
+            return this._lineHeight;
+        },
+        set: function (lineHeight) {
+            if (this._lineHeight !== lineHeight) {
+                this._lineHeight = lineHeight;
+                this._fontSizeFitted = this._fontSize;
+                this._lineHeightFitted = lineHeight;
+                this._isFontFitted = false;
+                this.onChange();
+            }
+        },
+        enumerable: false,
+        configurable: true
+    });
+    Object.defineProperty(DDynamicTextStyle.prototype, "lineHeightFitted", {
+        get: function () {
+            return this._lineHeightFitted;
+        },
+        set: function (lineHeightFitted) {
+            if (this._lineHeightFitted !== lineHeightFitted) {
+                this._lineHeightFitted = lineHeightFitted;
+                this.onChange();
             }
+        },
+        enumerable: false,
+        configurable: true
+    });
+    DDynamicTextStyle.prototype.fit = function (fontSize, lineHeight) {
+        var isChanged = false;
+        if (fontSize < this._fontSizeFitted) {
+            this._fontSizeFitted = fontSize;
+            isChanged = true;
+        }
+        if (this._lineHeightFitted !== lineHeight) {
+            this._lineHeightFitted = lineHeight;
+            isChanged = true;
+        }
+        if (this._isFontFitted !== true) {
+            this._isFontFitted = true;
+            isChanged = true;
+        }
+        if (isChanged) {
+            this.onChange();
         }
-        return this.theme.getTextValue(this.state);
+        return isChanged;
     };
-    DTextBase.prototype.createOrUpdateText = function () {
-        var textValueComputed = this._textValueComputed;
-        if (textValueComputed !== undefined) {
-            var formatted = this._textFormatter(textValueComputed, this);
-            var text = this._text;
-            if (text == null) {
-                if (0 < formatted.length) {
-                    var newText = this.newText();
-                    newText.visible = this._isTextVisible;
-                    this._text = newText;
-                    this.addChild(newText);
-                    this.updateTextPosition(newText);
-                    var overflowMask = this.getOverflowMask();
-                    if (overflowMask) {
-                        newText.mask = overflowMask;
-                    }
-                    newText.text = formatted;
-                    this.toDirty();
-                    DApplications.update(this);
-                }
+    DDynamicTextStyle.prototype.unfit = function () {
+        var isChanged = false;
+        if (this._isFontFitted !== false) {
+            this._isFontFitted = false;
+            isChanged = true;
+        }
+        if (this._fontSizeFitted !== this._fontSize) {
+            this._fontSizeFitted = this._fontSize;
+            isChanged = true;
+        }
+        if (this._lineHeightFitted !== this._lineHeight) {
+            this._lineHeightFitted = this._lineHeight;
+            isChanged = true;
+        }
+        if (isChanged) {
+            this.onChange();
+        }
+        return isChanged;
+    };
+    return DDynamicTextStyle;
+}(pixi_js.utils.EventEmitter));
+
+var DTextPieceAlignImpl = /** @class */ (function () {
+    function DTextPieceAlignImpl(parent, theme, options) {
+        var _a, _b;
+        this._parent = parent;
+        this._vertical = toEnum((_a = options === null || options === void 0 ? void 0 : options.vertical) !== null && _a !== void 0 ? _a : theme.getTextAlignVertical(), DAlignVertical);
+        this._horizontal = toEnum((_b = options === null || options === void 0 ? void 0 : options.horizontal) !== null && _b !== void 0 ? _b : theme.getTextAlignHorizontal(), DAlignHorizontal);
+    }
+    Object.defineProperty(DTextPieceAlignImpl.prototype, "vertical", {
+        get: function () {
+            return this._vertical;
+        },
+        set: function (vertical) {
+            vertical = toEnum(vertical, DAlignVertical);
+            if (this._vertical !== vertical) {
+                this._vertical = vertical;
+                this.onChange();
             }
-            else if (text.text !== formatted) {
-                text.text = formatted;
-                this.toDirty();
-                DApplications.update(this);
+        },
+        enumerable: false,
+        configurable: true
+    });
+    Object.defineProperty(DTextPieceAlignImpl.prototype, "horizontal", {
+        get: function () {
+            return this._horizontal;
+        },
+        set: function (horizontal) {
+            horizontal = toEnum(horizontal, DAlignHorizontal);
+            if (this._horizontal !== horizontal) {
+                this._horizontal = horizontal;
+                this.onChange();
+            }
+        },
+        enumerable: false,
+        configurable: true
+    });
+    DTextPieceAlignImpl.prototype.set = function (vertical, horizontal) {
+        var isChanged = false;
+        if (vertical != null) {
+            vertical = toEnum(vertical, DAlignVertical);
+            if (this._vertical !== vertical) {
+                this._vertical = vertical;
+                isChanged = true;
             }
         }
-        else {
-            var text = this._text;
-            if (text != null && text.text !== "") {
-                text.text = "";
-                this.toDirty();
-                DApplications.update(this);
+        if (horizontal != null) {
+            horizontal = toEnum(horizontal, DAlignHorizontal);
+            if (this._horizontal !== horizontal) {
+                this._horizontal = horizontal;
+                isChanged = true;
             }
         }
+        if (isChanged) {
+            this.onChange();
+        }
+        return this;
     };
-    DTextBase.prototype.newText = function () {
-        return new DDynamicText(this._textStyle);
+    DTextPieceAlignImpl.prototype.onChange = function () {
+        var parent = this._parent;
+        parent.toDirty();
+        DApplications.update(parent);
     };
-    DTextBase.prototype.getOverflowMask = function () {
-        if (this._isOverflowMaskEnabled) {
-            if (this._overflowMask == null) {
-                this._overflowMask = new DBaseOverflowMaskSimple(this);
-                this._reflowable.add(this._overflowMask);
-                this.toDirty();
+    return DTextPieceAlignImpl;
+}());
+
+/*
+ * Copyright (C) 2019 Toshiba Corporation
+ * SPDX-License-Identifier: Apache-2.0
+ */
+var DTextPieceStyleImpl = /** @class */ (function () {
+    function DTextPieceStyleImpl(parent, style) {
+        this._parent = parent;
+        this._style = style;
+    }
+    Object.defineProperty(DTextPieceStyleImpl.prototype, "fontFamily", {
+        get: function () {
+            return this._style.fontFamily;
+        },
+        set: function (fontFamily) {
+            var style = this._style;
+            if (style.fontFamily !== fontFamily) {
+                style.fontFamily = fontFamily;
+                this.onChange();
+            }
+        },
+        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();
             }
-            return this._overflowMask;
+        },
+        enumerable: false,
+        configurable: true
+    });
+    DTextPieceStyleImpl.prototype.onChange = function () {
+        DApplications.update(this._parent);
+    };
+    return DTextPieceStyleImpl;
+}());
+
+var DTextPieceImpl = /** @class */ (function (_super) {
+    __extends(DTextPieceImpl, _super);
+    function DTextPieceImpl(parent, theme, options) {
+        var _a, _b;
+        var _this = _super.call(this) || this;
+        _this._parent = parent;
+        _this._theme = theme;
+        _this._value = (_a = options === null || options === void 0 ? void 0 : options.value) !== null && _a !== void 0 ? _a : theme.newTextValue();
+        _this._computed = _this.newComputed();
+        _this._color = options === null || options === void 0 ? void 0 : options.color;
+        _this._alpha = options === null || options === void 0 ? void 0 : options.alpha;
+        var dstyle = new DDynamicTextStyle(parent, theme, options === null || options === void 0 ? void 0 : options.style);
+        _this._dstyle = dstyle;
+        _this._style = new DTextPieceStyleImpl(parent, dstyle);
+        _this._align = new DTextPieceAlignImpl(parent, theme, options === null || options === void 0 ? void 0 : options.align);
+        _this._formatter = (_b = options === null || options === void 0 ? void 0 : options.formatter) !== null && _b !== void 0 ? _b : theme.getTextFormatter();
+        _this._isVisible = true;
+        _this.onComputedChange();
+        if (_this.updateObject()) {
+            parent.toDirty();
+            DApplications.update(parent);
         }
-        return null;
+        return _this;
+    }
+    Object.defineProperty(DTextPieceImpl.prototype, "value", {
+        get: function () {
+            return this._value;
+        },
+        set: function (value) {
+            if (this._value !== value) {
+                this._value = value;
+                this.onValueChange();
+            }
+        },
+        enumerable: false,
+        configurable: true
+    });
+    DTextPieceImpl.prototype.getValue = function () {
+        return this._value;
     };
-    DTextBase.prototype.updateTextPosition = function (text) {
-        var align = this._textAlign;
-        var padding = this._padding;
-        var auto = this._auto;
-        var textX = 0;
-        var pleft = padding.getLeft();
-        var alignHorizontal = align.horizontal;
-        if (auto.width.isOn || alignHorizontal === DAlignHorizontal.LEFT) {
-            textX = pleft;
+    DTextPieceImpl.prototype.setValue = function (value, forcibly) {
+        if (forcibly || this._value !== value) {
+            this._value = value;
+            this.onValueChange(forcibly);
         }
-        else {
-            var width = this.width;
-            var textWidth = text.width;
-            var pright = padding.getRight();
-            if (alignHorizontal === DAlignHorizontal.CENTER) {
-                textX = pleft + (width - pleft - pright - textWidth) * 0.5;
+    };
+    DTextPieceImpl.prototype.onValueChange = function (forcibly) {
+        var newComputed = this.newComputed();
+        if (forcibly || this._computed !== newComputed) {
+            this._computed = newComputed;
+            this.onComputedChange();
+            if (this.updateObject()) {
+                var parent_1 = this._parent;
+                parent_1.toDirty();
+                DApplications.update(parent_1);
             }
-            else {
-                textX = width - textWidth - pright;
+        }
+    };
+    DTextPieceImpl.prototype.compute = function (forcibly) {
+        this.onValueChange(forcibly);
+    };
+    Object.defineProperty(DTextPieceImpl.prototype, "computed", {
+        get: function () {
+            return this._computed;
+        },
+        enumerable: false,
+        configurable: true
+    });
+    Object.defineProperty(DTextPieceImpl.prototype, "formatter", {
+        get: function () {
+            return this._formatter;
+        },
+        set: function (formatter) {
+            if (this._formatter !== formatter) {
+                this._formatter = formatter;
+                this.onValueChange(true);
+            }
+        },
+        enumerable: false,
+        configurable: true
+    });
+    Object.defineProperty(DTextPieceImpl.prototype, "color", {
+        get: function () {
+            return this._color;
+        },
+        set: function (color) {
+            if (this._color !== color) {
+                this._color = color;
+                this.onColorChange();
+            }
+        },
+        enumerable: false,
+        configurable: true
+    });
+    Object.defineProperty(DTextPieceImpl.prototype, "alpha", {
+        get: function () {
+            return this._alpha;
+        },
+        set: function (alpha) {
+            if (this._alpha !== alpha) {
+                this._alpha = alpha;
+                this.onColorChange();
+            }
+        },
+        enumerable: false,
+        configurable: true
+    });
+    DTextPieceImpl.prototype.onColorChange = function () {
+        var object = this._object;
+        if (object != null) {
+            var parent_2 = this._parent;
+            var state = parent_2.state;
+            var color = this.newColor(state);
+            var alpha = this.newAlpha(state);
+            var style = object.style;
+            if (style.fill !== color || object.alpha !== alpha) {
+                style.fill = color;
+                object.alpha = alpha;
+                DApplications.update(parent_2);
             }
         }
-        var textY = 0;
-        var ptop = padding.getTop();
-        var alignVertical = align.vertical;
-        if (auto.height.isOn || alignVertical === DAlignVertical.TOP) {
-            textY = ptop;
+    };
+    Object.defineProperty(DTextPieceImpl.prototype, "align", {
+        get: function () {
+            return this._align;
+        },
+        enumerable: false,
+        configurable: true
+    });
+    Object.defineProperty(DTextPieceImpl.prototype, "style", {
+        get: function () {
+            return this._style;
+        },
+        enumerable: false,
+        configurable: true
+    });
+    Object.defineProperty(DTextPieceImpl.prototype, "object", {
+        get: function () {
+            return this._object;
+        },
+        enumerable: false,
+        configurable: true
+    });
+    DTextPieceImpl.prototype.update = function (layouter) {
+        // Compute a value
+        var newComputed = this.newComputed();
+        if (this._computed !== newComputed) {
+            this._computed = newComputed;
+            this.onComputedChange();
+            this.updateObject();
+        }
+        var object = this._object;
+        if (object != null) {
+            // Update the color
+            var state = this._parent.state;
+            object.style.fill = this.newColor(state);
+            object.alpha = this.newAlpha(state);
+            // Layout
+            layouter.set(object);
         }
         else {
-            var height = this.height;
-            var textHeight = text.height;
-            var pbottom = padding.getBottom();
-            if (alignVertical === DAlignVertical.MIDDLE) {
-                textY = ptop + (height - ptop - pbottom - textHeight) * 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 if (object.text !== formatted) {
+                object.text = formatted;
+                return true;
+            }
+        }
+        else {
+            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);
@@ -29821,10 +30015,10 @@ var DTextBase = /** @class */ (function (_super) {
                 return color;
             }
         }
-        return theme.getColor(state);
+        return this._theme.getColor(state);
     };
-    DTextBase.prototype.getTextAlpha = function (theme, state) {
-        var alpha = this._textAlpha;
+    DTextPieceImpl.prototype.newAlpha = function (state) {
+        var alpha = this._alpha;
         if (alpha !== undefined) {
             if (isFunction(alpha)) {
                 var result = alpha(state);
@@ -29836,57 +30030,144 @@ var DTextBase = /** @class */ (function (_super) {
                 return alpha;
             }
         }
-        return theme.getAlpha(state);
+        return this._theme.getAlpha(state);
     };
-    DTextBase.prototype.updateTextColor = function (text) {
-        var theme = this.theme;
-        var state = this.state;
-        text.style.fill = this.getTextColor(theme, state);
-        text.alpha = this.getTextAlpha(theme, state);
+    DTextPieceImpl.prototype.newObject = function () {
+        return new DDynamicText(this._dstyle);
     };
-    DTextBase.prototype.updateTextValue = function () {
-        var newTextValueComputed = this.computeTextValue();
-        if (this._textValueComputed !== newTextValueComputed) {
-            this._textValueComputed = newTextValueComputed;
-            this.onTextChange();
-            this.createOrUpdateText();
-        }
+    Object.defineProperty(DTextPieceImpl.prototype, "visible", {
+        get: function () {
+            var object = this._object;
+            if (object != null) {
+                return object.visible;
+            }
+            return this._isVisible;
+        },
+        set: function (visible) {
+            var object = this._object;
+            if (object != null) {
+                object.visible = visible;
+            }
+            this._isVisible = visible;
+        },
+        enumerable: false,
+        configurable: true
+    });
+    DTextPieceImpl.prototype.show = function () {
+        this.visible = true;
+        return this;
     };
-    DTextBase.prototype.updateText = function () {
-        var text = this._text;
-        if (text) {
-            this.updateTextValue();
-            this.updateTextPosition(text);
-            this.updateTextColor(text);
+    DTextPieceImpl.prototype.hide = function () {
+        this.visible = false;
+        return this;
+    };
+    DTextPieceImpl.prototype.isShown = function () {
+        return this.visible;
+    };
+    DTextPieceImpl.prototype.onComputedChange = function () {
+        this.emit("change", this);
+    };
+    DTextPieceImpl.prototype.destroy = function () {
+        var object = this._object;
+        if (object) {
+            this._object = undefined;
+            object.destroy();
         }
+        return this;
     };
-    DTextBase.prototype.showText = function () {
-        var text = this._text;
-        if (text) {
-            text.visible = true;
+    return DTextPieceImpl;
+}(pixi_js.utils.EventEmitter));
+
+/*
+ * Copyright (C) 2019 Toshiba Corporation
+ * SPDX-License-Identifier: Apache-2.0
+ */
+/**
+ * A base class for UI classes with a text support.
+ * See {@link DTextBaseEvents} for event defaults.
+ */
+var DTextBase = /** @class */ (function (_super) {
+    __extends(DTextBase, _super);
+    function DTextBase() {
+        return _super !== null && _super.apply(this, arguments) || this;
+    }
+    DTextBase.prototype.init = function (options) {
+        _super.prototype.init.call(this, options);
+        this.getText();
+    };
+    DTextBase.prototype.getOverflowMask = function () {
+        var result = this._overflowMask;
+        if (result === undefined) {
+            result = this.newOverflowMask();
+            this._overflowMask = result;
         }
-        this._isTextVisible = true;
+        return null;
     };
-    DTextBase.prototype.hideText = function () {
-        var text = this._text;
-        if (text) {
-            text.visible = false;
+    DTextBase.prototype.newOverflowMask = function () {
+        var _a, _b;
+        if ((_b = (_a = this._options) === null || _a === void 0 ? void 0 : _a.mask) !== null && _b !== void 0 ? _b : this.theme.isOverflowMaskEnabled()) {
+            var result = new DBaseOverflowMaskSimple(this);
+            this._reflowable.add(result);
+            this.toDirty();
+            return result;
+        }
+        else {
+            return null;
         }
-        this._isTextVisible = false;
+    };
+    Object.defineProperty(DTextBase.prototype, "text", {
+        get: function () {
+            var _a;
+            return ((_a = this._text) !== null && _a !== void 0 ? _a : (this._text = this.newText()));
+        },
+        set: function (text) {
+            this.text.value = text;
+        },
+        enumerable: false,
+        configurable: true
+    });
+    DTextBase.prototype.getText = function () {
+        var _a;
+        return ((_a = this._text) !== null && _a !== void 0 ? _a : (this._text = this.newText()));
+    };
+    DTextBase.prototype.newText = function () {
+        var _a;
+        return new DTextPieceImpl(this, this.theme, (_a = this._options) === null || _a === void 0 ? void 0 : _a.text);
     };
     DTextBase.prototype.onReflow = function () {
         _super.prototype.onReflow.call(this);
-        this.updateText();
+        this.onReflowTextAndImage();
+    };
+    DTextBase.prototype.getLayouter = function () {
+        var _a;
+        return ((_a = DTextBase.LAYOUTER) !== null && _a !== void 0 ? _a : (DTextBase.LAYOUTER = new DImagePieceLayouter()));
+    };
+    DTextBase.prototype.onReflowTextAndImage = function () {
+        var layouter = this.getLayouter();
+        var text = this.getText();
+        text.update(layouter);
+        var auto = this._auto;
+        layouter.execute(this._padding, text.align, auto.width.isOn ? null : this.width, auto.height.isOn ? null : this.height);
+        layouter.clear();
     };
     DTextBase.prototype.isRefitable = function (target) {
-        return _super.prototype.isRefitable.call(this, target) || (target != null && target === this._text);
+        if (_super.prototype.isRefitable.call(this, target)) {
+            return true;
+        }
+        if (target != null) {
+            var text = this._text;
+            if (text != null && target === text.object) {
+                return true;
+            }
+        }
+        return false;
     };
     DTextBase.prototype.applyTitle = function () {
-        var text = this._text;
-        if (this._title.length <= 0 && text && "clipped" in text && text.clipped) {
+        var object = this.text.object;
+        if (this._title.length <= 0 && object != null && object.clipped) {
             var layer = DApplications.getLayer(this);
             if (layer) {
-                layer.view.title = text.text;
+                layer.view.title = object.text;
             }
         }
         else {
@@ -29900,7 +30181,6 @@ var DTextBase = /** @class */ (function (_super) {
         // Text
         var text = this._text;
         if (text) {
-            this._text = null;
             text.destroy();
         }
         // Overflow mask
@@ -30532,7 +30812,7 @@ var DImagePieceContainerImpl = /** @class */ (function () {
         }
         return false;
     };
-    DImagePieceContainerImpl.prototype.updateTextAndImage = function (layouter) {
+    DImagePieceContainerImpl.prototype.update = function (layouter) {
         var pieces = this._pieces;
         for (var i = 0, imax = pieces.length; i < imax; ++i) {
             var piece = pieces[i];
@@ -30542,6 +30822,54 @@ var DImagePieceContainerImpl = /** @class */ (function () {
             layouter.add(piece);
         }
     };
+    Object.defineProperty(DImagePieceContainerImpl.prototype, "object", {
+        get: function () {
+            return this._pieces[0].object;
+        },
+        enumerable: false,
+        configurable: true
+    });
+    Object.defineProperty(DImagePieceContainerImpl.prototype, "align", {
+        get: function () {
+            return this._pieces[0].align;
+        },
+        enumerable: false,
+        configurable: true
+    });
+    Object.defineProperty(DImagePieceContainerImpl.prototype, "margin", {
+        get: function () {
+            return this._pieces[0].margin;
+        },
+        enumerable: false,
+        configurable: true
+    });
+    Object.defineProperty(DImagePieceContainerImpl.prototype, "tint", {
+        get: function () {
+            return this._pieces[0].tint;
+        },
+        enumerable: false,
+        configurable: true
+    });
+    Object.defineProperty(DImagePieceContainerImpl.prototype, "source", {
+        get: function () {
+            return this._pieces[0].source;
+        },
+        set: function (source) {
+            this._pieces[0].source = source;
+        },
+        enumerable: false,
+        configurable: true
+    });
+    Object.defineProperty(DImagePieceContainerImpl.prototype, "rotation", {
+        get: function () {
+            return this._pieces[0].rotation;
+        },
+        set: function (rotation) {
+            this._pieces[0].rotation = rotation;
+        },
+        enumerable: false,
+        configurable: true
+    });
     DImagePieceContainerImpl.prototype.add = function (options) {
         var result = this.newImage(this._theme, options);
         this._pieces.push(result);
@@ -30616,24 +30944,13 @@ var DImageBase = /** @class */ (function (_super) {
         _super.prototype.onStateChange.call(this, newState, oldState);
         this.getImage().onStateChange(newState, oldState);
     };
-    DImageBase.prototype.updateText = function () {
-        this.updateTextValue();
-        this.updateTextAndImage();
-    };
-    DImageBase.prototype.updateTextAndImage = function () {
-        var _a;
-        var layouter = ((_a = DImageBase.LAYOUTER) !== null && _a !== void 0 ? _a : (DImageBase.LAYOUTER = new DImagePieceLayouter()));
-        this.getImage().updateTextAndImage(layouter);
-        var text = this._text;
-        if (text != null) {
-            this.updateTextColor(text);
-            layouter.set(text);
-        }
-        else {
-            layouter.set(null);
-        }
+    DImageBase.prototype.onReflowTextAndImage = function () {
+        var layouter = this.getLayouter();
+        this.getImage().update(layouter);
+        var text = this.getText();
+        text.update(layouter);
         var auto = this._auto;
-        layouter.execute(this._padding, this._textAlign, auto.width.isOn ? null : this.width, auto.height.isOn ? null : this.height);
+        layouter.execute(this._padding, text.align, auto.width.isOn ? null : this.width, auto.height.isOn ? null : this.height);
         layouter.clear();
     };
     DImageBase.prototype.isRefitable = function (target) {
@@ -31922,16 +32239,16 @@ var DInput = /** @class */ (function (_super) {
                 return _this.containsPoint(point);
             },
             onStart: function () {
-                _this.hideText();
+                _this.text.hide();
             },
             onCancel: function () {
-                _this.showText();
+                _this.text.show();
             },
             onEnd: function () {
                 // DO NOTHING
             },
             getValue: function () {
-                return _this._textValueComputed;
+                return _this.text.computed;
             },
             onValueInput: function (newValue) {
                 _this.onValueInput(newValue);
@@ -31950,7 +32267,7 @@ var DInput = /** @class */ (function (_super) {
     };
     Object.defineProperty(DInput.prototype, "value", {
         get: function () {
-            return this._textValueComputed;
+            return this.text.computed;
         },
         set: function (value) {
             this.text = value;
@@ -31958,9 +32275,13 @@ var DInput = /** @class */ (function (_super) {
         enumerable: false,
         configurable: true
     });
-    DInput.prototype.onTextChange = function () {
-        _super.prototype.onTextChange.call(this);
-        this.validate();
+    DInput.prototype.newText = function () {
+        var _this = this;
+        var result = _super.prototype.newText.call(this);
+        result.on("change", function () {
+            _this.validate();
+        });
+        return result;
     };
     DInput.prototype.onValueChange = function (newValue, oldValue) {
         this.emit("change", newValue, oldValue, this);
@@ -35219,7 +35540,7 @@ var imageElementCache = {};
 var toImageElement = function (dataUrl) {
     var cachedImageElement = imageElementCache[dataUrl];
     if (cachedImageElement != null) {
-        if (cachedImageElement instanceof HTMLImageElement) {
+        if ("url" in cachedImageElement) {
             return Promise.resolve(cachedImageElement);
         }
         else {
@@ -35230,8 +35551,14 @@ var toImageElement = function (dataUrl) {
         var result = new Promise(function (resolve, reject) {
             var imageElement = document.createElement("img");
             imageElement.onload = function () {
-                imageElementCache[dataUrl] = imageElement;
-                resolve(imageElement);
+                var resolved = {
+                    url: dataUrl,
+                    width: imageElement.width,
+                    height: imageElement.height,
+                    source: imageElement
+                };
+                imageElementCache[dataUrl] = resolved;
+                resolve(resolved);
             };
             imageElement.onabort = imageElement.onerror = function () {
                 reject();
@@ -40386,6 +40713,9 @@ var EShapeGroup = /** @class */ (function (_super) {
         enumerable: false,
         configurable: true
     });
+    EShapeGroup.prototype.serializeGradient = function (manager) {
+        return -1;
+    };
     Object.defineProperty(EShapeGroup.prototype, "radius", {
         get: function () {
             var children = this.children;
@@ -40423,6 +40753,9 @@ var EShapeGroup = /** @class */ (function (_super) {
         enumerable: false,
         configurable: true
     });
+    EShapeGroup.prototype.serializeImage = function (manager) {
+        return -1;
+    };
     Object.defineProperty(EShapeGroup.prototype, "points", {
         get: function () {
             var children = this.children;
@@ -44584,9 +44917,9 @@ var DMenuItemText = /** @class */ (function (_super) {
         var shortcuts = this._shortcuts;
         if (shortcuts != null && 0 < shortcuts.length) {
             var shortcut = shortcuts[0];
-            var shortcutText = this.newText();
+            var shortcutText = this.newShortcutText();
             this._shortcutText = shortcutText;
-            this.snippet.add(this._shortcutText, true);
+            this.snippet.add(shortcutText, true);
             shortcutText.text = UtilKeyboardEvent.toString(shortcut);
         }
         else {
@@ -44594,6 +44927,10 @@ var DMenuItemText = /** @class */ (function (_super) {
         }
         this._shortcutMargin = this.theme.getShortcutTextMargin();
     };
+    DMenuItemText.prototype.newShortcutText = function () {
+        var _a, _b;
+        return new DDynamicText(new DDynamicTextStyle(this, this.theme, (_b = (_a = this._options) === null || _a === void 0 ? void 0 : _a.text) === null || _b === void 0 ? void 0 : _b.style));
+    };
     DMenuItemText.prototype.updateShortcutText = function () {
         var text = this._shortcutText;
         var margin = this._shortcutMargin;
@@ -44618,8 +44955,7 @@ var DMenuItemText = /** @class */ (function (_super) {
             text.position.set(textX, textY);
         }
     };
-    DMenuItemText.prototype.updateTextColor = function (text) {
-        _super.prototype.updateTextColor.call(this, text);
+    DMenuItemText.prototype.updateShortcutColor = function () {
         var shortcutText = this._shortcutText;
         if (shortcutText != null) {
             var theme = this.theme;
@@ -44628,8 +44964,9 @@ var DMenuItemText = /** @class */ (function (_super) {
             shortcutText.alpha = theme.getShortcutAlpha(state);
         }
     };
-    DMenuItemText.prototype.updateText = function () {
-        _super.prototype.updateText.call(this);
+    DMenuItemText.prototype.onReflow = function () {
+        _super.prototype.onReflow.call(this);
+        this.updateShortcutColor();
         this.updateShortcutText();
     };
     DMenuItemText.prototype.getType = function () {
@@ -46329,9 +46666,9 @@ var EShapeActionValueMiscWrite = /** @class */ (function (_super) {
  */
 var createImageSdf = function (dataUrl, convertToSdf) {
     if (convertToSdf) {
-        return toImageElement(dataUrl).then(function (imageElement) {
+        return toImageElement(dataUrl).then(function (image) {
             var generator = DynamicSDFFontGenerator.getInstance().init();
-            generator.updateTexture(imageElement);
+            generator.updateTexture(image.width, image.height, image.source);
             generator.render();
             var canvas = document.createElement("canvas");
             generator.read(canvas);
@@ -46339,8 +46676,8 @@ var createImageSdf = function (dataUrl, convertToSdf) {
         });
     }
     else {
-        return toImageElement(dataUrl).then(function (imageElement) {
-            return new EShapeImageSdf(imageElement);
+        return toImageElement(dataUrl).then(function (image) {
+            return new EShapeImageSdf(image);
         });
     }
 };
@@ -46350,8 +46687,8 @@ var createImageSdf = function (dataUrl, convertToSdf) {
  * SPDX-License-Identifier: Apache-2.0
  */
 var createImage = function (dataUrl) {
-    return toImageElement(dataUrl).then(function (imageElement) {
-        return new EShapeImage(imageElement);
+    return toImageElement(dataUrl).then(function (image) {
+        return new EShapeImage(image);
     });
 };
 
@@ -50404,6 +50741,12 @@ var DThemeWhiteInput = /** @class */ (function (_super) {
         }
         return DThemeWhiteConstants.BORDER_COLOR;
     };
+    DThemeWhiteInput.prototype.getOutlineColor = function (state) {
+        if (state.isInvalid) {
+            return DThemeWhiteConstants.INVALID_COLOR;
+        }
+        return _super.prototype.getOutlineColor.call(this, state);
+    };
     DThemeWhiteInput.prototype.getHeight = function () {
         return this.getLineHeight();
     };
@@ -52408,14 +52751,14 @@ var loadThemeWhitePane = function () {
  * Copyright (C) 2019 Toshiba Corporation
  * SPDX-License-Identifier: Apache-2.0
  */
-var formatter$l = function (value) {
-    if (value) {
-        var text = value.text;
-        if (isString(text)) {
-            return text;
+var formatter$l = function (item) {
+    if (item) {
+        var value = item.text.value;
+        if (isString(value)) {
+            return value;
         }
-        else if (text != null) {
-            var computed = text(value.state);
+        else if (value != null) {
+            var computed = value(item.state);
             if (computed != null) {
                 return computed;
             }
@@ -52441,19 +52784,19 @@ var DThemeWhiteSelect = /** @class */ (function (_super) {
  * Copyright (C) 2019 Toshiba Corporation
  * SPDX-License-Identifier: Apache-2.0
  */
-var formatter$k = function (values) {
-    if (values) {
+var formatter$k = function (items) {
+    if (items) {
         var result = "";
         var delimiter = "";
-        for (var i = 0, imax = values.length; i < imax; ++i) {
-            var value = values[i];
-            var text = value.text;
-            if (isString(text)) {
-                result += delimiter + text;
+        for (var i = 0, imax = items.length; i < imax; ++i) {
+            var item = items[i];
+            var value = item.text.value;
+            if (isString(value)) {
+                result += delimiter + value;
                 delimiter = ", ";
             }
-            else if (text != null) {
-                var computed = text(value.state);
+            else if (value != null) {
+                var computed = value(item.state);
                 if (computed != null) {
                     result += delimiter + computed;
                     delimiter = ", ";
@@ -61378,6 +61721,12 @@ var DThemeDarkInput = /** @class */ (function (_super) {
         }
         return null;
     };
+    DThemeDarkInput.prototype.getOutlineColor = function (state) {
+        if (state.isInvalid) {
+            return DThemeDarkConstants.INVALID_COLOR;
+        }
+        return _super.prototype.getOutlineColor.call(this, state);
+    };
     DThemeDarkInput.prototype.getHeight = function () {
         return this.getLineHeight();
     };
@@ -63380,14 +63729,14 @@ var loadThemeDarkPane = function () {
  * Copyright (C) 2019 Toshiba Corporation
  * SPDX-License-Identifier: Apache-2.0
  */
-var formatter$a = function (value) {
-    if (value) {
-        var text = value.text;
-        if (isString(text)) {
-            return text;
+var formatter$a = function (item) {
+    if (item) {
+        var value = item.text.value;
+        if (isString(value)) {
+            return value;
         }
-        else if (text != null) {
-            var computed = text(value.state);
+        else if (value != null) {
+            var computed = value(item.state);
             if (computed != null) {
                 return computed;
             }
@@ -63413,19 +63762,19 @@ var DThemeDarkSelect = /** @class */ (function (_super) {
  * Copyright (C) 2019 Toshiba Corporation
  * SPDX-License-Identifier: Apache-2.0
  */
-var formatter$9 = function (values) {
-    if (values) {
+var formatter$9 = function (items) {
+    if (items) {
         var result = "";
         var delimiter = "";
-        for (var i = 0, imax = values.length; i < imax; ++i) {
-            var value = values[i];
-            var text = value.text;
-            if (isString(text)) {
-                result += delimiter + text;
+        for (var i = 0, imax = items.length; i < imax; ++i) {
+            var item = items[i];
+            var value = item.text.value;
+            if (isString(value)) {
+                result += delimiter + value;
                 delimiter = ", ";
             }
-            else if (text != null) {
-                var computed = text(value.state);
+            else if (value != null) {
+                var computed = value(item.state);
                 if (computed != null) {
                     result += delimiter + computed;
                     delimiter = ", ";
@@ -74275,7 +74624,7 @@ var DButtonColorGradient = /** @class */ (function (_super) {
                 var view = DPickerColorGradientView.from(1, 10, checkers, texture);
                 this._view = view;
                 view.setRectangle(0, 0, 0, texture.width, texture.height);
-                view.setData(0, this._textValueComputed);
+                view.setData(0, this.text.computed);
                 view.update();
                 this.image = view;
             }
@@ -74284,13 +74633,13 @@ var DButtonColorGradient = /** @class */ (function (_super) {
     DButtonColorGradient.prototype.onActivate = function (e) {
         var _this = this;
         _super.prototype.onActivate.call(this, e);
-        var value = this._textValueComputed;
+        var computed = this.text.computed;
         var dialog = this.dialog;
-        if (value != null) {
-            dialog.value.fromObject(value);
+        if (computed != null) {
+            dialog.value.fromObject(computed);
         }
         dialog.open(this).then(function (newValue) {
-            _this.onValueChange(newValue, _this.toClone(value));
+            _this.onValueChange(newValue, _this.toClone(computed));
         });
     };
     DButtonColorGradient.prototype.toClone = function (value) {
@@ -74301,17 +74650,15 @@ var DButtonColorGradient = /** @class */ (function (_super) {
         return result;
     };
     DButtonColorGradient.prototype.onValueChange = function (newValue, oldValue) {
-        var value = this._textValueComputed;
-        if (value != null) {
-            value.fromObject(newValue);
+        var computed = this.text.computed;
+        if (computed != null) {
+            computed.fromObject(newValue);
         }
         var view = this._view;
         if (view != null) {
             view.update();
         }
-        this.onTextChange();
-        this.createOrUpdateText();
-        DApplications.update(this);
+        this.text.compute(true);
         this.emit("change", newValue, oldValue, this);
     };
     Object.defineProperty(DButtonColorGradient.prototype, "dialog", {
@@ -74344,7 +74691,7 @@ var DButtonColorGradient = /** @class */ (function (_super) {
     };
     Object.defineProperty(DButtonColorGradient.prototype, "value", {
         get: function () {
-            return this._textValueComputed;
+            return this.text.computed;
         },
         enumerable: false,
         configurable: true
@@ -74433,14 +74780,14 @@ var DButtonColor = /** @class */ (function (_super) {
         var _this = this;
         _super.prototype.onActivate.call(this, e);
         var dialog = this.dialog;
-        var value = this._textValueComputed;
-        if (value != null) {
+        var computed = this.text.computed;
+        if (computed != null) {
             var dialogCurrent = dialog.current;
-            dialogCurrent.color = value.color;
-            dialogCurrent.alpha = value.alpha;
+            dialogCurrent.color = computed.color;
+            dialogCurrent.alpha = computed.alpha;
             var dialogNew = dialog.new;
-            dialogNew.color = value.color;
-            dialogNew.alpha = value.alpha;
+            dialogNew.color = computed.color;
+            dialogNew.alpha = computed.alpha;
         }
         dialog.open(this).then(function () {
             _this.onValueChange(_this.toClone(dialog.new), _this.toClone(dialog.current));
@@ -74453,10 +74800,10 @@ var DButtonColor = /** @class */ (function (_super) {
         };
     };
     DButtonColor.prototype.onValueChange = function (newValue, oldValue) {
-        var value = this._textValueComputed;
-        if (value != null) {
-            value.color = newValue.color;
-            value.alpha = newValue.alpha;
+        var computed = this.text.computed;
+        if (computed != null) {
+            computed.color = newValue.color;
+            computed.alpha = newValue.alpha;
         }
         this.onColorChange();
         this.emit("change", newValue, oldValue, this);
@@ -74464,16 +74811,12 @@ var DButtonColor = /** @class */ (function (_super) {
     DButtonColor.prototype.onColorChange = function () {
         var image = this.image.get(0);
         if (image != null) {
-            var value = this._textValueComputed;
-            if (value != null) {
-                image.tint.color = value.color;
+            var computed = this.text.computed;
+            if (computed != null) {
+                image.tint.color = computed.color;
             }
         }
-        this.updateTextForcibly();
-    };
-    DButtonColor.prototype.updateTextForcibly = function () {
-        this.onTextChange();
-        this.createOrUpdateText();
+        this.text.compute(true);
     };
     Object.defineProperty(DButtonColor.prototype, "dialog", {
         get: function () {
@@ -74517,13 +74860,14 @@ var DButtonColor = /** @class */ (function (_super) {
     });
     DButtonColor.prototype.newValue = function () {
         var _this = this;
-        var value = this._textValueComputed;
-        return new DPickerColorAndAlpha(value, function (color) {
-            value.color = color;
+        var text = this.text;
+        var computed = text.computed;
+        return new DPickerColorAndAlpha(computed, function (color) {
+            computed.color = color;
             _this.onColorChange();
         }, function (alpha) {
-            value.alpha = alpha;
-            _this.updateTextForcibly();
+            computed.alpha = alpha;
+            text.compute(true);
         });
     };
     DButtonColor.prototype.getType = function () {
@@ -74560,7 +74904,7 @@ var DButtonDate = /** @class */ (function (_super) {
         var _this = this;
         var _a, _b;
         _super.prototype.onActivate.call(this, e);
-        var value = (_b = (_a = this._textValueComputed) === null || _a === void 0 ? void 0 : _a.getTime()) !== null && _b !== void 0 ? _b : Date.now();
+        var value = (_b = (_a = this.text.computed) === null || _a === void 0 ? void 0 : _a.getTime()) !== null && _b !== void 0 ? _b : Date.now();
         var dialog = this.dialog;
         dialog.current = new Date(value);
         dialog.new = new Date(value);
@@ -74604,11 +74948,11 @@ var DButtonDate = /** @class */ (function (_super) {
     Object.defineProperty(DButtonDate.prototype, "value", {
         get: function () {
             var _a;
-            return (_a = this._textValueComputed) !== null && _a !== void 0 ? _a : new Date();
+            return (_a = this.text.computed) !== null && _a !== void 0 ? _a : new Date();
         },
         set: function (value) {
-            var textValueComputed = this._textValueComputed;
-            if (textValueComputed === undefined || textValueComputed.getTime() !== value.getTime()) {
+            var computed = this.text.computed;
+            if (computed === undefined || computed.getTime() !== value.getTime()) {
                 this.text = value;
             }
         },
@@ -74634,7 +74978,7 @@ var DButtonDatetime = /** @class */ (function (_super) {
         var _this = this;
         var _a, _b;
         _super.prototype.onActivate.call(this, e);
-        var value = (_b = (_a = this._textValueComputed) === null || _a === void 0 ? void 0 : _a.getTime()) !== null && _b !== void 0 ? _b : Date.now();
+        var value = (_b = (_a = this.text.computed) === null || _a === void 0 ? void 0 : _a.getTime()) !== null && _b !== void 0 ? _b : Date.now();
         var dialog = this.dialog;
         dialog.current = new Date(value);
         dialog.new = new Date(value);
@@ -74687,11 +75031,11 @@ var DButtonDatetime = /** @class */ (function (_super) {
     Object.defineProperty(DButtonDatetime.prototype, "value", {
         get: function () {
             var _a;
-            return (_a = this._textValueComputed) !== null && _a !== void 0 ? _a : new Date();
+            return (_a = this.text.computed) !== null && _a !== void 0 ? _a : new Date();
         },
         set: function (value) {
-            var textValueComputed = this._textValueComputed;
-            if (textValueComputed === undefined || textValueComputed.getTime() !== value.getTime()) {
+            var computed = this.text.computed;
+            if (computed === undefined || computed.getTime() !== value.getTime()) {
                 this.text = value;
             }
         },
@@ -77776,7 +78120,7 @@ var DButtonSelect = /** @class */ (function (_super) {
         var _a;
         _super.prototype.onActivate.call(this, e);
         var dialog = this.dialog;
-        var oldValue = (_a = this._textValueComputed) !== null && _a !== void 0 ? _a : null;
+        var oldValue = (_a = this.text.computed) !== null && _a !== void 0 ? _a : null;
         this._dialogSetter(dialog, oldValue);
         dialog.open(this).then(function () {
             var newValue = _this._dialogGetter(dialog);
@@ -77809,7 +78153,7 @@ var DButtonSelect = /** @class */ (function (_super) {
     Object.defineProperty(DButtonSelect.prototype, "value", {
         get: function () {
             var _a;
-            return (_a = this._textValueComputed) !== null && _a !== void 0 ? _a : null;
+            return (_a = this.text.computed) !== null && _a !== void 0 ? _a : null;
         },
         set: function (value) {
             this.text = value;
@@ -77836,7 +78180,7 @@ var DButtonTime = /** @class */ (function (_super) {
         var _this = this;
         var _a, _b;
         _super.prototype.onActivate.call(this, e);
-        var value = (_b = (_a = this._textValueComputed) === null || _a === void 0 ? void 0 : _a.getTime()) !== null && _b !== void 0 ? _b : Date.now();
+        var value = (_b = (_a = this.text.computed) === null || _a === void 0 ? void 0 : _a.getTime()) !== null && _b !== void 0 ? _b : Date.now();
         var dialog = this.dialog;
         dialog.current = new Date(value);
         dialog.new = new Date(value);
@@ -77888,11 +78232,11 @@ var DButtonTime = /** @class */ (function (_super) {
     Object.defineProperty(DButtonTime.prototype, "value", {
         get: function () {
             var _a;
-            return (_a = this._textValueComputed) !== null && _a !== void 0 ? _a : new Date();
+            return (_a = this.text.computed) !== null && _a !== void 0 ? _a : new Date();
         },
         set: function (value) {
-            var textValueComputed = this._textValueComputed;
-            if (textValueComputed === undefined || textValueComputed.getTime() !== value.getTime()) {
+            var computed = this.text.computed;
+            if (computed === undefined || computed.getTime() !== value.getTime()) {
                 this.text = value;
             }
         },
@@ -87032,7 +87376,7 @@ var DDialogProcessing = /** @class */ (function (_super) {
         _this._delayDone = (_a = delay === null || delay === void 0 ? void 0 : delay.done) !== null && _a !== void 0 ? _a : theme.getDoneDelay();
         var delayClose = delay === null || delay === void 0 ? void 0 : delay.close;
         _this._delayClose = delayClose !== undefined ? delayClose : theme.getCloseDelay();
-        _this._messageText = _this.message.text;
+        _this._messageText = _this.message.text.value;
         return _this;
     }
     DDialogProcessing.prototype.newMessage = function (options) {
@@ -87390,7 +87734,7 @@ var DIndicatorProcessing = /** @class */ (function () {
         }
         state.unlock();
         if (this._isTextEnabled) {
-            this._textValueBackup = parent.text;
+            this._textValueBackup = parent.text.value;
             var textValue = this._textValue;
             if (textValue !== undefined) {
                 parent.text = textValue;
@@ -90491,7 +90835,7 @@ var DTableBodyCellSelectDialog = /** @class */ (function (_super) {
         var selecting = this._column.selecting;
         var dialog = selecting.dialog;
         if (dialog) {
-            var oldValue_1 = (_a = this._textValueComputed) !== null && _a !== void 0 ? _a : null;
+            var oldValue_1 = (_a = this.text.computed) !== null && _a !== void 0 ? _a : null;
             selecting.setter(dialog, oldValue_1);
             dialog.open(this).then(function () {
                 var newValue = selecting.getter(dialog);
@@ -90548,11 +90892,8 @@ var DTableBodyCellSelectDialog = /** @class */ (function (_super) {
     });
     Object.defineProperty(DTableBodyCellSelectDialog.prototype, "value", {
         get: function () {
-            var textValueComputed = this._textValueComputed;
-            if (textValueComputed !== undefined) {
-                return textValueComputed;
-            }
-            return null;
+            var _a;
+            return (_a = this.text.computed) !== null && _a !== void 0 ? _a : null;
         },
         set: function (value) {
             this.text = value;
@@ -90564,10 +90905,7 @@ var DTableBodyCellSelectDialog = /** @class */ (function (_super) {
         this._row = row;
         this._rowIndex = rowIndex;
         if (forcibly) {
-            this._textValue = value;
-            this._textValueComputed = value;
-            this.onTextChange();
-            this.createOrUpdateText();
+            this.text.setValue(value, true);
         }
         else {
             this.text = value;
@@ -90696,7 +91034,7 @@ var DTableBodyCellSelectPromise = /** @class */ (function (_super) {
             promise().then(function (newValue) {
                 var _a;
                 if (_this._isSyncEnabled) {
-                    var oldValue = (_a = _this._textValueComputed) !== null && _a !== void 0 ? _a : null;
+                    var oldValue = (_a = _this.text.computed) !== null && _a !== void 0 ? _a : null;
                     if (newValue !== oldValue) {
                         _this.text = newValue;
                         _this.onValueChange(newValue, oldValue);
@@ -90749,11 +91087,8 @@ var DTableBodyCellSelectPromise = /** @class */ (function (_super) {
     });
     Object.defineProperty(DTableBodyCellSelectPromise.prototype, "value", {
         get: function () {
-            var textValueComputed = this._textValueComputed;
-            if (textValueComputed !== undefined) {
-                return textValueComputed;
-            }
-            return null;
+            var _a;
+            return (_a = this.text.computed) !== null && _a !== void 0 ? _a : null;
         },
         set: function (value) {
             this.text = value;
@@ -90765,10 +91100,7 @@ var DTableBodyCellSelectPromise = /** @class */ (function (_super) {
         this._row = row;
         this._rowIndex = rowIndex;
         if (forcibly) {
-            this._textValue = value;
-            this._textValueComputed = value;
-            this.onTextChange();
-            this.createOrUpdateText();
+            this.text.setValue(value, true);
         }
         else {
             this.text = value;
@@ -91223,24 +91555,21 @@ var DTableBodyCellDate = /** @class */ (function (_super) {
         this._rowIndex = rowIndex;
         if (value instanceof Date) {
             if (forcibly) {
-                this._textValue = value;
-                this._textValueComputed = value;
-                this.onTextChange();
-                this.createOrUpdateText();
+                this.text.setValue(value, true);
             }
             else {
                 this.text = value;
             }
         }
         else if (isNumber(value)) {
-            var textValueComputed = this._textValueComputed;
-            if (textValueComputed === undefined) {
+            var text = this.text;
+            var computed = text.computed;
+            if (computed === undefined) {
                 this.text = new Date(value);
             }
-            else if (textValueComputed.getTime() !== value) {
-                textValueComputed.setTime(value);
-                this.onTextChange();
-                this.createOrUpdateText();
+            else if (computed.getTime() !== value) {
+                computed.setTime(value);
+                text.compute(true);
             }
         }
         DTableBodyCells.set(this, row, columnIndex, this._column);
@@ -91316,24 +91645,21 @@ var DTableBodyCellDatetime = /** @class */ (function (_super) {
         this._rowIndex = rowIndex;
         if (value instanceof Date) {
             if (forcibly) {
-                this._textValue = value;
-                this._textValueComputed = value;
-                this.onTextChange();
-                this.createOrUpdateText();
+                this.text.setValue(value, true);
             }
             else {
                 this.text = value;
             }
         }
         else if (isNumber(value)) {
-            var textValueComputed = this._textValueComputed;
-            if (textValueComputed == null) {
+            var text = this.text;
+            var computed = text.computed;
+            if (computed == null) {
                 this.text = new Date(value);
             }
-            else if (textValueComputed.getTime() !== value) {
-                textValueComputed.setTime(value);
-                this.onTextChange();
-                this.createOrUpdateText();
+            else if (computed.getTime() !== value) {
+                computed.setTime(value);
+                text.compute(true);
             }
         }
         DTableBodyCells.set(this, row, columnIndex, this._column);
@@ -92205,24 +92531,21 @@ var DTableBodyCellTime = /** @class */ (function (_super) {
         this._rowIndex = rowIndex;
         if (value instanceof Date) {
             if (forcibly) {
-                this._textValue = value;
-                this._textValueComputed = value;
-                this.onTextChange();
-                this.createOrUpdateText();
+                this.text.setValue(value, true);
             }
             else {
                 this.text = value;
             }
         }
         else if (isNumber(value)) {
-            var textValueComputed = this._textValueComputed;
-            if (textValueComputed == null) {
+            var text = this.text;
+            var computed = text.computed;
+            if (computed == null) {
                 this.text = new Date(value);
             }
-            else if (textValueComputed.getTime() !== value) {
-                textValueComputed.setTime(value);
-                this.onTextChange();
-                this.createOrUpdateText();
+            else if (computed.getTime() !== value) {
+                computed.setTime(value);
+                text.compute(true);
             }
         }
         DTableBodyCells.set(this, row, columnIndex, this._column);