flexlayout-react 0.7.15 → 0.8.1

package/src/model/Model.ts

@@ -2,7 +2,6 @@ import { Attribute } from "../Attribute";
 import { AttributeDefinitions } from "../AttributeDefinitions";
 import { DockLocation } from "../DockLocation";
 import { DropInfo } from "../DropInfo";
-import { Orientation } from "../Orientation";
 import { Rect } from "../Rect";
 import { Action } from "./Action";
 import { Actions } from "./Actions";
@@ -10,281 +9,73 @@ import { BorderNode } from "./BorderNode";
 import { BorderSet } from "./BorderSet";
 import { IDraggable } from "./IDraggable";
 import { IDropTarget } from "./IDropTarget";
-import { IJsonModel, ITabSetAttributes } from "./IJsonModel";
+import { IJsonModel, IJsonPopout, ITabSetAttributes } from "./IJsonModel";
 import { Node } from "./Node";
 import { RowNode } from "./RowNode";
 import { TabNode } from "./TabNode";
 import { TabSetNode } from "./TabSetNode";
-import { adjustSelectedIndexAfterDock, adjustSelectedIndexAfterFloat, randomUUID } from "./Utils";
+import { randomUUID } from "./Utils";
+import { LayoutWindow } from "./LayoutWindow";
+import { isOnScreen } from "../view/Utils";
 
 /** @internal */
