flexlayout-react 0.7.13 → 0.7.15

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 (35) hide show
  1. package/ChangeLog.txt +7 -0
  2. package/README.md +74 -71
  3. package/declarations/model/IJsonModel.d.ts +1 -0
  4. package/declarations/model/TabNode.d.ts +1 -0
  5. package/declarations/view/Icons.d.ts +1 -0
  6. package/declarations/view/Layout.d.ts +1 -0
  7. package/dist/flexlayout.js +4 -4
  8. package/dist/flexlayout_min.js +1 -1
  9. package/lib/model/TabNode.js +4 -0
  10. package/lib/model/TabNode.js.map +1 -1
  11. package/lib/view/Icons.js +6 -1
  12. package/lib/view/Icons.js.map +1 -1
  13. package/lib/view/Layout.js +10 -4
  14. package/lib/view/Layout.js.map +1 -1
  15. package/lib/view/TabSet.js +6 -0
  16. package/lib/view/TabSet.js.map +1 -1
  17. package/package.json +8 -3
  18. package/src/model/IJsonModel.ts +1 -0
  19. package/src/model/TabNode.ts +5 -0
  20. package/src/view/Icons.tsx +7 -0
  21. package/src/view/Layout.tsx +24 -5
  22. package/src/view/TabSet.tsx +7 -0
  23. package/style/_base.scss +3 -1
  24. package/style/dark.css +4 -1
  25. package/style/dark.css.map +1 -1
  26. package/style/dark.scss +1 -0
  27. package/style/gray.css +5 -2
  28. package/style/gray.css.map +1 -1
  29. package/style/gray.scss +2 -1
  30. package/style/light.css +5 -2
  31. package/style/light.css.map +1 -1
  32. package/style/light.scss +2 -1
  33. package/style/underline.css +5 -2
  34. package/style/underline.css.map +1 -1
  35. package/style/underline.scss +2 -1
package/dist/flexlayout.js CHANGED
@@ -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 */ \"TabNode\": () => (/* binding */ TabNode)\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 _Node__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ./Node */ \"./src/model/Node.ts\");\n\r\n\r\n\r\nclass TabNode extends _Node__WEBPACK_IMPORTED_MODULE_2__.Node {\r\n /** @internal */\r\n static _fromJson(json, model, addToModel = true) {\r\n const newLayoutNode = new TabNode(model, json, addToModel);\r\n return newLayoutNode;\r\n }\r\n /** @internal */\r\n static _createAttributeDefinitions() {\r\n const attributeDefinitions = new _AttributeDefinitions__WEBPACK_IMPORTED_MODULE_1__.AttributeDefinitions();\r\n attributeDefinitions.add(\"type\", TabNode.TYPE, true).setType(_Attribute__WEBPACK_IMPORTED_MODULE_0__.Attribute.STRING);\r\n attributeDefinitions.add(\"id\", undefined).setType(_Attribute__WEBPACK_IMPORTED_MODULE_0__.Attribute.STRING);\r\n attributeDefinitions.add(\"name\", \"[Unnamed Tab]\").setType(_Attribute__WEBPACK_IMPORTED_MODULE_0__.Attribute.STRING);\r\n attributeDefinitions.add(\"altName\", undefined).setType(_Attribute__WEBPACK_IMPORTED_MODULE_0__.Attribute.STRING);\r\n attributeDefinitions.add(\"helpText\", undefined).setType(_Attribute__WEBPACK_IMPORTED_MODULE_0__.Attribute.STRING);\r\n attributeDefinitions.add(\"component\", undefined).setType(_Attribute__WEBPACK_IMPORTED_MODULE_0__.Attribute.STRING);\r\n attributeDefinitions.add(\"config\", undefined).setType(\"any\");\r\n attributeDefinitions.add(\"floating\", false).setType(_Attribute__WEBPACK_IMPORTED_MODULE_0__.Attribute.BOOLEAN);\r\n attributeDefinitions.addInherited(\"enableClose\", \"tabEnableClose\").setType(_Attribute__WEBPACK_IMPORTED_MODULE_0__.Attribute.BOOLEAN);\r\n attributeDefinitions.addInherited(\"closeType\", \"tabCloseType\").setType(\"ICloseType\");\r\n attributeDefinitions.addInherited(\"enableDrag\", \"tabEnableDrag\").setType(_Attribute__WEBPACK_IMPORTED_MODULE_0__.Attribute.BOOLEAN);\r\n attributeDefinitions.addInherited(\"enableRename\", \"tabEnableRename\").setType(_Attribute__WEBPACK_IMPORTED_MODULE_0__.Attribute.BOOLEAN);\r\n attributeDefinitions.addInherited(\"className\", \"tabClassName\").setType(_Attribute__WEBPACK_IMPORTED_MODULE_0__.Attribute.STRING);\r\n attributeDefinitions.addInherited(\"contentClassName\", \"tabContentClassName\").setType(_Attribute__WEBPACK_IMPORTED_MODULE_0__.Attribute.STRING);\r\n attributeDefinitions.addInherited(\"icon\", \"tabIcon\").setType(_Attribute__WEBPACK_IMPORTED_MODULE_0__.Attribute.STRING);\r\n attributeDefinitions.addInherited(\"enableRenderOnDemand\", \"tabEnableRenderOnDemand\").setType(_Attribute__WEBPACK_IMPORTED_MODULE_0__.Attribute.BOOLEAN);\r\n attributeDefinitions.addInherited(\"enableFloat\", \"tabEnableFloat\").setType(_Attribute__WEBPACK_IMPORTED_MODULE_0__.Attribute.BOOLEAN);\r\n attributeDefinitions.addInherited(\"borderWidth\", \"tabBorderWidth\").setType(_Attribute__WEBPACK_IMPORTED_MODULE_0__.Attribute.NUMBER);\r\n attributeDefinitions.addInherited(\"borderHeight\", \"tabBorderHeight\").setType(_Attribute__WEBPACK_IMPORTED_MODULE_0__.Attribute.NUMBER);\r\n return attributeDefinitions;\r\n }\r\n /** @internal */\r\n constructor(model, json, addToModel = true) {\r\n super(model);\r\n this._extra = {}; // extra data added to node not saved in json\r\n TabNode._attributeDefinitions.fromJson(json, this._attributes);\r\n if (addToModel === true) {\r\n model._addNode(this);\r\n }\r\n }\r\n getWindow() {\r\n return this._window;\r\n }\r\n getTabRect() {\r\n return this._tabRect;\r\n }\r\n /** @internal */\r\n _setTabRect(rect) {\r\n this._tabRect = rect;\r\n }\r\n /** @internal */\r\n _setRenderedName(name) {\r\n this._renderedName = name;\r\n }\r\n /** @internal */\r\n _getNameForOverflowMenu() {\r\n const altName = this._getAttr(\"altName\");\r\n if (altName !== undefined) {\r\n return altName;\r\n }\r\n return this._renderedName;\r\n }\r\n getName() {\r\n return this._getAttr(\"name\");\r\n }\r\n getHelpText() {\r\n return this._getAttr(\"helpText\");\r\n }\r\n getComponent() {\r\n return this._getAttr(\"component\");\r\n }\r\n /**\r\n * Returns the config attribute that can be used to store node specific data that\r\n * WILL be saved to the json. The config attribute should be changed via the action Actions.updateNodeAttributes rather\r\n * than directly, for example:\r\n * this.state.model.doAction(\r\n * FlexLayout.Actions.updateNodeAttributes(node.getId(), {config:myConfigObject}));\r\n */\r\n getConfig() {\r\n return this._attributes.config;\r\n }\r\n /**\r\n * Returns an object that can be used to store transient node specific data that will\r\n * NOT be saved in the json.\r\n */\r\n getExtraData() {\r\n return this._extra;\r\n }\r\n isFloating() {\r\n return this._getAttr(\"floating\");\r\n }\r\n getIcon() {\r\n return this._getAttr(\"icon\");\r\n }\r\n isEnableClose() {\r\n return this._getAttr(\"enableClose\");\r\n }\r\n getCloseType() {\r\n return this._getAttr(\"closeType\");\r\n }\r\n isEnableFloat() {\r\n return this._getAttr(\"enableFloat\");\r\n }\r\n isEnableDrag() {\r\n return this._getAttr(\"enableDrag\");\r\n }\r\n isEnableRename() {\r\n return this._getAttr(\"enableRename\");\r\n }\r\n getClassName() {\r\n return this._getAttr(\"className\");\r\n }\r\n getContentClassName() {\r\n return this._getAttr(\"contentClassName\");\r\n }\r\n isEnableRenderOnDemand() {\r\n return this._getAttr(\"enableRenderOnDemand\");\r\n }\r\n /** @internal */\r\n _setName(name) {\r\n this._attributes.name = name;\r\n if (this._window && this._window.document) {\r\n this._window.document.title = name;\r\n }\r\n }\r\n /** @internal */\r\n _setFloating(float) {\r\n this._attributes.floating = float;\r\n }\r\n /** @internal */\r\n _layout(rect, metrics) {\r\n if (!rect.equals(this._rect)) {\r\n this._fireEvent(\"resize\", { rect });\r\n }\r\n this._rect = rect;\r\n }\r\n /** @internal */\r\n _delete() {\r\n this._parent._remove(this);\r\n this._fireEvent(\"close\", {});\r\n }\r\n toJson() {\r\n const json = {};\r\n TabNode._attributeDefinitions.toJson(json, this._attributes);\r\n return json;\r\n }\r\n /** @internal */\r\n _updateAttrs(json) {\r\n TabNode._attributeDefinitions.update(json, this._attributes);\r\n }\r\n /** @internal */\r\n _getAttributeDefinitions() {\r\n return TabNode._attributeDefinitions;\r\n }\r\n /** @internal */\r\n _setWindow(window) {\r\n this._window = window;\r\n }\r\n /** @internal */\r\n _setBorderWidth(width) {\r\n this._attributes.borderWidth = width;\r\n }\r\n /** @internal */\r\n _setBorderHeight(height) {\r\n this._attributes.borderHeight = height;\r\n }\r\n /** @internal */\r\n static getAttributeDefinitions() {\r\n return TabNode._attributeDefinitions;\r\n }\r\n}\r\nTabNode.TYPE = \"tab\";\r\n/** @internal */\r\nTabNode._attributeDefinitions = TabNode._createAttributeDefinitions();\r\n\n\n//# sourceURL=webpack://FlexLayout/./src/model/TabNode.ts?");
259
+ eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpack_require__.d(__webpack_exports__, {\n/* harmony export */ \"TabNode\": () => (/* binding */ TabNode)\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 _Node__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ./Node */ \"./src/model/Node.ts\");\n\r\n\r\n\r\nclass TabNode extends _Node__WEBPACK_IMPORTED_MODULE_2__.Node {\r\n /** @internal */\r\n static _fromJson(json, model, addToModel = true) {\r\n const newLayoutNode = new TabNode(model, json, addToModel);\r\n return newLayoutNode;\r\n }\r\n /** @internal */\r\n static _createAttributeDefinitions() {\r\n const attributeDefinitions = new _AttributeDefinitions__WEBPACK_IMPORTED_MODULE_1__.AttributeDefinitions();\r\n attributeDefinitions.add(\"type\", TabNode.TYPE, true).setType(_Attribute__WEBPACK_IMPORTED_MODULE_0__.Attribute.STRING);\r\n attributeDefinitions.add(\"id\", undefined).setType(_Attribute__WEBPACK_IMPORTED_MODULE_0__.Attribute.STRING);\r\n attributeDefinitions.add(\"name\", \"[Unnamed Tab]\").setType(_Attribute__WEBPACK_IMPORTED_MODULE_0__.Attribute.STRING);\r\n attributeDefinitions.add(\"altName\", undefined).setType(_Attribute__WEBPACK_IMPORTED_MODULE_0__.Attribute.STRING);\r\n attributeDefinitions.add(\"helpText\", undefined).setType(_Attribute__WEBPACK_IMPORTED_MODULE_0__.Attribute.STRING);\r\n attributeDefinitions.add(\"component\", undefined).setType(_Attribute__WEBPACK_IMPORTED_MODULE_0__.Attribute.STRING);\r\n attributeDefinitions.add(\"config\", undefined).setType(\"any\");\r\n attributeDefinitions.add(\"floating\", false).setType(_Attribute__WEBPACK_IMPORTED_MODULE_0__.Attribute.BOOLEAN);\r\n attributeDefinitions.add(\"tabsetClassName\", undefined).setType(_Attribute__WEBPACK_IMPORTED_MODULE_0__.Attribute.STRING);\r\n attributeDefinitions.addInherited(\"enableClose\", \"tabEnableClose\").setType(_Attribute__WEBPACK_IMPORTED_MODULE_0__.Attribute.BOOLEAN);\r\n attributeDefinitions.addInherited(\"closeType\", \"tabCloseType\").setType(\"ICloseType\");\r\n attributeDefinitions.addInherited(\"enableDrag\", \"tabEnableDrag\").setType(_Attribute__WEBPACK_IMPORTED_MODULE_0__.Attribute.BOOLEAN);\r\n attributeDefinitions.addInherited(\"enableRename\", \"tabEnableRename\").setType(_Attribute__WEBPACK_IMPORTED_MODULE_0__.Attribute.BOOLEAN);\r\n attributeDefinitions.addInherited(\"className\", \"tabClassName\").setType(_Attribute__WEBPACK_IMPORTED_MODULE_0__.Attribute.STRING);\r\n attributeDefinitions.addInherited(\"contentClassName\", \"tabContentClassName\").setType(_Attribute__WEBPACK_IMPORTED_MODULE_0__.Attribute.STRING);\r\n attributeDefinitions.addInherited(\"icon\", \"tabIcon\").setType(_Attribute__WEBPACK_IMPORTED_MODULE_0__.Attribute.STRING);\r\n attributeDefinitions.addInherited(\"enableRenderOnDemand\", \"tabEnableRenderOnDemand\").setType(_Attribute__WEBPACK_IMPORTED_MODULE_0__.Attribute.BOOLEAN);\r\n attributeDefinitions.addInherited(\"enableFloat\", \"tabEnableFloat\").setType(_Attribute__WEBPACK_IMPORTED_MODULE_0__.Attribute.BOOLEAN);\r\n attributeDefinitions.addInherited(\"borderWidth\", \"tabBorderWidth\").setType(_Attribute__WEBPACK_IMPORTED_MODULE_0__.Attribute.NUMBER);\r\n attributeDefinitions.addInherited(\"borderHeight\", \"tabBorderHeight\").setType(_Attribute__WEBPACK_IMPORTED_MODULE_0__.Attribute.NUMBER);\r\n return attributeDefinitions;\r\n }\r\n /** @internal */\r\n constructor(model, json, addToModel = true) {\r\n super(model);\r\n this._extra = {}; // extra data added to node not saved in json\r\n TabNode._attributeDefinitions.fromJson(json, this._attributes);\r\n if (addToModel === true) {\r\n model._addNode(this);\r\n }\r\n }\r\n getWindow() {\r\n return this._window;\r\n }\r\n getTabRect() {\r\n return this._tabRect;\r\n }\r\n /** @internal */\r\n _setTabRect(rect) {\r\n this._tabRect = rect;\r\n }\r\n /** @internal */\r\n _setRenderedName(name) {\r\n this._renderedName = name;\r\n }\r\n /** @internal */\r\n _getNameForOverflowMenu() {\r\n const altName = this._getAttr(\"altName\");\r\n if (altName !== undefined) {\r\n return altName;\r\n }\r\n return this._renderedName;\r\n }\r\n getName() {\r\n return this._getAttr(\"name\");\r\n }\r\n getHelpText() {\r\n return this._getAttr(\"helpText\");\r\n }\r\n getComponent() {\r\n return this._getAttr(\"component\");\r\n }\r\n /**\r\n * Returns the config attribute that can be used to store node specific data that\r\n * WILL be saved to the json. The config attribute should be changed via the action Actions.updateNodeAttributes rather\r\n * than directly, for example:\r\n * this.state.model.doAction(\r\n * FlexLayout.Actions.updateNodeAttributes(node.getId(), {config:myConfigObject}));\r\n */\r\n getConfig() {\r\n return this._attributes.config;\r\n }\r\n /**\r\n * Returns an object that can be used to store transient node specific data that will\r\n * NOT be saved in the json.\r\n */\r\n getExtraData() {\r\n return this._extra;\r\n }\r\n isFloating() {\r\n return this._getAttr(\"floating\");\r\n }\r\n getIcon() {\r\n return this._getAttr(\"icon\");\r\n }\r\n isEnableClose() {\r\n return this._getAttr(\"enableClose\");\r\n }\r\n getCloseType() {\r\n return this._getAttr(\"closeType\");\r\n }\r\n isEnableFloat() {\r\n return this._getAttr(\"enableFloat\");\r\n }\r\n isEnableDrag() {\r\n return this._getAttr(\"enableDrag\");\r\n }\r\n isEnableRename() {\r\n return this._getAttr(\"enableRename\");\r\n }\r\n getClassName() {\r\n return this._getAttr(\"className\");\r\n }\r\n getContentClassName() {\r\n return this._getAttr(\"contentClassName\");\r\n }\r\n getTabSetClassName() {\r\n return this._getAttr(\"tabsetClassName\");\r\n }\r\n isEnableRenderOnDemand() {\r\n return this._getAttr(\"enableRenderOnDemand\");\r\n }\r\n /** @internal */\r\n _setName(name) {\r\n this._attributes.name = name;\r\n if (this._window && this._window.document) {\r\n this._window.document.title = name;\r\n }\r\n }\r\n /** @internal */\r\n _setFloating(float) {\r\n this._attributes.floating = float;\r\n }\r\n /** @internal */\r\n _layout(rect, metrics) {\r\n if (!rect.equals(this._rect)) {\r\n this._fireEvent(\"resize\", { rect });\r\n }\r\n this._rect = rect;\r\n }\r\n /** @internal */\r\n _delete() {\r\n this._parent._remove(this);\r\n this._fireEvent(\"close\", {});\r\n }\r\n toJson() {\r\n const json = {};\r\n TabNode._attributeDefinitions.toJson(json, this._attributes);\r\n return json;\r\n }\r\n /** @internal */\r\n _updateAttrs(json) {\r\n TabNode._attributeDefinitions.update(json, this._attributes);\r\n }\r\n /** @internal */\r\n _getAttributeDefinitions() {\r\n return TabNode._attributeDefinitions;\r\n }\r\n /** @internal */\r\n _setWindow(window) {\r\n this._window = window;\r\n }\r\n /** @internal */\r\n _setBorderWidth(width) {\r\n this._attributes.borderWidth = width;\r\n }\r\n /** @internal */\r\n _setBorderHeight(height) {\r\n this._attributes.borderHeight = height;\r\n }\r\n /** @internal */\r\n static getAttributeDefinitions() {\r\n return TabNode._attributeDefinitions;\r\n }\r\n}\r\nTabNode.TYPE = \"tab\";\r\n/** @internal */\r\nTabNode._attributeDefinitions = TabNode._createAttributeDefinitions();\r\n\n\n//# sourceURL=webpack://FlexLayout/./src/model/TabNode.ts?");
260
260
 
261
261
  /***/ }),
262
262
 
