flexlayout-react 0.8.9 → 0.8.10

package/ChangeLog.txt

@@ -1,3 +1,8 @@
+0.8.10
+Fix for #481 Numpad Enter doesn't confirm rename
+Work around <StrictMode> issue in React 19 (https://github.com/facebook/react/issues/29585) causing
+  tabs to re-mount when moved
+
 0.8.9
 Fix for #480 Actions.selectTab is called when closing Tab 
 Added isVisible() method to TabNode

package/README.md

@@ -152,7 +152,7 @@ function App() {
 
 The above code would render two tab sets horizontally each containing a single tab that hosts a div component (returned from the factory). The tabs could be moved and resized by dragging and dropping. Additional tabs could be added to the layout by sending actions to the model.
 
-<img src="screenshots/Screenshot_two_tabs.png?raw=true" alt="Simple layout" title="Generated Layout" style="border: 1px solid #ccc;" />
+<img src="screenshots/Screenshot_two_tabs.png?raw=true" alt="Simple layout" title="Generated Layout"/>
 
 
 Try it now using [CodeSandbox](https://codesandbox.io/p/sandbox/yvjzqf)
@@ -233,8 +233,7 @@ You can use the `<Layout>` prop onRenderTab to customize the tab rendering:
 
 <img src="screenshots/Screenshot_customize_tab.png?raw=true"
      alt="FlexLayout Tab structure"
-     title="Tab structure"
-     style="border: 1px solid #ccc;" />
+     title="Tab structure"/>
 
 Update the renderValues parameter as needed:
 
@@ -261,8 +260,7 @@ You can use the `<Layout>` prop onRenderTabSet to customize the tab set renderin
 
 <img src="screenshots/Screenshot_customize_tabset.png?raw=true"
      alt="FlexLayout Tab structure"
-     title="Tab set structure"
-     style="border: 1px solid #ccc;" />
+     title="Tab set structure" />
 
 Update the renderValues parameter as needed:
 

package/declarations/view/Layout.d.ts

@@ -98,7 +98,7 @@ export declare class Layout extends React.Component<ILayoutProps> {
     /** Get the root div element of the layout */
     getRootDiv(): HTMLDivElement | null;
 }
-export declare const FlexLayoutVersion = "0.8.9";
+export declare const FlexLayoutVersion = "0.8.10";
 export type DragRectRenderCallback = (content: React.ReactNode | undefined, node?: Node, json?: IJsonTabNode) => React.ReactNode | undefined;
 export type NodeMouseEvent = (node: TabNode | TabSetNode | BorderNode, event: React.MouseEvent<HTMLElement, MouseEvent>) => void;
 export type ShowOverflowMenuCallback = (node: TabSetNode | BorderNode, mouseEvent: React.MouseEvent<HTMLElement, MouseEvent>, items: {

package/dist/flexlayout.js

@@ -76,7 +76,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 */   AttributeDefinitions: () => (/* binding */ AttributeDefinitions)\n/* harmony export */ });\n/* harmony import */ var _Attribute__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! ./Attribute */ \"./src/Attribute.ts\");\n\n/** @internal */\nclass AttributeDefinitions {\n    constructor() {\n        this.attributes = [];\n        this.nameToAttribute = new Map();\n    }\n    addWithAll(name, modelName, defaultValue, alwaysWriteJson) {\n        const attr = new _Attribute__WEBPACK_IMPORTED_MODULE_0__.Attribute(name, modelName, defaultValue, alwaysWriteJson);\n        this.attributes.push(attr);\n        this.nameToAttribute.set(name, attr);\n        return attr;\n    }\n    addInherited(name, modelName) {\n        return this.addWithAll(name, modelName, undefined, false);\n    }\n    add(name, defaultValue, alwaysWriteJson) {\n        return this.addWithAll(name, undefined, defaultValue, alwaysWriteJson);\n    }\n    getAttributes() {\n        return this.attributes;\n    }\n    getModelName(name) {\n        const conversion = this.nameToAttribute.get(name);\n        if (conversion !== undefined) {\n            return conversion.modelName;\n        }\n        return undefined;\n    }\n    toJson(jsonObj, obj) {\n        for (const attr of this.attributes) {\n            const fromValue = obj[attr.name];\n            if (attr.alwaysWriteJson || fromValue !== attr.defaultValue) {\n                jsonObj[attr.name] = fromValue;\n            }\n        }\n    }\n    fromJson(jsonObj, obj) {\n        for (const attr of this.attributes) {\n            let fromValue = jsonObj[attr.name];\n            if (fromValue === undefined && attr.alias) {\n                fromValue = jsonObj[attr.alias];\n            }\n            if (fromValue === undefined) {\n                obj[attr.name] = attr.defaultValue;\n            }\n            else {\n                obj[attr.name] = fromValue;\n            }\n        }\n    }\n    update(jsonObj, obj) {\n        for (const attr of this.attributes) {\n            if (jsonObj.hasOwnProperty(attr.name)) {\n                const fromValue = jsonObj[attr.name];\n                if (fromValue === undefined) {\n                    delete obj[attr.name];\n                }\n                else {\n                    obj[attr.name] = fromValue;\n                }\n            }\n        }\n    }\n    setDefaults(obj) {\n        for (const attr of this.attributes) {\n            obj[attr.name] = attr.defaultValue;\n        }\n    }\n    pairAttributes(type, childAttributes) {\n        for (const attr of childAttributes.attributes) {\n            if (attr.modelName && this.nameToAttribute.has(attr.modelName)) {\n                const pairedAttr = this.nameToAttribute.get(attr.modelName);\n                pairedAttr.setpairedAttr(attr);\n                attr.setpairedAttr(pairedAttr);\n                pairedAttr.setPairedType(type);\n            }\n        }\n    }\n    toTypescriptInterface(name, parentAttributes) {\n        var _a, _b;\n        const lines = [];\n        const sorted = this.attributes.sort((a, b) => a.name.localeCompare(b.name));\n        // const sorted = this.attributes;\n        lines.push(\"export interface I\" + name + \"Attributes {\");\n        for (let i = 0; i < sorted.length; i++) {\n            const c = sorted[i];\n            let type = c.type;\n            let defaultValue = undefined;\n            let attr = c;\n            let inherited = undefined;\n            if (attr.defaultValue !== undefined) {\n                defaultValue = attr.defaultValue;\n            }\n            else if (attr.modelName !== undefined\n                && parentAttributes !== undefined\n                && parentAttributes.nameToAttribute.get(attr.modelName) !== undefined) {\n                inherited = attr.modelName;\n                attr = parentAttributes.nameToAttribute.get(inherited);\n                defaultValue = attr.defaultValue;\n                type = attr.type;\n            }\n            let defValue = JSON.stringify(defaultValue);\n            const required = attr.required ? \"\" : \"?\";\n            let sb = \"\\t/**\\n\\t  \";\n            if (c.description) {\n                sb += c.description;\n            }\n            else if (c.pairedType && ((_a = c.pairedAttr) === null || _a === void 0 ? void 0 : _a.description)) {\n                sb += `Value for ${c.pairedType} attribute ${c.pairedAttr.name} if not overridden`;\n                sb += \"\\n\\n\\t  \";\n                sb += (_b = c.pairedAttr) === null || _b === void 0 ? void 0 : _b.description;\n            }\n            sb += \"\\n\\n\\t  \";\n            if (c.fixed) {\n                sb += `Fixed value: ${defValue}`;\n            }\n            else if (inherited) {\n                sb += `Default: inherited from Global attribute ${c.modelName} (default ${defValue})`;\n            }\n            else {\n                sb += `Default: ${defValue}`;\n            }\n            sb += \"\\n\\t */\";\n            lines.push(sb);\n            lines.push(\"\\t\" + c.name + required + \": \" + type + \";\\n\");\n        }\n        lines.push(\"}\");\n        return lines.join(\"\\n\");\n    }\n}\n\n\n//# sourceURL=webpack://FlexLayout/./src/AttributeDefinitions.ts?");
+eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpack_require__.d(__webpack_exports__, {\n/* harmony export */   AttributeDefinitions: () => (/* binding */ AttributeDefinitions)\n/* harmony export */ });\n/* harmony import */ var _Attribute__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! ./Attribute */ \"./src/Attribute.ts\");\n\n/** @internal */\nclass AttributeDefinitions {\n    constructor() {\n        this.attributes = [];\n        this.nameToAttribute = new Map();\n    }\n    addWithAll(name, modelName, defaultValue, alwaysWriteJson) {\n        const attr = new _Attribute__WEBPACK_IMPORTED_MODULE_0__.Attribute(name, modelName, defaultValue, alwaysWriteJson);\n        this.attributes.push(attr);\n        this.nameToAttribute.set(name, attr);\n        return attr;\n    }\n    addInherited(name, modelName) {\n        return this.addWithAll(name, modelName, undefined, false);\n    }\n    add(name, defaultValue, alwaysWriteJson) {\n        return this.addWithAll(name, undefined, defaultValue, alwaysWriteJson);\n    }\n    getAttributes() {\n        return this.attributes;\n    }\n    getModelName(name) {\n        const conversion = this.nameToAttribute.get(name);\n        if (conversion !== undefined) {\n            return conversion.modelName;\n        }\n        return undefined;\n    }\n    toJson(jsonObj, obj) {\n        for (const attr of this.attributes) {\n            const fromValue = obj[attr.name];\n            if (attr.alwaysWriteJson || fromValue !== attr.defaultValue) {\n                jsonObj[attr.name] = fromValue;\n            }\n        }\n    }\n    fromJson(jsonObj, obj) {\n        for (const attr of this.attributes) {\n            let fromValue = jsonObj[attr.name];\n            if (fromValue === undefined && attr.alias) {\n                fromValue = jsonObj[attr.alias];\n            }\n            if (fromValue === undefined) {\n                obj[attr.name] = attr.defaultValue;\n            }\n            else {\n                obj[attr.name] = fromValue;\n            }\n        }\n    }\n    update(jsonObj, obj) {\n        for (const attr of this.attributes) {\n            if (Object.prototype.hasOwnProperty.call(jsonObj, attr.name)) {\n                const fromValue = jsonObj[attr.name];\n                if (fromValue === undefined) {\n                    delete obj[attr.name];\n                }\n                else {\n                    obj[attr.name] = fromValue;\n                }\n            }\n        }\n    }\n    setDefaults(obj) {\n        for (const attr of this.attributes) {\n            obj[attr.name] = attr.defaultValue;\n        }\n    }\n    pairAttributes(type, childAttributes) {\n        for (const attr of childAttributes.attributes) {\n            if (attr.modelName && this.nameToAttribute.has(attr.modelName)) {\n                const pairedAttr = this.nameToAttribute.get(attr.modelName);\n                pairedAttr.setpairedAttr(attr);\n                attr.setpairedAttr(pairedAttr);\n                pairedAttr.setPairedType(type);\n            }\n        }\n    }\n    toTypescriptInterface(name, parentAttributes) {\n        var _a, _b;\n        const lines = [];\n        const sorted = this.attributes.sort((a, b) => a.name.localeCompare(b.name));\n        // const sorted = this.attributes;\n        lines.push(\"export interface I\" + name + \"Attributes {\");\n        for (let i = 0; i < sorted.length; i++) {\n            const c = sorted[i];\n            let type = c.type;\n            let defaultValue = undefined;\n            let attr = c;\n            let inherited = undefined;\n            if (attr.defaultValue !== undefined) {\n                defaultValue = attr.defaultValue;\n            }\n            else if (attr.modelName !== undefined\n                && parentAttributes !== undefined\n                && parentAttributes.nameToAttribute.get(attr.modelName) !== undefined) {\n                inherited = attr.modelName;\n                attr = parentAttributes.nameToAttribute.get(inherited);\n                defaultValue = attr.defaultValue;\n                type = attr.type;\n            }\n            const defValue = JSON.stringify(defaultValue);\n            const required = attr.required ? \"\" : \"?\";\n            let sb = \"\\t/**\\n\\t  \";\n            if (c.description) {\n                sb += c.description;\n            }\n            else if (c.pairedType && ((_a = c.pairedAttr) === null || _a === void 0 ? void 0 : _a.description)) {\n                sb += `Value for ${c.pairedType} attribute ${c.pairedAttr.name} if not overridden`;\n                sb += \"\\n\\n\\t  \";\n                sb += (_b = c.pairedAttr) === null || _b === void 0 ? void 0 : _b.description;\n            }\n            sb += \"\\n\\n\\t  \";\n            if (c.fixed) {\n                sb += `Fixed value: ${defValue}`;\n            }\n            else if (inherited) {\n                sb += `Default: inherited from Global attribute ${c.modelName} (default ${defValue})`;\n            }\n            else {\n                sb += `Default: ${defValue}`;\n            }\n            sb += \"\\n\\t */\";\n            lines.push(sb);\n            lines.push(\"\\t\" + c.name + required + \": \" + type + \";\\n\");\n        }\n        lines.push(\"}\");\n        return lines.join(\"\\n\");\n    }\n}\n\n\n//# sourceURL=webpack://FlexLayout/./src/AttributeDefinitions.ts?");
 
 /***/ }),
 
@@ -126,7 +126,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\nclass Rect {\n    static empty() {\n        return new Rect(0, 0, 0, 0);\n    }\n    static fromJson(json) {\n        return new Rect(json.x, json.y, json.width, json.height);\n    }\n    constructor(x, y, width, height) {\n        this.x = x;\n        this.y = y;\n        this.width = width;\n        this.height = height;\n    }\n    toJson() {\n        return { x: this.x, y: this.y, width: this.width, height: this.height };\n    }\n    snap(round) {\n        this.x = Math.round(this.x / round) * round;\n        this.y = Math.round(this.y / round) * round;\n        this.width = Math.round(this.width / round) * round;\n        this.height = Math.round(this.height / round) * round;\n    }\n    static getBoundingClientRect(element) {\n        let { x, y, width, height } = element.getBoundingClientRect();\n        return new Rect(x, y, width, height);\n    }\n    static getContentRect(element) {\n        const rect = element.getBoundingClientRect();\n        const style = window.getComputedStyle(element);\n        const paddingLeft = parseFloat(style.paddingLeft);\n        const paddingRight = parseFloat(style.paddingRight);\n        const paddingTop = parseFloat(style.paddingTop);\n        const paddingBottom = parseFloat(style.paddingBottom);\n        const borderLeftWidth = parseFloat(style.borderLeftWidth);\n        const borderRightWidth = parseFloat(style.borderRightWidth);\n        const borderTopWidth = parseFloat(style.borderTopWidth);\n        const borderBottomWidth = parseFloat(style.borderBottomWidth);\n        const contentWidth = rect.width - borderLeftWidth - paddingLeft - paddingRight - borderRightWidth;\n        const contentHeight = rect.height - borderTopWidth - paddingTop - paddingBottom - borderBottomWidth;\n        return new Rect(rect.left + borderLeftWidth + paddingLeft, rect.top + borderTopWidth + paddingTop, contentWidth, contentHeight);\n    }\n    static fromDomRect(domRect) {\n        return new Rect(domRect.x, domRect.y, domRect.width, domRect.height);\n    }\n    relativeTo(r) {\n        return new Rect(this.x - r.x, this.y - r.y, this.width, this.height);\n    }\n    clone() {\n        return new Rect(this.x, this.y, this.width, this.height);\n    }\n    equals(rect) {\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);\n    }\n    equalSize(rect) {\n        return this.width === (rect === null || rect === void 0 ? void 0 : rect.width) && this.height === (rect === null || rect === void 0 ? void 0 : rect.height);\n    }\n    getBottom() {\n        return this.y + this.height;\n    }\n    getRight() {\n        return this.x + this.width;\n    }\n    get bottom() {\n        return this.y + this.height;\n    }\n    get right() {\n        return this.x + this.width;\n    }\n    getCenter() {\n        return { x: this.x + this.width / 2, y: this.y + this.height / 2 };\n    }\n    positionElement(element, position) {\n        this.styleWithPosition(element.style, position);\n    }\n    styleWithPosition(style, position = \"absolute\") {\n        style.left = this.x + \"px\";\n        style.top = this.y + \"px\";\n        style.width = Math.max(0, this.width) + \"px\"; // need Math.max to prevent -ve, cause error in IE\n        style.height = Math.max(0, this.height) + \"px\";\n        style.position = position;\n        return style;\n    }\n    contains(x, y) {\n        if (this.x <= x && x <= this.getRight() && this.y <= y && y <= this.getBottom()) {\n            return true;\n        }\n        else {\n            return false;\n        }\n    }\n    removeInsets(insets) {\n        return new Rect(this.x + insets.left, this.y + insets.top, Math.max(0, this.width - insets.left - insets.right), Math.max(0, this.height - insets.top - insets.bottom));\n    }\n    centerInRect(outerRect) {\n        this.x = (outerRect.width - this.width) / 2;\n        this.y = (outerRect.height - this.height) / 2;\n    }\n    /** @internal */\n    _getSize(orientation) {\n        let prefSize = this.width;\n        if (orientation === _Orientation__WEBPACK_IMPORTED_MODULE_0__.Orientation.VERT) {\n            prefSize = this.height;\n        }\n        return prefSize;\n    }\n    toString() {\n        return \"(Rect: x=\" + this.x + \", y=\" + this.y + \", width=\" + this.width + \", height=\" + this.height + \")\";\n    }\n}\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\nclass Rect {\n    static empty() {\n        return new Rect(0, 0, 0, 0);\n    }\n    static fromJson(json) {\n        return new Rect(json.x, json.y, json.width, json.height);\n    }\n    constructor(x, y, width, height) {\n        this.x = x;\n        this.y = y;\n        this.width = width;\n        this.height = height;\n    }\n    toJson() {\n        return { x: this.x, y: this.y, width: this.width, height: this.height };\n    }\n    snap(round) {\n        this.x = Math.round(this.x / round) * round;\n        this.y = Math.round(this.y / round) * round;\n        this.width = Math.round(this.width / round) * round;\n        this.height = Math.round(this.height / round) * round;\n    }\n    static getBoundingClientRect(element) {\n        const { x, y, width, height } = element.getBoundingClientRect();\n        return new Rect(x, y, width, height);\n    }\n    static getContentRect(element) {\n        const rect = element.getBoundingClientRect();\n        const style = window.getComputedStyle(element);\n        const paddingLeft = parseFloat(style.paddingLeft);\n        const paddingRight = parseFloat(style.paddingRight);\n        const paddingTop = parseFloat(style.paddingTop);\n        const paddingBottom = parseFloat(style.paddingBottom);\n        const borderLeftWidth = parseFloat(style.borderLeftWidth);\n        const borderRightWidth = parseFloat(style.borderRightWidth);\n        const borderTopWidth = parseFloat(style.borderTopWidth);\n        const borderBottomWidth = parseFloat(style.borderBottomWidth);\n        const contentWidth = rect.width - borderLeftWidth - paddingLeft - paddingRight - borderRightWidth;\n        const contentHeight = rect.height - borderTopWidth - paddingTop - paddingBottom - borderBottomWidth;\n        return new Rect(rect.left + borderLeftWidth + paddingLeft, rect.top + borderTopWidth + paddingTop, contentWidth, contentHeight);\n    }\n    static fromDomRect(domRect) {\n        return new Rect(domRect.x, domRect.y, domRect.width, domRect.height);\n    }\n    relativeTo(r) {\n        return new Rect(this.x - r.x, this.y - r.y, this.width, this.height);\n    }\n    clone() {\n        return new Rect(this.x, this.y, this.width, this.height);\n    }\n    equals(rect) {\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);\n    }\n    equalSize(rect) {\n        return this.width === (rect === null || rect === void 0 ? void 0 : rect.width) && this.height === (rect === null || rect === void 0 ? void 0 : rect.height);\n    }\n    getBottom() {\n        return this.y + this.height;\n    }\n    getRight() {\n        return this.x + this.width;\n    }\n    get bottom() {\n        return this.y + this.height;\n    }\n    get right() {\n        return this.x + this.width;\n    }\n    getCenter() {\n        return { x: this.x + this.width / 2, y: this.y + this.height / 2 };\n    }\n    positionElement(element, position) {\n        this.styleWithPosition(element.style, position);\n    }\n    styleWithPosition(style, position = \"absolute\") {\n        style.left = this.x + \"px\";\n        style.top = this.y + \"px\";\n        style.width = Math.max(0, this.width) + \"px\"; // need Math.max to prevent -ve, cause error in IE\n        style.height = Math.max(0, this.height) + \"px\";\n        style.position = position;\n        return style;\n    }\n    contains(x, y) {\n        if (this.x <= x && x <= this.getRight() && this.y <= y && y <= this.getBottom()) {\n            return true;\n        }\n        else {\n            return false;\n        }\n    }\n    removeInsets(insets) {\n        return new Rect(this.x + insets.left, this.y + insets.top, Math.max(0, this.width - insets.left - insets.right), Math.max(0, this.height - insets.top - insets.bottom));\n    }\n    centerInRect(outerRect) {\n        this.x = (outerRect.width - this.width) / 2;\n        this.y = (outerRect.height - this.height) / 2;\n    }\n    /** @internal */\n    _getSize(orientation) {\n        let prefSize = this.width;\n        if (orientation === _Orientation__WEBPACK_IMPORTED_MODULE_0__.Orientation.VERT) {\n            prefSize = this.height;\n        }\n        return prefSize;\n    }\n    toString() {\n        return \"(Rect: x=\" + this.x + \", y=\" + this.y + \", width=\" + this.width + \", height=\" + this.height + \")\";\n    }\n}\n\n\n//# sourceURL=webpack://FlexLayout/./src/Rect.ts?");
 
 /***/ }),
 
