# ShapeGizmo

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/shape-gizmo.js#L17

The base class of gizmos that draw their own shape with handles that edit its size. They attach
no nodes: set the [position](https://api.playcanvas.com/engine/classes/ShapeGizmo.md#position), [rotation](https://api.playcanvas.com/engine/classes/ShapeGizmo.md#rotation) and size, and apply edits on
[HandleGizmo.EVENT_HANDLEMOVE](https://api.playcanvas.com/engine/classes/HandleGizmo.md#event_handlemove), whose node is null.

## Constructors

### constructor

```ts
new ShapeGizmo(camera: CameraComponent, layer: Layer, name?: string)
```

Creates a new ShapeGizmo 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.
- `name` (`string`, optional, default `'gizmo:shape'`): The name of the gizmo.

## Properties

### position

```ts
position: Vec3
```

The world position of the center of the shape.

### rotation

```ts
rotation: Quat
```

The world rotation of the shape.

## Accessors

### _requiresNodes

```ts
protected get _requiresNodes(): boolean
```

Shape gizmos show without attached nodes.

## 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`
- `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 _drawShapes(): void`
- `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 _moveHandle(handle: GizmoHandle, point: Vec3): void`
- `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 _startHandle(handle: GizmoHandle): void`
- `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'`