yFiles for HTML
Release Notes

New styles for graph items

The RectangleNodeStyle class is a new node style that uses a rectangular shape whose corners are either rounded or cut diagonally. Its properties specify which corners get rounded, the corner radius, its fill, and its border stroke. The new Rectangle Node Style Demo presents this style.

The new GroupNodeStyle class is a node style primarily designed for collapsed and expanded group nodes. It draws a (rounded) rectangle with an optional tab or ribbon, and offers extensive configuration options for an optional icon, its various fills, and paddings. The new Group Node Style Demo shows some of the possibilities of this style. The implementation of this style is in the new module file styles-group.

The new ArrowNodeStyle class draws a node as an arrow shape. The arrow can point in one of the four compass directions, and the arrow head slope, the shaft thickness, the fill, and the border stroke can be configured. You can interactively explore the settings of this style in the new Arrow Node Style Demo.

Similarly, the new ArrowEdgeStyle class draws an edge as an arrow shape. This style always points from the source port to the target port, ignoring bends, and can be configured in the same way as the node style. The new Arrow Edge Style Demo presents the options of this style.

The DefaultLabelStyle class now supports different common background shapes. The new Default Label Style Demo shows these shapes and other settings of this style.

The ShapeNodeStyle class now supports three additional shapes: HEXAGON2 (a six-sided polygon with tips at top and bottom), STAR5_UP (a five-pointed star with one tip pointing upwards), and PILL (a stadium shape with the shorter sides rounded). The new Shape Node Style Demo shows the main features of this style.

The new BridgeEdgeStyle class renders an edge as a 3-segment bridge with a given height between the edge’s source and target port locations. This is especially useful to distinguish parallel multi-edges between the same pair of nodes.

Wrap text to shape

The text wrapping feature of DefaultLabelStyle now wraps the text inside a given shape instead of just the rectangular label bounds. The TextWrappingShape enum provides the predefined shapes, and includes for example pill, ellipse, and hexagon. The new DefaultLabelStyle.textWrappingPadding property defines the padding between the chosen shape and the text.

If the predefined shapes don't fit your needs, you can override the DefaultLabelStyleRenderer.getPathForTextWrappingShape method to return any custom convex path as GeneralPath instead.

In a related improvement, an optional GeneralPath parameter has been added to the TextRenderSupport.addText method that defines a convex shape in which the text will be placed.

The Label Text Wrapping Demo now also shows how to wrap text labels inside non-rectangular shapes like triangles, ellipsis or hexagons.

New styling options in WebGL2 rendering

The following new styling options bring the configurability of WebGL2 rendering almost on par with the built-in styling features of the SVG rendering mode.

The new WebGL2GroupNodeStyle class is a dedicated WebGL2 style for group nodes with the same features as the new GroupNodeStyle class. The new Group Node Style Demo presents this style.

The WebGL2DefaultLabelStyle and WebGL2IconLabelStyle classes now support rotated text.

The new WebGL2PolylineEdgeStyle.smoothingLength property allows rendering edge paths with smooth, rounded bends in WebGL2 mode.

The styling of the selection, the highlight, and the focus indicators can now be customized in various ways, similar to the styling of graph items, with the various new style properties of the WebGL2SelectionIndicatorManager, WebGL2HighlightIndicatorManager, and WebGL2FocusIndicatorManager classes.

The WebGL2Stroke class now supports dashed and dotted lines, thus all graph item styles and all indicator styles can use such lines. In particular, all WebGL2 edge styles can now draw dashed edge paths. The new dashStyle property of strokes specifies the dash pattern, and its new lineCap property specifies the style of the line and dash caps.

The reworked WebGL2 Styles Demo and the new WebGL2 Selection Styling Demo allow you to interactively explore the new possibilities.

More powerful animations for WebGL2 rendering

New animations complement the existing fade, pulse and shake animations, namely:

• A scaling animations allow you to grow or shrink graph items.
• A beacon animation adds a beacon-like ripple effect to nodes.
• A halo animation makes a solid halo appear around a node.
• All dashed strokes of the graph item styles and the indicator styles (like the selection style) can be moved in an animated way.

All animations are shown in the extended WebGL2 Animations Demo.

Like before, an animation is created with its factory method at the WebGL2GraphModelManager class, but the API of these methods was refined to be more consistent and flexible. All factory methods now have a timing parameter of type WebGL2AnimationTiming to specify the duration, easing, iteration count, and direction of an animation. For easing, all typical easing functions are now available, namely ease, ease-in, ease-out, ease-in-out, linear, and step. Last but not least, WebGL2 animations can now be zoom-invariant for zoom values below 1.

The WebGL2Animation class has new methods to directly start, stop, and reset the animation, removing the need to control them with an Animator. The latter is still useful for running multiple animations in sync.

Compact disk layout

