### Install Project Dependencies

Source: https://github.com/caplin/flexlayout/blob/master/README.md

Use pnpm to install all necessary dependencies for the project. This command should be run before starting the development server or building the project.

```bash
pnpm install
```

--------------------------------

### Basic FlexLayout Setup

Source: https://github.com/caplin/flexlayout/blob/master/_autodocs/api-reference/Layout.md

A fundamental example of setting up the flexlayout-react component with a predefined JSON model for a row containing two tab sets. The factory function defines how to render components for each tab.

```typescript
import React from 'react';
import { Layout, Model, Actions, DockLocation } from 'flexlayout-react';
import 'flexlayout-react/style/light.css';

function App() {
  const layoutJson = {
    global: { tabSetEnableMaximize: true },
    layout: {
      type: "row",
      weight: 100,
      children: [
        {
          type: "tabset",
          weight: 50,
          children: [
            { type: "tab", name: "Home", component: "home" }
          ]
        },
        {
          type: "tabset",
          weight: 50,
          children: [
            { type: "tab", name: "Settings", component: "settings" }
          ]
        }
      ]
    }
  };

  const [model] = React.useState(() => Model.fromJson(layoutJson));

  const factory = (node) => {
    const component = node.getComponent();
    if (component === "home") return <HomePage />;
    if (component === "settings") return <SettingsPage />;
    return <div>Unknown</div>;
  };

  return (
    <div style={{ height: '100vh' }}>
      <Layout
        model={model}
        factory={factory}
        onModelChange={(model) => {
          console.log('Layout changed:', model.toJson());
        }}
      />
    </div>
  );
}
```

--------------------------------

### Install FlexLayout

Source: https://github.com/caplin/flexlayout/blob/master/_autodocs/README.md

Install the FlexLayout React component using npm.

```bash
npm install flexlayout-react
```

--------------------------------

### Complete FlexLayout Configuration Example

Source: https://github.com/caplin/flexlayout/blob/master/_autodocs/configuration.md

A comprehensive example demonstrating the structure of a FlexLayout model, including global settings, borders, layout hierarchy, and sub-layouts.

```json
{
  "global": {
    "tabSetEnableMaximize": true,
    "tabSetEnableTabStrip": true,
    "tabEnableClose": true,
    "enableEdgeDock": true,
    "rootOrientationVertical": false,
    "borderSize": 200
  },
  "borders": [
    {
      "location": "left",
      "size": 250,
      "children": [
        { "type": "tab", "name": "Navigation", "component": "nav" }
      ]
    }
  ],
  "layout": {
    "type": "row",
    "weight": 100,
    "children": [
      {
        "type": "tabset",
        "weight": 50,
        "selected": 0,
        "enableMaximize": true,
        "children": [
          {
            "type": "tab",
            "id": "tab-1",
            "name": "Dashboard",
            "component": "dashboard",
            "config": { "refreshInterval": 5000 }
          },
          {
            "type": "tab",
            "id": "tab-2",
            "name": "Analytics",
            "component": "analytics"
          }
        ]
      },
      {
        "type": "row",
        "weight": 50,
        "children": [
          {
            "type": "tabset",
            "weight": 60,
            "children": [
              { "type": "tab", "name": "Details", "component": "details" }
            ]
          },
          {
            "type": "tabset",
            "weight": 40,
            "children": [
              { "type": "tab", "name": "Logs", "component": "logs" }
            ]
          }
        ]
      }
    ]
  },
  "subLayouts": {
    "float-panel": {
      "type": "float",
      "rect": { "x": 200, "y": 200, "width": 400, "height": 300 },
      "layout": {
        "type": "row",
        "children": [
          {
            "type": "tabset",
            "children": [
              { "type": "tab", "name": "Settings", "component": "settings" }
            ]
          }
        ]
      }
    }
  }
}
```

--------------------------------

### Run the Demo Application

Source: https://github.com/caplin/flexlayout/blob/master/README.md

Start the development server using pnpm to run the demo application. This command also watches for file changes in FlexLayout and the Demo app for live updates.

```bash
pnpm dev
```

--------------------------------

### DockLocation Usage Examples

Source: https://github.com/caplin/flexlayout/blob/master/_autodocs/types.md

Demonstrates how to use DockLocation constants to add tabs. Use CENTER to dock into an existing tabset, or TOP, BOTTOM, LEFT, RIGHT to create splits.

```typescript
Actions.addTab(json, tabsetId, DockLocation.CENTER, 0)  // Add to tabset
Actions.addTab(json, tabsetId, DockLocation.RIGHT, -1)  // Split right
```

--------------------------------

### Sub-Layouts Example

Source: https://github.com/caplin/flexlayout/blob/master/_autodocs/configuration.md

Defines sub-layouts for popout windows and floating panels, including their type, position, and internal layout.

```json
{
  "subLayouts": {
    "popout-1": {
      "type": "window",
      "rect": { "x": 100, "y": 100, "width": 500, "height": 400 },
      "layout": {
        "type": "row",
        "children": [...] 
      }
    }
  }
}
```

--------------------------------

### BorderNode - Get Size Constraints

Source: https://github.com/caplin/flexlayout/blob/master/_autodocs/API-INDEX.md

Get the minimum and maximum size constraints for the border.

```typescript
getMinSize()
```

```typescript
getMaxSize()
```

--------------------------------

### Basic Layout Configuration

Source: https://github.com/caplin/flexlayout/blob/master/README.md

Define the structure of your layout using a JSON object. This example shows a row with two tabsets, each containing a single tab.

```javascript
const json = {
    global: {},
    borders: [],
    layout: {
        type: "row",
        weight: 100,
        children: [
            {
                type: "tabset",
                weight: 50,
                children: [
                    {
                        type: "tab",
                        name: "One",
                        component: "placeholder",
                    }
                ]
            },
            {
                type: "tabset",
                weight: 50,
                children: [
                    {
                        type: "tab",
                        name: "Two",
                        component: "placeholder",
                    }
                ]
            }
        ]
    }
};
```

--------------------------------

### Add Tab to Center (Example)

Source: https://github.com/caplin/flexlayout/blob/master/_autodocs/api-reference/DockLocation.md

Demonstrates adding a tab to the center of a tabset, making it a sibling.

```typescript
// Add a tab to tabset with ID "tabs-1" at index 2
model.doAction(
  Actions.addTab(
    { type: "tab", name: "New", component: "view" },
    "tabs-1",
    DockLocation.CENTER,
    2
  )
);
```

