Skip to main content

autoplacement

info

The autoplacement property works only in the default mode of the editor (type:"default") 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 editor = new dhx.DiagramEditor("editor_container", {
autoplacement: {
graphPadding: 100,
mode: "edges"
}
});

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 samples: