Connections

In jsPlumb the connections between items are made up of different components. This tutorials shows you, which properties can be set on connections and how you can style them.  The following screenshot gives you an overview, what components exists for jsPlumb connections.

jsPlumb Connector Components

All of these are optional, except source and target. If you do not set a component, they are initialized with default-values. See the followinge example, which sets all components explicitly.

Example

jsPlumb.ready(function() {
jsPlumb.connect({
	connector: ["Straight"],
	source:"item_left",
	target:"item_right",
	anchor: ["Left", "Right"],
	endpoint:"Dot"
	});
});

Play with example »

Default settings for connections

Most of the times your connections should all look the same on your diagrams. jsPlumb has the possibility to set the style once and apply it on all connections. Simply define a common object and pass it to the connect-method. The following example shows how to do it:

Example

var common = {
	connector: ["Straight"],
	anchor: ["Left", "Right"],
	endpoint:"Dot"
};

jsPlumb.connect({
	source:"item_left",
	target:"item_right"
}, common);

Play with example »

Styling connections

To change the styling of connections, you can pass the paintStyle object to the connect-method. You can set the following parameters on the connector-paintStyle:

  • stroke (color)
  • strokeWidth
  • outlineWidth
  • outlineStroke (color)
  • dashstyle

Example

jsPlumb.connect({
	source:"item_left",
	target:"item_right",
	paintStyle:{ stroke:"lightgray", strokeWidth:3,  },
	endpointStyle:{ fill:"lightgray", outlineStroke:"darkgray", outlineWidth:2 }
}, common);

Play with example »

Adding arrows to connections

In jsPlumb arrows can be added with overlays, meaning they are added above the connections. Beside arrows you could also add labels, diamonds and any custom dom-element! The location-parameter defines, where on the connection the overlay is drawn. 0 is at the beginning, 0.5 in the middle and 1 on the end. See the following example, drawing an arrow at the end of the connection:

Example

jsPlumb.connect({
	source:"item_left",
	target:"item_right",
	overlays:[ ["Arrow" , { width:12, length:12, location:0.67 }] ]
	}, common);

Play with example »

In the next part we’ll cover how the user can create connections per drag and drop!