flexlayout-react 0.8.19 → 0.9.1

package/types/model/IJsonModel.d.ts

@@ -1,10 +1,13 @@
 import { ICloseType } from "./ICloseType";
 export type IBorderLocation = "top" | "bottom" | "left" | "right";
 export type ITabLocation = "top" | "bottom";
+export type ILayoutType = "window" | "float" | "tab";
 export interface IJsonModel {
     global?: IGlobalAttributes;
     borders?: IJsonBorderNode[];
     layout: IJsonRowNode;
+    subLayouts?: Record<string, IJsonSubLayout>;
+    /** @deprecated Use `subLayouts` instead. */
     popouts?: Record<string, IJsonPopout>;
 }
 export interface IJsonRect {
@@ -13,16 +16,19 @@ export interface IJsonRect {
     width: number;
     height: number;
 }
-export interface IJsonPopout {
+export interface IJsonSubLayout {
     layout: IJsonRowNode;
-    rect: IJsonRect;
+    rect?: IJsonRect;
+    type?: ILayoutType;
 }
+/** @deprecated Use `IJsonSubLayout` instead. */
+export type IJsonPopout = IJsonSubLayout;
 export interface IJsonBorderNode extends IBorderAttributes {
     location: IBorderLocation;
-    children: IJsonTabNode[];
+    children?: IJsonTabNode[];
 }
 export interface IJsonRowNode extends IRowAttributes {
-    children: (IJsonRowNode | IJsonTabSetNode)[];
+    children?: (IJsonRowNode | IJsonTabSetNode)[];
 }
 export interface IJsonTabSetNode extends ITabSetAttributes {
     /** Marks this as the active tab set, read from initial json but
@@ -31,10 +37,9 @@ export interface IJsonTabSetNode extends ITabSetAttributes {
     /** Marks this tab set as being maximized, read from initial json but
      * must subseqently be set on the model (only one tab set can be maximized) */
     maximized?: boolean;
-    children: IJsonTabNode[];
-}
-export interface IJsonTabNode extends ITabAttributes {
+    children?: IJsonTabNode[];
 }
+export type IJsonTabNode = ITabAttributes;
 export interface IGlobalAttributes {
     /**
       Value for BorderNode attribute autoSelectTabWhenClosed if not overridden
@@ -97,7 +102,7 @@ export interface IGlobalAttributes {
 
       the minimum size of the tab area
 
-      Default: 0
+      Default: 1
      */
     borderMinSize?: number;
     /**
@@ -109,11 +114,17 @@ export interface IGlobalAttributes {
      */
     borderSize?: number;
     /**
-      enable docking to the edges of the layout, this will show the edge indicators
+      enable docking to the edges of the layout
 
       Default: true
      */
     enableEdgeDock?: boolean;
+    /**
+      show the edge indicators when dragging
+
+      Default: true
+     */
+    enableEdgeDockIndicators?: boolean;
     /**
       boolean indicating if tab icons should rotate with the text in the left and right borders
 
@@ -126,24 +137,6 @@ export interface IGlobalAttributes {
       Default: false
      */
     rootOrientationVertical?: boolean;
-    /**
-      enable a small centralized handle on all splitters
-
-      Default: false
-     */
-    splitterEnableHandle?: boolean;
-    /**
-      additional width in pixels of the splitter hit test area
-
-      Default: 0
-     */
-    splitterExtra?: number;
-    /**
-      width in pixels of all splitters between tabsets/borders
-
-      Default: 8
-     */
-    splitterSize?: number;
     /**
       Value for TabNode attribute borderHeight if not overridden
 
@@ -184,12 +177,6 @@ export interface IGlobalAttributes {
       Default: undefined
      */
     tabContentClassName?: string;
-    /**
-      
-
-      Default: 0.3
-     */
-    tabDragSpeed?: number;
     /**
       Value for TabNode attribute enableClose if not overridden
 
@@ -209,11 +196,19 @@ export interface IGlobalAttributes {
     /**
       Value for TabNode attribute enablePopout if not overridden
 
-      enable popout (in popout capable browser)
+      enable window popout (in popout capable browser), to show an icon in the tabset header also set the enablePopoutIcon attribute
 
       Default: false
      */
     tabEnablePopout?: boolean;
+    /**
+      Value for TabNode attribute enablePopoutFloatIcon if not overridden
+
+      whether to show the popout float icon in the tabset header if this tab enables floating popouts
+
+      Default: false
+     */
+    tabEnablePopoutFloatIcon?: boolean;
     /**
       Value for TabNode attribute enablePopoutIcon if not overridden
 
@@ -276,7 +271,7 @@ export interface IGlobalAttributes {
 
       the min height of this tab
 
-      Default: 0
+      Default: 1
      */
     tabMinHeight?: number;
     /**
@@ -284,7 +279,7 @@ export interface IGlobalAttributes {
 
       the min width of this tab
 
-      Default: 0
+      Default: 1
      */
     tabMinWidth?: number;
     /**
@@ -314,11 +309,19 @@ export interface IGlobalAttributes {
     /**
       Value for TabSetNode attribute enableClose if not overridden
 
-      allow user to close tabset via a close button
+      can this tabset be closed
 
-      Default: false
+      Default: true
      */
     tabSetEnableClose?: boolean;
+    /**
+      Value for TabSetNode attribute enableCloseButton if not overridden
+
+      if the tabset can be closed then show a close button
+
+      Default: false
+     */
+    tabSetEnableCloseButton?: boolean;
     /**
       Value for TabSetNode attribute enableDeleteWhenEmpty if not overridden
 
@@ -412,7 +415,7 @@ export interface IGlobalAttributes {
 
       minimum height (in px) for this tabset
 
-      Default: 0
+      Default: 1
      */
     tabSetMinHeight?: number;
     /**
@@ -420,7 +423,7 @@ export interface IGlobalAttributes {
 
       minimum width (in px) for this tabset
 
-      Default: 0
+      Default: 1
      */
     tabSetMinWidth?: number;
     /**
@@ -478,11 +481,17 @@ export interface ITabSetAttributes {
      */
     enableActiveIcon?: boolean;
     /**
-      allow user to close tabset via a close button
+      can this tabset be closed
 
-      Default: inherited from Global attribute tabSetEnableClose (default false)
+      Default: inherited from Global attribute tabSetEnableClose (default true)
      */
     enableClose?: boolean;
+    /**
+      if the tabset can be closed then show a close button
+
+      Default: inherited from Global attribute tabSetEnableCloseButton (default false)
+     */
+    enableCloseButton?: boolean;
     /**
       whether to delete this tabset when is has no tabs
 
@@ -558,13 +567,13 @@ export interface ITabSetAttributes {
     /**
       minimum height (in px) for this tabset
 
-      Default: inherited from Global attribute tabSetMinHeight (default 0)
+      Default: inherited from Global attribute tabSetMinHeight (default 1)
      */
     minHeight?: number;
     /**
       minimum width (in px) for this tabset
 
-      Default: inherited from Global attribute tabSetMinWidth (default 0)
+      Default: inherited from Global attribute tabSetMinWidth (default 1)
      */
     minWidth?: number;
     /**
@@ -630,7 +639,7 @@ export interface ITabAttributes {
      */
     closeType?: ICloseType;
     /**
-      string identifying which component to run (for factory)
+      string identifying which component to render in this tab (used in the layout factory function)
 
       Default: undefined
      */
@@ -660,11 +669,17 @@ export interface ITabAttributes {
      */
     enableDrag?: boolean;
     /**
-      enable popout (in popout capable browser)
+      enable window popout (in popout capable browser), to show an icon in the tabset header also set the enablePopoutIcon attribute
 
       Default: inherited from Global attribute tabEnablePopout (default false)
      */
     enablePopout?: boolean;
+    /**
+      whether to show the popout float icon in the tabset header if this tab enables floating popouts
+
+      Default: inherited from Global attribute tabEnablePopoutFloatIcon (default false)
+     */
+    enablePopoutFloatIcon?: boolean;
     /**
       whether to show the popout icon in the tabset header if this tab enables popouts
 
@@ -697,7 +712,7 @@ export interface ITabAttributes {
      */
     enableWindowReMount?: boolean;
     /**
-      An optional help text for the tab to be displayed upon tab hover.
+      help text for the tab to be displayed upon tab hover.
 
       Default: undefined
      */
@@ -729,13 +744,13 @@ export interface ITabAttributes {
     /**
       the min height of this tab
 
-      Default: inherited from Global attribute tabMinHeight (default 0)
+      Default: inherited from Global attribute tabMinHeight (default 1)
      */
     minHeight?: number;
     /**
       the min width of this tab
 
-      Default: inherited from Global attribute tabMinWidth (default 0)
+      Default: inherited from Global attribute tabMinWidth (default 1)
      */
     minWidth?: number;
     /**
@@ -744,6 +759,13 @@ export interface ITabAttributes {
       Default: "[Unnamed Tab]"
      */
     name?: string;
+    /**
+      the Id of the sub layout to render in this tab, defined in the subLayouts section of the model json (if
+            component is also defined then use the <TabLayout> component in the factory to render the sublayout)
+
+      Default: undefined
+     */
+    subLayoutId?: string;
     /**
       class applied to parent tabset when this is the only tab and it is stretched to fill the tabset
 
@@ -809,7 +831,7 @@ export interface IBorderAttributes {
     /**
       the minimum size of the tab area
 
-      Default: inherited from Global attribute borderMinSize (default 0)
+      Default: inherited from Global attribute borderMinSize (default 1)
      */
     minSize?: number;
     /**

package/types/model/Layout.d.ts

@@ -0,0 +1,41 @@
+import { Rect } from "./Rect";
+import { IJsonSubLayout } from "./IJsonModel";
+import { Model } from "./Model";
+import { RowNode } from "./RowNode";
+import { Node } from "./Node";
+import { TabSetNode } from "./TabSetNode";
+import { LayoutController } from "../view/layout/LayoutInternal";
+import { ILayoutType } from "./IJsonModel";
+/** @internal */
+export declare class Layout {
+    private _layoutId;
+    private _type;
+    private _rect;
+    private _controller;
+    private _rootRow?;
+    private _maximizedTabSet?;
+    private _activeTabSet?;
+    private _toExportRectFunction;
+    constructor(layoutId: string, type: ILayoutType, rect: Rect);
+    visitNodes(fn: (node: Node, level: number) => void): void;
+    isMainLayout(): boolean;
+    getLayoutId(): string;
+    getType(): ILayoutType;
+    setType(value: ILayoutType): void;
+    getRect(): Rect;
+    getController(): LayoutController | undefined;
+    getWindow(): Window | undefined;
+    getRootRow(): RowNode | undefined;
+    getMaximizedTabSet(): TabSetNode | undefined;
+    getActiveTabSet(): TabSetNode | undefined;
+    setRect(value: Rect): void;
+    setController(value: LayoutController | undefined): void;
+    getWindowId(): string | undefined;
+    setRootRow(rowNode: RowNode | undefined): void;
+    setMaximizedTabSet(value: TabSetNode | undefined): void;
+    setActiveTabSet(value: TabSetNode | undefined): void;
+    getToExportRectFunction(): (rect: Rect, type: ILayoutType) => Rect;
+    setToExportRectFunction(value: (rect: Rect, type: ILayoutType) => Rect): void;
+    toJson(): IJsonSubLayout;
+    static fromJson(layoutJson: IJsonSubLayout, model: Model, layoutId: string): Layout;
+}

package/types/model/Model.d.ts

@@ -1,13 +1,13 @@
-import { DropInfo } from "../DropInfo";
-import { Action } from "./Action";
+import { DropInfo } from "./DropInfo";
+import { Action } from "./Actions";
 import { BorderSet } from "./BorderSet";
 import { IDraggable } from "./IDraggable";
-import { IJsonModel, ITabSetAttributes } from "./IJsonModel";
+import { IGlobalAttributes, IJsonModel, ITabSetAttributes } from "./IJsonModel";
 import { Node } from "./Node";
 import { RowNode } from "./RowNode";
 import { TabNode } from "./TabNode";
 import { TabSetNode } from "./TabSetNode";
-import { LayoutWindow } from "./LayoutWindow";
+import { Layout } from "./Layout";
 /** @internal */
 export declare const DefaultMin = 1;
 /** @internal */
@@ -16,25 +16,27 @@ 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;
+    static MAIN_LAYOUT_ID: string;
     /** @internal */
     private static attributeDefinitions;
     /** @internal */
     private attributes;
     /** @internal */
-    private idMap;
+    private layouts;
+    /** @internal */
+    private borders;
     /** @internal */
     private changeListeners;
     /** @internal */
-    private borders;
+    private idMap;
     /** @internal */
-    private onAllowDrop?;
+    private mainLayout;
     /** @internal */
-    private onCreateTabSet?;
+    private splitterSize?;
     /** @internal */
-    private windows;
+    private onAllowDrop?;
     /** @internal */
-    private rootWindow;
+    private onCreateTabSet?;
     /**
      * 'private' constructor. Use the static method Model.fromJson(json) to create a model
      *  @internal
@@ -44,22 +46,22 @@ export declare class Model {
      * Update the node tree by performing the given action,
      * Actions should be generated via static methods on the Actions class
      * @param action the action to perform
-     * @returns added Node for Actions.addNode, windowId for createWindow
+     * @returns added Node for Actions.addTab, layoutId for createPopout
      */
     doAction(action: Action): any;
     /**
      * Get the currently active tabset node
      */
-    getActiveTabset(windowId?: string): TabSetNode | undefined;
+    getActiveTabset(layoutId?: string): TabSetNode | undefined;
     /**
      * Get the currently maximized tabset node
      */
-    getMaximizedTabset(windowId?: string): TabSetNode | undefined;
+    getMaximizedTabset(layoutId?: string): TabSetNode | undefined;
     /**
      * Gets the root RowNode of the model
      * @returns {RowNode}
      */
-    getRoot(windowId?: string): RowNode;
+    getRootRow(layoutId?: string): RowNode;
     isRootOrientationVertical(): boolean;
     isEnableRotateBorderIcons(): boolean;
     /**
@@ -67,13 +69,12 @@ export declare class Model {
      * @returns {BorderSet|*}
      */
     getBorderSet(): BorderSet;
-    getwindowsMap(): Map<string, LayoutWindow>;
     /**
      * Visits all the nodes in the model and calls the given function for each
      * @param fn a function that takes visited node and a integer level as parameters
      */
     visitNodes(fn: (node: Node, level: number) => void): void;
-    visitWindowNodes(windowId: string, fn: (node: Node, level: number) => void): void;
+    visitLayoutNodes(layoutId: string, fn: (node: Node, level: number) => void): void;
     /**
      * Gets a node by its id
      * @param id the id to find
@@ -96,10 +97,10 @@ export declare class Model {
      * @returns {IJsonModel} json object that represents this model
      */
     toJson(): IJsonModel;
-    getSplitterSize(): number;
-    getSplitterExtra(): number;
+    getSplitterSize(): number | undefined;
+    setSplitterSize(size?: number): void;
     isEnableEdgeDock(): boolean;
-    isSplitterEnableHandle(): boolean;
+    isEnableEdgeDockIndicators(): boolean;
     /**
      * Sets a function to allow/deny dropping a node
      * @param onAllowDrop function that takes the drag node and DropInfo and returns true if the drop is allowed
@@ -117,21 +118,25 @@ export declare class Model {
     toString(): string;
     /***********************internal ********************************/
     /** @internal */
-    removeEmptyWindows(): void;
+    getMainLayout(): Layout;
+    /** @internal */
+    getLayouts(): Map<string, Layout>;
+    /** @internal */
+    sortLayouts(): void;
     /** @internal */
-    setActiveTabset(tabsetNode: TabSetNode | undefined, windowId: string): void;
+    setActiveTabset(tabsetNode: TabSetNode | undefined, layoutId: string): void;
     /** @internal */
-    setMaximizedTabset(tabsetNode: (TabSetNode | undefined), windowId: string): void;
+    setMaximizedTabset(tabsetNode: (TabSetNode | undefined), layoutId: string): void;
     /** @internal */
     updateIdMap(): void;
     /** @internal */
     addNode(node: Node): void;
     /** @internal */
-    findDropTargetNode(windowId: string, dragNode: Node & IDraggable, x: number, y: number): DropInfo | undefined;
+    findDropTargetNode(layoutId: string, dragNode: Node & IDraggable, x: number, y: number): DropInfo | undefined;
     /** @internal */
     tidy(): void;
     /** @internal */
-    updateAttrs(json: any): void;
+    updateAttrs(json: IGlobalAttributes): void;
     /** @internal */
     nextUniqueId(): string;
     /** @internal */

package/types/model/Node.d.ts

@@ -1,10 +1,12 @@
-import { AttributeDefinitions } from "../AttributeDefinitions";
-import { DropInfo } from "../DropInfo";
-import { Orientation } from "../Orientation";
-import { Rect } from "../Rect";
+import type * as React from "react";
+import { Attributes } from "./Attributes";
+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";
+import { Layout } from "./Layout";
 export declare abstract class Node {
     /** @internal */
     protected model: Model;
@@ -29,14 +31,19 @@ export declare abstract class Node {
     getChildren(): Node[];
     getRect(): Rect;
     getPath(): string;
+    isCloseable(): boolean;
+    isAllowedInWindow(): boolean;
     getOrientation(): Orientation;
-    setEventListener(event: string, callback: (params: any) => void): void;
-    removeEventListener(event: string): void;
+    getLayoutId(): string;
+    /** @internal */
+    getLayout(): Layout;
+    setEventListener(event: NodeEventType, callback: (params: any) => void): void;
+    removeEventListener(event: NodeEventType): void;
     abstract toJson(): IJsonRowNode | IJsonBorderNode | IJsonTabSetNode | IJsonTabNode | undefined;
     /** @internal */
     setId(id: string): void;
     /** @internal */
-    fireEvent(event: string, params: any): void;
+    fireEvent(event: NodeEventType, params: any): void;
     /** @internal */
     getAttr(name: string): any;
     /** @internal */
@@ -54,7 +61,7 @@ export declare abstract class Node {
     /** @internal */
     setSelected(index: number): void;
     /** @internal */
-    findDropTargetNode(windowId: string, dragNode: Node & IDraggable, x: number, y: number): DropInfo | undefined;
+    findDropTargetNode(layoutId: string, dragNode: Node & IDraggable, x: number, y: number): DropInfo | undefined;
     /** @internal */
     canDrop(dragNode: Node & IDraggable, x: number, y: number): DropInfo | undefined;
     /** @internal */
@@ -66,7 +73,7 @@ export declare abstract class Node {
     /** @internal */
     removeAll(): void;
     /** @internal */
-    styleWithPosition(style?: Record<string, any>): Record<string, any>;
+    styleWithPosition(style?: React.CSSProperties): React.CSSProperties;
     /** @internal */
     isEnableDivide(): boolean;
     /** @internal */
@@ -74,5 +81,6 @@ export declare abstract class Node {
     /** @internal */
     abstract updateAttrs(json: any): void;
     /** @internal */
-    abstract getAttributeDefinitions(): AttributeDefinitions;
+    abstract getAttributeDefinitions(): Attributes;
 }
+export type NodeEventType = "save" | "resize" | "visibility" | "close";

package/types/{Rect.d.ts → model/Rect.d.ts}

@@ -1,4 +1,5 @@
-import { IJsonRect } from "./model/IJsonModel";
+import type * as React from "react";
+import { IJsonRect } from "./IJsonModel";
 import { Orientation } from "./Orientation";
 export declare class Rect {
     static empty(): Rect;
@@ -21,7 +22,7 @@ export declare class Rect {
     relativeTo(r: Rect | DOMRect): Rect;
     clone(): Rect;
     equals(rect: Rect | null | undefined): boolean;
-    aboutEquals(rect: Rect | null | undefined): boolean;
+    equalsWhenRounded(rect: Rect | null | undefined): boolean;
     equalSize(rect: Rect | null | undefined): boolean;
     getBottom(): number;
     getRight(): number;
@@ -31,8 +32,8 @@ export declare class Rect {
         x: number;
         y: number;
     };
-    positionElement(element: HTMLElement, position?: string): void;
-    styleWithPosition(style: Record<string, any>, position?: string): Record<string, any>;
+    positionElement(element: HTMLElement, position?: React.CSSProperties["position"]): void;
+    styleWithPosition(style: React.CSSProperties, position?: React.CSSProperties["position"]): React.CSSProperties;
     contains(x: number, y: number): boolean;
     removeInsets(insets: {
         top: number;
@@ -41,6 +42,7 @@ export declare class Rect {
         right: number;
     }): Rect;
     centerInRect(outerRect: Rect): void;
+    clamp(outerRect: Rect): void;
     /** @internal */
     _getSize(orientation: Orientation): number;
     toString(): string;

package/types/model/RowNode.d.ts

@@ -1,21 +1,21 @@
-import { AttributeDefinitions } from "../AttributeDefinitions";
-import { DockLocation } from "../DockLocation";
-import { DropInfo } from "../DropInfo";
-import { Orientation } from "../Orientation";
+import { Attributes } from "./Attributes";
+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 { IJsonRowNode, IRowAttributes } from "./IJsonModel";
 import { Model } from "./Model";
 import { Node } from "./Node";
-import { LayoutWindow } from "./LayoutWindow";
+import { Layout } from "./Layout";
 export declare class RowNode extends Node implements IDropTarget {
     static readonly TYPE = "row";
     /** @internal */
-    static fromJson(json: any, model: Model, layoutWindow: LayoutWindow): RowNode;
+    static fromJson(json: IJsonRowNode, model: Model, layout: Layout): RowNode;
     /** @internal */
     private static attributeDefinitions;
     /** @internal */
-    private windowId;
+    private layout?;
     /** @internal */
     private minHeight;
     /** @internal */
@@ -25,12 +25,13 @@ export declare class RowNode extends Node implements IDropTarget {
     /** @internal */
     private maxWidth;
     /** @internal */
-    constructor(model: Model, windowId: string, json: any);
+    constructor(model: Model, json: IJsonRowNode);
     getWeight(): number;
     toJson(): IJsonRowNode;
     /** @internal */
-    getWindowId(): string;
-    setWindowId(windowId: string): void;
+    getLayout(): Layout;
+    /** @internal */
+    setLayout(layout: Layout): void;
     /** @internal */
     setWeight(weight: number): void;
     /** @internal */
@@ -66,11 +67,11 @@ export declare class RowNode extends Node implements IDropTarget {
     /** @internal */
     isEnableDrop(): boolean;
     /** @internal */
-    getAttributeDefinitions(): AttributeDefinitions;
+    getAttributeDefinitions(): Attributes;
     /** @internal */
-    updateAttrs(json: any): void;
+    updateAttrs(json: IRowAttributes): void;
     /** @internal */
-    static getAttributeDefinitions(): AttributeDefinitions;
+    static getAttributeDefinitions(): Attributes;
     normalizeWeights(): void;
     /** @internal */
     private static createAttributeDefinitions;