PathDrawer

PathDrawer allows users to draw <path> elements.

Learn more about the PathDrawer plugin.

constructor

constructor(options: PathDrawer.Options);

The ui.PathDrawer constructor accepts several parameters:

target

[required] The drawing area. Any paths drawn by the user are appended to this <svg> element. They are not removed when the PathDrawer is removed.

pathAttributes

[optional] An object with CSS attributes of the new path. The default values are:

{
    'class': null,
    'fill': '#ffffff',
    'stroke': '#000000',
    'stroke-width': 1,
    'pointer-events': 'none'
}

If your pathAttributes object sets the 'class' attribute (e.g. to 'example-path'), you can access the path for further styling through the #example-canvas .example-path CSS selector.

startPointMarkup

[optional] The SVG markup of control point overlay elements. The default is '<circle r="5"/>'. (CSS styling should use the .joint-path-drawer .start-point CSS selector.)

snapRadius

[optional] If set to a number greater than zero, the endpoint of the current segment snaps to the x- and y-values of previously drawn segment endpoints. The number determines the distance for snapping.

enableCurves

[optional] true by default. If set to false, only straight paths can be drawn.

Methods

render()

pathDrawer.render(): this;

Renders the path drawer. Called automatically after object is instantiated.

remove()

pathDrawer.remove(): this;

Removes the path drawer.

Events

clear

Triggered when the path drawer is cleared.

path:create

Triggered when a new path is created. The handler is passed a reference to the svgPath SVGPathElement.

path:finish

Triggered when a path is finished in a valid manner. The handler is passed a reference to the svgPath SVGPathElement. The following specific events are triggered alongside this generic event:

path:close

Triggered when a path is finished by being reconnected with the start point. The handler is passed a reference to the svgPath SVGPathElement.

path:stop

Triggered when a path is finished by being stopped without reconnecting with the start point (e.g. due to a double click or a right click). The handler is passed a reference to the svgPath SVGPathElement.

path:abort

Triggered when a path is finished in an invalid manner (e.g. closed with only one anchor point). The handler is passed a reference to the svgPath SVGPathElement.

path:segment:add

Triggered when the user adds a new segment to the path segment list. The handler is passed a reference to the svgPath SVGPathElement. The following specific events are triggered alongside this generic event:

path:move-segment:add

Triggered when the user adds a moveto segment to the path segment list. The handler is passed a reference to the svgPath SVGPathElement.

path:line-segment:add

Triggered when the user adds a lineto segment to the path segment list. The handler is passed a reference to the svgPath SVGPathElement.

path:curve-segment:add

Triggered when the user adds a curveto segment to the path segment list. The handler is passed a reference to the svgPath SVGPathElement.

path:edit

Triggered when the user edits the path. The handler is passed a reference to the svgPath SVGPathElement. The following specific events are triggered alongside this generic event:

path:last-segment:adjust

Triggered when the user adjusts the last added segment. (This happens, for example, when the user specifies a control point after having added a curveto segment.) The handler is passed a reference to the svgPath SVGPathElement.

path:last-segment:replace-with-curve

Triggered when the user replaces the last added line segment with a curved segment. (This happens, for example, when the user begins to specify a control point after having added a lineto segment.) The handler is passed a reference to the svgPath SVGPathElement.

path:last-segment:remove

Triggered when the user removes last added segment. (This happens, for example, when the user stops drawing with a right-click). The handler is passed a reference to the svgPath SVGPathElement.

path:interact

Triggered when the user interacts with drawer overlay elements. The handler is passed a reference to the svgPath SVGPathElement. The following specific events are triggered alongside this generic event:

path:control:adjust

Triggered when the user adjusts a control path. (This happens when the user specifies a control for a curveto segment.) The handler is passed a reference to the svgPath SVGPathElement.

path:control:remove

Triggered when a control path is removed from the drawer interface. (This happens when the user is finished drawing a curve.) The handler is passed a reference to the svgPath SVGPathElement.

Types

Options

interface Options extends mvc.ViewOptions<undefined> {
    target: SVGSVGElement,
    pathAttributes?: attributes.NativeSVGAttributes,
    startPointMarkup?: string,
    snapRadius?: number,
    enableCurves?: boolean
}