The new CompactDiskLayout class arranges a graph on a disk, packing the nodes as dense as possible. This layout is mostly suitable for graphs with small components whose loosely connected nodes should be grouped and packed in a small area.

The associated new class CompactDiskLayoutData allows to specify custom data considered during the layout calculation.

This layout is used in the Layout Styles Demo, Compact Disk Groups Demo, and Node Types Demo.

Cactus group layout

The new CactusGroupLayout class offers an alternative representation of hierarchically nested data. It places the children of a group along the groups circular border, resembling the structure of a cactus.

The associated new class CactusGroupLayoutData allows to specify custom data considered during the layout calculation. The implementation of the layout is in the new module file layout-cactus.

The Large Graph Aggregation Demos and the Cactus Group Layout Demo use this layout.

Modern look for handles, selection, scrollbars, etc.

The new Theme class provides an easy way to customize state and interaction visualizations like handles or selection. A theme is set to the CanvasComponent.theme property. Its settings apply to all supported elements, but it's still possible to override the theme on a per-element basis with the existing APIs.

In detail, a theme specifies a ThemeVariant, that defines the overall look, and primary, secondary, and background colors. Available variants are CLASSIC, that applies the current styling, and the new SIMPLE_SQUARE and SIMPLE_ROUND variants. These two use a more simplified styling with either rectangular or round shapes. A scale value can be set to increase the size of handles, port candidates and selected bends.

In addition, the scrollbars now have an optional new modern style and behavior similar to the current look of macOS, Windows 11, and mobile operating systems. If enabled, scrollbars appear only when needed and fade out after a small delay unless users interact with it. This can be enabled with the new ScrollBarVisibility.AS_NEEDED_DYNAMIC constant.

Most demos make use of the new simple-round theme and of the modern scrollbars. In the new Theming Demo, you can explore the effect of the options on the available variants, and the new Theming Tutorial shows how to set a theme in code.

Developer experience

By default, the TypeScript type declaration files work now as well in Visual Studio Code as they already did in WebStorm. Previously, yFiles for HTML came with different versions of these files for each IDE and users of Visual Studio Code could switch to types that worked better for them by running an extra script. This is no longer necessary due to the usage of a common syntax format.

New Features

View and Interaction

• The IPortLocationModelParameter interface now provides static helper methods to convert the built-in IPortLocationModelParameter implementations into key-value pairs. It also supports creating IPortLocationModelParameter instances from these key-value pairs.
• Similarly, the ILabelModelParameter interface now provides static helper methods which can convert the built-in ILabelModelParameter implementations into key-value pairs. It also supports creating ILabelModelParameter instances from these key-value pairs.
• The new property CanvasComponent.mouseWheelZoomEventRecognizer can be used to set the modifier for distinguishing between mouse wheel scrolling and zooming.
• The new getNodesRevealedAfterExpand, getEdgesChangedAfterExpand, and getEdgesChangedAfterCollapse methods of FoldingManager can be used to retrieve information about folding states used when a specified group node is expanded or collapsed.
• Holding down the scrollbar buttons will now scroll continuously in that direction. The same applies to keeping the scrollbar track pressed.
• The ImageNodeStyle class now supports a numeric aspectRatio property with which a specific aspect ratio of the rendered image can be set. In addition, the new async static ImageNodeStyle.getAspectRatio method can be used to determine the aspect ratio of an image.
• Handles can now react to mouse clicks and touch tap events. The handleClick method has been added to the IHandle interface and is called when HandleInputMode.clickedRecognizer or HandleInputMode.clickedRecognizerTouch was triggered on a targeted handle. To customize the general handle click handling, the Clicked event can be listened to or the HandleInputMode.handleClick method can be overridden.

WebGL2

• The new effect property on the WebGL2 edge styles (WebGL2PolylineEdgeStyle, WebGL2ArcEdgeStyle, WebGL2BridgeEdgeStyle) and WebGL2 label styles (WebGL2DefaultLabelStyle, WebGL2IconLabelStyle ) specifies shadows or ambient lights around edges or labels, respectively.
• The WebGL2 style of a new or restored graph item is now automatically set or restored by undo, paste, fold, and filter as it would be with a normal style. Previously, such a new item got a WebGL2 style converted from the normal style, and a manually set WebGL2 style would be lost.
• The rendering order of graph item types in WebGL2 mode can now be specified by reordering the corresponding canvas object groups of the WebGL2GraphModelManager class.
• To improve the time to the first paint, each complex WebGL2 program is accompanied by a simplified version that is fast to compile. On systems that support parallel program compilation in the background, these programs are loaded first and used for a first simplified rendering. Then an actual program is ready, it instantly replaces its simplified version. On systems without parallel compilation, this would just block the browser even longer, and therefore, these simplified programs are not used.

Organic Layout

