yFiles for HTML Release Notes

yFiles for HTML 2.1 is the newest major release available. The latest release is version (See also the entire yFiles for HTML change log.)

Technical Requirements

  • An IDE with dedicated support for JavaScript development is strongly recommended. For example, IntelliJ WebStorm or IDEA Ultimate, Visual Studio Code, NetBeans, Eclipse.
  • To run yFiles for HTML-based web applications, an HTML5-capable browser with adequate SVG support is required (see table).

yFiles for HTML 2.1 - Changes Since

Hide Description
Open in yEd LiveDownload
yFiles for HTML 2.1 Release Notes
New support for WebGL as a third rendering option
yFiles for HTML 2.1 Release Notes
New packaging as ES6 modules
yFiles for HTML 2.1 Release Notes
New support for lasso selection

Major New Features

ES6 Modules of the Library
The yFiles package now contains the library as ES6 modules in addition to the existing UMD modules. This makes, amongst others, working with modern IDEs, popular tools like Webpack and Angular CLI, and TypeScript much easier.
WebGL Rendering
Added WebGL as a third rendering option besides the already available SVG and HTML5 Canvas rendering. This allows the rendering of very large graphs with good performance. The Large Graphs demo shows the new technique in action.
Labels at Ports
Labels can now be added to ports and the new label models FreePortLabelModel and InsideOutsideLabelModel can be used to place such labels. On the technical side, IPort now extends the ILabelOwner interface and there is a new enum constant: GraphItemTypes.PortLabel.
Customizable Rendering Order
Labels and ports can now optionally be rendered directly in front of their owner. Such a rendering order can make the ownership of labels and ports clearer if nodes overlap. Previously, all labels and ports were rendered in front of all nodes. The new rendering order can be enabled by setting the new properties LabelLayerPolicy and PortLayerPolicy of GraphModelManager to LabelLayerPolicy.AtOwner and PortLayerPolicy.AtOwner, respectively.

The nesting options of GraphModelManager for the visualizations of nodes and edges have been improved and clarified. The properties useHierarchicNodeNesting and useHierarchicEdgeNesting have been combined into the new hierarchicNestingPolicy property. It takes values of the new HierarchicNestingPolicy enum. Its new option HierarchicNestingPolicy.GROUP_NODE configures GraphModelManager to visualize all leaf nodes in one canvas object group while nesting all group nodes depending on their hierarchical depth.

Touch Improvements
A completely new Touch demo shows how the user experience can be optimized for touch-only devices, for example with large handles and a context dial menu that is triggered on "long-press".

This is accompanied by several improvements in the library that make touch input more fun. Especially, the hit test radius and drag detection area is now autoamtically enlarged for touch input, inertia scrolling of the viewport behaves now in a more natural way and stops after a fixed amount of time and two-finger panning and zooming now smooths small movements to avoid undesired changes of the zoom level.

Drag and Drop
Native HTML5 drag and drop is now supported in addition to the custom yFiles implementation that is based on mouse and touch event listeners. Both ways can now display a preview image of the dragged item all of the time and not only inside the graph component. Finally, the new LabelDropInputMode and PortDropInputMode classes implement drag and drop for labels and ports, respectively. The API of these classes is similar to the existing NodeDropInputMode for nodes.
Lasso Selection
The new LassoSelectionInputMode selects all model items inside a hand-drawn lasso region. This mode allows combinations of free-hand and straight-line sections during path creation.
Improved Orthogonal Layout
Many parts of the orthogonal layout algorithm have been significantly improved. In many cases, the drawings created by this algorithm are now much more compact and have smaller edge lengths, and they contain less crossings and perceived bends.

In addition, this layout now supports special layout styles of various substructures that are automatically detected in the input graph. Supported substructures are trees, chains and cycles. In addition to the style, the new feature offers more settings, like, for example, the desired tree layout orientation.

Parallel edges (multi-edges that share the same source and target node) are now routed as parallel as possible; if there are edge labels, the routes must differ somewhat. Previously, parallel edges were not handled explicitly and their routes were often very different, making the recognition of parallel structures difficult.

Sub-components in Hierarchic Layouts
In a hierarchic layout, you can now define sub-components of the input graph such that each sub-component is arranged by a user-specified layout algorithm. This allows hierarchical layouts where parts of the graph are arranged in a different fashion, e.g., to emphasize special sub-structures. The new HierarchicLayoutData.SubComponents property can be used to configure the new sub-components feature of the hierarchic layout.
Tree Map Layout
Added the new layout algorithm TreeMapLayout that generates tree maps. Tree maps present hierarchical data using nested rectangles (nodes) where each rectangle (node) gets its size depending on a specific dimension of data associated to it. The new TreeMapLayoutData class provides additional configuration options for this algorithm and the new Tree Map Demo shows a possible use case for the new layout style.
Tabular Layout Style
The new layout algorithm TabularLayout generates simple tabular arrangements of nodes. It allows to place nodes in rows and columns, such that each table cell contains at most one node. Among its features is, for example, a from-sketch mode, the possibility to exactly map nodes to specific cells or different vertical and horizontal alignments. The new TabularLayoutData class provides additional configuration options for this algorithm and the Layout Styles Demo shows the new layout style.

New Features


