Flowchart with jsPlumb

Question

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

Jai · Accepted Answer · 2013-02-06T11:12:38.920

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);

});

Thanks, but no effect, and it still seems the line is looping back on itself instead of going straight to the destination endpoint. — Echilon, Feb 06 '13 at 10:08
if you can make a fiddle for it that would help a lot to this: http://jsfiddle.net/ — Jai, Feb 06 '13 at 10:10

score 1 · Answer 2 · answered Feb 06 '13 at 11:34

The full, final solution was:

;(function () {
window.plumbify = {
    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)',
            paintStyle = {
                lineWidth: 3,
                strokeStyle: '#a7b04b',
                outlineWidth: 1,
                outlineColor: '#666'
            },
            hoverPaintStyle = {
                strokeStyle: '#7ec3d9'
            };
        var connection1 = jsPlumb.connect({
            source: 'start',
            target: 'msgtype',
            connector: 'Bezier',
            cssClass: 'c1',
            endpoint: 'Blank',
            anchors: [[0.25, 1, 0, 0.5], [0.75, 0, 0, -0.5]],
            paintStyle: paintStyle,
            endpointStyle: {
                fillStyle: '#a7b04b'
            },
            overlays:[ 
                [ 'Arrow', { width:20, length:30, location:0.5, paintStyle: paintStyle } ], 
            ],
            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);
       plumbify.init();
    };
    resetRenderMode(jsPlumb.SVG);
});

Resulting in:

Final solution

score 0 · Answer 3 · answered Jul 13 '16 at 19:18

0

    jsPlumb.addEndpoint(element.id,{
        ...
        paintStyle:{radius:1};
    });

answered Jul 13 '16 at 19:18

Sveen

347
2
10

Flowchart with jsPlumb

3 Answers3