HTMLGraph logo HTMLGraph

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.

Draggable Edges

The enableUserDraggableEdges method accepts optional configuration.

Configuration Parameters

NameTypeDescriptionRequiredDefault
connectionPreprocessor(request: AddEdgeRequest) => AddEdgeRequest | nullApplies modification to the edge about to be reattached. null means that connection is disallowed.no(request) => request
mouseDownEventVerifier(event) => booleanFunction to verify if mouse event should initiate connection dragging processno(event) => event.button === 0 && event.ctrlKey
mouseUpEventVerifier(event) => booleanFunction to verify if mouse event should reattach connectionno(event) => event.button === 0
draggingEdgeResolver(portId) => anyResolves edge ID which will be dragged based on provided grabbed port ID. null means do not initiate dragging process.noLatest adjacent edge
draggingEdgeShapeEdgeShapeConfigThe shape of a dragging edgenoSame as the edge being dragged
eventsEventsConfigHandlers for available eventsno{}

Events Configuration

NameTypeDescriptionRequiredDefault
onAfterEdgeReattached(edgeId) => voidFunction called after an edge has been reattachedno() => void
onEdgeReattachInterrupted(edge: DraggingEdgePayload) => voidFunction called when edge reattach is interrupted in the processno() => void
onEdgeReattachPrevented(edge: DraggingEdgePayload) => voidFunction called when an attempt to reattach edge is preventedno() => void