--------------------------------

### TabNode - Get Help Text

Source: https://github.com/caplin/flexlayout/blob/master/_autodocs/API-INDEX.md

Retrieve the tooltip text for the tab.

```typescript
getHelpText()
```

--------------------------------

### Get Tab Help Text

Source: https://github.com/caplin/flexlayout/blob/master/_autodocs/api-reference/Node-Classes.md

Retrieves the help or tooltip text associated with the tab.

```typescript
const helpText = tabNode.getHelpText();
```

--------------------------------

### Combined Theme CSS Classes

Source: https://github.com/caplin/flexlayout/blob/master/_autodocs/api-reference/CSSClassNames.md

This example shows various theme classes that can be combined or applied individually to achieve different visual styles.

```css
.flexlayout__theme_alpha_light     /* Light theme */
.flexlayout__theme_alpha_dark      /* Dark theme */
.flexlayout__theme_alpha_rounded   /* Rounded variant */
.flexlayout__theme_light           /* Light theme */
.flexlayout__theme_dark            /* Dark theme */
.flexlayout__theme_underline       /* Underline theme */
.flexlayout__theme_gray            /* Gray theme */
.flexlayout__theme_rounded         /* Rounded theme */
.flexlayout__theme_combined        /* Combined (includes all above) */
```

--------------------------------

### Add Tab using Model Action

Source: https://github.com/caplin/flexlayout/blob/master/README.md

Apply actions to the model using model.doAction(). This example adds a new grid component to a specific tabset.

```javascript
model.doAction(FlexLayout.Actions.addTab(
    {type:"tab", component:"grid", name:"a grid", id:"5"},
    "1", FlexLayout.DockLocation.CENTER, 0));
```

--------------------------------

### BorderSet Usage Example

Source: https://github.com/caplin/flexlayout/blob/master/_autodocs/api-reference/BorderSet.md

Demonstrates common BorderSet operations, including checking for a border's existence, accessing its selected tab, and adding a new tab to a specific border.

```typescript
const model = Model.fromJson(json);
const borderSet = model.getBorderSet();

// Check if left border exists
const leftBorder = borderSet.get("left");
if (leftBorder) {
  // Get selected tab in border
  const selectedTab = leftBorder.getSelectedNode();
  if (selectedTab) {
    console.log("Selected border tab:", selectedTab.getName());
  }
}

// Add a tab to a border using actions
model.doAction(
  Actions.addTab(
    { type: "tab", name: "Tools", component: "tools" },
    "border_left",  // target the left border
    DockLocation.CENTER,
    -1
  )
);
```

--------------------------------

### BorderSet - Get All Borders

Source: https://github.com/caplin/flexlayout/blob/master/_autodocs/API-INDEX.md

Get an array of all non-empty border nodes.

```typescript
getBorders()
```

--------------------------------

### BorderNode - Get Size

Source: https://github.com/caplin/flexlayout/blob/master/_autodocs/API-INDEX.md

Get the current size of the docked border.

```typescript
getSize()
```

--------------------------------

### Basic FlexLayout Usage

Source: https://github.com/caplin/flexlayout/blob/master/_autodocs/README.md

Demonstrates how to set up a basic FlexLayout with a single tab. Requires importing the component and its CSS.

```typescript
import React from 'react';
import { Layout, Model } from 'flexlayout-react';
import 'flexlayout-react/style/light.css';

function App() {
  const layoutJson = {
    layout: {
      type: "row",
      children: [
        {
          type: "tabset",
          children: [
            { type: "tab", name: "Tab 1", component: "view1" }
          ]
        }
      ]
    }
  };

  const model = Model.fromJson(layoutJson);

  const factory = (node) => {
    if (node.getComponent() === "view1") {
      return <div>My Content</div>;
    }
  };

  return (
    <div style={{ height: '100vh' }}>
      <Layout model={model} factory={factory} />
    </div>
  );
}

export default App;
```

--------------------------------

### TabSetNode - Get Selected Node

Source: https://github.com/caplin/flexlayout/blob/master/_autodocs/API-INDEX.md

Get the TabNode object that is currently selected.

```typescript
getSelectedNode()
```

--------------------------------

### Node Class - Get Path

Source: https://github.com/caplin/flexlayout/blob/master/_autodocs/API-INDEX.md

Get the hierarchical path to this node from the root.

```typescript
getPath()
```

--------------------------------

### Getting and Using ILayoutApi Reference

Source: https://github.com/caplin/flexlayout/blob/master/_autodocs/api-reference/Layout.md

Demonstrates how to obtain a reference to the ILayoutApi using `useRef` and subsequently use it to add a new tab to a specified tab set.

```typescript
const layoutRef = useRef<ILayoutApi>(null);

// Later, add a tab
layoutRef.current?.addTabToTabSet("tabset-1", {
  type: "tab",
  component: "view",
  name: "New Tab"
});
```

--------------------------------

### get

Source: https://github.com/caplin/flexlayout/blob/master/_autodocs/api-reference/BorderSet.md

Retrieves a border node by its location. The location can be 'top', 'bottom', 'left', or 'right'.

```APIDOC
## get

### Description
Retrieves a border node by location.

### Method
`get(location: IBorderLocation): BorderNode | undefined`

### Parameters
#### Path Parameters
- **location** (IBorderLocation) - Required - "top", "bottom", "left", or "right"

### Returns
`BorderNode | undefined` — The border node at this location, or undefined if not present.

### Example
```typescript
const borderSet = model.getBorderSet();
const leftBorder = borderSet.get("left");
if (leftBorder) {
  console.log("Left border has", leftBorder.getChildren().length, "tabs");
}
```
```

--------------------------------

### Border Node Attributes Example

Source: https://github.com/caplin/flexlayout/blob/master/_autodocs/configuration.md

Defines the attributes for border nodes, specifying their location, size, and behavior.

```json
{
  "location": "left",
  "size": 200,
  "minSize": 100,
  "maxSize": 400,
  "enableDrop": true,
  "children": [...] 
}
```

--------------------------------

### Actions and Utils

Source: https://github.com/caplin/flexlayout/blob/master/_autodocs/CONTENTS.txt

Import utility classes and functions for performing actions on the layout model and accessing layout-related constants.

```APIDOC
## Actions and Utils

### Description
Import utility classes and functions for performing actions on the layout model and accessing layout-related constants.

### Import
```javascript
import { Actions, DockLocation, Rect, Orientation } from 'flexlayout-react'
```
```

