Search code examples
javascripthtmlcssjsplumb

JsPlumb : Issue with connnector lines

I would like to draw this following lines with angles.

Actual enter image description here

Expected enter image description here

I tried to find documentation about this problem, without success. I'm attaching a snippet of what I have set up so far. If anyone has good documentation or a solution to this problem, I'm interested.

https://codepen.io/adrian-jamet/pen/YzrEErM

 instance = jsPlumb.getInstance({});
instance.setContainer("diagram");

instance.bind("ready", function() {
    instance.registerConnectionTypes({
        "white-connection": {
            paintStyle: {
                stroke: "white",
                strokeWidth: 5,
                joinstyle: "round"
            },
            hoverPaintStyle: {
                stroke: "white",
                strokeWidth: 10
            },
            connector:"Flowchart"
        }
           
    });
    instance.draggable("table_photo", {
        "containment": true
    });
    instance.draggable("table_client", {
        "containment": true
    });
    instance.draggable("table_mobilhome", {
        "containment": true
    })
    instance.draggable("table_typemobil", {
        "containment": true
    })
    instance.draggable("table_reservation", {
        "containment": true
    })
    instance.draggable("table_ville", {
        "containment": true
    })


    // instance.addEndpoint("table_photo", {
    //     endpoint: "Dot", // rectangle, blank, image
    //     anchor: ["LeftMiddle"],
    //     isSource: true,
    //     connectionType: "white-connection"
    // });
    // instance.addEndpoint("table_typemobil", {
    //     endpoint: "Dot", // rectangle, blank, image
    //     anchor: ["RightMiddle"],
    //     isSource: true,
    //     connectionType: "white-connection"
    // });

    // https://stackoverflow.com/a/4502207
    var e0 = instance.addEndpoint("table_typemobil", {
            uuid: "typemobil1",
            anchor: [
                [1, 0.23, 0, 0]
            ],
           
            connectionType: "white-connection"
        }),
        e01 = instance.addEndpoint("table_typemobil", {
            uuid: "typemobil2",
            anchor: [
                [0, 0.23, 0, 0]
            ],
           
           
            connectionType: "white-connection"
        }),
        e1 = instance.addEndpoint("table_photo", {
            uuid: "photo1",
            anchor: [0, 0.9, 0, 1],
            
           
            
        }),
        e2 = instance.addEndpoint("table_mobilhome", {
            uuid: "mobilhome1",
            anchor: [
                [1, 0.32, 0, 0]
            ],

            connectionType: "white-connection"
        }),
        e21 = instance.addEndpoint("table_mobilhome", {
            uuid: "mobilhome2",
            
            anchor: [
                [0, 0.92,0,0]
            ],
            connectionType: "white-connection"

        }),
        e3 = instance.addEndpoint("table_reservation", {
            uuid: "reservation1",
            anchor: [
                [0, 0.82, 0, 0]
            ],
            
        }),
        e31 = instance.addEndpoint("table_reservation", {
            uuid: "reservation2",
            anchor: [
                [1, 0.95, 0, 0]
            ],
           
        }),
        e4 = instance.addEndpoint("table_client", {
            uuid: "client1",
            anchor: [
                [1, 0.18, 0, 0]
            ],
           
            connectionType: "white-connection"

        });

    instance.connect({
        uuids: ["typemobil1", "photo1"],
        detachable: false,
       
    })
    instance.connect({
        uuids: ["mobilhome1", "reservation1"],
        detachable: false
    })
    instance.connect({
        uuids: ["client1", "reservation2"],
        detachable: false
    })
    instance.connect({
        uuids: ["typemobil2", "mobilhome2"],
        anchors: ["Right", "Left"],
       
    })

});
Solution

  • None of the anchor declarations include values for the anchor orientation, for instance

    anchor: [
  [1, 0.23, 0, 0]
],

    this one, being on the right near the top edge, probably should start out moving to the right horizontally, so:

    anchor: [
  [1, 0.23, 1, 0]
],

    whereas this one, on the left, should start moving horizontally to the left:

    anchor: [
  [0, 0.23, 0, 0]
],

    so:

    anchor: [
  [0, 0.23, -1, 0]
],

    a similar consideration needs to be made for the other anchors. the value at index 3 is for the y axis.

    Anchors are discussed here