flexlayout-react 0.6.3 → 0.6.4

package/src/model/TabSetNode.ts

@@ -18,15 +18,15 @@ import { adjustSelectedIndex } from "./Utils";
 export class TabSetNode extends Node implements IDraggable, IDropTarget {
     static readonly TYPE = "tabset";
 
-    /** @hidden @internal */
+    /** @internal */
     static _fromJson(json: any, model: Model) {
         const newLayoutNode = new TabSetNode(model, json);
 
         if (json.children != null) {
-            json.children.forEach((jsonChild: any) => {
+            for (const jsonChild of json.children) {
                 const child = TabNode._fromJson(jsonChild, model);
                 newLayoutNode._addChild(child);
-            });
+            }
         }
         if (newLayoutNode._children.length === 0) {
             newLayoutNode._setSelected(-1);
@@ -42,10 +42,10 @@ export class TabSetNode extends Node implements IDraggable, IDropTarget {
 
         return newLayoutNode;
     }
-    /** @hidden @internal */
+    /** @internal */
     private static _attributeDefinitions: AttributeDefinitions = TabSetNode._createAttributeDefinitions();
 
-    /** @hidden @internal */
+    /** @internal */
     private static _createAttributeDefinitions(): AttributeDefinitions {
         const attributeDefinitions = new AttributeDefinitions();
         attributeDefinitions.add("type", TabSetNode.TYPE, true).setType(Attribute.STRING).setFixed();
@@ -79,23 +79,23 @@ export class TabSetNode extends Node implements IDraggable, IDropTarget {
         return attributeDefinitions;
     }
 
-    /** @hidden @internal */
+    /** @internal */
     private _contentRect?: Rect;
-    /** @hidden @internal */
+    /** @internal */
     private _tabHeaderRect?: Rect;
-    /** @hidden @internal */
-    private calculatedTabBarHeight: number;
-    /** @hidden @internal */
-    private calculatedHeaderBarHeight: number;
+    /** @internal */
+    private _calculatedTabBarHeight: number;
+    /** @internal */
+    private _calculatedHeaderBarHeight: number;
 
-    /** @hidden @internal */
+    /** @internal */
     constructor(model: Model, json: any) {
         super(model);
 
         TabSetNode._attributeDefinitions.fromJson(json, this._attributes);
         model._addNode(this);
-        this.calculatedTabBarHeight = 0;
-        this.calculatedHeaderBarHeight = 0;
+        this._calculatedTabBarHeight = 0;
+        this._calculatedHeaderBarHeight = 0;
     }
 
     getName() {
@@ -138,7 +138,7 @@ export class TabSetNode extends Node implements IDraggable, IDropTarget {
         return this._getAttr("minHeight") as number;
     }
 
-    /** @hidden @internal */
+    /** @internal */
     getMinSize(orientation: Orientation) {
         if (orientation === Orientation.HORZ) {
             return this.getMinWidth();
@@ -221,51 +221,51 @@ export class TabSetNode extends Node implements IDraggable, IDropTarget {
         return this._getAttr("classNameHeader") as string | undefined;
     }
 
-    /** @hidden @internal */
+    /** @internal */
     calculateHeaderBarHeight(metrics: ILayoutMetrics) {
         const headerBarHeight = this._getAttr("headerHeight") as number;
         if (headerBarHeight !== 0) {
             // its defined
-            this.calculatedHeaderBarHeight = headerBarHeight;
+            this._calculatedHeaderBarHeight = headerBarHeight;
         } else {
-            this.calculatedHeaderBarHeight = metrics.headerBarSize;
+            this._calculatedHeaderBarHeight = metrics.headerBarSize;
         }
     }
 
-    /** @hidden @internal */
+    /** @internal */
     calculateTabBarHeight(metrics: ILayoutMetrics) {
         const tabBarHeight = this._getAttr("tabStripHeight") as number;
         if (tabBarHeight !== 0) {
             // its defined
-            this.calculatedTabBarHeight = tabBarHeight;
+            this._calculatedTabBarHeight = tabBarHeight;
         } else {
-            this.calculatedTabBarHeight = metrics.tabBarSize;
+            this._calculatedTabBarHeight = metrics.tabBarSize;
         }
     }
 
     getHeaderHeight() {
-        return this.calculatedHeaderBarHeight;
+        return this._calculatedHeaderBarHeight;
     }
 
     getTabStripHeight() {
-        return this.calculatedTabBarHeight;
+        return this._calculatedTabBarHeight;
     }
 
     getTabLocation() {
         return this._getAttr("tabLocation") as string;
     }
 
-    /** @hidden @internal */
+    /** @internal */
     _setWeight(weight: number) {
         this._attributes.weight = weight;
     }
 
-    /** @hidden @internal */
+    /** @internal */
     _setSelected(index: number) {
         this._attributes.selected = index;
     }
 
-    /** @hidden @internal */
+    /** @internal */
     canDrop(dragNode: Node & IDraggable, x: number, y: number): DropInfo | undefined {
         let dropInfo;
 
@@ -320,7 +320,7 @@ export class TabSetNode extends Node implements IDraggable, IDropTarget {
         return dropInfo;
     }
 
-    /** @hidden @internal */
+    /** @internal */
     _layout(rect: Rect, metrics: ILayoutMetrics) {
         this.calculateHeaderBarHeight(metrics);
         this.calculateTabBarHeight(metrics);
@@ -337,34 +337,35 @@ export class TabSetNode extends Node implements IDraggable, IDropTarget {
         let y = 0;
         let h = 0;
         if (showHeader) {
-            y += this.calculatedHeaderBarHeight;
-            h += this.calculatedHeaderBarHeight;
+            y += this._calculatedHeaderBarHeight;
+            h += this._calculatedHeaderBarHeight;
         }
         if (this.isEnableTabStrip()) {
             if (this.getTabLocation() === "top") {
-                this._tabHeaderRect = new Rect(rect.x, rect.y + y, rect.width, this.calculatedTabBarHeight);
+                this._tabHeaderRect = new Rect(rect.x, rect.y + y, rect.width, this._calculatedTabBarHeight);
             } else {
-                this._tabHeaderRect = new Rect(rect.x, rect.y + rect.height - this.calculatedTabBarHeight, rect.width, this.calculatedTabBarHeight);
+                this._tabHeaderRect = new Rect(rect.x, rect.y + rect.height - this._calculatedTabBarHeight, rect.width, this._calculatedTabBarHeight);
             }
-            h += this.calculatedTabBarHeight;
+            h += this._calculatedTabBarHeight;
             if (this.getTabLocation() === "top") {
-                y += this.calculatedTabBarHeight;
+                y += this._calculatedTabBarHeight;
             }
         }
         this._contentRect = new Rect(rect.x, rect.y + y, rect.width, rect.height - h);
 
-        this._children.forEach((child, i) => {
+        for (let i = 0; i < this._children.length; i++) {
+            const child = this._children[i];
             child._layout(this._contentRect!, metrics);
             child._setVisible(i === this.getSelected());
-        });
+        }
     }
 
-    /** @hidden @internal */
+    /** @internal */
     _delete() {
         (this._parent as RowNode)._removeChild(this);
     }
 
-    /** @hidden @internal */
+    /** @internal */
     _remove(node: TabNode) {
         const removedIndex = this._removeChild(node);
         this._model._tidy();
@@ -372,7 +373,7 @@ export class TabSetNode extends Node implements IDraggable, IDropTarget {
         adjustSelectedIndex(this, removedIndex);
     }
 
-    /** @hidden @internal */
+    /** @internal */
     drop(dragNode: Node & IDraggable, location: DockLocation, index: number, select?: boolean) {
         const dockLocation = location;
 
@@ -407,11 +408,12 @@ export class TabSetNode extends Node implements IDraggable, IDropTarget {
                 }
                 // console.log("added child at : " + insertPos);
             } else {
-                dragNode.getChildren().forEach((child, i) => {
+                for (let i = 0; i < dragNode.getChildren().length; i++) {
+                    const child = dragNode.getChildren()[i];
                     this._addChild(child, insertPos);
                     // console.log("added child at : " + insertPos);
                     insertPos++;
-                });
+                }
             }
             this._model._setActiveTabset(this);
         } else {
@@ -471,17 +473,17 @@ export class TabSetNode extends Node implements IDraggable, IDropTarget {
         return json;
     }
 
-    /** @hidden @internal */
+    /** @internal */
     _updateAttrs(json: any) {
         TabSetNode._attributeDefinitions.update(json, this._attributes);
     }
 
-    /** @hidden @internal */
+    /** @internal */
     _getAttributeDefinitions() {
         return TabSetNode._attributeDefinitions;
     }
 
-    /** @hidden @internal */
+    /** @internal */
     _getPrefSize(orientation: Orientation) {
         let prefSize = this.getWidth();
         if (orientation === Orientation.VERT) {
@@ -491,7 +493,7 @@ export class TabSetNode extends Node implements IDraggable, IDropTarget {
     }
 
 
-    /** @hidden @internal */
+    /** @internal */
     static getAttributeDefinitions() {
         return TabSetNode._attributeDefinitions;
     }

package/src/model/Utils.ts

@@ -3,7 +3,7 @@ import { BorderNode } from "./BorderNode";
 import { RowNode } from "./RowNode";
 import { TabNode } from "./TabNode";
 
-/** @hidden @internal */
+/** @internal */
 export function adjustSelectedIndexAfterFloat(node: TabNode) {
     const parent = node.getParent();
     if (parent !== null) {
@@ -29,7 +29,7 @@ export function adjustSelectedIndexAfterFloat(node: TabNode) {
     }
 }
 
-/** @hidden @internal */
+/** @internal */
 export function adjustSelectedIndexAfterDock(node: TabNode) {
     const parent = node.getParent();
     if (parent !== null && (parent instanceof TabSetNode || parent instanceof BorderNode)) {
@@ -44,7 +44,7 @@ export function adjustSelectedIndexAfterDock(node: TabNode) {
     }
 }
 
-/** @hidden @internal */
+/** @internal */
 export function adjustSelectedIndex(parent: TabSetNode | BorderNode | RowNode, removedIndex: number) {
     // for the tabset/border being removed from set the selected index
     if (parent !== undefined && (parent.getType() === TabSetNode.TYPE || parent.getType() === BorderNode.TYPE)) {

package/src/view/BorderButton.tsx

@@ -1,5 +1,5 @@
 import * as React from "react";
-import { I18nLabel } from "..";
+import { I18nLabel } from "../I18nLabel";
 import { Actions } from "../model/Actions";
 import { TabNode } from "../model/TabNode";
 import { Rect } from "../Rect";
@@ -8,7 +8,7 @@ import { ICloseType } from "../model/ICloseType";
 import { CLASSES } from "../Types";
 import { getRenderStateEx, isAuxMouseEvent } from "./Utils";
 
-/** @hidden @internal */
+/** @internal */
 export interface IBorderButtonProps {
     layout: ILayoutCallbacks;
     node: TabNode;
@@ -16,18 +16,20 @@ export interface IBorderButtonProps {
     border: string;
     iconFactory?: (node: TabNode) => React.ReactNode | undefined;
     titleFactory?: (node: TabNode) => React.ReactNode | undefined;
-    icons?: IIcons;
+    icons: IIcons;
     path: string;
 }
 
-/** @hidden @internal */
+/** @internal */
 export const BorderButton = (props: IBorderButtonProps) => {
     const { layout, node, selected, border, iconFactory, titleFactory, icons, path } = props;
     const selfRef = React.useRef<HTMLDivElement | null>(null);
+    const contentRef = React.useRef<HTMLInputElement | null>(null);
 
     const onMouseDown = (event: React.MouseEvent<HTMLDivElement, MouseEvent> | React.TouchEvent<HTMLDivElement>) => {
-        if (!isAuxMouseEvent(event)) {
-            props.layout.dragStart(event, undefined, node, node.isEnableDrag(), onClick, (event2: Event) => undefined);
+
+        if (!isAuxMouseEvent(event) && !layout.getEditingTab()) {
+            layout.dragStart(event, undefined, node, node.isEnableDrag(), onClick, onDoubleClick);
         }
     };
 
@@ -45,6 +47,26 @@ export const BorderButton = (props: IBorderButtonProps) => {
         layout.doAction(Actions.selectTab(node.getId()));
     };
 
+    const onDoubleClick = (event: Event) => {
+        // if (node.isEnableRename()) {
+        //     onRename();
+        // }
+    };
+
+    // const onRename = () => {
+    //     layout.setEditingTab(node);
+    //     layout.getCurrentDocument()!.body.addEventListener("mousedown", onEndEdit);
+    //     layout.getCurrentDocument()!.body.addEventListener("touchstart", onEndEdit);
+    // };
+
+    const onEndEdit = (event: Event) => {
+        if (event.target !== contentRef.current!) {
+            layout.getCurrentDocument()!.body.removeEventListener("mousedown", onEndEdit);
+            layout.getCurrentDocument()!.body.removeEventListener("touchstart", onEndEdit);
+            layout.setEditingTab(undefined);
+        }
+    };
+
     const isClosable = () => {
         const closeType = node.getCloseType();
         if (selected || closeType === ICloseType.Always) {
@@ -73,13 +95,33 @@ export const BorderButton = (props: IBorderButtonProps) => {
 
     React.useLayoutEffect(() => {
         updateRect();
+        if (layout.getEditingTab() === node) {
+            (contentRef.current! as HTMLInputElement).select();
+        }
     });
 
     const updateRect = () => {
-        // record position of tab in border
-        const clientRect = layout.getDomRect();
+        // record position of tab in node
+        const layoutRect = layout.getDomRect();
         const r = selfRef.current!.getBoundingClientRect();
-        node._setTabRect(new Rect(r.left - clientRect.left, r.top - clientRect.top, r.width, r.height));
+        node._setTabRect(new Rect(r.left - layoutRect.left, r.top - layoutRect.top, r.width, r.height));
+    };
+
+    const onTextBoxMouseDown = (event: React.MouseEvent<HTMLInputElement> | React.TouchEvent<HTMLInputElement>) => {
+        // console.log("onTextBoxMouseDown");
+        event.stopPropagation();
+    };
+
+    const onTextBoxKeyPress = (event: React.KeyboardEvent<HTMLInputElement>) => {
+        // console.log(event, event.keyCode);
+        if (event.keyCode === 27) {
+            // esc
+            layout.setEditingTab(undefined);
+        } else if (event.keyCode === 13) {
+            // enter
+            layout.setEditingTab(undefined);
+            layout.doAction(Actions.renameTab(node.getId(), (event.target as HTMLInputElement).value));
+        }
     };
 
     const cm = layout.getClassName;
@@ -97,8 +139,31 @@ export const BorderButton = (props: IBorderButtonProps) => {
 
     const renderState = getRenderStateEx(layout, node, iconFactory, titleFactory);
 
-    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;
+    let 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 (layout.getEditingTab() === node) {
+        content = (
+            <input
+                ref={contentRef}
+                className={cm(CLASSES.FLEXLAYOUT__TAB_BUTTON_TEXTBOX)}
+                data-layout-path={path + "/textbox"}
+                type="text"
+                autoFocus={true}
+                defaultValue={node.getName()}
+                onKeyDown={onTextBoxKeyPress}
+                onMouseDown={onTextBoxMouseDown}
+                onTouchStart={onTextBoxMouseDown}
+            />
+        );
+    }
 
     if (node.isEnableClose()) {
         const closeTitle = layout.i18nName(I18nLabel.Close_Tab);
@@ -111,20 +176,23 @@ export const BorderButton = (props: IBorderButtonProps) => {
                 onMouseDown={onCloseMouseDown}
                 onClick={onClose}
                 onTouchStart={onCloseMouseDown}>
-                {icons?.close}
+                {(typeof icons.close === "function") ? icons.close(node) : icons.close}
             </div>
         );
     }
 
     return (
-        <div ref={selfRef} style={{}} className={classNames}
+        <div
+            ref={selfRef}
             data-layout-path={path}
+            className={classNames}
             onMouseDown={onMouseDown}
             onClick={onAuxMouseClick}
             onAuxClick={onAuxMouseClick}
             onContextMenu={onContextMenu}
             onTouchStart={onMouseDown}
-            title={node.getHelpText()}>
+            title={node.getHelpText()}
+        >
             {leading}
             {content}
             {renderState.buttons}

package/src/view/BorderTabSet.tsx

@@ -12,7 +12,7 @@ import { Orientation } from "../Orientation";
 import { CLASSES } from "../Types";
 import { isAuxMouseEvent } from "./Utils";
 
-/** @hidden @internal */
+/** @internal */
 export interface IBorderTabSetProps {
     border: BorderNode;
     layout: ILayoutCallbacks;
@@ -22,7 +22,7 @@ export interface IBorderTabSetProps {
     path: string;
 }
 
-/** @hidden @internal */
+/** @internal */
 export const BorderTabSet = (props: IBorderTabSetProps) => {
     const { border, layout, iconFactory, titleFactory, icons, path } = props;
 

package/src/view/ErrorBoundary.tsx

@@ -2,16 +2,16 @@ import * as React from "react";
 import { ErrorInfo } from "react";
 import { CLASSES } from "../Types";
 
-/** @hidden @internal */
+/** @internal */
 export interface IErrorBoundaryProps {
     message: string;
 }
-/** @hidden @internal */
+/** @internal */
 export interface IErrorBoundaryState {
     hasError: boolean;
 }
 
-/** @hidden @internal */
+/** @internal */
 export class ErrorBoundary extends React.Component<IErrorBoundaryProps, IErrorBoundaryState> {
     constructor(props: IErrorBoundaryProps) {
         super(props);

package/src/view/FloatingWindow.tsx

@@ -3,7 +3,7 @@ import { createPortal } from "react-dom";
 import { Rect } from "../Rect";
 import { CLASSES } from "../Types";
 
-/** @hidden @internal */
+/** @internal */
 export interface IFloatingWindowProps {
     title: string;
     id: string;
@@ -19,7 +19,7 @@ interface IStyleSheet {
     rules: string[] | null;
 }
 
-/** @hidden @internal */
+/** @internal */
 export const FloatingWindow = (props: React.PropsWithChildren<IFloatingWindowProps>) => {
     const { title, id, url, rect, onCloseWindow, onSetWindow, children } = props;
     const popoutWindow = React.useRef<Window | null>(null);
@@ -101,11 +101,11 @@ export const FloatingWindow = (props: React.PropsWithChildren<IFloatingWindowPro
     }
 };
 
-/** @hidden @internal */
+/** @internal */
 function copyStyles(doc: Document, styleSheets: IStyleSheet[]): Promise<boolean[]> {
     const head = doc.head;
     const promises: Promise<boolean>[] = [];
-    styleSheets.forEach((styleSheet) => {
+    for (const styleSheet of styleSheets) {
         if (styleSheet.href) {
             // prefer links since they will keep paths to images etc
             const styleElement = doc.createElement("link");
@@ -121,10 +121,12 @@ function copyStyles(doc: Document, styleSheets: IStyleSheet[]): Promise<boolean[
         } else {
             if (styleSheet.rules) {
                 const style = doc.createElement("style");
-                styleSheet.rules.forEach(rule => style.appendChild(doc.createTextNode(rule)));
+                for (const rule of styleSheet.rules) {
+                    style.appendChild(doc.createTextNode(rule));
+                }
                 head.appendChild(style);
             }
         }
-    });
+    }
     return Promise.all(promises);
 }

package/src/view/FloatingWindowTab.tsx

@@ -6,14 +6,14 @@ import { I18nLabel } from "../I18nLabel";
 import { Fragment } from "react";
 import { CLASSES } from "../Types";
 
-/** @hidden @internal */
+/** @internal */
 export interface IFloatingWindowTabProps {
     layout: ILayoutCallbacks;
     node: TabNode;
     factory: (node: TabNode) => React.ReactNode;
 }
 
-/** @hidden @internal */
+/** @internal */
 export const FloatingWindowTab = (props: IFloatingWindowTabProps) => {
     const { layout, node, factory } = props;
     const cm = layout.getClassName;