• The OrganicLayout class now offers the possibility to define a group substructure scope, see the groupSubstructureScope property. Group substructures that lie in the specified scope are treated as substructures in the layout process, i.e., the child nodes are arranged on a disk that is contained in the group node.
• In addition, the new OrganicLayout.clusterAsGroupStructureAllowed property allows to specify whether detected clusters (see the clusteringPolicy property) are taken into account as group substructures.
• The OrganicLayout class now offers two new ChainSubstructureStyles called DISK and DISK_NESTED that lead to a compact disk-like layout for chains.
• The OrganicLayout class now offers the possibility to define tree substructures (stars, chains, cycles, and parallel structures are already supported). The OrganicLayout.treeSubstructureStyle property allows to specify the style of tree substructures and the OrganicLayout.treeSubstructureSize property specifies their minimum size (structures of smaller size are not handled as a tree substructure).

Radial Layout

• The RadialLayout class now supports a new layering strategy that produces a circular dendrogram drawing.
• The RadialLayout class now supports two new edge routing styles, namely a radial polyline style and a curved style. The radial polyline style produces edge paths which consist of a series of straight and arc segments. The curved polyline style routes the edges as curved bezier paths. In the latter case, the edge paths can be also returned as control points that represent cubic bezier control points.
• The RadialLayout now supports integrated node labeling i.e., the node labels are taken into consideration when determining the positions for the nodes of the graph and guarantees that labels will not overlap with other objects in the graph.

Other layouts

• The HierarchicLayout class now supports so-called tabular group nodes. The children of such groups are arranged in a compact tabular fashion, for example, like a single column table for layout orientation left-to-right. The HierarchicLayoutData.tabularGroups property allows to mark groups as "tabular" and the HierarchicLayoutData.tabularGroupChildComparers property allows to specify a custom order for the children.

  The new Tabular Groups Demo shows this new feature of the hierarchic layout.

• The BalloonLayout class now supports node types. The types influence the ordering of child nodes and the subtrees rooted at them such that nodes of the same type are preferably placed next to each other. Node types are weaker than a user-specified custom order defined via a comparison function. Types can be defined via the BalloonLayoutData.nodeTypes property.

  In the Node Types Demo, BalloonLayout, and CompactDiskLayout, are new layouting options.

• The CircularLayout now supports integrated node labeling i.e., the node labels are taken into consideration when determining the positions for the nodes of the graph and guarantees that labels will not overlap with other objects in the graph.
• The CircularLayout class now supports curved edge routing within and between circles.

Analysis

• The new RankAssignment analysis algorithm class solves the rank assignment problem on an acyclic graph using the simplex method.

• The new Intersections analysis class finds intersections and overlaps between graph items, featuring flexible configuration options to find only specific intersections. The respective IntersectionAlgorithm class provides the functionality also for the LayoutGraph API, but offers less convenience.

  The new Intersection Detection Demo shows how to use this analysis features to detect and highlight different types of intersections/overlaps between graph items.

Improvements

General

• Convertible properties and parameters of type IEnumerable now also accept generator functions.
• License validation now correctly handles web workers loaded from Blob URLs. Previously, this scenario has been erroneously classified as running from the file system.
• All enumerations in the library now have a static from method that allows to convert valid strings to the respective enumeration constant.
• The Exception.innerException property has been renamed to cause to conform to recent additions of the ECMAScript spec.
• The version of the yFiles npm packages now uses build metadata to indicate which variant of yFiles it is. Namely, the build metadata specifies whether it's an evaluation version (eval), whether it includes development mode information (dev), and whether it consists of only the viewer or layout parts of the API. Some of these were previously included in the pre-release part of the version string which was semantically not correct.
• It's now possible to have two independent yFiles instances, even in development mode, since no global yfiles object is created any more by this mode by default. The new global function yfilesDebug(ID? : string | Element) is the new way to call the previous yfiles.debug(ID) function.
• The API documentation provided with the TypeScript type declaration files has been improved to provide better readability in IDE help panels. Also, the properties of configuration options now provide proper documentation in the help panels.
• In the yFiles download packages, the library is now included as tgz npm packages, in both the normal and the development mode variant. This eliminates the need to assemble these packages at first startup, which sometimes caused problems.

Collections

• The new IEnumerable.at method provides a similar API for retrieving elements by index as the new native JavaScript Array method of the same name.
• The parameters of the IEnumerable.groupBy method are now similar to the recent TC39 proposal for the Array.group function. Note that for compatibility reasons with previous yFiles versions, its return value is still the same.
• The new IEnumerable.findLast and IEnumerable.findLastIndex methods provide a similar API for finding elements in an enumeration starting from the back as the new native JavaScript Array methods of the same name.

Graph

• GraphBuilder, TreeBuilder, and AdjacencyGraphBuilder now offer simplified access to a node/edge that has been created with a given ID or data item or accessing the data a node/edge has been created for via the new methods getNodeById, getNodeForItem, getDataItem(INode), getEdgeById (only GraphBuilder), getEdgeForItem (only GraphBuilder), and getDataItem(IEdge).
• The node parameter of the IGraph.setIsGroupNode is now correctly annotated as not-null, since the documentation always stated that this method throws an error if the node is null.
• The different GraphBuilders now also accept generator functions as nodes and edges source.