@@ -306,7 +306,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 _model_ICloseType__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! ../model/ICloseType */ \"./src/model/ICloseType.ts\");\n/* harmony import */ var _Types__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(/*! ../Types */ \"./src/Types.ts\");\n/* harmony import */ var _Utils__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__(/*! ./Utils */ \"./src/view/Utils.tsx\");\n\n\n\n\n\n\n/** @internal */\nconst BorderButton = (props) => {\n    const { layout, node, selected, border, icons, path } = props;\n    const selfRef = react__WEBPACK_IMPORTED_MODULE_0__.useRef(null);\n    const contentRef = react__WEBPACK_IMPORTED_MODULE_0__.useRef(null);\n    const onDragStart = (event) => {\n        if (node.isEnableDrag()) {\n            event.stopPropagation();\n            layout.setDragNode(event.nativeEvent, node);\n        }\n        else {\n            event.preventDefault();\n        }\n    };\n    const onDragEnd = (event) => {\n        event.stopPropagation();\n        layout.clearDragMain();\n    };\n    const onAuxMouseClick = (event) => {\n        if ((0,_Utils__WEBPACK_IMPORTED_MODULE_5__.isAuxMouseEvent)(event)) {\n            layout.auxMouseClick(node, event);\n        }\n    };\n    const onContextMenu = (event) => {\n        layout.showContextMenu(node, event);\n    };\n    const onClick = () => {\n        layout.doAction(_model_Actions__WEBPACK_IMPORTED_MODULE_2__.Actions.selectTab(node.getId()));\n    };\n    // const onDoubleClick = (event: Event) => {\n    //     // if (node.isEnableRename()) {\n    //     //     onRename();\n    //     // }\n    // };\n    // const onRename = () => {\n    //     layout.setEditingTab(node);\n    //     layout.getCurrentDocument()!.body.addEventListener(\"pointerdown\", onEndEdit);\n    // };\n    const onEndEdit = (event) => {\n        if (event.target !== contentRef.current) {\n            layout.getCurrentDocument().body.removeEventListener(\"pointerdown\", onEndEdit);\n            layout.setEditingTab(undefined);\n        }\n    };\n    const isClosable = () => {\n        const closeType = node.getCloseType();\n        if (selected || closeType === _model_ICloseType__WEBPACK_IMPORTED_MODULE_3__.ICloseType.Always) {\n            return true;\n        }\n        if (closeType === _model_ICloseType__WEBPACK_IMPORTED_MODULE_3__.ICloseType.Visible) {\n            // not selected but x should be visible due to hover\n            if (window.matchMedia && window.matchMedia(\"(hover: hover) and (pointer: fine)\").matches) {\n                return true;\n            }\n        }\n        return false;\n    };\n    const onClose = (event) => {\n        if (isClosable()) {\n            layout.doAction(_model_Actions__WEBPACK_IMPORTED_MODULE_2__.Actions.deleteTab(node.getId()));\n            event.stopPropagation();\n        }\n    };\n    const onClosePointerDown = (event) => {\n        event.stopPropagation();\n    };\n    react__WEBPACK_IMPORTED_MODULE_0__.useLayoutEffect(() => {\n        node.setTabRect(layout.getBoundingClientRect(selfRef.current));\n        if (layout.getEditingTab() === node) {\n            contentRef.current.select();\n        }\n    });\n    const onTextBoxPointerDown = (event) => {\n        event.stopPropagation();\n    };\n    const onTextBoxKeyPress = (event) => {\n        if (event.code === 'Escape') {\n            // esc\n            layout.setEditingTab(undefined);\n        }\n        else if (event.code === 'Enter') {\n            // enter\n            layout.setEditingTab(undefined);\n            layout.doAction(_model_Actions__WEBPACK_IMPORTED_MODULE_2__.Actions.renameTab(node.getId(), event.target.value));\n        }\n    };\n    const cm = layout.getClassName;\n    let classNames = cm(_Types__WEBPACK_IMPORTED_MODULE_4__.CLASSES.FLEXLAYOUT__BORDER_BUTTON) + \" \" + cm(_Types__WEBPACK_IMPORTED_MODULE_4__.CLASSES.FLEXLAYOUT__BORDER_BUTTON_ + border);\n    if (selected) {\n        classNames += \" \" + cm(_Types__WEBPACK_IMPORTED_MODULE_4__.CLASSES.FLEXLAYOUT__BORDER_BUTTON__SELECTED);\n    }\n    else {\n        classNames += \" \" + cm(_Types__WEBPACK_IMPORTED_MODULE_4__.CLASSES.FLEXLAYOUT__BORDER_BUTTON__UNSELECTED);\n    }\n    if (node.getClassName() !== undefined) {\n        classNames += \" \" + node.getClassName();\n    }\n    let iconAngle = 0;\n    if (node.getModel().isEnableRotateBorderIcons() === false) {\n        if (border === \"left\") {\n            iconAngle = 90;\n        }\n        else if (border === \"right\") {\n            iconAngle = -90;\n        }\n    }\n    const renderState = (0,_Utils__WEBPACK_IMPORTED_MODULE_5__.getRenderStateEx)(layout, node, iconAngle);\n    let content = renderState.content ? (react__WEBPACK_IMPORTED_MODULE_0__.createElement(\"div\", { className: cm(_Types__WEBPACK_IMPORTED_MODULE_4__.CLASSES.FLEXLAYOUT__BORDER_BUTTON_CONTENT) }, renderState.content)) : null;\n    const leading = renderState.leading ? (react__WEBPACK_IMPORTED_MODULE_0__.createElement(\"div\", { className: cm(_Types__WEBPACK_IMPORTED_MODULE_4__.CLASSES.FLEXLAYOUT__BORDER_BUTTON_LEADING) }, renderState.leading)) : null;\n    if (layout.getEditingTab() === node) {\n        content = (react__WEBPACK_IMPORTED_MODULE_0__.createElement(\"input\", { ref: contentRef, className: cm(_Types__WEBPACK_IMPORTED_MODULE_4__.CLASSES.FLEXLAYOUT__TAB_BUTTON_TEXTBOX), \"data-layout-path\": path + \"/textbox\", type: \"text\", autoFocus: true, defaultValue: node.getName(), onKeyDown: onTextBoxKeyPress, onPointerDown: onTextBoxPointerDown }));\n    }\n    if (node.isEnableClose()) {\n        const closeTitle = layout.i18nName(_I18nLabel__WEBPACK_IMPORTED_MODULE_1__.I18nLabel.Close_Tab);\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_4__.CLASSES.FLEXLAYOUT__BORDER_BUTTON_TRAILING), onPointerDown: onClosePointerDown, onClick: onClose }, (typeof icons.close === \"function\") ? icons.close(node) : icons.close));\n    }\n    return (react__WEBPACK_IMPORTED_MODULE_0__.createElement(\"div\", { ref: selfRef, \"data-layout-path\": path, className: classNames, onClick: onClick, onAuxClick: onAuxMouseClick, onContextMenu: onContextMenu, title: node.getHelpText(), draggable: true, onDragStart: onDragStart, onDragEnd: onDragEnd },\n        leading,\n        content,\n        renderState.buttons));\n};\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 _model_ICloseType__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! ../model/ICloseType */ \"./src/model/ICloseType.ts\");\n/* harmony import */ var _Types__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(/*! ../Types */ \"./src/Types.ts\");\n/* harmony import */ var _Utils__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__(/*! ./Utils */ \"./src/view/Utils.tsx\");\n\n\n\n\n\n\n/** @internal */\nconst BorderButton = (props) => {\n    const { layout, node, selected, border, icons, path } = props;\n    const selfRef = react__WEBPACK_IMPORTED_MODULE_0__.useRef(null);\n    const contentRef = react__WEBPACK_IMPORTED_MODULE_0__.useRef(null);\n    const onDragStart = (event) => {\n        if (node.isEnableDrag()) {\n            event.stopPropagation();\n            layout.setDragNode(event.nativeEvent, node);\n        }\n        else {\n            event.preventDefault();\n        }\n    };\n    const onDragEnd = (event) => {\n        event.stopPropagation();\n        layout.clearDragMain();\n    };\n    const onAuxMouseClick = (event) => {\n        if ((0,_Utils__WEBPACK_IMPORTED_MODULE_5__.isAuxMouseEvent)(event)) {\n            layout.auxMouseClick(node, event);\n        }\n    };\n    const onContextMenu = (event) => {\n        layout.showContextMenu(node, event);\n    };\n    const onClick = () => {\n        layout.doAction(_model_Actions__WEBPACK_IMPORTED_MODULE_2__.Actions.selectTab(node.getId()));\n    };\n    // const onDoubleClick = (event: Event) => {\n    //     // if (node.isEnableRename()) {\n    //     //     onRename();\n    //     // }\n    // };\n    // const onRename = () => {\n    //     layout.setEditingTab(node);\n    //     layout.getCurrentDocument()!.body.addEventListener(\"pointerdown\", onEndEdit);\n    // };\n    const onEndEdit = (event) => {\n        if (event.target !== contentRef.current) {\n            layout.getCurrentDocument().body.removeEventListener(\"pointerdown\", onEndEdit);\n            layout.setEditingTab(undefined);\n        }\n    };\n    const isClosable = () => {\n        const closeType = node.getCloseType();\n        if (selected || closeType === _model_ICloseType__WEBPACK_IMPORTED_MODULE_3__.ICloseType.Always) {\n            return true;\n        }\n        if (closeType === _model_ICloseType__WEBPACK_IMPORTED_MODULE_3__.ICloseType.Visible) {\n            // not selected but x should be visible due to hover\n            if (window.matchMedia && window.matchMedia(\"(hover: hover) and (pointer: fine)\").matches) {\n                return true;\n            }\n        }\n        return false;\n    };\n    const onClose = (event) => {\n        if (isClosable()) {\n            layout.doAction(_model_Actions__WEBPACK_IMPORTED_MODULE_2__.Actions.deleteTab(node.getId()));\n            event.stopPropagation();\n        }\n    };\n    const onClosePointerDown = (event) => {\n        event.stopPropagation();\n    };\n    react__WEBPACK_IMPORTED_MODULE_0__.useLayoutEffect(() => {\n        node.setTabRect(layout.getBoundingClientRect(selfRef.current));\n        if (layout.getEditingTab() === node) {\n            contentRef.current.select();\n        }\n    });\n    const onTextBoxPointerDown = (event) => {\n        event.stopPropagation();\n    };\n    const onTextBoxKeyPress = (event) => {\n        if (event.code === 'Escape') {\n            // esc\n            layout.setEditingTab(undefined);\n        }\n        else if (event.code === 'Enter' || event.code === 'NumpadEnter') {\n            // enter\n            layout.setEditingTab(undefined);\n            layout.doAction(_model_Actions__WEBPACK_IMPORTED_MODULE_2__.Actions.renameTab(node.getId(), event.target.value));\n        }\n    };\n    const cm = layout.getClassName;\n    let classNames = cm(_Types__WEBPACK_IMPORTED_MODULE_4__.CLASSES.FLEXLAYOUT__BORDER_BUTTON) + \" \" + cm(_Types__WEBPACK_IMPORTED_MODULE_4__.CLASSES.FLEXLAYOUT__BORDER_BUTTON_ + border);\n    if (selected) {\n        classNames += \" \" + cm(_Types__WEBPACK_IMPORTED_MODULE_4__.CLASSES.FLEXLAYOUT__BORDER_BUTTON__SELECTED);\n    }\n    else {\n        classNames += \" \" + cm(_Types__WEBPACK_IMPORTED_MODULE_4__.CLASSES.FLEXLAYOUT__BORDER_BUTTON__UNSELECTED);\n    }\n    if (node.getClassName() !== undefined) {\n        classNames += \" \" + node.getClassName();\n    }\n    let iconAngle = 0;\n    if (node.getModel().isEnableRotateBorderIcons() === false) {\n        if (border === \"left\") {\n            iconAngle = 90;\n        }\n        else if (border === \"right\") {\n            iconAngle = -90;\n        }\n    }\n    const renderState = (0,_Utils__WEBPACK_IMPORTED_MODULE_5__.getRenderStateEx)(layout, node, iconAngle);\n    let content = renderState.content ? (react__WEBPACK_IMPORTED_MODULE_0__.createElement(\"div\", { className: cm(_Types__WEBPACK_IMPORTED_MODULE_4__.CLASSES.FLEXLAYOUT__BORDER_BUTTON_CONTENT) }, renderState.content)) : null;\n    const leading = renderState.leading ? (react__WEBPACK_IMPORTED_MODULE_0__.createElement(\"div\", { className: cm(_Types__WEBPACK_IMPORTED_MODULE_4__.CLASSES.FLEXLAYOUT__BORDER_BUTTON_LEADING) }, renderState.leading)) : null;\n    if (layout.getEditingTab() === node) {\n        content = (react__WEBPACK_IMPORTED_MODULE_0__.createElement(\"input\", { ref: contentRef, className: cm(_Types__WEBPACK_IMPORTED_MODULE_4__.CLASSES.FLEXLAYOUT__TAB_BUTTON_TEXTBOX), \"data-layout-path\": path + \"/textbox\", type: \"text\", autoFocus: true, defaultValue: node.getName(), onKeyDown: onTextBoxKeyPress, onPointerDown: onTextBoxPointerDown }));\n    }\n    if (node.isEnableClose()) {\n        const closeTitle = layout.i18nName(_I18nLabel__WEBPACK_IMPORTED_MODULE_1__.I18nLabel.Close_Tab);\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_4__.CLASSES.FLEXLAYOUT__BORDER_BUTTON_TRAILING), onPointerDown: onClosePointerDown, onClick: onClose }, (typeof icons.close === \"function\") ? icons.close(node) : icons.close));\n    }\n    return (react__WEBPACK_IMPORTED_MODULE_0__.createElement(\"div\", { ref: selfRef, \"data-layout-path\": path, className: classNames, onClick: onClick, onAuxClick: onAuxMouseClick, onContextMenu: onContextMenu, title: node.getHelpText(), draggable: true, onDragStart: onDragStart, onDragEnd: onDragEnd },\n        leading,\n        content,\n        renderState.buttons));\n};\n\n\n//# sourceURL=webpack://FlexLayout/./src/view/BorderButton.tsx?");
 
 /***/ }),
 
