flexlayout-react 0.8.5 → 0.8.6

package/ChangeLog.txt

@@ -1,3 +1,9 @@
+0.8.6
+Restructured scss files to remove use of deprecated @import rule
+Added combined.css containing all themes.
+Updated demo to use combined.css for simple theme switching using class names
+Added option in demo to show the layout structure
+
 0.8.5
 Changed the mini scrollbar to only show when tabs are hovered over 
 

package/README.md

@@ -30,7 +30,7 @@ Features:
 *   popout tabs into new browser windows
 *	submodels, allow layouts inside layouts
 *	tab renaming (double click tab text to rename)
-*	theming - light, underline, gray, round and dark
+*	theming - light, dark, underline, gray, rounded and combined
 *	works on mobile devices (iPad, Android)
 *   add tabs using drag, add to active tab set, add to tab set by id
 *	tab and tab set attributes: enableTabStrip, enableDock, enableDrop...
@@ -52,7 +52,7 @@ Import FlexLayout in your modules:
 import {Layout, Model} from 'flexlayout-react';
 ```
 
-Include the light, underline, gray or dark theme by either:
+Include the light, dark, underline, gray, rounded or combined theme by either:
 
 Adding an additional import:
 
@@ -66,6 +66,9 @@ or by adding the css to your html:
 <link rel="stylesheet" href="node_modules/flexlayout-react/style/light.css" />
 ```
 
