# ScaleGizmo

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

Source: https://github.com/playcanvas/engine/blob/970d89f6d3bc6667f4e1f88153abd6e7e82ed52c/src/extras/gizmo/scale-gizmo.js#L60

The ScaleGizmo provides interactive 3D manipulation handles for scaling/resizing
[Entity](https://api.playcanvas.com/engine/classes/Entity.md)s in a [Scene](https://api.playcanvas.com/engine/classes/Scene.md). It creates a visual widget with box-tipped lines along the
X, Y and Z axes, planes at their intersections, and a center box, allowing precise control over
object scaling through direct manipulation. The gizmo's visual appearance can be customized
away from the defaults as required.

Note that the gizmo can be driven by both mouse+keyboard and touch input.

```javascript
// Create a layer for rendering all gizmos
const gizmoLayer = Gizmo.createLayer(app);

// Create a scale gizmo
const gizmo = new ScaleGizmo(cameraComponent, gizmoLayer);

// Create an entity to attach the gizmo to
const entity = new Entity();
entity.addComponent('render', {
    type: 'box'
});
app.root.addChild(entity);

// Attach the gizmo to the entity
gizmo.attach([entity]);
```

Relevant Engine API examples:

- [Scale Gizmo](https://playcanvas.github.io/#/gizmos/transform-scale)
- [Editor](https://playcanvas.github.io/#/misc/editor)

## Constructors

### constructor

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

Creates a new ScaleGizmo object. Use [Gizmo.createLayer](https://api.playcanvas.com/engine/classes/Gizmo.md#createlayer) to create the layer
required to display the gizmo.

**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 layer responsible for rendering the gizmo.

**Example**

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

## Properties

### _coordSpace

```ts
protected _coordSpace: GizmoSpace = 'local'
```

### _shapes

```ts
protected _shapes: { x: BoxLineShape; xy: PlaneShape; xyz: BoxShape; xz: PlaneShape; y: BoxLineShape; yz: PlaneShape; z: BoxLineShape }
```

Internal object containing the gizmo shapes to render.

**Properties**

- `x` (`BoxLineShape`, optional)
- `xy` (`PlaneShape`, optional)
- `xyz` (`BoxShape`, optional)
- `xz` (`PlaneShape`, optional)
- `y` (`BoxLineShape`, optional)
- `yz` (`PlaneShape`, optional)
- `z` (`BoxLineShape`, optional)

### _uniform

```ts
protected _uniform: boolean = false
```

Internal state if transform should use uniform scaling.

### flipPlanes

```ts
flipPlanes: boolean = true
```

Flips the planes to face the camera.

### lowerBoundScale

```ts
lowerBoundScale: Vec3
```

The lower bound for scaling.

### snapIncrement

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

## Accessors

### axisBoxSize

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

Gets the axis box size.

### axisCenterSize

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

Gets the axis center size.

### axisGap

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

Gets the axis gap.

### axisLineLength

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

Gets the axis line length.

### axisLineThickness

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

Gets the axis line thickness.

### axisLineTolerance

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

Gets the axis line tolerance.

### axisPlaneGap

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

Gets the plane gap.

### axisPlaneSize

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

Gets the plane size.

### coordSpace

```ts
get coordSpace(): GizmoSpace
set coordSpace(value: GizmoSpace)
```

Sets the gizmo coordinate space. Defaults to 'world'

### uniform

```ts
get uniform(): boolean
set uniform(value: boolean)
```

Gets the uniform scaling state for planes.

## Methods

### _screenToPoint

```ts
protected _screenToPoint(x: number, y: number): Vec3
```

**Parameters**

- `x` (`number`): The x coordinate.
- `y` (`number`): The y coordinate.

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

### prerender

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

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

- `protected _app: AppBase`
- `protected _camera: CameraComponent`
- `protected _device: GraphicsDevice`
- `protected _handles: EventHandle[] = []`
- `protected _layer: Layer`
- `protected _mouseButtons: [boolean, boolean, boolean]`
- `protected _renderUpdate: boolean = false`
- `protected _rootStartPos: Vec3`
- `protected _rootStartRot: Quat`
- `protected _scale: number = 1`
- `protected _selectedAxis: "" | GizmoAxis = ''`
- `protected _selectedIsPlane: boolean = false`
- `protected _selectionStartPoint: Vec3`
- `protected _theme: GizmoTheme`
- `dragMode: GizmoDragMode = 'selected'`
- `intersectShapes: Shape[] = []`
- `nodes: GraphNode[] = []`
- `preventDefault: boolean = true`
- `root: Entity`
- `snap: boolean = false`
- `protected get _dragging(): boolean`
- `get camera(): CameraComponent` · `set camera(camera: CameraComponent)`
- `protected get cameraDir(): Vec3`
- `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)`
- `get theme(): GizmoTheme`
- `protected _createPlane(axis: string, isFacing: boolean, isLine: boolean): Plane`
- `protected _createRay(mouseWPos: Vec3): Ray`
- `protected _createTransform(): void`
- `protected _dirFromAxis(axis: string, dir: Vec3): Vec3`
- `protected _drawGuideLines(pos: Vec3, rot: Quat, activeAxis: "" | GizmoAxis, activeIsPlane: boolean): void`
- `protected _drawSpanLine(pos: Vec3, rot: Quat, axis: "x" | "y" | "z"): void`
- `protected _projectToAxis(point: Vec3, axis: string): void`
- `protected _updatePosition(): void`
- `protected _updateRotation(): void`
- `protected _updateScale(): void`
- `attach(nodes?: GraphNode | GraphNode[]): void`
- `destroy(): void`
- `detach(): void`
- `enableShape(shapeAxis: "face" | GizmoAxis, enabled: boolean): 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`
- `isShapeEnabled(shapeAxis: "face" | GizmoAxis): 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`
- `setTheme(partial: object): void`
- `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'`
- `static EVENT_TRANSFORMEND: string = 'transform:end'`
- `static EVENT_TRANSFORMMOVE: string = 'transform:move'`
- `static EVENT_TRANSFORMSTART: string = 'transform:start'`