Scalable

Moveable. Scalable

Source:
Scalable indicates whether the target's x and y can be scale of transform.

Members

keepRatio

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

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, {
    scalable: true,
  renderDirections: ["n", "nw", "ne", "s", "se", "sw", "e", "w"],
});

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

scalable

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

const moveable = new Moveable(document.body);

moveable.scalable = true;

throttleScale

Source:
throttle of scaleX, scaleY when scale.
Example
import Moveable from "moveable";

const moveable = new Moveable(document.body);

moveable.throttleScale = 0.1;

Methods

request(eopt, e.directionopt, e.deltaWidthopt, e.deltaHeightopt) → {Moveable.Requester}

Source:
Name Type Description
e? object the Resizable's request parameter
Properties
Name Type Default Description
direction? number [1, 1] Direction to scale
deltaWidth? number delta number of width
deltaHeight? number delta number of height
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

OnScale

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
direction number[] The direction of scale.
offsetWidth number a target's offsetWidth
offsetHeight number a target's offsetHeight
scale number[] a target's scale
dist number[] The distance of scale
delta number[] The delta of scale
isPinch boolean Whether or not it is being pinched.
Type:
  • TSInterface

OnScaleEnd

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

OnScaleGroup

Source:
Properties:
Name Type Description
targets Array<HTMLElement | SVGElement> The scaling targets
events OnScale[] Each `scale` & `drag` event on the targets
Type:
  • TSInterface

OnScaleGroupEnd

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

OnScaleGroupStart

Source:
Properties:
Name Type Description
targets Array<HTMLElement | SVGElement> targets to scale
events OnScaleStart[] Each `scaleStart` & `dragStart` event on the targets
Type:
  • TSInterface

OnScaleStart

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
direction number[] The direction of scale.
dragStart OnDragStart | false scale causes a `dragStart` event.
set (scale: number[]) => void You can set the start scale value.
setFixedDirection (fixedDirection: number[]) => void Set a fixed direction to resize. (default: Opposite direction)
setRatio (ratio: number) => any Set the ratio of width and height. (default: offsetWidth / offsetHeight)
Type:
  • TSInterface

ScalableOptions

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)
scalable? boolean Whether or not target can be scaled. (default: false)
throttleScale? number throttle of scaleX, scaleY when scale. (default: 0)
keepRatio? boolean When resize or scale, keeps a ratio of the width, height. (default: false)
Type:
  • TSInterface

Events

scale

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

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

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

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

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

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