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 |