v0.7.13

ChangeLog.txt

@@ -1,3 +1,11 @@
+0.7.13
+New attribute on tabset: enableSingleTabStretch will stretch a single tab to take up
+all the remaining space and change the style to look like a header, combined with enableDrop
+this can be used to create a Mosaic style layout (headed panels without tabs), see the new
+Mosaic Style layout in the Demo.
+The layout methods addTabToTabSet and addTabToActiveTabSet now return the added TabNode.
+Fixed #352 - Layout.getDomRect returning null.
+
 0.7.12
 Action.setActiveTabset can now take undefined to unset the active tabset.
 Added Tab attribute contentClassName to add a class to the tab content.

examples/demo/App.tsx

@@ -393,10 +393,11 @@ class App extends React.Component<any, { layoutFile: string | null, model: Model
     }
 
     onRenderTab = (node: TabNode, renderValues: ITabRenderValues) => {
-        // renderValues.content = (<InnerComponent/>);
+        // renderValues.content = (<div>hello</div>);
         // renderValues.content += " *";
         // renderValues.leading = <img style={{width:"1em", height:"1em"}}src="images/folder.svg"/>;
         // renderValues.name = "tab " + node.getId(); // name used in overflow menu
+        // renderValues.buttons.push(<div style={{flexGrow:1}}></div>);
         // renderValues.buttons.push(<img style={{width:"1em", height:"1em"}} src="images/folder.svg"/>);
     }
 
