flexlayout-react 0.5.17 → 0.5.21

package/dist/flexlayout.js

@@ -368,7 +368,7 @@ eval("\nObject.defineProperty(exports, \"__esModule\", { value: true });\nvar Or
 /***/ (function(module, exports, __webpack_require__) {
 
 "use strict";
-eval("\nObject.defineProperty(exports, \"__esModule\", { value: true });\nexports.showPopup = void 0;\nvar React = __webpack_require__(/*! react */ \"react\");\nvar ReactDOM = __webpack_require__(/*! react-dom */ \"react-dom\");\n/** @hidden @internal */\nfunction showPopup(layoutDiv, triggerElement, items, onSelect, classNameMapper) {\n    var currentDocument = triggerElement.ownerDocument;\n    var triggerRect = triggerElement.getBoundingClientRect();\n    var layoutRect = layoutDiv.getBoundingClientRect();\n    var elm = currentDocument.createElement(\"div\");\n    elm.className = classNameMapper(\"flexlayout__popup_menu_container\");\n    if (triggerRect.left < layoutRect.left + layoutRect.width / 2) {\n        elm.style.left = triggerRect.left - layoutRect.left + \"px\";\n    }\n    else {\n        elm.style.right = layoutRect.right - triggerRect.right + \"px\";\n    }\n    if (triggerRect.top < layoutRect.top + layoutRect.height / 2) {\n        elm.style.top = triggerRect.top - layoutRect.top + \"px\";\n    }\n    else {\n        elm.style.bottom = layoutRect.bottom - triggerRect.bottom + \"px\";\n    }\n    layoutDiv.appendChild(elm);\n    var onHide = function () {\n        layoutDiv.removeChild(elm);\n        ReactDOM.unmountComponentAtNode(elm);\n        elm.removeEventListener(\"mouseup\", onElementMouseUp);\n        currentDocument.removeEventListener(\"mouseup\", onDocMouseUp);\n    };\n    var onElementMouseUp = function (event) {\n        event.stopPropagation();\n    };\n    var onDocMouseUp = function (event) {\n        onHide();\n    };\n    elm.addEventListener(\"mouseup\", onElementMouseUp);\n    currentDocument.addEventListener(\"mouseup\", onDocMouseUp);\n    ReactDOM.render(React.createElement(PopupMenu, { currentDocument: currentDocument, onSelect: onSelect, onHide: onHide, items: items, classNameMapper: classNameMapper }), elm);\n}\nexports.showPopup = showPopup;\n/** @hidden @internal */\nvar PopupMenu = function (props) {\n    var items = props.items, onHide = props.onHide, onSelect = props.onSelect, classNameMapper = props.classNameMapper;\n    var onItemClick = function (item, event) {\n        onSelect(item);\n        onHide();\n        event.stopPropagation();\n    };\n    var itemElements = items.map(function (item) { return (React.createElement(\"div\", { key: item.index, className: classNameMapper(\"flexlayout__popup_menu_item\"), onClick: function (event) { return onItemClick(item, event); }, title: item.node.getHelpText() }, item.node._getRenderedName())); });\n    return React.createElement(\"div\", { className: classNameMapper(\"flexlayout__popup_menu\") }, itemElements);\n};\n\n\n//# sourceURL=webpack://FlexLayout/./src/PopupMenu.tsx?");
+eval("\nObject.defineProperty(exports, \"__esModule\", { value: true });\nexports.showPopup = void 0;\nvar React = __webpack_require__(/*! react */ \"react\");\nvar ReactDOM = __webpack_require__(/*! react-dom */ \"react-dom\");\nvar _1 = __webpack_require__(/*! . */ \"./src/index.ts\");\nvar Types_1 = __webpack_require__(/*! ./Types */ \"./src/Types.ts\");\n/** @hidden @internal */\nfunction showPopup(layoutDiv, triggerElement, items, onSelect, classNameMapper) {\n    var currentDocument = triggerElement.ownerDocument;\n    var triggerRect = triggerElement.getBoundingClientRect();\n    var layoutRect = layoutDiv.getBoundingClientRect();\n    var elm = currentDocument.createElement(\"div\");\n    elm.className = classNameMapper(Types_1.CLASSES.FLEXLAYOUT__POPUP_MENU_CONTAINER);\n    if (triggerRect.left < layoutRect.left + layoutRect.width / 2) {\n        elm.style.left = triggerRect.left - layoutRect.left + \"px\";\n    }\n    else {\n        elm.style.right = layoutRect.right - triggerRect.right + \"px\";\n    }\n    if (triggerRect.top < layoutRect.top + layoutRect.height / 2) {\n        elm.style.top = triggerRect.top - layoutRect.top + \"px\";\n    }\n    else {\n        elm.style.bottom = layoutRect.bottom - triggerRect.bottom + \"px\";\n    }\n    _1.DragDrop.instance.addGlass(function () { return onHide(); });\n    _1.DragDrop.instance.setGlassCursorOverride(\"default\");\n    layoutDiv.appendChild(elm);\n    var onHide = function () {\n        _1.DragDrop.instance.hideGlass();\n        layoutDiv.removeChild(elm);\n        ReactDOM.unmountComponentAtNode(elm);\n        elm.removeEventListener(\"mousedown\", onElementMouseDown);\n        currentDocument.removeEventListener(\"mousedown\", onDocMouseDown);\n    };\n    var onElementMouseDown = function (event) {\n        event.stopPropagation();\n    };\n    var onDocMouseDown = function (event) {\n        onHide();\n    };\n    elm.addEventListener(\"mousedown\", onElementMouseDown);\n    currentDocument.addEventListener(\"mousedown\", onDocMouseDown);\n    ReactDOM.render(React.createElement(PopupMenu, { currentDocument: currentDocument, onSelect: onSelect, onHide: onHide, items: items, classNameMapper: classNameMapper }), elm);\n}\nexports.showPopup = showPopup;\n/** @hidden @internal */\nvar PopupMenu = function (props) {\n    var items = props.items, onHide = props.onHide, onSelect = props.onSelect, classNameMapper = props.classNameMapper;\n    var onItemClick = function (item, event) {\n        onSelect(item);\n        onHide();\n        event.stopPropagation();\n    };\n    var itemElements = items.map(function (item, i) { return (React.createElement(\"div\", { key: item.index, className: classNameMapper(Types_1.CLASSES.FLEXLAYOUT__POPUP_MENU_ITEM), \"data-layout-path\": \"/popup-menu/tb\" + i, onClick: function (event) { return onItemClick(item, event); }, title: item.node.getHelpText() }, item.node._getRenderedName())); });\n    return (React.createElement(\"div\", { className: classNameMapper(Types_1.CLASSES.FLEXLAYOUT__POPUP_MENU), \"data-layout-path\": \"/popup-menu\" }, itemElements));\n};\n\n\n//# sourceURL=webpack://FlexLayout/./src/PopupMenu.tsx?");
 
 /***/ }),
 
@@ -380,7 +380,7 @@ eval("\nObject.defineProperty(exports, \"__esModule\", { value: true });\nexport
 /***/ (function(module, exports, __webpack_require__) {
 
 "use strict";
-eval("\nObject.defineProperty(exports, \"__esModule\", { value: true });\nvar Orientation_1 = __webpack_require__(/*! ./Orientation */ \"./src/Orientation.ts\");\nvar Rect = /** @class */ (function () {\n    function Rect(x, y, width, height) {\n        this.x = x;\n        this.y = y;\n        this.width = width;\n        this.height = height;\n    }\n    Rect.empty = function () {\n        return new Rect(0, 0, 0, 0);\n    };\n    Rect.fromElement = function (element) {\n        var _a = element.getBoundingClientRect(), x = _a.x, y = _a.y, width = _a.width, height = _a.height;\n        return new Rect(x, y, width, height);\n    };\n    Rect.prototype.clone = function () {\n        return new Rect(this.x, this.y, this.width, this.height);\n    };\n    Rect.prototype.equals = function (rect) {\n        if (this.x === rect.x && this.y === rect.y && this.width === rect.width && this.height === rect.height) {\n            return true;\n        }\n        else {\n            return false;\n        }\n    };\n    Rect.prototype.getBottom = function () {\n        return this.y + this.height;\n    };\n    Rect.prototype.getRight = function () {\n        return this.x + this.width;\n    };\n    Rect.prototype.positionElement = function (element, position) {\n        this.styleWithPosition(element.style, position);\n    };\n    Rect.prototype.styleWithPosition = function (style, position) {\n        if (position === void 0) { position = \"absolute\"; }\n        style.left = this.x + \"px\";\n        style.top = this.y + \"px\";\n        style.width = Math.max(0, this.width) + \"px\"; // need Math.max to prevent -ve, cause error in IE\n        style.height = Math.max(0, this.height) + \"px\";\n        style.position = position;\n        return style;\n    };\n    Rect.prototype.contains = function (x, y) {\n        if (this.x <= x && x <= this.getRight() && this.y <= y && y <= this.getBottom()) {\n            return true;\n        }\n        else {\n            return false;\n        }\n    };\n    Rect.prototype.removeInsets = function (insets) {\n        return new Rect(this.x + insets.left, this.y + insets.top, Math.max(0, this.width - insets.left - insets.right), Math.max(0, this.height - insets.top - insets.bottom));\n    };\n    Rect.prototype.centerInRect = function (outerRect) {\n        this.x = (outerRect.width - this.width) / 2;\n        this.y = (outerRect.height - this.height) / 2;\n    };\n    /** @hidden @internal */\n    Rect.prototype._getSize = function (orientation) {\n        var prefSize = this.width;\n        if (orientation === Orientation_1.default.VERT) {\n            prefSize = this.height;\n        }\n        return prefSize;\n    };\n    Rect.prototype.toString = function () {\n        return \"(Rect: x=\" + this.x + \", y=\" + this.y + \", width=\" + this.width + \", height=\" + this.height + \")\";\n    };\n    return Rect;\n}());\nexports.default = Rect;\n\n\n//# sourceURL=webpack://FlexLayout/./src/Rect.ts?");
+eval("\nObject.defineProperty(exports, \"__esModule\", { value: true });\nvar Orientation_1 = __webpack_require__(/*! ./Orientation */ \"./src/Orientation.ts\");\nvar Rect = /** @class */ (function () {\n    function Rect(x, y, width, height) {\n        this.x = x;\n        this.y = y;\n        this.width = width;\n        this.height = height;\n    }\n    Rect.empty = function () {\n        return new Rect(0, 0, 0, 0);\n    };\n    Rect.fromElement = function (element) {\n        var _a = element.getBoundingClientRect(), x = _a.x, y = _a.y, width = _a.width, height = _a.height;\n        return new Rect(x, y, width, height);\n    };\n    Rect.prototype.clone = function () {\n        return new Rect(this.x, this.y, this.width, this.height);\n    };\n    Rect.prototype.equals = function (rect) {\n        if (this.x === rect.x && this.y === rect.y && this.width === rect.width && this.height === rect.height) {\n            return true;\n        }\n        else {\n            return false;\n        }\n    };\n    Rect.prototype.getBottom = function () {\n        return this.y + this.height;\n    };\n    Rect.prototype.getRight = function () {\n        return this.x + this.width;\n    };\n    Rect.prototype.getCenter = function () {\n        return { x: this.x + this.width / 2, y: this.y + this.height / 2 };\n    };\n    Rect.prototype.positionElement = function (element, position) {\n        this.styleWithPosition(element.style, position);\n    };\n    Rect.prototype.styleWithPosition = function (style, position) {\n        if (position === void 0) { position = \"absolute\"; }\n        style.left = this.x + \"px\";\n        style.top = this.y + \"px\";\n        style.width = Math.max(0, this.width) + \"px\"; // need Math.max to prevent -ve, cause error in IE\n        style.height = Math.max(0, this.height) + \"px\";\n        style.position = position;\n        return style;\n    };\n    Rect.prototype.contains = function (x, y) {\n        if (this.x <= x && x <= this.getRight() && this.y <= y && y <= this.getBottom()) {\n            return true;\n        }\n        else {\n            return false;\n        }\n    };\n    Rect.prototype.removeInsets = function (insets) {\n        return new Rect(this.x + insets.left, this.y + insets.top, Math.max(0, this.width - insets.left - insets.right), Math.max(0, this.height - insets.top - insets.bottom));\n    };\n    Rect.prototype.centerInRect = function (outerRect) {\n        this.x = (outerRect.width - this.width) / 2;\n        this.y = (outerRect.height - this.height) / 2;\n    };\n    /** @hidden @internal */\n    Rect.prototype._getSize = function (orientation) {\n        var prefSize = this.width;\n        if (orientation === Orientation_1.default.VERT) {\n            prefSize = this.height;\n        }\n        return prefSize;\n    };\n    Rect.prototype.toString = function () {\n        return \"(Rect: x=\" + this.x + \", y=\" + this.y + \", width=\" + this.width + \", height=\" + this.height + \")\";\n    };\n    return Rect;\n}());\nexports.default = Rect;\n\n\n//# sourceURL=webpack://FlexLayout/./src/Rect.ts?");
 
 /***/ }),
 
@@ -392,7 +392,7 @@ eval("\nObject.defineProperty(exports, \"__esModule\", { value: true });\nvar Or
 /***/ (function(module, exports, __webpack_require__) {
 
 "use strict";
-eval("\nObject.defineProperty(exports, \"__esModule\", { value: true });\nexports.CLASSES = void 0;\nvar CLASSES;\n(function (CLASSES) {\n    CLASSES[\"FLEXLAYOUT__BORDER\"] = \"flexlayout__border\";\n    CLASSES[\"FLEXLAYOUT__BORDER_\"] = \"flexlayout__border_\";\n    CLASSES[\"FLEXLAYOUT__BORDER_BUTTON\"] = \"flexlayout__border_button\";\n    CLASSES[\"FLEXLAYOUT__BORDER_BUTTON_\"] = \"flexlayout__border_button_\";\n    CLASSES[\"FLEXLAYOUT__BORDER_BUTTON_CONTENT\"] = \"flexlayout__border_button_content\";\n    CLASSES[\"FLEXLAYOUT__BORDER_BUTTON_LEADING\"] = \"flexlayout__border_button_leading\";\n    CLASSES[\"FLEXLAYOUT__BORDER_BUTTON_TRAILING\"] = \"flexlayout__border_button_trailing\";\n    CLASSES[\"FLEXLAYOUT__BORDER_BUTTON__SELECTED\"] = \"flexlayout__border_button--selected\";\n    CLASSES[\"FLEXLAYOUT__BORDER_BUTTON__UNSELECTED\"] = \"flexlayout__border_button--unselected\";\n    CLASSES[\"FLEXLAYOUT__BORDER_INNER\"] = \"flexlayout__border_inner\";\n    CLASSES[\"FLEXLAYOUT__BORDER_INNER_\"] = \"flexlayout__border_inner_\";\n    CLASSES[\"FLEXLAYOUT__BORDER_INNER_TAB_CONTAINER\"] = \"flexlayout__border_inner_tab_container\";\n    CLASSES[\"FLEXLAYOUT__BORDER_INNER_TAB_CONTAINER_\"] = \"flexlayout__border_inner_tab_container_\";\n    CLASSES[\"FLEXLAYOUT__BORDER_SIZER\"] = \"flexlayout__border_sizer\";\n    CLASSES[\"FLEXLAYOUT__BORDER_TOOLBAR\"] = \"flexlayout__border_toolbar\";\n    CLASSES[\"FLEXLAYOUT__BORDER_TOOLBAR_\"] = \"flexlayout__border_toolbar_\";\n    CLASSES[\"FLEXLAYOUT__BORDER_TOOLBAR_BUTTON\"] = \"flexlayout__border_toolbar_button\";\n    CLASSES[\"FLEXLAYOUT__BORDER_TOOLBAR_BUTTON_FLOAT\"] = \"flexlayout__border_toolbar_button-float\";\n    CLASSES[\"FLEXLAYOUT__DRAG_RECT\"] = \"flexlayout__drag_rect\";\n    CLASSES[\"FLEXLAYOUT__EDGE_RECT\"] = \"flexlayout__edge_rect\";\n    CLASSES[\"FLEXLAYOUT__ERROR_BOUNDARY_CONTAINER\"] = \"flexlayout__error_boundary_container\";\n    CLASSES[\"FLEXLAYOUT__ERROR_BOUNDARY_CONTENT\"] = \"flexlayout__error_boundary_content\";\n    CLASSES[\"FLEXLAYOUT__FLOATING_WINDOW_CONTENT\"] = \"flexlayout__floating_window_content\";\n    CLASSES[\"FLEXLAYOUT__FLOATING_WINDOW_TAB\"] = \"flexlayout__floating_window_tab\";\n    CLASSES[\"FLEXLAYOUT__LAYOUT\"] = \"flexlayout__layout\";\n    CLASSES[\"FLEXLAYOUT__OUTLINE_RECT\"] = \"flexlayout__outline_rect\";\n    CLASSES[\"FLEXLAYOUT__SPLITTER\"] = \"flexlayout__splitter\";\n    CLASSES[\"FLEXLAYOUT__SPLITTER_EXTRA\"] = \"flexlayout__splitter_extra\";\n    CLASSES[\"FLEXLAYOUT__SPLITTER_\"] = \"flexlayout__splitter_\";\n    CLASSES[\"FLEXLAYOUT__SPLITTER_BORDER\"] = \"flexlayout__splitter_border\";\n    CLASSES[\"FLEXLAYOUT__SPLITTER_DRAG\"] = \"flexlayout__splitter_drag\";\n    CLASSES[\"FLEXLAYOUT__TAB\"] = \"flexlayout__tab\";\n    CLASSES[\"FLEXLAYOUT__TABSET\"] = \"flexlayout__tabset\";\n    CLASSES[\"FLEXLAYOUT__TABSET_HEADER\"] = \"flexlayout__tabset_header\";\n    CLASSES[\"FLEXLAYOUT__TABSET_HEADER_SIZER\"] = \"flexlayout__tabset_header_sizer\";\n    CLASSES[\"FLEXLAYOUT__TABSET_HEADER_CONTENT\"] = \"flexlayout__tabset_header_content\";\n    CLASSES[\"FLEXLAYOUT__TABSET_MAXIMIZED\"] = \"flexlayout__tabset-maximized\";\n    CLASSES[\"FLEXLAYOUT__TABSET_SELECTED\"] = \"flexlayout__tabset-selected\";\n    CLASSES[\"FLEXLAYOUT__TABSET_SIZER\"] = \"flexlayout__tabset_sizer\";\n    CLASSES[\"FLEXLAYOUT__TABSET_TABBAR_INNER\"] = \"flexlayout__tabset_tabbar_inner\";\n    CLASSES[\"FLEXLAYOUT__TABSET_TABBAR_INNER_\"] = \"flexlayout__tabset_tabbar_inner_\";\n    CLASSES[\"FLEXLAYOUT__TABSET_TABBAR_INNER_TAB_CONTAINER\"] = \"flexlayout__tabset_tabbar_inner_tab_container\";\n    CLASSES[\"FLEXLAYOUT__TABSET_TABBAR_INNER_TAB_CONTAINER_\"] = \"flexlayout__tabset_tabbar_inner_tab_container_\";\n    CLASSES[\"FLEXLAYOUT__TABSET_TABBAR_OUTER\"] = \"flexlayout__tabset_tabbar_outer\";\n    CLASSES[\"FLEXLAYOUT__TABSET_TABBAR_OUTER_\"] = \"flexlayout__tabset_tabbar_outer_\";\n    CLASSES[\"FLEXLAYOUT__TAB_BORDER\"] = \"flexlayout__tab_border\";\n    CLASSES[\"FLEXLAYOUT__TAB_BORDER_\"] = \"flexlayout__tab_border_\";\n    CLASSES[\"FLEXLAYOUT__TAB_BUTTON\"] = \"flexlayout__tab_button\";\n    CLASSES[\"FLEXLAYOUT__TAB_BUTTON_CONTENT\"] = \"flexlayout__tab_button_content\";\n    CLASSES[\"FLEXLAYOUT__TAB_BUTTON_LEADING\"] = \"flexlayout__tab_button_leading\";\n    CLASSES[\"FLEXLAYOUT__TAB_BUTTON_OVERFLOW\"] = \"flexlayout__tab_button_overflow\";\n    CLASSES[\"FLEXLAYOUT__TAB_BUTTON_TEXTBOX\"] = \"flexlayout__tab_button_textbox\";\n    CLASSES[\"FLEXLAYOUT__TAB_BUTTON_TRAILING\"] = \"flexlayout__tab_button_trailing\";\n    CLASSES[\"FLEXLAYOUT__TAB_FLOATING\"] = \"flexlayout__tab_floating\";\n    CLASSES[\"FLEXLAYOUT__TAB_FLOATING_INNER\"] = \"flexlayout__tab_floating_inner\";\n    CLASSES[\"FLEXLAYOUT__TAB_TOOLBAR\"] = \"flexlayout__tab_toolbar\";\n    CLASSES[\"FLEXLAYOUT__TAB_TOOLBAR_BUTTON\"] = \"flexlayout__tab_toolbar_button\";\n    CLASSES[\"FLEXLAYOUT__TAB_TOOLBAR_BUTTON_\"] = \"flexlayout__tab_toolbar_button-\";\n    CLASSES[\"FLEXLAYOUT__TAB_TOOLBAR_BUTTON_FLOAT\"] = \"flexlayout__tab_toolbar_button-float\";\n    CLASSES[\"FLEXLAYOUT__TAB_TOOLBAR_STICKY_BUTTONS_CONTAINER\"] = \"flexlayout__tab_toolbar_sticky_buttons_container\";\n    CLASSES[\"FLEXLAYOUT__TAB_TOOLBAR_BUTTON_CLOSE\"] = \"flexlayout__tab_toolbar_button-close\";\n})(CLASSES = exports.CLASSES || (exports.CLASSES = {}));\n\n\n//# sourceURL=webpack://FlexLayout/./src/Types.ts?");
+eval("\nObject.defineProperty(exports, \"__esModule\", { value: true });\nexports.CLASSES = void 0;\nvar CLASSES;\n(function (CLASSES) {\n    CLASSES[\"FLEXLAYOUT__BORDER\"] = \"flexlayout__border\";\n    CLASSES[\"FLEXLAYOUT__BORDER_\"] = \"flexlayout__border_\";\n    CLASSES[\"FLEXLAYOUT__BORDER_BUTTON\"] = \"flexlayout__border_button\";\n    CLASSES[\"FLEXLAYOUT__BORDER_BUTTON_\"] = \"flexlayout__border_button_\";\n    CLASSES[\"FLEXLAYOUT__BORDER_BUTTON_CONTENT\"] = \"flexlayout__border_button_content\";\n    CLASSES[\"FLEXLAYOUT__BORDER_BUTTON_LEADING\"] = \"flexlayout__border_button_leading\";\n    CLASSES[\"FLEXLAYOUT__BORDER_BUTTON_TRAILING\"] = \"flexlayout__border_button_trailing\";\n    CLASSES[\"FLEXLAYOUT__BORDER_BUTTON__SELECTED\"] = \"flexlayout__border_button--selected\";\n    CLASSES[\"FLEXLAYOUT__BORDER_BUTTON__UNSELECTED\"] = \"flexlayout__border_button--unselected\";\n    CLASSES[\"FLEXLAYOUT__BORDER_TOOLBAR_BUTTON_OVERFLOW\"] = \"flexlayout__border_toolbar_button_overflow\";\n    CLASSES[\"FLEXLAYOUT__BORDER_TOOLBAR_BUTTON_OVERFLOW_\"] = \"flexlayout__border_toolbar_button_overflow_\";\n    CLASSES[\"FLEXLAYOUT__BORDER_INNER\"] = \"flexlayout__border_inner\";\n    CLASSES[\"FLEXLAYOUT__BORDER_INNER_\"] = \"flexlayout__border_inner_\";\n    CLASSES[\"FLEXLAYOUT__BORDER_INNER_TAB_CONTAINER\"] = \"flexlayout__border_inner_tab_container\";\n    CLASSES[\"FLEXLAYOUT__BORDER_INNER_TAB_CONTAINER_\"] = \"flexlayout__border_inner_tab_container_\";\n    CLASSES[\"FLEXLAYOUT__BORDER_SIZER\"] = \"flexlayout__border_sizer\";\n    CLASSES[\"FLEXLAYOUT__BORDER_TOOLBAR\"] = \"flexlayout__border_toolbar\";\n    CLASSES[\"FLEXLAYOUT__BORDER_TOOLBAR_\"] = \"flexlayout__border_toolbar_\";\n    CLASSES[\"FLEXLAYOUT__BORDER_TOOLBAR_BUTTON\"] = \"flexlayout__border_toolbar_button\";\n    CLASSES[\"FLEXLAYOUT__BORDER_TOOLBAR_BUTTON_FLOAT\"] = \"flexlayout__border_toolbar_button-float\";\n    CLASSES[\"FLEXLAYOUT__DRAG_RECT\"] = \"flexlayout__drag_rect\";\n    CLASSES[\"FLEXLAYOUT__EDGE_RECT\"] = \"flexlayout__edge_rect\";\n    CLASSES[\"FLEXLAYOUT__ERROR_BOUNDARY_CONTAINER\"] = \"flexlayout__error_boundary_container\";\n    CLASSES[\"FLEXLAYOUT__ERROR_BOUNDARY_CONTENT\"] = \"flexlayout__error_boundary_content\";\n    CLASSES[\"FLEXLAYOUT__FLOATING_WINDOW_CONTENT\"] = \"flexlayout__floating_window_content\";\n    CLASSES[\"FLEXLAYOUT__FLOATING_WINDOW_TAB\"] = \"flexlayout__floating_window_tab\";\n    CLASSES[\"FLEXLAYOUT__LAYOUT\"] = \"flexlayout__layout\";\n    CLASSES[\"FLEXLAYOUT__OUTLINE_RECT\"] = \"flexlayout__outline_rect\";\n    CLASSES[\"FLEXLAYOUT__OUTLINE_RECT_EDGE\"] = \"flexlayout__outline_rect_edge\";\n    CLASSES[\"FLEXLAYOUT__SPLITTER\"] = \"flexlayout__splitter\";\n    CLASSES[\"FLEXLAYOUT__SPLITTER_EXTRA\"] = \"flexlayout__splitter_extra\";\n    CLASSES[\"FLEXLAYOUT__SPLITTER_\"] = \"flexlayout__splitter_\";\n    CLASSES[\"FLEXLAYOUT__SPLITTER_BORDER\"] = \"flexlayout__splitter_border\";\n    CLASSES[\"FLEXLAYOUT__SPLITTER_DRAG\"] = \"flexlayout__splitter_drag\";\n    CLASSES[\"FLEXLAYOUT__TAB\"] = \"flexlayout__tab\";\n    CLASSES[\"FLEXLAYOUT__TABSET\"] = \"flexlayout__tabset\";\n    CLASSES[\"FLEXLAYOUT__TABSET_HEADER\"] = \"flexlayout__tabset_header\";\n    CLASSES[\"FLEXLAYOUT__TABSET_HEADER_SIZER\"] = \"flexlayout__tabset_header_sizer\";\n    CLASSES[\"FLEXLAYOUT__TABSET_HEADER_CONTENT\"] = \"flexlayout__tabset_header_content\";\n    CLASSES[\"FLEXLAYOUT__TABSET_MAXIMIZED\"] = \"flexlayout__tabset-maximized\";\n    CLASSES[\"FLEXLAYOUT__TABSET_SELECTED\"] = \"flexlayout__tabset-selected\";\n    CLASSES[\"FLEXLAYOUT__TABSET_SIZER\"] = \"flexlayout__tabset_sizer\";\n    CLASSES[\"FLEXLAYOUT__TABSET_TABBAR_INNER\"] = \"flexlayout__tabset_tabbar_inner\";\n    CLASSES[\"FLEXLAYOUT__TABSET_TABBAR_INNER_\"] = \"flexlayout__tabset_tabbar_inner_\";\n    CLASSES[\"FLEXLAYOUT__TABSET_TABBAR_INNER_TAB_CONTAINER\"] = \"flexlayout__tabset_tabbar_inner_tab_container\";\n    CLASSES[\"FLEXLAYOUT__TABSET_TABBAR_INNER_TAB_CONTAINER_\"] = \"flexlayout__tabset_tabbar_inner_tab_container_\";\n    CLASSES[\"FLEXLAYOUT__TABSET_TABBAR_OUTER\"] = \"flexlayout__tabset_tabbar_outer\";\n    CLASSES[\"FLEXLAYOUT__TABSET_TABBAR_OUTER_\"] = \"flexlayout__tabset_tabbar_outer_\";\n    CLASSES[\"FLEXLAYOUT__TAB_BORDER\"] = \"flexlayout__tab_border\";\n    CLASSES[\"FLEXLAYOUT__TAB_BORDER_\"] = \"flexlayout__tab_border_\";\n    CLASSES[\"FLEXLAYOUT__TAB_BUTTON\"] = \"flexlayout__tab_button\";\n    CLASSES[\"FLEXLAYOUT__TAB_BUTTON_CONTENT\"] = \"flexlayout__tab_button_content\";\n    CLASSES[\"FLEXLAYOUT__TAB_BUTTON_LEADING\"] = \"flexlayout__tab_button_leading\";\n    CLASSES[\"FLEXLAYOUT__TAB_BUTTON_OVERFLOW\"] = \"flexlayout__tab_button_overflow\";\n    CLASSES[\"FLEXLAYOUT__TAB_BUTTON_TEXTBOX\"] = \"flexlayout__tab_button_textbox\";\n    CLASSES[\"FLEXLAYOUT__TAB_BUTTON_TRAILING\"] = \"flexlayout__tab_button_trailing\";\n    CLASSES[\"FLEXLAYOUT__TAB_FLOATING\"] = \"flexlayout__tab_floating\";\n    CLASSES[\"FLEXLAYOUT__TAB_FLOATING_INNER\"] = \"flexlayout__tab_floating_inner\";\n    CLASSES[\"FLEXLAYOUT__TAB_TOOLBAR\"] = \"flexlayout__tab_toolbar\";\n    CLASSES[\"FLEXLAYOUT__TAB_TOOLBAR_BUTTON\"] = \"flexlayout__tab_toolbar_button\";\n    CLASSES[\"FLEXLAYOUT__TAB_TOOLBAR_BUTTON_\"] = \"flexlayout__tab_toolbar_button-\";\n    CLASSES[\"FLEXLAYOUT__TAB_TOOLBAR_BUTTON_FLOAT\"] = \"flexlayout__tab_toolbar_button-float\";\n    CLASSES[\"FLEXLAYOUT__TAB_TOOLBAR_STICKY_BUTTONS_CONTAINER\"] = \"flexlayout__tab_toolbar_sticky_buttons_container\";\n    CLASSES[\"FLEXLAYOUT__TAB_TOOLBAR_BUTTON_CLOSE\"] = \"flexlayout__tab_toolbar_button-close\";\n    CLASSES[\"FLEXLAYOUT__POPUP_MENU_CONTAINER\"] = \"flexlayout__popup_menu_container\";\n    CLASSES[\"FLEXLAYOUT__POPUP_MENU_ITEM\"] = \"flexlayout__popup_menu_item\";\n    CLASSES[\"FLEXLAYOUT__POPUP_MENU\"] = \"flexlayout__popup_menu\";\n})(CLASSES = exports.CLASSES || (exports.CLASSES = {}));\n\n\n//# sourceURL=webpack://FlexLayout/./src/Types.ts?");
 
 /***/ }),
 
@@ -440,7 +440,7 @@ eval("\nObject.defineProperty(exports, \"__esModule\", { value: true });\nvar Ac
 /***/ (function(module, exports, __webpack_require__) {
 
 "use strict";
-eval("\nvar __extends = (this && this.__extends) || (function () {\n    var extendStatics = function (d, b) {\n        extendStatics = Object.setPrototypeOf ||\n            ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||\n            function (d, b) { for (var p in b) if (Object.prototype.hasOwnProperty.call(b, p)) d[p] = b[p]; };\n        return extendStatics(d, b);\n    };\n    return function (d, b) {\n        if (typeof b !== \"function\" && b !== null)\n            throw new TypeError(\"Class extends value \" + String(b) + \" is not a constructor or null\");\n        extendStatics(d, b);\n        function __() { this.constructor = d; }\n        d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());\n    };\n})();\nObject.defineProperty(exports, \"__esModule\", { value: true });\nvar Attribute_1 = __webpack_require__(/*! ../Attribute */ \"./src/Attribute.ts\");\nvar AttributeDefinitions_1 = __webpack_require__(/*! ../AttributeDefinitions */ \"./src/AttributeDefinitions.ts\");\nvar DockLocation_1 = __webpack_require__(/*! ../DockLocation */ \"./src/DockLocation.ts\");\nvar DropInfo_1 = __webpack_require__(/*! ../DropInfo */ \"./src/DropInfo.ts\");\nvar Orientation_1 = __webpack_require__(/*! ../Orientation */ \"./src/Orientation.ts\");\nvar Rect_1 = __webpack_require__(/*! ../Rect */ \"./src/Rect.ts\");\nvar Node_1 = __webpack_require__(/*! ./Node */ \"./src/model/Node.ts\");\nvar SplitterNode_1 = __webpack_require__(/*! ./SplitterNode */ \"./src/model/SplitterNode.ts\");\nvar TabNode_1 = __webpack_require__(/*! ./TabNode */ \"./src/model/TabNode.ts\");\nvar Utils_1 = __webpack_require__(/*! ./Utils */ \"./src/model/Utils.ts\");\nvar BorderNode = /** @class */ (function (_super) {\n    __extends(BorderNode, _super);\n    /** @hidden @internal */\n    function BorderNode(location, json, model) {\n        var _this = _super.call(this, model) || this;\n        /** @hidden @internal */\n        _this._adjustedSize = 0;\n        /** @hidden @internal */\n        _this._calculatedBorderBarSize = 0;\n        _this._location = location;\n        _this._drawChildren = [];\n        _this._attributes.id = \"border_\" + location.getName();\n        BorderNode._attributeDefinitions.fromJson(json, _this._attributes);\n        model._addNode(_this);\n        return _this;\n    }\n    /** @hidden @internal */\n    BorderNode._fromJson = function (json, model) {\n        var location = DockLocation_1.default.getByName(json.location);\n        var border = new BorderNode(location, json, model);\n        if (json.children) {\n            border._children = json.children.map(function (jsonChild) {\n                var child = TabNode_1.default._fromJson(jsonChild, model);\n                child._setParent(border);\n                return child;\n            });\n        }\n        return border;\n    };\n    /** @hidden @internal */\n    BorderNode._createAttributeDefinitions = function () {\n        var attributeDefinitions = new AttributeDefinitions_1.default();\n        attributeDefinitions.add(\"type\", BorderNode.TYPE, true).setType(Attribute_1.default.STRING).setFixed();\n        attributeDefinitions.add(\"selected\", -1).setType(Attribute_1.default.NUMBER);\n        attributeDefinitions.add(\"show\", true).setType(Attribute_1.default.BOOLEAN);\n        attributeDefinitions.add(\"config\", undefined).setType(\"any\");\n        attributeDefinitions.addInherited(\"barSize\", \"borderBarSize\").setType(Attribute_1.default.NUMBER);\n        attributeDefinitions.addInherited(\"enableDrop\", \"borderEnableDrop\").setType(Attribute_1.default.BOOLEAN);\n        attributeDefinitions.addInherited(\"className\", \"borderClassName\").setType(Attribute_1.default.STRING);\n        attributeDefinitions.addInherited(\"autoSelectTabWhenOpen\", \"borderAutoSelectTabWhenOpen\").setType(Attribute_1.default.BOOLEAN);\n        attributeDefinitions.addInherited(\"autoSelectTabWhenClosed\", \"borderAutoSelectTabWhenClosed\").setType(Attribute_1.default.BOOLEAN);\n        attributeDefinitions.addInherited(\"size\", \"borderSize\").setType(Attribute_1.default.NUMBER);\n        attributeDefinitions.addInherited(\"minSize\", \"borderMinSize\").setType(Attribute_1.default.NUMBER);\n        return attributeDefinitions;\n    };\n    BorderNode.prototype.getLocation = function () {\n        return this._location;\n    };\n    BorderNode.prototype.getTabHeaderRect = function () {\n        return this._tabHeaderRect;\n    };\n    BorderNode.prototype.getRect = function () {\n        return this._tabHeaderRect;\n    };\n    BorderNode.prototype.getContentRect = function () {\n        return this._contentRect;\n    };\n    BorderNode.prototype.isEnableDrop = function () {\n        return this._getAttr(\"enableDrop\");\n    };\n    BorderNode.prototype.isAutoSelectTab = function (whenOpen) {\n        if (whenOpen == null) {\n            whenOpen = this.getSelected() !== -1;\n        }\n        if (whenOpen) {\n            return this._getAttr(\"autoSelectTabWhenOpen\");\n        }\n        else {\n            return this._getAttr(\"autoSelectTabWhenClosed\");\n        }\n    };\n    BorderNode.prototype.getClassName = function () {\n        return this._getAttr(\"className\");\n    };\n    /** @hidden @internal */\n    BorderNode.prototype.calcBorderBarSize = function (metrics) {\n        var barSize = this._getAttr(\"barSize\");\n        if (barSize !== 0) {\n            // its defined\n            this._calculatedBorderBarSize = barSize;\n        }\n        else {\n            this._calculatedBorderBarSize = metrics.borderBarSize;\n        }\n    };\n    BorderNode.prototype.getBorderBarSize = function () {\n        return this._calculatedBorderBarSize;\n    };\n    BorderNode.prototype.getSize = function () {\n        var defaultSize = this._getAttr(\"size\");\n        var selected = this.getSelected();\n        if (selected === -1) {\n            return defaultSize;\n        }\n        else {\n            var tabNode = this._children[selected];\n            var tabBorderSize = (this._location._orientation === Orientation_1.default.HORZ) ? tabNode._getAttr(\"borderWidth\") : tabNode._getAttr(\"borderHeight\");\n            if (tabBorderSize === -1) {\n                return defaultSize;\n            }\n            else {\n                return tabBorderSize;\n            }\n        }\n    };\n    BorderNode.prototype.getMinSize = function () {\n        return this._getAttr(\"minSize\");\n    };\n    BorderNode.prototype.getSelected = function () {\n        return this._attributes.selected;\n    };\n    BorderNode.prototype.getSelectedNode = function () {\n        if (this.getSelected() !== -1) {\n            return this._children[this.getSelected()];\n        }\n        return undefined;\n    };\n    BorderNode.prototype.getOrientation = function () {\n        return this._location.getOrientation();\n    };\n    /**\n     * Returns the config attribute that can be used to store node specific data that\n     * WILL be saved to the json. The config attribute should be changed via the action Actions.updateNodeAttributes rather\n     * than directly, for example:\n     * this.state.model.doAction(\n     *   FlexLayout.Actions.updateNodeAttributes(node.getId(), {config:myConfigObject}));\n     */\n    BorderNode.prototype.getConfig = function () {\n        return this._attributes.config;\n    };\n    BorderNode.prototype.isMaximized = function () {\n        return false;\n    };\n    BorderNode.prototype.isShowing = function () {\n        return this._attributes.show;\n    };\n    /** @hidden @internal */\n    BorderNode.prototype._setSelected = function (index) {\n        this._attributes.selected = index;\n    };\n    /** @hidden @internal */\n    BorderNode.prototype._setSize = function (pos) {\n        var selected = this.getSelected();\n        if (selected === -1) {\n            this._attributes.size = pos;\n        }\n        else {\n            var tabNode = this._children[selected];\n            var tabBorderSize = (this._location._orientation === Orientation_1.default.HORZ) ? tabNode._getAttr(\"borderWidth\") : tabNode._getAttr(\"borderHeight\");\n            if (tabBorderSize === -1) {\n                this._attributes.size = pos;\n            }\n            else {\n                if (this._location._orientation === Orientation_1.default.HORZ) {\n                    tabNode._setBorderWidth(pos);\n                }\n                else {\n                    tabNode._setBorderHeight(pos);\n                }\n            }\n        }\n    };\n    /** @hidden @internal */\n    BorderNode.prototype._updateAttrs = function (json) {\n        BorderNode._attributeDefinitions.update(json, this._attributes);\n    };\n    /** @hidden @internal */\n    BorderNode.prototype._getDrawChildren = function () {\n        return this._drawChildren;\n    };\n    /** @hidden @internal */\n    BorderNode.prototype._setAdjustedSize = function (size) {\n        this._adjustedSize = size;\n    };\n    /** @hidden @internal */\n    BorderNode.prototype._getAdjustedSize = function () {\n        return this._adjustedSize;\n    };\n    /** @hidden @internal */\n    BorderNode.prototype._layoutBorderOuter = function (outer, metrics) {\n        this.calcBorderBarSize(metrics);\n        var split1 = this._location.split(outer, this.getBorderBarSize()); // split border outer\n        this._tabHeaderRect = split1.start;\n        return split1.end;\n    };\n    /** @hidden @internal */\n    BorderNode.prototype._layoutBorderInner = function (inner, metrics) {\n        var _this = this;\n        this._drawChildren = [];\n        var location = this._location;\n        var split1 = location.split(inner, this._adjustedSize + this._model.getSplitterSize()); // split off tab contents\n        var split2 = location.reflect().split(split1.start, this._model.getSplitterSize()); // split contents into content and splitter\n        this._contentRect = split2.end;\n        this._children.forEach(function (child, i) {\n            child._layout(_this._contentRect, metrics);\n            child._setVisible(i === _this.getSelected());\n            _this._drawChildren.push(child);\n        });\n        if (this.getSelected() === -1) {\n            return inner;\n        }\n        else {\n            var newSplitter = new SplitterNode_1.default(this._model);\n            newSplitter._setParent(this);\n            newSplitter._setRect(split2.start);\n            this._drawChildren.push(newSplitter);\n            return split1.end;\n        }\n    };\n    /** @hidden @internal */\n    BorderNode.prototype._remove = function (node) {\n        var removedIndex = this._removeChild(node);\n        if (this.getSelected() !== -1) {\n            Utils_1.adjustSelectedIndex(this, removedIndex);\n        }\n    };\n    /** @hidden @internal */\n    BorderNode.prototype.canDrop = function (dragNode, x, y) {\n        if (dragNode.getType() !== TabNode_1.default.TYPE) {\n            return undefined;\n        }\n        var dropInfo;\n        var dockLocation = DockLocation_1.default.CENTER;\n        if (this._tabHeaderRect.contains(x, y)) {\n            if (this._location._orientation === Orientation_1.default.VERT) {\n                if (this._children.length > 0) {\n                    var child = this._children[0];\n                    var childRect = child.getTabRect();\n                    var childY = childRect.y;\n                    var childHeight = childRect.height;\n                    var pos = this._tabHeaderRect.x;\n                    var childCenter = 0;\n                    for (var i = 0; i < this._children.length; i++) {\n                        child = this._children[i];\n                        childRect = child.getTabRect();\n                        childCenter = childRect.x + childRect.width / 2;\n                        if (x >= pos && x < childCenter) {\n                            var outlineRect = new Rect_1.default(childRect.x - 2, childY, 3, childHeight);\n                            dropInfo = new DropInfo_1.default(this, outlineRect, dockLocation, i, \"flexlayout__outline_rect\");\n                            break;\n                        }\n                        pos = childCenter;\n                    }\n                    if (dropInfo == null) {\n                        var outlineRect = new Rect_1.default(childRect.getRight() - 2, childY, 3, childHeight);\n                        dropInfo = new DropInfo_1.default(this, outlineRect, dockLocation, this._children.length, \"flexlayout__outline_rect\");\n                    }\n                }\n                else {\n                    var outlineRect = new Rect_1.default(this._tabHeaderRect.x + 1, this._tabHeaderRect.y + 2, 3, 18);\n                    dropInfo = new DropInfo_1.default(this, outlineRect, dockLocation, 0, \"flexlayout__outline_rect\");\n                }\n            }\n            else {\n                if (this._children.length > 0) {\n                    var child = this._children[0];\n                    var childRect = child.getTabRect();\n                    var childX = childRect.x;\n                    var childWidth = childRect.width;\n                    var pos = this._tabHeaderRect.y;\n                    var childCenter = 0;\n                    for (var i = 0; i < this._children.length; i++) {\n                        child = this._children[i];\n                        childRect = child.getTabRect();\n                        childCenter = childRect.y + childRect.height / 2;\n                        if (y >= pos && y < childCenter) {\n                            var outlineRect = new Rect_1.default(childX, childRect.y - 2, childWidth, 3);\n                            dropInfo = new DropInfo_1.default(this, outlineRect, dockLocation, i, \"flexlayout__outline_rect\");\n                            break;\n                        }\n                        pos = childCenter;\n                    }\n                    if (dropInfo == null) {\n                        var outlineRect = new Rect_1.default(childX, childRect.getBottom() - 2, childWidth, 3);\n                        dropInfo = new DropInfo_1.default(this, outlineRect, dockLocation, this._children.length, \"flexlayout__outline_rect\");\n                    }\n                }\n                else {\n                    var outlineRect = new Rect_1.default(this._tabHeaderRect.x + 2, this._tabHeaderRect.y + 1, 18, 3);\n                    dropInfo = new DropInfo_1.default(this, outlineRect, dockLocation, 0, \"flexlayout__outline_rect\");\n                }\n            }\n            if (!dragNode._canDockInto(dragNode, dropInfo)) {\n                return undefined;\n            }\n        }\n        else if (this.getSelected() !== -1 && this._contentRect.contains(x, y)) {\n            var outlineRect = this._contentRect;\n            dropInfo = new DropInfo_1.default(this, outlineRect, dockLocation, -1, \"flexlayout__outline_rect\");\n            if (!dragNode._canDockInto(dragNode, dropInfo)) {\n                return undefined;\n            }\n        }\n        return dropInfo;\n    };\n    /** @hidden @internal */\n    BorderNode.prototype.drop = function (dragNode, location, index, select) {\n        var fromIndex = 0;\n        var dragParent = dragNode.getParent();\n        if (dragParent !== undefined) {\n            fromIndex = dragParent._removeChild(dragNode);\n            Utils_1.adjustSelectedIndex(dragParent, fromIndex);\n        }\n        // if dropping a tab back to same tabset and moving to forward position then reduce insertion index\n        if (dragNode.getType() === TabNode_1.default.TYPE && dragParent === this && fromIndex < index && index > 0) {\n            index--;\n        }\n        // simple_bundled dock to existing tabset\n        var insertPos = index;\n        if (insertPos === -1) {\n            insertPos = this._children.length;\n        }\n        if (dragNode.getType() === TabNode_1.default.TYPE) {\n            this._addChild(dragNode, insertPos);\n        }\n        if (select || (select !== false && this.isAutoSelectTab())) {\n            this._setSelected(insertPos);\n        }\n        this._model._tidy();\n    };\n    BorderNode.prototype.toJson = function () {\n        var json = {};\n        BorderNode._attributeDefinitions.toJson(json, this._attributes);\n        json.location = this._location.getName();\n        json.children = this._children.map(function (child) { return child.toJson(); });\n        return json;\n    };\n    /** @hidden @internal */\n    BorderNode.prototype._getSplitterBounds = function (splitter, useMinSize) {\n        if (useMinSize === void 0) { useMinSize = false; }\n        var pBounds = [0, 0];\n        var minSize = useMinSize ? this.getMinSize() : 0;\n        var outerRect = this._model._getOuterInnerRects().outer;\n        var innerRect = this._model._getOuterInnerRects().inner;\n        var rootRow = this._model.getRoot();\n        if (this._location === DockLocation_1.default.TOP) {\n            pBounds[0] = outerRect.y + minSize;\n            pBounds[1] = Math.max(pBounds[0], innerRect.getBottom() - splitter.getHeight() - rootRow.getMinHeight());\n        }\n        else if (this._location === DockLocation_1.default.LEFT) {\n            pBounds[0] = outerRect.x + minSize;\n            pBounds[1] = Math.max(pBounds[0], innerRect.getRight() - splitter.getWidth() - rootRow.getMinWidth());\n        }\n        else if (this._location === DockLocation_1.default.BOTTOM) {\n            pBounds[1] = outerRect.getBottom() - splitter.getHeight() - minSize;\n            pBounds[0] = Math.min(pBounds[1], innerRect.y + rootRow.getMinHeight());\n        }\n        else if (this._location === DockLocation_1.default.RIGHT) {\n            pBounds[1] = outerRect.getRight() - splitter.getWidth() - minSize;\n            pBounds[0] = Math.min(pBounds[1], innerRect.x + rootRow.getMinWidth());\n        }\n        return pBounds;\n    };\n    /** @hidden @internal */\n    BorderNode.prototype._calculateSplit = function (splitter, splitterPos) {\n        var pBounds = this._getSplitterBounds(splitter);\n        if (this._location === DockLocation_1.default.BOTTOM || this._location === DockLocation_1.default.RIGHT) {\n            return Math.max(0, pBounds[1] - splitterPos);\n        }\n        else {\n            return Math.max(0, splitterPos - pBounds[0]);\n        }\n    };\n    /** @hidden @internal */\n    BorderNode.prototype._getAttributeDefinitions = function () {\n        return BorderNode._attributeDefinitions;\n    };\n    /** @hidden @internal */\n    BorderNode.getAttributeDefinitions = function () {\n        return BorderNode._attributeDefinitions;\n    };\n    BorderNode.TYPE = \"border\";\n    /** @hidden @internal */\n    BorderNode._attributeDefinitions = BorderNode._createAttributeDefinitions();\n    return BorderNode;\n}(Node_1.default));\nexports.default = BorderNode;\n\n\n//# sourceURL=webpack://FlexLayout/./src/model/BorderNode.ts?");
+eval("\nvar __extends = (this && this.__extends) || (function () {\n    var extendStatics = function (d, b) {\n        extendStatics = Object.setPrototypeOf ||\n            ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||\n            function (d, b) { for (var p in b) if (Object.prototype.hasOwnProperty.call(b, p)) d[p] = b[p]; };\n        return extendStatics(d, b);\n    };\n    return function (d, b) {\n        if (typeof b !== \"function\" && b !== null)\n            throw new TypeError(\"Class extends value \" + String(b) + \" is not a constructor or null\");\n        extendStatics(d, b);\n        function __() { this.constructor = d; }\n        d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());\n    };\n})();\nObject.defineProperty(exports, \"__esModule\", { value: true });\nvar Attribute_1 = __webpack_require__(/*! ../Attribute */ \"./src/Attribute.ts\");\nvar AttributeDefinitions_1 = __webpack_require__(/*! ../AttributeDefinitions */ \"./src/AttributeDefinitions.ts\");\nvar DockLocation_1 = __webpack_require__(/*! ../DockLocation */ \"./src/DockLocation.ts\");\nvar DropInfo_1 = __webpack_require__(/*! ../DropInfo */ \"./src/DropInfo.ts\");\nvar Orientation_1 = __webpack_require__(/*! ../Orientation */ \"./src/Orientation.ts\");\nvar Rect_1 = __webpack_require__(/*! ../Rect */ \"./src/Rect.ts\");\nvar Types_1 = __webpack_require__(/*! ../Types */ \"./src/Types.ts\");\nvar Node_1 = __webpack_require__(/*! ./Node */ \"./src/model/Node.ts\");\nvar SplitterNode_1 = __webpack_require__(/*! ./SplitterNode */ \"./src/model/SplitterNode.ts\");\nvar TabNode_1 = __webpack_require__(/*! ./TabNode */ \"./src/model/TabNode.ts\");\nvar Utils_1 = __webpack_require__(/*! ./Utils */ \"./src/model/Utils.ts\");\nvar BorderNode = /** @class */ (function (_super) {\n    __extends(BorderNode, _super);\n    /** @hidden @internal */\n    function BorderNode(location, json, model) {\n        var _this = _super.call(this, model) || this;\n        /** @hidden @internal */\n        _this._adjustedSize = 0;\n        /** @hidden @internal */\n        _this._calculatedBorderBarSize = 0;\n        _this._location = location;\n        _this._drawChildren = [];\n        _this._attributes.id = \"border_\" + location.getName();\n        BorderNode._attributeDefinitions.fromJson(json, _this._attributes);\n        model._addNode(_this);\n        return _this;\n    }\n    /** @hidden @internal */\n    BorderNode._fromJson = function (json, model) {\n        var location = DockLocation_1.default.getByName(json.location);\n        var border = new BorderNode(location, json, model);\n        if (json.children) {\n            border._children = json.children.map(function (jsonChild) {\n                var child = TabNode_1.default._fromJson(jsonChild, model);\n                child._setParent(border);\n                return child;\n            });\n        }\n        return border;\n    };\n    /** @hidden @internal */\n    BorderNode._createAttributeDefinitions = function () {\n        var attributeDefinitions = new AttributeDefinitions_1.default();\n        attributeDefinitions.add(\"type\", BorderNode.TYPE, true).setType(Attribute_1.default.STRING).setFixed();\n        attributeDefinitions.add(\"selected\", -1).setType(Attribute_1.default.NUMBER);\n        attributeDefinitions.add(\"show\", true).setType(Attribute_1.default.BOOLEAN);\n        attributeDefinitions.add(\"config\", undefined).setType(\"any\");\n        attributeDefinitions.addInherited(\"barSize\", \"borderBarSize\").setType(Attribute_1.default.NUMBER);\n        attributeDefinitions.addInherited(\"enableDrop\", \"borderEnableDrop\").setType(Attribute_1.default.BOOLEAN);\n        attributeDefinitions.addInherited(\"className\", \"borderClassName\").setType(Attribute_1.default.STRING);\n        attributeDefinitions.addInherited(\"autoSelectTabWhenOpen\", \"borderAutoSelectTabWhenOpen\").setType(Attribute_1.default.BOOLEAN);\n        attributeDefinitions.addInherited(\"autoSelectTabWhenClosed\", \"borderAutoSelectTabWhenClosed\").setType(Attribute_1.default.BOOLEAN);\n        attributeDefinitions.addInherited(\"size\", \"borderSize\").setType(Attribute_1.default.NUMBER);\n        attributeDefinitions.addInherited(\"minSize\", \"borderMinSize\").setType(Attribute_1.default.NUMBER);\n        attributeDefinitions.addInherited(\"enableAutoHide\", \"borderEnableAutoHide\").setType(Attribute_1.default.BOOLEAN);\n        return attributeDefinitions;\n    };\n    BorderNode.prototype.getLocation = function () {\n        return this._location;\n    };\n    BorderNode.prototype.getTabHeaderRect = function () {\n        return this._tabHeaderRect;\n    };\n    BorderNode.prototype.getRect = function () {\n        return this._tabHeaderRect;\n    };\n    BorderNode.prototype.getContentRect = function () {\n        return this._contentRect;\n    };\n    BorderNode.prototype.isEnableDrop = function () {\n        return this._getAttr(\"enableDrop\");\n    };\n    BorderNode.prototype.isAutoSelectTab = function (whenOpen) {\n        if (whenOpen == null) {\n            whenOpen = this.getSelected() !== -1;\n        }\n        if (whenOpen) {\n            return this._getAttr(\"autoSelectTabWhenOpen\");\n        }\n        else {\n            return this._getAttr(\"autoSelectTabWhenClosed\");\n        }\n    };\n    BorderNode.prototype.getClassName = function () {\n        return this._getAttr(\"className\");\n    };\n    /** @hidden @internal */\n    BorderNode.prototype.calcBorderBarSize = function (metrics) {\n        var barSize = this._getAttr(\"barSize\");\n        if (barSize !== 0) {\n            // its defined\n            this._calculatedBorderBarSize = barSize;\n        }\n        else {\n            this._calculatedBorderBarSize = metrics.borderBarSize;\n        }\n    };\n    BorderNode.prototype.getBorderBarSize = function () {\n        return this._calculatedBorderBarSize;\n    };\n    BorderNode.prototype.getSize = function () {\n        var defaultSize = this._getAttr(\"size\");\n        var selected = this.getSelected();\n        if (selected === -1) {\n            return defaultSize;\n        }\n        else {\n            var tabNode = this._children[selected];\n            var tabBorderSize = (this._location._orientation === Orientation_1.default.HORZ) ? tabNode._getAttr(\"borderWidth\") : tabNode._getAttr(\"borderHeight\");\n            if (tabBorderSize === -1) {\n                return defaultSize;\n            }\n            else {\n                return tabBorderSize;\n            }\n        }\n    };\n    BorderNode.prototype.getMinSize = function () {\n        return this._getAttr(\"minSize\");\n    };\n    BorderNode.prototype.getSelected = function () {\n        return this._attributes.selected;\n    };\n    BorderNode.prototype.getSelectedNode = function () {\n        if (this.getSelected() !== -1) {\n            return this._children[this.getSelected()];\n        }\n        return undefined;\n    };\n    BorderNode.prototype.getOrientation = function () {\n        return this._location.getOrientation();\n    };\n    /**\n     * Returns the config attribute that can be used to store node specific data that\n     * WILL be saved to the json. The config attribute should be changed via the action Actions.updateNodeAttributes rather\n     * than directly, for example:\n     * this.state.model.doAction(\n     *   FlexLayout.Actions.updateNodeAttributes(node.getId(), {config:myConfigObject}));\n     */\n    BorderNode.prototype.getConfig = function () {\n        return this._attributes.config;\n    };\n    BorderNode.prototype.isMaximized = function () {\n        return false;\n    };\n    BorderNode.prototype.isShowing = function () {\n        var show = this._attributes.show;\n        if (show) {\n            if (this._model._getShowHiddenBorder() !== this._location && this.isAutoHide() && this._children.length === 0) {\n                return false;\n            }\n            return true;\n        }\n        else {\n            return false;\n        }\n    };\n    BorderNode.prototype.isAutoHide = function () {\n        return this._getAttr(\"enableAutoHide\");\n    };\n    /** @hidden @internal */\n    BorderNode.prototype._setSelected = function (index) {\n        this._attributes.selected = index;\n    };\n    /** @hidden @internal */\n    BorderNode.prototype._setSize = function (pos) {\n        var selected = this.getSelected();\n        if (selected === -1) {\n            this._attributes.size = pos;\n        }\n        else {\n            var tabNode = this._children[selected];\n            var tabBorderSize = (this._location._orientation === Orientation_1.default.HORZ) ? tabNode._getAttr(\"borderWidth\") : tabNode._getAttr(\"borderHeight\");\n            if (tabBorderSize === -1) {\n                this._attributes.size = pos;\n            }\n            else {\n                if (this._location._orientation === Orientation_1.default.HORZ) {\n                    tabNode._setBorderWidth(pos);\n                }\n                else {\n                    tabNode._setBorderHeight(pos);\n                }\n            }\n        }\n    };\n    /** @hidden @internal */\n    BorderNode.prototype._updateAttrs = function (json) {\n        BorderNode._attributeDefinitions.update(json, this._attributes);\n    };\n    /** @hidden @internal */\n    BorderNode.prototype._getDrawChildren = function () {\n        return this._drawChildren;\n    };\n    /** @hidden @internal */\n    BorderNode.prototype._setAdjustedSize = function (size) {\n        this._adjustedSize = size;\n    };\n    /** @hidden @internal */\n    BorderNode.prototype._getAdjustedSize = function () {\n        return this._adjustedSize;\n    };\n    /** @hidden @internal */\n    BorderNode.prototype._layoutBorderOuter = function (outer, metrics) {\n        this.calcBorderBarSize(metrics);\n        var split1 = this._location.split(outer, this.getBorderBarSize()); // split border outer\n        this._tabHeaderRect = split1.start;\n        return split1.end;\n    };\n    /** @hidden @internal */\n    BorderNode.prototype._layoutBorderInner = function (inner, metrics) {\n        var _this = this;\n        this._drawChildren = [];\n        var location = this._location;\n        var split1 = location.split(inner, this._adjustedSize + this._model.getSplitterSize()); // split off tab contents\n        var split2 = location.reflect().split(split1.start, this._model.getSplitterSize()); // split contents into content and splitter\n        this._contentRect = split2.end;\n        this._children.forEach(function (child, i) {\n            child._layout(_this._contentRect, metrics);\n            child._setVisible(i === _this.getSelected());\n            _this._drawChildren.push(child);\n        });\n        if (this.getSelected() === -1) {\n            return inner;\n        }\n        else {\n            var newSplitter = new SplitterNode_1.default(this._model);\n            newSplitter._setParent(this);\n            newSplitter._setRect(split2.start);\n            this._drawChildren.push(newSplitter);\n            return split1.end;\n        }\n    };\n    /** @hidden @internal */\n    BorderNode.prototype._remove = function (node) {\n        var removedIndex = this._removeChild(node);\n        if (this.getSelected() !== -1) {\n            Utils_1.adjustSelectedIndex(this, removedIndex);\n        }\n    };\n    /** @hidden @internal */\n    BorderNode.prototype.canDrop = function (dragNode, x, y) {\n        if (dragNode.getType() !== TabNode_1.default.TYPE) {\n            return undefined;\n        }\n        var dropInfo;\n        var dockLocation = DockLocation_1.default.CENTER;\n        if (this._tabHeaderRect.contains(x, y)) {\n            if (this._location._orientation === Orientation_1.default.VERT) {\n                if (this._children.length > 0) {\n                    var child = this._children[0];\n                    var childRect = child.getTabRect();\n                    var childY = childRect.y;\n                    var childHeight = childRect.height;\n                    var pos = this._tabHeaderRect.x;\n                    var childCenter = 0;\n                    for (var i = 0; i < this._children.length; i++) {\n                        child = this._children[i];\n                        childRect = child.getTabRect();\n                        childCenter = childRect.x + childRect.width / 2;\n                        if (x >= pos && x < childCenter) {\n                            var outlineRect = new Rect_1.default(childRect.x - 2, childY, 3, childHeight);\n                            dropInfo = new DropInfo_1.default(this, outlineRect, dockLocation, i, Types_1.CLASSES.FLEXLAYOUT__OUTLINE_RECT);\n                            break;\n                        }\n                        pos = childCenter;\n                    }\n                    if (dropInfo == null) {\n                        var outlineRect = new Rect_1.default(childRect.getRight() - 2, childY, 3, childHeight);\n                        dropInfo = new DropInfo_1.default(this, outlineRect, dockLocation, this._children.length, Types_1.CLASSES.FLEXLAYOUT__OUTLINE_RECT);\n                    }\n                }\n                else {\n                    var outlineRect = new Rect_1.default(this._tabHeaderRect.x + 1, this._tabHeaderRect.y + 2, 3, 18);\n                    dropInfo = new DropInfo_1.default(this, outlineRect, dockLocation, 0, Types_1.CLASSES.FLEXLAYOUT__OUTLINE_RECT);\n                }\n            }\n            else {\n                if (this._children.length > 0) {\n                    var child = this._children[0];\n                    var childRect = child.getTabRect();\n                    var childX = childRect.x;\n                    var childWidth = childRect.width;\n                    var pos = this._tabHeaderRect.y;\n                    var childCenter = 0;\n                    for (var i = 0; i < this._children.length; i++) {\n                        child = this._children[i];\n                        childRect = child.getTabRect();\n                        childCenter = childRect.y + childRect.height / 2;\n                        if (y >= pos && y < childCenter) {\n                            var outlineRect = new Rect_1.default(childX, childRect.y - 2, childWidth, 3);\n                            dropInfo = new DropInfo_1.default(this, outlineRect, dockLocation, i, Types_1.CLASSES.FLEXLAYOUT__OUTLINE_RECT);\n                            break;\n                        }\n                        pos = childCenter;\n                    }\n                    if (dropInfo == null) {\n                        var outlineRect = new Rect_1.default(childX, childRect.getBottom() - 2, childWidth, 3);\n                        dropInfo = new DropInfo_1.default(this, outlineRect, dockLocation, this._children.length, Types_1.CLASSES.FLEXLAYOUT__OUTLINE_RECT);\n                    }\n                }\n                else {\n                    var outlineRect = new Rect_1.default(this._tabHeaderRect.x + 2, this._tabHeaderRect.y + 1, 18, 3);\n                    dropInfo = new DropInfo_1.default(this, outlineRect, dockLocation, 0, Types_1.CLASSES.FLEXLAYOUT__OUTLINE_RECT);\n                }\n            }\n            if (!dragNode._canDockInto(dragNode, dropInfo)) {\n                return undefined;\n            }\n        }\n        else if (this.getSelected() !== -1 && this._contentRect.contains(x, y)) {\n            var outlineRect = this._contentRect;\n            dropInfo = new DropInfo_1.default(this, outlineRect, dockLocation, -1, Types_1.CLASSES.FLEXLAYOUT__OUTLINE_RECT);\n            if (!dragNode._canDockInto(dragNode, dropInfo)) {\n                return undefined;\n            }\n        }\n        return dropInfo;\n    };\n    /** @hidden @internal */\n    BorderNode.prototype.drop = function (dragNode, location, index, select) {\n        var fromIndex = 0;\n        var dragParent = dragNode.getParent();\n        if (dragParent !== undefined) {\n            fromIndex = dragParent._removeChild(dragNode);\n            Utils_1.adjustSelectedIndex(dragParent, fromIndex);\n        }\n        // if dropping a tab back to same tabset and moving to forward position then reduce insertion index\n        if (dragNode.getType() === TabNode_1.default.TYPE && dragParent === this && fromIndex < index && index > 0) {\n            index--;\n        }\n        // simple_bundled dock to existing tabset\n        var insertPos = index;\n        if (insertPos === -1) {\n            insertPos = this._children.length;\n        }\n        if (dragNode.getType() === TabNode_1.default.TYPE) {\n            this._addChild(dragNode, insertPos);\n        }\n        if (select || (select !== false && this.isAutoSelectTab())) {\n            this._setSelected(insertPos);\n        }\n        this._model._tidy();\n    };\n    BorderNode.prototype.toJson = function () {\n        var json = {};\n        BorderNode._attributeDefinitions.toJson(json, this._attributes);\n        json.location = this._location.getName();\n        json.children = this._children.map(function (child) { return child.toJson(); });\n        return json;\n    };\n    /** @hidden @internal */\n    BorderNode.prototype._getSplitterBounds = function (splitter, useMinSize) {\n        if (useMinSize === void 0) { useMinSize = false; }\n        var pBounds = [0, 0];\n        var minSize = useMinSize ? this.getMinSize() : 0;\n        var outerRect = this._model._getOuterInnerRects().outer;\n        var innerRect = this._model._getOuterInnerRects().inner;\n        var rootRow = this._model.getRoot();\n        if (this._location === DockLocation_1.default.TOP) {\n            pBounds[0] = outerRect.y + minSize;\n            pBounds[1] = Math.max(pBounds[0], innerRect.getBottom() - splitter.getHeight() - rootRow.getMinHeight());\n        }\n        else if (this._location === DockLocation_1.default.LEFT) {\n            pBounds[0] = outerRect.x + minSize;\n            pBounds[1] = Math.max(pBounds[0], innerRect.getRight() - splitter.getWidth() - rootRow.getMinWidth());\n        }\n        else if (this._location === DockLocation_1.default.BOTTOM) {\n            pBounds[1] = outerRect.getBottom() - splitter.getHeight() - minSize;\n            pBounds[0] = Math.min(pBounds[1], innerRect.y + rootRow.getMinHeight());\n        }\n        else if (this._location === DockLocation_1.default.RIGHT) {\n            pBounds[1] = outerRect.getRight() - splitter.getWidth() - minSize;\n            pBounds[0] = Math.min(pBounds[1], innerRect.x + rootRow.getMinWidth());\n        }\n        return pBounds;\n    };\n    /** @hidden @internal */\n    BorderNode.prototype._calculateSplit = function (splitter, splitterPos) {\n        var pBounds = this._getSplitterBounds(splitter);\n        if (this._location === DockLocation_1.default.BOTTOM || this._location === DockLocation_1.default.RIGHT) {\n            return Math.max(0, pBounds[1] - splitterPos);\n        }\n        else {\n            return Math.max(0, splitterPos - pBounds[0]);\n        }\n    };\n    /** @hidden @internal */\n    BorderNode.prototype._getAttributeDefinitions = function () {\n        return BorderNode._attributeDefinitions;\n    };\n    /** @hidden @internal */\n    BorderNode.getAttributeDefinitions = function () {\n        return BorderNode._attributeDefinitions;\n    };\n    BorderNode.TYPE = \"border\";\n    /** @hidden @internal */\n    BorderNode._attributeDefinitions = BorderNode._createAttributeDefinitions();\n    return BorderNode;\n}(Node_1.default));\nexports.default = BorderNode;\n\n\n//# sourceURL=webpack://FlexLayout/./src/model/BorderNode.ts?");
 
 /***/ }),
 
@@ -452,7 +452,7 @@ eval("\nvar __extends = (this && this.__extends) || (function () {\n    var exte
 /***/ (function(module, exports, __webpack_require__) {
 
 "use strict";
-eval("\nObject.defineProperty(exports, \"__esModule\", { value: true });\nvar Orientation_1 = __webpack_require__(/*! ../Orientation */ \"./src/Orientation.ts\");\nvar BorderNode_1 = __webpack_require__(/*! ./BorderNode */ \"./src/model/BorderNode.ts\");\nvar BorderSet = /** @class */ (function () {\n    /** @hidden @internal */\n    function BorderSet(model) {\n        this._model = model;\n        this._borders = [];\n    }\n    /** @hidden @internal */\n    BorderSet._fromJson = function (json, model) {\n        var borderSet = new BorderSet(model);\n        borderSet._borders = json.map(function (borderJson) { return BorderNode_1.default._fromJson(borderJson, model); });\n        return borderSet;\n    };\n    BorderSet.prototype.getBorders = function () {\n        return this._borders;\n    };\n    /** @hidden @internal */\n    BorderSet.prototype._forEachNode = function (fn) {\n        this._borders.forEach(function (borderNode) {\n            fn(borderNode, 0);\n            borderNode.getChildren().forEach(function (node) {\n                node._forEachNode(fn, 1);\n            });\n        });\n    };\n    /** @hidden @internal */\n    BorderSet.prototype._toJson = function () {\n        return this._borders.map(function (borderNode) { return borderNode.toJson(); });\n    };\n    /** @hidden @internal */\n    BorderSet.prototype._layoutBorder = function (outerInnerRects, metrics) {\n        var rect = outerInnerRects.outer;\n        var rootRow = this._model.getRoot();\n        var height = Math.max(0, rect.height - rootRow.getMinHeight());\n        var width = Math.max(0, rect.width - rootRow.getMinWidth());\n        var sumHeight = 0;\n        var sumWidth = 0;\n        var adjustableHeight = 0;\n        var adjustableWidth = 0;\n        var showingBorders = this._borders.filter(function (border) { return border.isShowing(); });\n        // sum size of borders to see they will fit\n        for (var _i = 0, showingBorders_1 = showingBorders; _i < showingBorders_1.length; _i++) {\n            var border = showingBorders_1[_i];\n            if (border.isShowing()) {\n                border._setAdjustedSize(border.getSize());\n                var visible = border.getSelected() !== -1;\n                if (border.getLocation().getOrientation() === Orientation_1.default.HORZ) {\n                    sumWidth += border.getBorderBarSize();\n                    if (visible) {\n                        width -= this._model.getSplitterSize();\n                        sumWidth += border.getSize();\n                        adjustableWidth += border.getSize();\n                    }\n                }\n                else {\n                    sumHeight += border.getBorderBarSize();\n                    if (visible) {\n                        height -= this._model.getSplitterSize();\n                        sumHeight += border.getSize();\n                        adjustableHeight += border.getSize();\n                    }\n                }\n            }\n        }\n        // adjust border sizes if too large\n        var j = 0;\n        var adjusted = false;\n        while ((sumWidth > width && adjustableWidth > 0) || (sumHeight > height && adjustableHeight > 0)) {\n            var border = showingBorders[j];\n            if (border.getSelected() !== -1) {\n                // visible\n                var size = border._getAdjustedSize();\n                if (sumWidth > width && adjustableWidth > 0 && border.getLocation().getOrientation() === Orientation_1.default.HORZ && size > 0\n                    && size > border.getMinSize()) {\n                    border._setAdjustedSize(size - 1);\n                    sumWidth--;\n                    adjustableWidth--;\n                    adjusted = true;\n                }\n                else if (sumHeight > height && adjustableHeight > 0 && border.getLocation().getOrientation() === Orientation_1.default.VERT && size > 0\n                    && size > border.getMinSize()) {\n                    border._setAdjustedSize(size - 1);\n                    sumHeight--;\n                    adjustableHeight--;\n                    adjusted = true;\n                }\n            }\n            j = (j + 1) % showingBorders.length;\n            if (j === 0) {\n                if (adjusted) {\n                    adjusted = false;\n                }\n                else {\n                    break;\n                }\n            }\n        }\n        showingBorders.forEach(function (border) {\n            outerInnerRects.outer = border._layoutBorderOuter(outerInnerRects.outer, metrics);\n        });\n        outerInnerRects.inner = outerInnerRects.outer;\n        showingBorders.forEach(function (border) {\n            outerInnerRects.inner = border._layoutBorderInner(outerInnerRects.inner, metrics);\n        });\n        return outerInnerRects;\n    };\n    /** @hidden @internal */\n    BorderSet.prototype._findDropTargetNode = function (dragNode, x, y) {\n        for (var _i = 0, _a = this._borders; _i < _a.length; _i++) {\n            var border = _a[_i];\n            if (border.isShowing()) {\n                var dropInfo = border.canDrop(dragNode, x, y);\n                if (dropInfo !== undefined) {\n                    return dropInfo;\n                }\n            }\n        }\n        return undefined;\n    };\n    return BorderSet;\n}());\nexports.default = BorderSet;\n\n\n//# sourceURL=webpack://FlexLayout/./src/model/BorderSet.ts?");
+eval("\nObject.defineProperty(exports, \"__esModule\", { value: true });\nvar Orientation_1 = __webpack_require__(/*! ../Orientation */ \"./src/Orientation.ts\");\nvar BorderNode_1 = __webpack_require__(/*! ./BorderNode */ \"./src/model/BorderNode.ts\");\nvar BorderSet = /** @class */ (function () {\n    /** @hidden @internal */\n    function BorderSet(model) {\n        this._model = model;\n        this._borders = [];\n    }\n    /** @hidden @internal */\n    BorderSet._fromJson = function (json, model) {\n        var borderSet = new BorderSet(model);\n        borderSet._borders = json.map(function (borderJson) { return BorderNode_1.default._fromJson(borderJson, model); });\n        return borderSet;\n    };\n    BorderSet.prototype.getBorders = function () {\n        return this._borders;\n    };\n    /** @hidden @internal */\n    BorderSet.prototype._forEachNode = function (fn) {\n        this._borders.forEach(function (borderNode) {\n            fn(borderNode, 0);\n            borderNode.getChildren().forEach(function (node) {\n                node._forEachNode(fn, 1);\n            });\n        });\n    };\n    /** @hidden @internal */\n    BorderSet.prototype._toJson = function () {\n        return this._borders.map(function (borderNode) { return borderNode.toJson(); });\n    };\n    /** @hidden @internal */\n    BorderSet.prototype._layoutBorder = function (outerInnerRects, metrics) {\n        var rect = outerInnerRects.outer;\n        var rootRow = this._model.getRoot();\n        var height = Math.max(0, rect.height - rootRow.getMinHeight());\n        var width = Math.max(0, rect.width - rootRow.getMinWidth());\n        var sumHeight = 0;\n        var sumWidth = 0;\n        var adjustableHeight = 0;\n        var adjustableWidth = 0;\n        var showingBorders = this._borders.filter(function (border) { return border.isShowing(); });\n        // sum size of borders to see they will fit\n        for (var _i = 0, showingBorders_1 = showingBorders; _i < showingBorders_1.length; _i++) {\n            var border = showingBorders_1[_i];\n            border._setAdjustedSize(border.getSize());\n            var visible = border.getSelected() !== -1;\n            if (border.getLocation().getOrientation() === Orientation_1.default.HORZ) {\n                sumWidth += border.getBorderBarSize();\n                if (visible) {\n                    width -= this._model.getSplitterSize();\n                    sumWidth += border.getSize();\n                    adjustableWidth += border.getSize();\n                }\n            }\n            else {\n                sumHeight += border.getBorderBarSize();\n                if (visible) {\n                    height -= this._model.getSplitterSize();\n                    sumHeight += border.getSize();\n                    adjustableHeight += border.getSize();\n                }\n            }\n        }\n        // adjust border sizes if too large\n        var j = 0;\n        var adjusted = false;\n        while ((sumWidth > width && adjustableWidth > 0) || (sumHeight > height && adjustableHeight > 0)) {\n            var border = showingBorders[j];\n            if (border.getSelected() !== -1) {\n                // visible\n                var size = border._getAdjustedSize();\n                if (sumWidth > width && adjustableWidth > 0 && border.getLocation().getOrientation() === Orientation_1.default.HORZ && size > 0\n                    && size > border.getMinSize()) {\n                    border._setAdjustedSize(size - 1);\n                    sumWidth--;\n                    adjustableWidth--;\n                    adjusted = true;\n                }\n                else if (sumHeight > height && adjustableHeight > 0 && border.getLocation().getOrientation() === Orientation_1.default.VERT && size > 0\n                    && size > border.getMinSize()) {\n                    border._setAdjustedSize(size - 1);\n                    sumHeight--;\n                    adjustableHeight--;\n                    adjusted = true;\n                }\n            }\n            j = (j + 1) % showingBorders.length;\n            if (j === 0) {\n                if (adjusted) {\n                    adjusted = false;\n                }\n                else {\n                    break;\n                }\n            }\n        }\n        showingBorders.forEach(function (border) {\n            outerInnerRects.outer = border._layoutBorderOuter(outerInnerRects.outer, metrics);\n        });\n        outerInnerRects.inner = outerInnerRects.outer;\n        showingBorders.forEach(function (border) {\n            outerInnerRects.inner = border._layoutBorderInner(outerInnerRects.inner, metrics);\n        });\n        return outerInnerRects;\n    };\n    /** @hidden @internal */\n    BorderSet.prototype._findDropTargetNode = function (dragNode, x, y) {\n        for (var _i = 0, _a = this._borders; _i < _a.length; _i++) {\n            var border = _a[_i];\n            if (border.isShowing()) {\n                var dropInfo = border.canDrop(dragNode, x, y);\n                if (dropInfo !== undefined) {\n                    return dropInfo;\n                }\n            }\n        }\n        return undefined;\n    };\n    return BorderSet;\n}());\nexports.default = BorderSet;\n\n\n//# sourceURL=webpack://FlexLayout/./src/model/BorderSet.ts?");
 
 /***/ }),
 
@@ -476,7 +476,7 @@ eval("\nObject.defineProperty(exports, \"__esModule\", { value: true });\nexport
 /***/ (function(module, exports, __webpack_require__) {
 
 "use strict";
-eval("\nvar __spreadArray = (this && this.__spreadArray) || function (to, from) {\n    for (var i = 0, il = from.length, j = to.length; i < il; i++, j++)\n        to[j] = from[i];\n    return to;\n};\nObject.defineProperty(exports, \"__esModule\", { value: true });\nvar Attribute_1 = __webpack_require__(/*! ../Attribute */ \"./src/Attribute.ts\");\nvar AttributeDefinitions_1 = __webpack_require__(/*! ../AttributeDefinitions */ \"./src/AttributeDefinitions.ts\");\nvar DockLocation_1 = __webpack_require__(/*! ../DockLocation */ \"./src/DockLocation.ts\");\nvar Orientation_1 = __webpack_require__(/*! ../Orientation */ \"./src/Orientation.ts\");\nvar Rect_1 = __webpack_require__(/*! ../Rect */ \"./src/Rect.ts\");\nvar Actions_1 = __webpack_require__(/*! ./Actions */ \"./src/model/Actions.ts\");\nvar BorderNode_1 = __webpack_require__(/*! ./BorderNode */ \"./src/model/BorderNode.ts\");\nvar BorderSet_1 = __webpack_require__(/*! ./BorderSet */ \"./src/model/BorderSet.ts\");\nvar RowNode_1 = __webpack_require__(/*! ./RowNode */ \"./src/model/RowNode.ts\");\nvar TabNode_1 = __webpack_require__(/*! ./TabNode */ \"./src/model/TabNode.ts\");\nvar TabSetNode_1 = __webpack_require__(/*! ./TabSetNode */ \"./src/model/TabSetNode.ts\");\nvar Utils_1 = __webpack_require__(/*! ./Utils */ \"./src/model/Utils.ts\");\nvar uuid = __webpack_require__(/*! uuid */ \"./node_modules/uuid/dist/esm-browser/index.js\");\n/**\n * Class containing the Tree of Nodes used by the FlexLayout component\n */\nvar Model = /** @class */ (function () {\n    /**\n     * 'private' constructor. Use the static method Model.fromJson(json) to create a model\n     *  @hidden @internal\n     */\n    function Model() {\n        /** @hidden @internal */\n        this._borderRects = { inner: Rect_1.default.empty(), outer: Rect_1.default.empty() };\n        this._attributes = {};\n        this._idMap = {};\n        this._borders = new BorderSet_1.default(this);\n        this._pointerFine = true;\n    }\n    /**\n     * Loads the model from the given json object\n     * @param json the json model to load\n     * @returns {Model} a new Model object\n     */\n    Model.fromJson = function (json) {\n        var model = new Model();\n        Model._attributeDefinitions.fromJson(json.global, model._attributes);\n        if (json.borders) {\n            model._borders = BorderSet_1.default._fromJson(json.borders, model);\n        }\n        model._root = RowNode_1.default._fromJson(json.layout, model);\n        model._tidy(); // initial tidy of node tree\n        return model;\n    };\n    /** @hidden @internal */\n    Model._createAttributeDefinitions = function () {\n        var attributeDefinitions = new AttributeDefinitions_1.default();\n        // splitter\n        attributeDefinitions.add(\"splitterSize\", -1).setType(Attribute_1.default.NUMBER);\n        attributeDefinitions.add(\"splitterExtra\", 0).setType(Attribute_1.default.NUMBER);\n        attributeDefinitions.add(\"enableEdgeDock\", true).setType(Attribute_1.default.BOOLEAN);\n        attributeDefinitions.add(\"rootOrientationVertical\", false).setType(Attribute_1.default.BOOLEAN);\n        attributeDefinitions.add(\"marginInsets\", { top: 0, right: 0, bottom: 0, left: 0 })\n            .setType(\"IInsets\");\n        // tab\n        attributeDefinitions.add(\"tabEnableClose\", true).setType(Attribute_1.default.BOOLEAN);\n        attributeDefinitions.add(\"tabCloseType\", 1).setType(\"ICloseType\");\n        attributeDefinitions.add(\"tabEnableFloat\", false).setType(Attribute_1.default.BOOLEAN);\n        attributeDefinitions.add(\"tabEnableDrag\", true).setType(Attribute_1.default.BOOLEAN);\n        attributeDefinitions.add(\"tabEnableRename\", true).setType(Attribute_1.default.BOOLEAN);\n        attributeDefinitions.add(\"tabClassName\", undefined).setType(Attribute_1.default.STRING);\n        attributeDefinitions.add(\"tabIcon\", undefined).setType(Attribute_1.default.STRING);\n        attributeDefinitions.add(\"tabEnableRenderOnDemand\", true).setType(Attribute_1.default.BOOLEAN);\n        attributeDefinitions.add(\"tabDragSpeed\", 0.3).setType(Attribute_1.default.NUMBER);\n        attributeDefinitions.add(\"tabBorderWidth\", -1).setType(Attribute_1.default.NUMBER);\n        attributeDefinitions.add(\"tabBorderHeight\", -1).setType(Attribute_1.default.NUMBER);\n        // tabset\n        attributeDefinitions.add(\"tabSetEnableDeleteWhenEmpty\", true).setType(Attribute_1.default.BOOLEAN);\n        attributeDefinitions.add(\"tabSetEnableDrop\", true).setType(Attribute_1.default.BOOLEAN);\n        attributeDefinitions.add(\"tabSetEnableDrag\", true).setType(Attribute_1.default.BOOLEAN);\n        attributeDefinitions.add(\"tabSetEnableDivide\", true).setType(Attribute_1.default.BOOLEAN);\n        attributeDefinitions.add(\"tabSetEnableMaximize\", true).setType(Attribute_1.default.BOOLEAN);\n        attributeDefinitions.add(\"tabSetEnableClose\", false).setType(Attribute_1.default.BOOLEAN);\n        attributeDefinitions.add(\"tabSetAutoSelectTab\", true).setType(Attribute_1.default.BOOLEAN);\n        attributeDefinitions.add(\"tabSetClassNameTabStrip\", undefined).setType(Attribute_1.default.STRING);\n        attributeDefinitions.add(\"tabSetClassNameHeader\", undefined).setType(Attribute_1.default.STRING);\n        attributeDefinitions.add(\"tabSetEnableTabStrip\", true).setType(Attribute_1.default.BOOLEAN);\n        attributeDefinitions.add(\"tabSetHeaderHeight\", 0).setType(Attribute_1.default.NUMBER);\n        attributeDefinitions.add(\"tabSetTabStripHeight\", 0).setType(Attribute_1.default.NUMBER);\n        attributeDefinitions.add(\"tabSetMarginInsets\", { top: 0, right: 0, bottom: 0, left: 0 })\n            .setType(\"IInsets\");\n        attributeDefinitions.add(\"tabSetBorderInsets\", { top: 0, right: 0, bottom: 0, left: 0 })\n            .setType(\"IInsets\");\n        attributeDefinitions.add(\"tabSetTabLocation\", \"top\").setType(\"ITabLocation\");\n        attributeDefinitions.add(\"tabSetMinWidth\", 0).setType(Attribute_1.default.NUMBER);\n        attributeDefinitions.add(\"tabSetMinHeight\", 0).setType(Attribute_1.default.NUMBER);\n        // border\n        attributeDefinitions.add(\"borderSize\", 200).setType(Attribute_1.default.NUMBER);\n        attributeDefinitions.add(\"borderMinSize\", 0).setType(Attribute_1.default.NUMBER);\n        attributeDefinitions.add(\"borderBarSize\", 0).setType(Attribute_1.default.NUMBER);\n        attributeDefinitions.add(\"borderEnableDrop\", true).setType(Attribute_1.default.BOOLEAN);\n        attributeDefinitions.add(\"borderAutoSelectTabWhenOpen\", true).setType(Attribute_1.default.BOOLEAN);\n        attributeDefinitions.add(\"borderAutoSelectTabWhenClosed\", false).setType(Attribute_1.default.BOOLEAN);\n        attributeDefinitions.add(\"borderClassName\", undefined).setType(Attribute_1.default.STRING);\n        return attributeDefinitions;\n    };\n    /** @hidden @internal */\n    Model.prototype._setChangeListener = function (listener) {\n        this._changeListener = listener;\n    };\n    /**\n     * Get the currently active tabset node\n     */\n    Model.prototype.getActiveTabset = function () {\n        if (this._activeTabSet && this.getNodeById(this._activeTabSet.getId())) {\n            return this._activeTabSet;\n        }\n        else {\n            return undefined;\n        }\n    };\n    /** @hidden @internal */\n    Model.prototype._setActiveTabset = function (tabsetNode) {\n        this._activeTabSet = tabsetNode;\n    };\n    /**\n     * Get the currently maximized tabset node\n     */\n    Model.prototype.getMaximizedTabset = function () {\n        return this._maximizedTabSet;\n    };\n    /** @hidden @internal */\n    Model.prototype._setMaximizedTabset = function (tabsetNode) {\n        this._maximizedTabSet = tabsetNode;\n    };\n    /**\n     * Gets the root RowNode of the model\n     * @returns {RowNode}\n     */\n    Model.prototype.getRoot = function () {\n        return this._root;\n    };\n    Model.prototype.isRootOrientationVertical = function () {\n        return this._attributes.rootOrientationVertical;\n    };\n    /**\n     * Gets the\n     * @returns {BorderSet|*}\n     */\n    Model.prototype.getBorderSet = function () {\n        return this._borders;\n    };\n    /** @hidden @internal */\n    Model.prototype._getOuterInnerRects = function () {\n        return this._borderRects;\n    };\n    /** @hidden @internal */\n    Model.prototype._getPointerFine = function () {\n        return this._pointerFine;\n    };\n    /** @hidden @internal */\n    Model.prototype._setPointerFine = function (pointerFine) {\n        this._pointerFine = pointerFine;\n    };\n    /**\n     * Visits all the nodes in the model and calls the given function for each\n     * @param fn a function that takes visited node and a integer level as parameters\n     */\n    Model.prototype.visitNodes = function (fn) {\n        this._borders._forEachNode(fn);\n        this._root._forEachNode(fn, 0);\n    };\n    /**\n     * Gets a node by its id\n     * @param id the id to find\n     */\n    Model.prototype.getNodeById = function (id) {\n        return this._idMap[id];\n    };\n    /**\n     * Update the node tree by performing the given action,\n     * Actions should be generated via static methods on the Actions class\n     * @param action the action to perform\n     * @returns added Node for Actions.addNode; undefined otherwise\n     */\n    Model.prototype.doAction = function (action) {\n        var returnVal = undefined;\n        // console.log(action);\n        switch (action.type) {\n            case Actions_1.default.ADD_NODE: {\n                var newNode = new TabNode_1.default(this, action.data.json, true);\n                var toNode = this._idMap[action.data.toNode];\n                if (toNode instanceof TabSetNode_1.default || toNode instanceof BorderNode_1.default || toNode instanceof RowNode_1.default) {\n                    toNode.drop(newNode, DockLocation_1.default.getByName(action.data.location), action.data.index, action.data.select);\n                    returnVal = newNode;\n                }\n                break;\n            }\n            case Actions_1.default.MOVE_NODE: {\n                var fromNode = this._idMap[action.data.fromNode];\n                if (fromNode instanceof TabNode_1.default || fromNode instanceof TabSetNode_1.default) {\n                    var toNode = this._idMap[action.data.toNode];\n                    if (toNode instanceof TabSetNode_1.default || toNode instanceof BorderNode_1.default || toNode instanceof RowNode_1.default) {\n                        toNode.drop(fromNode, DockLocation_1.default.getByName(action.data.location), action.data.index, action.data.select);\n                    }\n                }\n                break;\n            }\n            case Actions_1.default.DELETE_TAB: {\n                var node = this._idMap[action.data.node];\n                if (node instanceof TabNode_1.default) {\n                    node._delete();\n                }\n                break;\n            }\n            case Actions_1.default.DELETE_TABSET: {\n                var node = this._idMap[action.data.node];\n                if (node instanceof TabSetNode_1.default) {\n                    // first delete all child tabs\n                    var children = __spreadArray([], node.getChildren());\n                    children.forEach(function (child, i) {\n                        child._delete();\n                    });\n                    node._delete();\n                    this._tidy();\n                }\n                break;\n            }\n            case Actions_1.default.FLOAT_TAB: {\n                var node = this._idMap[action.data.node];\n                if (node instanceof TabNode_1.default) {\n                    node._setFloating(true);\n                    Utils_1.adjustSelectedIndexAfterFloat(node);\n                }\n                break;\n            }\n            case Actions_1.default.UNFLOAT_TAB: {\n                var node = this._idMap[action.data.node];\n                if (node instanceof TabNode_1.default) {\n                    node._setFloating(false);\n                    Utils_1.adjustSelectedIndexAfterDock(node);\n                }\n                break;\n            }\n            case Actions_1.default.RENAME_TAB: {\n                var node = this._idMap[action.data.node];\n                if (node instanceof TabNode_1.default) {\n                    node._setName(action.data.text);\n                }\n                break;\n            }\n            case Actions_1.default.SELECT_TAB: {\n                var tabNode = this._idMap[action.data.tabNode];\n                if (tabNode instanceof TabNode_1.default) {\n                    var parent_1 = tabNode.getParent();\n                    var pos = parent_1.getChildren().indexOf(tabNode);\n                    if (parent_1 instanceof BorderNode_1.default) {\n                        if (parent_1.getSelected() === pos) {\n                            parent_1._setSelected(-1);\n                        }\n                        else {\n                            parent_1._setSelected(pos);\n                        }\n                    }\n                    else if (parent_1 instanceof TabSetNode_1.default) {\n                        if (parent_1.getSelected() !== pos) {\n                            parent_1._setSelected(pos);\n                        }\n                        this._activeTabSet = parent_1;\n                    }\n                }\n                break;\n            }\n            case Actions_1.default.SET_ACTIVE_TABSET: {\n                var tabsetNode = this._idMap[action.data.tabsetNode];\n                if (tabsetNode instanceof TabSetNode_1.default) {\n                    this._activeTabSet = tabsetNode;\n                }\n                break;\n            }\n            case Actions_1.default.ADJUST_SPLIT: {\n                var node1 = this._idMap[action.data.node1];\n                var node2 = this._idMap[action.data.node2];\n                if ((node1 instanceof TabSetNode_1.default || node1 instanceof RowNode_1.default) && (node2 instanceof TabSetNode_1.default || node2 instanceof RowNode_1.default)) {\n                    this._adjustSplitSide(node1, action.data.weight1, action.data.pixelWidth1);\n                    this._adjustSplitSide(node2, action.data.weight2, action.data.pixelWidth2);\n                }\n                break;\n            }\n            case Actions_1.default.ADJUST_BORDER_SPLIT: {\n                var node = this._idMap[action.data.node];\n                if (node instanceof BorderNode_1.default) {\n                    node._setSize(action.data.pos);\n                }\n                break;\n            }\n            case Actions_1.default.MAXIMIZE_TOGGLE: {\n                var node = this._idMap[action.data.node];\n                if (node instanceof TabSetNode_1.default) {\n                    if (node === this._maximizedTabSet) {\n                        this._maximizedTabSet = undefined;\n                    }\n                    else {\n                        this._maximizedTabSet = node;\n                        this._activeTabSet = node;\n                    }\n                }\n                break;\n            }\n            case Actions_1.default.UPDATE_MODEL_ATTRIBUTES: {\n                this._updateAttrs(action.data.json);\n                break;\n            }\n            case Actions_1.default.UPDATE_NODE_ATTRIBUTES: {\n                var node = this._idMap[action.data.node];\n                node._updateAttrs(action.data.json);\n                break;\n            }\n            default:\n                break;\n        }\n        this._updateIdMap();\n        if (this._changeListener !== undefined) {\n            this._changeListener();\n        }\n        return returnVal;\n    };\n    /** @hidden @internal */\n    Model.prototype._updateIdMap = function () {\n        var _this = this;\n        // regenerate idMap to stop it building up\n        this._idMap = {};\n        this.visitNodes(function (node) { return (_this._idMap[node.getId()] = node); });\n        // console.log(JSON.stringify(Object.keys(this._idMap)));\n    };\n    /** @hidden @internal */\n    Model.prototype._adjustSplitSide = function (node, weight, pixels) {\n        node._setWeight(weight);\n        if (node.getWidth() != null && node.getOrientation() === Orientation_1.default.VERT) {\n            node._updateAttrs({ width: pixels });\n        }\n        else if (node.getHeight() != null && node.getOrientation() === Orientation_1.default.HORZ) {\n            node._updateAttrs({ height: pixels });\n        }\n    };\n    /**\n     * Converts the model to a json object\n     * @returns {IJsonModel} json object that represents this model\n     */\n    Model.prototype.toJson = function () {\n        var global = {};\n        Model._attributeDefinitions.toJson(global, this._attributes);\n        // save state of nodes\n        this.visitNodes(function (node) {\n            node._fireEvent(\"save\", undefined);\n        });\n        return { global: global, borders: this._borders._toJson(), layout: this._root.toJson() };\n    };\n    Model.prototype.getSplitterSize = function () {\n        var splitterSize = this._attributes.splitterSize;\n        if (splitterSize === -1) {\n            // use defaults\n            splitterSize = this._pointerFine ? 8 : 12; // larger for mobile\n        }\n        return splitterSize;\n    };\n    Model.prototype.getSplitterExtra = function () {\n        return this._attributes.splitterExtra;\n    };\n    Model.prototype.isEnableEdgeDock = function () {\n        return this._attributes.enableEdgeDock;\n    };\n    /** @hidden @internal */\n    Model.prototype._addNode = function (node) {\n        var id = node.getId();\n        if (this._idMap[id] !== undefined) {\n            throw new Error(\"Error: each node must have a unique id, duplicate id:\" + node.getId());\n        }\n        if (node.getType() !== \"splitter\") {\n            this._idMap[id] = node;\n        }\n    };\n    /** @hidden @internal */\n    Model.prototype._layout = function (rect, metrics) {\n        var _a;\n        // let start = Date.now();\n        this._borderRects = this._borders._layoutBorder({ outer: rect, inner: rect }, metrics);\n        rect = this._borderRects.inner.removeInsets(this._getAttribute(\"marginInsets\"));\n        (_a = this._root) === null || _a === void 0 ? void 0 : _a.calcMinSize();\n        this._root._layout(rect, metrics);\n        // console.log(\"layout time: \" + (Date.now() - start));\n        return rect;\n    };\n    /** @hidden @internal */\n    Model.prototype._findDropTargetNode = function (dragNode, x, y) {\n        var node = this._root._findDropTargetNode(dragNode, x, y);\n        if (node === undefined) {\n            node = this._borders._findDropTargetNode(dragNode, x, y);\n        }\n        return node;\n    };\n    /** @hidden @internal */\n    Model.prototype._tidy = function () {\n        // console.log(\"before _tidy\", this.toString());\n        this._root._tidy();\n        // console.log(\"after _tidy\", this.toString());\n    };\n    /** @hidden @internal */\n    Model.prototype._updateAttrs = function (json) {\n        Model._attributeDefinitions.update(json, this._attributes);\n    };\n    /** @hidden @internal */\n    Model.prototype._nextUniqueId = function () {\n        return '#' + uuid.v4();\n    };\n    /** @hidden @internal */\n    Model.prototype._getAttribute = function (name) {\n        return this._attributes[name];\n    };\n    /**\n     * Sets a function to allow/deny dropping a node\n     * @param onAllowDrop function that takes the drag node and DropInfo and returns true if the drop is allowed\n     */\n    Model.prototype.setOnAllowDrop = function (onAllowDrop) {\n        this._onAllowDrop = onAllowDrop;\n    };\n    /** @hidden @internal */\n    Model.prototype._getOnAllowDrop = function () {\n        return this._onAllowDrop;\n    };\n    /**\n     * set callback called when a new TabSet is created.\n     * The tabNode can be undefined if it's the auto created first tabset in the root row (when the last\n     * tab is deleted, the root tabset can be recreated)\n     * @param onCreateTabSet\n     */\n    Model.prototype.setOnCreateTabSet = function (onCreateTabSet) {\n        this._onCreateTabSet = onCreateTabSet;\n    };\n    /** @hidden @internal */\n    Model.prototype._getOnCreateTabSet = function () {\n        return this._onCreateTabSet;\n    };\n    Model.toTypescriptInterfaces = function () {\n        console.log(Model._attributeDefinitions.toTypescriptInterface(\"Global\", undefined));\n        console.log(RowNode_1.default.getAttributeDefinitions().toTypescriptInterface(\"Row\", Model._attributeDefinitions));\n        console.log(TabSetNode_1.default.getAttributeDefinitions().toTypescriptInterface(\"TabSet\", Model._attributeDefinitions));\n        console.log(TabNode_1.default.getAttributeDefinitions().toTypescriptInterface(\"Tab\", Model._attributeDefinitions));\n        console.log(BorderNode_1.default.getAttributeDefinitions().toTypescriptInterface(\"Border\", Model._attributeDefinitions));\n    };\n    Model.prototype.toString = function () {\n        return JSON.stringify(this.toJson());\n    };\n    /** @hidden @internal */\n    Model._attributeDefinitions = Model._createAttributeDefinitions();\n    return Model;\n}());\nexports.default = Model;\n\n\n//# sourceURL=webpack://FlexLayout/./src/model/Model.ts?");
+eval("\nvar __spreadArray = (this && this.__spreadArray) || function (to, from) {\n    for (var i = 0, il = from.length, j = to.length; i < il; i++, j++)\n        to[j] = from[i];\n    return to;\n};\nObject.defineProperty(exports, \"__esModule\", { value: true });\nvar Attribute_1 = __webpack_require__(/*! ../Attribute */ \"./src/Attribute.ts\");\nvar AttributeDefinitions_1 = __webpack_require__(/*! ../AttributeDefinitions */ \"./src/AttributeDefinitions.ts\");\nvar DockLocation_1 = __webpack_require__(/*! ../DockLocation */ \"./src/DockLocation.ts\");\nvar Orientation_1 = __webpack_require__(/*! ../Orientation */ \"./src/Orientation.ts\");\nvar Rect_1 = __webpack_require__(/*! ../Rect */ \"./src/Rect.ts\");\nvar Actions_1 = __webpack_require__(/*! ./Actions */ \"./src/model/Actions.ts\");\nvar BorderNode_1 = __webpack_require__(/*! ./BorderNode */ \"./src/model/BorderNode.ts\");\nvar BorderSet_1 = __webpack_require__(/*! ./BorderSet */ \"./src/model/BorderSet.ts\");\nvar RowNode_1 = __webpack_require__(/*! ./RowNode */ \"./src/model/RowNode.ts\");\nvar TabNode_1 = __webpack_require__(/*! ./TabNode */ \"./src/model/TabNode.ts\");\nvar TabSetNode_1 = __webpack_require__(/*! ./TabSetNode */ \"./src/model/TabSetNode.ts\");\nvar Utils_1 = __webpack_require__(/*! ./Utils */ \"./src/model/Utils.ts\");\nvar uuid = __webpack_require__(/*! uuid */ \"./node_modules/uuid/dist/esm-browser/index.js\");\n/**\n * Class containing the Tree of Nodes used by the FlexLayout component\n */\nvar Model = /** @class */ (function () {\n    /**\n     * 'private' constructor. Use the static method Model.fromJson(json) to create a model\n     *  @hidden @internal\n     */\n    function Model() {\n        /** @hidden @internal */\n        this._borderRects = { inner: Rect_1.default.empty(), outer: Rect_1.default.empty() };\n        this._attributes = {};\n        this._idMap = {};\n        this._borders = new BorderSet_1.default(this);\n        this._pointerFine = true;\n        this._showHiddenBorder = DockLocation_1.default.CENTER;\n    }\n    /**\n     * Loads the model from the given json object\n     * @param json the json model to load\n     * @returns {Model} a new Model object\n     */\n    Model.fromJson = function (json) {\n        var model = new Model();\n        Model._attributeDefinitions.fromJson(json.global, model._attributes);\n        if (json.borders) {\n            model._borders = BorderSet_1.default._fromJson(json.borders, model);\n        }\n        model._root = RowNode_1.default._fromJson(json.layout, model);\n        model._tidy(); // initial tidy of node tree\n        return model;\n    };\n    /** @hidden @internal */\n    Model._createAttributeDefinitions = function () {\n        var attributeDefinitions = new AttributeDefinitions_1.default();\n        // splitter\n        attributeDefinitions.add(\"splitterSize\", -1).setType(Attribute_1.default.NUMBER);\n        attributeDefinitions.add(\"splitterExtra\", 0).setType(Attribute_1.default.NUMBER);\n        attributeDefinitions.add(\"enableEdgeDock\", true).setType(Attribute_1.default.BOOLEAN);\n        attributeDefinitions.add(\"rootOrientationVertical\", false).setType(Attribute_1.default.BOOLEAN);\n        attributeDefinitions.add(\"marginInsets\", { top: 0, right: 0, bottom: 0, left: 0 })\n            .setType(\"IInsets\");\n        attributeDefinitions.add(\"enableUseVisibility\", false).setType(Attribute_1.default.BOOLEAN);\n        // tab\n        attributeDefinitions.add(\"tabEnableClose\", true).setType(Attribute_1.default.BOOLEAN);\n        attributeDefinitions.add(\"tabCloseType\", 1).setType(\"ICloseType\");\n        attributeDefinitions.add(\"tabEnableFloat\", false).setType(Attribute_1.default.BOOLEAN);\n        attributeDefinitions.add(\"tabEnableDrag\", true).setType(Attribute_1.default.BOOLEAN);\n        attributeDefinitions.add(\"tabEnableRename\", true).setType(Attribute_1.default.BOOLEAN);\n        attributeDefinitions.add(\"tabClassName\", undefined).setType(Attribute_1.default.STRING);\n        attributeDefinitions.add(\"tabIcon\", undefined).setType(Attribute_1.default.STRING);\n        attributeDefinitions.add(\"tabEnableRenderOnDemand\", true).setType(Attribute_1.default.BOOLEAN);\n        attributeDefinitions.add(\"tabDragSpeed\", 0.3).setType(Attribute_1.default.NUMBER);\n        attributeDefinitions.add(\"tabBorderWidth\", -1).setType(Attribute_1.default.NUMBER);\n        attributeDefinitions.add(\"tabBorderHeight\", -1).setType(Attribute_1.default.NUMBER);\n        // tabset\n        attributeDefinitions.add(\"tabSetEnableDeleteWhenEmpty\", true).setType(Attribute_1.default.BOOLEAN);\n        attributeDefinitions.add(\"tabSetEnableDrop\", true).setType(Attribute_1.default.BOOLEAN);\n        attributeDefinitions.add(\"tabSetEnableDrag\", true).setType(Attribute_1.default.BOOLEAN);\n        attributeDefinitions.add(\"tabSetEnableDivide\", true).setType(Attribute_1.default.BOOLEAN);\n        attributeDefinitions.add(\"tabSetEnableMaximize\", true).setType(Attribute_1.default.BOOLEAN);\n        attributeDefinitions.add(\"tabSetEnableClose\", false).setType(Attribute_1.default.BOOLEAN);\n        attributeDefinitions.add(\"tabSetAutoSelectTab\", true).setType(Attribute_1.default.BOOLEAN);\n        attributeDefinitions.add(\"tabSetClassNameTabStrip\", undefined).setType(Attribute_1.default.STRING);\n        attributeDefinitions.add(\"tabSetClassNameHeader\", undefined).setType(Attribute_1.default.STRING);\n        attributeDefinitions.add(\"tabSetEnableTabStrip\", true).setType(Attribute_1.default.BOOLEAN);\n        attributeDefinitions.add(\"tabSetHeaderHeight\", 0).setType(Attribute_1.default.NUMBER);\n        attributeDefinitions.add(\"tabSetTabStripHeight\", 0).setType(Attribute_1.default.NUMBER);\n        attributeDefinitions.add(\"tabSetMarginInsets\", { top: 0, right: 0, bottom: 0, left: 0 })\n            .setType(\"IInsets\");\n        attributeDefinitions.add(\"tabSetBorderInsets\", { top: 0, right: 0, bottom: 0, left: 0 })\n            .setType(\"IInsets\");\n        attributeDefinitions.add(\"tabSetTabLocation\", \"top\").setType(\"ITabLocation\");\n        attributeDefinitions.add(\"tabSetMinWidth\", 0).setType(Attribute_1.default.NUMBER);\n        attributeDefinitions.add(\"tabSetMinHeight\", 0).setType(Attribute_1.default.NUMBER);\n        // border\n        attributeDefinitions.add(\"borderSize\", 200).setType(Attribute_1.default.NUMBER);\n        attributeDefinitions.add(\"borderMinSize\", 0).setType(Attribute_1.default.NUMBER);\n        attributeDefinitions.add(\"borderBarSize\", 0).setType(Attribute_1.default.NUMBER);\n        attributeDefinitions.add(\"borderEnableDrop\", true).setType(Attribute_1.default.BOOLEAN);\n        attributeDefinitions.add(\"borderAutoSelectTabWhenOpen\", true).setType(Attribute_1.default.BOOLEAN);\n        attributeDefinitions.add(\"borderAutoSelectTabWhenClosed\", false).setType(Attribute_1.default.BOOLEAN);\n        attributeDefinitions.add(\"borderClassName\", undefined).setType(Attribute_1.default.STRING);\n        attributeDefinitions.add(\"borderEnableAutoHide\", false).setType(Attribute_1.default.BOOLEAN);\n        return attributeDefinitions;\n    };\n    /** @hidden @internal */\n    Model.prototype._setChangeListener = function (listener) {\n        this._changeListener = listener;\n    };\n    /**\n     * Get the currently active tabset node\n     */\n    Model.prototype.getActiveTabset = function () {\n        if (this._activeTabSet && this.getNodeById(this._activeTabSet.getId())) {\n            return this._activeTabSet;\n        }\n        else {\n            return undefined;\n        }\n    };\n    /** @hidden @internal */\n    Model.prototype._getShowHiddenBorder = function () {\n        return this._showHiddenBorder;\n    };\n    /** @hidden @internal */\n    Model.prototype._setShowHiddenBorder = function (location) {\n        this._showHiddenBorder = location;\n    };\n    /** @hidden @internal */\n    Model.prototype._setActiveTabset = function (tabsetNode) {\n        this._activeTabSet = tabsetNode;\n    };\n    /**\n     * Get the currently maximized tabset node\n     */\n    Model.prototype.getMaximizedTabset = function () {\n        return this._maximizedTabSet;\n    };\n    /** @hidden @internal */\n    Model.prototype._setMaximizedTabset = function (tabsetNode) {\n        this._maximizedTabSet = tabsetNode;\n    };\n    /**\n     * Gets the root RowNode of the model\n     * @returns {RowNode}\n     */\n    Model.prototype.getRoot = function () {\n        return this._root;\n    };\n    Model.prototype.isRootOrientationVertical = function () {\n        return this._attributes.rootOrientationVertical;\n    };\n    Model.prototype.isUseVisibility = function () {\n        return this._attributes.enableUseVisibility;\n    };\n    /**\n     * Gets the\n     * @returns {BorderSet|*}\n     */\n    Model.prototype.getBorderSet = function () {\n        return this._borders;\n    };\n    /** @hidden @internal */\n    Model.prototype._getOuterInnerRects = function () {\n        return this._borderRects;\n    };\n    /** @hidden @internal */\n    Model.prototype._getPointerFine = function () {\n        return this._pointerFine;\n    };\n    /** @hidden @internal */\n    Model.prototype._setPointerFine = function (pointerFine) {\n        this._pointerFine = pointerFine;\n    };\n    /**\n     * Visits all the nodes in the model and calls the given function for each\n     * @param fn a function that takes visited node and a integer level as parameters\n     */\n    Model.prototype.visitNodes = function (fn) {\n        this._borders._forEachNode(fn);\n        this._root._forEachNode(fn, 0);\n    };\n    /**\n     * Gets a node by its id\n     * @param id the id to find\n     */\n    Model.prototype.getNodeById = function (id) {\n        return this._idMap[id];\n    };\n    /**\n     * Update the node tree by performing the given action,\n     * Actions should be generated via static methods on the Actions class\n     * @param action the action to perform\n     * @returns added Node for Actions.addNode; undefined otherwise\n     */\n    Model.prototype.doAction = function (action) {\n        var returnVal = undefined;\n        // console.log(action);\n        switch (action.type) {\n            case Actions_1.default.ADD_NODE: {\n                var newNode = new TabNode_1.default(this, action.data.json, true);\n                var toNode = this._idMap[action.data.toNode];\n                if (toNode instanceof TabSetNode_1.default || toNode instanceof BorderNode_1.default || toNode instanceof RowNode_1.default) {\n                    toNode.drop(newNode, DockLocation_1.default.getByName(action.data.location), action.data.index, action.data.select);\n                    returnVal = newNode;\n                }\n                break;\n            }\n            case Actions_1.default.MOVE_NODE: {\n                var fromNode = this._idMap[action.data.fromNode];\n                if (fromNode instanceof TabNode_1.default || fromNode instanceof TabSetNode_1.default) {\n                    var toNode = this._idMap[action.data.toNode];\n                    if (toNode instanceof TabSetNode_1.default || toNode instanceof BorderNode_1.default || toNode instanceof RowNode_1.default) {\n                        toNode.drop(fromNode, DockLocation_1.default.getByName(action.data.location), action.data.index, action.data.select);\n                    }\n                }\n                break;\n            }\n            case Actions_1.default.DELETE_TAB: {\n                var node = this._idMap[action.data.node];\n                if (node instanceof TabNode_1.default) {\n                    node._delete();\n                }\n                break;\n            }\n            case Actions_1.default.DELETE_TABSET: {\n                var node = this._idMap[action.data.node];\n                if (node instanceof TabSetNode_1.default) {\n                    // first delete all child tabs that are closeable\n                    var children = __spreadArray([], node.getChildren());\n                    children.forEach(function (child, i) {\n                        if (child.isEnableClose()) {\n                            child._delete();\n                        }\n                    });\n                    if (node.getChildren().length === 0) {\n                        node._delete();\n                    }\n                    this._tidy();\n                }\n                break;\n            }\n            case Actions_1.default.FLOAT_TAB: {\n                var node = this._idMap[action.data.node];\n                if (node instanceof TabNode_1.default) {\n                    node._setFloating(true);\n                    Utils_1.adjustSelectedIndexAfterFloat(node);\n                }\n                break;\n            }\n            case Actions_1.default.UNFLOAT_TAB: {\n                var node = this._idMap[action.data.node];\n                if (node instanceof TabNode_1.default) {\n                    node._setFloating(false);\n                    Utils_1.adjustSelectedIndexAfterDock(node);\n                }\n                break;\n            }\n            case Actions_1.default.RENAME_TAB: {\n                var node = this._idMap[action.data.node];\n                if (node instanceof TabNode_1.default) {\n                    node._setName(action.data.text);\n                }\n                break;\n            }\n            case Actions_1.default.SELECT_TAB: {\n                var tabNode = this._idMap[action.data.tabNode];\n                if (tabNode instanceof TabNode_1.default) {\n                    var parent_1 = tabNode.getParent();\n                    var pos = parent_1.getChildren().indexOf(tabNode);\n                    if (parent_1 instanceof BorderNode_1.default) {\n                        if (parent_1.getSelected() === pos) {\n                            parent_1._setSelected(-1);\n                        }\n                        else {\n                            parent_1._setSelected(pos);\n                        }\n                    }\n                    else if (parent_1 instanceof TabSetNode_1.default) {\n                        if (parent_1.getSelected() !== pos) {\n                            parent_1._setSelected(pos);\n                        }\n                        this._activeTabSet = parent_1;\n                    }\n                }\n                break;\n            }\n            case Actions_1.default.SET_ACTIVE_TABSET: {\n                var tabsetNode = this._idMap[action.data.tabsetNode];\n                if (tabsetNode instanceof TabSetNode_1.default) {\n                    this._activeTabSet = tabsetNode;\n                }\n                break;\n            }\n            case Actions_1.default.ADJUST_SPLIT: {\n                var node1 = this._idMap[action.data.node1];\n                var node2 = this._idMap[action.data.node2];\n                if ((node1 instanceof TabSetNode_1.default || node1 instanceof RowNode_1.default) && (node2 instanceof TabSetNode_1.default || node2 instanceof RowNode_1.default)) {\n                    this._adjustSplitSide(node1, action.data.weight1, action.data.pixelWidth1);\n                    this._adjustSplitSide(node2, action.data.weight2, action.data.pixelWidth2);\n                }\n                break;\n            }\n            case Actions_1.default.ADJUST_BORDER_SPLIT: {\n                var node = this._idMap[action.data.node];\n                if (node instanceof BorderNode_1.default) {\n                    node._setSize(action.data.pos);\n                }\n                break;\n            }\n            case Actions_1.default.MAXIMIZE_TOGGLE: {\n                var node = this._idMap[action.data.node];\n                if (node instanceof TabSetNode_1.default) {\n                    if (node === this._maximizedTabSet) {\n                        this._maximizedTabSet = undefined;\n                    }\n                    else {\n                        this._maximizedTabSet = node;\n                        this._activeTabSet = node;\n                    }\n                }\n                break;\n            }\n            case Actions_1.default.UPDATE_MODEL_ATTRIBUTES: {\n                this._updateAttrs(action.data.json);\n                break;\n            }\n            case Actions_1.default.UPDATE_NODE_ATTRIBUTES: {\n                var node = this._idMap[action.data.node];\n                node._updateAttrs(action.data.json);\n                break;\n            }\n            default:\n                break;\n        }\n        this._updateIdMap();\n        if (this._changeListener !== undefined) {\n            this._changeListener();\n        }\n        return returnVal;\n    };\n    /** @hidden @internal */\n    Model.prototype._updateIdMap = function () {\n        var _this = this;\n        // regenerate idMap to stop it building up\n        this._idMap = {};\n        this.visitNodes(function (node) { return (_this._idMap[node.getId()] = node); });\n        // console.log(JSON.stringify(Object.keys(this._idMap)));\n    };\n    /** @hidden @internal */\n    Model.prototype._adjustSplitSide = function (node, weight, pixels) {\n        node._setWeight(weight);\n        if (node.getWidth() != null && node.getOrientation() === Orientation_1.default.VERT) {\n            node._updateAttrs({ width: pixels });\n        }\n        else if (node.getHeight() != null && node.getOrientation() === Orientation_1.default.HORZ) {\n            node._updateAttrs({ height: pixels });\n        }\n    };\n    /**\n     * Converts the model to a json object\n     * @returns {IJsonModel} json object that represents this model\n     */\n    Model.prototype.toJson = function () {\n        var global = {};\n        Model._attributeDefinitions.toJson(global, this._attributes);\n        // save state of nodes\n        this.visitNodes(function (node) {\n            node._fireEvent(\"save\", undefined);\n        });\n        return { global: global, borders: this._borders._toJson(), layout: this._root.toJson() };\n    };\n    Model.prototype.getSplitterSize = function () {\n        var splitterSize = this._attributes.splitterSize;\n        if (splitterSize === -1) {\n            // use defaults\n            splitterSize = this._pointerFine ? 8 : 12; // larger for mobile\n        }\n        return splitterSize;\n    };\n    Model.prototype.getSplitterExtra = function () {\n        return this._attributes.splitterExtra;\n    };\n    Model.prototype.isEnableEdgeDock = function () {\n        return this._attributes.enableEdgeDock;\n    };\n    /** @hidden @internal */\n    Model.prototype._addNode = function (node) {\n        var id = node.getId();\n        if (this._idMap[id] !== undefined) {\n            throw new Error(\"Error: each node must have a unique id, duplicate id:\" + node.getId());\n        }\n        if (node.getType() !== \"splitter\") {\n            this._idMap[id] = node;\n        }\n    };\n    /** @hidden @internal */\n    Model.prototype._layout = function (rect, metrics) {\n        var _a;\n        // let start = Date.now();\n        this._borderRects = this._borders._layoutBorder({ outer: rect, inner: rect }, metrics);\n        rect = this._borderRects.inner.removeInsets(this._getAttribute(\"marginInsets\"));\n        (_a = this._root) === null || _a === void 0 ? void 0 : _a.calcMinSize();\n        this._root._layout(rect, metrics);\n        // console.log(\"layout time: \" + (Date.now() - start));\n        return rect;\n    };\n    /** @hidden @internal */\n    Model.prototype._findDropTargetNode = function (dragNode, x, y) {\n        var node = this._root._findDropTargetNode(dragNode, x, y);\n        if (node === undefined) {\n            node = this._borders._findDropTargetNode(dragNode, x, y);\n        }\n        return node;\n    };\n    /** @hidden @internal */\n    Model.prototype._tidy = function () {\n        // console.log(\"before _tidy\", this.toString());\n        this._root._tidy();\n        // console.log(\"after _tidy\", this.toString());\n    };\n    /** @hidden @internal */\n    Model.prototype._updateAttrs = function (json) {\n        Model._attributeDefinitions.update(json, this._attributes);\n    };\n    /** @hidden @internal */\n    Model.prototype._nextUniqueId = function () {\n        return '#' + uuid.v4();\n    };\n    /** @hidden @internal */\n    Model.prototype._getAttribute = function (name) {\n        return this._attributes[name];\n    };\n    /**\n     * Sets a function to allow/deny dropping a node\n     * @param onAllowDrop function that takes the drag node and DropInfo and returns true if the drop is allowed\n     */\n    Model.prototype.setOnAllowDrop = function (onAllowDrop) {\n        this._onAllowDrop = onAllowDrop;\n    };\n    /** @hidden @internal */\n    Model.prototype._getOnAllowDrop = function () {\n        return this._onAllowDrop;\n    };\n    /**\n     * set callback called when a new TabSet is created.\n     * The tabNode can be undefined if it's the auto created first tabset in the root row (when the last\n     * tab is deleted, the root tabset can be recreated)\n     * @param onCreateTabSet\n     */\n    Model.prototype.setOnCreateTabSet = function (onCreateTabSet) {\n        this._onCreateTabSet = onCreateTabSet;\n    };\n    /** @hidden @internal */\n    Model.prototype._getOnCreateTabSet = function () {\n        return this._onCreateTabSet;\n    };\n    Model.toTypescriptInterfaces = function () {\n        console.log(Model._attributeDefinitions.toTypescriptInterface(\"Global\", undefined));\n        console.log(RowNode_1.default.getAttributeDefinitions().toTypescriptInterface(\"Row\", Model._attributeDefinitions));\n        console.log(TabSetNode_1.default.getAttributeDefinitions().toTypescriptInterface(\"TabSet\", Model._attributeDefinitions));\n        console.log(TabNode_1.default.getAttributeDefinitions().toTypescriptInterface(\"Tab\", Model._attributeDefinitions));\n        console.log(BorderNode_1.default.getAttributeDefinitions().toTypescriptInterface(\"Border\", Model._attributeDefinitions));\n    };\n    Model.prototype.toString = function () {\n        return JSON.stringify(this.toJson());\n    };\n    /** @hidden @internal */\n    Model._attributeDefinitions = Model._createAttributeDefinitions();\n    return Model;\n}());\nexports.default = Model;\n\n\n//# sourceURL=webpack://FlexLayout/./src/model/Model.ts?");
 
 /***/ }),
 
@@ -500,7 +500,7 @@ eval("\nObject.defineProperty(exports, \"__esModule\", { value: true });\nvar Do
 /***/ (function(module, exports, __webpack_require__) {
 
 "use strict";
-eval("\nvar __extends = (this && this.__extends) || (function () {\n    var extendStatics = function (d, b) {\n        extendStatics = Object.setPrototypeOf ||\n            ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||\n            function (d, b) { for (var p in b) if (Object.prototype.hasOwnProperty.call(b, p)) d[p] = b[p]; };\n        return extendStatics(d, b);\n    };\n    return function (d, b) {\n        if (typeof b !== \"function\" && b !== null)\n            throw new TypeError(\"Class extends value \" + String(b) + \" is not a constructor or null\");\n        extendStatics(d, b);\n        function __() { this.constructor = d; }\n        d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());\n    };\n})();\nObject.defineProperty(exports, \"__esModule\", { value: true });\nvar Attribute_1 = __webpack_require__(/*! ../Attribute */ \"./src/Attribute.ts\");\nvar AttributeDefinitions_1 = __webpack_require__(/*! ../AttributeDefinitions */ \"./src/AttributeDefinitions.ts\");\nvar DockLocation_1 = __webpack_require__(/*! ../DockLocation */ \"./src/DockLocation.ts\");\nvar DropInfo_1 = __webpack_require__(/*! ../DropInfo */ \"./src/DropInfo.ts\");\nvar Orientation_1 = __webpack_require__(/*! ../Orientation */ \"./src/Orientation.ts\");\nvar Rect_1 = __webpack_require__(/*! ../Rect */ \"./src/Rect.ts\");\nvar BorderNode_1 = __webpack_require__(/*! ./BorderNode */ \"./src/model/BorderNode.ts\");\nvar Node_1 = __webpack_require__(/*! ./Node */ \"./src/model/Node.ts\");\nvar SplitterNode_1 = __webpack_require__(/*! ./SplitterNode */ \"./src/model/SplitterNode.ts\");\nvar TabSetNode_1 = __webpack_require__(/*! ./TabSetNode */ \"./src/model/TabSetNode.ts\");\nvar RowNode = /** @class */ (function (_super) {\n    __extends(RowNode, _super);\n    /** @hidden @internal */\n    function RowNode(model, json) {\n        var _this = _super.call(this, model) || this;\n        _this._dirty = true;\n        _this._drawChildren = [];\n        _this.minHeight = 0;\n        _this.minWidth = 0;\n        RowNode._attributeDefinitions.fromJson(json, _this._attributes);\n        model._addNode(_this);\n        return _this;\n    }\n    /** @hidden @internal */\n    RowNode._fromJson = function (json, model) {\n        var newLayoutNode = new RowNode(model, json);\n        if (json.children != null) {\n            for (var _i = 0, _a = json.children; _i < _a.length; _i++) {\n                var jsonChild = _a[_i];\n                if (jsonChild.type === TabSetNode_1.default.TYPE) {\n                    var child = TabSetNode_1.default._fromJson(jsonChild, model);\n                    newLayoutNode._addChild(child);\n                }\n                else {\n                    var child = RowNode._fromJson(jsonChild, model);\n                    newLayoutNode._addChild(child);\n                }\n            }\n        }\n        return newLayoutNode;\n    };\n    /** @hidden @internal */\n    RowNode._createAttributeDefinitions = function () {\n        var attributeDefinitions = new AttributeDefinitions_1.default();\n        attributeDefinitions.add(\"type\", RowNode.TYPE, true).setType(Attribute_1.default.STRING).setFixed();\n        attributeDefinitions.add(\"id\", undefined).setType(Attribute_1.default.STRING);\n        attributeDefinitions.add(\"weight\", 100).setType(Attribute_1.default.NUMBER);\n        attributeDefinitions.add(\"width\", undefined).setType(Attribute_1.default.NUMBER);\n        attributeDefinitions.add(\"height\", undefined).setType(Attribute_1.default.NUMBER);\n        return attributeDefinitions;\n    };\n    RowNode.prototype.getWeight = function () {\n        return this._attributes.weight;\n    };\n    RowNode.prototype.getWidth = function () {\n        return this._getAttr(\"width\");\n    };\n    RowNode.prototype.getHeight = function () {\n        return this._getAttr(\"height\");\n    };\n    /** @hidden @internal */\n    RowNode.prototype._setWeight = function (weight) {\n        this._attributes.weight = weight;\n    };\n    /** @hidden @internal */\n    RowNode.prototype._layout = function (rect, metrics) {\n        _super.prototype._layout.call(this, rect, metrics);\n        var pixelSize = this._rect._getSize(this.getOrientation());\n        var totalWeight = 0;\n        var fixedPixels = 0;\n        var prefPixels = 0;\n        var totalPrefWeight = 0;\n        var drawChildren = this._getDrawChildren();\n        for (var _i = 0, drawChildren_1 = drawChildren; _i < drawChildren_1.length; _i++) {\n            var child = drawChildren_1[_i];\n            var prefSize = child._getPrefSize(this.getOrientation());\n            if (child._isFixed()) {\n                if (prefSize !== undefined) {\n                    fixedPixels += prefSize;\n                }\n            }\n            else {\n                if (prefSize === undefined) {\n                    totalWeight += child.getWeight();\n                }\n                else {\n                    prefPixels += prefSize;\n                    totalPrefWeight += child.getWeight();\n                }\n            }\n        }\n        var resizePreferred = false;\n        var availablePixels = pixelSize - fixedPixels - prefPixels;\n        if (availablePixels < 0) {\n            availablePixels = pixelSize - fixedPixels;\n            resizePreferred = true;\n            totalWeight += totalPrefWeight;\n        }\n        // assign actual pixel sizes\n        var totalSizeGiven = 0;\n        var variableSize = 0;\n        for (var _a = 0, drawChildren_2 = drawChildren; _a < drawChildren_2.length; _a++) {\n            var child = drawChildren_2[_a];\n            var prefSize = child._getPrefSize(this.getOrientation());\n            if (child._isFixed()) {\n                if (prefSize !== undefined) {\n                    child._setTempSize(prefSize);\n                }\n            }\n            else {\n                if (prefSize == null || resizePreferred) {\n                    if (totalWeight === 0) {\n                        child._setTempSize(0);\n                    }\n                    else {\n                        var minSize = child.getMinSize(this.getOrientation());\n                        var size = Math.floor(availablePixels * (child.getWeight() / totalWeight));\n                        child._setTempSize(Math.max(minSize, size));\n                    }\n                    variableSize += child._getTempSize();\n                }\n                else {\n                    child._setTempSize(prefSize);\n                }\n            }\n            totalSizeGiven += child._getTempSize();\n        }\n        // adjust sizes to exactly fit\n        if (variableSize > 0) {\n            while (totalSizeGiven < pixelSize) {\n                for (var _b = 0, drawChildren_3 = drawChildren; _b < drawChildren_3.length; _b++) {\n                    var child = drawChildren_3[_b];\n                    if (!(child instanceof SplitterNode_1.default)) {\n                        var prefSize = child._getPrefSize(this.getOrientation());\n                        if (!child._isFixed() && (prefSize === undefined || resizePreferred) && totalSizeGiven < pixelSize) {\n                            child._setTempSize(child._getTempSize() + 1);\n                            totalSizeGiven++;\n                        }\n                    }\n                }\n            }\n            // decrease size using nodes not at there minimum\n            while (totalSizeGiven > pixelSize) {\n                var changed = false;\n                for (var _c = 0, drawChildren_4 = drawChildren; _c < drawChildren_4.length; _c++) {\n                    var child = drawChildren_4[_c];\n                    if (!(child instanceof SplitterNode_1.default)) {\n                        var minSize = child.getMinSize(this.getOrientation());\n                        var size = child._getTempSize();\n                        if (size > minSize && totalSizeGiven > pixelSize) {\n                            child._setTempSize(child._getTempSize() - 1);\n                            totalSizeGiven--;\n                            changed = true;\n                        }\n                    }\n                }\n                if (!changed) {\n                    // all children are at min values\n                    break;\n                }\n            }\n            // if still too big then simply reduce all nodes until fits\n            while (totalSizeGiven > pixelSize) {\n                var changed = false;\n                for (var _d = 0, drawChildren_5 = drawChildren; _d < drawChildren_5.length; _d++) {\n                    var child = drawChildren_5[_d];\n                    if (!(child instanceof SplitterNode_1.default)) {\n                        var size = child._getTempSize();\n                        if (size > 0 && totalSizeGiven > pixelSize) {\n                            child._setTempSize(child._getTempSize() - 1);\n                            totalSizeGiven--;\n                            changed = true;\n                        }\n                    }\n                }\n                if (!changed) {\n                    // all children are at 0 values\n                    break;\n                }\n            }\n        }\n        // layout children\n        var p = 0;\n        for (var _e = 0, drawChildren_6 = drawChildren; _e < drawChildren_6.length; _e++) {\n            var child = drawChildren_6[_e];\n            if (this.getOrientation() === Orientation_1.default.HORZ) {\n                child._layout(new Rect_1.default(this._rect.x + p, this._rect.y, child._getTempSize(), this._rect.height), metrics);\n            }\n            else {\n                child._layout(new Rect_1.default(this._rect.x, this._rect.y + p, this._rect.width, child._getTempSize()), metrics);\n            }\n            p += child._getTempSize();\n        }\n        return true;\n    };\n    /** @hidden @internal */\n    RowNode.prototype._getSplitterBounds = function (splitterNode, useMinSize) {\n        if (useMinSize === void 0) { useMinSize = false; }\n        var pBounds = [0, 0];\n        var drawChildren = this._getDrawChildren();\n        var p = drawChildren.indexOf(splitterNode);\n        var node1 = drawChildren[p - 1];\n        var node2 = drawChildren[p + 1];\n        if (this.getOrientation() === Orientation_1.default.HORZ) {\n            var minSize1 = useMinSize ? node1.getMinWidth() : 0;\n            var minSize2 = useMinSize ? node2.getMinWidth() : 0;\n            pBounds[0] = node1.getRect().x + minSize1;\n            pBounds[1] = node2.getRect().getRight() - splitterNode.getWidth() - minSize2;\n        }\n        else {\n            var minSize1 = useMinSize ? node1.getMinHeight() : 0;\n            var minSize2 = useMinSize ? node2.getMinHeight() : 0;\n            pBounds[0] = node1.getRect().y + minSize1;\n            pBounds[1] = node2.getRect().getBottom() - splitterNode.getHeight() - minSize2;\n        }\n        return pBounds;\n    };\n    /** @hidden @internal */\n    RowNode.prototype._calculateSplit = function (splitter, splitterPos) {\n        var rtn;\n        var drawChildren = this._getDrawChildren();\n        var p = drawChildren.indexOf(splitter);\n        var pBounds = this._getSplitterBounds(splitter);\n        var weightedLength = drawChildren[p - 1].getWeight() + drawChildren[p + 1].getWeight();\n        var pixelWidth1 = Math.max(0, splitterPos - pBounds[0]);\n        var pixelWidth2 = Math.max(0, pBounds[1] - splitterPos);\n        if (pixelWidth1 + pixelWidth2 > 0) {\n            var weight1 = (pixelWidth1 * weightedLength) / (pixelWidth1 + pixelWidth2);\n            var weight2 = (pixelWidth2 * weightedLength) / (pixelWidth1 + pixelWidth2);\n            rtn = {\n                node1Id: drawChildren[p - 1].getId(),\n                weight1: weight1,\n                pixelWidth1: pixelWidth1,\n                node2Id: drawChildren[p + 1].getId(),\n                weight2: weight2,\n                pixelWidth2: pixelWidth2,\n            };\n        }\n        return rtn;\n    };\n    /** @hidden @internal */\n    RowNode.prototype._getDrawChildren = function () {\n        if (this._dirty) {\n            this._drawChildren = [];\n            for (var i = 0; i < this._children.length; i++) {\n                var child = this._children[i];\n                if (i !== 0) {\n                    var newSplitter = new SplitterNode_1.default(this._model);\n                    newSplitter._setParent(this);\n                    this._drawChildren.push(newSplitter);\n                }\n                this._drawChildren.push(child);\n            }\n            this._dirty = false;\n        }\n        return this._drawChildren;\n    };\n    /** @hidden @internal */\n    RowNode.prototype.getMinSize = function (orientation) {\n        if (orientation === Orientation_1.default.HORZ) {\n            return this.getMinWidth();\n        }\n        else {\n            return this.getMinHeight();\n        }\n    };\n    /** @hidden @internal */\n    RowNode.prototype.getMinWidth = function () {\n        return this.minWidth;\n    };\n    /** @hidden @internal */\n    RowNode.prototype.getMinHeight = function () {\n        return this.minHeight;\n    };\n    /** @hidden @internal */\n    RowNode.prototype.calcMinSize = function () {\n        var _this = this;\n        this.minHeight = 0;\n        this.minWidth = 0;\n        var first = true;\n        this._children.forEach(function (child) {\n            var c = child;\n            if (c instanceof RowNode) {\n                c.calcMinSize();\n            }\n            if (_this.getOrientation() === Orientation_1.default.VERT) {\n                _this.minHeight += c.getMinHeight();\n                if (!first) {\n                    _this.minHeight += _this._model.getSplitterSize();\n                }\n                _this.minWidth = Math.max(_this.minWidth, c.getMinWidth());\n            }\n            else {\n                _this.minWidth += c.getMinWidth();\n                if (!first) {\n                    _this.minWidth += _this._model.getSplitterSize();\n                }\n                _this.minHeight = Math.max(_this.minHeight, c.getMinHeight());\n            }\n            first = false;\n        });\n    };\n    /** @hidden @internal */\n    RowNode.prototype._tidy = function () {\n        var i = 0;\n        while (i < this._children.length) {\n            var child = this._children[i];\n            if (child instanceof RowNode) {\n                child._tidy();\n                var childChildren = child.getChildren();\n                if (childChildren.length === 0) {\n                    this._removeChild(child);\n                }\n                else if (childChildren.length === 1) {\n                    // hoist child/children up to this level\n                    var subchild = childChildren[0];\n                    this._removeChild(child);\n                    if (subchild instanceof RowNode) {\n                        var subChildrenTotal = 0;\n                        var subChildChildren = subchild.getChildren();\n                        for (var _i = 0, subChildChildren_1 = subChildChildren; _i < subChildChildren_1.length; _i++) {\n                            var ssc = subChildChildren_1[_i];\n                            var subsubChild = ssc;\n                            subChildrenTotal += subsubChild.getWeight();\n                        }\n                        for (var j = 0; j < subChildChildren.length; j++) {\n                            var subsubChild = subChildChildren[j];\n                            subsubChild._setWeight((child.getWeight() * subsubChild.getWeight()) / subChildrenTotal);\n                            this._addChild(subsubChild, i + j);\n                        }\n                    }\n                    else {\n                        subchild._setWeight(child.getWeight());\n                        this._addChild(subchild, i);\n                    }\n                }\n                else {\n                    i++;\n                }\n            }\n            else if (child instanceof TabSetNode_1.default && child.getChildren().length === 0) {\n                if (child.isEnableDeleteWhenEmpty()) {\n                    this._removeChild(child);\n                    if (child === this._model.getMaximizedTabset()) {\n                        this._model._setMaximizedTabset(undefined);\n                    }\n                }\n                else {\n                    i++;\n                }\n            }\n            else {\n                i++;\n            }\n        }\n        // add tabset into empty root\n        if (this === this._model.getRoot() && this._children.length === 0) {\n            var callback = this._model._getOnCreateTabSet();\n            var child = new TabSetNode_1.default(this._model, callback ? callback() : {});\n            this._model._setActiveTabset(child);\n            this._addChild(child);\n        }\n    };\n    /** @hidden @internal */\n    RowNode.prototype.canDrop = function (dragNode, x, y) {\n        var yy = y - this._rect.y;\n        var xx = x - this._rect.x;\n        var w = this._rect.width;\n        var h = this._rect.height;\n        var margin = 10; // height of edge rect\n        var half = 50; // half width of edge rect\n        var dropInfo;\n        if (this._model.isEnableEdgeDock() && this._parent === undefined) {\n            // _root row\n            if (x < this._rect.x + margin && yy > h / 2 - half && yy < h / 2 + half) {\n                var dockLocation = DockLocation_1.default.LEFT;\n                var outlineRect = dockLocation.getDockRect(this._rect);\n                outlineRect.width = outlineRect.width / 2;\n                dropInfo = new DropInfo_1.default(this, outlineRect, dockLocation, -1, \"flexlayout__outline_rect_edge\");\n            }\n            else if (x > this._rect.getRight() - margin && yy > h / 2 - half && yy < h / 2 + half) {\n                var dockLocation = DockLocation_1.default.RIGHT;\n                var outlineRect = dockLocation.getDockRect(this._rect);\n                outlineRect.width = outlineRect.width / 2;\n                outlineRect.x += outlineRect.width;\n                dropInfo = new DropInfo_1.default(this, outlineRect, dockLocation, -1, \"flexlayout__outline_rect_edge\");\n            }\n            else if (y < this._rect.y + margin && xx > w / 2 - half && xx < w / 2 + half) {\n                var dockLocation = DockLocation_1.default.TOP;\n                var outlineRect = dockLocation.getDockRect(this._rect);\n                outlineRect.height = outlineRect.height / 2;\n                dropInfo = new DropInfo_1.default(this, outlineRect, dockLocation, -1, \"flexlayout__outline_rect_edge\");\n            }\n            else if (y > this._rect.getBottom() - margin && xx > w / 2 - half && xx < w / 2 + half) {\n                var dockLocation = DockLocation_1.default.BOTTOM;\n                var outlineRect = dockLocation.getDockRect(this._rect);\n                outlineRect.height = outlineRect.height / 2;\n                outlineRect.y += outlineRect.height;\n                dropInfo = new DropInfo_1.default(this, outlineRect, dockLocation, -1, \"flexlayout__outline_rect_edge\");\n            }\n            if (dropInfo !== undefined) {\n                if (!dragNode._canDockInto(dragNode, dropInfo)) {\n                    return undefined;\n                }\n            }\n        }\n        return dropInfo;\n    };\n    /** @hidden @internal */\n    RowNode.prototype.drop = function (dragNode, location, index) {\n        var dockLocation = location;\n        var parent = dragNode.getParent();\n        if (parent) {\n            parent._removeChild(dragNode);\n        }\n        if (parent !== undefined && parent.getType() === TabSetNode_1.default.TYPE) {\n            parent._setSelected(0);\n        }\n        if (parent !== undefined && parent.getType() === BorderNode_1.default.TYPE) {\n            parent._setSelected(-1);\n        }\n        var tabSet;\n        if (dragNode instanceof TabSetNode_1.default) {\n            tabSet = dragNode;\n        }\n        else {\n            var callback = this._model._getOnCreateTabSet();\n            tabSet = new TabSetNode_1.default(this._model, callback ? callback(dragNode) : {});\n            tabSet._addChild(dragNode);\n        }\n        var size = this._children.reduce(function (sum, child) {\n            return sum + child.getWeight();\n        }, 0);\n        if (size === 0) {\n            size = 100;\n        }\n        tabSet._setWeight(size / 3);\n        var horz = !this._model.isRootOrientationVertical();\n        if (horz && dockLocation === DockLocation_1.default.LEFT || !horz && dockLocation === DockLocation_1.default.TOP) {\n            this._addChild(tabSet, 0);\n        }\n        else if (horz && dockLocation === DockLocation_1.default.RIGHT || !horz && dockLocation === DockLocation_1.default.BOTTOM) {\n            this._addChild(tabSet);\n        }\n        else if (horz && dockLocation === DockLocation_1.default.TOP || !horz && dockLocation === DockLocation_1.default.LEFT) {\n            var vrow = new RowNode(this._model, {});\n            var hrow_1 = new RowNode(this._model, {});\n            hrow_1._setWeight(75);\n            tabSet._setWeight(25);\n            this._children.forEach(function (child) {\n                hrow_1._addChild(child);\n            });\n            this._removeAll();\n            vrow._addChild(tabSet);\n            vrow._addChild(hrow_1);\n            this._addChild(vrow);\n        }\n        else if (horz && dockLocation === DockLocation_1.default.BOTTOM || !horz && dockLocation === DockLocation_1.default.RIGHT) {\n            var vrow = new RowNode(this._model, {});\n            var hrow_2 = new RowNode(this._model, {});\n            hrow_2._setWeight(75);\n            tabSet._setWeight(25);\n            this._children.forEach(function (child) {\n                hrow_2._addChild(child);\n            });\n            this._removeAll();\n            vrow._addChild(hrow_2);\n            vrow._addChild(tabSet);\n            this._addChild(vrow);\n        }\n        this._model._setActiveTabset(tabSet);\n        this._model._tidy();\n    };\n    RowNode.prototype.toJson = function () {\n        var json = {};\n        RowNode._attributeDefinitions.toJson(json, this._attributes);\n        json.children = [];\n        this._children.forEach(function (child) {\n            json.children.push(child.toJson());\n        });\n        return json;\n    };\n    RowNode.prototype.isEnableDrop = function () {\n        return true;\n    };\n    /** @hidden @internal */\n    RowNode.prototype._getPrefSize = function (orientation) {\n        var prefSize = this.getWidth();\n        if (orientation === Orientation_1.default.VERT) {\n            prefSize = this.getHeight();\n        }\n        return prefSize;\n    };\n    /** @hidden @internal */\n    RowNode.prototype._getAttributeDefinitions = function () {\n        return RowNode._attributeDefinitions;\n    };\n    /** @hidden @internal */\n    RowNode.prototype._updateAttrs = function (json) {\n        RowNode._attributeDefinitions.update(json, this._attributes);\n    };\n    /** @hidden @internal */\n    RowNode.getAttributeDefinitions = function () {\n        return RowNode._attributeDefinitions;\n    };\n    RowNode.TYPE = \"row\";\n    /** @hidden @internal */\n    RowNode._attributeDefinitions = RowNode._createAttributeDefinitions();\n    return RowNode;\n}(Node_1.default));\nexports.default = RowNode;\n\n\n//# sourceURL=webpack://FlexLayout/./src/model/RowNode.ts?");
+eval("\nvar __extends = (this && this.__extends) || (function () {\n    var extendStatics = function (d, b) {\n        extendStatics = Object.setPrototypeOf ||\n            ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||\n            function (d, b) { for (var p in b) if (Object.prototype.hasOwnProperty.call(b, p)) d[p] = b[p]; };\n        return extendStatics(d, b);\n    };\n    return function (d, b) {\n        if (typeof b !== \"function\" && b !== null)\n            throw new TypeError(\"Class extends value \" + String(b) + \" is not a constructor or null\");\n        extendStatics(d, b);\n        function __() { this.constructor = d; }\n        d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());\n    };\n})();\nvar __assign = (this && this.__assign) || function () {\n    __assign = Object.assign || function(t) {\n        for (var s, i = 1, n = arguments.length; i < n; i++) {\n            s = arguments[i];\n            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))\n                t[p] = s[p];\n        }\n        return t;\n    };\n    return __assign.apply(this, arguments);\n};\nObject.defineProperty(exports, \"__esModule\", { value: true });\nvar Attribute_1 = __webpack_require__(/*! ../Attribute */ \"./src/Attribute.ts\");\nvar AttributeDefinitions_1 = __webpack_require__(/*! ../AttributeDefinitions */ \"./src/AttributeDefinitions.ts\");\nvar DockLocation_1 = __webpack_require__(/*! ../DockLocation */ \"./src/DockLocation.ts\");\nvar DropInfo_1 = __webpack_require__(/*! ../DropInfo */ \"./src/DropInfo.ts\");\nvar Orientation_1 = __webpack_require__(/*! ../Orientation */ \"./src/Orientation.ts\");\nvar Rect_1 = __webpack_require__(/*! ../Rect */ \"./src/Rect.ts\");\nvar Types_1 = __webpack_require__(/*! ../Types */ \"./src/Types.ts\");\nvar BorderNode_1 = __webpack_require__(/*! ./BorderNode */ \"./src/model/BorderNode.ts\");\nvar Node_1 = __webpack_require__(/*! ./Node */ \"./src/model/Node.ts\");\nvar SplitterNode_1 = __webpack_require__(/*! ./SplitterNode */ \"./src/model/SplitterNode.ts\");\nvar TabSetNode_1 = __webpack_require__(/*! ./TabSetNode */ \"./src/model/TabSetNode.ts\");\nvar RowNode = /** @class */ (function (_super) {\n    __extends(RowNode, _super);\n    /** @hidden @internal */\n    function RowNode(model, json) {\n        var _this = _super.call(this, model) || this;\n        _this._dirty = true;\n        _this._drawChildren = [];\n        _this.minHeight = 0;\n        _this.minWidth = 0;\n        RowNode._attributeDefinitions.fromJson(json, _this._attributes);\n        model._addNode(_this);\n        return _this;\n    }\n    /** @hidden @internal */\n    RowNode._fromJson = function (json, model) {\n        var newLayoutNode = new RowNode(model, json);\n        if (json.children != null) {\n            for (var _i = 0, _a = json.children; _i < _a.length; _i++) {\n                var jsonChild = _a[_i];\n                if (jsonChild.type === TabSetNode_1.default.TYPE) {\n                    var child = TabSetNode_1.default._fromJson(jsonChild, model);\n                    newLayoutNode._addChild(child);\n                }\n                else {\n                    var child = RowNode._fromJson(jsonChild, model);\n                    newLayoutNode._addChild(child);\n                }\n            }\n        }\n        return newLayoutNode;\n    };\n    /** @hidden @internal */\n    RowNode._createAttributeDefinitions = function () {\n        var attributeDefinitions = new AttributeDefinitions_1.default();\n        attributeDefinitions.add(\"type\", RowNode.TYPE, true).setType(Attribute_1.default.STRING).setFixed();\n        attributeDefinitions.add(\"id\", undefined).setType(Attribute_1.default.STRING);\n        attributeDefinitions.add(\"weight\", 100).setType(Attribute_1.default.NUMBER);\n        attributeDefinitions.add(\"width\", undefined).setType(Attribute_1.default.NUMBER);\n        attributeDefinitions.add(\"height\", undefined).setType(Attribute_1.default.NUMBER);\n        return attributeDefinitions;\n    };\n    RowNode.prototype.getWeight = function () {\n        return this._attributes.weight;\n    };\n    RowNode.prototype.getWidth = function () {\n        return this._getAttr(\"width\");\n    };\n    RowNode.prototype.getHeight = function () {\n        return this._getAttr(\"height\");\n    };\n    /** @hidden @internal */\n    RowNode.prototype._setWeight = function (weight) {\n        this._attributes.weight = weight;\n    };\n    /** @hidden @internal */\n    RowNode.prototype._layout = function (rect, metrics) {\n        _super.prototype._layout.call(this, rect, metrics);\n        var pixelSize = this._rect._getSize(this.getOrientation());\n        var totalWeight = 0;\n        var fixedPixels = 0;\n        var prefPixels = 0;\n        var totalPrefWeight = 0;\n        var drawChildren = this._getDrawChildren();\n        for (var _i = 0, drawChildren_1 = drawChildren; _i < drawChildren_1.length; _i++) {\n            var child = drawChildren_1[_i];\n            var prefSize = child._getPrefSize(this.getOrientation());\n            if (child._isFixed()) {\n                if (prefSize !== undefined) {\n                    fixedPixels += prefSize;\n                }\n            }\n            else {\n                if (prefSize === undefined) {\n                    totalWeight += child.getWeight();\n                }\n                else {\n                    prefPixels += prefSize;\n                    totalPrefWeight += child.getWeight();\n                }\n            }\n        }\n        var resizePreferred = false;\n        var availablePixels = pixelSize - fixedPixels - prefPixels;\n        if (availablePixels < 0) {\n            availablePixels = pixelSize - fixedPixels;\n            resizePreferred = true;\n            totalWeight += totalPrefWeight;\n        }\n        // assign actual pixel sizes\n        var totalSizeGiven = 0;\n        var variableSize = 0;\n        for (var _a = 0, drawChildren_2 = drawChildren; _a < drawChildren_2.length; _a++) {\n            var child = drawChildren_2[_a];\n            var prefSize = child._getPrefSize(this.getOrientation());\n            if (child._isFixed()) {\n                if (prefSize !== undefined) {\n                    child._setTempSize(prefSize);\n                }\n            }\n            else {\n                if (prefSize == null || resizePreferred) {\n                    if (totalWeight === 0) {\n                        child._setTempSize(0);\n                    }\n                    else {\n                        var minSize = child.getMinSize(this.getOrientation());\n                        var size = Math.floor(availablePixels * (child.getWeight() / totalWeight));\n                        child._setTempSize(Math.max(minSize, size));\n                    }\n                    variableSize += child._getTempSize();\n                }\n                else {\n                    child._setTempSize(prefSize);\n                }\n            }\n            totalSizeGiven += child._getTempSize();\n        }\n        // adjust sizes to exactly fit\n        if (variableSize > 0) {\n            while (totalSizeGiven < pixelSize) {\n                for (var _b = 0, drawChildren_3 = drawChildren; _b < drawChildren_3.length; _b++) {\n                    var child = drawChildren_3[_b];\n                    if (!(child instanceof SplitterNode_1.default)) {\n                        var prefSize = child._getPrefSize(this.getOrientation());\n                        if (!child._isFixed() && (prefSize === undefined || resizePreferred) && totalSizeGiven < pixelSize) {\n                            child._setTempSize(child._getTempSize() + 1);\n                            totalSizeGiven++;\n                        }\n                    }\n                }\n            }\n            // decrease size using nodes not at there minimum\n            while (totalSizeGiven > pixelSize) {\n                var changed = false;\n                for (var _c = 0, drawChildren_4 = drawChildren; _c < drawChildren_4.length; _c++) {\n                    var child = drawChildren_4[_c];\n                    if (!(child instanceof SplitterNode_1.default)) {\n                        var minSize = child.getMinSize(this.getOrientation());\n                        var size = child._getTempSize();\n                        if (size > minSize && totalSizeGiven > pixelSize) {\n                            child._setTempSize(child._getTempSize() - 1);\n                            totalSizeGiven--;\n                            changed = true;\n                        }\n                    }\n                }\n                if (!changed) {\n                    // all children are at min values\n                    break;\n                }\n            }\n            // if still too big then simply reduce all nodes until fits\n            while (totalSizeGiven > pixelSize) {\n                var changed = false;\n                for (var _d = 0, drawChildren_5 = drawChildren; _d < drawChildren_5.length; _d++) {\n                    var child = drawChildren_5[_d];\n                    if (!(child instanceof SplitterNode_1.default)) {\n                        var size = child._getTempSize();\n                        if (size > 0 && totalSizeGiven > pixelSize) {\n                            child._setTempSize(child._getTempSize() - 1);\n                            totalSizeGiven--;\n                            changed = true;\n                        }\n                    }\n                }\n                if (!changed) {\n                    // all children are at 0 values\n                    break;\n                }\n            }\n        }\n        // layout children\n        var p = 0;\n        for (var _e = 0, drawChildren_6 = drawChildren; _e < drawChildren_6.length; _e++) {\n            var child = drawChildren_6[_e];\n            if (this.getOrientation() === Orientation_1.default.HORZ) {\n                child._layout(new Rect_1.default(this._rect.x + p, this._rect.y, child._getTempSize(), this._rect.height), metrics);\n            }\n            else {\n                child._layout(new Rect_1.default(this._rect.x, this._rect.y + p, this._rect.width, child._getTempSize()), metrics);\n            }\n            p += child._getTempSize();\n        }\n        return true;\n    };\n    /** @hidden @internal */\n    RowNode.prototype._getSplitterBounds = function (splitterNode, useMinSize) {\n        if (useMinSize === void 0) { useMinSize = false; }\n        var pBounds = [0, 0];\n        var drawChildren = this._getDrawChildren();\n        var p = drawChildren.indexOf(splitterNode);\n        var node1 = drawChildren[p - 1];\n        var node2 = drawChildren[p + 1];\n        if (this.getOrientation() === Orientation_1.default.HORZ) {\n            var minSize1 = useMinSize ? node1.getMinWidth() : 0;\n            var minSize2 = useMinSize ? node2.getMinWidth() : 0;\n            pBounds[0] = node1.getRect().x + minSize1;\n            pBounds[1] = node2.getRect().getRight() - splitterNode.getWidth() - minSize2;\n        }\n        else {\n            var minSize1 = useMinSize ? node1.getMinHeight() : 0;\n            var minSize2 = useMinSize ? node2.getMinHeight() : 0;\n            pBounds[0] = node1.getRect().y + minSize1;\n            pBounds[1] = node2.getRect().getBottom() - splitterNode.getHeight() - minSize2;\n        }\n        return pBounds;\n    };\n    /** @hidden @internal */\n    RowNode.prototype._calculateSplit = function (splitter, splitterPos) {\n        var rtn;\n        var drawChildren = this._getDrawChildren();\n        var p = drawChildren.indexOf(splitter);\n        var pBounds = this._getSplitterBounds(splitter);\n        var weightedLength = drawChildren[p - 1].getWeight() + drawChildren[p + 1].getWeight();\n        var pixelWidth1 = Math.max(0, splitterPos - pBounds[0]);\n        var pixelWidth2 = Math.max(0, pBounds[1] - splitterPos);\n        if (pixelWidth1 + pixelWidth2 > 0) {\n            var weight1 = (pixelWidth1 * weightedLength) / (pixelWidth1 + pixelWidth2);\n            var weight2 = (pixelWidth2 * weightedLength) / (pixelWidth1 + pixelWidth2);\n            rtn = {\n                node1Id: drawChildren[p - 1].getId(),\n                weight1: weight1,\n                pixelWidth1: pixelWidth1,\n                node2Id: drawChildren[p + 1].getId(),\n                weight2: weight2,\n                pixelWidth2: pixelWidth2,\n            };\n        }\n        return rtn;\n    };\n    /** @hidden @internal */\n    RowNode.prototype._getDrawChildren = function () {\n        if (this._dirty) {\n            this._drawChildren = [];\n            for (var i = 0; i < this._children.length; i++) {\n                var child = this._children[i];\n                if (i !== 0) {\n                    var newSplitter = new SplitterNode_1.default(this._model);\n                    newSplitter._setParent(this);\n                    this._drawChildren.push(newSplitter);\n                }\n                this._drawChildren.push(child);\n            }\n            this._dirty = false;\n        }\n        return this._drawChildren;\n    };\n    /** @hidden @internal */\n    RowNode.prototype.getMinSize = function (orientation) {\n        if (orientation === Orientation_1.default.HORZ) {\n            return this.getMinWidth();\n        }\n        else {\n            return this.getMinHeight();\n        }\n    };\n    /** @hidden @internal */\n    RowNode.prototype.getMinWidth = function () {\n        return this.minWidth;\n    };\n    /** @hidden @internal */\n    RowNode.prototype.getMinHeight = function () {\n        return this.minHeight;\n    };\n    /** @hidden @internal */\n    RowNode.prototype.calcMinSize = function () {\n        var _this = this;\n        this.minHeight = 0;\n        this.minWidth = 0;\n        var first = true;\n        this._children.forEach(function (child) {\n            var c = child;\n            if (c instanceof RowNode) {\n                c.calcMinSize();\n            }\n            if (_this.getOrientation() === Orientation_1.default.VERT) {\n                _this.minHeight += c.getMinHeight();\n                if (!first) {\n                    _this.minHeight += _this._model.getSplitterSize();\n                }\n                _this.minWidth = Math.max(_this.minWidth, c.getMinWidth());\n            }\n            else {\n                _this.minWidth += c.getMinWidth();\n                if (!first) {\n                    _this.minWidth += _this._model.getSplitterSize();\n                }\n                _this.minHeight = Math.max(_this.minHeight, c.getMinHeight());\n            }\n            first = false;\n        });\n    };\n    /** @hidden @internal */\n    RowNode.prototype._tidy = function () {\n        var i = 0;\n        while (i < this._children.length) {\n            var child = this._children[i];\n            if (child instanceof RowNode) {\n                child._tidy();\n                var childChildren = child.getChildren();\n                if (childChildren.length === 0) {\n                    this._removeChild(child);\n                }\n                else if (childChildren.length === 1) {\n                    // hoist child/children up to this level\n                    var subchild = childChildren[0];\n                    this._removeChild(child);\n                    if (subchild instanceof RowNode) {\n                        var subChildrenTotal = 0;\n                        var subChildChildren = subchild.getChildren();\n                        for (var _i = 0, subChildChildren_1 = subChildChildren; _i < subChildChildren_1.length; _i++) {\n                            var ssc = subChildChildren_1[_i];\n                            var subsubChild = ssc;\n                            subChildrenTotal += subsubChild.getWeight();\n                        }\n                        for (var j = 0; j < subChildChildren.length; j++) {\n                            var subsubChild = subChildChildren[j];\n                            subsubChild._setWeight((child.getWeight() * subsubChild.getWeight()) / subChildrenTotal);\n                            this._addChild(subsubChild, i + j);\n                        }\n                    }\n                    else {\n                        subchild._setWeight(child.getWeight());\n                        this._addChild(subchild, i);\n                    }\n                }\n                else {\n                    i++;\n                }\n            }\n            else if (child instanceof TabSetNode_1.default && child.getChildren().length === 0) {\n                if (child.isEnableDeleteWhenEmpty()) {\n                    this._removeChild(child);\n                    if (child === this._model.getMaximizedTabset()) {\n                        this._model._setMaximizedTabset(undefined);\n                    }\n                }\n                else {\n                    i++;\n                }\n            }\n            else {\n                i++;\n            }\n        }\n        // add tabset into empty root\n        if (this === this._model.getRoot() && this._children.length === 0) {\n            var callback = this._model._getOnCreateTabSet();\n            var attrs = callback ? callback() : {};\n            attrs = __assign(__assign({}, attrs), { selected: -1 });\n            var child = new TabSetNode_1.default(this._model, attrs);\n            this._model._setActiveTabset(child);\n            this._addChild(child);\n        }\n    };\n    /** @hidden @internal */\n    RowNode.prototype.canDrop = function (dragNode, x, y) {\n        var yy = y - this._rect.y;\n        var xx = x - this._rect.x;\n        var w = this._rect.width;\n        var h = this._rect.height;\n        var margin = 10; // height of edge rect\n        var half = 50; // half width of edge rect\n        var dropInfo;\n        if (this._model.isEnableEdgeDock() && this._parent === undefined) {\n            // _root row\n            if (x < this._rect.x + margin && yy > h / 2 - half && yy < h / 2 + half) {\n                var dockLocation = DockLocation_1.default.LEFT;\n                var outlineRect = dockLocation.getDockRect(this._rect);\n                outlineRect.width = outlineRect.width / 2;\n                dropInfo = new DropInfo_1.default(this, outlineRect, dockLocation, -1, Types_1.CLASSES.FLEXLAYOUT__OUTLINE_RECT_EDGE);\n            }\n            else if (x > this._rect.getRight() - margin && yy > h / 2 - half && yy < h / 2 + half) {\n                var dockLocation = DockLocation_1.default.RIGHT;\n                var outlineRect = dockLocation.getDockRect(this._rect);\n                outlineRect.width = outlineRect.width / 2;\n                outlineRect.x += outlineRect.width;\n                dropInfo = new DropInfo_1.default(this, outlineRect, dockLocation, -1, Types_1.CLASSES.FLEXLAYOUT__OUTLINE_RECT_EDGE);\n            }\n            else if (y < this._rect.y + margin && xx > w / 2 - half && xx < w / 2 + half) {\n                var dockLocation = DockLocation_1.default.TOP;\n                var outlineRect = dockLocation.getDockRect(this._rect);\n                outlineRect.height = outlineRect.height / 2;\n                dropInfo = new DropInfo_1.default(this, outlineRect, dockLocation, -1, Types_1.CLASSES.FLEXLAYOUT__OUTLINE_RECT_EDGE);\n            }\n            else if (y > this._rect.getBottom() - margin && xx > w / 2 - half && xx < w / 2 + half) {\n                var dockLocation = DockLocation_1.default.BOTTOM;\n                var outlineRect = dockLocation.getDockRect(this._rect);\n                outlineRect.height = outlineRect.height / 2;\n                outlineRect.y += outlineRect.height;\n                dropInfo = new DropInfo_1.default(this, outlineRect, dockLocation, -1, Types_1.CLASSES.FLEXLAYOUT__OUTLINE_RECT_EDGE);\n            }\n            if (dropInfo !== undefined) {\n                if (!dragNode._canDockInto(dragNode, dropInfo)) {\n                    return undefined;\n                }\n            }\n        }\n        return dropInfo;\n    };\n    /** @hidden @internal */\n    RowNode.prototype.drop = function (dragNode, location, index) {\n        var dockLocation = location;\n        var parent = dragNode.getParent();\n        if (parent) {\n            parent._removeChild(dragNode);\n        }\n        if (parent !== undefined && parent.getType() === TabSetNode_1.default.TYPE) {\n            parent._setSelected(0);\n        }\n        if (parent !== undefined && parent.getType() === BorderNode_1.default.TYPE) {\n            parent._setSelected(-1);\n        }\n        var tabSet;\n        if (dragNode instanceof TabSetNode_1.default) {\n            tabSet = dragNode;\n        }\n        else {\n            var callback = this._model._getOnCreateTabSet();\n            tabSet = new TabSetNode_1.default(this._model, callback ? callback(dragNode) : {});\n            tabSet._addChild(dragNode);\n        }\n        var size = this._children.reduce(function (sum, child) {\n            return sum + child.getWeight();\n        }, 0);\n        if (size === 0) {\n            size = 100;\n        }\n        tabSet._setWeight(size / 3);\n        var horz = !this._model.isRootOrientationVertical();\n        if (horz && dockLocation === DockLocation_1.default.LEFT || !horz && dockLocation === DockLocation_1.default.TOP) {\n            this._addChild(tabSet, 0);\n        }\n        else if (horz && dockLocation === DockLocation_1.default.RIGHT || !horz && dockLocation === DockLocation_1.default.BOTTOM) {\n            this._addChild(tabSet);\n        }\n        else if (horz && dockLocation === DockLocation_1.default.TOP || !horz && dockLocation === DockLocation_1.default.LEFT) {\n            var vrow = new RowNode(this._model, {});\n            var hrow_1 = new RowNode(this._model, {});\n            hrow_1._setWeight(75);\n            tabSet._setWeight(25);\n            this._children.forEach(function (child) {\n                hrow_1._addChild(child);\n            });\n            this._removeAll();\n            vrow._addChild(tabSet);\n            vrow._addChild(hrow_1);\n            this._addChild(vrow);\n        }\n        else if (horz && dockLocation === DockLocation_1.default.BOTTOM || !horz && dockLocation === DockLocation_1.default.RIGHT) {\n            var vrow = new RowNode(this._model, {});\n            var hrow_2 = new RowNode(this._model, {});\n            hrow_2._setWeight(75);\n            tabSet._setWeight(25);\n            this._children.forEach(function (child) {\n                hrow_2._addChild(child);\n            });\n            this._removeAll();\n            vrow._addChild(hrow_2);\n            vrow._addChild(tabSet);\n            this._addChild(vrow);\n        }\n        this._model._setActiveTabset(tabSet);\n        this._model._tidy();\n    };\n    RowNode.prototype.toJson = function () {\n        var json = {};\n        RowNode._attributeDefinitions.toJson(json, this._attributes);\n        json.children = [];\n        this._children.forEach(function (child) {\n            json.children.push(child.toJson());\n        });\n        return json;\n    };\n    RowNode.prototype.isEnableDrop = function () {\n        return true;\n    };\n    /** @hidden @internal */\n    RowNode.prototype._getPrefSize = function (orientation) {\n        var prefSize = this.getWidth();\n        if (orientation === Orientation_1.default.VERT) {\n            prefSize = this.getHeight();\n        }\n        return prefSize;\n    };\n    /** @hidden @internal */\n    RowNode.prototype._getAttributeDefinitions = function () {\n        return RowNode._attributeDefinitions;\n    };\n    /** @hidden @internal */\n    RowNode.prototype._updateAttrs = function (json) {\n        RowNode._attributeDefinitions.update(json, this._attributes);\n    };\n    /** @hidden @internal */\n    RowNode.getAttributeDefinitions = function () {\n        return RowNode._attributeDefinitions;\n    };\n    RowNode.TYPE = \"row\";\n    /** @hidden @internal */\n    RowNode._attributeDefinitions = RowNode._createAttributeDefinitions();\n    return RowNode;\n}(Node_1.default));\nexports.default = RowNode;\n\n\n//# sourceURL=webpack://FlexLayout/./src/model/RowNode.ts?");
 
 /***/ }),
 
@@ -536,7 +536,7 @@ eval("\nvar __extends = (this && this.__extends) || (function () {\n    var exte
 /***/ (function(module, exports, __webpack_require__) {
 
 "use strict";
-eval("\nvar __extends = (this && this.__extends) || (function () {\n    var extendStatics = function (d, b) {\n        extendStatics = Object.setPrototypeOf ||\n            ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||\n            function (d, b) { for (var p in b) if (Object.prototype.hasOwnProperty.call(b, p)) d[p] = b[p]; };\n        return extendStatics(d, b);\n    };\n    return function (d, b) {\n        if (typeof b !== \"function\" && b !== null)\n            throw new TypeError(\"Class extends value \" + String(b) + \" is not a constructor or null\");\n        extendStatics(d, b);\n        function __() { this.constructor = d; }\n        d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());\n    };\n})();\nObject.defineProperty(exports, \"__esModule\", { value: true });\nvar Attribute_1 = __webpack_require__(/*! ../Attribute */ \"./src/Attribute.ts\");\nvar AttributeDefinitions_1 = __webpack_require__(/*! ../AttributeDefinitions */ \"./src/AttributeDefinitions.ts\");\nvar DockLocation_1 = __webpack_require__(/*! ../DockLocation */ \"./src/DockLocation.ts\");\nvar DropInfo_1 = __webpack_require__(/*! ../DropInfo */ \"./src/DropInfo.ts\");\nvar Orientation_1 = __webpack_require__(/*! ../Orientation */ \"./src/Orientation.ts\");\nvar Rect_1 = __webpack_require__(/*! ../Rect */ \"./src/Rect.ts\");\nvar Node_1 = __webpack_require__(/*! ./Node */ \"./src/model/Node.ts\");\nvar RowNode_1 = __webpack_require__(/*! ./RowNode */ \"./src/model/RowNode.ts\");\nvar TabNode_1 = __webpack_require__(/*! ./TabNode */ \"./src/model/TabNode.ts\");\nvar Utils_1 = __webpack_require__(/*! ./Utils */ \"./src/model/Utils.ts\");\nvar TabSetNode = /** @class */ (function (_super) {\n    __extends(TabSetNode, _super);\n    /** @hidden @internal */\n    function TabSetNode(model, json) {\n        var _this = _super.call(this, model) || this;\n        TabSetNode._attributeDefinitions.fromJson(json, _this._attributes);\n        model._addNode(_this);\n        _this.calculatedTabBarHeight = 0;\n        _this.calculatedHeaderBarHeight = 0;\n        return _this;\n    }\n    /** @hidden @internal */\n    TabSetNode._fromJson = function (json, model) {\n        var newLayoutNode = new TabSetNode(model, json);\n        if (json.children != null) {\n            json.children.forEach(function (jsonChild) {\n                var child = TabNode_1.default._fromJson(jsonChild, model);\n                newLayoutNode._addChild(child);\n            });\n        }\n        if (json.maximized && json.maximized === true) {\n            model._setMaximizedTabset(newLayoutNode);\n        }\n        if (json.active && json.active === true) {\n            model._setActiveTabset(newLayoutNode);\n        }\n        return newLayoutNode;\n    };\n    /** @hidden @internal */\n    TabSetNode._createAttributeDefinitions = function () {\n        var attributeDefinitions = new AttributeDefinitions_1.default();\n        attributeDefinitions.add(\"type\", TabSetNode.TYPE, true).setType(Attribute_1.default.STRING).setFixed();\n        attributeDefinitions.add(\"id\", undefined).setType(Attribute_1.default.STRING);\n        attributeDefinitions.add(\"weight\", 100).setType(Attribute_1.default.NUMBER);\n        attributeDefinitions.add(\"width\", undefined).setType(Attribute_1.default.NUMBER);\n        attributeDefinitions.add(\"height\", undefined).setType(Attribute_1.default.NUMBER);\n        attributeDefinitions.add(\"selected\", 0).setType(Attribute_1.default.NUMBER);\n        attributeDefinitions.add(\"name\", undefined).setType(Attribute_1.default.STRING);\n        attributeDefinitions.add(\"config\", undefined).setType(\"any\");\n        attributeDefinitions.addInherited(\"enableDeleteWhenEmpty\", \"tabSetEnableDeleteWhenEmpty\");\n        attributeDefinitions.addInherited(\"enableDrop\", \"tabSetEnableDrop\");\n        attributeDefinitions.addInherited(\"enableDrag\", \"tabSetEnableDrag\");\n        attributeDefinitions.addInherited(\"enableDivide\", \"tabSetEnableDivide\");\n        attributeDefinitions.addInherited(\"enableMaximize\", \"tabSetEnableMaximize\");\n        attributeDefinitions.addInherited(\"enableClose\", \"tabSetEnableClose\");\n        attributeDefinitions.addInherited(\"classNameTabStrip\", \"tabSetClassNameTabStrip\");\n        attributeDefinitions.addInherited(\"classNameHeader\", \"tabSetClassNameHeader\");\n        attributeDefinitions.addInherited(\"enableTabStrip\", \"tabSetEnableTabStrip\");\n        attributeDefinitions.addInherited(\"borderInsets\", \"tabSetBorderInsets\");\n        attributeDefinitions.addInherited(\"marginInsets\", \"tabSetMarginInsets\");\n        attributeDefinitions.addInherited(\"minWidth\", \"tabSetMinWidth\");\n        attributeDefinitions.addInherited(\"minHeight\", \"tabSetMinHeight\");\n        attributeDefinitions.addInherited(\"headerHeight\", \"tabSetHeaderHeight\");\n        attributeDefinitions.addInherited(\"tabStripHeight\", \"tabSetTabStripHeight\");\n        attributeDefinitions.addInherited(\"tabLocation\", \"tabSetTabLocation\");\n        attributeDefinitions.addInherited(\"autoSelectTab\", \"tabSetAutoSelectTab\").setType(Attribute_1.default.BOOLEAN);\n        return attributeDefinitions;\n    };\n    TabSetNode.prototype.getName = function () {\n        return this._getAttr(\"name\");\n    };\n    TabSetNode.prototype.getSelected = function () {\n        var selected = this._attributes.selected;\n        if (selected !== undefined) {\n            return selected;\n        }\n        return -1;\n    };\n    TabSetNode.prototype.getSelectedNode = function () {\n        var selected = this.getSelected();\n        if (selected !== -1) {\n            return this._children[selected];\n        }\n        return undefined;\n    };\n    TabSetNode.prototype.getWeight = function () {\n        return this._getAttr(\"weight\");\n    };\n    TabSetNode.prototype.getWidth = function () {\n        return this._getAttr(\"width\");\n    };\n    TabSetNode.prototype.getMinWidth = function () {\n        return this._getAttr(\"minWidth\");\n    };\n    TabSetNode.prototype.getHeight = function () {\n        return this._getAttr(\"height\");\n    };\n    TabSetNode.prototype.getMinHeight = function () {\n        return this._getAttr(\"minHeight\");\n    };\n    /** @hidden @internal */\n    TabSetNode.prototype.getMinSize = function (orientation) {\n        if (orientation === Orientation_1.default.HORZ) {\n            return this.getMinWidth();\n        }\n        else {\n            return this.getMinHeight();\n        }\n    };\n    /**\n     * Returns the config attribute that can be used to store node specific data that\n     * WILL be saved to the json. The config attribute should be changed via the action Actions.updateNodeAttributes rather\n     * than directly, for example:\n     * this.state.model.doAction(\n     *   FlexLayout.Actions.updateNodeAttributes(node.getId(), {config:myConfigObject}));\n     */\n    TabSetNode.prototype.getConfig = function () {\n        return this._attributes.config;\n    };\n    TabSetNode.prototype.isMaximized = function () {\n        return this._model.getMaximizedTabset() === this;\n    };\n    TabSetNode.prototype.isActive = function () {\n        return this._model.getActiveTabset() === this;\n    };\n    TabSetNode.prototype.isEnableDeleteWhenEmpty = function () {\n        return this._getAttr(\"enableDeleteWhenEmpty\");\n    };\n    TabSetNode.prototype.isEnableDrop = function () {\n        return this._getAttr(\"enableDrop\");\n    };\n    TabSetNode.prototype.isEnableDrag = function () {\n        return this._getAttr(\"enableDrag\");\n    };\n    TabSetNode.prototype.isEnableDivide = function () {\n        return this._getAttr(\"enableDivide\");\n    };\n    TabSetNode.prototype.isEnableMaximize = function () {\n        return this._getAttr(\"enableMaximize\");\n    };\n    TabSetNode.prototype.isEnableClose = function () {\n        return this._getAttr(\"enableClose\");\n    };\n    TabSetNode.prototype.canMaximize = function () {\n        if (this.isEnableMaximize()) {\n            // always allow maximize toggle if already maximized\n            if (this.getModel().getMaximizedTabset() === this) {\n                return true;\n            }\n            // only one tabset, so disable\n            if (this.getParent() === this.getModel().getRoot() && this.getModel().getRoot().getChildren().length === 1) {\n                return false;\n            }\n            return true;\n        }\n        return false;\n    };\n    TabSetNode.prototype.isEnableTabStrip = function () {\n        return this._getAttr(\"enableTabStrip\");\n    };\n    TabSetNode.prototype.isAutoSelectTab = function () {\n        return this._getAttr(\"autoSelectTab\");\n    };\n    TabSetNode.prototype.getClassNameTabStrip = function () {\n        return this._getAttr(\"classNameTabStrip\");\n    };\n    TabSetNode.prototype.getClassNameHeader = function () {\n        return this._getAttr(\"classNameHeader\");\n    };\n    /** @hidden @internal */\n    TabSetNode.prototype.calculateHeaderBarHeight = function (metrics) {\n        var headerBarHeight = this._getAttr(\"headerHeight\");\n        if (headerBarHeight !== 0) {\n            // its defined\n            this.calculatedHeaderBarHeight = headerBarHeight;\n        }\n        else {\n            this.calculatedHeaderBarHeight = metrics.headerBarSize;\n        }\n    };\n    /** @hidden @internal */\n    TabSetNode.prototype.calculateTabBarHeight = function (metrics) {\n        var tabBarHeight = this._getAttr(\"tabStripHeight\");\n        if (tabBarHeight !== 0) {\n            // its defined\n            this.calculatedTabBarHeight = tabBarHeight;\n        }\n        else {\n            this.calculatedTabBarHeight = metrics.tabBarSize;\n        }\n    };\n    TabSetNode.prototype.getHeaderHeight = function () {\n        return this.calculatedHeaderBarHeight;\n    };\n    TabSetNode.prototype.getTabStripHeight = function () {\n        return this.calculatedTabBarHeight;\n    };\n    TabSetNode.prototype.getTabLocation = function () {\n        return this._getAttr(\"tabLocation\");\n    };\n    /** @hidden @internal */\n    TabSetNode.prototype._setWeight = function (weight) {\n        this._attributes.weight = weight;\n    };\n    /** @hidden @internal */\n    TabSetNode.prototype._setSelected = function (index) {\n        this._attributes.selected = index;\n    };\n    /** @hidden @internal */\n    TabSetNode.prototype.canDrop = function (dragNode, x, y) {\n        var dropInfo;\n        if (dragNode === this) {\n            var dockLocation = DockLocation_1.default.CENTER;\n            var outlineRect = this._tabHeaderRect;\n            dropInfo = new DropInfo_1.default(this, outlineRect, dockLocation, -1, \"flexlayout__outline_rect\");\n        }\n        else if (this._contentRect.contains(x, y)) {\n            var dockLocation = DockLocation_1.default.getLocation(this._contentRect, x, y);\n            var outlineRect = dockLocation.getDockRect(this._rect);\n            dropInfo = new DropInfo_1.default(this, outlineRect, dockLocation, -1, \"flexlayout__outline_rect\");\n        }\n        else if (this._tabHeaderRect != null && this._tabHeaderRect.contains(x, y)) {\n            var r = void 0;\n            var yy = void 0;\n            var h = void 0;\n            if (this._children.length === 0) {\n                r = this._tabHeaderRect.clone();\n                yy = r.y + 3;\n                h = r.height - 4;\n                r.width = 2;\n            }\n            else {\n                var child = this._children[0];\n                r = child.getTabRect();\n                yy = r.y;\n                h = r.height;\n                var p = this._tabHeaderRect.x;\n                var childCenter = 0;\n                for (var i = 0; i < this._children.length; i++) {\n                    child = this._children[i];\n                    r = child.getTabRect();\n                    childCenter = r.x + r.width / 2;\n                    if (x >= p && x < childCenter) {\n                        var dockLocation = DockLocation_1.default.CENTER;\n                        var outlineRect = new Rect_1.default(r.x - 2, yy, 3, h);\n                        dropInfo = new DropInfo_1.default(this, outlineRect, dockLocation, i, \"flexlayout__outline_rect\");\n                        break;\n                    }\n                    p = childCenter;\n                }\n            }\n            if (dropInfo == null) {\n                var dockLocation = DockLocation_1.default.CENTER;\n                var outlineRect = new Rect_1.default(r.getRight() - 2, yy, 3, h);\n                dropInfo = new DropInfo_1.default(this, outlineRect, dockLocation, this._children.length, \"flexlayout__outline_rect\");\n            }\n        }\n        if (!dragNode._canDockInto(dragNode, dropInfo)) {\n            return undefined;\n        }\n        return dropInfo;\n    };\n    /** @hidden @internal */\n    TabSetNode.prototype._layout = function (rect, metrics) {\n        var _this = this;\n        this.calculateHeaderBarHeight(metrics);\n        this.calculateTabBarHeight(metrics);\n        if (this.isMaximized()) {\n            rect = this._model.getRoot().getRect();\n        }\n        rect = rect.removeInsets(this._getAttr(\"marginInsets\"));\n        this._rect = rect;\n        rect = rect.removeInsets(this._getAttr(\"borderInsets\"));\n        var showHeader = this.getName() !== undefined;\n        var y = 0;\n        var h = 0;\n        if (showHeader) {\n            y += this.calculatedHeaderBarHeight;\n            h += this.calculatedHeaderBarHeight;\n        }\n        if (this.isEnableTabStrip()) {\n            if (this.getTabLocation() === \"top\") {\n                this._tabHeaderRect = new Rect_1.default(rect.x, rect.y + y, rect.width, this.calculatedTabBarHeight);\n            }\n            else {\n                this._tabHeaderRect = new Rect_1.default(rect.x, rect.y + rect.height - this.calculatedTabBarHeight, rect.width, this.calculatedTabBarHeight);\n            }\n            h += this.calculatedTabBarHeight;\n            if (this.getTabLocation() === \"top\") {\n                y += this.calculatedTabBarHeight;\n            }\n        }\n        this._contentRect = new Rect_1.default(rect.x, rect.y + y, rect.width, rect.height - h);\n        this._children.forEach(function (child, i) {\n            child._layout(_this._contentRect, metrics);\n            child._setVisible(i === _this.getSelected());\n        });\n    };\n    /** @hidden @internal */\n    TabSetNode.prototype._delete = function () {\n        this._parent._removeChild(this);\n    };\n    /** @hidden @internal */\n    TabSetNode.prototype._remove = function (node) {\n        var removedIndex = this._removeChild(node);\n        this._model._tidy();\n        Utils_1.adjustSelectedIndex(this, removedIndex);\n    };\n    /** @hidden @internal */\n    TabSetNode.prototype.drop = function (dragNode, location, index, select) {\n        var _this = this;\n        var dockLocation = location;\n        if (this === dragNode) {\n            // tabset drop into itself\n            return; // dock back to itself\n        }\n        var dragParent = dragNode.getParent();\n        var fromIndex = 0;\n        if (dragParent !== undefined) {\n            fromIndex = dragParent._removeChild(dragNode);\n            Utils_1.adjustSelectedIndex(dragParent, fromIndex);\n        }\n        // if dropping a tab back to same tabset and moving to forward position then reduce insertion index\n        if (dragNode.getType() === TabNode_1.default.TYPE && dragParent === this && fromIndex < index && index > 0) {\n            index--;\n        }\n        // simple_bundled dock to existing tabset\n        if (dockLocation === DockLocation_1.default.CENTER) {\n            var insertPos_1 = index;\n            if (insertPos_1 === -1) {\n                insertPos_1 = this._children.length;\n            }\n            if (dragNode.getType() === TabNode_1.default.TYPE) {\n                this._addChild(dragNode, insertPos_1);\n                if (select || (select !== false && this.isAutoSelectTab())) {\n                    this._setSelected(insertPos_1);\n                }\n                // console.log(\"added child at : \" + insertPos);\n            }\n            else {\n                dragNode.getChildren().forEach(function (child, i) {\n                    _this._addChild(child, insertPos_1);\n                    // console.log(\"added child at : \" + insertPos);\n                    insertPos_1++;\n                });\n            }\n            this._model._setActiveTabset(this);\n        }\n        else {\n            var tabSet = void 0;\n            if (dragNode instanceof TabNode_1.default) {\n                // create new tabset parent\n                // console.log(\"create a new tabset\");\n                var callback = this._model._getOnCreateTabSet();\n                tabSet = new TabSetNode(this._model, callback ? callback(dragNode) : {});\n                tabSet._addChild(dragNode);\n                // console.log(\"added child at end\");\n                dragParent = tabSet;\n            }\n            else {\n                tabSet = dragNode;\n            }\n            var parentRow = this._parent;\n            var pos = parentRow.getChildren().indexOf(this);\n            if (parentRow.getOrientation() === dockLocation._orientation) {\n                tabSet._setWeight(this.getWeight() / 2);\n                this._setWeight(this.getWeight() / 2);\n                // console.log(\"added child 50% size at: \" +  pos + dockLocation.indexPlus);\n                parentRow._addChild(tabSet, pos + dockLocation._indexPlus);\n            }\n            else {\n                // create a new row to host the new tabset (it will go in the opposite direction)\n                // console.log(\"create a new row\");\n                var newRow = new RowNode_1.default(this._model, {});\n                newRow._setWeight(this.getWeight());\n                newRow._addChild(this);\n                this._setWeight(50);\n                tabSet._setWeight(50);\n                // console.log(\"added child 50% size at: \" +  dockLocation.indexPlus);\n                newRow._addChild(tabSet, dockLocation._indexPlus);\n                parentRow._removeChild(this);\n                parentRow._addChild(newRow, pos);\n            }\n            this._model._setActiveTabset(tabSet);\n        }\n        this._model._tidy();\n    };\n    TabSetNode.prototype.toJson = function () {\n        var json = {};\n        TabSetNode._attributeDefinitions.toJson(json, this._attributes);\n        json.children = this._children.map(function (child) { return child.toJson(); });\n        if (this.isActive()) {\n            json.active = true;\n        }\n        if (this.isMaximized()) {\n            json.maximized = true;\n        }\n        return json;\n    };\n    /** @hidden @internal */\n    TabSetNode.prototype._updateAttrs = function (json) {\n        TabSetNode._attributeDefinitions.update(json, this._attributes);\n    };\n    /** @hidden @internal */\n    TabSetNode.prototype._getAttributeDefinitions = function () {\n        return TabSetNode._attributeDefinitions;\n    };\n    /** @hidden @internal */\n    TabSetNode.prototype._getPrefSize = function (orientation) {\n        var prefSize = this.getWidth();\n        if (orientation === Orientation_1.default.VERT) {\n            prefSize = this.getHeight();\n        }\n        return prefSize;\n    };\n    /** @hidden @internal */\n    TabSetNode.getAttributeDefinitions = function () {\n        return TabSetNode._attributeDefinitions;\n    };\n    TabSetNode.TYPE = \"tabset\";\n    /** @hidden @internal */\n    TabSetNode._attributeDefinitions = TabSetNode._createAttributeDefinitions();\n    return TabSetNode;\n}(Node_1.default));\nexports.default = TabSetNode;\n\n\n//# sourceURL=webpack://FlexLayout/./src/model/TabSetNode.ts?");
+eval("\nvar __extends = (this && this.__extends) || (function () {\n    var extendStatics = function (d, b) {\n        extendStatics = Object.setPrototypeOf ||\n            ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||\n            function (d, b) { for (var p in b) if (Object.prototype.hasOwnProperty.call(b, p)) d[p] = b[p]; };\n        return extendStatics(d, b);\n    };\n    return function (d, b) {\n        if (typeof b !== \"function\" && b !== null)\n            throw new TypeError(\"Class extends value \" + String(b) + \" is not a constructor or null\");\n        extendStatics(d, b);\n        function __() { this.constructor = d; }\n        d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());\n    };\n})();\nObject.defineProperty(exports, \"__esModule\", { value: true });\nvar Attribute_1 = __webpack_require__(/*! ../Attribute */ \"./src/Attribute.ts\");\nvar AttributeDefinitions_1 = __webpack_require__(/*! ../AttributeDefinitions */ \"./src/AttributeDefinitions.ts\");\nvar DockLocation_1 = __webpack_require__(/*! ../DockLocation */ \"./src/DockLocation.ts\");\nvar DropInfo_1 = __webpack_require__(/*! ../DropInfo */ \"./src/DropInfo.ts\");\nvar Orientation_1 = __webpack_require__(/*! ../Orientation */ \"./src/Orientation.ts\");\nvar Rect_1 = __webpack_require__(/*! ../Rect */ \"./src/Rect.ts\");\nvar Types_1 = __webpack_require__(/*! ../Types */ \"./src/Types.ts\");\nvar Node_1 = __webpack_require__(/*! ./Node */ \"./src/model/Node.ts\");\nvar RowNode_1 = __webpack_require__(/*! ./RowNode */ \"./src/model/RowNode.ts\");\nvar TabNode_1 = __webpack_require__(/*! ./TabNode */ \"./src/model/TabNode.ts\");\nvar Utils_1 = __webpack_require__(/*! ./Utils */ \"./src/model/Utils.ts\");\nvar TabSetNode = /** @class */ (function (_super) {\n    __extends(TabSetNode, _super);\n    /** @hidden @internal */\n    function TabSetNode(model, json) {\n        var _this = _super.call(this, model) || this;\n        TabSetNode._attributeDefinitions.fromJson(json, _this._attributes);\n        model._addNode(_this);\n        _this.calculatedTabBarHeight = 0;\n        _this.calculatedHeaderBarHeight = 0;\n        return _this;\n    }\n    /** @hidden @internal */\n    TabSetNode._fromJson = function (json, model) {\n        var newLayoutNode = new TabSetNode(model, json);\n        if (json.children != null) {\n            json.children.forEach(function (jsonChild) {\n                var child = TabNode_1.default._fromJson(jsonChild, model);\n                newLayoutNode._addChild(child);\n            });\n        }\n        if (newLayoutNode._children.length === 0) {\n            newLayoutNode._setSelected(-1);\n        }\n        if (json.maximized && json.maximized === true) {\n            model._setMaximizedTabset(newLayoutNode);\n        }\n        if (json.active && json.active === true) {\n            model._setActiveTabset(newLayoutNode);\n        }\n        return newLayoutNode;\n    };\n    /** @hidden @internal */\n    TabSetNode._createAttributeDefinitions = function () {\n        var attributeDefinitions = new AttributeDefinitions_1.default();\n        attributeDefinitions.add(\"type\", TabSetNode.TYPE, true).setType(Attribute_1.default.STRING).setFixed();\n        attributeDefinitions.add(\"id\", undefined).setType(Attribute_1.default.STRING);\n        attributeDefinitions.add(\"weight\", 100).setType(Attribute_1.default.NUMBER);\n        attributeDefinitions.add(\"width\", undefined).setType(Attribute_1.default.NUMBER);\n        attributeDefinitions.add(\"height\", undefined).setType(Attribute_1.default.NUMBER);\n        attributeDefinitions.add(\"selected\", 0).setType(Attribute_1.default.NUMBER);\n        attributeDefinitions.add(\"name\", undefined).setType(Attribute_1.default.STRING);\n        attributeDefinitions.add(\"config\", undefined).setType(\"any\");\n        attributeDefinitions.addInherited(\"enableDeleteWhenEmpty\", \"tabSetEnableDeleteWhenEmpty\");\n        attributeDefinitions.addInherited(\"enableDrop\", \"tabSetEnableDrop\");\n        attributeDefinitions.addInherited(\"enableDrag\", \"tabSetEnableDrag\");\n        attributeDefinitions.addInherited(\"enableDivide\", \"tabSetEnableDivide\");\n        attributeDefinitions.addInherited(\"enableMaximize\", \"tabSetEnableMaximize\");\n        attributeDefinitions.addInherited(\"enableClose\", \"tabSetEnableClose\");\n        attributeDefinitions.addInherited(\"classNameTabStrip\", \"tabSetClassNameTabStrip\");\n        attributeDefinitions.addInherited(\"classNameHeader\", \"tabSetClassNameHeader\");\n        attributeDefinitions.addInherited(\"enableTabStrip\", \"tabSetEnableTabStrip\");\n        attributeDefinitions.addInherited(\"borderInsets\", \"tabSetBorderInsets\");\n        attributeDefinitions.addInherited(\"marginInsets\", \"tabSetMarginInsets\");\n        attributeDefinitions.addInherited(\"minWidth\", \"tabSetMinWidth\");\n        attributeDefinitions.addInherited(\"minHeight\", \"tabSetMinHeight\");\n        attributeDefinitions.addInherited(\"headerHeight\", \"tabSetHeaderHeight\");\n        attributeDefinitions.addInherited(\"tabStripHeight\", \"tabSetTabStripHeight\");\n        attributeDefinitions.addInherited(\"tabLocation\", \"tabSetTabLocation\");\n        attributeDefinitions.addInherited(\"autoSelectTab\", \"tabSetAutoSelectTab\").setType(Attribute_1.default.BOOLEAN);\n        return attributeDefinitions;\n    };\n    TabSetNode.prototype.getName = function () {\n        return this._getAttr(\"name\");\n    };\n    TabSetNode.prototype.getSelected = function () {\n        var selected = this._attributes.selected;\n        if (selected !== undefined) {\n            return selected;\n        }\n        return -1;\n    };\n    TabSetNode.prototype.getSelectedNode = function () {\n        var selected = this.getSelected();\n        if (selected !== -1) {\n            return this._children[selected];\n        }\n        return undefined;\n    };\n    TabSetNode.prototype.getWeight = function () {\n        return this._getAttr(\"weight\");\n    };\n    TabSetNode.prototype.getWidth = function () {\n        return this._getAttr(\"width\");\n    };\n    TabSetNode.prototype.getMinWidth = function () {\n        return this._getAttr(\"minWidth\");\n    };\n    TabSetNode.prototype.getHeight = function () {\n        return this._getAttr(\"height\");\n    };\n    TabSetNode.prototype.getMinHeight = function () {\n        return this._getAttr(\"minHeight\");\n    };\n    /** @hidden @internal */\n    TabSetNode.prototype.getMinSize = function (orientation) {\n        if (orientation === Orientation_1.default.HORZ) {\n            return this.getMinWidth();\n        }\n        else {\n            return this.getMinHeight();\n        }\n    };\n    /**\n     * Returns the config attribute that can be used to store node specific data that\n     * WILL be saved to the json. The config attribute should be changed via the action Actions.updateNodeAttributes rather\n     * than directly, for example:\n     * this.state.model.doAction(\n     *   FlexLayout.Actions.updateNodeAttributes(node.getId(), {config:myConfigObject}));\n     */\n    TabSetNode.prototype.getConfig = function () {\n        return this._attributes.config;\n    };\n    TabSetNode.prototype.isMaximized = function () {\n        return this._model.getMaximizedTabset() === this;\n    };\n    TabSetNode.prototype.isActive = function () {\n        return this._model.getActiveTabset() === this;\n    };\n    TabSetNode.prototype.isEnableDeleteWhenEmpty = function () {\n        return this._getAttr(\"enableDeleteWhenEmpty\");\n    };\n    TabSetNode.prototype.isEnableDrop = function () {\n        return this._getAttr(\"enableDrop\");\n    };\n    TabSetNode.prototype.isEnableDrag = function () {\n        return this._getAttr(\"enableDrag\");\n    };\n    TabSetNode.prototype.isEnableDivide = function () {\n        return this._getAttr(\"enableDivide\");\n    };\n    TabSetNode.prototype.isEnableMaximize = function () {\n        return this._getAttr(\"enableMaximize\");\n    };\n    TabSetNode.prototype.isEnableClose = function () {\n        return this._getAttr(\"enableClose\");\n    };\n    TabSetNode.prototype.canMaximize = function () {\n        if (this.isEnableMaximize()) {\n            // always allow maximize toggle if already maximized\n            if (this.getModel().getMaximizedTabset() === this) {\n                return true;\n            }\n            // only one tabset, so disable\n            if (this.getParent() === this.getModel().getRoot() && this.getModel().getRoot().getChildren().length === 1) {\n                return false;\n            }\n            return true;\n        }\n        return false;\n    };\n    TabSetNode.prototype.isEnableTabStrip = function () {\n        return this._getAttr(\"enableTabStrip\");\n    };\n    TabSetNode.prototype.isAutoSelectTab = function () {\n        return this._getAttr(\"autoSelectTab\");\n    };\n    TabSetNode.prototype.getClassNameTabStrip = function () {\n        return this._getAttr(\"classNameTabStrip\");\n    };\n    TabSetNode.prototype.getClassNameHeader = function () {\n        return this._getAttr(\"classNameHeader\");\n    };\n    /** @hidden @internal */\n    TabSetNode.prototype.calculateHeaderBarHeight = function (metrics) {\n        var headerBarHeight = this._getAttr(\"headerHeight\");\n        if (headerBarHeight !== 0) {\n            // its defined\n            this.calculatedHeaderBarHeight = headerBarHeight;\n        }\n        else {\n            this.calculatedHeaderBarHeight = metrics.headerBarSize;\n        }\n    };\n    /** @hidden @internal */\n    TabSetNode.prototype.calculateTabBarHeight = function (metrics) {\n        var tabBarHeight = this._getAttr(\"tabStripHeight\");\n        if (tabBarHeight !== 0) {\n            // its defined\n            this.calculatedTabBarHeight = tabBarHeight;\n        }\n        else {\n            this.calculatedTabBarHeight = metrics.tabBarSize;\n        }\n    };\n    TabSetNode.prototype.getHeaderHeight = function () {\n        return this.calculatedHeaderBarHeight;\n    };\n    TabSetNode.prototype.getTabStripHeight = function () {\n        return this.calculatedTabBarHeight;\n    };\n    TabSetNode.prototype.getTabLocation = function () {\n        return this._getAttr(\"tabLocation\");\n    };\n    /** @hidden @internal */\n    TabSetNode.prototype._setWeight = function (weight) {\n        this._attributes.weight = weight;\n    };\n    /** @hidden @internal */\n    TabSetNode.prototype._setSelected = function (index) {\n        this._attributes.selected = index;\n    };\n    /** @hidden @internal */\n    TabSetNode.prototype.canDrop = function (dragNode, x, y) {\n        var dropInfo;\n        if (dragNode === this) {\n            var dockLocation = DockLocation_1.default.CENTER;\n            var outlineRect = this._tabHeaderRect;\n            dropInfo = new DropInfo_1.default(this, outlineRect, dockLocation, -1, Types_1.CLASSES.FLEXLAYOUT__OUTLINE_RECT);\n        }\n        else if (this._contentRect.contains(x, y)) {\n            var dockLocation = DockLocation_1.default.getLocation(this._contentRect, x, y);\n            var outlineRect = dockLocation.getDockRect(this._rect);\n            dropInfo = new DropInfo_1.default(this, outlineRect, dockLocation, -1, Types_1.CLASSES.FLEXLAYOUT__OUTLINE_RECT);\n        }\n        else if (this._tabHeaderRect != null && this._tabHeaderRect.contains(x, y)) {\n            var r = void 0;\n            var yy = void 0;\n            var h = void 0;\n            if (this._children.length === 0) {\n                r = this._tabHeaderRect.clone();\n                yy = r.y + 3;\n                h = r.height - 4;\n                r.width = 2;\n            }\n            else {\n                var child = this._children[0];\n                r = child.getTabRect();\n                yy = r.y;\n                h = r.height;\n                var p = this._tabHeaderRect.x;\n                var childCenter = 0;\n                for (var i = 0; i < this._children.length; i++) {\n                    child = this._children[i];\n                    r = child.getTabRect();\n                    childCenter = r.x + r.width / 2;\n                    if (x >= p && x < childCenter) {\n                        var dockLocation = DockLocation_1.default.CENTER;\n                        var outlineRect = new Rect_1.default(r.x - 2, yy, 3, h);\n                        dropInfo = new DropInfo_1.default(this, outlineRect, dockLocation, i, Types_1.CLASSES.FLEXLAYOUT__OUTLINE_RECT);\n                        break;\n                    }\n                    p = childCenter;\n                }\n            }\n            if (dropInfo == null) {\n                var dockLocation = DockLocation_1.default.CENTER;\n                var outlineRect = new Rect_1.default(r.getRight() - 2, yy, 3, h);\n                dropInfo = new DropInfo_1.default(this, outlineRect, dockLocation, this._children.length, Types_1.CLASSES.FLEXLAYOUT__OUTLINE_RECT);\n            }\n        }\n        if (!dragNode._canDockInto(dragNode, dropInfo)) {\n            return undefined;\n        }\n        return dropInfo;\n    };\n    /** @hidden @internal */\n    TabSetNode.prototype._layout = function (rect, metrics) {\n        var _this = this;\n        this.calculateHeaderBarHeight(metrics);\n        this.calculateTabBarHeight(metrics);\n        if (this.isMaximized()) {\n            rect = this._model.getRoot().getRect();\n        }\n        rect = rect.removeInsets(this._getAttr(\"marginInsets\"));\n        this._rect = rect;\n        rect = rect.removeInsets(this._getAttr(\"borderInsets\"));\n        var showHeader = this.getName() !== undefined;\n        var y = 0;\n        var h = 0;\n        if (showHeader) {\n            y += this.calculatedHeaderBarHeight;\n            h += this.calculatedHeaderBarHeight;\n        }\n        if (this.isEnableTabStrip()) {\n            if (this.getTabLocation() === \"top\") {\n                this._tabHeaderRect = new Rect_1.default(rect.x, rect.y + y, rect.width, this.calculatedTabBarHeight);\n            }\n            else {\n                this._tabHeaderRect = new Rect_1.default(rect.x, rect.y + rect.height - this.calculatedTabBarHeight, rect.width, this.calculatedTabBarHeight);\n            }\n            h += this.calculatedTabBarHeight;\n            if (this.getTabLocation() === \"top\") {\n                y += this.calculatedTabBarHeight;\n            }\n        }\n        this._contentRect = new Rect_1.default(rect.x, rect.y + y, rect.width, rect.height - h);\n        this._children.forEach(function (child, i) {\n            child._layout(_this._contentRect, metrics);\n            child._setVisible(i === _this.getSelected());\n        });\n    };\n    /** @hidden @internal */\n    TabSetNode.prototype._delete = function () {\n        this._parent._removeChild(this);\n    };\n    /** @hidden @internal */\n    TabSetNode.prototype._remove = function (node) {\n        var removedIndex = this._removeChild(node);\n        this._model._tidy();\n        Utils_1.adjustSelectedIndex(this, removedIndex);\n    };\n    /** @hidden @internal */\n    TabSetNode.prototype.drop = function (dragNode, location, index, select) {\n        var _this = this;\n        var dockLocation = location;\n        if (this === dragNode) {\n            // tabset drop into itself\n            return; // dock back to itself\n        }\n        var dragParent = dragNode.getParent();\n        var fromIndex = 0;\n        if (dragParent !== undefined) {\n            fromIndex = dragParent._removeChild(dragNode);\n            Utils_1.adjustSelectedIndex(dragParent, fromIndex);\n        }\n        // if dropping a tab back to same tabset and moving to forward position then reduce insertion index\n        if (dragNode.getType() === TabNode_1.default.TYPE && dragParent === this && fromIndex < index && index > 0) {\n            index--;\n        }\n        // simple_bundled dock to existing tabset\n        if (dockLocation === DockLocation_1.default.CENTER) {\n            var insertPos_1 = index;\n            if (insertPos_1 === -1) {\n                insertPos_1 = this._children.length;\n            }\n            if (dragNode.getType() === TabNode_1.default.TYPE) {\n                this._addChild(dragNode, insertPos_1);\n                if (select || (select !== false && this.isAutoSelectTab())) {\n                    this._setSelected(insertPos_1);\n                }\n                // console.log(\"added child at : \" + insertPos);\n            }\n            else {\n                dragNode.getChildren().forEach(function (child, i) {\n                    _this._addChild(child, insertPos_1);\n                    // console.log(\"added child at : \" + insertPos);\n                    insertPos_1++;\n                });\n            }\n            this._model._setActiveTabset(this);\n        }\n        else {\n            var tabSet = void 0;\n            if (dragNode instanceof TabNode_1.default) {\n                // create new tabset parent\n                // console.log(\"create a new tabset\");\n                var callback = this._model._getOnCreateTabSet();\n                tabSet = new TabSetNode(this._model, callback ? callback(dragNode) : {});\n                tabSet._addChild(dragNode);\n                // console.log(\"added child at end\");\n                dragParent = tabSet;\n            }\n            else {\n                tabSet = dragNode;\n            }\n            var parentRow = this._parent;\n            var pos = parentRow.getChildren().indexOf(this);\n            if (parentRow.getOrientation() === dockLocation._orientation) {\n                tabSet._setWeight(this.getWeight() / 2);\n                this._setWeight(this.getWeight() / 2);\n                // console.log(\"added child 50% size at: \" +  pos + dockLocation.indexPlus);\n                parentRow._addChild(tabSet, pos + dockLocation._indexPlus);\n            }\n            else {\n                // create a new row to host the new tabset (it will go in the opposite direction)\n                // console.log(\"create a new row\");\n                var newRow = new RowNode_1.default(this._model, {});\n                newRow._setWeight(this.getWeight());\n                newRow._addChild(this);\n                this._setWeight(50);\n                tabSet._setWeight(50);\n                // console.log(\"added child 50% size at: \" +  dockLocation.indexPlus);\n                newRow._addChild(tabSet, dockLocation._indexPlus);\n                parentRow._removeChild(this);\n                parentRow._addChild(newRow, pos);\n            }\n            this._model._setActiveTabset(tabSet);\n        }\n        this._model._tidy();\n    };\n    TabSetNode.prototype.toJson = function () {\n        var json = {};\n        TabSetNode._attributeDefinitions.toJson(json, this._attributes);\n        json.children = this._children.map(function (child) { return child.toJson(); });\n        if (this.isActive()) {\n            json.active = true;\n        }\n        if (this.isMaximized()) {\n            json.maximized = true;\n        }\n        return json;\n    };\n    /** @hidden @internal */\n    TabSetNode.prototype._updateAttrs = function (json) {\n        TabSetNode._attributeDefinitions.update(json, this._attributes);\n    };\n    /** @hidden @internal */\n    TabSetNode.prototype._getAttributeDefinitions = function () {\n        return TabSetNode._attributeDefinitions;\n    };\n    /** @hidden @internal */\n    TabSetNode.prototype._getPrefSize = function (orientation) {\n        var prefSize = this.getWidth();\n        if (orientation === Orientation_1.default.VERT) {\n            prefSize = this.getHeight();\n        }\n        return prefSize;\n    };\n    /** @hidden @internal */\n    TabSetNode.getAttributeDefinitions = function () {\n        return TabSetNode._attributeDefinitions;\n    };\n    TabSetNode.TYPE = \"tabset\";\n    /** @hidden @internal */\n    TabSetNode._attributeDefinitions = TabSetNode._createAttributeDefinitions();\n    return TabSetNode;\n}(Node_1.default));\nexports.default = TabSetNode;\n\n\n//# sourceURL=webpack://FlexLayout/./src/model/TabSetNode.ts?");
 
 /***/ }),
 
@@ -560,7 +560,7 @@ eval("\nObject.defineProperty(exports, \"__esModule\", { value: true });\nexport
 /***/ (function(module, exports, __webpack_require__) {
 
 "use strict";
-eval("\nObject.defineProperty(exports, \"__esModule\", { value: true });\nexports.BorderButton = void 0;\nvar React = __webpack_require__(/*! react */ \"react\");\nvar __1 = __webpack_require__(/*! .. */ \"./src/index.ts\");\nvar Actions_1 = __webpack_require__(/*! ../model/Actions */ \"./src/model/Actions.ts\");\nvar Rect_1 = __webpack_require__(/*! ../Rect */ \"./src/Rect.ts\");\nvar ICloseType_1 = __webpack_require__(/*! ../model/ICloseType */ \"./src/model/ICloseType.ts\");\nvar Types_1 = __webpack_require__(/*! ../Types */ \"./src/Types.ts\");\n/** @hidden @internal */\nvar BorderButton = function (props) {\n    var layout = props.layout, node = props.node, selected = props.selected, border = props.border, iconFactory = props.iconFactory, titleFactory = props.titleFactory, icons = props.icons;\n    var selfRef = React.useRef(null);\n    var onMouseDown = function (event) {\n        var message = layout.i18nName(__1.I18nLabel.Move_Tab, node.getName());\n        props.layout.dragStart(event, message, node, node.isEnableDrag(), onClick, function (event2) { return undefined; });\n    };\n    var onClick = function () {\n        layout.doAction(Actions_1.default.selectTab(node.getId()));\n    };\n    var isClosable = function () {\n        var closeType = node.getCloseType();\n        if (selected || closeType === ICloseType_1.ICloseType.Always) {\n            return true;\n        }\n        if (closeType === ICloseType_1.ICloseType.Visible) {\n            // not selected but x should be visible due to hover\n            if (window.matchMedia && window.matchMedia(\"(hover: hover) and (pointer: fine)\").matches) {\n                return true;\n            }\n        }\n        return false;\n    };\n    var onClose = function (event) {\n        if (isClosable()) {\n            layout.doAction(Actions_1.default.deleteTab(node.getId()));\n        }\n        else {\n            onClick();\n        }\n    };\n    var onCloseMouseDown = function (event) {\n        event.stopPropagation();\n    };\n    React.useLayoutEffect(function () {\n        updateRect();\n    });\n    var updateRect = function () {\n        // record position of tab in border\n        var clientRect = layout.getDomRect();\n        var r = selfRef.current.getBoundingClientRect();\n        node._setTabRect(new Rect_1.default(r.left - clientRect.left, r.top - clientRect.top, r.width, r.height));\n    };\n    var cm = layout.getClassName;\n    var classNames = cm(Types_1.CLASSES.FLEXLAYOUT__BORDER_BUTTON) + \" \" + cm(Types_1.CLASSES.FLEXLAYOUT__BORDER_BUTTON_ + border);\n    if (selected) {\n        classNames += \" \" + cm(Types_1.CLASSES.FLEXLAYOUT__BORDER_BUTTON__SELECTED);\n    }\n    else {\n        classNames += \" \" + cm(Types_1.CLASSES.FLEXLAYOUT__BORDER_BUTTON__UNSELECTED);\n    }\n    if (node.getClassName() !== undefined) {\n        classNames += \" \" + node.getClassName();\n    }\n    var leadingContent = iconFactory ? iconFactory(node) : undefined;\n    var titleContent = node.getName();\n    var name = node.getName();\n    function isTitleObject(obj) {\n        return obj.titleContent !== undefined;\n    }\n    if (titleFactory !== undefined) {\n        var titleObj = titleFactory(node);\n        if (titleObj !== undefined) {\n            if (typeof titleObj === \"string\") {\n                titleContent = titleObj;\n                name = titleObj;\n            }\n            else if (isTitleObject(titleObj)) {\n                titleContent = titleObj.titleContent;\n                name = titleObj.name;\n            }\n            else {\n                titleContent = titleObj;\n            }\n        }\n    }\n    if (typeof leadingContent === undefined && typeof node.getIcon() !== undefined) {\n        leadingContent = React.createElement(\"img\", { src: node.getIcon(), alt: \"leadingContent\" });\n    }\n    var buttons = [];\n    // allow customization of leading contents (icon) and contents\n    var renderState = { leading: leadingContent, content: titleContent, name: name, buttons: buttons };\n    layout.customizeTab(node, renderState);\n    node._setRenderedName(renderState.name);\n    var content = React.createElement(\"div\", { className: cm(Types_1.CLASSES.FLEXLAYOUT__BORDER_BUTTON_CONTENT) }, renderState.content);\n    var leading = React.createElement(\"div\", { className: cm(Types_1.CLASSES.FLEXLAYOUT__BORDER_BUTTON_LEADING) }, renderState.leading);\n    if (node.isEnableClose()) {\n        var closeTitle = layout.i18nName(__1.I18nLabel.Close_Tab);\n        buttons.push(React.createElement(\"div\", { key: \"close\", title: closeTitle, className: cm(Types_1.CLASSES.FLEXLAYOUT__BORDER_BUTTON_TRAILING), onMouseDown: onCloseMouseDown, onClick: onClose, onTouchStart: onCloseMouseDown }, icons === null || icons === void 0 ? void 0 : icons.close));\n    }\n    return (React.createElement(\"div\", { ref: selfRef, style: {}, className: classNames, onMouseDown: onMouseDown, onTouchStart: onMouseDown, title: node.getHelpText() },\n        leading,\n        content,\n        buttons));\n};\nexports.BorderButton = BorderButton;\n\n\n//# sourceURL=webpack://FlexLayout/./src/view/BorderButton.tsx?");
+eval("\nObject.defineProperty(exports, \"__esModule\", { value: true });\nexports.BorderButton = void 0;\nvar React = __webpack_require__(/*! react */ \"react\");\nvar __1 = __webpack_require__(/*! .. */ \"./src/index.ts\");\nvar Actions_1 = __webpack_require__(/*! ../model/Actions */ \"./src/model/Actions.ts\");\nvar Rect_1 = __webpack_require__(/*! ../Rect */ \"./src/Rect.ts\");\nvar ICloseType_1 = __webpack_require__(/*! ../model/ICloseType */ \"./src/model/ICloseType.ts\");\nvar Types_1 = __webpack_require__(/*! ../Types */ \"./src/Types.ts\");\nvar TabSet_1 = __webpack_require__(/*! ./TabSet */ \"./src/view/TabSet.tsx\");\n/** @hidden @internal */\nvar BorderButton = function (props) {\n    var layout = props.layout, node = props.node, selected = props.selected, border = props.border, iconFactory = props.iconFactory, titleFactory = props.titleFactory, icons = props.icons, path = props.path;\n    var selfRef = React.useRef(null);\n    var onMouseDown = function (event) {\n        if (!TabSet_1.isAuxMouseEvent(event)) {\n            var message = layout.i18nName(__1.I18nLabel.Move_Tab, node.getName());\n            props.layout.dragStart(event, message, node, node.isEnableDrag(), onClick, function (event2) { return undefined; });\n        }\n    };\n    var onAuxMouseClick = function (event) {\n        if (TabSet_1.isAuxMouseEvent(event)) {\n            layout.auxMouseClick(node, event);\n        }\n    };\n    var onContextMenu = function (event) {\n        layout.showContextMenu(node, event);\n    };\n    var onClick = function () {\n        layout.doAction(Actions_1.default.selectTab(node.getId()));\n    };\n    var isClosable = function () {\n        var closeType = node.getCloseType();\n        if (selected || closeType === ICloseType_1.ICloseType.Always) {\n            return true;\n        }\n        if (closeType === ICloseType_1.ICloseType.Visible) {\n            // not selected but x should be visible due to hover\n            if (window.matchMedia && window.matchMedia(\"(hover: hover) and (pointer: fine)\").matches) {\n                return true;\n            }\n        }\n        return false;\n    };\n    var onClose = function (event) {\n        if (isClosable()) {\n            layout.doAction(Actions_1.default.deleteTab(node.getId()));\n        }\n        else {\n            onClick();\n        }\n    };\n    var onCloseMouseDown = function (event) {\n        event.stopPropagation();\n    };\n    React.useLayoutEffect(function () {\n        updateRect();\n    });\n    var updateRect = function () {\n        // record position of tab in border\n        var clientRect = layout.getDomRect();\n        var r = selfRef.current.getBoundingClientRect();\n        node._setTabRect(new Rect_1.default(r.left - clientRect.left, r.top - clientRect.top, r.width, r.height));\n    };\n    var cm = layout.getClassName;\n    var classNames = cm(Types_1.CLASSES.FLEXLAYOUT__BORDER_BUTTON) + \" \" + cm(Types_1.CLASSES.FLEXLAYOUT__BORDER_BUTTON_ + border);\n    if (selected) {\n        classNames += \" \" + cm(Types_1.CLASSES.FLEXLAYOUT__BORDER_BUTTON__SELECTED);\n    }\n    else {\n        classNames += \" \" + cm(Types_1.CLASSES.FLEXLAYOUT__BORDER_BUTTON__UNSELECTED);\n    }\n    if (node.getClassName() !== undefined) {\n        classNames += \" \" + node.getClassName();\n    }\n    var leadingContent = iconFactory ? iconFactory(node) : undefined;\n    var titleContent = node.getName();\n    var name = node.getName();\n    function isTitleObject(obj) {\n        return obj.titleContent !== undefined;\n    }\n    if (titleFactory !== undefined) {\n        var titleObj = titleFactory(node);\n        if (titleObj !== undefined) {\n            if (typeof titleObj === \"string\") {\n                titleContent = titleObj;\n                name = titleObj;\n            }\n            else if (isTitleObject(titleObj)) {\n                titleContent = titleObj.titleContent;\n                name = titleObj.name;\n            }\n            else {\n                titleContent = titleObj;\n            }\n        }\n    }\n    if (leadingContent === undefined && node.getIcon() !== undefined) {\n        leadingContent = React.createElement(\"img\", { src: node.getIcon(), alt: \"leadingContent\" });\n    }\n    var buttons = [];\n    // allow customization of leading contents (icon) and contents\n    var renderState = { leading: leadingContent, content: titleContent, name: name, buttons: buttons };\n    layout.customizeTab(node, renderState);\n    node._setRenderedName(renderState.name);\n    var content = React.createElement(\"div\", { className: cm(Types_1.CLASSES.FLEXLAYOUT__BORDER_BUTTON_CONTENT) }, renderState.content);\n    var leading = React.createElement(\"div\", { className: cm(Types_1.CLASSES.FLEXLAYOUT__BORDER_BUTTON_LEADING) }, renderState.leading);\n    if (node.isEnableClose()) {\n        var closeTitle = layout.i18nName(__1.I18nLabel.Close_Tab);\n        buttons.push(React.createElement(\"div\", { key: \"close\", \"data-layout-path\": path + \"/button/close\", title: closeTitle, className: cm(Types_1.CLASSES.FLEXLAYOUT__BORDER_BUTTON_TRAILING), onMouseDown: onCloseMouseDown, onClick: onClose, onTouchStart: onCloseMouseDown }, icons === null || icons === void 0 ? void 0 : icons.close));\n    }\n    return (React.createElement(\"div\", { ref: selfRef, style: {}, className: classNames, \"data-layout-path\": path, onMouseDown: onMouseDown, onClick: onAuxMouseClick, onAuxClick: onAuxMouseClick, onContextMenu: onContextMenu, onTouchStart: onMouseDown, title: node.getHelpText() },\n        leading,\n        content,\n        buttons));\n};\nexports.BorderButton = BorderButton;\n\n\n//# sourceURL=webpack://FlexLayout/./src/view/BorderButton.tsx?");
 
 /***/ }),
 
@@ -572,7 +572,7 @@ eval("\nObject.defineProperty(exports, \"__esModule\", { value: true });\nexport
 /***/ (function(module, exports, __webpack_require__) {
 
 "use strict";
-eval("\nObject.defineProperty(exports, \"__esModule\", { value: true });\nexports.BorderTabSet = void 0;\nvar React = __webpack_require__(/*! react */ \"react\");\nvar DockLocation_1 = __webpack_require__(/*! ../DockLocation */ \"./src/DockLocation.ts\");\nvar BorderButton_1 = __webpack_require__(/*! ./BorderButton */ \"./src/view/BorderButton.tsx\");\nvar PopupMenu_1 = __webpack_require__(/*! ../PopupMenu */ \"./src/PopupMenu.tsx\");\nvar Actions_1 = __webpack_require__(/*! ../model/Actions */ \"./src/model/Actions.ts\");\nvar I18nLabel_1 = __webpack_require__(/*! ../I18nLabel */ \"./src/I18nLabel.ts\");\nvar TabOverflowHook_1 = __webpack_require__(/*! ./TabOverflowHook */ \"./src/view/TabOverflowHook.tsx\");\nvar Orientation_1 = __webpack_require__(/*! ../Orientation */ \"./src/Orientation.ts\");\nvar Types_1 = __webpack_require__(/*! ../Types */ \"./src/Types.ts\");\n/** @hidden @internal */\nvar BorderTabSet = function (props) {\n    var border = props.border, layout = props.layout, iconFactory = props.iconFactory, titleFactory = props.titleFactory, icons = props.icons;\n    var toolbarRef = React.useRef(null);\n    var overflowbuttonRef = React.useRef(null);\n    var stickyButtonsRef = React.useRef(null);\n    var _a = TabOverflowHook_1.useTabOverflow(border, Orientation_1.default.flip(border.getOrientation()), toolbarRef, stickyButtonsRef), selfRef = _a.selfRef, position = _a.position, userControlledLeft = _a.userControlledLeft, hiddenTabs = _a.hiddenTabs, onMouseWheel = _a.onMouseWheel;\n    var onInterceptMouseDown = function (event) {\n        event.stopPropagation();\n    };\n    var onOverflowClick = function () {\n        var element = overflowbuttonRef.current;\n        PopupMenu_1.showPopup(layout.getRootDiv(), element, hiddenTabs, onOverflowItemSelect, layout.getClassName);\n    };\n    var onOverflowItemSelect = function (item) {\n        layout.doAction(Actions_1.default.selectTab(item.node.getId()));\n        userControlledLeft.current = false;\n    };\n    var onFloatTab = function () {\n        var selectedTabNode = border.getChildren()[border.getSelected()];\n        if (selectedTabNode !== undefined) {\n            layout.doAction(Actions_1.default.floatTab(selectedTabNode.getId()));\n        }\n    };\n    var cm = layout.getClassName;\n    var style = border.getTabHeaderRect().styleWithPosition({});\n    var tabs = [];\n    var layoutTab = function (i) {\n        var isSelected = border.getSelected() === i;\n        var child = border.getChildren()[i];\n        tabs.push(React.createElement(BorderButton_1.BorderButton, { layout: layout, border: border.getLocation().getName(), node: child, key: child.getId(), selected: isSelected, iconFactory: iconFactory, titleFactory: titleFactory, icons: icons }));\n    };\n    for (var i = 0; i < border.getChildren().length; i++) {\n        layoutTab(i);\n    }\n    var borderClasses = cm(Types_1.CLASSES.FLEXLAYOUT__BORDER) + \" \" + cm(Types_1.CLASSES.FLEXLAYOUT__BORDER_ + border.getLocation().getName());\n    if (border.getClassName() !== undefined) {\n        borderClasses += \" \" + border.getClassName();\n    }\n    // allow customization of tabset right/bottom buttons\n    var buttons = [];\n    var renderState = { headerContent: {}, buttons: buttons, stickyButtons: [], headerButtons: [] };\n    layout.customizeTabSet(border, renderState);\n    buttons = renderState.buttons;\n    var toolbar;\n    if (hiddenTabs.length > 0) {\n        var overflowTitle = layout.i18nName(I18nLabel_1.I18nLabel.Overflow_Menu_Tooltip);\n        buttons.push(React.createElement(\"button\", { key: \"overflowbutton\", ref: overflowbuttonRef, className: cm(\"flexlayout__border_toolbar_button_overflow\") + \" \" + cm(\"flexlayout__border_toolbar_button_overflow_\" + border.getLocation().getName()), title: overflowTitle, onClick: onOverflowClick, onMouseDown: onInterceptMouseDown, onTouchStart: onInterceptMouseDown }, icons === null || icons === void 0 ? void 0 :\n            icons.more,\n            hiddenTabs.length));\n    }\n    var selectedIndex = border.getSelected();\n    if (selectedIndex !== -1) {\n        var selectedTabNode = border.getChildren()[selectedIndex];\n        if (selectedTabNode !== undefined && layout.isSupportsPopout() && selectedTabNode.isEnableFloat() && !selectedTabNode.isFloating()) {\n            var floatTitle = layout.i18nName(I18nLabel_1.I18nLabel.Float_Tab);\n            buttons.push(React.createElement(\"button\", { key: \"float\", title: floatTitle, className: cm(Types_1.CLASSES.FLEXLAYOUT__BORDER_TOOLBAR_BUTTON) + \" \" + cm(Types_1.CLASSES.FLEXLAYOUT__BORDER_TOOLBAR_BUTTON_FLOAT), onClick: onFloatTab, onMouseDown: onInterceptMouseDown, onTouchStart: onInterceptMouseDown }));\n        }\n    }\n    toolbar = (React.createElement(\"div\", { key: \"toolbar\", ref: toolbarRef, className: cm(Types_1.CLASSES.FLEXLAYOUT__BORDER_TOOLBAR) + \" \" + cm(Types_1.CLASSES.FLEXLAYOUT__BORDER_TOOLBAR_ + border.getLocation().getName()) }, buttons));\n    style = layout.styleFont(style);\n    var innerStyle = {};\n    var borderHeight = border.getBorderBarSize() - 1;\n    if (border.getLocation() === DockLocation_1.default.LEFT) {\n        innerStyle = { right: borderHeight, height: borderHeight, top: position };\n    }\n    else if (border.getLocation() === DockLocation_1.default.RIGHT) {\n        innerStyle = { left: borderHeight, height: borderHeight, top: position };\n    }\n    else {\n        innerStyle = { height: borderHeight, left: position };\n    }\n    return (React.createElement(\"div\", { ref: selfRef, style: style, className: borderClasses, onWheel: onMouseWheel },\n        React.createElement(\"div\", { style: { height: borderHeight }, className: cm(Types_1.CLASSES.FLEXLAYOUT__BORDER_INNER) + \" \" + cm(Types_1.CLASSES.FLEXLAYOUT__BORDER_INNER_ + border.getLocation().getName()) },\n            React.createElement(\"div\", { style: innerStyle, className: cm(Types_1.CLASSES.FLEXLAYOUT__BORDER_INNER_TAB_CONTAINER) + \" \" + cm(Types_1.CLASSES.FLEXLAYOUT__BORDER_INNER_TAB_CONTAINER_ + border.getLocation().getName()) }, tabs)),\n        toolbar));\n};\nexports.BorderTabSet = BorderTabSet;\n\n\n//# sourceURL=webpack://FlexLayout/./src/view/BorderTabSet.tsx?");
+eval("\nObject.defineProperty(exports, \"__esModule\", { value: true });\nexports.BorderTabSet = void 0;\nvar React = __webpack_require__(/*! react */ \"react\");\nvar DockLocation_1 = __webpack_require__(/*! ../DockLocation */ \"./src/DockLocation.ts\");\nvar BorderButton_1 = __webpack_require__(/*! ./BorderButton */ \"./src/view/BorderButton.tsx\");\nvar PopupMenu_1 = __webpack_require__(/*! ../PopupMenu */ \"./src/PopupMenu.tsx\");\nvar Actions_1 = __webpack_require__(/*! ../model/Actions */ \"./src/model/Actions.ts\");\nvar I18nLabel_1 = __webpack_require__(/*! ../I18nLabel */ \"./src/I18nLabel.ts\");\nvar TabOverflowHook_1 = __webpack_require__(/*! ./TabOverflowHook */ \"./src/view/TabOverflowHook.tsx\");\nvar Orientation_1 = __webpack_require__(/*! ../Orientation */ \"./src/Orientation.ts\");\nvar Types_1 = __webpack_require__(/*! ../Types */ \"./src/Types.ts\");\nvar TabSet_1 = __webpack_require__(/*! ./TabSet */ \"./src/view/TabSet.tsx\");\n/** @hidden @internal */\nvar BorderTabSet = function (props) {\n    var border = props.border, layout = props.layout, iconFactory = props.iconFactory, titleFactory = props.titleFactory, icons = props.icons, path = props.path;\n    var toolbarRef = React.useRef(null);\n    var overflowbuttonRef = React.useRef(null);\n    var stickyButtonsRef = React.useRef(null);\n    var _a = TabOverflowHook_1.useTabOverflow(border, Orientation_1.default.flip(border.getOrientation()), toolbarRef, stickyButtonsRef), selfRef = _a.selfRef, position = _a.position, userControlledLeft = _a.userControlledLeft, hiddenTabs = _a.hiddenTabs, onMouseWheel = _a.onMouseWheel;\n    var onAuxMouseClick = function (event) {\n        if (TabSet_1.isAuxMouseEvent(event)) {\n            layout.auxMouseClick(border, event);\n        }\n    };\n    var onContextMenu = function (event) {\n        layout.showContextMenu(border, event);\n    };\n    var onInterceptMouseDown = function (event) {\n        event.stopPropagation();\n    };\n    var onOverflowClick = function (event) {\n        var element = overflowbuttonRef.current;\n        PopupMenu_1.showPopup(layout.getRootDiv(), element, hiddenTabs, onOverflowItemSelect, layout.getClassName);\n        event.stopPropagation();\n    };\n    var onOverflowItemSelect = function (item) {\n        layout.doAction(Actions_1.default.selectTab(item.node.getId()));\n        userControlledLeft.current = false;\n    };\n    var onFloatTab = function (event) {\n        var selectedTabNode = border.getChildren()[border.getSelected()];\n        if (selectedTabNode !== undefined) {\n            layout.doAction(Actions_1.default.floatTab(selectedTabNode.getId()));\n        }\n        event.stopPropagation();\n    };\n    var cm = layout.getClassName;\n    var style = border.getTabHeaderRect().styleWithPosition({});\n    var tabs = [];\n    var layoutTab = function (i) {\n        var isSelected = border.getSelected() === i;\n        var child = border.getChildren()[i];\n        tabs.push(React.createElement(BorderButton_1.BorderButton, { layout: layout, border: border.getLocation().getName(), node: child, path: path + \"/tb\" + i, key: child.getId(), selected: isSelected, iconFactory: iconFactory, titleFactory: titleFactory, icons: icons }));\n    };\n    for (var i = 0; i < border.getChildren().length; i++) {\n        layoutTab(i);\n    }\n    var borderClasses = cm(Types_1.CLASSES.FLEXLAYOUT__BORDER) + \" \" + cm(Types_1.CLASSES.FLEXLAYOUT__BORDER_ + border.getLocation().getName());\n    if (border.getClassName() !== undefined) {\n        borderClasses += \" \" + border.getClassName();\n    }\n    // allow customization of tabset right/bottom buttons\n    var buttons = [];\n    var renderState = { headerContent: {}, buttons: buttons, stickyButtons: [], headerButtons: [] };\n    layout.customizeTabSet(border, renderState);\n    buttons = renderState.buttons;\n    var toolbar;\n    if (hiddenTabs.length > 0) {\n        var overflowTitle = layout.i18nName(I18nLabel_1.I18nLabel.Overflow_Menu_Tooltip);\n        buttons.push(React.createElement(\"button\", { key: \"overflowbutton\", ref: overflowbuttonRef, className: cm(Types_1.CLASSES.FLEXLAYOUT__BORDER_TOOLBAR_BUTTON_OVERFLOW) + \" \" + cm(Types_1.CLASSES.FLEXLAYOUT__BORDER_TOOLBAR_BUTTON_OVERFLOW_ + border.getLocation().getName()), title: overflowTitle, onClick: onOverflowClick, onMouseDown: onInterceptMouseDown, onTouchStart: onInterceptMouseDown }, icons === null || icons === void 0 ? void 0 :\n            icons.more,\n            hiddenTabs.length));\n    }\n    var selectedIndex = border.getSelected();\n    if (selectedIndex !== -1) {\n        var selectedTabNode = border.getChildren()[selectedIndex];\n        if (selectedTabNode !== undefined && layout.isSupportsPopout() && selectedTabNode.isEnableFloat() && !selectedTabNode.isFloating()) {\n            var floatTitle = layout.i18nName(I18nLabel_1.I18nLabel.Float_Tab);\n            buttons.push(React.createElement(\"button\", { key: \"float\", title: floatTitle, className: cm(Types_1.CLASSES.FLEXLAYOUT__BORDER_TOOLBAR_BUTTON) + \" \" + cm(Types_1.CLASSES.FLEXLAYOUT__BORDER_TOOLBAR_BUTTON_FLOAT), onClick: onFloatTab, onMouseDown: onInterceptMouseDown, onTouchStart: onInterceptMouseDown }));\n        }\n    }\n    toolbar = (React.createElement(\"div\", { key: \"toolbar\", ref: toolbarRef, className: cm(Types_1.CLASSES.FLEXLAYOUT__BORDER_TOOLBAR) + \" \" + cm(Types_1.CLASSES.FLEXLAYOUT__BORDER_TOOLBAR_ + border.getLocation().getName()) }, buttons));\n    style = layout.styleFont(style);\n    var innerStyle = {};\n    var borderHeight = border.getBorderBarSize() - 1;\n    if (border.getLocation() === DockLocation_1.default.LEFT) {\n        innerStyle = { right: borderHeight, height: borderHeight, top: position };\n    }\n    else if (border.getLocation() === DockLocation_1.default.RIGHT) {\n        innerStyle = { left: borderHeight, height: borderHeight, top: position };\n    }\n    else {\n        innerStyle = { height: borderHeight, left: position };\n    }\n    return (React.createElement(\"div\", { ref: selfRef, dir: \"ltr\", style: style, className: borderClasses, \"data-layout-path\": path, onClick: onAuxMouseClick, onAuxClick: onAuxMouseClick, onContextMenu: onContextMenu, onWheel: onMouseWheel },\n        React.createElement(\"div\", { style: { height: borderHeight }, className: cm(Types_1.CLASSES.FLEXLAYOUT__BORDER_INNER) + \" \" + cm(Types_1.CLASSES.FLEXLAYOUT__BORDER_INNER_ + border.getLocation().getName()) },\n            React.createElement(\"div\", { style: innerStyle, className: cm(Types_1.CLASSES.FLEXLAYOUT__BORDER_INNER_TAB_CONTAINER) + \" \" + cm(Types_1.CLASSES.FLEXLAYOUT__BORDER_INNER_TAB_CONTAINER_ + border.getLocation().getName()) }, tabs)),\n        toolbar));\n};\nexports.BorderTabSet = BorderTabSet;\n\n\n//# sourceURL=webpack://FlexLayout/./src/view/BorderTabSet.tsx?");
 
 /***/ }),
 
@@ -596,7 +596,7 @@ eval("\nvar __extends = (this && this.__extends) || (function () {\n    var exte
 /***/ (function(module, exports, __webpack_require__) {
 
 "use strict";
-eval("\nvar __spreadArray = (this && this.__spreadArray) || function (to, from) {\n    for (var i = 0, il = from.length, j = to.length; i < il; i++, j++)\n        to[j] = from[i];\n    return to;\n};\nObject.defineProperty(exports, \"__esModule\", { value: true });\nexports.FloatingWindow = void 0;\nvar React = __webpack_require__(/*! react */ \"react\");\nvar react_dom_1 = __webpack_require__(/*! react-dom */ \"react-dom\");\nvar Types_1 = __webpack_require__(/*! ../Types */ \"./src/Types.ts\");\n/** @hidden @internal */\nvar FloatingWindow = function (props) {\n    var title = props.title, id = props.id, url = props.url, rect = props.rect, onCloseWindow = props.onCloseWindow, onSetWindow = props.onSetWindow, children = props.children;\n    var popoutWindow = React.useRef(null);\n    var _a = React.useState(undefined), content = _a[0], setContent = _a[1];\n    React.useLayoutEffect(function () {\n        var r = rect;\n        // Make a local copy of the styles from the current window which will be passed into\n        // the floating window. window.document.styleSheets is mutable and we can't guarantee\n        // the styles will exist when 'popoutWindow.load' is called below.\n        var styles = Array.from(window.document.styleSheets).reduce(function (result, styleSheet) {\n            try {\n                return __spreadArray(__spreadArray([], result), [\n                    {\n                        href: styleSheet.href,\n                        type: styleSheet.type,\n                        rules: Array.from(styleSheet.cssRules).map(function (rule) { return rule.cssText; }),\n                    }\n                ]);\n            }\n            catch (e) {\n                // styleSheet.cssRules can throw security exception\n                return result;\n            }\n        }, []);\n        popoutWindow.current = window.open(url, id, \"left=\" + r.x + \",top=\" + r.y + \",width=\" + r.width + \",height=\" + r.height);\n        if (popoutWindow.current !== null) {\n            onSetWindow(id, popoutWindow.current);\n            // listen for parent unloading to remove all popouts\n            window.addEventListener(\"beforeunload\", function () {\n                if (popoutWindow.current) {\n                    popoutWindow.current.close();\n                    popoutWindow.current = null;\n                }\n            });\n            popoutWindow.current.addEventListener(\"load\", function () {\n                var popoutDocument = popoutWindow.current.document;\n                popoutDocument.title = title;\n                var popoutContent = popoutDocument.createElement(\"div\");\n                popoutContent.className = Types_1.CLASSES.FLEXLAYOUT__FLOATING_WINDOW_CONTENT;\n                popoutDocument.body.appendChild(popoutContent);\n                copyStyles(popoutDocument, styles).then(function () {\n                    setContent(popoutContent);\n                });\n                // listen for popout unloading (needs to be after load for safari)\n                popoutWindow.current.addEventListener(\"beforeunload\", function () {\n                    onCloseWindow(id);\n                });\n            });\n        }\n        else {\n            console.warn(\"Unable to open window \" + url);\n            onCloseWindow(id);\n        }\n        return function () {\n            // delay so refresh will close window\n            setTimeout(function () {\n                if (popoutWindow.current) {\n                    popoutWindow.current.close();\n                    popoutWindow.current = null;\n                }\n            }, 0);\n        };\n    }, []);\n    if (content !== undefined) {\n        return react_dom_1.createPortal(children, content);\n    }\n    else {\n        return null;\n    }\n};\nexports.FloatingWindow = FloatingWindow;\n/** @hidden @internal */\nfunction copyStyles(doc, styleSheets) {\n    var head = doc.head;\n    var promises = [];\n    styleSheets.forEach(function (styleSheet) {\n        if (styleSheet.href) {\n            // prefer links since they will keep paths to images etc\n            var styleElement_1 = doc.createElement(\"link\");\n            styleElement_1.type = styleSheet.type;\n            styleElement_1.rel = \"stylesheet\";\n            styleElement_1.href = styleSheet.href;\n            head.appendChild(styleElement_1);\n            promises.push(new Promise(function (resolve, reject) {\n                styleElement_1.onload = function () { return resolve(true); };\n            }));\n        }\n        else {\n            var style_1 = doc.createElement(\"style\");\n            styleSheet.rules.forEach(function (rule) { return style_1.appendChild(doc.createTextNode(rule)); });\n            head.appendChild(style_1);\n        }\n    });\n    return Promise.all(promises);\n}\n\n\n//# sourceURL=webpack://FlexLayout/./src/view/FloatingWindow.tsx?");
+eval("\nvar __spreadArray = (this && this.__spreadArray) || function (to, from) {\n    for (var i = 0, il = from.length, j = to.length; i < il; i++, j++)\n        to[j] = from[i];\n    return to;\n};\nObject.defineProperty(exports, \"__esModule\", { value: true });\nexports.FloatingWindow = void 0;\nvar React = __webpack_require__(/*! react */ \"react\");\nvar react_dom_1 = __webpack_require__(/*! react-dom */ \"react-dom\");\nvar Types_1 = __webpack_require__(/*! ../Types */ \"./src/Types.ts\");\n/** @hidden @internal */\nvar FloatingWindow = function (props) {\n    var title = props.title, id = props.id, url = props.url, rect = props.rect, onCloseWindow = props.onCloseWindow, onSetWindow = props.onSetWindow, children = props.children;\n    var popoutWindow = React.useRef(null);\n    var _a = React.useState(undefined), content = _a[0], setContent = _a[1];\n    React.useLayoutEffect(function () {\n        var r = rect;\n        // Make a local copy of the styles from the current window which will be passed into\n        // the floating window. window.document.styleSheets is mutable and we can't guarantee\n        // the styles will exist when 'popoutWindow.load' is called below.\n        var styles = Array.from(window.document.styleSheets).reduce(function (result, styleSheet) {\n            var rules = undefined;\n            try {\n                rules = styleSheet.cssRules;\n            }\n            catch (e) {\n                // styleSheet.cssRules can throw security exception\n            }\n            try {\n                return __spreadArray(__spreadArray([], result), [\n                    {\n                        href: styleSheet.href,\n                        type: styleSheet.type,\n                        rules: rules ? Array.from(rules).map(function (rule) { return rule.cssText; }) : null,\n                    }\n                ]);\n            }\n            catch (e) {\n                return result;\n            }\n        }, []);\n        popoutWindow.current = window.open(url, id, \"left=\" + r.x + \",top=\" + r.y + \",width=\" + r.width + \",height=\" + r.height);\n        if (popoutWindow.current !== null) {\n            onSetWindow(id, popoutWindow.current);\n            // listen for parent unloading to remove all popouts\n            window.addEventListener(\"beforeunload\", function () {\n                if (popoutWindow.current) {\n                    popoutWindow.current.close();\n                    popoutWindow.current = null;\n                }\n            });\n            popoutWindow.current.addEventListener(\"load\", function () {\n                var popoutDocument = popoutWindow.current.document;\n                popoutDocument.title = title;\n                var popoutContent = popoutDocument.createElement(\"div\");\n                popoutContent.className = Types_1.CLASSES.FLEXLAYOUT__FLOATING_WINDOW_CONTENT;\n                popoutDocument.body.appendChild(popoutContent);\n                copyStyles(popoutDocument, styles).then(function () {\n                    setContent(popoutContent);\n                });\n                // listen for popout unloading (needs to be after load for safari)\n                popoutWindow.current.addEventListener(\"beforeunload\", function () {\n                    onCloseWindow(id);\n                });\n            });\n        }\n        else {\n            console.warn(\"Unable to open window \" + url);\n            onCloseWindow(id);\n        }\n        return function () {\n            // delay so refresh will close window\n            setTimeout(function () {\n                if (popoutWindow.current) {\n                    popoutWindow.current.close();\n                    popoutWindow.current = null;\n                }\n            }, 0);\n        };\n    }, []);\n    if (content !== undefined) {\n        return react_dom_1.createPortal(children, content);\n    }\n    else {\n        return null;\n    }\n};\nexports.FloatingWindow = FloatingWindow;\n/** @hidden @internal */\nfunction copyStyles(doc, styleSheets) {\n    var head = doc.head;\n    var promises = [];\n    styleSheets.forEach(function (styleSheet) {\n        if (styleSheet.href) {\n            // prefer links since they will keep paths to images etc\n            var styleElement_1 = doc.createElement(\"link\");\n            styleElement_1.type = styleSheet.type;\n            styleElement_1.rel = \"stylesheet\";\n            styleElement_1.href = styleSheet.href;\n            head.appendChild(styleElement_1);\n            promises.push(new Promise(function (resolve, reject) {\n                styleElement_1.onload = function () { return resolve(true); };\n            }));\n        }\n        else {\n            if (styleSheet.rules) {\n                var style_1 = doc.createElement(\"style\");\n                styleSheet.rules.forEach(function (rule) { return style_1.appendChild(doc.createTextNode(rule)); });\n                head.appendChild(style_1);\n            }\n        }\n    });\n    return Promise.all(promises);\n}\n\n\n//# sourceURL=webpack://FlexLayout/./src/view/FloatingWindow.tsx?");
 
 /***/ }),
 
@@ -620,7 +620,7 @@ eval("\nObject.defineProperty(exports, \"__esModule\", { value: true });\nexport
 /***/ (function(module, exports, __webpack_require__) {
 
 "use strict";
-eval("\nvar __extends = (this && this.__extends) || (function () {\n    var extendStatics = function (d, b) {\n        extendStatics = Object.setPrototypeOf ||\n            ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||\n            function (d, b) { for (var p in b) if (Object.prototype.hasOwnProperty.call(b, p)) d[p] = b[p]; };\n        return extendStatics(d, b);\n    };\n    return function (d, b) {\n        if (typeof b !== \"function\" && b !== null)\n            throw new TypeError(\"Class extends value \" + String(b) + \" is not a constructor or null\");\n        extendStatics(d, b);\n        function __() { this.constructor = d; }\n        d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());\n    };\n})();\nvar __spreadArray = (this && this.__spreadArray) || function (to, from) {\n    for (var i = 0, il = from.length, j = to.length; i < il; i++, j++)\n        to[j] = from[i];\n    return to;\n};\nObject.defineProperty(exports, \"__esModule\", { value: true });\nexports.Layout = void 0;\nvar React = __webpack_require__(/*! react */ \"react\");\nvar DockLocation_1 = __webpack_require__(/*! ../DockLocation */ \"./src/DockLocation.ts\");\nvar DragDrop_1 = __webpack_require__(/*! ../DragDrop */ \"./src/DragDrop.ts\");\nvar Actions_1 = __webpack_require__(/*! ../model/Actions */ \"./src/model/Actions.ts\");\nvar BorderNode_1 = __webpack_require__(/*! ../model/BorderNode */ \"./src/model/BorderNode.ts\");\nvar SplitterNode_1 = __webpack_require__(/*! ../model/SplitterNode */ \"./src/model/SplitterNode.ts\");\nvar TabNode_1 = __webpack_require__(/*! ../model/TabNode */ \"./src/model/TabNode.ts\");\nvar TabSetNode_1 = __webpack_require__(/*! ../model/TabSetNode */ \"./src/model/TabSetNode.ts\");\nvar Rect_1 = __webpack_require__(/*! ../Rect */ \"./src/Rect.ts\");\nvar Types_1 = __webpack_require__(/*! ../Types */ \"./src/Types.ts\");\nvar BorderTabSet_1 = __webpack_require__(/*! ./BorderTabSet */ \"./src/view/BorderTabSet.tsx\");\nvar Splitter_1 = __webpack_require__(/*! ./Splitter */ \"./src/view/Splitter.tsx\");\nvar Tab_1 = __webpack_require__(/*! ./Tab */ \"./src/view/Tab.tsx\");\nvar TabSet_1 = __webpack_require__(/*! ./TabSet */ \"./src/view/TabSet.tsx\");\nvar FloatingWindow_1 = __webpack_require__(/*! ./FloatingWindow */ \"./src/view/FloatingWindow.tsx\");\nvar FloatingWindowTab_1 = __webpack_require__(/*! ./FloatingWindowTab */ \"./src/view/FloatingWindowTab.tsx\");\nvar TabFloating_1 = __webpack_require__(/*! ./TabFloating */ \"./src/view/TabFloating.tsx\");\n// Popout windows work in latest browsers based on webkit (Chrome, Opera, Safari, latest Edge) and Firefox. They do\n// not work on any version if IE or the original Edge browser\n// Assume any recent desktop browser not IE or original Edge will work\n/** @hidden @internal */\n// @ts-ignore\nvar isIEorEdge = typeof window !== \"undefined\" && (window.document.documentMode || /Edge\\//.test(window.navigator.userAgent));\n/** @hidden @internal */\nvar isDesktop = typeof window !== \"undefined\" && window.matchMedia && window.matchMedia(\"(hover: hover) and (pointer: fine)\").matches;\n/** @hidden @internal */\nvar defaultSupportsPopout = isDesktop && !isIEorEdge;\n/**\n * A React component that hosts a multi-tabbed layout\n */\nvar Layout = /** @class */ (function (_super) {\n    __extends(Layout, _super);\n    function Layout(props) {\n        var _this = _super.call(this, props) || this;\n        /** @hidden @internal */\n        _this.firstMove = false;\n        /** @hidden @internal */\n        _this.dragDivText = \"\";\n        /** @hidden @internal */\n        _this.edgeRectLength = 100;\n        /** @hidden @internal */\n        _this.edgeRectWidth = 10;\n        /** @hidden @internal */\n        _this.edgesShown = false;\n        /** @hidden @internal */\n        _this.onModelChange = function () {\n            _this.forceUpdate();\n            if (_this.props.onModelChange) {\n                _this.props.onModelChange(_this.props.model);\n            }\n        };\n        /** @hidden @internal */\n        _this.updateRect = function (domRect) {\n            if (domRect === void 0) { domRect = _this.getDomRect(); }\n            var rect = new Rect_1.default(0, 0, domRect.width, domRect.height);\n            if (!rect.equals(_this.state.rect) && rect.width !== 0 && rect.height !== 0) {\n                _this.setState({ rect: rect });\n            }\n        };\n        /** @hidden @internal */\n        _this.updateLayoutMetrics = function () {\n            if (_this.findHeaderBarSizeRef.current) {\n                var headerBarSize = _this.findHeaderBarSizeRef.current.getBoundingClientRect().height;\n                if (headerBarSize !== _this.state.calculatedHeaderBarSize) {\n                    _this.setState({ calculatedHeaderBarSize: headerBarSize });\n                }\n            }\n            if (_this.findTabBarSizeRef.current) {\n                var tabBarSize = _this.findTabBarSizeRef.current.getBoundingClientRect().height;\n                if (tabBarSize !== _this.state.calculatedTabBarSize) {\n                    _this.setState({ calculatedTabBarSize: tabBarSize });\n                }\n            }\n            if (_this.findBorderBarSizeRef.current) {\n                var borderBarSize = _this.findBorderBarSizeRef.current.getBoundingClientRect().height;\n                if (borderBarSize !== _this.state.calculatedBorderBarSize) {\n                    _this.setState({ calculatedBorderBarSize: borderBarSize });\n                }\n            }\n        };\n        /** @hidden @internal */\n        _this.getClassName = function (defaultClassName) {\n            if (_this.props.classNameMapper === undefined) {\n                return defaultClassName;\n            }\n            else {\n                return _this.props.classNameMapper(defaultClassName);\n            }\n        };\n        /** @hidden @internal */\n        _this.onCloseWindow = function (id) {\n            _this.doAction(Actions_1.default.unFloatTab(id));\n            try {\n                _this.props.model.getNodeById(id)._setWindow(undefined);\n            }\n            catch (e) {\n                // catch incase it was a model change\n            }\n        };\n        /** @hidden @internal */\n        _this.onSetWindow = function (id, window) {\n            _this.props.model.getNodeById(id)._setWindow(window);\n        };\n        /** @hidden @internal */\n        _this.onCancelAdd = function () {\n            var _a, _b;\n            var rootdiv = _this.selfRef.current;\n            rootdiv.removeChild(_this.dragDiv);\n            _this.dragDiv = undefined;\n            if (_this.fnNewNodeDropped != null) {\n                _this.fnNewNodeDropped();\n                _this.fnNewNodeDropped = undefined;\n            }\n            try {\n                (_b = (_a = _this.customDrop) === null || _a === void 0 ? void 0 : _a.invalidated) === null || _b === void 0 ? void 0 : _b.call(_a);\n            }\n            catch (e) {\n                console.error(e);\n            }\n            DragDrop_1.default.instance.hideGlass();\n            _this.newTabJson = undefined;\n            _this.customDrop = undefined;\n        };\n        /** @hidden @internal */\n        _this.onCancelDrag = function (wasDragging) {\n            var _a, _b;\n            if (wasDragging) {\n                var rootdiv = _this.selfRef.current;\n                try {\n                    rootdiv.removeChild(_this.outlineDiv);\n                }\n                catch (e) { }\n                try {\n                    rootdiv.removeChild(_this.dragDiv);\n                }\n                catch (e) { }\n                _this.dragDiv = undefined;\n                _this.hideEdges(rootdiv);\n                if (_this.fnNewNodeDropped != null) {\n                    _this.fnNewNodeDropped();\n                    _this.fnNewNodeDropped = undefined;\n                }\n                try {\n                    (_b = (_a = _this.customDrop) === null || _a === void 0 ? void 0 : _a.invalidated) === null || _b === void 0 ? void 0 : _b.call(_a);\n                }\n                catch (e) {\n                    console.error(e);\n                }\n                DragDrop_1.default.instance.hideGlass();\n                _this.newTabJson = undefined;\n                _this.customDrop = undefined;\n            }\n        };\n        /** @hidden @internal */\n        _this.onDragDivMouseDown = function (event) {\n            event.preventDefault();\n            _this.dragStart(event, _this.dragDivText, TabNode_1.default._fromJson(_this.newTabJson, _this.props.model, false), true, undefined, undefined);\n        };\n        /** @hidden @internal */\n        _this.dragStart = function (event, dragDivText, node, allowDrag, onClick, onDoubleClick) {\n            if (_this.props.model.getMaximizedTabset() !== undefined || !allowDrag) {\n                DragDrop_1.default.instance.startDrag(event, undefined, undefined, undefined, undefined, onClick, onDoubleClick, _this.currentDocument, _this.selfRef.current);\n            }\n            else {\n                _this.dragNode = node;\n                _this.dragDivText = dragDivText;\n                DragDrop_1.default.instance.startDrag(event, _this.onDragStart, _this.onDragMove, _this.onDragEnd, _this.onCancelDrag, onClick, onDoubleClick, _this.currentDocument, _this.selfRef.current);\n            }\n        };\n        /** @hidden @internal */\n        _this.onDragStart = function () {\n            _this.dropInfo = undefined;\n            _this.customDrop = undefined;\n            var rootdiv = _this.selfRef.current;\n            _this.outlineDiv = _this.currentDocument.createElement(\"div\");\n            _this.outlineDiv.className = _this.getClassName(Types_1.CLASSES.FLEXLAYOUT__OUTLINE_RECT);\n            _this.outlineDiv.style.visibility = \"hidden\";\n            rootdiv.appendChild(_this.outlineDiv);\n            if (_this.dragDiv == null) {\n                _this.dragDiv = _this.currentDocument.createElement(\"div\");\n                _this.dragDiv.className = _this.getClassName(Types_1.CLASSES.FLEXLAYOUT__DRAG_RECT);\n                _this.dragDiv.innerHTML = _this.dragDivText;\n                rootdiv.appendChild(_this.dragDiv);\n            }\n            // add edge indicators\n            _this.showEdges(rootdiv);\n            if (_this.dragNode !== undefined && _this.dragNode instanceof TabNode_1.default && _this.dragNode.getTabRect() !== undefined) {\n                _this.dragNode.getTabRect().positionElement(_this.outlineDiv);\n            }\n            _this.firstMove = true;\n            return true;\n        };\n        /** @hidden @internal */\n        _this.onDragMove = function (event) {\n            var _a, _b, _c;\n            if (_this.firstMove === false) {\n                var speed = _this.props.model._getAttribute(\"tabDragSpeed\");\n                _this.outlineDiv.style.transition = \"top \" + speed + \"s, left \" + speed + \"s, width \" + speed + \"s, height \" + speed + \"s\";\n            }\n            _this.firstMove = false;\n            var clientRect = _this.selfRef.current.getBoundingClientRect();\n            var pos = {\n                x: event.clientX - clientRect.left,\n                y: event.clientY - clientRect.top,\n            };\n            _this.dragDiv.style.left = pos.x - _this.dragDiv.getBoundingClientRect().width / 2 + \"px\";\n            _this.dragDiv.style.top = pos.y + 5 + \"px\";\n            var dropInfo = _this.props.model._findDropTargetNode(_this.dragNode, pos.x, pos.y);\n            if (dropInfo) {\n                var invalidated = (_a = _this.customDrop) === null || _a === void 0 ? void 0 : _a.invalidated;\n                var currentCallback = (_b = _this.customDrop) === null || _b === void 0 ? void 0 : _b.callback;\n                _this.customDrop = undefined;\n                var dragging = _this.newTabJson || (_this.dragNode instanceof TabNode_1.default ? _this.dragNode : undefined);\n                if (dragging && (dropInfo.node instanceof TabSetNode_1.default || dropInfo.node instanceof BorderNode_1.default) && dropInfo.index === -1) {\n                    var selected = dropInfo.node.getSelectedNode();\n                    var tabRect = selected === null || selected === void 0 ? void 0 : selected.getRect();\n                    if (selected && (tabRect === null || tabRect === void 0 ? void 0 : tabRect.contains(pos.x, pos.y))) {\n                        var customDrop = undefined;\n                        try {\n                            var dest = _this.onTabDrag(dragging, selected, pos.x - tabRect.x, pos.y - tabRect.y, dropInfo.location, function () { return _this.onDragMove(event); });\n                            if (dest) {\n                                customDrop = {\n                                    rect: new Rect_1.default(dest.x + tabRect.x, dest.y + tabRect.y, dest.width, dest.height),\n                                    callback: dest.callback,\n                                    invalidated: dest.invalidated,\n                                    dragging: dragging,\n                                    over: selected,\n                                    x: pos.x - tabRect.x,\n                                    y: pos.y - tabRect.y,\n                                    location: dropInfo.location,\n                                    cursor: dest.cursor\n                                };\n                            }\n                        }\n                        catch (e) {\n                            console.error(e);\n                        }\n                        if ((customDrop === null || customDrop === void 0 ? void 0 : customDrop.callback) == currentCallback) {\n                            invalidated = undefined;\n                        }\n                        _this.customDrop = customDrop;\n                    }\n                }\n                _this.dropInfo = dropInfo;\n                _this.outlineDiv.className = _this.getClassName(_this.customDrop ? \"flexlayout__outline_rect\" : dropInfo.className);\n                if (_this.customDrop) {\n                    _this.customDrop.rect.positionElement(_this.outlineDiv);\n                }\n                else {\n                    dropInfo.rect.positionElement(_this.outlineDiv);\n                }\n                DragDrop_1.default.instance.setGlassCursorOverride((_c = _this.customDrop) === null || _c === void 0 ? void 0 : _c.cursor);\n                _this.outlineDiv.style.visibility = \"visible\";\n                try {\n                    invalidated === null || invalidated === void 0 ? void 0 : invalidated();\n                }\n                catch (e) {\n                    console.error(e);\n                }\n            }\n        };\n        /** @hidden @internal */\n        _this.onDragEnd = function (event) {\n            var rootdiv = _this.selfRef.current;\n            rootdiv.removeChild(_this.outlineDiv);\n            rootdiv.removeChild(_this.dragDiv);\n            _this.dragDiv = undefined;\n            _this.hideEdges(rootdiv);\n            DragDrop_1.default.instance.hideGlass();\n            if (_this.dropInfo) {\n                if (_this.customDrop) {\n                    _this.newTabJson = undefined;\n                    try {\n                        var _a = _this.customDrop, callback = _a.callback, dragging = _a.dragging, over = _a.over, x = _a.x, y = _a.y, location_1 = _a.location;\n                        callback(dragging, over, x, y, location_1);\n                    }\n                    catch (e) {\n                        console.error(e);\n                    }\n                }\n                else if (_this.newTabJson !== undefined) {\n                    var newNode = _this.doAction(Actions_1.default.addNode(_this.newTabJson, _this.dropInfo.node.getId(), _this.dropInfo.location, _this.dropInfo.index));\n                    if (_this.fnNewNodeDropped != null) {\n                        _this.fnNewNodeDropped(newNode, event);\n                        _this.fnNewNodeDropped = undefined;\n                    }\n                    _this.newTabJson = undefined;\n                }\n                else if (_this.dragNode !== undefined) {\n                    _this.doAction(Actions_1.default.moveNode(_this.dragNode.getId(), _this.dropInfo.node.getId(), _this.dropInfo.location, _this.dropInfo.index));\n                }\n            }\n        };\n        _this.props.model._setChangeListener(_this.onModelChange);\n        _this.tabIds = [];\n        _this.selfRef = React.createRef();\n        _this.findHeaderBarSizeRef = React.createRef();\n        _this.findTabBarSizeRef = React.createRef();\n        _this.findBorderBarSizeRef = React.createRef();\n        _this.supportsPopout = props.supportsPopout !== undefined ? props.supportsPopout : defaultSupportsPopout;\n        _this.popoutURL = props.popoutURL ? props.popoutURL : \"popout.html\";\n        // For backwards compatibility, prop closeIcon sets prop icons.close:\n        _this.icons = props.closeIcon ? Object.assign({ close: props.closeIcon }, props.icons) : props.icons;\n        _this.firstRender = true;\n        _this.state = { rect: new Rect_1.default(0, 0, 0, 0),\n            calculatedHeaderBarSize: 25,\n            calculatedTabBarSize: 26,\n            calculatedBorderBarSize: 30,\n            editingTab: undefined,\n        };\n        _this.onDragEnter = _this.onDragEnter.bind(_this);\n        return _this;\n    }\n    /** @hidden @internal */\n    Layout.prototype.styleFont = function (style) {\n        if (this.props.font) {\n            if (this.props.font.size) {\n                style.fontSize = this.props.font.size;\n            }\n            if (this.props.font.family) {\n                style.fontFamily = this.props.font.family;\n            }\n            if (this.props.font.style) {\n                style.fontStyle = this.props.font.style;\n            }\n            if (this.props.font.weight) {\n                style.fontWeight = this.props.font.weight;\n            }\n        }\n        return style;\n    };\n    /** @hidden @internal */\n    Layout.prototype.doAction = function (action) {\n        if (this.props.onAction !== undefined) {\n            var outcome = this.props.onAction(action);\n            if (outcome !== undefined) {\n                return this.props.model.doAction(outcome);\n            }\n            return undefined;\n        }\n        else {\n            return this.props.model.doAction(action);\n        }\n    };\n    /** @hidden @internal */\n    Layout.prototype.componentDidMount = function () {\n        var _this = this;\n        this.updateRect();\n        this.updateLayoutMetrics();\n        // need to re-render if size changes\n        this.currentDocument = this.selfRef.current.ownerDocument;\n        this.currentWindow = this.currentDocument.defaultView;\n        this.resizeObserver = new ResizeObserver(function (entries) {\n            _this.updateRect(entries[0].contentRect);\n        });\n        this.resizeObserver.observe(this.selfRef.current);\n    };\n    /** @hidden @internal */\n    Layout.prototype.componentDidUpdate = function () {\n        this.updateLayoutMetrics();\n        if (this.props.model !== this.previousModel) {\n            if (this.previousModel !== undefined) {\n                this.previousModel._setChangeListener(undefined); // stop listening to old model\n            }\n            this.props.model._setChangeListener(this.onModelChange);\n            this.previousModel = this.props.model;\n        }\n        // console.log(\"Layout time: \" + this.layoutTime + \"ms Render time: \" + (Date.now() - this.start) + \"ms\");\n    };\n    /** @hidden @internal */\n    Layout.prototype.getCurrentDocument = function () {\n        return this.currentDocument;\n    };\n    /** @hidden @internal */\n    Layout.prototype.getDomRect = function () {\n        return this.selfRef.current.getBoundingClientRect();\n    };\n    /** @hidden @internal */\n    Layout.prototype.getRootDiv = function () {\n        return this.selfRef.current;\n    };\n    /** @hidden @internal */\n    Layout.prototype.isSupportsPopout = function () {\n        return this.supportsPopout;\n    };\n    /** @hidden @internal */\n    Layout.prototype.isRealtimeResize = function () {\n        var _a;\n        return (_a = this.props.realtimeResize) !== null && _a !== void 0 ? _a : false;\n    };\n    /** @hidden @internal */\n    Layout.prototype.onTabDrag = function () {\n        var _a, _b;\n        var args = [];\n        for (var _i = 0; _i < arguments.length; _i++) {\n            args[_i] = arguments[_i];\n        }\n        return (_b = (_a = this.props).onTabDrag) === null || _b === void 0 ? void 0 : _b.call.apply(_b, __spreadArray([_a], args));\n    };\n    /** @hidden @internal */\n    Layout.prototype.getPopoutURL = function () {\n        return this.popoutURL;\n    };\n    /** @hidden @internal */\n    Layout.prototype.componentWillUnmount = function () {\n        var _a;\n        (_a = this.resizeObserver) === null || _a === void 0 ? void 0 : _a.unobserve(this.selfRef.current);\n    };\n    /** @hidden @internal */\n    Layout.prototype.setEditingTab = function (tabNode) {\n        this.setState({ editingTab: tabNode });\n    };\n    /** @hidden @internal */\n    Layout.prototype.getEditingTab = function () {\n        return this.state.editingTab;\n    };\n    /** @hidden @internal */\n    Layout.prototype.render = function () {\n        var _this = this;\n        // first render will be used to find the size (via selfRef)\n        if (this.firstRender) {\n            this.firstRender = false;\n            return (React.createElement(\"div\", { ref: this.selfRef, className: this.getClassName(Types_1.CLASSES.FLEXLAYOUT__LAYOUT) }, this.metricsElements()));\n        }\n        this.props.model._setPointerFine(window && window.matchMedia && window.matchMedia(\"(pointer: fine)\").matches);\n        // this.start = Date.now();\n        var borderComponents = [];\n        var tabSetComponents = [];\n        var floatingWindows = [];\n        var tabComponents = {};\n        var splitterComponents = [];\n        var metrics = {\n            headerBarSize: this.state.calculatedHeaderBarSize,\n            tabBarSize: this.state.calculatedTabBarSize,\n            borderBarSize: this.state.calculatedBorderBarSize,\n        };\n        this.centerRect = this.props.model._layout(this.state.rect, metrics);\n        this.renderBorder(this.props.model.getBorderSet(), borderComponents, tabComponents, floatingWindows, splitterComponents);\n        this.renderChildren(this.props.model.getRoot(), tabSetComponents, tabComponents, floatingWindows, splitterComponents);\n        if (this.edgesShown) {\n            this.repositionEdges(this.state.rect);\n        }\n        var nextTopIds = [];\n        var nextTopIdsMap = {};\n        // Keep any previous tabs in the same DOM order as before, removing any that have been deleted\n        this.tabIds.forEach(function (t) {\n            if (tabComponents[t]) {\n                nextTopIds.push(t);\n                nextTopIdsMap[t] = t;\n            }\n        });\n        this.tabIds = nextTopIds;\n        // Add tabs that have been added to the DOM\n        Object.keys(tabComponents).forEach(function (t) {\n            if (!nextTopIdsMap[t]) {\n                _this.tabIds.push(t);\n            }\n        });\n        // this.layoutTime = (Date.now() - this.start);\n        return (React.createElement(\"div\", { ref: this.selfRef, className: this.getClassName(Types_1.CLASSES.FLEXLAYOUT__LAYOUT), onDragEnter: this.props.onExternalDrag ? this.onDragEnter : undefined },\n            tabSetComponents,\n            this.tabIds.map(function (t) {\n                return tabComponents[t];\n            }),\n            borderComponents,\n            splitterComponents,\n            floatingWindows,\n            this.metricsElements()));\n    };\n    /** @hidden @internal */\n    Layout.prototype.metricsElements = function () {\n        // used to measure the tab and border tab sizes\n        var fontStyle = this.styleFont({ visibility: \"hidden\" });\n        return (React.createElement(React.Fragment, null,\n            React.createElement(\"div\", { key: \"findHeaderBarSize\", ref: this.findHeaderBarSizeRef, style: fontStyle, className: this.getClassName(Types_1.CLASSES.FLEXLAYOUT__TABSET_HEADER_SIZER) }, \"FindHeaderBarSize\"),\n            React.createElement(\"div\", { key: \"findTabBarSize\", ref: this.findTabBarSizeRef, style: fontStyle, className: this.getClassName(Types_1.CLASSES.FLEXLAYOUT__TABSET_SIZER) }, \"FindTabBarSize\"),\n            React.createElement(\"div\", { key: \"findBorderBarSize\", ref: this.findBorderBarSizeRef, style: fontStyle, className: this.getClassName(Types_1.CLASSES.FLEXLAYOUT__BORDER_SIZER) }, \"FindBorderBarSize\")));\n    };\n    /** @hidden @internal */\n    Layout.prototype.renderBorder = function (borderSet, borderComponents, tabComponents, floatingWindows, splitterComponents) {\n        for (var _i = 0, _a = borderSet.getBorders(); _i < _a.length; _i++) {\n            var border = _a[_i];\n            if (border.isShowing()) {\n                borderComponents.push(React.createElement(BorderTabSet_1.BorderTabSet, { key: \"border_\" + border.getLocation().getName(), border: border, layout: this, iconFactory: this.props.iconFactory, titleFactory: this.props.titleFactory, icons: this.icons }));\n                var drawChildren = border._getDrawChildren();\n                var i = 0;\n                for (var _b = 0, drawChildren_1 = drawChildren; _b < drawChildren_1.length; _b++) {\n                    var child = drawChildren_1[_b];\n                    if (child instanceof SplitterNode_1.default) {\n                        splitterComponents.push(React.createElement(Splitter_1.Splitter, { key: child.getId(), layout: this, node: child }));\n                    }\n                    else if (child instanceof TabNode_1.default) {\n                        if (this.supportsPopout && child.isFloating()) {\n                            var rect = this._getScreenRect(child);\n                            floatingWindows.push(React.createElement(FloatingWindow_1.FloatingWindow, { key: child.getId(), url: this.popoutURL, rect: rect, title: child.getName(), id: child.getId(), onSetWindow: this.onSetWindow, onCloseWindow: this.onCloseWindow },\n                                React.createElement(FloatingWindowTab_1.FloatingWindowTab, { layout: this, node: child, factory: this.props.factory })));\n                            tabComponents[child.getId()] = React.createElement(TabFloating_1.TabFloating, { key: child.getId(), layout: this, node: child, selected: i === border.getSelected() });\n                        }\n                        else {\n                            tabComponents[child.getId()] = React.createElement(Tab_1.Tab, { key: child.getId(), layout: this, node: child, selected: i === border.getSelected(), factory: this.props.factory });\n                        }\n                    }\n                    i++;\n                }\n            }\n        }\n    };\n    /** @hidden @internal */\n    Layout.prototype.renderChildren = function (node, tabSetComponents, tabComponents, floatingWindows, splitterComponents) {\n        var drawChildren = node._getDrawChildren();\n        for (var _i = 0, _a = drawChildren; _i < _a.length; _i++) {\n            var child = _a[_i];\n            if (child instanceof SplitterNode_1.default) {\n                splitterComponents.push(React.createElement(Splitter_1.Splitter, { key: child.getId(), layout: this, node: child }));\n            }\n            else if (child instanceof TabSetNode_1.default) {\n                tabSetComponents.push(React.createElement(TabSet_1.TabSet, { key: child.getId(), layout: this, node: child, iconFactory: this.props.iconFactory, titleFactory: this.props.titleFactory, icons: this.icons }));\n                this.renderChildren(child, tabSetComponents, tabComponents, floatingWindows, splitterComponents);\n            }\n            else if (child instanceof TabNode_1.default) {\n                var selectedTab = child.getParent().getChildren()[child.getParent().getSelected()];\n                if (selectedTab === undefined) {\n                    // this should not happen!\n                    console.warn(\"undefined selectedTab should not happen\");\n                }\n                if (this.supportsPopout && child.isFloating()) {\n                    var rect = this._getScreenRect(child);\n                    floatingWindows.push(React.createElement(FloatingWindow_1.FloatingWindow, { key: child.getId(), url: this.popoutURL, rect: rect, title: child.getName(), id: child.getId(), onSetWindow: this.onSetWindow, onCloseWindow: this.onCloseWindow },\n                        React.createElement(FloatingWindowTab_1.FloatingWindowTab, { layout: this, node: child, factory: this.props.factory })));\n                    tabComponents[child.getId()] = React.createElement(TabFloating_1.TabFloating, { key: child.getId(), layout: this, node: child, selected: child === selectedTab });\n                }\n                else {\n                    tabComponents[child.getId()] = React.createElement(Tab_1.Tab, { key: child.getId(), layout: this, node: child, selected: child === selectedTab, factory: this.props.factory });\n                }\n            }\n            else {\n                // is row\n                this.renderChildren(child, tabSetComponents, tabComponents, floatingWindows, splitterComponents);\n            }\n        }\n    };\n    /** @hidden @internal */\n    Layout.prototype._getScreenRect = function (node) {\n        var rect = node.getRect().clone();\n        var bodyRect = this.selfRef.current.getBoundingClientRect();\n        var navHeight = Math.min(80, this.currentWindow.outerHeight - this.currentWindow.innerHeight);\n        var navWidth = Math.min(80, this.currentWindow.outerWidth - this.currentWindow.innerWidth);\n        rect.x = rect.x + bodyRect.x + this.currentWindow.screenX + navWidth;\n        rect.y = rect.y + bodyRect.y + this.currentWindow.screenY + navHeight;\n        return rect;\n    };\n    /**\n     * Adds a new tab to the given tabset\n     * @param tabsetId the id of the tabset where the new tab will be added\n     * @param json the json for the new tab node\n     */\n    Layout.prototype.addTabToTabSet = function (tabsetId, json) {\n        var tabsetNode = this.props.model.getNodeById(tabsetId);\n        if (tabsetNode !== undefined) {\n            this.doAction(Actions_1.default.addNode(json, tabsetId, DockLocation_1.default.CENTER, -1));\n        }\n    };\n    /**\n     * Adds a new tab to the active tabset (if there is one)\n     * @param json the json for the new tab node\n     */\n    Layout.prototype.addTabToActiveTabSet = function (json) {\n        var tabsetNode = this.props.model.getActiveTabset();\n        if (tabsetNode !== undefined) {\n            this.doAction(Actions_1.default.addNode(json, tabsetNode.getId(), DockLocation_1.default.CENTER, -1));\n        }\n    };\n    /**\n     * Adds a new tab by dragging a labeled panel to the drop location, dragging starts immediatelly\n     * @param dragText the text to show on the drag panel\n     * @param json the json for the new tab node\n     * @param onDrop a callback to call when the drag is complete\n     */\n    Layout.prototype.addTabWithDragAndDrop = function (dragText, json, onDrop) {\n        this.fnNewNodeDropped = onDrop;\n        this.newTabJson = json;\n        this.dragStart(undefined, dragText, TabNode_1.default._fromJson(json, this.props.model, false), true, undefined, undefined);\n    };\n    /**\n     * Adds a new tab by dragging a labeled panel to the drop location, dragging starts when you\n     * mouse down on the panel\n     *\n     * @param dragText the text to show on the drag panel\n     * @param json the json for the new tab node\n     * @param onDrop a callback to call when the drag is complete\n     */\n    Layout.prototype.addTabWithDragAndDropIndirect = function (dragText, json, onDrop) {\n        this.fnNewNodeDropped = onDrop;\n        this.newTabJson = json;\n        DragDrop_1.default.instance.addGlass(this.onCancelAdd);\n        this.dragDivText = dragText;\n        this.dragDiv = this.currentDocument.createElement(\"div\");\n        this.dragDiv.className = this.getClassName(\"flexlayout__drag_rect\");\n        this.dragDiv.innerHTML = this.dragDivText;\n        this.dragDiv.addEventListener(\"mousedown\", this.onDragDivMouseDown);\n        this.dragDiv.addEventListener(\"touchstart\", this.onDragDivMouseDown);\n        var r = new Rect_1.default(10, 10, 150, 50);\n        r.centerInRect(this.state.rect);\n        this.dragDiv.style.left = r.x + \"px\";\n        this.dragDiv.style.top = r.y + \"px\";\n        var rootdiv = this.selfRef.current;\n        rootdiv.appendChild(this.dragDiv);\n    };\n    /** @hidden @internal */\n    Layout.prototype.onDragEnter = function (event) {\n        // DragDrop keeps track of number of dragenters minus the number of\n        // dragleaves. Only start a new drag if there isn't one already.\n        if (DragDrop_1.default.instance.isDragging())\n            return;\n        var drag = this.props.onExternalDrag(event);\n        if (drag) {\n            // Mimic addTabWithDragAndDrop, but pass in DragEvent\n            this.fnNewNodeDropped = drag.onDrop;\n            this.newTabJson = drag.json;\n            this.dragStart(event, drag.dragText, TabNode_1.default._fromJson(drag.json, this.props.model, false), true, undefined, undefined);\n        }\n    };\n    /** @hidden @internal */\n    Layout.prototype.showEdges = function (rootdiv) {\n        if (this.props.model.isEnableEdgeDock()) {\n            var length_1 = this.edgeRectLength + \"px\";\n            var radius = \"50px\";\n            var width = this.edgeRectWidth + \"px\";\n            this.edgeTopDiv = this.currentDocument.createElement(\"div\");\n            this.edgeTopDiv.className = this.getClassName(Types_1.CLASSES.FLEXLAYOUT__EDGE_RECT);\n            this.edgeTopDiv.style.width = length_1;\n            this.edgeTopDiv.style.height = width;\n            this.edgeTopDiv.style.borderBottomLeftRadius = radius;\n            this.edgeTopDiv.style.borderBottomRightRadius = radius;\n            this.edgeLeftDiv = this.currentDocument.createElement(\"div\");\n            this.edgeLeftDiv.className = this.getClassName(Types_1.CLASSES.FLEXLAYOUT__EDGE_RECT);\n            this.edgeLeftDiv.style.width = width;\n            this.edgeLeftDiv.style.height = length_1;\n            this.edgeLeftDiv.style.borderTopRightRadius = radius;\n            this.edgeLeftDiv.style.borderBottomRightRadius = radius;\n            this.edgeBottomDiv = this.currentDocument.createElement(\"div\");\n            this.edgeBottomDiv.className = this.getClassName(Types_1.CLASSES.FLEXLAYOUT__EDGE_RECT);\n            this.edgeBottomDiv.style.width = length_1;\n            this.edgeBottomDiv.style.height = width;\n            this.edgeBottomDiv.style.borderTopLeftRadius = radius;\n            this.edgeBottomDiv.style.borderTopRightRadius = radius;\n            this.edgeRightDiv = this.currentDocument.createElement(\"div\");\n            this.edgeRightDiv.className = this.getClassName(Types_1.CLASSES.FLEXLAYOUT__EDGE_RECT);\n            this.edgeRightDiv.style.width = width;\n            this.edgeRightDiv.style.height = length_1;\n            this.edgeRightDiv.style.borderTopLeftRadius = radius;\n            this.edgeRightDiv.style.borderBottomLeftRadius = radius;\n            this.repositionEdges(this.state.rect);\n            rootdiv.appendChild(this.edgeTopDiv);\n            rootdiv.appendChild(this.edgeLeftDiv);\n            rootdiv.appendChild(this.edgeBottomDiv);\n            rootdiv.appendChild(this.edgeRightDiv);\n            this.edgesShown = true;\n        }\n    };\n    /** @hidden @internal */\n    Layout.prototype.repositionEdges = function (domRect) {\n        if (this.props.model.isEnableEdgeDock()) {\n            var r = this.centerRect;\n            this.edgeTopDiv.style.top = r.y + \"px\";\n            this.edgeTopDiv.style.left = r.x + (r.width - this.edgeRectLength) / 2 + \"px\";\n            this.edgeLeftDiv.style.top = r.y + (r.height - this.edgeRectLength) / 2 + \"px\";\n            this.edgeLeftDiv.style.left = r.x + \"px\";\n            this.edgeBottomDiv.style.bottom = domRect.height - r.getBottom() + \"px\";\n            this.edgeBottomDiv.style.left = r.x + (r.width - this.edgeRectLength) / 2 + \"px\";\n            this.edgeRightDiv.style.top = r.y + (r.height - this.edgeRectLength) / 2 + \"px\";\n            this.edgeRightDiv.style.right = domRect.width - r.getRight() + \"px\";\n        }\n    };\n    /** @hidden @internal */\n    Layout.prototype.hideEdges = function (rootdiv) {\n        if (this.props.model.isEnableEdgeDock()) {\n            try {\n                rootdiv.removeChild(this.edgeTopDiv);\n                rootdiv.removeChild(this.edgeLeftDiv);\n                rootdiv.removeChild(this.edgeBottomDiv);\n                rootdiv.removeChild(this.edgeRightDiv);\n            }\n            catch (e) { }\n        }\n        this.edgesShown = false;\n    };\n    /** @hidden @internal */\n    Layout.prototype.maximize = function (tabsetNode) {\n        this.doAction(Actions_1.default.maximizeToggle(tabsetNode.getId()));\n    };\n    /** @hidden @internal */\n    Layout.prototype.customizeTab = function (tabNode, renderValues) {\n        if (this.props.onRenderTab) {\n            this.props.onRenderTab(tabNode, renderValues);\n        }\n    };\n    /** @hidden @internal */\n    Layout.prototype.customizeTabSet = function (tabSetNode, renderValues) {\n        if (this.props.onRenderTabSet) {\n            this.props.onRenderTabSet(tabSetNode, renderValues);\n        }\n    };\n    /** @hidden @internal */\n    Layout.prototype.i18nName = function (id, param) {\n        var message;\n        if (this.props.i18nMapper) {\n            message = this.props.i18nMapper(id, param);\n        }\n        if (message === undefined) {\n            message = id + (param === undefined ? \"\" : param);\n        }\n        return message;\n    };\n    return Layout;\n}(React.Component));\nexports.Layout = Layout;\nexports.default = Layout;\n\n\n//# sourceURL=webpack://FlexLayout/./src/view/Layout.tsx?");
+eval("\nvar __extends = (this && this.__extends) || (function () {\n    var extendStatics = function (d, b) {\n        extendStatics = Object.setPrototypeOf ||\n            ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||\n            function (d, b) { for (var p in b) if (Object.prototype.hasOwnProperty.call(b, p)) d[p] = b[p]; };\n        return extendStatics(d, b);\n    };\n    return function (d, b) {\n        if (typeof b !== \"function\" && b !== null)\n            throw new TypeError(\"Class extends value \" + String(b) + \" is not a constructor or null\");\n        extendStatics(d, b);\n        function __() { this.constructor = d; }\n        d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());\n    };\n})();\nvar __spreadArray = (this && this.__spreadArray) || function (to, from) {\n    for (var i = 0, il = from.length, j = to.length; i < il; i++, j++)\n        to[j] = from[i];\n    return to;\n};\nObject.defineProperty(exports, \"__esModule\", { value: true });\nexports.Layout = void 0;\nvar React = __webpack_require__(/*! react */ \"react\");\nvar ReactDOM = __webpack_require__(/*! react-dom */ \"react-dom\");\nvar DockLocation_1 = __webpack_require__(/*! ../DockLocation */ \"./src/DockLocation.ts\");\nvar DragDrop_1 = __webpack_require__(/*! ../DragDrop */ \"./src/DragDrop.ts\");\nvar Actions_1 = __webpack_require__(/*! ../model/Actions */ \"./src/model/Actions.ts\");\nvar BorderNode_1 = __webpack_require__(/*! ../model/BorderNode */ \"./src/model/BorderNode.ts\");\nvar SplitterNode_1 = __webpack_require__(/*! ../model/SplitterNode */ \"./src/model/SplitterNode.ts\");\nvar TabNode_1 = __webpack_require__(/*! ../model/TabNode */ \"./src/model/TabNode.ts\");\nvar TabSetNode_1 = __webpack_require__(/*! ../model/TabSetNode */ \"./src/model/TabSetNode.ts\");\nvar Rect_1 = __webpack_require__(/*! ../Rect */ \"./src/Rect.ts\");\nvar Types_1 = __webpack_require__(/*! ../Types */ \"./src/Types.ts\");\nvar BorderTabSet_1 = __webpack_require__(/*! ./BorderTabSet */ \"./src/view/BorderTabSet.tsx\");\nvar Splitter_1 = __webpack_require__(/*! ./Splitter */ \"./src/view/Splitter.tsx\");\nvar Tab_1 = __webpack_require__(/*! ./Tab */ \"./src/view/Tab.tsx\");\nvar TabSet_1 = __webpack_require__(/*! ./TabSet */ \"./src/view/TabSet.tsx\");\nvar FloatingWindow_1 = __webpack_require__(/*! ./FloatingWindow */ \"./src/view/FloatingWindow.tsx\");\nvar FloatingWindowTab_1 = __webpack_require__(/*! ./FloatingWindowTab */ \"./src/view/FloatingWindowTab.tsx\");\nvar TabFloating_1 = __webpack_require__(/*! ./TabFloating */ \"./src/view/TabFloating.tsx\");\nvar __1 = __webpack_require__(/*! .. */ \"./src/index.ts\");\n// Popout windows work in latest browsers based on webkit (Chrome, Opera, Safari, latest Edge) and Firefox. They do\n// not work on any version if IE or the original Edge browser\n// Assume any recent desktop browser not IE or original Edge will work\n/** @hidden @internal */\n// @ts-ignore\nvar isIEorEdge = typeof window !== \"undefined\" && (window.document.documentMode || /Edge\\//.test(window.navigator.userAgent));\n/** @hidden @internal */\nvar isDesktop = typeof window !== \"undefined\" && window.matchMedia && window.matchMedia(\"(hover: hover) and (pointer: fine)\").matches;\n/** @hidden @internal */\nvar defaultSupportsPopout = isDesktop && !isIEorEdge;\n/**\n * A React component that hosts a multi-tabbed layout\n */\nvar Layout = /** @class */ (function (_super) {\n    __extends(Layout, _super);\n    function Layout(props) {\n        var _this = _super.call(this, props) || this;\n        /** @hidden @internal */\n        _this.firstMove = false;\n        /** @hidden @internal */\n        _this.dragRectRendered = true;\n        /** @hidden @internal */\n        _this.dragDivText = \"\";\n        /** @hidden @internal */\n        _this.edgeRectLength = 100;\n        /** @hidden @internal */\n        _this.edgeRectWidth = 10;\n        /** @hidden @internal */\n        _this.edgesShown = false;\n        /** @hidden @internal */\n        _this.onModelChange = function () {\n            _this.forceUpdate();\n            if (_this.props.onModelChange) {\n                _this.props.onModelChange(_this.props.model);\n            }\n        };\n        /** @hidden @internal */\n        _this.updateRect = function (domRect) {\n            if (domRect === void 0) { domRect = _this.getDomRect(); }\n            var rect = new Rect_1.default(0, 0, domRect.width, domRect.height);\n            if (!rect.equals(_this.state.rect) && rect.width !== 0 && rect.height !== 0) {\n                _this.setState({ rect: rect });\n            }\n        };\n        /** @hidden @internal */\n        _this.updateLayoutMetrics = function () {\n            if (_this.findHeaderBarSizeRef.current) {\n                var headerBarSize = _this.findHeaderBarSizeRef.current.getBoundingClientRect().height;\n                if (headerBarSize !== _this.state.calculatedHeaderBarSize) {\n                    _this.setState({ calculatedHeaderBarSize: headerBarSize });\n                }\n            }\n            if (_this.findTabBarSizeRef.current) {\n                var tabBarSize = _this.findTabBarSizeRef.current.getBoundingClientRect().height;\n                if (tabBarSize !== _this.state.calculatedTabBarSize) {\n                    _this.setState({ calculatedTabBarSize: tabBarSize });\n                }\n            }\n            if (_this.findBorderBarSizeRef.current) {\n                var borderBarSize = _this.findBorderBarSizeRef.current.getBoundingClientRect().height;\n                if (borderBarSize !== _this.state.calculatedBorderBarSize) {\n                    _this.setState({ calculatedBorderBarSize: borderBarSize });\n                }\n            }\n        };\n        /** @hidden @internal */\n        _this.getClassName = function (defaultClassName) {\n            if (_this.props.classNameMapper === undefined) {\n                return defaultClassName;\n            }\n            else {\n                return _this.props.classNameMapper(defaultClassName);\n            }\n        };\n        /** @hidden @internal */\n        _this.onCloseWindow = function (id) {\n            _this.doAction(Actions_1.default.unFloatTab(id));\n            try {\n                _this.props.model.getNodeById(id)._setWindow(undefined);\n            }\n            catch (e) {\n                // catch incase it was a model change\n            }\n        };\n        /** @hidden @internal */\n        _this.onSetWindow = function (id, window) {\n            _this.props.model.getNodeById(id)._setWindow(window);\n        };\n        /** @hidden @internal */\n        _this.onCancelAdd = function () {\n            var _a, _b;\n            var rootdiv = _this.selfRef.current;\n            rootdiv.removeChild(_this.dragDiv);\n            _this.dragDiv = undefined;\n            if (_this.fnNewNodeDropped != null) {\n                _this.fnNewNodeDropped();\n                _this.fnNewNodeDropped = undefined;\n            }\n            try {\n                (_b = (_a = _this.customDrop) === null || _a === void 0 ? void 0 : _a.invalidated) === null || _b === void 0 ? void 0 : _b.call(_a);\n            }\n            catch (e) {\n                console.error(e);\n            }\n            DragDrop_1.default.instance.hideGlass();\n            _this.newTabJson = undefined;\n            _this.customDrop = undefined;\n        };\n        /** @hidden @internal */\n        _this.onCancelDrag = function (wasDragging) {\n            var _a, _b;\n            if (wasDragging) {\n                var rootdiv = _this.selfRef.current;\n                try {\n                    rootdiv.removeChild(_this.outlineDiv);\n                }\n                catch (e) { }\n                try {\n                    rootdiv.removeChild(_this.dragDiv);\n                }\n                catch (e) { }\n                _this.dragDiv = undefined;\n                _this.hideEdges(rootdiv);\n                if (_this.fnNewNodeDropped != null) {\n                    _this.fnNewNodeDropped();\n                    _this.fnNewNodeDropped = undefined;\n                }\n                try {\n                    (_b = (_a = _this.customDrop) === null || _a === void 0 ? void 0 : _a.invalidated) === null || _b === void 0 ? void 0 : _b.call(_a);\n                }\n                catch (e) {\n                    console.error(e);\n                }\n                DragDrop_1.default.instance.hideGlass();\n                _this.newTabJson = undefined;\n                _this.customDrop = undefined;\n            }\n            _this.setState({ showHiddenBorder: DockLocation_1.default.CENTER });\n        };\n        /** @hidden @internal */\n        _this.onDragDivMouseDown = function (event) {\n            event.preventDefault();\n            _this.dragStart(event, _this.dragDivText, TabNode_1.default._fromJson(_this.newTabJson, _this.props.model, false), true, undefined, undefined);\n        };\n        /** @hidden @internal */\n        _this.dragStart = function (event, dragDivText, node, allowDrag, onClick, onDoubleClick) {\n            if (_this.props.model.getMaximizedTabset() !== undefined || !allowDrag) {\n                DragDrop_1.default.instance.startDrag(event, undefined, undefined, undefined, undefined, onClick, onDoubleClick, _this.currentDocument, _this.selfRef.current);\n            }\n            else {\n                _this.dragNode = node;\n                _this.dragDivText = dragDivText;\n                DragDrop_1.default.instance.startDrag(event, _this.onDragStart, _this.onDragMove, _this.onDragEnd, _this.onCancelDrag, onClick, onDoubleClick, _this.currentDocument, _this.selfRef.current);\n            }\n        };\n        /** @hidden @internal */\n        _this.dragRectRender = function (text, node, json, onRendered) {\n            var content = React.createElement(\"div\", { style: { whiteSpace: \"pre\" } }, text.replace(\"<br>\", \"\\n\"));\n            if (_this.props.onRenderDragRect !== undefined) {\n                var customContent = _this.props.onRenderDragRect(text, node, json);\n                if (customContent !== undefined) {\n                    content = customContent;\n                }\n            }\n            // hide div until the render is complete\n            _this.dragDiv.style.visibility = \"hidden\";\n            _this.dragRectRendered = false;\n            ReactDOM.render(React.createElement(DragRectRenderWrapper\n            // wait for it to be rendered\n            , { \n                // wait for it to be rendered\n                onRendered: function () {\n                    _this.dragRectRendered = true;\n                    onRendered === null || onRendered === void 0 ? void 0 : onRendered();\n                } }, content), _this.dragDiv);\n        };\n        /** @hidden @internal */\n        _this.onDragStart = function () {\n            _this.dropInfo = undefined;\n            _this.customDrop = undefined;\n            var rootdiv = _this.selfRef.current;\n            _this.outlineDiv = _this.currentDocument.createElement(\"div\");\n            _this.outlineDiv.className = _this.getClassName(Types_1.CLASSES.FLEXLAYOUT__OUTLINE_RECT);\n            _this.outlineDiv.style.visibility = \"hidden\";\n            rootdiv.appendChild(_this.outlineDiv);\n            if (_this.dragDiv == null) {\n                _this.dragDiv = _this.currentDocument.createElement(\"div\");\n                _this.dragDiv.className = _this.getClassName(Types_1.CLASSES.FLEXLAYOUT__DRAG_RECT);\n                _this.dragDiv.setAttribute(\"data-layout-path\", \"/drag-rectangle\");\n                _this.dragRectRender(_this.dragDivText, _this.dragNode, _this.newTabJson);\n                rootdiv.appendChild(_this.dragDiv);\n            }\n            // add edge indicators\n            _this.showEdges(rootdiv);\n            if (_this.dragNode !== undefined && _this.dragNode instanceof TabNode_1.default && _this.dragNode.getTabRect() !== undefined) {\n                _this.dragNode.getTabRect().positionElement(_this.outlineDiv);\n            }\n            _this.firstMove = true;\n            return true;\n        };\n        /** @hidden @internal */\n        _this.onDragMove = function (event) {\n            if (_this.firstMove === false) {\n                var speed = _this.props.model._getAttribute(\"tabDragSpeed\");\n                _this.outlineDiv.style.transition = \"top \" + speed + \"s, left \" + speed + \"s, width \" + speed + \"s, height \" + speed + \"s\";\n            }\n            _this.firstMove = false;\n            var clientRect = _this.selfRef.current.getBoundingClientRect();\n            var pos = {\n                x: event.clientX - clientRect.left,\n                y: event.clientY - clientRect.top,\n            };\n            _this.checkForBorderToShow(pos.x, pos.y);\n            // keep it between left & right\n            var dragRect = _this.dragDiv.getBoundingClientRect();\n            var newLeft = pos.x - dragRect.width / 2;\n            if (newLeft + dragRect.width > clientRect.width) {\n                newLeft = clientRect.width - dragRect.width;\n            }\n            newLeft = Math.max(0, newLeft);\n            _this.dragDiv.style.left = newLeft + \"px\";\n            _this.dragDiv.style.top = pos.y + 5 + \"px\";\n            if (_this.dragRectRendered && _this.dragDiv.style.visibility === \"hidden\") {\n                // make visible once the drag rect has been rendered\n                _this.dragDiv.style.visibility = \"visible\";\n            }\n            var dropInfo = _this.props.model._findDropTargetNode(_this.dragNode, pos.x, pos.y);\n            if (dropInfo) {\n                if (_this.props.onTabDrag) {\n                    _this.handleCustomTabDrag(dropInfo, pos, event);\n                }\n                else {\n                    _this.dropInfo = dropInfo;\n                    _this.outlineDiv.className = _this.getClassName(dropInfo.className);\n                    dropInfo.rect.positionElement(_this.outlineDiv);\n                    _this.outlineDiv.style.visibility = \"visible\";\n                }\n            }\n        };\n        /** @hidden @internal */\n        _this.onDragEnd = function (event) {\n            var rootdiv = _this.selfRef.current;\n            rootdiv.removeChild(_this.outlineDiv);\n            rootdiv.removeChild(_this.dragDiv);\n            _this.dragDiv = undefined;\n            _this.hideEdges(rootdiv);\n            DragDrop_1.default.instance.hideGlass();\n            if (_this.dropInfo) {\n                if (_this.customDrop) {\n                    _this.newTabJson = undefined;\n                    try {\n                        var _a = _this.customDrop, callback = _a.callback, dragging = _a.dragging, over = _a.over, x = _a.x, y = _a.y, location_1 = _a.location;\n                        callback(dragging, over, x, y, location_1);\n                        if (_this.fnNewNodeDropped != null) {\n                            _this.fnNewNodeDropped();\n                            _this.fnNewNodeDropped = undefined;\n                        }\n                    }\n                    catch (e) {\n                        console.error(e);\n                    }\n                }\n                else if (_this.newTabJson !== undefined) {\n                    var newNode = _this.doAction(Actions_1.default.addNode(_this.newTabJson, _this.dropInfo.node.getId(), _this.dropInfo.location, _this.dropInfo.index));\n                    if (_this.fnNewNodeDropped != null) {\n                        _this.fnNewNodeDropped(newNode, event);\n                        _this.fnNewNodeDropped = undefined;\n                    }\n                    _this.newTabJson = undefined;\n                }\n                else if (_this.dragNode !== undefined) {\n                    _this.doAction(Actions_1.default.moveNode(_this.dragNode.getId(), _this.dropInfo.node.getId(), _this.dropInfo.location, _this.dropInfo.index));\n                }\n            }\n            _this.setState({ showHiddenBorder: DockLocation_1.default.CENTER });\n        };\n        _this.props.model._setChangeListener(_this.onModelChange);\n        _this.tabIds = [];\n        _this.selfRef = React.createRef();\n        _this.findHeaderBarSizeRef = React.createRef();\n        _this.findTabBarSizeRef = React.createRef();\n        _this.findBorderBarSizeRef = React.createRef();\n        _this.supportsPopout = props.supportsPopout !== undefined ? props.supportsPopout : defaultSupportsPopout;\n        _this.popoutURL = props.popoutURL ? props.popoutURL : \"popout.html\";\n        // For backwards compatibility, prop closeIcon sets prop icons.close:\n        _this.icons = props.closeIcon ? Object.assign({ close: props.closeIcon }, props.icons) : props.icons;\n        _this.firstRender = true;\n        _this.state = {\n            rect: new Rect_1.default(0, 0, 0, 0),\n            calculatedHeaderBarSize: 25,\n            calculatedTabBarSize: 26,\n            calculatedBorderBarSize: 30,\n            editingTab: undefined,\n            showHiddenBorder: DockLocation_1.default.CENTER,\n        };\n        _this.onDragEnter = _this.onDragEnter.bind(_this);\n        return _this;\n    }\n    /** @hidden @internal */\n    Layout.prototype.styleFont = function (style) {\n        if (this.props.font) {\n            if (this.props.font.size) {\n                style.fontSize = this.props.font.size;\n            }\n            if (this.props.font.family) {\n                style.fontFamily = this.props.font.family;\n            }\n            if (this.props.font.style) {\n                style.fontStyle = this.props.font.style;\n            }\n            if (this.props.font.weight) {\n                style.fontWeight = this.props.font.weight;\n            }\n        }\n        return style;\n    };\n    /** @hidden @internal */\n    Layout.prototype.doAction = function (action) {\n        if (this.props.onAction !== undefined) {\n            var outcome = this.props.onAction(action);\n            if (outcome !== undefined) {\n                return this.props.model.doAction(outcome);\n            }\n            return undefined;\n        }\n        else {\n            return this.props.model.doAction(action);\n        }\n    };\n    /** @hidden @internal */\n    Layout.prototype.componentDidMount = function () {\n        var _this = this;\n        this.updateRect();\n        this.updateLayoutMetrics();\n        // need to re-render if size changes\n        this.currentDocument = this.selfRef.current.ownerDocument;\n        this.currentWindow = this.currentDocument.defaultView;\n        this.resizeObserver = new ResizeObserver(function (entries) {\n            _this.updateRect(entries[0].contentRect);\n        });\n        this.resizeObserver.observe(this.selfRef.current);\n    };\n    /** @hidden @internal */\n    Layout.prototype.componentDidUpdate = function () {\n        this.updateLayoutMetrics();\n        if (this.props.model !== this.previousModel) {\n            if (this.previousModel !== undefined) {\n                this.previousModel._setChangeListener(undefined); // stop listening to old model\n            }\n            this.props.model._setChangeListener(this.onModelChange);\n            this.previousModel = this.props.model;\n        }\n        // console.log(\"Layout time: \" + this.layoutTime + \"ms Render time: \" + (Date.now() - this.start) + \"ms\");\n    };\n    /** @hidden @internal */\n    Layout.prototype.getCurrentDocument = function () {\n        return this.currentDocument;\n    };\n    /** @hidden @internal */\n    Layout.prototype.getDomRect = function () {\n        return this.selfRef.current.getBoundingClientRect();\n    };\n    /** @hidden @internal */\n    Layout.prototype.getRootDiv = function () {\n        return this.selfRef.current;\n    };\n    /** @hidden @internal */\n    Layout.prototype.isSupportsPopout = function () {\n        return this.supportsPopout;\n    };\n    /** @hidden @internal */\n    Layout.prototype.isRealtimeResize = function () {\n        var _a;\n        return (_a = this.props.realtimeResize) !== null && _a !== void 0 ? _a : false;\n    };\n    /** @hidden @internal */\n    Layout.prototype.onTabDrag = function () {\n        var _a, _b;\n        var args = [];\n        for (var _i = 0; _i < arguments.length; _i++) {\n            args[_i] = arguments[_i];\n        }\n        return (_b = (_a = this.props).onTabDrag) === null || _b === void 0 ? void 0 : _b.call.apply(_b, __spreadArray([_a], args));\n    };\n    /** @hidden @internal */\n    Layout.prototype.getPopoutURL = function () {\n        return this.popoutURL;\n    };\n    /** @hidden @internal */\n    Layout.prototype.componentWillUnmount = function () {\n        var _a;\n        (_a = this.resizeObserver) === null || _a === void 0 ? void 0 : _a.unobserve(this.selfRef.current);\n    };\n    /** @hidden @internal */\n    Layout.prototype.setEditingTab = function (tabNode) {\n        this.setState({ editingTab: tabNode });\n    };\n    /** @hidden @internal */\n    Layout.prototype.getEditingTab = function () {\n        return this.state.editingTab;\n    };\n    /** @hidden @internal */\n    Layout.prototype.render = function () {\n        var _this = this;\n        // first render will be used to find the size (via selfRef)\n        if (this.firstRender) {\n            this.firstRender = false;\n            return (React.createElement(\"div\", { ref: this.selfRef, className: this.getClassName(Types_1.CLASSES.FLEXLAYOUT__LAYOUT) }, this.metricsElements()));\n        }\n        this.props.model._setPointerFine(window && window.matchMedia && window.matchMedia(\"(pointer: fine)\").matches);\n        // this.start = Date.now();\n        var borderComponents = [];\n        var tabSetComponents = [];\n        var floatingWindows = [];\n        var tabComponents = {};\n        var splitterComponents = [];\n        var metrics = {\n            headerBarSize: this.state.calculatedHeaderBarSize,\n            tabBarSize: this.state.calculatedTabBarSize,\n            borderBarSize: this.state.calculatedBorderBarSize,\n        };\n        this.props.model._setShowHiddenBorder(this.state.showHiddenBorder);\n        this.centerRect = this.props.model._layout(this.state.rect, metrics);\n        this.renderBorder(this.props.model.getBorderSet(), borderComponents, tabComponents, floatingWindows, splitterComponents);\n        this.renderChildren(\"\", this.props.model.getRoot(), tabSetComponents, tabComponents, floatingWindows, splitterComponents);\n        if (this.edgesShown) {\n            this.repositionEdges(this.state.rect);\n        }\n        var nextTopIds = [];\n        var nextTopIdsMap = {};\n        // Keep any previous tabs in the same DOM order as before, removing any that have been deleted\n        this.tabIds.forEach(function (t) {\n            if (tabComponents[t]) {\n                nextTopIds.push(t);\n                nextTopIdsMap[t] = t;\n            }\n        });\n        this.tabIds = nextTopIds;\n        // Add tabs that have been added to the DOM\n        Object.keys(tabComponents).forEach(function (t) {\n            if (!nextTopIdsMap[t]) {\n                _this.tabIds.push(t);\n            }\n        });\n        // this.layoutTime = (Date.now() - this.start);\n        return (React.createElement(\"div\", { ref: this.selfRef, className: this.getClassName(Types_1.CLASSES.FLEXLAYOUT__LAYOUT), onDragEnter: this.props.onExternalDrag ? this.onDragEnter : undefined },\n            tabSetComponents,\n            this.tabIds.map(function (t) {\n                return tabComponents[t];\n            }),\n            borderComponents,\n            splitterComponents,\n            floatingWindows,\n            this.metricsElements()));\n    };\n    /** @hidden @internal */\n    Layout.prototype.metricsElements = function () {\n        // used to measure the tab and border tab sizes\n        var fontStyle = this.styleFont({ visibility: \"hidden\" });\n        return (React.createElement(React.Fragment, null,\n            React.createElement(\"div\", { key: \"findHeaderBarSize\", ref: this.findHeaderBarSizeRef, style: fontStyle, className: this.getClassName(Types_1.CLASSES.FLEXLAYOUT__TABSET_HEADER_SIZER) }, \"FindHeaderBarSize\"),\n            React.createElement(\"div\", { key: \"findTabBarSize\", ref: this.findTabBarSizeRef, style: fontStyle, className: this.getClassName(Types_1.CLASSES.FLEXLAYOUT__TABSET_SIZER) }, \"FindTabBarSize\"),\n            React.createElement(\"div\", { key: \"findBorderBarSize\", ref: this.findBorderBarSizeRef, style: fontStyle, className: this.getClassName(Types_1.CLASSES.FLEXLAYOUT__BORDER_SIZER) }, \"FindBorderBarSize\")));\n    };\n    /** @hidden @internal */\n    Layout.prototype.renderBorder = function (borderSet, borderComponents, tabComponents, floatingWindows, splitterComponents) {\n        for (var _i = 0, _a = borderSet.getBorders(); _i < _a.length; _i++) {\n            var border = _a[_i];\n            var borderPath = \"/border/\" + border.getLocation().getName();\n            if (border.isShowing()) {\n                borderComponents.push(React.createElement(BorderTabSet_1.BorderTabSet, { key: \"border_\" + border.getLocation().getName(), path: borderPath, border: border, layout: this, iconFactory: this.props.iconFactory, titleFactory: this.props.titleFactory, icons: this.icons }));\n                var drawChildren = border._getDrawChildren();\n                var i = 0;\n                var tabCount = 0;\n                for (var _b = 0, drawChildren_1 = drawChildren; _b < drawChildren_1.length; _b++) {\n                    var child = drawChildren_1[_b];\n                    if (child instanceof SplitterNode_1.default) {\n                        var path = borderPath + \"/s\";\n                        splitterComponents.push(React.createElement(Splitter_1.Splitter, { key: child.getId(), layout: this, node: child, path: path }));\n                    }\n                    else if (child instanceof TabNode_1.default) {\n                        var path = borderPath + \"/t\" + tabCount++;\n                        if (this.supportsPopout && child.isFloating()) {\n                            var rect = this._getScreenRect(child);\n                            floatingWindows.push(React.createElement(FloatingWindow_1.FloatingWindow, { key: child.getId(), url: this.popoutURL, rect: rect, title: child.getName(), id: child.getId(), onSetWindow: this.onSetWindow, onCloseWindow: this.onCloseWindow },\n                                React.createElement(FloatingWindowTab_1.FloatingWindowTab, { layout: this, node: child, factory: this.props.factory })));\n                            tabComponents[child.getId()] = React.createElement(TabFloating_1.TabFloating, { key: child.getId(), layout: this, path: path, node: child, selected: i === border.getSelected() });\n                        }\n                        else {\n                            tabComponents[child.getId()] = React.createElement(Tab_1.Tab, { key: child.getId(), layout: this, path: path, node: child, selected: i === border.getSelected(), factory: this.props.factory });\n                        }\n                    }\n                    i++;\n                }\n            }\n        }\n    };\n    /** @hidden @internal */\n    Layout.prototype.renderChildren = function (path, node, tabSetComponents, tabComponents, floatingWindows, splitterComponents) {\n        var drawChildren = node._getDrawChildren();\n        var splitterCount = 0;\n        var tabCount = 0;\n        var rowCount = 0;\n        for (var _i = 0, _a = drawChildren; _i < _a.length; _i++) {\n            var child = _a[_i];\n            if (child instanceof SplitterNode_1.default) {\n                var newPath = path + \"/s\" + (splitterCount++);\n                splitterComponents.push(React.createElement(Splitter_1.Splitter, { key: child.getId(), layout: this, path: newPath, node: child }));\n            }\n            else if (child instanceof TabSetNode_1.default) {\n                var newPath = path + \"/ts\" + (rowCount++);\n                tabSetComponents.push(React.createElement(TabSet_1.TabSet, { key: child.getId(), layout: this, path: newPath, node: child, iconFactory: this.props.iconFactory, titleFactory: this.props.titleFactory, icons: this.icons }));\n                this.renderChildren(newPath, child, tabSetComponents, tabComponents, floatingWindows, splitterComponents);\n            }\n            else if (child instanceof TabNode_1.default) {\n                var newPath = path + \"/t\" + (tabCount++);\n                var selectedTab = child.getParent().getChildren()[child.getParent().getSelected()];\n                if (selectedTab === undefined) {\n                    // this should not happen!\n                    console.warn(\"undefined selectedTab should not happen\");\n                }\n                if (this.supportsPopout && child.isFloating()) {\n                    var rect = this._getScreenRect(child);\n                    floatingWindows.push(React.createElement(FloatingWindow_1.FloatingWindow, { key: child.getId(), url: this.popoutURL, rect: rect, title: child.getName(), id: child.getId(), onSetWindow: this.onSetWindow, onCloseWindow: this.onCloseWindow },\n                        React.createElement(FloatingWindowTab_1.FloatingWindowTab, { layout: this, node: child, factory: this.props.factory })));\n                    tabComponents[child.getId()] = React.createElement(TabFloating_1.TabFloating, { key: child.getId(), layout: this, path: newPath, node: child, selected: child === selectedTab });\n                }\n                else {\n                    tabComponents[child.getId()] = React.createElement(Tab_1.Tab, { key: child.getId(), layout: this, path: newPath, node: child, selected: child === selectedTab, factory: this.props.factory });\n                }\n            }\n            else {\n                // is row\n                var newPath = path + ((child.getOrientation() === __1.Orientation.HORZ) ? \"/r\" : \"/c\") + (rowCount++);\n                this.renderChildren(newPath, child, tabSetComponents, tabComponents, floatingWindows, splitterComponents);\n            }\n        }\n    };\n    /** @hidden @internal */\n    Layout.prototype._getScreenRect = function (node) {\n        var rect = node.getRect().clone();\n        var bodyRect = this.selfRef.current.getBoundingClientRect();\n        var navHeight = Math.min(80, this.currentWindow.outerHeight - this.currentWindow.innerHeight);\n        var navWidth = Math.min(80, this.currentWindow.outerWidth - this.currentWindow.innerWidth);\n        rect.x = rect.x + bodyRect.x + this.currentWindow.screenX + navWidth;\n        rect.y = rect.y + bodyRect.y + this.currentWindow.screenY + navHeight;\n        return rect;\n    };\n    /**\n     * Adds a new tab to the given tabset\n     * @param tabsetId the id of the tabset where the new tab will be added\n     * @param json the json for the new tab node\n     */\n    Layout.prototype.addTabToTabSet = function (tabsetId, json) {\n        var tabsetNode = this.props.model.getNodeById(tabsetId);\n        if (tabsetNode !== undefined) {\n            this.doAction(Actions_1.default.addNode(json, tabsetId, DockLocation_1.default.CENTER, -1));\n        }\n    };\n    /**\n     * Adds a new tab to the active tabset (if there is one)\n     * @param json the json for the new tab node\n     */\n    Layout.prototype.addTabToActiveTabSet = function (json) {\n        var tabsetNode = this.props.model.getActiveTabset();\n        if (tabsetNode !== undefined) {\n            this.doAction(Actions_1.default.addNode(json, tabsetNode.getId(), DockLocation_1.default.CENTER, -1));\n        }\n    };\n    /**\n     * Adds a new tab by dragging a labeled panel to the drop location, dragging starts immediatelly\n     * @param dragText the text to show on the drag panel\n     * @param json the json for the new tab node\n     * @param onDrop a callback to call when the drag is complete (node and event will be undefined if the drag was cancelled)\n     */\n    Layout.prototype.addTabWithDragAndDrop = function (dragText, json, onDrop) {\n        this.fnNewNodeDropped = onDrop;\n        this.newTabJson = json;\n        this.dragStart(undefined, dragText, TabNode_1.default._fromJson(json, this.props.model, false), true, undefined, undefined);\n    };\n    /**\n     * Adds a new tab by dragging a labeled panel to the drop location, dragging starts when you\n     * mouse down on the panel\n     *\n     * @param dragText the text to show on the drag panel\n     * @param json the json for the new tab node\n     * @param onDrop a callback to call when the drag is complete (node and event will be undefined if the drag was cancelled)\n     */\n    Layout.prototype.addTabWithDragAndDropIndirect = function (dragText, json, onDrop) {\n        var _this = this;\n        this.fnNewNodeDropped = onDrop;\n        this.newTabJson = json;\n        DragDrop_1.default.instance.addGlass(this.onCancelAdd);\n        this.dragDivText = dragText;\n        this.dragDiv = this.currentDocument.createElement(\"div\");\n        this.dragDiv.className = this.getClassName(Types_1.CLASSES.FLEXLAYOUT__DRAG_RECT);\n        this.dragDiv.addEventListener(\"mousedown\", this.onDragDivMouseDown);\n        this.dragDiv.addEventListener(\"touchstart\", this.onDragDivMouseDown);\n        this.dragRectRender(this.dragDivText, undefined, this.newTabJson, function () {\n            if (_this.dragDiv) {\n                // now it's been rendered into the dom it can be centered\n                _this.dragDiv.style.visibility = \"visible\";\n                var domRect = _this.dragDiv.getBoundingClientRect();\n                var r = new Rect_1.default(0, 0, domRect === null || domRect === void 0 ? void 0 : domRect.width, domRect === null || domRect === void 0 ? void 0 : domRect.height);\n                r.centerInRect(_this.state.rect);\n                _this.dragDiv.setAttribute(\"data-layout-path\", \"/drag-rectangle\");\n                _this.dragDiv.style.left = r.x + \"px\";\n                _this.dragDiv.style.top = r.y + \"px\";\n            }\n        });\n        var rootdiv = this.selfRef.current;\n        rootdiv.appendChild(this.dragDiv);\n    };\n    /** @hidden @internal */\n    Layout.prototype.handleCustomTabDrag = function (dropInfo, pos, event) {\n        var _this = this;\n        var _a, _b, _c;\n        var invalidated = (_a = this.customDrop) === null || _a === void 0 ? void 0 : _a.invalidated;\n        var currentCallback = (_b = this.customDrop) === null || _b === void 0 ? void 0 : _b.callback;\n        this.customDrop = undefined;\n        var dragging = this.newTabJson || (this.dragNode instanceof TabNode_1.default ? this.dragNode : undefined);\n        if (dragging && (dropInfo.node instanceof TabSetNode_1.default || dropInfo.node instanceof BorderNode_1.default) && dropInfo.index === -1) {\n            var selected = dropInfo.node.getSelectedNode();\n            var tabRect = selected === null || selected === void 0 ? void 0 : selected.getRect();\n            if (selected && (tabRect === null || tabRect === void 0 ? void 0 : tabRect.contains(pos.x, pos.y))) {\n                var customDrop = undefined;\n                try {\n                    var dest = this.onTabDrag(dragging, selected, pos.x - tabRect.x, pos.y - tabRect.y, dropInfo.location, function () { return _this.onDragMove(event); });\n                    if (dest) {\n                        customDrop = {\n                            rect: new Rect_1.default(dest.x + tabRect.x, dest.y + tabRect.y, dest.width, dest.height),\n                            callback: dest.callback,\n                            invalidated: dest.invalidated,\n                            dragging: dragging,\n                            over: selected,\n                            x: pos.x - tabRect.x,\n                            y: pos.y - tabRect.y,\n                            location: dropInfo.location,\n                            cursor: dest.cursor\n                        };\n                    }\n                }\n                catch (e) {\n                    console.error(e);\n                }\n                if ((customDrop === null || customDrop === void 0 ? void 0 : customDrop.callback) === currentCallback) {\n                    invalidated = undefined;\n                }\n                this.customDrop = customDrop;\n            }\n        }\n        this.dropInfo = dropInfo;\n        this.outlineDiv.className = this.getClassName(this.customDrop ? Types_1.CLASSES.FLEXLAYOUT__OUTLINE_RECT : dropInfo.className);\n        if (this.customDrop) {\n            this.customDrop.rect.positionElement(this.outlineDiv);\n        }\n        else {\n            dropInfo.rect.positionElement(this.outlineDiv);\n        }\n        DragDrop_1.default.instance.setGlassCursorOverride((_c = this.customDrop) === null || _c === void 0 ? void 0 : _c.cursor);\n        this.outlineDiv.style.visibility = \"visible\";\n        try {\n            invalidated === null || invalidated === void 0 ? void 0 : invalidated();\n        }\n        catch (e) {\n            console.error(e);\n        }\n    };\n    /** @hidden @internal */\n    Layout.prototype.onDragEnter = function (event) {\n        // DragDrop keeps track of number of dragenters minus the number of\n        // dragleaves. Only start a new drag if there isn't one already.\n        if (DragDrop_1.default.instance.isDragging())\n            return;\n        var drag = this.props.onExternalDrag(event);\n        if (drag) {\n            // Mimic addTabWithDragAndDrop, but pass in DragEvent\n            this.fnNewNodeDropped = drag.onDrop;\n            this.newTabJson = drag.json;\n            this.dragStart(event, drag.dragText, TabNode_1.default._fromJson(drag.json, this.props.model, false), true, undefined, undefined);\n        }\n    };\n    /** @hidden @internal */\n    Layout.prototype.checkForBorderToShow = function (x, y) {\n        var r = this.props.model._getOuterInnerRects().outer;\n        var c = r.getCenter();\n        var margin = this.edgeRectWidth;\n        var offset = this.edgeRectLength / 2;\n        var overEdge = false;\n        if (this.props.model.isEnableEdgeDock() && this.state.showHiddenBorder === DockLocation_1.default.CENTER) {\n            if ((y > c.y - offset && y < c.y + offset) ||\n                (x > c.x - offset && x < c.x + offset)) {\n                overEdge = true;\n            }\n        }\n        var location = DockLocation_1.default.CENTER;\n        if (!overEdge) {\n            if (x <= r.x + margin) {\n                location = DockLocation_1.default.LEFT;\n            }\n            else if (x >= r.getRight() - margin) {\n                location = DockLocation_1.default.RIGHT;\n            }\n            else if (y <= r.y + margin) {\n                location = DockLocation_1.default.TOP;\n            }\n            else if (y >= r.getBottom() - margin) {\n                location = DockLocation_1.default.BOTTOM;\n            }\n        }\n        if (location !== this.state.showHiddenBorder) {\n            this.setState({ showHiddenBorder: location });\n        }\n    };\n    /** @hidden @internal */\n    Layout.prototype.showEdges = function (rootdiv) {\n        if (this.props.model.isEnableEdgeDock()) {\n            var length_1 = this.edgeRectLength + \"px\";\n            var radius = \"50px\";\n            var width = this.edgeRectWidth + \"px\";\n            this.edgeTopDiv = this.currentDocument.createElement(\"div\");\n            this.edgeTopDiv.className = this.getClassName(Types_1.CLASSES.FLEXLAYOUT__EDGE_RECT);\n            this.edgeTopDiv.style.width = length_1;\n            this.edgeTopDiv.style.height = width;\n            this.edgeTopDiv.style.borderBottomLeftRadius = radius;\n            this.edgeTopDiv.style.borderBottomRightRadius = radius;\n            this.edgeLeftDiv = this.currentDocument.createElement(\"div\");\n            this.edgeLeftDiv.className = this.getClassName(Types_1.CLASSES.FLEXLAYOUT__EDGE_RECT);\n            this.edgeLeftDiv.style.width = width;\n            this.edgeLeftDiv.style.height = length_1;\n            this.edgeLeftDiv.style.borderTopRightRadius = radius;\n            this.edgeLeftDiv.style.borderBottomRightRadius = radius;\n            this.edgeBottomDiv = this.currentDocument.createElement(\"div\");\n            this.edgeBottomDiv.className = this.getClassName(Types_1.CLASSES.FLEXLAYOUT__EDGE_RECT);\n            this.edgeBottomDiv.style.width = length_1;\n            this.edgeBottomDiv.style.height = width;\n            this.edgeBottomDiv.style.borderTopLeftRadius = radius;\n            this.edgeBottomDiv.style.borderTopRightRadius = radius;\n            this.edgeRightDiv = this.currentDocument.createElement(\"div\");\n            this.edgeRightDiv.className = this.getClassName(Types_1.CLASSES.FLEXLAYOUT__EDGE_RECT);\n            this.edgeRightDiv.style.width = width;\n            this.edgeRightDiv.style.height = length_1;\n            this.edgeRightDiv.style.borderTopLeftRadius = radius;\n            this.edgeRightDiv.style.borderBottomLeftRadius = radius;\n            this.repositionEdges(this.state.rect);\n            rootdiv.appendChild(this.edgeTopDiv);\n            rootdiv.appendChild(this.edgeLeftDiv);\n            rootdiv.appendChild(this.edgeBottomDiv);\n            rootdiv.appendChild(this.edgeRightDiv);\n            this.edgesShown = true;\n        }\n    };\n    /** @hidden @internal */\n    Layout.prototype.repositionEdges = function (domRect) {\n        if (this.props.model.isEnableEdgeDock()) {\n            var r = this.centerRect;\n            this.edgeTopDiv.style.top = r.y + \"px\";\n            this.edgeTopDiv.style.left = r.x + (r.width - this.edgeRectLength) / 2 + \"px\";\n            this.edgeLeftDiv.style.top = r.y + (r.height - this.edgeRectLength) / 2 + \"px\";\n            this.edgeLeftDiv.style.left = r.x + \"px\";\n            this.edgeBottomDiv.style.bottom = domRect.height - r.getBottom() + \"px\";\n            this.edgeBottomDiv.style.left = r.x + (r.width - this.edgeRectLength) / 2 + \"px\";\n            this.edgeRightDiv.style.top = r.y + (r.height - this.edgeRectLength) / 2 + \"px\";\n            this.edgeRightDiv.style.right = domRect.width - r.getRight() + \"px\";\n        }\n    };\n    /** @hidden @internal */\n    Layout.prototype.hideEdges = function (rootdiv) {\n        if (this.props.model.isEnableEdgeDock()) {\n            try {\n                rootdiv.removeChild(this.edgeTopDiv);\n                rootdiv.removeChild(this.edgeLeftDiv);\n                rootdiv.removeChild(this.edgeBottomDiv);\n                rootdiv.removeChild(this.edgeRightDiv);\n            }\n            catch (e) { }\n        }\n        this.edgesShown = false;\n    };\n    /** @hidden @internal */\n    Layout.prototype.maximize = function (tabsetNode) {\n        this.doAction(Actions_1.default.maximizeToggle(tabsetNode.getId()));\n    };\n    /** @hidden @internal */\n    Layout.prototype.customizeTab = function (tabNode, renderValues) {\n        if (this.props.onRenderTab) {\n            this.props.onRenderTab(tabNode, renderValues);\n        }\n    };\n    /** @hidden @internal */\n    Layout.prototype.customizeTabSet = function (tabSetNode, renderValues) {\n        if (this.props.onRenderTabSet) {\n            this.props.onRenderTabSet(tabSetNode, renderValues);\n        }\n    };\n    /** @hidden @internal */\n    Layout.prototype.i18nName = function (id, param) {\n        var message;\n        if (this.props.i18nMapper) {\n            message = this.props.i18nMapper(id, param);\n        }\n        if (message === undefined) {\n            message = id + (param === undefined ? \"\" : param);\n        }\n        return message;\n    };\n    /** @hidden @internal */\n    Layout.prototype.getOnRenderFloatingTabPlaceholder = function () {\n        return this.props.onRenderFloatingTabPlaceholder;\n    };\n    /** @hidden @internal */\n    Layout.prototype.showContextMenu = function (node, event) {\n        if (this.props.onContextMenu) {\n            this.props.onContextMenu(node, event);\n        }\n    };\n    /** @hidden @internal */\n    Layout.prototype.auxMouseClick = function (node, event) {\n        if (this.props.onAuxMouseClick) {\n            this.props.onAuxMouseClick(node, event);\n        }\n    };\n    return Layout;\n}(React.Component));\nexports.Layout = Layout;\n/** @hidden @internal */\nvar DragRectRenderWrapper = function (props) {\n    React.useEffect(function () {\n        var _a;\n        (_a = props.onRendered) === null || _a === void 0 ? void 0 : _a.call(props);\n    }, [props]);\n    return (React.createElement(React.Fragment, null, props.children));\n};\nexports.default = Layout;\n\n\n//# sourceURL=webpack://FlexLayout/./src/view/Layout.tsx?");
 
 /***/ }),
 
@@ -632,7 +632,7 @@ eval("\nvar __extends = (this && this.__extends) || (function () {\n    var exte
 /***/ (function(module, exports, __webpack_require__) {
 
 "use strict";
-eval("\nObject.defineProperty(exports, \"__esModule\", { value: true });\nexports.Splitter = void 0;\nvar React = __webpack_require__(/*! react */ \"react\");\nvar DragDrop_1 = __webpack_require__(/*! ../DragDrop */ \"./src/DragDrop.ts\");\nvar Actions_1 = __webpack_require__(/*! ../model/Actions */ \"./src/model/Actions.ts\");\nvar BorderNode_1 = __webpack_require__(/*! ../model/BorderNode */ \"./src/model/BorderNode.ts\");\nvar Orientation_1 = __webpack_require__(/*! ../Orientation */ \"./src/Orientation.ts\");\nvar Types_1 = __webpack_require__(/*! ../Types */ \"./src/Types.ts\");\n/** @hidden @internal */\nvar Splitter = function (props) {\n    var layout = props.layout, node = props.node;\n    var pBounds = React.useRef([]);\n    var outlineDiv = React.useRef(undefined);\n    var parentNode = node.getParent();\n    var onMouseDown = function (event) {\n        DragDrop_1.default.instance.setGlassCursorOverride(node.getOrientation() === Orientation_1.default.HORZ ? \"ns-resize\" : \"ew-resize\");\n        DragDrop_1.default.instance.startDrag(event, onDragStart, onDragMove, onDragEnd, onDragCancel, undefined, undefined, layout.getCurrentDocument(), layout.getRootDiv());\n        pBounds.current = parentNode._getSplitterBounds(node, true);\n        var rootdiv = layout.getRootDiv();\n        outlineDiv.current = layout.getCurrentDocument().createElement(\"div\");\n        outlineDiv.current.style.position = \"absolute\";\n        outlineDiv.current.className = layout.getClassName(Types_1.CLASSES.FLEXLAYOUT__SPLITTER_DRAG);\n        outlineDiv.current.style.cursor = node.getOrientation() === Orientation_1.default.HORZ ? \"ns-resize\" : \"ew-resize\";\n        var r = node.getRect();\n        if (node.getOrientation() === Orientation_1.default.VERT && r.width < 2) {\n            r.width = 2;\n        }\n        else if (node.getOrientation() === Orientation_1.default.HORZ && r.height < 2) {\n            r.height = 2;\n        }\n        r.positionElement(outlineDiv.current);\n        rootdiv.appendChild(outlineDiv.current);\n    };\n    var onDragCancel = function (wasDragging) {\n        var rootdiv = layout.getRootDiv();\n        rootdiv.removeChild(outlineDiv.current);\n    };\n    var onDragStart = function () {\n        return true;\n    };\n    var onDragMove = function (event) {\n        var clientRect = layout.getDomRect();\n        var pos = {\n            x: event.clientX - clientRect.left,\n            y: event.clientY - clientRect.top,\n        };\n        if (outlineDiv) {\n            if (node.getOrientation() === Orientation_1.default.HORZ) {\n                outlineDiv.current.style.top = getBoundPosition(pos.y - 4) + \"px\";\n            }\n            else {\n                outlineDiv.current.style.left = getBoundPosition(pos.x - 4) + \"px\";\n            }\n        }\n        if (layout.isRealtimeResize()) {\n            updateLayout();\n        }\n    };\n    var updateLayout = function () {\n        var value = 0;\n        if (outlineDiv) {\n            if (node.getOrientation() === Orientation_1.default.HORZ) {\n                value = outlineDiv.current.offsetTop;\n            }\n            else {\n                value = outlineDiv.current.offsetLeft;\n            }\n        }\n        if (parentNode instanceof BorderNode_1.default) {\n            var pos = parentNode._calculateSplit(node, value);\n            layout.doAction(Actions_1.default.adjustBorderSplit(node.getParent().getId(), pos));\n        }\n        else {\n            var splitSpec = parentNode._calculateSplit(node, value);\n            if (splitSpec !== undefined) {\n                layout.doAction(Actions_1.default.adjustSplit(splitSpec));\n            }\n        }\n    };\n    var onDragEnd = function () {\n        updateLayout();\n        var rootdiv = layout.getRootDiv();\n        rootdiv.removeChild(outlineDiv.current);\n    };\n    var getBoundPosition = function (p) {\n        var bounds = pBounds.current;\n        var rtn = p;\n        if (p < bounds[0]) {\n            rtn = bounds[0];\n        }\n        if (p > bounds[1]) {\n            rtn = bounds[1];\n        }\n        return rtn;\n    };\n    var cm = layout.getClassName;\n    var r = node.getRect();\n    var style = r.styleWithPosition({\n        cursor: node.getOrientation() === Orientation_1.default.HORZ ? \"ns-resize\" : \"ew-resize\",\n    });\n    var className = cm(Types_1.CLASSES.FLEXLAYOUT__SPLITTER) + \" \" + cm(Types_1.CLASSES.FLEXLAYOUT__SPLITTER_ + node.getOrientation().getName());\n    if (parentNode instanceof BorderNode_1.default) {\n        className += \" \" + cm(Types_1.CLASSES.FLEXLAYOUT__SPLITTER_BORDER);\n    }\n    else {\n        if (node.getModel().getMaximizedTabset() !== undefined) {\n            style.display = \"none\";\n        }\n    }\n    var extra = node.getModel().getSplitterExtra();\n    if (extra === 0) {\n        return (React.createElement(\"div\", { style: style, className: className, onTouchStart: onMouseDown, onMouseDown: onMouseDown }));\n    }\n    else {\n        // add extended transparent div for hit testing\n        // extends forward only, so as not to interfere with scrollbars\n        var r2 = r.clone();\n        r2.x = 0;\n        r2.y = 0;\n        if (node.getOrientation() === Orientation_1.default.VERT) {\n            r2.width += extra;\n        }\n        else {\n            r2.height += extra;\n        }\n        var style2 = r2.styleWithPosition({\n            cursor: node.getOrientation() === Orientation_1.default.HORZ ? \"ns-resize\" : \"ew-resize\"\n        });\n        var className2 = cm(Types_1.CLASSES.FLEXLAYOUT__SPLITTER_EXTRA);\n        return (React.createElement(\"div\", { style: style, className: className },\n            React.createElement(\"div\", { style: style2, className: className2, onTouchStart: onMouseDown, onMouseDown: onMouseDown })));\n    }\n};\nexports.Splitter = Splitter;\n\n\n//# sourceURL=webpack://FlexLayout/./src/view/Splitter.tsx?");
+eval("\nObject.defineProperty(exports, \"__esModule\", { value: true });\nexports.Splitter = void 0;\nvar React = __webpack_require__(/*! react */ \"react\");\nvar DragDrop_1 = __webpack_require__(/*! ../DragDrop */ \"./src/DragDrop.ts\");\nvar Actions_1 = __webpack_require__(/*! ../model/Actions */ \"./src/model/Actions.ts\");\nvar BorderNode_1 = __webpack_require__(/*! ../model/BorderNode */ \"./src/model/BorderNode.ts\");\nvar Orientation_1 = __webpack_require__(/*! ../Orientation */ \"./src/Orientation.ts\");\nvar Types_1 = __webpack_require__(/*! ../Types */ \"./src/Types.ts\");\n/** @hidden @internal */\nvar Splitter = function (props) {\n    var layout = props.layout, node = props.node, path = props.path;\n    var pBounds = React.useRef([]);\n    var outlineDiv = React.useRef(undefined);\n    var parentNode = node.getParent();\n    var onMouseDown = function (event) {\n        DragDrop_1.default.instance.setGlassCursorOverride(node.getOrientation() === Orientation_1.default.HORZ ? \"ns-resize\" : \"ew-resize\");\n        DragDrop_1.default.instance.startDrag(event, onDragStart, onDragMove, onDragEnd, onDragCancel, undefined, undefined, layout.getCurrentDocument(), layout.getRootDiv());\n        pBounds.current = parentNode._getSplitterBounds(node, true);\n        var rootdiv = layout.getRootDiv();\n        outlineDiv.current = layout.getCurrentDocument().createElement(\"div\");\n        outlineDiv.current.style.position = \"absolute\";\n        outlineDiv.current.className = layout.getClassName(Types_1.CLASSES.FLEXLAYOUT__SPLITTER_DRAG);\n        outlineDiv.current.style.cursor = node.getOrientation() === Orientation_1.default.HORZ ? \"ns-resize\" : \"ew-resize\";\n        var r = node.getRect();\n        if (node.getOrientation() === Orientation_1.default.VERT && r.width < 2) {\n            r.width = 2;\n        }\n        else if (node.getOrientation() === Orientation_1.default.HORZ && r.height < 2) {\n            r.height = 2;\n        }\n        r.positionElement(outlineDiv.current);\n        rootdiv.appendChild(outlineDiv.current);\n    };\n    var onDragCancel = function (wasDragging) {\n        var rootdiv = layout.getRootDiv();\n        rootdiv.removeChild(outlineDiv.current);\n    };\n    var onDragStart = function () {\n        return true;\n    };\n    var onDragMove = function (event) {\n        var clientRect = layout.getDomRect();\n        var pos = {\n            x: event.clientX - clientRect.left,\n            y: event.clientY - clientRect.top,\n        };\n        if (outlineDiv) {\n            if (node.getOrientation() === Orientation_1.default.HORZ) {\n                outlineDiv.current.style.top = getBoundPosition(pos.y - 4) + \"px\";\n            }\n            else {\n                outlineDiv.current.style.left = getBoundPosition(pos.x - 4) + \"px\";\n            }\n        }\n        if (layout.isRealtimeResize()) {\n            updateLayout();\n        }\n    };\n    var updateLayout = function () {\n        var value = 0;\n        if (outlineDiv) {\n            if (node.getOrientation() === Orientation_1.default.HORZ) {\n                value = outlineDiv.current.offsetTop;\n            }\n            else {\n                value = outlineDiv.current.offsetLeft;\n            }\n        }\n        if (parentNode instanceof BorderNode_1.default) {\n            var pos = parentNode._calculateSplit(node, value);\n            layout.doAction(Actions_1.default.adjustBorderSplit(node.getParent().getId(), pos));\n        }\n        else {\n            var splitSpec = parentNode._calculateSplit(node, value);\n            if (splitSpec !== undefined) {\n                layout.doAction(Actions_1.default.adjustSplit(splitSpec));\n            }\n        }\n    };\n    var onDragEnd = function () {\n        updateLayout();\n        var rootdiv = layout.getRootDiv();\n        rootdiv.removeChild(outlineDiv.current);\n    };\n    var getBoundPosition = function (p) {\n        var bounds = pBounds.current;\n        var rtn = p;\n        if (p < bounds[0]) {\n            rtn = bounds[0];\n        }\n        if (p > bounds[1]) {\n            rtn = bounds[1];\n        }\n        return rtn;\n    };\n    var cm = layout.getClassName;\n    var r = node.getRect();\n    var style = r.styleWithPosition({\n        cursor: node.getOrientation() === Orientation_1.default.HORZ ? \"ns-resize\" : \"ew-resize\",\n    });\n    var className = cm(Types_1.CLASSES.FLEXLAYOUT__SPLITTER) + \" \" + cm(Types_1.CLASSES.FLEXLAYOUT__SPLITTER_ + node.getOrientation().getName());\n    if (parentNode instanceof BorderNode_1.default) {\n        className += \" \" + cm(Types_1.CLASSES.FLEXLAYOUT__SPLITTER_BORDER);\n    }\n    else {\n        if (node.getModel().getMaximizedTabset() !== undefined) {\n            style.display = \"none\";\n        }\n    }\n    var extra = node.getModel().getSplitterExtra();\n    if (extra === 0) {\n        return (React.createElement(\"div\", { style: style, \"data-layout-path\": path, className: className, onTouchStart: onMouseDown, onMouseDown: onMouseDown }));\n    }\n    else {\n        // add extended transparent div for hit testing\n        // extends forward only, so as not to interfere with scrollbars\n        var r2 = r.clone();\n        r2.x = 0;\n        r2.y = 0;\n        if (node.getOrientation() === Orientation_1.default.VERT) {\n            r2.width += extra;\n        }\n        else {\n            r2.height += extra;\n        }\n        var style2 = r2.styleWithPosition({\n            cursor: node.getOrientation() === Orientation_1.default.HORZ ? \"ns-resize\" : \"ew-resize\"\n        });\n        var className2 = cm(Types_1.CLASSES.FLEXLAYOUT__SPLITTER_EXTRA);\n        return (React.createElement(\"div\", { style: style, \"data-layout-path\": path, className: className },\n            React.createElement(\"div\", { style: style2, className: className2, onTouchStart: onMouseDown, onMouseDown: onMouseDown })));\n    }\n};\nexports.Splitter = Splitter;\n\n\n//# sourceURL=webpack://FlexLayout/./src/view/Splitter.tsx?");
 
 /***/ }),
 
@@ -644,7 +644,7 @@ eval("\nObject.defineProperty(exports, \"__esModule\", { value: true });\nexport
 /***/ (function(module, exports, __webpack_require__) {
 
 "use strict";
-eval("\nObject.defineProperty(exports, \"__esModule\", { value: true });\nexports.Tab = void 0;\nvar React = __webpack_require__(/*! react */ \"react\");\nvar react_1 = __webpack_require__(/*! react */ \"react\");\nvar Actions_1 = __webpack_require__(/*! ../model/Actions */ \"./src/model/Actions.ts\");\nvar TabSetNode_1 = __webpack_require__(/*! ../model/TabSetNode */ \"./src/model/TabSetNode.ts\");\nvar Types_1 = __webpack_require__(/*! ../Types */ \"./src/Types.ts\");\nvar ErrorBoundary_1 = __webpack_require__(/*! ./ErrorBoundary */ \"./src/view/ErrorBoundary.tsx\");\nvar I18nLabel_1 = __webpack_require__(/*! ../I18nLabel */ \"./src/I18nLabel.ts\");\nvar __1 = __webpack_require__(/*! .. */ \"./src/index.ts\");\n/** @hidden @internal */\nvar Tab = function (props) {\n    var layout = props.layout, selected = props.selected, node = props.node, factory = props.factory;\n    var _a = React.useState(!props.node.isEnableRenderOnDemand() || props.selected), renderComponent = _a[0], setRenderComponent = _a[1];\n    React.useLayoutEffect(function () {\n        if (!renderComponent && selected) {\n            // load on demand\n            // console.log(\"load on demand: \" + node.getName());\n            setRenderComponent(true);\n        }\n    });\n    var onMouseDown = function () {\n        var parent = node.getParent();\n        if (parent.getType() === TabSetNode_1.default.TYPE) {\n            if (!parent.isActive()) {\n                layout.doAction(Actions_1.default.setActiveTabset(parent.getId()));\n            }\n        }\n    };\n    var cm = layout.getClassName;\n    var parentNode = node.getParent();\n    var style = node._styleWithPosition({\n        display: selected ? \"block\" : \"none\",\n    });\n    if (parentNode instanceof TabSetNode_1.default) {\n        if (node.getModel().getMaximizedTabset() !== undefined && !parentNode.isMaximized()) {\n            style.display = \"none\";\n        }\n    }\n    var child;\n    if (renderComponent) {\n        child = factory(node);\n    }\n    var className = cm(Types_1.CLASSES.FLEXLAYOUT__TAB);\n    if (parentNode instanceof __1.BorderNode) {\n        className += \" \" + cm(Types_1.CLASSES.FLEXLAYOUT__TAB_BORDER);\n        className += \" \" + cm(Types_1.CLASSES.FLEXLAYOUT__TAB_BORDER_ + parentNode.getLocation().getName());\n    }\n    return (React.createElement(\"div\", { className: className, onMouseDown: onMouseDown, onTouchStart: onMouseDown, style: style },\n        React.createElement(ErrorBoundary_1.ErrorBoundary, { message: props.layout.i18nName(I18nLabel_1.I18nLabel.Error_rendering_component) },\n            React.createElement(react_1.Fragment, null, child))));\n};\nexports.Tab = Tab;\n\n\n//# sourceURL=webpack://FlexLayout/./src/view/Tab.tsx?");
+eval("\nObject.defineProperty(exports, \"__esModule\", { value: true });\nexports.hideElement = exports.Tab = void 0;\nvar React = __webpack_require__(/*! react */ \"react\");\nvar react_1 = __webpack_require__(/*! react */ \"react\");\nvar Actions_1 = __webpack_require__(/*! ../model/Actions */ \"./src/model/Actions.ts\");\nvar TabSetNode_1 = __webpack_require__(/*! ../model/TabSetNode */ \"./src/model/TabSetNode.ts\");\nvar Types_1 = __webpack_require__(/*! ../Types */ \"./src/Types.ts\");\nvar ErrorBoundary_1 = __webpack_require__(/*! ./ErrorBoundary */ \"./src/view/ErrorBoundary.tsx\");\nvar I18nLabel_1 = __webpack_require__(/*! ../I18nLabel */ \"./src/I18nLabel.ts\");\nvar __1 = __webpack_require__(/*! .. */ \"./src/index.ts\");\n/** @hidden @internal */\nvar Tab = function (props) {\n    var layout = props.layout, selected = props.selected, node = props.node, factory = props.factory, path = props.path;\n    var _a = React.useState(!props.node.isEnableRenderOnDemand() || props.selected), renderComponent = _a[0], setRenderComponent = _a[1];\n    React.useLayoutEffect(function () {\n        if (!renderComponent && selected) {\n            // load on demand\n            // console.log(\"load on demand: \" + node.getName());\n            setRenderComponent(true);\n        }\n    });\n    var onMouseDown = function () {\n        var parent = node.getParent();\n        if (parent.getType() === TabSetNode_1.default.TYPE) {\n            if (!parent.isActive()) {\n                layout.doAction(Actions_1.default.setActiveTabset(parent.getId()));\n            }\n        }\n    };\n    var cm = layout.getClassName;\n    var useVisibility = node.getModel().isUseVisibility();\n    var parentNode = node.getParent();\n    var style = node._styleWithPosition();\n    if (!selected) {\n        hideElement(style, useVisibility);\n    }\n    if (parentNode instanceof TabSetNode_1.default) {\n        if (node.getModel().getMaximizedTabset() !== undefined && !parentNode.isMaximized()) {\n            hideElement(style, useVisibility);\n        }\n    }\n    var child;\n    if (renderComponent) {\n        child = factory(node);\n    }\n    var className = cm(Types_1.CLASSES.FLEXLAYOUT__TAB);\n    if (parentNode instanceof __1.BorderNode) {\n        className += \" \" + cm(Types_1.CLASSES.FLEXLAYOUT__TAB_BORDER);\n        className += \" \" + cm(Types_1.CLASSES.FLEXLAYOUT__TAB_BORDER_ + parentNode.getLocation().getName());\n    }\n    return (React.createElement(\"div\", { className: className, \"data-layout-path\": path, onMouseDown: onMouseDown, onTouchStart: onMouseDown, style: style },\n        React.createElement(ErrorBoundary_1.ErrorBoundary, { message: props.layout.i18nName(I18nLabel_1.I18nLabel.Error_rendering_component) },\n            React.createElement(react_1.Fragment, null, child))));\n};\nexports.Tab = Tab;\nfunction hideElement(style, useVisibility) {\n    if (useVisibility) {\n        style.visibility = \"hidden\";\n    }\n    else {\n        style.display = \"none\";\n    }\n}\nexports.hideElement = hideElement;\n\n\n//# sourceURL=webpack://FlexLayout/./src/view/Tab.tsx?");
 
 /***/ }),
 
@@ -656,7 +656,7 @@ eval("\nObject.defineProperty(exports, \"__esModule\", { value: true });\nexport
 /***/ (function(module, exports, __webpack_require__) {
 
 "use strict";
-eval("\nObject.defineProperty(exports, \"__esModule\", { value: true });\nexports.TabButton = void 0;\nvar React = __webpack_require__(/*! react */ \"react\");\nvar I18nLabel_1 = __webpack_require__(/*! ../I18nLabel */ \"./src/I18nLabel.ts\");\nvar Actions_1 = __webpack_require__(/*! ../model/Actions */ \"./src/model/Actions.ts\");\nvar Rect_1 = __webpack_require__(/*! ../Rect */ \"./src/Rect.ts\");\nvar ICloseType_1 = __webpack_require__(/*! ../model/ICloseType */ \"./src/model/ICloseType.ts\");\nvar Types_1 = __webpack_require__(/*! ../Types */ \"./src/Types.ts\");\n/** @hidden @internal */\nvar TabButton = function (props) {\n    var layout = props.layout, node = props.node, show = props.show, selected = props.selected, iconFactory = props.iconFactory, titleFactory = props.titleFactory, icons = props.icons;\n    var selfRef = React.useRef(null);\n    var contentRef = React.useRef(null);\n    var contentWidth = React.useRef(0);\n    var onMouseDown = function (event) {\n        if (!layout.getEditingTab()) {\n            var message = layout.i18nName(I18nLabel_1.I18nLabel.Move_Tab, node.getName());\n            layout.dragStart(event, message, node, node.isEnableDrag(), onClick, onDoubleClick);\n        }\n    };\n    var onClick = function () {\n        layout.doAction(Actions_1.default.selectTab(node.getId()));\n    };\n    var onDoubleClick = function (event) {\n        if (node.isEnableRename()) {\n            layout.setEditingTab(node);\n            layout.getCurrentDocument().body.addEventListener(\"mousedown\", onEndEdit);\n            layout.getCurrentDocument().body.addEventListener(\"touchstart\", onEndEdit);\n        }\n        // else {\n        //     const parentNode = node.getParent() as TabSetNode;\n        //     if (parentNode.canMaximize()) {\n        //         layout.maximize(parentNode);\n        //     }\n        // }\n    };\n    var onEndEdit = function (event) {\n        if (event.target !== contentRef.current) {\n            layout.getCurrentDocument().body.removeEventListener(\"mousedown\", onEndEdit);\n            layout.getCurrentDocument().body.removeEventListener(\"touchstart\", onEndEdit);\n            layout.setEditingTab(undefined);\n        }\n    };\n    var isClosable = function () {\n        var closeType = node.getCloseType();\n        if (selected || closeType === ICloseType_1.ICloseType.Always) {\n            return true;\n        }\n        if (closeType === ICloseType_1.ICloseType.Visible) {\n            // not selected but x should be visible due to hover\n            if (window.matchMedia && window.matchMedia(\"(hover: hover) and (pointer: fine)\").matches) {\n                return true;\n            }\n        }\n        return false;\n    };\n    var onClose = function (event) {\n        if (isClosable()) {\n            layout.doAction(Actions_1.default.deleteTab(node.getId()));\n        }\n        else {\n            onClick();\n        }\n    };\n    var onCloseMouseDown = function (event) {\n        event.stopPropagation();\n    };\n    React.useLayoutEffect(function () {\n        updateRect();\n        if (layout.getEditingTab() === node) {\n            contentRef.current.select();\n        }\n    });\n    var updateRect = function () {\n        // record position of tab in node\n        var layoutRect = layout.getDomRect();\n        var r = selfRef.current.getBoundingClientRect();\n        node._setTabRect(new Rect_1.default(r.left - layoutRect.left, r.top - layoutRect.top, r.width, r.height));\n        contentWidth.current = contentRef.current.getBoundingClientRect().width;\n    };\n    var onTextBoxMouseDown = function (event) {\n        // console.log(\"onTextBoxMouseDown\");\n        event.stopPropagation();\n    };\n    var onTextBoxKeyPress = function (event) {\n        // console.log(event, event.keyCode);\n        if (event.keyCode === 27) {\n            // esc\n            layout.setEditingTab(undefined);\n        }\n        else if (event.keyCode === 13) {\n            // enter\n            layout.setEditingTab(undefined);\n            layout.doAction(Actions_1.default.renameTab(node.getId(), event.target.value));\n        }\n    };\n    var cm = layout.getClassName;\n    var parentNode = node.getParent();\n    var baseClassName = Types_1.CLASSES.FLEXLAYOUT__TAB_BUTTON;\n    var classNames = cm(baseClassName);\n    classNames += \" \" + cm(baseClassName + \"_\" + parentNode.getTabLocation());\n    if (selected) {\n        classNames += \" \" + cm(baseClassName + \"--selected\");\n    }\n    else {\n        classNames += \" \" + cm(baseClassName + \"--unselected\");\n    }\n    if (node.getClassName() !== undefined) {\n        classNames += \" \" + node.getClassName();\n    }\n    var leadingContent = iconFactory ? iconFactory(node) : undefined;\n    var titleContent = node.getName();\n    var name = node.getName();\n    function isTitleObject(obj) {\n        return obj.titleContent !== undefined;\n    }\n    if (titleFactory !== undefined) {\n        var titleObj = titleFactory(node);\n        if (titleObj !== undefined) {\n            if (typeof titleObj === \"string\") {\n                titleContent = titleObj;\n                name = titleObj;\n            }\n            else if (isTitleObject(titleObj)) {\n                titleContent = titleObj.titleContent;\n                name = titleObj.name;\n            }\n            else {\n                titleContent = titleObj;\n            }\n        }\n    }\n    if (typeof leadingContent === undefined && typeof node.getIcon() !== undefined) {\n        leadingContent = React.createElement(\"img\", { src: node.getIcon(), alt: \"leadingContent\" });\n    }\n    var buttons = [];\n    // allow customization of leading contents (icon) and contents\n    var renderState = { leading: leadingContent, content: titleContent, name: name, buttons: buttons };\n    layout.customizeTab(node, renderState);\n    node._setRenderedName(renderState.name);\n    var content = (React.createElement(\"div\", { ref: contentRef, className: cm(Types_1.CLASSES.FLEXLAYOUT__TAB_BUTTON_CONTENT) }, renderState.content));\n    var leading = React.createElement(\"div\", { className: cm(Types_1.CLASSES.FLEXLAYOUT__TAB_BUTTON_LEADING) }, renderState.leading);\n    if (layout.getEditingTab() === node) {\n        var contentStyle = { width: contentWidth + \"px\" };\n        content = (React.createElement(\"input\", { style: contentStyle, ref: contentRef, className: cm(Types_1.CLASSES.FLEXLAYOUT__TAB_BUTTON_TEXTBOX), type: \"text\", autoFocus: true, defaultValue: node.getName(), onKeyDown: onTextBoxKeyPress, onMouseDown: onTextBoxMouseDown, onTouchStart: onTextBoxMouseDown }));\n    }\n    if (node.isEnableClose()) {\n        var closeTitle = layout.i18nName(I18nLabel_1.I18nLabel.Close_Tab);\n        buttons.push(React.createElement(\"div\", { key: \"close\", title: closeTitle, className: cm(Types_1.CLASSES.FLEXLAYOUT__TAB_BUTTON_TRAILING), onMouseDown: onCloseMouseDown, onClick: onClose, onTouchStart: onCloseMouseDown }, icons === null || icons === void 0 ? void 0 : icons.close));\n    }\n    return (React.createElement(\"div\", { ref: selfRef, style: {\n            visibility: show ? \"visible\" : \"hidden\",\n        }, className: classNames, onMouseDown: onMouseDown, onTouchStart: onMouseDown, title: node.getHelpText() },\n        leading,\n        content,\n        buttons));\n};\nexports.TabButton = TabButton;\n\n\n//# sourceURL=webpack://FlexLayout/./src/view/TabButton.tsx?");
+eval("\nObject.defineProperty(exports, \"__esModule\", { value: true });\nexports.TabButton = void 0;\nvar React = __webpack_require__(/*! react */ \"react\");\nvar I18nLabel_1 = __webpack_require__(/*! ../I18nLabel */ \"./src/I18nLabel.ts\");\nvar Actions_1 = __webpack_require__(/*! ../model/Actions */ \"./src/model/Actions.ts\");\nvar Rect_1 = __webpack_require__(/*! ../Rect */ \"./src/Rect.ts\");\nvar ICloseType_1 = __webpack_require__(/*! ../model/ICloseType */ \"./src/model/ICloseType.ts\");\nvar Types_1 = __webpack_require__(/*! ../Types */ \"./src/Types.ts\");\nvar TabSet_1 = __webpack_require__(/*! ./TabSet */ \"./src/view/TabSet.tsx\");\n/** @hidden @internal */\nvar TabButton = function (props) {\n    var layout = props.layout, node = props.node, selected = props.selected, iconFactory = props.iconFactory, titleFactory = props.titleFactory, icons = props.icons, path = props.path;\n    var selfRef = React.useRef(null);\n    var contentRef = React.useRef(null);\n    var contentWidth = React.useRef(0);\n    var onMouseDown = function (event) {\n        if (!TabSet_1.isAuxMouseEvent(event) && !layout.getEditingTab()) {\n            var message = layout.i18nName(I18nLabel_1.I18nLabel.Move_Tab, node.getName());\n            layout.dragStart(event, message, node, node.isEnableDrag(), onClick, onDoubleClick);\n        }\n    };\n    var onAuxMouseClick = function (event) {\n        if (TabSet_1.isAuxMouseEvent(event)) {\n            layout.auxMouseClick(node, event);\n        }\n    };\n    var onContextMenu = function (event) {\n        layout.showContextMenu(node, event);\n    };\n    var onClick = function () {\n        layout.doAction(Actions_1.default.selectTab(node.getId()));\n    };\n    var onDoubleClick = function (event) {\n        if (node.isEnableRename()) {\n            layout.setEditingTab(node);\n            layout.getCurrentDocument().body.addEventListener(\"mousedown\", onEndEdit);\n            layout.getCurrentDocument().body.addEventListener(\"touchstart\", onEndEdit);\n        }\n        // else {\n        //     const parentNode = node.getParent() as TabSetNode;\n        //     if (parentNode.canMaximize()) {\n        //         layout.maximize(parentNode);\n        //     }\n        // }\n    };\n    var onEndEdit = function (event) {\n        if (event.target !== contentRef.current) {\n            layout.getCurrentDocument().body.removeEventListener(\"mousedown\", onEndEdit);\n            layout.getCurrentDocument().body.removeEventListener(\"touchstart\", onEndEdit);\n            layout.setEditingTab(undefined);\n        }\n    };\n    var isClosable = function () {\n        var closeType = node.getCloseType();\n        if (selected || closeType === ICloseType_1.ICloseType.Always) {\n            return true;\n        }\n        if (closeType === ICloseType_1.ICloseType.Visible) {\n            // not selected but x should be visible due to hover\n            if (window.matchMedia && window.matchMedia(\"(hover: hover) and (pointer: fine)\").matches) {\n                return true;\n            }\n        }\n        return false;\n    };\n    var onClose = function (event) {\n        if (isClosable()) {\n            layout.doAction(Actions_1.default.deleteTab(node.getId()));\n        }\n        else {\n            onClick();\n        }\n    };\n    var onCloseMouseDown = function (event) {\n        event.stopPropagation();\n    };\n    React.useLayoutEffect(function () {\n        updateRect();\n        if (layout.getEditingTab() === node) {\n            contentRef.current.select();\n        }\n    });\n    var updateRect = function () {\n        // record position of tab in node\n        var layoutRect = layout.getDomRect();\n        var r = selfRef.current.getBoundingClientRect();\n        node._setTabRect(new Rect_1.default(r.left - layoutRect.left, r.top - layoutRect.top, r.width, r.height));\n        contentWidth.current = contentRef.current.getBoundingClientRect().width;\n    };\n    var onTextBoxMouseDown = function (event) {\n        // console.log(\"onTextBoxMouseDown\");\n        event.stopPropagation();\n    };\n    var onTextBoxKeyPress = function (event) {\n        // console.log(event, event.keyCode);\n        if (event.keyCode === 27) {\n            // esc\n            layout.setEditingTab(undefined);\n        }\n        else if (event.keyCode === 13) {\n            // enter\n            layout.setEditingTab(undefined);\n            layout.doAction(Actions_1.default.renameTab(node.getId(), event.target.value));\n        }\n    };\n    var cm = layout.getClassName;\n    var parentNode = node.getParent();\n    var baseClassName = Types_1.CLASSES.FLEXLAYOUT__TAB_BUTTON;\n    var classNames = cm(baseClassName);\n    classNames += \" \" + cm(baseClassName + \"_\" + parentNode.getTabLocation());\n    if (selected) {\n        classNames += \" \" + cm(baseClassName + \"--selected\");\n    }\n    else {\n        classNames += \" \" + cm(baseClassName + \"--unselected\");\n    }\n    if (node.getClassName() !== undefined) {\n        classNames += \" \" + node.getClassName();\n    }\n    var leadingContent = iconFactory ? iconFactory(node) : undefined;\n    var titleContent = node.getName();\n    var name = node.getName();\n    function isTitleObject(obj) {\n        return obj.titleContent !== undefined;\n    }\n    if (titleFactory !== undefined) {\n        var titleObj = titleFactory(node);\n        if (titleObj !== undefined) {\n            if (typeof titleObj === \"string\") {\n                titleContent = titleObj;\n                name = titleObj;\n            }\n            else if (isTitleObject(titleObj)) {\n                titleContent = titleObj.titleContent;\n                name = titleObj.name;\n            }\n            else {\n                titleContent = titleObj;\n            }\n        }\n    }\n    if (leadingContent === undefined && node.getIcon() !== undefined) {\n        leadingContent = React.createElement(\"img\", { src: node.getIcon(), alt: \"leadingContent\" });\n    }\n    var buttons = [];\n    // allow customization of leading contents (icon) and contents\n    var renderState = { leading: leadingContent, content: titleContent, name: name, buttons: buttons };\n    layout.customizeTab(node, renderState);\n    node._setRenderedName(renderState.name);\n    var content = (React.createElement(\"div\", { ref: contentRef, className: cm(Types_1.CLASSES.FLEXLAYOUT__TAB_BUTTON_CONTENT) }, renderState.content));\n    var leading = React.createElement(\"div\", { className: cm(Types_1.CLASSES.FLEXLAYOUT__TAB_BUTTON_LEADING) }, renderState.leading);\n    if (layout.getEditingTab() === node) {\n        var contentStyle = { width: contentWidth + \"px\" };\n        content = (React.createElement(\"input\", { style: contentStyle, ref: contentRef, className: cm(Types_1.CLASSES.FLEXLAYOUT__TAB_BUTTON_TEXTBOX), \"data-layout-path\": path + \"/textbox\", type: \"text\", autoFocus: true, defaultValue: node.getName(), onKeyDown: onTextBoxKeyPress, onMouseDown: onTextBoxMouseDown, onTouchStart: onTextBoxMouseDown }));\n    }\n    if (node.isEnableClose()) {\n        var closeTitle = layout.i18nName(I18nLabel_1.I18nLabel.Close_Tab);\n        buttons.push(React.createElement(\"div\", { key: \"close\", \"data-layout-path\": path + \"/button/close\", title: closeTitle, className: cm(Types_1.CLASSES.FLEXLAYOUT__TAB_BUTTON_TRAILING), onMouseDown: onCloseMouseDown, onClick: onClose, onTouchStart: onCloseMouseDown }, icons === null || icons === void 0 ? void 0 : icons.close));\n    }\n    return (React.createElement(\"div\", { ref: selfRef, \"data-layout-path\": path, className: classNames, onMouseDown: onMouseDown, onClick: onAuxMouseClick, onAuxClick: onAuxMouseClick, onContextMenu: onContextMenu, onTouchStart: onMouseDown, title: node.getHelpText() },\n        leading,\n        content,\n        buttons));\n};\nexports.TabButton = TabButton;\n\n\n//# sourceURL=webpack://FlexLayout/./src/view/TabButton.tsx?");
 
 /***/ }),
 
@@ -668,7 +668,7 @@ eval("\nObject.defineProperty(exports, \"__esModule\", { value: true });\nexport
 /***/ (function(module, exports, __webpack_require__) {
 
 "use strict";
-eval("\nObject.defineProperty(exports, \"__esModule\", { value: true });\nexports.TabFloating = void 0;\nvar React = __webpack_require__(/*! react */ \"react\");\nvar Actions_1 = __webpack_require__(/*! ../model/Actions */ \"./src/model/Actions.ts\");\nvar TabSetNode_1 = __webpack_require__(/*! ../model/TabSetNode */ \"./src/model/TabSetNode.ts\");\nvar Types_1 = __webpack_require__(/*! ../Types */ \"./src/Types.ts\");\nvar I18nLabel_1 = __webpack_require__(/*! ../I18nLabel */ \"./src/I18nLabel.ts\");\n/** @hidden @internal */\nvar TabFloating = function (props) {\n    var layout = props.layout, selected = props.selected, node = props.node;\n    var onMouseDown = function () {\n        var parent = node.getParent();\n        if (parent.getType() === TabSetNode_1.default.TYPE) {\n            if (!parent.isActive()) {\n                layout.doAction(Actions_1.default.setActiveTabset(parent.getId()));\n            }\n        }\n    };\n    var onClickFocus = function (event) {\n        event.preventDefault();\n        if (node.getWindow()) {\n            node.getWindow().focus();\n        }\n    };\n    var onClickDock = function (event) {\n        event.preventDefault();\n        layout.doAction(Actions_1.default.unFloatTab(node.getId()));\n    };\n    var cm = layout.getClassName;\n    var style = node._styleWithPosition({\n        display: selected ? \"flex\" : \"none\",\n    });\n    var message = layout.i18nName(I18nLabel_1.I18nLabel.Floating_Window_Message);\n    var showMessage = layout.i18nName(I18nLabel_1.I18nLabel.Floating_Window_Show_Window);\n    var dockMessage = layout.i18nName(I18nLabel_1.I18nLabel.Floating_Window_Dock_Window);\n    return (React.createElement(\"div\", { className: cm(Types_1.CLASSES.FLEXLAYOUT__TAB_FLOATING), onMouseDown: onMouseDown, onTouchStart: onMouseDown, style: style },\n        React.createElement(\"div\", { className: cm(Types_1.CLASSES.FLEXLAYOUT__TAB_FLOATING_INNER) },\n            React.createElement(\"div\", null, message),\n            React.createElement(\"div\", null,\n                React.createElement(\"a\", { href: \"#\", onClick: onClickFocus }, showMessage)),\n            React.createElement(\"div\", null,\n                React.createElement(\"a\", { href: \"#\", onClick: onClickDock }, dockMessage)))));\n};\nexports.TabFloating = TabFloating;\n\n\n//# sourceURL=webpack://FlexLayout/./src/view/TabFloating.tsx?");
+eval("\nObject.defineProperty(exports, \"__esModule\", { value: true });\nexports.TabFloating = void 0;\nvar React = __webpack_require__(/*! react */ \"react\");\nvar Actions_1 = __webpack_require__(/*! ../model/Actions */ \"./src/model/Actions.ts\");\nvar TabSetNode_1 = __webpack_require__(/*! ../model/TabSetNode */ \"./src/model/TabSetNode.ts\");\nvar Types_1 = __webpack_require__(/*! ../Types */ \"./src/Types.ts\");\nvar I18nLabel_1 = __webpack_require__(/*! ../I18nLabel */ \"./src/I18nLabel.ts\");\nvar Tab_1 = __webpack_require__(/*! ./Tab */ \"./src/view/Tab.tsx\");\n/** @hidden @internal */\nvar TabFloating = function (props) {\n    var layout = props.layout, selected = props.selected, node = props.node, path = props.path;\n    var showPopout = function () {\n        if (node.getWindow()) {\n            node.getWindow().focus();\n        }\n    };\n    var dockPopout = function () {\n        layout.doAction(Actions_1.default.unFloatTab(node.getId()));\n    };\n    var onMouseDown = function () {\n        var parent = node.getParent();\n        if (parent.getType() === TabSetNode_1.default.TYPE) {\n            if (!parent.isActive()) {\n                layout.doAction(Actions_1.default.setActiveTabset(parent.getId()));\n            }\n        }\n    };\n    var onClickFocus = function (event) {\n        event.preventDefault();\n        showPopout();\n    };\n    var onClickDock = function (event) {\n        event.preventDefault();\n        dockPopout();\n    };\n    var cm = layout.getClassName;\n    var style = node._styleWithPosition();\n    if (!selected) {\n        Tab_1.hideElement(style, node.getModel().isUseVisibility());\n    }\n    var message = layout.i18nName(I18nLabel_1.I18nLabel.Floating_Window_Message);\n    var showMessage = layout.i18nName(I18nLabel_1.I18nLabel.Floating_Window_Show_Window);\n    var dockMessage = layout.i18nName(I18nLabel_1.I18nLabel.Floating_Window_Dock_Window);\n    var customRenderCallback = layout.getOnRenderFloatingTabPlaceholder();\n    if (customRenderCallback) {\n        return (React.createElement(\"div\", { className: cm(Types_1.CLASSES.FLEXLAYOUT__TAB_FLOATING), onMouseDown: onMouseDown, onTouchStart: onMouseDown, style: style }, customRenderCallback(dockPopout, showPopout)));\n    }\n    else {\n        return (React.createElement(\"div\", { className: cm(Types_1.CLASSES.FLEXLAYOUT__TAB_FLOATING), \"data-layout-path\": path, onMouseDown: onMouseDown, onTouchStart: onMouseDown, style: style },\n            React.createElement(\"div\", { className: cm(Types_1.CLASSES.FLEXLAYOUT__TAB_FLOATING_INNER) },\n                React.createElement(\"div\", null, message),\n                React.createElement(\"div\", null,\n                    React.createElement(\"a\", { href: \"#\", onClick: onClickFocus }, showMessage)),\n                React.createElement(\"div\", null,\n                    React.createElement(\"a\", { href: \"#\", onClick: onClickDock }, dockMessage)))));\n    }\n};\nexports.TabFloating = TabFloating;\n\n\n//# sourceURL=webpack://FlexLayout/./src/view/TabFloating.tsx?");
 
 /***/ }),
 
@@ -692,7 +692,7 @@ eval("\nObject.defineProperty(exports, \"__esModule\", { value: true });\nexport
 /***/ (function(module, exports, __webpack_require__) {
 
 "use strict";
-eval("\nvar __spreadArray = (this && this.__spreadArray) || function (to, from) {\n    for (var i = 0, il = from.length, j = to.length; i < il; i++, j++)\n        to[j] = from[i];\n    return to;\n};\nObject.defineProperty(exports, \"__esModule\", { value: true });\nexports.TabSet = void 0;\nvar React = __webpack_require__(/*! react */ \"react\");\nvar I18nLabel_1 = __webpack_require__(/*! ../I18nLabel */ \"./src/I18nLabel.ts\");\nvar Actions_1 = __webpack_require__(/*! ../model/Actions */ \"./src/model/Actions.ts\");\nvar PopupMenu_1 = __webpack_require__(/*! ../PopupMenu */ \"./src/PopupMenu.tsx\");\nvar TabButton_1 = __webpack_require__(/*! ./TabButton */ \"./src/view/TabButton.tsx\");\nvar TabOverflowHook_1 = __webpack_require__(/*! ./TabOverflowHook */ \"./src/view/TabOverflowHook.tsx\");\nvar Orientation_1 = __webpack_require__(/*! ../Orientation */ \"./src/Orientation.ts\");\nvar Types_1 = __webpack_require__(/*! ../Types */ \"./src/Types.ts\");\n/** @hidden @internal */\nvar TabSet = function (props) {\n    var node = props.node, layout = props.layout, iconFactory = props.iconFactory, titleFactory = props.titleFactory, icons = props.icons;\n    var toolbarRef = React.useRef(null);\n    var overflowbuttonRef = React.useRef(null);\n    var tabbarInnerRef = React.useRef(null);\n    var stickyButtonsRef = React.useRef(null);\n    var _a = TabOverflowHook_1.useTabOverflow(node, Orientation_1.default.HORZ, toolbarRef, stickyButtonsRef), selfRef = _a.selfRef, position = _a.position, userControlledLeft = _a.userControlledLeft, hiddenTabs = _a.hiddenTabs, onMouseWheel = _a.onMouseWheel, tabsTruncated = _a.tabsTruncated;\n    var onOverflowClick = function () {\n        var element = overflowbuttonRef.current;\n        PopupMenu_1.showPopup(layout.getRootDiv(), element, hiddenTabs, onOverflowItemSelect, layout.getClassName);\n    };\n    var onOverflowItemSelect = function (item) {\n        layout.doAction(Actions_1.default.selectTab(item.node.getId()));\n        userControlledLeft.current = false;\n    };\n    var onMouseDown = function (event) {\n        var name = node.getName();\n        if (name === undefined) {\n            name = \"\";\n        }\n        else {\n            name = \": \" + name;\n        }\n        layout.doAction(Actions_1.default.setActiveTabset(node.getId()));\n        if (!layout.getEditingTab()) {\n            var message = layout.i18nName(I18nLabel_1.I18nLabel.Move_Tabset, name);\n            layout.dragStart(event, message, node, node.isEnableDrag(), function (event2) { return undefined; }, onDoubleClick);\n        }\n    };\n    var onInterceptMouseDown = function (event) {\n        event.stopPropagation();\n    };\n    var onMaximizeToggle = function () {\n        if (node.canMaximize()) {\n            layout.maximize(node);\n        }\n    };\n    var onClose = function () {\n        layout.doAction(Actions_1.default.deleteTabset(node.getId()));\n    };\n    var onFloatTab = function () {\n        if (selectedTabNode !== undefined) {\n            layout.doAction(Actions_1.default.floatTab(selectedTabNode.getId()));\n        }\n    };\n    var onDoubleClick = function (event) {\n        if (node.canMaximize()) {\n            layout.maximize(node);\n        }\n    };\n    // Start Render\n    var cm = layout.getClassName;\n    // tabbar inner can get shifted left via tab rename, this resets scrollleft to 0\n    if (tabbarInnerRef.current !== null && tabbarInnerRef.current.scrollLeft !== 0) {\n        tabbarInnerRef.current.scrollLeft = 0;\n    }\n    var selectedTabNode = node.getSelectedNode();\n    var style = node._styleWithPosition();\n    if (node.getModel().getMaximizedTabset() !== undefined && !node.isMaximized()) {\n        style.display = \"none\";\n    }\n    var tabs = [];\n    if (node.isEnableTabStrip()) {\n        for (var i = 0; i < node.getChildren().length; i++) {\n            var child = node.getChildren()[i];\n            var isSelected = node.getSelected() === i;\n            tabs.push(React.createElement(TabButton_1.TabButton, { layout: layout, node: child, key: child.getId(), selected: isSelected, show: true, height: node.getTabStripHeight(), iconFactory: iconFactory, titleFactory: titleFactory, icons: icons }));\n        }\n    }\n    var showHeader = node.getName() !== undefined;\n    var stickyButtons = [];\n    var buttons = [];\n    var headerButtons = [];\n    // allow customization of header contents and buttons\n    var renderState = { headerContent: node.getName(), stickyButtons: stickyButtons, buttons: buttons, headerButtons: headerButtons };\n    layout.customizeTabSet(node, renderState);\n    var headerContent = renderState.headerContent;\n    stickyButtons = renderState.stickyButtons;\n    buttons = renderState.buttons;\n    headerButtons = renderState.headerButtons;\n    if (stickyButtons.length > 0) {\n        if (tabsTruncated) {\n            buttons = __spreadArray(__spreadArray([], stickyButtons), buttons);\n        }\n        else {\n            tabs.push(React.createElement(\"div\", { ref: stickyButtonsRef, key: \"sticky_buttons_container\", onMouseDown: onInterceptMouseDown, onTouchStart: onInterceptMouseDown, onDragStart: function (e) { e.preventDefault(); }, className: cm(Types_1.CLASSES.FLEXLAYOUT__TAB_TOOLBAR_STICKY_BUTTONS_CONTAINER) }, stickyButtons));\n        }\n    }\n    var toolbar;\n    if (hiddenTabs.length > 0) {\n        var overflowTitle = layout.i18nName(I18nLabel_1.I18nLabel.Overflow_Menu_Tooltip);\n        buttons.push(React.createElement(\"button\", { key: \"overflowbutton\", ref: overflowbuttonRef, className: cm(Types_1.CLASSES.FLEXLAYOUT__TAB_BUTTON_OVERFLOW), title: overflowTitle, onClick: onOverflowClick, onMouseDown: onInterceptMouseDown, onTouchStart: onInterceptMouseDown }, icons === null || icons === void 0 ? void 0 :\n            icons.more,\n            hiddenTabs.length));\n    }\n    if (selectedTabNode !== undefined && layout.isSupportsPopout() && selectedTabNode.isEnableFloat() && !selectedTabNode.isFloating()) {\n        var floatTitle = layout.i18nName(I18nLabel_1.I18nLabel.Float_Tab);\n        buttons.push(React.createElement(\"button\", { key: \"float\", title: floatTitle, className: cm(Types_1.CLASSES.FLEXLAYOUT__TAB_TOOLBAR_BUTTON) + \" \" + cm(Types_1.CLASSES.FLEXLAYOUT__TAB_TOOLBAR_BUTTON_FLOAT), onClick: onFloatTab, onMouseDown: onInterceptMouseDown, onTouchStart: onInterceptMouseDown }, icons === null || icons === void 0 ? void 0 : icons.popout));\n    }\n    if (node.canMaximize()) {\n        var minTitle = layout.i18nName(I18nLabel_1.I18nLabel.Restore);\n        var maxTitle = layout.i18nName(I18nLabel_1.I18nLabel.Maximize);\n        var btns = showHeader ? headerButtons : buttons;\n        btns.push(React.createElement(\"button\", { key: \"max\", title: node.isMaximized() ? minTitle : maxTitle, className: cm(Types_1.CLASSES.FLEXLAYOUT__TAB_TOOLBAR_BUTTON) + \" \" + cm(Types_1.CLASSES.FLEXLAYOUT__TAB_TOOLBAR_BUTTON_ + (node.isMaximized() ? \"max\" : \"min\")), onClick: onMaximizeToggle, onMouseDown: onInterceptMouseDown, onTouchStart: onInterceptMouseDown }, node.isMaximized() ? icons === null || icons === void 0 ? void 0 : icons.restore : icons === null || icons === void 0 ? void 0 : icons.maximize));\n    }\n    if (!node.isMaximized() && node.isEnableClose()) {\n        var title = layout.i18nName(I18nLabel_1.I18nLabel.Close_Tabset);\n        var btns = showHeader ? headerButtons : buttons;\n        btns.push(React.createElement(\"button\", { key: \"close\", title: title, className: cm(Types_1.CLASSES.FLEXLAYOUT__TAB_TOOLBAR_BUTTON) + \" \" + cm(Types_1.CLASSES.FLEXLAYOUT__TAB_TOOLBAR_BUTTON_CLOSE), onClick: onClose, onMouseDown: onInterceptMouseDown, onTouchStart: onInterceptMouseDown }, icons === null || icons === void 0 ? void 0 : icons.closeTabset));\n    }\n    toolbar = (React.createElement(\"div\", { key: \"toolbar\", ref: toolbarRef, className: cm(Types_1.CLASSES.FLEXLAYOUT__TAB_TOOLBAR), onMouseDown: onInterceptMouseDown, onTouchStart: onInterceptMouseDown, onDragStart: function (e) { e.preventDefault(); } }, buttons));\n    var header;\n    var tabStrip;\n    var tabStripClasses = cm(Types_1.CLASSES.FLEXLAYOUT__TABSET_TABBAR_OUTER);\n    if (node.getClassNameTabStrip() !== undefined) {\n        tabStripClasses += \" \" + node.getClassNameTabStrip();\n    }\n    tabStripClasses += \" \" + Types_1.CLASSES.FLEXLAYOUT__TABSET_TABBAR_OUTER_ + node.getTabLocation();\n    if (node.isActive() && !showHeader) {\n        tabStripClasses += \" \" + cm(Types_1.CLASSES.FLEXLAYOUT__TABSET_SELECTED);\n    }\n    if (node.isMaximized() && !showHeader) {\n        tabStripClasses += \" \" + cm(Types_1.CLASSES.FLEXLAYOUT__TABSET_MAXIMIZED);\n    }\n    if (showHeader) {\n        var headerToolbar = (React.createElement(\"div\", { key: \"toolbar\", ref: toolbarRef, className: cm(Types_1.CLASSES.FLEXLAYOUT__TAB_TOOLBAR), onMouseDown: onInterceptMouseDown, onTouchStart: onInterceptMouseDown, onDragStart: function (e) { e.preventDefault(); } }, headerButtons));\n        var tabHeaderClasses = cm(Types_1.CLASSES.FLEXLAYOUT__TABSET_HEADER);\n        if (node.isActive()) {\n            tabHeaderClasses += \" \" + cm(Types_1.CLASSES.FLEXLAYOUT__TABSET_SELECTED);\n        }\n        if (node.isMaximized()) {\n            tabHeaderClasses += \" \" + cm(Types_1.CLASSES.FLEXLAYOUT__TABSET_MAXIMIZED);\n        }\n        if (node.getClassNameHeader() !== undefined) {\n            tabHeaderClasses += \" \" + node.getClassNameHeader();\n        }\n        header = (React.createElement(\"div\", { className: tabHeaderClasses, style: { height: node.getHeaderHeight() + \"px\" }, onMouseDown: onMouseDown, onTouchStart: onMouseDown },\n            React.createElement(\"div\", { className: cm(Types_1.CLASSES.FLEXLAYOUT__TABSET_HEADER_CONTENT) }, headerContent),\n            headerToolbar));\n    }\n    var tabStripStyle = { height: node.getTabStripHeight() + \"px\" };\n    if (node.getTabLocation() === \"top\") {\n        var top_1 = showHeader ? node.getHeaderHeight() + \"px\" : \"0px\";\n        tabStripStyle[\"top\"] = top_1;\n    }\n    else {\n        tabStripStyle[\"bottom\"] = \"0px\";\n    }\n    tabStrip = (React.createElement(\"div\", { className: tabStripClasses, style: tabStripStyle, onMouseDown: onMouseDown, onTouchStart: onMouseDown },\n        React.createElement(\"div\", { ref: tabbarInnerRef, className: cm(Types_1.CLASSES.FLEXLAYOUT__TABSET_TABBAR_INNER) + \" \" + cm(Types_1.CLASSES.FLEXLAYOUT__TABSET_TABBAR_INNER_ + node.getTabLocation()) },\n            React.createElement(\"div\", { style: { left: position }, className: cm(Types_1.CLASSES.FLEXLAYOUT__TABSET_TABBAR_INNER_TAB_CONTAINER) + \" \" + cm(Types_1.CLASSES.FLEXLAYOUT__TABSET_TABBAR_INNER_TAB_CONTAINER_ + node.getTabLocation()) }, tabs)),\n        toolbar));\n    style = layout.styleFont(style);\n    return (React.createElement(\"div\", { ref: selfRef, style: style, className: cm(Types_1.CLASSES.FLEXLAYOUT__TABSET), onWheel: onMouseWheel },\n        header,\n        tabStrip));\n};\nexports.TabSet = TabSet;\n\n\n//# sourceURL=webpack://FlexLayout/./src/view/TabSet.tsx?");
+eval("\nvar __spreadArray = (this && this.__spreadArray) || function (to, from) {\n    for (var i = 0, il = from.length, j = to.length; i < il; i++, j++)\n        to[j] = from[i];\n    return to;\n};\nObject.defineProperty(exports, \"__esModule\", { value: true });\nexports.isAuxMouseEvent = exports.TabSet = void 0;\nvar React = __webpack_require__(/*! react */ \"react\");\nvar I18nLabel_1 = __webpack_require__(/*! ../I18nLabel */ \"./src/I18nLabel.ts\");\nvar Actions_1 = __webpack_require__(/*! ../model/Actions */ \"./src/model/Actions.ts\");\nvar PopupMenu_1 = __webpack_require__(/*! ../PopupMenu */ \"./src/PopupMenu.tsx\");\nvar TabButton_1 = __webpack_require__(/*! ./TabButton */ \"./src/view/TabButton.tsx\");\nvar TabOverflowHook_1 = __webpack_require__(/*! ./TabOverflowHook */ \"./src/view/TabOverflowHook.tsx\");\nvar Orientation_1 = __webpack_require__(/*! ../Orientation */ \"./src/Orientation.ts\");\nvar Types_1 = __webpack_require__(/*! ../Types */ \"./src/Types.ts\");\nvar Tab_1 = __webpack_require__(/*! ./Tab */ \"./src/view/Tab.tsx\");\n/** @hidden @internal */\nvar TabSet = function (props) {\n    var node = props.node, layout = props.layout, iconFactory = props.iconFactory, titleFactory = props.titleFactory, icons = props.icons, path = props.path;\n    var toolbarRef = React.useRef(null);\n    var overflowbuttonRef = React.useRef(null);\n    var tabbarInnerRef = React.useRef(null);\n    var stickyButtonsRef = React.useRef(null);\n    var _a = TabOverflowHook_1.useTabOverflow(node, Orientation_1.default.HORZ, toolbarRef, stickyButtonsRef), selfRef = _a.selfRef, position = _a.position, userControlledLeft = _a.userControlledLeft, hiddenTabs = _a.hiddenTabs, onMouseWheel = _a.onMouseWheel, tabsTruncated = _a.tabsTruncated;\n    var onOverflowClick = function (event) {\n        var element = overflowbuttonRef.current;\n        PopupMenu_1.showPopup(layout.getRootDiv(), element, hiddenTabs, onOverflowItemSelect, layout.getClassName);\n        event.stopPropagation();\n    };\n    var onOverflowItemSelect = function (item) {\n        layout.doAction(Actions_1.default.selectTab(item.node.getId()));\n        userControlledLeft.current = false;\n    };\n    var onMouseDown = function (event) {\n        if (!isAuxMouseEvent(event)) {\n            var name_1 = node.getName();\n            if (name_1 === undefined) {\n                name_1 = \"\";\n            }\n            else {\n                name_1 = \": \" + name_1;\n            }\n            layout.doAction(Actions_1.default.setActiveTabset(node.getId()));\n            if (!layout.getEditingTab()) {\n                var message = layout.i18nName(I18nLabel_1.I18nLabel.Move_Tabset, name_1);\n                layout.dragStart(event, message, node, node.isEnableDrag(), function (event2) { return undefined; }, onDoubleClick);\n            }\n        }\n    };\n    var onAuxMouseClick = function (event) {\n        if (isAuxMouseEvent(event)) {\n            layout.auxMouseClick(node, event);\n        }\n    };\n    var onContextMenu = function (event) {\n        layout.showContextMenu(node, event);\n    };\n    var onInterceptMouseDown = function (event) {\n        event.stopPropagation();\n    };\n    var onMaximizeToggle = function (event) {\n        if (node.canMaximize()) {\n            layout.maximize(node);\n        }\n        event.stopPropagation();\n    };\n    var onClose = function (event) {\n        layout.doAction(Actions_1.default.deleteTabset(node.getId()));\n        event.stopPropagation();\n    };\n    var onFloatTab = function (event) {\n        if (selectedTabNode !== undefined) {\n            layout.doAction(Actions_1.default.floatTab(selectedTabNode.getId()));\n        }\n        event.stopPropagation();\n    };\n    var onDoubleClick = function (event) {\n        if (node.canMaximize()) {\n            layout.maximize(node);\n        }\n    };\n    // Start Render\n    var cm = layout.getClassName;\n    // tabbar inner can get shifted left via tab rename, this resets scrollleft to 0\n    if (tabbarInnerRef.current !== null && tabbarInnerRef.current.scrollLeft !== 0) {\n        tabbarInnerRef.current.scrollLeft = 0;\n    }\n    var selectedTabNode = node.getSelectedNode();\n    var style = node._styleWithPosition();\n    if (node.getModel().getMaximizedTabset() !== undefined && !node.isMaximized()) {\n        Tab_1.hideElement(style, node.getModel().isUseVisibility());\n    }\n    var tabs = [];\n    if (node.isEnableTabStrip()) {\n        for (var i = 0; i < node.getChildren().length; i++) {\n            var child = node.getChildren()[i];\n            var isSelected = node.getSelected() === i;\n            tabs.push(React.createElement(TabButton_1.TabButton, { layout: layout, node: child, path: path + \"/tb\" + i, key: child.getId(), selected: isSelected, height: node.getTabStripHeight(), iconFactory: iconFactory, titleFactory: titleFactory, icons: icons }));\n        }\n    }\n    var showHeader = node.getName() !== undefined;\n    var stickyButtons = [];\n    var buttons = [];\n    var headerButtons = [];\n    // allow customization of header contents and buttons\n    var renderState = { headerContent: node.getName(), stickyButtons: stickyButtons, buttons: buttons, headerButtons: headerButtons };\n    layout.customizeTabSet(node, renderState);\n    var headerContent = renderState.headerContent;\n    stickyButtons = renderState.stickyButtons;\n    buttons = renderState.buttons;\n    headerButtons = renderState.headerButtons;\n    if (stickyButtons.length > 0) {\n        if (tabsTruncated) {\n            buttons = __spreadArray(__spreadArray([], stickyButtons), buttons);\n        }\n        else {\n            tabs.push(React.createElement(\"div\", { ref: stickyButtonsRef, key: \"sticky_buttons_container\", onMouseDown: onInterceptMouseDown, onTouchStart: onInterceptMouseDown, onDragStart: function (e) { e.preventDefault(); }, className: cm(Types_1.CLASSES.FLEXLAYOUT__TAB_TOOLBAR_STICKY_BUTTONS_CONTAINER) }, stickyButtons));\n        }\n    }\n    var toolbar;\n    if (hiddenTabs.length > 0) {\n        var overflowTitle = layout.i18nName(I18nLabel_1.I18nLabel.Overflow_Menu_Tooltip);\n        buttons.push(React.createElement(\"button\", { key: \"overflowbutton\", \"data-layout-path\": path + \"/button/overflow\", ref: overflowbuttonRef, className: cm(Types_1.CLASSES.FLEXLAYOUT__TAB_BUTTON_OVERFLOW), title: overflowTitle, onClick: onOverflowClick, onMouseDown: onInterceptMouseDown, onTouchStart: onInterceptMouseDown }, icons === null || icons === void 0 ? void 0 :\n            icons.more,\n            hiddenTabs.length));\n    }\n    if (selectedTabNode !== undefined && layout.isSupportsPopout() && selectedTabNode.isEnableFloat() && !selectedTabNode.isFloating()) {\n        var floatTitle = layout.i18nName(I18nLabel_1.I18nLabel.Float_Tab);\n        buttons.push(React.createElement(\"button\", { key: \"float\", \"data-layout-path\": path + \"/button/float\", title: floatTitle, className: cm(Types_1.CLASSES.FLEXLAYOUT__TAB_TOOLBAR_BUTTON) + \" \" + cm(Types_1.CLASSES.FLEXLAYOUT__TAB_TOOLBAR_BUTTON_FLOAT), onClick: onFloatTab, onMouseDown: onInterceptMouseDown, onTouchStart: onInterceptMouseDown }, icons === null || icons === void 0 ? void 0 : icons.popout));\n    }\n    if (node.canMaximize()) {\n        var minTitle = layout.i18nName(I18nLabel_1.I18nLabel.Restore);\n        var maxTitle = layout.i18nName(I18nLabel_1.I18nLabel.Maximize);\n        var btns = showHeader ? headerButtons : buttons;\n        btns.push(React.createElement(\"button\", { key: \"max\", \"data-layout-path\": path + \"/button/max\", title: node.isMaximized() ? minTitle : maxTitle, className: cm(Types_1.CLASSES.FLEXLAYOUT__TAB_TOOLBAR_BUTTON) + \" \" + cm(Types_1.CLASSES.FLEXLAYOUT__TAB_TOOLBAR_BUTTON_ + (node.isMaximized() ? \"max\" : \"min\")), onClick: onMaximizeToggle, onMouseDown: onInterceptMouseDown, onTouchStart: onInterceptMouseDown }, node.isMaximized() ? icons === null || icons === void 0 ? void 0 : icons.restore : icons === null || icons === void 0 ? void 0 : icons.maximize));\n    }\n    if (!node.isMaximized() && node.isEnableClose()) {\n        var title = layout.i18nName(I18nLabel_1.I18nLabel.Close_Tabset);\n        var btns = showHeader ? headerButtons : buttons;\n        btns.push(React.createElement(\"button\", { key: \"close\", \"data-layout-path\": path + \"/button/close\", title: title, className: cm(Types_1.CLASSES.FLEXLAYOUT__TAB_TOOLBAR_BUTTON) + \" \" + cm(Types_1.CLASSES.FLEXLAYOUT__TAB_TOOLBAR_BUTTON_CLOSE), onClick: onClose, onMouseDown: onInterceptMouseDown, onTouchStart: onInterceptMouseDown }, icons === null || icons === void 0 ? void 0 : icons.closeTabset));\n    }\n    toolbar = (React.createElement(\"div\", { key: \"toolbar\", ref: toolbarRef, className: cm(Types_1.CLASSES.FLEXLAYOUT__TAB_TOOLBAR), onMouseDown: onInterceptMouseDown, onTouchStart: onInterceptMouseDown, onDragStart: function (e) { e.preventDefault(); } }, buttons));\n    var header;\n    var tabStrip;\n    var tabStripClasses = cm(Types_1.CLASSES.FLEXLAYOUT__TABSET_TABBAR_OUTER);\n    if (node.getClassNameTabStrip() !== undefined) {\n        tabStripClasses += \" \" + node.getClassNameTabStrip();\n    }\n    tabStripClasses += \" \" + Types_1.CLASSES.FLEXLAYOUT__TABSET_TABBAR_OUTER_ + node.getTabLocation();\n    if (node.isActive() && !showHeader) {\n        tabStripClasses += \" \" + cm(Types_1.CLASSES.FLEXLAYOUT__TABSET_SELECTED);\n    }\n    if (node.isMaximized() && !showHeader) {\n        tabStripClasses += \" \" + cm(Types_1.CLASSES.FLEXLAYOUT__TABSET_MAXIMIZED);\n    }\n    if (showHeader) {\n        var headerToolbar = (React.createElement(\"div\", { key: \"toolbar\", ref: toolbarRef, className: cm(Types_1.CLASSES.FLEXLAYOUT__TAB_TOOLBAR), onMouseDown: onInterceptMouseDown, onTouchStart: onInterceptMouseDown, onDragStart: function (e) { e.preventDefault(); } }, headerButtons));\n        var tabHeaderClasses = cm(Types_1.CLASSES.FLEXLAYOUT__TABSET_HEADER);\n        if (node.isActive()) {\n            tabHeaderClasses += \" \" + cm(Types_1.CLASSES.FLEXLAYOUT__TABSET_SELECTED);\n        }\n        if (node.isMaximized()) {\n            tabHeaderClasses += \" \" + cm(Types_1.CLASSES.FLEXLAYOUT__TABSET_MAXIMIZED);\n        }\n        if (node.getClassNameHeader() !== undefined) {\n            tabHeaderClasses += \" \" + node.getClassNameHeader();\n        }\n        header = (React.createElement(\"div\", { className: tabHeaderClasses, style: { height: node.getHeaderHeight() + \"px\" }, \"data-layout-path\": path + \"/header\", onMouseDown: onMouseDown, onContextMenu: onContextMenu, onClick: onAuxMouseClick, onAuxClick: onAuxMouseClick, onTouchStart: onMouseDown },\n            React.createElement(\"div\", { className: cm(Types_1.CLASSES.FLEXLAYOUT__TABSET_HEADER_CONTENT) }, headerContent),\n            headerToolbar));\n    }\n    var tabStripStyle = { height: node.getTabStripHeight() + \"px\" };\n    if (node.getTabLocation() === \"top\") {\n        var top_1 = showHeader ? node.getHeaderHeight() + \"px\" : \"0px\";\n        tabStripStyle[\"top\"] = top_1;\n    }\n    else {\n        tabStripStyle[\"bottom\"] = \"0px\";\n    }\n    tabStrip = (React.createElement(\"div\", { className: tabStripClasses, style: tabStripStyle, \"data-layout-path\": path + \"/tabstrip\", onMouseDown: onMouseDown, onContextMenu: onContextMenu, onClick: onAuxMouseClick, onAuxClick: onAuxMouseClick, onTouchStart: onMouseDown },\n        React.createElement(\"div\", { ref: tabbarInnerRef, className: cm(Types_1.CLASSES.FLEXLAYOUT__TABSET_TABBAR_INNER) + \" \" + cm(Types_1.CLASSES.FLEXLAYOUT__TABSET_TABBAR_INNER_ + node.getTabLocation()) },\n            React.createElement(\"div\", { style: { left: position }, className: cm(Types_1.CLASSES.FLEXLAYOUT__TABSET_TABBAR_INNER_TAB_CONTAINER) + \" \" + cm(Types_1.CLASSES.FLEXLAYOUT__TABSET_TABBAR_INNER_TAB_CONTAINER_ + node.getTabLocation()) }, tabs)),\n        toolbar));\n    style = layout.styleFont(style);\n    return (React.createElement(\"div\", { ref: selfRef, dir: \"ltr\", \"data-layout-path\": path, style: style, className: cm(Types_1.CLASSES.FLEXLAYOUT__TABSET), onWheel: onMouseWheel },\n        header,\n        tabStrip));\n};\nexports.TabSet = TabSet;\n/** @hidden @internal */\nfunction isAuxMouseEvent(event) {\n    var auxEvent = false;\n    if (event.nativeEvent instanceof MouseEvent) {\n        if (event.nativeEvent.button !== 0 || event.ctrlKey || event.altKey || event.metaKey || event.shiftKey) {\n            auxEvent = true;\n        }\n    }\n    return auxEvent;\n}\nexports.isAuxMouseEvent = isAuxMouseEvent;\n\n\n//# sourceURL=webpack://FlexLayout/./src/view/TabSet.tsx?");
 
 /***/ }),