flexlayout-react 0.8.0 → 0.8.1

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 (25) hide show
  1. package/ChangeLog.txt +5 -0
  2. package/declarations/view/Layout.d.ts +1 -0
  3. package/dist/flexlayout.js +6 -6
  4. package/dist/flexlayout_min.js +1 -1
  5. package/lib/model/TabSetNode.js +2 -0
  6. package/lib/model/TabSetNode.js.map +1 -1
  7. package/lib/view/BorderButton.js +7 -2
  8. package/lib/view/BorderButton.js.map +1 -1
  9. package/lib/view/Layout.js +1 -0
  10. package/lib/view/Layout.js.map +1 -1
  11. package/lib/view/TabButton.js +7 -2
  12. package/lib/view/TabButton.js.map +1 -1
  13. package/lib/view/TabSet.js +7 -2
  14. package/lib/view/TabSet.js.map +1 -1
  15. package/package.json +1 -1
  16. package/src/model/TabSetNode.ts +3 -0
  17. package/src/view/BorderButton.tsx +6 -2
  18. package/src/view/Layout.tsx +2 -0
  19. package/src/view/TabButton.tsx +6 -2
  20. package/src/view/TabSet.tsx +6 -2
  21. package/style/dark.css +685 -685
  22. package/style/gray.css +668 -668
  23. package/style/light.css +669 -669
  24. package/style/rounded.css +697 -697
  25. package/style/underline.css +690 -690
package/dist/flexlayout.js CHANGED
@@ -116,7 +116,7 @@ eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpac
116
116
  \**********************/
117
117
  /***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {
118
118
 
119
- eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpack_require__.d(__webpack_exports__, {\n/* harmony export */ Action: () => (/* reexport safe */ _model_Action__WEBPACK_IMPORTED_MODULE_1__.Action),\n/* harmony export */ Actions: () => (/* reexport safe */ _model_Actions__WEBPACK_IMPORTED_MODULE_2__.Actions),\n/* harmony export */ BorderNode: () => (/* reexport safe */ _model_BorderNode__WEBPACK_IMPORTED_MODULE_3__.BorderNode),\n/* harmony export */ BorderSet: () => (/* reexport safe */ _model_BorderSet__WEBPACK_IMPORTED_MODULE_4__.BorderSet),\n/* harmony export */ CLASSES: () => (/* reexport safe */ _Types__WEBPACK_IMPORTED_MODULE_20__.CLASSES),\n/* harmony export */ DefaultMax: () => (/* reexport safe */ _model_Model__WEBPACK_IMPORTED_MODULE_9__.DefaultMax),\n/* harmony export */ DefaultMin: () => (/* reexport safe */ _model_Model__WEBPACK_IMPORTED_MODULE_9__.DefaultMin),\n/* harmony export */ DockLocation: () => (/* reexport safe */ _DockLocation__WEBPACK_IMPORTED_MODULE_15__.DockLocation),\n/* harmony export */ DropInfo: () => (/* reexport safe */ _DropInfo__WEBPACK_IMPORTED_MODULE_16__.DropInfo),\n/* harmony export */ I18nLabel: () => (/* reexport safe */ _I18nLabel__WEBPACK_IMPORTED_MODULE_17__.I18nLabel),\n/* harmony export */ ICloseType: () => (/* reexport safe */ _model_ICloseType__WEBPACK_IMPORTED_MODULE_5__.ICloseType),\n/* harmony export */ Layout: () => (/* reexport safe */ _view_Layout__WEBPACK_IMPORTED_MODULE_0__.Layout),\n/* harmony export */ LayoutInternal: () => (/* reexport safe */ _view_Layout__WEBPACK_IMPORTED_MODULE_0__.LayoutInternal),\n/* harmony export */ LayoutWindow: () => (/* reexport safe */ _model_LayoutWindow__WEBPACK_IMPORTED_MODULE_14__.LayoutWindow),\n/* harmony export */ Model: () => (/* reexport safe */ _model_Model__WEBPACK_IMPORTED_MODULE_9__.Model),\n/* harmony export */ Node: () => (/* reexport safe */ _model_Node__WEBPACK_IMPORTED_MODULE_10__.Node),\n/* harmony export */ Orientation: () => (/* reexport safe */ _Orientation__WEBPACK_IMPORTED_MODULE_18__.Orientation),\n/* harmony export */ Rect: () => (/* reexport safe */ _Rect__WEBPACK_IMPORTED_MODULE_19__.Rect),\n/* harmony export */ RowNode: () => (/* reexport safe */ _model_RowNode__WEBPACK_IMPORTED_MODULE_11__.RowNode),\n/* harmony export */ TabNode: () => (/* reexport safe */ _model_TabNode__WEBPACK_IMPORTED_MODULE_12__.TabNode),\n/* harmony export */ TabSetNode: () => (/* reexport safe */ _model_TabSetNode__WEBPACK_IMPORTED_MODULE_13__.TabSetNode)\n/* harmony export */ });\n/* harmony import */ var _view_Layout__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! ./view/Layout */ \"./src/view/Layout.tsx\");\n/* harmony import */ var _model_Action__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ./model/Action */ \"./src/model/Action.ts\");\n/* harmony import */ var _model_Actions__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ./model/Actions */ \"./src/model/Actions.ts\");\n/* harmony import */ var _model_BorderNode__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! ./model/BorderNode */ \"./src/model/BorderNode.ts\");\n/* harmony import */ var _model_BorderSet__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(/*! ./model/BorderSet */ \"./src/model/BorderSet.ts\");\n/* harmony import */ var _model_ICloseType__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__(/*! ./model/ICloseType */ \"./src/model/ICloseType.ts\");\n/* harmony import */ var _model_IDraggable__WEBPACK_IMPORTED_MODULE_6__ = __webpack_require__(/*! ./model/IDraggable */ \"./src/model/IDraggable.ts\");\n/* harmony import */ var _model_IDropTarget__WEBPACK_IMPORTED_MODULE_7__ = __webpack_require__(/*! ./model/IDropTarget */ \"./src/model/IDropTarget.ts\");\n/* harmony import */ var _model_IJsonModel__WEBPACK_IMPORTED_MODULE_8__ = __webpack_require__(/*! ./model/IJsonModel */ \"./src/model/IJsonModel.ts\");\n/* harmony import */ var _model_Model__WEBPACK_IMPORTED_MODULE_9__ = __webpack_require__(/*! ./model/Model */ \"./src/model/Model.ts\");\n/* harmony import */ var _model_Node__WEBPACK_IMPORTED_MODULE_10__ = __webpack_require__(/*! ./model/Node */ \"./src/model/Node.ts\");\n/* harmony import */ var _model_RowNode__WEBPACK_IMPORTED_MODULE_11__ = __webpack_require__(/*! ./model/RowNode */ \"./src/model/RowNode.ts\");\n/* harmony import */ var _model_TabNode__WEBPACK_IMPORTED_MODULE_12__ = __webpack_require__(/*! ./model/TabNode */ \"./src/model/TabNode.ts\");\n/* harmony import */ var _model_TabSetNode__WEBPACK_IMPORTED_MODULE_13__ = __webpack_require__(/*! ./model/TabSetNode */ \"./src/model/TabSetNode.ts\");\n/* harmony import */ var _model_LayoutWindow__WEBPACK_IMPORTED_MODULE_14__ = __webpack_require__(/*! ./model/LayoutWindow */ \"./src/model/LayoutWindow.ts\");\n/* harmony import */ var _DockLocation__WEBPACK_IMPORTED_MODULE_15__ = __webpack_require__(/*! ./DockLocation */ \"./src/DockLocation.ts\");\n/* harmony import */ var _DropInfo__WEBPACK_IMPORTED_MODULE_16__ = __webpack_require__(/*! ./DropInfo */ \"./src/DropInfo.ts\");\n/* harmony import */ var _I18nLabel__WEBPACK_IMPORTED_MODULE_17__ = __webpack_require__(/*! ./I18nLabel */ \"./src/I18nLabel.ts\");\n/* harmony import */ var _Orientation__WEBPACK_IMPORTED_MODULE_18__ = __webpack_require__(/*! ./Orientation */ \"./src/Orientation.ts\");\n/* harmony import */ var _Rect__WEBPACK_IMPORTED_MODULE_19__ = __webpack_require__(/*! ./Rect */ \"./src/Rect.ts\");\n/* harmony import */ var _Types__WEBPACK_IMPORTED_MODULE_20__ = __webpack_require__(/*! ./Types */ \"./src/Types.ts\");\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n//# sourceURL=webpack://FlexLayout/./src/index.ts?");
119
+ eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpack_require__.d(__webpack_exports__, {\n/* harmony export */ Action: () => (/* reexport safe */ _model_Action__WEBPACK_IMPORTED_MODULE_1__.Action),\n/* harmony export */ Actions: () => (/* reexport safe */ _model_Actions__WEBPACK_IMPORTED_MODULE_2__.Actions),\n/* harmony export */ BorderNode: () => (/* reexport safe */ _model_BorderNode__WEBPACK_IMPORTED_MODULE_3__.BorderNode),\n/* harmony export */ BorderSet: () => (/* reexport safe */ _model_BorderSet__WEBPACK_IMPORTED_MODULE_4__.BorderSet),\n/* harmony export */ CLASSES: () => (/* reexport safe */ _Types__WEBPACK_IMPORTED_MODULE_20__.CLASSES),\n/* harmony export */ DefaultMax: () => (/* reexport safe */ _model_Model__WEBPACK_IMPORTED_MODULE_9__.DefaultMax),\n/* harmony export */ DefaultMin: () => (/* reexport safe */ _model_Model__WEBPACK_IMPORTED_MODULE_9__.DefaultMin),\n/* harmony export */ DockLocation: () => (/* reexport safe */ _DockLocation__WEBPACK_IMPORTED_MODULE_15__.DockLocation),\n/* harmony export */ DropInfo: () => (/* reexport safe */ _DropInfo__WEBPACK_IMPORTED_MODULE_16__.DropInfo),\n/* harmony export */ FlexLayoutVersion: () => (/* reexport safe */ _view_Layout__WEBPACK_IMPORTED_MODULE_0__.FlexLayoutVersion),\n/* harmony export */ I18nLabel: () => (/* reexport safe */ _I18nLabel__WEBPACK_IMPORTED_MODULE_17__.I18nLabel),\n/* harmony export */ ICloseType: () => (/* reexport safe */ _model_ICloseType__WEBPACK_IMPORTED_MODULE_5__.ICloseType),\n/* harmony export */ Layout: () => (/* reexport safe */ _view_Layout__WEBPACK_IMPORTED_MODULE_0__.Layout),\n/* harmony export */ LayoutInternal: () => (/* reexport safe */ _view_Layout__WEBPACK_IMPORTED_MODULE_0__.LayoutInternal),\n/* harmony export */ LayoutWindow: () => (/* reexport safe */ _model_LayoutWindow__WEBPACK_IMPORTED_MODULE_14__.LayoutWindow),\n/* harmony export */ Model: () => (/* reexport safe */ _model_Model__WEBPACK_IMPORTED_MODULE_9__.Model),\n/* harmony export */ Node: () => (/* reexport safe */ _model_Node__WEBPACK_IMPORTED_MODULE_10__.Node),\n/* harmony export */ Orientation: () => (/* reexport safe */ _Orientation__WEBPACK_IMPORTED_MODULE_18__.Orientation),\n/* harmony export */ Rect: () => (/* reexport safe */ _Rect__WEBPACK_IMPORTED_MODULE_19__.Rect),\n/* harmony export */ RowNode: () => (/* reexport safe */ _model_RowNode__WEBPACK_IMPORTED_MODULE_11__.RowNode),\n/* harmony export */ TabNode: () => (/* reexport safe */ _model_TabNode__WEBPACK_IMPORTED_MODULE_12__.TabNode),\n/* harmony export */ TabSetNode: () => (/* reexport safe */ _model_TabSetNode__WEBPACK_IMPORTED_MODULE_13__.TabSetNode)\n/* harmony export */ });\n/* harmony import */ var _view_Layout__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! ./view/Layout */ \"./src/view/Layout.tsx\");\n/* harmony import */ var _model_Action__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ./model/Action */ \"./src/model/Action.ts\");\n/* harmony import */ var _model_Actions__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ./model/Actions */ \"./src/model/Actions.ts\");\n/* harmony import */ var _model_BorderNode__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! ./model/BorderNode */ \"./src/model/BorderNode.ts\");\n/* harmony import */ var _model_BorderSet__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(/*! ./model/BorderSet */ \"./src/model/BorderSet.ts\");\n/* harmony import */ var _model_ICloseType__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__(/*! ./model/ICloseType */ \"./src/model/ICloseType.ts\");\n/* harmony import */ var _model_IDraggable__WEBPACK_IMPORTED_MODULE_6__ = __webpack_require__(/*! ./model/IDraggable */ \"./src/model/IDraggable.ts\");\n/* harmony import */ var _model_IDropTarget__WEBPACK_IMPORTED_MODULE_7__ = __webpack_require__(/*! ./model/IDropTarget */ \"./src/model/IDropTarget.ts\");\n/* harmony import */ var _model_IJsonModel__WEBPACK_IMPORTED_MODULE_8__ = __webpack_require__(/*! ./model/IJsonModel */ \"./src/model/IJsonModel.ts\");\n/* harmony import */ var _model_Model__WEBPACK_IMPORTED_MODULE_9__ = __webpack_require__(/*! ./model/Model */ \"./src/model/Model.ts\");\n/* harmony import */ var _model_Node__WEBPACK_IMPORTED_MODULE_10__ = __webpack_require__(/*! ./model/Node */ \"./src/model/Node.ts\");\n/* harmony import */ var _model_RowNode__WEBPACK_IMPORTED_MODULE_11__ = __webpack_require__(/*! ./model/RowNode */ \"./src/model/RowNode.ts\");\n/* harmony import */ var _model_TabNode__WEBPACK_IMPORTED_MODULE_12__ = __webpack_require__(/*! ./model/TabNode */ \"./src/model/TabNode.ts\");\n/* harmony import */ var _model_TabSetNode__WEBPACK_IMPORTED_MODULE_13__ = __webpack_require__(/*! ./model/TabSetNode */ \"./src/model/TabSetNode.ts\");\n/* harmony import */ var _model_LayoutWindow__WEBPACK_IMPORTED_MODULE_14__ = __webpack_require__(/*! ./model/LayoutWindow */ \"./src/model/LayoutWindow.ts\");\n/* harmony import */ var _DockLocation__WEBPACK_IMPORTED_MODULE_15__ = __webpack_require__(/*! ./DockLocation */ \"./src/DockLocation.ts\");\n/* harmony import */ var _DropInfo__WEBPACK_IMPORTED_MODULE_16__ = __webpack_require__(/*! ./DropInfo */ \"./src/DropInfo.ts\");\n/* harmony import */ var _I18nLabel__WEBPACK_IMPORTED_MODULE_17__ = __webpack_require__(/*! ./I18nLabel */ \"./src/I18nLabel.ts\");\n/* harmony import */ var _Orientation__WEBPACK_IMPORTED_MODULE_18__ = __webpack_require__(/*! ./Orientation */ \"./src/Orientation.ts\");\n/* harmony import */ var _Rect__WEBPACK_IMPORTED_MODULE_19__ = __webpack_require__(/*! ./Rect */ \"./src/Rect.ts\");\n/* harmony import */ var _Types__WEBPACK_IMPORTED_MODULE_20__ = __webpack_require__(/*! ./Types */ \"./src/Types.ts\");\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n//# sourceURL=webpack://FlexLayout/./src/index.ts?");
120
120
 