@@ -486,6 +487,7 @@ class App extends React.Component<any, { layoutFile: string | null, model: Model
                             <option value="default">Default</option>
                             <option value="newfeatures">New Features</option>
                             <option value="simple">Simple</option>
+                            <option value="mosaic">Mosaic Style</option>
                             <option value="sub">SubLayout</option>
                             <option value="complex">Complex</option>
                             <option value="headers">Headers</option>

examples/demo/layouts/mosaic.layout

@@ -0,0 +1,54 @@
+{
+	"global": {
+		"tabSetEnableDrop": false,
+		"tabSetEnableSingleTabStretch": true,
+		"tabSetMinWidth": 100,
+		"tabSetMinHeight": 100
+	},
+	"borders": [],
+	"layout": {
+		"type": "row",
+		"children": [
+			{
+				"type": "tabset",
+				"id": "2",
+				"weight": 25,
+				"children": [
+					{
+						"type": "tab",
+						"id": "3",
+						"name": "Layout JSON",
+						"component": "json"
+					}
+				],
+				"active": true
+			},
+			{
+				"type": "tabset",
+				"weight": 50,
+				"children": [
+					{
+						"type": "tab",
+						"name": "Wikipedia",
+						"component": "multitype",
+						"config": {
+							"type": "url",
+							"data": "https://en.wikipedia.org/wiki/Main_Page"
+						}
+					}
+				]
+			},
+			{
+				"type": "tabset",
+				"weight": 25,
+				"children": [
+					{
+						"type": "tab",
+						"name": "One",
+						"component": "grid"
+					}
+				]
+			}
+		]
+	}
+}

package.json

@@ -1,6 +1,6 @@
 {
     "name": "flexlayout-react",
-    "version": "0.7.12",
+    "version": "0.7.13",
     "description": "A multi-tab docking layout manager",
     "main": "lib/index.js",
     "types": "./declarations/index.d.ts",

src/Types.ts

@@ -73,6 +73,7 @@ export enum CLASSES {
     FLEXLAYOUT__TAB_BORDER = "flexlayout__tab_border",
     FLEXLAYOUT__TAB_BORDER_ = "flexlayout__tab_border_",
     FLEXLAYOUT__TAB_BUTTON = "flexlayout__tab_button",
+    FLEXLAYOUT__TAB_BUTTON_STRETCH = "flexlayout__tab_button_stretch",
     FLEXLAYOUT__TAB_BUTTON_CONTENT = "flexlayout__tab_button_content",
     FLEXLAYOUT__TAB_BUTTON_LEADING = "flexlayout__tab_button_leading",
     FLEXLAYOUT__TAB_BUTTON_OVERFLOW = "flexlayout__tab_button_overflow",

src/model/IJsonModel.ts

@@ -69,6 +69,7 @@ export interface IGlobalAttributes {
 	tabSetEnableDrag?: boolean; // default: true
 	tabSetEnableDrop?: boolean; // default: true
 	tabSetEnableMaximize?: boolean; // default: true
+	tabSetEnableSingleTabStretch?: boolean; // default: false
 	tabSetEnableTabStrip?: boolean; // default: true
 	tabSetHeaderHeight?: number; // default: 0
 	tabSetMarginInsets?: IInsets; // default: {"top":0,"right":0,"bottom":0,"left":0}
@@ -96,6 +97,7 @@ export interface ITabSetAttributes {
 	enableDrag?: boolean; // default: true - inherited from global tabSetEnableDrag
 	enableDrop?: boolean; // default: true - inherited from global tabSetEnableDrop
 	enableMaximize?: boolean; // default: true - inherited from global tabSetEnableMaximize
+	enableSingleTabStretch?: boolean; // default: false - inherited from global tabSetEnableSingleTabStretch
 	enableTabStrip?: boolean; // default: true - inherited from global tabSetEnableTabStrip
 	headerHeight?: number; // default: 0 - inherited from global tabSetHeaderHeight
 	height?: number;
@@ -110,7 +112,7 @@ export interface ITabSetAttributes {
 	type: "tabset";
 	weight?: number; // default: 100
 	width?: number;
-
+	
 	// special attributes are read from initial json but must subseqently be set on the model
 	maximized?: boolean; // default false
 	active?:boolean; // default false
@@ -123,7 +125,7 @@ export interface ITabAttributes {
 	closeType?: ICloseType; // default: 1 - inherited from global tabCloseType
 	component?: string;
 	config?: any;
-	contentClassName?: string;
+	contentClassName?: string; //  - inherited from global tabContentClassName
 	enableClose?: boolean; // default: true - inherited from global tabEnableClose
 	enableDrag?: boolean; // default: true - inherited from global tabEnableDrag
 	enableFloat?: boolean; // default: false - inherited from global tabEnableFloat

src/model/Model.ts

@@ -84,6 +84,7 @@ export class Model {
         attributeDefinitions.add("tabSetEnableDivide", true).setType(Attribute.BOOLEAN);
         attributeDefinitions.add("tabSetEnableMaximize", true).setType(Attribute.BOOLEAN);
         attributeDefinitions.add("tabSetEnableClose", false).setType(Attribute.BOOLEAN);
+        attributeDefinitions.add("tabSetEnableSingleTabStretch", 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);

src/model/TabSetNode.ts

@@ -64,6 +64,8 @@ export class TabSetNode extends Node implements IDraggable, IDropTarget {
         attributeDefinitions.addInherited("enableDivide", "tabSetEnableDivide");
         attributeDefinitions.addInherited("enableMaximize", "tabSetEnableMaximize");
         attributeDefinitions.addInherited("enableClose", "tabSetEnableClose");
+        attributeDefinitions.addInherited("enableSingleTabStretch", "tabSetEnableSingleTabStretch");
+
         attributeDefinitions.addInherited("classNameTabStrip", "tabSetClassNameTabStrip");
         attributeDefinitions.addInherited("classNameHeader", "tabSetClassNameHeader");
         attributeDefinitions.addInherited("enableTabStrip", "tabSetEnableTabStrip");
@@ -189,6 +191,10 @@ export class TabSetNode extends Node implements IDraggable, IDropTarget {
     isEnableClose() {
         return this._getAttr("enableClose") as boolean;
     }
+
+    isEnableSingleTabStretch() {
+        return this._getAttr("enableSingleTabStretch") as boolean;
+    }
 
     canMaximize() {
         if (this.isEnableMaximize()) {

src/view/TabButton.tsx

@@ -135,14 +135,17 @@ export const TabButton = (props: ITabButtonProps) => {
     const cm = layout.getClassName;
     const parentNode = node.getParent() as TabSetNode;
 
-    let baseClassName = CLASSES.FLEXLAYOUT__TAB_BUTTON;
+    const isStretch = parentNode.isEnableSingleTabStretch() && parentNode.getChildren().length === 1;
+    let baseClassName = isStretch ? CLASSES.FLEXLAYOUT__TAB_BUTTON_STRETCH : CLASSES.FLEXLAYOUT__TAB_BUTTON;
     let classNames = cm(baseClassName);
     classNames += " " + cm(baseClassName + "_" + parentNode.getTabLocation());
 
-    if (selected) {
-        classNames += " " + cm(baseClassName + "--selected");
-    } else {
-        classNames += " " + cm(baseClassName + "--unselected");
+    if (!isStretch) {
+        if (selected) {
+            classNames += " " + cm(baseClassName + "--selected");
+        } else {
+            classNames += " " + cm(baseClassName + "--unselected");
+        }
     }
 
     if (node.getClassName() !== undefined) {
@@ -177,7 +180,7 @@ export const TabButton = (props: ITabButtonProps) => {
         );
     }
 
-    if (node.isEnableClose()) {
+    if (node.isEnableClose() && !isStretch) {
         const closeTitle = layout.i18nName(I18nLabel.Close_Tab);
         renderState.buttons.push(
             <div

src/view/TabSet.tsx

@@ -102,6 +102,11 @@ export const TabSet = (props: ITabSetProps) => {
         event.stopPropagation();
     };
 
+    const onCloseTab = (event: React.MouseEvent<HTMLElement, MouseEvent>) => {
+        layout.doAction(Actions.deleteTab(node.getChildren()[0].getId()));
+        event.stopPropagation();
+    };
+
     const onFloatTab = (event: React.MouseEvent<HTMLElement, MouseEvent>) => {
         if (selectedTabNode !== undefined) {
             layout.doAction(Actions.floatTab(selectedTabNode.getId()));
@@ -167,12 +172,15 @@ export const TabSet = (props: ITabSetProps) => {
     buttons = renderState.buttons;
     headerButtons = renderState.headerButtons;
 
+    const isTabStretch = node.isEnableSingleTabStretch() && node.getChildren().length === 1;
+    const showClose = (isTabStretch && ((node.getChildren()[0] as TabNode).isEnableClose())) || node.isEnableClose();
+
     if (renderState.overflowPosition === undefined) {
         renderState.overflowPosition = stickyButtons.length;
     }
 
     if (stickyButtons.length > 0) {
-        if (tabsTruncated) {
+        if (tabsTruncated || isTabStretch) {
             buttons = [...stickyButtons, ...buttons];
         } else {
             tabs.push(<div
@@ -253,16 +261,16 @@ export const TabSet = (props: ITabSetProps) => {
         );
     }
 
-    if (!node.isMaximized() && node.isEnableClose()) {
-        const title = layout.i18nName(I18nLabel.Close_Tabset);
+    if (!node.isMaximized() && showClose) {
+        const title = isTabStretch ? layout.i18nName(I18nLabel.Close_Tab) : layout.i18nName(I18nLabel.Close_Tabset);
         const btns = showHeader ? headerButtons : buttons;
         btns.push(
             <button
                 key="close"
                 data-layout-path={path + "/button/close"}
                 title={title}
                 className={cm(CLASSES.FLEXLAYOUT__TAB_TOOLBAR_BUTTON) + " " + cm(CLASSES.FLEXLAYOUT__TAB_TOOLBAR_BUTTON_CLOSE)}
-                onClick={onClose}
+                onClick={isTabStretch ? onCloseTab : onClose}
                 onMouseDown={onInterceptMouseDown}
                 onTouchStart={onInterceptMouseDown}
             >
@@ -348,7 +356,7 @@ export const TabSet = (props: ITabSetProps) => {
             onTouchStart={onMouseDown}>
             <div ref={tabbarInnerRef} className={cm(CLASSES.FLEXLAYOUT__TABSET_TABBAR_INNER) + " " + cm(CLASSES.FLEXLAYOUT__TABSET_TABBAR_INNER_ + node.getTabLocation())}>
                 <div
-                    style={{ left: position }}
+                    style={{ left: position, width: (isTabStretch? "100%": "10000px")}}
                     className={cm(CLASSES.FLEXLAYOUT__TABSET_TABBAR_INNER_TAB_CONTAINER) + " " + cm(CLASSES.FLEXLAYOUT__TABSET_TABBAR_INNER_TAB_CONTAINER_ + node.getTabLocation())}
                 >
                     {tabs}

style/_base.scss

@@ -208,6 +208,27 @@
             cursor: pointer;
             @include tab_button_mixin;
 
+            &_stretch {
+                background-color: transparent;
+                color:var(--color-tab-selected);
+                width: 100%;
+                padding: 3px 0em;
+                text-wrap: nowrap;
+                display: flex;
+                gap: 0.3em;
+                align-items: center;
+                box-sizing: border-box;
+                cursor: pointer;
+                @include tab_button_stretch_mixin;
+
+                @media (hover: hover) {
+                    &:hover {
+                        color:var(--color-tab-selected);
+                        @include tab_button_stretch_hovered_mixin;
+                    }
+                }
+            }
+
             &--selected {
                 background-color:var(--color-tab-selected-background);
                 color:var(--color-tab-selected);

style/dark.scss

@@ -125,6 +125,12 @@ $font-family: Roboto, Arial, sans-serif !default;
 @mixin tab_button_hovered_mixin {
 }
 
+@mixin tab_button_stretch_mixin {
+}
+
+@mixin tab_button_stretch_hovered_mixin {
+}
+
 @mixin border_mixin {
 }
 

style/gray.scss

@@ -150,6 +150,12 @@ $font_family: Roboto, Arial, sans-serif !default;
 @mixin border_button_hovered_mixin {
 }
 
+@mixin tab_button_stretch_mixin {
+}
+
+@mixin tab_button_stretch_hovered_mixin {
+}
+
 @mixin splitter_mixin {
 }
 

style/light.scss

@@ -112,6 +112,12 @@ $font-family: Roboto, Arial, sans-serif !default;
 @mixin tab_button_hovered_mixin {
 }
 
+@mixin tab_button_stretch_mixin {
+}
+
+@mixin tab_button_stretch_hovered_mixin {
+}
+
 @mixin close_button_hovered_mixin {
     background-color:var(--color-3);
 }