@@ -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 */ \"CloseIcon\": () => (/* binding */ CloseIcon),\n/* harmony export */ \"MaximizeIcon\": () => (/* binding */ MaximizeIcon),\n/* harmony export */ \"OverflowIcon\": () => (/* binding */ OverflowIcon),\n/* harmony export */ \"PopoutIcon\": () => (/* binding */ PopoutIcon),\n/* harmony export */ \"RestoreIcon\": () => (/* binding */ RestoreIcon)\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\r\nconst style = { width: \"1em\", height: \"1em\", display: \"flex\", alignItems: \"center\" };\r\nconst CloseIcon = () => {\r\n return (react__WEBPACK_IMPORTED_MODULE_0__.createElement(\"svg\", { xmlns: \"http://www.w3.org/2000/svg\", style: style, viewBox: \"0 0 24 24\" },\r\n react__WEBPACK_IMPORTED_MODULE_0__.createElement(\"path\", { fill: \"none\", d: \"M0 0h24v24H0z\" }),\r\n react__WEBPACK_IMPORTED_MODULE_0__.createElement(\"path\", { stroke: \"var(--color-icon)\", fill: \"var(--color-icon)\", d: \"M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z\" })));\r\n};\r\nconst MaximizeIcon = () => {\r\n return (react__WEBPACK_IMPORTED_MODULE_0__.createElement(\"svg\", { xmlns: \"http://www.w3.org/2000/svg\", style: style, viewBox: \"0 0 24 24\", fill: \"var(--color-icon)\" },\r\n react__WEBPACK_IMPORTED_MODULE_0__.createElement(\"path\", { d: \"M0 0h24v24H0z\", fill: \"none\" }),\r\n react__WEBPACK_IMPORTED_MODULE_0__.createElement(\"path\", { stroke: \"var(--color-icon)\", d: \"M7 14H5v5h5v-2H7v-3zm-2-4h2V7h3V5H5v5zm12 7h-3v2h5v-5h-2v3zM14 5v2h3v3h2V5h-5z\" })));\r\n};\r\nconst OverflowIcon = () => {\r\n return (react__WEBPACK_IMPORTED_MODULE_0__.createElement(\"svg\", { xmlns: \"http://www.w3.org/2000/svg\", style: style, viewBox: \"0 0 24 24\", fill: \"var(--color-icon)\" },\r\n react__WEBPACK_IMPORTED_MODULE_0__.createElement(\"path\", { d: \"M0 0h24v24H0z\", fill: \"none\" }),\r\n react__WEBPACK_IMPORTED_MODULE_0__.createElement(\"path\", { stroke: \"var(--color-icon)\", d: \"M7 10l5 5 5-5z\" })));\r\n};\r\nconst PopoutIcon = () => {\r\n return (\r\n // <svg xmlns=\"http://www.w3.org/2000/svg\" style={style} viewBox=\"0 0 24 24\" fill=\"var(--color-icon)\"><path d=\"M0 0h24v24H0z\" fill=\"none\"/><path stroke=\"var(--color-icon)\" d=\"M9 5v2h6.59L4 18.59 5.41 20 17 8.41V15h2V5z\"/></svg>\r\n // <svg xmlns=\"http://www.w3.org/2000/svg\" style={style} fill=\"none\" viewBox=\"0 0 24 24\" stroke=\"var(--color-icon)\" stroke-width=\"2\">\r\n // <path stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M10 6H6a2 2 0 00-2 2v10a2 2 0 002 2h10a2 2 0 002-2v-4M14 4h6m0 0v6m0-6L10 14\" />\r\n // </svg>\r\n react__WEBPACK_IMPORTED_MODULE_0__.createElement(\"svg\", { xmlns: \"http://www.w3.org/2000/svg\", style: style, viewBox: \"0 0 20 20\", fill: \"var(--color-icon)\" },\r\n react__WEBPACK_IMPORTED_MODULE_0__.createElement(\"path\", { d: \"M11 3a1 1 0 100 2h2.586l-6.293 6.293a1 1 0 101.414 1.414L15 6.414V9a1 1 0 102 0V4a1 1 0 00-1-1h-5z\" }),\r\n react__WEBPACK_IMPORTED_MODULE_0__.createElement(\"path\", { d: \"M5 5a2 2 0 00-2 2v8a2 2 0 002 2h8a2 2 0 002-2v-3a1 1 0 10-2 0v3H5V7h3a1 1 0 000-2H5z\" })));\r\n};\r\nconst RestoreIcon = () => {\r\n return (react__WEBPACK_IMPORTED_MODULE_0__.createElement(\"svg\", { xmlns: \"http://www.w3.org/2000/svg\", style: style, viewBox: \"0 0 24 24\", fill: \"var(--color-icon)\" },\r\n react__WEBPACK_IMPORTED_MODULE_0__.createElement(\"path\", { d: \"M0 0h24v24H0z\", fill: \"none\" }),\r\n react__WEBPACK_IMPORTED_MODULE_0__.createElement(\"path\", { stroke: \"var(--color-icon)\", d: \"M5 16h3v3h2v-5H5v2zm3-8H5v2h5V5H8v3zm6 11h2v-3h3v-2h-5v5zm2-11V5h-2v5h5V8h-3z\" })));\r\n};\r\n\n\n//# sourceURL=webpack://FlexLayout/./src/view/Icons.tsx?");
339
+ eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpack_require__.d(__webpack_exports__, {\n/* harmony export */ \"CloseIcon\": () => (/* binding */ CloseIcon),\n/* harmony export */ \"EdgeIcon\": () => (/* binding */ EdgeIcon),\n/* harmony export */ \"MaximizeIcon\": () => (/* binding */ MaximizeIcon),\n/* harmony export */ \"OverflowIcon\": () => (/* binding */ OverflowIcon),\n/* harmony export */ \"PopoutIcon\": () => (/* binding */ PopoutIcon),\n/* harmony export */ \"RestoreIcon\": () => (/* binding */ RestoreIcon)\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\r\nconst style = { width: \"1em\", height: \"1em\", display: \"flex\", alignItems: \"center\" };\r\nconst CloseIcon = () => {\r\n return (react__WEBPACK_IMPORTED_MODULE_0__.createElement(\"svg\", { xmlns: \"http://www.w3.org/2000/svg\", style: style, viewBox: \"0 0 24 24\" },\r\n react__WEBPACK_IMPORTED_MODULE_0__.createElement(\"path\", { fill: \"none\", d: \"M0 0h24v24H0z\" }),\r\n react__WEBPACK_IMPORTED_MODULE_0__.createElement(\"path\", { stroke: \"var(--color-icon)\", fill: \"var(--color-icon)\", d: \"M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z\" })));\r\n};\r\nconst MaximizeIcon = () => {\r\n return (react__WEBPACK_IMPORTED_MODULE_0__.createElement(\"svg\", { xmlns: \"http://www.w3.org/2000/svg\", style: style, viewBox: \"0 0 24 24\", fill: \"var(--color-icon)\" },\r\n react__WEBPACK_IMPORTED_MODULE_0__.createElement(\"path\", { d: \"M0 0h24v24H0z\", fill: \"none\" }),\r\n react__WEBPACK_IMPORTED_MODULE_0__.createElement(\"path\", { stroke: \"var(--color-icon)\", d: \"M7 14H5v5h5v-2H7v-3zm-2-4h2V7h3V5H5v5zm12 7h-3v2h5v-5h-2v3zM14 5v2h3v3h2V5h-5z\" })));\r\n};\r\nconst OverflowIcon = () => {\r\n return (react__WEBPACK_IMPORTED_MODULE_0__.createElement(\"svg\", { xmlns: \"http://www.w3.org/2000/svg\", style: style, viewBox: \"0 0 24 24\", fill: \"var(--color-icon)\" },\r\n react__WEBPACK_IMPORTED_MODULE_0__.createElement(\"path\", { d: \"M0 0h24v24H0z\", fill: \"none\" }),\r\n react__WEBPACK_IMPORTED_MODULE_0__.createElement(\"path\", { stroke: \"var(--color-icon)\", d: \"M7 10l5 5 5-5z\" })));\r\n};\r\nconst EdgeIcon = () => {\r\n return (react__WEBPACK_IMPORTED_MODULE_0__.createElement(\"svg\", { xmlns: \"http://www.w3.org/2000/svg\", style: { display: \"block\", width: 10, height: 10 }, preserveAspectRatio: \"none\", viewBox: \"0 0 100 100\" },\r\n react__WEBPACK_IMPORTED_MODULE_0__.createElement(\"path\", { fill: \"var(--color-edge-icon)\", stroke: \"var(--color-edge-icon)\", d: \"M10 30 L90 30 l-40 40 Z\" })));\r\n};\r\nconst PopoutIcon = () => {\r\n return (\r\n // <svg xmlns=\"http://www.w3.org/2000/svg\" style={style} viewBox=\"0 0 24 24\" fill=\"var(--color-icon)\"><path d=\"M0 0h24v24H0z\" fill=\"none\"/><path stroke=\"var(--color-icon)\" d=\"M9 5v2h6.59L4 18.59 5.41 20 17 8.41V15h2V5z\"/></svg>\r\n // <svg xmlns=\"http://www.w3.org/2000/svg\" style={style} fill=\"none\" viewBox=\"0 0 24 24\" stroke=\"var(--color-icon)\" stroke-width=\"2\">\r\n // <path stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M10 6H6a2 2 0 00-2 2v10a2 2 0 002 2h10a2 2 0 002-2v-4M14 4h6m0 0v6m0-6L10 14\" />\r\n // </svg>\r\n react__WEBPACK_IMPORTED_MODULE_0__.createElement(\"svg\", { xmlns: \"http://www.w3.org/2000/svg\", style: style, viewBox: \"0 0 20 20\", fill: \"var(--color-icon)\" },\r\n react__WEBPACK_IMPORTED_MODULE_0__.createElement(\"path\", { d: \"M11 3a1 1 0 100 2h2.586l-6.293 6.293a1 1 0 101.414 1.414L15 6.414V9a1 1 0 102 0V4a1 1 0 00-1-1h-5z\" }),\r\n react__WEBPACK_IMPORTED_MODULE_0__.createElement(\"path\", { d: \"M5 5a2 2 0 00-2 2v8a2 2 0 002 2h8a2 2 0 002-2v-3a1 1 0 10-2 0v3H5V7h3a1 1 0 000-2H5z\" })));\r\n};\r\nconst RestoreIcon = () => {\r\n return (react__WEBPACK_IMPORTED_MODULE_0__.createElement(\"svg\", { xmlns: \"http://www.w3.org/2000/svg\", style: style, viewBox: \"0 0 24 24\", fill: \"var(--color-icon)\" },\r\n react__WEBPACK_IMPORTED_MODULE_0__.createElement(\"path\", { d: \"M0 0h24v24H0z\", fill: \"none\" }),\r\n react__WEBPACK_IMPORTED_MODULE_0__.createElement(\"path\", { stroke: \"var(--color-icon)\", d: \"M5 16h3v3h2v-5H5v2zm3-8H5v2h5V5H8v3zm6 11h2v-3h3v-2h-5v5zm2-11V5h-2v5h5V8h-3z\" })));\r\n};\r\n\n\n//# sourceURL=webpack://FlexLayout/./src/view/Icons.tsx?");
340
340
 
341
341
  /***/ }),
342
342
 
@@ -346,7 +346,7 @@ eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpac
346
346
  \*****************************/
