Search code examples
javascripthtml5-canvasdraw2d-js

Draw2D: How to use a port as source/target for more than one connection?

So, I'm trying to build as a personal project my course curriculum and I decided to use Draw2D because I think it's pretty complete. I'm representing the courses as rectangles and setting connections between them to show which ones are pre-requisites for other courses, something like this:

Course list with dependencies The problem I'm having is that when trying to make the same port the source for two connections it just takes one and ignores the other. Any ideas? Below is a quick sample:

$(window).load(function () {
    // Create the paint area. The id in the constructor must be
    // an existing DIV 
    var canvas = new draw2d.Canvas("gfx_holder");

    // create and add two nodes which contains Ports (In and OUT)
    var start = new draw2d.shape.node.Hub();
    var startLocator = new draw2d.layout.locator.BottomLocator(start);
    var startLocator2 = new draw2d.layout.locator.BottomLocator(start);

    var startPort = start.createPort("output", startLocator);
    var end   = new draw2d.shape.node.End();
    var end2   = new draw2d.shape.node.End();

    canvas.addFigure( start, 400,100);
    canvas.addFigure( end, 200,150);
    canvas.addFigure( end2, 600,150);

    var c = new draw2d.Connection();
    c.setTargetDecorator(new draw2d.decoration.connection.ArrowDecorator());
    c.setSource(startPort);
    c.setTarget(end.getInputPort(0));
    canvas.addFigure(c);


    var c2 = new draw2d.Connection();
    c2.setTargetDecorator(new draw2d.decoration.connection.ArrowDecorator());
    c2.setSource(startLocator2);
    c2.setTarget(end2.getInputPort(0));
    canvas.addFigure(c2);
});
Solution

  • I would suspect your problem lies in the setSource function call.

    c.setSource(startPort);
c2.setSource(startLocator2);

    One seems to specify a port, and the other a Locator.