Search code examples
jsplumb

Add an offset to jsPlumb anchor

I am using jsplumb to represent dependencies between jobs. Please see the below jsfiddle to see what I have so far. JsFiddle

var arrow_template = {
    connector:"StateMachine",
    paintStyle:{lineWidth:3,strokeStyle:"#0060CF"},
    hoverPaintStyle:{strokeStyle:"#dbe300"},
    endpoint:"Blank",
    anchors:["Right", "Left"],
    reattach:false,
    overlays:[["PlainArrow", {location:1, width:10, length:10} ]]
};

I want to add some horizontal offset to the left anchor of the connections so that it does not go over the scroll bar. Instead start from the panel border.

I have read the documentation for anchors here but I don't fully understand. When I try to play with anchor setup values I get no connections/arrows.

Appreciate any help.

Solution

  • Please see Anchor Offsets section:

    In addition to supplying the location and orientation of an anchor, you can optionally supply two more parameters that define an offset in pixels from the given location.

    So if you replace anchors:["Right", "Left"], with anchors:[[1, 0.5, 0, 0, 18, 0], "Left"], your issue will be resolved.

    JSFiddle Demo