Search code examples
javascriptjqueryflowchartjsplumb

Flowchart with jsPlumb

I'm trying to create a flowchart with jsPlumb. I have two elements and I want to connect them with a line. I want a line, but not a huge dot as I currently have. I've tried setting the radius of the dot everywhere I can, but it seems unaffected and remains at the default 20px. What am I doing wrong?

<div id="start">Start</div>
<div id="msgtype">Lorem ipsum dolor sit amet</div>

jsPlumb.importDefaults({
    Endpoints : [ [ 'Dot', {radius:1} ], [ 'Dot', { radius:1 } ]]
});
var connectorPaintStyle = {
    lineWidth:4,
    fillStyle:'#333333',
    joinstyle:'round',
    outlineWidth:0,
    radius: 1,
}
var eleStart = jsPlumb.addEndpoint('start', {
    isSource:true,
    isTarget:false
});

var eleMsgtypeTop = jsPlumb.addEndpoint('msgtype', {
    isTarget:true,
    parameters:{
        endpoint:'dot',
        radius: 1
    },
    anchor: 'TopCenter',
    radius: 1,
    connectorStyle:connectorPaintStyle
});
jsPlumb.connect({ source:eleStart, 
        target:eleMsgtypeTop,
        connectorStyle:connectorPaintStyle,
        endpoint:[ 'Dot', { radius:1, hoverClass:'myEndpointHover' }],
        connectorStyle:connectorPaintStyle
});

Producing this:

[]

JSFiddle Demo

Solution

  • Try this: http://jsfiddle.net/GT884/1/

     ;(function () {

window.jsPlumbDemo = {

    init: function () {

        jsPlumb.importDefaults({
            DragOptions: {
                cursor: "pointer",
                zIndex: 2000
            },
            HoverClass: "connector-hover"
        });

        var connectorStrokeColor = "rgba(50, 50, 200, 1)",
            connectorHighlightStrokeColor = "rgba(180, 180, 200, 1)",
            hoverPaintStyle = {
                strokeStyle: "#7ec3d9"
            };
        var connection1 = jsPlumb.connect({
            source: "start",
            target: "msgtype",
            connector: "Bezier",
            cssClass: "c1",
            endpoint: "Blank",
            endpointClass: "c1Endpoint",
            anchors: ["BottomCenter", [0.75, 0, 0, -1]],
            paintStyle: {
                lineWidth: 6,
                strokeStyle: "#a7b04b",
                outlineWidth: 1,
                outlineColor: "#666"
            },
            endpointStyle: {
                fillStyle: "#a7b04b"
            },
            hoverPaintStyle: hoverPaintStyle
        });

        // make all .window divs draggable
        jsPlumb.draggable(jsPlumb.getSelector(".window"));

    }
};
})();

jsPlumb.bind("ready", function () {

jsPlumb.init();

// chrome fix.
document.onselectstart = function () {
    return false;
};

// render mode
var resetRenderMode = function (desiredMode) {
    var newMode = jsPlumb.setRenderMode(desiredMode);
    $(".rmode").removeClass("selected");
    $(".rmode[mode='" + newMode + "']").addClass("selected");

    $(".rmode[mode='canvas']").attr("disabled", !jsPlumb.isCanvasAvailable());
    $(".rmode[mode='svg']").attr("disabled", !jsPlumb.isSVGAvailable());
    $(".rmode[mode='vml']").attr("disabled", !jsPlumb.isVMLAvailable());

    //var disableList = (newMode === jsPlumb.VML) ? ",.rmode[mode='svg']" : ".rmode[mode='vml']"; 
    //  $(disableList).attr("disabled", true);              
    jsPlumbDemo.init();
};

$(".rmode").bind("click", function () {
    var desiredMode = $(this).attr("mode");
    if (jsPlumbDemo.reset) jsPlumbDemo.reset();
    jsPlumb.reset();
    resetRenderMode(desiredMode);
});

// explanation div is draggable
$("#explanation,.renderMode").draggable();

resetRenderMode(jsPlumb.SVG);

});