yFiles for HTML
Release Notes

Hide Description
Open in yEd LiveDownload

Release Notes

The newest major release of yFiles for HTML is version 2.4. Read the blog post Version 2.4 of yFiles for HTML to learn more about the new features, and find the list of all changes below.
The latest release of yFiles for HTML is version 2.4.0.4.

See the change log for the new features and changes of all versions.

Technical Requirements

  • For development, we strongly recommend an IDE with dedicated support for JavaScript, for example WebStorm and IDEA Ultimate from JetBrains, or Visual Studio Code.
  • yFiles for HTML-based web applications require an HTML5-capable browser with adequate SVG support. See the browser compatibility list for more details.

yFiles for HTML 2.4 - Changes Since 2.3.0.4

yFiles for HTML 2.4 Release Notes

New WebGL 2.0-based rendering

yFiles for HTML 2.4 Release Notes

New layout support for node types

yFiles for HTML 2.4 Release Notes

New integrated yFiles dev suite

Major New Features

WebGL 2.0-based rendering mode

The new WebGL2GraphModelManager allows for leveraging WebGL 2.0 for the GPU-accelerated rendering, editing, and animation of very large graphs. The rendering path comes with an extra set of style implementations for nodes, edges, and labels. The style implementations come with built-in hardware accelerated animations and interactivity, allowing smooth editing and animation for several hundred thousand elements even on mid-range graphics card adapters. The new infrastructure lends itself especially well for large graph visualizations and can be toggled on/off to support the full yFiles extensibility and editing fidelity, when required. The infrastructure is bundled as an extra bundle that will be automatically removed by tree-shaking tool-chains, when not required.

WebGL2Visual is a new base class implementation for visuals that want to use WebGL 2.0 for the rendering of custom visuals, which is now supported in addition and in parallel to WebGL 1.0, HTML5 Canvas, and SVG by the rendering pipeline.

The features and possibilities of this new rendering mode are shown in the following new demos: Large Graphs Demo, Large Collapsible Tree Demo, WebGL2 Styles Demo, WebGL2 Icon Node Demo, WebGL2 Animations Demo, and Rendering Optimizations Demo.

Web Worker

The new pair of classes LayoutExecutorAsync and LayoutExecutorAsyncWorker make it very easy to add multi-threaded layout and algorithm execution to your web applications. Using a similar API as the existing LayoutExecutor class, work can be offloaded off the main-thread and performed on one or more Web Workers or external processes (other browser tabs, browser instances, or even Node.js servers) in parallel without blocking user interactions or animations on the main thread.

New demos show how to add Web Worker-based layouts, and existing examples for the major third party framework examples like Vue.js, React, Angular, Webpack, Node.js, and Rollup.js have been updated to show the new approach.

Smooth Animations

Many viewport transitions are now smoothly animated. This prominently includes scrolling and zooming with the mouse wheel, but also the various commands, such as zooming via a toolbar button, fitting the graph into the viewport, interacting with the overview, and many others. This can be turned off for individual interactions via the new CanvasComponent.animatedViewportChanges property, and customized with the new protected method CanvasComponent.getViewportAnimationDuration.

Support Nodes of Different Types in Layout

Many of the yFiles layout styles now support node types. Typically, a layout places nodes of the same type closer together or in a similar way. The following layout styles support node types:

In the HierarchicLayout class, types influence the ordering of nodes within their layers as a subordinate optimization criteria. More precisely, nodes of the same type are more likely to be placed next to each other if this does not violate other constraints.

For the TreeLayout and ClassicTreeLayout classes 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 a weak criterion, i.e., if the ordering and placement is determined by other constraints, these are prioritized. Types can be defined via the TreeLayoutData.nodeTypes property.

The OrganicLayout class now allows to define node types via the new OrganicLayoutData.nodeTypes property. The types control the detection of substructures (e.g. stars, parallel structures). When types are defined, only nodes of the same type can form a substructure. For star-like and parallel substructures, it is also possible to have a single substructure with nodes of different types, see properties parallelSubstructureTypeSeparation and starSubstructureTypeSeparation. The algorithm still tries to highlight the different types by choosing a suitable layout for these components (e.g., placing nodes of the same type closer together or on the same circle).

The OrthogonalLayout class now allows to define node types via the new OrthogonalLayoutData.nodeTypes property. The types control the detection of substructures, i.e., chains, cycles and trees. When types are defined, only nodes of the same type can form a substructure.

The CircularLayout class is now able to separate nodes that are on the same cycle with respect to their node type. For this, the new NodeTypeAwareSequencer class can be set as NodeSequencer on the CircularLayout.singleCycleLayout. Node types are specified via the CircularLayoutData.nodeTypes property.

In the ComponentLayout class, the types influence the arrangement and ordering of the the components such that components consisting mostly of nodes of the same type are put close to other components consisting of nodes of that type. Use the ComponentLayoutData.nodeTypes property to define types.

The node types feature is shown in the new Node Types Demo and the new Organic Substructures Demo.

Edge Routing Only if Needed

