flexlayout-react 0.7.15 → 0.8.0

package/lib/view/Layout.js

@@ -1,908 +1,919 @@
-"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(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),
-    edgeArrow: React.createElement(Icons_1.EdgeIcon, 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
-// Assume any recent desktop browser not IE or original Edge will work
-/** @internal */
-// @ts-ignore
-const isIEorEdge = typeof window !== "undefined" && (window.document.documentMode || /Edge\//.test(window.navigator.userAgent));
-/** @internal */
-const isDesktop = typeof window !== "undefined" && window.matchMedia && window.matchMedia("(hover: hover) and (pointer: fine)").matches;
-/** @internal */
-const defaultSupportsPopout = isDesktop && !isIEorEdge;
-/**
- * A React component that hosts a multi-tabbed layout
- */
-class Layout extends React.Component {
-    constructor(props) {
-        super(props);
-        /** @internal */
-        this.firstMove = false;
-        /** @internal */
-        this.dragRectRendered = true;
-        /** @internal */
-        this.dragDivText = undefined;
-        /** @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) {
-                // no dom rect available, return.
-                return;
-            }
-            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 });
-            }
-        };
-        /** @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 === undefined) {
-                return defaultClassName;
-            }
-            else {
-                return this.props.classNameMapper(defaultClassName);
-            }
-        };
-        /** @internal */
-        this.onCloseWindow = (id) => {
-            this.doAction(Actions_1.Actions.unFloatTab(id));
-            try {
-                this.props.model.getNodeById(id)._setWindow(undefined);
-            }
-            catch (e) {
-                // catch incase it was a model change
-            }
-        };
-        /** @internal */
-        this.onSetWindow = (id, window) => {
-            this.props.model.getNodeById(id)._setWindow(window);
-        };
-        /** @internal */
-        this.onCancelAdd = () => {
-            var _a, _b;
-            const rootdiv = this.selfRef.current;
-            if (rootdiv && this.dragDiv) {
-                rootdiv.removeChild(this.dragDiv);
-            }
-            this.dragDiv = undefined;
-            this.hidePortal();
-            if (this.fnNewNodeDropped != null) {
-                this.fnNewNodeDropped();
-                this.fnNewNodeDropped = undefined;
-            }
-            try {
-                (_b = (_a = this.customDrop) === null || _a === void 0 ? void 0 : _a.invalidated) === null || _b === void 0 ? void 0 : _b.call(_a);
-            }
-            catch (e) {
-                console.error(e);
-            }
-            DragDrop_1.DragDrop.instance.hideGlass();
-            this.newTabJson = undefined;
-            this.customDrop = undefined;
-        };
-        /** @internal */
-        this.onCancelDrag = (wasDragging) => {
-            var _a, _b;
-            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 = undefined;
-                this.hidePortal();
-                this.setState({ showEdges: false });
-                if (this.fnNewNodeDropped != null) {
-                    this.fnNewNodeDropped();
-                    this.fnNewNodeDropped = undefined;
-                }
-                try {
-                    (_b = (_a = this.customDrop) === null || _a === void 0 ? void 0 : _a.invalidated) === null || _b === void 0 ? void 0 : _b.call(_a);
-                }
-                catch (e) {
-                    console.error(e);
-                }
-                DragDrop_1.DragDrop.instance.hideGlass();
-                this.newTabJson = undefined;
-                this.customDrop = undefined;
-            }
-            this.setState({ showHiddenBorder: DockLocation_1.DockLocation.CENTER });
-        };
-        /** @internal */
-        this.onDragDivMouseDown = (event) => {
-            event.preventDefault();
-            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) => {
-            var _a, _b;
-            if (!allowDrag) {
-                DragDrop_1.DragDrop.instance.startDrag(event, undefined, undefined, undefined, undefined, onClick, onDoubleClick, this.currentDocument, (_a = this.selfRef.current) !== null && _a !== void 0 ? _a : undefined);
-            }
-            else {
-                this.dragNode = node;
-                this.dragDivText = dragDivText;
-                DragDrop_1.DragDrop.instance.startDrag(event, this.onDragStart, this.onDragMove, this.onDragEnd, this.onCancelDrag, onClick, onDoubleClick, this.currentDocument, (_b = this.selfRef.current) !== null && _b !== void 0 ? _b : undefined);
-            }
-        };
-        /** @internal */
-        this.dragRectRender = (text, node, json, onRendered) => {
-            let content;
-            if (text !== undefined) {
-                content = React.createElement("div", { style: { whiteSpace: "pre" } }, text.replace("<br>", "\n"));
-            }
-            else {
-                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) {
-                const customContent = this.props.onRenderDragRect(content, node, json);
-                if (customContent !== undefined) {
-                    content = customContent;
-                }
-            }
-            // hide div until the render is complete
-            this.dragRectRendered = false;
-            const dragDiv = this.dragDiv;
-            if (dragDiv) {
-                dragDiv.style.visibility = "hidden";
-                this.showPortal(React.createElement(DragRectRenderWrapper
-                // wait for it to be rendered
-                , { 
-                    // wait for it to be rendered
-                    onRendered: () => {
-                        this.dragRectRendered = true;
-                        onRendered === null || onRendered === void 0 ? void 0 : onRendered();
-                    } }, content), dragDiv);
-            }
-        };
-        /** @internal */
-        this.showPortal = (control, element) => {
-            const portal = (0, react_dom_1.createPortal)(control, element);
-            this.setState({ portal });
-        };
-        /** @internal */
-        this.hidePortal = () => {
-            this.setState({ portal: undefined });
-        };
-        /** @internal */
-        this.onDragStart = () => {
-            var _a;
-            this.dropInfo = undefined;
-            this.customDrop = undefined;
-            const rootdiv = this.selfRef.current;
-            this.outlineDiv = this.currentDocument.createElement("div");
-            this.outlineDiv.className = this.getClassName(Types_1.CLASSES.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(Types_1.CLASSES.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);
-                }
-            }
-            // add edge indicators
-            if (this.props.model.getMaximizedTabset() === undefined) {
-                this.setState({ showEdges: this.props.model.isEnableEdgeDock() });
-            }
-            if (this.dragNode && this.outlineDiv && this.dragNode instanceof TabNode_1.TabNode && this.dragNode.getTabRect() !== undefined) {
-                (_a = this.dragNode.getTabRect()) === null || _a === void 0 ? void 0 : _a.positionElement(this.outlineDiv);
-            }
-            this.firstMove = true;
-            return true;
-        };
-        /** @internal */
-        this.onDragMove = (event) => {
-            var _a, _b, _c, _d, _e, _f, _g;
-            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 = (_a = this.selfRef.current) === null || _a === void 0 ? void 0 : _a.getBoundingClientRect();
-            const pos = {
-                x: event.clientX - ((_b = clientRect === null || clientRect === void 0 ? void 0 : clientRect.left) !== null && _b !== void 0 ? _b : 0),
-                y: event.clientY - ((_c = clientRect === null || clientRect === void 0 ? void 0 : clientRect.top) !== null && _c !== void 0 ? _c : 0),
-            };
-            this.checkForBorderToShow(pos.x, pos.y);
-            // keep it between left & right
-            const dragRect = (_e = (_d = this.dragDiv) === null || _d === void 0 ? void 0 : _d.getBoundingClientRect()) !== null && _e !== void 0 ? _e : new DOMRect(0, 0, 100, 100);
-            let newLeft = pos.x - dragRect.width / 2;
-            if (newLeft + dragRect.width > ((_f = clientRect === null || clientRect === void 0 ? void 0 : clientRect.width) !== null && _f !== void 0 ? _f : 0)) {
-                newLeft = ((_g = clientRect === null || clientRect === void 0 ? void 0 : clientRect.width) !== null && _g !== void 0 ? _g : 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") {
-                    // make visible once the drag rect has been rendered
-                    this.dragDiv.style.visibility = "visible";
-                }
-            }
-            let 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 = undefined;
-            this.hidePortal();
-            this.setState({ showEdges: false });
-            DragDrop_1.DragDrop.instance.hideGlass();
-            if (this.dropInfo) {
-                if (this.customDrop) {
-                    this.newTabJson = undefined;
-                    try {
-                        const { callback, dragging, over, x, y, location } = this.customDrop;
-                        callback(dragging, over, x, y, location);
-                        if (this.fnNewNodeDropped != null) {
-                            this.fnNewNodeDropped();
-                            this.fnNewNodeDropped = undefined;
-                        }
-                    }
-                    catch (e) {
-                        console.error(e);
-                    }
-                }
-                else if (this.newTabJson !== undefined) {
-                    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;
-                    }
-                    this.newTabJson = undefined;
-                }
-                else if (this.dragNode !== undefined) {
-                    this.doAction(Actions_1.Actions.moveNode(this.dragNode.getId(), this.dropInfo.node.getId(), this.dropInfo.location, this.dropInfo.index));
-                }
-            }
-            this.setState({ showHiddenBorder: DockLocation_1.DockLocation.CENTER });
-        };
-        this.props.model._setChangeListener(this.onModelChange);
-        this.tabIds = [];
-        this.selfRef = React.createRef();
-        this.findHeaderBarSizeRef = React.createRef();
-        this.findTabBarSizeRef = React.createRef();
-        this.findBorderBarSizeRef = React.createRef();
-        this.supportsPopout = props.supportsPopout !== undefined ? props.supportsPopout : defaultSupportsPopout;
-        this.popoutURL = props.popoutURL ? props.popoutURL : "popout.html";
-        this.icons = Object.assign(Object.assign({}, defaultIcons), props.icons);
-        this.state = {
-            rect: new Rect_1.Rect(0, 0, 0, 0),
-            calculatedHeaderBarSize: 25,
-            calculatedTabBarSize: 26,
-            calculatedBorderBarSize: 30,
-            editingTab: undefined,
-            showHiddenBorder: DockLocation_1.DockLocation.CENTER,
-            showEdges: false,
-        };
-        this.onDragEnter = this.onDragEnter.bind(this);
-    }
-    /** @internal */
-    styleFont(style) {
-        if (this.props.font) {
-            if (this.selfRef.current) {
-                if (this.props.font.size) {
-                    this.selfRef.current.style.setProperty("--font-size", this.props.font.size);
-                }
-                if (this.props.font.family) {
-                    this.selfRef.current.style.setProperty("--font-family", this.props.font.family);
-                }
-            }
-            if (this.props.font.style) {
-                style.fontStyle = this.props.font.style;
-            }
-            if (this.props.font.weight) {
-                style.fontWeight = this.props.font.weight;
-            }
-        }
-        return style;
-    }
-    /** @internal */
-    doAction(action) {
-        if (this.props.onAction !== undefined) {
-            const outcome = this.props.onAction(action);
-            if (outcome !== undefined) {
-                return this.props.model.doAction(outcome);
-            }
-            return undefined;
-        }
-        else {
-            return this.props.model.doAction(action);
-        }
-    }
-    /** @internal */
-    componentDidMount() {
-        this.updateRect();
-        this.updateLayoutMetrics();
-        // need to re-render if size changes
-        this.currentDocument = this.selfRef.current.ownerDocument;
-        this.currentWindow = this.currentDocument.defaultView;
-        this.resizeObserver = new ResizeObserver(entries => {
-            this.updateRect(entries[0].contentRect);
-        });
-        const selfRefCurr = this.selfRef.current;
-        if (selfRefCurr) {
-            this.resizeObserver.observe(selfRefCurr);
-        }
-    }
-    /** @internal */
-    componentDidUpdate() {
-        this.updateLayoutMetrics();
-        if (this.props.model !== this.previousModel) {
-            if (this.previousModel !== undefined) {
-                this.previousModel._setChangeListener(undefined); // stop listening to old model
-            }
-            this.props.model._setChangeListener(this.onModelChange);
-            this.previousModel = this.props.model;
-        }
-        // console.log("Layout time: " + this.layoutTime + "ms Render time: " + (Date.now() - this.start) + "ms");
-    }
-    /** @internal */
-    getCurrentDocument() {
-        return this.currentDocument;
-    }
-    /** @internal */
-    getDomRect() {
-        var _a;
-        return (_a = this.selfRef.current) === null || _a === void 0 ? void 0 : _a.getBoundingClientRect();
-    }
-    /** @internal */
-    getRootDiv() {
-        return this.selfRef.current;
-    }
-    /** @internal */
-    isSupportsPopout() {
-        return this.supportsPopout;
-    }
-    /** @internal */
-    isRealtimeResize() {
-        var _a;
-        return (_a = this.props.realtimeResize) !== null && _a !== void 0 ? _a : false;
-    }
-    /** @internal */
-    onTabDrag(...args) {
-        var _a, _b;
-        return (_b = (_a = this.props).onTabDrag) === null || _b === void 0 ? void 0 : _b.call(_a, ...args);
-    }
-    /** @internal */
-    getPopoutURL() {
-        return this.popoutURL;
-    }
-    /** @internal */
-    componentWillUnmount() {
-        var _a;
-        const selfRefCurr = this.selfRef.current;
-        if (selfRefCurr) {
-            (_a = this.resizeObserver) === null || _a === void 0 ? void 0 : _a.unobserve(selfRefCurr);
-        }
-    }
-    /** @internal */
-    setEditingTab(tabNode) {
-        this.setState({ editingTab: tabNode });
-    }
-    /** @internal */
-    getEditingTab() {
-        return this.state.editingTab;
-    }
-    /** @internal */
-    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(Types_1.CLASSES.FLEXLAYOUT__LAYOUT) }, this.metricsElements()));
-        }
-        this.props.model._setPointerFine(window && window.matchMedia && window.matchMedia("(pointer: fine)").matches);
-        // this.start = Date.now();
-        const borderComponents = [];
-        const tabSetComponents = [];
-        const floatingWindows = [];
-        const tabComponents = {};
-        const splitterComponents = [];
-        const metrics = {
-            headerBarSize: this.state.calculatedHeaderBarSize,
-            tabBarSize: this.state.calculatedTabBarSize,
-            borderBarSize: this.state.calculatedBorderBarSize
-        };
-        this.props.model._setShowHiddenBorder(this.state.showHiddenBorder);
-        this.centerRect = this.props.model._layout(this.state.rect, metrics);
-        this.renderBorder(this.props.model.getBorderSet(), borderComponents, tabComponents, floatingWindows, splitterComponents);
-        this.renderChildren("", this.props.model.getRoot(), tabSetComponents, tabComponents, floatingWindows, splitterComponents);
-        const nextTopIds = [];
-        const nextTopIdsMap = {};
-        // Keep any previous tabs in the same DOM order as before, removing any that have been deleted
-        for (const t of this.tabIds) {
-            if (tabComponents[t]) {
-                nextTopIds.push(t);
-                nextTopIdsMap[t] = t;
-            }
-        }
-        this.tabIds = nextTopIds;
-        // Add tabs that have been added to the DOM
-        for (const t of Object.keys(tabComponents)) {
-            if (!nextTopIdsMap[t]) {
-                this.tabIds.push(t);
-            }
-        }
-        const edges = [];
-        const arrowIcon = this.icons.edgeArrow;
-        if (this.state.showEdges) {
-            const r = this.centerRect;
-            const length = this.edgeRectLength;
-            const width = this.edgeRectWidth;
-            const offset = this.edgeRectLength / 2;
-            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 + " " + this.getClassName(Types_1.CLASSES.FLEXLAYOUT__EDGE_RECT_TOP) },
-                React.createElement("div", { style: { transform: "rotate(180deg)" } }, arrowIcon)));
-            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 + " " + this.getClassName(Types_1.CLASSES.FLEXLAYOUT__EDGE_RECT_LEFT) },
-                React.createElement("div", { style: { transform: "rotate(90deg)" } }, arrowIcon)));
-            edges.push(React.createElement("div", { key: "South", style: { top: r.y + r.height - width, left: r.x + r.width / 2 - offset, width: length, height: width, borderTopLeftRadius: radius, borderTopRightRadius: radius }, className: className + " " + this.getClassName(Types_1.CLASSES.FLEXLAYOUT__EDGE_RECT_BOTTOM) },
-                React.createElement("div", null, arrowIcon)));
-            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.getClassName(Types_1.CLASSES.FLEXLAYOUT__EDGE_RECT_RIGHT) },
-                React.createElement("div", { style: { transform: "rotate(-90deg)" } }, arrowIcon)));
-        }
-        // this.layoutTime = (Date.now() - this.start);
-        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];
-            }),
-            borderComponents,
-            splitterComponents,
-            edges,
-            floatingWindows,
-            this.metricsElements(),
-            this.state.portal));
-    }
-    /** @internal */
-    metricsElements() {
-        // 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(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_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_1.SplitterNode) {
-                        let path = borderPath + "/s";
-                        splitterComponents.push(React.createElement(Splitter_1.Splitter, { key: child.getId(), layout: this, node: child, path: path }));
-                    }
-                    else if (child instanceof TabNode_1.TabNode) {
-                        let path = borderPath + "/t" + tabCount++;
-                        if (this.supportsPopout && child.isFloating()) {
-                            const rect = this._getScreenRect(child);
-                            const tabBorderWidth = child._getAttr("borderWidth");
-                            const tabBorderHeight = child._getAttr("borderHeight");
-                            if (rect) {
-                                if (tabBorderWidth !== -1 && border.getLocation().getOrientation() === Orientation_1.Orientation.HORZ) {
-                                    rect.width = tabBorderWidth;
-                                }
-                                else if (tabBorderHeight !== -1 && border.getLocation().getOrientation() === Orientation_1.Orientation.VERT) {
-                                    rect.height = tabBorderHeight;
-                                }
-                            }
-                            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_1.Tab, { key: child.getId(), layout: this, path: path, node: child, selected: i === border.getSelected(), factory: this.props.factory });
-                        }
-                    }
-                    i++;
-                }
-            }
-        }
-    }
-    /** @internal */
-    renderChildren(path, node, tabSetComponents, tabComponents, floatingWindows, splitterComponents) {
-        const drawChildren = node._getDrawChildren();
-        let splitterCount = 0;
-        let tabCount = 0;
-        let rowCount = 0;
-        for (const child of drawChildren) {
-            if (child instanceof SplitterNode_1.SplitterNode) {
-                const newPath = path + "/s" + (splitterCount++);
-                splitterComponents.push(React.createElement(Splitter_1.Splitter, { key: child.getId(), layout: this, path: newPath, node: child }));
-            }
-            else if (child instanceof TabSetNode_1.TabSetNode) {
-                const newPath = path + "/ts" + (rowCount++);
-                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_1.TabNode) {
-                const newPath = path + "/t" + (tabCount++);
-                const selectedTab = child.getParent().getChildren()[child.getParent().getSelected()];
-                if (selectedTab === undefined) {
-                    // this should not happen!
-                    console.warn("undefined selectedTab should not happen");
-                }
-                if (this.supportsPopout && child.isFloating()) {
-                    const rect = this._getScreenRect(child);
-                    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_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_1.Orientation.HORZ) ? "/r" : "/c") + (rowCount++);
-                this.renderChildren(newPath, child, tabSetComponents, tabComponents, floatingWindows, splitterComponents);
-            }
-        }
-    }
-    /** @internal */
-    _getScreenRect(node) {
-        var _a;
-        const rect = node.getRect().clone();
-        const bodyRect = (_a = this.selfRef.current) === null || _a === void 0 ? void 0 : _a.getBoundingClientRect();
-        if (!bodyRect) {
-            return null;
-        }
-        const navHeight = Math.min(80, this.currentWindow.outerHeight - this.currentWindow.innerHeight);
-        const navWidth = Math.min(80, this.currentWindow.outerWidth - this.currentWindow.innerWidth);
-        rect.x = rect.x + bodyRect.x + this.currentWindow.screenX + navWidth;
-        rect.y = rect.y + bodyRect.y + this.currentWindow.screenY + navHeight;
-        return rect;
-    }
-    /**
-     * Adds a new tab to the given tabset
-     * @param tabsetId the id of the tabset where the new tab will be added
-     * @param json the json for the new tab node
-     * @returns the added tab node or undefined
-     */
-    addTabToTabSet(tabsetId, json) {
-        const tabsetNode = this.props.model.getNodeById(tabsetId);
-        if (tabsetNode !== undefined) {
-            const node = this.doAction(Actions_1.Actions.addNode(json, tabsetId, DockLocation_1.DockLocation.CENTER, -1));
-            return node;
-        }
-        return undefined;
-    }
-    /**
-     * Adds a new tab to the active tabset (if there is one)
-     * @param json the json for the new tab node
-     * @returns the added tab node or undefined
-     */
-    addTabToActiveTabSet(json) {
-        const tabsetNode = this.props.model.getActiveTabset();
-        if (tabsetNode !== undefined) {
-            const node = this.doAction(Actions_1.Actions.addNode(json, tabsetNode.getId(), DockLocation_1.DockLocation.CENTER, -1));
-            return node;
-        }
-        return undefined;
-    }
-    /**
-     * Adds a new tab by dragging a labeled panel to the drop location, dragging starts immediatelly
-     * @param dragText the text to show on the drag panel
-     * @param json the json for the new tab node
-     * @param onDrop a callback to call when the drag is complete (node and event will be undefined if the drag was cancelled)
-     */
-    addTabWithDragAndDrop(dragText, json, onDrop) {
-        this.fnNewNodeDropped = onDrop;
-        this.newTabJson = json;
-        this.dragStart(undefined, dragText, TabNode_1.TabNode._fromJson(json, this.props.model, false), true, undefined, undefined);
-    }
-    /**
-     * Move a tab/tabset using drag and drop
-     * @param node the tab or tabset to drag
-     * @param dragText the text to show on the drag panel
-     */
-    moveTabWithDragAndDrop(node, dragText) {
-        this.dragStart(undefined, dragText, node, true, undefined, undefined);
-    }
-    /**
-     * Adds a new tab by dragging a labeled panel to the drop location, dragging starts when you
-     * mouse down on the panel
-     *
-     * @param dragText the text to show on the drag panel
-     * @param json the json for the new tab node
-     * @param onDrop a callback to call when the drag is complete (node and event will be undefined if the drag was cancelled)
-     */
-    addTabWithDragAndDropIndirect(dragText, json, onDrop) {
-        this.fnNewNodeDropped = onDrop;
-        this.newTabJson = json;
-        DragDrop_1.DragDrop.instance.addGlass(this.onCancelAdd);
-        this.dragDivText = dragText;
-        this.dragDiv = this.currentDocument.createElement("div");
-        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, () => {
-            if (this.dragDiv) {
-                // 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_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";
-                this.dragDiv.style.top = r.y + "px";
-            }
-        });
-        const rootdiv = this.selfRef.current;
-        rootdiv.appendChild(this.dragDiv);
-    }
-    /** @internal */
-    handleCustomTabDrag(dropInfo, pos, event) {
-        var _a, _b, _c;
-        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_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))) {
-                let customDrop = undefined;
-                try {
-                    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_1.Rect(dest.x + tabRect.x, dest.y + tabRect.y, dest.width, dest.height),
-                            callback: dest.callback,
-                            invalidated: dest.invalidated,
-                            dragging: dragging,
-                            over: selected,
-                            x: pos.x - tabRect.x,
-                            y: pos.y - tabRect.y,
-                            location: dropInfo.location,
-                            cursor: dest.cursor
-                        };
-                    }
-                }
-                catch (e) {
-                    console.error(e);
-                }
-                if ((customDrop === null || customDrop === void 0 ? void 0 : customDrop.callback) === currentCallback) {
-                    invalidated = undefined;
-                }
-                this.customDrop = customDrop;
-            }
-        }
-        this.dropInfo = dropInfo;
-        if (this.outlineDiv) {
-            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_1.DragDrop.instance.setGlassCursorOverride((_c = this.customDrop) === null || _c === void 0 ? void 0 : _c.cursor);
-        if (this.outlineDiv) {
-            this.outlineDiv.style.visibility = "visible";
-        }
-        try {
-            invalidated === null || invalidated === void 0 ? void 0 : invalidated();
-        }
-        catch (e) {
-            console.error(e);
-        }
-    }
-    /** @internal */
-    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_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_1.TabNode._fromJson(drag.json, this.props.model, false), true, undefined, undefined);
-        }
-    }
-    /** @internal */
-    checkForBorderToShow(x, y) {
-        const r = this.props.model._getOuterInnerRects().outer;
-        const c = r.getCenter();
-        const margin = this.edgeRectWidth;
-        const offset = this.edgeRectLength / 2;
-        let overEdge = false;
-        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_1.DockLocation.CENTER;
-        if (!overEdge) {
-            if (x <= r.x + margin) {
-                location = DockLocation_1.DockLocation.LEFT;
-            }
-            else if (x >= r.getRight() - margin) {
-                location = DockLocation_1.DockLocation.RIGHT;
-            }
-            else if (y <= r.y + margin) {
-                location = DockLocation_1.DockLocation.TOP;
-            }
-            else if (y >= r.getBottom() - margin) {
-                location = DockLocation_1.DockLocation.BOTTOM;
-            }
-        }
-        if (location !== this.state.showHiddenBorder) {
-            this.setState({ showHiddenBorder: location });
-        }
-    }
-    /** @internal */
-    maximize(tabsetNode) {
-        this.doAction(Actions_1.Actions.maximizeToggle(tabsetNode.getId()));
-    }
-    /** @internal */
-    customizeTab(tabNode, renderValues) {
-        if (this.props.onRenderTab) {
-            this.props.onRenderTab(tabNode, renderValues);
-        }
-    }
-    /** @internal */
-    customizeTabSet(tabSetNode, renderValues) {
-        if (this.props.onRenderTabSet) {
-            this.props.onRenderTabSet(tabSetNode, renderValues);
-        }
-    }
-    /** @internal */
-    i18nName(id, param) {
-        let message;
-        if (this.props.i18nMapper) {
-            message = this.props.i18nMapper(id, param);
-        }
-        if (message === undefined) {
-            message = id + (param === undefined ? "" : param);
-        }
-        return message;
-    }
-    /** @internal */
-    getOnRenderFloatingTabPlaceholder() {
-        return this.props.onRenderFloatingTabPlaceholder;
-    }
-    /** @internal */
-    getShowOverflowMenu() {
-        return this.props.onShowOverflowMenu;
-    }
-    /** @internal */
-    getTabSetPlaceHolderCallback() {
-        return this.props.onTabSetPlaceHolder;
-    }
-    /** @internal */
-    showContextMenu(node, event) {
-        if (this.props.onContextMenu) {
-            this.props.onContextMenu(node, event);
-        }
-    }
-    /** @internal */
-    auxMouseClick(node, event) {
-        if (this.props.onAuxMouseClick) {
-            this.props.onAuxMouseClick(node, event);
-        }
-    }
-}
-exports.Layout = Layout;
-/** @internal */
-const DragRectRenderWrapper = (props) => {
-    React.useEffect(() => {
-        var _a;
-        (_a = props.onRendered) === null || _a === void 0 ? void 0 : _a.call(props);
-    }, [props]);
-    return (React.createElement(React.Fragment, null, props.children));
-};
+import * as React from "react";
+import { createPortal } from "react-dom";
+import { createRoot } from "react-dom/client";
+import { DockLocation } from "../DockLocation";
+import { I18nLabel } from "../I18nLabel";
+import { Orientation } from "../Orientation";
+import { Rect } from "../Rect";
+import { CLASSES } from "../Types";
+import { Actions } from "../model/Actions";
+import { BorderNode } from "../model/BorderNode";
+import { Model } from "../model/Model";
+import { TabNode } from "../model/TabNode";
+import { TabSetNode } from "../model/TabSetNode";
+import { BorderTab } from "./BorderTab";
+import { BorderTabSet } from "./BorderTabSet";
+import { DragContainer } from "./DragContainer";
+import { ErrorBoundary } from "./ErrorBoundary";
+import { PopoutWindow } from "./PopoutWindow";
+import { AsterickIcon, CloseIcon, EdgeIcon, MaximizeIcon, OverflowIcon, PopoutIcon, RestoreIcon } from "./Icons";
+import { Overlay } from "./Overlay";
+import { Row } from "./Row";
+import { Tab } from "./Tab";
+import { copyInlineStyles, enablePointerOnIFrames, isDesktop, isSafari } from "./Utils";
+import { TabButtonStamp } from "./TabButtonStamp";
+import { SizeTracker } from "./SizeTracker";
+/**
+ * A React component that hosts a multi-tabbed layout
+ */
+export class Layout extends React.Component {
+    /** @internal */
+    constructor(props) {
+        super(props);
+        this.selfRef = React.createRef();
+        this.revision = 0;
+    }
+    /** re-render the layout */
+    redraw() {
+        this.selfRef.current.redraw("parent " + this.revision);
+    }
+    /**
+     * Adds a new tab to the given tabset
+     * @param tabsetId the id of the tabset where the new tab will be added
+     * @param json the json for the new tab node
+     * @returns the added tab node or undefined
+     */
+    addTabToTabSet(tabsetId, json) {
+        return this.selfRef.current.addTabToTabSet(tabsetId, json);
+    }
+    /**
+     * Adds a new tab by dragging an item to the drop location, must be called from within an HTML
+     * drag start handler. You can use the setDragComponent() method to set the drag image before calling this
+     * method.
+     * @param event the drag start event
+     * @param json the json for the new tab node
+     * @param onDrop a callback to call when the drag is complete
+     */
+    addTabWithDragAndDrop(event, json, onDrop) {
+        this.selfRef.current.addTabWithDragAndDrop(event, json, onDrop);
+    }
+    /**
+     * Move a tab/tabset using drag and drop, must be called from within an HTML
+     * drag start handler
+     * @param event the drag start event
+     * @param node the tab or tabset to drag
+     */
+    moveTabWithDragAndDrop(event, node) {
+        this.selfRef.current.moveTabWithDragAndDrop(event, node);
+    }
+    /**
+     * Adds a new tab to the active tabset (if there is one)
+     * @param json the json for the new tab node
+     * @returns the added tab node or undefined
+     */
+    addTabToActiveTabSet(json) {
+        return this.selfRef.current.addTabToActiveTabSet(json);
+    }
+    /**
+     * Sets the drag image from a react component for a drag event
+     * @param event the drag event
+     * @param component the react component to be used for the drag image
+     * @param x the x position of the drag cursor on the image
+     * @param y the x position of the drag cursor on the image
+     */
+    setDragComponent(event, component, x, y) {
+        this.selfRef.current.setDragComponent(event, component, x, y);
+    }
+    /** Get the root div element of the layout */
+    getRootDiv() {
+        return this.selfRef.current.getRootDiv();
+    }
+    /** @internal */
+    render() {
+        return (React.createElement(LayoutInternal, Object.assign({ ref: this.selfRef }, this.props, { renderRevision: this.revision++ })));
+    }
+}
+/** @internal */
+export class LayoutInternal extends React.Component {
+    // private renderCount: any;
+    constructor(props) {
+        super(props);
+        this.moveableElementMap = 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) {
+                // console.log("updateRect", rect.floor());
+                this.setState({ rect });
+                if (this.windowId !== Model.MAIN_WINDOW_ID) {
+                    this.redrawInternal("rect updated");
+                }
+            }
+        };
+        this.getClassName = (defaultClassName) => {
+            if (this.props.classNameMapper === undefined) {
+                return defaultClassName;
+            }
+            else {
+                return this.props.classNameMapper(defaultClassName);
+            }
+        };
+        this.onCloseWindow = (windowLayout) => {
+            this.doAction(Actions.closeWindow(windowLayout.windowId));
+        };
+        this.onSetWindow = (windowLayout, window) => {
+        };
+        this.showControlInPortal = (control, element) => {
+            const portal = createPortal(control, element);
+            this.setState({ portal });
+        };
+        this.hideControlInPortal = () => {
+            this.setState({ portal: undefined });
+        };
+        this.getIcons = () => {
+            return this.icons;
+        };
+        this.setDragNode = (event, node) => {
+            LayoutInternal.dragState = new DragState(this.mainLayout, DragSource.Internal, node, undefined, undefined);
+            // Note: can only set (very) limited types on android! so cannot set json
+            // Note: must set text/plain for android to allow drag, 
+            //  so just set a simple message indicating its a flexlayout drag (this is not used anywhere else)
+            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(I18nLabel.Move_Tabset);
+                if (node.getChildren().length > 0) {
+                    content = this.i18nName(I18nLabel.Move_Tabs).replace("?", String(node.getChildren().length));
+                }
+                if (this.props.onRenderDragRect) {
+                    const dragComponent = this.props.onRenderDragRect(content, node, undefined);
+                    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 === null || node === void 0 ? void 0 : 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 = React.createElement(TabButtonStamp, { key: node.getId(), layout: this, node: node });
+                    const dragComponent = this.props.onRenderDragRect(content, node, undefined);
+                    if (dragComponent) {
+                        this.setDragComponent(event, dragComponent, x, y);
+                        rendered = true;
+                    }
+                }
+                if (!rendered) {
+                    if (isSafari()) { // safari doesnt render the offscreen tabstamps
+                        this.setDragComponent(event, React.createElement(TabButtonStamp, { node: 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) => {
+            // console.log("onDragEnter", this.windowId, this.dragEnterCount);
+            var _a;
+            if (!LayoutInternal.dragState && this.props.onExternalDrag) { // not internal dragging
+                const externalDrag = this.props.onExternalDrag(event);
+                if (externalDrag) {
+                    const tempNode = TabNode.fromJson(externalDrag.json, this.props.model, false);
+                    LayoutInternal.dragState = new DragState(this.mainLayout, DragSource.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; // drag not by this layout or its popouts
+                }
+                event.preventDefault();
+                this.dropInfo = undefined;
+                const rootdiv = this.selfRef.current;
+                this.outlineDiv = this.currentDocument.createElement("div");
+                this.outlineDiv.className = this.getClassName(CLASSES.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);
+                // add edge indicators
+                if (!this.isDraggingOverWindow && this.props.model.getMaximizedTabset(this.windowId) === undefined) {
+                    this.setState({ showEdges: this.props.model.isEnableEdgeDock() });
+                }
+                const clientRect = (_a = this.selfRef.current) === null || _a === void 0 ? void 0 : _a.getBoundingClientRect();
+                const r = new Rect(event.clientX - (clientRect.left), event.clientY - (clientRect.top), 1, 1);
+                r.positionElement(this.outlineDiv);
+            }
+        };
+        this.onDragOver = (event) => {
+            var _a, _b, _c;
+            if (this.dragging && !this.isDraggingOverWindow) {
+                // console.log("onDragOver");
+                event.preventDefault();
+                const clientRect = (_a = this.selfRef.current) === null || _a === void 0 ? void 0 : _a.getBoundingClientRect();
+                const pos = {
+                    x: event.clientX - ((_b = clientRect === null || clientRect === void 0 ? void 0 : clientRect.left) !== null && _b !== void 0 ? _b : 0),
+                    y: event.clientY - ((_c = clientRect === null || clientRect === void 0 ? void 0 : clientRect.top) !== null && _c !== void 0 ? _c : 0),
+                };
+                this.checkForBorderToShow(pos.x, pos.y);
+                let 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) => {
+            // console.log("onDragLeave", this.windowId, this.dragging);
+            if (this.dragging) {
+                if (this.windowId !== Model.MAIN_WINDOW_ID) {
+                    LayoutInternal.dragState.mainLayout.setDraggingOverWindow(false);
+                }
+                this.clearDragLocal();
+            }
+        };
+        this.onDrop = (event) => {
+            // console.log("ondrop", this.windowId, this.dragging, Layout.dragState);
+            if (this.dragging) {
+                event.preventDefault();
+                const dragState = LayoutInternal.dragState;
+                if (this.dropInfo) {
+                    if (dragState.dragJson !== undefined) {
+                        const newNode = this.doAction(Actions.addNode(dragState.dragJson, this.dropInfo.node.getId(), this.dropInfo.location, this.dropInfo.index));
+                        if (dragState.fnNewNodeDropped !== undefined) {
+                            dragState.fnNewNodeDropped(newNode, event);
+                        }
+                    }
+                    else if (dragState.dragNode !== undefined) {
+                        this.doAction(Actions.moveNode(dragState.dragNode.getId(), this.dropInfo.node.getId(), this.dropInfo.location, this.dropInfo.index));
+                    }
+                }
+                this.mainLayout.clearDragMain();
+            }
+            this.dragEnterCount = 0; // must set to zero here ref sublayouts
+        };
+        this.orderedIds = [];
+        this.selfRef = React.createRef();
+        this.moveablesRef = React.createRef();
+        this.mainRef = React.createRef();
+        this.findBorderBarSizeRef = React.createRef();
+        this.supportsPopout = props.supportsPopout !== undefined ? props.supportsPopout : defaultSupportsPopout;
+        this.popoutURL = props.popoutURL ? props.popoutURL : "popout.html";
+        this.icons = Object.assign(Object.assign({}, defaultIcons), props.icons);
+        this.windowId = props.windowId ? props.windowId : Model.MAIN_WINDOW_ID;
+        this.mainLayout = this.props.mainLayout ? this.props.mainLayout : this;
+        this.isDraggingOverWindow = false;
+        this.layoutWindow = this.props.model.getwindowsMap().get(this.windowId);
+        this.layoutWindow.layout = this;
+        this.popoutWindowName = this.props.popoutWindowName || "Popout Window";
+        // this.renderCount = 0;
+        this.state = {
+            rect: Rect.empty(),
+            editingTab: undefined,
+            showEdges: false,
+            showOverlay: false,
+            calculatedBorderBarSize: 29,
+            layoutRevision: 0,
+            forceRevision: 0,
+            showHiddenBorder: DockLocation.CENTER
+        };
+        this.isMainWindow = this.windowId === Model.MAIN_WINDOW_ID;
+    }
+    componentDidMount() {
+        this.updateRect();
+        this.currentDocument = this.selfRef.current.ownerDocument;
+        this.currentWindow = this.currentDocument.defaultView;
+        this.layoutWindow.window = this.currentWindow;
+        this.layoutWindow.toScreenRectFunction = (r) => this.getScreenRect(r);
+        this.resizeObserver = new ResizeObserver(entries => {
+            requestAnimationFrame(() => {
+                this.updateRect();
+            });
+        });
+        if (this.selfRef.current) {
+            this.resizeObserver.observe(this.selfRef.current);
+        }
+        if (this.isMainWindow) {
+            this.props.model.addChangeListener(this.onModelChange);
+            this.updateLayoutMetrics();
+        }
+        else {
+            // since resizeObserver doesn't always work as expected when observing element in another document
+            this.currentWindow.addEventListener("resize", () => {
+                this.updateRect();
+            });
+            const sourceElement = this.props.mainLayout.getRootDiv();
+            const targetElement = this.selfRef.current;
+            copyInlineStyles(sourceElement, targetElement);
+            this.styleObserver = new MutationObserver(() => {
+                const changed = copyInlineStyles(sourceElement, targetElement);
+                if (changed) {
+                    this.redraw("mutation observer");
+                }
+            });
+            // Observe changes to the source element's style attribute
+            this.styleObserver.observe(sourceElement, { attributeFilter: ['style'] });
+        }
+        // allow tabs to overlay when hidden
+        document.addEventListener('visibilitychange', () => {
+            for (const [_, layoutWindow] of this.props.model.getwindowsMap()) {
+                const layout = layoutWindow.layout;
+                if (layout) {
+                    this.redraw("visibility change");
+                }
+            }
+        });
+    }
+    componentDidUpdate() {
+        this.currentDocument = this.selfRef.current.ownerDocument;
+        this.currentWindow = this.currentDocument.defaultView;
+        if (this.isMainWindow) {
+            if (this.props.model !== this.previousModel) {
+                if (this.previousModel !== undefined) {
+                    this.previousModel.removeChangeListener(this.onModelChange); // stop listening to old model
+                }
+                this.props.model.getwindowsMap().get(this.windowId).layout = this;
+                this.props.model.addChangeListener(this.onModelChange);
+                this.layoutWindow = this.props.model.getwindowsMap().get(this.windowId);
+                this.layoutWindow.layout = this;
+                this.layoutWindow.toScreenRectFunction = (r) => this.getScreenRect(r);
+                this.previousModel = this.props.model;
+                this.tidyMoveablesMap();
+            }
+            this.updateLayoutMetrics();
+        }
+    }
+    componentWillUnmount() {
+        var _a, _b;
+        if (this.selfRef.current) {
+            (_a = this.resizeObserver) === null || _a === void 0 ? void 0 : _a.unobserve(this.selfRef.current);
+        }
+        (_b = this.styleObserver) === null || _b === void 0 ? void 0 : _b.disconnect();
+    }
+    render() {
+        // console.log("render", this.windowId, this.state.revision, this.renderCount++);
+        // 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) },
+                React.createElement("div", { ref: this.moveablesRef, key: "__moveables__", className: this.getClassName(CLASSES.FLEXLAYOUT__LAYOUT_MOVEABLES) }),
+                this.renderMetricsElements()));
+        }
+        const model = this.props.model;
+        model.getRoot(this.windowId).calcMinMaxSize();
+        model.getRoot(this.windowId).setPaths("");
+        model.getBorderSet().setPaths();
+        const inner = this.renderLayout();
+        const outer = this.renderBorders(inner);
+        const tabs = this.renderTabs();
+        const reorderedTabs = this.reorderComponents(tabs, this.orderedIds);
+        let floatingWindows = null;
+        let tabMoveables = null;
+        let tabStamps = null;
+        let metricElements = null;
+        if (this.isMainWindow) {
+            floatingWindows = this.renderWindows();
+            metricElements = this.renderMetricsElements();
+            tabMoveables = this.renderTabMoveables();
+            tabStamps = React.createElement("div", { key: "__tabStamps__", className: this.getClassName(CLASSES.FLEXLAYOUT__LAYOUT_TAB_STAMPS) }, this.renderTabStamps());
+        }
+        return (React.createElement("div", { ref: this.selfRef, className: this.getClassName(CLASSES.FLEXLAYOUT__LAYOUT), onDragEnter: this.onDragEnterRaw, onDragLeave: this.onDragLeaveRaw, onDragOver: this.onDragOver, onDrop: this.onDrop },
+            React.createElement("div", { ref: this.moveablesRef, key: "__moveables__", className: this.getClassName(CLASSES.FLEXLAYOUT__LAYOUT_MOVEABLES) }),
+            metricElements,
+            React.createElement(Overlay, { key: "__overlay__", layout: this, show: this.state.showOverlay }),
+            outer,
+            reorderedTabs,
+            tabMoveables,
+            tabStamps,
+            this.state.portal,
+            floatingWindows));
+    }
+    renderBorders(inner) {
+        const classMain = this.getClassName(CLASSES.FLEXLAYOUT__LAYOUT_MAIN);
+        const borders = this.props.model.getBorderSet().getBorderMap();
+        if (this.isMainWindow && borders.size > 0) {
+            inner = (React.createElement("div", { className: classMain, ref: this.mainRef }, inner));
+            const borderSetComponents = new Map();
+            const borderSetContentComponents = new Map();
+            for (const [_, location] of DockLocation.values) {
+                const border = borders.get(location);
+                const showBorder = border && (!border.isAutoHide() ||
+                    (border.isAutoHide() && (border.getChildren().length > 0 || this.state.showHiddenBorder === location)));
+                if (showBorder) {
+                    borderSetComponents.set(location, React.createElement(BorderTabSet, { layout: this, border: border, size: this.state.calculatedBorderBarSize }));
+                    borderSetContentComponents.set(location, React.createElement(BorderTab, { layout: this, border: border, show: border.getSelected() !== -1 }));
+                }
+            }
+            const classBorderOuter = this.getClassName(CLASSES.FLEXLAYOUT__LAYOUT_BORDER_CONTAINER);
+            const classBorderInner = this.getClassName(CLASSES.FLEXLAYOUT__LAYOUT_BORDER_CONTAINER_INNER);
+            if (this.props.model.getBorderSet().getLayoutHorizontal()) {
+                const innerWithBorderTabs = (React.createElement("div", { className: classBorderInner, style: { flexDirection: "column" } },
+                    borderSetContentComponents.get(DockLocation.TOP),
+                    React.createElement("div", { className: classBorderInner, style: { flexDirection: "row" } },
+                        borderSetContentComponents.get(DockLocation.LEFT),
+                        inner,
+                        borderSetContentComponents.get(DockLocation.RIGHT)),
+                    borderSetContentComponents.get(DockLocation.BOTTOM)));
+                return (React.createElement("div", { className: classBorderOuter, style: { flexDirection: "column" } },
+                    borderSetComponents.get(DockLocation.TOP),
+                    React.createElement("div", { className: classBorderInner, style: { flexDirection: "row" } },
+                        borderSetComponents.get(DockLocation.LEFT),
+                        innerWithBorderTabs,
+                        borderSetComponents.get(DockLocation.RIGHT)),
+                    borderSetComponents.get(DockLocation.BOTTOM)));
+            }
+            else {
+                const innerWithBorderTabs = (React.createElement("div", { className: classBorderInner, style: { flexDirection: "row" } },
+                    borderSetContentComponents.get(DockLocation.LEFT),
+                    React.createElement("div", { className: classBorderInner, style: { flexDirection: "column" } },
+                        borderSetContentComponents.get(DockLocation.TOP),
+                        inner,
+                        borderSetContentComponents.get(DockLocation.BOTTOM)),
+                    borderSetContentComponents.get(DockLocation.RIGHT)));
+                return (React.createElement("div", { className: classBorderOuter, style: { flexDirection: "row" } },
+                    borderSetComponents.get(DockLocation.LEFT),
+                    React.createElement("div", { className: classBorderInner, style: { flexDirection: "column" } },
+                        borderSetComponents.get(DockLocation.TOP),
+                        innerWithBorderTabs,
+                        borderSetComponents.get(DockLocation.BOTTOM)),
+                    borderSetComponents.get(DockLocation.RIGHT)));
+            }
+        }
+        else { // no borders
+            return (React.createElement("div", { className: classMain, ref: this.mainRef, style: { position: "absolute", top: 0, left: 0, bottom: 0, right: 0, display: "flex" } }, inner));
+        }
+    }
+    renderLayout() {
+        return (React.createElement(React.Fragment, null,
+            React.createElement(Row, { key: "__row__", layout: this, node: this.props.model.getRoot(this.windowId) }),
+            this.renderEdgeIndicators()));
+    }
+    renderEdgeIndicators() {
+        const edges = [];
+        const arrowIcon = this.icons.edgeArrow;
+        if (this.state.showEdges) {
+            const r = this.props.model.getRoot(this.windowId).getRect();
+            const length = edgeRectLength;
+            const width = edgeRectWidth;
+            const offset = edgeRectLength / 2;
+            const className = this.getClassName(CLASSES.FLEXLAYOUT__EDGE_RECT);
+            const radius = 50;
+            edges.push(React.createElement("div", { key: "North", style: { top: 0, left: r.width / 2 - offset, width: length, height: width, borderBottomLeftRadius: radius, borderBottomRightRadius: radius }, className: className + " " + this.getClassName(CLASSES.FLEXLAYOUT__EDGE_RECT_TOP) },
+                React.createElement("div", { style: { transform: "rotate(180deg)" } }, arrowIcon)));
+            edges.push(React.createElement("div", { key: "West", style: { top: r.height / 2 - offset, left: 0, width: width, height: length, borderTopRightRadius: radius, borderBottomRightRadius: radius }, className: className + " " + this.getClassName(CLASSES.FLEXLAYOUT__EDGE_RECT_LEFT) },
+                React.createElement("div", { style: { transform: "rotate(90deg)" } }, arrowIcon)));
+            edges.push(React.createElement("div", { key: "South", style: { top: r.height - width, left: r.width / 2 - offset, width: length, height: width, borderTopLeftRadius: radius, borderTopRightRadius: radius }, className: className + " " + this.getClassName(CLASSES.FLEXLAYOUT__EDGE_RECT_BOTTOM) },
+                React.createElement("div", null, arrowIcon)));
+            edges.push(React.createElement("div", { key: "East", style: { top: r.height / 2 - offset, left: r.width - width, width: width, height: length, borderTopLeftRadius: radius, borderBottomLeftRadius: radius }, className: className + " " + this.getClassName(CLASSES.FLEXLAYOUT__EDGE_RECT_RIGHT) },
+                React.createElement("div", { style: { transform: "rotate(-90deg)" } }, arrowIcon)));
+        }
+        return edges;
+    }
+    renderWindows() {
+        const floatingWindows = [];
+        if (this.supportsPopout) {
+            const windows = this.props.model.getwindowsMap();
+            let i = 1;
+            for (const [windowId, layoutWindow] of windows) {
+                if (windowId !== Model.MAIN_WINDOW_ID) {
+                    floatingWindows.push(React.createElement(PopoutWindow, { key: windowId, layout: this, title: this.popoutWindowName + " " + i, layoutWindow: layoutWindow, url: this.popoutURL + "?id=" + windowId, onSetWindow: this.onSetWindow, onCloseWindow: this.onCloseWindow },
+                        React.createElement(LayoutInternal, Object.assign({}, this.props, { windowId: windowId, mainLayout: this }))));
+                    i++;
+                }
+            }
+        }
+        return floatingWindows;
+    }
+    renderTabMoveables() {
+        const tabMoveables = [];
+        this.props.model.visitNodes((node) => {
+            if (node instanceof TabNode) {
+                const child = node;
+                const element = this.getMoveableElement(child.getId());
+                child.setMoveableElement(element);
+                const selected = child.isSelected();
+                const rect = child.getParent().getContentRect();
+                // only render first time if size >0
+                const renderTab = child.isRendered() ||
+                    ((selected || !child.isEnableRenderOnDemand()) && (rect.width > 0 && rect.height > 0));
+                if (renderTab) {
+                    //  console.log("rendertab", child.getName(), this.props.renderRevision);
+                    const key = child.getId() + (child.isEnableWindowReMount() ? child.getWindowId() : "");
+                    tabMoveables.push(createPortal(React.createElement(SizeTracker, { rect: rect, selected: child.isSelected(), forceRevision: this.state.forceRevision, tabsRevision: this.props.renderRevision, key: key },
+                        React.createElement(ErrorBoundary, { message: this.i18nName(I18nLabel.Error_rendering_component) }, this.props.factory(child))), element, key));
+                    child.setRendered(renderTab);
+                }
+            }
+        });
+        return tabMoveables;
+    }
+    renderTabStamps() {
+        const tabStamps = [];
+        this.props.model.visitNodes((node) => {
+            if (node instanceof TabNode) {
+                const child = node;
+                // what the tab should look like when dragged (since images need to have been loaded before drag image can be taken)
+                tabStamps.push(React.createElement(DragContainer, { key: child.getId(), layout: this, node: child }));
+            }
+        });
+        return tabStamps;
+    }
+    renderTabs() {
+        const tabs = new Map();
+        this.props.model.visitWindowNodes(this.windowId, (node) => {
+            if (node instanceof TabNode) {
+                const child = node;
+                const selected = child.isSelected();
+                const path = child.getPath();
+                const renderTab = child.isRendered() || selected || !child.isEnableRenderOnDemand();
+                if (renderTab) {
+                    // const rect = (child.getParent() as BorderNode | TabSetNode).getContentRect();
+                    // const key = child.getId();
+                    tabs.set(child.getId(), (
+                    // <SizeTracker rect={rect} forceRevision={this.state.forceRevision} key={key}>
+                    React.createElement(Tab, { key: child.getId(), layout: this, path: path, node: child, selected: selected })
+                    // </SizeTracker>
+                    ));
+                }
+            }
+        });
+        return tabs;
+    }
+    renderMetricsElements() {
+        return (React.createElement("div", { key: "findBorderBarSize", ref: this.findBorderBarSizeRef, className: this.getClassName(CLASSES.FLEXLAYOUT__BORDER_SIZER) }, "FindBorderBarSize"));
+    }
+    checkForBorderToShow(x, y) {
+        const r = this.getBoundingClientRect(this.mainRef.current);
+        const c = r.getCenter();
+        const margin = edgeRectWidth;
+        const offset = edgeRectLength / 2;
+        let overEdge = false;
+        if (this.props.model.isEnableEdgeDock() && this.state.showHiddenBorder === 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;
+        if (!overEdge) {
+            if (x <= r.x + margin) {
+                location = DockLocation.LEFT;
+            }
+            else if (x >= r.getRight() - margin) {
+                location = DockLocation.RIGHT;
+            }
+            else if (y <= r.y + margin) {
+                location = DockLocation.TOP;
+            }
+            else if (y >= r.getBottom() - margin) {
+                location = DockLocation.BOTTOM;
+            }
+        }
+        if (location !== this.state.showHiddenBorder) {
+            this.setState({ showHiddenBorder: location });
+        }
+    }
+    tidyMoveablesMap() {
+        // console.log("tidyMoveablesMap");
+        const tabs = new Map();
+        this.props.model.visitNodes((node, _) => {
+            if (node instanceof TabNode) {
+                tabs.set(node.getId(), node);
+            }
+        });
+        for (const [nodeId, element] of this.moveableElementMap) {
+            if (!tabs.has(nodeId)) {
+                // console.log("delete", nodeId);
+                element.remove(); // remove from dom
+                this.moveableElementMap.delete(nodeId); // remove map entry 
+            }
+        }
+    }
+    reorderComponents(components, ids) {
+        const nextIds = [];
+        const nextIdsSet = new Set();
+        let reordered = [];
+        // Keep any previous tabs in the same DOM order as before, removing any that have been deleted
+        for (const id of ids) {
+            if (components.get(id)) {
+                nextIds.push(id);
+                nextIdsSet.add(id);
+            }
+        }
+        ids.splice(0, ids.length, ...nextIds);
+        // Add tabs that have been added to the DOM
+        for (const [id, _] of components) {
+            if (!nextIdsSet.has(id)) {
+                ids.push(id);
+            }
+        }
+        reordered = ids.map((id) => {
+            return components.get(id);
+        });
+        return reordered;
+    }
+    redraw(type) {
+        // console.log("redraw", this.windowId, type);
+        this.mainLayout.setState((state, props) => { return { forceRevision: state.forceRevision + 1 }; });
+    }
+    redrawInternal(type) {
+        // console.log("redrawInternal", this.windowId, type);
+        this.mainLayout.setState((state, props) => { return { layoutRevision: state.layoutRevision + 1 }; });
+    }
+    doAction(action) {
+        if (this.props.onAction !== undefined) {
+            const outcome = this.props.onAction(action);
+            if (outcome !== undefined) {
+                return this.props.model.doAction(outcome);
+            }
+            return undefined;
+        }
+        else {
+            return this.props.model.doAction(action);
+        }
+    }
+    getBoundingClientRect(div) {
+        const layoutRect = this.getDomRect();
+        if (layoutRect) {
+            return Rect.getBoundingClientRect(div).relativeTo(layoutRect);
+        }
+        return Rect.empty();
+    }
+    getMoveableContainer() {
+        return this.moveablesRef.current;
+    }
+    getMoveableElement(id) {
+        let moveableElement = this.moveableElementMap.get(id);
+        if (moveableElement === undefined) {
+            moveableElement = document.createElement("div");
+            this.moveablesRef.current.appendChild(moveableElement);
+            moveableElement.className = CLASSES.FLEXLAYOUT__TAB_MOVEABLE;
+            this.moveableElementMap.set(id, moveableElement);
+        }
+        return moveableElement;
+    }
+    getMainLayout() {
+        return this.mainLayout;
+    }
+    getCurrentDocument() {
+        return this.currentDocument;
+    }
+    getDomRect() {
+        if (this.selfRef.current) {
+            return Rect.fromDomRect(this.selfRef.current.getBoundingClientRect());
+        }
+        else {
+            return Rect.empty();
+        }
+    }
+    getWindowId() {
+        return this.windowId;
+    }
+    getRootDiv() {
+        return this.selfRef.current;
+    }
+    getMainElement() {
+        return this.mainRef.current;
+    }
+    getFactory() {
+        return this.props.factory;
+    }
+    isSupportsPopout() {
+        return this.supportsPopout;
+    }
+    isRealtimeResize() {
+        var _a;
+        return (_a = this.props.realtimeResize) !== null && _a !== void 0 ? _a : false;
+    }
+    getPopoutURL() {
+        return this.popoutURL;
+    }
+    setEditingTab(tabNode) {
+        this.setState({ editingTab: tabNode });
+    }
+    getEditingTab() {
+        return this.state.editingTab;
+    }
+    getModel() {
+        return this.props.model;
+    }
+    getScreenRect(inRect) {
+        const rect = inRect.clone();
+        const layoutRect = this.getDomRect();
+        // Note: outerHeight can be less than innerHeight when window is zoomed, so cannot use
+        // const navHeight = Math.min(65, this.currentWindow!.outerHeight - this.currentWindow!.innerHeight);
+        // const navWidth = Math.min(65, this.currentWindow!.outerWidth - this.currentWindow!.innerWidth);
+        const navHeight = 60;
+        const navWidth = 2;
+        // console.log(rect.y, this.currentWindow!.screenX,layoutRect.y);
+        rect.x = this.currentWindow.screenX + this.currentWindow.scrollX + navWidth / 2 + layoutRect.x + rect.x;
+        rect.y = this.currentWindow.screenY + this.currentWindow.scrollY + (navHeight - navWidth / 2) + layoutRect.y + rect.y;
+        rect.height += navHeight;
+        rect.width += navWidth;
+        return rect;
+    }
+    addTabToTabSet(tabsetId, json) {
+        const tabsetNode = this.props.model.getNodeById(tabsetId);
+        if (tabsetNode !== undefined) {
+            const node = this.doAction(Actions.addNode(json, tabsetId, DockLocation.CENTER, -1));
+            return node;
+        }
+        return undefined;
+    }
+    addTabToActiveTabSet(json) {
+        const tabsetNode = this.props.model.getActiveTabset(this.windowId);
+        if (tabsetNode !== undefined) {
+            const node = this.doAction(Actions.addNode(json, tabsetNode.getId(), DockLocation.CENTER, -1));
+            return node;
+        }
+        return undefined;
+    }
+    maximize(tabsetNode) {
+        this.doAction(Actions.maximizeToggle(tabsetNode.getId(), this.getWindowId()));
+    }
+    customizeTab(tabNode, renderValues) {
+        if (this.props.onRenderTab) {
+            this.props.onRenderTab(tabNode, renderValues);
+        }
+    }
+    customizeTabSet(tabSetNode, renderValues) {
+        if (this.props.onRenderTabSet) {
+            this.props.onRenderTabSet(tabSetNode, renderValues);
+        }
+    }
+    i18nName(id, param) {
+        let message;
+        if (this.props.i18nMapper) {
+            message = this.props.i18nMapper(id, param);
+        }
+        if (message === undefined) {
+            message = id + (param === undefined ? "" : param);
+        }
+        return message;
+    }
+    getShowOverflowMenu() {
+        return this.props.onShowOverflowMenu;
+    }
+    getTabSetPlaceHolderCallback() {
+        return this.props.onTabSetPlaceHolder;
+    }
+    showContextMenu(node, event) {
+        if (this.props.onContextMenu) {
+            this.props.onContextMenu(node, event);
+        }
+    }
+    auxMouseClick(node, event) {
+        if (this.props.onAuxMouseClick) {
+            this.props.onAuxMouseClick(node, event);
+        }
+    }
+    showOverlay(show) {
+        this.setState({ showOverlay: show });
+        enablePointerOnIFrames(!show, this.currentDocument);
+    }
+    // *************************** Start Drag Drop *************************************
+    addTabWithDragAndDrop(event, json, onDrop) {
+        const tempNode = TabNode.fromJson(json, this.props.model, false);
+        LayoutInternal.dragState = new DragState(this.mainLayout, DragSource.Add, tempNode, json, onDrop);
+    }
+    moveTabWithDragAndDrop(event, node) {
+        this.setDragNode(event, node);
+    }
+    setDragComponent(event, component, x, y) {
+        let dragElement = (React.createElement("div", { style: { position: "unset" }, className: this.getClassName(CLASSES.FLEXLAYOUT__LAYOUT) + " " + this.getClassName(CLASSES.FLEXLAYOUT__DRAG_RECT) }, component));
+        const tempDiv = this.currentDocument.createElement('div');
+        tempDiv.setAttribute("data-layout-path", "/drag-rectangle");
+        tempDiv.style.position = "absolute";
+        tempDiv.style.left = "-10000px";
+        tempDiv.style.top = "-10000px";
+        this.currentDocument.body.appendChild(tempDiv);
+        createRoot(tempDiv).render(dragElement);
+        event.dataTransfer.setDragImage(tempDiv, x, y);
+        setTimeout(() => {
+            this.currentDocument.body.removeChild(tempDiv);
+        }, 0);
+    }
+    setDraggingOverWindow(overWindow) {
+        // console.log("setDraggingOverWindow", overWindow);
+        if (this.isDraggingOverWindow !== overWindow) {
+            if (this.outlineDiv) {
+                this.outlineDiv.style.visibility = overWindow ? "hidden" : "visible";
+            }
+            if (overWindow) {
+                this.setState({ showEdges: false });
+            }
+            else {
+                // add edge indicators
+                if (this.props.model.getMaximizedTabset(this.windowId) === undefined) {
+                    this.setState({ showEdges: this.props.model.isEnableEdgeDock() });
+                }
+            }
+            this.isDraggingOverWindow = overWindow;
+        }
+    }
+    clearDragMain() {
+        // console.log("clear drag main");
+        LayoutInternal.dragState = undefined;
+        if (this.windowId === Model.MAIN_WINDOW_ID) {
+            this.isDraggingOverWindow = false;
+        }
+        for (const [, layoutWindow] of this.props.model.getwindowsMap()) {
+            // console.log(layoutWindow);
+            layoutWindow.layout.clearDragLocal();
+        }
+    }
+    clearDragLocal() {
+        // console.log("clear drag local", this.windowId);
+        this.setState({ showEdges: false });
+        this.showOverlay(false);
+        this.dragEnterCount = 0;
+        this.dragging = false;
+        if (this.outlineDiv) {
+            this.selfRef.current.removeChild(this.outlineDiv);
+            this.outlineDiv = undefined;
+        }
+    }
+}
+LayoutInternal.dragState = undefined;
+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),
+    edgeArrow: React.createElement(EdgeIcon, null),
+    activeTabset: React.createElement(AsterickIcon, null)
+};
+var DragSource;
+(function (DragSource) {
+    DragSource["Internal"] = "internal";
+    DragSource["External"] = "external";
+    DragSource["Add"] = "add";
+})(DragSource || (DragSource = {}));
+/** @internal */
+const defaultSupportsPopout = isDesktop();
+/** @internal */
+const edgeRectLength = 100;
+/** @internal */
+const edgeRectWidth = 10;
+// global layout drag state
+class DragState {
+    constructor(mainLayout, dragSource, dragNode, dragJson, fnNewNodeDropped) {
+        this.mainLayout = mainLayout;
+        this.dragSource = dragSource;
+        this.dragNode = dragNode;
+        this.dragJson = dragJson;
+        this.fnNewNodeDropped = fnNewNodeDropped;
+    }
+}
 //# sourceMappingURL=Layout.js.map