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:
<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:
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.
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);