Clippable

Moveable. Clippable

Members

clipArea

Source:
You can drag the clip by setting clipArea. (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:
Add clip guidelines in the horizontal direction. (default: [])
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,
});

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

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

clipSnapThreshold

Source:
istance value that can snap to clip guidelines. (default: 5)
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:
Whether the clip is bound to 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,
    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);
});

clipVerticalGuidelines

Source:
Add clip guidelines in the vertical direction. (default: [])
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,
});

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

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

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

Type Definitions

ClippableOptions

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

OnClip

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

OnClipEnd

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

OnClipStart

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
clipType "polygon" | "circle" | "ellipse" | "inset" | "rect" The clip type.
poses number[][] The control positions
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);
});