flexlayout-react 0.8.11 → 0.8.12

package/ChangeLog.txt

@@ -1,10 +1,12 @@
-0.8.11
+0.8.12
 Updated dependencies
 Fix for initial tab flash
 Disabled popout of MUI tabs in demo (because Emotion generated styles (in production) cannot be copied to popout window)
 Converted Cypress tests to Playwright
 Updated demo app to use React hooks
 
+0.8.11 - deprecated - published with additional files by mistake
+
 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

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.11";
+export declare const FlexLayoutVersion = "0.8.12";
 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

@@ -386,7 +386,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_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! react/jsx-runtime */ \"./node_modules/.pnpm/react@19.1.0/node_modules/react/jsx-runtime.js\");\n/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! react */ \"react\");\n/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_1___default = /*#__PURE__*/__webpack_require__.n(react__WEBPACK_IMPORTED_MODULE_1__);\n/* harmony import */ var react_dom__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! react-dom */ \"react-dom\");\n/* harmony import */ var react_dom__WEBPACK_IMPORTED_MODULE_2___default = /*#__PURE__*/__webpack_require__.n(react_dom__WEBPACK_IMPORTED_MODULE_2__);\n/* harmony import */ var react_dom_client__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! react-dom/client */ \"./node_modules/.pnpm/react-dom@19.1.0_react@19.1.0/node_modules/react-dom/client.js\");\n/* harmony import */ var _DockLocation__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(/*! ../DockLocation */ \"./src/DockLocation.ts\");\n/* harmony import */ var _I18nLabel__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__(/*! ../I18nLabel */ \"./src/I18nLabel.ts\");\n/* harmony import */ var _Orientation__WEBPACK_IMPORTED_MODULE_6__ = __webpack_require__(/*! ../Orientation */ \"./src/Orientation.ts\");\n/* harmony import */ var _Rect__WEBPACK_IMPORTED_MODULE_7__ = __webpack_require__(/*! ../Rect */ \"./src/Rect.ts\");\n/* harmony import */ var _Types__WEBPACK_IMPORTED_MODULE_8__ = __webpack_require__(/*! ../Types */ \"./src/Types.ts\");\n/* harmony import */ var _model_Actions__WEBPACK_IMPORTED_MODULE_9__ = __webpack_require__(/*! ../model/Actions */ \"./src/model/Actions.ts\");\n/* harmony import */ var _model_BorderNode__WEBPACK_IMPORTED_MODULE_10__ = __webpack_require__(/*! ../model/BorderNode */ \"./src/model/BorderNode.ts\");\n/* harmony import */ var _model_Model__WEBPACK_IMPORTED_MODULE_11__ = __webpack_require__(/*! ../model/Model */ \"./src/model/Model.ts\");\n/* harmony import */ var _model_TabNode__WEBPACK_IMPORTED_MODULE_12__ = __webpack_require__(/*! ../model/TabNode */ \"./src/model/TabNode.ts\");\n/* harmony import */ var _model_TabSetNode__WEBPACK_IMPORTED_MODULE_13__ = __webpack_require__(/*! ../model/TabSetNode */ \"./src/model/TabSetNode.ts\");\n/* harmony import */ var _BorderTab__WEBPACK_IMPORTED_MODULE_14__ = __webpack_require__(/*! ./BorderTab */ \"./src/view/BorderTab.tsx\");\n/* harmony import */ var _BorderTabSet__WEBPACK_IMPORTED_MODULE_15__ = __webpack_require__(/*! ./BorderTabSet */ \"./src/view/BorderTabSet.tsx\");\n/* harmony import */ var _DragContainer__WEBPACK_IMPORTED_MODULE_16__ = __webpack_require__(/*! ./DragContainer */ \"./src/view/DragContainer.tsx\");\n/* harmony import */ var _ErrorBoundary__WEBPACK_IMPORTED_MODULE_17__ = __webpack_require__(/*! ./ErrorBoundary */ \"./src/view/ErrorBoundary.tsx\");\n/* harmony import */ var _PopoutWindow__WEBPACK_IMPORTED_MODULE_18__ = __webpack_require__(/*! ./PopoutWindow */ \"./src/view/PopoutWindow.tsx\");\n/* harmony import */ var _Icons__WEBPACK_IMPORTED_MODULE_19__ = __webpack_require__(/*! ./Icons */ \"./src/view/Icons.tsx\");\n/* harmony import */ var _Overlay__WEBPACK_IMPORTED_MODULE_20__ = __webpack_require__(/*! ./Overlay */ \"./src/view/Overlay.tsx\");\n/* harmony import */ var _Row__WEBPACK_IMPORTED_MODULE_21__ = __webpack_require__(/*! ./Row */ \"./src/view/Row.tsx\");\n/* harmony import */ var _Tab__WEBPACK_IMPORTED_MODULE_22__ = __webpack_require__(/*! ./Tab */ \"./src/view/Tab.tsx\");\n/* harmony import */ var _Utils__WEBPACK_IMPORTED_MODULE_23__ = __webpack_require__(/*! ./Utils */ \"./src/view/Utils.tsx\");\n/* harmony import */ var _TabButtonStamp__WEBPACK_IMPORTED_MODULE_24__ = __webpack_require__(/*! ./TabButtonStamp */ \"./src/view/TabButtonStamp.tsx\");\n/* harmony import */ var _SizeTracker__WEBPACK_IMPORTED_MODULE_25__ = __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/**\n * A React component that hosts a multi-tabbed layout\n */\nclass Layout extends react__WEBPACK_IMPORTED_MODULE_1__.Component {\n    /** @internal */\n    constructor(props) {\n        super(props);\n        this.selfRef = react__WEBPACK_IMPORTED_MODULE_1__.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 ((0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(LayoutInternal, Object.assign({ ref: this.selfRef }, this.props, { renderRevision: this.revision++ })));\n    }\n}\n/** @internal */\nclass LayoutInternal extends react__WEBPACK_IMPORTED_MODULE_1__.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_11__.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_9__.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_2__.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_13__.TabSetNode) {\n                let rendered = false;\n                let content = this.i18nName(_I18nLabel__WEBPACK_IMPORTED_MODULE_5__.I18nLabel.Move_Tabset);\n                if (node.getChildren().length > 0) {\n                    content = this.i18nName(_I18nLabel__WEBPACK_IMPORTED_MODULE_5__.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_10__.BorderNode && parentNode.getOrientation() === _Orientation__WEBPACK_IMPORTED_MODULE_6__.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 = (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_TabButtonStamp__WEBPACK_IMPORTED_MODULE_24__.TabButtonStamp, { layout: this, node: node }, node.getId());\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_23__.isSafari)()) { // safari doesnt render the offscreen tabstamps\n                        this.setDragComponent(event, (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_TabButtonStamp__WEBPACK_IMPORTED_MODULE_24__.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_12__.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_11__.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_8__.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_7__.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_11__.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_9__.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_9__.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_1__.createRef();\n        this.moveablesRef = react__WEBPACK_IMPORTED_MODULE_1__.createRef();\n        this.mainRef = react__WEBPACK_IMPORTED_MODULE_1__.createRef();\n        this.findBorderBarSizeRef = react__WEBPACK_IMPORTED_MODULE_1__.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_11__.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_7__.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_4__.DockLocation.CENTER\n        };\n        this.isMainWindow = this.windowId === _model_Model__WEBPACK_IMPORTED_MODULE_11__.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_23__.copyInlineStyles)(sourceElement, targetElement);\n            this.styleObserver = new MutationObserver(() => {\n                const changed = (0,_Utils__WEBPACK_IMPORTED_MODULE_23__.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 ((0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)(\"div\", { ref: this.selfRef, className: this.getClassName(_Types__WEBPACK_IMPORTED_MODULE_8__.CLASSES.FLEXLAYOUT__LAYOUT), children: [(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(\"div\", { ref: this.moveablesRef, className: this.getClassName(_Types__WEBPACK_IMPORTED_MODULE_8__.CLASSES.FLEXLAYOUT__LAYOUT_MOVEABLES) }, \"__moveables__\"), 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 = (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(\"div\", { className: this.getClassName(_Types__WEBPACK_IMPORTED_MODULE_8__.CLASSES.FLEXLAYOUT__LAYOUT_TAB_STAMPS), children: this.renderTabStamps() }, \"__tabStamps__\");\n        }\n        return ((0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)(\"div\", { ref: this.selfRef, className: this.getClassName(_Types__WEBPACK_IMPORTED_MODULE_8__.CLASSES.FLEXLAYOUT__LAYOUT), onDragEnter: this.onDragEnterRaw, onDragLeave: this.onDragLeaveRaw, onDragOver: this.onDragOver, onDrop: this.onDrop, children: [(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(\"div\", { ref: this.moveablesRef, className: this.getClassName(_Types__WEBPACK_IMPORTED_MODULE_8__.CLASSES.FLEXLAYOUT__LAYOUT_MOVEABLES) }, \"__moveables__\"), metricElements, (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_Overlay__WEBPACK_IMPORTED_MODULE_20__.Overlay, { layout: this, show: this.state.showOverlay }, \"__overlay__\"), outer, reorderedTabs, reorderedTabMoveables, tabStamps, this.state.portal, floatingWindows] }));\n    }\n    renderBorders(inner) {\n        const classMain = this.getClassName(_Types__WEBPACK_IMPORTED_MODULE_8__.CLASSES.FLEXLAYOUT__LAYOUT_MAIN);\n        const borders = this.props.model.getBorderSet().getBorderMap();\n        if (this.isMainWindow && borders.size > 0) {\n            inner = ((0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(\"div\", { className: classMain, ref: this.mainRef, children: inner }));\n            const borderSetComponents = new Map();\n            const borderSetContentComponents = new Map();\n            for (const [_, location] of _DockLocation__WEBPACK_IMPORTED_MODULE_4__.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, (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_BorderTabSet__WEBPACK_IMPORTED_MODULE_15__.BorderTabSet, { layout: this, border: border, size: this.state.calculatedBorderBarSize }));\n                    borderSetContentComponents.set(location, (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_BorderTab__WEBPACK_IMPORTED_MODULE_14__.BorderTab, { layout: this, border: border, show: border.getSelected() !== -1 }));\n                }\n            }\n            const classBorderOuter = this.getClassName(_Types__WEBPACK_IMPORTED_MODULE_8__.CLASSES.FLEXLAYOUT__LAYOUT_BORDER_CONTAINER);\n            const classBorderInner = this.getClassName(_Types__WEBPACK_IMPORTED_MODULE_8__.CLASSES.FLEXLAYOUT__LAYOUT_BORDER_CONTAINER_INNER);\n            if (this.props.model.getBorderSet().getLayoutHorizontal()) {\n                const innerWithBorderTabs = ((0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)(\"div\", { className: classBorderInner, style: { flexDirection: \"column\" }, children: [borderSetContentComponents.get(_DockLocation__WEBPACK_IMPORTED_MODULE_4__.DockLocation.TOP), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)(\"div\", { className: classBorderInner, style: { flexDirection: \"row\" }, children: [borderSetContentComponents.get(_DockLocation__WEBPACK_IMPORTED_MODULE_4__.DockLocation.LEFT), inner, borderSetContentComponents.get(_DockLocation__WEBPACK_IMPORTED_MODULE_4__.DockLocation.RIGHT)] }), borderSetContentComponents.get(_DockLocation__WEBPACK_IMPORTED_MODULE_4__.DockLocation.BOTTOM)] }));\n                return ((0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)(\"div\", { className: classBorderOuter, style: { flexDirection: \"column\" }, children: [borderSetComponents.get(_DockLocation__WEBPACK_IMPORTED_MODULE_4__.DockLocation.TOP), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)(\"div\", { className: classBorderInner, style: { flexDirection: \"row\" }, children: [borderSetComponents.get(_DockLocation__WEBPACK_IMPORTED_MODULE_4__.DockLocation.LEFT), innerWithBorderTabs, borderSetComponents.get(_DockLocation__WEBPACK_IMPORTED_MODULE_4__.DockLocation.RIGHT)] }), borderSetComponents.get(_DockLocation__WEBPACK_IMPORTED_MODULE_4__.DockLocation.BOTTOM)] }));\n            }\n            else {\n                const innerWithBorderTabs = ((0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)(\"div\", { className: classBorderInner, style: { flexDirection: \"row\" }, children: [borderSetContentComponents.get(_DockLocation__WEBPACK_IMPORTED_MODULE_4__.DockLocation.LEFT), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)(\"div\", { className: classBorderInner, style: { flexDirection: \"column\" }, children: [borderSetContentComponents.get(_DockLocation__WEBPACK_IMPORTED_MODULE_4__.DockLocation.TOP), inner, borderSetContentComponents.get(_DockLocation__WEBPACK_IMPORTED_MODULE_4__.DockLocation.BOTTOM)] }), borderSetContentComponents.get(_DockLocation__WEBPACK_IMPORTED_MODULE_4__.DockLocation.RIGHT)] }));\n                return ((0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)(\"div\", { className: classBorderOuter, style: { flexDirection: \"row\" }, children: [borderSetComponents.get(_DockLocation__WEBPACK_IMPORTED_MODULE_4__.DockLocation.LEFT), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)(\"div\", { className: classBorderInner, style: { flexDirection: \"column\" }, children: [borderSetComponents.get(_DockLocation__WEBPACK_IMPORTED_MODULE_4__.DockLocation.TOP), innerWithBorderTabs, borderSetComponents.get(_DockLocation__WEBPACK_IMPORTED_MODULE_4__.DockLocation.BOTTOM)] }), borderSetComponents.get(_DockLocation__WEBPACK_IMPORTED_MODULE_4__.DockLocation.RIGHT)] }));\n            }\n        }\n        else { // no borders\n            return ((0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(\"div\", { className: classMain, ref: this.mainRef, style: { position: \"absolute\", top: 0, left: 0, bottom: 0, right: 0, display: \"flex\" }, children: inner }));\n        }\n    }\n    renderLayout() {\n        return ((0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)(react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.Fragment, { children: [(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_Row__WEBPACK_IMPORTED_MODULE_21__.Row, { layout: this, node: this.props.model.getRoot(this.windowId) }, \"__row__\"), 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_8__.CLASSES.FLEXLAYOUT__EDGE_RECT);\n            const radius = 50;\n            edges.push((0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(\"div\", { style: { top: 0, left: r.width / 2 - offset, width: length, height: width, borderBottomLeftRadius: radius, borderBottomRightRadius: radius }, className: className + \" \" + this.getClassName(_Types__WEBPACK_IMPORTED_MODULE_8__.CLASSES.FLEXLAYOUT__EDGE_RECT_TOP), children: (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(\"div\", { style: { transform: \"rotate(180deg)\" }, children: arrowIcon }) }, \"North\"));\n            edges.push((0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(\"div\", { style: { top: r.height / 2 - offset, left: 0, width: width, height: length, borderTopRightRadius: radius, borderBottomRightRadius: radius }, className: className + \" \" + this.getClassName(_Types__WEBPACK_IMPORTED_MODULE_8__.CLASSES.FLEXLAYOUT__EDGE_RECT_LEFT), children: (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(\"div\", { style: { transform: \"rotate(90deg)\" }, children: arrowIcon }) }, \"West\"));\n            edges.push((0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(\"div\", { 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_8__.CLASSES.FLEXLAYOUT__EDGE_RECT_BOTTOM), children: (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(\"div\", { children: arrowIcon }) }, \"South\"));\n            edges.push((0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(\"div\", { 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_8__.CLASSES.FLEXLAYOUT__EDGE_RECT_RIGHT), children: (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(\"div\", { style: { transform: \"rotate(-90deg)\" }, children: arrowIcon }) }, \"East\"));\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_11__.Model.MAIN_WINDOW_ID) {\n                    floatingWindows.push((0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_PopoutWindow__WEBPACK_IMPORTED_MODULE_18__.PopoutWindow, { layout: this, title: this.popoutWindowName + \" \" + i, layoutWindow: layoutWindow, url: this.popoutURL + \"?id=\" + windowId, onSetWindow: this.onSetWindow, onCloseWindow: this.onCloseWindow, children: (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(\"div\", { className: this.props.popoutClassName, children: (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(LayoutInternal, Object.assign({}, this.props, { windowId: windowId, mainLayout: this })) }) }, windowId));\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_12__.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_2__.createPortal)((0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_SizeTracker__WEBPACK_IMPORTED_MODULE_25__.SizeTracker, { rect: rect, selected: child.isSelected(), forceRevision: this.state.forceRevision, tabsRevision: this.props.renderRevision, children: (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_ErrorBoundary__WEBPACK_IMPORTED_MODULE_17__.ErrorBoundary, { message: this.i18nName(_I18nLabel__WEBPACK_IMPORTED_MODULE_5__.I18nLabel.Error_rendering_component), children: this.props.factory(child) }) }, key), 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_12__.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((0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_DragContainer__WEBPACK_IMPORTED_MODULE_16__.DragContainer, { layout: this, node: child }, child.getId()));\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_12__.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                    (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_Tab__WEBPACK_IMPORTED_MODULE_22__.Tab, { layout: this, path: path, node: child, selected: selected }, child.getId())\n                    // </SizeTracker>\n                    ));\n                }\n            }\n        });\n        return tabs;\n    }\n    renderMetricsElements() {\n        return ((0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(\"div\", { ref: this.findBorderBarSizeRef, className: this.getClassName(_Types__WEBPACK_IMPORTED_MODULE_8__.CLASSES.FLEXLAYOUT__BORDER_SIZER), children: \"FindBorderBarSize\" }, \"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_4__.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_4__.DockLocation.CENTER;\n        if (!overEdge) {\n            if (x <= r.x + margin) {\n                location = _DockLocation__WEBPACK_IMPORTED_MODULE_4__.DockLocation.LEFT;\n            }\n            else if (x >= r.getRight() - margin) {\n                location = _DockLocation__WEBPACK_IMPORTED_MODULE_4__.DockLocation.RIGHT;\n            }\n            else if (y <= r.y + margin) {\n                location = _DockLocation__WEBPACK_IMPORTED_MODULE_4__.DockLocation.TOP;\n            }\n            else if (y >= r.getBottom() - margin) {\n                location = _DockLocation__WEBPACK_IMPORTED_MODULE_4__.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_12__.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_7__.Rect.getBoundingClientRect(div).relativeTo(layoutRect);\n        }\n        return _Rect__WEBPACK_IMPORTED_MODULE_7__.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_8__.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_7__.Rect.fromDomRect(this.selfRef.current.getBoundingClientRect());\n        }\n        else {\n            return _Rect__WEBPACK_IMPORTED_MODULE_7__.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_9__.Actions.addNode(json, tabsetId, _DockLocation__WEBPACK_IMPORTED_MODULE_4__.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_9__.Actions.addNode(json, tabsetNode.getId(), _DockLocation__WEBPACK_IMPORTED_MODULE_4__.DockLocation.CENTER, -1));\n            return node;\n        }\n        return undefined;\n    }\n    maximize(tabsetNode) {\n        this.doAction(_model_Actions__WEBPACK_IMPORTED_MODULE_9__.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_23__.enablePointerOnIFrames)(!show, this.currentDocument);\n    }\n    // *************************** Start Drag Drop *************************************\n    addTabWithDragAndDrop(event, json, onDrop) {\n        const tempNode = _model_TabNode__WEBPACK_IMPORTED_MODULE_12__.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 = ((0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(\"div\", { style: { position: \"unset\" }, className: this.getClassName(_Types__WEBPACK_IMPORTED_MODULE_8__.CLASSES.FLEXLAYOUT__LAYOUT) + \" \" + this.getClassName(_Types__WEBPACK_IMPORTED_MODULE_8__.CLASSES.FLEXLAYOUT__DRAG_RECT), children: 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_3__.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_11__.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.11\";\nconst defaultIcons = {\n    close: (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_Icons__WEBPACK_IMPORTED_MODULE_19__.CloseIcon, {}),\n    closeTabset: (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_Icons__WEBPACK_IMPORTED_MODULE_19__.CloseIcon, {}),\n    popout: (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_Icons__WEBPACK_IMPORTED_MODULE_19__.PopoutIcon, {}),\n    maximize: (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_Icons__WEBPACK_IMPORTED_MODULE_19__.MaximizeIcon, {}),\n    restore: (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_Icons__WEBPACK_IMPORTED_MODULE_19__.RestoreIcon, {}),\n    more: (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_Icons__WEBPACK_IMPORTED_MODULE_19__.OverflowIcon, {}),\n    edgeArrow: (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_Icons__WEBPACK_IMPORTED_MODULE_19__.EdgeIcon, {}),\n    activeTabset: (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_Icons__WEBPACK_IMPORTED_MODULE_19__.AsterickIcon, {})\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_23__.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_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! react/jsx-runtime */ \"./node_modules/.pnpm/react@19.1.0/node_modules/react/jsx-runtime.js\");\n/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! react */ \"react\");\n/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_1___default = /*#__PURE__*/__webpack_require__.n(react__WEBPACK_IMPORTED_MODULE_1__);\n/* harmony import */ var react_dom__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! react-dom */ \"react-dom\");\n/* harmony import */ var react_dom__WEBPACK_IMPORTED_MODULE_2___default = /*#__PURE__*/__webpack_require__.n(react_dom__WEBPACK_IMPORTED_MODULE_2__);\n/* harmony import */ var react_dom_client__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! react-dom/client */ \"./node_modules/.pnpm/react-dom@19.1.0_react@19.1.0/node_modules/react-dom/client.js\");\n/* harmony import */ var _DockLocation__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(/*! ../DockLocation */ \"./src/DockLocation.ts\");\n/* harmony import */ var _I18nLabel__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__(/*! ../I18nLabel */ \"./src/I18nLabel.ts\");\n/* harmony import */ var _Orientation__WEBPACK_IMPORTED_MODULE_6__ = __webpack_require__(/*! ../Orientation */ \"./src/Orientation.ts\");\n/* harmony import */ var _Rect__WEBPACK_IMPORTED_MODULE_7__ = __webpack_require__(/*! ../Rect */ \"./src/Rect.ts\");\n/* harmony import */ var _Types__WEBPACK_IMPORTED_MODULE_8__ = __webpack_require__(/*! ../Types */ \"./src/Types.ts\");\n/* harmony import */ var _model_Actions__WEBPACK_IMPORTED_MODULE_9__ = __webpack_require__(/*! ../model/Actions */ \"./src/model/Actions.ts\");\n/* harmony import */ var _model_BorderNode__WEBPACK_IMPORTED_MODULE_10__ = __webpack_require__(/*! ../model/BorderNode */ \"./src/model/BorderNode.ts\");\n/* harmony import */ var _model_Model__WEBPACK_IMPORTED_MODULE_11__ = __webpack_require__(/*! ../model/Model */ \"./src/model/Model.ts\");\n/* harmony import */ var _model_TabNode__WEBPACK_IMPORTED_MODULE_12__ = __webpack_require__(/*! ../model/TabNode */ \"./src/model/TabNode.ts\");\n/* harmony import */ var _model_TabSetNode__WEBPACK_IMPORTED_MODULE_13__ = __webpack_require__(/*! ../model/TabSetNode */ \"./src/model/TabSetNode.ts\");\n/* harmony import */ var _BorderTab__WEBPACK_IMPORTED_MODULE_14__ = __webpack_require__(/*! ./BorderTab */ \"./src/view/BorderTab.tsx\");\n/* harmony import */ var _BorderTabSet__WEBPACK_IMPORTED_MODULE_15__ = __webpack_require__(/*! ./BorderTabSet */ \"./src/view/BorderTabSet.tsx\");\n/* harmony import */ var _DragContainer__WEBPACK_IMPORTED_MODULE_16__ = __webpack_require__(/*! ./DragContainer */ \"./src/view/DragContainer.tsx\");\n/* harmony import */ var _ErrorBoundary__WEBPACK_IMPORTED_MODULE_17__ = __webpack_require__(/*! ./ErrorBoundary */ \"./src/view/ErrorBoundary.tsx\");\n/* harmony import */ var _PopoutWindow__WEBPACK_IMPORTED_MODULE_18__ = __webpack_require__(/*! ./PopoutWindow */ \"./src/view/PopoutWindow.tsx\");\n/* harmony import */ var _Icons__WEBPACK_IMPORTED_MODULE_19__ = __webpack_require__(/*! ./Icons */ \"./src/view/Icons.tsx\");\n/* harmony import */ var _Overlay__WEBPACK_IMPORTED_MODULE_20__ = __webpack_require__(/*! ./Overlay */ \"./src/view/Overlay.tsx\");\n/* harmony import */ var _Row__WEBPACK_IMPORTED_MODULE_21__ = __webpack_require__(/*! ./Row */ \"./src/view/Row.tsx\");\n/* harmony import */ var _Tab__WEBPACK_IMPORTED_MODULE_22__ = __webpack_require__(/*! ./Tab */ \"./src/view/Tab.tsx\");\n/* harmony import */ var _Utils__WEBPACK_IMPORTED_MODULE_23__ = __webpack_require__(/*! ./Utils */ \"./src/view/Utils.tsx\");\n/* harmony import */ var _TabButtonStamp__WEBPACK_IMPORTED_MODULE_24__ = __webpack_require__(/*! ./TabButtonStamp */ \"./src/view/TabButtonStamp.tsx\");\n/* harmony import */ var _SizeTracker__WEBPACK_IMPORTED_MODULE_25__ = __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/**\n * A React component that hosts a multi-tabbed layout\n */\nclass Layout extends react__WEBPACK_IMPORTED_MODULE_1__.Component {\n    /** @internal */\n    constructor(props) {\n        super(props);\n        this.selfRef = react__WEBPACK_IMPORTED_MODULE_1__.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 ((0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(LayoutInternal, Object.assign({ ref: this.selfRef }, this.props, { renderRevision: this.revision++ })));\n    }\n}\n/** @internal */\nclass LayoutInternal extends react__WEBPACK_IMPORTED_MODULE_1__.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_11__.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_9__.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_2__.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_13__.TabSetNode) {\n                let rendered = false;\n                let content = this.i18nName(_I18nLabel__WEBPACK_IMPORTED_MODULE_5__.I18nLabel.Move_Tabset);\n                if (node.getChildren().length > 0) {\n                    content = this.i18nName(_I18nLabel__WEBPACK_IMPORTED_MODULE_5__.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_10__.BorderNode && parentNode.getOrientation() === _Orientation__WEBPACK_IMPORTED_MODULE_6__.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 = (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_TabButtonStamp__WEBPACK_IMPORTED_MODULE_24__.TabButtonStamp, { layout: this, node: node }, node.getId());\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_23__.isSafari)()) { // safari doesnt render the offscreen tabstamps\n                        this.setDragComponent(event, (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_TabButtonStamp__WEBPACK_IMPORTED_MODULE_24__.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_12__.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_11__.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_8__.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_7__.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_11__.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_9__.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_9__.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_1__.createRef();\n        this.moveablesRef = react__WEBPACK_IMPORTED_MODULE_1__.createRef();\n        this.mainRef = react__WEBPACK_IMPORTED_MODULE_1__.createRef();\n        this.findBorderBarSizeRef = react__WEBPACK_IMPORTED_MODULE_1__.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_11__.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_7__.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_4__.DockLocation.CENTER\n        };\n        this.isMainWindow = this.windowId === _model_Model__WEBPACK_IMPORTED_MODULE_11__.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_23__.copyInlineStyles)(sourceElement, targetElement);\n            this.styleObserver = new MutationObserver(() => {\n                const changed = (0,_Utils__WEBPACK_IMPORTED_MODULE_23__.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 ((0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)(\"div\", { ref: this.selfRef, className: this.getClassName(_Types__WEBPACK_IMPORTED_MODULE_8__.CLASSES.FLEXLAYOUT__LAYOUT), children: [(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(\"div\", { ref: this.moveablesRef, className: this.getClassName(_Types__WEBPACK_IMPORTED_MODULE_8__.CLASSES.FLEXLAYOUT__LAYOUT_MOVEABLES) }, \"__moveables__\"), 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 = (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(\"div\", { className: this.getClassName(_Types__WEBPACK_IMPORTED_MODULE_8__.CLASSES.FLEXLAYOUT__LAYOUT_TAB_STAMPS), children: this.renderTabStamps() }, \"__tabStamps__\");\n        }\n        return ((0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)(\"div\", { ref: this.selfRef, className: this.getClassName(_Types__WEBPACK_IMPORTED_MODULE_8__.CLASSES.FLEXLAYOUT__LAYOUT), onDragEnter: this.onDragEnterRaw, onDragLeave: this.onDragLeaveRaw, onDragOver: this.onDragOver, onDrop: this.onDrop, children: [(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(\"div\", { ref: this.moveablesRef, className: this.getClassName(_Types__WEBPACK_IMPORTED_MODULE_8__.CLASSES.FLEXLAYOUT__LAYOUT_MOVEABLES) }, \"__moveables__\"), metricElements, (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_Overlay__WEBPACK_IMPORTED_MODULE_20__.Overlay, { layout: this, show: this.state.showOverlay }, \"__overlay__\"), outer, reorderedTabs, reorderedTabMoveables, tabStamps, this.state.portal, floatingWindows] }));\n    }\n    renderBorders(inner) {\n        const classMain = this.getClassName(_Types__WEBPACK_IMPORTED_MODULE_8__.CLASSES.FLEXLAYOUT__LAYOUT_MAIN);\n        const borders = this.props.model.getBorderSet().getBorderMap();\n        if (this.isMainWindow && borders.size > 0) {\n            inner = ((0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(\"div\", { className: classMain, ref: this.mainRef, children: inner }));\n            const borderSetComponents = new Map();\n            const borderSetContentComponents = new Map();\n            for (const [_, location] of _DockLocation__WEBPACK_IMPORTED_MODULE_4__.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, (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_BorderTabSet__WEBPACK_IMPORTED_MODULE_15__.BorderTabSet, { layout: this, border: border, size: this.state.calculatedBorderBarSize }));\n                    borderSetContentComponents.set(location, (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_BorderTab__WEBPACK_IMPORTED_MODULE_14__.BorderTab, { layout: this, border: border, show: border.getSelected() !== -1 }));\n                }\n            }\n            const classBorderOuter = this.getClassName(_Types__WEBPACK_IMPORTED_MODULE_8__.CLASSES.FLEXLAYOUT__LAYOUT_BORDER_CONTAINER);\n            const classBorderInner = this.getClassName(_Types__WEBPACK_IMPORTED_MODULE_8__.CLASSES.FLEXLAYOUT__LAYOUT_BORDER_CONTAINER_INNER);\n            if (this.props.model.getBorderSet().getLayoutHorizontal()) {\n                const innerWithBorderTabs = ((0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)(\"div\", { className: classBorderInner, style: { flexDirection: \"column\" }, children: [borderSetContentComponents.get(_DockLocation__WEBPACK_IMPORTED_MODULE_4__.DockLocation.TOP), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)(\"div\", { className: classBorderInner, style: { flexDirection: \"row\" }, children: [borderSetContentComponents.get(_DockLocation__WEBPACK_IMPORTED_MODULE_4__.DockLocation.LEFT), inner, borderSetContentComponents.get(_DockLocation__WEBPACK_IMPORTED_MODULE_4__.DockLocation.RIGHT)] }), borderSetContentComponents.get(_DockLocation__WEBPACK_IMPORTED_MODULE_4__.DockLocation.BOTTOM)] }));\n                return ((0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)(\"div\", { className: classBorderOuter, style: { flexDirection: \"column\" }, children: [borderSetComponents.get(_DockLocation__WEBPACK_IMPORTED_MODULE_4__.DockLocation.TOP), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)(\"div\", { className: classBorderInner, style: { flexDirection: \"row\" }, children: [borderSetComponents.get(_DockLocation__WEBPACK_IMPORTED_MODULE_4__.DockLocation.LEFT), innerWithBorderTabs, borderSetComponents.get(_DockLocation__WEBPACK_IMPORTED_MODULE_4__.DockLocation.RIGHT)] }), borderSetComponents.get(_DockLocation__WEBPACK_IMPORTED_MODULE_4__.DockLocation.BOTTOM)] }));\n            }\n            else {\n                const innerWithBorderTabs = ((0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)(\"div\", { className: classBorderInner, style: { flexDirection: \"row\" }, children: [borderSetContentComponents.get(_DockLocation__WEBPACK_IMPORTED_MODULE_4__.DockLocation.LEFT), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)(\"div\", { className: classBorderInner, style: { flexDirection: \"column\" }, children: [borderSetContentComponents.get(_DockLocation__WEBPACK_IMPORTED_MODULE_4__.DockLocation.TOP), inner, borderSetContentComponents.get(_DockLocation__WEBPACK_IMPORTED_MODULE_4__.DockLocation.BOTTOM)] }), borderSetContentComponents.get(_DockLocation__WEBPACK_IMPORTED_MODULE_4__.DockLocation.RIGHT)] }));\n                return ((0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)(\"div\", { className: classBorderOuter, style: { flexDirection: \"row\" }, children: [borderSetComponents.get(_DockLocation__WEBPACK_IMPORTED_MODULE_4__.DockLocation.LEFT), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)(\"div\", { className: classBorderInner, style: { flexDirection: \"column\" }, children: [borderSetComponents.get(_DockLocation__WEBPACK_IMPORTED_MODULE_4__.DockLocation.TOP), innerWithBorderTabs, borderSetComponents.get(_DockLocation__WEBPACK_IMPORTED_MODULE_4__.DockLocation.BOTTOM)] }), borderSetComponents.get(_DockLocation__WEBPACK_IMPORTED_MODULE_4__.DockLocation.RIGHT)] }));\n            }\n        }\n        else { // no borders\n            return ((0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(\"div\", { className: classMain, ref: this.mainRef, style: { position: \"absolute\", top: 0, left: 0, bottom: 0, right: 0, display: \"flex\" }, children: inner }));\n        }\n    }\n    renderLayout() {\n        return ((0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)(react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.Fragment, { children: [(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_Row__WEBPACK_IMPORTED_MODULE_21__.Row, { layout: this, node: this.props.model.getRoot(this.windowId) }, \"__row__\"), 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_8__.CLASSES.FLEXLAYOUT__EDGE_RECT);\n            const radius = 50;\n            edges.push((0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(\"div\", { style: { top: 0, left: r.width / 2 - offset, width: length, height: width, borderBottomLeftRadius: radius, borderBottomRightRadius: radius }, className: className + \" \" + this.getClassName(_Types__WEBPACK_IMPORTED_MODULE_8__.CLASSES.FLEXLAYOUT__EDGE_RECT_TOP), children: (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(\"div\", { style: { transform: \"rotate(180deg)\" }, children: arrowIcon }) }, \"North\"));\n            edges.push((0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(\"div\", { style: { top: r.height / 2 - offset, left: 0, width: width, height: length, borderTopRightRadius: radius, borderBottomRightRadius: radius }, className: className + \" \" + this.getClassName(_Types__WEBPACK_IMPORTED_MODULE_8__.CLASSES.FLEXLAYOUT__EDGE_RECT_LEFT), children: (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(\"div\", { style: { transform: \"rotate(90deg)\" }, children: arrowIcon }) }, \"West\"));\n            edges.push((0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(\"div\", { 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_8__.CLASSES.FLEXLAYOUT__EDGE_RECT_BOTTOM), children: (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(\"div\", { children: arrowIcon }) }, \"South\"));\n            edges.push((0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(\"div\", { 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_8__.CLASSES.FLEXLAYOUT__EDGE_RECT_RIGHT), children: (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(\"div\", { style: { transform: \"rotate(-90deg)\" }, children: arrowIcon }) }, \"East\"));\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_11__.Model.MAIN_WINDOW_ID) {\n                    floatingWindows.push((0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_PopoutWindow__WEBPACK_IMPORTED_MODULE_18__.PopoutWindow, { layout: this, title: this.popoutWindowName + \" \" + i, layoutWindow: layoutWindow, url: this.popoutURL + \"?id=\" + windowId, onSetWindow: this.onSetWindow, onCloseWindow: this.onCloseWindow, children: (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(\"div\", { className: this.props.popoutClassName, children: (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(LayoutInternal, Object.assign({}, this.props, { windowId: windowId, mainLayout: this })) }) }, windowId));\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_12__.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_2__.createPortal)((0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_SizeTracker__WEBPACK_IMPORTED_MODULE_25__.SizeTracker, { rect: rect, selected: child.isSelected(), forceRevision: this.state.forceRevision, tabsRevision: this.props.renderRevision, children: (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_ErrorBoundary__WEBPACK_IMPORTED_MODULE_17__.ErrorBoundary, { message: this.i18nName(_I18nLabel__WEBPACK_IMPORTED_MODULE_5__.I18nLabel.Error_rendering_component), children: this.props.factory(child) }) }, key), 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_12__.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((0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_DragContainer__WEBPACK_IMPORTED_MODULE_16__.DragContainer, { layout: this, node: child }, child.getId()));\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_12__.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                    (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_Tab__WEBPACK_IMPORTED_MODULE_22__.Tab, { layout: this, path: path, node: child, selected: selected }, child.getId())\n                    // </SizeTracker>\n                    ));\n                }\n            }\n        });\n        return tabs;\n    }\n    renderMetricsElements() {\n        return ((0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(\"div\", { ref: this.findBorderBarSizeRef, className: this.getClassName(_Types__WEBPACK_IMPORTED_MODULE_8__.CLASSES.FLEXLAYOUT__BORDER_SIZER), children: \"FindBorderBarSize\" }, \"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_4__.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_4__.DockLocation.CENTER;\n        if (!overEdge) {\n            if (x <= r.x + margin) {\n                location = _DockLocation__WEBPACK_IMPORTED_MODULE_4__.DockLocation.LEFT;\n            }\n            else if (x >= r.getRight() - margin) {\n                location = _DockLocation__WEBPACK_IMPORTED_MODULE_4__.DockLocation.RIGHT;\n            }\n            else if (y <= r.y + margin) {\n                location = _DockLocation__WEBPACK_IMPORTED_MODULE_4__.DockLocation.TOP;\n            }\n            else if (y >= r.getBottom() - margin) {\n                location = _DockLocation__WEBPACK_IMPORTED_MODULE_4__.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_12__.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_7__.Rect.getBoundingClientRect(div).relativeTo(layoutRect);\n        }\n        return _Rect__WEBPACK_IMPORTED_MODULE_7__.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_8__.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_7__.Rect.fromDomRect(this.selfRef.current.getBoundingClientRect());\n        }\n        else {\n            return _Rect__WEBPACK_IMPORTED_MODULE_7__.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_9__.Actions.addNode(json, tabsetId, _DockLocation__WEBPACK_IMPORTED_MODULE_4__.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_9__.Actions.addNode(json, tabsetNode.getId(), _DockLocation__WEBPACK_IMPORTED_MODULE_4__.DockLocation.CENTER, -1));\n            return node;\n        }\n        return undefined;\n    }\n    maximize(tabsetNode) {\n        this.doAction(_model_Actions__WEBPACK_IMPORTED_MODULE_9__.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_23__.enablePointerOnIFrames)(!show, this.currentDocument);\n    }\n    // *************************** Start Drag Drop *************************************\n    addTabWithDragAndDrop(event, json, onDrop) {\n        const tempNode = _model_TabNode__WEBPACK_IMPORTED_MODULE_12__.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 = ((0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(\"div\", { style: { position: \"unset\" }, className: this.getClassName(_Types__WEBPACK_IMPORTED_MODULE_8__.CLASSES.FLEXLAYOUT__LAYOUT) + \" \" + this.getClassName(_Types__WEBPACK_IMPORTED_MODULE_8__.CLASSES.FLEXLAYOUT__DRAG_RECT), children: 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_3__.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_11__.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.12\";\nconst defaultIcons = {\n    close: (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_Icons__WEBPACK_IMPORTED_MODULE_19__.CloseIcon, {}),\n    closeTabset: (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_Icons__WEBPACK_IMPORTED_MODULE_19__.CloseIcon, {}),\n    popout: (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_Icons__WEBPACK_IMPORTED_MODULE_19__.PopoutIcon, {}),\n    maximize: (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_Icons__WEBPACK_IMPORTED_MODULE_19__.MaximizeIcon, {}),\n    restore: (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_Icons__WEBPACK_IMPORTED_MODULE_19__.RestoreIcon, {}),\n    more: (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_Icons__WEBPACK_IMPORTED_MODULE_19__.OverflowIcon, {}),\n    edgeArrow: (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_Icons__WEBPACK_IMPORTED_MODULE_19__.EdgeIcon, {}),\n    activeTabset: (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_Icons__WEBPACK_IMPORTED_MODULE_19__.AsterickIcon, {})\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_23__.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?");
 
 /***/ }),