View

• All UI components now listen for the pointercancel event and handle it like lostpointercapture events. Thus, if such an event occurs, the CanvasComponent.TouchLostCapture event is now fired and active input modes properly clean up their internal state.
• GraphClipboard now respects the pasteDelta property value when pasting items without owner (e.g. edges without selected source or target node).
• ModelManager and its derived classes HighlightIndicatorManager, SelectionIndicatorManager, and FocusIndicatorManager now have install and uninstall methods for properly allocating and freeing resources when setting or removing a manager to a CanvasComponent.
• GraphModelManager: the properties nodeManager, edgeManager, portManager, edgeLabelManager, nodeLabelManager, portLabelManager, and provideUserObjectOnMainCanvasObject have been made public.
• The look and feel of WebGL handles can now be customized using the theme property of the CanvasComponent.
• GraphOverviewComponent with renderMode set to CANVAS or WEB_GL no longer draws nodes and edges that are hidden via VoidNodeStyle and VoidEdgeStyle.
• The CanvasComponent class now repaints more efficiently during animations if more than one Animator or the WebGL2Animation.start method is used.
• SvgExport now has an option to specify a background color for the exported SVG image.
• CanvasComponent.fitContent and GraphComponent.fitGraphBounds now both have a synchronous non-animated overload that does not have to be awaited.
• The freeze method of the Fill, Stroke, DashStyle, and GradientStop classes now returns the frozen object itself, reducing boilerplate code for single-use instances that should be frozen for performance reasons.

Styles

• Nodes rendered with the ShapeNodeStyle now respect their actual outline shape when selected with the LassoSelectionInputMode.
• DefaultLabelStyle's performance for single-line labels with wrapping enabled that actually do not need to be wrapped as well as updating the label visualization after a change has been improved.
• The documentation about configuring the item visualization has been improved. All styles and their configuration options are now described in a Developer's Guide chapter.

Interaction

• Input modes now listen for the Touch2DLostCapture event of the associated component, so that this event can be correctly detected in the 'recognizer' properties of an input mode.
• A sizeConstraintProvider property was added to NodeReshapeHandleProvider and NodeReshapeHandlerHandle that is queried during node resize gestures if no explicit minimumSize, maximumSize or minimumEnclosedArea are set.
• The input modes don't perform hit tests upon auto-repeated key down events for modifier keys anymore.
• The behavior of the inertia during touch inputs has been improved. As part of this improvement, synthetic mouse wheel events fired by Safari during pin gestures are now ignored.
• The new MoveViewportInputMode.allowSinglePointerMovement property can be used to disable moving the viewport with a single touch pointer. Disabling this property is especially useful for apps that allow editing since then, other gestures like moving items or creating edges can be configured to start without a long press.
• Cursor property changes of active input modes are now immediately reflected in the mouse cursor. Previously, the mouse cursor might have been updated only after the next mouse event.
• The new MoveInputMode.validBeginCursor property offers the possibility to use different cursors for signaling a valid position for beginning a move operation and actually moving items.
• The ResizeStripeInputMode class now offers the possibility to customize the cursors for signaling a valid position for beginning a resize operation as well as actually resizing columns or rows.
• The ResizeStripeInputMode class now offers properties to set an invalid end cursor for column and row resize. The invalid end cursor is shown during resize operations if the column or row in question cannot be resized to the current mouse position..
• The validBeginRecognizer and validBeginCursor properties have been added to LassoSelectionInputMode, MarqueeSelectionInputMode and MoveViewportInputMode. The validBeginRecognizer can be used to indicate whether the selection respectively move viewport gesture may begin in which case the validBeginCursor is used.
• The property MouseHoverInputMode.validHoverLocationCursor has been added that is used when the validHoverLocationHitTestable returns true for a location.
• The property ContextMenuInputMode.validMenuLocationCursor has been added that is used when the ValidMenuLocationHitTestable returns true for a location.
• IReparentHandler.isValidParent is now also called with null as new parent during the drag gesture if no real parent node has been tested for the location.
• Keyboard navigation with NavigationInputMode now always considers the current item to navigate from, regardless of the value of the navigableItems property.
• The GraphClipboard now raises the events ElementsCutting, ElementsCopying, ElementsPasting, and ElementsDuplicating at the very beginning of the cut, copy, paste, and duplicate methods.
• GraphEditorInputMode now raises the SelectionGrouping and SelectionGrouped events at the start and end of the groupSelection method. Similarly, the SelectionUngrouping and SelectionUngrouped events are raised at the start and end of the UngroupSelection method.
• The new CreateEdgeInputMode.sourceNodeDraggingCursor property offers the possibility to customize the cursor that is shown while the mouse is still over the source node after starting the edge creation.
• Changes to ItemHoverInputMode's hoverCursor property now take effect immediately if the mouse pointer is currently hovering over an item.
• The TextEditorInputMode class now releases the mutex before raising the TextEdited event.
• CreateEdgeInputMode now allows for asynchronous edge creation. The edgeCreator callback as well as the createEdge method may now return a Promise that resolves with the asynchronously created edge.
• GraphEditorInputMode now allows for asynchronous node creation. The NodeCreator callback as well as the CreateNode method may now return a Promise that resolves with the asynchronously created node.
• Tooltips with a custom toolTipParentElement are not wrapped unexpectedly anymore when overflowing the tooltip parent element.
• ReparentStripeHandler can now be initialized with option arguments to more conveniently initialize instance properties at creation.
• The touch pan gesture can now be configured to start with two fingers instead of one, using the MoveViewportInputMode.startWithTwoPointers property.
• The snap lines indicating that a node will be resized to the same width or height than another one now keep a bit more distance to their node so that they are better recognizable.
• The MoveViewportInputMode.Uninstall method is now virtual and can be overridden in derived classes.

