Skip to main content

lineConfig

Description​

Optional. An object with default configuration for the newly added connector lines

info

The settings will be applied to the new connector lines which are added via the editor

Usage​

lineConfig?: {
    lineType?: "dash" | "line",
    lineDirection?: "backArrow" | "forwardArrow",
    arrowsHidden?: boolean,
    lineGap?: number
};

Parameters​

The lineConfig object contains the following parameters:

  • lineType - (optional) the default type of the new connector lines
  • lineDirection - (optional) the direction of the new connector lines
  • arrowsHidden - (optional) defines whether the arrows of the new connector lines should be hidden
  • lineGap - (optional) sets the distance to the right-angled bend of a connector line
note

The lineDirection, arrowsHidden, and lineGap parameters work only in the default mode of the editor (type: "default")

Default config​

lineConfig: {
    lineType:"line",
    lineDirection: "forwardArrow",
    arrowsHidden: false,
    lineGap: 10
}

Example​

const editor = new dhx.DiagramEditor("editor_container", {
    type: "default",
    lineConfig: {
        lineType: "dash",
        lineDirection: "backArrow",
        arrowsHidden: true,
        lineGap: 50
    },
    // other config parameters
});

The result of applying the lineGap property is shown in the image below:

IMAGE HERE

Change log:

  • The lineGap parameter is added in v5.0 (check the Migration article)
  • Added in v4.2

Related sample: Diagram editor. Setting the default line (connector) type. Try connecting shape A to shape B