Clippable

Moveable. Clippable

Source:
Whether to clip the target.

Members

dragWithClip

Source:
When dragging the target, the clip also moves. (default: true)
Example
import Moveable from "moveable";

const moveable = new Moveable(document.body, {
    clippable: true,
    defaultClipPath: "inset",
    customClipPath: "",
    clipRelative: false,
    clipArea: false,
    dragWithClip: true,
});
moveable.on("clipStart", e => {
    console.log(e);
}).on("clip", e => {
    if (e.clipType === "rect") {
        e.target.style.clip = e.clipStyle;
    } else {
        e.target.style.clipPath = e.clipStyle;
    }
}).on("clipEnd", e => {
    console.log(e);
});

defaultClipPath

Source:
If clippath is not set, the default value can be set. (defaultClipPath < style < customClipPath < dragging clipPath)
Example
import Moveable from "moveable";

const moveable = new Moveable(document.body, {
    clippable: true,
    defaultClipPath: "inset",
    customClipPath: "",
    clipRelative: false,
    clipArea: false,
    dragWithClip: true,
});
moveable.on("clipStart", e => {
    console.log(e);
}).on("clip", e => {
    if (e.clipType === "rect") {
        e.target.style.clip = e.clipStyle;
    } else {
        e.target.style.clipPath = e.clipStyle;
    }
}).on("clipEnd", e => {
    console.log(e);
});

customClipPath

Source:
You can force the custom clipPath. (defaultClipPath < style < customClipPath < dragging clipPath)
Example
import Moveable from "moveable";

const moveable = new Moveable(document.body, {
    clippable: true,
    defaultClipPath: "inset",
    customClipPath: "",
    clipRelative: false,
    clipArea: false,
    dragWithClip: true,
});
moveable.on("clipStart", e => {
    console.log(e);
}).on("clip", e => {
    if (e.clipType === "rect") {
        e.target.style.clip = e.clipStyle;
    } else {
        e.target.style.clipPath = e.clipStyle;
    }
}).on("clipEnd", e => {
    console.log(e);
});

clipVerticalGuidelines

Source:
Default Value:
  • 0
Add clip guidelines in the vertical direction.
Example
import Moveable from "moveable";

const moveable = new Moveable(document.body, {
    clippable: true,
    defaultClipPath: "inset",
    customClipPath: "",
    clipRelative: false,
    clipArea: false,
    dragWithClip: true,
    clipVerticalGuidelines: [0, 100, 200],
    clipHorizontalGuidelines: [0, 100, 200],
    clipSnapThreshold: 5,
});

clipTargetBounds

Source:
Default Value:
  • false
Whether the clip is bound to the target.
Example
import Moveable from "moveable";

const moveable = new Moveable(document.body, {
    clippable: true,
    defaultClipPath: "inset",
    customClipPath: "",
    clipRelative: false,
    clipArea: false,
    dragWithClip: true,
    clipTargetBounds: true,
});
moveable.on("clipStart", e => {
    console.log(e);
}).on("clip", e => {
    if (e.clipType === "rect") {
        e.target.style.clip = e.clipStyle;
    } else {
        e.target.style.clipPath = e.clipStyle;
    }
}).on("clipEnd", e => {
    console.log(e);
});

clipSnapThreshold

Source:
Default Value:
  • 5
istance value that can snap to clip guidelines.
Example
import Moveable from "moveable";

const moveable = new Moveable(document.body, {
    clippable: true,
    defaultClipPath: "inset",
    customClipPath: "",
    clipRelative: false,
    clipArea: false,
    dragWithClip: true,
    clipVerticalGuidelines: [0, 100, 200],
    clipHorizontalGuidelines: [0, 100, 200],
    clipSnapThreshold: 5,
});

clipRelative

Source:
% Can be used instead of the absolute px (`rect` not possible) (default: false)
Example
import Moveable from "moveable";

const moveable = new Moveable(document.body, {
    clippable: true,
    defaultClipPath: "inset",
    customClipPath: "",
    clipRelative: false,
    clipArea: false,
    dragWithClip: true,
});
moveable.on("clipStart", e => {
    console.log(e);
}).on("clip", e => {
    if (e.clipType === "rect") {
        e.target.style.clip = e.clipStyle;
    } else {
        e.target.style.clipPath = e.clipStyle;
    }
}).on("clipEnd", e => {
    console.log(e);
});

clippable

Source:
Whether to clip the target. (default: false)
Example
import Moveable from "moveable";

const moveable = new Moveable(document.body, {
    clippable: true,
    defaultClipPath: "inset",
    customClipPath: "",
    clipRelative: false,
    clipArea: false,
    dragWithClip: true,
});
moveable.on("clipStart", e => {
    console.log(e);
}).on("clip", e => {
    if (e.clipType === "rect") {
        e.target.style.clip = e.clipStyle;
    } else {
        e.target.style.clipPath = e.clipStyle;
    }
}).on("clipEnd", e => {
    console.log(e);
});

clipHorizontalGuidelines

Source:
Default Value:
  • []
Add clip guidelines in the horizontal direction.
Example
import Moveable from "moveable";

