> ## Documentation Index
> Fetch the complete documentation index at: https://docs.ploterr.com/llms.txt
> Use this file to discover all available pages before exploring further.

# Railing

> Railing is a top rail with balusters along a path.

The path can slope, so a railing can follow a stair.

## Import

```typescript theme={null}
import { Railing } from '@opengeometry/floorkit';
```

## Example

```typescript theme={null}
import { Railing, Stair, Floorkit } from '@opengeometry/floorkit';

async function example(wasmURL: string): Promise<void> {
  await new Floorkit().setupOpenGeometry(wasmURL);
  const stair = new Stair({ width: 1.2, totalRise: 3, treadDepth: 0.28 });
  const railing = new Railing({ height: 1.1, balusterSpacing: 0.1 });
  try {
    stair.attachRailing(railing, { side: 'left', inset: 0.05 });
    stair.setOPConfig({ totalRise: 3.2 });
    console.log(railing.getOPConfig().path, railing.getPhysicalParts());
  } finally {
    stair.detachRailing(railing);
    railing.dispose();
    stair.dispose();
  }
}
```

## Notes

* All dimensions are in metres. The rail height is measured above the path.
* `Stair.attachRailing` makes the railing follow the stair. Detach the railing before you dispose it.
* `balusterSpacing` sets the distance between balusters. The clear gap also depends on the baluster size.
* The default sizes are not a safety-code check.
* When you replace `topRail`, give its width and its height.
* Start the geometry kernel before you create this object. See [`Floorkit`](/floorkit/api/runtime/floorkit).
* This object is live geometry. To save a building, write it in a [building model](/floorkit/concepts/building-model).

**Inheritance:** `extends OPElement implements IShape, IPlaceable, PlanVectorExportable`

## Constructor

```typescript theme={null}
constructor(config?: Partial<RailingOptions>);
```

<ParamField path="config.ogid" type="string" />

<ParamField path="config.labelName" type="string" />

<ParamField path="config.type" type="ElementType.RAILING" />

<ParamField path="config.path" type="Vec3[]">
  Rail base path (world coordinates). Segments may slope — a stair-hosted railing follows the flight
  nosings. The top rail runs `height` above this path; balusters drop from the rail to it.
</ParamField>

<ParamField path="config.height" type="number">
  Rail height above the base path (m). Guard code: ≥ 1.0 m typical.
</ParamField>

<ParamField path="config.balusterSpacing" type="number">
  Maximum clear spacing between balusters (m). Code: a 100 mm sphere must not pass — the 0.11 m
  default center spacing with 20 mm balusters keeps the clear gap at 90 mm.
</ParamField>

<ParamField path="config.balusterSize" type="number">
  Square baluster side (m).
</ParamField>

<ParamField path="config.topRail" type="RailingTopRail" />

<ParamField path="config.hostStairId" type="string">
  ogid of the hosting Stair, when attached via `Stair.attachRailing`.
</ParamField>

<ParamField path="config.color" type="number" />

<ParamField path="config.propertySets" type="PropertySets" />

## Properties

<ResponseField name="ogType" type="ElementType" />

<ResponseField name="ogid" type="string" />

<ResponseField name="subElements2D" type="Map<string, OPGeometry>" />

<ResponseField name="subElements3D" type="Map<string, OPGeometry>" />

<ResponseField name="selected" type="boolean" />

<ResponseField name="edit" type="boolean" />

<ResponseField name="locked" type="boolean" />

<ResponseField name="propertySet" type="RailingOptions" />

<ResponseField name="labelName" type="string" />

<ResponseField name="path" type="Vec3[]" />

<ResponseField name="railingHeight" type="number" />

<ResponseField name="balusterSpacing" type="number" />

<ResponseField name="balusterSize" type="number" />

<ResponseField name="hostStairId" type="string | undefined" />

<ResponseField name="railingColor" type="number" />

<ResponseField name="outline" type="boolean" />

<ResponseField name="profileView" type="boolean" />

<ResponseField name="modelView" type="boolean" />

## Methods

### editableSchema

```typescript theme={null}
static editableSchema(): OPEditableSchema;
```

