Skip to main content

Interceptors

Interceptors are events that can be used to cancel some proposed activity, and they are bound on an instance of the Toolkit, by supplying specific functions in the Toolkit constructor options. The Toolkit currently supports five interceptors.

beforeConnect​

A function to run before an edge with the given data can be established between the given source and target. Returning false from this method aborts the connection. Note that this method fires regardless of the source of the new edge, meaning it will be called when loading data programmatically.

Method signature​

beforeConnect(source: Vertex, target: Vertex): any

Parameters​

  • source The source vertex for the new edge
  • target The target vertex for the new edge

beforeMoveConnection​

A function to run before an edge of the given type is relocated from its current source or target to a new source or target. Returning false from this method will abort the move.

Method signature​

beforeMoveConnection(source: Vertex, target: Vertex, edge: Edge): any

Parameters​

  • source Candidate source. May be the edge's current source, or may be a new source.
  • target Candidate target. May be the edge's current target, or may be a new target.
  • edge The edge that is being moved.

The parameters source and target reflect the source and target of the edge if the move were to be accepted. So if, for example, your user drags a connection by its target and drops it elsewhere, target will be the drop target, not the edge's current target, but source will be the edge's current source. You can access the current source/target via the source and target properties of edge.

beforeStartConnect​

A function to run before an edge of the given type is dragged from the given source (ie. before the mouse starts moving). Returning false from this method will abort the connection.

Method signature​

beforeStartConnect(source: Vertex, type: string): any

Parameters​

  • source The vertex that is the source for the new edge
  • type The computed type for this new edge.

beforeDetach​

A function to run before the given edge is detached from the given source vertex. If this method returns false, the detach will be aborted.

Method signature​

beforeDetach(source: Vertex, target: Vertex, edge: Edge, isDiscard?: boolean): any

Parameters​

  • source The source vertex for the edge that is to be detached.
  • target The candidate target for the edge - may be null, if the edge is being discarded
  • edge The edge that is being detached.
  • isDiscard True if the edge is not now connected to a target.

beforeStartDetach​

Method signature​

beforeStartDetach(source: Vertex, edge: Edge): any

A function to run before the given edge is detached from the given source vertex. If this method returns false, the detach will be aborted. The difference between this and beforeDetach is that this method is fired as soon as a user tries to detach an edge from an endpoint in the UI, whereas beforeDetach allows a user to detach the edge in the UI.

Parameters​

  • source The source vertex for the edge that the user has started to detach
  • edge The edge that the user has started to detach

Example​

In this example we provide a beforeStartConnect and beforeDetach interceptor to an instance of the Toolkit. The beforeStartConnect interceptor prevents the user from dragging connections from any vertex whose ID is not an even number. The beforeDetach interceptor reattaches detached connections whose source ID is not an event number 

import { newInstance } from "@jsplumbtoolkit/browser-ui-vanilla"

const toolkit = newInstance({
    beforeStartConnect:(source, type) => {
        // only allow connections from nodes whose 
        // ID is an even number
        return parseInt(source.id, 10) % 2 === 0
    },
    beforeDetach:(source, target, edge, isDiscard) => {
        // only allow connections to be detached whose 
        // source ID is an even number
        return parseInt(edge.source.id, 10) % 2 === 0
    }
})

Interceptors