121
121
  /***/ }),
122
122
 
@@ -256,7 +256,7 @@ eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpac
256
256
  \*********************************/
257
257
  /***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {
258
258
 
259
- 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 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 }\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(`show tabs in location top or bottom`);\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 return attributeDefinitions;\n }\n}\nTabSetNode.TYPE = \"tabset\";\n/** @internal */\nTabSetNode.attributeDefinitions = TabSetNode.createAttributeDefinitions();\n\n\n//# sourceURL=webpack://FlexLayout/./src/model/TabSetNode.ts?");
259
+ 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 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(`show tabs in location top or bottom`);\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 return attributeDefinitions;\n }\n}\nTabSetNode.TYPE = \"tabset\";\n/** @internal */\nTabSetNode.attributeDefinitions = TabSetNode.createAttributeDefinitions();\n\n\n//# sourceURL=webpack://FlexLayout/./src/model/TabSetNode.ts?");
260
260
 
261
261
  /***/ }),
262
262
 
@@ -276,7 +276,7 @@ eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpac
276
276
  \***********************************/
277
277
  /***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {
278
278
 
279
- eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpack_require__.d(__webpack_exports__, {\n/* harmony export */ BorderButton: () => (/* binding */ BorderButton)\n/* harmony export */ });\n/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! react */ \"react\");\n/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(react__WEBPACK_IMPORTED_MODULE_0__);\n/* harmony import */ var _I18nLabel__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ../I18nLabel */ \"./src/I18nLabel.ts\");\n/* harmony import */ var _model_Actions__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ../model/Actions */ \"./src/model/Actions.ts\");\n/* harmony import */ var _model_ICloseType__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! ../model/ICloseType */ \"./src/model/ICloseType.ts\");\n/* harmony import */ var _Types__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(/*! ../Types */ \"./src/Types.ts\");\n/* harmony import */ var _Utils__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__(/*! ./Utils */ \"./src/view/Utils.tsx\");\n\n\n\n\n\n\n/** @internal */\nconst BorderButton = (props) => {\n const { layout, node, selected, border, icons, path } = props;\n const selfRef = react__WEBPACK_IMPORTED_MODULE_0__.useRef(null);\n const contentRef = react__WEBPACK_IMPORTED_MODULE_0__.useRef(null);\n const onDragStart = (event) => {\n event.stopPropagation();\n layout.setDragNode(event.nativeEvent, node);\n };\n const onDragEnd = (event) => {\n event.stopPropagation();\n layout.clearDragMain();\n };\n const onAuxMouseClick = (event) => {\n if ((0,_Utils__WEBPACK_IMPORTED_MODULE_5__.isAuxMouseEvent)(event)) {\n layout.auxMouseClick(node, event);\n }\n };\n const onContextMenu = (event) => {\n layout.showContextMenu(node, event);\n };\n const onClick = () => {\n layout.doAction(_model_Actions__WEBPACK_IMPORTED_MODULE_2__.Actions.selectTab(node.getId()));\n };\n // const onDoubleClick = (event: Event) => {\n // // if (node.isEnableRename()) {\n // // onRename();\n // // }\n // };\n // const onRename = () => {\n // layout.setEditingTab(node);\n // layout.getCurrentDocument()!.body.addEventListener(\"pointerdown\", onEndEdit);\n // };\n const onEndEdit = (event) => {\n if (event.target !== contentRef.current) {\n layout.getCurrentDocument().body.removeEventListener(\"pointerdown\", onEndEdit);\n layout.setEditingTab(undefined);\n }\n };\n const isClosable = () => {\n const closeType = node.getCloseType();\n if (selected || closeType === _model_ICloseType__WEBPACK_IMPORTED_MODULE_3__.ICloseType.Always) {\n return true;\n }\n if (closeType === _model_ICloseType__WEBPACK_IMPORTED_MODULE_3__.ICloseType.Visible) {\n // not selected but x should be visible due to hover\n if (window.matchMedia && window.matchMedia(\"(hover: hover) and (pointer: fine)\").matches) {\n return true;\n }\n }\n return false;\n };\n const onClose = (event) => {\n if (isClosable()) {\n layout.doAction(_model_Actions__WEBPACK_IMPORTED_MODULE_2__.Actions.deleteTab(node.getId()));\n }\n else {\n onClick();\n }\n };\n const onClosePointerDown = (event) => {\n event.stopPropagation();\n };\n react__WEBPACK_IMPORTED_MODULE_0__.useLayoutEffect(() => {\n node.setTabRect(layout.getBoundingClientRect(selfRef.current));\n if (layout.getEditingTab() === node) {\n contentRef.current.select();\n }\n });\n const onTextBoxPointerDown = (event) => {\n event.stopPropagation();\n };\n const onTextBoxKeyPress = (event) => {\n if (event.code === 'Escape') {\n // esc\n layout.setEditingTab(undefined);\n }\n else if (event.code === 'Enter') {\n // enter\n layout.setEditingTab(undefined);\n layout.doAction(_model_Actions__WEBPACK_IMPORTED_MODULE_2__.Actions.renameTab(node.getId(), event.target.value));\n }\n };\n const cm = layout.getClassName;\n let classNames = cm(_Types__WEBPACK_IMPORTED_MODULE_4__.CLASSES.FLEXLAYOUT__BORDER_BUTTON) + \" \" + cm(_Types__WEBPACK_IMPORTED_MODULE_4__.CLASSES.FLEXLAYOUT__BORDER_BUTTON_ + border);\n if (selected) {\n classNames += \" \" + cm(_Types__WEBPACK_IMPORTED_MODULE_4__.CLASSES.FLEXLAYOUT__BORDER_BUTTON__SELECTED);\n }\n else {\n classNames += \" \" + cm(_Types__WEBPACK_IMPORTED_MODULE_4__.CLASSES.FLEXLAYOUT__BORDER_BUTTON__UNSELECTED);\n }\n if (node.getClassName() !== undefined) {\n classNames += \" \" + node.getClassName();\n }\n let iconAngle = 0;\n if (node.getModel().isEnableRotateBorderIcons() === false) {\n if (border === \"left\") {\n iconAngle = 90;\n }\n else if (border === \"right\") {\n iconAngle = -90;\n }\n }\n const renderState = (0,_Utils__WEBPACK_IMPORTED_MODULE_5__.getRenderStateEx)(layout, node, iconAngle);\n let content = renderState.content ? (react__WEBPACK_IMPORTED_MODULE_0__.createElement(\"div\", { className: cm(_Types__WEBPACK_IMPORTED_MODULE_4__.CLASSES.FLEXLAYOUT__BORDER_BUTTON_CONTENT) }, renderState.content)) : null;\n const leading = renderState.leading ? (react__WEBPACK_IMPORTED_MODULE_0__.createElement(\"div\", { className: cm(_Types__WEBPACK_IMPORTED_MODULE_4__.CLASSES.FLEXLAYOUT__BORDER_BUTTON_LEADING) }, renderState.leading)) : null;\n if (layout.getEditingTab() === node) {\n content = (react__WEBPACK_IMPORTED_MODULE_0__.createElement(\"input\", { ref: contentRef, className: cm(_Types__WEBPACK_IMPORTED_MODULE_4__.CLASSES.FLEXLAYOUT__TAB_BUTTON_TEXTBOX), \"data-layout-path\": path + \"/textbox\", type: \"text\", autoFocus: true, defaultValue: node.getName(), onKeyDown: onTextBoxKeyPress, onPointerDown: onTextBoxPointerDown }));\n }\n if (node.isEnableClose()) {\n const closeTitle = layout.i18nName(_I18nLabel__WEBPACK_IMPORTED_MODULE_1__.I18nLabel.Close_Tab);\n renderState.buttons.push(react__WEBPACK_IMPORTED_MODULE_0__.createElement(\"div\", { key: \"close\", \"data-layout-path\": path + \"/button/close\", title: closeTitle, className: cm(_Types__WEBPACK_IMPORTED_MODULE_4__.CLASSES.FLEXLAYOUT__BORDER_BUTTON_TRAILING), onPointerDown: onClosePointerDown, onClick: onClose }, (typeof icons.close === \"function\") ? icons.close(node) : icons.close));\n }\n return (react__WEBPACK_IMPORTED_MODULE_0__.createElement(\"div\", { ref: selfRef, \"data-layout-path\": path, className: classNames, onClick: onClick, onAuxClick: onAuxMouseClick, onContextMenu: onContextMenu, title: node.getHelpText(), draggable: true, onDragStart: onDragStart, onDragEnd: onDragEnd },\n leading,\n content,\n renderState.buttons));\n};\n\n\n//# sourceURL=webpack://FlexLayout/./src/view/BorderButton.tsx?");
279
+ eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpack_require__.d(__webpack_exports__, {\n/* harmony export */ BorderButton: () => (/* binding */ BorderButton)\n/* harmony export */ });\n/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! react */ \"react\");\n/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(react__WEBPACK_IMPORTED_MODULE_0__);\n/* harmony import */ var _I18nLabel__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ../I18nLabel */ \"./src/I18nLabel.ts\");\n/* harmony import */ var _model_Actions__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ../model/Actions */ \"./src/model/Actions.ts\");\n/* harmony import */ var _model_ICloseType__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! ../model/ICloseType */ \"./src/model/ICloseType.ts\");\n/* harmony import */ var _Types__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(/*! ../Types */ \"./src/Types.ts\");\n/* harmony import */ var _Utils__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__(/*! ./Utils */ \"./src/view/Utils.tsx\");\n\n\n\n\n\n\n/** @internal */\nconst BorderButton = (props) => {\n const { layout, node, selected, border, icons, path } = props;\n const selfRef = react__WEBPACK_IMPORTED_MODULE_0__.useRef(null);\n const contentRef = react__WEBPACK_IMPORTED_MODULE_0__.useRef(null);\n const onDragStart = (event) => {\n if (node.isEnableDrag()) {\n event.stopPropagation();\n layout.setDragNode(event.nativeEvent, node);\n }\n else {\n event.preventDefault();\n }\n };\n const onDragEnd = (event) => {\n event.stopPropagation();\n layout.clearDragMain();\n };\n const onAuxMouseClick = (event) => {\n if ((0,_Utils__WEBPACK_IMPORTED_MODULE_5__.isAuxMouseEvent)(event)) {\n layout.auxMouseClick(node, event);\n }\n };\n const onContextMenu = (event) => {\n layout.showContextMenu(node, event);\n };\n const onClick = () => {\n layout.doAction(_model_Actions__WEBPACK_IMPORTED_MODULE_2__.Actions.selectTab(node.getId()));\n };\n // const onDoubleClick = (event: Event) => {\n // // if (node.isEnableRename()) {\n // // onRename();\n // // }\n // };\n // const onRename = () => {\n // layout.setEditingTab(node);\n // layout.getCurrentDocument()!.body.addEventListener(\"pointerdown\", onEndEdit);\n // };\n const onEndEdit = (event) => {\n if (event.target !== contentRef.current) {\n layout.getCurrentDocument().body.removeEventListener(\"pointerdown\", onEndEdit);\n layout.setEditingTab(undefined);\n }\n };\n const isClosable = () => {\n const closeType = node.getCloseType();\n if (selected || closeType === _model_ICloseType__WEBPACK_IMPORTED_MODULE_3__.ICloseType.Always) {\n return true;\n }\n if (closeType === _model_ICloseType__WEBPACK_IMPORTED_MODULE_3__.ICloseType.Visible) {\n // not selected but x should be visible due to hover\n if (window.matchMedia && window.matchMedia(\"(hover: hover) and (pointer: fine)\").matches) {\n return true;\n }\n }\n return false;\n };\n const onClose = (event) => {\n if (isClosable()) {\n layout.doAction(_model_Actions__WEBPACK_IMPORTED_MODULE_2__.Actions.deleteTab(node.getId()));\n }\n else {\n onClick();\n }\n };\n const onClosePointerDown = (event) => {\n event.stopPropagation();\n };\n react__WEBPACK_IMPORTED_MODULE_0__.useLayoutEffect(() => {\n node.setTabRect(layout.getBoundingClientRect(selfRef.current));\n if (layout.getEditingTab() === node) {\n contentRef.current.select();\n }\n });\n const onTextBoxPointerDown = (event) => {\n event.stopPropagation();\n };\n const onTextBoxKeyPress = (event) => {\n if (event.code === 'Escape') {\n // esc\n layout.setEditingTab(undefined);\n }\n else if (event.code === 'Enter') {\n // enter\n layout.setEditingTab(undefined);\n layout.doAction(_model_Actions__WEBPACK_IMPORTED_MODULE_2__.Actions.renameTab(node.getId(), event.target.value));\n }\n };\n const cm = layout.getClassName;\n let classNames = cm(_Types__WEBPACK_IMPORTED_MODULE_4__.CLASSES.FLEXLAYOUT__BORDER_BUTTON) + \" \" + cm(_Types__WEBPACK_IMPORTED_MODULE_4__.CLASSES.FLEXLAYOUT__BORDER_BUTTON_ + border);\n if (selected) {\n classNames += \" \" + cm(_Types__WEBPACK_IMPORTED_MODULE_4__.CLASSES.FLEXLAYOUT__BORDER_BUTTON__SELECTED);\n }\n else {\n classNames += \" \" + cm(_Types__WEBPACK_IMPORTED_MODULE_4__.CLASSES.FLEXLAYOUT__BORDER_BUTTON__UNSELECTED);\n }\n if (node.getClassName() !== undefined) {\n classNames += \" \" + node.getClassName();\n }\n let iconAngle = 0;\n if (node.getModel().isEnableRotateBorderIcons() === false) {\n if (border === \"left\") {\n iconAngle = 90;\n }\n else if (border === \"right\") {\n iconAngle = -90;\n }\n }\n const renderState = (0,_Utils__WEBPACK_IMPORTED_MODULE_5__.getRenderStateEx)(layout, node, iconAngle);\n let content = renderState.content ? (react__WEBPACK_IMPORTED_MODULE_0__.createElement(\"div\", { className: cm(_Types__WEBPACK_IMPORTED_MODULE_4__.CLASSES.FLEXLAYOUT__BORDER_BUTTON_CONTENT) }, renderState.content)) : null;\n const leading = renderState.leading ? (react__WEBPACK_IMPORTED_MODULE_0__.createElement(\"div\", { className: cm(_Types__WEBPACK_IMPORTED_MODULE_4__.CLASSES.FLEXLAYOUT__BORDER_BUTTON_LEADING) }, renderState.leading)) : null;\n if (layout.getEditingTab() === node) {\n content = (react__WEBPACK_IMPORTED_MODULE_0__.createElement(\"input\", { ref: contentRef, className: cm(_Types__WEBPACK_IMPORTED_MODULE_4__.CLASSES.FLEXLAYOUT__TAB_BUTTON_TEXTBOX), \"data-layout-path\": path + \"/textbox\", type: \"text\", autoFocus: true, defaultValue: node.getName(), onKeyDown: onTextBoxKeyPress, onPointerDown: onTextBoxPointerDown }));\n }\n if (node.isEnableClose()) {\n const closeTitle = layout.i18nName(_I18nLabel__WEBPACK_IMPORTED_MODULE_1__.I18nLabel.Close_Tab);\n renderState.buttons.push(react__WEBPACK_IMPORTED_MODULE_0__.createElement(\"div\", { key: \"close\", \"data-layout-path\": path + \"/button/close\", title: closeTitle, className: cm(_Types__WEBPACK_IMPORTED_MODULE_4__.CLASSES.FLEXLAYOUT__BORDER_BUTTON_TRAILING), onPointerDown: onClosePointerDown, onClick: onClose }, (typeof icons.close === \"function\") ? icons.close(node) : icons.close));\n }\n return (react__WEBPACK_IMPORTED_MODULE_0__.createElement(\"div\", { ref: selfRef, \"data-layout-path\": path, className: classNames, onClick: onClick, onAuxClick: onAuxMouseClick, onContextMenu: onContextMenu, title: node.getHelpText(), draggable: true, onDragStart: onDragStart, onDragEnd: onDragEnd },\n leading,\n content,\n renderState.buttons));\n};\n\n\n//# sourceURL=webpack://FlexLayout/./src/view/BorderButton.tsx?");
280
280
 
