flexlayout-react 0.5.15 → 0.5.19

package/ChangeLog.txt

@@ -1,3 +1,29 @@
+0.5.19
+Added onRenderFloatingTabPlaceholder callback prop for rendering the floating tab placeholder.
+Changed style sheets to use CSS custom properties (variables) for several values.
+Fix selected index in single empty tabset.
+Added onContextMenu callback prop for handling context menus on tabs and tabsets.
+Added onAuxMouseClick callback prop for handling mouse clicks on tabs and tabsets 
+with alt, meta, shift keys, also handles center mouse clicks
+
+0.5.18
+Added onRenderDragRect callback prop for rendering the drag rectangles
+New border attribute: enableAutoHide, to hide border if it has zero tabs
+
+0.5.17
+New global option, splitterExtra, to allow splitters to have an extended hit test areas. 
+This makes it easier to use narrow splitters.
+Added new TabNode attributes: borderWidth and borderHeight, these allow for individual border sizes for certain tabs.
+Fix for #263 - borders splitters not taking minimum size of center into account
+Improved algorithm for finding drop location 
+Additional parameter: cursor, for onTabDrag
+
+0.5.16
+Added 'New Features' layout to demo.
+New tab attribute, helpText, to show tooltip over tabs.
+New model action, deleteTabset, to delete a tabset and all it's child tabs.
+New tabset attribute, enableClose, to close the tabset
+
 0.5.15
 Added new Layout prop: onTabDrag that allows tab dragging to be intercepted.
 Added example of onTabDrag in demo app, example shows a list where tabs can be dragged into, 

package/README.md

