Snaplines

Snaplines allows users to align elements.

Learn more about the Snaplines plugin.

constructor

constructor(opt?: Snaplines.Options)

The ui.Snaplines constructor accepts several parameters:

paper

[required] The JointJS paper (joint.dia.Paper) object.

distance

[optional] The distance in pixels between edges (center) of other elements for snapping applies. The default is 10.

filter

[optional] Filter allows you to filter out elements taken into account for snapping. It can either be an array in which case the array is considered to contain cell types (or elements directly, they can even be intermixed) that should be filtered out from snapping. Or it can be a function with the following signature: function(element) in which case the function should return true if the element should not be taken into account for snapping.

usePaperGrid

[optional] When an element is snapped to other element, adjust its top-left corner to the paper's grid. Useful when the elements in the graph (or their centers) are not aligned with the grid. The default is false.

canSnap()

(elementView: dia.ElementView) => boolean;

[optional] A function to determine whether an element will use snaplines while moving. All elements use snaplines by default.

additionalSnapPoints()

(elementView: dia.ElementView, options: AdditionalSnapPointsOptions) => dia.Point[];

[optional] A function that allows the user to specify additional snap points. The first parameter of the callback is the elementView of the dragged/changed element. The second parameter is the options object. The options object contains a single type property that describes what kind of snaplines were invoked (it should snap because the element was moved 'move' or resized 'resize'). The return value represents an array of points (objects with properties x and y) to which the dragged element should snap. The returned points take precedence over the default snap points generated from the elements.

Methods

enable()

snaplines.enable(): void

Enable the snaplines. The plugin will start listening to the paper and align elements as they move.

disable()

snaplines.disable(): void

Disable the snaplines.

isEnabled()

snaplines.isEnabled(): boolean

Return true if the snaplines are disabled. Otherwise, return false. The plugin is enabled by default.

Types

The plugin uses the following types:

SnaplinesType

type SnaplinesType = 'move' | 'resize';

AdditionalSnapPointsOptions

interface AdditionalSnapPointsOptions {
    type: SnaplinesType
}

Options

Options extends mvc.ViewOptions<undefined> {
    paper: dia.Paper;
    distance?: number;
    filter?: string[] | dia.Cell[] | (() => string[] | dia.Cell[]);
    usePaperGrid?: boolean;
    canSnap?: (this: Snaplines, elementView: dia.ElementView) => boolean;
    additionalSnapPoints?: (this: Snaplines, elementView: dia.ElementView, options: AdditionalSnapPointsOptions) => Array<dia.Point>;
}