flexlayout-react 0.5.18 → 0.6.0

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "flexlayout-react",
-    "version": "0.5.18",
+    "version": "0.6.0",
     "description": "A multi-tab docking layout manager",
     "main": "lib/index.js",
     "types": "./declarations/index.d.ts",
@@ -20,14 +20,16 @@
     ],
     "scripts": {
         "start": "webpack serve",
-        "build": "npm run build:commonjs && npm run build:umd && npm run build:umd:min && npm run css",
+        "build": " npm run css && npm run test && npm run build:commonjs && npm run build:umd && npm run build:umd:min",
         "build:commonjs": "tsc -p tsconfig2.json",
         "build:umd": "webpack --mode=development --config webpack_build.config.js",
         "build:umd:min": "webpack --mode=production --config webpack_build_min.config.js",
-        "test": "jasmine",
         "lint:eslint": "eslint src/*",
         "doc": "typedoc --out typedoc --exclude \"**/examples/**/*.tsx\" --excludeInternal --disableSources --excludePrivate --excludeProtected --readme none ./src",
-        "css": "sass style/gray.scss style/gray.css && sass style/light.scss style/light.css && sass style/dark.scss style/dark.css"
+        "css": "sass style/gray.scss style/gray.css && sass style/light.scss style/light.css && sass style/light.scss test/style/light.css && sass style/dark.scss style/dark.css",
+        "cypress": "cypress open-ct",
+        "cypress-firefox": "cypress open-ct --browser firefox",
+        "test": "cypress run-ct"
     },
     "author": "Caplin Systems Ltd",
     "repository": "https://github.com/caplin/FlexLayout",
