flexlayout-react 0.5.16 → 0.5.20

package/src/model/TabNode.ts

@@ -39,6 +39,8 @@ class TabNode extends Node implements IDraggable {
         attributeDefinitions.addInherited("icon", "tabIcon").setType(Attribute.STRING);
         attributeDefinitions.addInherited("enableRenderOnDemand", "tabEnableRenderOnDemand").setType(Attribute.BOOLEAN);
         attributeDefinitions.addInherited("enableFloat", "tabEnableFloat").setType(Attribute.BOOLEAN);
+        attributeDefinitions.addInherited("borderWidth", "tabBorderWidth").setType(Attribute.NUMBER);
+        attributeDefinitions.addInherited("borderHeight", "tabBorderHeight").setType(Attribute.NUMBER);
         return attributeDefinitions;
     }
 
@@ -200,7 +202,16 @@ class TabNode extends Node implements IDraggable {
     _setWindow(window: Window | undefined) {
         this._window = window;
     }
+    
+    /** @hidden @internal */
+    _setBorderWidth(width: number) {
+        this._attributes.borderWidth = width;
+    }
 
+    /** @hidden @internal */
+    _setBorderHeight(height: number) {
+        this._attributes.borderHeight = height;
+    }
 
     /** @hidden @internal */
     static getAttributeDefinitions() {

package/src/model/TabSetNode.ts

@@ -4,6 +4,7 @@ import DockLocation from "../DockLocation";
 import DropInfo from "../DropInfo";
 import Orientation from "../Orientation";
 import Rect from "../Rect";
+import { CLASSES } from "../Types";
 import BorderNode from "./BorderNode";
 import IDraggable from "./IDraggable";
 import IDropTarget from "./IDropTarget";
@@ -27,6 +28,9 @@ class TabSetNode extends Node implements IDraggable, IDropTarget {
                 newLayoutNode._addChild(child);
             });
         }
