Resizable indicates whether the target's width and height can be increased or decreased.
Members
throttleResize
- Source:
- Default Value:
- 1
throttle of width, height when resize. If throttleResize is set to less than 1, the target may shake.
Example
import Moveable from "moveable";
const moveable = new Moveable(document.body, {
resizable: true,
throttleResize: 1,
});
moveable.throttleResize = 0;resizeFormat
- Source:
- Default Value:
- oneself
Function to convert size for resize
Example
import Moveable from "moveable";
const moveable = new Moveable(document.body, {
resizable: true,
resizeFormat: v => v,
});
moveable.resizeFormat = (size: number[]) => ([Math.trunc(size[0]), Math.trunc(size[1])];resizable
- Source:
- Default Value:
- false
Whether or not target can be resized.
Example
import Moveable from "moveable";
const moveable = new Moveable(document.body, {
resizable: false,
});
moveable.resizable = true;renderDirections
- Source:
- Default Value:
- ["n", "nw", "ne", "s", "se", "sw", "e", "w"]
Set directions to show the control box.
Example
import Moveable from "moveable";
const moveable = new Moveable(document.body, {
resizable: true,
renderDirections: ["n", "nw", "ne", "s", "se", "sw", "e", "w"],
});
moveable.renderDirections = ["nw", "ne", "sw", "se"];keepRatio
- Source:
- Default Value:
- false
When resize or scale, keeps a ratio of the width, height.
Example
import Moveable from "moveable";
const moveable = new Moveable(document.body, {
resizable: true,
});
moveable.keepRatio = true;Methods
request(e) → {Moveable.Requester}
| Name | Type | Description |
|---|---|---|
e |
Moveable.Resizable.ResizableRequestParam | the Resizable's request parameter |
Example
// Instantly Request (requestStart - request - requestEnd)
// Use Relative Value
moveable.request("resizable", { deltaWidth: 10, deltaHeight: 10 }, true);
// Use Absolute Value
moveable.request("resizable", { offsetWidth: 100, offsetHeight: 100 }, true);
// requestStart
const requester = moveable.request("resizable");
// request
// Use Relative Value
requester.request({ deltaWidth: 10, deltaHeight: 10 });
requester.request({ deltaWidth: 10, deltaHeight: 10 });
requester.request({ deltaWidth: 10, deltaHeight: 10 });
// Use Absolute Value
moveable.request("resizable", { offsetWidth: 100, offsetHeight: 100 });
moveable.request("resizable", { offsetWidth: 110, offsetHeight: 100 });
moveable.request("resizable", { offsetWidth: 120, offsetHeight: 100 });
// requestEnd
requester.requestEnd();Returns:
Moveable Requester
- Type
- Moveable.Requester
Type Definitions
OnBeforeResize
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 resize.
If fixedDirection is set, the boundingWidth and boundingHeight values can be changed and can be reconfirmed as a return value.
boundingHeight:
number
a target's bounding height before snap and throttle and format
Type:
- TSInterface
OnBeforeResizeGroup
Properties:
Type:
- TSInterface
OnResize
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
OnResizeEnd
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
OnResizeGroup
Properties:
Type:
- TSInterface
OnResizeGroupEnd
Properties:
Type:
- TSInterface
OnResizeGroupStart
Properties:
Type:
- TSInterface
OnResizeStart
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.
Default Value: [minOffsetWidth, minOffsetHeight])
setMin:
(minSize: Array<string | number>) => any
You can set the css min offset width, min offset height value.
Default Value: [maxOffsetWidth, maxOffsetHeight])
setMax:
(maxSize: Array<string | number>) => any
You can set the css max offset width, max offset height value.
Default Value: transformOrigin
setOrigin:
(origin: Array<string | number>) => any
You can set the css origin
Default Value: Opposite direction
setFixedDirection:
(startDirecition: number[]) => any
Set a fixed direction to resize.
Default Value: offsetWidth / offsetHeight
setRatio:
(ratio: number) => any
Set the ratio of width and height.
Type:
- TSInterface
ResizableOptions
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.
resizable
optional
Default Value: false
resizable?:
boolean | ResizableOptions
Whether or not target can be resized.
throttleResize
optional
Default Value: 1
throttleResize?:
number
throttle of width, height when resize.
keepRatio
optional
Default Value: false
keepRatio?:
boolean
When resize or scale, keeps a ratio of the width, height.
keepRatioFinally
optional
Default Value: false
keepRatioFinally?:
boolean
The size can be changed by format and throttle, but the ratio is maintained at the end. Forced true when using groups.
resizeFormat
optional
Default Value: oneself
resizeFormat?:
(size: number[]) => number[]
Function to convert size for resize.
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.
checkResizableError
optional
Default Value: true
checkResizableError?:
boolean
Whether to recalculate when the size to be calculated is different from the actual size
Type:
- TSInterface
ResizableRequestParam
Properties:
isInstant
optional
isInstant?:
boolean
Run the request instantly. (requestStart, request, requestEnd happen at the same time)
the Resizable's request parameter
Type:
- TSInterface
Events
beforeResize
When resizing, `beforeResize` is called before `resize` occurs. In `beforeResize`, you can get and set the pre-value before resizing.
| Type | Description |
|---|---|
| Moveable.Resizable.OnBeforeResize | Parameters for the `beforeResize` event |
Example
import Moveable from "moveable";
const moveable = new Moveable(document.body, { resizable: true });
moveable.on("beforeResize", ({ setFixedDirection }) => {
if (shiftKey) {
setFixedDirection([0, 0]);
}
});
moveable.on("resize", ({ target, width, height, drag }) => {
target.style.width = `${width}px`;
target.style.height = `${height}px`;
target.style.transform = drag.transform;
});resize
When resizing, the resize event is called.
| Type | Description |
|---|---|
| Moveable.Resizable.OnResize | Parameters for the resize event |
Example
import Moveable from "moveable";
const moveable = new Moveable(document.body, { resizable: true });
moveable.on("resize", ({ target, width, height }) => {
target.style.width = `${e.width}px`;
target.style.height = `${e.height}px`;
});resizeEnd
When the resize finishes, the resizeEnd event is called.
| Type | Description |
|---|---|
| Moveable.Resizable.OnResizeEnd | Parameters for the resizeEnd event |
Example
import Moveable from "moveable";
const moveable = new Moveable(document.body, { resizable: true });
moveable.on("resizeEnd", ({ target, isDrag }) => {
console.log(target, isDrag);
});resizeGroup
When the group resize, the `resizeGroup` event is called.
| Type | Description |
|---|---|
| Moveable.Resizable.onResizeGroup | Parameters for the `resizeGroup` event |
Example
import Moveable from "moveable";
const moveable = new Moveable(document.body, {
target: [].slice.call(document.querySelectorAll(".target")),
resizable: true
});
moveable.on("resizeGroup", ({ targets, events }) => {
console.log("onResizeGroup", targets);
events.forEach(ev => {
const offset = [
direction[0] < 0 ? -ev.delta[0] : 0,
direction[1] < 0 ? -ev.delta[1] : 0,
];
// ev.drag is a drag event that occurs when the group resize.
const left = offset[0] + ev.drag.beforeDist[0];
const top = offset[1] + ev.drag.beforeDist[1];
const width = ev.width;
const top = ev.top;
});
});resizeGroupEnd
When the group resize finishes, the `resizeGroupEnd` event is called.
| Type | Description |
|---|---|
| Moveable.Resizable.OnResizeGroupEnd | Parameters for the `resizeGroupEnd` event |
Example
import Moveable from "moveable";
const moveable = new Moveable(document.body, {
target: [].slice.call(document.querySelectorAll(".target")),
resizable: true
});
moveable.on("resizeGroupEnd", ({ targets, isDrag }) => {
console.log("onResizeGroupEnd", targets, isDrag);
});resizeGroupStart
When the group resize starts, the `resizeGroupStart` event is called.
| Type | Description |
|---|---|
| Moveable.Resizable.OnResizeGroupStart | Parameters for the `resizeGroupStart` event |
Example
import Moveable from "moveable";
const moveable = new Moveable(document.body, {
target: [].slice.call(document.querySelectorAll(".target")),
resizable: true
});
moveable.on("resizeGroupStart", ({ targets }) => {
console.log("onResizeGroupStart", targets);
});resizeStart
When the resize starts, the resizeStart event is called.
| Type | Description |
|---|---|
| Moveable.Resizable.OnResizeStart | Parameters for the resizeStart event |
Example
import Moveable from "moveable";
const moveable = new Moveable(document.body, { resizable: true });
moveable.on("resizeStart", ({ target }) => {
console.log(target);
});