Rotatable

Moveable. Rotatable

Source:
Rotatable indicates whether the target can be rotated.

Members

rotatable

Source:
Whether or not target can be rotated. (default: false)
Example
import Moveable from "moveable";

const moveable = new Moveable(document.body);

moveable.rotatable = true;

rotationPosition

Source:
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"

throttleRotate

Source:
throttle of angle(degree) when rotate.
Example
import Moveable from "moveable";

const moveable = new Moveable(document.body);

moveable.throttleRotate = 1;

Methods

request(eopt, e.deltaRotateopt, e.rotateopt) → {Moveable.Requester}

Source:
Name Type Description
e? object the Resizable's request parameter
Properties
Name Type Default Description
deltaRotate? number 0 delta number of rotation
rotate? number 0 absolute number of moveable's rotation
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

OnRotate

Source:
Properties:
Name Type Description
transform string a target's next transform string value.
drag OnDrag transform events causes a `drag` event.
currentTarget MoveableManagerInterface<any, any> The Moveable instance
moveable MoveableManagerInterface<any, any> The Moveable instance
target HTMLElement | SVGElement The Moveable target
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.
datas IObject<any> Objects that can send information to the following events.
inputEvent any The mouse or touch input event that is invoking the moveable event
beforeDist number The distance of rotation rad before transform is applied
beforeDelta number The delta of rotation rad before transform is applied
beforeRotate number The now rotation rad before transform is applied
dist number The distance of rotation rad
delta number The delta of rotation rad
rotate number The now rotation rad
absoluteDist number a target's transform
absoluteDelta number Whether or not it is being pinched.
absoluteRotate number rotate causes a `drag` event.
transform string
isPinch boolean
drag OnDrag
Type:
  • TSInterface

OnRotateEnd

Source:
Properties:
Name Type Description
currentTarget MoveableManagerInterface<any, any> The Moveable instance
moveable MoveableManagerInterface<any, any> The Moveable instance
target HTMLElement | SVGElement The Moveable target
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.
datas IObject<any> Objects that can send information to the following events.
inputEvent any The mouse or touch input event that is invoking the moveable event
lastEvent any | undefined This is the last dragged event. No, if you haven't dragged.
isDrag boolean Whether this moved
isDouble boolean Whether it is double-click
Type:
  • TSInterface

OnRotateGroup

Source:
Properties:
Name Type Description
targets Array<HTMLElement | SVGElement> The rotating targets
events Array<OnRotate & {drag: OnDrag}> Each `rotate` & `drag` event on the targets
set (rotation: number) => any You can set the current rotate value.
Type:
  • TSInterface

OnRotateGroupEnd

Source:
Properties:
Name Type Description
targets Array<HTMLElement | SVGElement> The rotate finished targets
Type:
  • TSInterface

OnRotateGroupStart

Source:
Properties:
Name Type Description
targets Array<HTMLElement | SVGElement> targets to rotate
events Array<OnRotateStart & {dragStart: OnDragStart | false}> Each `rotateStart` & `dragStart` event on the targets
Type:
  • TSInterface

OnRotateStart

Source:
Properties:
Name Type Description
setTransform (transform: string | string[], index?: number) => void Set your original transform. `index` is the sequence of functions used in the event. If you use `setTransform`, you don't need to use `set` function.
setTransformIndex (transformIndex: number) => void `index` is the sequence of functions used in the event.
currentTarget MoveableManagerInterface<any, any> The Moveable instance
moveable MoveableManagerInterface<any, any> The Moveable instance
target HTMLElement | SVGElement The Moveable target
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.
datas IObject<any> Objects that can send information to the following events.
inputEvent any The mouse or touch input event that is invoking the moveable event
set (rotate: number) => void You can set the start rotate value.
dragStart OnDragStart | false rotate causes a `dragStart` event.
Type:
  • TSInterface

RotatableOptions

Source:
Properties:
Name Type Description
renderDirections? boolean | string[] Set directions to show the control box. (default: false if rotatable, ["n", "nw", "ne", "s", "se", "sw", "e", "w"] otherwise)
rotatable? boolean Whether or not target can be rotated. (default: false)
rotationPosition? "top" | "bottom" | "left" | "right" | "top-right" | "top-left" | "bottom-right" | "bottom-left" | "left-top" | "left-bottom" | "right-top" | "right-bottom" | "none" You can specify the position of the rotation. (default: "top")
throttleRotate? number throttle of angle(degree) when rotate. (default: 0)
rotationTarget? MoveableRefType | ArrayFormat<MoveableRefType> | false Set additional rotationTargets.
Type:
  • TSInterface

Events

rotate

Source:
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

Source:
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

Source:
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

Source:
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

Source:
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

Source:
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);
});