If you are updating from an older version of yFiles for HTML, have a look at the list of incompatible changes and at the more detailed description in the Migration Guide document (of your local yFiles for HTML installation). An updated version of our automatic source code conversion tool is available for this release, too.

  • Many common simple types can now be created, or automatically type converted, from a shorthand string or object notation. For example, you can specify a point with {x:100, y: 200}, an arrow with "blue large circle", and an enum just by its name, e.g. "TOP_LEFT". Usages that allow the conversion of a parameter or property value are marked with a 'Conversion' badge in the API Doc and the valid syntax for each type is described with the corresponding type.
  • The deployment tool can now optimize and obfuscate ES6 sources directly; transpiling the sources to ES5 first is not required anymore.


  • The performance of FilteredGraphWrapper has been significantly improved. Now, it depends mainly on the size of the resulting filtered graph. This makes use cases that load very large graphs into memory and displaying only a subset of them using FilteredGraphWrapper much more reactive.
  • The new property CanvasComponent.devicePixelRatio can be adjusted to achieve crisp Canvas or WebGL rendering on high DPI devices.
  • CanvasComponent and GraphComponent can automatically detect (re-)insertions into the DOM now, allowing the size calculation and adjustment to also work in cases where the component previously was not displayed (out of DOM or display:none).
  • The following types and methods were added to support the new LassoSelectionInputMode:
    • Added the GraphInputMode.lassoSelectionInputMode property and a corresponding factory method. LassoSelectionInputMode is disabled by default.
    • The new GraphInputMode.lassoSelect method programmatically selects all items in the provided GeneralPath.
    • The new ILassoTestable interface specifies whether the item is considered to be inside the lasso path. This is analogous to the IMarqueeTestable interface for marquee selection.
    • Any model item can be decorated with an instance of ILassoTestable or provide one in its lookup. For this, the Node/Edge/Port/Label/BendDecorator classes got the new lassoTestableDecorator property for decorating an item with a custom ILassoTestable.
    • The new isInPath method of Node/Edge/Port/LabelStyleBase can be overridden to customize the lasso testing behavior.
  • With TableEditorInputMode, double clicking a stripe or stripe label now edits the label in the same way as for other graph items.
  • The rectangle of the marquee selection can now be customized with the new protected method MarqueeSelectionInputModes.calculateMarqueeRectangle.
  • Added the events ElementsCopied, ElementsCut, and ElementsPasted to GraphEditorInputMode, and the event ElementsCopied to GraphViewerInputMode.
  • Added new decorator implementations for table items. You can access these new decorators via the new method ITable.GetDecorator with the RowDecorator, ColumnDecorator and StripeLabelDecorator properties.
  • The mouse wheel behavior of the overview can now be switched between Zoom, Scroll, and None, and optionally the action can be performed only when the control is focused. This can be configured with the new OverviewInputMode.MouseWheelBehavior property.
  • If the new CanvasControl.QuantizeInputCoordinates property is enabled, world coordinates of mouse and touch events are rounded to nicer values to avoid unnecessary precision. For example, you'll get the value 326.375 instead of 326.3858109495. The rounding is chosen based on the zoom level to ensure that there is almost no visual deviation. Lower zoom levels will result in coarser rounding, higher zoom levels will use exactly as much precision as necessary. By default, this option is enabled.
  • Added text wrapping support to the template styles. This feature is available through the built-in converter function TextWrapConverter.


  • ShortestPaths: Added a-star (A*) algorithm for finding the shortest path between two nodes in a directed or undirected, arbitrary graph.
  • The new property OrthogonalLayout.maximumDuration controls the preferred time limit of this layout algorithm.
  • The new OrthogonalLayout.uniformPortAssignment property allows to obtain results with a more uniform port assignment.
  • TreeLayout: Added node placer CompactNodePlacer that produces more compact tree layouts. It uses a dynamic optimization approach that chooses a placement strategy of the children such that the overall result is compact with respect to a specified aspect ratio, see property CompactNodePlacer.preferredAspectRatio.
  • The new TreeLayoutData.CompactNodePlacerStrategyMementos property can be used to to maintain similar layout styles over subsequent runs of compact tree layout.
  • EdgeRouter now supports routing through user-specified intermediate points. All specified points will lie on the edge route in the given order. See new property EdgeLayoutDescriptor.intermediateRoutingPoints.
  • EdgeRouter: Edges that connect group nodes with their descendants can now directly connect from the inside to the group node border. Previously, an edge needed to always leave the group node before connecting to it. The feature can be enabled/disabled individually for each edge using the new property EdgeLayoutDescriptor.directGroupContentEdgeRouting.
  • Added convenience layout stage TemporaryGroupNodesInsertionStage that automatically generates a (non-nested) grouping structure from a given mapping of nodes to a component ID. This temporary grouping is meant for use during the run of the core layout algorithm of the stage. It allows, for example, easy use of RecursiveGroupLayout without the need for a real grouping structure when the requirement is that different sub-graphs need to be arranged with different layout algorithms.

    The new TemporaryGroupNodeInsertionData class provides additional configuration options for this algorithm.

  • The new stage PlaceNodesAtBarycenterStage places a user-specified subset of nodes on the barycenter of their neighbors. During the core layout, these node are hidden.



  • The TypeScript declaration files now support quick interface implementations.
  • The new yfiles.lang.Workarounds class provides properties that activate workarounds for known browser issues. This alternative way of setting workarounds is especially useful in ES6 modules where no reference to the yfiles top-level namespace is required anymore.
  • The new yfiles.lang.License object has a value property that can be set to the license values. This alternative way of setting the license data is especially useful in ES6-style code where no reference to yfiles is required anymore.
  • Errors thrown during the execution of the default implementations of ICommand.SAVE and ICommand.OPEN can now be caught by setting an error handler function to the yfiles.lang.Exception.handler property.
  • The IEnumerable.reduce method now uses the same argument order and semantics as the default Array.prototype.reduce method.
  • Rect and Size: Added methods to reduce the size of a Rect and a Size instance, respectively.
  • The new method GeneralPath.intersects(GeneralPath) determines whether the path intersects with another GeneralPath.
  • Saving a GraphML file now works in Safari 10.1 and 11 on macOS.
  • When reading GraphML with the deserialization property IGNORE_XAML_DESERIALIZATION_ERRORS enabled, invalid property content is now skipped instead of discarding the whole object with such content.
  • The GraphMLSupport.graphMLIOHandler property is initialized with a GraphMLIOHandler instance.


  • The default value of DefaultPortCandidate.locationParameter is now FreeNodePortLocationModel.NODE_CENTER_ANCHORED for nodes and BendAnchoredPortLocationModel.FIRST_BEND for edges instead of a parameter of an internal model.
  • Added a remove method to NodeDecorator, LabelDecorator, EdgeDecorator, PortDecorator, and BendDecorator for easy removal of decorations.
  • Many label model createParameter methods now have default values for parameters that are not needed every time.
  • InteriorStretchLabelModel: Added new parameters CENTER_HORIZONTAL and CENTER_VERTICAL for horizontal or vertical centered one-line labels.
  • The elementCopiedCallback or elementDuplicated parameter of the methods GraphCopier.copy and GraphClipboard.duplicate is now optional (and can be null).
  • DefaultGraph now fills the undo engine and triggers events in a consistent manner for all graph element factory methods.
  • DefaultGraph has new factory methods to customize undo unit creation.
  • The performance of GraphBuilder, TreeBuilder, and AdjacentNodesGraphBuilder was drastically improved if node and edge ID bindings are set. Additionally, these types have an improved API that makes it easier to customize the created and updated graph elements.


  • The new CanvasComponent.hitTestRadiusTouch property controls the hit test radius for touch interaction. The existing hitTestRadius property now only applies to mouse interaction. The ICanvasContext.HitTestRadius property automatically uses one or the other value, depending on the last input event.
  • The new CanvasComponent.dragSizeTouch property specifies the size of the area where a touch point may stay in before a movement is considered a drag. The existing dragSize property now only applies to mouse interaction.
  • Added the new CanvasComponent.limitFitContentZoom property which controls whether the maximum zoom level for the CanvasComponent.fitContent method as well as the fitContent command is restricted to 1 or the value of the maximumZoom property.
  • Akin to the two CanvasComponent.zoomTo methods, there are now two CanvasComponent.zoomToAnimatedmethods that animate the viewport change. The CanvasComponent.zoomToAnimated method now returns a Promise that fulfills when the viewport animation has finished.
  • The new CanvasComponent.updateVisualAsync method behaves like the invalidate method but yields a Promise that can be awaited for.
  • The new CanvasComponent.lastInputEvent property contains the lastMouseEvent or lastTouchEvent depending on which was dispatched last.
  • The CanvasComponent.cleanup method new removes all DOM children and attributes created during the lifetime of the CanvasComponent from its div element.
  • The CanvasComponent.sizeChangedTimerInterval property now is a proper TimeSpan instead of a simple number.
  • The new CanvasComponent.toWorldFromPage method converts from HTML page coordinates to world coordinates.
  • Improved styling of scrollbars and provided more CSS classes for different states of the scrollbar.
  • Improved zooming and scrolling behavior for touch pads in Chrome, Safari, Edge and Opera.
  • GraphModelManager now avoids unnecessary re-installation of items if they keep their ICanvasObjectGroup. By these re-installations the z-order of the item in its group was lost and a new visual was created.
  • The new method GraphModelManager.getMainCanvasObject returns the canvas object that should be used when changing the visibility or z-order of a model item.
  • ICanvasObjectGroup.addChild(Object,ICanvasObjectDescriptor): The second parameter is now an optional parameter. If no descriptor is passed, ICanvasObjectDescriptor.ALWAYS_DIRTY_INSTANCE is used by the default implementation.
  • Assigning a new graph instance to GraphOverviewComponent now keeps configuration changes made to the overview's IVisualCreator instance.
  • Self-loop edges are now properly displayed in the GraphOverviewComponent.
  • The new Animations.createSequentialAnimation method creates an animation that animates multiple animations in sequence.


  • PolylineEdgeStyle renders better looking paths for self-loop edges whose ports are near the node border.
  • The GeneralPath.createSmoothedPath method now has additional parameters to change how smoothing is applied. Those new options result in nicer smoothing when combined with large smoothing lengths and many different segment lengths of the path.
  • The stroke thickness is now considered for the calculation of the origin of the default arrow visualizations. Therefore, the visualizations no longer extend into the node bounds.
  • Template styles now search for binding converter functions in a static converter store object on the template type before checking the `window` object. This helps preventing pollution of the global scope.
  • Template styles can now bind to the current zoom level of the component.
  • Template styles now provide yfiles-selected, yfiles-highlighted and yfiles-focused CSS classes depending on their current state.
  • Some styles unnecessarily added empty SVG <g> elements to the DOM.
  • New instances of SolidColorFill are now automatically frozen which can result in performance improvements. This type was already immutable anyway.
  • The new static methods Stroke.setStroke and Fill.setFill are null-safe replacements for the existing applyTo methods of Fill and Stroke.


  • ItemClickedEventArgs now extends ClickEventArgs and therefore provides additional information like the IInputModeContext.
  • Added MouseEventRecognizers that recognize a current down state of a mouse button. These can be used to recognize ongoing gestures like drags, in contrast to recognizers for the actual mousedown event.
  • The static constants SELECTED_MOVABLES_POSITION_HANDLER and SELECTED_MOVABLES_HIT_TESTABLE have been added to GraphEditorInputMode. These are used as default IPositionHandler and IHitTestable properties of GraphEditorInputMode.moveInputMode and can be reused for other input modes.
  • The new GraphEditorInputMode.moveUnselectedInputMode property provides a child input mode for moving unselected items. It supersedes the previous createMoveUnselectedInputMode method. This input mode is disabled by default.
  • CreateEdgeInputMode now removes coinciding bends if orthogonal edge creation is enabled.
  • The new property CreateEdgeInputMode.prematureEndHitTestable allows for considering any location as valid target point for an edge.
  • The new CreateEdgeInputMode.getSourcePortCandidates protected method makes source port candidate determination more flexible.
  • CreateEdgeInputMode provides access to a dummy target node which is used during the interactive edge creation. This allows making the node visible during creation by setting a style and size.
  • CreateEdgeInputMode now supports edges ending without a valid target port candidate. This allows creating new target nodes together with a newly created edge.
  • During interactive edge creation, the tip of a newly created edge now only snaps to valid target port candidates to create orthogonal end segments.
  • The new CreateEdgeInputMode.dragCursor property specifies the cursor that is used during edge creation when no bend may be created at the current location.
  • CreateEdgeInputMode now always creates dummy ports during a gesture, instead of temporarily reusing real ports if available. This makes it possible to change, e.g. the dummy edge's source port's style during the gesture.
  • The new CreateEdgeInputMode.startOverCandidateOnly property can be used to restrict the start of an edge creation gesture to directly hovered port candidates.
  • CreateEdgeInputMode now supports showing port candidates at potential sources for edge creation, too.
  • Moving a node with the MoveInputMode for unselected nodes now moves the bends of incident self-loops, too.
  • MoveLabelInputMode: The visualization of a moved label has been improved. The new property visualization allows easy switching between a symbolic preview, a preview or a live view.
  • The new static methods PositionHandlers.combine combine multiple position handler instances into a single instance.
  • Added overridable methods to PortRelocationHandle to allow customization of the port candidates.
  • The new PortRelocationHandle.visualization property controls how the preview during edge reconnection is handled. A new option is to change the edge during the gesture, which improves fidelity of the preview in certain cases.
  • ClickInputMode now dispatches the clicked events in the same order as GraphInputMode, i.e. the more specific events LeftClicked, RightClicked, LeftDoubleClicked and RightDoubleClicked are now dispatched before Clicked and DoubleClicked. Hence, Clicked and DoubleClicked will only be triggered if the event wasn't handled before.
  • The events ItemTapped, ItemDoubleTapped, and CanvasTapped have been added to GraphInputMode.
  • The new TapEventArgs.tapCount property can be used to distinguish between single and multiple taps.
  • Added a originalEvent property to TapEventArgs and ClickEventArgs.
  • TouchEventArgs now provides the modifier keys that were pressed when the event was dispatched as well as those that have changed their state since the last TouchEventArgs.
  • The CanvasComponent.MouseClick event now reports the position of the mouse down event as its location, and the CanvasComponent.TouchClick event reports the location of the touch down event as its location. Previously, this was the location of the up events which can be slightly different.
  • The new properties MoveViewportInputMode.snapPanning and snapPanningThreshold allow for snapping touch panning to one axis.
  • The new optional content parameter of the MouseHoverInputMode.show method defines the content of the tool tip to show. Now, the getToolTipContent method only gets called if no content was specified.
  • The new methods findNextItem and findNearestItem of NavigationInputMode can be used to configure the determination of the "next" item.
  • The generic type parameter T of class ItemDropInputMode<T> is no longer restricted to IModelItem.
  • Several improvements of the interactive label editing.
    • Improved the focus handling of the text box.
    • Other elements can now be added to the default text box, e.g. buttons.
    • A new factory method allows replacing the text box with a custom label editor.
  • The new TextEditorInputMode.textBoxPlacementPolicy property provides finer control of what happens when the TextBox is (partially) outside of the viewport.
  • The new TextEditorInputMode.TextBoxPadding property controls the padding between the text box and the border of the canvas.
  • The properties maximumSnapDistance, showHitPortOwnerCandidatesOnly and visualization have been added to PortRelocationHandleProvider and are applied to each PortRelocationHandle created by this provider.
  • The following input modes now release the mutex before dispatching their final event:
    • CreateEdgeInputMode now releases the mutex before dispatching the EdgeCreated event.
    • MoveInputMode now releases the mutex before dispatching the DragFinished event.
    • ResizeStripeInputMode now releases the mutex before dispatching the DragFinished event.


  • The last parameter of the following extension methods of ITable is now optional: findRow, findColumn, findStripe, and findStripes.
  • TableEditorInputMode now handles clicks and taps similar to GraphEditorInputMode:
    • New ItemClicked, ItemLeftClicked, ItemRightClicked, ItemDoubleClicked, ItemLeftDoubleClicked, ItemRightDoubleClicked, ItemTapped, ItemDoubleTapped events are raised.
    • If an event is handled, its default behavior is prevented.
    • The new properties clickableItems and clickableRegions determine for which items and regions a click or tap event will be raised.

