documentationfor yFiles for HTML 3.0.0.4
Migrating to 2.3 from 2.2Migrating to 2.1 from 2.0.1

Migrating to 2.2 from 2.1

The /tools/ directory in the yFiles for HTML package contains helpers that convert your source code between various ways to import the yFiles library, e.g., from UMD to ES module imports. We recommend running the umd-to-es-modules tool after the automatic source code conversion tool for best results:

Location: tools/umd-to-es-modules

Based on jscodeshift

This script converts UMD imports of the yFiles library into the corresponding ES module imports.

To convert your source code, open a terminal and run:

> cd tools/umd-to-es-modules
> npm install
> npm run transform ../../demos

Instead of the demos folder, you can of course transform any other folder you like, e.g. only a single demo folder.

Note that the resulting files may not be runnable in this state yet, as the transformation might introduce syntax errors due to the removed require() calls.

Examples

Before:

require(['yfiles/view-component'], yfiles => {
  const graphComponent = new yfiles.view.GraphComponent('graphComponent')
})

After:

import { GraphComponent } from "yfiles";
const graphComponent = new GraphComponent('graphComponent')

See the change log for a list of all incompatible changes.

License File Changes

Starting with 2.2, the license file is a simple JSON file instead of a UMD module. The format of the license data is still the same though. The demos also load the license from a new location: /lib/license.json instead of /demos/resources/license.js.

If you want to run the 2.2 demos with your 2.1 license, you can follow these steps:

  1. Open your 2.1 license.js file which should look like this:

    (function(r){(function(f){if("function"==typeof define&&define.amd){define(['yfiles/lang'],function(lang){f(lang.yfiles);});}else{f(r.yfiles||(r.yfiles={}));}}(/*@yjs:keep*/
  function(yfiles) {
    yfiles.license = {
      "company": "MyCompany",
      // ...[your license data here]
    }
  }));
}("undefined"!=typeof window?window:"undefined"!=typeof global?global:"undefined"!=typeof self?self:this));

  2. Copy the actual license data (the value assigned to yfiles.license).

  3. Paste the data into a new file and save it to [path to your {product} package]/lib/license.json.

Renamed API Members

Type Member name in 2.1 Member name in 2.2

IEnumerable

selectMany

flatMap

TreeLayoutData

leftRightPlacersLeftNodes

leftRightNodePlacerLeftNodes

TreeLayoutData

delegatingNodePlacersPrimaryNodes

delegatingNodePlacerPrimaryNodes

HierarchicLayoutData

alternativeEdgePath

alternativeEdgePaths

FixNodeLayoutData

fixedNode

fixedNodes

Renamed Types

Type name in 2.1 Type name in 2.2

BfsDirection

TraversalDirection

Renamed API Members in ECMAScript Modules

These changes affect only the ES modules variant of the yFiles for HTML library, not the UMD variant.

Name in 2.1 Name in 2.2

YMap

HashMap

Classes and enums in the layout part got the complete name of the corresponding layout style as a prefix to make the name both unique and clear.

Name in 2.1 Name in 2.2

BusDescriptor

BusRouterBusDescriptor

DefaultSeriesParallelPortAssignment

DefaultSeriesParallelLayoutPortAssignment

DefaultTreePortAssignment

DefaultTreeLayoutPortAssignment

HierarchicEdgeLayoutDescriptor

HierarchicLayoutEdgeLayoutDescriptor

HierarchicEdgeRoutingStyle

HierarchicLayoutEdgeRoutingStyle

HierarchicLayeringStrategy

HierarchicLayoutLayeringStrategy

HierarchicNodeLayoutDescriptor

HierarchicLayoutNodeLayoutDescriptor

HierarchicPortAssignmentMode

HierarchicLayoutPortAssignmentMode

HierarchicRoutingStyle

HierarchicLayoutRoutingStyle

IHierarchicNodePlacer

IHierarchicLayoutNodePlacer

ISeriesParallelPortAssignment

ISeriesParallelLayoutPortAssignment

ITreeNodePlacer

ITreeLayoutNodePlacer

ITreePortAssignment

ITreeLayoutPortAssignment

OrganicScope

OrganicLayoutScope

OrthogonalEdgeLayoutDescriptor

OrthogonalLayoutEdgeLayoutDescriptor

PartialEdgeRoutingStrategy

PartialLayoutEdgeRoutingStrategy

RadialEdgeRoutingStrategy

RadialLayoutEdgeRoutingStrategy

RadialLayeringStrategy

RadialLayoutLayeringStrategy

RouterEdgeLayoutDescriptor

EdgeRouterEdgeLayoutDescriptor

Scope

EdgeRouterScope

SeriesParallelEdgeLayoutDescriptor

SeriesParallelLayoutEdgeLayoutDescriptor

SeriesParallelPortAssignmentMode

SeriesParallelLayoutPortAssignmentMode

SeriesParallelRoutingStyle

SeriesParallelLayoutRoutingStyle

TabularNodeLayoutDescriptor

TabularLayoutNodeLayoutDescriptor

TreeEdgeRoutingStyle

ClassicTreeLayoutEdgeRoutingStyle

TreePortAssignmentMode

TreeLayoutPortAssignmentMode

TreeRoutingStyle

TreeLayoutEdgeRoutingStyle

Removed API Members

clone() methods of all geometry classes: Size, Point, Insets, and Rect.

Since the classes are immutable, these methods can be dropped without replacement.

Class SingleItemCollection

This class was removed and replaced by the more general ItemCollection.

YList.subList

This method was neither implemented nor used by the library.

SnapLine template keys and SnapLine.resourceKey property

All SnapLine template keys except for SNAP_LINE_STROKE_KEY were removed since the templates are hardcoded anyway.

RadialLayoutData.sourceGroups and RadialLayoutData.targetGroups properties

The properties have been removed since edge grouping is not supported by the RadialLayout.

DynamicObstacleDecomposition.getExistingCells method

This method is considered private and should not be part of the public API.

SegmentInfoBase.edge and EdgeCellInfo.edge properties

Removed due to general automatic layout improvements and refactorings.

OrganicEdgeRouter.checkNodeSize protected method

Removed due to general automatic layout improvements and refactorings.

PathSearchResult.getEdgeInfo(Path) method

Removed due to general automatic layout improvements and refactorings.

Other API Changes

  • The GraphOverviewComponent.svgRendering property is superseded by the new renderMode property that allows to choose between three render modes, namely SVG, WEB_GL and CANVAS.

  • The LayoutExecutor.improvePortAssignment and LayoutGraphAdapter.improvePortAssignment properties are replaced by the new portAdjustmentPolicy property which allows for a more fine-grained control over the port locations.

  • The IGraph.getPortLabels method is by the portLabels property to be more inline with the overall API.

  • The getAccumulatedInsets and getDecorator methods on ITable are replaced by the properties accumulatedInsets and decorator to be more inline with the overall API.

Migrating to 2.3 from 2.2Migrating to 2.1 from 2.0.1