Warpable

Moveable. Warpable

Source:
Warpable indicates whether the target can be warped(distorted, bented).

Members

renderDirections

Source:
Set directions to show the control box. (default: ["n", "nw", "ne", "s", "se", "sw", "e", "w"])
Example
import Moveable from "moveable";

const moveable = new Moveable(document.body, {
    warpable: true,
    renderDirections: ["n", "nw", "ne", "s", "se", "sw", "e", "w"],
});

moveable.renderDirections = ["nw", "ne", "sw", "se"];

warpable

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

const moveable = new Moveable(document.body);

moveable.warpable = true;

Type Definitions

OnWarp

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
transform string a target's transform
delta number[] The delta of warp matrix
dist number[] The dist of warp matrix
matrix number[] The calculated warp matrix
multiply (matrix1: number[], matrix2: number[], n?: number) => number[] Multiply function that can multiply previous matrix by warp matrix
Type:
  • TSInterface

OnWarpEnd

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

OnWarpStart

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 (matrix: number[]) => any You can set the start matrix value.
Type:
  • TSInterface

WarpableOptions

Source:
Properties:
Name Type Description
warpable? boolean Whether or not target can be warped. (default: false)
renderDirections? boolean | string[] Set directions to show the control box. (default: ["n", "nw", "ne", "s", "se", "sw", "e", "w"])
Type:
  • TSInterface

Events

warp

Source:
When warping, the warp event is called.
Type Description
Moveable.Warpable.OnWarp Parameters for the warp event
Example
import Moveable from "moveable";
let matrix = [
 1, 0, 0, 0,
 0, 1, 0, 0,
 0, 0, 1, 0,
 0, 0, 0, 1,
];
const moveable = new Moveable(document.body, { warpable: true });
moveable.on("warp", ({ target, transform, delta, multiply }) => {
   // target.style.transform = transform;
   matrix = multiply(matrix, delta);
   target.style.transform = `matrix3d(${matrix.join(",")})`;
});

warpEnd

Source:
When the warp finishes, the warpEnd event is called.
Type Description
Moveable.Warpable.OnWarpEnd Parameters for the warpEnd event
Example
import Moveable from "moveable";

const moveable = new Moveable(document.body, { warpable: true });
moveable.on("warpEnd", ({ target, isDrag }) => {
    console.log(target, isDrag);
});

warpStart

Source:
When the warp starts, the warpStart event is called.
Type Description
Moveable.Warpable.OnWarpStart Parameters for the warpStart event
Example
import Moveable from "moveable";

const moveable = new Moveable(document.body, { warpable: true });
moveable.on("warpStart", ({ target }) => {
    console.log(target);
});