Layout and Algorithms

  • SmartEdgeLabelModel is properly handled by labeling algorithms now, resulting in better label placements.
  • The new LayoutExecutor.createLayoutGraphAdapter callback method makes it possible to configure the LayoutGraphAdapter that is used for the layout calculation.
  • The new improvePortAssignment property of LayoutExecutor and LayoutGraphAdapter enables PortCalculator to improve the port assignment.
  • Major performance improvement for EdgeRouter in routing scenarios where it is unavoidable to cross obstacles (e.g. other nodes or labels) in order to reach the target. This includes cases where a crossing is necessary to guarantee that port candidates/constraints at the target side are satisfied.

    In addition, several minor performance improvements reduce the runtime of the path search phase as well as the segment location assignment phase.

  • EdgeRouter: Improved quality in maze routing scenarios. Previously, it could happen that edge-node overlaps occurred even though there exists a more complicated path that yields no overlaps.
  • The combination of PartitionGridData and TableLayoutConfigurator has been improved:
    • PartitionGridData now reuses the PartitionGrid created by the TableLayoutConfigurator.
    • Several methods have been added to TableLayoutConfigurator which provide access to the PartitionCellId assignment of the configurator as well as the mappings between IRow/IColumn and RowDescriptor/ColumnDescriptor.
  • BusRouter: Now automatically ignores non-orthogonal edges with fixed bus descriptor (see BusDescriptor.fixed) or transforms them into orthogonal edges if they are octilinear. In previous versions, the layout algorithm simply throws an error in such cases.
  • MultiPageLayout: Improved runtime as well as layout quality if the input is a tree structure and the specified coreLayout is either an instance of class TreeLayout or ClassicTreeLayout. Furthermore, property MultiPageLayout.additionalParentCount allows to specify the number of additional proxies that the algorithm tries to add to a subtree. The original nodes associated with these proxies lie on the path of the tree's root to the subtree placed on a page.
  • MultiPageLayout: Added property createProxyReferenceNodes that allows to disable the creation of proxy reference nodes as well as property multipleComponentsOnSinglePage that allows to prevent that elements of different connected components are placed on the same page.
  • PortPlacementStage now additionally considers port grouping constraints. If two edges are port-grouped at a certain node, the stage assigns the same port location to the edges. Port groups are marked using DataProviders registered with PortConstraintKeys.SOURCE_PORT_GROUP_ID_DP_KEY and PortConstraintKeys.TARGET_PORT_GROUP_ID_DP_KEY.
  • TreeComponentLayout: Added property considerUndirectedTreesthat allows to specify whether or not undirected tree structures should be handled or not. Previously, only directed tree structures were considered.
  • DefaultNodePlacer and SimpleNodePlacer now both support to specify a minimum distance between the edge segments that are routed orthogonally in the channel between the root node and the child nodes, see method DefaultNodePlacer.minimumChannelSegmentDistance and SimpleNodePlacer.minimumChannelSegmentDistance respectively.
  • ClassicTreeLayout now allows to specify a minimum vertical distance for the horizontal edge segments of the bus, see ClassicTreeLayout.minimumBusSegmentDistance.
  • The new properties layerConstraints and sequenceConstraints of HierarchicLayoutData can be used to configure layer and sequence constraints for the HierarchicLayout. These supersede the previous layerConstraintFactory and sequenceConstraintFactory properties.


