05 Panels Layout

PanelsLayout is the outermost component which accepts the Workspace configuration and renders the Workspace.

  <PanelsLayout
    {config}
    on:layout={onLayout}
    class={PANEL_LAYOUT_CLASSES}
  />

config is the WorkspaceConfig to be rendered

⠀ ⠀ ⠀

PanelsLayout calls FlexDivide. FlexDivide is the component which builds the tree of Panes rendered by FlexPane

  <FlexDivide
    layout={config}
    component={Panel}
    on:layout={onLayout}
  />

PanelsLayout passes config to FlexDivide. Also set the component property of FlexDivide. component property sets the component to be rendered in a FlexPane.Here it is Panel.

⠀ ⠀ ⠀

FlexDivide calls FlexPane. FlexPane is the component which renders a Pane.

  <FlexPane
    paneComponent={FlexPane}
    {component}
    pane={panes.root}
    paneIndex={-1}
  />

• paneIndex is the index of the Pane in the parent Pane Group.
• pane is the configuration of the Pane at the root
• component is the component to be rendered in a Pane. It is Panel.
• paneComponent is component to be rendered as the nested child components. FlexPane recursively renders itself and builds the tree using svelte:component feature.

  <svelte:component
    this={paneComponent}
    {paneComponent}
    {component}
    pane={innerPane}
    paneIndex={i}
    updateParent={onChildUpdate}
  />

⠀ ⠀ ⠀

FlexPane renders the component set as component property which is Panel, again using using svelte:component feature.

  <svelte:component this={component} {pane} />

⠀ ⠀ ⠀

Next : Drag and Drop