@wcardinal/wcardinal-ui 0.155.0 → 0.158.0

package/dist/wcardinal-ui.cjs.js

@@ -1,5 +1,5 @@
 /*
- Winter Cardinal UI v0.155.0
+ Winter Cardinal UI v0.158.0
  Copyright (C) 2019 Toshiba Corporation
  SPDX-License-Identifier: Apache-2.0
 
@@ -12162,7 +12162,7 @@ var DBase = /** @class */ (function (_super) {
         _this._auto = new DBaseAutoSet();
         _this._isDirty = true;
         _this._hasDirty = false;
-        _this._isChildrenDirty = false;
+        _this._isHierarchyDirty = false;
         _this._shadow = null;
         _this.name = (_a = options === null || options === void 0 ? void 0 : options.name) !== null && _a !== void 0 ? _a : "";
         var theme = toTheme(options) || _this.getThemeDefault();
@@ -12172,7 +12172,7 @@ var DBase = /** @class */ (function (_super) {
         _this._clearType = toEnum((_b = options === null || options === void 0 ? void 0 : options.clear) !== null && _b !== void 0 ? _b : theme.getClearType(), DLayoutClearType);
         _this._padding = new DBasePadding(theme, options, function () {
             _this.toParentResized();
-            _this.toChildrenDirty();
+            _this.toHierarchyDirty();
             DApplications.update(_this);
         });
         var toDirtyAndUpdate = function () {
@@ -12301,8 +12301,8 @@ var DBase = /** @class */ (function (_super) {
             if (_this.isDirty() || _this.hasDirty()) {
                 _this.toParentHasDirty();
             }
-            if (_this._isChildrenDirty) {
-                _this.toParentChildrenDirty();
+            if (_this._isHierarchyDirty) {
+                _this.toParentHierarchyDirty();
             }
             var newParent = _this.parent;
             if (newParent instanceof DBase) {
@@ -12394,7 +12394,7 @@ var DBase = /** @class */ (function (_super) {
         new DBaseReflowableImpl(this);
     };
     DBase.prototype.onChildrenChange = function () {
-        this.toChildrenDirty();
+        this.toHierarchyDirty();
         _super.prototype.onChildrenChange.call(this);
     };
     DBase.prototype.onShortcut = function (e) {
@@ -12424,46 +12424,48 @@ var DBase = /** @class */ (function (_super) {
     DBase.prototype.resize = function (width, height) {
         var oldWidth = this._width;
         var oldHeight = this._height;
-        var widthResized = oldWidth !== width;
-        var heightResized = oldHeight !== height;
-        if (widthResized) {
-            this._width = width;
+        var newWidth = width != null ? width : oldWidth;
+        var newHeight = height != null ? height : oldHeight;
+        var isWidthChanged = oldWidth !== newWidth;
+        var isHeightChanged = oldHeight !== newHeight;
+        if (isWidthChanged) {
+            this._width = newWidth;
         }
-        if (heightResized) {
-            this._height = height;
+        if (isHeightChanged) {
+            this._height = newHeight;
         }
-        var resized = widthResized || heightResized;
-        if (resized) {
-            this.onResize(width, height, oldWidth, oldHeight);
+        var isChanged = isWidthChanged || isHeightChanged;
+        if (isChanged) {
+            this.onResize(newWidth, newHeight, oldWidth, oldHeight);
         }
-        if (widthResized) {
+        if (isWidthChanged) {
             var scalarSet = this._scalarSet;
             if (scalarSet.x != null) {
-                var position = this.transform.position;
+                var position = this._position;
                 var parent_1 = this.getParentOfSize();
                 if (parent_1) {
-                    this.x = scalarSet.x(parent_1.width, width, parent_1.padding.getLeft(), position.x);
+                    this._position.x = scalarSet.x(parent_1.width, newWidth, parent_1.padding.getLeft(), position.x);
                 }
             }
         }
-        if (heightResized) {
+        if (isHeightChanged) {
             var scalarSet = this._scalarSet;
             if (scalarSet.y != null) {
-                var position = this.transform.position;
+                var position = this._position;
                 var parent_2 = this.getParentOfSize();
                 if (parent_2) {
-                    this.y = scalarSet.y(parent_2.height, height, parent_2.padding.getTop(), position.y);
+                    this._position.y = scalarSet.y(parent_2.height, newHeight, parent_2.padding.getTop(), position.y);
                 }
             }
         }
-        return resized;
+        return isChanged;
     };
     DBase.prototype.getClearType = function () {
         return this._clearType;
     };
     DBase.prototype.onResize = function (newWidth, newHeight, oldWidth, oldHeight) {
         this.toDirty();
-        this.toChildrenDirty();
+        this.toHierarchyDirty();
         var padding = this._padding;
         var children = this.children;
         for (var i = 0, imax = children.length; i < imax; ++i) {
@@ -12496,7 +12498,7 @@ var DBase = /** @class */ (function (_super) {
             return this._position.x;
         },
         set: function (x) {
-            this._position.x = x;
+            this.setX(x);
         },
         enumerable: false,
         configurable: true
@@ -12507,15 +12509,25 @@ var DBase = /** @class */ (function (_super) {
             return scalarSet.x;
         }
         else {
-            return this.x;
+            return this._position.x;
         }
     };
     DBase.prototype.setX = function (x) {
+        var scalarSet = this._scalarSet;
         if (isNumber(x)) {
-            this.x = x;
+            var position = this._position;
+            if (position.x !== x) {
+                scalarSet.x = undefined;
+                position.x = x;
+            }
+            else {
+                if (scalarSet.x !== undefined) {
+                    scalarSet.x = undefined;
+                    this.toParentResized();
+                }
+            }
         }
         else {
-            var scalarSet = this._scalarSet;
             var scalar = DScalarFunctions.position(x);
             if (scalarSet.x !== scalar) {
                 scalarSet.x = scalar;
@@ -12529,7 +12541,7 @@ var DBase = /** @class */ (function (_super) {
             return this._position.y;
         },
         set: function (y) {
-            this._position.y = y;
+            this.setY(y);
         },
         enumerable: false,
         configurable: true
@@ -12540,15 +12552,25 @@ var DBase = /** @class */ (function (_super) {
             return scalarSet.y;
         }
         else {
-            return this.y;
+            return this._position.y;
         }
     };
     DBase.prototype.setY = function (y) {
+        var scalarSet = this._scalarSet;
         if (isNumber(y)) {
-            this.y = y;
+            var position = this._position;
+            if (position.y !== y) {
+                scalarSet.y = undefined;
+                position.y = y;
+            }
+            else {
+                if (scalarSet.y !== undefined) {
+                    scalarSet.y = undefined;
+                    this.toParentResized();
+                }
+            }
         }
         else {
-            var scalarSet = this._scalarSet;
             var scalar = DScalarFunctions.position(y);
             if (scalarSet.y !== scalar) {
                 scalarSet.y = scalar;
@@ -12562,21 +12584,7 @@ var DBase = /** @class */ (function (_super) {
             return this._width;
         },
         set: function (width) {
-            var oldWidth = this._width;
-            if (oldWidth !== width) {
-                this._width = width;
-                var height = this._height;
-                this.onResize(width, height, oldWidth, height);
-                // Layout
-                var scalarSet = this._scalarSet;
-                if (scalarSet.x != null) {
-                    var position = this.transform.position;
-                    var parent_3 = this.getParentOfSize();
-                    if (parent_3) {
-                        this.x = scalarSet.x(parent_3.width, width, parent_3.padding.getLeft(), position.x);
-                    }
-                }
-            }
+            this.setWidth(width);
         },
         enumerable: false,
         configurable: true
@@ -12589,15 +12597,34 @@ var DBase = /** @class */ (function (_super) {
         var isOn = auto.isOn;
         var isAuto = auto.from(width);
         if (auto.isOn !== isOn) {
-            this.toChildrenDirty();
+            this.toHierarchyDirty();
             DApplications.update(this);
         }
         if (!isAuto) {
+            var scalarSet = this._scalarSet;
             if (isNumber(width)) {
-                this.width = width;
+                var oldWidth = this._width;
+                if (oldWidth !== width) {
+                    scalarSet.width = undefined;
+                    this._width = width;
+                    var height = this._height;
+                    this.onResize(width, height, oldWidth, height);
+                    if (scalarSet.x != null) {
+                        var position = this._position;
+                        var parent_3 = this.getParentOfSize();
+                        if (parent_3) {
+                            position.x = scalarSet.x(parent_3.width, width, parent_3.padding.getLeft(), position.x);
+                        }
+                    }
+                }
+                else {
+                    if (scalarSet.width !== undefined) {
+                        scalarSet.width = undefined;
+                        this.toParentResized();
+                    }
+                }
             }
             else {
-                var scalarSet = this._scalarSet;
                 var scalar = DScalarFunctions.size(width);
                 if (scalarSet.width !== scalar) {
                     scalarSet.width = scalar;
@@ -12612,21 +12639,7 @@ var DBase = /** @class */ (function (_super) {
             return this._height;
         },
         set: function (height) {
-            var oldHeight = this._height;
-            if (oldHeight !== height) {
-                this._height = height;
-                var width = this._width;
-                this.onResize(width, height, width, oldHeight);
-                // Layout
-                var scalarSet = this._scalarSet;
-                if (scalarSet.y != null) {
-                    var position = this.transform.position;
-                    var parent_4 = this.getParentOfSize();
-                    if (parent_4) {
-                        this.y = scalarSet.y(parent_4.height, height, parent_4.padding.getTop(), position.y);
-                    }
-                }
-            }
+            this.setHeight(height);
         },
         enumerable: false,
         configurable: true
@@ -12639,15 +12652,34 @@ var DBase = /** @class */ (function (_super) {
         var isOn = auto.isOn;
         var isAuto = auto.from(height);
         if (auto.isOn !== isOn) {
-            this.toChildrenDirty();
+            this.toHierarchyDirty();
             DApplications.update(this);
         }
         if (!isAuto) {
+            var scalarSet = this._scalarSet;
             if (isNumber(height)) {
-                this.height = height;
+                var oldHeight = this._height;
+                if (oldHeight !== height) {
+                    scalarSet.height = undefined;
+                    this._height = height;
+                    var width = this._width;
+                    this.onResize(width, height, width, oldHeight);
+                    if (scalarSet.y != null) {
+                        var position = this._position;
+                        var parent_4 = this.getParentOfSize();
+                        if (parent_4) {
+                            position.y = scalarSet.y(parent_4.height, height, parent_4.padding.getTop(), position.y);
+                        }
+                    }
+                }
+                else {
+                    if (scalarSet.height !== undefined) {
+                        scalarSet.height = undefined;
+                        this.toParentResized();
+                    }
+                }
             }
             else {
-                var scalarSet = this._scalarSet;
                 var scalar = DScalarFunctions.size(height);
                 if (scalarSet.height !== scalar) {
                     scalarSet.height = scalar;
@@ -12746,7 +12778,7 @@ var DBase = /** @class */ (function (_super) {
     DBase.prototype.show = function () {
         if (!this.visible) {
             this.visible = true;
-            this.toParentChildrenDirty();
+            this.toParentHierarchyDirty();
             DApplications.update(this);
         }
         return this;
@@ -12757,7 +12789,7 @@ var DBase = /** @class */ (function (_super) {
     DBase.prototype.hide = function () {
         if (this.visible) {
             this.visible = false;
-            this.toParentChildrenDirty();
+            this.toParentHierarchyDirty();
             this.blur(true);
             DApplications.update(this);
         }
@@ -12788,25 +12820,25 @@ var DBase = /** @class */ (function (_super) {
             parent.toHasDirty();
         }
     };
-    DBase.prototype.toChildrenDirty = function () {
-        if (!this._isChildrenDirty) {
-            this._isChildrenDirty = true;
-            this.onChildrenDirty();
-            this.toParentChildrenDirty();
+    DBase.prototype.toHierarchyDirty = function () {
+        if (!this._isHierarchyDirty) {
+            this._isHierarchyDirty = true;
+            this.onHierarchyDirty();
+            this.toParentHierarchyDirty();
             return true;
         }
         return false;
     };
-    DBase.prototype.toParentChildrenDirty = function () {
+    DBase.prototype.toParentHierarchyDirty = function () {
         var parent = this.parent;
         if (parent instanceof DBase) {
-            parent.toChildrenDirty();
+            parent.toHierarchyDirty();
         }
     };
-    DBase.prototype.isChildrenDirty = function () {
-        return this._isChildrenDirty;
+    DBase.prototype.isHierarchyDirty = function () {
+        return this._isHierarchyDirty;
     };
-    DBase.prototype.onChildrenDirty = function () {
+    DBase.prototype.onHierarchyDirty = function () {
         // DO NOTHING
     };
     DBase.prototype.isDirty = function () {
@@ -12922,16 +12954,26 @@ var DBase = /** @class */ (function (_super) {
         enumerable: false,
         configurable: true
     });
-    DBase.prototype.refit = function () {
-        if (this._isChildrenDirty) {
-            this._isChildrenDirty = false;
+    DBase.prototype.reflow = function () {
+        var isDirty = this._isDirty;
+        if (isDirty) {
+            this.onReflow();
+            this._isDirty = false;
+        }
+        var hasDirty = this._hasDirty;
+        var isHierarchyDirty = this._isHierarchyDirty;
+        if (hasDirty || isHierarchyDirty) {
+            this._hasDirty = false;
+            this._isHierarchyDirty = false;
             var children = this.children;
             for (var i = 0, imax = children.length; i < imax; ++i) {
                 var child = children[i];
                 if (child instanceof DBase) {
-                    child.refit();
+                    child.reflow();
                 }
             }
+        }
+        if (isDirty || hasDirty || isHierarchyDirty) {
             this.onRefit();
         }
     };
@@ -12966,7 +13008,7 @@ var DBase = /** @class */ (function (_super) {
                     width = Math.max(width, child.x + child.width);
                 }
             }
-            this.width = width + this.padding.getRight();
+            this.resize(width + this.padding.getRight(), undefined);
         }
         else if (isHeightAuto) {
             var height = 0;
@@ -12977,7 +13019,7 @@ var DBase = /** @class */ (function (_super) {
                     height = Math.max(height, child.y + child.height);
                 }
             }
-            this.height = height + this.padding.getBottom();
+            this.resize(undefined, height + this.padding.getBottom());
         }
     };
     DBase.prototype.isRefitable = function (target) {
@@ -12989,22 +13031,6 @@ var DBase = /** @class */ (function (_super) {
     DBase.prototype.hasRefitableWidth = function (target) {
         return (this.isRefitable(target) && !(target instanceof DBase && isFunction(target.getWidth())));
     };
-    DBase.prototype.reflow = function () {
-        if (this._isDirty) {
-            this.onReflow();
-            this._isDirty = false;
-        }
-        if (this._hasDirty) {
-            var children = this.children;
-            for (var i = 0, imax = children.length; i < imax; ++i) {
-                var child = children[i];
-                if (child instanceof DBase) {
-                    child.reflow();
-                }
-            }
-            this._hasDirty = false;
-        }
-    };
     DBase.prototype.onReflow = function () {
         this._reflowable.onReflow(this, this._width, this._height);
     };
@@ -18308,36 +18334,6 @@ var DButtonBaseWhen = {
     DOUBLE_CLICKED: 1
 };
 
-/*
- * Copyright (C) 2019 Toshiba Corporation
- * SPDX-License-Identifier: Apache-2.0
- */
-var DAlignHorizontal = {
-    LEFT: 0,
-    CENTER: 1,
-    RIGHT: 2
-};
-
-/*
- * Copyright (C) 2019 Toshiba Corporation
- * SPDX-License-Identifier: Apache-2.0
- */
-var DAlignVertical = {
-    TOP: 0,
-    MIDDLE: 1,
-    BOTTOM: 2
-};
-
-/*
- * Copyright (C) 2019 Toshiba Corporation
- * SPDX-License-Identifier: Apache-2.0
- */
-var DAlignWith = {
-    TEXT: 0,
-    PADDING: 1,
-    BORDER: 2
-};
-
 var DImageBaseThemeWrapperSecondary = /** @class */ (function () {
     function DImageBaseThemeWrapperSecondary(theme) {
         this._theme = theme;
@@ -18400,6 +18396,36 @@ var DImageBaseThemeWrapperTertiary = /** @class */ (function () {
     return DImageBaseThemeWrapperTertiary;
 }());
 
+/*
+ * Copyright (C) 2019 Toshiba Corporation
+ * SPDX-License-Identifier: Apache-2.0
+ */
+var DAlignHorizontal = {
+    LEFT: 0,
+    CENTER: 1,
+    RIGHT: 2
+};
+
+/*
+ * Copyright (C) 2019 Toshiba Corporation
+ * SPDX-License-Identifier: Apache-2.0
+ */
+var DAlignVertical = {
+    TOP: 0,
+    MIDDLE: 1,
+    BOTTOM: 2
+};
+
+/*
+ * Copyright (C) 2019 Toshiba Corporation
+ * SPDX-License-Identifier: Apache-2.0
+ */
+var DAlignWith = {
+    TEXT: 0,
+    PADDING: 1,
+    BORDER: 2
+};
+
 var toImageAlign = function (theme, options) {
     var _a, _b, _c;
     var align = options === null || options === void 0 ? void 0 : options.align;
@@ -18680,6 +18706,388 @@ var DImagePiece = /** @class */ (function () {
     return DImagePiece;
 }());
 
+var DImagePieceLayouterPart = /** @class */ (function () {
+    function DImagePieceLayouterPart() {
+        this.pieces = [];
+        this.size = 0;
+    }
+    DImagePieceLayouterPart.prototype.clear = function () {
+        this.pieces.length = 0;
+        this.size = 0;
+    };
+    DImagePieceLayouterPart.prototype.add = function (image, size, margin) {
+        var pieces = this.pieces;
+        pieces.push(image);
+        this.size += margin + size;
+    };
+    return DImagePieceLayouterPart;
+}());
+
+var DImagePieceLayouterPartBottom = /** @class */ (function (_super) {
+    __extends(DImagePieceLayouterPartBottom, _super);
+    function DImagePieceLayouterPartBottom() {
+        return _super !== null && _super.apply(this, arguments) || this;
+    }
+    DImagePieceLayouterPartBottom.prototype.execute = function (pbottom, height, marginAfter) {
+        var pieces = this.pieces;
+        var y = height - pbottom;
+        if (marginAfter) {
+            var margin = 0;
+            for (var i = 0, imax = pieces.length; i < imax; ++i) {
+                var piece = pieces[i];
+                y -= margin + piece.bound.height;
+                piece.image.y = y;
+                margin = piece.margin.horizontal;
+            }
+        }
+        else {
+            for (var i = 0, imax = pieces.length; i < imax; ++i) {
+                var piece = pieces[i];
+                y -= piece.margin.horizontal + piece.bound.height;
+                piece.image.y = y;
+            }
+        }
+    };
+    return DImagePieceLayouterPartBottom;
+}(DImagePieceLayouterPart));
+
+var DImagePieceLayouterPartCenter = /** @class */ (function (_super) {
+    __extends(DImagePieceLayouterPartCenter, _super);
+    function DImagePieceLayouterPartCenter() {
+        return _super !== null && _super.apply(this, arguments) || this;
+    }
+    DImagePieceLayouterPartCenter.prototype.add = function (image, size, margin) {
+        var pieces = this.pieces;
+        pieces.push(image);
+        this.size = Math.max(this.size, size);
+    };
+    DImagePieceLayouterPartCenter.prototype.execute = function (pleft, pright, width) {
+        var c = pleft + (width - pleft - pright) * 0.5;
+        var pieces = this.pieces;
+        for (var i = 0, imax = pieces.length; i < imax; ++i) {
+            var piece = pieces[i];
+            piece.image.x = c - piece.bound.width * 0.5;
+        }
+    };
+    return DImagePieceLayouterPartCenter;
+}(DImagePieceLayouterPart));
+
+var DImagePieceLayouterPartLeft = /** @class */ (function (_super) {
+    __extends(DImagePieceLayouterPartLeft, _super);
+    function DImagePieceLayouterPartLeft() {
+        return _super !== null && _super.apply(this, arguments) || this;
+    }
+    DImagePieceLayouterPartLeft.prototype.execute = function (pleft, marginAfter) {
+        var pieces = this.pieces;
+        var x = pleft;
+        if (marginAfter) {
+            for (var i = 0, imax = pieces.length; i < imax; ++i) {
+                var piece = pieces[i];
+                piece.image.x = x;
+                x += piece.bound.width + piece.margin.horizontal;
+            }
+        }
+        else {
+            for (var i = 0, imax = pieces.length; i < imax; ++i) {
+                var piece = pieces[i];
+                x += piece.margin.horizontal;
+                piece.image.x = x;
+                x += piece.bound.width;
+            }
+        }
+    };
+    return DImagePieceLayouterPartLeft;
+}(DImagePieceLayouterPart));
+
+var DImagePieceLayouterPartMiddle = /** @class */ (function (_super) {
+    __extends(DImagePieceLayouterPartMiddle, _super);
+    function DImagePieceLayouterPartMiddle() {
+        return _super !== null && _super.apply(this, arguments) || this;
+    }
+    DImagePieceLayouterPartMiddle.prototype.add = function (image, size, margin) {
+        var pieces = this.pieces;
+        pieces.push(image);
+        this.size = Math.max(this.size, size);
+    };
+    DImagePieceLayouterPartMiddle.prototype.execute = function (ptop, pbottom, height) {
+        var c = ptop + (height - ptop - pbottom) * 0.5;
+        var pieces = this.pieces;
+        for (var i = 0, imax = pieces.length; i < imax; ++i) {
+            var piece = pieces[i];
+            piece.image.y = c - piece.bound.height * 0.5;
+        }
+    };
+    return DImagePieceLayouterPartMiddle;
+}(DImagePieceLayouterPart));
+
+var DImagePieceLayouterPartRight = /** @class */ (function (_super) {
+    __extends(DImagePieceLayouterPartRight, _super);
+    function DImagePieceLayouterPartRight() {
+        return _super !== null && _super.apply(this, arguments) || this;
+    }
+    DImagePieceLayouterPartRight.prototype.execute = function (pright, width, marginAfter) {
+        var pieces = this.pieces;
+        var x = width - pright;
+        if (marginAfter) {
+            var margin = 0;
+            for (var i = 0, imax = pieces.length; i < imax; ++i) {
+                var piece = pieces[i];
+                x -= margin + piece.bound.width;
+                piece.image.x = x;
+                margin = piece.margin.horizontal;
+            }
+        }
+        else {
+            for (var i = 0, imax = pieces.length; i < imax; ++i) {
+                var piece = pieces[i];
+                x -= piece.margin.horizontal + piece.bound.width;
+                piece.image.x = x;
+            }
+        }
+    };
+    return DImagePieceLayouterPartRight;
+}(DImagePieceLayouterPart));
+
+var DImagePieceLayouterPartTop = /** @class */ (function (_super) {
+    __extends(DImagePieceLayouterPartTop, _super);
+    function DImagePieceLayouterPartTop() {
+        return _super !== null && _super.apply(this, arguments) || this;
+    }
+    DImagePieceLayouterPartTop.prototype.execute = function (ptop, marginAfter) {
+        var pieces = this.pieces;
+        var y = ptop;
+        if (marginAfter) {
+            var margin = 0;
+            for (var i = 0, imax = pieces.length; i < imax; ++i) {
+                var piece = pieces[i];
+                piece.image.y = margin + y;
+                y += piece.bound.height;
+                margin = piece.margin.vertical;
+            }
+        }
+        else {
+            for (var i = 0, imax = pieces.length; i < imax; ++i) {
+                var piece = pieces[i];
+                y += piece.margin.vertical;
+                piece.image.y = y;
+                y += piece.bound.height;
+            }
+        }
+    };
+    return DImagePieceLayouterPartTop;
+}(DImagePieceLayouterPart));
+
+var DImagePieceLayouterPartContainer = /** @class */ (function () {
+    function DImagePieceLayouterPartContainer() {
+        this.left = new DImagePieceLayouterPartLeft();
+        this.center = new DImagePieceLayouterPartCenter();
+        this.right = new DImagePieceLayouterPartRight();
+        this.top = new DImagePieceLayouterPartTop();
+        this.middle = new DImagePieceLayouterPartMiddle();
+        this.bottom = new DImagePieceLayouterPartBottom();
+    }
+    DImagePieceLayouterPartContainer.prototype.clear = function () {
+        this.left.clear();
+        this.center.clear();
+        this.right.clear();
+        this.top.clear();
+        this.middle.clear();
+        this.bottom.clear();
+        this.text = undefined;
+    };
+    DImagePieceLayouterPartContainer.prototype.add = function (image) {
+        var imageImage = image.image;
+        if (imageImage != null) {
+            var imageBound = image.bound;
+            var imageBoundWidth = imageBound.width;
+            var imageBoundHeight = imageBound.height;
+            var imageMargin = image.margin;
+            var imageMarginHorizontal = imageMargin.horizontal;
+            var imageMarginVertical = imageMargin.vertical;
+            var imageAlign = image.align;
+            switch (imageAlign.horizontal) {
+                case DAlignHorizontal.LEFT:
+                    this.left.add(image, imageBoundWidth, imageMarginHorizontal);
+                    break;
+                case DAlignHorizontal.CENTER:
+                    this.center.add(image, imageBoundWidth, imageMarginHorizontal);
+                    break;
+                case DAlignHorizontal.RIGHT:
+                    this.right.add(image, imageBoundWidth, imageMarginHorizontal);
+                    break;
+            }
+            switch (imageAlign.vertical) {
+                case DAlignVertical.TOP:
+                    this.top.add(image, imageBoundHeight, imageMarginVertical);
+                    break;
+                case DAlignVertical.MIDDLE:
+                    this.middle.add(image, imageBoundHeight, imageMarginVertical);
+                    break;
+                case DAlignVertical.BOTTOM:
+                    this.bottom.add(image, imageBoundHeight, imageMarginVertical);
+                    break;
+            }
+        }
+    };
+    DImagePieceLayouterPartContainer.prototype.set = function (text) {
+        this.text = text;
+    };
+    Object.defineProperty(DImagePieceLayouterPartContainer.prototype, "width", {
+        get: function () {
+            var text = this.text;
+            var left = this.left;
+            var center = this.center;
+            var right = this.right;
+            if (text) {
+                return Math.max(left.size + text.width + right.size, center.size);
+            }
+            else {
+                return Math.max(left.size, right.size, center.size);
+            }
+        },
+        enumerable: false,
+        configurable: true
+    });
+    Object.defineProperty(DImagePieceLayouterPartContainer.prototype, "height", {
+        get: function () {
+            var text = this.text;
+            var top = this.top;
+            var middle = this.middle;
+            var bottom = this.bottom;
+            if (text) {
+                return Math.max(top.size + text.height + bottom.size, middle.size);
+            }
+            else {
+                return Math.max(top.size, bottom.size, middle.size);
+            }
+        },
+        enumerable: false,
+        configurable: true
+    });
+    DImagePieceLayouterPartContainer.prototype.execute = function (pleft, ptop, pright, pbottom, textAlign, width, height) {
+        var left = this.left;
+        var center = this.center;
+        var right = this.right;
+        var top = this.top;
+        var middle = this.middle;
+        var bottom = this.bottom;
+        var text = this.text;
+        if (text) {
+            var textX = 0;
+            var textWidth = text.width;
+            switch (textAlign.horizontal) {
+                case DAlignHorizontal.LEFT:
+                    textX = pleft + left.size;
+                    break;
+                case DAlignHorizontal.CENTER:
+                    textX =
+                        pleft +
+                            (width - pleft - pright - (left.size + textWidth + right.size)) * 0.5 +
+                            left.size;
+                    break;
+                case DAlignHorizontal.RIGHT:
+                    textX = width - pright - right.size - textWidth;
+                    break;
+            }
+            var textY = 0;
+            var textHeight = text.height;
+            switch (textAlign.vertical) {
+                case DAlignVertical.TOP:
+                    textY = ptop + top.size;
+                    break;
+                case DAlignVertical.MIDDLE:
+                    textY =
+                        ptop +
+                            (height - ptop - pbottom - (top.size + textHeight + bottom.size)) * 0.5 +
+                            top.size;
+                    break;
+                case DAlignVertical.BOTTOM:
+                    textY = height - pbottom - bottom.size - textHeight;
+                    break;
+            }
+            text.position.set(textX, textY);
+            text.setClippingDelta(left.size + right.size, top.size + bottom.size);
+            left.execute(textX - left.size, true);
+            center.execute(0, 0, textX * 2 + textWidth);
+            right.execute(0, textX + textWidth + right.size, true);
+            top.execute(textY - top.size, true);
+            middle.execute(0, 0, textY * 2 + textHeight);
+            bottom.execute(0, textY + textHeight + bottom.size, true);
+        }
+        else {
+            left.execute(pleft, false);
+            center.execute(pleft, pright, width);
+            right.execute(pright, width, false);
+            top.execute(ptop, false);
+            middle.execute(ptop, pbottom, height);
+            bottom.execute(pbottom, height, false);
+        }
+    };
+    return DImagePieceLayouterPartContainer;
+}());
+
+var DImagePieceLayouter = /** @class */ (function () {
+    function DImagePieceLayouter() {
+        this.text = new DImagePieceLayouterPartContainer();
+        this.padding = new DImagePieceLayouterPartContainer();
+        this.border = new DImagePieceLayouterPartContainer();
+    }
+    DImagePieceLayouter.prototype.clear = function () {
+        this.text.clear();
+        this.padding.clear();
+        this.border.clear();
+    };
+    DImagePieceLayouter.prototype.add = function (image) {
+        var imageImage = image.image;
+        if (imageImage) {
+            switch (image.align.with) {
+                case DAlignWith.TEXT:
+                    this.text.add(image);
+                    break;
+                case DAlignWith.PADDING:
+                    this.padding.add(image);
+                    break;
+                case DAlignWith.BORDER:
+                    this.border.add(image);
+                    break;
+            }
+        }
+    };
+    DImagePieceLayouter.prototype.set = function (text) {
+        this.text.set(text);
+    };
+    DImagePieceLayouter.prototype.execute = function (padding, textAlign, width, height) {
+        var pleft = padding.getLeft();
+        var ptop = padding.getTop();
+        var pright = padding.getRight();
+        var pbottom = padding.getBottom();
+        if (width == null) {
+            width = pleft + this.width + pright;
+        }
+        if (height == null) {
+            height = ptop + this.height + pbottom;
+        }
+        this.border.execute(0, 0, 0, 0, textAlign, width, height);
+        this.padding.execute(pleft, ptop, pright, pbottom, textAlign, width, height);
+        this.text.execute(pleft, ptop, pright, pbottom, textAlign, width, height);
+    };
+    Object.defineProperty(DImagePieceLayouter.prototype, "width", {
+        get: function () {
+            return Math.max(this.border.width, this.padding.width, this.text.width);
+        },
+        enumerable: false,
+        configurable: true
+    });
+    Object.defineProperty(DImagePieceLayouter.prototype, "height", {
+        get: function () {
+            return Math.max(this.border.height, this.padding.height, this.text.height);
+        },
+        enumerable: false,
+        configurable: true
+    });
+    return DImagePieceLayouter;
+}());
+
 /*
  * Copyright (C) 2019 Toshiba Corporation
  * SPDX-License-Identifier: Apache-2.0
@@ -19905,32 +20313,42 @@ var DTextBase = /** @class */ (function (_super) {
     DTextBase.prototype.updateTextPosition = function (text) {
         var align = this._textAlign;
         var padding = this._padding;
-        var toRounded = this.toRounded;
-        switch (align.horizontal) {
-            case DAlignHorizontal.LEFT:
-                text.x = toRounded(padding.getLeft());
-                break;
-            case DAlignHorizontal.CENTER:
-                text.x = toRounded((this.width - text.width) * 0.5);
-                break;
-            case DAlignHorizontal.RIGHT:
-                text.x = toRounded(this.width - text.width - padding.getRight());
-                break;
+        var auto = this._auto;
+        var textX = 0;
+        var pleft = padding.getLeft();
+        var alignHorizontal = align.horizontal;
+        if (auto.width.isOn || alignHorizontal === DAlignHorizontal.LEFT) {
+            textX = pleft;
         }
-        switch (align.vertical) {
-            case DAlignVertical.TOP:
-                text.y = toRounded(padding.getTop());
-                break;
-            case DAlignVertical.MIDDLE:
-                text.y = toRounded((this.height - text.height) * 0.5);
-                break;
-            case DAlignVertical.BOTTOM:
-                text.y = toRounded(this.height - text.height - padding.getBottom());
-                break;
+        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;
+            }
+            else {
+                textX = width - textWidth - pright;
+            }
         }
-    };
-    DTextBase.prototype.toRounded = function (value) {
-        return Math.round(value);
+        var textY = 0;
+        var ptop = padding.getTop();
+        var alignVertical = align.vertical;
+        if (auto.height.isOn || alignVertical === DAlignVertical.TOP) {
+            textY = ptop;
+        }
+        else {
+            var height = this.height;
+            var textHeight = text.height;
+            var pbottom = padding.getBottom();
+            if (alignVertical === DAlignVertical.MIDDLE) {
+                textY = ptop + (height - ptop - pbottom - textHeight) * 0.5;
+            }
+            else {
+                textY = height - textHeight - pbottom;
+            }
+        }
+        text.position.set(textX, textY);
     };
     DTextBase.prototype.getTextColor = function (theme, state) {
         var color = this._textColor;
@@ -20100,277 +20518,24 @@ var DImageBase = /** @class */ (function (_super) {
         this.updateTextAndImage();
     };
     DImageBase.prototype.updateTextAndImage = function () {
-        var text = this._text;
+        var _a;
         var images = this._images;
-        var padding = this._padding;
-        var toRounded = this.toRounded;
-        var width = this.width;
-        var height = this.height;
-        var pl = padding.getLeft();
-        var pr = padding.getRight();
-        var pt = padding.getTop();
-        var pb = padding.getBottom();
-        var noText = text == null;
-        var textLeftFirst = noText;
-        var textTopFirst = noText;
-        var textRightLastMargin = 0;
-        var textBottomLastMargin = 0;
-        var textLeft = 0;
-        var textRight = 0;
-        var textTop = 0;
-        var textBottom = 0;
-        var paddingLeft = pl;
-        var paddingRight = width - pr;
-        var paddingTop = pt;
-        var paddingBottom = height - pb;
-        var borderLeft = 0;
-        var borderRight = width;
-        var borderTop = 0;
-        var borderBottom = height;
+        var layouter = ((_a = DImageBase.LAYOUTER) !== null && _a !== void 0 ? _a : (DImageBase.LAYOUTER = new DImagePieceLayouter()));
         for (var i = 0, imax = images.length; i < imax; ++i) {
             var image = images[i];
             image.updateSource();
             image.updateTint();
             image.updateBound();
-            var imageImage = image.image;
-            if (imageImage) {
-                var imageBound = image.bound;
-                var imageBoundWidth = imageBound.width;
-                var imageBoundHeight = imageBound.height;
-                var imageMargin = image.margin;
-                var imageMarginHorizontal = imageMargin.horizontal;
-                var imageMarginVertical = imageMargin.vertical;
-                // Text
-                if (image.align.with === DAlignWith.TEXT) {
-                    switch (image.align.horizontal) {
-                        case DAlignHorizontal.LEFT:
-                            imageImage.x = textLeft;
-                            textLeft += imageBoundWidth;
-                            if (textLeftFirst) {
-                                textLeftFirst = false;
-                            }
-                            else {
-                                textLeft += imageMarginHorizontal;
-                            }
-                            break;
-                        case DAlignHorizontal.CENTER:
-                            // DO NOTHING
-                            break;
-                        case DAlignHorizontal.RIGHT:
-                            textRight -= imageBoundWidth;
-                            imageImage.x = textRight;
-                            textRight -= imageMarginHorizontal;
-                            textRightLastMargin = imageMarginHorizontal;
-                            break;
-                    }
-                    switch (image.align.vertical) {
-                        case DAlignVertical.TOP:
-                            imageImage.y = textTop;
-                            textTop += imageBoundHeight;
-                            if (textTopFirst) {
-                                textTopFirst = false;
-                            }
-                            else {
-                                textTop += imageMarginVertical;
-                            }
-                            break;
-                        case DAlignVertical.MIDDLE:
-                            // DO NOTHING
-                            break;
-                        case DAlignVertical.BOTTOM:
-                            textBottom -= imageBoundHeight;
-                            imageImage.y = textBottom;
-                            textBottom -= imageMarginVertical;
-                            textBottomLastMargin = imageMarginVertical;
-                            break;
-                    }
-                }
-                // Padding
-                if (image.align.with === DAlignWith.PADDING) {
-                    switch (image.align.horizontal) {
-                        case DAlignHorizontal.LEFT:
-                            paddingLeft += imageMarginHorizontal;
-                            imageImage.x = toRounded(paddingLeft);
-                            paddingLeft += imageBoundWidth;
-                            break;
-                        case DAlignHorizontal.CENTER:
-                            // DO NOTHING
-                            break;
-                        case DAlignHorizontal.RIGHT:
-                            paddingRight -= imageBoundWidth + imageMarginHorizontal;
-                            imageImage.x = toRounded(paddingRight);
-                            break;
-                    }
-                    switch (image.align.vertical) {
-                        case DAlignVertical.TOP:
-                            paddingTop += imageMarginVertical;
-                            imageImage.y = toRounded(paddingTop);
-                            paddingTop += imageBoundHeight;
-                            break;
-                        case DAlignVertical.MIDDLE:
-                            // DO NOTHING
-                            break;
-                        case DAlignVertical.BOTTOM:
-                            paddingBottom -= imageBoundHeight + imageMarginVertical;
-                            imageImage.y = toRounded(paddingBottom);
-                            break;
-                    }
-                }
-                // Border
-                if (image.align.with === DAlignWith.BORDER) {
-                    switch (image.align.horizontal) {
-                        case DAlignHorizontal.LEFT:
-                            borderLeft += imageMarginHorizontal;
-                            imageImage.x = toRounded(borderLeft);
-                            borderLeft += imageBoundWidth;
-                            break;
-                        case DAlignHorizontal.CENTER:
-                            // DO NOTHING
-                            break;
-                        case DAlignHorizontal.RIGHT:
-                            borderRight -= imageBoundWidth + imageMarginHorizontal;
-                            imageImage.x = toRounded(borderRight);
-                            break;
-                    }
-                    switch (image.align.vertical) {
-                        case DAlignVertical.TOP:
-                            borderTop += imageMarginVertical;
-                            imageImage.y = toRounded(borderTop);
-                            borderTop += imageBoundHeight;
-                            break;
-                        case DAlignVertical.MIDDLE:
-                            // DO NOTHING
-                            break;
-                        case DAlignVertical.BOTTOM:
-                            borderBottom -= imageBoundHeight + imageMarginVertical;
-                            imageImage.y = toRounded(borderBottom);
-                            break;
-                    }
-                }
-            }
-        }
-        if (noText) {
-            textRight += textRightLastMargin;
-            textBottom += textBottomLastMargin;
+            layouter.add(image);
         }
-        // Text
-        var textLeftAdjust = 0;
-        var textCenterAdjust = 0;
-        var textRightAdjust = 0;
-        var textTopAdjust = 0;
-        var textMiddleAdjust = 0;
-        var textBottomAdjust = 0;
+        var text = this._text;
         if (text != null) {
             this.updateTextColor(text);
-            text.setClippingDelta(textLeft - textRight, textTop - textBottom);
-            var textAlign = this._textAlign;
-            var textWidth = text.width;
-            var textHeight = text.height;
-            switch (textAlign.horizontal) {
-                case DAlignHorizontal.LEFT:
-                    textLeftAdjust = pl;
-                    textRightAdjust = textLeftAdjust + textLeft + textWidth - textRight;
-                    break;
-                case DAlignHorizontal.CENTER:
-                    textLeftAdjust = (width - textLeft + textRight - textWidth) * 0.5;
-                    textRightAdjust = textLeftAdjust + textLeft + textWidth - textRight;
-                    break;
-                case DAlignHorizontal.RIGHT:
-                    textRightAdjust = width - pr;
-                    textLeftAdjust = textRightAdjust + textRight - textWidth - textLeft;
-                    break;
-            }
-            text.x = toRounded(textLeftAdjust + textLeft);
-            textCenterAdjust = textLeftAdjust + textLeft + textWidth * 0.5;
-            switch (textAlign.vertical) {
-                case DAlignVertical.TOP:
-                    textTopAdjust = pt;
-                    textBottomAdjust = textTopAdjust + textTop + textHeight - textBottom;
-                    break;
-                case DAlignVertical.MIDDLE:
-                    textTopAdjust = (height - textTop + textBottom - textHeight) * 0.5;
-                    textBottomAdjust = textTopAdjust + textTop + textHeight - textBottom;
-                    break;
-                case DAlignVertical.BOTTOM:
-                    textBottomAdjust = height - pb;
-                    textTopAdjust = textBottomAdjust + textBottom - textHeight - textTop;
-                    break;
-            }
-            text.y = toRounded(textTopAdjust + textTop);
-            textMiddleAdjust = textTopAdjust + textTop + textHeight * 0.5;
-        }
-        else {
-            textLeftAdjust = (width - textLeft + textRight) * 0.5;
-            textRightAdjust = textLeftAdjust + textLeft - textRight;
-            textCenterAdjust = textLeftAdjust + textLeft;
-            textTopAdjust = (height - textTop + textBottom) * 0.5;
-            textBottomAdjust = textTopAdjust + textTop - textBottom;
-            textMiddleAdjust = textTopAdjust + textTop;
-        }
-        var paddingCenterAdjust = width * 0.5;
-        var paddingMiddleAdjust = height * 0.5;
-        var borderCenterAdjust = width * 0.5;
-        var borderMiddleAdjust = height * 0.5;
-        for (var i = 0, imax = images.length; i < imax; ++i) {
-            var image = images[i];
-            var imageImage = image.image;
-            if (imageImage) {
-                var imageBound = image.bound;
-                var imageBoundWidth = imageBound.width;
-                var imageBoundHeight = imageBound.height;
-                // Text
-                if (image.align.with === DAlignWith.TEXT) {
-                    switch (image.align.horizontal) {
-                        case DAlignHorizontal.LEFT:
-                            imageImage.x = toRounded(imageImage.x + textLeftAdjust);
-                            break;
-                        case DAlignHorizontal.CENTER:
-                            imageImage.x = toRounded(textCenterAdjust - imageBoundWidth * 0.5);
-                            break;
-                        case DAlignHorizontal.RIGHT:
-                            imageImage.x = toRounded(imageImage.x + textRightAdjust);
-                            break;
-                    }
-                    switch (image.align.vertical) {
-                        case DAlignVertical.TOP:
-                            imageImage.y = toRounded(imageImage.y + textTopAdjust);
-                            break;
-                        case DAlignVertical.MIDDLE:
-                            imageImage.y = toRounded(textMiddleAdjust - imageBoundHeight * 0.5);
-                            break;
-                        case DAlignVertical.BOTTOM:
-                            imageImage.y = toRounded(imageImage.y + textBottomAdjust);
-                            break;
-                    }
-                }
-                // Padding
-                if (image.align.with === DAlignWith.PADDING) {
-                    switch (image.align.horizontal) {
-                        case DAlignHorizontal.CENTER:
-                            imageImage.x = toRounded(paddingCenterAdjust - imageBoundWidth * 0.5);
-                            break;
-                    }
-                    switch (image.align.vertical) {
-                        case DAlignVertical.MIDDLE:
-                            imageImage.y = toRounded(paddingMiddleAdjust - imageBoundHeight * 0.5);
-                            break;
-                    }
-                }
-                // Border
-                if (image.align.with === DAlignWith.BORDER) {
-                    switch (image.align.horizontal) {
-                        case DAlignHorizontal.CENTER:
-                            imageImage.x = toRounded(borderCenterAdjust - imageBoundWidth * 0.5);
-                            break;
-                    }
-                    switch (image.align.vertical) {
-                        case DAlignVertical.MIDDLE:
-                            imageImage.y = toRounded(borderMiddleAdjust - imageBoundHeight * 0.5);
-                            break;
-                    }
-                }
-            }
+            layouter.set(text);
         }
+        var auto = this._auto;
+        layouter.execute(this._padding, this._textAlign, auto.width.isOn ? null : this.width, auto.height.isOn ? null : this.height);
+        layouter.clear();
     };
     DImageBase.prototype.isRefitable = function (target) {
         if (_super.prototype.isRefitable.call(this, target)) {
@@ -22676,9 +22841,6 @@ var DHtmlElement = /** @class */ (function (_super) {
         this.toGlobal(point, point, true);
         result.width = point.x - result.x;
         result.height = point.y - result.y;
-        // Rounds pixels as Pixi.js does
-        result.x = ((result.x * resolution) | 0) / resolution;
-        result.y = ((result.y * resolution) | 0) / resolution;
         return result;
     };
     DHtmlElement.prototype.getClipperRect = function (resolution, point, result) {
@@ -33635,6 +33797,144 @@ var EShapeEmbedded = /** @class */ (function (_super) {
     return EShapeEmbedded;
 }(EShapeGroupViewer));
 
+/*
+ * Copyright (C) 2019 Toshiba Corporation
+ * SPDX-License-Identifier: Apache-2.0
+ */
+var EShapeLayerState = {
+    INVISIBLE: "INVISIBLE",
+    INTERACTIVE: "INTERACTIVE",
+    DRAGGABLE: "DRAGGABLE",
+    PINCHABLE: "PINCHABLE"
+};
+
+/*
+ * Copyright (C) 2019 Toshiba Corporation
+ * SPDX-License-Identifier: Apache-2.0
+ */
+var EShapeEmbeddedLayer = /** @class */ (function (_super) {
+    __extends(EShapeEmbeddedLayer, _super);
+    function EShapeEmbeddedLayer(name, isEditMode, type) {
+        if (type === void 0) { type = EShapeType.EMBEDDED_LAYER; }
+        var _this = _super.call(this, isEditMode, type) || this;
+        _this._name = name;
+        return _this;
+    }
+    Object.defineProperty(EShapeEmbeddedLayer.prototype, "name", {
+        get: function () {
+            return this._name;
+        },
+        enumerable: false,
+        configurable: true
+    });
+    EShapeEmbeddedLayer.prototype.newGroupFill = function () {
+        return new EShapeFillImpl(this, false, 0xffffff, 1);
+    };
+    EShapeEmbeddedLayer.prototype.isGroupSizeFittable = function () {
+        return false;
+    };
+    EShapeEmbeddedLayer.prototype.clone = function () {
+        var result = this.newClone().copy(this);
+        var children = this.children;
+        for (var i = 0, imax = children.length; i < imax; ++i) {
+            var clone = children[i].clone();
+            clone.parent = result;
+            result.children.push(clone);
+        }
+        result.onChildTransformChange();
+        result.toDirty();
+        result.size.init();
+        return result;
+    };
+    EShapeEmbeddedLayer.prototype.newClone = function () {
+        var constructor = this.constructor;
+        return new constructor(this._name, this._isEditMode, this.type);
+    };
+    EShapeEmbeddedLayer.prototype.serializeChildren = function (manager) {
+        return [];
+    };
+    EShapeEmbeddedLayer.prototype.serializeImage = function (manager) {
+        return -1;
+    };
+    EShapeEmbeddedLayer.prototype.serializeGradient = function (manager) {
+        return -1;
+    };
+    EShapeEmbeddedLayer.deserialize = function (serialized, manager, width, height) {
+        var _a, _b, _c;
+        var result = new EShapeEmbeddedLayer(this.deserializeName(serialized[0], manager), manager.isEditMode);
+        var visibility = serialized[1];
+        var visible = visibility == null || !!(visibility & 0x2);
+        if (!visible) {
+            result.visible = false;
+            result.state.add(EShapeLayerState.INVISIBLE);
+        }
+        var positionX = -0.5 * width + (serialized[2] || 0);
+        var positionY = -0.5 * height + (serialized[3] || 0);
+        result.transform.position.set(positionX, positionY);
+        var sizeX = (_a = serialized[4]) !== null && _a !== void 0 ? _a : width;
+        var sizeY = (_b = serialized[5]) !== null && _b !== void 0 ? _b : height;
+        result.size.set(sizeX, sizeY);
+        var fillId = serialized[6];
+        if (fillId != null) {
+            result.fill.deserialize(fillId, manager);
+        }
+        if (!manager.isEditMode) {
+            var state = (_c = serialized[7]) !== null && _c !== void 0 ? _c : 1;
+            var isInteractive = state & 0x1;
+            var isDraggable = state & 0x2;
+            var isPinchable = state & 0x4;
+            if (isDraggable || isPinchable) {
+                var gestureType = (isDraggable
+                    ? EShapeActionValueMiscGestureType.DRAG
+                    : EShapeActionValueMiscGestureType.NONE) |
+                    (isPinchable
+                        ? EShapeActionValueMiscGestureType.PINCH
+                        : EShapeActionValueMiscGestureType.NONE);
+                result.action.add(new EShapeActionValueMiscLayerGesture("", gestureType));
+            }
+            if (isInteractive || isDraggable || isPinchable) {
+                result.interactive = true;
+            }
+        }
+        return result;
+    };
+    EShapeEmbeddedLayer.deserializeName = function (target, manager) {
+        if (isString(target)) {
+            return target;
+        }
+        else {
+            var resources = manager.resources;
+            if (0 <= target && target <= resources.length) {
+                return resources[target];
+            }
+            return "";
+        }
+    };
+    return EShapeEmbeddedLayer;
+}(EShapeGroupViewer));
+
+/*
+ * Copyright (C) 2019 Toshiba Corporation
+ * SPDX-License-Identifier: Apache-2.0
+ */
+var EShapeRectangle = /** @class */ (function (_super) {
+    __extends(EShapeRectangle, _super);
+    function EShapeRectangle(type) {
+        if (type === void 0) { type = EShapeType.RECTANGLE; }
+        return _super.call(this, type) || this;
+    }
+    EShapeRectangle.prototype.clone = function () {
+        return new EShapeRectangle(this.type).copy(this);
+    };
+    EShapeRectangle.prototype.containsAbs = function (x, y, ax, ay, sw, ss, sa) {
+        if (_super.prototype.containsAbsBBox.call(this, x, y, ax, ay)) {
+            return hitTestRectangle(this, x, y, ax, ay, sw, ss);
+        }
+        return false;
+    };
+    return EShapeRectangle;
+}(EShapePrimitive));
+
 /*
  * Copyright (C) 2019 Toshiba Corporation
  * SPDX-License-Identifier: Apache-2.0
@@ -33651,6 +33951,31 @@ var create = function (name, width, height, container, manager, item) {
     shape.size.set(sizeX, sizeY);
     return result;
 };
+var createMissing = function (name, manager, item) {
+    var shape = new EShapeEmbedded(name, manager.isEditMode);
+    var result = deserializeBase(item, manager, shape);
+    var size = shape.size;
+    var sizeX = size.x;
+    var sizeY = size.y;
+    var children = shape.children;
+    var layer = new EShapeEmbeddedLayer("missing", manager.isEditMode);
+    var px = 0.5 * sizeX;
+    var py = 0.5 * sizeX;
+    layer.transform.position.set(-px, -py);
+    layer.size.set(sizeX, sizeY);
+    layer.parent = shape;
+    var rectangle = new EShapeRectangle();
+    rectangle.stroke.color = 0xff0000;
+    rectangle.transform.position.set(px, py);
+    rectangle.size.copyFrom(shape.size);
+    rectangle.attach(layer);
+    children.push(layer);
+    shape.onChildTransformChange();
+    shape.toDirty();
+    shape.onAttach();
+    shape.size.init();
+    return result;
+};
 var deserializeEmbedded = function (item, manager) {
     var pieces = manager.pieces;
     var pieceId = item[15];
@@ -33662,6 +33987,9 @@ var deserializeEmbedded = function (item, manager) {
             if (pieceDatum) {
                 return create(piece, pieceDatum.width, pieceDatum.height, pieceDatum.layer, manager, item);
             }
+            else {
+                return createMissing(piece, manager, item);
+            }
         }
     }
     return null;
@@ -34592,28 +34920,6 @@ var createRectangleUploaded = function (buffer, shape, voffset, ioffset, antiali
     return null;
 };
 
-/*
- * Copyright (C) 2019 Toshiba Corporation
- * SPDX-License-Identifier: Apache-2.0
- */
-var EShapeRectangle = /** @class */ (function (_super) {
-    __extends(EShapeRectangle, _super);
-    function EShapeRectangle(type) {
-        if (type === void 0) { type = EShapeType.RECTANGLE; }
-        return _super.call(this, type) || this;
-    }
-    EShapeRectangle.prototype.clone = function () {
-        return new EShapeRectangle(this.type).copy(this);
-    };
-    EShapeRectangle.prototype.containsAbs = function (x, y, ax, ay, sw, ss, sa) {
-        if (_super.prototype.containsAbsBBox.call(this, x, y, ax, ay)) {
-            return hitTestRectangle(this, x, y, ax, ay, sw, ss);
-        }
-        return false;
-    };
-    return EShapeRectangle;
-}(EShapePrimitive));
-
 /*
  * Copyright (C) 2019 Toshiba Corporation
  * SPDX-License-Identifier: Apache-2.0
@@ -38054,122 +38360,6 @@ var EShapeConnectors = /** @class */ (function () {
     return EShapeConnectors;
 }());
 
-/*
- * Copyright (C) 2019 Toshiba Corporation
- * SPDX-License-Identifier: Apache-2.0
- */
-var EShapeLayerState = {
-    INVISIBLE: "INVISIBLE",
-    INTERACTIVE: "INTERACTIVE",
-    DRAGGABLE: "DRAGGABLE",
-    PINCHABLE: "PINCHABLE"
-};
-
-/*
- * Copyright (C) 2019 Toshiba Corporation
- * SPDX-License-Identifier: Apache-2.0
- */
-var EShapeEmbeddedLayer = /** @class */ (function (_super) {
-    __extends(EShapeEmbeddedLayer, _super);
-    function EShapeEmbeddedLayer(name, isEditMode, type) {
-        if (type === void 0) { type = EShapeType.EMBEDDED_LAYER; }
-        var _this = _super.call(this, isEditMode, type) || this;
-        _this._name = name;
-        return _this;
-    }
-    Object.defineProperty(EShapeEmbeddedLayer.prototype, "name", {
-        get: function () {
-            return this._name;
-        },
-        enumerable: false,
-        configurable: true
-    });
-    EShapeEmbeddedLayer.prototype.newGroupFill = function () {
-        return new EShapeFillImpl(this, false, 0xffffff, 1);
-    };
-    EShapeEmbeddedLayer.prototype.isGroupSizeFittable = function () {
-        return false;
-    };
-    EShapeEmbeddedLayer.prototype.clone = function () {
-        var result = this.newClone().copy(this);
-        var children = this.children;
-        for (var i = 0, imax = children.length; i < imax; ++i) {
-            var clone = children[i].clone();
-            clone.parent = result;
-            result.children.push(clone);
-        }
-        result.onChildTransformChange();
-        result.toDirty();
-        result.size.init();
-        return result;
-    };
-    EShapeEmbeddedLayer.prototype.newClone = function () {
-        var constructor = this.constructor;
-        return new constructor(this._name, this._isEditMode, this.type);
-    };
-    EShapeEmbeddedLayer.prototype.serializeChildren = function (manager) {
-        return [];
-    };
-    EShapeEmbeddedLayer.prototype.serializeImage = function (manager) {
-        return -1;
-    };
-    EShapeEmbeddedLayer.prototype.serializeGradient = function (manager) {
-        return -1;
-    };
-    EShapeEmbeddedLayer.deserialize = function (serialized, manager, width, height) {
-        var _a, _b, _c;
-        var result = new EShapeEmbeddedLayer(this.deserializeName(serialized[0], manager), manager.isEditMode);
-        var visibility = serialized[1];
-        var visible = visibility == null || !!(visibility & 0x2);
-        if (!visible) {
-            result.visible = false;
-            result.state.add(EShapeLayerState.INVISIBLE);
-        }
-        var positionX = -0.5 * width + (serialized[2] || 0);
-        var positionY = -0.5 * height + (serialized[3] || 0);
-        result.transform.position.set(positionX, positionY);
-        var sizeX = (_a = serialized[4]) !== null && _a !== void 0 ? _a : width;
-        var sizeY = (_b = serialized[5]) !== null && _b !== void 0 ? _b : height;
-        result.size.set(sizeX, sizeY);
-        var fillId = serialized[6];
-        if (fillId != null) {
-            result.fill.deserialize(fillId, manager);
-        }
-        if (!manager.isEditMode) {
-            var state = (_c = serialized[7]) !== null && _c !== void 0 ? _c : 1;
-            var isInteractive = state & 0x1;
-            var isDraggable = state & 0x2;
-            var isPinchable = state & 0x4;
-            if (isDraggable || isPinchable) {
-                var gestureType = (isDraggable
-                    ? EShapeActionValueMiscGestureType.DRAG
-                    : EShapeActionValueMiscGestureType.NONE) |
-                    (isPinchable
-                        ? EShapeActionValueMiscGestureType.PINCH
-                        : EShapeActionValueMiscGestureType.NONE);
-                result.action.add(new EShapeActionValueMiscLayerGesture("", gestureType));
-            }
-            if (isInteractive || isDraggable || isPinchable) {
-                result.interactive = true;
-            }
-        }
-        return result;
-    };
-    EShapeEmbeddedLayer.deserializeName = function (target, manager) {
-        if (isString(target)) {
-            return target;
-        }
-        else {
-            var resources = manager.resources;
-            if (0 <= target && target <= resources.length) {
-                return resources[target];
-            }
-            return "";
-        }
-    };
-    return EShapeEmbeddedLayer;
-}(EShapeGroupViewer));
-
 /*
  * Copyright (C) 2019 Toshiba Corporation
  * SPDX-License-Identifier: Apache-2.0
@@ -38859,8 +39049,24 @@ var DMenuItemText = /** @class */ (function (_super) {
         var text = this._shortcutText;
         var margin = this._shortcutMargin;
         if (text != null && margin != null) {
-            var toRounded = this.toRounded;
-            text.position.set(toRounded(this.width - margin - text.width), toRounded((this.height - text.height) * 0.5));
+            var auto = this._auto;
+            var textX = 0;
+            if (auto.width.isOn) {
+                textX = margin;
+            }
+            else {
+                textX = this.width - text.width - margin;
+            }
+            var textY = 0;
+            var padding = this._padding;
+            var ptop = padding.getTop();
+            if (auto.height.isOn) {
+                textY = ptop;
+            }
+            else {
+                textY = ptop + (this.height - ptop - padding.getBottom() - text.height) * 0.5;
+            }
+            text.position.set(textX, textY);
         }
     };
     DMenuItemText.prototype.updateTextColor = function (text) {
@@ -46701,8 +46907,8 @@ var DThemeWhiteInput = /** @class */ (function (_super) {
     DThemeWhiteInput.prototype.getSelect = function () {
         return true;
     };
-    DThemeWhiteInput.prototype.getElementStyleMargin = function (state) {
-        return "margin: 0.1em 0 0 0;";
+    DThemeWhiteInput.prototype.getElementStyleBorder = function (state) {
+        return "border: 1px solid transparent; box-sizing: border-box;";
     };
     return DThemeWhiteInput;
 }(DThemeWhiteHtmlElement));
@@ -55309,8 +55515,8 @@ var DThemeDarkInput = /** @class */ (function (_super) {
     DThemeDarkInput.prototype.getSelect = function () {
         return true;
     };
-    DThemeDarkInput.prototype.getElementStyleMargin = function (state) {
-        return "margin: 0.1em 0 0 0;";
+    DThemeDarkInput.prototype.getElementStyleBorder = function (state) {
+        return "border: 1px solid transparent; box-sizing: border-box;";
     };
     return DThemeDarkInput;
 }(DThemeDarkHtmlElement));
@@ -59352,7 +59558,9 @@ var DynamicFontAtlasFont = /** @class */ (function () {
         this.height = size + padding * 2;
         var metrics = pixi_js.TextMetrics.measureFont(fontId);
         this.ascent = metrics.ascent;
-        this.descent = metrics.descent;
+        // Becase the descent returned by TextMatrics#measureFont is tend
+        // to be the half of the actual descent browsers use internally.
+        this.descent = metrics.descent * 2;
     }
     return DynamicFontAtlasFont;
 }());
@@ -61324,7 +61532,6 @@ var DApplicationLayer = /** @class */ (function (_super) {
         _this._isOverlay = options.isOverlay();
         _this._padding = options.getPadding();
         _this._rootElement = options.getRootElement();
-        _this._refitLimit = 5;
         _this._reflowLimit = 5;
         _this._elementContainer = _this.newElementContainer();
         _this.application = application;
@@ -61518,7 +61725,6 @@ var DApplicationLayer = /** @class */ (function (_super) {
         }
     };
     DApplicationLayer.prototype.render = function () {
-        this.refit();
         this.reflow();
         // Please note why the following line is here.
         //
@@ -61554,32 +61760,16 @@ var DApplicationLayer = /** @class */ (function (_super) {
         enumerable: false,
         configurable: true
     });
-    DApplicationLayer.prototype.refit = function () {
-        var children = this.stage.children;
-        for (var ilimit = 0, limit = this._refitLimit; ilimit < limit; ++ilimit) {
-            var isChildrenDirty = false;
-            for (var i = 0, imax = children.length; i < imax; ++i) {
-                var child = children[i];
-                if (child instanceof DBase) {
-                    child.refit();
-                    isChildrenDirty = isChildrenDirty || child.isChildrenDirty();
-                }
-            }
-            // If DBases are changed during the `refit` process, need to refit again.
-            if (!isChildrenDirty) {
-                break;
-            }
-        }
-    };
     DApplicationLayer.prototype.reflow = function () {
         var children = this.stage.children;
-        for (var ilimit = 0, limit = this._refitLimit; ilimit < limit; ++ilimit) {
+        for (var ilimit = 0, limit = this._reflowLimit; ilimit < limit; ++ilimit) {
             var isDirty = false;
             for (var i = 0, imax = children.length; i < imax; ++i) {
                 var child = children[i];
                 if (child instanceof DBase) {
                     child.reflow();
-                    isDirty = isDirty || child.isDirty() || child.hasDirty();
+                    isDirty =
+                        isDirty || child.isDirty() || child.hasDirty() || child.isHierarchyDirty();
                 }
             }
             // If DBases are changed during the `reflow` process, need to reflow again.
@@ -63329,8 +63519,12 @@ var DPickerColorGradient = /** @class */ (function (_super) {
         };
         this._anchors = [];
         //
+        var recentColumn = theme.getGradientRecentColumn();
+        var recentWidth = theme.getGradientRecentWidth();
+        var recentMargin = theme.getGradientRecentMargin();
+        var recentWidthAndMargin = recentWidth + recentMargin;
         var inputLabelWidth = picker.theme.getInputLabelWidth();
-        var inputWidth = picker.theme.getMainWidth() * 0.5;
+        var inputWidth = recentWidth * recentColumn + recentMargin * (recentColumn - 1);
         var inputMargin = 5;
         var inputDirectionMargin = theme.getGradientDirectionMargin();
         var inputDirectionTexture = theme.getGradientDirectionTexture();
@@ -63339,7 +63533,7 @@ var DPickerColorGradient = /** @class */ (function (_super) {
             parent: this,
             x: inputLeft + inputLabelWidth + inputMargin,
             y: paddingTop,
-            width: inputWidth - inputLabelWidth - inputMargin,
+            width: inputWidth - (inputLabelWidth + inputMargin) * 2,
             step: 1,
             image: {
                 source: inputDirectionTexture,
@@ -63357,10 +63551,6 @@ var DPickerColorGradient = /** @class */ (function (_super) {
             }
         });
         // Recent gradients
-        var recentColumn = theme.getGradientRecentColumn();
-        var recentWidth = theme.getGradientRecentWidth();
-        var recentMargin = theme.getGradientRecentMargin();
-        var recentWidthAndMargin = recentWidth + recentMargin;
         var x0 = inputLeft;
         var y0 = inputDirection.y + inputDirection.height + inputDirectionMargin;
         if (DPickerColorGradient.RECENT_COLOR_GRADIENT == null) {
@@ -71958,16 +72148,6 @@ var DDiagramSnapshot = /** @class */ (function (_super) {
         }
         return cleanup === true || cleanup.background === true;
     };
-    DDiagramSnapshot.prototype.toCleanupRefit = function (options) {
-        if (options == null) {
-            return true;
-        }
-        var cleanup = options.cleanup;
-        if (cleanup == null || cleanup === true) {
-            return true;
-        }
-        return cleanup !== false && cleanup.refit !== false;
-    };
     DDiagramSnapshot.prototype.toCleanupReflow = function (options) {
         if (options == null) {
             return true;
@@ -72017,17 +72197,11 @@ var DDiagramSnapshot = /** @class */ (function (_super) {
                 }
             }
             // Refit & reflow
-            var refit = this.toCleanupRefit(options);
             var reflow = this.toCleanupReflow(options);
-            if (refit || reflow) {
+            if (reflow) {
                 var layer = DApplications.getLayer(canvas);
                 if (layer) {
-                    if (refit) {
-                        layer.refit();
-                    }
-                    if (reflow) {
-                        layer.reflow();
-                    }
+                    layer.reflow();
                 }
             }
             // Extracts
@@ -76155,12 +76329,12 @@ var DMenuSided = /** @class */ (function (_super) {
     DMenuSided.prototype.newSelection = function (options) {
         return new DMenuSidedSelection(this.content, options);
     };
-    DMenuSided.prototype.onChildrenDirty = function () {
+    DMenuSided.prototype.onHierarchyDirty = function () {
         var selection = this._selection;
         if (selection != null) {
             selection.toDirty();
         }
-        _super.prototype.onChildrenDirty.call(this);
+        _super.prototype.onHierarchyDirty.call(this);
     };
     DMenuSided.prototype.newItems = function (items, sticky) {
         DMenuSideds.newItems(this.content, items, sticky);