--------------------------------

### Node Class - Get Children

Source: https://github.com/caplin/flexlayout/blob/master/_autodocs/API-INDEX.md

Get an array of the direct child nodes.

```typescript
getChildren()
```

--------------------------------

### Node Class - Get Parent

Source: https://github.com/caplin/flexlayout/blob/master/_autodocs/API-INDEX.md

Get the parent node in the layout tree.

```typescript
getParent()
```

--------------------------------

### Build the npm Distribution

Source: https://github.com/caplin/flexlayout/blob/master/README.md

Generate the production-ready npm distribution files for FlexLayout. This command should be run after development and testing are complete.

```bash
pnpm build
```

--------------------------------

### Node Class - Get Model

Source: https://github.com/caplin/flexlayout/blob/master/_autodocs/API-INDEX.md

Get the Model instance that contains this node.

```typescript
getModel()
```

--------------------------------

### Import Actions and Utilities

Source: https://github.com/caplin/flexlayout/blob/master/_autodocs/CONTENTS.txt

Import Actions and utility objects like DockLocation, Rect, and Orientation for managing layout behavior and positioning.

```javascript
import { Actions, DockLocation, Rect, Orientation } from 'flexlayout-react'
```

--------------------------------

### Components

Source: https://github.com/caplin/flexlayout/blob/master/_autodocs/CONTENTS.txt

Import and use the main Layout and TabLayout components for rendering the flexible layout system.

```APIDOC
## Components

### Description
Import and use the main `Layout` and `TabLayout` components for rendering the flexible layout system.

### Import
```javascript
import { Layout, TabLayout } from 'flexlayout-react'
```
```

--------------------------------

### BorderNode - Get Location

Source: https://github.com/caplin/flexlayout/blob/master/_autodocs/API-INDEX.md

Get the location of the border (TOP, BOTTOM, LEFT, RIGHT).

```typescript
getLocation()
```

--------------------------------

### Create Layout Model from JSON

Source: https://github.com/caplin/flexlayout/blob/master/_autodocs/CONTENTS.txt

Initialize a layout model by parsing a JSON configuration object.

```javascript
const model = Model.fromJson(jsonConfig)
```

--------------------------------

### RowNode - Get Width Constraints

Source: https://github.com/caplin/flexlayout/blob/master/_autodocs/API-INDEX.md

Get the minimum and maximum width constraints for the row.

```typescript
getMinWidth()
```

```typescript
getMaxWidth()
```

--------------------------------

### RowNode - Get Height Constraints

Source: https://github.com/caplin/flexlayout/blob/master/_autodocs/API-INDEX.md

Get the minimum and maximum height constraints for the row.

```typescript
getMinHeight()
```

```typescript
getMaxHeight()
```

--------------------------------

### Configuration

Source: https://github.com/caplin/flexlayout/blob/master/_autodocs/00-READ-ME-FIRST.txt

Details on how to configure FlexLayout globally and for individual nodes, including theme support and JSON serialization.

```APIDOC
## Configuration

### Description
FlexLayout offers extensive configuration options for customizing its appearance and behavior, both globally and on a per-node basis. This includes defining layout structures via JSON, setting attributes, and applying themes.

### Global Attributes
- **rootChild** (Node): The root node of the layout.
- **activeTabset** (string): The ID of the currently active tab set.
- **... (35+ other options)**

### Node-Specific Attributes
- **type** (string): 'row', 'column', 'tabset', 'border', 'tab'.
- **id** (string): Unique identifier for the node.
- **name** (string): Display name for the node (e.g., tab name).
- **component** (string): Identifier for the component to render in a tab.
- **children** (Array<Node>): Child nodes for container types.
- **config** (object): Specific configuration for node types (e.g., tabset, border).
- **... (50+ other options)**

### JSON Model Configuration
The layout can be defined using a JSON structure. The `Model.fromJson()` method parses this JSON to initialize the layout.

Example JSON structure:
```json
{
  "global": {
    "tabSetHeaderHeight": 30
  },
  "layout": {
    "type": "row",
    "id": "main",
    "children": [
      {
        "type": "tabset",
        "id": "tabset1",
        "children": [
          {
            "type": "tab",
            "id": "tab1",
            "name": "My First Tab",
            "component": "view1"
          }
        ]
      }
    ]
  }
}
```

### Theme Support
FlexLayout includes 8 built-in themes and supports custom themes through CSS class names.
```

--------------------------------

### Get Popout Window Document and Window Objects

Source: https://github.com/caplin/flexlayout/blob/master/README.md

When working within a popout window, use `ownerDocument` from a ref to access the correct `document` and `window` objects for the popout's context. This is crucial for event listeners and other DOM manipulations specific to the popout.

```javascript
const currentDocument = selfRef.current.ownerDocument;
const currentWindow = currentDocument.defaultView!;
```

--------------------------------

### File Organization Structure

Source: https://github.com/caplin/flexlayout/blob/master/_autodocs/README.md

Illustrates the directory structure of the flexlayout-react project, showing the location of various documentation files, API references, and source code organization.

```tree
output/
├── README.md                           (this file)
├── REFERENCE-GUIDE.md                  (start here for full overview)
├── API-INDEX.md                        (quick API reference)
├── types.md                            (type definitions)
├── configuration.md                    (JSON model configuration)
└── api-reference/
    ├── Layout.md                       (Layout component)
    ├── TabLayout.md                    (TabLayout component)
    ├── Model.md                        (Model class)
    ├── Actions.md                      (Action creators)
    ├── Node-Classes.md                 (All node classes)
    ├── DockLocation.md                 (Docking locations)
    ├── Rect.md                         (Rectangle class)
    ├── Orientation.md                  (Layout orientation)
    ├── BorderSet.md                    (Border container)
    └── CSSClassNames.md                (CSS styling)

```

--------------------------------

### TabNode - Get Sub Layout ID

Source: https://github.com/caplin/flexlayout/blob/master/_autodocs/API-INDEX.md

Get the ID of the sub-layout associated with this tab, if any.

```typescript
getSubLayoutId()
```

--------------------------------

### TabNode - Get Config

Source: https://github.com/caplin/flexlayout/blob/master/_autodocs/API-INDEX.md

Get or set custom configuration data associated with the tab.

```typescript
getConfig()
```

```typescript
setConfig(data)
```

