flexlayout-react 0.5.15 → 0.5.19

package/src/view/TabFloating.tsx

@@ -17,6 +17,16 @@ export interface ITabFloatingProps {
 export const TabFloating = (props: ITabFloatingProps) => {
     const { layout, selected, node } = 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;
         if (parent.getType() === TabSetNode.TYPE) {
@@ -28,14 +38,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 +56,30 @@ 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)} 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,7 +17,7 @@ export interface ITabSetProps {
     iconFactory?: (node: TabNode) => React.ReactNode | undefined;
     titleFactory?: (node: TabNode) => React.ReactNode | undefined;
     icons?: IIcons;
-    editingTab?: TabNode; 
+    editingTab?: TabNode;
 }
 
 /** @hidden @internal */
@@ -31,9 +31,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,33 +43,53 @@ 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 onFloatTab = () => {
+    const onClose = (event: React.MouseEvent<HTMLElement, MouseEvent>) => {
+        layout.doAction(Actions.deleteTabset(node.getId()));
+        event.stopPropagation();
+    };
+
+    const onFloatTab = (event: React.MouseEvent<HTMLElement, MouseEvent>) => {
         if (selectedTabNode !== undefined) {
             layout.doAction(Actions.floatTab(selectedTabNode.getId()));
         }
+        event.stopPropagation();
     };
 
     const onDoubleClick = (event: Event) => {
@@ -195,6 +216,23 @@ export const TabSet = (props: ITabSetProps) => {
         );
     }
 
+    if (!node.isMaximized() && node.isEnableClose()) {
+        const title = layout.i18nName(I18nLabel.Close_Tabset);
+        const btns = showHeader ? headerButtons : buttons;
+        btns.push(
+            <button
+                key="close"
+                title={title}
+                className={cm(CLASSES.FLEXLAYOUT__TAB_TOOLBAR_BUTTON) + " " + cm(CLASSES.FLEXLAYOUT__TAB_TOOLBAR_BUTTON_CLOSE)}
+                onClick={onClose}
+                onMouseDown={onInterceptMouseDown}
+                onTouchStart={onInterceptMouseDown}
+            >
+                {icons?.closeTabset}
+            </button>
+        );
+    }
+
     toolbar = (
         <div key="toolbar" ref={toolbarRef}
             className={cm(CLASSES.FLEXLAYOUT__TAB_TOOLBAR)}
@@ -248,7 +286,12 @@ 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" }}
+                onMouseDown={onMouseDown}
+                onContextMenu={onContextMenu}
+                onClick={onAuxMouseClick}
+                onAuxClick={onAuxMouseClick}
+                onTouchStart={onMouseDown}>
                 <div className={cm(CLASSES.FLEXLAYOUT__TABSET_HEADER_CONTENT)}>{headerContent}</div>
                 {headerToolbar}
             </div>
@@ -263,7 +306,12 @@ export const TabSet = (props: ITabSetProps) => {
         tabStripStyle["bottom"] = "0px";
     }
     tabStrip = (
-        <div className={tabStripClasses} style={tabStripStyle} onMouseDown={onMouseDown} onTouchStart={onMouseDown}>
+        <div className={tabStripClasses} style={tabStripStyle}
+            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 }}
@@ -279,9 +327,21 @@ 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" 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;
+}
+

package/style/_base.scss

@@ -8,6 +8,21 @@
 
 .flexlayout {
     &__layout {
+        --color-text: #{$color_text};
+        --color-background: #{$color_background};
+        --color-base: #{$color_base};
+        --color-1: #{$color_1};
+        --color-2: #{$color_2};
+        --color-3: #{$color_3};
+        --color-4: #{$color_4};
+        --color-5: #{$color_5};
+        --color-6: #{$color_6};
+        --color-drag1: #{$color_drag1};
+        --color-drag2: #{$color_drag2};
+        
+        --font-size: #{$font-size};
+        --font-family: #{$font-family};
+
         @include absoluteFill;
         overflow: hidden;
     }
@@ -17,6 +32,8 @@
 
         @media (hover: hover) {
             &:hover {
+                transition: background-color ease-in .1s;
+                transition-delay: 0.05s;
                 @include splitter_hover_mixin;
             }
         }
@@ -24,25 +41,27 @@
             z-index: 10;
             @include splitter_border_mixin;
         }
-
         &_drag {
             z-index: 1000;
             @include splitter_drag_mixin;
         }
+        &_extra {
+            background-color: transparent;
+        }
     }
 
     &__outline_rect {
         position: absolute;
-        cursor: move;
+        pointer-events: none;
         box-sizing: border-box;
-        border: 2px solid $color_drag1;
+        border: 2px solid var(--color-drag1);
         box-shadow: inset 0 0 60px rgba(0, 0, 0, 0.2);
         border-radius: 5px;
         z-index: 1000;
 
         &_edge {
-            cursor: move;
-            border: 2px solid $color_drag2;
+            pointer-events: none;
+            border: 2px solid var(--color-drag2);
             box-shadow: inset 0 0 60px rgba(0, 0, 0, 0.2);
             border-radius: 5px;
             z-index: 1000;
@@ -55,14 +74,15 @@
         z-index: 1000;
         box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
         background-color: gray;
+        pointer-events: none;
     }
 
     &__drag_rect {
         position: absolute;
         cursor: move;
-        color: $color_text;
-        background-color: $color_1;
-        border: 2px solid $color_4;
+        color: var(--color-text);
+        background-color: var(--color-1);
+        border: 2px solid var(--color-4);
         box-shadow: inset 0 0 60px rgba(0, 0, 0, 0.3);
         border-radius: 5px;
         z-index: 1000;
@@ -76,16 +96,16 @@
         overflow: hidden;
         padding: 10px;
         word-wrap: break-word;
-        font-size: $font-size;
-        font-family: $font-family;
+        font-size: var(--font-size);
+        font-family: var(--font-family);
     }
 
     &__tabset {
         overflow: hidden;
-        background-color: $color_1;
+        background-color: var(--color-1);
         box-sizing: border-box;
-        font-size: $font-size;
-        font-family: $font-family;
+        font-size: var(--font-size);
+        font-family: var(--font-family);
         @include tabset_mixin;
 
         &_header {
@@ -97,8 +117,8 @@
             right: 0;
             padding: 3px 3px 3px 5px;
             box-sizing: border-box;
-            border-bottom: 1px solid $color_3;
-            color: $color_text;
+            border-bottom: 1px solid var(--color-3);
+            color: var(--color-text);
             @include tabset_header_mixin;
 
             &_content {
@@ -110,7 +130,7 @@
             &_outer {
                 // tabset tabbar outer
                 box-sizing: border-box;
-                background-color: $color_1;
+                background-color: var(--color-1);
                 position: absolute;
                 left: 0;
                 right: 0;
@@ -120,11 +140,11 @@
             }
 
             &_outer_top {
-                border-bottom: 1px solid $color_3;
+                border-bottom: 1px solid var(--color-3);
             }
 
             &_outer_bottom {
-                border-top: 1px solid $color_3;
+                border-top: 1px solid var(--color-3);
             }
 
             &_inner {
@@ -166,8 +186,8 @@
         overflow: auto;
         position: absolute;
         box-sizing: border-box;
-        color: $color_text;
-        background-color: $color_background;
+        color: var(--color-text);
+        background-color: var(--color-background);
 
         &_button {
             display: inline-flex;
@@ -209,8 +229,12 @@
 
             &_textbox {
                 border: none;
-                color: green;
-                background-color: $color_3;
+                font-family: var(--font-family);
+                font-size: var(--font-size);
+                color: var(--color-text);
+                background-color: var(--color-5);
+                border: 1px inset var(--color-1);
+                border-radius: 3px;
             }
 
             &_textbox:focus {
@@ -270,6 +294,10 @@
                 &-float {
                     background: transparent url("../images/popout.png") no-repeat center;
                 }
+
+                &-close {
+                    background: transparent url("../images/close.png") no-repeat center;
+                }
             }
 
             &_sticky_buttons_container {
@@ -282,8 +310,8 @@
             overflow: auto;
             position: absolute;
             box-sizing: border-box;
-            color: $color_text;
-            background-color: $color_background;
+            color: var(--color-text);
+            background-color: var(--color-background);
             display: flex;
             justify-content: center;
             align-items: center;
@@ -311,28 +339,28 @@
         box-sizing: border-box;
         overflow: hidden;
         display: flex;
-        font-size: $font-size;
-        font-family: $font-family;
+        font-size: var(--font-size);
+        font-family: var(--font-family);
         @include border_mixin;
 
         &_top {
-            border-bottom: 1px solid $color_3;
+            border-bottom: 1px solid var(--color-3);
             align-items: center;
         }
 
         &_bottom {
-            border-top: 1px solid $color_3;
+            border-top: 1px solid var(--color-3);
             align-items: center;
         }
 
         &_left {
-            border-right: 1px solid $color_3;
+            border-right: 1px solid var(--color-3);
             align-content: center;
             flex-direction: column;
         }
 
         &_right {
-            border-left: 1px solid $color_3;
+            border-left: 1px solid var(--color-3);
             align-content: center;
             flex-direction: column;
         }
@@ -466,25 +494,28 @@
     }
 
     &__popup_menu {
-        font-size: $font-size;
-        font-family: $font-family;
+        font-size: var(--font-size);
+        font-family: var(--font-family);
 
         &_item {
+            margin: 2px;
             padding: 2px 10px 2px 10px;
             white-space: nowrap;
+            cursor: pointer;
+            border-radius: 2px;
         }
 
         @media (hover: hover) {
             &_item:hover {
-                background-color: $color_6;
+                background-color: var(--color-6);
             }
         }
 
         &_container {
             box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.15);
-            border: 1px solid $color_6;
-            color: $color_text;
-            background: $color_background;
+            border: 1px solid var(--color-6);
+            color: var(--color-text);
+            background: var(--color-background);
             border-radius: 3px;
             position: absolute;
             z-index: 1000;
@@ -508,8 +539,8 @@
             @include absoluteFill;
 
             box-sizing: border-box;
-            background-color: $color_background;
-            color: $color_text;
+            background-color: var(--color-background);
+            color: var(--color-text);
         }
     }
 
@@ -530,21 +561,21 @@
     &__tabset_sizer {
         padding-top: 5px; // tab_button has 3 padding top, tabset header inner has 2 border
         padding-bottom: 3px; // tab_button has 3 padding bottom
-        font-size: $font-size;
-        font-family: $font-family;
+        font-size: var(--font-size);
+        font-family: var(--font-family);
     }
 
     &__tabset_header_sizer {
         padding-top: 3px;
         padding-bottom: 3px;
-        font-size: $font-size;
-        font-family: $font-family;
+        font-size: var(--font-size);
+        font-family: var(--font-family);
     }
 
     &__border_sizer {
         padding-top: 6px;
         padding-bottom: 5px;
-        font-size: $font-size;
-        font-family: $font-family;
+        font-size: var(--font-size);
+        font-family: var(--font-family);
     }
 }