Optionally, the EdgeRouter, ChannelEdgeRouter and BusRouter classes now automatically determine whether or not a new path should be calculated for a certain edge. This is controlled via the new properties EdgeRouterEdgeLayoutDescriptor.routingPolicy, ChannelEdgeRouter.routingPolicy and BusRouterBusDescriptor.routingPolicy, respectively. The decision is based on the quality of the existing routes - edges with strict violations of the routing style or that intersect other elements will be selected for routing. Available options:

  • RoutingPolicy.ALWAYS: A new route is calculated in any case. This was the previous behavior and remains the default.
  • RoutingPolicy.PATH_AS_NEEDED: The algorithm determines whether a new route is needed. If an edge is selected, its current path is not considered when computing a new route.
  • RoutingPolicy.SEGMENTS_AS_NEEDED: The algorithm determines whether a new route is needed. If an edge is selected, its current path is preserved as much as possible. Only the required segments are changed. This is only supported by the EdgeRouter class.

The new penalty property PenaltySettings.sketchViolationPenalty supported by the EdgeRouter class defines the cost for a deviation from the original edge path if the new routing policy property is set to SEGMENTS_AS_NEEDED.

This feature is shown in the new Interactive Edge Routing Demo.

More Precise TypeScript Type Declarations

The TypeScript type declarations for yFiles for HTML are now more precises for a lot of yFiles API members. JavaScript projects will benefit from these improvements, too, since the IDEs' code completion for JavaScript projects is based on these files, too. Some notable improvements are:

  • New TypeScript definition files for TypeScript 4.3 and higher allow for a more exact documentation of properties whose getter and setter have different types. This is especially useful for setters that support type conversion.
  • The type declarations of the UMD module have been changed to a slightly different format that works a lot better with modern TypeScript.
  • Members that are readonly or protected are now documented as such.
  • A lot more features which are supported by the class framework are now reflected in the type declarations. This includes, e.g., more supported parameter types, inherited properties of option objects, or support for options objects.
  • More improvements are listed below.
Improved TypeScript Support

All source code demos and code snippets in the documentation are now available in both JavaScript and TypeScript.

yFiles now comes with type definition files for all versions of TypeScript since 3.1. This is made possible by including different typing files with the typesVersion property of package.json such that you automatically use the file that matches your TypeScript version.

yFiles Dev Suite

Last but not least, the yFiles Dev Suite is now available. It provides a graphical interface that facilitates working with a yFiles for HTML package:

  • Integration with my.yworks.com for a simplified evaluation process and direct communication with the yWorks support team.
  • Create your own yFiles app with just a few clicks.
  • Browse and adapt the plethora of demo applications, manage your changes through integrated diffing, and spawn your own projects from one of the samples as a starting point.

New Features

Graph, View, and Interaction

  • All required CSS rules are now created in code, removing the need to include the yfiles.css file. In addition, styling that is mandatory is now added as inline style to prevent accidental omission or overwriting. This behavior can be disabled with the Workarounds.loadDefaultCSS property, and the CSS file yfiles.css is still part of the lib directory of the yFiles package.
  • The graph and tree builders now support bindings for bend locations. This is implemented by new bend-related members of the EdgeCreator class.
  • The new EdgePathPortLocationModel for ports owned by edges can be used to define port locations as a ratio of the edge path length. This keeps the port location stable when bends are added onto the edge path, for example during orthogonal edge editing.
  • The new MouseHoverInputMode.toolTipParentElement property defines the element in the DOM to which tooltips are added.
  • The new HandleInputMode.QueryClosestHandle event can be used to provide the closest handle for a certain query location.
  • The new GraphComponent.noFocusMouseWheelRecognizer property can be used to implement a differing mouse wheel behavior when the GraphComponent is not focused.

Layout and Algorithms

  • The new GenericLayoutData class is a generic implementation of LayoutData that allows passing arbitrary data to layout stages. As a consequence, the LayoutData.apply, ItemCollection.provideMapper and ItemMapping.provideMapper methods were removed.
  • The new LayoutExecutor.sequentialExecution property controls whether an instance of LayoutExecutor should wait for other instances to finish before executing a layout.
  • The OrganicLayout class offers the new clusteringPolicy property, which allows to specify the clustering algorithm that is applied to the input graph. Three clustering algorithms are available: Louvain modularity, edge betweenness, and label propagation. Previously, the node clustering was always based on edge betweenness. By default, clustering is disabled.
  • The OrganicLayout and ClassicOrganicLayout classes support the new scope MAINLY_SUBSET_GEOMETRIC. In addition to the actual affected nodes, this scope may to some degree move nodes that are geometrically close to an affected node. The existing scope MAINLY_SUBSET is similar, but it does determine the closeness of other nodes by using the graph structure instead of the current geometry (i.e. location).
  • The PartialLayout class offers a new property allowMovingFixedElements to allow moving fixed elements. This often yields a better layout quality even though the preservation of the mental map declines because the fixed elements may change their position.
  • The new TreeAnalysis algorithm offers a convenient way of analyzing tree structures and querying tree-related properties (e.g. leaf nodes, parent-child relations and more).
  • The new ParallelEdgesAlgorithm.findParallelEdges method allows to find all sets of parallel edges contained in a given graph or incident to a specific node.
  • The new SelfLoopRouterData class specifies custom data for the SelfLoopRouter class. In more details, it allows to define which self-loop edges should be routed and which should keep their current path.
  • The new PortPlacementStageData class specifies custom data for the PortPlacementStage class. In more details, it allows to define port candidates, port constraints, and node port candidate sets which are then considered by that layout stage.
  • The SubgraphLayout class now supports defining which edges must be included or excluded in the subgraph. Previously, only nodes could be specified. The new SubgraphLayoutData class offers the subgraphNodes and subgraphEdges properties to conveniently define the nodes and edges that should form the subgraph the core layout runs on.

