jsplumb quick graph creation on down/up events

Creating and connecting endpoints (vertices) on mouse/touch down/up events with jsPlumb. BUG: connection isn't being created on mousedown

by sporritt

HTML

<div id="vertex-template" class="vertex hidden"></div>

<div id="jsplumb-container"></div>

    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.23/jquery-ui.min.js"></script>
    <script type="text/javascript" src="http://jsplumb.org/js/jquery.jsPlumb-1.3.16-all-min.js"></script>
    <script src="http://jsplumb.org/js/jquery.ui.touch-punch.min.js"></script>

CSS

.hidden { display: none; }
.vertex {width: 5em; height: 5em; 
    border: 1px solid black;
    background: #eee;
    text-align: center;
    position: absolute;
    border-radius: 40px;
    padding: 0;}
#jsplumb-container {width: 500px; height: 500px; border: 1px solid black;}

JavaScript

function makeVertex(num, xpos, ypos) {
    var $jspContainer = $("#jsplumb-container"),
        $vtxElement = $('#vertex-template').clone(),
        snum = num,
        divid = 'v' + snum;
    $vtxElement.attr('id', divid);
    $vtxElement.removeClass('hidden');
    $vtxElement.append(snum);

    $vtxElement.attr('style', 'left: '+xpos+'px; top: '+ypos+'px;');

    $jspContainer.append($vtxElement);

    jsPlumb.makeSource( divid, {
        parent: divid,
        anchor: ["Perimeter", {shape:"circle"} ],
    });
    jsPlumb.makeTarget( divid, {
        connector: "Straight",
        detachable: false,
        anchor: ["Perimeter", {shape:"circle"} ],
        dropOptions: {hoverClass: "vertex-drag-onto"}
    });

    $vtxElement.bind('contextmenu', function(e) {
        e.preventDefault();
        if (confirm("Delete this vertex?")) {
            jsPlumb.removeAllEndpoints(divid);
            $vtxElement.remove();
        }
    });
}


jsPlumb.bind('ready', function() {
    var $jspContainer = $("#jsplumb-container");
    var nodeid = 1;

    $jspContainer.on('mousedown mouseup', function(e) {
        //TODO Only handle primary button clicks (not right-click)

        // only make a new node for clicks on the container, not its children
        if ( $(e.target).is($jspContainer) ) {
            makeVertex(nodeid, e.clientX, e.clientY);
            nodeid++;
        }
        // Do we need to simulate a click now to get the edge creation going?

    });

    jsPlumb.importDefaults({
        Connector:"Straight",
        PaintStyle:{ lineWidth:8, strokeStyle:"black" },
        HoverPaintStyle: { strokeStyle:"red" },
        Endpoint: "Blank",
        EndpointStyle:{ fillStyle:"black" },
        Overlays: [
            [ "PlainArrow", {width: 30, length:20, location:1 } ]
        ]
    });

    // handler for new edges
    jsPlumb.bind("beforeDrop", function(data) {
        return (data.sourceId != data.targetId);
    });

});