Thursday, January 8, 2015

Creating a basic drawing toolbox using jsPlumb part 2

As we looked into drag and drop feature, cloning elements in the previous post creating-basic-drawing-toolbox1     , in this post we will look into adding event handlers for any element added to a canvas. Here the main concern would be on how to draw connections between elements which is a basic feature requirement in a drawing toolbox.

Below are the steps to be followed in this post.

1. Adding endpoints
2. Adding anchors
3. Adding connectors
4 Define source and target
5. How to get connection details

Please note that jsPlumb is used once again same as the previous post.

Connections can be added  programmatically (static) or dynamically. jsPlumb provides following basic method to create a connection between two elements.

jsPlumb.connect( { source: "node1", target:"node2"});

This line of code is quite simple, where we tell jsPlumb to draw a connection between node1 and node2, where the connection source would be node1 and connection target is node2.  But in a real world scenario, we would need to allow the user to draw connections between elements as they wish. Also you would want to customize the type of connection ( flow chart arrows, curved arrows etc) , connecting endpoints ,arrow labels and so on. jsPlumb supports all these modifications which can be easily defined. First we will look into how we can define connector endpoints to an element.

1.Adding endpoints

The basic endpoint types provided by jsPlumb would be as follows.

  • Dot
  • Rectangle
  • Image
Again you can customize the look and feel of the endpoint by providing additional attributes to it. For example, following code displays on how to define a dot endpoint that has a radius of 4.

 endpoint: ["Dot", {
                radius: 4

2. Adding anchors

You can define where you would want the endpoint to reside in your element. Following are some basic anchor types provided by jsPlumb.

  • Top
  • Bottom
  • Left
  • Right
Other than these,users can always define dynamic endpoints giving their x,y coordinate locations. For example following code displays a anchor which has a dynamically set location on the left side of the element.

 anchors: [
                [0.2, 0.5], "Left"

3. Adding connectors

jsPlumb includes some predefined connector types for different diagrams. Two mainly used connector types as below.

  • Straight : Draws a line  between elements
  • Flowchart :  Draws a line that is standard to flow charts.
You can customize this connector with different css classes and attributes.Following code segment displays a flowchart connector definition with additional styling properties included.

connector: ["Flowchart"],
            connectorStyle: {
                strokeStyle: "#5c96bc",
                lineWidth: 1,
                outlineColor: "transparent",
                outlineWidth: 4

4.  Define source and target

As mentioned before , there might be scenarios where you need to allow the user to decide which element would be the source of the connection and end the connection at a different element as he wish. To support this, you can define a common variable as below, with all endpoint,anchor and connector types defined. Here you can include following lines(isSource:true, isTarget:true)  to say that any element can be a source or a target. Therefore jsPlumb would allow the user to draw connections between any element that he wish for.

Finally you can add the common variable as an endpoint to your elements. For example the following code segment will add an endpoint at the top of shape 'element' , and the user will be able to draw connections to/from any shape 'element' since both isSource and isTarget is set to true. Note that I have set maxConnections property to -1.This will enable the user to draw unlimited amount of connections between elements.

Following is a screenshot on how connections drawn will be displayed. The endpoints are displayed as black dots. 

5. How to get connection details

In an application you would want to save the diagrams that are drawn for future purposes. jsPlumb has made it easy to derive all the information of any connections that are drawn by using following code segments. There are different properties you can access about the connections that are drawn, such as endpoint details, anchor details etc. In following example I am extracting the source element id , target element id  and endpoint details of each connection . 

1 comment:

  1. How to add endpoints, anchors for newly dropped element, every time I drop into the specific container?