Improvements

General

  • The yfiles.debug() function now adds all yFiles types to the global yfiles object for a better debugging experience.
  • The JS modules variant of the yFiles npm package now correctly advertises its modules as modules instead of commonjs.
  • Most parts of the layout and graph algorithms API are now annotated with nullability information. As always, this information is reflected in the API documentation and the TypeScript type declarations.
  • The following types can now be initialized with option arguments to more conveniently initialize instance properties at creation: SvgExport, ViewportLimiter, NodeCreator, LabelCreator, and EdgeCreator.

Graph and Collections

  • The DefaultFolderNodeConverter and FoldingEdgeConverterBase classes now have portLabelStyle and portLabelLayoutParameter properties to control the style and label layout parameter of copied port labels.
  • The methods IEnumerable.last and IEnumerable.lastOrDefault now have an optional parameter predicate that can be used to decide which items may be returned.
  • The new NodeInsetsProvider class is an INodeInsetsProvider that returns the same insets for each node.
  • Insets instances can now be converted from arrays of length 1 and from objects that only contain some of the top, left, right, bottom, horizontal, or vertical properties.

View

  • The CanvasComponent.ensureVisible method now has an additional parameter to specify insets to keep around what to make visible in the viewport.
  • The CanvasComponent.ensureVisible method now has an additional overload to make a set of points visible in the viewport. This is mainly useful when using a Projection and trying to make something visible that is not a rectangle in world coordinates.
  • The CanvasComponent.ensureVisible, CanvasComponent.fitContent, and GraphComponent.fitGraphBounds methods now return a Promise that completes when the view port adjustment has been finished.
  • The CanvasComponent.ensureVisible method now respects margins defined by the CanvasComponent.contentMargins property. The ensureVisible method is called for example by keyboard navigation.
  • The ZOOM command now respects margins defined by the CanvasComponent.contentMargins property when executed with a rectangle as parameter.
  • The ZOOM_TO_CURRENT_ITEM command now respects the margins defined in the CanvasComponent.contentMargins property.
  • All of the following features no longer block user interaction: the viewport animations for CanvasComponent.ensureVisible, executing scroll commands when the CanvasComponent.animateScrollCommands property is enabled, and executing an animated ZOOM_TO_CURRENT_ITEM command.
  • The CanvasComponent.fitContent and GraphComponent.fitGraphBounds methods now have an optional parameter that allows changing the viewport in an animated fashion.
  • The ViewportLimiter.limitViewport method now has an optional parameter that enforces the ViewportLimitingPolicy.STRICT policy.
  • The ViewportLimiter class now always centers the viewport if its honorBothDimensions property is disabled.
  • The new install and uninstall methods of the GraphModelManager class simplify exchanging the manager used by a GraphComponent. They are called when setting/removing a GraphModelManager as GraphComponent.graphModelManager and should also be called when combining a GraphModelManager with a CanvasComponent.
  • Setting the various descriptor properties of the GraphModelManager class no longer causes updates for every installed item if the descriptor hasn't actually changed.
  • A graph component now utilizes the native ResizeObserver API if it is available and the GraphComponent.sizeChangedDetection property is set to SizeChangedDetectionMode.SENSOR. This results in a more robust detection of size changes.
  • The new static IAnimation.createDelay method creates an animation that does nothing. This is especially useful in combination with other animations that run in parallel or in sequence to create complex multi-sequence animations. The accompanying static IAnimation.createDelayedAnimation method delays a provided animation.
  • The SvgExport class works better with the new Projections feature by being able to define an arbitrary list of points as well as the projection that should be used for export or printing. The export chooses the exported area in a way that all these points are enclosed in a rectangular area which is axis-parallel to the output coordinates under the given projection.

    The PrintingSupport class provided as demo source code now correctly handles projections as well. Similar to SvgExport, a set of points can be provided to construct an axis-aligned bounding box to print.

  • The new canvas object descriptor ICanvasObjectDescriptor.ALWAYS_DIRTY_VISUAL prevents stale rendering states for WebGL2Visuals and other HtmlCanvasVisuals.
  • The following WebGL uniforms are now available in a WebGLProgram: u_yf_worldToWebGL, u_yf_viewToWebGL, u_yf_intermediateToView, u_yf_worldToWebGL_3d, u_yf_viewToWebGL_3d, u_yf_intermediateToWebGL, u_yf_intermediateToWebGL_3d, u_yf_worldToIntermediate, and u_yf_zoom.
  • The new WebGLSupport.deleteProgram method deletes cached WebGL programs created with the WebGLSupport.useProgram method. This helps prevent memory leaks if deleting a WebGL program is required.

