flexlayout-react 0.5.16 → 0.5.20

package/src/view/Splitter.tsx

@@ -13,17 +13,19 @@ 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);
     const parentNode = node.getParent() as RowNode | BorderNode;
 
     const onMouseDown = (event: Event | React.MouseEvent<HTMLDivElement, MouseEvent> | React.TouchEvent<HTMLDivElement>) => {
+        DragDrop.instance.setGlassCursorOverride(node.getOrientation() === Orientation.HORZ ? "ns-resize" : "ew-resize");
         DragDrop.instance.startDrag(event, onDragStart, onDragMove, onDragEnd, onDragCancel, undefined, undefined, layout.getCurrentDocument(), layout.getRootDiv());
         pBounds.current = parentNode._getSplitterBounds(node, true);
         const rootdiv = layout.getRootDiv();
@@ -31,7 +33,14 @@ export const Splitter = (props: ISplitterProps) => {
         outlineDiv.current.style.position = "absolute";
         outlineDiv.current.className = layout.getClassName(CLASSES.FLEXLAYOUT__SPLITTER_DRAG);
         outlineDiv.current.style.cursor = node.getOrientation() === Orientation.HORZ ? "ns-resize" : "ew-resize";
-        node.getRect().positionElement(outlineDiv.current);
+        const r = node.getRect();
+        if (node.getOrientation() === Orientation.VERT && r.width < 2) {
+            r.width = 2;
+        } else if (node.getOrientation() === Orientation.HORZ && r.height < 2) {
+            r.height = 2;
+        }
+
+        r.positionElement(outlineDiv.current);
         rootdiv.appendChild(outlineDiv.current);
     };
 
@@ -106,7 +115,8 @@ export const Splitter = (props: ISplitterProps) => {
     };
 
     const cm = layout.getClassName;
-    const style = node._styleWithPosition({
+    let r = node.getRect();
+    const style = r.styleWithPosition({
         cursor: node.getOrientation() === Orientation.HORZ ? "ns-resize" : "ew-resize",
     });
     let className = cm(CLASSES.FLEXLAYOUT__SPLITTER) + " " + cm(CLASSES.FLEXLAYOUT__SPLITTER_ + node.getOrientation().getName());
@@ -119,5 +129,44 @@ export const Splitter = (props: ISplitterProps) => {
         }
     }
 
-    return <div style={style} onTouchStart={onMouseDown} onMouseDown={onMouseDown} className={className} />;
+    const extra = node.getModel().getSplitterExtra();
+    if (extra === 0) {
+        return (<div
+            style={style}
+            data-layout-path={path}
+            className={className}
+            onTouchStart={onMouseDown}
+            onMouseDown={onMouseDown}>
+        </div>);
+    } else {
+        // add extended transparent div for hit testing
+        // extends forward only, so as not to interfere with scrollbars
+        let r2 = r.clone();
+        r2.x = 0;
+        r2.y = 0;
+        if (node.getOrientation() === Orientation.VERT) {
+            r2.width += extra;
+        } else {
+            r2.height += extra;
+        }
+        const style2 = r2.styleWithPosition({
+            cursor: node.getOrientation() === Orientation.HORZ ? "ns-resize" : "ew-resize"
+        });
+
+        const className2 = cm(CLASSES.FLEXLAYOUT__SPLITTER_EXTRA);
+
+        return (
+            <div
+                style={style}
+                data-layout-path={path}
+                className={className}>
+                <div
+                    style={style2}
+                    className={className2}
+                    onTouchStart={onMouseDown}
+                    onMouseDown={onMouseDown}>
+                </div>
+            </div>);
+    }
+
 };

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(() => {
@@ -64,7 +65,12 @@ 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>

package/src/view/TabButton.tsx

@@ -7,6 +7,7 @@ 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 {
@@ -18,22 +19,34 @@ export interface ITabButtonProps {
     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, show, 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 +56,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 +153,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 +171,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 +197,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 +211,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 +226,15 @@ export const TabButton = (props: ITabButtonProps) => {
     return (
         <div
             ref={selfRef}
+            data-layout-path={path}
             style={{
                 visibility: show ? "visible" : "hidden",
             }}
             className={classNames}
             onMouseDown={onMouseDown}
+            onClick={onAuxMouseClick}
+            onAuxClick={onAuxMouseClick}
+            onContextMenu={onContextMenu}
             onTouchStart={onMouseDown}
             title={node.getHelpText()}
         >

package/src/view/TabFloating.tsx

@@ -11,11 +11,22 @@ 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,14 +39,12 @@ 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;
@@ -48,21 +57,34 @@ export const TabFloating = (props: ITabFloatingProps) => {
     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

@@ -17,12 +17,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 +32,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 +44,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) => {
@@ -105,6 +122,7 @@ export const TabSet = (props: ITabSetProps) => {
                 <TabButton
                     layout={layout}
                     node={child}
+                    path={path + "/tb" + i}
                     key={child.getId()}
                     selected={isSelected}
                     show={true}
@@ -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;
+}
+