flexlayout-react 0.8.5 → 0.8.7

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (54) hide show
  1. package/ChangeLog.txt +10 -0
  2. package/README.md +78 -2
  3. package/declarations/Rect.d.ts +2 -0
  4. package/declarations/Types.d.ts +0 -5
  5. package/declarations/view/Layout.d.ts +3 -1
  6. package/dist/flexlayout.js +6 -6
  7. package/dist/flexlayout_min.js +1 -1
  8. package/lib/Rect.js +6 -0
  9. package/lib/Rect.js.map +1 -1
  10. package/lib/Types.js +0 -5
  11. package/lib/Types.js.map +1 -1
  12. package/lib/model/TabSetNode.js +9 -4
  13. package/lib/model/TabSetNode.js.map +1 -1
  14. package/lib/view/BorderTabSet.js +1 -2
  15. package/lib/view/BorderTabSet.js.map +1 -1
  16. package/lib/view/Layout.js +3 -2
  17. package/lib/view/Layout.js.map +1 -1
  18. package/lib/view/TabOverflowHook.js +40 -43
  19. package/lib/view/TabOverflowHook.js.map +1 -1
  20. package/package.json +2 -2
  21. package/src/Rect.ts +8 -0
  22. package/src/Types.ts +0 -6
  23. package/src/model/TabSetNode.ts +8 -4
  24. package/src/view/BorderTabSet.tsx +1 -2
  25. package/src/view/Layout.tsx +9 -5
  26. package/src/view/TabOverflowHook.tsx +46 -51
  27. package/style/_base.scss +564 -614
  28. package/style/_themes.scss +646 -0
  29. package/style/combined.css +1053 -0
  30. package/style/combined.css.map +1 -0
  31. package/style/combined.scss +46 -0
  32. package/style/dark.css +41 -63
  33. package/style/dark.css.map +1 -1
  34. package/style/dark.scss +5 -185
  35. package/style/gray.css +54 -56
  36. package/style/gray.css.map +1 -1
  37. package/style/gray.scss +5 -184
  38. package/style/light.css +23 -52
  39. package/style/light.css.map +1 -1
  40. package/style/light.scss +5 -167
  41. package/style/rounded.css +42 -77
  42. package/style/rounded.css.map +1 -1
  43. package/style/rounded.scss +5 -215
  44. package/style/underline.css +45 -65
  45. package/style/underline.css.map +1 -1
  46. package/style/underline.scss +5 -190
  47. package/.editorconfig +0 -8
  48. package/.github/ISSUE_TEMPLATE/bug_report.yml +0 -104
  49. package/.github/ISSUE_TEMPLATE/config.yml +0 -5
  50. package/.prettierrc.json +0 -3
  51. package/Screenshot_light.png +0 -0
  52. package/Screenshot_rounded.png +0 -0
  53. package/dist/bundles/demo.js +0 -232052
  54. package/dist/bundles/demo.js.map +0 -1
package/dist/flexlayout.js CHANGED
@@ -126,7 +126,7 @@ eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpac
126
126
  \*********************/
127
127
  /***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {
128
128
 
129
- eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpack_require__.d(__webpack_exports__, {\n/* harmony export */ Rect: () => (/* binding */ Rect)\n/* harmony export */ });\n/* harmony import */ var _Orientation__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! ./Orientation */ \"./src/Orientation.ts\");\n\nclass Rect {\n static empty() {\n return new Rect(0, 0, 0, 0);\n }\n static fromJson(json) {\n return new Rect(json.x, json.y, json.width, json.height);\n }\n constructor(x, y, width, height) {\n this.x = x;\n this.y = y;\n this.width = width;\n this.height = height;\n }\n toJson() {\n return { x: this.x, y: this.y, width: this.width, height: this.height };\n }\n snap(round) {\n this.x = Math.round(this.x / round) * round;\n this.y = Math.round(this.y / round) * round;\n this.width = Math.round(this.width / round) * round;\n this.height = Math.round(this.height / round) * round;\n }\n static getBoundingClientRect(element) {\n let { x, y, width, height } = element.getBoundingClientRect();\n return new Rect(x, y, width, height);\n }\n static getContentRect(element) {\n const rect = element.getBoundingClientRect();\n const style = window.getComputedStyle(element);\n const paddingLeft = parseFloat(style.paddingLeft);\n const paddingRight = parseFloat(style.paddingRight);\n const paddingTop = parseFloat(style.paddingTop);\n const paddingBottom = parseFloat(style.paddingBottom);\n const borderLeftWidth = parseFloat(style.borderLeftWidth);\n const borderRightWidth = parseFloat(style.borderRightWidth);\n const borderTopWidth = parseFloat(style.borderTopWidth);\n const borderBottomWidth = parseFloat(style.borderBottomWidth);\n const contentWidth = rect.width - borderLeftWidth - paddingLeft - paddingRight - borderRightWidth;\n const contentHeight = rect.height - borderTopWidth - paddingTop - paddingBottom - borderBottomWidth;\n return new Rect(rect.left + borderLeftWidth + paddingLeft, rect.top + borderTopWidth + paddingTop, contentWidth, contentHeight);\n }\n static fromDomRect(domRect) {\n return new Rect(domRect.x, domRect.y, domRect.width, domRect.height);\n }\n relativeTo(r) {\n return new Rect(this.x - r.x, this.y - r.y, this.width, this.height);\n }\n clone() {\n return new Rect(this.x, this.y, this.width, this.height);\n }\n equals(rect) {\n return this.x === (rect === null || rect === void 0 ? void 0 : rect.x) && this.y === (rect === null || rect === void 0 ? void 0 : rect.y) && this.width === (rect === null || rect === void 0 ? void 0 : rect.width) && this.height === (rect === null || rect === void 0 ? void 0 : rect.height);\n }\n equalSize(rect) {\n return this.width === (rect === null || rect === void 0 ? void 0 : rect.width) && this.height === (rect === null || rect === void 0 ? void 0 : rect.height);\n }\n getBottom() {\n return this.y + this.height;\n }\n getRight() {\n return this.x + this.width;\n }\n getCenter() {\n return { x: this.x + this.width / 2, y: this.y + this.height / 2 };\n }\n positionElement(element, position) {\n this.styleWithPosition(element.style, position);\n }\n styleWithPosition(style, position = \"absolute\") {\n style.left = this.x + \"px\";\n style.top = this.y + \"px\";\n style.width = Math.max(0, this.width) + \"px\"; // need Math.max to prevent -ve, cause error in IE\n style.height = Math.max(0, this.height) + \"px\";\n style.position = position;\n return style;\n }\n contains(x, y) {\n if (this.x <= x && x <= this.getRight() && this.y <= y && y <= this.getBottom()) {\n return true;\n }\n else {\n return false;\n }\n }\n removeInsets(insets) {\n return new Rect(this.x + insets.left, this.y + insets.top, Math.max(0, this.width - insets.left - insets.right), Math.max(0, this.height - insets.top - insets.bottom));\n }\n centerInRect(outerRect) {\n this.x = (outerRect.width - this.width) / 2;\n this.y = (outerRect.height - this.height) / 2;\n }\n /** @internal */\n _getSize(orientation) {\n let prefSize = this.width;\n if (orientation === _Orientation__WEBPACK_IMPORTED_MODULE_0__.Orientation.VERT) {\n prefSize = this.height;\n }\n return prefSize;\n }\n toString() {\n return \"(Rect: x=\" + this.x + \", y=\" + this.y + \", width=\" + this.width + \", height=\" + this.height + \")\";\n }\n}\n\n\n//# sourceURL=webpack://FlexLayout/./src/Rect.ts?");
129
+ eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpack_require__.d(__webpack_exports__, {\n/* harmony export */ Rect: () => (/* binding */ Rect)\n/* harmony export */ });\n/* harmony import */ var _Orientation__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! ./Orientation */ \"./src/Orientation.ts\");\n\nclass Rect {\n static empty() {\n return new Rect(0, 0, 0, 0);\n }\n static fromJson(json) {\n return new Rect(json.x, json.y, json.width, json.height);\n }\n constructor(x, y, width, height) {\n this.x = x;\n this.y = y;\n this.width = width;\n this.height = height;\n }\n toJson() {\n return { x: this.x, y: this.y, width: this.width, height: this.height };\n }\n snap(round) {\n this.x = Math.round(this.x / round) * round;\n this.y = Math.round(this.y / round) * round;\n this.width = Math.round(this.width / round) * round;\n this.height = Math.round(this.height / round) * round;\n }\n static getBoundingClientRect(element) {\n let { x, y, width, height } = element.getBoundingClientRect();\n return new Rect(x, y, width, height);\n }\n static getContentRect(element) {\n const rect = element.getBoundingClientRect();\n const style = window.getComputedStyle(element);\n const paddingLeft = parseFloat(style.paddingLeft);\n const paddingRight = parseFloat(style.paddingRight);\n const paddingTop = parseFloat(style.paddingTop);\n const paddingBottom = parseFloat(style.paddingBottom);\n const borderLeftWidth = parseFloat(style.borderLeftWidth);\n const borderRightWidth = parseFloat(style.borderRightWidth);\n const borderTopWidth = parseFloat(style.borderTopWidth);\n const borderBottomWidth = parseFloat(style.borderBottomWidth);\n const contentWidth = rect.width - borderLeftWidth - paddingLeft - paddingRight - borderRightWidth;\n const contentHeight = rect.height - borderTopWidth - paddingTop - paddingBottom - borderBottomWidth;\n return new Rect(rect.left + borderLeftWidth + paddingLeft, rect.top + borderTopWidth + paddingTop, contentWidth, contentHeight);\n }\n static fromDomRect(domRect) {\n return new Rect(domRect.x, domRect.y, domRect.width, domRect.height);\n }\n relativeTo(r) {\n return new Rect(this.x - r.x, this.y - r.y, this.width, this.height);\n }\n clone() {\n return new Rect(this.x, this.y, this.width, this.height);\n }\n equals(rect) {\n return this.x === (rect === null || rect === void 0 ? void 0 : rect.x) && this.y === (rect === null || rect === void 0 ? void 0 : rect.y) && this.width === (rect === null || rect === void 0 ? void 0 : rect.width) && this.height === (rect === null || rect === void 0 ? void 0 : rect.height);\n }\n equalSize(rect) {\n return this.width === (rect === null || rect === void 0 ? void 0 : rect.width) && this.height === (rect === null || rect === void 0 ? void 0 : rect.height);\n }\n getBottom() {\n return this.y + this.height;\n }\n getRight() {\n return this.x + this.width;\n }\n get bottom() {\n return this.y + this.height;\n }\n get right() {\n return this.x + this.width;\n }\n getCenter() {\n return { x: this.x + this.width / 2, y: this.y + this.height / 2 };\n }\n positionElement(element, position) {\n this.styleWithPosition(element.style, position);\n }\n styleWithPosition(style, position = \"absolute\") {\n style.left = this.x + \"px\";\n style.top = this.y + \"px\";\n style.width = Math.max(0, this.width) + \"px\"; // need Math.max to prevent -ve, cause error in IE\n style.height = Math.max(0, this.height) + \"px\";\n style.position = position;\n return style;\n }\n contains(x, y) {\n if (this.x <= x && x <= this.getRight() && this.y <= y && y <= this.getBottom()) {\n return true;\n }\n else {\n return false;\n }\n }\n removeInsets(insets) {\n return new Rect(this.x + insets.left, this.y + insets.top, Math.max(0, this.width - insets.left - insets.right), Math.max(0, this.height - insets.top - insets.bottom));\n }\n centerInRect(outerRect) {\n this.x = (outerRect.width - this.width) / 2;\n this.y = (outerRect.height - this.height) / 2;\n }\n /** @internal */\n _getSize(orientation) {\n let prefSize = this.width;\n if (orientation === _Orientation__WEBPACK_IMPORTED_MODULE_0__.Orientation.VERT) {\n prefSize = this.height;\n }\n return prefSize;\n }\n toString() {\n return \"(Rect: x=\" + this.x + \", y=\" + this.y + \", width=\" + this.width + \", height=\" + this.height + \")\";\n }\n}\n\n\n//# sourceURL=webpack://FlexLayout/./src/Rect.ts?");
130
130
 
