Roundable

Moveable. Roundable

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

Members

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

roundPadding

Source:
Default Value:
  • false
The padding value of the position of the round control
Example
import Moveable from "moveable";

const moveable = new Moveable(document.body, {
    roundable: true,
    roundPadding: 0,
});
moveable.roundPadding = 15;

roundClickable

Source:
Default Value:
  • true
Whether you can add/delete round controls by double-clicking a line or control.
Example
import Moveable from "moveable";

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

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

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.minRoundControls = [1, 0];

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

isDisplayShadowRoundControls

Source:
Default Value:
  • false
Whether to show a round control that does not actually exist as a shadow
Example
import Moveable from "moveable";

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

Type Definitions

OnRound

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

OnRoundEnd

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

OnRoundGroup

Source:
Properties:
targets
targets: Array<HTMLElement | SVGElement>
moveable's targets
events
events: OnRound[]
moveable's child events
Type:
  • TSInterface

OnRoundGroupEnd

Source:
Properties:
targets
targets: Array<HTMLElement | SVGElement>
moveable's targets
events
events: OnRoundEnd[]
moveable's child events
Type:
  • TSInterface

OnRoundGroupStart

Source:
Properties:
targets
targets: Array<HTMLElement | SVGElement>
moveable's targets
events
events: OnRoundStart[]
moveable's child events
Type:
  • TSInterface

OnRoundStart

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

RoundableOptions

Source:
Properties:
roundable optional
Default Value: false
roundable?: boolean
Whether to show and drag border-radius.
roundRelative optional
Default Value: false
roundRelative?: boolean
% Can be used instead of the absolute px
minRoundControls optional
Default Value: [0, 0]
minRoundControls?: number[]
Minimum number of round controls. It moves in proportion by control. [horizontal, vertical]
maxRoundControls optional
Default Value: [4, 4]
maxRoundControls?: number[]
Maximum number of round controls. It moves in proportion by control. [horizontal, vertical]
roundClickable optional
Default Value: true
roundClickable?: boolean | "line" | "control"
Whether you can add/delete round controls by double-clicking a line or control.
isDisplayShadowRoundControls optional
Default Value: false
isDisplayShadowRoundControls?: boolean | "horizontal"
Whether to show a round control that does not actually exist as a shadow
roundPadding optional
Default Value: 0
roundPadding?: number
The padding value of the position of the round control
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);
});

roundGroup

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

const moveable = new Moveable(document.body, {
    targets: [target1, target2, target3],
    roundable: true,
});
moveable.on("roundGroupStart", e => {
    console.log(e.targets);
}).on("roundGroup", e => {
  e.events.forEach(ev => {
      ev.target.style.cssText += ev.cssText;
  });
}).on("roundGroupEnd", e => {
    console.log(e);
});

roundGroupEnd

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

const moveable = new Moveable(document.body, {
    targets: [target1, target2, target3],
    roundable: true,
});
moveable.on("roundGroupStart", e => {
    console.log(e.targets);
}).on("roundGroup", e => {
    e.events.forEach(ev => {
        ev.target.style.cssText += ev.cssText;
    });
}).on("roundGroupEnd", e => {
    console.log(e);
});

roundGroupStart

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

const moveable = new Moveable(document.body, {
    targets: [target1, target2, target3],
    roundable: true,
});
moveable.on("roundGroupStart", e => {
    console.log(e.targets);
}).on("roundGroup", e => {
  e.events.forEach(ev => {
      ev.target.style.cssText += ev.cssText;
  });
}).on("roundGroupEnd", 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);
});