flexlayout-react 0.8.3 → 0.8.5

package/src/model/BorderNode.ts

@@ -159,6 +159,10 @@ export class BorderNode extends Node implements IDropTarget {
         }
     }
 
+    isEnableTabScrollbar() {
+        return this.getAttr("enableTabScrollbar") as boolean;
+    }
+
     /** @internal */
     setSelected(index: number) {
         this.attributes.selected = index;
@@ -446,6 +450,9 @@ export class BorderNode extends Node implements IDropTarget {
         attributeDefinitions.addInherited("enableAutoHide", "borderEnableAutoHide").setType(Attribute.BOOLEAN).setDescription(
             `hide border if it has zero tabs`
         );
+        attributeDefinitions.addInherited("enableTabScrollbar", "borderEnableTabScrollbar").setType(Attribute.BOOLEAN).setDescription(
+            `whether to show a mini scrollbar for the tabs`
+        );
         return attributeDefinitions;
     }
 }

package/src/model/IJsonModel.ts

@@ -92,6 +92,15 @@ export interface IGlobalAttributes {
 	 */
 	borderEnableDrop?: boolean;
 
+	/**
+	  Value for BorderNode attribute enableTabScrollbar if not overridden
+
+	  whether to show a mini scrollbar for the tabs
+
+	  Default: false
+	 */
+	borderEnableTabScrollbar?: boolean;
+
 	/**
 	  Value for BorderNode attribute maxSize if not overridden
 
@@ -412,6 +421,15 @@ export interface IGlobalAttributes {
 	 */
 	tabSetEnableSingleTabStretch?: boolean;
 
+	/**
+	  Value for TabSetNode attribute enableTabScrollbar if not overridden
+
+	  whether to show a mini scrollbar for the tabs
+
+	  Default: false
+	 */
+	tabSetEnableTabScrollbar?: boolean;
+
 	/**
 	  Value for TabSetNode attribute enableTabStrip if not overridden
 
@@ -424,7 +442,7 @@ export interface IGlobalAttributes {
 	/**
 	  Value for TabSetNode attribute enableTabWrap if not overridden
 
-	  show tabs in location top or bottom
+	  wrap tabs onto multiple lines
 
 	  Default: false
 	 */
@@ -577,6 +595,13 @@ export interface ITabSetAttributes {
 	 */
 	enableSingleTabStretch?: boolean;
 
+	/**
+	  whether to show a mini scrollbar for the tabs
+
+	  Default: inherited from Global attribute tabSetEnableTabScrollbar (default false)
+	 */
+	enableTabScrollbar?: boolean;
+
 	/**
 	  enable tab strip and allow multiple tabs in this tabset
 
@@ -890,6 +915,13 @@ export interface IBorderAttributes {
 	 */
 	enableDrop?: boolean;
 
+	/**
+	  whether to show a mini scrollbar for the tabs
+
+	  Default: inherited from Global attribute borderEnableTabScrollbar (default false)
+	 */
+	enableTabScrollbar?: boolean;
+
 	/**
 	  the maximum size of the tab area
 

package/src/model/Model.ts

@@ -685,6 +685,7 @@ export class Model {
         attributeDefinitions.add("tabMaxHeight", DefaultMax).setType(Attribute.NUMBER);
         attributeDefinitions.add("tabSetMaxWidth", DefaultMax).setType(Attribute.NUMBER);
         attributeDefinitions.add("tabSetMaxHeight", DefaultMax).setType(Attribute.NUMBER);
+        attributeDefinitions.add("tabSetEnableTabScrollbar", false).setType(Attribute.BOOLEAN);
 
         // border
         attributeDefinitions.add("borderSize", 200).setType(Attribute.NUMBER);
@@ -695,6 +696,7 @@ export class Model {
         attributeDefinitions.add("borderAutoSelectTabWhenClosed", false).setType(Attribute.BOOLEAN);
         attributeDefinitions.add("borderClassName", undefined).setType(Attribute.STRING);
         attributeDefinitions.add("borderEnableAutoHide", false).setType(Attribute.BOOLEAN);
+        attributeDefinitions.add("borderEnableTabScrollbar", false).setType(Attribute.BOOLEAN);
 
         return attributeDefinitions;
     }

package/src/model/TabSetNode.ts

@@ -209,6 +209,10 @@ export class TabSetNode extends Node implements IDraggable, IDropTarget {
         return this.getAttr("autoSelectTab") as boolean;
     }
 
+    isEnableTabScrollbar() {
+        return this.getAttr("enableTabScrollbar") as boolean;
+    }
+
     getClassNameTabStrip() {
         return this.getAttr("classNameTabStrip") as string | undefined;
     }
@@ -571,6 +575,11 @@ export class TabSetNode extends Node implements IDraggable, IDropTarget {
         attributeDefinitions.addInherited("enableActiveIcon", "tabSetEnableActiveIcon").setType(Attribute.BOOLEAN).setDescription(
             `whether the active icon (*) should be displayed when the tabset is active`
         );
+
+        attributeDefinitions.addInherited("enableTabScrollbar", "tabSetEnableTabScrollbar").setType(Attribute.BOOLEAN).setDescription(
+            `whether to show a mini scrollbar for the tabs`
+        );
+
         return attributeDefinitions;
     }
 

package/src/view/BorderTabSet.tsx

@@ -25,17 +25,21 @@ export const BorderTabSet = (props: IBorderTabSetProps) => {
     const { border, layout, size } = props;
 
     const toolbarRef = React.useRef<HTMLDivElement | null>(null);
+    const miniScrollRef = React.useRef<HTMLDivElement | null>(null);
     const overflowbuttonRef = React.useRef<HTMLButtonElement | null>(null);
     const stickyButtonsRef = React.useRef<HTMLDivElement | null>(null);
+    const tabStripInnerRef = React.useRef<HTMLDivElement | null>(null);
 
     const icons = layout.getIcons();
 
     React.useLayoutEffect(() => {
         border.setTabHeaderRect(Rect.getBoundingClientRect(selfRef.current!).relativeTo(layout.getDomRect()!));
     });
-    
-    const { selfRef, position, userControlledLeft, hiddenTabs, onMouseWheel, tabsTruncated }
-        = useTabOverflow(border, Orientation.flip(border.getOrientation()), toolbarRef, stickyButtonsRef);
+
+    const { selfRef, userControlledPositionRef, onScroll, onScrollPointerDown, hiddenTabs, onMouseWheel, isTabOverflow } =
+        useTabOverflow(layout, border, Orientation.flip(border.getOrientation()), tabStripInnerRef, miniScrollRef,
+            layout.getClassName(CLASSES.FLEXLAYOUT__BORDER_BUTTON)
+        );
 
     const onAuxMouseClick = (event: React.MouseEvent<HTMLElement, MouseEvent>) => {
         if (isAuxMouseEvent(event)) {
@@ -53,12 +57,16 @@ export const BorderTabSet = (props: IBorderTabSetProps) => {
 
     const onOverflowClick = (event: React.MouseEvent<HTMLElement, MouseEvent>) => {
         const callback = layout.getShowOverflowMenu();
+        const items = hiddenTabs.map(h => { return { index: h, node: (border.getChildren()[h] as TabNode) }; });
         if (callback !== undefined) {
-            callback(border, event, hiddenTabs, onOverflowItemSelect);
+
+            callback(border, event, items, onOverflowItemSelect);
         } else {
             const element = overflowbuttonRef.current!;
-            showPopup(element,
-                hiddenTabs,
+            showPopup(
+                element,
+                border,
+                items,
                 onOverflowItemSelect,
                 layout);
         }
@@ -67,7 +75,7 @@ export const BorderTabSet = (props: IBorderTabSetProps) => {
 
     const onOverflowItemSelect = (item: { node: TabNode; index: number }) => {
         layout.doAction(Actions.selectTab(item.node.getId()));
-        userControlledLeft.current = false;
+        userControlledPositionRef.current = false;
     };
 
     const onPopoutTab = (event: React.MouseEvent<HTMLElement, MouseEvent>) => {
@@ -125,7 +133,7 @@ export const BorderTabSet = (props: IBorderTabSetProps) => {
     }
 
     if (stickyButtons.length > 0) {
-        if (tabsTruncated) {
+        if (isTabOverflow) {
             buttons = [...stickyButtons, ...buttons];
         } else {
             tabButtons.push(<div
@@ -144,7 +152,9 @@ export const BorderTabSet = (props: IBorderTabSetProps) => {
         const overflowTitle = layout.i18nName(I18nLabel.Overflow_Menu_Tooltip);
         let overflowContent;
         if (typeof icons.more === "function") {
-            overflowContent = icons.more(border, hiddenTabs);
+            const items = hiddenTabs.map(h => { return { index: h, node: (border.getChildren()[h] as TabNode) }; });
+
+            overflowContent = icons.more(border, items);
         } else {
             overflowContent = (<>
                 {icons.more}
@@ -193,14 +203,24 @@ export const BorderTabSet = (props: IBorderTabSetProps) => {
     let outerStyle = {};
     const borderHeight = size - 1;
     if (border.getLocation() === DockLocation.LEFT) {
-        innerStyle = { right: "100%", top: position };
-        outerStyle = { width: borderHeight };
+        innerStyle = { right: "100%", top: 0 };
+        outerStyle = { width: borderHeight, overflowY: "auto" };
     } else if (border.getLocation() === DockLocation.RIGHT) {
-        innerStyle = { left: "100%" , top:position};
-        outerStyle = { width: borderHeight };
+        innerStyle = { left: "100%", top: 0 };
+        outerStyle = { width: borderHeight, overflowY: "auto" };
     } else {
-        innerStyle = { left:position};
-        outerStyle = { height: borderHeight };
+        innerStyle = { left: 0 };
+        outerStyle = { height: borderHeight, overflowX: "auto" };
+    }
+
+    let miniScrollbar = undefined;
+    if (border.isEnableTabScrollbar()) {
+        miniScrollbar = (
+            <div ref={miniScrollRef}
+                className={cm(CLASSES.FLEXLAYOUT__MINI_SCROLLBAR)}
+                onPointerDown={onScrollPointerDown}
+            />
+        );
     }
 
     return (
@@ -217,19 +237,24 @@ export const BorderTabSet = (props: IBorderTabSetProps) => {
             onContextMenu={onContextMenu}
             onWheel={onMouseWheel}
         >
-            <div
-                style={outerStyle}
-                className={cm(CLASSES.FLEXLAYOUT__BORDER_INNER) + " " + cm(CLASSES.FLEXLAYOUT__BORDER_INNER_ + border.getLocation().getName())}
-            >
+            <div className={cm(CLASSES.FLEXLAYOUT__MINI_SCROLLBAR_CONTAINER)}>
                 <div
-                    style={innerStyle}
-                    className={cm(CLASSES.FLEXLAYOUT__BORDER_INNER_TAB_CONTAINER) + " " + cm(CLASSES.FLEXLAYOUT__BORDER_INNER_TAB_CONTAINER_ + border.getLocation().getName())}
+                    ref={tabStripInnerRef}
+                    className={cm(CLASSES.FLEXLAYOUT__BORDER_INNER) + " " + cm(CLASSES.FLEXLAYOUT__BORDER_INNER_ + border.getLocation().getName())}
+                    style={outerStyle}
+                    onScroll={onScroll}
                 >
-                    {tabButtons}
+                    <div
+                        style={innerStyle}
+                        className={cm(CLASSES.FLEXLAYOUT__BORDER_INNER_TAB_CONTAINER) + " " + cm(CLASSES.FLEXLAYOUT__BORDER_INNER_TAB_CONTAINER_ + border.getLocation().getName())}
+                    >
+                        {tabButtons}
+                    </div>
                 </div>
+                {miniScrollbar}
             </div>
             {toolbar}
-        </div>
+        </div >
     );
 
 };

package/src/view/Layout.tsx

@@ -1224,7 +1224,7 @@ export class LayoutInternal extends React.Component<ILayoutInternalProps, ILayou
     // *************************** End Drag Drop *************************************
 }
 
-export const FlexLayoutVersion = "0.8.1";
+export const FlexLayoutVersion = "0.8.5";
 
 export type DragRectRenderCallback = (
     content: React.ReactNode | undefined,

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/Splitter.tsx

@@ -35,8 +35,8 @@ export const Splitter = (props: ISplitterProps) => {
     let extra = node.getModel().getSplitterExtra();
 
     if (!isDesktop()) {
-        // make hit test area on mobile at least 30px
-        extra = Math.max(30, extra + size) - size;
+        // make hit test area on mobile at least 20px
+        extra = Math.max(20, extra + size) - size;
     }
 
     React.useEffect(() => {