PathEditor

JointJS+ provides a PathEditor plugin that enables the ability to edit <path> elements via an editing overlay.

Installation

Access PathEditor via the ui namespace, and create an instance. A <path> SVGPathElement reference on the page is needed.

import { ui } from '@joint/plus';

new ui.PathEditor({
    pathElement: document.querySelector('path')
});

There is also a UMD version available

Include joint.ui.pathEditor.js and joint.ui.pathEditor.css in your HTML:

index.html

<link rel="stylesheet" type="text/css" href="joint.ui.pathEditor.css">
<script src="joint.ui.pathEditor.js"></script>

Access PathEditor through the joint.ui namespace:

index.js

new joint.ui.PathEditor({
    pathElement: document.querySelector('path')
});

How does PathEditor work?

PathEditor provides the possibility to edit <path> elements via an editing overlay. Users can interact with the path's segments, anchor points and curve control points.

Create a PathEditor

The following example creates an instance of path editor. Users can interact move segments and control points. Double-click to create or remove an anchor point, or lock a control point.

Open Sandbox

PathEditor interaction

Users can interact with PathEditor objects by clicking/touching editor overlay elements:

mousedown / touchstart

mousedown .anchor-point / touchstart .anchor-point

Call onAnchorPointPointerDown(event), which calls startMoving() followed by delegateDocumentEvents() by default.

mousedown .control-point / touchstart .control-point

Calls onControlPointPointerDown(event), which calls startMoving() followed by delegateDocumentEvents() by default.

mousedown .segment-path / touchstart .segment-path

Calls onSegmentPathPointerDown(event), which calls startMoving() followed by delegateDocumentEvents() by default.

Double-clicking editor overlay elements triggers additional actions:

dblclick

dblclick .anchor-point

Calls onAnchorPointDoubleClick(event), which calls removeAnchorPoint() by default.

dblclick .control-point

Calls onControlPointDoubleClick(event), which calls lockControlPoint() by default.

dblclick .segment-path

Calls onSegmentPathDoubleClick(event), which calls createAnchorPoint() by default.

Respond to user interaction events

Various methods are provided to respond to user interaction events (e.g. click, touch, dblclick). Some of them are bound with user interactions by default, but others are not. Those may be called upon by delegated events from your application. For example:

pathEditor.delegate('contextmenu', '.segment-path', function(event) {
    event.stopPropagation();
    event.preventDefault();

    this.convertSegmentPath(event);
}.bind(pathEditor));

Reacting to PathEditor events

You can react to path editor events by using the on() method:

pathEditor.on({
    'path:control-point:select': console.log('started moving control point'),
    'path:control-point:adjusting': console.log('moving control point'),
    'path:control-point:adjust': console.log('stopped moving control point')
});

It is also possible to specify a custom context for the on() method. This is useful when you need to handle user interaction on your path editor from within another mvc object, for instance:

pathEditor.on({
    'path:edit': this.onPathEdit.bind(this),
}, this);