flexlayout-react 0.5.17 → 0.5.21

package/src/view/Splitter.tsx

@@ -13,11 +13,12 @@ import { ILayoutCallbacks } from "./Layout";
 export interface ISplitterProps {
     layout: ILayoutCallbacks;
     node: SplitterNode;
+    path: string;
 }
 
 /** @hidden @internal */
 export const Splitter = (props: ISplitterProps) => {
-    const { layout, node } = props;
+    const { layout, node, path } = props;
 
     const pBounds = React.useRef<number[]>([]);
     const outlineDiv = React.useRef<HTMLDivElement | undefined>(undefined);
@@ -132,6 +133,7 @@ export const Splitter = (props: ISplitterProps) => {
     if (extra === 0) {
         return (<div
             style={style}
+            data-layout-path={path}
             className={className}
             onTouchStart={onMouseDown}
             onMouseDown={onMouseDown}>
@@ -156,6 +158,7 @@ export const Splitter = (props: ISplitterProps) => {
         return (
             <div
                 style={style}
+                data-layout-path={path}
                 className={className}>
                 <div
                     style={style2}

package/src/view/Tab.tsx

@@ -15,11 +15,12 @@ export interface ITabProps {
     selected: boolean;
     node: TabNode;
     factory: (node: TabNode) => React.ReactNode;
+    path: string;
 }
 
 /** @hidden @internal */
 export const Tab = (props: ITabProps) => {
-    const { layout, selected, node, factory } = props;
+    const { layout, selected, node, factory, path } = props;
     const [renderComponent, setRenderComponent] = React.useState<boolean>(!props.node.isEnableRenderOnDemand() || props.selected);
 
     React.useLayoutEffect(() => {
@@ -40,15 +41,17 @@ export const Tab = (props: ITabProps) => {
     };
 
     const cm = layout.getClassName;
+    const useVisibility = node.getModel().isUseVisibility();
 
     const parentNode = node.getParent() as TabSetNode | BorderNode;
-    const style: Record<string, any> = node._styleWithPosition({
-        display: selected ? "block" : "none",
-    });
+    const style: Record<string, any> = node._styleWithPosition();
+    if (!selected) {
+        hideElement(style, useVisibility);
+    }
 
     if (parentNode instanceof TabSetNode) {
         if (node.getModel().getMaximizedTabset() !== undefined && !parentNode.isMaximized()) {
-            style.display = "none";
+            hideElement(style, useVisibility);
         }
     }
 
@@ -64,10 +67,23 @@ export const Tab = (props: ITabProps) => {
     }
 
     return (
-        <div className={className} onMouseDown={onMouseDown} onTouchStart={onMouseDown} style={style}>
+        <div 
+            className={className} 
+            data-layout-path={path}
+            onMouseDown={onMouseDown} 
+            onTouchStart={onMouseDown} 
+            style={style}>
             <ErrorBoundary message={props.layout.i18nName(I18nLabel.Error_rendering_component)}>
                 <Fragment>{child}</Fragment>
             </ErrorBoundary>
         </div>
     );
 };
+
+export function hideElement(style: Record<string, any>, useVisibility: ConstrainBoolean ) {
+    if (useVisibility) {
+        style.visibility = "hidden";
+    } else {
+        style.display = "none";
+    }
+}

package/src/view/TabButton.tsx

@@ -7,33 +7,45 @@ import Rect from "../Rect";
 import { IIcons, ILayoutCallbacks, ITitleObject } from "./Layout";
 import { ICloseType } from "../model/ICloseType";
 import { CLASSES } from "../Types";
+import { isAuxMouseEvent } from "./TabSet";
 
 /** @hidden @internal */
 export interface ITabButtonProps {
     layout: ILayoutCallbacks;
     node: TabNode;
-    show: boolean;
     selected: boolean;
     height: number;
     iconFactory?: (node: TabNode) => React.ReactNode | undefined;
     titleFactory?: (node: TabNode) => React.ReactNode | undefined;
     icons?: IIcons;
+    path: string;
 }
 
 /** @hidden @internal */
 export const TabButton = (props: ITabButtonProps) => {
-    const { layout, node, show, selected, iconFactory, titleFactory, icons } = props;
+    const { layout, node, selected, iconFactory, titleFactory, icons, path } = props;
     const selfRef = React.useRef<HTMLDivElement | null>(null);
     const contentRef = React.useRef<HTMLInputElement | null>(null);
     const contentWidth = React.useRef<number>(0);
 
     const onMouseDown = (event: React.MouseEvent<HTMLDivElement, MouseEvent> | React.TouchEvent<HTMLDivElement>) => {
-        if (!layout.getEditingTab()) {
+
+        if (!isAuxMouseEvent(event) && !layout.getEditingTab()) {
             const message = layout.i18nName(I18nLabel.Move_Tab, node.getName());
             layout.dragStart(event, message, node, node.isEnableDrag(), onClick, onDoubleClick);
         }
     };
 
+    const onAuxMouseClick = (event: React.MouseEvent<HTMLDivElement, MouseEvent>) => {
+        if (isAuxMouseEvent(event)) {
+            layout.auxMouseClick(node, event);
+        }
+    };
+
+    const onContextMenu = (event: React.MouseEvent<HTMLDivElement, MouseEvent>) => {
+        layout.showContextMenu(node, event);
+    };
+
     const onClick = () => {
         layout.doAction(Actions.selectTab(node.getId()));
     };
@@ -43,7 +55,7 @@ export const TabButton = (props: ITabButtonProps) => {
             layout.setEditingTab(node);
             layout.getCurrentDocument()!.body.addEventListener("mousedown", onEndEdit);
             layout.getCurrentDocument()!.body.addEventListener("touchstart", onEndEdit);
-        } 
+        }
         // else {
         //     const parentNode = node.getParent() as TabSetNode;
         //     if (parentNode.canMaximize()) {
@@ -140,8 +152,8 @@ export const TabButton = (props: ITabButtonProps) => {
     let name = node.getName();
 
     function isTitleObject(obj: any): obj is ITitleObject {
-        return obj.titleContent !== undefined 
-      }
+        return obj.titleContent !== undefined
+    }
 
     if (titleFactory !== undefined) {
         const titleObj = titleFactory(node);
@@ -158,7 +170,7 @@ export const TabButton = (props: ITabButtonProps) => {
         }
     }
 
-    if (typeof leadingContent === undefined && typeof node.getIcon() !== undefined) {
+    if (leadingContent === undefined && node.getIcon() !== undefined) {
         leadingContent = <img src={node.getIcon()} alt="leadingContent" />;
     }
 
@@ -184,6 +196,7 @@ export const TabButton = (props: ITabButtonProps) => {
                 style={contentStyle}
                 ref={contentRef}
                 className={cm(CLASSES.FLEXLAYOUT__TAB_BUTTON_TEXTBOX)}
+                data-layout-path={path + "/textbox"}
                 type="text"
                 autoFocus={true}
                 defaultValue={node.getName()}
@@ -197,7 +210,13 @@ export const TabButton = (props: ITabButtonProps) => {
     if (node.isEnableClose()) {
         const closeTitle = layout.i18nName(I18nLabel.Close_Tab);
         buttons.push(
-            <div key="close" title={closeTitle} className={cm(CLASSES.FLEXLAYOUT__TAB_BUTTON_TRAILING)} onMouseDown={onCloseMouseDown} onClick={onClose} onTouchStart={onCloseMouseDown}>
+            <div
+                key="close"
+                data-layout-path={path + "/button/close"}
+                title={closeTitle}
+                className={cm(CLASSES.FLEXLAYOUT__TAB_BUTTON_TRAILING)}
+                onMouseDown={onCloseMouseDown} onClick={onClose}
+                onTouchStart={onCloseMouseDown}>
                 {icons?.close}
             </div>
         );
@@ -206,11 +225,12 @@ export const TabButton = (props: ITabButtonProps) => {
     return (
         <div
             ref={selfRef}
-            style={{
-                visibility: show ? "visible" : "hidden",
-            }}
+            data-layout-path={path}
             className={classNames}
             onMouseDown={onMouseDown}
+            onClick={onAuxMouseClick}
+            onAuxClick={onAuxMouseClick}
+            onContextMenu={onContextMenu}
             onTouchStart={onMouseDown}
             title={node.getHelpText()}
         >

package/src/view/TabFloating.tsx

@@ -5,17 +5,29 @@ import TabSetNode from "../model/TabSetNode";
 import { CLASSES } from "../Types";
 import { ILayoutCallbacks } from "./Layout";
 import { I18nLabel } from "../I18nLabel";
+import { hideElement } from "./Tab";
 
 /** @hidden @internal */
 export interface ITabFloatingProps {
     layout: ILayoutCallbacks;
     selected: boolean;
     node: TabNode;
+    path: string;
 }
 
 /** @hidden @internal */
 export const TabFloating = (props: ITabFloatingProps) => {
-    const { layout, selected, node } = props;
+    const { layout, selected, node, path } = props;
+
+    const showPopout = () => {
+        if (node.getWindow()) {
+            node.getWindow()!.focus();
+        }
+    }
+
+    const dockPopout = () => {
+        layout.doAction(Actions.unFloatTab(node.getId()));
+    }
 
     const onMouseDown = () => {
         const parent = node.getParent() as TabSetNode;
@@ -28,41 +40,53 @@ export const TabFloating = (props: ITabFloatingProps) => {
 
     const onClickFocus = (event: React.MouseEvent<HTMLAnchorElement, MouseEvent>) => {
         event.preventDefault();
-        if (node.getWindow()) {
-            node.getWindow()!.focus();
-        }
+        showPopout();
     };
 
     const onClickDock = (event: React.MouseEvent<HTMLAnchorElement, MouseEvent>) => {
         event.preventDefault();
-        layout.doAction(Actions.unFloatTab(node.getId()));
+        dockPopout();
     };
 
     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);
     const dockMessage = layout.i18nName(I18nLabel.Floating_Window_Dock_Window);
 
-    return (
-        <div className={cm(CLASSES.FLEXLAYOUT__TAB_FLOATING)} onMouseDown={onMouseDown} onTouchStart={onMouseDown} style={style}>
-            <div className={cm(CLASSES.FLEXLAYOUT__TAB_FLOATING_INNER)}>
-                <div>{message}</div>
-                <div>
-                    <a href="#" onClick={onClickFocus}>
-                        {showMessage}
-                    </a>
-                </div>
-                <div>
-                    <a href="#" onClick={onClickDock}>
-                        {dockMessage}
-                    </a>
+    const customRenderCallback = layout.getOnRenderFloatingTabPlaceholder();
+    if (customRenderCallback) {
+        return (
+            <div className={cm(CLASSES.FLEXLAYOUT__TAB_FLOATING)} onMouseDown={onMouseDown} onTouchStart={onMouseDown} style={style}>
+                {customRenderCallback(dockPopout, showPopout)}
+            </div>
+        );
+    } else {
+        return (
+            <div className={cm(CLASSES.FLEXLAYOUT__TAB_FLOATING)}
+                data-layout-path={path}
+                onMouseDown={onMouseDown}
+                onTouchStart={onMouseDown}
+                style={style}>
+                <div className={cm(CLASSES.FLEXLAYOUT__TAB_FLOATING_INNER)}>
+                    <div>{message}</div>
+                    <div>
+                        <a href="#" onClick={onClickFocus}>
+                            {showMessage}
+                        </a>
+                    </div>
+                    <div>
+                        <a href="#" onClick={onClickDock}>
+                            {dockMessage}
+                        </a>
+                    </div>
                 </div>
             </div>
-        </div>
-    );
+        );
+    }
 };

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 } from "./Tab";
 
 /** @hidden @internal */
 export interface ITabSetProps {
@@ -17,12 +18,13 @@ export interface ITabSetProps {
     iconFactory?: (node: TabNode) => React.ReactNode | undefined;
     titleFactory?: (node: TabNode) => React.ReactNode | undefined;
     icons?: IIcons;
-    editingTab?: TabNode; 
+    editingTab?: TabNode;
+    path?: string;
 }
 
 /** @hidden @internal */
 export const TabSet = (props: ITabSetProps) => {
-    const { node, layout, iconFactory, titleFactory, icons } = props;
+    const { node, layout, iconFactory, titleFactory, icons, path } = props;
 
     const toolbarRef = React.useRef<HTMLDivElement | null>(null);
     const overflowbuttonRef = React.useRef<HTMLButtonElement | null>(null);
@@ -31,9 +33,10 @@ export const TabSet = (props: ITabSetProps) => {
 
     const { selfRef, position, userControlledLeft, hiddenTabs, onMouseWheel, tabsTruncated } = useTabOverflow(node, Orientation.HORZ, toolbarRef, stickyButtonsRef);
 
-    const onOverflowClick = () => {
+    const onOverflowClick = (event: React.MouseEvent<HTMLElement, MouseEvent>) => {
         const element = overflowbuttonRef.current!;
         showPopup(layout.getRootDiv(), element, hiddenTabs, onOverflowItemSelect, layout.getClassName);
+        event.stopPropagation();
     };
 
     const onOverflowItemSelect = (item: { node: TabNode; index: number }) => {
@@ -42,37 +45,52 @@ export const TabSet = (props: ITabSetProps) => {
     };
 
     const onMouseDown = (event: React.MouseEvent<HTMLDivElement, MouseEvent> | React.TouchEvent<HTMLDivElement>) => {
-        let name = node.getName();
-        if (name === undefined) {
-            name = "";
-        } else {
-            name = ": " + name;
+        if (!isAuxMouseEvent(event)) {
+            let name = node.getName();
+            if (name === undefined) {
+                name = "";
+            } else {
+                name = ": " + name;
+            }
+            layout.doAction(Actions.setActiveTabset(node.getId()));
+            if (!layout.getEditingTab()) {
+                const message = layout.i18nName(I18nLabel.Move_Tabset, name);
+                layout.dragStart(event, message, node, node.isEnableDrag(), (event2: Event) => undefined, onDoubleClick);
+            }
         }
-        layout.doAction(Actions.setActiveTabset(node.getId()));
-        if (!layout.getEditingTab()) {
-            const message = layout.i18nName(I18nLabel.Move_Tabset, name);
-            layout.dragStart(event, message, node, node.isEnableDrag(), (event2: Event) => undefined, onDoubleClick);
+    };
+
+    const onAuxMouseClick = (event: React.MouseEvent<HTMLDivElement, MouseEvent>) => {
+        if (isAuxMouseEvent(event)) {
+            layout.auxMouseClick(node, event);
         }
     };
 
+    const onContextMenu = (event: React.MouseEvent<HTMLDivElement, MouseEvent>) => {
+        layout.showContextMenu(node, event);
+    };
+
     const onInterceptMouseDown = (event: React.MouseEvent | React.TouchEvent) => {
         event.stopPropagation();
     };
 
-    const onMaximizeToggle = () => {
+    const onMaximizeToggle = (event: React.MouseEvent<HTMLElement, MouseEvent>) => {
         if (node.canMaximize()) {
             layout.maximize(node);
         }
+        event.stopPropagation();
     };
 
-    const onClose = () => {
+    const onClose = (event: React.MouseEvent<HTMLElement, MouseEvent>) => {
         layout.doAction(Actions.deleteTabset(node.getId()));
+        event.stopPropagation();
     };
 
-    const onFloatTab = () => {
+    const onFloatTab = (event: React.MouseEvent<HTMLElement, MouseEvent>) => {
         if (selectedTabNode !== undefined) {
             layout.doAction(Actions.floatTab(selectedTabNode.getId()));
         }
+        event.stopPropagation();
     };
 
     const onDoubleClick = (event: Event) => {
@@ -93,7 +111,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 = [];
@@ -105,9 +123,9 @@ export const TabSet = (props: ITabSetProps) => {
                 <TabButton
                     layout={layout}
                     node={child}
+                    path={path + "/tb" + i}
                     key={child.getId()}
                     selected={isSelected}
-                    show={true}
                     height={node.getTabStripHeight()}
                     iconFactory={iconFactory}
                     titleFactory={titleFactory}
@@ -153,6 +171,8 @@ export const TabSet = (props: ITabSetProps) => {
         buttons.push(
             <button
                 key="overflowbutton"
+                data-layout-path={path + "/button/overflow"}
+
                 ref={overflowbuttonRef}
                 className={cm(CLASSES.FLEXLAYOUT__TAB_BUTTON_OVERFLOW)}
                 title={overflowTitle}
@@ -171,6 +191,7 @@ export const TabSet = (props: ITabSetProps) => {
         buttons.push(
             <button
                 key="float"
+                data-layout-path={path + "/button/float"}
                 title={floatTitle}
                 className={cm(CLASSES.FLEXLAYOUT__TAB_TOOLBAR_BUTTON) + " " + cm(CLASSES.FLEXLAYOUT__TAB_TOOLBAR_BUTTON_FLOAT)}
                 onClick={onFloatTab}
@@ -188,6 +209,7 @@ export const TabSet = (props: ITabSetProps) => {
         btns.push(
             <button
                 key="max"
+                data-layout-path={path + "/button/max"}
                 title={node.isMaximized() ? minTitle : maxTitle}
                 className={cm(CLASSES.FLEXLAYOUT__TAB_TOOLBAR_BUTTON) + " " + cm(CLASSES.FLEXLAYOUT__TAB_TOOLBAR_BUTTON_ + (node.isMaximized() ? "max" : "min"))}
                 onClick={onMaximizeToggle}
@@ -205,6 +227,7 @@ export const TabSet = (props: ITabSetProps) => {
         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}
@@ -269,7 +292,13 @@ export const TabSet = (props: ITabSetProps) => {
         }
 
         header = (
-            <div className={tabHeaderClasses} style={{ height: node.getHeaderHeight() + "px" }} onMouseDown={onMouseDown} onTouchStart={onMouseDown}>
+            <div className={tabHeaderClasses} style={{ height: node.getHeaderHeight() + "px" }}
+                data-layout-path={path + "/header"}
+                onMouseDown={onMouseDown}
+                onContextMenu={onContextMenu}
+                onClick={onAuxMouseClick}
+                onAuxClick={onAuxMouseClick}
+                onTouchStart={onMouseDown}>
                 <div className={cm(CLASSES.FLEXLAYOUT__TABSET_HEADER_CONTENT)}>{headerContent}</div>
                 {headerToolbar}
             </div>
@@ -284,7 +313,13 @@ export const TabSet = (props: ITabSetProps) => {
         tabStripStyle["bottom"] = "0px";
     }
     tabStrip = (
-        <div className={tabStripClasses} style={tabStripStyle} onMouseDown={onMouseDown} onTouchStart={onMouseDown}>
+        <div className={tabStripClasses} style={tabStripStyle}
+            data-layout-path={path + "/tabstrip"}
+            onMouseDown={onMouseDown}
+            onContextMenu={onContextMenu}
+            onClick={onAuxMouseClick}
+            onAuxClick={onAuxMouseClick}
+            onTouchStart={onMouseDown}>
             <div ref={tabbarInnerRef} className={cm(CLASSES.FLEXLAYOUT__TABSET_TABBAR_INNER) + " " + cm(CLASSES.FLEXLAYOUT__TABSET_TABBAR_INNER_ + node.getTabLocation())}>
                 <div
                     style={{ left: position }}
@@ -300,9 +335,26 @@ export const TabSet = (props: ITabSetProps) => {
     style = layout.styleFont(style);
 
     return (
-        <div ref={selfRef} style={style} className={cm(CLASSES.FLEXLAYOUT__TABSET)} onWheel={onMouseWheel}>
+        <div ref={selfRef} 
+            dir="ltr" 
+            data-layout-path={path}
+            style={style} 
+            className={cm(CLASSES.FLEXLAYOUT__TABSET)} 
+            onWheel={onMouseWheel}>
             {header}
             {tabStrip}
         </div>
     );
 };
+
+/** @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;
+}
+