flexlayout-react 0.5.15 → 0.5.19

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);
@@ -59,6 +63,7 @@ class TabSetNode extends Node implements IDraggable, IDropTarget {
         attributeDefinitions.addInherited("enableDrag", "tabSetEnableDrag");
         attributeDefinitions.addInherited("enableDivide", "tabSetEnableDivide");
         attributeDefinitions.addInherited("enableMaximize", "tabSetEnableMaximize");
+        attributeDefinitions.addInherited("enableClose", "tabSetEnableClose");
         attributeDefinitions.addInherited("classNameTabStrip", "tabSetClassNameTabStrip");
         attributeDefinitions.addInherited("classNameHeader", "tabSetClassNameHeader");
         attributeDefinitions.addInherited("enableTabStrip", "tabSetEnableTabStrip");
@@ -181,6 +186,10 @@ class TabSetNode extends Node implements IDraggable, IDropTarget {
         return this._getAttr("enableMaximize") as boolean;
     }
 
+    isEnableClose() {
+        return this._getAttr("enableClose") as boolean;
+    }
+
     canMaximize() {
         if (this.isEnableMaximize()) {
             // always allow maximize toggle if already maximized
@@ -263,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);
             }
         }
 
@@ -340,6 +359,11 @@ class TabSetNode extends Node implements IDraggable, IDropTarget {
         });
     }
 
+    /** @hidden @internal */
+    _delete() {
+        (this._parent as RowNode)._removeChild(this);
+    }
+
     /** @hidden @internal */
     _remove(node: TabNode) {
         const removedIndex = this._removeChild(node);

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 {
@@ -24,8 +25,20 @@ export const BorderButton = (props: IBorderButtonProps) => {
     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 = () => {
@@ -129,7 +142,13 @@ export const BorderButton = (props: IBorderButtonProps) => {
     }
 
     return (
-        <div ref={selfRef} style={{}} className={classNames} onMouseDown={onMouseDown} onTouchStart={onMouseDown}>
+        <div ref={selfRef} style={{}} className={classNames} 
+        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 {
@@ -30,13 +31,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 +56,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;
@@ -97,7 +110,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 +158,11 @@ export const BorderTabSet = (props: IBorderTabSetProps) => {
     }
 
     return (
-        <div ref={selfRef} style={style} className={borderClasses} onWheel={onMouseWheel}>
+        <div ref={selfRef} dir="ltr" style={style} className={borderClasses} 
+            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}