magnetic

info

The magnetic property works only in the default mode of the editor (type: "default")

Description

Optional. Defines whether snap lines should be shown when moving a shape. If so, allows configuring their appearance

tip

Snap lines appear when central or extreme lateral coordinates of the shape which you move coincide with central or extreme lateral coordinates of the static nearby shapes

Usage

magnetic?: {
    show?: boolean,
    lineWidth?: number,
    lineColor?: string
} | boolean;

Default config

magnetic: true

The magnetic mode is enabled with the following configuration:

magnetic: {
    show: true,
    lineWidth: 2,
    lineColor: "#000"
}

Parameters

As an object, the magnetic property can include the following parameters:

• show - (optional) enables/disables snap lines when moving a shape
• lineWidth - (optional) the width of snap lines (2 by default)
• lineColor - (optional) the color of snap lines ("#000" by default)

Example

const editor = new dhx.DiagramEditor("editor_container", {
    type: "default",
    magnetic: {
        show: true,
        lineWidth: 2,
        lineColor: "#B0B8CD"
    }
});

Change log: The show parameter was added in v6.0