Interaction

  • Changing the selection state of a large number of elements is now faster.
  • Tooltip contents can now be provided asynchronously. As an alternative to setting the tooltip content directly, the ToolTipQueryEventArgs class also accepts a Promise that provides the tooltip content asynchronously.
  • A visible tooltip is now automatically hidden if the mouse leaves the component.
  • The HandleInputMode.beginDragging method now returns a Promise which indicates whether the drag of a handle has been finished or canceled.
  • Validation of the text of edited labels can now be provided asynchronously. The new LabelTextValidationEventArgs.validatedText property accepts a Promise that provides the validated text asynchronously.
  • The DragSource.startDrag method now returns a Promise that resolves when the drag operation is done. It resolves to true on a successful drop and to false if the drag operation was canceled or otherwise unsuccessful.
  • The OrthogonalEdgeEditingContext.createOrthogonalEdgeDragHandler method now accepts an IPortOwner instead of only an INode as dragged item. This can be used for custom edge drag handling that should support orthogonal edge editing.
  • The ItemCopiedEventArgs class now guarantees that its original and copy properties are not null.
  • The OverviewInputMode now renders its handle on top of the viewport rectangle instead of below it.

Hierarchic Layout

  • The HierarchicLayout, EdgeRouter, and CurveRoutingStage classes now avoid unnecessary, consecutive Bezier segments for modeling larger straight-line parts of an edge path. The resulting reduced bend count improves the user experience when working with the BezierEdgeStyle.
  • The HierarchicLayout class now generates shorter paths for edges that cross borders of PartitionGrid columns in cases where there are no other obvious constraints that require the edge to be longer. This holds for the default vertical layout orientation; for a horizontal orientation, edges that cross borders of rows are affected by this improvement.
  • The HierarchicLayout class now has an improved strategy for choosing the port candidates for same-layer edges with multiple available candidates. Previously, the chosen candidate may have led to superfluous back-loops.
  • The HierarchicLayout class now considers the edge direction when choosing a port candidate for edges with multiple candidates. This new strategy often leads to less bends.

Organic Layout

  • For the substructures in the OrganicLayout it is now possible to explicitly specify whether structures are allowed to be nested or not. Previously, substructures were allowed to be nested by default. New styles were added while the old styles will no longer generate nested structures.
    • Star structures offer the new styles StarSubstructureStyle.RADIAL_NESTED and StarSubstructureStyle.CIRCULAR_NESTED.
    • ChainSubstructureStyle.RECTANGULAR_NESTED and ChainSubstructureStyle.STRAIGHT_LINE_NESTED are the new styles for nested chains.
    • CycleSubstructureStyle.CIRCULAR_NESTED is the new style for nested cycles.
  • The OrganicLayout class now offers the possibility to define the minimum sizes of substructures (stars, chains, cycles and parallel structures). Structures of smaller size are not handled as a substructure. For each type of structure a new property was added: OrganicLayout.starSubstructureSize, OrganicLayout.chainSubstructureSize, OrganicLayout.cycleSubstructureSize, and OrganicLayout.parallelSubstructureSize.
  • With substructures, the OrganicLayout class now often produces more compact results and comes with an improved placement of degree-one nodes.
  • When specified for the OrganicLayout class, the scope MAINLY_SUBSET now works together with more of its other features and constraints, and has a larger impact. For example, it previously had very little or no effect when a partition grid or an output restriction was defined.

Edge Routing

  • The EdgeRouter class now supports explicitly defining costs for different types of edge crossings. The new properties PenaltySettings.adjacentEdgeCrossingPenalty and PenaltySettings.selfCrossingPenalty relate to crossings between two adjacent edges and crossings between two line segments that belong to the same edge, respectively. Previously, all types of crossings were covered by the existing edgeCrossingPenalty property.
    • By default, now, crossings of adjacent edges are more expensive than normal ones and self-crossings are the most expensive.
    • Furthermore, the default values of the edgeLengthPenalty and groupNodeCrossingPenalty properties were increased to obtain more balanced results.
  • The EdgeRouter class now produces more suitable routes for edges with octilinear routing style. Previously, the diagonal segments where often omitted after/before an edge's first/last segment.
  • When the EdgeRouter class runs with a highly restricted maximum duration or is aborted via the AbortHandler class, i.e., the router operates in the fastest possible mode, the calculated edge routes now are of higher quality. The quality improvements mainly affect cases with fixed port locations.
  • The HierarchicLayout, EdgeRouter, and CurveRoutingStage classes now avoid unnecessary, consecutive Bezier segments for modeling larger straight-line parts of an edge path. The resulting reduced bend count improves the user experience when working with the BezierEdgeStyle.

