Interactive Model creation using jsPlumb

We have been able to create simple connections between elements dropped o the canvas. Her below, we'll be looking at ways to create sub divisions of a single element so that each subdivision will be eligible to connect to another subdivision, either from its own element or from another element.

Elements and Classes:

 dropArea    :    Canvas where elements will be manipulated
connector   :    Subdivision of the element from which a connection will be
                       made
element      :    The toolbox from which an element will be dragged
pro            :     The class that replicated the elements style but not the
                       behavior. This will be dropped as a clone on the canvas
section       :     Subdivision of the element that indicated the subdivision
                       number

@NayantaraJeyaraj
Sample Model Created




 Code : 

<!doctype html>
<html>
<head>

    <script src="../lib/jquery.min.js"></script>
    <script src="https://code.jquery.com/jquery-1.10.2.js"></script>
    <script src="../lib/jquery-ui.min.js"></script>
    <script src="../lib/jquery.jsPlumb-1.4.1-all-min.js"></script>
    <script src="../lib/jquery.jsPlumb-1.6.4-min.js"></script>

    <style>

        @import url(http://fonts.googleapis.com/css?family=Montserrat);

        * {
            font-family: 'Montserrat', sans-serif;
        }
        #dropArea {
            position: relative;
            resize: both;
            margin-left: 180px;
            border: 1px solid #aaaaaa;
            width: 800px;
            height: 650px;
            overflow-x: scroll;
            overflow-y: scroll;
        }
        .title {
            padding: 10px;
            cursor: move;
        }
        .connector {
            font-size:10px;
            text-align: center;
            width: 100%;
            height: 20px;
            background-color: #ffffff;
            cursor: pointer;
        }
        .element {
            border: 1px solid gray;
            text-align: center;
            width: 170px;
            height: 75px;
            background-color: lightpink;
            position: absolute;
        }
        .pro {
            border: 1px solid gray;
            text-align: center;
            width: 170px;
            height: 75px;
            background-color:  lightpink;
            position: absolute;
        }
        .section {
            font-size: 12px;
            text-align: center;
            font-weight: 200;
            border: 1px solid black;
            background-color: #ddddff;
        }

    </style>

</head>

<body>

<div class="element" id="cId">
</div>
<div id="dropArea">
</div>

<script>

    jsPlumb.ready(function() {

        jsPlumb.Defaults.Container=$("#dropArea");
        jsPlumb.Defaults.PaintStyle = { strokeStyle:"palevioletred", lineWidth:2, 
        dashstyle: '3 3'};
        jsPlumb.Defaults.EndpointStyle = { radius:7, fillStyle:"palevioletred" };
        jsPlumb.importDefaults({Connector : [ "Bezier", { curviness:50 } ]});
        jsPlumb.setContainer($('#dropArea'));
        var i = 1;
        $(".element").draggable        ({
            helper : 'clone',
            cursor : 'pointer',
            tolerance : 'fit',
            revert : true
        });

        $("#dropArea").droppable        ({
            accept: '.element',
            containment: 'dropArea',

            drop: function (e, ui) {
                droppedElement = ui.helper.clone();
                ui.helper.remove();
                $(droppedElement).removeAttr("class");
                jsPlumb.repaint(ui.helper);

                var newAgent = $('<div>').attr('id', 'pro' + i).addClass('pro');
                newAgent.text('Element ' + i);
                $(droppedElement).draggable({containment: "dropArea"});
                $('#dropArea').append(newAgent);

                jsPlumb.draggable(newAgent, {
                    containment: 'parent'                });
                i++;
            }
        });

        $("#dropArea").on('click', '.pro', function (e) {
            i++;
            var newState = $('<div>').attr('id', 'state' + i).addClass('section').
            text('Section '+ (i-1));

            var title = $('<div>').addClass('title');
            var connect = $('<div>').addClass('connector').
            text('Click here to drag');

            newState.css({
                'top': e.pageY,
                'left': e.pageX            });

            newState.append(title);
            newState.append(connector);

            $(this).append(newState);

            jsPlumb.makeTarget(newState, {
                anchor: 'Continuous'            });

            jsPlumb.makeSource(connector, {
                anchor: 'Continuous'            });

            newState.dblclick(function (e) {
                jsPlumb.detachAllConnections($(this));
                $(this).remove();
                e.stopPropagation();
            });

        });
    });


</script>

</body>

</html>
Functionality:

In the droppable function we clone the element and and a text to it with its 
ID in order to keep track of the order of element addition onto the canvas.
Note that the dropped element is made draggable within the canvas in the 
jsPlum.draggable function that follows. 

Then we place an EventListener that is called when these dropped elements are clicked. What this Event Listener does is that it creates 2 more divisions,
one where the connection is dragged from/ dropped on, and the 2d division that indicates the ID of that particular subdivision. These divisions will be appended to the element created, on mouse click. 

Following this, source and the target of connections is specified. 


Finally, the element as a whole will be deleted when doubled clicked.


Comments

Post a Comment

Popular posts from this blog

AngularJS vs ReactJS

Image
Today I just came across an interesting question and thought of creating this. At many occasions, developers try to render ReactJS as the best over AngularJS. But, according to my personal opinion, this is purely opinionated and also strongly depends on the type of the project in context. First of all, here's a very brief definition of what AngularJS & ReactJS according to their documentations. AngularJS AngularJS is a structural framework for dynamic web apps. It lets you use HTML as your template language and lets you extend HTML's syntax to express your application's components clearly and succinctly. Angular's data binding and dependency injection eliminate much of the code you would otherwise have to write." Here's a perfect example to try out this. ReactJS   React.js is a JavaScript library for building user interfaces. (Famously used by Facebook) The comparison between the two has been jotted out in the following table
Read more

Creating connections between Elements in jsPlumb

In my previous posts we've gone through creating a toolbox and canvas from which elements can be dragged from and dropped onto. Then we took a look at eliminating the replication of elements whenever a dropped clone was dragged within the canvas. So now let's move onto creating basic connections between these dropped elements using jsPlumb and jQuery-UI. Starting off with the code previously dealt with, creating connections requires only the addition of a few lines of code to your JS code. The droppable function part of the code has been shown below. Step 1: Assign a unique ID for each element being dropped on the canvas. Though jsPlumb will automatically assign an ID when you don't supply one, it is easier to manipulate the elements when you define an ID. This ID can be a simple digit or even a complex string( But remember, jsPlumb treats all IDs as strings). //Set a unique ID for each dropped Element var indexer = 0 ; function setId (element){ indexer ++;
Read more

interact.js Javascript Library

Image
Previously we've discussed enabling the drag and drop functionalities using the jsPlumb library. Recently, I stumbled upon the interact.js Javascript library, which I found to be as user-friendly as jsPlumb. Below is a short comparison of the two.    Library License Language/Infrastructure Level Built-in editor Github jsPlumb MIT/GPL2 HTML, JavaScript Medium Not Present 2931 stars, 755 forks interact.js MIT Standalone JavaScript Medium Not Present 5452 stars, 351 forks The above details are not presented here to render either one as the bet over the other.  But, in my own experience, I've blended both in my projects utilizing the drag and drop functions for some elements from jsPLumb and the drag and resize function for one element from inter.js. But the only concern when using both the libraries within one function, issues related to the drag function of jsPlumb a
Read more