Warpable

Moveable. Warpable

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

Members

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;

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"];

Type Definitions

OnWarp

Source:
Properties:
style
style: Record<string, string>
You can get the style you can get from the event.
cssText
cssText: string
You can get it as a cssText that you can get from that event.
currentTarget
currentTarget: MoveableManagerInterface<Record<string, any>, Record<string, any>>
The Moveable instance
moveable
moveable: MoveableManagerInterface<Record<string, any>, Record<string, any>>
The Moveable instance
target
target: HTMLElement | SVGElement
The Moveable's target
clientX
clientX: number
The horizontal coordinate within the application's client area at which the event occurred.
clientY
clientY: number
The vertical coordinate within the application's client area at which the event occurred.
isFirstDrag
isFirstDrag: number
Whether this is the first drag in the drag event
datas
datas: IObject<any>
Objects that can send information to the following events.
inputEvent
inputEvent: any
The mouse or touch input event that is invoking the moveable event
stopAble
stopAble: () => void
Stop the currently working able.
stopDrag
stopDrag: () => void
Calling `stopDrag` in a drag-related event ends the drag.
isTrusted
isTrusted: boolean
Whether the event did not occur externally
delta
delta: number[]
The delta of warp matrix
dist
dist: number[]
The dist of warp matrix
matrix
matrix: number[]
The calculated warp matrix
transform
transform: string
a target's transform
multiply
multiply: (matrix1: number[], matrix2: number[], n?: number) => number[]
Multiply function that can multiply previous matrix by warp matrix
Type:
  • TSInterface

OnWarpEnd

Source:
Properties:
currentTarget
currentTarget: MoveableManagerInterface<Record<string, any>, Record<string, any>>
The Moveable instance
moveable
moveable: MoveableManagerInterface<Record<string, any>, Record<string, any>>
The Moveable instance
target
target: HTMLElement | SVGElement
The Moveable's target
clientX
clientX: number
The horizontal coordinate within the application's client area at which the event occurred.
clientY
clientY: number
The vertical coordinate within the application's client area at which the event occurred.
isFirstDrag
isFirstDrag: number
Whether this is the first drag in the drag event
datas
datas: IObject<any>
Objects that can send information to the following events.
inputEvent
inputEvent: any
The mouse or touch input event that is invoking the moveable event
stopAble
stopAble: () => void
Stop the currently working able.
stopDrag
stopDrag: () => void
Calling `stopDrag` in a drag-related event ends the drag.
isTrusted
isTrusted: boolean
Whether the event did not occur externally
lastEvent
lastEvent: any | undefined
This is the last dragged event. No, if you haven't dragged.
isDrag
isDrag: boolean
Whether this moved
isDouble
isDouble: boolean
Whether it is double-click
Type:
  • TSInterface

OnWarpStart

Source:
Properties:
setTransform
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.
setTransformIndex
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
currentTarget: MoveableManagerInterface<Record<string, any>, Record<string, any>>
The Moveable instance
moveable
moveable: MoveableManagerInterface<Record<string, any>, Record<string, any>>
The Moveable instance
target
target: HTMLElement | SVGElement
The Moveable's target
clientX
clientX: number
The horizontal coordinate within the application's client area at which the event occurred.
clientY
clientY: number
The vertical coordinate within the application's client area at which the event occurred.
isFirstDrag
isFirstDrag: number
Whether this is the first drag in the drag event
datas
datas: IObject<any>
Objects that can send information to the following events.
inputEvent
inputEvent: any
The mouse or touch input event that is invoking the moveable event
stopAble
stopAble: () => void
Stop the currently working able.
stopDrag
stopDrag: () => void
Calling `stopDrag` in a drag-related event ends the drag.
isTrusted
isTrusted: boolean
Whether the event did not occur externally
set
set: (matrix: number[]) => any
You can set the start matrix value.
Type:
  • TSInterface

WarpableOptions

Source:
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.
warpable optional
Default Value: false
warpable?: boolean
Whether or not target can be warped.
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);
});