Other Layouts

  • The new LayoutGraphAdapter.ORIGINAL_TAG_DP_KEY data provider key provides access to the object stored in the tag property of the original graph item from within custom layout code.
  • The quality of the curved edge routing was improved with respect to various aspects and such that it yields aesthetically nicer curves. To further configure the curve routing, the following settings were added.
    • CurveShortcuts: if shortcuts are allowed, curves can become smoother and more direct but may violate other constraints (e.g. edge-edge distance). Available for HierarchicLayout (HierarchicLayoutRoutingStyle.curveShortcuts), EdgeRouter (EdgeRouterEdgeLayoutDescriptor.curveShortcuts) and CurveRoutingStage (CurveEdgeLayoutDescriptor.curveShortcuts).
    • CurveUTurnSymmetry: allows to specify the symmetry preference for u-turns (180 degree turns) of curved routes. The default is zero so that results are equal to previous results. Available for HierarchicLayout (HierarchicLayoutRoutingStyle.curveUTurnSymmetry), EdgeRouter (EdgeRouterEdgeLayoutDescriptor.curveUTurnSymmetry) and CurveRoutingStage (CurveEdgeLayoutDescriptor.curveUTurnSymmetry).
  • The ClassicTreeLayout class now features properties minimumFirstSegmentLength and minimumLastSegmentLength that allow to specify the minimum first and last segment length for the orthogonal routing style.
  • The new ParallelEdgeRouterData.routedParallelEdges property returns which edges the ParallelEdgeRouter class routed and thus were hidden during the core layout. This can be useful if parallel, non-leading edges need further handling, e.g., for placing their labels.
  • The new BalloonLayoutData.OutEdgeComparer property specifies a comparison function used to sort a nodes' outgoing edges.

Type Declarations

    The type parameters of the BaseClass function are now inferable by the TypeScript compiler. This makes implementing yFiles interfaces easier: in most cases the type arguments of the BaseClass function can be omitted now.

  • The sender argument of event listeners is now the type of the declaring class, which removes the need for type assertions.
  • If a returned Promise has no (meaningful) resulting value, this resulting value is now correctly specified as void instead of any or another object. Namely, this affects the methods LayoutExecutor.start, LayoutExecutor.stop, GraphComponent.morphLayout, GraphComponent.updateVisualAsync, GraphComponent.zoomToAnimated, Animator.animate, and SvgExport.fixViewBoxAttribute.
  • The types of option objects are now more precise. Especially any has been replaced with arrays of the correct type.

  • The CanvasComponent.lastInputEvent property now has the more narrow type MouseEventArgs | TouchEventArgs.

Bugfixes

General

  • The parameters and return values of various event handlers and callbacks are now correctly annotated with not-null.
  • Assigning JSON data in constructor option parameters to properties of object type that initially are null is now properly supported. Previously, the properties were applied recursively resulting in a TypeError.

Graph and Geometry

  • The FilteredGraphWrapper class now dispatches ParentChanged events in the correct order after predicate changes.
  • All setFactory methods of the Node-, Edge-, Label-, Port-, and BendDecorator classes now respect the nullIsFallback property.
  • A label with EdgeSegmentLabelModel or EdgePathLabelModel now moves steadily when the segment to which it belongs moves.
  • The DefaultFolderNodeConverter and FoldingEdgeConverterBase classes (and thus, also the DefaultFoldingEdgeConverter and MergingFoldingEdgeConverter classes) no longer ignore port labels.
  • The area property of an empty Rect instance (including Rect.EMPTY) is now always zero, and no longer a negative value.
  • Labels at ports of collapsed nodes are no longer lost during GraphML serialization.

View

  • The CanvasComponent.ensureVisible method no longer ignores the limited viewport size in certain cases.
  • The CanvasComponent.zoomToAnimated method now works correctly when a projection is used.
  • The following issues of the ICommand.ZOOM_TO_CURRENT_ITEM command have been corrected:
    • The item is now longer placed slightly out of center if scrollbars appear during the operation.
    • If the current item is too large to fit the viewport at zoom 1, the command now zooms out.
    • The item is no longer moved outside the visible area in rare cases. This was caused by a problem in the ViewportLimiter class.
  • The CanvasComponent.fitContent and GraphCanvasComponent.fitGraphBounds methods now correctly apply the fitContentViewMargins in case a projection is set.
  • Fixed incorrect margins on an OverviewGraphCanvasComponent with a projection set.
  • Fixed a bug which caused the ICommand.ZOOM command to disrespect the ViewportLimiter if executed with a rectangle as parameter.
  • Callbacks registered for removed visuals on the CanvasObject tree now reliably run after the visual is indeed no longer visible.
  • Callbacks registered with the IRenderContext.setDisposeCallback method now are reliably called, even when a canvas object has been explicitly removed.
  • In SizeChangedDetectionMode.AUTO, the CanvasComponent now correctly falls back to timer-based resize detection when the preferred resize detection modes are not supported.
  • In exported images, handles are now always drawn in the correct positions.
  • The Animator class will now properly turn off WaitInputMode if an error occurs during an animation.
  • Using the scrollbars no longer triggers unnecessary CSS invalidations.
  • Fixed memory leaks when disposing the GraphComponent with the cleanUp method.
  • The IShapeGeometry parameter of the DefaultEdgePathCropper.isInside and getIntersection methods is now nullable.
  • The result of the TextRenderSupport.measureText method is now correct when the font is updated and the text content is a single line.
  • The TextRenderSupport.measureText, TextRenderSupport.addText and DefaultLabelStyleRenderer.addTextElements methods, as well as the DefaultLabelStyle class now take empty lines into consideration.
  • Fixed an infinite loop in MarkupLabelStyle when not even the first character fits the label.
  • Whitespace with multiple spaces in a row is now handled correctly in MarkupLabelStyle.
  • The parameters of the add and remove methods of the SvgVisualGroup class are now correctly annotated with not-null.
  • Automatic type conversion now converts a none fill or stroke to null instead of black.

