Roundable

Moveable. Roundable

Source:
Whether to show and drag or double click border-radius

Members

maxRoundControls

Source:
Maximum number of round controls. It moves in proportion by control. [horizontal, vertical] (default: [4, 4])
Example
import Moveable from "moveable";

const moveable = new Moveable(document.body, {
    roundable: true,
    roundRelative: false,
    maxRoundControls: [4, 4],
});
moveable.maxRoundControls = [1, 0];

minRoundControls

Source:
Minimum number of round controls. It moves in proportion by control. [horizontal, vertical] (default: [0, 0])
Example
import Moveable from "moveable";

const moveable = new Moveable(document.body, {
    roundable: true,
    roundRelative: false,
    minRoundControls: [0, 0],
});
moveable.maxRoundControls = [1, 0];

roundable

Source:
Whether to show and drag or double click border-radius, (default: false)
Example
import Moveable from "moveable";

const moveable = new Moveable(document.body, {
    roundable: true,
    roundRelative: false,
});
moveable.on("roundStart", e => {
    console.log(e);
}).on("round", e => {
    e.target.style.borderRadius = e.borderRadius;
}).on("roundEnd", e => {
    console.log(e);
});

roundClickable

Source:
Properties:
Type Description
Whether you can add/delete round controls by double-clicking a line or control. (default: true)
Example
import Moveable from "moveable";

const moveable = new Moveable(document.body, {
    roundable: true,
    roundRelative: false,
    roundClickable: true,
});
moveable.roundClickable = false;

roundRelative

Source:
% Can be used instead of the absolute px
Example
import Moveable from "moveable";

const moveable = new Moveable(document.body, {
    roundable: true,
    roundRelative: false,
});
moveable.on("roundStart", e => {
    console.log(e);
}).on("round", e => {
    e.target.style.borderRadius = e.borderRadius;
}).on("roundEnd", e => {
    console.log(e);
});

Type Definitions

OnRound

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
width number Offset width of target
height number Offset height of target
delta number[] The delta of [x, y]
dist number[] The distance of [x, y]
horizontals number[] The target's moved border-radius's horizontal poses
verticals number[] The target's moved border-radius's vertical poses
borderRadius string The target's moved border-radius
Type:
  • TSInterface

OnRoundEnd

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

OnRoundStart

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
Type:
  • TSInterface

RoundableOptions

Source:
Properties:
Name Type Description
roundable? boolean Whether to show and drag border-radius
roundRelative? boolean % Can be used instead of the absolute px
minRoundControls? number[] Minimum number of round controls. It moves in proportion by control. [horizontal, vertical] (default: [0, 0])
maxRoundControls? number[] Maximum number of round controls. It moves in proportion by control. [horizontal, vertical] (default: [4, 4])
roundClickable? boolean Whether you can add/delete round controls by double-clicking a line or control. (default: true)
Type:
  • TSInterface

Events

round

Source:
When drag or double click the border area or controls, the `round` event is called.
Type Description
Moveable.Roundable.OnRound Parameters for the `round` event
Example
import Moveable from "moveable";

const moveable = new Moveable(document.body, {
    roundable: true,
    roundRelative: false,
});
moveable.on("roundStart", e => {
    console.log(e);
}).on("round", e => {
    e.target.style.borderRadius = e.borderRadius;
}).on("roundEnd", e => {
    console.log(e);
});

roundEnd

Source:
When drag end the border area or controls, the `roundEnd` event is called.
Type Description
Moveable.Roundable.onRoundEnd Parameters for the `roundEnd` event
Example
import Moveable from "moveable";

const moveable = new Moveable(document.body, {
    roundable: true,
    roundRelative: false,
});
moveable.on("roundStart", e => {
    console.log(e);
}).on("round", e => {
    e.target.style.borderRadius = e.borderRadius;
}).on("roundEnd", e => {
    console.log(e);
});

roundStart

Source:
When drag start the clip area or controls, the `roundStart` event is called.
Type Description
Moveable.Roundable.OnRoundStart Parameters for the `roundStart` event
Example
import Moveable from "moveable";

const moveable = new Moveable(document.body, {
    roundable: true,
    roundRelative: false,
});
moveable.on("roundStart", e => {
    console.log(e);
}).on("round", e => {
    e.target.style.borderRadius = e.borderRadius;
}).on("roundEnd", e => {
    console.log(e);
});