flexlayout-react 0.8.2 → 0.8.4

package/src/view/TabOverflowHook.tsx

@@ -1,56 +1,161 @@
 import * as React from "react";
-import { TabNode } from "../model/TabNode";
-import { Rect } from "../Rect";
 import { TabSetNode } from "../model/TabSetNode";
 import { BorderNode } from "../model/BorderNode";
 import { Orientation } from "../Orientation";
+import { LayoutInternal } from "./Layout";
+import { TabNode } from "../model/TabNode";
 
 /** @internal */
 export const useTabOverflow = (
+    layout: LayoutInternal,
     node: TabSetNode | BorderNode,
     orientation: Orientation,
-    toolbarRef: React.MutableRefObject<HTMLElement | null>,
-    stickyButtonsRef: React.MutableRefObject<HTMLElement | null>
+    tabStripRef: React.RefObject<HTMLElement | null>,
+    tabClassName: string
 ) => {
-    const firstRender = React.useRef<boolean>(true);
-    const tabsTruncated = React.useRef<boolean>(false);
-    const lastRect = React.useRef<Rect>(Rect.empty());
-    const selfRef = React.useRef<HTMLDivElement | null>(null);
+    const [hiddenTabs, setHiddenTabs] = React.useState<number[]>([]);
+    const [isTabOverflow, setTabOverflow] = React.useState<boolean>(false);
 
-    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);
+    const selfRef = React.useRef<HTMLDivElement | null>(null);
+    const userControlledPositionRef = React.useRef<boolean>(false);
+    const updateHiddenTabsTimerRef = React.useRef<NodeJS.Timeout | undefined>(undefined);
+    const hiddenTabsRef = React.useRef<number[]>([]);
+    hiddenTabsRef.current = hiddenTabs;
 
     // if selected node or tabset/border rectangle change then unset usercontrolled (so selected tab will be kept in view)