WebGL2

• WebGL2 animations can now loop indefinitely.
• WebGL2IconNodeStyle, WebGL2DefaultLabelStyle, WebGL2IconLabelStyle now support two rendering hints to resolve blurriness of text and icon labels on large zoom values, namely using blurriness or sharpened edges.
• The scaling of WebGL2 arrows has been adjusted to produce reasonable arrow sizes for thick edges.
• Non-selfloop edges with WebGL2ArcEdgeStyle are now drawn smoothly without kinks.
• The WebGL2GraphModelManager.getWebGL2LabelStyle method may now return an instance of either a WebGL2DefaultLabelStyle or, new, a WebGL2IconLabelStyle. Although the default implementation does not return instances of WebGL2IconLabelStyle, a custom implementation might want to do this.

TypeScript

• The ILookup.lookup method now infers its return type from the given parameter.
• TextRenderSupport.addText now advertises the proper type for its targetElement parameter in the typings and not just the documentation.
• The License.value property has now the more specific type Record<string, unknown> instead of object.

Hierarchic Layout

• The HierarchicLayout class now allows to combine the SimplexNodePlacer.straightenEdges and SimplexNodePlacer.barycenterMode properties. Previously, edge straightening was not supported in barycenter mode.
• The HierarchicLayout class generates more compact results for some cases with edges between nodes of the same layer and integrated edge labeling where previously unnecessarily large distances to the label and edge were kept.
• The HierarchicLayout class now places nodes without any edges as far left as possible without violating any constraints. That way they do not disturb the layout for the connected part of the graph.
• For input graphs with a PartitionGrid structure, the HierarchicLayout class now correctly considers the layering produced by the fromScratchLayerer if it is already compatible with the specified grid structure. Previously, for such cases, the algorithm may have calculated an entirely different layer assignment.
• The HierarchicLayout class now considers the flow direction to place the ports of port groups when combined with direct group content edges.
• The HierarchicLayout class comes with an improved support for subcomponent layouts (see HierarchicLayoutData.subcomponents). Defining subcomponents now works by assigning instances of the new SubcomponentDescriptor class to nodes so that nodes mapped to the same descriptor instance form a component. Components that have inter-edges only to a single non-component node are now integrated directly at that node when using the new placement policies SubcomponentPlacementPolicy.ALWAYS_INTEGRATED or SubcomponentPlacementPolicy.AUTOMATIC (and if the orientation of the sub-layout permits it). The overall results for such cases feature better edge routing quality and more compact drawings.
• The HierarchicLayout class now uses a more compact layer placement for graphs with edge labels between layers.
• The HierarchicLayout class now requires fewer bends for some inputs with grouped edges and port constraints or port candidates.

Edge Router

• The EdgeRouter class now produces better results for some setups with monotonic path restrictions and edges with vertically/horizontally overlapping endpoints.
• The EdgeRouter class now tries to avoid routes that cross fixed external ports of other edges as well as fixed internal ports at group nodes of other edges. The new property PenaltySettings.portCrossingPenalty allows to specify the cost of such crossings.
• The EdgeRouter class now supports buses that include self-loops (see the BusDescriptor class). Previously, self-loops have been ignored.

Other layouts