Interaction

  • The text box shown by the TextEditorInputMode class is now correctly placed if the TextBoxPlacementPolicy.MOVE_TEXT_BOX is set and a projection is used.
  • Editing self-loops with PolylineEdgeStyle and orthogonal edge editing enabled works now correctly.
  • Auto-dragging now stops in all cases. Previously, it sometimes never stopped.
  • The GraphComponent class no longer consumes mousewheel events if it is not focused and its mouseWheelBehavior property is set to MouseWheelBehaviors.ONLY_WHEN_FOCUSED.
  • The CreateEdgeInputMode class no longer has an error which prevented the removal of port candidate visualizations after another input mode claimed to be active.

Hierarchic Layout

  • The HierarchicLayout class no longer produces an infinite looping issue in the incremental layout mode for some input graphs with layer constraints that specify that a node should be placed in the topmost/bottommost layer.
  • The HierarchicLayout class no longer produces unnecessary edge crossings between self-loop edges at the same node in cases where a larger number of self-loops exist at a node.
  • The HierarchicLayout class no longer ignores edges connected to group nodes when the group node contains a bus structure (see HierarchicLayoutData.buses) and no other elements. Such edges were previously actually removed from the layout graph such that other stages (e.g. the ComponentLayout) could have failed with an exception.
  • The HierarchicLayout class no longer occasionally throws an exception when enabling HierarchicLayout.compactGroups and in conjunction with layering constraints and/or a group node marked as incremental.
  • The HierarchicLayout class does no longer violate the specified minimum length for edges incident to group nodes.
  • The sequencing phase of the HierarchicLayout class is now faster for large graphs with sequence constraints and non-incremental layout mode.
  • Curved edge routes generated by HierarchicLayout, EdgeRouter and CurveRoutingStage no longer contain a self-crossing for edges that connect to a group node and where the connection style CurveConnectionStyle.ORGANIC is specified.
  • The curved edge routes produced by HierarchicLayout, EdgeRouter or CurveRoutingStage no longer violate the minimum node-edge distance or intersect the node. Intersections could previously happen especially when the specified node-edge distance was zero.

Edge Routing

  • The EdgeRouter class now uses the given ports for edges of a bus with fixed edges.
  • The EdgeRouter class now correctly considers edges incident to a fixed inner port of a group node when the routing algorithm has restricted maximum duration. Previously, this setup sometimes led to strange edge routes with many superfluous bends.
  • The CurveRoutingStage class now correctly considers the minimum distance to nodes specified as value of the CurveEdgeLayoutDescriptor.minimumNodeToEdgeDistance property. Previously, the curves could violate the distance and get too close to nodes.
  • The EdgeRouter class no longer contains edges with self-crossings in some rare cases where it previously failed to eliminate them.
  • The EdgeRouter and CurveRoutingStage classes no longer change the path of unaffected (fixed) edges when the createControlPoints property of their associated EdgeLayoutDescriptor instance (CurveEdgeLayoutDescriptor respectively) is enabled.
  • The EdgeRouter class now correctly supports the use case that a subset of edges is routed with the curved routing style while another subset is routed with another routing style and different settings on the associated individual EdgeLayoutDescriptor instances. Previously, with some edges being curved, the settings of the other edges got lost and the default settings were used.
  • The EdgeRouter class no longer has a problem that appeared with a bus containing affected as well as non-affected (fixed) edges at the same time. Previously, this could trigger an Exception or lead to the incorrect behavior that an actually affected other edge was not routed.
  • The EdgeRouter class no longer occasionally throws an exception if the input contains bus edges defined via BusDescriptor.
  • The EdgeRouter class no longer has a problem that occasionally resulted in bad edge routing artifacts if edge grouping is enabled and non-affected edges are grouped at both end points.*.
  • Curved edge routes generated by HierarchicLayout, EdgeRouter and CurveRoutingStage no longer contain a self-crossing for edges that connect to a group node and where the connection style CurveConnectionStyle.Organic is specified.
  • The curved edge routes produced by HierarchicLayout, EdgeRouter or CurveRoutingStage no longer violate the minimum node-edge distance or intersect the node. Intersections could previously happen especially when the specified node-edge distance was zero.
  • The BusRouter class no longer fails to generate connected buses for cases with fixed and incremental edges on the same bus. Previously it sometimes generated a disjoint bus even though the bus IDs were equal.
  • The BusRouter class no longer ignores edges that should be routed when a they are on a bus with fixed edges (see BusDescriptor.fixed property) and when they share both source and target port with a fixed edge.
  • The BusRouter class now produces more suitable edge routes for rare cases that were caused by an unsuitable bus placement.
  • The ParallelEdgeRouter class no longer throws an exception if the input has both a large number of parallel edges and a leading edge with ports on the node border.
  • The EdgeRouter class no longer occasionally throws an exception if the input contains bus edges (defined via BusDescriptor).
  • The OrthogonalSegmentDistributionStage class does no longer crash when receiving input graphs with a very large edge count (greater than approximately 22000). Note that the ChannelEdgeRouter class is affected too, as the stage is by default called from within the router.
  • The OrganicEdgeRouter.keepExistingBends property now correctly obeys its definition and actually keeps the absolute coordinates of the existing bends.

