flexlayout-react 0.7.5 → 0.7.7

package/lib/view/Layout.js

@@ -1,31 +1,34 @@
-import * as React from "react";
-import { createPortal } from "react-dom";
-import { DockLocation } from "../DockLocation";
-import { DragDrop } from "../DragDrop";
-import { Actions } from "../model/Actions";
-import { BorderNode } from "../model/BorderNode";
-import { SplitterNode } from "../model/SplitterNode";
-import { TabNode } from "../model/TabNode";
-import { TabSetNode } from "../model/TabSetNode";
-import { Rect } from "../Rect";
-import { CLASSES } from "../Types";
-import { BorderTabSet } from "./BorderTabSet";
-import { Splitter } from "./Splitter";
-import { Tab } from "./Tab";
-import { TabSet } from "./TabSet";
-import { FloatingWindow } from "./FloatingWindow";
-import { FloatingWindowTab } from "./FloatingWindowTab";
-import { TabFloating } from "./TabFloating";
-import { Orientation } from "../Orientation";
-import { CloseIcon, MaximizeIcon, OverflowIcon, PopoutIcon, RestoreIcon } from "./Icons";
-import { TabButtonStamp } from "./TabButtonStamp";
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Layout = void 0;
+const React = require("react");
+const react_dom_1 = require("react-dom");
+const DockLocation_1 = require("../DockLocation");
+const DragDrop_1 = require("../DragDrop");
+const Actions_1 = require("../model/Actions");
+const BorderNode_1 = require("../model/BorderNode");
+const SplitterNode_1 = require("../model/SplitterNode");
+const TabNode_1 = require("../model/TabNode");
+const TabSetNode_1 = require("../model/TabSetNode");
+const Rect_1 = require("../Rect");
+const Types_1 = require("../Types");
+const BorderTabSet_1 = require("./BorderTabSet");
+const Splitter_1 = require("./Splitter");
+const Tab_1 = require("./Tab");
+const TabSet_1 = require("./TabSet");
+const FloatingWindow_1 = require("./FloatingWindow");
+const FloatingWindowTab_1 = require("./FloatingWindowTab");
+const TabFloating_1 = require("./TabFloating");
+const Orientation_1 = require("../Orientation");
+const Icons_1 = require("./Icons");
+const TabButtonStamp_1 = require("./TabButtonStamp");
 const defaultIcons = {
-    close: React.createElement(CloseIcon, null),
-    closeTabset: React.createElement(CloseIcon, null),
-    popout: React.createElement(PopoutIcon, null),
-    maximize: React.createElement(MaximizeIcon, null),
-    restore: React.createElement(RestoreIcon, null),
-    more: React.createElement(OverflowIcon, null),
+    close: React.createElement(Icons_1.CloseIcon, null),
+    closeTabset: React.createElement(Icons_1.CloseIcon, null),
+    popout: React.createElement(Icons_1.PopoutIcon, null),
+    maximize: React.createElement(Icons_1.MaximizeIcon, null),
+    restore: React.createElement(Icons_1.RestoreIcon, null),
+    more: React.createElement(Icons_1.OverflowIcon, null),
 };
 // Popout windows work in latest browsers based on webkit (Chrome, Opera, Safari, latest Edge) and Firefox. They do
 // not work on any version if IE or the original Edge browser
@@ -40,7 +43,7 @@ const defaultSupportsPopout = isDesktop && !isIEorEdge;
 /**
  * A React component that hosts a multi-tabbed layout
  */