@@ -6,7 +6,7 @@ FlexLayout is a layout manager that arranges React components in multiple tab se
 
 [Run the Demo](https://rawgit.com/caplin/FlexLayout/demos/demos/v0.5/demo/index.html)
 
-Try it now using [JSFiddle](https://jsfiddle.net/9x6hecdw/)
+Try it now using [JSFiddle](https://jsfiddle.net/7oe4q2pc/)
 
 <!-- [API Doc](./typedoc/index.html) -->
 
@@ -66,25 +66,39 @@ Include the light, gray or dark style in your html:
 The `<Layout>` component renders the tabsets and splitters, it takes the following props:
 
 
-| Prop            | Required/Optional | Description       |
-| --------------- |:-----------------:| ----------------- |
-| model           | required          | the layout model  |
-| factory         | required          | a factory function for creating React components |
-| font        | optional          | the tab font (overrides value in css). Example: font={{size:"12px", style:"italic"}}|
-| iconFactory     | optional          | a factory function for creating icon components for tab bar buttons |
-| titleFactory    | optional          | a factory function for creating title components for tab bar buttons |
-| icons           | optional          | object mapping keys among `close`, `maximize`, `restore`, `more`, `popout` to React nodes to use in place of the default icons |
-| onAction        | optional          | function called whenever the layout generates an action to update the model (allows for intercepting actions before they are dispatched to the model, for example, asking the user to confirm a tab close.) Returning `undefined` from the function will halt the action, otherwise return the action to continue |
-| onRenderTab     | optional          | function called when rendering a tab, allows leading (icon), content section, buttons and name used in overflow menu to be customized |
-| onRenderTabSet  | optional          | function called when rendering a tabset, allows header and buttons to be customized |
-| onModelChange   | optional          | function called when model has changed |
-| onExternalDrag  | optional          | function called when an external object (not a tab) gets dragged onto the layout, with a single `dragenter` argument. Should return either `undefined` to reject the drag/drop or an object with keys `dragText`, `json`, and optionally `onDrop`, to create a tab via drag (similar to a call to `addTabToTabSet`). Function `onDrop` is passed the added tab `Node` and the `drop` `DragEvent`, unless the drag was canceled. |
-| classNameMapper | optional          | function called with default css class name, return value is class name that will be used. Mainly for use with css modules.|
-| i18nMapper      | optional          | function called for each I18nLabel to allow user translation, currently used for tab and tabset move messages, return undefined to use default values |
-| supportsPopout  | optional          | if left undefined will do simple check based on userAgent |
-| popoutURL      | optional          | URL of popout window relative to origin, defaults to popout.html |
-| realtimeResize      | optional          | boolean value, defaults to false, resize tabs as splitters are dragged. Warning: this can cause resizing to become choppy when tabs are slow to draw |
-| onTabDrag       | optional          | function called while dragging a tab, whether from the layout or using `addTabWithDragAndDrop`. Called with the `TabNode` being dragged / the tab json from `addTabWithDragAndDrop`, the `TabNode` being dragged over, the x and y coordinates relative to the dragged-over tab, and the `DockLocation` that would be used. Should return undefined for default behavior, or an object containing `x`, `y`, `width`, `height`, `callback` fields. Coordinates are in pixels relative to the dragged-over tab, and `callback` will be called with the same arguments if the tab is dropped. If `callback` is called, the layout does not do anything else on drop. |
+#### Required props:
+
+
+| Prop            | Description       |
+| --------------- | ----------------- |
+| model           | the layout model  |
+| factory         | a factory function for creating React components |
+
+#### Optional props:
+
+
+| Prop            | Description       |
+| --------------- | ----------------- |
+| font            | the tab font (overrides value in css). Example: font={{size:"12px", style:"italic"}}|
+| icons           | object mapping keys among `close`, `maximize`, `restore`, `more`, `popout` to React nodes to use in place of the default icons |
+| onAction        | function called whenever the layout generates an action to update the model (allows for intercepting actions before they are dispatched to the model, for example, asking the user to confirm a tab close.) Returning `undefined` from the function will halt the action, otherwise return the action to continue |
+| onRenderTab     | function called when rendering a tab, allows leading (icon), content section, buttons and name used in overflow menu to be customized |
+| onRenderTabSet  | function called when rendering a tabset, allows header and buttons to be customized |
+| onModelChange   | function called when model has changed |
+| onExternalDrag  | function called when an external object (not a tab) gets dragged onto the layout, with a single `dragenter` argument. Should return either `undefined` to reject the drag/drop or an object with keys `dragText`, `json`Drop`, to create a tab via drag (similar to a call to `addTabToTabSet`). Function `onDrop` is passed the added tab `Node` and the `drop` `DragEvent`, unless the drag was canceled. |
+| classNameMapper | function called with default css class name, return value is class name that will be used. Mainly for use with css modules.|
+| i18nMapper      | function called for each I18nLabel to allow user translation, currently used for tab and tabset move messages, return undefined to use default values |
+| supportsPopout  | if left undefined will do simple check based on userAgent |
+| popoutURL       | URL of popout window relative to origin, defaults to popout.html |
+| realtimeResize  | boolean value, defaults to false, resize tabs as splitters are dragged. Warning: this can cause resizing to become choppy when tabs are slow to draw |
+| onTabDrag       | function called while dragging a tab, whether from the layout or using `addTabWithDragAndDrop`. Called with the `TabNode` being dragged / the tab json from `addTabWithDragAndDrop`, the `TabNode` being dragged over, the x and y coordinates relative to the dragged-over tab, and the `DockLocation` that would be used. Should return undefined for default behavior, or an object containing `x`, `y`, `width`, `height`, `callback`, `cursor` fields. Coordinates are in pixels relative to the dragged-over tab, and `callback` will be called with the same arguments if the tab is dropped. `cursor` is an optional string field that should contain a CSS cursor value, such as `copy` or `row-resize`. If `callback` is called, the layout does not perform its default behavior on drop. |
+| onRenderDragRect | callback for rendering the drag rectangles |
+| onRenderFloatingTabPlaceholder | callback for rendering the floating tab placeholder |
+| onContextMenu    | callback for handling context actions on tabs and tabsets |
+| onAuxMouseClick  | callback for handling mouse clicks on tabs and tabsets with alt, meta, shift keys, also handles center mouse clicks |
+| iconFactory      | a factory function for creating icon components for tab bar buttons. <br/><br/> NOTE: for greater customization of the tab use onRenderTab instead of this callback |
+| titleFactory     | a factory function for creating title components for tab bar buttons. <br /><br /> NOTE: for greater customization of the tab use onRenderTab instead of this callback  |
+
 
 The model is tree of Node objects that define the structure of the layout.
 
@@ -104,38 +118,38 @@ render() {
 
 ```javascript
 var json = {
-	global: {},
-	borders: [],
-	layout:{
-		"type": "row",
-		"weight": 100,
-		"children": [
-			{
-				"type": "tabset",
-				"weight": 50,
-				"selected": 0,
-				"children": [
-					{
-						"type": "tab",
-						"name": "FX",
-						"component":"grid",
-					}
-				]
-			},
-			{
-				"type": "tabset",
-				"weight": 50,
-				"selected": 0,
-				"children": [
-					{
-						"type": "tab",
-						"name": "FI",
-						"component":"grid",
-					}
-				]
-			}
-		]
-	}
+    global: {},
+    borders: [],
+    layout:{
+        "type": "row",
+        "weight": 100,
+        "children": [
+            {
+                "type": "tabset",
+                "weight": 50,
+                "selected": 0,
+                "children": [
+                    {
+                        "type": "tab",
+                        "name": "FX",
+                        "component":"grid",
+                    }
+                ]
+            },
+            {
+                "type": "tabset",
+                "weight": 50,
+                "selected": 0,
+                "children": [
+                    {
+                        "type": "tab",
+                        "name": "FI",
+                        "component":"grid",
+                    }
+                ]
+            }
+        ]
+    }
 };
 ```
 
@@ -173,7 +187,7 @@ ReactDOM.render(<Main/>, document.getElementById("container"));
 
 The above code would render two tabsets horizontally each containing a single tab that hosts a button component. The tabs could be moved and resized by dragging and dropping. Additional grids could be added to the layout by sending actions to the model.
 
-Try it now using [JSFiddle](https://jsfiddle.net/9x6hecdw/) 
+Try it now using [JSFiddle](https://jsfiddle.net/7oe4q2pc/) 
 
 A simple Create React App (CRA) example (using typescript) can be found here:
 
@@ -207,50 +221,50 @@ existing layouts by dragging/dropping and adding nodes then press the 'Show Layo
 
 example borders section:
 ```
-	"borders": [
-		 {
-		    "type":"border",
-		 	"location": "left",
-			"children": [
-				{
-					"type": "tab",
-					"enableClose":false,
-					"name": "Navigation",
-					"component": "grid",
-				}
-			]
-		},
-		{
-		    "type":"border",
-		 	"location": "right",
-			"children": [
-				{
-					"type": "tab",
-					"enableClose":false,
-					"name": "Options",
-					"component": "grid",
-				}
-			]
-		},
-		{
-		    "type":"border",
-			"location": "bottom",
-			"children": [
-				{
-					"type": "tab",
-					"enableClose":false,
-					"name": "Activity Blotter",
-					"component": "grid",
-				},
-				{
-					"type": "tab",
-					"enableClose":false,
-					"name": "Execution Blotter",
-					"component": "grid",
-				}
-			]
-		}
-	]
+    "borders": [
+         {
+            "type":"border",
+            "location": "left",
+            "children": [
+                {
+                    "type": "tab",
+                    "enableClose":false,
+                    "name": "Navigation",
+                    "component": "grid",
+                }
+            ]
+        },
+        {
+            "type":"border",
+            "location": "right",
+            "children": [
+                {
+                    "type": "tab",
+                    "enableClose":false,
+                    "name": "Options",
+                    "component": "grid",
+                }
+            ]
+        },
+        {
+            "type":"border",
+            "location": "bottom",
+            "children": [
+                {
+                    "type": "tab",
+                    "enableClose":false,
+                    "name": "Activity Blotter",
+                    "component": "grid",
+                },
+                {
+                    "type": "tab",
+                    "enableClose":false,
+                    "name": "Execution Blotter",
+                    "component": "grid",
+                }
+            ]
+        }
+    ]
 ```
 
 To control where nodes can be dropped you can add a callback function to the model:
@@ -322,6 +336,7 @@ Attributes allowed in the 'global' element
 | Attribute | Default | Description  |
 | ------------- |:-------------:| -----|
 | splitterSize | 8 | width in pixels of all splitters between tabsets/borders |
+| splitterExtra | 0 | additional width in pixels of the splitter hit test area |
 | enableEdgeDock | true | |
 | tabEnableClose | true | allow user to close all tabs via close button |
 | tabCloseType | 1 | see values in ICloseType |
@@ -332,11 +347,14 @@ Attributes allowed in the 'global' element
 | tabIcon | null | |
 | tabEnableRenderOnDemand | true | whether to avoid rendering component until tab is visible |
 | tabDragSpeed | 0.3 | CSS transition speed of drag outlines (in seconds) |
+| tabBorderWidth | -1 | width when added to border, -1 will use border size |
+| tabBorderHeight | -1 | height when added to border, -1 will use border size |
 | tabSetEnableDeleteWhenEmpty | true | |
 | tabSetEnableDrop | true | allow user to drag tabs into all tabsets |
 | tabSetEnableDrag | true | allow user to drag tabs out of all tabsets |
 | tabSetEnableDivide | true | allow user to drag tabs to region of all tabsets, splitting into new tabset |
 | tabSetEnableMaximize | true | allow user to maximize all tabsets to fill view via maximize button |
+| tabSetEnableClose | false | allow user to close all tabsets via close button |
 | tabSetAutoSelectTab | true | whether to select new/moved tabs in all tabsets |
 | tabSetClassNameTabStrip | null | height in pixels of tab strips in all tabsets |
 | tabSetClassNameHeader | null | |
@@ -344,6 +362,7 @@ Attributes allowed in the 'global' element
 | tabSetHeaderHeight | 0 | height of tabset header in pixels; if left as 0 then the value will be calculated from the current fontSize |
 | tabSetTabStripHeight | 0 | height of tabset tab bar in pixels; if left as 0 then the value will be calculated from the current fontSize |
 | borderBarSize | 0 | size of the border bars in pixels; if left as 0 then the value will be calculated from the current fontSize |
+| borderEnableAutoHide | false | hide border if it has zero tabs |
 | borderEnableDrop | true | allow user to drag tabs into this border |
 | borderAutoSelectTabWhenOpen | true | whether to select new/moved tabs in border when the border is already open |
 | borderAutoSelectTabWhenClosed | false | whether to select new/moved tabs in border when the border is curently closed |
@@ -382,6 +401,7 @@ Inherited defaults will take their value from the associated global attributes (
 | component | *required* | string identifying which component to run (for factory) |
 | config | null | a place to hold json config for the hosted component |
 | id | auto generated | |
+| helpText | *optional* | An optional help text for the tab to be displayed upon tab hover. |
 | enableClose | *inherited* | allow user to close tab via close button |
 | closeType | *inherited* | see values in ICloseType |
 | enableDrag | *inherited* | allow user to drag tab to new location |
@@ -391,6 +411,8 @@ Inherited defaults will take their value from the associated global attributes (
 | className | *inherited* | |
 | icon | *inherited* | |
 | enableRenderOnDemand | *inherited* | whether to avoid rendering component until tab is visible |
+| borderWidth | *inherited* | width when added to border, -1 will use border size |
+| borderHeight | *inherited* | height when added to border, -1 will use border size |
 
 Tab nodes have a getExtraData() method that initially returns an empty object, this is the place to 
 add extra data to a tab node that will not be saved.
@@ -414,6 +436,7 @@ Note: tabsets can be dynamically created as tabs are moved and deleted when all
 | config | null | a place to hold json config used in your own code |
 | selected | 0 | index of selected/visible tab in tabset |
 | maximized | false | whether tabset is currently maximized to fill view |
+| enableClose | false | allow user to close tabset via a close button |
 | id | auto generated | |
 | children | *required* | a list of tab nodes |
 | enableDeleteWhenEmpty | *inherited* | |
@@ -447,6 +470,7 @@ Inherited defaults will take their value from the associated global attributes (
 | id | auto generated | border_ + border name e.g. border_left |
 | config | null | a place to hold json config used in your own code |
 | show | true | show/hide this border |
+| enableAutoHide | false | hide border if it has zero tabs |
 | children | *required* | a list of tab nodes |
 | barSize | *inherited* | size of this border's bar in pixels; if left as 0 then the value will be calculated from the current fontSize |
 | enableDrop | *inherited* | |

package/declarations/DragDrop.d.ts

@@ -4,6 +4,7 @@ declare class DragDrop {
     addGlass(fCancel: ((wasDragging: boolean) => void) | undefined): void;
     resizeGlass(): void;
     hideGlass(): void;
+    setGlassCursorOverride(cursor: string | undefined): void;
     startDrag(event: Event | React.MouseEvent<HTMLDivElement, MouseEvent> | React.TouchEvent<HTMLDivElement> | React.DragEvent<Element> | undefined, fDragStart: ((pos: {
         clientX: number;
         clientY: number;

package/declarations/I18nLabel.d.ts

@@ -1,5 +1,6 @@
 export declare enum I18nLabel {
     Close_Tab = "Close",
+    Close_Tabset = "Close tabset",
     Move_Tab = "Move: ",
     Move_Tabset = "Move tabset",
     Maximize = "Maximize tabset",

package/declarations/Rect.d.ts

@@ -10,6 +10,10 @@ declare class Rect {
     equals(rect: Rect): boolean;
     getBottom(): number;
     getRight(): number;
+    getCenter(): {
+        x: number;
+        y: number;
+    };
     positionElement(element: HTMLElement, position?: string): void;
     styleWithPosition(style: Record<string, any>, position?: string): Record<string, any>;
     contains(x: number, y: number): boolean;

package/declarations/Types.d.ts

@@ -8,6 +8,8 @@ export declare 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_",
     FLEXLAYOUT__BORDER_INNER_TAB_CONTAINER = "flexlayout__border_inner_tab_container",
@@ -25,7 +27,9 @@ export declare enum CLASSES {
     FLEXLAYOUT__FLOATING_WINDOW_TAB = "flexlayout__floating_window_tab",
     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",
@@ -57,5 +61,9 @@ export declare enum CLASSES {
     FLEXLAYOUT__TAB_TOOLBAR_BUTTON = "flexlayout__tab_toolbar_button",
     FLEXLAYOUT__TAB_TOOLBAR_BUTTON_ = "flexlayout__tab_toolbar_button-",
     FLEXLAYOUT__TAB_TOOLBAR_BUTTON_FLOAT = "flexlayout__tab_toolbar_button-float",
-    FLEXLAYOUT__TAB_TOOLBAR_STICKY_BUTTONS_CONTAINER = "flexlayout__tab_toolbar_sticky_buttons_container"
+    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/declarations/model/Actions.d.ts

@@ -7,6 +7,7 @@ declare class Actions {
     static ADD_NODE: string;
     static MOVE_NODE: string;
     static DELETE_TAB: string;
+    static DELETE_TABSET: string;
     static RENAME_TAB: string;
     static SELECT_TAB: string;
     static SET_ACTIVE_TABSET: string;
@@ -24,7 +25,7 @@ declare 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;
     /**
@@ -34,32 +35,38 @@ declare 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;
     /**
      * 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;
+    /**
+     * 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;
     /**
      * 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;
     /**
      * 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;
     /**
      * 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;
     /**
@@ -68,7 +75,7 @@ declare 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;
@@ -82,20 +89,20 @@ declare 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;
     /**
      * 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;
     /**
      * 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;
     static floatTab(nodeId: string): Action;

package/declarations/model/BorderNode.d.ts

@@ -14,7 +14,7 @@ declare class BorderNode extends Node implements IDropTarget {
     isAutoSelectTab(whenOpen?: boolean): boolean;
     getClassName(): string | undefined;
     getBorderBarSize(): number;
-    getSize(): number;
+    getSize(): any;
     getMinSize(): number;
     getSelected(): number;
     getSelectedNode(): Node | undefined;
@@ -29,6 +29,7 @@ declare class BorderNode extends Node implements IDropTarget {
     getConfig(): any;
     isMaximized(): boolean;
     isShowing(): boolean;
+    isAutoHide(): boolean;
     toJson(): IJsonBorderNode;
 }
 export default BorderNode;

package/declarations/model/IJsonModel.d.ts

@@ -31,13 +31,17 @@ export interface IGlobalAttributes {
     borderAutoSelectTabWhenOpen?: boolean;
     borderBarSize?: number;
     borderClassName?: string;
+    borderEnableAutoHide?: boolean;
     borderEnableDrop?: boolean;
     borderMinSize?: number;
     borderSize?: number;
     enableEdgeDock?: boolean;
     marginInsets?: IInsets;
     rootOrientationVertical?: boolean;
+    splitterExtra?: number;
     splitterSize?: number;
+    tabBorderHeight?: number;
+    tabBorderWidth?: number;
     tabClassName?: string;
     tabCloseType?: ICloseType;
     tabDragSpeed?: number;
@@ -51,6 +55,7 @@ export interface IGlobalAttributes {
     tabSetBorderInsets?: IInsets;
     tabSetClassNameHeader?: string;
     tabSetClassNameTabStrip?: string;
+    tabSetEnableClose?: boolean;
     tabSetEnableDeleteWhenEmpty?: boolean;
     tabSetEnableDivide?: boolean;
     tabSetEnableDrag?: boolean;
@@ -77,6 +82,7 @@ export interface ITabSetAttributes {
     classNameHeader?: string;
     classNameTabStrip?: string;
     config?: any;
+    enableClose?: boolean;
     enableDeleteWhenEmpty?: boolean;
     enableDivide?: boolean;
     enableDrag?: boolean;
@@ -98,6 +104,8 @@ export interface ITabSetAttributes {
     width?: number;
 }
 export interface ITabAttributes {
+    borderHeight?: number;
+    borderWidth?: number;
     className?: string;
     closeType?: ICloseType;
     component?: string;
@@ -108,6 +116,7 @@ export interface ITabAttributes {
     enableRename?: boolean;
     enableRenderOnDemand?: boolean;
     floating?: boolean;
+    helpText?: string;
     icon?: string;
     id?: string;
     name?: string;
@@ -119,6 +128,7 @@ export interface IBorderAttributes {
     barSize?: number;
     className?: string;
     config?: any;
+    enableAutoHide?: boolean;
     enableDrop?: boolean;
     minSize?: number;
     selected?: number;

package/declarations/model/Model.d.ts

@@ -59,6 +59,7 @@ declare class Model {
      */
     toJson(): IJsonModel;
     getSplitterSize(): number;
+    getSplitterExtra(): number;
     isEnableEdgeDock(): boolean;
     /**
      * Sets a function to allow/deny dropping a node

package/declarations/model/TabNode.d.ts

@@ -7,6 +7,7 @@ declare class TabNode extends Node implements IDraggable {
     getWindow(): Window | undefined;
     getTabRect(): Rect | undefined;
     getName(): string;
+    getHelpText(): string | undefined;
     getComponent(): string | undefined;
     /**
      * Returns the config attribute that can be used to store node specific data that

package/declarations/model/TabSetNode.d.ts

@@ -27,6 +27,7 @@ declare class TabSetNode extends Node implements IDraggable, IDropTarget {
     isEnableDrag(): boolean;
     isEnableDivide(): boolean;
     isEnableMaximize(): boolean;
+    isEnableClose(): boolean;
     canMaximize(): boolean;
     isEnableTabStrip(): boolean;
     isAutoSelectTab(): boolean;