@@ -366,7 +366,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 */   FlexLayoutVersion: () => (/* binding */ FlexLayoutVersion),\n/* harmony export */   Layout: () => (/* binding */ Layout),\n/* harmony export */   LayoutInternal: () => (/* binding */ LayoutInternal)\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 react_dom_client__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! react-dom/client */ \"./node_modules/.pnpm/react-dom@19.0.0_react@19.0.0/node_modules/react-dom/client.js\");\n/* harmony import */ var _DockLocation__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! ../DockLocation */ \"./src/DockLocation.ts\");\n/* harmony import */ var _I18nLabel__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(/*! ../I18nLabel */ \"./src/I18nLabel.ts\");\n/* harmony import */ var _Orientation__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__(/*! ../Orientation */ \"./src/Orientation.ts\");\n/* harmony import */ var _Rect__WEBPACK_IMPORTED_MODULE_6__ = __webpack_require__(/*! ../Rect */ \"./src/Rect.ts\");\n/* harmony import */ var _Types__WEBPACK_IMPORTED_MODULE_7__ = __webpack_require__(/*! ../Types */ \"./src/Types.ts\");\n/* harmony import */ var _model_Actions__WEBPACK_IMPORTED_MODULE_8__ = __webpack_require__(/*! ../model/Actions */ \"./src/model/Actions.ts\");\n/* harmony import */ var _model_BorderNode__WEBPACK_IMPORTED_MODULE_9__ = __webpack_require__(/*! ../model/BorderNode */ \"./src/model/BorderNode.ts\");\n/* harmony import */ var _model_Model__WEBPACK_IMPORTED_MODULE_10__ = __webpack_require__(/*! ../model/Model */ \"./src/model/Model.ts\");\n/* harmony import */ var _model_TabNode__WEBPACK_IMPORTED_MODULE_11__ = __webpack_require__(/*! ../model/TabNode */ \"./src/model/TabNode.ts\");\n/* harmony import */ var _model_TabSetNode__WEBPACK_IMPORTED_MODULE_12__ = __webpack_require__(/*! ../model/TabSetNode */ \"./src/model/TabSetNode.ts\");\n/* harmony import */ var _BorderTab__WEBPACK_IMPORTED_MODULE_13__ = __webpack_require__(/*! ./BorderTab */ \"./src/view/BorderTab.tsx\");\n/* harmony import */ var _BorderTabSet__WEBPACK_IMPORTED_MODULE_14__ = __webpack_require__(/*! ./BorderTabSet */ \"./src/view/BorderTabSet.tsx\");\n/* harmony import */ var _DragContainer__WEBPACK_IMPORTED_MODULE_15__ = __webpack_require__(/*! ./DragContainer */ \"./src/view/DragContainer.tsx\");\n/* harmony import */ var _ErrorBoundary__WEBPACK_IMPORTED_MODULE_16__ = __webpack_require__(/*! ./ErrorBoundary */ \"./src/view/ErrorBoundary.tsx\");\n/* harmony import */ var _PopoutWindow__WEBPACK_IMPORTED_MODULE_17__ = __webpack_require__(/*! ./PopoutWindow */ \"./src/view/PopoutWindow.tsx\");\n/* harmony import */ var _Icons__WEBPACK_IMPORTED_MODULE_18__ = __webpack_require__(/*! ./Icons */ \"./src/view/Icons.tsx\");\n/* harmony import */ var _Overlay__WEBPACK_IMPORTED_MODULE_19__ = __webpack_require__(/*! ./Overlay */ \"./src/view/Overlay.tsx\");\n/* harmony import */ var _Row__WEBPACK_IMPORTED_MODULE_20__ = __webpack_require__(/*! ./Row */ \"./src/view/Row.tsx\");\n/* harmony import */ var _Tab__WEBPACK_IMPORTED_MODULE_21__ = __webpack_require__(/*! ./Tab */ \"./src/view/Tab.tsx\");\n/* harmony import */ var _Utils__WEBPACK_IMPORTED_MODULE_22__ = __webpack_require__(/*! ./Utils */ \"./src/view/Utils.tsx\");\n/* harmony import */ var _TabButtonStamp__WEBPACK_IMPORTED_MODULE_23__ = __webpack_require__(/*! ./TabButtonStamp */ \"./src/view/TabButtonStamp.tsx\");\n/* harmony import */ var _SizeTracker__WEBPACK_IMPORTED_MODULE_24__ = __webpack_require__(/*! ./SizeTracker */ \"./src/view/SizeTracker.tsx\");\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n/**\n * A React component that hosts a multi-tabbed layout\n */\nclass Layout extends react__WEBPACK_IMPORTED_MODULE_0__.Component {\n    /** @internal */\n    constructor(props) {\n        super(props);\n        this.selfRef = react__WEBPACK_IMPORTED_MODULE_0__.createRef();\n        this.revision = 0;\n    }\n    /** re-render the layout */\n    redraw() {\n        this.selfRef.current.redraw(\"parent \" + this.revision);\n    }\n    /**\n     * Adds a new tab to the given tabset\n     * @param tabsetId the id of the tabset where the new tab will be added\n     * @param json the json for the new tab node\n     * @returns the added tab node or undefined\n     */\n    addTabToTabSet(tabsetId, json) {\n        return this.selfRef.current.addTabToTabSet(tabsetId, json);\n    }\n    /**\n     * Adds a new tab by dragging an item to the drop location, must be called from within an HTML\n     * drag start handler. You can use the setDragComponent() method to set the drag image before calling this\n     * method.\n     * @param event the drag start event\n     * @param json the json for the new tab node\n     * @param onDrop a callback to call when the drag is complete\n     */\n    addTabWithDragAndDrop(event, json, onDrop) {\n        this.selfRef.current.addTabWithDragAndDrop(event, json, onDrop);\n    }\n    /**\n     * Move a tab/tabset using drag and drop, must be called from within an HTML\n     * drag start handler\n     * @param event the drag start event\n     * @param node the tab or tabset to drag\n     */\n    moveTabWithDragAndDrop(event, node) {\n        this.selfRef.current.moveTabWithDragAndDrop(event, node);\n    }\n    /**\n     * Adds a new tab to the active tabset (if there is one)\n     * @param json the json for the new tab node\n     * @returns the added tab node or undefined\n     */\n    addTabToActiveTabSet(json) {\n        return this.selfRef.current.addTabToActiveTabSet(json);\n    }\n    /**\n     * Sets the drag image from a react component for a drag event\n     * @param event the drag event\n     * @param component the react component to be used for the drag image\n     * @param x the x position of the drag cursor on the image\n     * @param y the x position of the drag cursor on the image\n     */\n    setDragComponent(event, component, x, y) {\n        this.selfRef.current.setDragComponent(event, component, x, y);\n    }\n    /** Get the root div element of the layout */\n    getRootDiv() {\n        return this.selfRef.current.getRootDiv();\n    }\n    /** @internal */\n    render() {\n        return (react__WEBPACK_IMPORTED_MODULE_0__.createElement(LayoutInternal, Object.assign({ ref: this.selfRef }, this.props, { renderRevision: this.revision++ })));\n    }\n}\n/** @internal */\nclass LayoutInternal extends react__WEBPACK_IMPORTED_MODULE_0__.Component {\n    // private renderCount: any;\n    constructor(props) {\n        super(props);\n        this.moveableElementMap = new Map();\n        this.dragEnterCount = 0;\n        this.dragging = false;\n        this.updateLayoutMetrics = () => {\n            if (this.findBorderBarSizeRef.current) {\n                const borderBarSize = this.findBorderBarSizeRef.current.getBoundingClientRect().height;\n                if (borderBarSize !== this.state.calculatedBorderBarSize) {\n                    this.setState({ calculatedBorderBarSize: borderBarSize });\n                }\n            }\n        };\n        this.onModelChange = (action) => {\n            this.redrawInternal(\"model change\");\n            if (this.props.onModelChange) {\n                this.props.onModelChange(this.props.model, action);\n            }\n        };\n        this.updateRect = () => {\n            const rect = this.getDomRect();\n            if (!rect.equals(this.state.rect) && rect.width !== 0 && rect.height !== 0) {\n                // console.log(\"updateRect\", rect.floor());\n                this.setState({ rect });\n                if (this.windowId !== _model_Model__WEBPACK_IMPORTED_MODULE_10__.Model.MAIN_WINDOW_ID) {\n                    this.redrawInternal(\"rect updated\");\n                }\n            }\n        };\n        this.getClassName = (defaultClassName) => {\n            if (this.props.classNameMapper === undefined) {\n                return defaultClassName;\n            }\n            else {\n                return this.props.classNameMapper(defaultClassName);\n            }\n        };\n        this.onCloseWindow = (windowLayout) => {\n            this.doAction(_model_Actions__WEBPACK_IMPORTED_MODULE_8__.Actions.closeWindow(windowLayout.windowId));\n        };\n        this.onSetWindow = (windowLayout, window) => {\n        };\n        this.showControlInPortal = (control, element) => {\n            const portal = (0,react_dom__WEBPACK_IMPORTED_MODULE_1__.createPortal)(control, element);\n            this.setState({ portal });\n        };\n        this.hideControlInPortal = () => {\n            this.setState({ portal: undefined });\n        };\n        this.getIcons = () => {\n            return this.icons;\n        };\n        this.setDragNode = (event, node) => {\n            LayoutInternal.dragState = new DragState(this.mainLayout, DragSource.Internal, node, undefined, undefined);\n            // Note: can only set (very) limited types on android! so cannot set json\n            // Note: must set text/plain for android to allow drag, \n            //  so just set a simple message indicating its a flexlayout drag (this is not used anywhere else)\n            event.dataTransfer.setData('text/plain', \"--flexlayout--\");\n            event.dataTransfer.effectAllowed = \"copyMove\";\n            event.dataTransfer.dropEffect = \"move\";\n            this.dragEnterCount = 0;\n            if (node instanceof _model_TabSetNode__WEBPACK_IMPORTED_MODULE_12__.TabSetNode) {\n                let rendered = false;\n                let content = this.i18nName(_I18nLabel__WEBPACK_IMPORTED_MODULE_4__.I18nLabel.Move_Tabset);\n                if (node.getChildren().length > 0) {\n                    content = this.i18nName(_I18nLabel__WEBPACK_IMPORTED_MODULE_4__.I18nLabel.Move_Tabs).replace(\"?\", String(node.getChildren().length));\n                }\n                if (this.props.onRenderDragRect) {\n                    const dragComponent = this.props.onRenderDragRect(content, node, undefined);\n                    if (dragComponent) {\n                        this.setDragComponent(event, dragComponent, 10, 10);\n                        rendered = true;\n                    }\n                }\n                if (!rendered) {\n                    this.setDragComponent(event, content, 10, 10);\n                }\n            }\n            else {\n                const element = event.target;\n                const rect = element.getBoundingClientRect();\n                const offsetX = event.clientX - rect.left;\n                const offsetY = event.clientY - rect.top;\n                const parentNode = node === null || node === void 0 ? void 0 : node.getParent();\n                const isInVerticalBorder = parentNode instanceof _model_BorderNode__WEBPACK_IMPORTED_MODULE_9__.BorderNode && parentNode.getOrientation() === _Orientation__WEBPACK_IMPORTED_MODULE_5__.Orientation.HORZ;\n                const x = isInVerticalBorder ? 10 : offsetX;\n                const y = isInVerticalBorder ? 10 : offsetY;\n                let rendered = false;\n                if (this.props.onRenderDragRect) {\n                    const content = react__WEBPACK_IMPORTED_MODULE_0__.createElement(_TabButtonStamp__WEBPACK_IMPORTED_MODULE_23__.TabButtonStamp, { key: node.getId(), layout: this, node: node });\n                    const dragComponent = this.props.onRenderDragRect(content, node, undefined);\n                    if (dragComponent) {\n                        this.setDragComponent(event, dragComponent, x, y);\n                        rendered = true;\n                    }\n                }\n                if (!rendered) {\n                    if ((0,_Utils__WEBPACK_IMPORTED_MODULE_22__.isSafari)()) { // safari doesnt render the offscreen tabstamps\n                        this.setDragComponent(event, react__WEBPACK_IMPORTED_MODULE_0__.createElement(_TabButtonStamp__WEBPACK_IMPORTED_MODULE_23__.TabButtonStamp, { node: node, layout: this }), x, y);\n                    }\n                    else {\n                        event.dataTransfer.setDragImage(node.getTabStamp(), x, y);\n                    }\n                }\n            }\n        };\n        this.onDragEnterRaw = (event) => {\n            this.dragEnterCount++;\n            if (this.dragEnterCount === 1) {\n                this.onDragEnter(event);\n            }\n        };\n        this.onDragLeaveRaw = (event) => {\n            this.dragEnterCount--;\n            if (this.dragEnterCount === 0) {\n                this.onDragLeave(event);\n            }\n        };\n        this.onDragEnter = (event) => {\n            // console.log(\"onDragEnter\", this.windowId, this.dragEnterCount);\n            var _a;\n            if (!LayoutInternal.dragState && this.props.onExternalDrag) { // not internal dragging\n                const externalDrag = this.props.onExternalDrag(event);\n                if (externalDrag) {\n                    const tempNode = _model_TabNode__WEBPACK_IMPORTED_MODULE_11__.TabNode.fromJson(externalDrag.json, this.props.model, false);\n                    LayoutInternal.dragState = new DragState(this.mainLayout, DragSource.External, tempNode, externalDrag.json, externalDrag.onDrop);\n                }\n            }\n            if (LayoutInternal.dragState) {\n                if (this.windowId !== _model_Model__WEBPACK_IMPORTED_MODULE_10__.Model.MAIN_WINDOW_ID && LayoutInternal.dragState.mainLayout === this.mainLayout) {\n                    LayoutInternal.dragState.mainLayout.setDraggingOverWindow(true);\n                }\n                if (LayoutInternal.dragState.mainLayout !== this.mainLayout) {\n                    return; // drag not by this layout or its popouts\n                }\n                event.preventDefault();\n                this.dropInfo = undefined;\n                const rootdiv = this.selfRef.current;\n                this.outlineDiv = this.currentDocument.createElement(\"div\");\n                this.outlineDiv.className = this.getClassName(_Types__WEBPACK_IMPORTED_MODULE_7__.CLASSES.FLEXLAYOUT__OUTLINE_RECT);\n                this.outlineDiv.style.visibility = \"hidden\";\n                const speed = this.props.model.getAttribute(\"tabDragSpeed\");\n                this.outlineDiv.style.transition = `top ${speed}s, left ${speed}s, width ${speed}s, height ${speed}s`;\n                rootdiv.appendChild(this.outlineDiv);\n                this.dragging = true;\n                this.showOverlay(true);\n                // add edge indicators\n                if (!this.isDraggingOverWindow && this.props.model.getMaximizedTabset(this.windowId) === undefined) {\n                    this.setState({ showEdges: this.props.model.isEnableEdgeDock() });\n                }\n                const clientRect = (_a = this.selfRef.current) === null || _a === void 0 ? void 0 : _a.getBoundingClientRect();\n                const r = new _Rect__WEBPACK_IMPORTED_MODULE_6__.Rect(event.clientX - (clientRect.left), event.clientY - (clientRect.top), 1, 1);\n                r.positionElement(this.outlineDiv);\n            }\n        };\n        this.onDragOver = (event) => {\n            var _a, _b, _c;\n            if (this.dragging && !this.isDraggingOverWindow) {\n                // console.log(\"onDragOver\");\n                event.preventDefault();\n                const clientRect = (_a = this.selfRef.current) === null || _a === void 0 ? void 0 : _a.getBoundingClientRect();\n                const pos = {\n                    x: event.clientX - ((_b = clientRect === null || clientRect === void 0 ? void 0 : clientRect.left) !== null && _b !== void 0 ? _b : 0),\n                    y: event.clientY - ((_c = clientRect === null || clientRect === void 0 ? void 0 : clientRect.top) !== null && _c !== void 0 ? _c : 0),\n                };\n                this.checkForBorderToShow(pos.x, pos.y);\n                let dropInfo = this.props.model.findDropTargetNode(this.windowId, LayoutInternal.dragState.dragNode, pos.x, pos.y);\n                if (dropInfo) {\n                    this.dropInfo = dropInfo;\n                    if (this.outlineDiv) {\n                        this.outlineDiv.className = this.getClassName(dropInfo.className);\n                        dropInfo.rect.positionElement(this.outlineDiv);\n                        this.outlineDiv.style.visibility = \"visible\";\n                    }\n                }\n            }\n        };\n        this.onDragLeave = (event) => {\n            // console.log(\"onDragLeave\", this.windowId, this.dragging);\n            if (this.dragging) {\n                if (this.windowId !== _model_Model__WEBPACK_IMPORTED_MODULE_10__.Model.MAIN_WINDOW_ID) {\n                    LayoutInternal.dragState.mainLayout.setDraggingOverWindow(false);\n                }\n                this.clearDragLocal();\n            }\n        };\n        this.onDrop = (event) => {\n            // console.log(\"ondrop\", this.windowId, this.dragging, Layout.dragState);\n            if (this.dragging) {\n                event.preventDefault();\n                const dragState = LayoutInternal.dragState;\n                if (this.dropInfo) {\n                    if (dragState.dragJson !== undefined) {\n                        const newNode = this.doAction(_model_Actions__WEBPACK_IMPORTED_MODULE_8__.Actions.addNode(dragState.dragJson, this.dropInfo.node.getId(), this.dropInfo.location, this.dropInfo.index));\n                        if (dragState.fnNewNodeDropped !== undefined) {\n                            dragState.fnNewNodeDropped(newNode, event);\n                        }\n                    }\n                    else if (dragState.dragNode !== undefined) {\n                        this.doAction(_model_Actions__WEBPACK_IMPORTED_MODULE_8__.Actions.moveNode(dragState.dragNode.getId(), this.dropInfo.node.getId(), this.dropInfo.location, this.dropInfo.index));\n                    }\n                }\n                this.mainLayout.clearDragMain();\n            }\n            this.dragEnterCount = 0; // must set to zero here ref sublayouts\n        };\n        this.orderedIds = [];\n        this.selfRef = react__WEBPACK_IMPORTED_MODULE_0__.createRef();\n        this.moveablesRef = react__WEBPACK_IMPORTED_MODULE_0__.createRef();\n        this.mainRef = react__WEBPACK_IMPORTED_MODULE_0__.createRef();\n        this.findBorderBarSizeRef = react__WEBPACK_IMPORTED_MODULE_0__.createRef();\n        this.supportsPopout = props.supportsPopout !== undefined ? props.supportsPopout : defaultSupportsPopout;\n        this.popoutURL = props.popoutURL ? props.popoutURL : \"popout.html\";\n        this.icons = Object.assign(Object.assign({}, defaultIcons), props.icons);\n        this.windowId = props.windowId ? props.windowId : _model_Model__WEBPACK_IMPORTED_MODULE_10__.Model.MAIN_WINDOW_ID;\n        this.mainLayout = this.props.mainLayout ? this.props.mainLayout : this;\n        this.isDraggingOverWindow = false;\n        this.layoutWindow = this.props.model.getwindowsMap().get(this.windowId);\n        this.layoutWindow.layout = this;\n        this.popoutWindowName = this.props.popoutWindowName || \"Popout Window\";\n        // this.renderCount = 0;\n        this.state = {\n            rect: _Rect__WEBPACK_IMPORTED_MODULE_6__.Rect.empty(),\n            editingTab: undefined,\n            showEdges: false,\n            showOverlay: false,\n            calculatedBorderBarSize: 29,\n            layoutRevision: 0,\n            forceRevision: 0,\n            showHiddenBorder: _DockLocation__WEBPACK_IMPORTED_MODULE_3__.DockLocation.CENTER\n        };\n        this.isMainWindow = this.windowId === _model_Model__WEBPACK_IMPORTED_MODULE_10__.Model.MAIN_WINDOW_ID;\n    }\n    componentDidMount() {\n        this.updateRect();\n        this.currentDocument = this.selfRef.current.ownerDocument;\n        this.currentWindow = this.currentDocument.defaultView;\n        this.layoutWindow.window = this.currentWindow;\n        this.layoutWindow.toScreenRectFunction = (r) => this.getScreenRect(r);\n        this.resizeObserver = new ResizeObserver(entries => {\n            requestAnimationFrame(() => {\n                this.updateRect();\n            });\n        });\n        if (this.selfRef.current) {\n            this.resizeObserver.observe(this.selfRef.current);\n        }\n        if (this.isMainWindow) {\n            this.props.model.addChangeListener(this.onModelChange);\n            this.updateLayoutMetrics();\n        }\n        else {\n            // since resizeObserver doesn't always work as expected when observing element in another document\n            this.currentWindow.addEventListener(\"resize\", () => {\n                this.updateRect();\n            });\n            const sourceElement = this.props.mainLayout.getRootDiv();\n            const targetElement = this.selfRef.current;\n            (0,_Utils__WEBPACK_IMPORTED_MODULE_22__.copyInlineStyles)(sourceElement, targetElement);\n            this.styleObserver = new MutationObserver(() => {\n                const changed = (0,_Utils__WEBPACK_IMPORTED_MODULE_22__.copyInlineStyles)(sourceElement, targetElement);\n                if (changed) {\n                    this.redraw(\"mutation observer\");\n                }\n            });\n            // Observe changes to the source element's style attribute\n            this.styleObserver.observe(sourceElement, { attributeFilter: ['style'] });\n        }\n        // allow tabs to overlay when hidden\n        document.addEventListener('visibilitychange', () => {\n            for (const [_, layoutWindow] of this.props.model.getwindowsMap()) {\n                const layout = layoutWindow.layout;\n                if (layout) {\n                    this.redraw(\"visibility change\");\n                }\n            }\n        });\n    }\n    componentDidUpdate() {\n        this.currentDocument = this.selfRef.current.ownerDocument;\n        this.currentWindow = this.currentDocument.defaultView;\n        if (this.isMainWindow) {\n            if (this.props.model !== this.previousModel) {\n                if (this.previousModel !== undefined) {\n                    this.previousModel.removeChangeListener(this.onModelChange); // stop listening to old model\n                }\n                this.props.model.getwindowsMap().get(this.windowId).layout = this;\n                this.props.model.addChangeListener(this.onModelChange);\n                this.layoutWindow = this.props.model.getwindowsMap().get(this.windowId);\n                this.layoutWindow.layout = this;\n                this.layoutWindow.toScreenRectFunction = (r) => this.getScreenRect(r);\n                this.previousModel = this.props.model;\n                this.tidyMoveablesMap();\n            }\n            this.updateLayoutMetrics();\n        }\n    }\n    componentWillUnmount() {\n        var _a, _b;\n        if (this.selfRef.current) {\n            (_a = this.resizeObserver) === null || _a === void 0 ? void 0 : _a.unobserve(this.selfRef.current);\n        }\n        (_b = this.styleObserver) === null || _b === void 0 ? void 0 : _b.disconnect();\n    }\n    render() {\n        // console.log(\"render\", this.windowId, this.state.revision, this.renderCount++);\n        // first render will be used to find the size (via selfRef)\n        if (!this.selfRef.current) {\n            return (react__WEBPACK_IMPORTED_MODULE_0__.createElement(\"div\", { ref: this.selfRef, className: this.getClassName(_Types__WEBPACK_IMPORTED_MODULE_7__.CLASSES.FLEXLAYOUT__LAYOUT) },\n                react__WEBPACK_IMPORTED_MODULE_0__.createElement(\"div\", { ref: this.moveablesRef, key: \"__moveables__\", className: this.getClassName(_Types__WEBPACK_IMPORTED_MODULE_7__.CLASSES.FLEXLAYOUT__LAYOUT_MOVEABLES) }),\n                this.renderMetricsElements()));\n        }\n        const model = this.props.model;\n        model.getRoot(this.windowId).calcMinMaxSize();\n        model.getRoot(this.windowId).setPaths(\"\");\n        model.getBorderSet().setPaths();\n        const inner = this.renderLayout();\n        const outer = this.renderBorders(inner);\n        const tabs = this.renderTabs();\n        const reorderedTabs = this.reorderComponents(tabs, this.orderedIds);\n        let floatingWindows = null;\n        let tabMoveables = null;\n        let tabStamps = null;\n        let metricElements = null;\n        if (this.isMainWindow) {\n            floatingWindows = this.renderWindows();\n            metricElements = this.renderMetricsElements();\n            tabMoveables = this.renderTabMoveables();\n            tabStamps = react__WEBPACK_IMPORTED_MODULE_0__.createElement(\"div\", { key: \"__tabStamps__\", className: this.getClassName(_Types__WEBPACK_IMPORTED_MODULE_7__.CLASSES.FLEXLAYOUT__LAYOUT_TAB_STAMPS) }, this.renderTabStamps());\n        }\n        return (react__WEBPACK_IMPORTED_MODULE_0__.createElement(\"div\", { ref: this.selfRef, className: this.getClassName(_Types__WEBPACK_IMPORTED_MODULE_7__.CLASSES.FLEXLAYOUT__LAYOUT), onDragEnter: this.onDragEnterRaw, onDragLeave: this.onDragLeaveRaw, onDragOver: this.onDragOver, onDrop: this.onDrop },\n            react__WEBPACK_IMPORTED_MODULE_0__.createElement(\"div\", { ref: this.moveablesRef, key: \"__moveables__\", className: this.getClassName(_Types__WEBPACK_IMPORTED_MODULE_7__.CLASSES.FLEXLAYOUT__LAYOUT_MOVEABLES) }),\n            metricElements,\n            react__WEBPACK_IMPORTED_MODULE_0__.createElement(_Overlay__WEBPACK_IMPORTED_MODULE_19__.Overlay, { key: \"__overlay__\", layout: this, show: this.state.showOverlay }),\n            outer,\n            reorderedTabs,\n            tabMoveables,\n            tabStamps,\n            this.state.portal,\n            floatingWindows));\n    }\n    renderBorders(inner) {\n        const classMain = this.getClassName(_Types__WEBPACK_IMPORTED_MODULE_7__.CLASSES.FLEXLAYOUT__LAYOUT_MAIN);\n        const borders = this.props.model.getBorderSet().getBorderMap();\n        if (this.isMainWindow && borders.size > 0) {\n            inner = (react__WEBPACK_IMPORTED_MODULE_0__.createElement(\"div\", { className: classMain, ref: this.mainRef }, inner));\n            const borderSetComponents = new Map();\n            const borderSetContentComponents = new Map();\n            for (const [_, location] of _DockLocation__WEBPACK_IMPORTED_MODULE_3__.DockLocation.values) {\n                const border = borders.get(location);\n                const showBorder = border && border.isShowing() && (!border.isAutoHide() ||\n                    (border.isAutoHide() && (border.getChildren().length > 0 || this.state.showHiddenBorder === location)));\n                if (showBorder) {\n                    borderSetComponents.set(location, react__WEBPACK_IMPORTED_MODULE_0__.createElement(_BorderTabSet__WEBPACK_IMPORTED_MODULE_14__.BorderTabSet, { layout: this, border: border, size: this.state.calculatedBorderBarSize }));\n                    borderSetContentComponents.set(location, react__WEBPACK_IMPORTED_MODULE_0__.createElement(_BorderTab__WEBPACK_IMPORTED_MODULE_13__.BorderTab, { layout: this, border: border, show: border.getSelected() !== -1 }));\n                }\n            }\n            const classBorderOuter = this.getClassName(_Types__WEBPACK_IMPORTED_MODULE_7__.CLASSES.FLEXLAYOUT__LAYOUT_BORDER_CONTAINER);\n            const classBorderInner = this.getClassName(_Types__WEBPACK_IMPORTED_MODULE_7__.CLASSES.FLEXLAYOUT__LAYOUT_BORDER_CONTAINER_INNER);\n            if (this.props.model.getBorderSet().getLayoutHorizontal()) {\n                const innerWithBorderTabs = (react__WEBPACK_IMPORTED_MODULE_0__.createElement(\"div\", { className: classBorderInner, style: { flexDirection: \"column\" } },\n                    borderSetContentComponents.get(_DockLocation__WEBPACK_IMPORTED_MODULE_3__.DockLocation.TOP),\n                    react__WEBPACK_IMPORTED_MODULE_0__.createElement(\"div\", { className: classBorderInner, style: { flexDirection: \"row\" } },\n                        borderSetContentComponents.get(_DockLocation__WEBPACK_IMPORTED_MODULE_3__.DockLocation.LEFT),\n                        inner,\n                        borderSetContentComponents.get(_DockLocation__WEBPACK_IMPORTED_MODULE_3__.DockLocation.RIGHT)),\n                    borderSetContentComponents.get(_DockLocation__WEBPACK_IMPORTED_MODULE_3__.DockLocation.BOTTOM)));\n                return (react__WEBPACK_IMPORTED_MODULE_0__.createElement(\"div\", { className: classBorderOuter, style: { flexDirection: \"column\" } },\n                    borderSetComponents.get(_DockLocation__WEBPACK_IMPORTED_MODULE_3__.DockLocation.TOP),\n                    react__WEBPACK_IMPORTED_MODULE_0__.createElement(\"div\", { className: classBorderInner, style: { flexDirection: \"row\" } },\n                        borderSetComponents.get(_DockLocation__WEBPACK_IMPORTED_MODULE_3__.DockLocation.LEFT),\n                        innerWithBorderTabs,\n                        borderSetComponents.get(_DockLocation__WEBPACK_IMPORTED_MODULE_3__.DockLocation.RIGHT)),\n                    borderSetComponents.get(_DockLocation__WEBPACK_IMPORTED_MODULE_3__.DockLocation.BOTTOM)));\n            }\n            else {\n                const innerWithBorderTabs = (react__WEBPACK_IMPORTED_MODULE_0__.createElement(\"div\", { className: classBorderInner, style: { flexDirection: \"row\" } },\n                    borderSetContentComponents.get(_DockLocation__WEBPACK_IMPORTED_MODULE_3__.DockLocation.LEFT),\n                    react__WEBPACK_IMPORTED_MODULE_0__.createElement(\"div\", { className: classBorderInner, style: { flexDirection: \"column\" } },\n                        borderSetContentComponents.get(_DockLocation__WEBPACK_IMPORTED_MODULE_3__.DockLocation.TOP),\n                        inner,\n                        borderSetContentComponents.get(_DockLocation__WEBPACK_IMPORTED_MODULE_3__.DockLocation.BOTTOM)),\n                    borderSetContentComponents.get(_DockLocation__WEBPACK_IMPORTED_MODULE_3__.DockLocation.RIGHT)));\n                return (react__WEBPACK_IMPORTED_MODULE_0__.createElement(\"div\", { className: classBorderOuter, style: { flexDirection: \"row\" } },\n                    borderSetComponents.get(_DockLocation__WEBPACK_IMPORTED_MODULE_3__.DockLocation.LEFT),\n                    react__WEBPACK_IMPORTED_MODULE_0__.createElement(\"div\", { className: classBorderInner, style: { flexDirection: \"column\" } },\n                        borderSetComponents.get(_DockLocation__WEBPACK_IMPORTED_MODULE_3__.DockLocation.TOP),\n                        innerWithBorderTabs,\n                        borderSetComponents.get(_DockLocation__WEBPACK_IMPORTED_MODULE_3__.DockLocation.BOTTOM)),\n                    borderSetComponents.get(_DockLocation__WEBPACK_IMPORTED_MODULE_3__.DockLocation.RIGHT)));\n            }\n        }\n        else { // no borders\n            return (react__WEBPACK_IMPORTED_MODULE_0__.createElement(\"div\", { className: classMain, ref: this.mainRef, style: { position: \"absolute\", top: 0, left: 0, bottom: 0, right: 0, display: \"flex\" } }, inner));\n        }\n    }\n    renderLayout() {\n        return (react__WEBPACK_IMPORTED_MODULE_0__.createElement(react__WEBPACK_IMPORTED_MODULE_0__.Fragment, null,\n            react__WEBPACK_IMPORTED_MODULE_0__.createElement(_Row__WEBPACK_IMPORTED_MODULE_20__.Row, { key: \"__row__\", layout: this, node: this.props.model.getRoot(this.windowId) }),\n            this.renderEdgeIndicators()));\n    }\n    renderEdgeIndicators() {\n        const edges = [];\n        const arrowIcon = this.icons.edgeArrow;\n        if (this.state.showEdges) {\n            const r = this.props.model.getRoot(this.windowId).getRect();\n            const length = edgeRectLength;\n            const width = edgeRectWidth;\n            const offset = edgeRectLength / 2;\n            const className = this.getClassName(_Types__WEBPACK_IMPORTED_MODULE_7__.CLASSES.FLEXLAYOUT__EDGE_RECT);\n            const radius = 50;\n            edges.push(react__WEBPACK_IMPORTED_MODULE_0__.createElement(\"div\", { key: \"North\", style: { top: 0, left: r.width / 2 - offset, width: length, height: width, borderBottomLeftRadius: radius, borderBottomRightRadius: radius }, className: className + \" \" + this.getClassName(_Types__WEBPACK_IMPORTED_MODULE_7__.CLASSES.FLEXLAYOUT__EDGE_RECT_TOP) },\n                react__WEBPACK_IMPORTED_MODULE_0__.createElement(\"div\", { style: { transform: \"rotate(180deg)\" } }, arrowIcon)));\n            edges.push(react__WEBPACK_IMPORTED_MODULE_0__.createElement(\"div\", { key: \"West\", style: { top: r.height / 2 - offset, left: 0, width: width, height: length, borderTopRightRadius: radius, borderBottomRightRadius: radius }, className: className + \" \" + this.getClassName(_Types__WEBPACK_IMPORTED_MODULE_7__.CLASSES.FLEXLAYOUT__EDGE_RECT_LEFT) },\n                react__WEBPACK_IMPORTED_MODULE_0__.createElement(\"div\", { style: { transform: \"rotate(90deg)\" } }, arrowIcon)));\n            edges.push(react__WEBPACK_IMPORTED_MODULE_0__.createElement(\"div\", { key: \"South\", style: { top: r.height - width, left: r.width / 2 - offset, width: length, height: width, borderTopLeftRadius: radius, borderTopRightRadius: radius }, className: className + \" \" + this.getClassName(_Types__WEBPACK_IMPORTED_MODULE_7__.CLASSES.FLEXLAYOUT__EDGE_RECT_BOTTOM) },\n                react__WEBPACK_IMPORTED_MODULE_0__.createElement(\"div\", null, arrowIcon)));\n            edges.push(react__WEBPACK_IMPORTED_MODULE_0__.createElement(\"div\", { key: \"East\", style: { top: r.height / 2 - offset, left: r.width - width, width: width, height: length, borderTopLeftRadius: radius, borderBottomLeftRadius: radius }, className: className + \" \" + this.getClassName(_Types__WEBPACK_IMPORTED_MODULE_7__.CLASSES.FLEXLAYOUT__EDGE_RECT_RIGHT) },\n                react__WEBPACK_IMPORTED_MODULE_0__.createElement(\"div\", { style: { transform: \"rotate(-90deg)\" } }, arrowIcon)));\n        }\n        return edges;\n    }\n    renderWindows() {\n        const floatingWindows = [];\n        if (this.supportsPopout) {\n            const windows = this.props.model.getwindowsMap();\n            let i = 1;\n            for (const [windowId, layoutWindow] of windows) {\n                if (windowId !== _model_Model__WEBPACK_IMPORTED_MODULE_10__.Model.MAIN_WINDOW_ID) {\n                    floatingWindows.push(react__WEBPACK_IMPORTED_MODULE_0__.createElement(_PopoutWindow__WEBPACK_IMPORTED_MODULE_17__.PopoutWindow, { key: windowId, layout: this, title: this.popoutWindowName + \" \" + i, layoutWindow: layoutWindow, url: this.popoutURL + \"?id=\" + windowId, onSetWindow: this.onSetWindow, onCloseWindow: this.onCloseWindow },\n                        react__WEBPACK_IMPORTED_MODULE_0__.createElement(\"div\", { className: this.props.popoutClassName },\n                            react__WEBPACK_IMPORTED_MODULE_0__.createElement(LayoutInternal, Object.assign({}, this.props, { windowId: windowId, mainLayout: this })))));\n                    i++;\n                }\n            }\n        }\n        return floatingWindows;\n    }\n    renderTabMoveables() {\n        const tabMoveables = [];\n        this.props.model.visitNodes((node) => {\n            if (node instanceof _model_TabNode__WEBPACK_IMPORTED_MODULE_11__.TabNode) {\n                const child = node;\n                const element = this.getMoveableElement(child.getId());\n                child.setMoveableElement(element);\n                const selected = child.isSelected();\n                const rect = child.getParent().getContentRect();\n                // only render first time if size >0\n                const renderTab = child.isRendered() ||\n                    ((selected || !child.isEnableRenderOnDemand()) && (rect.width > 0 && rect.height > 0));\n                if (renderTab) {\n                    //  console.log(\"rendertab\", child.getName(), this.props.renderRevision);\n                    const key = child.getId() + (child.isEnableWindowReMount() ? child.getWindowId() : \"\");\n                    tabMoveables.push((0,react_dom__WEBPACK_IMPORTED_MODULE_1__.createPortal)(react__WEBPACK_IMPORTED_MODULE_0__.createElement(_SizeTracker__WEBPACK_IMPORTED_MODULE_24__.SizeTracker, { rect: rect, selected: child.isSelected(), forceRevision: this.state.forceRevision, tabsRevision: this.props.renderRevision, key: key },\n                        react__WEBPACK_IMPORTED_MODULE_0__.createElement(_ErrorBoundary__WEBPACK_IMPORTED_MODULE_16__.ErrorBoundary, { message: this.i18nName(_I18nLabel__WEBPACK_IMPORTED_MODULE_4__.I18nLabel.Error_rendering_component) }, this.props.factory(child))), element, key));\n                    child.setRendered(renderTab);\n                }\n            }\n        });\n        return tabMoveables;\n    }\n    renderTabStamps() {\n        const tabStamps = [];\n        this.props.model.visitNodes((node) => {\n            if (node instanceof _model_TabNode__WEBPACK_IMPORTED_MODULE_11__.TabNode) {\n                const child = node;\n                // what the tab should look like when dragged (since images need to have been loaded before drag image can be taken)\n                tabStamps.push(react__WEBPACK_IMPORTED_MODULE_0__.createElement(_DragContainer__WEBPACK_IMPORTED_MODULE_15__.DragContainer, { key: child.getId(), layout: this, node: child }));\n            }\n        });\n        return tabStamps;\n    }\n    renderTabs() {\n        const tabs = new Map();\n        this.props.model.visitWindowNodes(this.windowId, (node) => {\n            if (node instanceof _model_TabNode__WEBPACK_IMPORTED_MODULE_11__.TabNode) {\n                const child = node;\n                const selected = child.isSelected();\n                const path = child.getPath();\n                const renderTab = child.isRendered() || selected || !child.isEnableRenderOnDemand();\n                if (renderTab) {\n                    // const rect = (child.getParent() as BorderNode | TabSetNode).getContentRect();\n                    // const key = child.getId();\n                    tabs.set(child.getId(), (\n                    // <SizeTracker rect={rect} forceRevision={this.state.forceRevision} key={key}>\n                    react__WEBPACK_IMPORTED_MODULE_0__.createElement(_Tab__WEBPACK_IMPORTED_MODULE_21__.Tab, { key: child.getId(), layout: this, path: path, node: child, selected: selected })\n                    // </SizeTracker>\n                    ));\n                }\n            }\n        });\n        return tabs;\n    }\n    renderMetricsElements() {\n        return (react__WEBPACK_IMPORTED_MODULE_0__.createElement(\"div\", { key: \"findBorderBarSize\", ref: this.findBorderBarSizeRef, className: this.getClassName(_Types__WEBPACK_IMPORTED_MODULE_7__.CLASSES.FLEXLAYOUT__BORDER_SIZER) }, \"FindBorderBarSize\"));\n    }\n    checkForBorderToShow(x, y) {\n        const r = this.getBoundingClientRect(this.mainRef.current);\n        const c = r.getCenter();\n        const margin = edgeRectWidth;\n        const offset = edgeRectLength / 2;\n        let overEdge = false;\n        if (this.props.model.isEnableEdgeDock() && this.state.showHiddenBorder === _DockLocation__WEBPACK_IMPORTED_MODULE_3__.DockLocation.CENTER) {\n            if ((y > c.y - offset && y < c.y + offset) ||\n                (x > c.x - offset && x < c.x + offset)) {\n                overEdge = true;\n            }\n        }\n        let location = _DockLocation__WEBPACK_IMPORTED_MODULE_3__.DockLocation.CENTER;\n        if (!overEdge) {\n            if (x <= r.x + margin) {\n                location = _DockLocation__WEBPACK_IMPORTED_MODULE_3__.DockLocation.LEFT;\n            }\n            else if (x >= r.getRight() - margin) {\n                location = _DockLocation__WEBPACK_IMPORTED_MODULE_3__.DockLocation.RIGHT;\n            }\n            else if (y <= r.y + margin) {\n                location = _DockLocation__WEBPACK_IMPORTED_MODULE_3__.DockLocation.TOP;\n            }\n            else if (y >= r.getBottom() - margin) {\n                location = _DockLocation__WEBPACK_IMPORTED_MODULE_3__.DockLocation.BOTTOM;\n            }\n        }\n        if (location !== this.state.showHiddenBorder) {\n            this.setState({ showHiddenBorder: location });\n        }\n    }\n    tidyMoveablesMap() {\n        // console.log(\"tidyMoveablesMap\");\n        const tabs = new Map();\n        this.props.model.visitNodes((node, _) => {\n            if (node instanceof _model_TabNode__WEBPACK_IMPORTED_MODULE_11__.TabNode) {\n                tabs.set(node.getId(), node);\n            }\n        });\n        for (const [nodeId, element] of this.moveableElementMap) {\n            if (!tabs.has(nodeId)) {\n                // console.log(\"delete\", nodeId);\n                element.remove(); // remove from dom\n                this.moveableElementMap.delete(nodeId); // remove map entry \n            }\n        }\n    }\n    reorderComponents(components, ids) {\n        const nextIds = [];\n        const nextIdsSet = new Set();\n        let reordered = [];\n        // Keep any previous tabs in the same DOM order as before, removing any that have been deleted\n        for (const id of ids) {\n            if (components.get(id)) {\n                nextIds.push(id);\n                nextIdsSet.add(id);\n            }\n        }\n        ids.splice(0, ids.length, ...nextIds);\n        // Add tabs that have been added to the DOM\n        for (const [id, _] of components) {\n            if (!nextIdsSet.has(id)) {\n                ids.push(id);\n            }\n        }\n        reordered = ids.map((id) => {\n            return components.get(id);\n        });\n        return reordered;\n    }\n    redraw(type) {\n        // console.log(\"redraw\", this.windowId, type);\n        this.mainLayout.setState((state, props) => { return { forceRevision: state.forceRevision + 1 }; });\n    }\n    redrawInternal(type) {\n        // console.log(\"redrawInternal\", this.windowId, type);\n        this.mainLayout.setState((state, props) => { return { layoutRevision: state.layoutRevision + 1 }; });\n    }\n    doAction(action) {\n        if (this.props.onAction !== undefined) {\n            const outcome = this.props.onAction(action);\n            if (outcome !== undefined) {\n                return this.props.model.doAction(outcome);\n            }\n            return undefined;\n        }\n        else {\n            return this.props.model.doAction(action);\n        }\n    }\n    getBoundingClientRect(div) {\n        const layoutRect = this.getDomRect();\n        if (layoutRect) {\n            return _Rect__WEBPACK_IMPORTED_MODULE_6__.Rect.getBoundingClientRect(div).relativeTo(layoutRect);\n        }\n        return _Rect__WEBPACK_IMPORTED_MODULE_6__.Rect.empty();\n    }\n    getMoveableContainer() {\n        return this.moveablesRef.current;\n    }\n    getMoveableElement(id) {\n        let moveableElement = this.moveableElementMap.get(id);\n        if (moveableElement === undefined) {\n            moveableElement = document.createElement(\"div\");\n            this.moveablesRef.current.appendChild(moveableElement);\n            moveableElement.className = _Types__WEBPACK_IMPORTED_MODULE_7__.CLASSES.FLEXLAYOUT__TAB_MOVEABLE;\n            this.moveableElementMap.set(id, moveableElement);\n        }\n        return moveableElement;\n    }\n    getMainLayout() {\n        return this.mainLayout;\n    }\n    getCurrentDocument() {\n        return this.currentDocument;\n    }\n    getDomRect() {\n        if (this.selfRef.current) {\n            return _Rect__WEBPACK_IMPORTED_MODULE_6__.Rect.fromDomRect(this.selfRef.current.getBoundingClientRect());\n        }\n        else {\n            return _Rect__WEBPACK_IMPORTED_MODULE_6__.Rect.empty();\n        }\n    }\n    getWindowId() {\n        return this.windowId;\n    }\n    getRootDiv() {\n        return this.selfRef.current;\n    }\n    getMainElement() {\n        return this.mainRef.current;\n    }\n    getFactory() {\n        return this.props.factory;\n    }\n    isSupportsPopout() {\n        return this.supportsPopout;\n    }\n    isRealtimeResize() {\n        var _a;\n        return (_a = this.props.realtimeResize) !== null && _a !== void 0 ? _a : false;\n    }\n    getPopoutURL() {\n        return this.popoutURL;\n    }\n    setEditingTab(tabNode) {\n        this.setState({ editingTab: tabNode });\n    }\n    getEditingTab() {\n        return this.state.editingTab;\n    }\n    getModel() {\n        return this.props.model;\n    }\n    getScreenRect(inRect) {\n        const rect = inRect.clone();\n        const layoutRect = this.getDomRect();\n        // Note: outerHeight can be less than innerHeight when window is zoomed, so cannot use\n        // const navHeight = Math.min(65, this.currentWindow!.outerHeight - this.currentWindow!.innerHeight);\n        // const navWidth = Math.min(65, this.currentWindow!.outerWidth - this.currentWindow!.innerWidth);\n        const navHeight = 60;\n        const navWidth = 2;\n        // console.log(rect.y, this.currentWindow!.screenX,layoutRect.y);\n        rect.x = this.currentWindow.screenX + this.currentWindow.scrollX + navWidth / 2 + layoutRect.x + rect.x;\n        rect.y = this.currentWindow.screenY + this.currentWindow.scrollY + (navHeight - navWidth / 2) + layoutRect.y + rect.y;\n        rect.height += navHeight;\n        rect.width += navWidth;\n        return rect;\n    }\n    addTabToTabSet(tabsetId, json) {\n        const tabsetNode = this.props.model.getNodeById(tabsetId);\n        if (tabsetNode !== undefined) {\n            const node = this.doAction(_model_Actions__WEBPACK_IMPORTED_MODULE_8__.Actions.addNode(json, tabsetId, _DockLocation__WEBPACK_IMPORTED_MODULE_3__.DockLocation.CENTER, -1));\n            return node;\n        }\n        return undefined;\n    }\n    addTabToActiveTabSet(json) {\n        const tabsetNode = this.props.model.getActiveTabset(this.windowId);\n        if (tabsetNode !== undefined) {\n            const node = this.doAction(_model_Actions__WEBPACK_IMPORTED_MODULE_8__.Actions.addNode(json, tabsetNode.getId(), _DockLocation__WEBPACK_IMPORTED_MODULE_3__.DockLocation.CENTER, -1));\n            return node;\n        }\n        return undefined;\n    }\n    maximize(tabsetNode) {\n        this.doAction(_model_Actions__WEBPACK_IMPORTED_MODULE_8__.Actions.maximizeToggle(tabsetNode.getId(), this.getWindowId()));\n    }\n    customizeTab(tabNode, renderValues) {\n        if (this.props.onRenderTab) {\n            this.props.onRenderTab(tabNode, renderValues);\n        }\n    }\n    customizeTabSet(tabSetNode, renderValues) {\n        if (this.props.onRenderTabSet) {\n            this.props.onRenderTabSet(tabSetNode, renderValues);\n        }\n    }\n    i18nName(id, param) {\n        let message;\n        if (this.props.i18nMapper) {\n            message = this.props.i18nMapper(id, param);\n        }\n        if (message === undefined) {\n            message = id + (param === undefined ? \"\" : param);\n        }\n        return message;\n    }\n    getShowOverflowMenu() {\n        return this.props.onShowOverflowMenu;\n    }\n    getTabSetPlaceHolderCallback() {\n        return this.props.onTabSetPlaceHolder;\n    }\n    showContextMenu(node, event) {\n        if (this.props.onContextMenu) {\n            this.props.onContextMenu(node, event);\n        }\n    }\n    auxMouseClick(node, event) {\n        if (this.props.onAuxMouseClick) {\n            this.props.onAuxMouseClick(node, event);\n        }\n    }\n    showOverlay(show) {\n        this.setState({ showOverlay: show });\n        (0,_Utils__WEBPACK_IMPORTED_MODULE_22__.enablePointerOnIFrames)(!show, this.currentDocument);\n    }\n    // *************************** Start Drag Drop *************************************\n    addTabWithDragAndDrop(event, json, onDrop) {\n        const tempNode = _model_TabNode__WEBPACK_IMPORTED_MODULE_11__.TabNode.fromJson(json, this.props.model, false);\n        LayoutInternal.dragState = new DragState(this.mainLayout, DragSource.Add, tempNode, json, onDrop);\n    }\n    moveTabWithDragAndDrop(event, node) {\n        this.setDragNode(event, node);\n    }\n    setDragComponent(event, component, x, y) {\n        let dragElement = (react__WEBPACK_IMPORTED_MODULE_0__.createElement(\"div\", { style: { position: \"unset\" }, className: this.getClassName(_Types__WEBPACK_IMPORTED_MODULE_7__.CLASSES.FLEXLAYOUT__LAYOUT) + \" \" + this.getClassName(_Types__WEBPACK_IMPORTED_MODULE_7__.CLASSES.FLEXLAYOUT__DRAG_RECT) }, component));\n        const tempDiv = this.currentDocument.createElement('div');\n        tempDiv.setAttribute(\"data-layout-path\", \"/drag-rectangle\");\n        tempDiv.style.position = \"absolute\";\n        tempDiv.style.left = \"-10000px\";\n        tempDiv.style.top = \"-10000px\";\n        this.currentDocument.body.appendChild(tempDiv);\n        (0,react_dom_client__WEBPACK_IMPORTED_MODULE_2__.createRoot)(tempDiv).render(dragElement);\n        event.dataTransfer.setDragImage(tempDiv, x, y);\n        setTimeout(() => {\n            this.currentDocument.body.removeChild(tempDiv);\n        }, 0);\n    }\n    setDraggingOverWindow(overWindow) {\n        // console.log(\"setDraggingOverWindow\", overWindow);\n        if (this.isDraggingOverWindow !== overWindow) {\n            if (this.outlineDiv) {\n                this.outlineDiv.style.visibility = overWindow ? \"hidden\" : \"visible\";\n            }\n            if (overWindow) {\n                this.setState({ showEdges: false });\n            }\n            else {\n                // add edge indicators\n                if (this.props.model.getMaximizedTabset(this.windowId) === undefined) {\n                    this.setState({ showEdges: this.props.model.isEnableEdgeDock() });\n                }\n            }\n            this.isDraggingOverWindow = overWindow;\n        }\n    }\n    clearDragMain() {\n        // console.log(\"clear drag main\");\n        LayoutInternal.dragState = undefined;\n        if (this.windowId === _model_Model__WEBPACK_IMPORTED_MODULE_10__.Model.MAIN_WINDOW_ID) {\n            this.isDraggingOverWindow = false;\n        }\n        for (const [, layoutWindow] of this.props.model.getwindowsMap()) {\n            // console.log(layoutWindow);\n            layoutWindow.layout.clearDragLocal();\n        }\n    }\n    clearDragLocal() {\n        // console.log(\"clear drag local\", this.windowId);\n        this.setState({ showEdges: false });\n        this.showOverlay(false);\n        this.dragEnterCount = 0;\n        this.dragging = false;\n        if (this.outlineDiv) {\n            this.selfRef.current.removeChild(this.outlineDiv);\n            this.outlineDiv = undefined;\n        }\n    }\n}\nLayoutInternal.dragState = undefined;\nconst FlexLayoutVersion = \"0.8.9\";\nconst defaultIcons = {\n    close: react__WEBPACK_IMPORTED_MODULE_0__.createElement(_Icons__WEBPACK_IMPORTED_MODULE_18__.CloseIcon, null),\n    closeTabset: react__WEBPACK_IMPORTED_MODULE_0__.createElement(_Icons__WEBPACK_IMPORTED_MODULE_18__.CloseIcon, null),\n    popout: react__WEBPACK_IMPORTED_MODULE_0__.createElement(_Icons__WEBPACK_IMPORTED_MODULE_18__.PopoutIcon, null),\n    maximize: react__WEBPACK_IMPORTED_MODULE_0__.createElement(_Icons__WEBPACK_IMPORTED_MODULE_18__.MaximizeIcon, null),\n    restore: react__WEBPACK_IMPORTED_MODULE_0__.createElement(_Icons__WEBPACK_IMPORTED_MODULE_18__.RestoreIcon, null),\n    more: react__WEBPACK_IMPORTED_MODULE_0__.createElement(_Icons__WEBPACK_IMPORTED_MODULE_18__.OverflowIcon, null),\n    edgeArrow: react__WEBPACK_IMPORTED_MODULE_0__.createElement(_Icons__WEBPACK_IMPORTED_MODULE_18__.EdgeIcon, null),\n    activeTabset: react__WEBPACK_IMPORTED_MODULE_0__.createElement(_Icons__WEBPACK_IMPORTED_MODULE_18__.AsterickIcon, null)\n};\nvar DragSource;\n(function (DragSource) {\n    DragSource[\"Internal\"] = \"internal\";\n    DragSource[\"External\"] = \"external\";\n    DragSource[\"Add\"] = \"add\";\n})(DragSource || (DragSource = {}));\n/** @internal */\nconst defaultSupportsPopout = (0,_Utils__WEBPACK_IMPORTED_MODULE_22__.isDesktop)();\n/** @internal */\nconst edgeRectLength = 100;\n/** @internal */\nconst edgeRectWidth = 10;\n// global layout drag state\nclass DragState {\n    constructor(mainLayout, dragSource, dragNode, dragJson, fnNewNodeDropped) {\n        this.mainLayout = mainLayout;\n        this.dragSource = dragSource;\n        this.dragNode = dragNode;\n        this.dragJson = dragJson;\n        this.fnNewNodeDropped = fnNewNodeDropped;\n    }\n}\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 */   FlexLayoutVersion: () => (/* binding */ FlexLayoutVersion),\n/* harmony export */   Layout: () => (/* binding */ Layout),\n/* harmony export */   LayoutInternal: () => (/* binding */ LayoutInternal)\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 react_dom_client__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! react-dom/client */ \"./node_modules/.pnpm/react-dom@19.0.0_react@19.0.0/node_modules/react-dom/client.js\");\n/* harmony import */ var _DockLocation__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! ../DockLocation */ \"./src/DockLocation.ts\");\n/* harmony import */ var _I18nLabel__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(/*! ../I18nLabel */ \"./src/I18nLabel.ts\");\n/* harmony import */ var _Orientation__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__(/*! ../Orientation */ \"./src/Orientation.ts\");\n/* harmony import */ var _Rect__WEBPACK_IMPORTED_MODULE_6__ = __webpack_require__(/*! ../Rect */ \"./src/Rect.ts\");\n/* harmony import */ var _Types__WEBPACK_IMPORTED_MODULE_7__ = __webpack_require__(/*! ../Types */ \"./src/Types.ts\");\n/* harmony import */ var _model_Actions__WEBPACK_IMPORTED_MODULE_8__ = __webpack_require__(/*! ../model/Actions */ \"./src/model/Actions.ts\");\n/* harmony import */ var _model_BorderNode__WEBPACK_IMPORTED_MODULE_9__ = __webpack_require__(/*! ../model/BorderNode */ \"./src/model/BorderNode.ts\");\n/* harmony import */ var _model_Model__WEBPACK_IMPORTED_MODULE_10__ = __webpack_require__(/*! ../model/Model */ \"./src/model/Model.ts\");\n/* harmony import */ var _model_TabNode__WEBPACK_IMPORTED_MODULE_11__ = __webpack_require__(/*! ../model/TabNode */ \"./src/model/TabNode.ts\");\n/* harmony import */ var _model_TabSetNode__WEBPACK_IMPORTED_MODULE_12__ = __webpack_require__(/*! ../model/TabSetNode */ \"./src/model/TabSetNode.ts\");\n/* harmony import */ var _BorderTab__WEBPACK_IMPORTED_MODULE_13__ = __webpack_require__(/*! ./BorderTab */ \"./src/view/BorderTab.tsx\");\n/* harmony import */ var _BorderTabSet__WEBPACK_IMPORTED_MODULE_14__ = __webpack_require__(/*! ./BorderTabSet */ \"./src/view/BorderTabSet.tsx\");\n/* harmony import */ var _DragContainer__WEBPACK_IMPORTED_MODULE_15__ = __webpack_require__(/*! ./DragContainer */ \"./src/view/DragContainer.tsx\");\n/* harmony import */ var _ErrorBoundary__WEBPACK_IMPORTED_MODULE_16__ = __webpack_require__(/*! ./ErrorBoundary */ \"./src/view/ErrorBoundary.tsx\");\n/* harmony import */ var _PopoutWindow__WEBPACK_IMPORTED_MODULE_17__ = __webpack_require__(/*! ./PopoutWindow */ \"./src/view/PopoutWindow.tsx\");\n/* harmony import */ var _Icons__WEBPACK_IMPORTED_MODULE_18__ = __webpack_require__(/*! ./Icons */ \"./src/view/Icons.tsx\");\n/* harmony import */ var _Overlay__WEBPACK_IMPORTED_MODULE_19__ = __webpack_require__(/*! ./Overlay */ \"./src/view/Overlay.tsx\");\n/* harmony import */ var _Row__WEBPACK_IMPORTED_MODULE_20__ = __webpack_require__(/*! ./Row */ \"./src/view/Row.tsx\");\n/* harmony import */ var _Tab__WEBPACK_IMPORTED_MODULE_21__ = __webpack_require__(/*! ./Tab */ \"./src/view/Tab.tsx\");\n/* harmony import */ var _Utils__WEBPACK_IMPORTED_MODULE_22__ = __webpack_require__(/*! ./Utils */ \"./src/view/Utils.tsx\");\n/* harmony import */ var _TabButtonStamp__WEBPACK_IMPORTED_MODULE_23__ = __webpack_require__(/*! ./TabButtonStamp */ \"./src/view/TabButtonStamp.tsx\");\n/* harmony import */ var _SizeTracker__WEBPACK_IMPORTED_MODULE_24__ = __webpack_require__(/*! ./SizeTracker */ \"./src/view/SizeTracker.tsx\");\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n/**\n * A React component that hosts a multi-tabbed layout\n */\nclass Layout extends react__WEBPACK_IMPORTED_MODULE_0__.Component {\n    /** @internal */\n    constructor(props) {\n        super(props);\n        this.selfRef = react__WEBPACK_IMPORTED_MODULE_0__.createRef();\n        this.revision = 0;\n    }\n    /** re-render the layout */\n    redraw() {\n        this.selfRef.current.redraw(\"parent \" + this.revision);\n    }\n    /**\n     * Adds a new tab to the given tabset\n     * @param tabsetId the id of the tabset where the new tab will be added\n     * @param json the json for the new tab node\n     * @returns the added tab node or undefined\n     */\n    addTabToTabSet(tabsetId, json) {\n        return this.selfRef.current.addTabToTabSet(tabsetId, json);\n    }\n    /**\n     * Adds a new tab by dragging an item to the drop location, must be called from within an HTML\n     * drag start handler. You can use the setDragComponent() method to set the drag image before calling this\n     * method.\n     * @param event the drag start event\n     * @param json the json for the new tab node\n     * @param onDrop a callback to call when the drag is complete\n     */\n    addTabWithDragAndDrop(event, json, onDrop) {\n        this.selfRef.current.addTabWithDragAndDrop(event, json, onDrop);\n    }\n    /**\n     * Move a tab/tabset using drag and drop, must be called from within an HTML\n     * drag start handler\n     * @param event the drag start event\n     * @param node the tab or tabset to drag\n     */\n    moveTabWithDragAndDrop(event, node) {\n        this.selfRef.current.moveTabWithDragAndDrop(event, node);\n    }\n    /**\n     * Adds a new tab to the active tabset (if there is one)\n     * @param json the json for the new tab node\n     * @returns the added tab node or undefined\n     */\n    addTabToActiveTabSet(json) {\n        return this.selfRef.current.addTabToActiveTabSet(json);\n    }\n    /**\n     * Sets the drag image from a react component for a drag event\n     * @param event the drag event\n     * @param component the react component to be used for the drag image\n     * @param x the x position of the drag cursor on the image\n     * @param y the x position of the drag cursor on the image\n     */\n    setDragComponent(event, component, x, y) {\n        this.selfRef.current.setDragComponent(event, component, x, y);\n    }\n    /** Get the root div element of the layout */\n    getRootDiv() {\n        return this.selfRef.current.getRootDiv();\n    }\n    /** @internal */\n    render() {\n        return (react__WEBPACK_IMPORTED_MODULE_0__.createElement(LayoutInternal, Object.assign({ ref: this.selfRef }, this.props, { renderRevision: this.revision++ })));\n    }\n}\n/** @internal */\nclass LayoutInternal extends react__WEBPACK_IMPORTED_MODULE_0__.Component {\n    // private renderCount: any;\n    constructor(props) {\n        super(props);\n        this.moveableElementMap = new Map();\n        this.dragEnterCount = 0;\n        this.dragging = false;\n        this.updateLayoutMetrics = () => {\n            if (this.findBorderBarSizeRef.current) {\n                const borderBarSize = this.findBorderBarSizeRef.current.getBoundingClientRect().height;\n                if (borderBarSize !== this.state.calculatedBorderBarSize) {\n                    this.setState({ calculatedBorderBarSize: borderBarSize });\n                }\n            }\n        };\n        this.onModelChange = (action) => {\n            this.redrawInternal(\"model change\");\n            if (this.props.onModelChange) {\n                this.props.onModelChange(this.props.model, action);\n            }\n        };\n        this.updateRect = () => {\n            const rect = this.getDomRect();\n            if (!rect.equals(this.state.rect) && rect.width !== 0 && rect.height !== 0) {\n                // console.log(\"updateRect\", rect.floor());\n                this.setState({ rect });\n                if (this.windowId !== _model_Model__WEBPACK_IMPORTED_MODULE_10__.Model.MAIN_WINDOW_ID) {\n                    this.redrawInternal(\"rect updated\");\n                }\n            }\n        };\n        this.getClassName = (defaultClassName) => {\n            if (this.props.classNameMapper === undefined) {\n                return defaultClassName;\n            }\n            else {\n                return this.props.classNameMapper(defaultClassName);\n            }\n        };\n        this.onCloseWindow = (windowLayout) => {\n            this.doAction(_model_Actions__WEBPACK_IMPORTED_MODULE_8__.Actions.closeWindow(windowLayout.windowId));\n        };\n        this.onSetWindow = (windowLayout, window) => {\n        };\n        this.showControlInPortal = (control, element) => {\n            const portal = (0,react_dom__WEBPACK_IMPORTED_MODULE_1__.createPortal)(control, element);\n            this.setState({ portal });\n        };\n        this.hideControlInPortal = () => {\n            this.setState({ portal: undefined });\n        };\n        this.getIcons = () => {\n            return this.icons;\n        };\n        this.setDragNode = (event, node) => {\n            LayoutInternal.dragState = new DragState(this.mainLayout, DragSource.Internal, node, undefined, undefined);\n            // Note: can only set (very) limited types on android! so cannot set json\n            // Note: must set text/plain for android to allow drag, \n            //  so just set a simple message indicating its a flexlayout drag (this is not used anywhere else)\n            event.dataTransfer.setData('text/plain', \"--flexlayout--\");\n            event.dataTransfer.effectAllowed = \"copyMove\";\n            event.dataTransfer.dropEffect = \"move\";\n            this.dragEnterCount = 0;\n            if (node instanceof _model_TabSetNode__WEBPACK_IMPORTED_MODULE_12__.TabSetNode) {\n                let rendered = false;\n                let content = this.i18nName(_I18nLabel__WEBPACK_IMPORTED_MODULE_4__.I18nLabel.Move_Tabset);\n                if (node.getChildren().length > 0) {\n                    content = this.i18nName(_I18nLabel__WEBPACK_IMPORTED_MODULE_4__.I18nLabel.Move_Tabs).replace(\"?\", String(node.getChildren().length));\n                }\n                if (this.props.onRenderDragRect) {\n                    const dragComponent = this.props.onRenderDragRect(content, node, undefined);\n                    if (dragComponent) {\n                        this.setDragComponent(event, dragComponent, 10, 10);\n                        rendered = true;\n                    }\n                }\n                if (!rendered) {\n                    this.setDragComponent(event, content, 10, 10);\n                }\n            }\n            else {\n                const element = event.target;\n                const rect = element.getBoundingClientRect();\n                const offsetX = event.clientX - rect.left;\n                const offsetY = event.clientY - rect.top;\n                const parentNode = node === null || node === void 0 ? void 0 : node.getParent();\n                const isInVerticalBorder = parentNode instanceof _model_BorderNode__WEBPACK_IMPORTED_MODULE_9__.BorderNode && parentNode.getOrientation() === _Orientation__WEBPACK_IMPORTED_MODULE_5__.Orientation.HORZ;\n                const x = isInVerticalBorder ? 10 : offsetX;\n                const y = isInVerticalBorder ? 10 : offsetY;\n                let rendered = false;\n                if (this.props.onRenderDragRect) {\n                    const content = react__WEBPACK_IMPORTED_MODULE_0__.createElement(_TabButtonStamp__WEBPACK_IMPORTED_MODULE_23__.TabButtonStamp, { key: node.getId(), layout: this, node: node });\n                    const dragComponent = this.props.onRenderDragRect(content, node, undefined);\n                    if (dragComponent) {\n                        this.setDragComponent(event, dragComponent, x, y);\n                        rendered = true;\n                    }\n                }\n                if (!rendered) {\n                    if ((0,_Utils__WEBPACK_IMPORTED_MODULE_22__.isSafari)()) { // safari doesnt render the offscreen tabstamps\n                        this.setDragComponent(event, react__WEBPACK_IMPORTED_MODULE_0__.createElement(_TabButtonStamp__WEBPACK_IMPORTED_MODULE_23__.TabButtonStamp, { node: node, layout: this }), x, y);\n                    }\n                    else {\n                        event.dataTransfer.setDragImage(node.getTabStamp(), x, y);\n                    }\n                }\n            }\n        };\n        this.onDragEnterRaw = (event) => {\n            this.dragEnterCount++;\n            if (this.dragEnterCount === 1) {\n                this.onDragEnter(event);\n            }\n        };\n        this.onDragLeaveRaw = (event) => {\n            this.dragEnterCount--;\n            if (this.dragEnterCount === 0) {\n                this.onDragLeave(event);\n            }\n        };\n        this.onDragEnter = (event) => {\n            // console.log(\"onDragEnter\", this.windowId, this.dragEnterCount);\n            var _a;\n            if (!LayoutInternal.dragState && this.props.onExternalDrag) { // not internal dragging\n                const externalDrag = this.props.onExternalDrag(event);\n                if (externalDrag) {\n                    const tempNode = _model_TabNode__WEBPACK_IMPORTED_MODULE_11__.TabNode.fromJson(externalDrag.json, this.props.model, false);\n                    LayoutInternal.dragState = new DragState(this.mainLayout, DragSource.External, tempNode, externalDrag.json, externalDrag.onDrop);\n                }\n            }\n            if (LayoutInternal.dragState) {\n                if (this.windowId !== _model_Model__WEBPACK_IMPORTED_MODULE_10__.Model.MAIN_WINDOW_ID && LayoutInternal.dragState.mainLayout === this.mainLayout) {\n                    LayoutInternal.dragState.mainLayout.setDraggingOverWindow(true);\n                }\n                if (LayoutInternal.dragState.mainLayout !== this.mainLayout) {\n                    return; // drag not by this layout or its popouts\n                }\n                event.preventDefault();\n                this.dropInfo = undefined;\n                const rootdiv = this.selfRef.current;\n                this.outlineDiv = this.currentDocument.createElement(\"div\");\n                this.outlineDiv.className = this.getClassName(_Types__WEBPACK_IMPORTED_MODULE_7__.CLASSES.FLEXLAYOUT__OUTLINE_RECT);\n                this.outlineDiv.style.visibility = \"hidden\";\n                const speed = this.props.model.getAttribute(\"tabDragSpeed\");\n                this.outlineDiv.style.transition = `top ${speed}s, left ${speed}s, width ${speed}s, height ${speed}s`;\n                rootdiv.appendChild(this.outlineDiv);\n                this.dragging = true;\n                this.showOverlay(true);\n                // add edge indicators\n                if (!this.isDraggingOverWindow && this.props.model.getMaximizedTabset(this.windowId) === undefined) {\n                    this.setState({ showEdges: this.props.model.isEnableEdgeDock() });\n                }\n                const clientRect = (_a = this.selfRef.current) === null || _a === void 0 ? void 0 : _a.getBoundingClientRect();\n                const r = new _Rect__WEBPACK_IMPORTED_MODULE_6__.Rect(event.clientX - (clientRect.left), event.clientY - (clientRect.top), 1, 1);\n                r.positionElement(this.outlineDiv);\n            }\n        };\n        this.onDragOver = (event) => {\n            var _a, _b, _c;\n            if (this.dragging && !this.isDraggingOverWindow) {\n                // console.log(\"onDragOver\");\n                event.preventDefault();\n                const clientRect = (_a = this.selfRef.current) === null || _a === void 0 ? void 0 : _a.getBoundingClientRect();\n                const pos = {\n                    x: event.clientX - ((_b = clientRect === null || clientRect === void 0 ? void 0 : clientRect.left) !== null && _b !== void 0 ? _b : 0),\n                    y: event.clientY - ((_c = clientRect === null || clientRect === void 0 ? void 0 : clientRect.top) !== null && _c !== void 0 ? _c : 0),\n                };\n                this.checkForBorderToShow(pos.x, pos.y);\n                let dropInfo = this.props.model.findDropTargetNode(this.windowId, LayoutInternal.dragState.dragNode, pos.x, pos.y);\n                if (dropInfo) {\n                    this.dropInfo = dropInfo;\n                    if (this.outlineDiv) {\n                        this.outlineDiv.className = this.getClassName(dropInfo.className);\n                        dropInfo.rect.positionElement(this.outlineDiv);\n                        this.outlineDiv.style.visibility = \"visible\";\n                    }\n                }\n            }\n        };\n        this.onDragLeave = (event) => {\n            // console.log(\"onDragLeave\", this.windowId, this.dragging);\n            if (this.dragging) {\n                if (this.windowId !== _model_Model__WEBPACK_IMPORTED_MODULE_10__.Model.MAIN_WINDOW_ID) {\n                    LayoutInternal.dragState.mainLayout.setDraggingOverWindow(false);\n                }\n                this.clearDragLocal();\n            }\n        };\n        this.onDrop = (event) => {\n            // console.log(\"ondrop\", this.windowId, this.dragging, Layout.dragState);\n            if (this.dragging) {\n                event.preventDefault();\n                const dragState = LayoutInternal.dragState;\n                if (this.dropInfo) {\n                    if (dragState.dragJson !== undefined) {\n                        const newNode = this.doAction(_model_Actions__WEBPACK_IMPORTED_MODULE_8__.Actions.addNode(dragState.dragJson, this.dropInfo.node.getId(), this.dropInfo.location, this.dropInfo.index));\n                        if (dragState.fnNewNodeDropped !== undefined) {\n                            dragState.fnNewNodeDropped(newNode, event);\n                        }\n                    }\n                    else if (dragState.dragNode !== undefined) {\n                        this.doAction(_model_Actions__WEBPACK_IMPORTED_MODULE_8__.Actions.moveNode(dragState.dragNode.getId(), this.dropInfo.node.getId(), this.dropInfo.location, this.dropInfo.index));\n                    }\n                }\n                this.mainLayout.clearDragMain();\n            }\n            this.dragEnterCount = 0; // must set to zero here ref sublayouts\n        };\n        this.orderedTabIds = [];\n        this.orderedTabMoveableIds = [];\n        this.selfRef = react__WEBPACK_IMPORTED_MODULE_0__.createRef();\n        this.moveablesRef = react__WEBPACK_IMPORTED_MODULE_0__.createRef();\n        this.mainRef = react__WEBPACK_IMPORTED_MODULE_0__.createRef();\n        this.findBorderBarSizeRef = react__WEBPACK_IMPORTED_MODULE_0__.createRef();\n        this.supportsPopout = props.supportsPopout !== undefined ? props.supportsPopout : defaultSupportsPopout;\n        this.popoutURL = props.popoutURL ? props.popoutURL : \"popout.html\";\n        this.icons = Object.assign(Object.assign({}, defaultIcons), props.icons);\n        this.windowId = props.windowId ? props.windowId : _model_Model__WEBPACK_IMPORTED_MODULE_10__.Model.MAIN_WINDOW_ID;\n        this.mainLayout = this.props.mainLayout ? this.props.mainLayout : this;\n        this.isDraggingOverWindow = false;\n        this.layoutWindow = this.props.model.getwindowsMap().get(this.windowId);\n        this.layoutWindow.layout = this;\n        this.popoutWindowName = this.props.popoutWindowName || \"Popout Window\";\n        // this.renderCount = 0;\n        this.state = {\n            rect: _Rect__WEBPACK_IMPORTED_MODULE_6__.Rect.empty(),\n            editingTab: undefined,\n            showEdges: false,\n            showOverlay: false,\n            calculatedBorderBarSize: 29,\n            layoutRevision: 0,\n            forceRevision: 0,\n            showHiddenBorder: _DockLocation__WEBPACK_IMPORTED_MODULE_3__.DockLocation.CENTER\n        };\n        this.isMainWindow = this.windowId === _model_Model__WEBPACK_IMPORTED_MODULE_10__.Model.MAIN_WINDOW_ID;\n    }\n    componentDidMount() {\n        this.updateRect();\n        this.currentDocument = this.selfRef.current.ownerDocument;\n        this.currentWindow = this.currentDocument.defaultView;\n        this.layoutWindow.window = this.currentWindow;\n        this.layoutWindow.toScreenRectFunction = (r) => this.getScreenRect(r);\n        this.resizeObserver = new ResizeObserver(entries => {\n            requestAnimationFrame(() => {\n                this.updateRect();\n            });\n        });\n        if (this.selfRef.current) {\n            this.resizeObserver.observe(this.selfRef.current);\n        }\n        if (this.isMainWindow) {\n            this.props.model.addChangeListener(this.onModelChange);\n            this.updateLayoutMetrics();\n        }\n        else {\n            // since resizeObserver doesn't always work as expected when observing element in another document\n            this.currentWindow.addEventListener(\"resize\", () => {\n                this.updateRect();\n            });\n            const sourceElement = this.props.mainLayout.getRootDiv();\n            const targetElement = this.selfRef.current;\n            (0,_Utils__WEBPACK_IMPORTED_MODULE_22__.copyInlineStyles)(sourceElement, targetElement);\n            this.styleObserver = new MutationObserver(() => {\n                const changed = (0,_Utils__WEBPACK_IMPORTED_MODULE_22__.copyInlineStyles)(sourceElement, targetElement);\n                if (changed) {\n                    this.redraw(\"mutation observer\");\n                }\n            });\n            // Observe changes to the source element's style attribute\n            this.styleObserver.observe(sourceElement, { attributeFilter: ['style'] });\n        }\n        // allow tabs to overlay when hidden\n        document.addEventListener('visibilitychange', () => {\n            for (const [_, layoutWindow] of this.props.model.getwindowsMap()) {\n                const layout = layoutWindow.layout;\n                if (layout) {\n                    this.redraw(\"visibility change\");\n                }\n            }\n        });\n    }\n    componentDidUpdate() {\n        this.currentDocument = this.selfRef.current.ownerDocument;\n        this.currentWindow = this.currentDocument.defaultView;\n        if (this.isMainWindow) {\n            if (this.props.model !== this.previousModel) {\n                if (this.previousModel !== undefined) {\n                    this.previousModel.removeChangeListener(this.onModelChange); // stop listening to old model\n                }\n                this.props.model.getwindowsMap().get(this.windowId).layout = this;\n                this.props.model.addChangeListener(this.onModelChange);\n                this.layoutWindow = this.props.model.getwindowsMap().get(this.windowId);\n                this.layoutWindow.layout = this;\n                this.layoutWindow.toScreenRectFunction = (r) => this.getScreenRect(r);\n                this.previousModel = this.props.model;\n                this.tidyMoveablesMap();\n            }\n            this.updateLayoutMetrics();\n        }\n    }\n    componentWillUnmount() {\n        var _a, _b;\n        if (this.selfRef.current) {\n            (_a = this.resizeObserver) === null || _a === void 0 ? void 0 : _a.unobserve(this.selfRef.current);\n        }\n        (_b = this.styleObserver) === null || _b === void 0 ? void 0 : _b.disconnect();\n    }\n    render() {\n        // console.log(\"render\", this.windowId, this.state.revision, this.renderCount++);\n        // first render will be used to find the size (via selfRef)\n        if (!this.selfRef.current) {\n            return (react__WEBPACK_IMPORTED_MODULE_0__.createElement(\"div\", { ref: this.selfRef, className: this.getClassName(_Types__WEBPACK_IMPORTED_MODULE_7__.CLASSES.FLEXLAYOUT__LAYOUT) },\n                react__WEBPACK_IMPORTED_MODULE_0__.createElement(\"div\", { ref: this.moveablesRef, key: \"__moveables__\", className: this.getClassName(_Types__WEBPACK_IMPORTED_MODULE_7__.CLASSES.FLEXLAYOUT__LAYOUT_MOVEABLES) }),\n                this.renderMetricsElements()));\n        }\n        const model = this.props.model;\n        model.getRoot(this.windowId).calcMinMaxSize();\n        model.getRoot(this.windowId).setPaths(\"\");\n        model.getBorderSet().setPaths();\n        const inner = this.renderLayout();\n        const outer = this.renderBorders(inner);\n        const tabs = this.renderTabs();\n        const reorderedTabs = this.reorderComponents(tabs, this.orderedTabIds);\n        let floatingWindows = null;\n        let reorderedTabMoveables = null;\n        let tabStamps = null;\n        let metricElements = null;\n        if (this.isMainWindow) {\n            floatingWindows = this.renderWindows();\n            metricElements = this.renderMetricsElements();\n            const tabMoveables = this.renderTabMoveables();\n            reorderedTabMoveables = this.reorderComponents(tabMoveables, this.orderedTabMoveableIds);\n            tabStamps = react__WEBPACK_IMPORTED_MODULE_0__.createElement(\"div\", { key: \"__tabStamps__\", className: this.getClassName(_Types__WEBPACK_IMPORTED_MODULE_7__.CLASSES.FLEXLAYOUT__LAYOUT_TAB_STAMPS) }, this.renderTabStamps());\n        }\n        return (react__WEBPACK_IMPORTED_MODULE_0__.createElement(\"div\", { ref: this.selfRef, className: this.getClassName(_Types__WEBPACK_IMPORTED_MODULE_7__.CLASSES.FLEXLAYOUT__LAYOUT), onDragEnter: this.onDragEnterRaw, onDragLeave: this.onDragLeaveRaw, onDragOver: this.onDragOver, onDrop: this.onDrop },\n            react__WEBPACK_IMPORTED_MODULE_0__.createElement(\"div\", { ref: this.moveablesRef, key: \"__moveables__\", className: this.getClassName(_Types__WEBPACK_IMPORTED_MODULE_7__.CLASSES.FLEXLAYOUT__LAYOUT_MOVEABLES) }),\n            metricElements,\n            react__WEBPACK_IMPORTED_MODULE_0__.createElement(_Overlay__WEBPACK_IMPORTED_MODULE_19__.Overlay, { key: \"__overlay__\", layout: this, show: this.state.showOverlay }),\n            outer,\n            reorderedTabs,\n            reorderedTabMoveables,\n            tabStamps,\n            this.state.portal,\n            floatingWindows));\n    }\n    renderBorders(inner) {\n        const classMain = this.getClassName(_Types__WEBPACK_IMPORTED_MODULE_7__.CLASSES.FLEXLAYOUT__LAYOUT_MAIN);\n        const borders = this.props.model.getBorderSet().getBorderMap();\n        if (this.isMainWindow && borders.size > 0) {\n            inner = (react__WEBPACK_IMPORTED_MODULE_0__.createElement(\"div\", { className: classMain, ref: this.mainRef }, inner));\n            const borderSetComponents = new Map();\n            const borderSetContentComponents = new Map();\n            for (const [_, location] of _DockLocation__WEBPACK_IMPORTED_MODULE_3__.DockLocation.values) {\n                const border = borders.get(location);\n                const showBorder = border && border.isShowing() && (!border.isAutoHide() ||\n                    (border.isAutoHide() && (border.getChildren().length > 0 || this.state.showHiddenBorder === location)));\n                if (showBorder) {\n                    borderSetComponents.set(location, react__WEBPACK_IMPORTED_MODULE_0__.createElement(_BorderTabSet__WEBPACK_IMPORTED_MODULE_14__.BorderTabSet, { layout: this, border: border, size: this.state.calculatedBorderBarSize }));\n                    borderSetContentComponents.set(location, react__WEBPACK_IMPORTED_MODULE_0__.createElement(_BorderTab__WEBPACK_IMPORTED_MODULE_13__.BorderTab, { layout: this, border: border, show: border.getSelected() !== -1 }));\n                }\n            }\n            const classBorderOuter = this.getClassName(_Types__WEBPACK_IMPORTED_MODULE_7__.CLASSES.FLEXLAYOUT__LAYOUT_BORDER_CONTAINER);\n            const classBorderInner = this.getClassName(_Types__WEBPACK_IMPORTED_MODULE_7__.CLASSES.FLEXLAYOUT__LAYOUT_BORDER_CONTAINER_INNER);\n            if (this.props.model.getBorderSet().getLayoutHorizontal()) {\n                const innerWithBorderTabs = (react__WEBPACK_IMPORTED_MODULE_0__.createElement(\"div\", { className: classBorderInner, style: { flexDirection: \"column\" } },\n                    borderSetContentComponents.get(_DockLocation__WEBPACK_IMPORTED_MODULE_3__.DockLocation.TOP),\n                    react__WEBPACK_IMPORTED_MODULE_0__.createElement(\"div\", { className: classBorderInner, style: { flexDirection: \"row\" } },\n                        borderSetContentComponents.get(_DockLocation__WEBPACK_IMPORTED_MODULE_3__.DockLocation.LEFT),\n                        inner,\n                        borderSetContentComponents.get(_DockLocation__WEBPACK_IMPORTED_MODULE_3__.DockLocation.RIGHT)),\n                    borderSetContentComponents.get(_DockLocation__WEBPACK_IMPORTED_MODULE_3__.DockLocation.BOTTOM)));\n                return (react__WEBPACK_IMPORTED_MODULE_0__.createElement(\"div\", { className: classBorderOuter, style: { flexDirection: \"column\" } },\n                    borderSetComponents.get(_DockLocation__WEBPACK_IMPORTED_MODULE_3__.DockLocation.TOP),\n                    react__WEBPACK_IMPORTED_MODULE_0__.createElement(\"div\", { className: classBorderInner, style: { flexDirection: \"row\" } },\n                        borderSetComponents.get(_DockLocation__WEBPACK_IMPORTED_MODULE_3__.DockLocation.LEFT),\n                        innerWithBorderTabs,\n                        borderSetComponents.get(_DockLocation__WEBPACK_IMPORTED_MODULE_3__.DockLocation.RIGHT)),\n                    borderSetComponents.get(_DockLocation__WEBPACK_IMPORTED_MODULE_3__.DockLocation.BOTTOM)));\n            }\n            else {\n                const innerWithBorderTabs = (react__WEBPACK_IMPORTED_MODULE_0__.createElement(\"div\", { className: classBorderInner, style: { flexDirection: \"row\" } },\n                    borderSetContentComponents.get(_DockLocation__WEBPACK_IMPORTED_MODULE_3__.DockLocation.LEFT),\n                    react__WEBPACK_IMPORTED_MODULE_0__.createElement(\"div\", { className: classBorderInner, style: { flexDirection: \"column\" } },\n                        borderSetContentComponents.get(_DockLocation__WEBPACK_IMPORTED_MODULE_3__.DockLocation.TOP),\n                        inner,\n                        borderSetContentComponents.get(_DockLocation__WEBPACK_IMPORTED_MODULE_3__.DockLocation.BOTTOM)),\n                    borderSetContentComponents.get(_DockLocation__WEBPACK_IMPORTED_MODULE_3__.DockLocation.RIGHT)));\n                return (react__WEBPACK_IMPORTED_MODULE_0__.createElement(\"div\", { className: classBorderOuter, style: { flexDirection: \"row\" } },\n                    borderSetComponents.get(_DockLocation__WEBPACK_IMPORTED_MODULE_3__.DockLocation.LEFT),\n                    react__WEBPACK_IMPORTED_MODULE_0__.createElement(\"div\", { className: classBorderInner, style: { flexDirection: \"column\" } },\n                        borderSetComponents.get(_DockLocation__WEBPACK_IMPORTED_MODULE_3__.DockLocation.TOP),\n                        innerWithBorderTabs,\n                        borderSetComponents.get(_DockLocation__WEBPACK_IMPORTED_MODULE_3__.DockLocation.BOTTOM)),\n                    borderSetComponents.get(_DockLocation__WEBPACK_IMPORTED_MODULE_3__.DockLocation.RIGHT)));\n            }\n        }\n        else { // no borders\n            return (react__WEBPACK_IMPORTED_MODULE_0__.createElement(\"div\", { className: classMain, ref: this.mainRef, style: { position: \"absolute\", top: 0, left: 0, bottom: 0, right: 0, display: \"flex\" } }, inner));\n        }\n    }\n    renderLayout() {\n        return (react__WEBPACK_IMPORTED_MODULE_0__.createElement(react__WEBPACK_IMPORTED_MODULE_0__.Fragment, null,\n            react__WEBPACK_IMPORTED_MODULE_0__.createElement(_Row__WEBPACK_IMPORTED_MODULE_20__.Row, { key: \"__row__\", layout: this, node: this.props.model.getRoot(this.windowId) }),\n            this.renderEdgeIndicators()));\n    }\n    renderEdgeIndicators() {\n        const edges = [];\n        const arrowIcon = this.icons.edgeArrow;\n        if (this.state.showEdges) {\n            const r = this.props.model.getRoot(this.windowId).getRect();\n            const length = edgeRectLength;\n            const width = edgeRectWidth;\n            const offset = edgeRectLength / 2;\n            const className = this.getClassName(_Types__WEBPACK_IMPORTED_MODULE_7__.CLASSES.FLEXLAYOUT__EDGE_RECT);\n            const radius = 50;\n            edges.push(react__WEBPACK_IMPORTED_MODULE_0__.createElement(\"div\", { key: \"North\", style: { top: 0, left: r.width / 2 - offset, width: length, height: width, borderBottomLeftRadius: radius, borderBottomRightRadius: radius }, className: className + \" \" + this.getClassName(_Types__WEBPACK_IMPORTED_MODULE_7__.CLASSES.FLEXLAYOUT__EDGE_RECT_TOP) },\n                react__WEBPACK_IMPORTED_MODULE_0__.createElement(\"div\", { style: { transform: \"rotate(180deg)\" } }, arrowIcon)));\n            edges.push(react__WEBPACK_IMPORTED_MODULE_0__.createElement(\"div\", { key: \"West\", style: { top: r.height / 2 - offset, left: 0, width: width, height: length, borderTopRightRadius: radius, borderBottomRightRadius: radius }, className: className + \" \" + this.getClassName(_Types__WEBPACK_IMPORTED_MODULE_7__.CLASSES.FLEXLAYOUT__EDGE_RECT_LEFT) },\n                react__WEBPACK_IMPORTED_MODULE_0__.createElement(\"div\", { style: { transform: \"rotate(90deg)\" } }, arrowIcon)));\n            edges.push(react__WEBPACK_IMPORTED_MODULE_0__.createElement(\"div\", { key: \"South\", style: { top: r.height - width, left: r.width / 2 - offset, width: length, height: width, borderTopLeftRadius: radius, borderTopRightRadius: radius }, className: className + \" \" + this.getClassName(_Types__WEBPACK_IMPORTED_MODULE_7__.CLASSES.FLEXLAYOUT__EDGE_RECT_BOTTOM) },\n                react__WEBPACK_IMPORTED_MODULE_0__.createElement(\"div\", null, arrowIcon)));\n            edges.push(react__WEBPACK_IMPORTED_MODULE_0__.createElement(\"div\", { key: \"East\", style: { top: r.height / 2 - offset, left: r.width - width, width: width, height: length, borderTopLeftRadius: radius, borderBottomLeftRadius: radius }, className: className + \" \" + this.getClassName(_Types__WEBPACK_IMPORTED_MODULE_7__.CLASSES.FLEXLAYOUT__EDGE_RECT_RIGHT) },\n                react__WEBPACK_IMPORTED_MODULE_0__.createElement(\"div\", { style: { transform: \"rotate(-90deg)\" } }, arrowIcon)));\n        }\n        return edges;\n    }\n    renderWindows() {\n        const floatingWindows = [];\n        if (this.supportsPopout) {\n            const windows = this.props.model.getwindowsMap();\n            let i = 1;\n            for (const [windowId, layoutWindow] of windows) {\n                if (windowId !== _model_Model__WEBPACK_IMPORTED_MODULE_10__.Model.MAIN_WINDOW_ID) {\n                    floatingWindows.push(react__WEBPACK_IMPORTED_MODULE_0__.createElement(_PopoutWindow__WEBPACK_IMPORTED_MODULE_17__.PopoutWindow, { key: windowId, layout: this, title: this.popoutWindowName + \" \" + i, layoutWindow: layoutWindow, url: this.popoutURL + \"?id=\" + windowId, onSetWindow: this.onSetWindow, onCloseWindow: this.onCloseWindow },\n                        react__WEBPACK_IMPORTED_MODULE_0__.createElement(\"div\", { className: this.props.popoutClassName },\n                            react__WEBPACK_IMPORTED_MODULE_0__.createElement(LayoutInternal, Object.assign({}, this.props, { windowId: windowId, mainLayout: this })))));\n                    i++;\n                }\n            }\n        }\n        return floatingWindows;\n    }\n    renderTabMoveables() {\n        // const tabMoveables: React.ReactNode[] = [];\n        const tabMoveables = new Map();\n        this.props.model.visitNodes((node) => {\n            if (node instanceof _model_TabNode__WEBPACK_IMPORTED_MODULE_11__.TabNode) {\n                const child = node;\n                const element = this.getMoveableElement(child.getId());\n                child.setMoveableElement(element);\n                const selected = child.isSelected();\n                const rect = child.getParent().getContentRect();\n                // only render first time if size >0\n                const renderTab = child.isRendered() ||\n                    ((selected || !child.isEnableRenderOnDemand()) && (rect.width > 0 && rect.height > 0));\n                if (renderTab) {\n                    //  console.log(\"rendertab\", child.getName(), this.props.renderRevision);\n                    const key = child.getId() + (child.isEnableWindowReMount() ? child.getWindowId() : \"\");\n                    tabMoveables.set(node.getId(), (0,react_dom__WEBPACK_IMPORTED_MODULE_1__.createPortal)(react__WEBPACK_IMPORTED_MODULE_0__.createElement(_SizeTracker__WEBPACK_IMPORTED_MODULE_24__.SizeTracker, { rect: rect, selected: child.isSelected(), forceRevision: this.state.forceRevision, tabsRevision: this.props.renderRevision, key: key },\n                        react__WEBPACK_IMPORTED_MODULE_0__.createElement(_ErrorBoundary__WEBPACK_IMPORTED_MODULE_16__.ErrorBoundary, { message: this.i18nName(_I18nLabel__WEBPACK_IMPORTED_MODULE_4__.I18nLabel.Error_rendering_component) }, this.props.factory(child))), element, key));\n                    child.setRendered(renderTab);\n                }\n            }\n        });\n        return tabMoveables;\n    }\n    renderTabStamps() {\n        const tabStamps = [];\n        this.props.model.visitNodes((node) => {\n            if (node instanceof _model_TabNode__WEBPACK_IMPORTED_MODULE_11__.TabNode) {\n                const child = node;\n                // what the tab should look like when dragged (since images need to have been loaded before drag image can be taken)\n                tabStamps.push(react__WEBPACK_IMPORTED_MODULE_0__.createElement(_DragContainer__WEBPACK_IMPORTED_MODULE_15__.DragContainer, { key: child.getId(), layout: this, node: child }));\n            }\n        });\n        return tabStamps;\n    }\n    renderTabs() {\n        const tabs = new Map();\n        this.props.model.visitWindowNodes(this.windowId, (node) => {\n            if (node instanceof _model_TabNode__WEBPACK_IMPORTED_MODULE_11__.TabNode) {\n                const child = node;\n                const selected = child.isSelected();\n                const path = child.getPath();\n                const renderTab = child.isRendered() || selected || !child.isEnableRenderOnDemand();\n                if (renderTab) {\n                    // const rect = (child.getParent() as BorderNode | TabSetNode).getContentRect();\n                    // const key = child.getId();\n                    tabs.set(child.getId(), (\n                    // <SizeTracker rect={rect} forceRevision={this.state.forceRevision} key={key}>\n                    react__WEBPACK_IMPORTED_MODULE_0__.createElement(_Tab__WEBPACK_IMPORTED_MODULE_21__.Tab, { key: child.getId(), layout: this, path: path, node: child, selected: selected })\n                    // </SizeTracker>\n                    ));\n                }\n            }\n        });\n        return tabs;\n    }\n    renderMetricsElements() {\n        return (react__WEBPACK_IMPORTED_MODULE_0__.createElement(\"div\", { key: \"findBorderBarSize\", ref: this.findBorderBarSizeRef, className: this.getClassName(_Types__WEBPACK_IMPORTED_MODULE_7__.CLASSES.FLEXLAYOUT__BORDER_SIZER) }, \"FindBorderBarSize\"));\n    }\n    checkForBorderToShow(x, y) {\n        const r = this.getBoundingClientRect(this.mainRef.current);\n        const c = r.getCenter();\n        const margin = edgeRectWidth;\n        const offset = edgeRectLength / 2;\n        let overEdge = false;\n        if (this.props.model.isEnableEdgeDock() && this.state.showHiddenBorder === _DockLocation__WEBPACK_IMPORTED_MODULE_3__.DockLocation.CENTER) {\n            if ((y > c.y - offset && y < c.y + offset) ||\n                (x > c.x - offset && x < c.x + offset)) {\n                overEdge = true;\n            }\n        }\n        let location = _DockLocation__WEBPACK_IMPORTED_MODULE_3__.DockLocation.CENTER;\n        if (!overEdge) {\n            if (x <= r.x + margin) {\n                location = _DockLocation__WEBPACK_IMPORTED_MODULE_3__.DockLocation.LEFT;\n            }\n            else if (x >= r.getRight() - margin) {\n                location = _DockLocation__WEBPACK_IMPORTED_MODULE_3__.DockLocation.RIGHT;\n            }\n            else if (y <= r.y + margin) {\n                location = _DockLocation__WEBPACK_IMPORTED_MODULE_3__.DockLocation.TOP;\n            }\n            else if (y >= r.getBottom() - margin) {\n                location = _DockLocation__WEBPACK_IMPORTED_MODULE_3__.DockLocation.BOTTOM;\n            }\n        }\n        if (location !== this.state.showHiddenBorder) {\n            this.setState({ showHiddenBorder: location });\n        }\n    }\n    tidyMoveablesMap() {\n        // console.log(\"tidyMoveablesMap\");\n        const tabs = new Map();\n        this.props.model.visitNodes((node, _) => {\n            if (node instanceof _model_TabNode__WEBPACK_IMPORTED_MODULE_11__.TabNode) {\n                tabs.set(node.getId(), node);\n            }\n        });\n        for (const [nodeId, element] of this.moveableElementMap) {\n            if (!tabs.has(nodeId)) {\n                // console.log(\"delete\", nodeId);\n                element.remove(); // remove from dom\n                this.moveableElementMap.delete(nodeId); // remove map entry \n            }\n        }\n    }\n    reorderComponents(components, ids) {\n        const nextIds = [];\n        const nextIdsSet = new Set();\n        let reordered = [];\n        // Keep any previous tabs in the same DOM order as before, removing any that have been deleted\n        for (const id of ids) {\n            if (components.get(id)) {\n                nextIds.push(id);\n                nextIdsSet.add(id);\n            }\n        }\n        ids.splice(0, ids.length, ...nextIds);\n        // Add tabs that have been added to the DOM\n        for (const [id, _] of components) {\n            if (!nextIdsSet.has(id)) {\n                ids.push(id);\n            }\n        }\n        reordered = ids.map((id) => {\n            return components.get(id);\n        });\n        return reordered;\n    }\n    redraw(type) {\n        // console.log(\"redraw\", this.windowId, type);\n        this.mainLayout.setState((state, props) => { return { forceRevision: state.forceRevision + 1 }; });\n    }\n    redrawInternal(type) {\n        // console.log(\"redrawInternal\", this.windowId, type);\n        this.mainLayout.setState((state, props) => { return { layoutRevision: state.layoutRevision + 1 }; });\n    }\n    doAction(action) {\n        if (this.props.onAction !== undefined) {\n            const outcome = this.props.onAction(action);\n            if (outcome !== undefined) {\n                return this.props.model.doAction(outcome);\n            }\n            return undefined;\n        }\n        else {\n            return this.props.model.doAction(action);\n        }\n    }\n    getBoundingClientRect(div) {\n        const layoutRect = this.getDomRect();\n        if (layoutRect) {\n            return _Rect__WEBPACK_IMPORTED_MODULE_6__.Rect.getBoundingClientRect(div).relativeTo(layoutRect);\n        }\n        return _Rect__WEBPACK_IMPORTED_MODULE_6__.Rect.empty();\n    }\n    getMoveableContainer() {\n        return this.moveablesRef.current;\n    }\n    getMoveableElement(id) {\n        let moveableElement = this.moveableElementMap.get(id);\n        if (moveableElement === undefined) {\n            moveableElement = document.createElement(\"div\");\n            this.moveablesRef.current.appendChild(moveableElement);\n            moveableElement.className = _Types__WEBPACK_IMPORTED_MODULE_7__.CLASSES.FLEXLAYOUT__TAB_MOVEABLE;\n            this.moveableElementMap.set(id, moveableElement);\n        }\n        return moveableElement;\n    }\n    getMainLayout() {\n        return this.mainLayout;\n    }\n    getCurrentDocument() {\n        return this.currentDocument;\n    }\n    getDomRect() {\n        if (this.selfRef.current) {\n            return _Rect__WEBPACK_IMPORTED_MODULE_6__.Rect.fromDomRect(this.selfRef.current.getBoundingClientRect());\n        }\n        else {\n            return _Rect__WEBPACK_IMPORTED_MODULE_6__.Rect.empty();\n        }\n    }\n    getWindowId() {\n        return this.windowId;\n    }\n    getRootDiv() {\n        return this.selfRef.current;\n    }\n    getMainElement() {\n        return this.mainRef.current;\n    }\n    getFactory() {\n        return this.props.factory;\n    }\n    isSupportsPopout() {\n        return this.supportsPopout;\n    }\n    isRealtimeResize() {\n        var _a;\n        return (_a = this.props.realtimeResize) !== null && _a !== void 0 ? _a : false;\n    }\n    getPopoutURL() {\n        return this.popoutURL;\n    }\n    setEditingTab(tabNode) {\n        this.setState({ editingTab: tabNode });\n    }\n    getEditingTab() {\n        return this.state.editingTab;\n    }\n    getModel() {\n        return this.props.model;\n    }\n    getScreenRect(inRect) {\n        const rect = inRect.clone();\n        const layoutRect = this.getDomRect();\n        // Note: outerHeight can be less than innerHeight when window is zoomed, so cannot use\n        // const navHeight = Math.min(65, this.currentWindow!.outerHeight - this.currentWindow!.innerHeight);\n        // const navWidth = Math.min(65, this.currentWindow!.outerWidth - this.currentWindow!.innerWidth);\n        const navHeight = 60;\n        const navWidth = 2;\n        // console.log(rect.y, this.currentWindow!.screenX,layoutRect.y);\n        rect.x = this.currentWindow.screenX + this.currentWindow.scrollX + navWidth / 2 + layoutRect.x + rect.x;\n        rect.y = this.currentWindow.screenY + this.currentWindow.scrollY + (navHeight - navWidth / 2) + layoutRect.y + rect.y;\n        rect.height += navHeight;\n        rect.width += navWidth;\n        return rect;\n    }\n    addTabToTabSet(tabsetId, json) {\n        const tabsetNode = this.props.model.getNodeById(tabsetId);\n        if (tabsetNode !== undefined) {\n            const node = this.doAction(_model_Actions__WEBPACK_IMPORTED_MODULE_8__.Actions.addNode(json, tabsetId, _DockLocation__WEBPACK_IMPORTED_MODULE_3__.DockLocation.CENTER, -1));\n            return node;\n        }\n        return undefined;\n    }\n    addTabToActiveTabSet(json) {\n        const tabsetNode = this.props.model.getActiveTabset(this.windowId);\n        if (tabsetNode !== undefined) {\n            const node = this.doAction(_model_Actions__WEBPACK_IMPORTED_MODULE_8__.Actions.addNode(json, tabsetNode.getId(), _DockLocation__WEBPACK_IMPORTED_MODULE_3__.DockLocation.CENTER, -1));\n            return node;\n        }\n        return undefined;\n    }\n    maximize(tabsetNode) {\n        this.doAction(_model_Actions__WEBPACK_IMPORTED_MODULE_8__.Actions.maximizeToggle(tabsetNode.getId(), this.getWindowId()));\n    }\n    customizeTab(tabNode, renderValues) {\n        if (this.props.onRenderTab) {\n            this.props.onRenderTab(tabNode, renderValues);\n        }\n    }\n    customizeTabSet(tabSetNode, renderValues) {\n        if (this.props.onRenderTabSet) {\n            this.props.onRenderTabSet(tabSetNode, renderValues);\n        }\n    }\n    i18nName(id, param) {\n        let message;\n        if (this.props.i18nMapper) {\n            message = this.props.i18nMapper(id, param);\n        }\n        if (message === undefined) {\n            message = id + (param === undefined ? \"\" : param);\n        }\n        return message;\n    }\n    getShowOverflowMenu() {\n        return this.props.onShowOverflowMenu;\n    }\n    getTabSetPlaceHolderCallback() {\n        return this.props.onTabSetPlaceHolder;\n    }\n    showContextMenu(node, event) {\n        if (this.props.onContextMenu) {\n            this.props.onContextMenu(node, event);\n        }\n    }\n    auxMouseClick(node, event) {\n        if (this.props.onAuxMouseClick) {\n            this.props.onAuxMouseClick(node, event);\n        }\n    }\n    showOverlay(show) {\n        this.setState({ showOverlay: show });\n        (0,_Utils__WEBPACK_IMPORTED_MODULE_22__.enablePointerOnIFrames)(!show, this.currentDocument);\n    }\n    // *************************** Start Drag Drop *************************************\n    addTabWithDragAndDrop(event, json, onDrop) {\n        const tempNode = _model_TabNode__WEBPACK_IMPORTED_MODULE_11__.TabNode.fromJson(json, this.props.model, false);\n        LayoutInternal.dragState = new DragState(this.mainLayout, DragSource.Add, tempNode, json, onDrop);\n    }\n    moveTabWithDragAndDrop(event, node) {\n        this.setDragNode(event, node);\n    }\n    setDragComponent(event, component, x, y) {\n        let dragElement = (react__WEBPACK_IMPORTED_MODULE_0__.createElement(\"div\", { style: { position: \"unset\" }, className: this.getClassName(_Types__WEBPACK_IMPORTED_MODULE_7__.CLASSES.FLEXLAYOUT__LAYOUT) + \" \" + this.getClassName(_Types__WEBPACK_IMPORTED_MODULE_7__.CLASSES.FLEXLAYOUT__DRAG_RECT) }, component));\n        const tempDiv = this.currentDocument.createElement('div');\n        tempDiv.setAttribute(\"data-layout-path\", \"/drag-rectangle\");\n        tempDiv.style.position = \"absolute\";\n        tempDiv.style.left = \"-10000px\";\n        tempDiv.style.top = \"-10000px\";\n        this.currentDocument.body.appendChild(tempDiv);\n        (0,react_dom_client__WEBPACK_IMPORTED_MODULE_2__.createRoot)(tempDiv).render(dragElement);\n        event.dataTransfer.setDragImage(tempDiv, x, y);\n        setTimeout(() => {\n            this.currentDocument.body.removeChild(tempDiv);\n        }, 0);\n    }\n    setDraggingOverWindow(overWindow) {\n        // console.log(\"setDraggingOverWindow\", overWindow);\n        if (this.isDraggingOverWindow !== overWindow) {\n            if (this.outlineDiv) {\n                this.outlineDiv.style.visibility = overWindow ? \"hidden\" : \"visible\";\n            }\n            if (overWindow) {\n                this.setState({ showEdges: false });\n            }\n            else {\n                // add edge indicators\n                if (this.props.model.getMaximizedTabset(this.windowId) === undefined) {\n                    this.setState({ showEdges: this.props.model.isEnableEdgeDock() });\n                }\n            }\n            this.isDraggingOverWindow = overWindow;\n        }\n    }\n    clearDragMain() {\n        // console.log(\"clear drag main\");\n        LayoutInternal.dragState = undefined;\n        if (this.windowId === _model_Model__WEBPACK_IMPORTED_MODULE_10__.Model.MAIN_WINDOW_ID) {\n            this.isDraggingOverWindow = false;\n        }\n        for (const [, layoutWindow] of this.props.model.getwindowsMap()) {\n            // console.log(layoutWindow);\n            layoutWindow.layout.clearDragLocal();\n        }\n    }\n    clearDragLocal() {\n        // console.log(\"clear drag local\", this.windowId);\n        this.setState({ showEdges: false });\n        this.showOverlay(false);\n        this.dragEnterCount = 0;\n        this.dragging = false;\n        if (this.outlineDiv) {\n            this.selfRef.current.removeChild(this.outlineDiv);\n            this.outlineDiv = undefined;\n        }\n    }\n}\nLayoutInternal.dragState = undefined;\nconst FlexLayoutVersion = \"0.8.10\";\nconst defaultIcons = {\n    close: react__WEBPACK_IMPORTED_MODULE_0__.createElement(_Icons__WEBPACK_IMPORTED_MODULE_18__.CloseIcon, null),\n    closeTabset: react__WEBPACK_IMPORTED_MODULE_0__.createElement(_Icons__WEBPACK_IMPORTED_MODULE_18__.CloseIcon, null),\n    popout: react__WEBPACK_IMPORTED_MODULE_0__.createElement(_Icons__WEBPACK_IMPORTED_MODULE_18__.PopoutIcon, null),\n    maximize: react__WEBPACK_IMPORTED_MODULE_0__.createElement(_Icons__WEBPACK_IMPORTED_MODULE_18__.MaximizeIcon, null),\n    restore: react__WEBPACK_IMPORTED_MODULE_0__.createElement(_Icons__WEBPACK_IMPORTED_MODULE_18__.RestoreIcon, null),\n    more: react__WEBPACK_IMPORTED_MODULE_0__.createElement(_Icons__WEBPACK_IMPORTED_MODULE_18__.OverflowIcon, null),\n    edgeArrow: react__WEBPACK_IMPORTED_MODULE_0__.createElement(_Icons__WEBPACK_IMPORTED_MODULE_18__.EdgeIcon, null),\n    activeTabset: react__WEBPACK_IMPORTED_MODULE_0__.createElement(_Icons__WEBPACK_IMPORTED_MODULE_18__.AsterickIcon, null)\n};\nvar DragSource;\n(function (DragSource) {\n    DragSource[\"Internal\"] = \"internal\";\n    DragSource[\"External\"] = \"external\";\n    DragSource[\"Add\"] = \"add\";\n})(DragSource || (DragSource = {}));\n/** @internal */\nconst defaultSupportsPopout = (0,_Utils__WEBPACK_IMPORTED_MODULE_22__.isDesktop)();\n/** @internal */\nconst edgeRectLength = 100;\n/** @internal */\nconst edgeRectWidth = 10;\n// global layout drag state\nclass DragState {\n    constructor(mainLayout, dragSource, dragNode, dragJson, fnNewNodeDropped) {\n        this.mainLayout = mainLayout;\n        this.dragSource = dragSource;\n        this.dragNode = dragNode;\n        this.dragJson = dragJson;\n        this.fnNewNodeDropped = fnNewNodeDropped;\n    }\n}\n\n\n//# sourceURL=webpack://FlexLayout/./src/view/Layout.tsx?");
 
 /***/ }),
 
