flexlayout-react 0.7.15 → 0.8.0

package/src/model/TabSetNode.ts

@@ -5,11 +5,13 @@ import { DropInfo } from "../DropInfo";
 import { Orientation } from "../Orientation";
 import { Rect } from "../Rect";
 import { CLASSES } from "../Types";
+import { canDockToWindow } from "../view/Utils";
 import { BorderNode } from "./BorderNode";
 import { IDraggable } from "./IDraggable";
 import { IDropTarget } from "./IDropTarget";
 import { IJsonTabSetNode } from "./IJsonModel";
-import { Model, ILayoutMetrics } from "./Model";
+import { LayoutWindow } from "./LayoutWindow";
+import { Model } from "./Model";
 import { Node } from "./Node";
 import { RowNode } from "./RowNode";
 import { TabNode } from "./TabNode";
@@ -19,93 +21,67 @@ export class TabSetNode extends Node implements IDraggable, IDropTarget {
     static readonly TYPE = "tabset";
 
     /** @internal */
-    static _fromJson(json: any, model: Model) {
+    static fromJson(json: any, model: Model, layoutWindow: LayoutWindow) {
         const newLayoutNode = new TabSetNode(model, json);
 
         if (json.children != null) {
             for (const jsonChild of json.children) {
-                const child = TabNode._fromJson(jsonChild, model);
-                newLayoutNode._addChild(child);
+                const child = TabNode.fromJson(jsonChild, model);
+                newLayoutNode.addChild(child);
             }
         }
-        if (newLayoutNode._children.length === 0) {
-            newLayoutNode._setSelected(-1);
+        if (newLayoutNode.children.length === 0) {
+            newLayoutNode.setSelected(-1);
         }
 
         if (json.maximized && json.maximized === true) {
-            model._setMaximizedTabset(newLayoutNode);
+            layoutWindow.maximizedTabSet = newLayoutNode;
         }
 
         if (json.active && json.active === true) {
-            model._setActiveTabset(newLayoutNode);
+            layoutWindow.activeTabSet = newLayoutNode;
         }
 
         return newLayoutNode;
     }
     /** @internal */
-    private static _attributeDefinitions: AttributeDefinitions = TabSetNode._createAttributeDefinitions();
+    private static attributeDefinitions: AttributeDefinitions = TabSetNode.createAttributeDefinitions();
 
     /** @internal */
-    private static _createAttributeDefinitions(): AttributeDefinitions {
-        const attributeDefinitions = new AttributeDefinitions();
-        attributeDefinitions.add("type", TabSetNode.TYPE, true).setType(Attribute.STRING).setFixed();
-        attributeDefinitions.add("id", undefined).setType(Attribute.STRING);
-
-        attributeDefinitions.add("weight", 100).setType(Attribute.NUMBER);
-        attributeDefinitions.add("width", undefined).setType(Attribute.NUMBER);
-        attributeDefinitions.add("height", undefined).setType(Attribute.NUMBER);
-        attributeDefinitions.add("selected", 0).setType(Attribute.NUMBER);
-        attributeDefinitions.add("name", undefined).setType(Attribute.STRING);
-        attributeDefinitions.add("config", undefined).setType("any");
-
-        attributeDefinitions.addInherited("enableDeleteWhenEmpty", "tabSetEnableDeleteWhenEmpty");
-        attributeDefinitions.addInherited("enableDrop", "tabSetEnableDrop");
-        attributeDefinitions.addInherited("enableDrag", "tabSetEnableDrag");
-        attributeDefinitions.addInherited("enableDivide", "tabSetEnableDivide");
-        attributeDefinitions.addInherited("enableMaximize", "tabSetEnableMaximize");
-        attributeDefinitions.addInherited("enableClose", "tabSetEnableClose");
-        attributeDefinitions.addInherited("enableSingleTabStretch", "tabSetEnableSingleTabStretch");
-
-        attributeDefinitions.addInherited("classNameTabStrip", "tabSetClassNameTabStrip");
-        attributeDefinitions.addInherited("classNameHeader", "tabSetClassNameHeader");
-        attributeDefinitions.addInherited("enableTabStrip", "tabSetEnableTabStrip");
-        attributeDefinitions.addInherited("borderInsets", "tabSetBorderInsets");
-        attributeDefinitions.addInherited("marginInsets", "tabSetMarginInsets");
-        attributeDefinitions.addInherited("minWidth", "tabSetMinWidth");
-        attributeDefinitions.addInherited("minHeight", "tabSetMinHeight");
-
-        attributeDefinitions.addInherited("headerHeight", "tabSetHeaderHeight");
-        attributeDefinitions.addInherited("tabStripHeight", "tabSetTabStripHeight");
-        attributeDefinitions.addInherited("tabLocation", "tabSetTabLocation");
-        attributeDefinitions.addInherited("autoSelectTab", "tabSetAutoSelectTab").setType(Attribute.BOOLEAN);
-        return attributeDefinitions;
-    }
-
+    private tabStripRect: Rect = Rect.empty();
+    /** @internal */
+    private contentRect: Rect = Rect.empty();
     /** @internal */
-    private _contentRect?: Rect;
+    private calculatedMinHeight: number;
     /** @internal */
-    private _tabHeaderRect?: Rect;
+    private calculatedMinWidth: number;
     /** @internal */
-    private _calculatedTabBarHeight: number;
+    private calculatedMaxHeight: number;
     /** @internal */
-    private _calculatedHeaderBarHeight: number;
+    private calculatedMaxWidth: number;
 
     /** @internal */
     constructor(model: Model, json: any) {
         super(model);
+        this.calculatedMinHeight = 0;
+        this.calculatedMinWidth = 0;
+        this.calculatedMaxHeight = 0;
+        this.calculatedMaxWidth = 0;
 
-        TabSetNode._attributeDefinitions.fromJson(json, this._attributes);
-        model._addNode(this);
-        this._calculatedTabBarHeight = 0;
-        this._calculatedHeaderBarHeight = 0;
+        TabSetNode.attributeDefinitions.fromJson(json, this.attributes);
+        model.addNode(this);
     }
 
     getName() {
-        return this._getAttr("name") as string | undefined;
+        return this.getAttr("name") as string | undefined;
+    }
+
+    isEnableActiveIcon() {
+        return this.getAttr("enableActiveIcon") as boolean;
     }
 
     getSelected() {
-        const selected = this._attributes.selected;
+        const selected = this.attributes.selected;
         if (selected !== undefined) {
             return selected as number;
         }
@@ -115,29 +91,29 @@ export class TabSetNode extends Node implements IDraggable, IDropTarget {
     getSelectedNode() {
         const selected = this.getSelected();
         if (selected !== -1) {
-            return this._children[selected];
+            return this.children[selected];
         }
         return undefined;
     }
 
     getWeight(): number {
-        return this._getAttr("weight") as number;
+        return this.getAttr("weight") as number;
     }
 
-    getWidth() {
-        return this._getAttr("width") as number | undefined;
+    getAttrMinWidth() {
+        return (this.getAttr("minWidth") as number);
     }
 
-    getMinWidth() {
-        return this._getAttr("minWidth") as number;
+    getAttrMinHeight() {
+        return this.getAttr("minHeight") as number;
     }
 
-    getHeight() {
-        return this._getAttr("height") as number | undefined;
+    getMinWidth() {
+        return this.calculatedMinWidth;
     }
 
     getMinHeight() {
-        return this._getAttr("minHeight") as number;
+        return this.calculatedMinHeight;
     }
 
     /** @internal */
@@ -148,6 +124,31 @@ export class TabSetNode extends Node implements IDraggable, IDropTarget {
             return this.getMinHeight();
         }
     }
+    getAttrMaxWidth() {
+        return (this.getAttr("maxWidth") as number);
+    }
+
+    getAttrMaxHeight() {
+        return this.getAttr("maxHeight") as number;
+    }
+
+    getMaxWidth() {
+        return this.calculatedMaxWidth;
+    }
+
+    getMaxHeight() {
+        return this.calculatedMaxHeight;
+    }
+
+    /** @internal */
+    getMaxSize(orientation: Orientation) {
+        if (orientation === Orientation.HORZ) {
+            return this.getMaxWidth();
+        } else {
+            return this.getMaxHeight();
+        }
+    }
+
 
     /**
      * Returns the config attribute that can be used to store node specific data that
@@ -157,118 +158,140 @@ export class TabSetNode extends Node implements IDraggable, IDropTarget {
      *   FlexLayout.Actions.updateNodeAttributes(node.getId(), {config:myConfigObject}));
      */
     getConfig() {
-        return this._attributes.config;
+        return this.attributes.config;
     }
 
     isMaximized() {
-        return this._model.getMaximizedTabset() === this;
+        return this.model.getMaximizedTabset(this.getWindowId()) === this;
     }
 
     isActive() {
-        return this._model.getActiveTabset() === this;
+        return this.model.getActiveTabset(this.getWindowId()) === this;
     }
 
     isEnableDeleteWhenEmpty() {
-        return this._getAttr("enableDeleteWhenEmpty") as boolean;
+        return this.getAttr("enableDeleteWhenEmpty") as boolean;
     }
 
     isEnableDrop() {
-        return this._getAttr("enableDrop") as boolean;
+        return this.getAttr("enableDrop") as boolean;
+    }
+
+    isEnableTabWrap() {
+        return this.getAttr("enableTabWrap") as boolean;
     }
 
     isEnableDrag() {
-        return this._getAttr("enableDrag") as boolean;
+        return this.getAttr("enableDrag") as boolean;
     }
 
     isEnableDivide() {
-        return this._getAttr("enableDivide") as boolean;
+        return this.getAttr("enableDivide") as boolean;
     }
 
     isEnableMaximize() {
-        return this._getAttr("enableMaximize") as boolean;
+        return this.getAttr("enableMaximize") as boolean;
     }
 
     isEnableClose() {
-        return this._getAttr("enableClose") as boolean;
-    }
-    
-    isEnableSingleTabStretch() {
-        return this._getAttr("enableSingleTabStretch") as boolean;
+        return this.getAttr("enableClose") as boolean;
     }
 
-    canMaximize() {
-        if (this.isEnableMaximize()) {
-            // always allow maximize toggle if already maximized
-            if (this.getModel().getMaximizedTabset() === this) {
-                return true;
-            }
-            // only one tabset, so disable
-            if (this.getParent() === this.getModel().getRoot() && this.getModel().getRoot().getChildren().length === 1) {
-                return false;
-            }
-            return true;
-        }
-        return false;
+    isEnableSingleTabStretch() {
+        return this.getAttr("enableSingleTabStretch") as boolean;
     }
 
     isEnableTabStrip() {
-        return this._getAttr("enableTabStrip") as boolean;
+        return this.getAttr("enableTabStrip") as boolean;
     }
 
     isAutoSelectTab() {
-        return this._getAttr("autoSelectTab") as boolean;
+        return this.getAttr("autoSelectTab") as boolean;
     }
 
     getClassNameTabStrip() {
-        return this._getAttr("classNameTabStrip") as string | undefined;
+        return this.getAttr("classNameTabStrip") as string | undefined;
     }
 
-    getClassNameHeader() {
-        return this._getAttr("classNameHeader") as string | undefined;
+    getTabLocation() {
+        return this.getAttr("tabLocation") as string;
     }
 
-    /** @internal */
-    calculateHeaderBarHeight(metrics: ILayoutMetrics) {
-        const headerBarHeight = this._getAttr("headerHeight") as number;
-        if (headerBarHeight !== 0) {
-            // its defined
-            this._calculatedHeaderBarHeight = headerBarHeight;
-        } else {
-            this._calculatedHeaderBarHeight = metrics.headerBarSize;
+
+
+    toJson(): IJsonTabSetNode {
+        const json: any = {};
+        TabSetNode.attributeDefinitions.toJson(json, this.attributes);
+        json.children = this.children.map((child) => child.toJson());
+
+        if (this.isActive()) {
+            json.active = true;
         }
+
+        if (this.isMaximized()) {
+            json.maximized = true;
+        }
+
+        return json;
     }
 
     /** @internal */
-    calculateTabBarHeight(metrics: ILayoutMetrics) {
-        const tabBarHeight = this._getAttr("tabStripHeight") as number;
-        if (tabBarHeight !== 0) {
-            // its defined
-            this._calculatedTabBarHeight = tabBarHeight;
-        } else {
-            this._calculatedTabBarHeight = metrics.tabBarSize;
+    calcMinMaxSize() {
+        this.calculatedMinHeight = this.getAttrMinHeight();
+        this.calculatedMinWidth = this.getAttrMinWidth();
+        this.calculatedMaxHeight = this.getAttrMaxHeight();
+        this.calculatedMaxWidth = this.getAttrMaxWidth();
+        for (const child of this.children) {
+            const c = child as TabNode;
+            this.calculatedMinWidth = Math.max(this.calculatedMinWidth, c.getMinWidth());
+            this.calculatedMinHeight = Math.max(this.calculatedMinHeight, c.getMinHeight());
+            this.calculatedMaxWidth = Math.min(this.calculatedMaxWidth, c.getMaxWidth());
+            this.calculatedMaxHeight = Math.min(this.calculatedMaxHeight, c.getMaxHeight());
         }
     }
 
-    getHeaderHeight() {
-        return this._calculatedHeaderBarHeight;
+    /** @internal */
+    canMaximize() {
+        if (this.isEnableMaximize()) {
+            // always allow maximize toggle if already maximized
+            if (this.getModel().getMaximizedTabset(this.getWindowId()) === this) {
+                return true;
+            }
+            // only one tabset, so disable
+            if (this.getParent() === this.getModel().getRoot(this.getWindowId()) && this.getModel().getRoot(this.getWindowId()).getChildren().length === 1) {
+                return false;
+            }
+            return true;
+        }
+        return false;
     }
 
-    getTabStripHeight() {
-        return this._calculatedTabBarHeight;
+    /** @internal */
+    setContentRect(rect: Rect) {
+        this.contentRect = rect;
     }
 
-    getTabLocation() {
-        return this._getAttr("tabLocation") as string;
+    /** @internal */
+    getContentRect() {
+        return this.contentRect;
     }
 
     /** @internal */
-    _setWeight(weight: number) {
-        this._attributes.weight = weight;
+    setTabStripRect(rect: Rect) {
+        this.tabStripRect = rect;
+    }
+    /** @internal */
+    setWeight(weight: number) {
+        this.attributes.weight = weight;
     }
 
     /** @internal */
-    _setSelected(index: number) {
-        this._attributes.selected = index;
+    setSelected(index: number) {
+        this.attributes.selected = index;
+    }
+
+    getWindowId() {
+        return (this.parent as RowNode).getWindowId();
     }
 
     /** @internal */
@@ -277,38 +300,44 @@ export class TabSetNode extends Node implements IDraggable, IDropTarget {
 
         if (dragNode === this) {
             const dockLocation = DockLocation.CENTER;
-            const outlineRect = this._tabHeaderRect;
+            const outlineRect = this.tabStripRect;
             dropInfo = new DropInfo(this, outlineRect!, dockLocation, -1, CLASSES.FLEXLAYOUT__OUTLINE_RECT);
-        } else if (this._contentRect!.contains(x, y)) {
+        } else if (this.getWindowId() !== Model.MAIN_WINDOW_ID && !canDockToWindow(dragNode)) {
+            return undefined;
+        } else if (this.contentRect!.contains(x, y)) {
             let dockLocation = DockLocation.CENTER;
-            if (this._model.getMaximizedTabset() === undefined) {
-                dockLocation = DockLocation.getLocation(this._contentRect!, x, y);
+            if (this.model.getMaximizedTabset((this.parent as RowNode).getWindowId()) === undefined) {
+                dockLocation = DockLocation.getLocation(this.contentRect!, x, y);
             }
-            const outlineRect = dockLocation.getDockRect(this._rect);
+            const outlineRect = dockLocation.getDockRect(this.rect);
             dropInfo = new DropInfo(this, outlineRect, dockLocation, -1, CLASSES.FLEXLAYOUT__OUTLINE_RECT);
-        } else if (this._tabHeaderRect != null && this._tabHeaderRect.contains(x, y)) {
+        } else if (this.tabStripRect != null && this.tabStripRect.contains(x, y)) {
             let r: Rect;
             let yy: number;
             let h: number;
-            if (this._children.length === 0) {
-                r = this._tabHeaderRect.clone();
+            if (this.children.length === 0) {
+                r = this.tabStripRect.clone();
                 yy = r.y + 3;
                 h = r.height - 4;
                 r.width = 2;
             } else {
-                let child = this._children[0] as TabNode;
+                let child = this.children[0] as TabNode;
                 r = child.getTabRect()!;
                 yy = r.y;
                 h = r.height;
-                let p = this._tabHeaderRect.x;
+                let p = this.tabStripRect.x;
                 let childCenter = 0;
-                for (let i = 0; i < this._children.length; i++) {
-                    child = this._children[i] as TabNode;
+                for (let i = 0; i < this.children.length; i++) {
+                    child = this.children[i] as TabNode;
                     r = child.getTabRect()!;
+                    if (r.y !== yy) {
+                        yy = r.y
+                        p = this.tabStripRect.x;
+                    }
                     childCenter = r.x + r.width / 2;
-                    if (x >= p && x < childCenter) {
+                    if (x >= p && x < childCenter && y > r.y && y < r.getBottom()) {
                         const dockLocation = DockLocation.CENTER;
-                        const outlineRect = new Rect(r.x - 2, yy, 3, h);
+                        const outlineRect = new Rect(r.x - 2, r.y, 3, r.height);
                         dropInfo = new DropInfo(this, outlineRect, dockLocation, i, CLASSES.FLEXLAYOUT__OUTLINE_RECT);
                         break;
                     }
@@ -318,11 +347,11 @@ export class TabSetNode extends Node implements IDraggable, IDropTarget {
             if (dropInfo == null) {
                 const dockLocation = DockLocation.CENTER;
                 const outlineRect = new Rect(r.getRight() - 2, yy, 3, h);
-                dropInfo = new DropInfo(this, outlineRect, dockLocation, this._children.length, CLASSES.FLEXLAYOUT__OUTLINE_RECT);
+                dropInfo = new DropInfo(this, outlineRect, dockLocation, this.children.length, CLASSES.FLEXLAYOUT__OUTLINE_RECT);
             }
         }
 
-        if (!dragNode._canDockInto(dragNode, dropInfo)) {
+        if (!dragNode.canDockInto(dragNode, dropInfo)) {
             return undefined;
         }
 
@@ -330,60 +359,20 @@ export class TabSetNode extends Node implements IDraggable, IDropTarget {
     }
 
     /** @internal */
-    _layout(rect: Rect, metrics: ILayoutMetrics) {
-        this.calculateHeaderBarHeight(metrics);
-        this.calculateTabBarHeight(metrics);
-
-        if (this.isMaximized()) {
-            rect = (this._model.getRoot() as Node).getRect();
-        }
-
-        rect = rect.removeInsets(this._getAttr("marginInsets"));
-        this._rect = rect;
-        rect = rect.removeInsets(this._getAttr("borderInsets"));
-
-        const showHeader = this.getName() !== undefined;
-        let y = 0;
-        let h = 0;
-        if (showHeader) {
-            y += this._calculatedHeaderBarHeight;
-            h += this._calculatedHeaderBarHeight;
-        }
-        if (this.isEnableTabStrip()) {
-            if (this.getTabLocation() === "top") {
-                this._tabHeaderRect = new Rect(rect.x, rect.y + y, rect.width, this._calculatedTabBarHeight);
-            } else {
-                this._tabHeaderRect = new Rect(rect.x, rect.y + rect.height - this._calculatedTabBarHeight, rect.width, this._calculatedTabBarHeight);
-            }
-            h += this._calculatedTabBarHeight;
-            if (this.getTabLocation() === "top") {
-                y += this._calculatedTabBarHeight;
-            }
-        }
-        this._contentRect = new Rect(rect.x, rect.y + y, rect.width, rect.height - h);
-
-        for (let i = 0; i < this._children.length; i++) {
-            const child = this._children[i];
-            child._layout(this._contentRect!, metrics);
-            child._setVisible(i === this.getSelected());
-        }
+    delete() {
+        (this.parent as RowNode).removeChild(this);
     }
 
     /** @internal */
-    _delete() {
-        (this._parent as RowNode)._removeChild(this);
-    }
-
-    /** @internal */
-    _remove(node: TabNode) {
-        const removedIndex = this._removeChild(node);
-        this._model._tidy();
+    remove(node: TabNode) {
+        const removedIndex = this.removeChild(node);
+        this.model.tidy();
 
         adjustSelectedIndex(this, removedIndex);
     }
 
     /** @internal */
-    drop(dragNode: Node & IDraggable, location: DockLocation, index: number, select?: boolean) {
+    drop(dragNode: Node, location: DockLocation, index: number, select?: boolean) {
         const dockLocation = location;
 
         if (this === dragNode) {
@@ -394,17 +383,17 @@ export class TabSetNode extends Node implements IDraggable, IDropTarget {
         let dragParent = dragNode.getParent() as BorderNode | TabSetNode | RowNode;
         let fromIndex = 0;
         if (dragParent !== undefined) {
-            fromIndex = dragParent._removeChild(dragNode);
+            fromIndex = dragParent.removeChild(dragNode);
             // if selected node in border is being docked into tabset then deselect border tabs
             if (dragParent instanceof BorderNode && dragParent.getSelected() === fromIndex) {
-                dragParent._setSelected(-1);
+                dragParent.setSelected(-1);
             } else {
                 adjustSelectedIndex(dragParent, fromIndex);
             }
         }
 
         // if dropping a tab back to same tabset and moving to forward position then reduce insertion index
-        if (dragNode.getType() === TabNode.TYPE && dragParent === this && fromIndex < index && index > 0) {
+        if (dragNode instanceof TabNode && dragParent === this && fromIndex < index && index > 0) {
             index--;
         }
 
@@ -412,107 +401,176 @@ export class TabSetNode extends Node implements IDraggable, IDropTarget {
         if (dockLocation === DockLocation.CENTER) {
             let insertPos = index;
             if (insertPos === -1) {
-                insertPos = this._children.length;
+                insertPos = this.children.length;
             }
 
-            if (dragNode.getType() === TabNode.TYPE) {
-                this._addChild(dragNode, insertPos);
+            if (dragNode instanceof TabNode) {
+                this.addChild(dragNode, insertPos);
                 if (select || (select !== false && this.isAutoSelectTab())) {
-                    this._setSelected(insertPos);
+                    this.setSelected(insertPos);
                 }
                 // console.log("added child at : " + insertPos);
+            } else if (dragNode instanceof RowNode) {
+                (dragNode as RowNode).forEachNode((child, level) => {
+                    if (child instanceof TabNode) {
+                        this.addChild(child, insertPos);
+                        // console.log("added child at : " + insertPos);
+                        insertPos++;
+                    }
+                }, 0);
             } else {
                 for (let i = 0; i < dragNode.getChildren().length; i++) {
                     const child = dragNode.getChildren()[i];
-                    this._addChild(child, insertPos);
+                    this.addChild(child, insertPos);
                     // console.log("added child at : " + insertPos);
                     insertPos++;
                 }
-                if (this.getSelected() === -1 && this._children.length > 0) {
-                    this._setSelected(0);
+                if (this.getSelected() === -1 && this.children.length > 0) {
+                    this.setSelected(0);
                 }
             }
-            this._model._setActiveTabset(this);
+            this.model.setActiveTabset(this, (this.parent as RowNode).getWindowId());
         } else {
-            let tabSet: TabSetNode | undefined;
+            let moveNode = dragNode as TabSetNode | RowNode | TabNode;
             if (dragNode instanceof TabNode) {
                 // create new tabset parent
                 // console.log("create a new tabset");
-                const callback = this._model._getOnCreateTabSet();
-                tabSet = new TabSetNode(this._model, callback ? callback(dragNode as TabNode) : {});
-                tabSet._addChild(dragNode);
+                const callback = this.model.getOnCreateTabSet();
+                moveNode = new TabSetNode(this.model, callback ? callback(dragNode as TabNode) : {});
+                moveNode.addChild(dragNode);
                 // console.log("added child at end");
-                dragParent = tabSet;
+                dragParent = moveNode;
+            } else if (dragNode instanceof RowNode) {
+                const parent = (this.getParent()! as RowNode);
+                // need to turn round if same orientation unless docking oposite direction
+                if (dragNode.getOrientation() === parent.getOrientation() &&
+                    (location.getOrientation() === parent.getOrientation() || location === DockLocation.CENTER)) {
+                    const node = new RowNode(this.model, this.getWindowId(), {});
+                    node.addChild(dragNode);
+                    moveNode = node;
+                }
             } else {
-                tabSet = dragNode as TabSetNode;
+                moveNode = dragNode as TabSetNode;
             }
 
-            const parentRow = this._parent as Node;
+            const parentRow = this.parent as Node;
             const pos = parentRow.getChildren().indexOf(this);
 
-            if (parentRow.getOrientation() === dockLocation._orientation) {
-                tabSet._setWeight(this.getWeight() / 2);
-                this._setWeight(this.getWeight() / 2);
+            if (parentRow.getOrientation() === dockLocation.orientation) {
+                moveNode.setWeight(this.getWeight() / 2);
+                this.setWeight(this.getWeight() / 2);
                 // console.log("added child 50% size at: " +  pos + dockLocation.indexPlus);
-                parentRow._addChild(tabSet, pos + dockLocation._indexPlus);
+                parentRow.addChild(moveNode, pos + dockLocation.indexPlus);
             } else {
                 // create a new row to host the new tabset (it will go in the opposite direction)
                 // console.log("create a new row");
-                const newRow = new RowNode(this._model, {});
-                newRow._setWeight(this.getWeight());
-                newRow._addChild(this);
-                this._setWeight(50);
-                tabSet._setWeight(50);
+                const newRow = new RowNode(this.model, this.getWindowId(), {});
+                newRow.setWeight(this.getWeight());
+                newRow.addChild(this);
+                this.setWeight(50);
+                moveNode.setWeight(50);
                 // console.log("added child 50% size at: " +  dockLocation.indexPlus);
-                newRow._addChild(tabSet, dockLocation._indexPlus);
+                newRow.addChild(moveNode, dockLocation.indexPlus);
 
-                parentRow._removeChild(this);
-                parentRow._addChild(newRow, pos);
+                parentRow.removeChild(this);
+                parentRow.addChild(newRow, pos);
+            }
+            if (moveNode instanceof TabSetNode) {
+                this.model.setActiveTabset(moveNode, this.getWindowId());
             }
-            this._model._setActiveTabset(tabSet);
-        }
-        this._model._tidy();
-    }
-
-    toJson(): IJsonTabSetNode {
-        const json: any = {};
-        TabSetNode._attributeDefinitions.toJson(json, this._attributes);
-        json.children = this._children.map((child) => child.toJson());
-
-        if (this.isActive()) {
-            json.active = true;
-        }
-
-        if (this.isMaximized()) {
-            json.maximized = true;
         }
-
-        return json;
+        this.model.tidy();
     }
 
     /** @internal */
-    _updateAttrs(json: any) {
-        TabSetNode._attributeDefinitions.update(json, this._attributes);
+    updateAttrs(json: any) {
+        TabSetNode.attributeDefinitions.update(json, this.attributes);
     }
 
     /** @internal */
-    _getAttributeDefinitions() {
-        return TabSetNode._attributeDefinitions;
+    getAttributeDefinitions() {
+        return TabSetNode.attributeDefinitions;
     }
 
     /** @internal */
-    _getPrefSize(orientation: Orientation) {
-        let prefSize = this.getWidth();
-        if (orientation === Orientation.VERT) {
-            prefSize = this.getHeight();
-        }
-        return prefSize;
+    static getAttributeDefinitions() {
+        return TabSetNode.attributeDefinitions;
     }
 
-
     /** @internal */
-    static getAttributeDefinitions() {
-        return TabSetNode._attributeDefinitions;
+    private static createAttributeDefinitions(): AttributeDefinitions {
+        const attributeDefinitions = new AttributeDefinitions();
+        attributeDefinitions.add("type", TabSetNode.TYPE, true).setType(Attribute.STRING).setFixed();
+        attributeDefinitions.add("id", undefined).setType(Attribute.STRING).setDescription(
+            `the unique id of the tab set, if left undefined a uuid will be assigned`
+        );
+        attributeDefinitions.add("weight", 100).setType(Attribute.NUMBER).setDescription(
+            `relative weight for sizing of this tabset in parent row`
+        );
+        attributeDefinitions.add("selected", 0).setType(Attribute.NUMBER).setDescription(
+            `index of selected/visible tab in tabset`
+        );
+        attributeDefinitions.add("name", undefined).setType(Attribute.STRING);
+        attributeDefinitions.add("config", undefined).setType("any").setDescription(
+            `a place to hold json config used in your own code`
+        );
+
+        attributeDefinitions.addInherited("enableDeleteWhenEmpty", "tabSetEnableDeleteWhenEmpty").setDescription(
+            `whether to delete this tabset when is has no tabs`
+        );
+        attributeDefinitions.addInherited("enableDrop", "tabSetEnableDrop").setDescription(
+            `allow user to drag tabs into this tabset`
+        );
+        attributeDefinitions.addInherited("enableDrag", "tabSetEnableDrag").setDescription(
+            `allow user to drag tabs out this tabset`
+        );
+        attributeDefinitions.addInherited("enableDivide", "tabSetEnableDivide").setDescription(
+            `allow user to drag tabs to region of this tabset, splitting into new tabset`
+        );
+        attributeDefinitions.addInherited("enableMaximize", "tabSetEnableMaximize").setDescription(
+            `allow user to maximize tabset to fill view via maximize button`
+        );
+        attributeDefinitions.addInherited("enableClose", "tabSetEnableClose").setDescription(
+            `allow user to close tabset via a close button`
+        );
+        attributeDefinitions.addInherited("enableSingleTabStretch", "tabSetEnableSingleTabStretch").setDescription(
+            `if the tabset has only a single tab then stretch the single tab to fill area and display in a header style`
+        );
+
+        attributeDefinitions.addInherited("classNameTabStrip", "tabSetClassNameTabStrip").setDescription(
+            `a class name to apply to the tab strip`
+        );
+        attributeDefinitions.addInherited("enableTabStrip", "tabSetEnableTabStrip").setDescription(
+            `enable tab strip and allow multiple tabs in this tabset`
+        );
+        attributeDefinitions.addInherited("minWidth", "tabSetMinWidth").setDescription(
+            `minimum width (in px) for this tabset`
+        );
+        attributeDefinitions.addInherited("minHeight", "tabSetMinHeight").setDescription(
+            `minimum height (in px) for this tabset`
+        );
+        attributeDefinitions.addInherited("maxWidth", "tabSetMaxWidth").setDescription(
+            `maximum width (in px) for this tabset`
+        );
+        attributeDefinitions.addInherited("maxHeight", "tabSetMaxHeight").setDescription(
+            `maximum height (in px) for this tabset`
+        );
+
+        attributeDefinitions.addInherited("enableTabWrap", "tabSetEnableTabWrap").setDescription(
+            `show tabs in location top or bottom`
+        );
+        attributeDefinitions.addInherited("tabLocation", "tabSetTabLocation").setDescription(
+            `the location of the tabs either top or bottom`
+        );
+        attributeDefinitions.addInherited("autoSelectTab", "tabSetAutoSelectTab").setType(Attribute.BOOLEAN).setDescription(
+            `whether to select new/moved tabs in tabset`
+        );
+        attributeDefinitions.addInherited("enableActiveIcon", "tabSetEnableActiveIcon").setType(Attribute.BOOLEAN).setDescription(
+            `whether the active icon (*) should be displayed when the tabset is active`
+        );
+        return attributeDefinitions;
     }
 
 }
+
+