Self-describing editable surface; a host inspector renders this generically.

### getPhysicalParts

```typescript theme={null}
getPhysicalParts(): readonly PhysicalElementPart[];
```

Borrow actual material parts; descriptors contain no seeds, cutters or symbols.

### setHostPath

```typescript theme={null}
setHostPath(path: Vec3[]): void;
```

Replace the base path from a hosting element (Stair).

### move

```typescript theme={null}
move(delta: Vec3): void;
```

Translate this element by `delta` (world-space, meters).

### rotate

```typescript theme={null}
rotate(angleDeg: number, axis?: Vec3, anchor?: Vec3): void;
```

Rotate this element by `angleDeg` around `axis` (default Y-up), pivoted at `anchor` (default the element's own centroid).

### setOPGeometry

```typescript theme={null}
setOPGeometry(): void;
```

### getExportRoots

```typescript theme={null}
getExportRoots(view: PlanExportView): THREE.Object3D[];
```

Vector-export roots (RFC §7).

### toDrawing

```typescript theme={null}
toDrawing(view: PlanExportView): DrawingPrimitive[];
```

Base path as standardized line primitives.

### setOPMaterial

```typescript theme={null}
setOPMaterial(): void;
```

### getEditAnchors

```typescript theme={null}
getEditAnchors(): EditAnchor[];
```

Draggable handles: one per base-path point, free on its own horizontal plane (Y preserved, so a sloped/stair-hosted path keeps its slope).

### applyEditAnchor

```typescript theme={null}
applyEditAnchor(id: string, position: [
    number,
    number,
    number
]): void;
```

### getOPConfig

```typescript theme={null}
getOPConfig(): RailingOptions;
```

### setOPConfig

```typescript theme={null}
setOPConfig(config: Partial<RailingOptions>): void;
```

### beginEdit

```typescript theme={null}
beginEdit(): void;
```

Start one live edit; a second `beginEdit` before `endEdit` keeps the first start.

### endEdit

```typescript theme={null}
endEdit(): {
    undo: () => void;
    redo: () => void;
} | undefined;
```

End the live edit; its exact undo and redo, or undefined when no option changed.

### dispose

```typescript theme={null}
dispose(): void;
```

## Types

### RailingOptions

```typescript theme={null}
interface RailingOptions extends HasPropertySets {
  ogid?: string;
  labelName: string;
  type: ElementType.RAILING;
  path: Vec3[];
  height: number;
  balusterSpacing: number;
  balusterSize: number;
  topRail: RailingTopRail;
  hostStairId?: string;
  color: number;
}
```

### RailingTopRail

```typescript theme={null}
interface RailingTopRail {
  width: number;
  height: number;
}
```

<ResponseField name="width" type="number" required>
  Horizontal rail width (m).
</ResponseField>

<ResponseField name="height" type="number" required>
  Vertical rail height/depth (m).
</ResponseField>

## Related

* [`OPElement`](/floorkit/api/architecture/op-element)
* [`DrawingPrimitive`](/floorkit/api/drawings/draw-project-view#drawingprimitive)
* [`EditAnchor`](/floorkit/api/architecture/op-element#editanchor)
* [`ElementType`](/floorkit/api/architecture/op-element#elementtype)
* [`HasPropertySets`](/floorkit/api/architecture/op-element#haspropertysets)
* [`IPlaceable`](/floorkit/api/architecture/op-element#iplaceable)
* [`IShape`](/floorkit/api/shapes/cuboid-shape#ishape)
* [`OPEditableSchema`](/floorkit/api/architecture/op-element#opeditableschema)
* [`OPGeometry`](/floorkit/api/architecture/opening#opgeometry)
* [`PhysicalElementPart`](/floorkit/api/architecture/door#physicalelementpart)
* [`PlanExportView`](/floorkit/api/shapes/cylinder-shape#planexportview)
* [`PlanVectorExportable`](/floorkit/api/shapes/cylinder-shape#planvectorexportable)
* [`Vec3`](/floorkit/api/architecture/wall#vec3)


This documentation is built and hosted on [Mintlify](https://mintlify.com), a developer documentation platform.