@aptre/flex-layout 0.3.0-beta.1 → 0.3.0-beta.2

package/dist/index.mjs

@@ -5,12 +5,8 @@ import { createRoot } from "react-dom/client";
 
 // 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;
@@ -19,6 +15,8 @@ var Orientation = class _Orientation {
     }
   }
   /** @internal */
+  _name;
+  /** @internal */
   constructor(name) {
     this._name = name;
   }
@@ -38,6 +36,10 @@ var Rect = class _Rect {
   static fromJson(json) {
     return new _Rect(json.x, json.y, json.width, json.height);
   }
+  x;
+  y;
+  width;
+  height;
   constructor(x, y, width, height) {
     this.x = x;
     this.y = y;
@@ -136,24 +138,12 @@ var Rect = class _Rect {
 
 // src/DockLocation.ts
 var DockLocation = class _DockLocation {
-  static {
-    this.values = /* @__PURE__ */ new Map();
-  }
-  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 = /* @__PURE__ */ new Map();
+  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.get(name);
@@ -174,6 +164,12 @@ var DockLocation = class _DockLocation {
     }
   }
   /** @internal */
+  name;
+  /** @internal */
+  orientation;
+  /** @internal */
+  indexPlus;
+  /** @internal */
   constructor(_name, _orientation, _indexPlus) {
     this.name = _name;
     this.orientation = _orientation;
@@ -355,6 +351,8 @@ var CLASSES = /* @__PURE__ */ ((CLASSES2) => {
 
 // src/model/Action.ts
 var Action = class {
+  type;
+  data;
   constructor(type, data) {
     this.type = type;
     this.data = data;
@@ -363,54 +361,22 @@ 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_WEIGHTS = "FlexLayout_AdjustWeights";
-  }
-  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.POPOUT_TAB = "FlexLayout_PopoutTab";
-  }
-  static {
-    this.POPOUT_TABSET = "FlexLayout_PopoutTabset";
-  }
-  static {
-    this.CLOSE_WINDOW = "FlexLayout_CloseWindow";
-  }
-  static {
-    this.CREATE_WINDOW = "FlexLayout_CreateWindow";
-  }
+  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_WEIGHTS = "FlexLayout_AdjustWeights";
+  static ADJUST_BORDER_SPLIT = "FlexLayout_AdjustBorderSplit";
+  static MAXIMIZE_TOGGLE = "FlexLayout_MaximizeToggle";
+  static UPDATE_MODEL_ATTRIBUTES = "FlexLayout_UpdateModelAttributes";
+  static UPDATE_NODE_ATTRIBUTES = "FlexLayout_UpdateNodeAttributes";
+  static POPOUT_TAB = "FlexLayout_PopoutTab";
+  static POPOUT_TABSET = "FlexLayout_PopoutTabset";
+  static CLOSE_WINDOW = "FlexLayout_CloseWindow";
+  static CREATE_WINDOW = "FlexLayout_CreateWindow";
   /**
    * Adds a tab node to the given tabset node
    * @param json the json for the new tab node e.g {type:"tab", component:"table"}
@@ -562,15 +528,20 @@ 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;
+  alias;
+  modelName;
+  pairedAttr;
+  pairedType;
+  defaultValue;
+  alwaysWriteJson;
+  type;
+  required;
+  fixed;
+  description;
   constructor(name, modelName, defaultValue, alwaysWriteJson) {
     this.name = name;
     this.alias = void 0;
@@ -611,6 +582,8 @@ var Attribute = class {
 
 // src/AttributeDefinitions.ts
 var AttributeDefinitions = class {
+  attributes;
+  nameToAttribute;
   constructor() {
     this.attributes = [];
     this.nameToAttribute = /* @__PURE__ */ new Map();
@@ -732,6 +705,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;
@@ -753,6 +731,12 @@ var BorderSet = class _BorderSet {
     return borderSet;
   }
   /** @internal */
+  borders;
+  /** @internal */
+  borderMap;
+  /** @internal */
+  layoutHorizontal;
+  /** @internal */
   constructor(_model) {
     this.borders = [];
     this.borderMap = /* @__PURE__ */ new Map();
@@ -810,6 +794,20 @@ var BorderSet = class _BorderSet {
 
 // src/model/Node.ts
 var Node = class {
+  /** @internal */
+  model;
+  /** @internal */
+  attributes;
+  /** @internal */
+  parent;
+  /** @internal */
+  children;
+  /** @internal */
+  rect;
+  /** @internal */
+  path;
+  /** @internal */
+  listeners;
   /** @internal */
   constructor(_model) {
     this.model = _model;
@@ -1019,11 +1017,33 @@ import * as React from "react";
 
 // src/model/TabNode.ts
 var TabNode = class _TabNode extends Node {
+  static TYPE = "tab";
+  /** @internal */
+  static fromJson(json, model, addToModel = true) {
+    const newLayoutNode = new _TabNode(model, json, addToModel);
+    return newLayoutNode;
+  }
+  /** @internal */
+  tabRect = Rect.empty();
+  /** @internal */
+  moveableElement;
+  /** @internal */
+  tabStamp;
+  /** @internal */
+  renderedName;
+  /** @internal */
+  extra;
+  /** @internal */
+  visible;
+  /** @internal */
+  rendered;
+  /** @internal */
+  scrollTop;
+  /** @internal */
+  scrollLeft;
   /** @internal */
   constructor(model, json, addToModel = true) {
     super(model);
-    /** @internal */
-    this.tabRect = Rect.empty();
     this.extra = {};
     this.moveableElement = null;
     this.tabStamp = null;
@@ -1034,14 +1054,6 @@ var TabNode = class _TabNode extends Node {
       model.addNode(this);
     }
   }
-  static {
-    this.TYPE = "tab";
-  }
-  /** @internal */
-  static fromJson(json, model, addToModel = true) {
-    const newLayoutNode = new _TabNode(model, json, addToModel);
-    return newLayoutNode;
-  }
   getName() {
     return this.getAttr("name");
   }
@@ -1266,10 +1278,8 @@ var TabNode = class _TabNode extends Node {
   static getAttributeDefinitions() {
     return _TabNode.attributeDefinitions;
   }
-  static {
-    /** @internal */
-    this.attributeDefinitions = _TabNode.createAttributeDefinitions();
-  }
+  /** @internal */
+  static attributeDefinitions = _TabNode.createAttributeDefinitions();
   /** @internal */
   static createAttributeDefinitions() {
     const attributeDefinitions = new AttributeDefinitions();
@@ -1438,23 +1448,7 @@ function randomUUID() {
 
 // src/model/TabSetNode.ts
 var TabSetNode = class _TabSetNode extends Node {
-  /** @internal */
-  constructor(model, json) {
-    super(model);
-    /** @internal */
-    this.tabStripRect = Rect.empty();
-    /** @internal */
-    this.contentRect = Rect.empty();
-    this.calculatedMinHeight = 0;
-    this.calculatedMinWidth = 0;
-    this.calculatedMaxHeight = 0;
-    this.calculatedMaxWidth = 0;
-    _TabSetNode.attributeDefinitions.fromJson(json, this.attributes);
-    model.addNode(this);
-  }
-  static {
-    this.TYPE = "tabset";
-  }
+  static TYPE = "tabset";
   /** @internal */
   static fromJson(json, model, layoutWindow) {
     const newLayoutNode = new _TabSetNode(model, json);
@@ -1475,9 +1469,29 @@ var TabSetNode = class _TabSetNode extends Node {
     }
     return newLayoutNode;
   }
-  static {
-    /** @internal */
-    this.attributeDefinitions = _TabSetNode.createAttributeDefinitions();
+  /** @internal */
+  static attributeDefinitions = _TabSetNode.createAttributeDefinitions();
+  /** @internal */
+  tabStripRect = Rect.empty();
+  /** @internal */
+  contentRect = Rect.empty();
+  /** @internal */
+  calculatedMinHeight;
+  /** @internal */
+  calculatedMinWidth;
+  /** @internal */
+  calculatedMaxHeight;
+  /** @internal */
+  calculatedMaxWidth;
+  /** @internal */
+  constructor(model, json) {
+    super(model);
+    this.calculatedMinHeight = 0;
+    this.calculatedMinWidth = 0;
+    this.calculatedMaxHeight = 0;
+    this.calculatedMaxWidth = 0;
+    _TabSetNode.attributeDefinitions.fromJson(json, this.attributes);
+    model.addNode(this);
   }
   getName() {
     return this.getAttr("name");
@@ -1858,9 +1872,7 @@ var TabSetNode = class _TabSetNode extends Node {
 
 // src/model/RowNode.ts
 var RowNode = class _RowNode extends Node {
-  static {
-    this.TYPE = "row";
-  }
+  static TYPE = "row";
   /** @internal */
   static fromJson(json, model, layoutWindow) {
     const newLayoutNode = new _RowNode(model, layoutWindow.windowId, json);
@@ -1877,10 +1889,18 @@ var RowNode = class _RowNode extends Node {
     }
     return newLayoutNode;
   }
-  static {
-    /** @internal */
-    this.attributeDefinitions = _RowNode.createAttributeDefinitions();
-  }
+  /** @internal */
+  static attributeDefinitions = _RowNode.createAttributeDefinitions();
+  /** @internal */
+  windowId;
+  /** @internal */
+  minHeight;
+  /** @internal */
+  minWidth;
+  /** @internal */
+  maxHeight;
+  /** @internal */
+  maxWidth;
   /** @internal */
   constructor(model, windowId, json) {
     super(model);
@@ -2311,6 +2331,14 @@ var RowNode = class _RowNode extends Node {
 
 // src/model/LayoutWindow.ts
 var LayoutWindow = class _LayoutWindow {
+  _windowId;
+  _layout;
+  _rect;
+  _window;
+  _root;
+  _maximizedTabSet;
+  _activeTabSet;
+  _toScreenRectFunction;
   constructor(windowId, rect) {
     this._windowId = windowId;
     this._rect = rect;
@@ -2392,13 +2420,25 @@ var LayoutWindow = class _LayoutWindow {
 var DefaultMin = 0;
 var DefaultMax = 99999;
 var Model = class _Model {
-  static {
-    this.MAIN_WINDOW_ID = "__main_window_id__";
-  }
-  static {
-    /** @internal */
-    this.attributeDefinitions = _Model.createAttributeDefinitions();
-  }
+  static MAIN_WINDOW_ID = "__main_window_id__";
+  /** @internal */
+  static attributeDefinitions = _Model.createAttributeDefinitions();
+  /** @internal */
+  attributes;
+  /** @internal */
+  idMap;
+  /** @internal */
+  changeListeners;
+  /** @internal */
+  borders;
+  /** @internal */
+  onAllowDrop;
+  /** @internal */
+  onCreateTabSet;
+  /** @internal */
+  windows;
+  /** @internal */
+  rootWindow;
   /**
    * 'private' constructor. Use the static method Model.fromJson(json) to create a model
    *  @internal
@@ -2964,23 +3004,7 @@ var Model = class _Model {
 
 // src/model/BorderNode.ts
 var BorderNode = class _BorderNode extends Node {
-  /** @internal */
-  constructor(location, json, model) {
-    super(model);
-    /** @internal */
-    this.outerRect = Rect.empty();
-    /** @internal */
-    this.contentRect = Rect.empty();
-    /** @internal */
-    this.tabHeaderRect = Rect.empty();
-    this.location = location;
-    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);
@@ -2994,9 +3018,23 @@ var BorderNode = class _BorderNode extends Node {
     }
     return border;
   }
-  static {
-    /** @internal */
-    this.attributeDefinitions = _BorderNode.createAttributeDefinitions();
+  /** @internal */
+  static attributeDefinitions = _BorderNode.createAttributeDefinitions();
+  /** @internal */
+  outerRect = Rect.empty();
+  /** @internal */
+  contentRect = Rect.empty();
+  /** @internal */
+  tabHeaderRect = Rect.empty();
+  /** @internal */
+  location;
+  /** @internal */
+  constructor(location, json, model) {
+    super(model);
+    this.location = location;
+    this.attributes.id = `border_${location.getName()}`;
+    _BorderNode.attributeDefinitions.fromJson(json, this.attributes);
+    model.addNode(this);
   }
   getLocation() {
     return this.location;
@@ -4944,6 +4982,10 @@ var SizeTracker = React18.memo(
 
 // src/view/Layout.tsx
 var Layout = class extends React19.Component {
+  /** @internal */
+  selfRef;
+  /** @internal */
+  revision;
   // so LayoutInternal knows this is a parent render (used for optimization)
   /** @internal */
   constructor(props) {
@@ -5012,198 +5054,34 @@ var Layout = class extends React19.Component {
   }
 };
 var LayoutInternal = class _LayoutInternal extends React19.Component {
+  static dragState = void 0;
+  selfRef;
+  moveablesRef;
+  findBorderBarSizeRef;
+  mainRef;
+  previousModel;
+  orderedIds;
+  moveableElementMap = /* @__PURE__ */ new Map();
+  dropInfo;
+  outlineDiv;
+  currentDocument;
+  currentWindow;
+  supportsPopout;
+  popoutURL;
+  icons;
+  resizeObserver;
+  dragEnterCount = 0;
+  dragging = false;
+  windowId;
+  layoutWindow;
+  mainLayout;
+  isMainWindow;
+  isDraggingOverWindow;
+  styleObserver;
+  popoutWindowName;
   // private renderCount: any;
   constructor(props) {
     super(props);
-    this.moveableElementMap = /* @__PURE__ */ new Map();
-    this.dragEnterCount = 0;
-    this.dragging = false;
-    this.updateLayoutMetrics = () => {
-      if (this.findBorderBarSizeRef.current) {
-        const borderBarSize = this.findBorderBarSizeRef.current.getBoundingClientRect().height;
-        if (borderBarSize !== this.state.calculatedBorderBarSize) {
-          this.setState({ calculatedBorderBarSize: borderBarSize });
-        }
-      }
-    };
-    this.onModelChange = (action) => {
-      this.redrawInternal("model change");
-      if (this.props.onModelChange) {
-        this.props.onModelChange(this.props.model, action);
-      }
-    };
-    this.updateRect = () => {
-      const rect = this.getDomRect();
-      if (!rect.equals(this.state.rect) && rect.width !== 0 && rect.height !== 0) {
-        this.setState({ rect });
-        if (this.windowId !== Model.MAIN_WINDOW_ID) {
-          this.redrawInternal("rect updated");
-        }
-      }
-    };
-    this.getClassName = (defaultClassName) => {
-      if (this.props.classNameMapper === void 0) {
-        return defaultClassName;
-      } else {
-        return this.props.classNameMapper(defaultClassName);
-      }
-    };
-    this.onCloseWindow = (windowLayout) => {
-      this.doAction(Actions.closeWindow(windowLayout.windowId));
-    };
-    this.onSetWindow = (windowLayout, window2) => {
-    };
-    this.showControlInPortal = (control, element) => {
-      const portal = createPortal3(control, element);
-      this.setState({ portal });
-    };
-    this.hideControlInPortal = () => {
-      this.setState({ portal: void 0 });
-    };
-    this.getIcons = () => {
-      return this.icons;
-    };
-    this.setDragNode = (event, node) => {
-      _LayoutInternal.dragState = new DragState(this.mainLayout, "internal" /* Internal */, node, void 0, void 0);
-      event.dataTransfer.setData("text/plain", "--flexlayout--");
-      event.dataTransfer.effectAllowed = "copyMove";
-      event.dataTransfer.dropEffect = "move";
-      this.dragEnterCount = 0;
-      if (node instanceof TabSetNode) {
-        let rendered = false;
-        let content = this.i18nName("Move tab set" /* Move_Tabset */);
-        if (node.getChildren().length > 0) {
-          content = this.i18nName("Move tabs(?)" /* Move_Tabs */).replace("?", String(node.getChildren().length));
-        }
-        if (this.props.onRenderDragRect) {
-          const dragComponent = this.props.onRenderDragRect(content, node, void 0);
-          if (dragComponent) {
-            this.setDragComponent(event, dragComponent, 10, 10);
-            rendered = true;
-          }
-        }
-        if (!rendered) {
-          this.setDragComponent(event, content, 10, 10);
-        }
-      } else {
-        const element = event.target;
-        const rect = element.getBoundingClientRect();
-        const offsetX = event.clientX - rect.left;
-        const offsetY = event.clientY - rect.top;
-        const parentNode = node?.getParent();
-        const isInVerticalBorder = parentNode instanceof BorderNode && parentNode.getOrientation() === Orientation.HORZ;
-        const x = isInVerticalBorder ? 10 : offsetX;
-        const y = isInVerticalBorder ? 10 : offsetY;
-        let rendered = false;
-        if (this.props.onRenderDragRect) {
-          const content = /* @__PURE__ */ React19.createElement(TabButtonStamp, { key: node.getId(), layout: this, node });
-          const dragComponent = this.props.onRenderDragRect(content, node, void 0);
-          if (dragComponent) {
-            this.setDragComponent(event, dragComponent, x, y);
-            rendered = true;
-          }
-        }
-        if (!rendered) {
-          if (isSafari()) {
-            this.setDragComponent(event, /* @__PURE__ */ React19.createElement(TabButtonStamp, { node, layout: this }), x, y);
-          } else {
-            event.dataTransfer.setDragImage(node.getTabStamp(), x, y);
-          }
-        }
-      }
-    };
-    this.onDragEnterRaw = (event) => {
-      this.dragEnterCount++;
-      if (this.dragEnterCount === 1) {
-        this.onDragEnter(event);
-      }
-    };
-    this.onDragLeaveRaw = (event) => {
-      this.dragEnterCount--;
-      if (this.dragEnterCount === 0) {
-        this.onDragLeave(event);
-      }
-    };
-    this.onDragEnter = (event) => {
-      if (!_LayoutInternal.dragState && this.props.onExternalDrag) {
-        const externalDrag = this.props.onExternalDrag(event);
-        if (externalDrag) {
-          const tempNode = TabNode.fromJson(externalDrag.json, this.props.model, false);
-          _LayoutInternal.dragState = new DragState(this.mainLayout, "external" /* External */, tempNode, externalDrag.json, externalDrag.onDrop);
-        }
-      }
-      if (_LayoutInternal.dragState) {
-        if (this.windowId !== Model.MAIN_WINDOW_ID && _LayoutInternal.dragState.mainLayout === this.mainLayout) {
-          _LayoutInternal.dragState.mainLayout.setDraggingOverWindow(true);
-        }
-        if (_LayoutInternal.dragState.mainLayout !== this.mainLayout) {
-          return;
-        }
-        event.preventDefault();
-        this.dropInfo = 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";
-        const speed = this.props.model.getAttribute("tabDragSpeed");
-        this.outlineDiv.style.transition = `top ${speed}s, left ${speed}s, width ${speed}s, height ${speed}s`;
-        rootdiv.appendChild(this.outlineDiv);
-        this.dragging = true;
-        this.showOverlay(true);
-        if (!this.isDraggingOverWindow && this.props.model.getMaximizedTabset(this.windowId) === void 0) {
-          this.setState({ showEdges: this.props.model.isEnableEdgeDock() });
-        }
-        const clientRect = this.selfRef.current?.getBoundingClientRect();
-        const r = new Rect(event.clientX - clientRect.left, event.clientY - clientRect.top, 1, 1);
-        r.positionElement(this.outlineDiv);
-      }
-    };
-    this.onDragOver = (event) => {
-      if (this.dragging && !this.isDraggingOverWindow) {
-        event.preventDefault();
-        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 dropInfo = this.props.model.findDropTargetNode(this.windowId, _LayoutInternal.dragState.dragNode, pos.x, pos.y);
-        if (dropInfo) {
-          this.dropInfo = dropInfo;
-          if (this.outlineDiv) {
-            this.outlineDiv.className = this.getClassName(dropInfo.className);
-            dropInfo.rect.positionElement(this.outlineDiv);
-            this.outlineDiv.style.visibility = "visible";
-          }
-        }
-      }
-    };
-    this.onDragLeave = (event) => {
-      if (this.dragging) {
-        if (this.windowId !== Model.MAIN_WINDOW_ID) {
-          _LayoutInternal.dragState.mainLayout.setDraggingOverWindow(false);
-        }
-        this.clearDragLocal();
-      }
-    };
-    this.onDrop = (event) => {
-      if (this.dragging) {
-        event.preventDefault();
-        const dragState = _LayoutInternal.dragState;
-        if (this.dropInfo) {
-          if (dragState.dragJson !== void 0) {
-            const newNode = this.doAction(Actions.addNode(dragState.dragJson, this.dropInfo.node.getId(), this.dropInfo.location, this.dropInfo.index));
-            if (dragState.fnNewNodeDropped !== void 0) {
-              dragState.fnNewNodeDropped(newNode, event);
-            }
-          } else if (dragState.dragNode !== void 0) {
-            this.doAction(Actions.moveNode(dragState.dragNode.getId(), this.dropInfo.node.getId(), this.dropInfo.location, this.dropInfo.index));
-          }
-        }
-        this.mainLayout.clearDragMain();
-      }
-      this.dragEnterCount = 0;
-    };
     this.orderedIds = [];
     this.selfRef = React19.createRef();
     this.moveablesRef = React19.createRef();
@@ -5230,9 +5108,6 @@ var LayoutInternal = class _LayoutInternal extends React19.Component {
     };
     this.isMainWindow = this.windowId === Model.MAIN_WINDOW_ID;
   }
-  static {
-    this.dragState = void 0;
-  }
   componentDidMount() {
     this.updateRect();
     this.currentDocument = this.selfRef.current.ownerDocument;
@@ -5543,6 +5418,14 @@ var LayoutInternal = class _LayoutInternal extends React19.Component {
       this.setState({ showHiddenBorder: location });
     }
   }
+  updateLayoutMetrics = () => {
+    if (this.findBorderBarSizeRef.current) {
+      const borderBarSize = this.findBorderBarSizeRef.current.getBoundingClientRect().height;
+      if (borderBarSize !== this.state.calculatedBorderBarSize) {
+        this.setState({ calculatedBorderBarSize: borderBarSize });
+      }
+    }
+  };
   tidyMoveablesMap() {
     const tabs = /* @__PURE__ */ new Map();
     this.props.model.visitNodes((node, _) => {
@@ -5578,6 +5461,12 @@ var LayoutInternal = class _LayoutInternal extends React19.Component {
     });
     return reordered;
   }
+  onModelChange = (action) => {
+    this.redrawInternal("model change");
+    if (this.props.onModelChange) {
+      this.props.onModelChange(this.props.model, action);
+    }
+  };
   redraw(type) {
     this.mainLayout.setState((state, props) => {
       return { forceRevision: state.forceRevision + 1 };
@@ -5599,6 +5488,15 @@ var LayoutInternal = class _LayoutInternal extends React19.Component {
       return this.props.model.doAction(action);
     }
   }
+  updateRect = () => {
+    const rect = this.getDomRect();
+    if (!rect.equals(this.state.rect) && rect.width !== 0 && rect.height !== 0) {
+      this.setState({ rect });
+      if (this.windowId !== Model.MAIN_WINDOW_ID) {
+        this.redrawInternal("rect updated");
+      }
+    }
+  };
   getBoundingClientRect(div) {
     const layoutRect = this.getDomRect();
     if (layoutRect) {
@@ -5622,6 +5520,13 @@ var LayoutInternal = class _LayoutInternal extends React19.Component {
   getMainLayout() {
     return this.mainLayout;
   }
+  getClassName = (defaultClassName) => {
+    if (this.props.classNameMapper === void 0) {
+      return defaultClassName;
+    } else {
+      return this.props.classNameMapper(defaultClassName);
+    }
+  };
   getCurrentDocument() {
     return this.currentDocument;
   }
@@ -5662,6 +5567,11 @@ var LayoutInternal = class _LayoutInternal extends React19.Component {
   getModel() {
     return this.props.model;
   }
+  onCloseWindow = (windowLayout) => {
+    this.doAction(Actions.closeWindow(windowLayout.windowId));
+  };
+  onSetWindow = (windowLayout, window2) => {
+  };
   getScreenRect(inRect) {
     const rect = inRect.clone();
     const layoutRect = this.getDomRect();
@@ -5689,6 +5599,16 @@ var LayoutInternal = class _LayoutInternal extends React19.Component {
     }
     return void 0;
   }
+  showControlInPortal = (control, element) => {
+    const portal = createPortal3(control, element);
+    this.setState({ portal });
+  };
+  hideControlInPortal = () => {
+    this.setState({ portal: void 0 });
+  };
+  getIcons = () => {
+    return this.icons;
+  };
   maximize(tabsetNode) {
     this.doAction(Actions.maximizeToggle(tabsetNode.getId(), this.getWindowId()));
   }
@@ -5740,6 +5660,55 @@ var LayoutInternal = class _LayoutInternal extends React19.Component {
   moveTabWithDragAndDrop(event, node) {
     this.setDragNode(event, node);
   }
+  setDragNode = (event, node) => {
+    _LayoutInternal.dragState = new DragState(this.mainLayout, "internal" /* Internal */, node, void 0, void 0);
+    event.dataTransfer.setData("text/plain", "--flexlayout--");
+    event.dataTransfer.effectAllowed = "copyMove";
+    event.dataTransfer.dropEffect = "move";
+    this.dragEnterCount = 0;
+    if (node instanceof TabSetNode) {
+      let rendered = false;
+      let content = this.i18nName("Move tab set" /* Move_Tabset */);
+      if (node.getChildren().length > 0) {
+        content = this.i18nName("Move tabs(?)" /* Move_Tabs */).replace("?", String(node.getChildren().length));
+      }
+      if (this.props.onRenderDragRect) {
+        const dragComponent = this.props.onRenderDragRect(content, node, void 0);
+        if (dragComponent) {
+          this.setDragComponent(event, dragComponent, 10, 10);
+          rendered = true;
+        }
+      }
+      if (!rendered) {
+        this.setDragComponent(event, content, 10, 10);
+      }
+    } else {
+      const element = event.target;
+      const rect = element.getBoundingClientRect();
+      const offsetX = event.clientX - rect.left;
+      const offsetY = event.clientY - rect.top;
+      const parentNode = node?.getParent();
+      const isInVerticalBorder = parentNode instanceof BorderNode && parentNode.getOrientation() === Orientation.HORZ;
+      const x = isInVerticalBorder ? 10 : offsetX;
+      const y = isInVerticalBorder ? 10 : offsetY;
+      let rendered = false;
+      if (this.props.onRenderDragRect) {
+        const content = /* @__PURE__ */ React19.createElement(TabButtonStamp, { key: node.getId(), layout: this, node });
+        const dragComponent = this.props.onRenderDragRect(content, node, void 0);
+        if (dragComponent) {
+          this.setDragComponent(event, dragComponent, x, y);
+          rendered = true;
+        }
+      }
+      if (!rendered) {
+        if (isSafari()) {
+          this.setDragComponent(event, /* @__PURE__ */ React19.createElement(TabButtonStamp, { node, layout: this }), x, y);
+        } else {
+          event.dataTransfer.setDragImage(node.getTabStamp(), x, y);
+        }
+      }
+    }
+  };
   setDragComponent(event, component, x, y) {
     const dragElement = /* @__PURE__ */ React19.createElement("div", { style: { position: "unset" }, className: this.getClassName("flexlayout__layout" /* FLEXLAYOUT__LAYOUT */) + " " + this.getClassName("flexlayout__drag_rect" /* FLEXLAYOUT__DRAG_RECT */) }, component);
     const tempDiv = this.currentDocument.createElement("div");
@@ -5769,6 +5738,18 @@ var LayoutInternal = class _LayoutInternal extends React19.Component {
       this.isDraggingOverWindow = overWindow;
     }
   }
+  onDragEnterRaw = (event) => {
+    this.dragEnterCount++;
+    if (this.dragEnterCount === 1) {
+      this.onDragEnter(event);
+    }
+  };
+  onDragLeaveRaw = (event) => {
+    this.dragEnterCount--;
+    if (this.dragEnterCount === 0) {
+      this.onDragLeave(event);
+    }
+  };
   clearDragMain() {
     _LayoutInternal.dragState = void 0;
     if (this.windowId === Model.MAIN_WINDOW_ID) {
@@ -5788,6 +5769,86 @@ var LayoutInternal = class _LayoutInternal extends React19.Component {
       this.outlineDiv = void 0;
     }
   }
+  onDragEnter = (event) => {
+    if (!_LayoutInternal.dragState && this.props.onExternalDrag) {
+      const externalDrag = this.props.onExternalDrag(event);
+      if (externalDrag) {
+        const tempNode = TabNode.fromJson(externalDrag.json, this.props.model, false);
+        _LayoutInternal.dragState = new DragState(this.mainLayout, "external" /* External */, tempNode, externalDrag.json, externalDrag.onDrop);
+      }
+    }
+    if (_LayoutInternal.dragState) {
+      if (this.windowId !== Model.MAIN_WINDOW_ID && _LayoutInternal.dragState.mainLayout === this.mainLayout) {
+        _LayoutInternal.dragState.mainLayout.setDraggingOverWindow(true);
+      }
+      if (_LayoutInternal.dragState.mainLayout !== this.mainLayout) {
+        return;
+      }
+      event.preventDefault();
+      this.dropInfo = 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";
+      const speed = this.props.model.getAttribute("tabDragSpeed");
+      this.outlineDiv.style.transition = `top ${speed}s, left ${speed}s, width ${speed}s, height ${speed}s`;
+      rootdiv.appendChild(this.outlineDiv);
+      this.dragging = true;
+      this.showOverlay(true);
+      if (!this.isDraggingOverWindow && this.props.model.getMaximizedTabset(this.windowId) === void 0) {
+        this.setState({ showEdges: this.props.model.isEnableEdgeDock() });
+      }
+      const clientRect = this.selfRef.current?.getBoundingClientRect();
+      const r = new Rect(event.clientX - clientRect.left, event.clientY - clientRect.top, 1, 1);
+      r.positionElement(this.outlineDiv);
+    }
+  };
+  onDragOver = (event) => {
+    if (this.dragging && !this.isDraggingOverWindow) {
+      event.preventDefault();
+      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 dropInfo = this.props.model.findDropTargetNode(this.windowId, _LayoutInternal.dragState.dragNode, pos.x, pos.y);
+      if (dropInfo) {
+        this.dropInfo = dropInfo;
+        if (this.outlineDiv) {
+          this.outlineDiv.className = this.getClassName(dropInfo.className);
+          dropInfo.rect.positionElement(this.outlineDiv);
+          this.outlineDiv.style.visibility = "visible";
+        }
+      }
+    }
+  };
+  onDragLeave = (event) => {
+    if (this.dragging) {
+      if (this.windowId !== Model.MAIN_WINDOW_ID) {
+        _LayoutInternal.dragState.mainLayout.setDraggingOverWindow(false);
+      }
+      this.clearDragLocal();
+    }
+  };
+  onDrop = (event) => {
+    if (this.dragging) {
+      event.preventDefault();
+      const dragState = _LayoutInternal.dragState;
+      if (this.dropInfo) {
+        if (dragState.dragJson !== void 0) {
+          const newNode = this.doAction(Actions.addNode(dragState.dragJson, this.dropInfo.node.getId(), this.dropInfo.location, this.dropInfo.index));
+          if (dragState.fnNewNodeDropped !== void 0) {
+            dragState.fnNewNodeDropped(newNode, event);
+          }
+        } else if (dragState.dragNode !== void 0) {
+          this.doAction(Actions.moveNode(dragState.dragNode.getId(), this.dropInfo.node.getId(), this.dropInfo.location, this.dropInfo.index));
+        }
+      }
+      this.mainLayout.clearDragMain();
+    }
+    this.dragEnterCount = 0;
+  };
   // *************************** End Drag Drop *************************************
 };
 var FlexLayoutVersion = "0.8.1";
@@ -5805,6 +5866,11 @@ var defaultSupportsPopout = isDesktop();
 var edgeRectLength = 100;
 var edgeRectWidth = 10;
 var DragState = class {
+  mainLayout;
+  dragSource;
+  dragNode;
+  dragJson;
+  fnNewNodeDropped;
   constructor(mainLayout, dragSource, dragNode, dragJson, fnNewNodeDropped) {
     this.mainLayout = mainLayout;
     this.dragSource = dragSource;

package/package.json

@@ -2,7 +2,7 @@
     "name": "@aptre/flex-layout",
     "author": "Caplin Systems Ltd",
     "description": "A multi-tab docking layout manager",
-    "version": "0.3.0-beta.1",
+    "version": "0.3.0-beta.2",
     "license": "ISC",
     "repository": {
         "type": "git",

package/tsconfig.json

@@ -4,10 +4,10 @@
         "sourceMap": true,
         "noImplicitAny": true,
         "module": "ES2020",
-        "target": "ES6",
+        "target": "ES2022",
+        "moduleResolution": "bundler",
         "stripInternal": true,
         "alwaysStrict": true,
-        "moduleResolution": "node",
         "forceConsistentCasingInFileNames": true,
         "noImplicitReturns": true,
         "strict": true,
@@ -15,5 +15,6 @@
         "jsx": "react",
         "skipLibCheck": true
     },
-    "include": ["./src/**/*"]
+    "include": ["./src/**/*"],
+    "exclude": ["dist", "typedoc"]
 }