@@ -40,14 +42,17 @@
         "extends": "react-app"
     },
     "devDependencies": {
-        "@types/jasmine": "^3.7.2",
+        "@cypress/react": "^5.10.2",
+        "@cypress/webpack-dev-server": "^1.7.0",
         "@types/node": "^15.0.2",
         "@types/react": "^17.0.5",
         "@types/react-dom": "^17.0.4",
         "@types/uuid": "^8.3.1",
         "awesome-typescript-loader": "^5.2.0",
-        "jasmine": "^3.7.0",
+        "cypress": "^8.7.0",
         "prettier": "^2.3.0",
+        "react": "^17.0.2",
+        "react-dom": "^17.0.2",
         "react-scripts": "4.0.3",
         "sass": "^1.32.12",
         "source-map-loader": "^1.1.2",

package/src/I18nLabel.ts

@@ -1,7 +1,7 @@
 export enum I18nLabel {
     Close_Tab = "Close",
     Close_Tabset = "Close tabset",
-    Move_Tab = "Move: ",
+    Move_Tab = "Move: ", // no longer used
     Move_Tabset = "Move tabset",
     Maximize = "Maximize tabset",
     Restore = "Restore tabset",

package/src/PopupMenu.tsx

@@ -1,21 +1,28 @@
 import * as React from "react";
 import * as ReactDOM from "react-dom";
+import { DragDrop } from ".";
 import TabNode from "./model/TabNode";
+import { CLASSES } from "./Types";
+import { ILayoutCallbacks } from "./view/Layout";
+import { TabButtonStamp } from "./view/TabButtonStamp";
 
 /** @hidden @internal */
 export function showPopup(
-    layoutDiv: HTMLDivElement,
     triggerElement: Element,
     items: { index: number; node: TabNode }[],
     onSelect: (item: { index: number; node: TabNode }) => void,
-    classNameMapper: (defaultClassName: string) => string
+    layout: ILayoutCallbacks,
+    iconFactory?: (node: TabNode) => React.ReactNode | undefined,
+    titleFactory?: (node: TabNode) => React.ReactNode | undefined,
 ) {
+    const layoutDiv = layout.getRootDiv();
+    const classNameMapper = layout.getClassName;
     const currentDocument = triggerElement.ownerDocument;
     const triggerRect = triggerElement.getBoundingClientRect();
     const layoutRect = layoutDiv.getBoundingClientRect();
 
     const elm = currentDocument.createElement("div");
-    elm.className = classNameMapper("flexlayout__popup_menu_container");
+    elm.className = classNameMapper(CLASSES.FLEXLAYOUT__POPUP_MENU_CONTAINER);
     if (triggerRect.left < layoutRect.left + layoutRect.width / 2) {
         elm.style.left = triggerRect.left - layoutRect.left + "px";
     } else {
@@ -27,27 +34,40 @@ export function showPopup(
     } else {
         elm.style.bottom = layoutRect.bottom - triggerRect.bottom + "px";
     }
+    DragDrop.instance.addGlass(() => onHide());
+    DragDrop.instance.setGlassCursorOverride("default");
+
     layoutDiv.appendChild(elm);
 
     const onHide = () => {
+        DragDrop.instance.hideGlass();
         layoutDiv.removeChild(elm);
         ReactDOM.unmountComponentAtNode(elm);
-        elm.removeEventListener("mouseup", onElementMouseUp);
-        currentDocument.removeEventListener("mouseup", onDocMouseUp);
+        elm.removeEventListener("mousedown", onElementMouseDown);
+        currentDocument.removeEventListener("mousedown", onDocMouseDown);
     };
 
-    const onElementMouseUp = (event: Event) => {
+    const onElementMouseDown = (event: Event) => {
         event.stopPropagation();
     };
 
-    const onDocMouseUp = (event: Event) => {
+    const onDocMouseDown = (event: Event) => {
         onHide();
     };
 
-    elm.addEventListener("mouseup", onElementMouseUp);
-    currentDocument.addEventListener("mouseup", onDocMouseUp);
+    elm.addEventListener("mousedown", onElementMouseDown);
+    currentDocument.addEventListener("mousedown", onDocMouseDown);
 
-    ReactDOM.render(<PopupMenu currentDocument={currentDocument} onSelect={onSelect} onHide={onHide} items={items} classNameMapper={classNameMapper} />, elm);
+    ReactDOM.render(<PopupMenu
+        currentDocument={currentDocument}
+        onSelect={onSelect}
+        onHide={onHide}
+        items={items}
+        classNameMapper={classNameMapper}
+        layout={layout}
+        iconFactory={iconFactory}
+        titleFactory={titleFactory}
+    />, elm);
 }
 
 /** @hidden @internal */
@@ -57,11 +77,14 @@ interface IPopupMenuProps {
     onHide: () => void;
     onSelect: (item: { index: number; node: TabNode }) => void;
     classNameMapper: (defaultClassName: string) => string;
+    layout: ILayoutCallbacks;
+    iconFactory?: (node: TabNode) => React.ReactNode | undefined;
+    titleFactory?: (node: TabNode) => React.ReactNode | undefined;
 }
 
 /** @hidden @internal */
 const PopupMenu = (props: IPopupMenuProps) => {
-    const { items, onHide, onSelect, classNameMapper } = props;
+    const { items, onHide, onSelect, classNameMapper, layout, iconFactory, titleFactory} = props;
 
     const onItemClick = (item: { index: number; node: TabNode }, event: React.MouseEvent<HTMLDivElement, MouseEvent>) => {
         onSelect(item);
@@ -69,11 +92,27 @@ const PopupMenu = (props: IPopupMenuProps) => {
         event.stopPropagation();
     };
 
-    const itemElements = items.map((item) => (
-        <div key={item.index} className={classNameMapper("flexlayout__popup_menu_item")} onClick={(event) => onItemClick(item, event)} title={item.node.getHelpText()}>
-            {item.node._getRenderedName()}
+    const itemElements = items.map((item, i) => (
+        <div key={item.index}
+            className={classNameMapper(CLASSES.FLEXLAYOUT__POPUP_MENU_ITEM)}
+            data-layout-path={"/popup-menu/tb" + i}
+            onClick={(event) => onItemClick(item, event)}
+            title={item.node.getHelpText()} >
+            {item.node.getModel().isLegacyOverflowMenu() ? 
+            item.node._getNameForOverflowMenu() :
+            <TabButtonStamp 
+                node={item.node}
+                layout={layout}
+                iconFactory={iconFactory}
+                titleFactory={titleFactory}
+            />}
         </div>
     ));
 
-    return <div className={classNameMapper("flexlayout__popup_menu")}>{itemElements}</div>;
+    return (
+        <div className={classNameMapper(CLASSES.FLEXLAYOUT__POPUP_MENU)}
+        data-layout-path="/popup-menu"
+        >
+            {itemElements}
+        </div>);
 };

package/src/Types.ts

@@ -9,6 +9,8 @@ export enum CLASSES {
     FLEXLAYOUT__BORDER_BUTTON_TRAILING = "flexlayout__border_button_trailing",
     FLEXLAYOUT__BORDER_BUTTON__SELECTED = "flexlayout__border_button--selected",
     FLEXLAYOUT__BORDER_BUTTON__UNSELECTED = "flexlayout__border_button--unselected",
+    FLEXLAYOUT__BORDER_TOOLBAR_BUTTON_OVERFLOW = "flexlayout__border_toolbar_button_overflow",
+    FLEXLAYOUT__BORDER_TOOLBAR_BUTTON_OVERFLOW_ = "flexlayout__border_toolbar_button_overflow_",
 
     FLEXLAYOUT__BORDER_INNER = "flexlayout__border_inner",
     FLEXLAYOUT__BORDER_INNER_ = "flexlayout__border_inner_",
@@ -34,6 +36,7 @@ export enum CLASSES {
     FLEXLAYOUT__LAYOUT = "flexlayout__layout",
 
     FLEXLAYOUT__OUTLINE_RECT = "flexlayout__outline_rect",
+    FLEXLAYOUT__OUTLINE_RECT_EDGE = "flexlayout__outline_rect_edge",
 
     FLEXLAYOUT__SPLITTER = "flexlayout__splitter",
     FLEXLAYOUT__SPLITTER_EXTRA = "flexlayout__splitter_extra",
@@ -67,6 +70,7 @@ export enum CLASSES {
     FLEXLAYOUT__TAB_BUTTON_OVERFLOW = "flexlayout__tab_button_overflow",
     FLEXLAYOUT__TAB_BUTTON_TEXTBOX = "flexlayout__tab_button_textbox",
     FLEXLAYOUT__TAB_BUTTON_TRAILING = "flexlayout__tab_button_trailing",
+    FLEXLAYOUT__TAB_BUTTON_STAMP = "flexlayout__tab_button_stamp",
 
     FLEXLAYOUT__TAB_FLOATING = "flexlayout__tab_floating",
     FLEXLAYOUT__TAB_FLOATING_INNER = "flexlayout__tab_floating_inner",
@@ -78,4 +82,7 @@ export enum CLASSES {
     FLEXLAYOUT__TAB_TOOLBAR_STICKY_BUTTONS_CONTAINER = "flexlayout__tab_toolbar_sticky_buttons_container",
     FLEXLAYOUT__TAB_TOOLBAR_BUTTON_CLOSE = "flexlayout__tab_toolbar_button-close",
 
+    FLEXLAYOUT__POPUP_MENU_CONTAINER = "flexlayout__popup_menu_container",
+    FLEXLAYOUT__POPUP_MENU_ITEM = "flexlayout__popup_menu_item",
+    FLEXLAYOUT__POPUP_MENU = "flexlayout__popup_menu",
 }

package/src/model/BorderNode.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 IDraggable from "./IDraggable";
 import IDropTarget from "./IDropTarget";
 import { IJsonBorderNode } from "./IJsonModel";
@@ -309,18 +310,18 @@ class BorderNode extends Node implements IDropTarget {
                         childCenter = childRect.x + childRect.width / 2;
                         if (x >= pos && x < childCenter) {
                             const outlineRect = new Rect(childRect.x - 2, childY, 3, childHeight);
-                            dropInfo = new DropInfo(this, outlineRect, dockLocation, i, "flexlayout__outline_rect");
+                            dropInfo = new DropInfo(this, outlineRect, dockLocation, i, CLASSES.FLEXLAYOUT__OUTLINE_RECT);
                             break;
                         }
                         pos = childCenter;
                     }
                     if (dropInfo == null) {
                         const outlineRect = new Rect(childRect.getRight() - 2, childY, 3, childHeight);
-                        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);
                     }
                 } else {
                     const outlineRect = new Rect(this._tabHeaderRect!.x + 1, this._tabHeaderRect!.y + 2, 3, 18);
-                    dropInfo = new DropInfo(this, outlineRect, dockLocation, 0, "flexlayout__outline_rect");
+                    dropInfo = new DropInfo(this, outlineRect, dockLocation, 0, CLASSES.FLEXLAYOUT__OUTLINE_RECT);
                 }
             } else {
                 if (this._children.length > 0) {
@@ -337,18 +338,18 @@ class BorderNode extends Node implements IDropTarget {
                         childCenter = childRect.y + childRect.height / 2;
                         if (y >= pos && y < childCenter) {
                             const outlineRect = new Rect(childX, childRect.y - 2, childWidth, 3);
-                            dropInfo = new DropInfo(this, outlineRect, dockLocation, i, "flexlayout__outline_rect");
+                            dropInfo = new DropInfo(this, outlineRect, dockLocation, i, CLASSES.FLEXLAYOUT__OUTLINE_RECT);
                             break;
                         }
                         pos = childCenter;
                     }
                     if (dropInfo == null) {
                         const outlineRect = new Rect(childX, childRect.getBottom() - 2, childWidth, 3);
-                        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);
                     }
                 } else {
                     const outlineRect = new Rect(this._tabHeaderRect!.x + 2, this._tabHeaderRect!.y + 1, 18, 3);
-                    dropInfo = new DropInfo(this, outlineRect, dockLocation, 0, "flexlayout__outline_rect");
+                    dropInfo = new DropInfo(this, outlineRect, dockLocation, 0, CLASSES.FLEXLAYOUT__OUTLINE_RECT);
                 }
             }
             if (!dragNode._canDockInto(dragNode, dropInfo)) {
@@ -356,7 +357,7 @@ class BorderNode extends Node implements IDropTarget {
             }
         } else if (this.getSelected() !== -1 && this._contentRect!.contains(x, y)) {
             const outlineRect = this._contentRect;
-            dropInfo = new DropInfo(this, outlineRect!, dockLocation, -1, "flexlayout__outline_rect");
+            dropInfo = new DropInfo(this, outlineRect!, dockLocation, -1, CLASSES.FLEXLAYOUT__OUTLINE_RECT);
             if (!dragNode._canDockInto(dragNode, dropInfo)) {
                 return undefined;
             }

package/src/model/IJsonModel.ts

@@ -40,6 +40,8 @@ export interface IGlobalAttributes {
 	borderMinSize?: number; // default: 0
 	borderSize?: number; // default: 200
 	enableEdgeDock?: boolean; // default: true
+	enableUseVisibility?: boolean; // default: false
+	legacyOverflowMenu?: boolean; // default: false
 	marginInsets?: IInsets; // default: {"top":0,"right":0,"bottom":0,"left":0}
 	rootOrientationVertical?: boolean; // default: false
 	splitterExtra?: number; // default: 0
@@ -108,6 +110,7 @@ export interface ITabSetAttributes {
 	width?: number;
 }
 export interface ITabAttributes {
+	altName?: string;
 	borderHeight?: number; // default: -1 - inherited from global tabBorderHeight
 	borderWidth?: number; // default: -1 - inherited from global tabBorderWidth
 	className?: string; //  - inherited from global tabClassName

package/src/model/Model.ts

@@ -52,6 +52,9 @@ class Model {
     /** @hidden @internal */
     private static _createAttributeDefinitions(): AttributeDefinitions {
         const attributeDefinitions = new AttributeDefinitions();
+
+        attributeDefinitions.add("legacyOverflowMenu", false).setType(Attribute.BOOLEAN);
+
         // splitter
         attributeDefinitions.add("splitterSize", -1).setType(Attribute.NUMBER);
         attributeDefinitions.add("splitterExtra", 0).setType(Attribute.NUMBER);
@@ -59,6 +62,7 @@ class Model {
         attributeDefinitions.add("rootOrientationVertical", false).setType(Attribute.BOOLEAN);
         attributeDefinitions.add("marginInsets", { top: 0, right: 0, bottom: 0, left: 0 })
             .setType("IInsets");
+        attributeDefinitions.add("enableUseVisibility", false).setType(Attribute.BOOLEAN);
 
         // tab
         attributeDefinitions.add("tabEnableClose", true).setType(Attribute.BOOLEAN);
@@ -201,6 +205,10 @@ class Model {
         return this._attributes.rootOrientationVertical as boolean;
     }
 
+    isUseVisibility() {
+        return this._attributes.enableUseVisibility as boolean;
+    }
+
     /**
      * Gets the
      * @returns {BorderSet|*}
@@ -281,13 +289,17 @@ class Model {
                 const node = this._idMap[action.data.node];
 
                 if (node instanceof TabSetNode) {
-                    // first delete all child tabs
+                    // first delete all child tabs that are closeable
                     const children = [...node.getChildren()];
                     children.forEach((child, i) => {
-                        (child as TabNode)._delete();
+                        if ((child as TabNode).isEnableClose()) {
+                            (child as TabNode)._delete();
+                        }
                     });
 
-                    node._delete();
+                    if (node.getChildren().length === 0) {
+                        node._delete();
+                    }
                     this._tidy();
                 }
                 break;
@@ -439,6 +451,10 @@ class Model {
         return splitterSize;
     }
 
+    isLegacyOverflowMenu() {
+        return this._attributes.legacyOverflowMenu as boolean;
+    }
+
     getSplitterExtra() {
         return this._attributes.splitterExtra as number;
     }

package/src/model/RowNode.ts

@@ -5,6 +5,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";
@@ -381,7 +382,9 @@ class RowNode extends Node implements IDropTarget {
         // add tabset into empty root
         if (this === this._model.getRoot() && this._children.length === 0) {
             const callback = this._model._getOnCreateTabSet();
-            const child = new TabSetNode(this._model, callback ? callback() : {});
+            let attrs = callback ? callback() : {};
+            attrs = {...attrs, selected: -1};
+            const child = new TabSetNode(this._model, attrs);
             this._model._setActiveTabset(child);
             this._addChild(child);
         }
@@ -404,24 +407,24 @@ class RowNode extends Node implements IDropTarget {
                 const dockLocation = DockLocation.LEFT;
                 const outlineRect = dockLocation.getDockRect(this._rect);
                 outlineRect.width = outlineRect.width / 2;
-                dropInfo = new DropInfo(this, outlineRect, dockLocation, -1, "flexlayout__outline_rect_edge");
+                dropInfo = new DropInfo(this, outlineRect, dockLocation, -1, CLASSES.FLEXLAYOUT__OUTLINE_RECT_EDGE);
             } else if (x > this._rect.getRight() - margin && yy > h / 2 - half && yy < h / 2 + half) {
                 const dockLocation = DockLocation.RIGHT;
                 const outlineRect = dockLocation.getDockRect(this._rect);
                 outlineRect.width = outlineRect.width / 2;
                 outlineRect.x += outlineRect.width;
-                dropInfo = new DropInfo(this, outlineRect, dockLocation, -1, "flexlayout__outline_rect_edge");
+                dropInfo = new DropInfo(this, outlineRect, dockLocation, -1, CLASSES.FLEXLAYOUT__OUTLINE_RECT_EDGE);
             } else if (y < this._rect.y + margin && xx > w / 2 - half && xx < w / 2 + half) {
                 const dockLocation = DockLocation.TOP;
                 const outlineRect = dockLocation.getDockRect(this._rect);
                 outlineRect.height = outlineRect.height / 2;
-                dropInfo = new DropInfo(this, outlineRect, dockLocation, -1, "flexlayout__outline_rect_edge");
+                dropInfo = new DropInfo(this, outlineRect, dockLocation, -1, CLASSES.FLEXLAYOUT__OUTLINE_RECT_EDGE);
             } else if (y > this._rect.getBottom() - margin && xx > w / 2 - half && xx < w / 2 + half) {
                 const dockLocation = DockLocation.BOTTOM;
                 const outlineRect = dockLocation.getDockRect(this._rect);
                 outlineRect.height = outlineRect.height / 2;
                 outlineRect.y += outlineRect.height;
-                dropInfo = new DropInfo(this, outlineRect, dockLocation, -1, "flexlayout__outline_rect_edge");
+                dropInfo = new DropInfo(this, outlineRect, dockLocation, -1, CLASSES.FLEXLAYOUT__OUTLINE_RECT_EDGE);
             }
 
             if (dropInfo !== undefined) {

package/src/model/TabNode.ts

@@ -26,6 +26,7 @@ class TabNode extends Node implements IDraggable {
         attributeDefinitions.add("id", undefined).setType(Attribute.STRING);
 
         attributeDefinitions.add("name", "[Unnamed Tab]").setType(Attribute.STRING);
+        attributeDefinitions.add("altName", undefined).setType(Attribute.STRING);
         attributeDefinitions.add("helpText", undefined).setType(Attribute.STRING);
         attributeDefinitions.add("component", undefined).setType(Attribute.STRING);
         attributeDefinitions.add("config", undefined).setType("any");
@@ -84,7 +85,11 @@ class TabNode extends Node implements IDraggable {
     }
 
     /** @hidden @internal */
-    _getRenderedName() {
+    _getNameForOverflowMenu() {
+        const altName = this._getAttr("altName") as string;
+        if (altName !== undefined) {
+            return altName;
+        }
         return this._renderedName;
     }
 

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,11 +272,11 @@ 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");
+            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;
@@ -296,7 +300,7 @@ class TabSetNode extends Node implements IDraggable, IDropTarget {
                     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");
+                        dropInfo = new DropInfo(this, outlineRect, dockLocation, i, CLASSES.FLEXLAYOUT__OUTLINE_RECT);
                         break;
                     }
                     p = childCenter;
@@ -305,7 +309,7 @@ class TabSetNode extends Node implements IDraggable, IDropTarget {
             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

@@ -3,9 +3,10 @@ import { I18nLabel } from "..";
 import Actions from "../model/Actions";
 import TabNode from "../model/TabNode";
 import Rect from "../Rect";
-import { IIcons, ILayoutCallbacks, ITitleObject } from "./Layout";
+import { IIcons, ILayoutCallbacks } from "./Layout";
 import { ICloseType } from "../model/ICloseType";
 import { CLASSES } from "../Types";
+import { getRenderStateEx, isAuxMouseEvent } from "./Utils";
 
 /** @hidden @internal */
 export interface IBorderButtonProps {
@@ -16,16 +17,28 @@ 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)) {
+            props.layout.dragStart(event, undefined, 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 = () => {
@@ -82,57 +95,39 @@ export const BorderButton = (props: IBorderButtonProps) => {
         classNames += " " + node.getClassName();
     }
 
-    let leadingContent = iconFactory ? iconFactory(node) : undefined;
-    let titleContent: React.ReactNode = node.getName();
-    let name = node.getName();
-
-    function isTitleObject(obj: any): obj is ITitleObject {
-        return obj.titleContent !== undefined 
-      }
-
-    if (titleFactory !== undefined) {
-        const titleObj = titleFactory(node);
-        if (titleObj !== undefined) {
-            if (typeof titleObj === "string") {
-                titleContent = titleObj as string;
-                name = titleObj as string;
-            } else if (isTitleObject(titleObj)) {
-                titleContent = titleObj.titleContent;
-                name = titleObj.name;
-            } else {
-                titleContent = titleObj;
-            }
-        }
-    }
-
-    if (typeof leadingContent === undefined && typeof node.getIcon() !== undefined) {
-        leadingContent = <img src={node.getIcon()} alt="leadingContent" />;
-    }
-
-    let buttons: any[] = [];
-
-    // allow customization of leading contents (icon) and contents
-    const renderState = { leading: leadingContent, content: titleContent, name, buttons };
-    layout.customizeTab(node, renderState);
-    node._setRenderedName(renderState.name);
+    const renderState = getRenderStateEx(layout, node, iconFactory, titleFactory);
 
-    const content = <div className={cm(CLASSES.FLEXLAYOUT__BORDER_BUTTON_CONTENT)}>{renderState.content}</div>;
-    const leading = <div className={cm(CLASSES.FLEXLAYOUT__BORDER_BUTTON_LEADING)}>{renderState.leading}</div>;
+    const content = renderState.content ? (<div className={cm(CLASSES.FLEXLAYOUT__BORDER_BUTTON_CONTENT)}>{renderState.content}</div>) : null;
+    const leading = renderState.leading ? (<div className={cm(CLASSES.FLEXLAYOUT__BORDER_BUTTON_LEADING)}>{renderState.leading}</div>) : null;
 
     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}>
+        renderState.buttons.push(
+            <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}
+            {renderState.buttons}
         </div>
     );
 };