--------------------------------

### Import Actions and Utilities

Source: https://github.com/caplin/flexlayout/blob/master/_autodocs/REFERENCE-GUIDE.md

Import utility functions and types for layout actions and geometry.

```typescript
import { Actions, DockLocation, Orientation, Rect } from 'flexlayout-react';
```

--------------------------------

### Import FlexLayout Components

Source: https://github.com/caplin/flexlayout/blob/master/_autodocs/API-INDEX.md

Shows how to import all necessary components and types from the 'flexlayout-react' package.

```typescript
import {
  Layout,
  TabLayout,
  Model,
  Actions,
  Node,
  TabNode,
  TabSetNode,
  RowNode,
  BorderNode,
  BorderSet,
  DockLocation,
  Orientation,
  Rect,
  FlexLayoutVersion
} from 'flexlayout-react';
```

--------------------------------

### Node Class - Get Orientation

Source: https://github.com/caplin/flexlayout/blob/master/_autodocs/API-INDEX.md

Get the layout orientation ('row' or 'column') of the node.

```typescript
getOrientation()
```

--------------------------------

### Row Node with Children

Source: https://github.com/caplin/flexlayout/blob/master/_autodocs/configuration.md

An example of a row node containing child tabset nodes, illustrating how weights determine the distribution of space.

```json
{
  "type": "row",
  "weight": 100,
  "children": [
    { "type": "tabset", "weight": 50, ... },
    { "type": "tabset", "weight": 50, ... }
  ]
}
```

--------------------------------

### Styles

Source: https://github.com/caplin/flexlayout/blob/master/_autodocs/CONTENTS.txt

Import one of the provided CSS files to style the flexlayout components.

```APIDOC
## Styles

### Description
Import one of the provided CSS files to style the flexlayout components. Choose one from the list below.

### Import Examples
```javascript
// Choose one:
import 'flexlayout-react/style/alpha_light.css'
import 'flexlayout-react/style/alpha_dark.css'
import 'flexlayout-react/style/light.css'
import 'flexlayout-react/style/dark.css'
import 'flexlayout-react/style/underline.css'
import 'flexlayout-react/style/combined.css'
```
```

--------------------------------

### TabSetNode - Get Weight

Source: https://github.com/caplin/flexlayout/blob/master/_autodocs/API-INDEX.md

Get the relative size weight of the tabset within its parent row.

```typescript
getWeight()
```

--------------------------------

### TabSetNode - Get Selected Index

Source: https://github.com/caplin/flexlayout/blob/master/_autodocs/API-INDEX.md

Get the index of the currently selected tab within the tabset.

```typescript
getSelected()
```

--------------------------------

### Apply Light Theme

Source: https://github.com/caplin/flexlayout/blob/master/_autodocs/REFERENCE-GUIDE.md

Import the light theme CSS and wrap your layout component in a div with the appropriate class.

```typescript
import 'flexlayout-react/style/light.css';

<div className="flexlayout__theme_light">
  <Layout model={model} factory={factory} />
</div>
```

--------------------------------

### Create Model

Source: https://github.com/caplin/flexlayout/blob/master/_autodocs/CONTENTS.txt

Create a new layout model instance from a JSON configuration object.

```APIDOC
## Create Model

### Description
Create a new layout model instance from a JSON configuration object.

### Usage
```javascript
const model = Model.fromJson(jsonConfig)
```
```

--------------------------------

### Node Class - Get Rect

Source: https://github.com/caplin/flexlayout/blob/master/_autodocs/API-INDEX.md

Get the bounding box (position and size) of the node within the layout.

```typescript
getRect()
```

--------------------------------

### Get Root Node

Source: https://github.com/caplin/flexlayout/blob/master/_autodocs/api-reference/Model.md

Gets the root row node of the layout tree. Allows access to the top-level layout container.

```typescript
const root = model.getRootNode();
const weight = root.getWeight();
```

--------------------------------

### Initialize FlexLayout with a JSON Model

Source: https://github.com/caplin/flexlayout/blob/master/README.md

This snippet shows how to create a FlexLayout instance from a JSON model. The factory function defines how nodes are rendered.

```javascript
const model = Model.fromJson(json);

function App() {

  const factory = (node) => {
    const component = node.getComponent();

    if (component === "placeholder") {
      return <div>{node.getName()}</div>;
    }
  }

  return (
    <Layout
      model={model}
      factory={factory} />
  );
}
```

--------------------------------

### get right(): number

Source: https://github.com/caplin/flexlayout/blob/master/_autodocs/api-reference/Rect.md

Returns the right coordinate of the rectangle.

```APIDOC
## get right(): number

### Description
Returns the right coordinate of the rectangle.

### Method Name
right

### Returns
number - The right coordinate.
```

--------------------------------

### Import Alpha Light Theme CSS

Source: https://github.com/caplin/flexlayout/blob/master/_autodocs/00-READ-ME-FIRST.txt

Import the alpha light theme stylesheet for the layout component.

```css
import 'flexlayout-react/style/alpha_light.css'
```

--------------------------------

### get bottom(): number

Source: https://github.com/caplin/flexlayout/blob/master/_autodocs/api-reference/Rect.md

Returns the bottom coordinate of the rectangle.

```APIDOC
## get bottom(): number

### Description
Returns the bottom coordinate of the rectangle.

### Method Name
bottom

### Returns
number - The bottom coordinate.
```

--------------------------------

### Rect Constructor and Static Methods

Source: https://github.com/caplin/flexlayout/blob/master/_autodocs/API-INDEX.md

Demonstrates the creation of a Rect object using its constructor and static methods like fromJson and getBoundingClientRect.

```typescript
new Rect(x, y, width, height)
```

--------------------------------

### Create Layout Model

Source: https://github.com/caplin/flexlayout/blob/master/_autodocs/START-HERE.md

Initialize the layout model using the Model.fromJson static method, passing a JSON object that describes the desired layout structure.

```typescript
const model = Model.fromJson(layoutJson);
```

--------------------------------

### TabNode - Get Name

Source: https://github.com/caplin/flexlayout/blob/master/_autodocs/API-INDEX.md

Retrieve the display name of the tab.

```typescript
getName()
```

--------------------------------

### Model.fromJson

Source: https://github.com/caplin/flexlayout/blob/master/_autodocs/api-reference/Model.md

Creates a new Model instance from a JSON configuration object. This is the primary way to initialize a layout model.