-export interface ILayoutMetrics {
-    headerBarSize: number;
-    tabBarSize: number;
-    borderBarSize: number;
-}
+export const DefaultMin = 0;
+/** @internal */
+export const DefaultMax = 99999;
 
 /**
  * Class containing the Tree of Nodes used by the FlexLayout component
  */
 export class Model {
-    /**
-     * Loads the model from the given json object
-     * @param json the json model to load
-     * @returns {Model} a new Model object
-     */
-    static fromJson(json: IJsonModel) {
-        const model = new Model();
-        Model._attributeDefinitions.fromJson(json.global, model._attributes);
-
-        if (json.borders) {
-            model._borders = BorderSet._fromJson(json.borders, model);
-        }
-        model._root = RowNode._fromJson(json.layout, model);
-        model._tidy(); // initial tidy of node tree
-        return model;
-    }
-    /** @internal */
-    private static _attributeDefinitions: AttributeDefinitions = Model._createAttributeDefinitions();
+    static MAIN_WINDOW_ID = "__main_window_id__";
 
     /** @internal */
-    private static _createAttributeDefinitions(): AttributeDefinitions {
-        const attributeDefinitions = new AttributeDefinitions();
-
-        attributeDefinitions.add("legacyOverflowMenu", false).setType(Attribute.BOOLEAN);
-        attributeDefinitions.add("enableEdgeDock", true).setType(Attribute.BOOLEAN);
-        attributeDefinitions.add("rootOrientationVertical", false).setType(Attribute.BOOLEAN);
-        attributeDefinitions.add("marginInsets", { top: 0, right: 0, bottom: 0, left: 0 })
-            .setType("IInsets");
-        attributeDefinitions.add("enableUseVisibility", false).setType(Attribute.BOOLEAN);
-        attributeDefinitions.add("enableRotateBorderIcons", true).setType(Attribute.BOOLEAN);
-
-        // splitter
-        attributeDefinitions.add("splitterSize", -1).setType(Attribute.NUMBER);
-        attributeDefinitions.add("splitterExtra", 0).setType(Attribute.NUMBER);
-
-        // tab
-        attributeDefinitions.add("tabEnableClose", true).setType(Attribute.BOOLEAN);
-        attributeDefinitions.add("tabCloseType", 1).setType("ICloseType");
-        attributeDefinitions.add("tabEnableFloat", false).setType(Attribute.BOOLEAN);
-        attributeDefinitions.add("tabEnableDrag", true).setType(Attribute.BOOLEAN);
-        attributeDefinitions.add("tabEnableRename", true).setType(Attribute.BOOLEAN);
-        attributeDefinitions.add("tabContentClassName", undefined).setType(Attribute.STRING);
-        attributeDefinitions.add("tabClassName", undefined).setType(Attribute.STRING);
-        attributeDefinitions.add("tabIcon", undefined).setType(Attribute.STRING);
-        attributeDefinitions.add("tabEnableRenderOnDemand", true).setType(Attribute.BOOLEAN);
-        attributeDefinitions.add("tabDragSpeed", 0.3).setType(Attribute.NUMBER);
-        attributeDefinitions.add("tabBorderWidth", -1).setType(Attribute.NUMBER);
-        attributeDefinitions.add("tabBorderHeight", -1).setType(Attribute.NUMBER);
-
-        // tabset
-        attributeDefinitions.add("tabSetEnableDeleteWhenEmpty", true).setType(Attribute.BOOLEAN);
-        attributeDefinitions.add("tabSetEnableDrop", true).setType(Attribute.BOOLEAN);
-        attributeDefinitions.add("tabSetEnableDrag", true).setType(Attribute.BOOLEAN);
-        attributeDefinitions.add("tabSetEnableDivide", true).setType(Attribute.BOOLEAN);
-        attributeDefinitions.add("tabSetEnableMaximize", true).setType(Attribute.BOOLEAN);
-        attributeDefinitions.add("tabSetEnableClose", false).setType(Attribute.BOOLEAN);
-        attributeDefinitions.add("tabSetEnableSingleTabStretch", false).setType(Attribute.BOOLEAN);
-        attributeDefinitions.add("tabSetAutoSelectTab", true).setType(Attribute.BOOLEAN);
-        attributeDefinitions.add("tabSetClassNameTabStrip", undefined).setType(Attribute.STRING);
-        attributeDefinitions.add("tabSetClassNameHeader", undefined).setType(Attribute.STRING);
-        attributeDefinitions.add("tabSetEnableTabStrip", true).setType(Attribute.BOOLEAN);
-        attributeDefinitions.add("tabSetHeaderHeight", 0).setType(Attribute.NUMBER);
-        attributeDefinitions.add("tabSetTabStripHeight", 0).setType(Attribute.NUMBER);
-        attributeDefinitions.add("tabSetMarginInsets", { top: 0, right: 0, bottom: 0, left: 0 })
-            .setType("IInsets");
-        attributeDefinitions.add("tabSetBorderInsets", { top: 0, right: 0, bottom: 0, left: 0 })
-            .setType("IInsets");
-        attributeDefinitions.add("tabSetTabLocation", "top").setType("ITabLocation");
-        attributeDefinitions.add("tabSetMinWidth", 0).setType(Attribute.NUMBER);
-        attributeDefinitions.add("tabSetMinHeight", 0).setType(Attribute.NUMBER);
-
-        // border
-        attributeDefinitions.add("borderSize", 200).setType(Attribute.NUMBER);
-        attributeDefinitions.add("borderMinSize", 0).setType(Attribute.NUMBER);
-        attributeDefinitions.add("borderBarSize", 0).setType(Attribute.NUMBER);
-        attributeDefinitions.add("borderEnableDrop", true).setType(Attribute.BOOLEAN);
-        attributeDefinitions.add("borderAutoSelectTabWhenOpen", true).setType(Attribute.BOOLEAN);
-        attributeDefinitions.add("borderAutoSelectTabWhenClosed", false).setType(Attribute.BOOLEAN);
-        attributeDefinitions.add("borderClassName", undefined).setType(Attribute.STRING);
-        attributeDefinitions.add("borderEnableAutoHide", false).setType(Attribute.BOOLEAN);
-
-        return attributeDefinitions;
-    }
+    private static attributeDefinitions: AttributeDefinitions = Model.createAttributeDefinitions();
 
     /** @internal */
-    private _attributes: Record<string, any>;
-    /** @internal */
-    private _idMap: Record<string, Node>;
-    /** @internal */
-    private _changeListener?: (action: Action) => void;
-    /** @internal */
-    private _root?: RowNode;
-    /** @internal */
-    private _borders: BorderSet;
+    private attributes: Record<string, any>;
     /** @internal */
-    private _onAllowDrop?: (dragNode: Node, dropInfo: DropInfo) => boolean;
+    private idMap: Map<string, Node>;
     /** @internal */
-    private _maximizedTabSet?: TabSetNode;
+    private changeListeners: ((action: Action) => void)[];
     /** @internal */
-    private _activeTabSet?: TabSetNode;
+    private borders: BorderSet;
     /** @internal */
-    private _borderRects: { inner: Rect; outer: Rect } = { inner: Rect.empty(), outer: Rect.empty() };
+    private onAllowDrop?: (dragNode: Node, dropInfo: DropInfo) => boolean;
     /** @internal */
-    private _pointerFine: boolean;
+    private onCreateTabSet?: (tabNode?: TabNode) => ITabSetAttributes;
     /** @internal */
-    private _onCreateTabSet?: (tabNode?: TabNode) => ITabSetAttributes;
+    private windows: Map<string, LayoutWindow>;
     /** @internal */
-    private _showHiddenBorder: DockLocation;
-
+    private rootWindow: LayoutWindow;
 
     /**
      * 'private' constructor. Use the static method Model.fromJson(json) to create a model
      *  @internal
      */
-
-    private constructor() {
-        this._attributes = {};
-        this._idMap = {};
-        this._borders = new BorderSet(this);
-        this._pointerFine = true;
-        this._showHiddenBorder = DockLocation.CENTER;
-    }
-
-    /** @internal */
-    _setChangeListener(listener: ((action: Action) => void) | undefined) {
-        this._changeListener = listener;
-    }
-
-    /**
-     * Get the currently active tabset node
-     */
-    getActiveTabset() {
-        if (this._activeTabSet && this.getNodeById(this._activeTabSet.getId())) {
-            return this._activeTabSet;
-        } else {
-            return undefined;
-        }
-    }
-
-    /** @internal */
-    _getShowHiddenBorder() {
-        return this._showHiddenBorder;
-    }
-
-    /** @internal */
-    _setShowHiddenBorder(location: DockLocation) {
-        this._showHiddenBorder = location;
-    }
-
-    /** @internal */
-    _setActiveTabset(tabsetNode: TabSetNode | undefined) {
-        this._activeTabSet = tabsetNode;
-    }
-
-    /**
-     * Get the currently maximized tabset node
-     */
-    getMaximizedTabset() {
-        return this._maximizedTabSet;
-    }
-
-    /** @internal */
-    _setMaximizedTabset(tabsetNode: (TabSetNode | undefined)) {
-        this._maximizedTabSet = tabsetNode;
-    }
-
-    /**
-     * Gets the root RowNode of the model
-     * @returns {RowNode}
-     */
-    getRoot() {
-        return this._root as RowNode;
-    }
-
-    isRootOrientationVertical() {
-        return this._attributes.rootOrientationVertical as boolean;
-    }
-
-    isUseVisibility() {
-        return this._attributes.enableUseVisibility as boolean;
-    }
-
-    isEnableRotateBorderIcons() {
-        return this._attributes.enableRotateBorderIcons as boolean;
-    }
-
-    /**
-     * Gets the
-     * @returns {BorderSet|*}
-     */
-    getBorderSet() {
-        return this._borders;
-    }
-
-    /** @internal */
-    _getOuterInnerRects() {
-        return this._borderRects;
-    }
-
-    /** @internal */
-    _getPointerFine() {
-        return this._pointerFine;
-    }
-
-    /** @internal */
-    _setPointerFine(pointerFine: boolean) {
-        this._pointerFine = pointerFine;
-    }
-
-    /**
-     * Visits all the nodes in the model and calls the given function for each
-     * @param fn a function that takes visited node and a integer level as parameters
-     */
-    visitNodes(fn: (node: Node, level: number) => void) {
-        this._borders._forEachNode(fn);
-        (this._root as RowNode)._forEachNode(fn, 0);
-    }
-
-    /**
-     * Gets a node by its id
-     * @param id the id to find
-     */
-    getNodeById(id: string): Node | undefined {
-        return this._idMap[id];
-    }
-
-    /**
-     * Finds the first/top left tab set of the given node.
-     * @param node The top node you want to begin searching from, deafults to the root node
-     * @returns The first Tab Set
-     */
-    getFirstTabSet(node = this._root as Node): Node
-    {
-        const child = node.getChildren()[0];
-        if (child instanceof TabSetNode)
-        {
-            return child;
-        }
-        else
-        {
-            return this.getFirstTabSet(child);
-        }
+    protected constructor() {
+        this.attributes = {};
+        this.idMap = new Map();
+        this.borders = new BorderSet(this);
+        this.windows = new Map<string, LayoutWindow>();
+        this.rootWindow = new LayoutWindow(Model.MAIN_WINDOW_ID, Rect.empty());
+        this.windows.set(Model.MAIN_WINDOW_ID, this.rootWindow);
+        this.changeListeners = [];
     }
 
     /**
      * Update the node tree by performing the given action,
      * Actions should be generated via static methods on the Actions class
      * @param action the action to perform
-     * @returns added Node for Actions.addNode; undefined otherwise
+     * @returns added Node for Actions.addNode, windowId for createWindow
      */
-    doAction(action: Action): Node | undefined {
+    doAction(action: Action): any {
         let returnVal = undefined;
         // console.log(action);
         switch (action.type) {
             case Actions.ADD_NODE: {
                 const newNode = new TabNode(this, action.data.json, true);
-                const toNode = this._idMap[action.data.toNode] as Node & IDraggable;
+                const toNode = this.idMap.get(action.data.toNode) as Node & IDraggable;
                 if (toNode instanceof TabSetNode || toNode instanceof BorderNode || toNode instanceof RowNode) {
                     toNode.drop(newNode, DockLocation.getByName(action.data.location), action.data.index, action.data.select);
                     returnVal = newNode;
@@ -292,24 +83,31 @@ export class Model {
                 break;
             }
             case Actions.MOVE_NODE: {
-                const fromNode = this._idMap[action.data.fromNode] as Node & IDraggable;
-                if (fromNode instanceof TabNode || fromNode instanceof TabSetNode) {
-                    const toNode = this._idMap[action.data.toNode] as Node & IDropTarget;
+                const fromNode = this.idMap.get(action.data.fromNode) as Node & IDraggable;
+
+                if (fromNode instanceof TabNode || fromNode instanceof TabSetNode || fromNode instanceof RowNode) {
+                    if (fromNode === this.getMaximizedTabset(fromNode.getWindowId())) {
+                        const fromWindow = this.windows.get(fromNode.getWindowId())!;
+                        fromWindow.maximizedTabSet = undefined;
+                    }
+                    const toNode = this.idMap.get(action.data.toNode) as Node & IDropTarget;
                     if (toNode instanceof TabSetNode || toNode instanceof BorderNode || toNode instanceof RowNode) {
                         toNode.drop(fromNode, DockLocation.getByName(action.data.location), action.data.index, action.data.select);
                     }
                 }
+                this.removeEmptyWindows();
                 break;
             }
             case Actions.DELETE_TAB: {
-                const node = this._idMap[action.data.node];
+                const node = this.idMap.get(action.data.node);
                 if (node instanceof TabNode) {
-                    node._delete();
+                    node.delete();
                 }
+                this.removeEmptyWindows();
                 break;
             }
             case Actions.DELETE_TABSET: {
-                const node = this._idMap[action.data.node];
+                const node = this.idMap.get(action.data.node);
 
                 if (node instanceof TabSetNode) {
                     // first delete all child tabs that are closeable
@@ -317,273 +115,597 @@ export class Model {
                     for (let i = 0; i < children.length; i++) {
                         const child = children[i];
                         if ((child as TabNode).isEnableClose()) {
-                            (child as TabNode)._delete();
+                            (child as TabNode).delete();
                         }
                     }
 
                     if (node.getChildren().length === 0) {
-                        node._delete();
+                        node.delete();
                     }
-                    this._tidy();
+                    this.tidy();
                 }
+                this.removeEmptyWindows();
                 break;
             }
-            case Actions.FLOAT_TAB: {
-                const node = this._idMap[action.data.node];
-                if (node instanceof TabNode) {
-                    node._setFloating(true);
-                    adjustSelectedIndexAfterFloat(node);
+            case Actions.POPOUT_TABSET: {
+                const node = this.idMap.get(action.data.node);
+                if (node instanceof TabSetNode) {
+                    const isMaximized = node.isMaximized();
+                    const oldLayoutWindow = this.windows.get(node.getWindowId())!;
+                    const windowId = randomUUID()
+                    const layoutWindow = new LayoutWindow(windowId, oldLayoutWindow.toScreenRectFunction(node.getRect()));
+                    const json = {
+                        type: "row",
+                        children: []
+                    }
+                    const row = RowNode.fromJson(json, this, layoutWindow);
+                    layoutWindow.root = row;
+                    this.windows.set(windowId, layoutWindow);
+                    row.drop(node, DockLocation.CENTER, 0);
+
+                    if (isMaximized) {
+                        this.rootWindow.maximizedTabSet = undefined;
+                    }
                 }
+                this.removeEmptyWindows();
                 break;
             }
-            case Actions.UNFLOAT_TAB: {
-                const node = this._idMap[action.data.node];
+            case Actions.POPOUT_TAB: {
+                const node = this.idMap.get(action.data.node);
                 if (node instanceof TabNode) {
-                    node._setFloating(false);
-                    adjustSelectedIndexAfterDock(node);
+                    const windowId = randomUUID()
+                    let r = Rect.empty();
+                    if (node.getParent() instanceof TabSetNode) {
+                        r = node.getParent()!.getRect();
+                    } else  {
+                        r = (node.getParent() as BorderNode).getContentRect();
+                    }
+                    const oldLayoutWindow = this.windows.get(node.getWindowId())!;
+                    const layoutWindow = new LayoutWindow(windowId, oldLayoutWindow.toScreenRectFunction(r));
+                    const tabsetId = randomUUID();
+                    const json = {
+                        type: "row",
+                        children: [
+                            { type: "tabset", id: tabsetId }
+                        ]
+                    }
+                    const row = RowNode.fromJson(json, this, layoutWindow);
+                    layoutWindow.root = row;
+                    this.windows.set(windowId, layoutWindow);
+
+                    const tabset = this.idMap.get(tabsetId) as TabSetNode & IDropTarget;
+                    tabset.drop(node, DockLocation.CENTER, 0, true);
+                }
+                this.removeEmptyWindows();
+                break;
+            }
+            case Actions.CLOSE_WINDOW: {
+                const window = this.windows.get(action.data.windowId);
+                if (window) {
+                    this.rootWindow.root?.drop(window?.root!, DockLocation.CENTER, -1);
+                    this.rootWindow.visitNodes((node, level) => {
+                        if (node instanceof RowNode) {
+                            node.setWindowId(Model.MAIN_WINDOW_ID);
+                        }
+                    })
+
+                    // this.getFirstTabSet().drop(window?.root!,DockLocation.CENTER, -1);
+
+                    this.windows.delete(action.data.windowId);
                 }
                 break;
             }
+            case Actions.CREATE_WINDOW: {
+                const windowId = randomUUID();
+                const layoutWindow = new LayoutWindow(windowId, Rect.fromJson(action.data.rect));
+                const row = RowNode.fromJson(action.data.layout, this, layoutWindow);
+                layoutWindow.root = row;
+                this.windows.set(windowId, layoutWindow);
+                returnVal = windowId;
+                break;
+            }
             case Actions.RENAME_TAB: {
-                const node = this._idMap[action.data.node];
+                const node = this.idMap.get(action.data.node);
                 if (node instanceof TabNode) {
-                    node._setName(action.data.text);
+                    node.setName(action.data.text);
                 }
                 break;
             }
             case Actions.SELECT_TAB: {
-                const tabNode = this._idMap[action.data.tabNode];
+                const tabNode = this.idMap.get(action.data.tabNode);
+                const windowId = action.data.windowId ? action.data.windowId : Model.MAIN_WINDOW_ID;
+                const window = this.windows.get(windowId)!;
                 if (tabNode instanceof TabNode) {
                     const parent = tabNode.getParent() as Node;
                     const pos = parent.getChildren().indexOf(tabNode);
 
                     if (parent instanceof BorderNode) {
                         if (parent.getSelected() === pos) {
-                            parent._setSelected(-1);
+                            parent.setSelected(-1);
                         } else {
-                            parent._setSelected(pos);
+                            parent.setSelected(pos);
                         }
                     } else if (parent instanceof TabSetNode) {
                         if (parent.getSelected() !== pos) {
-                            parent._setSelected(pos);
+                            parent.setSelected(pos);
                         }
-                        this._activeTabSet = parent;
+                        window.activeTabSet = parent;
                     }
                 }
                 break;
             }
             case Actions.SET_ACTIVE_TABSET: {
+                const windowId = action.data.windowId ? action.data.windowId : Model.MAIN_WINDOW_ID;
+                const window = this.windows.get(windowId)!;
                 if (action.data.tabsetNode === undefined) {
-                    this._activeTabSet = undefined;
+                    window.activeTabSet = undefined;
                 } else {
-                    const tabsetNode = this._idMap[action.data.tabsetNode];
+                    const tabsetNode = this.idMap.get(action.data.tabsetNode);
                     if (tabsetNode instanceof TabSetNode) {
-                        this._activeTabSet = tabsetNode;
+                        window.activeTabSet = tabsetNode;
                     }
                 }
                 break;
             }
-            case Actions.ADJUST_SPLIT: {
-                const node1 = this._idMap[action.data.node1];
-                const node2 = this._idMap[action.data.node2];
-
-                if ((node1 instanceof TabSetNode || node1 instanceof RowNode) && (node2 instanceof TabSetNode || node2 instanceof RowNode)) {
-                    this._adjustSplitSide(node1, action.data.weight1, action.data.pixelWidth1);
-                    this._adjustSplitSide(node2, action.data.weight2, action.data.pixelWidth2);
+            case Actions.ADJUST_WEIGHTS: {
+                const row = this.idMap.get(action.data.nodeId) as RowNode;
+                const c = row.getChildren();
+                for (let i = 0; i < c.length; i++) {
+                    const n = c[i] as TabSetNode | RowNode;
+                    n.setWeight(action.data.weights[i]);
                 }
                 break;
             }
             case Actions.ADJUST_BORDER_SPLIT: {
-                const node = this._idMap[action.data.node];
+                const node = this.idMap.get(action.data.node);
                 if (node instanceof BorderNode) {
-                    node._setSize(action.data.pos);
+                    node.setSize(action.data.pos);
                 }
                 break;
             }
             case Actions.MAXIMIZE_TOGGLE: {
-                const node = this._idMap[action.data.node];
+                const windowId = action.data.windowId ? action.data.windowId : Model.MAIN_WINDOW_ID;
+                const window = this.windows.get(windowId)!;
+                const node = this.idMap.get(action.data.node);
                 if (node instanceof TabSetNode) {
-                    if (node === this._maximizedTabSet) {
-                        this._maximizedTabSet = undefined;
+                    if (node === window.maximizedTabSet) {
+                        window.maximizedTabSet = undefined;
                     } else {
-                        this._maximizedTabSet = node;
-                        this._activeTabSet = node;
+                        window.maximizedTabSet = node;
+                        window.activeTabSet = node;
                     }
                 }
 
                 break;
             }
             case Actions.UPDATE_MODEL_ATTRIBUTES: {
-                this._updateAttrs(action.data.json);
+                this.updateAttrs(action.data.json);
                 break;
             }
 
             case Actions.UPDATE_NODE_ATTRIBUTES: {
-                const node = this._idMap[action.data.node];
-                node._updateAttrs(action.data.json);
+                const node = this.idMap.get(action.data.node)!;
+                node.updateAttrs(action.data.json);
                 break;
             }
             default:
                 break;
         }
 
-        this._updateIdMap();
+        this.updateIdMap();
 
-        if (this._changeListener !== undefined) {
-            this._changeListener(action);
+        for (const listener of this.changeListeners) {
+            listener(action);
         }
 
         return returnVal;
     }
 
-    /** @internal */
-    _updateIdMap() {
-        // regenerate idMap to stop it building up
-        this._idMap = {};
-        this.visitNodes((node) => (this._idMap[node.getId()] = node));
-        // console.log(JSON.stringify(Object.keys(this._idMap)));
+
+
+    /**
+     * Get the currently active tabset node
+     */
+    getActiveTabset(windowId: string = Model.MAIN_WINDOW_ID) {
+        const window = this.windows.get(windowId);
+        if (window && window.activeTabSet && this.getNodeById(window.activeTabSet.getId())) {
+            return window.activeTabSet;
+        } else {
+            return undefined;
+        }
     }
 
-    /** @internal */
-    _adjustSplitSide(node: TabSetNode | RowNode, weight: number, pixels: number) {
-        node._setWeight(weight);
-        if (node.getWidth() != null && node.getOrientation() === Orientation.VERT) {
-            node._updateAttrs({ width: pixels });
-        } else if (node.getHeight() != null && node.getOrientation() === Orientation.HORZ) {
-            node._updateAttrs({ height: pixels });
+    /**
+     * Get the currently maximized tabset node
+     */
+    getMaximizedTabset(windowId: string = Model.MAIN_WINDOW_ID) {
+        return this.windows.get(windowId)!.maximizedTabSet;
+    }
+
+    /**
+     * Gets the root RowNode of the model
+     * @returns {RowNode}
+     */
+    getRoot(windowId: string = Model.MAIN_WINDOW_ID) {
+        return this.windows.get(windowId)!.root!;
+    }
+
+    isRootOrientationVertical() {
+        return this.attributes.rootOrientationVertical as boolean;
+    }
+
+    isEnableRotateBorderIcons() {
+        return this.attributes.enableRotateBorderIcons as boolean;
+    }
+
+    /**
+     * Gets the
+     * @returns {BorderSet|*}
+     */
+    getBorderSet() {
+        return this.borders;
+    }
+
+    getwindowsMap() {
+        return this.windows;
+    }
+
+    /**
+     * Visits all the nodes in the model and calls the given function for each
+     * @param fn a function that takes visited node and a integer level as parameters
+     */
+    visitNodes(fn: (node: Node, level: number) => void) {
+        this.borders.forEachNode(fn);
+        for (const [_, w] of this.windows) {
+            w.root!.forEachNode(fn, 0);
+        }
+    }
+
+    visitWindowNodes(windowId: string, fn: (node: Node, level: number) => void) {
+        if (this.windows.has(windowId)) {
+            if (windowId === Model.MAIN_WINDOW_ID) {
+                this.borders.forEachNode(fn);
+            }
+            this.windows.get(windowId)!.visitNodes(fn);
+        }
+    }
+
+    /**
+     * Gets a node by its id
+     * @param id the id to find
+     */
+    getNodeById(id: string): Node | undefined {
+        return this.idMap.get(id);
+    }
+
+    /**
+     * Finds the first/top left tab set of the given node.
+     * @param node The top node you want to begin searching from, deafults to the root node
+     * @returns The first Tab Set
+     */
+    getFirstTabSet(node = this.windows.get(Model.MAIN_WINDOW_ID)!.root as Node): TabSetNode {
+        const child = node.getChildren()[0];
+        if (child instanceof TabSetNode) {
+            return child;
+        }
+        else {
+            return this.getFirstTabSet(child);
         }
     }
 
+    /**
+ * Loads the model from the given json object
+ * @param json the json model to load
+ * @returns {Model} a new Model object
+ */
+    static fromJson(json: IJsonModel) {
+        const model = new Model();
+        Model.attributeDefinitions.fromJson(json.global, model.attributes);
+
+        if (json.borders) {
+            model.borders = BorderSet.fromJson(json.borders, model);
+        }
+        if (json.popouts) {
+            let i= 0;
+            let top = 100;
+            let left = 100;
+            for (const windowId in json.popouts) {
+                const windowJson = json.popouts[windowId];
+                const layoutWindow = LayoutWindow.fromJson(windowJson, model, windowId);
+                model.windows.set(windowId, layoutWindow);
+                // offscreen windows will reload cascaded (since cannot reposition)
+                if (!isOnScreen(layoutWindow.rect)) {
+                    layoutWindow.rect = new Rect(top + i*50, left+ i*50, 600, 400);
+                    i++;
+                }
+            }
+        }
+
+        model.rootWindow.root = RowNode.fromJson(json.layout, model, model.getwindowsMap().get(Model.MAIN_WINDOW_ID)!);
+        model.tidy(); // initial tidy of node tree
+        return model;
+    }
+
     /**
      * Converts the model to a json object
      * @returns {IJsonModel} json object that represents this model
      */
     toJson(): IJsonModel {
         const global: any = {};
-        Model._attributeDefinitions.toJson(global, this._attributes);
+        Model.attributeDefinitions.toJson(global, this.attributes);
 
         // save state of nodes
         this.visitNodes((node) => {
-            node._fireEvent("save", undefined);
+            node.fireEvent("save", {});
         });
 
-        return { global, borders: this._borders._toJson(), layout: (this._root as RowNode).toJson() };
-    }
-
-    getSplitterSize() {
-        let splitterSize = this._attributes.splitterSize as number;
-        if (splitterSize === -1) {
-            // use defaults
-            splitterSize = this._pointerFine ? 8 : 12; // larger for mobile
+        const windows: Record<string, IJsonPopout> = {};
+        for (const [id, window] of this.windows) {
+            if (id !== Model.MAIN_WINDOW_ID) {
+                windows[id] = window.toJson();
+            }
         }
-        return splitterSize;
+
+        return {
+            global,
+            borders: this.borders.toJson(),
+            layout: this.rootWindow.root!.toJson(),
+            popouts: windows
+        };
     }
 
-    isLegacyOverflowMenu() {
-        return this._attributes.legacyOverflowMenu as boolean;
+    getSplitterSize() {
+        return this.attributes.splitterSize as number;
     }
 
     getSplitterExtra() {
-        return this._attributes.splitterExtra as number;
+        return this.attributes.splitterExtra as number;
     }
 
     isEnableEdgeDock() {
-        return this._attributes.enableEdgeDock as boolean;
+        return this.attributes.enableEdgeDock as boolean;
+    }
+
+    isSplitterEnableHandle() {
+        return this.attributes.splitterEnableHandle as boolean;
+    }
+
+    /**
+     * Sets a function to allow/deny dropping a node
+     * @param onAllowDrop function that takes the drag node and DropInfo and returns true if the drop is allowed
+     */
+    setOnAllowDrop(onAllowDrop: (dragNode: Node, dropInfo: DropInfo) => boolean) {
+        this.onAllowDrop = onAllowDrop;
+    }
+
+    /**
+     * set callback called when a new TabSet is created.
+     * The tabNode can be undefined if it's the auto created first tabset in the root row (when the last
+     * tab is deleted, the root tabset can be recreated)
+     * @param onCreateTabSet 
+     */
+    setOnCreateTabSet(onCreateTabSet: (tabNode?: TabNode) => ITabSetAttributes) {
+        this.onCreateTabSet = onCreateTabSet;
+    }
+    
+    addChangeListener(listener: ((action: Action) => void)) {
+        this.changeListeners.push(listener);
     }
 
+    removeChangeListener(listener: ((action: Action) => void)) {
+        const pos = this.changeListeners.findIndex(l => l === listener);
+        if (pos !== -1) {
+            this.changeListeners.splice(pos, 1);
+        }
+    }
+
+    toString() {
+        return JSON.stringify(this.toJson());
+    }
+
+    /***********************internal ********************************/
+
     /** @internal */
-    _addNode(node: Node) {
-        const id = node.getId();
-        if (this._idMap[id] !== undefined) {
-            throw new Error(`Error: each node must have a unique id, duplicate id:${node.getId()}`);
+    removeEmptyWindows() {
+        const emptyWindows = new Set<string>();
+        for (const [windowId] of this.windows) {
+            if (windowId !== Model.MAIN_WINDOW_ID) {
+                let count = 0;
+                this.visitWindowNodes(windowId, (node) => {
+                    if (node instanceof TabNode) {
+                        count++;
+                    }
+                });
+                if (count === 0) {
+                    emptyWindows.add(windowId);
+                }
+            }
         }
 
-        if (node.getType() !== "splitter") {
-            this._idMap[id] = node;
+        for (const windowId of emptyWindows) {
+            this.windows.delete(windowId);
+        }
+    }
+    /** @internal */
+    setActiveTabset(tabsetNode: TabSetNode | undefined, windowId: string) {
+        const window = this.windows.get(windowId);
+        if (window) {
+            if (tabsetNode) {
+                window.activeTabSet = tabsetNode;
+            } else {
+                window.activeTabSet = undefined;
+            }
         }
     }
 
     /** @internal */
-    _layout(rect: Rect, metrics: ILayoutMetrics) {
-        // let start = Date.now();
-        this._borderRects = this._borders._layoutBorder({ outer: rect, inner: rect }, metrics);
-        rect = this._borderRects.inner.removeInsets(this._getAttribute("marginInsets"));
+    setMaximizedTabset(tabsetNode: (TabSetNode | undefined), windowId: string) {
+        const window = this.windows.get(windowId);
+        if (window) {
+            if (tabsetNode) {
+                window.maximizedTabSet = tabsetNode;
+            } else {
+                window.maximizedTabSet = undefined;
+            }
+        }
+    }
 
-        this._root?.calcMinSize();
-        (this._root as RowNode)._layout(rect, metrics);
-        // console.log("layout time: " + (Date.now() - start));
-        return rect;
+    /** @internal */
+    updateIdMap() {
+        // regenerate idMap to stop it building up
+        this.idMap.clear();
+        this.visitNodes((node) => {
+            this.idMap.set(node.getId(), node)
+            // if (node instanceof RowNode) {
+            //     node.normalizeWeights();
+            // }
+        });
+        // console.log(JSON.stringify(Object.keys(this._idMap)));
     }
 
     /** @internal */
-    _findDropTargetNode(dragNode: Node & IDraggable, x: number, y: number) {
-        let node = (this._root as RowNode)._findDropTargetNode(dragNode, x, y);
-        if (node === undefined) {
-            node = this._borders._findDropTargetNode(dragNode, x, y);
+    addNode(node: Node) {
+        const id = node.getId();
+        if (this.idMap.has(id)) {
+            throw new Error(`Error: each node must have a unique id, duplicate id:${node.getId()}`);
+        }
+
+        this.idMap.set(id, node);
+    }
+
+    /** @internal */
+    findDropTargetNode(windowId: string, dragNode: Node & IDraggable, x: number, y: number) {
+        let node = (this.windows.get(windowId)!.root as RowNode).findDropTargetNode(windowId, dragNode, x, y);
+        if (node === undefined && windowId === Model.MAIN_WINDOW_ID) {
+            node = this.borders.findDropTargetNode(dragNode, x, y);
         }
         return node;
     }
 
     /** @internal */
-    _tidy() {
+    tidy() {
         // console.log("before _tidy", this.toString());
-        (this._root as RowNode)._tidy();
+        for (const [_, window] of this.windows) {
+            window.root!.tidy();
+        }
         // console.log("after _tidy", this.toString());
     }
 
     /** @internal */
-    _updateAttrs(json: any) {
-        Model._attributeDefinitions.update(json, this._attributes);
+    updateAttrs(json: any) {
+        Model.attributeDefinitions.update(json, this.attributes);
     }
 
     /** @internal */
-    _nextUniqueId() {
+    nextUniqueId() {
         return '#' + randomUUID();
     }
 
     /** @internal */
-    _getAttribute(name: string): any {
-        return this._attributes[name];
+    getAttribute(name: string): any {
+        return this.attributes[name];
     }
 
-    /**
-     * Sets a function to allow/deny dropping a node
-     * @param onAllowDrop function that takes the drag node and DropInfo and returns true if the drop is allowed
-     */
-    setOnAllowDrop(onAllowDrop: (dragNode: Node, dropInfo: DropInfo) => boolean) {
-        this._onAllowDrop = onAllowDrop;
+    /** @internal */
+    getOnAllowDrop() {
+        return this.onAllowDrop;
     }
 
     /** @internal */
-    _getOnAllowDrop() {
-        return this._onAllowDrop;
+    getOnCreateTabSet() {
+        return this.onCreateTabSet;
     }
 
-    /**
-     * set callback called when a new TabSet is created.
-     * The tabNode can be undefined if it's the auto created first tabset in the root row (when the last
-     * tab is deleted, the root tabset can be recreated)
-     * @param onCreateTabSet 
-     */
-    setOnCreateTabSet(onCreateTabSet: (tabNode?: TabNode) => ITabSetAttributes) {
-        this._onCreateTabSet = onCreateTabSet;
+    static toTypescriptInterfaces() {
+        Model.attributeDefinitions.pairAttributes("RowNode", RowNode.getAttributeDefinitions());
+        Model.attributeDefinitions.pairAttributes("TabSetNode", TabSetNode.getAttributeDefinitions());
+        Model.attributeDefinitions.pairAttributes("TabNode", TabNode.getAttributeDefinitions());
+        Model.attributeDefinitions.pairAttributes("BorderNode", BorderNode.getAttributeDefinitions());
+
+        let sb = [];
+        sb.push(Model.attributeDefinitions.toTypescriptInterface("Global", undefined));
+        sb.push(RowNode.getAttributeDefinitions().toTypescriptInterface("Row", Model.attributeDefinitions));
+        sb.push(TabSetNode.getAttributeDefinitions().toTypescriptInterface("TabSet", Model.attributeDefinitions));
+        sb.push(TabNode.getAttributeDefinitions().toTypescriptInterface("Tab", Model.attributeDefinitions));
+        sb.push(BorderNode.getAttributeDefinitions().toTypescriptInterface("Border", Model.attributeDefinitions));
+        console.log(sb.join("\n"));
     }
 
     /** @internal */
-    _getOnCreateTabSet() {
-        return this._onCreateTabSet;
-    }
+    private static createAttributeDefinitions(): AttributeDefinitions {
+        const attributeDefinitions = new AttributeDefinitions();
 
-    static toTypescriptInterfaces() {
-        console.log(Model._attributeDefinitions.toTypescriptInterface("Global", undefined));
-        console.log(RowNode.getAttributeDefinitions().toTypescriptInterface("Row", Model._attributeDefinitions));
-        console.log(TabSetNode.getAttributeDefinitions().toTypescriptInterface("TabSet", Model._attributeDefinitions));
-        console.log(TabNode.getAttributeDefinitions().toTypescriptInterface("Tab", Model._attributeDefinitions));
-        console.log(BorderNode.getAttributeDefinitions().toTypescriptInterface("Border", Model._attributeDefinitions));
-    }
+        attributeDefinitions.add("enableEdgeDock", true).setType(Attribute.BOOLEAN).setDescription(
+            `enable docking to the edges of the layout, this will show the edge indicators`
+        );
+        attributeDefinitions.add("rootOrientationVertical", false).setType(Attribute.BOOLEAN).setDescription(
+            `the top level 'row' will layout horizontally by default, set this option true to make it layout vertically`
+        );
+        attributeDefinitions.add("enableRotateBorderIcons", true).setType(Attribute.BOOLEAN).setDescription(
+            `boolean indicating if tab icons should rotate with the text in the left and right borders`
+        );
 
-    toString() {
-        return JSON.stringify(this.toJson());
+        // splitter
+        attributeDefinitions.add("splitterSize", 8).setType(Attribute.NUMBER).setDescription(
+            `width in pixels of all splitters between tabsets/borders`
+        );
+        attributeDefinitions.add("splitterExtra", 0).setType(Attribute.NUMBER).setDescription(
+            `additional width in pixels of the splitter hit test area`
+        );
+        attributeDefinitions.add("splitterEnableHandle", false).setType(Attribute.BOOLEAN).setDescription(
+            `enable a small centralized handle on all splitters`
+        );
+
+        // tab
+        attributeDefinitions.add("tabEnableClose", true).setType(Attribute.BOOLEAN);
+        attributeDefinitions.add("tabCloseType", 1).setType("ICloseType");
+        attributeDefinitions.add("tabEnablePopout", false).setType(Attribute.BOOLEAN).setAlias("tabEnableFloat");
+        attributeDefinitions.add("tabEnablePopoutIcon", true).setType(Attribute.BOOLEAN);
+        attributeDefinitions.add("tabEnablePopoutOverlay", false).setType(Attribute.BOOLEAN);
+        attributeDefinitions.add("tabEnableDrag", true).setType(Attribute.BOOLEAN);
+        attributeDefinitions.add("tabEnableRename", true).setType(Attribute.BOOLEAN);
+        attributeDefinitions.add("tabContentClassName", undefined).setType(Attribute.STRING);
+        attributeDefinitions.add("tabClassName", undefined).setType(Attribute.STRING);
+        attributeDefinitions.add("tabIcon", undefined).setType(Attribute.STRING);
+        attributeDefinitions.add("tabEnableRenderOnDemand", true).setType(Attribute.BOOLEAN);
+        attributeDefinitions.add("tabDragSpeed", 0.3).setType(Attribute.NUMBER);
+        attributeDefinitions.add("tabBorderWidth", -1).setType(Attribute.NUMBER);
+        attributeDefinitions.add("tabBorderHeight", -1).setType(Attribute.NUMBER);
+
+        // tabset
+        attributeDefinitions.add("tabSetEnableDeleteWhenEmpty", true).setType(Attribute.BOOLEAN);
+        attributeDefinitions.add("tabSetEnableDrop", true).setType(Attribute.BOOLEAN);
+        attributeDefinitions.add("tabSetEnableDrag", true).setType(Attribute.BOOLEAN);
+        attributeDefinitions.add("tabSetEnableDivide", true).setType(Attribute.BOOLEAN);
+        attributeDefinitions.add("tabSetEnableMaximize", true).setType(Attribute.BOOLEAN);
+        attributeDefinitions.add("tabSetEnableClose", false).setType(Attribute.BOOLEAN);
+        attributeDefinitions.add("tabSetEnableSingleTabStretch", false).setType(Attribute.BOOLEAN);
+        attributeDefinitions.add("tabSetAutoSelectTab", true).setType(Attribute.BOOLEAN);
+        attributeDefinitions.add("tabSetEnableActiveIcon", false).setType(Attribute.BOOLEAN);
+        attributeDefinitions.add("tabSetClassNameTabStrip", undefined).setType(Attribute.STRING);
+        attributeDefinitions.add("tabSetEnableTabStrip", true).setType(Attribute.BOOLEAN);
+        attributeDefinitions.add("tabSetEnableTabWrap", false).setType(Attribute.BOOLEAN);
+        attributeDefinitions.add("tabSetTabLocation", "top").setType("ITabLocation");
+        attributeDefinitions.add("tabMinWidth", DefaultMin).setType(Attribute.NUMBER);
+        attributeDefinitions.add("tabMinHeight", DefaultMin).setType(Attribute.NUMBER);
+        attributeDefinitions.add("tabSetMinWidth", DefaultMin).setType(Attribute.NUMBER);
+        attributeDefinitions.add("tabSetMinHeight", DefaultMin).setType(Attribute.NUMBER);
+        attributeDefinitions.add("tabMaxWidth", DefaultMax).setType(Attribute.NUMBER);
+        attributeDefinitions.add("tabMaxHeight", DefaultMax).setType(Attribute.NUMBER);
+        attributeDefinitions.add("tabSetMaxWidth", DefaultMax).setType(Attribute.NUMBER);
+        attributeDefinitions.add("tabSetMaxHeight", DefaultMax).setType(Attribute.NUMBER);
+
+        // border
+        attributeDefinitions.add("borderSize", 200).setType(Attribute.NUMBER);
+        attributeDefinitions.add("borderMinSize", DefaultMin).setType(Attribute.NUMBER);
+        attributeDefinitions.add("borderMaxSize", DefaultMax).setType(Attribute.NUMBER);
+        attributeDefinitions.add("borderEnableDrop", true).setType(Attribute.BOOLEAN);
+        attributeDefinitions.add("borderAutoSelectTabWhenOpen", true).setType(Attribute.BOOLEAN);
+        attributeDefinitions.add("borderAutoSelectTabWhenClosed", false).setType(Attribute.BOOLEAN);
+        attributeDefinitions.add("borderClassName", undefined).setType(Attribute.STRING);
+        attributeDefinitions.add("borderEnableAutoHide", false).setType(Attribute.BOOLEAN);
+
+        return attributeDefinitions;
     }
 }