connect-examples

jsPlumb.connect Examples

This section provides various examples of how to use the programmatic API to establish Connections.

The basic syntax of a call is that you execute ‘connect’, providing a source and a target, and optionally a paintStyle and preferences for where you want the plumbing to be anchored on each element, as well as the type of connector to use.

• Connect window1 to window2 with the default settings:

jsPlumb.connect({source:"window1", target:"window2"});

• Connect window1 to window2 with a 15 pixel wide yellow Connector, and a slightly brighter endpoint (remember the default Endpoint is a Dot):

jsPlumb.connect({      source:'window1',      target:'window2',      paintStyle:{lineWidth:15,strokeStyle:'rgb(243,230,18)'},      endpointStyle:{fillStyle:'rgb(243,229,0)'}});

• Connect window1 to window2 with a 15 pixel wide yellow Connector, and a slightly brighter endpoint:

jsPlumb.connect({      source:'window1',      target:'window2',      paintStyle:{lineWidth:15,strokeStyle:'rgb(243,230,18)'},      endpointStyle:{fillStyle:'rgb(243,229,0)'}});

• Connect window3 to ‘window4’ with a 10 pixel wide, semi opaque blue Connector, anchored to the left middle of window3, and the right middle of window4, with a Rectangle endpoint of width 10 and height 8:

jsPlumb.connect({      source:'window3',      target:'window4',      paintStyle:{ lineWidth:10, strokeStyle:'rgba(0, 0, 200, 0.5)' },      anchors:["Right", "Left"],      endpoint:[ "Rectangle", { width:10, height:8 } ]});

• Connect window2 to window3 with a default Connector from the top center of window2 to the bottom center of window3, and rectangular endpoints:

jsPlumb.connect({      source:'window2',      target:'window3',      paintStyle:{lineWidth:8, strokeStyle:'rgb(189,11,11    )'},      anchors:["Bottom", "Top"],      endpoint:"Rectangle"});

• Connect window1 to window2 with a 15 px wide yellow Bezier. Endpoints are a slightly lighter shade of yellow.

jsPlumb.connect({      source:'window1',      target:'window2',      anchors:["Bottom", [0.75,0,0,-1]],      paintStyle:{lineWidth:15,strokeStyle:'rgb(243,230,18)'},      endpointStyle:{fillStyle:'rgb(243,229,0)'}});

• Connect window3 to window4 with a 10px wide blue-ish half transparent Bezier. Put Endpoints underneath the element they attach to. The Endpoints have a radial gradient. Both ways of specifying gradient positioning are shown here.

  var w34Stroke = 'rgba(50, 50, 200, 1)';var w34HlStroke = 'rgba(180, 180, 200, 1)';jsPlumb.connect( {  source:'window3',  target:'window4',  paintStyle:{lineWidth:10, strokeStyle:w34Stroke},  anchors:["RightMiddle", "LeftMiddle"],  endpointStyle:{ gradient : {stops:[[ 0, w34Stroke ], [ 1, w34HlStroke ]], offset:17.5, innerRadius:15 }, radius:35},  //endpointStyle:{ gradient : {stops:[[0, w34Stroke], [1, w34HlStroke]], offset:'78%', innerRadius:'73%'}, radius:35 }});

• Connect window2 to window3 with an 8px red Bezier and default rectangular endpoints. See also how the first Anchor is specified here - this is how you create Anchors in locations jsPlumb does not offer shortcuts for. The Endpoints in this example have linear gradients applied.

  var w23Stroke = 'rgb(189,11,11)';jsPlumb.connect({    source:'window2',    target:'window3',    paintStyle:{lineWidth:8,strokeStyle:w23Stroke},    anchors:[[0.3,1,0,1], "Top"],    endpoint:"Rectangle",    endpointStyles:[{ gradient : {stops:[[0, w23Stroke], [1, '#558822']] }},            { gradient : {stops:[[0, w23Stroke], [1, '#882255']] }}]});

• Connect window5 to window6 from center to center, 5px wide line that is green and half transparent. the Endpoints are 125px in radius and spill out from underneath their elements.

jsPlumb.connect({      source:'window5',      target:'window6',      anchors:["Center", "Center"],      paintStyle:{lineWidth:5,strokeStyle:'rgba(0,255,0,0.5)'},      endpointStyle:{radius:125}});

• Connect window4 to window5 from bottom right to top left, with a 7px straight line purple Connector, and an image as the endpoint,
  placed on top of the element it is connected to.

jsPlumb.connect({    source:"window4",    target:"window5",    anchors:[ "BottomRight","TopLeft" ],    paintStyle:{ lineWidth:7, strokeStyle:"rgb(131,8,135)" },    endpoint:[ "Image", { src:"http://morrisonpitt.com/jsPlumb/img/endpointTest1.png" } ],    connector:"Straight"});

• Connect window5 to window6 between their center points with a semi-opaque connector, and 125px endpoints:

jsPlumb.connect({      source:"window5",      target:"window6",      anchors:[ "Center", "Center" ],      paintStyle:{ lineWidth:5, strokeStyle:"rgba(0,255,0,0.5)" },      endpointStyle:{ radius:125 }});

• Connect window7 to window8 with a 10 pixel wide blue Connector, anchored on the top left of window7 and the bottom right of window8:

jsPlumb.connect({      source:"window7",      target:"window8",      paintStyle:{ lineWidth:10, strokeStyle:"blue" },      anchors:[ "TopLeft", "BottomRight" ]});

• Connect the bottom right corner of window4 to the top left corner of window5, with rectangular Endpoints of size 40x40 and a hover color of light blue:

jsPlumb.connect({      source:"window4",      target:"window5",      anchors:["BottomRight","TopLeft"],      paintStyle:{lineWidth:7,strokeStyle:'rgb(131,8,135)'},      hoverPaintStyle:{ strokeStyle:"rgb(0, 0, 135)" },      endpointStyle:{ width:40, height:40 },      endpoint:"Rectangle",      connector:"Straight"});

• Connect window1 to window2 with the default paint settings but provide some drag options (which are passed through to the underlying library’s draggable call):

jsPlumb.connect({      source:'window1',       target:'window2',      dragOptions:{        cursor:'crosshair'      }});