Graph and View

  • Corrected weird scrolling behavior of the scroll bar when the viewport was outside the content rectangle.
  • DefaultGraph now calls the onRemovingEdge and onRemovingPort methods before their incident items are removed.
  • The GroupingSupport.hasGroupNodes method now returns only true if there are actually group nodes in the graph. Previously, it returned also true if there once were group nodes which had been removed in the meantime.
  • Undo units created by the execution of a layout algorithm are now correctly merged with undo units of the previously executed interactive gesture.
  • The graph of IFoldingView.graph now raises the NodeCreated, EdgeCreated, PortAdded, LabelAdded, and BendAdded events after the created element is registered. This fixes a bug where the master item of the created item was not available in handlers for these events.
  • Sometimes, the GroupNodeDefaults.Labels.AutoAdjustPreferredSize property and the GroupNodeDefaults.Ports.AutoCleanup property were not considered for labels and ports of groups.
  • The commands COPY, CUT, and DUPLICATE are no longer enabled if there are no elements to cut, copy, or duplicate.
  • The ICommand.COPY command is no longer executed twice.
  • The methods GraphClipboard.copy and GraphClipboard.cut don't copy items anymore which depend on items that are selected but not included in GraphClipboard.copyItems.
  • The InteriorStretchLabelModel.getMinimumNodeSize method now uses the correct insets for width calculation. Previously the top insets were erroneously used for the width.
  • Labels rendered using DefaultLabelStyle and TextRenderSupport now properly consider the ascent for the first line of text and are thus rendered in a slightly higher location than before.
  • BevelNodeStyleRenderer, PanelNodeStyleRenderer, ShadowNodeStyleDecorator and ShinyPlateNodeStyleRenderer now consider the shadow in their isVisible and getBounds methods.
  • GraphML serialization: Write the IconLabelStyle.wrapped property with the correct name.
  • The GraphML compatibility layer can now deserialize ports placed with AnchoredPortLocationModel of yFiles for HTML 1.x.


  • GraphEditorInputMode and GraphViewerInputMode no longer ignore changes to their sub-input modes after having been installed once.
  • The KeyEventRecognizers SHIFT_IS_DOWN, ALT_IS_DOWN and CTRL_IS_DOWN now also recognize the modifier for touch events.
  • The following event recognizer of input modes and input-related classes can now also be used with touch gestures:
    • CreateBendInputMode.splitOrthogonalSegmentRecognizer.
    • ResizeStripeInputMode.resizeNeighborsRecognizer and ignoreContentRecognizer.
    • CreateEdgeInputMode.portCandidateResolutionRecognizer and enforceBendCreationRecognizer.
    • GraphInputMode.multiSelectionRecognizer.
    • TableEditorInputMode.multiSelectionRecognizer.
    • ReparentNodeHandler.reparentRecognizer.
    • PortRelocationHandle.portCandidateResolutionRecognizer.
  • The hitTestRadius property of the following implementations of ICanvasContext now correctly contain the value in world coordinates instead of view coordinates:
    • The context created by ICanvasContext.createCanvasContext when passing a CanvasComponent but no hit test radius.
    • The context passed to IPositionHandlers by MoveInputMode.
    • The context passed to adjacent handles when moving a bend handle.
    • The context passed to callback parameter in the IRenderContext.setDisposeCallback method.
  • Disabling MarqueeSelectionInputMode during the gesture via code left the marquee visible on the screen.
  • Panning with two fingers held down does no longer change the zoom level.
  • The Clicked and DoubleClicked events of ClickInputMode were sometimes missing when clicking on a node or edge. Now, they are always triggered unless the event was handled before.
  • Changing the values of the CreateEdgeInputMode.dummyEdgeGraph.edgeDefaults property had no effect for some interactions.
  • Node-to-edge snapping is now disabled by default which is the documented and intended value. For this, the initial value of the GraphSnapContext.nodeToEdgeDistance property is set to -1.0.
  • Snap lines which indicate the same size are no longer shown for implicitly re-sized parent group nodes.
  • The default implementation of IPortSnapResultProvider never returned any snap results.
  • The LabelEditingEventArgs.context.parentInputMode property provided in the events GraphEditorInputMode.LabelAdding, GraphEditorInputMode.LabelEditing, TableEditorInputMode.LabelAdding and TableEditorInputMode.LabelEditing now contains the corresponding GraphEditorInputMode or TableEditorInputMode instance.
  • The CreateEdgeInputMode.cancelGestureOnInvalidTarget property was sometimes ignored on touch-enabled devices.
  • CreateEdgeInputMode: The validBeginCursor is now correctly hidden during edge creation when bend creation isn't allowed.
  • Fixed an exception when enabling TextEditorInputMode.rotateTextBox.
  • Pen input was not handled at all on Android devices. Now, it is treated as mouse input.


  • When a stripe is removed, ITable.LabelRemoved events for the implicitly removed associated labels are now raised, too.
  • When a selected stripe label is edited its text box now is correctly placed.
  • ReparentStripePositionHandler: The source and target ghost visualization was not always updated correctly when custom ghosts were used.
  • Selected stripe labels no longer remain selected after their owning stripe is deleted.
  • Selected stripe labels no longer cause exceptions when hovering over them.
  • The selection indicator for selected stripe labels is now shown correctly.
  • The implementations of IStripeHitTestHelper and IBoundsProvider in the lookup of an IStripe could neither be decorated nor overridden by the context lookup provided by a stripe style.


  • Corrected an error in the Rectangle2D.contains(Rectangle2D) method. As a consequence of this error, the results of various algorithms and automatic layouts could have been wrong.
  • HierarchicLayout: Fixed problem that sometimes caused an unnecessarily large distance between adjacent layers.
  • OrthogonalLayout now considers edge grouping also if there are no directed edges specified.

