Rotatable indicates whether the target can be rotated.
Members
throttleRotate
throttle of angle(degree) when rotate.
Example
import Moveable from "moveable";
const moveable = new Moveable(document.body);
moveable.throttleRotate = 1;rotationPosition
You can specify the position of the rotation. (default: "top")
Example
import Moveable from "moveable";
const moveable = new Moveable(document.body, {
rotationPosition: "top",
});
moveable.rotationPosition = "bottom"rotatable
Whether or not target can be rotated. (default: false)
Example
import Moveable from "moveable";
const moveable = new Moveable(document.body);
moveable.rotatable = true;Methods
request(eopt, e.deltaRotateopt, e.rotateopt) → {Moveable.Requester}
| Name | Type | Description | ||||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
e? |
object | the Resizable's request parameter
Properties
|
Example
// Instantly Request (requestStart - request - requestEnd)
moveable.request("rotatable", { deltaRotate: 10 }, true);
* moveable.request("rotatable", { rotate: 10 }, true);
// requestStart
const requester = moveable.request("rotatable");
// request
requester.request({ deltaRotate: 10 });
requester.request({ deltaRotate: 10 });
requester.request({ deltaRotate: 10 });
requester.request({ rotate: 10 });
requester.request({ rotate: 20 });
requester.request({ rotate: 30 });
// requestEnd
requester.requestEnd();Returns:
Moveable Requester
- Type
- Moveable.Requester
Type Definitions
OnBeforeRotate
Properties:
currentTarget:
MoveableManagerInterface<Record<string, any>, Record<string, any>>
The Moveable instance
moveable:
MoveableManagerInterface<Record<string, any>, Record<string, any>>
The Moveable instance
clientX:
number
The horizontal coordinate within the application's client area at which the event occurred.
clientY:
number
The vertical coordinate within the application's client area at which the event occurred.
beforeRotation:
number
The rotation degree before transform is applied before snap and throttle and format
absoluteRotation:
number
The client rotation degree before snap and throttle and format
Parameters for the `beforeRotate` event
Type:
- TSInterface
OnBeforeRotateGroup
Properties:
Parameters for the `beforeRotateGroup` event
Type:
- TSInterface
OnRotate
Properties:
afterTransform:
string
A transform obtained by the simultaneous occurrence of other events in the current event
currentTarget:
MoveableManagerInterface<Record<string, any>, Record<string, any>>
The Moveable instance
moveable:
MoveableManagerInterface<Record<string, any>, Record<string, any>>
The Moveable instance
clientX:
number
The horizontal coordinate within the application's client area at which the event occurred.
clientY:
number
The vertical coordinate within the application's client area at which the event occurred.
Parameters for the `rotate` event
Type:
- TSInterface
OnRotateEnd
Properties:
currentTarget:
MoveableManagerInterface<Record<string, any>, Record<string, any>>
The Moveable instance
moveable:
MoveableManagerInterface<Record<string, any>, Record<string, any>>
The Moveable instance
clientX:
number
The horizontal coordinate within the application's client area at which the event occurred.
clientY:
number
The vertical coordinate within the application's client area at which the event occurred.
Type:
- TSInterface
OnRotateGroup
Properties:
Parameters for the `rotateGroup` event
Type:
- TSInterface
OnRotateGroupEnd
Properties:
Type:
- TSInterface
OnRotateGroupStart
Properties:
Type:
- TSInterface
OnRotateStart
Properties:
Default Value: transform of target's inline style
setTransform:
(transform: string | string[], transformIndex?: number) => void
Set your original transform.
`transformIndex` is the sequence of functions used in the event.
If you use `setTransform`, you don't need to use `set` function.
Default Value: index with that property in transform or last
setTransformIndex:
(transformIndex: number) => void
`transformIndex` is the sequence of functions used in the event.
currentTarget:
MoveableManagerInterface<Record<string, any>, Record<string, any>>
The Moveable instance
moveable:
MoveableManagerInterface<Record<string, any>, Record<string, any>>
The Moveable instance
clientX:
number
The horizontal coordinate within the application's client area at which the event occurred.
clientY:
number
The vertical coordinate within the application's client area at which the event occurred.
Default Value: target's transformOrigin
setFixedDirection:
(fixedDirection: number[]) => void
Set a fixed direction to rotate.
Default Value: target's transformOrigin
setFixedPosition:
(fixedPosition: number[]) => void
Set a fixed position to rotate.
Type:
- TSInterface
RotatableOptions
Properties:
renderDirections
optional
Default Value: false if rotatable, ["n", "nw", "ne", "s", "se", "sw", "e", "w"] otherwise
renderDirections?:
boolean | string[]
Set directions to show the control box.
edge
optional
Default Value: false
edge?:
boolean | Array<LineDirection>
Whether to scale and resize through edge lines.
You can use "n", "w", "s", "e" in LineDirection array.
displayAroundControls
optional
Since:
0.44.0
Story Example: options--options-control-padding
Default Value: false
displayAroundControls?:
boolean
You can expand the area around the control.
Either `rotateAroundControls` or `displayAroundControls` can be used.
You can set the area through the `controlPadding` value.
rotatable
optional
Default Value: false
rotatable?:
boolean | RotatableOptions
Whether or not target can be rotated.
rotationPosition
optional
Default Value: "top"
rotationPosition?:
RotationPosition | RotationPosition[]
You can specify the position of the rotation.
rotateAroundControls
optional
Default Value: 0
rotateAroundControls?:
boolean
You can rotate around direction controls.
Either `rotateAroundControls` or `displayAroundControls` can be used.
resolveAblesWithRotatable
optional
Default Value: null
resolveAblesWithRotatable?:
Record<string, LineDirection[]> | null | undefined
Sets the control that will cause resize along with rotate. (Only Single Target, Only resizable, Beta)
throttleRotate
optional
Default Value: 0
throttleRotate?:
number
throttle of angle(degree) when rotate.
rotationTarget
optional
Default Value: null
rotationTarget?:
MoveableRefType | ArrayFormat<MoveableRefType> | false
Set additional rotationTargets.
Type:
- TSInterface
RotatableRequestParam
Properties:
isInstant
optional
isInstant?:
boolean
Run the request instantly. (requestStart, request, requestEnd happen at the same time)
the Rotatable's request parameter
Type:
- TSInterface
Events
rotate
When rotating, the rotate event is called.
| Type | Description |
|---|---|
| Moveable.Rotatable.OnRotate | Parameters for the rotate event |
Example
import Moveable from "moveable";
const moveable = new Moveable(document.body, { rotatable: true });
moveable.on("rotate", ({ target, transform, dist }) => {
target.style.transform = transform;
});rotateEnd
When the rotate finishes, the rotateEnd event is called.
| Type | Description |
|---|---|
| Moveable.Rotatable.OnRotateEnd | Parameters for the rotateEnd event |
Example
import Moveable from "moveable";
const moveable = new Moveable(document.body, { rotatable: true });
moveable.on("rotateEnd", ({ target, isDrag }) => {
console.log(target, isDrag);
});rotateGroup
When the group rotate, the `rotateGroup` event is called.
| Type | Description |
|---|---|
| Moveable.Rotatable.OnRotateGroup | Parameters for the `rotateGroup` event |
Example
import Moveable from "moveable";
const moveable = new Moveable(document.body, {
target: [].slice.call(document.querySelectorAll(".target")),
rotatable: true
});
moveable.on("rotateGroup", ({ targets, events }) => {
console.log("onRotateGroup", targets);
events.forEach(ev => {
const target = ev.target;
// ev.drag is a drag event that occurs when the group rotate.
const left = ev.drag.beforeDist[0];
const top = ev.drag.beforeDist[1];
const deg = ev.beforeDist;
});
});rotateGroupEnd
When the group rotate finishes, the `rotateGroupEnd` event is called.
| Type | Description |
|---|---|
| Moveable.Rotatable.OnRotateGroupEnd | Parameters for the `rotateGroupEnd` event |
Example
import Moveable from "moveable";
const moveable = new Moveable(document.body, {
target: [].slice.call(document.querySelectorAll(".target")),
rotatable: true
});
moveable.on("rotateGroupEnd", ({ targets, isDrag }) => {
console.log("onRotateGroupEnd", targets, isDrag);
});rotateGroupStart
When the group rotate starts, the `rotateGroupStart` event is called.
| Type | Description |
|---|---|
| Moveable.Rotatable.OnRotateGroupStart | Parameters for the `rotateGroupStart` event |
Example
import Moveable from "moveable";
const moveable = new Moveable(document.body, {
target: [].slice.call(document.querySelectorAll(".target")),
rotatable: true
});
moveable.on("rotateGroupStart", ({ targets }) => {
console.log("onRotateGroupStart", targets);
});rotateStart
When the rotate starts, the rotateStart event is called.
| Type | Description |
|---|---|
| Moveable.Rotatable.OnRotateStart | Parameters for the rotateStart event |
Example
import Moveable from "moveable";
const moveable = new Moveable(document.body, { rotatable: true });
moveable.on("rotateStart", ({ target }) => {
console.log(target);
});