347
347
  /***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {
348
348
 
349
- eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpack_require__.d(__webpack_exports__, {\n/* harmony export */ \"Layout\": () => (/* binding */ Layout)\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 _DockLocation__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ../DockLocation */ \"./src/DockLocation.ts\");\n/* harmony import */ var _DragDrop__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! ../DragDrop */ \"./src/DragDrop.ts\");\n/* harmony import */ var _model_Actions__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(/*! ../model/Actions */ \"./src/model/Actions.ts\");\n/* harmony import */ var _model_BorderNode__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__(/*! ../model/BorderNode */ \"./src/model/BorderNode.ts\");\n/* harmony import */ var _model_SplitterNode__WEBPACK_IMPORTED_MODULE_6__ = __webpack_require__(/*! ../model/SplitterNode */ \"./src/model/SplitterNode.ts\");\n/* harmony import */ var _model_TabNode__WEBPACK_IMPORTED_MODULE_7__ = __webpack_require__(/*! ../model/TabNode */ \"./src/model/TabNode.ts\");\n/* harmony import */ var _model_TabSetNode__WEBPACK_IMPORTED_MODULE_8__ = __webpack_require__(/*! ../model/TabSetNode */ \"./src/model/TabSetNode.ts\");\n/* harmony import */ var _Rect__WEBPACK_IMPORTED_MODULE_9__ = __webpack_require__(/*! ../Rect */ \"./src/Rect.ts\");\n/* harmony import */ var _Types__WEBPACK_IMPORTED_MODULE_10__ = __webpack_require__(/*! ../Types */ \"./src/Types.ts\");\n/* harmony import */ var _BorderTabSet__WEBPACK_IMPORTED_MODULE_11__ = __webpack_require__(/*! ./BorderTabSet */ \"./src/view/BorderTabSet.tsx\");\n/* harmony import */ var _Splitter__WEBPACK_IMPORTED_MODULE_12__ = __webpack_require__(/*! ./Splitter */ \"./src/view/Splitter.tsx\");\n/* harmony import */ var _Tab__WEBPACK_IMPORTED_MODULE_13__ = __webpack_require__(/*! ./Tab */ \"./src/view/Tab.tsx\");\n/* harmony import */ var _TabSet__WEBPACK_IMPORTED_MODULE_14__ = __webpack_require__(/*! ./TabSet */ \"./src/view/TabSet.tsx\");\n/* harmony import */ var _FloatingWindow__WEBPACK_IMPORTED_MODULE_15__ = __webpack_require__(/*! ./FloatingWindow */ \"./src/view/FloatingWindow.tsx\");\n/* harmony import */ var _FloatingWindowTab__WEBPACK_IMPORTED_MODULE_16__ = __webpack_require__(/*! ./FloatingWindowTab */ \"./src/view/FloatingWindowTab.tsx\");\n/* harmony import */ var _TabFloating__WEBPACK_IMPORTED_MODULE_17__ = __webpack_require__(/*! ./TabFloating */ \"./src/view/TabFloating.tsx\");\n/* harmony import */ var _Orientation__WEBPACK_IMPORTED_MODULE_18__ = __webpack_require__(/*! ../Orientation */ \"./src/Orientation.ts\");\n/* harmony import */ var _Icons__WEBPACK_IMPORTED_MODULE_19__ = __webpack_require__(/*! ./Icons */ \"./src/view/Icons.tsx\");\n/* harmony import */ var _TabButtonStamp__WEBPACK_IMPORTED_MODULE_20__ = __webpack_require__(/*! ./TabButtonStamp */ \"./src/view/TabButtonStamp.tsx\");\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\nconst defaultIcons = {\r\n close: react__WEBPACK_IMPORTED_MODULE_0__.createElement(_Icons__WEBPACK_IMPORTED_MODULE_19__.CloseIcon, null),\r\n closeTabset: react__WEBPACK_IMPORTED_MODULE_0__.createElement(_Icons__WEBPACK_IMPORTED_MODULE_19__.CloseIcon, null),\r\n popout: react__WEBPACK_IMPORTED_MODULE_0__.createElement(_Icons__WEBPACK_IMPORTED_MODULE_19__.PopoutIcon, null),\r\n maximize: react__WEBPACK_IMPORTED_MODULE_0__.createElement(_Icons__WEBPACK_IMPORTED_MODULE_19__.MaximizeIcon, null),\r\n restore: react__WEBPACK_IMPORTED_MODULE_0__.createElement(_Icons__WEBPACK_IMPORTED_MODULE_19__.RestoreIcon, null),\r\n more: react__WEBPACK_IMPORTED_MODULE_0__.createElement(_Icons__WEBPACK_IMPORTED_MODULE_19__.OverflowIcon, null),\r\n};\r\n// Popout windows work in latest browsers based on webkit (Chrome, Opera, Safari, latest Edge) and Firefox. They do\r\n// not work on any version if IE or the original Edge browser\r\n// Assume any recent desktop browser not IE or original Edge will work\r\n/** @internal */\r\n// @ts-ignore\r\nconst isIEorEdge = typeof window !== \"undefined\" && (window.document.documentMode || /Edge\\//.test(window.navigator.userAgent));\r\n/** @internal */\r\nconst isDesktop = typeof window !== \"undefined\" && window.matchMedia && window.matchMedia(\"(hover: hover) and (pointer: fine)\").matches;\r\n/** @internal */\r\nconst defaultSupportsPopout = isDesktop && !isIEorEdge;\r\n/**\r\n * A React component that hosts a multi-tabbed layout\r\n */\r\nclass Layout extends react__WEBPACK_IMPORTED_MODULE_0__.Component {\r\n constructor(props) {\r\n super(props);\r\n /** @internal */\r\n this.firstMove = false;\r\n /** @internal */\r\n this.dragRectRendered = true;\r\n /** @internal */\r\n this.dragDivText = undefined;\r\n /** @internal */\r\n this.edgeRectLength = 100;\r\n /** @internal */\r\n this.edgeRectWidth = 10;\r\n /** @internal */\r\n this.onModelChange = (action) => {\r\n this.forceUpdate();\r\n if (this.props.onModelChange) {\r\n this.props.onModelChange(this.props.model, action);\r\n }\r\n };\r\n /** @internal */\r\n this.updateRect = (domRect) => {\r\n if (!domRect) {\r\n domRect = this.getDomRect();\r\n }\r\n if (!domRect) {\r\n // no dom rect available, return.\r\n return;\r\n }\r\n const rect = new _Rect__WEBPACK_IMPORTED_MODULE_9__.Rect(0, 0, domRect.width, domRect.height);\r\n if (!rect.equals(this.state.rect) && rect.width !== 0 && rect.height !== 0) {\r\n this.setState({ rect });\r\n }\r\n };\r\n /** @internal */\r\n this.updateLayoutMetrics = () => {\r\n if (this.findHeaderBarSizeRef.current) {\r\n const headerBarSize = this.findHeaderBarSizeRef.current.getBoundingClientRect().height;\r\n if (headerBarSize !== this.state.calculatedHeaderBarSize) {\r\n this.setState({ calculatedHeaderBarSize: headerBarSize });\r\n }\r\n }\r\n if (this.findTabBarSizeRef.current) {\r\n const tabBarSize = this.findTabBarSizeRef.current.getBoundingClientRect().height;\r\n if (tabBarSize !== this.state.calculatedTabBarSize) {\r\n this.setState({ calculatedTabBarSize: tabBarSize });\r\n }\r\n }\r\n if (this.findBorderBarSizeRef.current) {\r\n const borderBarSize = this.findBorderBarSizeRef.current.getBoundingClientRect().height;\r\n if (borderBarSize !== this.state.calculatedBorderBarSize) {\r\n this.setState({ calculatedBorderBarSize: borderBarSize });\r\n }\r\n }\r\n };\r\n /** @internal */\r\n this.getClassName = (defaultClassName) => {\r\n if (this.props.classNameMapper === undefined) {\r\n return defaultClassName;\r\n }\r\n else {\r\n return this.props.classNameMapper(defaultClassName);\r\n }\r\n };\r\n /** @internal */\r\n this.onCloseWindow = (id) => {\r\n this.doAction(_model_Actions__WEBPACK_IMPORTED_MODULE_4__.Actions.unFloatTab(id));\r\n try {\r\n this.props.model.getNodeById(id)._setWindow(undefined);\r\n }\r\n catch (e) {\r\n // catch incase it was a model change\r\n }\r\n };\r\n /** @internal */\r\n this.onSetWindow = (id, window) => {\r\n this.props.model.getNodeById(id)._setWindow(window);\r\n };\r\n /** @internal */\r\n this.onCancelAdd = () => {\r\n var _a, _b;\r\n const rootdiv = this.selfRef.current;\r\n if (rootdiv && this.dragDiv) {\r\n rootdiv.removeChild(this.dragDiv);\r\n }\r\n this.dragDiv = undefined;\r\n this.hidePortal();\r\n if (this.fnNewNodeDropped != null) {\r\n this.fnNewNodeDropped();\r\n this.fnNewNodeDropped = undefined;\r\n }\r\n try {\r\n (_b = (_a = this.customDrop) === null || _a === void 0 ? void 0 : _a.invalidated) === null || _b === void 0 ? void 0 : _b.call(_a);\r\n }\r\n catch (e) {\r\n console.error(e);\r\n }\r\n _DragDrop__WEBPACK_IMPORTED_MODULE_3__.DragDrop.instance.hideGlass();\r\n this.newTabJson = undefined;\r\n this.customDrop = undefined;\r\n };\r\n /** @internal */\r\n this.onCancelDrag = (wasDragging) => {\r\n var _a, _b;\r\n if (wasDragging) {\r\n const rootdiv = this.selfRef.current;\r\n const outlineDiv = this.outlineDiv;\r\n if (rootdiv && outlineDiv) {\r\n try {\r\n rootdiv.removeChild(outlineDiv);\r\n }\r\n catch (e) { }\r\n }\r\n const dragDiv = this.dragDiv;\r\n if (rootdiv && dragDiv) {\r\n try {\r\n rootdiv.removeChild(dragDiv);\r\n }\r\n catch (e) { }\r\n }\r\n this.dragDiv = undefined;\r\n this.hidePortal();\r\n this.setState({ showEdges: false });\r\n if (this.fnNewNodeDropped != null) {\r\n this.fnNewNodeDropped();\r\n this.fnNewNodeDropped = undefined;\r\n }\r\n try {\r\n (_b = (_a = this.customDrop) === null || _a === void 0 ? void 0 : _a.invalidated) === null || _b === void 0 ? void 0 : _b.call(_a);\r\n }\r\n catch (e) {\r\n console.error(e);\r\n }\r\n _DragDrop__WEBPACK_IMPORTED_MODULE_3__.DragDrop.instance.hideGlass();\r\n this.newTabJson = undefined;\r\n this.customDrop = undefined;\r\n }\r\n this.setState({ showHiddenBorder: _DockLocation__WEBPACK_IMPORTED_MODULE_2__.DockLocation.CENTER });\r\n };\r\n /** @internal */\r\n this.onDragDivMouseDown = (event) => {\r\n event.preventDefault();\r\n this.dragStart(event, this.dragDivText, _model_TabNode__WEBPACK_IMPORTED_MODULE_7__.TabNode._fromJson(this.newTabJson, this.props.model, false), true, undefined, undefined);\r\n };\r\n /** @internal */\r\n this.dragStart = (event, dragDivText, node, allowDrag, onClick, onDoubleClick) => {\r\n var _a, _b;\r\n if (!allowDrag) {\r\n _DragDrop__WEBPACK_IMPORTED_MODULE_3__.DragDrop.instance.startDrag(event, undefined, undefined, undefined, undefined, onClick, onDoubleClick, this.currentDocument, (_a = this.selfRef.current) !== null && _a !== void 0 ? _a : undefined);\r\n }\r\n else {\r\n this.dragNode = node;\r\n this.dragDivText = dragDivText;\r\n _DragDrop__WEBPACK_IMPORTED_MODULE_3__.DragDrop.instance.startDrag(event, this.onDragStart, this.onDragMove, this.onDragEnd, this.onCancelDrag, onClick, onDoubleClick, this.currentDocument, (_b = this.selfRef.current) !== null && _b !== void 0 ? _b : undefined);\r\n }\r\n };\r\n /** @internal */\r\n this.dragRectRender = (text, node, json, onRendered) => {\r\n let content;\r\n if (text !== undefined) {\r\n content = react__WEBPACK_IMPORTED_MODULE_0__.createElement(\"div\", { style: { whiteSpace: \"pre\" } }, text.replace(\"<br>\", \"\\n\"));\r\n }\r\n else {\r\n if (node && node instanceof _model_TabNode__WEBPACK_IMPORTED_MODULE_7__.TabNode) {\r\n content = (react__WEBPACK_IMPORTED_MODULE_0__.createElement(_TabButtonStamp__WEBPACK_IMPORTED_MODULE_20__.TabButtonStamp, { node: node, layout: this, iconFactory: this.props.iconFactory, titleFactory: this.props.titleFactory }));\r\n }\r\n }\r\n if (this.props.onRenderDragRect !== undefined) {\r\n const customContent = this.props.onRenderDragRect(content, node, json);\r\n if (customContent !== undefined) {\r\n content = customContent;\r\n }\r\n }\r\n // hide div until the render is complete\r\n this.dragRectRendered = false;\r\n const dragDiv = this.dragDiv;\r\n if (dragDiv) {\r\n dragDiv.style.visibility = \"hidden\";\r\n this.showPortal(react__WEBPACK_IMPORTED_MODULE_0__.createElement(DragRectRenderWrapper\r\n // wait for it to be rendered\r\n , { \r\n // wait for it to be rendered\r\n onRendered: () => {\r\n this.dragRectRendered = true;\r\n onRendered === null || onRendered === void 0 ? void 0 : onRendered();\r\n } }, content), dragDiv);\r\n }\r\n };\r\n /** @internal */\r\n this.showPortal = (control, element) => {\r\n const portal = (0,react_dom__WEBPACK_IMPORTED_MODULE_1__.createPortal)(control, element);\r\n this.setState({ portal });\r\n };\r\n /** @internal */\r\n this.hidePortal = () => {\r\n this.setState({ portal: undefined });\r\n };\r\n /** @internal */\r\n this.onDragStart = () => {\r\n var _a;\r\n this.dropInfo = undefined;\r\n this.customDrop = undefined;\r\n const rootdiv = this.selfRef.current;\r\n this.outlineDiv = this.currentDocument.createElement(\"div\");\r\n this.outlineDiv.className = this.getClassName(_Types__WEBPACK_IMPORTED_MODULE_10__.CLASSES.FLEXLAYOUT__OUTLINE_RECT);\r\n this.outlineDiv.style.visibility = \"hidden\";\r\n if (rootdiv) {\r\n rootdiv.appendChild(this.outlineDiv);\r\n }\r\n if (this.dragDiv == null) {\r\n this.dragDiv = this.currentDocument.createElement(\"div\");\r\n this.dragDiv.className = this.getClassName(_Types__WEBPACK_IMPORTED_MODULE_10__.CLASSES.FLEXLAYOUT__DRAG_RECT);\r\n this.dragDiv.setAttribute(\"data-layout-path\", \"/drag-rectangle\");\r\n this.dragRectRender(this.dragDivText, this.dragNode, this.newTabJson);\r\n if (rootdiv) {\r\n rootdiv.appendChild(this.dragDiv);\r\n }\r\n }\r\n // add edge indicators\r\n if (this.props.model.getMaximizedTabset() === undefined) {\r\n this.setState({ showEdges: this.props.model.isEnableEdgeDock() });\r\n }\r\n if (this.dragNode && this.outlineDiv && this.dragNode instanceof _model_TabNode__WEBPACK_IMPORTED_MODULE_7__.TabNode && this.dragNode.getTabRect() !== undefined) {\r\n (_a = this.dragNode.getTabRect()) === null || _a === void 0 ? void 0 : _a.positionElement(this.outlineDiv);\r\n }\r\n this.firstMove = true;\r\n return true;\r\n };\r\n /** @internal */\r\n this.onDragMove = (event) => {\r\n var _a, _b, _c, _d, _e, _f, _g;\r\n if (this.firstMove === false) {\r\n const speed = this.props.model._getAttribute(\"tabDragSpeed\");\r\n if (this.outlineDiv) {\r\n this.outlineDiv.style.transition = `top ${speed}s, left ${speed}s, width ${speed}s, height ${speed}s`;\r\n }\r\n }\r\n this.firstMove = false;\r\n const clientRect = (_a = this.selfRef.current) === null || _a === void 0 ? void 0 : _a.getBoundingClientRect();\r\n const pos = {\r\n x: event.clientX - ((_b = clientRect === null || clientRect === void 0 ? void 0 : clientRect.left) !== null && _b !== void 0 ? _b : 0),\r\n y: event.clientY - ((_c = clientRect === null || clientRect === void 0 ? void 0 : clientRect.top) !== null && _c !== void 0 ? _c : 0),\r\n };\r\n this.checkForBorderToShow(pos.x, pos.y);\r\n // keep it between left & right\r\n const dragRect = (_e = (_d = this.dragDiv) === null || _d === void 0 ? void 0 : _d.getBoundingClientRect()) !== null && _e !== void 0 ? _e : new DOMRect(0, 0, 100, 100);\r\n let newLeft = pos.x - dragRect.width / 2;\r\n if (newLeft + dragRect.width > ((_f = clientRect === null || clientRect === void 0 ? void 0 : clientRect.width) !== null && _f !== void 0 ? _f : 0)) {\r\n newLeft = ((_g = clientRect === null || clientRect === void 0 ? void 0 : clientRect.width) !== null && _g !== void 0 ? _g : 0) - dragRect.width;\r\n }\r\n newLeft = Math.max(0, newLeft);\r\n if (this.dragDiv) {\r\n this.dragDiv.style.left = newLeft + \"px\";\r\n this.dragDiv.style.top = pos.y + 5 + \"px\";\r\n if (this.dragRectRendered && this.dragDiv.style.visibility === \"hidden\") {\r\n // make visible once the drag rect has been rendered\r\n this.dragDiv.style.visibility = \"visible\";\r\n }\r\n }\r\n let dropInfo = this.props.model._findDropTargetNode(this.dragNode, pos.x, pos.y);\r\n if (dropInfo) {\r\n if (this.props.onTabDrag) {\r\n this.handleCustomTabDrag(dropInfo, pos, event);\r\n }\r\n else {\r\n this.dropInfo = dropInfo;\r\n if (this.outlineDiv) {\r\n this.outlineDiv.className = this.getClassName(dropInfo.className);\r\n dropInfo.rect.positionElement(this.outlineDiv);\r\n this.outlineDiv.style.visibility = \"visible\";\r\n }\r\n }\r\n }\r\n };\r\n /** @internal */\r\n this.onDragEnd = (event) => {\r\n const rootdiv = this.selfRef.current;\r\n if (rootdiv) {\r\n if (this.outlineDiv) {\r\n rootdiv.removeChild(this.outlineDiv);\r\n }\r\n if (this.dragDiv) {\r\n rootdiv.removeChild(this.dragDiv);\r\n }\r\n }\r\n this.dragDiv = undefined;\r\n this.hidePortal();\r\n this.setState({ showEdges: false });\r\n _DragDrop__WEBPACK_IMPORTED_MODULE_3__.DragDrop.instance.hideGlass();\r\n if (this.dropInfo) {\r\n if (this.customDrop) {\r\n this.newTabJson = undefined;\r\n try {\r\n const { callback, dragging, over, x, y, location } = this.customDrop;\r\n callback(dragging, over, x, y, location);\r\n if (this.fnNewNodeDropped != null) {\r\n this.fnNewNodeDropped();\r\n this.fnNewNodeDropped = undefined;\r\n }\r\n }\r\n catch (e) {\r\n console.error(e);\r\n }\r\n }\r\n else if (this.newTabJson !== undefined) {\r\n const newNode = this.doAction(_model_Actions__WEBPACK_IMPORTED_MODULE_4__.Actions.addNode(this.newTabJson, this.dropInfo.node.getId(), this.dropInfo.location, this.dropInfo.index));\r\n if (this.fnNewNodeDropped != null) {\r\n this.fnNewNodeDropped(newNode, event);\r\n this.fnNewNodeDropped = undefined;\r\n }\r\n this.newTabJson = undefined;\r\n }\r\n else if (this.dragNode !== undefined) {\r\n this.doAction(_model_Actions__WEBPACK_IMPORTED_MODULE_4__.Actions.moveNode(this.dragNode.getId(), this.dropInfo.node.getId(), this.dropInfo.location, this.dropInfo.index));\r\n }\r\n }\r\n this.setState({ showHiddenBorder: _DockLocation__WEBPACK_IMPORTED_MODULE_2__.DockLocation.CENTER });\r\n };\r\n this.props.model._setChangeListener(this.onModelChange);\r\n this.tabIds = [];\r\n this.selfRef = react__WEBPACK_IMPORTED_MODULE_0__.createRef();\r\n this.findHeaderBarSizeRef = react__WEBPACK_IMPORTED_MODULE_0__.createRef();\r\n this.findTabBarSizeRef = react__WEBPACK_IMPORTED_MODULE_0__.createRef();\r\n this.findBorderBarSizeRef = react__WEBPACK_IMPORTED_MODULE_0__.createRef();\r\n this.supportsPopout = props.supportsPopout !== undefined ? props.supportsPopout : defaultSupportsPopout;\r\n this.popoutURL = props.popoutURL ? props.popoutURL : \"popout.html\";\r\n this.icons = Object.assign(Object.assign({}, defaultIcons), props.icons);\r\n this.state = {\r\n rect: new _Rect__WEBPACK_IMPORTED_MODULE_9__.Rect(0, 0, 0, 0),\r\n calculatedHeaderBarSize: 25,\r\n calculatedTabBarSize: 26,\r\n calculatedBorderBarSize: 30,\r\n editingTab: undefined,\r\n showHiddenBorder: _DockLocation__WEBPACK_IMPORTED_MODULE_2__.DockLocation.CENTER,\r\n showEdges: false,\r\n };\r\n this.onDragEnter = this.onDragEnter.bind(this);\r\n }\r\n /** @internal */\r\n styleFont(style) {\r\n if (this.props.font) {\r\n if (this.selfRef.current) {\r\n if (this.props.font.size) {\r\n this.selfRef.current.style.setProperty(\"--font-size\", this.props.font.size);\r\n }\r\n if (this.props.font.family) {\r\n this.selfRef.current.style.setProperty(\"--font-family\", this.props.font.family);\r\n }\r\n }\r\n if (this.props.font.style) {\r\n style.fontStyle = this.props.font.style;\r\n }\r\n if (this.props.font.weight) {\r\n style.fontWeight = this.props.font.weight;\r\n }\r\n }\r\n return style;\r\n }\r\n /** @internal */\r\n doAction(action) {\r\n if (this.props.onAction !== undefined) {\r\n const outcome = this.props.onAction(action);\r\n if (outcome !== undefined) {\r\n return this.props.model.doAction(outcome);\r\n }\r\n return undefined;\r\n }\r\n else {\r\n return this.props.model.doAction(action);\r\n }\r\n }\r\n /** @internal */\r\n componentDidMount() {\r\n this.updateRect();\r\n this.updateLayoutMetrics();\r\n // need to re-render if size changes\r\n this.currentDocument = this.selfRef.current.ownerDocument;\r\n this.currentWindow = this.currentDocument.defaultView;\r\n this.resizeObserver = new ResizeObserver(entries => {\r\n this.updateRect(entries[0].contentRect);\r\n });\r\n const selfRefCurr = this.selfRef.current;\r\n if (selfRefCurr) {\r\n this.resizeObserver.observe(selfRefCurr);\r\n }\r\n }\r\n /** @internal */\r\n componentDidUpdate() {\r\n this.updateLayoutMetrics();\r\n if (this.props.model !== this.previousModel) {\r\n if (this.previousModel !== undefined) {\r\n this.previousModel._setChangeListener(undefined); // stop listening to old model\r\n }\r\n this.props.model._setChangeListener(this.onModelChange);\r\n this.previousModel = this.props.model;\r\n }\r\n // console.log(\"Layout time: \" + this.layoutTime + \"ms Render time: \" + (Date.now() - this.start) + \"ms\");\r\n }\r\n /** @internal */\r\n getCurrentDocument() {\r\n return this.currentDocument;\r\n }\r\n /** @internal */\r\n getDomRect() {\r\n var _a;\r\n return (_a = this.selfRef.current) === null || _a === void 0 ? void 0 : _a.getBoundingClientRect();\r\n }\r\n /** @internal */\r\n getRootDiv() {\r\n return this.selfRef.current;\r\n }\r\n /** @internal */\r\n isSupportsPopout() {\r\n return this.supportsPopout;\r\n }\r\n /** @internal */\r\n isRealtimeResize() {\r\n var _a;\r\n return (_a = this.props.realtimeResize) !== null && _a !== void 0 ? _a : false;\r\n }\r\n /** @internal */\r\n onTabDrag(...args) {\r\n var _a, _b;\r\n return (_b = (_a = this.props).onTabDrag) === null || _b === void 0 ? void 0 : _b.call(_a, ...args);\r\n }\r\n /** @internal */\r\n getPopoutURL() {\r\n return this.popoutURL;\r\n }\r\n /** @internal */\r\n componentWillUnmount() {\r\n var _a;\r\n const selfRefCurr = this.selfRef.current;\r\n if (selfRefCurr) {\r\n (_a = this.resizeObserver) === null || _a === void 0 ? void 0 : _a.unobserve(selfRefCurr);\r\n }\r\n }\r\n /** @internal */\r\n setEditingTab(tabNode) {\r\n this.setState({ editingTab: tabNode });\r\n }\r\n /** @internal */\r\n getEditingTab() {\r\n return this.state.editingTab;\r\n }\r\n /** @internal */\r\n render() {\r\n // first render will be used to find the size (via selfRef)\r\n if (!this.selfRef.current) {\r\n return (react__WEBPACK_IMPORTED_MODULE_0__.createElement(\"div\", { ref: this.selfRef, className: this.getClassName(_Types__WEBPACK_IMPORTED_MODULE_10__.CLASSES.FLEXLAYOUT__LAYOUT) }, this.metricsElements()));\r\n }\r\n this.props.model._setPointerFine(window && window.matchMedia && window.matchMedia(\"(pointer: fine)\").matches);\r\n // this.start = Date.now();\r\n const borderComponents = [];\r\n const tabSetComponents = [];\r\n const floatingWindows = [];\r\n const tabComponents = {};\r\n const splitterComponents = [];\r\n const metrics = {\r\n headerBarSize: this.state.calculatedHeaderBarSize,\r\n tabBarSize: this.state.calculatedTabBarSize,\r\n borderBarSize: this.state.calculatedBorderBarSize\r\n };\r\n this.props.model._setShowHiddenBorder(this.state.showHiddenBorder);\r\n this.centerRect = this.props.model._layout(this.state.rect, metrics);\r\n this.renderBorder(this.props.model.getBorderSet(), borderComponents, tabComponents, floatingWindows, splitterComponents);\r\n this.renderChildren(\"\", this.props.model.getRoot(), tabSetComponents, tabComponents, floatingWindows, splitterComponents);\r\n const nextTopIds = [];\r\n const nextTopIdsMap = {};\r\n // Keep any previous tabs in the same DOM order as before, removing any that have been deleted\r\n for (const t of this.tabIds) {\r\n if (tabComponents[t]) {\r\n nextTopIds.push(t);\r\n nextTopIdsMap[t] = t;\r\n }\r\n }\r\n this.tabIds = nextTopIds;\r\n // Add tabs that have been added to the DOM\r\n for (const t of Object.keys(tabComponents)) {\r\n if (!nextTopIdsMap[t]) {\r\n this.tabIds.push(t);\r\n }\r\n }\r\n const edges = [];\r\n if (this.state.showEdges) {\r\n const r = this.centerRect;\r\n const length = this.edgeRectLength;\r\n const width = this.edgeRectWidth;\r\n const offset = this.edgeRectLength / 2;\r\n const className = this.getClassName(_Types__WEBPACK_IMPORTED_MODULE_10__.CLASSES.FLEXLAYOUT__EDGE_RECT);\r\n const radius = 50;\r\n edges.push(react__WEBPACK_IMPORTED_MODULE_0__.createElement(\"div\", { key: \"North\", style: { top: r.y, left: r.x + r.width / 2 - offset, width: length, height: width, borderBottomLeftRadius: radius, borderBottomRightRadius: radius }, className: className + \" \" + this.getClassName(_Types__WEBPACK_IMPORTED_MODULE_10__.CLASSES.FLEXLAYOUT__EDGE_RECT_TOP) }));\r\n edges.push(react__WEBPACK_IMPORTED_MODULE_0__.createElement(\"div\", { key: \"West\", style: { top: r.y + r.height / 2 - offset, left: r.x, width: width, height: length, borderTopRightRadius: radius, borderBottomRightRadius: radius }, className: className + \" \" + this.getClassName(_Types__WEBPACK_IMPORTED_MODULE_10__.CLASSES.FLEXLAYOUT__EDGE_RECT_LEFT) }));\r\n edges.push(react__WEBPACK_IMPORTED_MODULE_0__.createElement(\"div\", { key: \"South\", style: { top: r.y + r.height - width, left: r.x + r.width / 2 - offset, width: length, height: width, borderTopLeftRadius: radius, borderTopRightRadius: radius }, className: className + \" \" + this.getClassName(_Types__WEBPACK_IMPORTED_MODULE_10__.CLASSES.FLEXLAYOUT__EDGE_RECT_BOTTOM) }));\r\n edges.push(react__WEBPACK_IMPORTED_MODULE_0__.createElement(\"div\", { key: \"East\", style: { top: r.y + r.height / 2 - offset, left: r.x + r.width - width, width: width, height: length, borderTopLeftRadius: radius, borderBottomLeftRadius: radius }, className: className + \" \" + this.getClassName(_Types__WEBPACK_IMPORTED_MODULE_10__.CLASSES.FLEXLAYOUT__EDGE_RECT_RIGHT) }));\r\n }\r\n // this.layoutTime = (Date.now() - this.start);\r\n return (react__WEBPACK_IMPORTED_MODULE_0__.createElement(\"div\", { ref: this.selfRef, className: this.getClassName(_Types__WEBPACK_IMPORTED_MODULE_10__.CLASSES.FLEXLAYOUT__LAYOUT), onDragEnter: this.props.onExternalDrag ? this.onDragEnter : undefined },\r\n tabSetComponents,\r\n this.tabIds.map((t) => {\r\n return tabComponents[t];\r\n }),\r\n borderComponents,\r\n splitterComponents,\r\n edges,\r\n floatingWindows,\r\n this.metricsElements(),\r\n this.state.portal));\r\n }\r\n /** @internal */\r\n metricsElements() {\r\n // used to measure the tab and border tab sizes\r\n const fontStyle = this.styleFont({ visibility: \"hidden\" });\r\n return (react__WEBPACK_IMPORTED_MODULE_0__.createElement(react__WEBPACK_IMPORTED_MODULE_0__.Fragment, null,\r\n react__WEBPACK_IMPORTED_MODULE_0__.createElement(\"div\", { key: \"findHeaderBarSize\", ref: this.findHeaderBarSizeRef, style: fontStyle, className: this.getClassName(_Types__WEBPACK_IMPORTED_MODULE_10__.CLASSES.FLEXLAYOUT__TABSET_HEADER_SIZER) }, \"FindHeaderBarSize\"),\r\n react__WEBPACK_IMPORTED_MODULE_0__.createElement(\"div\", { key: \"findTabBarSize\", ref: this.findTabBarSizeRef, style: fontStyle, className: this.getClassName(_Types__WEBPACK_IMPORTED_MODULE_10__.CLASSES.FLEXLAYOUT__TABSET_SIZER) }, \"FindTabBarSize\"),\r\n react__WEBPACK_IMPORTED_MODULE_0__.createElement(\"div\", { key: \"findBorderBarSize\", ref: this.findBorderBarSizeRef, style: fontStyle, className: this.getClassName(_Types__WEBPACK_IMPORTED_MODULE_10__.CLASSES.FLEXLAYOUT__BORDER_SIZER) }, \"FindBorderBarSize\")));\r\n }\r\n /** @internal */\r\n renderBorder(borderSet, borderComponents, tabComponents, floatingWindows, splitterComponents) {\r\n for (const border of borderSet.getBorders()) {\r\n const borderPath = `/border/${border.getLocation().getName()}`;\r\n if (border.isShowing()) {\r\n borderComponents.push(react__WEBPACK_IMPORTED_MODULE_0__.createElement(_BorderTabSet__WEBPACK_IMPORTED_MODULE_11__.BorderTabSet, { key: `border_${border.getLocation().getName()}`, path: borderPath, border: border, layout: this, iconFactory: this.props.iconFactory, titleFactory: this.props.titleFactory, icons: this.icons }));\r\n const drawChildren = border._getDrawChildren();\r\n let i = 0;\r\n let tabCount = 0;\r\n for (const child of drawChildren) {\r\n if (child instanceof _model_SplitterNode__WEBPACK_IMPORTED_MODULE_6__.SplitterNode) {\r\n let path = borderPath + \"/s\";\r\n splitterComponents.push(react__WEBPACK_IMPORTED_MODULE_0__.createElement(_Splitter__WEBPACK_IMPORTED_MODULE_12__.Splitter, { key: child.getId(), layout: this, node: child, path: path }));\r\n }\r\n else if (child instanceof _model_TabNode__WEBPACK_IMPORTED_MODULE_7__.TabNode) {\r\n let path = borderPath + \"/t\" + tabCount++;\r\n if (this.supportsPopout && child.isFloating()) {\r\n const rect = this._getScreenRect(child);\r\n const tabBorderWidth = child._getAttr(\"borderWidth\");\r\n const tabBorderHeight = child._getAttr(\"borderHeight\");\r\n if (rect) {\r\n if (tabBorderWidth !== -1 && border.getLocation().getOrientation() === _Orientation__WEBPACK_IMPORTED_MODULE_18__.Orientation.HORZ) {\r\n rect.width = tabBorderWidth;\r\n }\r\n else if (tabBorderHeight !== -1 && border.getLocation().getOrientation() === _Orientation__WEBPACK_IMPORTED_MODULE_18__.Orientation.VERT) {\r\n rect.height = tabBorderHeight;\r\n }\r\n }\r\n floatingWindows.push(react__WEBPACK_IMPORTED_MODULE_0__.createElement(_FloatingWindow__WEBPACK_IMPORTED_MODULE_15__.FloatingWindow, { key: child.getId(), url: this.popoutURL, rect: rect, title: child.getName(), id: child.getId(), onSetWindow: this.onSetWindow, onCloseWindow: this.onCloseWindow },\r\n react__WEBPACK_IMPORTED_MODULE_0__.createElement(_FloatingWindowTab__WEBPACK_IMPORTED_MODULE_16__.FloatingWindowTab, { layout: this, node: child, factory: this.props.factory })));\r\n tabComponents[child.getId()] = react__WEBPACK_IMPORTED_MODULE_0__.createElement(_TabFloating__WEBPACK_IMPORTED_MODULE_17__.TabFloating, { key: child.getId(), layout: this, path: path, node: child, selected: i === border.getSelected() });\r\n }\r\n else {\r\n tabComponents[child.getId()] = react__WEBPACK_IMPORTED_MODULE_0__.createElement(_Tab__WEBPACK_IMPORTED_MODULE_13__.Tab, { key: child.getId(), layout: this, path: path, node: child, selected: i === border.getSelected(), factory: this.props.factory });\r\n }\r\n }\r\n i++;\r\n }\r\n }\r\n }\r\n }\r\n /** @internal */\r\n renderChildren(path, node, tabSetComponents, tabComponents, floatingWindows, splitterComponents) {\r\n const drawChildren = node._getDrawChildren();\r\n let splitterCount = 0;\r\n let tabCount = 0;\r\n let rowCount = 0;\r\n for (const child of drawChildren) {\r\n if (child instanceof _model_SplitterNode__WEBPACK_IMPORTED_MODULE_6__.SplitterNode) {\r\n const newPath = path + \"/s\" + (splitterCount++);\r\n splitterComponents.push(react__WEBPACK_IMPORTED_MODULE_0__.createElement(_Splitter__WEBPACK_IMPORTED_MODULE_12__.Splitter, { key: child.getId(), layout: this, path: newPath, node: child }));\r\n }\r\n else if (child instanceof _model_TabSetNode__WEBPACK_IMPORTED_MODULE_8__.TabSetNode) {\r\n const newPath = path + \"/ts\" + (rowCount++);\r\n tabSetComponents.push(react__WEBPACK_IMPORTED_MODULE_0__.createElement(_TabSet__WEBPACK_IMPORTED_MODULE_14__.TabSet, { key: child.getId(), layout: this, path: newPath, node: child, iconFactory: this.props.iconFactory, titleFactory: this.props.titleFactory, icons: this.icons }));\r\n this.renderChildren(newPath, child, tabSetComponents, tabComponents, floatingWindows, splitterComponents);\r\n }\r\n else if (child instanceof _model_TabNode__WEBPACK_IMPORTED_MODULE_7__.TabNode) {\r\n const newPath = path + \"/t\" + (tabCount++);\r\n const selectedTab = child.getParent().getChildren()[child.getParent().getSelected()];\r\n if (selectedTab === undefined) {\r\n // this should not happen!\r\n console.warn(\"undefined selectedTab should not happen\");\r\n }\r\n if (this.supportsPopout && child.isFloating()) {\r\n const rect = this._getScreenRect(child);\r\n floatingWindows.push(react__WEBPACK_IMPORTED_MODULE_0__.createElement(_FloatingWindow__WEBPACK_IMPORTED_MODULE_15__.FloatingWindow, { key: child.getId(), url: this.popoutURL, rect: rect, title: child.getName(), id: child.getId(), onSetWindow: this.onSetWindow, onCloseWindow: this.onCloseWindow },\r\n react__WEBPACK_IMPORTED_MODULE_0__.createElement(_FloatingWindowTab__WEBPACK_IMPORTED_MODULE_16__.FloatingWindowTab, { layout: this, node: child, factory: this.props.factory })));\r\n tabComponents[child.getId()] = react__WEBPACK_IMPORTED_MODULE_0__.createElement(_TabFloating__WEBPACK_IMPORTED_MODULE_17__.TabFloating, { key: child.getId(), layout: this, path: newPath, node: child, selected: child === selectedTab });\r\n }\r\n else {\r\n tabComponents[child.getId()] = react__WEBPACK_IMPORTED_MODULE_0__.createElement(_Tab__WEBPACK_IMPORTED_MODULE_13__.Tab, { key: child.getId(), layout: this, path: newPath, node: child, selected: child === selectedTab, factory: this.props.factory });\r\n }\r\n }\r\n else {\r\n // is row\r\n const newPath = path + ((child.getOrientation() === _Orientation__WEBPACK_IMPORTED_MODULE_18__.Orientation.HORZ) ? \"/r\" : \"/c\") + (rowCount++);\r\n this.renderChildren(newPath, child, tabSetComponents, tabComponents, floatingWindows, splitterComponents);\r\n }\r\n }\r\n }\r\n /** @internal */\r\n _getScreenRect(node) {\r\n var _a;\r\n const rect = node.getRect().clone();\r\n const bodyRect = (_a = this.selfRef.current) === null || _a === void 0 ? void 0 : _a.getBoundingClientRect();\r\n if (!bodyRect) {\r\n return null;\r\n }\r\n const navHeight = Math.min(80, this.currentWindow.outerHeight - this.currentWindow.innerHeight);\r\n const navWidth = Math.min(80, this.currentWindow.outerWidth - this.currentWindow.innerWidth);\r\n rect.x = rect.x + bodyRect.x + this.currentWindow.screenX + navWidth;\r\n rect.y = rect.y + bodyRect.y + this.currentWindow.screenY + navHeight;\r\n return rect;\r\n }\r\n /**\r\n * Adds a new tab to the given tabset\r\n * @param tabsetId the id of the tabset where the new tab will be added\r\n * @param json the json for the new tab node\r\n * @returns the added tab node or undefined\r\n */\r\n addTabToTabSet(tabsetId, json) {\r\n const tabsetNode = this.props.model.getNodeById(tabsetId);\r\n if (tabsetNode !== undefined) {\r\n const node = this.doAction(_model_Actions__WEBPACK_IMPORTED_MODULE_4__.Actions.addNode(json, tabsetId, _DockLocation__WEBPACK_IMPORTED_MODULE_2__.DockLocation.CENTER, -1));\r\n return node;\r\n }\r\n return undefined;\r\n }\r\n /**\r\n * Adds a new tab to the active tabset (if there is one)\r\n * @param json the json for the new tab node\r\n * @returns the added tab node or undefined\r\n */\r\n addTabToActiveTabSet(json) {\r\n const tabsetNode = this.props.model.getActiveTabset();\r\n if (tabsetNode !== undefined) {\r\n const node = this.doAction(_model_Actions__WEBPACK_IMPORTED_MODULE_4__.Actions.addNode(json, tabsetNode.getId(), _DockLocation__WEBPACK_IMPORTED_MODULE_2__.DockLocation.CENTER, -1));\r\n return node;\r\n }\r\n return undefined;\r\n }\r\n /**\r\n * Adds a new tab by dragging a labeled panel to the drop location, dragging starts immediatelly\r\n * @param dragText the text to show on the drag panel\r\n * @param json the json for the new tab node\r\n * @param onDrop a callback to call when the drag is complete (node and event will be undefined if the drag was cancelled)\r\n */\r\n addTabWithDragAndDrop(dragText, json, onDrop) {\r\n this.fnNewNodeDropped = onDrop;\r\n this.newTabJson = json;\r\n this.dragStart(undefined, dragText, _model_TabNode__WEBPACK_IMPORTED_MODULE_7__.TabNode._fromJson(json, this.props.model, false), true, undefined, undefined);\r\n }\r\n /**\r\n * Move a tab/tabset using drag and drop\r\n * @param node the tab or tabset to drag\r\n * @param dragText the text to show on the drag panel\r\n */\r\n moveTabWithDragAndDrop(node, dragText) {\r\n this.dragStart(undefined, dragText, node, true, undefined, undefined);\r\n }\r\n /**\r\n * Adds a new tab by dragging a labeled panel to the drop location, dragging starts when you\r\n * mouse down on the panel\r\n *\r\n * @param dragText the text to show on the drag panel\r\n * @param json the json for the new tab node\r\n * @param onDrop a callback to call when the drag is complete (node and event will be undefined if the drag was cancelled)\r\n */\r\n addTabWithDragAndDropIndirect(dragText, json, onDrop) {\r\n this.fnNewNodeDropped = onDrop;\r\n this.newTabJson = json;\r\n _DragDrop__WEBPACK_IMPORTED_MODULE_3__.DragDrop.instance.addGlass(this.onCancelAdd);\r\n this.dragDivText = dragText;\r\n this.dragDiv = this.currentDocument.createElement(\"div\");\r\n this.dragDiv.className = this.getClassName(_Types__WEBPACK_IMPORTED_MODULE_10__.CLASSES.FLEXLAYOUT__DRAG_RECT);\r\n this.dragDiv.addEventListener(\"mousedown\", this.onDragDivMouseDown);\r\n this.dragDiv.addEventListener(\"touchstart\", this.onDragDivMouseDown, { passive: false });\r\n this.dragRectRender(this.dragDivText, undefined, this.newTabJson, () => {\r\n if (this.dragDiv) {\r\n // now it's been rendered into the dom it can be centered\r\n this.dragDiv.style.visibility = \"visible\";\r\n const domRect = this.dragDiv.getBoundingClientRect();\r\n const r = new _Rect__WEBPACK_IMPORTED_MODULE_9__.Rect(0, 0, domRect === null || domRect === void 0 ? void 0 : domRect.width, domRect === null || domRect === void 0 ? void 0 : domRect.height);\r\n r.centerInRect(this.state.rect);\r\n this.dragDiv.setAttribute(\"data-layout-path\", \"/drag-rectangle\");\r\n this.dragDiv.style.left = r.x + \"px\";\r\n this.dragDiv.style.top = r.y + \"px\";\r\n }\r\n });\r\n const rootdiv = this.selfRef.current;\r\n rootdiv.appendChild(this.dragDiv);\r\n }\r\n /** @internal */\r\n handleCustomTabDrag(dropInfo, pos, event) {\r\n var _a, _b, _c;\r\n let invalidated = (_a = this.customDrop) === null || _a === void 0 ? void 0 : _a.invalidated;\r\n const currentCallback = (_b = this.customDrop) === null || _b === void 0 ? void 0 : _b.callback;\r\n this.customDrop = undefined;\r\n const dragging = this.newTabJson || (this.dragNode instanceof _model_TabNode__WEBPACK_IMPORTED_MODULE_7__.TabNode ? this.dragNode : undefined);\r\n if (dragging && (dropInfo.node instanceof _model_TabSetNode__WEBPACK_IMPORTED_MODULE_8__.TabSetNode || dropInfo.node instanceof _model_BorderNode__WEBPACK_IMPORTED_MODULE_5__.BorderNode) && dropInfo.index === -1) {\r\n const selected = dropInfo.node.getSelectedNode();\r\n const tabRect = selected === null || selected === void 0 ? void 0 : selected.getRect();\r\n if (selected && (tabRect === null || tabRect === void 0 ? void 0 : tabRect.contains(pos.x, pos.y))) {\r\n let customDrop = undefined;\r\n try {\r\n const dest = this.onTabDrag(dragging, selected, pos.x - tabRect.x, pos.y - tabRect.y, dropInfo.location, () => this.onDragMove(event));\r\n if (dest) {\r\n customDrop = {\r\n rect: new _Rect__WEBPACK_IMPORTED_MODULE_9__.Rect(dest.x + tabRect.x, dest.y + tabRect.y, dest.width, dest.height),\r\n callback: dest.callback,\r\n invalidated: dest.invalidated,\r\n dragging: dragging,\r\n over: selected,\r\n x: pos.x - tabRect.x,\r\n y: pos.y - tabRect.y,\r\n location: dropInfo.location,\r\n cursor: dest.cursor\r\n };\r\n }\r\n }\r\n catch (e) {\r\n console.error(e);\r\n }\r\n if ((customDrop === null || customDrop === void 0 ? void 0 : customDrop.callback) === currentCallback) {\r\n invalidated = undefined;\r\n }\r\n this.customDrop = customDrop;\r\n }\r\n }\r\n this.dropInfo = dropInfo;\r\n if (this.outlineDiv) {\r\n this.outlineDiv.className = this.getClassName(this.customDrop ? _Types__WEBPACK_IMPORTED_MODULE_10__.CLASSES.FLEXLAYOUT__OUTLINE_RECT : dropInfo.className);\r\n if (this.customDrop) {\r\n this.customDrop.rect.positionElement(this.outlineDiv);\r\n }\r\n else {\r\n dropInfo.rect.positionElement(this.outlineDiv);\r\n }\r\n }\r\n _DragDrop__WEBPACK_IMPORTED_MODULE_3__.DragDrop.instance.setGlassCursorOverride((_c = this.customDrop) === null || _c === void 0 ? void 0 : _c.cursor);\r\n if (this.outlineDiv) {\r\n this.outlineDiv.style.visibility = \"visible\";\r\n }\r\n try {\r\n invalidated === null || invalidated === void 0 ? void 0 : invalidated();\r\n }\r\n catch (e) {\r\n console.error(e);\r\n }\r\n }\r\n /** @internal */\r\n onDragEnter(event) {\r\n // DragDrop keeps track of number of dragenters minus the number of\r\n // dragleaves. Only start a new drag if there isn't one already.\r\n if (_DragDrop__WEBPACK_IMPORTED_MODULE_3__.DragDrop.instance.isDragging())\r\n return;\r\n const drag = this.props.onExternalDrag(event);\r\n if (drag) {\r\n // Mimic addTabWithDragAndDrop, but pass in DragEvent\r\n this.fnNewNodeDropped = drag.onDrop;\r\n this.newTabJson = drag.json;\r\n this.dragStart(event, drag.dragText, _model_TabNode__WEBPACK_IMPORTED_MODULE_7__.TabNode._fromJson(drag.json, this.props.model, false), true, undefined, undefined);\r\n }\r\n }\r\n /** @internal */\r\n checkForBorderToShow(x, y) {\r\n const r = this.props.model._getOuterInnerRects().outer;\r\n const c = r.getCenter();\r\n const margin = this.edgeRectWidth;\r\n const offset = this.edgeRectLength / 2;\r\n let overEdge = false;\r\n if (this.props.model.isEnableEdgeDock() && this.state.showHiddenBorder === _DockLocation__WEBPACK_IMPORTED_MODULE_2__.DockLocation.CENTER) {\r\n if ((y > c.y - offset && y < c.y + offset) ||\r\n (x > c.x - offset && x < c.x + offset)) {\r\n overEdge = true;\r\n }\r\n }\r\n let location = _DockLocation__WEBPACK_IMPORTED_MODULE_2__.DockLocation.CENTER;\r\n if (!overEdge) {\r\n if (x <= r.x + margin) {\r\n location = _DockLocation__WEBPACK_IMPORTED_MODULE_2__.DockLocation.LEFT;\r\n }\r\n else if (x >= r.getRight() - margin) {\r\n location = _DockLocation__WEBPACK_IMPORTED_MODULE_2__.DockLocation.RIGHT;\r\n }\r\n else if (y <= r.y + margin) {\r\n location = _DockLocation__WEBPACK_IMPORTED_MODULE_2__.DockLocation.TOP;\r\n }\r\n else if (y >= r.getBottom() - margin) {\r\n location = _DockLocation__WEBPACK_IMPORTED_MODULE_2__.DockLocation.BOTTOM;\r\n }\r\n }\r\n if (location !== this.state.showHiddenBorder) {\r\n this.setState({ showHiddenBorder: location });\r\n }\r\n }\r\n /** @internal */\r\n maximize(tabsetNode) {\r\n this.doAction(_model_Actions__WEBPACK_IMPORTED_MODULE_4__.Actions.maximizeToggle(tabsetNode.getId()));\r\n }\r\n /** @internal */\r\n customizeTab(tabNode, renderValues) {\r\n if (this.props.onRenderTab) {\r\n this.props.onRenderTab(tabNode, renderValues);\r\n }\r\n }\r\n /** @internal */\r\n customizeTabSet(tabSetNode, renderValues) {\r\n if (this.props.onRenderTabSet) {\r\n this.props.onRenderTabSet(tabSetNode, renderValues);\r\n }\r\n }\r\n /** @internal */\r\n i18nName(id, param) {\r\n let message;\r\n if (this.props.i18nMapper) {\r\n message = this.props.i18nMapper(id, param);\r\n }\r\n if (message === undefined) {\r\n message = id + (param === undefined ? \"\" : param);\r\n }\r\n return message;\r\n }\r\n /** @internal */\r\n getOnRenderFloatingTabPlaceholder() {\r\n return this.props.onRenderFloatingTabPlaceholder;\r\n }\r\n /** @internal */\r\n getShowOverflowMenu() {\r\n return this.props.onShowOverflowMenu;\r\n }\r\n /** @internal */\r\n getTabSetPlaceHolderCallback() {\r\n return this.props.onTabSetPlaceHolder;\r\n }\r\n /** @internal */\r\n showContextMenu(node, event) {\r\n if (this.props.onContextMenu) {\r\n this.props.onContextMenu(node, event);\r\n }\r\n }\r\n /** @internal */\r\n auxMouseClick(node, event) {\r\n if (this.props.onAuxMouseClick) {\r\n this.props.onAuxMouseClick(node, event);\r\n }\r\n }\r\n}\r\n/** @internal */\r\nconst DragRectRenderWrapper = (props) => {\r\n react__WEBPACK_IMPORTED_MODULE_0__.useEffect(() => {\r\n var _a;\r\n (_a = props.onRendered) === null || _a === void 0 ? void 0 : _a.call(props);\r\n }, [props]);\r\n return (react__WEBPACK_IMPORTED_MODULE_0__.createElement(react__WEBPACK_IMPORTED_MODULE_0__.Fragment, null, props.children));\r\n};\r\n\n\n//# sourceURL=webpack://FlexLayout/./src/view/Layout.tsx?");
349
+ eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpack_require__.d(__webpack_exports__, {\n/* harmony export */ \"Layout\": () => (/* binding */ Layout)\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 _DockLocation__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ../DockLocation */ \"./src/DockLocation.ts\");\n/* harmony import */ var _DragDrop__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! ../DragDrop */ \"./src/DragDrop.ts\");\n/* harmony import */ var _model_Actions__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(/*! ../model/Actions */ \"./src/model/Actions.ts\");\n/* harmony import */ var _model_BorderNode__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__(/*! ../model/BorderNode */ \"./src/model/BorderNode.ts\");\n/* harmony import */ var _model_SplitterNode__WEBPACK_IMPORTED_MODULE_6__ = __webpack_require__(/*! ../model/SplitterNode */ \"./src/model/SplitterNode.ts\");\n/* harmony import */ var _model_TabNode__WEBPACK_IMPORTED_MODULE_7__ = __webpack_require__(/*! ../model/TabNode */ \"./src/model/TabNode.ts\");\n/* harmony import */ var _model_TabSetNode__WEBPACK_IMPORTED_MODULE_8__ = __webpack_require__(/*! ../model/TabSetNode */ \"./src/model/TabSetNode.ts\");\n/* harmony import */ var _Rect__WEBPACK_IMPORTED_MODULE_9__ = __webpack_require__(/*! ../Rect */ \"./src/Rect.ts\");\n/* harmony import */ var _Types__WEBPACK_IMPORTED_MODULE_10__ = __webpack_require__(/*! ../Types */ \"./src/Types.ts\");\n/* harmony import */ var _BorderTabSet__WEBPACK_IMPORTED_MODULE_11__ = __webpack_require__(/*! ./BorderTabSet */ \"./src/view/BorderTabSet.tsx\");\n/* harmony import */ var _Splitter__WEBPACK_IMPORTED_MODULE_12__ = __webpack_require__(/*! ./Splitter */ \"./src/view/Splitter.tsx\");\n/* harmony import */ var _Tab__WEBPACK_IMPORTED_MODULE_13__ = __webpack_require__(/*! ./Tab */ \"./src/view/Tab.tsx\");\n/* harmony import */ var _TabSet__WEBPACK_IMPORTED_MODULE_14__ = __webpack_require__(/*! ./TabSet */ \"./src/view/TabSet.tsx\");\n/* harmony import */ var _FloatingWindow__WEBPACK_IMPORTED_MODULE_15__ = __webpack_require__(/*! ./FloatingWindow */ \"./src/view/FloatingWindow.tsx\");\n/* harmony import */ var _FloatingWindowTab__WEBPACK_IMPORTED_MODULE_16__ = __webpack_require__(/*! ./FloatingWindowTab */ \"./src/view/FloatingWindowTab.tsx\");\n/* harmony import */ var _TabFloating__WEBPACK_IMPORTED_MODULE_17__ = __webpack_require__(/*! ./TabFloating */ \"./src/view/TabFloating.tsx\");\n/* harmony import */ var _Orientation__WEBPACK_IMPORTED_MODULE_18__ = __webpack_require__(/*! ../Orientation */ \"./src/Orientation.ts\");\n/* harmony import */ var _Icons__WEBPACK_IMPORTED_MODULE_19__ = __webpack_require__(/*! ./Icons */ \"./src/view/Icons.tsx\");\n/* harmony import */ var _TabButtonStamp__WEBPACK_IMPORTED_MODULE_20__ = __webpack_require__(/*! ./TabButtonStamp */ \"./src/view/TabButtonStamp.tsx\");\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\nconst defaultIcons = {\r\n close: react__WEBPACK_IMPORTED_MODULE_0__.createElement(_Icons__WEBPACK_IMPORTED_MODULE_19__.CloseIcon, null),\r\n closeTabset: react__WEBPACK_IMPORTED_MODULE_0__.createElement(_Icons__WEBPACK_IMPORTED_MODULE_19__.CloseIcon, null),\r\n popout: react__WEBPACK_IMPORTED_MODULE_0__.createElement(_Icons__WEBPACK_IMPORTED_MODULE_19__.PopoutIcon, null),\r\n maximize: react__WEBPACK_IMPORTED_MODULE_0__.createElement(_Icons__WEBPACK_IMPORTED_MODULE_19__.MaximizeIcon, null),\r\n restore: react__WEBPACK_IMPORTED_MODULE_0__.createElement(_Icons__WEBPACK_IMPORTED_MODULE_19__.RestoreIcon, null),\r\n more: react__WEBPACK_IMPORTED_MODULE_0__.createElement(_Icons__WEBPACK_IMPORTED_MODULE_19__.OverflowIcon, null),\r\n edgeArrow: react__WEBPACK_IMPORTED_MODULE_0__.createElement(_Icons__WEBPACK_IMPORTED_MODULE_19__.EdgeIcon, null)\r\n};\r\n// Popout windows work in latest browsers based on webkit (Chrome, Opera, Safari, latest Edge) and Firefox. They do\r\n// not work on any version if IE or the original Edge browser\r\n// Assume any recent desktop browser not IE or original Edge will work\r\n/** @internal */\r\n// @ts-ignore\r\nconst isIEorEdge = typeof window !== \"undefined\" && (window.document.documentMode || /Edge\\//.test(window.navigator.userAgent));\r\n/** @internal */\r\nconst isDesktop = typeof window !== \"undefined\" && window.matchMedia && window.matchMedia(\"(hover: hover) and (pointer: fine)\").matches;\r\n/** @internal */\r\nconst defaultSupportsPopout = isDesktop && !isIEorEdge;\r\n/**\r\n * A React component that hosts a multi-tabbed layout\r\n */\r\nclass Layout extends react__WEBPACK_IMPORTED_MODULE_0__.Component {\r\n constructor(props) {\r\n super(props);\r\n /** @internal */\r\n this.firstMove = false;\r\n /** @internal */\r\n this.dragRectRendered = true;\r\n /** @internal */\r\n this.dragDivText = undefined;\r\n /** @internal */\r\n this.edgeRectLength = 100;\r\n /** @internal */\r\n this.edgeRectWidth = 10;\r\n /** @internal */\r\n this.onModelChange = (action) => {\r\n this.forceUpdate();\r\n if (this.props.onModelChange) {\r\n this.props.onModelChange(this.props.model, action);\r\n }\r\n };\r\n /** @internal */\r\n this.updateRect = (domRect) => {\r\n if (!domRect) {\r\n domRect = this.getDomRect();\r\n }\r\n if (!domRect) {\r\n // no dom rect available, return.\r\n return;\r\n }\r\n const rect = new _Rect__WEBPACK_IMPORTED_MODULE_9__.Rect(0, 0, domRect.width, domRect.height);\r\n if (!rect.equals(this.state.rect) && rect.width !== 0 && rect.height !== 0) {\r\n this.setState({ rect });\r\n }\r\n };\r\n /** @internal */\r\n this.updateLayoutMetrics = () => {\r\n if (this.findHeaderBarSizeRef.current) {\r\n const headerBarSize = this.findHeaderBarSizeRef.current.getBoundingClientRect().height;\r\n if (headerBarSize !== this.state.calculatedHeaderBarSize) {\r\n this.setState({ calculatedHeaderBarSize: headerBarSize });\r\n }\r\n }\r\n if (this.findTabBarSizeRef.current) {\r\n const tabBarSize = this.findTabBarSizeRef.current.getBoundingClientRect().height;\r\n if (tabBarSize !== this.state.calculatedTabBarSize) {\r\n this.setState({ calculatedTabBarSize: tabBarSize });\r\n }\r\n }\r\n if (this.findBorderBarSizeRef.current) {\r\n const borderBarSize = this.findBorderBarSizeRef.current.getBoundingClientRect().height;\r\n if (borderBarSize !== this.state.calculatedBorderBarSize) {\r\n this.setState({ calculatedBorderBarSize: borderBarSize });\r\n }\r\n }\r\n };\r\n /** @internal */\r\n this.getClassName = (defaultClassName) => {\r\n if (this.props.classNameMapper === undefined) {\r\n return defaultClassName;\r\n }\r\n else {\r\n return this.props.classNameMapper(defaultClassName);\r\n }\r\n };\r\n /** @internal */\r\n this.onCloseWindow = (id) => {\r\n this.doAction(_model_Actions__WEBPACK_IMPORTED_MODULE_4__.Actions.unFloatTab(id));\r\n try {\r\n this.props.model.getNodeById(id)._setWindow(undefined);\r\n }\r\n catch (e) {\r\n // catch incase it was a model change\r\n }\r\n };\r\n /** @internal */\r\n this.onSetWindow = (id, window) => {\r\n this.props.model.getNodeById(id)._setWindow(window);\r\n };\r\n /** @internal */\r\n this.onCancelAdd = () => {\r\n var _a, _b;\r\n const rootdiv = this.selfRef.current;\r\n if (rootdiv && this.dragDiv) {\r\n rootdiv.removeChild(this.dragDiv);\r\n }\r\n this.dragDiv = undefined;\r\n this.hidePortal();\r\n if (this.fnNewNodeDropped != null) {\r\n this.fnNewNodeDropped();\r\n this.fnNewNodeDropped = undefined;\r\n }\r\n try {\r\n (_b = (_a = this.customDrop) === null || _a === void 0 ? void 0 : _a.invalidated) === null || _b === void 0 ? void 0 : _b.call(_a);\r\n }\r\n catch (e) {\r\n console.error(e);\r\n }\r\n _DragDrop__WEBPACK_IMPORTED_MODULE_3__.DragDrop.instance.hideGlass();\r\n this.newTabJson = undefined;\r\n this.customDrop = undefined;\r\n };\r\n /** @internal */\r\n this.onCancelDrag = (wasDragging) => {\r\n var _a, _b;\r\n if (wasDragging) {\r\n const rootdiv = this.selfRef.current;\r\n const outlineDiv = this.outlineDiv;\r\n if (rootdiv && outlineDiv) {\r\n try {\r\n rootdiv.removeChild(outlineDiv);\r\n }\r\n catch (e) { }\r\n }\r\n const dragDiv = this.dragDiv;\r\n if (rootdiv && dragDiv) {\r\n try {\r\n rootdiv.removeChild(dragDiv);\r\n }\r\n catch (e) { }\r\n }\r\n this.dragDiv = undefined;\r\n this.hidePortal();\r\n this.setState({ showEdges: false });\r\n if (this.fnNewNodeDropped != null) {\r\n this.fnNewNodeDropped();\r\n this.fnNewNodeDropped = undefined;\r\n }\r\n try {\r\n (_b = (_a = this.customDrop) === null || _a === void 0 ? void 0 : _a.invalidated) === null || _b === void 0 ? void 0 : _b.call(_a);\r\n }\r\n catch (e) {\r\n console.error(e);\r\n }\r\n _DragDrop__WEBPACK_IMPORTED_MODULE_3__.DragDrop.instance.hideGlass();\r\n this.newTabJson = undefined;\r\n this.customDrop = undefined;\r\n }\r\n this.setState({ showHiddenBorder: _DockLocation__WEBPACK_IMPORTED_MODULE_2__.DockLocation.CENTER });\r\n };\r\n /** @internal */\r\n this.onDragDivMouseDown = (event) => {\r\n event.preventDefault();\r\n this.dragStart(event, this.dragDivText, _model_TabNode__WEBPACK_IMPORTED_MODULE_7__.TabNode._fromJson(this.newTabJson, this.props.model, false), true, undefined, undefined);\r\n };\r\n /** @internal */\r\n this.dragStart = (event, dragDivText, node, allowDrag, onClick, onDoubleClick) => {\r\n var _a, _b;\r\n if (!allowDrag) {\r\n _DragDrop__WEBPACK_IMPORTED_MODULE_3__.DragDrop.instance.startDrag(event, undefined, undefined, undefined, undefined, onClick, onDoubleClick, this.currentDocument, (_a = this.selfRef.current) !== null && _a !== void 0 ? _a : undefined);\r\n }\r\n else {\r\n this.dragNode = node;\r\n this.dragDivText = dragDivText;\r\n _DragDrop__WEBPACK_IMPORTED_MODULE_3__.DragDrop.instance.startDrag(event, this.onDragStart, this.onDragMove, this.onDragEnd, this.onCancelDrag, onClick, onDoubleClick, this.currentDocument, (_b = this.selfRef.current) !== null && _b !== void 0 ? _b : undefined);\r\n }\r\n };\r\n /** @internal */\r\n this.dragRectRender = (text, node, json, onRendered) => {\r\n let content;\r\n if (text !== undefined) {\r\n content = react__WEBPACK_IMPORTED_MODULE_0__.createElement(\"div\", { style: { whiteSpace: \"pre\" } }, text.replace(\"<br>\", \"\\n\"));\r\n }\r\n else {\r\n if (node && node instanceof _model_TabNode__WEBPACK_IMPORTED_MODULE_7__.TabNode) {\r\n content = (react__WEBPACK_IMPORTED_MODULE_0__.createElement(_TabButtonStamp__WEBPACK_IMPORTED_MODULE_20__.TabButtonStamp, { node: node, layout: this, iconFactory: this.props.iconFactory, titleFactory: this.props.titleFactory }));\r\n }\r\n }\r\n if (this.props.onRenderDragRect !== undefined) {\r\n const customContent = this.props.onRenderDragRect(content, node, json);\r\n if (customContent !== undefined) {\r\n content = customContent;\r\n }\r\n }\r\n // hide div until the render is complete\r\n this.dragRectRendered = false;\r\n const dragDiv = this.dragDiv;\r\n if (dragDiv) {\r\n dragDiv.style.visibility = \"hidden\";\r\n this.showPortal(react__WEBPACK_IMPORTED_MODULE_0__.createElement(DragRectRenderWrapper\r\n // wait for it to be rendered\r\n , { \r\n // wait for it to be rendered\r\n onRendered: () => {\r\n this.dragRectRendered = true;\r\n onRendered === null || onRendered === void 0 ? void 0 : onRendered();\r\n } }, content), dragDiv);\r\n }\r\n };\r\n /** @internal */\r\n this.showPortal = (control, element) => {\r\n const portal = (0,react_dom__WEBPACK_IMPORTED_MODULE_1__.createPortal)(control, element);\r\n this.setState({ portal });\r\n };\r\n /** @internal */\r\n this.hidePortal = () => {\r\n this.setState({ portal: undefined });\r\n };\r\n /** @internal */\r\n this.onDragStart = () => {\r\n var _a;\r\n this.dropInfo = undefined;\r\n this.customDrop = undefined;\r\n const rootdiv = this.selfRef.current;\r\n this.outlineDiv = this.currentDocument.createElement(\"div\");\r\n this.outlineDiv.className = this.getClassName(_Types__WEBPACK_IMPORTED_MODULE_10__.CLASSES.FLEXLAYOUT__OUTLINE_RECT);\r\n this.outlineDiv.style.visibility = \"hidden\";\r\n if (rootdiv) {\r\n rootdiv.appendChild(this.outlineDiv);\r\n }\r\n if (this.dragDiv == null) {\r\n this.dragDiv = this.currentDocument.createElement(\"div\");\r\n this.dragDiv.className = this.getClassName(_Types__WEBPACK_IMPORTED_MODULE_10__.CLASSES.FLEXLAYOUT__DRAG_RECT);\r\n this.dragDiv.setAttribute(\"data-layout-path\", \"/drag-rectangle\");\r\n this.dragRectRender(this.dragDivText, this.dragNode, this.newTabJson);\r\n if (rootdiv) {\r\n rootdiv.appendChild(this.dragDiv);\r\n }\r\n }\r\n // add edge indicators\r\n if (this.props.model.getMaximizedTabset() === undefined) {\r\n this.setState({ showEdges: this.props.model.isEnableEdgeDock() });\r\n }\r\n if (this.dragNode && this.outlineDiv && this.dragNode instanceof _model_TabNode__WEBPACK_IMPORTED_MODULE_7__.TabNode && this.dragNode.getTabRect() !== undefined) {\r\n (_a = this.dragNode.getTabRect()) === null || _a === void 0 ? void 0 : _a.positionElement(this.outlineDiv);\r\n }\r\n this.firstMove = true;\r\n return true;\r\n };\r\n /** @internal */\r\n this.onDragMove = (event) => {\r\n var _a, _b, _c, _d, _e, _f, _g;\r\n if (this.firstMove === false) {\r\n const speed = this.props.model._getAttribute(\"tabDragSpeed\");\r\n if (this.outlineDiv) {\r\n this.outlineDiv.style.transition = `top ${speed}s, left ${speed}s, width ${speed}s, height ${speed}s`;\r\n }\r\n }\r\n this.firstMove = false;\r\n const clientRect = (_a = this.selfRef.current) === null || _a === void 0 ? void 0 : _a.getBoundingClientRect();\r\n const pos = {\r\n x: event.clientX - ((_b = clientRect === null || clientRect === void 0 ? void 0 : clientRect.left) !== null && _b !== void 0 ? _b : 0),\r\n y: event.clientY - ((_c = clientRect === null || clientRect === void 0 ? void 0 : clientRect.top) !== null && _c !== void 0 ? _c : 0),\r\n };\r\n this.checkForBorderToShow(pos.x, pos.y);\r\n // keep it between left & right\r\n const dragRect = (_e = (_d = this.dragDiv) === null || _d === void 0 ? void 0 : _d.getBoundingClientRect()) !== null && _e !== void 0 ? _e : new DOMRect(0, 0, 100, 100);\r\n let newLeft = pos.x - dragRect.width / 2;\r\n if (newLeft + dragRect.width > ((_f = clientRect === null || clientRect === void 0 ? void 0 : clientRect.width) !== null && _f !== void 0 ? _f : 0)) {\r\n newLeft = ((_g = clientRect === null || clientRect === void 0 ? void 0 : clientRect.width) !== null && _g !== void 0 ? _g : 0) - dragRect.width;\r\n }\r\n newLeft = Math.max(0, newLeft);\r\n if (this.dragDiv) {\r\n this.dragDiv.style.left = newLeft + \"px\";\r\n this.dragDiv.style.top = pos.y + 5 + \"px\";\r\n if (this.dragRectRendered && this.dragDiv.style.visibility === \"hidden\") {\r\n // make visible once the drag rect has been rendered\r\n this.dragDiv.style.visibility = \"visible\";\r\n }\r\n }\r\n let dropInfo = this.props.model._findDropTargetNode(this.dragNode, pos.x, pos.y);\r\n if (dropInfo) {\r\n if (this.props.onTabDrag) {\r\n this.handleCustomTabDrag(dropInfo, pos, event);\r\n }\r\n else {\r\n this.dropInfo = dropInfo;\r\n if (this.outlineDiv) {\r\n this.outlineDiv.className = this.getClassName(dropInfo.className);\r\n dropInfo.rect.positionElement(this.outlineDiv);\r\n this.outlineDiv.style.visibility = \"visible\";\r\n }\r\n }\r\n }\r\n };\r\n /** @internal */\r\n this.onDragEnd = (event) => {\r\n const rootdiv = this.selfRef.current;\r\n if (rootdiv) {\r\n if (this.outlineDiv) {\r\n rootdiv.removeChild(this.outlineDiv);\r\n }\r\n if (this.dragDiv) {\r\n rootdiv.removeChild(this.dragDiv);\r\n }\r\n }\r\n this.dragDiv = undefined;\r\n this.hidePortal();\r\n this.setState({ showEdges: false });\r\n _DragDrop__WEBPACK_IMPORTED_MODULE_3__.DragDrop.instance.hideGlass();\r\n if (this.dropInfo) {\r\n if (this.customDrop) {\r\n this.newTabJson = undefined;\r\n try {\r\n const { callback, dragging, over, x, y, location } = this.customDrop;\r\n callback(dragging, over, x, y, location);\r\n if (this.fnNewNodeDropped != null) {\r\n this.fnNewNodeDropped();\r\n this.fnNewNodeDropped = undefined;\r\n }\r\n }\r\n catch (e) {\r\n console.error(e);\r\n }\r\n }\r\n else if (this.newTabJson !== undefined) {\r\n const newNode = this.doAction(_model_Actions__WEBPACK_IMPORTED_MODULE_4__.Actions.addNode(this.newTabJson, this.dropInfo.node.getId(), this.dropInfo.location, this.dropInfo.index));\r\n if (this.fnNewNodeDropped != null) {\r\n this.fnNewNodeDropped(newNode, event);\r\n this.fnNewNodeDropped = undefined;\r\n }\r\n this.newTabJson = undefined;\r\n }\r\n else if (this.dragNode !== undefined) {\r\n this.doAction(_model_Actions__WEBPACK_IMPORTED_MODULE_4__.Actions.moveNode(this.dragNode.getId(), this.dropInfo.node.getId(), this.dropInfo.location, this.dropInfo.index));\r\n }\r\n }\r\n this.setState({ showHiddenBorder: _DockLocation__WEBPACK_IMPORTED_MODULE_2__.DockLocation.CENTER });\r\n };\r\n this.props.model._setChangeListener(this.onModelChange);\r\n this.tabIds = [];\r\n this.selfRef = react__WEBPACK_IMPORTED_MODULE_0__.createRef();\r\n this.findHeaderBarSizeRef = react__WEBPACK_IMPORTED_MODULE_0__.createRef();\r\n this.findTabBarSizeRef = react__WEBPACK_IMPORTED_MODULE_0__.createRef();\r\n this.findBorderBarSizeRef = react__WEBPACK_IMPORTED_MODULE_0__.createRef();\r\n this.supportsPopout = props.supportsPopout !== undefined ? props.supportsPopout : defaultSupportsPopout;\r\n this.popoutURL = props.popoutURL ? props.popoutURL : \"popout.html\";\r\n this.icons = Object.assign(Object.assign({}, defaultIcons), props.icons);\r\n this.state = {\r\n rect: new _Rect__WEBPACK_IMPORTED_MODULE_9__.Rect(0, 0, 0, 0),\r\n calculatedHeaderBarSize: 25,\r\n calculatedTabBarSize: 26,\r\n calculatedBorderBarSize: 30,\r\n editingTab: undefined,\r\n showHiddenBorder: _DockLocation__WEBPACK_IMPORTED_MODULE_2__.DockLocation.CENTER,\r\n showEdges: false,\r\n };\r\n this.onDragEnter = this.onDragEnter.bind(this);\r\n }\r\n /** @internal */\r\n styleFont(style) {\r\n if (this.props.font) {\r\n if (this.selfRef.current) {\r\n if (this.props.font.size) {\r\n this.selfRef.current.style.setProperty(\"--font-size\", this.props.font.size);\r\n }\r\n if (this.props.font.family) {\r\n this.selfRef.current.style.setProperty(\"--font-family\", this.props.font.family);\r\n }\r\n }\r\n if (this.props.font.style) {\r\n style.fontStyle = this.props.font.style;\r\n }\r\n if (this.props.font.weight) {\r\n style.fontWeight = this.props.font.weight;\r\n }\r\n }\r\n return style;\r\n }\r\n /** @internal */\r\n doAction(action) {\r\n if (this.props.onAction !== undefined) {\r\n const outcome = this.props.onAction(action);\r\n if (outcome !== undefined) {\r\n return this.props.model.doAction(outcome);\r\n }\r\n return undefined;\r\n }\r\n else {\r\n return this.props.model.doAction(action);\r\n }\r\n }\r\n /** @internal */\r\n componentDidMount() {\r\n this.updateRect();\r\n this.updateLayoutMetrics();\r\n // need to re-render if size changes\r\n this.currentDocument = this.selfRef.current.ownerDocument;\r\n this.currentWindow = this.currentDocument.defaultView;\r\n this.resizeObserver = new ResizeObserver(entries => {\r\n this.updateRect(entries[0].contentRect);\r\n });\r\n const selfRefCurr = this.selfRef.current;\r\n if (selfRefCurr) {\r\n this.resizeObserver.observe(selfRefCurr);\r\n }\r\n }\r\n /** @internal */\r\n componentDidUpdate() {\r\n this.updateLayoutMetrics();\r\n if (this.props.model !== this.previousModel) {\r\n if (this.previousModel !== undefined) {\r\n this.previousModel._setChangeListener(undefined); // stop listening to old model\r\n }\r\n this.props.model._setChangeListener(this.onModelChange);\r\n this.previousModel = this.props.model;\r\n }\r\n // console.log(\"Layout time: \" + this.layoutTime + \"ms Render time: \" + (Date.now() - this.start) + \"ms\");\r\n }\r\n /** @internal */\r\n getCurrentDocument() {\r\n return this.currentDocument;\r\n }\r\n /** @internal */\r\n getDomRect() {\r\n var _a;\r\n return (_a = this.selfRef.current) === null || _a === void 0 ? void 0 : _a.getBoundingClientRect();\r\n }\r\n /** @internal */\r\n getRootDiv() {\r\n return this.selfRef.current;\r\n }\r\n /** @internal */\r\n isSupportsPopout() {\r\n return this.supportsPopout;\r\n }\r\n /** @internal */\r\n isRealtimeResize() {\r\n var _a;\r\n return (_a = this.props.realtimeResize) !== null && _a !== void 0 ? _a : false;\r\n }\r\n /** @internal */\r\n onTabDrag(...args) {\r\n var _a, _b;\r\n return (_b = (_a = this.props).onTabDrag) === null || _b === void 0 ? void 0 : _b.call(_a, ...args);\r\n }\r\n /** @internal */\r\n getPopoutURL() {\r\n return this.popoutURL;\r\n }\r\n /** @internal */\r\n componentWillUnmount() {\r\n var _a;\r\n const selfRefCurr = this.selfRef.current;\r\n if (selfRefCurr) {\r\n (_a = this.resizeObserver) === null || _a === void 0 ? void 0 : _a.unobserve(selfRefCurr);\r\n }\r\n }\r\n /** @internal */\r\n setEditingTab(tabNode) {\r\n this.setState({ editingTab: tabNode });\r\n }\r\n /** @internal */\r\n getEditingTab() {\r\n return this.state.editingTab;\r\n }\r\n /** @internal */\r\n render() {\r\n // first render will be used to find the size (via selfRef)\r\n if (!this.selfRef.current) {\r\n return (react__WEBPACK_IMPORTED_MODULE_0__.createElement(\"div\", { ref: this.selfRef, className: this.getClassName(_Types__WEBPACK_IMPORTED_MODULE_10__.CLASSES.FLEXLAYOUT__LAYOUT) }, this.metricsElements()));\r\n }\r\n this.props.model._setPointerFine(window && window.matchMedia && window.matchMedia(\"(pointer: fine)\").matches);\r\n // this.start = Date.now();\r\n const borderComponents = [];\r\n const tabSetComponents = [];\r\n const floatingWindows = [];\r\n const tabComponents = {};\r\n const splitterComponents = [];\r\n const metrics = {\r\n headerBarSize: this.state.calculatedHeaderBarSize,\r\n tabBarSize: this.state.calculatedTabBarSize,\r\n borderBarSize: this.state.calculatedBorderBarSize\r\n };\r\n this.props.model._setShowHiddenBorder(this.state.showHiddenBorder);\r\n this.centerRect = this.props.model._layout(this.state.rect, metrics);\r\n this.renderBorder(this.props.model.getBorderSet(), borderComponents, tabComponents, floatingWindows, splitterComponents);\r\n this.renderChildren(\"\", this.props.model.getRoot(), tabSetComponents, tabComponents, floatingWindows, splitterComponents);\r\n const nextTopIds = [];\r\n const nextTopIdsMap = {};\r\n // Keep any previous tabs in the same DOM order as before, removing any that have been deleted\r\n for (const t of this.tabIds) {\r\n if (tabComponents[t]) {\r\n nextTopIds.push(t);\r\n nextTopIdsMap[t] = t;\r\n }\r\n }\r\n this.tabIds = nextTopIds;\r\n // Add tabs that have been added to the DOM\r\n for (const t of Object.keys(tabComponents)) {\r\n if (!nextTopIdsMap[t]) {\r\n this.tabIds.push(t);\r\n }\r\n }\r\n const edges = [];\r\n const arrowIcon = this.icons.edgeArrow;\r\n if (this.state.showEdges) {\r\n const r = this.centerRect;\r\n const length = this.edgeRectLength;\r\n const width = this.edgeRectWidth;\r\n const offset = this.edgeRectLength / 2;\r\n const className = this.getClassName(_Types__WEBPACK_IMPORTED_MODULE_10__.CLASSES.FLEXLAYOUT__EDGE_RECT);\r\n const radius = 50;\r\n edges.push(react__WEBPACK_IMPORTED_MODULE_0__.createElement(\"div\", { key: \"North\", style: { top: r.y, left: r.x + r.width / 2 - offset, width: length, height: width, borderBottomLeftRadius: radius, borderBottomRightRadius: radius }, className: className + \" \" + this.getClassName(_Types__WEBPACK_IMPORTED_MODULE_10__.CLASSES.FLEXLAYOUT__EDGE_RECT_TOP) },\r\n react__WEBPACK_IMPORTED_MODULE_0__.createElement(\"div\", { style: { transform: \"rotate(180deg)\" } }, arrowIcon)));\r\n edges.push(react__WEBPACK_IMPORTED_MODULE_0__.createElement(\"div\", { key: \"West\", style: { top: r.y + r.height / 2 - offset, left: r.x, width: width, height: length, borderTopRightRadius: radius, borderBottomRightRadius: radius }, className: className + \" \" + this.getClassName(_Types__WEBPACK_IMPORTED_MODULE_10__.CLASSES.FLEXLAYOUT__EDGE_RECT_LEFT) },\r\n react__WEBPACK_IMPORTED_MODULE_0__.createElement(\"div\", { style: { transform: \"rotate(90deg)\" } }, arrowIcon)));\r\n edges.push(react__WEBPACK_IMPORTED_MODULE_0__.createElement(\"div\", { key: \"South\", style: { top: r.y + r.height - width, left: r.x + r.width / 2 - offset, width: length, height: width, borderTopLeftRadius: radius, borderTopRightRadius: radius }, className: className + \" \" + this.getClassName(_Types__WEBPACK_IMPORTED_MODULE_10__.CLASSES.FLEXLAYOUT__EDGE_RECT_BOTTOM) },\r\n react__WEBPACK_IMPORTED_MODULE_0__.createElement(\"div\", null, arrowIcon)));\r\n edges.push(react__WEBPACK_IMPORTED_MODULE_0__.createElement(\"div\", { key: \"East\", style: { top: r.y + r.height / 2 - offset, left: r.x + r.width - width, width: width, height: length, borderTopLeftRadius: radius, borderBottomLeftRadius: radius }, className: className + \" \" + this.getClassName(_Types__WEBPACK_IMPORTED_MODULE_10__.CLASSES.FLEXLAYOUT__EDGE_RECT_RIGHT) },\r\n react__WEBPACK_IMPORTED_MODULE_0__.createElement(\"div\", { style: { transform: \"rotate(-90deg)\" } }, arrowIcon)));\r\n }\r\n // this.layoutTime = (Date.now() - this.start);\r\n return (react__WEBPACK_IMPORTED_MODULE_0__.createElement(\"div\", { ref: this.selfRef, className: this.getClassName(_Types__WEBPACK_IMPORTED_MODULE_10__.CLASSES.FLEXLAYOUT__LAYOUT), onDragEnter: this.props.onExternalDrag ? this.onDragEnter : undefined },\r\n tabSetComponents,\r\n this.tabIds.map((t) => {\r\n return tabComponents[t];\r\n }),\r\n borderComponents,\r\n splitterComponents,\r\n edges,\r\n floatingWindows,\r\n this.metricsElements(),\r\n this.state.portal));\r\n }\r\n /** @internal */\r\n metricsElements() {\r\n // used to measure the tab and border tab sizes\r\n const fontStyle = this.styleFont({ visibility: \"hidden\" });\r\n return (react__WEBPACK_IMPORTED_MODULE_0__.createElement(react__WEBPACK_IMPORTED_MODULE_0__.Fragment, null,\r\n react__WEBPACK_IMPORTED_MODULE_0__.createElement(\"div\", { key: \"findHeaderBarSize\", ref: this.findHeaderBarSizeRef, style: fontStyle, className: this.getClassName(_Types__WEBPACK_IMPORTED_MODULE_10__.CLASSES.FLEXLAYOUT__TABSET_HEADER_SIZER) }, \"FindHeaderBarSize\"),\r\n react__WEBPACK_IMPORTED_MODULE_0__.createElement(\"div\", { key: \"findTabBarSize\", ref: this.findTabBarSizeRef, style: fontStyle, className: this.getClassName(_Types__WEBPACK_IMPORTED_MODULE_10__.CLASSES.FLEXLAYOUT__TABSET_SIZER) }, \"FindTabBarSize\"),\r\n react__WEBPACK_IMPORTED_MODULE_0__.createElement(\"div\", { key: \"findBorderBarSize\", ref: this.findBorderBarSizeRef, style: fontStyle, className: this.getClassName(_Types__WEBPACK_IMPORTED_MODULE_10__.CLASSES.FLEXLAYOUT__BORDER_SIZER) }, \"FindBorderBarSize\")));\r\n }\r\n /** @internal */\r\n renderBorder(borderSet, borderComponents, tabComponents, floatingWindows, splitterComponents) {\r\n for (const border of borderSet.getBorders()) {\r\n const borderPath = `/border/${border.getLocation().getName()}`;\r\n if (border.isShowing()) {\r\n borderComponents.push(react__WEBPACK_IMPORTED_MODULE_0__.createElement(_BorderTabSet__WEBPACK_IMPORTED_MODULE_11__.BorderTabSet, { key: `border_${border.getLocation().getName()}`, path: borderPath, border: border, layout: this, iconFactory: this.props.iconFactory, titleFactory: this.props.titleFactory, icons: this.icons }));\r\n const drawChildren = border._getDrawChildren();\r\n let i = 0;\r\n let tabCount = 0;\r\n for (const child of drawChildren) {\r\n if (child instanceof _model_SplitterNode__WEBPACK_IMPORTED_MODULE_6__.SplitterNode) {\r\n let path = borderPath + \"/s\";\r\n splitterComponents.push(react__WEBPACK_IMPORTED_MODULE_0__.createElement(_Splitter__WEBPACK_IMPORTED_MODULE_12__.Splitter, { key: child.getId(), layout: this, node: child, path: path }));\r\n }\r\n else if (child instanceof _model_TabNode__WEBPACK_IMPORTED_MODULE_7__.TabNode) {\r\n let path = borderPath + \"/t\" + tabCount++;\r\n if (this.supportsPopout && child.isFloating()) {\r\n const rect = this._getScreenRect(child);\r\n const tabBorderWidth = child._getAttr(\"borderWidth\");\r\n const tabBorderHeight = child._getAttr(\"borderHeight\");\r\n if (rect) {\r\n if (tabBorderWidth !== -1 && border.getLocation().getOrientation() === _Orientation__WEBPACK_IMPORTED_MODULE_18__.Orientation.HORZ) {\r\n rect.width = tabBorderWidth;\r\n }\r\n else if (tabBorderHeight !== -1 && border.getLocation().getOrientation() === _Orientation__WEBPACK_IMPORTED_MODULE_18__.Orientation.VERT) {\r\n rect.height = tabBorderHeight;\r\n }\r\n }\r\n floatingWindows.push(react__WEBPACK_IMPORTED_MODULE_0__.createElement(_FloatingWindow__WEBPACK_IMPORTED_MODULE_15__.FloatingWindow, { key: child.getId(), url: this.popoutURL, rect: rect, title: child.getName(), id: child.getId(), onSetWindow: this.onSetWindow, onCloseWindow: this.onCloseWindow },\r\n react__WEBPACK_IMPORTED_MODULE_0__.createElement(_FloatingWindowTab__WEBPACK_IMPORTED_MODULE_16__.FloatingWindowTab, { layout: this, node: child, factory: this.props.factory })));\r\n tabComponents[child.getId()] = react__WEBPACK_IMPORTED_MODULE_0__.createElement(_TabFloating__WEBPACK_IMPORTED_MODULE_17__.TabFloating, { key: child.getId(), layout: this, path: path, node: child, selected: i === border.getSelected() });\r\n }\r\n else {\r\n tabComponents[child.getId()] = react__WEBPACK_IMPORTED_MODULE_0__.createElement(_Tab__WEBPACK_IMPORTED_MODULE_13__.Tab, { key: child.getId(), layout: this, path: path, node: child, selected: i === border.getSelected(), factory: this.props.factory });\r\n }\r\n }\r\n i++;\r\n }\r\n }\r\n }\r\n }\r\n /** @internal */\r\n renderChildren(path, node, tabSetComponents, tabComponents, floatingWindows, splitterComponents) {\r\n const drawChildren = node._getDrawChildren();\r\n let splitterCount = 0;\r\n let tabCount = 0;\r\n let rowCount = 0;\r\n for (const child of drawChildren) {\r\n if (child instanceof _model_SplitterNode__WEBPACK_IMPORTED_MODULE_6__.SplitterNode) {\r\n const newPath = path + \"/s\" + (splitterCount++);\r\n splitterComponents.push(react__WEBPACK_IMPORTED_MODULE_0__.createElement(_Splitter__WEBPACK_IMPORTED_MODULE_12__.Splitter, { key: child.getId(), layout: this, path: newPath, node: child }));\r\n }\r\n else if (child instanceof _model_TabSetNode__WEBPACK_IMPORTED_MODULE_8__.TabSetNode) {\r\n const newPath = path + \"/ts\" + (rowCount++);\r\n tabSetComponents.push(react__WEBPACK_IMPORTED_MODULE_0__.createElement(_TabSet__WEBPACK_IMPORTED_MODULE_14__.TabSet, { key: child.getId(), layout: this, path: newPath, node: child, iconFactory: this.props.iconFactory, titleFactory: this.props.titleFactory, icons: this.icons }));\r\n this.renderChildren(newPath, child, tabSetComponents, tabComponents, floatingWindows, splitterComponents);\r\n }\r\n else if (child instanceof _model_TabNode__WEBPACK_IMPORTED_MODULE_7__.TabNode) {\r\n const newPath = path + \"/t\" + (tabCount++);\r\n const selectedTab = child.getParent().getChildren()[child.getParent().getSelected()];\r\n if (selectedTab === undefined) {\r\n // this should not happen!\r\n console.warn(\"undefined selectedTab should not happen\");\r\n }\r\n if (this.supportsPopout && child.isFloating()) {\r\n const rect = this._getScreenRect(child);\r\n floatingWindows.push(react__WEBPACK_IMPORTED_MODULE_0__.createElement(_FloatingWindow__WEBPACK_IMPORTED_MODULE_15__.FloatingWindow, { key: child.getId(), url: this.popoutURL, rect: rect, title: child.getName(), id: child.getId(), onSetWindow: this.onSetWindow, onCloseWindow: this.onCloseWindow },\r\n react__WEBPACK_IMPORTED_MODULE_0__.createElement(_FloatingWindowTab__WEBPACK_IMPORTED_MODULE_16__.FloatingWindowTab, { layout: this, node: child, factory: this.props.factory })));\r\n tabComponents[child.getId()] = react__WEBPACK_IMPORTED_MODULE_0__.createElement(_TabFloating__WEBPACK_IMPORTED_MODULE_17__.TabFloating, { key: child.getId(), layout: this, path: newPath, node: child, selected: child === selectedTab });\r\n }\r\n else {\r\n tabComponents[child.getId()] = react__WEBPACK_IMPORTED_MODULE_0__.createElement(_Tab__WEBPACK_IMPORTED_MODULE_13__.Tab, { key: child.getId(), layout: this, path: newPath, node: child, selected: child === selectedTab, factory: this.props.factory });\r\n }\r\n }\r\n else {\r\n // is row\r\n const newPath = path + ((child.getOrientation() === _Orientation__WEBPACK_IMPORTED_MODULE_18__.Orientation.HORZ) ? \"/r\" : \"/c\") + (rowCount++);\r\n this.renderChildren(newPath, child, tabSetComponents, tabComponents, floatingWindows, splitterComponents);\r\n }\r\n }\r\n }\r\n /** @internal */\r\n _getScreenRect(node) {\r\n var _a;\r\n const rect = node.getRect().clone();\r\n const bodyRect = (_a = this.selfRef.current) === null || _a === void 0 ? void 0 : _a.getBoundingClientRect();\r\n if (!bodyRect) {\r\n return null;\r\n }\r\n const navHeight = Math.min(80, this.currentWindow.outerHeight - this.currentWindow.innerHeight);\r\n const navWidth = Math.min(80, this.currentWindow.outerWidth - this.currentWindow.innerWidth);\r\n rect.x = rect.x + bodyRect.x + this.currentWindow.screenX + navWidth;\r\n rect.y = rect.y + bodyRect.y + this.currentWindow.screenY + navHeight;\r\n return rect;\r\n }\r\n /**\r\n * Adds a new tab to the given tabset\r\n * @param tabsetId the id of the tabset where the new tab will be added\r\n * @param json the json for the new tab node\r\n * @returns the added tab node or undefined\r\n */\r\n addTabToTabSet(tabsetId, json) {\r\n const tabsetNode = this.props.model.getNodeById(tabsetId);\r\n if (tabsetNode !== undefined) {\r\n const node = this.doAction(_model_Actions__WEBPACK_IMPORTED_MODULE_4__.Actions.addNode(json, tabsetId, _DockLocation__WEBPACK_IMPORTED_MODULE_2__.DockLocation.CENTER, -1));\r\n return node;\r\n }\r\n return undefined;\r\n }\r\n /**\r\n * Adds a new tab to the active tabset (if there is one)\r\n * @param json the json for the new tab node\r\n * @returns the added tab node or undefined\r\n */\r\n addTabToActiveTabSet(json) {\r\n const tabsetNode = this.props.model.getActiveTabset();\r\n if (tabsetNode !== undefined) {\r\n const node = this.doAction(_model_Actions__WEBPACK_IMPORTED_MODULE_4__.Actions.addNode(json, tabsetNode.getId(), _DockLocation__WEBPACK_IMPORTED_MODULE_2__.DockLocation.CENTER, -1));\r\n return node;\r\n }\r\n return undefined;\r\n }\r\n /**\r\n * Adds a new tab by dragging a labeled panel to the drop location, dragging starts immediatelly\r\n * @param dragText the text to show on the drag panel\r\n * @param json the json for the new tab node\r\n * @param onDrop a callback to call when the drag is complete (node and event will be undefined if the drag was cancelled)\r\n */\r\n addTabWithDragAndDrop(dragText, json, onDrop) {\r\n this.fnNewNodeDropped = onDrop;\r\n this.newTabJson = json;\r\n this.dragStart(undefined, dragText, _model_TabNode__WEBPACK_IMPORTED_MODULE_7__.TabNode._fromJson(json, this.props.model, false), true, undefined, undefined);\r\n }\r\n /**\r\n * Move a tab/tabset using drag and drop\r\n * @param node the tab or tabset to drag\r\n * @param dragText the text to show on the drag panel\r\n */\r\n moveTabWithDragAndDrop(node, dragText) {\r\n this.dragStart(undefined, dragText, node, true, undefined, undefined);\r\n }\r\n /**\r\n * Adds a new tab by dragging a labeled panel to the drop location, dragging starts when you\r\n * mouse down on the panel\r\n *\r\n * @param dragText the text to show on the drag panel\r\n * @param json the json for the new tab node\r\n * @param onDrop a callback to call when the drag is complete (node and event will be undefined if the drag was cancelled)\r\n */\r\n addTabWithDragAndDropIndirect(dragText, json, onDrop) {\r\n this.fnNewNodeDropped = onDrop;\r\n this.newTabJson = json;\r\n _DragDrop__WEBPACK_IMPORTED_MODULE_3__.DragDrop.instance.addGlass(this.onCancelAdd);\r\n this.dragDivText = dragText;\r\n this.dragDiv = this.currentDocument.createElement(\"div\");\r\n this.dragDiv.className = this.getClassName(_Types__WEBPACK_IMPORTED_MODULE_10__.CLASSES.FLEXLAYOUT__DRAG_RECT);\r\n this.dragDiv.addEventListener(\"mousedown\", this.onDragDivMouseDown);\r\n this.dragDiv.addEventListener(\"touchstart\", this.onDragDivMouseDown, { passive: false });\r\n this.dragRectRender(this.dragDivText, undefined, this.newTabJson, () => {\r\n if (this.dragDiv) {\r\n // now it's been rendered into the dom it can be centered\r\n this.dragDiv.style.visibility = \"visible\";\r\n const domRect = this.dragDiv.getBoundingClientRect();\r\n const r = new _Rect__WEBPACK_IMPORTED_MODULE_9__.Rect(0, 0, domRect === null || domRect === void 0 ? void 0 : domRect.width, domRect === null || domRect === void 0 ? void 0 : domRect.height);\r\n r.centerInRect(this.state.rect);\r\n this.dragDiv.setAttribute(\"data-layout-path\", \"/drag-rectangle\");\r\n this.dragDiv.style.left = r.x + \"px\";\r\n this.dragDiv.style.top = r.y + \"px\";\r\n }\r\n });\r\n const rootdiv = this.selfRef.current;\r\n rootdiv.appendChild(this.dragDiv);\r\n }\r\n /** @internal */\r\n handleCustomTabDrag(dropInfo, pos, event) {\r\n var _a, _b, _c;\r\n let invalidated = (_a = this.customDrop) === null || _a === void 0 ? void 0 : _a.invalidated;\r\n const currentCallback = (_b = this.customDrop) === null || _b === void 0 ? void 0 : _b.callback;\r\n this.customDrop = undefined;\r\n const dragging = this.newTabJson || (this.dragNode instanceof _model_TabNode__WEBPACK_IMPORTED_MODULE_7__.TabNode ? this.dragNode : undefined);\r\n if (dragging && (dropInfo.node instanceof _model_TabSetNode__WEBPACK_IMPORTED_MODULE_8__.TabSetNode || dropInfo.node instanceof _model_BorderNode__WEBPACK_IMPORTED_MODULE_5__.BorderNode) && dropInfo.index === -1) {\r\n const selected = dropInfo.node.getSelectedNode();\r\n const tabRect = selected === null || selected === void 0 ? void 0 : selected.getRect();\r\n if (selected && (tabRect === null || tabRect === void 0 ? void 0 : tabRect.contains(pos.x, pos.y))) {\r\n let customDrop = undefined;\r\n try {\r\n const dest = this.onTabDrag(dragging, selected, pos.x - tabRect.x, pos.y - tabRect.y, dropInfo.location, () => this.onDragMove(event));\r\n if (dest) {\r\n customDrop = {\r\n rect: new _Rect__WEBPACK_IMPORTED_MODULE_9__.Rect(dest.x + tabRect.x, dest.y + tabRect.y, dest.width, dest.height),\r\n callback: dest.callback,\r\n invalidated: dest.invalidated,\r\n dragging: dragging,\r\n over: selected,\r\n x: pos.x - tabRect.x,\r\n y: pos.y - tabRect.y,\r\n location: dropInfo.location,\r\n cursor: dest.cursor\r\n };\r\n }\r\n }\r\n catch (e) {\r\n console.error(e);\r\n }\r\n if ((customDrop === null || customDrop === void 0 ? void 0 : customDrop.callback) === currentCallback) {\r\n invalidated = undefined;\r\n }\r\n this.customDrop = customDrop;\r\n }\r\n }\r\n this.dropInfo = dropInfo;\r\n if (this.outlineDiv) {\r\n this.outlineDiv.className = this.getClassName(this.customDrop ? _Types__WEBPACK_IMPORTED_MODULE_10__.CLASSES.FLEXLAYOUT__OUTLINE_RECT : dropInfo.className);\r\n if (this.customDrop) {\r\n this.customDrop.rect.positionElement(this.outlineDiv);\r\n }\r\n else {\r\n dropInfo.rect.positionElement(this.outlineDiv);\r\n }\r\n }\r\n _DragDrop__WEBPACK_IMPORTED_MODULE_3__.DragDrop.instance.setGlassCursorOverride((_c = this.customDrop) === null || _c === void 0 ? void 0 : _c.cursor);\r\n if (this.outlineDiv) {\r\n this.outlineDiv.style.visibility = \"visible\";\r\n }\r\n try {\r\n invalidated === null || invalidated === void 0 ? void 0 : invalidated();\r\n }\r\n catch (e) {\r\n console.error(e);\r\n }\r\n }\r\n /** @internal */\r\n onDragEnter(event) {\r\n // DragDrop keeps track of number of dragenters minus the number of\r\n // dragleaves. Only start a new drag if there isn't one already.\r\n if (_DragDrop__WEBPACK_IMPORTED_MODULE_3__.DragDrop.instance.isDragging())\r\n return;\r\n const drag = this.props.onExternalDrag(event);\r\n if (drag) {\r\n // Mimic addTabWithDragAndDrop, but pass in DragEvent\r\n this.fnNewNodeDropped = drag.onDrop;\r\n this.newTabJson = drag.json;\r\n this.dragStart(event, drag.dragText, _model_TabNode__WEBPACK_IMPORTED_MODULE_7__.TabNode._fromJson(drag.json, this.props.model, false), true, undefined, undefined);\r\n }\r\n }\r\n /** @internal */\r\n checkForBorderToShow(x, y) {\r\n const r = this.props.model._getOuterInnerRects().outer;\r\n const c = r.getCenter();\r\n const margin = this.edgeRectWidth;\r\n const offset = this.edgeRectLength / 2;\r\n let overEdge = false;\r\n if (this.props.model.isEnableEdgeDock() && this.state.showHiddenBorder === _DockLocation__WEBPACK_IMPORTED_MODULE_2__.DockLocation.CENTER) {\r\n if ((y > c.y - offset && y < c.y + offset) ||\r\n (x > c.x - offset && x < c.x + offset)) {\r\n overEdge = true;\r\n }\r\n }\r\n let location = _DockLocation__WEBPACK_IMPORTED_MODULE_2__.DockLocation.CENTER;\r\n if (!overEdge) {\r\n if (x <= r.x + margin) {\r\n location = _DockLocation__WEBPACK_IMPORTED_MODULE_2__.DockLocation.LEFT;\r\n }\r\n else if (x >= r.getRight() - margin) {\r\n location = _DockLocation__WEBPACK_IMPORTED_MODULE_2__.DockLocation.RIGHT;\r\n }\r\n else if (y <= r.y + margin) {\r\n location = _DockLocation__WEBPACK_IMPORTED_MODULE_2__.DockLocation.TOP;\r\n }\r\n else if (y >= r.getBottom() - margin) {\r\n location = _DockLocation__WEBPACK_IMPORTED_MODULE_2__.DockLocation.BOTTOM;\r\n }\r\n }\r\n if (location !== this.state.showHiddenBorder) {\r\n this.setState({ showHiddenBorder: location });\r\n }\r\n }\r\n /** @internal */\r\n maximize(tabsetNode) {\r\n this.doAction(_model_Actions__WEBPACK_IMPORTED_MODULE_4__.Actions.maximizeToggle(tabsetNode.getId()));\r\n }\r\n /** @internal */\r\n customizeTab(tabNode, renderValues) {\r\n if (this.props.onRenderTab) {\r\n this.props.onRenderTab(tabNode, renderValues);\r\n }\r\n }\r\n /** @internal */\r\n customizeTabSet(tabSetNode, renderValues) {\r\n if (this.props.onRenderTabSet) {\r\n this.props.onRenderTabSet(tabSetNode, renderValues);\r\n }\r\n }\r\n /** @internal */\r\n i18nName(id, param) {\r\n let message;\r\n if (this.props.i18nMapper) {\r\n message = this.props.i18nMapper(id, param);\r\n }\r\n if (message === undefined) {\r\n message = id + (param === undefined ? \"\" : param);\r\n }\r\n return message;\r\n }\r\n /** @internal */\r\n getOnRenderFloatingTabPlaceholder() {\r\n return this.props.onRenderFloatingTabPlaceholder;\r\n }\r\n /** @internal */\r\n getShowOverflowMenu() {\r\n return this.props.onShowOverflowMenu;\r\n }\r\n /** @internal */\r\n getTabSetPlaceHolderCallback() {\r\n return this.props.onTabSetPlaceHolder;\r\n }\r\n /** @internal */\r\n showContextMenu(node, event) {\r\n if (this.props.onContextMenu) {\r\n this.props.onContextMenu(node, event);\r\n }\r\n }\r\n /** @internal */\r\n auxMouseClick(node, event) {\r\n if (this.props.onAuxMouseClick) {\r\n this.props.onAuxMouseClick(node, event);\r\n }\r\n }\r\n}\r\n/** @internal */\r\nconst DragRectRenderWrapper = (props) => {\r\n react__WEBPACK_IMPORTED_MODULE_0__.useEffect(() => {\r\n var _a;\r\n (_a = props.onRendered) === null || _a === void 0 ? void 0 : _a.call(props);\r\n }, [props]);\r\n return (react__WEBPACK_IMPORTED_MODULE_0__.createElement(react__WEBPACK_IMPORTED_MODULE_0__.Fragment, null, props.children));\r\n};\r\n\n\n//# sourceURL=webpack://FlexLayout/./src/view/Layout.tsx?");
350
350
 
351
351
  /***/ }),
