Methods
- addShape
- autoPlace
- collapseItem
- destructor
- expandItem
- getScrollState
- locate
- paint
- scrollTo
- showItem
Events
Properties
- autoplacement
- defaultLinkType
- defaults
- defaultShapeType
- exportStyles
- gridStep
- lineGap
- margin
- scale
- select
- toolbar
- type
- typeConfig
DataCollection
- DataCollection Methods
  - add
  - copy
  - eachChild
  - eachParent
  - exists
  - filter
  - find
  - findAll
  - getId
  - getIndex
  - getItem
  - getNearId
  - getRoot
  - getRoots
  - load
  - map
  - move
  - parse
  - remove
  - removeAll
  - serialize
  - update
- DataCollection Events
  - afterAdd
  - beforeAdd
  - change
  - load
Selection
- Selection Methods
  - add
  - getId
  - getItem
  - remove
- Selection Events
CellManager
- CellManager Methods
- CellManager Events
Export
- pdf
- png
Events Bus
- detach
- fire
- on

autoplacement

sets configuration for autoplacement

object autoplacement;

Example

var diagram = new dhx.Diagram("diagram_container", {
    autoplacement: {
        mode: "edges",
        graphPadding: 100
    }
});
 
diagram.parse(autoData);

Related samples

Details

The autoplacement property works for Diagram and Diagram Editor but does not work for Organizational Chart and Org Chart Editor. The autoplacement property does not work if you use groups or swimlanes.

The autoplacement object can contain the following options:

mode - (string) the mode of connecting shapes, "direct" (by default) or "edges"
graphPadding - (number) sets the distance between unconnected diagrams, "200" by default

Modes of connecting shapes

"direct" mode

Connectors are aligned "from center to center"; they are straight and diagonal.

"edges" mode

Connectors are aligned "from side to side"; they are straight and 90-degree curved.