> ## 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.

# Grid

> A structural grid with labelled axes in two directions.

## Import

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

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

## Constructor

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

<ParamField path="config.datumType" type="DatumType.GRID" />

<ParamField path="config.gridKind" type="GridKind" />

<ParamField path="config.uAxes" type="GridAxis[]" />

<ParamField path="config.vAxes" type="GridAxis[]" />

<ParamField path="config.head" type="GridHead" />

<ParamField path="config.labelSkip" type="string[]">
  Characters omitted from auto-generated alpha labels.
</ParamField>

<ParamField path="config.elevation" type="number">
  Elevation (world Y) at which the grid is drawn.
</ParamField>

<ParamField path="config.dashedAxes" type="boolean">
  Render axis lines as dashed. Default `false` (solid).
</ParamField>

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

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

<ParamField path="config.color" type="number">
  Line / symbol colour. Defaulted per subtype when omitted.
</ParamField>

<ParamField path="config.lineWidth" type="number">
  Line weight for the datum's 2D representation.
</ParamField>

<ParamField path="config.visibility" type="DatumVisibility">
  Whether this datum is shown in plan / model views.
</ParamField>

## Properties

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

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

<ResponseField name="subElements2D" type="Map<string, THREE.Object3D>" />

<ResponseField name="subElements3D" type="Map<string, THREE.Object3D>" />

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

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

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

<ResponseField name="onDatumUpdated" type="Event<null>" />

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

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

<ResponseField name="datumType" type="DatumType">
  Read-only.
</ResponseField>

<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.

### rectangular

```typescript theme={null}
static rectangular(opts: {
    uSpacings: number[];
    vSpacings: number[];
    origin?: [
        number,
        number
    ];
    elevation?: number;
    labelName?: string;
    head?: Partial<GridHead>;
}): Partial<GridOptions>;
```

Build a rectangular grid from spacing arrays and return the resulting options so callers can pass them straight into the constructor.

### generateLabels

```typescript theme={null}
static generateLabels(count: number, mode: GridLabelMode, skip?: string[]): string[];
```

Sequence of axis labels following ISO 5457 / US NCS conventions: `A, B, C, D, E, F, G, H, J, K, L, M, N, P, Q, ...` (I and O skipped).

### 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).

### setOPConfig

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

### getOPConfig

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

### getEditAnchors

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

Two handles (start/end) per LINE axis, free on the grid's elevation plane.

### applyEditAnchor

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

### setOPMaterial

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

### setOPGeometry

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

### getAxesSnapshot

```typescript theme={null}
getAxesSnapshot(): {
    u: GridAxis[];
    v: GridAxis[];
};
```

## Types

### GridOptions

```typescript theme={null}
interface GridOptions extends DatumOptionsBase {
  datumType: DatumType.GRID;
  gridKind: GridKind;
  uAxes: GridAxis[];
  vAxes: GridAxis[];
  head: GridHead;
  labelSkip: string[];
  elevation: number;
  dashedAxes?: boolean;
}
```

### GridHead

```typescript theme={null}
interface GridHead {
  diameter: number;
  fontSize: number;
}
```

<ResponseField name="diameter" type="number" required>
  Diameter of the bubble on the XZ plane in world units.
</ResponseField>

<ResponseField name="fontSize" type="number" required>
  Text size for the bubble label.
</ResponseField>

### GridLabelMode

```typescript theme={null}
type GridLabelMode = 'alpha' | 'numeric';
```

### GridAxis

```typescript theme={null}
interface GridAxis {
  tag: string;
  curveSpec: GridAxisCurve;
  head?: {
    start?: boolean;
    end?: boolean;
  };
}
```

<ResponseField name="tag" type="string" required />

<ResponseField name="curveSpec" type="GridAxisCurve" required />

<ResponseField
  name="head"
  type="{
start?: boolean;
end?: boolean;
}"
>
  Which endpoint(s) carry a bubble.
</ResponseField>

### GridKind

```typescript theme={null}
type GridKind = 'rectangular' | 'radial' | 'irregular';
```

### GridAxisCurve

```typescript theme={null}
type GridAxisCurve =
  | {
      curve: 'line';
      start: [number, number];
      end: [number, number];
    }
  | {
      curve: 'arc';
      center: [number, number];
      radius: number;
      startAngle: number;
      endAngle: number;
    };
```

## Related

* [`OPElement`](/floorkit/api/architecture/op-element)
* [`DatumOptionsBase`](/floorkit/api/datums/level#datumoptionsbase)
* [`DatumType`](/floorkit/api/datums/datum-defaults#datumtype)
* [`EditAnchor`](/floorkit/api/architecture/op-element#editanchor)
* [`Event`](/floorkit/api/architecture/wall-network#event)
* [`IPlaceable`](/floorkit/api/architecture/op-element#iplaceable)
* [`IShape`](/floorkit/api/shapes/cuboid-shape#ishape)
* [`OPEditableSchema`](/floorkit/api/architecture/op-element#opeditableschema)
* [`Vec3`](/floorkit/api/architecture/wall#vec3)


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