Other Layouts

  • Fixed a bug in LayoutExecutor which caused port labels not to be placed in their calculated position after a layout animation.
  • Fixed LayoutExecutor to use wrong target bounds when a projection is set on the GraphComponent.
  • The comparison delegates defined in TreeLayoutData.outEdgeComparers and SeriesParallelLayoutData.outEdgeComparers no longer receive null elements during runtime.
  • The OrganicLayout and ClassicOrganicLayout classes no longer produce an internal integer overflow that may lead to an early exit and, thus, poor layout results for very large input graphs.
  • The ClearAreaLayout class no longer throws an exception for some scenarios where the same algorithm instance was first applied to a graph with PartitionGrid and later to a graph without grid.
  • The ClearAreaLayout and FillAreaLayout classes no longer throw an exception for some input graphs with edge labels if property ConsiderEdgeLabels is enabled.
  • The TreeLayout class now correctly handles trees with group nodes. Previously, it sometimes produced overlapping elements and halo violations for such inputs.
  • The RadialLayout class is now much faster if the input graph is a very large tree structure.
  • The FamilyTreeLayout class now properly handles the case that the family tree contains cycles, e.g., due to a family founded by parent and (step-)child. Previously, it sometimes produced a stack overflow or non-orthogonal routes for such an input.
  • The SimpleProfitModel class now computes meaningful different profits based on the PreferredPlacementDescriptor for candidates that belong to a SliderEdgeLabelLayoutModel or a DiscreteEdgeLabelLayoutModel. Previously, the computed profit was equal for all candidates.
  • The PartialLayout class now transfers the value of its PartialLayout.maximumDuration property to the internally used edge routing algorithm. This means that when the partial layout has a restricted running time, the routing part will be restricted, too. Previously, the duration of the edge routing was unrestricted. Note that if the router instance is user-specified, this instance will not get a maximum duration.
  • The element processing order in the BendConverter layout stage is now deterministic. The previous non-deterministic order of inserting and removing elements could lead to non-deterministic behavior for consecutive layout calculations.
  • The TabularLayout class no longer throws an error about a missing PartitionGrid when used within RecursiveGroupLayout, and RecursiveGroupLayoutData and TabularLayoutData are used without an explicit cell-id mapping.

Incompatible Changes

See the Migration Guide for more details and advice on migrating.

General

  • The TypeScript type declarations of the UMD module have been changed to a slightly different format that works a lot better with modern TypeScript. The main drawback is that quick interface implementation cannot be used with new anymore. Instead, use the static create method of the interface.
  • The documentation file ide-support/yfiles-api-umd-jsdoc.js has been removed. The various TypeScript type declaration files provide much better IDE support.

Incompatible API Changes

  • The PolylineEdgeRouterData class has been renamed to EdgeRouterData to match the name of the layout algorithm it supports.
  • The protected method HandleInputMode.isHovering has been removed. To customize what handle should be used for a certain query location, use the new HandleInputMode.QueryClosestHandle event.
  • The TextEditorInputMode.getTextBoxBounds method has been removed.
  • The CanvasComponent.fitContentViewMargins property has been renamed to contentMargins. Accordingly, the onFitContentViewMarginsChanged method and the FitContentViewMarginsChanged event have been renamed to onContentMarginsChanged and ContentMarginsChanged, respectively.
  • The optional projection parameter for the SvgExport.calculateScaleForWidth and calculateScaleForHeight methods has been removed. Instead, there is a projection property on SvgExport, which should be set to the same projection as the exported canvas component.
  • The following methods now return a Promise:

    • The methods MouseHoverInputMode.OnShow and Show now return a Promise that completes when the tooltip content is available and provides whether the tooltip is actually displayed.
    • The HandleInputMode.BeginDragging method now returns a Promise.
    • The GraphEditorInputMode.OnLabelTextEdited method now returns a Promise that completes when the text validation is done and provides whether the validation succeeded or was canceled.
  • The LayoutData.apply, ItemCollection.provideMapper, and ItemMapping.provideMapper methods were removed. The new GenericLayoutData class is a generic implementation of LayoutData that allows to pass arbitrary data to layout stages.
  • The CanvasComponent.fitContent and GraphComponent.fitGraphBounds methods now have an optional parameter that allows changing the viewport in an animated fashion.
  • The CanvasComponent.ensureVisible method now has an additional parameter viewportInsets.
  • The constructor of the TreeReductionStage class no longer contains the core property in the extra option object parameter. It is replaced by property coreLayout which previously was a duplicate.
  • The following properties of the option object parameter of the DelegatingNodePlacer constructor have been renamed to match the respective node placer property names: placerUpperLeft was renamed to primaryPlacer and placerLowerRight was renamed to secondaryPlacer.
  • The options overload of the following methods and constructors has been removed since they were ambiguous with the regular invocation: ICommand.canExecute, ICommand.execute, constructor of InsetsGroupBoundsCalculator, and constructor of SwimlaneDescriptor.
  • IComparable's useless static create method has been removed. A proper IComparable requires state to compare the object passed to its compareTo method with.
  • Some callbacks whose parameter types or return types erroneously accepted null now have the proper type. This might result in compile time errors in TypeScript.
  • If a returned Promise has no (meaningful) resulting value, this resulting value is now correctly specified as void instead of any or another object. Namely, this affects the methods LayoutExecutor.start, LayoutExecutor.stop, GraphComponent.morphLayout, GraphComponent.updateVisualAsync, GraphComponent.zoomToAnimated, Animator.animate, and SvgExport.fixViewBoxAttribute.
  • The BusRouter class and the accompanying helper class BusRepresentations are now located in the newly added module yfiles/router-bus.

