flexlayout-react 0.7.2 → 0.7.3

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 (13) hide show
  1. package/ChangeLog.txt +4 -0
  2. package/dist/flexlayout.js +3 -3
  3. package/dist/flexlayout_min.js +1 -1
  4. package/lib/model/BorderNode.js +7 -1
  5. package/lib/model/BorderNode.js.map +1 -1
  6. package/lib/model/TabSetNode.js +8 -1
  7. package/lib/model/TabSetNode.js.map +1 -1
  8. package/lib/view/Layout.js +1 -1
  9. package/lib/view/Layout.js.map +1 -1
  10. package/package.json +1 -1
  11. package/src/model/BorderNode.ts +6 -1
  12. package/src/model/TabSetNode.ts +6 -1
  13. package/src/view/Layout.tsx +1 -1
package/ChangeLog.txt CHANGED
@@ -1,3 +1,7 @@
1
+ 0.7.3
2
+ Fixed right edge marker location when border enableAutoHide
3
+ Dragging out a selected border tab will now leave the border unselected
4
+
1
5
  0.7.2
2
6
  New Layout JSON tabs to demo
3
7
  Added --color-icon css rootOrientationVertical
package/dist/flexlayout.js CHANGED
@@ -306,7 +306,7 @@ eval("\nObject.defineProperty(exports, \"__esModule\", ({ value: true }));\nexpo
306
306
  \*********************************/
307
307
  /***/ (function(__unused_webpack_module, exports, __webpack_require__) {
308
308
 
309
- eval("\nvar __extends = (this && this.__extends) || (function () {\n var extendStatics = function (d, b) {\n extendStatics = Object.setPrototypeOf ||\n ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||\n function (d, b) { for (var p in b) if (Object.prototype.hasOwnProperty.call(b, p)) d[p] = b[p]; };\n return extendStatics(d, b);\n };\n return function (d, b) {\n if (typeof b !== \"function\" && b !== null)\n throw new TypeError(\"Class extends value \" + String(b) + \" is not a constructor or null\");\n extendStatics(d, b);\n function __() { this.constructor = d; }\n d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());\n };\n})();\nObject.defineProperty(exports, \"__esModule\", ({ value: true }));\nexports.BorderNode = void 0;\nvar Attribute_1 = __webpack_require__(/*! ../Attribute */ \"./src/Attribute.ts\");\nvar AttributeDefinitions_1 = __webpack_require__(/*! ../AttributeDefinitions */ \"./src/AttributeDefinitions.ts\");\nvar DockLocation_1 = __webpack_require__(/*! ../DockLocation */ \"./src/DockLocation.ts\");\nvar DropInfo_1 = __webpack_require__(/*! ../DropInfo */ \"./src/DropInfo.ts\");\nvar Orientation_1 = __webpack_require__(/*! ../Orientation */ \"./src/Orientation.ts\");\nvar Rect_1 = __webpack_require__(/*! ../Rect */ \"./src/Rect.ts\");\nvar Types_1 = __webpack_require__(/*! ../Types */ \"./src/Types.ts\");\nvar Node_1 = __webpack_require__(/*! ./Node */ \"./src/model/Node.ts\");\nvar SplitterNode_1 = __webpack_require__(/*! ./SplitterNode */ \"./src/model/SplitterNode.ts\");\nvar TabNode_1 = __webpack_require__(/*! ./TabNode */ \"./src/model/TabNode.ts\");\nvar Utils_1 = __webpack_require__(/*! ./Utils */ \"./src/model/Utils.ts\");\nvar BorderNode = /** @class */ (function (_super) {\n __extends(BorderNode, _super);\n /** @internal */\n function BorderNode(location, json, model) {\n var _this = _super.call(this, model) || this;\n /** @internal */\n _this._adjustedSize = 0;\n /** @internal */\n _this._calculatedBorderBarSize = 0;\n _this._location = location;\n _this._drawChildren = [];\n _this._attributes.id = \"border_\".concat(location.getName());\n BorderNode._attributeDefinitions.fromJson(json, _this._attributes);\n model._addNode(_this);\n return _this;\n }\n /** @internal */\n BorderNode._fromJson = function (json, model) {\n var location = DockLocation_1.DockLocation.getByName(json.location);\n var border = new BorderNode(location, json, model);\n if (json.children) {\n border._children = json.children.map(function (jsonChild) {\n var child = TabNode_1.TabNode._fromJson(jsonChild, model);\n child._setParent(border);\n return child;\n });\n }\n return border;\n };\n /** @internal */\n BorderNode._createAttributeDefinitions = function () {\n var attributeDefinitions = new AttributeDefinitions_1.AttributeDefinitions();\n attributeDefinitions.add(\"type\", BorderNode.TYPE, true).setType(Attribute_1.Attribute.STRING).setFixed();\n attributeDefinitions.add(\"selected\", -1).setType(Attribute_1.Attribute.NUMBER);\n attributeDefinitions.add(\"show\", true).setType(Attribute_1.Attribute.BOOLEAN);\n attributeDefinitions.add(\"config\", undefined).setType(\"any\");\n attributeDefinitions.addInherited(\"barSize\", \"borderBarSize\").setType(Attribute_1.Attribute.NUMBER);\n attributeDefinitions.addInherited(\"enableDrop\", \"borderEnableDrop\").setType(Attribute_1.Attribute.BOOLEAN);\n attributeDefinitions.addInherited(\"className\", \"borderClassName\").setType(Attribute_1.Attribute.STRING);\n attributeDefinitions.addInherited(\"autoSelectTabWhenOpen\", \"borderAutoSelectTabWhenOpen\").setType(Attribute_1.Attribute.BOOLEAN);\n attributeDefinitions.addInherited(\"autoSelectTabWhenClosed\", \"borderAutoSelectTabWhenClosed\").setType(Attribute_1.Attribute.BOOLEAN);\n attributeDefinitions.addInherited(\"size\", \"borderSize\").setType(Attribute_1.Attribute.NUMBER);\n attributeDefinitions.addInherited(\"minSize\", \"borderMinSize\").setType(Attribute_1.Attribute.NUMBER);\n attributeDefinitions.addInherited(\"enableAutoHide\", \"borderEnableAutoHide\").setType(Attribute_1.Attribute.BOOLEAN);\n return attributeDefinitions;\n };\n BorderNode.prototype.getLocation = function () {\n return this._location;\n };\n BorderNode.prototype.getTabHeaderRect = function () {\n return this._tabHeaderRect;\n };\n BorderNode.prototype.getRect = function () {\n return this._tabHeaderRect;\n };\n BorderNode.prototype.getContentRect = function () {\n return this._contentRect;\n };\n BorderNode.prototype.isEnableDrop = function () {\n return this._getAttr(\"enableDrop\");\n };\n BorderNode.prototype.isAutoSelectTab = function (whenOpen) {\n if (whenOpen == null) {\n whenOpen = this.getSelected() !== -1;\n }\n if (whenOpen) {\n return this._getAttr(\"autoSelectTabWhenOpen\");\n }\n else {\n return this._getAttr(\"autoSelectTabWhenClosed\");\n }\n };\n BorderNode.prototype.getClassName = function () {\n return this._getAttr(\"className\");\n };\n /** @internal */\n BorderNode.prototype.calcBorderBarSize = function (metrics) {\n var barSize = this._getAttr(\"barSize\");\n if (barSize !== 0) {\n // its defined\n this._calculatedBorderBarSize = barSize;\n }\n else {\n this._calculatedBorderBarSize = metrics.borderBarSize;\n }\n };\n BorderNode.prototype.getBorderBarSize = function () {\n return this._calculatedBorderBarSize;\n };\n BorderNode.prototype.getSize = function () {\n var defaultSize = this._getAttr(\"size\");\n var selected = this.getSelected();\n if (selected === -1) {\n return defaultSize;\n }\n else {\n var tabNode = this._children[selected];\n var tabBorderSize = (this._location._orientation === Orientation_1.Orientation.HORZ) ? tabNode._getAttr(\"borderWidth\") : tabNode._getAttr(\"borderHeight\");\n if (tabBorderSize === -1) {\n return defaultSize;\n }\n else {\n return tabBorderSize;\n }\n }\n };\n BorderNode.prototype.getMinSize = function () {\n return this._getAttr(\"minSize\");\n };\n BorderNode.prototype.getSelected = function () {\n return this._attributes.selected;\n };\n BorderNode.prototype.getSelectedNode = function () {\n if (this.getSelected() !== -1) {\n return this._children[this.getSelected()];\n }\n return undefined;\n };\n BorderNode.prototype.getOrientation = function () {\n return this._location.getOrientation();\n };\n /**\n * Returns the config attribute that can be used to store node specific data that\n * WILL be saved to the json. The config attribute should be changed via the action Actions.updateNodeAttributes rather\n * than directly, for example:\n * this.state.model.doAction(\n * FlexLayout.Actions.updateNodeAttributes(node.getId(), {config:myConfigObject}));\n */\n BorderNode.prototype.getConfig = function () {\n return this._attributes.config;\n };\n BorderNode.prototype.isMaximized = function () {\n return false;\n };\n BorderNode.prototype.isShowing = function () {\n var show = this._attributes.show;\n if (show) {\n if (this._model._getShowHiddenBorder() !== this._location && this.isAutoHide() && this._children.length === 0) {\n return false;\n }\n return true;\n }\n else {\n return false;\n }\n };\n BorderNode.prototype.isAutoHide = function () {\n return this._getAttr(\"enableAutoHide\");\n };\n /** @internal */\n BorderNode.prototype._setSelected = function (index) {\n this._attributes.selected = index;\n };\n /** @internal */\n BorderNode.prototype._setSize = function (pos) {\n var selected = this.getSelected();\n if (selected === -1) {\n this._attributes.size = pos;\n }\n else {\n var tabNode = this._children[selected];\n var tabBorderSize = (this._location._orientation === Orientation_1.Orientation.HORZ) ? tabNode._getAttr(\"borderWidth\") : tabNode._getAttr(\"borderHeight\");\n if (tabBorderSize === -1) {\n this._attributes.size = pos;\n }\n else {\n if (this._location._orientation === Orientation_1.Orientation.HORZ) {\n tabNode._setBorderWidth(pos);\n }\n else {\n tabNode._setBorderHeight(pos);\n }\n }\n }\n };\n /** @internal */\n BorderNode.prototype._updateAttrs = function (json) {\n BorderNode._attributeDefinitions.update(json, this._attributes);\n };\n /** @internal */\n BorderNode.prototype._getDrawChildren = function () {\n return this._drawChildren;\n };\n /** @internal */\n BorderNode.prototype._setAdjustedSize = function (size) {\n this._adjustedSize = size;\n };\n /** @internal */\n BorderNode.prototype._getAdjustedSize = function () {\n return this._adjustedSize;\n };\n /** @internal */\n BorderNode.prototype._layoutBorderOuter = function (outer, metrics) {\n this.calcBorderBarSize(metrics);\n var split1 = this._location.split(outer, this.getBorderBarSize()); // split border outer\n this._tabHeaderRect = split1.start;\n return split1.end;\n };\n /** @internal */\n BorderNode.prototype._layoutBorderInner = function (inner, metrics) {\n this._drawChildren = [];\n var location = this._location;\n var split1 = location.split(inner, this._adjustedSize + this._model.getSplitterSize()); // split off tab contents\n var split2 = location.reflect().split(split1.start, this._model.getSplitterSize()); // split contents into content and splitter\n this._contentRect = split2.end;\n for (var i = 0; i < this._children.length; i++) {\n var child = this._children[i];\n child._layout(this._contentRect, metrics);\n child._setVisible(i === this.getSelected());\n this._drawChildren.push(child);\n }\n if (this.getSelected() === -1) {\n return inner;\n }\n else {\n var newSplitter = new SplitterNode_1.SplitterNode(this._model);\n newSplitter._setParent(this);\n newSplitter._setRect(split2.start);\n this._drawChildren.push(newSplitter);\n return split1.end;\n }\n };\n /** @internal */\n BorderNode.prototype._remove = function (node) {\n var removedIndex = this._removeChild(node);\n if (this.getSelected() !== -1) {\n (0, Utils_1.adjustSelectedIndex)(this, removedIndex);\n }\n };\n /** @internal */\n BorderNode.prototype.canDrop = function (dragNode, x, y) {\n if (dragNode.getType() !== TabNode_1.TabNode.TYPE) {\n return undefined;\n }\n var dropInfo;\n var dockLocation = DockLocation_1.DockLocation.CENTER;\n if (this._tabHeaderRect.contains(x, y)) {\n if (this._location._orientation === Orientation_1.Orientation.VERT) {\n if (this._children.length > 0) {\n var child = this._children[0];\n var childRect = child.getTabRect();\n var childY = childRect.y;\n var childHeight = childRect.height;\n var pos = this._tabHeaderRect.x;\n var childCenter = 0;\n for (var i = 0; i < this._children.length; i++) {\n child = this._children[i];\n childRect = child.getTabRect();\n childCenter = childRect.x + childRect.width / 2;\n if (x >= pos && x < childCenter) {\n var outlineRect = new Rect_1.Rect(childRect.x - 2, childY, 3, childHeight);\n dropInfo = new DropInfo_1.DropInfo(this, outlineRect, dockLocation, i, Types_1.CLASSES.FLEXLAYOUT__OUTLINE_RECT);\n break;\n }\n pos = childCenter;\n }\n if (dropInfo == null) {\n var outlineRect = new Rect_1.Rect(childRect.getRight() - 2, childY, 3, childHeight);\n dropInfo = new DropInfo_1.DropInfo(this, outlineRect, dockLocation, this._children.length, Types_1.CLASSES.FLEXLAYOUT__OUTLINE_RECT);\n }\n }\n else {\n var outlineRect = new Rect_1.Rect(this._tabHeaderRect.x + 1, this._tabHeaderRect.y + 2, 3, 18);\n dropInfo = new DropInfo_1.DropInfo(this, outlineRect, dockLocation, 0, Types_1.CLASSES.FLEXLAYOUT__OUTLINE_RECT);\n }\n }\n else {\n if (this._children.length > 0) {\n var child = this._children[0];\n var childRect = child.getTabRect();\n var childX = childRect.x;\n var childWidth = childRect.width;\n var pos = this._tabHeaderRect.y;\n var childCenter = 0;\n for (var i = 0; i < this._children.length; i++) {\n child = this._children[i];\n childRect = child.getTabRect();\n childCenter = childRect.y + childRect.height / 2;\n if (y >= pos && y < childCenter) {\n var outlineRect = new Rect_1.Rect(childX, childRect.y - 2, childWidth, 3);\n dropInfo = new DropInfo_1.DropInfo(this, outlineRect, dockLocation, i, Types_1.CLASSES.FLEXLAYOUT__OUTLINE_RECT);\n break;\n }\n pos = childCenter;\n }\n if (dropInfo == null) {\n var outlineRect = new Rect_1.Rect(childX, childRect.getBottom() - 2, childWidth, 3);\n dropInfo = new DropInfo_1.DropInfo(this, outlineRect, dockLocation, this._children.length, Types_1.CLASSES.FLEXLAYOUT__OUTLINE_RECT);\n }\n }\n else {\n var outlineRect = new Rect_1.Rect(this._tabHeaderRect.x + 2, this._tabHeaderRect.y + 1, 18, 3);\n dropInfo = new DropInfo_1.DropInfo(this, outlineRect, dockLocation, 0, Types_1.CLASSES.FLEXLAYOUT__OUTLINE_RECT);\n }\n }\n if (!dragNode._canDockInto(dragNode, dropInfo)) {\n return undefined;\n }\n }\n else if (this.getSelected() !== -1 && this._contentRect.contains(x, y)) {\n var outlineRect = this._contentRect;\n dropInfo = new DropInfo_1.DropInfo(this, outlineRect, dockLocation, -1, Types_1.CLASSES.FLEXLAYOUT__OUTLINE_RECT);\n if (!dragNode._canDockInto(dragNode, dropInfo)) {\n return undefined;\n }\n }\n return dropInfo;\n };\n /** @internal */\n BorderNode.prototype.drop = function (dragNode, location, index, select) {\n var fromIndex = 0;\n var dragParent = dragNode.getParent();\n if (dragParent !== undefined) {\n fromIndex = dragParent._removeChild(dragNode);\n (0, Utils_1.adjustSelectedIndex)(dragParent, fromIndex);\n }\n // if dropping a tab back to same tabset and moving to forward position then reduce insertion index\n if (dragNode.getType() === TabNode_1.TabNode.TYPE && dragParent === this && fromIndex < index && index > 0) {\n index--;\n }\n // simple_bundled dock to existing tabset\n var insertPos = index;\n if (insertPos === -1) {\n insertPos = this._children.length;\n }\n if (dragNode.getType() === TabNode_1.TabNode.TYPE) {\n this._addChild(dragNode, insertPos);\n }\n if (select || (select !== false && this.isAutoSelectTab())) {\n this._setSelected(insertPos);\n }\n this._model._tidy();\n };\n BorderNode.prototype.toJson = function () {\n var json = {};\n BorderNode._attributeDefinitions.toJson(json, this._attributes);\n json.location = this._location.getName();\n json.children = this._children.map(function (child) { return child.toJson(); });\n return json;\n };\n /** @internal */\n BorderNode.prototype._getSplitterBounds = function (splitter, useMinSize) {\n if (useMinSize === void 0) { useMinSize = false; }\n var pBounds = [0, 0];\n var minSize = useMinSize ? this.getMinSize() : 0;\n var outerRect = this._model._getOuterInnerRects().outer;\n var innerRect = this._model._getOuterInnerRects().inner;\n var rootRow = this._model.getRoot();\n if (this._location === DockLocation_1.DockLocation.TOP) {\n pBounds[0] = outerRect.y + minSize;\n pBounds[1] = Math.max(pBounds[0], innerRect.getBottom() - splitter.getHeight() - rootRow.getMinHeight());\n }\n else if (this._location === DockLocation_1.DockLocation.LEFT) {\n pBounds[0] = outerRect.x + minSize;\n pBounds[1] = Math.max(pBounds[0], innerRect.getRight() - splitter.getWidth() - rootRow.getMinWidth());\n }\n else if (this._location === DockLocation_1.DockLocation.BOTTOM) {\n pBounds[1] = outerRect.getBottom() - splitter.getHeight() - minSize;\n pBounds[0] = Math.min(pBounds[1], innerRect.y + rootRow.getMinHeight());\n }\n else if (this._location === DockLocation_1.DockLocation.RIGHT) {\n pBounds[1] = outerRect.getRight() - splitter.getWidth() - minSize;\n pBounds[0] = Math.min(pBounds[1], innerRect.x + rootRow.getMinWidth());\n }\n return pBounds;\n };\n /** @internal */\n BorderNode.prototype._calculateSplit = function (splitter, splitterPos) {\n var pBounds = this._getSplitterBounds(splitter);\n if (this._location === DockLocation_1.DockLocation.BOTTOM || this._location === DockLocation_1.DockLocation.RIGHT) {\n return Math.max(0, pBounds[1] - splitterPos);\n }\n else {\n return Math.max(0, splitterPos - pBounds[0]);\n }\n };\n /** @internal */\n BorderNode.prototype._getAttributeDefinitions = function () {\n return BorderNode._attributeDefinitions;\n };\n /** @internal */\n BorderNode.getAttributeDefinitions = function () {\n return BorderNode._attributeDefinitions;\n };\n BorderNode.TYPE = \"border\";\n /** @internal */\n BorderNode._attributeDefinitions = BorderNode._createAttributeDefinitions();\n return BorderNode;\n}(Node_1.Node));\nexports.BorderNode = BorderNode;\n\n\n//# sourceURL=webpack://FlexLayout/./src/model/BorderNode.ts?");
309
+ eval("\nvar __extends = (this && this.__extends) || (function () {\n var extendStatics = function (d, b) {\n extendStatics = Object.setPrototypeOf ||\n ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||\n function (d, b) { for (var p in b) if (Object.prototype.hasOwnProperty.call(b, p)) d[p] = b[p]; };\n return extendStatics(d, b);\n };\n return function (d, b) {\n if (typeof b !== \"function\" && b !== null)\n throw new TypeError(\"Class extends value \" + String(b) + \" is not a constructor or null\");\n extendStatics(d, b);\n function __() { this.constructor = d; }\n d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());\n };\n})();\nObject.defineProperty(exports, \"__esModule\", ({ value: true }));\nexports.BorderNode = void 0;\nvar Attribute_1 = __webpack_require__(/*! ../Attribute */ \"./src/Attribute.ts\");\nvar AttributeDefinitions_1 = __webpack_require__(/*! ../AttributeDefinitions */ \"./src/AttributeDefinitions.ts\");\nvar DockLocation_1 = __webpack_require__(/*! ../DockLocation */ \"./src/DockLocation.ts\");\nvar DropInfo_1 = __webpack_require__(/*! ../DropInfo */ \"./src/DropInfo.ts\");\nvar Orientation_1 = __webpack_require__(/*! ../Orientation */ \"./src/Orientation.ts\");\nvar Rect_1 = __webpack_require__(/*! ../Rect */ \"./src/Rect.ts\");\nvar Types_1 = __webpack_require__(/*! ../Types */ \"./src/Types.ts\");\nvar Node_1 = __webpack_require__(/*! ./Node */ \"./src/model/Node.ts\");\nvar SplitterNode_1 = __webpack_require__(/*! ./SplitterNode */ \"./src/model/SplitterNode.ts\");\nvar TabNode_1 = __webpack_require__(/*! ./TabNode */ \"./src/model/TabNode.ts\");\nvar Utils_1 = __webpack_require__(/*! ./Utils */ \"./src/model/Utils.ts\");\nvar BorderNode = /** @class */ (function (_super) {\n __extends(BorderNode, _super);\n /** @internal */\n function BorderNode(location, json, model) {\n var _this = _super.call(this, model) || this;\n /** @internal */\n _this._adjustedSize = 0;\n /** @internal */\n _this._calculatedBorderBarSize = 0;\n _this._location = location;\n _this._drawChildren = [];\n _this._attributes.id = \"border_\".concat(location.getName());\n BorderNode._attributeDefinitions.fromJson(json, _this._attributes);\n model._addNode(_this);\n return _this;\n }\n /** @internal */\n BorderNode._fromJson = function (json, model) {\n var location = DockLocation_1.DockLocation.getByName(json.location);\n var border = new BorderNode(location, json, model);\n if (json.children) {\n border._children = json.children.map(function (jsonChild) {\n var child = TabNode_1.TabNode._fromJson(jsonChild, model);\n child._setParent(border);\n return child;\n });\n }\n return border;\n };\n /** @internal */\n BorderNode._createAttributeDefinitions = function () {\n var attributeDefinitions = new AttributeDefinitions_1.AttributeDefinitions();\n attributeDefinitions.add(\"type\", BorderNode.TYPE, true).setType(Attribute_1.Attribute.STRING).setFixed();\n attributeDefinitions.add(\"selected\", -1).setType(Attribute_1.Attribute.NUMBER);\n attributeDefinitions.add(\"show\", true).setType(Attribute_1.Attribute.BOOLEAN);\n attributeDefinitions.add(\"config\", undefined).setType(\"any\");\n attributeDefinitions.addInherited(\"barSize\", \"borderBarSize\").setType(Attribute_1.Attribute.NUMBER);\n attributeDefinitions.addInherited(\"enableDrop\", \"borderEnableDrop\").setType(Attribute_1.Attribute.BOOLEAN);\n attributeDefinitions.addInherited(\"className\", \"borderClassName\").setType(Attribute_1.Attribute.STRING);\n attributeDefinitions.addInherited(\"autoSelectTabWhenOpen\", \"borderAutoSelectTabWhenOpen\").setType(Attribute_1.Attribute.BOOLEAN);\n attributeDefinitions.addInherited(\"autoSelectTabWhenClosed\", \"borderAutoSelectTabWhenClosed\").setType(Attribute_1.Attribute.BOOLEAN);\n attributeDefinitions.addInherited(\"size\", \"borderSize\").setType(Attribute_1.Attribute.NUMBER);\n attributeDefinitions.addInherited(\"minSize\", \"borderMinSize\").setType(Attribute_1.Attribute.NUMBER);\n attributeDefinitions.addInherited(\"enableAutoHide\", \"borderEnableAutoHide\").setType(Attribute_1.Attribute.BOOLEAN);\n return attributeDefinitions;\n };\n BorderNode.prototype.getLocation = function () {\n return this._location;\n };\n BorderNode.prototype.getTabHeaderRect = function () {\n return this._tabHeaderRect;\n };\n BorderNode.prototype.getRect = function () {\n return this._tabHeaderRect;\n };\n BorderNode.prototype.getContentRect = function () {\n return this._contentRect;\n };\n BorderNode.prototype.isEnableDrop = function () {\n return this._getAttr(\"enableDrop\");\n };\n BorderNode.prototype.isAutoSelectTab = function (whenOpen) {\n if (whenOpen == null) {\n whenOpen = this.getSelected() !== -1;\n }\n if (whenOpen) {\n return this._getAttr(\"autoSelectTabWhenOpen\");\n }\n else {\n return this._getAttr(\"autoSelectTabWhenClosed\");\n }\n };\n BorderNode.prototype.getClassName = function () {\n return this._getAttr(\"className\");\n };\n /** @internal */\n BorderNode.prototype.calcBorderBarSize = function (metrics) {\n var barSize = this._getAttr(\"barSize\");\n if (barSize !== 0) {\n // its defined\n this._calculatedBorderBarSize = barSize;\n }\n else {\n this._calculatedBorderBarSize = metrics.borderBarSize;\n }\n };\n BorderNode.prototype.getBorderBarSize = function () {\n return this._calculatedBorderBarSize;\n };\n BorderNode.prototype.getSize = function () {\n var defaultSize = this._getAttr(\"size\");\n var selected = this.getSelected();\n if (selected === -1) {\n return defaultSize;\n }\n else {\n var tabNode = this._children[selected];\n var tabBorderSize = (this._location._orientation === Orientation_1.Orientation.HORZ) ? tabNode._getAttr(\"borderWidth\") : tabNode._getAttr(\"borderHeight\");\n if (tabBorderSize === -1) {\n return defaultSize;\n }\n else {\n return tabBorderSize;\n }\n }\n };\n BorderNode.prototype.getMinSize = function () {\n return this._getAttr(\"minSize\");\n };\n BorderNode.prototype.getSelected = function () {\n return this._attributes.selected;\n };\n BorderNode.prototype.getSelectedNode = function () {\n if (this.getSelected() !== -1) {\n return this._children[this.getSelected()];\n }\n return undefined;\n };\n BorderNode.prototype.getOrientation = function () {\n return this._location.getOrientation();\n };\n /**\n * Returns the config attribute that can be used to store node specific data that\n * WILL be saved to the json. The config attribute should be changed via the action Actions.updateNodeAttributes rather\n * than directly, for example:\n * this.state.model.doAction(\n * FlexLayout.Actions.updateNodeAttributes(node.getId(), {config:myConfigObject}));\n */\n BorderNode.prototype.getConfig = function () {\n return this._attributes.config;\n };\n BorderNode.prototype.isMaximized = function () {\n return false;\n };\n BorderNode.prototype.isShowing = function () {\n var show = this._attributes.show;\n if (show) {\n if (this._model._getShowHiddenBorder() !== this._location && this.isAutoHide() && this._children.length === 0) {\n return false;\n }\n return true;\n }\n else {\n return false;\n }\n };\n BorderNode.prototype.isAutoHide = function () {\n return this._getAttr(\"enableAutoHide\");\n };\n /** @internal */\n BorderNode.prototype._setSelected = function (index) {\n this._attributes.selected = index;\n };\n /** @internal */\n BorderNode.prototype._setSize = function (pos) {\n var selected = this.getSelected();\n if (selected === -1) {\n this._attributes.size = pos;\n }\n else {\n var tabNode = this._children[selected];\n var tabBorderSize = (this._location._orientation === Orientation_1.Orientation.HORZ) ? tabNode._getAttr(\"borderWidth\") : tabNode._getAttr(\"borderHeight\");\n if (tabBorderSize === -1) {\n this._attributes.size = pos;\n }\n else {\n if (this._location._orientation === Orientation_1.Orientation.HORZ) {\n tabNode._setBorderWidth(pos);\n }\n else {\n tabNode._setBorderHeight(pos);\n }\n }\n }\n };\n /** @internal */\n BorderNode.prototype._updateAttrs = function (json) {\n BorderNode._attributeDefinitions.update(json, this._attributes);\n };\n /** @internal */\n BorderNode.prototype._getDrawChildren = function () {\n return this._drawChildren;\n };\n /** @internal */\n BorderNode.prototype._setAdjustedSize = function (size) {\n this._adjustedSize = size;\n };\n /** @internal */\n BorderNode.prototype._getAdjustedSize = function () {\n return this._adjustedSize;\n };\n /** @internal */\n BorderNode.prototype._layoutBorderOuter = function (outer, metrics) {\n this.calcBorderBarSize(metrics);\n var split1 = this._location.split(outer, this.getBorderBarSize()); // split border outer\n this._tabHeaderRect = split1.start;\n return split1.end;\n };\n /** @internal */\n BorderNode.prototype._layoutBorderInner = function (inner, metrics) {\n this._drawChildren = [];\n var location = this._location;\n var split1 = location.split(inner, this._adjustedSize + this._model.getSplitterSize()); // split off tab contents\n var split2 = location.reflect().split(split1.start, this._model.getSplitterSize()); // split contents into content and splitter\n this._contentRect = split2.end;\n for (var i = 0; i < this._children.length; i++) {\n var child = this._children[i];\n child._layout(this._contentRect, metrics);\n child._setVisible(i === this.getSelected());\n this._drawChildren.push(child);\n }\n if (this.getSelected() === -1) {\n return inner;\n }\n else {\n var newSplitter = new SplitterNode_1.SplitterNode(this._model);\n newSplitter._setParent(this);\n newSplitter._setRect(split2.start);\n this._drawChildren.push(newSplitter);\n return split1.end;\n }\n };\n /** @internal */\n BorderNode.prototype._remove = function (node) {\n var removedIndex = this._removeChild(node);\n if (this.getSelected() !== -1) {\n (0, Utils_1.adjustSelectedIndex)(this, removedIndex);\n }\n };\n /** @internal */\n BorderNode.prototype.canDrop = function (dragNode, x, y) {\n if (dragNode.getType() !== TabNode_1.TabNode.TYPE) {\n return undefined;\n }\n var dropInfo;\n var dockLocation = DockLocation_1.DockLocation.CENTER;\n if (this._tabHeaderRect.contains(x, y)) {\n if (this._location._orientation === Orientation_1.Orientation.VERT) {\n if (this._children.length > 0) {\n var child = this._children[0];\n var childRect = child.getTabRect();\n var childY = childRect.y;\n var childHeight = childRect.height;\n var pos = this._tabHeaderRect.x;\n var childCenter = 0;\n for (var i = 0; i < this._children.length; i++) {\n child = this._children[i];\n childRect = child.getTabRect();\n childCenter = childRect.x + childRect.width / 2;\n if (x >= pos && x < childCenter) {\n var outlineRect = new Rect_1.Rect(childRect.x - 2, childY, 3, childHeight);\n dropInfo = new DropInfo_1.DropInfo(this, outlineRect, dockLocation, i, Types_1.CLASSES.FLEXLAYOUT__OUTLINE_RECT);\n break;\n }\n pos = childCenter;\n }\n if (dropInfo == null) {\n var outlineRect = new Rect_1.Rect(childRect.getRight() - 2, childY, 3, childHeight);\n dropInfo = new DropInfo_1.DropInfo(this, outlineRect, dockLocation, this._children.length, Types_1.CLASSES.FLEXLAYOUT__OUTLINE_RECT);\n }\n }\n else {\n var outlineRect = new Rect_1.Rect(this._tabHeaderRect.x + 1, this._tabHeaderRect.y + 2, 3, 18);\n dropInfo = new DropInfo_1.DropInfo(this, outlineRect, dockLocation, 0, Types_1.CLASSES.FLEXLAYOUT__OUTLINE_RECT);\n }\n }\n else {\n if (this._children.length > 0) {\n var child = this._children[0];\n var childRect = child.getTabRect();\n var childX = childRect.x;\n var childWidth = childRect.width;\n var pos = this._tabHeaderRect.y;\n var childCenter = 0;\n for (var i = 0; i < this._children.length; i++) {\n child = this._children[i];\n childRect = child.getTabRect();\n childCenter = childRect.y + childRect.height / 2;\n if (y >= pos && y < childCenter) {\n var outlineRect = new Rect_1.Rect(childX, childRect.y - 2, childWidth, 3);\n dropInfo = new DropInfo_1.DropInfo(this, outlineRect, dockLocation, i, Types_1.CLASSES.FLEXLAYOUT__OUTLINE_RECT);\n break;\n }\n pos = childCenter;\n }\n if (dropInfo == null) {\n var outlineRect = new Rect_1.Rect(childX, childRect.getBottom() - 2, childWidth, 3);\n dropInfo = new DropInfo_1.DropInfo(this, outlineRect, dockLocation, this._children.length, Types_1.CLASSES.FLEXLAYOUT__OUTLINE_RECT);\n }\n }\n else {\n var outlineRect = new Rect_1.Rect(this._tabHeaderRect.x + 2, this._tabHeaderRect.y + 1, 18, 3);\n dropInfo = new DropInfo_1.DropInfo(this, outlineRect, dockLocation, 0, Types_1.CLASSES.FLEXLAYOUT__OUTLINE_RECT);\n }\n }\n if (!dragNode._canDockInto(dragNode, dropInfo)) {\n return undefined;\n }\n }\n else if (this.getSelected() !== -1 && this._contentRect.contains(x, y)) {\n var outlineRect = this._contentRect;\n dropInfo = new DropInfo_1.DropInfo(this, outlineRect, dockLocation, -1, Types_1.CLASSES.FLEXLAYOUT__OUTLINE_RECT);\n if (!dragNode._canDockInto(dragNode, dropInfo)) {\n return undefined;\n }\n }\n return dropInfo;\n };\n /** @internal */\n BorderNode.prototype.drop = function (dragNode, location, index, select) {\n var fromIndex = 0;\n var dragParent = dragNode.getParent();\n if (dragParent !== undefined) {\n fromIndex = dragParent._removeChild(dragNode);\n // if selected node in border is being docked into a different border then deselect border tabs\n if (dragParent !== this && dragParent instanceof BorderNode && dragParent.getSelected() === fromIndex) {\n dragParent._setSelected(-1);\n }\n else {\n (0, Utils_1.adjustSelectedIndex)(dragParent, fromIndex);\n }\n }\n // if dropping a tab back to same tabset and moving to forward position then reduce insertion index\n if (dragNode.getType() === TabNode_1.TabNode.TYPE && dragParent === this && fromIndex < index && index > 0) {\n index--;\n }\n // simple_bundled dock to existing tabset\n var insertPos = index;\n if (insertPos === -1) {\n insertPos = this._children.length;\n }\n if (dragNode.getType() === TabNode_1.TabNode.TYPE) {\n this._addChild(dragNode, insertPos);\n }\n if (select || (select !== false && this.isAutoSelectTab())) {\n this._setSelected(insertPos);\n }\n this._model._tidy();\n };\n BorderNode.prototype.toJson = function () {\n var json = {};\n BorderNode._attributeDefinitions.toJson(json, this._attributes);\n json.location = this._location.getName();\n json.children = this._children.map(function (child) { return child.toJson(); });\n return json;\n };\n /** @internal */\n BorderNode.prototype._getSplitterBounds = function (splitter, useMinSize) {\n if (useMinSize === void 0) { useMinSize = false; }\n var pBounds = [0, 0];\n var minSize = useMinSize ? this.getMinSize() : 0;\n var outerRect = this._model._getOuterInnerRects().outer;\n var innerRect = this._model._getOuterInnerRects().inner;\n var rootRow = this._model.getRoot();\n if (this._location === DockLocation_1.DockLocation.TOP) {\n pBounds[0] = outerRect.y + minSize;\n pBounds[1] = Math.max(pBounds[0], innerRect.getBottom() - splitter.getHeight() - rootRow.getMinHeight());\n }\n else if (this._location === DockLocation_1.DockLocation.LEFT) {\n pBounds[0] = outerRect.x + minSize;\n pBounds[1] = Math.max(pBounds[0], innerRect.getRight() - splitter.getWidth() - rootRow.getMinWidth());\n }\n else if (this._location === DockLocation_1.DockLocation.BOTTOM) {\n pBounds[1] = outerRect.getBottom() - splitter.getHeight() - minSize;\n pBounds[0] = Math.min(pBounds[1], innerRect.y + rootRow.getMinHeight());\n }\n else if (this._location === DockLocation_1.DockLocation.RIGHT) {\n pBounds[1] = outerRect.getRight() - splitter.getWidth() - minSize;\n pBounds[0] = Math.min(pBounds[1], innerRect.x + rootRow.getMinWidth());\n }\n return pBounds;\n };\n /** @internal */\n BorderNode.prototype._calculateSplit = function (splitter, splitterPos) {\n var pBounds = this._getSplitterBounds(splitter);\n if (this._location === DockLocation_1.DockLocation.BOTTOM || this._location === DockLocation_1.DockLocation.RIGHT) {\n return Math.max(0, pBounds[1] - splitterPos);\n }\n else {\n return Math.max(0, splitterPos - pBounds[0]);\n }\n };\n /** @internal */\n BorderNode.prototype._getAttributeDefinitions = function () {\n return BorderNode._attributeDefinitions;\n };\n /** @internal */\n BorderNode.getAttributeDefinitions = function () {\n return BorderNode._attributeDefinitions;\n };\n BorderNode.TYPE = \"border\";\n /** @internal */\n BorderNode._attributeDefinitions = BorderNode._createAttributeDefinitions();\n return BorderNode;\n}(Node_1.Node));\nexports.BorderNode = BorderNode;\n\n\n//# sourceURL=webpack://FlexLayout/./src/model/BorderNode.ts?");
310
310
 
311
311
  /***/ }),
312
312
 
@@ -416,7 +416,7 @@ eval("\nvar __extends = (this && this.__extends) || (function () {\n var exte
416
416
  \*********************************/
417
417
  /***/ (function(__unused_webpack_module, exports, __webpack_require__) {
418
418
 
419
- eval("\nvar __extends = (this && this.__extends) || (function () {\n var extendStatics = function (d, b) {\n extendStatics = Object.setPrototypeOf ||\n ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||\n function (d, b) { for (var p in b) if (Object.prototype.hasOwnProperty.call(b, p)) d[p] = b[p]; };\n return extendStatics(d, b);\n };\n return function (d, b) {\n if (typeof b !== \"function\" && b !== null)\n throw new TypeError(\"Class extends value \" + String(b) + \" is not a constructor or null\");\n extendStatics(d, b);\n function __() { this.constructor = d; }\n d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());\n };\n})();\nObject.defineProperty(exports, \"__esModule\", ({ value: true }));\nexports.TabSetNode = void 0;\nvar Attribute_1 = __webpack_require__(/*! ../Attribute */ \"./src/Attribute.ts\");\nvar AttributeDefinitions_1 = __webpack_require__(/*! ../AttributeDefinitions */ \"./src/AttributeDefinitions.ts\");\nvar DockLocation_1 = __webpack_require__(/*! ../DockLocation */ \"./src/DockLocation.ts\");\nvar DropInfo_1 = __webpack_require__(/*! ../DropInfo */ \"./src/DropInfo.ts\");\nvar Orientation_1 = __webpack_require__(/*! ../Orientation */ \"./src/Orientation.ts\");\nvar Rect_1 = __webpack_require__(/*! ../Rect */ \"./src/Rect.ts\");\nvar Types_1 = __webpack_require__(/*! ../Types */ \"./src/Types.ts\");\nvar Node_1 = __webpack_require__(/*! ./Node */ \"./src/model/Node.ts\");\nvar RowNode_1 = __webpack_require__(/*! ./RowNode */ \"./src/model/RowNode.ts\");\nvar TabNode_1 = __webpack_require__(/*! ./TabNode */ \"./src/model/TabNode.ts\");\nvar Utils_1 = __webpack_require__(/*! ./Utils */ \"./src/model/Utils.ts\");\nvar TabSetNode = /** @class */ (function (_super) {\n __extends(TabSetNode, _super);\n /** @internal */\n function TabSetNode(model, json) {\n var _this = _super.call(this, model) || this;\n TabSetNode._attributeDefinitions.fromJson(json, _this._attributes);\n model._addNode(_this);\n _this._calculatedTabBarHeight = 0;\n _this._calculatedHeaderBarHeight = 0;\n return _this;\n }\n /** @internal */\n TabSetNode._fromJson = function (json, model) {\n var newLayoutNode = new TabSetNode(model, json);\n if (json.children != null) {\n for (var _i = 0, _a = json.children; _i < _a.length; _i++) {\n var jsonChild = _a[_i];\n var child = TabNode_1.TabNode._fromJson(jsonChild, model);\n newLayoutNode._addChild(child);\n }\n }\n if (newLayoutNode._children.length === 0) {\n newLayoutNode._setSelected(-1);\n }\n if (json.maximized && json.maximized === true) {\n model._setMaximizedTabset(newLayoutNode);\n }\n if (json.active && json.active === true) {\n model._setActiveTabset(newLayoutNode);\n }\n return newLayoutNode;\n };\n /** @internal */\n TabSetNode._createAttributeDefinitions = function () {\n var attributeDefinitions = new AttributeDefinitions_1.AttributeDefinitions();\n attributeDefinitions.add(\"type\", TabSetNode.TYPE, true).setType(Attribute_1.Attribute.STRING).setFixed();\n attributeDefinitions.add(\"id\", undefined).setType(Attribute_1.Attribute.STRING);\n attributeDefinitions.add(\"weight\", 100).setType(Attribute_1.Attribute.NUMBER);\n attributeDefinitions.add(\"width\", undefined).setType(Attribute_1.Attribute.NUMBER);\n attributeDefinitions.add(\"height\", undefined).setType(Attribute_1.Attribute.NUMBER);\n attributeDefinitions.add(\"selected\", 0).setType(Attribute_1.Attribute.NUMBER);\n attributeDefinitions.add(\"name\", undefined).setType(Attribute_1.Attribute.STRING);\n attributeDefinitions.add(\"config\", undefined).setType(\"any\");\n attributeDefinitions.addInherited(\"enableDeleteWhenEmpty\", \"tabSetEnableDeleteWhenEmpty\");\n attributeDefinitions.addInherited(\"enableDrop\", \"tabSetEnableDrop\");\n attributeDefinitions.addInherited(\"enableDrag\", \"tabSetEnableDrag\");\n attributeDefinitions.addInherited(\"enableDivide\", \"tabSetEnableDivide\");\n attributeDefinitions.addInherited(\"enableMaximize\", \"tabSetEnableMaximize\");\n attributeDefinitions.addInherited(\"enableClose\", \"tabSetEnableClose\");\n attributeDefinitions.addInherited(\"classNameTabStrip\", \"tabSetClassNameTabStrip\");\n attributeDefinitions.addInherited(\"classNameHeader\", \"tabSetClassNameHeader\");\n attributeDefinitions.addInherited(\"enableTabStrip\", \"tabSetEnableTabStrip\");\n attributeDefinitions.addInherited(\"borderInsets\", \"tabSetBorderInsets\");\n attributeDefinitions.addInherited(\"marginInsets\", \"tabSetMarginInsets\");\n attributeDefinitions.addInherited(\"minWidth\", \"tabSetMinWidth\");\n attributeDefinitions.addInherited(\"minHeight\", \"tabSetMinHeight\");\n attributeDefinitions.addInherited(\"headerHeight\", \"tabSetHeaderHeight\");\n attributeDefinitions.addInherited(\"tabStripHeight\", \"tabSetTabStripHeight\");\n attributeDefinitions.addInherited(\"tabLocation\", \"tabSetTabLocation\");\n attributeDefinitions.addInherited(\"autoSelectTab\", \"tabSetAutoSelectTab\").setType(Attribute_1.Attribute.BOOLEAN);\n return attributeDefinitions;\n };\n TabSetNode.prototype.getName = function () {\n return this._getAttr(\"name\");\n };\n TabSetNode.prototype.getSelected = function () {\n var selected = this._attributes.selected;\n if (selected !== undefined) {\n return selected;\n }\n return -1;\n };\n TabSetNode.prototype.getSelectedNode = function () {\n var selected = this.getSelected();\n if (selected !== -1) {\n return this._children[selected];\n }\n return undefined;\n };\n TabSetNode.prototype.getWeight = function () {\n return this._getAttr(\"weight\");\n };\n TabSetNode.prototype.getWidth = function () {\n return this._getAttr(\"width\");\n };\n TabSetNode.prototype.getMinWidth = function () {\n return this._getAttr(\"minWidth\");\n };\n TabSetNode.prototype.getHeight = function () {\n return this._getAttr(\"height\");\n };\n TabSetNode.prototype.getMinHeight = function () {\n return this._getAttr(\"minHeight\");\n };\n /** @internal */\n TabSetNode.prototype.getMinSize = function (orientation) {\n if (orientation === Orientation_1.Orientation.HORZ) {\n return this.getMinWidth();\n }\n else {\n return this.getMinHeight();\n }\n };\n /**\n * Returns the config attribute that can be used to store node specific data that\n * WILL be saved to the json. The config attribute should be changed via the action Actions.updateNodeAttributes rather\n * than directly, for example:\n * this.state.model.doAction(\n * FlexLayout.Actions.updateNodeAttributes(node.getId(), {config:myConfigObject}));\n */\n TabSetNode.prototype.getConfig = function () {\n return this._attributes.config;\n };\n TabSetNode.prototype.isMaximized = function () {\n return this._model.getMaximizedTabset() === this;\n };\n TabSetNode.prototype.isActive = function () {\n return this._model.getActiveTabset() === this;\n };\n TabSetNode.prototype.isEnableDeleteWhenEmpty = function () {\n return this._getAttr(\"enableDeleteWhenEmpty\");\n };\n TabSetNode.prototype.isEnableDrop = function () {\n return this._getAttr(\"enableDrop\");\n };\n TabSetNode.prototype.isEnableDrag = function () {\n return this._getAttr(\"enableDrag\");\n };\n TabSetNode.prototype.isEnableDivide = function () {\n return this._getAttr(\"enableDivide\");\n };\n TabSetNode.prototype.isEnableMaximize = function () {\n return this._getAttr(\"enableMaximize\");\n };\n TabSetNode.prototype.isEnableClose = function () {\n return this._getAttr(\"enableClose\");\n };\n TabSetNode.prototype.canMaximize = function () {\n if (this.isEnableMaximize()) {\n // always allow maximize toggle if already maximized\n if (this.getModel().getMaximizedTabset() === this) {\n return true;\n }\n // only one tabset, so disable\n if (this.getParent() === this.getModel().getRoot() && this.getModel().getRoot().getChildren().length === 1) {\n return false;\n }\n return true;\n }\n return false;\n };\n TabSetNode.prototype.isEnableTabStrip = function () {\n return this._getAttr(\"enableTabStrip\");\n };\n TabSetNode.prototype.isAutoSelectTab = function () {\n return this._getAttr(\"autoSelectTab\");\n };\n TabSetNode.prototype.getClassNameTabStrip = function () {\n return this._getAttr(\"classNameTabStrip\");\n };\n TabSetNode.prototype.getClassNameHeader = function () {\n return this._getAttr(\"classNameHeader\");\n };\n /** @internal */\n TabSetNode.prototype.calculateHeaderBarHeight = function (metrics) {\n var headerBarHeight = this._getAttr(\"headerHeight\");\n if (headerBarHeight !== 0) {\n // its defined\n this._calculatedHeaderBarHeight = headerBarHeight;\n }\n else {\n this._calculatedHeaderBarHeight = metrics.headerBarSize;\n }\n };\n /** @internal */\n TabSetNode.prototype.calculateTabBarHeight = function (metrics) {\n var tabBarHeight = this._getAttr(\"tabStripHeight\");\n if (tabBarHeight !== 0) {\n // its defined\n this._calculatedTabBarHeight = tabBarHeight;\n }\n else {\n this._calculatedTabBarHeight = metrics.tabBarSize;\n }\n };\n TabSetNode.prototype.getHeaderHeight = function () {\n return this._calculatedHeaderBarHeight;\n };\n TabSetNode.prototype.getTabStripHeight = function () {\n return this._calculatedTabBarHeight;\n };\n TabSetNode.prototype.getTabLocation = function () {\n return this._getAttr(\"tabLocation\");\n };\n /** @internal */\n TabSetNode.prototype._setWeight = function (weight) {\n this._attributes.weight = weight;\n };\n /** @internal */\n TabSetNode.prototype._setSelected = function (index) {\n this._attributes.selected = index;\n };\n /** @internal */\n TabSetNode.prototype.canDrop = function (dragNode, x, y) {\n var dropInfo;\n if (dragNode === this) {\n var dockLocation = DockLocation_1.DockLocation.CENTER;\n var outlineRect = this._tabHeaderRect;\n dropInfo = new DropInfo_1.DropInfo(this, outlineRect, dockLocation, -1, Types_1.CLASSES.FLEXLAYOUT__OUTLINE_RECT);\n }\n else if (this._contentRect.contains(x, y)) {\n var dockLocation = DockLocation_1.DockLocation.CENTER;\n if (this._model.getMaximizedTabset() === undefined) {\n dockLocation = DockLocation_1.DockLocation.getLocation(this._contentRect, x, y);\n }\n var outlineRect = dockLocation.getDockRect(this._rect);\n dropInfo = new DropInfo_1.DropInfo(this, outlineRect, dockLocation, -1, Types_1.CLASSES.FLEXLAYOUT__OUTLINE_RECT);\n }\n else if (this._tabHeaderRect != null && this._tabHeaderRect.contains(x, y)) {\n var r = void 0;\n var yy = void 0;\n var h = void 0;\n if (this._children.length === 0) {\n r = this._tabHeaderRect.clone();\n yy = r.y + 3;\n h = r.height - 4;\n r.width = 2;\n }\n else {\n var child = this._children[0];\n r = child.getTabRect();\n yy = r.y;\n h = r.height;\n var p = this._tabHeaderRect.x;\n var childCenter = 0;\n for (var i = 0; i < this._children.length; i++) {\n child = this._children[i];\n r = child.getTabRect();\n childCenter = r.x + r.width / 2;\n if (x >= p && x < childCenter) {\n var dockLocation = DockLocation_1.DockLocation.CENTER;\n var outlineRect = new Rect_1.Rect(r.x - 2, yy, 3, h);\n dropInfo = new DropInfo_1.DropInfo(this, outlineRect, dockLocation, i, Types_1.CLASSES.FLEXLAYOUT__OUTLINE_RECT);\n break;\n }\n p = childCenter;\n }\n }\n if (dropInfo == null) {\n var dockLocation = DockLocation_1.DockLocation.CENTER;\n var outlineRect = new Rect_1.Rect(r.getRight() - 2, yy, 3, h);\n dropInfo = new DropInfo_1.DropInfo(this, outlineRect, dockLocation, this._children.length, Types_1.CLASSES.FLEXLAYOUT__OUTLINE_RECT);\n }\n }\n if (!dragNode._canDockInto(dragNode, dropInfo)) {\n return undefined;\n }\n return dropInfo;\n };\n /** @internal */\n TabSetNode.prototype._layout = function (rect, metrics) {\n this.calculateHeaderBarHeight(metrics);\n this.calculateTabBarHeight(metrics);\n if (this.isMaximized()) {\n rect = this._model.getRoot().getRect();\n }\n rect = rect.removeInsets(this._getAttr(\"marginInsets\"));\n this._rect = rect;\n rect = rect.removeInsets(this._getAttr(\"borderInsets\"));\n var showHeader = this.getName() !== undefined;\n var y = 0;\n var h = 0;\n if (showHeader) {\n y += this._calculatedHeaderBarHeight;\n h += this._calculatedHeaderBarHeight;\n }\n if (this.isEnableTabStrip()) {\n if (this.getTabLocation() === \"top\") {\n this._tabHeaderRect = new Rect_1.Rect(rect.x, rect.y + y, rect.width, this._calculatedTabBarHeight);\n }\n else {\n this._tabHeaderRect = new Rect_1.Rect(rect.x, rect.y + rect.height - this._calculatedTabBarHeight, rect.width, this._calculatedTabBarHeight);\n }\n h += this._calculatedTabBarHeight;\n if (this.getTabLocation() === \"top\") {\n y += this._calculatedTabBarHeight;\n }\n }\n this._contentRect = new Rect_1.Rect(rect.x, rect.y + y, rect.width, rect.height - h);\n for (var i = 0; i < this._children.length; i++) {\n var child = this._children[i];\n child._layout(this._contentRect, metrics);\n child._setVisible(i === this.getSelected());\n }\n };\n /** @internal */\n TabSetNode.prototype._delete = function () {\n this._parent._removeChild(this);\n };\n /** @internal */\n TabSetNode.prototype._remove = function (node) {\n var removedIndex = this._removeChild(node);\n this._model._tidy();\n (0, Utils_1.adjustSelectedIndex)(this, removedIndex);\n };\n /** @internal */\n TabSetNode.prototype.drop = function (dragNode, location, index, select) {\n var dockLocation = location;\n if (this === dragNode) {\n // tabset drop into itself\n return; // dock back to itself\n }\n var dragParent = dragNode.getParent();\n var fromIndex = 0;\n if (dragParent !== undefined) {\n fromIndex = dragParent._removeChild(dragNode);\n (0, Utils_1.adjustSelectedIndex)(dragParent, fromIndex);\n }\n // if dropping a tab back to same tabset and moving to forward position then reduce insertion index\n if (dragNode.getType() === TabNode_1.TabNode.TYPE && dragParent === this && fromIndex < index && index > 0) {\n index--;\n }\n // simple_bundled dock to existing tabset\n if (dockLocation === DockLocation_1.DockLocation.CENTER) {\n var insertPos = index;\n if (insertPos === -1) {\n insertPos = this._children.length;\n }\n if (dragNode.getType() === TabNode_1.TabNode.TYPE) {\n this._addChild(dragNode, insertPos);\n if (select || (select !== false && this.isAutoSelectTab())) {\n this._setSelected(insertPos);\n }\n // console.log(\"added child at : \" + insertPos);\n }\n else {\n for (var i = 0; i < dragNode.getChildren().length; i++) {\n var child = dragNode.getChildren()[i];\n this._addChild(child, insertPos);\n // console.log(\"added child at : \" + insertPos);\n insertPos++;\n }\n }\n this._model._setActiveTabset(this);\n }\n else {\n var tabSet = void 0;\n if (dragNode instanceof TabNode_1.TabNode) {\n // create new tabset parent\n // console.log(\"create a new tabset\");\n var callback = this._model._getOnCreateTabSet();\n tabSet = new TabSetNode(this._model, callback ? callback(dragNode) : {});\n tabSet._addChild(dragNode);\n // console.log(\"added child at end\");\n dragParent = tabSet;\n }\n else {\n tabSet = dragNode;\n }\n var parentRow = this._parent;\n var pos = parentRow.getChildren().indexOf(this);\n if (parentRow.getOrientation() === dockLocation._orientation) {\n tabSet._setWeight(this.getWeight() / 2);\n this._setWeight(this.getWeight() / 2);\n // console.log(\"added child 50% size at: \" + pos + dockLocation.indexPlus);\n parentRow._addChild(tabSet, pos + dockLocation._indexPlus);\n }\n else {\n // create a new row to host the new tabset (it will go in the opposite direction)\n // console.log(\"create a new row\");\n var newRow = new RowNode_1.RowNode(this._model, {});\n newRow._setWeight(this.getWeight());\n newRow._addChild(this);\n this._setWeight(50);\n tabSet._setWeight(50);\n // console.log(\"added child 50% size at: \" + dockLocation.indexPlus);\n newRow._addChild(tabSet, dockLocation._indexPlus);\n parentRow._removeChild(this);\n parentRow._addChild(newRow, pos);\n }\n this._model._setActiveTabset(tabSet);\n }\n this._model._tidy();\n };\n TabSetNode.prototype.toJson = function () {\n var json = {};\n TabSetNode._attributeDefinitions.toJson(json, this._attributes);\n json.children = this._children.map(function (child) { return child.toJson(); });\n if (this.isActive()) {\n json.active = true;\n }\n if (this.isMaximized()) {\n json.maximized = true;\n }\n return json;\n };\n /** @internal */\n TabSetNode.prototype._updateAttrs = function (json) {\n TabSetNode._attributeDefinitions.update(json, this._attributes);\n };\n /** @internal */\n TabSetNode.prototype._getAttributeDefinitions = function () {\n return TabSetNode._attributeDefinitions;\n };\n /** @internal */\n TabSetNode.prototype._getPrefSize = function (orientation) {\n var prefSize = this.getWidth();\n if (orientation === Orientation_1.Orientation.VERT) {\n prefSize = this.getHeight();\n }\n return prefSize;\n };\n /** @internal */\n TabSetNode.getAttributeDefinitions = function () {\n return TabSetNode._attributeDefinitions;\n };\n TabSetNode.TYPE = \"tabset\";\n /** @internal */\n TabSetNode._attributeDefinitions = TabSetNode._createAttributeDefinitions();\n return TabSetNode;\n}(Node_1.Node));\nexports.TabSetNode = TabSetNode;\n\n\n//# sourceURL=webpack://FlexLayout/./src/model/TabSetNode.ts?");
419
+ eval("\nvar __extends = (this && this.__extends) || (function () {\n var extendStatics = function (d, b) {\n extendStatics = Object.setPrototypeOf ||\n ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||\n function (d, b) { for (var p in b) if (Object.prototype.hasOwnProperty.call(b, p)) d[p] = b[p]; };\n return extendStatics(d, b);\n };\n return function (d, b) {\n if (typeof b !== \"function\" && b !== null)\n throw new TypeError(\"Class extends value \" + String(b) + \" is not a constructor or null\");\n extendStatics(d, b);\n function __() { this.constructor = d; }\n d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());\n };\n})();\nObject.defineProperty(exports, \"__esModule\", ({ value: true }));\nexports.TabSetNode = void 0;\nvar Attribute_1 = __webpack_require__(/*! ../Attribute */ \"./src/Attribute.ts\");\nvar AttributeDefinitions_1 = __webpack_require__(/*! ../AttributeDefinitions */ \"./src/AttributeDefinitions.ts\");\nvar DockLocation_1 = __webpack_require__(/*! ../DockLocation */ \"./src/DockLocation.ts\");\nvar DropInfo_1 = __webpack_require__(/*! ../DropInfo */ \"./src/DropInfo.ts\");\nvar Orientation_1 = __webpack_require__(/*! ../Orientation */ \"./src/Orientation.ts\");\nvar Rect_1 = __webpack_require__(/*! ../Rect */ \"./src/Rect.ts\");\nvar Types_1 = __webpack_require__(/*! ../Types */ \"./src/Types.ts\");\nvar BorderNode_1 = __webpack_require__(/*! ./BorderNode */ \"./src/model/BorderNode.ts\");\nvar Node_1 = __webpack_require__(/*! ./Node */ \"./src/model/Node.ts\");\nvar RowNode_1 = __webpack_require__(/*! ./RowNode */ \"./src/model/RowNode.ts\");\nvar TabNode_1 = __webpack_require__(/*! ./TabNode */ \"./src/model/TabNode.ts\");\nvar Utils_1 = __webpack_require__(/*! ./Utils */ \"./src/model/Utils.ts\");\nvar TabSetNode = /** @class */ (function (_super) {\n __extends(TabSetNode, _super);\n /** @internal */\n function TabSetNode(model, json) {\n var _this = _super.call(this, model) || this;\n TabSetNode._attributeDefinitions.fromJson(json, _this._attributes);\n model._addNode(_this);\n _this._calculatedTabBarHeight = 0;\n _this._calculatedHeaderBarHeight = 0;\n return _this;\n }\n /** @internal */\n TabSetNode._fromJson = function (json, model) {\n var newLayoutNode = new TabSetNode(model, json);\n if (json.children != null) {\n for (var _i = 0, _a = json.children; _i < _a.length; _i++) {\n var jsonChild = _a[_i];\n var child = TabNode_1.TabNode._fromJson(jsonChild, model);\n newLayoutNode._addChild(child);\n }\n }\n if (newLayoutNode._children.length === 0) {\n newLayoutNode._setSelected(-1);\n }\n if (json.maximized && json.maximized === true) {\n model._setMaximizedTabset(newLayoutNode);\n }\n if (json.active && json.active === true) {\n model._setActiveTabset(newLayoutNode);\n }\n return newLayoutNode;\n };\n /** @internal */\n TabSetNode._createAttributeDefinitions = function () {\n var attributeDefinitions = new AttributeDefinitions_1.AttributeDefinitions();\n attributeDefinitions.add(\"type\", TabSetNode.TYPE, true).setType(Attribute_1.Attribute.STRING).setFixed();\n attributeDefinitions.add(\"id\", undefined).setType(Attribute_1.Attribute.STRING);\n attributeDefinitions.add(\"weight\", 100).setType(Attribute_1.Attribute.NUMBER);\n attributeDefinitions.add(\"width\", undefined).setType(Attribute_1.Attribute.NUMBER);\n attributeDefinitions.add(\"height\", undefined).setType(Attribute_1.Attribute.NUMBER);\n attributeDefinitions.add(\"selected\", 0).setType(Attribute_1.Attribute.NUMBER);\n attributeDefinitions.add(\"name\", undefined).setType(Attribute_1.Attribute.STRING);\n attributeDefinitions.add(\"config\", undefined).setType(\"any\");\n attributeDefinitions.addInherited(\"enableDeleteWhenEmpty\", \"tabSetEnableDeleteWhenEmpty\");\n attributeDefinitions.addInherited(\"enableDrop\", \"tabSetEnableDrop\");\n attributeDefinitions.addInherited(\"enableDrag\", \"tabSetEnableDrag\");\n attributeDefinitions.addInherited(\"enableDivide\", \"tabSetEnableDivide\");\n attributeDefinitions.addInherited(\"enableMaximize\", \"tabSetEnableMaximize\");\n attributeDefinitions.addInherited(\"enableClose\", \"tabSetEnableClose\");\n attributeDefinitions.addInherited(\"classNameTabStrip\", \"tabSetClassNameTabStrip\");\n attributeDefinitions.addInherited(\"classNameHeader\", \"tabSetClassNameHeader\");\n attributeDefinitions.addInherited(\"enableTabStrip\", \"tabSetEnableTabStrip\");\n attributeDefinitions.addInherited(\"borderInsets\", \"tabSetBorderInsets\");\n attributeDefinitions.addInherited(\"marginInsets\", \"tabSetMarginInsets\");\n attributeDefinitions.addInherited(\"minWidth\", \"tabSetMinWidth\");\n attributeDefinitions.addInherited(\"minHeight\", \"tabSetMinHeight\");\n attributeDefinitions.addInherited(\"headerHeight\", \"tabSetHeaderHeight\");\n attributeDefinitions.addInherited(\"tabStripHeight\", \"tabSetTabStripHeight\");\n attributeDefinitions.addInherited(\"tabLocation\", \"tabSetTabLocation\");\n attributeDefinitions.addInherited(\"autoSelectTab\", \"tabSetAutoSelectTab\").setType(Attribute_1.Attribute.BOOLEAN);\n return attributeDefinitions;\n };\n TabSetNode.prototype.getName = function () {\n return this._getAttr(\"name\");\n };\n TabSetNode.prototype.getSelected = function () {\n var selected = this._attributes.selected;\n if (selected !== undefined) {\n return selected;\n }\n return -1;\n };\n TabSetNode.prototype.getSelectedNode = function () {\n var selected = this.getSelected();\n if (selected !== -1) {\n return this._children[selected];\n }\n return undefined;\n };\n TabSetNode.prototype.getWeight = function () {\n return this._getAttr(\"weight\");\n };\n TabSetNode.prototype.getWidth = function () {\n return this._getAttr(\"width\");\n };\n TabSetNode.prototype.getMinWidth = function () {\n return this._getAttr(\"minWidth\");\n };\n TabSetNode.prototype.getHeight = function () {\n return this._getAttr(\"height\");\n };\n TabSetNode.prototype.getMinHeight = function () {\n return this._getAttr(\"minHeight\");\n };\n /** @internal */\n TabSetNode.prototype.getMinSize = function (orientation) {\n if (orientation === Orientation_1.Orientation.HORZ) {\n return this.getMinWidth();\n }\n else {\n return this.getMinHeight();\n }\n };\n /**\n * Returns the config attribute that can be used to store node specific data that\n * WILL be saved to the json. The config attribute should be changed via the action Actions.updateNodeAttributes rather\n * than directly, for example:\n * this.state.model.doAction(\n * FlexLayout.Actions.updateNodeAttributes(node.getId(), {config:myConfigObject}));\n */\n TabSetNode.prototype.getConfig = function () {\n return this._attributes.config;\n };\n TabSetNode.prototype.isMaximized = function () {\n return this._model.getMaximizedTabset() === this;\n };\n TabSetNode.prototype.isActive = function () {\n return this._model.getActiveTabset() === this;\n };\n TabSetNode.prototype.isEnableDeleteWhenEmpty = function () {\n return this._getAttr(\"enableDeleteWhenEmpty\");\n };\n TabSetNode.prototype.isEnableDrop = function () {\n return this._getAttr(\"enableDrop\");\n };\n TabSetNode.prototype.isEnableDrag = function () {\n return this._getAttr(\"enableDrag\");\n };\n TabSetNode.prototype.isEnableDivide = function () {\n return this._getAttr(\"enableDivide\");\n };\n TabSetNode.prototype.isEnableMaximize = function () {\n return this._getAttr(\"enableMaximize\");\n };\n TabSetNode.prototype.isEnableClose = function () {\n return this._getAttr(\"enableClose\");\n };\n TabSetNode.prototype.canMaximize = function () {\n if (this.isEnableMaximize()) {\n // always allow maximize toggle if already maximized\n if (this.getModel().getMaximizedTabset() === this) {\n return true;\n }\n // only one tabset, so disable\n if (this.getParent() === this.getModel().getRoot() && this.getModel().getRoot().getChildren().length === 1) {\n return false;\n }\n return true;\n }\n return false;\n };\n TabSetNode.prototype.isEnableTabStrip = function () {\n return this._getAttr(\"enableTabStrip\");\n };\n TabSetNode.prototype.isAutoSelectTab = function () {\n return this._getAttr(\"autoSelectTab\");\n };\n TabSetNode.prototype.getClassNameTabStrip = function () {\n return this._getAttr(\"classNameTabStrip\");\n };\n TabSetNode.prototype.getClassNameHeader = function () {\n return this._getAttr(\"classNameHeader\");\n };\n /** @internal */\n TabSetNode.prototype.calculateHeaderBarHeight = function (metrics) {\n var headerBarHeight = this._getAttr(\"headerHeight\");\n if (headerBarHeight !== 0) {\n // its defined\n this._calculatedHeaderBarHeight = headerBarHeight;\n }\n else {\n this._calculatedHeaderBarHeight = metrics.headerBarSize;\n }\n };\n /** @internal */\n TabSetNode.prototype.calculateTabBarHeight = function (metrics) {\n var tabBarHeight = this._getAttr(\"tabStripHeight\");\n if (tabBarHeight !== 0) {\n // its defined\n this._calculatedTabBarHeight = tabBarHeight;\n }\n else {\n this._calculatedTabBarHeight = metrics.tabBarSize;\n }\n };\n TabSetNode.prototype.getHeaderHeight = function () {\n return this._calculatedHeaderBarHeight;\n };\n TabSetNode.prototype.getTabStripHeight = function () {\n return this._calculatedTabBarHeight;\n };\n TabSetNode.prototype.getTabLocation = function () {\n return this._getAttr(\"tabLocation\");\n };\n /** @internal */\n TabSetNode.prototype._setWeight = function (weight) {\n this._attributes.weight = weight;\n };\n /** @internal */\n TabSetNode.prototype._setSelected = function (index) {\n this._attributes.selected = index;\n };\n /** @internal */\n TabSetNode.prototype.canDrop = function (dragNode, x, y) {\n var dropInfo;\n if (dragNode === this) {\n var dockLocation = DockLocation_1.DockLocation.CENTER;\n var outlineRect = this._tabHeaderRect;\n dropInfo = new DropInfo_1.DropInfo(this, outlineRect, dockLocation, -1, Types_1.CLASSES.FLEXLAYOUT__OUTLINE_RECT);\n }\n else if (this._contentRect.contains(x, y)) {\n var dockLocation = DockLocation_1.DockLocation.CENTER;\n if (this._model.getMaximizedTabset() === undefined) {\n dockLocation = DockLocation_1.DockLocation.getLocation(this._contentRect, x, y);\n }\n var outlineRect = dockLocation.getDockRect(this._rect);\n dropInfo = new DropInfo_1.DropInfo(this, outlineRect, dockLocation, -1, Types_1.CLASSES.FLEXLAYOUT__OUTLINE_RECT);\n }\n else if (this._tabHeaderRect != null && this._tabHeaderRect.contains(x, y)) {\n var r = void 0;\n var yy = void 0;\n var h = void 0;\n if (this._children.length === 0) {\n r = this._tabHeaderRect.clone();\n yy = r.y + 3;\n h = r.height - 4;\n r.width = 2;\n }\n else {\n var child = this._children[0];\n r = child.getTabRect();\n yy = r.y;\n h = r.height;\n var p = this._tabHeaderRect.x;\n var childCenter = 0;\n for (var i = 0; i < this._children.length; i++) {\n child = this._children[i];\n r = child.getTabRect();\n childCenter = r.x + r.width / 2;\n if (x >= p && x < childCenter) {\n var dockLocation = DockLocation_1.DockLocation.CENTER;\n var outlineRect = new Rect_1.Rect(r.x - 2, yy, 3, h);\n dropInfo = new DropInfo_1.DropInfo(this, outlineRect, dockLocation, i, Types_1.CLASSES.FLEXLAYOUT__OUTLINE_RECT);\n break;\n }\n p = childCenter;\n }\n }\n if (dropInfo == null) {\n var dockLocation = DockLocation_1.DockLocation.CENTER;\n var outlineRect = new Rect_1.Rect(r.getRight() - 2, yy, 3, h);\n dropInfo = new DropInfo_1.DropInfo(this, outlineRect, dockLocation, this._children.length, Types_1.CLASSES.FLEXLAYOUT__OUTLINE_RECT);\n }\n }\n if (!dragNode._canDockInto(dragNode, dropInfo)) {\n return undefined;\n }\n return dropInfo;\n };\n /** @internal */\n TabSetNode.prototype._layout = function (rect, metrics) {\n this.calculateHeaderBarHeight(metrics);\n this.calculateTabBarHeight(metrics);\n if (this.isMaximized()) {\n rect = this._model.getRoot().getRect();\n }\n rect = rect.removeInsets(this._getAttr(\"marginInsets\"));\n this._rect = rect;\n rect = rect.removeInsets(this._getAttr(\"borderInsets\"));\n var showHeader = this.getName() !== undefined;\n var y = 0;\n var h = 0;\n if (showHeader) {\n y += this._calculatedHeaderBarHeight;\n h += this._calculatedHeaderBarHeight;\n }\n if (this.isEnableTabStrip()) {\n if (this.getTabLocation() === \"top\") {\n this._tabHeaderRect = new Rect_1.Rect(rect.x, rect.y + y, rect.width, this._calculatedTabBarHeight);\n }\n else {\n this._tabHeaderRect = new Rect_1.Rect(rect.x, rect.y + rect.height - this._calculatedTabBarHeight, rect.width, this._calculatedTabBarHeight);\n }\n h += this._calculatedTabBarHeight;\n if (this.getTabLocation() === \"top\") {\n y += this._calculatedTabBarHeight;\n }\n }\n this._contentRect = new Rect_1.Rect(rect.x, rect.y + y, rect.width, rect.height - h);\n for (var i = 0; i < this._children.length; i++) {\n var child = this._children[i];\n child._layout(this._contentRect, metrics);\n child._setVisible(i === this.getSelected());\n }\n };\n /** @internal */\n TabSetNode.prototype._delete = function () {\n this._parent._removeChild(this);\n };\n /** @internal */\n TabSetNode.prototype._remove = function (node) {\n var removedIndex = this._removeChild(node);\n this._model._tidy();\n (0, Utils_1.adjustSelectedIndex)(this, removedIndex);\n };\n /** @internal */\n TabSetNode.prototype.drop = function (dragNode, location, index, select) {\n var dockLocation = location;\n if (this === dragNode) {\n // tabset drop into itself\n return; // dock back to itself\n }\n var dragParent = dragNode.getParent();\n var fromIndex = 0;\n if (dragParent !== undefined) {\n fromIndex = dragParent._removeChild(dragNode);\n // if selected node in border is being docked into tabset then deselect border tabs\n if (dragParent instanceof BorderNode_1.BorderNode && dragParent.getSelected() === fromIndex) {\n dragParent._setSelected(-1);\n }\n else {\n (0, Utils_1.adjustSelectedIndex)(dragParent, fromIndex);\n }\n }\n // if dropping a tab back to same tabset and moving to forward position then reduce insertion index\n if (dragNode.getType() === TabNode_1.TabNode.TYPE && dragParent === this && fromIndex < index && index > 0) {\n index--;\n }\n // simple_bundled dock to existing tabset\n if (dockLocation === DockLocation_1.DockLocation.CENTER) {\n var insertPos = index;\n if (insertPos === -1) {\n insertPos = this._children.length;\n }\n if (dragNode.getType() === TabNode_1.TabNode.TYPE) {\n this._addChild(dragNode, insertPos);\n if (select || (select !== false && this.isAutoSelectTab())) {\n this._setSelected(insertPos);\n }\n // console.log(\"added child at : \" + insertPos);\n }\n else {\n for (var i = 0; i < dragNode.getChildren().length; i++) {\n var child = dragNode.getChildren()[i];\n this._addChild(child, insertPos);\n // console.log(\"added child at : \" + insertPos);\n insertPos++;\n }\n }\n this._model._setActiveTabset(this);\n }\n else {\n var tabSet = void 0;\n if (dragNode instanceof TabNode_1.TabNode) {\n // create new tabset parent\n // console.log(\"create a new tabset\");\n var callback = this._model._getOnCreateTabSet();\n tabSet = new TabSetNode(this._model, callback ? callback(dragNode) : {});\n tabSet._addChild(dragNode);\n // console.log(\"added child at end\");\n dragParent = tabSet;\n }\n else {\n tabSet = dragNode;\n }\n var parentRow = this._parent;\n var pos = parentRow.getChildren().indexOf(this);\n if (parentRow.getOrientation() === dockLocation._orientation) {\n tabSet._setWeight(this.getWeight() / 2);\n this._setWeight(this.getWeight() / 2);\n // console.log(\"added child 50% size at: \" + pos + dockLocation.indexPlus);\n parentRow._addChild(tabSet, pos + dockLocation._indexPlus);\n }\n else {\n // create a new row to host the new tabset (it will go in the opposite direction)\n // console.log(\"create a new row\");\n var newRow = new RowNode_1.RowNode(this._model, {});\n newRow._setWeight(this.getWeight());\n newRow._addChild(this);\n this._setWeight(50);\n tabSet._setWeight(50);\n // console.log(\"added child 50% size at: \" + dockLocation.indexPlus);\n newRow._addChild(tabSet, dockLocation._indexPlus);\n parentRow._removeChild(this);\n parentRow._addChild(newRow, pos);\n }\n this._model._setActiveTabset(tabSet);\n }\n this._model._tidy();\n };\n TabSetNode.prototype.toJson = function () {\n var json = {};\n TabSetNode._attributeDefinitions.toJson(json, this._attributes);\n json.children = this._children.map(function (child) { return child.toJson(); });\n if (this.isActive()) {\n json.active = true;\n }\n if (this.isMaximized()) {\n json.maximized = true;\n }\n return json;\n };\n /** @internal */\n TabSetNode.prototype._updateAttrs = function (json) {\n TabSetNode._attributeDefinitions.update(json, this._attributes);\n };\n /** @internal */\n TabSetNode.prototype._getAttributeDefinitions = function () {\n return TabSetNode._attributeDefinitions;\n };\n /** @internal */\n TabSetNode.prototype._getPrefSize = function (orientation) {\n var prefSize = this.getWidth();\n if (orientation === Orientation_1.Orientation.VERT) {\n prefSize = this.getHeight();\n }\n return prefSize;\n };\n /** @internal */\n TabSetNode.getAttributeDefinitions = function () {\n return TabSetNode._attributeDefinitions;\n };\n TabSetNode.TYPE = \"tabset\";\n /** @internal */\n TabSetNode._attributeDefinitions = TabSetNode._createAttributeDefinitions();\n return TabSetNode;\n}(Node_1.Node));\nexports.TabSetNode = TabSetNode;\n\n\n//# sourceURL=webpack://FlexLayout/./src/model/TabSetNode.ts?");
420
420
 
421
421
  /***/ }),
422
422
 
@@ -496,7 +496,7 @@ eval("\nObject.defineProperty(exports, \"__esModule\", ({ value: true }));\nexpo
496
496
  \*****************************/
497
497
  /***/ (function(__unused_webpack_module, exports, __webpack_require__) {
498
498
 
499
- eval("\nvar __extends = (this && this.__extends) || (function () {\n var extendStatics = function (d, b) {\n extendStatics = Object.setPrototypeOf ||\n ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||\n function (d, b) { for (var p in b) if (Object.prototype.hasOwnProperty.call(b, p)) d[p] = b[p]; };\n return extendStatics(d, b);\n };\n return function (d, b) {\n if (typeof b !== \"function\" && b !== null)\n throw new TypeError(\"Class extends value \" + String(b) + \" is not a constructor or null\");\n extendStatics(d, b);\n function __() { this.constructor = d; }\n d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());\n };\n})();\nvar __assign = (this && this.__assign) || function () {\n __assign = Object.assign || function(t) {\n for (var s, i = 1, n = arguments.length; i < n; i++) {\n s = arguments[i];\n for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))\n t[p] = s[p];\n }\n return t;\n };\n return __assign.apply(this, arguments);\n};\nvar __spreadArray = (this && this.__spreadArray) || function (to, from, pack) {\n if (pack || arguments.length === 2) for (var i = 0, l = from.length, ar; i < l; i++) {\n if (ar || !(i in from)) {\n if (!ar) ar = Array.prototype.slice.call(from, 0, i);\n ar[i] = from[i];\n }\n }\n return to.concat(ar || Array.prototype.slice.call(from));\n};\nObject.defineProperty(exports, \"__esModule\", ({ value: true }));\nexports.Layout = void 0;\nvar React = __webpack_require__(/*! react */ \"react\");\nvar react_dom_1 = __webpack_require__(/*! react-dom */ \"react-dom\");\nvar DockLocation_1 = __webpack_require__(/*! ../DockLocation */ \"./src/DockLocation.ts\");\nvar DragDrop_1 = __webpack_require__(/*! ../DragDrop */ \"./src/DragDrop.ts\");\nvar Actions_1 = __webpack_require__(/*! ../model/Actions */ \"./src/model/Actions.ts\");\nvar BorderNode_1 = __webpack_require__(/*! ../model/BorderNode */ \"./src/model/BorderNode.ts\");\nvar SplitterNode_1 = __webpack_require__(/*! ../model/SplitterNode */ \"./src/model/SplitterNode.ts\");\nvar TabNode_1 = __webpack_require__(/*! ../model/TabNode */ \"./src/model/TabNode.ts\");\nvar TabSetNode_1 = __webpack_require__(/*! ../model/TabSetNode */ \"./src/model/TabSetNode.ts\");\nvar Rect_1 = __webpack_require__(/*! ../Rect */ \"./src/Rect.ts\");\nvar Types_1 = __webpack_require__(/*! ../Types */ \"./src/Types.ts\");\nvar BorderTabSet_1 = __webpack_require__(/*! ./BorderTabSet */ \"./src/view/BorderTabSet.tsx\");\nvar Splitter_1 = __webpack_require__(/*! ./Splitter */ \"./src/view/Splitter.tsx\");\nvar Tab_1 = __webpack_require__(/*! ./Tab */ \"./src/view/Tab.tsx\");\nvar TabSet_1 = __webpack_require__(/*! ./TabSet */ \"./src/view/TabSet.tsx\");\nvar FloatingWindow_1 = __webpack_require__(/*! ./FloatingWindow */ \"./src/view/FloatingWindow.tsx\");\nvar FloatingWindowTab_1 = __webpack_require__(/*! ./FloatingWindowTab */ \"./src/view/FloatingWindowTab.tsx\");\nvar TabFloating_1 = __webpack_require__(/*! ./TabFloating */ \"./src/view/TabFloating.tsx\");\nvar Orientation_1 = __webpack_require__(/*! ../Orientation */ \"./src/Orientation.ts\");\nvar Icons_1 = __webpack_require__(/*! ./Icons */ \"./src/view/Icons.tsx\");\nvar TabButtonStamp_1 = __webpack_require__(/*! ./TabButtonStamp */ \"./src/view/TabButtonStamp.tsx\");\nvar defaultIcons = {\n close: React.createElement(Icons_1.CloseIcon, null),\n closeTabset: React.createElement(Icons_1.CloseIcon, null),\n popout: React.createElement(Icons_1.PopoutIcon, null),\n maximize: React.createElement(Icons_1.MaximizeIcon, null),\n restore: React.createElement(Icons_1.RestoreIcon, null),\n more: React.createElement(Icons_1.OverflowIcon, null),\n};\n// Popout windows work in latest browsers based on webkit (Chrome, Opera, Safari, latest Edge) and Firefox. They do\n// not work on any version if IE or the original Edge browser\n// Assume any recent desktop browser not IE or original Edge will work\n/** @internal */\n// @ts-ignore\nvar isIEorEdge = typeof window !== \"undefined\" && (window.document.documentMode || /Edge\\//.test(window.navigator.userAgent));\n/** @internal */\nvar isDesktop = typeof window !== \"undefined\" && window.matchMedia && window.matchMedia(\"(hover: hover) and (pointer: fine)\").matches;\n/** @internal */\nvar defaultSupportsPopout = isDesktop && !isIEorEdge;\n/**\n * A React component that hosts a multi-tabbed layout\n */\nvar Layout = /** @class */ (function (_super) {\n __extends(Layout, _super);\n function Layout(props) {\n var _this = _super.call(this, props) || this;\n /** @internal */\n _this.firstMove = false;\n /** @internal */\n _this.dragRectRendered = true;\n /** @internal */\n _this.dragDivText = undefined;\n /** @internal */\n _this.edgeRectLength = 100;\n /** @internal */\n _this.edgeRectWidth = 10;\n /** @internal */\n _this.onModelChange = function () {\n _this.forceUpdate();\n if (_this.props.onModelChange) {\n _this.props.onModelChange(_this.props.model);\n }\n };\n /** @internal */\n _this.updateRect = function (domRect) {\n if (domRect === void 0) { domRect = _this.getDomRect(); }\n var rect = new Rect_1.Rect(0, 0, domRect.width, domRect.height);\n if (!rect.equals(_this.state.rect) && rect.width !== 0 && rect.height !== 0) {\n _this.setState({ rect: rect });\n }\n };\n /** @internal */\n _this.updateLayoutMetrics = function () {\n if (_this.findHeaderBarSizeRef.current) {\n var headerBarSize = _this.findHeaderBarSizeRef.current.getBoundingClientRect().height;\n if (headerBarSize !== _this.state.calculatedHeaderBarSize) {\n _this.setState({ calculatedHeaderBarSize: headerBarSize });\n }\n }\n if (_this.findTabBarSizeRef.current) {\n var tabBarSize = _this.findTabBarSizeRef.current.getBoundingClientRect().height;\n if (tabBarSize !== _this.state.calculatedTabBarSize) {\n _this.setState({ calculatedTabBarSize: tabBarSize });\n }\n }\n if (_this.findBorderBarSizeRef.current) {\n var borderBarSize = _this.findBorderBarSizeRef.current.getBoundingClientRect().height;\n if (borderBarSize !== _this.state.calculatedBorderBarSize) {\n _this.setState({ calculatedBorderBarSize: borderBarSize });\n }\n }\n };\n /** @internal */\n _this.getClassName = function (defaultClassName) {\n if (_this.props.classNameMapper === undefined) {\n return defaultClassName;\n }\n else {\n return _this.props.classNameMapper(defaultClassName);\n }\n };\n /** @internal */\n _this.onCloseWindow = function (id) {\n _this.doAction(Actions_1.Actions.unFloatTab(id));\n try {\n _this.props.model.getNodeById(id)._setWindow(undefined);\n }\n catch (e) {\n // catch incase it was a model change\n }\n };\n /** @internal */\n _this.onSetWindow = function (id, window) {\n _this.props.model.getNodeById(id)._setWindow(window);\n };\n /** @internal */\n _this.onCancelAdd = function () {\n var _a, _b;\n var rootdiv = _this.selfRef.current;\n rootdiv.removeChild(_this.dragDiv);\n _this.dragDiv = undefined;\n _this.hidePortal();\n if (_this.fnNewNodeDropped != null) {\n _this.fnNewNodeDropped();\n _this.fnNewNodeDropped = undefined;\n }\n try {\n (_b = (_a = _this.customDrop) === null || _a === void 0 ? void 0 : _a.invalidated) === null || _b === void 0 ? void 0 : _b.call(_a);\n }\n catch (e) {\n console.error(e);\n }\n DragDrop_1.DragDrop.instance.hideGlass();\n _this.newTabJson = undefined;\n _this.customDrop = undefined;\n };\n /** @internal */\n _this.onCancelDrag = function (wasDragging) {\n var _a, _b;\n if (wasDragging) {\n var rootdiv = _this.selfRef.current;\n try {\n rootdiv.removeChild(_this.outlineDiv);\n }\n catch (e) { }\n try {\n rootdiv.removeChild(_this.dragDiv);\n }\n catch (e) { }\n _this.dragDiv = undefined;\n _this.hidePortal();\n _this.setState({ showEdges: false });\n if (_this.fnNewNodeDropped != null) {\n _this.fnNewNodeDropped();\n _this.fnNewNodeDropped = undefined;\n }\n try {\n (_b = (_a = _this.customDrop) === null || _a === void 0 ? void 0 : _a.invalidated) === null || _b === void 0 ? void 0 : _b.call(_a);\n }\n catch (e) {\n console.error(e);\n }\n DragDrop_1.DragDrop.instance.hideGlass();\n _this.newTabJson = undefined;\n _this.customDrop = undefined;\n }\n _this.setState({ showHiddenBorder: DockLocation_1.DockLocation.CENTER });\n };\n /** @internal */\n _this.onDragDivMouseDown = function (event) {\n event.preventDefault();\n _this.dragStart(event, _this.dragDivText, TabNode_1.TabNode._fromJson(_this.newTabJson, _this.props.model, false), true, undefined, undefined);\n };\n /** @internal */\n _this.dragStart = function (event, dragDivText, node, allowDrag, onClick, onDoubleClick) {\n if (!allowDrag) {\n DragDrop_1.DragDrop.instance.startDrag(event, undefined, undefined, undefined, undefined, onClick, onDoubleClick, _this.currentDocument, _this.selfRef.current);\n }\n else {\n _this.dragNode = node;\n _this.dragDivText = dragDivText;\n DragDrop_1.DragDrop.instance.startDrag(event, _this.onDragStart, _this.onDragMove, _this.onDragEnd, _this.onCancelDrag, onClick, onDoubleClick, _this.currentDocument, _this.selfRef.current);\n }\n };\n /** @internal */\n _this.dragRectRender = function (text, node, json, onRendered) {\n var content;\n if (text !== undefined) {\n content = React.createElement(\"div\", { style: { whiteSpace: \"pre\" } }, text.replace(\"<br>\", \"\\n\"));\n }\n else {\n if (node && node instanceof TabNode_1.TabNode) {\n content = (React.createElement(TabButtonStamp_1.TabButtonStamp, { node: node, layout: _this, iconFactory: _this.props.iconFactory, titleFactory: _this.props.titleFactory }));\n }\n }\n if (_this.props.onRenderDragRect !== undefined) {\n var customContent = _this.props.onRenderDragRect(content, node, json);\n if (customContent !== undefined) {\n content = customContent;\n }\n }\n // hide div until the render is complete\n _this.dragDiv.style.visibility = \"hidden\";\n _this.dragRectRendered = false;\n _this.showPortal(React.createElement(DragRectRenderWrapper\n // wait for it to be rendered\n , { \n // wait for it to be rendered\n onRendered: function () {\n _this.dragRectRendered = true;\n onRendered === null || onRendered === void 0 ? void 0 : onRendered();\n } }, content), _this.dragDiv);\n };\n /** @internal */\n _this.showPortal = function (control, element) {\n var portal = (0, react_dom_1.createPortal)(control, element);\n _this.setState({ portal: portal });\n };\n /** @internal */\n _this.hidePortal = function () {\n _this.setState({ portal: undefined });\n };\n /** @internal */\n _this.onDragStart = function () {\n _this.dropInfo = undefined;\n _this.customDrop = undefined;\n var rootdiv = _this.selfRef.current;\n _this.outlineDiv = _this.currentDocument.createElement(\"div\");\n _this.outlineDiv.className = _this.getClassName(Types_1.CLASSES.FLEXLAYOUT__OUTLINE_RECT);\n _this.outlineDiv.style.visibility = \"hidden\";\n rootdiv.appendChild(_this.outlineDiv);\n if (_this.dragDiv == null) {\n _this.dragDiv = _this.currentDocument.createElement(\"div\");\n _this.dragDiv.className = _this.getClassName(Types_1.CLASSES.FLEXLAYOUT__DRAG_RECT);\n _this.dragDiv.setAttribute(\"data-layout-path\", \"/drag-rectangle\");\n _this.dragRectRender(_this.dragDivText, _this.dragNode, _this.newTabJson);\n rootdiv.appendChild(_this.dragDiv);\n }\n // add edge indicators\n if (_this.props.model.getMaximizedTabset() === undefined) {\n _this.setState({ showEdges: true });\n }\n if (_this.dragNode !== undefined && _this.dragNode instanceof TabNode_1.TabNode && _this.dragNode.getTabRect() !== undefined) {\n _this.dragNode.getTabRect().positionElement(_this.outlineDiv);\n }\n _this.firstMove = true;\n return true;\n };\n /** @internal */\n _this.onDragMove = function (event) {\n if (_this.firstMove === false) {\n var speed = _this.props.model._getAttribute(\"tabDragSpeed\");\n _this.outlineDiv.style.transition = \"top \".concat(speed, \"s, left \").concat(speed, \"s, width \").concat(speed, \"s, height \").concat(speed, \"s\");\n }\n _this.firstMove = false;\n var clientRect = _this.selfRef.current.getBoundingClientRect();\n var pos = {\n x: event.clientX - clientRect.left,\n y: event.clientY - clientRect.top,\n };\n _this.checkForBorderToShow(pos.x, pos.y);\n // keep it between left & right\n var dragRect = _this.dragDiv.getBoundingClientRect();\n var newLeft = pos.x - dragRect.width / 2;\n if (newLeft + dragRect.width > clientRect.width) {\n newLeft = clientRect.width - dragRect.width;\n }\n newLeft = Math.max(0, newLeft);\n _this.dragDiv.style.left = newLeft + \"px\";\n _this.dragDiv.style.top = pos.y + 5 + \"px\";\n if (_this.dragRectRendered && _this.dragDiv.style.visibility === \"hidden\") {\n // make visible once the drag rect has been rendered\n _this.dragDiv.style.visibility = \"visible\";\n }\n var dropInfo = _this.props.model._findDropTargetNode(_this.dragNode, pos.x, pos.y);\n if (dropInfo) {\n if (_this.props.onTabDrag) {\n _this.handleCustomTabDrag(dropInfo, pos, event);\n }\n else {\n _this.dropInfo = dropInfo;\n _this.outlineDiv.className = _this.getClassName(dropInfo.className);\n dropInfo.rect.positionElement(_this.outlineDiv);\n _this.outlineDiv.style.visibility = \"visible\";\n }\n }\n };\n /** @internal */\n _this.onDragEnd = function (event) {\n var rootdiv = _this.selfRef.current;\n rootdiv.removeChild(_this.outlineDiv);\n rootdiv.removeChild(_this.dragDiv);\n _this.dragDiv = undefined;\n _this.hidePortal();\n _this.setState({ showEdges: false });\n DragDrop_1.DragDrop.instance.hideGlass();\n if (_this.dropInfo) {\n if (_this.customDrop) {\n _this.newTabJson = undefined;\n try {\n var _a = _this.customDrop, callback = _a.callback, dragging = _a.dragging, over = _a.over, x = _a.x, y = _a.y, location_1 = _a.location;\n callback(dragging, over, x, y, location_1);\n if (_this.fnNewNodeDropped != null) {\n _this.fnNewNodeDropped();\n _this.fnNewNodeDropped = undefined;\n }\n }\n catch (e) {\n console.error(e);\n }\n }\n else if (_this.newTabJson !== undefined) {\n var newNode = _this.doAction(Actions_1.Actions.addNode(_this.newTabJson, _this.dropInfo.node.getId(), _this.dropInfo.location, _this.dropInfo.index));\n if (_this.fnNewNodeDropped != null) {\n _this.fnNewNodeDropped(newNode, event);\n _this.fnNewNodeDropped = undefined;\n }\n _this.newTabJson = undefined;\n }\n else if (_this.dragNode !== undefined) {\n _this.doAction(Actions_1.Actions.moveNode(_this.dragNode.getId(), _this.dropInfo.node.getId(), _this.dropInfo.location, _this.dropInfo.index));\n }\n }\n _this.setState({ showHiddenBorder: DockLocation_1.DockLocation.CENTER });\n };\n _this.props.model._setChangeListener(_this.onModelChange);\n _this.tabIds = [];\n _this.selfRef = React.createRef();\n _this.findHeaderBarSizeRef = React.createRef();\n _this.findTabBarSizeRef = React.createRef();\n _this.findBorderBarSizeRef = React.createRef();\n _this.supportsPopout = props.supportsPopout !== undefined ? props.supportsPopout : defaultSupportsPopout;\n _this.popoutURL = props.popoutURL ? props.popoutURL : \"popout.html\";\n _this.icons = __assign(__assign({}, defaultIcons), props.icons);\n _this.firstRender = true;\n _this.state = {\n rect: new Rect_1.Rect(0, 0, 0, 0),\n calculatedHeaderBarSize: 25,\n calculatedTabBarSize: 26,\n calculatedBorderBarSize: 30,\n editingTab: undefined,\n showHiddenBorder: DockLocation_1.DockLocation.CENTER,\n showEdges: false,\n };\n _this.onDragEnter = _this.onDragEnter.bind(_this);\n return _this;\n }\n /** @internal */\n Layout.prototype.styleFont = function (style) {\n if (this.props.font) {\n if (this.selfRef.current) {\n if (this.props.font.size) {\n this.selfRef.current.style.setProperty(\"--font-size\", this.props.font.size);\n }\n if (this.props.font.family) {\n this.selfRef.current.style.setProperty(\"--font-family\", this.props.font.family);\n }\n }\n if (this.props.font.style) {\n style.fontStyle = this.props.font.style;\n }\n if (this.props.font.weight) {\n style.fontWeight = this.props.font.weight;\n }\n }\n return style;\n };\n /** @internal */\n Layout.prototype.doAction = function (action) {\n if (this.props.onAction !== undefined) {\n var outcome = this.props.onAction(action);\n if (outcome !== undefined) {\n return this.props.model.doAction(outcome);\n }\n return undefined;\n }\n else {\n return this.props.model.doAction(action);\n }\n };\n /** @internal */\n Layout.prototype.componentDidMount = function () {\n var _this = this;\n this.updateRect();\n this.updateLayoutMetrics();\n // need to re-render if size changes\n this.currentDocument = this.selfRef.current.ownerDocument;\n this.currentWindow = this.currentDocument.defaultView;\n this.resizeObserver = new ResizeObserver(function (entries) {\n _this.updateRect(entries[0].contentRect);\n });\n this.resizeObserver.observe(this.selfRef.current);\n };\n /** @internal */\n Layout.prototype.componentDidUpdate = function () {\n this.updateLayoutMetrics();\n if (this.props.model !== this.previousModel) {\n if (this.previousModel !== undefined) {\n this.previousModel._setChangeListener(undefined); // stop listening to old model\n }\n this.props.model._setChangeListener(this.onModelChange);\n this.previousModel = this.props.model;\n }\n // console.log(\"Layout time: \" + this.layoutTime + \"ms Render time: \" + (Date.now() - this.start) + \"ms\");\n };\n /** @internal */\n Layout.prototype.getCurrentDocument = function () {\n return this.currentDocument;\n };\n /** @internal */\n Layout.prototype.getDomRect = function () {\n return this.selfRef.current.getBoundingClientRect();\n };\n /** @internal */\n Layout.prototype.getRootDiv = function () {\n return this.selfRef.current;\n };\n /** @internal */\n Layout.prototype.isSupportsPopout = function () {\n return this.supportsPopout;\n };\n /** @internal */\n Layout.prototype.isRealtimeResize = function () {\n var _a;\n return (_a = this.props.realtimeResize) !== null && _a !== void 0 ? _a : false;\n };\n /** @internal */\n Layout.prototype.onTabDrag = function () {\n var _a, _b;\n var args = [];\n for (var _i = 0; _i < arguments.length; _i++) {\n args[_i] = arguments[_i];\n }\n return (_b = (_a = this.props).onTabDrag) === null || _b === void 0 ? void 0 : _b.call.apply(_b, __spreadArray([_a], args, false));\n };\n /** @internal */\n Layout.prototype.getPopoutURL = function () {\n return this.popoutURL;\n };\n /** @internal */\n Layout.prototype.componentWillUnmount = function () {\n var _a;\n (_a = this.resizeObserver) === null || _a === void 0 ? void 0 : _a.unobserve(this.selfRef.current);\n };\n /** @internal */\n Layout.prototype.setEditingTab = function (tabNode) {\n this.setState({ editingTab: tabNode });\n };\n /** @internal */\n Layout.prototype.getEditingTab = function () {\n return this.state.editingTab;\n };\n /** @internal */\n Layout.prototype.render = function () {\n // first render will be used to find the size (via selfRef)\n if (this.firstRender) {\n this.firstRender = false;\n return (React.createElement(\"div\", { ref: this.selfRef, className: this.getClassName(Types_1.CLASSES.FLEXLAYOUT__LAYOUT) }, this.metricsElements()));\n }\n this.props.model._setPointerFine(window && window.matchMedia && window.matchMedia(\"(pointer: fine)\").matches);\n // this.start = Date.now();\n var borderComponents = [];\n var tabSetComponents = [];\n var floatingWindows = [];\n var tabComponents = {};\n var splitterComponents = [];\n var metrics = {\n headerBarSize: this.state.calculatedHeaderBarSize,\n tabBarSize: this.state.calculatedTabBarSize,\n borderBarSize: this.state.calculatedBorderBarSize\n };\n this.props.model._setShowHiddenBorder(this.state.showHiddenBorder);\n this.centerRect = this.props.model._layout(this.state.rect, metrics);\n this.renderBorder(this.props.model.getBorderSet(), borderComponents, tabComponents, floatingWindows, splitterComponents);\n this.renderChildren(\"\", this.props.model.getRoot(), tabSetComponents, tabComponents, floatingWindows, splitterComponents);\n var nextTopIds = [];\n var nextTopIdsMap = {};\n // Keep any previous tabs in the same DOM order as before, removing any that have been deleted\n for (var _i = 0, _a = this.tabIds; _i < _a.length; _i++) {\n var t = _a[_i];\n if (tabComponents[t]) {\n nextTopIds.push(t);\n nextTopIdsMap[t] = t;\n }\n }\n this.tabIds = nextTopIds;\n // Add tabs that have been added to the DOM\n for (var _b = 0, _c = Object.keys(tabComponents); _b < _c.length; _b++) {\n var t = _c[_b];\n if (!nextTopIdsMap[t]) {\n this.tabIds.push(t);\n }\n }\n var edges = [];\n if (this.state.showEdges) {\n var r = this.centerRect;\n var length_1 = this.edgeRectLength;\n var width = this.edgeRectWidth;\n var offset = this.edgeRectLength / 2;\n var className = this.getClassName(Types_1.CLASSES.FLEXLAYOUT__EDGE_RECT);\n var radius = 50;\n edges.push(React.createElement(\"div\", { key: \"North\", style: { top: r.y, left: r.x + r.width / 2 - offset, width: length_1, height: width, borderBottomLeftRadius: radius, borderBottomRightRadius: radius }, className: className }));\n edges.push(React.createElement(\"div\", { key: \"West\", style: { top: r.y + r.height / 2 - offset, left: r.x, width: width, height: length_1, borderTopRightRadius: radius, borderBottomRightRadius: radius }, className: className }));\n edges.push(React.createElement(\"div\", { key: \"South\", style: { top: r.y + r.height - width, left: r.x + r.width / 2 - offset, width: length_1, height: width, borderTopLeftRadius: radius, borderTopRightRadius: radius }, className: className }));\n edges.push(React.createElement(\"div\", { key: \"East\", style: { top: r.y + r.height / 2 - offset, right: r.x, width: width, height: length_1, borderTopLeftRadius: radius, borderBottomLeftRadius: radius }, className: className }));\n }\n // this.layoutTime = (Date.now() - this.start);\n return (React.createElement(\"div\", { ref: this.selfRef, className: this.getClassName(Types_1.CLASSES.FLEXLAYOUT__LAYOUT), onDragEnter: this.props.onExternalDrag ? this.onDragEnter : undefined },\n tabSetComponents,\n this.tabIds.map(function (t) {\n return tabComponents[t];\n }),\n borderComponents,\n splitterComponents,\n edges,\n floatingWindows,\n this.metricsElements(),\n this.state.portal));\n };\n /** @internal */\n Layout.prototype.metricsElements = function () {\n // used to measure the tab and border tab sizes\n var fontStyle = this.styleFont({ visibility: \"hidden\" });\n return (React.createElement(React.Fragment, null,\n React.createElement(\"div\", { key: \"findHeaderBarSize\", ref: this.findHeaderBarSizeRef, style: fontStyle, className: this.getClassName(Types_1.CLASSES.FLEXLAYOUT__TABSET_HEADER_SIZER) }, \"FindHeaderBarSize\"),\n React.createElement(\"div\", { key: \"findTabBarSize\", ref: this.findTabBarSizeRef, style: fontStyle, className: this.getClassName(Types_1.CLASSES.FLEXLAYOUT__TABSET_SIZER) }, \"FindTabBarSize\"),\n React.createElement(\"div\", { key: \"findBorderBarSize\", ref: this.findBorderBarSizeRef, style: fontStyle, className: this.getClassName(Types_1.CLASSES.FLEXLAYOUT__BORDER_SIZER) }, \"FindBorderBarSize\")));\n };\n /** @internal */\n Layout.prototype.renderBorder = function (borderSet, borderComponents, tabComponents, floatingWindows, splitterComponents) {\n for (var _i = 0, _a = borderSet.getBorders(); _i < _a.length; _i++) {\n var border = _a[_i];\n var borderPath = \"/border/\".concat(border.getLocation().getName());\n if (border.isShowing()) {\n borderComponents.push(React.createElement(BorderTabSet_1.BorderTabSet, { key: \"border_\".concat(border.getLocation().getName()), path: borderPath, border: border, layout: this, iconFactory: this.props.iconFactory, titleFactory: this.props.titleFactory, icons: this.icons }));\n var drawChildren = border._getDrawChildren();\n var i = 0;\n var tabCount = 0;\n for (var _b = 0, drawChildren_1 = drawChildren; _b < drawChildren_1.length; _b++) {\n var child = drawChildren_1[_b];\n if (child instanceof SplitterNode_1.SplitterNode) {\n var path = borderPath + \"/s\";\n splitterComponents.push(React.createElement(Splitter_1.Splitter, { key: child.getId(), layout: this, node: child, path: path }));\n }\n else if (child instanceof TabNode_1.TabNode) {\n var path = borderPath + \"/t\" + tabCount++;\n if (this.supportsPopout && child.isFloating()) {\n var rect = this._getScreenRect(child);\n floatingWindows.push(React.createElement(FloatingWindow_1.FloatingWindow, { key: child.getId(), url: this.popoutURL, rect: rect, title: child.getName(), id: child.getId(), onSetWindow: this.onSetWindow, onCloseWindow: this.onCloseWindow },\n React.createElement(FloatingWindowTab_1.FloatingWindowTab, { layout: this, node: child, factory: this.props.factory })));\n tabComponents[child.getId()] = React.createElement(TabFloating_1.TabFloating, { key: child.getId(), layout: this, path: path, node: child, selected: i === border.getSelected() });\n }\n else {\n tabComponents[child.getId()] = React.createElement(Tab_1.Tab, { key: child.getId(), layout: this, path: path, node: child, selected: i === border.getSelected(), factory: this.props.factory });\n }\n }\n i++;\n }\n }\n }\n };\n /** @internal */\n Layout.prototype.renderChildren = function (path, node, tabSetComponents, tabComponents, floatingWindows, splitterComponents) {\n var drawChildren = node._getDrawChildren();\n var splitterCount = 0;\n var tabCount = 0;\n var rowCount = 0;\n for (var _i = 0, _a = drawChildren; _i < _a.length; _i++) {\n var child = _a[_i];\n if (child instanceof SplitterNode_1.SplitterNode) {\n var newPath = path + \"/s\" + (splitterCount++);\n splitterComponents.push(React.createElement(Splitter_1.Splitter, { key: child.getId(), layout: this, path: newPath, node: child }));\n }\n else if (child instanceof TabSetNode_1.TabSetNode) {\n var newPath = path + \"/ts\" + (rowCount++);\n tabSetComponents.push(React.createElement(TabSet_1.TabSet, { key: child.getId(), layout: this, path: newPath, node: child, iconFactory: this.props.iconFactory, titleFactory: this.props.titleFactory, icons: this.icons }));\n this.renderChildren(newPath, child, tabSetComponents, tabComponents, floatingWindows, splitterComponents);\n }\n else if (child instanceof TabNode_1.TabNode) {\n var newPath = path + \"/t\" + (tabCount++);\n var selectedTab = child.getParent().getChildren()[child.getParent().getSelected()];\n if (selectedTab === undefined) {\n // this should not happen!\n console.warn(\"undefined selectedTab should not happen\");\n }\n if (this.supportsPopout && child.isFloating()) {\n var rect = this._getScreenRect(child);\n floatingWindows.push(React.createElement(FloatingWindow_1.FloatingWindow, { key: child.getId(), url: this.popoutURL, rect: rect, title: child.getName(), id: child.getId(), onSetWindow: this.onSetWindow, onCloseWindow: this.onCloseWindow },\n React.createElement(FloatingWindowTab_1.FloatingWindowTab, { layout: this, node: child, factory: this.props.factory })));\n tabComponents[child.getId()] = React.createElement(TabFloating_1.TabFloating, { key: child.getId(), layout: this, path: newPath, node: child, selected: child === selectedTab });\n }\n else {\n tabComponents[child.getId()] = React.createElement(Tab_1.Tab, { key: child.getId(), layout: this, path: newPath, node: child, selected: child === selectedTab, factory: this.props.factory });\n }\n }\n else {\n // is row\n var newPath = path + ((child.getOrientation() === Orientation_1.Orientation.HORZ) ? \"/r\" : \"/c\") + (rowCount++);\n this.renderChildren(newPath, child, tabSetComponents, tabComponents, floatingWindows, splitterComponents);\n }\n }\n };\n /** @internal */\n Layout.prototype._getScreenRect = function (node) {\n var rect = node.getRect().clone();\n var bodyRect = this.selfRef.current.getBoundingClientRect();\n var navHeight = Math.min(80, this.currentWindow.outerHeight - this.currentWindow.innerHeight);\n var navWidth = Math.min(80, this.currentWindow.outerWidth - this.currentWindow.innerWidth);\n rect.x = rect.x + bodyRect.x + this.currentWindow.screenX + navWidth;\n rect.y = rect.y + bodyRect.y + this.currentWindow.screenY + navHeight;\n return rect;\n };\n /**\n * Adds a new tab to the given tabset\n * @param tabsetId the id of the tabset where the new tab will be added\n * @param json the json for the new tab node\n */\n Layout.prototype.addTabToTabSet = function (tabsetId, json) {\n var tabsetNode = this.props.model.getNodeById(tabsetId);\n if (tabsetNode !== undefined) {\n this.doAction(Actions_1.Actions.addNode(json, tabsetId, DockLocation_1.DockLocation.CENTER, -1));\n }\n };\n /**\n * Adds a new tab to the active tabset (if there is one)\n * @param json the json for the new tab node\n */\n Layout.prototype.addTabToActiveTabSet = function (json) {\n var tabsetNode = this.props.model.getActiveTabset();\n if (tabsetNode !== undefined) {\n this.doAction(Actions_1.Actions.addNode(json, tabsetNode.getId(), DockLocation_1.DockLocation.CENTER, -1));\n }\n };\n /**\n * Adds a new tab by dragging a labeled panel to the drop location, dragging starts immediatelly\n * @param dragText the text to show on the drag panel\n * @param json the json for the new tab node\n * @param onDrop a callback to call when the drag is complete (node and event will be undefined if the drag was cancelled)\n */\n Layout.prototype.addTabWithDragAndDrop = function (dragText, json, onDrop) {\n this.fnNewNodeDropped = onDrop;\n this.newTabJson = json;\n this.dragStart(undefined, dragText, TabNode_1.TabNode._fromJson(json, this.props.model, false), true, undefined, undefined);\n };\n /**\n * Move a tab/tabset using drag and drop\n * @param node the tab or tabset to drag\n * @param dragText the text to show on the drag panel\n */\n Layout.prototype.moveTabWithDragAndDrop = function (node, dragText) {\n this.dragStart(undefined, dragText, node, true, undefined, undefined);\n };\n /**\n * Adds a new tab by dragging a labeled panel to the drop location, dragging starts when you\n * mouse down on the panel\n *\n * @param dragText the text to show on the drag panel\n * @param json the json for the new tab node\n * @param onDrop a callback to call when the drag is complete (node and event will be undefined if the drag was cancelled)\n */\n Layout.prototype.addTabWithDragAndDropIndirect = function (dragText, json, onDrop) {\n var _this = this;\n this.fnNewNodeDropped = onDrop;\n this.newTabJson = json;\n DragDrop_1.DragDrop.instance.addGlass(this.onCancelAdd);\n this.dragDivText = dragText;\n this.dragDiv = this.currentDocument.createElement(\"div\");\n this.dragDiv.className = this.getClassName(Types_1.CLASSES.FLEXLAYOUT__DRAG_RECT);\n this.dragDiv.addEventListener(\"mousedown\", this.onDragDivMouseDown);\n this.dragDiv.addEventListener(\"touchstart\", this.onDragDivMouseDown, { passive: false });\n this.dragRectRender(this.dragDivText, undefined, this.newTabJson, function () {\n if (_this.dragDiv) {\n // now it's been rendered into the dom it can be centered\n _this.dragDiv.style.visibility = \"visible\";\n var domRect = _this.dragDiv.getBoundingClientRect();\n var r = new Rect_1.Rect(0, 0, domRect === null || domRect === void 0 ? void 0 : domRect.width, domRect === null || domRect === void 0 ? void 0 : domRect.height);\n r.centerInRect(_this.state.rect);\n _this.dragDiv.setAttribute(\"data-layout-path\", \"/drag-rectangle\");\n _this.dragDiv.style.left = r.x + \"px\";\n _this.dragDiv.style.top = r.y + \"px\";\n }\n });\n var rootdiv = this.selfRef.current;\n rootdiv.appendChild(this.dragDiv);\n };\n /** @internal */\n Layout.prototype.handleCustomTabDrag = function (dropInfo, pos, event) {\n var _this = this;\n var _a, _b, _c;\n var invalidated = (_a = this.customDrop) === null || _a === void 0 ? void 0 : _a.invalidated;\n var currentCallback = (_b = this.customDrop) === null || _b === void 0 ? void 0 : _b.callback;\n this.customDrop = undefined;\n var dragging = this.newTabJson || (this.dragNode instanceof TabNode_1.TabNode ? this.dragNode : undefined);\n if (dragging && (dropInfo.node instanceof TabSetNode_1.TabSetNode || dropInfo.node instanceof BorderNode_1.BorderNode) && dropInfo.index === -1) {\n var selected = dropInfo.node.getSelectedNode();\n var tabRect = selected === null || selected === void 0 ? void 0 : selected.getRect();\n if (selected && (tabRect === null || tabRect === void 0 ? void 0 : tabRect.contains(pos.x, pos.y))) {\n var customDrop = undefined;\n try {\n var dest = this.onTabDrag(dragging, selected, pos.x - tabRect.x, pos.y - tabRect.y, dropInfo.location, function () { return _this.onDragMove(event); });\n if (dest) {\n customDrop = {\n rect: new Rect_1.Rect(dest.x + tabRect.x, dest.y + tabRect.y, dest.width, dest.height),\n callback: dest.callback,\n invalidated: dest.invalidated,\n dragging: dragging,\n over: selected,\n x: pos.x - tabRect.x,\n y: pos.y - tabRect.y,\n location: dropInfo.location,\n cursor: dest.cursor\n };\n }\n }\n catch (e) {\n console.error(e);\n }\n if ((customDrop === null || customDrop === void 0 ? void 0 : customDrop.callback) === currentCallback) {\n invalidated = undefined;\n }\n this.customDrop = customDrop;\n }\n }\n this.dropInfo = dropInfo;\n this.outlineDiv.className = this.getClassName(this.customDrop ? Types_1.CLASSES.FLEXLAYOUT__OUTLINE_RECT : dropInfo.className);\n if (this.customDrop) {\n this.customDrop.rect.positionElement(this.outlineDiv);\n }\n else {\n dropInfo.rect.positionElement(this.outlineDiv);\n }\n DragDrop_1.DragDrop.instance.setGlassCursorOverride((_c = this.customDrop) === null || _c === void 0 ? void 0 : _c.cursor);\n this.outlineDiv.style.visibility = \"visible\";\n try {\n invalidated === null || invalidated === void 0 ? void 0 : invalidated();\n }\n catch (e) {\n console.error(e);\n }\n };\n /** @internal */\n Layout.prototype.onDragEnter = function (event) {\n // DragDrop keeps track of number of dragenters minus the number of\n // dragleaves. Only start a new drag if there isn't one already.\n if (DragDrop_1.DragDrop.instance.isDragging())\n return;\n var drag = this.props.onExternalDrag(event);\n if (drag) {\n // Mimic addTabWithDragAndDrop, but pass in DragEvent\n this.fnNewNodeDropped = drag.onDrop;\n this.newTabJson = drag.json;\n this.dragStart(event, drag.dragText, TabNode_1.TabNode._fromJson(drag.json, this.props.model, false), true, undefined, undefined);\n }\n };\n /** @internal */\n Layout.prototype.checkForBorderToShow = function (x, y) {\n var r = this.props.model._getOuterInnerRects().outer;\n var c = r.getCenter();\n var margin = this.edgeRectWidth;\n var offset = this.edgeRectLength / 2;\n var overEdge = false;\n if (this.props.model.isEnableEdgeDock() && this.state.showHiddenBorder === DockLocation_1.DockLocation.CENTER) {\n if ((y > c.y - offset && y < c.y + offset) ||\n (x > c.x - offset && x < c.x + offset)) {\n overEdge = true;\n }\n }\n var location = DockLocation_1.DockLocation.CENTER;\n if (!overEdge) {\n if (x <= r.x + margin) {\n location = DockLocation_1.DockLocation.LEFT;\n }\n else if (x >= r.getRight() - margin) {\n location = DockLocation_1.DockLocation.RIGHT;\n }\n else if (y <= r.y + margin) {\n location = DockLocation_1.DockLocation.TOP;\n }\n else if (y >= r.getBottom() - margin) {\n location = DockLocation_1.DockLocation.BOTTOM;\n }\n }\n if (location !== this.state.showHiddenBorder) {\n this.setState({ showHiddenBorder: location });\n }\n };\n /** @internal */\n Layout.prototype.maximize = function (tabsetNode) {\n this.doAction(Actions_1.Actions.maximizeToggle(tabsetNode.getId()));\n };\n /** @internal */\n Layout.prototype.customizeTab = function (tabNode, renderValues) {\n if (this.props.onRenderTab) {\n this.props.onRenderTab(tabNode, renderValues);\n }\n };\n /** @internal */\n Layout.prototype.customizeTabSet = function (tabSetNode, renderValues) {\n if (this.props.onRenderTabSet) {\n this.props.onRenderTabSet(tabSetNode, renderValues);\n }\n };\n /** @internal */\n Layout.prototype.i18nName = function (id, param) {\n var message;\n if (this.props.i18nMapper) {\n message = this.props.i18nMapper(id, param);\n }\n if (message === undefined) {\n message = id + (param === undefined ? \"\" : param);\n }\n return message;\n };\n /** @internal */\n Layout.prototype.getOnRenderFloatingTabPlaceholder = function () {\n return this.props.onRenderFloatingTabPlaceholder;\n };\n /** @internal */\n Layout.prototype.getShowOverflowMenu = function () {\n return this.props.onShowOverflowMenu;\n };\n /** @internal */\n Layout.prototype.getTabSetPlaceHolderCallback = function () {\n return this.props.onTabSetPlaceHolder;\n };\n /** @internal */\n Layout.prototype.showContextMenu = function (node, event) {\n if (this.props.onContextMenu) {\n this.props.onContextMenu(node, event);\n }\n };\n /** @internal */\n Layout.prototype.auxMouseClick = function (node, event) {\n if (this.props.onAuxMouseClick) {\n this.props.onAuxMouseClick(node, event);\n }\n };\n return Layout;\n}(React.Component));\nexports.Layout = Layout;\n/** @internal */\nvar DragRectRenderWrapper = function (props) {\n React.useEffect(function () {\n var _a;\n (_a = props.onRendered) === null || _a === void 0 ? void 0 : _a.call(props);\n }, [props]);\n return (React.createElement(React.Fragment, null, props.children));\n};\n\n\n//# sourceURL=webpack://FlexLayout/./src/view/Layout.tsx?");
499
+ eval("\nvar __extends = (this && this.__extends) || (function () {\n var extendStatics = function (d, b) {\n extendStatics = Object.setPrototypeOf ||\n ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||\n function (d, b) { for (var p in b) if (Object.prototype.hasOwnProperty.call(b, p)) d[p] = b[p]; };\n return extendStatics(d, b);\n };\n return function (d, b) {\n if (typeof b !== \"function\" && b !== null)\n throw new TypeError(\"Class extends value \" + String(b) + \" is not a constructor or null\");\n extendStatics(d, b);\n function __() { this.constructor = d; }\n d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());\n };\n})();\nvar __assign = (this && this.__assign) || function () {\n __assign = Object.assign || function(t) {\n for (var s, i = 1, n = arguments.length; i < n; i++) {\n s = arguments[i];\n for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))\n t[p] = s[p];\n }\n return t;\n };\n return __assign.apply(this, arguments);\n};\nvar __spreadArray = (this && this.__spreadArray) || function (to, from, pack) {\n if (pack || arguments.length === 2) for (var i = 0, l = from.length, ar; i < l; i++) {\n if (ar || !(i in from)) {\n if (!ar) ar = Array.prototype.slice.call(from, 0, i);\n ar[i] = from[i];\n }\n }\n return to.concat(ar || Array.prototype.slice.call(from));\n};\nObject.defineProperty(exports, \"__esModule\", ({ value: true }));\nexports.Layout = void 0;\nvar React = __webpack_require__(/*! react */ \"react\");\nvar react_dom_1 = __webpack_require__(/*! react-dom */ \"react-dom\");\nvar DockLocation_1 = __webpack_require__(/*! ../DockLocation */ \"./src/DockLocation.ts\");\nvar DragDrop_1 = __webpack_require__(/*! ../DragDrop */ \"./src/DragDrop.ts\");\nvar Actions_1 = __webpack_require__(/*! ../model/Actions */ \"./src/model/Actions.ts\");\nvar BorderNode_1 = __webpack_require__(/*! ../model/BorderNode */ \"./src/model/BorderNode.ts\");\nvar SplitterNode_1 = __webpack_require__(/*! ../model/SplitterNode */ \"./src/model/SplitterNode.ts\");\nvar TabNode_1 = __webpack_require__(/*! ../model/TabNode */ \"./src/model/TabNode.ts\");\nvar TabSetNode_1 = __webpack_require__(/*! ../model/TabSetNode */ \"./src/model/TabSetNode.ts\");\nvar Rect_1 = __webpack_require__(/*! ../Rect */ \"./src/Rect.ts\");\nvar Types_1 = __webpack_require__(/*! ../Types */ \"./src/Types.ts\");\nvar BorderTabSet_1 = __webpack_require__(/*! ./BorderTabSet */ \"./src/view/BorderTabSet.tsx\");\nvar Splitter_1 = __webpack_require__(/*! ./Splitter */ \"./src/view/Splitter.tsx\");\nvar Tab_1 = __webpack_require__(/*! ./Tab */ \"./src/view/Tab.tsx\");\nvar TabSet_1 = __webpack_require__(/*! ./TabSet */ \"./src/view/TabSet.tsx\");\nvar FloatingWindow_1 = __webpack_require__(/*! ./FloatingWindow */ \"./src/view/FloatingWindow.tsx\");\nvar FloatingWindowTab_1 = __webpack_require__(/*! ./FloatingWindowTab */ \"./src/view/FloatingWindowTab.tsx\");\nvar TabFloating_1 = __webpack_require__(/*! ./TabFloating */ \"./src/view/TabFloating.tsx\");\nvar Orientation_1 = __webpack_require__(/*! ../Orientation */ \"./src/Orientation.ts\");\nvar Icons_1 = __webpack_require__(/*! ./Icons */ \"./src/view/Icons.tsx\");\nvar TabButtonStamp_1 = __webpack_require__(/*! ./TabButtonStamp */ \"./src/view/TabButtonStamp.tsx\");\nvar defaultIcons = {\n close: React.createElement(Icons_1.CloseIcon, null),\n closeTabset: React.createElement(Icons_1.CloseIcon, null),\n popout: React.createElement(Icons_1.PopoutIcon, null),\n maximize: React.createElement(Icons_1.MaximizeIcon, null),\n restore: React.createElement(Icons_1.RestoreIcon, null),\n more: React.createElement(Icons_1.OverflowIcon, null),\n};\n// Popout windows work in latest browsers based on webkit (Chrome, Opera, Safari, latest Edge) and Firefox. They do\n// not work on any version if IE or the original Edge browser\n// Assume any recent desktop browser not IE or original Edge will work\n/** @internal */\n// @ts-ignore\nvar isIEorEdge = typeof window !== \"undefined\" && (window.document.documentMode || /Edge\\//.test(window.navigator.userAgent));\n/** @internal */\nvar isDesktop = typeof window !== \"undefined\" && window.matchMedia && window.matchMedia(\"(hover: hover) and (pointer: fine)\").matches;\n/** @internal */\nvar defaultSupportsPopout = isDesktop && !isIEorEdge;\n/**\n * A React component that hosts a multi-tabbed layout\n */\nvar Layout = /** @class */ (function (_super) {\n __extends(Layout, _super);\n function Layout(props) {\n var _this = _super.call(this, props) || this;\n /** @internal */\n _this.firstMove = false;\n /** @internal */\n _this.dragRectRendered = true;\n /** @internal */\n _this.dragDivText = undefined;\n /** @internal */\n _this.edgeRectLength = 100;\n /** @internal */\n _this.edgeRectWidth = 10;\n /** @internal */\n _this.onModelChange = function () {\n _this.forceUpdate();\n if (_this.props.onModelChange) {\n _this.props.onModelChange(_this.props.model);\n }\n };\n /** @internal */\n _this.updateRect = function (domRect) {\n if (domRect === void 0) { domRect = _this.getDomRect(); }\n var rect = new Rect_1.Rect(0, 0, domRect.width, domRect.height);\n if (!rect.equals(_this.state.rect) && rect.width !== 0 && rect.height !== 0) {\n _this.setState({ rect: rect });\n }\n };\n /** @internal */\n _this.updateLayoutMetrics = function () {\n if (_this.findHeaderBarSizeRef.current) {\n var headerBarSize = _this.findHeaderBarSizeRef.current.getBoundingClientRect().height;\n if (headerBarSize !== _this.state.calculatedHeaderBarSize) {\n _this.setState({ calculatedHeaderBarSize: headerBarSize });\n }\n }\n if (_this.findTabBarSizeRef.current) {\n var tabBarSize = _this.findTabBarSizeRef.current.getBoundingClientRect().height;\n if (tabBarSize !== _this.state.calculatedTabBarSize) {\n _this.setState({ calculatedTabBarSize: tabBarSize });\n }\n }\n if (_this.findBorderBarSizeRef.current) {\n var borderBarSize = _this.findBorderBarSizeRef.current.getBoundingClientRect().height;\n if (borderBarSize !== _this.state.calculatedBorderBarSize) {\n _this.setState({ calculatedBorderBarSize: borderBarSize });\n }\n }\n };\n /** @internal */\n _this.getClassName = function (defaultClassName) {\n if (_this.props.classNameMapper === undefined) {\n return defaultClassName;\n }\n else {\n return _this.props.classNameMapper(defaultClassName);\n }\n };\n /** @internal */\n _this.onCloseWindow = function (id) {\n _this.doAction(Actions_1.Actions.unFloatTab(id));\n try {\n _this.props.model.getNodeById(id)._setWindow(undefined);\n }\n catch (e) {\n // catch incase it was a model change\n }\n };\n /** @internal */\n _this.onSetWindow = function (id, window) {\n _this.props.model.getNodeById(id)._setWindow(window);\n };\n /** @internal */\n _this.onCancelAdd = function () {\n var _a, _b;\n var rootdiv = _this.selfRef.current;\n rootdiv.removeChild(_this.dragDiv);\n _this.dragDiv = undefined;\n _this.hidePortal();\n if (_this.fnNewNodeDropped != null) {\n _this.fnNewNodeDropped();\n _this.fnNewNodeDropped = undefined;\n }\n try {\n (_b = (_a = _this.customDrop) === null || _a === void 0 ? void 0 : _a.invalidated) === null || _b === void 0 ? void 0 : _b.call(_a);\n }\n catch (e) {\n console.error(e);\n }\n DragDrop_1.DragDrop.instance.hideGlass();\n _this.newTabJson = undefined;\n _this.customDrop = undefined;\n };\n /** @internal */\n _this.onCancelDrag = function (wasDragging) {\n var _a, _b;\n if (wasDragging) {\n var rootdiv = _this.selfRef.current;\n try {\n rootdiv.removeChild(_this.outlineDiv);\n }\n catch (e) { }\n try {\n rootdiv.removeChild(_this.dragDiv);\n }\n catch (e) { }\n _this.dragDiv = undefined;\n _this.hidePortal();\n _this.setState({ showEdges: false });\n if (_this.fnNewNodeDropped != null) {\n _this.fnNewNodeDropped();\n _this.fnNewNodeDropped = undefined;\n }\n try {\n (_b = (_a = _this.customDrop) === null || _a === void 0 ? void 0 : _a.invalidated) === null || _b === void 0 ? void 0 : _b.call(_a);\n }\n catch (e) {\n console.error(e);\n }\n DragDrop_1.DragDrop.instance.hideGlass();\n _this.newTabJson = undefined;\n _this.customDrop = undefined;\n }\n _this.setState({ showHiddenBorder: DockLocation_1.DockLocation.CENTER });\n };\n /** @internal */\n _this.onDragDivMouseDown = function (event) {\n event.preventDefault();\n _this.dragStart(event, _this.dragDivText, TabNode_1.TabNode._fromJson(_this.newTabJson, _this.props.model, false), true, undefined, undefined);\n };\n /** @internal */\n _this.dragStart = function (event, dragDivText, node, allowDrag, onClick, onDoubleClick) {\n if (!allowDrag) {\n DragDrop_1.DragDrop.instance.startDrag(event, undefined, undefined, undefined, undefined, onClick, onDoubleClick, _this.currentDocument, _this.selfRef.current);\n }\n else {\n _this.dragNode = node;\n _this.dragDivText = dragDivText;\n DragDrop_1.DragDrop.instance.startDrag(event, _this.onDragStart, _this.onDragMove, _this.onDragEnd, _this.onCancelDrag, onClick, onDoubleClick, _this.currentDocument, _this.selfRef.current);\n }\n };\n /** @internal */\n _this.dragRectRender = function (text, node, json, onRendered) {\n var content;\n if (text !== undefined) {\n content = React.createElement(\"div\", { style: { whiteSpace: \"pre\" } }, text.replace(\"<br>\", \"\\n\"));\n }\n else {\n if (node && node instanceof TabNode_1.TabNode) {\n content = (React.createElement(TabButtonStamp_1.TabButtonStamp, { node: node, layout: _this, iconFactory: _this.props.iconFactory, titleFactory: _this.props.titleFactory }));\n }\n }\n if (_this.props.onRenderDragRect !== undefined) {\n var customContent = _this.props.onRenderDragRect(content, node, json);\n if (customContent !== undefined) {\n content = customContent;\n }\n }\n // hide div until the render is complete\n _this.dragDiv.style.visibility = \"hidden\";\n _this.dragRectRendered = false;\n _this.showPortal(React.createElement(DragRectRenderWrapper\n // wait for it to be rendered\n , { \n // wait for it to be rendered\n onRendered: function () {\n _this.dragRectRendered = true;\n onRendered === null || onRendered === void 0 ? void 0 : onRendered();\n } }, content), _this.dragDiv);\n };\n /** @internal */\n _this.showPortal = function (control, element) {\n var portal = (0, react_dom_1.createPortal)(control, element);\n _this.setState({ portal: portal });\n };\n /** @internal */\n _this.hidePortal = function () {\n _this.setState({ portal: undefined });\n };\n /** @internal */\n _this.onDragStart = function () {\n _this.dropInfo = undefined;\n _this.customDrop = undefined;\n var rootdiv = _this.selfRef.current;\n _this.outlineDiv = _this.currentDocument.createElement(\"div\");\n _this.outlineDiv.className = _this.getClassName(Types_1.CLASSES.FLEXLAYOUT__OUTLINE_RECT);\n _this.outlineDiv.style.visibility = \"hidden\";\n rootdiv.appendChild(_this.outlineDiv);\n if (_this.dragDiv == null) {\n _this.dragDiv = _this.currentDocument.createElement(\"div\");\n _this.dragDiv.className = _this.getClassName(Types_1.CLASSES.FLEXLAYOUT__DRAG_RECT);\n _this.dragDiv.setAttribute(\"data-layout-path\", \"/drag-rectangle\");\n _this.dragRectRender(_this.dragDivText, _this.dragNode, _this.newTabJson);\n rootdiv.appendChild(_this.dragDiv);\n }\n // add edge indicators\n if (_this.props.model.getMaximizedTabset() === undefined) {\n _this.setState({ showEdges: true });\n }\n if (_this.dragNode !== undefined && _this.dragNode instanceof TabNode_1.TabNode && _this.dragNode.getTabRect() !== undefined) {\n _this.dragNode.getTabRect().positionElement(_this.outlineDiv);\n }\n _this.firstMove = true;\n return true;\n };\n /** @internal */\n _this.onDragMove = function (event) {\n if (_this.firstMove === false) {\n var speed = _this.props.model._getAttribute(\"tabDragSpeed\");\n _this.outlineDiv.style.transition = \"top \".concat(speed, \"s, left \").concat(speed, \"s, width \").concat(speed, \"s, height \").concat(speed, \"s\");\n }\n _this.firstMove = false;\n var clientRect = _this.selfRef.current.getBoundingClientRect();\n var pos = {\n x: event.clientX - clientRect.left,\n y: event.clientY - clientRect.top,\n };\n _this.checkForBorderToShow(pos.x, pos.y);\n // keep it between left & right\n var dragRect = _this.dragDiv.getBoundingClientRect();\n var newLeft = pos.x - dragRect.width / 2;\n if (newLeft + dragRect.width > clientRect.width) {\n newLeft = clientRect.width - dragRect.width;\n }\n newLeft = Math.max(0, newLeft);\n _this.dragDiv.style.left = newLeft + \"px\";\n _this.dragDiv.style.top = pos.y + 5 + \"px\";\n if (_this.dragRectRendered && _this.dragDiv.style.visibility === \"hidden\") {\n // make visible once the drag rect has been rendered\n _this.dragDiv.style.visibility = \"visible\";\n }\n var dropInfo = _this.props.model._findDropTargetNode(_this.dragNode, pos.x, pos.y);\n if (dropInfo) {\n if (_this.props.onTabDrag) {\n _this.handleCustomTabDrag(dropInfo, pos, event);\n }\n else {\n _this.dropInfo = dropInfo;\n _this.outlineDiv.className = _this.getClassName(dropInfo.className);\n dropInfo.rect.positionElement(_this.outlineDiv);\n _this.outlineDiv.style.visibility = \"visible\";\n }\n }\n };\n /** @internal */\n _this.onDragEnd = function (event) {\n var rootdiv = _this.selfRef.current;\n rootdiv.removeChild(_this.outlineDiv);\n rootdiv.removeChild(_this.dragDiv);\n _this.dragDiv = undefined;\n _this.hidePortal();\n _this.setState({ showEdges: false });\n DragDrop_1.DragDrop.instance.hideGlass();\n if (_this.dropInfo) {\n if (_this.customDrop) {\n _this.newTabJson = undefined;\n try {\n var _a = _this.customDrop, callback = _a.callback, dragging = _a.dragging, over = _a.over, x = _a.x, y = _a.y, location_1 = _a.location;\n callback(dragging, over, x, y, location_1);\n if (_this.fnNewNodeDropped != null) {\n _this.fnNewNodeDropped();\n _this.fnNewNodeDropped = undefined;\n }\n }\n catch (e) {\n console.error(e);\n }\n }\n else if (_this.newTabJson !== undefined) {\n var newNode = _this.doAction(Actions_1.Actions.addNode(_this.newTabJson, _this.dropInfo.node.getId(), _this.dropInfo.location, _this.dropInfo.index));\n if (_this.fnNewNodeDropped != null) {\n _this.fnNewNodeDropped(newNode, event);\n _this.fnNewNodeDropped = undefined;\n }\n _this.newTabJson = undefined;\n }\n else if (_this.dragNode !== undefined) {\n _this.doAction(Actions_1.Actions.moveNode(_this.dragNode.getId(), _this.dropInfo.node.getId(), _this.dropInfo.location, _this.dropInfo.index));\n }\n }\n _this.setState({ showHiddenBorder: DockLocation_1.DockLocation.CENTER });\n };\n _this.props.model._setChangeListener(_this.onModelChange);\n _this.tabIds = [];\n _this.selfRef = React.createRef();\n _this.findHeaderBarSizeRef = React.createRef();\n _this.findTabBarSizeRef = React.createRef();\n _this.findBorderBarSizeRef = React.createRef();\n _this.supportsPopout = props.supportsPopout !== undefined ? props.supportsPopout : defaultSupportsPopout;\n _this.popoutURL = props.popoutURL ? props.popoutURL : \"popout.html\";\n _this.icons = __assign(__assign({}, defaultIcons), props.icons);\n _this.firstRender = true;\n _this.state = {\n rect: new Rect_1.Rect(0, 0, 0, 0),\n calculatedHeaderBarSize: 25,\n calculatedTabBarSize: 26,\n calculatedBorderBarSize: 30,\n editingTab: undefined,\n showHiddenBorder: DockLocation_1.DockLocation.CENTER,\n showEdges: false,\n };\n _this.onDragEnter = _this.onDragEnter.bind(_this);\n return _this;\n }\n /** @internal */\n Layout.prototype.styleFont = function (style) {\n if (this.props.font) {\n if (this.selfRef.current) {\n if (this.props.font.size) {\n this.selfRef.current.style.setProperty(\"--font-size\", this.props.font.size);\n }\n if (this.props.font.family) {\n this.selfRef.current.style.setProperty(\"--font-family\", this.props.font.family);\n }\n }\n if (this.props.font.style) {\n style.fontStyle = this.props.font.style;\n }\n if (this.props.font.weight) {\n style.fontWeight = this.props.font.weight;\n }\n }\n return style;\n };\n /** @internal */\n Layout.prototype.doAction = function (action) {\n if (this.props.onAction !== undefined) {\n var outcome = this.props.onAction(action);\n if (outcome !== undefined) {\n return this.props.model.doAction(outcome);\n }\n return undefined;\n }\n else {\n return this.props.model.doAction(action);\n }\n };\n /** @internal */\n Layout.prototype.componentDidMount = function () {\n var _this = this;\n this.updateRect();\n this.updateLayoutMetrics();\n // need to re-render if size changes\n this.currentDocument = this.selfRef.current.ownerDocument;\n this.currentWindow = this.currentDocument.defaultView;\n this.resizeObserver = new ResizeObserver(function (entries) {\n _this.updateRect(entries[0].contentRect);\n });\n this.resizeObserver.observe(this.selfRef.current);\n };\n /** @internal */\n Layout.prototype.componentDidUpdate = function () {\n this.updateLayoutMetrics();\n if (this.props.model !== this.previousModel) {\n if (this.previousModel !== undefined) {\n this.previousModel._setChangeListener(undefined); // stop listening to old model\n }\n this.props.model._setChangeListener(this.onModelChange);\n this.previousModel = this.props.model;\n }\n // console.log(\"Layout time: \" + this.layoutTime + \"ms Render time: \" + (Date.now() - this.start) + \"ms\");\n };\n /** @internal */\n Layout.prototype.getCurrentDocument = function () {\n return this.currentDocument;\n };\n /** @internal */\n Layout.prototype.getDomRect = function () {\n return this.selfRef.current.getBoundingClientRect();\n };\n /** @internal */\n Layout.prototype.getRootDiv = function () {\n return this.selfRef.current;\n };\n /** @internal */\n Layout.prototype.isSupportsPopout = function () {\n return this.supportsPopout;\n };\n /** @internal */\n Layout.prototype.isRealtimeResize = function () {\n var _a;\n return (_a = this.props.realtimeResize) !== null && _a !== void 0 ? _a : false;\n };\n /** @internal */\n Layout.prototype.onTabDrag = function () {\n var _a, _b;\n var args = [];\n for (var _i = 0; _i < arguments.length; _i++) {\n args[_i] = arguments[_i];\n }\n return (_b = (_a = this.props).onTabDrag) === null || _b === void 0 ? void 0 : _b.call.apply(_b, __spreadArray([_a], args, false));\n };\n /** @internal */\n Layout.prototype.getPopoutURL = function () {\n return this.popoutURL;\n };\n /** @internal */\n Layout.prototype.componentWillUnmount = function () {\n var _a;\n (_a = this.resizeObserver) === null || _a === void 0 ? void 0 : _a.unobserve(this.selfRef.current);\n };\n /** @internal */\n Layout.prototype.setEditingTab = function (tabNode) {\n this.setState({ editingTab: tabNode });\n };\n /** @internal */\n Layout.prototype.getEditingTab = function () {\n return this.state.editingTab;\n };\n /** @internal */\n Layout.prototype.render = function () {\n // first render will be used to find the size (via selfRef)\n if (this.firstRender) {\n this.firstRender = false;\n return (React.createElement(\"div\", { ref: this.selfRef, className: this.getClassName(Types_1.CLASSES.FLEXLAYOUT__LAYOUT) }, this.metricsElements()));\n }\n this.props.model._setPointerFine(window && window.matchMedia && window.matchMedia(\"(pointer: fine)\").matches);\n // this.start = Date.now();\n var borderComponents = [];\n var tabSetComponents = [];\n var floatingWindows = [];\n var tabComponents = {};\n var splitterComponents = [];\n var metrics = {\n headerBarSize: this.state.calculatedHeaderBarSize,\n tabBarSize: this.state.calculatedTabBarSize,\n borderBarSize: this.state.calculatedBorderBarSize\n };\n this.props.model._setShowHiddenBorder(this.state.showHiddenBorder);\n this.centerRect = this.props.model._layout(this.state.rect, metrics);\n this.renderBorder(this.props.model.getBorderSet(), borderComponents, tabComponents, floatingWindows, splitterComponents);\n this.renderChildren(\"\", this.props.model.getRoot(), tabSetComponents, tabComponents, floatingWindows, splitterComponents);\n var nextTopIds = [];\n var nextTopIdsMap = {};\n // Keep any previous tabs in the same DOM order as before, removing any that have been deleted\n for (var _i = 0, _a = this.tabIds; _i < _a.length; _i++) {\n var t = _a[_i];\n if (tabComponents[t]) {\n nextTopIds.push(t);\n nextTopIdsMap[t] = t;\n }\n }\n this.tabIds = nextTopIds;\n // Add tabs that have been added to the DOM\n for (var _b = 0, _c = Object.keys(tabComponents); _b < _c.length; _b++) {\n var t = _c[_b];\n if (!nextTopIdsMap[t]) {\n this.tabIds.push(t);\n }\n }\n var edges = [];\n if (this.state.showEdges) {\n var r = this.centerRect;\n var length_1 = this.edgeRectLength;\n var width = this.edgeRectWidth;\n var offset = this.edgeRectLength / 2;\n var className = this.getClassName(Types_1.CLASSES.FLEXLAYOUT__EDGE_RECT);\n var radius = 50;\n edges.push(React.createElement(\"div\", { key: \"North\", style: { top: r.y, left: r.x + r.width / 2 - offset, width: length_1, height: width, borderBottomLeftRadius: radius, borderBottomRightRadius: radius }, className: className }));\n edges.push(React.createElement(\"div\", { key: \"West\", style: { top: r.y + r.height / 2 - offset, left: r.x, width: width, height: length_1, borderTopRightRadius: radius, borderBottomRightRadius: radius }, className: className }));\n edges.push(React.createElement(\"div\", { key: \"South\", style: { top: r.y + r.height - width, left: r.x + r.width / 2 - offset, width: length_1, height: width, borderTopLeftRadius: radius, borderTopRightRadius: radius }, className: className }));\n edges.push(React.createElement(\"div\", { key: \"East\", style: { top: r.y + r.height / 2 - offset, left: r.x + r.width - width, width: width, height: length_1, borderTopLeftRadius: radius, borderBottomLeftRadius: radius }, className: className }));\n }\n // this.layoutTime = (Date.now() - this.start);\n return (React.createElement(\"div\", { ref: this.selfRef, className: this.getClassName(Types_1.CLASSES.FLEXLAYOUT__LAYOUT), onDragEnter: this.props.onExternalDrag ? this.onDragEnter : undefined },\n tabSetComponents,\n this.tabIds.map(function (t) {\n return tabComponents[t];\n }),\n borderComponents,\n splitterComponents,\n edges,\n floatingWindows,\n this.metricsElements(),\n this.state.portal));\n };\n /** @internal */\n Layout.prototype.metricsElements = function () {\n // used to measure the tab and border tab sizes\n var fontStyle = this.styleFont({ visibility: \"hidden\" });\n return (React.createElement(React.Fragment, null,\n React.createElement(\"div\", { key: \"findHeaderBarSize\", ref: this.findHeaderBarSizeRef, style: fontStyle, className: this.getClassName(Types_1.CLASSES.FLEXLAYOUT__TABSET_HEADER_SIZER) }, \"FindHeaderBarSize\"),\n React.createElement(\"div\", { key: \"findTabBarSize\", ref: this.findTabBarSizeRef, style: fontStyle, className: this.getClassName(Types_1.CLASSES.FLEXLAYOUT__TABSET_SIZER) }, \"FindTabBarSize\"),\n React.createElement(\"div\", { key: \"findBorderBarSize\", ref: this.findBorderBarSizeRef, style: fontStyle, className: this.getClassName(Types_1.CLASSES.FLEXLAYOUT__BORDER_SIZER) }, \"FindBorderBarSize\")));\n };\n /** @internal */\n Layout.prototype.renderBorder = function (borderSet, borderComponents, tabComponents, floatingWindows, splitterComponents) {\n for (var _i = 0, _a = borderSet.getBorders(); _i < _a.length; _i++) {\n var border = _a[_i];\n var borderPath = \"/border/\".concat(border.getLocation().getName());\n if (border.isShowing()) {\n borderComponents.push(React.createElement(BorderTabSet_1.BorderTabSet, { key: \"border_\".concat(border.getLocation().getName()), path: borderPath, border: border, layout: this, iconFactory: this.props.iconFactory, titleFactory: this.props.titleFactory, icons: this.icons }));\n var drawChildren = border._getDrawChildren();\n var i = 0;\n var tabCount = 0;\n for (var _b = 0, drawChildren_1 = drawChildren; _b < drawChildren_1.length; _b++) {\n var child = drawChildren_1[_b];\n if (child instanceof SplitterNode_1.SplitterNode) {\n var path = borderPath + \"/s\";\n splitterComponents.push(React.createElement(Splitter_1.Splitter, { key: child.getId(), layout: this, node: child, path: path }));\n }\n else if (child instanceof TabNode_1.TabNode) {\n var path = borderPath + \"/t\" + tabCount++;\n if (this.supportsPopout && child.isFloating()) {\n var rect = this._getScreenRect(child);\n floatingWindows.push(React.createElement(FloatingWindow_1.FloatingWindow, { key: child.getId(), url: this.popoutURL, rect: rect, title: child.getName(), id: child.getId(), onSetWindow: this.onSetWindow, onCloseWindow: this.onCloseWindow },\n React.createElement(FloatingWindowTab_1.FloatingWindowTab, { layout: this, node: child, factory: this.props.factory })));\n tabComponents[child.getId()] = React.createElement(TabFloating_1.TabFloating, { key: child.getId(), layout: this, path: path, node: child, selected: i === border.getSelected() });\n }\n else {\n tabComponents[child.getId()] = React.createElement(Tab_1.Tab, { key: child.getId(), layout: this, path: path, node: child, selected: i === border.getSelected(), factory: this.props.factory });\n }\n }\n i++;\n }\n }\n }\n };\n /** @internal */\n Layout.prototype.renderChildren = function (path, node, tabSetComponents, tabComponents, floatingWindows, splitterComponents) {\n var drawChildren = node._getDrawChildren();\n var splitterCount = 0;\n var tabCount = 0;\n var rowCount = 0;\n for (var _i = 0, _a = drawChildren; _i < _a.length; _i++) {\n var child = _a[_i];\n if (child instanceof SplitterNode_1.SplitterNode) {\n var newPath = path + \"/s\" + (splitterCount++);\n splitterComponents.push(React.createElement(Splitter_1.Splitter, { key: child.getId(), layout: this, path: newPath, node: child }));\n }\n else if (child instanceof TabSetNode_1.TabSetNode) {\n var newPath = path + \"/ts\" + (rowCount++);\n tabSetComponents.push(React.createElement(TabSet_1.TabSet, { key: child.getId(), layout: this, path: newPath, node: child, iconFactory: this.props.iconFactory, titleFactory: this.props.titleFactory, icons: this.icons }));\n this.renderChildren(newPath, child, tabSetComponents, tabComponents, floatingWindows, splitterComponents);\n }\n else if (child instanceof TabNode_1.TabNode) {\n var newPath = path + \"/t\" + (tabCount++);\n var selectedTab = child.getParent().getChildren()[child.getParent().getSelected()];\n if (selectedTab === undefined) {\n // this should not happen!\n console.warn(\"undefined selectedTab should not happen\");\n }\n if (this.supportsPopout && child.isFloating()) {\n var rect = this._getScreenRect(child);\n floatingWindows.push(React.createElement(FloatingWindow_1.FloatingWindow, { key: child.getId(), url: this.popoutURL, rect: rect, title: child.getName(), id: child.getId(), onSetWindow: this.onSetWindow, onCloseWindow: this.onCloseWindow },\n React.createElement(FloatingWindowTab_1.FloatingWindowTab, { layout: this, node: child, factory: this.props.factory })));\n tabComponents[child.getId()] = React.createElement(TabFloating_1.TabFloating, { key: child.getId(), layout: this, path: newPath, node: child, selected: child === selectedTab });\n }\n else {\n tabComponents[child.getId()] = React.createElement(Tab_1.Tab, { key: child.getId(), layout: this, path: newPath, node: child, selected: child === selectedTab, factory: this.props.factory });\n }\n }\n else {\n // is row\n var newPath = path + ((child.getOrientation() === Orientation_1.Orientation.HORZ) ? \"/r\" : \"/c\") + (rowCount++);\n this.renderChildren(newPath, child, tabSetComponents, tabComponents, floatingWindows, splitterComponents);\n }\n }\n };\n /** @internal */\n Layout.prototype._getScreenRect = function (node) {\n var rect = node.getRect().clone();\n var bodyRect = this.selfRef.current.getBoundingClientRect();\n var navHeight = Math.min(80, this.currentWindow.outerHeight - this.currentWindow.innerHeight);\n var navWidth = Math.min(80, this.currentWindow.outerWidth - this.currentWindow.innerWidth);\n rect.x = rect.x + bodyRect.x + this.currentWindow.screenX + navWidth;\n rect.y = rect.y + bodyRect.y + this.currentWindow.screenY + navHeight;\n return rect;\n };\n /**\n * Adds a new tab to the given tabset\n * @param tabsetId the id of the tabset where the new tab will be added\n * @param json the json for the new tab node\n */\n Layout.prototype.addTabToTabSet = function (tabsetId, json) {\n var tabsetNode = this.props.model.getNodeById(tabsetId);\n if (tabsetNode !== undefined) {\n this.doAction(Actions_1.Actions.addNode(json, tabsetId, DockLocation_1.DockLocation.CENTER, -1));\n }\n };\n /**\n * Adds a new tab to the active tabset (if there is one)\n * @param json the json for the new tab node\n */\n Layout.prototype.addTabToActiveTabSet = function (json) {\n var tabsetNode = this.props.model.getActiveTabset();\n if (tabsetNode !== undefined) {\n this.doAction(Actions_1.Actions.addNode(json, tabsetNode.getId(), DockLocation_1.DockLocation.CENTER, -1));\n }\n };\n /**\n * Adds a new tab by dragging a labeled panel to the drop location, dragging starts immediatelly\n * @param dragText the text to show on the drag panel\n * @param json the json for the new tab node\n * @param onDrop a callback to call when the drag is complete (node and event will be undefined if the drag was cancelled)\n */\n Layout.prototype.addTabWithDragAndDrop = function (dragText, json, onDrop) {\n this.fnNewNodeDropped = onDrop;\n this.newTabJson = json;\n this.dragStart(undefined, dragText, TabNode_1.TabNode._fromJson(json, this.props.model, false), true, undefined, undefined);\n };\n /**\n * Move a tab/tabset using drag and drop\n * @param node the tab or tabset to drag\n * @param dragText the text to show on the drag panel\n */\n Layout.prototype.moveTabWithDragAndDrop = function (node, dragText) {\n this.dragStart(undefined, dragText, node, true, undefined, undefined);\n };\n /**\n * Adds a new tab by dragging a labeled panel to the drop location, dragging starts when you\n * mouse down on the panel\n *\n * @param dragText the text to show on the drag panel\n * @param json the json for the new tab node\n * @param onDrop a callback to call when the drag is complete (node and event will be undefined if the drag was cancelled)\n */\n Layout.prototype.addTabWithDragAndDropIndirect = function (dragText, json, onDrop) {\n var _this = this;\n this.fnNewNodeDropped = onDrop;\n this.newTabJson = json;\n DragDrop_1.DragDrop.instance.addGlass(this.onCancelAdd);\n this.dragDivText = dragText;\n this.dragDiv = this.currentDocument.createElement(\"div\");\n this.dragDiv.className = this.getClassName(Types_1.CLASSES.FLEXLAYOUT__DRAG_RECT);\n this.dragDiv.addEventListener(\"mousedown\", this.onDragDivMouseDown);\n this.dragDiv.addEventListener(\"touchstart\", this.onDragDivMouseDown, { passive: false });\n this.dragRectRender(this.dragDivText, undefined, this.newTabJson, function () {\n if (_this.dragDiv) {\n // now it's been rendered into the dom it can be centered\n _this.dragDiv.style.visibility = \"visible\";\n var domRect = _this.dragDiv.getBoundingClientRect();\n var r = new Rect_1.Rect(0, 0, domRect === null || domRect === void 0 ? void 0 : domRect.width, domRect === null || domRect === void 0 ? void 0 : domRect.height);\n r.centerInRect(_this.state.rect);\n _this.dragDiv.setAttribute(\"data-layout-path\", \"/drag-rectangle\");\n _this.dragDiv.style.left = r.x + \"px\";\n _this.dragDiv.style.top = r.y + \"px\";\n }\n });\n var rootdiv = this.selfRef.current;\n rootdiv.appendChild(this.dragDiv);\n };\n /** @internal */\n Layout.prototype.handleCustomTabDrag = function (dropInfo, pos, event) {\n var _this = this;\n var _a, _b, _c;\n var invalidated = (_a = this.customDrop) === null || _a === void 0 ? void 0 : _a.invalidated;\n var currentCallback = (_b = this.customDrop) === null || _b === void 0 ? void 0 : _b.callback;\n this.customDrop = undefined;\n var dragging = this.newTabJson || (this.dragNode instanceof TabNode_1.TabNode ? this.dragNode : undefined);\n if (dragging && (dropInfo.node instanceof TabSetNode_1.TabSetNode || dropInfo.node instanceof BorderNode_1.BorderNode) && dropInfo.index === -1) {\n var selected = dropInfo.node.getSelectedNode();\n var tabRect = selected === null || selected === void 0 ? void 0 : selected.getRect();\n if (selected && (tabRect === null || tabRect === void 0 ? void 0 : tabRect.contains(pos.x, pos.y))) {\n var customDrop = undefined;\n try {\n var dest = this.onTabDrag(dragging, selected, pos.x - tabRect.x, pos.y - tabRect.y, dropInfo.location, function () { return _this.onDragMove(event); });\n if (dest) {\n customDrop = {\n rect: new Rect_1.Rect(dest.x + tabRect.x, dest.y + tabRect.y, dest.width, dest.height),\n callback: dest.callback,\n invalidated: dest.invalidated,\n dragging: dragging,\n over: selected,\n x: pos.x - tabRect.x,\n y: pos.y - tabRect.y,\n location: dropInfo.location,\n cursor: dest.cursor\n };\n }\n }\n catch (e) {\n console.error(e);\n }\n if ((customDrop === null || customDrop === void 0 ? void 0 : customDrop.callback) === currentCallback) {\n invalidated = undefined;\n }\n this.customDrop = customDrop;\n }\n }\n this.dropInfo = dropInfo;\n this.outlineDiv.className = this.getClassName(this.customDrop ? Types_1.CLASSES.FLEXLAYOUT__OUTLINE_RECT : dropInfo.className);\n if (this.customDrop) {\n this.customDrop.rect.positionElement(this.outlineDiv);\n }\n else {\n dropInfo.rect.positionElement(this.outlineDiv);\n }\n DragDrop_1.DragDrop.instance.setGlassCursorOverride((_c = this.customDrop) === null || _c === void 0 ? void 0 : _c.cursor);\n this.outlineDiv.style.visibility = \"visible\";\n try {\n invalidated === null || invalidated === void 0 ? void 0 : invalidated();\n }\n catch (e) {\n console.error(e);\n }\n };\n /** @internal */\n Layout.prototype.onDragEnter = function (event) {\n // DragDrop keeps track of number of dragenters minus the number of\n // dragleaves. Only start a new drag if there isn't one already.\n if (DragDrop_1.DragDrop.instance.isDragging())\n return;\n var drag = this.props.onExternalDrag(event);\n if (drag) {\n // Mimic addTabWithDragAndDrop, but pass in DragEvent\n this.fnNewNodeDropped = drag.onDrop;\n this.newTabJson = drag.json;\n this.dragStart(event, drag.dragText, TabNode_1.TabNode._fromJson(drag.json, this.props.model, false), true, undefined, undefined);\n }\n };\n /** @internal */\n Layout.prototype.checkForBorderToShow = function (x, y) {\n var r = this.props.model._getOuterInnerRects().outer;\n var c = r.getCenter();\n var margin = this.edgeRectWidth;\n var offset = this.edgeRectLength / 2;\n var overEdge = false;\n if (this.props.model.isEnableEdgeDock() && this.state.showHiddenBorder === DockLocation_1.DockLocation.CENTER) {\n if ((y > c.y - offset && y < c.y + offset) ||\n (x > c.x - offset && x < c.x + offset)) {\n overEdge = true;\n }\n }\n var location = DockLocation_1.DockLocation.CENTER;\n if (!overEdge) {\n if (x <= r.x + margin) {\n location = DockLocation_1.DockLocation.LEFT;\n }\n else if (x >= r.getRight() - margin) {\n location = DockLocation_1.DockLocation.RIGHT;\n }\n else if (y <= r.y + margin) {\n location = DockLocation_1.DockLocation.TOP;\n }\n else if (y >= r.getBottom() - margin) {\n location = DockLocation_1.DockLocation.BOTTOM;\n }\n }\n if (location !== this.state.showHiddenBorder) {\n this.setState({ showHiddenBorder: location });\n }\n };\n /** @internal */\n Layout.prototype.maximize = function (tabsetNode) {\n this.doAction(Actions_1.Actions.maximizeToggle(tabsetNode.getId()));\n };\n /** @internal */\n Layout.prototype.customizeTab = function (tabNode, renderValues) {\n if (this.props.onRenderTab) {\n this.props.onRenderTab(tabNode, renderValues);\n }\n };\n /** @internal */\n Layout.prototype.customizeTabSet = function (tabSetNode, renderValues) {\n if (this.props.onRenderTabSet) {\n this.props.onRenderTabSet(tabSetNode, renderValues);\n }\n };\n /** @internal */\n Layout.prototype.i18nName = function (id, param) {\n var message;\n if (this.props.i18nMapper) {\n message = this.props.i18nMapper(id, param);\n }\n if (message === undefined) {\n message = id + (param === undefined ? \"\" : param);\n }\n return message;\n };\n /** @internal */\n Layout.prototype.getOnRenderFloatingTabPlaceholder = function () {\n return this.props.onRenderFloatingTabPlaceholder;\n };\n /** @internal */\n Layout.prototype.getShowOverflowMenu = function () {\n return this.props.onShowOverflowMenu;\n };\n /** @internal */\n Layout.prototype.getTabSetPlaceHolderCallback = function () {\n return this.props.onTabSetPlaceHolder;\n };\n /** @internal */\n Layout.prototype.showContextMenu = function (node, event) {\n if (this.props.onContextMenu) {\n this.props.onContextMenu(node, event);\n }\n };\n /** @internal */\n Layout.prototype.auxMouseClick = function (node, event) {\n if (this.props.onAuxMouseClick) {\n this.props.onAuxMouseClick(node, event);\n }\n };\n return Layout;\n}(React.Component));\nexports.Layout = Layout;\n/** @internal */\nvar DragRectRenderWrapper = function (props) {\n React.useEffect(function () {\n var _a;\n (_a = props.onRendered) === null || _a === void 0 ? void 0 : _a.call(props);\n }, [props]);\n return (React.createElement(React.Fragment, null, props.children));\n};\n\n\n//# sourceURL=webpack://FlexLayout/./src/view/Layout.tsx?");
500
500
 
501
501
  /***/ }),
502
502