281
281
  /***/ }),
282
282
 
@@ -336,7 +336,7 @@ eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpac
336
336
  \*****************************/
337
337
  /***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {
338
338
 
339
- eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpack_require__.d(__webpack_exports__, {\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@18.3.1_react@18.3.1/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.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 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?");
339
+ 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@18.3.1_react@18.3.1/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.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.1\";\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?");
340
340
 
341
341
  /***/ }),
342
342
 
@@ -416,7 +416,7 @@ eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpac
416
416
  \********************************/
417
417
  /***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {
418
418
 
419
- eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpack_require__.d(__webpack_exports__, {\n/* harmony export */ TabButton: () => (/* binding */ TabButton)\n/* harmony export */ });\n/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! react */ \"react\");\n/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(react__WEBPACK_IMPORTED_MODULE_0__);\n/* harmony import */ var _I18nLabel__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ../I18nLabel */ \"./src/I18nLabel.ts\");\n/* harmony import */ var _model_Actions__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ../model/Actions */ \"./src/model/Actions.ts\");\n/* harmony import */ var _model_ICloseType__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! ../model/ICloseType */ \"./src/model/ICloseType.ts\");\n/* harmony import */ var _Types__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(/*! ../Types */ \"./src/Types.ts\");\n/* harmony import */ var _Utils__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__(/*! ./Utils */ \"./src/view/Utils.tsx\");\n\n\n\n\n\n\n/** @internal */\nconst TabButton = (props) => {\n const { layout, node, selected, path } = props;\n const selfRef = react__WEBPACK_IMPORTED_MODULE_0__.useRef(null);\n const contentRef = react__WEBPACK_IMPORTED_MODULE_0__.useRef(null);\n const icons = layout.getIcons();\n react__WEBPACK_IMPORTED_MODULE_0__.useLayoutEffect(() => {\n node.setTabRect(layout.getBoundingClientRect(selfRef.current));\n if (layout.getEditingTab() === node) {\n contentRef.current.select();\n }\n });\n const onDragStart = (event) => {\n event.stopPropagation(); // prevent starting a tabset drag as well\n layout.setDragNode(event.nativeEvent, node);\n };\n const onDragEnd = (event) => {\n layout.clearDragMain();\n };\n const onAuxMouseClick = (event) => {\n if ((0,_Utils__WEBPACK_IMPORTED_MODULE_5__.isAuxMouseEvent)(event)) {\n layout.auxMouseClick(node, event);\n }\n };\n const onContextMenu = (event) => {\n layout.showContextMenu(node, event);\n };\n const onClick = () => {\n layout.doAction(_model_Actions__WEBPACK_IMPORTED_MODULE_2__.Actions.selectTab(node.getId()));\n };\n const onDoubleClick = (event) => {\n if (node.isEnableRename()) {\n onRename();\n event.stopPropagation();\n }\n };\n const onRename = () => {\n layout.setEditingTab(node);\n layout.getCurrentDocument().body.addEventListener(\"pointerdown\", onEndEdit);\n };\n const onEndEdit = (event) => {\n if (event.target !== contentRef.current) {\n layout.getCurrentDocument().body.removeEventListener(\"pointerdown\", onEndEdit);\n layout.setEditingTab(undefined);\n }\n };\n const isClosable = () => {\n const closeType = node.getCloseType();\n if (selected || closeType === _model_ICloseType__WEBPACK_IMPORTED_MODULE_3__.ICloseType.Always) {\n return true;\n }\n if (closeType === _model_ICloseType__WEBPACK_IMPORTED_MODULE_3__.ICloseType.Visible) {\n // not selected but x should be visible due to hover\n if (window.matchMedia && window.matchMedia(\"(hover: hover) and (pointer: fine)\").matches) {\n return true;\n }\n }\n return false;\n };\n const onClose = (event) => {\n if (isClosable()) {\n layout.doAction(_model_Actions__WEBPACK_IMPORTED_MODULE_2__.Actions.deleteTab(node.getId()));\n }\n else {\n onClick();\n }\n };\n const onClosePointerDown = (event) => {\n event.stopPropagation();\n };\n const onTextBoxPointerDown = (event) => {\n event.stopPropagation();\n };\n const onTextBoxKeyPress = (event) => {\n if (event.code === 'Escape') {\n // esc\n layout.setEditingTab(undefined);\n }\n else if (event.code === 'Enter') {\n // enter\n layout.setEditingTab(undefined);\n layout.doAction(_model_Actions__WEBPACK_IMPORTED_MODULE_2__.Actions.renameTab(node.getId(), event.target.value));\n }\n };\n const cm = layout.getClassName;\n const parentNode = node.getParent();\n const isStretch = parentNode.isEnableSingleTabStretch() && parentNode.getChildren().length === 1;\n let baseClassName = isStretch ? _Types__WEBPACK_IMPORTED_MODULE_4__.CLASSES.FLEXLAYOUT__TAB_BUTTON_STRETCH : _Types__WEBPACK_IMPORTED_MODULE_4__.CLASSES.FLEXLAYOUT__TAB_BUTTON;\n let classNames = cm(baseClassName);\n classNames += \" \" + cm(baseClassName + \"_\" + parentNode.getTabLocation());\n if (!isStretch) {\n if (selected) {\n classNames += \" \" + cm(baseClassName + \"--selected\");\n }\n else {\n classNames += \" \" + cm(baseClassName + \"--unselected\");\n }\n }\n if (node.getClassName() !== undefined) {\n classNames += \" \" + node.getClassName();\n }\n const renderState = (0,_Utils__WEBPACK_IMPORTED_MODULE_5__.getRenderStateEx)(layout, node);\n let content = renderState.content ? (react__WEBPACK_IMPORTED_MODULE_0__.createElement(\"div\", { className: cm(_Types__WEBPACK_IMPORTED_MODULE_4__.CLASSES.FLEXLAYOUT__TAB_BUTTON_CONTENT) }, renderState.content)) : null;\n const leading = renderState.leading ? (react__WEBPACK_IMPORTED_MODULE_0__.createElement(\"div\", { className: cm(_Types__WEBPACK_IMPORTED_MODULE_4__.CLASSES.FLEXLAYOUT__TAB_BUTTON_LEADING) }, renderState.leading)) : null;\n if (layout.getEditingTab() === node) {\n content = (react__WEBPACK_IMPORTED_MODULE_0__.createElement(\"input\", { ref: contentRef, className: cm(_Types__WEBPACK_IMPORTED_MODULE_4__.CLASSES.FLEXLAYOUT__TAB_BUTTON_TEXTBOX), \"data-layout-path\": path + \"/textbox\", type: \"text\", autoFocus: true, defaultValue: node.getName(), onKeyDown: onTextBoxKeyPress, onPointerDown: onTextBoxPointerDown }));\n }\n if (node.isEnableClose() && !isStretch) {\n const closeTitle = layout.i18nName(_I18nLabel__WEBPACK_IMPORTED_MODULE_1__.I18nLabel.Close_Tab);\n renderState.buttons.push(react__WEBPACK_IMPORTED_MODULE_0__.createElement(\"div\", { key: \"close\", \"data-layout-path\": path + \"/button/close\", title: closeTitle, className: cm(_Types__WEBPACK_IMPORTED_MODULE_4__.CLASSES.FLEXLAYOUT__TAB_BUTTON_TRAILING), onPointerDown: onClosePointerDown, onClick: onClose }, (typeof icons.close === \"function\") ? icons.close(node) : icons.close));\n }\n return (react__WEBPACK_IMPORTED_MODULE_0__.createElement(\"div\", { ref: selfRef, \"data-layout-path\": path, className: classNames, onClick: onClick, onAuxClick: onAuxMouseClick, onContextMenu: onContextMenu, title: node.getHelpText(), draggable: true, onDragStart: onDragStart, onDragEnd: onDragEnd, onDoubleClick: onDoubleClick },\n leading,\n content,\n renderState.buttons));\n};\n\n\n//# sourceURL=webpack://FlexLayout/./src/view/TabButton.tsx?");
419
+ eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpack_require__.d(__webpack_exports__, {\n/* harmony export */ TabButton: () => (/* binding */ TabButton)\n/* harmony export */ });\n/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! react */ \"react\");\n/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(react__WEBPACK_IMPORTED_MODULE_0__);\n/* harmony import */ var _I18nLabel__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ../I18nLabel */ \"./src/I18nLabel.ts\");\n/* harmony import */ var _model_Actions__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ../model/Actions */ \"./src/model/Actions.ts\");\n/* harmony import */ var _model_ICloseType__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! ../model/ICloseType */ \"./src/model/ICloseType.ts\");\n/* harmony import */ var _Types__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(/*! ../Types */ \"./src/Types.ts\");\n/* harmony import */ var _Utils__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__(/*! ./Utils */ \"./src/view/Utils.tsx\");\n\n\n\n\n\n\n/** @internal */\nconst TabButton = (props) => {\n const { layout, node, selected, path } = props;\n const selfRef = react__WEBPACK_IMPORTED_MODULE_0__.useRef(null);\n const contentRef = react__WEBPACK_IMPORTED_MODULE_0__.useRef(null);\n const icons = layout.getIcons();\n react__WEBPACK_IMPORTED_MODULE_0__.useLayoutEffect(() => {\n node.setTabRect(layout.getBoundingClientRect(selfRef.current));\n if (layout.getEditingTab() === node) {\n contentRef.current.select();\n }\n });\n const onDragStart = (event) => {\n if (node.isEnableDrag()) {\n event.stopPropagation(); // prevent starting a tabset drag as well\n layout.setDragNode(event.nativeEvent, node);\n }\n else {\n event.preventDefault();\n }\n };\n const onDragEnd = (event) => {\n layout.clearDragMain();\n };\n const onAuxMouseClick = (event) => {\n if ((0,_Utils__WEBPACK_IMPORTED_MODULE_5__.isAuxMouseEvent)(event)) {\n layout.auxMouseClick(node, event);\n }\n };\n const onContextMenu = (event) => {\n layout.showContextMenu(node, event);\n };\n const onClick = () => {\n layout.doAction(_model_Actions__WEBPACK_IMPORTED_MODULE_2__.Actions.selectTab(node.getId()));\n };\n const onDoubleClick = (event) => {\n if (node.isEnableRename()) {\n onRename();\n event.stopPropagation();\n }\n };\n const onRename = () => {\n layout.setEditingTab(node);\n layout.getCurrentDocument().body.addEventListener(\"pointerdown\", onEndEdit);\n };\n const onEndEdit = (event) => {\n if (event.target !== contentRef.current) {\n layout.getCurrentDocument().body.removeEventListener(\"pointerdown\", onEndEdit);\n layout.setEditingTab(undefined);\n }\n };\n const isClosable = () => {\n const closeType = node.getCloseType();\n if (selected || closeType === _model_ICloseType__WEBPACK_IMPORTED_MODULE_3__.ICloseType.Always) {\n return true;\n }\n if (closeType === _model_ICloseType__WEBPACK_IMPORTED_MODULE_3__.ICloseType.Visible) {\n // not selected but x should be visible due to hover\n if (window.matchMedia && window.matchMedia(\"(hover: hover) and (pointer: fine)\").matches) {\n return true;\n }\n }\n return false;\n };\n const onClose = (event) => {\n if (isClosable()) {\n layout.doAction(_model_Actions__WEBPACK_IMPORTED_MODULE_2__.Actions.deleteTab(node.getId()));\n }\n else {\n onClick();\n }\n };\n const onClosePointerDown = (event) => {\n event.stopPropagation();\n };\n const onTextBoxPointerDown = (event) => {\n event.stopPropagation();\n };\n const onTextBoxKeyPress = (event) => {\n if (event.code === 'Escape') {\n // esc\n layout.setEditingTab(undefined);\n }\n else if (event.code === 'Enter') {\n // enter\n layout.setEditingTab(undefined);\n layout.doAction(_model_Actions__WEBPACK_IMPORTED_MODULE_2__.Actions.renameTab(node.getId(), event.target.value));\n }\n };\n const cm = layout.getClassName;\n const parentNode = node.getParent();\n const isStretch = parentNode.isEnableSingleTabStretch() && parentNode.getChildren().length === 1;\n let baseClassName = isStretch ? _Types__WEBPACK_IMPORTED_MODULE_4__.CLASSES.FLEXLAYOUT__TAB_BUTTON_STRETCH : _Types__WEBPACK_IMPORTED_MODULE_4__.CLASSES.FLEXLAYOUT__TAB_BUTTON;\n let classNames = cm(baseClassName);\n classNames += \" \" + cm(baseClassName + \"_\" + parentNode.getTabLocation());\n if (!isStretch) {\n if (selected) {\n classNames += \" \" + cm(baseClassName + \"--selected\");\n }\n else {\n classNames += \" \" + cm(baseClassName + \"--unselected\");\n }\n }\n if (node.getClassName() !== undefined) {\n classNames += \" \" + node.getClassName();\n }\n const renderState = (0,_Utils__WEBPACK_IMPORTED_MODULE_5__.getRenderStateEx)(layout, node);\n let content = renderState.content ? (react__WEBPACK_IMPORTED_MODULE_0__.createElement(\"div\", { className: cm(_Types__WEBPACK_IMPORTED_MODULE_4__.CLASSES.FLEXLAYOUT__TAB_BUTTON_CONTENT) }, renderState.content)) : null;\n const leading = renderState.leading ? (react__WEBPACK_IMPORTED_MODULE_0__.createElement(\"div\", { className: cm(_Types__WEBPACK_IMPORTED_MODULE_4__.CLASSES.FLEXLAYOUT__TAB_BUTTON_LEADING) }, renderState.leading)) : null;\n if (layout.getEditingTab() === node) {\n content = (react__WEBPACK_IMPORTED_MODULE_0__.createElement(\"input\", { ref: contentRef, className: cm(_Types__WEBPACK_IMPORTED_MODULE_4__.CLASSES.FLEXLAYOUT__TAB_BUTTON_TEXTBOX), \"data-layout-path\": path + \"/textbox\", type: \"text\", autoFocus: true, defaultValue: node.getName(), onKeyDown: onTextBoxKeyPress, onPointerDown: onTextBoxPointerDown }));\n }\n if (node.isEnableClose() && !isStretch) {\n const closeTitle = layout.i18nName(_I18nLabel__WEBPACK_IMPORTED_MODULE_1__.I18nLabel.Close_Tab);\n renderState.buttons.push(react__WEBPACK_IMPORTED_MODULE_0__.createElement(\"div\", { key: \"close\", \"data-layout-path\": path + \"/button/close\", title: closeTitle, className: cm(_Types__WEBPACK_IMPORTED_MODULE_4__.CLASSES.FLEXLAYOUT__TAB_BUTTON_TRAILING), onPointerDown: onClosePointerDown, onClick: onClose }, (typeof icons.close === \"function\") ? icons.close(node) : icons.close));\n }\n return (react__WEBPACK_IMPORTED_MODULE_0__.createElement(\"div\", { ref: selfRef, \"data-layout-path\": path, className: classNames, onClick: onClick, onAuxClick: onAuxMouseClick, onContextMenu: onContextMenu, title: node.getHelpText(), draggable: true, onDragStart: onDragStart, onDragEnd: onDragEnd, onDoubleClick: onDoubleClick },\n leading,\n content,\n renderState.buttons));\n};\n\n\n//# sourceURL=webpack://FlexLayout/./src/view/TabButton.tsx?");
420
420
 