```APIDOC
## Model.fromJson

### Description
Creates a new Model instance from a JSON configuration object.

### Method
static fromJson

### Parameters
#### Path Parameters
- **json** (IJsonModel) - Required - JSON model configuration containing global options, layout structure, borders, and sublayouts

### Response
#### Success Response (Model)
- **Model** - A new model instance that can be passed to the Layout component.

### Request Example
```typescript
import { Model } from 'flexlayout-react';

const json = {
  global: {},
  layout: {
    type: "row",
    weight: 100,
    children: [
      {
        type: "tabset",
        weight: 50,
        children: [
          { type: "tab", name: "Tab 1", component: "view1" }
        ]
      }
    ]
  }
};

const model = Model.fromJson(json);
```
```

--------------------------------

### Get TabSet Name

Source: https://github.com/caplin/flexlayout/blob/master/_autodocs/api-reference/Node-Classes.md

Retrieves the optional name of the TabSetNode.

```typescript
getName(): string | undefined
```

--------------------------------

### Get Tab Name

Source: https://github.com/caplin/flexlayout/blob/master/_autodocs/api-reference/Node-Classes.md

Retrieves the display name of the tab.

```typescript
const name = tabNode.getName();
```

--------------------------------

### Import Core Components

Source: https://github.com/caplin/flexlayout/blob/master/_autodocs/CONTENTS.txt

Import the main Layout and TabLayout components from the flexlayout-react library.

```javascript
import { Layout, TabLayout } from 'flexlayout-react'
```

--------------------------------

### TabNode - Get Enable Rename

Source: https://github.com/caplin/flexlayout/blob/master/_autodocs/API-INDEX.md

Check if renaming of this tab is enabled.

```typescript
getEnableRename()
```

--------------------------------

### Render FlexLayout Component

Source: https://github.com/caplin/flexlayout/blob/master/_autodocs/00-READ-ME-FIRST.txt

Import the necessary CSS and render the main Layout component with the created model and factory. This displays the tabbed layout.

```javascript
import 'flexlayout-react/style/light.css';
<Layout model={model} factory={factory} />
```

--------------------------------

### TabNode - Get Enable Close

Source: https://github.com/caplin/flexlayout/blob/master/_autodocs/API-INDEX.md

Check if closing of this tab is enabled.

```typescript
getEnableClose()
```

--------------------------------

### Import Styles

Source: https://github.com/caplin/flexlayout/blob/master/_autodocs/REFERENCE-GUIDE.md

Import a CSS theme for styling the layout. Choose one from the available options.

```typescript
import 'flexlayout-react/style/light.css';
// Choose one: alpha_light, alpha_dark, alpha_rounded, light, dark, underline, gray, rounded, combined
```

--------------------------------

### Import Core Model Classes

Source: https://github.com/caplin/flexlayout/blob/master/_autodocs/REFERENCE-GUIDE.md

Import essential classes for building and manipulating the layout model.

```typescript
import { Model, Node, TabNode, TabSetNode, RowNode, BorderNode } from 'flexlayout-react';
```

--------------------------------

### TabNode - Get Enable Drag

Source: https://github.com/caplin/flexlayout/blob/master/_autodocs/API-INDEX.md

Check if dragging of this tab is enabled.

```typescript
getEnableDrag()
```

--------------------------------

### Create Layout Model from JSON

Source: https://github.com/caplin/flexlayout/blob/master/_autodocs/00-READ-ME-FIRST.txt

Create a layout model instance from a JSON configuration. This is the first step in initializing FlexLayout.

```javascript
const model = Model.fromJson({
  layout: {
    type: "row",
    children: [{
      type: "tabset",
      children: [{ type: "tab", name: "Tab 1", component: "view1" }]
    }]
  }
});
```

--------------------------------

### Import Styling Options

Source: https://github.com/caplin/flexlayout/blob/master/_autodocs/CONTENTS.txt

Choose and import one of the available CSS style themes for the flexlayout-react components.

```javascript
import 'flexlayout-react/style/light.css'
```

--------------------------------

### TabNode - Get Icon

Source: https://github.com/caplin/flexlayout/blob/master/_autodocs/API-INDEX.md

Retrieve the identifier for the tab's icon.

```typescript
getIcon()
```

--------------------------------

### Get Border Size

Source: https://github.com/caplin/flexlayout/blob/master/_autodocs/api-reference/Node-Classes.md

Retrieves the current size of this BorderNode in pixels.

```typescript
getSize(): number
```

--------------------------------

### Create Layout Model from JSON

Source: https://github.com/caplin/flexlayout/blob/master/_autodocs/START-HERE.md

Initialize the FlexLayout model by parsing a JSON object that defines the layout structure. This is the first step in setting up a FlexLayout instance.

```typescript
const model = Model.fromJson({
  layout: {
    type: "row",
    children: [
      {
        type: "tabset",
        children: [
          { type: "tab", name: "Home", component: "home" }
        ]
      }
    ]
  }
});
```

--------------------------------

### Get Node Model

Source: https://github.com/caplin/flexlayout/blob/master/_autodocs/api-reference/Node-Classes.md

Returns the Model instance that contains this node.

```typescript
const model = node.getModel();
```

--------------------------------

### Include a Theme

Source: https://github.com/caplin/flexlayout/blob/master/README.md

Import a CSS theme file to style the FlexLayout components. Several themes are available, such as alpha_light, dark, and rounded.

```css
import 'flexlayout-react/style/alpha_light.css';
```

--------------------------------

### TabSetNode - Get Enable Maximize

Source: https://github.com/caplin/flexlayout/blob/master/_autodocs/API-INDEX.md

Check if the maximize button is enabled for this tabset.

```typescript
getEnableMaximize()
```

--------------------------------

### TabSetNode - Get Enable Drop

Source: https://github.com/caplin/flexlayout/blob/master/_autodocs/API-INDEX.md

Check if dropping tabs into this tabset is enabled.

```typescript
getEnableDrop()
```

--------------------------------

### TabNode - Get Component

Source: https://github.com/caplin/flexlayout/blob/master/_autodocs/API-INDEX.md

Retrieve the identifier for the component rendered within the tab.

```typescript
getComponent()
```

--------------------------------

### Import FlexLayout Components and Utilities

Source: https://github.com/caplin/flexlayout/blob/master/_autodocs/START-HERE.md

Import necessary components, model classes, actions, and utility types from the flexlayout-react library.

