03 Data structure

In Panels Layout, a workspace is rendered using a Workspace Configuration. A Workspace Configuration is created as follows

1. A Pane Configuration is defined to render a Pane
2. A Pane Group Configuration is defined to render a group of Panes
3. A Workspace Configuration is defined to render a collection of Pane Groups

Pane Configuration

FlexPane is the basic building block of Panels Layout. Following is the configuration of a Pane

    {
      id: "",
      type: "pane",
      placement: "",
      size: "",
      props: {},
      settings: {},
      children: []
    }

PaneConfig

PaneProps

PaneSettings

---

Pane Group Configuration

Pane Group is a FlexPane with type set to "group". It will have more Panes as children.

    {
      id: "",
      type: "group",
      placement: "",
      size: "",
      props: {},
      settings: {},
      children: [
          {
            id: "",
            type: "pane",
            placement: "",
            size: "",
            props: {},
            settings: {},
            children: []
          },
          {
            id: "",
            type: "pane",
            placement: "",
            size: "",
            props: {},
            settings: {},
            children: []
          }
      ]
    }

PaneConfig

---

Workspace Configuration

A Workspace is a nested collection of Pane Groups and Panes. root is the Pane that wraps the whole Workspace.

    {
      root: {
        id:"2k31te19rqf",
        type: "group",
        placement: "root",
        size: 1,
        props: {
          isRoot: true,
          isHGroup: true,
        },
        settings: {},
        children: [
          {
            type: "pane",
            id: "8bfjcf98sd9",
            placement: "",
            size: 1,
            settings: {
              view: {
                name: "",
              },
            },
          },
        ],
      },
    }

WorkspaceConfig ⠀ ⠀ ⠀

Next: View and Panels