Skip to content

autoplace_method.md

Latest commit

 

History

History
111 lines (69 loc) · 3.73 KB

autoplace_method.md

File metadata and controls

111 lines (69 loc) · 3.73 KB
Raw
sidebar_label autoPlace()
title autoPlace Method
description You can learn about the autoPlace method in the documentation of the DHTMLX JavaScript Diagram library. Browse developer guides and API reference, try out code examples and live demos, and download a free 30-day evaluation version of DHTMLX Diagram.

autoPlace()

:::info The autoPlace() method works only in the default mode of the diagram and only for shapes :::

Description

@short: Automatically arranges connected diagram shapes in the hierarchical structure

Usage

autoPlace(config?: object): void;

Parameters

  • config - (optional) an object with configuration settings of the autoplacement. If not specified, the default settings will be applied. Here you can specify 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
    • 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

Example

const diagram = new dhx.Diagram("diagram_container");
diagram.data.parse(data);

diagram.autoPlace({
    mode: "edges",
    placeMode: "radial"
});

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".

:::note If fromSide and toSide are set on a link, the autoplacement algorithm will preserve those values but will not use them during placement calculation. The key properties that define links are from and to, while fromSide and toSide are calculated automatically by the algorithm. :::

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

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. a 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
  • The autoplacement property is added in v3.0

Related articles: Arranging shapes automatically

Related sample: