flexlayout-react 0.5.15 → 0.5.19

package/src/view/Layout.tsx

@@ -1,4 +1,5 @@
 import * as React from "react";
+import * as ReactDOM from "react-dom";
 import DockLocation from "../DockLocation";
 import DragDrop from "../DragDrop";
 import DropInfo from "../DropInfo";
@@ -25,6 +26,11 @@ import { FloatingWindowTab } from "./FloatingWindowTab";
 import { TabFloating } from "./TabFloating";
 import { IJsonTabNode } from "../model/IJsonModel";
 
+export type CustomDragCallback = (dragging: TabNode | IJsonTabNode, over: TabNode, x: number, y: number, location: DockLocation) => void;
+export type DragRectRenderCallback = (text: String, node?: Node, json?: IJsonTabNode) => React.ReactElement | undefined;
+export type FloatingTabPlaceholderRenderCallback = (dockPopout: () => void, showPopout: () => void) => React.ReactElement | undefined;
+export type NodeMouseEvent = (node: TabNode | TabSetNode | BorderNode, event: React.MouseEvent<HTMLElement, MouseEvent>) => void;
+
 export interface ILayoutProps {
     model: Model;
     factory: (node: TabNode) => React.ReactNode;
@@ -37,30 +43,37 @@ export interface ILayoutProps {
     onAction?: (action: Action) => Action | undefined;
     onRenderTab?: (
         node: TabNode,
-        renderValues: ITabRenderValues,
+        renderValues: ITabRenderValues, // change the values in this object as required
     ) => void;
     onRenderTabSet?: (
         tabSetNode: TabSetNode | BorderNode,
-        renderValues: ITabSetRenderValues,
+        renderValues: ITabSetRenderValues, // change the values in this object as required
     ) => void;
     onModelChange?: (model: Model) => void;
     onExternalDrag?: (event: React.DragEvent<HTMLDivElement>) => undefined | {
-      dragText: string,
-      json: any,
-      onDrop?: (node?: Node, event?: Event) => void
+        dragText: string,
+        json: any,
+        onDrop?: (node?: Node, event?: Event) => void
     };
     classNameMapper?: (defaultClassName: string) => string;
     i18nMapper?: (id: I18nLabel, param?: string) => string | undefined;
     supportsPopout?: boolean | undefined;
     popoutURL?: string | undefined;
     realtimeResize?: boolean | undefined;
-    onTabDrag?: (dragging: TabNode | IJsonTabNode, over: TabNode, x: number, y: number, location: DockLocation) => undefined | {
+    onTabDrag?: (dragging: TabNode | IJsonTabNode, over: TabNode, x: number, y: number, location: DockLocation, refresh: () => void) => undefined | {
         x: number,
         y: number,
         width: number,
         height: number,
-        callback: (dragging: TabNode | IJsonTabNode, over: TabNode, x: number, y: number, location: DockLocation) => void
+        callback: CustomDragCallback,
+        // Called once when `callback` is not going to be called anymore (user canceled the drag, moved mouse and you returned a different callback, etc)
+        invalidated?: () => void,
+        cursor?: string | undefined
     };
+    onRenderDragRect?: DragRectRenderCallback;
+    onRenderFloatingTabPlaceholder?: FloatingTabPlaceholderRenderCallback;
+    onContextMenu?: NodeMouseEvent;
+    onAuxMouseClick?: NodeMouseEvent;
 }
 export interface IFontValues {
     size?: string;
@@ -94,10 +107,12 @@ export interface ILayoutState {
     calculatedTabBarSize: number;
     calculatedBorderBarSize: number;
     editingTab?: TabNode;
+    showHiddenBorder: DockLocation;
 }
 
 export interface IIcons {
     close?: React.ReactNode;
+    closeTabset?: React.ReactNode;
     popout?: React.ReactNode;
     maximize?: React.ReactNode;
     restore?: React.ReactNode;
@@ -106,12 +121,14 @@ export interface IIcons {
 
 export interface ICustomDropDestination {
     rect: Rect;
-    callback: (dragging: TabNode | IJsonTabNode, over: TabNode, x: number, y: number, location: DockLocation) => void;
+    callback: CustomDragCallback;
+    invalidated: (() => void) | undefined;
     dragging: TabNode | IJsonTabNode;
     over: TabNode;
     x: number;
     y: number;
     location: DockLocation;
+    cursor: string | undefined;
 }
 
 /** @hidden @internal */
@@ -145,7 +162,9 @@ export interface ILayoutCallbacks {
     styleFont: (style: Record<string, string>) => Record<string, string>;
     setEditingTab(tabNode?: TabNode): void;
     getEditingTab(): TabNode | undefined;
-
+    getOnRenderFloatingTabPlaceholder(): FloatingTabPlaceholderRenderCallback | undefined;
+    showContextMenu(node: TabNode | TabSetNode | BorderNode, event: React.MouseEvent<HTMLElement, MouseEvent>) : void;
+    auxMouseClick(node: TabNode | TabSetNode | BorderNode, event: React.MouseEvent<HTMLElement, MouseEvent>) : void;
 }
 
 // Popout windows work in latest browsers based on webkit (Chrome, Opera, Safari, latest Edge) and Firefox. They do
@@ -163,6 +182,7 @@ const defaultSupportsPopout: boolean = isDesktop && !isIEorEdge;
  * A React component that hosts a multi-tabbed layout
  */
 export class Layout extends React.Component<ILayoutProps, ILayoutState> {
+
     /** @hidden @internal */
     private selfRef: React.RefObject<HTMLDivElement>;
     /** @hidden @internal */
@@ -192,6 +212,8 @@ export class Layout extends React.Component<ILayoutProps, ILayoutState> {
     /** @hidden @internal */
     private dragDiv?: HTMLDivElement;
     /** @hidden @internal */
+    private dragRectRendered: boolean = true;
+    /** @hidden @internal */
     private dragDivText: string = "";
     /** @hidden @internal */
     private dropInfo: DropInfo | undefined;
@@ -229,7 +251,7 @@ export class Layout extends React.Component<ILayoutProps, ILayoutState> {
     /** @hidden @internal */
     private firstRender: boolean;
     /** @hidden @internal */
-    private resizeObserver? : ResizeObserver;
+    private resizeObserver?: ResizeObserver;
 
     constructor(props: ILayoutProps) {
         super(props);
@@ -245,11 +267,13 @@ export class Layout extends React.Component<ILayoutProps, ILayoutState> {
         this.icons = props.closeIcon ? Object.assign({ close: props.closeIcon }, props.icons) : props.icons;
         this.firstRender = true;
 
-        this.state = { rect: new Rect(0, 0, 0, 0), 
-            calculatedHeaderBarSize: 25, 
-            calculatedTabBarSize: 26, 
+        this.state = {
+            rect: new Rect(0, 0, 0, 0),
+            calculatedHeaderBarSize: 25,
+            calculatedTabBarSize: 26,
             calculatedBorderBarSize: 30,
             editingTab: undefined,
+            showHiddenBorder: DockLocation.CENTER,
         };
 
         this.onDragEnter = this.onDragEnter.bind(this);
@@ -387,8 +411,8 @@ export class Layout extends React.Component<ILayoutProps, ILayoutState> {
     }
 
     /** @hidden @internal */
-    onTabDrag(dragging: TabNode | IJsonTabNode, over: TabNode, x: number, y: number, location: DockLocation) {
-        return this.props.onTabDrag?.(dragging, over, x, y, location);
+    onTabDrag(...args: Parameters<Required<ILayoutProps>['onTabDrag']>) {
+        return this.props.onTabDrag?.(...args);
     }
 
     /** @hidden @internal */
@@ -403,7 +427,7 @@ export class Layout extends React.Component<ILayoutProps, ILayoutState> {
 
     /** @hidden @internal */
     setEditingTab(tabNode?: TabNode) {
-        this.setState({editingTab:tabNode});
+        this.setState({ editingTab: tabNode });
     }
 
     /** @hidden @internal */
@@ -436,6 +460,7 @@ export class Layout extends React.Component<ILayoutProps, ILayoutState> {
             tabBarSize: this.state.calculatedTabBarSize,
             borderBarSize: this.state.calculatedBorderBarSize,
         };
+        this.props.model._setShowHiddenBorder(this.state.showHiddenBorder);
 
         this.centerRect = this.props.model._layout(this.state.rect, metrics);
 
@@ -641,7 +666,7 @@ export class Layout extends React.Component<ILayoutProps, ILayoutState> {
      * Adds a new tab by dragging a labeled panel to the drop location, dragging starts immediatelly
      * @param dragText the text to show on the drag panel
      * @param json the json for the new tab node
-     * @param onDrop a callback to call when the drag is complete
+     * @param onDrop a callback to call when the drag is complete (node and event will be undefined if the drag was cancelled)
      */
     addTabWithDragAndDrop(dragText: string, json: IJsonTabNode, onDrop?: (node?: Node, event?: Event) => void) {
         this.fnNewNodeDropped = onDrop;
@@ -655,9 +680,9 @@ export class Layout extends React.Component<ILayoutProps, ILayoutState> {
      *
      * @param dragText the text to show on the drag panel
      * @param json the json for the new tab node
-     * @param onDrop a callback to call when the drag is complete
+     * @param onDrop a callback to call when the drag is complete (node and event will be undefined if the drag was cancelled)
      */
-    addTabWithDragAndDropIndirect(dragText: string, json: IJsonTabNode, onDrop?: () => void) {
+    addTabWithDragAndDropIndirect(dragText: string, json: IJsonTabNode, onDrop?: (node?: Node, event?: Event) => void) {
         this.fnNewNodeDropped = onDrop;
         this.newTabJson = json;
 
@@ -665,15 +690,21 @@ export class Layout extends React.Component<ILayoutProps, ILayoutState> {
 
         this.dragDivText = dragText;
         this.dragDiv = this.currentDocument!.createElement("div");
-        this.dragDiv.className = this.getClassName("flexlayout__drag_rect");
-        this.dragDiv.innerHTML = this.dragDivText;
+        this.dragDiv.className = this.getClassName(CLASSES.FLEXLAYOUT__DRAG_RECT);
         this.dragDiv.addEventListener("mousedown", this.onDragDivMouseDown);
         this.dragDiv.addEventListener("touchstart", this.onDragDivMouseDown);
 
-        const r = new Rect(10, 10, 150, 50);
-        r.centerInRect(this.state.rect);
-        this.dragDiv.style.left = r.x + "px";
-        this.dragDiv.style.top = r.y + "px";
+        this.dragRectRender(this.dragDivText, undefined, this.newTabJson, () => {
+            if (this.dragDiv) {
+                // now it's been rendered into the dom it can be centered
+                this.dragDiv.style.visibility = "visible";
+                const domRect = this.dragDiv.getBoundingClientRect();
+                const r = new Rect(0, 0, domRect?.width, domRect?.height);
+                r.centerInRect(this.state.rect);
+                this.dragDiv.style.left = r.x + "px";
+                this.dragDiv.style.top = r.y + "px";
+            }
+        });
 
         const rootdiv = this.selfRef.current;
         rootdiv!.appendChild(this.dragDiv);
@@ -688,8 +719,16 @@ export class Layout extends React.Component<ILayoutProps, ILayoutState> {
             this.fnNewNodeDropped();
             this.fnNewNodeDropped = undefined;
         }
+
+        try {
+            this.customDrop?.invalidated?.()
+        } catch (e) {
+            console.error(e)
+        }
+
         DragDrop.instance.hideGlass();
         this.newTabJson = undefined;
+        this.customDrop = undefined;
     };
 
     /** @hidden @internal */
@@ -699,11 +738,11 @@ export class Layout extends React.Component<ILayoutProps, ILayoutState> {
 
             try {
                 rootdiv.removeChild(this.outlineDiv!);
-            } catch (e) {}
+            } catch (e) { }
 
             try {
                 rootdiv.removeChild(this.dragDiv!);
-            } catch (e) {}
+            } catch (e) { }
 
             this.dragDiv = undefined;
             this.hideEdges(rootdiv);
@@ -711,9 +750,19 @@ export class Layout extends React.Component<ILayoutProps, ILayoutState> {
                 this.fnNewNodeDropped();
                 this.fnNewNodeDropped = undefined;
             }
+
+            try {
+                this.customDrop?.invalidated?.()
+            } catch (e) {
+                console.error(e)
+            }
+
             DragDrop.instance.hideGlass();
             this.newTabJson = undefined;
+            this.customDrop = undefined;
         }
+        this.setState({ showHiddenBorder: DockLocation.CENTER });
+
     };
 
     /** @hidden @internal */
@@ -740,6 +789,31 @@ export class Layout extends React.Component<ILayoutProps, ILayoutState> {
         }
     };
 
+    /** @hidden @internal */
+    dragRectRender = (text: String, node?: Node, json?: IJsonTabNode, onRendered?: () => void) => {
+        let content: React.ReactElement | undefined = <div style={{ whiteSpace: "pre" }}>{text.replace("<br>", "\n")}</div>;
+
+        if (this.props.onRenderDragRect !== undefined) {
+            const customContent = this.props.onRenderDragRect(text, node, json);
+            if (customContent !== undefined) {
+                content = customContent;
+            }
+        }
+
+        // hide div until the render is complete
+        this.dragDiv!.style.visibility = "hidden";
+        this.dragRectRendered = false;
+        ReactDOM.render(<DragRectRenderWrapper
+            // wait for it to be rendered
+            onRendered={() => {
+                this.dragRectRendered = true;
+                onRendered?.();
+            }}
+        >
+            {content}
+        </DragRectRenderWrapper>, this.dragDiv!);
+    };
+
     /** @hidden @internal */
     onDragStart = () => {
         this.dropInfo = undefined;
@@ -753,7 +827,8 @@ export class Layout extends React.Component<ILayoutProps, ILayoutState> {
         if (this.dragDiv == null) {
             this.dragDiv = this.currentDocument!.createElement("div");
             this.dragDiv.className = this.getClassName(CLASSES.FLEXLAYOUT__DRAG_RECT);
-            this.dragDiv.innerHTML = this.dragDivText;
+            this.dragRectRender(this.dragDivText, this.dragNode, this.newTabJson);
+
             rootdiv.appendChild(this.dragDiv);
         }
         // add edge indicators
@@ -780,53 +855,33 @@ export class Layout extends React.Component<ILayoutProps, ILayoutState> {
             y: event.clientY - clientRect.top,
         };
 
-        this.dragDiv!.style.left = pos.x - this.dragDiv!.getBoundingClientRect().width / 2 + "px";
+        this.checkForBorderToShow(pos.x, pos.y);
+
+        // keep it between left & right
+        const dragRect = this.dragDiv!.getBoundingClientRect();
+        let newLeft = pos.x - dragRect.width / 2;
+        if (newLeft + dragRect.width > clientRect.width) {
+            newLeft = clientRect.width - dragRect.width;
+        }
+        newLeft = Math.max(0, newLeft);
+
+        this.dragDiv!.style.left = newLeft + "px";
         this.dragDiv!.style.top = pos.y + 5 + "px";
+        if (this.dragRectRendered && this.dragDiv!.style.visibility === "hidden") {
+            // make visible once the drag rect has been rendered
+            this.dragDiv!.style.visibility = "visible";
+        }
 
         let dropInfo = this.props.model._findDropTargetNode(this.dragNode!, pos.x, pos.y);
         if (dropInfo) {
-            this.customDrop = undefined;
-
-            const dragging = this.newTabJson || (this.dragNode instanceof TabNode ? this.dragNode : undefined);
-            if (dragging && (dropInfo.node instanceof TabSetNode || dropInfo.node instanceof BorderNode) && dropInfo.index === -1) {
-                const selected = dropInfo.node.getSelectedNode() as TabNode | undefined;
-                const tabRect = selected?.getRect()
-
-                if (selected && tabRect?.contains(pos.x, pos.y)) {
-                    let customDrop: ICustomDropDestination | undefined = undefined;
-
-                    try {
-                        const dest = this.onTabDrag(dragging, selected, pos.x - tabRect.x, pos.y - tabRect.y, dropInfo.location);
-
-                        if (dest) {
-                            customDrop = {
-                                rect: new Rect(dest.x + tabRect.x, dest.y + tabRect.y, dest.width, dest.height),
-                                callback: dest.callback,
-                                dragging: dragging,
-                                over: selected,
-                                x: pos.x - tabRect.x,
-                                y: pos.y - tabRect.y,
-                                location: dropInfo.location
-                            };
-                        }
-                    } catch (e) {
-                        console.error(e)
-                    }
-
-                    this.customDrop = customDrop;
-                }
-            }
-
-            this.dropInfo = dropInfo;
-            this.outlineDiv!.className = this.getClassName(this.customDrop ? "flexlayout__outline_rect" : dropInfo.className);
-
-            if (this.customDrop) {
-                this.customDrop.rect.positionElement(this.outlineDiv!);
+            if (this.props.onTabDrag) {
+                this.handleCustomTabDrag(dropInfo, pos, event);
             } else {
+                this.dropInfo = dropInfo;
+                this.outlineDiv!.className = this.getClassName(dropInfo.className);
                 dropInfo.rect.positionElement(this.outlineDiv!);
+                this.outlineDiv!.style.visibility = "visible";
             }
-
-            this.outlineDiv!.style.visibility = "visible";
         }
     };
 
@@ -844,8 +899,12 @@ export class Layout extends React.Component<ILayoutProps, ILayoutState> {
                 this.newTabJson = undefined;
 
                 try {
-                    const {callback, dragging, over, x, y, location} = this.customDrop;
+                    const { callback, dragging, over, x, y, location } = this.customDrop;
                     callback(dragging, over, x, y, location);
+                    if (this.fnNewNodeDropped != null) {
+                        this.fnNewNodeDropped();
+                        this.fnNewNodeDropped = undefined;
+                    }
                 } catch (e) {
                     console.error(e)
                 }
@@ -861,8 +920,70 @@ export class Layout extends React.Component<ILayoutProps, ILayoutState> {
                 this.doAction(Actions.moveNode(this.dragNode.getId(), this.dropInfo.node.getId(), this.dropInfo.location, this.dropInfo.index));
             }
         }
+        this.setState({ showHiddenBorder: DockLocation.CENTER });
     };
 
+    /** @hidden @internal */
+    private handleCustomTabDrag(dropInfo: DropInfo, pos: { x: number; y: number; }, event: React.MouseEvent<Element, MouseEvent>) {
+        let invalidated = this.customDrop?.invalidated;
+        const currentCallback = this.customDrop?.callback;
+        this.customDrop = undefined;
+
+        const dragging = this.newTabJson || (this.dragNode instanceof TabNode ? this.dragNode : undefined);
+        if (dragging && (dropInfo.node instanceof TabSetNode || dropInfo.node instanceof BorderNode) && dropInfo.index === -1) {
+            const selected = dropInfo.node.getSelectedNode() as TabNode | undefined;
+            const tabRect = selected?.getRect();
+
+            if (selected && tabRect?.contains(pos.x, pos.y)) {
+                let customDrop: ICustomDropDestination | undefined = undefined;
+
+                try {
+                    const dest = this.onTabDrag(dragging, selected, pos.x - tabRect.x, pos.y - tabRect.y, dropInfo.location, () => this.onDragMove(event));
+
+                    if (dest) {
+                        customDrop = {
+                            rect: new Rect(dest.x + tabRect.x, dest.y + tabRect.y, dest.width, dest.height),
+                            callback: dest.callback,
+                            invalidated: dest.invalidated,
+                            dragging: dragging,
+                            over: selected,
+                            x: pos.x - tabRect.x,
+                            y: pos.y - tabRect.y,
+                            location: dropInfo.location,
+                            cursor: dest.cursor
+                        };
+                    }
+                } catch (e) {
+                    console.error(e);
+                }
+
+                if (customDrop?.callback === currentCallback) {
+                    invalidated = undefined;
+                }
+
+                this.customDrop = customDrop;
+            }
+        }
+
+        this.dropInfo = dropInfo;
+        this.outlineDiv!.className = this.getClassName(this.customDrop ? CLASSES.FLEXLAYOUT__OUTLINE_RECT : dropInfo.className);
+
+        if (this.customDrop) {
+            this.customDrop.rect.positionElement(this.outlineDiv!);
+        } else {
+            dropInfo.rect.positionElement(this.outlineDiv!);
+        }
+
+        DragDrop.instance.setGlassCursorOverride(this.customDrop?.cursor);
+        this.outlineDiv!.style.visibility = "visible";
+
+        try {
+            invalidated?.();
+        } catch (e) {
+            console.error(e);
+        }
+    }
+
     /** @hidden @internal */
     onDragEnter(event: React.DragEvent<HTMLDivElement>) {
         // DragDrop keeps track of number of dragenters minus the number of
@@ -878,6 +999,40 @@ export class Layout extends React.Component<ILayoutProps, ILayoutState> {
         }
     }
 
+
+    /** @hidden @internal */
+    checkForBorderToShow(x: number, y: number) {
+        const r = this.props.model._getOuterInnerRects().outer;
+        const c = r.getCenter();
+        const margin = this.edgeRectWidth;
+        const offset = this.edgeRectLength / 2;
+
+        let overEdge = false;
+        if (this.props.model.isEnableEdgeDock() && this.state.showHiddenBorder === DockLocation.CENTER) {
+            if ((y > c.y - offset && y < c.y + offset) ||
+                (x > c.x - offset && x < c.x + offset)) {
+                overEdge = true;
+            }
+        }
+
+        let location = DockLocation.CENTER;
+        if (!overEdge) {
+            if (x <= r.x + margin) {
+                location = DockLocation.LEFT;
+            } else if (x >= r.getRight() - margin) {
+                location = DockLocation.RIGHT;
+            } else if (y <= r.y + margin) {
+                location = DockLocation.TOP;
+            } else if (y >= r.getBottom() - margin) {
+                location = DockLocation.BOTTOM;
+            }
+        }
+
+        if (location !== this.state.showHiddenBorder) {
+            this.setState({ showHiddenBorder: location });
+        }
+    }
+
     /** @hidden @internal */
     showEdges(rootdiv: HTMLElement) {
         if (this.props.model.isEnableEdgeDock()) {
@@ -951,7 +1106,7 @@ export class Layout extends React.Component<ILayoutProps, ILayoutState> {
                 rootdiv.removeChild(this.edgeLeftDiv!);
                 rootdiv.removeChild(this.edgeBottomDiv!);
                 rootdiv.removeChild(this.edgeRightDiv!);
-            } catch (e) {}
+            } catch (e) { }
         }
 
         this.edgesShown = false;
@@ -993,6 +1148,44 @@ export class Layout extends React.Component<ILayoutProps, ILayoutState> {
         }
         return message;
     }
+
+    /** @hidden @internal */
+    getOnRenderFloatingTabPlaceholder() {
+        return this.props.onRenderFloatingTabPlaceholder;
+    }
+
+    /** @hidden @internal */
+    showContextMenu(node: TabNode | TabSetNode | BorderNode, event: React.MouseEvent<HTMLElement, MouseEvent>) {
+        if (this.props.onContextMenu) {
+            this.props.onContextMenu(node, event);
+        }
+    }
+
+    /** @hidden @internal */
+    auxMouseClick(node: TabNode | TabSetNode | BorderNode, event: React.MouseEvent<HTMLElement, MouseEvent>) {
+        if (this.props.onAuxMouseClick) {
+            this.props.onAuxMouseClick(node, event);
+        }
+    }
 }
 
+// wrapper round the drag rect renderer that can call
+// a method once the rendering is written to the dom
+
+/** @hidden @internal */
+interface IDragRectRenderWrapper {
+    onRendered?: () => void;
+    children: React.ReactNode;
+}
+
+/** @hidden @internal */
+const DragRectRenderWrapper = (props: IDragRectRenderWrapper) => {
+    React.useEffect(() => {
+        props.onRendered?.();
+    }, [props]);
+
+    return (<React.Fragment>
+        {props.children}
+    </React.Fragment>)
+}
 export default Layout;

package/src/view/Splitter.tsx

@@ -24,6 +24,7 @@ export const Splitter = (props: ISplitterProps) => {
     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 +32,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 +114,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 +128,42 @@ 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}
+            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}
+                className={className}>
+                <div
+                    style={style2}
+                    className={className2}
+                    onTouchStart={onMouseDown}
+                    onMouseDown={onMouseDown}>
+                </div>
+            </div>);
+    }
+
 };

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 {
@@ -28,12 +29,23 @@ export const TabButton = (props: ITabButtonProps) => {
     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()));
     };
@@ -211,7 +223,11 @@ export const TabButton = (props: ITabButtonProps) => {
             }}
             className={classNames}
             onMouseDown={onMouseDown}
+            onClick={onAuxMouseClick}
+            onAuxClick={onAuxMouseClick}
+            onContextMenu={onContextMenu}
             onTouchStart={onMouseDown}
+            title={node.getHelpText()}
         >
             {leading}
             {content}