opinion
LayersPanel
A tree of layers and groups with drag-to-reorder, inline rename and lock and hide toggles.
Harbour homepage layersRename, lock, hide, drag to reorder
No layersIn context
Design editorThe canvas on the left, its layers on the right
Harbour rebrand: homepage
LayersHarbour rebrand
Props
| Prop | Type | Required | Default |
|---|---|---|---|
layers | LayerNode[] | Yes | — |
onRename | ((id: string, name: string) => void) | undefined | No | — |
onToggleLocked | ((id: string, locked: boolean) => void) | undefined | No | — |
onToggleHidden | ((id: string, hidden: boolean) => void) | undefined | No | — |
onReorder | ((draggedId: string, targetId: string, position: LayerDropPosition) => void) | undefined | No | — |
selectedId | string | undefined | No | — |
defaultSelectedId | string | undefined | No | — |
onSelectedIdChange | ((id: string) => void) | undefined | No | — |
defaultExpanded | string[] | undefined | No | [] |
data-rebar-* attributes
data-rebar-component="layers-panel", role="tree"; rows carry data-rebar-part="group" | "layer" and data-rebar-drop-position while a drag is over them.
Migrating to Ant Design
Not codemod-covered — compose AntD's own Tree (with draggable) + a custom row renderer for the lock/hide toggles.