flexlayout-react 0.8.12 → 0.8.14

package/README.md

@@ -274,7 +274,18 @@ For example:
 
 ```
 onRenderTabSet = (node: (TabSetNode | BorderNode), renderValues: ITabSetRenderValues) => {
-    renderValues.stickyButtons.push(<img key="add" style={{width:"1em", height:"1em"}} src="images/add.svg"/>);
+    renderValues.stickyButtons.push(
+        <button
+            key="Add"
+            title="Add"
+            className="flexlayout__tab_toolbar_button"
+            onClick={() => {
+                model.doAction(Actions.addNode({
+                    component: "placeholder",
+                    name: "Added " + nextAddIndex.current++
+                }, node.getId(), DockLocation.CENTER, -1, true));
+            }}
+        ><AddIcon/></button>);
 
     renderValues.buttons.push(<img key="menu" style={{width:"1em", height:"1em"}} src="images/menu.svg"/>);
 }
@@ -457,12 +468,12 @@ pnpm install
 Compile the project and run the examples:
 
 ```
-pnpm start
+pnpm dev
 ```
 
-Open your browser at http://localhost:8080/examples/ to show the examples directory, click on the examples to run them.
+Open your browser at the address shown to see the Demo app.
 
-The 'pnpm start' command will watch for changes to flexlayout and example source, so you can make changes to the code and then refresh the browser to see the result.
+The 'pnpm dev' command will watch for changes to flexlayout and the Demo, so you can make changes to the code and then refresh the browser to see the result.
 
 Once the demo is running you can run the Playwright tests by running (in another terminal window)
 
@@ -472,7 +483,7 @@ pnpm playwright
 
 <img src="screenshots/PlaywrightUI.png?raw=true" alt="PlaywrightUI" title="PlaywrightUI screenshot"/>
 
-To build the npm distribution run 'pnpm build', this will create the artifacts in the dist dir.
+To build the npm distribution run 'pnpm build'.
 
 ## Alternative Layout Managers
 

package/declarations/Attribute.d.ts

@@ -1 +1,25 @@
-export {};
+/** @internal */
+export declare class Attribute {
+    static NUMBER: string;
+    static STRING: string;
+    static BOOLEAN: string;
+    name: string;
+    alias: string | undefined;
+    modelName?: string;
+    pairedAttr?: Attribute;
+    pairedType?: string;
+    defaultValue: any;
+    alwaysWriteJson?: boolean;
+    type?: string;
+    required: boolean;
+    fixed: boolean;
+    description?: string;
+    constructor(name: string, modelName: string | undefined, defaultValue: any, alwaysWriteJson?: boolean);
+    setType(value: string): this;
+    setAlias(value: string): this;
+    setDescription(value: string): void;
+    setRequired(): this;
+    setFixed(): this;
+    setpairedAttr(value: Attribute): void;
+    setPairedType(value: string): void;
+}

package/declarations/AttributeDefinitions.d.ts

@@ -1 +1,18 @@
-export {};
+import { Attribute } from "./Attribute";
+/** @internal */
+export declare class AttributeDefinitions {
+    attributes: Attribute[];
+    nameToAttribute: Map<string, Attribute>;
+    constructor();
+    addWithAll(name: string, modelName: string | undefined, defaultValue: any, alwaysWriteJson?: boolean): Attribute;
+    addInherited(name: string, modelName: string): Attribute;
+    add(name: string, defaultValue: any, alwaysWriteJson?: boolean): Attribute;
+    getAttributes(): Attribute[];
+    getModelName(name: string): string | undefined;
+    toJson(jsonObj: any, obj: any): void;
+    fromJson(jsonObj: any, obj: any): void;
+    update(jsonObj: any, obj: any): void;
+    setDefaults(obj: any): void;
+    pairAttributes(type: string, childAttributes: AttributeDefinitions): void;
+    toTypescriptInterface(name: string, parentAttributes: AttributeDefinitions | undefined): string;
+}

package/declarations/DockLocation.d.ts

@@ -1,4 +1,5 @@
 import { Orientation } from "./Orientation";
+import { Rect } from "./Rect";
 export declare class DockLocation {
     static values: Map<string, DockLocation>;
     static TOP: DockLocation;
@@ -6,7 +7,28 @@ export declare class DockLocation {
     static LEFT: DockLocation;
     static RIGHT: DockLocation;
     static CENTER: DockLocation;
+    /** @internal */
+    static getByName(name: string): DockLocation;
+    /** @internal */
+    static getLocation(rect: Rect, x: number, y: number): DockLocation;
+    /** @internal */
+    name: string;
+    /** @internal */
+    orientation: Orientation;
+    /** @internal */
+    indexPlus: number;
+    /** @internal */
+    constructor(_name: string, _orientation: Orientation, _indexPlus: number);
     getName(): string;
     getOrientation(): Orientation;
+    /** @internal */
+    getDockRect(r: Rect): Rect;
+    /** @internal */
+    split(rect: Rect, size: number): {
+        start: Rect;
+        end: Rect;
+    };
+    /** @internal */
+    reflect(): DockLocation;
     toString(): string;
 }

package/declarations/I18nLabel.d.ts

@@ -8,5 +8,6 @@ export declare enum I18nLabel {
     Restore = "Restore tab set",
     Popout_Tab = "Popout selected tab",
     Overflow_Menu_Tooltip = "Hidden tabs",
-    Error_rendering_component = "Error rendering component"
+    Error_rendering_component = "Error rendering component",
+    Error_rendering_component_retry = "Retry"
 }

package/declarations/Orientation.d.ts

@@ -2,6 +2,10 @@ export declare class Orientation {
     static HORZ: Orientation;
     static VERT: Orientation;
     static flip(from: Orientation): Orientation;
+    /** @internal */
+    private _name;
+    /** @internal */
+    private constructor();
     getName(): string;
     toString(): string;
 }

package/declarations/Rect.d.ts

@@ -1,4 +1,5 @@
 import { IJsonRect } from "./model/IJsonModel";
+import { Orientation } from "./Orientation";
 export declare class Rect {
     static empty(): Rect;
     static fromJson(json: IJsonRect): Rect;
@@ -39,5 +40,7 @@ export declare class Rect {
         right: number;
     }): Rect;
     centerInRect(outerRect: Rect): void;
+    /** @internal */
+    _getSize(orientation: Orientation): number;
     toString(): string;
 }

package/declarations/index.d.ts

@@ -1,4 +1,5 @@
 export * from './view/Layout';
+export * from './view/Icons';
 export * from './model/Action';
 export * from './model/Actions';
 export * from './model/BorderNode';

package/declarations/model/BorderNode.d.ts

@@ -1,11 +1,28 @@
+import { AttributeDefinitions } from "../AttributeDefinitions";
 import { DockLocation } from "../DockLocation";
+import { DropInfo } from "../DropInfo";
 import { Orientation } from "../Orientation";
+import { Rect } from "../Rect";
+import { IDraggable } from "./IDraggable";
 import { IDropTarget } from "./IDropTarget";
 import { IJsonBorderNode } from "./IJsonModel";
+import { Model } from "./Model";
 import { Node } from "./Node";
 import { TabNode } from "./TabNode";
 export declare class BorderNode extends Node implements IDropTarget {
     static readonly TYPE = "border";
+    /** @internal */
+    static fromJson(json: any, model: Model): BorderNode;
+    /** @internal */
+    private static attributeDefinitions;
+    /** @internal */
+    private contentRect;
+    /** @internal */
+    private tabHeaderRect;
+    /** @internal */
+    private location;
+    /** @internal */
+    constructor(location: DockLocation, json: any, model: Model);
     getLocation(): DockLocation;
     getClassName(): string | undefined;
     isHorizontal(): boolean;
@@ -27,5 +44,41 @@ export declare class BorderNode extends Node implements IDropTarget {
     isMaximized(): boolean;
     isShowing(): boolean;
     toJson(): IJsonBorderNode;
+    /** @internal */
+    isAutoSelectTab(whenOpen?: boolean): boolean;
     isEnableTabScrollbar(): boolean;
+    /** @internal */
+    setSelected(index: number): void;
+    /** @internal */
+    getTabHeaderRect(): Rect;
+    /** @internal */
+    setTabHeaderRect(r: Rect): void;
+    /** @internal */
+    getRect(): Rect;
+    /** @internal */
+    getContentRect(): Rect;
+    /** @internal */
+    setContentRect(r: Rect): void;
+    /** @internal */
+    isEnableDrop(): boolean;
+    /** @internal */
+    setSize(pos: number): void;
+    /** @internal */
+    updateAttrs(json: any): void;
+    /** @internal */
+    remove(node: TabNode): void;
+    /** @internal */
+    canDrop(dragNode: Node & IDraggable, x: number, y: number): DropInfo | undefined;
+    /** @internal */
+    drop(dragNode: Node & IDraggable, location: DockLocation, index: number, select?: boolean): void;
+    /** @internal */
+    getSplitterBounds(index: number, useMinSize?: boolean): number[];
+    /** @internal */
+    calculateSplit(splitter: BorderNode, splitterPos: number): number;
+    /** @internal */
+    getAttributeDefinitions(): AttributeDefinitions;
+    /** @internal */
+    static getAttributeDefinitions(): AttributeDefinitions;
+    /** @internal */
+    private static createAttributeDefinitions;
 }

package/declarations/model/BorderSet.d.ts

@@ -1,3 +1,31 @@
+import { DockLocation } from "../DockLocation";
+import { DropInfo } from "../DropInfo";
+import { BorderNode } from "./BorderNode";
+import { IDraggable } from "./IDraggable";
+import { Model } from "./Model";
+import { Node } from "./Node";
 export declare class BorderSet {
+    /** @internal */
+    static fromJson(json: any, model: Model): BorderSet;
+    /** @internal */
+    private borders;
+    /** @internal */
+    private borderMap;
+    /** @internal */
+    private layoutHorizontal;
+    /** @internal */
+    constructor(_model: Model);
     toJson(): import("./IJsonModel").IJsonBorderNode[];
+    /** @internal */
+    getLayoutHorizontal(): boolean;
+    /** @internal */
+    getBorders(): BorderNode[];
+    /** @internal */
+    getBorderMap(): Map<DockLocation, BorderNode>;
+    /** @internal */
+    forEachNode(fn: (node: Node, level: number) => void): void;
+    /** @internal */
+    setPaths(): void;
+    /** @internal */
+    findDropTargetNode(dragNode: Node & IDraggable, x: number, y: number): DropInfo | undefined;
 }

package/declarations/model/IDraggable.d.ts

@@ -1,2 +1,6 @@
 export interface IDraggable {
+    /** @internal */
+    isEnableDrag(): boolean;
+    /** @internal */
+    getName(): string | undefined;
 }

package/declarations/model/IDropTarget.d.ts

@@ -1,2 +1,12 @@
+import { DockLocation } from "../DockLocation";
+import { DropInfo } from "../DropInfo";
+import { IDraggable } from "./IDraggable";
+import { Node } from "./Node";
 export interface IDropTarget {
+    /** @internal */
+    canDrop(dragNode: Node & IDraggable, x: number, y: number): DropInfo | undefined;
+    /** @internal */
+    drop(dragNode: Node & IDraggable, location: DockLocation, index: number, select?: boolean): void;
+    /** @internal */
+    isEnableDrop(): boolean;
 }

package/declarations/model/LayoutWindow.d.ts

@@ -23,6 +23,22 @@ export declare class LayoutWindow {
     get root(): RowNode | undefined;
     get maximizedTabSet(): TabSetNode | undefined;
     get activeTabSet(): TabSetNode | undefined;
+    /** @internal */
+    set rect(value: Rect);
+    /** @internal */
+    set layout(value: LayoutInternal);
+    /** @internal */
+    set window(value: Window | undefined);
+    /** @internal */
+    set root(value: RowNode | undefined);
+    /** @internal */
+    set maximizedTabSet(value: TabSetNode | undefined);
+    /** @internal */
+    set activeTabSet(value: TabSetNode | undefined);
+    /** @internal */
+    get toScreenRectFunction(): (rect: Rect) => Rect;
+    /** @internal */
+    set toScreenRectFunction(value: (rect: Rect) => Rect);
     toJson(): IJsonPopout;
     static fromJson(windowJson: IJsonPopout, model: Model, windowId: string): LayoutWindow;
 }

package/declarations/model/Model.d.ts

@@ -1,17 +1,45 @@
 import { DropInfo } from "../DropInfo";
 import { Action } from "./Action";
 import { BorderSet } from "./BorderSet";
+import { IDraggable } from "./IDraggable";
 import { IJsonModel, ITabSetAttributes } from "./IJsonModel";
 import { Node } from "./Node";
 import { RowNode } from "./RowNode";
 import { TabNode } from "./TabNode";
 import { TabSetNode } from "./TabSetNode";
 import { LayoutWindow } from "./LayoutWindow";
+/** @internal */
+export declare const DefaultMin = 0;
+/** @internal */
+export declare const DefaultMax = 99999;
 /**
  * Class containing the Tree of Nodes used by the FlexLayout component
  */
 export declare class Model {
     static MAIN_WINDOW_ID: string;
+    /** @internal */
+    private static attributeDefinitions;
+    /** @internal */
+    private attributes;
+    /** @internal */
+    private idMap;
+    /** @internal */
+    private changeListeners;
+    /** @internal */
+    private borders;
+    /** @internal */
+    private onAllowDrop?;
+    /** @internal */
+    private onCreateTabSet?;
+    /** @internal */
+    private windows;
+    /** @internal */
+    private rootWindow;
+    /**
+     * 'private' constructor. Use the static method Model.fromJson(json) to create a model
+     *  @internal
+     */
+    protected constructor();
     /**
      * Update the node tree by performing the given action,
      * Actions should be generated via static methods on the Actions class
@@ -87,5 +115,32 @@ export declare class Model {
     addChangeListener(listener: ((action: Action) => void)): void;
     removeChangeListener(listener: ((action: Action) => void)): void;
     toString(): string;
+    /***********************internal ********************************/
+    /** @internal */
+    removeEmptyWindows(): void;
+    /** @internal */
+    setActiveTabset(tabsetNode: TabSetNode | undefined, windowId: string): void;
+    /** @internal */
+    setMaximizedTabset(tabsetNode: (TabSetNode | undefined), windowId: string): void;
+    /** @internal */
+    updateIdMap(): void;
+    /** @internal */
+    addNode(node: Node): void;
+    /** @internal */
+    findDropTargetNode(windowId: string, dragNode: Node & IDraggable, x: number, y: number): DropInfo | undefined;
+    /** @internal */
+    tidy(): void;
+    /** @internal */
+    updateAttrs(json: any): void;
+    /** @internal */
+    nextUniqueId(): string;
+    /** @internal */
+    getAttribute(name: string): any;
+    /** @internal */
+    getOnAllowDrop(): ((dragNode: Node, dropInfo: DropInfo) => boolean) | undefined;
+    /** @internal */
+    getOnCreateTabSet(): ((tabNode?: TabNode) => ITabSetAttributes) | undefined;
     static toTypescriptInterfaces(): void;
+    /** @internal */
+    private static createAttributeDefinitions;
 }

package/declarations/model/Node.d.ts

@@ -1,8 +1,27 @@
+import { AttributeDefinitions } from "../AttributeDefinitions";
+import { DropInfo } from "../DropInfo";
 import { Orientation } from "../Orientation";
 import { Rect } from "../Rect";
+import { IDraggable } from "./IDraggable";
 import { IJsonBorderNode, IJsonRowNode, IJsonTabNode, IJsonTabSetNode } from "./IJsonModel";
 import { Model } from "./Model";
 export declare abstract class Node {
+    /** @internal */
+    protected model: Model;
+    /** @internal */
+    protected attributes: Record<string, any>;
+    /** @internal */
+    protected parent?: Node;
+    /** @internal */
+    protected children: Node[];
+    /** @internal */
+    protected rect: Rect;
+    /** @internal */
+    protected path: string;
+    /** @internal */
+    protected listeners: Map<string, (params: any) => void>;
+    /** @internal */
+    protected constructor(_model: Model);
     getId(): string;
     getModel(): Model;
     getType(): string;
@@ -14,4 +33,46 @@ export declare abstract class Node {
     setEventListener(event: string, callback: (params: any) => void): void;
     removeEventListener(event: string): void;
     abstract toJson(): IJsonRowNode | IJsonBorderNode | IJsonTabSetNode | IJsonTabNode | undefined;
+    /** @internal */
+    setId(id: string): void;
+    /** @internal */
+    fireEvent(event: string, params: any): void;
+    /** @internal */
+    getAttr(name: string): any;
+    /** @internal */
+    forEachNode(fn: (node: Node, level: number) => void, level: number): void;
+    /** @internal */
+    setPaths(path: string): void;
+    /** @internal */
+    setParent(parent: Node): void;
+    /** @internal */
+    setRect(rect: Rect): void;
+    /** @internal */
+    setPath(path: string): void;
+    /** @internal */
+    setWeight(weight: number): void;
+    /** @internal */
+    setSelected(index: number): void;
+    /** @internal */
+    findDropTargetNode(windowId: string, dragNode: Node & IDraggable, x: number, y: number): DropInfo | undefined;
+    /** @internal */
+    canDrop(dragNode: Node & IDraggable, x: number, y: number): DropInfo | undefined;
+    /** @internal */
+    canDockInto(dragNode: Node & IDraggable, dropInfo: DropInfo | undefined): boolean;
+    /** @internal */
+    removeChild(childNode: Node): number;
+    /** @internal */
+    addChild(childNode: Node, pos?: number): number;
+    /** @internal */
+    removeAll(): void;
+    /** @internal */
+    styleWithPosition(style?: Record<string, any>): Record<string, any>;
+    /** @internal */
+    isEnableDivide(): boolean;
+    /** @internal */
+    toAttributeString(): string;
+    /** @internal */
+    abstract updateAttrs(json: any): void;
+    /** @internal */
+    abstract getAttributeDefinitions(): AttributeDefinitions;
 }

package/declarations/model/RowNode.d.ts

@@ -1,10 +1,77 @@
+import { AttributeDefinitions } from "../AttributeDefinitions";
+import { DockLocation } from "../DockLocation";
+import { DropInfo } from "../DropInfo";
+import { Orientation } from "../Orientation";
+import { IDraggable } from "./IDraggable";
 import { IDropTarget } from "./IDropTarget";
 import { IJsonRowNode } from "./IJsonModel";
+import { Model } from "./Model";
 import { Node } from "./Node";
+import { LayoutWindow } from "./LayoutWindow";
 export declare class RowNode extends Node implements IDropTarget {
     static readonly TYPE = "row";
+    /** @internal */
+    static fromJson(json: any, model: Model, layoutWindow: LayoutWindow): RowNode;
+    /** @internal */
+    private static attributeDefinitions;
+    /** @internal */
+    private windowId;
+    /** @internal */
+    private minHeight;
+    /** @internal */
+    private minWidth;
+    /** @internal */
+    private maxHeight;
+    /** @internal */
+    private maxWidth;
+    /** @internal */
+    constructor(model: Model, windowId: string, json: any);
     getWeight(): number;
     toJson(): IJsonRowNode;
+    /** @internal */
+    getWindowId(): string;
     setWindowId(windowId: string): void;
+    /** @internal */
+    setWeight(weight: number): void;
+    /** @internal */
+    getSplitterBounds(index: number): number[];
+    /** @internal */
+    getSplitterInitials(index: number): {
+        initialSizes: number[];
+        sum: number;
+        startPosition: number;
+    };
+    /** @internal */
+    calculateSplit(index: number, splitterPos: number, initialSizes: number[], sum: number, startPosition: number): number[];
+    /** @internal */
+    getMinSize(orientation: Orientation): number;
+    /** @internal */
+    getMinWidth(): number;
+    /** @internal */
+    getMinHeight(): number;
+    /** @internal */
+    getMaxSize(orientation: Orientation): number;
+    /** @internal */
+    getMaxWidth(): number;
+    /** @internal */
+    getMaxHeight(): number;
+    /** @internal */
+    calcMinMaxSize(): void;
+    /** @internal */
+    tidy(): void;
+    /** @internal */
+    canDrop(dragNode: Node & IDraggable, x: number, y: number): DropInfo | undefined;
+    /** @internal */
+    drop(dragNode: Node, location: DockLocation, index: number): void;
+    /** @internal */
+    isEnableDrop(): boolean;
+    /** @internal */
+    getAttributeDefinitions(): AttributeDefinitions;
+    /** @internal */
+    updateAttrs(json: any): void;
+    /** @internal */
+    static getAttributeDefinitions(): AttributeDefinitions;
     normalizeWeights(): void;
+    /** @internal */
+    private static createAttributeDefinitions;
 }

package/declarations/model/TabNode.d.ts

@@ -1,8 +1,33 @@
+import { AttributeDefinitions } from "../AttributeDefinitions";
+import { Rect } from "../Rect";
 import { IDraggable } from "./IDraggable";
 import { IJsonTabNode } from "./IJsonModel";
+import { Model } from "./Model";
 import { Node } from "./Node";
 export declare class TabNode extends Node implements IDraggable {
     static readonly TYPE = "tab";
+    /** @internal */
+    static fromJson(json: any, model: Model, addToModel?: boolean): TabNode;
+    /** @internal */
+    private tabRect;
+    /** @internal */
+    private moveableElement;
+    /** @internal */
+    private tabStamp;
+    /** @internal */
+    private renderedName?;
+    /** @internal */
+    private extra;
+    /** @internal */
+    private visible;
+    /** @internal */
+    private rendered;
+    /** @internal */
+    private scrollTop?;
+    /** @internal */
+    private scrollLeft?;
+    /** @internal */
+    constructor(model: Model, json: any, addToModel?: boolean);
     getName(): string;
     getHelpText(): string | undefined;
     getComponent(): string | undefined;
@@ -42,4 +67,58 @@ export declare class TabNode extends Node implements IDraggable {
     getMaxHeight(): number;
     isVisible(): boolean;
     toJson(): IJsonTabNode;
+    /** @internal */
+    saveScrollPosition(): void;
+    /** @internal */
+    restoreScrollPosition(): void;
+    /** @internal */
+    setRect(rect: Rect): void;
+    /** @internal */
+    setVisible(visible: boolean): void;
+    /** @internal */
+    getScrollTop(): number | undefined;
+    /** @internal */
+    setScrollTop(scrollTop: number | undefined): void;
+    /** @internal */
+    getScrollLeft(): number | undefined;
+    /** @internal */
+    setScrollLeft(scrollLeft: number | undefined): void;
+    /** @internal */
+    isRendered(): boolean;
+    /** @internal */
+    setRendered(rendered: boolean): void;
+    /** @internal */
+    getTabRect(): Rect;
+    /** @internal */
+    setTabRect(rect: Rect): void;
+    /** @internal */
+    getTabStamp(): HTMLElement | null;
+    /** @internal */
+    setTabStamp(stamp: HTMLElement | null): void;
+    /** @internal */
+    getMoveableElement(): HTMLElement | null;
+    /** @internal */
+    setMoveableElement(element: HTMLElement | null): void;
+    /** @internal */
+    setRenderedName(name: string): void;
+    /** @internal */
+    getNameForOverflowMenu(): string | undefined;
+    /** @internal */
+    setName(name: string): void;
+    /** @internal */
+    delete(): void;
+    /** @internal */
+    updateAttrs(json: any): void;
+    /** @internal */
+    getAttributeDefinitions(): AttributeDefinitions;
+    /** @internal */
+    setBorderWidth(width: number): void;
+    /** @internal */
+    setBorderHeight(height: number): void;
+    /** @internal */
+    static getAttributeDefinitions(): AttributeDefinitions;
+    /** @internal */
+    private static attributeDefinitions;
+    /** @internal */
+    private static createAttributeDefinitions;
 }