Sunday, December 14, 2014

Creating a basic drawing toolbox using jsPlumb Part 1

jsPlumb enable users to include visual interactions (drag & drop etc) in their web pages. It uses SVG in all modern browsers and VML on IE browser. In this post, we will go through following steps and create a basic drawing toolbox that supports drag and drop functionality.

1. Required Imports
2. Creating the html
3. How jsPlumb comes in handy
4. Implemented drawing toolbox

Required Imports

jsPlumb does not require any additional imports if you are to include vanilla jsplumb as below.
<script src="PATH_TO/dom.jsPlumb-1.7.2-min.js "></script>
But, if you need any jquery specific functionality you can include jquery import as well.
In the example implementation that I'm constructing , I will be including jsplumb as well as jquery with it. Please note that jquery and jquery ui should be of compatible versions.

<script src="<PATH>/jquery.min.js"></script>
<script src="<PATH>/jquery-ui.min.js"></script>
<script src="<PATH>/jquery.jsPlumb-1.7.2-min.js "></script>

Creating the html

If a container is not specified, jsPlumb will add all the elements the body of the page. This can be confusing later when determining the parent element if there are multiple elements added. Therefore, we will first set the container for jsPlumb, so that all the elements will be added to it.  So first , we will create a div tag which will act as the canvas for jsPlumb and another div which will hold the toolbox for our drawing tool.

In above, chevron-toolbox div is having a textarea that would hold the toolbox icons in it. dropArea div tag will act as the canvas. You can add your styling properties as below to add your toolbox icons. You need to make sure that your container position is set to relative because jsPlumb adds its elements using position absolute.

How jsPlumb comes in handy

Also inorder to use jsPlumb, we need to initialize it using .ready function. In below code segment I will initialize jsplumb and set the initial container (dropArea div) for elements.

Next step is to create a clone of the tool icon when the user selects that option. In order to achieve this jquery clone ui method is used. But jsPlumb does not support this juqery cloneUI method therefore, once the icon is dragged and dropped on the canvas, the clone UI class will be removed from the element.

Here, jquery draggable and droppable functions are used. Under draggable we specify the helper 'clone' class to be used. Under droppable function we declare the element type that needs to be accepted under accept: tag and containment tag will define the canvas the element is dropped into. This containment tag will restrict the movement of the dropped element only to canvas area. the drop: function will include the conditions that should occur once the element is dropped to the canvas.

Since jsPlumb does not support jquery clone helper class, it is removed in first two steps and next we add the class chevron to the dropped element. This will give all .css properties (icon image etc) to dropped element. Finally the dropped element will be attached to its jsPlumb container so that further jsPlumb functionalities can be given to it.

As a basic example, we will make the element draggable within the canvas area using jsPlumb. First of all we will bind the click event to the element as below. This can be done after the element id appended to its container.;

Now under this divClicked function, we can call our draggable method as shown below.

In this code snippet you can see how defining a container for jsPlumb becomes handy. Here when we define containment:'parent' it will make sure that the element can only be dragged within the container dropArea.  inside the stop function we can make any required changes to the dragged element.

Implemented  drawing toolbox

Here are few screenshots on how the drawing tool will appear ,and how you can drag and drop tool box icons.

Default view of the drawing tool
Multiple elements dragged and dropped to the canvas

In the next set of tutorials, we will see how to add dynamic connections/links between these elements using jsPlumb.