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

# OPElement

> The base class of all Floorkit elements.

## Import

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

**Inheritance:** `extends THREE.Object3D`

## Constructor

```typescript theme={null}
constructor();
```

## Properties

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

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

## Methods

### add

```typescript theme={null}
add(...objects: THREE.Object3D[]): this;
```

Adds another Object3D as child of this Object3D.

## Types

### ElementType

```typescript theme={null}
enum ElementType {
  SITE = 'SITE',
  PRIMITIVE = 'PRIMITIVE',
  SHAPE = 'SHAPE',
  DOOR = 'DOOR',
  WINDOW = 'WINDOW',
  WALL = 'WALL',
  OPENING = 'OPENING',
  SLAB = 'SLAB',
  FLOOR = 'FLOOR',
  BUILDING = 'BUILDING',
  COLUMN = 'COLUMN',
  STAIR = 'STAIR',
  SPACECONTAINER = 'SPACECONTAINER',
  ROOF = 'ROOF',
  RAILING = 'RAILING',
  CEILING = 'CEILING',
  BEAM = 'BEAM',
  BOARD = 'BOARD',
  PAPER = 'PAPER',
  FIXTURE = 'FIXTURE',
  FURNITURE = 'FURNITURE',
  APPLIANCE = 'APPLIANCE',
  LANDSCAPE = 'LANDSCAPE',
  MEP_RUN = 'MEP_RUN',
  MEP_SEGMENT = 'MEP_SEGMENT',
  MEP_FITTING = 'MEP_FITTING',
  MEP_EQUIPMENT = 'MEP_EQUIPMENT',
  MEP_TAP_OFF = 'MEP_TAP_OFF',
  DC_RACK = 'DC_RACK',
  DC_CONTAINMENT = 'DC_CONTAINMENT',
  DC_RAISED_FLOOR = 'DC_RAISED_FLOOR',
  DC_PERFORATED_TILE = 'DC_PERFORATED_TILE',
  ZONING_ENVELOPE = 'ZONING_ENVELOPE',
  DATUM_LEVEL = 'DATUM_LEVEL',
  DATUM_GRID = 'DATUM_GRID',
  DATUM_REFERENCE_PLANE = 'DATUM_REFERENCE_PLANE',
  DATUM_PROJECT_ORIGIN = 'DATUM_PROJECT_ORIGIN',
  DATUM_SECTION_LINE = 'DATUM_SECTION_LINE',
  DATUM_ELEVATION_MARKER = 'DATUM_ELEVATION_MARKER',
}
```

### IPlaceable

Implemented by every project-anchored element (walls, slabs, openings, datums) to translate and rotate by mutating their point-defining state and re-running setOPGeometry().

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

### HasPropertySets

Mixed into an element's options type wherever interoperable data is accepted.

```typescript theme={null}
interface HasPropertySets {
  propertySets?: PropertySets;
}
```

### OPEditableSchema

The full editable surface of an element type.

```typescript theme={null}
interface OPEditableSchema {
  groups: ReadonlyArray<string>;
  props: ReadonlyArray<OPEditableProp>;
}
```

<ResponseField name="groups" type="ReadonlyArray<string>" required>
  Ordered section names.
</ResponseField>

<ResponseField name="props" type="ReadonlyArray<OPEditableProp>" required />

### OPEditableProp

```typescript theme={null}
interface OPEditableProp {
  path: string;
  label: string;
  group: string;
  control: OPControl;
}
```

<ResponseField name="path" type="string" required>
  Dot-path into the element config (`getOPConfig()`), e.g. `"elevation"` or `"head.diameter"`.
</ResponseField>

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

<ResponseField name="group" type="string" required>
  Section heading the prop is grouped under, e.g. `"Geometry"`, `"Appearance"`.
</ResponseField>

<ResponseField name="control" type="OPControl" required />

### OPControl

How a single editable property is rendered + constrained.

```typescript theme={null}
type OPControl =
  | {
      kind: 'number';
      unit?: string;
      min?: number;
      max?: number;
      step?: number;
    }
  | {
      kind: 'text';
    }
  | {
      kind: 'boolean';
    }
  | {
      kind: 'color';
    }
  | {
      kind: 'select';
      options: ReadonlyArray<{
        value: string;
        label: string;
      }>;
    }
  | {
      kind: 'vec2';
      unit?: string;
    }
  | {
      kind: 'vec3';
      unit?: string;
    }
  | {
      kind: 'propertySets';
    }
  | {
      kind: 'readonly';
    };
```

### HasEditableSchema

Implemented by every element class as a static, per-type descriptor.

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

### EditAnchor

```typescript theme={null}
interface EditAnchor {
  id: string;
  role: 'vertex' | 'edge' | 'edge-mid' | 'height' | 'elevation';
  position: [number, number, number];
  dof: EditAnchorDOF;
}
```

<ResponseField name="id" type="string" required>
  Session-stable id, e.g. `"v:outer:2"`. Stable across an in-place drag; refreshed on re-render
  after a topology change (insert/delete vertex). NOT a persistent per-vertex GUID.
</ResponseField>

<ResponseField name="role" type="&#x22;vertex&#x22; | &#x22;edge&#x22; | &#x22;edge-mid&#x22; | &#x22;height&#x22; | &#x22;elevation&#x22;" required />

<ResponseField
  name="position"
  type="[
number,
number,
number
]"
  required
>
  Anchor position in the element's LOCAL frame. The host transforms it by the rendered object's
  world matrix to place the handle.
</ResponseField>

<ResponseField name="dof" type="EditAnchorDOF" required />

### EditAnchorDOF

Degrees of freedom for a single edit anchor — how the host may move it.

```typescript theme={null}
type EditAnchorDOF =
  | {
      kind: 'xz';
    }
  | {
      kind: 'axisY';
      baseY: number;
    }
  | {
      kind: 'alongAxis';
      origin: [number, number, number];
      dir: [number, number, number];
    }
  | {
      kind: 'scalar';
    };
```

### HasEditAnchors

Implemented by element classes that expose draggable geometry handles.

```typescript theme={null}
interface HasEditAnchors {
  getEditAnchors(): EditAnchor[];
  applyEditAnchor(id: string, position: [number, number, number], snapRadius?: number): void;
  anchorSpace?(): 'local' | 'world';
}
```

### PropertySets

Named property sets owned by an element or spatial container.

```typescript theme={null}
type PropertySets = Record<string, PropertySet>;
```

### PropertySet

```typescript theme={null}
type PropertySet = Record<string, PropertyValue>;
```

### PropertyValue

```typescript theme={null}
type PropertyValue = string | number | boolean;
```

## Related

* [`Vec3`](/floorkit/api/architecture/wall#vec3)


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