coherent-gameface-interaction-manager
Version:
Library for the most common UI interactions
103 lines (64 loc) • 1.55 kB
text/mdx
---
title: Rotate
---
import IMExample from '@components/IMExample.astro';
import { Badge } from '@astrojs/starlight/components';
Allows you to rotate an element.
## Usage
```ts
new rotate(rotateOptions)
```
## Basic implementation
```ts
const circle = new rotate({ element: '.circle1' });
```
<IMExample path="/im-demo/demo/Rotate/rotate.html"/>
## rotateOptions
```ts
interface RotateOptions {
element: string;
snapAngle?: number;
onRotation?: (angle: number) => void;
}
```
### element
Type:
```ts
type element = string
```
The element selector.
### snapAngle
Type:
```ts
type snapAngle = number
```
`default: 1`
The angle that the rotation snaps to.
### onRotation
Type:
```ts
type onRotation = (angle: number) => void;
```
Executes when the element rotates.
## Properties
### actionName <Badge text="readonly" size="medium" variant="note" />
Type:
```ts
type actionName = string
```
The name of the action that can be used to programmatically rotate the element.
### touchEnabled
Type:
```ts
type touchEnabled = boolean
```
Enables or disables touch events. Default is `false`.
## Methods
### deinit()
Removes the event listeners and disables the rotate functionality.
## Actions
You are able to rotate elements using actions. Since every rotate action is unique you can do the following:
```ts
const element = new rotate({ element: '.circle1' });
actions.execute(element.actionName, 90);
```