```typescript
import {
  // Components
  Layout, TabLayout,
  
  // Model and Nodes
  Model, Node, TabNode, TabSetNode, RowNode, BorderNode, BorderSet,
  
  // Actions
  Actions,
  
  // Utilities
  DockLocation, Rect, Orientation
} from 'flexlayout-react';

// Styles (choose one theme)
import 'flexlayout-react/style/light.css';
```

--------------------------------

### Model Class - Get Active Tabset

Source: https://github.com/caplin/flexlayout/blob/master/_autodocs/API-INDEX.md

Retrieve the currently active TabSetNode.

```typescript
getActiveTabset()
```

--------------------------------

### Dynamic Theme Switching with CSS Classes

Source: https://github.com/caplin/flexlayout/blob/master/_autodocs/api-reference/CSSClassNames.md

Shows how to dynamically switch themes at runtime by updating the `className` of a container element to apply different theme styles.

```typescript
const containerRef = useRef<HTMLDivElement>(null);

const switchTheme = (themeName: string) => {
  if (containerRef.current) {
    containerRef.current.className = `flexlayout__theme_${themeName}`;
  }
};

return (
  <div ref={containerRef} className="flexlayout__theme_alpha_light">
    <Layout model={model} factory={factory} />
    <button onClick={() => switchTheme('alpha_dark')}>Dark Mode</button>
  </div>
);
```

--------------------------------

### Execute Action

Source: https://github.com/caplin/flexlayout/blob/master/_autodocs/CONTENTS.txt

Perform an action on the layout model, such as adding a tab. Actions are immutable objects that describe changes.

```APIDOC
## Execute Action

### Description
Perform an action on the layout model, such as adding a tab. Actions are immutable objects that describe changes.

### Usage
```javascript
model.doAction(Actions.addTab(json, tabsetId, DockLocation.CENTER, -1))
```
```

--------------------------------

### Model Class - Get Maximized Tabset

Source: https://github.com/caplin/flexlayout/blob/master/_autodocs/API-INDEX.md

Retrieve the TabSetNode that is currently maximized, if any.

```typescript
getMaximizedTabset()
```

--------------------------------

### Get Tab Icon

Source: https://github.com/caplin/flexlayout/blob/master/_autodocs/api-reference/Node-Classes.md

Retrieves the icon identifier for the tab, if one is set.

```typescript
const icon = tabNode.getIcon();
```

--------------------------------

### Get DockLocation Name

Source: https://github.com/caplin/flexlayout/blob/master/_autodocs/api-reference/DockLocation.md

The getName() method returns the string name of the location.

```typescript
const location = DockLocation.RIGHT;
console.log(location.getName()); // Output: "right"
```

--------------------------------

### FlexLayout Usage Pattern

Source: https://github.com/caplin/flexlayout/blob/master/_autodocs/api-reference/DockLocation.md

Shows common patterns for adding tabs using DockLocation constants with the flexlayout-react library.

```typescript
import { Model, Actions, DockLocation } from 'flexlayout-react';

const model = Model.fromJson(layoutJson);

// Add to tabset (CENTER)
model.doAction(
  Actions.addTab(
    { type: "tab", name: "Report", component: "report" },
    "main-tabs",
    DockLocation.CENTER,
    -1  // Add to end
  )
);

// Split left and add
model.doAction(
  Actions.addTab(
    { type: "tab", name: "Tools", component: "tools" },
    "main-tabs",
    DockLocation.LEFT,
    -1
  )
);

// Split bottom
model.doAction(
  Actions.addTab(
    { type: "tab", name: "Logs", component: "logs" },
    "main-tabs",
    DockLocation.BOTTOM,
    -1
  )
);
```

--------------------------------

### Get Border Size Constraints

Source: https://github.com/caplin/flexlayout/blob/master/_autodocs/api-reference/Node-Classes.md

Retrieves the minimum and maximum size constraints for this BorderNode.

```typescript
getMinSize(): number
getMaxSize(): number
```

--------------------------------

### Get Tab Location

Source: https://github.com/caplin/flexlayout/blob/master/_autodocs/api-reference/Node-Classes.md

Retrieves the location ('top' or 'bottom') where tabs are displayed for this TabSetNode.

```typescript
getTabLocation(): ITabLocation
```

--------------------------------

### Import Dark Theme CSS

Source: https://github.com/caplin/flexlayout/blob/master/_autodocs/00-READ-ME-FIRST.txt

Import the dark theme stylesheet for the layout component.

```css
import 'flexlayout-react/style/dark.css'
```

--------------------------------

### Get Sub-Layout ID

Source: https://github.com/caplin/flexlayout/blob/master/_autodocs/api-reference/Node-Classes.md

Retrieves the ID of a sub-layout if the current tab is a container for one.

```typescript
getSubLayoutId(): string | undefined
```

--------------------------------

### Basic FlexLayout Usage Pattern

Source: https://github.com/caplin/flexlayout/blob/master/_autodocs/API-INDEX.md

A standard pattern for initializing and rendering a FlexLayout component within a React application. It covers model creation, a component factory, and the main Layout component rendering.

```typescript
import React from 'react';
import { Layout, Model, Actions, DockLocation } from 'flexlayout-react';
import 'flexlayout-react/style/light.css';

// 1. Create model from JSON
const model = Model.fromJson({
  layout: { type: "row", children: [...] },
  // ... config
});

// 2. Create factory
const factory = (node) => {
  if (node.getComponent() === "view1") return <View1 />;
  return <div>Unknown</div>;
};

// 3. Render Layout
function App() {
  return (
    <Layout
      model={model}
      factory={factory}
      onModelChange={(model, action) => {
        console.log('Model changed:', action.type);
      }}
    />
  );
}
```

--------------------------------

### createSubLayout

Source: https://github.com/caplin/flexlayout/blob/master/_autodocs/api-reference/Actions.md

Creates a new sub-layout, such as a popout window or floating panel, with a specified structure and position. This action is fundamental for creating dynamic and complex UI arrangements.

```APIDOC
## createSubLayout

### Description
Creates a new sublayout (popout window or floating panel) with the given structure.

### Method
`static createSubLayout(
  layout: IJsonRowNode, 
  rect: IJsonRect, 
  type: ILayoutType
): Action`

### Parameters
#### Path Parameters
- **layout** (IJsonRowNode) - Required - Layout structure for the new sublayout
- **rect** (IJsonRect) - Required - Position and size {x, y, width, height}
- **type** (ILayoutType) - Required - "window", "float", or "tab"

### Request Example
```typescript
model.doAction(
  Actions.createSubLayout(
    {
      type: "row",
      children: [
        {
          type: "tabset",
          children: [
            { type: "tab", component: "view1", name: "View" }
          ]
        }
      ]
    },
    { x: 100, y: 100, width: 500, height: 400 },
    "window"
  )
);
```
```

