Skip to main content

Configuring Defaults

The easiest way to set a look and feel for your plumbing is to override the defaults that jsPlumb uses. If you do not do this you are forced to provide your overridden values on every call. Every argument to the connect and addEndpoint methods has an associated default value in jsPlumb.

The defaults that ship with jsPlumb are stored in an instance of JsPlumbDefaults. Valid entries are:

{    endpoint?: EndpointSpec    endpoints?: [ EndpointSpec, EndpointSpec ]    anchor?: AnchorSpec    anchors?: [ AnchorSpec, AnchorSpec ]    paintStyle?: PaintStyle    hoverPaintStyle?: PaintStyle
    endpointStyle?: EndpointStyle    endpointHoverStyle?: EndpointStyle    endpointStyles?: [ EndpointStyle, EndpointStyle ]    endpointHoverStyles?: [ EndpointStyle, EndpointStyle ],
    connectionsDetachable?: boolean    reattachConnections?: boolean
    endpointOverlays?: Array<OverlaySpec>    connectionOverlays?: Array<OverlaySpec>
    listStyle?: ListSpec        connector?:ConnectorSpec    scope?:string

Their initial values are:

{    anchor: AnchorLocations.Bottom,    anchors: [ null, null ],    connectionsDetachable: true,        endpoint: DotEndpoint.type,    endpointOverlays: [ ],    endpoints: [ null, null ],    endpointStyle: { fill: "#456" },    endpointStyles: [ null, null ],    endpointHoverStyle: null,    endpointHoverStyles: [ null, null ],    hoverPaintStyle: null,    listStyle: { },    maxConnections: 1,    paintStyle: { strokeWidth: 2, stroke: "#456" },    reattachConnections: false,    scope: "jsplumb_defaultscope",    allowNestedGroups:true}

You can specify either or both (or neither) of endpointStyle and endpointStyles. This allows you to specify a different style for each endpoint in a connection. endpoint and endpoints use the same concept. jsPlumb will look first in the individual endpoint/endpointStyle arrays, and then fall back to the single default version.

You can override these defaults either by providing them as constructor values when you create an instance of jsPlumb:

const instance = jsPlumbBrowserUI.newInstance({    maxConnections:-1,    endpoints : [ {type:"Dot", options:{ radius:7 } }, { type:"Dot", options:{ radius:11 } } ],    reattachConnections:true})
instance.importDefaults({  maxConnections:-1,  endpoints : [ {type:"Dot", options:{ radius:7 } }, { type:"Dot", options:{ radius:11 } } ],  reattachConnections:true});
  • there is no limit to the number of connections each endpoint supports
  • the source endpoint is a dot of radius 7; the target endpoint is a dot of radius 11
  • connections that are dragged off endpoints with the mouse and then dropped in whitespace should be reattached

Explanation of each Default setting#

  • anchor this will be used as the anchor for any endpoint for which no anchor is declared - this applies to both the source and/or target of any connection. The default is AnchorLocations.Bottom.

  • anchors - Source and target anchors for connections. Values in this array will override the anchor default. The default is for this array to be [null, null].

  • connector The connector to use for any connection where the connector is not otherwise specified. Defaults to StraightConnector.type.

  • connectionsDetachable Whether or not connections are detachable by default using the mouse. Defaults to true.

  • connectionOverlays - Overlays to attach to every connection (these will be merged with any other overlays that are supplied for a given connection). Defaults to [].

  • endpoint - This is used whenever an endpoint is added or otherwise created and jsPlumb has not been given any explicit endpoint definition. Its default value is DotEndpoint.type.

  • endpoints - Source and target endpoint definitions. Defaults to [null, null]. Values in this array will override the endpoint default.

  • endpointOverlays - Overlays to attach to every endpoint. Defaults to []. Overlays in this list will be merged with any other overlays that are supplied for a given endpoint.

  • endpointStyle - Paint style for an endpoint. Defaults to { fill: "#456" }.

  • endpointStyles - Paint styles for the source and target endpoints in a connection. Defaults to [null, null]

  • endpointHoverStyle - Paint style for an endpoint in hover state. Defaults to null.

  • endpointHoverStyles - Paint style for source and target endpoints in a connection in hover state. Defaults to [null, null].

  • hoverPaintStyle - Paint style for a connection in hover state. Defaults to null.

  • maxConnections - The maximum number of connections any given endpoint supports. Defaults to 1. A value of -1 means no limit.

  • paintStyle - The paint style for a connector. Defaults to { strokeWidth: 2, stroke: "#456" }.

  • reattachConnections - Whether or not to reattach connections that were detached using the mouse and then neither reconnected to their original endpoint nor connected to some other endpoint. Defaults to false.

  • scope - The default scope of endpoints and connections. Scope provides a rudimentary control over which endpoints can be connected to which other endpoints.