421
421
  /***/ }),
422
422
 
@@ -446,7 +446,7 @@ eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpac
446
446
  \*****************************/
447
447
  /***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {
448
448
 
449
- eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpack_require__.d(__webpack_exports__, {\n/* harmony export */ TabSet: () => (/* binding */ TabSet)\n/* harmony export */ });\n/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! react */ \"react\");\n/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(react__WEBPACK_IMPORTED_MODULE_0__);\n/* harmony import */ var _I18nLabel__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ../I18nLabel */ \"./src/I18nLabel.ts\");\n/* harmony import */ var _model_Actions__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ../model/Actions */ \"./src/model/Actions.ts\");\n/* harmony import */ var _PopupMenu__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! ./PopupMenu */ \"./src/view/PopupMenu.tsx\");\n/* harmony import */ var _TabButton__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(/*! ./TabButton */ \"./src/view/TabButton.tsx\");\n/* harmony import */ var _TabOverflowHook__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__(/*! ./TabOverflowHook */ \"./src/view/TabOverflowHook.tsx\");\n/* harmony import */ var _Orientation__WEBPACK_IMPORTED_MODULE_6__ = __webpack_require__(/*! ../Orientation */ \"./src/Orientation.ts\");\n/* harmony import */ var _Types__WEBPACK_IMPORTED_MODULE_7__ = __webpack_require__(/*! ../Types */ \"./src/Types.ts\");\n/* harmony import */ var _Utils__WEBPACK_IMPORTED_MODULE_8__ = __webpack_require__(/*! ./Utils */ \"./src/view/Utils.tsx\");\n/* harmony import */ var react_dom__WEBPACK_IMPORTED_MODULE_9__ = __webpack_require__(/*! react-dom */ \"react-dom\");\n/* harmony import */ var react_dom__WEBPACK_IMPORTED_MODULE_9___default = /*#__PURE__*/__webpack_require__.n(react_dom__WEBPACK_IMPORTED_MODULE_9__);\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 TabSet = (props) => {\n const { node, layout } = props;\n const tabStripRef = react__WEBPACK_IMPORTED_MODULE_0__.useRef(null);\n const tabStripInnerRef = react__WEBPACK_IMPORTED_MODULE_0__.useRef(null);\n const contentRef = react__WEBPACK_IMPORTED_MODULE_0__.useRef(null);\n const buttonBarRef = 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 icons = layout.getIcons();\n // must use useEffect (rather than useLayoutEffect) otherwise contentrect not set correctly (has height 0 when changing theme in demo)\n react__WEBPACK_IMPORTED_MODULE_0__.useEffect(() => {\n node.setRect(layout.getBoundingClientRect(selfRef.current));\n if (tabStripRef.current) {\n node.setTabStripRect(layout.getBoundingClientRect(tabStripRef.current));\n }\n const newContentRect = _Rect__WEBPACK_IMPORTED_MODULE_10__.Rect.getContentRect(contentRef.current).relativeTo(layout.getDomRect());\n if (!node.getContentRect().equals(newContentRect)) {\n node.setContentRect(newContentRect);\n layout.redrawInternal(\"tabset content rect \" + newContentRect);\n }\n });\n // this must be after the useEffect, so the node rect is already set (else window popin will not position tabs correctly)\n const { selfRef, position, userControlledLeft, hiddenTabs, onMouseWheel, tabsTruncated } = (0,_TabOverflowHook__WEBPACK_IMPORTED_MODULE_5__.useTabOverflow)(node, _Orientation__WEBPACK_IMPORTED_MODULE_6__.Orientation.HORZ, buttonBarRef, stickyButtonsRef);\n const onOverflowClick = (event) => {\n const callback = layout.getShowOverflowMenu();\n if (callback !== undefined) {\n callback(node, event, hiddenTabs, onOverflowItemSelect);\n }\n else {\n const element = overflowbuttonRef.current;\n (0,_PopupMenu__WEBPACK_IMPORTED_MODULE_3__.showPopup)(element, hiddenTabs, onOverflowItemSelect, layout);\n }\n event.stopPropagation();\n };\n const onOverflowItemSelect = (item) => {\n layout.doAction(_model_Actions__WEBPACK_IMPORTED_MODULE_2__.Actions.selectTab(item.node.getId()));\n userControlledLeft.current = false;\n };\n const onDragStart = (event) => {\n if (!layout.getEditingTab()) {\n event.stopPropagation();\n layout.setDragNode(event.nativeEvent, node);\n }\n else {\n event.preventDefault();\n }\n };\n const onPointerDown = (event) => {\n if (!(0,_Utils__WEBPACK_IMPORTED_MODULE_8__.isAuxMouseEvent)(event)) {\n let name = node.getName();\n if (name === undefined) {\n name = \"\";\n }\n else {\n name = \": \" + name;\n }\n layout.doAction(_model_Actions__WEBPACK_IMPORTED_MODULE_2__.Actions.setActiveTabset(node.getId(), layout.getWindowId()));\n }\n };\n const onAuxMouseClick = (event) => {\n if ((0,_Utils__WEBPACK_IMPORTED_MODULE_8__.isAuxMouseEvent)(event)) {\n layout.auxMouseClick(node, event);\n }\n };\n const onContextMenu = (event) => {\n layout.showContextMenu(node, event);\n };\n const onInterceptPointerDown = (event) => {\n event.stopPropagation();\n };\n const onMaximizeToggle = (event) => {\n if (node.canMaximize()) {\n layout.maximize(node);\n }\n event.stopPropagation();\n };\n const onClose = (event) => {\n layout.doAction(_model_Actions__WEBPACK_IMPORTED_MODULE_2__.Actions.deleteTabset(node.getId()));\n event.stopPropagation();\n };\n const onCloseTab = (event) => {\n layout.doAction(_model_Actions__WEBPACK_IMPORTED_MODULE_2__.Actions.deleteTab(node.getChildren()[0].getId()));\n event.stopPropagation();\n };\n const onPopoutTab = (event) => {\n if (selectedTabNode !== undefined) {\n layout.doAction(_model_Actions__WEBPACK_IMPORTED_MODULE_2__.Actions.popoutTab(selectedTabNode.getId()));\n // layout.doAction(Actions.popoutTabset(node.getId()));\n }\n event.stopPropagation();\n };\n const onDoubleClick = (event) => {\n if (node.canMaximize()) {\n layout.maximize(node);\n }\n };\n // Start Render\n const cm = layout.getClassName;\n // tabbar inner can get shifted left via tab rename, this resets scrollleft to 0\n if (tabStripInnerRef.current !== null && tabStripInnerRef.current.scrollLeft !== 0) {\n tabStripInnerRef.current.scrollLeft = 0;\n }\n const selectedTabNode = node.getSelectedNode();\n const path = node.getPath();\n const tabs = [];\n if (node.isEnableTabStrip()) {\n for (let i = 0; i < node.getChildren().length; i++) {\n const child = node.getChildren()[i];\n let isSelected = node.getSelected() === i;\n tabs.push(react__WEBPACK_IMPORTED_MODULE_0__.createElement(_TabButton__WEBPACK_IMPORTED_MODULE_4__.TabButton, { layout: layout, node: child, path: path + \"/tb\" + i, key: child.getId(), selected: isSelected }));\n if (i < node.getChildren().length - 1) {\n tabs.push(react__WEBPACK_IMPORTED_MODULE_0__.createElement(\"div\", { key: \"divider\" + i, className: cm(_Types__WEBPACK_IMPORTED_MODULE_7__.CLASSES.FLEXLAYOUT__TABSET_TAB_DIVIDER) }));\n }\n }\n }\n let stickyButtons = [];\n let buttons = [];\n // allow customization of header contents and buttons\n const renderState = { stickyButtons, buttons, overflowPosition: undefined };\n layout.customizeTabSet(node, renderState);\n stickyButtons = renderState.stickyButtons;\n buttons = renderState.buttons;\n const isTabStretch = node.isEnableSingleTabStretch() && node.getChildren().length === 1;\n const showClose = (isTabStretch && (node.getChildren()[0].isEnableClose())) || node.isEnableClose();\n if (renderState.overflowPosition === undefined) {\n renderState.overflowPosition = stickyButtons.length;\n }\n if (stickyButtons.length > 0) {\n if (!node.isEnableTabWrap() && (tabsTruncated || isTabStretch)) {\n buttons = [...stickyButtons, ...buttons];\n }\n else {\n tabs.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_7__.CLASSES.FLEXLAYOUT__TAB_TOOLBAR_STICKY_BUTTONS_CONTAINER) }, stickyButtons));\n }\n }\n if (!node.isEnableTabWrap()) {\n if (hiddenTabs.length > 0) {\n const overflowTitle = layout.i18nName(_I18nLabel__WEBPACK_IMPORTED_MODULE_1__.I18nLabel.Overflow_Menu_Tooltip);\n let overflowContent;\n if (typeof icons.more === \"function\") {\n overflowContent = icons.more(node, hiddenTabs);\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_7__.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\", \"data-layout-path\": path + \"/button/overflow\", ref: overflowbuttonRef, className: cm(_Types__WEBPACK_IMPORTED_MODULE_7__.CLASSES.FLEXLAYOUT__TAB_TOOLBAR_BUTTON) + \" \" + cm(_Types__WEBPACK_IMPORTED_MODULE_7__.CLASSES.FLEXLAYOUT__TAB_BUTTON_OVERFLOW), title: overflowTitle, onClick: onOverflowClick, onPointerDown: onInterceptPointerDown }, overflowContent));\n }\n }\n if (selectedTabNode !== undefined &&\n layout.isSupportsPopout() &&\n selectedTabNode.isEnablePopout() &&\n selectedTabNode.isEnablePopoutIcon()) {\n const popoutTitle = layout.i18nName(_I18nLabel__WEBPACK_IMPORTED_MODULE_1__.I18nLabel.Popout_Tab);\n buttons.push(react__WEBPACK_IMPORTED_MODULE_0__.createElement(\"button\", { key: \"popout\", \"data-layout-path\": path + \"/button/popout\", title: popoutTitle, className: cm(_Types__WEBPACK_IMPORTED_MODULE_7__.CLASSES.FLEXLAYOUT__TAB_TOOLBAR_BUTTON) + \" \" + cm(_Types__WEBPACK_IMPORTED_MODULE_7__.CLASSES.FLEXLAYOUT__TAB_TOOLBAR_BUTTON_FLOAT), onClick: onPopoutTab, onPointerDown: onInterceptPointerDown }, (typeof icons.popout === \"function\") ? icons.popout(selectedTabNode) : icons.popout));\n }\n if (node.canMaximize()) {\n const minTitle = layout.i18nName(_I18nLabel__WEBPACK_IMPORTED_MODULE_1__.I18nLabel.Restore);\n const maxTitle = layout.i18nName(_I18nLabel__WEBPACK_IMPORTED_MODULE_1__.I18nLabel.Maximize);\n buttons.push(react__WEBPACK_IMPORTED_MODULE_0__.createElement(\"button\", { key: \"max\", \"data-layout-path\": path + \"/button/max\", title: node.isMaximized() ? minTitle : maxTitle, className: cm(_Types__WEBPACK_IMPORTED_MODULE_7__.CLASSES.FLEXLAYOUT__TAB_TOOLBAR_BUTTON) + \" \" + cm(_Types__WEBPACK_IMPORTED_MODULE_7__.CLASSES.FLEXLAYOUT__TAB_TOOLBAR_BUTTON_ + (node.isMaximized() ? \"max\" : \"min\")), onClick: onMaximizeToggle, onPointerDown: onInterceptPointerDown }, node.isMaximized() ?\n (typeof icons.restore === \"function\") ? icons.restore(node) : icons.restore :\n (typeof icons.maximize === \"function\") ? icons.maximize(node) : icons.maximize));\n }\n if (!node.isMaximized() && showClose) {\n const title = isTabStretch ? layout.i18nName(_I18nLabel__WEBPACK_IMPORTED_MODULE_1__.I18nLabel.Close_Tab) : layout.i18nName(_I18nLabel__WEBPACK_IMPORTED_MODULE_1__.I18nLabel.Close_Tabset);\n buttons.push(react__WEBPACK_IMPORTED_MODULE_0__.createElement(\"button\", { key: \"close\", \"data-layout-path\": path + \"/button/close\", title: title, className: cm(_Types__WEBPACK_IMPORTED_MODULE_7__.CLASSES.FLEXLAYOUT__TAB_TOOLBAR_BUTTON) + \" \" + cm(_Types__WEBPACK_IMPORTED_MODULE_7__.CLASSES.FLEXLAYOUT__TAB_TOOLBAR_BUTTON_CLOSE), onClick: isTabStretch ? onCloseTab : onClose, onPointerDown: onInterceptPointerDown }, (typeof icons.closeTabset === \"function\") ? icons.closeTabset(node) : icons.closeTabset));\n }\n if (node.isActive() && node.isEnableActiveIcon()) {\n const title = layout.i18nName(_I18nLabel__WEBPACK_IMPORTED_MODULE_1__.I18nLabel.Active_Tabset);\n buttons.push(react__WEBPACK_IMPORTED_MODULE_0__.createElement(\"div\", { key: \"active\", \"data-layout-path\": path + \"/button/active\", title: title, className: cm(_Types__WEBPACK_IMPORTED_MODULE_7__.CLASSES.FLEXLAYOUT__TAB_TOOLBAR_ICON) }, (typeof icons.activeTabset === \"function\") ? icons.activeTabset(node) : icons.activeTabset));\n }\n const buttonbar = (react__WEBPACK_IMPORTED_MODULE_0__.createElement(\"div\", { key: \"buttonbar\", ref: buttonBarRef, className: cm(_Types__WEBPACK_IMPORTED_MODULE_7__.CLASSES.FLEXLAYOUT__TAB_TOOLBAR), onPointerDown: onInterceptPointerDown, onDragStart: (e) => { e.preventDefault(); } }, buttons));\n let tabStrip;\n let tabStripClasses = cm(_Types__WEBPACK_IMPORTED_MODULE_7__.CLASSES.FLEXLAYOUT__TABSET_TABBAR_OUTER);\n if (node.getClassNameTabStrip() !== undefined) {\n tabStripClasses += \" \" + node.getClassNameTabStrip();\n }\n tabStripClasses += \" \" + _Types__WEBPACK_IMPORTED_MODULE_7__.CLASSES.FLEXLAYOUT__TABSET_TABBAR_OUTER_ + node.getTabLocation();\n if (node.isActive()) {\n tabStripClasses += \" \" + cm(_Types__WEBPACK_IMPORTED_MODULE_7__.CLASSES.FLEXLAYOUT__TABSET_SELECTED);\n }\n if (node.isMaximized()) {\n tabStripClasses += \" \" + cm(_Types__WEBPACK_IMPORTED_MODULE_7__.CLASSES.FLEXLAYOUT__TABSET_MAXIMIZED);\n }\n if (isTabStretch) {\n const tabNode = node.getChildren()[0];\n if (tabNode.getTabSetClassName() !== undefined) {\n tabStripClasses += \" \" + tabNode.getTabSetClassName();\n }\n }\n if (node.isEnableTabWrap()) {\n if (node.isEnableTabStrip()) {\n tabStrip = (react__WEBPACK_IMPORTED_MODULE_0__.createElement(\"div\", { className: tabStripClasses, style: { flexWrap: \"wrap\", gap: \"1px\", marginTop: \"2px\" }, ref: tabStripRef, \"data-layout-path\": path + \"/tabstrip\", onPointerDown: onPointerDown, onDoubleClick: onDoubleClick, onContextMenu: onContextMenu, onClick: onAuxMouseClick, onAuxClick: onAuxMouseClick, draggable: true, onDragStart: onDragStart },\n tabs,\n react__WEBPACK_IMPORTED_MODULE_0__.createElement(\"div\", { style: { flexGrow: 1 } }),\n buttonbar));\n }\n }\n else {\n if (node.isEnableTabStrip()) {\n tabStrip = (react__WEBPACK_IMPORTED_MODULE_0__.createElement(\"div\", { className: tabStripClasses, ref: tabStripRef, \"data-layout-path\": path + \"/tabstrip\", onPointerDown: onPointerDown, onDoubleClick: onDoubleClick, onContextMenu: onContextMenu, onClick: onAuxMouseClick, onAuxClick: onAuxMouseClick, draggable: true, onWheel: onMouseWheel, onDragStart: onDragStart },\n react__WEBPACK_IMPORTED_MODULE_0__.createElement(\"div\", { ref: tabStripInnerRef, className: cm(_Types__WEBPACK_IMPORTED_MODULE_7__.CLASSES.FLEXLAYOUT__TABSET_TABBAR_INNER) + \" \" + cm(_Types__WEBPACK_IMPORTED_MODULE_7__.CLASSES.FLEXLAYOUT__TABSET_TABBAR_INNER_ + node.getTabLocation()) },\n react__WEBPACK_IMPORTED_MODULE_0__.createElement(\"div\", { style: { left: position, width: (isTabStretch ? \"100%\" : \"10000px\") }, className: cm(_Types__WEBPACK_IMPORTED_MODULE_7__.CLASSES.FLEXLAYOUT__TABSET_TABBAR_INNER_TAB_CONTAINER) + \" \" + cm(_Types__WEBPACK_IMPORTED_MODULE_7__.CLASSES.FLEXLAYOUT__TABSET_TABBAR_INNER_TAB_CONTAINER_ + node.getTabLocation()) }, tabs)),\n buttonbar));\n }\n }\n var emptyTabset;\n if (node.getChildren().length === 0) {\n const placeHolderCallback = layout.getTabSetPlaceHolderCallback();\n if (placeHolderCallback) {\n emptyTabset = placeHolderCallback(node);\n }\n }\n let content = react__WEBPACK_IMPORTED_MODULE_0__.createElement(\"div\", { ref: contentRef, className: cm(_Types__WEBPACK_IMPORTED_MODULE_7__.CLASSES.FLEXLAYOUT__TABSET_CONTENT) }, emptyTabset);\n if (node.getTabLocation() === \"top\") {\n content = react__WEBPACK_IMPORTED_MODULE_0__.createElement(react__WEBPACK_IMPORTED_MODULE_0__.Fragment, null,\n tabStrip,\n content);\n }\n else {\n content = react__WEBPACK_IMPORTED_MODULE_0__.createElement(react__WEBPACK_IMPORTED_MODULE_0__.Fragment, null,\n content,\n tabStrip);\n }\n let style = {\n flexGrow: Math.max(1, node.getWeight() * 1000),\n minWidth: node.getMinWidth(),\n minHeight: node.getMinHeight(),\n maxWidth: node.getMaxWidth(),\n maxHeight: node.getMaxHeight()\n };\n if (node.getModel().getMaximizedTabset(layout.getWindowId()) !== undefined && !node.isMaximized()) {\n style.display = \"none\";\n }\n // note: tabset container is needed to allow flexbox to size without border/padding/margin\n // then inner tabset can have border/padding/margin for styling\n const tabset = (react__WEBPACK_IMPORTED_MODULE_0__.createElement(\"div\", { ref: selfRef, className: cm(_Types__WEBPACK_IMPORTED_MODULE_7__.CLASSES.FLEXLAYOUT__TABSET_CONTAINER), style: style },\n react__WEBPACK_IMPORTED_MODULE_0__.createElement(\"div\", { className: cm(_Types__WEBPACK_IMPORTED_MODULE_7__.CLASSES.FLEXLAYOUT__TABSET), \"data-layout-path\": path }, content)));\n if (node.isMaximized()) {\n if (layout.getMainElement()) {\n return (0,react_dom__WEBPACK_IMPORTED_MODULE_9__.createPortal)(react__WEBPACK_IMPORTED_MODULE_0__.createElement(\"div\", { style: {\n position: \"absolute\",\n display: \"flex\",\n top: 0, left: 0, bottom: 0, right: 0\n } }, tabset), layout.getMainElement());\n }\n else {\n return tabset;\n }\n }\n else {\n return tabset;\n }\n};\n\n\n//# sourceURL=webpack://FlexLayout/./src/view/TabSet.tsx?");
449
+ eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpack_require__.d(__webpack_exports__, {\n/* harmony export */ TabSet: () => (/* binding */ TabSet)\n/* harmony export */ });\n/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! react */ \"react\");\n/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(react__WEBPACK_IMPORTED_MODULE_0__);\n/* harmony import */ var _I18nLabel__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ../I18nLabel */ \"./src/I18nLabel.ts\");\n/* harmony import */ var _model_Actions__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ../model/Actions */ \"./src/model/Actions.ts\");\n/* harmony import */ var _PopupMenu__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! ./PopupMenu */ \"./src/view/PopupMenu.tsx\");\n/* harmony import */ var _TabButton__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(/*! ./TabButton */ \"./src/view/TabButton.tsx\");\n/* harmony import */ var _TabOverflowHook__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__(/*! ./TabOverflowHook */ \"./src/view/TabOverflowHook.tsx\");\n/* harmony import */ var _Orientation__WEBPACK_IMPORTED_MODULE_6__ = __webpack_require__(/*! ../Orientation */ \"./src/Orientation.ts\");\n/* harmony import */ var _Types__WEBPACK_IMPORTED_MODULE_7__ = __webpack_require__(/*! ../Types */ \"./src/Types.ts\");\n/* harmony import */ var _Utils__WEBPACK_IMPORTED_MODULE_8__ = __webpack_require__(/*! ./Utils */ \"./src/view/Utils.tsx\");\n/* harmony import */ var react_dom__WEBPACK_IMPORTED_MODULE_9__ = __webpack_require__(/*! react-dom */ \"react-dom\");\n/* harmony import */ var react_dom__WEBPACK_IMPORTED_MODULE_9___default = /*#__PURE__*/__webpack_require__.n(react_dom__WEBPACK_IMPORTED_MODULE_9__);\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 TabSet = (props) => {\n const { node, layout } = props;\n const tabStripRef = react__WEBPACK_IMPORTED_MODULE_0__.useRef(null);\n const tabStripInnerRef = react__WEBPACK_IMPORTED_MODULE_0__.useRef(null);\n const contentRef = react__WEBPACK_IMPORTED_MODULE_0__.useRef(null);\n const buttonBarRef = 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 icons = layout.getIcons();\n // must use useEffect (rather than useLayoutEffect) otherwise contentrect not set correctly (has height 0 when changing theme in demo)\n react__WEBPACK_IMPORTED_MODULE_0__.useEffect(() => {\n node.setRect(layout.getBoundingClientRect(selfRef.current));\n if (tabStripRef.current) {\n node.setTabStripRect(layout.getBoundingClientRect(tabStripRef.current));\n }\n const newContentRect = _Rect__WEBPACK_IMPORTED_MODULE_10__.Rect.getContentRect(contentRef.current).relativeTo(layout.getDomRect());\n if (!node.getContentRect().equals(newContentRect)) {\n node.setContentRect(newContentRect);\n layout.redrawInternal(\"tabset content rect \" + newContentRect);\n }\n });\n // this must be after the useEffect, so the node rect is already set (else window popin will not position tabs correctly)\n const { selfRef, position, userControlledLeft, hiddenTabs, onMouseWheel, tabsTruncated } = (0,_TabOverflowHook__WEBPACK_IMPORTED_MODULE_5__.useTabOverflow)(node, _Orientation__WEBPACK_IMPORTED_MODULE_6__.Orientation.HORZ, buttonBarRef, stickyButtonsRef);\n const onOverflowClick = (event) => {\n const callback = layout.getShowOverflowMenu();\n if (callback !== undefined) {\n callback(node, event, hiddenTabs, onOverflowItemSelect);\n }\n else {\n const element = overflowbuttonRef.current;\n (0,_PopupMenu__WEBPACK_IMPORTED_MODULE_3__.showPopup)(element, hiddenTabs, onOverflowItemSelect, layout);\n }\n event.stopPropagation();\n };\n const onOverflowItemSelect = (item) => {\n layout.doAction(_model_Actions__WEBPACK_IMPORTED_MODULE_2__.Actions.selectTab(item.node.getId()));\n userControlledLeft.current = false;\n };\n const onDragStart = (event) => {\n if (!layout.getEditingTab()) {\n if (node.isEnableDrag()) {\n event.stopPropagation();\n layout.setDragNode(event.nativeEvent, node);\n }\n else {\n event.preventDefault();\n }\n }\n else {\n event.preventDefault();\n }\n };\n const onPointerDown = (event) => {\n if (!(0,_Utils__WEBPACK_IMPORTED_MODULE_8__.isAuxMouseEvent)(event)) {\n let name = node.getName();\n if (name === undefined) {\n name = \"\";\n }\n else {\n name = \": \" + name;\n }\n layout.doAction(_model_Actions__WEBPACK_IMPORTED_MODULE_2__.Actions.setActiveTabset(node.getId(), layout.getWindowId()));\n }\n };\n const onAuxMouseClick = (event) => {\n if ((0,_Utils__WEBPACK_IMPORTED_MODULE_8__.isAuxMouseEvent)(event)) {\n layout.auxMouseClick(node, event);\n }\n };\n const onContextMenu = (event) => {\n layout.showContextMenu(node, event);\n };\n const onInterceptPointerDown = (event) => {\n event.stopPropagation();\n };\n const onMaximizeToggle = (event) => {\n if (node.canMaximize()) {\n layout.maximize(node);\n }\n event.stopPropagation();\n };\n const onClose = (event) => {\n layout.doAction(_model_Actions__WEBPACK_IMPORTED_MODULE_2__.Actions.deleteTabset(node.getId()));\n event.stopPropagation();\n };\n const onCloseTab = (event) => {\n layout.doAction(_model_Actions__WEBPACK_IMPORTED_MODULE_2__.Actions.deleteTab(node.getChildren()[0].getId()));\n event.stopPropagation();\n };\n const onPopoutTab = (event) => {\n if (selectedTabNode !== undefined) {\n layout.doAction(_model_Actions__WEBPACK_IMPORTED_MODULE_2__.Actions.popoutTab(selectedTabNode.getId()));\n // layout.doAction(Actions.popoutTabset(node.getId()));\n }\n event.stopPropagation();\n };\n const onDoubleClick = (event) => {\n if (node.canMaximize()) {\n layout.maximize(node);\n }\n };\n // Start Render\n const cm = layout.getClassName;\n // tabbar inner can get shifted left via tab rename, this resets scrollleft to 0\n if (tabStripInnerRef.current !== null && tabStripInnerRef.current.scrollLeft !== 0) {\n tabStripInnerRef.current.scrollLeft = 0;\n }\n const selectedTabNode = node.getSelectedNode();\n const path = node.getPath();\n const tabs = [];\n if (node.isEnableTabStrip()) {\n for (let i = 0; i < node.getChildren().length; i++) {\n const child = node.getChildren()[i];\n let isSelected = node.getSelected() === i;\n tabs.push(react__WEBPACK_IMPORTED_MODULE_0__.createElement(_TabButton__WEBPACK_IMPORTED_MODULE_4__.TabButton, { layout: layout, node: child, path: path + \"/tb\" + i, key: child.getId(), selected: isSelected }));\n if (i < node.getChildren().length - 1) {\n tabs.push(react__WEBPACK_IMPORTED_MODULE_0__.createElement(\"div\", { key: \"divider\" + i, className: cm(_Types__WEBPACK_IMPORTED_MODULE_7__.CLASSES.FLEXLAYOUT__TABSET_TAB_DIVIDER) }));\n }\n }\n }\n let stickyButtons = [];\n let buttons = [];\n // allow customization of header contents and buttons\n const renderState = { stickyButtons, buttons, overflowPosition: undefined };\n layout.customizeTabSet(node, renderState);\n stickyButtons = renderState.stickyButtons;\n buttons = renderState.buttons;\n const isTabStretch = node.isEnableSingleTabStretch() && node.getChildren().length === 1;\n const showClose = (isTabStretch && (node.getChildren()[0].isEnableClose())) || node.isEnableClose();\n if (renderState.overflowPosition === undefined) {\n renderState.overflowPosition = stickyButtons.length;\n }\n if (stickyButtons.length > 0) {\n if (!node.isEnableTabWrap() && (tabsTruncated || isTabStretch)) {\n buttons = [...stickyButtons, ...buttons];\n }\n else {\n tabs.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_7__.CLASSES.FLEXLAYOUT__TAB_TOOLBAR_STICKY_BUTTONS_CONTAINER) }, stickyButtons));\n }\n }\n if (!node.isEnableTabWrap()) {\n if (hiddenTabs.length > 0) {\n const overflowTitle = layout.i18nName(_I18nLabel__WEBPACK_IMPORTED_MODULE_1__.I18nLabel.Overflow_Menu_Tooltip);\n let overflowContent;\n if (typeof icons.more === \"function\") {\n overflowContent = icons.more(node, hiddenTabs);\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_7__.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\", \"data-layout-path\": path + \"/button/overflow\", ref: overflowbuttonRef, className: cm(_Types__WEBPACK_IMPORTED_MODULE_7__.CLASSES.FLEXLAYOUT__TAB_TOOLBAR_BUTTON) + \" \" + cm(_Types__WEBPACK_IMPORTED_MODULE_7__.CLASSES.FLEXLAYOUT__TAB_BUTTON_OVERFLOW), title: overflowTitle, onClick: onOverflowClick, onPointerDown: onInterceptPointerDown }, overflowContent));\n }\n }\n if (selectedTabNode !== undefined &&\n layout.isSupportsPopout() &&\n selectedTabNode.isEnablePopout() &&\n selectedTabNode.isEnablePopoutIcon()) {\n const popoutTitle = layout.i18nName(_I18nLabel__WEBPACK_IMPORTED_MODULE_1__.I18nLabel.Popout_Tab);\n buttons.push(react__WEBPACK_IMPORTED_MODULE_0__.createElement(\"button\", { key: \"popout\", \"data-layout-path\": path + \"/button/popout\", title: popoutTitle, className: cm(_Types__WEBPACK_IMPORTED_MODULE_7__.CLASSES.FLEXLAYOUT__TAB_TOOLBAR_BUTTON) + \" \" + cm(_Types__WEBPACK_IMPORTED_MODULE_7__.CLASSES.FLEXLAYOUT__TAB_TOOLBAR_BUTTON_FLOAT), onClick: onPopoutTab, onPointerDown: onInterceptPointerDown }, (typeof icons.popout === \"function\") ? icons.popout(selectedTabNode) : icons.popout));\n }\n if (node.canMaximize()) {\n const minTitle = layout.i18nName(_I18nLabel__WEBPACK_IMPORTED_MODULE_1__.I18nLabel.Restore);\n const maxTitle = layout.i18nName(_I18nLabel__WEBPACK_IMPORTED_MODULE_1__.I18nLabel.Maximize);\n buttons.push(react__WEBPACK_IMPORTED_MODULE_0__.createElement(\"button\", { key: \"max\", \"data-layout-path\": path + \"/button/max\", title: node.isMaximized() ? minTitle : maxTitle, className: cm(_Types__WEBPACK_IMPORTED_MODULE_7__.CLASSES.FLEXLAYOUT__TAB_TOOLBAR_BUTTON) + \" \" + cm(_Types__WEBPACK_IMPORTED_MODULE_7__.CLASSES.FLEXLAYOUT__TAB_TOOLBAR_BUTTON_ + (node.isMaximized() ? \"max\" : \"min\")), onClick: onMaximizeToggle, onPointerDown: onInterceptPointerDown }, node.isMaximized() ?\n (typeof icons.restore === \"function\") ? icons.restore(node) : icons.restore :\n (typeof icons.maximize === \"function\") ? icons.maximize(node) : icons.maximize));\n }\n if (!node.isMaximized() && showClose) {\n const title = isTabStretch ? layout.i18nName(_I18nLabel__WEBPACK_IMPORTED_MODULE_1__.I18nLabel.Close_Tab) : layout.i18nName(_I18nLabel__WEBPACK_IMPORTED_MODULE_1__.I18nLabel.Close_Tabset);\n buttons.push(react__WEBPACK_IMPORTED_MODULE_0__.createElement(\"button\", { key: \"close\", \"data-layout-path\": path + \"/button/close\", title: title, className: cm(_Types__WEBPACK_IMPORTED_MODULE_7__.CLASSES.FLEXLAYOUT__TAB_TOOLBAR_BUTTON) + \" \" + cm(_Types__WEBPACK_IMPORTED_MODULE_7__.CLASSES.FLEXLAYOUT__TAB_TOOLBAR_BUTTON_CLOSE), onClick: isTabStretch ? onCloseTab : onClose, onPointerDown: onInterceptPointerDown }, (typeof icons.closeTabset === \"function\") ? icons.closeTabset(node) : icons.closeTabset));\n }\n if (node.isActive() && node.isEnableActiveIcon()) {\n const title = layout.i18nName(_I18nLabel__WEBPACK_IMPORTED_MODULE_1__.I18nLabel.Active_Tabset);\n buttons.push(react__WEBPACK_IMPORTED_MODULE_0__.createElement(\"div\", { key: \"active\", \"data-layout-path\": path + \"/button/active\", title: title, className: cm(_Types__WEBPACK_IMPORTED_MODULE_7__.CLASSES.FLEXLAYOUT__TAB_TOOLBAR_ICON) }, (typeof icons.activeTabset === \"function\") ? icons.activeTabset(node) : icons.activeTabset));\n }\n const buttonbar = (react__WEBPACK_IMPORTED_MODULE_0__.createElement(\"div\", { key: \"buttonbar\", ref: buttonBarRef, className: cm(_Types__WEBPACK_IMPORTED_MODULE_7__.CLASSES.FLEXLAYOUT__TAB_TOOLBAR), onPointerDown: onInterceptPointerDown, onDragStart: (e) => { e.preventDefault(); } }, buttons));\n let tabStrip;\n let tabStripClasses = cm(_Types__WEBPACK_IMPORTED_MODULE_7__.CLASSES.FLEXLAYOUT__TABSET_TABBAR_OUTER);\n if (node.getClassNameTabStrip() !== undefined) {\n tabStripClasses += \" \" + node.getClassNameTabStrip();\n }\n tabStripClasses += \" \" + _Types__WEBPACK_IMPORTED_MODULE_7__.CLASSES.FLEXLAYOUT__TABSET_TABBAR_OUTER_ + node.getTabLocation();\n if (node.isActive()) {\n tabStripClasses += \" \" + cm(_Types__WEBPACK_IMPORTED_MODULE_7__.CLASSES.FLEXLAYOUT__TABSET_SELECTED);\n }\n if (node.isMaximized()) {\n tabStripClasses += \" \" + cm(_Types__WEBPACK_IMPORTED_MODULE_7__.CLASSES.FLEXLAYOUT__TABSET_MAXIMIZED);\n }\n if (isTabStretch) {\n const tabNode = node.getChildren()[0];\n if (tabNode.getTabSetClassName() !== undefined) {\n tabStripClasses += \" \" + tabNode.getTabSetClassName();\n }\n }\n if (node.isEnableTabWrap()) {\n if (node.isEnableTabStrip()) {\n tabStrip = (react__WEBPACK_IMPORTED_MODULE_0__.createElement(\"div\", { className: tabStripClasses, style: { flexWrap: \"wrap\", gap: \"1px\", marginTop: \"2px\" }, ref: tabStripRef, \"data-layout-path\": path + \"/tabstrip\", onPointerDown: onPointerDown, onDoubleClick: onDoubleClick, onContextMenu: onContextMenu, onClick: onAuxMouseClick, onAuxClick: onAuxMouseClick, draggable: true, onDragStart: onDragStart },\n tabs,\n react__WEBPACK_IMPORTED_MODULE_0__.createElement(\"div\", { style: { flexGrow: 1 } }),\n buttonbar));\n }\n }\n else {\n if (node.isEnableTabStrip()) {\n tabStrip = (react__WEBPACK_IMPORTED_MODULE_0__.createElement(\"div\", { className: tabStripClasses, ref: tabStripRef, \"data-layout-path\": path + \"/tabstrip\", onPointerDown: onPointerDown, onDoubleClick: onDoubleClick, onContextMenu: onContextMenu, onClick: onAuxMouseClick, onAuxClick: onAuxMouseClick, draggable: true, onWheel: onMouseWheel, onDragStart: onDragStart },\n react__WEBPACK_IMPORTED_MODULE_0__.createElement(\"div\", { ref: tabStripInnerRef, className: cm(_Types__WEBPACK_IMPORTED_MODULE_7__.CLASSES.FLEXLAYOUT__TABSET_TABBAR_INNER) + \" \" + cm(_Types__WEBPACK_IMPORTED_MODULE_7__.CLASSES.FLEXLAYOUT__TABSET_TABBAR_INNER_ + node.getTabLocation()) },\n react__WEBPACK_IMPORTED_MODULE_0__.createElement(\"div\", { style: { left: position, width: (isTabStretch ? \"100%\" : \"10000px\") }, className: cm(_Types__WEBPACK_IMPORTED_MODULE_7__.CLASSES.FLEXLAYOUT__TABSET_TABBAR_INNER_TAB_CONTAINER) + \" \" + cm(_Types__WEBPACK_IMPORTED_MODULE_7__.CLASSES.FLEXLAYOUT__TABSET_TABBAR_INNER_TAB_CONTAINER_ + node.getTabLocation()) }, tabs)),\n buttonbar));\n }\n }\n var emptyTabset;\n if (node.getChildren().length === 0) {\n const placeHolderCallback = layout.getTabSetPlaceHolderCallback();\n if (placeHolderCallback) {\n emptyTabset = placeHolderCallback(node);\n }\n }\n let content = react__WEBPACK_IMPORTED_MODULE_0__.createElement(\"div\", { ref: contentRef, className: cm(_Types__WEBPACK_IMPORTED_MODULE_7__.CLASSES.FLEXLAYOUT__TABSET_CONTENT) }, emptyTabset);\n if (node.getTabLocation() === \"top\") {\n content = react__WEBPACK_IMPORTED_MODULE_0__.createElement(react__WEBPACK_IMPORTED_MODULE_0__.Fragment, null,\n tabStrip,\n content);\n }\n else {\n content = react__WEBPACK_IMPORTED_MODULE_0__.createElement(react__WEBPACK_IMPORTED_MODULE_0__.Fragment, null,\n content,\n tabStrip);\n }\n let style = {\n flexGrow: Math.max(1, node.getWeight() * 1000),\n minWidth: node.getMinWidth(),\n minHeight: node.getMinHeight(),\n maxWidth: node.getMaxWidth(),\n maxHeight: node.getMaxHeight()\n };\n if (node.getModel().getMaximizedTabset(layout.getWindowId()) !== undefined && !node.isMaximized()) {\n style.display = \"none\";\n }\n // note: tabset container is needed to allow flexbox to size without border/padding/margin\n // then inner tabset can have border/padding/margin for styling\n const tabset = (react__WEBPACK_IMPORTED_MODULE_0__.createElement(\"div\", { ref: selfRef, className: cm(_Types__WEBPACK_IMPORTED_MODULE_7__.CLASSES.FLEXLAYOUT__TABSET_CONTAINER), style: style },\n react__WEBPACK_IMPORTED_MODULE_0__.createElement(\"div\", { className: cm(_Types__WEBPACK_IMPORTED_MODULE_7__.CLASSES.FLEXLAYOUT__TABSET), \"data-layout-path\": path }, content)));\n if (node.isMaximized()) {\n if (layout.getMainElement()) {\n return (0,react_dom__WEBPACK_IMPORTED_MODULE_9__.createPortal)(react__WEBPACK_IMPORTED_MODULE_0__.createElement(\"div\", { style: {\n position: \"absolute\",\n display: \"flex\",\n top: 0, left: 0, bottom: 0, right: 0\n } }, tabset), layout.getMainElement());\n }\n else {\n return tabset;\n }\n }\n else {\n return tabset;\n }\n};\n\n\n//# sourceURL=webpack://FlexLayout/./src/view/TabSet.tsx?");
450
450
 
451
451
  /***/ }),
452
452