flexlayout-react 0.5.16 → 0.5.20

package/src/DragDrop.ts

@@ -23,6 +23,10 @@ class DragDrop {
     /** @hidden @internal */
     private _glass: HTMLDivElement | undefined;
     /** @hidden @internal */
+    private _defaultGlassCursor: string;
+    /** @hidden @internal */
+    private _glassCursorOverride: string | undefined;
+    /** @hidden @internal */
     private _manualGlassManagement: boolean = false;
     /** @hidden @internal */
     private _lastClick: number;
@@ -59,6 +63,8 @@ class DragDrop {
             this._glass.style.outline = "none";
         }
 
+        this._defaultGlassCursor = "default";
+
         this._onMouseMove = this._onMouseMove.bind(this);
         this._onMouseUp = this._onMouseUp.bind(this);
         this._onKeyPress = this._onKeyPress.bind(this);
@@ -111,9 +117,26 @@ class DragDrop {
             this._glassShowing = false;
             this._document = undefined;
             this._rootElement = undefined;
+            this.setGlassCursorOverride(undefined);
         }
     }
 
+    /** @hidden @internal */
+    _updateGlassCursor() {
+        this._glass!.style.cursor = this._glassCursorOverride ?? this._defaultGlassCursor;
+    }
+
+    /** @hidden @internal */
+    _setDefaultGlassCursor(cursor: string) {
+        this._defaultGlassCursor = cursor;
+        this._updateGlassCursor()
+    }
+
+    setGlassCursorOverride(cursor: string | undefined) {
+        this._glassCursorOverride = cursor;
+        this._updateGlassCursor()
+    }
+
     startDrag(
         event: Event | React.MouseEvent<HTMLDivElement, MouseEvent> | React.TouchEvent<HTMLDivElement> | React.DragEvent<Element> | undefined,
         fDragStart: ((pos: { clientX: number; clientY: number }) => boolean) | undefined,
@@ -154,14 +177,14 @@ class DragDrop {
             this._startX = posEvent.clientX;
             this._startY = posEvent.clientY;
             if (!window.matchMedia || window.matchMedia("(pointer: fine)").matches) {
-                this._glass!.style.cursor = getComputedStyle(event.target as Element).cursor;
+                this._setDefaultGlassCursor(getComputedStyle(event.target as Element).cursor);
             }
             this._stopPropagation(event);
             this._preventDefault(event);
         } else {
             this._startX = 0;
             this._startY = 0;
-            this._glass!.style.cursor = "default";
+            this._setDefaultGlassCursor("default");
         }
 
         this._dragging = false;
@@ -274,7 +297,7 @@ class DragDrop {
         if (!this._dragging && (Math.abs(this._startX - posEvent.clientX) > 5 || Math.abs(this._startY - posEvent.clientY) > 5)) {
             this._dragging = true;
             if (this._fDragStart) {
-                this._glass!.style.cursor = "move";
+                this._setDefaultGlassCursor("move");
                 this._dragging = this._fDragStart({ clientX: this._startX, clientY: this._startY });
             }
         }

package/src/PopupMenu.tsx

@@ -1,6 +1,8 @@
 import * as React from "react";
 import * as ReactDOM from "react-dom";
+import { DragDrop } from ".";
 import TabNode from "./model/TabNode";
+import { CLASSES } from "./Types";
 
 /** @hidden @internal */
 export function showPopup(
@@ -15,7 +17,7 @@ export function showPopup(
     const layoutRect = layoutDiv.getBoundingClientRect();
 
     const elm = currentDocument.createElement("div");
-    elm.className = classNameMapper("flexlayout__popup_menu_container");
+    elm.className = classNameMapper(CLASSES.FLEXLAYOUT__POPUP_MENU_CONTAINER);
     if (triggerRect.left < layoutRect.left + layoutRect.width / 2) {
         elm.style.left = triggerRect.left - layoutRect.left + "px";
     } else {
@@ -27,27 +29,37 @@ export function showPopup(
     } else {
         elm.style.bottom = layoutRect.bottom - triggerRect.bottom + "px";
     }
+    DragDrop.instance.addGlass(() => onHide());
+    DragDrop.instance.setGlassCursorOverride("default");
+
     layoutDiv.appendChild(elm);
 
     const onHide = () => {
+        DragDrop.instance.hideGlass();
         layoutDiv.removeChild(elm);
         ReactDOM.unmountComponentAtNode(elm);
-        elm.removeEventListener("mouseup", onElementMouseUp);
-        currentDocument.removeEventListener("mouseup", onDocMouseUp);
+        elm.removeEventListener("mousedown", onElementMouseDown);
+        currentDocument.removeEventListener("mousedown", onDocMouseDown);
     };
 
-    const onElementMouseUp = (event: Event) => {
+    const onElementMouseDown = (event: Event) => {
         event.stopPropagation();
     };
 
-    const onDocMouseUp = (event: Event) => {
+    const onDocMouseDown = (event: Event) => {
         onHide();
     };
 
-    elm.addEventListener("mouseup", onElementMouseUp);
-    currentDocument.addEventListener("mouseup", onDocMouseUp);
+    elm.addEventListener("mousedown", onElementMouseDown);
+    currentDocument.addEventListener("mousedown", onDocMouseDown);
 
-    ReactDOM.render(<PopupMenu currentDocument={currentDocument} onSelect={onSelect} onHide={onHide} items={items} classNameMapper={classNameMapper} />, elm);
+    ReactDOM.render(<PopupMenu
+        currentDocument={currentDocument}
+        onSelect={onSelect}
+        onHide={onHide}
+        items={items}
+        classNameMapper={classNameMapper}
+    />, elm);
 }
 
 /** @hidden @internal */
@@ -69,11 +81,20 @@ const PopupMenu = (props: IPopupMenuProps) => {
         event.stopPropagation();
     };
 
-    const itemElements = items.map((item) => (
-        <div key={item.index} className={classNameMapper("flexlayout__popup_menu_item")} onClick={(event) => onItemClick(item, event)} title={item.node.getHelpText()}>
+    const itemElements = items.map((item, i) => (
+        <div key={item.index}
+            className={classNameMapper(CLASSES.FLEXLAYOUT__POPUP_MENU_ITEM)}
+            data-layout-path={"/popup-menu/tb" + i}
+            onClick={(event) => onItemClick(item, event)}
+            title={item.node.getHelpText()}>
             {item.node._getRenderedName()}
         </div>
     ));
 
-    return <div className={classNameMapper("flexlayout__popup_menu")}>{itemElements}</div>;
+    return (
+        <div className={classNameMapper(CLASSES.FLEXLAYOUT__POPUP_MENU)}
+        data-layout-path="/popup-menu"
+        >
+            {itemElements}
+        </div>);
 };

package/src/Rect.ts

@@ -18,8 +18,8 @@ class Rect {
     }
 
     static fromElement(element: Element) {
-      let {x, y, width, height} = element.getBoundingClientRect();
-      return new Rect(x, y, width, height);
+        let { x, y, width, height } = element.getBoundingClientRect();
+        return new Rect(x, y, width, height);
     }
 
     clone() {
@@ -42,6 +42,10 @@ class Rect {
         return this.x + this.width;
     }
 
+    getCenter() {
+        return { x: this.x + this.width / 2, y: this.y + this.height / 2 };
+    }
+
     positionElement(element: HTMLElement, position?: string) {
         this.styleWithPosition(element.style, position);
     }

package/src/Types.ts

@@ -9,6 +9,8 @@ export enum CLASSES {
     FLEXLAYOUT__BORDER_BUTTON_TRAILING = "flexlayout__border_button_trailing",
     FLEXLAYOUT__BORDER_BUTTON__SELECTED = "flexlayout__border_button--selected",
     FLEXLAYOUT__BORDER_BUTTON__UNSELECTED = "flexlayout__border_button--unselected",
+    FLEXLAYOUT__BORDER_TOOLBAR_BUTTON_OVERFLOW = "flexlayout__border_toolbar_button_overflow",
+    FLEXLAYOUT__BORDER_TOOLBAR_BUTTON_OVERFLOW_ = "flexlayout__border_toolbar_button_overflow_",
 
     FLEXLAYOUT__BORDER_INNER = "flexlayout__border_inner",
     FLEXLAYOUT__BORDER_INNER_ = "flexlayout__border_inner_",
@@ -34,8 +36,10 @@ export enum CLASSES {
     FLEXLAYOUT__LAYOUT = "flexlayout__layout",
 
     FLEXLAYOUT__OUTLINE_RECT = "flexlayout__outline_rect",
+    FLEXLAYOUT__OUTLINE_RECT_EDGE = "flexlayout__outline_rect_edge",
 
     FLEXLAYOUT__SPLITTER = "flexlayout__splitter",
+    FLEXLAYOUT__SPLITTER_EXTRA = "flexlayout__splitter_extra",
     FLEXLAYOUT__SPLITTER_ = "flexlayout__splitter_",
     FLEXLAYOUT__SPLITTER_BORDER = "flexlayout__splitter_border",
     FLEXLAYOUT__SPLITTER_DRAG = "flexlayout__splitter_drag",
@@ -77,4 +81,7 @@ export enum CLASSES {
     FLEXLAYOUT__TAB_TOOLBAR_STICKY_BUTTONS_CONTAINER = "flexlayout__tab_toolbar_sticky_buttons_container",
     FLEXLAYOUT__TAB_TOOLBAR_BUTTON_CLOSE = "flexlayout__tab_toolbar_button-close",
 
+    FLEXLAYOUT__POPUP_MENU_CONTAINER = "flexlayout__popup_menu_container",
+    FLEXLAYOUT__POPUP_MENU_ITEM = "flexlayout__popup_menu_item",
+    FLEXLAYOUT__POPUP_MENU = "flexlayout__popup_menu",
 }

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
@@ -104,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;
@@ -114,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]"
@@ -125,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);
@@ -99,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;
     }
 
@@ -124,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
@@ -135,6 +143,7 @@ class Model {
         this._idMap = {};
         this._borders = new BorderSet(this);
         this._pointerFine = true;
+        this._showHiddenBorder = DockLocation.CENTER;
     }
 
     /** @hidden @internal */
@@ -153,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;
@@ -262,13 +281,17 @@ class Model {
                 const node = this._idMap[action.data.node];
 
                 if (node instanceof TabSetNode) {
-                    // first delete all child tabs
+                    // first delete all child tabs that are closeable
                     const children = [...node.getChildren()];
                     children.forEach((child, i) => {
-                        (child as TabNode)._delete();
+                        if ((child as TabNode).isEnableClose()) {
+                            (child as TabNode)._delete();
+                        }
                     });
 
-                    node._delete();
+                    if (node.getChildren().length === 0) {
+                        node._delete();
+                    }
                     this._tidy();
                 }
                 break;
@@ -420,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) {