flexlayout-react 0.5.20 → 0.6.2

package/src/view/TabFloating.tsx

@@ -5,6 +5,7 @@ import TabSetNode from "../model/TabSetNode";
 import { CLASSES } from "../Types";
 import { ILayoutCallbacks } from "./Layout";
 import { I18nLabel } from "../I18nLabel";
+import { hideElement } from "./Utils";
 
 /** @hidden @internal */
 export interface ITabFloatingProps {
@@ -49,9 +50,10 @@ export const TabFloating = (props: ITabFloatingProps) => {
 
     const cm = layout.getClassName;
 
-    const style: Record<string, any> = node._styleWithPosition({
-        display: selected ? "flex" : "none",
-    });
+    const style: Record<string, any> = node._styleWithPosition();
+    if (!selected) {
+        hideElement(style, node.getModel().isUseVisibility());
+    }
 
     const message = layout.i18nName(I18nLabel.Floating_Window_Message);
     const showMessage = layout.i18nName(I18nLabel.Floating_Window_Show_Window);

package/src/view/TabOverflowHook.tsx

@@ -20,6 +20,7 @@ export const useTabOverflow = (
     const [position, setPosition] = React.useState<number>(0);
     const userControlledLeft = React.useRef<boolean>(false);
     const [hiddenTabs, setHiddenTabs] = React.useState<{ node: TabNode; index: number }[]>([]);
+    const lastHiddenCount = React.useRef<number>(0);
 
     // if selected node or tabset/border rectangle change then unset usercontrolled (so selected tab will be kept in view)
     React.useLayoutEffect(() => {
@@ -78,9 +79,11 @@ export const useTabOverflow = (
 
         if (
             firstRender.current === true ||
+            (lastHiddenCount.current === 0 && hiddenTabs.length !== 0) || 
             nodeRect.width !== lastRect.current.width || // incase rect changed between first render and second
             nodeRect.height !== lastRect.current.height
         ) {
+            lastHiddenCount.current = hiddenTabs.length;
             lastRect.current = nodeRect;
             const enabled = node instanceof TabSetNode ? node.isEnableTabStrip() === true : true;
             let endPos = getFar(nodeRect) - stickyButtonsSize;
@@ -92,8 +95,6 @@ export const useTabOverflow = (
                     return; // nothing to do all tabs are shown in available space
                 }
 
-                endPos -= hiddenTabs.length > 0 ? (orientation === Orientation.HORZ ? 10 : 0) : 45; // will need hidden tabs
-
                 let shiftPos = 0;
 
                 const selectedTab = node.getSelectedNode() as TabNode;

package/src/view/TabSet.tsx

@@ -9,6 +9,7 @@ import { TabButton } from "./TabButton";
 import { useTabOverflow } from "./TabOverflowHook";
 import Orientation from "../Orientation";
 import { CLASSES } from "../Types";
+import { hideElement, isAuxMouseEvent } from "./Utils";
 
 /** @hidden @internal */
 export interface ITabSetProps {
@@ -16,7 +17,7 @@ export interface ITabSetProps {
     node: TabSetNode;
     iconFactory?: (node: TabNode) => React.ReactNode | undefined;
     titleFactory?: (node: TabNode) => React.ReactNode | undefined;
-    icons?: IIcons;
+    icons: IIcons;
     editingTab?: TabNode;
     path?: string;
 }
@@ -33,8 +34,20 @@ export const TabSet = (props: ITabSetProps) => {
     const { selfRef, position, userControlledLeft, hiddenTabs, onMouseWheel, tabsTruncated } = useTabOverflow(node, Orientation.HORZ, toolbarRef, stickyButtonsRef);
 
     const onOverflowClick = (event: React.MouseEvent<HTMLElement, MouseEvent>) => {
-        const element = overflowbuttonRef.current!;
-        showPopup(layout.getRootDiv(), element, hiddenTabs, onOverflowItemSelect, layout.getClassName);
+        const callback = layout.getShowOverflowMenu();
+        if (callback !== undefined) {
+            callback( node, event, hiddenTabs, onOverflowItemSelect);
+        } else {
+            const element = overflowbuttonRef.current!;
+            showPopup(
+                element, 
+                hiddenTabs, 
+                onOverflowItemSelect, 
+                layout,
+                iconFactory,
+                titleFactory,
+                );
+        }
         event.stopPropagation();
     };
 
@@ -110,7 +123,7 @@ export const TabSet = (props: ITabSetProps) => {
     let style = node._styleWithPosition();
 
     if (node.getModel().getMaximizedTabset() !== undefined && !node.isMaximized()) {
-        style.display = "none";
+        hideElement(style, node.getModel().isUseVisibility())
     }
 
     const tabs = [];
@@ -125,7 +138,6 @@ export const TabSet = (props: ITabSetProps) => {
                     path={path + "/tb" + i}
                     key={child.getId()}
                     selected={isSelected}
-                    show={true}
                     height={node.getTabStripHeight()}
                     iconFactory={iconFactory}
                     titleFactory={titleFactory}
@@ -168,20 +180,28 @@ export const TabSet = (props: ITabSetProps) => {
     let toolbar;
     if (hiddenTabs.length > 0) {
         const overflowTitle = layout.i18nName(I18nLabel.Overflow_Menu_Tooltip);
+        let overflowContent;
+        if (typeof icons.more === "function") {
+            overflowContent = icons.more(node, hiddenTabs);
+        } else {
+            overflowContent = (<>
+                {icons.more}
+                <div className={cm(CLASSES.FLEXLAYOUT__TAB_BUTTON_OVERFLOW_COUNT)}>{hiddenTabs.length}</div>
+            </>);
+        }
         buttons.push(
             <button
                 key="overflowbutton"
                 data-layout-path={path + "/button/overflow"}
 
                 ref={overflowbuttonRef}
-                className={cm(CLASSES.FLEXLAYOUT__TAB_BUTTON_OVERFLOW)}
+                className={cm(CLASSES.FLEXLAYOUT__TAB_TOOLBAR_BUTTON) + " " + cm(CLASSES.FLEXLAYOUT__TAB_BUTTON_OVERFLOW)}
                 title={overflowTitle}
                 onClick={onOverflowClick}
                 onMouseDown={onInterceptMouseDown}
                 onTouchStart={onInterceptMouseDown}
             >
-                {icons?.more}
-                {hiddenTabs.length}
+                {overflowContent}
             </button>
         );
     }
@@ -198,7 +218,7 @@ export const TabSet = (props: ITabSetProps) => {
                 onMouseDown={onInterceptMouseDown}
                 onTouchStart={onInterceptMouseDown}
             >
-                {icons?.popout}
+                {(typeof icons.popout === "function") ? icons.popout(selectedTabNode) : icons.popout}
             </button>
         );
     }
@@ -216,7 +236,9 @@ export const TabSet = (props: ITabSetProps) => {
                 onMouseDown={onInterceptMouseDown}
                 onTouchStart={onInterceptMouseDown}
             >
-                {node.isMaximized() ? icons?.restore : icons?.maximize}
+                {node.isMaximized() ? 
+                    (typeof icons.restore === "function") ? icons.restore(node) : icons.restore :
+                    (typeof icons.maximize === "function") ? icons.maximize(node) : icons.maximize }
             </button>
         );
     }
@@ -234,7 +256,7 @@ export const TabSet = (props: ITabSetProps) => {
                 onMouseDown={onInterceptMouseDown}
                 onTouchStart={onInterceptMouseDown}
             >
-                {icons?.closeTabset}
+                {(typeof icons.closeTabset === "function") ? icons.closeTabset(node) : icons.closeTabset}
             </button>
         );
     }
@@ -347,14 +369,4 @@ export const TabSet = (props: ITabSetProps) => {
     );
 };
 
-/** @hidden @internal */
-export function isAuxMouseEvent(event: React.MouseEvent<HTMLDivElement, MouseEvent> | React.TouchEvent<HTMLDivElement>) {
-    let auxEvent = false;
-    if (event.nativeEvent instanceof MouseEvent) {
-        if (event.nativeEvent.button !== 0 || event.ctrlKey || event.altKey || event.metaKey || event.shiftKey) {
-            auxEvent = true; 
-        }
-    }
-    return auxEvent;
-}
 

package/src/view/Utils.tsx

@@ -0,0 +1,71 @@
+import * as React from "react";
+import TabNode from "../model/TabNode";
+import { ILayoutCallbacks, ITitleObject } from "./Layout";
+
+/** @hidden @internal */
+export function getRenderStateEx (
+    layout: ILayoutCallbacks,
+    node: TabNode,
+    iconFactory?: (node: TabNode) => React.ReactNode | undefined,
+    titleFactory?: (node: TabNode) => React.ReactNode | undefined
+) {
+    let leadingContent = iconFactory ? iconFactory(node) : undefined;
+    let titleContent: React.ReactNode = node.getName();
+    let name = node.getName();
+
+    function isTitleObject(obj: any): obj is ITitleObject {
+        return obj.titleContent !== undefined
+    }
+
+    if (titleFactory !== undefined) {
+        const titleObj = titleFactory(node);
+        if (titleObj !== undefined) {
+            if (typeof titleObj === "string") {
+                titleContent = titleObj as string;
+                name = titleObj as string;
+            } else if (isTitleObject(titleObj)) {
+                titleContent = titleObj.titleContent;
+                name = titleObj.name;
+            } else {
+                titleContent = titleObj;
+            }
+        }
+    }
+
+    if (leadingContent === undefined && node.getIcon() !== undefined) {
+        leadingContent = <img style={{width:"1em", height:"1em"}} src={node.getIcon()} alt="leadingContent" />;
+    }
+
+    let buttons: any[] = [];
+
+    // allow customization of leading contents (icon) and contents
+    const renderState = { leading: leadingContent, content: titleContent, name, buttons };
+    layout.customizeTab(node, renderState);
+
+    node._setRenderedName(renderState.name);
+
+    return renderState;
+
+}
+
+/** @hidden @internal */
+export function hideElement(style: Record<string, any>, useVisibility: ConstrainBoolean ) {
+    if (useVisibility) {
+        style.visibility = "hidden";
+    } else {
+        style.display = "none";
+    }
+}
+
+
+/** @hidden @internal */
+export function isAuxMouseEvent(event: React.MouseEvent<HTMLDivElement, MouseEvent> | React.TouchEvent<HTMLDivElement>) {
+    let auxEvent = false;
+    if (event.nativeEvent instanceof MouseEvent) {
+        if (event.nativeEvent.button !== 0 || event.ctrlKey || event.altKey || event.metaKey || event.shiftKey) {
+            auxEvent = true; 
+        }
+    }
+    return auxEvent;
+}
+

package/style/_base.scss

@@ -19,6 +19,8 @@
         --color-6: #{$color_6};
         --color-drag1: #{$color_drag1};
         --color-drag2: #{$color_drag2};
+        --color-drag1-background: #{$color_drag1_background};
+        --color-drag2-background: #{$color_drag2_background};
         
         --font-size: #{$font-size};
         --font-family: #{$font-family};
@@ -55,14 +57,14 @@
         pointer-events: none;
         box-sizing: border-box;
         border: 2px solid var(--color-drag1);
-        box-shadow: inset 0 0 60px rgba(0, 0, 0, 0.2);
+        background: var(--color-drag1-background);
         border-radius: 5px;
         z-index: 1000;
 
         &_edge {
             pointer-events: none;
             border: 2px solid var(--color-drag2);
-            box-shadow: inset 0 0 60px rgba(0, 0, 0, 0.2);
+            background: var(--color-drag2-background);
             border-radius: 5px;
             z-index: 1000;
             box-sizing: border-box;
@@ -94,7 +96,7 @@
         justify-content: center;
         flex-direction: column;
         overflow: hidden;
-        padding: 10px;
+        padding: 0.5em 1em;
         word-wrap: break-word;
         font-size: var(--font-size);
         font-family: var(--font-family);
@@ -157,6 +159,9 @@
 
                 &_tab_container {
                     display: flex;
+                    gap: 4px;
+                    padding-left: 4px;
+                    padding-right: 4px;
                     box-sizing: border-box;
                     position: absolute;
                     top: 0;
@@ -182,6 +187,14 @@
         }
     }
 
+    &__tab_button_stamp {
+        display: inline-flex;
+        align-items: center;
+        gap: 0.3em;
+        white-space: nowrap;
+        box-sizing: border-box;
+    }
+
     &__tab {
         overflow: auto;
         position: absolute;
@@ -191,10 +204,11 @@
 
         &_button {
             display: flex;
+            gap: 0.3em;
             align-items: center;
             box-sizing: border-box;
-            padding: 3px 8px; // if you change top or bottom update the tabset_sizer above
-            margin: 0px 2px;
+            padding: 3px 0.5em; // if you change top or bottom update the tabset_sizer above
+
             cursor: pointer;
             @include tab_button_mixin;
 
@@ -243,65 +257,74 @@
 
             &_trailing {
                 display: flex;
-                margin-left: 8px;
-                min-width: 8px;
-                min-height: 8px;
+                visibility: hidden;
+                border-radius: 4px;
+                &:hover {
+                    @include close_button_hovered_mixin;
+                }
             }
             @media (pointer: coarse) {
                 &_trailing {
-                    min-width: 20px;
-                    min-height: 20px;
                 }
             }
             @media (hover: hover) {
                 &:hover &_trailing {
-                    background: transparent url("../images/close.png") no-repeat center;
+                    visibility: visible;
                 }
             }
 
             &--selected &_trailing {
-                background: transparent url("../images/close.png") no-repeat center;
+                visibility: visible;
             }
 
             &_overflow {
-                margin-left: 10px;
-                padding-left: 12px;
+                display: flex;
+                align-items: center;
                 border: none;
                 color: gray;
                 font-size: inherit;
-                background: transparent url("../images/more2.png") no-repeat left;
+                background-color: transparent;
             }
         }
 
         &_toolbar {
             display: flex;
             align-items: center;
+            gap: .3em;
+            padding-left: .5em;
+            padding-right: .3em;
 
             &_button {
-                min-width: 20px;
-                min-height: 20px;
                 border: none;
                 outline: none;
+                font-size: inherit;
+                margin: 0px;
+                background-color: transparent;
+                border-radius: 4px;
+                padding: 1px;
+                @media (hover: hover) {
+                    &:hover {
+                        @include toolbar_button_hovered_mixin;
+                    }
+                }
 
                 &-min {
-                    background: transparent url("../images/maximize.png") no-repeat center;
                 }
 
                 &-max {
-                    background: transparent url("../images/restore.png") no-repeat center;
                 }
 
                 &-float {
-                    background: transparent url("../images/popout.png") no-repeat center;
                 }
 
                 &-close {
-                    background: transparent url("../images/close.png") no-repeat center;
                 }
             }
 
             &_sticky_buttons_container {
                 display: flex;
+                gap: 0.3em;
+                padding-left: 2px;
                 align-items: center;
             }
         }
@@ -375,6 +398,9 @@
             &_tab_container {
                 white-space: nowrap;
                 display: flex;
+                gap: 4px;
+                padding-left: 2px;
+                padding-right: 2px;
                 box-sizing: border-box;
                 position: absolute;
                 top: 0;
@@ -395,10 +421,11 @@
 
         &_button {
             display: flex;
+            gap: 0.3em;
             align-items: center;
             cursor: pointer;
-            padding: 3px 8px;
-            margin: 2px;
+            padding: 3px 0.5em;
+            margin: 2px 0px;
             box-sizing: border-box;
             white-space: nowrap;
             @include border_button_mixin;
@@ -426,68 +453,76 @@
 
             &_trailing {
                 display: flex;
-                margin-left: 8px;
-                min-width: 8px;
-                min-height: 8px;
+                border-radius: 4px;
+                visibility: hidden;
+                &:hover {
+                    @include close_button_hovered_mixin;
+                }
             }
-
             @media (pointer: coarse) {
                 &_trailing {
-                    min-width: 20px;
-                    min-height: 20px;
                 }
             }
-
             @media (hover: hover) {
                 &:hover &_trailing {
-                    background: transparent url("../images/close.png") no-repeat center;
+                    visibility: visible;
                 }
             }
 
             &--selected &_trailing {
-                background: transparent url("../images/close.png") no-repeat center;
+                visibility: visible;
             }
         }
 
         &_toolbar {
             display: flex;
+            gap: .3em;
             align-items: center;
 
-            &_left {
+            &_left,
+            &_right {
                 flex-direction: column;
+                padding-top: .5em;
+                padding-bottom: .3em;
             }
 
-            &_right {
-                flex-direction: column;
+            &_top,
+            &_bottom {
+                padding-left: .5em;
+                padding-right: .3em;
             }
 
             &_button {
-                min-width: 20px;
-                min-height: 20px;
                 border: none;
                 outline: none;
-
+                font-size: inherit;
+                background-color: transparent;
+                border-radius: 4px;
+                padding: 1px;
+                @media (hover: hover) {
+                    &:hover {
+                        @include toolbar_button_hovered_mixin;
+                    }
+                }
+                
                 &-float {
-                    background: transparent url("../images/popout.png") no-repeat center;
                 }
 
                 &_overflow {
+                    display: flex;
+                    align-items: center;
                     border: none;
-                    padding-left: 12px;
                     color: gray;
                     font-size: inherit;
-                    background: transparent url("../images/more2.png") no-repeat left;
+                    background-color: transparent;
                 }
 
                 &_overflow_top,
                 &_overflow_bottom {
-                    margin-left: 10px;
                 }
 
                 &_overflow_right,
                 &_overflow_left {
-                    padding-right: 0px;
-                    margin-top: 5px;
                 }
             }
         }
@@ -498,8 +533,7 @@
         font-family: var(--font-family);
 
         &_item {
-            margin: 2px;
-            padding: 2px 10px 2px 10px;
+            padding: 2px 0.5em;
             white-space: nowrap;
             cursor: pointer;
             border-radius: 2px;
@@ -522,6 +556,7 @@
             max-height: 50%;
             min-width: 100px;
             overflow: auto;
+            padding: 2px;
         }
     }