Changes in Default Behavior

  • As a result of the improvements and bugfixes for text measuring, a single line of text is no longer visible if the specified maximum height is smaller than its actual line height.
  • The CanvasComponent.projection property no longer accepts transforms with a non-zero translation component.
  • The FIT_CONTENT and FIT_GRAPH_BOUNDS commands now change the viewport in an animated fashion.
  • Zooming with the mouse wheel to the center of the viewport by using CanvasComponent's centerZoomEventRecognizer no longer uses the INCREASE_ZOOM and DECREASE_ZOOM commands.
  • During animated viewport transitions, for performance reasons, mouse events are not redispatched, anymore, except for the last frame of the animation.
  • Measuring an empty string with wrapping in TextRenderSupport.measureText now returns the line height instead of 0.0.
  • The provider returned by IEdgeReconnectionPortCandidateProvider.ALL_NODE_AND_EDGE_CANDIDATES now doesn't return port candidates of the reconnected edge itself anymore as this lead to an unstable reconnection behavior.
  • The HierarchicLayoutData class now assigns same-layer constraints to nodes with the same comparable in LayerConstraintsData.nodeComparables. This is an unintended change that was reverted in yFiles for HTML 2.4.0.1.
  • The OrganicLayout substructure styles StarSubstructureStyle.RADIAL, StarSubstructureStyle.CIRCULAR, ChainSubstructureStyle.RECTANGULAR, ChainSubstructureStyle.STRAIGHT_LINE, and CycleSubstructureStyle.CIRCULAR do no longer allow that the detected substructures are nested inside other substructures. To get the old behavior and allow nesting, new style values were added (e.g. StarSubstructureStyle.RADIAL_NESTED).
  • In organic layout, the way edge grouping influences the layout of certain substructures has changed. Structures are not anymore split-up into several ones when edges of nodes in the structure have different group IDs. Now, the new node types can be used to split-up structures. If a structure contains different edge groups, the grouping is properly considered and may influence the sorting of elements within the structure. Affected substructure styles are StarSubstructureStyle.SEPARATED_RADIAL, ParallelSubstructureStyle.RADIAL, ParallelSubstructureStyle.STRAIGHT_LINE and ParallelSubstructureStyle.RECTANGULAR.
  • As the OrganicEdgeRouter.keepExistingBends property now correctly obeys its definition and actually keeps the absolute coordinates of the existing bends, a new property to get the old behavior was introduced: OrganicEdgeRouter.considerExistingBends. Existing bends are considered, but their absolute coordinates are not kept.
  • The following behavior change applies to class HierarchicLayout with polyline edge routing style: the default value of property EdgeLayoutDescriptor.minimumSlope was changed from 0.3 to 0.2 which makes the sloped segments less steep and the overall results more compact.
  • The default value of the ClassicTreeLayout.minimumLayerDistance property was changed from 40.0 to 20.0 and the default value of the ClassicTreeLayout.busAlignment property was changed from 0.3 to 0.5. In addition, the new minimumFirstSegmentLength and minimumLastSegmentLength properties may lead to different results compared to previous versions. Setting both properties to zero will neutralize their influence on the result.
  • For the DefaultNodePlacer class that is used by the TreeLayout, the default values of the horizontalDistance and verticalDistance properties were changed from 40.0 to 20.0, and the default values of the minimumFirstSegmentLength and minimumLastSegmentLength properties were changed from 0.0 to 20.0.
  • The default value of the LayeredNodePlacer.busAlignment property was changed from 0.3 to 0.5.

Deprecations

  • The CanvasComponent.animateScrollCommands property has been deprecated in favor of the new animatedViewportChanges property, which offers more control over viewport animations, not just the scroll commands.
  • The automatically inserted WebGL uniforms viewTransform, worldTransform, and projection have been superseded by u_yf_worldToWebGL, u_yf_viewToWebGL, and u_yf_intermediateToView, respectively.
  • The OrganicLayout.clusterNodes property is now deprecated. It is replaced by the new OrganicLayout.clusteringPolicy property. To disable clustering, specify OrganicLayoutClusteringPolicy.NONE. To enable it and use the same algorithm as before, specify OrganicLayoutClusteringPolicy.EDGE_BETWEENNESS.

Why, how, what? —
Just ask the diagramming experts!

Our team is happy to advise you – no strings attached. Let's talk about your project and find the perfect solution for your needs!

E-mail: hello@yworks.com

The data you enter will only be used to contact you.
Learn about our privacy policy.