Scalable indicates whether the target's x and y can be scale of transform.
Members
throttleScale
throttle of scaleX, scaleY when scale.
Example
import Moveable from "moveable";
const moveable = new Moveable(document.body);
moveable.throttleScale = 0.1;scalable
- Source:
- Default Value:
- false
Whether or not target can scaled.
Example
import Moveable from "moveable";
const moveable = new Moveable(document.body);
moveable.scalable = true;renderDirections
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, {
scalable: true,
renderDirections: ["n", "nw", "ne", "s", "se", "sw", "e", "w"],
});
moveable.renderDirections = ["nw", "ne", "sw", "se"];keepRatio
When resize or scale, keeps a ratio of the width, height. (default: false)
Example
import Moveable from "moveable";
const moveable = new Moveable(document.body, {
scalable: true,
});
moveable.keepRatio = true;Methods
request(e) → {Moveable.Requester}
| Name | Type | Description |
|---|---|---|
e |
Moveable.Scalable.ScalableRequestParam | the Scalable's request parameter |
Example
// Instantly Request (requestStart - request - requestEnd)
moveable.request("scalable", { deltaWidth: 10, deltaHeight: 10 }, true);
// requestStart
const requester = moveable.request("scalable");
// request
requester.request({ deltaWidth: 10, deltaHeight: 10 });
requester.request({ deltaWidth: 10, deltaHeight: 10 });
requester.request({ deltaWidth: 10, deltaHeight: 10 });
// requestEnd
requester.requestEnd();Returns:
Moveable Requester
- Type
- Moveable.Requester
Type Definitions
OnBeforeScale
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.
setFixedDirection:
(startDirecition: number[]) => number[]
Set a fixed direction to scale.
If fixedDirection is set, the scale values can be changed and can be reconfirmed as a return value.
Type:
- TSInterface
OnBeforeScaleGroup
Properties:
Type:
- TSInterface
OnScale
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.
Type:
- TSInterface
OnScaleEnd
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
OnScaleGroup
Properties:
Type:
- TSInterface
OnScaleGroupEnd
Properties:
Type:
- TSInterface
OnScaleGroupStart
Properties:
Type:
- TSInterface
OnScaleStart
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: Opposite direction
setFixedDirection:
(startDirecition: number[]) => void
Set a fixed direction to scale.
Default Value: offsetWidth / offsetHeight
setRatio:
(ratio: number) => void
Set the ratio of width and height.
Default Value: [-Infinity, -Infinity]
setMinScaleSize:
(min: number[]) => void
You can set the min scale width, height value.
scale size = scale value * offset size
Default Value: [Infinity, Infinity]
setMaxScaleSize:
(max: number[]) => void
You can set the max scale width, height value.
scale size = scale value * offset size
Type:
- TSInterface
ScalableOptions
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.
scalable
optional
Default Value: false
scalable?:
boolean | ScalableOptions
Whether or not target can be scaled.
throttleScale
optional
Default Value: 0
throttleScale?:
number
throttle of scaleX, scaleY when scale.
keepRatio
optional
Default Value: false
keepRatio?:
boolean
When resize or scale, keeps a ratio of the width, height.
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.
Type:
- TSInterface
ScalableRequestParam
Properties:
isInstant
optional
isInstant?:
boolean
Run the request instantly. (requestStart, request, requestEnd happen at the same time)
the Scalable's request parameter
Type:
- TSInterface
Events
beforeScale
When scaling, `beforeScale` is called before `scale` occurs. In `beforeScale`, you can get and set the pre-value before scaling.
| Type | Description |
|---|---|
| Moveable.Scalable.OnBeforeScale | Parameters for the `beforeScale` event |
Example
import Moveable from "moveable";
const moveable = new Moveable(document.body, { scalable: true });
moveable.on("beforeScale", ({ setFixedDirection }) => {
if (shiftKey) {
setFixedDirection([0, 0]);
}
});
moveable.on("scale", ({ target, transform, dist }) => {
target.style.transform = transform;
});scale
When scaling, the `scale` event is called.
| Type | Description |
|---|---|
| Moveable.Scalable.OnScale | Parameters for the `scale` event |
Example
import Moveable from "moveable";
const moveable = new Moveable(document.body, { scalable: true });
moveable.on("scale", ({ target, transform, dist }) => {
target.style.transform = transform;
});scaleEnd
When the scale finishes, the `scaleEnd` event is called.
| Type | Description |
|---|---|
| Moveable.Scalable.OnScaleEnd | Parameters for the `scaleEnd` event |
Example
import Moveable from "moveable";
const moveable = new Moveable(document.body, { scalable: true });
moveable.on("scaleEnd", ({ target, isDrag }) => {
console.log(target, isDrag);
});scaleGroup
When the group scale, the `scaleGroup` event is called.
| Type | Description |
|---|---|
| Moveable.Scalable.OnScaleGroup | Parameters for the `scaleGroup` event |
Example
import Moveable from "moveable";
const moveable = new Moveable(document.body, {
target: [].slice.call(document.querySelectorAll(".target")),
scalable: true
});
moveable.on("scaleGroup", ({ targets, events }) => {
console.log("onScaleGroup", targets);
events.forEach(ev => {
const target = ev.target;
// ev.drag is a drag event that occurs when the group scale.
const left = ev.drag.beforeDist[0];
const top = ev.drag.beforeDist[1];
const scaleX = ev.scale[0];
const scaleY = ev.scale[1];
});
});scaleGroupEnd
When the group scale finishes, the `scaleGroupEnd` event is called.
| Type | Description |
|---|---|
| Moveable.Scalable.OnScaleGroupEnd | Parameters for the `scaleGroupEnd` event |
Example
import Moveable from "moveable";
const moveable = new Moveable(document.body, {
target: [].slice.call(document.querySelectorAll(".target")),
scalable: true
});
moveable.on("scaleGroupEnd", ({ targets, isDrag }) => {
console.log("onScaleGroupEnd", targets, isDrag);
});scaleGroupStart
When the group scale starts, the `scaleGroupStart` event is called.
| Type | Description |
|---|---|
| Moveable.Scalable.OnScaleGroupStart | Parameters for the `scaleGroupStart` event |
Example
import Moveable from "moveable";
const moveable = new Moveable(document.body, {
target: [].slice.call(document.querySelectorAll(".target")),
scalable: true
});
moveable.on("scaleGroupStart", ({ targets }) => {
console.log("onScaleGroupStart", targets);
});scaleStart
When the scale starts, the scaleStart event is called.
| Type | Description |
|---|---|
| Moveable.Scalable.OnScaleStart | Parameters for the scaleStart event |
Example
import Moveable from "moveable";
const moveable = new Moveable(document.body, { scalable: true });
moveable.on("scaleStart", ({ target }) => {
console.log(target);
});