131
131
  /***/ }),
132
132
 
@@ -136,7 +136,7 @@ eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpac
136
136
  \**********************/
137
137
  /***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {
138
138
 
139
- 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?");
139
+ 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?");
140
140
 
141
141
  /***/ }),
142
142
 
@@ -286,7 +286,7 @@ eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpac
286
286
  \*********************************/
287
287
  /***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {
288
288
 
289
- 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?");
289
+ 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?");
290
290
 
291
291
  /***/ }),
292
292
 
@@ -326,7 +326,7 @@ eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpac
326
326
  \***********************************/
327
327
  /***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {
328
328
 
329
- eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpack_require__.d(__webpack_exports__, {\n/* harmony export */ BorderTabSet: () => (/* binding */ BorderTabSet)\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 _DockLocation__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ../DockLocation */ \"./src/DockLocation.ts\");\n/* harmony import */ var _BorderButton__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ./BorderButton */ \"./src/view/BorderButton.tsx\");\n/* harmony import */ var _PopupMenu__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! ./PopupMenu */ \"./src/view/PopupMenu.tsx\");\n/* harmony import */ var _model_Actions__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(/*! ../model/Actions */ \"./src/model/Actions.ts\");\n/* harmony import */ var _I18nLabel__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__(/*! ../I18nLabel */ \"./src/I18nLabel.ts\");\n/* harmony import */ var _TabOverflowHook__WEBPACK_IMPORTED_MODULE_6__ = __webpack_require__(/*! ./TabOverflowHook */ \"./src/view/TabOverflowHook.tsx\");\n/* harmony import */ var _Orientation__WEBPACK_IMPORTED_MODULE_7__ = __webpack_require__(/*! ../Orientation */ \"./src/Orientation.ts\");\n/* harmony import */ var _Types__WEBPACK_IMPORTED_MODULE_8__ = __webpack_require__(/*! ../Types */ \"./src/Types.ts\");\n/* harmony import */ var _Utils__WEBPACK_IMPORTED_MODULE_9__ = __webpack_require__(/*! ./Utils */ \"./src/view/Utils.tsx\");\n/* harmony import */ var _Rect__WEBPACK_IMPORTED_MODULE_10__ = __webpack_require__(/*! ../Rect */ \"./src/Rect.ts\");\n\n\n\n\n\n\n\n\n\n\n\n/** @internal */\nconst BorderTabSet = (props) => {\n const { border, layout, size } = props;\n const toolbarRef = react__WEBPACK_IMPORTED_MODULE_0__.useRef(null);\n const miniScrollRef = react__WEBPACK_IMPORTED_MODULE_0__.useRef(null);\n const overflowbuttonRef = react__WEBPACK_IMPORTED_MODULE_0__.useRef(null);\n const stickyButtonsRef = react__WEBPACK_IMPORTED_MODULE_0__.useRef(null);\n const tabStripInnerRef = react__WEBPACK_IMPORTED_MODULE_0__.useRef(null);\n const icons = layout.getIcons();\n react__WEBPACK_IMPORTED_MODULE_0__.useLayoutEffect(() => {\n border.setTabHeaderRect(_Rect__WEBPACK_IMPORTED_MODULE_10__.Rect.getBoundingClientRect(selfRef.current).relativeTo(layout.getDomRect()));\n });\n const { selfRef, userControlledPositionRef, onScroll, onScrollPointerDown, hiddenTabs, onMouseWheel, isTabOverflow } = (0,_TabOverflowHook__WEBPACK_IMPORTED_MODULE_6__.useTabOverflow)(layout, border, _Orientation__WEBPACK_IMPORTED_MODULE_7__.Orientation.flip(border.getOrientation()), tabStripInnerRef, miniScrollRef, layout.getClassName(_Types__WEBPACK_IMPORTED_MODULE_8__.CLASSES.FLEXLAYOUT__BORDER_BUTTON));\n const onAuxMouseClick = (event) => {\n if ((0,_Utils__WEBPACK_IMPORTED_MODULE_9__.isAuxMouseEvent)(event)) {\n layout.auxMouseClick(border, event);\n }\n };\n const onContextMenu = (event) => {\n layout.showContextMenu(border, event);\n };\n const onInterceptPointerDown = (event) => {\n event.stopPropagation();\n };\n const onOverflowClick = (event) => {\n const callback = layout.getShowOverflowMenu();\n const items = hiddenTabs.map(h => { return { index: h, node: border.getChildren()[h] }; });\n if (callback !== undefined) {\n callback(border, event, items, onOverflowItemSelect);\n }\n else {\n const element = overflowbuttonRef.current;\n (0,_PopupMenu__WEBPACK_IMPORTED_MODULE_3__.showPopup)(element, border, items, onOverflowItemSelect, layout);\n }\n event.stopPropagation();\n };\n const onOverflowItemSelect = (item) => {\n layout.doAction(_model_Actions__WEBPACK_IMPORTED_MODULE_4__.Actions.selectTab(item.node.getId()));\n userControlledPositionRef.current = false;\n };\n const onPopoutTab = (event) => {\n const selectedTabNode = border.getChildren()[border.getSelected()];\n if (selectedTabNode !== undefined) {\n layout.doAction(_model_Actions__WEBPACK_IMPORTED_MODULE_4__.Actions.popoutTab(selectedTabNode.getId()));\n }\n event.stopPropagation();\n };\n const cm = layout.getClassName;\n const tabButtons = [];\n const layoutTab = (i) => {\n let isSelected = border.getSelected() === i;\n let child = border.getChildren()[i];\n tabButtons.push(react__WEBPACK_IMPORTED_MODULE_0__.createElement(_BorderButton__WEBPACK_IMPORTED_MODULE_2__.BorderButton, { layout: layout, border: border.getLocation().getName(), node: child, path: border.getPath() + \"/tb\" + i, key: child.getId(), selected: isSelected, icons: icons }));\n if (i < border.getChildren().length - 1) {\n tabButtons.push(react__WEBPACK_IMPORTED_MODULE_0__.createElement(\"div\", { key: \"divider\" + i, className: cm(_Types__WEBPACK_IMPORTED_MODULE_8__.CLASSES.FLEXLAYOUT__BORDER_TAB_DIVIDER) }));\n }\n };\n for (let i = 0; i < border.getChildren().length; i++) {\n layoutTab(i);\n }\n let borderClasses = cm(_Types__WEBPACK_IMPORTED_MODULE_8__.CLASSES.FLEXLAYOUT__BORDER) + \" \" + cm(_Types__WEBPACK_IMPORTED_MODULE_8__.CLASSES.FLEXLAYOUT__BORDER_ + border.getLocation().getName());\n if (border.getClassName() !== undefined) {\n borderClasses += \" \" + border.getClassName();\n }\n // allow customization of tabset right/bottom buttons\n let buttons = [];\n let stickyButtons = [];\n const renderState = { buttons, stickyButtons: stickyButtons, overflowPosition: undefined };\n layout.customizeTabSet(border, renderState);\n buttons = renderState.buttons;\n if (renderState.overflowPosition === undefined) {\n renderState.overflowPosition = stickyButtons.length;\n }\n if (stickyButtons.length > 0) {\n if (isTabOverflow) {\n buttons = [...stickyButtons, ...buttons];\n }\n else {\n tabButtons.push(react__WEBPACK_IMPORTED_MODULE_0__.createElement(\"div\", { ref: stickyButtonsRef, key: \"sticky_buttons_container\", onPointerDown: onInterceptPointerDown, onDragStart: (e) => { e.preventDefault(); }, className: cm(_Types__WEBPACK_IMPORTED_MODULE_8__.CLASSES.FLEXLAYOUT__TAB_TOOLBAR_STICKY_BUTTONS_CONTAINER) }, stickyButtons));\n }\n }\n if (hiddenTabs.length > 0) {\n const overflowTitle = layout.i18nName(_I18nLabel__WEBPACK_IMPORTED_MODULE_5__.I18nLabel.Overflow_Menu_Tooltip);\n let overflowContent;\n if (typeof icons.more === \"function\") {\n const items = hiddenTabs.map(h => { return { index: h, node: border.getChildren()[h] }; });\n overflowContent = icons.more(border, items);\n }\n else {\n overflowContent = (react__WEBPACK_IMPORTED_MODULE_0__.createElement(react__WEBPACK_IMPORTED_MODULE_0__.Fragment, null,\n icons.more,\n react__WEBPACK_IMPORTED_MODULE_0__.createElement(\"div\", { className: cm(_Types__WEBPACK_IMPORTED_MODULE_8__.CLASSES.FLEXLAYOUT__TAB_BUTTON_OVERFLOW_COUNT) }, hiddenTabs.length)));\n }\n buttons.splice(Math.min(renderState.overflowPosition, buttons.length), 0, react__WEBPACK_IMPORTED_MODULE_0__.createElement(\"button\", { key: \"overflowbutton\", ref: overflowbuttonRef, className: cm(_Types__WEBPACK_IMPORTED_MODULE_8__.CLASSES.FLEXLAYOUT__BORDER_TOOLBAR_BUTTON) + \" \" + cm(_Types__WEBPACK_IMPORTED_MODULE_8__.CLASSES.FLEXLAYOUT__BORDER_TOOLBAR_BUTTON_OVERFLOW) + \" \" + cm(_Types__WEBPACK_IMPORTED_MODULE_8__.CLASSES.FLEXLAYOUT__BORDER_TOOLBAR_BUTTON_OVERFLOW_ + border.getLocation().getName()), title: overflowTitle, onClick: onOverflowClick, onPointerDown: onInterceptPointerDown }, overflowContent));\n }\n const selectedIndex = border.getSelected();\n if (selectedIndex !== -1) {\n const selectedTabNode = border.getChildren()[selectedIndex];\n if (selectedTabNode !== undefined && layout.isSupportsPopout() && selectedTabNode.isEnablePopout()) {\n const popoutTitle = layout.i18nName(_I18nLabel__WEBPACK_IMPORTED_MODULE_5__.I18nLabel.Popout_Tab);\n buttons.push(react__WEBPACK_IMPORTED_MODULE_0__.createElement(\"button\", { key: \"popout\", title: popoutTitle, className: cm(_Types__WEBPACK_IMPORTED_MODULE_8__.CLASSES.FLEXLAYOUT__BORDER_TOOLBAR_BUTTON) + \" \" + cm(_Types__WEBPACK_IMPORTED_MODULE_8__.CLASSES.FLEXLAYOUT__BORDER_TOOLBAR_BUTTON_FLOAT), onClick: onPopoutTab, onPointerDown: onInterceptPointerDown }, (typeof icons.popout === \"function\") ? icons.popout(selectedTabNode) : icons.popout));\n }\n }\n const toolbar = (react__WEBPACK_IMPORTED_MODULE_0__.createElement(\"div\", { key: \"toolbar\", ref: toolbarRef, className: cm(_Types__WEBPACK_IMPORTED_MODULE_8__.CLASSES.FLEXLAYOUT__BORDER_TOOLBAR) + \" \" + cm(_Types__WEBPACK_IMPORTED_MODULE_8__.CLASSES.FLEXLAYOUT__BORDER_TOOLBAR_ + border.getLocation().getName()) }, buttons));\n let innerStyle = {};\n let outerStyle = {};\n const borderHeight = size - 1;\n if (border.getLocation() === _DockLocation__WEBPACK_IMPORTED_MODULE_1__.DockLocation.LEFT) {\n innerStyle = { right: \"100%\", top: 0 };\n outerStyle = { width: borderHeight, overflowY: \"auto\" };\n }\n else if (border.getLocation() === _DockLocation__WEBPACK_IMPORTED_MODULE_1__.DockLocation.RIGHT) {\n innerStyle = { left: \"100%\", top: 0 };\n outerStyle = { width: borderHeight, overflowY: \"auto\" };\n }\n else {\n innerStyle = { left: 0 };\n outerStyle = { height: borderHeight, overflowX: \"auto\" };\n }\n let miniScrollbar = undefined;\n if (border.isEnableTabScrollbar()) {\n miniScrollbar = (react__WEBPACK_IMPORTED_MODULE_0__.createElement(\"div\", { ref: miniScrollRef, className: cm(_Types__WEBPACK_IMPORTED_MODULE_8__.CLASSES.FLEXLAYOUT__MINI_SCROLLBAR), onPointerDown: onScrollPointerDown }));\n }\n return (react__WEBPACK_IMPORTED_MODULE_0__.createElement(\"div\", { ref: selfRef, style: {\n display: \"flex\",\n flexDirection: (border.getOrientation() === _Orientation__WEBPACK_IMPORTED_MODULE_7__.Orientation.VERT ? \"row\" : \"column\")\n }, className: borderClasses, \"data-layout-path\": border.getPath(), onClick: onAuxMouseClick, onAuxClick: onAuxMouseClick, onContextMenu: onContextMenu, onWheel: onMouseWheel },\n react__WEBPACK_IMPORTED_MODULE_0__.createElement(\"div\", { className: cm(_Types__WEBPACK_IMPORTED_MODULE_8__.CLASSES.FLEXLAYOUT__MINI_SCROLLBAR_CONTAINER) },\n react__WEBPACK_IMPORTED_MODULE_0__.createElement(\"div\", { ref: tabStripInnerRef, className: cm(_Types__WEBPACK_IMPORTED_MODULE_8__.CLASSES.FLEXLAYOUT__BORDER_INNER) + \" \" + cm(_Types__WEBPACK_IMPORTED_MODULE_8__.CLASSES.FLEXLAYOUT__BORDER_INNER_ + border.getLocation().getName()), style: outerStyle, onScroll: onScroll },\n react__WEBPACK_IMPORTED_MODULE_0__.createElement(\"div\", { style: innerStyle, className: cm(_Types__WEBPACK_IMPORTED_MODULE_8__.CLASSES.FLEXLAYOUT__BORDER_INNER_TAB_CONTAINER) + \" \" + cm(_Types__WEBPACK_IMPORTED_MODULE_8__.CLASSES.FLEXLAYOUT__BORDER_INNER_TAB_CONTAINER_ + border.getLocation().getName()) }, tabButtons)),\n miniScrollbar),\n toolbar));\n};\n\n\n//# sourceURL=webpack://FlexLayout/./src/view/BorderTabSet.tsx?");
329
+ eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpack_require__.d(__webpack_exports__, {\n/* harmony export */ BorderTabSet: () => (/* binding */ BorderTabSet)\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 _DockLocation__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ../DockLocation */ \"./src/DockLocation.ts\");\n/* harmony import */ var _BorderButton__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ./BorderButton */ \"./src/view/BorderButton.tsx\");\n/* harmony import */ var _PopupMenu__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! ./PopupMenu */ \"./src/view/PopupMenu.tsx\");\n/* harmony import */ var _model_Actions__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(/*! ../model/Actions */ \"./src/model/Actions.ts\");\n/* harmony import */ var _I18nLabel__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__(/*! ../I18nLabel */ \"./src/I18nLabel.ts\");\n/* harmony import */ var _TabOverflowHook__WEBPACK_IMPORTED_MODULE_6__ = __webpack_require__(/*! ./TabOverflowHook */ \"./src/view/TabOverflowHook.tsx\");\n/* harmony import */ var _Orientation__WEBPACK_IMPORTED_MODULE_7__ = __webpack_require__(/*! ../Orientation */ \"./src/Orientation.ts\");\n/* harmony import */ var _Types__WEBPACK_IMPORTED_MODULE_8__ = __webpack_require__(/*! ../Types */ \"./src/Types.ts\");\n/* harmony import */ var _Utils__WEBPACK_IMPORTED_MODULE_9__ = __webpack_require__(/*! ./Utils */ \"./src/view/Utils.tsx\");\n\n\n\n\n\n\n\n\n\n\n/** @internal */\nconst BorderTabSet = (props) => {\n const { border, layout, size } = props;\n const toolbarRef = react__WEBPACK_IMPORTED_MODULE_0__.useRef(null);\n const miniScrollRef = react__WEBPACK_IMPORTED_MODULE_0__.useRef(null);\n const overflowbuttonRef = react__WEBPACK_IMPORTED_MODULE_0__.useRef(null);\n const stickyButtonsRef = react__WEBPACK_IMPORTED_MODULE_0__.useRef(null);\n const tabStripInnerRef = react__WEBPACK_IMPORTED_MODULE_0__.useRef(null);\n const icons = layout.getIcons();\n react__WEBPACK_IMPORTED_MODULE_0__.useLayoutEffect(() => {\n border.setTabHeaderRect(layout.getBoundingClientRect(selfRef.current));\n });\n const { selfRef, userControlledPositionRef, onScroll, onScrollPointerDown, hiddenTabs, onMouseWheel, isTabOverflow } = (0,_TabOverflowHook__WEBPACK_IMPORTED_MODULE_6__.useTabOverflow)(layout, border, _Orientation__WEBPACK_IMPORTED_MODULE_7__.Orientation.flip(border.getOrientation()), tabStripInnerRef, miniScrollRef, layout.getClassName(_Types__WEBPACK_IMPORTED_MODULE_8__.CLASSES.FLEXLAYOUT__BORDER_BUTTON));\n const onAuxMouseClick = (event) => {\n if ((0,_Utils__WEBPACK_IMPORTED_MODULE_9__.isAuxMouseEvent)(event)) {\n layout.auxMouseClick(border, event);\n }\n };\n const onContextMenu = (event) => {\n layout.showContextMenu(border, event);\n };\n const onInterceptPointerDown = (event) => {\n event.stopPropagation();\n };\n const onOverflowClick = (event) => {\n const callback = layout.getShowOverflowMenu();\n const items = hiddenTabs.map(h => { return { index: h, node: border.getChildren()[h] }; });\n if (callback !== undefined) {\n callback(border, event, items, onOverflowItemSelect);\n }\n else {\n const element = overflowbuttonRef.current;\n (0,_PopupMenu__WEBPACK_IMPORTED_MODULE_3__.showPopup)(element, border, items, onOverflowItemSelect, layout);\n }\n event.stopPropagation();\n };\n const onOverflowItemSelect = (item) => {\n layout.doAction(_model_Actions__WEBPACK_IMPORTED_MODULE_4__.Actions.selectTab(item.node.getId()));\n userControlledPositionRef.current = false;\n };\n const onPopoutTab = (event) => {\n const selectedTabNode = border.getChildren()[border.getSelected()];\n if (selectedTabNode !== undefined) {\n layout.doAction(_model_Actions__WEBPACK_IMPORTED_MODULE_4__.Actions.popoutTab(selectedTabNode.getId()));\n }\n event.stopPropagation();\n };\n const cm = layout.getClassName;\n const tabButtons = [];\n const layoutTab = (i) => {\n let isSelected = border.getSelected() === i;\n let child = border.getChildren()[i];\n tabButtons.push(react__WEBPACK_IMPORTED_MODULE_0__.createElement(_BorderButton__WEBPACK_IMPORTED_MODULE_2__.BorderButton, { layout: layout, border: border.getLocation().getName(), node: child, path: border.getPath() + \"/tb\" + i, key: child.getId(), selected: isSelected, icons: icons }));\n if (i < border.getChildren().length - 1) {\n tabButtons.push(react__WEBPACK_IMPORTED_MODULE_0__.createElement(\"div\", { key: \"divider\" + i, className: cm(_Types__WEBPACK_IMPORTED_MODULE_8__.CLASSES.FLEXLAYOUT__BORDER_TAB_DIVIDER) }));\n }\n };\n for (let i = 0; i < border.getChildren().length; i++) {\n layoutTab(i);\n }\n let borderClasses = cm(_Types__WEBPACK_IMPORTED_MODULE_8__.CLASSES.FLEXLAYOUT__BORDER) + \" \" + cm(_Types__WEBPACK_IMPORTED_MODULE_8__.CLASSES.FLEXLAYOUT__BORDER_ + border.getLocation().getName());\n if (border.getClassName() !== undefined) {\n borderClasses += \" \" + border.getClassName();\n }\n // allow customization of tabset right/bottom buttons\n let buttons = [];\n let stickyButtons = [];\n const renderState = { buttons, stickyButtons: stickyButtons, overflowPosition: undefined };\n layout.customizeTabSet(border, renderState);\n buttons = renderState.buttons;\n if (renderState.overflowPosition === undefined) {\n renderState.overflowPosition = stickyButtons.length;\n }\n if (stickyButtons.length > 0) {\n if (isTabOverflow) {\n buttons = [...stickyButtons, ...buttons];\n }\n else {\n tabButtons.push(react__WEBPACK_IMPORTED_MODULE_0__.createElement(\"div\", { ref: stickyButtonsRef, key: \"sticky_buttons_container\", onPointerDown: onInterceptPointerDown, onDragStart: (e) => { e.preventDefault(); }, className: cm(_Types__WEBPACK_IMPORTED_MODULE_8__.CLASSES.FLEXLAYOUT__TAB_TOOLBAR_STICKY_BUTTONS_CONTAINER) }, stickyButtons));\n }\n }\n if (hiddenTabs.length > 0) {\n const overflowTitle = layout.i18nName(_I18nLabel__WEBPACK_IMPORTED_MODULE_5__.I18nLabel.Overflow_Menu_Tooltip);\n let overflowContent;\n if (typeof icons.more === \"function\") {\n const items = hiddenTabs.map(h => { return { index: h, node: border.getChildren()[h] }; });\n overflowContent = icons.more(border, items);\n }\n else {\n overflowContent = (react__WEBPACK_IMPORTED_MODULE_0__.createElement(react__WEBPACK_IMPORTED_MODULE_0__.Fragment, null,\n icons.more,\n react__WEBPACK_IMPORTED_MODULE_0__.createElement(\"div\", { className: cm(_Types__WEBPACK_IMPORTED_MODULE_8__.CLASSES.FLEXLAYOUT__TAB_BUTTON_OVERFLOW_COUNT) }, hiddenTabs.length)));\n }\n buttons.splice(Math.min(renderState.overflowPosition, buttons.length), 0, react__WEBPACK_IMPORTED_MODULE_0__.createElement(\"button\", { key: \"overflowbutton\", ref: overflowbuttonRef, className: cm(_Types__WEBPACK_IMPORTED_MODULE_8__.CLASSES.FLEXLAYOUT__BORDER_TOOLBAR_BUTTON) + \" \" + cm(_Types__WEBPACK_IMPORTED_MODULE_8__.CLASSES.FLEXLAYOUT__BORDER_TOOLBAR_BUTTON_OVERFLOW) + \" \" + cm(_Types__WEBPACK_IMPORTED_MODULE_8__.CLASSES.FLEXLAYOUT__BORDER_TOOLBAR_BUTTON_OVERFLOW_ + border.getLocation().getName()), title: overflowTitle, onClick: onOverflowClick, onPointerDown: onInterceptPointerDown }, overflowContent));\n }\n const selectedIndex = border.getSelected();\n if (selectedIndex !== -1) {\n const selectedTabNode = border.getChildren()[selectedIndex];\n if (selectedTabNode !== undefined && layout.isSupportsPopout() && selectedTabNode.isEnablePopout()) {\n const popoutTitle = layout.i18nName(_I18nLabel__WEBPACK_IMPORTED_MODULE_5__.I18nLabel.Popout_Tab);\n buttons.push(react__WEBPACK_IMPORTED_MODULE_0__.createElement(\"button\", { key: \"popout\", title: popoutTitle, className: cm(_Types__WEBPACK_IMPORTED_MODULE_8__.CLASSES.FLEXLAYOUT__BORDER_TOOLBAR_BUTTON) + \" \" + cm(_Types__WEBPACK_IMPORTED_MODULE_8__.CLASSES.FLEXLAYOUT__BORDER_TOOLBAR_BUTTON_FLOAT), onClick: onPopoutTab, onPointerDown: onInterceptPointerDown }, (typeof icons.popout === \"function\") ? icons.popout(selectedTabNode) : icons.popout));\n }\n }\n const toolbar = (react__WEBPACK_IMPORTED_MODULE_0__.createElement(\"div\", { key: \"toolbar\", ref: toolbarRef, className: cm(_Types__WEBPACK_IMPORTED_MODULE_8__.CLASSES.FLEXLAYOUT__BORDER_TOOLBAR) + \" \" + cm(_Types__WEBPACK_IMPORTED_MODULE_8__.CLASSES.FLEXLAYOUT__BORDER_TOOLBAR_ + border.getLocation().getName()) }, buttons));\n let innerStyle = {};\n let outerStyle = {};\n const borderHeight = size - 1;\n if (border.getLocation() === _DockLocation__WEBPACK_IMPORTED_MODULE_1__.DockLocation.LEFT) {\n innerStyle = { right: \"100%\", top: 0 };\n outerStyle = { width: borderHeight, overflowY: \"auto\" };\n }\n else if (border.getLocation() === _DockLocation__WEBPACK_IMPORTED_MODULE_1__.DockLocation.RIGHT) {\n innerStyle = { left: \"100%\", top: 0 };\n outerStyle = { width: borderHeight, overflowY: \"auto\" };\n }\n else {\n innerStyle = { left: 0 };\n outerStyle = { height: borderHeight, overflowX: \"auto\" };\n }\n let miniScrollbar = undefined;\n if (border.isEnableTabScrollbar()) {\n miniScrollbar = (react__WEBPACK_IMPORTED_MODULE_0__.createElement(\"div\", { ref: miniScrollRef, className: cm(_Types__WEBPACK_IMPORTED_MODULE_8__.CLASSES.FLEXLAYOUT__MINI_SCROLLBAR), onPointerDown: onScrollPointerDown }));\n }\n return (react__WEBPACK_IMPORTED_MODULE_0__.createElement(\"div\", { ref: selfRef, style: {\n display: \"flex\",\n flexDirection: (border.getOrientation() === _Orientation__WEBPACK_IMPORTED_MODULE_7__.Orientation.VERT ? \"row\" : \"column\")\n }, className: borderClasses, \"data-layout-path\": border.getPath(), onClick: onAuxMouseClick, onAuxClick: onAuxMouseClick, onContextMenu: onContextMenu, onWheel: onMouseWheel },\n react__WEBPACK_IMPORTED_MODULE_0__.createElement(\"div\", { className: cm(_Types__WEBPACK_IMPORTED_MODULE_8__.CLASSES.FLEXLAYOUT__MINI_SCROLLBAR_CONTAINER) },\n react__WEBPACK_IMPORTED_MODULE_0__.createElement(\"div\", { ref: tabStripInnerRef, className: cm(_Types__WEBPACK_IMPORTED_MODULE_8__.CLASSES.FLEXLAYOUT__BORDER_INNER) + \" \" + cm(_Types__WEBPACK_IMPORTED_MODULE_8__.CLASSES.FLEXLAYOUT__BORDER_INNER_ + border.getLocation().getName()), style: outerStyle, onScroll: onScroll },\n react__WEBPACK_IMPORTED_MODULE_0__.createElement(\"div\", { style: innerStyle, className: cm(_Types__WEBPACK_IMPORTED_MODULE_8__.CLASSES.FLEXLAYOUT__BORDER_INNER_TAB_CONTAINER) + \" \" + cm(_Types__WEBPACK_IMPORTED_MODULE_8__.CLASSES.FLEXLAYOUT__BORDER_INNER_TAB_CONTAINER_ + border.getLocation().getName()) }, tabButtons)),\n miniScrollbar),\n toolbar));\n};\n\n\n//# sourceURL=webpack://FlexLayout/./src/view/BorderTabSet.tsx?");
330
330
 
331
331
  /***/ }),
