flexlayout-react 0.5.15 → 0.5.19

package/src/model/Actions.ts

@@ -8,6 +8,7 @@ class Actions {
     static ADD_NODE = "FlexLayout_AddNode";
     static MOVE_NODE = "FlexLayout_MoveNode";
     static DELETE_TAB = "FlexLayout_DeleteTab";
+    static DELETE_TABSET = "FlexLayout_DeleteTabset";
     static RENAME_TAB = "FlexLayout_RenameTab";
     static SELECT_TAB = "FlexLayout_SelectTab";
     static SET_ACTIVE_TABSET = "FlexLayout_SetActiveTabset";
@@ -26,7 +27,7 @@ class Actions {
      * @param location the location where the new tab will be added, one of the DockLocation enum values.
      * @param index for docking to the center this value is the index of the tab, use -1 to add to the end.
      * @param select (optional) whether to select the new tab, overriding autoSelectTab
-     * @returns {{type: (string|string), json: *, toNode: *, location: (*|string), index: *, select?: boolean}}
+     * @returns {Action} the action
      */
     static addNode(json: any, toNodeId: string, location: DockLocation, index: number, select?: boolean): Action {
         return new Action(Actions.ADD_NODE, {
@@ -45,7 +46,7 @@ class Actions {
      * @param location the location where the moved node will be added, one of the DockLocation enum values.
      * @param index for docking to the center this value is the index of the tab, use -1 to add to the end.
      * @param select (optional) whether to select the moved tab(s) in new tabset, overriding autoSelectTab
-     * @returns {{type: (string|string), fromNode: *, toNode: *, location: (*|string), index: *}}
+     * @returns {Action} the action
      */
     static moveNode(fromNodeId: string, toNodeId: string, location: DockLocation, index: number, select?: boolean): Action {
         return new Action(Actions.MOVE_NODE, {
@@ -59,18 +60,27 @@ class Actions {
 
     /**
      * Deletes a tab node from the layout
-     * @param tabNodeId the id of the node to delete
-     * @returns {{type: (string|string), node: *}}
+     * @param tabsetNodeId the id of the tab node to delete
+     * @returns {Action} the action
      */
     static deleteTab(tabNodeId: string): Action {
         return new Action(Actions.DELETE_TAB, { node: tabNodeId });
     }
 
+    /**
+     * Deletes a tabset node and all it's child tab nodes from the layout
+     * @param tabsetNodeId the id of the tabset node to delete
+     * @returns {Action} the action
+     */
+     static deleteTabset(tabsetNodeId: string): Action {
+        return new Action(Actions.DELETE_TABSET, { node: tabsetNodeId });
+    }
+
     /**
      * Change the given nodes tab text
      * @param tabNodeId the id of the node to rename
      * @param text the test of the tab
-     * @returns {{type: (string|string), node: *, text: *}}
+     * @returns {Action} the action
      */
     static renameTab(tabNodeId: string, text: string): Action {
         return new Action(Actions.RENAME_TAB, { node: tabNodeId, text });
@@ -79,7 +89,7 @@ class Actions {
     /**
      * Selects the given tab in its parent tabset
      * @param tabNodeId the id of the node to set selected
-     * @returns {{type: (string|string), tabNode: *}}
+     * @returns {Action} the action
      */
     static selectTab(tabNodeId: string): Action {
         return new Action(Actions.SELECT_TAB, { tabNode: tabNodeId });
@@ -88,7 +98,7 @@ class Actions {
     /**
      * Set the given tabset node as the active tabset
      * @param tabsetNodeId the id of the tabset node to set as active
-     * @returns {{type: (string|string), tabsetNode: *}}
+     * @returns {Action} the action
      */
     static setActiveTabset(tabsetNodeId: string): Action {
         return new Action(Actions.SET_ACTIVE_TABSET, { tabsetNode: tabsetNodeId });
@@ -100,7 +110,7 @@ class Actions {
      *  Actions.adjustSplit({node1: "1", weight1:30, pixelWidth1:300, node2: "2", weight2:70, pixelWidth2:700});
      *
      * @param splitSpec an object the defines the new split between two tabsets, see example below.
-     * @returns {{type: (string|string), node1: *, weight1: *, pixelWidth1: *, node2: *, weight2: *, pixelWidth2: *}}
+     * @returns {Action} the action
      */
     static adjustSplit(splitSpec: { node1Id: string; weight1: number; pixelWidth1: number; node2Id: string; weight2: number; pixelWidth2: number }): Action {
         const node1 = splitSpec.node1Id;
@@ -123,7 +133,7 @@ class Actions {
     /**
      * Maximizes the given tabset
      * @param tabsetNodeId the id of the tabset to maximize
-     * @returns {{type: (string|string), node: *}}
+     * @returns {Action} the action
      */
     static maximizeToggle(tabsetNodeId: string): Action {
         return new Action(Actions.MAXIMIZE_TOGGLE, { node: tabsetNodeId });
@@ -132,7 +142,7 @@ class Actions {
     /**
      * Updates the global model jsone attributes
      * @param attributes the json for the model attributes to update (merge into the existing attributes)
-     * @returns {{type: (string|string), json: *}}
+     * @returns {Action} the action
      */
     static updateModelAttributes(attributes: any): Action {
         return new Action(Actions.UPDATE_MODEL_ATTRIBUTES, { json: attributes });
@@ -142,7 +152,7 @@ class Actions {
      * Updates the given nodes json attributes
      * @param nodeId the id of the node to update
      * @param attributes the json attributes to update (merge with the existing attributes)
-     * @returns {{type: (string|string), node: *, json: *}}
+     * @returns {Action} the action
      */
     static updateNodeAttributes(nodeId: string, attributes: any): Action {
         return new Action(Actions.UPDATE_NODE_ATTRIBUTES, { node: nodeId, json: attributes });

package/src/model/BorderNode.ts

@@ -4,6 +4,7 @@ import DockLocation from "../DockLocation";
 import DropInfo from "../DropInfo";
 import Orientation from "../Orientation";
 import Rect from "../Rect";
+import { CLASSES } from "../Types";
 import IDraggable from "./IDraggable";
 import IDropTarget from "./IDropTarget";
 import { IJsonBorderNode } from "./IJsonModel";
@@ -50,6 +51,7 @@ class BorderNode extends Node implements IDropTarget {
         attributeDefinitions.addInherited("autoSelectTabWhenClosed", "borderAutoSelectTabWhenClosed").setType(Attribute.BOOLEAN);
         attributeDefinitions.addInherited("size", "borderSize").setType(Attribute.NUMBER);
         attributeDefinitions.addInherited("minSize", "borderMinSize").setType(Attribute.NUMBER);
+        attributeDefinitions.addInherited("enableAutoHide", "borderEnableAutoHide").setType(Attribute.BOOLEAN);
         return attributeDefinitions;
     }
 
@@ -128,7 +130,19 @@ class BorderNode extends Node implements IDropTarget {
     }
 
     getSize() {
-        return this._getAttr("size") as number;
+        const defaultSize = this._getAttr("size") as number;
+        const selected = this.getSelected();
+        if (selected === -1) {
+            return defaultSize;
+        } else {
+            const tabNode = this._children[selected] as TabNode;
+            const tabBorderSize = (this._location._orientation === Orientation.HORZ) ? tabNode._getAttr("borderWidth") : tabNode._getAttr("borderHeight");
+            if (tabBorderSize === -1) {
+                return defaultSize;
+            } else {
+                return tabBorderSize;
+            }
+        }
     }
 
     getMinSize() {
@@ -157,7 +171,7 @@ class BorderNode extends Node implements IDropTarget {
      * this.state.model.doAction(
      *   FlexLayout.Actions.updateNodeAttributes(node.getId(), {config:myConfigObject}));
      */
-     getConfig() {
+    getConfig() {
         return this._attributes.config;
     }
 
@@ -166,7 +180,19 @@ class BorderNode extends Node implements IDropTarget {
     }
 
     isShowing() {
-        return this._attributes.show as boolean;
+        const show = this._attributes.show as boolean;
+        if (show) {
+            if (this._model._getShowHiddenBorder() !== this._location && this.isAutoHide() && this._children.length === 0) {
+                return false;
+            } 
+            return true;
+        } else {
+            return false;
+        }
+    }
+
+    isAutoHide() {
+        return this._getAttr("enableAutoHide") as boolean;
     }
 
     /** @hidden @internal */
@@ -176,7 +202,22 @@ class BorderNode extends Node implements IDropTarget {
 
     /** @hidden @internal */
     _setSize(pos: number) {
-        this._attributes.size = pos;
+        const selected = this.getSelected();
+        if (selected === -1) {
+            this._attributes.size = pos;
+        } else {
+            const tabNode = this._children[selected] as TabNode;
+            const tabBorderSize = (this._location._orientation === Orientation.HORZ) ? tabNode._getAttr("borderWidth") : tabNode._getAttr("borderHeight");
+            if (tabBorderSize === -1) {
+                this._attributes.size = pos;
+            } else {
+                if (this._location._orientation === Orientation.HORZ) {
+                    tabNode._setBorderWidth(pos);
+                } else {
+                    tabNode._setBorderHeight(pos);
+                }
+            }
+        }
     }
 
     /** @hidden @internal */
@@ -269,18 +310,18 @@ class BorderNode extends Node implements IDropTarget {
                         childCenter = childRect.x + childRect.width / 2;
                         if (x >= pos && x < childCenter) {
                             const outlineRect = new Rect(childRect.x - 2, childY, 3, childHeight);
-                            dropInfo = new DropInfo(this, outlineRect, dockLocation, i, "flexlayout__outline_rect");
+                            dropInfo = new DropInfo(this, outlineRect, dockLocation, i, CLASSES.FLEXLAYOUT__OUTLINE_RECT);
                             break;
                         }
                         pos = childCenter;
                     }
                     if (dropInfo == null) {
                         const outlineRect = new Rect(childRect.getRight() - 2, childY, 3, childHeight);
-                        dropInfo = new DropInfo(this, outlineRect, dockLocation, this._children.length, "flexlayout__outline_rect");
+                        dropInfo = new DropInfo(this, outlineRect, dockLocation, this._children.length, CLASSES.FLEXLAYOUT__OUTLINE_RECT);
                     }
                 } else {
                     const outlineRect = new Rect(this._tabHeaderRect!.x + 1, this._tabHeaderRect!.y + 2, 3, 18);
-                    dropInfo = new DropInfo(this, outlineRect, dockLocation, 0, "flexlayout__outline_rect");
+                    dropInfo = new DropInfo(this, outlineRect, dockLocation, 0, CLASSES.FLEXLAYOUT__OUTLINE_RECT);
                 }
             } else {
                 if (this._children.length > 0) {
@@ -297,18 +338,18 @@ class BorderNode extends Node implements IDropTarget {
                         childCenter = childRect.y + childRect.height / 2;
                         if (y >= pos && y < childCenter) {
                             const outlineRect = new Rect(childX, childRect.y - 2, childWidth, 3);
-                            dropInfo = new DropInfo(this, outlineRect, dockLocation, i, "flexlayout__outline_rect");
+                            dropInfo = new DropInfo(this, outlineRect, dockLocation, i, CLASSES.FLEXLAYOUT__OUTLINE_RECT);
                             break;
                         }
                         pos = childCenter;
                     }
                     if (dropInfo == null) {
                         const outlineRect = new Rect(childX, childRect.getBottom() - 2, childWidth, 3);
-                        dropInfo = new DropInfo(this, outlineRect, dockLocation, this._children.length, "flexlayout__outline_rect");
+                        dropInfo = new DropInfo(this, outlineRect, dockLocation, this._children.length, CLASSES.FLEXLAYOUT__OUTLINE_RECT);
                     }
                 } else {
                     const outlineRect = new Rect(this._tabHeaderRect!.x + 2, this._tabHeaderRect!.y + 1, 18, 3);
-                    dropInfo = new DropInfo(this, outlineRect, dockLocation, 0, "flexlayout__outline_rect");
+                    dropInfo = new DropInfo(this, outlineRect, dockLocation, 0, CLASSES.FLEXLAYOUT__OUTLINE_RECT);
                 }
             }
             if (!dragNode._canDockInto(dragNode, dropInfo)) {
@@ -316,7 +357,7 @@ class BorderNode extends Node implements IDropTarget {
             }
         } else if (this.getSelected() !== -1 && this._contentRect!.contains(x, y)) {
             const outlineRect = this._contentRect;
-            dropInfo = new DropInfo(this, outlineRect!, dockLocation, -1, "flexlayout__outline_rect");
+            dropInfo = new DropInfo(this, outlineRect!, dockLocation, -1, CLASSES.FLEXLAYOUT__OUTLINE_RECT);
             if (!dragNode._canDockInto(dragNode, dropInfo)) {
                 return undefined;
             }
@@ -370,18 +411,19 @@ class BorderNode extends Node implements IDropTarget {
         const minSize = useMinSize ? this.getMinSize() : 0;
         const outerRect = this._model._getOuterInnerRects().outer;
         const innerRect = this._model._getOuterInnerRects().inner;
+        const rootRow = this._model.getRoot();
         if (this._location === DockLocation.TOP) {
             pBounds[0] = outerRect.y + minSize;
-            pBounds[1] = innerRect.getBottom() - splitter.getHeight();
+            pBounds[1] = Math.max(pBounds[0], innerRect.getBottom() - splitter.getHeight() - rootRow.getMinHeight());
         } else if (this._location === DockLocation.LEFT) {
             pBounds[0] = outerRect.x + minSize;
-            pBounds[1] = innerRect.getRight() - splitter.getWidth();
+            pBounds[1] = Math.max(pBounds[0], innerRect.getRight() - splitter.getWidth() - rootRow.getMinWidth());
         } else if (this._location === DockLocation.BOTTOM) {
-            pBounds[0] = innerRect.y;
             pBounds[1] = outerRect.getBottom() - splitter.getHeight() - minSize;
+            pBounds[0] = Math.min(pBounds[1], innerRect.y + rootRow.getMinHeight());
         } else if (this._location === DockLocation.RIGHT) {
-            pBounds[0] = innerRect.x;
             pBounds[1] = outerRect.getRight() - splitter.getWidth() - minSize;
+            pBounds[0] = Math.min(pBounds[1], innerRect.x + rootRow.getMinWidth());
         }
         return pBounds;
     }

package/src/model/BorderSet.ts

@@ -46,8 +46,9 @@ class BorderSet {
     /** @hidden @internal */
     _layoutBorder(outerInnerRects: { inner: Rect; outer: Rect }, metrics: ILayoutMetrics) {
         const rect = outerInnerRects.outer;
-        const height = rect.height;
-        const width = rect.width;
+        const rootRow = this._model.getRoot();
+        let height = Math.max(0, rect.height - rootRow.getMinHeight());
+        let width = Math.max(0, rect.width - rootRow.getMinWidth());
         let sumHeight = 0;
         let sumWidth = 0;
         let adjustableHeight = 0;
@@ -57,43 +58,55 @@ class BorderSet {
 
         // sum size of borders to see they will fit
         for (const border of showingBorders) {
-            if (border.isShowing()) {
-                border._setAdjustedSize(border.getSize());
-                const visible = border.getSelected() !== -1;
-                if (border.getLocation().getOrientation() === Orientation.HORZ) {
-                    sumWidth += border.getBorderBarSize() + this._model.getSplitterSize();
-                    if (visible) {
-                        sumWidth += border.getSize();
-                        adjustableWidth += border.getSize();
-                    }
-                } else {
-                    sumHeight += border.getBorderBarSize() + this._model.getSplitterSize();
-                    if (visible) {
-                        sumHeight += border.getSize();
-                        adjustableHeight += border.getSize();
-                    }
+            border._setAdjustedSize(border.getSize());
+            const visible = border.getSelected() !== -1;
+            if (border.getLocation().getOrientation() === Orientation.HORZ) {
+                sumWidth += border.getBorderBarSize() ;
+                if (visible) {
+                    width -= this._model.getSplitterSize();
+                    sumWidth += border.getSize();
+                    adjustableWidth += border.getSize();
+                }
+            } else {
+                sumHeight += border.getBorderBarSize();
+                if (visible) {
+                    height -= this._model.getSplitterSize();
+                    sumHeight += border.getSize();
+                    adjustableHeight += border.getSize();
                 }
             }
         }
 
         // adjust border sizes if too large
         let j = 0;
+        let adjusted = false;
         while ((sumWidth > width && adjustableWidth > 0) || (sumHeight > height && adjustableHeight > 0)) {
             const border = showingBorders[j];
             if (border.getSelected() !== -1) {
                 // visible
                 const size = border._getAdjustedSize();
-                if (sumWidth > width && adjustableWidth > 0 && border.getLocation().getOrientation() === Orientation.HORZ && size > 0) {
+                if (sumWidth > width && adjustableWidth > 0 && border.getLocation().getOrientation() === Orientation.HORZ && size > 0
+                 && size > border.getMinSize()) {
                     border._setAdjustedSize(size - 1);
                     sumWidth--;
                     adjustableWidth--;
-                } else if (sumHeight > height && adjustableHeight > 0 && border.getLocation().getOrientation() === Orientation.VERT && size > 0) {
+                    adjusted = true;
+                } else if (sumHeight > height && adjustableHeight > 0 && border.getLocation().getOrientation() === Orientation.VERT && size > 0
+                && size > border.getMinSize()) {
                     border._setAdjustedSize(size - 1);
                     sumHeight--;
                     adjustableHeight--;
+                    adjusted = true;
                 }
             }
             j = (j + 1) % showingBorders.length;
+            if (j===0) {
+                if (adjusted) {
+                    adjusted = false;
+                } else {
+                    break;
+                }
+            }
         }
 
         showingBorders.forEach((border) => {

package/src/model/IJsonModel.ts

@@ -35,13 +35,17 @@ export interface IGlobalAttributes {
 	borderAutoSelectTabWhenOpen?: boolean; // default: true
 	borderBarSize?: number; // default: 0
 	borderClassName?: string;
+	borderEnableAutoHide?: boolean; // default: false
 	borderEnableDrop?: boolean; // default: true
 	borderMinSize?: number; // default: 0
 	borderSize?: number; // default: 200
 	enableEdgeDock?: boolean; // default: true
 	marginInsets?: IInsets; // default: {"top":0,"right":0,"bottom":0,"left":0}
 	rootOrientationVertical?: boolean; // default: false
+	splitterExtra?: number; // default: 0
 	splitterSize?: number; // default: -1
+	tabBorderHeight?: number; // default: -1
+	tabBorderWidth?: number; // default: -1
 	tabClassName?: string;
 	tabCloseType?: ICloseType; // default: 1
 	tabDragSpeed?: number; // default: 0.3
@@ -55,6 +59,7 @@ export interface IGlobalAttributes {
 	tabSetBorderInsets?: IInsets; // default: {"top":0,"right":0,"bottom":0,"left":0}
 	tabSetClassNameHeader?: string;
 	tabSetClassNameTabStrip?: string;
+	tabSetEnableClose?: boolean; // default: false
 	tabSetEnableDeleteWhenEmpty?: boolean; // default: true
 	tabSetEnableDivide?: boolean; // default: true
 	tabSetEnableDrag?: boolean; // default: true
@@ -81,6 +86,7 @@ export interface ITabSetAttributes {
 	classNameHeader?: string; //  - inherited from global tabSetClassNameHeader
 	classNameTabStrip?: string; //  - inherited from global tabSetClassNameTabStrip
 	config?: any;
+	enableClose?: boolean; // default: false - inherited from global tabSetEnableClose
 	enableDeleteWhenEmpty?: boolean; // default: true - inherited from global tabSetEnableDeleteWhenEmpty
 	enableDivide?: boolean; // default: true - inherited from global tabSetEnableDivide
 	enableDrag?: boolean; // default: true - inherited from global tabSetEnableDrag
@@ -102,6 +108,8 @@ export interface ITabSetAttributes {
 	width?: number;
 }
 export interface ITabAttributes {
+	borderHeight?: number; // default: -1 - inherited from global tabBorderHeight
+	borderWidth?: number; // default: -1 - inherited from global tabBorderWidth
 	className?: string; //  - inherited from global tabClassName
 	closeType?: ICloseType; // default: 1 - inherited from global tabCloseType
 	component?: string;
@@ -112,6 +120,7 @@ export interface ITabAttributes {
 	enableRename?: boolean; // default: true - inherited from global tabEnableRename
 	enableRenderOnDemand?: boolean; // default: true - inherited from global tabEnableRenderOnDemand
 	floating?: boolean; // default: false
+	helpText?: string;
 	icon?: string; //  - inherited from global tabIcon
 	id?: string;
 	name?: string; // default: "[Unnamed Tab]"
@@ -123,6 +132,7 @@ export interface IBorderAttributes {
 	barSize?: number; // default: 0 - inherited from global borderBarSize
 	className?: string; //  - inherited from global borderClassName
 	config?: any;
+	enableAutoHide?: boolean; // default: false - inherited from global borderEnableAutoHide
 	enableDrop?: boolean; // default: true - inherited from global borderEnableDrop
 	minSize?: number; // default: 0 - inherited from global borderMinSize
 	selected?: number; // default: -1

package/src/model/Model.ts

@@ -54,6 +54,7 @@ class Model {
         const attributeDefinitions = new AttributeDefinitions();
         // splitter
         attributeDefinitions.add("splitterSize", -1).setType(Attribute.NUMBER);
+        attributeDefinitions.add("splitterExtra", 0).setType(Attribute.NUMBER);
         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 })
@@ -69,6 +70,8 @@ class Model {
         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);
@@ -76,6 +79,7 @@ class Model {
         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("tabSetAutoSelectTab", true).setType(Attribute.BOOLEAN);
         attributeDefinitions.add("tabSetClassNameTabStrip", undefined).setType(Attribute.STRING);
         attributeDefinitions.add("tabSetClassNameHeader", undefined).setType(Attribute.STRING);
@@ -98,6 +102,8 @@ class Model {
         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;
     }
 
@@ -123,6 +129,9 @@ class Model {
     private _pointerFine: boolean;
     /** @hidden @internal */
     private _onCreateTabSet? : (tabNode?: TabNode) => ITabSetAttributes;
+    /** @hidden @internal */
+    private _showHiddenBorder: DockLocation;
+
 
     /**
      * 'private' constructor. Use the static method Model.fromJson(json) to create a model
@@ -134,6 +143,7 @@ class Model {
         this._idMap = {};
         this._borders = new BorderSet(this);
         this._pointerFine = true;
+        this._showHiddenBorder = DockLocation.CENTER;
     }
 
     /** @hidden @internal */
@@ -152,6 +162,16 @@ class Model {
         }
     }
 
+    /** @hidden @internal */
+    _getShowHiddenBorder() {
+        return this._showHiddenBorder;
+    }
+
+    /** @hidden @internal */
+    _setShowHiddenBorder(location: DockLocation) {
+        this._showHiddenBorder = location;
+    }
+
     /** @hidden @internal */
     _setActiveTabset(tabsetNode: TabSetNode | undefined) {
         this._activeTabSet = tabsetNode;
@@ -253,11 +273,29 @@ class Model {
             case Actions.DELETE_TAB: {
                 const node = this._idMap[action.data.node];
                 if (node instanceof TabNode) {
-                    delete this._idMap[action.data.node];
                     node._delete();
                 }
                 break;
             }
+            case Actions.DELETE_TABSET: {
+                const node = this._idMap[action.data.node];
+
+                if (node instanceof TabSetNode) {
+                    // first delete all child tabs that are closeable
+                    const children = [...node.getChildren()];
+                    children.forEach((child, i) => {
+                        if ((child as TabNode).isEnableClose()) {
+                            (child as TabNode)._delete();
+                        }
+                    });
+
+                    if (node.getChildren().length === 0) {
+                        node._delete();
+                    }
+                    this._tidy();
+                }
+                break;
+            }
             case Actions.FLOAT_TAB: {
                 const node = this._idMap[action.data.node];
                 if (node instanceof TabNode) {
@@ -405,6 +443,10 @@ class Model {
         return splitterSize;
     }
 
+    getSplitterExtra() {
+        return this._attributes.splitterExtra as number;
+    }
+
     isEnableEdgeDock() {
         return this._attributes.enableEdgeDock as boolean;
     }

package/src/model/RowNode.ts

@@ -5,6 +5,7 @@ import DockLocation from "../DockLocation";
 import DropInfo from "../DropInfo";
 import Orientation from "../Orientation";
 import Rect from "../Rect";
+import { CLASSES } from "../Types";
 import BorderNode from "./BorderNode";
 import IDraggable from "./IDraggable";
 import IDropTarget from "./IDropTarget";
@@ -381,7 +382,9 @@ class RowNode extends Node implements IDropTarget {
         // add tabset into empty root
         if (this === this._model.getRoot() && this._children.length === 0) {
             const callback = this._model._getOnCreateTabSet();
-            const child = new TabSetNode(this._model, callback ? callback() : {});
+            let attrs = callback ? callback() : {};
+            attrs = {...attrs, selected: -1};
+            const child = new TabSetNode(this._model, attrs);
             this._model._setActiveTabset(child);
             this._addChild(child);
         }
@@ -404,24 +407,24 @@ class RowNode extends Node implements IDropTarget {
                 const dockLocation = DockLocation.LEFT;
                 const outlineRect = dockLocation.getDockRect(this._rect);
                 outlineRect.width = outlineRect.width / 2;
-                dropInfo = new DropInfo(this, outlineRect, dockLocation, -1, "flexlayout__outline_rect_edge");
+                dropInfo = new DropInfo(this, outlineRect, dockLocation, -1, CLASSES.FLEXLAYOUT__OUTLINE_RECT_EDGE);
             } else if (x > this._rect.getRight() - margin && yy > h / 2 - half && yy < h / 2 + half) {
                 const dockLocation = DockLocation.RIGHT;
                 const outlineRect = dockLocation.getDockRect(this._rect);
                 outlineRect.width = outlineRect.width / 2;
                 outlineRect.x += outlineRect.width;
-                dropInfo = new DropInfo(this, outlineRect, dockLocation, -1, "flexlayout__outline_rect_edge");
+                dropInfo = new DropInfo(this, outlineRect, dockLocation, -1, CLASSES.FLEXLAYOUT__OUTLINE_RECT_EDGE);
             } else if (y < this._rect.y + margin && xx > w / 2 - half && xx < w / 2 + half) {
                 const dockLocation = DockLocation.TOP;
                 const outlineRect = dockLocation.getDockRect(this._rect);
                 outlineRect.height = outlineRect.height / 2;
-                dropInfo = new DropInfo(this, outlineRect, dockLocation, -1, "flexlayout__outline_rect_edge");
+                dropInfo = new DropInfo(this, outlineRect, dockLocation, -1, CLASSES.FLEXLAYOUT__OUTLINE_RECT_EDGE);
             } else if (y > this._rect.getBottom() - margin && xx > w / 2 - half && xx < w / 2 + half) {
                 const dockLocation = DockLocation.BOTTOM;
                 const outlineRect = dockLocation.getDockRect(this._rect);
                 outlineRect.height = outlineRect.height / 2;
                 outlineRect.y += outlineRect.height;
-                dropInfo = new DropInfo(this, outlineRect, dockLocation, -1, "flexlayout__outline_rect_edge");
+                dropInfo = new DropInfo(this, outlineRect, dockLocation, -1, CLASSES.FLEXLAYOUT__OUTLINE_RECT_EDGE);
             }
 
             if (dropInfo !== undefined) {

package/src/model/TabNode.ts

@@ -26,6 +26,7 @@ class TabNode extends Node implements IDraggable {
         attributeDefinitions.add("id", undefined).setType(Attribute.STRING);
 
         attributeDefinitions.add("name", "[Unnamed Tab]").setType(Attribute.STRING);
+        attributeDefinitions.add("helpText", undefined).setType(Attribute.STRING);
         attributeDefinitions.add("component", undefined).setType(Attribute.STRING);
         attributeDefinitions.add("config", undefined).setType("any");
         attributeDefinitions.add("floating", false).setType(Attribute.BOOLEAN);
@@ -38,6 +39,8 @@ class TabNode extends Node implements IDraggable {
         attributeDefinitions.addInherited("icon", "tabIcon").setType(Attribute.STRING);
         attributeDefinitions.addInherited("enableRenderOnDemand", "tabEnableRenderOnDemand").setType(Attribute.BOOLEAN);
         attributeDefinitions.addInherited("enableFloat", "tabEnableFloat").setType(Attribute.BOOLEAN);
+        attributeDefinitions.addInherited("borderWidth", "tabBorderWidth").setType(Attribute.NUMBER);
+        attributeDefinitions.addInherited("borderHeight", "tabBorderHeight").setType(Attribute.NUMBER);
         return attributeDefinitions;
     }
 
@@ -89,6 +92,10 @@ class TabNode extends Node implements IDraggable {
         return this._getAttr("name") as string;
     }
 
+    getHelpText() {
+        return this._getAttr("helpText") as string | undefined;
+    }
+
     getComponent() {
         return this._getAttr("component") as string | undefined;
     }
@@ -195,7 +202,16 @@ class TabNode extends Node implements IDraggable {
     _setWindow(window: Window | undefined) {
         this._window = window;
     }
+    
+    /** @hidden @internal */
+    _setBorderWidth(width: number) {
+        this._attributes.borderWidth = width;
+    }
 
+    /** @hidden @internal */
+    _setBorderHeight(height: number) {
+        this._attributes.borderHeight = height;
+    }
 
     /** @hidden @internal */
     static getAttributeDefinitions() {