• Several layout algorithms have been improved in performance in certain situations, including HierarchicLayout and EdgeRouter. The improvement is most noticeable in certain settings for larger, complex graphs.
• The OrganicLayout class now produces stable results for inputs with node labels and in deterministic mode, where it previously could generate a slightly different arrangement when applied twice with the same parameters.
• The OrganicLayout class now allows to specify custom node clusters by setting the clusteringPolicy property to ClusteringPolicy.USER_DEFINED. The custom cluster IDs have to be specified by means of the OrganicLayoutData.clusterIds property.
• Root Alignment in GenericTreeLayout can also factor in the port position to straighten out an edge.
• The TreeLayout class now also supports integrated edge labeling for configurations that use a LayeredNodePlacer.
• The CircularLayout class now supports node types (see CircularLayoutData.nodeTypes) also for the layout of the cycle partitions. Previously, the types had an influence only on the layout of a partition itself. If all nodes of a partition are of the same type, then the partition gets that type as well, so that partitions of same type are preferably placed next to each other.
• The CircularLayout class has received a faster algorithm for calculating edge bundles.
• The generic labeling algorithm has an additional preset to avoid overlaps of labels and the partition grid.
• The TemporaryGroupNodeInsertionStage class now automatically marks inserted group nodes with an IDataProvider registered to the input graph with the key INSERTED_GROUP_NODE_DP_KEY.
• The TemporaryGroupNodeInsertionStage class now also supports specifying hierarchically nested temporary groups. Therefore, the new TemporaryGroupDescriptor class has been added.

Analysis

• The TraversalDirection enumeration used by the Neighborhood and Bfs algorithms has been extended. The enum value UNDIRECTED has been added that ignores the edge direction and corresponds semantically with the previous value BOTH. The meaning of BOTH has been adjusted to indeed return the union of the SUCCESSOR and the PREDECESSOR results. To keep the default behavior of the Neighborhood and Bfs algorithms, the default value of their TraversalDirection property has been changed from BOTH to UNDIRECTED.
• The GraphStructureAnalyzer class now supports operating on a subset of the graph.
• The new subgraphNodes and subgraphEdges properties on the Reachability class allow to define a subset of nodes/edges the algorithm should operate on.

Bugfixes

General

• In Viewer and Layout yFiles packages, the UMD library now correctly specifies the view.js and, respectively, the layout.js file as main entry point in its package.json file.

Graph

• The key parameter of the InputHandlerBase.setValue method is now annotated correctly as nullable. The key may be null when the model item used as key is created after its data has been parsed.
• Label bindings which don't provide label data (or null) no longer add empty labels. Instead, no label will be added.
• Enumerating the Mapper.entries property no longer throws an exception.

View

• PortRelocationHandle.visualization can now be set to Visualization.GHOST without throwing an exception.
• Changing the ICanvasObject.group property no longer triggers unnecessary recreation of the visuals anymore.
• A tooltip which is displayed at a given location by calling the MouseHoverInputMode.show method is no longer immediately hidden after each mouse move. It now respects the mouseHoverSize property.
• Calling IFoldingView.collapse on a normal (i.e. non-group) node no longer creates an UndoUnit or a view state (which included an unexpected call to IFolderNodeConverter.initializeFolderNode even though the result would have never been used). Now calling IFoldingView.collapse on a normal node does nothing.
• The automatic flipping behavior of labels now also works with projections that distort the labels.
• Grid snap results now correctly use the resource registered under SnapLine.SNAP_LINE_STROKE_KEY.

Styles

• TableNodeStyle now allows the table background style to access the table node's tag.
• Text rendering no longer causes the text to not be rendered in rare circumstances when no text trimming and no clipping were used.

Interaction

• The GraphEditorInputMode.adjustContentRect method now only updates the CanvasComponent.contentRect property once per call. Previously there have been circumstances where the property would have been updated twice unnecessarily.
• TableEditorInputMode no longer changes the GraphComponent's selection property unnecessarily when GraphComponent's graph property is changed.
• Multiple DropInputMode instances now correctly consider their respective priorities.
• UndoEngine no longer adds an empty undo unit for an aborted operation in certain rare cases.
• Same-size snaplines now use the same default color as the other snaplines.

WebGL2

• Single character labels, and other very small labels, are now rendered with the correct vertical alignment. Previously, they were rendered too low.
• WebGL2 effects should become invisible while zooming when they become so small that they are barely visible. This now happens at the appropriate zoom levels instead of much too early.
• The WebGL2IconNodeStyle now correctly centers the icon.
• FilteredGraphWrapper now correctly updates WebGL2 visibilities on predicate changes.
• Various sporadic problems with WebGL2 rendering mode on macOS have been fixed.

Layout

• The HierarchicLayout class now correctly considers the specified halos of group nodes when there is a partition grid defined.
• The SimplexNodePlacer class of the hierarchic layout no longer throws an error due to a number overflow for very, very wide layouts.
• The OrganicLayout class now correctly considers the specified PartitionGrid if substructure detection is enabled. Previously, the grid cell assignment of nodes belonging to a substructure has been ignored.
• The OrthogonalLayout class now correctly handles input graphs with parallel edges if the preferParallelRoutes property is enabled. Previously, such inputs have caused exceptions in some rare cases.
• The EdgeRouter class now correctly interprets specified intermediate points (EdgeLayoutDescriptor.intermediateRoutingPoints) as well as bus points (BusDescriptor.busPoints) in the case when the algorithm runs inside an orientation layout with an orientation other than TOP_TO_BOTTOM.
• The EdgeRouter class now correctly handles direct content edges that are incident to group nodes with PortCandidateSets.
• The EdgeRouter class now correctly considers octilinear segments when using the SEGMENTS_AS_NEEDED or PATH_AS_NEEDED RoutingPolicy enumeration value.
• The ClearAreaLayout class now correctly considers the initial partition grid assignment of the nodes.
• TableLayoutConfigurator now treats tables without rows or columns as tables with exactly one row and column instead of throwing an exception.

