@wcardinal/wcardinal-ui 0.414.0 → 0.417.0

package/dist/wcardinal-ui.js

@@ -1,5 +1,5 @@
 /*
- Winter Cardinal UI v0.414.0
+ Winter Cardinal UI v0.417.0
  Copyright (C) 2019 Toshiba Corporation
  SPDX-License-Identifier: Apache-2.0
 
@@ -73972,249 +73972,602 @@
      * Copyright (C) 2019 Toshiba Corporation
      * SPDX-License-Identifier: Apache-2.0
      */
-    var DTableCategoryCellEdge = {
+    var DTableCellEdgeHovered = {
         NONE: 0,
         LEFT: 1,
         RIGHT: 2,
         BOTH: 3
     };
-    var DTableCategoryCell = /** @class */ (function (_super) {
-        __extends(DTableCategoryCell, _super);
-        function DTableCategoryCell(category, columnIndex, column, options) {
-            var _this = _super.call(this, options) || this;
-            _this._category = category;
-            _this._columnIndex = columnIndex;
-            _this._column = column;
-            _this._edgeSize = _this.theme.getEdgeWidth();
-            _this._wasResizing = false;
-            return _this;
+    var DTableCellEdge = /** @class */ (function () {
+        function DTableCellEdge(row, cell, columnIndex, size) {
+            this._row = row;
+            this._cell = cell;
+            this._columnIndex = columnIndex;
+            this._size = size;
+            this._dragged = false;
+            this._minWidth = 8;
         }
-        Object.defineProperty(DTableCategoryCell.prototype, "column", {
-            get: function () {
-                return this._column;
-            },
-            enumerable: false,
-            configurable: true
-        });
-        Object.defineProperty(DTableCategoryCell.prototype, "columnIndex", {
-            get: function () {
-                return this._columnIndex;
-            },
-            enumerable: false,
-            configurable: true
-        });
-        Object.defineProperty(DTableCategoryCell.prototype, "category", {
-            get: function () {
-                return this._category;
-            },
-            enumerable: false,
-            configurable: true
-        });
-        DTableCategoryCell.prototype.onDown = function (e) {
-            var edges = this.state.valueOf(DTableState.HOVERED_ON_EDGE);
-            if (edges != null) {
-                this._wasResizing = true;
-                var layer = DApplications.getLayer(this);
-                if (layer != null) {
-                    var interactionManager = layer.renderer.plugins.interaction;
-                    var columnIndex = this._columnIndex;
-                    if (edges === DTableCategoryCellEdge.LEFT) {
-                        this.onDownEdge(e.data.global.x, columnIndex - 1, interactionManager);
-                    }
-                    else {
-                        this.onDownEdge(e.data.global.x, columnIndex, interactionManager);
+        DTableCellEdge.prototype.findResizableCell = function (columnIndex, direction, weight) {
+            var children = this._row.children;
+            var childrenLength = children.length;
+            if (direction) {
+                for (var i = columnIndex; i < childrenLength; ++i) {
+                    var child = children[childrenLength - i - 1];
+                    var childColumn = child.column;
+                    if (childColumn.resizable) {
+                        if (weight == null) {
+                            return child;
+                        }
+                        else if (weight === true) {
+                            if (childColumn.weight != null) {
+                                return child;
+                            }
+                        }
+                        else {
+                            if (childColumn.weight == null) {
+                                return child;
+                            }
+                        }
                     }
                 }
             }
             else {
-                this._wasResizing = false;
-                _super.prototype.onDown.call(this, e);
-            }
-        };
-        DTableCategoryCell.prototype.findLeftResizableCell = function (columnIndex) {
-            var children = this._category.children;
-            var childrenLength = children.length;
-            for (var i = columnIndex; 0 <= i; --i) {
-                var child = children[childrenLength - i - 1];
-                if (child.column.resizable) {
-                    return child;
+                for (var i = columnIndex; 0 <= i; --i) {
+                    var child = children[childrenLength - i - 1];
+                    var childColumn = child.column;
+                    if (childColumn.resizable) {
+                        if (weight == null) {
+                            return child;
+                        }
+                        else if (weight === true) {
+                            if (childColumn.weight != null) {
+                                return child;
+                            }
+                        }
+                        else {
+                            if (childColumn.weight == null) {
+                                return child;
+                            }
+                        }
+                    }
                 }
             }
             return null;
         };
-        DTableCategoryCell.prototype.findRightResizableCellOfWeight = function (columnIndex) {
-            var children = this._category.children;
+        DTableCellEdge.prototype.findCells = function (columnIndex, direction, weight) {
+            var result = [];
+            var children = this._row.children;
             var childrenLength = children.length;
-            for (var i = columnIndex + 1; i < childrenLength; ++i) {
-                var child = children[childrenLength - i - 1];
-                var childColumn = child.column;
-                if (childColumn.resizable) {
-                    var childColumnWeight = childColumn.weight;
-                    if (childColumnWeight != null) {
-                        return child;
+            if (direction) {
+                for (var i = columnIndex; i < childrenLength; ++i) {
+                    var child = children[childrenLength - i - 1];
+                    if (weight) {
+                        if (child.column.weight != null) {
+                            result.push(child);
+                        }
+                    }
+                    else {
+                        if (child.column.weight == null) {
+                            result.push(child);
+                        }
                     }
                 }
             }
-            return null;
-        };
-        DTableCategoryCell.prototype.checkIfEdgeResizable = function (columnIndex) {
-            var target = this.findLeftResizableCell(columnIndex);
-            if (target != null) {
-                if (target.column.weight != null) {
-                    return this.findRightResizableCellOfWeight(target.columnIndex) != null;
-                }
-                else {
-                    return true;
+            else {
+                for (var i = columnIndex; 0 <= i; --i) {
+                    var child = children[childrenLength - i - 1];
+                    if (weight) {
+                        if (child.column.weight != null) {
+                            result.push(child);
+                        }
+                    }
+                    else {
+                        if (child.column.weight == null) {
+                            result.push(child);
+                        }
+                    }
                 }
             }
-            return false;
+            return result;
         };
-        DTableCategoryCell.prototype.getResizableEdges = function () {
-            var result = this._resizableEdges;
-            if (result == null) {
-                var columnIndex = this._columnIndex;
-                if (this.checkIfEdgeResizable(columnIndex - 1)) {
-                    if (this.checkIfEdgeResizable(columnIndex)) {
-                        result = DTableCategoryCellEdge.BOTH;
+        DTableCellEdge.prototype.calcData = function (columnIndex) {
+            var left = this.findResizableCell(columnIndex, false, null);
+            if (left != null) {
+                var leftColumn = left.column;
+                var right = this.findResizableCell(columnIndex + 1, true, null);
+                if (right != null) {
+                    var rightColumn = right.column;
+                    if (leftColumn.weight == null) {
+                        if (rightColumn.weight == null) {
+                            // Width - Width
+                            return [1, left, right];
+                        }
+                        else {
+                            // Width - Weight
+                            var others = this.findCells(0, true, true);
+                            return [2, left, right, others];
+                        }
                     }
                     else {
-                        result = DTableCategoryCellEdge.LEFT;
+                        if (rightColumn.weight == null) {
+                            // Weight - Width
+                            var others = this.findCells(0, true, true);
+                            return [3, left, right, others];
+                        }
+                        else {
+                            // Weight - Weight
+                            return [1, left, right];
+                        }
                     }
                 }
                 else {
-                    if (this.checkIfEdgeResizable(columnIndex)) {
-                        result = DTableCategoryCellEdge.RIGHT;
+                    if (leftColumn.weight == null) {
+                        // Width
+                        var ls = this.findCells(left.columnIndex - 1, false, true);
+                        if (ls.length <= 0) {
+                            return [0, left];
+                        }
+                        // Not resizable
+                        return null;
                     }
                     else {
-                        result = DTableCategoryCellEdge.NONE;
+                        // Not resizable
+                        return null;
                     }
                 }
-                this._resizableEdges = result;
             }
-            return result;
+            // Not resizable
+            return null;
         };
-        DTableCategoryCell.prototype.onOver = function (e) {
+        Object.defineProperty(DTableCellEdge.prototype, "left", {
+            get: function () {
+                var result = this._left;
+                if (result === undefined) {
+                    result = this.calcData(this._columnIndex - 1);
+                    this._left = result;
+                }
+                return result;
+            },
+            enumerable: false,
+            configurable: true
+        });
+        Object.defineProperty(DTableCellEdge.prototype, "right", {
+            get: function () {
+                var result = this._right;
+                if (result === undefined) {
+                    result = this.calcData(this._columnIndex);
+                    this._right = result;
+                }
+                return result;
+            },
+            enumerable: false,
+            configurable: true
+        });
+        DTableCellEdge.prototype.onDown = function (e) {
+            var cell = this._cell;
+            var hoveredOnEdge = cell.state.valueOf(DTableState.HOVERED_ON_EDGE);
+            if (hoveredOnEdge != null) {
+                this._dragged = true;
+                var layer = DApplications.getLayer(cell);
+                if (layer != null) {
+                    var interactionManager = layer.renderer.plugins.interaction;
+                    if (hoveredOnEdge === DTableCellEdgeHovered.LEFT) {
+                        var left = this.left;
+                        if (left != null) {
+                            this.onDown_(e.data.global.x, left, interactionManager);
+                        }
+                    }
+                    else {
+                        var right = this.right;
+                        if (right != null) {
+                            this.onDown_(e.data.global.x, right, interactionManager);
+                        }
+                    }
+                }
+                return true;
+            }
+            else {
+                this._dragged = false;
+                return false;
+            }
+        };
+        DTableCellEdge.prototype.onDown_ = function (onDownPoint, data, interactionManager) {
+            switch (data[0]) {
+                case 0:
+                    this.onDown0(onDownPoint, data, interactionManager);
+                    break;
+                case 1:
+                    this.onDown1(onDownPoint, data, interactionManager);
+                    break;
+                case 2:
+                    this.onDown2(onDownPoint, data, interactionManager);
+                    break;
+                case 3:
+                    this.onDown3(onDownPoint, data, interactionManager);
+                    break;
+            }
+        };
+        DTableCellEdge.prototype.onOver = function (e) {
             var _this = this;
             var _a;
-            _super.prototype.onOver.call(this, e);
-            if (this.getResizableEdges() !== DTableCategoryCellEdge.NONE) {
+            if (this.left != null || this.right != null) {
                 var onHoveredBound = ((_a = this._onHoveredBound) !== null && _a !== void 0 ? _a : (this._onHoveredBound = function (event) {
                     _this.onHovered(event);
                 }));
-                this.on(UtilPointerEvent.move, onHoveredBound);
+                var cell = this._cell;
+                cell.off(UtilPointerEvent.move, onHoveredBound);
+                cell.on(UtilPointerEvent.move, onHoveredBound);
                 // Since the cursor is set by InteractionManager before this method is called,
                 // the cursor need to be overriden.
                 this.onHovered(e);
-                var layer = DApplications.getLayer(this);
+                var layer = DApplications.getLayer(cell);
                 if (layer != null) {
-                    layer.renderer.plugins.interaction.cursor = this.cursor;
+                    layer.renderer.plugins.interaction.cursor = cell.cursor;
                 }
             }
         };
-        DTableCategoryCell.prototype.onOut = function (e) {
-            _super.prototype.onOut.call(this, e);
+        DTableCellEdge.prototype.onOut = function (e) {
             var onHoveredBound = this._onHoveredBound;
             if (onHoveredBound != null) {
-                this.state.remove(DTableState.HOVERED_ON_EDGE);
-                this.off(UtilPointerEvent.move, onHoveredBound);
+                var cell = this._cell;
+                cell.state.remove(DTableState.HOVERED_ON_EDGE);
+                cell.off(UtilPointerEvent.move, onHoveredBound);
             }
         };
-        DTableCategoryCell.prototype.onHovered = function (e) {
-            var width = this.width;
-            var x = this.toClickPosition(e);
-            var edgeSize = this._edgeSize;
-            if (0 <= x && x <= edgeSize) {
-                if (this.getResizableEdges() & DTableCategoryCellEdge.LEFT) {
-                    this.state.add(DTableState.HOVERED_ON_EDGE, DTableCategoryCellEdge.LEFT);
+        DTableCellEdge.prototype.onHovered = function (e) {
+            var cell = this._cell;
+            var width = cell.width;
+            var x = this.toX(e);
+            var size = this._size;
+            var onLeft = 0 <= x && x <= size;
+            var onRight = width - size <= x && x <= width;
+            if (onLeft && onRight) {
+                if (x <= width - x) {
+                    onRight = false;
+                }
+                else {
+                    onLeft = false;
+                }
+            }
+            if (onLeft) {
+                if (this.left != null) {
+                    cell.state.add(DTableState.HOVERED_ON_EDGE, DTableCellEdgeHovered.LEFT);
                 }
                 else {
-                    this.state.remove(DTableState.HOVERED_ON_EDGE);
+                    cell.state.remove(DTableState.HOVERED_ON_EDGE);
                 }
             }
-            else if (width - edgeSize <= x && x <= width) {
-                if (this.getResizableEdges() & DTableCategoryCellEdge.RIGHT) {
-                    this.state.add(DTableState.HOVERED_ON_EDGE, DTableCategoryCellEdge.RIGHT);
+            else if (onRight) {
+                if (this.right != null) {
+                    cell.state.add(DTableState.HOVERED_ON_EDGE, DTableCellEdgeHovered.RIGHT);
                 }
                 else {
-                    this.state.remove(DTableState.HOVERED_ON_EDGE);
+                    cell.state.remove(DTableState.HOVERED_ON_EDGE);
                 }
             }
             else {
-                this.state.remove(DTableState.HOVERED_ON_EDGE);
+                cell.state.remove(DTableState.HOVERED_ON_EDGE);
             }
         };
-        DTableCategoryCell.prototype.toClickPosition = function (e) {
+        DTableCellEdge.prototype.toX = function (e) {
             var _a;
             var checkWork = ((_a = this._checkWork) !== null && _a !== void 0 ? _a : (this._checkWork = new pixi_js.Point()));
-            return e.data.getLocalPosition(this, checkWork).x;
+            return this._cell.toLocal(e.data.global, undefined, checkWork, true).x;
         };
-        DTableCategoryCell.prototype.onDownEdge = function (onDownPoint, columnIndex, interactionManager) {
-            // Find the resizable cell
-            var left = this.findLeftResizableCell(columnIndex);
-            if (left == null) {
-                // No resizable cell
-                return;
-            }
-            var category = this._category;
+        DTableCellEdge.prototype.onDown0 = function (onDownPoint, data, interactionManager) {
+            var left = data[1];
+            var leftColumn = left.column;
+            var leftOldWidth = left.width;
+            var leftMinWidth = Math.max(this._minWidth, leftColumn.minWidth);
+            var onMove = function (e) {
+                leftColumn.width = Math.max(leftMinWidth, leftOldWidth + e.data.global.x - onDownPoint);
+            };
+            this.newOnUp(onMove, interactionManager);
+        };
+        DTableCellEdge.prototype.onDown1 = function (onDownPoint, data, interactionManager) {
+            var minWidth = this._minWidth;
+            var left = data[1];
             var leftColumn = left.column;
             var leftOldWidth = left.width;
-            var leftOldWeight = left.weight;
+            var right = data[2];
+            var rightColumn = right.column;
+            var rightOldWidth = right.width;
+            var totalWidth = leftOldWidth + rightOldWidth;
             if (leftColumn.weight == null) {
-                category.state.add(DTableState.RESIZING);
-                var leftMinWidth_1 = leftColumn.minWidth;
-                var onMove_1 = function (e) {
-                    leftColumn.width = Math.max(leftMinWidth_1, leftOldWidth + e.data.global.x - onDownPoint);
-                };
-                var onUp_1 = function (e) {
-                    category.state.remove(DTableState.RESIZING);
-                    interactionManager.off(UtilPointerEvent.move, onMove_1);
-                    interactionManager.off(UtilPointerEvent.up, onUp_1);
-                    interactionManager.off(UtilPointerEvent.upoutside, onUp_1);
-                    interactionManager.off(UtilPointerEvent.cancel, onUp_1);
+                var leftMinWidth_1 = Math.max(minWidth, leftColumn.minWidth);
+                var rightMinWidth = Math.max(minWidth, rightColumn.minWidth);
+                var leftMaxWidth_1 = totalWidth - rightMinWidth;
+                if (totalWidth <= 0 || leftMaxWidth_1 <= leftMinWidth_1) {
+                    // The left and right resizable cells doesn't have enough width
+                    return;
+                }
+                var onMove = function (e) {
+                    var leftNewWidth = Math.max(leftMinWidth_1, Math.min(leftMaxWidth_1, leftOldWidth + e.data.global.x - onDownPoint));
+                    leftColumn.width = leftNewWidth;
+                    rightColumn.width = totalWidth - leftNewWidth;
                 };
-                interactionManager.on(UtilPointerEvent.move, onMove_1);
-                interactionManager.on(UtilPointerEvent.up, onUp_1);
-                interactionManager.on(UtilPointerEvent.upoutside, onUp_1);
-                interactionManager.on(UtilPointerEvent.cancel, onUp_1);
+                this.newOnUp(onMove, interactionManager);
             }
             else {
-                var right = this.findRightResizableCellOfWeight(left.columnIndex);
-                if (right == null) {
-                    // No right resizable cell found
-                    return;
-                }
-                var rightColumn_1 = right.column;
+                var leftOldWeight = left.weight;
                 var rightOldWeight = right.weight;
-                var rightOldWidth = right.width;
-                var totalWidth_1 = leftOldWidth + rightOldWidth;
                 var totalWeight_1 = leftOldWeight + rightOldWeight;
                 var leftMinWeight_1 = leftColumn.minWeight;
-                var rightMinWeight = rightColumn_1.minWeight;
+                var rightMinWeight = rightColumn.minWeight;
                 var leftMaxWeight_1 = totalWeight_1 - rightMinWeight;
-                if (totalWidth_1 <= 0 || leftMaxWeight_1 <= leftMinWeight_1) {
-                    // The left and right resizable cells doesn't non-zero width
+                var leftMinWidth_2 = minWidth;
+                var rightMinWidth = minWidth;
+                var leftMaxWidth_2 = totalWidth - rightMinWidth;
+                if (totalWidth <= 0 || leftMaxWidth_2 <= leftMinWidth_2 || leftMaxWeight_1 <= leftMinWeight_1) {
+                    // The left and right resizable cells doesn't have enough width
                     return;
                 }
-                category.state.add(DTableState.RESIZING);
-                var onMove_2 = function (e) {
-                    var leftNewWidth = Math.max(0, Math.min(totalWidth_1, leftOldWidth + e.data.global.x - onDownPoint));
-                    var leftNewWeight = Math.max(leftMinWeight_1, Math.min(leftMaxWeight_1, totalWeight_1 * (leftNewWidth / totalWidth_1)));
+                var onMove = function (e) {
+                    var leftNewWidth = Math.max(leftMinWidth_2, Math.min(leftMaxWidth_2, leftOldWidth + e.data.global.x - onDownPoint));
+                    var leftNewWeight = Math.max(leftMinWeight_1, Math.min(leftMaxWeight_1, totalWeight_1 * (leftNewWidth / totalWidth)));
                     leftColumn.weight = leftNewWeight;
-                    rightColumn_1.weight = totalWeight_1 - leftNewWeight;
+                    rightColumn.weight = totalWeight_1 - leftNewWeight;
+                };
+                this.newOnUp(onMove, interactionManager);
+            }
+        };
+        DTableCellEdge.prototype.onDown2 = function (onDownPoint, data, interactionManager) {
+            if (data[3].length <= 1) {
+                this.onDown2a(onDownPoint, data, interactionManager);
+            }
+            else {
+                this.onDown2b(onDownPoint, data, interactionManager);
+            }
+        };
+        DTableCellEdge.prototype.onDown2a = function (onDownPoint, data, interactionManager) {
+            var minWidth = this._minWidth;
+            var left = data[1];
+            var leftColumn = left.column;
+            var leftOldWidth = left.width;
+            var leftMinWidth = Math.max(minWidth, leftColumn.minWidth);
+            var right = data[2];
+            var rightOldWidth = right.width;
+            var rightMinWidth = minWidth;
+            var totalWidth = leftOldWidth + rightOldWidth;
+            var leftMaxWidth = totalWidth - rightMinWidth;
+            if (totalWidth <= 0 || leftMaxWidth <= leftMinWidth) {
+                // The left and right resizable cells doesn't have enough width
+                return;
+            }
+            var onMove = function (e) {
+                leftColumn.width = Math.max(leftMinWidth, Math.min(leftMaxWidth, leftOldWidth + e.data.global.x - onDownPoint));
+            };
+            this.newOnUp(onMove, interactionManager);
+        };
+        DTableCellEdge.prototype.onDown2b = function (onDownPoint, data, interactionManager) {
+            var minWidth = this._minWidth;
+            var left = data[1];
+            var leftColumn = left.column;
+            var leftOldWidth = left.width;
+            var leftMinWidth = Math.max(minWidth, leftColumn.minWidth);
+            var right = data[2];
+            var rightColumn = right.column;
+            var rightOldWidth = right.width;
+            var rightMinWeight = rightColumn.minWeight;
+            var totalWidth = leftOldWidth + rightOldWidth;
+            var others = data[3];
+            var totalWeight = 0;
+            var totalSpace = 0;
+            for (var i = 0, imax = others.length; i < imax; ++i) {
+                var other = others[i];
+                totalWeight += other.weight;
+                totalSpace += other.width;
+            }
+            if (totalWeight <= 0 || totalSpace <= 0) {
+                var rightMinWidth = minWidth;
+                var leftMaxWidth_3 = totalWidth - rightMinWidth;
+                if (totalWidth <= 0 || leftMaxWidth_3 <= leftMinWidth) {
+                    // The left and right resizable cells doesn't have enough width
+                    return;
+                }
+                if (totalWeight <= 0) {
+                    totalWeight = 0;
+                    for (var i = 0, imax = others.length; i < imax; ++i) {
+                        var other = others[i];
+                        var otherColumn = other.column;
+                        if (other !== right) {
+                            var otherNewWeight = otherColumn.minWeight;
+                            otherColumn.weight = otherNewWeight;
+                            totalWeight += otherNewWeight;
+                        }
+                        else {
+                            var rightNewWeight = Math.max(1, rightMinWeight);
+                            otherColumn.weight = rightNewWeight;
+                            totalWeight += rightNewWeight;
+                        }
+                    }
+                }
+                var onMove = function (e) {
+                    leftColumn.width = Math.max(leftMinWidth, Math.min(leftMaxWidth_3, leftOldWidth + e.data.global.x - onDownPoint));
+                };
+                this.newOnUp(onMove, interactionManager);
+            }
+            else {
+                var rightMinWidth = Math.max(minWidth, totalSpace * (rightMinWeight / totalWeight));
+                var leftMaxWidth_4 = totalWidth - rightMinWidth;
+                if (totalWidth <= 0 || leftMaxWidth_4 <= leftMinWidth) {
+                    // The left and right resizable cells doesn't have enough width
+                    return;
+                }
+                var onMove = function (e) {
+                    var leftNewWidth = Math.max(leftMinWidth, Math.min(leftMaxWidth_4, leftOldWidth + e.data.global.x - onDownPoint));
+                    var rightNewWidth = totalWidth - leftNewWidth;
+                    var rightNewWeight = Math.max(rightMinWeight, totalWeight * (rightNewWidth / totalSpace));
+                    leftColumn.width = leftNewWidth;
+                    rightColumn.weight = rightNewWeight;
+                };
+                this.newOnUp(onMove, interactionManager);
+            }
+        };
+        DTableCellEdge.prototype.onDown3 = function (onDownPoint, data, interactionManager) {
+            if (data[3].length <= 1) {
+                this.onDown3a(onDownPoint, data, interactionManager);
+            }
+            else {
+                this.onDown3b(onDownPoint, data, interactionManager);
+            }
+        };
+        DTableCellEdge.prototype.onDown3a = function (onDownPoint, data, interactionManager) {
+            var minWidth = this._minWidth;
+            var left = data[1];
+            var leftOldWidth = left.width;
+            var leftMinWidth = minWidth;
+            var right = data[2];
+            var rightColumn = right.column;
+            var rightOldWidth = right.width;
+            var rightMinWidth = Math.max(minWidth, rightColumn.minWidth);
+            var totalWidth = leftOldWidth + rightOldWidth;
+            var rightMaxWidth = totalWidth - leftMinWidth;
+            if (totalWidth <= 0 || rightMaxWidth <= rightMinWidth) {
+                // The left and right resizable cells doesn't have enough width
+                return;
+            }
+            var onMove = function (e) {
+                rightColumn.width = Math.max(rightMinWidth, Math.min(rightMaxWidth, rightOldWidth + onDownPoint - e.data.global.x));
+            };
+            this.newOnUp(onMove, interactionManager);
+        };
+        DTableCellEdge.prototype.onDown3b = function (onDownPoint, data, interactionManager) {
+            var minWidth = this._minWidth;
+            var left = data[1];
+            var leftColumn = left.column;
+            var leftOldWidth = left.width;
+            var leftMinWeight = leftColumn.minWeight;
+            var right = data[2];
+            var rightColumn = right.column;
+            var rightOldWidth = right.width;
+            var rightMinWidth = Math.max(minWidth, rightColumn.minWidth);
+            var totalWidth = leftOldWidth + rightOldWidth;
+            var others = data[3];
+            var totalWeight = 0;
+            var totalSpace = 0;
+            for (var i = 0, imax = others.length; i < imax; ++i) {
+                var other = others[i];
+                totalWeight += other.weight;
+                totalSpace += other.width;
+            }
+            if (totalWeight <= 0 || totalSpace <= 0) {
+                var leftMinWidth = minWidth;
+                var rightMaxWidth_1 = totalWidth - leftMinWidth;
+                if (totalWidth <= 0 || rightMaxWidth_1 <= rightMinWidth) {
+                    // The left and right resizable cells doesn't have enough width
+                    return;
+                }
+                if (totalWeight <= 0) {
+                    totalWeight = 0;
+                    for (var i = 0, imax = others.length; i < imax; ++i) {
+                        var other = others[i];
+                        var otherColumn = other.column;
+                        if (other !== left) {
+                            var otherNewWeight = otherColumn.minWeight;
+                            otherColumn.weight = otherNewWeight;
+                            totalWeight += otherNewWeight;
+                        }
+                        else {
+                            var leftNewWeight = Math.max(1, leftMinWeight);
+                            otherColumn.weight = leftNewWeight;
+                            totalWeight += leftNewWeight;
+                        }
+                    }
+                }
+                var onMove = function (e) {
+                    rightColumn.width = Math.max(rightMinWidth, Math.min(rightMaxWidth_1, rightOldWidth + onDownPoint - e.data.global.x));
                 };
-                var onUp_2 = function (e) {
-                    category.state.remove(DTableState.RESIZING);
-                    interactionManager.off(UtilPointerEvent.move, onMove_2);
-                    interactionManager.off(UtilPointerEvent.up, onUp_2);
-                    interactionManager.off(UtilPointerEvent.upoutside, onUp_2);
-                    interactionManager.off(UtilPointerEvent.cancel, onUp_2);
+                this.newOnUp(onMove, interactionManager);
+            }
+            else {
+                var leftMinWidth = Math.max(minWidth, totalSpace * (leftMinWeight / totalWeight));
+                var rightMaxWidth_2 = totalWidth - leftMinWidth;
+                if (totalWidth <= 0 || rightMaxWidth_2 <= rightMinWidth) {
+                    // The left and right resizable cells doesn't have enough width
+                    return;
+                }
+                var onMove = function (e) {
+                    var rightNewWidth = Math.max(rightMinWidth, Math.min(rightMaxWidth_2, rightOldWidth + onDownPoint - e.data.global.x));
+                    var leftNewWidth = totalWidth - rightNewWidth;
+                    var leftNewWeight = Math.max(leftMinWeight, totalWeight * (leftNewWidth / totalSpace));
+                    rightColumn.width = rightNewWidth;
+                    leftColumn.weight = leftNewWeight;
                 };
-                interactionManager.on(UtilPointerEvent.move, onMove_2);
-                interactionManager.on(UtilPointerEvent.up, onUp_2);
-                interactionManager.on(UtilPointerEvent.upoutside, onUp_2);
-                interactionManager.on(UtilPointerEvent.cancel, onUp_2);
+                this.newOnUp(onMove, interactionManager);
             }
         };
+        DTableCellEdge.prototype.newOnUp = function (onMove, interactionManager) {
+            var row = this._row;
+            row.state.add(DTableState.RESIZING);
+            var onUp = function () {
+                row.state.remove(DTableState.RESIZING);
+                interactionManager.off(UtilPointerEvent.move, onMove);
+                interactionManager.off(UtilPointerEvent.up, onUp);
+                interactionManager.off(UtilPointerEvent.upoutside, onUp);
+                interactionManager.off(UtilPointerEvent.cancel, onUp);
+            };
+            interactionManager.on(UtilPointerEvent.move, onMove);
+            interactionManager.on(UtilPointerEvent.up, onUp);
+            interactionManager.on(UtilPointerEvent.upoutside, onUp);
+            interactionManager.on(UtilPointerEvent.cancel, onUp);
+            return onUp;
+        };
+        DTableCellEdge.prototype.isClicked = function (e) {
+            return (e instanceof pixi_js.InteractionEvent &&
+                (this._cell.state.is(DTableState.HOVERED_ON_EDGE) || this._dragged));
+        };
+        return DTableCellEdge;
+    }());
+
+    /*
+     * Copyright (C) 2019 Toshiba Corporation
+     * SPDX-License-Identifier: Apache-2.0
+     */
+    var DTableCategoryCell = /** @class */ (function (_super) {
+        __extends(DTableCategoryCell, _super);
+        function DTableCategoryCell(category, columnIndex, column, options) {
+            var _this = _super.call(this, options) || this;
+            _this._category = category;
+            _this._columnIndex = columnIndex;
+            _this._column = column;
+            _this._edge = new DTableCellEdge(_this._category, _this, columnIndex, _this.theme.getEdgeWidth());
+            return _this;
+        }
+        Object.defineProperty(DTableCategoryCell.prototype, "column", {
+            get: function () {
+                return this._column;
+            },
+            enumerable: false,
+            configurable: true
+        });
+        Object.defineProperty(DTableCategoryCell.prototype, "columnIndex", {
+            get: function () {
+                return this._columnIndex;
+            },
+            enumerable: false,
+            configurable: true
+        });
+        Object.defineProperty(DTableCategoryCell.prototype, "category", {
+            get: function () {
+                return this._category;
+            },
+            enumerable: false,
+            configurable: true
+        });
+        DTableCategoryCell.prototype.onDown = function (e) {
+            if (!this._edge.onDown(e)) {
+                _super.prototype.onDown.call(this, e);
+            }
+        };
+        DTableCategoryCell.prototype.onOver = function (e) {
+            _super.prototype.onOver.call(this, e);
+            this._edge.onOver(e);
+        };
+        DTableCategoryCell.prototype.onOut = function (e) {
+            _super.prototype.onOut.call(this, e);
+            this._edge.onOut(e);
+        };
         DTableCategoryCell.prototype.getType = function () {
             return "DTableCategoryCell";
         };
@@ -74248,7 +74601,7 @@
             _this._isLocked = false;
             _this.offset = 0.0;
             _this._columns = [column];
-            _this._nresizable = column.resizable ? 1 : 0;
+            _this.resizable = column.resizable;
             var onResizeBound = function () {
                 _this.onResize();
             };
@@ -74288,21 +74641,13 @@
                 }
             }
         };
-        Object.defineProperty(DTableCategoryColumnImpl.prototype, "resizable", {
-            get: function () {
-                return 0 < this._nresizable;
-            },
-            enumerable: false,
-            configurable: true
-        });
         Object.defineProperty(DTableCategoryColumnImpl.prototype, "weight", {
             get: function () {
                 return this._weight;
             },
             set: function (weight) {
                 var oldWeight = this._weight;
-                var nresizable = this._nresizable;
-                if (0 < nresizable && oldWeight != null && oldWeight !== weight) {
+                if (oldWeight != null && oldWeight !== weight) {
                     var columns = this._columns;
                     var columnsLength = columns.length;
                     var minWeight = this.minWeight;
@@ -74310,22 +74655,22 @@
                     if (this._weight !== newWeight) {
                         this._isLocked = true;
                         if (minWeight < oldWeight) {
-                            var columnWeightRatio = (newWeight - minWeight) / (oldWeight - minWeight);
+                            // TODO: IMPROVE THIS
+                            var columnWeightRatio = newWeight / oldWeight;
                             for (var i = 0; i < columnsLength; ++i) {
                                 var column = columns[i];
                                 var columnWeight = column.weight;
-                                if (column.resizable && columnWeight != null) {
-                                    column.weight = columnWeight * columnWeightRatio;
+                                if (columnWeight != null) {
+                                    column.weight = Math.max(column.minWeight, columnWeight * columnWeightRatio);
                                 }
                             }
                         }
                         else {
-                            var newColumnWeight = (newWeight - minWeight) / this._nresizable;
                             for (var i = 0; i < columnsLength; ++i) {
                                 var column = columns[i];
                                 var columnWeight = column.weight;
-                                if (column.resizable && columnWeight != null) {
-                                    column.weight = newColumnWeight;
+                                if (columnWeight != null) {
+                                    column.weight = column.minWeight;
                                 }
                             }
                         }
@@ -74345,8 +74690,8 @@
                 for (var i = 0; i < columnsLength; ++i) {
                     var column = columns[i];
                     var columnWeight = column.weight;
-                    if (!column.resizable && columnWeight != null) {
-                        result += columnWeight;
+                    if (columnWeight != null) {
+                        result += column.minWeight;
                     }
                 }
                 return result;
@@ -74360,8 +74705,7 @@
             },
             set: function (width) {
                 var oldWidth = this._width;
-                var nresizable = this._nresizable;
-                if (0 < nresizable && oldWidth != null && oldWidth !== width) {
+                if (oldWidth != null && oldWidth !== width) {
                     var columns = this._columns;
                     var columnsLength = columns.length;
                     var minWidth = this.minWidth;
@@ -74369,22 +74713,22 @@
                     if (oldWidth !== newWidth) {
                         this._isLocked = true;
                         if (minWidth < oldWidth) {
-                            var columnWidthRatio = (newWidth - minWidth) / (oldWidth - minWidth);
+                            // TODO: IMPROVE THIS
+                            var columnWidthRatio = newWidth / oldWidth;
                             for (var i = 0; i < columnsLength; ++i) {
                                 var column = columns[i];
                                 var columnWidth = column.width;
-                                if (column.resizable && columnWidth != null) {
-                                    column.width = columnWidth * columnWidthRatio;
+                                if (columnWidth != null) {
+                                    column.width = Math.max(column.minWidth, columnWidth * columnWidthRatio);
                                 }
                             }
                         }
                         else {
-                            var newColumnWidth = (newWidth - minWidth) / this._nresizable;
                             for (var i = 0; i < columnsLength; ++i) {
                                 var column = columns[i];
                                 var columnWidth = column.width;
-                                if (column.resizable && columnWidth != null) {
-                                    column.width = newColumnWidth;
+                                if (columnWidth != null) {
+                                    column.width = column.minWidth;
                                 }
                             }
                         }
@@ -74404,8 +74748,8 @@
                 for (var i = 0; i < columnsLength; ++i) {
                     var column = columns[i];
                     var columnWidth = column.width;
-                    if (!column.resizable && columnWidth != null) {
-                        result += columnWidth;
+                    if (columnWidth != null) {
+                        result += column.minWidth;
                     }
                 }
                 return result;
@@ -74419,9 +74763,6 @@
                 var weight = column.weight;
                 if (weight != null) {
                     this._weight += weight;
-                    if (column.resizable) {
-                        this._nresizable += 1;
-                    }
                     column.on("resize", this._onResizeBound);
                 }
             }
@@ -74429,9 +74770,6 @@
                 var width = column.width;
                 if (width != null) {
                     this._width += width;
-                    if (column.resizable) {
-                        this._nresizable += 1;
-                    }
                     column.on("resize", this._onResizeBound);
                 }
             }
@@ -74560,7 +74898,7 @@
             }
             return result;
         };
-        DTableCategoryContainerImpl.prototype.isCategory = function (index, a, b) {
+        DTableCategoryContainerImpl.prototype.isEqual = function (index, a, b) {
             if (a != null) {
                 if (b != null) {
                     if (isString(a)) {
@@ -74658,12 +74996,19 @@
                 if (i !== frozen &&
                     ccolumn &&
                     tcolumn &&
-                    this.isCategory(index, tcolumn.category, column.category)) {
-                    if (ccolumn.weight != null && column.weight != null) {
-                        ccolumn.add(column);
-                    }
-                    else if (ccolumn.width != null && column.width != null) {
-                        ccolumn.add(column);
+                    this.isEqual(index, tcolumn.category, column.category)) {
+                    if (ccolumn.resizable === column.resizable) {
+                        if (ccolumn.weight != null && column.weight != null) {
+                            ccolumn.add(column);
+                        }
+                        else if (ccolumn.width != null && column.width != null) {
+                            ccolumn.add(column);
+                        }
+                        else {
+                            tcolumn = column;
+                            ccolumn = new DTableCategoryColumnImpl(index, column);
+                            result.push(ccolumn);
+                        }
                     }
                     else {
                         tcolumn = column;
@@ -74995,7 +75340,9 @@
             var getter = toGetter(options, type, path);
             var setter = toSetter(options, type, path);
             _this._weight = weight;
+            _this.minWeight = 0;
             _this._width = width;
+            _this.minWidth = 0;
             _this.resizable = (_b = options.resizable) !== null && _b !== void 0 ? _b : false;
             _this.type = type;
             _this.label = label;
@@ -76139,12 +76486,6 @@
      * Copyright (C) 2019 Toshiba Corporation
      * SPDX-License-Identifier: Apache-2.0
      */
-    var DTableHeaderCellEdge = {
-        NONE: 0,
-        LEFT: 1,
-        RIGHT: 2,
-        BOTH: 3
-    };
     var DTableHeaderCell = /** @class */ (function (_super) {
         __extends(DTableHeaderCell, _super);
         function DTableHeaderCell(header, columnIndex, column, options) {
@@ -76154,8 +76495,7 @@
             _this._columnIndex = columnIndex;
             var check = new DTableHeaderCellCheck(_this, options === null || options === void 0 ? void 0 : options.check);
             _this._check = check;
-            _this._edgeSize = _this.theme.getEdgeWidth();
-            _this._wasResizing = false;
+            _this._edge = new DTableCellEdge(_this._header, _this, columnIndex, _this.theme.getEdgeWidth());
             var sortable = column.sorting.enable;
             var checkable = check.isEnabled;
             if (checkable || sortable) {
@@ -76199,200 +76539,17 @@
             configurable: true
         });
         DTableHeaderCell.prototype.onDown = function (e) {
-            var edges = this.state.valueOf(DTableState.HOVERED_ON_EDGE);
-            if (edges != null) {
-                this._wasResizing = true;
-                var layer = DApplications.getLayer(this);
-                if (layer != null) {
-                    var interactionManager = layer.renderer.plugins.interaction;
-                    var columnIndex = this._columnIndex;
-                    if (edges === DTableHeaderCellEdge.LEFT) {
-                        this.onDownEdge(e.data.global.x, columnIndex - 1, interactionManager);
-                    }
-                    else {
-                        this.onDownEdge(e.data.global.x, columnIndex, interactionManager);
-                    }
-                }
-            }
-            else {
-                this._wasResizing = false;
+            if (!this._edge.onDown(e)) {
                 _super.prototype.onDown.call(this, e);
             }
         };
-        DTableHeaderCell.prototype.findLeftResizableCell = function (columnIndex) {
-            var children = this._header.children;
-            var childrenLength = children.length;
-            for (var i = columnIndex; 0 <= i; --i) {
-                var child = children[childrenLength - i - 1];
-                if (child.column.resizable) {
-                    return child;
-                }
-            }
-            return null;
-        };
-        DTableHeaderCell.prototype.findRightResizableCellOfWeight = function (columnIndex) {
-            var children = this._header.children;
-            var childrenLength = children.length;
-            for (var i = columnIndex + 1; i < childrenLength; ++i) {
-                var child = children[childrenLength - i - 1];
-                var childColumn = child.column;
-                if (childColumn.resizable) {
-                    var childColumnWeight = childColumn.weight;
-                    if (childColumnWeight != null) {
-                        return child;
-                    }
-                }
-            }
-            return null;
-        };
-        DTableHeaderCell.prototype.checkIfEdgeResizable = function (columnIndex) {
-            var target = this.findLeftResizableCell(columnIndex);
-            if (target != null) {
-                if (target.column.weight != null) {
-                    return this.findRightResizableCellOfWeight(target.columnIndex) != null;
-                }
-                else {
-                    return true;
-                }
-            }
-            return false;
-        };
-        DTableHeaderCell.prototype.getResizableEdges = function () {
-            var result = this._resizableEdges;
-            if (result == null) {
-                var columnIndex = this._columnIndex;
-                if (this.checkIfEdgeResizable(columnIndex - 1)) {
-                    if (this.checkIfEdgeResizable(columnIndex)) {
-                        result = DTableHeaderCellEdge.BOTH;
-                    }
-                    else {
-                        result = DTableHeaderCellEdge.LEFT;
-                    }
-                }
-                else {
-                    if (this.checkIfEdgeResizable(columnIndex)) {
-                        result = DTableHeaderCellEdge.RIGHT;
-                    }
-                    else {
-                        result = DTableHeaderCellEdge.NONE;
-                    }
-                }
-                this._resizableEdges = result;
-            }
-            return result;
-        };
         DTableHeaderCell.prototype.onOver = function (e) {
-            var _this = this;
-            var _a;
             _super.prototype.onOver.call(this, e);
-            if (this.getResizableEdges() !== DTableHeaderCellEdge.NONE) {
-                var onHoveredBound = ((_a = this._onHoveredBound) !== null && _a !== void 0 ? _a : (this._onHoveredBound = function (event) {
-                    _this.onHovered(event);
-                }));
-                this.on(UtilPointerEvent.move, onHoveredBound);
-                // Since the cursor is set by InteractionManager before this method is called,
-                // the cursor need to be overriden.
-                this.onHovered(e);
-                var layer = DApplications.getLayer(this);
-                if (layer != null) {
-                    layer.renderer.plugins.interaction.cursor = this.cursor;
-                }
-            }
+            this._edge.onOver(e);
         };
         DTableHeaderCell.prototype.onOut = function (e) {
             _super.prototype.onOut.call(this, e);
-            var onHoveredBound = this._onHoveredBound;
-            if (onHoveredBound != null) {
-                this.state.remove(DTableState.HOVERED_ON_EDGE);
-                this.off(UtilPointerEvent.move, onHoveredBound);
-            }
-        };
-        DTableHeaderCell.prototype.onHovered = function (e) {
-            var width = this.width;
-            var x = this.toClickPosition(e);
-            var edgeSize = this._edgeSize;
-            if (0 <= x && x <= edgeSize) {
-                if (this.getResizableEdges() & DTableHeaderCellEdge.LEFT) {
-                    this.state.add(DTableState.HOVERED_ON_EDGE, DTableHeaderCellEdge.LEFT);
-                }
-                else {
-                    this.state.remove(DTableState.HOVERED_ON_EDGE);
-                }
-            }
-            else if (width - edgeSize <= x && x <= width) {
-                if (this.getResizableEdges() & DTableHeaderCellEdge.RIGHT) {
-                    this.state.add(DTableState.HOVERED_ON_EDGE, DTableHeaderCellEdge.RIGHT);
-                }
-                else {
-                    this.state.remove(DTableState.HOVERED_ON_EDGE);
-                }
-            }
-            else {
-                this.state.remove(DTableState.HOVERED_ON_EDGE);
-            }
-        };
-        DTableHeaderCell.prototype.onDownEdge = function (onDownPoint, columnIndex, interactionManager) {
-            // Find the resizable cell
-            var left = this.findLeftResizableCell(columnIndex);
-            if (left == null) {
-                // No resizable cell
-                return;
-            }
-            var header = this._header;
-            var leftColumn = left.column;
-            var leftOldWidth = left.width;
-            var leftOldWeight = left.weight;
-            if (leftColumn.weight == null) {
-                header.state.add(DTableState.RESIZING);
-                var onMove_1 = function (e) {
-                    leftColumn.width = Math.max(1, leftOldWidth + e.data.global.x - onDownPoint);
-                };
-                var onUp_1 = function (e) {
-                    header.state.remove(DTableState.RESIZING);
-                    interactionManager.off(UtilPointerEvent.move, onMove_1);
-                    interactionManager.off(UtilPointerEvent.up, onUp_1);
-                    interactionManager.off(UtilPointerEvent.upoutside, onUp_1);
-                    interactionManager.off(UtilPointerEvent.cancel, onUp_1);
-                };
-                interactionManager.on(UtilPointerEvent.move, onMove_1);
-                interactionManager.on(UtilPointerEvent.up, onUp_1);
-                interactionManager.on(UtilPointerEvent.upoutside, onUp_1);
-                interactionManager.on(UtilPointerEvent.cancel, onUp_1);
-            }
-            else {
-                var right = this.findRightResizableCellOfWeight(left.columnIndex);
-                if (right == null) {
-                    // No right resizable cell found
-                    return;
-                }
-                var rightColumn_1 = right.column;
-                var rightOldWeight = right.weight;
-                var rightOldWidth = right.width;
-                var totalWidth_1 = leftOldWidth + rightOldWidth;
-                var totalWeight_1 = leftOldWeight + rightOldWeight;
-                if (totalWidth_1 <= 0) {
-                    // The left and right resizable cells doesn't have non-zero width
-                    return;
-                }
-                header.state.add(DTableState.RESIZING);
-                var onMove_2 = function (e) {
-                    var leftNewWidth = Math.max(0, Math.min(totalWidth_1, leftOldWidth + e.data.global.x - onDownPoint));
-                    var leftNewWeight = totalWeight_1 * (leftNewWidth / totalWidth_1);
-                    leftColumn.weight = leftNewWeight;
-                    rightColumn_1.weight = totalWeight_1 - leftNewWeight;
-                };
-                var onUp_2 = function (e) {
-                    header.state.remove(DTableState.RESIZING);
-                    interactionManager.off(UtilPointerEvent.move, onMove_2);
-                    interactionManager.off(UtilPointerEvent.up, onUp_2);
-                    interactionManager.off(UtilPointerEvent.upoutside, onUp_2);
-                    interactionManager.off(UtilPointerEvent.cancel, onUp_2);
-                };
-                interactionManager.on(UtilPointerEvent.move, onMove_2);
-                interactionManager.on(UtilPointerEvent.up, onUp_2);
-                interactionManager.on(UtilPointerEvent.upoutside, onUp_2);
-                interactionManager.on(UtilPointerEvent.cancel, onUp_2);
-            }
+            this._edge.onOut(e);
         };
         Object.defineProperty(DTableHeaderCell.prototype, "sorter", {
             get: function () {
@@ -76480,10 +76637,6 @@
             }
             return false;
         };
-        DTableHeaderCell.prototype.isEdgeClicked = function (e) {
-            return (e instanceof pixi_js.InteractionEvent &&
-                (this.state.is(DTableState.HOVERED_ON_EDGE) || this._wasResizing));
-        };
         DTableHeaderCell.prototype.onClick = function (e) {
             if (this.state.isActionable) {
                 this.activate(e);
@@ -76493,7 +76646,7 @@
             this.onActivate(e);
         };
         DTableHeaderCell.prototype.onActivate = function (e) {
-            if (!this.isEdgeClicked(e)) {
+            if (!this._edge.isClicked(e)) {
                 if (this.isCheckClicked(e)) {
                     this.onToggleStart();
                     this.onToggleEnd();
@@ -79436,11 +79589,12 @@
         DTableBodyCells: DTableBodyCells,
         DTableBodyRow: DTableBodyRow,
         DTableBody: DTableBody,
-        DTableCategoryCellEdge: DTableCategoryCellEdge,
         DTableCategoryCell: DTableCategoryCell,
         DTableCategoryColumnImpl: DTableCategoryColumnImpl,
         DTableCategoryContainerImpl: DTableCategoryContainerImpl,
         DTableCategory: DTableCategory,
+        DTableCellEdgeHovered: DTableCellEdgeHovered,
+        DTableCellEdge: DTableCellEdge,
         DTableColumnContainerImpl: DTableColumnContainerImpl,
         DTableColumnImpl: DTableColumnImpl,
         DTableColumnType: DTableColumnType,
@@ -79458,7 +79612,6 @@
         DTableDataTreeSorter: DTableDataTreeSorter,
         DTableDataTree: DTableDataTree,
         DTableHeaderCellCheck: DTableHeaderCellCheck,
-        DTableHeaderCellEdge: DTableHeaderCellEdge,
         DTableHeaderCell: DTableHeaderCell,
         DTableHeader: DTableHeader,
         DTableRow: DTableRow,