gi-nx

---

gi-nx / updateLayout

function updateLayout(root: PanelNode, visibility?: LayoutBarVisibility): Promise<void>;

Replace the panel tree of the active layout, and optionally show or hide its bars. The layout's name and colour are preserved.

A leaf holds tabs (apps) and marks one of them active. A split divides its children by relative sizes — direction: 'v' lays them out left to right, 'h' stacks them top to bottom. Every id must be unique within the tree and no longer than 8 characters.

Unknown fields are stripped. An app key that isn't installed renders as an empty panel rather than failing the call. Sizes that don't match the number of children are replaced with equal shares.

Parameters

Parameter	Type	Description
root	PanelNode	The new panel tree. Must serialize to no more than 5000 characters, nest no deeper than 5 levels, and hold no more than 50 panels.
visibility?	LayoutBarVisibility	hideDrawBar hides the drawing tools. hideContextBar hides the strip above the map that holds the map controls and the properties of whatever is selected or being drawn. Leave either out — or pass anything that isn't a boolean — to keep its current value. Both belong to the layout, so they persist with it and survive a reload. Read-only projects do not save layouts, so there the change lasts for the session only.

Returns

Promise<void>

Throws

If the tree is malformed, oversized, or there is no active layout.

Read the current layout from giraffeState.get('uiLayout').panels.

Examples

import { giraffeState } from '@gi-nx/iframe-sdk';

// Widen the first panel of the active layout.
const panels = giraffeState.get('uiLayout').panels;
if (panels && panels.root.kind === 'split') {
  const root = structuredClone(panels.root);
  root.sizes = [0.7, 0.3];
  updateLayout(root);
}

// Or build a tree from scratch.
updateLayout({
  kind: 'split',
  id: 'root',
  direction: 'v',
  sizes: [0.7, 0.3],
  children: [
    { kind: 'leaf', id: 'main', apps: [{ id: 'a1', appKey: 'map' }], activeIndex: 0 },
    { kind: 'leaf', id: 'side', apps: [{ id: 'a2', appKey: 'layers' }], activeIndex: 0 }
  ]
});

import { giraffeState } from '@gi-nx/iframe-sdk';

// Give the map the whole panel, leaving the tree as it is.
const panels = giraffeState.get('uiLayout').panels;
if (panels) updateLayout(panels.root, { hideContextBar: true });

Needs Permission