Skip to main content

autoplacement

Description​

Optional. An object with configuration settings for auto-placement of shapes

info

The autoplacement property works only in the default mode of the diagram and only for shapes. It does not work if you use groups or swimlanes.

Autoplacement will be applied only after the autoPlace() method is applied.

Usage​

autoplacement?: {
    mode?: "direct" | "edges", // "direct" by default
    graphPadding?: number, // 200 by default
    placeMode?: "orthogonal" | "radial", // "orthogonal" by default
    itemPadding?: number, // 20 by default
    levelPadding?: number // 20 by default
};

Parameters​

The autoplacement object has the following parameters:

  • mode - (optional) the mode of connecting shapes, "direct" (by default) or "edges"
  • graphPadding - (optional) sets the distance between two or more unconnected diagrams, 200 by default
  • placeMode - (optional) sets the mode of placement of shapes, "orthogonal" (by default) or "radial"
  • itemPadding - (optional) minimal padding between items (the minimal value is 1), 20 by default
  • levelPadding - (optional) minimal padding between hierarchy levels (the minimal value is 1), 20 by default

Default config​

autoplacement: {
    mode: "direct",
    graphPadding: 200,
    placeMode: "orthogonal",
    itemPadding: 20, 
    levelPadding: 20 
}

Example​

const diagram = new dhx.Diagram("diagram_container", {
    autoplacement: {
        placeMode: "radial",
        mode: "direct",
        itemPadding: 10,
        levelPadding: 10,
        graphPadding: 100
    }
});

diagram.data.parse(data);

diagram.autoPlace();

Modes of connecting shapes​

"direct" mode​

Connector lines with no arrows are aligned "from center to center". They are straight and diagonal.

"edges" mode​

Connector lines are aligned "from side to side".

info

To add arrows to the lines, specify forwardArrow: "filled" or backArrow: "filled" in the configuration of a line object.

The connector lines in the "edges" mode can be:

  • either straight (if you set the connectType: "straight" property of a line object)

  • or 90-degree curved (if you set the connectType: "elbow" property of a line object)

Modes of placement of shapes​

"orthogonal" mode​

Shapes are arranged along vertical and horizontal lines

  • "orthogonal" arrangement with lines in the "direct" mode

  • "orthogonal" arrangement with lines in the "edges" mode

"radial" mode​

Shapes are arranged on imaginary circles relative to the central shape, i.e. the shape with the most connections

  • "radial" arrangement with lines in the "direct" mode

  • "radial" arrangement with lines in the "edges" mode

Change log:

  • The itemPadding and levelPadding parameters are added in v6.1.3
  • The placeMode parameter is added in v5.0

Related articles:

Related sample:

Need more help?Contact Support