flexlayout-react 0.7.12 → 0.7.13

package/dist/flexlayout.js

@@ -56,7 +56,7 @@ eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpac
   \*************************/
 /***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {
 
-eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpack_require__.d(__webpack_exports__, {\n/* harmony export */   \"DragDrop\": () => (/* binding */ DragDrop)\n/* harmony export */ });\n/* harmony import */ var _Rect__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! ./Rect */ \"./src/Rect.ts\");\n\r\n/** @internal */\r\nconst canUseDOM = !!(typeof window !== \"undefined\" && window.document && window.document.createElement);\r\nclass DragDrop {\r\n    /** @internal */\r\n    constructor() {\r\n        /** @internal */\r\n        this._manualGlassManagement = false;\r\n        /** @internal */\r\n        this._startX = 0;\r\n        /** @internal */\r\n        this._startY = 0;\r\n        /** @internal */\r\n        this._dragDepth = 0;\r\n        /** @internal */\r\n        this._glassShowing = false;\r\n        /** @internal */\r\n        this._dragging = false;\r\n        /** @internal */\r\n        this._active = false; // drag and drop is in progress, can be used on ios to prevent body scrolling (see demo)\r\n        if (canUseDOM) {\r\n            // check for serverside rendering\r\n            this._glass = document.createElement(\"div\");\r\n            this._glass.style.zIndex = \"998\";\r\n            this._glass.style.backgroundColor = \"transparent\";\r\n            this._glass.style.outline = \"none\";\r\n        }\r\n        this._defaultGlassCursor = \"default\";\r\n        this._onMouseMove = this._onMouseMove.bind(this);\r\n        this._onMouseUp = this._onMouseUp.bind(this);\r\n        this._onKeyPress = this._onKeyPress.bind(this);\r\n        this._onDragCancel = this._onDragCancel.bind(this);\r\n        this._onDragEnter = this._onDragEnter.bind(this);\r\n        this._onDragLeave = this._onDragLeave.bind(this);\r\n        this.resizeGlass = this.resizeGlass.bind(this);\r\n        this._lastClick = 0;\r\n        this._clickX = 0;\r\n        this._clickY = 0;\r\n    }\r\n    // if you add the glass pane then you should remove it\r\n    addGlass(fCancel) {\r\n        var _a;\r\n        if (!this._glassShowing) {\r\n            if (!this._document) {\r\n                this._document = window.document;\r\n            }\r\n            if (!this._rootElement) {\r\n                this._rootElement = this._document.body;\r\n            }\r\n            this.resizeGlass();\r\n            (_a = this._document.defaultView) === null || _a === void 0 ? void 0 : _a.addEventListener('resize', this.resizeGlass);\r\n            this._document.body.appendChild(this._glass);\r\n            this._glass.tabIndex = -1;\r\n            this._glass.focus();\r\n            this._glass.addEventListener(\"keydown\", this._onKeyPress);\r\n            this._glass.addEventListener(\"dragenter\", this._onDragEnter, { passive: false });\r\n            this._glass.addEventListener(\"dragover\", this._onMouseMove, { passive: false });\r\n            this._glass.addEventListener(\"dragleave\", this._onDragLeave, { passive: false });\r\n            this._glassShowing = true;\r\n            this._fDragCancel = fCancel;\r\n            this._manualGlassManagement = false;\r\n        }\r\n        else {\r\n            // second call to addGlass (via dragstart)\r\n            this._manualGlassManagement = true;\r\n        }\r\n    }\r\n    resizeGlass() {\r\n        const glassRect = _Rect__WEBPACK_IMPORTED_MODULE_0__.Rect.fromElement(this._rootElement);\r\n        glassRect.positionElement(this._glass, \"fixed\");\r\n    }\r\n    hideGlass() {\r\n        var _a;\r\n        if (this._glassShowing) {\r\n            this._document.body.removeChild(this._glass);\r\n            (_a = this._document.defaultView) === null || _a === void 0 ? void 0 : _a.removeEventListener('resize', this.resizeGlass);\r\n            this._glassShowing = false;\r\n            this._document = undefined;\r\n            this._rootElement = undefined;\r\n            this.setGlassCursorOverride(undefined);\r\n        }\r\n    }\r\n    /** @internal */\r\n    _updateGlassCursor() {\r\n        var _a;\r\n        this._glass.style.cursor = (_a = this._glassCursorOverride) !== null && _a !== void 0 ? _a : this._defaultGlassCursor;\r\n    }\r\n    /** @internal */\r\n    _setDefaultGlassCursor(cursor) {\r\n        this._defaultGlassCursor = cursor;\r\n        this._updateGlassCursor();\r\n    }\r\n    setGlassCursorOverride(cursor) {\r\n        this._glassCursorOverride = cursor;\r\n        this._updateGlassCursor();\r\n    }\r\n    startDrag(event, fDragStart, fDragMove, fDragEnd, fDragCancel, fClick, fDblClick, currentDocument, rootElement) {\r\n        // prevent 'duplicate' action (mouse event for same action as previous touch event (a fix for ios))\r\n        if (event && this._lastEvent && this._lastEvent.type.startsWith(\"touch\") && event.type.startsWith(\"mouse\") && event.timeStamp - this._lastEvent.timeStamp < 500) {\r\n            return;\r\n        }\r\n        if (this._dragging) {\r\n            return;\r\n        }\r\n        this._lastEvent = event;\r\n        if (currentDocument) {\r\n            this._document = currentDocument;\r\n        }\r\n        else {\r\n            this._document = window.document;\r\n        }\r\n        if (rootElement) {\r\n            this._rootElement = rootElement;\r\n        }\r\n        else {\r\n            this._rootElement = this._document.body;\r\n        }\r\n        const posEvent = this._getLocationEvent(event);\r\n        this.addGlass(fDragCancel);\r\n        if (event) {\r\n            this._startX = posEvent.clientX;\r\n            this._startY = posEvent.clientY;\r\n            if (!window.matchMedia || window.matchMedia(\"(pointer: fine)\").matches) {\r\n                this._setDefaultGlassCursor(getComputedStyle(event.target).cursor);\r\n            }\r\n            this._stopPropagation(event);\r\n            this._preventDefault(event);\r\n        }\r\n        else {\r\n            this._startX = 0;\r\n            this._startY = 0;\r\n            this._setDefaultGlassCursor(\"default\");\r\n        }\r\n        this._dragging = false;\r\n        this._fDragStart = fDragStart;\r\n        this._fDragMove = fDragMove;\r\n        this._fDragEnd = fDragEnd;\r\n        this._fDragCancel = fDragCancel;\r\n        this._fClick = fClick;\r\n        this._fDblClick = fDblClick;\r\n        this._active = true;\r\n        if ((event === null || event === void 0 ? void 0 : event.type) === 'dragenter') {\r\n            this._dragDepth = 1;\r\n            this._rootElement.addEventListener(\"dragenter\", this._onDragEnter, { passive: false });\r\n            this._rootElement.addEventListener(\"dragover\", this._onMouseMove, { passive: false });\r\n            this._rootElement.addEventListener(\"dragleave\", this._onDragLeave, { passive: false });\r\n            this._document.addEventListener(\"dragend\", this._onDragCancel, { passive: false });\r\n            this._document.addEventListener(\"drop\", this._onMouseUp, { passive: false });\r\n        }\r\n        else {\r\n            this._document.addEventListener(\"mouseup\", this._onMouseUp, { passive: false });\r\n            this._document.addEventListener(\"mousemove\", this._onMouseMove, { passive: false });\r\n            this._document.addEventListener(\"touchend\", this._onMouseUp, { passive: false });\r\n            this._document.addEventListener(\"touchmove\", this._onMouseMove, { passive: false });\r\n        }\r\n    }\r\n    isDragging() {\r\n        return this._dragging;\r\n    }\r\n    isActive() {\r\n        return this._active;\r\n    }\r\n    toString() {\r\n        const rtn = \"(DragDrop: \" + \"startX=\" + this._startX + \", startY=\" + this._startY + \", dragging=\" + this._dragging + \")\";\r\n        return rtn;\r\n    }\r\n    /** @internal */\r\n    _onKeyPress(event) {\r\n        if (event.keyCode === 27) {\r\n            // esc\r\n            this._onDragCancel();\r\n        }\r\n    }\r\n    /** @internal */\r\n    _onDragCancel() {\r\n        this._rootElement.removeEventListener(\"dragenter\", this._onDragEnter);\r\n        this._rootElement.removeEventListener(\"dragover\", this._onMouseMove);\r\n        this._rootElement.removeEventListener(\"dragleave\", this._onDragLeave);\r\n        this._document.removeEventListener(\"dragend\", this._onDragCancel);\r\n        this._document.removeEventListener(\"drop\", this._onMouseUp);\r\n        this._document.removeEventListener(\"mousemove\", this._onMouseMove);\r\n        this._document.removeEventListener(\"mouseup\", this._onMouseUp);\r\n        this._document.removeEventListener(\"touchend\", this._onMouseUp);\r\n        this._document.removeEventListener(\"touchmove\", this._onMouseMove);\r\n        this.hideGlass();\r\n        if (this._fDragCancel !== undefined) {\r\n            this._fDragCancel(this._dragging);\r\n        }\r\n        this._dragging = false;\r\n        this._active = false;\r\n    }\r\n    /** @internal */\r\n    _getLocationEvent(event) {\r\n        let posEvent = event;\r\n        if (event && event.touches) {\r\n            posEvent = event.touches[0];\r\n        }\r\n        return posEvent;\r\n    }\r\n    /** @internal */\r\n    _getLocationEventEnd(event) {\r\n        let posEvent = event;\r\n        if (event.changedTouches) {\r\n            posEvent = event.changedTouches[0];\r\n        }\r\n        return posEvent;\r\n    }\r\n    /** @internal */\r\n    _stopPropagation(event) {\r\n        if (event.stopPropagation) {\r\n            event.stopPropagation();\r\n        }\r\n    }\r\n    /** @internal */\r\n    _preventDefault(event) {\r\n        if (event.preventDefault && event.cancelable) {\r\n            event.preventDefault();\r\n        }\r\n        return event;\r\n    }\r\n    /** @internal */\r\n    _onMouseMove(event) {\r\n        this._lastEvent = event;\r\n        const posEvent = this._getLocationEvent(event);\r\n        this._stopPropagation(event);\r\n        this._preventDefault(event);\r\n        if (!this._dragging && (Math.abs(this._startX - posEvent.clientX) > 5 || Math.abs(this._startY - posEvent.clientY) > 5)) {\r\n            this._dragging = true;\r\n            if (this._fDragStart) {\r\n                this._setDefaultGlassCursor(\"move\");\r\n                this._dragging = this._fDragStart({ clientX: this._startX, clientY: this._startY });\r\n            }\r\n        }\r\n        if (this._dragging) {\r\n            if (this._fDragMove) {\r\n                this._fDragMove(posEvent);\r\n            }\r\n        }\r\n        return false;\r\n    }\r\n    /** @internal */\r\n    _onMouseUp(event) {\r\n        this._lastEvent = event;\r\n        const posEvent = this._getLocationEventEnd(event);\r\n        this._stopPropagation(event);\r\n        this._preventDefault(event);\r\n        this._active = false;\r\n        this._rootElement.removeEventListener(\"dragenter\", this._onDragEnter);\r\n        this._rootElement.removeEventListener(\"dragover\", this._onMouseMove);\r\n        this._rootElement.removeEventListener(\"dragleave\", this._onDragLeave);\r\n        this._document.removeEventListener(\"dragend\", this._onDragCancel);\r\n        this._document.removeEventListener(\"drop\", this._onMouseUp);\r\n        this._document.removeEventListener(\"mousemove\", this._onMouseMove);\r\n        this._document.removeEventListener(\"mouseup\", this._onMouseUp);\r\n        this._document.removeEventListener(\"touchend\", this._onMouseUp);\r\n        this._document.removeEventListener(\"touchmove\", this._onMouseMove);\r\n        if (!this._manualGlassManagement) {\r\n            this.hideGlass();\r\n        }\r\n        if (this._dragging) {\r\n            this._dragging = false;\r\n            if (this._fDragEnd) {\r\n                this._fDragEnd(event);\r\n            }\r\n            // dump(\"set dragging = false\\n\");\r\n        }\r\n        else {\r\n            if (this._fDragCancel) {\r\n                this._fDragCancel(this._dragging);\r\n            }\r\n            if (Math.abs(this._startX - posEvent.clientX) <= 5 && Math.abs(this._startY - posEvent.clientY) <= 5) {\r\n                let isDoubleClick = false;\r\n                const clickTime = new Date().getTime();\r\n                // check for double click\r\n                if (Math.abs(this._clickX - posEvent.clientX) <= 5 && Math.abs(this._clickY - posEvent.clientY) <= 5) {\r\n                    if (clickTime - this._lastClick < 500) {\r\n                        if (this._fDblClick) {\r\n                            this._fDblClick(event);\r\n                            isDoubleClick = true;\r\n                        }\r\n                    }\r\n                }\r\n                if (!isDoubleClick && this._fClick) {\r\n                    this._fClick(event);\r\n                }\r\n                this._lastClick = clickTime;\r\n                this._clickX = posEvent.clientX;\r\n                this._clickY = posEvent.clientY;\r\n            }\r\n        }\r\n        return false;\r\n    }\r\n    /** @internal */\r\n    _onDragEnter(event) {\r\n        this._preventDefault(event);\r\n        this._stopPropagation(event);\r\n        this._dragDepth++;\r\n        return false;\r\n    }\r\n    /** @internal */\r\n    _onDragLeave(event) {\r\n        this._preventDefault(event);\r\n        this._stopPropagation(event);\r\n        this._dragDepth--;\r\n        if (this._dragDepth <= 0) {\r\n            this._onDragCancel();\r\n        }\r\n        return false;\r\n    }\r\n}\r\nDragDrop.instance = new DragDrop();\r\n\n\n//# sourceURL=webpack://FlexLayout/./src/DragDrop.ts?");
+eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpack_require__.d(__webpack_exports__, {\n/* harmony export */   \"DragDrop\": () => (/* binding */ DragDrop)\n/* harmony export */ });\n/* harmony import */ var _Rect__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! ./Rect */ \"./src/Rect.ts\");\n\r\n/** @internal */\r\nconst canUseDOM = !!(typeof window !== \"undefined\" && window.document && window.document.createElement);\r\nclass DragDrop {\r\n    /** @internal */\r\n    constructor() {\r\n        /** @internal */\r\n        this._manualGlassManagement = false;\r\n        /** @internal */\r\n        this._startX = 0;\r\n        /** @internal */\r\n        this._startY = 0;\r\n        /** @internal */\r\n        this._dragDepth = 0;\r\n        /** @internal */\r\n        this._glassShowing = false;\r\n        /** @internal */\r\n        this._dragging = false;\r\n        /** @internal */\r\n        this._active = false; // drag and drop is in progress, can be used on ios to prevent body scrolling (see demo)\r\n        if (canUseDOM) {\r\n            // check for serverside rendering\r\n            this._glass = document.createElement(\"div\");\r\n            this._glass.style.zIndex = \"998\";\r\n            this._glass.style.backgroundColor = \"transparent\";\r\n            this._glass.style.outline = \"none\";\r\n        }\r\n        this._defaultGlassCursor = \"default\";\r\n        this._onMouseMove = this._onMouseMove.bind(this);\r\n        this._onMouseUp = this._onMouseUp.bind(this);\r\n        this._onKeyPress = this._onKeyPress.bind(this);\r\n        this._onDragCancel = this._onDragCancel.bind(this);\r\n        this._onDragEnter = this._onDragEnter.bind(this);\r\n        this._onDragLeave = this._onDragLeave.bind(this);\r\n        this.resizeGlass = this.resizeGlass.bind(this);\r\n        this._lastClick = 0;\r\n        this._clickX = 0;\r\n        this._clickY = 0;\r\n    }\r\n    // if you add the glass pane then you should remove it\r\n    addGlass(fCancel) {\r\n        var _a;\r\n        if (!this._glassShowing) {\r\n            if (!this._document) {\r\n                this._document = window.document;\r\n            }\r\n            if (!this._rootElement) {\r\n                this._rootElement = this._document.body;\r\n            }\r\n            this.resizeGlass();\r\n            (_a = this._document.defaultView) === null || _a === void 0 ? void 0 : _a.addEventListener('resize', this.resizeGlass);\r\n            this._document.body.appendChild(this._glass);\r\n            this._glass.tabIndex = -1;\r\n            this._glass.focus();\r\n            this._glass.addEventListener(\"keydown\", this._onKeyPress);\r\n            this._glass.addEventListener(\"dragenter\", this._onDragEnter, { passive: false });\r\n            this._glass.addEventListener(\"dragover\", this._onMouseMove, { passive: false });\r\n            this._glass.addEventListener(\"dragleave\", this._onDragLeave, { passive: false });\r\n            this._glassShowing = true;\r\n            this._fDragCancel = fCancel;\r\n            this._manualGlassManagement = false;\r\n        }\r\n        else {\r\n            // second call to addGlass (via dragstart)\r\n            this._manualGlassManagement = true;\r\n        }\r\n    }\r\n    resizeGlass() {\r\n        const glassRect = _Rect__WEBPACK_IMPORTED_MODULE_0__.Rect.fromElement(this._rootElement);\r\n        glassRect.positionElement(this._glass, \"fixed\");\r\n    }\r\n    hideGlass() {\r\n        var _a;\r\n        if (this._glassShowing) {\r\n            this._document.body.removeChild(this._glass);\r\n            (_a = this._document.defaultView) === null || _a === void 0 ? void 0 : _a.removeEventListener('resize', this.resizeGlass);\r\n            this._glassShowing = false;\r\n            this._document = undefined;\r\n            this._rootElement = undefined;\r\n            this.setGlassCursorOverride(undefined);\r\n        }\r\n    }\r\n    /** @internal */\r\n    _updateGlassCursor() {\r\n        var _a;\r\n        this._glass.style.cursor = (_a = this._glassCursorOverride) !== null && _a !== void 0 ? _a : this._defaultGlassCursor;\r\n    }\r\n    /** @internal */\r\n    _setDefaultGlassCursor(cursor) {\r\n        this._defaultGlassCursor = cursor;\r\n        this._updateGlassCursor();\r\n    }\r\n    setGlassCursorOverride(cursor) {\r\n        this._glassCursorOverride = cursor;\r\n        this._updateGlassCursor();\r\n    }\r\n    startDrag(event, fDragStart, fDragMove, fDragEnd, fDragCancel, fClick, fDblClick, currentDocument, rootElement) {\r\n        // prevent 'duplicate' action (mouse event for same action as previous touch event (a fix for ios))\r\n        if (event && this._lastEvent && this._lastEvent.type.startsWith(\"touch\") && event.type.startsWith(\"mouse\") && event.timeStamp - this._lastEvent.timeStamp < 500) {\r\n            return;\r\n        }\r\n        if (this._dragging) {\r\n            return;\r\n        }\r\n        this._lastEvent = event;\r\n        if (currentDocument) {\r\n            this._document = currentDocument;\r\n        }\r\n        else {\r\n            this._document = window.document;\r\n        }\r\n        if (rootElement) {\r\n            this._rootElement = rootElement;\r\n        }\r\n        else {\r\n            this._rootElement = this._document.body;\r\n        }\r\n        const posEvent = this._getLocationEvent(event);\r\n        this.addGlass(fDragCancel);\r\n        if (event) {\r\n            this._startX = posEvent.clientX;\r\n            this._startY = posEvent.clientY;\r\n            if (!window.matchMedia || window.matchMedia(\"(pointer: fine)\").matches) {\r\n                this._setDefaultGlassCursor(getComputedStyle(event.target).cursor);\r\n            }\r\n            this._stopPropagation(event);\r\n            this._preventDefault(event);\r\n        }\r\n        else {\r\n            this._startX = 0;\r\n            this._startY = 0;\r\n            this._setDefaultGlassCursor(\"default\");\r\n        }\r\n        this._dragging = false;\r\n        this._fDragStart = fDragStart;\r\n        this._fDragMove = fDragMove;\r\n        this._fDragEnd = fDragEnd;\r\n        this._fDragCancel = fDragCancel;\r\n        this._fClick = fClick;\r\n        this._fDblClick = fDblClick;\r\n        this._active = true;\r\n        if ((event === null || event === void 0 ? void 0 : event.type) === 'dragenter') {\r\n            this._dragDepth = 1;\r\n            this._rootElement.addEventListener(\"dragenter\", this._onDragEnter, { passive: false });\r\n            this._rootElement.addEventListener(\"dragover\", this._onMouseMove, { passive: false });\r\n            this._rootElement.addEventListener(\"dragleave\", this._onDragLeave, { passive: false });\r\n            this._document.addEventListener(\"dragend\", this._onDragCancel, { passive: false });\r\n            this._document.addEventListener(\"drop\", this._onMouseUp, { passive: false });\r\n        }\r\n        else {\r\n            this._document.addEventListener(\"mouseup\", this._onMouseUp, { passive: false });\r\n            this._document.addEventListener(\"mousemove\", this._onMouseMove, { passive: false });\r\n            this._document.addEventListener(\"touchend\", this._onMouseUp, { passive: false });\r\n            this._document.addEventListener(\"touchmove\", this._onMouseMove, { passive: false });\r\n        }\r\n    }\r\n    isDragging() {\r\n        return this._dragging;\r\n    }\r\n    isActive() {\r\n        return this._active;\r\n    }\r\n    toString() {\r\n        const rtn = \"(DragDrop: \" + \"startX=\" + this._startX + \", startY=\" + this._startY + \", dragging=\" + this._dragging + \")\";\r\n        return rtn;\r\n    }\r\n    /** @internal */\r\n    _onKeyPress(event) {\r\n        if (event.code === 'Escape') {\r\n            // esc\r\n            this._onDragCancel();\r\n        }\r\n    }\r\n    /** @internal */\r\n    _onDragCancel() {\r\n        this._rootElement.removeEventListener(\"dragenter\", this._onDragEnter);\r\n        this._rootElement.removeEventListener(\"dragover\", this._onMouseMove);\r\n        this._rootElement.removeEventListener(\"dragleave\", this._onDragLeave);\r\n        this._document.removeEventListener(\"dragend\", this._onDragCancel);\r\n        this._document.removeEventListener(\"drop\", this._onMouseUp);\r\n        this._document.removeEventListener(\"mousemove\", this._onMouseMove);\r\n        this._document.removeEventListener(\"mouseup\", this._onMouseUp);\r\n        this._document.removeEventListener(\"touchend\", this._onMouseUp);\r\n        this._document.removeEventListener(\"touchmove\", this._onMouseMove);\r\n        this.hideGlass();\r\n        if (this._fDragCancel !== undefined) {\r\n            this._fDragCancel(this._dragging);\r\n        }\r\n        this._dragging = false;\r\n        this._active = false;\r\n    }\r\n    /** @internal */\r\n    _getLocationEvent(event) {\r\n        let posEvent = event;\r\n        if (event && event.touches) {\r\n            posEvent = event.touches[0];\r\n        }\r\n        return posEvent;\r\n    }\r\n    /** @internal */\r\n    _getLocationEventEnd(event) {\r\n        let posEvent = event;\r\n        if (event.changedTouches) {\r\n            posEvent = event.changedTouches[0];\r\n        }\r\n        return posEvent;\r\n    }\r\n    /** @internal */\r\n    _stopPropagation(event) {\r\n        if (event.stopPropagation) {\r\n            event.stopPropagation();\r\n        }\r\n    }\r\n    /** @internal */\r\n    _preventDefault(event) {\r\n        if (event.preventDefault && event.cancelable) {\r\n            event.preventDefault();\r\n        }\r\n        return event;\r\n    }\r\n    /** @internal */\r\n    _onMouseMove(event) {\r\n        this._lastEvent = event;\r\n        const posEvent = this._getLocationEvent(event);\r\n        this._stopPropagation(event);\r\n        this._preventDefault(event);\r\n        if (!this._dragging && (Math.abs(this._startX - posEvent.clientX) > 5 || Math.abs(this._startY - posEvent.clientY) > 5)) {\r\n            this._dragging = true;\r\n            if (this._fDragStart) {\r\n                this._setDefaultGlassCursor(\"move\");\r\n                this._dragging = this._fDragStart({ clientX: this._startX, clientY: this._startY });\r\n            }\r\n        }\r\n        if (this._dragging) {\r\n            if (this._fDragMove) {\r\n                this._fDragMove(posEvent);\r\n            }\r\n        }\r\n        return false;\r\n    }\r\n    /** @internal */\r\n    _onMouseUp(event) {\r\n        this._lastEvent = event;\r\n        const posEvent = this._getLocationEventEnd(event);\r\n        this._stopPropagation(event);\r\n        this._preventDefault(event);\r\n        this._active = false;\r\n        this._rootElement.removeEventListener(\"dragenter\", this._onDragEnter);\r\n        this._rootElement.removeEventListener(\"dragover\", this._onMouseMove);\r\n        this._rootElement.removeEventListener(\"dragleave\", this._onDragLeave);\r\n        this._document.removeEventListener(\"dragend\", this._onDragCancel);\r\n        this._document.removeEventListener(\"drop\", this._onMouseUp);\r\n        this._document.removeEventListener(\"mousemove\", this._onMouseMove);\r\n        this._document.removeEventListener(\"mouseup\", this._onMouseUp);\r\n        this._document.removeEventListener(\"touchend\", this._onMouseUp);\r\n        this._document.removeEventListener(\"touchmove\", this._onMouseMove);\r\n        if (!this._manualGlassManagement) {\r\n            this.hideGlass();\r\n        }\r\n        if (this._dragging) {\r\n            this._dragging = false;\r\n            if (this._fDragEnd) {\r\n                this._fDragEnd(event);\r\n            }\r\n            // dump(\"set dragging = false\\n\");\r\n        }\r\n        else {\r\n            if (this._fDragCancel) {\r\n                this._fDragCancel(this._dragging);\r\n            }\r\n            if (Math.abs(this._startX - posEvent.clientX) <= 5 && Math.abs(this._startY - posEvent.clientY) <= 5) {\r\n                let isDoubleClick = false;\r\n                const clickTime = new Date().getTime();\r\n                // check for double click\r\n                if (Math.abs(this._clickX - posEvent.clientX) <= 5 && Math.abs(this._clickY - posEvent.clientY) <= 5) {\r\n                    if (clickTime - this._lastClick < 500) {\r\n                        if (this._fDblClick) {\r\n                            this._fDblClick(event);\r\n                            isDoubleClick = true;\r\n                        }\r\n                    }\r\n                }\r\n                if (!isDoubleClick && this._fClick) {\r\n                    this._fClick(event);\r\n                }\r\n                this._lastClick = clickTime;\r\n                this._clickX = posEvent.clientX;\r\n                this._clickY = posEvent.clientY;\r\n            }\r\n        }\r\n        return false;\r\n    }\r\n    /** @internal */\r\n    _onDragEnter(event) {\r\n        this._preventDefault(event);\r\n        this._stopPropagation(event);\r\n        this._dragDepth++;\r\n        return false;\r\n    }\r\n    /** @internal */\r\n    _onDragLeave(event) {\r\n        this._preventDefault(event);\r\n        this._stopPropagation(event);\r\n        this._dragDepth--;\r\n        if (this._dragDepth <= 0) {\r\n            this._onDragCancel();\r\n        }\r\n        return false;\r\n    }\r\n}\r\nDragDrop.instance = new DragDrop();\r\n\n\n//# sourceURL=webpack://FlexLayout/./src/DragDrop.ts?");
 
 /***/ }),
 
@@ -96,7 +96,7 @@ eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpac
   \***************************/
 /***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {
 
-eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpack_require__.d(__webpack_exports__, {\n/* harmony export */   \"showPopup\": () => (/* binding */ showPopup)\n/* harmony export */ });\n/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! react */ \"react\");\n/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(react__WEBPACK_IMPORTED_MODULE_0__);\n/* harmony import */ var _DragDrop__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ./DragDrop */ \"./src/DragDrop.ts\");\n/* harmony import */ var _Types__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ./Types */ \"./src/Types.ts\");\n/* harmony import */ var _view_TabButtonStamp__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! ./view/TabButtonStamp */ \"./src/view/TabButtonStamp.tsx\");\n\r\n\r\n\r\n\r\n/** @internal */\r\nfunction showPopup(triggerElement, items, onSelect, layout, iconFactory, titleFactory) {\r\n    const layoutDiv = layout.getRootDiv();\r\n    const classNameMapper = layout.getClassName;\r\n    const currentDocument = triggerElement.ownerDocument;\r\n    const triggerRect = triggerElement.getBoundingClientRect();\r\n    const layoutRect = layoutDiv.getBoundingClientRect();\r\n    const elm = currentDocument.createElement(\"div\");\r\n    elm.className = classNameMapper(_Types__WEBPACK_IMPORTED_MODULE_2__.CLASSES.FLEXLAYOUT__POPUP_MENU_CONTAINER);\r\n    if (triggerRect.left < layoutRect.left + layoutRect.width / 2) {\r\n        elm.style.left = triggerRect.left - layoutRect.left + \"px\";\r\n    }\r\n    else {\r\n        elm.style.right = layoutRect.right - triggerRect.right + \"px\";\r\n    }\r\n    if (triggerRect.top < layoutRect.top + layoutRect.height / 2) {\r\n        elm.style.top = triggerRect.top - layoutRect.top + \"px\";\r\n    }\r\n    else {\r\n        elm.style.bottom = layoutRect.bottom - triggerRect.bottom + \"px\";\r\n    }\r\n    _DragDrop__WEBPACK_IMPORTED_MODULE_1__.DragDrop.instance.addGlass(() => onHide());\r\n    _DragDrop__WEBPACK_IMPORTED_MODULE_1__.DragDrop.instance.setGlassCursorOverride(\"default\");\r\n    layoutDiv.appendChild(elm);\r\n    const onHide = () => {\r\n        layout.hidePortal();\r\n        _DragDrop__WEBPACK_IMPORTED_MODULE_1__.DragDrop.instance.hideGlass();\r\n        layoutDiv.removeChild(elm);\r\n        elm.removeEventListener(\"mousedown\", onElementMouseDown);\r\n        currentDocument.removeEventListener(\"mousedown\", onDocMouseDown);\r\n    };\r\n    const onElementMouseDown = (event) => {\r\n        event.stopPropagation();\r\n    };\r\n    const onDocMouseDown = (event) => {\r\n        onHide();\r\n    };\r\n    elm.addEventListener(\"mousedown\", onElementMouseDown);\r\n    currentDocument.addEventListener(\"mousedown\", onDocMouseDown);\r\n    layout.showPortal(react__WEBPACK_IMPORTED_MODULE_0__.createElement(PopupMenu, { currentDocument: currentDocument, onSelect: onSelect, onHide: onHide, items: items, classNameMapper: classNameMapper, layout: layout, iconFactory: iconFactory, titleFactory: titleFactory }), elm);\r\n}\r\n/** @internal */\r\nconst PopupMenu = (props) => {\r\n    const { items, onHide, onSelect, classNameMapper, layout, iconFactory, titleFactory } = props;\r\n    const onItemClick = (item, event) => {\r\n        onSelect(item);\r\n        onHide();\r\n        event.stopPropagation();\r\n    };\r\n    const itemElements = items.map((item, i) => (react__WEBPACK_IMPORTED_MODULE_0__.createElement(\"div\", { key: item.index, className: classNameMapper(_Types__WEBPACK_IMPORTED_MODULE_2__.CLASSES.FLEXLAYOUT__POPUP_MENU_ITEM), \"data-layout-path\": \"/popup-menu/tb\" + i, onClick: (event) => onItemClick(item, event), title: item.node.getHelpText() }, item.node.getModel().isLegacyOverflowMenu() ?\r\n        item.node._getNameForOverflowMenu() :\r\n        react__WEBPACK_IMPORTED_MODULE_0__.createElement(_view_TabButtonStamp__WEBPACK_IMPORTED_MODULE_3__.TabButtonStamp, { node: item.node, layout: layout, iconFactory: iconFactory, titleFactory: titleFactory }))));\r\n    return (react__WEBPACK_IMPORTED_MODULE_0__.createElement(\"div\", { className: classNameMapper(_Types__WEBPACK_IMPORTED_MODULE_2__.CLASSES.FLEXLAYOUT__POPUP_MENU), \"data-layout-path\": \"/popup-menu\" }, itemElements));\r\n};\r\n\n\n//# sourceURL=webpack://FlexLayout/./src/PopupMenu.tsx?");
+eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpack_require__.d(__webpack_exports__, {\n/* harmony export */   \"showPopup\": () => (/* binding */ showPopup)\n/* harmony export */ });\n/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! react */ \"react\");\n/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(react__WEBPACK_IMPORTED_MODULE_0__);\n/* harmony import */ var _DragDrop__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ./DragDrop */ \"./src/DragDrop.ts\");\n/* harmony import */ var _Types__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ./Types */ \"./src/Types.ts\");\n/* harmony import */ var _view_TabButtonStamp__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! ./view/TabButtonStamp */ \"./src/view/TabButtonStamp.tsx\");\n\r\n\r\n\r\n\r\n/** @internal */\r\nfunction showPopup(triggerElement, items, onSelect, layout, iconFactory, titleFactory) {\r\n    var _a;\r\n    const layoutDiv = layout.getRootDiv();\r\n    const classNameMapper = layout.getClassName;\r\n    const currentDocument = triggerElement.ownerDocument;\r\n    const triggerRect = triggerElement.getBoundingClientRect();\r\n    const layoutRect = (_a = layoutDiv === null || layoutDiv === void 0 ? void 0 : layoutDiv.getBoundingClientRect()) !== null && _a !== void 0 ? _a : new DOMRect(0, 0, 100, 100);\r\n    const elm = currentDocument.createElement(\"div\");\r\n    elm.className = classNameMapper(_Types__WEBPACK_IMPORTED_MODULE_2__.CLASSES.FLEXLAYOUT__POPUP_MENU_CONTAINER);\r\n    if (triggerRect.left < layoutRect.left + layoutRect.width / 2) {\r\n        elm.style.left = triggerRect.left - layoutRect.left + \"px\";\r\n    }\r\n    else {\r\n        elm.style.right = layoutRect.right - triggerRect.right + \"px\";\r\n    }\r\n    if (triggerRect.top < layoutRect.top + layoutRect.height / 2) {\r\n        elm.style.top = triggerRect.top - layoutRect.top + \"px\";\r\n    }\r\n    else {\r\n        elm.style.bottom = layoutRect.bottom - triggerRect.bottom + \"px\";\r\n    }\r\n    _DragDrop__WEBPACK_IMPORTED_MODULE_1__.DragDrop.instance.addGlass(() => onHide());\r\n    _DragDrop__WEBPACK_IMPORTED_MODULE_1__.DragDrop.instance.setGlassCursorOverride(\"default\");\r\n    if (layoutDiv) {\r\n        layoutDiv.appendChild(elm);\r\n    }\r\n    const onHide = () => {\r\n        layout.hidePortal();\r\n        _DragDrop__WEBPACK_IMPORTED_MODULE_1__.DragDrop.instance.hideGlass();\r\n        if (layoutDiv) {\r\n            layoutDiv.removeChild(elm);\r\n        }\r\n        elm.removeEventListener(\"mousedown\", onElementMouseDown);\r\n        currentDocument.removeEventListener(\"mousedown\", onDocMouseDown);\r\n    };\r\n    const onElementMouseDown = (event) => {\r\n        event.stopPropagation();\r\n    };\r\n    const onDocMouseDown = (_event) => {\r\n        onHide();\r\n    };\r\n    elm.addEventListener(\"mousedown\", onElementMouseDown);\r\n    currentDocument.addEventListener(\"mousedown\", onDocMouseDown);\r\n    layout.showPortal(react__WEBPACK_IMPORTED_MODULE_0__.createElement(PopupMenu, { currentDocument: currentDocument, onSelect: onSelect, onHide: onHide, items: items, classNameMapper: classNameMapper, layout: layout, iconFactory: iconFactory, titleFactory: titleFactory }), elm);\r\n}\r\n/** @internal */\r\nconst PopupMenu = (props) => {\r\n    const { items, onHide, onSelect, classNameMapper, layout, iconFactory, titleFactory } = props;\r\n    const onItemClick = (item, event) => {\r\n        onSelect(item);\r\n        onHide();\r\n        event.stopPropagation();\r\n    };\r\n    const itemElements = items.map((item, i) => (react__WEBPACK_IMPORTED_MODULE_0__.createElement(\"div\", { key: item.index, className: classNameMapper(_Types__WEBPACK_IMPORTED_MODULE_2__.CLASSES.FLEXLAYOUT__POPUP_MENU_ITEM), \"data-layout-path\": \"/popup-menu/tb\" + i, onClick: (event) => onItemClick(item, event), title: item.node.getHelpText() }, item.node.getModel().isLegacyOverflowMenu() ?\r\n        item.node._getNameForOverflowMenu() :\r\n        react__WEBPACK_IMPORTED_MODULE_0__.createElement(_view_TabButtonStamp__WEBPACK_IMPORTED_MODULE_3__.TabButtonStamp, { node: item.node, layout: layout, iconFactory: iconFactory, titleFactory: titleFactory }))));\r\n    return (react__WEBPACK_IMPORTED_MODULE_0__.createElement(\"div\", { className: classNameMapper(_Types__WEBPACK_IMPORTED_MODULE_2__.CLASSES.FLEXLAYOUT__POPUP_MENU), \"data-layout-path\": \"/popup-menu\" }, itemElements));\r\n};\r\n\n\n//# sourceURL=webpack://FlexLayout/./src/PopupMenu.tsx?");
 
 /***/ }),
 
@@ -106,7 +106,7 @@ eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpac
   \*********************/
 /***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {
 
-eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpack_require__.d(__webpack_exports__, {\n/* harmony export */   \"Rect\": () => (/* binding */ Rect)\n/* harmony export */ });\n/* harmony import */ var _Orientation__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! ./Orientation */ \"./src/Orientation.ts\");\n\r\nclass Rect {\r\n    static empty() {\r\n        return new Rect(0, 0, 0, 0);\r\n    }\r\n    constructor(x, y, width, height) {\r\n        this.x = x;\r\n        this.y = y;\r\n        this.width = width;\r\n        this.height = height;\r\n    }\r\n    static fromElement(element) {\r\n        let { x, y, width, height } = element.getBoundingClientRect();\r\n        return new Rect(x, y, width, height);\r\n    }\r\n    clone() {\r\n        return new Rect(this.x, this.y, this.width, this.height);\r\n    }\r\n    equals(rect) {\r\n        if (this.x === rect.x && this.y === rect.y && this.width === rect.width && this.height === rect.height) {\r\n            return true;\r\n        }\r\n        else {\r\n            return false;\r\n        }\r\n    }\r\n    getBottom() {\r\n        return this.y + this.height;\r\n    }\r\n    getRight() {\r\n        return this.x + this.width;\r\n    }\r\n    getCenter() {\r\n        return { x: this.x + this.width / 2, y: this.y + this.height / 2 };\r\n    }\r\n    positionElement(element, position) {\r\n        this.styleWithPosition(element.style, position);\r\n    }\r\n    styleWithPosition(style, position = \"absolute\") {\r\n        style.left = this.x + \"px\";\r\n        style.top = this.y + \"px\";\r\n        style.width = Math.max(0, this.width) + \"px\"; // need Math.max to prevent -ve, cause error in IE\r\n        style.height = Math.max(0, this.height) + \"px\";\r\n        style.position = position;\r\n        return style;\r\n    }\r\n    contains(x, y) {\r\n        if (this.x <= x && x <= this.getRight() && this.y <= y && y <= this.getBottom()) {\r\n            return true;\r\n        }\r\n        else {\r\n            return false;\r\n        }\r\n    }\r\n    removeInsets(insets) {\r\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));\r\n    }\r\n    centerInRect(outerRect) {\r\n        this.x = (outerRect.width - this.width) / 2;\r\n        this.y = (outerRect.height - this.height) / 2;\r\n    }\r\n    /** @internal */\r\n    _getSize(orientation) {\r\n        let prefSize = this.width;\r\n        if (orientation === _Orientation__WEBPACK_IMPORTED_MODULE_0__.Orientation.VERT) {\r\n            prefSize = this.height;\r\n        }\r\n        return prefSize;\r\n    }\r\n    toString() {\r\n        return \"(Rect: x=\" + this.x + \", y=\" + this.y + \", width=\" + this.width + \", height=\" + this.height + \")\";\r\n    }\r\n}\r\n\n\n//# sourceURL=webpack://FlexLayout/./src/Rect.ts?");
+eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpack_require__.d(__webpack_exports__, {\n/* harmony export */   \"Rect\": () => (/* binding */ Rect)\n/* harmony export */ });\n/* harmony import */ var _Orientation__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! ./Orientation */ \"./src/Orientation.ts\");\n\r\nclass Rect {\r\n    static empty() {\r\n        return new Rect(0, 0, 0, 0);\r\n    }\r\n    constructor(x, y, width, height) {\r\n        this.x = x;\r\n        this.y = y;\r\n        this.width = width;\r\n        this.height = height;\r\n    }\r\n    static fromElement(element) {\r\n        let { x, y, width, height } = element.getBoundingClientRect();\r\n        return new Rect(x, y, width, height);\r\n    }\r\n    clone() {\r\n        return new Rect(this.x, this.y, this.width, this.height);\r\n    }\r\n    equals(rect) {\r\n        return this.x === (rect === null || rect === void 0 ? void 0 : rect.x) && this.y === (rect === null || rect === void 0 ? void 0 : rect.y) && this.width === (rect === null || rect === void 0 ? void 0 : rect.width) && this.height === (rect === null || rect === void 0 ? void 0 : rect.height);\r\n    }\r\n    getBottom() {\r\n        return this.y + this.height;\r\n    }\r\n    getRight() {\r\n        return this.x + this.width;\r\n    }\r\n    getCenter() {\r\n        return { x: this.x + this.width / 2, y: this.y + this.height / 2 };\r\n    }\r\n    positionElement(element, position) {\r\n        this.styleWithPosition(element.style, position);\r\n    }\r\n    styleWithPosition(style, position = \"absolute\") {\r\n        style.left = this.x + \"px\";\r\n        style.top = this.y + \"px\";\r\n        style.width = Math.max(0, this.width) + \"px\"; // need Math.max to prevent -ve, cause error in IE\r\n        style.height = Math.max(0, this.height) + \"px\";\r\n        style.position = position;\r\n        return style;\r\n    }\r\n    contains(x, y) {\r\n        if (this.x <= x && x <= this.getRight() && this.y <= y && y <= this.getBottom()) {\r\n            return true;\r\n        }\r\n        else {\r\n            return false;\r\n        }\r\n    }\r\n    removeInsets(insets) {\r\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));\r\n    }\r\n    centerInRect(outerRect) {\r\n        this.x = (outerRect.width - this.width) / 2;\r\n        this.y = (outerRect.height - this.height) / 2;\r\n    }\r\n    /** @internal */\r\n    _getSize(orientation) {\r\n        let prefSize = this.width;\r\n        if (orientation === _Orientation__WEBPACK_IMPORTED_MODULE_0__.Orientation.VERT) {\r\n            prefSize = this.height;\r\n        }\r\n        return prefSize;\r\n    }\r\n    toString() {\r\n        return \"(Rect: x=\" + this.x + \", y=\" + this.y + \", width=\" + this.width + \", height=\" + this.height + \")\";\r\n    }\r\n}\r\n\n\n//# sourceURL=webpack://FlexLayout/./src/Rect.ts?");
 
 /***/ }),
 
@@ -116,7 +116,7 @@ eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpac
   \**********************/
 /***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {
 
-eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpack_require__.d(__webpack_exports__, {\n/* harmony export */   \"CLASSES\": () => (/* binding */ CLASSES)\n/* harmony export */ });\nvar CLASSES;\r\n(function (CLASSES) {\r\n    CLASSES[\"FLEXLAYOUT__BORDER\"] = \"flexlayout__border\";\r\n    CLASSES[\"FLEXLAYOUT__BORDER_\"] = \"flexlayout__border_\";\r\n    CLASSES[\"FLEXLAYOUT__BORDER_BUTTON\"] = \"flexlayout__border_button\";\r\n    CLASSES[\"FLEXLAYOUT__BORDER_BUTTON_\"] = \"flexlayout__border_button_\";\r\n    CLASSES[\"FLEXLAYOUT__BORDER_BUTTON_CONTENT\"] = \"flexlayout__border_button_content\";\r\n    CLASSES[\"FLEXLAYOUT__BORDER_BUTTON_LEADING\"] = \"flexlayout__border_button_leading\";\r\n    CLASSES[\"FLEXLAYOUT__BORDER_BUTTON_TRAILING\"] = \"flexlayout__border_button_trailing\";\r\n    CLASSES[\"FLEXLAYOUT__BORDER_BUTTON__SELECTED\"] = \"flexlayout__border_button--selected\";\r\n    CLASSES[\"FLEXLAYOUT__BORDER_BUTTON__UNSELECTED\"] = \"flexlayout__border_button--unselected\";\r\n    CLASSES[\"FLEXLAYOUT__BORDER_TOOLBAR_BUTTON_OVERFLOW\"] = \"flexlayout__border_toolbar_button_overflow\";\r\n    CLASSES[\"FLEXLAYOUT__BORDER_TOOLBAR_BUTTON_OVERFLOW_\"] = \"flexlayout__border_toolbar_button_overflow_\";\r\n    CLASSES[\"FLEXLAYOUT__BORDER_INNER\"] = \"flexlayout__border_inner\";\r\n    CLASSES[\"FLEXLAYOUT__BORDER_INNER_\"] = \"flexlayout__border_inner_\";\r\n    CLASSES[\"FLEXLAYOUT__BORDER_INNER_TAB_CONTAINER\"] = \"flexlayout__border_inner_tab_container\";\r\n    CLASSES[\"FLEXLAYOUT__BORDER_INNER_TAB_CONTAINER_\"] = \"flexlayout__border_inner_tab_container_\";\r\n    CLASSES[\"FLEXLAYOUT__BORDER_TAB_DIVIDER\"] = \"flexlayout__border_tab_divider\";\r\n    CLASSES[\"FLEXLAYOUT__BORDER_SIZER\"] = \"flexlayout__border_sizer\";\r\n    CLASSES[\"FLEXLAYOUT__BORDER_TOOLBAR\"] = \"flexlayout__border_toolbar\";\r\n    CLASSES[\"FLEXLAYOUT__BORDER_TOOLBAR_\"] = \"flexlayout__border_toolbar_\";\r\n    CLASSES[\"FLEXLAYOUT__BORDER_TOOLBAR_BUTTON\"] = \"flexlayout__border_toolbar_button\";\r\n    CLASSES[\"FLEXLAYOUT__BORDER_TOOLBAR_BUTTON_FLOAT\"] = \"flexlayout__border_toolbar_button-float\";\r\n    CLASSES[\"FLEXLAYOUT__DRAG_RECT\"] = \"flexlayout__drag_rect\";\r\n    CLASSES[\"FLEXLAYOUT__EDGE_RECT\"] = \"flexlayout__edge_rect\";\r\n    CLASSES[\"FLEXLAYOUT__EDGE_RECT_TOP\"] = \"flexlayout__edge_rect_top\";\r\n    CLASSES[\"FLEXLAYOUT__EDGE_RECT_LEFT\"] = \"flexlayout__edge_rect_left\";\r\n    CLASSES[\"FLEXLAYOUT__EDGE_RECT_BOTTOM\"] = \"flexlayout__edge_rect_bottom\";\r\n    CLASSES[\"FLEXLAYOUT__EDGE_RECT_RIGHT\"] = \"flexlayout__edge_rect_right\";\r\n    CLASSES[\"FLEXLAYOUT__ERROR_BOUNDARY_CONTAINER\"] = \"flexlayout__error_boundary_container\";\r\n    CLASSES[\"FLEXLAYOUT__ERROR_BOUNDARY_CONTENT\"] = \"flexlayout__error_boundary_content\";\r\n    CLASSES[\"FLEXLAYOUT__FLOATING_WINDOW_CONTENT\"] = \"flexlayout__floating_window_content\";\r\n    CLASSES[\"FLEXLAYOUT__FLOATING_WINDOW_TAB\"] = \"flexlayout__floating_window_tab\";\r\n    CLASSES[\"FLEXLAYOUT__LAYOUT\"] = \"flexlayout__layout\";\r\n    CLASSES[\"FLEXLAYOUT__OUTLINE_RECT\"] = \"flexlayout__outline_rect\";\r\n    CLASSES[\"FLEXLAYOUT__OUTLINE_RECT_EDGE\"] = \"flexlayout__outline_rect_edge\";\r\n    CLASSES[\"FLEXLAYOUT__SPLITTER\"] = \"flexlayout__splitter\";\r\n    CLASSES[\"FLEXLAYOUT__SPLITTER_EXTRA\"] = \"flexlayout__splitter_extra\";\r\n    CLASSES[\"FLEXLAYOUT__SPLITTER_\"] = \"flexlayout__splitter_\";\r\n    CLASSES[\"FLEXLAYOUT__SPLITTER_BORDER\"] = \"flexlayout__splitter_border\";\r\n    CLASSES[\"FLEXLAYOUT__SPLITTER_DRAG\"] = \"flexlayout__splitter_drag\";\r\n    CLASSES[\"FLEXLAYOUT__TAB\"] = \"flexlayout__tab\";\r\n    CLASSES[\"FLEXLAYOUT__TABSET\"] = \"flexlayout__tabset\";\r\n    CLASSES[\"FLEXLAYOUT__TABSET_HEADER\"] = \"flexlayout__tabset_header\";\r\n    CLASSES[\"FLEXLAYOUT__TABSET_HEADER_SIZER\"] = \"flexlayout__tabset_header_sizer\";\r\n    CLASSES[\"FLEXLAYOUT__TABSET_HEADER_CONTENT\"] = \"flexlayout__tabset_header_content\";\r\n    CLASSES[\"FLEXLAYOUT__TABSET_MAXIMIZED\"] = \"flexlayout__tabset-maximized\";\r\n    CLASSES[\"FLEXLAYOUT__TABSET_SELECTED\"] = \"flexlayout__tabset-selected\";\r\n    CLASSES[\"FLEXLAYOUT__TABSET_SIZER\"] = \"flexlayout__tabset_sizer\";\r\n    CLASSES[\"FLEXLAYOUT__TABSET_TAB_DIVIDER\"] = \"flexlayout__tabset_tab_divider\";\r\n    CLASSES[\"FLEXLAYOUT__TABSET_CONTENT\"] = \"flexlayout__tabset_content\";\r\n    CLASSES[\"FLEXLAYOUT__TABSET_TABBAR_INNER\"] = \"flexlayout__tabset_tabbar_inner\";\r\n    CLASSES[\"FLEXLAYOUT__TABSET_TABBAR_INNER_\"] = \"flexlayout__tabset_tabbar_inner_\";\r\n    CLASSES[\"FLEXLAYOUT__TABSET_TABBAR_INNER_TAB_CONTAINER\"] = \"flexlayout__tabset_tabbar_inner_tab_container\";\r\n    CLASSES[\"FLEXLAYOUT__TABSET_TABBAR_INNER_TAB_CONTAINER_\"] = \"flexlayout__tabset_tabbar_inner_tab_container_\";\r\n    CLASSES[\"FLEXLAYOUT__TABSET_TABBAR_OUTER\"] = \"flexlayout__tabset_tabbar_outer\";\r\n    CLASSES[\"FLEXLAYOUT__TABSET_TABBAR_OUTER_\"] = \"flexlayout__tabset_tabbar_outer_\";\r\n    CLASSES[\"FLEXLAYOUT__TAB_BORDER\"] = \"flexlayout__tab_border\";\r\n    CLASSES[\"FLEXLAYOUT__TAB_BORDER_\"] = \"flexlayout__tab_border_\";\r\n    CLASSES[\"FLEXLAYOUT__TAB_BUTTON\"] = \"flexlayout__tab_button\";\r\n    CLASSES[\"FLEXLAYOUT__TAB_BUTTON_CONTENT\"] = \"flexlayout__tab_button_content\";\r\n    CLASSES[\"FLEXLAYOUT__TAB_BUTTON_LEADING\"] = \"flexlayout__tab_button_leading\";\r\n    CLASSES[\"FLEXLAYOUT__TAB_BUTTON_OVERFLOW\"] = \"flexlayout__tab_button_overflow\";\r\n    CLASSES[\"FLEXLAYOUT__TAB_BUTTON_OVERFLOW_COUNT\"] = \"flexlayout__tab_button_overflow_count\";\r\n    CLASSES[\"FLEXLAYOUT__TAB_BUTTON_TEXTBOX\"] = \"flexlayout__tab_button_textbox\";\r\n    CLASSES[\"FLEXLAYOUT__TAB_BUTTON_TRAILING\"] = \"flexlayout__tab_button_trailing\";\r\n    CLASSES[\"FLEXLAYOUT__TAB_BUTTON_STAMP\"] = \"flexlayout__tab_button_stamp\";\r\n    CLASSES[\"FLEXLAYOUT__TAB_FLOATING\"] = \"flexlayout__tab_floating\";\r\n    CLASSES[\"FLEXLAYOUT__TAB_FLOATING_INNER\"] = \"flexlayout__tab_floating_inner\";\r\n    CLASSES[\"FLEXLAYOUT__TAB_TOOLBAR\"] = \"flexlayout__tab_toolbar\";\r\n    CLASSES[\"FLEXLAYOUT__TAB_TOOLBAR_BUTTON\"] = \"flexlayout__tab_toolbar_button\";\r\n    CLASSES[\"FLEXLAYOUT__TAB_TOOLBAR_BUTTON_\"] = \"flexlayout__tab_toolbar_button-\";\r\n    CLASSES[\"FLEXLAYOUT__TAB_TOOLBAR_BUTTON_FLOAT\"] = \"flexlayout__tab_toolbar_button-float\";\r\n    CLASSES[\"FLEXLAYOUT__TAB_TOOLBAR_STICKY_BUTTONS_CONTAINER\"] = \"flexlayout__tab_toolbar_sticky_buttons_container\";\r\n    CLASSES[\"FLEXLAYOUT__TAB_TOOLBAR_BUTTON_CLOSE\"] = \"flexlayout__tab_toolbar_button-close\";\r\n    CLASSES[\"FLEXLAYOUT__POPUP_MENU_CONTAINER\"] = \"flexlayout__popup_menu_container\";\r\n    CLASSES[\"FLEXLAYOUT__POPUP_MENU_ITEM\"] = \"flexlayout__popup_menu_item\";\r\n    CLASSES[\"FLEXLAYOUT__POPUP_MENU\"] = \"flexlayout__popup_menu\";\r\n})(CLASSES || (CLASSES = {}));\r\n\n\n//# sourceURL=webpack://FlexLayout/./src/Types.ts?");
+eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpack_require__.d(__webpack_exports__, {\n/* harmony export */   \"CLASSES\": () => (/* binding */ CLASSES)\n/* harmony export */ });\nvar CLASSES;\r\n(function (CLASSES) {\r\n    CLASSES[\"FLEXLAYOUT__BORDER\"] = \"flexlayout__border\";\r\n    CLASSES[\"FLEXLAYOUT__BORDER_\"] = \"flexlayout__border_\";\r\n    CLASSES[\"FLEXLAYOUT__BORDER_BUTTON\"] = \"flexlayout__border_button\";\r\n    CLASSES[\"FLEXLAYOUT__BORDER_BUTTON_\"] = \"flexlayout__border_button_\";\r\n    CLASSES[\"FLEXLAYOUT__BORDER_BUTTON_CONTENT\"] = \"flexlayout__border_button_content\";\r\n    CLASSES[\"FLEXLAYOUT__BORDER_BUTTON_LEADING\"] = \"flexlayout__border_button_leading\";\r\n    CLASSES[\"FLEXLAYOUT__BORDER_BUTTON_TRAILING\"] = \"flexlayout__border_button_trailing\";\r\n    CLASSES[\"FLEXLAYOUT__BORDER_BUTTON__SELECTED\"] = \"flexlayout__border_button--selected\";\r\n    CLASSES[\"FLEXLAYOUT__BORDER_BUTTON__UNSELECTED\"] = \"flexlayout__border_button--unselected\";\r\n    CLASSES[\"FLEXLAYOUT__BORDER_TOOLBAR_BUTTON_OVERFLOW\"] = \"flexlayout__border_toolbar_button_overflow\";\r\n    CLASSES[\"FLEXLAYOUT__BORDER_TOOLBAR_BUTTON_OVERFLOW_\"] = \"flexlayout__border_toolbar_button_overflow_\";\r\n    CLASSES[\"FLEXLAYOUT__BORDER_INNER\"] = \"flexlayout__border_inner\";\r\n    CLASSES[\"FLEXLAYOUT__BORDER_INNER_\"] = \"flexlayout__border_inner_\";\r\n    CLASSES[\"FLEXLAYOUT__BORDER_INNER_TAB_CONTAINER\"] = \"flexlayout__border_inner_tab_container\";\r\n    CLASSES[\"FLEXLAYOUT__BORDER_INNER_TAB_CONTAINER_\"] = \"flexlayout__border_inner_tab_container_\";\r\n    CLASSES[\"FLEXLAYOUT__BORDER_TAB_DIVIDER\"] = \"flexlayout__border_tab_divider\";\r\n    CLASSES[\"FLEXLAYOUT__BORDER_SIZER\"] = \"flexlayout__border_sizer\";\r\n    CLASSES[\"FLEXLAYOUT__BORDER_TOOLBAR\"] = \"flexlayout__border_toolbar\";\r\n    CLASSES[\"FLEXLAYOUT__BORDER_TOOLBAR_\"] = \"flexlayout__border_toolbar_\";\r\n    CLASSES[\"FLEXLAYOUT__BORDER_TOOLBAR_BUTTON\"] = \"flexlayout__border_toolbar_button\";\r\n    CLASSES[\"FLEXLAYOUT__BORDER_TOOLBAR_BUTTON_FLOAT\"] = \"flexlayout__border_toolbar_button-float\";\r\n    CLASSES[\"FLEXLAYOUT__DRAG_RECT\"] = \"flexlayout__drag_rect\";\r\n    CLASSES[\"FLEXLAYOUT__EDGE_RECT\"] = \"flexlayout__edge_rect\";\r\n    CLASSES[\"FLEXLAYOUT__EDGE_RECT_TOP\"] = \"flexlayout__edge_rect_top\";\r\n    CLASSES[\"FLEXLAYOUT__EDGE_RECT_LEFT\"] = \"flexlayout__edge_rect_left\";\r\n    CLASSES[\"FLEXLAYOUT__EDGE_RECT_BOTTOM\"] = \"flexlayout__edge_rect_bottom\";\r\n    CLASSES[\"FLEXLAYOUT__EDGE_RECT_RIGHT\"] = \"flexlayout__edge_rect_right\";\r\n    CLASSES[\"FLEXLAYOUT__ERROR_BOUNDARY_CONTAINER\"] = \"flexlayout__error_boundary_container\";\r\n    CLASSES[\"FLEXLAYOUT__ERROR_BOUNDARY_CONTENT\"] = \"flexlayout__error_boundary_content\";\r\n    CLASSES[\"FLEXLAYOUT__FLOATING_WINDOW_CONTENT\"] = \"flexlayout__floating_window_content\";\r\n    CLASSES[\"FLEXLAYOUT__FLOATING_WINDOW_TAB\"] = \"flexlayout__floating_window_tab\";\r\n    CLASSES[\"FLEXLAYOUT__LAYOUT\"] = \"flexlayout__layout\";\r\n    CLASSES[\"FLEXLAYOUT__OUTLINE_RECT\"] = \"flexlayout__outline_rect\";\r\n    CLASSES[\"FLEXLAYOUT__OUTLINE_RECT_EDGE\"] = \"flexlayout__outline_rect_edge\";\r\n    CLASSES[\"FLEXLAYOUT__SPLITTER\"] = \"flexlayout__splitter\";\r\n    CLASSES[\"FLEXLAYOUT__SPLITTER_EXTRA\"] = \"flexlayout__splitter_extra\";\r\n    CLASSES[\"FLEXLAYOUT__SPLITTER_\"] = \"flexlayout__splitter_\";\r\n    CLASSES[\"FLEXLAYOUT__SPLITTER_BORDER\"] = \"flexlayout__splitter_border\";\r\n    CLASSES[\"FLEXLAYOUT__SPLITTER_DRAG\"] = \"flexlayout__splitter_drag\";\r\n    CLASSES[\"FLEXLAYOUT__TAB\"] = \"flexlayout__tab\";\r\n    CLASSES[\"FLEXLAYOUT__TABSET\"] = \"flexlayout__tabset\";\r\n    CLASSES[\"FLEXLAYOUT__TABSET_HEADER\"] = \"flexlayout__tabset_header\";\r\n    CLASSES[\"FLEXLAYOUT__TABSET_HEADER_SIZER\"] = \"flexlayout__tabset_header_sizer\";\r\n    CLASSES[\"FLEXLAYOUT__TABSET_HEADER_CONTENT\"] = \"flexlayout__tabset_header_content\";\r\n    CLASSES[\"FLEXLAYOUT__TABSET_MAXIMIZED\"] = \"flexlayout__tabset-maximized\";\r\n    CLASSES[\"FLEXLAYOUT__TABSET_SELECTED\"] = \"flexlayout__tabset-selected\";\r\n    CLASSES[\"FLEXLAYOUT__TABSET_SIZER\"] = \"flexlayout__tabset_sizer\";\r\n    CLASSES[\"FLEXLAYOUT__TABSET_TAB_DIVIDER\"] = \"flexlayout__tabset_tab_divider\";\r\n    CLASSES[\"FLEXLAYOUT__TABSET_CONTENT\"] = \"flexlayout__tabset_content\";\r\n    CLASSES[\"FLEXLAYOUT__TABSET_TABBAR_INNER\"] = \"flexlayout__tabset_tabbar_inner\";\r\n    CLASSES[\"FLEXLAYOUT__TABSET_TABBAR_INNER_\"] = \"flexlayout__tabset_tabbar_inner_\";\r\n    CLASSES[\"FLEXLAYOUT__TABSET_TABBAR_INNER_TAB_CONTAINER\"] = \"flexlayout__tabset_tabbar_inner_tab_container\";\r\n    CLASSES[\"FLEXLAYOUT__TABSET_TABBAR_INNER_TAB_CONTAINER_\"] = \"flexlayout__tabset_tabbar_inner_tab_container_\";\r\n    CLASSES[\"FLEXLAYOUT__TABSET_TABBAR_OUTER\"] = \"flexlayout__tabset_tabbar_outer\";\r\n    CLASSES[\"FLEXLAYOUT__TABSET_TABBAR_OUTER_\"] = \"flexlayout__tabset_tabbar_outer_\";\r\n    CLASSES[\"FLEXLAYOUT__TAB_BORDER\"] = \"flexlayout__tab_border\";\r\n    CLASSES[\"FLEXLAYOUT__TAB_BORDER_\"] = \"flexlayout__tab_border_\";\r\n    CLASSES[\"FLEXLAYOUT__TAB_BUTTON\"] = \"flexlayout__tab_button\";\r\n    CLASSES[\"FLEXLAYOUT__TAB_BUTTON_STRETCH\"] = \"flexlayout__tab_button_stretch\";\r\n    CLASSES[\"FLEXLAYOUT__TAB_BUTTON_CONTENT\"] = \"flexlayout__tab_button_content\";\r\n    CLASSES[\"FLEXLAYOUT__TAB_BUTTON_LEADING\"] = \"flexlayout__tab_button_leading\";\r\n    CLASSES[\"FLEXLAYOUT__TAB_BUTTON_OVERFLOW\"] = \"flexlayout__tab_button_overflow\";\r\n    CLASSES[\"FLEXLAYOUT__TAB_BUTTON_OVERFLOW_COUNT\"] = \"flexlayout__tab_button_overflow_count\";\r\n    CLASSES[\"FLEXLAYOUT__TAB_BUTTON_TEXTBOX\"] = \"flexlayout__tab_button_textbox\";\r\n    CLASSES[\"FLEXLAYOUT__TAB_BUTTON_TRAILING\"] = \"flexlayout__tab_button_trailing\";\r\n    CLASSES[\"FLEXLAYOUT__TAB_BUTTON_STAMP\"] = \"flexlayout__tab_button_stamp\";\r\n    CLASSES[\"FLEXLAYOUT__TAB_FLOATING\"] = \"flexlayout__tab_floating\";\r\n    CLASSES[\"FLEXLAYOUT__TAB_FLOATING_INNER\"] = \"flexlayout__tab_floating_inner\";\r\n    CLASSES[\"FLEXLAYOUT__TAB_TOOLBAR\"] = \"flexlayout__tab_toolbar\";\r\n    CLASSES[\"FLEXLAYOUT__TAB_TOOLBAR_BUTTON\"] = \"flexlayout__tab_toolbar_button\";\r\n    CLASSES[\"FLEXLAYOUT__TAB_TOOLBAR_BUTTON_\"] = \"flexlayout__tab_toolbar_button-\";\r\n    CLASSES[\"FLEXLAYOUT__TAB_TOOLBAR_BUTTON_FLOAT\"] = \"flexlayout__tab_toolbar_button-float\";\r\n    CLASSES[\"FLEXLAYOUT__TAB_TOOLBAR_STICKY_BUTTONS_CONTAINER\"] = \"flexlayout__tab_toolbar_sticky_buttons_container\";\r\n    CLASSES[\"FLEXLAYOUT__TAB_TOOLBAR_BUTTON_CLOSE\"] = \"flexlayout__tab_toolbar_button-close\";\r\n    CLASSES[\"FLEXLAYOUT__POPUP_MENU_CONTAINER\"] = \"flexlayout__popup_menu_container\";\r\n    CLASSES[\"FLEXLAYOUT__POPUP_MENU_ITEM\"] = \"flexlayout__popup_menu_item\";\r\n    CLASSES[\"FLEXLAYOUT__POPUP_MENU\"] = \"flexlayout__popup_menu\";\r\n})(CLASSES || (CLASSES = {}));\r\n\n\n//# sourceURL=webpack://FlexLayout/./src/Types.ts?");
 
 /***/ }),
 
@@ -216,7 +216,7 @@ eval("__webpack_require__.r(__webpack_exports__);\n\r\n\n\n//# sourceURL=webpack
   \****************************/
 /***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {
 
-eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpack_require__.d(__webpack_exports__, {\n/* harmony export */   \"Model\": () => (/* binding */ Model)\n/* harmony export */ });\n/* harmony import */ var _Attribute__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! ../Attribute */ \"./src/Attribute.ts\");\n/* harmony import */ var _AttributeDefinitions__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ../AttributeDefinitions */ \"./src/AttributeDefinitions.ts\");\n/* harmony import */ var _DockLocation__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ../DockLocation */ \"./src/DockLocation.ts\");\n/* harmony import */ var _Orientation__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! ../Orientation */ \"./src/Orientation.ts\");\n/* harmony import */ var _Rect__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(/*! ../Rect */ \"./src/Rect.ts\");\n/* harmony import */ var _Actions__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__(/*! ./Actions */ \"./src/model/Actions.ts\");\n/* harmony import */ var _BorderNode__WEBPACK_IMPORTED_MODULE_6__ = __webpack_require__(/*! ./BorderNode */ \"./src/model/BorderNode.ts\");\n/* harmony import */ var _BorderSet__WEBPACK_IMPORTED_MODULE_7__ = __webpack_require__(/*! ./BorderSet */ \"./src/model/BorderSet.ts\");\n/* harmony import */ var _RowNode__WEBPACK_IMPORTED_MODULE_8__ = __webpack_require__(/*! ./RowNode */ \"./src/model/RowNode.ts\");\n/* harmony import */ var _TabNode__WEBPACK_IMPORTED_MODULE_9__ = __webpack_require__(/*! ./TabNode */ \"./src/model/TabNode.ts\");\n/* harmony import */ var _TabSetNode__WEBPACK_IMPORTED_MODULE_10__ = __webpack_require__(/*! ./TabSetNode */ \"./src/model/TabSetNode.ts\");\n/* harmony import */ var _Utils__WEBPACK_IMPORTED_MODULE_11__ = __webpack_require__(/*! ./Utils */ \"./src/model/Utils.ts\");\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n/**\r\n * Class containing the Tree of Nodes used by the FlexLayout component\r\n */\r\nclass Model {\r\n    /**\r\n     * Loads the model from the given json object\r\n     * @param json the json model to load\r\n     * @returns {Model} a new Model object\r\n     */\r\n    static fromJson(json) {\r\n        const model = new Model();\r\n        Model._attributeDefinitions.fromJson(json.global, model._attributes);\r\n        if (json.borders) {\r\n            model._borders = _BorderSet__WEBPACK_IMPORTED_MODULE_7__.BorderSet._fromJson(json.borders, model);\r\n        }\r\n        model._root = _RowNode__WEBPACK_IMPORTED_MODULE_8__.RowNode._fromJson(json.layout, model);\r\n        model._tidy(); // initial tidy of node tree\r\n        return model;\r\n    }\r\n    /** @internal */\r\n    static _createAttributeDefinitions() {\r\n        const attributeDefinitions = new _AttributeDefinitions__WEBPACK_IMPORTED_MODULE_1__.AttributeDefinitions();\r\n        attributeDefinitions.add(\"legacyOverflowMenu\", false).setType(_Attribute__WEBPACK_IMPORTED_MODULE_0__.Attribute.BOOLEAN);\r\n        attributeDefinitions.add(\"enableEdgeDock\", true).setType(_Attribute__WEBPACK_IMPORTED_MODULE_0__.Attribute.BOOLEAN);\r\n        attributeDefinitions.add(\"rootOrientationVertical\", false).setType(_Attribute__WEBPACK_IMPORTED_MODULE_0__.Attribute.BOOLEAN);\r\n        attributeDefinitions.add(\"marginInsets\", { top: 0, right: 0, bottom: 0, left: 0 })\r\n            .setType(\"IInsets\");\r\n        attributeDefinitions.add(\"enableUseVisibility\", false).setType(_Attribute__WEBPACK_IMPORTED_MODULE_0__.Attribute.BOOLEAN);\r\n        attributeDefinitions.add(\"enableRotateBorderIcons\", true).setType(_Attribute__WEBPACK_IMPORTED_MODULE_0__.Attribute.BOOLEAN);\r\n        // splitter\r\n        attributeDefinitions.add(\"splitterSize\", -1).setType(_Attribute__WEBPACK_IMPORTED_MODULE_0__.Attribute.NUMBER);\r\n        attributeDefinitions.add(\"splitterExtra\", 0).setType(_Attribute__WEBPACK_IMPORTED_MODULE_0__.Attribute.NUMBER);\r\n        // tab\r\n        attributeDefinitions.add(\"tabEnableClose\", true).setType(_Attribute__WEBPACK_IMPORTED_MODULE_0__.Attribute.BOOLEAN);\r\n        attributeDefinitions.add(\"tabCloseType\", 1).setType(\"ICloseType\");\r\n        attributeDefinitions.add(\"tabEnableFloat\", false).setType(_Attribute__WEBPACK_IMPORTED_MODULE_0__.Attribute.BOOLEAN);\r\n        attributeDefinitions.add(\"tabEnableDrag\", true).setType(_Attribute__WEBPACK_IMPORTED_MODULE_0__.Attribute.BOOLEAN);\r\n        attributeDefinitions.add(\"tabEnableRename\", true).setType(_Attribute__WEBPACK_IMPORTED_MODULE_0__.Attribute.BOOLEAN);\r\n        attributeDefinitions.add(\"tabContentClassName\", undefined).setType(_Attribute__WEBPACK_IMPORTED_MODULE_0__.Attribute.STRING);\r\n        attributeDefinitions.add(\"tabClassName\", undefined).setType(_Attribute__WEBPACK_IMPORTED_MODULE_0__.Attribute.STRING);\r\n        attributeDefinitions.add(\"tabIcon\", undefined).setType(_Attribute__WEBPACK_IMPORTED_MODULE_0__.Attribute.STRING);\r\n        attributeDefinitions.add(\"tabEnableRenderOnDemand\", true).setType(_Attribute__WEBPACK_IMPORTED_MODULE_0__.Attribute.BOOLEAN);\r\n        attributeDefinitions.add(\"tabDragSpeed\", 0.3).setType(_Attribute__WEBPACK_IMPORTED_MODULE_0__.Attribute.NUMBER);\r\n        attributeDefinitions.add(\"tabBorderWidth\", -1).setType(_Attribute__WEBPACK_IMPORTED_MODULE_0__.Attribute.NUMBER);\r\n        attributeDefinitions.add(\"tabBorderHeight\", -1).setType(_Attribute__WEBPACK_IMPORTED_MODULE_0__.Attribute.NUMBER);\r\n        // tabset\r\n        attributeDefinitions.add(\"tabSetEnableDeleteWhenEmpty\", true).setType(_Attribute__WEBPACK_IMPORTED_MODULE_0__.Attribute.BOOLEAN);\r\n        attributeDefinitions.add(\"tabSetEnableDrop\", true).setType(_Attribute__WEBPACK_IMPORTED_MODULE_0__.Attribute.BOOLEAN);\r\n        attributeDefinitions.add(\"tabSetEnableDrag\", true).setType(_Attribute__WEBPACK_IMPORTED_MODULE_0__.Attribute.BOOLEAN);\r\n        attributeDefinitions.add(\"tabSetEnableDivide\", true).setType(_Attribute__WEBPACK_IMPORTED_MODULE_0__.Attribute.BOOLEAN);\r\n        attributeDefinitions.add(\"tabSetEnableMaximize\", true).setType(_Attribute__WEBPACK_IMPORTED_MODULE_0__.Attribute.BOOLEAN);\r\n        attributeDefinitions.add(\"tabSetEnableClose\", false).setType(_Attribute__WEBPACK_IMPORTED_MODULE_0__.Attribute.BOOLEAN);\r\n        attributeDefinitions.add(\"tabSetAutoSelectTab\", true).setType(_Attribute__WEBPACK_IMPORTED_MODULE_0__.Attribute.BOOLEAN);\r\n        attributeDefinitions.add(\"tabSetClassNameTabStrip\", undefined).setType(_Attribute__WEBPACK_IMPORTED_MODULE_0__.Attribute.STRING);\r\n        attributeDefinitions.add(\"tabSetClassNameHeader\", undefined).setType(_Attribute__WEBPACK_IMPORTED_MODULE_0__.Attribute.STRING);\r\n        attributeDefinitions.add(\"tabSetEnableTabStrip\", true).setType(_Attribute__WEBPACK_IMPORTED_MODULE_0__.Attribute.BOOLEAN);\r\n        attributeDefinitions.add(\"tabSetHeaderHeight\", 0).setType(_Attribute__WEBPACK_IMPORTED_MODULE_0__.Attribute.NUMBER);\r\n        attributeDefinitions.add(\"tabSetTabStripHeight\", 0).setType(_Attribute__WEBPACK_IMPORTED_MODULE_0__.Attribute.NUMBER);\r\n        attributeDefinitions.add(\"tabSetMarginInsets\", { top: 0, right: 0, bottom: 0, left: 0 })\r\n            .setType(\"IInsets\");\r\n        attributeDefinitions.add(\"tabSetBorderInsets\", { top: 0, right: 0, bottom: 0, left: 0 })\r\n            .setType(\"IInsets\");\r\n        attributeDefinitions.add(\"tabSetTabLocation\", \"top\").setType(\"ITabLocation\");\r\n        attributeDefinitions.add(\"tabSetMinWidth\", 0).setType(_Attribute__WEBPACK_IMPORTED_MODULE_0__.Attribute.NUMBER);\r\n        attributeDefinitions.add(\"tabSetMinHeight\", 0).setType(_Attribute__WEBPACK_IMPORTED_MODULE_0__.Attribute.NUMBER);\r\n        // border\r\n        attributeDefinitions.add(\"borderSize\", 200).setType(_Attribute__WEBPACK_IMPORTED_MODULE_0__.Attribute.NUMBER);\r\n        attributeDefinitions.add(\"borderMinSize\", 0).setType(_Attribute__WEBPACK_IMPORTED_MODULE_0__.Attribute.NUMBER);\r\n        attributeDefinitions.add(\"borderBarSize\", 0).setType(_Attribute__WEBPACK_IMPORTED_MODULE_0__.Attribute.NUMBER);\r\n        attributeDefinitions.add(\"borderEnableDrop\", true).setType(_Attribute__WEBPACK_IMPORTED_MODULE_0__.Attribute.BOOLEAN);\r\n        attributeDefinitions.add(\"borderAutoSelectTabWhenOpen\", true).setType(_Attribute__WEBPACK_IMPORTED_MODULE_0__.Attribute.BOOLEAN);\r\n        attributeDefinitions.add(\"borderAutoSelectTabWhenClosed\", false).setType(_Attribute__WEBPACK_IMPORTED_MODULE_0__.Attribute.BOOLEAN);\r\n        attributeDefinitions.add(\"borderClassName\", undefined).setType(_Attribute__WEBPACK_IMPORTED_MODULE_0__.Attribute.STRING);\r\n        attributeDefinitions.add(\"borderEnableAutoHide\", false).setType(_Attribute__WEBPACK_IMPORTED_MODULE_0__.Attribute.BOOLEAN);\r\n        return attributeDefinitions;\r\n    }\r\n    /**\r\n     * 'private' constructor. Use the static method Model.fromJson(json) to create a model\r\n     *  @internal\r\n     */\r\n    constructor() {\r\n        /** @internal */\r\n        this._borderRects = { inner: _Rect__WEBPACK_IMPORTED_MODULE_4__.Rect.empty(), outer: _Rect__WEBPACK_IMPORTED_MODULE_4__.Rect.empty() };\r\n        this._attributes = {};\r\n        this._idMap = {};\r\n        this._borders = new _BorderSet__WEBPACK_IMPORTED_MODULE_7__.BorderSet(this);\r\n        this._pointerFine = true;\r\n        this._showHiddenBorder = _DockLocation__WEBPACK_IMPORTED_MODULE_2__.DockLocation.CENTER;\r\n    }\r\n    /** @internal */\r\n    _setChangeListener(listener) {\r\n        this._changeListener = listener;\r\n    }\r\n    /**\r\n     * Get the currently active tabset node\r\n     */\r\n    getActiveTabset() {\r\n        if (this._activeTabSet && this.getNodeById(this._activeTabSet.getId())) {\r\n            return this._activeTabSet;\r\n        }\r\n        else {\r\n            return undefined;\r\n        }\r\n    }\r\n    /** @internal */\r\n    _getShowHiddenBorder() {\r\n        return this._showHiddenBorder;\r\n    }\r\n    /** @internal */\r\n    _setShowHiddenBorder(location) {\r\n        this._showHiddenBorder = location;\r\n    }\r\n    /** @internal */\r\n    _setActiveTabset(tabsetNode) {\r\n        this._activeTabSet = tabsetNode;\r\n    }\r\n    /**\r\n     * Get the currently maximized tabset node\r\n     */\r\n    getMaximizedTabset() {\r\n        return this._maximizedTabSet;\r\n    }\r\n    /** @internal */\r\n    _setMaximizedTabset(tabsetNode) {\r\n        this._maximizedTabSet = tabsetNode;\r\n    }\r\n    /**\r\n     * Gets the root RowNode of the model\r\n     * @returns {RowNode}\r\n     */\r\n    getRoot() {\r\n        return this._root;\r\n    }\r\n    isRootOrientationVertical() {\r\n        return this._attributes.rootOrientationVertical;\r\n    }\r\n    isUseVisibility() {\r\n        return this._attributes.enableUseVisibility;\r\n    }\r\n    isEnableRotateBorderIcons() {\r\n        return this._attributes.enableRotateBorderIcons;\r\n    }\r\n    /**\r\n     * Gets the\r\n     * @returns {BorderSet|*}\r\n     */\r\n    getBorderSet() {\r\n        return this._borders;\r\n    }\r\n    /** @internal */\r\n    _getOuterInnerRects() {\r\n        return this._borderRects;\r\n    }\r\n    /** @internal */\r\n    _getPointerFine() {\r\n        return this._pointerFine;\r\n    }\r\n    /** @internal */\r\n    _setPointerFine(pointerFine) {\r\n        this._pointerFine = pointerFine;\r\n    }\r\n    /**\r\n     * Visits all the nodes in the model and calls the given function for each\r\n     * @param fn a function that takes visited node and a integer level as parameters\r\n     */\r\n    visitNodes(fn) {\r\n        this._borders._forEachNode(fn);\r\n        this._root._forEachNode(fn, 0);\r\n    }\r\n    /**\r\n     * Gets a node by its id\r\n     * @param id the id to find\r\n     */\r\n    getNodeById(id) {\r\n        return this._idMap[id];\r\n    }\r\n    /**\r\n     * Finds the first/top left tab set of the given node.\r\n     * @param node The top node you want to begin searching from, deafults to the root node\r\n     * @returns The first Tab Set\r\n     */\r\n    getFirstTabSet(node = this._root) {\r\n        const child = node.getChildren()[0];\r\n        if (child instanceof _TabSetNode__WEBPACK_IMPORTED_MODULE_10__.TabSetNode) {\r\n            return child;\r\n        }\r\n        else {\r\n            return this.getFirstTabSet(child);\r\n        }\r\n    }\r\n    /**\r\n     * Update the node tree by performing the given action,\r\n     * Actions should be generated via static methods on the Actions class\r\n     * @param action the action to perform\r\n     * @returns added Node for Actions.addNode; undefined otherwise\r\n     */\r\n    doAction(action) {\r\n        let returnVal = undefined;\r\n        // console.log(action);\r\n        switch (action.type) {\r\n            case _Actions__WEBPACK_IMPORTED_MODULE_5__.Actions.ADD_NODE: {\r\n                const newNode = new _TabNode__WEBPACK_IMPORTED_MODULE_9__.TabNode(this, action.data.json, true);\r\n                const toNode = this._idMap[action.data.toNode];\r\n                if (toNode instanceof _TabSetNode__WEBPACK_IMPORTED_MODULE_10__.TabSetNode || toNode instanceof _BorderNode__WEBPACK_IMPORTED_MODULE_6__.BorderNode || toNode instanceof _RowNode__WEBPACK_IMPORTED_MODULE_8__.RowNode) {\r\n                    toNode.drop(newNode, _DockLocation__WEBPACK_IMPORTED_MODULE_2__.DockLocation.getByName(action.data.location), action.data.index, action.data.select);\r\n                    returnVal = newNode;\r\n                }\r\n                break;\r\n            }\r\n            case _Actions__WEBPACK_IMPORTED_MODULE_5__.Actions.MOVE_NODE: {\r\n                const fromNode = this._idMap[action.data.fromNode];\r\n                if (fromNode instanceof _TabNode__WEBPACK_IMPORTED_MODULE_9__.TabNode || fromNode instanceof _TabSetNode__WEBPACK_IMPORTED_MODULE_10__.TabSetNode) {\r\n                    const toNode = this._idMap[action.data.toNode];\r\n                    if (toNode instanceof _TabSetNode__WEBPACK_IMPORTED_MODULE_10__.TabSetNode || toNode instanceof _BorderNode__WEBPACK_IMPORTED_MODULE_6__.BorderNode || toNode instanceof _RowNode__WEBPACK_IMPORTED_MODULE_8__.RowNode) {\r\n                        toNode.drop(fromNode, _DockLocation__WEBPACK_IMPORTED_MODULE_2__.DockLocation.getByName(action.data.location), action.data.index, action.data.select);\r\n                    }\r\n                }\r\n                break;\r\n            }\r\n            case _Actions__WEBPACK_IMPORTED_MODULE_5__.Actions.DELETE_TAB: {\r\n                const node = this._idMap[action.data.node];\r\n                if (node instanceof _TabNode__WEBPACK_IMPORTED_MODULE_9__.TabNode) {\r\n                    node._delete();\r\n                }\r\n                break;\r\n            }\r\n            case _Actions__WEBPACK_IMPORTED_MODULE_5__.Actions.DELETE_TABSET: {\r\n                const node = this._idMap[action.data.node];\r\n                if (node instanceof _TabSetNode__WEBPACK_IMPORTED_MODULE_10__.TabSetNode) {\r\n                    // first delete all child tabs that are closeable\r\n                    const children = [...node.getChildren()];\r\n                    for (let i = 0; i < children.length; i++) {\r\n                        const child = children[i];\r\n                        if (child.isEnableClose()) {\r\n                            child._delete();\r\n                        }\r\n                    }\r\n                    if (node.getChildren().length === 0) {\r\n                        node._delete();\r\n                    }\r\n                    this._tidy();\r\n                }\r\n                break;\r\n            }\r\n            case _Actions__WEBPACK_IMPORTED_MODULE_5__.Actions.FLOAT_TAB: {\r\n                const node = this._idMap[action.data.node];\r\n                if (node instanceof _TabNode__WEBPACK_IMPORTED_MODULE_9__.TabNode) {\r\n                    node._setFloating(true);\r\n                    (0,_Utils__WEBPACK_IMPORTED_MODULE_11__.adjustSelectedIndexAfterFloat)(node);\r\n                }\r\n                break;\r\n            }\r\n            case _Actions__WEBPACK_IMPORTED_MODULE_5__.Actions.UNFLOAT_TAB: {\r\n                const node = this._idMap[action.data.node];\r\n                if (node instanceof _TabNode__WEBPACK_IMPORTED_MODULE_9__.TabNode) {\r\n                    node._setFloating(false);\r\n                    (0,_Utils__WEBPACK_IMPORTED_MODULE_11__.adjustSelectedIndexAfterDock)(node);\r\n                }\r\n                break;\r\n            }\r\n            case _Actions__WEBPACK_IMPORTED_MODULE_5__.Actions.RENAME_TAB: {\r\n                const node = this._idMap[action.data.node];\r\n                if (node instanceof _TabNode__WEBPACK_IMPORTED_MODULE_9__.TabNode) {\r\n                    node._setName(action.data.text);\r\n                }\r\n                break;\r\n            }\r\n            case _Actions__WEBPACK_IMPORTED_MODULE_5__.Actions.SELECT_TAB: {\r\n                const tabNode = this._idMap[action.data.tabNode];\r\n                if (tabNode instanceof _TabNode__WEBPACK_IMPORTED_MODULE_9__.TabNode) {\r\n                    const parent = tabNode.getParent();\r\n                    const pos = parent.getChildren().indexOf(tabNode);\r\n                    if (parent instanceof _BorderNode__WEBPACK_IMPORTED_MODULE_6__.BorderNode) {\r\n                        if (parent.getSelected() === pos) {\r\n                            parent._setSelected(-1);\r\n                        }\r\n                        else {\r\n                            parent._setSelected(pos);\r\n                        }\r\n                    }\r\n                    else if (parent instanceof _TabSetNode__WEBPACK_IMPORTED_MODULE_10__.TabSetNode) {\r\n                        if (parent.getSelected() !== pos) {\r\n                            parent._setSelected(pos);\r\n                        }\r\n                        this._activeTabSet = parent;\r\n                    }\r\n                }\r\n                break;\r\n            }\r\n            case _Actions__WEBPACK_IMPORTED_MODULE_5__.Actions.SET_ACTIVE_TABSET: {\r\n                if (action.data.tabsetNode === undefined) {\r\n                    this._activeTabSet = undefined;\r\n                }\r\n                else {\r\n                    const tabsetNode = this._idMap[action.data.tabsetNode];\r\n                    if (tabsetNode instanceof _TabSetNode__WEBPACK_IMPORTED_MODULE_10__.TabSetNode) {\r\n                        this._activeTabSet = tabsetNode;\r\n                    }\r\n                }\r\n                break;\r\n            }\r\n            case _Actions__WEBPACK_IMPORTED_MODULE_5__.Actions.ADJUST_SPLIT: {\r\n                const node1 = this._idMap[action.data.node1];\r\n                const node2 = this._idMap[action.data.node2];\r\n                if ((node1 instanceof _TabSetNode__WEBPACK_IMPORTED_MODULE_10__.TabSetNode || node1 instanceof _RowNode__WEBPACK_IMPORTED_MODULE_8__.RowNode) && (node2 instanceof _TabSetNode__WEBPACK_IMPORTED_MODULE_10__.TabSetNode || node2 instanceof _RowNode__WEBPACK_IMPORTED_MODULE_8__.RowNode)) {\r\n                    this._adjustSplitSide(node1, action.data.weight1, action.data.pixelWidth1);\r\n                    this._adjustSplitSide(node2, action.data.weight2, action.data.pixelWidth2);\r\n                }\r\n                break;\r\n            }\r\n            case _Actions__WEBPACK_IMPORTED_MODULE_5__.Actions.ADJUST_BORDER_SPLIT: {\r\n                const node = this._idMap[action.data.node];\r\n                if (node instanceof _BorderNode__WEBPACK_IMPORTED_MODULE_6__.BorderNode) {\r\n                    node._setSize(action.data.pos);\r\n                }\r\n                break;\r\n            }\r\n            case _Actions__WEBPACK_IMPORTED_MODULE_5__.Actions.MAXIMIZE_TOGGLE: {\r\n                const node = this._idMap[action.data.node];\r\n                if (node instanceof _TabSetNode__WEBPACK_IMPORTED_MODULE_10__.TabSetNode) {\r\n                    if (node === this._maximizedTabSet) {\r\n                        this._maximizedTabSet = undefined;\r\n                    }\r\n                    else {\r\n                        this._maximizedTabSet = node;\r\n                        this._activeTabSet = node;\r\n                    }\r\n                }\r\n                break;\r\n            }\r\n            case _Actions__WEBPACK_IMPORTED_MODULE_5__.Actions.UPDATE_MODEL_ATTRIBUTES: {\r\n                this._updateAttrs(action.data.json);\r\n                break;\r\n            }\r\n            case _Actions__WEBPACK_IMPORTED_MODULE_5__.Actions.UPDATE_NODE_ATTRIBUTES: {\r\n                const node = this._idMap[action.data.node];\r\n                node._updateAttrs(action.data.json);\r\n                break;\r\n            }\r\n            default:\r\n                break;\r\n        }\r\n        this._updateIdMap();\r\n        if (this._changeListener !== undefined) {\r\n            this._changeListener(action);\r\n        }\r\n        return returnVal;\r\n    }\r\n    /** @internal */\r\n    _updateIdMap() {\r\n        // regenerate idMap to stop it building up\r\n        this._idMap = {};\r\n        this.visitNodes((node) => (this._idMap[node.getId()] = node));\r\n        // console.log(JSON.stringify(Object.keys(this._idMap)));\r\n    }\r\n    /** @internal */\r\n    _adjustSplitSide(node, weight, pixels) {\r\n        node._setWeight(weight);\r\n        if (node.getWidth() != null && node.getOrientation() === _Orientation__WEBPACK_IMPORTED_MODULE_3__.Orientation.VERT) {\r\n            node._updateAttrs({ width: pixels });\r\n        }\r\n        else if (node.getHeight() != null && node.getOrientation() === _Orientation__WEBPACK_IMPORTED_MODULE_3__.Orientation.HORZ) {\r\n            node._updateAttrs({ height: pixels });\r\n        }\r\n    }\r\n    /**\r\n     * Converts the model to a json object\r\n     * @returns {IJsonModel} json object that represents this model\r\n     */\r\n    toJson() {\r\n        const global = {};\r\n        Model._attributeDefinitions.toJson(global, this._attributes);\r\n        // save state of nodes\r\n        this.visitNodes((node) => {\r\n            node._fireEvent(\"save\", undefined);\r\n        });\r\n        return { global, borders: this._borders._toJson(), layout: this._root.toJson() };\r\n    }\r\n    getSplitterSize() {\r\n        let splitterSize = this._attributes.splitterSize;\r\n        if (splitterSize === -1) {\r\n            // use defaults\r\n            splitterSize = this._pointerFine ? 8 : 12; // larger for mobile\r\n        }\r\n        return splitterSize;\r\n    }\r\n    isLegacyOverflowMenu() {\r\n        return this._attributes.legacyOverflowMenu;\r\n    }\r\n    getSplitterExtra() {\r\n        return this._attributes.splitterExtra;\r\n    }\r\n    isEnableEdgeDock() {\r\n        return this._attributes.enableEdgeDock;\r\n    }\r\n    /** @internal */\r\n    _addNode(node) {\r\n        const id = node.getId();\r\n        if (this._idMap[id] !== undefined) {\r\n            throw new Error(`Error: each node must have a unique id, duplicate id:${node.getId()}`);\r\n        }\r\n        if (node.getType() !== \"splitter\") {\r\n            this._idMap[id] = node;\r\n        }\r\n    }\r\n    /** @internal */\r\n    _layout(rect, metrics) {\r\n        var _a;\r\n        // let start = Date.now();\r\n        this._borderRects = this._borders._layoutBorder({ outer: rect, inner: rect }, metrics);\r\n        rect = this._borderRects.inner.removeInsets(this._getAttribute(\"marginInsets\"));\r\n        (_a = this._root) === null || _a === void 0 ? void 0 : _a.calcMinSize();\r\n        this._root._layout(rect, metrics);\r\n        // console.log(\"layout time: \" + (Date.now() - start));\r\n        return rect;\r\n    }\r\n    /** @internal */\r\n    _findDropTargetNode(dragNode, x, y) {\r\n        let node = this._root._findDropTargetNode(dragNode, x, y);\r\n        if (node === undefined) {\r\n            node = this._borders._findDropTargetNode(dragNode, x, y);\r\n        }\r\n        return node;\r\n    }\r\n    /** @internal */\r\n    _tidy() {\r\n        // console.log(\"before _tidy\", this.toString());\r\n        this._root._tidy();\r\n        // console.log(\"after _tidy\", this.toString());\r\n    }\r\n    /** @internal */\r\n    _updateAttrs(json) {\r\n        Model._attributeDefinitions.update(json, this._attributes);\r\n    }\r\n    /** @internal */\r\n    _nextUniqueId() {\r\n        return '#' + (0,_Utils__WEBPACK_IMPORTED_MODULE_11__.randomUUID)();\r\n    }\r\n    /** @internal */\r\n    _getAttribute(name) {\r\n        return this._attributes[name];\r\n    }\r\n    /**\r\n     * Sets a function to allow/deny dropping a node\r\n     * @param onAllowDrop function that takes the drag node and DropInfo and returns true if the drop is allowed\r\n     */\r\n    setOnAllowDrop(onAllowDrop) {\r\n        this._onAllowDrop = onAllowDrop;\r\n    }\r\n    /** @internal */\r\n    _getOnAllowDrop() {\r\n        return this._onAllowDrop;\r\n    }\r\n    /**\r\n     * set callback called when a new TabSet is created.\r\n     * The tabNode can be undefined if it's the auto created first tabset in the root row (when the last\r\n     * tab is deleted, the root tabset can be recreated)\r\n     * @param onCreateTabSet\r\n     */\r\n    setOnCreateTabSet(onCreateTabSet) {\r\n        this._onCreateTabSet = onCreateTabSet;\r\n    }\r\n    /** @internal */\r\n    _getOnCreateTabSet() {\r\n        return this._onCreateTabSet;\r\n    }\r\n    static toTypescriptInterfaces() {\r\n        console.log(Model._attributeDefinitions.toTypescriptInterface(\"Global\", undefined));\r\n        console.log(_RowNode__WEBPACK_IMPORTED_MODULE_8__.RowNode.getAttributeDefinitions().toTypescriptInterface(\"Row\", Model._attributeDefinitions));\r\n        console.log(_TabSetNode__WEBPACK_IMPORTED_MODULE_10__.TabSetNode.getAttributeDefinitions().toTypescriptInterface(\"TabSet\", Model._attributeDefinitions));\r\n        console.log(_TabNode__WEBPACK_IMPORTED_MODULE_9__.TabNode.getAttributeDefinitions().toTypescriptInterface(\"Tab\", Model._attributeDefinitions));\r\n        console.log(_BorderNode__WEBPACK_IMPORTED_MODULE_6__.BorderNode.getAttributeDefinitions().toTypescriptInterface(\"Border\", Model._attributeDefinitions));\r\n    }\r\n    toString() {\r\n        return JSON.stringify(this.toJson());\r\n    }\r\n}\r\n/** @internal */\r\nModel._attributeDefinitions = Model._createAttributeDefinitions();\r\n\n\n//# sourceURL=webpack://FlexLayout/./src/model/Model.ts?");
+eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpack_require__.d(__webpack_exports__, {\n/* harmony export */   \"Model\": () => (/* binding */ Model)\n/* harmony export */ });\n/* harmony import */ var _Attribute__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! ../Attribute */ \"./src/Attribute.ts\");\n/* harmony import */ var _AttributeDefinitions__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ../AttributeDefinitions */ \"./src/AttributeDefinitions.ts\");\n/* harmony import */ var _DockLocation__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ../DockLocation */ \"./src/DockLocation.ts\");\n/* harmony import */ var _Orientation__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! ../Orientation */ \"./src/Orientation.ts\");\n/* harmony import */ var _Rect__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(/*! ../Rect */ \"./src/Rect.ts\");\n/* harmony import */ var _Actions__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__(/*! ./Actions */ \"./src/model/Actions.ts\");\n/* harmony import */ var _BorderNode__WEBPACK_IMPORTED_MODULE_6__ = __webpack_require__(/*! ./BorderNode */ \"./src/model/BorderNode.ts\");\n/* harmony import */ var _BorderSet__WEBPACK_IMPORTED_MODULE_7__ = __webpack_require__(/*! ./BorderSet */ \"./src/model/BorderSet.ts\");\n/* harmony import */ var _RowNode__WEBPACK_IMPORTED_MODULE_8__ = __webpack_require__(/*! ./RowNode */ \"./src/model/RowNode.ts\");\n/* harmony import */ var _TabNode__WEBPACK_IMPORTED_MODULE_9__ = __webpack_require__(/*! ./TabNode */ \"./src/model/TabNode.ts\");\n/* harmony import */ var _TabSetNode__WEBPACK_IMPORTED_MODULE_10__ = __webpack_require__(/*! ./TabSetNode */ \"./src/model/TabSetNode.ts\");\n/* harmony import */ var _Utils__WEBPACK_IMPORTED_MODULE_11__ = __webpack_require__(/*! ./Utils */ \"./src/model/Utils.ts\");\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n/**\r\n * Class containing the Tree of Nodes used by the FlexLayout component\r\n */\r\nclass Model {\r\n    /**\r\n     * Loads the model from the given json object\r\n     * @param json the json model to load\r\n     * @returns {Model} a new Model object\r\n     */\r\n    static fromJson(json) {\r\n        const model = new Model();\r\n        Model._attributeDefinitions.fromJson(json.global, model._attributes);\r\n        if (json.borders) {\r\n            model._borders = _BorderSet__WEBPACK_IMPORTED_MODULE_7__.BorderSet._fromJson(json.borders, model);\r\n        }\r\n        model._root = _RowNode__WEBPACK_IMPORTED_MODULE_8__.RowNode._fromJson(json.layout, model);\r\n        model._tidy(); // initial tidy of node tree\r\n        return model;\r\n    }\r\n    /** @internal */\r\n    static _createAttributeDefinitions() {\r\n        const attributeDefinitions = new _AttributeDefinitions__WEBPACK_IMPORTED_MODULE_1__.AttributeDefinitions();\r\n        attributeDefinitions.add(\"legacyOverflowMenu\", false).setType(_Attribute__WEBPACK_IMPORTED_MODULE_0__.Attribute.BOOLEAN);\r\n        attributeDefinitions.add(\"enableEdgeDock\", true).setType(_Attribute__WEBPACK_IMPORTED_MODULE_0__.Attribute.BOOLEAN);\r\n        attributeDefinitions.add(\"rootOrientationVertical\", false).setType(_Attribute__WEBPACK_IMPORTED_MODULE_0__.Attribute.BOOLEAN);\r\n        attributeDefinitions.add(\"marginInsets\", { top: 0, right: 0, bottom: 0, left: 0 })\r\n            .setType(\"IInsets\");\r\n        attributeDefinitions.add(\"enableUseVisibility\", false).setType(_Attribute__WEBPACK_IMPORTED_MODULE_0__.Attribute.BOOLEAN);\r\n        attributeDefinitions.add(\"enableRotateBorderIcons\", true).setType(_Attribute__WEBPACK_IMPORTED_MODULE_0__.Attribute.BOOLEAN);\r\n        // splitter\r\n        attributeDefinitions.add(\"splitterSize\", -1).setType(_Attribute__WEBPACK_IMPORTED_MODULE_0__.Attribute.NUMBER);\r\n        attributeDefinitions.add(\"splitterExtra\", 0).setType(_Attribute__WEBPACK_IMPORTED_MODULE_0__.Attribute.NUMBER);\r\n        // tab\r\n        attributeDefinitions.add(\"tabEnableClose\", true).setType(_Attribute__WEBPACK_IMPORTED_MODULE_0__.Attribute.BOOLEAN);\r\n        attributeDefinitions.add(\"tabCloseType\", 1).setType(\"ICloseType\");\r\n        attributeDefinitions.add(\"tabEnableFloat\", false).setType(_Attribute__WEBPACK_IMPORTED_MODULE_0__.Attribute.BOOLEAN);\r\n        attributeDefinitions.add(\"tabEnableDrag\", true).setType(_Attribute__WEBPACK_IMPORTED_MODULE_0__.Attribute.BOOLEAN);\r\n        attributeDefinitions.add(\"tabEnableRename\", true).setType(_Attribute__WEBPACK_IMPORTED_MODULE_0__.Attribute.BOOLEAN);\r\n        attributeDefinitions.add(\"tabContentClassName\", undefined).setType(_Attribute__WEBPACK_IMPORTED_MODULE_0__.Attribute.STRING);\r\n        attributeDefinitions.add(\"tabClassName\", undefined).setType(_Attribute__WEBPACK_IMPORTED_MODULE_0__.Attribute.STRING);\r\n        attributeDefinitions.add(\"tabIcon\", undefined).setType(_Attribute__WEBPACK_IMPORTED_MODULE_0__.Attribute.STRING);\r\n        attributeDefinitions.add(\"tabEnableRenderOnDemand\", true).setType(_Attribute__WEBPACK_IMPORTED_MODULE_0__.Attribute.BOOLEAN);\r\n        attributeDefinitions.add(\"tabDragSpeed\", 0.3).setType(_Attribute__WEBPACK_IMPORTED_MODULE_0__.Attribute.NUMBER);\r\n        attributeDefinitions.add(\"tabBorderWidth\", -1).setType(_Attribute__WEBPACK_IMPORTED_MODULE_0__.Attribute.NUMBER);\r\n        attributeDefinitions.add(\"tabBorderHeight\", -1).setType(_Attribute__WEBPACK_IMPORTED_MODULE_0__.Attribute.NUMBER);\r\n        // tabset\r\n        attributeDefinitions.add(\"tabSetEnableDeleteWhenEmpty\", true).setType(_Attribute__WEBPACK_IMPORTED_MODULE_0__.Attribute.BOOLEAN);\r\n        attributeDefinitions.add(\"tabSetEnableDrop\", true).setType(_Attribute__WEBPACK_IMPORTED_MODULE_0__.Attribute.BOOLEAN);\r\n        attributeDefinitions.add(\"tabSetEnableDrag\", true).setType(_Attribute__WEBPACK_IMPORTED_MODULE_0__.Attribute.BOOLEAN);\r\n        attributeDefinitions.add(\"tabSetEnableDivide\", true).setType(_Attribute__WEBPACK_IMPORTED_MODULE_0__.Attribute.BOOLEAN);\r\n        attributeDefinitions.add(\"tabSetEnableMaximize\", true).setType(_Attribute__WEBPACK_IMPORTED_MODULE_0__.Attribute.BOOLEAN);\r\n        attributeDefinitions.add(\"tabSetEnableClose\", false).setType(_Attribute__WEBPACK_IMPORTED_MODULE_0__.Attribute.BOOLEAN);\r\n        attributeDefinitions.add(\"tabSetEnableSingleTabStretch\", false).setType(_Attribute__WEBPACK_IMPORTED_MODULE_0__.Attribute.BOOLEAN);\r\n        attributeDefinitions.add(\"tabSetAutoSelectTab\", true).setType(_Attribute__WEBPACK_IMPORTED_MODULE_0__.Attribute.BOOLEAN);\r\n        attributeDefinitions.add(\"tabSetClassNameTabStrip\", undefined).setType(_Attribute__WEBPACK_IMPORTED_MODULE_0__.Attribute.STRING);\r\n        attributeDefinitions.add(\"tabSetClassNameHeader\", undefined).setType(_Attribute__WEBPACK_IMPORTED_MODULE_0__.Attribute.STRING);\r\n        attributeDefinitions.add(\"tabSetEnableTabStrip\", true).setType(_Attribute__WEBPACK_IMPORTED_MODULE_0__.Attribute.BOOLEAN);\r\n        attributeDefinitions.add(\"tabSetHeaderHeight\", 0).setType(_Attribute__WEBPACK_IMPORTED_MODULE_0__.Attribute.NUMBER);\r\n        attributeDefinitions.add(\"tabSetTabStripHeight\", 0).setType(_Attribute__WEBPACK_IMPORTED_MODULE_0__.Attribute.NUMBER);\r\n        attributeDefinitions.add(\"tabSetMarginInsets\", { top: 0, right: 0, bottom: 0, left: 0 })\r\n            .setType(\"IInsets\");\r\n        attributeDefinitions.add(\"tabSetBorderInsets\", { top: 0, right: 0, bottom: 0, left: 0 })\r\n            .setType(\"IInsets\");\r\n        attributeDefinitions.add(\"tabSetTabLocation\", \"top\").setType(\"ITabLocation\");\r\n        attributeDefinitions.add(\"tabSetMinWidth\", 0).setType(_Attribute__WEBPACK_IMPORTED_MODULE_0__.Attribute.NUMBER);\r\n        attributeDefinitions.add(\"tabSetMinHeight\", 0).setType(_Attribute__WEBPACK_IMPORTED_MODULE_0__.Attribute.NUMBER);\r\n        // border\r\n        attributeDefinitions.add(\"borderSize\", 200).setType(_Attribute__WEBPACK_IMPORTED_MODULE_0__.Attribute.NUMBER);\r\n        attributeDefinitions.add(\"borderMinSize\", 0).setType(_Attribute__WEBPACK_IMPORTED_MODULE_0__.Attribute.NUMBER);\r\n        attributeDefinitions.add(\"borderBarSize\", 0).setType(_Attribute__WEBPACK_IMPORTED_MODULE_0__.Attribute.NUMBER);\r\n        attributeDefinitions.add(\"borderEnableDrop\", true).setType(_Attribute__WEBPACK_IMPORTED_MODULE_0__.Attribute.BOOLEAN);\r\n        attributeDefinitions.add(\"borderAutoSelectTabWhenOpen\", true).setType(_Attribute__WEBPACK_IMPORTED_MODULE_0__.Attribute.BOOLEAN);\r\n        attributeDefinitions.add(\"borderAutoSelectTabWhenClosed\", false).setType(_Attribute__WEBPACK_IMPORTED_MODULE_0__.Attribute.BOOLEAN);\r\n        attributeDefinitions.add(\"borderClassName\", undefined).setType(_Attribute__WEBPACK_IMPORTED_MODULE_0__.Attribute.STRING);\r\n        attributeDefinitions.add(\"borderEnableAutoHide\", false).setType(_Attribute__WEBPACK_IMPORTED_MODULE_0__.Attribute.BOOLEAN);\r\n        return attributeDefinitions;\r\n    }\r\n    /**\r\n     * 'private' constructor. Use the static method Model.fromJson(json) to create a model\r\n     *  @internal\r\n     */\r\n    constructor() {\r\n        /** @internal */\r\n        this._borderRects = { inner: _Rect__WEBPACK_IMPORTED_MODULE_4__.Rect.empty(), outer: _Rect__WEBPACK_IMPORTED_MODULE_4__.Rect.empty() };\r\n        this._attributes = {};\r\n        this._idMap = {};\r\n        this._borders = new _BorderSet__WEBPACK_IMPORTED_MODULE_7__.BorderSet(this);\r\n        this._pointerFine = true;\r\n        this._showHiddenBorder = _DockLocation__WEBPACK_IMPORTED_MODULE_2__.DockLocation.CENTER;\r\n    }\r\n    /** @internal */\r\n    _setChangeListener(listener) {\r\n        this._changeListener = listener;\r\n    }\r\n    /**\r\n     * Get the currently active tabset node\r\n     */\r\n    getActiveTabset() {\r\n        if (this._activeTabSet && this.getNodeById(this._activeTabSet.getId())) {\r\n            return this._activeTabSet;\r\n        }\r\n        else {\r\n            return undefined;\r\n        }\r\n    }\r\n    /** @internal */\r\n    _getShowHiddenBorder() {\r\n        return this._showHiddenBorder;\r\n    }\r\n    /** @internal */\r\n    _setShowHiddenBorder(location) {\r\n        this._showHiddenBorder = location;\r\n    }\r\n    /** @internal */\r\n    _setActiveTabset(tabsetNode) {\r\n        this._activeTabSet = tabsetNode;\r\n    }\r\n    /**\r\n     * Get the currently maximized tabset node\r\n     */\r\n    getMaximizedTabset() {\r\n        return this._maximizedTabSet;\r\n    }\r\n    /** @internal */\r\n    _setMaximizedTabset(tabsetNode) {\r\n        this._maximizedTabSet = tabsetNode;\r\n    }\r\n    /**\r\n     * Gets the root RowNode of the model\r\n     * @returns {RowNode}\r\n     */\r\n    getRoot() {\r\n        return this._root;\r\n    }\r\n    isRootOrientationVertical() {\r\n        return this._attributes.rootOrientationVertical;\r\n    }\r\n    isUseVisibility() {\r\n        return this._attributes.enableUseVisibility;\r\n    }\r\n    isEnableRotateBorderIcons() {\r\n        return this._attributes.enableRotateBorderIcons;\r\n    }\r\n    /**\r\n     * Gets the\r\n     * @returns {BorderSet|*}\r\n     */\r\n    getBorderSet() {\r\n        return this._borders;\r\n    }\r\n    /** @internal */\r\n    _getOuterInnerRects() {\r\n        return this._borderRects;\r\n    }\r\n    /** @internal */\r\n    _getPointerFine() {\r\n        return this._pointerFine;\r\n    }\r\n    /** @internal */\r\n    _setPointerFine(pointerFine) {\r\n        this._pointerFine = pointerFine;\r\n    }\r\n    /**\r\n     * Visits all the nodes in the model and calls the given function for each\r\n     * @param fn a function that takes visited node and a integer level as parameters\r\n     */\r\n    visitNodes(fn) {\r\n        this._borders._forEachNode(fn);\r\n        this._root._forEachNode(fn, 0);\r\n    }\r\n    /**\r\n     * Gets a node by its id\r\n     * @param id the id to find\r\n     */\r\n    getNodeById(id) {\r\n        return this._idMap[id];\r\n    }\r\n    /**\r\n     * Finds the first/top left tab set of the given node.\r\n     * @param node The top node you want to begin searching from, deafults to the root node\r\n     * @returns The first Tab Set\r\n     */\r\n    getFirstTabSet(node = this._root) {\r\n        const child = node.getChildren()[0];\r\n        if (child instanceof _TabSetNode__WEBPACK_IMPORTED_MODULE_10__.TabSetNode) {\r\n            return child;\r\n        }\r\n        else {\r\n            return this.getFirstTabSet(child);\r\n        }\r\n    }\r\n    /**\r\n     * Update the node tree by performing the given action,\r\n     * Actions should be generated via static methods on the Actions class\r\n     * @param action the action to perform\r\n     * @returns added Node for Actions.addNode; undefined otherwise\r\n     */\r\n    doAction(action) {\r\n        let returnVal = undefined;\r\n        // console.log(action);\r\n        switch (action.type) {\r\n            case _Actions__WEBPACK_IMPORTED_MODULE_5__.Actions.ADD_NODE: {\r\n                const newNode = new _TabNode__WEBPACK_IMPORTED_MODULE_9__.TabNode(this, action.data.json, true);\r\n                const toNode = this._idMap[action.data.toNode];\r\n                if (toNode instanceof _TabSetNode__WEBPACK_IMPORTED_MODULE_10__.TabSetNode || toNode instanceof _BorderNode__WEBPACK_IMPORTED_MODULE_6__.BorderNode || toNode instanceof _RowNode__WEBPACK_IMPORTED_MODULE_8__.RowNode) {\r\n                    toNode.drop(newNode, _DockLocation__WEBPACK_IMPORTED_MODULE_2__.DockLocation.getByName(action.data.location), action.data.index, action.data.select);\r\n                    returnVal = newNode;\r\n                }\r\n                break;\r\n            }\r\n            case _Actions__WEBPACK_IMPORTED_MODULE_5__.Actions.MOVE_NODE: {\r\n                const fromNode = this._idMap[action.data.fromNode];\r\n                if (fromNode instanceof _TabNode__WEBPACK_IMPORTED_MODULE_9__.TabNode || fromNode instanceof _TabSetNode__WEBPACK_IMPORTED_MODULE_10__.TabSetNode) {\r\n                    const toNode = this._idMap[action.data.toNode];\r\n                    if (toNode instanceof _TabSetNode__WEBPACK_IMPORTED_MODULE_10__.TabSetNode || toNode instanceof _BorderNode__WEBPACK_IMPORTED_MODULE_6__.BorderNode || toNode instanceof _RowNode__WEBPACK_IMPORTED_MODULE_8__.RowNode) {\r\n                        toNode.drop(fromNode, _DockLocation__WEBPACK_IMPORTED_MODULE_2__.DockLocation.getByName(action.data.location), action.data.index, action.data.select);\r\n                    }\r\n                }\r\n                break;\r\n            }\r\n            case _Actions__WEBPACK_IMPORTED_MODULE_5__.Actions.DELETE_TAB: {\r\n                const node = this._idMap[action.data.node];\r\n                if (node instanceof _TabNode__WEBPACK_IMPORTED_MODULE_9__.TabNode) {\r\n                    node._delete();\r\n                }\r\n                break;\r\n            }\r\n            case _Actions__WEBPACK_IMPORTED_MODULE_5__.Actions.DELETE_TABSET: {\r\n                const node = this._idMap[action.data.node];\r\n                if (node instanceof _TabSetNode__WEBPACK_IMPORTED_MODULE_10__.TabSetNode) {\r\n                    // first delete all child tabs that are closeable\r\n                    const children = [...node.getChildren()];\r\n                    for (let i = 0; i < children.length; i++) {\r\n                        const child = children[i];\r\n                        if (child.isEnableClose()) {\r\n                            child._delete();\r\n                        }\r\n                    }\r\n                    if (node.getChildren().length === 0) {\r\n                        node._delete();\r\n                    }\r\n                    this._tidy();\r\n                }\r\n                break;\r\n            }\r\n            case _Actions__WEBPACK_IMPORTED_MODULE_5__.Actions.FLOAT_TAB: {\r\n                const node = this._idMap[action.data.node];\r\n                if (node instanceof _TabNode__WEBPACK_IMPORTED_MODULE_9__.TabNode) {\r\n                    node._setFloating(true);\r\n                    (0,_Utils__WEBPACK_IMPORTED_MODULE_11__.adjustSelectedIndexAfterFloat)(node);\r\n                }\r\n                break;\r\n            }\r\n            case _Actions__WEBPACK_IMPORTED_MODULE_5__.Actions.UNFLOAT_TAB: {\r\n                const node = this._idMap[action.data.node];\r\n                if (node instanceof _TabNode__WEBPACK_IMPORTED_MODULE_9__.TabNode) {\r\n                    node._setFloating(false);\r\n                    (0,_Utils__WEBPACK_IMPORTED_MODULE_11__.adjustSelectedIndexAfterDock)(node);\r\n                }\r\n                break;\r\n            }\r\n            case _Actions__WEBPACK_IMPORTED_MODULE_5__.Actions.RENAME_TAB: {\r\n                const node = this._idMap[action.data.node];\r\n                if (node instanceof _TabNode__WEBPACK_IMPORTED_MODULE_9__.TabNode) {\r\n                    node._setName(action.data.text);\r\n                }\r\n                break;\r\n            }\r\n            case _Actions__WEBPACK_IMPORTED_MODULE_5__.Actions.SELECT_TAB: {\r\n                const tabNode = this._idMap[action.data.tabNode];\r\n                if (tabNode instanceof _TabNode__WEBPACK_IMPORTED_MODULE_9__.TabNode) {\r\n                    const parent = tabNode.getParent();\r\n                    const pos = parent.getChildren().indexOf(tabNode);\r\n                    if (parent instanceof _BorderNode__WEBPACK_IMPORTED_MODULE_6__.BorderNode) {\r\n                        if (parent.getSelected() === pos) {\r\n                            parent._setSelected(-1);\r\n                        }\r\n                        else {\r\n                            parent._setSelected(pos);\r\n                        }\r\n                    }\r\n                    else if (parent instanceof _TabSetNode__WEBPACK_IMPORTED_MODULE_10__.TabSetNode) {\r\n                        if (parent.getSelected() !== pos) {\r\n                            parent._setSelected(pos);\r\n                        }\r\n                        this._activeTabSet = parent;\r\n                    }\r\n                }\r\n                break;\r\n            }\r\n            case _Actions__WEBPACK_IMPORTED_MODULE_5__.Actions.SET_ACTIVE_TABSET: {\r\n                if (action.data.tabsetNode === undefined) {\r\n                    this._activeTabSet = undefined;\r\n                }\r\n                else {\r\n                    const tabsetNode = this._idMap[action.data.tabsetNode];\r\n                    if (tabsetNode instanceof _TabSetNode__WEBPACK_IMPORTED_MODULE_10__.TabSetNode) {\r\n                        this._activeTabSet = tabsetNode;\r\n                    }\r\n                }\r\n                break;\r\n            }\r\n            case _Actions__WEBPACK_IMPORTED_MODULE_5__.Actions.ADJUST_SPLIT: {\r\n                const node1 = this._idMap[action.data.node1];\r\n                const node2 = this._idMap[action.data.node2];\r\n                if ((node1 instanceof _TabSetNode__WEBPACK_IMPORTED_MODULE_10__.TabSetNode || node1 instanceof _RowNode__WEBPACK_IMPORTED_MODULE_8__.RowNode) && (node2 instanceof _TabSetNode__WEBPACK_IMPORTED_MODULE_10__.TabSetNode || node2 instanceof _RowNode__WEBPACK_IMPORTED_MODULE_8__.RowNode)) {\r\n                    this._adjustSplitSide(node1, action.data.weight1, action.data.pixelWidth1);\r\n                    this._adjustSplitSide(node2, action.data.weight2, action.data.pixelWidth2);\r\n                }\r\n                break;\r\n            }\r\n            case _Actions__WEBPACK_IMPORTED_MODULE_5__.Actions.ADJUST_BORDER_SPLIT: {\r\n                const node = this._idMap[action.data.node];\r\n                if (node instanceof _BorderNode__WEBPACK_IMPORTED_MODULE_6__.BorderNode) {\r\n                    node._setSize(action.data.pos);\r\n                }\r\n                break;\r\n            }\r\n            case _Actions__WEBPACK_IMPORTED_MODULE_5__.Actions.MAXIMIZE_TOGGLE: {\r\n                const node = this._idMap[action.data.node];\r\n                if (node instanceof _TabSetNode__WEBPACK_IMPORTED_MODULE_10__.TabSetNode) {\r\n                    if (node === this._maximizedTabSet) {\r\n                        this._maximizedTabSet = undefined;\r\n                    }\r\n                    else {\r\n                        this._maximizedTabSet = node;\r\n                        this._activeTabSet = node;\r\n                    }\r\n                }\r\n                break;\r\n            }\r\n            case _Actions__WEBPACK_IMPORTED_MODULE_5__.Actions.UPDATE_MODEL_ATTRIBUTES: {\r\n                this._updateAttrs(action.data.json);\r\n                break;\r\n            }\r\n            case _Actions__WEBPACK_IMPORTED_MODULE_5__.Actions.UPDATE_NODE_ATTRIBUTES: {\r\n                const node = this._idMap[action.data.node];\r\n                node._updateAttrs(action.data.json);\r\n                break;\r\n            }\r\n            default:\r\n                break;\r\n        }\r\n        this._updateIdMap();\r\n        if (this._changeListener !== undefined) {\r\n            this._changeListener(action);\r\n        }\r\n        return returnVal;\r\n    }\r\n    /** @internal */\r\n    _updateIdMap() {\r\n        // regenerate idMap to stop it building up\r\n        this._idMap = {};\r\n        this.visitNodes((node) => (this._idMap[node.getId()] = node));\r\n        // console.log(JSON.stringify(Object.keys(this._idMap)));\r\n    }\r\n    /** @internal */\r\n    _adjustSplitSide(node, weight, pixels) {\r\n        node._setWeight(weight);\r\n        if (node.getWidth() != null && node.getOrientation() === _Orientation__WEBPACK_IMPORTED_MODULE_3__.Orientation.VERT) {\r\n            node._updateAttrs({ width: pixels });\r\n        }\r\n        else if (node.getHeight() != null && node.getOrientation() === _Orientation__WEBPACK_IMPORTED_MODULE_3__.Orientation.HORZ) {\r\n            node._updateAttrs({ height: pixels });\r\n        }\r\n    }\r\n    /**\r\n     * Converts the model to a json object\r\n     * @returns {IJsonModel} json object that represents this model\r\n     */\r\n    toJson() {\r\n        const global = {};\r\n        Model._attributeDefinitions.toJson(global, this._attributes);\r\n        // save state of nodes\r\n        this.visitNodes((node) => {\r\n            node._fireEvent(\"save\", undefined);\r\n        });\r\n        return { global, borders: this._borders._toJson(), layout: this._root.toJson() };\r\n    }\r\n    getSplitterSize() {\r\n        let splitterSize = this._attributes.splitterSize;\r\n        if (splitterSize === -1) {\r\n            // use defaults\r\n            splitterSize = this._pointerFine ? 8 : 12; // larger for mobile\r\n        }\r\n        return splitterSize;\r\n    }\r\n    isLegacyOverflowMenu() {\r\n        return this._attributes.legacyOverflowMenu;\r\n    }\r\n    getSplitterExtra() {\r\n        return this._attributes.splitterExtra;\r\n    }\r\n    isEnableEdgeDock() {\r\n        return this._attributes.enableEdgeDock;\r\n    }\r\n    /** @internal */\r\n    _addNode(node) {\r\n        const id = node.getId();\r\n        if (this._idMap[id] !== undefined) {\r\n            throw new Error(`Error: each node must have a unique id, duplicate id:${node.getId()}`);\r\n        }\r\n        if (node.getType() !== \"splitter\") {\r\n            this._idMap[id] = node;\r\n        }\r\n    }\r\n    /** @internal */\r\n    _layout(rect, metrics) {\r\n        var _a;\r\n        // let start = Date.now();\r\n        this._borderRects = this._borders._layoutBorder({ outer: rect, inner: rect }, metrics);\r\n        rect = this._borderRects.inner.removeInsets(this._getAttribute(\"marginInsets\"));\r\n        (_a = this._root) === null || _a === void 0 ? void 0 : _a.calcMinSize();\r\n        this._root._layout(rect, metrics);\r\n        // console.log(\"layout time: \" + (Date.now() - start));\r\n        return rect;\r\n    }\r\n    /** @internal */\r\n    _findDropTargetNode(dragNode, x, y) {\r\n        let node = this._root._findDropTargetNode(dragNode, x, y);\r\n        if (node === undefined) {\r\n            node = this._borders._findDropTargetNode(dragNode, x, y);\r\n        }\r\n        return node;\r\n    }\r\n    /** @internal */\r\n    _tidy() {\r\n        // console.log(\"before _tidy\", this.toString());\r\n        this._root._tidy();\r\n        // console.log(\"after _tidy\", this.toString());\r\n    }\r\n    /** @internal */\r\n    _updateAttrs(json) {\r\n        Model._attributeDefinitions.update(json, this._attributes);\r\n    }\r\n    /** @internal */\r\n    _nextUniqueId() {\r\n        return '#' + (0,_Utils__WEBPACK_IMPORTED_MODULE_11__.randomUUID)();\r\n    }\r\n    /** @internal */\r\n    _getAttribute(name) {\r\n        return this._attributes[name];\r\n    }\r\n    /**\r\n     * Sets a function to allow/deny dropping a node\r\n     * @param onAllowDrop function that takes the drag node and DropInfo and returns true if the drop is allowed\r\n     */\r\n    setOnAllowDrop(onAllowDrop) {\r\n        this._onAllowDrop = onAllowDrop;\r\n    }\r\n    /** @internal */\r\n    _getOnAllowDrop() {\r\n        return this._onAllowDrop;\r\n    }\r\n    /**\r\n     * set callback called when a new TabSet is created.\r\n     * The tabNode can be undefined if it's the auto created first tabset in the root row (when the last\r\n     * tab is deleted, the root tabset can be recreated)\r\n     * @param onCreateTabSet\r\n     */\r\n    setOnCreateTabSet(onCreateTabSet) {\r\n        this._onCreateTabSet = onCreateTabSet;\r\n    }\r\n    /** @internal */\r\n    _getOnCreateTabSet() {\r\n        return this._onCreateTabSet;\r\n    }\r\n    static toTypescriptInterfaces() {\r\n        console.log(Model._attributeDefinitions.toTypescriptInterface(\"Global\", undefined));\r\n        console.log(_RowNode__WEBPACK_IMPORTED_MODULE_8__.RowNode.getAttributeDefinitions().toTypescriptInterface(\"Row\", Model._attributeDefinitions));\r\n        console.log(_TabSetNode__WEBPACK_IMPORTED_MODULE_10__.TabSetNode.getAttributeDefinitions().toTypescriptInterface(\"TabSet\", Model._attributeDefinitions));\r\n        console.log(_TabNode__WEBPACK_IMPORTED_MODULE_9__.TabNode.getAttributeDefinitions().toTypescriptInterface(\"Tab\", Model._attributeDefinitions));\r\n        console.log(_BorderNode__WEBPACK_IMPORTED_MODULE_6__.BorderNode.getAttributeDefinitions().toTypescriptInterface(\"Border\", Model._attributeDefinitions));\r\n    }\r\n    toString() {\r\n        return JSON.stringify(this.toJson());\r\n    }\r\n}\r\n/** @internal */\r\nModel._attributeDefinitions = Model._createAttributeDefinitions();\r\n\n\n//# sourceURL=webpack://FlexLayout/./src/model/Model.ts?");
 
 /***/ }),
 
@@ -266,7 +266,7 @@ eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpac
   \*********************************/
 /***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {
 
-eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpack_require__.d(__webpack_exports__, {\n/* harmony export */   \"TabSetNode\": () => (/* binding */ TabSetNode)\n/* harmony export */ });\n/* harmony import */ var _Attribute__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! ../Attribute */ \"./src/Attribute.ts\");\n/* harmony import */ var _AttributeDefinitions__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ../AttributeDefinitions */ \"./src/AttributeDefinitions.ts\");\n/* harmony import */ var _DockLocation__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ../DockLocation */ \"./src/DockLocation.ts\");\n/* harmony import */ var _DropInfo__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! ../DropInfo */ \"./src/DropInfo.ts\");\n/* harmony import */ var _Orientation__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(/*! ../Orientation */ \"./src/Orientation.ts\");\n/* harmony import */ var _Rect__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__(/*! ../Rect */ \"./src/Rect.ts\");\n/* harmony import */ var _Types__WEBPACK_IMPORTED_MODULE_6__ = __webpack_require__(/*! ../Types */ \"./src/Types.ts\");\n/* harmony import */ var _BorderNode__WEBPACK_IMPORTED_MODULE_7__ = __webpack_require__(/*! ./BorderNode */ \"./src/model/BorderNode.ts\");\n/* harmony import */ var _Node__WEBPACK_IMPORTED_MODULE_8__ = __webpack_require__(/*! ./Node */ \"./src/model/Node.ts\");\n/* harmony import */ var _RowNode__WEBPACK_IMPORTED_MODULE_9__ = __webpack_require__(/*! ./RowNode */ \"./src/model/RowNode.ts\");\n/* harmony import */ var _TabNode__WEBPACK_IMPORTED_MODULE_10__ = __webpack_require__(/*! ./TabNode */ \"./src/model/TabNode.ts\");\n/* harmony import */ var _Utils__WEBPACK_IMPORTED_MODULE_11__ = __webpack_require__(/*! ./Utils */ \"./src/model/Utils.ts\");\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\nclass TabSetNode extends _Node__WEBPACK_IMPORTED_MODULE_8__.Node {\r\n    /** @internal */\r\n    static _fromJson(json, model) {\r\n        const newLayoutNode = new TabSetNode(model, json);\r\n        if (json.children != null) {\r\n            for (const jsonChild of json.children) {\r\n                const child = _TabNode__WEBPACK_IMPORTED_MODULE_10__.TabNode._fromJson(jsonChild, model);\r\n                newLayoutNode._addChild(child);\r\n            }\r\n        }\r\n        if (newLayoutNode._children.length === 0) {\r\n            newLayoutNode._setSelected(-1);\r\n        }\r\n        if (json.maximized && json.maximized === true) {\r\n            model._setMaximizedTabset(newLayoutNode);\r\n        }\r\n        if (json.active && json.active === true) {\r\n            model._setActiveTabset(newLayoutNode);\r\n        }\r\n        return newLayoutNode;\r\n    }\r\n    /** @internal */\r\n    static _createAttributeDefinitions() {\r\n        const attributeDefinitions = new _AttributeDefinitions__WEBPACK_IMPORTED_MODULE_1__.AttributeDefinitions();\r\n        attributeDefinitions.add(\"type\", TabSetNode.TYPE, true).setType(_Attribute__WEBPACK_IMPORTED_MODULE_0__.Attribute.STRING).setFixed();\r\n        attributeDefinitions.add(\"id\", undefined).setType(_Attribute__WEBPACK_IMPORTED_MODULE_0__.Attribute.STRING);\r\n        attributeDefinitions.add(\"weight\", 100).setType(_Attribute__WEBPACK_IMPORTED_MODULE_0__.Attribute.NUMBER);\r\n        attributeDefinitions.add(\"width\", undefined).setType(_Attribute__WEBPACK_IMPORTED_MODULE_0__.Attribute.NUMBER);\r\n        attributeDefinitions.add(\"height\", undefined).setType(_Attribute__WEBPACK_IMPORTED_MODULE_0__.Attribute.NUMBER);\r\n        attributeDefinitions.add(\"selected\", 0).setType(_Attribute__WEBPACK_IMPORTED_MODULE_0__.Attribute.NUMBER);\r\n        attributeDefinitions.add(\"name\", undefined).setType(_Attribute__WEBPACK_IMPORTED_MODULE_0__.Attribute.STRING);\r\n        attributeDefinitions.add(\"config\", undefined).setType(\"any\");\r\n        attributeDefinitions.addInherited(\"enableDeleteWhenEmpty\", \"tabSetEnableDeleteWhenEmpty\");\r\n        attributeDefinitions.addInherited(\"enableDrop\", \"tabSetEnableDrop\");\r\n        attributeDefinitions.addInherited(\"enableDrag\", \"tabSetEnableDrag\");\r\n        attributeDefinitions.addInherited(\"enableDivide\", \"tabSetEnableDivide\");\r\n        attributeDefinitions.addInherited(\"enableMaximize\", \"tabSetEnableMaximize\");\r\n        attributeDefinitions.addInherited(\"enableClose\", \"tabSetEnableClose\");\r\n        attributeDefinitions.addInherited(\"classNameTabStrip\", \"tabSetClassNameTabStrip\");\r\n        attributeDefinitions.addInherited(\"classNameHeader\", \"tabSetClassNameHeader\");\r\n        attributeDefinitions.addInherited(\"enableTabStrip\", \"tabSetEnableTabStrip\");\r\n        attributeDefinitions.addInherited(\"borderInsets\", \"tabSetBorderInsets\");\r\n        attributeDefinitions.addInherited(\"marginInsets\", \"tabSetMarginInsets\");\r\n        attributeDefinitions.addInherited(\"minWidth\", \"tabSetMinWidth\");\r\n        attributeDefinitions.addInherited(\"minHeight\", \"tabSetMinHeight\");\r\n        attributeDefinitions.addInherited(\"headerHeight\", \"tabSetHeaderHeight\");\r\n        attributeDefinitions.addInherited(\"tabStripHeight\", \"tabSetTabStripHeight\");\r\n        attributeDefinitions.addInherited(\"tabLocation\", \"tabSetTabLocation\");\r\n        attributeDefinitions.addInherited(\"autoSelectTab\", \"tabSetAutoSelectTab\").setType(_Attribute__WEBPACK_IMPORTED_MODULE_0__.Attribute.BOOLEAN);\r\n        return attributeDefinitions;\r\n    }\r\n    /** @internal */\r\n    constructor(model, json) {\r\n        super(model);\r\n        TabSetNode._attributeDefinitions.fromJson(json, this._attributes);\r\n        model._addNode(this);\r\n        this._calculatedTabBarHeight = 0;\r\n        this._calculatedHeaderBarHeight = 0;\r\n    }\r\n    getName() {\r\n        return this._getAttr(\"name\");\r\n    }\r\n    getSelected() {\r\n        const selected = this._attributes.selected;\r\n        if (selected !== undefined) {\r\n            return selected;\r\n        }\r\n        return -1;\r\n    }\r\n    getSelectedNode() {\r\n        const selected = this.getSelected();\r\n        if (selected !== -1) {\r\n            return this._children[selected];\r\n        }\r\n        return undefined;\r\n    }\r\n    getWeight() {\r\n        return this._getAttr(\"weight\");\r\n    }\r\n    getWidth() {\r\n        return this._getAttr(\"width\");\r\n    }\r\n    getMinWidth() {\r\n        return this._getAttr(\"minWidth\");\r\n    }\r\n    getHeight() {\r\n        return this._getAttr(\"height\");\r\n    }\r\n    getMinHeight() {\r\n        return this._getAttr(\"minHeight\");\r\n    }\r\n    /** @internal */\r\n    getMinSize(orientation) {\r\n        if (orientation === _Orientation__WEBPACK_IMPORTED_MODULE_4__.Orientation.HORZ) {\r\n            return this.getMinWidth();\r\n        }\r\n        else {\r\n            return this.getMinHeight();\r\n        }\r\n    }\r\n    /**\r\n     * Returns the config attribute that can be used to store node specific data that\r\n     * WILL be saved to the json. The config attribute should be changed via the action Actions.updateNodeAttributes rather\r\n     * than directly, for example:\r\n     * this.state.model.doAction(\r\n     *   FlexLayout.Actions.updateNodeAttributes(node.getId(), {config:myConfigObject}));\r\n     */\r\n    getConfig() {\r\n        return this._attributes.config;\r\n    }\r\n    isMaximized() {\r\n        return this._model.getMaximizedTabset() === this;\r\n    }\r\n    isActive() {\r\n        return this._model.getActiveTabset() === this;\r\n    }\r\n    isEnableDeleteWhenEmpty() {\r\n        return this._getAttr(\"enableDeleteWhenEmpty\");\r\n    }\r\n    isEnableDrop() {\r\n        return this._getAttr(\"enableDrop\");\r\n    }\r\n    isEnableDrag() {\r\n        return this._getAttr(\"enableDrag\");\r\n    }\r\n    isEnableDivide() {\r\n        return this._getAttr(\"enableDivide\");\r\n    }\r\n    isEnableMaximize() {\r\n        return this._getAttr(\"enableMaximize\");\r\n    }\r\n    isEnableClose() {\r\n        return this._getAttr(\"enableClose\");\r\n    }\r\n    canMaximize() {\r\n        if (this.isEnableMaximize()) {\r\n            // always allow maximize toggle if already maximized\r\n            if (this.getModel().getMaximizedTabset() === this) {\r\n                return true;\r\n            }\r\n            // only one tabset, so disable\r\n            if (this.getParent() === this.getModel().getRoot() && this.getModel().getRoot().getChildren().length === 1) {\r\n                return false;\r\n            }\r\n            return true;\r\n        }\r\n        return false;\r\n    }\r\n    isEnableTabStrip() {\r\n        return this._getAttr(\"enableTabStrip\");\r\n    }\r\n    isAutoSelectTab() {\r\n        return this._getAttr(\"autoSelectTab\");\r\n    }\r\n    getClassNameTabStrip() {\r\n        return this._getAttr(\"classNameTabStrip\");\r\n    }\r\n    getClassNameHeader() {\r\n        return this._getAttr(\"classNameHeader\");\r\n    }\r\n    /** @internal */\r\n    calculateHeaderBarHeight(metrics) {\r\n        const headerBarHeight = this._getAttr(\"headerHeight\");\r\n        if (headerBarHeight !== 0) {\r\n            // its defined\r\n            this._calculatedHeaderBarHeight = headerBarHeight;\r\n        }\r\n        else {\r\n            this._calculatedHeaderBarHeight = metrics.headerBarSize;\r\n        }\r\n    }\r\n    /** @internal */\r\n    calculateTabBarHeight(metrics) {\r\n        const tabBarHeight = this._getAttr(\"tabStripHeight\");\r\n        if (tabBarHeight !== 0) {\r\n            // its defined\r\n            this._calculatedTabBarHeight = tabBarHeight;\r\n        }\r\n        else {\r\n            this._calculatedTabBarHeight = metrics.tabBarSize;\r\n        }\r\n    }\r\n    getHeaderHeight() {\r\n        return this._calculatedHeaderBarHeight;\r\n    }\r\n    getTabStripHeight() {\r\n        return this._calculatedTabBarHeight;\r\n    }\r\n    getTabLocation() {\r\n        return this._getAttr(\"tabLocation\");\r\n    }\r\n    /** @internal */\r\n    _setWeight(weight) {\r\n        this._attributes.weight = weight;\r\n    }\r\n    /** @internal */\r\n    _setSelected(index) {\r\n        this._attributes.selected = index;\r\n    }\r\n    /** @internal */\r\n    canDrop(dragNode, x, y) {\r\n        let dropInfo;\r\n        if (dragNode === this) {\r\n            const dockLocation = _DockLocation__WEBPACK_IMPORTED_MODULE_2__.DockLocation.CENTER;\r\n            const outlineRect = this._tabHeaderRect;\r\n            dropInfo = new _DropInfo__WEBPACK_IMPORTED_MODULE_3__.DropInfo(this, outlineRect, dockLocation, -1, _Types__WEBPACK_IMPORTED_MODULE_6__.CLASSES.FLEXLAYOUT__OUTLINE_RECT);\r\n        }\r\n        else if (this._contentRect.contains(x, y)) {\r\n            let dockLocation = _DockLocation__WEBPACK_IMPORTED_MODULE_2__.DockLocation.CENTER;\r\n            if (this._model.getMaximizedTabset() === undefined) {\r\n                dockLocation = _DockLocation__WEBPACK_IMPORTED_MODULE_2__.DockLocation.getLocation(this._contentRect, x, y);\r\n            }\r\n            const outlineRect = dockLocation.getDockRect(this._rect);\r\n            dropInfo = new _DropInfo__WEBPACK_IMPORTED_MODULE_3__.DropInfo(this, outlineRect, dockLocation, -1, _Types__WEBPACK_IMPORTED_MODULE_6__.CLASSES.FLEXLAYOUT__OUTLINE_RECT);\r\n        }\r\n        else if (this._tabHeaderRect != null && this._tabHeaderRect.contains(x, y)) {\r\n            let r;\r\n            let yy;\r\n            let h;\r\n            if (this._children.length === 0) {\r\n                r = this._tabHeaderRect.clone();\r\n                yy = r.y + 3;\r\n                h = r.height - 4;\r\n                r.width = 2;\r\n            }\r\n            else {\r\n                let child = this._children[0];\r\n                r = child.getTabRect();\r\n                yy = r.y;\r\n                h = r.height;\r\n                let p = this._tabHeaderRect.x;\r\n                let childCenter = 0;\r\n                for (let i = 0; i < this._children.length; i++) {\r\n                    child = this._children[i];\r\n                    r = child.getTabRect();\r\n                    childCenter = r.x + r.width / 2;\r\n                    if (x >= p && x < childCenter) {\r\n                        const dockLocation = _DockLocation__WEBPACK_IMPORTED_MODULE_2__.DockLocation.CENTER;\r\n                        const outlineRect = new _Rect__WEBPACK_IMPORTED_MODULE_5__.Rect(r.x - 2, yy, 3, h);\r\n                        dropInfo = new _DropInfo__WEBPACK_IMPORTED_MODULE_3__.DropInfo(this, outlineRect, dockLocation, i, _Types__WEBPACK_IMPORTED_MODULE_6__.CLASSES.FLEXLAYOUT__OUTLINE_RECT);\r\n                        break;\r\n                    }\r\n                    p = childCenter;\r\n                }\r\n            }\r\n            if (dropInfo == null) {\r\n                const dockLocation = _DockLocation__WEBPACK_IMPORTED_MODULE_2__.DockLocation.CENTER;\r\n                const outlineRect = new _Rect__WEBPACK_IMPORTED_MODULE_5__.Rect(r.getRight() - 2, yy, 3, h);\r\n                dropInfo = new _DropInfo__WEBPACK_IMPORTED_MODULE_3__.DropInfo(this, outlineRect, dockLocation, this._children.length, _Types__WEBPACK_IMPORTED_MODULE_6__.CLASSES.FLEXLAYOUT__OUTLINE_RECT);\r\n            }\r\n        }\r\n        if (!dragNode._canDockInto(dragNode, dropInfo)) {\r\n            return undefined;\r\n        }\r\n        return dropInfo;\r\n    }\r\n    /** @internal */\r\n    _layout(rect, metrics) {\r\n        this.calculateHeaderBarHeight(metrics);\r\n        this.calculateTabBarHeight(metrics);\r\n        if (this.isMaximized()) {\r\n            rect = this._model.getRoot().getRect();\r\n        }\r\n        rect = rect.removeInsets(this._getAttr(\"marginInsets\"));\r\n        this._rect = rect;\r\n        rect = rect.removeInsets(this._getAttr(\"borderInsets\"));\r\n        const showHeader = this.getName() !== undefined;\r\n        let y = 0;\r\n        let h = 0;\r\n        if (showHeader) {\r\n            y += this._calculatedHeaderBarHeight;\r\n            h += this._calculatedHeaderBarHeight;\r\n        }\r\n        if (this.isEnableTabStrip()) {\r\n            if (this.getTabLocation() === \"top\") {\r\n                this._tabHeaderRect = new _Rect__WEBPACK_IMPORTED_MODULE_5__.Rect(rect.x, rect.y + y, rect.width, this._calculatedTabBarHeight);\r\n            }\r\n            else {\r\n                this._tabHeaderRect = new _Rect__WEBPACK_IMPORTED_MODULE_5__.Rect(rect.x, rect.y + rect.height - this._calculatedTabBarHeight, rect.width, this._calculatedTabBarHeight);\r\n            }\r\n            h += this._calculatedTabBarHeight;\r\n            if (this.getTabLocation() === \"top\") {\r\n                y += this._calculatedTabBarHeight;\r\n            }\r\n        }\r\n        this._contentRect = new _Rect__WEBPACK_IMPORTED_MODULE_5__.Rect(rect.x, rect.y + y, rect.width, rect.height - h);\r\n        for (let i = 0; i < this._children.length; i++) {\r\n            const child = this._children[i];\r\n            child._layout(this._contentRect, metrics);\r\n            child._setVisible(i === this.getSelected());\r\n        }\r\n    }\r\n    /** @internal */\r\n    _delete() {\r\n        this._parent._removeChild(this);\r\n    }\r\n    /** @internal */\r\n    _remove(node) {\r\n        const removedIndex = this._removeChild(node);\r\n        this._model._tidy();\r\n        (0,_Utils__WEBPACK_IMPORTED_MODULE_11__.adjustSelectedIndex)(this, removedIndex);\r\n    }\r\n    /** @internal */\r\n    drop(dragNode, location, index, select) {\r\n        const dockLocation = location;\r\n        if (this === dragNode) {\r\n            // tabset drop into itself\r\n            return; // dock back to itself\r\n        }\r\n        let dragParent = dragNode.getParent();\r\n        let fromIndex = 0;\r\n        if (dragParent !== undefined) {\r\n            fromIndex = dragParent._removeChild(dragNode);\r\n            // if selected node in border is being docked into tabset then deselect border tabs\r\n            if (dragParent instanceof _BorderNode__WEBPACK_IMPORTED_MODULE_7__.BorderNode && dragParent.getSelected() === fromIndex) {\r\n                dragParent._setSelected(-1);\r\n            }\r\n            else {\r\n                (0,_Utils__WEBPACK_IMPORTED_MODULE_11__.adjustSelectedIndex)(dragParent, fromIndex);\r\n            }\r\n        }\r\n        // if dropping a tab back to same tabset and moving to forward position then reduce insertion index\r\n        if (dragNode.getType() === _TabNode__WEBPACK_IMPORTED_MODULE_10__.TabNode.TYPE && dragParent === this && fromIndex < index && index > 0) {\r\n            index--;\r\n        }\r\n        // simple_bundled dock to existing tabset\r\n        if (dockLocation === _DockLocation__WEBPACK_IMPORTED_MODULE_2__.DockLocation.CENTER) {\r\n            let insertPos = index;\r\n            if (insertPos === -1) {\r\n                insertPos = this._children.length;\r\n            }\r\n            if (dragNode.getType() === _TabNode__WEBPACK_IMPORTED_MODULE_10__.TabNode.TYPE) {\r\n                this._addChild(dragNode, insertPos);\r\n                if (select || (select !== false && this.isAutoSelectTab())) {\r\n                    this._setSelected(insertPos);\r\n                }\r\n                // console.log(\"added child at : \" + insertPos);\r\n            }\r\n            else {\r\n                for (let i = 0; i < dragNode.getChildren().length; i++) {\r\n                    const child = dragNode.getChildren()[i];\r\n                    this._addChild(child, insertPos);\r\n                    // console.log(\"added child at : \" + insertPos);\r\n                    insertPos++;\r\n                }\r\n                if (this.getSelected() === -1 && this._children.length > 0) {\r\n                    this._setSelected(0);\r\n                }\r\n            }\r\n            this._model._setActiveTabset(this);\r\n        }\r\n        else {\r\n            let tabSet;\r\n            if (dragNode instanceof _TabNode__WEBPACK_IMPORTED_MODULE_10__.TabNode) {\r\n                // create new tabset parent\r\n                // console.log(\"create a new tabset\");\r\n                const callback = this._model._getOnCreateTabSet();\r\n                tabSet = new TabSetNode(this._model, callback ? callback(dragNode) : {});\r\n                tabSet._addChild(dragNode);\r\n                // console.log(\"added child at end\");\r\n                dragParent = tabSet;\r\n            }\r\n            else {\r\n                tabSet = dragNode;\r\n            }\r\n            const parentRow = this._parent;\r\n            const pos = parentRow.getChildren().indexOf(this);\r\n            if (parentRow.getOrientation() === dockLocation._orientation) {\r\n                tabSet._setWeight(this.getWeight() / 2);\r\n                this._setWeight(this.getWeight() / 2);\r\n                // console.log(\"added child 50% size at: \" +  pos + dockLocation.indexPlus);\r\n                parentRow._addChild(tabSet, pos + dockLocation._indexPlus);\r\n            }\r\n            else {\r\n                // create a new row to host the new tabset (it will go in the opposite direction)\r\n                // console.log(\"create a new row\");\r\n                const newRow = new _RowNode__WEBPACK_IMPORTED_MODULE_9__.RowNode(this._model, {});\r\n                newRow._setWeight(this.getWeight());\r\n                newRow._addChild(this);\r\n                this._setWeight(50);\r\n                tabSet._setWeight(50);\r\n                // console.log(\"added child 50% size at: \" +  dockLocation.indexPlus);\r\n                newRow._addChild(tabSet, dockLocation._indexPlus);\r\n                parentRow._removeChild(this);\r\n                parentRow._addChild(newRow, pos);\r\n            }\r\n            this._model._setActiveTabset(tabSet);\r\n        }\r\n        this._model._tidy();\r\n    }\r\n    toJson() {\r\n        const json = {};\r\n        TabSetNode._attributeDefinitions.toJson(json, this._attributes);\r\n        json.children = this._children.map((child) => child.toJson());\r\n        if (this.isActive()) {\r\n            json.active = true;\r\n        }\r\n        if (this.isMaximized()) {\r\n            json.maximized = true;\r\n        }\r\n        return json;\r\n    }\r\n    /** @internal */\r\n    _updateAttrs(json) {\r\n        TabSetNode._attributeDefinitions.update(json, this._attributes);\r\n    }\r\n    /** @internal */\r\n    _getAttributeDefinitions() {\r\n        return TabSetNode._attributeDefinitions;\r\n    }\r\n    /** @internal */\r\n    _getPrefSize(orientation) {\r\n        let prefSize = this.getWidth();\r\n        if (orientation === _Orientation__WEBPACK_IMPORTED_MODULE_4__.Orientation.VERT) {\r\n            prefSize = this.getHeight();\r\n        }\r\n        return prefSize;\r\n    }\r\n    /** @internal */\r\n    static getAttributeDefinitions() {\r\n        return TabSetNode._attributeDefinitions;\r\n    }\r\n}\r\nTabSetNode.TYPE = \"tabset\";\r\n/** @internal */\r\nTabSetNode._attributeDefinitions = TabSetNode._createAttributeDefinitions();\r\n\n\n//# sourceURL=webpack://FlexLayout/./src/model/TabSetNode.ts?");
+eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpack_require__.d(__webpack_exports__, {\n/* harmony export */   \"TabSetNode\": () => (/* binding */ TabSetNode)\n/* harmony export */ });\n/* harmony import */ var _Attribute__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! ../Attribute */ \"./src/Attribute.ts\");\n/* harmony import */ var _AttributeDefinitions__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ../AttributeDefinitions */ \"./src/AttributeDefinitions.ts\");\n/* harmony import */ var _DockLocation__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ../DockLocation */ \"./src/DockLocation.ts\");\n/* harmony import */ var _DropInfo__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! ../DropInfo */ \"./src/DropInfo.ts\");\n/* harmony import */ var _Orientation__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(/*! ../Orientation */ \"./src/Orientation.ts\");\n/* harmony import */ var _Rect__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__(/*! ../Rect */ \"./src/Rect.ts\");\n/* harmony import */ var _Types__WEBPACK_IMPORTED_MODULE_6__ = __webpack_require__(/*! ../Types */ \"./src/Types.ts\");\n/* harmony import */ var _BorderNode__WEBPACK_IMPORTED_MODULE_7__ = __webpack_require__(/*! ./BorderNode */ \"./src/model/BorderNode.ts\");\n/* harmony import */ var _Node__WEBPACK_IMPORTED_MODULE_8__ = __webpack_require__(/*! ./Node */ \"./src/model/Node.ts\");\n/* harmony import */ var _RowNode__WEBPACK_IMPORTED_MODULE_9__ = __webpack_require__(/*! ./RowNode */ \"./src/model/RowNode.ts\");\n/* harmony import */ var _TabNode__WEBPACK_IMPORTED_MODULE_10__ = __webpack_require__(/*! ./TabNode */ \"./src/model/TabNode.ts\");\n/* harmony import */ var _Utils__WEBPACK_IMPORTED_MODULE_11__ = __webpack_require__(/*! ./Utils */ \"./src/model/Utils.ts\");\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\nclass TabSetNode extends _Node__WEBPACK_IMPORTED_MODULE_8__.Node {\r\n    /** @internal */\r\n    static _fromJson(json, model) {\r\n        const newLayoutNode = new TabSetNode(model, json);\r\n        if (json.children != null) {\r\n            for (const jsonChild of json.children) {\r\n                const child = _TabNode__WEBPACK_IMPORTED_MODULE_10__.TabNode._fromJson(jsonChild, model);\r\n                newLayoutNode._addChild(child);\r\n            }\r\n        }\r\n        if (newLayoutNode._children.length === 0) {\r\n            newLayoutNode._setSelected(-1);\r\n        }\r\n        if (json.maximized && json.maximized === true) {\r\n            model._setMaximizedTabset(newLayoutNode);\r\n        }\r\n        if (json.active && json.active === true) {\r\n            model._setActiveTabset(newLayoutNode);\r\n        }\r\n        return newLayoutNode;\r\n    }\r\n    /** @internal */\r\n    static _createAttributeDefinitions() {\r\n        const attributeDefinitions = new _AttributeDefinitions__WEBPACK_IMPORTED_MODULE_1__.AttributeDefinitions();\r\n        attributeDefinitions.add(\"type\", TabSetNode.TYPE, true).setType(_Attribute__WEBPACK_IMPORTED_MODULE_0__.Attribute.STRING).setFixed();\r\n        attributeDefinitions.add(\"id\", undefined).setType(_Attribute__WEBPACK_IMPORTED_MODULE_0__.Attribute.STRING);\r\n        attributeDefinitions.add(\"weight\", 100).setType(_Attribute__WEBPACK_IMPORTED_MODULE_0__.Attribute.NUMBER);\r\n        attributeDefinitions.add(\"width\", undefined).setType(_Attribute__WEBPACK_IMPORTED_MODULE_0__.Attribute.NUMBER);\r\n        attributeDefinitions.add(\"height\", undefined).setType(_Attribute__WEBPACK_IMPORTED_MODULE_0__.Attribute.NUMBER);\r\n        attributeDefinitions.add(\"selected\", 0).setType(_Attribute__WEBPACK_IMPORTED_MODULE_0__.Attribute.NUMBER);\r\n        attributeDefinitions.add(\"name\", undefined).setType(_Attribute__WEBPACK_IMPORTED_MODULE_0__.Attribute.STRING);\r\n        attributeDefinitions.add(\"config\", undefined).setType(\"any\");\r\n        attributeDefinitions.addInherited(\"enableDeleteWhenEmpty\", \"tabSetEnableDeleteWhenEmpty\");\r\n        attributeDefinitions.addInherited(\"enableDrop\", \"tabSetEnableDrop\");\r\n        attributeDefinitions.addInherited(\"enableDrag\", \"tabSetEnableDrag\");\r\n        attributeDefinitions.addInherited(\"enableDivide\", \"tabSetEnableDivide\");\r\n        attributeDefinitions.addInherited(\"enableMaximize\", \"tabSetEnableMaximize\");\r\n        attributeDefinitions.addInherited(\"enableClose\", \"tabSetEnableClose\");\r\n        attributeDefinitions.addInherited(\"enableSingleTabStretch\", \"tabSetEnableSingleTabStretch\");\r\n        attributeDefinitions.addInherited(\"classNameTabStrip\", \"tabSetClassNameTabStrip\");\r\n        attributeDefinitions.addInherited(\"classNameHeader\", \"tabSetClassNameHeader\");\r\n        attributeDefinitions.addInherited(\"enableTabStrip\", \"tabSetEnableTabStrip\");\r\n        attributeDefinitions.addInherited(\"borderInsets\", \"tabSetBorderInsets\");\r\n        attributeDefinitions.addInherited(\"marginInsets\", \"tabSetMarginInsets\");\r\n        attributeDefinitions.addInherited(\"minWidth\", \"tabSetMinWidth\");\r\n        attributeDefinitions.addInherited(\"minHeight\", \"tabSetMinHeight\");\r\n        attributeDefinitions.addInherited(\"headerHeight\", \"tabSetHeaderHeight\");\r\n        attributeDefinitions.addInherited(\"tabStripHeight\", \"tabSetTabStripHeight\");\r\n        attributeDefinitions.addInherited(\"tabLocation\", \"tabSetTabLocation\");\r\n        attributeDefinitions.addInherited(\"autoSelectTab\", \"tabSetAutoSelectTab\").setType(_Attribute__WEBPACK_IMPORTED_MODULE_0__.Attribute.BOOLEAN);\r\n        return attributeDefinitions;\r\n    }\r\n    /** @internal */\r\n    constructor(model, json) {\r\n        super(model);\r\n        TabSetNode._attributeDefinitions.fromJson(json, this._attributes);\r\n        model._addNode(this);\r\n        this._calculatedTabBarHeight = 0;\r\n        this._calculatedHeaderBarHeight = 0;\r\n    }\r\n    getName() {\r\n        return this._getAttr(\"name\");\r\n    }\r\n    getSelected() {\r\n        const selected = this._attributes.selected;\r\n        if (selected !== undefined) {\r\n            return selected;\r\n        }\r\n        return -1;\r\n    }\r\n    getSelectedNode() {\r\n        const selected = this.getSelected();\r\n        if (selected !== -1) {\r\n            return this._children[selected];\r\n        }\r\n        return undefined;\r\n    }\r\n    getWeight() {\r\n        return this._getAttr(\"weight\");\r\n    }\r\n    getWidth() {\r\n        return this._getAttr(\"width\");\r\n    }\r\n    getMinWidth() {\r\n        return this._getAttr(\"minWidth\");\r\n    }\r\n    getHeight() {\r\n        return this._getAttr(\"height\");\r\n    }\r\n    getMinHeight() {\r\n        return this._getAttr(\"minHeight\");\r\n    }\r\n    /** @internal */\r\n    getMinSize(orientation) {\r\n        if (orientation === _Orientation__WEBPACK_IMPORTED_MODULE_4__.Orientation.HORZ) {\r\n            return this.getMinWidth();\r\n        }\r\n        else {\r\n            return this.getMinHeight();\r\n        }\r\n    }\r\n    /**\r\n     * Returns the config attribute that can be used to store node specific data that\r\n     * WILL be saved to the json. The config attribute should be changed via the action Actions.updateNodeAttributes rather\r\n     * than directly, for example:\r\n     * this.state.model.doAction(\r\n     *   FlexLayout.Actions.updateNodeAttributes(node.getId(), {config:myConfigObject}));\r\n     */\r\n    getConfig() {\r\n        return this._attributes.config;\r\n    }\r\n    isMaximized() {\r\n        return this._model.getMaximizedTabset() === this;\r\n    }\r\n    isActive() {\r\n        return this._model.getActiveTabset() === this;\r\n    }\r\n    isEnableDeleteWhenEmpty() {\r\n        return this._getAttr(\"enableDeleteWhenEmpty\");\r\n    }\r\n    isEnableDrop() {\r\n        return this._getAttr(\"enableDrop\");\r\n    }\r\n    isEnableDrag() {\r\n        return this._getAttr(\"enableDrag\");\r\n    }\r\n    isEnableDivide() {\r\n        return this._getAttr(\"enableDivide\");\r\n    }\r\n    isEnableMaximize() {\r\n        return this._getAttr(\"enableMaximize\");\r\n    }\r\n    isEnableClose() {\r\n        return this._getAttr(\"enableClose\");\r\n    }\r\n    isEnableSingleTabStretch() {\r\n        return this._getAttr(\"enableSingleTabStretch\");\r\n    }\r\n    canMaximize() {\r\n        if (this.isEnableMaximize()) {\r\n            // always allow maximize toggle if already maximized\r\n            if (this.getModel().getMaximizedTabset() === this) {\r\n                return true;\r\n            }\r\n            // only one tabset, so disable\r\n            if (this.getParent() === this.getModel().getRoot() && this.getModel().getRoot().getChildren().length === 1) {\r\n                return false;\r\n            }\r\n            return true;\r\n        }\r\n        return false;\r\n    }\r\n    isEnableTabStrip() {\r\n        return this._getAttr(\"enableTabStrip\");\r\n    }\r\n    isAutoSelectTab() {\r\n        return this._getAttr(\"autoSelectTab\");\r\n    }\r\n    getClassNameTabStrip() {\r\n        return this._getAttr(\"classNameTabStrip\");\r\n    }\r\n    getClassNameHeader() {\r\n        return this._getAttr(\"classNameHeader\");\r\n    }\r\n    /** @internal */\r\n    calculateHeaderBarHeight(metrics) {\r\n        const headerBarHeight = this._getAttr(\"headerHeight\");\r\n        if (headerBarHeight !== 0) {\r\n            // its defined\r\n            this._calculatedHeaderBarHeight = headerBarHeight;\r\n        }\r\n        else {\r\n            this._calculatedHeaderBarHeight = metrics.headerBarSize;\r\n        }\r\n    }\r\n    /** @internal */\r\n    calculateTabBarHeight(metrics) {\r\n        const tabBarHeight = this._getAttr(\"tabStripHeight\");\r\n        if (tabBarHeight !== 0) {\r\n            // its defined\r\n            this._calculatedTabBarHeight = tabBarHeight;\r\n        }\r\n        else {\r\n            this._calculatedTabBarHeight = metrics.tabBarSize;\r\n        }\r\n    }\r\n    getHeaderHeight() {\r\n        return this._calculatedHeaderBarHeight;\r\n    }\r\n    getTabStripHeight() {\r\n        return this._calculatedTabBarHeight;\r\n    }\r\n    getTabLocation() {\r\n        return this._getAttr(\"tabLocation\");\r\n    }\r\n    /** @internal */\r\n    _setWeight(weight) {\r\n        this._attributes.weight = weight;\r\n    }\r\n    /** @internal */\r\n    _setSelected(index) {\r\n        this._attributes.selected = index;\r\n    }\r\n    /** @internal */\r\n    canDrop(dragNode, x, y) {\r\n        let dropInfo;\r\n        if (dragNode === this) {\r\n            const dockLocation = _DockLocation__WEBPACK_IMPORTED_MODULE_2__.DockLocation.CENTER;\r\n            const outlineRect = this._tabHeaderRect;\r\n            dropInfo = new _DropInfo__WEBPACK_IMPORTED_MODULE_3__.DropInfo(this, outlineRect, dockLocation, -1, _Types__WEBPACK_IMPORTED_MODULE_6__.CLASSES.FLEXLAYOUT__OUTLINE_RECT);\r\n        }\r\n        else if (this._contentRect.contains(x, y)) {\r\n            let dockLocation = _DockLocation__WEBPACK_IMPORTED_MODULE_2__.DockLocation.CENTER;\r\n            if (this._model.getMaximizedTabset() === undefined) {\r\n                dockLocation = _DockLocation__WEBPACK_IMPORTED_MODULE_2__.DockLocation.getLocation(this._contentRect, x, y);\r\n            }\r\n            const outlineRect = dockLocation.getDockRect(this._rect);\r\n            dropInfo = new _DropInfo__WEBPACK_IMPORTED_MODULE_3__.DropInfo(this, outlineRect, dockLocation, -1, _Types__WEBPACK_IMPORTED_MODULE_6__.CLASSES.FLEXLAYOUT__OUTLINE_RECT);\r\n        }\r\n        else if (this._tabHeaderRect != null && this._tabHeaderRect.contains(x, y)) {\r\n            let r;\r\n            let yy;\r\n            let h;\r\n            if (this._children.length === 0) {\r\n                r = this._tabHeaderRect.clone();\r\n                yy = r.y + 3;\r\n                h = r.height - 4;\r\n                r.width = 2;\r\n            }\r\n            else {\r\n                let child = this._children[0];\r\n                r = child.getTabRect();\r\n                yy = r.y;\r\n                h = r.height;\r\n                let p = this._tabHeaderRect.x;\r\n                let childCenter = 0;\r\n                for (let i = 0; i < this._children.length; i++) {\r\n                    child = this._children[i];\r\n                    r = child.getTabRect();\r\n                    childCenter = r.x + r.width / 2;\r\n                    if (x >= p && x < childCenter) {\r\n                        const dockLocation = _DockLocation__WEBPACK_IMPORTED_MODULE_2__.DockLocation.CENTER;\r\n                        const outlineRect = new _Rect__WEBPACK_IMPORTED_MODULE_5__.Rect(r.x - 2, yy, 3, h);\r\n                        dropInfo = new _DropInfo__WEBPACK_IMPORTED_MODULE_3__.DropInfo(this, outlineRect, dockLocation, i, _Types__WEBPACK_IMPORTED_MODULE_6__.CLASSES.FLEXLAYOUT__OUTLINE_RECT);\r\n                        break;\r\n                    }\r\n                    p = childCenter;\r\n                }\r\n            }\r\n            if (dropInfo == null) {\r\n                const dockLocation = _DockLocation__WEBPACK_IMPORTED_MODULE_2__.DockLocation.CENTER;\r\n                const outlineRect = new _Rect__WEBPACK_IMPORTED_MODULE_5__.Rect(r.getRight() - 2, yy, 3, h);\r\n                dropInfo = new _DropInfo__WEBPACK_IMPORTED_MODULE_3__.DropInfo(this, outlineRect, dockLocation, this._children.length, _Types__WEBPACK_IMPORTED_MODULE_6__.CLASSES.FLEXLAYOUT__OUTLINE_RECT);\r\n            }\r\n        }\r\n        if (!dragNode._canDockInto(dragNode, dropInfo)) {\r\n            return undefined;\r\n        }\r\n        return dropInfo;\r\n    }\r\n    /** @internal */\r\n    _layout(rect, metrics) {\r\n        this.calculateHeaderBarHeight(metrics);\r\n        this.calculateTabBarHeight(metrics);\r\n        if (this.isMaximized()) {\r\n            rect = this._model.getRoot().getRect();\r\n        }\r\n        rect = rect.removeInsets(this._getAttr(\"marginInsets\"));\r\n        this._rect = rect;\r\n        rect = rect.removeInsets(this._getAttr(\"borderInsets\"));\r\n        const showHeader = this.getName() !== undefined;\r\n        let y = 0;\r\n        let h = 0;\r\n        if (showHeader) {\r\n            y += this._calculatedHeaderBarHeight;\r\n            h += this._calculatedHeaderBarHeight;\r\n        }\r\n        if (this.isEnableTabStrip()) {\r\n            if (this.getTabLocation() === \"top\") {\r\n                this._tabHeaderRect = new _Rect__WEBPACK_IMPORTED_MODULE_5__.Rect(rect.x, rect.y + y, rect.width, this._calculatedTabBarHeight);\r\n            }\r\n            else {\r\n                this._tabHeaderRect = new _Rect__WEBPACK_IMPORTED_MODULE_5__.Rect(rect.x, rect.y + rect.height - this._calculatedTabBarHeight, rect.width, this._calculatedTabBarHeight);\r\n            }\r\n            h += this._calculatedTabBarHeight;\r\n            if (this.getTabLocation() === \"top\") {\r\n                y += this._calculatedTabBarHeight;\r\n            }\r\n        }\r\n        this._contentRect = new _Rect__WEBPACK_IMPORTED_MODULE_5__.Rect(rect.x, rect.y + y, rect.width, rect.height - h);\r\n        for (let i = 0; i < this._children.length; i++) {\r\n            const child = this._children[i];\r\n            child._layout(this._contentRect, metrics);\r\n            child._setVisible(i === this.getSelected());\r\n        }\r\n    }\r\n    /** @internal */\r\n    _delete() {\r\n        this._parent._removeChild(this);\r\n    }\r\n    /** @internal */\r\n    _remove(node) {\r\n        const removedIndex = this._removeChild(node);\r\n        this._model._tidy();\r\n        (0,_Utils__WEBPACK_IMPORTED_MODULE_11__.adjustSelectedIndex)(this, removedIndex);\r\n    }\r\n    /** @internal */\r\n    drop(dragNode, location, index, select) {\r\n        const dockLocation = location;\r\n        if (this === dragNode) {\r\n            // tabset drop into itself\r\n            return; // dock back to itself\r\n        }\r\n        let dragParent = dragNode.getParent();\r\n        let fromIndex = 0;\r\n        if (dragParent !== undefined) {\r\n            fromIndex = dragParent._removeChild(dragNode);\r\n            // if selected node in border is being docked into tabset then deselect border tabs\r\n            if (dragParent instanceof _BorderNode__WEBPACK_IMPORTED_MODULE_7__.BorderNode && dragParent.getSelected() === fromIndex) {\r\n                dragParent._setSelected(-1);\r\n            }\r\n            else {\r\n                (0,_Utils__WEBPACK_IMPORTED_MODULE_11__.adjustSelectedIndex)(dragParent, fromIndex);\r\n            }\r\n        }\r\n        // if dropping a tab back to same tabset and moving to forward position then reduce insertion index\r\n        if (dragNode.getType() === _TabNode__WEBPACK_IMPORTED_MODULE_10__.TabNode.TYPE && dragParent === this && fromIndex < index && index > 0) {\r\n            index--;\r\n        }\r\n        // simple_bundled dock to existing tabset\r\n        if (dockLocation === _DockLocation__WEBPACK_IMPORTED_MODULE_2__.DockLocation.CENTER) {\r\n            let insertPos = index;\r\n            if (insertPos === -1) {\r\n                insertPos = this._children.length;\r\n            }\r\n            if (dragNode.getType() === _TabNode__WEBPACK_IMPORTED_MODULE_10__.TabNode.TYPE) {\r\n                this._addChild(dragNode, insertPos);\r\n                if (select || (select !== false && this.isAutoSelectTab())) {\r\n                    this._setSelected(insertPos);\r\n                }\r\n                // console.log(\"added child at : \" + insertPos);\r\n            }\r\n            else {\r\n                for (let i = 0; i < dragNode.getChildren().length; i++) {\r\n                    const child = dragNode.getChildren()[i];\r\n                    this._addChild(child, insertPos);\r\n                    // console.log(\"added child at : \" + insertPos);\r\n                    insertPos++;\r\n                }\r\n                if (this.getSelected() === -1 && this._children.length > 0) {\r\n                    this._setSelected(0);\r\n                }\r\n            }\r\n            this._model._setActiveTabset(this);\r\n        }\r\n        else {\r\n            let tabSet;\r\n            if (dragNode instanceof _TabNode__WEBPACK_IMPORTED_MODULE_10__.TabNode) {\r\n                // create new tabset parent\r\n                // console.log(\"create a new tabset\");\r\n                const callback = this._model._getOnCreateTabSet();\r\n                tabSet = new TabSetNode(this._model, callback ? callback(dragNode) : {});\r\n                tabSet._addChild(dragNode);\r\n                // console.log(\"added child at end\");\r\n                dragParent = tabSet;\r\n            }\r\n            else {\r\n                tabSet = dragNode;\r\n            }\r\n            const parentRow = this._parent;\r\n            const pos = parentRow.getChildren().indexOf(this);\r\n            if (parentRow.getOrientation() === dockLocation._orientation) {\r\n                tabSet._setWeight(this.getWeight() / 2);\r\n                this._setWeight(this.getWeight() / 2);\r\n                // console.log(\"added child 50% size at: \" +  pos + dockLocation.indexPlus);\r\n                parentRow._addChild(tabSet, pos + dockLocation._indexPlus);\r\n            }\r\n            else {\r\n                // create a new row to host the new tabset (it will go in the opposite direction)\r\n                // console.log(\"create a new row\");\r\n                const newRow = new _RowNode__WEBPACK_IMPORTED_MODULE_9__.RowNode(this._model, {});\r\n                newRow._setWeight(this.getWeight());\r\n                newRow._addChild(this);\r\n                this._setWeight(50);\r\n                tabSet._setWeight(50);\r\n                // console.log(\"added child 50% size at: \" +  dockLocation.indexPlus);\r\n                newRow._addChild(tabSet, dockLocation._indexPlus);\r\n                parentRow._removeChild(this);\r\n                parentRow._addChild(newRow, pos);\r\n            }\r\n            this._model._setActiveTabset(tabSet);\r\n        }\r\n        this._model._tidy();\r\n    }\r\n    toJson() {\r\n        const json = {};\r\n        TabSetNode._attributeDefinitions.toJson(json, this._attributes);\r\n        json.children = this._children.map((child) => child.toJson());\r\n        if (this.isActive()) {\r\n            json.active = true;\r\n        }\r\n        if (this.isMaximized()) {\r\n            json.maximized = true;\r\n        }\r\n        return json;\r\n    }\r\n    /** @internal */\r\n    _updateAttrs(json) {\r\n        TabSetNode._attributeDefinitions.update(json, this._attributes);\r\n    }\r\n    /** @internal */\r\n    _getAttributeDefinitions() {\r\n        return TabSetNode._attributeDefinitions;\r\n    }\r\n    /** @internal */\r\n    _getPrefSize(orientation) {\r\n        let prefSize = this.getWidth();\r\n        if (orientation === _Orientation__WEBPACK_IMPORTED_MODULE_4__.Orientation.VERT) {\r\n            prefSize = this.getHeight();\r\n        }\r\n        return prefSize;\r\n    }\r\n    /** @internal */\r\n    static getAttributeDefinitions() {\r\n        return TabSetNode._attributeDefinitions;\r\n    }\r\n}\r\nTabSetNode.TYPE = \"tabset\";\r\n/** @internal */\r\nTabSetNode._attributeDefinitions = TabSetNode._createAttributeDefinitions();\r\n\n\n//# sourceURL=webpack://FlexLayout/./src/model/TabSetNode.ts?");
 
 /***/ }),
 
@@ -286,7 +286,7 @@ eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpac
   \***********************************/
 /***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {
 
-eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpack_require__.d(__webpack_exports__, {\n/* harmony export */   \"BorderButton\": () => (/* binding */ BorderButton)\n/* harmony export */ });\n/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! react */ \"react\");\n/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(react__WEBPACK_IMPORTED_MODULE_0__);\n/* harmony import */ var _I18nLabel__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ../I18nLabel */ \"./src/I18nLabel.ts\");\n/* harmony import */ var _model_Actions__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ../model/Actions */ \"./src/model/Actions.ts\");\n/* harmony import */ var _Rect__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! ../Rect */ \"./src/Rect.ts\");\n/* harmony import */ var _model_ICloseType__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(/*! ../model/ICloseType */ \"./src/model/ICloseType.ts\");\n/* harmony import */ var _Types__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__(/*! ../Types */ \"./src/Types.ts\");\n/* harmony import */ var _Utils__WEBPACK_IMPORTED_MODULE_6__ = __webpack_require__(/*! ./Utils */ \"./src/view/Utils.tsx\");\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n/** @internal */\r\nconst BorderButton = (props) => {\r\n    const { layout, node, selected, border, iconFactory, titleFactory, icons, path } = props;\r\n    const selfRef = react__WEBPACK_IMPORTED_MODULE_0__.useRef(null);\r\n    const contentRef = react__WEBPACK_IMPORTED_MODULE_0__.useRef(null);\r\n    const onMouseDown = (event) => {\r\n        if (!(0,_Utils__WEBPACK_IMPORTED_MODULE_6__.isAuxMouseEvent)(event) && !layout.getEditingTab()) {\r\n            layout.dragStart(event, undefined, node, node.isEnableDrag(), onClick, onDoubleClick);\r\n        }\r\n    };\r\n    const onAuxMouseClick = (event) => {\r\n        if ((0,_Utils__WEBPACK_IMPORTED_MODULE_6__.isAuxMouseEvent)(event)) {\r\n            layout.auxMouseClick(node, event);\r\n        }\r\n    };\r\n    const onContextMenu = (event) => {\r\n        layout.showContextMenu(node, event);\r\n    };\r\n    const onClick = () => {\r\n        layout.doAction(_model_Actions__WEBPACK_IMPORTED_MODULE_2__.Actions.selectTab(node.getId()));\r\n    };\r\n    const onDoubleClick = (event) => {\r\n        // if (node.isEnableRename()) {\r\n        //     onRename();\r\n        // }\r\n    };\r\n    // const onRename = () => {\r\n    //     layout.setEditingTab(node);\r\n    //     layout.getCurrentDocument()!.body.addEventListener(\"mousedown\", onEndEdit);\r\n    //     layout.getCurrentDocument()!.body.addEventListener(\"touchstart\", onEndEdit);\r\n    // };\r\n    const onEndEdit = (event) => {\r\n        if (event.target !== contentRef.current) {\r\n            layout.getCurrentDocument().body.removeEventListener(\"mousedown\", onEndEdit);\r\n            layout.getCurrentDocument().body.removeEventListener(\"touchstart\", onEndEdit);\r\n            layout.setEditingTab(undefined);\r\n        }\r\n    };\r\n    const isClosable = () => {\r\n        const closeType = node.getCloseType();\r\n        if (selected || closeType === _model_ICloseType__WEBPACK_IMPORTED_MODULE_4__.ICloseType.Always) {\r\n            return true;\r\n        }\r\n        if (closeType === _model_ICloseType__WEBPACK_IMPORTED_MODULE_4__.ICloseType.Visible) {\r\n            // not selected but x should be visible due to hover\r\n            if (window.matchMedia && window.matchMedia(\"(hover: hover) and (pointer: fine)\").matches) {\r\n                return true;\r\n            }\r\n        }\r\n        return false;\r\n    };\r\n    const onClose = (event) => {\r\n        if (isClosable()) {\r\n            layout.doAction(_model_Actions__WEBPACK_IMPORTED_MODULE_2__.Actions.deleteTab(node.getId()));\r\n        }\r\n        else {\r\n            onClick();\r\n        }\r\n    };\r\n    const onCloseMouseDown = (event) => {\r\n        event.stopPropagation();\r\n    };\r\n    react__WEBPACK_IMPORTED_MODULE_0__.useLayoutEffect(() => {\r\n        updateRect();\r\n        if (layout.getEditingTab() === node) {\r\n            contentRef.current.select();\r\n        }\r\n    });\r\n    const updateRect = () => {\r\n        // record position of tab in node\r\n        const layoutRect = layout.getDomRect();\r\n        const r = selfRef.current.getBoundingClientRect();\r\n        node._setTabRect(new _Rect__WEBPACK_IMPORTED_MODULE_3__.Rect(r.left - layoutRect.left, r.top - layoutRect.top, r.width, r.height));\r\n    };\r\n    const onTextBoxMouseDown = (event) => {\r\n        // console.log(\"onTextBoxMouseDown\");\r\n        event.stopPropagation();\r\n    };\r\n    const onTextBoxKeyPress = (event) => {\r\n        // console.log(event, event.keyCode);\r\n        if (event.keyCode === 27) {\r\n            // esc\r\n            layout.setEditingTab(undefined);\r\n        }\r\n        else if (event.keyCode === 13) {\r\n            // enter\r\n            layout.setEditingTab(undefined);\r\n            layout.doAction(_model_Actions__WEBPACK_IMPORTED_MODULE_2__.Actions.renameTab(node.getId(), event.target.value));\r\n        }\r\n    };\r\n    const cm = layout.getClassName;\r\n    let classNames = cm(_Types__WEBPACK_IMPORTED_MODULE_5__.CLASSES.FLEXLAYOUT__BORDER_BUTTON) + \" \" + cm(_Types__WEBPACK_IMPORTED_MODULE_5__.CLASSES.FLEXLAYOUT__BORDER_BUTTON_ + border);\r\n    if (selected) {\r\n        classNames += \" \" + cm(_Types__WEBPACK_IMPORTED_MODULE_5__.CLASSES.FLEXLAYOUT__BORDER_BUTTON__SELECTED);\r\n    }\r\n    else {\r\n        classNames += \" \" + cm(_Types__WEBPACK_IMPORTED_MODULE_5__.CLASSES.FLEXLAYOUT__BORDER_BUTTON__UNSELECTED);\r\n    }\r\n    if (node.getClassName() !== undefined) {\r\n        classNames += \" \" + node.getClassName();\r\n    }\r\n    let iconAngle = 0;\r\n    if (node.getModel().isEnableRotateBorderIcons() === false) {\r\n        if (border === \"left\") {\r\n            iconAngle = 90;\r\n        }\r\n        else if (border === \"right\") {\r\n            iconAngle = -90;\r\n        }\r\n    }\r\n    const renderState = (0,_Utils__WEBPACK_IMPORTED_MODULE_6__.getRenderStateEx)(layout, node, iconFactory, titleFactory, iconAngle);\r\n    let content = renderState.content ? (react__WEBPACK_IMPORTED_MODULE_0__.createElement(\"div\", { className: cm(_Types__WEBPACK_IMPORTED_MODULE_5__.CLASSES.FLEXLAYOUT__BORDER_BUTTON_CONTENT) }, renderState.content)) : null;\r\n    const leading = renderState.leading ? (react__WEBPACK_IMPORTED_MODULE_0__.createElement(\"div\", { className: cm(_Types__WEBPACK_IMPORTED_MODULE_5__.CLASSES.FLEXLAYOUT__BORDER_BUTTON_LEADING) }, renderState.leading)) : null;\r\n    if (layout.getEditingTab() === node) {\r\n        content = (react__WEBPACK_IMPORTED_MODULE_0__.createElement(\"input\", { ref: contentRef, className: cm(_Types__WEBPACK_IMPORTED_MODULE_5__.CLASSES.FLEXLAYOUT__TAB_BUTTON_TEXTBOX), \"data-layout-path\": path + \"/textbox\", type: \"text\", autoFocus: true, defaultValue: node.getName(), onKeyDown: onTextBoxKeyPress, onMouseDown: onTextBoxMouseDown, onTouchStart: onTextBoxMouseDown }));\r\n    }\r\n    if (node.isEnableClose()) {\r\n        const closeTitle = layout.i18nName(_I18nLabel__WEBPACK_IMPORTED_MODULE_1__.I18nLabel.Close_Tab);\r\n        renderState.buttons.push(react__WEBPACK_IMPORTED_MODULE_0__.createElement(\"div\", { key: \"close\", \"data-layout-path\": path + \"/button/close\", title: closeTitle, className: cm(_Types__WEBPACK_IMPORTED_MODULE_5__.CLASSES.FLEXLAYOUT__BORDER_BUTTON_TRAILING), onMouseDown: onCloseMouseDown, onClick: onClose, onTouchStart: onCloseMouseDown }, (typeof icons.close === \"function\") ? icons.close(node) : icons.close));\r\n    }\r\n    return (react__WEBPACK_IMPORTED_MODULE_0__.createElement(\"div\", { ref: selfRef, \"data-layout-path\": path, className: classNames, onMouseDown: onMouseDown, onClick: onAuxMouseClick, onAuxClick: onAuxMouseClick, onContextMenu: onContextMenu, onTouchStart: onMouseDown, title: node.getHelpText() },\r\n        leading,\r\n        content,\r\n        renderState.buttons));\r\n};\r\n\n\n//# sourceURL=webpack://FlexLayout/./src/view/BorderButton.tsx?");
+eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpack_require__.d(__webpack_exports__, {\n/* harmony export */   \"BorderButton\": () => (/* binding */ BorderButton)\n/* harmony export */ });\n/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! react */ \"react\");\n/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(react__WEBPACK_IMPORTED_MODULE_0__);\n/* harmony import */ var _I18nLabel__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ../I18nLabel */ \"./src/I18nLabel.ts\");\n/* harmony import */ var _model_Actions__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ../model/Actions */ \"./src/model/Actions.ts\");\n/* harmony import */ var _Rect__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! ../Rect */ \"./src/Rect.ts\");\n/* harmony import */ var _model_ICloseType__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(/*! ../model/ICloseType */ \"./src/model/ICloseType.ts\");\n/* harmony import */ var _Types__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__(/*! ../Types */ \"./src/Types.ts\");\n/* harmony import */ var _Utils__WEBPACK_IMPORTED_MODULE_6__ = __webpack_require__(/*! ./Utils */ \"./src/view/Utils.tsx\");\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n/** @internal */\r\nconst BorderButton = (props) => {\r\n    const { layout, node, selected, border, iconFactory, titleFactory, icons, path } = props;\r\n    const selfRef = react__WEBPACK_IMPORTED_MODULE_0__.useRef(null);\r\n    const contentRef = react__WEBPACK_IMPORTED_MODULE_0__.useRef(null);\r\n    const onMouseDown = (event) => {\r\n        if (!(0,_Utils__WEBPACK_IMPORTED_MODULE_6__.isAuxMouseEvent)(event) && !layout.getEditingTab()) {\r\n            layout.dragStart(event, undefined, node, node.isEnableDrag(), onClick, onDoubleClick);\r\n        }\r\n    };\r\n    const onAuxMouseClick = (event) => {\r\n        if ((0,_Utils__WEBPACK_IMPORTED_MODULE_6__.isAuxMouseEvent)(event)) {\r\n            layout.auxMouseClick(node, event);\r\n        }\r\n    };\r\n    const onContextMenu = (event) => {\r\n        layout.showContextMenu(node, event);\r\n    };\r\n    const onClick = () => {\r\n        layout.doAction(_model_Actions__WEBPACK_IMPORTED_MODULE_2__.Actions.selectTab(node.getId()));\r\n    };\r\n    const onDoubleClick = (event) => {\r\n        // if (node.isEnableRename()) {\r\n        //     onRename();\r\n        // }\r\n    };\r\n    // const onRename = () => {\r\n    //     layout.setEditingTab(node);\r\n    //     layout.getCurrentDocument()!.body.addEventListener(\"mousedown\", onEndEdit);\r\n    //     layout.getCurrentDocument()!.body.addEventListener(\"touchstart\", onEndEdit);\r\n    // };\r\n    const onEndEdit = (event) => {\r\n        if (event.target !== contentRef.current) {\r\n            layout.getCurrentDocument().body.removeEventListener(\"mousedown\", onEndEdit);\r\n            layout.getCurrentDocument().body.removeEventListener(\"touchstart\", onEndEdit);\r\n            layout.setEditingTab(undefined);\r\n        }\r\n    };\r\n    const isClosable = () => {\r\n        const closeType = node.getCloseType();\r\n        if (selected || closeType === _model_ICloseType__WEBPACK_IMPORTED_MODULE_4__.ICloseType.Always) {\r\n            return true;\r\n        }\r\n        if (closeType === _model_ICloseType__WEBPACK_IMPORTED_MODULE_4__.ICloseType.Visible) {\r\n            // not selected but x should be visible due to hover\r\n            if (window.matchMedia && window.matchMedia(\"(hover: hover) and (pointer: fine)\").matches) {\r\n                return true;\r\n            }\r\n        }\r\n        return false;\r\n    };\r\n    const onClose = (event) => {\r\n        if (isClosable()) {\r\n            layout.doAction(_model_Actions__WEBPACK_IMPORTED_MODULE_2__.Actions.deleteTab(node.getId()));\r\n        }\r\n        else {\r\n            onClick();\r\n        }\r\n    };\r\n    const onCloseMouseDown = (event) => {\r\n        event.stopPropagation();\r\n    };\r\n    react__WEBPACK_IMPORTED_MODULE_0__.useLayoutEffect(() => {\r\n        updateRect();\r\n        if (layout.getEditingTab() === node) {\r\n            contentRef.current.select();\r\n        }\r\n    });\r\n    const updateRect = () => {\r\n        var _a;\r\n        // record position of tab in node\r\n        const layoutRect = layout.getDomRect();\r\n        const r = (_a = selfRef.current) === null || _a === void 0 ? void 0 : _a.getBoundingClientRect();\r\n        if (r && layoutRect) {\r\n            node._setTabRect(new _Rect__WEBPACK_IMPORTED_MODULE_3__.Rect(r.left - layoutRect.left, r.top - layoutRect.top, r.width, r.height));\r\n        }\r\n    };\r\n    const onTextBoxMouseDown = (event) => {\r\n        // console.log(\"onTextBoxMouseDown\");\r\n        event.stopPropagation();\r\n    };\r\n    const onTextBoxKeyPress = (event) => {\r\n        if (event.code === 'Escape') {\r\n            // esc\r\n            layout.setEditingTab(undefined);\r\n        }\r\n        else if (event.code === 'Enter') {\r\n            // enter\r\n            layout.setEditingTab(undefined);\r\n            layout.doAction(_model_Actions__WEBPACK_IMPORTED_MODULE_2__.Actions.renameTab(node.getId(), event.target.value));\r\n        }\r\n    };\r\n    const cm = layout.getClassName;\r\n    let classNames = cm(_Types__WEBPACK_IMPORTED_MODULE_5__.CLASSES.FLEXLAYOUT__BORDER_BUTTON) + \" \" + cm(_Types__WEBPACK_IMPORTED_MODULE_5__.CLASSES.FLEXLAYOUT__BORDER_BUTTON_ + border);\r\n    if (selected) {\r\n        classNames += \" \" + cm(_Types__WEBPACK_IMPORTED_MODULE_5__.CLASSES.FLEXLAYOUT__BORDER_BUTTON__SELECTED);\r\n    }\r\n    else {\r\n        classNames += \" \" + cm(_Types__WEBPACK_IMPORTED_MODULE_5__.CLASSES.FLEXLAYOUT__BORDER_BUTTON__UNSELECTED);\r\n    }\r\n    if (node.getClassName() !== undefined) {\r\n        classNames += \" \" + node.getClassName();\r\n    }\r\n    let iconAngle = 0;\r\n    if (node.getModel().isEnableRotateBorderIcons() === false) {\r\n        if (border === \"left\") {\r\n            iconAngle = 90;\r\n        }\r\n        else if (border === \"right\") {\r\n            iconAngle = -90;\r\n        }\r\n    }\r\n    const renderState = (0,_Utils__WEBPACK_IMPORTED_MODULE_6__.getRenderStateEx)(layout, node, iconFactory, titleFactory, iconAngle);\r\n    let content = renderState.content ? (react__WEBPACK_IMPORTED_MODULE_0__.createElement(\"div\", { className: cm(_Types__WEBPACK_IMPORTED_MODULE_5__.CLASSES.FLEXLAYOUT__BORDER_BUTTON_CONTENT) }, renderState.content)) : null;\r\n    const leading = renderState.leading ? (react__WEBPACK_IMPORTED_MODULE_0__.createElement(\"div\", { className: cm(_Types__WEBPACK_IMPORTED_MODULE_5__.CLASSES.FLEXLAYOUT__BORDER_BUTTON_LEADING) }, renderState.leading)) : null;\r\n    if (layout.getEditingTab() === node) {\r\n        content = (react__WEBPACK_IMPORTED_MODULE_0__.createElement(\"input\", { ref: contentRef, className: cm(_Types__WEBPACK_IMPORTED_MODULE_5__.CLASSES.FLEXLAYOUT__TAB_BUTTON_TEXTBOX), \"data-layout-path\": path + \"/textbox\", type: \"text\", autoFocus: true, defaultValue: node.getName(), onKeyDown: onTextBoxKeyPress, onMouseDown: onTextBoxMouseDown, onTouchStart: onTextBoxMouseDown }));\r\n    }\r\n    if (node.isEnableClose()) {\r\n        const closeTitle = layout.i18nName(_I18nLabel__WEBPACK_IMPORTED_MODULE_1__.I18nLabel.Close_Tab);\r\n        renderState.buttons.push(react__WEBPACK_IMPORTED_MODULE_0__.createElement(\"div\", { key: \"close\", \"data-layout-path\": path + \"/button/close\", title: closeTitle, className: cm(_Types__WEBPACK_IMPORTED_MODULE_5__.CLASSES.FLEXLAYOUT__BORDER_BUTTON_TRAILING), onMouseDown: onCloseMouseDown, onClick: onClose, onTouchStart: onCloseMouseDown }, (typeof icons.close === \"function\") ? icons.close(node) : icons.close));\r\n    }\r\n    return (react__WEBPACK_IMPORTED_MODULE_0__.createElement(\"div\", { ref: selfRef, \"data-layout-path\": path, className: classNames, onMouseDown: onMouseDown, onClick: onAuxMouseClick, onAuxClick: onAuxMouseClick, onContextMenu: onContextMenu, onTouchStart: onMouseDown, title: node.getHelpText() },\r\n        leading,\r\n        content,\r\n        renderState.buttons));\r\n};\r\n\n\n//# sourceURL=webpack://FlexLayout/./src/view/BorderButton.tsx?");
 
 /***/ }),
 
@@ -316,7 +316,7 @@ eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpac
   \*************************************/
 /***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {
 
-eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpack_require__.d(__webpack_exports__, {\n/* harmony export */   \"FloatingWindow\": () => (/* binding */ FloatingWindow)\n/* harmony export */ });\n/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! react */ \"react\");\n/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(react__WEBPACK_IMPORTED_MODULE_0__);\n/* harmony import */ var react_dom__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! react-dom */ \"react-dom\");\n/* harmony import */ var react_dom__WEBPACK_IMPORTED_MODULE_1___default = /*#__PURE__*/__webpack_require__.n(react_dom__WEBPACK_IMPORTED_MODULE_1__);\n/* harmony import */ var _Types__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ../Types */ \"./src/Types.ts\");\n\r\n\r\n\r\n/** @internal */\r\nconst FloatingWindow = (props) => {\r\n    const { title, id, url, rect, onCloseWindow, onSetWindow, children } = props;\r\n    const popoutWindow = react__WEBPACK_IMPORTED_MODULE_0__.useRef(null);\r\n    const timerId = react__WEBPACK_IMPORTED_MODULE_0__.useRef(null);\r\n    const [content, setContent] = react__WEBPACK_IMPORTED_MODULE_0__.useState(undefined);\r\n    react__WEBPACK_IMPORTED_MODULE_0__.useLayoutEffect(() => {\r\n        if (timerId.current) {\r\n            clearTimeout(timerId.current);\r\n        }\r\n        let isMounted = true;\r\n        const r = rect;\r\n        // Make a local copy of the styles from the current window which will be passed into\r\n        // the floating window. window.document.styleSheets is mutable and we can't guarantee\r\n        // the styles will exist when 'popoutWindow.load' is called below.\r\n        const styles = Array.from(window.document.styleSheets).reduce((result, styleSheet) => {\r\n            let rules = undefined;\r\n            try {\r\n                rules = styleSheet.cssRules;\r\n            }\r\n            catch (e) {\r\n                // styleSheet.cssRules can throw security exception\r\n            }\r\n            try {\r\n                return [\r\n                    ...result,\r\n                    {\r\n                        href: styleSheet.href,\r\n                        type: styleSheet.type,\r\n                        rules: rules ? Array.from(rules).map(rule => rule.cssText) : null,\r\n                    }\r\n                ];\r\n            }\r\n            catch (e) {\r\n                return result;\r\n            }\r\n        }, []);\r\n        popoutWindow.current = window.open(url, id, `left=${r.x},top=${r.y},width=${r.width},height=${r.height}`);\r\n        if (popoutWindow.current !== null) {\r\n            onSetWindow(id, popoutWindow.current);\r\n            // listen for parent unloading to remove all popouts\r\n            window.addEventListener(\"beforeunload\", () => {\r\n                if (popoutWindow.current) {\r\n                    popoutWindow.current.close();\r\n                    popoutWindow.current = null;\r\n                }\r\n            });\r\n            popoutWindow.current.addEventListener(\"load\", () => {\r\n                if (isMounted) {\r\n                    const popoutDocument = popoutWindow.current.document;\r\n                    popoutDocument.title = title;\r\n                    const popoutContent = popoutDocument.createElement(\"div\");\r\n                    popoutContent.className = _Types__WEBPACK_IMPORTED_MODULE_2__.CLASSES.FLEXLAYOUT__FLOATING_WINDOW_CONTENT;\r\n                    popoutDocument.body.appendChild(popoutContent);\r\n                    copyStyles(popoutDocument, styles).then(() => {\r\n                        setContent(popoutContent);\r\n                    });\r\n                    // listen for popout unloading (needs to be after load for safari)\r\n                    popoutWindow.current.addEventListener(\"beforeunload\", () => {\r\n                        onCloseWindow(id);\r\n                    });\r\n                }\r\n            });\r\n        }\r\n        else {\r\n            console.warn(`Unable to open window ${url}`);\r\n            onCloseWindow(id);\r\n        }\r\n        return () => {\r\n            isMounted = false;\r\n            // delay so refresh will close window\r\n            timerId.current = setTimeout(() => {\r\n                if (popoutWindow.current) {\r\n                    popoutWindow.current.close();\r\n                    popoutWindow.current = null;\r\n                }\r\n            }, 0);\r\n        };\r\n    }, []);\r\n    if (content !== undefined) {\r\n        return (0,react_dom__WEBPACK_IMPORTED_MODULE_1__.createPortal)(children, content);\r\n    }\r\n    else {\r\n        return null;\r\n    }\r\n};\r\n/** @internal */\r\nfunction copyStyles(doc, styleSheets) {\r\n    const head = doc.head;\r\n    const promises = [];\r\n    for (const styleSheet of styleSheets) {\r\n        if (styleSheet.href) {\r\n            // prefer links since they will keep paths to images etc\r\n            const styleElement = doc.createElement(\"link\");\r\n            styleElement.type = styleSheet.type;\r\n            styleElement.rel = \"stylesheet\";\r\n            styleElement.href = styleSheet.href;\r\n            head.appendChild(styleElement);\r\n            promises.push(new Promise((resolve, reject) => {\r\n                styleElement.onload = () => resolve(true);\r\n            }));\r\n        }\r\n        else {\r\n            if (styleSheet.rules) {\r\n                const style = doc.createElement(\"style\");\r\n                for (const rule of styleSheet.rules) {\r\n                    style.appendChild(doc.createTextNode(rule));\r\n                }\r\n                head.appendChild(style);\r\n            }\r\n        }\r\n    }\r\n    return Promise.all(promises);\r\n}\r\n\n\n//# sourceURL=webpack://FlexLayout/./src/view/FloatingWindow.tsx?");
+eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpack_require__.d(__webpack_exports__, {\n/* harmony export */   \"FloatingWindow\": () => (/* binding */ FloatingWindow)\n/* harmony export */ });\n/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! react */ \"react\");\n/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(react__WEBPACK_IMPORTED_MODULE_0__);\n/* harmony import */ var react_dom__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! react-dom */ \"react-dom\");\n/* harmony import */ var react_dom__WEBPACK_IMPORTED_MODULE_1___default = /*#__PURE__*/__webpack_require__.n(react_dom__WEBPACK_IMPORTED_MODULE_1__);\n/* harmony import */ var _Rect__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ../Rect */ \"./src/Rect.ts\");\n/* harmony import */ var _Types__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! ../Types */ \"./src/Types.ts\");\n\r\n\r\n\r\n\r\n/** @internal */\r\nconst FloatingWindow = (props) => {\r\n    const { title, id, url, rect, onCloseWindow, onSetWindow, children } = props;\r\n    const popoutWindow = react__WEBPACK_IMPORTED_MODULE_0__.useRef(null);\r\n    const timerId = react__WEBPACK_IMPORTED_MODULE_0__.useRef(null);\r\n    const [content, setContent] = react__WEBPACK_IMPORTED_MODULE_0__.useState(undefined);\r\n    react__WEBPACK_IMPORTED_MODULE_0__.useLayoutEffect(() => {\r\n        if (timerId.current) {\r\n            clearTimeout(timerId.current);\r\n        }\r\n        let isMounted = true;\r\n        const r = rect || new _Rect__WEBPACK_IMPORTED_MODULE_2__.Rect(0, 0, 100, 100);\r\n        // Make a local copy of the styles from the current window which will be passed into\r\n        // the floating window. window.document.styleSheets is mutable and we can't guarantee\r\n        // the styles will exist when 'popoutWindow.load' is called below.\r\n        const styles = Array.from(window.document.styleSheets).reduce((result, styleSheet) => {\r\n            let rules = undefined;\r\n            try {\r\n                rules = styleSheet.cssRules;\r\n            }\r\n            catch (e) {\r\n                // styleSheet.cssRules can throw security exception\r\n            }\r\n            try {\r\n                return [\r\n                    ...result,\r\n                    {\r\n                        href: styleSheet.href,\r\n                        type: styleSheet.type,\r\n                        rules: rules ? Array.from(rules).map(rule => rule.cssText) : null,\r\n                    }\r\n                ];\r\n            }\r\n            catch (e) {\r\n                return result;\r\n            }\r\n        }, []);\r\n        popoutWindow.current = window.open(url, id, `left=${r.x},top=${r.y},width=${r.width},height=${r.height}`);\r\n        if (popoutWindow.current !== null) {\r\n            onSetWindow(id, popoutWindow.current);\r\n            // listen for parent unloading to remove all popouts\r\n            window.addEventListener(\"beforeunload\", () => {\r\n                if (popoutWindow.current) {\r\n                    popoutWindow.current.close();\r\n                    popoutWindow.current = null;\r\n                }\r\n            });\r\n            popoutWindow.current.addEventListener(\"load\", () => {\r\n                if (isMounted) {\r\n                    const popoutDocument = popoutWindow.current.document;\r\n                    popoutDocument.title = title;\r\n                    const popoutContent = popoutDocument.createElement(\"div\");\r\n                    popoutContent.className = _Types__WEBPACK_IMPORTED_MODULE_3__.CLASSES.FLEXLAYOUT__FLOATING_WINDOW_CONTENT;\r\n                    popoutDocument.body.appendChild(popoutContent);\r\n                    copyStyles(popoutDocument, styles).then(() => {\r\n                        setContent(popoutContent);\r\n                    });\r\n                    // listen for popout unloading (needs to be after load for safari)\r\n                    popoutWindow.current.addEventListener(\"beforeunload\", () => {\r\n                        onCloseWindow(id);\r\n                    });\r\n                }\r\n            });\r\n        }\r\n        else {\r\n            console.warn(`Unable to open window ${url}`);\r\n            onCloseWindow(id);\r\n        }\r\n        return () => {\r\n            isMounted = false;\r\n            // delay so refresh will close window\r\n            timerId.current = setTimeout(() => {\r\n                if (popoutWindow.current) {\r\n                    popoutWindow.current.close();\r\n                    popoutWindow.current = null;\r\n                }\r\n            }, 0);\r\n        };\r\n    }, []);\r\n    if (content !== undefined) {\r\n        return (0,react_dom__WEBPACK_IMPORTED_MODULE_1__.createPortal)(children, content);\r\n    }\r\n    else {\r\n        return null;\r\n    }\r\n};\r\n/** @internal */\r\nfunction copyStyles(doc, styleSheets) {\r\n    const head = doc.head;\r\n    const promises = [];\r\n    for (const styleSheet of styleSheets) {\r\n        if (styleSheet.href) {\r\n            // prefer links since they will keep paths to images etc\r\n            const styleElement = doc.createElement(\"link\");\r\n            styleElement.type = styleSheet.type;\r\n            styleElement.rel = \"stylesheet\";\r\n            styleElement.href = styleSheet.href;\r\n            head.appendChild(styleElement);\r\n            promises.push(new Promise((resolve) => {\r\n                styleElement.onload = () => resolve(true);\r\n            }));\r\n        }\r\n        else {\r\n            if (styleSheet.rules) {\r\n                const style = doc.createElement(\"style\");\r\n                for (const rule of styleSheet.rules) {\r\n                    style.appendChild(doc.createTextNode(rule));\r\n                }\r\n                head.appendChild(style);\r\n            }\r\n        }\r\n    }\r\n    return Promise.all(promises);\r\n}\r\n\n\n//# sourceURL=webpack://FlexLayout/./src/view/FloatingWindow.tsx?");
 
 /***/ }),
 
@@ -346,7 +346,7 @@ eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpac
   \*****************************/
 /***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {
 
-eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpack_require__.d(__webpack_exports__, {\n/* harmony export */   \"Layout\": () => (/* binding */ Layout)\n/* harmony export */ });\n/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! react */ \"react\");\n/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(react__WEBPACK_IMPORTED_MODULE_0__);\n/* harmony import */ var react_dom__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! react-dom */ \"react-dom\");\n/* harmony import */ var react_dom__WEBPACK_IMPORTED_MODULE_1___default = /*#__PURE__*/__webpack_require__.n(react_dom__WEBPACK_IMPORTED_MODULE_1__);\n/* harmony import */ var _DockLocation__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ../DockLocation */ \"./src/DockLocation.ts\");\n/* harmony import */ var _DragDrop__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! ../DragDrop */ \"./src/DragDrop.ts\");\n/* harmony import */ var _model_Actions__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(/*! ../model/Actions */ \"./src/model/Actions.ts\");\n/* harmony import */ var _model_BorderNode__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__(/*! ../model/BorderNode */ \"./src/model/BorderNode.ts\");\n/* harmony import */ var _model_SplitterNode__WEBPACK_IMPORTED_MODULE_6__ = __webpack_require__(/*! ../model/SplitterNode */ \"./src/model/SplitterNode.ts\");\n/* harmony import */ var _model_TabNode__WEBPACK_IMPORTED_MODULE_7__ = __webpack_require__(/*! ../model/TabNode */ \"./src/model/TabNode.ts\");\n/* harmony import */ var _model_TabSetNode__WEBPACK_IMPORTED_MODULE_8__ = __webpack_require__(/*! ../model/TabSetNode */ \"./src/model/TabSetNode.ts\");\n/* harmony import */ var _Rect__WEBPACK_IMPORTED_MODULE_9__ = __webpack_require__(/*! ../Rect */ \"./src/Rect.ts\");\n/* harmony import */ var _Types__WEBPACK_IMPORTED_MODULE_10__ = __webpack_require__(/*! ../Types */ \"./src/Types.ts\");\n/* harmony import */ var _BorderTabSet__WEBPACK_IMPORTED_MODULE_11__ = __webpack_require__(/*! ./BorderTabSet */ \"./src/view/BorderTabSet.tsx\");\n/* harmony import */ var _Splitter__WEBPACK_IMPORTED_MODULE_12__ = __webpack_require__(/*! ./Splitter */ \"./src/view/Splitter.tsx\");\n/* harmony import */ var _Tab__WEBPACK_IMPORTED_MODULE_13__ = __webpack_require__(/*! ./Tab */ \"./src/view/Tab.tsx\");\n/* harmony import */ var _TabSet__WEBPACK_IMPORTED_MODULE_14__ = __webpack_require__(/*! ./TabSet */ \"./src/view/TabSet.tsx\");\n/* harmony import */ var _FloatingWindow__WEBPACK_IMPORTED_MODULE_15__ = __webpack_require__(/*! ./FloatingWindow */ \"./src/view/FloatingWindow.tsx\");\n/* harmony import */ var _FloatingWindowTab__WEBPACK_IMPORTED_MODULE_16__ = __webpack_require__(/*! ./FloatingWindowTab */ \"./src/view/FloatingWindowTab.tsx\");\n/* harmony import */ var _TabFloating__WEBPACK_IMPORTED_MODULE_17__ = __webpack_require__(/*! ./TabFloating */ \"./src/view/TabFloating.tsx\");\n/* harmony import */ var _Orientation__WEBPACK_IMPORTED_MODULE_18__ = __webpack_require__(/*! ../Orientation */ \"./src/Orientation.ts\");\n/* harmony import */ var _Icons__WEBPACK_IMPORTED_MODULE_19__ = __webpack_require__(/*! ./Icons */ \"./src/view/Icons.tsx\");\n/* harmony import */ var _TabButtonStamp__WEBPACK_IMPORTED_MODULE_20__ = __webpack_require__(/*! ./TabButtonStamp */ \"./src/view/TabButtonStamp.tsx\");\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\nconst defaultIcons = {\r\n    close: react__WEBPACK_IMPORTED_MODULE_0__.createElement(_Icons__WEBPACK_IMPORTED_MODULE_19__.CloseIcon, null),\r\n    closeTabset: react__WEBPACK_IMPORTED_MODULE_0__.createElement(_Icons__WEBPACK_IMPORTED_MODULE_19__.CloseIcon, null),\r\n    popout: react__WEBPACK_IMPORTED_MODULE_0__.createElement(_Icons__WEBPACK_IMPORTED_MODULE_19__.PopoutIcon, null),\r\n    maximize: react__WEBPACK_IMPORTED_MODULE_0__.createElement(_Icons__WEBPACK_IMPORTED_MODULE_19__.MaximizeIcon, null),\r\n    restore: react__WEBPACK_IMPORTED_MODULE_0__.createElement(_Icons__WEBPACK_IMPORTED_MODULE_19__.RestoreIcon, null),\r\n    more: react__WEBPACK_IMPORTED_MODULE_0__.createElement(_Icons__WEBPACK_IMPORTED_MODULE_19__.OverflowIcon, null),\r\n};\r\n// Popout windows work in latest browsers based on webkit (Chrome, Opera, Safari, latest Edge) and Firefox. They do\r\n// not work on any version if IE or the original Edge browser\r\n// Assume any recent desktop browser not IE or original Edge will work\r\n/** @internal */\r\n// @ts-ignore\r\nconst isIEorEdge = typeof window !== \"undefined\" && (window.document.documentMode || /Edge\\//.test(window.navigator.userAgent));\r\n/** @internal */\r\nconst isDesktop = typeof window !== \"undefined\" && window.matchMedia && window.matchMedia(\"(hover: hover) and (pointer: fine)\").matches;\r\n/** @internal */\r\nconst defaultSupportsPopout = isDesktop && !isIEorEdge;\r\n/**\r\n * A React component that hosts a multi-tabbed layout\r\n */\r\nclass Layout extends react__WEBPACK_IMPORTED_MODULE_0__.Component {\r\n    constructor(props) {\r\n        super(props);\r\n        /** @internal */\r\n        this.firstMove = false;\r\n        /** @internal */\r\n        this.dragRectRendered = true;\r\n        /** @internal */\r\n        this.dragDivText = undefined;\r\n        /** @internal */\r\n        this.edgeRectLength = 100;\r\n        /** @internal */\r\n        this.edgeRectWidth = 10;\r\n        /** @internal */\r\n        this.onModelChange = (action) => {\r\n            this.forceUpdate();\r\n            if (this.props.onModelChange) {\r\n                this.props.onModelChange(this.props.model, action);\r\n            }\r\n        };\r\n        /** @internal */\r\n        this.updateRect = (domRect = this.getDomRect()) => {\r\n            const rect = new _Rect__WEBPACK_IMPORTED_MODULE_9__.Rect(0, 0, domRect.width, domRect.height);\r\n            if (!rect.equals(this.state.rect) && rect.width !== 0 && rect.height !== 0) {\r\n                this.setState({ rect });\r\n            }\r\n        };\r\n        /** @internal */\r\n        this.updateLayoutMetrics = () => {\r\n            if (this.findHeaderBarSizeRef.current) {\r\n                const headerBarSize = this.findHeaderBarSizeRef.current.getBoundingClientRect().height;\r\n                if (headerBarSize !== this.state.calculatedHeaderBarSize) {\r\n                    this.setState({ calculatedHeaderBarSize: headerBarSize });\r\n                }\r\n            }\r\n            if (this.findTabBarSizeRef.current) {\r\n                const tabBarSize = this.findTabBarSizeRef.current.getBoundingClientRect().height;\r\n                if (tabBarSize !== this.state.calculatedTabBarSize) {\r\n                    this.setState({ calculatedTabBarSize: tabBarSize });\r\n                }\r\n            }\r\n            if (this.findBorderBarSizeRef.current) {\r\n                const borderBarSize = this.findBorderBarSizeRef.current.getBoundingClientRect().height;\r\n                if (borderBarSize !== this.state.calculatedBorderBarSize) {\r\n                    this.setState({ calculatedBorderBarSize: borderBarSize });\r\n                }\r\n            }\r\n        };\r\n        /** @internal */\r\n        this.getClassName = (defaultClassName) => {\r\n            if (this.props.classNameMapper === undefined) {\r\n                return defaultClassName;\r\n            }\r\n            else {\r\n                return this.props.classNameMapper(defaultClassName);\r\n            }\r\n        };\r\n        /** @internal */\r\n        this.onCloseWindow = (id) => {\r\n            this.doAction(_model_Actions__WEBPACK_IMPORTED_MODULE_4__.Actions.unFloatTab(id));\r\n            try {\r\n                this.props.model.getNodeById(id)._setWindow(undefined);\r\n            }\r\n            catch (e) {\r\n                // catch incase it was a model change\r\n            }\r\n        };\r\n        /** @internal */\r\n        this.onSetWindow = (id, window) => {\r\n            this.props.model.getNodeById(id)._setWindow(window);\r\n        };\r\n        /** @internal */\r\n        this.onCancelAdd = () => {\r\n            var _a, _b;\r\n            const rootdiv = this.selfRef.current;\r\n            rootdiv.removeChild(this.dragDiv);\r\n            this.dragDiv = undefined;\r\n            this.hidePortal();\r\n            if (this.fnNewNodeDropped != null) {\r\n                this.fnNewNodeDropped();\r\n                this.fnNewNodeDropped = undefined;\r\n            }\r\n            try {\r\n                (_b = (_a = this.customDrop) === null || _a === void 0 ? void 0 : _a.invalidated) === null || _b === void 0 ? void 0 : _b.call(_a);\r\n            }\r\n            catch (e) {\r\n                console.error(e);\r\n            }\r\n            _DragDrop__WEBPACK_IMPORTED_MODULE_3__.DragDrop.instance.hideGlass();\r\n            this.newTabJson = undefined;\r\n            this.customDrop = undefined;\r\n        };\r\n        /** @internal */\r\n        this.onCancelDrag = (wasDragging) => {\r\n            var _a, _b;\r\n            if (wasDragging) {\r\n                const rootdiv = this.selfRef.current;\r\n                try {\r\n                    rootdiv.removeChild(this.outlineDiv);\r\n                }\r\n                catch (e) { }\r\n                try {\r\n                    rootdiv.removeChild(this.dragDiv);\r\n                }\r\n                catch (e) { }\r\n                this.dragDiv = undefined;\r\n                this.hidePortal();\r\n                this.setState({ showEdges: false });\r\n                if (this.fnNewNodeDropped != null) {\r\n                    this.fnNewNodeDropped();\r\n                    this.fnNewNodeDropped = undefined;\r\n                }\r\n                try {\r\n                    (_b = (_a = this.customDrop) === null || _a === void 0 ? void 0 : _a.invalidated) === null || _b === void 0 ? void 0 : _b.call(_a);\r\n                }\r\n                catch (e) {\r\n                    console.error(e);\r\n                }\r\n                _DragDrop__WEBPACK_IMPORTED_MODULE_3__.DragDrop.instance.hideGlass();\r\n                this.newTabJson = undefined;\r\n                this.customDrop = undefined;\r\n            }\r\n            this.setState({ showHiddenBorder: _DockLocation__WEBPACK_IMPORTED_MODULE_2__.DockLocation.CENTER });\r\n        };\r\n        /** @internal */\r\n        this.onDragDivMouseDown = (event) => {\r\n            event.preventDefault();\r\n            this.dragStart(event, this.dragDivText, _model_TabNode__WEBPACK_IMPORTED_MODULE_7__.TabNode._fromJson(this.newTabJson, this.props.model, false), true, undefined, undefined);\r\n        };\r\n        /** @internal */\r\n        this.dragStart = (event, dragDivText, node, allowDrag, onClick, onDoubleClick) => {\r\n            if (!allowDrag) {\r\n                _DragDrop__WEBPACK_IMPORTED_MODULE_3__.DragDrop.instance.startDrag(event, undefined, undefined, undefined, undefined, onClick, onDoubleClick, this.currentDocument, this.selfRef.current);\r\n            }\r\n            else {\r\n                this.dragNode = node;\r\n                this.dragDivText = dragDivText;\r\n                _DragDrop__WEBPACK_IMPORTED_MODULE_3__.DragDrop.instance.startDrag(event, this.onDragStart, this.onDragMove, this.onDragEnd, this.onCancelDrag, onClick, onDoubleClick, this.currentDocument, this.selfRef.current);\r\n            }\r\n        };\r\n        /** @internal */\r\n        this.dragRectRender = (text, node, json, onRendered) => {\r\n            let content;\r\n            if (text !== undefined) {\r\n                content = react__WEBPACK_IMPORTED_MODULE_0__.createElement(\"div\", { style: { whiteSpace: \"pre\" } }, text.replace(\"<br>\", \"\\n\"));\r\n            }\r\n            else {\r\n                if (node && node instanceof _model_TabNode__WEBPACK_IMPORTED_MODULE_7__.TabNode) {\r\n                    content = (react__WEBPACK_IMPORTED_MODULE_0__.createElement(_TabButtonStamp__WEBPACK_IMPORTED_MODULE_20__.TabButtonStamp, { node: node, layout: this, iconFactory: this.props.iconFactory, titleFactory: this.props.titleFactory }));\r\n                }\r\n            }\r\n            if (this.props.onRenderDragRect !== undefined) {\r\n                const customContent = this.props.onRenderDragRect(content, node, json);\r\n                if (customContent !== undefined) {\r\n                    content = customContent;\r\n                }\r\n            }\r\n            // hide div until the render is complete\r\n            this.dragDiv.style.visibility = \"hidden\";\r\n            this.dragRectRendered = false;\r\n            this.showPortal(react__WEBPACK_IMPORTED_MODULE_0__.createElement(DragRectRenderWrapper\r\n            // wait for it to be rendered\r\n            , { \r\n                // wait for it to be rendered\r\n                onRendered: () => {\r\n                    this.dragRectRendered = true;\r\n                    onRendered === null || onRendered === void 0 ? void 0 : onRendered();\r\n                } }, content), this.dragDiv);\r\n        };\r\n        /** @internal */\r\n        this.showPortal = (control, element) => {\r\n            const portal = (0,react_dom__WEBPACK_IMPORTED_MODULE_1__.createPortal)(control, element);\r\n            this.setState({ portal });\r\n        };\r\n        /** @internal */\r\n        this.hidePortal = () => {\r\n            this.setState({ portal: undefined });\r\n        };\r\n        /** @internal */\r\n        this.onDragStart = () => {\r\n            this.dropInfo = undefined;\r\n            this.customDrop = undefined;\r\n            const rootdiv = this.selfRef.current;\r\n            this.outlineDiv = this.currentDocument.createElement(\"div\");\r\n            this.outlineDiv.className = this.getClassName(_Types__WEBPACK_IMPORTED_MODULE_10__.CLASSES.FLEXLAYOUT__OUTLINE_RECT);\r\n            this.outlineDiv.style.visibility = \"hidden\";\r\n            rootdiv.appendChild(this.outlineDiv);\r\n            if (this.dragDiv == null) {\r\n                this.dragDiv = this.currentDocument.createElement(\"div\");\r\n                this.dragDiv.className = this.getClassName(_Types__WEBPACK_IMPORTED_MODULE_10__.CLASSES.FLEXLAYOUT__DRAG_RECT);\r\n                this.dragDiv.setAttribute(\"data-layout-path\", \"/drag-rectangle\");\r\n                this.dragRectRender(this.dragDivText, this.dragNode, this.newTabJson);\r\n                rootdiv.appendChild(this.dragDiv);\r\n            }\r\n            // add edge indicators\r\n            if (this.props.model.getMaximizedTabset() === undefined) {\r\n                this.setState({ showEdges: this.props.model.isEnableEdgeDock() });\r\n            }\r\n            if (this.dragNode !== undefined && this.dragNode instanceof _model_TabNode__WEBPACK_IMPORTED_MODULE_7__.TabNode && this.dragNode.getTabRect() !== undefined) {\r\n                this.dragNode.getTabRect().positionElement(this.outlineDiv);\r\n            }\r\n            this.firstMove = true;\r\n            return true;\r\n        };\r\n        /** @internal */\r\n        this.onDragMove = (event) => {\r\n            if (this.firstMove === false) {\r\n                const speed = this.props.model._getAttribute(\"tabDragSpeed\");\r\n                this.outlineDiv.style.transition = `top ${speed}s, left ${speed}s, width ${speed}s, height ${speed}s`;\r\n            }\r\n            this.firstMove = false;\r\n            const clientRect = this.selfRef.current.getBoundingClientRect();\r\n            const pos = {\r\n                x: event.clientX - clientRect.left,\r\n                y: event.clientY - clientRect.top,\r\n            };\r\n            this.checkForBorderToShow(pos.x, pos.y);\r\n            // keep it between left & right\r\n            const dragRect = this.dragDiv.getBoundingClientRect();\r\n            let newLeft = pos.x - dragRect.width / 2;\r\n            if (newLeft + dragRect.width > clientRect.width) {\r\n                newLeft = clientRect.width - dragRect.width;\r\n            }\r\n            newLeft = Math.max(0, newLeft);\r\n            this.dragDiv.style.left = newLeft + \"px\";\r\n            this.dragDiv.style.top = pos.y + 5 + \"px\";\r\n            if (this.dragRectRendered && this.dragDiv.style.visibility === \"hidden\") {\r\n                // make visible once the drag rect has been rendered\r\n                this.dragDiv.style.visibility = \"visible\";\r\n            }\r\n            let dropInfo = this.props.model._findDropTargetNode(this.dragNode, pos.x, pos.y);\r\n            if (dropInfo) {\r\n                if (this.props.onTabDrag) {\r\n                    this.handleCustomTabDrag(dropInfo, pos, event);\r\n                }\r\n                else {\r\n                    this.dropInfo = dropInfo;\r\n                    this.outlineDiv.className = this.getClassName(dropInfo.className);\r\n                    dropInfo.rect.positionElement(this.outlineDiv);\r\n                    this.outlineDiv.style.visibility = \"visible\";\r\n                }\r\n            }\r\n        };\r\n        /** @internal */\r\n        this.onDragEnd = (event) => {\r\n            const rootdiv = this.selfRef.current;\r\n            rootdiv.removeChild(this.outlineDiv);\r\n            rootdiv.removeChild(this.dragDiv);\r\n            this.dragDiv = undefined;\r\n            this.hidePortal();\r\n            this.setState({ showEdges: false });\r\n            _DragDrop__WEBPACK_IMPORTED_MODULE_3__.DragDrop.instance.hideGlass();\r\n            if (this.dropInfo) {\r\n                if (this.customDrop) {\r\n                    this.newTabJson = undefined;\r\n                    try {\r\n                        const { callback, dragging, over, x, y, location } = this.customDrop;\r\n                        callback(dragging, over, x, y, location);\r\n                        if (this.fnNewNodeDropped != null) {\r\n                            this.fnNewNodeDropped();\r\n                            this.fnNewNodeDropped = undefined;\r\n                        }\r\n                    }\r\n                    catch (e) {\r\n                        console.error(e);\r\n                    }\r\n                }\r\n                else if (this.newTabJson !== undefined) {\r\n                    const newNode = this.doAction(_model_Actions__WEBPACK_IMPORTED_MODULE_4__.Actions.addNode(this.newTabJson, this.dropInfo.node.getId(), this.dropInfo.location, this.dropInfo.index));\r\n                    if (this.fnNewNodeDropped != null) {\r\n                        this.fnNewNodeDropped(newNode, event);\r\n                        this.fnNewNodeDropped = undefined;\r\n                    }\r\n                    this.newTabJson = undefined;\r\n                }\r\n                else if (this.dragNode !== undefined) {\r\n                    this.doAction(_model_Actions__WEBPACK_IMPORTED_MODULE_4__.Actions.moveNode(this.dragNode.getId(), this.dropInfo.node.getId(), this.dropInfo.location, this.dropInfo.index));\r\n                }\r\n            }\r\n            this.setState({ showHiddenBorder: _DockLocation__WEBPACK_IMPORTED_MODULE_2__.DockLocation.CENTER });\r\n        };\r\n        this.props.model._setChangeListener(this.onModelChange);\r\n        this.tabIds = [];\r\n        this.selfRef = react__WEBPACK_IMPORTED_MODULE_0__.createRef();\r\n        this.findHeaderBarSizeRef = react__WEBPACK_IMPORTED_MODULE_0__.createRef();\r\n        this.findTabBarSizeRef = react__WEBPACK_IMPORTED_MODULE_0__.createRef();\r\n        this.findBorderBarSizeRef = react__WEBPACK_IMPORTED_MODULE_0__.createRef();\r\n        this.supportsPopout = props.supportsPopout !== undefined ? props.supportsPopout : defaultSupportsPopout;\r\n        this.popoutURL = props.popoutURL ? props.popoutURL : \"popout.html\";\r\n        this.icons = Object.assign(Object.assign({}, defaultIcons), props.icons);\r\n        this.state = {\r\n            rect: new _Rect__WEBPACK_IMPORTED_MODULE_9__.Rect(0, 0, 0, 0),\r\n            calculatedHeaderBarSize: 25,\r\n            calculatedTabBarSize: 26,\r\n            calculatedBorderBarSize: 30,\r\n            editingTab: undefined,\r\n            showHiddenBorder: _DockLocation__WEBPACK_IMPORTED_MODULE_2__.DockLocation.CENTER,\r\n            showEdges: false,\r\n        };\r\n        this.onDragEnter = this.onDragEnter.bind(this);\r\n    }\r\n    /** @internal */\r\n    styleFont(style) {\r\n        if (this.props.font) {\r\n            if (this.selfRef.current) {\r\n                if (this.props.font.size) {\r\n                    this.selfRef.current.style.setProperty(\"--font-size\", this.props.font.size);\r\n                }\r\n                if (this.props.font.family) {\r\n                    this.selfRef.current.style.setProperty(\"--font-family\", this.props.font.family);\r\n                }\r\n            }\r\n            if (this.props.font.style) {\r\n                style.fontStyle = this.props.font.style;\r\n            }\r\n            if (this.props.font.weight) {\r\n                style.fontWeight = this.props.font.weight;\r\n            }\r\n        }\r\n        return style;\r\n    }\r\n    /** @internal */\r\n    doAction(action) {\r\n        if (this.props.onAction !== undefined) {\r\n            const outcome = this.props.onAction(action);\r\n            if (outcome !== undefined) {\r\n                return this.props.model.doAction(outcome);\r\n            }\r\n            return undefined;\r\n        }\r\n        else {\r\n            return this.props.model.doAction(action);\r\n        }\r\n    }\r\n    /** @internal */\r\n    componentDidMount() {\r\n        this.updateRect();\r\n        this.updateLayoutMetrics();\r\n        // need to re-render if size changes\r\n        this.currentDocument = this.selfRef.current.ownerDocument;\r\n        this.currentWindow = this.currentDocument.defaultView;\r\n        this.resizeObserver = new ResizeObserver(entries => {\r\n            this.updateRect(entries[0].contentRect);\r\n        });\r\n        this.resizeObserver.observe(this.selfRef.current);\r\n    }\r\n    /** @internal */\r\n    componentDidUpdate() {\r\n        this.updateLayoutMetrics();\r\n        if (this.props.model !== this.previousModel) {\r\n            if (this.previousModel !== undefined) {\r\n                this.previousModel._setChangeListener(undefined); // stop listening to old model\r\n            }\r\n            this.props.model._setChangeListener(this.onModelChange);\r\n            this.previousModel = this.props.model;\r\n        }\r\n        // console.log(\"Layout time: \" + this.layoutTime + \"ms Render time: \" + (Date.now() - this.start) + \"ms\");\r\n    }\r\n    /** @internal */\r\n    getCurrentDocument() {\r\n        return this.currentDocument;\r\n    }\r\n    /** @internal */\r\n    getDomRect() {\r\n        return this.selfRef.current.getBoundingClientRect();\r\n    }\r\n    /** @internal */\r\n    getRootDiv() {\r\n        return this.selfRef.current;\r\n    }\r\n    /** @internal */\r\n    isSupportsPopout() {\r\n        return this.supportsPopout;\r\n    }\r\n    /** @internal */\r\n    isRealtimeResize() {\r\n        var _a;\r\n        return (_a = this.props.realtimeResize) !== null && _a !== void 0 ? _a : false;\r\n    }\r\n    /** @internal */\r\n    onTabDrag(...args) {\r\n        var _a, _b;\r\n        return (_b = (_a = this.props).onTabDrag) === null || _b === void 0 ? void 0 : _b.call(_a, ...args);\r\n    }\r\n    /** @internal */\r\n    getPopoutURL() {\r\n        return this.popoutURL;\r\n    }\r\n    /** @internal */\r\n    componentWillUnmount() {\r\n        var _a;\r\n        (_a = this.resizeObserver) === null || _a === void 0 ? void 0 : _a.unobserve(this.selfRef.current);\r\n    }\r\n    /** @internal */\r\n    setEditingTab(tabNode) {\r\n        this.setState({ editingTab: tabNode });\r\n    }\r\n    /** @internal */\r\n    getEditingTab() {\r\n        return this.state.editingTab;\r\n    }\r\n    /** @internal */\r\n    render() {\r\n        // first render will be used to find the size (via selfRef)\r\n        if (!this.selfRef.current) {\r\n            return (react__WEBPACK_IMPORTED_MODULE_0__.createElement(\"div\", { ref: this.selfRef, className: this.getClassName(_Types__WEBPACK_IMPORTED_MODULE_10__.CLASSES.FLEXLAYOUT__LAYOUT) }, this.metricsElements()));\r\n        }\r\n        this.props.model._setPointerFine(window && window.matchMedia && window.matchMedia(\"(pointer: fine)\").matches);\r\n        // this.start = Date.now();\r\n        const borderComponents = [];\r\n        const tabSetComponents = [];\r\n        const floatingWindows = [];\r\n        const tabComponents = {};\r\n        const splitterComponents = [];\r\n        const metrics = {\r\n            headerBarSize: this.state.calculatedHeaderBarSize,\r\n            tabBarSize: this.state.calculatedTabBarSize,\r\n            borderBarSize: this.state.calculatedBorderBarSize\r\n        };\r\n        this.props.model._setShowHiddenBorder(this.state.showHiddenBorder);\r\n        this.centerRect = this.props.model._layout(this.state.rect, metrics);\r\n        this.renderBorder(this.props.model.getBorderSet(), borderComponents, tabComponents, floatingWindows, splitterComponents);\r\n        this.renderChildren(\"\", this.props.model.getRoot(), tabSetComponents, tabComponents, floatingWindows, splitterComponents);\r\n        const nextTopIds = [];\r\n        const nextTopIdsMap = {};\r\n        // Keep any previous tabs in the same DOM order as before, removing any that have been deleted\r\n        for (const t of this.tabIds) {\r\n            if (tabComponents[t]) {\r\n                nextTopIds.push(t);\r\n                nextTopIdsMap[t] = t;\r\n            }\r\n        }\r\n        this.tabIds = nextTopIds;\r\n        // Add tabs that have been added to the DOM\r\n        for (const t of Object.keys(tabComponents)) {\r\n            if (!nextTopIdsMap[t]) {\r\n                this.tabIds.push(t);\r\n            }\r\n        }\r\n        const edges = [];\r\n        if (this.state.showEdges) {\r\n            const r = this.centerRect;\r\n            const length = this.edgeRectLength;\r\n            const width = this.edgeRectWidth;\r\n            const offset = this.edgeRectLength / 2;\r\n            const className = this.getClassName(_Types__WEBPACK_IMPORTED_MODULE_10__.CLASSES.FLEXLAYOUT__EDGE_RECT);\r\n            const radius = 50;\r\n            edges.push(react__WEBPACK_IMPORTED_MODULE_0__.createElement(\"div\", { key: \"North\", style: { top: r.y, left: r.x + r.width / 2 - offset, width: length, height: width, borderBottomLeftRadius: radius, borderBottomRightRadius: radius }, className: className + \" \" + this.getClassName(_Types__WEBPACK_IMPORTED_MODULE_10__.CLASSES.FLEXLAYOUT__EDGE_RECT_TOP) }));\r\n            edges.push(react__WEBPACK_IMPORTED_MODULE_0__.createElement(\"div\", { key: \"West\", style: { top: r.y + r.height / 2 - offset, left: r.x, width: width, height: length, borderTopRightRadius: radius, borderBottomRightRadius: radius }, className: className + \" \" + this.getClassName(_Types__WEBPACK_IMPORTED_MODULE_10__.CLASSES.FLEXLAYOUT__EDGE_RECT_LEFT) }));\r\n            edges.push(react__WEBPACK_IMPORTED_MODULE_0__.createElement(\"div\", { key: \"South\", style: { top: r.y + r.height - width, left: r.x + r.width / 2 - offset, width: length, height: width, borderTopLeftRadius: radius, borderTopRightRadius: radius }, className: className + \" \" + this.getClassName(_Types__WEBPACK_IMPORTED_MODULE_10__.CLASSES.FLEXLAYOUT__EDGE_RECT_BOTTOM) }));\r\n            edges.push(react__WEBPACK_IMPORTED_MODULE_0__.createElement(\"div\", { key: \"East\", style: { top: r.y + r.height / 2 - offset, left: r.x + r.width - width, width: width, height: length, borderTopLeftRadius: radius, borderBottomLeftRadius: radius }, className: className + \" \" + this.getClassName(_Types__WEBPACK_IMPORTED_MODULE_10__.CLASSES.FLEXLAYOUT__EDGE_RECT_RIGHT) }));\r\n        }\r\n        // this.layoutTime = (Date.now() - this.start);\r\n        return (react__WEBPACK_IMPORTED_MODULE_0__.createElement(\"div\", { ref: this.selfRef, className: this.getClassName(_Types__WEBPACK_IMPORTED_MODULE_10__.CLASSES.FLEXLAYOUT__LAYOUT), onDragEnter: this.props.onExternalDrag ? this.onDragEnter : undefined },\r\n            tabSetComponents,\r\n            this.tabIds.map((t) => {\r\n                return tabComponents[t];\r\n            }),\r\n            borderComponents,\r\n            splitterComponents,\r\n            edges,\r\n            floatingWindows,\r\n            this.metricsElements(),\r\n            this.state.portal));\r\n    }\r\n    /** @internal */\r\n    metricsElements() {\r\n        // used to measure the tab and border tab sizes\r\n        const fontStyle = this.styleFont({ visibility: \"hidden\" });\r\n        return (react__WEBPACK_IMPORTED_MODULE_0__.createElement(react__WEBPACK_IMPORTED_MODULE_0__.Fragment, null,\r\n            react__WEBPACK_IMPORTED_MODULE_0__.createElement(\"div\", { key: \"findHeaderBarSize\", ref: this.findHeaderBarSizeRef, style: fontStyle, className: this.getClassName(_Types__WEBPACK_IMPORTED_MODULE_10__.CLASSES.FLEXLAYOUT__TABSET_HEADER_SIZER) }, \"FindHeaderBarSize\"),\r\n            react__WEBPACK_IMPORTED_MODULE_0__.createElement(\"div\", { key: \"findTabBarSize\", ref: this.findTabBarSizeRef, style: fontStyle, className: this.getClassName(_Types__WEBPACK_IMPORTED_MODULE_10__.CLASSES.FLEXLAYOUT__TABSET_SIZER) }, \"FindTabBarSize\"),\r\n            react__WEBPACK_IMPORTED_MODULE_0__.createElement(\"div\", { key: \"findBorderBarSize\", ref: this.findBorderBarSizeRef, style: fontStyle, className: this.getClassName(_Types__WEBPACK_IMPORTED_MODULE_10__.CLASSES.FLEXLAYOUT__BORDER_SIZER) }, \"FindBorderBarSize\")));\r\n    }\r\n    /** @internal */\r\n    renderBorder(borderSet, borderComponents, tabComponents, floatingWindows, splitterComponents) {\r\n        for (const border of borderSet.getBorders()) {\r\n            const borderPath = `/border/${border.getLocation().getName()}`;\r\n            if (border.isShowing()) {\r\n                borderComponents.push(react__WEBPACK_IMPORTED_MODULE_0__.createElement(_BorderTabSet__WEBPACK_IMPORTED_MODULE_11__.BorderTabSet, { key: `border_${border.getLocation().getName()}`, path: borderPath, border: border, layout: this, iconFactory: this.props.iconFactory, titleFactory: this.props.titleFactory, icons: this.icons }));\r\n                const drawChildren = border._getDrawChildren();\r\n                let i = 0;\r\n                let tabCount = 0;\r\n                for (const child of drawChildren) {\r\n                    if (child instanceof _model_SplitterNode__WEBPACK_IMPORTED_MODULE_6__.SplitterNode) {\r\n                        let path = borderPath + \"/s\";\r\n                        splitterComponents.push(react__WEBPACK_IMPORTED_MODULE_0__.createElement(_Splitter__WEBPACK_IMPORTED_MODULE_12__.Splitter, { key: child.getId(), layout: this, node: child, path: path }));\r\n                    }\r\n                    else if (child instanceof _model_TabNode__WEBPACK_IMPORTED_MODULE_7__.TabNode) {\r\n                        let path = borderPath + \"/t\" + tabCount++;\r\n                        if (this.supportsPopout && child.isFloating()) {\r\n                            const rect = this._getScreenRect(child);\r\n                            const tabBorderWidth = child._getAttr(\"borderWidth\");\r\n                            const tabBorderHeight = child._getAttr(\"borderHeight\");\r\n                            if (tabBorderWidth !== -1 && border.getLocation().getOrientation() === _Orientation__WEBPACK_IMPORTED_MODULE_18__.Orientation.HORZ) {\r\n                                rect.width = tabBorderWidth;\r\n                            }\r\n                            else if (tabBorderHeight !== -1 && border.getLocation().getOrientation() === _Orientation__WEBPACK_IMPORTED_MODULE_18__.Orientation.VERT) {\r\n                                rect.height = tabBorderHeight;\r\n                            }\r\n                            floatingWindows.push(react__WEBPACK_IMPORTED_MODULE_0__.createElement(_FloatingWindow__WEBPACK_IMPORTED_MODULE_15__.FloatingWindow, { key: child.getId(), url: this.popoutURL, rect: rect, title: child.getName(), id: child.getId(), onSetWindow: this.onSetWindow, onCloseWindow: this.onCloseWindow },\r\n                                react__WEBPACK_IMPORTED_MODULE_0__.createElement(_FloatingWindowTab__WEBPACK_IMPORTED_MODULE_16__.FloatingWindowTab, { layout: this, node: child, factory: this.props.factory })));\r\n                            tabComponents[child.getId()] = react__WEBPACK_IMPORTED_MODULE_0__.createElement(_TabFloating__WEBPACK_IMPORTED_MODULE_17__.TabFloating, { key: child.getId(), layout: this, path: path, node: child, selected: i === border.getSelected() });\r\n                        }\r\n                        else {\r\n                            tabComponents[child.getId()] = react__WEBPACK_IMPORTED_MODULE_0__.createElement(_Tab__WEBPACK_IMPORTED_MODULE_13__.Tab, { key: child.getId(), layout: this, path: path, node: child, selected: i === border.getSelected(), factory: this.props.factory });\r\n                        }\r\n                    }\r\n                    i++;\r\n                }\r\n            }\r\n        }\r\n    }\r\n    /** @internal */\r\n    renderChildren(path, node, tabSetComponents, tabComponents, floatingWindows, splitterComponents) {\r\n        const drawChildren = node._getDrawChildren();\r\n        let splitterCount = 0;\r\n        let tabCount = 0;\r\n        let rowCount = 0;\r\n        for (const child of drawChildren) {\r\n            if (child instanceof _model_SplitterNode__WEBPACK_IMPORTED_MODULE_6__.SplitterNode) {\r\n                const newPath = path + \"/s\" + (splitterCount++);\r\n                splitterComponents.push(react__WEBPACK_IMPORTED_MODULE_0__.createElement(_Splitter__WEBPACK_IMPORTED_MODULE_12__.Splitter, { key: child.getId(), layout: this, path: newPath, node: child }));\r\n            }\r\n            else if (child instanceof _model_TabSetNode__WEBPACK_IMPORTED_MODULE_8__.TabSetNode) {\r\n                const newPath = path + \"/ts\" + (rowCount++);\r\n                tabSetComponents.push(react__WEBPACK_IMPORTED_MODULE_0__.createElement(_TabSet__WEBPACK_IMPORTED_MODULE_14__.TabSet, { key: child.getId(), layout: this, path: newPath, node: child, iconFactory: this.props.iconFactory, titleFactory: this.props.titleFactory, icons: this.icons }));\r\n                this.renderChildren(newPath, child, tabSetComponents, tabComponents, floatingWindows, splitterComponents);\r\n            }\r\n            else if (child instanceof _model_TabNode__WEBPACK_IMPORTED_MODULE_7__.TabNode) {\r\n                const newPath = path + \"/t\" + (tabCount++);\r\n                const selectedTab = child.getParent().getChildren()[child.getParent().getSelected()];\r\n                if (selectedTab === undefined) {\r\n                    // this should not happen!\r\n                    console.warn(\"undefined selectedTab should not happen\");\r\n                }\r\n                if (this.supportsPopout && child.isFloating()) {\r\n                    const rect = this._getScreenRect(child);\r\n                    floatingWindows.push(react__WEBPACK_IMPORTED_MODULE_0__.createElement(_FloatingWindow__WEBPACK_IMPORTED_MODULE_15__.FloatingWindow, { key: child.getId(), url: this.popoutURL, rect: rect, title: child.getName(), id: child.getId(), onSetWindow: this.onSetWindow, onCloseWindow: this.onCloseWindow },\r\n                        react__WEBPACK_IMPORTED_MODULE_0__.createElement(_FloatingWindowTab__WEBPACK_IMPORTED_MODULE_16__.FloatingWindowTab, { layout: this, node: child, factory: this.props.factory })));\r\n                    tabComponents[child.getId()] = react__WEBPACK_IMPORTED_MODULE_0__.createElement(_TabFloating__WEBPACK_IMPORTED_MODULE_17__.TabFloating, { key: child.getId(), layout: this, path: newPath, node: child, selected: child === selectedTab });\r\n                }\r\n                else {\r\n                    tabComponents[child.getId()] = react__WEBPACK_IMPORTED_MODULE_0__.createElement(_Tab__WEBPACK_IMPORTED_MODULE_13__.Tab, { key: child.getId(), layout: this, path: newPath, node: child, selected: child === selectedTab, factory: this.props.factory });\r\n                }\r\n            }\r\n            else {\r\n                // is row\r\n                const newPath = path + ((child.getOrientation() === _Orientation__WEBPACK_IMPORTED_MODULE_18__.Orientation.HORZ) ? \"/r\" : \"/c\") + (rowCount++);\r\n                this.renderChildren(newPath, child, tabSetComponents, tabComponents, floatingWindows, splitterComponents);\r\n            }\r\n        }\r\n    }\r\n    /** @internal */\r\n    _getScreenRect(node) {\r\n        const rect = node.getRect().clone();\r\n        const bodyRect = this.selfRef.current.getBoundingClientRect();\r\n        const navHeight = Math.min(80, this.currentWindow.outerHeight - this.currentWindow.innerHeight);\r\n        const navWidth = Math.min(80, this.currentWindow.outerWidth - this.currentWindow.innerWidth);\r\n        rect.x = rect.x + bodyRect.x + this.currentWindow.screenX + navWidth;\r\n        rect.y = rect.y + bodyRect.y + this.currentWindow.screenY + navHeight;\r\n        return rect;\r\n    }\r\n    /**\r\n     * Adds a new tab to the given tabset\r\n     * @param tabsetId the id of the tabset where the new tab will be added\r\n     * @param json the json for the new tab node\r\n     */\r\n    addTabToTabSet(tabsetId, json) {\r\n        const tabsetNode = this.props.model.getNodeById(tabsetId);\r\n        if (tabsetNode !== undefined) {\r\n            this.doAction(_model_Actions__WEBPACK_IMPORTED_MODULE_4__.Actions.addNode(json, tabsetId, _DockLocation__WEBPACK_IMPORTED_MODULE_2__.DockLocation.CENTER, -1));\r\n        }\r\n    }\r\n    /**\r\n     * Adds a new tab to the active tabset (if there is one)\r\n     * @param json the json for the new tab node\r\n     */\r\n    addTabToActiveTabSet(json) {\r\n        const tabsetNode = this.props.model.getActiveTabset();\r\n        if (tabsetNode !== undefined) {\r\n            this.doAction(_model_Actions__WEBPACK_IMPORTED_MODULE_4__.Actions.addNode(json, tabsetNode.getId(), _DockLocation__WEBPACK_IMPORTED_MODULE_2__.DockLocation.CENTER, -1));\r\n        }\r\n    }\r\n    /**\r\n     * Adds a new tab by dragging a labeled panel to the drop location, dragging starts immediatelly\r\n     * @param dragText the text to show on the drag panel\r\n     * @param json the json for the new tab node\r\n     * @param onDrop a callback to call when the drag is complete (node and event will be undefined if the drag was cancelled)\r\n     */\r\n    addTabWithDragAndDrop(dragText, json, onDrop) {\r\n        this.fnNewNodeDropped = onDrop;\r\n        this.newTabJson = json;\r\n        this.dragStart(undefined, dragText, _model_TabNode__WEBPACK_IMPORTED_MODULE_7__.TabNode._fromJson(json, this.props.model, false), true, undefined, undefined);\r\n    }\r\n    /**\r\n     * Move a tab/tabset using drag and drop\r\n     * @param node the tab or tabset to drag\r\n     * @param dragText the text to show on the drag panel\r\n     */\r\n    moveTabWithDragAndDrop(node, dragText) {\r\n        this.dragStart(undefined, dragText, node, true, undefined, undefined);\r\n    }\r\n    /**\r\n     * Adds a new tab by dragging a labeled panel to the drop location, dragging starts when you\r\n     * mouse down on the panel\r\n     *\r\n     * @param dragText the text to show on the drag panel\r\n     * @param json the json for the new tab node\r\n     * @param onDrop a callback to call when the drag is complete (node and event will be undefined if the drag was cancelled)\r\n     */\r\n    addTabWithDragAndDropIndirect(dragText, json, onDrop) {\r\n        this.fnNewNodeDropped = onDrop;\r\n        this.newTabJson = json;\r\n        _DragDrop__WEBPACK_IMPORTED_MODULE_3__.DragDrop.instance.addGlass(this.onCancelAdd);\r\n        this.dragDivText = dragText;\r\n        this.dragDiv = this.currentDocument.createElement(\"div\");\r\n        this.dragDiv.className = this.getClassName(_Types__WEBPACK_IMPORTED_MODULE_10__.CLASSES.FLEXLAYOUT__DRAG_RECT);\r\n        this.dragDiv.addEventListener(\"mousedown\", this.onDragDivMouseDown);\r\n        this.dragDiv.addEventListener(\"touchstart\", this.onDragDivMouseDown, { passive: false });\r\n        this.dragRectRender(this.dragDivText, undefined, this.newTabJson, () => {\r\n            if (this.dragDiv) {\r\n                // now it's been rendered into the dom it can be centered\r\n                this.dragDiv.style.visibility = \"visible\";\r\n                const domRect = this.dragDiv.getBoundingClientRect();\r\n                const r = new _Rect__WEBPACK_IMPORTED_MODULE_9__.Rect(0, 0, domRect === null || domRect === void 0 ? void 0 : domRect.width, domRect === null || domRect === void 0 ? void 0 : domRect.height);\r\n                r.centerInRect(this.state.rect);\r\n                this.dragDiv.setAttribute(\"data-layout-path\", \"/drag-rectangle\");\r\n                this.dragDiv.style.left = r.x + \"px\";\r\n                this.dragDiv.style.top = r.y + \"px\";\r\n            }\r\n        });\r\n        const rootdiv = this.selfRef.current;\r\n        rootdiv.appendChild(this.dragDiv);\r\n    }\r\n    /** @internal */\r\n    handleCustomTabDrag(dropInfo, pos, event) {\r\n        var _a, _b, _c;\r\n        let invalidated = (_a = this.customDrop) === null || _a === void 0 ? void 0 : _a.invalidated;\r\n        const currentCallback = (_b = this.customDrop) === null || _b === void 0 ? void 0 : _b.callback;\r\n        this.customDrop = undefined;\r\n        const dragging = this.newTabJson || (this.dragNode instanceof _model_TabNode__WEBPACK_IMPORTED_MODULE_7__.TabNode ? this.dragNode : undefined);\r\n        if (dragging && (dropInfo.node instanceof _model_TabSetNode__WEBPACK_IMPORTED_MODULE_8__.TabSetNode || dropInfo.node instanceof _model_BorderNode__WEBPACK_IMPORTED_MODULE_5__.BorderNode) && dropInfo.index === -1) {\r\n            const selected = dropInfo.node.getSelectedNode();\r\n            const tabRect = selected === null || selected === void 0 ? void 0 : selected.getRect();\r\n            if (selected && (tabRect === null || tabRect === void 0 ? void 0 : tabRect.contains(pos.x, pos.y))) {\r\n                let customDrop = undefined;\r\n                try {\r\n                    const dest = this.onTabDrag(dragging, selected, pos.x - tabRect.x, pos.y - tabRect.y, dropInfo.location, () => this.onDragMove(event));\r\n                    if (dest) {\r\n                        customDrop = {\r\n                            rect: new _Rect__WEBPACK_IMPORTED_MODULE_9__.Rect(dest.x + tabRect.x, dest.y + tabRect.y, dest.width, dest.height),\r\n                            callback: dest.callback,\r\n                            invalidated: dest.invalidated,\r\n                            dragging: dragging,\r\n                            over: selected,\r\n                            x: pos.x - tabRect.x,\r\n                            y: pos.y - tabRect.y,\r\n                            location: dropInfo.location,\r\n                            cursor: dest.cursor\r\n                        };\r\n                    }\r\n                }\r\n                catch (e) {\r\n                    console.error(e);\r\n                }\r\n                if ((customDrop === null || customDrop === void 0 ? void 0 : customDrop.callback) === currentCallback) {\r\n                    invalidated = undefined;\r\n                }\r\n                this.customDrop = customDrop;\r\n            }\r\n        }\r\n        this.dropInfo = dropInfo;\r\n        this.outlineDiv.className = this.getClassName(this.customDrop ? _Types__WEBPACK_IMPORTED_MODULE_10__.CLASSES.FLEXLAYOUT__OUTLINE_RECT : dropInfo.className);\r\n        if (this.customDrop) {\r\n            this.customDrop.rect.positionElement(this.outlineDiv);\r\n        }\r\n        else {\r\n            dropInfo.rect.positionElement(this.outlineDiv);\r\n        }\r\n        _DragDrop__WEBPACK_IMPORTED_MODULE_3__.DragDrop.instance.setGlassCursorOverride((_c = this.customDrop) === null || _c === void 0 ? void 0 : _c.cursor);\r\n        this.outlineDiv.style.visibility = \"visible\";\r\n        try {\r\n            invalidated === null || invalidated === void 0 ? void 0 : invalidated();\r\n        }\r\n        catch (e) {\r\n            console.error(e);\r\n        }\r\n    }\r\n    /** @internal */\r\n    onDragEnter(event) {\r\n        // DragDrop keeps track of number of dragenters minus the number of\r\n        // dragleaves. Only start a new drag if there isn't one already.\r\n        if (_DragDrop__WEBPACK_IMPORTED_MODULE_3__.DragDrop.instance.isDragging())\r\n            return;\r\n        const drag = this.props.onExternalDrag(event);\r\n        if (drag) {\r\n            // Mimic addTabWithDragAndDrop, but pass in DragEvent\r\n            this.fnNewNodeDropped = drag.onDrop;\r\n            this.newTabJson = drag.json;\r\n            this.dragStart(event, drag.dragText, _model_TabNode__WEBPACK_IMPORTED_MODULE_7__.TabNode._fromJson(drag.json, this.props.model, false), true, undefined, undefined);\r\n        }\r\n    }\r\n    /** @internal */\r\n    checkForBorderToShow(x, y) {\r\n        const r = this.props.model._getOuterInnerRects().outer;\r\n        const c = r.getCenter();\r\n        const margin = this.edgeRectWidth;\r\n        const offset = this.edgeRectLength / 2;\r\n        let overEdge = false;\r\n        if (this.props.model.isEnableEdgeDock() && this.state.showHiddenBorder === _DockLocation__WEBPACK_IMPORTED_MODULE_2__.DockLocation.CENTER) {\r\n            if ((y > c.y - offset && y < c.y + offset) ||\r\n                (x > c.x - offset && x < c.x + offset)) {\r\n                overEdge = true;\r\n            }\r\n        }\r\n        let location = _DockLocation__WEBPACK_IMPORTED_MODULE_2__.DockLocation.CENTER;\r\n        if (!overEdge) {\r\n            if (x <= r.x + margin) {\r\n                location = _DockLocation__WEBPACK_IMPORTED_MODULE_2__.DockLocation.LEFT;\r\n            }\r\n            else if (x >= r.getRight() - margin) {\r\n                location = _DockLocation__WEBPACK_IMPORTED_MODULE_2__.DockLocation.RIGHT;\r\n            }\r\n            else if (y <= r.y + margin) {\r\n                location = _DockLocation__WEBPACK_IMPORTED_MODULE_2__.DockLocation.TOP;\r\n            }\r\n            else if (y >= r.getBottom() - margin) {\r\n                location = _DockLocation__WEBPACK_IMPORTED_MODULE_2__.DockLocation.BOTTOM;\r\n            }\r\n        }\r\n        if (location !== this.state.showHiddenBorder) {\r\n            this.setState({ showHiddenBorder: location });\r\n        }\r\n    }\r\n    /** @internal */\r\n    maximize(tabsetNode) {\r\n        this.doAction(_model_Actions__WEBPACK_IMPORTED_MODULE_4__.Actions.maximizeToggle(tabsetNode.getId()));\r\n    }\r\n    /** @internal */\r\n    customizeTab(tabNode, renderValues) {\r\n        if (this.props.onRenderTab) {\r\n            this.props.onRenderTab(tabNode, renderValues);\r\n        }\r\n    }\r\n    /** @internal */\r\n    customizeTabSet(tabSetNode, renderValues) {\r\n        if (this.props.onRenderTabSet) {\r\n            this.props.onRenderTabSet(tabSetNode, renderValues);\r\n        }\r\n    }\r\n    /** @internal */\r\n    i18nName(id, param) {\r\n        let message;\r\n        if (this.props.i18nMapper) {\r\n            message = this.props.i18nMapper(id, param);\r\n        }\r\n        if (message === undefined) {\r\n            message = id + (param === undefined ? \"\" : param);\r\n        }\r\n        return message;\r\n    }\r\n    /** @internal */\r\n    getOnRenderFloatingTabPlaceholder() {\r\n        return this.props.onRenderFloatingTabPlaceholder;\r\n    }\r\n    /** @internal */\r\n    getShowOverflowMenu() {\r\n        return this.props.onShowOverflowMenu;\r\n    }\r\n    /** @internal */\r\n    getTabSetPlaceHolderCallback() {\r\n        return this.props.onTabSetPlaceHolder;\r\n    }\r\n    /** @internal */\r\n    showContextMenu(node, event) {\r\n        if (this.props.onContextMenu) {\r\n            this.props.onContextMenu(node, event);\r\n        }\r\n    }\r\n    /** @internal */\r\n    auxMouseClick(node, event) {\r\n        if (this.props.onAuxMouseClick) {\r\n            this.props.onAuxMouseClick(node, event);\r\n        }\r\n    }\r\n}\r\n/** @internal */\r\nconst DragRectRenderWrapper = (props) => {\r\n    react__WEBPACK_IMPORTED_MODULE_0__.useEffect(() => {\r\n        var _a;\r\n        (_a = props.onRendered) === null || _a === void 0 ? void 0 : _a.call(props);\r\n    }, [props]);\r\n    return (react__WEBPACK_IMPORTED_MODULE_0__.createElement(react__WEBPACK_IMPORTED_MODULE_0__.Fragment, null, props.children));\r\n};\r\n\n\n//# sourceURL=webpack://FlexLayout/./src/view/Layout.tsx?");
+eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpack_require__.d(__webpack_exports__, {\n/* harmony export */   \"Layout\": () => (/* binding */ Layout)\n/* harmony export */ });\n/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! react */ \"react\");\n/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(react__WEBPACK_IMPORTED_MODULE_0__);\n/* harmony import */ var react_dom__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! react-dom */ \"react-dom\");\n/* harmony import */ var react_dom__WEBPACK_IMPORTED_MODULE_1___default = /*#__PURE__*/__webpack_require__.n(react_dom__WEBPACK_IMPORTED_MODULE_1__);\n/* harmony import */ var _DockLocation__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ../DockLocation */ \"./src/DockLocation.ts\");\n/* harmony import */ var _DragDrop__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! ../DragDrop */ \"./src/DragDrop.ts\");\n/* harmony import */ var _model_Actions__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(/*! ../model/Actions */ \"./src/model/Actions.ts\");\n/* harmony import */ var _model_BorderNode__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__(/*! ../model/BorderNode */ \"./src/model/BorderNode.ts\");\n/* harmony import */ var _model_SplitterNode__WEBPACK_IMPORTED_MODULE_6__ = __webpack_require__(/*! ../model/SplitterNode */ \"./src/model/SplitterNode.ts\");\n/* harmony import */ var _model_TabNode__WEBPACK_IMPORTED_MODULE_7__ = __webpack_require__(/*! ../model/TabNode */ \"./src/model/TabNode.ts\");\n/* harmony import */ var _model_TabSetNode__WEBPACK_IMPORTED_MODULE_8__ = __webpack_require__(/*! ../model/TabSetNode */ \"./src/model/TabSetNode.ts\");\n/* harmony import */ var _Rect__WEBPACK_IMPORTED_MODULE_9__ = __webpack_require__(/*! ../Rect */ \"./src/Rect.ts\");\n/* harmony import */ var _Types__WEBPACK_IMPORTED_MODULE_10__ = __webpack_require__(/*! ../Types */ \"./src/Types.ts\");\n/* harmony import */ var _BorderTabSet__WEBPACK_IMPORTED_MODULE_11__ = __webpack_require__(/*! ./BorderTabSet */ \"./src/view/BorderTabSet.tsx\");\n/* harmony import */ var _Splitter__WEBPACK_IMPORTED_MODULE_12__ = __webpack_require__(/*! ./Splitter */ \"./src/view/Splitter.tsx\");\n/* harmony import */ var _Tab__WEBPACK_IMPORTED_MODULE_13__ = __webpack_require__(/*! ./Tab */ \"./src/view/Tab.tsx\");\n/* harmony import */ var _TabSet__WEBPACK_IMPORTED_MODULE_14__ = __webpack_require__(/*! ./TabSet */ \"./src/view/TabSet.tsx\");\n/* harmony import */ var _FloatingWindow__WEBPACK_IMPORTED_MODULE_15__ = __webpack_require__(/*! ./FloatingWindow */ \"./src/view/FloatingWindow.tsx\");\n/* harmony import */ var _FloatingWindowTab__WEBPACK_IMPORTED_MODULE_16__ = __webpack_require__(/*! ./FloatingWindowTab */ \"./src/view/FloatingWindowTab.tsx\");\n/* harmony import */ var _TabFloating__WEBPACK_IMPORTED_MODULE_17__ = __webpack_require__(/*! ./TabFloating */ \"./src/view/TabFloating.tsx\");\n/* harmony import */ var _Orientation__WEBPACK_IMPORTED_MODULE_18__ = __webpack_require__(/*! ../Orientation */ \"./src/Orientation.ts\");\n/* harmony import */ var _Icons__WEBPACK_IMPORTED_MODULE_19__ = __webpack_require__(/*! ./Icons */ \"./src/view/Icons.tsx\");\n/* harmony import */ var _TabButtonStamp__WEBPACK_IMPORTED_MODULE_20__ = __webpack_require__(/*! ./TabButtonStamp */ \"./src/view/TabButtonStamp.tsx\");\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\nconst defaultIcons = {\r\n    close: react__WEBPACK_IMPORTED_MODULE_0__.createElement(_Icons__WEBPACK_IMPORTED_MODULE_19__.CloseIcon, null),\r\n    closeTabset: react__WEBPACK_IMPORTED_MODULE_0__.createElement(_Icons__WEBPACK_IMPORTED_MODULE_19__.CloseIcon, null),\r\n    popout: react__WEBPACK_IMPORTED_MODULE_0__.createElement(_Icons__WEBPACK_IMPORTED_MODULE_19__.PopoutIcon, null),\r\n    maximize: react__WEBPACK_IMPORTED_MODULE_0__.createElement(_Icons__WEBPACK_IMPORTED_MODULE_19__.MaximizeIcon, null),\r\n    restore: react__WEBPACK_IMPORTED_MODULE_0__.createElement(_Icons__WEBPACK_IMPORTED_MODULE_19__.RestoreIcon, null),\r\n    more: react__WEBPACK_IMPORTED_MODULE_0__.createElement(_Icons__WEBPACK_IMPORTED_MODULE_19__.OverflowIcon, null),\r\n};\r\n// Popout windows work in latest browsers based on webkit (Chrome, Opera, Safari, latest Edge) and Firefox. They do\r\n// not work on any version if IE or the original Edge browser\r\n// Assume any recent desktop browser not IE or original Edge will work\r\n/** @internal */\r\n// @ts-ignore\r\nconst isIEorEdge = typeof window !== \"undefined\" && (window.document.documentMode || /Edge\\//.test(window.navigator.userAgent));\r\n/** @internal */\r\nconst isDesktop = typeof window !== \"undefined\" && window.matchMedia && window.matchMedia(\"(hover: hover) and (pointer: fine)\").matches;\r\n/** @internal */\r\nconst defaultSupportsPopout = isDesktop && !isIEorEdge;\r\n/**\r\n * A React component that hosts a multi-tabbed layout\r\n */\r\nclass Layout extends react__WEBPACK_IMPORTED_MODULE_0__.Component {\r\n    constructor(props) {\r\n        super(props);\r\n        /** @internal */\r\n        this.firstMove = false;\r\n        /** @internal */\r\n        this.dragRectRendered = true;\r\n        /** @internal */\r\n        this.dragDivText = undefined;\r\n        /** @internal */\r\n        this.edgeRectLength = 100;\r\n        /** @internal */\r\n        this.edgeRectWidth = 10;\r\n        /** @internal */\r\n        this.onModelChange = (action) => {\r\n            this.forceUpdate();\r\n            if (this.props.onModelChange) {\r\n                this.props.onModelChange(this.props.model, action);\r\n            }\r\n        };\r\n        /** @internal */\r\n        this.updateRect = (domRect) => {\r\n            if (!domRect) {\r\n                domRect = this.getDomRect();\r\n            }\r\n            if (!domRect) {\r\n                // no dom rect available, return.\r\n                return;\r\n            }\r\n            const rect = new _Rect__WEBPACK_IMPORTED_MODULE_9__.Rect(0, 0, domRect.width, domRect.height);\r\n            if (!rect.equals(this.state.rect) && rect.width !== 0 && rect.height !== 0) {\r\n                this.setState({ rect });\r\n            }\r\n        };\r\n        /** @internal */\r\n        this.updateLayoutMetrics = () => {\r\n            if (this.findHeaderBarSizeRef.current) {\r\n                const headerBarSize = this.findHeaderBarSizeRef.current.getBoundingClientRect().height;\r\n                if (headerBarSize !== this.state.calculatedHeaderBarSize) {\r\n                    this.setState({ calculatedHeaderBarSize: headerBarSize });\r\n                }\r\n            }\r\n            if (this.findTabBarSizeRef.current) {\r\n                const tabBarSize = this.findTabBarSizeRef.current.getBoundingClientRect().height;\r\n                if (tabBarSize !== this.state.calculatedTabBarSize) {\r\n                    this.setState({ calculatedTabBarSize: tabBarSize });\r\n                }\r\n            }\r\n            if (this.findBorderBarSizeRef.current) {\r\n                const borderBarSize = this.findBorderBarSizeRef.current.getBoundingClientRect().height;\r\n                if (borderBarSize !== this.state.calculatedBorderBarSize) {\r\n                    this.setState({ calculatedBorderBarSize: borderBarSize });\r\n                }\r\n            }\r\n        };\r\n        /** @internal */\r\n        this.getClassName = (defaultClassName) => {\r\n            if (this.props.classNameMapper === undefined) {\r\n                return defaultClassName;\r\n            }\r\n            else {\r\n                return this.props.classNameMapper(defaultClassName);\r\n            }\r\n        };\r\n        /** @internal */\r\n        this.onCloseWindow = (id) => {\r\n            this.doAction(_model_Actions__WEBPACK_IMPORTED_MODULE_4__.Actions.unFloatTab(id));\r\n            try {\r\n                this.props.model.getNodeById(id)._setWindow(undefined);\r\n            }\r\n            catch (e) {\r\n                // catch incase it was a model change\r\n            }\r\n        };\r\n        /** @internal */\r\n        this.onSetWindow = (id, window) => {\r\n            this.props.model.getNodeById(id)._setWindow(window);\r\n        };\r\n        /** @internal */\r\n        this.onCancelAdd = () => {\r\n            var _a, _b;\r\n            const rootdiv = this.selfRef.current;\r\n            if (rootdiv && this.dragDiv) {\r\n                rootdiv.removeChild(this.dragDiv);\r\n            }\r\n            this.dragDiv = undefined;\r\n            this.hidePortal();\r\n            if (this.fnNewNodeDropped != null) {\r\n                this.fnNewNodeDropped();\r\n                this.fnNewNodeDropped = undefined;\r\n            }\r\n            try {\r\n                (_b = (_a = this.customDrop) === null || _a === void 0 ? void 0 : _a.invalidated) === null || _b === void 0 ? void 0 : _b.call(_a);\r\n            }\r\n            catch (e) {\r\n                console.error(e);\r\n            }\r\n            _DragDrop__WEBPACK_IMPORTED_MODULE_3__.DragDrop.instance.hideGlass();\r\n            this.newTabJson = undefined;\r\n            this.customDrop = undefined;\r\n        };\r\n        /** @internal */\r\n        this.onCancelDrag = (wasDragging) => {\r\n            var _a, _b;\r\n            if (wasDragging) {\r\n                const rootdiv = this.selfRef.current;\r\n                const outlineDiv = this.outlineDiv;\r\n                if (rootdiv && outlineDiv) {\r\n                    try {\r\n                        rootdiv.removeChild(outlineDiv);\r\n                    }\r\n                    catch (e) { }\r\n                }\r\n                const dragDiv = this.dragDiv;\r\n                if (rootdiv && dragDiv) {\r\n                    try {\r\n                        rootdiv.removeChild(dragDiv);\r\n                    }\r\n                    catch (e) { }\r\n                }\r\n                this.dragDiv = undefined;\r\n                this.hidePortal();\r\n                this.setState({ showEdges: false });\r\n                if (this.fnNewNodeDropped != null) {\r\n                    this.fnNewNodeDropped();\r\n                    this.fnNewNodeDropped = undefined;\r\n                }\r\n                try {\r\n                    (_b = (_a = this.customDrop) === null || _a === void 0 ? void 0 : _a.invalidated) === null || _b === void 0 ? void 0 : _b.call(_a);\r\n                }\r\n                catch (e) {\r\n                    console.error(e);\r\n                }\r\n                _DragDrop__WEBPACK_IMPORTED_MODULE_3__.DragDrop.instance.hideGlass();\r\n                this.newTabJson = undefined;\r\n                this.customDrop = undefined;\r\n            }\r\n            this.setState({ showHiddenBorder: _DockLocation__WEBPACK_IMPORTED_MODULE_2__.DockLocation.CENTER });\r\n        };\r\n        /** @internal */\r\n        this.onDragDivMouseDown = (event) => {\r\n            event.preventDefault();\r\n            this.dragStart(event, this.dragDivText, _model_TabNode__WEBPACK_IMPORTED_MODULE_7__.TabNode._fromJson(this.newTabJson, this.props.model, false), true, undefined, undefined);\r\n        };\r\n        /** @internal */\r\n        this.dragStart = (event, dragDivText, node, allowDrag, onClick, onDoubleClick) => {\r\n            var _a, _b;\r\n            if (!allowDrag) {\r\n                _DragDrop__WEBPACK_IMPORTED_MODULE_3__.DragDrop.instance.startDrag(event, undefined, undefined, undefined, undefined, onClick, onDoubleClick, this.currentDocument, (_a = this.selfRef.current) !== null && _a !== void 0 ? _a : undefined);\r\n            }\r\n            else {\r\n                this.dragNode = node;\r\n                this.dragDivText = dragDivText;\r\n                _DragDrop__WEBPACK_IMPORTED_MODULE_3__.DragDrop.instance.startDrag(event, this.onDragStart, this.onDragMove, this.onDragEnd, this.onCancelDrag, onClick, onDoubleClick, this.currentDocument, (_b = this.selfRef.current) !== null && _b !== void 0 ? _b : undefined);\r\n            }\r\n        };\r\n        /** @internal */\r\n        this.dragRectRender = (text, node, json, onRendered) => {\r\n            let content;\r\n            if (text !== undefined) {\r\n                content = react__WEBPACK_IMPORTED_MODULE_0__.createElement(\"div\", { style: { whiteSpace: \"pre\" } }, text.replace(\"<br>\", \"\\n\"));\r\n            }\r\n            else {\r\n                if (node && node instanceof _model_TabNode__WEBPACK_IMPORTED_MODULE_7__.TabNode) {\r\n                    content = (react__WEBPACK_IMPORTED_MODULE_0__.createElement(_TabButtonStamp__WEBPACK_IMPORTED_MODULE_20__.TabButtonStamp, { node: node, layout: this, iconFactory: this.props.iconFactory, titleFactory: this.props.titleFactory }));\r\n                }\r\n            }\r\n            if (this.props.onRenderDragRect !== undefined) {\r\n                const customContent = this.props.onRenderDragRect(content, node, json);\r\n                if (customContent !== undefined) {\r\n                    content = customContent;\r\n                }\r\n            }\r\n            // hide div until the render is complete\r\n            this.dragRectRendered = false;\r\n            const dragDiv = this.dragDiv;\r\n            if (dragDiv) {\r\n                dragDiv.style.visibility = \"hidden\";\r\n                this.showPortal(react__WEBPACK_IMPORTED_MODULE_0__.createElement(DragRectRenderWrapper\r\n                // wait for it to be rendered\r\n                , { \r\n                    // wait for it to be rendered\r\n                    onRendered: () => {\r\n                        this.dragRectRendered = true;\r\n                        onRendered === null || onRendered === void 0 ? void 0 : onRendered();\r\n                    } }, content), dragDiv);\r\n            }\r\n        };\r\n        /** @internal */\r\n        this.showPortal = (control, element) => {\r\n            const portal = (0,react_dom__WEBPACK_IMPORTED_MODULE_1__.createPortal)(control, element);\r\n            this.setState({ portal });\r\n        };\r\n        /** @internal */\r\n        this.hidePortal = () => {\r\n            this.setState({ portal: undefined });\r\n        };\r\n        /** @internal */\r\n        this.onDragStart = () => {\r\n            var _a;\r\n            this.dropInfo = undefined;\r\n            this.customDrop = undefined;\r\n            const rootdiv = this.selfRef.current;\r\n            this.outlineDiv = this.currentDocument.createElement(\"div\");\r\n            this.outlineDiv.className = this.getClassName(_Types__WEBPACK_IMPORTED_MODULE_10__.CLASSES.FLEXLAYOUT__OUTLINE_RECT);\r\n            this.outlineDiv.style.visibility = \"hidden\";\r\n            if (rootdiv) {\r\n                rootdiv.appendChild(this.outlineDiv);\r\n            }\r\n            if (this.dragDiv == null) {\r\n                this.dragDiv = this.currentDocument.createElement(\"div\");\r\n                this.dragDiv.className = this.getClassName(_Types__WEBPACK_IMPORTED_MODULE_10__.CLASSES.FLEXLAYOUT__DRAG_RECT);\r\n                this.dragDiv.setAttribute(\"data-layout-path\", \"/drag-rectangle\");\r\n                this.dragRectRender(this.dragDivText, this.dragNode, this.newTabJson);\r\n                if (rootdiv) {\r\n                    rootdiv.appendChild(this.dragDiv);\r\n                }\r\n            }\r\n            // add edge indicators\r\n            if (this.props.model.getMaximizedTabset() === undefined) {\r\n                this.setState({ showEdges: this.props.model.isEnableEdgeDock() });\r\n            }\r\n            if (this.dragNode && this.outlineDiv && this.dragNode instanceof _model_TabNode__WEBPACK_IMPORTED_MODULE_7__.TabNode && this.dragNode.getTabRect() !== undefined) {\r\n                (_a = this.dragNode.getTabRect()) === null || _a === void 0 ? void 0 : _a.positionElement(this.outlineDiv);\r\n            }\r\n            this.firstMove = true;\r\n            return true;\r\n        };\r\n        /** @internal */\r\n        this.onDragMove = (event) => {\r\n            var _a, _b, _c, _d, _e, _f, _g;\r\n            if (this.firstMove === false) {\r\n                const speed = this.props.model._getAttribute(\"tabDragSpeed\");\r\n                if (this.outlineDiv) {\r\n                    this.outlineDiv.style.transition = `top ${speed}s, left ${speed}s, width ${speed}s, height ${speed}s`;\r\n                }\r\n            }\r\n            this.firstMove = false;\r\n            const clientRect = (_a = this.selfRef.current) === null || _a === void 0 ? void 0 : _a.getBoundingClientRect();\r\n            const pos = {\r\n                x: event.clientX - ((_b = clientRect === null || clientRect === void 0 ? void 0 : clientRect.left) !== null && _b !== void 0 ? _b : 0),\r\n                y: event.clientY - ((_c = clientRect === null || clientRect === void 0 ? void 0 : clientRect.top) !== null && _c !== void 0 ? _c : 0),\r\n            };\r\n            this.checkForBorderToShow(pos.x, pos.y);\r\n            // keep it between left & right\r\n            const dragRect = (_e = (_d = this.dragDiv) === null || _d === void 0 ? void 0 : _d.getBoundingClientRect()) !== null && _e !== void 0 ? _e : new DOMRect(0, 0, 100, 100);\r\n            let newLeft = pos.x - dragRect.width / 2;\r\n            if (newLeft + dragRect.width > ((_f = clientRect === null || clientRect === void 0 ? void 0 : clientRect.width) !== null && _f !== void 0 ? _f : 0)) {\r\n                newLeft = ((_g = clientRect === null || clientRect === void 0 ? void 0 : clientRect.width) !== null && _g !== void 0 ? _g : 0) - dragRect.width;\r\n            }\r\n            newLeft = Math.max(0, newLeft);\r\n            if (this.dragDiv) {\r\n                this.dragDiv.style.left = newLeft + \"px\";\r\n                this.dragDiv.style.top = pos.y + 5 + \"px\";\r\n                if (this.dragRectRendered && this.dragDiv.style.visibility === \"hidden\") {\r\n                    // make visible once the drag rect has been rendered\r\n                    this.dragDiv.style.visibility = \"visible\";\r\n                }\r\n            }\r\n            let dropInfo = this.props.model._findDropTargetNode(this.dragNode, pos.x, pos.y);\r\n            if (dropInfo) {\r\n                if (this.props.onTabDrag) {\r\n                    this.handleCustomTabDrag(dropInfo, pos, event);\r\n                }\r\n                else {\r\n                    this.dropInfo = dropInfo;\r\n                    if (this.outlineDiv) {\r\n                        this.outlineDiv.className = this.getClassName(dropInfo.className);\r\n                        dropInfo.rect.positionElement(this.outlineDiv);\r\n                        this.outlineDiv.style.visibility = \"visible\";\r\n                    }\r\n                }\r\n            }\r\n        };\r\n        /** @internal */\r\n        this.onDragEnd = (event) => {\r\n            const rootdiv = this.selfRef.current;\r\n            if (rootdiv) {\r\n                if (this.outlineDiv) {\r\n                    rootdiv.removeChild(this.outlineDiv);\r\n                }\r\n                if (this.dragDiv) {\r\n                    rootdiv.removeChild(this.dragDiv);\r\n                }\r\n            }\r\n            this.dragDiv = undefined;\r\n            this.hidePortal();\r\n            this.setState({ showEdges: false });\r\n            _DragDrop__WEBPACK_IMPORTED_MODULE_3__.DragDrop.instance.hideGlass();\r\n            if (this.dropInfo) {\r\n                if (this.customDrop) {\r\n                    this.newTabJson = undefined;\r\n                    try {\r\n                        const { callback, dragging, over, x, y, location } = this.customDrop;\r\n                        callback(dragging, over, x, y, location);\r\n                        if (this.fnNewNodeDropped != null) {\r\n                            this.fnNewNodeDropped();\r\n                            this.fnNewNodeDropped = undefined;\r\n                        }\r\n                    }\r\n                    catch (e) {\r\n                        console.error(e);\r\n                    }\r\n                }\r\n                else if (this.newTabJson !== undefined) {\r\n                    const newNode = this.doAction(_model_Actions__WEBPACK_IMPORTED_MODULE_4__.Actions.addNode(this.newTabJson, this.dropInfo.node.getId(), this.dropInfo.location, this.dropInfo.index));\r\n                    if (this.fnNewNodeDropped != null) {\r\n                        this.fnNewNodeDropped(newNode, event);\r\n                        this.fnNewNodeDropped = undefined;\r\n                    }\r\n                    this.newTabJson = undefined;\r\n                }\r\n                else if (this.dragNode !== undefined) {\r\n                    this.doAction(_model_Actions__WEBPACK_IMPORTED_MODULE_4__.Actions.moveNode(this.dragNode.getId(), this.dropInfo.node.getId(), this.dropInfo.location, this.dropInfo.index));\r\n                }\r\n            }\r\n            this.setState({ showHiddenBorder: _DockLocation__WEBPACK_IMPORTED_MODULE_2__.DockLocation.CENTER });\r\n        };\r\n        this.props.model._setChangeListener(this.onModelChange);\r\n        this.tabIds = [];\r\n        this.selfRef = react__WEBPACK_IMPORTED_MODULE_0__.createRef();\r\n        this.findHeaderBarSizeRef = react__WEBPACK_IMPORTED_MODULE_0__.createRef();\r\n        this.findTabBarSizeRef = react__WEBPACK_IMPORTED_MODULE_0__.createRef();\r\n        this.findBorderBarSizeRef = react__WEBPACK_IMPORTED_MODULE_0__.createRef();\r\n        this.supportsPopout = props.supportsPopout !== undefined ? props.supportsPopout : defaultSupportsPopout;\r\n        this.popoutURL = props.popoutURL ? props.popoutURL : \"popout.html\";\r\n        this.icons = Object.assign(Object.assign({}, defaultIcons), props.icons);\r\n        this.state = {\r\n            rect: new _Rect__WEBPACK_IMPORTED_MODULE_9__.Rect(0, 0, 0, 0),\r\n            calculatedHeaderBarSize: 25,\r\n            calculatedTabBarSize: 26,\r\n            calculatedBorderBarSize: 30,\r\n            editingTab: undefined,\r\n            showHiddenBorder: _DockLocation__WEBPACK_IMPORTED_MODULE_2__.DockLocation.CENTER,\r\n            showEdges: false,\r\n        };\r\n        this.onDragEnter = this.onDragEnter.bind(this);\r\n    }\r\n    /** @internal */\r\n    styleFont(style) {\r\n        if (this.props.font) {\r\n            if (this.selfRef.current) {\r\n                if (this.props.font.size) {\r\n                    this.selfRef.current.style.setProperty(\"--font-size\", this.props.font.size);\r\n                }\r\n                if (this.props.font.family) {\r\n                    this.selfRef.current.style.setProperty(\"--font-family\", this.props.font.family);\r\n                }\r\n            }\r\n            if (this.props.font.style) {\r\n                style.fontStyle = this.props.font.style;\r\n            }\r\n            if (this.props.font.weight) {\r\n                style.fontWeight = this.props.font.weight;\r\n            }\r\n        }\r\n        return style;\r\n    }\r\n    /** @internal */\r\n    doAction(action) {\r\n        if (this.props.onAction !== undefined) {\r\n            const outcome = this.props.onAction(action);\r\n            if (outcome !== undefined) {\r\n                return this.props.model.doAction(outcome);\r\n            }\r\n            return undefined;\r\n        }\r\n        else {\r\n            return this.props.model.doAction(action);\r\n        }\r\n    }\r\n    /** @internal */\r\n    componentDidMount() {\r\n        this.updateRect();\r\n        this.updateLayoutMetrics();\r\n        // need to re-render if size changes\r\n        this.currentDocument = this.selfRef.current.ownerDocument;\r\n        this.currentWindow = this.currentDocument.defaultView;\r\n        this.resizeObserver = new ResizeObserver(entries => {\r\n            this.updateRect(entries[0].contentRect);\r\n        });\r\n        const selfRefCurr = this.selfRef.current;\r\n        if (selfRefCurr) {\r\n            this.resizeObserver.observe(selfRefCurr);\r\n        }\r\n    }\r\n    /** @internal */\r\n    componentDidUpdate() {\r\n        this.updateLayoutMetrics();\r\n        if (this.props.model !== this.previousModel) {\r\n            if (this.previousModel !== undefined) {\r\n                this.previousModel._setChangeListener(undefined); // stop listening to old model\r\n            }\r\n            this.props.model._setChangeListener(this.onModelChange);\r\n            this.previousModel = this.props.model;\r\n        }\r\n        // console.log(\"Layout time: \" + this.layoutTime + \"ms Render time: \" + (Date.now() - this.start) + \"ms\");\r\n    }\r\n    /** @internal */\r\n    getCurrentDocument() {\r\n        return this.currentDocument;\r\n    }\r\n    /** @internal */\r\n    getDomRect() {\r\n        var _a;\r\n        return (_a = this.selfRef.current) === null || _a === void 0 ? void 0 : _a.getBoundingClientRect();\r\n    }\r\n    /** @internal */\r\n    getRootDiv() {\r\n        return this.selfRef.current;\r\n    }\r\n    /** @internal */\r\n    isSupportsPopout() {\r\n        return this.supportsPopout;\r\n    }\r\n    /** @internal */\r\n    isRealtimeResize() {\r\n        var _a;\r\n        return (_a = this.props.realtimeResize) !== null && _a !== void 0 ? _a : false;\r\n    }\r\n    /** @internal */\r\n    onTabDrag(...args) {\r\n        var _a, _b;\r\n        return (_b = (_a = this.props).onTabDrag) === null || _b === void 0 ? void 0 : _b.call(_a, ...args);\r\n    }\r\n    /** @internal */\r\n    getPopoutURL() {\r\n        return this.popoutURL;\r\n    }\r\n    /** @internal */\r\n    componentWillUnmount() {\r\n        var _a;\r\n        const selfRefCurr = this.selfRef.current;\r\n        if (selfRefCurr) {\r\n            (_a = this.resizeObserver) === null || _a === void 0 ? void 0 : _a.unobserve(selfRefCurr);\r\n        }\r\n    }\r\n    /** @internal */\r\n    setEditingTab(tabNode) {\r\n        this.setState({ editingTab: tabNode });\r\n    }\r\n    /** @internal */\r\n    getEditingTab() {\r\n        return this.state.editingTab;\r\n    }\r\n    /** @internal */\r\n    render() {\r\n        // first render will be used to find the size (via selfRef)\r\n        if (!this.selfRef.current) {\r\n            return (react__WEBPACK_IMPORTED_MODULE_0__.createElement(\"div\", { ref: this.selfRef, className: this.getClassName(_Types__WEBPACK_IMPORTED_MODULE_10__.CLASSES.FLEXLAYOUT__LAYOUT) }, this.metricsElements()));\r\n        }\r\n        this.props.model._setPointerFine(window && window.matchMedia && window.matchMedia(\"(pointer: fine)\").matches);\r\n        // this.start = Date.now();\r\n        const borderComponents = [];\r\n        const tabSetComponents = [];\r\n        const floatingWindows = [];\r\n        const tabComponents = {};\r\n        const splitterComponents = [];\r\n        const metrics = {\r\n            headerBarSize: this.state.calculatedHeaderBarSize,\r\n            tabBarSize: this.state.calculatedTabBarSize,\r\n            borderBarSize: this.state.calculatedBorderBarSize\r\n        };\r\n        this.props.model._setShowHiddenBorder(this.state.showHiddenBorder);\r\n        this.centerRect = this.props.model._layout(this.state.rect, metrics);\r\n        this.renderBorder(this.props.model.getBorderSet(), borderComponents, tabComponents, floatingWindows, splitterComponents);\r\n        this.renderChildren(\"\", this.props.model.getRoot(), tabSetComponents, tabComponents, floatingWindows, splitterComponents);\r\n        const nextTopIds = [];\r\n        const nextTopIdsMap = {};\r\n        // Keep any previous tabs in the same DOM order as before, removing any that have been deleted\r\n        for (const t of this.tabIds) {\r\n            if (tabComponents[t]) {\r\n                nextTopIds.push(t);\r\n                nextTopIdsMap[t] = t;\r\n            }\r\n        }\r\n        this.tabIds = nextTopIds;\r\n        // Add tabs that have been added to the DOM\r\n        for (const t of Object.keys(tabComponents)) {\r\n            if (!nextTopIdsMap[t]) {\r\n                this.tabIds.push(t);\r\n            }\r\n        }\r\n        const edges = [];\r\n        if (this.state.showEdges) {\r\n            const r = this.centerRect;\r\n            const length = this.edgeRectLength;\r\n            const width = this.edgeRectWidth;\r\n            const offset = this.edgeRectLength / 2;\r\n            const className = this.getClassName(_Types__WEBPACK_IMPORTED_MODULE_10__.CLASSES.FLEXLAYOUT__EDGE_RECT);\r\n            const radius = 50;\r\n            edges.push(react__WEBPACK_IMPORTED_MODULE_0__.createElement(\"div\", { key: \"North\", style: { top: r.y, left: r.x + r.width / 2 - offset, width: length, height: width, borderBottomLeftRadius: radius, borderBottomRightRadius: radius }, className: className + \" \" + this.getClassName(_Types__WEBPACK_IMPORTED_MODULE_10__.CLASSES.FLEXLAYOUT__EDGE_RECT_TOP) }));\r\n            edges.push(react__WEBPACK_IMPORTED_MODULE_0__.createElement(\"div\", { key: \"West\", style: { top: r.y + r.height / 2 - offset, left: r.x, width: width, height: length, borderTopRightRadius: radius, borderBottomRightRadius: radius }, className: className + \" \" + this.getClassName(_Types__WEBPACK_IMPORTED_MODULE_10__.CLASSES.FLEXLAYOUT__EDGE_RECT_LEFT) }));\r\n            edges.push(react__WEBPACK_IMPORTED_MODULE_0__.createElement(\"div\", { key: \"South\", style: { top: r.y + r.height - width, left: r.x + r.width / 2 - offset, width: length, height: width, borderTopLeftRadius: radius, borderTopRightRadius: radius }, className: className + \" \" + this.getClassName(_Types__WEBPACK_IMPORTED_MODULE_10__.CLASSES.FLEXLAYOUT__EDGE_RECT_BOTTOM) }));\r\n            edges.push(react__WEBPACK_IMPORTED_MODULE_0__.createElement(\"div\", { key: \"East\", style: { top: r.y + r.height / 2 - offset, left: r.x + r.width - width, width: width, height: length, borderTopLeftRadius: radius, borderBottomLeftRadius: radius }, className: className + \" \" + this.getClassName(_Types__WEBPACK_IMPORTED_MODULE_10__.CLASSES.FLEXLAYOUT__EDGE_RECT_RIGHT) }));\r\n        }\r\n        // this.layoutTime = (Date.now() - this.start);\r\n        return (react__WEBPACK_IMPORTED_MODULE_0__.createElement(\"div\", { ref: this.selfRef, className: this.getClassName(_Types__WEBPACK_IMPORTED_MODULE_10__.CLASSES.FLEXLAYOUT__LAYOUT), onDragEnter: this.props.onExternalDrag ? this.onDragEnter : undefined },\r\n            tabSetComponents,\r\n            this.tabIds.map((t) => {\r\n                return tabComponents[t];\r\n            }),\r\n            borderComponents,\r\n            splitterComponents,\r\n            edges,\r\n            floatingWindows,\r\n            this.metricsElements(),\r\n            this.state.portal));\r\n    }\r\n    /** @internal */\r\n    metricsElements() {\r\n        // used to measure the tab and border tab sizes\r\n        const fontStyle = this.styleFont({ visibility: \"hidden\" });\r\n        return (react__WEBPACK_IMPORTED_MODULE_0__.createElement(react__WEBPACK_IMPORTED_MODULE_0__.Fragment, null,\r\n            react__WEBPACK_IMPORTED_MODULE_0__.createElement(\"div\", { key: \"findHeaderBarSize\", ref: this.findHeaderBarSizeRef, style: fontStyle, className: this.getClassName(_Types__WEBPACK_IMPORTED_MODULE_10__.CLASSES.FLEXLAYOUT__TABSET_HEADER_SIZER) }, \"FindHeaderBarSize\"),\r\n            react__WEBPACK_IMPORTED_MODULE_0__.createElement(\"div\", { key: \"findTabBarSize\", ref: this.findTabBarSizeRef, style: fontStyle, className: this.getClassName(_Types__WEBPACK_IMPORTED_MODULE_10__.CLASSES.FLEXLAYOUT__TABSET_SIZER) }, \"FindTabBarSize\"),\r\n            react__WEBPACK_IMPORTED_MODULE_0__.createElement(\"div\", { key: \"findBorderBarSize\", ref: this.findBorderBarSizeRef, style: fontStyle, className: this.getClassName(_Types__WEBPACK_IMPORTED_MODULE_10__.CLASSES.FLEXLAYOUT__BORDER_SIZER) }, \"FindBorderBarSize\")));\r\n    }\r\n    /** @internal */\r\n    renderBorder(borderSet, borderComponents, tabComponents, floatingWindows, splitterComponents) {\r\n        for (const border of borderSet.getBorders()) {\r\n            const borderPath = `/border/${border.getLocation().getName()}`;\r\n            if (border.isShowing()) {\r\n                borderComponents.push(react__WEBPACK_IMPORTED_MODULE_0__.createElement(_BorderTabSet__WEBPACK_IMPORTED_MODULE_11__.BorderTabSet, { key: `border_${border.getLocation().getName()}`, path: borderPath, border: border, layout: this, iconFactory: this.props.iconFactory, titleFactory: this.props.titleFactory, icons: this.icons }));\r\n                const drawChildren = border._getDrawChildren();\r\n                let i = 0;\r\n                let tabCount = 0;\r\n                for (const child of drawChildren) {\r\n                    if (child instanceof _model_SplitterNode__WEBPACK_IMPORTED_MODULE_6__.SplitterNode) {\r\n                        let path = borderPath + \"/s\";\r\n                        splitterComponents.push(react__WEBPACK_IMPORTED_MODULE_0__.createElement(_Splitter__WEBPACK_IMPORTED_MODULE_12__.Splitter, { key: child.getId(), layout: this, node: child, path: path }));\r\n                    }\r\n                    else if (child instanceof _model_TabNode__WEBPACK_IMPORTED_MODULE_7__.TabNode) {\r\n                        let path = borderPath + \"/t\" + tabCount++;\r\n                        if (this.supportsPopout && child.isFloating()) {\r\n                            const rect = this._getScreenRect(child);\r\n                            const tabBorderWidth = child._getAttr(\"borderWidth\");\r\n                            const tabBorderHeight = child._getAttr(\"borderHeight\");\r\n                            if (rect) {\r\n                                if (tabBorderWidth !== -1 && border.getLocation().getOrientation() === _Orientation__WEBPACK_IMPORTED_MODULE_18__.Orientation.HORZ) {\r\n                                    rect.width = tabBorderWidth;\r\n                                }\r\n                                else if (tabBorderHeight !== -1 && border.getLocation().getOrientation() === _Orientation__WEBPACK_IMPORTED_MODULE_18__.Orientation.VERT) {\r\n                                    rect.height = tabBorderHeight;\r\n                                }\r\n                            }\r\n                            floatingWindows.push(react__WEBPACK_IMPORTED_MODULE_0__.createElement(_FloatingWindow__WEBPACK_IMPORTED_MODULE_15__.FloatingWindow, { key: child.getId(), url: this.popoutURL, rect: rect, title: child.getName(), id: child.getId(), onSetWindow: this.onSetWindow, onCloseWindow: this.onCloseWindow },\r\n                                react__WEBPACK_IMPORTED_MODULE_0__.createElement(_FloatingWindowTab__WEBPACK_IMPORTED_MODULE_16__.FloatingWindowTab, { layout: this, node: child, factory: this.props.factory })));\r\n                            tabComponents[child.getId()] = react__WEBPACK_IMPORTED_MODULE_0__.createElement(_TabFloating__WEBPACK_IMPORTED_MODULE_17__.TabFloating, { key: child.getId(), layout: this, path: path, node: child, selected: i === border.getSelected() });\r\n                        }\r\n                        else {\r\n                            tabComponents[child.getId()] = react__WEBPACK_IMPORTED_MODULE_0__.createElement(_Tab__WEBPACK_IMPORTED_MODULE_13__.Tab, { key: child.getId(), layout: this, path: path, node: child, selected: i === border.getSelected(), factory: this.props.factory });\r\n                        }\r\n                    }\r\n                    i++;\r\n                }\r\n            }\r\n        }\r\n    }\r\n    /** @internal */\r\n    renderChildren(path, node, tabSetComponents, tabComponents, floatingWindows, splitterComponents) {\r\n        const drawChildren = node._getDrawChildren();\r\n        let splitterCount = 0;\r\n        let tabCount = 0;\r\n        let rowCount = 0;\r\n        for (const child of drawChildren) {\r\n            if (child instanceof _model_SplitterNode__WEBPACK_IMPORTED_MODULE_6__.SplitterNode) {\r\n                const newPath = path + \"/s\" + (splitterCount++);\r\n                splitterComponents.push(react__WEBPACK_IMPORTED_MODULE_0__.createElement(_Splitter__WEBPACK_IMPORTED_MODULE_12__.Splitter, { key: child.getId(), layout: this, path: newPath, node: child }));\r\n            }\r\n            else if (child instanceof _model_TabSetNode__WEBPACK_IMPORTED_MODULE_8__.TabSetNode) {\r\n                const newPath = path + \"/ts\" + (rowCount++);\r\n                tabSetComponents.push(react__WEBPACK_IMPORTED_MODULE_0__.createElement(_TabSet__WEBPACK_IMPORTED_MODULE_14__.TabSet, { key: child.getId(), layout: this, path: newPath, node: child, iconFactory: this.props.iconFactory, titleFactory: this.props.titleFactory, icons: this.icons }));\r\n                this.renderChildren(newPath, child, tabSetComponents, tabComponents, floatingWindows, splitterComponents);\r\n            }\r\n            else if (child instanceof _model_TabNode__WEBPACK_IMPORTED_MODULE_7__.TabNode) {\r\n                const newPath = path + \"/t\" + (tabCount++);\r\n                const selectedTab = child.getParent().getChildren()[child.getParent().getSelected()];\r\n                if (selectedTab === undefined) {\r\n                    // this should not happen!\r\n                    console.warn(\"undefined selectedTab should not happen\");\r\n                }\r\n                if (this.supportsPopout && child.isFloating()) {\r\n                    const rect = this._getScreenRect(child);\r\n                    floatingWindows.push(react__WEBPACK_IMPORTED_MODULE_0__.createElement(_FloatingWindow__WEBPACK_IMPORTED_MODULE_15__.FloatingWindow, { key: child.getId(), url: this.popoutURL, rect: rect, title: child.getName(), id: child.getId(), onSetWindow: this.onSetWindow, onCloseWindow: this.onCloseWindow },\r\n                        react__WEBPACK_IMPORTED_MODULE_0__.createElement(_FloatingWindowTab__WEBPACK_IMPORTED_MODULE_16__.FloatingWindowTab, { layout: this, node: child, factory: this.props.factory })));\r\n                    tabComponents[child.getId()] = react__WEBPACK_IMPORTED_MODULE_0__.createElement(_TabFloating__WEBPACK_IMPORTED_MODULE_17__.TabFloating, { key: child.getId(), layout: this, path: newPath, node: child, selected: child === selectedTab });\r\n                }\r\n                else {\r\n                    tabComponents[child.getId()] = react__WEBPACK_IMPORTED_MODULE_0__.createElement(_Tab__WEBPACK_IMPORTED_MODULE_13__.Tab, { key: child.getId(), layout: this, path: newPath, node: child, selected: child === selectedTab, factory: this.props.factory });\r\n                }\r\n            }\r\n            else {\r\n                // is row\r\n                const newPath = path + ((child.getOrientation() === _Orientation__WEBPACK_IMPORTED_MODULE_18__.Orientation.HORZ) ? \"/r\" : \"/c\") + (rowCount++);\r\n                this.renderChildren(newPath, child, tabSetComponents, tabComponents, floatingWindows, splitterComponents);\r\n            }\r\n        }\r\n    }\r\n    /** @internal */\r\n    _getScreenRect(node) {\r\n        var _a;\r\n        const rect = node.getRect().clone();\r\n        const bodyRect = (_a = this.selfRef.current) === null || _a === void 0 ? void 0 : _a.getBoundingClientRect();\r\n        if (!bodyRect) {\r\n            return null;\r\n        }\r\n        const navHeight = Math.min(80, this.currentWindow.outerHeight - this.currentWindow.innerHeight);\r\n        const navWidth = Math.min(80, this.currentWindow.outerWidth - this.currentWindow.innerWidth);\r\n        rect.x = rect.x + bodyRect.x + this.currentWindow.screenX + navWidth;\r\n        rect.y = rect.y + bodyRect.y + this.currentWindow.screenY + navHeight;\r\n        return rect;\r\n    }\r\n    /**\r\n     * Adds a new tab to the given tabset\r\n     * @param tabsetId the id of the tabset where the new tab will be added\r\n     * @param json the json for the new tab node\r\n     * @returns the added tab node or undefined\r\n     */\r\n    addTabToTabSet(tabsetId, json) {\r\n        const tabsetNode = this.props.model.getNodeById(tabsetId);\r\n        if (tabsetNode !== undefined) {\r\n            const node = this.doAction(_model_Actions__WEBPACK_IMPORTED_MODULE_4__.Actions.addNode(json, tabsetId, _DockLocation__WEBPACK_IMPORTED_MODULE_2__.DockLocation.CENTER, -1));\r\n            return node;\r\n        }\r\n        return undefined;\r\n    }\r\n    /**\r\n     * Adds a new tab to the active tabset (if there is one)\r\n     * @param json the json for the new tab node\r\n     * @returns the added tab node or undefined\r\n     */\r\n    addTabToActiveTabSet(json) {\r\n        const tabsetNode = this.props.model.getActiveTabset();\r\n        if (tabsetNode !== undefined) {\r\n            const node = this.doAction(_model_Actions__WEBPACK_IMPORTED_MODULE_4__.Actions.addNode(json, tabsetNode.getId(), _DockLocation__WEBPACK_IMPORTED_MODULE_2__.DockLocation.CENTER, -1));\r\n            return node;\r\n        }\r\n        return undefined;\r\n    }\r\n    /**\r\n     * Adds a new tab by dragging a labeled panel to the drop location, dragging starts immediatelly\r\n     * @param dragText the text to show on the drag panel\r\n     * @param json the json for the new tab node\r\n     * @param onDrop a callback to call when the drag is complete (node and event will be undefined if the drag was cancelled)\r\n     */\r\n    addTabWithDragAndDrop(dragText, json, onDrop) {\r\n        this.fnNewNodeDropped = onDrop;\r\n        this.newTabJson = json;\r\n        this.dragStart(undefined, dragText, _model_TabNode__WEBPACK_IMPORTED_MODULE_7__.TabNode._fromJson(json, this.props.model, false), true, undefined, undefined);\r\n    }\r\n    /**\r\n     * Move a tab/tabset using drag and drop\r\n     * @param node the tab or tabset to drag\r\n     * @param dragText the text to show on the drag panel\r\n     */\r\n    moveTabWithDragAndDrop(node, dragText) {\r\n        this.dragStart(undefined, dragText, node, true, undefined, undefined);\r\n    }\r\n    /**\r\n     * Adds a new tab by dragging a labeled panel to the drop location, dragging starts when you\r\n     * mouse down on the panel\r\n     *\r\n     * @param dragText the text to show on the drag panel\r\n     * @param json the json for the new tab node\r\n     * @param onDrop a callback to call when the drag is complete (node and event will be undefined if the drag was cancelled)\r\n     */\r\n    addTabWithDragAndDropIndirect(dragText, json, onDrop) {\r\n        this.fnNewNodeDropped = onDrop;\r\n        this.newTabJson = json;\r\n        _DragDrop__WEBPACK_IMPORTED_MODULE_3__.DragDrop.instance.addGlass(this.onCancelAdd);\r\n        this.dragDivText = dragText;\r\n        this.dragDiv = this.currentDocument.createElement(\"div\");\r\n        this.dragDiv.className = this.getClassName(_Types__WEBPACK_IMPORTED_MODULE_10__.CLASSES.FLEXLAYOUT__DRAG_RECT);\r\n        this.dragDiv.addEventListener(\"mousedown\", this.onDragDivMouseDown);\r\n        this.dragDiv.addEventListener(\"touchstart\", this.onDragDivMouseDown, { passive: false });\r\n        this.dragRectRender(this.dragDivText, undefined, this.newTabJson, () => {\r\n            if (this.dragDiv) {\r\n                // now it's been rendered into the dom it can be centered\r\n                this.dragDiv.style.visibility = \"visible\";\r\n                const domRect = this.dragDiv.getBoundingClientRect();\r\n                const r = new _Rect__WEBPACK_IMPORTED_MODULE_9__.Rect(0, 0, domRect === null || domRect === void 0 ? void 0 : domRect.width, domRect === null || domRect === void 0 ? void 0 : domRect.height);\r\n                r.centerInRect(this.state.rect);\r\n                this.dragDiv.setAttribute(\"data-layout-path\", \"/drag-rectangle\");\r\n                this.dragDiv.style.left = r.x + \"px\";\r\n                this.dragDiv.style.top = r.y + \"px\";\r\n            }\r\n        });\r\n        const rootdiv = this.selfRef.current;\r\n        rootdiv.appendChild(this.dragDiv);\r\n    }\r\n    /** @internal */\r\n    handleCustomTabDrag(dropInfo, pos, event) {\r\n        var _a, _b, _c;\r\n        let invalidated = (_a = this.customDrop) === null || _a === void 0 ? void 0 : _a.invalidated;\r\n        const currentCallback = (_b = this.customDrop) === null || _b === void 0 ? void 0 : _b.callback;\r\n        this.customDrop = undefined;\r\n        const dragging = this.newTabJson || (this.dragNode instanceof _model_TabNode__WEBPACK_IMPORTED_MODULE_7__.TabNode ? this.dragNode : undefined);\r\n        if (dragging && (dropInfo.node instanceof _model_TabSetNode__WEBPACK_IMPORTED_MODULE_8__.TabSetNode || dropInfo.node instanceof _model_BorderNode__WEBPACK_IMPORTED_MODULE_5__.BorderNode) && dropInfo.index === -1) {\r\n            const selected = dropInfo.node.getSelectedNode();\r\n            const tabRect = selected === null || selected === void 0 ? void 0 : selected.getRect();\r\n            if (selected && (tabRect === null || tabRect === void 0 ? void 0 : tabRect.contains(pos.x, pos.y))) {\r\n                let customDrop = undefined;\r\n                try {\r\n                    const dest = this.onTabDrag(dragging, selected, pos.x - tabRect.x, pos.y - tabRect.y, dropInfo.location, () => this.onDragMove(event));\r\n                    if (dest) {\r\n                        customDrop = {\r\n                            rect: new _Rect__WEBPACK_IMPORTED_MODULE_9__.Rect(dest.x + tabRect.x, dest.y + tabRect.y, dest.width, dest.height),\r\n                            callback: dest.callback,\r\n                            invalidated: dest.invalidated,\r\n                            dragging: dragging,\r\n                            over: selected,\r\n                            x: pos.x - tabRect.x,\r\n                            y: pos.y - tabRect.y,\r\n                            location: dropInfo.location,\r\n                            cursor: dest.cursor\r\n                        };\r\n                    }\r\n                }\r\n                catch (e) {\r\n                    console.error(e);\r\n                }\r\n                if ((customDrop === null || customDrop === void 0 ? void 0 : customDrop.callback) === currentCallback) {\r\n                    invalidated = undefined;\r\n                }\r\n                this.customDrop = customDrop;\r\n            }\r\n        }\r\n        this.dropInfo = dropInfo;\r\n        if (this.outlineDiv) {\r\n            this.outlineDiv.className = this.getClassName(this.customDrop ? _Types__WEBPACK_IMPORTED_MODULE_10__.CLASSES.FLEXLAYOUT__OUTLINE_RECT : dropInfo.className);\r\n            if (this.customDrop) {\r\n                this.customDrop.rect.positionElement(this.outlineDiv);\r\n            }\r\n            else {\r\n                dropInfo.rect.positionElement(this.outlineDiv);\r\n            }\r\n        }\r\n        _DragDrop__WEBPACK_IMPORTED_MODULE_3__.DragDrop.instance.setGlassCursorOverride((_c = this.customDrop) === null || _c === void 0 ? void 0 : _c.cursor);\r\n        if (this.outlineDiv) {\r\n            this.outlineDiv.style.visibility = \"visible\";\r\n        }\r\n        try {\r\n            invalidated === null || invalidated === void 0 ? void 0 : invalidated();\r\n        }\r\n        catch (e) {\r\n            console.error(e);\r\n        }\r\n    }\r\n    /** @internal */\r\n    onDragEnter(event) {\r\n        // DragDrop keeps track of number of dragenters minus the number of\r\n        // dragleaves. Only start a new drag if there isn't one already.\r\n        if (_DragDrop__WEBPACK_IMPORTED_MODULE_3__.DragDrop.instance.isDragging())\r\n            return;\r\n        const drag = this.props.onExternalDrag(event);\r\n        if (drag) {\r\n            // Mimic addTabWithDragAndDrop, but pass in DragEvent\r\n            this.fnNewNodeDropped = drag.onDrop;\r\n            this.newTabJson = drag.json;\r\n            this.dragStart(event, drag.dragText, _model_TabNode__WEBPACK_IMPORTED_MODULE_7__.TabNode._fromJson(drag.json, this.props.model, false), true, undefined, undefined);\r\n        }\r\n    }\r\n    /** @internal */\r\n    checkForBorderToShow(x, y) {\r\n        const r = this.props.model._getOuterInnerRects().outer;\r\n        const c = r.getCenter();\r\n        const margin = this.edgeRectWidth;\r\n        const offset = this.edgeRectLength / 2;\r\n        let overEdge = false;\r\n        if (this.props.model.isEnableEdgeDock() && this.state.showHiddenBorder === _DockLocation__WEBPACK_IMPORTED_MODULE_2__.DockLocation.CENTER) {\r\n            if ((y > c.y - offset && y < c.y + offset) ||\r\n                (x > c.x - offset && x < c.x + offset)) {\r\n                overEdge = true;\r\n            }\r\n        }\r\n        let location = _DockLocation__WEBPACK_IMPORTED_MODULE_2__.DockLocation.CENTER;\r\n        if (!overEdge) {\r\n            if (x <= r.x + margin) {\r\n                location = _DockLocation__WEBPACK_IMPORTED_MODULE_2__.DockLocation.LEFT;\r\n            }\r\n            else if (x >= r.getRight() - margin) {\r\n                location = _DockLocation__WEBPACK_IMPORTED_MODULE_2__.DockLocation.RIGHT;\r\n            }\r\n            else if (y <= r.y + margin) {\r\n                location = _DockLocation__WEBPACK_IMPORTED_MODULE_2__.DockLocation.TOP;\r\n            }\r\n            else if (y >= r.getBottom() - margin) {\r\n                location = _DockLocation__WEBPACK_IMPORTED_MODULE_2__.DockLocation.BOTTOM;\r\n            }\r\n        }\r\n        if (location !== this.state.showHiddenBorder) {\r\n            this.setState({ showHiddenBorder: location });\r\n        }\r\n    }\r\n    /** @internal */\r\n    maximize(tabsetNode) {\r\n        this.doAction(_model_Actions__WEBPACK_IMPORTED_MODULE_4__.Actions.maximizeToggle(tabsetNode.getId()));\r\n    }\r\n    /** @internal */\r\n    customizeTab(tabNode, renderValues) {\r\n        if (this.props.onRenderTab) {\r\n            this.props.onRenderTab(tabNode, renderValues);\r\n        }\r\n    }\r\n    /** @internal */\r\n    customizeTabSet(tabSetNode, renderValues) {\r\n        if (this.props.onRenderTabSet) {\r\n            this.props.onRenderTabSet(tabSetNode, renderValues);\r\n        }\r\n    }\r\n    /** @internal */\r\n    i18nName(id, param) {\r\n        let message;\r\n        if (this.props.i18nMapper) {\r\n            message = this.props.i18nMapper(id, param);\r\n        }\r\n        if (message === undefined) {\r\n            message = id + (param === undefined ? \"\" : param);\r\n        }\r\n        return message;\r\n    }\r\n    /** @internal */\r\n    getOnRenderFloatingTabPlaceholder() {\r\n        return this.props.onRenderFloatingTabPlaceholder;\r\n    }\r\n    /** @internal */\r\n    getShowOverflowMenu() {\r\n        return this.props.onShowOverflowMenu;\r\n    }\r\n    /** @internal */\r\n    getTabSetPlaceHolderCallback() {\r\n        return this.props.onTabSetPlaceHolder;\r\n    }\r\n    /** @internal */\r\n    showContextMenu(node, event) {\r\n        if (this.props.onContextMenu) {\r\n            this.props.onContextMenu(node, event);\r\n        }\r\n    }\r\n    /** @internal */\r\n    auxMouseClick(node, event) {\r\n        if (this.props.onAuxMouseClick) {\r\n            this.props.onAuxMouseClick(node, event);\r\n        }\r\n    }\r\n}\r\n/** @internal */\r\nconst DragRectRenderWrapper = (props) => {\r\n    react__WEBPACK_IMPORTED_MODULE_0__.useEffect(() => {\r\n        var _a;\r\n        (_a = props.onRendered) === null || _a === void 0 ? void 0 : _a.call(props);\r\n    }, [props]);\r\n    return (react__WEBPACK_IMPORTED_MODULE_0__.createElement(react__WEBPACK_IMPORTED_MODULE_0__.Fragment, null, props.children));\r\n};\r\n\n\n//# sourceURL=webpack://FlexLayout/./src/view/Layout.tsx?");
 
 /***/ }),
 
@@ -356,7 +356,7 @@ eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpac
   \*******************************/
 /***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {
 
-eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpack_require__.d(__webpack_exports__, {\n/* harmony export */   \"Splitter\": () => (/* binding */ Splitter)\n/* harmony export */ });\n/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! react */ \"react\");\n/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(react__WEBPACK_IMPORTED_MODULE_0__);\n/* harmony import */ var _DragDrop__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ../DragDrop */ \"./src/DragDrop.ts\");\n/* harmony import */ var _model_Actions__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ../model/Actions */ \"./src/model/Actions.ts\");\n/* harmony import */ var _model_BorderNode__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! ../model/BorderNode */ \"./src/model/BorderNode.ts\");\n/* harmony import */ var _Orientation__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(/*! ../Orientation */ \"./src/Orientation.ts\");\n/* harmony import */ var _Types__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__(/*! ../Types */ \"./src/Types.ts\");\n\r\n\r\n\r\n\r\n\r\n\r\n/** @internal */\r\nconst Splitter = (props) => {\r\n    const { layout, node, path } = props;\r\n    const pBounds = react__WEBPACK_IMPORTED_MODULE_0__.useRef([]);\r\n    const outlineDiv = react__WEBPACK_IMPORTED_MODULE_0__.useRef(undefined);\r\n    const parentNode = node.getParent();\r\n    const onMouseDown = (event) => {\r\n        _DragDrop__WEBPACK_IMPORTED_MODULE_1__.DragDrop.instance.setGlassCursorOverride(node.getOrientation() === _Orientation__WEBPACK_IMPORTED_MODULE_4__.Orientation.HORZ ? \"ns-resize\" : \"ew-resize\");\r\n        _DragDrop__WEBPACK_IMPORTED_MODULE_1__.DragDrop.instance.startDrag(event, onDragStart, onDragMove, onDragEnd, onDragCancel, undefined, undefined, layout.getCurrentDocument(), layout.getRootDiv());\r\n        pBounds.current = parentNode._getSplitterBounds(node, true);\r\n        const rootdiv = layout.getRootDiv();\r\n        outlineDiv.current = layout.getCurrentDocument().createElement(\"div\");\r\n        outlineDiv.current.style.position = \"absolute\";\r\n        outlineDiv.current.className = layout.getClassName(_Types__WEBPACK_IMPORTED_MODULE_5__.CLASSES.FLEXLAYOUT__SPLITTER_DRAG);\r\n        outlineDiv.current.style.cursor = node.getOrientation() === _Orientation__WEBPACK_IMPORTED_MODULE_4__.Orientation.HORZ ? \"ns-resize\" : \"ew-resize\";\r\n        const r = node.getRect();\r\n        if (node.getOrientation() === _Orientation__WEBPACK_IMPORTED_MODULE_4__.Orientation.VERT && r.width < 2) {\r\n            r.width = 2;\r\n        }\r\n        else if (node.getOrientation() === _Orientation__WEBPACK_IMPORTED_MODULE_4__.Orientation.HORZ && r.height < 2) {\r\n            r.height = 2;\r\n        }\r\n        r.positionElement(outlineDiv.current);\r\n        rootdiv.appendChild(outlineDiv.current);\r\n    };\r\n    const onDragCancel = (wasDragging) => {\r\n        const rootdiv = layout.getRootDiv();\r\n        rootdiv.removeChild(outlineDiv.current);\r\n    };\r\n    const onDragStart = () => {\r\n        return true;\r\n    };\r\n    const onDragMove = (event) => {\r\n        const clientRect = layout.getDomRect();\r\n        const pos = {\r\n            x: event.clientX - clientRect.left,\r\n            y: event.clientY - clientRect.top,\r\n        };\r\n        if (outlineDiv) {\r\n            if (node.getOrientation() === _Orientation__WEBPACK_IMPORTED_MODULE_4__.Orientation.HORZ) {\r\n                outlineDiv.current.style.top = getBoundPosition(pos.y - 4) + \"px\";\r\n            }\r\n            else {\r\n                outlineDiv.current.style.left = getBoundPosition(pos.x - 4) + \"px\";\r\n            }\r\n        }\r\n        if (layout.isRealtimeResize()) {\r\n            updateLayout();\r\n        }\r\n    };\r\n    const updateLayout = () => {\r\n        let value = 0;\r\n        if (outlineDiv) {\r\n            if (node.getOrientation() === _Orientation__WEBPACK_IMPORTED_MODULE_4__.Orientation.HORZ) {\r\n                value = outlineDiv.current.offsetTop;\r\n            }\r\n            else {\r\n                value = outlineDiv.current.offsetLeft;\r\n            }\r\n        }\r\n        if (parentNode instanceof _model_BorderNode__WEBPACK_IMPORTED_MODULE_3__.BorderNode) {\r\n            const pos = parentNode._calculateSplit(node, value);\r\n            layout.doAction(_model_Actions__WEBPACK_IMPORTED_MODULE_2__.Actions.adjustBorderSplit(node.getParent().getId(), pos));\r\n        }\r\n        else {\r\n            const splitSpec = parentNode._calculateSplit(node, value);\r\n            if (splitSpec !== undefined) {\r\n                layout.doAction(_model_Actions__WEBPACK_IMPORTED_MODULE_2__.Actions.adjustSplit(splitSpec));\r\n            }\r\n        }\r\n    };\r\n    const onDragEnd = () => {\r\n        updateLayout();\r\n        const rootdiv = layout.getRootDiv();\r\n        rootdiv.removeChild(outlineDiv.current);\r\n    };\r\n    const getBoundPosition = (p) => {\r\n        const bounds = pBounds.current;\r\n        let rtn = p;\r\n        if (p < bounds[0]) {\r\n            rtn = bounds[0];\r\n        }\r\n        if (p > bounds[1]) {\r\n            rtn = bounds[1];\r\n        }\r\n        return rtn;\r\n    };\r\n    const cm = layout.getClassName;\r\n    let r = node.getRect();\r\n    const style = r.styleWithPosition({\r\n        cursor: node.getOrientation() === _Orientation__WEBPACK_IMPORTED_MODULE_4__.Orientation.HORZ ? \"ns-resize\" : \"ew-resize\",\r\n    });\r\n    let className = cm(_Types__WEBPACK_IMPORTED_MODULE_5__.CLASSES.FLEXLAYOUT__SPLITTER) + \" \" + cm(_Types__WEBPACK_IMPORTED_MODULE_5__.CLASSES.FLEXLAYOUT__SPLITTER_ + node.getOrientation().getName());\r\n    if (parentNode instanceof _model_BorderNode__WEBPACK_IMPORTED_MODULE_3__.BorderNode) {\r\n        className += \" \" + cm(_Types__WEBPACK_IMPORTED_MODULE_5__.CLASSES.FLEXLAYOUT__SPLITTER_BORDER);\r\n    }\r\n    else {\r\n        if (node.getModel().getMaximizedTabset() !== undefined) {\r\n            style.display = \"none\";\r\n        }\r\n    }\r\n    const extra = node.getModel().getSplitterExtra();\r\n    if (extra === 0) {\r\n        return (react__WEBPACK_IMPORTED_MODULE_0__.createElement(\"div\", { style: style, \"data-layout-path\": path, className: className, onTouchStart: onMouseDown, onMouseDown: onMouseDown }));\r\n    }\r\n    else {\r\n        // add extended transparent div for hit testing\r\n        // extends forward only, so as not to interfere with scrollbars\r\n        let r2 = r.clone();\r\n        r2.x = 0;\r\n        r2.y = 0;\r\n        if (node.getOrientation() === _Orientation__WEBPACK_IMPORTED_MODULE_4__.Orientation.VERT) {\r\n            r2.width += extra;\r\n        }\r\n        else {\r\n            r2.height += extra;\r\n        }\r\n        const style2 = r2.styleWithPosition({\r\n            cursor: node.getOrientation() === _Orientation__WEBPACK_IMPORTED_MODULE_4__.Orientation.HORZ ? \"ns-resize\" : \"ew-resize\"\r\n        });\r\n        const className2 = cm(_Types__WEBPACK_IMPORTED_MODULE_5__.CLASSES.FLEXLAYOUT__SPLITTER_EXTRA);\r\n        return (react__WEBPACK_IMPORTED_MODULE_0__.createElement(\"div\", { style: style, \"data-layout-path\": path, className: className },\r\n            react__WEBPACK_IMPORTED_MODULE_0__.createElement(\"div\", { style: style2, className: className2, onTouchStart: onMouseDown, onMouseDown: onMouseDown })));\r\n    }\r\n};\r\n\n\n//# sourceURL=webpack://FlexLayout/./src/view/Splitter.tsx?");
+eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpack_require__.d(__webpack_exports__, {\n/* harmony export */   \"Splitter\": () => (/* binding */ Splitter)\n/* harmony export */ });\n/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! react */ \"react\");\n/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(react__WEBPACK_IMPORTED_MODULE_0__);\n/* harmony import */ var _DragDrop__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ../DragDrop */ \"./src/DragDrop.ts\");\n/* harmony import */ var _model_Actions__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ../model/Actions */ \"./src/model/Actions.ts\");\n/* harmony import */ var _model_BorderNode__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! ../model/BorderNode */ \"./src/model/BorderNode.ts\");\n/* harmony import */ var _Orientation__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(/*! ../Orientation */ \"./src/Orientation.ts\");\n/* harmony import */ var _Types__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__(/*! ../Types */ \"./src/Types.ts\");\n\r\n\r\n\r\n\r\n\r\n\r\n/** @internal */\r\nconst Splitter = (props) => {\r\n    const { layout, node, path } = props;\r\n    const pBounds = react__WEBPACK_IMPORTED_MODULE_0__.useRef([]);\r\n    const outlineDiv = react__WEBPACK_IMPORTED_MODULE_0__.useRef(undefined);\r\n    const parentNode = node.getParent();\r\n    const onMouseDown = (event) => {\r\n        var _a;\r\n        _DragDrop__WEBPACK_IMPORTED_MODULE_1__.DragDrop.instance.setGlassCursorOverride(node.getOrientation() === _Orientation__WEBPACK_IMPORTED_MODULE_4__.Orientation.HORZ\r\n            ? \"ns-resize\"\r\n            : \"ew-resize\");\r\n        _DragDrop__WEBPACK_IMPORTED_MODULE_1__.DragDrop.instance.startDrag(event, onDragStart, onDragMove, onDragEnd, onDragCancel, undefined, undefined, layout.getCurrentDocument(), (_a = layout.getRootDiv()) !== null && _a !== void 0 ? _a : undefined);\r\n        pBounds.current = parentNode._getSplitterBounds(node, true);\r\n        const rootdiv = layout.getRootDiv();\r\n        outlineDiv.current = layout.getCurrentDocument().createElement(\"div\");\r\n        outlineDiv.current.style.position = \"absolute\";\r\n        outlineDiv.current.className = layout.getClassName(_Types__WEBPACK_IMPORTED_MODULE_5__.CLASSES.FLEXLAYOUT__SPLITTER_DRAG);\r\n        outlineDiv.current.style.cursor = node.getOrientation() === _Orientation__WEBPACK_IMPORTED_MODULE_4__.Orientation.HORZ ? \"ns-resize\" : \"ew-resize\";\r\n        const r = node.getRect();\r\n        if (node.getOrientation() === _Orientation__WEBPACK_IMPORTED_MODULE_4__.Orientation.VERT && r.width < 2) {\r\n            r.width = 2;\r\n        }\r\n        else if (node.getOrientation() === _Orientation__WEBPACK_IMPORTED_MODULE_4__.Orientation.HORZ && r.height < 2) {\r\n            r.height = 2;\r\n        }\r\n        r.positionElement(outlineDiv.current);\r\n        if (rootdiv) {\r\n            rootdiv.appendChild(outlineDiv.current);\r\n        }\r\n    };\r\n    const onDragCancel = (_wasDragging) => {\r\n        const rootdiv = layout.getRootDiv();\r\n        if (rootdiv) {\r\n            rootdiv.removeChild(outlineDiv.current);\r\n        }\r\n    };\r\n    const onDragStart = () => {\r\n        return true;\r\n    };\r\n    const onDragMove = (event) => {\r\n        const clientRect = layout.getDomRect();\r\n        if (!clientRect) {\r\n            return;\r\n        }\r\n        const pos = {\r\n            x: event.clientX - clientRect.left,\r\n            y: event.clientY - clientRect.top,\r\n        };\r\n        if (outlineDiv) {\r\n            if (node.getOrientation() === _Orientation__WEBPACK_IMPORTED_MODULE_4__.Orientation.HORZ) {\r\n                outlineDiv.current.style.top = getBoundPosition(pos.y - 4) + \"px\";\r\n            }\r\n            else {\r\n                outlineDiv.current.style.left = getBoundPosition(pos.x - 4) + \"px\";\r\n            }\r\n        }\r\n        if (layout.isRealtimeResize()) {\r\n            updateLayout();\r\n        }\r\n    };\r\n    const updateLayout = () => {\r\n        let value = 0;\r\n        if (outlineDiv) {\r\n            if (node.getOrientation() === _Orientation__WEBPACK_IMPORTED_MODULE_4__.Orientation.HORZ) {\r\n                value = outlineDiv.current.offsetTop;\r\n            }\r\n            else {\r\n                value = outlineDiv.current.offsetLeft;\r\n            }\r\n        }\r\n        if (parentNode instanceof _model_BorderNode__WEBPACK_IMPORTED_MODULE_3__.BorderNode) {\r\n            const pos = parentNode._calculateSplit(node, value);\r\n            layout.doAction(_model_Actions__WEBPACK_IMPORTED_MODULE_2__.Actions.adjustBorderSplit(node.getParent().getId(), pos));\r\n        }\r\n        else {\r\n            const splitSpec = parentNode._calculateSplit(node, value);\r\n            if (splitSpec !== undefined) {\r\n                layout.doAction(_model_Actions__WEBPACK_IMPORTED_MODULE_2__.Actions.adjustSplit(splitSpec));\r\n            }\r\n        }\r\n    };\r\n    const onDragEnd = () => {\r\n        updateLayout();\r\n        const rootdiv = layout.getRootDiv();\r\n        if (rootdiv) {\r\n            rootdiv.removeChild(outlineDiv.current);\r\n        }\r\n    };\r\n    const getBoundPosition = (p) => {\r\n        const bounds = pBounds.current;\r\n        let rtn = p;\r\n        if (p < bounds[0]) {\r\n            rtn = bounds[0];\r\n        }\r\n        if (p > bounds[1]) {\r\n            rtn = bounds[1];\r\n        }\r\n        return rtn;\r\n    };\r\n    const cm = layout.getClassName;\r\n    let r = node.getRect();\r\n    const style = r.styleWithPosition({\r\n        cursor: node.getOrientation() === _Orientation__WEBPACK_IMPORTED_MODULE_4__.Orientation.HORZ ? \"ns-resize\" : \"ew-resize\",\r\n    });\r\n    let className = cm(_Types__WEBPACK_IMPORTED_MODULE_5__.CLASSES.FLEXLAYOUT__SPLITTER) + \" \" + cm(_Types__WEBPACK_IMPORTED_MODULE_5__.CLASSES.FLEXLAYOUT__SPLITTER_ + node.getOrientation().getName());\r\n    if (parentNode instanceof _model_BorderNode__WEBPACK_IMPORTED_MODULE_3__.BorderNode) {\r\n        className += \" \" + cm(_Types__WEBPACK_IMPORTED_MODULE_5__.CLASSES.FLEXLAYOUT__SPLITTER_BORDER);\r\n    }\r\n    else {\r\n        if (node.getModel().getMaximizedTabset() !== undefined) {\r\n            style.display = \"none\";\r\n        }\r\n    }\r\n    const extra = node.getModel().getSplitterExtra();\r\n    if (extra === 0) {\r\n        return (react__WEBPACK_IMPORTED_MODULE_0__.createElement(\"div\", { style: style, \"data-layout-path\": path, className: className, onTouchStart: onMouseDown, onMouseDown: onMouseDown }));\r\n    }\r\n    else {\r\n        // add extended transparent div for hit testing\r\n        // extends forward only, so as not to interfere with scrollbars\r\n        let r2 = r.clone();\r\n        r2.x = 0;\r\n        r2.y = 0;\r\n        if (node.getOrientation() === _Orientation__WEBPACK_IMPORTED_MODULE_4__.Orientation.VERT) {\r\n            r2.width += extra;\r\n        }\r\n        else {\r\n            r2.height += extra;\r\n        }\r\n        const style2 = r2.styleWithPosition({\r\n            cursor: node.getOrientation() === _Orientation__WEBPACK_IMPORTED_MODULE_4__.Orientation.HORZ ? \"ns-resize\" : \"ew-resize\"\r\n        });\r\n        const className2 = cm(_Types__WEBPACK_IMPORTED_MODULE_5__.CLASSES.FLEXLAYOUT__SPLITTER_EXTRA);\r\n        return (react__WEBPACK_IMPORTED_MODULE_0__.createElement(\"div\", { style: style, \"data-layout-path\": path, className: className },\r\n            react__WEBPACK_IMPORTED_MODULE_0__.createElement(\"div\", { style: style2, className: className2, onTouchStart: onMouseDown, onMouseDown: onMouseDown })));\r\n    }\r\n};\r\n\n\n//# sourceURL=webpack://FlexLayout/./src/view/Splitter.tsx?");
 
 /***/ }),
 
@@ -376,7 +376,7 @@ eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpac
   \********************************/
 /***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {
 
-eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpack_require__.d(__webpack_exports__, {\n/* harmony export */   \"TabButton\": () => (/* binding */ TabButton)\n/* harmony export */ });\n/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! react */ \"react\");\n/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(react__WEBPACK_IMPORTED_MODULE_0__);\n/* harmony import */ var _I18nLabel__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ../I18nLabel */ \"./src/I18nLabel.ts\");\n/* harmony import */ var _model_Actions__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ../model/Actions */ \"./src/model/Actions.ts\");\n/* harmony import */ var _Rect__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! ../Rect */ \"./src/Rect.ts\");\n/* harmony import */ var _model_ICloseType__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(/*! ../model/ICloseType */ \"./src/model/ICloseType.ts\");\n/* harmony import */ var _Types__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__(/*! ../Types */ \"./src/Types.ts\");\n/* harmony import */ var _Utils__WEBPACK_IMPORTED_MODULE_6__ = __webpack_require__(/*! ./Utils */ \"./src/view/Utils.tsx\");\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n/** @internal */\r\nconst TabButton = (props) => {\r\n    const { layout, node, selected, iconFactory, titleFactory, icons, path } = props;\r\n    const selfRef = react__WEBPACK_IMPORTED_MODULE_0__.useRef(null);\r\n    const contentRef = react__WEBPACK_IMPORTED_MODULE_0__.useRef(null);\r\n    const onMouseDown = (event) => {\r\n        if (!(0,_Utils__WEBPACK_IMPORTED_MODULE_6__.isAuxMouseEvent)(event) && !layout.getEditingTab()) {\r\n            layout.dragStart(event, undefined, node, node.isEnableDrag(), onClick, onDoubleClick);\r\n        }\r\n    };\r\n    const onAuxMouseClick = (event) => {\r\n        if ((0,_Utils__WEBPACK_IMPORTED_MODULE_6__.isAuxMouseEvent)(event)) {\r\n            layout.auxMouseClick(node, event);\r\n        }\r\n    };\r\n    const onContextMenu = (event) => {\r\n        layout.showContextMenu(node, event);\r\n    };\r\n    const onClick = () => {\r\n        layout.doAction(_model_Actions__WEBPACK_IMPORTED_MODULE_2__.Actions.selectTab(node.getId()));\r\n    };\r\n    const onDoubleClick = (event) => {\r\n        if (node.isEnableRename()) {\r\n            onRename();\r\n        }\r\n    };\r\n    const onRename = () => {\r\n        layout.setEditingTab(node);\r\n        layout.getCurrentDocument().body.addEventListener(\"mousedown\", onEndEdit);\r\n        layout.getCurrentDocument().body.addEventListener(\"touchstart\", onEndEdit);\r\n    };\r\n    const onEndEdit = (event) => {\r\n        if (event.target !== contentRef.current) {\r\n            layout.getCurrentDocument().body.removeEventListener(\"mousedown\", onEndEdit);\r\n            layout.getCurrentDocument().body.removeEventListener(\"touchstart\", onEndEdit);\r\n            layout.setEditingTab(undefined);\r\n        }\r\n    };\r\n    const isClosable = () => {\r\n        const closeType = node.getCloseType();\r\n        if (selected || closeType === _model_ICloseType__WEBPACK_IMPORTED_MODULE_4__.ICloseType.Always) {\r\n            return true;\r\n        }\r\n        if (closeType === _model_ICloseType__WEBPACK_IMPORTED_MODULE_4__.ICloseType.Visible) {\r\n            // not selected but x should be visible due to hover\r\n            if (window.matchMedia && window.matchMedia(\"(hover: hover) and (pointer: fine)\").matches) {\r\n                return true;\r\n            }\r\n        }\r\n        return false;\r\n    };\r\n    const onClose = (event) => {\r\n        if (isClosable()) {\r\n            layout.doAction(_model_Actions__WEBPACK_IMPORTED_MODULE_2__.Actions.deleteTab(node.getId()));\r\n        }\r\n        else {\r\n            onClick();\r\n        }\r\n    };\r\n    const onCloseMouseDown = (event) => {\r\n        event.stopPropagation();\r\n    };\r\n    react__WEBPACK_IMPORTED_MODULE_0__.useLayoutEffect(() => {\r\n        updateRect();\r\n        if (layout.getEditingTab() === node) {\r\n            contentRef.current.select();\r\n        }\r\n    });\r\n    const updateRect = () => {\r\n        // record position of tab in node\r\n        const layoutRect = layout.getDomRect();\r\n        const r = selfRef.current.getBoundingClientRect();\r\n        node._setTabRect(new _Rect__WEBPACK_IMPORTED_MODULE_3__.Rect(r.left - layoutRect.left, r.top - layoutRect.top, r.width, r.height));\r\n    };\r\n    const onTextBoxMouseDown = (event) => {\r\n        // console.log(\"onTextBoxMouseDown\");\r\n        event.stopPropagation();\r\n    };\r\n    const onTextBoxKeyPress = (event) => {\r\n        // console.log(event, event.keyCode);\r\n        if (event.keyCode === 27) {\r\n            // esc\r\n            layout.setEditingTab(undefined);\r\n        }\r\n        else if (event.keyCode === 13) {\r\n            // enter\r\n            layout.setEditingTab(undefined);\r\n            layout.doAction(_model_Actions__WEBPACK_IMPORTED_MODULE_2__.Actions.renameTab(node.getId(), event.target.value));\r\n        }\r\n    };\r\n    const cm = layout.getClassName;\r\n    const parentNode = node.getParent();\r\n    let baseClassName = _Types__WEBPACK_IMPORTED_MODULE_5__.CLASSES.FLEXLAYOUT__TAB_BUTTON;\r\n    let classNames = cm(baseClassName);\r\n    classNames += \" \" + cm(baseClassName + \"_\" + parentNode.getTabLocation());\r\n    if (selected) {\r\n        classNames += \" \" + cm(baseClassName + \"--selected\");\r\n    }\r\n    else {\r\n        classNames += \" \" + cm(baseClassName + \"--unselected\");\r\n    }\r\n    if (node.getClassName() !== undefined) {\r\n        classNames += \" \" + node.getClassName();\r\n    }\r\n    const renderState = (0,_Utils__WEBPACK_IMPORTED_MODULE_6__.getRenderStateEx)(layout, node, iconFactory, titleFactory);\r\n    let content = renderState.content ? (react__WEBPACK_IMPORTED_MODULE_0__.createElement(\"div\", { className: cm(_Types__WEBPACK_IMPORTED_MODULE_5__.CLASSES.FLEXLAYOUT__TAB_BUTTON_CONTENT) }, renderState.content)) : null;\r\n    const leading = renderState.leading ? (react__WEBPACK_IMPORTED_MODULE_0__.createElement(\"div\", { className: cm(_Types__WEBPACK_IMPORTED_MODULE_5__.CLASSES.FLEXLAYOUT__TAB_BUTTON_LEADING) }, renderState.leading)) : null;\r\n    if (layout.getEditingTab() === node) {\r\n        content = (react__WEBPACK_IMPORTED_MODULE_0__.createElement(\"input\", { ref: contentRef, className: cm(_Types__WEBPACK_IMPORTED_MODULE_5__.CLASSES.FLEXLAYOUT__TAB_BUTTON_TEXTBOX), \"data-layout-path\": path + \"/textbox\", type: \"text\", autoFocus: true, defaultValue: node.getName(), onKeyDown: onTextBoxKeyPress, onMouseDown: onTextBoxMouseDown, onTouchStart: onTextBoxMouseDown }));\r\n    }\r\n    if (node.isEnableClose()) {\r\n        const closeTitle = layout.i18nName(_I18nLabel__WEBPACK_IMPORTED_MODULE_1__.I18nLabel.Close_Tab);\r\n        renderState.buttons.push(react__WEBPACK_IMPORTED_MODULE_0__.createElement(\"div\", { key: \"close\", \"data-layout-path\": path + \"/button/close\", title: closeTitle, className: cm(_Types__WEBPACK_IMPORTED_MODULE_5__.CLASSES.FLEXLAYOUT__TAB_BUTTON_TRAILING), onMouseDown: onCloseMouseDown, onClick: onClose, onTouchStart: onCloseMouseDown }, (typeof icons.close === \"function\") ? icons.close(node) : icons.close));\r\n    }\r\n    return (react__WEBPACK_IMPORTED_MODULE_0__.createElement(\"div\", { ref: selfRef, \"data-layout-path\": path, className: classNames, onMouseDown: onMouseDown, onClick: onAuxMouseClick, onAuxClick: onAuxMouseClick, onContextMenu: onContextMenu, onTouchStart: onMouseDown, title: node.getHelpText() },\r\n        leading,\r\n        content,\r\n        renderState.buttons));\r\n};\r\n\n\n//# sourceURL=webpack://FlexLayout/./src/view/TabButton.tsx?");
+eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpack_require__.d(__webpack_exports__, {\n/* harmony export */   \"TabButton\": () => (/* binding */ TabButton)\n/* harmony export */ });\n/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! react */ \"react\");\n/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(react__WEBPACK_IMPORTED_MODULE_0__);\n/* harmony import */ var _I18nLabel__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ../I18nLabel */ \"./src/I18nLabel.ts\");\n/* harmony import */ var _model_Actions__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ../model/Actions */ \"./src/model/Actions.ts\");\n/* harmony import */ var _Rect__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! ../Rect */ \"./src/Rect.ts\");\n/* harmony import */ var _model_ICloseType__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(/*! ../model/ICloseType */ \"./src/model/ICloseType.ts\");\n/* harmony import */ var _Types__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__(/*! ../Types */ \"./src/Types.ts\");\n/* harmony import */ var _Utils__WEBPACK_IMPORTED_MODULE_6__ = __webpack_require__(/*! ./Utils */ \"./src/view/Utils.tsx\");\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n/** @internal */\r\nconst TabButton = (props) => {\r\n    const { layout, node, selected, iconFactory, titleFactory, icons, path } = props;\r\n    const selfRef = react__WEBPACK_IMPORTED_MODULE_0__.useRef(null);\r\n    const contentRef = react__WEBPACK_IMPORTED_MODULE_0__.useRef(null);\r\n    const onMouseDown = (event) => {\r\n        if (!(0,_Utils__WEBPACK_IMPORTED_MODULE_6__.isAuxMouseEvent)(event) && !layout.getEditingTab()) {\r\n            layout.dragStart(event, undefined, node, node.isEnableDrag(), onClick, onDoubleClick);\r\n        }\r\n    };\r\n    const onAuxMouseClick = (event) => {\r\n        if ((0,_Utils__WEBPACK_IMPORTED_MODULE_6__.isAuxMouseEvent)(event)) {\r\n            layout.auxMouseClick(node, event);\r\n        }\r\n    };\r\n    const onContextMenu = (event) => {\r\n        layout.showContextMenu(node, event);\r\n    };\r\n    const onClick = () => {\r\n        layout.doAction(_model_Actions__WEBPACK_IMPORTED_MODULE_2__.Actions.selectTab(node.getId()));\r\n    };\r\n    const onDoubleClick = (event) => {\r\n        if (node.isEnableRename()) {\r\n            onRename();\r\n        }\r\n    };\r\n    const onRename = () => {\r\n        layout.setEditingTab(node);\r\n        layout.getCurrentDocument().body.addEventListener(\"mousedown\", onEndEdit);\r\n        layout.getCurrentDocument().body.addEventListener(\"touchstart\", onEndEdit);\r\n    };\r\n    const onEndEdit = (event) => {\r\n        if (event.target !== contentRef.current) {\r\n            layout.getCurrentDocument().body.removeEventListener(\"mousedown\", onEndEdit);\r\n            layout.getCurrentDocument().body.removeEventListener(\"touchstart\", onEndEdit);\r\n            layout.setEditingTab(undefined);\r\n        }\r\n    };\r\n    const isClosable = () => {\r\n        const closeType = node.getCloseType();\r\n        if (selected || closeType === _model_ICloseType__WEBPACK_IMPORTED_MODULE_4__.ICloseType.Always) {\r\n            return true;\r\n        }\r\n        if (closeType === _model_ICloseType__WEBPACK_IMPORTED_MODULE_4__.ICloseType.Visible) {\r\n            // not selected but x should be visible due to hover\r\n            if (window.matchMedia && window.matchMedia(\"(hover: hover) and (pointer: fine)\").matches) {\r\n                return true;\r\n            }\r\n        }\r\n        return false;\r\n    };\r\n    const onClose = (event) => {\r\n        if (isClosable()) {\r\n            layout.doAction(_model_Actions__WEBPACK_IMPORTED_MODULE_2__.Actions.deleteTab(node.getId()));\r\n        }\r\n        else {\r\n            onClick();\r\n        }\r\n    };\r\n    const onCloseMouseDown = (event) => {\r\n        event.stopPropagation();\r\n    };\r\n    react__WEBPACK_IMPORTED_MODULE_0__.useLayoutEffect(() => {\r\n        updateRect();\r\n        if (layout.getEditingTab() === node) {\r\n            contentRef.current.select();\r\n        }\r\n    });\r\n    const updateRect = () => {\r\n        var _a;\r\n        // record position of tab in node\r\n        const layoutRect = layout.getDomRect();\r\n        const r = (_a = selfRef.current) === null || _a === void 0 ? void 0 : _a.getBoundingClientRect();\r\n        if (r && layoutRect) {\r\n            node._setTabRect(new _Rect__WEBPACK_IMPORTED_MODULE_3__.Rect(r.left - layoutRect.left, r.top - layoutRect.top, r.width, r.height));\r\n        }\r\n    };\r\n    const onTextBoxMouseDown = (event) => {\r\n        // console.log(\"onTextBoxMouseDown\");\r\n        event.stopPropagation();\r\n    };\r\n    const onTextBoxKeyPress = (event) => {\r\n        if (event.code === 'Escape') {\r\n            // esc\r\n            layout.setEditingTab(undefined);\r\n        }\r\n        else if (event.code === 'Enter') {\r\n            // enter\r\n            layout.setEditingTab(undefined);\r\n            layout.doAction(_model_Actions__WEBPACK_IMPORTED_MODULE_2__.Actions.renameTab(node.getId(), event.target.value));\r\n        }\r\n    };\r\n    const cm = layout.getClassName;\r\n    const parentNode = node.getParent();\r\n    const isStretch = parentNode.isEnableSingleTabStretch() && parentNode.getChildren().length === 1;\r\n    let baseClassName = isStretch ? _Types__WEBPACK_IMPORTED_MODULE_5__.CLASSES.FLEXLAYOUT__TAB_BUTTON_STRETCH : _Types__WEBPACK_IMPORTED_MODULE_5__.CLASSES.FLEXLAYOUT__TAB_BUTTON;\r\n    let classNames = cm(baseClassName);\r\n    classNames += \" \" + cm(baseClassName + \"_\" + parentNode.getTabLocation());\r\n    if (!isStretch) {\r\n        if (selected) {\r\n            classNames += \" \" + cm(baseClassName + \"--selected\");\r\n        }\r\n        else {\r\n            classNames += \" \" + cm(baseClassName + \"--unselected\");\r\n        }\r\n    }\r\n    if (node.getClassName() !== undefined) {\r\n        classNames += \" \" + node.getClassName();\r\n    }\r\n    const renderState = (0,_Utils__WEBPACK_IMPORTED_MODULE_6__.getRenderStateEx)(layout, node, iconFactory, titleFactory);\r\n    let content = renderState.content ? (react__WEBPACK_IMPORTED_MODULE_0__.createElement(\"div\", { className: cm(_Types__WEBPACK_IMPORTED_MODULE_5__.CLASSES.FLEXLAYOUT__TAB_BUTTON_CONTENT) }, renderState.content)) : null;\r\n    const leading = renderState.leading ? (react__WEBPACK_IMPORTED_MODULE_0__.createElement(\"div\", { className: cm(_Types__WEBPACK_IMPORTED_MODULE_5__.CLASSES.FLEXLAYOUT__TAB_BUTTON_LEADING) }, renderState.leading)) : null;\r\n    if (layout.getEditingTab() === node) {\r\n        content = (react__WEBPACK_IMPORTED_MODULE_0__.createElement(\"input\", { ref: contentRef, className: cm(_Types__WEBPACK_IMPORTED_MODULE_5__.CLASSES.FLEXLAYOUT__TAB_BUTTON_TEXTBOX), \"data-layout-path\": path + \"/textbox\", type: \"text\", autoFocus: true, defaultValue: node.getName(), onKeyDown: onTextBoxKeyPress, onMouseDown: onTextBoxMouseDown, onTouchStart: onTextBoxMouseDown }));\r\n    }\r\n    if (node.isEnableClose() && !isStretch) {\r\n        const closeTitle = layout.i18nName(_I18nLabel__WEBPACK_IMPORTED_MODULE_1__.I18nLabel.Close_Tab);\r\n        renderState.buttons.push(react__WEBPACK_IMPORTED_MODULE_0__.createElement(\"div\", { key: \"close\", \"data-layout-path\": path + \"/button/close\", title: closeTitle, className: cm(_Types__WEBPACK_IMPORTED_MODULE_5__.CLASSES.FLEXLAYOUT__TAB_BUTTON_TRAILING), onMouseDown: onCloseMouseDown, onClick: onClose, onTouchStart: onCloseMouseDown }, (typeof icons.close === \"function\") ? icons.close(node) : icons.close));\r\n    }\r\n    return (react__WEBPACK_IMPORTED_MODULE_0__.createElement(\"div\", { ref: selfRef, \"data-layout-path\": path, className: classNames, onMouseDown: onMouseDown, onClick: onAuxMouseClick, onAuxClick: onAuxMouseClick, onContextMenu: onContextMenu, onTouchStart: onMouseDown, title: node.getHelpText() },\r\n        leading,\r\n        content,\r\n        renderState.buttons));\r\n};\r\n\n\n//# sourceURL=webpack://FlexLayout/./src/view/TabButton.tsx?");
 
 /***/ }),
 
@@ -406,7 +406,7 @@ eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpac
   \**************************************/
 /***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {
 
-eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpack_require__.d(__webpack_exports__, {\n/* harmony export */   \"useTabOverflow\": () => (/* binding */ useTabOverflow)\n/* harmony export */ });\n/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! react */ \"react\");\n/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(react__WEBPACK_IMPORTED_MODULE_0__);\n/* harmony import */ var _Rect__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ../Rect */ \"./src/Rect.ts\");\n/* harmony import */ var _model_TabSetNode__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ../model/TabSetNode */ \"./src/model/TabSetNode.ts\");\n/* harmony import */ var _Orientation__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! ../Orientation */ \"./src/Orientation.ts\");\n\r\n\r\n\r\n\r\n/** @internal */\r\nconst useTabOverflow = (node, orientation, toolbarRef, stickyButtonsRef) => {\r\n    const firstRender = react__WEBPACK_IMPORTED_MODULE_0__.useRef(true);\r\n    const tabsTruncated = react__WEBPACK_IMPORTED_MODULE_0__.useRef(false);\r\n    const lastRect = react__WEBPACK_IMPORTED_MODULE_0__.useRef(new _Rect__WEBPACK_IMPORTED_MODULE_1__.Rect(0, 0, 0, 0));\r\n    const selfRef = react__WEBPACK_IMPORTED_MODULE_0__.useRef(null);\r\n    const [position, setPosition] = react__WEBPACK_IMPORTED_MODULE_0__.useState(0);\r\n    const userControlledLeft = react__WEBPACK_IMPORTED_MODULE_0__.useRef(false);\r\n    const [hiddenTabs, setHiddenTabs] = react__WEBPACK_IMPORTED_MODULE_0__.useState([]);\r\n    const lastHiddenCount = react__WEBPACK_IMPORTED_MODULE_0__.useRef(0);\r\n    // if selected node or tabset/border rectangle change then unset usercontrolled (so selected tab will be kept in view)\r\n    react__WEBPACK_IMPORTED_MODULE_0__.useLayoutEffect(() => {\r\n        userControlledLeft.current = false;\r\n    }, [node.getSelectedNode(), node.getRect().width, node.getRect().height]);\r\n    react__WEBPACK_IMPORTED_MODULE_0__.useLayoutEffect(() => {\r\n        updateVisibleTabs();\r\n    });\r\n    react__WEBPACK_IMPORTED_MODULE_0__.useEffect(() => {\r\n        const instance = selfRef.current;\r\n        instance.addEventListener('wheel', onWheel, { passive: false });\r\n        return () => {\r\n            instance.removeEventListener('wheel', onWheel);\r\n        };\r\n    }, []);\r\n    // needed to prevent default mouse wheel over tabset/border (cannot do with react event?)\r\n    const onWheel = (event) => {\r\n        event.preventDefault();\r\n    };\r\n    const getNear = (rect) => {\r\n        if (orientation === _Orientation__WEBPACK_IMPORTED_MODULE_3__.Orientation.HORZ) {\r\n            return rect.x;\r\n        }\r\n        else {\r\n            return rect.y;\r\n        }\r\n    };\r\n    const getFar = (rect) => {\r\n        if (orientation === _Orientation__WEBPACK_IMPORTED_MODULE_3__.Orientation.HORZ) {\r\n            return rect.getRight();\r\n        }\r\n        else {\r\n            return rect.getBottom();\r\n        }\r\n    };\r\n    const getSize = (rect) => {\r\n        if (orientation === _Orientation__WEBPACK_IMPORTED_MODULE_3__.Orientation.HORZ) {\r\n            return rect.width;\r\n        }\r\n        else {\r\n            return rect.height;\r\n        }\r\n    };\r\n    const updateVisibleTabs = () => {\r\n        const tabMargin = 2;\r\n        if (firstRender.current === true) {\r\n            tabsTruncated.current = false;\r\n        }\r\n        const nodeRect = node instanceof _model_TabSetNode__WEBPACK_IMPORTED_MODULE_2__.TabSetNode ? node.getRect() : node.getTabHeaderRect();\r\n        let lastChild = node.getChildren()[node.getChildren().length - 1];\r\n        const stickyButtonsSize = stickyButtonsRef.current === null ? 0 : getSize(stickyButtonsRef.current.getBoundingClientRect());\r\n        if (firstRender.current === true ||\r\n            (lastHiddenCount.current === 0 && hiddenTabs.length !== 0) ||\r\n            nodeRect.width !== lastRect.current.width || // incase rect changed between first render and second\r\n            nodeRect.height !== lastRect.current.height) {\r\n            lastHiddenCount.current = hiddenTabs.length;\r\n            lastRect.current = nodeRect;\r\n            const enabled = node instanceof _model_TabSetNode__WEBPACK_IMPORTED_MODULE_2__.TabSetNode ? node.isEnableTabStrip() === true : true;\r\n            let endPos = getFar(nodeRect) - stickyButtonsSize;\r\n            if (toolbarRef.current !== null) {\r\n                endPos -= getSize(toolbarRef.current.getBoundingClientRect());\r\n            }\r\n            if (enabled && node.getChildren().length > 0) {\r\n                if (hiddenTabs.length === 0 && position === 0 && getFar(lastChild.getTabRect()) + tabMargin < endPos) {\r\n                    return; // nothing to do all tabs are shown in available space\r\n                }\r\n                let shiftPos = 0;\r\n                const selectedTab = node.getSelectedNode();\r\n                if (selectedTab && !userControlledLeft.current) {\r\n                    const selectedRect = selectedTab.getTabRect();\r\n                    const selectedStart = getNear(selectedRect) - tabMargin;\r\n                    const selectedEnd = getFar(selectedRect) + tabMargin;\r\n                    // when selected tab is larger than available space then align left\r\n                    if (getSize(selectedRect) + 2 * tabMargin >= endPos - getNear(nodeRect)) {\r\n                        shiftPos = getNear(nodeRect) - selectedStart;\r\n                    }\r\n                    else {\r\n                        if (selectedEnd > endPos || selectedStart < getNear(nodeRect)) {\r\n                            if (selectedStart < getNear(nodeRect)) {\r\n                                shiftPos = getNear(nodeRect) - selectedStart;\r\n                            }\r\n                            // use second if statement to prevent tab moving back then forwards if not enough space for single tab\r\n                            if (selectedEnd + shiftPos > endPos) {\r\n                                shiftPos = endPos - selectedEnd;\r\n                            }\r\n                        }\r\n                    }\r\n                }\r\n                const extraSpace = Math.max(0, endPos - (getFar(lastChild.getTabRect()) + tabMargin + shiftPos));\r\n                const newPosition = Math.min(0, position + shiftPos + extraSpace);\r\n                // find hidden tabs\r\n                const diff = newPosition - position;\r\n                const hidden = [];\r\n                for (let i = 0; i < node.getChildren().length; i++) {\r\n                    const child = node.getChildren()[i];\r\n                    if (getNear(child.getTabRect()) + diff < getNear(nodeRect) || getFar(child.getTabRect()) + diff > endPos) {\r\n                        hidden.push({ node: child, index: i });\r\n                    }\r\n                }\r\n                if (hidden.length > 0) {\r\n                    tabsTruncated.current = true;\r\n                }\r\n                firstRender.current = false; // need to do a second render\r\n                setHiddenTabs(hidden);\r\n                setPosition(newPosition);\r\n            }\r\n        }\r\n        else {\r\n            firstRender.current = true;\r\n        }\r\n    };\r\n    const onMouseWheel = (event) => {\r\n        let delta = 0;\r\n        if (Math.abs(event.deltaX) > Math.abs(event.deltaY)) {\r\n            delta = -event.deltaX;\r\n        }\r\n        else {\r\n            delta = -event.deltaY;\r\n        }\r\n        if (event.deltaMode === 1) {\r\n            // DOM_DELTA_LINE\t0x01\tThe delta values are specified in lines.\r\n            delta *= 40;\r\n        }\r\n        setPosition(position + delta);\r\n        userControlledLeft.current = true;\r\n        event.stopPropagation();\r\n    };\r\n    return { selfRef, position, userControlledLeft, hiddenTabs, onMouseWheel, tabsTruncated: tabsTruncated.current };\r\n};\r\n\n\n//# sourceURL=webpack://FlexLayout/./src/view/TabOverflowHook.tsx?");
+eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpack_require__.d(__webpack_exports__, {\n/* harmony export */   \"useTabOverflow\": () => (/* binding */ useTabOverflow)\n/* harmony export */ });\n/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! react */ \"react\");\n/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(react__WEBPACK_IMPORTED_MODULE_0__);\n/* harmony import */ var _Rect__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ../Rect */ \"./src/Rect.ts\");\n/* harmony import */ var _model_TabSetNode__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ../model/TabSetNode */ \"./src/model/TabSetNode.ts\");\n/* harmony import */ var _Orientation__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! ../Orientation */ \"./src/Orientation.ts\");\n\r\n\r\n\r\n\r\n/** @internal */\r\nconst useTabOverflow = (node, orientation, toolbarRef, stickyButtonsRef) => {\r\n    const firstRender = react__WEBPACK_IMPORTED_MODULE_0__.useRef(true);\r\n    const tabsTruncated = react__WEBPACK_IMPORTED_MODULE_0__.useRef(false);\r\n    const lastRect = react__WEBPACK_IMPORTED_MODULE_0__.useRef(new _Rect__WEBPACK_IMPORTED_MODULE_1__.Rect(0, 0, 0, 0));\r\n    const selfRef = react__WEBPACK_IMPORTED_MODULE_0__.useRef(null);\r\n    const [position, setPosition] = react__WEBPACK_IMPORTED_MODULE_0__.useState(0);\r\n    const userControlledLeft = react__WEBPACK_IMPORTED_MODULE_0__.useRef(false);\r\n    const [hiddenTabs, setHiddenTabs] = react__WEBPACK_IMPORTED_MODULE_0__.useState([]);\r\n    const lastHiddenCount = react__WEBPACK_IMPORTED_MODULE_0__.useRef(0);\r\n    // if selected node or tabset/border rectangle change then unset usercontrolled (so selected tab will be kept in view)\r\n    react__WEBPACK_IMPORTED_MODULE_0__.useLayoutEffect(() => {\r\n        userControlledLeft.current = false;\r\n    }, [node.getSelectedNode(), node.getRect().width, node.getRect().height]);\r\n    react__WEBPACK_IMPORTED_MODULE_0__.useLayoutEffect(() => {\r\n        updateVisibleTabs();\r\n    });\r\n    const instance = selfRef.current;\r\n    react__WEBPACK_IMPORTED_MODULE_0__.useEffect(() => {\r\n        if (!instance) {\r\n            return;\r\n        }\r\n        instance.addEventListener(\"wheel\", onWheel, { passive: false });\r\n        return () => {\r\n            instance.removeEventListener(\"wheel\", onWheel);\r\n        };\r\n    }, [instance]);\r\n    // needed to prevent default mouse wheel over tabset/border (cannot do with react event?)\r\n    const onWheel = (event) => {\r\n        event.preventDefault();\r\n    };\r\n    const getNear = (rect) => {\r\n        if (orientation === _Orientation__WEBPACK_IMPORTED_MODULE_3__.Orientation.HORZ) {\r\n            return rect.x;\r\n        }\r\n        else {\r\n            return rect.y;\r\n        }\r\n    };\r\n    const getFar = (rect) => {\r\n        if (orientation === _Orientation__WEBPACK_IMPORTED_MODULE_3__.Orientation.HORZ) {\r\n            return rect.getRight();\r\n        }\r\n        else {\r\n            return rect.getBottom();\r\n        }\r\n    };\r\n    const getSize = (rect) => {\r\n        if (orientation === _Orientation__WEBPACK_IMPORTED_MODULE_3__.Orientation.HORZ) {\r\n            return rect.width;\r\n        }\r\n        else {\r\n            return rect.height;\r\n        }\r\n    };\r\n    const updateVisibleTabs = () => {\r\n        const tabMargin = 2;\r\n        if (firstRender.current === true) {\r\n            tabsTruncated.current = false;\r\n        }\r\n        const nodeRect = node instanceof _model_TabSetNode__WEBPACK_IMPORTED_MODULE_2__.TabSetNode ? node.getRect() : node.getTabHeaderRect();\r\n        let lastChild = node.getChildren()[node.getChildren().length - 1];\r\n        const stickyButtonsSize = stickyButtonsRef.current === null ? 0 : getSize(stickyButtonsRef.current.getBoundingClientRect());\r\n        if (firstRender.current === true ||\r\n            (lastHiddenCount.current === 0 && hiddenTabs.length !== 0) ||\r\n            nodeRect.width !== lastRect.current.width || // incase rect changed between first render and second\r\n            nodeRect.height !== lastRect.current.height) {\r\n            lastHiddenCount.current = hiddenTabs.length;\r\n            lastRect.current = nodeRect;\r\n            const enabled = node instanceof _model_TabSetNode__WEBPACK_IMPORTED_MODULE_2__.TabSetNode ? node.isEnableTabStrip() === true : true;\r\n            let endPos = getFar(nodeRect) - stickyButtonsSize;\r\n            if (toolbarRef.current !== null) {\r\n                endPos -= getSize(toolbarRef.current.getBoundingClientRect());\r\n            }\r\n            if (enabled && node.getChildren().length > 0) {\r\n                if (hiddenTabs.length === 0 && position === 0 && getFar(lastChild.getTabRect()) + tabMargin < endPos) {\r\n                    return; // nothing to do all tabs are shown in available space\r\n                }\r\n                let shiftPos = 0;\r\n                const selectedTab = node.getSelectedNode();\r\n                if (selectedTab && !userControlledLeft.current) {\r\n                    const selectedRect = selectedTab.getTabRect();\r\n                    const selectedStart = getNear(selectedRect) - tabMargin;\r\n                    const selectedEnd = getFar(selectedRect) + tabMargin;\r\n                    // when selected tab is larger than available space then align left\r\n                    if (getSize(selectedRect) + 2 * tabMargin >= endPos - getNear(nodeRect)) {\r\n                        shiftPos = getNear(nodeRect) - selectedStart;\r\n                    }\r\n                    else {\r\n                        if (selectedEnd > endPos || selectedStart < getNear(nodeRect)) {\r\n                            if (selectedStart < getNear(nodeRect)) {\r\n                                shiftPos = getNear(nodeRect) - selectedStart;\r\n                            }\r\n                            // use second if statement to prevent tab moving back then forwards if not enough space for single tab\r\n                            if (selectedEnd + shiftPos > endPos) {\r\n                                shiftPos = endPos - selectedEnd;\r\n                            }\r\n                        }\r\n                    }\r\n                }\r\n                const extraSpace = Math.max(0, endPos - (getFar(lastChild.getTabRect()) + tabMargin + shiftPos));\r\n                const newPosition = Math.min(0, position + shiftPos + extraSpace);\r\n                // find hidden tabs\r\n                const diff = newPosition - position;\r\n                const hidden = [];\r\n                for (let i = 0; i < node.getChildren().length; i++) {\r\n                    const child = node.getChildren()[i];\r\n                    if (getNear(child.getTabRect()) + diff < getNear(nodeRect) || getFar(child.getTabRect()) + diff > endPos) {\r\n                        hidden.push({ node: child, index: i });\r\n                    }\r\n                }\r\n                if (hidden.length > 0) {\r\n                    tabsTruncated.current = true;\r\n                }\r\n                firstRender.current = false; // need to do a second render\r\n                setHiddenTabs(hidden);\r\n                setPosition(newPosition);\r\n            }\r\n        }\r\n        else {\r\n            firstRender.current = true;\r\n        }\r\n    };\r\n    const onMouseWheel = (event) => {\r\n        let delta = 0;\r\n        if (Math.abs(event.deltaX) > Math.abs(event.deltaY)) {\r\n            delta = -event.deltaX;\r\n        }\r\n        else {\r\n            delta = -event.deltaY;\r\n        }\r\n        if (event.deltaMode === 1) {\r\n            // DOM_DELTA_LINE\t0x01\tThe delta values are specified in lines.\r\n            delta *= 40;\r\n        }\r\n        setPosition(position + delta);\r\n        userControlledLeft.current = true;\r\n        event.stopPropagation();\r\n    };\r\n    return { selfRef, position, userControlledLeft, hiddenTabs, onMouseWheel, tabsTruncated: tabsTruncated.current };\r\n};\r\n\n\n//# sourceURL=webpack://FlexLayout/./src/view/TabOverflowHook.tsx?");
 
 /***/ }),
 
@@ -416,7 +416,7 @@ eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpac
   \*****************************/
 /***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {
 
-eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpack_require__.d(__webpack_exports__, {\n/* harmony export */   \"TabSet\": () => (/* binding */ TabSet)\n/* harmony export */ });\n/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! react */ \"react\");\n/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(react__WEBPACK_IMPORTED_MODULE_0__);\n/* harmony import */ var _I18nLabel__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ../I18nLabel */ \"./src/I18nLabel.ts\");\n/* harmony import */ var _model_Actions__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ../model/Actions */ \"./src/model/Actions.ts\");\n/* harmony import */ var _PopupMenu__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! ../PopupMenu */ \"./src/PopupMenu.tsx\");\n/* harmony import */ var _TabButton__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(/*! ./TabButton */ \"./src/view/TabButton.tsx\");\n/* harmony import */ var _TabOverflowHook__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__(/*! ./TabOverflowHook */ \"./src/view/TabOverflowHook.tsx\");\n/* harmony import */ var _Orientation__WEBPACK_IMPORTED_MODULE_6__ = __webpack_require__(/*! ../Orientation */ \"./src/Orientation.ts\");\n/* harmony import */ var _Types__WEBPACK_IMPORTED_MODULE_7__ = __webpack_require__(/*! ../Types */ \"./src/Types.ts\");\n/* harmony import */ var _Utils__WEBPACK_IMPORTED_MODULE_8__ = __webpack_require__(/*! ./Utils */ \"./src/view/Utils.tsx\");\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n/** @internal */\r\nconst TabSet = (props) => {\r\n    const { node, layout, iconFactory, titleFactory, icons, path } = props;\r\n    const toolbarRef = react__WEBPACK_IMPORTED_MODULE_0__.useRef(null);\r\n    const overflowbuttonRef = react__WEBPACK_IMPORTED_MODULE_0__.useRef(null);\r\n    const tabbarInnerRef = react__WEBPACK_IMPORTED_MODULE_0__.useRef(null);\r\n    const stickyButtonsRef = react__WEBPACK_IMPORTED_MODULE_0__.useRef(null);\r\n    const { selfRef, position, userControlledLeft, hiddenTabs, onMouseWheel, tabsTruncated } = (0,_TabOverflowHook__WEBPACK_IMPORTED_MODULE_5__.useTabOverflow)(node, _Orientation__WEBPACK_IMPORTED_MODULE_6__.Orientation.HORZ, toolbarRef, stickyButtonsRef);\r\n    const onOverflowClick = (event) => {\r\n        const callback = layout.getShowOverflowMenu();\r\n        if (callback !== undefined) {\r\n            callback(node, event, hiddenTabs, onOverflowItemSelect);\r\n        }\r\n        else {\r\n            const element = overflowbuttonRef.current;\r\n            (0,_PopupMenu__WEBPACK_IMPORTED_MODULE_3__.showPopup)(element, hiddenTabs, onOverflowItemSelect, layout, iconFactory, titleFactory);\r\n        }\r\n        event.stopPropagation();\r\n    };\r\n    const onOverflowItemSelect = (item) => {\r\n        layout.doAction(_model_Actions__WEBPACK_IMPORTED_MODULE_2__.Actions.selectTab(item.node.getId()));\r\n        userControlledLeft.current = false;\r\n    };\r\n    const onMouseDown = (event) => {\r\n        if (!(0,_Utils__WEBPACK_IMPORTED_MODULE_8__.isAuxMouseEvent)(event)) {\r\n            let name = node.getName();\r\n            if (name === undefined) {\r\n                name = \"\";\r\n            }\r\n            else {\r\n                name = \": \" + name;\r\n            }\r\n            layout.doAction(_model_Actions__WEBPACK_IMPORTED_MODULE_2__.Actions.setActiveTabset(node.getId()));\r\n            if (!layout.getEditingTab()) {\r\n                const message = layout.i18nName(_I18nLabel__WEBPACK_IMPORTED_MODULE_1__.I18nLabel.Move_Tabset, name);\r\n                if (node.getModel().getMaximizedTabset() !== undefined) {\r\n                    layout.dragStart(event, message, node, false, (event2) => undefined, onDoubleClick);\r\n                }\r\n                else {\r\n                    layout.dragStart(event, message, node, node.isEnableDrag(), (event2) => undefined, onDoubleClick);\r\n                }\r\n            }\r\n        }\r\n    };\r\n    const onAuxMouseClick = (event) => {\r\n        if ((0,_Utils__WEBPACK_IMPORTED_MODULE_8__.isAuxMouseEvent)(event)) {\r\n            layout.auxMouseClick(node, event);\r\n        }\r\n    };\r\n    const onContextMenu = (event) => {\r\n        layout.showContextMenu(node, event);\r\n    };\r\n    const onInterceptMouseDown = (event) => {\r\n        event.stopPropagation();\r\n    };\r\n    const onMaximizeToggle = (event) => {\r\n        if (node.canMaximize()) {\r\n            layout.maximize(node);\r\n        }\r\n        event.stopPropagation();\r\n    };\r\n    const onClose = (event) => {\r\n        layout.doAction(_model_Actions__WEBPACK_IMPORTED_MODULE_2__.Actions.deleteTabset(node.getId()));\r\n        event.stopPropagation();\r\n    };\r\n    const onFloatTab = (event) => {\r\n        if (selectedTabNode !== undefined) {\r\n            layout.doAction(_model_Actions__WEBPACK_IMPORTED_MODULE_2__.Actions.floatTab(selectedTabNode.getId()));\r\n        }\r\n        event.stopPropagation();\r\n    };\r\n    const onDoubleClick = (event) => {\r\n        if (node.canMaximize()) {\r\n            layout.maximize(node);\r\n        }\r\n    };\r\n    // Start Render\r\n    const cm = layout.getClassName;\r\n    // tabbar inner can get shifted left via tab rename, this resets scrollleft to 0\r\n    if (tabbarInnerRef.current !== null && tabbarInnerRef.current.scrollLeft !== 0) {\r\n        tabbarInnerRef.current.scrollLeft = 0;\r\n    }\r\n    const selectedTabNode = node.getSelectedNode();\r\n    let style = node._styleWithPosition();\r\n    if (node.getModel().getMaximizedTabset() !== undefined && !node.isMaximized()) {\r\n        (0,_Utils__WEBPACK_IMPORTED_MODULE_8__.hideElement)(style, node.getModel().isUseVisibility());\r\n    }\r\n    const tabs = [];\r\n    if (node.isEnableTabStrip()) {\r\n        for (let i = 0; i < node.getChildren().length; i++) {\r\n            const child = node.getChildren()[i];\r\n            let isSelected = node.getSelected() === i;\r\n            tabs.push(react__WEBPACK_IMPORTED_MODULE_0__.createElement(_TabButton__WEBPACK_IMPORTED_MODULE_4__.TabButton, { layout: layout, node: child, path: path + \"/tb\" + i, key: child.getId(), selected: isSelected, iconFactory: iconFactory, titleFactory: titleFactory, icons: icons }));\r\n            if (i < node.getChildren().length - 1) {\r\n                tabs.push(react__WEBPACK_IMPORTED_MODULE_0__.createElement(\"div\", { key: \"divider\" + i, className: cm(_Types__WEBPACK_IMPORTED_MODULE_7__.CLASSES.FLEXLAYOUT__TABSET_TAB_DIVIDER) }));\r\n            }\r\n        }\r\n    }\r\n    const showHeader = node.getName() !== undefined;\r\n    let stickyButtons = [];\r\n    let buttons = [];\r\n    let headerButtons = [];\r\n    // allow customization of header contents and buttons\r\n    const renderState = { headerContent: node.getName(), stickyButtons, buttons, headerButtons, overflowPosition: undefined };\r\n    layout.customizeTabSet(node, renderState);\r\n    const headerContent = renderState.headerContent;\r\n    stickyButtons = renderState.stickyButtons;\r\n    buttons = renderState.buttons;\r\n    headerButtons = renderState.headerButtons;\r\n    if (renderState.overflowPosition === undefined) {\r\n        renderState.overflowPosition = stickyButtons.length;\r\n    }\r\n    if (stickyButtons.length > 0) {\r\n        if (tabsTruncated) {\r\n            buttons = [...stickyButtons, ...buttons];\r\n        }\r\n        else {\r\n            tabs.push(react__WEBPACK_IMPORTED_MODULE_0__.createElement(\"div\", { ref: stickyButtonsRef, key: \"sticky_buttons_container\", onMouseDown: onInterceptMouseDown, onTouchStart: onInterceptMouseDown, onDragStart: (e) => { e.preventDefault(); }, className: cm(_Types__WEBPACK_IMPORTED_MODULE_7__.CLASSES.FLEXLAYOUT__TAB_TOOLBAR_STICKY_BUTTONS_CONTAINER) }, stickyButtons));\r\n        }\r\n    }\r\n    if (hiddenTabs.length > 0) {\r\n        const overflowTitle = layout.i18nName(_I18nLabel__WEBPACK_IMPORTED_MODULE_1__.I18nLabel.Overflow_Menu_Tooltip);\r\n        let overflowContent;\r\n        if (typeof icons.more === \"function\") {\r\n            overflowContent = icons.more(node, hiddenTabs);\r\n        }\r\n        else {\r\n            overflowContent = (react__WEBPACK_IMPORTED_MODULE_0__.createElement(react__WEBPACK_IMPORTED_MODULE_0__.Fragment, null,\r\n                icons.more,\r\n                react__WEBPACK_IMPORTED_MODULE_0__.createElement(\"div\", { className: cm(_Types__WEBPACK_IMPORTED_MODULE_7__.CLASSES.FLEXLAYOUT__TAB_BUTTON_OVERFLOW_COUNT) }, hiddenTabs.length)));\r\n        }\r\n        buttons.splice(Math.min(renderState.overflowPosition, buttons.length), 0, react__WEBPACK_IMPORTED_MODULE_0__.createElement(\"button\", { key: \"overflowbutton\", \"data-layout-path\": path + \"/button/overflow\", ref: overflowbuttonRef, className: cm(_Types__WEBPACK_IMPORTED_MODULE_7__.CLASSES.FLEXLAYOUT__TAB_TOOLBAR_BUTTON) + \" \" + cm(_Types__WEBPACK_IMPORTED_MODULE_7__.CLASSES.FLEXLAYOUT__TAB_BUTTON_OVERFLOW), title: overflowTitle, onClick: onOverflowClick, onMouseDown: onInterceptMouseDown, onTouchStart: onInterceptMouseDown }, overflowContent));\r\n    }\r\n    if (selectedTabNode !== undefined && layout.isSupportsPopout() && selectedTabNode.isEnableFloat() && !selectedTabNode.isFloating()) {\r\n        const floatTitle = layout.i18nName(_I18nLabel__WEBPACK_IMPORTED_MODULE_1__.I18nLabel.Float_Tab);\r\n        buttons.push(react__WEBPACK_IMPORTED_MODULE_0__.createElement(\"button\", { key: \"float\", \"data-layout-path\": path + \"/button/float\", title: floatTitle, className: cm(_Types__WEBPACK_IMPORTED_MODULE_7__.CLASSES.FLEXLAYOUT__TAB_TOOLBAR_BUTTON) + \" \" + cm(_Types__WEBPACK_IMPORTED_MODULE_7__.CLASSES.FLEXLAYOUT__TAB_TOOLBAR_BUTTON_FLOAT), onClick: onFloatTab, onMouseDown: onInterceptMouseDown, onTouchStart: onInterceptMouseDown }, (typeof icons.popout === \"function\") ? icons.popout(selectedTabNode) : icons.popout));\r\n    }\r\n    if (node.canMaximize()) {\r\n        const minTitle = layout.i18nName(_I18nLabel__WEBPACK_IMPORTED_MODULE_1__.I18nLabel.Restore);\r\n        const maxTitle = layout.i18nName(_I18nLabel__WEBPACK_IMPORTED_MODULE_1__.I18nLabel.Maximize);\r\n        const btns = showHeader ? headerButtons : buttons;\r\n        btns.push(react__WEBPACK_IMPORTED_MODULE_0__.createElement(\"button\", { key: \"max\", \"data-layout-path\": path + \"/button/max\", title: node.isMaximized() ? minTitle : maxTitle, className: cm(_Types__WEBPACK_IMPORTED_MODULE_7__.CLASSES.FLEXLAYOUT__TAB_TOOLBAR_BUTTON) + \" \" + cm(_Types__WEBPACK_IMPORTED_MODULE_7__.CLASSES.FLEXLAYOUT__TAB_TOOLBAR_BUTTON_ + (node.isMaximized() ? \"max\" : \"min\")), onClick: onMaximizeToggle, onMouseDown: onInterceptMouseDown, onTouchStart: onInterceptMouseDown }, node.isMaximized() ?\r\n            (typeof icons.restore === \"function\") ? icons.restore(node) : icons.restore :\r\n            (typeof icons.maximize === \"function\") ? icons.maximize(node) : icons.maximize));\r\n    }\r\n    if (!node.isMaximized() && node.isEnableClose()) {\r\n        const title = layout.i18nName(_I18nLabel__WEBPACK_IMPORTED_MODULE_1__.I18nLabel.Close_Tabset);\r\n        const btns = showHeader ? headerButtons : buttons;\r\n        btns.push(react__WEBPACK_IMPORTED_MODULE_0__.createElement(\"button\", { key: \"close\", \"data-layout-path\": path + \"/button/close\", title: title, className: cm(_Types__WEBPACK_IMPORTED_MODULE_7__.CLASSES.FLEXLAYOUT__TAB_TOOLBAR_BUTTON) + \" \" + cm(_Types__WEBPACK_IMPORTED_MODULE_7__.CLASSES.FLEXLAYOUT__TAB_TOOLBAR_BUTTON_CLOSE), onClick: onClose, onMouseDown: onInterceptMouseDown, onTouchStart: onInterceptMouseDown }, (typeof icons.closeTabset === \"function\") ? icons.closeTabset(node) : icons.closeTabset));\r\n    }\r\n    const toolbar = (react__WEBPACK_IMPORTED_MODULE_0__.createElement(\"div\", { key: \"toolbar\", ref: toolbarRef, className: cm(_Types__WEBPACK_IMPORTED_MODULE_7__.CLASSES.FLEXLAYOUT__TAB_TOOLBAR), onMouseDown: onInterceptMouseDown, onTouchStart: onInterceptMouseDown, onDragStart: (e) => { e.preventDefault(); } }, buttons));\r\n    let header;\r\n    let tabStrip;\r\n    let tabStripClasses = cm(_Types__WEBPACK_IMPORTED_MODULE_7__.CLASSES.FLEXLAYOUT__TABSET_TABBAR_OUTER);\r\n    if (node.getClassNameTabStrip() !== undefined) {\r\n        tabStripClasses += \" \" + node.getClassNameTabStrip();\r\n    }\r\n    tabStripClasses += \" \" + _Types__WEBPACK_IMPORTED_MODULE_7__.CLASSES.FLEXLAYOUT__TABSET_TABBAR_OUTER_ + node.getTabLocation();\r\n    if (node.isActive() && !showHeader) {\r\n        tabStripClasses += \" \" + cm(_Types__WEBPACK_IMPORTED_MODULE_7__.CLASSES.FLEXLAYOUT__TABSET_SELECTED);\r\n    }\r\n    if (node.isMaximized() && !showHeader) {\r\n        tabStripClasses += \" \" + cm(_Types__WEBPACK_IMPORTED_MODULE_7__.CLASSES.FLEXLAYOUT__TABSET_MAXIMIZED);\r\n    }\r\n    if (showHeader) {\r\n        const headerToolbar = (react__WEBPACK_IMPORTED_MODULE_0__.createElement(\"div\", { key: \"toolbar\", ref: toolbarRef, className: cm(_Types__WEBPACK_IMPORTED_MODULE_7__.CLASSES.FLEXLAYOUT__TAB_TOOLBAR), onMouseDown: onInterceptMouseDown, onTouchStart: onInterceptMouseDown, onDragStart: (e) => { e.preventDefault(); } }, headerButtons));\r\n        let tabHeaderClasses = cm(_Types__WEBPACK_IMPORTED_MODULE_7__.CLASSES.FLEXLAYOUT__TABSET_HEADER);\r\n        if (node.isActive()) {\r\n            tabHeaderClasses += \" \" + cm(_Types__WEBPACK_IMPORTED_MODULE_7__.CLASSES.FLEXLAYOUT__TABSET_SELECTED);\r\n        }\r\n        if (node.isMaximized()) {\r\n            tabHeaderClasses += \" \" + cm(_Types__WEBPACK_IMPORTED_MODULE_7__.CLASSES.FLEXLAYOUT__TABSET_MAXIMIZED);\r\n        }\r\n        if (node.getClassNameHeader() !== undefined) {\r\n            tabHeaderClasses += \" \" + node.getClassNameHeader();\r\n        }\r\n        header = (react__WEBPACK_IMPORTED_MODULE_0__.createElement(\"div\", { className: tabHeaderClasses, style: { height: node.getHeaderHeight() + \"px\" }, \"data-layout-path\": path + \"/header\", onMouseDown: onMouseDown, onContextMenu: onContextMenu, onClick: onAuxMouseClick, onAuxClick: onAuxMouseClick, onTouchStart: onMouseDown },\r\n            react__WEBPACK_IMPORTED_MODULE_0__.createElement(\"div\", { className: cm(_Types__WEBPACK_IMPORTED_MODULE_7__.CLASSES.FLEXLAYOUT__TABSET_HEADER_CONTENT) }, headerContent),\r\n            headerToolbar));\r\n    }\r\n    const tabStripStyle = { height: node.getTabStripHeight() + \"px\" };\r\n    tabStrip = (react__WEBPACK_IMPORTED_MODULE_0__.createElement(\"div\", { className: tabStripClasses, style: tabStripStyle, \"data-layout-path\": path + \"/tabstrip\", onMouseDown: onMouseDown, onContextMenu: onContextMenu, onClick: onAuxMouseClick, onAuxClick: onAuxMouseClick, onTouchStart: onMouseDown },\r\n        react__WEBPACK_IMPORTED_MODULE_0__.createElement(\"div\", { ref: tabbarInnerRef, className: cm(_Types__WEBPACK_IMPORTED_MODULE_7__.CLASSES.FLEXLAYOUT__TABSET_TABBAR_INNER) + \" \" + cm(_Types__WEBPACK_IMPORTED_MODULE_7__.CLASSES.FLEXLAYOUT__TABSET_TABBAR_INNER_ + node.getTabLocation()) },\r\n            react__WEBPACK_IMPORTED_MODULE_0__.createElement(\"div\", { style: { left: position }, className: cm(_Types__WEBPACK_IMPORTED_MODULE_7__.CLASSES.FLEXLAYOUT__TABSET_TABBAR_INNER_TAB_CONTAINER) + \" \" + cm(_Types__WEBPACK_IMPORTED_MODULE_7__.CLASSES.FLEXLAYOUT__TABSET_TABBAR_INNER_TAB_CONTAINER_ + node.getTabLocation()) }, tabs)),\r\n        toolbar));\r\n    style = layout.styleFont(style);\r\n    var placeHolder = undefined;\r\n    if (node.getChildren().length === 0) {\r\n        const placeHolderCallback = layout.getTabSetPlaceHolderCallback();\r\n        if (placeHolderCallback) {\r\n            placeHolder = placeHolderCallback(node);\r\n        }\r\n    }\r\n    const center = react__WEBPACK_IMPORTED_MODULE_0__.createElement(\"div\", { className: cm(_Types__WEBPACK_IMPORTED_MODULE_7__.CLASSES.FLEXLAYOUT__TABSET_CONTENT) }, placeHolder);\r\n    var content;\r\n    if (node.getTabLocation() === \"top\") {\r\n        content = react__WEBPACK_IMPORTED_MODULE_0__.createElement(react__WEBPACK_IMPORTED_MODULE_0__.Fragment, null,\r\n            header,\r\n            tabStrip,\r\n            center);\r\n    }\r\n    else {\r\n        content = react__WEBPACK_IMPORTED_MODULE_0__.createElement(react__WEBPACK_IMPORTED_MODULE_0__.Fragment, null,\r\n            header,\r\n            center,\r\n            tabStrip);\r\n    }\r\n    return (react__WEBPACK_IMPORTED_MODULE_0__.createElement(\"div\", { ref: selfRef, dir: \"ltr\", \"data-layout-path\": path, style: style, className: cm(_Types__WEBPACK_IMPORTED_MODULE_7__.CLASSES.FLEXLAYOUT__TABSET), onWheel: onMouseWheel }, content));\r\n};\r\n\n\n//# sourceURL=webpack://FlexLayout/./src/view/TabSet.tsx?");
+eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpack_require__.d(__webpack_exports__, {\n/* harmony export */   \"TabSet\": () => (/* binding */ TabSet)\n/* harmony export */ });\n/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! react */ \"react\");\n/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(react__WEBPACK_IMPORTED_MODULE_0__);\n/* harmony import */ var _I18nLabel__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ../I18nLabel */ \"./src/I18nLabel.ts\");\n/* harmony import */ var _model_Actions__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ../model/Actions */ \"./src/model/Actions.ts\");\n/* harmony import */ var _PopupMenu__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! ../PopupMenu */ \"./src/PopupMenu.tsx\");\n/* harmony import */ var _TabButton__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(/*! ./TabButton */ \"./src/view/TabButton.tsx\");\n/* harmony import */ var _TabOverflowHook__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__(/*! ./TabOverflowHook */ \"./src/view/TabOverflowHook.tsx\");\n/* harmony import */ var _Orientation__WEBPACK_IMPORTED_MODULE_6__ = __webpack_require__(/*! ../Orientation */ \"./src/Orientation.ts\");\n/* harmony import */ var _Types__WEBPACK_IMPORTED_MODULE_7__ = __webpack_require__(/*! ../Types */ \"./src/Types.ts\");\n/* harmony import */ var _Utils__WEBPACK_IMPORTED_MODULE_8__ = __webpack_require__(/*! ./Utils */ \"./src/view/Utils.tsx\");\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n/** @internal */\r\nconst TabSet = (props) => {\r\n    const { node, layout, iconFactory, titleFactory, icons, path } = props;\r\n    const toolbarRef = react__WEBPACK_IMPORTED_MODULE_0__.useRef(null);\r\n    const overflowbuttonRef = react__WEBPACK_IMPORTED_MODULE_0__.useRef(null);\r\n    const tabbarInnerRef = react__WEBPACK_IMPORTED_MODULE_0__.useRef(null);\r\n    const stickyButtonsRef = react__WEBPACK_IMPORTED_MODULE_0__.useRef(null);\r\n    const { selfRef, position, userControlledLeft, hiddenTabs, onMouseWheel, tabsTruncated } = (0,_TabOverflowHook__WEBPACK_IMPORTED_MODULE_5__.useTabOverflow)(node, _Orientation__WEBPACK_IMPORTED_MODULE_6__.Orientation.HORZ, toolbarRef, stickyButtonsRef);\r\n    const onOverflowClick = (event) => {\r\n        const callback = layout.getShowOverflowMenu();\r\n        if (callback !== undefined) {\r\n            callback(node, event, hiddenTabs, onOverflowItemSelect);\r\n        }\r\n        else {\r\n            const element = overflowbuttonRef.current;\r\n            (0,_PopupMenu__WEBPACK_IMPORTED_MODULE_3__.showPopup)(element, hiddenTabs, onOverflowItemSelect, layout, iconFactory, titleFactory);\r\n        }\r\n        event.stopPropagation();\r\n    };\r\n    const onOverflowItemSelect = (item) => {\r\n        layout.doAction(_model_Actions__WEBPACK_IMPORTED_MODULE_2__.Actions.selectTab(item.node.getId()));\r\n        userControlledLeft.current = false;\r\n    };\r\n    const onMouseDown = (event) => {\r\n        if (!(0,_Utils__WEBPACK_IMPORTED_MODULE_8__.isAuxMouseEvent)(event)) {\r\n            let name = node.getName();\r\n            if (name === undefined) {\r\n                name = \"\";\r\n            }\r\n            else {\r\n                name = \": \" + name;\r\n            }\r\n            layout.doAction(_model_Actions__WEBPACK_IMPORTED_MODULE_2__.Actions.setActiveTabset(node.getId()));\r\n            if (!layout.getEditingTab()) {\r\n                const message = layout.i18nName(_I18nLabel__WEBPACK_IMPORTED_MODULE_1__.I18nLabel.Move_Tabset, name);\r\n                if (node.getModel().getMaximizedTabset() !== undefined) {\r\n                    layout.dragStart(event, message, node, false, (event2) => undefined, onDoubleClick);\r\n                }\r\n                else {\r\n                    layout.dragStart(event, message, node, node.isEnableDrag(), (event2) => undefined, onDoubleClick);\r\n                }\r\n            }\r\n        }\r\n    };\r\n    const onAuxMouseClick = (event) => {\r\n        if ((0,_Utils__WEBPACK_IMPORTED_MODULE_8__.isAuxMouseEvent)(event)) {\r\n            layout.auxMouseClick(node, event);\r\n        }\r\n    };\r\n    const onContextMenu = (event) => {\r\n        layout.showContextMenu(node, event);\r\n    };\r\n    const onInterceptMouseDown = (event) => {\r\n        event.stopPropagation();\r\n    };\r\n    const onMaximizeToggle = (event) => {\r\n        if (node.canMaximize()) {\r\n            layout.maximize(node);\r\n        }\r\n        event.stopPropagation();\r\n    };\r\n    const onClose = (event) => {\r\n        layout.doAction(_model_Actions__WEBPACK_IMPORTED_MODULE_2__.Actions.deleteTabset(node.getId()));\r\n        event.stopPropagation();\r\n    };\r\n    const onCloseTab = (event) => {\r\n        layout.doAction(_model_Actions__WEBPACK_IMPORTED_MODULE_2__.Actions.deleteTab(node.getChildren()[0].getId()));\r\n        event.stopPropagation();\r\n    };\r\n    const onFloatTab = (event) => {\r\n        if (selectedTabNode !== undefined) {\r\n            layout.doAction(_model_Actions__WEBPACK_IMPORTED_MODULE_2__.Actions.floatTab(selectedTabNode.getId()));\r\n        }\r\n        event.stopPropagation();\r\n    };\r\n    const onDoubleClick = (event) => {\r\n        if (node.canMaximize()) {\r\n            layout.maximize(node);\r\n        }\r\n    };\r\n    // Start Render\r\n    const cm = layout.getClassName;\r\n    // tabbar inner can get shifted left via tab rename, this resets scrollleft to 0\r\n    if (tabbarInnerRef.current !== null && tabbarInnerRef.current.scrollLeft !== 0) {\r\n        tabbarInnerRef.current.scrollLeft = 0;\r\n    }\r\n    const selectedTabNode = node.getSelectedNode();\r\n    let style = node._styleWithPosition();\r\n    if (node.getModel().getMaximizedTabset() !== undefined && !node.isMaximized()) {\r\n        (0,_Utils__WEBPACK_IMPORTED_MODULE_8__.hideElement)(style, node.getModel().isUseVisibility());\r\n    }\r\n    const tabs = [];\r\n    if (node.isEnableTabStrip()) {\r\n        for (let i = 0; i < node.getChildren().length; i++) {\r\n            const child = node.getChildren()[i];\r\n            let isSelected = node.getSelected() === i;\r\n            tabs.push(react__WEBPACK_IMPORTED_MODULE_0__.createElement(_TabButton__WEBPACK_IMPORTED_MODULE_4__.TabButton, { layout: layout, node: child, path: path + \"/tb\" + i, key: child.getId(), selected: isSelected, iconFactory: iconFactory, titleFactory: titleFactory, icons: icons }));\r\n            if (i < node.getChildren().length - 1) {\r\n                tabs.push(react__WEBPACK_IMPORTED_MODULE_0__.createElement(\"div\", { key: \"divider\" + i, className: cm(_Types__WEBPACK_IMPORTED_MODULE_7__.CLASSES.FLEXLAYOUT__TABSET_TAB_DIVIDER) }));\r\n            }\r\n        }\r\n    }\r\n    const showHeader = node.getName() !== undefined;\r\n    let stickyButtons = [];\r\n    let buttons = [];\r\n    let headerButtons = [];\r\n    // allow customization of header contents and buttons\r\n    const renderState = { headerContent: node.getName(), stickyButtons, buttons, headerButtons, overflowPosition: undefined };\r\n    layout.customizeTabSet(node, renderState);\r\n    const headerContent = renderState.headerContent;\r\n    stickyButtons = renderState.stickyButtons;\r\n    buttons = renderState.buttons;\r\n    headerButtons = renderState.headerButtons;\r\n    const isTabStretch = node.isEnableSingleTabStretch() && node.getChildren().length === 1;\r\n    const showClose = (isTabStretch && (node.getChildren()[0].isEnableClose())) || node.isEnableClose();\r\n    if (renderState.overflowPosition === undefined) {\r\n        renderState.overflowPosition = stickyButtons.length;\r\n    }\r\n    if (stickyButtons.length > 0) {\r\n        if (tabsTruncated || isTabStretch) {\r\n            buttons = [...stickyButtons, ...buttons];\r\n        }\r\n        else {\r\n            tabs.push(react__WEBPACK_IMPORTED_MODULE_0__.createElement(\"div\", { ref: stickyButtonsRef, key: \"sticky_buttons_container\", onMouseDown: onInterceptMouseDown, onTouchStart: onInterceptMouseDown, onDragStart: (e) => { e.preventDefault(); }, className: cm(_Types__WEBPACK_IMPORTED_MODULE_7__.CLASSES.FLEXLAYOUT__TAB_TOOLBAR_STICKY_BUTTONS_CONTAINER) }, stickyButtons));\r\n        }\r\n    }\r\n    if (hiddenTabs.length > 0) {\r\n        const overflowTitle = layout.i18nName(_I18nLabel__WEBPACK_IMPORTED_MODULE_1__.I18nLabel.Overflow_Menu_Tooltip);\r\n        let overflowContent;\r\n        if (typeof icons.more === \"function\") {\r\n            overflowContent = icons.more(node, hiddenTabs);\r\n        }\r\n        else {\r\n            overflowContent = (react__WEBPACK_IMPORTED_MODULE_0__.createElement(react__WEBPACK_IMPORTED_MODULE_0__.Fragment, null,\r\n                icons.more,\r\n                react__WEBPACK_IMPORTED_MODULE_0__.createElement(\"div\", { className: cm(_Types__WEBPACK_IMPORTED_MODULE_7__.CLASSES.FLEXLAYOUT__TAB_BUTTON_OVERFLOW_COUNT) }, hiddenTabs.length)));\r\n        }\r\n        buttons.splice(Math.min(renderState.overflowPosition, buttons.length), 0, react__WEBPACK_IMPORTED_MODULE_0__.createElement(\"button\", { key: \"overflowbutton\", \"data-layout-path\": path + \"/button/overflow\", ref: overflowbuttonRef, className: cm(_Types__WEBPACK_IMPORTED_MODULE_7__.CLASSES.FLEXLAYOUT__TAB_TOOLBAR_BUTTON) + \" \" + cm(_Types__WEBPACK_IMPORTED_MODULE_7__.CLASSES.FLEXLAYOUT__TAB_BUTTON_OVERFLOW), title: overflowTitle, onClick: onOverflowClick, onMouseDown: onInterceptMouseDown, onTouchStart: onInterceptMouseDown }, overflowContent));\r\n    }\r\n    if (selectedTabNode !== undefined && layout.isSupportsPopout() && selectedTabNode.isEnableFloat() && !selectedTabNode.isFloating()) {\r\n        const floatTitle = layout.i18nName(_I18nLabel__WEBPACK_IMPORTED_MODULE_1__.I18nLabel.Float_Tab);\r\n        buttons.push(react__WEBPACK_IMPORTED_MODULE_0__.createElement(\"button\", { key: \"float\", \"data-layout-path\": path + \"/button/float\", title: floatTitle, className: cm(_Types__WEBPACK_IMPORTED_MODULE_7__.CLASSES.FLEXLAYOUT__TAB_TOOLBAR_BUTTON) + \" \" + cm(_Types__WEBPACK_IMPORTED_MODULE_7__.CLASSES.FLEXLAYOUT__TAB_TOOLBAR_BUTTON_FLOAT), onClick: onFloatTab, onMouseDown: onInterceptMouseDown, onTouchStart: onInterceptMouseDown }, (typeof icons.popout === \"function\") ? icons.popout(selectedTabNode) : icons.popout));\r\n    }\r\n    if (node.canMaximize()) {\r\n        const minTitle = layout.i18nName(_I18nLabel__WEBPACK_IMPORTED_MODULE_1__.I18nLabel.Restore);\r\n        const maxTitle = layout.i18nName(_I18nLabel__WEBPACK_IMPORTED_MODULE_1__.I18nLabel.Maximize);\r\n        const btns = showHeader ? headerButtons : buttons;\r\n        btns.push(react__WEBPACK_IMPORTED_MODULE_0__.createElement(\"button\", { key: \"max\", \"data-layout-path\": path + \"/button/max\", title: node.isMaximized() ? minTitle : maxTitle, className: cm(_Types__WEBPACK_IMPORTED_MODULE_7__.CLASSES.FLEXLAYOUT__TAB_TOOLBAR_BUTTON) + \" \" + cm(_Types__WEBPACK_IMPORTED_MODULE_7__.CLASSES.FLEXLAYOUT__TAB_TOOLBAR_BUTTON_ + (node.isMaximized() ? \"max\" : \"min\")), onClick: onMaximizeToggle, onMouseDown: onInterceptMouseDown, onTouchStart: onInterceptMouseDown }, node.isMaximized() ?\r\n            (typeof icons.restore === \"function\") ? icons.restore(node) : icons.restore :\r\n            (typeof icons.maximize === \"function\") ? icons.maximize(node) : icons.maximize));\r\n    }\r\n    if (!node.isMaximized() && showClose) {\r\n        const title = isTabStretch ? layout.i18nName(_I18nLabel__WEBPACK_IMPORTED_MODULE_1__.I18nLabel.Close_Tab) : layout.i18nName(_I18nLabel__WEBPACK_IMPORTED_MODULE_1__.I18nLabel.Close_Tabset);\r\n        const btns = showHeader ? headerButtons : buttons;\r\n        btns.push(react__WEBPACK_IMPORTED_MODULE_0__.createElement(\"button\", { key: \"close\", \"data-layout-path\": path + \"/button/close\", title: title, className: cm(_Types__WEBPACK_IMPORTED_MODULE_7__.CLASSES.FLEXLAYOUT__TAB_TOOLBAR_BUTTON) + \" \" + cm(_Types__WEBPACK_IMPORTED_MODULE_7__.CLASSES.FLEXLAYOUT__TAB_TOOLBAR_BUTTON_CLOSE), onClick: isTabStretch ? onCloseTab : onClose, onMouseDown: onInterceptMouseDown, onTouchStart: onInterceptMouseDown }, (typeof icons.closeTabset === \"function\") ? icons.closeTabset(node) : icons.closeTabset));\r\n    }\r\n    const toolbar = (react__WEBPACK_IMPORTED_MODULE_0__.createElement(\"div\", { key: \"toolbar\", ref: toolbarRef, className: cm(_Types__WEBPACK_IMPORTED_MODULE_7__.CLASSES.FLEXLAYOUT__TAB_TOOLBAR), onMouseDown: onInterceptMouseDown, onTouchStart: onInterceptMouseDown, onDragStart: (e) => { e.preventDefault(); } }, buttons));\r\n    let header;\r\n    let tabStrip;\r\n    let tabStripClasses = cm(_Types__WEBPACK_IMPORTED_MODULE_7__.CLASSES.FLEXLAYOUT__TABSET_TABBAR_OUTER);\r\n    if (node.getClassNameTabStrip() !== undefined) {\r\n        tabStripClasses += \" \" + node.getClassNameTabStrip();\r\n    }\r\n    tabStripClasses += \" \" + _Types__WEBPACK_IMPORTED_MODULE_7__.CLASSES.FLEXLAYOUT__TABSET_TABBAR_OUTER_ + node.getTabLocation();\r\n    if (node.isActive() && !showHeader) {\r\n        tabStripClasses += \" \" + cm(_Types__WEBPACK_IMPORTED_MODULE_7__.CLASSES.FLEXLAYOUT__TABSET_SELECTED);\r\n    }\r\n    if (node.isMaximized() && !showHeader) {\r\n        tabStripClasses += \" \" + cm(_Types__WEBPACK_IMPORTED_MODULE_7__.CLASSES.FLEXLAYOUT__TABSET_MAXIMIZED);\r\n    }\r\n    if (showHeader) {\r\n        const headerToolbar = (react__WEBPACK_IMPORTED_MODULE_0__.createElement(\"div\", { key: \"toolbar\", ref: toolbarRef, className: cm(_Types__WEBPACK_IMPORTED_MODULE_7__.CLASSES.FLEXLAYOUT__TAB_TOOLBAR), onMouseDown: onInterceptMouseDown, onTouchStart: onInterceptMouseDown, onDragStart: (e) => { e.preventDefault(); } }, headerButtons));\r\n        let tabHeaderClasses = cm(_Types__WEBPACK_IMPORTED_MODULE_7__.CLASSES.FLEXLAYOUT__TABSET_HEADER);\r\n        if (node.isActive()) {\r\n            tabHeaderClasses += \" \" + cm(_Types__WEBPACK_IMPORTED_MODULE_7__.CLASSES.FLEXLAYOUT__TABSET_SELECTED);\r\n        }\r\n        if (node.isMaximized()) {\r\n            tabHeaderClasses += \" \" + cm(_Types__WEBPACK_IMPORTED_MODULE_7__.CLASSES.FLEXLAYOUT__TABSET_MAXIMIZED);\r\n        }\r\n        if (node.getClassNameHeader() !== undefined) {\r\n            tabHeaderClasses += \" \" + node.getClassNameHeader();\r\n        }\r\n        header = (react__WEBPACK_IMPORTED_MODULE_0__.createElement(\"div\", { className: tabHeaderClasses, style: { height: node.getHeaderHeight() + \"px\" }, \"data-layout-path\": path + \"/header\", onMouseDown: onMouseDown, onContextMenu: onContextMenu, onClick: onAuxMouseClick, onAuxClick: onAuxMouseClick, onTouchStart: onMouseDown },\r\n            react__WEBPACK_IMPORTED_MODULE_0__.createElement(\"div\", { className: cm(_Types__WEBPACK_IMPORTED_MODULE_7__.CLASSES.FLEXLAYOUT__TABSET_HEADER_CONTENT) }, headerContent),\r\n            headerToolbar));\r\n    }\r\n    const tabStripStyle = { height: node.getTabStripHeight() + \"px\" };\r\n    tabStrip = (react__WEBPACK_IMPORTED_MODULE_0__.createElement(\"div\", { className: tabStripClasses, style: tabStripStyle, \"data-layout-path\": path + \"/tabstrip\", onMouseDown: onMouseDown, onContextMenu: onContextMenu, onClick: onAuxMouseClick, onAuxClick: onAuxMouseClick, onTouchStart: onMouseDown },\r\n        react__WEBPACK_IMPORTED_MODULE_0__.createElement(\"div\", { ref: tabbarInnerRef, className: cm(_Types__WEBPACK_IMPORTED_MODULE_7__.CLASSES.FLEXLAYOUT__TABSET_TABBAR_INNER) + \" \" + cm(_Types__WEBPACK_IMPORTED_MODULE_7__.CLASSES.FLEXLAYOUT__TABSET_TABBAR_INNER_ + node.getTabLocation()) },\r\n            react__WEBPACK_IMPORTED_MODULE_0__.createElement(\"div\", { style: { left: position, width: (isTabStretch ? \"100%\" : \"10000px\") }, className: cm(_Types__WEBPACK_IMPORTED_MODULE_7__.CLASSES.FLEXLAYOUT__TABSET_TABBAR_INNER_TAB_CONTAINER) + \" \" + cm(_Types__WEBPACK_IMPORTED_MODULE_7__.CLASSES.FLEXLAYOUT__TABSET_TABBAR_INNER_TAB_CONTAINER_ + node.getTabLocation()) }, tabs)),\r\n        toolbar));\r\n    style = layout.styleFont(style);\r\n    var placeHolder = undefined;\r\n    if (node.getChildren().length === 0) {\r\n        const placeHolderCallback = layout.getTabSetPlaceHolderCallback();\r\n        if (placeHolderCallback) {\r\n            placeHolder = placeHolderCallback(node);\r\n        }\r\n    }\r\n    const center = react__WEBPACK_IMPORTED_MODULE_0__.createElement(\"div\", { className: cm(_Types__WEBPACK_IMPORTED_MODULE_7__.CLASSES.FLEXLAYOUT__TABSET_CONTENT) }, placeHolder);\r\n    var content;\r\n    if (node.getTabLocation() === \"top\") {\r\n        content = react__WEBPACK_IMPORTED_MODULE_0__.createElement(react__WEBPACK_IMPORTED_MODULE_0__.Fragment, null,\r\n            header,\r\n            tabStrip,\r\n            center);\r\n    }\r\n    else {\r\n        content = react__WEBPACK_IMPORTED_MODULE_0__.createElement(react__WEBPACK_IMPORTED_MODULE_0__.Fragment, null,\r\n            header,\r\n            center,\r\n            tabStrip);\r\n    }\r\n    return (react__WEBPACK_IMPORTED_MODULE_0__.createElement(\"div\", { ref: selfRef, dir: \"ltr\", \"data-layout-path\": path, style: style, className: cm(_Types__WEBPACK_IMPORTED_MODULE_7__.CLASSES.FLEXLAYOUT__TABSET), onWheel: onMouseWheel }, content));\r\n};\r\n\n\n//# sourceURL=webpack://FlexLayout/./src/view/TabSet.tsx?");
 
 /***/ }),