# DragGizmo

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

Source: https://github.com/playcanvas/engine/blob/64089771243fe28a9b9d2b4de538b99b07c75097/src/extras/gizmo/drag-gizmo.js#L21

The base class of gizmos dragged to edit values: [TransformGizmo](https://api.playcanvas.com/engine/classes/TransformGizmo.md)s and
[HandleGizmo](https://api.playcanvas.com/engine/classes/HandleGizmo.md)s. With [DragGizmo#snap](https://api.playcanvas.com/engine/classes/DragGizmo.md#snap) on, lengths snap to
[DragGizmo#snapIncrement](https://api.playcanvas.com/engine/classes/DragGizmo.md#snapincrement) and angles to [DragGizmo#snapAngleIncrement](https://api.playcanvas.com/engine/classes/DragGizmo.md#snapangleincrement).

## Constructors

### constructor

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

Creates a new DragGizmo 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:drag'`): The name of the gizmo.

## Properties

### snap

```ts
snap: boolean = false
```

Whether dragging snaps to the increments. Defaults to false.

### snapAngleIncrement

```ts
snapAngleIncrement: number = 5
```

The increment angles snap to, in degrees. Defaults to 5.

## Accessors

### snapIncrement

```ts
get snapIncrement(): number
set snapIncrement(value: number)
```

Gets the increment lengths and [ScaleGizmo](https://api.playcanvas.com/engine/classes/ScaleGizmo.md) factors snap to.

## Methods

### _labelMarkup

```ts
protected _labelMarkup(text: string, color: Color): string
```

Formats a readout label in its color.

**Parameters**

- `text` (`string`): The label.
- `color` ([`Color`](https://api.playcanvas.com/engine/classes/Color.md)): The label color.

**Returns** `string`: The label markup.

### _lineNormal

```ts
protected _lineNormal(dir: Vec3, facing: Vec3, out: Vec3): boolean
```

Gets the normal of the plane through a line that best faces the camera, for dragging along
the line.

**Parameters**

- `dir` ([`Vec3`](https://api.playcanvas.com/engine/classes/Vec3.md)): The unit direction of the line.
- `facing` ([`Vec3`](https://api.playcanvas.com/engine/classes/Vec3.md)): The unit direction towards the camera.
- `out` ([`Vec3`](https://api.playcanvas.com/engine/classes/Vec3.md)): Receives the unit normal.

**Returns** `boolean`: False when the line points at the camera.

### _snapAngle

```ts
protected _snapAngle(value: number): number
```

Rounds an angle to a multiple of [DragGizmo#snapAngleIncrement](https://api.playcanvas.com/engine/classes/DragGizmo.md#snapangleincrement) while snapping.

**Parameters**

- `value` (`number`): The angle in degrees.

**Returns** `number`: The angle, snapped while [DragGizmo#snap](https://api.playcanvas.com/engine/classes/DragGizmo.md#snap) is on.

### _snapLength

```ts
protected _snapLength(value: number): number
```

Rounds a length to a multiple of [DragGizmo#snapIncrement](https://api.playcanvas.com/engine/classes/DragGizmo.md#snapincrement) while snapping, at least one
increment so a size never snaps to zero.

**Parameters**

- `value` (`number`): The length.

**Returns** `number`: The length, snapped while [DragGizmo#snap](https://api.playcanvas.com/engine/classes/DragGizmo.md#snap) is on.

### _snapValue

```ts
protected _snapValue(value: number, increment: number): number
```

Rounds a value to a multiple of an increment while snapping.

**Parameters**

- `value` (`number`): The value.
- `increment` (`number`): The increment.

**Returns** `number`: The value, snapped while [DragGizmo#snap](https://api.playcanvas.com/engine/classes/DragGizmo.md#snap) is on.

### _snapVector

```ts
protected _snapVector(vec: Vec3, increment: number): Vec3
```

Rounds each component of a vector to a multiple of an increment while snapping.

**Parameters**

- `vec` ([`Vec3`](https://api.playcanvas.com/engine/classes/Vec3.md)): The vector, snapped in place.
- `increment` (`number`): The increment.

**Returns** [`Vec3`](https://api.playcanvas.com/engine/classes/Vec3.md): The vector.

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

- `protected _app: AppBase`
- `protected _camera: CameraComponent`
- `protected _coordSpace: GizmoSpace = 'world'`
- `protected _device: GraphicsDevice`
- `protected _handles: EventHandle[] = []`
- `protected _layer: Layer`
- `protected _mouseButtons: [boolean, boolean, boolean]`
- `protected _renderUpdate: boolean = false`
- `protected _scale: number = 1`
- `intersectShapes: Shape[] = []`
- `nodes: GraphNode[] = []`
- `preventDefault: boolean = true`
- `root: Entity`
- `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 layer(): Layer` · `set layer(layer: Layer)`
- `get mouseButtons(): [boolean, boolean, boolean]`
- `get size(): number` · `set size(value: number)`
- `protected _createRay(mouseWPos: Vec3): Ray`
- `protected _getScreenScale(pos: Vec3): number`
- `protected _updatePosition(): void`
- `protected _updateRotation(): void`
- `protected _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`
- `update(): void`
- `static createLayer(app: AppBase, layerName?: string, layerIndex?: number, depth?: boolean): Layer`
- `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'`