The SourceAnchor link tool renders a handle above the source anchor of the link (as determined by the anchor function applied on link source). It accepts five additional arguments, which can be passed as an object to the link tool constructor:

redundancyRemoval boolean If the user moves the anchor so that it lies on a single line with two (or more) vertices, should the middle one(s) be considered redundant and removed? Default is true. Note that this setting is not applied until the user actually moves the anchor; this means that the anchor and vertices can still be arranged in this redundant fashion, using the link.vertices function, for example.
restrictArea boolean Should the user only be allowed to move the anchor in a restricted area (the area of the bounding box of the source magnet)? Default is true.
areaPadding number If the restrictArea option is set to true, the user can only move the anchor in a restricted area (the area of the bounding box of the source magnet). JointJS shows this restriction by drawing a boundary around that area. This option determines whether this boundary area should be visually inflated and if so, by how much. Default is 10. Note that this is a purely cosmetic setting; regardless of the provided value, the movement stays restricted to the original uninflated bounding box.
snapRadius number While the user is moving the anchor, from how far away should the segment snap in order to arrange itself in line with the anchor reference? Default is 10. (For link source, the anchor reference is the first vertex. If there are no vertices, it is the target anchor.)
resetAnchor boolean | object When the user double clicks the anchor tool, the following action should be performed:
  • true - remove the current source anchor from the link. It is a default.
  • false - do nothing
  • { name: [AnchorName], args: [AnchorArguments] } - replace the current source anchor with the option value.
snap function What snap function should be applied when the user moves the anchor? Default is a simple function that emulates the snapping behavior of Vertices and Segments link tools: If the value of one of the user pointer coordinates is within snapRadius of the value of a coordinate of the anchor reference, snap to the reference value. (For link source, the anchor reference is the first vertex. If there are no vertices, it is the target anchor.)

The callback function must return the anchor as a g.Point and have the signature function(coords, endView, endMagnet, endType, linkView, toolView):

coords g.Point A Point object recording the x-y coordinates of the user pointer when the snap function was invoked.
endView dia.ElementView The ElementView which contains the restricted area. The Element model can be accessed as endView.model; this may be useful for writing conditional logic based on element attributes.
endMagnet SVGElement The SVGElement in our page that contains the magnet (element/subelement/port) which serves as the restricted area.
endType string Is the end view the source ('source') or target ('target') of the link?
linkView dia.LinkView The LinkView to which the tool is attached. The Link model can be accessed as linkView.model; this may be useful for writing conditional logic based on link attributes.
toolView dia.ToolView This tool. May be useful for writing conditional logic based on tool options (e.g. the default algorithm refers to toolView.options.snapRadius).

Example:

var sourceAnchorTool = new joint.linkTools.SourceAnchor({
    focusOpacity: 0.5,
    redundancyRemoval: false,
    restrictArea: false,
    snapRadius: 20
});

An example of a useful custom snap function is provided below. It snaps the anchor to the center of the closest side of the restricted area.

var snapAnchor = function(coords, endView, endMagnet) {

    // remove rotation of the restricted area
    var bbox = endView.getNodeUnrotatedBBox(endMagnet);
    var angle = endView.model.angle();
    var origin = endView.model.getBBox().center();
    coords.rotate(origin, angle);

    // identify the side nearest to pointer coords
    var anchor;
    var side = bbox.sideNearestToPoint(coords);
    switch (side) {
        case 'left': anchor = bbox.leftMiddle(); break;
        case 'right': anchor = bbox.rightMiddle(); break;
        case 'top': anchor = bbox.topMiddle(); break;
        case 'bottom': anchor = bbox.bottomMiddle(); break;
    }

    // rotate the anchor according to original rotation of restricted area
    return anchor.rotate(origin, -angle);
};

var sourceAnchorTool = new joint.linkTools.SourceAnchor({
    snap: snapAnchor;
});

If the user moves the anchor away from its original position, the anchor position may be reset by double-clicking the anchor handle.