flexlayout-react 0.7.9 → 0.7.11

package/src/model/Model.ts

@@ -52,15 +52,16 @@ export class Model {
         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);
         attributeDefinitions.add("enableEdgeDock", true).setType(Attribute.BOOLEAN);
         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);
+        attributeDefinitions.add("enableRotateBorderIcons", true).setType(Attribute.BOOLEAN);
+
+        // splitter
+        attributeDefinitions.add("splitterSize", -1).setType(Attribute.NUMBER);
+        attributeDefinitions.add("splitterExtra", 0).setType(Attribute.NUMBER);
 
         // tab
         attributeDefinitions.add("tabEnableClose", true).setType(Attribute.BOOLEAN);
@@ -207,6 +208,10 @@ export class Model {
         return this._attributes.enableUseVisibility as boolean;
     }
 
+    isEnableRotateBorderIcons() {
+        return this._attributes.enableRotateBorderIcons as boolean;
+    }
+
     /**
      * Gets the
      * @returns {BorderSet|*}
@@ -247,6 +252,24 @@ export class Model {
         return this._idMap[id];
     }
 
+    /**
+     * Finds the first/top left tab set of the given node.
+     * @param node The top node you want to begin searching from, deafults to the root node
+     * @returns The first Tab Set
+     */
+    getFirstTabSet(node = this._root as Node): Node
+    {
+        const child = node.getChildren()[0];
+        if (child instanceof TabSetNode)
+        {
+            return child;
+        }
+        else
+        {
+            return this.getFirstTabSet(child);
+        }
+    }
+
     /**
      * Update the node tree by performing the given action,
      * Actions should be generated via static methods on the Actions class

package/src/view/BorderButton.tsx

@@ -137,7 +137,16 @@ export const BorderButton = (props: IBorderButtonProps) => {
         classNames += " " + node.getClassName();
     }
 
-    const renderState = getRenderStateEx(layout, node, iconFactory, titleFactory);
+    let iconAngle = 0;
+    if (node.getModel().isEnableRotateBorderIcons() === false) {
+        if (border === "left") {
+            iconAngle = 90;
+        } else if (border === "right") {
+            iconAngle = -90;
+        }
+    }
+
+    const renderState = getRenderStateEx(layout, node, iconFactory, titleFactory, iconAngle);
 
     let content = renderState.content ? (
         <div className={cm(CLASSES.FLEXLAYOUT__BORDER_BUTTON_CONTENT)}>

package/src/view/BorderTabSet.tsx

@@ -3,7 +3,7 @@ import { DockLocation } from "../DockLocation";
 import { BorderNode } from "../model/BorderNode";
 import { TabNode } from "../model/TabNode";
 import { BorderButton } from "./BorderButton";
-import { IIcons, ILayoutCallbacks, ITitleObject } from "./Layout";
+import { IIcons, ILayoutCallbacks, ITabSetRenderValues, ITitleObject } from "./Layout";
 import { showPopup } from "../PopupMenu";
 import { Actions } from "../model/Actions";
 import { I18nLabel } from "../I18nLabel";
@@ -30,7 +30,7 @@ export const BorderTabSet = (props: IBorderTabSetProps) => {
     const overflowbuttonRef = React.useRef<HTMLButtonElement | null>(null);
     const stickyButtonsRef = React.useRef<HTMLDivElement | null>(null);
 
-    const { selfRef, position, userControlledLeft, hiddenTabs, onMouseWheel } = useTabOverflow(border, Orientation.flip(border.getOrientation()), toolbarRef, stickyButtonsRef);
+    const { selfRef, position, userControlledLeft, hiddenTabs, onMouseWheel, tabsTruncated } = useTabOverflow(border, Orientation.flip(border.getOrientation()), toolbarRef, stickyButtonsRef);
 
     const onAuxMouseClick = (event: React.MouseEvent<HTMLDivElement, MouseEvent>) => {
         if (isAuxMouseEvent(event)) {
@@ -42,7 +42,7 @@ export const BorderTabSet = (props: IBorderTabSetProps) => {
         layout.showContextMenu(border, event);
     };
 
-    const onInterceptMouseDown = (event: React.MouseEvent<HTMLDivElement, MouseEvent> | React.MouseEvent<HTMLButtonElement, MouseEvent> | React.TouchEvent<HTMLButtonElement>) => {
+    const onInterceptMouseDown = (event: React.MouseEvent | React.TouchEvent) => {
         event.stopPropagation();
     };
 
@@ -116,11 +116,31 @@ export const BorderTabSet = (props: IBorderTabSetProps) => {
 
     // allow customization of tabset right/bottom buttons
     let buttons: any[] = [];
-    const renderState = { headerContent: undefined, buttons, stickyButtons: [], headerButtons: [] };
+    let stickyButtons: any[] = [];
+    const renderState : ITabSetRenderValues= { headerContent: undefined, buttons, stickyButtons: stickyButtons, headerButtons: [], overflowPosition: undefined };
     layout.customizeTabSet(border, renderState);
     buttons = renderState.buttons;
+    
+    if (renderState.overflowPosition === undefined) {
+        renderState.overflowPosition = stickyButtons.length;
+    }
 
-    let toolbar;
+    if (stickyButtons.length > 0) {
+        if (tabsTruncated) {
+            buttons = [...stickyButtons, ...buttons];
+        } else {
+            tabs.push(<div
+                ref={stickyButtonsRef}
+                key="sticky_buttons_container"
+                onMouseDown={onInterceptMouseDown}
+                onTouchStart={onInterceptMouseDown}
+                onDragStart={(e) => { e.preventDefault() }}
+                className={cm(CLASSES.FLEXLAYOUT__TAB_TOOLBAR_STICKY_BUTTONS_CONTAINER)}
+            >
+                {stickyButtons}
+            </div>);
+        }
+    }
 
     if (hiddenTabs.length > 0) {
         const overflowTitle = layout.i18nName(I18nLabel.Overflow_Menu_Tooltip);
@@ -133,7 +153,7 @@ export const BorderTabSet = (props: IBorderTabSetProps) => {
                 <div className={cm(CLASSES.FLEXLAYOUT__TAB_BUTTON_OVERFLOW_COUNT)}>{hiddenTabs.length}</div>
             </>);
         }
-        buttons.push(
+        buttons.splice(Math.min(renderState.overflowPosition, buttons.length), 0,
             <button
                 key="overflowbutton"
                 ref={overflowbuttonRef}
@@ -167,7 +187,7 @@ export const BorderTabSet = (props: IBorderTabSetProps) => {
             );
         }
     }
-    toolbar = (
+    const toolbar = (
         <div key="toolbar" ref={toolbarRef} className={cm(CLASSES.FLEXLAYOUT__BORDER_TOOLBAR) + " " + cm(CLASSES.FLEXLAYOUT__BORDER_TOOLBAR_ + border.getLocation().getName())}>
             {buttons}
         </div>

package/src/view/Layout.tsx

@@ -101,6 +101,9 @@ export interface ITabSetRenderValues {
     stickyButtons: React.ReactNode[];
     buttons: React.ReactNode[];
     headerButtons: React.ReactNode[];
+    // position to insert overflow button within [...stickyButtons, ...buttons]
+    // if left undefined position will be after the sticky buttons (if any)
+    overflowPosition: number | undefined; 
 }
 
 export interface ITabRenderValues {
@@ -510,10 +513,10 @@ export class Layout extends React.Component<ILayoutProps, ILayoutState> {
             const offset = this.edgeRectLength / 2;
             const className = this.getClassName(CLASSES.FLEXLAYOUT__EDGE_RECT);
             const radius = 50;
-            edges.push(<div key="North" style={{ top: r.y, left: r.x + r.width / 2 - offset, width: length, height: width, borderBottomLeftRadius: radius, borderBottomRightRadius: radius }} className={className}></div>)
-            edges.push(<div key="West" style={{ top: r.y + r.height / 2 - offset, left: r.x, width: width, height: length, borderTopRightRadius: radius, borderBottomRightRadius: radius }} className={className}></div>)
-            edges.push(<div key="South" style={{ top: r.y + r.height - width, left: r.x + r.width / 2 - offset, width: length, height: width, borderTopLeftRadius: radius, borderTopRightRadius: radius }} className={className}></div>)
-            edges.push(<div key="East" style={{ top: r.y + r.height / 2 - offset, left: r.x + r.width - width, width: width, height: length, borderTopLeftRadius: radius, borderBottomLeftRadius: radius }} className={className}></div>)
+            edges.push(<div key="North" style={{ top: r.y, left: r.x + r.width / 2 - offset, width: length, height: width, borderBottomLeftRadius: radius, borderBottomRightRadius: radius }} className={className + " " + this.getClassName(CLASSES.FLEXLAYOUT__EDGE_RECT_TOP)}></div>);
+            edges.push(<div key="West" style={{ top: r.y + r.height / 2 - offset, left: r.x, width: width, height: length, borderTopRightRadius: radius, borderBottomRightRadius: radius }} className={className + " " + this.getClassName(CLASSES.FLEXLAYOUT__EDGE_RECT_LEFT)}></div>);
+            edges.push(<div key="South" style={{ top: r.y + r.height - width, left: r.x + r.width / 2 - offset, width: length, height: width, borderTopLeftRadius: radius, borderTopRightRadius: radius }} className={className + " " + this.getClassName(CLASSES.FLEXLAYOUT__EDGE_RECT_BOTTOM)}></div>);
+            edges.push(<div key="East" style={{ top: r.y + r.height / 2 - offset, left: r.x + r.width - width, width: width, height: length, borderTopLeftRadius: radius, borderBottomLeftRadius: radius }} className={className + " " + this.getClassName(CLASSES.FLEXLAYOUT__EDGE_RECT_RIGHT)}></div>);
         }
 
         // this.layoutTime = (Date.now() - this.start);
@@ -596,8 +599,8 @@ export class Layout extends React.Component<ILayoutProps, ILayoutState> {
                         if (this.supportsPopout && child.isFloating()) {
                             const rect = this._getScreenRect(child);
 
-                            const tabBorderWidth= child._getAttr("borderWidth");
-                            const tabBorderHeight= child._getAttr("borderHeight");
+                            const tabBorderWidth = child._getAttr("borderWidth");
+                            const tabBorderHeight = child._getAttr("borderHeight");
                             if (tabBorderWidth !== -1 && border.getLocation().getOrientation() === Orientation.HORZ) {
                                 rect.width = tabBorderWidth;
                             } else if (tabBorderHeight !== -1 && border.getLocation().getOrientation() === Orientation.VERT) {

package/src/view/TabSet.tsx

@@ -4,7 +4,7 @@ import { Actions } from "../model/Actions";
 import { TabNode } from "../model/TabNode";
 import { TabSetNode } from "../model/TabSetNode";
 import { showPopup } from "../PopupMenu";
-import { IIcons, ILayoutCallbacks, ITitleObject } from "./Layout";
+import { IIcons, ILayoutCallbacks, ITabSetRenderValues, ITitleObject } from "./Layout";
 import { TabButton } from "./TabButton";
 import { useTabOverflow } from "./TabOverflowHook";
 import { Orientation } from "../Orientation";
@@ -160,13 +160,17 @@ export const TabSet = (props: ITabSetProps) => {
     let headerButtons: React.ReactNode[] = [];
 
     // allow customization of header contents and buttons
-    const renderState = { headerContent: node.getName(), stickyButtons, buttons, headerButtons };
+    const renderState : ITabSetRenderValues = { headerContent: node.getName(), stickyButtons, buttons, headerButtons, overflowPosition: undefined };
     layout.customizeTabSet(node, renderState);
     const headerContent = renderState.headerContent;
     stickyButtons = renderState.stickyButtons;
     buttons = renderState.buttons;
     headerButtons = renderState.headerButtons;
 
+    if (renderState.overflowPosition === undefined) {
+        renderState.overflowPosition = stickyButtons.length;
+    }
+    
     if (stickyButtons.length > 0) {
         if (tabsTruncated) {
             buttons = [...stickyButtons, ...buttons];
@@ -183,8 +187,7 @@ export const TabSet = (props: ITabSetProps) => {
             </div>);
         }
     }
-
-    let toolbar;
+    
     if (hiddenTabs.length > 0) {
         const overflowTitle = layout.i18nName(I18nLabel.Overflow_Menu_Tooltip);
         let overflowContent;
@@ -196,7 +199,7 @@ export const TabSet = (props: ITabSetProps) => {
                 <div className={cm(CLASSES.FLEXLAYOUT__TAB_BUTTON_OVERFLOW_COUNT)}>{hiddenTabs.length}</div>
             </>);
         }
-        buttons.push(
+        buttons.splice(Math.min(renderState.overflowPosition, buttons.length), 0,
             <button
                 key="overflowbutton"
                 data-layout-path={path + "/button/overflow"}
@@ -268,7 +271,7 @@ export const TabSet = (props: ITabSetProps) => {
         );
     }
 
-    toolbar = (
+    const toolbar = (
         <div key="toolbar" ref={toolbarRef}
             className={cm(CLASSES.FLEXLAYOUT__TAB_TOOLBAR)}
             onMouseDown={onInterceptMouseDown}

package/src/view/Utils.tsx

@@ -7,11 +7,15 @@ export function getRenderStateEx(
     layout: ILayoutCallbacks,
     node: TabNode,
     iconFactory?: IconFactory,
-    titleFactory?: TitleFactory
+    titleFactory?: TitleFactory,
+    iconAngle?: number
 ) {
     let leadingContent = iconFactory ? iconFactory(node) : undefined;
     let titleContent: React.ReactNode = node.getName();
     let name = node.getName();
+    if (iconAngle === undefined) {
+        iconAngle = 0;
+    }
 
     function isTitleObject(obj: any): obj is ITitleObject {
         return obj.titleContent !== undefined
@@ -33,7 +37,11 @@ export function getRenderStateEx(
     }
 
     if (leadingContent === undefined && node.getIcon() !== undefined) {
-        leadingContent = <img style={{ width: "1em", height: "1em" }} src={node.getIcon()} alt="leadingContent" />;
+        if (iconAngle !== 0) {
+             leadingContent = <img style={{ width: "1em", height: "1em", transform: "rotate(" + iconAngle + "deg)" }} src={node.getIcon()} alt="leadingContent" />;
+        } else {
+            leadingContent = <img style={{ width: "1em", height: "1em" }} src={node.getIcon()} alt="leadingContent" />;  
+        }
     }
 
     let buttons: any[] = [];