Incompatible Changes

See the Migration Guide document (of your local yFiles for HTML installation) for more details and advice on migrating.

Incompatible API Changes

  • The IEnumerable.reduce method now uses the same argument order and semantics as the default Array.prototype.reduce method. This means the initialValue parameter is now the (optional) last parameter and the first element of the enumerable becomes the initialValue if that is undefined. Previously, the order of these two parameters was reversed.
  • Renamed MouseEventRecognizers and TouchEventRecognizers to be in line with the common JavaScript notation.
  • Renamed the values of the KeyEventType enum to match the corresponding JavaScript event type.
  • The CanvasComponent.sizeChangedTimerInterval property now is a proper TimeSpan instead of a simple number.
  • CanvasComponent: Removed the events MouseWheelZoomFactorChanged, MouseWheelScrollFactorChanged, AutoDragChanged and HitTestRadiusChanged. These events are unneeded since the corresponding properties are not changed by library code.
  • CanvasComponent: Removed the events GotFocus and LostFocus. These just duplicated the focus and blur events on the CanvasComponent.div element. Use these events instead.
  • The CanvasComponent.animateScrollTo method has been removed and is superseded by the new zoomToAnimated methods.
  • GraphModelManager.useHierarchicNodeNesting has been removed. Set the new hierarchicNestingPolicy property to HierarchicNestingPolicy.NONE to disable node nesting or to either HierarchicNestingPolicy.NODES or HierarchicNestingPolicy.NODES_AND_EDGES to use nesting. Similarly, GraphModelManager.useHierarchicEdgeNesting has been removed. Use either HierarchicNestingPolicy.NODES_AND_EDGES to enable edge nesting or any other policy to disable it.
  • ItemClickedEventArgs now extends ClickEventArgs.
  • The GraphInputMode.canvasClicked event now provides the GraphEditorInputMode or the GraphViewerInputMode as parent input mode in the context property of its ClickEventArgs.
  • The GraphEditorInputMode.createMoveUnselectedInputMode method has been removed. Use the property moveUnselectedInputMode instead.
  • GraphEditorInputMode: Removed the shouldClickCreateNode protected method.
  • CreateEdgeInputMode's edgeCreator might receive null as targetPortCandidate parameter. Callbacks must handle this case by either creating a target port of their own or canceling the edge creation by returning null.
  • The CreateEdgeInputMode.showPortCandidates property has now the enum type ShowPortCandidates instead of boolean.
  • The OverviewInputMode.autoMouseWheelZoom property is superseded by the new mouseWheelBehavior property.
  • The protected factory method MoveLabelInputMode.createLabelHitTestable has been removed. Developers who want to set a custom instance need to set it directly to the hitTestable property.
  • MoveViewportInputMode: The properties that controlled the inertia behavior have been removed since they no longer apply to the new algorithm. Instead, the new property inertiaDuration can be used to specify the duration of the inertia scrolling.
  • Replaced overloaded methods that are intended to be overwritten with non-overloading sets of methods since the latter are easier to actually override one by one. See the migration guide for details. The following methods are affected.
    • CreateEdgeInputMode.createEdge.
    • CreateEdgeInputMode.getSourcePortCandidate.
    • CreateEdgeInputMode.getSourcePortCandidateProvider.
    • CreateEdgeInputMode.getTargetPortCandidateProvider.
    • IPortCandidateProvider.getSourcePortCandidates.
    • IPortCandidateProvider.getTargetPortCandidates.
    • GraphClipboard.paste.
    • GraphCopier.copyNode.
  • Removed unnecessary Enabled parts from the following property names.
    • EdgeSegmentLabelModel.autoRotationEnabled is now autoRotation.
    • EdgePathLabelModel.autoRotationEnabled is now autoRotation.
    • LabelLayoutTranslator.autoFlippingEnabled is now autoFlipping.
    • SingleCycleLayout.fromSketchModeEnabled is now fromSketchMode.
    • SliderEdgeLabelLayoutModel.autoRotationEnabled is now autoRotation.
    • DiscreteEdgeLabelLayoutModel.autoRotationEnabled is now autoRotation.
    • CanvasComponent.mouseCaptureEnabled is now mouseCapture.
  • ReparentStripePositionHandler: All callback methods dealing with ghost objects have been renamed consistently:
    • updateXyzVisualisation to updateXyzGhost.
    • updateTargetVisualizationBounds to updateTargetGhostBounds.
  • Renamed all occurrences of cleanup to cleanUp in API names.
  • Renamed the enumeration value ShowFocusPolicy.WHEN_FOCUSED to ONLY_WHEN_FOCUSED.
  • Renamed the method SvgExport.getClip to createClip.
  • Renamed the Animator.destroy method to stop.
  • Renamed the methods CanvasComponent.globalToLocal to toViewFromPage and localToGlobal to toPageFromView.
  • The ITable.relativeLocation property has been removed. Use ITable.insets with corresponding left and top values instead.
  • The properties layerConstraintFactory and sequenceConstraintFactory of HierarchicLayoutData have been marked as obsolete. The new properties layerConstraints and sequenceConstraints should be used instead. Similarly, the extension methods HierarchicLayout.createLayerConstraintFactory(IGraph) and HierarchicLayout.createSequenceConstraintFactory(IGraph) have been marked as obsolete.

