flexlayout-react 0.5.19 → 0.6.1

package/src/view/TabFloating.tsx

@@ -5,17 +5,19 @@ import TabSetNode from "../model/TabSetNode";
 import { CLASSES } from "../Types";
 import { ILayoutCallbacks } from "./Layout";
 import { I18nLabel } from "../I18nLabel";
+import { hideElement } from "./Utils";
 
 /** @hidden @internal */
 export interface ITabFloatingProps {
     layout: ILayoutCallbacks;
     selected: boolean;
     node: TabNode;
+    path: string;
 }
 
 /** @hidden @internal */
 export const TabFloating = (props: ITabFloatingProps) => {
-    const { layout, selected, node } = props;
+    const { layout, selected, node, path } = props;
 
     const showPopout = () => {
         if (node.getWindow()) {
@@ -48,9 +50,10 @@ export const TabFloating = (props: ITabFloatingProps) => {
 
     const cm = layout.getClassName;
 
-    const style: Record<string, any> = node._styleWithPosition({
-        display: selected ? "flex" : "none",
-    });
+    const style: Record<string, any> = node._styleWithPosition();
+    if (!selected) {
+        hideElement(style, node.getModel().isUseVisibility());
+    }
 
     const message = layout.i18nName(I18nLabel.Floating_Window_Message);
     const showMessage = layout.i18nName(I18nLabel.Floating_Window_Show_Window);
@@ -65,7 +68,11 @@ export const TabFloating = (props: ITabFloatingProps) => {
         );
     } else {
         return (
-            <div className={cm(CLASSES.FLEXLAYOUT__TAB_FLOATING)} onMouseDown={onMouseDown} onTouchStart={onMouseDown} style={style}>
+            <div className={cm(CLASSES.FLEXLAYOUT__TAB_FLOATING)}
+                data-layout-path={path}
+                onMouseDown={onMouseDown}
+                onTouchStart={onMouseDown}
+                style={style}>
                 <div className={cm(CLASSES.FLEXLAYOUT__TAB_FLOATING_INNER)}>
                     <div>{message}</div>
                     <div>

package/src/view/TabOverflowHook.tsx

@@ -92,7 +92,7 @@ export const useTabOverflow = (
                     return; // nothing to do all tabs are shown in available space
                 }
 
-                endPos -= hiddenTabs.length > 0 ? (orientation === Orientation.HORZ ? 10 : 0) : 45; // will need hidden tabs
+                endPos -= hiddenTabs.length > 0 ? (orientation === Orientation.HORZ ? 16 : 0) : 45; // will need hidden tabs
 
                 let shiftPos = 0;
 

package/src/view/TabSet.tsx

@@ -9,6 +9,7 @@ import { TabButton } from "./TabButton";
 import { useTabOverflow } from "./TabOverflowHook";
 import Orientation from "../Orientation";
 import { CLASSES } from "../Types";
+import { hideElement, isAuxMouseEvent } from "./Utils";
 
 /** @hidden @internal */
 export interface ITabSetProps {
@@ -18,11 +19,12 @@ export interface ITabSetProps {
     titleFactory?: (node: TabNode) => React.ReactNode | undefined;
     icons?: IIcons;
     editingTab?: TabNode;
+    path?: string;
 }
 
 /** @hidden @internal */
 export const TabSet = (props: ITabSetProps) => {
-    const { node, layout, iconFactory, titleFactory, icons } = props;
+    const { node, layout, iconFactory, titleFactory, icons, path } = props;
 
     const toolbarRef = React.useRef<HTMLDivElement | null>(null);
     const overflowbuttonRef = React.useRef<HTMLButtonElement | null>(null);
@@ -33,7 +35,14 @@ export const TabSet = (props: ITabSetProps) => {
 
     const onOverflowClick = (event: React.MouseEvent<HTMLElement, MouseEvent>) => {
         const element = overflowbuttonRef.current!;
-        showPopup(layout.getRootDiv(), element, hiddenTabs, onOverflowItemSelect, layout.getClassName);
+        showPopup(
+            element, 
+            hiddenTabs, 
+            onOverflowItemSelect, 
+            layout,
+            iconFactory,
+            titleFactory,
+            );
         event.stopPropagation();
     };
 
@@ -43,7 +52,6 @@ export const TabSet = (props: ITabSetProps) => {
     };
 
     const onMouseDown = (event: React.MouseEvent<HTMLDivElement, MouseEvent> | React.TouchEvent<HTMLDivElement>) => {
-        
         if (!isAuxMouseEvent(event)) {
             let name = node.getName();
             if (name === undefined) {
@@ -110,7 +118,7 @@ export const TabSet = (props: ITabSetProps) => {
     let style = node._styleWithPosition();
 
     if (node.getModel().getMaximizedTabset() !== undefined && !node.isMaximized()) {
-        style.display = "none";
+        hideElement(style, node.getModel().isUseVisibility())
     }
 
     const tabs = [];
@@ -122,9 +130,9 @@ export const TabSet = (props: ITabSetProps) => {
                 <TabButton
                     layout={layout}
                     node={child}
+                    path={path + "/tb" + i}
                     key={child.getId()}
                     selected={isSelected}
-                    show={true}
                     height={node.getTabStripHeight()}
                     iconFactory={iconFactory}
                     titleFactory={titleFactory}
@@ -170,8 +178,10 @@ export const TabSet = (props: ITabSetProps) => {
         buttons.push(
             <button
                 key="overflowbutton"
+                data-layout-path={path + "/button/overflow"}
+
                 ref={overflowbuttonRef}
-                className={cm(CLASSES.FLEXLAYOUT__TAB_BUTTON_OVERFLOW)}
+                className={cm(CLASSES.FLEXLAYOUT__TAB_TOOLBAR_BUTTON) + " " + cm(CLASSES.FLEXLAYOUT__TAB_BUTTON_OVERFLOW)}
                 title={overflowTitle}
                 onClick={onOverflowClick}
                 onMouseDown={onInterceptMouseDown}
@@ -188,6 +198,7 @@ export const TabSet = (props: ITabSetProps) => {
         buttons.push(
             <button
                 key="float"
+                data-layout-path={path + "/button/float"}
                 title={floatTitle}
                 className={cm(CLASSES.FLEXLAYOUT__TAB_TOOLBAR_BUTTON) + " " + cm(CLASSES.FLEXLAYOUT__TAB_TOOLBAR_BUTTON_FLOAT)}
                 onClick={onFloatTab}
@@ -205,6 +216,7 @@ export const TabSet = (props: ITabSetProps) => {
         btns.push(
             <button
                 key="max"
+                data-layout-path={path + "/button/max"}
                 title={node.isMaximized() ? minTitle : maxTitle}
                 className={cm(CLASSES.FLEXLAYOUT__TAB_TOOLBAR_BUTTON) + " " + cm(CLASSES.FLEXLAYOUT__TAB_TOOLBAR_BUTTON_ + (node.isMaximized() ? "max" : "min"))}
                 onClick={onMaximizeToggle}
@@ -222,6 +234,7 @@ export const TabSet = (props: ITabSetProps) => {
         btns.push(
             <button
                 key="close"
+                data-layout-path={path + "/button/close"}
                 title={title}
                 className={cm(CLASSES.FLEXLAYOUT__TAB_TOOLBAR_BUTTON) + " " + cm(CLASSES.FLEXLAYOUT__TAB_TOOLBAR_BUTTON_CLOSE)}
                 onClick={onClose}
@@ -287,6 +300,7 @@ export const TabSet = (props: ITabSetProps) => {
 
         header = (
             <div className={tabHeaderClasses} style={{ height: node.getHeaderHeight() + "px" }}
+                data-layout-path={path + "/header"}
                 onMouseDown={onMouseDown}
                 onContextMenu={onContextMenu}
                 onClick={onAuxMouseClick}
@@ -307,6 +321,7 @@ export const TabSet = (props: ITabSetProps) => {
     }
     tabStrip = (
         <div className={tabStripClasses} style={tabStripStyle}
+            data-layout-path={path + "/tabstrip"}
             onMouseDown={onMouseDown}
             onContextMenu={onContextMenu}
             onClick={onAuxMouseClick}
@@ -327,21 +342,16 @@ export const TabSet = (props: ITabSetProps) => {
     style = layout.styleFont(style);
 
     return (
-        <div ref={selfRef} dir="ltr" style={style} className={cm(CLASSES.FLEXLAYOUT__TABSET)} onWheel={onMouseWheel}>
+        <div ref={selfRef} 
+            dir="ltr" 
+            data-layout-path={path}
+            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/src/view/Utils.tsx

@@ -0,0 +1,71 @@
+import * as React from "react";
+import TabNode from "../model/TabNode";
+import { ILayoutCallbacks, ITitleObject } from "./Layout";
+
+/** @hidden @internal */
+export function getRenderStateEx (
+    layout: ILayoutCallbacks,
+    node: TabNode,
+    iconFactory?: (node: TabNode) => React.ReactNode | undefined,
+    titleFactory?: (node: TabNode) => React.ReactNode | undefined
+) {
+    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 (leadingContent === undefined && node.getIcon() !== undefined) {
+        leadingContent = <img style={{width:"1em", height:"1em"}} 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);
+
+    return renderState;
+
+}
+
+/** @hidden @internal */
+export function hideElement(style: Record<string, any>, useVisibility: ConstrainBoolean ) {
+    if (useVisibility) {
+        style.visibility = "hidden";
+    } else {
+        style.display = "none";
+    }
+}
+
+
+/** @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

@@ -19,6 +19,8 @@
         --color-6: #{$color_6};
         --color-drag1: #{$color_drag1};
         --color-drag2: #{$color_drag2};
+        --color-drag1-background: #{$color_drag1_background};
+        --color-drag2-background: #{$color_drag2_background};
         
         --font-size: #{$font-size};
         --font-family: #{$font-family};
@@ -55,14 +57,14 @@
         pointer-events: none;
         box-sizing: border-box;
         border: 2px solid var(--color-drag1);
-        box-shadow: inset 0 0 60px rgba(0, 0, 0, 0.2);
+        background: var(--color-drag1-background);
         border-radius: 5px;
         z-index: 1000;
 
         &_edge {
             pointer-events: none;
             border: 2px solid var(--color-drag2);
-            box-shadow: inset 0 0 60px rgba(0, 0, 0, 0.2);
+            background: var(--color-drag2-background);
             border-radius: 5px;
             z-index: 1000;
             box-sizing: border-box;
@@ -94,7 +96,7 @@
         justify-content: center;
         flex-direction: column;
         overflow: hidden;
-        padding: 10px;
+        padding: 0.5em 1em;
         word-wrap: break-word;
         font-size: var(--font-size);
         font-family: var(--font-family);
@@ -157,6 +159,9 @@
 
                 &_tab_container {
                     display: flex;
+                    gap: 4px;
+                    padding-left: 4px;
+                    padding-right: 4px;
                     box-sizing: border-box;
                     position: absolute;
                     top: 0;
@@ -182,6 +187,14 @@
         }
     }
 
+    &__tab_button_stamp {
+        display: inline-flex;
+        align-items: center;
+        gap: 0.3em;
+        white-space: nowrap;
+        box-sizing: border-box;
+    }
+
     &__tab {
         overflow: auto;
         position: absolute;
@@ -190,11 +203,12 @@
         background-color: var(--color-background);
 
         &_button {
-            display: inline-flex;
+            display: flex;
+            gap: 0.3em;
             align-items: center;
             box-sizing: border-box;
-            padding: 3px 8px; // if you change top or bottom update the tabset_sizer above
-            margin: 0px 2px;
+            padding: 3px 0.5em; // if you change top or bottom update the tabset_sizer above
+
             cursor: pointer;
             @include tab_button_mixin;
 
@@ -220,11 +234,11 @@
             }
 
             &_leading {
-                display: inline-block;
+                display: flex;
             }
 
             &_content {
-                display: inline-block;
+                display: flex;
             }
 
             &_textbox {
@@ -242,66 +256,75 @@
             }
 
             &_trailing {
-                display: inline-block;
-                margin-left: 8px;
-                min-width: 8px;
-                min-height: 8px;
+                display: flex;
+                visibility: hidden;
+                border-radius: 4px;
+                &:hover {
+                    @include close_button_hovered_mixin;
+                }
             }
             @media (pointer: coarse) {
                 &_trailing {
-                    min-width: 20px;
-                    min-height: 20px;
                 }
             }
             @media (hover: hover) {
                 &:hover &_trailing {
-                    background: transparent url("../images/close.png") no-repeat center;
+                    visibility: visible;
                 }
             }
 
             &--selected &_trailing {
-                background: transparent url("../images/close.png") no-repeat center;
+                visibility: visible;
             }
 
             &_overflow {
-                margin-left: 10px;
-                padding-left: 12px;
+                display: flex;
+                align-items: center;
                 border: none;
                 color: gray;
                 font-size: inherit;
-                background: transparent url("../images/more2.png") no-repeat left;
+                background-color: transparent;
             }
         }
 
         &_toolbar {
             display: flex;
             align-items: center;
+            gap: .3em;
+            padding-left: .5em;
+            padding-right: .3em;
 
             &_button {
-                min-width: 20px;
-                min-height: 20px;
                 border: none;
                 outline: none;
+                font-size: inherit;
+                margin: 0px;
+                background-color: transparent;
+                border-radius: 4px;
+                padding: 1px;
+                @media (hover: hover) {
+                    &:hover {
+                        @include toolbar_button_hovered_mixin;
+                    }
+                }
 
                 &-min {
-                    background: transparent url("../images/maximize.png") no-repeat center;
                 }
 
                 &-max {
-                    background: transparent url("../images/restore.png") no-repeat center;
                 }
 
                 &-float {
-                    background: transparent url("../images/popout.png") no-repeat center;
                 }
 
                 &-close {
-                    background: transparent url("../images/close.png") no-repeat center;
                 }
             }
 
             &_sticky_buttons_container {
                 display: flex;
+                gap: 0.3em;
+                padding-left: 2px;
                 align-items: center;
             }
         }
@@ -375,6 +398,9 @@
             &_tab_container {
                 white-space: nowrap;
                 display: flex;
+                gap: 4px;
+                padding-left: 2px;
+                padding-right: 2px;
                 box-sizing: border-box;
                 position: absolute;
                 top: 0;
@@ -395,10 +421,11 @@
 
         &_button {
             display: flex;
+            gap: 0.3em;
             align-items: center;
             cursor: pointer;
-            padding: 3px 8px;
-            margin: 2px;
+            padding: 3px 0.5em;
+            margin: 2px 0px;
             box-sizing: border-box;
             white-space: nowrap;
             @include border_button_mixin;
@@ -417,77 +444,80 @@
             }
 
             &_leading {
-                display: inline;
+                display: flex;
             }
 
             &_content {
-                display: inline-block;
+                display: flex;
             }
 
             &_trailing {
-                display: inline-block;
-                margin-left: 8px;
-                min-width: 8px;
-                min-height: 8px;
+                display: flex;
+                border-radius: 4px;
+                visibility: hidden;
+                &:hover {
+                    @include close_button_hovered_mixin;
+                }
             }
-
             @media (pointer: coarse) {
                 &_trailing {
-                    min-width: 20px;
-                    min-height: 20px;
                 }
             }
-
             @media (hover: hover) {
                 &:hover &_trailing {
-                    background: transparent url("../images/close.png") no-repeat center;
+                    visibility: visible;
                 }
             }
 
             &--selected &_trailing {
-                background: transparent url("../images/close.png") no-repeat center;
+                visibility: visible;
             }
         }
 
         &_toolbar {
             display: flex;
+            gap: .3em;
             align-items: center;
 
-            &_left {
+            &_left,
+            &_right {
                 flex-direction: column;
+                padding-top: .5em;
+                padding-bottom: .3em;
             }
 
-            &_right {
-                flex-direction: column;
+            &_top,
+            &_bottom {
+                padding-left: .5em;
+                padding-right: .3em;
             }
 
             &_button {
-                min-width: 20px;
-                min-height: 20px;
                 border: none;
                 outline: none;
+                font-size: inherit;
+                background-color: transparent;
+                border-radius: 4px;
+                padding: 1px;
 
                 &-float {
-                    background: transparent url("../images/popout.png") no-repeat center;
                 }
 
                 &_overflow {
+                    display: flex;
+                    align-items: center;
                     border: none;
-                    padding-left: 12px;
                     color: gray;
                     font-size: inherit;
-                    background: transparent url("../images/more2.png") no-repeat left;
+                    background-color: transparent;
                 }
 
                 &_overflow_top,
                 &_overflow_bottom {
-                    margin-left: 10px;
                 }
 
                 &_overflow_right,
                 &_overflow_left {
-                    padding-right: 0px;
-                    margin-top: 5px;
                 }
             }
         }
@@ -498,8 +528,7 @@
         font-family: var(--font-family);
 
         &_item {
-            margin: 2px;
-            padding: 2px 10px 2px 10px;
+            padding: 2px 0.5em;
             white-space: nowrap;
             cursor: pointer;
             border-radius: 2px;
@@ -522,6 +551,7 @@
             max-height: 50%;
             min-width: 100px;
             overflow: auto;
+            padding: 2px;
         }
     }