-export class Layout extends React.Component {
+class Layout extends React.Component {
     constructor(props) {
         super(props);
         /** @internal */
@@ -54,15 +57,15 @@ export class Layout extends React.Component {
         /** @internal */
         this.edgeRectWidth = 10;
         /** @internal */
-        this.onModelChange = () => {
+        this.onModelChange = (action) => {
             this.forceUpdate();
             if (this.props.onModelChange) {
-                this.props.onModelChange(this.props.model);
+                this.props.onModelChange(this.props.model, action);
             }
         };
         /** @internal */
         this.updateRect = (domRect = this.getDomRect()) => {
-            const rect = new Rect(0, 0, domRect.width, domRect.height);
+            const rect = new Rect_1.Rect(0, 0, domRect.width, domRect.height);
             if (!rect.equals(this.state.rect) && rect.width !== 0 && rect.height !== 0) {
                 this.setState({ rect });
             }
@@ -99,7 +102,7 @@ export class Layout extends React.Component {
         };
         /** @internal */
         this.onCloseWindow = (id) => {
-            this.doAction(Actions.unFloatTab(id));
+            this.doAction(Actions_1.Actions.unFloatTab(id));
             try {
                 this.props.model.getNodeById(id)._setWindow(undefined);
             }
@@ -128,7 +131,7 @@ export class Layout extends React.Component {
             catch (e) {
                 console.error(e);
             }
-            DragDrop.instance.hideGlass();
+            DragDrop_1.DragDrop.instance.hideGlass();
             this.newTabJson = undefined;
             this.customDrop = undefined;
         };
@@ -158,26 +161,26 @@ export class Layout extends React.Component {
                 catch (e) {
                     console.error(e);
                 }
-                DragDrop.instance.hideGlass();
+                DragDrop_1.DragDrop.instance.hideGlass();
                 this.newTabJson = undefined;
                 this.customDrop = undefined;
             }
-            this.setState({ showHiddenBorder: DockLocation.CENTER });
+            this.setState({ showHiddenBorder: DockLocation_1.DockLocation.CENTER });
         };
         /** @internal */
         this.onDragDivMouseDown = (event) => {
             event.preventDefault();
-            this.dragStart(event, this.dragDivText, TabNode._fromJson(this.newTabJson, this.props.model, false), true, undefined, undefined);
+            this.dragStart(event, this.dragDivText, TabNode_1.TabNode._fromJson(this.newTabJson, this.props.model, false), true, undefined, undefined);
         };
         /** @internal */
         this.dragStart = (event, dragDivText, node, allowDrag, onClick, onDoubleClick) => {
             if (!allowDrag) {
-                DragDrop.instance.startDrag(event, undefined, undefined, undefined, undefined, onClick, onDoubleClick, this.currentDocument, this.selfRef.current);
+                DragDrop_1.DragDrop.instance.startDrag(event, undefined, undefined, undefined, undefined, onClick, onDoubleClick, this.currentDocument, this.selfRef.current);
             }
             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);
+                DragDrop_1.DragDrop.instance.startDrag(event, this.onDragStart, this.onDragMove, this.onDragEnd, this.onCancelDrag, onClick, onDoubleClick, this.currentDocument, this.selfRef.current);
             }
         };
         /** @internal */
@@ -187,8 +190,8 @@ export class Layout extends React.Component {
                 content = React.createElement("div", { style: { whiteSpace: "pre" } }, text.replace("<br>", "\n"));
             }
             else {
-                if (node && node instanceof TabNode) {
-                    content = (React.createElement(TabButtonStamp, { node: node, layout: this, iconFactory: this.props.iconFactory, titleFactory: this.props.titleFactory }));
+                if (node && node instanceof TabNode_1.TabNode) {
+                    content = (React.createElement(TabButtonStamp_1.TabButtonStamp, { node: node, layout: this, iconFactory: this.props.iconFactory, titleFactory: this.props.titleFactory }));
                 }
             }
             if (this.props.onRenderDragRect !== undefined) {
@@ -211,7 +214,7 @@ export class Layout extends React.Component {
         };
         /** @internal */
         this.showPortal = (control, element) => {
-            const portal = createPortal(control, element);
+            const portal = (0, react_dom_1.createPortal)(control, element);
             this.setState({ portal });
         };
         /** @internal */
@@ -224,12 +227,12 @@ export class Layout extends React.Component {
             this.customDrop = undefined;
             const rootdiv = this.selfRef.current;
             this.outlineDiv = this.currentDocument.createElement("div");
-            this.outlineDiv.className = this.getClassName(CLASSES.FLEXLAYOUT__OUTLINE_RECT);
+            this.outlineDiv.className = this.getClassName(Types_1.CLASSES.FLEXLAYOUT__OUTLINE_RECT);
             this.outlineDiv.style.visibility = "hidden";
             rootdiv.appendChild(this.outlineDiv);
             if (this.dragDiv == null) {
                 this.dragDiv = this.currentDocument.createElement("div");
-                this.dragDiv.className = this.getClassName(CLASSES.FLEXLAYOUT__DRAG_RECT);
+                this.dragDiv.className = this.getClassName(Types_1.CLASSES.FLEXLAYOUT__DRAG_RECT);
                 this.dragDiv.setAttribute("data-layout-path", "/drag-rectangle");
                 this.dragRectRender(this.dragDivText, this.dragNode, this.newTabJson);
                 rootdiv.appendChild(this.dragDiv);
@@ -238,7 +241,7 @@ export class Layout extends React.Component {
             if (this.props.model.getMaximizedTabset() === undefined) {
                 this.setState({ showEdges: true });
             }
-            if (this.dragNode !== undefined && this.dragNode instanceof TabNode && this.dragNode.getTabRect() !== undefined) {
+            if (this.dragNode !== undefined && this.dragNode instanceof TabNode_1.TabNode && this.dragNode.getTabRect() !== undefined) {
                 this.dragNode.getTabRect().positionElement(this.outlineDiv);
             }
             this.firstMove = true;
@@ -291,7 +294,7 @@ export class Layout extends React.Component {
             this.dragDiv = undefined;
             this.hidePortal();
             this.setState({ showEdges: false });
-            DragDrop.instance.hideGlass();
+            DragDrop_1.DragDrop.instance.hideGlass();
             if (this.dropInfo) {
                 if (this.customDrop) {
                     this.newTabJson = undefined;
@@ -308,7 +311,7 @@ export class Layout extends React.Component {
                     }
                 }
                 else if (this.newTabJson !== undefined) {
-                    const newNode = this.doAction(Actions.addNode(this.newTabJson, this.dropInfo.node.getId(), this.dropInfo.location, this.dropInfo.index));
+                    const newNode = this.doAction(Actions_1.Actions.addNode(this.newTabJson, this.dropInfo.node.getId(), this.dropInfo.location, this.dropInfo.index));
                     if (this.fnNewNodeDropped != null) {
                         this.fnNewNodeDropped(newNode, event);
                         this.fnNewNodeDropped = undefined;
@@ -316,10 +319,10 @@ export class Layout extends React.Component {
                     this.newTabJson = undefined;
                 }
                 else if (this.dragNode !== undefined) {
-                    this.doAction(Actions.moveNode(this.dragNode.getId(), this.dropInfo.node.getId(), this.dropInfo.location, this.dropInfo.index));
+                    this.doAction(Actions_1.Actions.moveNode(this.dragNode.getId(), this.dropInfo.node.getId(), this.dropInfo.location, this.dropInfo.index));
                 }
             }
-            this.setState({ showHiddenBorder: DockLocation.CENTER });
+            this.setState({ showHiddenBorder: DockLocation_1.DockLocation.CENTER });
         };
         this.props.model._setChangeListener(this.onModelChange);
         this.tabIds = [];
@@ -331,12 +334,12 @@ export class Layout extends React.Component {
         this.popoutURL = props.popoutURL ? props.popoutURL : "popout.html";
         this.icons = Object.assign(Object.assign({}, defaultIcons), props.icons);
         this.state = {
-            rect: new Rect(0, 0, 0, 0),
+            rect: new Rect_1.Rect(0, 0, 0, 0),
             calculatedHeaderBarSize: 25,
             calculatedTabBarSize: 26,
             calculatedBorderBarSize: 30,
             editingTab: undefined,
-            showHiddenBorder: DockLocation.CENTER,
+            showHiddenBorder: DockLocation_1.DockLocation.CENTER,
             showEdges: false,
         };
         this.onDragEnter = this.onDragEnter.bind(this);
@@ -445,7 +448,7 @@ export class Layout extends React.Component {
     render() {
         // first render will be used to find the size (via selfRef)
         if (!this.selfRef.current) {
-            return (React.createElement("div", { ref: this.selfRef, className: this.getClassName(CLASSES.FLEXLAYOUT__LAYOUT) }, this.metricsElements()));
+            return (React.createElement("div", { ref: this.selfRef, className: this.getClassName(Types_1.CLASSES.FLEXLAYOUT__LAYOUT) }, this.metricsElements()));
         }
         this.props.model._setPointerFine(window && window.matchMedia && window.matchMedia("(pointer: fine)").matches);
         // this.start = Date.now();
@@ -485,7 +488,7 @@ export class Layout extends React.Component {
             const length = this.edgeRectLength;
             const width = this.edgeRectWidth;
             const offset = this.edgeRectLength / 2;
-            const className = this.getClassName(CLASSES.FLEXLAYOUT__EDGE_RECT);
+            const className = this.getClassName(Types_1.CLASSES.FLEXLAYOUT__EDGE_RECT);
             const radius = 50;
             edges.push(React.createElement("div", { key: "North", style: { top: r.y, left: r.x + r.width / 2 - offset, width: length, height: width, borderBottomLeftRadius: radius, borderBottomRightRadius: radius }, className: className }));
             edges.push(React.createElement("div", { key: "West", style: { top: r.y + r.height / 2 - offset, left: r.x, width: width, height: length, borderTopRightRadius: radius, borderBottomRightRadius: radius }, className: className }));
@@ -493,7 +496,7 @@ export class Layout extends React.Component {
             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, borderTopLeftRadius: radius, borderBottomLeftRadius: radius }, className: className }));
         }
         // this.layoutTime = (Date.now() - this.start);
-        return (React.createElement("div", { ref: this.selfRef, className: this.getClassName(CLASSES.FLEXLAYOUT__LAYOUT), onDragEnter: this.props.onExternalDrag ? this.onDragEnter : undefined },
+        return (React.createElement("div", { ref: this.selfRef, className: this.getClassName(Types_1.CLASSES.FLEXLAYOUT__LAYOUT), onDragEnter: this.props.onExternalDrag ? this.onDragEnter : undefined },
             tabSetComponents,
             this.tabIds.map((t) => {
                 return tabComponents[t];
@@ -510,34 +513,34 @@ export class Layout extends React.Component {
         // used to measure the tab and border tab sizes
         const fontStyle = this.styleFont({ visibility: "hidden" });
         return (React.createElement(React.Fragment, null,
-            React.createElement("div", { key: "findHeaderBarSize", ref: this.findHeaderBarSizeRef, style: fontStyle, className: this.getClassName(CLASSES.FLEXLAYOUT__TABSET_HEADER_SIZER) }, "FindHeaderBarSize"),
-            React.createElement("div", { key: "findTabBarSize", ref: this.findTabBarSizeRef, style: fontStyle, className: this.getClassName(CLASSES.FLEXLAYOUT__TABSET_SIZER) }, "FindTabBarSize"),
-            React.createElement("div", { key: "findBorderBarSize", ref: this.findBorderBarSizeRef, style: fontStyle, className: this.getClassName(CLASSES.FLEXLAYOUT__BORDER_SIZER) }, "FindBorderBarSize")));
+            React.createElement("div", { key: "findHeaderBarSize", ref: this.findHeaderBarSizeRef, style: fontStyle, className: this.getClassName(Types_1.CLASSES.FLEXLAYOUT__TABSET_HEADER_SIZER) }, "FindHeaderBarSize"),
+            React.createElement("div", { key: "findTabBarSize", ref: this.findTabBarSizeRef, style: fontStyle, className: this.getClassName(Types_1.CLASSES.FLEXLAYOUT__TABSET_SIZER) }, "FindTabBarSize"),
+            React.createElement("div", { key: "findBorderBarSize", ref: this.findBorderBarSizeRef, style: fontStyle, className: this.getClassName(Types_1.CLASSES.FLEXLAYOUT__BORDER_SIZER) }, "FindBorderBarSize")));
     }
     /** @internal */
     renderBorder(borderSet, borderComponents, tabComponents, floatingWindows, splitterComponents) {
         for (const border of borderSet.getBorders()) {
             const borderPath = `/border/${border.getLocation().getName()}`;
             if (border.isShowing()) {
-                borderComponents.push(React.createElement(BorderTabSet, { key: `border_${border.getLocation().getName()}`, path: borderPath, border: border, layout: this, iconFactory: this.props.iconFactory, titleFactory: this.props.titleFactory, icons: this.icons }));
+                borderComponents.push(React.createElement(BorderTabSet_1.BorderTabSet, { key: `border_${border.getLocation().getName()}`, path: borderPath, border: border, layout: this, iconFactory: this.props.iconFactory, titleFactory: this.props.titleFactory, icons: this.icons }));
                 const drawChildren = border._getDrawChildren();
                 let i = 0;
                 let tabCount = 0;
                 for (const child of drawChildren) {
-                    if (child instanceof SplitterNode) {
+                    if (child instanceof SplitterNode_1.SplitterNode) {
                         let path = borderPath + "/s";
-                        splitterComponents.push(React.createElement(Splitter, { key: child.getId(), layout: this, node: child, path: path }));
+                        splitterComponents.push(React.createElement(Splitter_1.Splitter, { key: child.getId(), layout: this, node: child, path: path }));
                     }
-                    else if (child instanceof TabNode) {
+                    else if (child instanceof TabNode_1.TabNode) {
                         let path = borderPath + "/t" + tabCount++;
                         if (this.supportsPopout && child.isFloating()) {
                             const rect = this._getScreenRect(child);
-                            floatingWindows.push(React.createElement(FloatingWindow, { key: child.getId(), url: this.popoutURL, rect: rect, title: child.getName(), id: child.getId(), onSetWindow: this.onSetWindow, onCloseWindow: this.onCloseWindow },
-                                React.createElement(FloatingWindowTab, { layout: this, node: child, factory: this.props.factory })));
-                            tabComponents[child.getId()] = React.createElement(TabFloating, { key: child.getId(), layout: this, path: path, node: child, selected: i === border.getSelected() });
+                            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 },
+                                React.createElement(FloatingWindowTab_1.FloatingWindowTab, { layout: this, node: child, factory: this.props.factory })));
+                            tabComponents[child.getId()] = React.createElement(TabFloating_1.TabFloating, { key: child.getId(), layout: this, path: path, node: child, selected: i === border.getSelected() });
                         }
                         else {
-                            tabComponents[child.getId()] = React.createElement(Tab, { key: child.getId(), layout: this, path: path, node: child, selected: i === border.getSelected(), factory: this.props.factory });
+                            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 });
                         }
                     }
                     i++;
@@ -552,16 +555,16 @@ export class Layout extends React.Component {
         let tabCount = 0;
         let rowCount = 0;
         for (const child of drawChildren) {
-            if (child instanceof SplitterNode) {
+            if (child instanceof SplitterNode_1.SplitterNode) {
                 const newPath = path + "/s" + (splitterCount++);
-                splitterComponents.push(React.createElement(Splitter, { key: child.getId(), layout: this, path: newPath, node: child }));
+                splitterComponents.push(React.createElement(Splitter_1.Splitter, { key: child.getId(), layout: this, path: newPath, node: child }));
             }
-            else if (child instanceof TabSetNode) {
+            else if (child instanceof TabSetNode_1.TabSetNode) {
                 const newPath = path + "/ts" + (rowCount++);
-                tabSetComponents.push(React.createElement(TabSet, { key: child.getId(), layout: this, path: newPath, node: child, iconFactory: this.props.iconFactory, titleFactory: this.props.titleFactory, icons: this.icons }));
+                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 }));
                 this.renderChildren(newPath, child, tabSetComponents, tabComponents, floatingWindows, splitterComponents);
             }
-            else if (child instanceof TabNode) {
+            else if (child instanceof TabNode_1.TabNode) {
                 const newPath = path + "/t" + (tabCount++);
                 const selectedTab = child.getParent().getChildren()[child.getParent().getSelected()];
                 if (selectedTab === undefined) {
@@ -570,17 +573,17 @@ export class Layout extends React.Component {
                 }
                 if (this.supportsPopout && child.isFloating()) {
                     const rect = this._getScreenRect(child);
-                    floatingWindows.push(React.createElement(FloatingWindow, { key: child.getId(), url: this.popoutURL, rect: rect, title: child.getName(), id: child.getId(), onSetWindow: this.onSetWindow, onCloseWindow: this.onCloseWindow },
-                        React.createElement(FloatingWindowTab, { layout: this, node: child, factory: this.props.factory })));
-                    tabComponents[child.getId()] = React.createElement(TabFloating, { key: child.getId(), layout: this, path: newPath, node: child, selected: child === selectedTab });
+                    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 },
+                        React.createElement(FloatingWindowTab_1.FloatingWindowTab, { layout: this, node: child, factory: this.props.factory })));
+                    tabComponents[child.getId()] = React.createElement(TabFloating_1.TabFloating, { key: child.getId(), layout: this, path: newPath, node: child, selected: child === selectedTab });
                 }
                 else {
-                    tabComponents[child.getId()] = React.createElement(Tab, { key: child.getId(), layout: this, path: newPath, node: child, selected: child === selectedTab, factory: this.props.factory });
+                    tabComponents[child.getId()] = React.createElement(Tab_1.Tab, { key: child.getId(), layout: this, path: newPath, node: child, selected: child === selectedTab, factory: this.props.factory });
                 }
             }
             else {
                 // is row
-                const newPath = path + ((child.getOrientation() === Orientation.HORZ) ? "/r" : "/c") + (rowCount++);
+                const newPath = path + ((child.getOrientation() === Orientation_1.Orientation.HORZ) ? "/r" : "/c") + (rowCount++);
                 this.renderChildren(newPath, child, tabSetComponents, tabComponents, floatingWindows, splitterComponents);
             }
         }
@@ -603,7 +606,7 @@ export class Layout extends React.Component {
     addTabToTabSet(tabsetId, json) {
         const tabsetNode = this.props.model.getNodeById(tabsetId);
         if (tabsetNode !== undefined) {
-            this.doAction(Actions.addNode(json, tabsetId, DockLocation.CENTER, -1));
+            this.doAction(Actions_1.Actions.addNode(json, tabsetId, DockLocation_1.DockLocation.CENTER, -1));
         }
     }
     /**
@@ -613,7 +616,7 @@ export class Layout extends React.Component {
     addTabToActiveTabSet(json) {
         const tabsetNode = this.props.model.getActiveTabset();
         if (tabsetNode !== undefined) {
-            this.doAction(Actions.addNode(json, tabsetNode.getId(), DockLocation.CENTER, -1));
+            this.doAction(Actions_1.Actions.addNode(json, tabsetNode.getId(), DockLocation_1.DockLocation.CENTER, -1));
         }
     }
     /**
@@ -625,7 +628,7 @@ export class Layout extends React.Component {
     addTabWithDragAndDrop(dragText, json, onDrop) {
         this.fnNewNodeDropped = onDrop;
         this.newTabJson = json;
-        this.dragStart(undefined, dragText, TabNode._fromJson(json, this.props.model, false), true, undefined, undefined);
+        this.dragStart(undefined, dragText, TabNode_1.TabNode._fromJson(json, this.props.model, false), true, undefined, undefined);
     }
     /**
      * Move a tab/tabset using drag and drop
@@ -646,10 +649,10 @@ export class Layout extends React.Component {
     addTabWithDragAndDropIndirect(dragText, json, onDrop) {
         this.fnNewNodeDropped = onDrop;
         this.newTabJson = json;
-        DragDrop.instance.addGlass(this.onCancelAdd);
+        DragDrop_1.DragDrop.instance.addGlass(this.onCancelAdd);
         this.dragDivText = dragText;
         this.dragDiv = this.currentDocument.createElement("div");
-        this.dragDiv.className = this.getClassName(CLASSES.FLEXLAYOUT__DRAG_RECT);
+        this.dragDiv.className = this.getClassName(Types_1.CLASSES.FLEXLAYOUT__DRAG_RECT);
         this.dragDiv.addEventListener("mousedown", this.onDragDivMouseDown);
         this.dragDiv.addEventListener("touchstart", this.onDragDivMouseDown, { passive: false });
         this.dragRectRender(this.dragDivText, undefined, this.newTabJson, () => {
@@ -657,7 +660,7 @@ export class Layout extends React.Component {
                 // now it's been rendered into the dom it can be centered
                 this.dragDiv.style.visibility = "visible";
                 const domRect = this.dragDiv.getBoundingClientRect();
-                const r = new Rect(0, 0, domRect === null || domRect === void 0 ? void 0 : domRect.width, domRect === null || domRect === void 0 ? void 0 : domRect.height);
+                const 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);
                 r.centerInRect(this.state.rect);
                 this.dragDiv.setAttribute("data-layout-path", "/drag-rectangle");
                 this.dragDiv.style.left = r.x + "px";
@@ -673,8 +676,8 @@ export class Layout extends React.Component {
         let invalidated = (_a = this.customDrop) === null || _a === void 0 ? void 0 : _a.invalidated;
         const currentCallback = (_b = this.customDrop) === null || _b === void 0 ? void 0 : _b.callback;
         this.customDrop = undefined;
-        const dragging = this.newTabJson || (this.dragNode instanceof TabNode ? this.dragNode : undefined);
-        if (dragging && (dropInfo.node instanceof TabSetNode || dropInfo.node instanceof BorderNode) && dropInfo.index === -1) {
+        const dragging = this.newTabJson || (this.dragNode instanceof TabNode_1.TabNode ? this.dragNode : undefined);
+        if (dragging && (dropInfo.node instanceof TabSetNode_1.TabSetNode || dropInfo.node instanceof BorderNode_1.BorderNode) && dropInfo.index === -1) {
             const selected = dropInfo.node.getSelectedNode();
             const tabRect = selected === null || selected === void 0 ? void 0 : selected.getRect();
             if (selected && (tabRect === null || tabRect === void 0 ? void 0 : tabRect.contains(pos.x, pos.y))) {
@@ -683,7 +686,7 @@ export class Layout extends React.Component {
                     const dest = this.onTabDrag(dragging, selected, pos.x - tabRect.x, pos.y - tabRect.y, dropInfo.location, () => this.onDragMove(event));
                     if (dest) {
                         customDrop = {
-                            rect: new Rect(dest.x + tabRect.x, dest.y + tabRect.y, dest.width, dest.height),
+                            rect: new Rect_1.Rect(dest.x + tabRect.x, dest.y + tabRect.y, dest.width, dest.height),
                             callback: dest.callback,
                             invalidated: dest.invalidated,
                             dragging: dragging,
@@ -705,14 +708,14 @@ export class Layout extends React.Component {
             }
         }
         this.dropInfo = dropInfo;
-        this.outlineDiv.className = this.getClassName(this.customDrop ? CLASSES.FLEXLAYOUT__OUTLINE_RECT : dropInfo.className);
+        this.outlineDiv.className = this.getClassName(this.customDrop ? Types_1.CLASSES.FLEXLAYOUT__OUTLINE_RECT : dropInfo.className);
         if (this.customDrop) {
             this.customDrop.rect.positionElement(this.outlineDiv);
         }
         else {
             dropInfo.rect.positionElement(this.outlineDiv);
         }
-        DragDrop.instance.setGlassCursorOverride((_c = this.customDrop) === null || _c === void 0 ? void 0 : _c.cursor);
+        DragDrop_1.DragDrop.instance.setGlassCursorOverride((_c = this.customDrop) === null || _c === void 0 ? void 0 : _c.cursor);
         this.outlineDiv.style.visibility = "visible";
         try {
             invalidated === null || invalidated === void 0 ? void 0 : invalidated();
@@ -725,14 +728,14 @@ export class Layout extends React.Component {
     onDragEnter(event) {
         // DragDrop keeps track of number of dragenters minus the number of
         // dragleaves. Only start a new drag if there isn't one already.
-        if (DragDrop.instance.isDragging())
+        if (DragDrop_1.DragDrop.instance.isDragging())
             return;
         const drag = this.props.onExternalDrag(event);
         if (drag) {
             // Mimic addTabWithDragAndDrop, but pass in DragEvent
             this.fnNewNodeDropped = drag.onDrop;
             this.newTabJson = drag.json;
-            this.dragStart(event, drag.dragText, TabNode._fromJson(drag.json, this.props.model, false), true, undefined, undefined);
+            this.dragStart(event, drag.dragText, TabNode_1.TabNode._fromJson(drag.json, this.props.model, false), true, undefined, undefined);
         }
     }
     /** @internal */
@@ -742,25 +745,25 @@ export class Layout extends React.Component {
         const margin = this.edgeRectWidth;
         const offset = this.edgeRectLength / 2;
         let overEdge = false;
-        if (this.props.model.isEnableEdgeDock() && this.state.showHiddenBorder === DockLocation.CENTER) {
+        if (this.props.model.isEnableEdgeDock() && this.state.showHiddenBorder === DockLocation_1.DockLocation.CENTER) {
             if ((y > c.y - offset && y < c.y + offset) ||
                 (x > c.x - offset && x < c.x + offset)) {
                 overEdge = true;
             }
         }
-        let location = DockLocation.CENTER;
+        let location = DockLocation_1.DockLocation.CENTER;
         if (!overEdge) {
             if (x <= r.x + margin) {
-                location = DockLocation.LEFT;
+                location = DockLocation_1.DockLocation.LEFT;
             }
             else if (x >= r.getRight() - margin) {
-                location = DockLocation.RIGHT;
+                location = DockLocation_1.DockLocation.RIGHT;
             }
             else if (y <= r.y + margin) {
-                location = DockLocation.TOP;
+                location = DockLocation_1.DockLocation.TOP;
             }
             else if (y >= r.getBottom() - margin) {
-                location = DockLocation.BOTTOM;
+                location = DockLocation_1.DockLocation.BOTTOM;
             }
         }
         if (location !== this.state.showHiddenBorder) {
@@ -769,7 +772,7 @@ export class Layout extends React.Component {
     }
     /** @internal */
     maximize(tabsetNode) {
-        this.doAction(Actions.maximizeToggle(tabsetNode.getId()));
+        this.doAction(Actions_1.Actions.maximizeToggle(tabsetNode.getId()));
     }
     /** @internal */
     customizeTab(tabNode, renderValues) {
@@ -819,6 +822,7 @@ export class Layout extends React.Component {
         }
     }
 }
+exports.Layout = Layout;
 /** @internal */
 const DragRectRenderWrapper = (props) => {
     React.useEffect(() => {