Incompatible changes

Also see the Migration Guide in the documentation for more details and advice on migrating.

General

Incompatible API Changes

• Due to the new install and uninstall methods of the ModelManager class, the following of its members have been changed:
  • The CanvasComponent constructor parameter has been removed. Instead, you can call the new Install method with the CanvasComponent as parameter. Similarly, the CanvasComponent constructor parameters of the derived classes have been removed, too.
  • Its existing protected methods install and uninstall have been renamed to installItem and uninstallItem.
  • Its protected methods add and remove have been renamed to addItem and removeItem.

  In a related change, the optional SelectionModel and Model parameters of HighlightIndicatorManager and SelectionIndicatorManager have been removed from the constructors, too. Instead, you can set the corresponding properties directly.

• The IHandle interface has a new method handleClick. This method must be implemented by custom handle implementations.

• The return value of the CreateEdgeInputMode.createEdge method and of the function which can be set as edgeCreator has been changed to IEdge | Promise<IEdge|null> |null.

  Similarly, the return value of the function which can be set as GraphEditorInputMode.nodeCreator has been changed to INode | Promise<INode|null> |null.

• The NavigationInputMode.adjustGroupNodeLocation method has now an additional parameter expandedSize that specifies the size of the group node when it is expanded.
• The LabelCreator.addLabel method can return null if no label is added.
• The LabelCreator.updateLabel method now returns a boolean value: true if the label has been updated, false if the label should be removed.
• The protected ImageNodeStyleRenderer.getPreserveAspectRatio method has been removed in favor of the new getAspectRatio method.
• The animation API of the WebGL2GraphModelManager class has been refined to be more consistent and flexible. All animation factory methods now have a timing parameter of type WebGL2AnimationTiming to specify duration, iterations, easing, and direction of an animation.
• The ILookup.lookup method is now generic and infers its return type from the given parameter. TypeScript implementations of that method must be adapted accordingly. Nothing changes for JavaScript.
• The WebGL2NodeEffect enum was renamed to WebGL2Effect since it can now be used for effects of nodes, edges, and labels.
• The createNodeEffectFadeAnimation and createNodeEffectPulseAnimation methods of WebGL2GraphModelManager were renamed to createEffectPulseAnimation and createEffectFadeAnimation.
• The Fill.freeze, Stroke.freeze, DashStyle.freeze, and GradientStop.freeze methods now return their respective containing type.
• The Exception.innerException property has been renamed to cause to conform to recent additions of the ECMAScript spec.
• The node parameter of the IGraph.setIsGroupNode method is now correctly annotated as not nullable. The documentation already stated that this method throws an error if the node is null.
• The License.value property has now the more specific type Record<string, unknown> instead of object.
• The protected GraphEditorInputMode.shouldClickCreateNode method has now been removed. It was only added accidentally, had no effect and its removal had already been announced.
• The NodeAggregation.multiThreadingAllowed and NodeAggregationAlgorithm.multiThreadingAllowed properties have been removed since they had no effect.

Incompatible API changes in the Layout part

• The HierarchicLayoutData.subComponents property has been replaced by the new HierarchicLayoutData.subcomponents property with a different signature. The new property uses instances of the new SubcomponentDescriptor class to define subcomponents, and the layout algorithm responsible for a component is now specified via the new SubcomponentDescriptor.layoutAlgorithm property.

  Similarly, the data provider keys HierarchicLayout.SUB_COMPONENT_ID_DP_KEY and HierarchicLayout.SUB_COMPONENT_LAYOUT_ALGORITHM_DP_KEY have been replaced by the new key HierarchicLayout.SUBCOMPONENT_DESCRIPTOR_DP_KEY that assigns instances of the new SubcomponentDescriptor class to nodes.

• The TemporaryGroupNodeInsertionData.components property has been replaced by the temporaryGroups property of type TemporaryGroupDescriptor, which now specifies groups and the applied recursive group layout algorithm.

  Similarly, the data provider key TemporaryGroupNodeInsertionStage.COMPONENT_LAYOUT_ALGORITHM_DP_KEY was removed and the name of the key TemporaryGroupNodeInsertionStage.COMPONENT_ID_DP_KEY has been changed to TEMPORARY_GROUP_DESCRIPTOR_DP_KEY.