@@ -446,7 +446,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 _model_ICloseType__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! ../model/ICloseType */ \"./src/model/ICloseType.ts\");\n/* harmony import */ var _Types__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(/*! ../Types */ \"./src/Types.ts\");\n/* harmony import */ var _Utils__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__(/*! ./Utils */ \"./src/view/Utils.tsx\");\n\n\n\n\n\n\n/** @internal */\nconst TabButton = (props) => {\n    const { layout, node, selected, path } = props;\n    const selfRef = react__WEBPACK_IMPORTED_MODULE_0__.useRef(null);\n    const contentRef = react__WEBPACK_IMPORTED_MODULE_0__.useRef(null);\n    const icons = layout.getIcons();\n    react__WEBPACK_IMPORTED_MODULE_0__.useLayoutEffect(() => {\n        node.setTabRect(layout.getBoundingClientRect(selfRef.current));\n        if (layout.getEditingTab() === node) {\n            contentRef.current.select();\n        }\n    });\n    const onDragStart = (event) => {\n        if (node.isEnableDrag()) {\n            event.stopPropagation(); // prevent starting a tabset drag as well\n            layout.setDragNode(event.nativeEvent, node);\n        }\n        else {\n            event.preventDefault();\n        }\n    };\n    const onDragEnd = (event) => {\n        layout.clearDragMain();\n    };\n    const onAuxMouseClick = (event) => {\n        if ((0,_Utils__WEBPACK_IMPORTED_MODULE_5__.isAuxMouseEvent)(event)) {\n            layout.auxMouseClick(node, event);\n        }\n    };\n    const onContextMenu = (event) => {\n        layout.showContextMenu(node, event);\n    };\n    const onClick = () => {\n        layout.doAction(_model_Actions__WEBPACK_IMPORTED_MODULE_2__.Actions.selectTab(node.getId()));\n    };\n    const onDoubleClick = (event) => {\n        if (node.isEnableRename()) {\n            onRename();\n            event.stopPropagation();\n        }\n    };\n    const onRename = () => {\n        layout.setEditingTab(node);\n        layout.getCurrentDocument().body.addEventListener(\"pointerdown\", onEndEdit);\n    };\n    const onEndEdit = (event) => {\n        if (event.target !== contentRef.current) {\n            layout.getCurrentDocument().body.removeEventListener(\"pointerdown\", onEndEdit);\n            layout.setEditingTab(undefined);\n        }\n    };\n    const isClosable = () => {\n        const closeType = node.getCloseType();\n        if (selected || closeType === _model_ICloseType__WEBPACK_IMPORTED_MODULE_3__.ICloseType.Always) {\n            return true;\n        }\n        if (closeType === _model_ICloseType__WEBPACK_IMPORTED_MODULE_3__.ICloseType.Visible) {\n            // not selected but x should be visible due to hover\n            if (window.matchMedia && window.matchMedia(\"(hover: hover) and (pointer: fine)\").matches) {\n                return true;\n            }\n        }\n        return false;\n    };\n    const onClose = (event) => {\n        if (isClosable()) {\n            layout.doAction(_model_Actions__WEBPACK_IMPORTED_MODULE_2__.Actions.deleteTab(node.getId()));\n            event.stopPropagation();\n        }\n    };\n    const onClosePointerDown = (event) => {\n        event.stopPropagation();\n    };\n    const onTextBoxPointerDown = (event) => {\n        event.stopPropagation();\n    };\n    const onTextBoxKeyPress = (event) => {\n        if (event.code === 'Escape') {\n            // esc\n            layout.setEditingTab(undefined);\n        }\n        else if (event.code === 'Enter') {\n            // enter\n            layout.setEditingTab(undefined);\n            layout.doAction(_model_Actions__WEBPACK_IMPORTED_MODULE_2__.Actions.renameTab(node.getId(), event.target.value));\n        }\n    };\n    const cm = layout.getClassName;\n    const parentNode = node.getParent();\n    const isStretch = parentNode.isEnableSingleTabStretch() && parentNode.getChildren().length === 1;\n    let baseClassName = isStretch ? _Types__WEBPACK_IMPORTED_MODULE_4__.CLASSES.FLEXLAYOUT__TAB_BUTTON_STRETCH : _Types__WEBPACK_IMPORTED_MODULE_4__.CLASSES.FLEXLAYOUT__TAB_BUTTON;\n    let classNames = cm(baseClassName);\n    classNames += \" \" + cm(baseClassName + \"_\" + parentNode.getTabLocation());\n    if (!isStretch) {\n        if (selected) {\n            classNames += \" \" + cm(baseClassName + \"--selected\");\n        }\n        else {\n            classNames += \" \" + cm(baseClassName + \"--unselected\");\n        }\n    }\n    if (node.getClassName() !== undefined) {\n        classNames += \" \" + node.getClassName();\n    }\n    const renderState = (0,_Utils__WEBPACK_IMPORTED_MODULE_5__.getRenderStateEx)(layout, node);\n    let content = renderState.content ? (react__WEBPACK_IMPORTED_MODULE_0__.createElement(\"div\", { className: cm(_Types__WEBPACK_IMPORTED_MODULE_4__.CLASSES.FLEXLAYOUT__TAB_BUTTON_CONTENT) }, renderState.content)) : null;\n    const leading = renderState.leading ? (react__WEBPACK_IMPORTED_MODULE_0__.createElement(\"div\", { className: cm(_Types__WEBPACK_IMPORTED_MODULE_4__.CLASSES.FLEXLAYOUT__TAB_BUTTON_LEADING) }, renderState.leading)) : null;\n    if (layout.getEditingTab() === node) {\n        content = (react__WEBPACK_IMPORTED_MODULE_0__.createElement(\"input\", { ref: contentRef, className: cm(_Types__WEBPACK_IMPORTED_MODULE_4__.CLASSES.FLEXLAYOUT__TAB_BUTTON_TEXTBOX), \"data-layout-path\": path + \"/textbox\", type: \"text\", autoFocus: true, defaultValue: node.getName(), onKeyDown: onTextBoxKeyPress, onPointerDown: onTextBoxPointerDown }));\n    }\n    if (node.isEnableClose() && !isStretch) {\n        const closeTitle = layout.i18nName(_I18nLabel__WEBPACK_IMPORTED_MODULE_1__.I18nLabel.Close_Tab);\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_4__.CLASSES.FLEXLAYOUT__TAB_BUTTON_TRAILING), onPointerDown: onClosePointerDown, onClick: onClose }, (typeof icons.close === \"function\") ? icons.close(node) : icons.close));\n    }\n    return (react__WEBPACK_IMPORTED_MODULE_0__.createElement(\"div\", { ref: selfRef, \"data-layout-path\": path, className: classNames, onClick: onClick, onAuxClick: onAuxMouseClick, onContextMenu: onContextMenu, title: node.getHelpText(), draggable: true, onDragStart: onDragStart, onDragEnd: onDragEnd, onDoubleClick: onDoubleClick },\n        leading,\n        content,\n        renderState.buttons));\n};\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 _model_ICloseType__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! ../model/ICloseType */ \"./src/model/ICloseType.ts\");\n/* harmony import */ var _Types__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(/*! ../Types */ \"./src/Types.ts\");\n/* harmony import */ var _Utils__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__(/*! ./Utils */ \"./src/view/Utils.tsx\");\n\n\n\n\n\n\n/** @internal */\nconst TabButton = (props) => {\n    const { layout, node, selected, path } = props;\n    const selfRef = react__WEBPACK_IMPORTED_MODULE_0__.useRef(null);\n    const contentRef = react__WEBPACK_IMPORTED_MODULE_0__.useRef(null);\n    const icons = layout.getIcons();\n    react__WEBPACK_IMPORTED_MODULE_0__.useLayoutEffect(() => {\n        node.setTabRect(layout.getBoundingClientRect(selfRef.current));\n        if (layout.getEditingTab() === node) {\n            contentRef.current.select();\n        }\n    });\n    const onDragStart = (event) => {\n        if (node.isEnableDrag()) {\n            event.stopPropagation(); // prevent starting a tabset drag as well\n            layout.setDragNode(event.nativeEvent, node);\n        }\n        else {\n            event.preventDefault();\n        }\n    };\n    const onDragEnd = (event) => {\n        layout.clearDragMain();\n    };\n    const onAuxMouseClick = (event) => {\n        if ((0,_Utils__WEBPACK_IMPORTED_MODULE_5__.isAuxMouseEvent)(event)) {\n            layout.auxMouseClick(node, event);\n        }\n    };\n    const onContextMenu = (event) => {\n        layout.showContextMenu(node, event);\n    };\n    const onClick = () => {\n        layout.doAction(_model_Actions__WEBPACK_IMPORTED_MODULE_2__.Actions.selectTab(node.getId()));\n    };\n    const onDoubleClick = (event) => {\n        if (node.isEnableRename()) {\n            onRename();\n            event.stopPropagation();\n        }\n    };\n    const onRename = () => {\n        layout.setEditingTab(node);\n        layout.getCurrentDocument().body.addEventListener(\"pointerdown\", onEndEdit);\n    };\n    const onEndEdit = (event) => {\n        if (event.target !== contentRef.current) {\n            layout.getCurrentDocument().body.removeEventListener(\"pointerdown\", onEndEdit);\n            layout.setEditingTab(undefined);\n        }\n    };\n    const isClosable = () => {\n        const closeType = node.getCloseType();\n        if (selected || closeType === _model_ICloseType__WEBPACK_IMPORTED_MODULE_3__.ICloseType.Always) {\n            return true;\n        }\n        if (closeType === _model_ICloseType__WEBPACK_IMPORTED_MODULE_3__.ICloseType.Visible) {\n            // not selected but x should be visible due to hover\n            if (window.matchMedia && window.matchMedia(\"(hover: hover) and (pointer: fine)\").matches) {\n                return true;\n            }\n        }\n        return false;\n    };\n    const onClose = (event) => {\n        if (isClosable()) {\n            layout.doAction(_model_Actions__WEBPACK_IMPORTED_MODULE_2__.Actions.deleteTab(node.getId()));\n            event.stopPropagation();\n        }\n    };\n    const onClosePointerDown = (event) => {\n        event.stopPropagation();\n    };\n    const onTextBoxPointerDown = (event) => {\n        event.stopPropagation();\n    };\n    const onTextBoxKeyPress = (event) => {\n        if (event.code === 'Escape') {\n            // esc\n            layout.setEditingTab(undefined);\n        }\n        else if (event.code === 'Enter' || event.code === 'NumpadEnter') {\n            // enter\n            layout.setEditingTab(undefined);\n            layout.doAction(_model_Actions__WEBPACK_IMPORTED_MODULE_2__.Actions.renameTab(node.getId(), event.target.value));\n        }\n    };\n    const cm = layout.getClassName;\n    const parentNode = node.getParent();\n    const isStretch = parentNode.isEnableSingleTabStretch() && parentNode.getChildren().length === 1;\n    let baseClassName = isStretch ? _Types__WEBPACK_IMPORTED_MODULE_4__.CLASSES.FLEXLAYOUT__TAB_BUTTON_STRETCH : _Types__WEBPACK_IMPORTED_MODULE_4__.CLASSES.FLEXLAYOUT__TAB_BUTTON;\n    let classNames = cm(baseClassName);\n    classNames += \" \" + cm(baseClassName + \"_\" + parentNode.getTabLocation());\n    if (!isStretch) {\n        if (selected) {\n            classNames += \" \" + cm(baseClassName + \"--selected\");\n        }\n        else {\n            classNames += \" \" + cm(baseClassName + \"--unselected\");\n        }\n    }\n    if (node.getClassName() !== undefined) {\n        classNames += \" \" + node.getClassName();\n    }\n    const renderState = (0,_Utils__WEBPACK_IMPORTED_MODULE_5__.getRenderStateEx)(layout, node);\n    let content = renderState.content ? (react__WEBPACK_IMPORTED_MODULE_0__.createElement(\"div\", { className: cm(_Types__WEBPACK_IMPORTED_MODULE_4__.CLASSES.FLEXLAYOUT__TAB_BUTTON_CONTENT) }, renderState.content)) : null;\n    const leading = renderState.leading ? (react__WEBPACK_IMPORTED_MODULE_0__.createElement(\"div\", { className: cm(_Types__WEBPACK_IMPORTED_MODULE_4__.CLASSES.FLEXLAYOUT__TAB_BUTTON_LEADING) }, renderState.leading)) : null;\n    if (layout.getEditingTab() === node) {\n        content = (react__WEBPACK_IMPORTED_MODULE_0__.createElement(\"input\", { ref: contentRef, className: cm(_Types__WEBPACK_IMPORTED_MODULE_4__.CLASSES.FLEXLAYOUT__TAB_BUTTON_TEXTBOX), \"data-layout-path\": path + \"/textbox\", type: \"text\", autoFocus: true, defaultValue: node.getName(), onKeyDown: onTextBoxKeyPress, onPointerDown: onTextBoxPointerDown }));\n    }\n    if (node.isEnableClose() && !isStretch) {\n        const closeTitle = layout.i18nName(_I18nLabel__WEBPACK_IMPORTED_MODULE_1__.I18nLabel.Close_Tab);\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_4__.CLASSES.FLEXLAYOUT__TAB_BUTTON_TRAILING), onPointerDown: onClosePointerDown, onClick: onClose }, (typeof icons.close === \"function\") ? icons.close(node) : icons.close));\n    }\n    return (react__WEBPACK_IMPORTED_MODULE_0__.createElement(\"div\", { ref: selfRef, \"data-layout-path\": path, className: classNames, onClick: onClick, onAuxClick: onAuxMouseClick, onContextMenu: onContextMenu, title: node.getHelpText(), draggable: true, onDragStart: onDragStart, onDragEnd: onDragEnd, onDoubleClick: onDoubleClick },\n        leading,\n        content,\n        renderState.buttons));\n};\n\n\n//# sourceURL=webpack://FlexLayout/./src/view/TabButton.tsx?");
 
 /***/ }),