feat(floating): Implements support for internal floating tabs (non-popout)

demo/public/layouts/complex.layout

@@ -1,6 +1,6 @@
 {
 	"global": {
-		"tabEnableFloat": true,
+		"enableFloat": true,
 		"tabSetEnableTabScrollbar": true,
 		"borderEnableTabScrollbar": true
 	},

demo/public/layouts/default.layout

@@ -19,6 +19,7 @@
 					"id": "#0ae8e0fb-dba2-4b14-9d75-08781231479a",
 					"name": "Output",
 					"component": "grid",
+					"tabEnableFloat": "true",
 					"enableClose": false,
 					"icon": "images/bar_chart.svg"
 				},
@@ -172,6 +173,7 @@
 								"type": "tab",
 								"id": "#0e23b4b3-498a-4625-a916-b1e6e19eaf3f",
 								"name": "Wikipedia",
+								"enableFloat": true,
 								"component": "multitype",
 								"config": {
 									"type": "url",
@@ -182,6 +184,7 @@
 								"type": "tab",
 								"id": "#31b3af95-2fc9-4511-8d5d-1e6255b92eae",
 								"name": "MUI",
+								"enableFloat": true,
 								"enablePopout": false,
 								"component": "mui"
 							}
@@ -196,6 +199,7 @@
 								"type": "tab",
 								"id": "#4784d2d4-24a4-4ef2-ac6e-7a3ea7b03ba3",
 								"name": "MUI Grid",
+								"enableFloat": true,
 								"enablePopout": false,
 								"component": "muigrid"
 							}

demo/public/layouts/sub.layout

@@ -1,6 +1,6 @@
 {
 	"global": {
-		"tabEnableFloat": true
+		"enableFloat": true
 	},
 	"borders": [],
 	"layout": {

demo/public/layouts/test_two_tabs.layout

@@ -12,7 +12,8 @@
           {
             "type": "tab",
             "name": "One",
-            "component": "testing"
+            "component": "testing",
+            "enableFloat": true
           }
         ]
       },

src/Types.ts

@@ -39,6 +39,12 @@ export enum CLASSES {
     FLEXLAYOUT__ERROR_BOUNDARY_CONTENT = "flexlayout__error_boundary_content",
 
     FLEXLAYOUT__FLOATING_WINDOW_CONTENT = "flexlayout__floating_window_content",
+    FLEXLAYOUT__FLOATING_TAB = "flexlayout__floating_tab",
+    FLEXLAYOUT__FLOATING_TAB_HEADER = "flexlayout__floating_tab_header",
+    FLEXLAYOUT__FLOATING_TAB_TITLE = "flexlayout__floating_tab_title",
+    FLEXLAYOUT__FLOATING_TAB_CLOSE = "flexlayout__floating_tab_close",
+    FLEXLAYOUT__FLOATING_TAB_DOCK = "flexlayout__floating_tab_dock",
+    FLEXLAYOUT__FLOATING_TAB_CONTENT = "flexlayout__floating_tab_content",
 
     FLEXLAYOUT__LAYOUT = "flexlayout__layout",
     FLEXLAYOUT__LAYOUT_MOVEABLES = "flexlayout__layout_moveables",

src/model/Actions.ts

@@ -22,6 +22,8 @@ export class Actions {
     static POPOUT_TABSET = "FlexLayout_PopoutTabset";
     static CLOSE_WINDOW = "FlexLayout_CloseWindow";
     static CREATE_WINDOW = "FlexLayout_CreateWindow";
+    static FLOAT_TAB = "FlexLayout_FloatTab";
+    static UNFLOAT_TAB = "FlexLayout_UnFloatTab";
 
     /**
      * Adds a tab node to the given tabset node
@@ -158,6 +160,24 @@ export class Actions {
         return new Action(Actions.POPOUT_TAB, { node: nodeId });
     }
 
+    /**
+     *
+     * @param nodeId
+     * @returns {Action} the action
+     */
+    static floatTab(nodeId: string): Action {
+        return new Action(Actions.FLOAT_TAB, { node: nodeId });
+    }
+
+    /**
+     * Docks a floating tab back to the layout
+     * @param floatingId the id of the floating tab to dock
+     * @returns {Action} the action
+     */
+    static unfloatTab(floatingId: string): Action {
+        return new Action(Actions.UNFLOAT_TAB, { floatingId });
+    }
+
     /**
      * Pops out the given tab set node into a new browser window
      * @param nodeId the tab set node to popout

src/model/IJsonModel.ts

@@ -7,6 +7,7 @@ export interface IJsonModel {
     borders?: IJsonBorderNode[];
     layout: IJsonRowNode; // top level 'row' is horizontal, rows inside rows take opposite orientation to parent row (ie can act as columns)
 	popouts?: Record<string, IJsonPopout>;
+	floatings?: Record<string, IJsonFloating>;
 }
 
 export interface IJsonRect {
@@ -21,6 +22,14 @@ export interface IJsonPopout {
 	rect: IJsonRect ;
 }
 
+export interface IJsonFloating {
+    tabId: string;
+    rect: IJsonRect;
+    zIndex: number;
+    originalParentId: string;
+    originalIndex: number;
+}
+
 export interface IJsonBorderNode extends IBorderAttributes {
     location: IBorderLocation;
     children: IJsonTabNode[];
@@ -249,6 +258,15 @@ export interface IGlobalAttributes {
 	 */
 	tabEnablePopout?: boolean;
 
+	/**
+	  Value for TabNode attribute enableFloat if not overridden
+
+	  enable floating tab feature
+
+	  Default: false
+	 */
+	tabEnableFloat?: boolean;
+
 	/**
 	  Value for TabNode attribute enablePopoutIcon if not overridden
 
@@ -765,6 +783,13 @@ export interface ITabAttributes {
 	 */
 	enablePopout?: boolean;
 
+	/**
+	  enable floating tab feature
+
+	  Default: inherited from Global attribute tabEnableFloat (default false)
+	 */
+	enableFloat?: boolean;
+
 	/**
 	  whether to show the popout icon in the tabset header if this tab enables popouts
 
@@ -865,12 +890,40 @@ export interface ITabAttributes {
 	tabsetClassName?: string;
 
 	/**
-	  
+
 
 	  Fixed value: "tab"
 	 */
 	type?: string;
 
+	/**
+	  x position of tab when floating or after dock
+
+	  Default: undefined
+	 */
+	x?: number;
+
+	/**
+	  y position of tab when floating or after dock
+
+	  Default: undefined
+	 */
+	y?: number;
+
+	/**
+	  width of tab when floating
+
+	  Default: undefined
+	 */
+	floatingWidth?: number;
+
+	/**
+	  height of tab when floating
+
+	  Default: undefined
+	 */
+	floatingHeight?: number;
+
 }
 export interface IBorderAttributes {
 	/**