352
352
 
@@ -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 */ \"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/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\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n/** @internal */\r\nconst TabSet = (props) => {\r\n const { node, layout, iconFactory, titleFactory, icons, path } = props;\r\n const toolbarRef = react__WEBPACK_IMPORTED_MODULE_0__.useRef(null);\r\n const overflowbuttonRef = react__WEBPACK_IMPORTED_MODULE_0__.useRef(null);\r\n const tabbarInnerRef = react__WEBPACK_IMPORTED_MODULE_0__.useRef(null);\r\n const stickyButtonsRef = react__WEBPACK_IMPORTED_MODULE_0__.useRef(null);\r\n const { selfRef, position, userControlledLeft, hiddenTabs, onMouseWheel, tabsTruncated } = (0,_TabOverflowHook__WEBPACK_IMPORTED_MODULE_5__.useTabOverflow)(node, _Orientation__WEBPACK_IMPORTED_MODULE_6__.Orientation.HORZ, toolbarRef, stickyButtonsRef);\r\n const onOverflowClick = (event) => {\r\n const callback = layout.getShowOverflowMenu();\r\n if (callback !== undefined) {\r\n callback(node, event, hiddenTabs, onOverflowItemSelect);\r\n }\r\n else {\r\n const element = overflowbuttonRef.current;\r\n (0,_PopupMenu__WEBPACK_IMPORTED_MODULE_3__.showPopup)(element, hiddenTabs, onOverflowItemSelect, layout, iconFactory, titleFactory);\r\n }\r\n event.stopPropagation();\r\n };\r\n const onOverflowItemSelect = (item) => {\r\n layout.doAction(_model_Actions__WEBPACK_IMPORTED_MODULE_2__.Actions.selectTab(item.node.getId()));\r\n userControlledLeft.current = false;\r\n };\r\n const onMouseDown = (event) => {\r\n if (!(0,_Utils__WEBPACK_IMPORTED_MODULE_8__.isAuxMouseEvent)(event)) {\r\n let name = node.getName();\r\n if (name === undefined) {\r\n name = \"\";\r\n }\r\n else {\r\n name = \": \" + name;\r\n }\r\n layout.doAction(_model_Actions__WEBPACK_IMPORTED_MODULE_2__.Actions.setActiveTabset(node.getId()));\r\n if (!layout.getEditingTab()) {\r\n const message = layout.i18nName(_I18nLabel__WEBPACK_IMPORTED_MODULE_1__.I18nLabel.Move_Tabset, name);\r\n if (node.getModel().getMaximizedTabset() !== undefined) {\r\n layout.dragStart(event, message, node, false, (event2) => undefined, onDoubleClick);\r\n }\r\n else {\r\n layout.dragStart(event, message, node, node.isEnableDrag(), (event2) => undefined, onDoubleClick);\r\n }\r\n }\r\n }\r\n };\r\n const onAuxMouseClick = (event) => {\r\n if ((0,_Utils__WEBPACK_IMPORTED_MODULE_8__.isAuxMouseEvent)(event)) {\r\n layout.auxMouseClick(node, event);\r\n }\r\n };\r\n const onContextMenu = (event) => {\r\n layout.showContextMenu(node, event);\r\n };\r\n const onInterceptMouseDown = (event) => {\r\n event.stopPropagation();\r\n };\r\n const onMaximizeToggle = (event) => {\r\n if (node.canMaximize()) {\r\n layout.maximize(node);\r\n }\r\n event.stopPropagation();\r\n };\r\n const onClose = (event) => {\r\n layout.doAction(_model_Actions__WEBPACK_IMPORTED_MODULE_2__.Actions.deleteTabset(node.getId()));\r\n event.stopPropagation();\r\n };\r\n const onCloseTab = (event) => {\r\n layout.doAction(_model_Actions__WEBPACK_IMPORTED_MODULE_2__.Actions.deleteTab(node.getChildren()[0].getId()));\r\n event.stopPropagation();\r\n };\r\n const onFloatTab = (event) => {\r\n if (selectedTabNode !== undefined) {\r\n layout.doAction(_model_Actions__WEBPACK_IMPORTED_MODULE_2__.Actions.floatTab(selectedTabNode.getId()));\r\n }\r\n event.stopPropagation();\r\n };\r\n const onDoubleClick = (event) => {\r\n if (node.canMaximize()) {\r\n layout.maximize(node);\r\n }\r\n };\r\n // Start Render\r\n const cm = layout.getClassName;\r\n // tabbar inner can get shifted left via tab rename, this resets scrollleft to 0\r\n if (tabbarInnerRef.current !== null && tabbarInnerRef.current.scrollLeft !== 0) {\r\n tabbarInnerRef.current.scrollLeft = 0;\r\n }\r\n const selectedTabNode = node.getSelectedNode();\r\n let style = node._styleWithPosition();\r\n if (node.getModel().getMaximizedTabset() !== undefined && !node.isMaximized()) {\r\n (0,_Utils__WEBPACK_IMPORTED_MODULE_8__.hideElement)(style, node.getModel().isUseVisibility());\r\n }\r\n const tabs = [];\r\n if (node.isEnableTabStrip()) {\r\n for (let i = 0; i < node.getChildren().length; i++) {\r\n const child = node.getChildren()[i];\r\n let isSelected = node.getSelected() === i;\r\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, iconFactory: iconFactory, titleFactory: titleFactory, icons: icons }));\r\n if (i < node.getChildren().length - 1) {\r\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) }));\r\n }\r\n }\r\n }\r\n const showHeader = node.getName() !== undefined;\r\n let stickyButtons = [];\r\n let buttons = [];\r\n let headerButtons = [];\r\n // allow customization of header contents and buttons\r\n const renderState = { headerContent: node.getName(), stickyButtons, buttons, headerButtons, overflowPosition: undefined };\r\n layout.customizeTabSet(node, renderState);\r\n const headerContent = renderState.headerContent;\r\n stickyButtons = renderState.stickyButtons;\r\n buttons = renderState.buttons;\r\n headerButtons = renderState.headerButtons;\r\n const isTabStretch = node.isEnableSingleTabStretch() && node.getChildren().length === 1;\r\n const showClose = (isTabStretch && (node.getChildren()[0].isEnableClose())) || node.isEnableClose();\r\n if (renderState.overflowPosition === undefined) {\r\n renderState.overflowPosition = stickyButtons.length;\r\n }\r\n if (stickyButtons.length > 0) {\r\n if (tabsTruncated || isTabStretch) {\r\n buttons = [...stickyButtons, ...buttons];\r\n }\r\n else {\r\n tabs.push(react__WEBPACK_IMPORTED_MODULE_0__.createElement(\"div\", { ref: stickyButtonsRef, key: \"sticky_buttons_container\", onMouseDown: onInterceptMouseDown, onTouchStart: onInterceptMouseDown, onDragStart: (e) => { e.preventDefault(); }, className: cm(_Types__WEBPACK_IMPORTED_MODULE_7__.CLASSES.FLEXLAYOUT__TAB_TOOLBAR_STICKY_BUTTONS_CONTAINER) }, stickyButtons));\r\n }\r\n }\r\n if (hiddenTabs.length > 0) {\r\n const overflowTitle = layout.i18nName(_I18nLabel__WEBPACK_IMPORTED_MODULE_1__.I18nLabel.Overflow_Menu_Tooltip);\r\n let overflowContent;\r\n if (typeof icons.more === \"function\") {\r\n overflowContent = icons.more(node, hiddenTabs);\r\n }\r\n else {\r\n overflowContent = (react__WEBPACK_IMPORTED_MODULE_0__.createElement(react__WEBPACK_IMPORTED_MODULE_0__.Fragment, null,\r\n icons.more,\r\n react__WEBPACK_IMPORTED_MODULE_0__.createElement(\"div\", { className: cm(_Types__WEBPACK_IMPORTED_MODULE_7__.CLASSES.FLEXLAYOUT__TAB_BUTTON_OVERFLOW_COUNT) }, hiddenTabs.length)));\r\n }\r\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, onMouseDown: onInterceptMouseDown, onTouchStart: onInterceptMouseDown }, overflowContent));\r\n }\r\n if (selectedTabNode !== undefined && layout.isSupportsPopout() && selectedTabNode.isEnableFloat() && !selectedTabNode.isFloating()) {\r\n const floatTitle = layout.i18nName(_I18nLabel__WEBPACK_IMPORTED_MODULE_1__.I18nLabel.Float_Tab);\r\n buttons.push(react__WEBPACK_IMPORTED_MODULE_0__.createElement(\"button\", { key: \"float\", \"data-layout-path\": path + \"/button/float\", title: floatTitle, 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: onFloatTab, onMouseDown: onInterceptMouseDown, onTouchStart: onInterceptMouseDown }, (typeof icons.popout === \"function\") ? icons.popout(selectedTabNode) : icons.popout));\r\n }\r\n if (node.canMaximize()) {\r\n const minTitle = layout.i18nName(_I18nLabel__WEBPACK_IMPORTED_MODULE_1__.I18nLabel.Restore);\r\n const maxTitle = layout.i18nName(_I18nLabel__WEBPACK_IMPORTED_MODULE_1__.I18nLabel.Maximize);\r\n const btns = showHeader ? headerButtons : buttons;\r\n btns.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, onMouseDown: onInterceptMouseDown, onTouchStart: onInterceptMouseDown }, node.isMaximized() ?\r\n (typeof icons.restore === \"function\") ? icons.restore(node) : icons.restore :\r\n (typeof icons.maximize === \"function\") ? icons.maximize(node) : icons.maximize));\r\n }\r\n if (!node.isMaximized() && showClose) {\r\n const title = isTabStretch ? layout.i18nName(_I18nLabel__WEBPACK_IMPORTED_MODULE_1__.I18nLabel.Close_Tab) : layout.i18nName(_I18nLabel__WEBPACK_IMPORTED_MODULE_1__.I18nLabel.Close_Tabset);\r\n const btns = showHeader ? headerButtons : buttons;\r\n btns.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, onMouseDown: onInterceptMouseDown, onTouchStart: onInterceptMouseDown }, (typeof icons.closeTabset === \"function\") ? icons.closeTabset(node) : icons.closeTabset));\r\n }\r\n const toolbar = (react__WEBPACK_IMPORTED_MODULE_0__.createElement(\"div\", { key: \"toolbar\", ref: toolbarRef, className: cm(_Types__WEBPACK_IMPORTED_MODULE_7__.CLASSES.FLEXLAYOUT__TAB_TOOLBAR), onMouseDown: onInterceptMouseDown, onTouchStart: onInterceptMouseDown, onDragStart: (e) => { e.preventDefault(); } }, buttons));\r\n let header;\r\n let tabStrip;\r\n let tabStripClasses = cm(_Types__WEBPACK_IMPORTED_MODULE_7__.CLASSES.FLEXLAYOUT__TABSET_TABBAR_OUTER);\r\n if (node.getClassNameTabStrip() !== undefined) {\r\n tabStripClasses += \" \" + node.getClassNameTabStrip();\r\n }\r\n tabStripClasses += \" \" + _Types__WEBPACK_IMPORTED_MODULE_7__.CLASSES.FLEXLAYOUT__TABSET_TABBAR_OUTER_ + node.getTabLocation();\r\n if (node.isActive() && !showHeader) {\r\n tabStripClasses += \" \" + cm(_Types__WEBPACK_IMPORTED_MODULE_7__.CLASSES.FLEXLAYOUT__TABSET_SELECTED);\r\n }\r\n if (node.isMaximized() && !showHeader) {\r\n tabStripClasses += \" \" + cm(_Types__WEBPACK_IMPORTED_MODULE_7__.CLASSES.FLEXLAYOUT__TABSET_MAXIMIZED);\r\n }\r\n if (showHeader) {\r\n const headerToolbar = (react__WEBPACK_IMPORTED_MODULE_0__.createElement(\"div\", { key: \"toolbar\", ref: toolbarRef, className: cm(_Types__WEBPACK_IMPORTED_MODULE_7__.CLASSES.FLEXLAYOUT__TAB_TOOLBAR), onMouseDown: onInterceptMouseDown, onTouchStart: onInterceptMouseDown, onDragStart: (e) => { e.preventDefault(); } }, headerButtons));\r\n let tabHeaderClasses = cm(_Types__WEBPACK_IMPORTED_MODULE_7__.CLASSES.FLEXLAYOUT__TABSET_HEADER);\r\n if (node.isActive()) {\r\n tabHeaderClasses += \" \" + cm(_Types__WEBPACK_IMPORTED_MODULE_7__.CLASSES.FLEXLAYOUT__TABSET_SELECTED);\r\n }\r\n if (node.isMaximized()) {\r\n tabHeaderClasses += \" \" + cm(_Types__WEBPACK_IMPORTED_MODULE_7__.CLASSES.FLEXLAYOUT__TABSET_MAXIMIZED);\r\n }\r\n if (node.getClassNameHeader() !== undefined) {\r\n tabHeaderClasses += \" \" + node.getClassNameHeader();\r\n }\r\n header = (react__WEBPACK_IMPORTED_MODULE_0__.createElement(\"div\", { className: tabHeaderClasses, style: { height: node.getHeaderHeight() + \"px\" }, \"data-layout-path\": path + \"/header\", onMouseDown: onMouseDown, onContextMenu: onContextMenu, onClick: onAuxMouseClick, onAuxClick: onAuxMouseClick, onTouchStart: onMouseDown },\r\n react__WEBPACK_IMPORTED_MODULE_0__.createElement(\"div\", { className: cm(_Types__WEBPACK_IMPORTED_MODULE_7__.CLASSES.FLEXLAYOUT__TABSET_HEADER_CONTENT) }, headerContent),\r\n headerToolbar));\r\n }\r\n const tabStripStyle = { height: node.getTabStripHeight() + \"px\" };\r\n tabStrip = (react__WEBPACK_IMPORTED_MODULE_0__.createElement(\"div\", { className: tabStripClasses, style: tabStripStyle, \"data-layout-path\": path + \"/tabstrip\", onMouseDown: onMouseDown, onContextMenu: onContextMenu, onClick: onAuxMouseClick, onAuxClick: onAuxMouseClick, onTouchStart: onMouseDown },\r\n react__WEBPACK_IMPORTED_MODULE_0__.createElement(\"div\", { ref: tabbarInnerRef, 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()) },\r\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)),\r\n toolbar));\r\n style = layout.styleFont(style);\r\n var placeHolder = undefined;\r\n if (node.getChildren().length === 0) {\r\n const placeHolderCallback = layout.getTabSetPlaceHolderCallback();\r\n if (placeHolderCallback) {\r\n placeHolder = placeHolderCallback(node);\r\n }\r\n }\r\n const center = react__WEBPACK_IMPORTED_MODULE_0__.createElement(\"div\", { className: cm(_Types__WEBPACK_IMPORTED_MODULE_7__.CLASSES.FLEXLAYOUT__TABSET_CONTENT) }, placeHolder);\r\n var content;\r\n if (node.getTabLocation() === \"top\") {\r\n content = react__WEBPACK_IMPORTED_MODULE_0__.createElement(react__WEBPACK_IMPORTED_MODULE_0__.Fragment, null,\r\n header,\r\n tabStrip,\r\n center);\r\n }\r\n else {\r\n content = react__WEBPACK_IMPORTED_MODULE_0__.createElement(react__WEBPACK_IMPORTED_MODULE_0__.Fragment, null,\r\n header,\r\n center,\r\n tabStrip);\r\n }\r\n return (react__WEBPACK_IMPORTED_MODULE_0__.createElement(\"div\", { ref: selfRef, dir: \"ltr\", \"data-layout-path\": path, style: style, className: cm(_Types__WEBPACK_IMPORTED_MODULE_7__.CLASSES.FLEXLAYOUT__TABSET), onWheel: onMouseWheel }, content));\r\n};\r\n\n\n//# sourceURL=webpack://FlexLayout/./src/view/TabSet.tsx?");
419
+ 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/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\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n/** @internal */\r\nconst TabSet = (props) => {\r\n const { node, layout, iconFactory, titleFactory, icons, path } = props;\r\n const toolbarRef = react__WEBPACK_IMPORTED_MODULE_0__.useRef(null);\r\n const overflowbuttonRef = react__WEBPACK_IMPORTED_MODULE_0__.useRef(null);\r\n const tabbarInnerRef = react__WEBPACK_IMPORTED_MODULE_0__.useRef(null);\r\n const stickyButtonsRef = react__WEBPACK_IMPORTED_MODULE_0__.useRef(null);\r\n const { selfRef, position, userControlledLeft, hiddenTabs, onMouseWheel, tabsTruncated } = (0,_TabOverflowHook__WEBPACK_IMPORTED_MODULE_5__.useTabOverflow)(node, _Orientation__WEBPACK_IMPORTED_MODULE_6__.Orientation.HORZ, toolbarRef, stickyButtonsRef);\r\n const onOverflowClick = (event) => {\r\n const callback = layout.getShowOverflowMenu();\r\n if (callback !== undefined) {\r\n callback(node, event, hiddenTabs, onOverflowItemSelect);\r\n }\r\n else {\r\n const element = overflowbuttonRef.current;\r\n (0,_PopupMenu__WEBPACK_IMPORTED_MODULE_3__.showPopup)(element, hiddenTabs, onOverflowItemSelect, layout, iconFactory, titleFactory);\r\n }\r\n event.stopPropagation();\r\n };\r\n const onOverflowItemSelect = (item) => {\r\n layout.doAction(_model_Actions__WEBPACK_IMPORTED_MODULE_2__.Actions.selectTab(item.node.getId()));\r\n userControlledLeft.current = false;\r\n };\r\n const onMouseDown = (event) => {\r\n if (!(0,_Utils__WEBPACK_IMPORTED_MODULE_8__.isAuxMouseEvent)(event)) {\r\n let name = node.getName();\r\n if (name === undefined) {\r\n name = \"\";\r\n }\r\n else {\r\n name = \": \" + name;\r\n }\r\n layout.doAction(_model_Actions__WEBPACK_IMPORTED_MODULE_2__.Actions.setActiveTabset(node.getId()));\r\n if (!layout.getEditingTab()) {\r\n const message = layout.i18nName(_I18nLabel__WEBPACK_IMPORTED_MODULE_1__.I18nLabel.Move_Tabset, name);\r\n if (node.getModel().getMaximizedTabset() !== undefined) {\r\n layout.dragStart(event, message, node, false, (event2) => undefined, onDoubleClick);\r\n }\r\n else {\r\n layout.dragStart(event, message, node, node.isEnableDrag(), (event2) => undefined, onDoubleClick);\r\n }\r\n }\r\n }\r\n };\r\n const onAuxMouseClick = (event) => {\r\n if ((0,_Utils__WEBPACK_IMPORTED_MODULE_8__.isAuxMouseEvent)(event)) {\r\n layout.auxMouseClick(node, event);\r\n }\r\n };\r\n const onContextMenu = (event) => {\r\n layout.showContextMenu(node, event);\r\n };\r\n const onInterceptMouseDown = (event) => {\r\n event.stopPropagation();\r\n };\r\n const onMaximizeToggle = (event) => {\r\n if (node.canMaximize()) {\r\n layout.maximize(node);\r\n }\r\n event.stopPropagation();\r\n };\r\n const onClose = (event) => {\r\n layout.doAction(_model_Actions__WEBPACK_IMPORTED_MODULE_2__.Actions.deleteTabset(node.getId()));\r\n event.stopPropagation();\r\n };\r\n const onCloseTab = (event) => {\r\n layout.doAction(_model_Actions__WEBPACK_IMPORTED_MODULE_2__.Actions.deleteTab(node.getChildren()[0].getId()));\r\n event.stopPropagation();\r\n };\r\n const onFloatTab = (event) => {\r\n if (selectedTabNode !== undefined) {\r\n layout.doAction(_model_Actions__WEBPACK_IMPORTED_MODULE_2__.Actions.floatTab(selectedTabNode.getId()));\r\n }\r\n event.stopPropagation();\r\n };\r\n const onDoubleClick = (event) => {\r\n if (node.canMaximize()) {\r\n layout.maximize(node);\r\n }\r\n };\r\n // Start Render\r\n const cm = layout.getClassName;\r\n // tabbar inner can get shifted left via tab rename, this resets scrollleft to 0\r\n if (tabbarInnerRef.current !== null && tabbarInnerRef.current.scrollLeft !== 0) {\r\n tabbarInnerRef.current.scrollLeft = 0;\r\n }\r\n const selectedTabNode = node.getSelectedNode();\r\n let style = node._styleWithPosition();\r\n if (node.getModel().getMaximizedTabset() !== undefined && !node.isMaximized()) {\r\n (0,_Utils__WEBPACK_IMPORTED_MODULE_8__.hideElement)(style, node.getModel().isUseVisibility());\r\n }\r\n const tabs = [];\r\n if (node.isEnableTabStrip()) {\r\n for (let i = 0; i < node.getChildren().length; i++) {\r\n const child = node.getChildren()[i];\r\n let isSelected = node.getSelected() === i;\r\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, iconFactory: iconFactory, titleFactory: titleFactory, icons: icons }));\r\n if (i < node.getChildren().length - 1) {\r\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) }));\r\n }\r\n }\r\n }\r\n const showHeader = node.getName() !== undefined;\r\n let stickyButtons = [];\r\n let buttons = [];\r\n let headerButtons = [];\r\n // allow customization of header contents and buttons\r\n const renderState = { headerContent: node.getName(), stickyButtons, buttons, headerButtons, overflowPosition: undefined };\r\n layout.customizeTabSet(node, renderState);\r\n const headerContent = renderState.headerContent;\r\n stickyButtons = renderState.stickyButtons;\r\n buttons = renderState.buttons;\r\n headerButtons = renderState.headerButtons;\r\n const isTabStretch = node.isEnableSingleTabStretch() && node.getChildren().length === 1;\r\n const showClose = (isTabStretch && (node.getChildren()[0].isEnableClose())) || node.isEnableClose();\r\n if (renderState.overflowPosition === undefined) {\r\n renderState.overflowPosition = stickyButtons.length;\r\n }\r\n if (stickyButtons.length > 0) {\r\n if (tabsTruncated || isTabStretch) {\r\n buttons = [...stickyButtons, ...buttons];\r\n }\r\n else {\r\n tabs.push(react__WEBPACK_IMPORTED_MODULE_0__.createElement(\"div\", { ref: stickyButtonsRef, key: \"sticky_buttons_container\", onMouseDown: onInterceptMouseDown, onTouchStart: onInterceptMouseDown, onDragStart: (e) => { e.preventDefault(); }, className: cm(_Types__WEBPACK_IMPORTED_MODULE_7__.CLASSES.FLEXLAYOUT__TAB_TOOLBAR_STICKY_BUTTONS_CONTAINER) }, stickyButtons));\r\n }\r\n }\r\n if (hiddenTabs.length > 0) {\r\n const overflowTitle = layout.i18nName(_I18nLabel__WEBPACK_IMPORTED_MODULE_1__.I18nLabel.Overflow_Menu_Tooltip);\r\n let overflowContent;\r\n if (typeof icons.more === \"function\") {\r\n overflowContent = icons.more(node, hiddenTabs);\r\n }\r\n else {\r\n overflowContent = (react__WEBPACK_IMPORTED_MODULE_0__.createElement(react__WEBPACK_IMPORTED_MODULE_0__.Fragment, null,\r\n icons.more,\r\n react__WEBPACK_IMPORTED_MODULE_0__.createElement(\"div\", { className: cm(_Types__WEBPACK_IMPORTED_MODULE_7__.CLASSES.FLEXLAYOUT__TAB_BUTTON_OVERFLOW_COUNT) }, hiddenTabs.length)));\r\n }\r\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, onMouseDown: onInterceptMouseDown, onTouchStart: onInterceptMouseDown }, overflowContent));\r\n }\r\n if (selectedTabNode !== undefined && layout.isSupportsPopout() && selectedTabNode.isEnableFloat() && !selectedTabNode.isFloating()) {\r\n const floatTitle = layout.i18nName(_I18nLabel__WEBPACK_IMPORTED_MODULE_1__.I18nLabel.Float_Tab);\r\n buttons.push(react__WEBPACK_IMPORTED_MODULE_0__.createElement(\"button\", { key: \"float\", \"data-layout-path\": path + \"/button/float\", title: floatTitle, 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: onFloatTab, onMouseDown: onInterceptMouseDown, onTouchStart: onInterceptMouseDown }, (typeof icons.popout === \"function\") ? icons.popout(selectedTabNode) : icons.popout));\r\n }\r\n if (node.canMaximize()) {\r\n const minTitle = layout.i18nName(_I18nLabel__WEBPACK_IMPORTED_MODULE_1__.I18nLabel.Restore);\r\n const maxTitle = layout.i18nName(_I18nLabel__WEBPACK_IMPORTED_MODULE_1__.I18nLabel.Maximize);\r\n const btns = showHeader ? headerButtons : buttons;\r\n btns.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, onMouseDown: onInterceptMouseDown, onTouchStart: onInterceptMouseDown }, node.isMaximized() ?\r\n (typeof icons.restore === \"function\") ? icons.restore(node) : icons.restore :\r\n (typeof icons.maximize === \"function\") ? icons.maximize(node) : icons.maximize));\r\n }\r\n if (!node.isMaximized() && showClose) {\r\n const title = isTabStretch ? layout.i18nName(_I18nLabel__WEBPACK_IMPORTED_MODULE_1__.I18nLabel.Close_Tab) : layout.i18nName(_I18nLabel__WEBPACK_IMPORTED_MODULE_1__.I18nLabel.Close_Tabset);\r\n const btns = showHeader ? headerButtons : buttons;\r\n btns.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, onMouseDown: onInterceptMouseDown, onTouchStart: onInterceptMouseDown }, (typeof icons.closeTabset === \"function\") ? icons.closeTabset(node) : icons.closeTabset));\r\n }\r\n const toolbar = (react__WEBPACK_IMPORTED_MODULE_0__.createElement(\"div\", { key: \"toolbar\", ref: toolbarRef, className: cm(_Types__WEBPACK_IMPORTED_MODULE_7__.CLASSES.FLEXLAYOUT__TAB_TOOLBAR), onMouseDown: onInterceptMouseDown, onTouchStart: onInterceptMouseDown, onDragStart: (e) => { e.preventDefault(); } }, buttons));\r\n let header;\r\n let tabStrip;\r\n let tabStripClasses = cm(_Types__WEBPACK_IMPORTED_MODULE_7__.CLASSES.FLEXLAYOUT__TABSET_TABBAR_OUTER);\r\n if (node.getClassNameTabStrip() !== undefined) {\r\n tabStripClasses += \" \" + node.getClassNameTabStrip();\r\n }\r\n tabStripClasses += \" \" + _Types__WEBPACK_IMPORTED_MODULE_7__.CLASSES.FLEXLAYOUT__TABSET_TABBAR_OUTER_ + node.getTabLocation();\r\n if (node.isActive() && !showHeader) {\r\n tabStripClasses += \" \" + cm(_Types__WEBPACK_IMPORTED_MODULE_7__.CLASSES.FLEXLAYOUT__TABSET_SELECTED);\r\n }\r\n if (node.isMaximized() && !showHeader) {\r\n tabStripClasses += \" \" + cm(_Types__WEBPACK_IMPORTED_MODULE_7__.CLASSES.FLEXLAYOUT__TABSET_MAXIMIZED);\r\n }\r\n if (isTabStretch) {\r\n const tabNode = node.getChildren()[0];\r\n if (tabNode.getTabSetClassName() !== undefined) {\r\n tabStripClasses += \" \" + tabNode.getTabSetClassName();\r\n }\r\n }\r\n if (showHeader) {\r\n const headerToolbar = (react__WEBPACK_IMPORTED_MODULE_0__.createElement(\"div\", { key: \"toolbar\", ref: toolbarRef, className: cm(_Types__WEBPACK_IMPORTED_MODULE_7__.CLASSES.FLEXLAYOUT__TAB_TOOLBAR), onMouseDown: onInterceptMouseDown, onTouchStart: onInterceptMouseDown, onDragStart: (e) => { e.preventDefault(); } }, headerButtons));\r\n let tabHeaderClasses = cm(_Types__WEBPACK_IMPORTED_MODULE_7__.CLASSES.FLEXLAYOUT__TABSET_HEADER);\r\n if (node.isActive()) {\r\n tabHeaderClasses += \" \" + cm(_Types__WEBPACK_IMPORTED_MODULE_7__.CLASSES.FLEXLAYOUT__TABSET_SELECTED);\r\n }\r\n if (node.isMaximized()) {\r\n tabHeaderClasses += \" \" + cm(_Types__WEBPACK_IMPORTED_MODULE_7__.CLASSES.FLEXLAYOUT__TABSET_MAXIMIZED);\r\n }\r\n if (node.getClassNameHeader() !== undefined) {\r\n tabHeaderClasses += \" \" + node.getClassNameHeader();\r\n }\r\n header = (react__WEBPACK_IMPORTED_MODULE_0__.createElement(\"div\", { className: tabHeaderClasses, style: { height: node.getHeaderHeight() + \"px\" }, \"data-layout-path\": path + \"/header\", onMouseDown: onMouseDown, onContextMenu: onContextMenu, onClick: onAuxMouseClick, onAuxClick: onAuxMouseClick, onTouchStart: onMouseDown },\r\n react__WEBPACK_IMPORTED_MODULE_0__.createElement(\"div\", { className: cm(_Types__WEBPACK_IMPORTED_MODULE_7__.CLASSES.FLEXLAYOUT__TABSET_HEADER_CONTENT) }, headerContent),\r\n headerToolbar));\r\n }\r\n const tabStripStyle = { height: node.getTabStripHeight() + \"px\" };\r\n tabStrip = (react__WEBPACK_IMPORTED_MODULE_0__.createElement(\"div\", { className: tabStripClasses, style: tabStripStyle, \"data-layout-path\": path + \"/tabstrip\", onMouseDown: onMouseDown, onContextMenu: onContextMenu, onClick: onAuxMouseClick, onAuxClick: onAuxMouseClick, onTouchStart: onMouseDown },\r\n react__WEBPACK_IMPORTED_MODULE_0__.createElement(\"div\", { ref: tabbarInnerRef, 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()) },\r\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)),\r\n toolbar));\r\n style = layout.styleFont(style);\r\n var placeHolder = undefined;\r\n if (node.getChildren().length === 0) {\r\n const placeHolderCallback = layout.getTabSetPlaceHolderCallback();\r\n if (placeHolderCallback) {\r\n placeHolder = placeHolderCallback(node);\r\n }\r\n }\r\n const center = react__WEBPACK_IMPORTED_MODULE_0__.createElement(\"div\", { className: cm(_Types__WEBPACK_IMPORTED_MODULE_7__.CLASSES.FLEXLAYOUT__TABSET_CONTENT) }, placeHolder);\r\n var content;\r\n if (node.getTabLocation() === \"top\") {\r\n content = react__WEBPACK_IMPORTED_MODULE_0__.createElement(react__WEBPACK_IMPORTED_MODULE_0__.Fragment, null,\r\n header,\r\n tabStrip,\r\n center);\r\n }\r\n else {\r\n content = react__WEBPACK_IMPORTED_MODULE_0__.createElement(react__WEBPACK_IMPORTED_MODULE_0__.Fragment, null,\r\n header,\r\n center,\r\n tabStrip);\r\n }\r\n return (react__WEBPACK_IMPORTED_MODULE_0__.createElement(\"div\", { ref: selfRef, dir: \"ltr\", \"data-layout-path\": path, style: style, className: cm(_Types__WEBPACK_IMPORTED_MODULE_7__.CLASSES.FLEXLAYOUT__TABSET), onWheel: onMouseWheel }, content));\r\n};\r\n\n\n//# sourceURL=webpack://FlexLayout/./src/view/TabSet.tsx?");
420
420
 
421
421
  /***/ }),
422
422