Changes of Default Behavior

  • Previously, even if the GraphModelManager.useHierarchicEdgeNesting property was set to true, canvas objects for edges were added to the GraphModelManager.edgeGroup as long as no group nodes were part of the graph. The corresponding new HierarchicNestingPolicy NODES_AND_EDGES has no such behavior and thus, edgeGroup is empty by default. Use one of the other polices if canvas objects for edges should be part of edgeGroup.
  • ClickInputMode now dispatches the more specific events LeftClicked, RightClicked, LeftDoubleClicked and RightDoubleClicked before the general Clicked and DoubleClicked events. Hence, Clicked and DoubleClicked will only be triggered if the event wasn't handled before.
  • The CanvasComponent.dragSize property no longer applies to touch input. Use the new property dragSizeTouch for controlling the drag size for touch input.
  • The CanvasComponent.hitTestRadius property no longer applies to touch input. Use the new property hitTestRadiusTouch for controlling the hit test radius of touch input.
  • Inertia scrolling of the viewport behaves now in a more natural way. The scrolling stops now after a fixed amount of time. Previously, the duration depended on the initial inertia velocity.
  • The LayoutExecutor.updateContentRect property is now enabled by default.
  • GraphBuilder, TreeBuilder and AdjacentNodesGraphBuilder: The values returned by a node or edge ID binding must now be a string or number.
  • If the TreeBuilder.idBinding property is specified, the childBinding must now resolve to values that contain the node IDs. Previously, it was fine if the values contained either the business objects or the IDs. If your childBinding resolves to values that contain the business objects, simply don't set an idBinding.
  • The CreateEdgeInputMode.dummyEdge property is now always reset after the edge creation was finished or canceled.
  • MoveLabelInputMode: The moved label now is visualized as a preview instead of a symbolic rectangle. Set the visualization property to Visualization.GHOST to restore the old mode.
  • In CreateEdgeInputMode the determination whether the mouse hovers over a valid end has changed. If forceSnapToCandidate is disabled, the endHitTestable now is queried first and a target port candidate is only searched if the hit testable returns true. Previously, the hit testable was only queried if no target port candidate was found at the current location.
  • GraphML: Duplicate properties on XAML input are now considered an error in accordance with the XAML specification.
  • PolylineEdgeStyle defaults to an improved smoothing algorithm when using the smoothingLength property. This is especially apparent when using large values for smoothingLength.
  • The stroke thickness is now considered for the calculation of the origin of the default arrow visualizations. This can result in a slightly different rendering of the arrows.
  • The default edge style of an IGraph now has a target arrowhead. This is in coherence with the default styling on other yFiles products.
  • Brightened the color of the marquee and lasso selection visualization.
  • By default, stripe labels that are programmatically selected or highlighted don't show a selection or highlight indicator anymore.
  • Rect.isFinite and Size.isFinite now also consider empty instances as not finite.

