Organic Layout

This section describes the major changes to the OrganicLayout.

Like all major layout algorithms, the OrganicLayout no longer inherits from MultiStageLayout but instead implements ILayoutAlgorithm directly. The layout stages are now managed by a LayoutStageStack, which can be obtained via the layoutStages property. See Layout Stages and Multi-Stage Layouts for more details.

Renamed, Moved, and Removed Classes and Members

The following table lists the renamed, moved, and removed classes and members of the major classes of the OrganicLayout. In addition to the changes listed here, the expert API was streamlined as well by removing some protected methods of OrganicLayout.

Changed Default Values and Behavior Changes

Node sizes are now always considered. Consequently, the property OrganicLayout.ConsiderNodeSizes has been removed.

Node labels are now considered by default. To change this behavior, set the nodeLabelPlacement property to the desired value. It is now also easier to place node labels with GenericLabeling by setting the value to GENERIC.

Edge labels are now placed by the GenericLabeling algorithm by default. To change this behavior, set the edgeLabelPlacement property to the desired value.

The default component arrangement style has been changed from ROWS to PACKED_CIRCLE. The style can be specified via the ComponentLayout.style property. The ComponentLayout that is used by the OrganicLayout is available via the componentLayout property.

The OrganicLayout now always configures the ComponentLayout to respect the location of fixed nodes that lie in different components. The property SmartComponentLayout has been removed. To disable this configuration, replace the instance of the ComponentLayout in the LayoutStageStack accessible via the layoutStages property.

Port placement now takes the specified port candidates into account. The ports are placed in a post-processing step by the PortPlacementStage. Port candidates can be specified via the properties on the sub-data OrganicLayoutData.ports. See also the section Ports.

If custom clusters are defined via the OrganicLayoutData.clusterIds, these are considered automatically, and the value of OrganicLayout.clusteringPolicy is ignored. It is no longer necessary to set it to ClusteringPolicy.USER_DEFINED, which consequently has been removed.

ClassicOrganicLayout

The ClassicOrganicLayout has been superseded by the OrganicLayout, which supports all use cases of the ClassicOrganicLayout. Consequently, the ClassicOrganicLayout has been removed.

Scope

In yFiles for HTML 3.0, defining the scope has been made uniform for all major layout algorithms. For the OrganicLayout, this means that all settings related to the scope have been combined into the sub-data scope of the OrganicLayoutData.

Additionally, the scope mode can now be set per node, which makes it more flexible than before. To emulate the previous settings of the scope property of the OrganicLayout, the following settings can be used.

• ALL: The default behavior. It can be explicitly set by adding all nodes to nodes.
• SUBSET: Add the desired subset of nodes to nodes.
• MAINLY_SUBSET: Set scopeModes to INCLUDE_EXTENDED_NEIGHBORHOOD for the nodes in the subset and to FIXED for the other nodes.
• MAINLY_SUBSET_GEOMETRIC: Set scopeModes to INCLUDE_CLOSE_NODES for the nodes in the subset and to FIXED for the other nodes.

Constraints

The changes described in this chapter only affect users who work directly with the LayoutGraph API, for example, when writing custom layout algorithms.

The class ConstraintFactory has been removed. Node placement constraints should now be specified directly via the constraints property on the OrganicLayoutData, as when working with an IGraph.

const organicLayout = new OrganicLayout()
const layoutData = organicLayout.createLayoutData(graph)

// Align all nodes in the list on a horizontal line
layoutData.constraints.addAlignmentConstraint('horizontal').source =
  nodesToAlign

Interactive Organic Layout

The interactive organic layout has been significantly reworked. It is recommended to also consult the source code demo for the Interactive Organic Layout.

There is now a corresponding InteractiveOrganicLayoutData. This class is responsible for setting the value of the properties of the edges and nodes both before and during the layout calculations.

To set the initial values of these properties, it offers properties like preferredEdgeLengths. To update these values while the layout algorithm is running and to query the values that the algorithm used after completion, use handles (InteractiveOrganicNodeHandle and InteractiveOrganicEdgeHandle). For example, the method InteractiveOrganicLayout.SetPreferredEdgeLength has been replaced with the property InteractiveOrganicEdgeHandle.preferredEdgeLength. Mappings from the nodes to these handles are maintained by the InteractiveOrganicLayoutData using the properties nodeHandles and edgeHandles.