332
332
 
@@ -366,7 +366,7 @@ eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpac
366
366
  \*****************************/
367
367
  /***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {
368
368
 
369
- 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?");
369
+ 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.7\";\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?");
370
370
 
371
371
  /***/ }),
372
372
 
@@ -466,7 +466,7 @@ eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpac
466
466
  \**************************************/
467
467
  /***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {
468
468
 
469
- eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpack_require__.d(__webpack_exports__, {\n/* harmony export */ useTabOverflow: () => (/* binding */ useTabOverflow)\n/* harmony export */ });\n/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! react */ \"react\");\n/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(react__WEBPACK_IMPORTED_MODULE_0__);\n/* harmony import */ var _Orientation__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ../Orientation */ \"./src/Orientation.ts\");\n/* harmony import */ var _Utils__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ./Utils */ \"./src/view/Utils.tsx\");\n\n\n\n/** @internal */\nconst useTabOverflow = (layout, node, orientation, tabStripRef, miniScrollRef, tabClassName) => {\n const [hiddenTabs, setHiddenTabs] = react__WEBPACK_IMPORTED_MODULE_0__.useState([]);\n const [isTabOverflow, setTabOverflow] = react__WEBPACK_IMPORTED_MODULE_0__.useState(false);\n const selfRef = react__WEBPACK_IMPORTED_MODULE_0__.useRef(null);\n const userControlledPositionRef = react__WEBPACK_IMPORTED_MODULE_0__.useRef(false);\n const updateHiddenTabsTimerRef = react__WEBPACK_IMPORTED_MODULE_0__.useRef(undefined);\n const hiddenTabsRef = react__WEBPACK_IMPORTED_MODULE_0__.useRef([]);\n const thumbInternalPos = react__WEBPACK_IMPORTED_MODULE_0__.useRef(0);\n hiddenTabsRef.current = hiddenTabs;\n // if node changes (new model) then reset scroll to 0\n react__WEBPACK_IMPORTED_MODULE_0__.useEffect(() => {\n if (tabStripRef.current) {\n setScrollPosition(0);\n }\n }, [node]);\n // if selected node or tabset/border rectangle change then unset usercontrolled (so selected tab will be kept in view)\n react__WEBPACK_IMPORTED_MODULE_0__.useEffect(() => {\n userControlledPositionRef.current = false;\n }, [node.getSelectedNode(), node.getRect().width, node.getRect().height]);\n react__WEBPACK_IMPORTED_MODULE_0__.useEffect(() => {\n checkForOverflow(); // if tabs + sticky buttons length > scroll area => move sticky buttons to right buttons\n if (!userControlledPositionRef.current) {\n const selectedTab = findSelectedTab();\n if (selectedTab) {\n selectedTab.scrollIntoView();\n }\n }\n updateHiddenTabs();\n updateScrollMetrics();\n });\n const updateScrollMetrics = () => {\n if (tabStripRef.current && miniScrollRef.current) {\n const t = tabStripRef.current;\n const s = miniScrollRef.current;\n const size = getSize(t);\n const scrollSize = getScrollSize(t);\n const position = getScrollPosition(t);\n if (scrollSize > size && scrollSize > 0) {\n let thumbSize = size * size / scrollSize;\n let adjust = 0;\n if (thumbSize < 20) {\n adjust = 20 - thumbSize;\n thumbSize = 20;\n }\n const thumbPos = position * (size - adjust) / scrollSize;\n if (orientation === _Orientation__WEBPACK_IMPORTED_MODULE_1__.Orientation.HORZ) {\n s.style.width = thumbSize + \"px\";\n s.style.left = thumbPos + \"px\";\n }\n else {\n s.style.height = thumbSize + \"px\";\n s.style.top = thumbPos + \"px\";\n }\n s.style.display = \"block\";\n }\n else {\n s.style.display = \"none\";\n }\n if (orientation === _Orientation__WEBPACK_IMPORTED_MODULE_1__.Orientation.HORZ) {\n s.style.bottom = \"0px\";\n }\n else {\n s.style.right = \"0px\";\n }\n }\n };\n const updateHiddenTabs = () => {\n if (updateHiddenTabsTimerRef.current === undefined) {\n // throttle updates to prevent Maximum update depth exceeded error\n updateHiddenTabsTimerRef.current = setTimeout(() => {\n const newHiddenTabs = findHiddenTabs();\n if (!arraysEqual(newHiddenTabs, hiddenTabsRef.current)) {\n setHiddenTabs(newHiddenTabs);\n }\n updateHiddenTabsTimerRef.current = undefined;\n }, 100);\n }\n };\n const updateTabRects = () => {\n if (tabStripRef.current) {\n const tabContainer = tabStripRef.current.firstElementChild;\n const nodeChildren = node.getChildren();\n let i = 0;\n Array.from(tabContainer.children).forEach((child) => {\n if (child.classList.contains(tabClassName)) {\n const childNode = nodeChildren[i];\n childNode.setTabRect(layout.getBoundingClientRect(child));\n i++;\n }\n });\n }\n };\n const onScroll = () => {\n userControlledPositionRef.current = true;\n updateTabRects();\n updateScrollMetrics();\n updateHiddenTabs();\n };\n const onScrollPointerDown = (event) => {\n var _a;\n event.stopPropagation();\n miniScrollRef.current.setPointerCapture(event.pointerId);\n const r = (_a = miniScrollRef.current) === null || _a === void 0 ? void 0 : _a.getBoundingClientRect();\n if (orientation === _Orientation__WEBPACK_IMPORTED_MODULE_1__.Orientation.HORZ) {\n thumbInternalPos.current = event.clientX - r.x;\n }\n else {\n thumbInternalPos.current = event.clientY - r.y;\n }\n userControlledPositionRef.current = true;\n (0,_Utils__WEBPACK_IMPORTED_MODULE_2__.startDrag)(event.currentTarget.ownerDocument, event, onDragMove, onDragEnd, onDragCancel);\n };\n const onDragMove = (x, y) => {\n if (tabStripRef.current && miniScrollRef.current) {\n const t = tabStripRef.current;\n const s = miniScrollRef.current;\n const size = getSize(t);\n const scrollSize = getScrollSize(t);\n const thumbSize = getSize(s);\n const r = t.getBoundingClientRect();\n let thumb = 0;\n if (orientation === _Orientation__WEBPACK_IMPORTED_MODULE_1__.Orientation.HORZ) {\n thumb = x - r.x - thumbInternalPos.current;\n }\n else {\n thumb = y - r.y - thumbInternalPos.current;\n }\n thumb = Math.max(0, Math.min(scrollSize - thumbSize, thumb));\n if (size > 0) {\n const scrollPos = thumb * scrollSize / size;\n setScrollPosition(scrollPos);\n }\n }\n };\n const onDragEnd = () => {\n };\n const onDragCancel = () => {\n };\n const findSelectedTab = () => {\n let found = undefined;\n if (tabStripRef.current) {\n const tabContainer = tabStripRef.current.firstElementChild;\n Array.from(tabContainer.children).forEach((child) => {\n if (child.classList.contains(tabClassName + \"--selected\")) {\n found = child;\n }\n });\n }\n return found;\n };\n const checkForOverflow = () => {\n if (tabStripRef.current) {\n const strip = tabStripRef.current;\n const tabContainer = strip.firstElementChild;\n const offset = isTabOverflow ? 10 : 0; // prevents flashing, after sticky buttons docked set, must be 10 pixels smaller before unsetting\n const dock = (getSize(tabContainer) + offset) > getSize(tabStripRef.current);\n if (dock !== isTabOverflow) {\n setTabOverflow(dock);\n }\n }\n };\n const findHiddenTabs = () => {\n const hidden = [];\n if (tabStripRef.current) {\n const strip = tabStripRef.current;\n const stripRect = strip.getBoundingClientRect();\n const visibleNear = getNear(stripRect) - 1;\n const visibleFar = getFar(stripRect) + 1;\n const tabContainer = strip.firstElementChild;\n let i = 0;\n Array.from(tabContainer.children).forEach((child) => {\n const tabRect = child.getBoundingClientRect();\n if (child.classList.contains(tabClassName)) {\n if (getNear(tabRect) < visibleNear || getFar(tabRect) > visibleFar) {\n hidden.push(i);\n }\n i++;\n }\n });\n }\n return hidden;\n };\n const onMouseWheel = (event) => {\n if (tabStripRef.current) {\n if (node.getChildren().length === 0)\n return;\n let delta = 0;\n if (Math.abs(event.deltaY) > 0) {\n delta = -event.deltaY;\n if (event.deltaMode === 1) {\n // DOM_DELTA_LINE\t0x01\tThe delta values are specified in lines.\n delta *= 40;\n }\n const newPos = getScrollPosition(tabStripRef.current) - delta;\n const maxScroll = getScrollSize(tabStripRef.current) - getSize(tabStripRef.current);\n const p = Math.max(0, Math.min(maxScroll, newPos));\n setScrollPosition(p);\n updateTabRects();\n updateHiddenTabs();\n userControlledPositionRef.current = true;\n event.stopPropagation();\n }\n }\n };\n // orientation helpers:\n const getNear = (rect) => {\n if (orientation === _Orientation__WEBPACK_IMPORTED_MODULE_1__.Orientation.HORZ) {\n return rect.x;\n }\n else {\n return rect.y;\n }\n };\n const getFar = (rect) => {\n if (orientation === _Orientation__WEBPACK_IMPORTED_MODULE_1__.Orientation.HORZ) {\n return rect.right;\n }\n else {\n return rect.bottom;\n }\n };\n const getSize = (elm) => {\n if (orientation === _Orientation__WEBPACK_IMPORTED_MODULE_1__.Orientation.HORZ) {\n return elm.clientWidth;\n }\n else {\n return elm.clientHeight;\n }\n };\n const getScrollSize = (elm) => {\n if (orientation === _Orientation__WEBPACK_IMPORTED_MODULE_1__.Orientation.HORZ) {\n return elm.scrollWidth;\n }\n else {\n return elm.scrollHeight;\n }\n };\n const setScrollPosition = (p) => {\n if (orientation === _Orientation__WEBPACK_IMPORTED_MODULE_1__.Orientation.HORZ) {\n tabStripRef.current.scrollLeft = p;\n }\n else {\n tabStripRef.current.scrollTop = p;\n }\n };\n const getScrollPosition = (elm) => {\n if (orientation === _Orientation__WEBPACK_IMPORTED_MODULE_1__.Orientation.HORZ) {\n return elm.scrollLeft;\n }\n else {\n return elm.scrollTop;\n }\n };\n return { selfRef, userControlledPositionRef, onScroll, onScrollPointerDown, hiddenTabs, onMouseWheel, isTabOverflow };\n};\nfunction arraysEqual(arr1, arr2) {\n return arr1.length === arr2.length && arr1.every((val, index) => val === arr2[index]);\n}\n\n\n//# sourceURL=webpack://FlexLayout/./src/view/TabOverflowHook.tsx?");
469
+ eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpack_require__.d(__webpack_exports__, {\n/* harmony export */ useTabOverflow: () => (/* binding */ useTabOverflow)\n/* harmony export */ });\n/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! react */ \"react\");\n/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(react__WEBPACK_IMPORTED_MODULE_0__);\n/* harmony import */ var _Orientation__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ../Orientation */ \"./src/Orientation.ts\");\n/* harmony import */ var _Utils__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ./Utils */ \"./src/view/Utils.tsx\");\n\n\n\n/** @internal */\nconst useTabOverflow = (layout, node, orientation, tabStripRef, miniScrollRef, tabClassName) => {\n const [hiddenTabs, setHiddenTabs] = react__WEBPACK_IMPORTED_MODULE_0__.useState([]);\n const [isTabOverflow, setTabOverflow] = react__WEBPACK_IMPORTED_MODULE_0__.useState(false);\n const selfRef = react__WEBPACK_IMPORTED_MODULE_0__.useRef(null);\n const userControlledPositionRef = react__WEBPACK_IMPORTED_MODULE_0__.useRef(false);\n const updateHiddenTabsTimerRef = react__WEBPACK_IMPORTED_MODULE_0__.useRef(undefined);\n const hiddenTabsRef = react__WEBPACK_IMPORTED_MODULE_0__.useRef([]);\n const thumbInternalPos = react__WEBPACK_IMPORTED_MODULE_0__.useRef(0);\n const repositioningRef = react__WEBPACK_IMPORTED_MODULE_0__.useRef(false);\n hiddenTabsRef.current = hiddenTabs;\n // if node changes (new model) then reset scroll to 0\n react__WEBPACK_IMPORTED_MODULE_0__.useEffect(() => {\n if (tabStripRef.current) {\n setScrollPosition(0);\n }\n }, [node]);\n // if selected node or tabset/border rectangle change then unset usercontrolled (so selected tab will be kept in view)\n react__WEBPACK_IMPORTED_MODULE_0__.useEffect(() => {\n userControlledPositionRef.current = false;\n }, [node.getSelectedNode(), node.getRect().width, node.getRect().height]);\n react__WEBPACK_IMPORTED_MODULE_0__.useEffect(() => {\n checkForOverflow(); // if tabs + sticky buttons length > scroll area => move sticky buttons to right buttons\n if (userControlledPositionRef.current === false) {\n scrollIntoView();\n }\n updateHiddenTabs();\n updateScrollMetrics();\n });\n function scrollIntoView() {\n const selectedTabNode = node.getSelectedNode();\n if (selectedTabNode && tabStripRef.current) {\n const stripRect = layout.getBoundingClientRect(tabStripRef.current);\n const selectedRect = selectedTabNode.getTabRect();\n let shift = getNear(stripRect) - getNear(selectedRect);\n if (shift > 2 || getSize(selectedRect) > getSize(stripRect)) { // maybe 2 will prevent jitter?\n setScrollPosition(getScrollPosition(tabStripRef.current) - shift);\n repositioningRef.current = true; // prevent onScroll setting userControlledPosition\n }\n else {\n shift = getFar(selectedRect) - getFar(stripRect);\n if (shift > 2) {\n setScrollPosition(getScrollPosition(tabStripRef.current) + shift);\n repositioningRef.current = true;\n }\n }\n }\n }\n const updateScrollMetrics = () => {\n if (tabStripRef.current && miniScrollRef.current) {\n const t = tabStripRef.current;\n const s = miniScrollRef.current;\n const size = getElementSize(t);\n const scrollSize = getScrollSize(t);\n const position = getScrollPosition(t);\n if (scrollSize > size && scrollSize > 0) {\n let thumbSize = size * size / scrollSize;\n let adjust = 0;\n if (thumbSize < 20) {\n adjust = 20 - thumbSize;\n thumbSize = 20;\n }\n const thumbPos = position * (size - adjust) / scrollSize;\n if (orientation === _Orientation__WEBPACK_IMPORTED_MODULE_1__.Orientation.HORZ) {\n s.style.width = thumbSize + \"px\";\n s.style.left = thumbPos + \"px\";\n }\n else {\n s.style.height = thumbSize + \"px\";\n s.style.top = thumbPos + \"px\";\n }\n s.style.display = \"block\";\n }\n else {\n s.style.display = \"none\";\n }\n if (orientation === _Orientation__WEBPACK_IMPORTED_MODULE_1__.Orientation.HORZ) {\n s.style.bottom = \"0px\";\n }\n else {\n s.style.right = \"0px\";\n }\n }\n };\n const updateHiddenTabs = () => {\n if (updateHiddenTabsTimerRef.current === undefined) {\n // throttle updates to prevent Maximum update depth exceeded error\n updateHiddenTabsTimerRef.current = setTimeout(() => {\n const newHiddenTabs = findHiddenTabs();\n if (!arraysEqual(newHiddenTabs, hiddenTabsRef.current)) {\n setHiddenTabs(newHiddenTabs);\n }\n updateHiddenTabsTimerRef.current = undefined;\n }, 100);\n }\n };\n const onScroll = () => {\n if (!repositioningRef.current) {\n userControlledPositionRef.current = true;\n }\n repositioningRef.current = false;\n updateScrollMetrics();\n updateHiddenTabs();\n };\n const onScrollPointerDown = (event) => {\n var _a;\n event.stopPropagation();\n miniScrollRef.current.setPointerCapture(event.pointerId);\n const r = (_a = miniScrollRef.current) === null || _a === void 0 ? void 0 : _a.getBoundingClientRect();\n if (orientation === _Orientation__WEBPACK_IMPORTED_MODULE_1__.Orientation.HORZ) {\n thumbInternalPos.current = event.clientX - r.x;\n }\n else {\n thumbInternalPos.current = event.clientY - r.y;\n }\n (0,_Utils__WEBPACK_IMPORTED_MODULE_2__.startDrag)(event.currentTarget.ownerDocument, event, onDragMove, onDragEnd, onDragCancel);\n };\n const onDragMove = (x, y) => {\n if (tabStripRef.current && miniScrollRef.current) {\n const t = tabStripRef.current;\n const s = miniScrollRef.current;\n const size = getElementSize(t);\n const scrollSize = getScrollSize(t);\n const thumbSize = getElementSize(s);\n const r = t.getBoundingClientRect();\n let thumb = 0;\n if (orientation === _Orientation__WEBPACK_IMPORTED_MODULE_1__.Orientation.HORZ) {\n thumb = x - r.x - thumbInternalPos.current;\n }\n else {\n thumb = y - r.y - thumbInternalPos.current;\n }\n thumb = Math.max(0, Math.min(scrollSize - thumbSize, thumb));\n if (size > 0) {\n const scrollPos = thumb * scrollSize / size;\n setScrollPosition(scrollPos);\n }\n }\n };\n const onDragEnd = () => {\n };\n const onDragCancel = () => {\n };\n const checkForOverflow = () => {\n if (tabStripRef.current) {\n const strip = tabStripRef.current;\n const tabContainer = strip.firstElementChild;\n const offset = isTabOverflow ? 10 : 0; // prevents flashing, after sticky buttons docked set, must be 10 pixels smaller before unsetting\n const dock = (getElementSize(tabContainer) + offset) > getElementSize(tabStripRef.current);\n if (dock !== isTabOverflow) {\n setTabOverflow(dock);\n }\n }\n };\n const findHiddenTabs = () => {\n const hidden = [];\n if (tabStripRef.current) {\n const strip = tabStripRef.current;\n const stripRect = strip.getBoundingClientRect();\n const visibleNear = getNear(stripRect) - 1;\n const visibleFar = getFar(stripRect) + 1;\n const tabContainer = strip.firstElementChild;\n let i = 0;\n Array.from(tabContainer.children).forEach((child) => {\n const tabRect = child.getBoundingClientRect();\n if (child.classList.contains(tabClassName)) {\n if (getNear(tabRect) < visibleNear || getFar(tabRect) > visibleFar) {\n hidden.push(i);\n }\n i++;\n }\n });\n }\n return hidden;\n };\n const onMouseWheel = (event) => {\n if (tabStripRef.current) {\n if (node.getChildren().length === 0)\n return;\n let delta = 0;\n if (Math.abs(event.deltaY) > 0) {\n delta = -event.deltaY;\n if (event.deltaMode === 1) {\n // DOM_DELTA_LINE\t0x01\tThe delta values are specified in lines.\n delta *= 40;\n }\n const newPos = getScrollPosition(tabStripRef.current) - delta;\n const maxScroll = getScrollSize(tabStripRef.current) - getElementSize(tabStripRef.current);\n const p = Math.max(0, Math.min(maxScroll, newPos));\n setScrollPosition(p);\n event.stopPropagation();\n }\n }\n };\n // orientation helpers:\n const getNear = (rect) => {\n if (orientation === _Orientation__WEBPACK_IMPORTED_MODULE_1__.Orientation.HORZ) {\n return rect.x;\n }\n else {\n return rect.y;\n }\n };\n const getFar = (rect) => {\n if (orientation === _Orientation__WEBPACK_IMPORTED_MODULE_1__.Orientation.HORZ) {\n return rect.right;\n }\n else {\n return rect.bottom;\n }\n };\n const getElementSize = (elm) => {\n if (orientation === _Orientation__WEBPACK_IMPORTED_MODULE_1__.Orientation.HORZ) {\n return elm.clientWidth;\n }\n else {\n return elm.clientHeight;\n }\n };\n const getSize = (rect) => {\n if (orientation === _Orientation__WEBPACK_IMPORTED_MODULE_1__.Orientation.HORZ) {\n return rect.width;\n }\n else {\n return rect.height;\n }\n };\n const getScrollSize = (elm) => {\n if (orientation === _Orientation__WEBPACK_IMPORTED_MODULE_1__.Orientation.HORZ) {\n return elm.scrollWidth;\n }\n else {\n return elm.scrollHeight;\n }\n };\n const setScrollPosition = (p) => {\n if (orientation === _Orientation__WEBPACK_IMPORTED_MODULE_1__.Orientation.HORZ) {\n tabStripRef.current.scrollLeft = p;\n }\n else {\n tabStripRef.current.scrollTop = p;\n }\n };\n const getScrollPosition = (elm) => {\n if (orientation === _Orientation__WEBPACK_IMPORTED_MODULE_1__.Orientation.HORZ) {\n return elm.scrollLeft;\n }\n else {\n return elm.scrollTop;\n }\n };\n return { selfRef, userControlledPositionRef, onScroll, onScrollPointerDown, hiddenTabs, onMouseWheel, isTabOverflow };\n};\nfunction arraysEqual(arr1, arr2) {\n return arr1.length === arr2.length && arr1.every((val, index) => val === arr2[index]);\n}\n\n\n//# sourceURL=webpack://FlexLayout/./src/view/TabOverflowHook.tsx?");
470
470
 
471
471
  /***/ }),
472
472