# BoxGizmo

Class · extends [`ShapeGizmo`](https://api.playcanvas.com/engine/classes/ShapeGizmo.md) · category: Gizmo

Source: https://github.com/playcanvas/engine/blob/64089771243fe28a9b9d2b4de538b99b07c75097/src/extras/gizmo/handle/box-gizmo.js#L31

Draws a box with face and corner handles that resize it, keeping the opposite face or corner in
place, or the center with [BoxGizmo#centered](https://api.playcanvas.com/engine/classes/BoxGizmo.md#centered).

```javascript
const gizmo = new BoxGizmo(cameraComponent, layer);
gizmo.halfExtents.set(1, 0.5, 1);
gizmo.on('handle:move', () => {
    collision.halfExtents = gizmo.halfExtents;
    entity.setPosition(gizmo.position);
});
```

Relevant Engine API examples:

- [Shape Gizmos](https://playcanvas.github.io/#/gizmos/shape)

## Constructors

### constructor

```ts
new BoxGizmo(camera: CameraComponent, layer: Layer)
```

Creates a new BoxGizmo object.

**Parameters**

- `camera` ([`CameraComponent`](https://api.playcanvas.com/engine/classes/CameraComponent.md)): The camera component.
- `layer` ([`Layer`](https://api.playcanvas.com/engine/classes/Layer.md)): The render layer.

**Example**

```ts
const gizmo = new BoxGizmo(camera, layer);
```

## Properties

### centered

```ts
centered: boolean = false
```

Whether a resize keeps the center in place. Defaults to false.

### cornerHandles

```ts
cornerHandles: boolean = true
```

Whether to show handles at the corners. Defaults to true.

### faceHandles

```ts
faceHandles: boolean = true
```

Whether to show handles at the center of each face. Defaults to true.

### halfExtents

```ts
halfExtents: Vec3
```

The half extents of the box along its axes.

### uniform

```ts
uniform: boolean = false
```

Whether corner handles scale evenly. Defaults to false.

## Methods

### _drawShapes

```ts
protected _drawShapes(): void
```

Places the box and its handles.

### _moveHandle

```ts
protected _moveHandle(handle: GizmoHandle, point: Vec3): void
```

Resizes the box to the dragged face or corner.

**Parameters**

- `handle` (`GizmoHandle`): The dragged handle.
- `point` ([`Vec3`](https://api.playcanvas.com/engine/classes/Vec3.md)): Where the handle is dragged to.

### _startHandle

```ts
protected _startHandle(handle: GizmoHandle): void
```

Stores the box at the start of a resize.

**Parameters**

- `handle` (`GizmoHandle`): The dragged handle.

## Inherited from [ShapeGizmo](https://api.playcanvas.com/engine/classes/ShapeGizmo.md)

- `protected _app: AppBase`
- `protected _camera: CameraComponent`
- `protected _coordSpace: GizmoSpace = 'world'`
- `protected _device: GraphicsDevice`
- `protected _drag: GizmoHandle`
- `protected _dragging: boolean = false`
- `protected _handles: EventHandle[] = []`
- `protected _layer: Layer`
- `protected _mouseButtons: [boolean, boolean, boolean]`
- `protected _renderer: OverlayRenderer`
- `protected _scale: number = 1`
- `protected _theme: HandleGizmoTheme`
- `handles: boolean = true`
- `icon: boolean = true`
- `intersectShapes: Shape[] = []`
- `nodes: GraphNode[] = []`
- `position: Vec3`
- `preventDefault: boolean = true`
- `readout: boolean = true`
- `root: Entity`
- `rotation: Quat`
- `snap: boolean = false`
- `snapAngleIncrement: number = 5`
- `protected get _requiresNodes(): boolean`
- `get camera(): CameraComponent` · `set camera(camera: CameraComponent)`
- `protected get cameraDir(): Vec3`
- `get coordSpace(): GizmoSpace` · `set coordSpace(value: GizmoSpace)`
- `protected get facingDir(): Vec3`
- `get handleSize(): number` · `set handleSize(value: number)`
- `get iconSize(): number` · `set iconSize(value: number)`
- `get layer(): Layer` · `set layer(layer: Layer)`
- `get lineThickness(): number` · `set lineThickness(value: number)`
- `get mouseButtons(): [boolean, boolean, boolean]`
- `get size(): number` · `set size(value: number)`
- `get snapIncrement(): number` · `set snapIncrement(value: number)`
- `get theme(): HandleGizmoTheme`
- `protected _active(node: GraphNode | null, name: string, index: number): boolean`
- `protected _boxCorners(center: Vec3, rotation: Quat, halfExtents: Vec3): Vec3[]`
- `protected _boxHandles(center: Vec3, halfExtents: Vec3, options: BoxHandleOptions, pad?: number): void`
- `protected _createRay(mouseWPos: Vec3): Ray`
- `protected _detailed(center: Vec3, radius: number): boolean`
- `protected _getScreenScale(pos: Vec3): number`
- `protected _handle(position: Vec3, color: Color, node: GraphNode | null, name: string, index: number, origin: Vec3, dir: Vec3, inPlane?: boolean, guide?: boolean): boolean`
- `protected _icon(kind: OverlayIcon, position: Vec3, node: GraphNode): void`
- `protected _labelMarkup(text: string, color: Color): string`
- `protected _lineNormal(dir: Vec3, facing: Vec3, out: Vec3): boolean`
- `protected _readoutAt(position: Vec3, label: string, color: Color, value: number, unit?: string): void`
- `protected _readoutHtmlAt(position: Vec3, html: string): void`
- `protected _readoutValue(label: string, color: Color, value: number, unit?: string): string`
- `protected _resizeBox(handle: GizmoHandle, point: Vec3, rotation: Quat, startPosition: Vec3, startHalfExtents: Vec3, options: BoxHandleOptions, pad: number, position: Vec3, halfExtents: Vec3): void`
- `protected _snapAngle(value: number): number`
- `protected _snapLength(value: number): number`
- `protected _snapValue(value: number, increment: number): number`
- `protected _snapVector(vec: Vec3, increment: number): Vec3`
- `protected _sphereHandles(center: Vec3, rotation: Quat, radius: number, node: GraphNode | null, name: string): void`
- `protected _sphereOutline(center: Vec3, rotation: Quat, radius: number): void`
- `protected _sphereRings(center: Vec3, rotation: Quat, radius: number, weight?: number, alpha?: number): void`
- `protected _sphereSilhouette(center: Vec3, radius: number, out: Vec3): number`
- `protected _updatePosition(): void`
- `_updateRotation(): void`
- `_updateScale(): void`
- `attach(nodes?: GraphNode | GraphNode[]): void`
- `destroy(): void`
- `detach(): void`
- `fire(name: string, arg1?: any, arg2?: any, arg3?: any, arg4?: any, arg5?: any, arg6?: any, arg7?: any, arg8?: any): EventHandler`
- `hasEvent(name: string): boolean`
- `off(name?: string, callback?: HandleEventCallback, scope?: any): EventHandler`
- `on(name: string, callback: HandleEventCallback, scope?: any): EventHandle`
- `once(name: string, callback: HandleEventCallback, scope?: any): EventHandle`
- `prerender(): void`
- `setTheme(partial: Partial<HandleGizmoTheme>): void`
- `update(): void`
- `static createLayer(app: AppBase, layerName?: string, layerIndex?: number, depth?: boolean): Layer`
- `static EVENT_HANDLEEND: string = 'handle:end'`
- `static EVENT_HANDLEMOVE: string = 'handle:move'`
- `static EVENT_HANDLESTART: string = 'handle:start'`
- `static EVENT_ICONSELECT: string = 'icon:select'`
- `static EVENT_NODESATTACH: string = 'nodes:attach'`
- `static EVENT_NODESDETACH: string = 'nodes:detach'`
- `static EVENT_POINTERDOWN: string = 'pointer:down'`
- `static EVENT_POINTERMOVE: string = 'pointer:move'`
- `static EVENT_POINTERUP: string = 'pointer:up'`
- `static EVENT_POSITIONUPDATE: string = 'position:update'`
- `static EVENT_RENDERUPDATE: string = 'render:update'`
- `static EVENT_ROTATIONUPDATE: string = 'rotation:update'`
- `static EVENT_SCALEUPDATE: string = 'scale:update'`