+        if (newLayoutNode._children.length === 0) {
+            newLayoutNode._setSelected(-1);
+        }
 
         if (json.maximized && json.maximized === true) {
             model._setMaximizedTabset(newLayoutNode);
@@ -268,34 +272,44 @@ class TabSetNode extends Node implements IDraggable, IDropTarget {
         if (dragNode === this) {
             const dockLocation = DockLocation.CENTER;
             const outlineRect = this._tabHeaderRect;
-            dropInfo = new DropInfo(this, outlineRect!, dockLocation, -1, "flexlayout__outline_rect");
+            dropInfo = new DropInfo(this, outlineRect!, dockLocation, -1, CLASSES.FLEXLAYOUT__OUTLINE_RECT);
         } else if (this._contentRect!.contains(x, y)) {
             const dockLocation = DockLocation.getLocation(this._contentRect!, x, y);
             const outlineRect = dockLocation.getDockRect(this._rect);
-            dropInfo = new DropInfo(this, outlineRect, dockLocation, -1, "flexlayout__outline_rect");
-        } else if (this._children.length > 0 && this._tabHeaderRect != null && this._tabHeaderRect.contains(x, y)) {
-            let child = this._children[0] as TabNode;
-            let r = child.getTabRect()!;
-            const yy = r.y;
-            const h = r.height;
-            let p = this._tabHeaderRect.x;
-            let childCenter = 0;
-            for (let i = 0; i < this._children.length; i++) {
-                child = this._children[i] as TabNode;
+            dropInfo = new DropInfo(this, outlineRect, dockLocation, -1, CLASSES.FLEXLAYOUT__OUTLINE_RECT);
+        } else if (this._tabHeaderRect != null && this._tabHeaderRect.contains(x, y)) {
+            let r: Rect;
+            let yy: number;
+            let h: number;
+            if (this._children.length === 0) {
+                r = this._tabHeaderRect.clone();
+                yy = r.y + 3;
+                h = r.height - 4;
+                r.width = 2;
+            } else {
+                let child = this._children[0] as TabNode;
                 r = child.getTabRect()!;
-                childCenter = r.x + r.width / 2;
-                if (x >= p && x < childCenter) {
-                    const dockLocation = DockLocation.CENTER;
-                    const outlineRect = new Rect(r.x - 2, yy, 3, h);
-                    dropInfo = new DropInfo(this, outlineRect, dockLocation, i, "flexlayout__outline_rect");
-                    break;
+                yy = r.y;
+                h = r.height;
+                let p = this._tabHeaderRect.x;
+                let childCenter = 0;
+                for (let i = 0; i < this._children.length; i++) {
+                    child = this._children[i] as TabNode;
+                    r = child.getTabRect()!;
+                    childCenter = r.x + r.width / 2;
+                    if (x >= p && x < childCenter) {
+                        const dockLocation = DockLocation.CENTER;
+                        const outlineRect = new Rect(r.x - 2, yy, 3, h);
+                        dropInfo = new DropInfo(this, outlineRect, dockLocation, i, CLASSES.FLEXLAYOUT__OUTLINE_RECT);
+                        break;
+                    }
+                    p = childCenter;
                 }
-                p = childCenter;
             }
             if (dropInfo == null) {
                 const dockLocation = DockLocation.CENTER;
                 const outlineRect = new Rect(r.getRight() - 2, yy, 3, h);
-                dropInfo = new DropInfo(this, outlineRect, dockLocation, this._children.length, "flexlayout__outline_rect");
+                dropInfo = new DropInfo(this, outlineRect, dockLocation, this._children.length, CLASSES.FLEXLAYOUT__OUTLINE_RECT);
             }
         }
 

package/src/view/BorderButton.tsx

@@ -6,6 +6,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 IBorderButtonProps {
@@ -16,16 +17,29 @@ export interface IBorderButtonProps {
     iconFactory?: (node: TabNode) => React.ReactNode | undefined;
     titleFactory?: (node: TabNode) => React.ReactNode | undefined;
     icons?: IIcons;
+    path: string;
 }
 
 /** @hidden @internal */
 export const BorderButton = (props: IBorderButtonProps) => {
-    const { layout, node, selected, border, iconFactory, titleFactory, icons } = props;
+    const { layout, node, selected, border, iconFactory, titleFactory, icons, path } = props;
     const selfRef = React.useRef<HTMLDivElement | null>(null);
 
     const onMouseDown = (event: React.MouseEvent<HTMLDivElement, MouseEvent> | React.TouchEvent<HTMLDivElement>) => {
-        const message = layout.i18nName(I18nLabel.Move_Tab, node.getName());
-        props.layout.dragStart(event, message, node, node.isEnableDrag(), onClick, (event2: Event) => undefined);
+        if (!isAuxMouseEvent(event)) {
+            const message = layout.i18nName(I18nLabel.Move_Tab, node.getName());
+            props.layout.dragStart(event, message, node, node.isEnableDrag(), onClick, (event2: Event) => undefined);
+        }
+    };
+
+    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 = () => {
@@ -105,7 +119,7 @@ export const BorderButton = (props: IBorderButtonProps) => {
         }
     }
 
-    if (typeof leadingContent === undefined && typeof node.getIcon() !== undefined) {
+    if (leadingContent === undefined && node.getIcon() !== undefined) {
         leadingContent = <img src={node.getIcon()} alt="leadingContent" />;
     }
 
@@ -122,14 +136,28 @@ export const BorderButton = (props: IBorderButtonProps) => {
     if (node.isEnableClose()) {
         const closeTitle = layout.i18nName(I18nLabel.Close_Tab);
         buttons.push(
-            <div key="close" title={closeTitle} className={cm(CLASSES.FLEXLAYOUT__BORDER_BUTTON_TRAILING)} onMouseDown={onCloseMouseDown} onClick={onClose} onTouchStart={onCloseMouseDown}>
+            <div 
+                key="close" 
+                data-layout-path={path + "/button/close"}
+                title={closeTitle} 
+                className={cm(CLASSES.FLEXLAYOUT__BORDER_BUTTON_TRAILING)} 
+                onMouseDown={onCloseMouseDown} 
+                onClick={onClose} 
+                onTouchStart={onCloseMouseDown}>
                 {icons?.close}
             </div>
         );
     }
 
     return (
-        <div ref={selfRef} style={{}} className={classNames} onMouseDown={onMouseDown} onTouchStart={onMouseDown} title={node.getHelpText()}>
+        <div ref={selfRef} style={{}} className={classNames} 
+        data-layout-path={path}
+        onMouseDown={onMouseDown} 
+        onClick={onAuxMouseClick}
+        onAuxClick={onAuxMouseClick}
+        onContextMenu={onContextMenu}
+        onTouchStart={onMouseDown} 
+        title={node.getHelpText()}>
             {leading}
             {content}
             {buttons}

package/src/view/BorderTabSet.tsx

@@ -10,6 +10,7 @@ import { I18nLabel } from "../I18nLabel";
 import { useTabOverflow } from "./TabOverflowHook";
 import Orientation from "../Orientation";
 import { CLASSES } from "../Types";
+import { isAuxMouseEvent } from "./TabSet";
 
 /** @hidden @internal */
 export interface IBorderTabSetProps {
@@ -18,11 +19,12 @@ export interface IBorderTabSetProps {
     iconFactory?: (node: TabNode) => React.ReactNode | undefined;
     titleFactory?: (node: TabNode) => React.ReactNode | undefined;
     icons?: IIcons;
+    path: string;
 }
 
 /** @hidden @internal */
 export const BorderTabSet = (props: IBorderTabSetProps) => {
-    const { border, layout, iconFactory, titleFactory, icons } = props;
+    const { border, layout, iconFactory, titleFactory, icons, path } = props;
 
     const toolbarRef = React.useRef<HTMLDivElement | null>(null);
     const overflowbuttonRef = React.useRef<HTMLButtonElement | null>(null);
@@ -30,13 +32,24 @@ export const BorderTabSet = (props: IBorderTabSetProps) => {
 
     const { selfRef, position, userControlledLeft, hiddenTabs, onMouseWheel } = useTabOverflow(border, Orientation.flip(border.getOrientation()), toolbarRef, stickyButtonsRef);
 
+    const onAuxMouseClick = (event: React.MouseEvent<HTMLDivElement, MouseEvent>) => {
+        if (isAuxMouseEvent(event)) {
+            layout.auxMouseClick(border, event);
+        }
+    };
+
+    const onContextMenu = (event: React.MouseEvent<HTMLDivElement, MouseEvent>) => {
+        layout.showContextMenu(border, event);
+    };
+
     const onInterceptMouseDown = (event: React.MouseEvent<HTMLDivElement, MouseEvent> | React.MouseEvent<HTMLButtonElement, MouseEvent> | React.TouchEvent<HTMLButtonElement>) => {
         event.stopPropagation();
     };
 
-    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 }) => {
@@ -44,11 +57,12 @@ export const BorderTabSet = (props: IBorderTabSetProps) => {
         userControlledLeft.current = false;
     };
 
-    const onFloatTab = () => {
+    const onFloatTab = (event: React.MouseEvent<HTMLElement, MouseEvent>) => {
         const selectedTabNode = border.getChildren()[border.getSelected()] as TabNode;
         if (selectedTabNode !== undefined) {
             layout.doAction(Actions.floatTab(selectedTabNode.getId()));
         }
+        event.stopPropagation();
     };
 
     const cm = layout.getClassName;
@@ -65,6 +79,7 @@ export const BorderTabSet = (props: IBorderTabSetProps) => {
                 layout={layout}
                 border={border.getLocation().getName()}
                 node={child}
+                path={path + "/tb" + i}
                 key={child.getId()}
                 selected={isSelected}
                 iconFactory={iconFactory}
@@ -97,7 +112,7 @@ export const BorderTabSet = (props: IBorderTabSetProps) => {
             <button
                 key="overflowbutton"
                 ref={overflowbuttonRef}
-                className={cm("flexlayout__border_toolbar_button_overflow") + " " + cm("flexlayout__border_toolbar_button_overflow_" + border.getLocation().getName())}
+                className={cm(CLASSES.FLEXLAYOUT__BORDER_TOOLBAR_BUTTON_OVERFLOW) + " " + cm(CLASSES.FLEXLAYOUT__BORDER_TOOLBAR_BUTTON_OVERFLOW_ + border.getLocation().getName())}
                 title={overflowTitle}
                 onClick={onOverflowClick}
                 onMouseDown={onInterceptMouseDown}
@@ -145,7 +160,12 @@ export const BorderTabSet = (props: IBorderTabSetProps) => {
     }
 
     return (
-        <div ref={selfRef} style={style} className={borderClasses} onWheel={onMouseWheel}>
+        <div ref={selfRef} dir="ltr" style={style} className={borderClasses} 
+            data-layout-path={path}
+            onClick={onAuxMouseClick}
+            onAuxClick={onAuxMouseClick}
+            onContextMenu={onContextMenu}
+            onWheel={onMouseWheel}>
             <div style={{ height: borderHeight }} className={cm(CLASSES.FLEXLAYOUT__BORDER_INNER) + " " + cm(CLASSES.FLEXLAYOUT__BORDER_INNER_ + border.getLocation().getName())}>
                 <div style={innerStyle} className={cm(CLASSES.FLEXLAYOUT__BORDER_INNER_TAB_CONTAINER) + " " + cm(CLASSES.FLEXLAYOUT__BORDER_INNER_TAB_CONTAINER_ + border.getLocation().getName())}>
                     {tabs}