flexlayout-react 0.8.4 → 0.8.6

package/src/view/PopupMenu.tsx

@@ -3,10 +3,13 @@ import { TabNode } from "../model/TabNode";
 import { CLASSES } from "../Types";
 import { LayoutInternal } from "./Layout";
 import { TabButtonStamp } from "./TabButtonStamp";
+import { TabSetNode } from "../model/TabSetNode";
+import { BorderNode } from "../model/BorderNode";
 
 /** @internal */
 export function showPopup(
     triggerElement: Element,
+    parentNode: TabSetNode | BorderNode,
     items: { index: number; node: TabNode }[],
     onSelect: (item: { index: number; node: TabNode }) => void,
     layout: LayoutInternal,
@@ -60,6 +63,7 @@ export function showPopup(
 
     layout.showControlInPortal(<PopupMenu
         currentDocument={currentDocument}
+        parentNode={parentNode}
         onSelect={onSelect}
         onHide={onHide}
         items={items}
@@ -70,6 +74,7 @@ export function showPopup(
 
 /** @internal */
 interface IPopupMenuProps {
+    parentNode: TabSetNode | BorderNode;
     items: { index: number; node: TabNode }[];
     currentDocument: Document;
     onHide: () => void;
@@ -80,7 +85,7 @@ interface IPopupMenuProps {
 
 /** @internal */
 const PopupMenu = (props: IPopupMenuProps) => {
-    const { items, onHide, onSelect, classNameMapper, layout} = props;
+    const { parentNode, items, onHide, onSelect, classNameMapper, layout } = props;
 
     const onItemClick = (item: { index: number; node: TabNode }, event: React.MouseEvent<HTMLElement, MouseEvent>) => {
         onSelect(item);
@@ -88,38 +93,45 @@ const PopupMenu = (props: IPopupMenuProps) => {
         event.stopPropagation();
     };
 
-    const onDragStart = (event: React.DragEvent<HTMLElement>, node:TabNode) => {
+    const onDragStart = (event: React.DragEvent<HTMLElement>, node: TabNode) => {
         event.stopPropagation(); // prevent starting a tabset drag as well
         layout.setDragNode(event.nativeEvent, node as TabNode);
         setTimeout(() => {
             onHide();
         }, 0);
-       
+
     };
 
     const onDragEnd = (event: React.DragEvent<HTMLElement>) => {
         layout.clearDragMain();
     };
 
-    const itemElements = items.map((item, i) => (
-        <div key={item.index}
-            className={classNameMapper(CLASSES.FLEXLAYOUT__POPUP_MENU_ITEM)}
-            data-layout-path={"/popup-menu/tb" + i}
-            onClick={(event) => onItemClick(item, event)}
-            draggable={true}
-            onDragStart={(e) => onDragStart(e, item.node)}
-            onDragEnd={onDragEnd}
-            title={item.node.getHelpText()} >
-            <TabButtonStamp 
-                node={item.node}
-                layout={layout}
-            />
-        </div>
-    ));
+    const itemElements = items.map((item, i) => {
+        let classes = classNameMapper(CLASSES.FLEXLAYOUT__POPUP_MENU_ITEM);
+        if (parentNode.getSelected() === item.index) {
+            classes += " " + classNameMapper(CLASSES.FLEXLAYOUT__POPUP_MENU_ITEM__SELECTED);
+        }
+        return (
+            <div key={item.index}
+                className={classes}
+                data-layout-path={"/popup-menu/tb" + i}
+                onClick={(event) => onItemClick(item, event)}
+                draggable={true}
+                onDragStart={(e) => onDragStart(e, item.node)}
+                onDragEnd={onDragEnd}
+                title={item.node.getHelpText()} >
+                <TabButtonStamp
+                    node={item.node}
+                    layout={layout}
+                />
+            </div>
+        )
+    }
+    );
 
     return (
         <div className={classNameMapper(CLASSES.FLEXLAYOUT__POPUP_MENU)}
-        data-layout-path="/popup-menu"
+            data-layout-path="/popup-menu"
         >
             {itemElements}
         </div>);

package/src/view/TabOverflowHook.tsx

@@ -4,6 +4,7 @@ import { BorderNode } from "../model/BorderNode";
 import { Orientation } from "../Orientation";
 import { LayoutInternal } from "./Layout";
 import { TabNode } from "../model/TabNode";
+import { startDrag } from "./Utils";
 
 /** @internal */
 export const useTabOverflow = (
@@ -11,6 +12,7 @@ export const useTabOverflow = (
     node: TabSetNode | BorderNode,
     orientation: Orientation,
     tabStripRef: React.RefObject<HTMLElement | null>,
+    miniScrollRef: React.RefObject<HTMLElement | null>,
     tabClassName: string
 ) => {
     const [hiddenTabs, setHiddenTabs] = React.useState<number[]>([]);
@@ -20,8 +22,16 @@ export const useTabOverflow = (
     const userControlledPositionRef = React.useRef<boolean>(false);
     const updateHiddenTabsTimerRef = React.useRef<NodeJS.Timeout | undefined>(undefined);
     const hiddenTabsRef = React.useRef<number[]>([]);
+    const thumbInternalPos = React.useRef<number>(0);
     hiddenTabsRef.current = hiddenTabs;
 
+    // if node changes (new model) then reset scroll to 0
+    React.useEffect(() => {
+        if (tabStripRef.current) {
+            setScrollPosition(0);
+        }
+    }, [node]);
+    
     // if selected node or tabset/border rectangle change then unset usercontrolled (so selected tab will be kept in view)
     React.useEffect(() => {
         userControlledPositionRef.current = false;
@@ -37,9 +47,47 @@ export const useTabOverflow = (
             }
         }
 
-        updateHiddenTabs();  
+        updateHiddenTabs();
+        updateScrollMetrics();
     });
 
+    const updateScrollMetrics = () => {
+        if (tabStripRef.current && miniScrollRef.current) {
+            const t = tabStripRef.current;
+            const s = miniScrollRef.current;
+
+            const size = getSize(t);
+            const scrollSize = getScrollSize(t);
+            const position = getScrollPosition(t);
+
+            if (scrollSize > size && scrollSize > 0) {
+                let thumbSize = size * size / scrollSize;
+                let adjust = 0;
+                if (thumbSize < 20) {
+                    adjust = 20 - thumbSize;
+                    thumbSize = 20;
+                }
+                const thumbPos = position * (size - adjust) / scrollSize; 
+                if (orientation === Orientation.HORZ) {
+                    s.style.width = thumbSize + "px";
+                    s.style.left = thumbPos + "px";
+                } else {
+                    s.style.height = thumbSize + "px";
+                    s.style.top = thumbPos + "px";
+                }
+                s.style.display = "block";
+            } else {
+                s.style.display = "none";
+            }
+
+            if (orientation === Orientation.HORZ) {
+                s.style.bottom = "0px";
+            } else {
+                s.style.right = "0px";
+            }
+        }
+    }
+
     const updateHiddenTabs = () => {
         if (updateHiddenTabsTimerRef.current === undefined) {
             // throttle updates to prevent Maximum update depth exceeded error
@@ -71,11 +119,55 @@ export const useTabOverflow = (
     }
 
     const onScroll = () => {
+        userControlledPositionRef.current = true;
         updateTabRects();
+        updateScrollMetrics()
         updateHiddenTabs();
-        userControlledPositionRef.current = true;
     };
 
+    const onScrollPointerDown = (event: React.PointerEvent<HTMLElement>) => {
+        event.stopPropagation();
+        miniScrollRef.current!.setPointerCapture(event.pointerId)
+        const r = miniScrollRef.current?.getBoundingClientRect()!;
+        if (orientation === Orientation.HORZ) {
+            thumbInternalPos.current = event.clientX - r.x;
+        } else {
+            thumbInternalPos.current = event.clientY - r.y;
+        }
+        userControlledPositionRef.current = true;
+        startDrag(event.currentTarget.ownerDocument, event, onDragMove, onDragEnd, onDragCancel);
+    }
+
+    const onDragMove = (x: number, y: number) => {
+        if (tabStripRef.current && miniScrollRef.current) {
+            const t = tabStripRef.current;
+            const s = miniScrollRef.current;
+            const size = getSize(t);
+            const scrollSize = getScrollSize(t);
+            const thumbSize = getSize(s);
+
+            const r = t.getBoundingClientRect()!;
+            let thumb = 0;
+            if (orientation === Orientation.HORZ) {
+                thumb = x - r.x - thumbInternalPos.current;
+            } else {
+                thumb = y - r.y - thumbInternalPos.current
+            }
+
+            thumb = Math.max(0, Math.min(scrollSize - thumbSize, thumb));
+            if (size > 0) {
+                const scrollPos = thumb * scrollSize / size;
+                setScrollPosition(scrollPos);
+            }
+        }
+    }
+
+    const onDragEnd = () => {
+    }
+
+    const onDragCancel = () => {
+    }
+
     const findSelectedTab: () => Element | undefined = () => {
         let found: Element | undefined = undefined;
         if (tabStripRef.current) {
@@ -132,24 +224,23 @@ export const useTabOverflow = (
     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 {
+            if (Math.abs(event.deltaY) > 0) {
                 delta = -event.deltaY;
+                if (event.deltaMode === 1) {
+                    // DOM_DELTA_LINE	0x01	The delta values are specified in lines.
+                    delta *= 40;
+                }
+                const newPos = getScrollPosition(tabStripRef.current) - delta;
+                const maxScroll = getScrollSize(tabStripRef.current) - getSize(tabStripRef.current);
+                const p = Math.max(0, Math.min(maxScroll, newPos));
+                setScrollPosition(p);
+                updateTabRects();
+                updateHiddenTabs();
+                userControlledPositionRef.current = true;
+                event.stopPropagation();
             }
-            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();
         }
     };
 
@@ -195,15 +286,15 @@ export const useTabOverflow = (
         }
     }
 
-    const getScrollPosition = () => {
+    const getScrollPosition = (elm: Element) => {
         if (orientation === Orientation.HORZ) {
-            return tabStripRef.current!.scrollLeft;
+            return elm.scrollLeft;
         } else {
-            return tabStripRef.current!.scrollTop;
+            return elm.scrollTop;
         }
     }
 
-    return { selfRef, userControlledPositionRef, onScroll, hiddenTabs, onMouseWheel, isTabOverflow };
+    return { selfRef, userControlledPositionRef, onScroll, onScrollPointerDown, hiddenTabs, onMouseWheel, isTabOverflow };
 };
 
 function arraysEqual(arr1: number[], arr2: number[]) {

package/src/view/TabSet.tsx

@@ -24,6 +24,7 @@ export const TabSet = (props: ITabSetProps) => {
     const { node, layout } = props;
 
     const tabStripRef = React.useRef<HTMLDivElement | null>(null);
+    const miniScrollRef = React.useRef<HTMLDivElement | null>(null);
     const tabStripInnerRef = React.useRef<HTMLDivElement | null>(null);
     const contentRef = React.useRef<HTMLDivElement | null>(null);
     const buttonBarRef = React.useRef<HTMLDivElement | null>(null);
@@ -43,26 +44,27 @@ export const TabSet = (props: ITabSetProps) => {
         const newContentRect = Rect.getContentRect(contentRef.current!).relativeTo(layout.getDomRect()!);
         if (!node.getContentRect().equals(newContentRect)) {
             node.setContentRect(newContentRect);
-            setTimeout(()=> { //prevent Maximum update depth exceeded error
+            setTimeout(() => { //prevent Maximum update depth exceeded error
                 layout.redrawInternal("tabset content rect " + newContentRect);
-            },0);
+            }, 0);
         }
     });
 
     // this must be after the useEffect, so the node rect is already set (else window popin will not position tabs correctly)
-    const { selfRef, userControlledPositionRef, onScroll, hiddenTabs, onMouseWheel, isTabOverflow } = 
-        useTabOverflow(layout, node, Orientation.HORZ, tabStripInnerRef, 
+    const { selfRef, userControlledPositionRef, onScroll, onScrollPointerDown, hiddenTabs, onMouseWheel, isTabOverflow } =
+        useTabOverflow(layout, node, Orientation.HORZ, tabStripInnerRef, miniScrollRef,
             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)};});
+        const items = hiddenTabs.map(h => { return { index: h, node: (node.getChildren()[h] as TabNode) }; });
         if (callback !== undefined) {
             callback(node, event, items, onOverflowItemSelect);
         } else {
             const element = overflowbuttonRef.current!;
             showPopup(
                 element,
+                node,
                 items,
                 onOverflowItemSelect,
                 layout
@@ -200,11 +202,11 @@ export const TabSet = (props: ITabSetProps) => {
     }
 
     if (!node.isEnableTabWrap()) {
-         if (hiddenTabs.length > 0) {
+        if (hiddenTabs.length > 0) {
             const overflowTitle = layout.i18nName(I18nLabel.Overflow_Menu_Tooltip);
             let overflowContent;
             if (typeof icons.more === "function") {
-                const items = hiddenTabs.map(h=> {return {index: h, node: (node.getChildren()[h] as TabNode)};});
+                const items = hiddenTabs.map(h => { return { index: h, node: (node.getChildren()[h] as TabNode) }; });
                 overflowContent = icons.more(node, items);
             } else {
                 overflowContent = (<>
@@ -229,10 +231,10 @@ export const TabSet = (props: ITabSetProps) => {
         }
     }
 
-    if (selectedTabNode !== undefined && 
-        layout.isSupportsPopout() && 
-        selectedTabNode.isEnablePopout() && 
-        selectedTabNode.isEnablePopoutIcon() ) {
+    if (selectedTabNode !== undefined &&
+        layout.isSupportsPopout() &&
+        selectedTabNode.isEnablePopout() &&
+        selectedTabNode.isEnablePopoutIcon()) {
 
         const popoutTitle = layout.i18nName(I18nLabel.Popout_Tab);
         buttons.push(
@@ -291,7 +293,7 @@ export const TabSet = (props: ITabSetProps) => {
                 key="active"
                 data-layout-path={path + "/button/active"}
                 title={title}
-                className={cm(CLASSES.FLEXLAYOUT__TAB_TOOLBAR_ICON) }
+                className={cm(CLASSES.FLEXLAYOUT__TAB_TOOLBAR_ICON)}
             >
                 {(typeof icons.activeTabset === "function") ? icons.activeTabset(node) : icons.activeTabset}
             </div>
@@ -335,7 +337,7 @@ export const TabSet = (props: ITabSetProps) => {
         if (node.isEnableTabStrip()) {
             tabStrip = (
                 <div className={tabStripClasses}
-                    style={{ flexWrap: "wrap", gap:"1px", marginTop:"2px" }}
+                    style={{ flexWrap: "wrap", gap: "1px", marginTop: "2px" }}
                     ref={tabStripRef}
                     data-layout-path={path + "/tabstrip"}
                     onPointerDown={onPointerDown}
@@ -354,7 +356,15 @@ export const TabSet = (props: ITabSetProps) => {
         }
     } else {
         if (node.isEnableTabStrip()) {
-            const miniScrollbarClasses = cm(CLASSES.FLEXLAYOUT__MINI_SCROLLBAR) + (node.isEnableTabScrollbar()?"":" " + cm(CLASSES.FLEXLAYOUT__MINI_SCROLLBAR_HIDDEN));
+            let miniScrollbar = undefined;
+            if (node.isEnableTabScrollbar()) {
+                miniScrollbar = (
+                    <div ref={miniScrollRef}
+                        className={cm(CLASSES.FLEXLAYOUT__MINI_SCROLLBAR)}
+                        onPointerDown={onScrollPointerDown}
+                    />
+                );
+            }
             tabStrip = (
                 <div className={tabStripClasses}
                     ref={tabStripRef}
@@ -368,16 +378,20 @@ 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()) + " " + miniScrollbarClasses}
-                        style={{overflowX: 'auto', overflowY:"hidden"}}
-                        onScroll={onScroll}                        >
-                        <div
-                            style={{width: (isTabStretch ? "100%" : "none") }}
-                            className={cm(CLASSES.FLEXLAYOUT__TABSET_TABBAR_INNER_TAB_CONTAINER) + " " + cm(CLASSES.FLEXLAYOUT__TABSET_TABBAR_INNER_TAB_CONTAINER_ + node.getTabLocation())}
+                    <div className={cm(CLASSES.FLEXLAYOUT__MINI_SCROLLBAR_CONTAINER)}>
+                        <div ref={tabStripInnerRef}
+                            className={cm(CLASSES.FLEXLAYOUT__TABSET_TABBAR_INNER) + " " + cm(CLASSES.FLEXLAYOUT__TABSET_TABBAR_INNER_ + node.getTabLocation())}
+                            style={{ overflowX: 'auto', overflowY: "hidden" }}
+                            onScroll={onScroll}
                         >
-                            {tabs}
+                            <div
+                                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}
+                            </div>
                         </div>
+                        {miniScrollbar}
                     </div>
                     {buttonbar}
                 </div>