Skip to main content

sdk.objectapi.rotateobject

Home > @kittl/sdk > ObjectAPI > rotateObject

ObjectAPI.rotateObject() method​

Rotates an object in the design to a specified angle.

This function rotates a design object around a specified origin point to the specified angle in degrees. The rotation is applied while maintaining the origin point's visual position, meaning the object will appear to rotate around that point. By default, objects rotate around their center point.

**Rotation Behavior:** - **Origin Point**: The object rotates around a configurable origin point (default: center) - **Visual Effect**: The object appears to rotate around the specified origin point - **Angle Parameter**: Accepts both positive and negative angles - **State Management**: Properly updates the design state and patch system

**Origin Options:** - **Default**: { x: 'center', y: 'center' } - rotates around the object's center - **Horizontal (x)**: 'left' | 'center' | 'right' - **Vertical (y)**: 'top' | 'center' | 'bottom' - **Common use cases**: - Top-left corner: { x: 'left', y: 'top' } - Bottom-right corner: { x: 'right', y: 'bottom' } - Center: { x: 'center', y: 'center' } (default)

**Key Features:** - **Universal Object Support**: Works with all object types using consistent API - **History Integration**: All operations are tracked for undo/redo functionality - **Flexible Origin**: Customize the rotation point for different effects

Signature:

rotateObject(params: RotateObjectParams, opts?: DesignApiOptions): WithObjectLayout;

Parameters​

Parameter

Type

Description

params

RotateObjectParams

Configuration parameters for rotating the object

opts

DesignApiOptions

(Optional) Additional options for the design API operation

Returns:

WithObjectLayout

Result object containing the rotated object information

Exceptions​

{<!-- -->Error<!-- -->} When the specified object ID is not found in the design state

Example​

const objectApi = new ObjectAPI(projectManager, store);

// Rotate a text element 90 degrees clockwise around its center (default)
await objectApi.rotateObject({
  id: 'text-element-456',
  angle: 90
});

// Rotate around top-left corner
await objectApi.rotateObject({
  id: 'shape-789',
  angle: 45,
  origin: { x: 'left', y: 'top' }
});

// Rotate around bottom-right corner
await objectApi.rotateObject({
  id: 'image-123',
  angle: -30,
  origin: { x: 'right', y: 'bottom' }
});