# TransformGizmo

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

Source: https://github.com/playcanvas/engine/blob/f059dc005842f76e052cdf44d8370c8c7ec475ac/src/extras/gizmo/transform-gizmo.js#L61

The base class for all transform gizmos.

It adds to [Gizmo](https://api.playcanvas.com/engine/classes/Gizmo.md) everything the [TranslateGizmo](https://api.playcanvas.com/engine/classes/TranslateGizmo.md), [RotateGizmo](https://api.playcanvas.com/engine/classes/RotateGizmo.md) and
[ScaleGizmo](https://api.playcanvas.com/engine/classes/ScaleGizmo.md) share: colored X, Y and Z handles with plane and center shapes, any of which
[enableShape](https://api.playcanvas.com/engine/classes/TransformGizmo.md#enableshape) can turn off; a drag interaction that fires `transform:start`,
`transform:move` with the position or angle delta so far, and `transform:end`; [snap](https://api.playcanvas.com/engine/classes/TransformGizmo.md#snap)
with [snapIncrement](https://api.playcanvas.com/engine/classes/TransformGizmo.md#snapincrement) to quantize the change; [dragMode](https://api.playcanvas.com/engine/classes/TransformGizmo.md#dragmode) to show, hide or keep only
the selected shape while dragging; and a color [theme](https://api.playcanvas.com/engine/classes/TransformGizmo.md#theme) adjusted through [setTheme](https://api.playcanvas.com/engine/classes/TransformGizmo.md#settheme),
`xAxisColor`, `yAxisColor`, `zAxisColor` and `colorAlpha`. The
subclasses decide what a drag does to the attached nodes.

## Constructors

### constructor

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

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

**Example**

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

## Properties

### _rootStartPos

```ts
protected _rootStartPos: Vec3
```

Internal gizmo starting rotation in world space.

### _rootStartRot

```ts
protected _rootStartRot: Quat
```

Internal gizmo starting rotation in world space.

### _selectedAxis

```ts
protected _selectedAxis: "" | GizmoAxis = ''
```

Internal currently selected axis.

### _selectedIsPlane

```ts
protected _selectedIsPlane: boolean = false
```

Internal state of if currently selected shape is a plane.

### _selectionStartPoint

```ts
protected _selectionStartPoint: Vec3
```

Internal selection starting coordinates in world space.

### _shapes

```ts
protected _shapes: { f?: Shape; x?: Shape; xy?: Shape; xyz?: Shape; xz?: Shape; y?: Shape; yz?: Shape; z?: Shape } = {}
```

Internal object containing the gizmo shapes to render.

**Properties**

- `f` (`Shape`, optional)
- `x` (`Shape`, optional)
- `xy` (`Shape`, optional)
- `xyz` (`Shape`, optional)
- `xz` (`Shape`, optional)
- `y` (`Shape`, optional)
- `yz` (`Shape`, optional)
- `z` (`Shape`, optional)

### _theme

```ts
protected _theme: GizmoTheme
```

Internal theme.

### dragMode

```ts
dragMode: GizmoDragMode = 'selected'
```

Whether to hide the shapes when dragging. Defaults to 'selected'.

### snap

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

Whether snapping is enabled. Defaults to false.

### snapIncrement

```ts
snapIncrement: number = 1
```

Snapping increment. Defaults to 1.

## Accessors

### _dragging

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

### theme

```ts
get theme(): GizmoTheme
```

Gets the current theme for the gizmo.

## Methods

### _createPlane

```ts
protected _createPlane(axis: string, isFacing: boolean, isLine: boolean): Plane
```

**Parameters**

- `axis` (`string`): The axis to create the plane for.
- `isFacing` (`boolean`): Whether the axis is facing the camera.
- `isLine` (`boolean`): Whether the axis is a line.

**Returns** [`Plane`](https://api.playcanvas.com/engine/classes/Plane.md): - The plane.

### _createRay

```ts
protected _createRay(mouseWPos: Vec3): Ray
```

**Parameters**

- `mouseWPos` ([`Vec3`](https://api.playcanvas.com/engine/classes/Vec3.md)): The mouse world position.

**Returns** [`Ray`](https://api.playcanvas.com/engine/classes/Ray.md): - The ray.

### _createTransform

```ts
protected _createTransform(): void
```

### _dirFromAxis

```ts
protected _dirFromAxis(axis: string, dir: Vec3): Vec3
```

**Parameters**

- `axis` (`string`): The axis
- `dir` ([`Vec3`](https://api.playcanvas.com/engine/classes/Vec3.md)): The direction

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

### _drawGuideLines

```ts
protected _drawGuideLines(pos: Vec3, rot: Quat, activeAxis: "" | GizmoAxis, activeIsPlane: boolean): void
```

**Parameters**

- `pos` ([`Vec3`](https://api.playcanvas.com/engine/classes/Vec3.md)): The position.
- `rot` ([`Quat`](https://api.playcanvas.com/engine/classes/Quat.md)): The rotation.
- `activeAxis` (`"" |` [`GizmoAxis`](https://api.playcanvas.com/engine/types/GizmoAxis.md)): The active axis.
- `activeIsPlane` (`boolean`): Whether the active axis is a plane.

### _drawSpanLine

```ts
protected _drawSpanLine(pos: Vec3, rot: Quat, axis: "x" | "y" | "z"): void
```

**Parameters**

- `pos` ([`Vec3`](https://api.playcanvas.com/engine/classes/Vec3.md)): The position.
- `rot` ([`Quat`](https://api.playcanvas.com/engine/classes/Quat.md)): The rotation.
- `axis` (`"x" | "y" | "z"`): The axis.

### _projectToAxis

```ts
protected _projectToAxis(point: Vec3, axis: string): void
```

**Parameters**

- `point` ([`Vec3`](https://api.playcanvas.com/engine/classes/Vec3.md)): The point to project.
- `axis` (`string`): The axis to project to.

### _screenToPoint

```ts
protected _screenToPoint(x: number, y: number, isFacing?: boolean, isLine?: boolean): Vec3
```

**Parameters**

- `x` (`number`): The x coordinate.
- `y` (`number`): The y coordinate.
- `isFacing` (`boolean`, optional, default `false`): Whether the axis is facing the camera.
- `isLine` (`boolean`, optional, default `false`): Whether the axis is a line.

**Returns** [`Vec3`](https://api.playcanvas.com/engine/classes/Vec3.md): The point (space is [Gizmo#coordSpace](https://api.playcanvas.com/engine/classes/Gizmo.md#coordspace)).

### destroy

```ts
destroy(): void
```

### enableShape

```ts
enableShape(shapeAxis: "face" | GizmoAxis, enabled: boolean): void
```

Set the shape to be enabled or disabled.

**Parameters**

- `shapeAxis` (`"face" |` [`GizmoAxis`](https://api.playcanvas.com/engine/types/GizmoAxis.md)): The shape axis.
- `enabled` (`boolean`): The enabled state of shape.

### isShapeEnabled

```ts
isShapeEnabled(shapeAxis: "face" | GizmoAxis): boolean
```

Get the enabled state of the shape.

**Parameters**

- `shapeAxis` (`"face" |` [`GizmoAxis`](https://api.playcanvas.com/engine/types/GizmoAxis.md)): The shape axis. Can be:

**Returns** `boolean`: - Then enabled state of the shape

### prerender

```ts
prerender(): void
```

### setTheme

```ts
setTheme(partial: object): void
```

Sets the theme or partial theme for the gizmo.

**Parameters**

- `partial` (`object`): The partial theme to set.
    - `partial.disabled` (`Partial<`[`Color`](https://api.playcanvas.com/engine/classes/Color.md)`>`, optional): The disabled color.
    - `partial.guideBase` (`Partial<{ x: Color; y: Color; z: Color }>`, optional): The guide line colors.
    - `partial.guideOcclusion` (`number`, optional): The guide occlusion value. Defaults to 0.8.
    - `partial.shapeBase` (`Partial<{ f: Color; x: Color; xyz: Color; y: Color; z: Color }>`, optional): The axis colors.
    - `partial.shapeHover` (`Partial<{ f: Color; x: Color; xyz: Color; y: Color; z: Color }>`, optional): The hover colors.

## Events

### EVENT_TRANSFORMEND

```ts
static EVENT_TRANSFORMEND: string = 'transform:end'
```

Fired when the transformation has ended.

**Example**

```ts
const gizmo = new TransformGizmo(camera, layer);
gizmo.on('transform:end', () => {
    console.log('Transformation ended');
});
```

### EVENT_TRANSFORMMOVE

```ts
static EVENT_TRANSFORMMOVE: string = 'transform:move'
```

Fired during the transformation.

**Example**

```ts
const gizmo = new TransformGizmo(camera, layer);
gizmo.on('transform:move', (pointDelta, angleDelta) => {
    console.log(`Transformation moved by ${pointDelta} (angle: ${angleDelta})`);
});
```

### EVENT_TRANSFORMSTART

```ts
static EVENT_TRANSFORMSTART: string = 'transform:start'
```

Fired when the transformation has started.

**Example**

```ts
const gizmo = new TransformGizmo(camera, layer);
gizmo.on('transform:start', () => {
    console.log('Transformation started');
});
```

## 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`
- `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 _updatePosition(): void`
- `protected _updateRotation(): void`
- `protected _updateScale(): void`
- `attach(nodes?: GraphNode | GraphNode[]): 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`
- `update(): void`
- `static createLayer(app: AppBase, layerName?: string, layerIndex?: number): 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'`