--------------------------------

### Import Main Layout Component

Source: https://github.com/caplin/flexlayout/blob/master/_autodocs/REFERENCE-GUIDE.md

Import the primary Layout component from the flexlayout-react package.

```typescript
import { Layout } from 'flexlayout-react';
```

--------------------------------

### Get Node Rectangle

Source: https://github.com/caplin/flexlayout/blob/master/_autodocs/api-reference/Node-Classes.md

Retrieves the layout rectangle of the node, including its position and size.

```typescript
const rect = node.getRect();
console.log(`Position: ${rect.x}, ${rect.y} Size: ${rect.width}x${rect.height}`);
```

--------------------------------

### Get Child Nodes

Source: https://github.com/caplin/flexlayout/blob/master/_autodocs/api-reference/Node-Classes.md

Returns an array of all child nodes associated with the current node.

```typescript
const children = node.getChildren();
children.forEach(child => console.log(child.getType()));
```

--------------------------------

### Import Alpha Dark Theme CSS

Source: https://github.com/caplin/flexlayout/blob/master/_autodocs/00-READ-ME-FIRST.txt

Import the alpha dark theme stylesheet for the layout component.

```css
import 'flexlayout-react/style/alpha_dark.css'
```

--------------------------------

### Get Node Type

Source: https://github.com/caplin/flexlayout/blob/master/_autodocs/api-reference/Node-Classes.md

Returns the type of the node, such as 'row', 'tabset', 'tab', or 'border'.

```typescript
if (node.getType() === "tab") {
  const tabNode = node as TabNode;
}
```

--------------------------------

### Render Layout

Source: https://github.com/caplin/flexlayout/blob/master/_autodocs/CONTENTS.txt

Render the layout using the `Layout` component, passing the model and an optional factory function.

```APIDOC
## Render Layout

### Description
Render the layout using the `Layout` component, passing the model and an optional factory function.

### Usage
```javascript
<Layout model={model} factory={factory} />
```
```

--------------------------------

### model.getRootNode

Source: https://github.com/caplin/flexlayout/blob/master/_autodocs/api-reference/Model.md

Gets the root row node of the layout tree, which contains all other layout elements.

```APIDOC
## model.getRootNode

### Description
Gets the root row node of the layout tree.

### Method
getRootNode

### Response
#### Success Response (RowNode)
- **RowNode** - The root row containing all layout children.

### Request Example
```typescript
const root = model.getRootNode();
const weight = root.getWeight();
```
```

--------------------------------

### BorderNode Methods

Source: https://github.com/caplin/flexlayout/blob/master/_autodocs/api-reference/Node-Classes.md

Provides methods to retrieve information about a docking border, including its location, selected tab index, selected tab node, and orientation. It also details attributes for size, size constraints, and interactivity (drop, drag, auto-hide), along with its JSON serialization.

```APIDOC
## BorderNode Methods

### getLocation

Returns the border location (TOP, BOTTOM, LEFT, RIGHT).

**Returns:** `DockLocation`

### getSelected

Returns the index of the currently selected tab in the border.

### getSelectedNode

Returns the currently selected TabNode in this border.

### isHorizontal

Whether this border is horizontal (LEFT/RIGHT) or vertical (TOP/BOTTOM).

### getSize

Returns the current size of this border in pixels.

### getMinSize, getMaxSize

Return size constraints.

### getEnableDrop, getEnableDrag, getEnableAutoHide

Control border interactivity.

### toJson

Serializes the border and all child tabs to JSON.

**Returns:** `IJsonBorderNode`
```

--------------------------------

### Load Layout from Local Storage

Source: https://github.com/caplin/flexlayout/blob/master/_autodocs/API-INDEX.md

Parse a JSON string from local storage and create a new layout model from it. Ensure the data in local storage is a valid JSON representation of a layout.

```javascript
const model = Model.fromJson(JSON.parse(localStorage.getItem('layout')))
```

--------------------------------

### Get Node

Source: https://github.com/caplin/flexlayout/blob/master/_autodocs/CONTENTS.txt

Retrieve a specific node from the layout model using its unique ID.

```APIDOC
## Get Node

### Description
Retrieve a specific node from the layout model using its unique ID.

### Usage
```javascript
const node = model.getNodeById(nodeId)
```
```

--------------------------------

### Get DockLocation Orientation

Source: https://github.com/caplin/flexlayout/blob/master/_autodocs/api-reference/DockLocation.md

The getOrientation() method returns the orientation (HORZ or VERT) of the edge.

```typescript
if (DockLocation.LEFT.getOrientation() === Orientation.HORZ) {
  console.log("LEFT docks horizontally");
}
```

--------------------------------

### Import Model and Node Types

Source: https://github.com/caplin/flexlayout/blob/master/_autodocs/CONTENTS.txt

Import necessary types for defining and manipulating the layout model, including Model, Node, TabNode, TabSetNode, RowNode, and BorderNode.

```javascript
import { Model, Node, TabNode, TabSetNode, RowNode, BorderNode } from 'flexlayout-react'
```

--------------------------------

### Model and Nodes

Source: https://github.com/caplin/flexlayout/blob/master/_autodocs/CONTENTS.txt

Import classes for creating and manipulating the layout's data model and its constituent nodes.

```APIDOC
## Model and Nodes

### Description
Import classes for creating and manipulating the layout's data model and its constituent nodes.

### Import
```javascript
import { Model, Node, TabNode, TabSetNode, RowNode, BorderNode } from 'flexlayout-react'
```
```

--------------------------------

### Enable Realtime Resizing

Source: https://github.com/caplin/flexlayout/blob/master/_autodocs/api-reference/Layout.md

Set realtimeResize to true to have tabs resize dynamically as splitters are dragged. Be aware that this may impact performance if tabs are slow to render.

```typescript
realtimeResize?: boolean
```

--------------------------------

### TabSetNode - Get Enable Tab Strip

Source: https://github.com/caplin/flexlayout/blob/master/_autodocs/API-INDEX.md

Check if the tab strip (headers) is enabled for this tabset.

