IJsonModel

A layout is an IJsonModel (FlexLayout's format). Model.fromJson(json) reads it and model.toJson() writes it. The attribute tables below are generated from the JSDoc in packages/core/src/model/IJsonModel.ts.

interface IJsonModel {
    global?: IGlobalAttributes;
    borders?: IJsonBorderNode[];
    layout: IJsonRowNode; // the root row
    subLayouts?: Record<string, IJsonSubLayout>; // popout windows
}

{
    "global": { "tabEnableClose": false, "tabSetMinWidth": 120 },
    "layout": {
        "type": "row",
        "children": [
            { "type": "tabset", "weight": 70, "children": [{ "type": "tab", "id": "editor", "name": "Editor", "component": "editor" }] },
            {
                "type": "row",
                "weight": 30,
                "children": [
                    { "type": "tabset", "children": [{ "type": "tab", "name": "Outline", "component": "outline" }] },
                    { "type": "tabset", "children": [{ "type": "tab", "name": "Console", "component": "console", "config": { "lines": 200 } }] }
                ]
            }
        ]
    }
}

The top-level row is horizontal (unless rootOrientationVertical); a row inside a row takes the opposite orientation, so it acts as a column.

Which attributes Dockable acts on

The model keeps every FlexLayout attribute, but the headless primitives render no chrome, so attributes that describe FlexLayout's built-in view are data for your own rendering: the model stores them and returns them from getters (tab.getIcon(), tab.getHelpText(), tabset.getTabLocation(), tabset.isEnableTabWrap(), …), and your recursion decides what to do with them. That includes className, contentClassName, classNameTabStrip, icon, helpText, altName, closeType, tabLocation, enableTabStrip, enableTabWrap, enableTabScrollbar, enableActiveIcon, enableCloseButton, enableSingleTabStretch, enablePopoutIcon, enableFloatIcon and enableRename.

The engine and the primitives do act on: weight, the min/max sizes, selected, active, maximized, enableDrag, enableDrop, enableDivide, enableClose (the close key), enableDeleteWhenEmpty, enableMaximize (the model refuses to maximize), autoSelectTab, pinned, enablePopout, enableRenderOnDemand, enableScrollbars, enableWindowReMount, enableEdgeDock and rootOrientationVertical.

Border attributes (borders, border* globals) apply to the borders Dockable.Borders renders (see Borders); borderEnableTabScrollbar and tab groups inside borders do not render yet. Float, group and sub-layout-in-tab attributes are read and saved, but floats and tab groups are not rendered yet (see Limitations).

Inheritance

Many tab and tabset attributes have a global counterpart: tabEnableClose is the default of every tab's enableClose, tabSetMinWidth of every tabset's minWidth. A node's own value wins. The defaults below say "(global …)" when they come from one.

Tabset JSON

IJsonTabSetNode adds, on top of the attributes below:

Global attributes

IGlobalAttributes, under global. Change them at runtime with Actions.updateModelAttributes.

Row attributes

IRowAttributes (IJsonRowNode adds children).

Tabset attributes

ITabSetAttributes. Change them at runtime with Actions.updateNodeAttributes(tabsetId, …).

Tab attributes

ITabAttributes (IJsonTabNode). Change them at runtime with Actions.updateNodeAttributes(tabId, …).

Sub-layout attributes

IJsonSubLayout (an entry of subLayouts, i.e. a popout window) has layout (its root row), rect ({ x, y, width, height }, the window's screen rect), type ("window", "float" or "tab") and: