Draggable Edges
In addition to connectable ports, it is useful to provide functionality for modifying existing edges.
To enable draggable edges, call the enableUserDraggableEdges method on a CanvasBuilder instance:
const element = document.getElementById('canvas');
const canvas = new CanvasBuilder(element)
.enableUserDraggableEdges()
.build();
It is crucial for the port to have a “grabable” area large enough to actually be grabbed by the user, as shown in the example below.
The enableUserDraggableEdges method accepts optional configuration.
Configuration Parameters
| Name | Type | Description | Required | Default |
|---|---|---|---|---|
connectionPreprocessor | (request: AddEdgeRequest) => AddEdgeRequest | null | Applies modification to the edge about to be reattached. null means that connection is disallowed. | no | (request) => request |
mouseDownEventVerifier | (event) => boolean | Function to verify if mouse event should initiate connection dragging process | no | (event) => event.button === 0 && event.ctrlKey |
mouseUpEventVerifier | (event) => boolean | Function to verify if mouse event should reattach connection | no | (event) => event.button === 0 |
draggingEdgeResolver | (portId) => any | Resolves edge ID which will be dragged based on provided grabbed port ID. null means do not initiate dragging process. | no | Latest adjacent edge |
draggingEdgeShape | EdgeShapeConfig | The shape of a dragging edge | no | Same as the edge being dragged |
events | EventsConfig | Handlers for available events | no | {} |
Events Configuration
| Name | Type | Description | Required | Default |
|---|---|---|---|---|
onAfterEdgeReattached | (edgeId) => void | Function called after an edge has been reattached | no | () => void |
onEdgeReattachInterrupted | (edge: DraggingEdgePayload) => void | Function called when edge reattach is interrupted in the process | no | () => void |
onEdgeReattachPrevented | (edge: DraggingEdgePayload) => void | Function called when an attempt to reattach edge is prevented | no | () => void |