Minor Incompatible Changes

The changes listed in this section are incompatible changes that we consider as unlikely to break customer code. For most of them it is unlikely that the corresponding API was used in customer code.

  • The return type of the TextRenderSupport.measureText method is now Rect instead of Size.
  • The AnchoredPortLocationModelExtension class has been moved to the GraphML compatibility demo where it was really needed.
  • SolidColorFill, PatternFill, and all types related to gradients are now final. They were never intended to be extended. Brush is now abstract since it is pointless to instantiate this base class.
  • There is no constructor that only takes a renderer in StringTemplateLabelStyle and StringTemplatePortStyle anymore. A renderer may still be specified in the existing constructor as second parameter together with an optional template string.
  • The Property.defaultValue property has been removed since it was not intended to be part of the public API.
  • Removed the GraphMLSupport.getGraphMLIOHandler protected method in favor of the graphMLIOHandler property.
  • Removed the LayoutGraphAdapter.applyLayout static method which is the same as the IGraph.applyLayout method.
  • Removed the TextDecorations enum since it was an unused duplicate of TextDecoration.
  • Remove the unused InteractiveOrganicLayout.workingRatio property.
  • The protected method CollapsibleNodeStyleDecorator.createSelectionInstaller has been removed.
  • Error messages don't start with the error name anymore. The error name can be obtained through the dedicated name property of the error.
  • The following static methods were available at two different types, one intended and documented and one unintended and undocumented. The undocumented methods have been removed:
    • yfiles.graph.TableAnimation.createTableAnimation, use yfiles.view.IAnimation.createTableAnimation.
    • yfiles.graph.Table.getCellBounds, use yfiles.graph.ITable.getCellBounds.
    • yfiles.graph.Table.placeNodeInCell, use yfiles.graph.ITable.placeNodeInCell.
    • yfiles.layout.PartitionLayout.createPolylineInterEdgeRouter, use yfiles.layout.IPartitionInterEdgeRouter.createPolylineInterEdgeRouter.

Most Notable Demo Improvements

  • The renewed Angular demo demo shows how easy it is to integrate yFiles for HTML with Angular CLI. This is possible since this demo uses the ES6 module version of the library. The previous Angular demo is now available as Angular (SystemJS) demo.
  • The new Vue.js Node Template demo presents a template style for nodes powered by the Vue.js framework.
  • Instead of an AMD loader, the TypeScript demo now uses import statements and webpack together with the ES6 module version of the library. Consequently, the previous version of the demo was renamed to TypeScript (AMD) demo.
  • A new step for the Getting Started Tutorial demonstrates the minimal source code to add drag and drop to an application.
  • The graph-to-JSON converter of the demos now supports labels. This enhances the data exchange with other services and with code that runs as a web worker.