# BoundingBoxGizmo

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

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

Draws corner brackets around the world bounds of the attached nodes, with a dot at each node's
origin. Face and corner handles resize the bounds, scaling each node along its local axes
nearest the world axes.

```javascript
const layer = Gizmo.createLayer(app, 'Bounds', undefined, true);
const gizmo = new BoundingBoxGizmo(cameraComponent, layer);
gizmo.attach([entity]);
```

Relevant Engine API examples:

- [Bounding Box Gizmo](https://playcanvas.github.io/#/gizmos/bounding-box)
- [Editor](https://playcanvas.github.io/#/misc/editor)

## Constructors

### constructor

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

Creates a new BoundingBoxGizmo 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 BoundingBoxGizmo(camera, layer);
```

## Properties

### armLength

```ts
armLength: number = 0.3
```

The arm length as a fraction of the half edge. Defaults to 0.3.

### armThickness

```ts
armThickness: number = 2
```

The arm thickness in CSS pixels. Defaults to 2.

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

### edges

```ts
edges: boolean = true
```

Whether to join the brackets with dashed edges. Defaults to true.

### faceHandles

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

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

### padding

```ts
padding: number = 0.01
```

The padding on each side, in world units. Defaults to 0.01.

### uniform

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

Whether corner handles scale evenly. Defaults to false.

## Methods

### _drawShapes

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

Draws the box around the attached nodes.

### _moveHandle

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

Resizes the box and fits the attached nodes to it.

**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 and node transforms at the start of a resize.

**Parameters**

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

## Inherited from [HandleGizmo](https://api.playcanvas.com/engine/classes/HandleGizmo.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[] = []`
- `preventDefault: boolean = true`
- `readout: boolean = true`
- `root: Entity`
- `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)`
- `get enabled(): boolean` · `set enabled(state: boolean)`
- `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'`