const moveable = new Moveable(document.body, {
    clippable: true,
    defaultClipPath: "inset",
    customClipPath: "",
    clipRelative: false,
    clipArea: false,
    dragWithClip: true,
    clipVerticalGuidelines: [0, 100, 200],
    clipHorizontalGuidelines: [0, 100, 200],
    clipSnapThreshold: 5,
});

clipArea

Source:
Default Value:
  • false
You can drag the clip by setting clipArea.
Example
import Moveable from "moveable";

const moveable = new Moveable(document.body, {
    clippable: true,
    defaultClipPath: "inset",
    customClipPath: "",
    clipRelative: false,
    clipArea: false,
    dragWithClip: true,
});
moveable.on("clipStart", e => {
    console.log(e);
}).on("clip", e => {
    if (e.clipType === "rect") {
        e.target.style.clip = e.clipStyle;
    } else {
        e.target.style.clipPath = e.clipStyle;
    }
}).on("clipEnd", e => {
    console.log(e);
});

Type Definitions

ClippableOptions

Source:
Properties:
clippable optional
Default Value: false
clippable?: boolean | ClippableOptions
Whether to clip the target.
keepRatio optional
Default Value: false
keepRatio?: boolean
Whether to keep the ratio of size if your clipPath is 'inset', 'rect', 'ellipse' type
customClipPath optional
customClipPath?: string
You can force the custom clipPath. (defaultClipPath < style < customClipPath < dragging clipPath)
defaultClipPath optional
defaultClipPath?: string
If clippath is not set, the default value can be set. (defaultClipPath < style < customClipPath < dragging clipPath)
clipRelative optional
Default Value: false
clipRelative?: boolean
% Can be used instead of the absolute px (`rect` not possible)
dragWithClip optional
Default Value: true
dragWithClip?: boolean
When dragging the target, the clip also moves.
clipArea optional
Default Value: false
clipArea?: boolean
You can drag the clip by setting clipArea.
clipTargetBounds optional
Default Value: false
clipTargetBounds?: boolean
Whether the clip is bound to the target.
clipVerticalGuidelines optional
Default Value: []
clipVerticalGuidelines?: Array<string | number>
Add clip guidelines in the vertical direction.
clipHorizontalGuidelines optional
Default Value: []
clipHorizontalGuidelines?: Array<string | number>
Add clip guidelines in the horizontal direction.
clipSnapThreshold optional
Default Value: 5
clipSnapThreshold?: number
Distance value that can snap to clip guidelines.
Type:
  • TSInterface

OnClip

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
clipType
clipType: "polygon" | "circle" | "ellipse" | "inset" | "rect"
The clip type.
clipEventType
clipEventType: "added" | "changed" | "removed"
The clip event type.
poses
poses: number[][]
The control positions
distX
distX: number
x position of the distance the control has moved
distY
distY: number
y position of the distance the control has moved
clipStyle
clipStyle: string
CSS style of changed clip
clipStyles
clipStyles: string[]
Splited CSS styles of changed clip
Type:
  • TSInterface

OnClipEnd

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

OnClipStart

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
clipType
clipType: "polygon" | "circle" | "ellipse" | "inset" | "rect"
The clip type.
poses
poses: number[][]
The control positions
clipStyle
clipStyle: string
CSS style of changed clip
Type:
  • TSInterface

Events

clip

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

const moveable = new Moveable(document.body, {
    clippable: true,
    defaultClipPath: "inset",
    customClipPath: "",
    clipRelative: false,
    clipArea: false,
    dragWithClip: true,
});
moveable.on("clipStart", e => {
    console.log(e);
}).on("clip", e => {
    if (e.clipType === "rect") {
        e.target.style.clip = e.clipStyle;
    } else {
        e.target.style.clipPath = e.clipStyle;
    }
}).on("clipEnd", e => {
    console.log(e);
});

clipEnd

Source:
When drag end the clip area or controls, the `clipEnd` event is called.
Type Description
Moveable.Clippable.OnClipEnd Parameters for the `clipEnd` event
Example
import Moveable from "moveable";

const moveable = new Moveable(document.body, {
    clippable: true,
    defaultClipPath: "inset",
    customClipPath: "",
    clipRelative: false,
    clipArea: false,
    dragWithClip: true,
});
moveable.on("clipStart", e => {
    console.log(e);
}).on("clip", e => {
    if (e.clipType === "rect") {
        e.target.style.clip = e.clipStyle;
    } else {
        e.target.style.clipPath = e.clipStyle;
    }
}).on("clipEnd", e => {
    console.log(e);
});

clipStart

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

const moveable = new Moveable(document.body, {
    clippable: true,
    defaultClipPath: "inset",
    customClipPath: "",
    clipRelative: false,
    clipArea: false,
    dragWithClip: true,
});
moveable.on("clipStart", e => {
    console.log(e);
}).on("clip", e => {
    if (e.clipType === "rect") {
        e.target.style.clip = e.clipStyle;
    } else {
        e.target.style.clipPath = e.clipStyle;
    }
}).on("clipEnd", e => {
    console.log(e);
});