Skip to main content

autoplacement

info

The autoplacement property works only in the default mode of the diagram and only for shapes

Description

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

Usage

autoplacement?: {
mode?: "direct" | "edges",
graphPadding?: number
};

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 unconnected diagrams, "200" by default

Default config

autoplacement: {
mode: "direct",
graphPadding: 200
}

Example

const diagram = new dhx.Diagram("diagram_container", {
autoplacement: {
mode: "edges",
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 connectType: "straight" property of a line object)

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

Change log: Added in v3.0

Related articles:

Related sample: Diagram. Default mode. Autoplacement