```typescript
getEnableTabStrip()
```

--------------------------------

### Actions Class - Move Popout to Front

Source: https://github.com/caplin/flexlayout/blob/master/_autodocs/API-INDEX.md

Factory method to create an action for bringing a floating popout window to the front.

```typescript
Actions.movePopoutToFront()
```

--------------------------------

### Get Border Location

Source: https://github.com/caplin/flexlayout/blob/master/_autodocs/api-reference/Node-Classes.md

Retrieves the docking location (TOP, BOTTOM, LEFT, RIGHT) of this BorderNode.

```typescript
getLocation(): DockLocation
```

--------------------------------

### Get Row Size Constraints

Source: https://github.com/caplin/flexlayout/blob/master/_autodocs/api-reference/Node-Classes.md

Retrieves the minimum and maximum height and width constraints for this RowNode.

```typescript
getMinHeight(): number
getMinWidth(): number
getMaxHeight(): number
getMaxWidth(): number
```

--------------------------------

### Customize New TabSet Creation

Source: https://github.com/caplin/flexlayout/blob/master/_autodocs/REFERENCE-GUIDE.md

Configure the properties of newly created tab sets, such as enabling drag and drop functionality.

```typescript
model.setOnCreateTabSet((tabNode) => {
  return {
    enableDrag: true,
    enableDrop: true,
    enableMaximize: true
  };
});
```

--------------------------------

### Get TabSet Weight

Source: https://github.com/caplin/flexlayout/blob/master/_autodocs/api-reference/Node-Classes.md

Retrieves the relative weight of the TabSetNode for sizing within its parent row.

```typescript
getWeight(): number
```

--------------------------------

### Additional Callbacks

Source: https://github.com/caplin/flexlayout/blob/master/_autodocs/api-reference/Layout.md

Provides access to specialized callback functions for handling context menus, auxiliary mouse clicks, overflow menu display, placeholder tab sets, and drag rectangle rendering.

```APIDOC
## Additional Callbacks

### Description
Provides access to specialized callback functions for handling context menus, auxiliary mouse clicks, overflow menu display, placeholder tab sets, and drag rectangle rendering.

### Method
- onContextMenu
- onAuxMouseClick
- onShowOverflowMenu
- onTabSetPlaceHolder
- onRenderDragRect

### Parameters
#### Path Parameters
None

#### Query Parameters
None

#### Request Body
None

### Parameters
- **onContextMenu** - Callback for context menu events.
- **onAuxMouseClick** - Callback for auxiliary mouse click events.
- **onShowOverflowMenu** - Callback when the overflow menu is shown.
- **onTabSetPlaceHolder** - Callback for tab set placeholder rendering.
- **onRenderDragRect** - Callback for rendering the drag rectangle.

### Request Example
```typescript
<Layout 
  onContextMenu={handleContextMenu} 
  onAuxMouseClick={handleAuxClick} 
/>
```

### Response
#### Success Response (200)
None

#### Response Example
None
```

--------------------------------

### Get Selected TabNode

Source: https://github.com/caplin/flexlayout/blob/master/_autodocs/api-reference/Node-Classes.md

Retrieves the currently selected TabNode object, or undefined if no tab is selected.

```typescript
getSelectedNode(): TabNode | undefined
```

--------------------------------

### Get Selected Tab Index

Source: https://github.com/caplin/flexlayout/blob/master/_autodocs/api-reference/Node-Classes.md

Retrieves the index of the currently selected tab within the TabSetNode.

```typescript
getSelected(): number
```

--------------------------------

### IJsonSubLayout

Source: https://github.com/caplin/flexlayout/blob/master/_autodocs/types.md

Configuration for a sub-layout, typically used for popout windows or floating panels. It includes the layout structure, optional rectangle for positioning, and type.

```APIDOC
## Interface: IJsonSubLayout

### Description
Configuration for a sub-layout (popout window or floating panel). It includes the layout structure, optional rectangle for positioning, and type.

### Fields
- **layout** (IJsonRowNode) - Required - Layout structure for the sub-layout
- **rect** (IJsonRect) - Optional - Position and size {x, y, width, height}
- **type** (ILayoutType) - Optional - "window", "float", or "tab"

```

--------------------------------

### Advanced Nested Layout Rendering with Headers

Source: https://github.com/caplin/flexlayout/blob/master/_autodocs/api-reference/TabLayout.md

Demonstrates a more complex rendering scenario for nested layouts using TabLayout, including custom headers and footers around the TabLayout content. This approach is useful for adding persistent UI elements to nested views.

```typescript
function RenderNestedLayout(node: TabNode) {
  return (
    <div style={{ display: 'flex', flexDirection: 'column', height: '100%' }}>
      <div style={{ padding: '8px', background: '#f0f0f0' }}>
        <h3>{node.getName()}</h3>
      </div>
      <div style={{ flex: 1, overflow: 'hidden' }}>
        <TabLayout tabNode={node} />
      </div>
      <div style={{ padding: '8px', background: '#f0f0f0' }}>
        Status: Ready
      </div>
    </div>
  );
}

function App() {
  const factory = (node: TabNode) => {
    if (node.getSubLayoutId()) {
      return <RenderNestedLayout node={node} />;
    }
    // ... other components
  };

  return <Layout model={model} factory={factory} />;
}
```

--------------------------------

### Get Tab Close Behavior

Source: https://github.com/caplin/flexlayout/blob/master/_autodocs/api-reference/Node-Classes.md

Retrieves the behavior configuration for the tab's close button.

```typescript
getCloseType(): ICloseType
```

--------------------------------

### Get Node ID

Source: https://github.com/caplin/flexlayout/blob/master/_autodocs/api-reference/Node-Classes.md

Retrieves the unique identifier for a node. If not explicitly set, a UUID is generated.

```typescript
const id = node.getId();
console.log("Node ID:", id);
```

--------------------------------

### Save Layout to JSON

Source: https://github.com/caplin/flexlayout/blob/master/_autodocs/START-HERE.md

Get the current layout state as a JSON string for saving or persistence.

```typescript
const json = model.toJson();
```

--------------------------------

### Perform an Action

Source: https://github.com/caplin/flexlayout/blob/master/_autodocs/START-HERE.md

All changes to the layout model are performed through actions. Use this to add a tab to a specific tabset.

```typescript
model.doAction(Actions.addTab(json, tabsetId, DockLocation.CENTER, -1));
```