-    React.useLayoutEffect(() => {
-        userControlledLeft.current = false;
+    React.useEffect(() => {
+        userControlledPositionRef.current = false;
     }, [node.getSelectedNode(), node.getRect().width, node.getRect().height]);
 
-    React.useLayoutEffect(() => {
-        const nodeRect = node instanceof TabSetNode ? node.getRect() : (node as BorderNode).getTabHeaderRect()!;
-        if (nodeRect.width > 0 && nodeRect.height > 0) {
-            updateVisibleTabs();
+    React.useEffect(() => {
+        checkForOverflow(); // if tabs + sticky buttons length > scroll area => move sticky buttons to right buttons
+
+        if (!userControlledPositionRef.current) {
+            const selectedTab = findSelectedTab();
+            if (selectedTab) {
+                selectedTab.scrollIntoView();
+            }
         }
+
+        updateHiddenTabs();  
     });
 
-    const instance = toolbarRef.current;
-    React.useEffect(() => {
-        if (!instance) {
-            return;
+    const updateHiddenTabs = () => {
+        if (updateHiddenTabsTimerRef.current === undefined) {
+            // throttle updates to prevent Maximum update depth exceeded error
+            updateHiddenTabsTimerRef.current = setTimeout(() => {
+                const newHiddenTabs = findHiddenTabs();
+                if (!arraysEqual(newHiddenTabs, hiddenTabsRef.current)) {
+                    setHiddenTabs(newHiddenTabs);
+                }
+
+                updateHiddenTabsTimerRef.current = undefined;
+            }, 100);
+        }
+    }
+
+    const updateTabRects = () => {
+        if (tabStripRef.current) {
+            const tabContainer = tabStripRef.current.firstElementChild!;
+
+            const nodeChildren = node.getChildren();
+            let i = 0;
+            Array.from(tabContainer.children).forEach((child) => {
+                if (child.classList.contains(tabClassName)) {
+                    const childNode = nodeChildren[i] as TabNode;
+                    childNode.setTabRect(layout.getBoundingClientRect(child as HTMLElement));
+                    i++;
+                }
+            });
+        }
+    }
+
+    const onScroll = () => {
+        updateTabRects();
+        updateHiddenTabs();
+        userControlledPositionRef.current = true;
+    };
+
+    const findSelectedTab: () => Element | undefined = () => {
+        let found: Element | undefined = undefined;
+        if (tabStripRef.current) {
+            const tabContainer = tabStripRef.current.firstElementChild!;
+
+            Array.from(tabContainer.children).forEach((child) => {
+                if (child.classList.contains(tabClassName + "--selected")) {
+                    found = child;
+                }
+            });
+        }
+        return found;
+    };
+
+    const checkForOverflow = () => {
+        if (tabStripRef.current) {
+            const strip = tabStripRef.current;
+            const tabContainer = strip.firstElementChild!;
+
+            const offset = isTabOverflow ? 10 : 0; // prevents flashing, after sticky buttons docked set, must be 10 pixels smaller before unsetting
+            const dock = (getSize(tabContainer) + offset) > getSize(tabStripRef.current);
+            if (dock !== isTabOverflow) {
+                setTabOverflow(dock);
+            }
+        }
+    }
+
+    const findHiddenTabs: () => number[] = () => {
+        const hidden: number[] = [];
+        if (tabStripRef.current) {
+            const strip = tabStripRef.current;
+            const stripRect = strip.getBoundingClientRect();
+            const visibleNear = getNear(stripRect) - 1;
+            const visibleFar = getFar(stripRect) + 1;
+
+            const tabContainer = strip.firstElementChild!;
+
+            let i = 0;
+            Array.from(tabContainer.children).forEach((child) => {
+                const tabRect = child.getBoundingClientRect();
+
+                if (child.classList.contains(tabClassName)) {
+                    if (getNear(tabRect) < visibleNear || getFar(tabRect) > visibleFar) {
+                        hidden.push(i);
+                    }
+                    i++;
+                }
+            });
         }
-        instance.addEventListener("wheel", onWheel, { passive: false });
-        return () => {
-            instance.removeEventListener("wheel", onWheel);
-        };
-    }, [instance]);
-
-    // needed to prevent default mouse wheel over tabset/border (cannot do with react event?)
-    const onWheel = (event: Event) => {
-        event.preventDefault();
+
+        return hidden;
     };
 
-    const getNear = (rect: Rect) => {
+    const onMouseWheel = (event: React.WheelEvent<HTMLElement>) => {
+        if (tabStripRef.current) {
+            if (node.getChildren().length === 0) return;
+            let delta = 0;
+            if (Math.abs(event.deltaX) > Math.abs(event.deltaY)) {
+                delta = -event.deltaX;
+            } else {
+                delta = -event.deltaY;
+            }
+            if (event.deltaMode === 1) {
+                // DOM_DELTA_LINE	0x01	The delta values are specified in lines.
+                delta *= 40;
+            }
+            const newPos = getScrollPosition() - delta;
+            const maxScroll = getScrollSize(tabStripRef.current) - getSize(tabStripRef.current);
+            const p = Math.max(0, Math.min(maxScroll, newPos));
+            userControlledPositionRef.current = true;
+            setScrollPosition(p);
+            updateTabRects();
+            updateHiddenTabs();
+            event.stopPropagation();
+        }
+    };
+
+    // orientation helpers:
+
+    const getNear = (rect: DOMRect) => {
         if (orientation === Orientation.HORZ) {
             return rect.x;
         } else {
@@ -58,116 +163,49 @@ export const useTabOverflow = (
         }
     };
 
-    const getFar = (rect: Rect) => {
+    const getFar = (rect: DOMRect) => {
         if (orientation === Orientation.HORZ) {
-            return rect.getRight();
+            return rect.right;
         } else {
-            return rect.getBottom();
+            return rect.bottom;
         }
     };
 
-    const getSize = (rect: DOMRect | Rect) => {
+    const getSize = (elm: Element) => {
         if (orientation === Orientation.HORZ) {
-            return rect.width;
+            return elm.clientWidth;
         } else {
-            return rect.height;
+            return elm.clientHeight;
         }
-    };
+    }
 
-    const updateVisibleTabs = () => {
-        const tabMargin = 2;
-        if (firstRender.current === true) {
-            tabsTruncated.current = false;
+    const getScrollSize = (elm: Element) => {
+        if (orientation === Orientation.HORZ) {
+            return elm.scrollWidth;
+        } else {
+            return elm.scrollHeight;
         }
-        const nodeRect = node instanceof TabSetNode ? node.getRect() : (node as BorderNode).getTabHeaderRect()!;
-        let lastChild = node.getChildren()[node.getChildren().length - 1] as TabNode;
-        const stickyButtonsSize = stickyButtonsRef.current === null ? 0 : getSize(stickyButtonsRef.current!.getBoundingClientRect());
-
-        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;
-            if (toolbarRef.current !== null) {
-                endPos -= getSize(toolbarRef.current.getBoundingClientRect());
-            }
-            if (enabled && node.getChildren().length > 0) {
-                if (hiddenTabs.length === 0 && position === 0 && getFar(lastChild.getTabRect()!) + tabMargin < endPos) {
-                    return; // nothing to do all tabs are shown in available space
-                }
+    }
 
-                let shiftPos = 0;
-
-                const selectedTab = node.getSelectedNode() as TabNode;
-                if (selectedTab && !userControlledLeft.current) {
-                    const selectedRect = selectedTab.getTabRect()!;
-                    const selectedStart = getNear(selectedRect) - tabMargin;
-                    const selectedEnd = getFar(selectedRect) + tabMargin;
-
-                    // when selected tab is larger than available space then align left
-                    if (getSize(selectedRect) + 2 * tabMargin >= endPos - getNear(nodeRect)) {
-                        shiftPos = getNear(nodeRect) - selectedStart;
-                        // console.log("shiftPos1", shiftPos, getNear(nodeRect), selectedStart);
-                    } else {
-                        if (selectedEnd > endPos || selectedStart < getNear(nodeRect)) {
-                            if (selectedStart < getNear(nodeRect)) {
-                                shiftPos = getNear(nodeRect) - selectedStart;
-                                // console.log("shiftPos2", shiftPos, getNear(nodeRect), selectedStart);
-                            }
-                            // use second if statement to prevent tab moving back then forwards if not enough space for single tab
-                            if (selectedEnd + shiftPos > endPos) {
-                                shiftPos = endPos - selectedEnd;
-                            }
-                        }
-                    }
-                }
-
-                const extraSpace = Math.max(0, endPos - (getFar(lastChild.getTabRect()!) + tabMargin + shiftPos));
-                const newPosition = Math.min(0, position + shiftPos + extraSpace);
-                // console.log("newPosition", newPosition, position, shiftPos, extraSpace);
-
-                // find hidden tabs
-                const diff = newPosition - position;
-                const hidden: { node: TabNode; index: number }[] = [];
-                for (let i = 0; i < node.getChildren().length; i++) {
-                    const child = node.getChildren()[i] as TabNode;
-                    if (getNear(child.getTabRect()!) + diff < getNear(nodeRect!) || getFar(child.getTabRect()!) + diff > endPos) {
-                        hidden.push({ node: child, index: i });
-                    }
-                }
-
-                tabsTruncated.current = hidden.length > 0;
-
-                firstRender.current = false; // need to do a second render
-                setHiddenTabs(hidden);
-                // console.log(newPosition);
-                setPosition(newPosition);
-            }
+    const setScrollPosition = (p: number) => {
+        if (orientation === Orientation.HORZ) {
+            tabStripRef.current!.scrollLeft = p;
         } else {
-            firstRender.current = true;
+            tabStripRef.current!.scrollTop = p;
         }
-    };
+    }
 
-    const onMouseWheel = (event: React.WheelEvent<HTMLElement>) => {
-        let delta = 0;
-        if (Math.abs(event.deltaX) > Math.abs(event.deltaY)) {
-            delta = -event.deltaX;
+    const getScrollPosition = () => {
+        if (orientation === Orientation.HORZ) {
+            return tabStripRef.current!.scrollLeft;
         } else {
-            delta = -event.deltaY;
+            return tabStripRef.current!.scrollTop;
         }
-        if (event.deltaMode === 1) {
-            // DOM_DELTA_LINE	0x01	The delta values are specified in lines.
-            delta *= 40;
-        }
-        setPosition(position + delta);
-        userControlledLeft.current = true;
-        event.stopPropagation();
-    };
+    }
 
-    return { selfRef, position, userControlledLeft, hiddenTabs, onMouseWheel, tabsTruncated: tabsTruncated.current };
+    return { selfRef, userControlledPositionRef, onScroll, hiddenTabs, onMouseWheel, isTabOverflow };
 };
+
+function arraysEqual(arr1: number[], arr2: number[]) {
+    return arr1.length === arr2.length && arr1.every((val, index) => val === arr2[index]);
+}

package/src/view/TabSet.tsx

@@ -43,22 +43,27 @@ export const TabSet = (props: ITabSetProps) => {
         const newContentRect = Rect.getContentRect(contentRef.current!).relativeTo(layout.getDomRect()!);
         if (!node.getContentRect().equals(newContentRect)) {
             node.setContentRect(newContentRect);
-            layout.redrawInternal("tabset content rect " + newContentRect);
+            setTimeout(()=> { //prevent Maximum update depth exceeded error
+                layout.redrawInternal("tabset content rect " + newContentRect);
+            },0);
         }
     });
 
     // this must be after the useEffect, so the node rect is already set (else window popin will not position tabs correctly)
-    const { selfRef, position, userControlledLeft, hiddenTabs, onMouseWheel, tabsTruncated } = useTabOverflow(node, Orientation.HORZ, buttonBarRef, stickyButtonsRef);
+    const { selfRef, userControlledPositionRef, onScroll, hiddenTabs, onMouseWheel, isTabOverflow } = 
+        useTabOverflow(layout, node, Orientation.HORZ, tabStripInnerRef, 
+            layout.getClassName(CLASSES.FLEXLAYOUT__TAB_BUTTON));
 
     const onOverflowClick = (event: React.MouseEvent<HTMLElement, MouseEvent>) => {
         const callback = layout.getShowOverflowMenu();
+        const items = hiddenTabs.map(h=> {return {index: h, node: (node.getChildren()[h] as TabNode)};});
         if (callback !== undefined) {
-            callback(node, event, hiddenTabs, onOverflowItemSelect);
+            callback(node, event, items, onOverflowItemSelect);
         } else {
             const element = overflowbuttonRef.current!;
             showPopup(
                 element,
-                hiddenTabs,
+                items,
                 onOverflowItemSelect,
                 layout
             );
@@ -68,7 +73,7 @@ export const TabSet = (props: ITabSetProps) => {
 
     const onOverflowItemSelect = (item: { node: TabNode; index: number }) => {
         layout.doAction(Actions.selectTab(item.node.getId()));
-        userControlledLeft.current = false;
+        userControlledPositionRef.current = false;
     };
 
     const onDragStart = (event: React.DragEvent<HTMLElement>) => {
@@ -86,12 +91,6 @@ export const TabSet = (props: ITabSetProps) => {
 
     const onPointerDown = (event: React.PointerEvent<HTMLElement>) => {
         if (!isAuxMouseEvent(event)) {
-            let name = node.getName();
-            if (name === undefined) {
-                name = "";
-            } else {
-                name = ": " + name;
-            }
             layout.doAction(Actions.setActiveTabset(node.getId(), layout.getWindowId()));
         }
     };
@@ -144,12 +143,6 @@ export const TabSet = (props: ITabSetProps) => {
     // Start Render
 
     const cm = layout.getClassName;
-
-    // tabbar inner can get shifted left via tab rename, this resets scrollleft to 0
-    if (tabStripInnerRef.current !== null && tabStripInnerRef.current!.scrollLeft !== 0) {
-        tabStripInnerRef.current.scrollLeft = 0;
-    }
-
     const selectedTabNode: TabNode = node.getSelectedNode() as TabNode;
     const path = node.getPath();
 
@@ -191,7 +184,7 @@ export const TabSet = (props: ITabSetProps) => {
     }
 
     if (stickyButtons.length > 0) {
-        if (!node.isEnableTabWrap() && (tabsTruncated || isTabStretch)) {
+        if (!node.isEnableTabWrap() && (isTabOverflow || isTabStretch)) {
             buttons = [...stickyButtons, ...buttons];
         } else {
             tabs.push(<div
@@ -211,7 +204,8 @@ export const TabSet = (props: ITabSetProps) => {
             const overflowTitle = layout.i18nName(I18nLabel.Overflow_Menu_Tooltip);
             let overflowContent;
             if (typeof icons.more === "function") {
-                overflowContent = icons.more(node, hiddenTabs);
+                const items = hiddenTabs.map(h=> {return {index: h, node: (node.getChildren()[h] as TabNode)};});
+                overflowContent = icons.more(node, items);
             } else {
                 overflowContent = (<>
                     {icons.more}
@@ -360,6 +354,7 @@ export const TabSet = (props: ITabSetProps) => {
         }
     } else {
         if (node.isEnableTabStrip()) {
+            const miniScrollbarClasses = cm(CLASSES.FLEXLAYOUT__MINI_SCROLLBAR) + (node.isEnableTabScrollbar()?"":" " + cm(CLASSES.FLEXLAYOUT__MINI_SCROLLBAR_HIDDEN));
             tabStrip = (
                 <div className={tabStripClasses}
                     ref={tabStripRef}
@@ -373,9 +368,12 @@ export const TabSet = (props: ITabSetProps) => {
                     onWheel={onMouseWheel}
                     onDragStart={onDragStart}
                 >
-                    <div ref={tabStripInnerRef} className={cm(CLASSES.FLEXLAYOUT__TABSET_TABBAR_INNER) + " " + cm(CLASSES.FLEXLAYOUT__TABSET_TABBAR_INNER_ + node.getTabLocation())}>
+                    <div ref={tabStripInnerRef} 
+                        className={cm(CLASSES.FLEXLAYOUT__TABSET_TABBAR_INNER) + " " + cm(CLASSES.FLEXLAYOUT__TABSET_TABBAR_INNER_ + node.getTabLocation()) + " " + miniScrollbarClasses}
+                        style={{overflowX: 'auto', overflowY:"hidden"}}
+                        onScroll={onScroll}                        >
                         <div
-                            style={{ left: position, width: (isTabStretch ? "100%" : "10000px") }}
+                            style={{width: (isTabStretch ? "100%" : "none") }}
                             className={cm(CLASSES.FLEXLAYOUT__TABSET_TABBAR_INNER_TAB_CONTAINER) + " " + cm(CLASSES.FLEXLAYOUT__TABSET_TABBAR_INNER_TAB_CONTAINER_ + node.getTabLocation())}
                         >
                             {tabs}

package/src/view/Utils.tsx

@@ -3,7 +3,6 @@ import { Node } from "../model/Node";
 import { TabNode } from "../model/TabNode";
 import { LayoutInternal } from "./Layout";
 import { TabSetNode } from "../model/TabSetNode";
-import { Rect } from "../Rect";
 
 /** @internal */
 export function isDesktop() {
@@ -112,29 +111,6 @@ export function canDockToWindow(node: Node) {
     return false;
 }
 
-export function keepOnScreen(rect: Rect) {
-    rect.snap(10);
-
-    const availableScreenWidth = window.screen.availWidth;
-    const availableScreenHeight = window.screen.availHeight;
-
-    if (rect.x + rect.width > availableScreenWidth || rect.y + rect.height > availableScreenHeight) {
-        // Adjust the rectangle to fit within the available screen space
-        rect.x = Math.max(0, Math.min(rect.x, availableScreenWidth - rect.width));
-        rect.y = Math.max(0, Math.min(rect.y, availableScreenHeight - rect.height));
-    }
-
-    return rect;
-}
-
-export function isOnScreen(rect: Rect) {
-    const availableScreenWidth = window.screen.availWidth;
-    const availableScreenHeight = window.screen.availHeight;
-
-    return (rect.x >= 0 && rect.getRight() <= availableScreenWidth &&
-        rect.y >= 0 || rect.getBottom() <= availableScreenHeight);
-}
-
 export function copyInlineStyles(source: HTMLElement, target: HTMLElement): boolean {
     // Get the inline style attribute from the source element
     const sourceStyle = source.getAttribute('style');

package/style/_base.scss

@@ -245,7 +245,7 @@
                     white-space: nowrap;
                   
                     &_top {
-                        border-top: 2px solid transparent; // if you change this, update the _sizer above
+                        border-top: 2px solid transparent; 
                     }
                     &_bottom {
                         border-bottom: 2px solid transparent;
@@ -337,7 +337,6 @@
             }
             @media (hover: hover) {
                 &:hover {
-                    background-color:var(--color-tab-selected-background);
                     color:var(--color-tab-selected);
                     @include tab_button_hovered_mixin;
                 }
@@ -410,6 +409,8 @@
                 color: var(--color-overflow);
                 font-size: inherit;
                 background-color: transparent;
+                width:2em;
+                overflow: hidden;
             }
         }
 
@@ -534,6 +535,7 @@
         &_inner {
             position: relative;
             box-sizing: border-box;
+            align-items: center;
             display: flex;
             overflow: hidden;
             flex-grow: 1;
@@ -545,7 +547,6 @@
                 padding-right: 2px;
                 box-sizing: border-box;
                 position: absolute;
-                width: 10000px;
 
                 &_right {
                     transform-origin: top left;
@@ -666,6 +667,7 @@
                     color: var(--color-overflow);
                     font-size: inherit;
                     background-color: transparent;
+                    width:2em;
                 }
 
                 &_overflow_top,
@@ -757,4 +759,25 @@
         font-size: var(--font-size);
         font-family: var(--font-family);
     }
+
+    &__mini_scrollbar::-webkit-scrollbar {
+        width: 3px; 
+        height: 3px;
+    }
+
+    &__mini_scrollbar_hidden::-webkit-scrollbar {
+        display: none;
+    }
+    
+    &__mini_scrollbar::-webkit-scrollbar-button {
+        display: none;
+    }
+    
+    &__mini_scrollbar::-webkit-scrollbar-thumb {
+        background: #aaa; 
+        border-radius: 10px;
+    }
+
 }
+
+