• The direction parameter of the BfsAlgorithm.getLayers method now uses the new BfsDirection enum instead of the TraversalDirection enum. TraversalDirection got a new member that doesn't apply to this method, and BfsDirection reflects the options previously available. Note that this is expert API and you typically would use the Bfs class, instead.
• The type of the EdgeCellInfo.cellSegmentInfos property has been changed from YList to CellSegmentInfo[].
• The following affects only the legacy UMD variant of the library: The NodeLabelingPolicy enum has been moved from the namespace yfiles.tree to yfiles.layout. The reason is that the policy is now not only supported by BalloonLayout but also by CircularLayout, RadialLayout and CactusGroupLayout.
• The DataProviderAdapter.defined method has been removed since it had no effect.

Changes in default behavior

• The semantic of the TraversalDirection.BOTH enum value used by the Neighborhood and Bfs algorithms has been changed and does not ignore the direction anymore, but now returns a union of the SUCCESSOR and the PREDECESSOR results instead. The old behavior can be restored by using the new TraversalDirection.UNDIRECTED enum value. Consequently, the default value of the TraversalDirection property of both the Neighborhood and the Bfs algorithm has been changed from BOTH to UNDIRECTED.
• With the graph builder classes, label bindings which don't provide label data (or provide null) no longer add empty labels. Instead, no label will be added. Similarly, for label sources, no label will be added for data items for which the LabelCreator.textProvider returns null.
• When starting to drag the handle of a selected item, the handle isn't replaced anymore by a new handle instance provided for the selected item. Previously, this happened automatically, regardless of whether necessary to support use cases where state changes should result in a different handle instance. Now, the GraphEditorInputMode.requeryHandles method has to be called explicitly when changes are made that affect handles that are potentially already visible. Alternatively, a proxy implementation can be used that dynamically dispatches to new instances on its own when required.
• The HandleInputMode class doesn't initialize a handle drag as soon as the handle is pressed, anymore. Instead, it waits until the draggedRecognizer or draggedRecognizerTouch is triggered. When pressed, the mutex is already acquired, which discards other concurrent input modes. This can be turned off by setting the requestMutexOnPress property to false.
• In WebGL2 rendering mode, handles and selection indicators no longer adopt styling specified with CSS classes. Instead, more comprehensive styling options are available with the new Theme class and the style properties of the WebGL2SelectionIndicatorManager, WebGL2HighlightIndicatorManager, and WebGL2FocusIndicatorManager classes.
• The WebGL2GraphModelManager.getWebGL2LabelStyle method may now also return an instance of WebGL2IconLabelStyle (but the default implementation does not).
• Formatting text with the TextWrapping.WORD_ELLIPSIS option still wraps at word boundaries, but now trims character by character to better match the CSS text-overflow behavior and make more efficient use of the remaining space.
• The lists returned by the GraphPartition.getCells, DynamicObstacleDecomposition.getCells and DynamicObstacleDecomposition.getObstacles methods are no longer unmodifiable.

Deprecations

• The BevelNodeStyle, ShinyPlateNodeStyle, and PanelNodeStyle classes and their renderers are now deprecated. Their appearance is rather outdated, and some of them are not very configurable. For group nodes, have a look at the new GroupNodeStyle class.
• The IEnumerable.firstOrDefault and lastOrDefault methods are now marked as deprecated since they duplicate the find and findLast methods, and the latter have the same name as the corresponding methods of the native JavaScript Array.

New demos and noteworthy demo improvements

To check out the new demos in the demo overview, filter it to the version "v2.5.0.0".

Besides the demos for new features that are mentioned above, we added the following demos:

• Several new demos show how to customize the graph builders to support ports. The new Port-aware Graph Builder Demo, Port-aware Adjacency Graph Builder Demo, and Port-aware Tree Builder Demo, now provide modified builder configurations which can be easily adjusted for various needs.
• The new Tree of Life Demo shows an interactive radial dendrogram visualization for the so-called Tree of Life.
• The Organic Substructures Demo got UI options for the new tree and group substructure feature, and corresponding sample graphs. Also, there is now an option for the new disk style of chain substructures.
• The new Valid Begin Cursors Demo shows how to configure different input modes, so that different cursors indicate which gesture is valid to start at that location.
• The Z-order Demos ZOrderSupport class does not use custom overrides of GraphEditorInputMode, GraphModelManager, and GraphMLIOHandler anymore. That way, using the ZOrderSupport class in other applications that already use a custom GraphEditorInputMode or GraphModelManager is now easier.
• The AggregationGraphWrapper now provides a faster alternative to separate all aggregations in the graph with the new separateToOriginalItems method. This class is used by the Large Graph Aggregation Demo and the Interactive Aggregation Demo.
• The Dojo and WMR demos are no longer part of the yFiles package because the maintenance overhead was very high considering the rather low popularity of these frameworks. You can still find these demos in the GitHub history if you are interested.