@aptre/flex-layout 0.2.2 → 0.2.3

package/dist/index.mjs

@@ -4,12 +4,8 @@ import { createPortal as createPortal2 } from "react-dom";
 
 // src/Orientation.ts
 var Orientation = class _Orientation {
-  static {
-    this.HORZ = new _Orientation("horz");
-  }
-  static {
-    this.VERT = new _Orientation("vert");
-  }
+  static HORZ = new _Orientation("horz");
+  static VERT = new _Orientation("vert");
   static flip(from) {
     if (from === _Orientation.HORZ) {
       return _Orientation.VERT;
@@ -18,6 +14,8 @@ var Orientation = class _Orientation {
     }
   }
   /** @internal */
+  _name;
+  /** @internal */
   constructor(name) {
     this._name = name;
   }
@@ -34,6 +32,10 @@ var Rect = class _Rect {
   static empty() {
     return new _Rect(0, 0, 0, 0);
   }
+  x;
+  y;
+  width;
+  height;
   constructor(x, y, width, height) {
     this.x = x;
     this.y = y;
@@ -99,24 +101,12 @@ var Rect = class _Rect {
 
 // src/DockLocation.ts
 var DockLocation = class _DockLocation {
-  static {
-    this.values = {};
-  }
-  static {
-    this.TOP = new _DockLocation("top", Orientation.VERT, 0);
-  }
-  static {
-    this.BOTTOM = new _DockLocation("bottom", Orientation.VERT, 1);
-  }
-  static {
-    this.LEFT = new _DockLocation("left", Orientation.HORZ, 0);
-  }
-  static {
-    this.RIGHT = new _DockLocation("right", Orientation.HORZ, 1);
-  }
-  static {
-    this.CENTER = new _DockLocation("center", Orientation.VERT, 0);
-  }
+  static values = {};
+  static TOP = new _DockLocation("top", Orientation.VERT, 0);
+  static BOTTOM = new _DockLocation("bottom", Orientation.VERT, 1);
+  static LEFT = new _DockLocation("left", Orientation.HORZ, 0);
+  static RIGHT = new _DockLocation("right", Orientation.HORZ, 1);
+  static CENTER = new _DockLocation("center", Orientation.VERT, 0);
   /** @internal */
   static getByName(name) {
     return _DockLocation.values[name];
@@ -137,6 +127,12 @@ var DockLocation = class _DockLocation {
     }
   }
   /** @internal */
+  _name;
+  /** @internal */
+  _orientation;
+  /** @internal */
+  _indexPlus;
+  /** @internal */
   constructor(name, orientation, indexPlus) {
     this._name = name;
     this._orientation = orientation;
@@ -206,22 +202,54 @@ var DockLocation = class _DockLocation {
 // src/DragDrop.ts
 var canUseDOM = !!(typeof window !== "undefined" && window.document && window.document.createElement);
 var DragDrop = class _DragDrop {
+  static instance = new _DragDrop();
+  /** @internal */
+  _fDblClick;
+  /** @internal */
+  _fClick;
+  /** @internal */
+  _fDragEnd;
+  /** @internal */
+  _fDragMove;
+  /** @internal */
+  _fDragStart;
+  /** @internal */
+  _fDragCancel;
+  /** @internal */
+  _glass;
+  /** @internal */
+  _defaultGlassCursor;
+  /** @internal */
+  _glassCursorOverride;
+  /** @internal */
+  _manualGlassManagement = false;
+  /** @internal */
+  _lastClick;
+  /** @internal */
+  _clickX;
+  /** @internal */
+  _clickY;
+  /** @internal */
+  _startX = 0;
+  /** @internal */
+  _startY = 0;
+  /** @internal */
+  _dragDepth = 0;
+  /** @internal */
+  _glassShowing = false;
+  /** @internal */
+  _dragging = false;
+  /** @internal */
+  _active = false;
+  // drag and drop is in progress, can be used on ios to prevent body scrolling (see demo)
+  /** @internal */
+  _document;
+  /** @internal */
+  _rootElement;
+  /** @internal */
+  _lastEvent;
   /** @internal */
   constructor() {
-    /** @internal */
-    this._manualGlassManagement = false;
-    /** @internal */
-    this._startX = 0;
-    /** @internal */
-    this._startY = 0;
-    /** @internal */
-    this._dragDepth = 0;
-    /** @internal */
-    this._glassShowing = false;
-    /** @internal */
-    this._dragging = false;
-    /** @internal */
-    this._active = false;
     if (canUseDOM) {
       this._glass = document.createElement("div");
       this._glass.style.zIndex = "998";
@@ -240,9 +268,6 @@ var DragDrop = class _DragDrop {
     this._clickX = 0;
     this._clickY = 0;
   }
-  static {
-    this.instance = new _DragDrop();
-  }
   // if you add the glass pane then you should remove it
   addGlass(fCancel) {
     if (!this._glassShowing) {
@@ -503,6 +528,8 @@ var DragDrop = class _DragDrop {
 
 // src/model/Action.ts
 var Action = class {
+  type;
+  data;
   constructor(type, data) {
     this.type = type;
     this.data = data;
@@ -511,48 +538,20 @@ var Action = class {
 
 // src/model/Actions.ts
 var Actions = class _Actions {
-  static {
-    this.ADD_NODE = "FlexLayout_AddNode";
-  }
-  static {
-    this.MOVE_NODE = "FlexLayout_MoveNode";
-  }
-  static {
-    this.DELETE_TAB = "FlexLayout_DeleteTab";
-  }
-  static {
-    this.DELETE_TABSET = "FlexLayout_DeleteTabset";
-  }
-  static {
-    this.RENAME_TAB = "FlexLayout_RenameTab";
-  }
-  static {
-    this.SELECT_TAB = "FlexLayout_SelectTab";
-  }
-  static {
-    this.SET_ACTIVE_TABSET = "FlexLayout_SetActiveTabset";
-  }
-  static {
-    this.ADJUST_SPLIT = "FlexLayout_AdjustSplit";
-  }
-  static {
-    this.ADJUST_BORDER_SPLIT = "FlexLayout_AdjustBorderSplit";
-  }
-  static {
-    this.MAXIMIZE_TOGGLE = "FlexLayout_MaximizeToggle";
-  }
-  static {
-    this.UPDATE_MODEL_ATTRIBUTES = "FlexLayout_UpdateModelAttributes";
-  }
-  static {
-    this.UPDATE_NODE_ATTRIBUTES = "FlexLayout_UpdateNodeAttributes";
-  }
-  static {
-    this.FLOAT_TAB = "FlexLayout_FloatTab";
-  }
-  static {
-    this.UNFLOAT_TAB = "FlexLayout_UnFloatTab";
-  }
+  static ADD_NODE = "FlexLayout_AddNode";
+  static MOVE_NODE = "FlexLayout_MoveNode";
+  static DELETE_TAB = "FlexLayout_DeleteTab";
+  static DELETE_TABSET = "FlexLayout_DeleteTabset";
+  static RENAME_TAB = "FlexLayout_RenameTab";
+  static SELECT_TAB = "FlexLayout_SelectTab";
+  static SET_ACTIVE_TABSET = "FlexLayout_SetActiveTabset";
+  static ADJUST_SPLIT = "FlexLayout_AdjustSplit";
+  static ADJUST_BORDER_SPLIT = "FlexLayout_AdjustBorderSplit";
+  static MAXIMIZE_TOGGLE = "FlexLayout_MaximizeToggle";
+  static UPDATE_MODEL_ATTRIBUTES = "FlexLayout_UpdateModelAttributes";
+  static UPDATE_NODE_ATTRIBUTES = "FlexLayout_UpdateNodeAttributes";
+  static FLOAT_TAB = "FlexLayout_FloatTab";
+  static UNFLOAT_TAB = "FlexLayout_UnFloatTab";
   /**
    * Adds a tab node to the given tabset node
    * @param json the json for the new tab node e.g {type:"tab", component:"table"}
@@ -688,15 +687,16 @@ var Actions = class _Actions {
 
 // src/Attribute.ts
 var Attribute = class {
-  static {
-    this.NUMBER = "number";
-  }
-  static {
-    this.STRING = "string";
-  }
-  static {
-    this.BOOLEAN = "boolean";
-  }
+  static NUMBER = "number";
+  static STRING = "string";
+  static BOOLEAN = "boolean";
+  name;
+  modelName;
+  defaultValue;
+  alwaysWriteJson;
+  type;
+  required;
+  fixed;
   constructor(name, modelName, defaultValue, alwaysWriteJson) {
     this.name = name;
     this.modelName = modelName;
@@ -722,6 +722,8 @@ var Attribute = class {
 
 // src/AttributeDefinitions.ts
 var AttributeDefinitions = class {
+  attributes;
+  nameToAttribute;
   constructor() {
     this.attributes = [];
     this.nameToAttribute = {};
@@ -817,6 +819,11 @@ var AttributeDefinitions = class {
 
 // src/DropInfo.ts
 var DropInfo = class {
+  node;
+  rect;
+  location;
+  index;
+  className;
   constructor(node, rect, location, index, className) {
     this.node = node;
     this.rect = rect;
@@ -910,12 +917,28 @@ var CLASSES = /* @__PURE__ */ ((CLASSES2) => {
 
 // src/model/Node.ts
 var Node = class {
+  /** @internal */
+  _model;
+  /** @internal */
+  _attributes;
+  /** @internal */
+  _parent;
+  /** @internal */
+  _children;
+  /** @internal */
+  _fixed;
+  /** @internal */
+  _rect;
+  /** @internal */
+  _visible;
+  /** @internal */
+  _listeners;
+  /** @internal */
+  _dirty = false;
+  /** @internal */
+  _tempSize = 0;
   /** @internal */
   constructor(model) {
-    /** @internal */
-    this._dirty = false;
-    /** @internal */
-    this._tempSize = 0;
     this._model = model;
     this._attributes = {};
     this._children = [];
@@ -1126,9 +1149,7 @@ var Node = class {
 
 // src/model/SplitterNode.ts
 var SplitterNode = class _SplitterNode extends Node {
-  static {
-    this.TYPE = "splitter";
-  }
+  static TYPE = "splitter";
   /** @internal */
   constructor(model) {
     super(model);
@@ -1193,18 +1214,14 @@ var SplitterNode = class _SplitterNode extends Node {
 
 // src/model/TabNode.ts
 var TabNode = class _TabNode extends Node {
-  static {
-    this.TYPE = "tab";
-  }
+  static TYPE = "tab";
   /** @internal */
   static _fromJson(json, model, addToModel = true) {
     const newLayoutNode = new _TabNode(model, json, addToModel);
     return newLayoutNode;
   }
-  static {
-    /** @internal */
-    this._attributeDefinitions = _TabNode._createAttributeDefinitions();
-  }
+  /** @internal */
+  static _attributeDefinitions = _TabNode._createAttributeDefinitions();
   /** @internal */
   static _createAttributeDefinitions() {
     const attributeDefinitions = new AttributeDefinitions();
@@ -1231,6 +1248,14 @@ var TabNode = class _TabNode extends Node {
     return attributeDefinitions;
   }
   /** @internal */
+  _tabRect;
+  /** @internal */
+  _renderedName;
+  /** @internal */
+  _extra;
+  /** @internal */
+  _window;
+  /** @internal */
   constructor(model, json, addToModel = true) {
     super(model);
     this._extra = {};
@@ -1585,9 +1610,7 @@ function ulid(seedTime, prng) {
 
 // src/model/RowNode.ts
 var RowNode = class _RowNode extends Node {
-  static {
-    this.TYPE = "row";
-  }
+  static TYPE = "row";
   /** @internal */
   static _fromJson(json, model) {
     const newLayoutNode = new _RowNode(model, json);
@@ -1604,10 +1627,8 @@ var RowNode = class _RowNode extends Node {
     }
     return newLayoutNode;
   }
-  static {
-    /** @internal */
-    this._attributeDefinitions = _RowNode._createAttributeDefinitions();
-  }
+  /** @internal */
+  static _attributeDefinitions = _RowNode._createAttributeDefinitions();
   /** @internal */
   static _createAttributeDefinitions() {
     const attributeDefinitions = new AttributeDefinitions();
@@ -1619,6 +1640,12 @@ var RowNode = class _RowNode extends Node {
     return attributeDefinitions;
   }
   /** @internal */
+  _drawChildren;
+  /** @internal */
+  _minHeight;
+  /** @internal */
+  _minWidth;
+  /** @internal */
   constructor(model, json) {
     super(model);
     this._dirty = true;
@@ -2047,9 +2074,7 @@ var RowNode = class _RowNode extends Node {
 
 // src/model/TabSetNode.ts
 var TabSetNode = class _TabSetNode extends Node {
-  static {
-    this.TYPE = "tabset";
-  }
+  static TYPE = "tabset";
   /** @internal */
   static _fromJson(json, model) {
     const newLayoutNode = new _TabSetNode(model, json);
@@ -2070,10 +2095,8 @@ var TabSetNode = class _TabSetNode extends Node {
     }
     return newLayoutNode;
   }
-  static {
-    /** @internal */
-    this._attributeDefinitions = _TabSetNode._createAttributeDefinitions();
-  }
+  /** @internal */
+  static _attributeDefinitions = _TabSetNode._createAttributeDefinitions();
   /** @internal */
   static _createAttributeDefinitions() {
     const attributeDefinitions = new AttributeDefinitions();
@@ -2106,6 +2129,14 @@ var TabSetNode = class _TabSetNode extends Node {
     return attributeDefinitions;
   }
   /** @internal */
+  _contentRect;
+  /** @internal */
+  _tabHeaderRect;
+  /** @internal */
+  _calculatedTabBarHeight;
+  /** @internal */
+  _calculatedHeaderBarHeight;
+  /** @internal */
   constructor(model, json) {
     super(model);
     _TabSetNode._attributeDefinitions.fromJson(json, this._attributes);
@@ -2515,22 +2546,7 @@ function randomUUID() {
 
 // src/model/BorderNode.ts
 var BorderNode = class _BorderNode extends Node {
-  /** @internal */
-  constructor(location, json, model) {
-    super(model);
-    /** @internal */
-    this._adjustedSize = 0;
-    /** @internal */
-    this._calculatedBorderBarSize = 0;
-    this._location = location;
-    this._drawChildren = [];
-    this._attributes.id = `border_${location.getName()}`;
-    _BorderNode._attributeDefinitions.fromJson(json, this._attributes);
-    model._addNode(this);
-  }
-  static {
-    this.TYPE = "border";
-  }
+  static TYPE = "border";
   /** @internal */
   static _fromJson(json, model) {
     const location = DockLocation.getByName(json.location);
@@ -2544,10 +2560,8 @@ var BorderNode = class _BorderNode extends Node {
     }
     return border;
   }
-  static {
-    /** @internal */
-    this._attributeDefinitions = _BorderNode._createAttributeDefinitions();
-  }
+  /** @internal */
+  static _attributeDefinitions = _BorderNode._createAttributeDefinitions();
   /** @internal */
   static _createAttributeDefinitions() {
     const attributeDefinitions = new AttributeDefinitions();
@@ -2565,6 +2579,27 @@ var BorderNode = class _BorderNode extends Node {
     attributeDefinitions.addInherited("enableAutoHide", "borderEnableAutoHide").setType(Attribute.BOOLEAN);
     return attributeDefinitions;
   }
+  /** @internal */
+  _contentRect;
+  /** @internal */
+  _tabHeaderRect;
+  /** @internal */
+  _location;
+  /** @internal */
+  _drawChildren;
+  /** @internal */
+  _adjustedSize = 0;
+  /** @internal */
+  _calculatedBorderBarSize = 0;
+  /** @internal */
+  constructor(location, json, model) {
+    super(model);
+    this._location = location;
+    this._drawChildren = [];
+    this._attributes.id = `border_${location.getName()}`;
+    _BorderNode._attributeDefinitions.fromJson(json, this._attributes);
+    model._addNode(this);
+  }
   getLocation() {
     return this._location;
   }
@@ -3177,9 +3212,7 @@ function showPopup(triggerElement, items, onSelect, layout, iconFactory, titleFa
   const onElementMouseDown = (event) => {
     event.stopPropagation();
   };
-  const onDocMouseDown = (_event) => {
-    onHide();
-  };
+  const onDocMouseDown = () => onHide();
   elm.addEventListener("mousedown", onElementMouseDown);
   currentDocument.addEventListener("mousedown", onDocMouseDown);
   layout.showPortal(
@@ -4436,307 +4469,62 @@ var defaultIcons = {
 var isDesktop = typeof window !== "undefined" && window.matchMedia && window.matchMedia("(hover: hover) and (pointer: fine)").matches;
 var defaultSupportsPopout = isDesktop;
 var Layout = class extends React16.Component {
+  /** @internal */
+  selfRef;
+  /** @internal */
+  findHeaderBarSizeRef;
+  /** @internal */
+  findTabBarSizeRef;
+  /** @internal */
+  findBorderBarSizeRef;
+  /** @internal */
+  previousModel;
+  /** @internal */
+  centerRect;
+  /** @internal */
+  // private start: number = 0;
+  /** @internal */
+  // private layoutTime: number = 0;
+  /** @internal */
+  tabIds;
+  /** @internal */
+  newTabJson;
+  /** @internal */
+  firstMove = false;
+  /** @internal */
+  dragNode;
+  /** @internal */
+  dragDiv;
+  /** @internal */
+  dragRectRendered = true;
+  /** @internal */
+  dragDivText = void 0;
+  /** @internal */
+  dropInfo;
+  /** @internal */
+  customDrop;
+  /** @internal */
+  outlineDiv;
+  /** @internal */
+  edgeRectLength = 100;
+  /** @internal */
+  edgeRectWidth = 10;
+  /** @internal */
+  fnNewNodeDropped;
+  /** @internal */
+  currentDocument;
+  /** @internal */
+  currentWindow;
+  /** @internal */
+  supportsPopout;
+  /** @internal */
+  popoutURL;
+  /** @internal */
+  icons;
+  /** @internal */
+  resizeObserver;
   constructor(props) {
     super(props);
-    /** @internal */
-    this.firstMove = false;
-    /** @internal */
-    this.dragRectRendered = true;
-    /** @internal */
-    this.dragDivText = void 0;
-    /** @internal */
-    this.edgeRectLength = 100;
-    /** @internal */
-    this.edgeRectWidth = 10;
-    /** @internal */
-    this.onModelChange = (action) => {
-      this.forceUpdate();
-      if (this.props.onModelChange) {
-        this.props.onModelChange(this.props.model, action);
-      }
-    };
-    /** @internal */
-    this.updateRect = (domRect) => {
-      if (!domRect) {
-        domRect = this.getDomRect();
-      }
-      if (!domRect) {
-        return;
-      }
-      const rect = new Rect(0, 0, domRect.width, domRect.height);
-      if (!rect.equals(this.state.rect) && rect.width !== 0 && rect.height !== 0) {
-        this.setState({ rect });
-      }
-    };
-    /** @internal */
-    this.updateLayoutMetrics = () => {
-      if (this.findHeaderBarSizeRef.current) {
-        const headerBarSize = this.findHeaderBarSizeRef.current.getBoundingClientRect().height;
-        if (headerBarSize !== this.state.calculatedHeaderBarSize) {
-          this.setState({ calculatedHeaderBarSize: headerBarSize });
-        }
-      }
-      if (this.findTabBarSizeRef.current) {
-        const tabBarSize = this.findTabBarSizeRef.current.getBoundingClientRect().height;
-        if (tabBarSize !== this.state.calculatedTabBarSize) {
-          this.setState({ calculatedTabBarSize: tabBarSize });
-        }
-      }
-      if (this.findBorderBarSizeRef.current) {
-        const borderBarSize = this.findBorderBarSizeRef.current.getBoundingClientRect().height;
-        if (borderBarSize !== this.state.calculatedBorderBarSize) {
-          this.setState({ calculatedBorderBarSize: borderBarSize });
-        }
-      }
-    };
-    /** @internal */
-    this.getClassName = (defaultClassName) => {
-      if (this.props.classNameMapper === void 0) {
-        return defaultClassName;
-      } else {
-        return this.props.classNameMapper(defaultClassName);
-      }
-    };
-    /** @internal */
-    this.onCloseWindow = (id) => {
-      this.doAction(Actions.unFloatTab(id));
-      try {
-        this.props.model.getNodeById(id)._setWindow(void 0);
-      } catch (e) {
-      }
-    };
-    /** @internal */
-    this.onSetWindow = (id, window2) => {
-      this.props.model.getNodeById(id)._setWindow(window2);
-    };
-    /** @internal */
-    this.onCancelAdd = () => {
-      const rootdiv = this.selfRef.current;
-      if (rootdiv && this.dragDiv) {
-        rootdiv.removeChild(this.dragDiv);
-      }
-      this.dragDiv = void 0;
-      this.hidePortal();
-      if (this.fnNewNodeDropped != null) {
-        this.fnNewNodeDropped();
-        this.fnNewNodeDropped = void 0;
-      }
-      try {
-        this.customDrop?.invalidated?.();
-      } catch (e) {
-        console.error(e);
-      }
-      DragDrop.instance.hideGlass();
-      this.newTabJson = void 0;
-      this.customDrop = void 0;
-    };
-    /** @internal */
-    this.onCancelDrag = (wasDragging) => {
-      if (wasDragging) {
-        const rootdiv = this.selfRef.current;
-        const outlineDiv = this.outlineDiv;
-        if (rootdiv && outlineDiv) {
-          try {
-            rootdiv.removeChild(outlineDiv);
-          } catch (e) {
-          }
-        }
-        const dragDiv = this.dragDiv;
-        if (rootdiv && dragDiv) {
-          try {
-            rootdiv.removeChild(dragDiv);
-          } catch (e) {
-          }
-        }
-        this.dragDiv = void 0;
-        this.hidePortal();
-        this.setState({ showEdges: false });
-        if (this.fnNewNodeDropped != null) {
-          this.fnNewNodeDropped();
-          this.fnNewNodeDropped = void 0;
-        }
-        try {
-          this.customDrop?.invalidated?.();
-        } catch (e) {
-          console.error(e);
-        }
-        DragDrop.instance.hideGlass();
-        this.newTabJson = void 0;
-        this.customDrop = void 0;
-      }
-      this.setState({ showHiddenBorder: DockLocation.CENTER });
-    };
-    /** @internal */
-    this.onDragDivMouseDown = (event) => {
-      event.preventDefault();
-      this.dragStart(event, this.dragDivText, TabNode._fromJson(this.newTabJson, this.props.model, false), true, void 0, void 0);
-    };
-    /** @internal */
-    this.dragStart = (event, dragDivText, node, allowDrag, onClick, onDoubleClick) => {
-      if (!allowDrag) {
-        DragDrop.instance.startDrag(event, void 0, void 0, void 0, void 0, onClick, onDoubleClick, this.currentDocument, this.selfRef.current ?? void 0);
-      } else {
-        this.dragNode = node;
-        this.dragDivText = dragDivText;
-        DragDrop.instance.startDrag(event, this.onDragStart, this.onDragMove, this.onDragEnd, this.onCancelDrag, onClick, onDoubleClick, this.currentDocument, this.selfRef.current ?? void 0);
-      }
-    };
-    /** @internal */
-    this.dragRectRender = (text, node, json, onRendered) => {
-      let content;
-      if (text !== void 0) {
-        content = /* @__PURE__ */ React16.createElement("div", { style: { whiteSpace: "pre" } }, text.replace("<br>", "\n"));
-      } else {
-        if (node && node instanceof TabNode) {
-          content = /* @__PURE__ */ React16.createElement(TabButtonStamp, { node, layout: this, iconFactory: this.props.iconFactory, titleFactory: this.props.titleFactory });
-        }
-      }
-      if (this.props.onRenderDragRect !== void 0) {
-        const customContent = this.props.onRenderDragRect(content, node, json);
-        if (customContent !== void 0) {
-          content = customContent;
-        }
-      }
-      this.dragRectRendered = false;
-      const dragDiv = this.dragDiv;
-      if (dragDiv) {
-        dragDiv.style.visibility = "hidden";
-        this.showPortal(
-          /* @__PURE__ */ React16.createElement(
-            DragRectRenderWrapper,
-            {
-              onRendered: () => {
-                this.dragRectRendered = true;
-                onRendered?.();
-              }
-            },
-            content
-          ),
-          dragDiv
-        );
-      }
-    };
-    /** @internal */
-    this.showPortal = (control, element) => {
-      const portal = createPortal2(control, element);
-      this.setState({ portal });
-    };
-    /** @internal */
-    this.hidePortal = () => {
-      this.setState({ portal: void 0 });
-    };
-    /** @internal */
-    this.onDragStart = () => {
-      this.dropInfo = void 0;
-      this.customDrop = void 0;
-      const rootdiv = this.selfRef.current;
-      this.outlineDiv = this.currentDocument.createElement("div");
-      this.outlineDiv.className = this.getClassName("flexlayout__outline_rect" /* FLEXLAYOUT__OUTLINE_RECT */);
-      this.outlineDiv.style.visibility = "hidden";
-      if (rootdiv) {
-        rootdiv.appendChild(this.outlineDiv);
-      }
-      if (this.dragDiv == null) {
-        this.dragDiv = this.currentDocument.createElement("div");
-        this.dragDiv.className = this.getClassName("flexlayout__drag_rect" /* FLEXLAYOUT__DRAG_RECT */);
-        this.dragDiv.setAttribute("data-layout-path", "/drag-rectangle");
-        this.dragRectRender(this.dragDivText, this.dragNode, this.newTabJson);
-        if (rootdiv) {
-          rootdiv.appendChild(this.dragDiv);
-        }
-      }
-      if (this.props.model.getMaximizedTabset() === void 0) {
-        this.setState({ showEdges: this.props.model.isEnableEdgeDock() });
-      }
-      if (this.dragNode && this.outlineDiv && this.dragNode instanceof TabNode && this.dragNode.getTabRect() !== void 0) {
-        this.dragNode.getTabRect()?.positionElement(this.outlineDiv);
-      }
-      this.firstMove = true;
-      return true;
-    };
-    /** @internal */
-    this.onDragMove = (event) => {
-      if (this.firstMove === false) {
-        const speed = this.props.model._getAttribute("tabDragSpeed");
-        if (this.outlineDiv) {
-          this.outlineDiv.style.transition = `top ${speed}s, left ${speed}s, width ${speed}s, height ${speed}s`;
-        }
-      }
-      this.firstMove = false;
-      const clientRect = this.selfRef.current?.getBoundingClientRect();
-      const pos = {
-        x: event.clientX - (clientRect?.left ?? 0),
-        y: event.clientY - (clientRect?.top ?? 0)
-      };
-      this.checkForBorderToShow(pos.x, pos.y);
-      const dragRect = this.dragDiv?.getBoundingClientRect() ?? new DOMRect(0, 0, 100, 100);
-      let newLeft = pos.x - dragRect.width / 2;
-      if (newLeft + dragRect.width > (clientRect?.width ?? 0)) {
-        newLeft = (clientRect?.width ?? 0) - dragRect.width;
-      }
-      newLeft = Math.max(0, newLeft);
-      if (this.dragDiv) {
-        this.dragDiv.style.left = newLeft + "px";
-        this.dragDiv.style.top = pos.y + 5 + "px";
-        if (this.dragRectRendered && this.dragDiv.style.visibility === "hidden") {
-          this.dragDiv.style.visibility = "visible";
-        }
-      }
-      const dropInfo = this.props.model._findDropTargetNode(this.dragNode, pos.x, pos.y);
-      if (dropInfo) {
-        if (this.props.onTabDrag) {
-          this.handleCustomTabDrag(dropInfo, pos, event);
-        } else {
-          this.dropInfo = dropInfo;
-          if (this.outlineDiv) {
-            this.outlineDiv.className = this.getClassName(dropInfo.className);
-            dropInfo.rect.positionElement(this.outlineDiv);
-            this.outlineDiv.style.visibility = "visible";
-          }
-        }
-      }
-    };
-    /** @internal */
-    this.onDragEnd = (event) => {
-      const rootdiv = this.selfRef.current;
-      if (rootdiv) {
-        if (this.outlineDiv) {
-          rootdiv.removeChild(this.outlineDiv);
-        }
-        if (this.dragDiv) {
-          rootdiv.removeChild(this.dragDiv);
-        }
-      }
-      this.dragDiv = void 0;
-      this.hidePortal();
-      this.setState({ showEdges: false });
-      DragDrop.instance.hideGlass();
-      if (this.dropInfo) {
-        if (this.customDrop) {
-          this.newTabJson = void 0;
-          try {
-            const { callback, dragging, over, x, y, location } = this.customDrop;
-            callback(dragging, over, x, y, location);
-            if (this.fnNewNodeDropped != null) {
-              this.fnNewNodeDropped();
-              this.fnNewNodeDropped = void 0;
-            }
-          } catch (e) {
-            console.error(e);
-          }
-        } else if (this.newTabJson !== void 0) {
-          const newNode = this.doAction(Actions.addNode(this.newTabJson, this.dropInfo.node.getId(), this.dropInfo.location, this.dropInfo.index));
-          if (this.fnNewNodeDropped != null) {
-            this.fnNewNodeDropped(newNode, event);
-            this.fnNewNodeDropped = void 0;
-          }
-          this.newTabJson = void 0;
-        } else if (this.dragNode !== void 0) {
-          this.doAction(Actions.moveNode(this.dragNode.getId(), this.dropInfo.node.getId(), this.dropInfo.location, this.dropInfo.index));
-        }
-      }
-      this.setState({ showHiddenBorder: DockLocation.CENTER });
-    };
     this.props.model._setChangeListener(this.onModelChange);
     this.tabIds = [];
     this.selfRef = React16.createRef();
@@ -4778,6 +4566,13 @@ var Layout = class extends React16.Component {
     return style2;
   }
   /** @internal */
+  onModelChange = (action) => {
+    this.forceUpdate();
+    if (this.props.onModelChange) {
+      this.props.onModelChange(this.props.model, action);
+    }
+  };
+  /** @internal */
   doAction(action) {
     if (this.props.onAction !== void 0) {
       const outcome = this.props.onAction(action);
@@ -4815,6 +4610,48 @@ var Layout = class extends React16.Component {
     }
   }
   /** @internal */
+  updateRect = (domRect) => {
+    if (!domRect) {
+      domRect = this.getDomRect();
+    }
+    if (!domRect) {
+      return;
+    }
+    const rect = new Rect(0, 0, domRect.width, domRect.height);
+    if (!rect.equals(this.state.rect) && rect.width !== 0 && rect.height !== 0) {
+      this.setState({ rect });
+    }
+  };
+  /** @internal */
+  updateLayoutMetrics = () => {
+    if (this.findHeaderBarSizeRef.current) {
+      const headerBarSize = this.findHeaderBarSizeRef.current.getBoundingClientRect().height;
+      if (headerBarSize !== this.state.calculatedHeaderBarSize) {
+        this.setState({ calculatedHeaderBarSize: headerBarSize });
+      }
+    }
+    if (this.findTabBarSizeRef.current) {
+      const tabBarSize = this.findTabBarSizeRef.current.getBoundingClientRect().height;
+      if (tabBarSize !== this.state.calculatedTabBarSize) {
+        this.setState({ calculatedTabBarSize: tabBarSize });
+      }
+    }
+    if (this.findBorderBarSizeRef.current) {
+      const borderBarSize = this.findBorderBarSizeRef.current.getBoundingClientRect().height;
+      if (borderBarSize !== this.state.calculatedBorderBarSize) {
+        this.setState({ calculatedBorderBarSize: borderBarSize });
+      }
+    }
+  };
+  /** @internal */
+  getClassName = (defaultClassName) => {
+    if (this.props.classNameMapper === void 0) {
+      return defaultClassName;
+    } else {
+      return this.props.classNameMapper(defaultClassName);
+    }
+  };
+  /** @internal */
   getCurrentDocument() {
     return this.currentDocument;
   }
@@ -4955,6 +4792,18 @@ var Layout = class extends React16.Component {
     return /* @__PURE__ */ React16.createElement(React16.Fragment, null, /* @__PURE__ */ React16.createElement("div", { key: "findHeaderBarSize", ref: this.findHeaderBarSizeRef, style: fontStyle, className: this.getClassName("flexlayout__tabset_header_sizer" /* FLEXLAYOUT__TABSET_HEADER_SIZER */) }, "FindHeaderBarSize"), /* @__PURE__ */ React16.createElement("div", { key: "findTabBarSize", ref: this.findTabBarSizeRef, style: fontStyle, className: this.getClassName("flexlayout__tabset_sizer" /* FLEXLAYOUT__TABSET_SIZER */) }, "FindTabBarSize"), /* @__PURE__ */ React16.createElement("div", { key: "findBorderBarSize", ref: this.findBorderBarSizeRef, style: fontStyle, className: this.getClassName("flexlayout__border_sizer" /* FLEXLAYOUT__BORDER_SIZER */) }, "FindBorderBarSize"));
   }
   /** @internal */
+  onCloseWindow = (id) => {
+    this.doAction(Actions.unFloatTab(id));
+    try {
+      this.props.model.getNodeById(id)._setWindow(void 0);
+    } catch (e) {
+    }
+  };
+  /** @internal */
+  onSetWindow = (id, window2) => {
+    this.props.model.getNodeById(id)._setWindow(window2);
+  };
+  /** @internal */
   renderBorder(borderSet, borderComponents, tabComponents, floatingWindows, splitterComponents) {
     for (const border of borderSet.getBorders()) {
       const borderPath = `/border/${border.getLocation().getName()}`;
@@ -5158,6 +5007,234 @@ var Layout = class extends React16.Component {
     rootdiv.appendChild(this.dragDiv);
   }
   /** @internal */
+  onCancelAdd = () => {
+    const rootdiv = this.selfRef.current;
+    if (rootdiv && this.dragDiv) {
+      rootdiv.removeChild(this.dragDiv);
+    }
+    this.dragDiv = void 0;
+    this.hidePortal();
+    if (this.fnNewNodeDropped != null) {
+      this.fnNewNodeDropped();
+      this.fnNewNodeDropped = void 0;
+    }
+    try {
+      this.customDrop?.invalidated?.();
+    } catch (e) {
+      console.error(e);
+    }
+    DragDrop.instance.hideGlass();
+    this.newTabJson = void 0;
+    this.customDrop = void 0;
+  };
+  /** @internal */
+  onCancelDrag = (wasDragging) => {
+    if (wasDragging) {
+      const rootdiv = this.selfRef.current;
+      const outlineDiv = this.outlineDiv;
+      if (rootdiv && outlineDiv) {
+        try {
+          rootdiv.removeChild(outlineDiv);
+        } catch (e) {
+        }
+      }
+      const dragDiv = this.dragDiv;
+      if (rootdiv && dragDiv) {
+        try {
+          rootdiv.removeChild(dragDiv);
+        } catch (e) {
+        }
+      }
+      this.dragDiv = void 0;
+      this.hidePortal();
+      this.setState({ showEdges: false });
+      if (this.fnNewNodeDropped != null) {
+        this.fnNewNodeDropped();
+        this.fnNewNodeDropped = void 0;
+      }
+      try {
+        this.customDrop?.invalidated?.();
+      } catch (e) {
+        console.error(e);
+      }
+      DragDrop.instance.hideGlass();
+      this.newTabJson = void 0;
+      this.customDrop = void 0;
+    }
+    this.setState({ showHiddenBorder: DockLocation.CENTER });
+  };
+  /** @internal */
+  onDragDivMouseDown = (event) => {
+    event.preventDefault();
+    this.dragStart(event, this.dragDivText, TabNode._fromJson(this.newTabJson, this.props.model, false), true, void 0, void 0);
+  };
+  /** @internal */
+  dragStart = (event, dragDivText, node, allowDrag, onClick, onDoubleClick) => {
+    if (!allowDrag) {
+      DragDrop.instance.startDrag(event, void 0, void 0, void 0, void 0, onClick, onDoubleClick, this.currentDocument, this.selfRef.current ?? void 0);
+    } else {
+      this.dragNode = node;
+      this.dragDivText = dragDivText;
+      DragDrop.instance.startDrag(event, this.onDragStart, this.onDragMove, this.onDragEnd, this.onCancelDrag, onClick, onDoubleClick, this.currentDocument, this.selfRef.current ?? void 0);
+    }
+  };
+  /** @internal */
+  dragRectRender = (text, node, json, onRendered) => {
+    let content;
+    if (text !== void 0) {
+      content = /* @__PURE__ */ React16.createElement("div", { style: { whiteSpace: "pre" } }, text.replace("<br>", "\n"));
+    } else {
+      if (node && node instanceof TabNode) {
+        content = /* @__PURE__ */ React16.createElement(TabButtonStamp, { node, layout: this, iconFactory: this.props.iconFactory, titleFactory: this.props.titleFactory });
+      }
+    }
+    if (this.props.onRenderDragRect !== void 0) {
+      const customContent = this.props.onRenderDragRect(content, node, json);
+      if (customContent !== void 0) {
+        content = customContent;
+      }
+    }
+    this.dragRectRendered = false;
+    const dragDiv = this.dragDiv;
+    if (dragDiv) {
+      dragDiv.style.visibility = "hidden";
+      this.showPortal(
+        /* @__PURE__ */ React16.createElement(
+          DragRectRenderWrapper,
+          {
+            onRendered: () => {
+              this.dragRectRendered = true;
+              onRendered?.();
+            }
+          },
+          content
+        ),
+        dragDiv
+      );
+    }
+  };
+  /** @internal */
+  showPortal = (control, element) => {
+    const portal = createPortal2(control, element);
+    this.setState({ portal });
+  };
+  /** @internal */
+  hidePortal = () => {
+    this.setState({ portal: void 0 });
+  };
+  /** @internal */
+  onDragStart = () => {
+    this.dropInfo = void 0;
+    this.customDrop = void 0;
+    const rootdiv = this.selfRef.current;
+    this.outlineDiv = this.currentDocument.createElement("div");
+    this.outlineDiv.className = this.getClassName("flexlayout__outline_rect" /* FLEXLAYOUT__OUTLINE_RECT */);
+    this.outlineDiv.style.visibility = "hidden";
+    if (rootdiv) {
+      rootdiv.appendChild(this.outlineDiv);
+    }
+    if (this.dragDiv == null) {
+      this.dragDiv = this.currentDocument.createElement("div");
+      this.dragDiv.className = this.getClassName("flexlayout__drag_rect" /* FLEXLAYOUT__DRAG_RECT */);
+      this.dragDiv.setAttribute("data-layout-path", "/drag-rectangle");
+      this.dragRectRender(this.dragDivText, this.dragNode, this.newTabJson);
+      if (rootdiv) {
+        rootdiv.appendChild(this.dragDiv);
+      }
+    }
+    if (this.props.model.getMaximizedTabset() === void 0) {
+      this.setState({ showEdges: this.props.model.isEnableEdgeDock() });
+    }
+    if (this.dragNode && this.outlineDiv && this.dragNode instanceof TabNode && this.dragNode.getTabRect() !== void 0) {
+      this.dragNode.getTabRect()?.positionElement(this.outlineDiv);
+    }
+    this.firstMove = true;
+    return true;
+  };
+  /** @internal */
+  onDragMove = (event) => {
+    if (this.firstMove === false) {
+      const speed = this.props.model._getAttribute("tabDragSpeed");
+      if (this.outlineDiv) {
+        this.outlineDiv.style.transition = `top ${speed}s, left ${speed}s, width ${speed}s, height ${speed}s`;
+      }
+    }
+    this.firstMove = false;
+    const clientRect = this.selfRef.current?.getBoundingClientRect();
+    const pos = {
+      x: event.clientX - (clientRect?.left ?? 0),
+      y: event.clientY - (clientRect?.top ?? 0)
+    };
+    this.checkForBorderToShow(pos.x, pos.y);
+    const dragRect = this.dragDiv?.getBoundingClientRect() ?? new DOMRect(0, 0, 100, 100);
+    let newLeft = pos.x - dragRect.width / 2;
+    if (newLeft + dragRect.width > (clientRect?.width ?? 0)) {
+      newLeft = (clientRect?.width ?? 0) - dragRect.width;
+    }
+    newLeft = Math.max(0, newLeft);
+    if (this.dragDiv) {
+      this.dragDiv.style.left = newLeft + "px";
+      this.dragDiv.style.top = pos.y + 5 + "px";
+      if (this.dragRectRendered && this.dragDiv.style.visibility === "hidden") {
+        this.dragDiv.style.visibility = "visible";
+      }
+    }
+    const dropInfo = this.props.model._findDropTargetNode(this.dragNode, pos.x, pos.y);
+    if (dropInfo) {
+      if (this.props.onTabDrag) {
+        this.handleCustomTabDrag(dropInfo, pos, event);
+      } else {
+        this.dropInfo = dropInfo;
+        if (this.outlineDiv) {
+          this.outlineDiv.className = this.getClassName(dropInfo.className);
+          dropInfo.rect.positionElement(this.outlineDiv);
+          this.outlineDiv.style.visibility = "visible";
+        }
+      }
+    }
+  };
+  /** @internal */
+  onDragEnd = (event) => {
+    const rootdiv = this.selfRef.current;
+    if (rootdiv) {
+      if (this.outlineDiv) {
+        rootdiv.removeChild(this.outlineDiv);
+      }
+      if (this.dragDiv) {
+        rootdiv.removeChild(this.dragDiv);
+      }
+    }
+    this.dragDiv = void 0;
+    this.hidePortal();
+    this.setState({ showEdges: false });
+    DragDrop.instance.hideGlass();
+    if (this.dropInfo) {
+      if (this.customDrop) {
+        this.newTabJson = void 0;
+        try {
+          const { callback, dragging, over, x, y, location } = this.customDrop;
+          callback(dragging, over, x, y, location);
+          if (this.fnNewNodeDropped != null) {
+            this.fnNewNodeDropped();
+            this.fnNewNodeDropped = void 0;
+          }
+        } catch (e) {
+          console.error(e);
+        }
+      } else if (this.newTabJson !== void 0) {
+        const newNode = this.doAction(Actions.addNode(this.newTabJson, this.dropInfo.node.getId(), this.dropInfo.location, this.dropInfo.index));
+        if (this.fnNewNodeDropped != null) {
+          this.fnNewNodeDropped(newNode, event);
+          this.fnNewNodeDropped = void 0;
+        }
+        this.newTabJson = void 0;
+      } else if (this.dragNode !== void 0) {
+        this.doAction(Actions.moveNode(this.dragNode.getId(), this.dropInfo.node.getId(), this.dropInfo.location, this.dropInfo.index));
+      }
+    }
+    this.setState({ showHiddenBorder: DockLocation.CENTER });
+  };
+  /** @internal */
   handleCustomTabDrag(dropInfo, pos, event) {
     let invalidated = this.customDrop?.invalidated;
     const currentCallback = this.customDrop?.callback;
@@ -5318,6 +5395,10 @@ var BorderSet = class _BorderSet {
     return borderSet;
   }
   /** @internal */
+  _model;
+  /** @internal */
+  _borders;
+  /** @internal */
   constructor(model) {
     this._model = model;
     this._borders = [];
@@ -5420,19 +5501,6 @@ var BorderSet = class _BorderSet {
 
 // src/model/Model.ts
 var Model = class _Model {
-  /**
-   * 'private' constructor. Use the static method Model.fromJson(json) to create a model
-   *  @internal
-   */
-  constructor() {
-    /** @internal */
-    this._borderRects = { inner: Rect.empty(), outer: Rect.empty() };
-    this._attributes = {};
-    this._idMap = {};
-    this._borders = new BorderSet(this);
-    this._pointerFine = true;
-    this._showHiddenBorder = DockLocation.CENTER;
-  }
   /**
    * Loads the model from the given json object
    * @param json the json model to load
@@ -5448,10 +5516,8 @@ var Model = class _Model {
     model._tidy();
     return model;
   }
-  static {
-    /** @internal */
-    this._attributeDefinitions = _Model._createAttributeDefinitions();
-  }
+  /** @internal */
+  static _attributeDefinitions = _Model._createAttributeDefinitions();
   /** @internal */
   static _createAttributeDefinitions() {
     const attributeDefinitions = new AttributeDefinitions();
@@ -5504,6 +5570,41 @@ var Model = class _Model {
     return attributeDefinitions;
   }
   /** @internal */
+  _attributes;
+  /** @internal */
+  _idMap;
+  /** @internal */
+  _changeListener;
+  /** @internal */
+  _root;
+  /** @internal */
+  _borders;
+  /** @internal */
+  _onAllowDrop;
+  /** @internal */
+  _maximizedTabSet;
+  /** @internal */
+  _activeTabSet;
+  /** @internal */
+  _borderRects = { inner: Rect.empty(), outer: Rect.empty() };
+  /** @internal */
+  _pointerFine;
+  /** @internal */
+  _onCreateTabSet;
+  /** @internal */
+  _showHiddenBorder;
+  /**
+   * 'private' constructor. Use the static method Model.fromJson(json) to create a model
+   *  @internal
+   */
+  constructor() {
+    this._attributes = {};
+    this._idMap = {};
+    this._borders = new BorderSet(this);
+    this._pointerFine = true;
+    this._showHiddenBorder = DockLocation.CENTER;
+  }
+  /** @internal */
   _setChangeListener(listener) {
     this._changeListener = listener;
   }