+[How to change the theme dynamically in code](#dynamically-changing-the-theme)
+
+
 ## Usage
 
 The `<Layout>` component renders the tab sets and splitters, it takes the following props:
@@ -173,6 +176,10 @@ The layout element is built up using 3 types of 'node':
 
 The layout structure is defined with rows within rows that contain tabsets that themselves contain tabs.
 
+Within the demo app you can show the layout structure by ticking the 'Show layout' checkbox, rows are shown in blue, tabsets in orange.
+
+![FlexLayout Demo Showing Layout](Screenshot_layout.png?raw=true "Demo showing layout")
+
 The optional borders element is made up of border nodes
 
 * border - borders contain a list of tabs and the index of the selected tab, they can only be used in the borders
@@ -196,6 +203,26 @@ tabs or drag and drop).
  global: {tabSetEnableTabStrip:false},
 ```
 
+## Dynamically Changing the Theme
+
+The 'combined.css' theme contains all the other themes and can be used for theme switching.
+
+When using combined.css, add a className (of the form "flexlayout__theme_[theme name]") to the div containing the `<Layout>` to select the applied theme.
+
+For example: 
+```
+    <div ref={containerRef} className="flexlayout__theme_light">
+        <Layout model={model} factory={factory} />
+    </div>
+```
+
+Change the theme in code by changing the className on the containing div.
+
+For example:
+```
+    containerRef.current!.className = "flexlayout__theme_dark"
+```
+
 ## Model Actions
 
 Once the model json has been loaded all changes to the model are applied through actions.

package/declarations/Types.d.ts

@@ -30,7 +30,6 @@ export declare enum CLASSES {
     FLEXLAYOUT__ERROR_BOUNDARY_CONTAINER = "flexlayout__error_boundary_container",
     FLEXLAYOUT__ERROR_BOUNDARY_CONTENT = "flexlayout__error_boundary_content",
     FLEXLAYOUT__FLOATING_WINDOW_CONTENT = "flexlayout__floating_window_content",
-    FLEXLAYOUT__FLOATING_WINDOW_TAB = "flexlayout__floating_window_tab",
     FLEXLAYOUT__LAYOUT = "flexlayout__layout",
     FLEXLAYOUT__LAYOUT_MOVEABLES = "flexlayout__layout_moveables",
     FLEXLAYOUT__LAYOUT_OVERLAY = "flexlayout__layout_overlay",
@@ -56,11 +55,9 @@ export declare enum CLASSES {
     FLEXLAYOUT__TABSET = "flexlayout__tabset",
     FLEXLAYOUT__TABSET_CONTAINER = "flexlayout__tabset_container",
     FLEXLAYOUT__TABSET_HEADER = "flexlayout__tabset_header",
-    FLEXLAYOUT__TABSET_HEADER_SIZER = "flexlayout__tabset_header_sizer",
     FLEXLAYOUT__TABSET_HEADER_CONTENT = "flexlayout__tabset_header_content",
     FLEXLAYOUT__TABSET_MAXIMIZED = "flexlayout__tabset-maximized",
     FLEXLAYOUT__TABSET_SELECTED = "flexlayout__tabset-selected",
-    FLEXLAYOUT__TABSET_SIZER = "flexlayout__tabset_sizer",
     FLEXLAYOUT__TABSET_TAB_DIVIDER = "flexlayout__tabset_tab_divider",
     FLEXLAYOUT__TABSET_CONTENT = "flexlayout__tabset_content",
     FLEXLAYOUT__TABSET_TABBAR_INNER = "flexlayout__tabset_tabbar_inner",
@@ -80,8 +77,6 @@ export declare enum CLASSES {
     FLEXLAYOUT__TAB_BUTTON_TEXTBOX = "flexlayout__tab_button_textbox",
     FLEXLAYOUT__TAB_BUTTON_TRAILING = "flexlayout__tab_button_trailing",
     FLEXLAYOUT__TAB_BUTTON_STAMP = "flexlayout__tab_button_stamp",
-    FLEXLAYOUT__TAB_FLOATING = "flexlayout__tab_floating",
-    FLEXLAYOUT__TAB_FLOATING_INNER = "flexlayout__tab_floating_inner",
     FLEXLAYOUT__TAB_TOOLBAR = "flexlayout__tab_toolbar",
     FLEXLAYOUT__TAB_TOOLBAR_BUTTON = "flexlayout__tab_toolbar_button",
     FLEXLAYOUT__TAB_TOOLBAR_ICON = "flexlayout__tab_toolbar_icon",

package/declarations/view/Layout.d.ts

@@ -12,6 +12,8 @@ export interface ILayoutProps {
     model: Model;
     /** factory function for creating the tab components */
     factory: (node: TabNode) => React.ReactNode;
+    /** sets a top level class name on popout windows */
+    popoutClassName?: string;
     /** object mapping keys among close, maximize, restore, more, popout to React nodes to use in place of the default icons, can alternatively return functions for creating the React nodes */
     icons?: IIcons;
     /** function called whenever the layout generates an action to update the model (allows for intercepting actions before they are dispatched to the model, for example, asking the user to confirm a tab close.) Returning undefined from the function will halt the action, otherwise return the action to continue */
@@ -96,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.5";
+export declare const FlexLayoutVersion = "0.8.6";
 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

@@ -136,7 +136,7 @@ eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpac
   \**********************/
 /***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {
 
-eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpack_require__.d(__webpack_exports__, {\n/* harmony export */   CLASSES: () => (/* binding */ CLASSES)\n/* harmony export */ });\nvar CLASSES;\n(function (CLASSES) {\n    CLASSES[\"FLEXLAYOUT__BORDER\"] = \"flexlayout__border\";\n    CLASSES[\"FLEXLAYOUT__BORDER_\"] = \"flexlayout__border_\";\n    CLASSES[\"FLEXLAYOUT__BORDER_TAB_CONTENTS\"] = \"flexlayout__border_tab_contents\";\n    CLASSES[\"FLEXLAYOUT__BORDER_BUTTON\"] = \"flexlayout__border_button\";\n    CLASSES[\"FLEXLAYOUT__BORDER_BUTTON_\"] = \"flexlayout__border_button_\";\n    CLASSES[\"FLEXLAYOUT__BORDER_BUTTON_CONTENT\"] = \"flexlayout__border_button_content\";\n    CLASSES[\"FLEXLAYOUT__BORDER_BUTTON_LEADING\"] = \"flexlayout__border_button_leading\";\n    CLASSES[\"FLEXLAYOUT__BORDER_BUTTON_TRAILING\"] = \"flexlayout__border_button_trailing\";\n    CLASSES[\"FLEXLAYOUT__BORDER_BUTTON__SELECTED\"] = \"flexlayout__border_button--selected\";\n    CLASSES[\"FLEXLAYOUT__BORDER_BUTTON__UNSELECTED\"] = \"flexlayout__border_button--unselected\";\n    CLASSES[\"FLEXLAYOUT__BORDER_TOOLBAR_BUTTON_OVERFLOW\"] = \"flexlayout__border_toolbar_button_overflow\";\n    CLASSES[\"FLEXLAYOUT__BORDER_TOOLBAR_BUTTON_OVERFLOW_\"] = \"flexlayout__border_toolbar_button_overflow_\";\n    CLASSES[\"FLEXLAYOUT__BORDER_INNER\"] = \"flexlayout__border_inner\";\n    CLASSES[\"FLEXLAYOUT__BORDER_INNER_\"] = \"flexlayout__border_inner_\";\n    CLASSES[\"FLEXLAYOUT__BORDER_INNER_TAB_CONTAINER\"] = \"flexlayout__border_inner_tab_container\";\n    CLASSES[\"FLEXLAYOUT__BORDER_INNER_TAB_CONTAINER_\"] = \"flexlayout__border_inner_tab_container_\";\n    CLASSES[\"FLEXLAYOUT__BORDER_TAB_DIVIDER\"] = \"flexlayout__border_tab_divider\";\n    CLASSES[\"FLEXLAYOUT__BORDER_SIZER\"] = \"flexlayout__border_sizer\";\n    CLASSES[\"FLEXLAYOUT__BORDER_TOOLBAR\"] = \"flexlayout__border_toolbar\";\n    CLASSES[\"FLEXLAYOUT__BORDER_TOOLBAR_\"] = \"flexlayout__border_toolbar_\";\n    CLASSES[\"FLEXLAYOUT__BORDER_TOOLBAR_BUTTON\"] = \"flexlayout__border_toolbar_button\";\n    CLASSES[\"FLEXLAYOUT__BORDER_TOOLBAR_BUTTON_FLOAT\"] = \"flexlayout__border_toolbar_button-float\";\n    CLASSES[\"FLEXLAYOUT__DRAG_RECT\"] = \"flexlayout__drag_rect\";\n    CLASSES[\"FLEXLAYOUT__EDGE_RECT\"] = \"flexlayout__edge_rect\";\n    CLASSES[\"FLEXLAYOUT__EDGE_RECT_TOP\"] = \"flexlayout__edge_rect_top\";\n    CLASSES[\"FLEXLAYOUT__EDGE_RECT_LEFT\"] = \"flexlayout__edge_rect_left\";\n    CLASSES[\"FLEXLAYOUT__EDGE_RECT_BOTTOM\"] = \"flexlayout__edge_rect_bottom\";\n    CLASSES[\"FLEXLAYOUT__EDGE_RECT_RIGHT\"] = \"flexlayout__edge_rect_right\";\n    CLASSES[\"FLEXLAYOUT__ERROR_BOUNDARY_CONTAINER\"] = \"flexlayout__error_boundary_container\";\n    CLASSES[\"FLEXLAYOUT__ERROR_BOUNDARY_CONTENT\"] = \"flexlayout__error_boundary_content\";\n    CLASSES[\"FLEXLAYOUT__FLOATING_WINDOW_CONTENT\"] = \"flexlayout__floating_window_content\";\n    CLASSES[\"FLEXLAYOUT__FLOATING_WINDOW_TAB\"] = \"flexlayout__floating_window_tab\";\n    CLASSES[\"FLEXLAYOUT__LAYOUT\"] = \"flexlayout__layout\";\n    CLASSES[\"FLEXLAYOUT__LAYOUT_MOVEABLES\"] = \"flexlayout__layout_moveables\";\n    CLASSES[\"FLEXLAYOUT__LAYOUT_OVERLAY\"] = \"flexlayout__layout_overlay\";\n    CLASSES[\"FLEXLAYOUT__LAYOUT_TAB_STAMPS\"] = \"flexlayout__layout_tab_stamps\";\n    CLASSES[\"FLEXLAYOUT__LAYOUT_MAIN\"] = \"flexlayout__layout_main\";\n    CLASSES[\"FLEXLAYOUT__LAYOUT_BORDER_CONTAINER\"] = \"flexlayout__layout_border_container\";\n    CLASSES[\"FLEXLAYOUT__LAYOUT_BORDER_CONTAINER_INNER\"] = \"flexlayout__layout_border_container_inner\";\n    CLASSES[\"FLEXLAYOUT__OUTLINE_RECT\"] = \"flexlayout__outline_rect\";\n    CLASSES[\"FLEXLAYOUT__OUTLINE_RECT_EDGE\"] = \"flexlayout__outline_rect_edge\";\n    CLASSES[\"FLEXLAYOUT__SPLITTER\"] = \"flexlayout__splitter\";\n    CLASSES[\"FLEXLAYOUT__SPLITTER_EXTRA\"] = \"flexlayout__splitter_extra\";\n    CLASSES[\"FLEXLAYOUT__SPLITTER_\"] = \"flexlayout__splitter_\";\n    CLASSES[\"FLEXLAYOUT__SPLITTER_BORDER\"] = \"flexlayout__splitter_border\";\n    CLASSES[\"FLEXLAYOUT__SPLITTER_DRAG\"] = \"flexlayout__splitter_drag\";\n    CLASSES[\"FLEXLAYOUT__SPLITTER_HANDLE\"] = \"flexlayout__splitter_handle\";\n    CLASSES[\"FLEXLAYOUT__SPLITTER_HANDLE_HORZ\"] = \"flexlayout__splitter_handle_horz\";\n    CLASSES[\"FLEXLAYOUT__SPLITTER_HANDLE_VERT\"] = \"flexlayout__splitter_handle_vert\";\n    CLASSES[\"FLEXLAYOUT__ROW\"] = \"flexlayout__row\";\n    CLASSES[\"FLEXLAYOUT__TAB\"] = \"flexlayout__tab\";\n    CLASSES[\"FLEXLAYOUT__TAB_POSITION\"] = \"flexlayout__tab_position\";\n    CLASSES[\"FLEXLAYOUT__TAB_MOVEABLE\"] = \"flexlayout__tab_moveable\";\n    CLASSES[\"FLEXLAYOUT__TAB_OVERLAY\"] = \"flexlayout__tab_overlay\";\n    CLASSES[\"FLEXLAYOUT__TABSET\"] = \"flexlayout__tabset\";\n    CLASSES[\"FLEXLAYOUT__TABSET_CONTAINER\"] = \"flexlayout__tabset_container\";\n    CLASSES[\"FLEXLAYOUT__TABSET_HEADER\"] = \"flexlayout__tabset_header\";\n    CLASSES[\"FLEXLAYOUT__TABSET_HEADER_SIZER\"] = \"flexlayout__tabset_header_sizer\";\n    CLASSES[\"FLEXLAYOUT__TABSET_HEADER_CONTENT\"] = \"flexlayout__tabset_header_content\";\n    CLASSES[\"FLEXLAYOUT__TABSET_MAXIMIZED\"] = \"flexlayout__tabset-maximized\";\n    CLASSES[\"FLEXLAYOUT__TABSET_SELECTED\"] = \"flexlayout__tabset-selected\";\n    CLASSES[\"FLEXLAYOUT__TABSET_SIZER\"] = \"flexlayout__tabset_sizer\";\n    CLASSES[\"FLEXLAYOUT__TABSET_TAB_DIVIDER\"] = \"flexlayout__tabset_tab_divider\";\n    CLASSES[\"FLEXLAYOUT__TABSET_CONTENT\"] = \"flexlayout__tabset_content\";\n    CLASSES[\"FLEXLAYOUT__TABSET_TABBAR_INNER\"] = \"flexlayout__tabset_tabbar_inner\";\n    CLASSES[\"FLEXLAYOUT__TABSET_TABBAR_INNER_\"] = \"flexlayout__tabset_tabbar_inner_\";\n    CLASSES[\"FLEXLAYOUT__TABSET_TABBAR_INNER_TAB_CONTAINER\"] = \"flexlayout__tabset_tabbar_inner_tab_container\";\n    CLASSES[\"FLEXLAYOUT__TABSET_TABBAR_INNER_TAB_CONTAINER_\"] = \"flexlayout__tabset_tabbar_inner_tab_container_\";\n    CLASSES[\"FLEXLAYOUT__TABSET_TABBAR_OUTER\"] = \"flexlayout__tabset_tabbar_outer\";\n    CLASSES[\"FLEXLAYOUT__TABSET_TABBAR_OUTER_\"] = \"flexlayout__tabset_tabbar_outer_\";\n    CLASSES[\"FLEXLAYOUT__TAB_BORDER\"] = \"flexlayout__tab_border\";\n    CLASSES[\"FLEXLAYOUT__TAB_BORDER_\"] = \"flexlayout__tab_border_\";\n    CLASSES[\"FLEXLAYOUT__TAB_BUTTON\"] = \"flexlayout__tab_button\";\n    CLASSES[\"FLEXLAYOUT__TAB_BUTTON_STRETCH\"] = \"flexlayout__tab_button_stretch\";\n    CLASSES[\"FLEXLAYOUT__TAB_BUTTON_CONTENT\"] = \"flexlayout__tab_button_content\";\n    CLASSES[\"FLEXLAYOUT__TAB_BUTTON_LEADING\"] = \"flexlayout__tab_button_leading\";\n    CLASSES[\"FLEXLAYOUT__TAB_BUTTON_OVERFLOW\"] = \"flexlayout__tab_button_overflow\";\n    CLASSES[\"FLEXLAYOUT__TAB_BUTTON_OVERFLOW_COUNT\"] = \"flexlayout__tab_button_overflow_count\";\n    CLASSES[\"FLEXLAYOUT__TAB_BUTTON_TEXTBOX\"] = \"flexlayout__tab_button_textbox\";\n    CLASSES[\"FLEXLAYOUT__TAB_BUTTON_TRAILING\"] = \"flexlayout__tab_button_trailing\";\n    CLASSES[\"FLEXLAYOUT__TAB_BUTTON_STAMP\"] = \"flexlayout__tab_button_stamp\";\n    CLASSES[\"FLEXLAYOUT__TAB_FLOATING\"] = \"flexlayout__tab_floating\";\n    CLASSES[\"FLEXLAYOUT__TAB_FLOATING_INNER\"] = \"flexlayout__tab_floating_inner\";\n    CLASSES[\"FLEXLAYOUT__TAB_TOOLBAR\"] = \"flexlayout__tab_toolbar\";\n    CLASSES[\"FLEXLAYOUT__TAB_TOOLBAR_BUTTON\"] = \"flexlayout__tab_toolbar_button\";\n    CLASSES[\"FLEXLAYOUT__TAB_TOOLBAR_ICON\"] = \"flexlayout__tab_toolbar_icon\";\n    CLASSES[\"FLEXLAYOUT__TAB_TOOLBAR_BUTTON_\"] = \"flexlayout__tab_toolbar_button-\";\n    CLASSES[\"FLEXLAYOUT__TAB_TOOLBAR_BUTTON_FLOAT\"] = \"flexlayout__tab_toolbar_button-float\";\n    CLASSES[\"FLEXLAYOUT__TAB_TOOLBAR_STICKY_BUTTONS_CONTAINER\"] = \"flexlayout__tab_toolbar_sticky_buttons_container\";\n    CLASSES[\"FLEXLAYOUT__TAB_TOOLBAR_BUTTON_CLOSE\"] = \"flexlayout__tab_toolbar_button-close\";\n    CLASSES[\"FLEXLAYOUT__POPUP_MENU_CONTAINER\"] = \"flexlayout__popup_menu_container\";\n    CLASSES[\"FLEXLAYOUT__POPUP_MENU_ITEM\"] = \"flexlayout__popup_menu_item\";\n    CLASSES[\"FLEXLAYOUT__POPUP_MENU_ITEM__SELECTED\"] = \"flexlayout__popup_menu_item--selected\";\n    CLASSES[\"FLEXLAYOUT__POPUP_MENU\"] = \"flexlayout__popup_menu\";\n    CLASSES[\"FLEXLAYOUT__MINI_SCROLLBAR\"] = \"flexlayout__mini_scrollbar\";\n    CLASSES[\"FLEXLAYOUT__MINI_SCROLLBAR_CONTAINER\"] = \"flexlayout__mini_scrollbar_container\";\n})(CLASSES || (CLASSES = {}));\n\n\n//# sourceURL=webpack://FlexLayout/./src/Types.ts?");
+eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpack_require__.d(__webpack_exports__, {\n/* harmony export */   CLASSES: () => (/* binding */ CLASSES)\n/* harmony export */ });\nvar CLASSES;\n(function (CLASSES) {\n    CLASSES[\"FLEXLAYOUT__BORDER\"] = \"flexlayout__border\";\n    CLASSES[\"FLEXLAYOUT__BORDER_\"] = \"flexlayout__border_\";\n    CLASSES[\"FLEXLAYOUT__BORDER_TAB_CONTENTS\"] = \"flexlayout__border_tab_contents\";\n    CLASSES[\"FLEXLAYOUT__BORDER_BUTTON\"] = \"flexlayout__border_button\";\n    CLASSES[\"FLEXLAYOUT__BORDER_BUTTON_\"] = \"flexlayout__border_button_\";\n    CLASSES[\"FLEXLAYOUT__BORDER_BUTTON_CONTENT\"] = \"flexlayout__border_button_content\";\n    CLASSES[\"FLEXLAYOUT__BORDER_BUTTON_LEADING\"] = \"flexlayout__border_button_leading\";\n    CLASSES[\"FLEXLAYOUT__BORDER_BUTTON_TRAILING\"] = \"flexlayout__border_button_trailing\";\n    CLASSES[\"FLEXLAYOUT__BORDER_BUTTON__SELECTED\"] = \"flexlayout__border_button--selected\";\n    CLASSES[\"FLEXLAYOUT__BORDER_BUTTON__UNSELECTED\"] = \"flexlayout__border_button--unselected\";\n    CLASSES[\"FLEXLAYOUT__BORDER_TOOLBAR_BUTTON_OVERFLOW\"] = \"flexlayout__border_toolbar_button_overflow\";\n    CLASSES[\"FLEXLAYOUT__BORDER_TOOLBAR_BUTTON_OVERFLOW_\"] = \"flexlayout__border_toolbar_button_overflow_\";\n    CLASSES[\"FLEXLAYOUT__BORDER_INNER\"] = \"flexlayout__border_inner\";\n    CLASSES[\"FLEXLAYOUT__BORDER_INNER_\"] = \"flexlayout__border_inner_\";\n    CLASSES[\"FLEXLAYOUT__BORDER_INNER_TAB_CONTAINER\"] = \"flexlayout__border_inner_tab_container\";\n    CLASSES[\"FLEXLAYOUT__BORDER_INNER_TAB_CONTAINER_\"] = \"flexlayout__border_inner_tab_container_\";\n    CLASSES[\"FLEXLAYOUT__BORDER_TAB_DIVIDER\"] = \"flexlayout__border_tab_divider\";\n    CLASSES[\"FLEXLAYOUT__BORDER_SIZER\"] = \"flexlayout__border_sizer\";\n    CLASSES[\"FLEXLAYOUT__BORDER_TOOLBAR\"] = \"flexlayout__border_toolbar\";\n    CLASSES[\"FLEXLAYOUT__BORDER_TOOLBAR_\"] = \"flexlayout__border_toolbar_\";\n    CLASSES[\"FLEXLAYOUT__BORDER_TOOLBAR_BUTTON\"] = \"flexlayout__border_toolbar_button\";\n    CLASSES[\"FLEXLAYOUT__BORDER_TOOLBAR_BUTTON_FLOAT\"] = \"flexlayout__border_toolbar_button-float\";\n    CLASSES[\"FLEXLAYOUT__DRAG_RECT\"] = \"flexlayout__drag_rect\";\n    CLASSES[\"FLEXLAYOUT__EDGE_RECT\"] = \"flexlayout__edge_rect\";\n    CLASSES[\"FLEXLAYOUT__EDGE_RECT_TOP\"] = \"flexlayout__edge_rect_top\";\n    CLASSES[\"FLEXLAYOUT__EDGE_RECT_LEFT\"] = \"flexlayout__edge_rect_left\";\n    CLASSES[\"FLEXLAYOUT__EDGE_RECT_BOTTOM\"] = \"flexlayout__edge_rect_bottom\";\n    CLASSES[\"FLEXLAYOUT__EDGE_RECT_RIGHT\"] = \"flexlayout__edge_rect_right\";\n    CLASSES[\"FLEXLAYOUT__ERROR_BOUNDARY_CONTAINER\"] = \"flexlayout__error_boundary_container\";\n    CLASSES[\"FLEXLAYOUT__ERROR_BOUNDARY_CONTENT\"] = \"flexlayout__error_boundary_content\";\n    CLASSES[\"FLEXLAYOUT__FLOATING_WINDOW_CONTENT\"] = \"flexlayout__floating_window_content\";\n    CLASSES[\"FLEXLAYOUT__LAYOUT\"] = \"flexlayout__layout\";\n    CLASSES[\"FLEXLAYOUT__LAYOUT_MOVEABLES\"] = \"flexlayout__layout_moveables\";\n    CLASSES[\"FLEXLAYOUT__LAYOUT_OVERLAY\"] = \"flexlayout__layout_overlay\";\n    CLASSES[\"FLEXLAYOUT__LAYOUT_TAB_STAMPS\"] = \"flexlayout__layout_tab_stamps\";\n    CLASSES[\"FLEXLAYOUT__LAYOUT_MAIN\"] = \"flexlayout__layout_main\";\n    CLASSES[\"FLEXLAYOUT__LAYOUT_BORDER_CONTAINER\"] = \"flexlayout__layout_border_container\";\n    CLASSES[\"FLEXLAYOUT__LAYOUT_BORDER_CONTAINER_INNER\"] = \"flexlayout__layout_border_container_inner\";\n    CLASSES[\"FLEXLAYOUT__OUTLINE_RECT\"] = \"flexlayout__outline_rect\";\n    CLASSES[\"FLEXLAYOUT__OUTLINE_RECT_EDGE\"] = \"flexlayout__outline_rect_edge\";\n    CLASSES[\"FLEXLAYOUT__SPLITTER\"] = \"flexlayout__splitter\";\n    CLASSES[\"FLEXLAYOUT__SPLITTER_EXTRA\"] = \"flexlayout__splitter_extra\";\n    CLASSES[\"FLEXLAYOUT__SPLITTER_\"] = \"flexlayout__splitter_\";\n    CLASSES[\"FLEXLAYOUT__SPLITTER_BORDER\"] = \"flexlayout__splitter_border\";\n    CLASSES[\"FLEXLAYOUT__SPLITTER_DRAG\"] = \"flexlayout__splitter_drag\";\n    CLASSES[\"FLEXLAYOUT__SPLITTER_HANDLE\"] = \"flexlayout__splitter_handle\";\n    CLASSES[\"FLEXLAYOUT__SPLITTER_HANDLE_HORZ\"] = \"flexlayout__splitter_handle_horz\";\n    CLASSES[\"FLEXLAYOUT__SPLITTER_HANDLE_VERT\"] = \"flexlayout__splitter_handle_vert\";\n    CLASSES[\"FLEXLAYOUT__ROW\"] = \"flexlayout__row\";\n    CLASSES[\"FLEXLAYOUT__TAB\"] = \"flexlayout__tab\";\n    CLASSES[\"FLEXLAYOUT__TAB_POSITION\"] = \"flexlayout__tab_position\";\n    CLASSES[\"FLEXLAYOUT__TAB_MOVEABLE\"] = \"flexlayout__tab_moveable\";\n    CLASSES[\"FLEXLAYOUT__TAB_OVERLAY\"] = \"flexlayout__tab_overlay\";\n    CLASSES[\"FLEXLAYOUT__TABSET\"] = \"flexlayout__tabset\";\n    CLASSES[\"FLEXLAYOUT__TABSET_CONTAINER\"] = \"flexlayout__tabset_container\";\n    CLASSES[\"FLEXLAYOUT__TABSET_HEADER\"] = \"flexlayout__tabset_header\";\n    CLASSES[\"FLEXLAYOUT__TABSET_HEADER_CONTENT\"] = \"flexlayout__tabset_header_content\";\n    CLASSES[\"FLEXLAYOUT__TABSET_MAXIMIZED\"] = \"flexlayout__tabset-maximized\";\n    CLASSES[\"FLEXLAYOUT__TABSET_SELECTED\"] = \"flexlayout__tabset-selected\";\n    CLASSES[\"FLEXLAYOUT__TABSET_TAB_DIVIDER\"] = \"flexlayout__tabset_tab_divider\";\n    CLASSES[\"FLEXLAYOUT__TABSET_CONTENT\"] = \"flexlayout__tabset_content\";\n    CLASSES[\"FLEXLAYOUT__TABSET_TABBAR_INNER\"] = \"flexlayout__tabset_tabbar_inner\";\n    CLASSES[\"FLEXLAYOUT__TABSET_TABBAR_INNER_\"] = \"flexlayout__tabset_tabbar_inner_\";\n    CLASSES[\"FLEXLAYOUT__TABSET_TABBAR_INNER_TAB_CONTAINER\"] = \"flexlayout__tabset_tabbar_inner_tab_container\";\n    CLASSES[\"FLEXLAYOUT__TABSET_TABBAR_INNER_TAB_CONTAINER_\"] = \"flexlayout__tabset_tabbar_inner_tab_container_\";\n    CLASSES[\"FLEXLAYOUT__TABSET_TABBAR_OUTER\"] = \"flexlayout__tabset_tabbar_outer\";\n    CLASSES[\"FLEXLAYOUT__TABSET_TABBAR_OUTER_\"] = \"flexlayout__tabset_tabbar_outer_\";\n    CLASSES[\"FLEXLAYOUT__TAB_BORDER\"] = \"flexlayout__tab_border\";\n    CLASSES[\"FLEXLAYOUT__TAB_BORDER_\"] = \"flexlayout__tab_border_\";\n    CLASSES[\"FLEXLAYOUT__TAB_BUTTON\"] = \"flexlayout__tab_button\";\n    CLASSES[\"FLEXLAYOUT__TAB_BUTTON_STRETCH\"] = \"flexlayout__tab_button_stretch\";\n    CLASSES[\"FLEXLAYOUT__TAB_BUTTON_CONTENT\"] = \"flexlayout__tab_button_content\";\n    CLASSES[\"FLEXLAYOUT__TAB_BUTTON_LEADING\"] = \"flexlayout__tab_button_leading\";\n    CLASSES[\"FLEXLAYOUT__TAB_BUTTON_OVERFLOW\"] = \"flexlayout__tab_button_overflow\";\n    CLASSES[\"FLEXLAYOUT__TAB_BUTTON_OVERFLOW_COUNT\"] = \"flexlayout__tab_button_overflow_count\";\n    CLASSES[\"FLEXLAYOUT__TAB_BUTTON_TEXTBOX\"] = \"flexlayout__tab_button_textbox\";\n    CLASSES[\"FLEXLAYOUT__TAB_BUTTON_TRAILING\"] = \"flexlayout__tab_button_trailing\";\n    CLASSES[\"FLEXLAYOUT__TAB_BUTTON_STAMP\"] = \"flexlayout__tab_button_stamp\";\n    CLASSES[\"FLEXLAYOUT__TAB_TOOLBAR\"] = \"flexlayout__tab_toolbar\";\n    CLASSES[\"FLEXLAYOUT__TAB_TOOLBAR_BUTTON\"] = \"flexlayout__tab_toolbar_button\";\n    CLASSES[\"FLEXLAYOUT__TAB_TOOLBAR_ICON\"] = \"flexlayout__tab_toolbar_icon\";\n    CLASSES[\"FLEXLAYOUT__TAB_TOOLBAR_BUTTON_\"] = \"flexlayout__tab_toolbar_button-\";\n    CLASSES[\"FLEXLAYOUT__TAB_TOOLBAR_BUTTON_FLOAT\"] = \"flexlayout__tab_toolbar_button-float\";\n    CLASSES[\"FLEXLAYOUT__TAB_TOOLBAR_STICKY_BUTTONS_CONTAINER\"] = \"flexlayout__tab_toolbar_sticky_buttons_container\";\n    CLASSES[\"FLEXLAYOUT__TAB_TOOLBAR_BUTTON_CLOSE\"] = \"flexlayout__tab_toolbar_button-close\";\n    CLASSES[\"FLEXLAYOUT__POPUP_MENU_CONTAINER\"] = \"flexlayout__popup_menu_container\";\n    CLASSES[\"FLEXLAYOUT__POPUP_MENU_ITEM\"] = \"flexlayout__popup_menu_item\";\n    CLASSES[\"FLEXLAYOUT__POPUP_MENU_ITEM__SELECTED\"] = \"flexlayout__popup_menu_item--selected\";\n    CLASSES[\"FLEXLAYOUT__POPUP_MENU\"] = \"flexlayout__popup_menu\";\n    CLASSES[\"FLEXLAYOUT__MINI_SCROLLBAR\"] = \"flexlayout__mini_scrollbar\";\n    CLASSES[\"FLEXLAYOUT__MINI_SCROLLBAR_CONTAINER\"] = \"flexlayout__mini_scrollbar_container\";\n})(CLASSES || (CLASSES = {}));\n\n\n//# sourceURL=webpack://FlexLayout/./src/Types.ts?");
 
 /***/ }),
 
@@ -286,7 +286,7 @@ eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpac
   \*********************************/
 /***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {
 
-eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpack_require__.d(__webpack_exports__, {\n/* harmony export */   TabSetNode: () => (/* binding */ TabSetNode)\n/* harmony export */ });\n/* harmony import */ var _Attribute__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! ../Attribute */ \"./src/Attribute.ts\");\n/* harmony import */ var _AttributeDefinitions__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ../AttributeDefinitions */ \"./src/AttributeDefinitions.ts\");\n/* harmony import */ var _DockLocation__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ../DockLocation */ \"./src/DockLocation.ts\");\n/* harmony import */ var _DropInfo__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! ../DropInfo */ \"./src/DropInfo.ts\");\n/* harmony import */ var _Orientation__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(/*! ../Orientation */ \"./src/Orientation.ts\");\n/* harmony import */ var _Rect__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__(/*! ../Rect */ \"./src/Rect.ts\");\n/* harmony import */ var _Types__WEBPACK_IMPORTED_MODULE_6__ = __webpack_require__(/*! ../Types */ \"./src/Types.ts\");\n/* harmony import */ var _view_Utils__WEBPACK_IMPORTED_MODULE_7__ = __webpack_require__(/*! ../view/Utils */ \"./src/view/Utils.tsx\");\n/* harmony import */ var _BorderNode__WEBPACK_IMPORTED_MODULE_8__ = __webpack_require__(/*! ./BorderNode */ \"./src/model/BorderNode.ts\");\n/* harmony import */ var _Model__WEBPACK_IMPORTED_MODULE_9__ = __webpack_require__(/*! ./Model */ \"./src/model/Model.ts\");\n/* harmony import */ var _Node__WEBPACK_IMPORTED_MODULE_10__ = __webpack_require__(/*! ./Node */ \"./src/model/Node.ts\");\n/* harmony import */ var _RowNode__WEBPACK_IMPORTED_MODULE_11__ = __webpack_require__(/*! ./RowNode */ \"./src/model/RowNode.ts\");\n/* harmony import */ var _TabNode__WEBPACK_IMPORTED_MODULE_12__ = __webpack_require__(/*! ./TabNode */ \"./src/model/TabNode.ts\");\n/* harmony import */ var _Utils__WEBPACK_IMPORTED_MODULE_13__ = __webpack_require__(/*! ./Utils */ \"./src/model/Utils.ts\");\n\n\n\n\n\n\n\n\n\n\n\n\n\n\nclass TabSetNode extends _Node__WEBPACK_IMPORTED_MODULE_10__.Node {\n    /** @internal */\n    static fromJson(json, model, layoutWindow) {\n        const newLayoutNode = new TabSetNode(model, json);\n        if (json.children != null) {\n            for (const jsonChild of json.children) {\n                const child = _TabNode__WEBPACK_IMPORTED_MODULE_12__.TabNode.fromJson(jsonChild, model);\n                newLayoutNode.addChild(child);\n            }\n        }\n        if (newLayoutNode.children.length === 0) {\n            newLayoutNode.setSelected(-1);\n        }\n        if (json.maximized && json.maximized === true) {\n            layoutWindow.maximizedTabSet = newLayoutNode;\n        }\n        if (json.active && json.active === true) {\n            layoutWindow.activeTabSet = newLayoutNode;\n        }\n        return newLayoutNode;\n    }\n    /** @internal */\n    constructor(model, json) {\n        super(model);\n        /** @internal */\n        this.tabStripRect = _Rect__WEBPACK_IMPORTED_MODULE_5__.Rect.empty();\n        /** @internal */\n        this.contentRect = _Rect__WEBPACK_IMPORTED_MODULE_5__.Rect.empty();\n        this.calculatedMinHeight = 0;\n        this.calculatedMinWidth = 0;\n        this.calculatedMaxHeight = 0;\n        this.calculatedMaxWidth = 0;\n        TabSetNode.attributeDefinitions.fromJson(json, this.attributes);\n        model.addNode(this);\n    }\n    getName() {\n        return this.getAttr(\"name\");\n    }\n    isEnableActiveIcon() {\n        return this.getAttr(\"enableActiveIcon\");\n    }\n    getSelected() {\n        const selected = this.attributes.selected;\n        if (selected !== undefined) {\n            return selected;\n        }\n        return -1;\n    }\n    getSelectedNode() {\n        const selected = this.getSelected();\n        if (selected !== -1) {\n            return this.children[selected];\n        }\n        return undefined;\n    }\n    getWeight() {\n        return this.getAttr(\"weight\");\n    }\n    getAttrMinWidth() {\n        return this.getAttr(\"minWidth\");\n    }\n    getAttrMinHeight() {\n        return this.getAttr(\"minHeight\");\n    }\n    getMinWidth() {\n        return this.calculatedMinWidth;\n    }\n    getMinHeight() {\n        return this.calculatedMinHeight;\n    }\n    /** @internal */\n    getMinSize(orientation) {\n        if (orientation === _Orientation__WEBPACK_IMPORTED_MODULE_4__.Orientation.HORZ) {\n            return this.getMinWidth();\n        }\n        else {\n            return this.getMinHeight();\n        }\n    }\n    getAttrMaxWidth() {\n        return this.getAttr(\"maxWidth\");\n    }\n    getAttrMaxHeight() {\n        return this.getAttr(\"maxHeight\");\n    }\n    getMaxWidth() {\n        return this.calculatedMaxWidth;\n    }\n    getMaxHeight() {\n        return this.calculatedMaxHeight;\n    }\n    /** @internal */\n    getMaxSize(orientation) {\n        if (orientation === _Orientation__WEBPACK_IMPORTED_MODULE_4__.Orientation.HORZ) {\n            return this.getMaxWidth();\n        }\n        else {\n            return this.getMaxHeight();\n        }\n    }\n    /**\n     * Returns the config attribute that can be used to store node specific data that\n     * WILL be saved to the json. The config attribute should be changed via the action Actions.updateNodeAttributes rather\n     * than directly, for example:\n     * this.state.model.doAction(\n     *   FlexLayout.Actions.updateNodeAttributes(node.getId(), {config:myConfigObject}));\n     */\n    getConfig() {\n        return this.attributes.config;\n    }\n    isMaximized() {\n        return this.model.getMaximizedTabset(this.getWindowId()) === this;\n    }\n    isActive() {\n        return this.model.getActiveTabset(this.getWindowId()) === this;\n    }\n    isEnableDeleteWhenEmpty() {\n        return this.getAttr(\"enableDeleteWhenEmpty\");\n    }\n    isEnableDrop() {\n        return this.getAttr(\"enableDrop\");\n    }\n    isEnableTabWrap() {\n        return this.getAttr(\"enableTabWrap\");\n    }\n    isEnableDrag() {\n        return this.getAttr(\"enableDrag\");\n    }\n    isEnableDivide() {\n        return this.getAttr(\"enableDivide\");\n    }\n    isEnableMaximize() {\n        return this.getAttr(\"enableMaximize\");\n    }\n    isEnableClose() {\n        return this.getAttr(\"enableClose\");\n    }\n    isEnableSingleTabStretch() {\n        return this.getAttr(\"enableSingleTabStretch\");\n    }\n    isEnableTabStrip() {\n        return this.getAttr(\"enableTabStrip\");\n    }\n    isAutoSelectTab() {\n        return this.getAttr(\"autoSelectTab\");\n    }\n    isEnableTabScrollbar() {\n        return this.getAttr(\"enableTabScrollbar\");\n    }\n    getClassNameTabStrip() {\n        return this.getAttr(\"classNameTabStrip\");\n    }\n    getTabLocation() {\n        return this.getAttr(\"tabLocation\");\n    }\n    toJson() {\n        const json = {};\n        TabSetNode.attributeDefinitions.toJson(json, this.attributes);\n        json.children = this.children.map((child) => child.toJson());\n        if (this.isActive()) {\n            json.active = true;\n        }\n        if (this.isMaximized()) {\n            json.maximized = true;\n        }\n        return json;\n    }\n    /** @internal */\n    calcMinMaxSize() {\n        this.calculatedMinHeight = this.getAttrMinHeight();\n        this.calculatedMinWidth = this.getAttrMinWidth();\n        this.calculatedMaxHeight = this.getAttrMaxHeight();\n        this.calculatedMaxWidth = this.getAttrMaxWidth();\n        for (const child of this.children) {\n            const c = child;\n            this.calculatedMinWidth = Math.max(this.calculatedMinWidth, c.getMinWidth());\n            this.calculatedMinHeight = Math.max(this.calculatedMinHeight, c.getMinHeight());\n            this.calculatedMaxWidth = Math.min(this.calculatedMaxWidth, c.getMaxWidth());\n            this.calculatedMaxHeight = Math.min(this.calculatedMaxHeight, c.getMaxHeight());\n        }\n        this.calculatedMinHeight += this.tabStripRect.height;\n        this.calculatedMaxHeight += this.tabStripRect.height;\n    }\n    /** @internal */\n    canMaximize() {\n        if (this.isEnableMaximize()) {\n            // always allow maximize toggle if already maximized\n            if (this.getModel().getMaximizedTabset(this.getWindowId()) === this) {\n                return true;\n            }\n            // only one tabset, so disable\n            if (this.getParent() === this.getModel().getRoot(this.getWindowId()) && this.getModel().getRoot(this.getWindowId()).getChildren().length === 1) {\n                return false;\n            }\n            return true;\n        }\n        return false;\n    }\n    /** @internal */\n    setContentRect(rect) {\n        this.contentRect = rect;\n    }\n    /** @internal */\n    getContentRect() {\n        return this.contentRect;\n    }\n    /** @internal */\n    setTabStripRect(rect) {\n        this.tabStripRect = rect;\n    }\n    /** @internal */\n    setWeight(weight) {\n        this.attributes.weight = weight;\n    }\n    /** @internal */\n    setSelected(index) {\n        this.attributes.selected = index;\n    }\n    getWindowId() {\n        return this.parent.getWindowId();\n    }\n    /** @internal */\n    canDrop(dragNode, x, y) {\n        let dropInfo;\n        if (dragNode === this) {\n            const dockLocation = _DockLocation__WEBPACK_IMPORTED_MODULE_2__.DockLocation.CENTER;\n            const outlineRect = this.tabStripRect;\n            dropInfo = new _DropInfo__WEBPACK_IMPORTED_MODULE_3__.DropInfo(this, outlineRect, dockLocation, -1, _Types__WEBPACK_IMPORTED_MODULE_6__.CLASSES.FLEXLAYOUT__OUTLINE_RECT);\n        }\n        else if (this.getWindowId() !== _Model__WEBPACK_IMPORTED_MODULE_9__.Model.MAIN_WINDOW_ID && !(0,_view_Utils__WEBPACK_IMPORTED_MODULE_7__.canDockToWindow)(dragNode)) {\n            return undefined;\n        }\n        else if (this.contentRect.contains(x, y)) {\n            let dockLocation = _DockLocation__WEBPACK_IMPORTED_MODULE_2__.DockLocation.CENTER;\n            if (this.model.getMaximizedTabset(this.parent.getWindowId()) === undefined) {\n                dockLocation = _DockLocation__WEBPACK_IMPORTED_MODULE_2__.DockLocation.getLocation(this.contentRect, x, y);\n            }\n            const outlineRect = dockLocation.getDockRect(this.rect);\n            dropInfo = new _DropInfo__WEBPACK_IMPORTED_MODULE_3__.DropInfo(this, outlineRect, dockLocation, -1, _Types__WEBPACK_IMPORTED_MODULE_6__.CLASSES.FLEXLAYOUT__OUTLINE_RECT);\n        }\n        else if (this.tabStripRect != null && this.tabStripRect.contains(x, y)) {\n            let r;\n            let yy;\n            let h;\n            if (this.children.length === 0) {\n                r = this.tabStripRect.clone();\n                yy = r.y + 3;\n                h = r.height - 4;\n                r.width = 2;\n            }\n            else {\n                let child = this.children[0];\n                r = child.getTabRect();\n                yy = r.y;\n                h = r.height;\n                let p = this.tabStripRect.x;\n                let childCenter = 0;\n                for (let i = 0; i < this.children.length; i++) {\n                    child = this.children[i];\n                    r = child.getTabRect();\n                    if (r.y !== yy) {\n                        yy = r.y;\n                        p = this.tabStripRect.x;\n                    }\n                    childCenter = r.x + r.width / 2;\n                    if (x >= p && x < childCenter && y > r.y && y < r.getBottom()) {\n                        const dockLocation = _DockLocation__WEBPACK_IMPORTED_MODULE_2__.DockLocation.CENTER;\n                        const outlineRect = new _Rect__WEBPACK_IMPORTED_MODULE_5__.Rect(r.x - 2, r.y, 3, r.height);\n                        dropInfo = new _DropInfo__WEBPACK_IMPORTED_MODULE_3__.DropInfo(this, outlineRect, dockLocation, i, _Types__WEBPACK_IMPORTED_MODULE_6__.CLASSES.FLEXLAYOUT__OUTLINE_RECT);\n                        break;\n                    }\n                    p = childCenter;\n                }\n            }\n            if (dropInfo == null) {\n                const dockLocation = _DockLocation__WEBPACK_IMPORTED_MODULE_2__.DockLocation.CENTER;\n                const outlineRect = new _Rect__WEBPACK_IMPORTED_MODULE_5__.Rect(r.getRight() - 2, yy, 3, h);\n                dropInfo = new _DropInfo__WEBPACK_IMPORTED_MODULE_3__.DropInfo(this, outlineRect, dockLocation, this.children.length, _Types__WEBPACK_IMPORTED_MODULE_6__.CLASSES.FLEXLAYOUT__OUTLINE_RECT);\n            }\n        }\n        if (!dragNode.canDockInto(dragNode, dropInfo)) {\n            return undefined;\n        }\n        return dropInfo;\n    }\n    /** @internal */\n    delete() {\n        this.parent.removeChild(this);\n    }\n    /** @internal */\n    remove(node) {\n        const removedIndex = this.removeChild(node);\n        this.model.tidy();\n        (0,_Utils__WEBPACK_IMPORTED_MODULE_13__.adjustSelectedIndex)(this, removedIndex);\n    }\n    /** @internal */\n    drop(dragNode, location, index, select) {\n        const dockLocation = location;\n        if (this === dragNode) {\n            // tabset drop into itself\n            return; // dock back to itself\n        }\n        let dragParent = dragNode.getParent();\n        let fromIndex = 0;\n        if (dragParent !== undefined) {\n            fromIndex = dragParent.removeChild(dragNode);\n            // if selected node in border is being docked into tabset then deselect border tabs\n            if (dragParent instanceof _BorderNode__WEBPACK_IMPORTED_MODULE_8__.BorderNode && dragParent.getSelected() === fromIndex) {\n                dragParent.setSelected(-1);\n            }\n            else {\n                (0,_Utils__WEBPACK_IMPORTED_MODULE_13__.adjustSelectedIndex)(dragParent, fromIndex);\n            }\n        }\n        // if dropping a tab back to same tabset and moving to forward position then reduce insertion index\n        if (dragNode instanceof _TabNode__WEBPACK_IMPORTED_MODULE_12__.TabNode && dragParent === this && fromIndex < index && index > 0) {\n            index--;\n        }\n        // simple_bundled dock to existing tabset\n        if (dockLocation === _DockLocation__WEBPACK_IMPORTED_MODULE_2__.DockLocation.CENTER) {\n            let insertPos = index;\n            if (insertPos === -1) {\n                insertPos = this.children.length;\n            }\n            if (dragNode instanceof _TabNode__WEBPACK_IMPORTED_MODULE_12__.TabNode) {\n                this.addChild(dragNode, insertPos);\n                if (select || (select !== false && this.isAutoSelectTab())) {\n                    this.setSelected(insertPos);\n                }\n                // console.log(\"added child at : \" + insertPos);\n            }\n            else if (dragNode instanceof _RowNode__WEBPACK_IMPORTED_MODULE_11__.RowNode) {\n                dragNode.forEachNode((child, level) => {\n                    if (child instanceof _TabNode__WEBPACK_IMPORTED_MODULE_12__.TabNode) {\n                        this.addChild(child, insertPos);\n                        // console.log(\"added child at : \" + insertPos);\n                        insertPos++;\n                    }\n                }, 0);\n            }\n            else {\n                for (let i = 0; i < dragNode.getChildren().length; i++) {\n                    const child = dragNode.getChildren()[i];\n                    this.addChild(child, insertPos);\n                    // console.log(\"added child at : \" + insertPos);\n                    insertPos++;\n                }\n                if (this.getSelected() === -1 && this.children.length > 0) {\n                    this.setSelected(0);\n                }\n            }\n            this.model.setActiveTabset(this, this.parent.getWindowId());\n        }\n        else {\n            let moveNode = dragNode;\n            if (dragNode instanceof _TabNode__WEBPACK_IMPORTED_MODULE_12__.TabNode) {\n                // create new tabset parent\n                // console.log(\"create a new tabset\");\n                const callback = this.model.getOnCreateTabSet();\n                moveNode = new TabSetNode(this.model, callback ? callback(dragNode) : {});\n                moveNode.addChild(dragNode);\n                // console.log(\"added child at end\");\n                dragParent = moveNode;\n            }\n            else if (dragNode instanceof _RowNode__WEBPACK_IMPORTED_MODULE_11__.RowNode) {\n                const parent = this.getParent();\n                // need to turn round if same orientation unless docking oposite direction\n                if (dragNode.getOrientation() === parent.getOrientation() &&\n                    (location.getOrientation() === parent.getOrientation() || location === _DockLocation__WEBPACK_IMPORTED_MODULE_2__.DockLocation.CENTER)) {\n                    const node = new _RowNode__WEBPACK_IMPORTED_MODULE_11__.RowNode(this.model, this.getWindowId(), {});\n                    node.addChild(dragNode);\n                    moveNode = node;\n                }\n            }\n            else {\n                moveNode = dragNode;\n            }\n            const parentRow = this.parent;\n            const pos = parentRow.getChildren().indexOf(this);\n            if (parentRow.getOrientation() === dockLocation.orientation) {\n                moveNode.setWeight(this.getWeight() / 2);\n                this.setWeight(this.getWeight() / 2);\n                // console.log(\"added child 50% size at: \" +  pos + dockLocation.indexPlus);\n                parentRow.addChild(moveNode, pos + dockLocation.indexPlus);\n            }\n            else {\n                // create a new row to host the new tabset (it will go in the opposite direction)\n                // console.log(\"create a new row\");\n                const newRow = new _RowNode__WEBPACK_IMPORTED_MODULE_11__.RowNode(this.model, this.getWindowId(), {});\n                newRow.setWeight(this.getWeight());\n                newRow.addChild(this);\n                this.setWeight(50);\n                moveNode.setWeight(50);\n                // console.log(\"added child 50% size at: \" +  dockLocation.indexPlus);\n                newRow.addChild(moveNode, dockLocation.indexPlus);\n                parentRow.removeChild(this);\n                parentRow.addChild(newRow, pos);\n            }\n            if (moveNode instanceof TabSetNode) {\n                this.model.setActiveTabset(moveNode, this.getWindowId());\n            }\n        }\n        this.model.tidy();\n    }\n    /** @internal */\n    updateAttrs(json) {\n        TabSetNode.attributeDefinitions.update(json, this.attributes);\n    }\n    /** @internal */\n    getAttributeDefinitions() {\n        return TabSetNode.attributeDefinitions;\n    }\n    /** @internal */\n    static getAttributeDefinitions() {\n        return TabSetNode.attributeDefinitions;\n    }\n    /** @internal */\n    static createAttributeDefinitions() {\n        const attributeDefinitions = new _AttributeDefinitions__WEBPACK_IMPORTED_MODULE_1__.AttributeDefinitions();\n        attributeDefinitions.add(\"type\", TabSetNode.TYPE, true).setType(_Attribute__WEBPACK_IMPORTED_MODULE_0__.Attribute.STRING).setFixed();\n        attributeDefinitions.add(\"id\", undefined).setType(_Attribute__WEBPACK_IMPORTED_MODULE_0__.Attribute.STRING).setDescription(`the unique id of the tab set, if left undefined a uuid will be assigned`);\n        attributeDefinitions.add(\"weight\", 100).setType(_Attribute__WEBPACK_IMPORTED_MODULE_0__.Attribute.NUMBER).setDescription(`relative weight for sizing of this tabset in parent row`);\n        attributeDefinitions.add(\"selected\", 0).setType(_Attribute__WEBPACK_IMPORTED_MODULE_0__.Attribute.NUMBER).setDescription(`index of selected/visible tab in tabset`);\n        attributeDefinitions.add(\"name\", undefined).setType(_Attribute__WEBPACK_IMPORTED_MODULE_0__.Attribute.STRING);\n        attributeDefinitions.add(\"config\", undefined).setType(\"any\").setDescription(`a place to hold json config used in your own code`);\n        attributeDefinitions.addInherited(\"enableDeleteWhenEmpty\", \"tabSetEnableDeleteWhenEmpty\").setDescription(`whether to delete this tabset when is has no tabs`);\n        attributeDefinitions.addInherited(\"enableDrop\", \"tabSetEnableDrop\").setDescription(`allow user to drag tabs into this tabset`);\n        attributeDefinitions.addInherited(\"enableDrag\", \"tabSetEnableDrag\").setDescription(`allow user to drag tabs out this tabset`);\n        attributeDefinitions.addInherited(\"enableDivide\", \"tabSetEnableDivide\").setDescription(`allow user to drag tabs to region of this tabset, splitting into new tabset`);\n        attributeDefinitions.addInherited(\"enableMaximize\", \"tabSetEnableMaximize\").setDescription(`allow user to maximize tabset to fill view via maximize button`);\n        attributeDefinitions.addInherited(\"enableClose\", \"tabSetEnableClose\").setDescription(`allow user to close tabset via a close button`);\n        attributeDefinitions.addInherited(\"enableSingleTabStretch\", \"tabSetEnableSingleTabStretch\").setDescription(`if the tabset has only a single tab then stretch the single tab to fill area and display in a header style`);\n        attributeDefinitions.addInherited(\"classNameTabStrip\", \"tabSetClassNameTabStrip\").setDescription(`a class name to apply to the tab strip`);\n        attributeDefinitions.addInherited(\"enableTabStrip\", \"tabSetEnableTabStrip\").setDescription(`enable tab strip and allow multiple tabs in this tabset`);\n        attributeDefinitions.addInherited(\"minWidth\", \"tabSetMinWidth\").setDescription(`minimum width (in px) for this tabset`);\n        attributeDefinitions.addInherited(\"minHeight\", \"tabSetMinHeight\").setDescription(`minimum height (in px) for this tabset`);\n        attributeDefinitions.addInherited(\"maxWidth\", \"tabSetMaxWidth\").setDescription(`maximum width (in px) for this tabset`);\n        attributeDefinitions.addInherited(\"maxHeight\", \"tabSetMaxHeight\").setDescription(`maximum height (in px) for this tabset`);\n        attributeDefinitions.addInherited(\"enableTabWrap\", \"tabSetEnableTabWrap\").setDescription(`wrap tabs onto multiple lines`);\n        attributeDefinitions.addInherited(\"tabLocation\", \"tabSetTabLocation\").setDescription(`the location of the tabs either top or bottom`);\n        attributeDefinitions.addInherited(\"autoSelectTab\", \"tabSetAutoSelectTab\").setType(_Attribute__WEBPACK_IMPORTED_MODULE_0__.Attribute.BOOLEAN).setDescription(`whether to select new/moved tabs in tabset`);\n        attributeDefinitions.addInherited(\"enableActiveIcon\", \"tabSetEnableActiveIcon\").setType(_Attribute__WEBPACK_IMPORTED_MODULE_0__.Attribute.BOOLEAN).setDescription(`whether the active icon (*) should be displayed when the tabset is active`);\n        attributeDefinitions.addInherited(\"enableTabScrollbar\", \"tabSetEnableTabScrollbar\").setType(_Attribute__WEBPACK_IMPORTED_MODULE_0__.Attribute.BOOLEAN).setDescription(`whether to show a mini scrollbar for the tabs`);\n        return attributeDefinitions;\n    }\n}\nTabSetNode.TYPE = \"tabset\";\n/** @internal */\nTabSetNode.attributeDefinitions = TabSetNode.createAttributeDefinitions();\n\n\n//# sourceURL=webpack://FlexLayout/./src/model/TabSetNode.ts?");
+eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpack_require__.d(__webpack_exports__, {\n/* harmony export */   TabSetNode: () => (/* binding */ TabSetNode)\n/* harmony export */ });\n/* harmony import */ var _Attribute__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! ../Attribute */ \"./src/Attribute.ts\");\n/* harmony import */ var _AttributeDefinitions__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ../AttributeDefinitions */ \"./src/AttributeDefinitions.ts\");\n/* harmony import */ var _DockLocation__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ../DockLocation */ \"./src/DockLocation.ts\");\n/* harmony import */ var _DropInfo__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! ../DropInfo */ \"./src/DropInfo.ts\");\n/* harmony import */ var _Orientation__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(/*! ../Orientation */ \"./src/Orientation.ts\");\n/* harmony import */ var _Rect__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__(/*! ../Rect */ \"./src/Rect.ts\");\n/* harmony import */ var _Types__WEBPACK_IMPORTED_MODULE_6__ = __webpack_require__(/*! ../Types */ \"./src/Types.ts\");\n/* harmony import */ var _view_Utils__WEBPACK_IMPORTED_MODULE_7__ = __webpack_require__(/*! ../view/Utils */ \"./src/view/Utils.tsx\");\n/* harmony import */ var _BorderNode__WEBPACK_IMPORTED_MODULE_8__ = __webpack_require__(/*! ./BorderNode */ \"./src/model/BorderNode.ts\");\n/* harmony import */ var _Model__WEBPACK_IMPORTED_MODULE_9__ = __webpack_require__(/*! ./Model */ \"./src/model/Model.ts\");\n/* harmony import */ var _Node__WEBPACK_IMPORTED_MODULE_10__ = __webpack_require__(/*! ./Node */ \"./src/model/Node.ts\");\n/* harmony import */ var _RowNode__WEBPACK_IMPORTED_MODULE_11__ = __webpack_require__(/*! ./RowNode */ \"./src/model/RowNode.ts\");\n/* harmony import */ var _TabNode__WEBPACK_IMPORTED_MODULE_12__ = __webpack_require__(/*! ./TabNode */ \"./src/model/TabNode.ts\");\n/* harmony import */ var _Utils__WEBPACK_IMPORTED_MODULE_13__ = __webpack_require__(/*! ./Utils */ \"./src/model/Utils.ts\");\n\n\n\n\n\n\n\n\n\n\n\n\n\n\nclass TabSetNode extends _Node__WEBPACK_IMPORTED_MODULE_10__.Node {\n    /** @internal */\n    static fromJson(json, model, layoutWindow) {\n        const newLayoutNode = new TabSetNode(model, json);\n        if (json.children != null) {\n            for (const jsonChild of json.children) {\n                const child = _TabNode__WEBPACK_IMPORTED_MODULE_12__.TabNode.fromJson(jsonChild, model);\n                newLayoutNode.addChild(child);\n            }\n        }\n        if (newLayoutNode.children.length === 0) {\n            newLayoutNode.setSelected(-1);\n        }\n        if (json.maximized && json.maximized === true) {\n            layoutWindow.maximizedTabSet = newLayoutNode;\n        }\n        if (json.active && json.active === true) {\n            layoutWindow.activeTabSet = newLayoutNode;\n        }\n        return newLayoutNode;\n    }\n    /** @internal */\n    constructor(model, json) {\n        super(model);\n        /** @internal */\n        this.tabStripRect = _Rect__WEBPACK_IMPORTED_MODULE_5__.Rect.empty();\n        /** @internal */\n        this.contentRect = _Rect__WEBPACK_IMPORTED_MODULE_5__.Rect.empty();\n        this.calculatedMinHeight = 0;\n        this.calculatedMinWidth = 0;\n        this.calculatedMaxHeight = 0;\n        this.calculatedMaxWidth = 0;\n        TabSetNode.attributeDefinitions.fromJson(json, this.attributes);\n        model.addNode(this);\n    }\n    getName() {\n        return this.getAttr(\"name\");\n    }\n    isEnableActiveIcon() {\n        return this.getAttr(\"enableActiveIcon\");\n    }\n    getSelected() {\n        const selected = this.attributes.selected;\n        if (selected !== undefined) {\n            return selected;\n        }\n        return -1;\n    }\n    getSelectedNode() {\n        const selected = this.getSelected();\n        if (selected !== -1) {\n            return this.children[selected];\n        }\n        return undefined;\n    }\n    getWeight() {\n        return this.getAttr(\"weight\");\n    }\n    getAttrMinWidth() {\n        return this.getAttr(\"minWidth\");\n    }\n    getAttrMinHeight() {\n        return this.getAttr(\"minHeight\");\n    }\n    getMinWidth() {\n        return this.calculatedMinWidth;\n    }\n    getMinHeight() {\n        return this.calculatedMinHeight;\n    }\n    /** @internal */\n    getMinSize(orientation) {\n        if (orientation === _Orientation__WEBPACK_IMPORTED_MODULE_4__.Orientation.HORZ) {\n            return this.getMinWidth();\n        }\n        else {\n            return this.getMinHeight();\n        }\n    }\n    getAttrMaxWidth() {\n        return this.getAttr(\"maxWidth\");\n    }\n    getAttrMaxHeight() {\n        return this.getAttr(\"maxHeight\");\n    }\n    getMaxWidth() {\n        return this.calculatedMaxWidth;\n    }\n    getMaxHeight() {\n        return this.calculatedMaxHeight;\n    }\n    /** @internal */\n    getMaxSize(orientation) {\n        if (orientation === _Orientation__WEBPACK_IMPORTED_MODULE_4__.Orientation.HORZ) {\n            return this.getMaxWidth();\n        }\n        else {\n            return this.getMaxHeight();\n        }\n    }\n    /**\n     * Returns the config attribute that can be used to store node specific data that\n     * WILL be saved to the json. The config attribute should be changed via the action Actions.updateNodeAttributes rather\n     * than directly, for example:\n     * this.state.model.doAction(\n     *   FlexLayout.Actions.updateNodeAttributes(node.getId(), {config:myConfigObject}));\n     */\n    getConfig() {\n        return this.attributes.config;\n    }\n    isMaximized() {\n        return this.model.getMaximizedTabset(this.getWindowId()) === this;\n    }\n    isActive() {\n        return this.model.getActiveTabset(this.getWindowId()) === this;\n    }\n    isEnableDeleteWhenEmpty() {\n        return this.getAttr(\"enableDeleteWhenEmpty\");\n    }\n    isEnableDrop() {\n        return this.getAttr(\"enableDrop\");\n    }\n    isEnableTabWrap() {\n        return this.getAttr(\"enableTabWrap\");\n    }\n    isEnableDrag() {\n        return this.getAttr(\"enableDrag\");\n    }\n    isEnableDivide() {\n        return this.getAttr(\"enableDivide\");\n    }\n    isEnableMaximize() {\n        return this.getAttr(\"enableMaximize\");\n    }\n    isEnableClose() {\n        return this.getAttr(\"enableClose\");\n    }\n    isEnableSingleTabStretch() {\n        return this.getAttr(\"enableSingleTabStretch\");\n    }\n    isEnableTabStrip() {\n        return this.getAttr(\"enableTabStrip\");\n    }\n    isAutoSelectTab() {\n        return this.getAttr(\"autoSelectTab\");\n    }\n    isEnableTabScrollbar() {\n        return this.getAttr(\"enableTabScrollbar\");\n    }\n    getClassNameTabStrip() {\n        return this.getAttr(\"classNameTabStrip\");\n    }\n    getTabLocation() {\n        return this.getAttr(\"tabLocation\");\n    }\n    toJson() {\n        const json = {};\n        TabSetNode.attributeDefinitions.toJson(json, this.attributes);\n        json.children = this.children.map((child) => child.toJson());\n        if (this.isActive()) {\n            json.active = true;\n        }\n        if (this.isMaximized()) {\n            json.maximized = true;\n        }\n        return json;\n    }\n    /** @internal */\n    calcMinMaxSize() {\n        this.calculatedMinHeight = this.getAttrMinHeight();\n        this.calculatedMinWidth = this.getAttrMinWidth();\n        this.calculatedMaxHeight = this.getAttrMaxHeight();\n        this.calculatedMaxWidth = this.getAttrMaxWidth();\n        for (const child of this.children) {\n            const c = child;\n            this.calculatedMinWidth = Math.max(this.calculatedMinWidth, c.getMinWidth());\n            this.calculatedMinHeight = Math.max(this.calculatedMinHeight, c.getMinHeight());\n            this.calculatedMaxWidth = Math.min(this.calculatedMaxWidth, c.getMaxWidth());\n            this.calculatedMaxHeight = Math.min(this.calculatedMaxHeight, c.getMaxHeight());\n        }\n        this.calculatedMinHeight += this.tabStripRect.height;\n        this.calculatedMaxHeight += this.tabStripRect.height;\n    }\n    /** @internal */\n    canMaximize() {\n        if (this.isEnableMaximize()) {\n            // always allow maximize toggle if already maximized\n            if (this.getModel().getMaximizedTabset(this.getWindowId()) === this) {\n                return true;\n            }\n            // only one tabset, so disable\n            if (this.getParent() === this.getModel().getRoot(this.getWindowId()) && this.getModel().getRoot(this.getWindowId()).getChildren().length === 1) {\n                return false;\n            }\n            return true;\n        }\n        return false;\n    }\n    /** @internal */\n    setContentRect(rect) {\n        this.contentRect = rect;\n    }\n    /** @internal */\n    getContentRect() {\n        return this.contentRect;\n    }\n    /** @internal */\n    setTabStripRect(rect) {\n        this.tabStripRect = rect;\n    }\n    /** @internal */\n    setWeight(weight) {\n        this.attributes.weight = weight;\n    }\n    /** @internal */\n    setSelected(index) {\n        this.attributes.selected = index;\n    }\n    getWindowId() {\n        return this.parent.getWindowId();\n    }\n    /** @internal */\n    canDrop(dragNode, x, y) {\n        let dropInfo;\n        if (dragNode === this) {\n            const dockLocation = _DockLocation__WEBPACK_IMPORTED_MODULE_2__.DockLocation.CENTER;\n            const outlineRect = this.tabStripRect;\n            dropInfo = new _DropInfo__WEBPACK_IMPORTED_MODULE_3__.DropInfo(this, outlineRect, dockLocation, -1, _Types__WEBPACK_IMPORTED_MODULE_6__.CLASSES.FLEXLAYOUT__OUTLINE_RECT);\n        }\n        else if (this.getWindowId() !== _Model__WEBPACK_IMPORTED_MODULE_9__.Model.MAIN_WINDOW_ID && !(0,_view_Utils__WEBPACK_IMPORTED_MODULE_7__.canDockToWindow)(dragNode)) {\n            return undefined;\n        }\n        else if (this.contentRect.contains(x, y)) {\n            let dockLocation = _DockLocation__WEBPACK_IMPORTED_MODULE_2__.DockLocation.CENTER;\n            if (this.model.getMaximizedTabset(this.parent.getWindowId()) === undefined) {\n                dockLocation = _DockLocation__WEBPACK_IMPORTED_MODULE_2__.DockLocation.getLocation(this.contentRect, x, y);\n            }\n            const outlineRect = dockLocation.getDockRect(this.rect);\n            dropInfo = new _DropInfo__WEBPACK_IMPORTED_MODULE_3__.DropInfo(this, outlineRect, dockLocation, -1, _Types__WEBPACK_IMPORTED_MODULE_6__.CLASSES.FLEXLAYOUT__OUTLINE_RECT);\n        }\n        else if (this.tabStripRect != null && this.tabStripRect.contains(x, y)) {\n            let r;\n            let yy;\n            let h;\n            if (this.children.length === 0) {\n                r = this.tabStripRect.clone();\n                yy = r.y + 3;\n                h = r.height - 4;\n                r.width = 2;\n            }\n            else {\n                let child = this.children[0];\n                r = child.getTabRect();\n                yy = r.y;\n                h = r.height;\n                let p = this.tabStripRect.x;\n                let childCenter = 0;\n                for (let i = 0; i < this.children.length; i++) {\n                    child = this.children[i];\n                    r = child.getTabRect();\n                    if (r.y !== yy) {\n                        yy = r.y;\n                        p = this.tabStripRect.x;\n                    }\n                    childCenter = r.x + r.width / 2;\n                    if (p <= x && x < childCenter && r.y < y && y < r.getBottom()) {\n                        const dockLocation = _DockLocation__WEBPACK_IMPORTED_MODULE_2__.DockLocation.CENTER;\n                        const outlineRect = new _Rect__WEBPACK_IMPORTED_MODULE_5__.Rect(r.x - 2, r.y, 3, r.height);\n                        if (this.rect.x < r.x && r.x < this.rect.getRight()) {\n                            dropInfo = new _DropInfo__WEBPACK_IMPORTED_MODULE_3__.DropInfo(this, outlineRect, dockLocation, i, _Types__WEBPACK_IMPORTED_MODULE_6__.CLASSES.FLEXLAYOUT__OUTLINE_RECT);\n                            break;\n                        }\n                        else {\n                            return undefined;\n                        }\n                    }\n                    p = childCenter;\n                }\n            }\n            if (dropInfo == null && r.getRight() < this.rect.getRight()) {\n                const dockLocation = _DockLocation__WEBPACK_IMPORTED_MODULE_2__.DockLocation.CENTER;\n                const outlineRect = new _Rect__WEBPACK_IMPORTED_MODULE_5__.Rect(r.getRight() - 2, yy, 3, h);\n                dropInfo = new _DropInfo__WEBPACK_IMPORTED_MODULE_3__.DropInfo(this, outlineRect, dockLocation, this.children.length, _Types__WEBPACK_IMPORTED_MODULE_6__.CLASSES.FLEXLAYOUT__OUTLINE_RECT);\n            }\n        }\n        if (!dragNode.canDockInto(dragNode, dropInfo)) {\n            return undefined;\n        }\n        return dropInfo;\n    }\n    /** @internal */\n    delete() {\n        this.parent.removeChild(this);\n    }\n    /** @internal */\n    remove(node) {\n        const removedIndex = this.removeChild(node);\n        this.model.tidy();\n        (0,_Utils__WEBPACK_IMPORTED_MODULE_13__.adjustSelectedIndex)(this, removedIndex);\n    }\n    /** @internal */\n    drop(dragNode, location, index, select) {\n        const dockLocation = location;\n        if (this === dragNode) {\n            // tabset drop into itself\n            return; // dock back to itself\n        }\n        let dragParent = dragNode.getParent();\n        let fromIndex = 0;\n        if (dragParent !== undefined) {\n            fromIndex = dragParent.removeChild(dragNode);\n            // if selected node in border is being docked into tabset then deselect border tabs\n            if (dragParent instanceof _BorderNode__WEBPACK_IMPORTED_MODULE_8__.BorderNode && dragParent.getSelected() === fromIndex) {\n                dragParent.setSelected(-1);\n            }\n            else {\n                (0,_Utils__WEBPACK_IMPORTED_MODULE_13__.adjustSelectedIndex)(dragParent, fromIndex);\n            }\n        }\n        // if dropping a tab back to same tabset and moving to forward position then reduce insertion index\n        if (dragNode instanceof _TabNode__WEBPACK_IMPORTED_MODULE_12__.TabNode && dragParent === this && fromIndex < index && index > 0) {\n            index--;\n        }\n        // simple_bundled dock to existing tabset\n        if (dockLocation === _DockLocation__WEBPACK_IMPORTED_MODULE_2__.DockLocation.CENTER) {\n            let insertPos = index;\n            if (insertPos === -1) {\n                insertPos = this.children.length;\n            }\n            if (dragNode instanceof _TabNode__WEBPACK_IMPORTED_MODULE_12__.TabNode) {\n                this.addChild(dragNode, insertPos);\n                if (select || (select !== false && this.isAutoSelectTab())) {\n                    this.setSelected(insertPos);\n                }\n                // console.log(\"added child at : \" + insertPos);\n            }\n            else if (dragNode instanceof _RowNode__WEBPACK_IMPORTED_MODULE_11__.RowNode) {\n                dragNode.forEachNode((child, level) => {\n                    if (child instanceof _TabNode__WEBPACK_IMPORTED_MODULE_12__.TabNode) {\n                        this.addChild(child, insertPos);\n                        // console.log(\"added child at : \" + insertPos);\n                        insertPos++;\n                    }\n                }, 0);\n            }\n            else {\n                for (let i = 0; i < dragNode.getChildren().length; i++) {\n                    const child = dragNode.getChildren()[i];\n                    this.addChild(child, insertPos);\n                    // console.log(\"added child at : \" + insertPos);\n                    insertPos++;\n                }\n                if (this.getSelected() === -1 && this.children.length > 0) {\n                    this.setSelected(0);\n                }\n            }\n            this.model.setActiveTabset(this, this.parent.getWindowId());\n        }\n        else {\n            let moveNode = dragNode;\n            if (dragNode instanceof _TabNode__WEBPACK_IMPORTED_MODULE_12__.TabNode) {\n                // create new tabset parent\n                // console.log(\"create a new tabset\");\n                const callback = this.model.getOnCreateTabSet();\n                moveNode = new TabSetNode(this.model, callback ? callback(dragNode) : {});\n                moveNode.addChild(dragNode);\n                // console.log(\"added child at end\");\n                dragParent = moveNode;\n            }\n            else if (dragNode instanceof _RowNode__WEBPACK_IMPORTED_MODULE_11__.RowNode) {\n                const parent = this.getParent();\n                // need to turn round if same orientation unless docking oposite direction\n                if (dragNode.getOrientation() === parent.getOrientation() &&\n                    (location.getOrientation() === parent.getOrientation() || location === _DockLocation__WEBPACK_IMPORTED_MODULE_2__.DockLocation.CENTER)) {\n                    const node = new _RowNode__WEBPACK_IMPORTED_MODULE_11__.RowNode(this.model, this.getWindowId(), {});\n                    node.addChild(dragNode);\n                    moveNode = node;\n                }\n            }\n            else {\n                moveNode = dragNode;\n            }\n            const parentRow = this.parent;\n            const pos = parentRow.getChildren().indexOf(this);\n            if (parentRow.getOrientation() === dockLocation.orientation) {\n                moveNode.setWeight(this.getWeight() / 2);\n                this.setWeight(this.getWeight() / 2);\n                // console.log(\"added child 50% size at: \" +  pos + dockLocation.indexPlus);\n                parentRow.addChild(moveNode, pos + dockLocation.indexPlus);\n            }\n            else {\n                // create a new row to host the new tabset (it will go in the opposite direction)\n                // console.log(\"create a new row\");\n                const newRow = new _RowNode__WEBPACK_IMPORTED_MODULE_11__.RowNode(this.model, this.getWindowId(), {});\n                newRow.setWeight(this.getWeight());\n                newRow.addChild(this);\n                this.setWeight(50);\n                moveNode.setWeight(50);\n                // console.log(\"added child 50% size at: \" +  dockLocation.indexPlus);\n                newRow.addChild(moveNode, dockLocation.indexPlus);\n                parentRow.removeChild(this);\n                parentRow.addChild(newRow, pos);\n            }\n            if (moveNode instanceof TabSetNode) {\n                this.model.setActiveTabset(moveNode, this.getWindowId());\n            }\n        }\n        this.model.tidy();\n    }\n    /** @internal */\n    updateAttrs(json) {\n        TabSetNode.attributeDefinitions.update(json, this.attributes);\n    }\n    /** @internal */\n    getAttributeDefinitions() {\n        return TabSetNode.attributeDefinitions;\n    }\n    /** @internal */\n    static getAttributeDefinitions() {\n        return TabSetNode.attributeDefinitions;\n    }\n    /** @internal */\n    static createAttributeDefinitions() {\n        const attributeDefinitions = new _AttributeDefinitions__WEBPACK_IMPORTED_MODULE_1__.AttributeDefinitions();\n        attributeDefinitions.add(\"type\", TabSetNode.TYPE, true).setType(_Attribute__WEBPACK_IMPORTED_MODULE_0__.Attribute.STRING).setFixed();\n        attributeDefinitions.add(\"id\", undefined).setType(_Attribute__WEBPACK_IMPORTED_MODULE_0__.Attribute.STRING).setDescription(`the unique id of the tab set, if left undefined a uuid will be assigned`);\n        attributeDefinitions.add(\"weight\", 100).setType(_Attribute__WEBPACK_IMPORTED_MODULE_0__.Attribute.NUMBER).setDescription(`relative weight for sizing of this tabset in parent row`);\n        attributeDefinitions.add(\"selected\", 0).setType(_Attribute__WEBPACK_IMPORTED_MODULE_0__.Attribute.NUMBER).setDescription(`index of selected/visible tab in tabset`);\n        attributeDefinitions.add(\"name\", undefined).setType(_Attribute__WEBPACK_IMPORTED_MODULE_0__.Attribute.STRING);\n        attributeDefinitions.add(\"config\", undefined).setType(\"any\").setDescription(`a place to hold json config used in your own code`);\n        attributeDefinitions.addInherited(\"enableDeleteWhenEmpty\", \"tabSetEnableDeleteWhenEmpty\").setDescription(`whether to delete this tabset when is has no tabs`);\n        attributeDefinitions.addInherited(\"enableDrop\", \"tabSetEnableDrop\").setDescription(`allow user to drag tabs into this tabset`);\n        attributeDefinitions.addInherited(\"enableDrag\", \"tabSetEnableDrag\").setDescription(`allow user to drag tabs out this tabset`);\n        attributeDefinitions.addInherited(\"enableDivide\", \"tabSetEnableDivide\").setDescription(`allow user to drag tabs to region of this tabset, splitting into new tabset`);\n        attributeDefinitions.addInherited(\"enableMaximize\", \"tabSetEnableMaximize\").setDescription(`allow user to maximize tabset to fill view via maximize button`);\n        attributeDefinitions.addInherited(\"enableClose\", \"tabSetEnableClose\").setDescription(`allow user to close tabset via a close button`);\n        attributeDefinitions.addInherited(\"enableSingleTabStretch\", \"tabSetEnableSingleTabStretch\").setDescription(`if the tabset has only a single tab then stretch the single tab to fill area and display in a header style`);\n        attributeDefinitions.addInherited(\"classNameTabStrip\", \"tabSetClassNameTabStrip\").setDescription(`a class name to apply to the tab strip`);\n        attributeDefinitions.addInherited(\"enableTabStrip\", \"tabSetEnableTabStrip\").setDescription(`enable tab strip and allow multiple tabs in this tabset`);\n        attributeDefinitions.addInherited(\"minWidth\", \"tabSetMinWidth\").setDescription(`minimum width (in px) for this tabset`);\n        attributeDefinitions.addInherited(\"minHeight\", \"tabSetMinHeight\").setDescription(`minimum height (in px) for this tabset`);\n        attributeDefinitions.addInherited(\"maxWidth\", \"tabSetMaxWidth\").setDescription(`maximum width (in px) for this tabset`);\n        attributeDefinitions.addInherited(\"maxHeight\", \"tabSetMaxHeight\").setDescription(`maximum height (in px) for this tabset`);\n        attributeDefinitions.addInherited(\"enableTabWrap\", \"tabSetEnableTabWrap\").setDescription(`wrap tabs onto multiple lines`);\n        attributeDefinitions.addInherited(\"tabLocation\", \"tabSetTabLocation\").setDescription(`the location of the tabs either top or bottom`);\n        attributeDefinitions.addInherited(\"autoSelectTab\", \"tabSetAutoSelectTab\").setType(_Attribute__WEBPACK_IMPORTED_MODULE_0__.Attribute.BOOLEAN).setDescription(`whether to select new/moved tabs in tabset`);\n        attributeDefinitions.addInherited(\"enableActiveIcon\", \"tabSetEnableActiveIcon\").setType(_Attribute__WEBPACK_IMPORTED_MODULE_0__.Attribute.BOOLEAN).setDescription(`whether the active icon (*) should be displayed when the tabset is active`);\n        attributeDefinitions.addInherited(\"enableTabScrollbar\", \"tabSetEnableTabScrollbar\").setType(_Attribute__WEBPACK_IMPORTED_MODULE_0__.Attribute.BOOLEAN).setDescription(`whether to show a mini scrollbar for the tabs`);\n        return attributeDefinitions;\n    }\n}\nTabSetNode.TYPE = \"tabset\";\n/** @internal */\nTabSetNode.attributeDefinitions = TabSetNode.createAttributeDefinitions();\n\n\n//# sourceURL=webpack://FlexLayout/./src/model/TabSetNode.ts?");
 
 /***/ }),
 
@@ -366,7 +366,7 @@ eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpac
   \*****************************/
 /***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {
 
-eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpack_require__.d(__webpack_exports__, {\n/* harmony export */   FlexLayoutVersion: () => (/* binding */ FlexLayoutVersion),\n/* harmony export */   Layout: () => (/* binding */ Layout),\n/* harmony export */   LayoutInternal: () => (/* binding */ LayoutInternal)\n/* harmony export */ });\n/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! react */ \"react\");\n/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(react__WEBPACK_IMPORTED_MODULE_0__);\n/* harmony import */ var react_dom__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! react-dom */ \"react-dom\");\n/* harmony import */ var react_dom__WEBPACK_IMPORTED_MODULE_1___default = /*#__PURE__*/__webpack_require__.n(react_dom__WEBPACK_IMPORTED_MODULE_1__);\n/* harmony import */ var react_dom_client__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! react-dom/client */ \"./node_modules/.pnpm/react-dom@19.0.0_react@19.0.0/node_modules/react-dom/client.js\");\n/* harmony import */ var _DockLocation__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! ../DockLocation */ \"./src/DockLocation.ts\");\n/* harmony import */ var _I18nLabel__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(/*! ../I18nLabel */ \"./src/I18nLabel.ts\");\n/* harmony import */ var _Orientation__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__(/*! ../Orientation */ \"./src/Orientation.ts\");\n/* harmony import */ var _Rect__WEBPACK_IMPORTED_MODULE_6__ = __webpack_require__(/*! ../Rect */ \"./src/Rect.ts\");\n/* harmony import */ var _Types__WEBPACK_IMPORTED_MODULE_7__ = __webpack_require__(/*! ../Types */ \"./src/Types.ts\");\n/* harmony import */ var _model_Actions__WEBPACK_IMPORTED_MODULE_8__ = __webpack_require__(/*! ../model/Actions */ \"./src/model/Actions.ts\");\n/* harmony import */ var _model_BorderNode__WEBPACK_IMPORTED_MODULE_9__ = __webpack_require__(/*! ../model/BorderNode */ \"./src/model/BorderNode.ts\");\n/* harmony import */ var _model_Model__WEBPACK_IMPORTED_MODULE_10__ = __webpack_require__(/*! ../model/Model */ \"./src/model/Model.ts\");\n/* harmony import */ var _model_TabNode__WEBPACK_IMPORTED_MODULE_11__ = __webpack_require__(/*! ../model/TabNode */ \"./src/model/TabNode.ts\");\n/* harmony import */ var _model_TabSetNode__WEBPACK_IMPORTED_MODULE_12__ = __webpack_require__(/*! ../model/TabSetNode */ \"./src/model/TabSetNode.ts\");\n/* harmony import */ var _BorderTab__WEBPACK_IMPORTED_MODULE_13__ = __webpack_require__(/*! ./BorderTab */ \"./src/view/BorderTab.tsx\");\n/* harmony import */ var _BorderTabSet__WEBPACK_IMPORTED_MODULE_14__ = __webpack_require__(/*! ./BorderTabSet */ \"./src/view/BorderTabSet.tsx\");\n/* harmony import */ var _DragContainer__WEBPACK_IMPORTED_MODULE_15__ = __webpack_require__(/*! ./DragContainer */ \"./src/view/DragContainer.tsx\");\n/* harmony import */ var _ErrorBoundary__WEBPACK_IMPORTED_MODULE_16__ = __webpack_require__(/*! ./ErrorBoundary */ \"./src/view/ErrorBoundary.tsx\");\n/* harmony import */ var _PopoutWindow__WEBPACK_IMPORTED_MODULE_17__ = __webpack_require__(/*! ./PopoutWindow */ \"./src/view/PopoutWindow.tsx\");\n/* harmony import */ var _Icons__WEBPACK_IMPORTED_MODULE_18__ = __webpack_require__(/*! ./Icons */ \"./src/view/Icons.tsx\");\n/* harmony import */ var _Overlay__WEBPACK_IMPORTED_MODULE_19__ = __webpack_require__(/*! ./Overlay */ \"./src/view/Overlay.tsx\");\n/* harmony import */ var _Row__WEBPACK_IMPORTED_MODULE_20__ = __webpack_require__(/*! ./Row */ \"./src/view/Row.tsx\");\n/* harmony import */ var _Tab__WEBPACK_IMPORTED_MODULE_21__ = __webpack_require__(/*! ./Tab */ \"./src/view/Tab.tsx\");\n/* harmony import */ var _Utils__WEBPACK_IMPORTED_MODULE_22__ = __webpack_require__(/*! ./Utils */ \"./src/view/Utils.tsx\");\n/* harmony import */ var _TabButtonStamp__WEBPACK_IMPORTED_MODULE_23__ = __webpack_require__(/*! ./TabButtonStamp */ \"./src/view/TabButtonStamp.tsx\");\n/* harmony import */ var _SizeTracker__WEBPACK_IMPORTED_MODULE_24__ = __webpack_require__(/*! ./SizeTracker */ \"./src/view/SizeTracker.tsx\");\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n/**\n * A React component that hosts a multi-tabbed layout\n */\nclass Layout extends react__WEBPACK_IMPORTED_MODULE_0__.Component {\n    /** @internal */\n    constructor(props) {\n        super(props);\n        this.selfRef = react__WEBPACK_IMPORTED_MODULE_0__.createRef();\n        this.revision = 0;\n    }\n    /** re-render the layout */\n    redraw() {\n        this.selfRef.current.redraw(\"parent \" + this.revision);\n    }\n    /**\n     * Adds a new tab to the given tabset\n     * @param tabsetId the id of the tabset where the new tab will be added\n     * @param json the json for the new tab node\n     * @returns the added tab node or undefined\n     */\n    addTabToTabSet(tabsetId, json) {\n        return this.selfRef.current.addTabToTabSet(tabsetId, json);\n    }\n    /**\n     * Adds a new tab by dragging an item to the drop location, must be called from within an HTML\n     * drag start handler. You can use the setDragComponent() method to set the drag image before calling this\n     * method.\n     * @param event the drag start event\n     * @param json the json for the new tab node\n     * @param onDrop a callback to call when the drag is complete\n     */\n    addTabWithDragAndDrop(event, json, onDrop) {\n        this.selfRef.current.addTabWithDragAndDrop(event, json, onDrop);\n    }\n    /**\n     * Move a tab/tabset using drag and drop, must be called from within an HTML\n     * drag start handler\n     * @param event the drag start event\n     * @param node the tab or tabset to drag\n     */\n    moveTabWithDragAndDrop(event, node) {\n        this.selfRef.current.moveTabWithDragAndDrop(event, node);\n    }\n    /**\n     * Adds a new tab to the active tabset (if there is one)\n     * @param json the json for the new tab node\n     * @returns the added tab node or undefined\n     */\n    addTabToActiveTabSet(json) {\n        return this.selfRef.current.addTabToActiveTabSet(json);\n    }\n    /**\n     * Sets the drag image from a react component for a drag event\n     * @param event the drag event\n     * @param component the react component to be used for the drag image\n     * @param x the x position of the drag cursor on the image\n     * @param y the x position of the drag cursor on the image\n     */\n    setDragComponent(event, component, x, y) {\n        this.selfRef.current.setDragComponent(event, component, x, y);\n    }\n    /** Get the root div element of the layout */\n    getRootDiv() {\n        return this.selfRef.current.getRootDiv();\n    }\n    /** @internal */\n    render() {\n        return (react__WEBPACK_IMPORTED_MODULE_0__.createElement(LayoutInternal, Object.assign({ ref: this.selfRef }, this.props, { renderRevision: this.revision++ })));\n    }\n}\n/** @internal */\nclass LayoutInternal extends react__WEBPACK_IMPORTED_MODULE_0__.Component {\n    // private renderCount: any;\n    constructor(props) {\n        super(props);\n        this.moveableElementMap = new Map();\n        this.dragEnterCount = 0;\n        this.dragging = false;\n        this.updateLayoutMetrics = () => {\n            if (this.findBorderBarSizeRef.current) {\n                const borderBarSize = this.findBorderBarSizeRef.current.getBoundingClientRect().height;\n                if (borderBarSize !== this.state.calculatedBorderBarSize) {\n                    this.setState({ calculatedBorderBarSize: borderBarSize });\n                }\n            }\n        };\n        this.onModelChange = (action) => {\n            this.redrawInternal(\"model change\");\n            if (this.props.onModelChange) {\n                this.props.onModelChange(this.props.model, action);\n            }\n        };\n        this.updateRect = () => {\n            const rect = this.getDomRect();\n            if (!rect.equals(this.state.rect) && rect.width !== 0 && rect.height !== 0) {\n                // console.log(\"updateRect\", rect.floor());\n                this.setState({ rect });\n                if (this.windowId !== _model_Model__WEBPACK_IMPORTED_MODULE_10__.Model.MAIN_WINDOW_ID) {\n                    this.redrawInternal(\"rect updated\");\n                }\n            }\n        };\n        this.getClassName = (defaultClassName) => {\n            if (this.props.classNameMapper === undefined) {\n                return defaultClassName;\n            }\n            else {\n                return this.props.classNameMapper(defaultClassName);\n            }\n        };\n        this.onCloseWindow = (windowLayout) => {\n            this.doAction(_model_Actions__WEBPACK_IMPORTED_MODULE_8__.Actions.closeWindow(windowLayout.windowId));\n        };\n        this.onSetWindow = (windowLayout, window) => {\n        };\n        this.showControlInPortal = (control, element) => {\n            const portal = (0,react_dom__WEBPACK_IMPORTED_MODULE_1__.createPortal)(control, element);\n            this.setState({ portal });\n        };\n        this.hideControlInPortal = () => {\n            this.setState({ portal: undefined });\n        };\n        this.getIcons = () => {\n            return this.icons;\n        };\n        this.setDragNode = (event, node) => {\n            LayoutInternal.dragState = new DragState(this.mainLayout, DragSource.Internal, node, undefined, undefined);\n            // Note: can only set (very) limited types on android! so cannot set json\n            // Note: must set text/plain for android to allow drag, \n            //  so just set a simple message indicating its a flexlayout drag (this is not used anywhere else)\n            event.dataTransfer.setData('text/plain', \"--flexlayout--\");\n            event.dataTransfer.effectAllowed = \"copyMove\";\n            event.dataTransfer.dropEffect = \"move\";\n            this.dragEnterCount = 0;\n            if (node instanceof _model_TabSetNode__WEBPACK_IMPORTED_MODULE_12__.TabSetNode) {\n                let rendered = false;\n                let content = this.i18nName(_I18nLabel__WEBPACK_IMPORTED_MODULE_4__.I18nLabel.Move_Tabset);\n                if (node.getChildren().length > 0) {\n                    content = this.i18nName(_I18nLabel__WEBPACK_IMPORTED_MODULE_4__.I18nLabel.Move_Tabs).replace(\"?\", String(node.getChildren().length));\n                }\n                if (this.props.onRenderDragRect) {\n                    const dragComponent = this.props.onRenderDragRect(content, node, undefined);\n                    if (dragComponent) {\n                        this.setDragComponent(event, dragComponent, 10, 10);\n                        rendered = true;\n                    }\n                }\n                if (!rendered) {\n                    this.setDragComponent(event, content, 10, 10);\n                }\n            }\n            else {\n                const element = event.target;\n                const rect = element.getBoundingClientRect();\n                const offsetX = event.clientX - rect.left;\n                const offsetY = event.clientY - rect.top;\n                const parentNode = node === null || node === void 0 ? void 0 : node.getParent();\n                const isInVerticalBorder = parentNode instanceof _model_BorderNode__WEBPACK_IMPORTED_MODULE_9__.BorderNode && parentNode.getOrientation() === _Orientation__WEBPACK_IMPORTED_MODULE_5__.Orientation.HORZ;\n                const x = isInVerticalBorder ? 10 : offsetX;\n                const y = isInVerticalBorder ? 10 : offsetY;\n                let rendered = false;\n                if (this.props.onRenderDragRect) {\n                    const content = react__WEBPACK_IMPORTED_MODULE_0__.createElement(_TabButtonStamp__WEBPACK_IMPORTED_MODULE_23__.TabButtonStamp, { key: node.getId(), layout: this, node: node });\n                    const dragComponent = this.props.onRenderDragRect(content, node, undefined);\n                    if (dragComponent) {\n                        this.setDragComponent(event, dragComponent, x, y);\n                        rendered = true;\n                    }\n                }\n                if (!rendered) {\n                    if ((0,_Utils__WEBPACK_IMPORTED_MODULE_22__.isSafari)()) { // safari doesnt render the offscreen tabstamps\n                        this.setDragComponent(event, react__WEBPACK_IMPORTED_MODULE_0__.createElement(_TabButtonStamp__WEBPACK_IMPORTED_MODULE_23__.TabButtonStamp, { node: node, layout: this }), x, y);\n                    }\n                    else {\n                        event.dataTransfer.setDragImage(node.getTabStamp(), x, y);\n                    }\n                }\n            }\n        };\n        this.onDragEnterRaw = (event) => {\n            this.dragEnterCount++;\n            if (this.dragEnterCount === 1) {\n                this.onDragEnter(event);\n            }\n        };\n        this.onDragLeaveRaw = (event) => {\n            this.dragEnterCount--;\n            if (this.dragEnterCount === 0) {\n                this.onDragLeave(event);\n            }\n        };\n        this.onDragEnter = (event) => {\n            // console.log(\"onDragEnter\", this.windowId, this.dragEnterCount);\n            var _a;\n            if (!LayoutInternal.dragState && this.props.onExternalDrag) { // not internal dragging\n                const externalDrag = this.props.onExternalDrag(event);\n                if (externalDrag) {\n                    const tempNode = _model_TabNode__WEBPACK_IMPORTED_MODULE_11__.TabNode.fromJson(externalDrag.json, this.props.model, false);\n                    LayoutInternal.dragState = new DragState(this.mainLayout, DragSource.External, tempNode, externalDrag.json, externalDrag.onDrop);\n                }\n            }\n            if (LayoutInternal.dragState) {\n                if (this.windowId !== _model_Model__WEBPACK_IMPORTED_MODULE_10__.Model.MAIN_WINDOW_ID && LayoutInternal.dragState.mainLayout === this.mainLayout) {\n                    LayoutInternal.dragState.mainLayout.setDraggingOverWindow(true);\n                }\n                if (LayoutInternal.dragState.mainLayout !== this.mainLayout) {\n                    return; // drag not by this layout or its popouts\n                }\n                event.preventDefault();\n                this.dropInfo = undefined;\n                const rootdiv = this.selfRef.current;\n                this.outlineDiv = this.currentDocument.createElement(\"div\");\n                this.outlineDiv.className = this.getClassName(_Types__WEBPACK_IMPORTED_MODULE_7__.CLASSES.FLEXLAYOUT__OUTLINE_RECT);\n                this.outlineDiv.style.visibility = \"hidden\";\n                const speed = this.props.model.getAttribute(\"tabDragSpeed\");\n                this.outlineDiv.style.transition = `top ${speed}s, left ${speed}s, width ${speed}s, height ${speed}s`;\n                rootdiv.appendChild(this.outlineDiv);\n                this.dragging = true;\n                this.showOverlay(true);\n                // add edge indicators\n                if (!this.isDraggingOverWindow && this.props.model.getMaximizedTabset(this.windowId) === undefined) {\n                    this.setState({ showEdges: this.props.model.isEnableEdgeDock() });\n                }\n                const clientRect = (_a = this.selfRef.current) === null || _a === void 0 ? void 0 : _a.getBoundingClientRect();\n                const r = new _Rect__WEBPACK_IMPORTED_MODULE_6__.Rect(event.clientX - (clientRect.left), event.clientY - (clientRect.top), 1, 1);\n                r.positionElement(this.outlineDiv);\n            }\n        };\n        this.onDragOver = (event) => {\n            var _a, _b, _c;\n            if (this.dragging && !this.isDraggingOverWindow) {\n                // console.log(\"onDragOver\");\n                event.preventDefault();\n                const clientRect = (_a = this.selfRef.current) === null || _a === void 0 ? void 0 : _a.getBoundingClientRect();\n                const pos = {\n                    x: event.clientX - ((_b = clientRect === null || clientRect === void 0 ? void 0 : clientRect.left) !== null && _b !== void 0 ? _b : 0),\n                    y: event.clientY - ((_c = clientRect === null || clientRect === void 0 ? void 0 : clientRect.top) !== null && _c !== void 0 ? _c : 0),\n                };\n                this.checkForBorderToShow(pos.x, pos.y);\n                let dropInfo = this.props.model.findDropTargetNode(this.windowId, LayoutInternal.dragState.dragNode, pos.x, pos.y);\n                if (dropInfo) {\n                    this.dropInfo = dropInfo;\n                    if (this.outlineDiv) {\n                        this.outlineDiv.className = this.getClassName(dropInfo.className);\n                        dropInfo.rect.positionElement(this.outlineDiv);\n                        this.outlineDiv.style.visibility = \"visible\";\n                    }\n                }\n            }\n        };\n        this.onDragLeave = (event) => {\n            // console.log(\"onDragLeave\", this.windowId, this.dragging);\n            if (this.dragging) {\n                if (this.windowId !== _model_Model__WEBPACK_IMPORTED_MODULE_10__.Model.MAIN_WINDOW_ID) {\n                    LayoutInternal.dragState.mainLayout.setDraggingOverWindow(false);\n                }\n                this.clearDragLocal();\n            }\n        };\n        this.onDrop = (event) => {\n            // console.log(\"ondrop\", this.windowId, this.dragging, Layout.dragState);\n            if (this.dragging) {\n                event.preventDefault();\n                const dragState = LayoutInternal.dragState;\n                if (this.dropInfo) {\n                    if (dragState.dragJson !== undefined) {\n                        const newNode = this.doAction(_model_Actions__WEBPACK_IMPORTED_MODULE_8__.Actions.addNode(dragState.dragJson, this.dropInfo.node.getId(), this.dropInfo.location, this.dropInfo.index));\n                        if (dragState.fnNewNodeDropped !== undefined) {\n                            dragState.fnNewNodeDropped(newNode, event);\n                        }\n                    }\n                    else if (dragState.dragNode !== undefined) {\n                        this.doAction(_model_Actions__WEBPACK_IMPORTED_MODULE_8__.Actions.moveNode(dragState.dragNode.getId(), this.dropInfo.node.getId(), this.dropInfo.location, this.dropInfo.index));\n                    }\n                }\n                this.mainLayout.clearDragMain();\n            }\n            this.dragEnterCount = 0; // must set to zero here ref sublayouts\n        };\n        this.orderedIds = [];\n        this.selfRef = react__WEBPACK_IMPORTED_MODULE_0__.createRef();\n        this.moveablesRef = react__WEBPACK_IMPORTED_MODULE_0__.createRef();\n        this.mainRef = react__WEBPACK_IMPORTED_MODULE_0__.createRef();\n        this.findBorderBarSizeRef = react__WEBPACK_IMPORTED_MODULE_0__.createRef();\n        this.supportsPopout = props.supportsPopout !== undefined ? props.supportsPopout : defaultSupportsPopout;\n        this.popoutURL = props.popoutURL ? props.popoutURL : \"popout.html\";\n        this.icons = Object.assign(Object.assign({}, defaultIcons), props.icons);\n        this.windowId = props.windowId ? props.windowId : _model_Model__WEBPACK_IMPORTED_MODULE_10__.Model.MAIN_WINDOW_ID;\n        this.mainLayout = this.props.mainLayout ? this.props.mainLayout : this;\n        this.isDraggingOverWindow = false;\n        this.layoutWindow = this.props.model.getwindowsMap().get(this.windowId);\n        this.layoutWindow.layout = this;\n        this.popoutWindowName = this.props.popoutWindowName || \"Popout Window\";\n        // this.renderCount = 0;\n        this.state = {\n            rect: _Rect__WEBPACK_IMPORTED_MODULE_6__.Rect.empty(),\n            editingTab: undefined,\n            showEdges: false,\n            showOverlay: false,\n            calculatedBorderBarSize: 29,\n            layoutRevision: 0,\n            forceRevision: 0,\n            showHiddenBorder: _DockLocation__WEBPACK_IMPORTED_MODULE_3__.DockLocation.CENTER\n        };\n        this.isMainWindow = this.windowId === _model_Model__WEBPACK_IMPORTED_MODULE_10__.Model.MAIN_WINDOW_ID;\n    }\n    componentDidMount() {\n        this.updateRect();\n        this.currentDocument = this.selfRef.current.ownerDocument;\n        this.currentWindow = this.currentDocument.defaultView;\n        this.layoutWindow.window = this.currentWindow;\n        this.layoutWindow.toScreenRectFunction = (r) => this.getScreenRect(r);\n        this.resizeObserver = new ResizeObserver(entries => {\n            requestAnimationFrame(() => {\n                this.updateRect();\n            });\n        });\n        if (this.selfRef.current) {\n            this.resizeObserver.observe(this.selfRef.current);\n        }\n        if (this.isMainWindow) {\n            this.props.model.addChangeListener(this.onModelChange);\n            this.updateLayoutMetrics();\n        }\n        else {\n            // since resizeObserver doesn't always work as expected when observing element in another document\n            this.currentWindow.addEventListener(\"resize\", () => {\n                this.updateRect();\n            });\n            const sourceElement = this.props.mainLayout.getRootDiv();\n            const targetElement = this.selfRef.current;\n            (0,_Utils__WEBPACK_IMPORTED_MODULE_22__.copyInlineStyles)(sourceElement, targetElement);\n            this.styleObserver = new MutationObserver(() => {\n                const changed = (0,_Utils__WEBPACK_IMPORTED_MODULE_22__.copyInlineStyles)(sourceElement, targetElement);\n                if (changed) {\n                    this.redraw(\"mutation observer\");\n                }\n            });\n            // Observe changes to the source element's style attribute\n            this.styleObserver.observe(sourceElement, { attributeFilter: ['style'] });\n        }\n        // allow tabs to overlay when hidden\n        document.addEventListener('visibilitychange', () => {\n            for (const [_, layoutWindow] of this.props.model.getwindowsMap()) {\n                const layout = layoutWindow.layout;\n                if (layout) {\n                    this.redraw(\"visibility change\");\n                }\n            }\n        });\n    }\n    componentDidUpdate() {\n        this.currentDocument = this.selfRef.current.ownerDocument;\n        this.currentWindow = this.currentDocument.defaultView;\n        if (this.isMainWindow) {\n            if (this.props.model !== this.previousModel) {\n                if (this.previousModel !== undefined) {\n                    this.previousModel.removeChangeListener(this.onModelChange); // stop listening to old model\n                }\n                this.props.model.getwindowsMap().get(this.windowId).layout = this;\n                this.props.model.addChangeListener(this.onModelChange);\n                this.layoutWindow = this.props.model.getwindowsMap().get(this.windowId);\n                this.layoutWindow.layout = this;\n                this.layoutWindow.toScreenRectFunction = (r) => this.getScreenRect(r);\n                this.previousModel = this.props.model;\n                this.tidyMoveablesMap();\n            }\n            this.updateLayoutMetrics();\n        }\n    }\n    componentWillUnmount() {\n        var _a, _b;\n        if (this.selfRef.current) {\n            (_a = this.resizeObserver) === null || _a === void 0 ? void 0 : _a.unobserve(this.selfRef.current);\n        }\n        (_b = this.styleObserver) === null || _b === void 0 ? void 0 : _b.disconnect();\n    }\n    render() {\n        // console.log(\"render\", this.windowId, this.state.revision, this.renderCount++);\n        // first render will be used to find the size (via selfRef)\n        if (!this.selfRef.current) {\n            return (react__WEBPACK_IMPORTED_MODULE_0__.createElement(\"div\", { ref: this.selfRef, className: this.getClassName(_Types__WEBPACK_IMPORTED_MODULE_7__.CLASSES.FLEXLAYOUT__LAYOUT) },\n                react__WEBPACK_IMPORTED_MODULE_0__.createElement(\"div\", { ref: this.moveablesRef, key: \"__moveables__\", className: this.getClassName(_Types__WEBPACK_IMPORTED_MODULE_7__.CLASSES.FLEXLAYOUT__LAYOUT_MOVEABLES) }),\n                this.renderMetricsElements()));\n        }\n        const model = this.props.model;\n        model.getRoot(this.windowId).calcMinMaxSize();\n        model.getRoot(this.windowId).setPaths(\"\");\n        model.getBorderSet().setPaths();\n        const inner = this.renderLayout();\n        const outer = this.renderBorders(inner);\n        const tabs = this.renderTabs();\n        const reorderedTabs = this.reorderComponents(tabs, this.orderedIds);\n        let floatingWindows = null;\n        let tabMoveables = null;\n        let tabStamps = null;\n        let metricElements = null;\n        if (this.isMainWindow) {\n            floatingWindows = this.renderWindows();\n            metricElements = this.renderMetricsElements();\n            tabMoveables = this.renderTabMoveables();\n            tabStamps = react__WEBPACK_IMPORTED_MODULE_0__.createElement(\"div\", { key: \"__tabStamps__\", className: this.getClassName(_Types__WEBPACK_IMPORTED_MODULE_7__.CLASSES.FLEXLAYOUT__LAYOUT_TAB_STAMPS) }, this.renderTabStamps());\n        }\n        return (react__WEBPACK_IMPORTED_MODULE_0__.createElement(\"div\", { ref: this.selfRef, className: this.getClassName(_Types__WEBPACK_IMPORTED_MODULE_7__.CLASSES.FLEXLAYOUT__LAYOUT), onDragEnter: this.onDragEnterRaw, onDragLeave: this.onDragLeaveRaw, onDragOver: this.onDragOver, onDrop: this.onDrop },\n            react__WEBPACK_IMPORTED_MODULE_0__.createElement(\"div\", { ref: this.moveablesRef, key: \"__moveables__\", className: this.getClassName(_Types__WEBPACK_IMPORTED_MODULE_7__.CLASSES.FLEXLAYOUT__LAYOUT_MOVEABLES) }),\n            metricElements,\n            react__WEBPACK_IMPORTED_MODULE_0__.createElement(_Overlay__WEBPACK_IMPORTED_MODULE_19__.Overlay, { key: \"__overlay__\", layout: this, show: this.state.showOverlay }),\n            outer,\n            reorderedTabs,\n            tabMoveables,\n            tabStamps,\n            this.state.portal,\n            floatingWindows));\n    }\n    renderBorders(inner) {\n        const classMain = this.getClassName(_Types__WEBPACK_IMPORTED_MODULE_7__.CLASSES.FLEXLAYOUT__LAYOUT_MAIN);\n        const borders = this.props.model.getBorderSet().getBorderMap();\n        if (this.isMainWindow && borders.size > 0) {\n            inner = (react__WEBPACK_IMPORTED_MODULE_0__.createElement(\"div\", { className: classMain, ref: this.mainRef }, inner));\n            const borderSetComponents = new Map();\n            const borderSetContentComponents = new Map();\n            for (const [_, location] of _DockLocation__WEBPACK_IMPORTED_MODULE_3__.DockLocation.values) {\n                const border = borders.get(location);\n                const showBorder = border && border.isShowing() && (!border.isAutoHide() ||\n                    (border.isAutoHide() && (border.getChildren().length > 0 || this.state.showHiddenBorder === location)));\n                if (showBorder) {\n                    borderSetComponents.set(location, react__WEBPACK_IMPORTED_MODULE_0__.createElement(_BorderTabSet__WEBPACK_IMPORTED_MODULE_14__.BorderTabSet, { layout: this, border: border, size: this.state.calculatedBorderBarSize }));\n                    borderSetContentComponents.set(location, react__WEBPACK_IMPORTED_MODULE_0__.createElement(_BorderTab__WEBPACK_IMPORTED_MODULE_13__.BorderTab, { layout: this, border: border, show: border.getSelected() !== -1 }));\n                }\n            }\n            const classBorderOuter = this.getClassName(_Types__WEBPACK_IMPORTED_MODULE_7__.CLASSES.FLEXLAYOUT__LAYOUT_BORDER_CONTAINER);\n            const classBorderInner = this.getClassName(_Types__WEBPACK_IMPORTED_MODULE_7__.CLASSES.FLEXLAYOUT__LAYOUT_BORDER_CONTAINER_INNER);\n            if (this.props.model.getBorderSet().getLayoutHorizontal()) {\n                const innerWithBorderTabs = (react__WEBPACK_IMPORTED_MODULE_0__.createElement(\"div\", { className: classBorderInner, style: { flexDirection: \"column\" } },\n                    borderSetContentComponents.get(_DockLocation__WEBPACK_IMPORTED_MODULE_3__.DockLocation.TOP),\n                    react__WEBPACK_IMPORTED_MODULE_0__.createElement(\"div\", { className: classBorderInner, style: { flexDirection: \"row\" } },\n                        borderSetContentComponents.get(_DockLocation__WEBPACK_IMPORTED_MODULE_3__.DockLocation.LEFT),\n                        inner,\n                        borderSetContentComponents.get(_DockLocation__WEBPACK_IMPORTED_MODULE_3__.DockLocation.RIGHT)),\n                    borderSetContentComponents.get(_DockLocation__WEBPACK_IMPORTED_MODULE_3__.DockLocation.BOTTOM)));\n                return (react__WEBPACK_IMPORTED_MODULE_0__.createElement(\"div\", { className: classBorderOuter, style: { flexDirection: \"column\" } },\n                    borderSetComponents.get(_DockLocation__WEBPACK_IMPORTED_MODULE_3__.DockLocation.TOP),\n                    react__WEBPACK_IMPORTED_MODULE_0__.createElement(\"div\", { className: classBorderInner, style: { flexDirection: \"row\" } },\n                        borderSetComponents.get(_DockLocation__WEBPACK_IMPORTED_MODULE_3__.DockLocation.LEFT),\n                        innerWithBorderTabs,\n                        borderSetComponents.get(_DockLocation__WEBPACK_IMPORTED_MODULE_3__.DockLocation.RIGHT)),\n                    borderSetComponents.get(_DockLocation__WEBPACK_IMPORTED_MODULE_3__.DockLocation.BOTTOM)));\n            }\n            else {\n                const innerWithBorderTabs = (react__WEBPACK_IMPORTED_MODULE_0__.createElement(\"div\", { className: classBorderInner, style: { flexDirection: \"row\" } },\n                    borderSetContentComponents.get(_DockLocation__WEBPACK_IMPORTED_MODULE_3__.DockLocation.LEFT),\n                    react__WEBPACK_IMPORTED_MODULE_0__.createElement(\"div\", { className: classBorderInner, style: { flexDirection: \"column\" } },\n                        borderSetContentComponents.get(_DockLocation__WEBPACK_IMPORTED_MODULE_3__.DockLocation.TOP),\n                        inner,\n                        borderSetContentComponents.get(_DockLocation__WEBPACK_IMPORTED_MODULE_3__.DockLocation.BOTTOM)),\n                    borderSetContentComponents.get(_DockLocation__WEBPACK_IMPORTED_MODULE_3__.DockLocation.RIGHT)));\n                return (react__WEBPACK_IMPORTED_MODULE_0__.createElement(\"div\", { className: classBorderOuter, style: { flexDirection: \"row\" } },\n                    borderSetComponents.get(_DockLocation__WEBPACK_IMPORTED_MODULE_3__.DockLocation.LEFT),\n                    react__WEBPACK_IMPORTED_MODULE_0__.createElement(\"div\", { className: classBorderInner, style: { flexDirection: \"column\" } },\n                        borderSetComponents.get(_DockLocation__WEBPACK_IMPORTED_MODULE_3__.DockLocation.TOP),\n                        innerWithBorderTabs,\n                        borderSetComponents.get(_DockLocation__WEBPACK_IMPORTED_MODULE_3__.DockLocation.BOTTOM)),\n                    borderSetComponents.get(_DockLocation__WEBPACK_IMPORTED_MODULE_3__.DockLocation.RIGHT)));\n            }\n        }\n        else { // no borders\n            return (react__WEBPACK_IMPORTED_MODULE_0__.createElement(\"div\", { className: classMain, ref: this.mainRef, style: { position: \"absolute\", top: 0, left: 0, bottom: 0, right: 0, display: \"flex\" } }, inner));\n        }\n    }\n    renderLayout() {\n        return (react__WEBPACK_IMPORTED_MODULE_0__.createElement(react__WEBPACK_IMPORTED_MODULE_0__.Fragment, null,\n            react__WEBPACK_IMPORTED_MODULE_0__.createElement(_Row__WEBPACK_IMPORTED_MODULE_20__.Row, { key: \"__row__\", layout: this, node: this.props.model.getRoot(this.windowId) }),\n            this.renderEdgeIndicators()));\n    }\n    renderEdgeIndicators() {\n        const edges = [];\n        const arrowIcon = this.icons.edgeArrow;\n        if (this.state.showEdges) {\n            const r = this.props.model.getRoot(this.windowId).getRect();\n            const length = edgeRectLength;\n            const width = edgeRectWidth;\n            const offset = edgeRectLength / 2;\n            const className = this.getClassName(_Types__WEBPACK_IMPORTED_MODULE_7__.CLASSES.FLEXLAYOUT__EDGE_RECT);\n            const radius = 50;\n            edges.push(react__WEBPACK_IMPORTED_MODULE_0__.createElement(\"div\", { key: \"North\", style: { top: 0, left: r.width / 2 - offset, width: length, height: width, borderBottomLeftRadius: radius, borderBottomRightRadius: radius }, className: className + \" \" + this.getClassName(_Types__WEBPACK_IMPORTED_MODULE_7__.CLASSES.FLEXLAYOUT__EDGE_RECT_TOP) },\n                react__WEBPACK_IMPORTED_MODULE_0__.createElement(\"div\", { style: { transform: \"rotate(180deg)\" } }, arrowIcon)));\n            edges.push(react__WEBPACK_IMPORTED_MODULE_0__.createElement(\"div\", { key: \"West\", style: { top: r.height / 2 - offset, left: 0, width: width, height: length, borderTopRightRadius: radius, borderBottomRightRadius: radius }, className: className + \" \" + this.getClassName(_Types__WEBPACK_IMPORTED_MODULE_7__.CLASSES.FLEXLAYOUT__EDGE_RECT_LEFT) },\n                react__WEBPACK_IMPORTED_MODULE_0__.createElement(\"div\", { style: { transform: \"rotate(90deg)\" } }, arrowIcon)));\n            edges.push(react__WEBPACK_IMPORTED_MODULE_0__.createElement(\"div\", { key: \"South\", style: { top: r.height - width, left: r.width / 2 - offset, width: length, height: width, borderTopLeftRadius: radius, borderTopRightRadius: radius }, className: className + \" \" + this.getClassName(_Types__WEBPACK_IMPORTED_MODULE_7__.CLASSES.FLEXLAYOUT__EDGE_RECT_BOTTOM) },\n                react__WEBPACK_IMPORTED_MODULE_0__.createElement(\"div\", null, arrowIcon)));\n            edges.push(react__WEBPACK_IMPORTED_MODULE_0__.createElement(\"div\", { key: \"East\", style: { top: r.height / 2 - offset, left: r.width - width, width: width, height: length, borderTopLeftRadius: radius, borderBottomLeftRadius: radius }, className: className + \" \" + this.getClassName(_Types__WEBPACK_IMPORTED_MODULE_7__.CLASSES.FLEXLAYOUT__EDGE_RECT_RIGHT) },\n                react__WEBPACK_IMPORTED_MODULE_0__.createElement(\"div\", { style: { transform: \"rotate(-90deg)\" } }, arrowIcon)));\n        }\n        return edges;\n    }\n    renderWindows() {\n        const floatingWindows = [];\n        if (this.supportsPopout) {\n            const windows = this.props.model.getwindowsMap();\n            let i = 1;\n            for (const [windowId, layoutWindow] of windows) {\n                if (windowId !== _model_Model__WEBPACK_IMPORTED_MODULE_10__.Model.MAIN_WINDOW_ID) {\n                    floatingWindows.push(react__WEBPACK_IMPORTED_MODULE_0__.createElement(_PopoutWindow__WEBPACK_IMPORTED_MODULE_17__.PopoutWindow, { key: windowId, layout: this, title: this.popoutWindowName + \" \" + i, layoutWindow: layoutWindow, url: this.popoutURL + \"?id=\" + windowId, onSetWindow: this.onSetWindow, onCloseWindow: this.onCloseWindow },\n                        react__WEBPACK_IMPORTED_MODULE_0__.createElement(LayoutInternal, Object.assign({}, this.props, { windowId: windowId, mainLayout: this }))));\n                    i++;\n                }\n            }\n        }\n        return floatingWindows;\n    }\n    renderTabMoveables() {\n        const tabMoveables = [];\n        this.props.model.visitNodes((node) => {\n            if (node instanceof _model_TabNode__WEBPACK_IMPORTED_MODULE_11__.TabNode) {\n                const child = node;\n                const element = this.getMoveableElement(child.getId());\n                child.setMoveableElement(element);\n                const selected = child.isSelected();\n                const rect = child.getParent().getContentRect();\n                // only render first time if size >0\n                const renderTab = child.isRendered() ||\n                    ((selected || !child.isEnableRenderOnDemand()) && (rect.width > 0 && rect.height > 0));\n                if (renderTab) {\n                    //  console.log(\"rendertab\", child.getName(), this.props.renderRevision);\n                    const key = child.getId() + (child.isEnableWindowReMount() ? child.getWindowId() : \"\");\n                    tabMoveables.push((0,react_dom__WEBPACK_IMPORTED_MODULE_1__.createPortal)(react__WEBPACK_IMPORTED_MODULE_0__.createElement(_SizeTracker__WEBPACK_IMPORTED_MODULE_24__.SizeTracker, { rect: rect, selected: child.isSelected(), forceRevision: this.state.forceRevision, tabsRevision: this.props.renderRevision, key: key },\n                        react__WEBPACK_IMPORTED_MODULE_0__.createElement(_ErrorBoundary__WEBPACK_IMPORTED_MODULE_16__.ErrorBoundary, { message: this.i18nName(_I18nLabel__WEBPACK_IMPORTED_MODULE_4__.I18nLabel.Error_rendering_component) }, this.props.factory(child))), element, key));\n                    child.setRendered(renderTab);\n                }\n            }\n        });\n        return tabMoveables;\n    }\n    renderTabStamps() {\n        const tabStamps = [];\n        this.props.model.visitNodes((node) => {\n            if (node instanceof _model_TabNode__WEBPACK_IMPORTED_MODULE_11__.TabNode) {\n                const child = node;\n                // what the tab should look like when dragged (since images need to have been loaded before drag image can be taken)\n                tabStamps.push(react__WEBPACK_IMPORTED_MODULE_0__.createElement(_DragContainer__WEBPACK_IMPORTED_MODULE_15__.DragContainer, { key: child.getId(), layout: this, node: child }));\n            }\n        });\n        return tabStamps;\n    }\n    renderTabs() {\n        const tabs = new Map();\n        this.props.model.visitWindowNodes(this.windowId, (node) => {\n            if (node instanceof _model_TabNode__WEBPACK_IMPORTED_MODULE_11__.TabNode) {\n                const child = node;\n                const selected = child.isSelected();\n                const path = child.getPath();\n                const renderTab = child.isRendered() || selected || !child.isEnableRenderOnDemand();\n                if (renderTab) {\n                    // const rect = (child.getParent() as BorderNode | TabSetNode).getContentRect();\n                    // const key = child.getId();\n                    tabs.set(child.getId(), (\n                    // <SizeTracker rect={rect} forceRevision={this.state.forceRevision} key={key}>\n                    react__WEBPACK_IMPORTED_MODULE_0__.createElement(_Tab__WEBPACK_IMPORTED_MODULE_21__.Tab, { key: child.getId(), layout: this, path: path, node: child, selected: selected })\n                    // </SizeTracker>\n                    ));\n                }\n            }\n        });\n        return tabs;\n    }\n    renderMetricsElements() {\n        return (react__WEBPACK_IMPORTED_MODULE_0__.createElement(\"div\", { key: \"findBorderBarSize\", ref: this.findBorderBarSizeRef, className: this.getClassName(_Types__WEBPACK_IMPORTED_MODULE_7__.CLASSES.FLEXLAYOUT__BORDER_SIZER) }, \"FindBorderBarSize\"));\n    }\n    checkForBorderToShow(x, y) {\n        const r = this.getBoundingClientRect(this.mainRef.current);\n        const c = r.getCenter();\n        const margin = edgeRectWidth;\n        const offset = edgeRectLength / 2;\n        let overEdge = false;\n        if (this.props.model.isEnableEdgeDock() && this.state.showHiddenBorder === _DockLocation__WEBPACK_IMPORTED_MODULE_3__.DockLocation.CENTER) {\n            if ((y > c.y - offset && y < c.y + offset) ||\n                (x > c.x - offset && x < c.x + offset)) {\n                overEdge = true;\n            }\n        }\n        let location = _DockLocation__WEBPACK_IMPORTED_MODULE_3__.DockLocation.CENTER;\n        if (!overEdge) {\n            if (x <= r.x + margin) {\n                location = _DockLocation__WEBPACK_IMPORTED_MODULE_3__.DockLocation.LEFT;\n            }\n            else if (x >= r.getRight() - margin) {\n                location = _DockLocation__WEBPACK_IMPORTED_MODULE_3__.DockLocation.RIGHT;\n            }\n            else if (y <= r.y + margin) {\n                location = _DockLocation__WEBPACK_IMPORTED_MODULE_3__.DockLocation.TOP;\n            }\n            else if (y >= r.getBottom() - margin) {\n                location = _DockLocation__WEBPACK_IMPORTED_MODULE_3__.DockLocation.BOTTOM;\n            }\n        }\n        if (location !== this.state.showHiddenBorder) {\n            this.setState({ showHiddenBorder: location });\n        }\n    }\n    tidyMoveablesMap() {\n        // console.log(\"tidyMoveablesMap\");\n        const tabs = new Map();\n        this.props.model.visitNodes((node, _) => {\n            if (node instanceof _model_TabNode__WEBPACK_IMPORTED_MODULE_11__.TabNode) {\n                tabs.set(node.getId(), node);\n            }\n        });\n        for (const [nodeId, element] of this.moveableElementMap) {\n            if (!tabs.has(nodeId)) {\n                // console.log(\"delete\", nodeId);\n                element.remove(); // remove from dom\n                this.moveableElementMap.delete(nodeId); // remove map entry \n            }\n        }\n    }\n    reorderComponents(components, ids) {\n        const nextIds = [];\n        const nextIdsSet = new Set();\n        let reordered = [];\n        // Keep any previous tabs in the same DOM order as before, removing any that have been deleted\n        for (const id of ids) {\n            if (components.get(id)) {\n                nextIds.push(id);\n                nextIdsSet.add(id);\n            }\n        }\n        ids.splice(0, ids.length, ...nextIds);\n        // Add tabs that have been added to the DOM\n        for (const [id, _] of components) {\n            if (!nextIdsSet.has(id)) {\n                ids.push(id);\n            }\n        }\n        reordered = ids.map((id) => {\n            return components.get(id);\n        });\n        return reordered;\n    }\n    redraw(type) {\n        // console.log(\"redraw\", this.windowId, type);\n        this.mainLayout.setState((state, props) => { return { forceRevision: state.forceRevision + 1 }; });\n    }\n    redrawInternal(type) {\n        // console.log(\"redrawInternal\", this.windowId, type);\n        this.mainLayout.setState((state, props) => { return { layoutRevision: state.layoutRevision + 1 }; });\n    }\n    doAction(action) {\n        if (this.props.onAction !== undefined) {\n            const outcome = this.props.onAction(action);\n            if (outcome !== undefined) {\n                return this.props.model.doAction(outcome);\n            }\n            return undefined;\n        }\n        else {\n            return this.props.model.doAction(action);\n        }\n    }\n    getBoundingClientRect(div) {\n        const layoutRect = this.getDomRect();\n        if (layoutRect) {\n            return _Rect__WEBPACK_IMPORTED_MODULE_6__.Rect.getBoundingClientRect(div).relativeTo(layoutRect);\n        }\n        return _Rect__WEBPACK_IMPORTED_MODULE_6__.Rect.empty();\n    }\n    getMoveableContainer() {\n        return this.moveablesRef.current;\n    }\n    getMoveableElement(id) {\n        let moveableElement = this.moveableElementMap.get(id);\n        if (moveableElement === undefined) {\n            moveableElement = document.createElement(\"div\");\n            this.moveablesRef.current.appendChild(moveableElement);\n            moveableElement.className = _Types__WEBPACK_IMPORTED_MODULE_7__.CLASSES.FLEXLAYOUT__TAB_MOVEABLE;\n            this.moveableElementMap.set(id, moveableElement);\n        }\n        return moveableElement;\n    }\n    getMainLayout() {\n        return this.mainLayout;\n    }\n    getCurrentDocument() {\n        return this.currentDocument;\n    }\n    getDomRect() {\n        if (this.selfRef.current) {\n            return _Rect__WEBPACK_IMPORTED_MODULE_6__.Rect.fromDomRect(this.selfRef.current.getBoundingClientRect());\n        }\n        else {\n            return _Rect__WEBPACK_IMPORTED_MODULE_6__.Rect.empty();\n        }\n    }\n    getWindowId() {\n        return this.windowId;\n    }\n    getRootDiv() {\n        return this.selfRef.current;\n    }\n    getMainElement() {\n        return this.mainRef.current;\n    }\n    getFactory() {\n        return this.props.factory;\n    }\n    isSupportsPopout() {\n        return this.supportsPopout;\n    }\n    isRealtimeResize() {\n        var _a;\n        return (_a = this.props.realtimeResize) !== null && _a !== void 0 ? _a : false;\n    }\n    getPopoutURL() {\n        return this.popoutURL;\n    }\n    setEditingTab(tabNode) {\n        this.setState({ editingTab: tabNode });\n    }\n    getEditingTab() {\n        return this.state.editingTab;\n    }\n    getModel() {\n        return this.props.model;\n    }\n    getScreenRect(inRect) {\n        const rect = inRect.clone();\n        const layoutRect = this.getDomRect();\n        // Note: outerHeight can be less than innerHeight when window is zoomed, so cannot use\n        // const navHeight = Math.min(65, this.currentWindow!.outerHeight - this.currentWindow!.innerHeight);\n        // const navWidth = Math.min(65, this.currentWindow!.outerWidth - this.currentWindow!.innerWidth);\n        const navHeight = 60;\n        const navWidth = 2;\n        // console.log(rect.y, this.currentWindow!.screenX,layoutRect.y);\n        rect.x = this.currentWindow.screenX + this.currentWindow.scrollX + navWidth / 2 + layoutRect.x + rect.x;\n        rect.y = this.currentWindow.screenY + this.currentWindow.scrollY + (navHeight - navWidth / 2) + layoutRect.y + rect.y;\n        rect.height += navHeight;\n        rect.width += navWidth;\n        return rect;\n    }\n    addTabToTabSet(tabsetId, json) {\n        const tabsetNode = this.props.model.getNodeById(tabsetId);\n        if (tabsetNode !== undefined) {\n            const node = this.doAction(_model_Actions__WEBPACK_IMPORTED_MODULE_8__.Actions.addNode(json, tabsetId, _DockLocation__WEBPACK_IMPORTED_MODULE_3__.DockLocation.CENTER, -1));\n            return node;\n        }\n        return undefined;\n    }\n    addTabToActiveTabSet(json) {\n        const tabsetNode = this.props.model.getActiveTabset(this.windowId);\n        if (tabsetNode !== undefined) {\n            const node = this.doAction(_model_Actions__WEBPACK_IMPORTED_MODULE_8__.Actions.addNode(json, tabsetNode.getId(), _DockLocation__WEBPACK_IMPORTED_MODULE_3__.DockLocation.CENTER, -1));\n            return node;\n        }\n        return undefined;\n    }\n    maximize(tabsetNode) {\n        this.doAction(_model_Actions__WEBPACK_IMPORTED_MODULE_8__.Actions.maximizeToggle(tabsetNode.getId(), this.getWindowId()));\n    }\n    customizeTab(tabNode, renderValues) {\n        if (this.props.onRenderTab) {\n            this.props.onRenderTab(tabNode, renderValues);\n        }\n    }\n    customizeTabSet(tabSetNode, renderValues) {\n        if (this.props.onRenderTabSet) {\n            this.props.onRenderTabSet(tabSetNode, renderValues);\n        }\n    }\n    i18nName(id, param) {\n        let message;\n        if (this.props.i18nMapper) {\n            message = this.props.i18nMapper(id, param);\n        }\n        if (message === undefined) {\n            message = id + (param === undefined ? \"\" : param);\n        }\n        return message;\n    }\n    getShowOverflowMenu() {\n        return this.props.onShowOverflowMenu;\n    }\n    getTabSetPlaceHolderCallback() {\n        return this.props.onTabSetPlaceHolder;\n    }\n    showContextMenu(node, event) {\n        if (this.props.onContextMenu) {\n            this.props.onContextMenu(node, event);\n        }\n    }\n    auxMouseClick(node, event) {\n        if (this.props.onAuxMouseClick) {\n            this.props.onAuxMouseClick(node, event);\n        }\n    }\n    showOverlay(show) {\n        this.setState({ showOverlay: show });\n        (0,_Utils__WEBPACK_IMPORTED_MODULE_22__.enablePointerOnIFrames)(!show, this.currentDocument);\n    }\n    // *************************** Start Drag Drop *************************************\n    addTabWithDragAndDrop(event, json, onDrop) {\n        const tempNode = _model_TabNode__WEBPACK_IMPORTED_MODULE_11__.TabNode.fromJson(json, this.props.model, false);\n        LayoutInternal.dragState = new DragState(this.mainLayout, DragSource.Add, tempNode, json, onDrop);\n    }\n    moveTabWithDragAndDrop(event, node) {\n        this.setDragNode(event, node);\n    }\n    setDragComponent(event, component, x, y) {\n        let dragElement = (react__WEBPACK_IMPORTED_MODULE_0__.createElement(\"div\", { style: { position: \"unset\" }, className: this.getClassName(_Types__WEBPACK_IMPORTED_MODULE_7__.CLASSES.FLEXLAYOUT__LAYOUT) + \" \" + this.getClassName(_Types__WEBPACK_IMPORTED_MODULE_7__.CLASSES.FLEXLAYOUT__DRAG_RECT) }, component));\n        const tempDiv = this.currentDocument.createElement('div');\n        tempDiv.setAttribute(\"data-layout-path\", \"/drag-rectangle\");\n        tempDiv.style.position = \"absolute\";\n        tempDiv.style.left = \"-10000px\";\n        tempDiv.style.top = \"-10000px\";\n        this.currentDocument.body.appendChild(tempDiv);\n        (0,react_dom_client__WEBPACK_IMPORTED_MODULE_2__.createRoot)(tempDiv).render(dragElement);\n        event.dataTransfer.setDragImage(tempDiv, x, y);\n        setTimeout(() => {\n            this.currentDocument.body.removeChild(tempDiv);\n        }, 0);\n    }\n    setDraggingOverWindow(overWindow) {\n        // console.log(\"setDraggingOverWindow\", overWindow);\n        if (this.isDraggingOverWindow !== overWindow) {\n            if (this.outlineDiv) {\n                this.outlineDiv.style.visibility = overWindow ? \"hidden\" : \"visible\";\n            }\n            if (overWindow) {\n                this.setState({ showEdges: false });\n            }\n            else {\n                // add edge indicators\n                if (this.props.model.getMaximizedTabset(this.windowId) === undefined) {\n                    this.setState({ showEdges: this.props.model.isEnableEdgeDock() });\n                }\n            }\n            this.isDraggingOverWindow = overWindow;\n        }\n    }\n    clearDragMain() {\n        // console.log(\"clear drag main\");\n        LayoutInternal.dragState = undefined;\n        if (this.windowId === _model_Model__WEBPACK_IMPORTED_MODULE_10__.Model.MAIN_WINDOW_ID) {\n            this.isDraggingOverWindow = false;\n        }\n        for (const [, layoutWindow] of this.props.model.getwindowsMap()) {\n            // console.log(layoutWindow);\n            layoutWindow.layout.clearDragLocal();\n        }\n    }\n    clearDragLocal() {\n        // console.log(\"clear drag local\", this.windowId);\n        this.setState({ showEdges: false });\n        this.showOverlay(false);\n        this.dragEnterCount = 0;\n        this.dragging = false;\n        if (this.outlineDiv) {\n            this.selfRef.current.removeChild(this.outlineDiv);\n            this.outlineDiv = undefined;\n        }\n    }\n}\nLayoutInternal.dragState = undefined;\nconst FlexLayoutVersion = \"0.8.5\";\nconst defaultIcons = {\n    close: react__WEBPACK_IMPORTED_MODULE_0__.createElement(_Icons__WEBPACK_IMPORTED_MODULE_18__.CloseIcon, null),\n    closeTabset: react__WEBPACK_IMPORTED_MODULE_0__.createElement(_Icons__WEBPACK_IMPORTED_MODULE_18__.CloseIcon, null),\n    popout: react__WEBPACK_IMPORTED_MODULE_0__.createElement(_Icons__WEBPACK_IMPORTED_MODULE_18__.PopoutIcon, null),\n    maximize: react__WEBPACK_IMPORTED_MODULE_0__.createElement(_Icons__WEBPACK_IMPORTED_MODULE_18__.MaximizeIcon, null),\n    restore: react__WEBPACK_IMPORTED_MODULE_0__.createElement(_Icons__WEBPACK_IMPORTED_MODULE_18__.RestoreIcon, null),\n    more: react__WEBPACK_IMPORTED_MODULE_0__.createElement(_Icons__WEBPACK_IMPORTED_MODULE_18__.OverflowIcon, null),\n    edgeArrow: react__WEBPACK_IMPORTED_MODULE_0__.createElement(_Icons__WEBPACK_IMPORTED_MODULE_18__.EdgeIcon, null),\n    activeTabset: react__WEBPACK_IMPORTED_MODULE_0__.createElement(_Icons__WEBPACK_IMPORTED_MODULE_18__.AsterickIcon, null)\n};\nvar DragSource;\n(function (DragSource) {\n    DragSource[\"Internal\"] = \"internal\";\n    DragSource[\"External\"] = \"external\";\n    DragSource[\"Add\"] = \"add\";\n})(DragSource || (DragSource = {}));\n/** @internal */\nconst defaultSupportsPopout = (0,_Utils__WEBPACK_IMPORTED_MODULE_22__.isDesktop)();\n/** @internal */\nconst edgeRectLength = 100;\n/** @internal */\nconst edgeRectWidth = 10;\n// global layout drag state\nclass DragState {\n    constructor(mainLayout, dragSource, dragNode, dragJson, fnNewNodeDropped) {\n        this.mainLayout = mainLayout;\n        this.dragSource = dragSource;\n        this.dragNode = dragNode;\n        this.dragJson = dragJson;\n        this.fnNewNodeDropped = fnNewNodeDropped;\n    }\n}\n\n\n//# sourceURL=webpack://FlexLayout/./src/view/Layout.tsx?");
+eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpack_require__.d(__webpack_exports__, {\n/* harmony export */   FlexLayoutVersion: () => (/* binding */ FlexLayoutVersion),\n/* harmony export */   Layout: () => (/* binding */ Layout),\n/* harmony export */   LayoutInternal: () => (/* binding */ LayoutInternal)\n/* harmony export */ });\n/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! react */ \"react\");\n/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(react__WEBPACK_IMPORTED_MODULE_0__);\n/* harmony import */ var react_dom__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! react-dom */ \"react-dom\");\n/* harmony import */ var react_dom__WEBPACK_IMPORTED_MODULE_1___default = /*#__PURE__*/__webpack_require__.n(react_dom__WEBPACK_IMPORTED_MODULE_1__);\n/* harmony import */ var react_dom_client__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! react-dom/client */ \"./node_modules/.pnpm/react-dom@19.0.0_react@19.0.0/node_modules/react-dom/client.js\");\n/* harmony import */ var _DockLocation__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! ../DockLocation */ \"./src/DockLocation.ts\");\n/* harmony import */ var _I18nLabel__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(/*! ../I18nLabel */ \"./src/I18nLabel.ts\");\n/* harmony import */ var _Orientation__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__(/*! ../Orientation */ \"./src/Orientation.ts\");\n/* harmony import */ var _Rect__WEBPACK_IMPORTED_MODULE_6__ = __webpack_require__(/*! ../Rect */ \"./src/Rect.ts\");\n/* harmony import */ var _Types__WEBPACK_IMPORTED_MODULE_7__ = __webpack_require__(/*! ../Types */ \"./src/Types.ts\");\n/* harmony import */ var _model_Actions__WEBPACK_IMPORTED_MODULE_8__ = __webpack_require__(/*! ../model/Actions */ \"./src/model/Actions.ts\");\n/* harmony import */ var _model_BorderNode__WEBPACK_IMPORTED_MODULE_9__ = __webpack_require__(/*! ../model/BorderNode */ \"./src/model/BorderNode.ts\");\n/* harmony import */ var _model_Model__WEBPACK_IMPORTED_MODULE_10__ = __webpack_require__(/*! ../model/Model */ \"./src/model/Model.ts\");\n/* harmony import */ var _model_TabNode__WEBPACK_IMPORTED_MODULE_11__ = __webpack_require__(/*! ../model/TabNode */ \"./src/model/TabNode.ts\");\n/* harmony import */ var _model_TabSetNode__WEBPACK_IMPORTED_MODULE_12__ = __webpack_require__(/*! ../model/TabSetNode */ \"./src/model/TabSetNode.ts\");\n/* harmony import */ var _BorderTab__WEBPACK_IMPORTED_MODULE_13__ = __webpack_require__(/*! ./BorderTab */ \"./src/view/BorderTab.tsx\");\n/* harmony import */ var _BorderTabSet__WEBPACK_IMPORTED_MODULE_14__ = __webpack_require__(/*! ./BorderTabSet */ \"./src/view/BorderTabSet.tsx\");\n/* harmony import */ var _DragContainer__WEBPACK_IMPORTED_MODULE_15__ = __webpack_require__(/*! ./DragContainer */ \"./src/view/DragContainer.tsx\");\n/* harmony import */ var _ErrorBoundary__WEBPACK_IMPORTED_MODULE_16__ = __webpack_require__(/*! ./ErrorBoundary */ \"./src/view/ErrorBoundary.tsx\");\n/* harmony import */ var _PopoutWindow__WEBPACK_IMPORTED_MODULE_17__ = __webpack_require__(/*! ./PopoutWindow */ \"./src/view/PopoutWindow.tsx\");\n/* harmony import */ var _Icons__WEBPACK_IMPORTED_MODULE_18__ = __webpack_require__(/*! ./Icons */ \"./src/view/Icons.tsx\");\n/* harmony import */ var _Overlay__WEBPACK_IMPORTED_MODULE_19__ = __webpack_require__(/*! ./Overlay */ \"./src/view/Overlay.tsx\");\n/* harmony import */ var _Row__WEBPACK_IMPORTED_MODULE_20__ = __webpack_require__(/*! ./Row */ \"./src/view/Row.tsx\");\n/* harmony import */ var _Tab__WEBPACK_IMPORTED_MODULE_21__ = __webpack_require__(/*! ./Tab */ \"./src/view/Tab.tsx\");\n/* harmony import */ var _Utils__WEBPACK_IMPORTED_MODULE_22__ = __webpack_require__(/*! ./Utils */ \"./src/view/Utils.tsx\");\n/* harmony import */ var _TabButtonStamp__WEBPACK_IMPORTED_MODULE_23__ = __webpack_require__(/*! ./TabButtonStamp */ \"./src/view/TabButtonStamp.tsx\");\n/* harmony import */ var _SizeTracker__WEBPACK_IMPORTED_MODULE_24__ = __webpack_require__(/*! ./SizeTracker */ \"./src/view/SizeTracker.tsx\");\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n/**\n * A React component that hosts a multi-tabbed layout\n */\nclass Layout extends react__WEBPACK_IMPORTED_MODULE_0__.Component {\n    /** @internal */\n    constructor(props) {\n        super(props);\n        this.selfRef = react__WEBPACK_IMPORTED_MODULE_0__.createRef();\n        this.revision = 0;\n    }\n    /** re-render the layout */\n    redraw() {\n        this.selfRef.current.redraw(\"parent \" + this.revision);\n    }\n    /**\n     * Adds a new tab to the given tabset\n     * @param tabsetId the id of the tabset where the new tab will be added\n     * @param json the json for the new tab node\n     * @returns the added tab node or undefined\n     */\n    addTabToTabSet(tabsetId, json) {\n        return this.selfRef.current.addTabToTabSet(tabsetId, json);\n    }\n    /**\n     * Adds a new tab by dragging an item to the drop location, must be called from within an HTML\n     * drag start handler. You can use the setDragComponent() method to set the drag image before calling this\n     * method.\n     * @param event the drag start event\n     * @param json the json for the new tab node\n     * @param onDrop a callback to call when the drag is complete\n     */\n    addTabWithDragAndDrop(event, json, onDrop) {\n        this.selfRef.current.addTabWithDragAndDrop(event, json, onDrop);\n    }\n    /**\n     * Move a tab/tabset using drag and drop, must be called from within an HTML\n     * drag start handler\n     * @param event the drag start event\n     * @param node the tab or tabset to drag\n     */\n    moveTabWithDragAndDrop(event, node) {\n        this.selfRef.current.moveTabWithDragAndDrop(event, node);\n    }\n    /**\n     * Adds a new tab to the active tabset (if there is one)\n     * @param json the json for the new tab node\n     * @returns the added tab node or undefined\n     */\n    addTabToActiveTabSet(json) {\n        return this.selfRef.current.addTabToActiveTabSet(json);\n    }\n    /**\n     * Sets the drag image from a react component for a drag event\n     * @param event the drag event\n     * @param component the react component to be used for the drag image\n     * @param x the x position of the drag cursor on the image\n     * @param y the x position of the drag cursor on the image\n     */\n    setDragComponent(event, component, x, y) {\n        this.selfRef.current.setDragComponent(event, component, x, y);\n    }\n    /** Get the root div element of the layout */\n    getRootDiv() {\n        return this.selfRef.current.getRootDiv();\n    }\n    /** @internal */\n    render() {\n        return (react__WEBPACK_IMPORTED_MODULE_0__.createElement(LayoutInternal, Object.assign({ ref: this.selfRef }, this.props, { renderRevision: this.revision++ })));\n    }\n}\n/** @internal */\nclass LayoutInternal extends react__WEBPACK_IMPORTED_MODULE_0__.Component {\n    // private renderCount: any;\n    constructor(props) {\n        super(props);\n        this.moveableElementMap = new Map();\n        this.dragEnterCount = 0;\n        this.dragging = false;\n        this.updateLayoutMetrics = () => {\n            if (this.findBorderBarSizeRef.current) {\n                const borderBarSize = this.findBorderBarSizeRef.current.getBoundingClientRect().height;\n                if (borderBarSize !== this.state.calculatedBorderBarSize) {\n                    this.setState({ calculatedBorderBarSize: borderBarSize });\n                }\n            }\n        };\n        this.onModelChange = (action) => {\n            this.redrawInternal(\"model change\");\n            if (this.props.onModelChange) {\n                this.props.onModelChange(this.props.model, action);\n            }\n        };\n        this.updateRect = () => {\n            const rect = this.getDomRect();\n            if (!rect.equals(this.state.rect) && rect.width !== 0 && rect.height !== 0) {\n                // console.log(\"updateRect\", rect.floor());\n                this.setState({ rect });\n                if (this.windowId !== _model_Model__WEBPACK_IMPORTED_MODULE_10__.Model.MAIN_WINDOW_ID) {\n                    this.redrawInternal(\"rect updated\");\n                }\n            }\n        };\n        this.getClassName = (defaultClassName) => {\n            if (this.props.classNameMapper === undefined) {\n                return defaultClassName;\n            }\n            else {\n                return this.props.classNameMapper(defaultClassName);\n            }\n        };\n        this.onCloseWindow = (windowLayout) => {\n            this.doAction(_model_Actions__WEBPACK_IMPORTED_MODULE_8__.Actions.closeWindow(windowLayout.windowId));\n        };\n        this.onSetWindow = (windowLayout, window) => {\n        };\n        this.showControlInPortal = (control, element) => {\n            const portal = (0,react_dom__WEBPACK_IMPORTED_MODULE_1__.createPortal)(control, element);\n            this.setState({ portal });\n        };\n        this.hideControlInPortal = () => {\n            this.setState({ portal: undefined });\n        };\n        this.getIcons = () => {\n            return this.icons;\n        };\n        this.setDragNode = (event, node) => {\n            LayoutInternal.dragState = new DragState(this.mainLayout, DragSource.Internal, node, undefined, undefined);\n            // Note: can only set (very) limited types on android! so cannot set json\n            // Note: must set text/plain for android to allow drag, \n            //  so just set a simple message indicating its a flexlayout drag (this is not used anywhere else)\n            event.dataTransfer.setData('text/plain', \"--flexlayout--\");\n            event.dataTransfer.effectAllowed = \"copyMove\";\n            event.dataTransfer.dropEffect = \"move\";\n            this.dragEnterCount = 0;\n            if (node instanceof _model_TabSetNode__WEBPACK_IMPORTED_MODULE_12__.TabSetNode) {\n                let rendered = false;\n                let content = this.i18nName(_I18nLabel__WEBPACK_IMPORTED_MODULE_4__.I18nLabel.Move_Tabset);\n                if (node.getChildren().length > 0) {\n                    content = this.i18nName(_I18nLabel__WEBPACK_IMPORTED_MODULE_4__.I18nLabel.Move_Tabs).replace(\"?\", String(node.getChildren().length));\n                }\n                if (this.props.onRenderDragRect) {\n                    const dragComponent = this.props.onRenderDragRect(content, node, undefined);\n                    if (dragComponent) {\n                        this.setDragComponent(event, dragComponent, 10, 10);\n                        rendered = true;\n                    }\n                }\n                if (!rendered) {\n                    this.setDragComponent(event, content, 10, 10);\n                }\n            }\n            else {\n                const element = event.target;\n                const rect = element.getBoundingClientRect();\n                const offsetX = event.clientX - rect.left;\n                const offsetY = event.clientY - rect.top;\n                const parentNode = node === null || node === void 0 ? void 0 : node.getParent();\n                const isInVerticalBorder = parentNode instanceof _model_BorderNode__WEBPACK_IMPORTED_MODULE_9__.BorderNode && parentNode.getOrientation() === _Orientation__WEBPACK_IMPORTED_MODULE_5__.Orientation.HORZ;\n                const x = isInVerticalBorder ? 10 : offsetX;\n                const y = isInVerticalBorder ? 10 : offsetY;\n                let rendered = false;\n                if (this.props.onRenderDragRect) {\n                    const content = react__WEBPACK_IMPORTED_MODULE_0__.createElement(_TabButtonStamp__WEBPACK_IMPORTED_MODULE_23__.TabButtonStamp, { key: node.getId(), layout: this, node: node });\n                    const dragComponent = this.props.onRenderDragRect(content, node, undefined);\n                    if (dragComponent) {\n                        this.setDragComponent(event, dragComponent, x, y);\n                        rendered = true;\n                    }\n                }\n                if (!rendered) {\n                    if ((0,_Utils__WEBPACK_IMPORTED_MODULE_22__.isSafari)()) { // safari doesnt render the offscreen tabstamps\n                        this.setDragComponent(event, react__WEBPACK_IMPORTED_MODULE_0__.createElement(_TabButtonStamp__WEBPACK_IMPORTED_MODULE_23__.TabButtonStamp, { node: node, layout: this }), x, y);\n                    }\n                    else {\n                        event.dataTransfer.setDragImage(node.getTabStamp(), x, y);\n                    }\n                }\n            }\n        };\n        this.onDragEnterRaw = (event) => {\n            this.dragEnterCount++;\n            if (this.dragEnterCount === 1) {\n                this.onDragEnter(event);\n            }\n        };\n        this.onDragLeaveRaw = (event) => {\n            this.dragEnterCount--;\n            if (this.dragEnterCount === 0) {\n                this.onDragLeave(event);\n            }\n        };\n        this.onDragEnter = (event) => {\n            // console.log(\"onDragEnter\", this.windowId, this.dragEnterCount);\n            var _a;\n            if (!LayoutInternal.dragState && this.props.onExternalDrag) { // not internal dragging\n                const externalDrag = this.props.onExternalDrag(event);\n                if (externalDrag) {\n                    const tempNode = _model_TabNode__WEBPACK_IMPORTED_MODULE_11__.TabNode.fromJson(externalDrag.json, this.props.model, false);\n                    LayoutInternal.dragState = new DragState(this.mainLayout, DragSource.External, tempNode, externalDrag.json, externalDrag.onDrop);\n                }\n            }\n            if (LayoutInternal.dragState) {\n                if (this.windowId !== _model_Model__WEBPACK_IMPORTED_MODULE_10__.Model.MAIN_WINDOW_ID && LayoutInternal.dragState.mainLayout === this.mainLayout) {\n                    LayoutInternal.dragState.mainLayout.setDraggingOverWindow(true);\n                }\n                if (LayoutInternal.dragState.mainLayout !== this.mainLayout) {\n                    return; // drag not by this layout or its popouts\n                }\n                event.preventDefault();\n                this.dropInfo = undefined;\n                const rootdiv = this.selfRef.current;\n                this.outlineDiv = this.currentDocument.createElement(\"div\");\n                this.outlineDiv.className = this.getClassName(_Types__WEBPACK_IMPORTED_MODULE_7__.CLASSES.FLEXLAYOUT__OUTLINE_RECT);\n                this.outlineDiv.style.visibility = \"hidden\";\n                const speed = this.props.model.getAttribute(\"tabDragSpeed\");\n                this.outlineDiv.style.transition = `top ${speed}s, left ${speed}s, width ${speed}s, height ${speed}s`;\n                rootdiv.appendChild(this.outlineDiv);\n                this.dragging = true;\n                this.showOverlay(true);\n                // add edge indicators\n                if (!this.isDraggingOverWindow && this.props.model.getMaximizedTabset(this.windowId) === undefined) {\n                    this.setState({ showEdges: this.props.model.isEnableEdgeDock() });\n                }\n                const clientRect = (_a = this.selfRef.current) === null || _a === void 0 ? void 0 : _a.getBoundingClientRect();\n                const r = new _Rect__WEBPACK_IMPORTED_MODULE_6__.Rect(event.clientX - (clientRect.left), event.clientY - (clientRect.top), 1, 1);\n                r.positionElement(this.outlineDiv);\n            }\n        };\n        this.onDragOver = (event) => {\n            var _a, _b, _c;\n            if (this.dragging && !this.isDraggingOverWindow) {\n                // console.log(\"onDragOver\");\n                event.preventDefault();\n                const clientRect = (_a = this.selfRef.current) === null || _a === void 0 ? void 0 : _a.getBoundingClientRect();\n                const pos = {\n                    x: event.clientX - ((_b = clientRect === null || clientRect === void 0 ? void 0 : clientRect.left) !== null && _b !== void 0 ? _b : 0),\n                    y: event.clientY - ((_c = clientRect === null || clientRect === void 0 ? void 0 : clientRect.top) !== null && _c !== void 0 ? _c : 0),\n                };\n                this.checkForBorderToShow(pos.x, pos.y);\n                let dropInfo = this.props.model.findDropTargetNode(this.windowId, LayoutInternal.dragState.dragNode, pos.x, pos.y);\n                if (dropInfo) {\n                    this.dropInfo = dropInfo;\n                    if (this.outlineDiv) {\n                        this.outlineDiv.className = this.getClassName(dropInfo.className);\n                        dropInfo.rect.positionElement(this.outlineDiv);\n                        this.outlineDiv.style.visibility = \"visible\";\n                    }\n                }\n            }\n        };\n        this.onDragLeave = (event) => {\n            // console.log(\"onDragLeave\", this.windowId, this.dragging);\n            if (this.dragging) {\n                if (this.windowId !== _model_Model__WEBPACK_IMPORTED_MODULE_10__.Model.MAIN_WINDOW_ID) {\n                    LayoutInternal.dragState.mainLayout.setDraggingOverWindow(false);\n                }\n                this.clearDragLocal();\n            }\n        };\n        this.onDrop = (event) => {\n            // console.log(\"ondrop\", this.windowId, this.dragging, Layout.dragState);\n            if (this.dragging) {\n                event.preventDefault();\n                const dragState = LayoutInternal.dragState;\n                if (this.dropInfo) {\n                    if (dragState.dragJson !== undefined) {\n                        const newNode = this.doAction(_model_Actions__WEBPACK_IMPORTED_MODULE_8__.Actions.addNode(dragState.dragJson, this.dropInfo.node.getId(), this.dropInfo.location, this.dropInfo.index));\n                        if (dragState.fnNewNodeDropped !== undefined) {\n                            dragState.fnNewNodeDropped(newNode, event);\n                        }\n                    }\n                    else if (dragState.dragNode !== undefined) {\n                        this.doAction(_model_Actions__WEBPACK_IMPORTED_MODULE_8__.Actions.moveNode(dragState.dragNode.getId(), this.dropInfo.node.getId(), this.dropInfo.location, this.dropInfo.index));\n                    }\n                }\n                this.mainLayout.clearDragMain();\n            }\n            this.dragEnterCount = 0; // must set to zero here ref sublayouts\n        };\n        this.orderedIds = [];\n        this.selfRef = react__WEBPACK_IMPORTED_MODULE_0__.createRef();\n        this.moveablesRef = react__WEBPACK_IMPORTED_MODULE_0__.createRef();\n        this.mainRef = react__WEBPACK_IMPORTED_MODULE_0__.createRef();\n        this.findBorderBarSizeRef = react__WEBPACK_IMPORTED_MODULE_0__.createRef();\n        this.supportsPopout = props.supportsPopout !== undefined ? props.supportsPopout : defaultSupportsPopout;\n        this.popoutURL = props.popoutURL ? props.popoutURL : \"popout.html\";\n        this.icons = Object.assign(Object.assign({}, defaultIcons), props.icons);\n        this.windowId = props.windowId ? props.windowId : _model_Model__WEBPACK_IMPORTED_MODULE_10__.Model.MAIN_WINDOW_ID;\n        this.mainLayout = this.props.mainLayout ? this.props.mainLayout : this;\n        this.isDraggingOverWindow = false;\n        this.layoutWindow = this.props.model.getwindowsMap().get(this.windowId);\n        this.layoutWindow.layout = this;\n        this.popoutWindowName = this.props.popoutWindowName || \"Popout Window\";\n        // this.renderCount = 0;\n        this.state = {\n            rect: _Rect__WEBPACK_IMPORTED_MODULE_6__.Rect.empty(),\n            editingTab: undefined,\n            showEdges: false,\n            showOverlay: false,\n            calculatedBorderBarSize: 29,\n            layoutRevision: 0,\n            forceRevision: 0,\n            showHiddenBorder: _DockLocation__WEBPACK_IMPORTED_MODULE_3__.DockLocation.CENTER\n        };\n        this.isMainWindow = this.windowId === _model_Model__WEBPACK_IMPORTED_MODULE_10__.Model.MAIN_WINDOW_ID;\n    }\n    componentDidMount() {\n        this.updateRect();\n        this.currentDocument = this.selfRef.current.ownerDocument;\n        this.currentWindow = this.currentDocument.defaultView;\n        this.layoutWindow.window = this.currentWindow;\n        this.layoutWindow.toScreenRectFunction = (r) => this.getScreenRect(r);\n        this.resizeObserver = new ResizeObserver(entries => {\n            requestAnimationFrame(() => {\n                this.updateRect();\n            });\n        });\n        if (this.selfRef.current) {\n            this.resizeObserver.observe(this.selfRef.current);\n        }\n        if (this.isMainWindow) {\n            this.props.model.addChangeListener(this.onModelChange);\n            this.updateLayoutMetrics();\n        }\n        else {\n            // since resizeObserver doesn't always work as expected when observing element in another document\n            this.currentWindow.addEventListener(\"resize\", () => {\n                this.updateRect();\n            });\n            const sourceElement = this.props.mainLayout.getRootDiv();\n            const targetElement = this.selfRef.current;\n            (0,_Utils__WEBPACK_IMPORTED_MODULE_22__.copyInlineStyles)(sourceElement, targetElement);\n            this.styleObserver = new MutationObserver(() => {\n                const changed = (0,_Utils__WEBPACK_IMPORTED_MODULE_22__.copyInlineStyles)(sourceElement, targetElement);\n                if (changed) {\n                    this.redraw(\"mutation observer\");\n                }\n            });\n            // Observe changes to the source element's style attribute\n            this.styleObserver.observe(sourceElement, { attributeFilter: ['style'] });\n        }\n        // allow tabs to overlay when hidden\n        document.addEventListener('visibilitychange', () => {\n            for (const [_, layoutWindow] of this.props.model.getwindowsMap()) {\n                const layout = layoutWindow.layout;\n                if (layout) {\n                    this.redraw(\"visibility change\");\n                }\n            }\n        });\n    }\n    componentDidUpdate() {\n        this.currentDocument = this.selfRef.current.ownerDocument;\n        this.currentWindow = this.currentDocument.defaultView;\n        if (this.isMainWindow) {\n            if (this.props.model !== this.previousModel) {\n                if (this.previousModel !== undefined) {\n                    this.previousModel.removeChangeListener(this.onModelChange); // stop listening to old model\n                }\n                this.props.model.getwindowsMap().get(this.windowId).layout = this;\n                this.props.model.addChangeListener(this.onModelChange);\n                this.layoutWindow = this.props.model.getwindowsMap().get(this.windowId);\n                this.layoutWindow.layout = this;\n                this.layoutWindow.toScreenRectFunction = (r) => this.getScreenRect(r);\n                this.previousModel = this.props.model;\n                this.tidyMoveablesMap();\n            }\n            this.updateLayoutMetrics();\n        }\n    }\n    componentWillUnmount() {\n        var _a, _b;\n        if (this.selfRef.current) {\n            (_a = this.resizeObserver) === null || _a === void 0 ? void 0 : _a.unobserve(this.selfRef.current);\n        }\n        (_b = this.styleObserver) === null || _b === void 0 ? void 0 : _b.disconnect();\n    }\n    render() {\n        // console.log(\"render\", this.windowId, this.state.revision, this.renderCount++);\n        // first render will be used to find the size (via selfRef)\n        if (!this.selfRef.current) {\n            return (react__WEBPACK_IMPORTED_MODULE_0__.createElement(\"div\", { ref: this.selfRef, className: this.getClassName(_Types__WEBPACK_IMPORTED_MODULE_7__.CLASSES.FLEXLAYOUT__LAYOUT) },\n                react__WEBPACK_IMPORTED_MODULE_0__.createElement(\"div\", { ref: this.moveablesRef, key: \"__moveables__\", className: this.getClassName(_Types__WEBPACK_IMPORTED_MODULE_7__.CLASSES.FLEXLAYOUT__LAYOUT_MOVEABLES) }),\n                this.renderMetricsElements()));\n        }\n        const model = this.props.model;\n        model.getRoot(this.windowId).calcMinMaxSize();\n        model.getRoot(this.windowId).setPaths(\"\");\n        model.getBorderSet().setPaths();\n        const inner = this.renderLayout();\n        const outer = this.renderBorders(inner);\n        const tabs = this.renderTabs();\n        const reorderedTabs = this.reorderComponents(tabs, this.orderedIds);\n        let floatingWindows = null;\n        let tabMoveables = null;\n        let tabStamps = null;\n        let metricElements = null;\n        if (this.isMainWindow) {\n            floatingWindows = this.renderWindows();\n            metricElements = this.renderMetricsElements();\n            tabMoveables = this.renderTabMoveables();\n            tabStamps = react__WEBPACK_IMPORTED_MODULE_0__.createElement(\"div\", { key: \"__tabStamps__\", className: this.getClassName(_Types__WEBPACK_IMPORTED_MODULE_7__.CLASSES.FLEXLAYOUT__LAYOUT_TAB_STAMPS) }, this.renderTabStamps());\n        }\n        return (react__WEBPACK_IMPORTED_MODULE_0__.createElement(\"div\", { ref: this.selfRef, className: this.getClassName(_Types__WEBPACK_IMPORTED_MODULE_7__.CLASSES.FLEXLAYOUT__LAYOUT), onDragEnter: this.onDragEnterRaw, onDragLeave: this.onDragLeaveRaw, onDragOver: this.onDragOver, onDrop: this.onDrop },\n            react__WEBPACK_IMPORTED_MODULE_0__.createElement(\"div\", { ref: this.moveablesRef, key: \"__moveables__\", className: this.getClassName(_Types__WEBPACK_IMPORTED_MODULE_7__.CLASSES.FLEXLAYOUT__LAYOUT_MOVEABLES) }),\n            metricElements,\n            react__WEBPACK_IMPORTED_MODULE_0__.createElement(_Overlay__WEBPACK_IMPORTED_MODULE_19__.Overlay, { key: \"__overlay__\", layout: this, show: this.state.showOverlay }),\n            outer,\n            reorderedTabs,\n            tabMoveables,\n            tabStamps,\n            this.state.portal,\n            floatingWindows));\n    }\n    renderBorders(inner) {\n        const classMain = this.getClassName(_Types__WEBPACK_IMPORTED_MODULE_7__.CLASSES.FLEXLAYOUT__LAYOUT_MAIN);\n        const borders = this.props.model.getBorderSet().getBorderMap();\n        if (this.isMainWindow && borders.size > 0) {\n            inner = (react__WEBPACK_IMPORTED_MODULE_0__.createElement(\"div\", { className: classMain, ref: this.mainRef }, inner));\n            const borderSetComponents = new Map();\n            const borderSetContentComponents = new Map();\n            for (const [_, location] of _DockLocation__WEBPACK_IMPORTED_MODULE_3__.DockLocation.values) {\n                const border = borders.get(location);\n                const showBorder = border && border.isShowing() && (!border.isAutoHide() ||\n                    (border.isAutoHide() && (border.getChildren().length > 0 || this.state.showHiddenBorder === location)));\n                if (showBorder) {\n                    borderSetComponents.set(location, react__WEBPACK_IMPORTED_MODULE_0__.createElement(_BorderTabSet__WEBPACK_IMPORTED_MODULE_14__.BorderTabSet, { layout: this, border: border, size: this.state.calculatedBorderBarSize }));\n                    borderSetContentComponents.set(location, react__WEBPACK_IMPORTED_MODULE_0__.createElement(_BorderTab__WEBPACK_IMPORTED_MODULE_13__.BorderTab, { layout: this, border: border, show: border.getSelected() !== -1 }));\n                }\n            }\n            const classBorderOuter = this.getClassName(_Types__WEBPACK_IMPORTED_MODULE_7__.CLASSES.FLEXLAYOUT__LAYOUT_BORDER_CONTAINER);\n            const classBorderInner = this.getClassName(_Types__WEBPACK_IMPORTED_MODULE_7__.CLASSES.FLEXLAYOUT__LAYOUT_BORDER_CONTAINER_INNER);\n            if (this.props.model.getBorderSet().getLayoutHorizontal()) {\n                const innerWithBorderTabs = (react__WEBPACK_IMPORTED_MODULE_0__.createElement(\"div\", { className: classBorderInner, style: { flexDirection: \"column\" } },\n                    borderSetContentComponents.get(_DockLocation__WEBPACK_IMPORTED_MODULE_3__.DockLocation.TOP),\n                    react__WEBPACK_IMPORTED_MODULE_0__.createElement(\"div\", { className: classBorderInner, style: { flexDirection: \"row\" } },\n                        borderSetContentComponents.get(_DockLocation__WEBPACK_IMPORTED_MODULE_3__.DockLocation.LEFT),\n                        inner,\n                        borderSetContentComponents.get(_DockLocation__WEBPACK_IMPORTED_MODULE_3__.DockLocation.RIGHT)),\n                    borderSetContentComponents.get(_DockLocation__WEBPACK_IMPORTED_MODULE_3__.DockLocation.BOTTOM)));\n                return (react__WEBPACK_IMPORTED_MODULE_0__.createElement(\"div\", { className: classBorderOuter, style: { flexDirection: \"column\" } },\n                    borderSetComponents.get(_DockLocation__WEBPACK_IMPORTED_MODULE_3__.DockLocation.TOP),\n                    react__WEBPACK_IMPORTED_MODULE_0__.createElement(\"div\", { className: classBorderInner, style: { flexDirection: \"row\" } },\n                        borderSetComponents.get(_DockLocation__WEBPACK_IMPORTED_MODULE_3__.DockLocation.LEFT),\n                        innerWithBorderTabs,\n                        borderSetComponents.get(_DockLocation__WEBPACK_IMPORTED_MODULE_3__.DockLocation.RIGHT)),\n                    borderSetComponents.get(_DockLocation__WEBPACK_IMPORTED_MODULE_3__.DockLocation.BOTTOM)));\n            }\n            else {\n                const innerWithBorderTabs = (react__WEBPACK_IMPORTED_MODULE_0__.createElement(\"div\", { className: classBorderInner, style: { flexDirection: \"row\" } },\n                    borderSetContentComponents.get(_DockLocation__WEBPACK_IMPORTED_MODULE_3__.DockLocation.LEFT),\n                    react__WEBPACK_IMPORTED_MODULE_0__.createElement(\"div\", { className: classBorderInner, style: { flexDirection: \"column\" } },\n                        borderSetContentComponents.get(_DockLocation__WEBPACK_IMPORTED_MODULE_3__.DockLocation.TOP),\n                        inner,\n                        borderSetContentComponents.get(_DockLocation__WEBPACK_IMPORTED_MODULE_3__.DockLocation.BOTTOM)),\n                    borderSetContentComponents.get(_DockLocation__WEBPACK_IMPORTED_MODULE_3__.DockLocation.RIGHT)));\n                return (react__WEBPACK_IMPORTED_MODULE_0__.createElement(\"div\", { className: classBorderOuter, style: { flexDirection: \"row\" } },\n                    borderSetComponents.get(_DockLocation__WEBPACK_IMPORTED_MODULE_3__.DockLocation.LEFT),\n                    react__WEBPACK_IMPORTED_MODULE_0__.createElement(\"div\", { className: classBorderInner, style: { flexDirection: \"column\" } },\n                        borderSetComponents.get(_DockLocation__WEBPACK_IMPORTED_MODULE_3__.DockLocation.TOP),\n                        innerWithBorderTabs,\n                        borderSetComponents.get(_DockLocation__WEBPACK_IMPORTED_MODULE_3__.DockLocation.BOTTOM)),\n                    borderSetComponents.get(_DockLocation__WEBPACK_IMPORTED_MODULE_3__.DockLocation.RIGHT)));\n            }\n        }\n        else { // no borders\n            return (react__WEBPACK_IMPORTED_MODULE_0__.createElement(\"div\", { className: classMain, ref: this.mainRef, style: { position: \"absolute\", top: 0, left: 0, bottom: 0, right: 0, display: \"flex\" } }, inner));\n        }\n    }\n    renderLayout() {\n        return (react__WEBPACK_IMPORTED_MODULE_0__.createElement(react__WEBPACK_IMPORTED_MODULE_0__.Fragment, null,\n            react__WEBPACK_IMPORTED_MODULE_0__.createElement(_Row__WEBPACK_IMPORTED_MODULE_20__.Row, { key: \"__row__\", layout: this, node: this.props.model.getRoot(this.windowId) }),\n            this.renderEdgeIndicators()));\n    }\n    renderEdgeIndicators() {\n        const edges = [];\n        const arrowIcon = this.icons.edgeArrow;\n        if (this.state.showEdges) {\n            const r = this.props.model.getRoot(this.windowId).getRect();\n            const length = edgeRectLength;\n            const width = edgeRectWidth;\n            const offset = edgeRectLength / 2;\n            const className = this.getClassName(_Types__WEBPACK_IMPORTED_MODULE_7__.CLASSES.FLEXLAYOUT__EDGE_RECT);\n            const radius = 50;\n            edges.push(react__WEBPACK_IMPORTED_MODULE_0__.createElement(\"div\", { key: \"North\", style: { top: 0, left: r.width / 2 - offset, width: length, height: width, borderBottomLeftRadius: radius, borderBottomRightRadius: radius }, className: className + \" \" + this.getClassName(_Types__WEBPACK_IMPORTED_MODULE_7__.CLASSES.FLEXLAYOUT__EDGE_RECT_TOP) },\n                react__WEBPACK_IMPORTED_MODULE_0__.createElement(\"div\", { style: { transform: \"rotate(180deg)\" } }, arrowIcon)));\n            edges.push(react__WEBPACK_IMPORTED_MODULE_0__.createElement(\"div\", { key: \"West\", style: { top: r.height / 2 - offset, left: 0, width: width, height: length, borderTopRightRadius: radius, borderBottomRightRadius: radius }, className: className + \" \" + this.getClassName(_Types__WEBPACK_IMPORTED_MODULE_7__.CLASSES.FLEXLAYOUT__EDGE_RECT_LEFT) },\n                react__WEBPACK_IMPORTED_MODULE_0__.createElement(\"div\", { style: { transform: \"rotate(90deg)\" } }, arrowIcon)));\n            edges.push(react__WEBPACK_IMPORTED_MODULE_0__.createElement(\"div\", { key: \"South\", style: { top: r.height - width, left: r.width / 2 - offset, width: length, height: width, borderTopLeftRadius: radius, borderTopRightRadius: radius }, className: className + \" \" + this.getClassName(_Types__WEBPACK_IMPORTED_MODULE_7__.CLASSES.FLEXLAYOUT__EDGE_RECT_BOTTOM) },\n                react__WEBPACK_IMPORTED_MODULE_0__.createElement(\"div\", null, arrowIcon)));\n            edges.push(react__WEBPACK_IMPORTED_MODULE_0__.createElement(\"div\", { key: \"East\", style: { top: r.height / 2 - offset, left: r.width - width, width: width, height: length, borderTopLeftRadius: radius, borderBottomLeftRadius: radius }, className: className + \" \" + this.getClassName(_Types__WEBPACK_IMPORTED_MODULE_7__.CLASSES.FLEXLAYOUT__EDGE_RECT_RIGHT) },\n                react__WEBPACK_IMPORTED_MODULE_0__.createElement(\"div\", { style: { transform: \"rotate(-90deg)\" } }, arrowIcon)));\n        }\n        return edges;\n    }\n    renderWindows() {\n        const floatingWindows = [];\n        if (this.supportsPopout) {\n            const windows = this.props.model.getwindowsMap();\n            let i = 1;\n            for (const [windowId, layoutWindow] of windows) {\n                if (windowId !== _model_Model__WEBPACK_IMPORTED_MODULE_10__.Model.MAIN_WINDOW_ID) {\n                    floatingWindows.push(react__WEBPACK_IMPORTED_MODULE_0__.createElement(_PopoutWindow__WEBPACK_IMPORTED_MODULE_17__.PopoutWindow, { key: windowId, layout: this, title: this.popoutWindowName + \" \" + i, layoutWindow: layoutWindow, url: this.popoutURL + \"?id=\" + windowId, onSetWindow: this.onSetWindow, onCloseWindow: this.onCloseWindow },\n                        react__WEBPACK_IMPORTED_MODULE_0__.createElement(\"div\", { className: this.props.popoutClassName },\n                            react__WEBPACK_IMPORTED_MODULE_0__.createElement(LayoutInternal, Object.assign({}, this.props, { windowId: windowId, mainLayout: this })))));\n                    i++;\n                }\n            }\n        }\n        return floatingWindows;\n    }\n    renderTabMoveables() {\n        const tabMoveables = [];\n        this.props.model.visitNodes((node) => {\n            if (node instanceof _model_TabNode__WEBPACK_IMPORTED_MODULE_11__.TabNode) {\n                const child = node;\n                const element = this.getMoveableElement(child.getId());\n                child.setMoveableElement(element);\n                const selected = child.isSelected();\n                const rect = child.getParent().getContentRect();\n                // only render first time if size >0\n                const renderTab = child.isRendered() ||\n                    ((selected || !child.isEnableRenderOnDemand()) && (rect.width > 0 && rect.height > 0));\n                if (renderTab) {\n                    //  console.log(\"rendertab\", child.getName(), this.props.renderRevision);\n                    const key = child.getId() + (child.isEnableWindowReMount() ? child.getWindowId() : \"\");\n                    tabMoveables.push((0,react_dom__WEBPACK_IMPORTED_MODULE_1__.createPortal)(react__WEBPACK_IMPORTED_MODULE_0__.createElement(_SizeTracker__WEBPACK_IMPORTED_MODULE_24__.SizeTracker, { rect: rect, selected: child.isSelected(), forceRevision: this.state.forceRevision, tabsRevision: this.props.renderRevision, key: key },\n                        react__WEBPACK_IMPORTED_MODULE_0__.createElement(_ErrorBoundary__WEBPACK_IMPORTED_MODULE_16__.ErrorBoundary, { message: this.i18nName(_I18nLabel__WEBPACK_IMPORTED_MODULE_4__.I18nLabel.Error_rendering_component) }, this.props.factory(child))), element, key));\n                    child.setRendered(renderTab);\n                }\n            }\n        });\n        return tabMoveables;\n    }\n    renderTabStamps() {\n        const tabStamps = [];\n        this.props.model.visitNodes((node) => {\n            if (node instanceof _model_TabNode__WEBPACK_IMPORTED_MODULE_11__.TabNode) {\n                const child = node;\n                // what the tab should look like when dragged (since images need to have been loaded before drag image can be taken)\n                tabStamps.push(react__WEBPACK_IMPORTED_MODULE_0__.createElement(_DragContainer__WEBPACK_IMPORTED_MODULE_15__.DragContainer, { key: child.getId(), layout: this, node: child }));\n            }\n        });\n        return tabStamps;\n    }\n    renderTabs() {\n        const tabs = new Map();\n        this.props.model.visitWindowNodes(this.windowId, (node) => {\n            if (node instanceof _model_TabNode__WEBPACK_IMPORTED_MODULE_11__.TabNode) {\n                const child = node;\n                const selected = child.isSelected();\n                const path = child.getPath();\n                const renderTab = child.isRendered() || selected || !child.isEnableRenderOnDemand();\n                if (renderTab) {\n                    // const rect = (child.getParent() as BorderNode | TabSetNode).getContentRect();\n                    // const key = child.getId();\n                    tabs.set(child.getId(), (\n                    // <SizeTracker rect={rect} forceRevision={this.state.forceRevision} key={key}>\n                    react__WEBPACK_IMPORTED_MODULE_0__.createElement(_Tab__WEBPACK_IMPORTED_MODULE_21__.Tab, { key: child.getId(), layout: this, path: path, node: child, selected: selected })\n                    // </SizeTracker>\n                    ));\n                }\n            }\n        });\n        return tabs;\n    }\n    renderMetricsElements() {\n        return (react__WEBPACK_IMPORTED_MODULE_0__.createElement(\"div\", { key: \"findBorderBarSize\", ref: this.findBorderBarSizeRef, className: this.getClassName(_Types__WEBPACK_IMPORTED_MODULE_7__.CLASSES.FLEXLAYOUT__BORDER_SIZER) }, \"FindBorderBarSize\"));\n    }\n    checkForBorderToShow(x, y) {\n        const r = this.getBoundingClientRect(this.mainRef.current);\n        const c = r.getCenter();\n        const margin = edgeRectWidth;\n        const offset = edgeRectLength / 2;\n        let overEdge = false;\n        if (this.props.model.isEnableEdgeDock() && this.state.showHiddenBorder === _DockLocation__WEBPACK_IMPORTED_MODULE_3__.DockLocation.CENTER) {\n            if ((y > c.y - offset && y < c.y + offset) ||\n                (x > c.x - offset && x < c.x + offset)) {\n                overEdge = true;\n            }\n        }\n        let location = _DockLocation__WEBPACK_IMPORTED_MODULE_3__.DockLocation.CENTER;\n        if (!overEdge) {\n            if (x <= r.x + margin) {\n                location = _DockLocation__WEBPACK_IMPORTED_MODULE_3__.DockLocation.LEFT;\n            }\n            else if (x >= r.getRight() - margin) {\n                location = _DockLocation__WEBPACK_IMPORTED_MODULE_3__.DockLocation.RIGHT;\n            }\n            else if (y <= r.y + margin) {\n                location = _DockLocation__WEBPACK_IMPORTED_MODULE_3__.DockLocation.TOP;\n            }\n            else if (y >= r.getBottom() - margin) {\n                location = _DockLocation__WEBPACK_IMPORTED_MODULE_3__.DockLocation.BOTTOM;\n            }\n        }\n        if (location !== this.state.showHiddenBorder) {\n            this.setState({ showHiddenBorder: location });\n        }\n    }\n    tidyMoveablesMap() {\n        // console.log(\"tidyMoveablesMap\");\n        const tabs = new Map();\n        this.props.model.visitNodes((node, _) => {\n            if (node instanceof _model_TabNode__WEBPACK_IMPORTED_MODULE_11__.TabNode) {\n                tabs.set(node.getId(), node);\n            }\n        });\n        for (const [nodeId, element] of this.moveableElementMap) {\n            if (!tabs.has(nodeId)) {\n                // console.log(\"delete\", nodeId);\n                element.remove(); // remove from dom\n                this.moveableElementMap.delete(nodeId); // remove map entry \n            }\n        }\n    }\n    reorderComponents(components, ids) {\n        const nextIds = [];\n        const nextIdsSet = new Set();\n        let reordered = [];\n        // Keep any previous tabs in the same DOM order as before, removing any that have been deleted\n        for (const id of ids) {\n            if (components.get(id)) {\n                nextIds.push(id);\n                nextIdsSet.add(id);\n            }\n        }\n        ids.splice(0, ids.length, ...nextIds);\n        // Add tabs that have been added to the DOM\n        for (const [id, _] of components) {\n            if (!nextIdsSet.has(id)) {\n                ids.push(id);\n            }\n        }\n        reordered = ids.map((id) => {\n            return components.get(id);\n        });\n        return reordered;\n    }\n    redraw(type) {\n        // console.log(\"redraw\", this.windowId, type);\n        this.mainLayout.setState((state, props) => { return { forceRevision: state.forceRevision + 1 }; });\n    }\n    redrawInternal(type) {\n        // console.log(\"redrawInternal\", this.windowId, type);\n        this.mainLayout.setState((state, props) => { return { layoutRevision: state.layoutRevision + 1 }; });\n    }\n    doAction(action) {\n        if (this.props.onAction !== undefined) {\n            const outcome = this.props.onAction(action);\n            if (outcome !== undefined) {\n                return this.props.model.doAction(outcome);\n            }\n            return undefined;\n        }\n        else {\n            return this.props.model.doAction(action);\n        }\n    }\n    getBoundingClientRect(div) {\n        const layoutRect = this.getDomRect();\n        if (layoutRect) {\n            return _Rect__WEBPACK_IMPORTED_MODULE_6__.Rect.getBoundingClientRect(div).relativeTo(layoutRect);\n        }\n        return _Rect__WEBPACK_IMPORTED_MODULE_6__.Rect.empty();\n    }\n    getMoveableContainer() {\n        return this.moveablesRef.current;\n    }\n    getMoveableElement(id) {\n        let moveableElement = this.moveableElementMap.get(id);\n        if (moveableElement === undefined) {\n            moveableElement = document.createElement(\"div\");\n            this.moveablesRef.current.appendChild(moveableElement);\n            moveableElement.className = _Types__WEBPACK_IMPORTED_MODULE_7__.CLASSES.FLEXLAYOUT__TAB_MOVEABLE;\n            this.moveableElementMap.set(id, moveableElement);\n        }\n        return moveableElement;\n    }\n    getMainLayout() {\n        return this.mainLayout;\n    }\n    getCurrentDocument() {\n        return this.currentDocument;\n    }\n    getDomRect() {\n        if (this.selfRef.current) {\n            return _Rect__WEBPACK_IMPORTED_MODULE_6__.Rect.fromDomRect(this.selfRef.current.getBoundingClientRect());\n        }\n        else {\n            return _Rect__WEBPACK_IMPORTED_MODULE_6__.Rect.empty();\n        }\n    }\n    getWindowId() {\n        return this.windowId;\n    }\n    getRootDiv() {\n        return this.selfRef.current;\n    }\n    getMainElement() {\n        return this.mainRef.current;\n    }\n    getFactory() {\n        return this.props.factory;\n    }\n    isSupportsPopout() {\n        return this.supportsPopout;\n    }\n    isRealtimeResize() {\n        var _a;\n        return (_a = this.props.realtimeResize) !== null && _a !== void 0 ? _a : false;\n    }\n    getPopoutURL() {\n        return this.popoutURL;\n    }\n    setEditingTab(tabNode) {\n        this.setState({ editingTab: tabNode });\n    }\n    getEditingTab() {\n        return this.state.editingTab;\n    }\n    getModel() {\n        return this.props.model;\n    }\n    getScreenRect(inRect) {\n        const rect = inRect.clone();\n        const layoutRect = this.getDomRect();\n        // Note: outerHeight can be less than innerHeight when window is zoomed, so cannot use\n        // const navHeight = Math.min(65, this.currentWindow!.outerHeight - this.currentWindow!.innerHeight);\n        // const navWidth = Math.min(65, this.currentWindow!.outerWidth - this.currentWindow!.innerWidth);\n        const navHeight = 60;\n        const navWidth = 2;\n        // console.log(rect.y, this.currentWindow!.screenX,layoutRect.y);\n        rect.x = this.currentWindow.screenX + this.currentWindow.scrollX + navWidth / 2 + layoutRect.x + rect.x;\n        rect.y = this.currentWindow.screenY + this.currentWindow.scrollY + (navHeight - navWidth / 2) + layoutRect.y + rect.y;\n        rect.height += navHeight;\n        rect.width += navWidth;\n        return rect;\n    }\n    addTabToTabSet(tabsetId, json) {\n        const tabsetNode = this.props.model.getNodeById(tabsetId);\n        if (tabsetNode !== undefined) {\n            const node = this.doAction(_model_Actions__WEBPACK_IMPORTED_MODULE_8__.Actions.addNode(json, tabsetId, _DockLocation__WEBPACK_IMPORTED_MODULE_3__.DockLocation.CENTER, -1));\n            return node;\n        }\n        return undefined;\n    }\n    addTabToActiveTabSet(json) {\n        const tabsetNode = this.props.model.getActiveTabset(this.windowId);\n        if (tabsetNode !== undefined) {\n            const node = this.doAction(_model_Actions__WEBPACK_IMPORTED_MODULE_8__.Actions.addNode(json, tabsetNode.getId(), _DockLocation__WEBPACK_IMPORTED_MODULE_3__.DockLocation.CENTER, -1));\n            return node;\n        }\n        return undefined;\n    }\n    maximize(tabsetNode) {\n        this.doAction(_model_Actions__WEBPACK_IMPORTED_MODULE_8__.Actions.maximizeToggle(tabsetNode.getId(), this.getWindowId()));\n    }\n    customizeTab(tabNode, renderValues) {\n        if (this.props.onRenderTab) {\n            this.props.onRenderTab(tabNode, renderValues);\n        }\n    }\n    customizeTabSet(tabSetNode, renderValues) {\n        if (this.props.onRenderTabSet) {\n            this.props.onRenderTabSet(tabSetNode, renderValues);\n        }\n    }\n    i18nName(id, param) {\n        let message;\n        if (this.props.i18nMapper) {\n            message = this.props.i18nMapper(id, param);\n        }\n        if (message === undefined) {\n            message = id + (param === undefined ? \"\" : param);\n        }\n        return message;\n    }\n    getShowOverflowMenu() {\n        return this.props.onShowOverflowMenu;\n    }\n    getTabSetPlaceHolderCallback() {\n        return this.props.onTabSetPlaceHolder;\n    }\n    showContextMenu(node, event) {\n        if (this.props.onContextMenu) {\n            this.props.onContextMenu(node, event);\n        }\n    }\n    auxMouseClick(node, event) {\n        if (this.props.onAuxMouseClick) {\n            this.props.onAuxMouseClick(node, event);\n        }\n    }\n    showOverlay(show) {\n        this.setState({ showOverlay: show });\n        (0,_Utils__WEBPACK_IMPORTED_MODULE_22__.enablePointerOnIFrames)(!show, this.currentDocument);\n    }\n    // *************************** Start Drag Drop *************************************\n    addTabWithDragAndDrop(event, json, onDrop) {\n        const tempNode = _model_TabNode__WEBPACK_IMPORTED_MODULE_11__.TabNode.fromJson(json, this.props.model, false);\n        LayoutInternal.dragState = new DragState(this.mainLayout, DragSource.Add, tempNode, json, onDrop);\n    }\n    moveTabWithDragAndDrop(event, node) {\n        this.setDragNode(event, node);\n    }\n    setDragComponent(event, component, x, y) {\n        let dragElement = (react__WEBPACK_IMPORTED_MODULE_0__.createElement(\"div\", { style: { position: \"unset\" }, className: this.getClassName(_Types__WEBPACK_IMPORTED_MODULE_7__.CLASSES.FLEXLAYOUT__LAYOUT) + \" \" + this.getClassName(_Types__WEBPACK_IMPORTED_MODULE_7__.CLASSES.FLEXLAYOUT__DRAG_RECT) }, component));\n        const tempDiv = this.currentDocument.createElement('div');\n        tempDiv.setAttribute(\"data-layout-path\", \"/drag-rectangle\");\n        tempDiv.style.position = \"absolute\";\n        tempDiv.style.left = \"-10000px\";\n        tempDiv.style.top = \"-10000px\";\n        this.currentDocument.body.appendChild(tempDiv);\n        (0,react_dom_client__WEBPACK_IMPORTED_MODULE_2__.createRoot)(tempDiv).render(dragElement);\n        event.dataTransfer.setDragImage(tempDiv, x, y);\n        setTimeout(() => {\n            this.currentDocument.body.removeChild(tempDiv);\n        }, 0);\n    }\n    setDraggingOverWindow(overWindow) {\n        // console.log(\"setDraggingOverWindow\", overWindow);\n        if (this.isDraggingOverWindow !== overWindow) {\n            if (this.outlineDiv) {\n                this.outlineDiv.style.visibility = overWindow ? \"hidden\" : \"visible\";\n            }\n            if (overWindow) {\n                this.setState({ showEdges: false });\n            }\n            else {\n                // add edge indicators\n                if (this.props.model.getMaximizedTabset(this.windowId) === undefined) {\n                    this.setState({ showEdges: this.props.model.isEnableEdgeDock() });\n                }\n            }\n            this.isDraggingOverWindow = overWindow;\n        }\n    }\n    clearDragMain() {\n        // console.log(\"clear drag main\");\n        LayoutInternal.dragState = undefined;\n        if (this.windowId === _model_Model__WEBPACK_IMPORTED_MODULE_10__.Model.MAIN_WINDOW_ID) {\n            this.isDraggingOverWindow = false;\n        }\n        for (const [, layoutWindow] of this.props.model.getwindowsMap()) {\n            // console.log(layoutWindow);\n            layoutWindow.layout.clearDragLocal();\n        }\n    }\n    clearDragLocal() {\n        // console.log(\"clear drag local\", this.windowId);\n        this.setState({ showEdges: false });\n        this.showOverlay(false);\n        this.dragEnterCount = 0;\n        this.dragging = false;\n        if (this.outlineDiv) {\n            this.selfRef.current.removeChild(this.outlineDiv);\n            this.outlineDiv = undefined;\n        }\n    }\n}\nLayoutInternal.dragState = undefined;\nconst FlexLayoutVersion = \"0.8.6\";\nconst defaultIcons = {\n    close: react__WEBPACK_IMPORTED_MODULE_0__.createElement(_Icons__WEBPACK_IMPORTED_MODULE_18__.CloseIcon, null),\n    closeTabset: react__WEBPACK_IMPORTED_MODULE_0__.createElement(_Icons__WEBPACK_IMPORTED_MODULE_18__.CloseIcon, null),\n    popout: react__WEBPACK_IMPORTED_MODULE_0__.createElement(_Icons__WEBPACK_IMPORTED_MODULE_18__.PopoutIcon, null),\n    maximize: react__WEBPACK_IMPORTED_MODULE_0__.createElement(_Icons__WEBPACK_IMPORTED_MODULE_18__.MaximizeIcon, null),\n    restore: react__WEBPACK_IMPORTED_MODULE_0__.createElement(_Icons__WEBPACK_IMPORTED_MODULE_18__.RestoreIcon, null),\n    more: react__WEBPACK_IMPORTED_MODULE_0__.createElement(_Icons__WEBPACK_IMPORTED_MODULE_18__.OverflowIcon, null),\n    edgeArrow: react__WEBPACK_IMPORTED_MODULE_0__.createElement(_Icons__WEBPACK_IMPORTED_MODULE_18__.EdgeIcon, null),\n    activeTabset: react__WEBPACK_IMPORTED_MODULE_0__.createElement(_Icons__WEBPACK_IMPORTED_MODULE_18__.AsterickIcon, null)\n};\nvar DragSource;\n(function (DragSource) {\n    DragSource[\"Internal\"] = \"internal\";\n    DragSource[\"External\"] = \"external\";\n    DragSource[\"Add\"] = \"add\";\n})(DragSource || (DragSource = {}));\n/** @internal */\nconst defaultSupportsPopout = (0,_Utils__WEBPACK_IMPORTED_MODULE_22__.isDesktop)();\n/** @internal */\nconst edgeRectLength = 100;\n/** @internal */\nconst edgeRectWidth = 10;\n// global layout drag state\nclass DragState {\n    constructor(mainLayout, dragSource, dragNode, dragJson, fnNewNodeDropped) {\n        this.mainLayout = mainLayout;\n        this.dragSource = dragSource;\n        this.dragNode = dragNode;\n        this.dragJson = dragJson;\n        this.fnNewNodeDropped = fnNewNodeDropped;\n    }\n}\n\n\n//# sourceURL=webpack://FlexLayout/./src/view/Layout.tsx?");
 
 /***/ }),