yFiles for HTML Changelog

yFiles for HTML 2.5.0.4 - Changes Since 2.5.0.3

This is the 4th bugfix release for yFiles for HTML 2.5. This version brings several error corrections.

Bugfixes

Graph and styles

  • When folding is enabled, undoing label removal or re-doing label creation will no longer throw an error.
  • Corrected NinePositionsEdgeLabelModel's center placements above and below the edge. Before the fix, the labels were not always in the middle of the path, and they seemed to jump around when the path changed.
  • The GroupNodeLabelModel class no longer stretches tab labels and tab background labels into the collapse/expand icon of the corresponding GroupNodeStyle.
  • With the GraphBuilder class, updating an existing edge whose (new) source or target nodes cannot be resolved now removes the edge from the graph.
  • Fixed potential memory leaks in the GraphBuilder, AdjacencyGraphBuilder, and TreeBuilder classes.
  • The IconLabelStyle.updateVisual method now properly updates the visual if the style's icon is changed.

WebGL 2

  • Group node styles are now correctly converted to expanded WebGL2 group node styles.
  • WebGL2 rendering no longer breaks if a graph with group nodes is replaced with a graph that does not contain group nodes.
  • WebGL2 rendering no longer throws an error if the graph instance is replaced while a label is selected.
  • WebGl2 rendering no longer shows warnings about GL_INVALID_OPERATION in the browser's console if polyline edges are selected.

Layout

  • The EdgeRouter class no longer produces bad layout results for some scenarios with grouped edges and multiple PortCandidates. Previously, the algorithm selected any of them without considering the alternative options.
  • A circular layout with LayoutStyle.BCC_ISOLATED can no longer get into an infinite loop for inputs where a component consists only of articulation points.
  • The GenericLabeling class no longer produces bad label placements for edges with direct group content routing, i.e., edges that connect a group node with one of its descendants and are routed directly without leaving the group.

yFiles for HTML 2.5.0.3 - Changes since 2.5.0.2

This is the 3rd bugfix release for yFiles for HTML 2.5. This version brings a minor incompatible change, some improvements of the Dev UX, several error corrections, and some demo improvements.

Minor incompatible change

The value of the DefaultLayerSequencer.maximumDuration property is now unrestricted. Previously, it was restricted to 10 seconds. This class is used by the HierarchicLayout class, which still adheres to its own maximum duration. Therefore, we do not expect this change to have any negative practical impact.

Improvements

  • We replaced all usages of "direct eval" with "indirect eval". This should avoid problems when the code is optimized by build tools like esbuild.
  • In the TypeScript type definitions, the documentation of option object properties now correctly references the corresponding member documentation, which usually contains more information about this API.

Bugfixes

General

Hierarchical Layout

  • The HierarchicLayout class no longer throws an exception for some invalid specifications of alternative group bounds in incremental layout mode
  • For input graphs with a PartitionGrid structure, the HierarchicLayout class now correctly considers the layering produced by its fromScratchLayerer if it is already compatible with the specified grid structure.
  • The results of the DefaultLayerSequencer class are now deterministic by default, since it no longer aborts the calculation after 10s. For this, its maximumDuration value is now unrestricted.

Organic Layout

  • The OrganicLayout class now satisfies its deterministic property for more often, even if the maximum duration is restricted. Note, however, that non-deterministic behavior is still possible when restricting the duration.
  • The OrganicLayout class no longer violates the specified minimum node distance for separated radial substructures.
  • The OrganicLayout class no longer produces broken routes of self-loops at group nodes if the scope is not equal to ALL.

Orthogonal Layout

  • The OrthogonalLayout class no longer generates overlaps between edge segments (of a parallel edge) and edge labels of other edges for some rare scenarios.
  • The OrthogonalLayout class no longer produces bad edge routes where the path is non-orthogonal and does not connect to the source node anymore for some rare cases containing parallel edges or chain substructures.

Edge Router

  • The EdgeRouter class now correctly considers the maximum duration and the AbortHandler when the octilinear routing style is chosen. Previously, it could happen that the algorithm kept on running even though the time was up.
  • The EdgeRouter class no longer throws an exception for some rare cases with collinear bends.

Other Layouts

  • Improved the initialization time and memory consumption of layout animations.
  • The new CactusGroupLayoutData.nodeComparer property specifies the comparison function used to sort a parent node's child nodes.
  • The SingleCycleLayout class no longer produces violations of the specified minimum node distance.
  • The ClearAreaLayout class no longer produces results where the specified area is not cleared for some input graphs its clearAreaStrategy property is set to PRESERVE_SHAPES or PRESERVE_SHAPES_UNIFORM.
  • The PolylineLayoutStage class now correctly considers a registered AbortHandler instance so that it is possible to terminate early. Previously, the stage ignored the AbortHandler.

New demos and notable demo improvements

  • The new Subdivide Edges Demo shows a custom interaction that lets users insert a node into an edge by dropping it onto its path.
  • The new Parcel Demo shows how to integrate the yFiles library in a Parcel project.
  • The Angular CLI Demo now shows how to run more yFiles features "outside of Angular". This can drastically improve performance, especially of layout calculations.
  • The HTML Label Style Demo now shows styles which better support interaction. The visualizations now include scrollable areas and clickable links.

yFiles for HTML 2.5.0.2 - Changes since 2.5.0.1

This is the 2nd bugfix release for yFiles for HTML 2.5. This version brings several error corrections, including all fixes from version 2.4.0.7, and new demos.

Exceptionally, this bugfix release also contains an incompatible change related to the new shape text wrapping feature. Since this feature was only introduced in 2.5 and the change improves the vast majority of use cases, we decided to implement it in this release instead of waiting for 2.6.

Incompatible change

  • The default value of the DefaultLabelStyle.textWrappingShape property is now TextWrappingShape.RECTANGLE. The previous default TextWrappingShape.LABEL_SHAPE resulted in unexpected and inconsistent rendering behavior for labels whose style only differed in the DefaultLabelStyle.shape property.

Bugfixes

Graph and View

  • With DefaultLabelStyle and its textWrappingShape property set to rectangle) the results of the preferred size calculation are now more compact and more consistent between the different available label shapes. In particular, the height is now the same for all shapes, and as a result, labels whose style just differ in shape now get the same height by default.

    Consequently, the default value of the DefaultLabelStyle.textWrappingShape property is now TextWrappingShape.RECTANGLE instead of TextWrappingShape.LABEL_SHAPE.

  • Viewport animations no longer suddenly stop when the current CanvasComponent.zoom value approaches the values of the minimumZoom or maximumZoom properties.
  • Using HierarchicNestingPolicy.GROUP_NODES, LabelLayerPolicy.AT_OWNER and undo support together in a GraphComponent no longer results in an error.
  • The CanvasComponent.cleanUp method now removes all internal event listeners from the div element. Version 2.5 introduced a new listener that was not properly removed, resulting in a potential memory leak or unexpected behavior.
  • The promise returned by the SvgExport.exportSvgAsync method is now fulfilled, even when the graph contains styles with an SVG <image> element whose href attribute is either empty or not present at all. Previously, the promise remained forever in pending state in this case.
  • The TypeScript type definitions now specify the DashStyle.dashes property as nullable instead of not-null, since this was always the intended state. In fact, the DashStyle.SOLID singleton always used null dashes.
  • The NodeEventArgs.parent property of the FilteredGraphWrapper.NodeRemoved event no longer provides groups that are only present in the complete graph but not in the filtered graph itself.

Interaction

  • Pinch-zooming with two fingers now works a lot more reliably when the frame rate is low due to complex and large graphs.
  • All UI components now listen for the pointercancel event of pen devices and handle it like lostpointercapture events. Thus, if such an event occurs, the CanvasComponent.MouseLostCapture event is now fired, and active input modes properly clean up their internal state. In version 2.5, we already added this for devices of touch pointer type.
  • If the graph component's internal event processing has entered an invalid state due to incomplete native mouse events, it will now recover in more cases and explicitly abort the ongoing user interaction.
  • When the "Tap to click" setting is enabled for the trackpad under macOS, a tap on the trackpad is now actually reliably recognized as a click. Previously, many of these taps were ignored, since the browser often doesn't provide sane native events in this case.
  • Touch move events are now guaranteed to be raised up to the location where a touch up event happens.
  • After pasting, a closed group node within another closed group now stays closed. Previously, it was open due to a bug in the GraphClipboard class.

WebGL2

  • The SvgExport class now works correctly with WebGL2 rendering mode. It now makes sure that parallel shader compilation is disabled, and waits until the actual shaders are compiled to use them for rendering into the exported element.
  • The promises returned by the IAnimation.start and IAnimation.stop methods are now fulfilled even when the animation is not associated with any graph item. Also, these promises are now fulfilled when the corresponding WebGL2GraphModelManager is removed from its GraphComponent. Previously, such promises remained forever in pending state.

Layout

  • The HierarchicLayout class now also considers layering constraints between elements of different grouping hierarchies if the recursive group layering is enabled. Previously, such constraints were ignored in that case.
  • The OrthogonalLayout class now correctly considers the specified minimum group node sizes. Previously, the minimum sizes were always enlarged by the groups' insets. Actually, the minimum size should include the insets.
  • The GenericLabeling class no longer produces superfluous label overlaps if one of its removeNodeOverlaps or removeEdgeOverlaps properties is enabled.
  • The TabularLayout class now always uses the correct bounding box values for node labels that are considered. Previously, wrong label bounds could lead to unnecessarily large rows or columns.
  • The IsolatedGroupComponentLayout class no longer produces unnecessarily large group nodes if the specified gridSpacing is zero.

New demos

  • The new Company Ownership Chart Demo allows you to interactively explore the ownership of companies and their management relationships.
  • In the new Deep Zoom Demo you can seamlessly zoom into the contents of deeply nested group nodes, similar to "deep zoom" for images.
  • The new React JSX Component Node Style Demo presents a versatile and easily customizable template node style based on JSX and React.
  • The new Lit Template Node Style Demo presents a versatile and easily customizable template node style based on the Lit templating framework.
  • The Simple Arrow Style Demo shows the implementation of a basic custom arrow visualization for edges.
  • The new Non-ribbon Chord Diagram Demo shows how to create a chord diagram that emphasizes the connections between nodes.
  • In addition, we have made improvements and fixed bugs in several other demos. Particularly noteworthy are the improvements of the Tree of Life Demo.

yFiles for HTML 2.5.0.1 - Changes Since 2.5

This is the 1st bugfix release for yFiles for HTML 2.5. This version brings no incompatible API changes.

Bugfixes

Interaction

  • The HandleInputMode.handleIsHitTouch method now correctly uses the value of the CanvasComponent.hitTestRadiusTouch property instead of the value of the CanvasComponent.hitTestRadius property for its calculations. As a result, dragging handles during touch input should be much easier.
  • An instance of the HandleInputMode class is no longer canceled if a handle is removed during its own dragFinished call. This fixes some very rare exceptions under complicated circumstances.
  • The new columnValidBeginCursor, columnResizeCursor, rowValidBeginCursor, and rowResizeCursor properties of the ResizeStripeInputMode class now have reasonable default values, namely Cursor.COL_RESIZE and Cursor.ROW_RESIZE, respectively. These are also the cursors that were used by default for column and row editing in yFiles for HTML 2.4.
  • The new workaround flag Workarounds.ff1729465 can be enabled to skip Event.preventDefault calls on touch events. It is enabled by default in Firefox to allow multitouch gestures there. Otherwise, yFiles would call Event.preventDefault on the primary touch event, preventing any secondary touch events in Firefox, too. See Firefox bug 1729465 for details.

View

  • Cloning an ITable instance now properly clones all the table's internal state. Previously, changing a cloned table's insets could result in the cloned table's stripes not updating their geometry.
  • The MarkupLabelStyle class is now properly excluded from obfuscation such that reading and writing GraphML files with items that use this style works without errors.

WebGL2

  • The WebGL2GraphModelManager class no longer throws a TypeError when switching from WebGL2 to SVG rendering. Previously, many circumstances could trigger such an error.
  • Enabling the Workarounds.precompileWebGLSelectionShaders property no longer results in TypeErrors.
  • The simple and fallback highlight indicators now support elliptical shapes in addition to rectangular shapes, such that these initial visualizations match more closely the actual indicator visualizations.
  • The WebGL2Animator.cleanUp method no longer completely resets the animation to the start state. As a consequence, a WebGL2Animation that is run with the Animator class now again stays in its final state, as it was the case in yFiles for HTML 2.4. This is notable for animations like fade and scale.
  • Edges with the WebGL2ArcEdgeStyle class are now also rendered if their height is close to 0. Similarly, edges with the WebGL2BridgeEdgeStyle class and a height close to 0 now show shadows and ambient lights correctly.
  • Using the WebGL2ArcEdgeStyle class with a dashed line no longer causes an exception.
  • Fixed a bug that sometimes used the wrong WebGL2 styles when WebGL2 rendering is used together with Folding.

Demo improvements

  • BPMN Editor Demo: EventPortStyles do not share internal state after cloning anymore. Thus, changing the properties of one instance will no longer affect other instances, too.

yFiles for HTML 2.5 - Changes Since 2.4.0.6

Major new features

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.

yFiles for HTML 2.4.0.7 - Changes Since 2.4.0.6

This is the 7th bugfix release for yFiles for HTML 2.4. This version brings error corrections, including performance improvements for the WebGL2 rendering mode. There are no incompatible API changes.

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.

View and Interaction

  • In version 2.4.0.6, WebGL2 rendering became a lot slower due to unnecessary many calls into a slow WebGL API in order to guard against lost WebGL contexts. The number of calls has now been reduced to a minimum and previous performance could be restored.
  • In WebGL2 rendering, evaluation CSS styling of the selection indicators and the handles now happens only once, always. Previously, if no such styling was defined, yFiles constantly re-checked whether such style information was added, which had a measurable performance impact.
  • The NodeEventArgs.parent property of the FilteredGraphWrapper.NodeRemoved event no longer provides groups that are only present in the complete graph but not in the filtered graph itself.
  • After pasting, a closed group node within another closed group now stays closed. Previously, it was open due to a bug in the GraphClipboard class.
  • Enumerating the Mapper.entries property no longer throws an exception.
  • Cloning an ITable instance now properly clones all the table's internal state. Previously, changing a cloned table's insets could result in the cloned table's stripes not updating their geometry.
  • The TableEditorInputMode class no longer changes the GraphComponent.selection property unnecessarily when the GraphComponent.graph property is changed.

Hierarchic Layout

  • The SimplexNodePlacer class of the hierarchic layout no longer throws an error due to a number overflow for very, very wide layouts.
  • The HierarchicLayout class now correctly considers the specified halos of group nodes when there is a partition grid defined.
  • The HierarchicLayout class no longer produces misplaced edge labels for some rare cases with grouped edges.
  • The HierarchicLayout class now also considers layering constraints between elements of different grouping hierarchies if the recursive group layering is enabled (property HierarchicLayout.RecursiveGroupLayering). Previously, such constraints were ignored in that case.

Other Layouts

  • The OrthogonalLayout class now correctly considers the specified minimum group node sizes. Previously, the minimum sizes were always enlarged by the groups' insets. Actually, the minimum size should include the insets.
  • The OrthogonalLayout class now correctly handles input graphs with parallel edges if its preferParallelRoutes property is enabled. Previously, such inputs have caused exceptions in some rare cases.
  • The GenericLabeling class no longer produces superfluous label overlaps if one of its removeNodeOverlaps or removeEdgeOverlaps properties is enabled.
  • 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 ClearAreaLayout class now correctly considers the initial partition grid assignment of nodes.
  • The EdgeRouter class now correctly handles direct content edges that are incident to group nodes with PortCandidateSets.
  • The TableLayoutConfigurator class now treats tables without rows or columns as tables with exactly one row and column instead of throwing an exception.
  • The TabularLayout class now always uses the correct bounding box values for node labels that are considered. Previously, wrong label bounds could lead to unnecessarily large rows or columns.
  • The IsolatedGroupComponentLayout class no longer produces unnecessarily large group nodes if the specified gridSpacing value is zero.

yFiles for HTML 2.4.0.6 - Changes Since 2.4.0.5

This is the 6th bugfix release for yFiles for HTML 2.4. This version brings error corrections and no incompatible API changes.

Bugfixes

Graph

  • The FilteredGraphWrapper class now fires the correct events when filtering out port labels. Previously, the events contained incorrect owner information.
  • The CompositeUndoUnit.undoName property now indeed sets the undo name, not the redo name.

Interaction

  • HandleInputMode is no longer canceled if a handle is removed during its own DragFinished call. This fixes some very rare exceptions under complicated circumstances.
  • In CreateEdgeInputMode, toggling the direction of an orthogonal edge segment now works correctly when the mouse is over a potential target.
  • Tooltips with nested content are no longer closed immediately when opened below the cursor.

View

  • Fixed a potential memory leak that could occur when changing the GraphComponent.graphModelManager property.
  • The CanvasComponent.zoomToAnimated method now works correctly when a projection is used. This has previously been reported as fixed, but was not.
  • The GridVisualCreator class now properly recovers from WebGL context losses when it is in WebGL rendering mode.

Styles

  • The built-in styles with rounded corners now have the correct outline shape for all calculations.
  • Edges with Bezier paths can now also be animated to non-Bezier paths.
  • Edge cropping now works as expected when using the BezierEdgeStyle class and the terminating nodes have styles that don't provide an outline in their IShapeGeometry implementation.

WebGL2 Rendering Mode

  • We added a workaround to the code for the rendering of polyline edges in WebGL2 mode that prevents the Angular build optimizer from breaking it. Before, using an "optimized" build caused exceptions at runtime.
  • In WebGL2 rendering mode, labels in layout animations are now moved to the correct end positions. Previously, it could happen that the labels got stuck at a different position or simply jumped to the correct position at the end of the animation.
  • The CanvasComponent.fitContent and GraphCanvasComponent.fitGraphBounds methods now correctly center the graph when using WebGL2 rendering.
  • Exceptions are no longer thrown during layout animations with the combination of WebGL2 rendering, edges with bends, and the FilteredGraphWrapper class.
  • In WebGL2 rendering mode, elements selected in code before rendering the first frame are now correctly displayed as selected.
  • When using WebGL2 rendering mode in Firefox, self-loop edges and their selections are now always visible. Previously, self-loops, or the selection of self-loops, often failed to render initially until they were interacted with or were animated.
  • In WebGL2 rendering mode, polygonal edges no longer end in midair. Previously, under rare circumstances, when edges were removed from a large graph and only a few were reinserted later, it could happen that some of them did not visually connect with the target node.
  • The WebGL2 rendering mode now correctly detects when the browser discards its rendering contexts and continues rendering correctly. Context loss can occur for various reasons, such as too many other tabs in the browser also using WebGL rendering or a bug in the graphics driver.
  • In WebGL2 rendering mode, edges from a group to one of its children and self-loops are now rendered with the correct path.

Hierarchic Layout

  • The HierarchicLayout class no longer generates broken non-orthogonal edge segments of same-layer edges for some cases in conjunction with integrated edge labeling and edge labels placed at the ports.
  • The HierarchicLayout class now correctly routes grouped edges, where previously there could be overlaps of nodes and edges in some rare cases.
  • The HierarchicLayout class now properly satisfies PortCandidates defined for same-layer edges at nodes where other edges with (rather large) source/target port labels additionally exist.
  • The HierarchicLayout class now produces a correct edge grouping structure for short edges having the same source and target group ID.
  • The HierarchicLayout class no longer throws an exception when the edge directedness feature is used in conjunction with enabled backloop routing.
  • The HierarchicLayout class no longer produces overlaps between (large) external node labels and unrelated edges.
  • The HierarchicLayout class no longer creates unnecessary spacing between subcomponents and other elements. This previously happened in some cases due to edge labels or node labels being present. In consequence, these cases are now more compact.
  • The HierarchicLayout class no longer produces overlaps between subcomponent elements and edges that are not part of the component.

Organic Layout

  • The OrganicLayout class now produces correct results if auto-clustering is enabled (i.e., its clusteringPolicy property is not NONE) and the groupNodeMode property is set to FIX_BOUNDS or FIX_CONTENTS.
  • The OrganicLayout class now correctly considers fix-contents and fix-bounds groups if the substructure detection is enabled.
  • The OrganicLayout class now correctly handles nodes with several neighbors of degree one. Previously, such inputs could cause arrangement artifacts if the starSubstructureStyle is NONE.
  • The OrganicLayout class now correctly detects chain substructures if there are nodes of different types.

Circular Layout

  • The CircularLayout class no longer crashes when applying it on a graph that contains parallel edges and both edge bundling is enabled and node types are defined.
  • The CircularLayout class no longer produces node overlaps if the SingleCycleLayout.minimumNodeDistance property is set to zero.

Other Layouts

  • The PartialLayout class now correctly routes the edges if its allowMovingFixedElements property is enabled. Previously, in some rare cases, this setting could cause broken edge routes.
  • The ClearAreaLayout class now correctly routes the edges if its edgeRoutingStrategy property is set to STRAIGHTLINE. Previously, in some rare cases, this setting could cause broken edge routes.
  • The EdgeRouter class no longer produces artifacts if there are edges with curved routing style and labels, and the integrated edge labeling is disabled.
  • The TabularLayout class now correctly handles the case that the input graph contains only a single node. Previously, the node was not properly assigned to a partition cell and the partition cell row/column did not get correct values for its computed width, height and position.
  • The TableLayoutConfigurator class no longer sets a wrong originalPosition property for RowDescriptors and ColumnDescriptors when table insets are used.
  • The graph's undoEngine no longer gets corrupted after an exception in a layout algorithm was raised and caught.
  • Canceling multiple LayoutExecutorAsync instances running at the same time no longer leads to incorrect layout results.

yFiles for HTML 2.4.0.5 - Changes Since 2.4.0.4

This is the 5th bugfix release for yFiles for HTML 2.4. This version brings error corrections, a new demo, and no incompatible API changes.

Bugfixes

View

  • Measuring text with TextMeasurePolicy.SVG is now much faster, as it no longer triggers many unnecessary recalculations of the page layout. Note that yFiles uses the CANVAS policy by default, which was already fast and still is. However, if the result of the CANVAS policy differs greatly from that of the SVG policy, yFiles automatically switches to the latter.
  • The SVGs created with the SvgExport class now correctly show visuals of WebGL- and Canvas-based styles if a projection is set. Previously, such visuals were not visible in the SVG, and as a consequence, were missing in derived formats such as bitmap images or printouts.
  • The CanvasComponent.ensureVisible method no longer double-applies the contentMargins if animations are disabled for it. The same error also caused ensureVisible to be animated even when animations were disabled.
  • The FIT_CONTENT and FIT_GRAPH_BOUNDS commands no longer ignore the value of the CanvasComponent.animatedViewportChanges property.
  • The MouseHoverInputMode.adjustToolTipLocation method is now called when a tooltip is opened, as it was always intended to be.
  • With WebGL2 rendering, edges with bends were not rendered in recent versions of Chrome and Chromium-based browsers on Windows (version 97.0.4692.99 and higher). This is due to a newly introduced error in the hardware accelerated 3D rendering via Direct3D in Chromium's ANGLE implementation.

    This version of yFiles includes a workaround for this bug. In addition, we have been working with the Chromium team to identify the root cause of the issue so that the original problem will be fixed soon, possibly in the next Chrome bugfix release.

Hierarchic Layout

  • The HierarchicLayout class now adheres more closely to its maximum duration and its AbortHandler when the property SimplexNodePlacer.bendReduction is enabled.
  • The HierarchicLayout class now correctly processes input graphs with sub-components and curved edge routing style. Previously, such setups may have caused an exception.
  • The HierarchicLayout class now correctly assigns ports to edges incident to groups if the uniform port assignment is enabled for some cases where it previously did not yield a uniform port distribution.
  • The HierarchicLayout class now correctly considers the PreferredPlacementDescriptor of an edge label when there are additionally edge groupings defined. Previously, it could, for example, happen that the edge label was placed on the wrong side of the edge.
  • The HierarchicLayout class no longer produces superfluous port overlaps if there are edges with strong port constraints.
  • The HierarchicLayout class now considers the direction of a PortCandidate correctly for layout orientations other than TOP_TO_BOTTOM. This also improves the optimization results with PortCandidateSets that allow multiple directions to connect to nodes.
  • The HierarchicLayout class now correctly handles grouped input graphs if node compaction is enabled. Previously, the algorithm sometimes produced less compact results for such inputs.

New Demo

  • The new Magnifying Glass demo includes a specialized input mode that displays a floating lens that magnifies the cursor's surroundings.

yFiles for HTML 2.4.0.4 - Changes Since 2.4.0.3

This is the 4th bugfix release for yFiles for HTML 2.4. This version brings error corrections, but no incompatible API changes.

In addition, there are lots of new demos, and while our old demos weren't ugly, it was time for a change. The new look combines harmonious colors, round shapes with clear borders, and even better readability.

Last but not least, we updated the user interface of our API documentation and Developer's Guide for better usability and readability, and a more pleasant design. At the same time, we ironed out some quirks in the content.

Bugfixes

General

  • The TypeScript types of the delegate.combine, remove, and removeAll methods now allow both null and undefined arguments, as the implementation already did.

Graph

  • The ITable.StripeChanged event now reports the correct parent when re-parenting will be undone or redone.
  • The GraphBuilder, TreeBuilder, and AdjacencyGraphBuilder classes no longer throw exceptions when their updateGraph method is called after the graph has been modified.

View

  • There is no longer a console warning about adding a non-passive event listener. The originating event listener was added in version 2.4.0.3 as part of the workaround for touch interaction on iOS and is now correctly registered as active. In a related change, this workaround is now only active on touch devices.
  • Calling the CanvasComponent.cleanUp method no longer removes change listeners on commands for other CanvasComponents.
  • Non-essential CSS rules for the tooltip are now part of the stylesheet instead of being defined as the element's style (namely z-index, line-height, box-sizing) . This makes it easier to overwrite them with custom CSS rules.

Interaction

  • When expanding a closed group, the parent groups of the expanded group no longer become unnecessarily large. The incorrect behavior could be observed only under certain conditions and was caused by a bug in the NavigationInputMode class.
  • Collapsing and expanding a group no longer makes its parent groups larger with each operation. This error occurred only when the view-editor module was not loaded.

Layout

  • The LayoutExecutorAsync constructors now ignore null and undefined values in the given layoutDescriptor instead of throwing a TypeError.
  • The HierarchicLayoutData class now creates the correct constraints again when using the LayerConstraintsData.nodeComparables property. The behavior was wrong since yFiles for HTML 2.4.
  • The HierarchicLayout class now correctly considers the specified port groups for edges. Previously, such groups were not always considered properly if there are either critical edges or property SimplexNodePlacer.straightenEdges is enabled.
  • The HierarchicLayout class now correctly considers the specified critical edge priorities if the input graph contains grouped edges.
  • The HierarchicLayout class now adheres more closely to its maximum duration and its abortHandler.
  • The HierarchicLayout class now correctly considers input graphs with group nodes and a PartitionGrid. Previously, in some rare cases, such inputs may have caused overlapping group nodes.
  • The OrganicLayout and ClassicOrganicLayout classes no longer cause undesired layout side effects when a mapper is registered with key RecursiveGroupLayout.GroupNodeLayoutDpKey or when data is provided via the RecursiveGroupLayoutData.groupNodeLayouts property. Previously, the layout algorithms registered there could be applied to nodes that should actually be kept fix by the organic layout.
  • The OrganicLayout class no longer throws an exception when running on a graph with a partition grid, group nodes and the IDs of the group nodes are defined using a provider that cannot handle null as argument to its {{get}} method.
  • The CircularLayout class no longer produces node label overlaps when its placeChildrenOnCommonRadius property is disabled.
  • The EdgeRouter class no longer generates unnecessary detours in the routes when it is configured with MonotonicPathRestriction.BOTH.
  • The ClearAreaLayout class now correctly considers node labels. Previously, there could be results where node labels intersected with the specified area to be cleared.

New Demos

Graph Wizard for FlowChart Diagrams

The Graph Wizard for FlowChart Demo shows a convenient and fast way to interactively create flowchart diagrams. Many common tasks are easily available as single actions with both a context toolbar and shortcut keys. One example of such an action is adding the next step to a node and entering labels for both the new node itself and its link.

Critical Path Analysis (CPA) Demo

The Critical Path Analysis Demo shows how to perform critical path analysis in project management with yFiles. It combines yFiles's analysis algorithms to detect critical paths with its auto-layout to arrange the diagram in a suitable way.

Layout Features Tutorial

This new tutorial is intended for developers who want to learn how to implement a specific feature of the yFiles layout algorithms in source code. Therefore, these demos focus on this configuration code and provide only minimal interaction nor other feature.

Toolkit and Loading Demos

The yFiles demos for Vue.js are now available in TypeScript, and in versions for both Vue 2 and Vue 3.

The Preact Demo integrates yFiles in a Preact app. It uses the "No build tools route" of the preact setup for simplicity. A custom template node style uses data binding to keep the visualization in sync with the data.

The Svelte Demo integrates yFiles with the Svelte framework. It features a custom node style with data binding, asynchronous layout calculation in a web worker, a development setup with hot module reloading, and more.

The Vite Demo integrates yFiles with the Vite framework. Among others, it makes use of Vite's hot module replacement and features an auto-layout that is calculated in a web worker.

The WMR Loading Demo shows how to load yFiles with WMR as a loader for efficient web development and easy builds.

The Web Dev Server Demo shows how to conveniently develop with yFiles for HTML using the buildless Web Dev Server by "Modern Web".

The Snowpack Demo integrates yFiles in a Snowpack project. This demo support Snowpack's hot module replacement.

Demos for Diagram Types

The Tag Cloud Demo creates tag clouds with circular and rectangular bounds with the help of yFiles's auto-layout.

The Chord Diagram Demo shows how to create a chord diagram that emphasizes the magnitude of connections between nodes.

The Arc Diagram Demo shows how to arrange and visualize a graph as an Arc Diagram.

Style Demos

The Isometric Bar Chart Node Style Demo shows how a diagram can be augmented with isometric bars providing additional information about the nodes.

The List Node Demo shows nodes which consist of re-arrangeable rows with associated edges. This means that when a row is moved, its edges are moved as well.

The String Template Node Style Demo presents a versatile and customizable template node style.

The Directed Edge Label Style Demo shows label styles displaying arrows that always point to the source or target port.

The Composite Node Style Demo shows how to combine node visualizations from several styles.

Interaction Demos

The Drag from Component Demo shows how to drag elements from the canvas to elements outside the canvas.

The Graph Drag and Drop Demo shows drag and drop of graphs consisting of multiple items.

The Custom Drag and Drop Demo shows how to change the color of nodes and edges using drag and drop operations.

The Deferred Cut Clipboard Demo shows how to implement a clipboard that grays out elements when they are cut and only removes them completely when they are pasted. This behavior is similar to that of Windows Explorer.

The Marquee Node Creation Demo shows how to customize the MarqueeSelectionInputMode class to create new nodes. In other words, users can click-and-drag with the mouse to create a new node of the desired size.

The Arrange Objects Demo shows simple operations for aligning and distributing nodes.

The Restricted Editing Demo shows how to restrict interactive editing when using the GraphEditorInputMode class.

The Button Input Mode Demo shows how to use a custom input mode for adding temporary buttons for model items.

Other Notable Demo Improvement

yFiles for HTML 2.4.0.3 - Changes Since 2.4.0.2

This is the third bugfix release for yFiles for HTML 2.4 which brings some error corrections.

In addition, a new version of the yFiles for HTML Optimizer is available on npm. The optimizer now supports the obfuscation of babel's safe public class fields output and comes with a TypeScript type declaration file that provides code completion in webpack config files.

Bugfixes

  • Two problems with touch interaction in iOS and iPadOS devices have been corrected.

    • Double taps work now correctly, again.
    • A long press no longer selects some random text in the page.
  • The ParallelEdgeRouter class now produces correct parallel routes if its property joinEnds is enabled.
  • The LayoutExecutorAsyncWorker.process method no longer throws a cryptic error if a hierarchic layout with layer constraints or sequence constraints should be calculated but the layout-hierarchic module is not yet loaded, e.g. because lazy loading is used.
  • In the TypeScript type declarations, parameters of type enum are no longer advertised as being type convertible in places where they are not. Previously, using a string as argument in these places compiled without problems but the argument value had no effect.

Notable Demo Improvement

yFiles for HTML 2.4.0.2 - Changes Since 2.4.0.1

This is the second bugfix release for yFiles for HTML 2.4. There are 2 error corrections and some demo improvements.

Bugfixes

  • With WebGL2 rendering, group nodes at certain levels of nesting no longer disappear if they are collapsed.
  • The EdgeRouter class now stops much more quickly when the maximumDuration is exceeded or the algorithm should stop due to AbortHandler. Previously the search for a path kept on running for a long time.

New Demos and Notable Demo Improvements

  • The new Simple Highlight Decorator and Complex Highlight Decorator demos show how to highlight graph items in a simple and a more complex use case, respectively.
  • The demos that calculate an automatic layout in a Web Worker now show correctly how to handle exceptions that are thrown during the layout calculation.

yFiles for HTML 2.4.0.1 - Changes Since 2.4

This is the first bugfix release for yFiles for HTML 2.4. In addition to the usual error corrections, there are some demo improvements.

This release reverts an unintended incompatible change in yFiles for HTML 2.4.

Bugfixes

Graph, View, and Interaction

  • Smooth zooming is now performed correctly on more input devices.
  • Smooth zooming now works in Internet Explorer 11.
  • Mouse event coordinates are no longer quantized to very large steps if a projection is used and the viewport is zoomed in afterwards.
  • Fixed a possible error when the graph was altered while label editing was in progress.
  • Fixed a bug which caused the FilteredGraphWrapper.getParent method to return parent nodes which are hidden by the filter. This bug could have caused errors in a FoldingView if a FilteredGraphWrapper was the master graph.
  • The clipboard now doesn't copy labels or ports if they are not selected and their owner's IClipboardHelper forbids copying the owner.

Layout

  • The HierarchicLayoutData class no longer incorrectly assigns same-layer constraints to nodes for which the LayerConstraintsData.nodeComparables property provides comparables of equal value. The incorrect behavior was only introduced with yFiles for HTML 2.4.
  • Automatic type conversion now works correctly again for the LayerConstraintData.nodeComparables, SequenceConstraintData.itemComparables, and ClearAreaLayoutData.componentIds properties. While the type declarations still reflected the possible conversion, this crashed at runtime.
  • 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 PartialLayout.allowMovingFixedElements method now works correctly and throws an error if the layout-area module is missing.
  • The RadialLayout class is now much faster if the input graph is a very large tree structure.
  • 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.

Type Declarations

  • The TypeScript declaration files (.d.ts files) no longer specify not applicable types for some properties of option objects.

Most Notable Demo Improvements

  • The demos for React and React with TypeScript no longer throw an error during npm install since they now correctly declare their fs-extra dependency.
  • In the webpack demos, live reloading now works as expected.

yFiles for HTML 2.4 - Changes Since 2.3.0.4

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.

yFiles for HTML 2.3.0.4 - Changes Since 2.3.0.3

This is the 4th bugfix release for yFiles for HTML 2.3. It brings error corrections and some demo improvements.

There are no incompatible API changes in this release.

Bugfixes

View and Interaction

  • The ViewportLimiter class no longer prevents users from zooming out in certain situations. In addition, it no longer causes sporadic jumps of the viewport.
  • Snap lines are no longer rendered at the wrong location on the screen.
  • Arrow heads of some snap lines are no longer rendered with an incorrect orientation in isometric views.
  • The rendering of newline characters in the MarkupLabelStyle is now consistent with the behavior of whitespace in HTML. Especially, newlines are rendered as a single space and ignored on the start and end of the input string.
  • The viewport rectangle in the overview is now correctly hit-tested when a projection is used.
  • Using the NinePositionEdgeLabelModel for edges with the BezierEdgeStyle no longer throws an error in the BezierEdgeStyleRenderer.getSegmentCount method.
  • An animation created with the Animations.createGraphAnimation method no longer throws an error if the provided IMapper with new bend locations doesn't provide bend locations for all edges.
  • Layout animations for graphs with ports that are owned by edges no longer throw an error.
  • Disposing a GraphComponent during a running animation no longer throws an error.

Layout and Algorithms

  • After running a layout for a graph component with the LayoutExecutor class or the morphLayout method, the LayoutExecutor instance is now properly removed from the lookup of the component. Previously, all LayoutExecutor instances were accumulated in the lookup, and with them the used IGraph, ILayoutAlgorithm, and LayoutData instances, resulting in a memory leak.
  • 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 HierarchicLayout class no longer ignores edges connected to group nodes when the group node contains a bus structure 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 error.
  • 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 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 HierarchicLayout, EdgeRouter and CurveRoutingStage classes no longer occasionally throw an error when the curved routing style is used for graphs that have self-loop edges.
  • The HierarchicLayout class no longer occasionally throws an error when enabling HierarchicLayout.compactGroups and in conjunction with layering constraints and/or a group node marked as incremental.
  • The ClearAreaLayout class now produces correct orthogonal routes for edges if its clearAreaStrategy property is set to a local strategy. Previously, some of the edges may have received a non-orthogonal route.
  • The EdgeRouter class no longer throws an error if the input contains a bus defined via BusDescriptor where all the associated edges are actually fixed.
  • The Manhattan distance metric of HierarchicalClustering no longer ignores the vertical distance component.
  • The LabelPropagationClustering algorithm now produces normalized, continuous clustering IDs. In other words, for example, if it finds 5 clusters, they get IDs from 0 to 4. Previously, the range of IDs may have contained holes. If initial label values are provided, this normalization is omitted.
  • The Cycles.findCycleEdges algorithm no longer crashes when the given input graph contains self-loops.

Noteworthy Demo Improvements

  • The new Jest Demo shows how to setup unit testing of a yFiles for HTML-based application without running a browser. It complements the existing Jest Puppeteer Demo, and shows how to mock parts that depend on the DOM and how to avoid the costly transpilation of the yFiles JS modules.
  • Updated the dependencies to third-party frameworks and tools in the demos, for example React, Vue CLI, Electron, etc.
  • The VuejsNodeStyle class now correctly uses the zoom property of the IRenderContext parameter in its createVisual and updateVisual methods instead of using the zoom of GraphComponent instance.
  • The PDF Export Demo now supports user-specified output paper sizes, for example A4, A3, and letter.
  • In the Web Worker Demos, the JsonIO class now correctly handles the positions of group node labels that are positioned with the InteriorStretchLabelModel.
  • In the Drag and Drop Demo, dropping edges via the native DnD API now works in all supporting browsers.
  • The Image Export Demo now correctly exports arrows in Internet Explorer 11. This required an update of the underlying canvg library which no longer supports IE 9.

yFiles for HTML 2.3.0.3 - Changes Since 2.3.0.2

This is the third bugfix release for yFiles for HTML 2.3. It brings error corrections and a few improvements of the developer experience.

There are no incompatible API changes in this release.

Improvements

  • The performance of the DefaultLabelStyle class has been improved, especially when creating a large number of labels at once.
  • The minimum required TypeScript version of the typings is now documented, which is, since yFiles for HTML 2.3, TypeScript 2.8.

    Note that due to an incompatible change in TypeScript 4.0, overriding non-abstract properties of a yFiles type fails in TypeScript 4.0+. See the related knowledge base article for more information.

  • Several sections of the developer's guide have been updated and extended.
  • Browsing the TypeScript demos in the yFiles package is now possible right from the start without any manual configuration. They are linked from the included demo overview page, and a watcher task is included
  • When editing demo source code in the preconfigured Visual Studio Code project, the code completion suggests only imports from the yfiles module. Additional unwanted imports from the yfiles-umd module are no longer suggested.
  • The yFiles for HTML optimizer was updated to version 1.4.2. It now supports the latest ECMAScript language features and automatically excludes from obfuscation several API names used by popular frameworks like Angular and Vue.js.

Bugfixes

  • The TypeScript typings now define the delegate function and its methods. Previously, this API was only part of the API documentation but missing in the typings.
  • Corrected the automatic conversion from object syntax with string values to ObjectBindings.
  • The GraphModelManager.getMainCanvasObject method no longer throws an error when overriding its getCanvasObject methods for specific item types in an unexpected way.
  • The MapEntry class now properly implements value equality. Previously, it unintentionally implemented reference equality, and as a consequence, the results of the methods getPathBetween, getAllPathsBetween, and hasPathBetween of the PathsResult class never found a matching path. Note that neither the PathsResult.paths property nor the HashMap class were affected by this error.

Interaction

  • The NodeDropInputMode class now correctly considers port labels, both for creating the new node and for the preview.
  • The ICommand.ZOOM_TO_CURRENT_ITEM command now centers the current item even if a ViewportLimiter ois enabled and uses a limitingPolicyof TOWARDS_BOUNDS.
  • The new default ViewportLimiter policy TOWARDS_BOUNDS no longer causes the viewport to scroll to unexpected locations (including far away from the graph) during layout animations.
  • Calling the GraphInputMode.FindItems and GraphInputMode.HitTester.EnumerateHits methods with a custom IInputModeContext will now always pass that context to the IHitTestable implementations of the items being hit-tested. Previously, the main input mode's own IInputModeContext was used in certain cases.
  • When the viewport changed while a mouse button was pressed, the corresponding MouseEvent was accidentally reported via the MOUSE_MOVED event rather than the MOUSED_DRAGGED event. The eventType property was correct, though.
  • The context parameter of the static IHitTestable.create method is now correctly defined as non-null, as it is already the case for all other of these create methods.

Layout

  • Instantiating a new PartialLayout no longer fails with an error if no type from the layout-organic was used before.
  • The HierarchicLayout class now correctly handles inputs that have both bus structures and edges with recursive style. Previously, an exception could be triggered when an edge was marked as recursive and belonged to a bus at the same time.
  • 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 with the EdgeRouterBusDescriptor class.
  • 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 and when they share both source and target port with a fixed edge.
  • 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 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 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 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.

yFiles for HTML 2.3.0.2 - Changes Since 2.3.0.1

This is the second bugfix release for yFiles for HTML 2.3. There are only a few error corrections but several new demos.

There are no incompatible API changes in this release.

Bugfixes

Graph and View

  • For all three graph builder and tree builder classes, the GraphBuilderItemEventArgs.dataItem property of the NodeRemoved and EdgeRemoved events no longer contains an outdated object in some cases.
  • The GraphBuilder class no longer fails if an edge and its source or target node are removed by the same updateGraph call.
  • The TypeScript definitions and the documentation of the GraphOverviewCanvasVisualCreator, GraphOverviewSvgVisualCreator, and GraphOverviewWebGLVisualCreator classes now contains the previously missing methods createVisual and updateVisual.
  • The ViewportLimiter class now queries the getCurrentBounds method if the ViewportLimitingPolicy property is set to ViewportLimitingPolicy.TOWARDS_LIMITS, too.

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.
  • Curved edge routes generated by the HierarchicLayout,EdgeRouter, and CurveRoutingStage classes are now more symmetric and smoother in cases where a large number of edges connect to the same node side. Previously, non-curved artifacts could appear.
  • The HierarchicLayout class does not crash anymore when defining different edge routing styles for different edges where at least one of the styles is HierarchicLayoutEdgeRoutingStyle.CURVED.
  • 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.
  • The EdgeRouter class no longer occasionally throws an exception if the input contains bus edges
  • Resolved a potential null-reference error caused by the ChannelEdgeRouter class when using the OrthogonalPatternEdgeRouter class as path finder strategy.

New Demos

Process mining visualization
The new Process Mining Visualization Demo shows how to create an animated visualization of a process flow. The diagram shows the various steps in a processing pipeline and how entities move through the pipeline. A heat map shows which elements in the graph are nearing their capacity limit.
Aggregating nodes with common properties
The new Interactive Aggregation Demo shows how to analyze a graph by interactively aggregating nodes with common properties.
A node style with a modifiable shape
The new Editable Path Node Style Demo shows a path-based node style whose control points can be moved by users.
Avoiding node overlaps while editing graphs
The new Node Overlap Avoiding Demo shows how an automatic layout can remove node overlaps while a user interactively edits a graph.
Folding with layout
The new Folding With Layout Demo shows how to automatically trigger a layout that clears or fills the space when opening or closing groups.
Clear an area of graph items
Two new, similar demos show how the clear and fill area layout can be used to keep an area clear of graph elements during user interaction. The new Clear Marquee Area Demo automatically keeps a marquee area clear of graph elements, and the new Clear Rectangle Area Demo keeps a user-defined rectangular area clear of graph elements.

Noteworthy Demo Improvements

  • In large Angular apps, especially ones with many components, performance can go down due to Angular's extensive and expensive change detection. To prevent this, the yFiles GraphComponent should run 'outside of Angular'. Details are explained in the corresponding knowledge base article and shown by the updated Angular Demo.
  • The BPMN Editor Demo now contains a parser for the BPMN Diagram Interchange format.
  • The React Demo now comes with a template node style that makes use of React's data binding to automatically update its visualization when the corresponding data changes.
  • We removed the previous Isometric Drawing Demo. Since the introduction of the Projection feature in version 2.3, the approach shown in this demo is no longer recommended. It is replaced by the new demo that was introduced in 2.3 with the name Isometric WebGL Rendering Demo.

yFiles for HTML 2.3.0.1 - Changes Since 2.3

This is the first bugfix release for yFiles for HTML 2.3. In addition to the usual error corrections, there is a new demo and a noteworthy correction in demo code.

There are no incompatible API changes in this release.

Bugfixes

General

  • In the UMD variant of the library, the layout-area module now correctly includes all types that belong to the ClearAreaLayout and FillAreaLayout APIs.
  • The layout-only yFiles for HTML packages now contain the library module layout-area that was missing before.
  • The AdjacencyGraphBuilder and TreeBuilder classes now properly remove references to edges whose source or target node has been removed.

    In addition, these classes no longer create incomplete graphs when an invalid parentId was specified for a node.

View and Styles

  • In version 2.3, the SvgExport class did not inline external Bitmap images anymore. This has been fixed and the documentation has been improved.
  • Several problems related to the text measuring performance improvements of version 2.3 are now fixed. Effectively, these improvements have an effect only now.
  • The MarkupLabelStyle class now places text that starts or ends with some empty lines correctly when using the option VerticalTextAlignment.TOP.
  • If the preferred label size is too small to even render wrapped text, the MarkupLabelStyle class does not throw an error anymore. In addition, if the remaining text of a line doesn't fit in the next line after cropping, text rendering will now end at this text position instead of continuing with the next line.
  • Measuring text with the TextRenderSupport class is now more exact. Previously, the determined width of a line was one pixel to small (except for lines that ended with an ellipsis). Especially, this problem affected the text placement of the built-in label styles.
  • Edges styled with BezierEdgeStyle now remain smooth during layout animations and are now properly cropped at nodes whose IShapeGeometry implementations return null as outline.
  • The bounds and the hit testing of the BezierEdgeStyle class now consider the entire edge, regardless of the number of bends, and performance problems in the isVisible, isHit, and getBounds methods have been fixed.
  • Due to better null checks, several styles and input modes no longer throw an error in the rare case that an IRenderContext doesn't provide a CanvasComponent instance.
  • The ViewportAnimation no longer throws an error when applied on a zero-size GraphComponent.

Input

  • The ICommand.SET_CURRENT_ITEM command can now also be used to “reset” the current item to null by passing null as the command parameter. This also fixes that the NavigationInputMode.setCurrentItem and GraphInputMode.setCurrentItem methods did nothing when null was passed as an argument.
  • The TextEditorInputMode class now correctly queries the ViewportLimiter if its textBoxPlacementPolicy property is set to TextBoxPlacementPolicy.SCROLL_CANVAS. Now, if a text box is not visible at its original location because it's outside the limited viewport, the viewport only scrolls to its limits and then the text box is moved instead.
  • The GraphClipboard.paste method is now called from the paste command, thus overriding it will now have the expected effect.

Layout and Analysis

  • The IGraph.morphLayout and LayoutExecutor.start methods no longer throw an error when applied on a zero-size GraphComponent.
  • GraphCentrality and ClosenessCentrality no longer calculate infinite or NaN centrality values on single-node graph subsets. Moreover, these classes no longer include results for a single node if the original graph has a single node and the subset filters that node away.

New Demos and Noteworthy Demo Improvements

  • The new Layout Without View Demo shows how to run graph analysis and layout algorithms without a view and without the IGraph API.
  • A problem in the context menu implementation that is used by several demos is now fixed. It prevented the opening of all context menus in demos. Now, context menus in demos show again as expected.

yFiles for HTML 2.3 - Changes Since 2.2.0.3

Major New Features

Isometric Drawing and Other Projections

CanvasComponent and thus GraphComponent now have an additional projection property that can be used to transform the viewport into a different parallel projection, e.g. isometric or cabinet projection. Predefined useful projections are provided as constants on the Matrix class. Interaction, including graph editing, snapping, orthogonal edge editing, etc. still work as expected, just within the new projection. That is, orthogonal edge editing becomes isometric edge editing with an isometric projection. The corresponding chapter in the Developer's Guide has all details about the customization options and the changes related to these features.

Projections are supported by all three rendering modes SVG, HTML Canvas, and WebGL.

The new Isometric WebGL Drawing Demo displays graphs isometrically and allows for adjusting the projection to rotate the graph in 3D.

Fill Area Layout and Clear Area Layout

The new ClearAreaLayout algorithm clears a user-specified area in an existing layout by moving elements. It is suitable if the rest of the layout should not change much but some free space is required, e.g., because new elements need to be inserted into the drawing or have been resized.

The new FillAreaLayout algorithm fills a user-specified area in an existing layout by moving elements into or towards it. It can make layouts around the specified area more compact and is suitable if, e.g., elements were removed from the graph or their size has changed substantially.

These new layout algorithms are part of the new layout-area module.

The Component Drag and Drop Demo uses the ClearAreaLayout algorithm to create space in the graph for newly inserted components. In the Fill Area Layout Demo, the FillAreaLayout algorithm closes gaps in the graph layout after graph elements were deleted. Finally, the Interactive Graph Restructuring Demo combines both algorithms to adjust the graph layout while sub-graphs are moved and reconnected within the graph.

Aggregation and Analysis of (Large) Graphs

Many new algorithms for analyzing graphs are now included, for example to detect components and clusters, to aggregate sub-graphs, and to calculate centrality values. In addition, the analysis algorithms now have the option to define a subset of the graph to work on. In detail, the new classes are:

  • The new NodeAggregation class provides an algorithm that intelligently aggregates nodes of (large) input graphs. It does not require complex configuration and can be used without knowledge of specific clustering or aggregation techniques.
  • The KCoreComponents class provides a component detection algorithm that finds k-cores.
  • The classes LouvainModularityClustering and LabelPropagationClustering provide two new algorithms for cluster detection.
  • The EigenvectorCentrality class offers a centrality algorithm that measures the influence of a node in a network based on the Eigenvector score.
  • The PageRank class provides a centrality algorithm that calculates the so-called page rank for the nodes.
  • The classes ChainSubstructures, CliqueSubstructures, CycleSubstructures, StarSubstructures, and SubtreeSubstructures provide new algorithms that detect isolated substructures like chains, cliques, cycles, stars, or subtrees. This can be used as an input to other (layout) algorithms.
  • The class GraphStructureAnalyzer now offers additional methods to calculate the average degree, the average weighted degree, the diameter, and the density of a given graph.

The Large Graph Aggregation Demo shows how to use the NodeAggregation algorithm to automatically analyze and explore a large graph. Developers don't need to learn the academic details of the available clustering and centrality algorithms, but can simply configure their preferred aggregation sizes to automatically create perfect user-experiences in drill-down scenarios.

The other new graph analysis algorithms are shown in either the Graph Analysis Demo or the Clustering Algorithms Demo.

Markup Label Style

The new MarkupLabelStyle interprets the label's text as markup and renders the label accordingly, for example with bold or italic parts, different colors, and different sizes. With this style, many typical text styling requirements can be realized without implementing a custom label style.

The new Markup Labels Demo shows the markup that is supported by this style. The new Markdown Label Demo realizes basic markdown rendering based on this style and the new Rich Text Label Demo shows how to implement interactive rich text editing for this style.

Bezier Edge Style

The new BezierEdgeStyle renders edges with smooth Bezier-curve paths. For intuitive interactive editing, the style comes with the same control points -or handles- that are known from other vector graphic drawing applications.

In addition, the new edge label models BezierEdgePathLabelModel and BezierEdgeSegmentLabelModel place labels optimally on curved edges rendered with this style.

The new Bezier Edge Style Demo presents this edge style and its label models. In addition, several of the existing demos with curved edges now use the new style.

Interactive Node Resizing
Resizing nodes using their handles now supports two new behaviors:
  • Center resizing keeps the center fixed and scales the node in all directions. It is active when the NodeReshapeHandleProvider.centerReshapeRecognizer is triggered which defaults to KeyEventRecognizers.ALT_PRESSED.
  • Aspect ratio resizing maintains the aspect ratio of a node. It is active when the NodeReshapeHandleProvider.ratioReshapeRecognizer is triggered which defaults to KeyEventRecognizers.SHIFT_PRESSED.
  • The NodeReshapeHandleProvider.reshapePolicy property determines how the mouse location is interpreted when aspect ratio resizing is active.

The Reshape Handle Configuration Demo showcases these different resizing behaviors.

Related to this, the new Node Selection Resizing Demo shows how to resize a selection of nodes en bloc. In contrast to the default behavior, this changes both the sizes and the locations of the nodes and not just the sizes.

Graph Builder

The old GraphBuilder, TreeBuilder, and AdjacentNodesGraphBuilder classes have been replaced in the library with more powerful but incompatible builder classes. Loading graphs from external data sources has become even easier with the new graph builder implementations. This release contains completely rewritten utility classes that can help with the creation of diagrams from one or more data sources.

With perfect TypeScript-based code completion, the new classes can load nodes, edges, labels, and their properties from one or many different sources dynamically using a declarative-like approach. Binding expressions can be used for setting the visual properties of the graph entities depending on the values in the source data.

For backward compatibility, the old GraphBuilder, TreeBuilder, and AdjacentNodesGraphBuilder classes are available as demo code in the demos-js/utils directory.

The Graph Builder Demo, the Tree Builder Demo, the Adjacency Graph Builder Demo, and the Simple Graph Builder Demo show how to load graph data from JSON using the new graph builder classes.

Improvements for Developers
  • The new development mode variant of the library includes the powerful yFiles runtime type checking. It's no longer needed to include it separately and deployment tools like webpack can strip it from "production" builds.
  • Custom object formatters for the developer tools in Google Chrome and other Chromium browsers.
  • The UMD variant of the library now also provides namespace-less names, so the modern "flat" API can easily be used with Node.JS, web workers, or RequireJS.
  • Various improvements for the optimizer.
  • The semi-automatic migration tool was rewritten to make the migration process for returning users easier. It now offers built-in TS support, an incremental mode, and clear output with source code references recognized by major IDEs.
  • Removed the create-node-library tool, as the UMD library now already includes top-level exports of all types.
  • Two new demos show how to lazily load yFiles modules with dynamic imports, namely the Webpack Lazy Load yFiles Demo and the Webpack Lazy Load Layout Modules Demo.
TypeScript Demos
A large number of demos is now available in a TypeScript version in addition to the JavaScript version. In this release, these demos include all tutorials of the Getting Started, Custom Styles, and Application Features tutorials, as well as all the new demos. More demos in TypeScript will be added in future minor and major releases, but all demos will always be available in JavaScript, too, and both versions will be identical except for language differences.

New Features

General

  • yFiles interfaces now provide a static create method that creates a new instance of the interface. The signature of this method follows the same rules as the quick interface implementation of the interface. This is especially useful in TypeScript projects since the previous JavaScript-style quick interface implementation syntax cannot be expressed with TypeScript definition files.
  • Types that support type conversion now have a static from method to explicitly invoke the conversion. This is especially useful in TypeScript projects and custom code to set properties in this way.
  • GraphML I/O now supports a static $meta attribute to annotate properties of classes with GraphMLAttributes. This alleviates the need to revert to the yFiles class framework for classes that should be serialized through GraphML.

Graph Component and Interaction

  • To improve accessibility, the new GraphComponent.ariaLiveRegion property provides an aria-live region that can be used to update screen readers. The new Accessibility Demo shows how to make use of this property.
  • The default label style now supports right-to-left text direction. Label text is properly placed and wrapped when the CSS direction of the GraphComponent's <div> element is set to rtl. The Label Text Wrapping Demo has a new graph sample with right-to-left text.
  • The GraphComponent is now prepared to provide complete control of the z-order of elements in all cases. The new Z-order Demo shows how to use this to maintain the z-order during operations there the library does not maintain this order by default, e.g. for undo and redo, expanding and collapsing groups, and clipboard commands.
  • Added support for two-finger drag and pinch touchpad gestures. The new MouseEventArgs.wheelDeltaX property provides the horizontal mouse wheel component.
  • The template styles now provide a makeObservable method to transform a regular data object into an observable object, allowing TemplateBindings to react to changes of these objects automatically.

    In addition, bindings in template styles now support "duck typing". In other words, if the bound object fires the appropriate events, the binding is updated automatically.

  • All string template styles now strip executable code from the templates to prevent attacks via GraphML. To re-enable code injection set the new static property trusted on any of these classes to true.
  • The new NodeLabelModelStripeLabelModelAdapter class allows using node label model parameters for the positioning of the row and column labels of a table.
  • A new policy has been added to the ViewportLimiter class which allows for zooming and panning towards the limits but not away from them. This prevents the viewport from "jumping" from out-of-limit coordinates into the limited bounds.
  • An Animation can now be paused and unpaused by setting the new Animator.paused property after the animation has started. This feature is used in the Network Monitoring Demo to pause the animation of the network traffic.
  • The GridVisualCreator class can now also draw only horizontal lines or only vertical lines when its gridStyle property is set to one of the new enum values GridStyle.HORIZONTAL_LINES or GridStyle.VERTICAL_LINES.

Layout

  • The EdgeRouter class and the HierarchicLayout class now support a new routing style that generates curved edge paths. This style can be specified for each edge individually using the EdgeRouterEdgeRoutingStyle.CURVED enum value and the HierarchicLayoutEdgeRoutingStyle.CURVED enum value, respectively.
  • The new layout stage CurveRoutingStage replaces polyline edge paths with curved segments using cubic bezier splines and provides a generic way to produce layouts with curved edges.
  • The new property EdgeRouterEdgeLayoutDescriptor.routingStyle allows specifying the routing style individually for each edge routed by the EdgeRouter class. Furthermore, the new properties maximumOctilinearSegmentRatio and preferredOctilinearSegmentLength on the descriptor provide means to configure the octilinear routing style.
  • The CircularLayout class now supports exterior edges that are routed around the exterior of the circle as smooth arcs. This can be specified with the new CircularLayout.edgeRoutingPolicy property.
  • The new EdgeBundlingStage class offers edge bundling for general undirected graphs. Bundling together multiple edges means that their common parts are to some degree merged into a bundled part. Edge bundling is useful to increase the readability of graph drawings with a high number of edges that connect a comparably small number of nodes.
  • The RadialLayout class now supports a user-defined layer/circle assignment strategy. This can be specified with the RadialLayoutLayeringStrategy.USER_DEFINED enum value and the layout data property RadialLayoutData.layerIds.
  • The Layout Styles Demo has been enhanced to include the following layout features and improvements:
    • Exterior edge routing for the circular layout
    • Curved edge routing and bus routing for the hierarchic layout and the edge router.
    • Integrated edge labeling for the edge router.

Algorithms

The "algorithms" part of the library provides the actual implementation of the new aggregation and analysis algorithms. Since this part uses the Graph API instead of the common IGraph API, using these implementations directly is rarely needed.

  • New methods of the GraphStructureAnalyzer and GroupAlgorithm classes compute several additional network statistics, namely GraphStructureAnalyzer.getAverageDegree, GraphStructureAnalyzer.getAverageWeightedDegree, GraphStructureAnalyzer.getDiameter, GraphStructureAnalyzer.getDensity, and GroupAlgorithm.getModularity.
  • The new NodeAggregationAlgorithm class provides an algorithm that intelligently aggregates nodes of (large) input graphs.
  • The new TransitivityAlgorithm.transitiveEdges method creates the transitive edges that connect the visible nodes in an input graph.
  • The new GroupAlgorithm.getClusteringCoefficient method computes the local clustering coefficient for each node as well as the average clustering coefficient.
  • The new GraphConnectivity.kCore overloaded methods compute the so-called k-cores of an undirected input graph.
  • The new CentralityAlgorithm.eigenvectorCentrality method computes the eigenvector centrality for each node in an undirected graph.
  • The new GroupAlgorithm.labelPropagation method implements the label propagation algorithm which detects communities in the input graph.
  • The new GroupAlgorithm.louvainModularity method detects the communities of an input graph by applying the well-known Louvain method for community detection.
  • The new CentralityAlgorithm.pageRank method provides an implementation of the page rank algorithm that computes a rank for each node.
  • The new Substructures class offers methods to detect the following graph structures: Chains, Cliques, Cycles, Stars, and Trees.

Improvements

  • The new static method IEdge.getPathPoints returns an IListEnumerable that contains a snapshot of the source port location, followed by the bend locations, followed by the target port location of an edge.
  • The ITable.addLabel method no longer accepts label model parameters that do not support IStripe instances. Previously node label models could be used but did not work properly at runtime.
  • The new Fill.hasSameValue method can be used to check two fills for equality.
  • The classes DefaultFolderNodeConverter and FoldingEdgeConverterBase provide a new protected method createPreferredLabelSize to allow for overriding the default implementations.
  • The performance of GraphML serialization and deserialization was improved.
  • The parameter of all predicate functions is now annotated as not-null which makes it more comfortable to implement these functions.
  • BaseClass has now overloads with more than one type parameter, making the TypeScript syntax for implementing several interfaces less complicated.

Collections

  • The interfaces IEnumerable and IList now provide the methods indexOf and findIndex which behave similarly to the corresponding functions of JavaScript Arrays. The method IList.indexOf now has an optional parameter fromIndex.
  • The IList interface now declares the methods push, pop, shift, and unshift that work in the same way as the corresponding methods of JavaScript arrays.
  • The static methods Point.from, Size.from and Rect.from can now convert any object that provides at least properties like x, y, width, and height.
  • The new Point.interpolate method calculates the linear interpolation between two points.
  • The IMap interface now extends the IMapper interface to facilitate registering instances of maps in the MapperRegistry.
  • A native JavaScript Map can now be converted automatically to IMapper.

View

  • The DOM update performance when elements in the back of the rendering stack got removed or changed their z-Order was massively improved.
  • The GraphOverviewComponent is now rendered with HTML Canvas instead of SVG by default. This results in better performance and was always the intended behavior.
  • The performance of general text measuring for TextMeasurePolicy.SVG was improved for cases in which a lot of measurements are done in a short period of time, e.g. during bulk label creation.
  • The CanvasComponent.fitContent method now respects the limitedFitContentZoom property if a ViewportLimiter is enabled.
  • The CanvasComponent.updateContentRect method now throws an exception if an element on the canvas provided invalid bounds, e.g. one with infinite values.
  • The methods raise, lower, toFront, and toBack on class GraphModelManager are now virtual.
  • The new GraphModelManager.provideUserObjectOnMainCanvasObject property can be set so that a model is accessible as its main canvas object's user object.
  • The new SvgExport.cssStylesheet property allows for defining CSS rules that are added to the exported SVG. Additionally, setting it explicitly to null lets the SvgExport class automatically add all relevant CSS rules from available stylesheets to the exported SVG.
  • The classes NodeStyleLabelStyleAdapter, NodeStylePortStyleAdapter, and NodeStyleStripeStyleAdapter now propagate the tags of labels, ports, and stripes to the node that's rendered with the node style.
  • The rendering performance of the DefaultLabelStyle class was improved when setting a maximumSize.
  • To make overriding easier, the overloaded method IPathGeometry.getTangent that has a segment index and a ratio as parameters was renamed to getTangentForSegment. The corresponding methods of EdgeStyleBase and GeneralPath were renamed as well.
  • To make overriding easier, the overloaded methods GraphModelManager.getCanvasObjectGroup now have distinguishable names, namely getNodeCanvasObjectGroup, getEdgeCanvasObjectGroup, etc.

Graph Component's New Projection Feature

  • The CanvasComponent class has additional methods to convert between the world, the new intermediate, and the view coordinate system.
  • The MarqueeSelectionInputMode, NavigationInputMode, and HandleInputMode classes now have a property useViewCoordinates which controls whether the input mode draws its decorations and processes input in view coordinates.
  • When the MarqueeSelectionInputMode class uses view coordinates, the resulting shape of the marquee in world coordinates may not be a rectangle. Therefore, the MarqueeSelectionEventArgs class now has a path property of type GeneralPath to describe the marquee shape and a usePath property that determines whether the path property or the rectangle property shall be used.
  • The EdgeDecorationInstaller, RectangleIndicatorInstaller, PointSelectionIndicatorInstaller, and DefaultPortCandidateDescriptor classes now have a useViewCoordinates property that controls whether the decoration is rendered in view coordinates.
  • The ContextConfigurator.calculateScaleForHeight and calculateScaleForWidth methods now take an additional optional parameter with the projection to correctly calculate the scale factor when a projection is used.
  • The CreateEdgeInputMode.measureDistance method now has to return the distance in view coordinates if and only if CanvasComponent's projection is used.
  • The IRenderContext interface now has additional members that are useful with the new projections feature: projection, intermediateTransform, worldToIntermediateCoordinates, and intermediateToViewCoordinates.

Interaction

  • Zooming speed of two-finger scroll and pinching was improved for Chrome and Firefox on macOS.
  • The default position handler for edges now creates fewer additional bends when the edge is dragged while orthogonal edge editing is enabled.
  • The new factory method OrthogonalEdgeEditingContext.createOrthogonalEdgeDragHandler can be used for custom node position handler and reshape handler to keep orthogonal edges attached to a node orthogonal during the drag/reshape gesture.
  • A maximumBoundingArea can now be set on the classes ReshapeHandleProviderBase, ReshapeHandlerHandle, RectangleHandle, and ReshapeRectangleContext to restrict reshaping to stay inside the given bounds.
  • The new NodeDecorator.reshapeHandlerDecorator property simplifies using custom IReshapeHandler implementations for nodes.
  • The new ReshapeRectangleContext.ratio property specifies the width/height ratio that is kept for aspect ratio resizing.
  • The new classes NodeReshapeHandleProvider and NodeReshapeHandlerHandle are used as the default implementation for node resize handles.
  • With the new ReshapeRectangleContext.reshapePolicy property, INodeReshapeSnapResultProvider implementations can respect the node aspect ratio for according resize gestures.
  • The ReshapeHandlerHandle class has new getters for the IReshapeHandler and the HandlePositions.
  • The new NavigationInputMode.fitContent method is called after collapse, expand, enter, and exit operations if the fitContentAfterGroupActions property is enabled.
  • The NavigationInputMode class doesn't fit the content anymore after expand and collapse operations if an autoGroupNodeAlignmentPolicy other then NodeAlignmentPolicy.NONE is used.
  • An optional parameter preferredSnapType has been added to the SnapLineSnapResult constructor and the SnapResults.createSnapLineSnapResult factory method.
  • The GraphClipboard and GraphEditorInputMode class now provide the new ElementsDuplicated event that occurs when a duplicate operation finished successfully.
  • The undo and redo methods of the UndoEngine class now throw an exception with the name InvalidOperationError if the current state does not allow performing undo or redo. Previously, the name was either NotSupportedError or just Error.
  • The classes ResizeStripeInputMode, DropInputMode, and HandleInputMode now have an isDragging property indicating whether a drag currently is in progress.
  • The CompositeLabelModel class now supports label snapping.
  • The SnapResults.createResizeSnapResult method now takes a Point as delta parameter instead of a number so it is possible to create resize snap results where the orientation of the mouse delta differs from the orientation of the snapped size.
  • The properties gridSnapDistance and gridSnapType of the GraphSnapContext class have been pulled up to the SnapContext class.
  • The zoom-invariant gridSnapDistance property has been added to the CollectSnapResultsEventArgs class.
  • It is now easier to customize the GroupingNodePositionHandler class. The boolean properties adjustParentNodeLayout, moveChildNodes and reparentingEnabled have been added to control whether an ancestors' node layout should be adjusted when a node is moved, to not move the contents of a group node when a group node is moved or forbid any interactive reparenting.
  • The GraphEditorInputMode.requeryHandles method has been made public and can now be used to refresh the displayed handles if IHandleProvider implementations return different handles over time.

Layout

  • Frequently used types of the layout part have now nullability annotations.
  • The LayoutExecutor class now generates more specific port constraints with the FixPorts property enabled, resulting in better edge paths.
  • The methods IGraph.applyLayout and GraphComponent.morphLayout now support the configuration of their internal LayoutExecutor instance. Hence, options like viewport animation can be adjusted without switching to the LayoutExecutor class.
  • The EdgeRouter class now provides improved support for early exits. The routing algorithm now often reacts more sensibly to the case that the specified maximumDuration is reached.
  • If the EdgeRouter algorithm runs with highly restricted maximum time or when it gets stopped by means of an AbortHandler, it now better adheres to the minimum edge-to-edge distance.
  • The new HideGroupStage.resetEdgePaths property allows specifying whether or not the stage resets the path of edges incident to group nodes.
  • The ComponentLayout class now correctly considers node and edge labels when using the packed layout styles, e.g., ComponentArrangementStyles.PACKED_RECTANGLE or ComponentArrangementStyles.PACKED_CIRCLE. Previously, labels could overlap other elements when using these component arrangement styles.
  • The new DefaultPortAllocator.considerFixedPorts property allows specifying whether edges with strong port constraints or fixed port candidates should be considered during the port assignment. Previously, such edges were ignored which could lead to intersections with the ports of the other edges. This new feature is enabled by default.
  • The PartialLayout class now produces more stable results if it is multiple times applied to the same input graph and the subgraphPlacement property is set to SubgraphPlacement.FROM_SKETCH.
  • Constructor overloads have been added to the classes SingleItem, ItemCollection, ItemMapping, and ContextItemMapping that initialize one of their properties on construction.
  • If the mapper property of HierarchicLayoutData.edgeDirectedness is directly accessed (not explicitly set) its default for unset values is 1.0 (in other words, such edges are considered to be directed).
  • If the mapper property of OrganicLayoutData.groupNodeModes is directly accessed (not explicitly set) its default for unset values is GroupNodeMode.NORMAL. This doesn't change the result of the layout.
  • For the rootPlacements, subtreeRoutingPolicies, and subtreeAspectRatio properties of the AspectRatioTreeLayoutData class, the type of the mapped values has been made nullable. For null or unset values, the settings on the AspectRatioTreeLayout will now be taken.
  • All PortCandidate.createCandidate methods now support type conversion for the port direction.

Analysis

  • The GraphCentrality and ClosenessCentrality analysis algorithms now calculate the centrality individually per component instead of returning a centrality value of 0.0 for nodes in graphs that are not connected.
  • In a single node graph, the single node's closeness centrality and graph centrality value is now 1.0. (Previously, it was infinity.) This also affects derived values such as minimum, maximum, and normalized centrality. The backing algorithms in the Centrality class are unchanged.
  • When EdgeBetweennessClustering and FeedbackEdgeSet are executed, the specified edge weights are checked and in case they are not positive or finite, an exception is thrown.
  • The GraphStructureAnalyzer class has now methods to determine whether there are multiple edges between the same pair of nodes.

Bugfixes

  • Fixed a bug in FoldingManager where a predicate change in a FilteredGraphWrapper which serves as the master graph could trigger an exception if a child of a folder node has been hidden.
  • Undo and redo of additions and removals of bends on folding edges now correctly restores the bends at the location they had at the time of removal.
  • Fixed a bug in the GraphCopier class which caused the LabelCopied event to be dispatched twice for port labels on folder nodes.
  • Using ES6 classes together with GraphMLIOHandler.addXamlNamespaceMapping(xmlNamespace, module) no longer results in an exception when writing GraphML.
  • We now make sure that types that are structural compatible for TypeScript are actually different in the TypeScript typings. Otherwise, the overload resolution provided by the typings wouldn't reflect the actual outcome. This affected especially the EdgeDpKey and NodeDpKey classes and the IMapperRegistry.createMapper methods.
  • The methods createNodeMapper and createEdgeMapper of class YGraphAdapter are no longer interchanged. Previously, the createNodeMapper method created an IMapper for keys of type IEdge and vice versa.

View

  • The methods ICanvasObject.above and below don't unnecessarily trigger IRenderContext.ChildVisual anymore.
  • Fixed a bug that sometimes callbacks registered via the IRenderContext.setDisposeCallback method have not been called when the visual was disposed.
  • Scrolling the viewport with the mouse wheel no longer scrolls in the wrong direction if the mouse wheel is set to scroll one page at a time (instead of several lines).
  • Edges between deeper nested nodes are now displayed correctly in front of a common ancestor after that ancestor has been added or removed.
  • Fixed a bug which caused the ZOOM_TO_CURRENT_ITEM command to ignore the ViewportLimiter of the corresponding CanvasComponent.
  • The CanvasComponent.zoomTo method no longer triggers two ViewportChanged events.
  • The scrollbars of a GraphComponent are no longer missing if it was lazily initialized with the policy ScrollBarVisibility.ALWAYS.
  • Setting the CanvasComponent.useGlassPane property to true now enables a glass pane as intended.
  • The CanvasComponent.SizeChanged event now also returns the correct old size if the ErrorHandling.CatchErrors property is not enabled.
  • Fixed a bug where setting the SvgExport.encodeImagesBase64 property to true together with setting the SvgExport.inlineSvgImages property to false would encode SVG images as base64 bitmap images.
  • Fixed a bug where SVG images with data URLs as source would not be inlined when the SvgExport.inlineSvgImages property was set to true.

Styles

  • The TemplateBinding.bounds property is no longer undefined.
  • Setting the fill of an Arrow of type SHORT now works also with automatic type conversion.
  • When setting a new Font whose textDecoration property had the value NONE, this TextDecoration was not applied to the SVG text element.
  • The TextRenderSupport.addText method now also applies the properties of the given font to the text element, as stated in the documentation.

Interaction

  • Pinch-zoom no longer stops periodically during the gesture.
  • Fixed a touch interaction bug in Safari that resulted in a freeze of the CanvasComponent when lifting two fingers at once.
  • Using a custom input element for editing label text now works correctly since the GraphEditorInputMode.editLabelCore method now sets the label text to the TextEditorInputMode.editorText property instead of to its own internal text input element.
  • The NavigationInputMode.fitContentAfterGroupActions property is no longer ignored when the NavigationInputMode class is used as a child input mode of the GraphEditorInputMode class.
  • The NavigationInputMode class now also updates the CanvasComponent.contentRect property when it is not used as a child input mode of the GraphEditorInputMode class.
  • The SnapContext.gridSnapDistance and SnapContext.snapDistance properties are no longer incorrectly interpreted in world coordinates when calculating snapResults.
  • Orthogonal edge editing does not add bends anymore to edges that are marked as not orthogonal.
  • The paste and duplicate operations now honor the GraphEditorInputMode.shouldSelect predicate.
  • Fixed a bug which could cause an input mode to be left in an undefined state if another input mode has been activated in an event handler of the first input mode. This usually resulted in the wrong cursor being displayed.
  • The property name reported by the UndoEngine.PropertyChanged event is now always equal to the name of the corresponding property. Previously, some of the reported names started with an uppercase letter.
  • Under rare circumstances, tooltip elements were not removed from the DOM after their leave animation ended. There is now a configurable maximum duration for such animations after which the tooltip is removed in any case. The default value is 5 seconds.

Layout

  • The HierarchicLayout class no longer throws an exception that was previously triggered in some cases with bus structures and in conjunction with layering constraints.
  • The HierarchicLayout class no longer throws an exception that was previously triggered in some cases with bus structures and in conjunction with undirected edges.
  • Fixed a bug in the HierarchicLayout class that could cause unnecessary (double) edge crossings when the algorithm was executed in incremental layout mode with edge grouping and alternative group bounds.
  • The NodePlacerBase.placeSubtree method now clears its internal caches, especially the graph cached in field NodePlacerBase.graph. Previously, holding onto a node placer instance could lead to subtle memory leaks.
  • The EdgeRouter class no longer produces unnecessary overlaps for cases where the source or target node is overlapped by (several) label elements. This generally improves the ability of the router to deal with input that contains source/target nodes that are overlapped by other elements and are required to be crossed by an edge route.
  • The EdgeRouter class now correctly observes inputs where the user specifies buses with both fixed and non-fixed edges at the same time.
  • The EdgeRouter class no longer throws an exception when points specified with the EdgeLayoutDescriptor.intermediateRoutingPoints property are too close together.
  • The EdgeRouter class no longer yields edge labels that overlap with unrelated group nodes when using the integrated label placement feature.
  • Resolved a bug in the EdgeRouter class which caused that grouped edges were sometimes actually not grouped together. This mainly appeared in conjunction with a large value of either the minimum first or last segment length.
  • The EdgeRouter class no longer produces an exception for some rare cases with fixed grouped edges and octilinear paths.
  • The OrganicLayout class no longer throws an exception when having a PartitionGrid and at the same time the scope set to SUBSET or MAINLY_SUBSET where all nodes of the graph are marked as affected (could have used scope ALL instead).
  • The EdgeRouter class now properly considers ports provided by a PortCandidateSet when the set contains multiple candidates with single capacities and where the candidates are on the same node side. Previously, it could happen that only one of several edges connecting to the node correctly considered the ports.
  • The EdgeRouter class does no longer use the same fixed PortCandidate out of a specified PortCandidateSet if another non-saturated candidate can be chosen. Thus, overlapping edge segments are avoided.
  • The OrthogonalSegmentDistributionStage no longer produces degenerated (very large or small) coordinates for edges that contain zero-length segments, that is, duplicate edge path points.
  • The ChannelEdgeRouter class no longer yields degenerated routing results (very large or small coordinates) when using the OrthogonalPatternEdgeRouter as path finder strategy and setting its minimum distance to zero. The OrthogonalPatternEdgeRouter class now avoids duplicate points when the minimumDistance property is set to zero.
  • The AspectRatioTreeLayout class no longer crashes, causing a stack overflow, when applied to a large chain graph.
  • The RecursiveGroupLayout class now correctly moves child nodes along with their group also in case the RecursiveGroupLayout.coreLayout is null. Previously, if additionally a group node had a specific layout algorithm associated with it, the content was not correctly moved along. If the core layout was not null, the issue did not occur.
  • The EdgeRouter class now considers the correct shape of non-affected, fixed edges. Previously, it sometimes incorrectly parsed their shape which could lead to undesired effects like incorrect path cost calculation of affected edges.
  • The BalloonLayout class no longer crashes due to a stack overflow for inputs containing very long chain graphs.
  • Fixed a bug in the HierarchicLayout class that in some cases caused a violation of the minimum first or last segment length. The bug was only triggered when the minimum length values were relatively large.
  • The TreeMapLayout class no longer produces results that may have infinite coordinates.

Analysis

  • The HierarchicalClustering class no longer throws an exception when applied to an empty graph.
  • The results of the Chains class are now correct for undirected cycles, too. If such cycles are not connected to other parts of the graph, the nodes collection of a resulting Path could have been in an incorrect order.
  • The ClosenessCentrality class no longer calculates NaN as results of the normalizedNodeCentrality property if the graph consists of one single node. Instead, the value of the normalizedNodeCentrality property is now positive infinity.
  • The ClosenessCentrality.run method no longer throws an exception for unconnected graphs. Instead, all values of the nodeCentrality and normalizedNodeCentrality properties will be 0.0 as the documentation states.
  • The EdgeBetweennessClustering.run method no longer throws an exception with its default setting for the maximumClusterCount property.

Incompatible Changes

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

Incompatible API Changes

  • The GraphBuilder, TreeBuilder, and AdjacentNodesGraphBuilder classes have been replaced in the library with more powerful but incompatible builder classes. Drop-in replacement classes that resemble the API of the previous builders, named SimpleGraphBuilder, SimpleTreeBuilder, and SimpleAdjacentNodesGraphBuilder, are available as demo code in the demos-js/utils directory. See the migration guide for details.
  • The KMeansClusteringDistanceMetric enum was removed in favor of the DistanceMetric enum with the same members.
  • The ToolTip class has now a constructor without parameters to make custom implementations easier.
  • To make overriding easier, the overloaded method IPathGeometry.getTangent that has a segment index and a ratio as parameter was renamed to getTangentForSegment. The corresponding methods of EdgeStyleBase and GeneralPath were renamed as well.
  • To make overriding easier, the overloaded methods GraphModelManager.getCanvasObjectGroup now have distinguishable names, namely getNodeCanvasObjectGroup, getEdgeCanvasObjectGroup, etc.
  • To support right-to-left text direction, a new optional rightToLeft parameter with default value false was added to the methods DefaultLabelStyleRenderer.addTextElements and TextRenderSupport.addText.
  • The DefaultLabelStyleRenderer.addTextElements method now consumes an SVGElement as first parameter. For the default left-to-right text direction, this is an SVGTextElement like before. For the newly supported right-to-left text direction, this is an SVGGElement.
  • The NodeReshapeSnapResultProvider.getSnapLines method now takes CollectSnapResultsEventArgs as additional parameter.
  • Several methods related to snapping now take a Point instead of a number as delta parameter. In detail, these are SnapResults.createResizeSnapResult, NodeReshapeSnapResultProvider.addSnaplineSnapResult, NodeReshapeSnapResultProvider.addGridLineSnapResult, and NodeReshapeSnapResultProvider.addSameSizeSnapResult.
  • The HierarchicalClusteringResult.dendrogramRoot property can now return null if the result has been obtained from an empty graph.
  • The optional IPortLocationModelParameter and IPortStyle parameters of the IGraph.addPort method can now be null.
  • The ModelManager.unInstall method has been renamed to the canonical name uninstall.
  • The singleton returned by the static DefaultEdgePathCropper.INSTANCE property has been moved to the IEdgePathCropper.INSTANCE property. This singleton doesn't implement DefaultEdgePathCropper and similar singletons are defined on their corresponding interface, too.
  • The method CanvasComponent.createInputModeContext is protected again, after having been made public accidentally previously.
  • The GraphEditorInputMode.requeryHandles method is now public.
  • The static methods createDelegate and dynamicInvoke of delegate have been removed. They were never intended to be part of the public API and didn't work as intended in all cases.
  • The methods getPreferredSize and getPreferredSizeCore of (String)TemplateNodeStyle, (String)TemplatePortStyle, and the corresponding renderer implementations have been removed since they were never used by the library and returned no meaningful value.
  • The methods createNodeMapper and createEdgeMapper of YGraphAdapter are no longer interchanged. Previously, createNodeMapper created an IMapper for keys of type IEdge and vice versa.
  • Some methods of the YList class have been replaced to be consistent with the new methods of IList and the corresponding methods of JavaScript arrays. Note that YList is a special-purpose list implementation that is typically only used when implementing a layout customization. In detail, pop has been renamed to shift, popLast has been renamed to pop, and push has been changed to be in line with IList.push: it now returns the length of the list instead of a ListCell.

Changes in Default Behavior

  • The GraphOverviewComponent is now rendered with HTML Canvas instead of SVG by default. This results in better performance and was always the intended behavior. You can switch to SVG rendering with the GraphOverviewComponent.renderMode property.
  • The NavigationInputMode.adjustContentRect method doesn't fit the graph bounds in the viewport anymore.
  • The NavigationInputMode class doesn't fit the content after expand and collapse operations anymore. This behavior can be restored by setting the autoGroupNodeAlignmentPolicy property to a value other than NONE and the fitContentAfterGroupActions property to true.
  • The NavigationInputMode.fitContentAfterGroupActions property now is false by default.
  • The ViewportLimiter no longer jumps to the limited viewports if the current viewport is outside the limited area. This behavior can be restored by setting the ViewportLimiter.limitingPolicy property to LimitingPolicy.STRICT.
  • The default value of the MoveViewportInputMode.pinchZoomThreshold property has been changed from 100 to 50 to prevent pinch gestures from stopping periodically.
  • All string template styles now strip executable code from the templates to prevent attacks via GraphML. To re-enable code injection set the new static property trusted on the classes StringTemplateNodeStyle, StringTemplateStripeStyle, StringTemplateLabelStyle, or StringTemplatePortStyle to true.
  • The GraphCentrality and ClosenessCentrality analysis algorithms now calculate the centrality individually per component instead of returning a centrality value of 0.0 for nodes in graphs that are not connected.
  • HierarchicLayoutData.edgeDirectedness property: If its mapper property is directly accessed (and not explicitly set), its default for unset values is now 1.0 instead of 0.0. This means that such edges are now treated as directed instead of undirected.
  • For the rootPlacements, subtreeRoutingPolicies, and subtreeAspectRatio properties of the AspectRatioTreeLayoutData class, the type of the mapped values has been made nullable. For null or unset values, the settings on the AspectRatioTreeLayout will now be taken. This is the documented behavior, though.
  • The value of the read-only property EdgeRouter.partition is now null after applying the routing algorithm. It is only intended to be used during the execution. Previously, it was cached, even though the documentation stated otherwise.

Changes When using a Projection

  • The view coordinate system now includes the projection. For customers who do not use a projection, nothing will change. However, when the (old) view coordinate system has been used to render parts of the visualization in a zoom-invariant manner, the equivalent now is called the intermediate coordinate system. The view coordinate system is still necessary when coordinates relative to the control are needed, e.g. for tooltips or a context menu.
  • When using the new projections feature, the CanvasComponent.contentRect property no longer has an effect on scrollbars or the GraphComponent.fitGraphBounds method.
  • SvgExport.viewWidth and SvgExport.vViewHeight are no longer used for the exported image dimensions when using a projection. If you need to know the size of the resulting image, this can be obtained from the image after export.
  • Visuals that are rendered in view coordinates relative to the viewport may appear in a different location when exporting an image.
  • CanvasComponent ignores its ViewportLimiter when projections are used.

Deprecations

  • The LabelStyleBase.createLayoutTransform method has a new overload with the render context as the first parameter to take non-identity projections of the corresponding CanvasComponent into consideration. Without this context, this method cannot respect a projection and, consequently, the overload with the previous signature is now deprecated.
  • The properties EdgeRouter.polylineRouting, EdgeRouter.preferredPolylineSegmentLength and EdgeRouter.maximumPolylineSegmentRatio are now deprecated. To enable polyline routing, specify EdgeRoutingStyle.octilinear as routing style via EdgeLayoutDescriptor.routingStyle. The other two properties are also replaced by respective properties on the EdgeLayoutDescriptor class.

Demo Changes

  • Our simple RequireJS demo implementation is no longer part of the package. The demos now use module loading instead, and we always recommended to use the official RequireJS implementation.

yFiles for HTML 2.2.0.3 - Changes Since 2.2.0.2

This is the third bugfix release for yFiles for HTML 2.2. In addition to the usual error corrections , there are small improvements for the library and the demos.

There are no incompatible API changes in this release.

Bugfixes

  • Corrected OverviewComponent's repainting behavior when the device pixel ratio is not 1.0.
  • The FilteredGraphWrapper class no longer throws an error when the parent of a node which is not visible in the filtered graph has been changed in the wrapped graph.
  • The FoldingManager.getFoldingEdgeState method now throws an error with a meaningful message instead of a cryptic error if both end nodes of the given edge are expanded.

    Invoking the FoldingManager.hasFoldingEdgeState method now returns false instead of throwing a cryptic error if both end nodes of the given edge are expanded.

  • The value of the ILabelCandidateDescriptor.profit property now is considered properly by the labeling algorithms.
  • The DefaultLabelStyleRenderer.updateVisual method no longer ignores overridden style property accessors when deciding whether to update its visual or to create a new one.
  • The documentation of the return values of the Enum.getValueNames and Enum.getValues methods are now more exact. The getValueNames method returns an array of strings and the Enum.getValues method returns an array of integers.
  • Fixed a bug in the TableLayoutConfigurator class which in rare cases could cause exceptions in additional layout stages.
  • The EdgeRouter class now considers the correct shape of non-affected, fixed edges. Previously, it sometimes incorrectly parsed their shape which could lead to undesired effects like incorrect path cost calculation of affected edges.
  • The BalloonLayout class now longer crashes due to a stack overflow for inputs containing very long chain graphs.
  • The HierarchicLayout class no longer throws an error that was previously triggered for some inputs with bus structures and undirected edges.
  • The BorderLine and SimpleNodePlacer classes can now be instantiated.
  • The constants LabelLayoutKeys.EDGE_LABEL_LAYOUT_DP_KEY and LabelLayoutKeys.NODE_LABEL_LAYOUT_DP_KEY now specify correctly that their generic type parameter is LabelLayoutData[] and not just LabelLayoutData.

Improvements

  • If the required yFiles style sheet yfiles.css has a different version than the JavaScript files of the library, the console of the browser's developer tools now shows a corresponding warning.
  • Safari on iOS fires bogus mouse events when both fingers of a pinch gesture are lifted simultaneously. Since these events could result in an unresponsive graph component, we now include a workaround for this problem.
  • In the UMD variant of the library, if an HTML element with id="yfiles" existed in the DOM, that element was used in rare cases instead of the yfiles top-level namespace object, resulting in a cryptic error. There is now a proper check for this problem, and an instructive error message.
  • The package now contains a tool that converts the es-modules variant of the library to the CommonJS format for use in Node.js applications.

Noteworthy Demo Improvement

  • BPMN Demo: The node styles have now a property for the fill color and there are various other small improvements.

yFiles for HTML 2.2.0.2 - Changes Since 2.2.0.1

This is the second bugfix release for yFiles for HTML 2.2. Besides the usual error corrections for the library, there are small improvements like meaningful error messages for some common programming errors. Moreover, we created several new demos and improved existing demos, added new sections to the Developer's Guide, and improved the documentation viewer.

There are no incompatible API changes in this release, but we document two incompatible changes from previous releases that were un-documented so far.

The GWT overlay was made available for yFiles for HTML 2.2 some weeks ago and will be updated for this and all future bugfix releases of yFiles for HTML 2.2. The yFiles for HTML Optimizer was updated, too. We added the new shouldOptimize setting and fixed a problem that resulted in broken overloads.

Bugfixes

General

  • The TypeScript typings no longer prevent the bitwise combination of certain enums in TypeScript.
  • Removed the false requirement for implementing getTangent in the typings for PolylineEdgeStyleRenderer when using TypeScript.

Graph and Collections

  • The FilteredGraphWrapper class now correctly handles port labels of filtered items.
  • The EdgePathLabelModel class no longer returns an invalid geometry for parameters with a ratio < 0 and zero-length edge segments.
  • Labels at folder nodes and their adjacent edges are no longer lost during GraphML deserialization if the DefaultFolderNodeConverter.copyFirstLabel property is enabled.
  • Fixed unexpected behavior of the GeneralPath.flatten method if a curve follows after a close operation.
  • The GeneralPath.prepend method no longer loses a part of the combined path in certain circumstances.
  • Mapper.removeValue's parameter is now correctly marked as nullable.

View

  • The SvgExport.exportSvgString method no longer inserts duplicate xlink:href attributes in Safari on macOS.
  • The SvgExport class now takes even more care to handle xlink:href attributes in all browsers correctly. This was broken because of recent changes in Google Chrome.
  • When exporting to SVG, inlined SVG images without viewBox attribute now get a reasonable default value to avoid rendering issues. This behavior can be customized with the new protected method SvgExport.fixViewBoxAttribute.
  • Text measurement for text wrapping settings unequal to TextWrapping.NONE is now much faster since we omit a lot of unneeded iterations.
  • The TextRenderSupport's methods now correctly respect the font parameter when using SVG as text measuring policy.
  • Moving WebGL handles out of the viewport no longer breaks the WebGL visualization nor the handles.
  • Fixed a memory leak when using handles rendered with WebGL.
  • Removed some performance bottlenecks of the WebGL styles.
  • Whether the current browser supports SizeChangedDetectionMode.SENSOR is now only checked once. This avoids unwanted side-effects in certain browsers like flickering toolbars.
  • The native browser scrollbar in WebKit-based browsers no longer appears in rare cases.

Interaction

  • The default key binding for the toggle group expansion state command works now. (It's CTRL+Multiply.)
  • Changing the value of the GraphEditorInputMode.showHandleItems property while handles are displayed no longer results in duplicate handles.
  • Fixed an issue where NavigationInputMode's autoGroupNodeAlignmentPolicy would sometimes not work when the expanded and collapsed group node sizes differ.
  • The CreateEdgeInputMode.getPortOwner method no longer returns edges even if the allowEdgeToEdgeCreation property is set to false. This could have resulted in the edge's IPortCandidateProvider being queried for candidates erroneously.
  • The PortRelocationHandleProvider class no longer ignores the values of its showPortCandidates and showTargetHighlight properties.
  • The HandleInputMode class now clears its affectedItems property after the canceled event has been raised. Previously, it was cleared before.
  • The promise returned by the GraphEditorInputMode.addLabel method now fulfills at the correct time. Previously, immediate subsequent calls to this method failed despite waiting for the promise to resolve.

Layout

  • The HierarchicLayout class now produces better results for input graphs with grouped edges and a PartitionGrid. Previously, such inputs may have produced edge routes with superfluous bends.
  • The HierarchicLayout class now correctly considers the properties maximumNodesAfterBus and maximumNodesBeforeBus of the BusDescriptor for single line (layer) buses. In addition, for multiple layer buses, the specified minimum node to edge distance is now considered for the distance between nodes and the vertical bus segment.
  • The HierarchicLayout class no longer throws an exception if the component arrangement policy is set to ComponentArrangementPolicy.COMPACT and bus routing is enabled.
  • The PortPlacementStage class no longer destroys the grouping information for the core layout algorithm.
  • The OrganicLayout class now correctly considers input graphs where substructure handling is enabled and all nodes are located at coordinate (0,0). Previously, such inputs may have triggered an exception.
  • The OrganicLayout class now correctly removes node overlaps if its scope is set to Scope.MAINLY_SUBSET and its nodeOverlapsAllowed property is disabled. Previously, the layout sometimes produced superfluous overlaps for such cases.
  • The TreeMapLayout class no longer produces results that may have infinite coordinates.
  • The EdgeRouter class no longer produces bad, non-orthogonal edge segments in cases where a selected edge is grouped together with a un-selected edge and where both edges have strong PortConstraints at their common source/target node.
  • The EdgeRouter class now correctly considers strong port constraints of edges that belong to a bus structure.
  • The EdgeRouter class no longer throws an exception if all fixed edges of a bus are non-orthogonal or non-octilinear.
  • The PartialLayout class no longer throws an exception if nothing from the organic layout module is imported.
  • The PartialLayout class no longer throws an exception for some input graphs with group nodes.
  • The GenericLabeling class no longer throws an exception for some input graphs containing labeled edges with zero length.
  • The SingleItem class now correctly resets its delegate and source properties when setting another property.

Incompatible Changes in Previous Releases

  • The Class.injectInferfaces method was removed. It was a leftover from before version 2.0 and never worked since 2.0.
  • The TypeScript typings don't contain definitions that allow quick interface implementations anymore. This change actually happened with version 2.2 but was undocumented until now. Note that this affects only the typings, quick interface implementations are still supported by the library.

Improvements

  • yFiles for HTML now uses the following proper policy for updating the version of the yFiles npm module. The first two digits of the yFiles version are combined into the first digit of the npm module version and the other two digits are kept. For example, this release 2.2.0.2 has the npm module version 22.0.2. This complies with Semantic Versioning.
  • The documentation of the YGraphAdapter.createNodeMapper and createEdgeMapper methods now warns that their method names are interchanged. To maintain compatibility, we will fix this not before the next major release.
  • The documentation of the EdgePathLabelModel, EdgeSegmentLabelModel, and FreeLabelModel classes now contains the previously missing methods findBestParameter and getParameters.
  • If the required style sheet yfiles.css is not loaded, a warning is now logged to the console of the browser's developer tools.
  • The SvgExport class now throws a descriptive exception if exporting fails because of a very large (WebGL) canvas.
  • The GraphBuilder class now throws a descriptive exception if creating a graph item fails because the graph belongs to a folding view.
  • In the TypeScript typings, the CONVERTER store of all template styles is now typed any for improved usability.
  • The yfiles module now exports the resources object which provides defaults for command names and shortcut keys. In addition, the typings now properly define this object and all of its members.

New Demos

Automated Testing Demos
The new WebdriverIO Demo and the new Jest Puppeteer Demo show integration tests for a yFiles for HTML application in multiple browsers using WebdriverIO and in Chrome Headless using Jest and Puppeteer, respectively.
React and React TypeScript Demos
A remodeled React Demo replaces the previous one. The new demo is based on create-react-app and is truly reactive: the diagram automatically reacts to every change of the underlying data. In addition, there is new similar demo for React and TypeScript.
Vue-CLI demo
This demo shows how to integrate yFiles as a npm dependency in a Vue-CLI setup.
EdgeRouter Grouping Demo
This demo shows the edge grouping and port grouping features of the edge routing.
Hierarchic Bus Structures Demo
This demo shows how bus structures in the hierarchic layout can result in much more compact arrangements.
Custom Edge Creation Demo
This demo shows how to provide directional ports and demonstrates interactive edge routing and several customizations for the edge creation gesture.
Zoom-invariant Label Style Demo
This demo shows a label style that is independent of the zoom level.
GraphQL demo
This demo shows how to load data from a GraphQL endpoint and create a diagram for it.
Electron demo
This demo shows how to integrate yFiles for HTML in a desktop application with Electron.
Dojo 2 Demo
This demo shows how to integrate yFiles in a Dojo 2 application that was setup with the Dojo 2 CLI.
Graph Decorator Demo
The previous "Custom Ports" step of the Getting Started Tutorial was remodeled into this new demo that focuses on its actual purpose, namely, to show how to use the graph decoration pattern.

Noteworthy Demo Improvements

  • On macOS, clicking context menu entries had no effect because of a timing problem. The demo context menu now uses a larger delay.
  • The demos that use yFiles as npm module now create a npm package of the library instead of directly referencing the local files since the latter caused issues with webpack.
  • Corrected the GraphML serialization of the Vue.js template node style VuejsNodeStyle. In addition, this style has a new lineSpacing property to control the line height of wrapped text.
  • The PDF Export Demo uses updated versions of the svg2pdf and jsPDF libraries that fix an issue with custom fonts on Internet Explorer 11.
  • The Image Export Demo and PDF Export Demo now use Headless Chrome/Puppeteer instead of PhantomJS for server-side image and PDF creation, respectively.
  • In the Label Handle Provider Demo, the resize handles now act consistently on rotated and non-rotated labels.
  • The Move Unselected Nodes Demo has a new option to start edge creation at distinct port candidates. This allows the gestures for moving of unselected nodes and for edge creation without to co-exist without using a modifier key.
  • The Drag and Drop Demo now shows drag and drop of edges, too.
  • The Grid Snapping Demo has a new user interface to make exploring the various configuration options more intuitive.
  • In the Large Graphs Demo, the "Move Only Mode" has improved performance.
  • The Tree Layout Demo now has sample graphs for different use cases and provides reusable configurations for each one.
  • The Neo4j Demo now supports creating a graph from arbitrary cypher queries.
  • The FileSaveSupport class now writes images as binary content.

Documentation Improvements

  • Most of the stand-alone documentation pages that were previously included in the yFiles package are now part of the documentation viewer. Namely, this includes the pages about migration, known issues, requirements, and the various tools. The main benefit is that this information can now be found with the search of the documentation viewer.
  • The search of the documentation browser now allows you to find related demos and to even search in the source code of the demos.
  • Added new sections to the Developer's Guide about deploying yFiles with specific toolkits (e.g. webpack, Angular, etc.), the Vue.js template node style VuejsNodeStyle, and best practices for developing with the yFiles npm module.
  • The migration notes are now part of the documentation viewer to improve discoverability. The corresponding tools are now covered in more detail and there is a new separate section for the migration from the UMD to the ES modules variant of yFiles for HTML.

yFiles for HTML 2.2.0.1 - Changes Since 2.2

This is the first bugfix release for yFiles for HTML 2.2. It corrects several problems in the TypeScript definition files and two other minor errors. There are no incompatible changes.
Note that the bugfixes of yFiles for HTML 2.1.0.7 are part of this release, too.

Bugfixes

  • The TypeScript definition files now pass the compiler's strict checks.
  • The UMD variants of the TypeScript definition files no longer contain erroneous usages of the this type.
  • The constructor of the SolidColorFill class now converts floating-point values to integers. This prevents incorrect values in exported GraphML files.
  • There was a regression in mouse click fuzziness detection. As a result, mouse double clicks were sometimes not properly detected in Chrome on Windows and other browsers that fire superfluous mouse move events.

yFiles for HTML 2.2 - Changes Since 2.1.0.6

Major New Features

npm package of the library
The yFiles library now comes as a local npm package. This makes it much easier to include yFiles in projects with third-party tools and frameworks like webpack and Angular. In addition to the library, the npm module installs the typings that come with yFiles. Thus, code completion and documentation lookup work in JavaScript IDEs like JetBrains WebStorm and Visual Studio Code without further configuration.

Since the format for the documentation is slightly different for WebStorm and VS Code, a tool is included that tailors the typings for your preferred IDE.

Improved coding assistance and 1000 new code snippets

The typings that provide code completion for JavaScript IDEs like JetBrains WebStorm and Visual Studio Code have been reworked to be more precise and extensive. For example, they now contain the static members of interfaces, support type conversion, and specify whether properties, parameters, and return values can be null or not and whether they must be an object or can be of any type. Of course, TypeScript projects benefit from these improvements, too.

In addition, the documentation viewer has more than 1000 new code snippets and shows the new information, too.

CSS styling for handles etc.
All visualizations of handles and indicators for interactive editing have now CSS classes to allow styling with CSS rules. This includes the selection, focus, and highlight templates, resize and move handles, snap lines and grids, the visualization of port candidates, marquee and lasso selection, and the viewport rectangle in the overview. The documentation and the Developer's Guide contain extensive lists of all available classes.

In addition, the edit label input box and the tooltips now have dedicated CSS classes during entering and leaving of the DOM. Also, a subtle fade animation was added to these elements that is enabled by default.

The new CSS Styling Demo shows this new styling feature.

WebGL and HTML Canvas rendering

WebGL and HTML Canvas rendering are now supported for the visualization of handles and grids, and for the overview component. These rendering techniques provide significant performance improvements especially for large graphs. The rendering technique is specified by the new property renderMode of HandleInputMode, GridVisualCreator, and GraphOverviewComponent, respectively.

Note that WebGL and HTML Canvas rendering for the visualization of graph items like nodes and edges is already supported.

Bus-like placement in hierarchic layouts
The HierarchicLayout class is now able to arrange children of a specified root node in a bus-like way. This results in a very compact and uniform arrangement if a node has many successors. The bus sub-structures are defined by the HierarchicLayoutData.buses property, and the new BusDescriptor class provides more individual settings for the buses.
Label placement, bus routing, and port grouping for EdgeRouter

The EdgeRouter class now features integrated edge label placement. Labels are automatically placed when the new property integratedEdgeLabeling is enabled. The placement considers the optional PreferredPlacementDescriptor of a label.

Also, it now supports port grouping of edges at their source and target and orthogonal bus routing. To specify the port group IDs or the bus affiliation, use the associated properties in the PolylineEdgeRouterData class.

Analysis wrapper

The powerful analysis algorithms got a new API that is based on the IGraph interface and streamlines working with the results. In particular, it makes working with a special analysis graph class obsolete. The algorithms that are available with the new API include centrality measures, clustering, flow calculation, rank assignment, spanning tree, shortest path, and more.

This is accompanied by the new GraphStructureAnalyzer class that provides methods to check structural properties of a given graph.

The new Analysis Algorithms Step of the Getting Started Tutorial shows how to run an algorithm. The existing Graph Analysis Demo allows you to interactively explore all the algorithms.

Demos use ES module imports

Using ES modules makes it easier to re-use demo code in your own project since many third-party frameworks and tools work with ES modules, too, most notably webpack and Angular. In addition, the source code is now more concise due to the absence of fully-qualified names and can be better analyzed by IDEs for code completion and documentation lookup.

In addition, we provide several tools that help existing customers in either migrating to ES modules or converting new demo code with ES modules syntax back to the previous require.js and UMD usages.

New and improved demos

This release contains the following new demos:

  • Metaball Groups Demo: Shows how to render metaball-like background visualizations where nodes can be associated to zero or more groups.
  • Web Worker Demo: There are now two versions of this demo, one with UMD loading and one with import statements.
  • d3 Node Style Demo: Presents a node style that visualizes dynamic data with d3.js.
  • Family Tree Demo: Show the automatic layout for genealogical graphs.
  • Simple Partition Grid Demo: Shows how to manually create a PartitionGrid for the automatic layout.
  • Overview Styles Demo: Shows several different rendering techniques and styles for the overview.

The Application Features Tutorial has the following new demos which concentrate on a single feature and make it particularly easy to re-use their code:

The new Layout Data Step of the Getting Started Tutorial shows how to configure individual settings for each node for the automatic layout.

In addition, we refactored several of the demos to make it easier to re-use their yFiles-specific code. These demos include, amongst others, Organization Chart Demo, Hierarchic Grouping Demo, and Sankey Demo.

New Features

General

  • The new yFiles for HTML Optimizer replaces the previous deployment tool. It is available as npm package. The optimizer can be seamlessly integrated into JavaScript deployment setups as a webpack plugin or using its JavaScript API.
  • Many types now support parameter objects in their constructors and we added several new type conversions for frequently used types like the ones used in LayoutData. This allows you to write more concise code.

View

  • The DefaultLabelStyle class got some new features:
    • Support for insets that specify a distance between the label border and the label content.
    • New properties for minimum and maximum size to restrict the size of the label.
    • The ability to quantify the preferred size to avoid unnecessary floating point precision when saving.
    • New static properties to enlarge the preferred size which can be useful when converting graphs between different platforms.
  • The CreateEdgeInputMode class can now create edges in reversed direction, i.e., starting from the target port.
    • The new EdgeDirectionPolicy supports starting creation at the source, at the target, in the last direction, or depending on the port candidate.
    • A configurable ToggleDirectionRecognizer allows changing the edge direction during creation.
  • The new property MoveLabelInputMode.allowUnselected enables moving labels without having to select them first.
  • The MoveInputMode and the CreateEdgeInputMode classes now use Promises in doStartDrag and doStartEdgeCreation. These Promises return either the affected/new items or null if the gesture was canceled.
  • The GraphModelManager class has the new methods raise, lower, toFront and toBack that allow changing the z-order of IModelItems. All new z-order-related methods can also be triggered by the new commands RAISE, LOWER, TO_FRONT and TO_BACK.

    In addition, the GraphEditorInputMode class provides the new methods RaiseSelection, LowerSelection, SelectionToFront and SelectionToBack that change the z-order of all selected IModelItems.

  • The new PortStyleDecorationInstaller class allows the use of an IPortStyle to render the selection, highlight, or focus indicator of ports.

Layout

  • The HierarchicLayout class is now able to uniformly distribute ports at group nodes - with a few restrictions. The new property HierarchicLayoutData.uniformPortAssignmentGroups. defines the groups for which the feature should be enabled.
  • The HierarchicLayout class is now able to consider individual crossing costs for edges and for crossing a group node border. These can be defined with the HierarchicLayoutData.edgeCrossingCosts and the HierarchicLayoutData.groupBorderCrossingCosts properties.

    In addition, the new callback method DefaultLayerSequencer.getCrossingCost allows to define an individual crossing cost value for a specific pair of edges when using this sequencer for the HierarchicLayout. In order to easily retrieve the original edge instance when customizing the hierarchic layout, the HierarchicLayout.getOriginalEdge method was added.

  • The LeftRightNodePlacer class now supports layouts with multiple branches. With this feature, subtrees can not only be placed left/right of a single vertical bus, but left/right of multiple vertical buses (the branches). The new property BranchCount allows to configure the number of branches.
  • The tree node placer GridNodePlacer offers the following new features:
    • The placement of the bus for routes to its children can now be configured using the new enumeration BusPlacement. Available placements are LEADING, TRAILING and CENTER.
    • Child sub-trees can be assigned to rows automatically using the new property GridNodePlacer.automaticRowAssignment.
    • The new alignment policy GridNodePlacer.BUS_ALIGNED aligns the root node with the bus.
  • The OrganicLayout class is now able to consider user-specified inertia and stress values for nodes.
  • The OrthogonalLayout class is now able to consider custom crossing and bend costs for edges. They can be specified using the new properties OrthogonalLayoutData.edgeCrossingCosts and OrthogonalLayoutData.edgeBendCosts respectively.
  • The new InteractiveOrganicLayout.compactnessFactor property specifies the compactness of the result. If the graph contains several components, this feature can prevent that the components drift apart.
  • The new GivenCoordinatesStage class changes node locations and edge paths to user-specified values before invoking the core layout algorithm. To specify locations and paths, use the new GivenCoordinatesStageData class.
  • The new GenericPartitionGridSupportStage class offers generic support for partition grid structures.
  • The OrganicLayout class is now able to produce 3D layout results.
  • The new ChannelRoutingTool class brings back the features of the ChannelRouter class that was removed in version 2.0.

Improvements

General

  • We identified and changed the (valid) code in the library that was previously broken by certain build optimizers, e.g., the production build of Angular CLI (ng build --prod). Thus, you no longer need to disable it or work around this issue.
  • Incorrect usage of $class before calling lang.util.fixType() on ES6 classes will now throw a TypeInfoError with typeinfo enabled.
  • The new function yFiles.help(object) provides information about the given instance if it is a yFiles class, namely the class name, the implemented interfaces, and the base class.
  • The constructors of most types now support parameter objects, e.g. the GraphBuilder class, label models, layout algorithms, and layout helper classes.
  • Improved performance with the webcomponents polyfill by working around its performance bottlenecks.

Graph and Collections

  • The properties rows and columns of class PartitionGrid are now of type IEnumerable<RowDescriptor> and IEnumerable<ColumnDescriptor> instead of an un-typed YList.
  • Point, Size, Rect, Insets, and IEnumerable now have a static from function that converts objects that are similar in shape to the corresponding type.
  • Each of the methods concat, filter, map, selectMany, takeWhile, and reversed of IEnumerable now return a dynamic enumerable, i.e., if the original enumerable changes the returned enumerable changes, too. Previously, the enumerables returned by map, takeWhile, and reversed were a copy of the state of the original enumerable at the time of invocation.
  • In addition, the IEnumerable interface now provides lazily evaluated prepend, append, flatMap, from, ofRange, ofRepeat, take, reduceRight, skip, skipWhile, groupBy, orderBy, orderByDescending, and distinct methods, similar to what other platforms offer.
  • The List class now supports the methods push, pop, slice, splice, shift, unshift, and fill as known from plain JavaScript Arrays.

View

  • The type conversion for Color now supports the CSS4 syntax.
  • Adding and removing visualizations from the GraphComponent is now much faster in Chrome when there are more than 12000 elements.
  • If the content of a tooltip changes while it's visible, the new method ToolTip.updateLocation can be called to trigger an update of the location to reflect the changed size.
  • The default CSS rule for the tooltip now sets a large value for the z-index. To override it, set a different value to the yfiles-tooltip class.
  • The TextRenderSupport.measureText method now returns the result as Size. Previously, it returned a Rect.
  • The constructors of CanvasComponent, GraphComponent, and GraphOverviewComponent now throw an error if the specified <div> element is already in use by another component.
  • The CanvasComponent class no longer prevents external drag and drop handling by calling stopPropagation and preventDefault on all drop events. Instead, such an event is now handled by a corresponding (drop) input mode if such an input mode is enabled and responsible for the event's data type.
  • The new property SvgDefsManager.cleanUpDuration sets a soft limit for the runtime of the SvgDefsManager.cleanUpDefs method.
  • A component with zero size now updates its internal size automatically if its container <div> element gets a non-zero size. This can happen for example if the <div> element is not part of the DOM during initialization.
  • GraphOverviewComponent no longer draws nodes and edges that are hidden via VoidNodeStyle and VoidEdgeStyle.
  • NodeStylePortStyleAdapter and PortControlPortStyle now have an offset property that allows to shift the port visualization so that it no longer is centered over the port.
  • The GraphModelManager class has new factory methods for creating the ItemModelManager of each item group.
  • DefaultEdgePathCropper's methods cropEdgePath and cropEdgePathAtArrow have been made virtual.
  • The GraphModelManager.getModelItem method now always returns the IModelItem for an ICanvasObject retrieved for it via getMainCanvasObject. Previously this only worked in all cases for the ICanvasObject retrieved via getCanvasObject.
  • Added the GraphClipboard.getId method to facilitate retrieving the original item from which an item to be pasted has been copied from.
  • The new property GraphClipboard.clipboardContext provides access to the current IGraphClipboardContext during a clipboard operation.
  • The GraphMLIOHandler class now supports reading and writing arbitrary objects at graph level.
  • The properties RectangleIndicatorInstaller.template and OrientedRectangleIndicatorInstaller.template now return always the value that has been set by client code and are not modified by internal code anymore.
  • The type conversion of DashStyle now supports the constant names of DashStyle, like real enums do.
  • The type conversion of Stroke can now create dashed and dotted lines similar to CSS border.
  • The CanvasComponent.exportContent method now always returns an <svg> element with proper size declaration that can be embedded into a document.

Input

  • In Microsoft browsers, the selection gesture is now much faster if selecting many items at once.
  • New overloads for the KeyboardInputMode.addKeyBinding and addRecognizerBinding methods make it easy to register key bindings and key recognizer listeners.
  • The new property CreateEdgeInputMode.showTargetHighlight specifies whether to enable or disable highlighting of potential targets for edge creation. Also, the method updateTargetHighlight has been added to allow for further customization of the highlight.
  • The new properties PortRelocationHandler.showTargetHighlight and PortRelocationHandlerProvider.showTargetHighlight specify whether to enable or disable highlighting of potential targets for edge creation. Also, the method updateHighlight has been added to the PortRelocationHandler class to allow for further customization of the highlight.
  • The new properties PortRelocationHandler.showPortCandidates and PortRelocationHandlerProvider.showPortCandidates specify whether to enable or disable showing port candidates during edge relocation.
  • The GraphEditorInputMode.DeletedItem event provides now context information about the state before the item has been deleted. For example, if a label has been deleted you now can get its old owner.
  • The method GraphEditorInputMode.onDeletedItem is now virtual.
  • Mouse move and drag events now correctly report the changed modifier keys.
  • Snaplines are now infinitely long by default.
  • The classes NodeDropInputMode, LabelDropInputMode, PortDropInputMode, and StripeDropInputMode now also support the simple type name as expected type. This type is set by user code on drag start.
  • The properties GraphInputMode.clickHitTestOrder and GraphInputMode.doubleClickHitTestOrder which are of type GraphItemTypes[] now support type conversion and can be specified as arrays of strings. Each of the string values is converted to GraphItemTypes with the existing type conversion of that enum.
  • The drag and drop behavior when multiple input devices are used simultaneously has improved.

Graph-Layout-Bridge

  • Combining multiple LayoutData classes is now easier:
    • The base class LayoutData offers a new method combineWith that combines the current instance with another LayoutData instance.
    • The class CompositeLayoutData has an additional constructor that takes a variable number of LayoutData instances.
  • The classes ItemMapping, ContextItemMapping, IncrementalHintsItemMapping, ItemCollection, DpKeyItemCollection and SingleItem now support type conversion which makes it easier to configure layout data.
  • The new PortAdjustmentPolicy property of LayoutExecutor and LayoutGraphAdapter replaces the previous ImprovePortAssignment boolean property. The new property is of type PortAdjustmentPolicy and offers more options for adjusting the port locations after a layout calculation.
  • The viewport animation of the LayoutExecutor class considers now the value of the LimitFitContentZoom property of the corresponding GraphComponent.

Hierarchic Layout

  • The HierarchicLayout class now also considers critical edge priorities for grouped edges.
  • The HierarchicLayout class now also considers sequence constraints for grouped edges.
  • The HierarchicLayout class now uses the specified layer alignment to align sub-components (see HierarchicLayoutData.subComponents).
  • With HierarchicLayout, the number of edges crossing through group nodes without starting or ending in them when using the default algorithm settings was reduced. Furthermore, the behavior can be customized using the new group node border crossing costs (see property HierarchicLayoutData.groupBorderCrossingCosts).
  • The HierarchicLayout class no longer inserts superfluous bends for edges between group nodes if the input graph contains grouped edges.
  • The layering of HierarchicLayout was improved with respect to the resulting edge lengths if the recursive group layering feature is enabled.
  • The HierarchicLayout class now produces less overlapping elements for graphs with fixed coordinate hints.
  • The HierarchicLayout class now correctly calculates the group node bounds. Previously, the groups' insets were slightly too large (up to one pixel).
  • The HierarchicLayout class now always places a port label in the middle of a node side, if it is the only port on that side. Previously it was only centered if the label was additionally placed on the edge.
  • The HierarchicLayout class now requires less memory for graphs with sequence constraints.

Edge Routing

  • The EdgeRouter now supports edge grouping on both endpoints. Previously, an edge could only be part of either a source or a target group.
  • The EdgeRouter class now generates less edge-edge overlaps and a better distribution of edge segments when the EdgeRouter.maximumDuration is strongly restricted or set to zero, or when the algorithm is stopped via the AbortHandler.stop method.
  • The EdgeRouter class now avoids superfluous bends that were in some cases caused by group nodes with (small) inset values.
  • The path search performance of the EdgeRouter class has been improved for cases where an edge has a strong, external PortConstraint or a fixed, external PortCandidate.
  • The EdgeRouter class now generates a proper routing from a group node border to a port location inside this group node defined by a strong PortConstraint or a fixed PortCandidate. Previously, the route was only calculated to the border and then the last segment was extended without consideration of obstacles and other elements.
  • The new properties abortHandler, sourcePortConstraints, targetPortConstraints, sourcePortCandidates, and targetPortCandidates of ChannelEdgeRouterData facilitate using these features with ChannelEdgeRouter.

Labeling

  • The performance of the GenericLabeling algorithm and the quality of the label placements were improved.
  • The quality of edge label placement of the GenericLabeling class was improved in case that there are multiple labels with a source or target preference near the same node. They may now be placed further away but avoid undesired overlaps.

Other Layouts

  • The new OrthogonalLayout.preferParallelRoutes property allows for controlling how parallel edges (multi-edges) are routed.
  • New options of the PlaceNodeAtBarycenterStage class allow for specifying the size of affected nodes, considering the grouping structure when calculating the barycenter of nodes as well as removing the bends of edges incident to affected nodes.
  • The TreeReductionStage now marks non-tree edges if an IDataAcceptor is registered with the input graph with key TreeReductionStage.nonTreeEdgeSelectionKey. This way a user is able to query which edges the algorithm determined to be the non-tree edges.
  • The RecursiveGroupLayout class now allows to define a local PartitionGrid structure for each recursively handled group node. See the new property RecursiveGroupLayoutData.groupNodePartitionGrids for details.
  • If the master edge is clipped on the bounds of its source or target, the ParallelEdgeRouter class now always clips the associated parallel edges on that bounds, too.
  • The RemoveCollinearBendsStage.scale property now also allows zero and negative numbers as its value. This makes it possible to internally round coordinates to full integer values for the comparison of bend points and, thus, the stage can be made more fuzzy.
  • The PartitionGridData class has new properties optimizeRowOrder and optimizeColumnOrder to indicate whether or not the order of the rows respectively columns should be chosen automatically to minimize edge lengths.

    In addition, the rowIndices and columnIndices properties of the PartitionGridData class can now also be used in combination with the grid property.

  • The PortCalculator class now considers edge label positions such they are not affected by whether this stage is applied or not (see property LayoutExecutor.portAdjustmentPolicy). Previously, label positions could be changed if the label position was stored relative to the first or last segment or the port.

Bugfixes

Graph

  • Fixed a bug in the graph implementation that sometimes lead to a runtime that was quadratic in the number of nodes when creating large graphs.
  • Fixed a bug in the UndoEngine class that resulted in memory leaks if the tokens returned by getToken were not disposed when the UndoEngine got cleared.

View

  • Tooltips can now correctly flow out of the area of the graph component.
  • The TextRenderSupport.addText method now takes into account existing x attribute values of the text element and places the text relatively to this value.
  • The EdgeStyleDecorationInstaller class no longer causes an error when used on edges that attach to other edges.
  • A template style with an unresolved template now creates a visual with an empty SVG <g> element instead of null. This avoids seemingly unrelated errors later on.
  • Fixed a memory leak and possible UI freezes that could occur in certain circumstances when using template styles.
  • If the SvgExport.shouldEncodeImageBase64 property is enabled, images that use data URIs and are not already encoded are now Base64 encoded during export as well.
  • Parsing a GraphML file with a folding edge state with a label without a preferred size no longer throws an error.
  • In rare cases, saving a graph that uses folding to GraphML threw an error.
  • Newline and tab characters in GraphML attribute values were written as-is, but replaced with whitespaces when reading the GraphML back in. These characters are now written as character entity references and correctly restored.
  • The null check for the GridVisualCreator.stroke property works correctly now.
  • Setting an ICanvasObjectGroup to invisible now clears all containing visuals. As a consequence, child visuals are correctly initialized when the group is set to visible again.
  • A grid with crosses using a stroke with a large thickness is now rendered correctly.
  • It is now possible to change only the color of a grid after the grid was initialized.

Input

  • The speed of pinch zooming on certain trackpads is no longer way to fast.
  • Reparenting an expanded group node into a collapsed group node no longer throws an error.
  • With SmartEdgeLabelModel, it was impossible to move a label from the left side of an edge to the right side. Instead, the label stopped at the edge.
  • The promises returned by the label editing methods in GraphEditorInputMode now provide null when canceled instead of the dummy label.
  • The parentInputMode property of the context of the InputModeEventArgs class now contains the input mode which has raised the event. Previously, some input modes erroneously set this property to the containing GraphEditorInputMode or GraphViewerInputMode.
  • The type IGridConstraintProvider cannot be used in lookup methods since it has a generic type parameter. Therefore, new specific interfaces have been added for each item type (for example INodeGridConstraintProvider).
  • The CreateEdgeInputMode class now considers the value of the CanvasComponent.hitTestRadius property when its startOverCandidateOnly property is enabled.
  • GraphClipboard's methods onElementCut and onElementCopied are no longer called for graph items which are not copied themselves but are owners of copied items.
  • When an edge is duplicated using GraphClipboard and a port is newly created during this operation, the new port now gets the old port's style and tag.
  • The visualization of source port candidates by the CreateEdgeInputMode class does not flicker, anymore.
  • The classes MarqueeSelectionInputMode and OverviewInputMode now install new visual templates correctly when they are set through the corresponding template property.

Hierarchic Layout

  • The HierarchicLayout class now correctly considers the group insets for input graphs with nested group nodes. Previously, it sometimes produced too large insets for inner groups.
  • The HierarchicLayout class no longer throws an error if it is wrapped by an instance of RecursiveGroupLayout and the input graph contains layering constraints between elements of different groups.
  • The HierarchicLayout class no longer throws an ArgumentError for some rare cases in incremental layout mode.
  • The HierarchicLayout class now produces shorter, more direct edge routes for edges connecting at a group node and leaving on the the left/right group side. This only affects cases where the relevant group node also contains direct-content edges (see EdgeLayoutDescriptor.directGroupContentEdgeRouting).
  • Self-loop segments generated by the HierarchicLayout class are now shorter and take up less space if possible. Previously, segments were sometimes unnecessarily long even though the minimum length settings allowed shorter segments.
  • The HierarchicLayout class now produces less superfluous crossings if there are same-layer edges with PortConstraints or PortCandidates.
  • The HierarchicLayout class now correctly handles port labels with zero height or width. Previously, such labels may have caused very large distances between some nodes.
  • The HierarchicLayout class sometimes threw an ArgumentError for input graphs that contained incremental elements in combination with groups.
  • The HierarchicLayout class now places sloped segments of grouped octilinear edges such that they are perfectly overlapping each other. Previously, it could happen that segments were slightly displaced with respect to each other.
  • The HierarchicLayout class no longer causes non-orthogonal segments when the input contained port labels in conjunction with edge grouping.
  • The HierarchicLayout class sometimes threw an ArgumentError for input graphs that contained fixed elements in combination with both swimlanes and groups.
  • The HierarchicLayout class now correctly considers fixed nodes with layering constraints. In previous versions there were some rare cases where such inputs caused infinite looping issues.
  • The HierarchicLayout class no longer produces intersections between edges and elements of a sub-component (see HierarchicLayoutData.subComponents). Note that this fix may sometimes cause less compact results within a layer.

Tree Layout

  • The CompactNodePlacer class no longer throws an error for input graphs with specified memento strategies (see TreeLayoutData.compactNodePlacerStrategyMementos or CompactNodePlacer.STRATEGY_MEMENTO_DP_KEY).
  • The CompactNodePlacer class now correctly considers the specified values of the verticalDistance and horizontalDistance properties.
  • The CompactNodePlacer class no longer throws an error for some inputs with specified strategy memento information.
  • The SimpleNodePlacer class no longer produces unnecessarily long horizontal edge segments.

Edge Routing

  • The EdgeRouter class now correctly routes direct content edges with strong port constraints at the group nodes. Previously, the algorithm sometimes produced weird routes for such edges.
  • Fixed a bug in the EdgeRouter class that sometimes caused a non-deterministic behavior.
  • The EdgeRouter class now correctly handles edges with external ports. Previously, such inputs may have caused an error.
  • The EdgeRouter class now correctly groups edges associated with equal group IDs that have a different object ID.
  • A rare error that was triggered by the EdgeRouter class during routing when a grid is defined on which edges need to be routed is now fixed.
  • The EdgeRouter class now avoids unnecessary bends in cases that contain PortCandidates with fixed offsets (or strong PortConstraints) where the fixed port locations have a very similar x- or y-coordinate such that the path must consist of three segments with a single, very short middle segment. Previously, five segments in total were generated.
  • The PolylineLayoutStage class no longer generates overlaps between sloped, polyline segments created by the stage and unrelated other obstacles (e.g. nodes).
  • Fixed a rare error that was triggered by the EdgeRouter class during routing in cases where the input contained grouped edges.
  • The EdgeRouter class no longer throws an error if the EdgeRouter.polylineRouting property is enabled and the input contains fixed, grouped edges.
  • The EdgeRouter class now considers the correct NodeHalo associated with the target node when handling the minimum last segment length setting. Previously it incorrectly considered the halo of the source node which could lead to unnecessarily long or too short last segments.
  • The EdgeRouter class now correctly considers intersections between edges and labels of fixed edges if property considerEdgeLabels is enabled.
  • The EdgeRouter class no longer throws an error during routing in cases where the source or target node is covered by obstacles (i.e. by other nodes or labels).
  • The EdgeRouter class now correctly considers intermediate routing points when using the polyline routing style. Previously, it could happen that intermediate points were not part of the final polyline edge path.
  • The EdgeRouter class no longer considers all PortCandidates with multiple directions as fixed PortCandidates.
  • Fixed two issues that induced the violation of a PortCandidate with fixed offsets (or a strong PortConstraint) by the EdgeRouter class. The first was only triggered for constraints at the target side and only when the target node was additionally partly or fully covered by other obstacles (e.g. node labels). The second issue appeared in cases with the source and target node fully overlapping (e.g. an edge from a group to a child node).
  • Improved the path search performance of the EdgeRouter class for cases where a large number of fixed and overlapping edge segments exist. Previously, the search could become very slow in such scenarios.
  • The EdgeRouter class now correctly handles cases where the maximum duration is exceeded and where previously an error was triggered.
  • Fixed a StackOverflowError in EdgeRouter.

Labeling

  • The GenericLabeling class now produces better results for edge labels that have a preferred distance to the edge (PreferredPlacementDescriptor.distanceToEdge) and at the same time multiple sideOfEdge preferences (e.g. left of edge and on the edge). Previously, the algorithm sometimes violated the preferred distance even though it would have been possible to keep it.
  • The GenericLabeling class now correctly places labels of direct content edges (edges that directly connect a group node with a descendant, without leaving the group) with a free edge label model.
  • The GenericLabeling class no longer calculates wrong label profit values for some edge labels. Previously, edges that had a PreferredPlacementDescriptor were sometimes affected.
  • The GenericLabeling class now always prefers LabelCandidates with higher profit values over others with lower profit. Previously, this sometimes happened even though both candidates did not intersect with other elements.
  • The GenericLabeling class no longer assumes that all LabelCandidates associated to a label have the same size. Previously, this caused unexpected labeling results if custom candidates with different sizes were given.
  • We fixed a rare bug in the GenericLabeling that may have caused an ArgumentError for some input graphs that contain edges with zero length segments and labels associated with a free edge label model.

Other Layout Styles

  • The OrthogonalLayout class no longer throws an error when property OrthogonalLayout.uniformPortAssignment is enabled and the input contains parallel edges.
  • The OrthogonalLayout class no longer causes an error for some input graphs when property faceMaximization is enabled.
  • The OrthogonalLayout class no longer runs into an infinite loop for some input graphs that are tree structures with mixed edge directedness. Note that the problem only occurred if property OrthogonalLayout.treeStyle is not set to TreeLayoutStyle.NONE.
  • The OrganicLayout class no longer throws an error when using CycleSubstructureStyle.CIRCULAR and arranging a cycle structure where at least one cycle node is also connected to a group node outside the cycle.
  • The OrganicLayout class now produces deterministic results for group nodes if its property deterministic is enabled.
  • When using RecursiveGroupLayout, the values of the properties computedWidth, computedHeight and computedPosition of the classes ColumnDescriptor and RowDescriptor are now correctly set after the layout if EdgeRouter is the corresponding interEdgeRouter.
  • The ComponentLayout class now correctly handles input graphs with user-specified components that contain nodes with null as their component ID (see property ComponentLayoutData.componentIds). Previously, such inputs may have caused an error.
  • The SeriesParallelLayout class now correctly handles input graphs with groups that only contain disconnected nodes. Previously, such inputs caused an error.
  • The PartialLayout class now correctly considers the specified PortCandidates during orthogonal or octilinear routing of edges.
  • The PartialLayout class does no longer reduce the size of fixed group nodes if the option PartialLayout.resizeFixedGroups is disabled.
  • The OrganicRemoveOverlapsStage no longer produces infinite loops in some rare cases.
  • Fixed a bug in YGraphAdapter that could trigger an error when boolean, integer or double values were requested from registered IMapper but no value had been set beforehand.
  • The GraphStructureAnalyzer.hasMultipleEdges method now returns the correct result for input graphs with self-loops.
  • The PathAlgorithm.findAllChains method now correctly calculates the chains for input graphs with cycles.
  • The BfsAlgorithm.getLayers method now correctly stores the layer indices in the specified INodeMap. Previously, the maximum layer index stored in the map exceeded the number of returned layers.

Incompatible Changes

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

Incompatible API Changes

  • In the ECMAScript module variant of the library, the names of some types have been changed to make it more clear to which layout style they belong. The new names include a 'Layout' part, for example HierarchicLayeringStrategy is now HierarchicLayoutLayeringStrategy.

    In addition, the existing analysis algorithm classes got a Algorithm postfix since the canonical short names are now used by the new IGraph-based analysis classes and YMap has been renamed to HashMap. See the migration guide for a complete list of these changes.

  • The IEnumerable.selectMany method has been renamed to IEnumerable.flatMap.
  • The GraphOverviewComponent.svgRendering property has been removed in favor of the new GraphOverviewComponent.renderMode property.
  • The IGraph.portLabels property replaces the getPortLabels method. The similar API members for other item types already are properties.
  • The methods ITable.getDecorator and ITable.getAccumulativeInsets have been replaced by the corresponding properties ITable.decorator and ITable.accumulativeInsets.
  • The resource keys of the SnapLine class have been removed. They are replaced by the new SnapLineVisualizationType enum.
  • The TextRenderSupport.measureText method now supports the parameters maximumSize and textWrapping to measure the size of wrapped text. The method parameter order was changed to fit the TextRenderSupport.addText method.

    In addition, the TextRenderSupport.measureText method now returns the result as Size. Previously, it returned a Rect.

  • The MouseHoverInputMode.toolTip property was removed to support separate fade out animations for tooltips. To specify a tooltip overwrite the MouseHoverInputMode.createToolTip method instead.

    In addition, some properties of the ToolTip class have been made read-only because changes to these properties had no effect anyway.

  • The improvePortAssignment boolean property of LayoutExecutor and LayoutGraphAdapter has been replaced by the portAdjustmentPolicy property.
  • SingleItemCollection's item property has been pulled up to ItemCollection. Class SingleItemCollection has been removed, its usages have been replaced by ItemCollection.
  • The following properties of specific layout data types now have a name with the correct plural or singular usage.
    • HierarchicLayoutData.alternativeEdgePath has been renamed to alternativeEdgePaths.
    • TreeLayoutData.leftRightPlacersLeftNodes has been renamed to leftRightNodePlacerLeftNodes.
    • TreeLayoutData.delegatingNodePlacersPrimaryNodes has been renamed to delegatingNodePlacerPrimaryNodes.
    • FixNodeLayoutData.fixedNode has been renamed to fixedNodes.
  • The type of the properties BalloonLayoutData.treeRoot and TreeLayoutData.treeRoot has been changed to SingleItem<INode>.
  • The property HierarchicLayoutData.alternativeEdgePaths now expects IEnumerable<IPoint> instead of YPointPath as mapped values.
  • The property HierarchicLayoutData.alternativeGroupBounds now expects IRectangle instead of YRectangle as mapped values.
  • The properties rows and columns of class PartitionGrid are now of type IEnumerable<RowDescriptor> and IEnumerable<ColumnDescriptor> instead of an un-typed YList.
  • The properties sourceGroups and targetGroups of RadialLayoutData have been removed since edge grouping is not supported by the RadialLayout class.
  • The PenaltySettings.invalidEdgeGroupingPenalty property has been removed. If edge groups are defined, the EdgeRouter class now always considers them. Therefore, this setting no longer applies.
  • Implementing yFiles interfaces in TypeScript now requires to specify the intersection type of all implemented interfaces. See the Developer's Guide for an example.
  • The BfsDirection enum has been renamed to TraversalDirection since it is now used for other graph traversal algorithms, too.

Changes of Default Behavior

  • The SimplexNodePlacer.barycenterMode property is now enabled by default. Thus, the HierarchicLayout class with default settings now produces different (usually more symmetric) layouts.
  • The CanvasComponent class no longer calls preventDefault on all 'drop' events. Instead, this is now called only for events for which an enabled and responsible (drop) input mode exists.
  • The methods map, takeWhile, and reversed of IEnumerable now return a dynamic enumerable, i.e., if the original enumerable changes, the returned enumerable changes, too. Use the toArray or toList method if you want to store the current state of an enumerable.
  • GraphClipboard's methods onElementCut and onElementCopied are no longer called for graph items which are not copied themselves but are owners of copied items. As a consequence, the methods cut and copy of the IClipboardHelper implementations of these elements are no longer called, either.
  • The Promise returned from the GraphEditorInputMode.editLabel method now resolves with null if the edit was canceled or did not validate successfully.
  • The default tooltip of the ToolTipQueryEventArgs class is now set to null. Thus, the tooltip is not displayed when the event is handled without setting the tooltip content.
  • The properties RectangleIndicatorInstaller.template and OrientedRectangleIndicatorInstaller.template now return always the value that has been set by client code and are not modified by internal code anymore.
  • Newline and tab characters in GraphML attribute values are now written as character entity references instead of writing actual newline or tab characters.
  • The SvgExport.shouldEncodeImageBase64 method is now only called for images that are not already Base64 encoded.
  • The GroupingSupport class no longer throws an ArgumentError if there is a node without associated ID. Instead the class uses the node itself as ID.
  • The HierarchicLayout class now uses a higher crossing cost for group node borders. To specify custom values, use the property HierarchicLayoutData.groupBorderCrossingCosts.
  • If the master edge is clipped on the bounds of its source or target, the ParallelEdgeRouter class now always clips the associated parallel edges on that bounds, too.
  • The default value of the property GridNodePlacer.rootAlignment was changed to GridNodePlacer.BUS_ALIGNED from RotatableNodePlacerBase.RootAlignment.TRAILING.

Minor Incompatible Changes

  • The TypeScript .d.ts file doesn't contain typings that allow quick interface implementations anymore. Quick interface implementations still work at runtime though.
  • The CanvasComponent.exportContent method now always returns an <svg> element instead of either an SVG group <g> element for SVG-only rendering and a <div> element with <canvas> and <svg> children otherwise.
  • The method LayoutData.apply is now protected instead of public.
  • The YList.subList method was removed since it was not implemented at all and is not used by the library.
  • The clone methods of the geometric types Point, Rect, Size, and Insets was removed since these types are immutable and the methods just returned this.
  • The classes GeneralPath and GeneralPathCursor are now sealed.
  • The protected DefaultLabelStyleRenderer.measureText method got an additional parameter for the maximum size.
  • The following changes regarding the expert API related to the EdgeRouter class were made:
    • The first parameter of the constructors in class SegmentInfoBase is now of type object instead of Edge. The provided type should be either PathRequest for affected edges or Edge for non-affected, fixed ones. Furthermore, the property SegmentInfoBase.edge has been removed as the info is not necessarily associated with an edge anymore.
    • Similarly, the first parameter of the constructor in class EdgeCellInfo is now of type Object instead of Edge. The provided type should be either PathRequest for affected edges or Edge for non-affected, fixed ones.
    • The constructor of class EdgeInfo now additionally takes a parameter of type Edge.
    • The parameter of type Edge from the constructor of Path as well as the respective property were removed. A path is now not necessarily associated with an edge but only with the newly introduced PathRequest.
    • The method PathSearchResult.getEdgeInfo was removed.

yFiles for HTML 2.1.0.7 - Changes Since 2.1.0.6

This is the 7th bugfix release for yFiles for HTML 2.1. It corrects several errors. There are no incompatible API changes.
Note that the bugfixes of this release are part of yFiles for HTML 2.2.0.1, too.

Bugfixes

Graph and View

  • Improved code paths in the implementations of the IGraph interface that sometimes led to a runtime that was quadratic in the number of nodes when creating large graphs.
  • The EdgeStyleDecorationInstaller class no longer causes an exception when used on edges that attach to other edges.
  • The EdgeStyleDecorationInstaller class now properly displays decorations for edges between group nodes and their descendants when displayed in view coordinates.
  • A template style with an unresolved template now creates a visual with an empty SVG <g> element instead of null. This avoids seemingly unrelated exceptions later on.
  • If the SvgExport.encodeImageBase64 property is enabled, images that use data URIs and are not already encoded are now Base64 encoded during export as well.
  • The TextRenderSupport.addText method now takes into account existing x attribute values of the text element and places the text relatively to this value.
  • Fixed a but that rendered labels or ports neither in a separate layer nor at their owner when exactly one of LabelLayerPolicy.AT_OWNER or PortLayerPolicy.AT_OWNER was used.
  • Fixed an exception which could occur in the CanvasComponent.compareRenderOrder method and in the function set to the GraphModelManager.comparer property.
  • The GridVisualCreator.stroke is now correctly checked for null.

Input

  • The speed of pinch zooming on certain trackpads is no longer way to fast.
  • Reparenting an expanded group node into a collapsed group node no longer throws an exception.
  • With SmartEdgeLabelModel, it was impossible to move a label from the left side of an edge to the right side. Instead, the label stopped at the edge.
  • The AutoGroupNodeAlignmentPolicy values CENTER_LEFT, CENTER_RIGHT, TOP_CENTER, BOTTOM_CENTER, and BOTTOM_LEFT now work correctly.
  • Fixed a memory leak in the UndoEngine class if the tokens returned by the getToken method were not disposed when the UndoEngine got cleared.
  • In very rare cases, the undo/redo processing of several consecutive reparent actions threw an exception.
  • The visualization of source port candidates by the CreateEdgeInputMode class does not flicker, anymore.
  • The CollapsibleNodeStyleDecorator.isHit method now respects buttons that are located outside of the node bounds.
  • The classes MarqueeSelectionInputMode and OverviewInputMode now install new visual templates correctly when they are set through the corresponding template property.
  • The promises returned by the label editing methods in GraphEditorInputMode and TableEditorInputMode now fulfill with null instead of the temporary label if the editing was canceled or the text did not validate. This was already the documented behavior.

GraphML

  • Labels at folder nodes and their adjacent edges are no longer lost during GraphML deserialization if the DefaultFolderNodeConverter.copyFirstLabel property is enabled.
  • Parsing a GraphML file with a folding edge state with a label without a preferred size no longer throws an exception.
  • In rare cases, saving a graph with folding to GraphML threw an exception.

Hierarchic Layout

  • The HierarchicLayout class now correctly calculates the group node bounds. Previously, the groups' insets were slightly too large (up to one pixel).
  • The HierarchicLayout class no longer throws an exception if it is wrapped by an instance of RecursiveGroupLayout and the input graph contains layering constraints between elements of different groups.
  • The HierarchicLayout class now correctly considers the group insets for input graphs with nested group nodes. Previously, it sometimes produced too large insets for inner groups.
  • The HierarchicLayout class no longer throws an exception for some rare cases in incremental layout mode.
  • Self-loop segments generated by the HierarchicLayout class are now shorter and take up less space if possible. Previously, segments were sometimes unnecessarily long even though the minimum length settings allowed shorter segments.

Edge Router

  • The EdgeRouter class now correctly groups edges associated with equal group IDs that have a different object ID.
  • A rare exception that was triggered by the EdgeRouter class during routing when a grid is defined on which edges need to be routed is now fixed.
  • The EdgeRouter class now avoids unnecessary bends in cases that contain PortCandidates with fixed offsets (or strong PortConstraints) where the fixed port locations have a very similar x- or y-coordinate such that the path must consist of three segments with a single, very short middle segment. Previously, five segments in total were generated.
  • The EdgeRouter class now correctly handles edges with external ports. Previously, such inputs may have caused an exception.
  • The EdgeRouter class now correctly routes direct content edges with strong port constraints at the group nodes. Previously, the algorithm sometimes produced weird routes for such edges.
  • Fixed a bug in the EdgeRouter class that sometimes caused a non-deterministic behavior.
  • The EdgeRouter class no longer throws an exception during the routing of some graphs with grouped edges.
  • Fixed two issues in the EdgeRouter class that resulted in the violation of a PortCandidate with fixed offsets or a strong PortConstraint. The first was only triggered for constraints at the target side and only when the target node was additionally partly or fully covered by other obstacles (e.g. node labels). The second issue appeared in cases with the source and target node fully overlapping (e.g. an edge from a group to a child node).
  • The EdgeRouter class no longer throws an exception if its polylineRouting property is enabled and the input contains fixed, grouped edges.
  • The EdgeRouter class now considers the correct NodeHalo associated with the target node when handling the minimum last segment length setting. Previously it incorrectly considered the halo of the source node which could lead to unnecessarily long or too short last segments.
  • The EdgeRouter class now correctly considers intersections between edges and labels of fixed edges if its property considerEdgeLabels is enabled.
  • The EdgeRouter class no longer throws an exception during routing in cases where the source or target node is covered by obstacles (i.e. by other nodes or labels).
  • The EdgeRouter class now correctly considers intermediate routing points when using the polyline routing style. Previously, it could happen that intermediate points were not part of the final polyline edge path.
  • The EdgeRouter class no longer considers all PortCandidates with multiple directions as fixed PortCandidates.

Label Placement

  • The performance of the GenericLabeling algorithm and the quality of the label placements were improved.
  • The GenericLabeling class no longer throws an exception for some input graphs containing labeled edges with zero length.
  • The GenericLabeling class now correctly places labels of direct content edges (edges that directly connect a group node with a descendant, without leaving the group) with a free edge label model.
  • The GenericLabeling class no longer calculates wrong label profit values for some edge labels. Previously, edges that had a PreferredPlacementDescriptor were sometimes affected.
  • The GenericLabeling class now produces valid results for edge labels that have a preferred distance to the edge and at the same time multiple sideOfEdge preferences (e.g. left of edge and on the edge). Previously, the algorithm sometimes violated the preferred distance even though it would have been possible to keep it.

Other Layouts

  • The Paths.findAllChains method now correctly calculates the chains of input graphs with cycles.
  • Fixed a potential exception in the LayoutExecutor class which could occur during a layout of a graph with table nodes which are not group nodes.
  • The OrganicLayout class now correctly considers input graphs where substructure handling is enabled and all nodes are located at coordinate (0,0). Previously, such inputs may have triggered an exception.
  • The OrganicLayout class no longer throws an exception when using CycleSubstructureStyle.CIRCULAR and arranging a cycle structure where at least one cycle node is also connected to a group node outside the cycle.
  • The OrthogonalLayout class no longer causes an exception for some input graphs when its faceMaximization property is enabled.
  • The OrthogonalLayout class no longer runs into an infinite loop for some input graphs that are tree structures with mixed edge directedness (see the OrthogonalLayout.edgeDirectednessDpKey property). Note that the problem only occurred if the OrthogonalLayout.treeStyle property is not set to TreeLayoutStyle.NONE.
  • The OrthogonalLayout class no longer throws an exception when its uniformPortAssignment property is enabled and the input contains parallel edges.
  • The CompactNodePlacer class no longer throws an exception for input graphs with specified memento strategies (see TreeLayoutData.compactNodePlacerStrategyMementos.
  • The SimpleNodePlacer class no longer produces very long horizontal edge segments for inputs where they aren't required.
  • The PolylineLayoutStage does no longer generate overlaps between sloped, polyline segments created by the stage and unrelated other obstacles (e.g. nodes).
  • The PartialLayout class now correctly considers the specified PortCandidates during orthogonal or octilinear routing of edges.
  • The SeriesParallelLayout class now correctly handles input graphs with groups that only contain disconnected nodes. Previously, such inputs caused an exception.

Minor Behavior Change

  • The SvgExport.shouldEncodeImageBase64 method is now only called for images that are not already Base64 encoded. This method is only meant to specify whether images that are not already Base64 encoded should be encoded for the export. SvgExport doesn't (and didn't) change images that are already Base64 encoded.

yFiles for HTML 2.1.0.6 - Changes Since 2.1.0.5

This is the 6th bugfix release for yFiles for HTML 2.1. It corrects several errors and brings some improvements. There are no incompatible changes.

Improvements

  • By default, the Backspace key now deletes the selected elements, as the Delete key does. This is especially useful on MacBooks since their 'Delete' key is Backspace. Previously, the Backspace key had no default command.
  • Added the FixPortLocationStageData class that allows to conveniently define the port constraints that are considered by the FixPortLocationStage class.
  • The new properties OrganicLayoutData.sourceGroupIds and OrganicLayoutData.targetGroupIds can be used to specify edge grouping.

Bugfixes

View

  • Exporting with the SvgExport class silently failed without exporting anything if the text of a label contained emojis or some other unusual Unicode characters.
  • User interactions in a folded graph which contains labels at ports no longer throw an exception.
  • An edge in a folded view no longer loses its bends and labels after it is reversed multiple times.
  • Scrolling with the CanvasControl.animateScrollCommands property enabled no longer changes the zoom level.
  • The labels of dragged ports were not displayed correctly by the PortDropInputMode class.
  • The EdgeStyleDecorationsInstaller class now properly displays decorations for edges between group nodes and their descendants when displayed in view coordinates.
  • The IAnimation.createSequentialAnimation method no longer throws a TypeError due to 'Object.binarySearch is not a function'.

Layout

  • The HierarchicLayout class now correctly handles port labels with zero height/width. Previously, such labels may have caused very large distances between some nodes.
  • The HierarchicLayout class sometimes threw an exception for input graphs that contained incremental elements in combination with groups.
  • The HierarchicLayout class now prevents intersections between labels and the horizontal grid lines of a PartitionGrid.
  • The HierarchicLayout class now properly handles input graphs with source/target port labels and where a subset of nodes has NodeHalos. Previously, such inputs could cause an exception.
  • The HierarchicLayout class does no longer violate fixed PortCandidates in cases where also critical edges (HierarchicLayoutData.criticalEdgePriorities) and edges connecting to group nodes are given.
  • The HierarchicLayout class now produces less superfluous crossings if there are same-layer edges with PortConstraints or PortCandidates.
  • The HierarchicLayout class no longer produces non-orthogonal segments if the graph has port labels and the edge grouping feature is enabled.
  • The HierarchicLayout class now correctly calculates the required length of straight-line same-layer edges. Previously, the calculated length could have exceeded the required length by the value of the HierarchicLayout.nodeToEdgeDistance property.
  • The HierarchicLayout class now places sloped segments of grouped octilinear edges such that they are perfectly overlapping each other. Previously, it could happen that segments were slightly displaced with respect to each other.
  • The EdgeRouter class no longer throws an exception for some inputs containing edges with intermediate routing points.
  • The EdgeRouter class now correctly handles cases where the maximum duration is exceeded and where previously an exception was triggered.
  • Improved the path search performance of the EdgeRouter class for cases where a large number of fixed and overlapping edge segments exist. Previously, the search could become very slow in such scenarios.
  • Fixed a stack overflow error in EdgeRouter.
  • When using RecursiveGroupLayout, the values of the properties computedWidth, computedHeight and computedPosition of the classes ColumnDescriptor and RowDescriptor are now correctly set after the layout if EdgeRouter is the corresponding InterEdgeRouter.
  • The ComponentLayout class now correctly handles input graphs with user-specified components that contain nodes with null as their component ID (see property ComponentLayoutData.componentIds). Previously, such inputs may have caused an exception.
  • The CompactNodePlacer class now correctly considers the specified values for the verticalDistance and horizontalDistance properties.
  • The CompactNodePlacer class now correctly handles inputs where the tree root is marked as assistant node, see TreeLayoutData.assistantNodes.
  • The CompactNodePlacer class now correctly handles input graphs that contain assistant nodes and given placement strategies (see the TreeLayoutData.compactNodePlacerStrategyMementos property).
  • The CompactNodePlacer class now produces more compact results for some cases where it previously generated larger, less compact results.
  • The CompactNodePlacer class no longer throws an exception for some inputs with specified strategy memento information.
  • The OrthogonalLayout does no longer throw an exception if a graph is almost a tree and its treeStyle property is set to TreeLayoutStyle.INTEGRATED and a fixed TreeOrientation is set.
  • The OrganicLayout class now produces deterministic results for group nodes if the property deterministic is enabled.
  • The OrganicRemoveOverlapsStage class no longer gets stuck in an infinite loop in some rare cases.

yFiles for HTML 2.1.0.5 - Changes Since 2.1.0.4

This is the 5th bugfix release for yFiles for HTML 2.1. It corrects just one issue that prevented backwards compatibility with old browsers.

Bugfixes

  • A deployment issue caused the "lang" library module to contain a 'const' declaration. This declaration has now been replaced by a 'var' declaration, so the modules are fully ECMAScript 5 compatible again.

yFiles for HTML 2.1.0.4 - Changes Since 2.1.0.3

This is the 4th bugfix release for yFiles for HTML 2.1. It corrects several errors and comes with some improvements of the library and the demos. There is one minor incompatible change.

Improvements

  • Some code optimizers break the library code, most prominently the build optimizer of Angular CLI, Rollup when 'tree shaking' is enabled, and Uglify when the 'pure_getters' setting is enabled. We now check whether the code has been wrecked and show a corresponding warning in the console. For more details, see the Known Issues document (of your local yFiles for HTML installation) and the corresponding angular-cli issue.
  • The LayoutExecutor now automatically enables and disables a wait input mode for the GraphComponent during layout and subsequent animation. This can be turned off with the new allowUserInteraction property.
  • Input modes no longer run unnecessary hit tests when they are canceled.

Bugfixes

  • ES6 library modules that are packed with webpack no longer contain 'const' variables.
  • The deployment tool did not rename references to obfuscated types in some cases when using the simple names exported from the yFiles ES6 modules.

View and Input

  • GraphModelManager: Fixed an error that occurred when any of the descriptor properties were set while the GraphModelManager instance was not yet associated with an IGraph.
  • Fixed a possible infinite loop in the OrthogonalEdgeHelper class.
  • The cursor is now correctly reset after editing an orthogonal edge.
  • Fixed a possible error which could occur in customized LabelDropInputMode and PortDropInputMode classes.
  • The drop input modes now make sure not to throw "Invalid Argument" errors in Internet Explorer.
  • The PortRelocationHandle.GHOST_VISUALIZATION_STROKE_KEY constant was not excluded from obfuscation.
  • The graph parameter of the constructor of the PortRelocationHandleProvider class can now be null. This was already the documented behavior.
  • Mouse wheel scrolling and scroll commands no longer move the view to the top left corner if the viewport is limited by a ViewportLimiter.
  • The bounds and the visibility state of the ICanvasObject installed by the RectangleIndicatorInstaller class were wrong. This impacted the performance as e.g. some node selection highlights were updated although they were not in the viewport and resulted in unnecessary large content rectangles.
  • The IHitTestable implementation of the DefaultPortCandidateDescriptor class used incorrect coordinates.
  • Changing the MouseHoverInputMode.duration property had no effect.
  • The ItemHoverInputMode class now updates the hovered item upon mouse drag events, too. This was already the documented behavior. Previously, the hovered item was only updated on mouse move events.
  • The ItemHoverInputMode class now removes the hovered item upon Cancel.
  • The CreateEdgeInputMode class doesn't show port candidates anymore if bend creation is enforced (by pressing CTRL key during edge creation).
  • Key bindings registered with KeyboardInputMode were gone after re-installation of the mode.
  • The INodeInsetsProvider implementations which can be retrieved from InteriorLabelModel and InteriorStretchLabelModel now correctly sum up the space required by overlapping labels.
  • Bridges sometimes did not appear on edges when they were scrolled into the viewport.
  • The overview did not render self-loops whose ports were owned by another edge correctly.
  • The indicators for bend grid snapping were not always drawn at the correct position for bends which were implicitly moved with a selected edge.
  • Fixed a possible TypeError in TableNodeStyleRenderer when a TableNodeStyle is rendered with the table property set to null.
  • The GraphBuilder.updateGraph method properly builds the graph now even if buildGraph was not called before.

Layout

  • The HierarchicLayout class placed source and target edge labels at the wrong location when integrated edge labeling was enabled and if there were either critical edges or the property SimplexNodePlacer.straightenEdges was enabled.
  • The HierarchicLayout class sometimes threw an error for input graphs that contained fixed elements in combination with both swimlanes and groups.
  • HierarchicLayout is no longer stuck in an endless loop if a sub-component with a nested layout algorithm that again contains a HierarchicLayout algorithm is defined.
  • The OrganicLayout class now always correctly moves the nodes for inputs with scope set to SUBSET or MAINLY_SUBSET and with specified output restrictions.
  • The TreeLayout class now correctly passes on exceptions that occurred during the layout calculation. Previously, they were sometimes caught without proper handling.
  • The SeriesParallelLayout class can now handle input graphs that contain nodes with very large location coordinates (e.g. largest possible floating-point value) when the fromSketchMode property is disabled.
  • The RadialLayout class does no longer throw an error if there is an IDataProvider registered with the key HierarchicLayout.SUB_COMPONENT_ID_DP_KEY.
  • The RecursiveGroupLayout class now correctly considers PortConstraints and PortCandidates of self-loops where both end points are restricted to the same node side.
  • A rare bug in the GenericLabeling may have caused an error for some input graphs that contain edges with zero length segments and labels associated with a free edge label model.
  • The EdgeRouter now avoids edge-to-edge distance violations for segments directly connecting at a node if there exists a cheaper route that, e.g., introduces a bend (which costs less by default). The effect of this issue was mainly observable in cases where the edge-to-edge distance was set to a rather large value.
  • The EdgeRouter now avoids some unnecessary bends that were previously created for edges that needed to pass group node borders and in conjunction with rather large minimumNodeToEdgeDistance values.
  • The EdgeRouter class now keeps paths with self-crossings belonging to fixed edges. Previously, the self-crossings were removed, i.e. paths of fixed edges were changed.
  • The PolylineLayoutStage class now keeps collinear bends of fixed edges.

Notable Demo Improvements

  • Updated third-party toolkits and dependencies of the demos to the current versions, most notable to webpack 4 and TypeScript 3.
  • Improved the performance of the Structure View and Neighborhood View demo components.
  • The new JSONWriter and JSONReader classes show how to write and read a graph to/from JSON. They supersede the GraphToJSON class and are more universal to support more use cases.
  • Enabled a workaround for Microsoft Edge in the Image Export demo. Otherwise gradients are not drawn correctly.

Incompatible Change

  • Reverted the following improvement of version 2.1 since it turned out to cause problems: "CreateEdgeInputMode now always creates dummy ports during a gesture, instead of temporarily reusing real ports if available. This makes it possible to change, e.g. the dummy edge's source port's style during the gesture.".

yFiles for HTML 2.1.0.3 - Changes Since 2.1.0.2

This is the 3rd bugfix release for yFiles for HTML 2.1. It includes several new demos, improvements, and corrections of errors. There are no incompatible changes.

Improvements

  • The yFiles type checking now complains always when trying to create an instance of an abstract class.

View

  • Reduced memory consumption of Void styles like VoidNodeStyle.
  • Improved performance for graphs with a large number of dynamically data-bound template styles.
  • Improved performance of the WebGLTaperedEdgeStyle.

Layout

  • The new PlaceNodesAtBarycenterStageData class allows to conveniently define the nodes that should be affected by PlaceNodesAtBarycenterStage.
  • HierarchicLayout now requires less memory for graphs with sequence constraints.
  • HierarchicLayout no longer inserts superfluous bends for edges between group nodes if the input graph contains grouped edges.

Bugfixes

  • Prevent a TypeError due to missing createElementNS property in web workers and in node.js when using the ES6 modules variant of the library.

View

  • GraphModelManager no longer removes the port visualizations if PortLayerPolicy.AT_OWNER is used and the HierarchicNestingPolicy is changed.
  • Bridges: For edges which cross each other with the same absolute slope a bridge is added on exactly one of these edges, depending on the crossing policy. Previously, a bridge was added either on both edges or none of them.
  • SmartEdgeLabelModel centered all labels on an edge that overlapped with a segment of the edge or were placed directly next to it.
  • Switching the input mode in an event handler of the current input mode no longer throws an error.
  • GraphClipboard: The contents of a folder node were not copied if the folder was copied from within a group view, i.e. if the user entered a group node. In the worst case, this might have frozen the complete application.
  • GenericLabelModel serialization: Fixed cyclic reference in GraphML which could happen while serializing a GenericLabelModel with a parameter with associated descriptor.
  • Corrected the GraphML serialization of the IArrow instances that are returned by the Arrow.asFrozen method.

Layout

  • HierarchicLayout now correctly considers fixed nodes with layering constraints. Previously, there were some rare cases where such inputs caused infinite looping issues.
  • OrthogonalLayout does no longer throw an error for some input graphs when its treeStyle property is set to COMPACT and its chainStyle property is set to a wrapped style.
  • OrthogonalLayout no longer throws an error if its cycleStyle property is set to a specific style and the input graph only consists of a single cycle.
  • EdgeRouter now always considers the PortCandidates for edges grouped with fixed edges.
  • EdgeRouter now keeps collinear bends of fixed edges.
  • EdgeRouter no longer crashes when defining exactly two equal intermediate routing points for an edge.
  • EdgeRouter threw an error when the list of intermediate points for an edge consisted of exactly two equal points.
  • BusRouter no longer produces non-deterministic results, i.e. different results for consecutive runs on the same input. Previously, this was possible in rare cases.
  • TabularLayout no longer crashes when applying an instance of it to a single-node graph after that same instance was previously applied to a larger graph.
  • GenericLabeling now always prefers LabelCandidates with higher profit values over others with lower profit. Previously, this sometimes happened even though both candidates did not intersect with other elements.
  • GenericLabeling does no longer assume that all LabelCandidates associated to a label have the same size. Previously, this caused unexpected labeling results if custom candidates with different sizes were given.
  • MultiPageLayout now correctly considers the maximum page size for tree layouts.
  • FamilyTreeLayout now correctly considers the preferred family member order.
  • The PreferredPlacementDescriptor.equals method incorrectly reported instances with different angles and distances as equal.

New Demos and Tutorials

Gantt Chart
Shows how to create an interactive Gantt chart from JSON data.
Structure View Demo
Features a tree list component that shows a structural view of a grouped graph.
Edge Groups
Shows how to configure HierarchicLayout to group edges. Grouped edges share common segments, thus making the layout more understandable and cleaner.
Split Edges
Shows that RecursiveGroupLayout in combination with HierarchicLayout presents the option to align edges that are split at a group's border. This leads to better routes for edges between groups and allows edges that connect ports at a group's border to the nodes of the group.
Rendering Order
Shows how to use the GraphModelManager class to control the order in which graph elements are rendered.
Build Swimlanes from Data Tutorial
Shows how to build a swimlane graph from JSON data.
Native Listeners Tutorial
Describes how to use a native click listener to add a button on a style.
Filtering with Folding Tutorial
Shows how to configure filtering and folding in the same diagram.

yFiles for HTML 2.1.0.2 - Changes Since 2.1.0.1

This is the 2nd bugfix release for yFiles for HTML 2.1. It includes four new demos, restructured tutorials, some improvements, and corrects several errors. There are no incompatible changes.

Improvements

  • Reduced the number of bends of directed edges in OrthogonalLayout.
  • The new TreeLayoutData.criticalEdgePriorities property can be used to specify critical edges.
  • The INode parameter of the NavigationInputMode.enterGroup method is now optional. If it is omitted or null the whole graph will be revealed.
  • The CanvasControl.createInputModeContext method is now public instead of protected.
  • The PointD.toMutablePoint and RectD.toMutableRectangle methods now return a MutablePoint instead of IMutablePoint and a MutableRectangle instead of a IMutableRectangle, respectively.
  • The new optional parameter initialTargetLocation of the CreateEdgeInputMode.doStartEdgeCreation method can be used to define the initial location that shall be used to find a target node.

Bugfixes

  • For some constructors, the automatic type conversion did not work as documented. Also many simple constructors were not type-checked at run-time at all even if yfiles-typeinfo.js was available.
  • Due to a bug in Safari 10.0 and earlier, using the new automatic type conversion feature for enum values resulted in a TypeError in these browsers. We now avoid the problematic code.
  • Since version 2.1, the workaround IE7766782 for a problem in Internet Explorer with GWT was not applied to all problematic usages of Array.isArray. Thus, instanceof checks for arrays could have been wrong in rare cases, resulting in different kinds of subsequent errors.

View

  • yFiles no longer shows an error if WebGL support is not available but no WebGL rendering is used at all. If WebGL support is not available and WebGL rendering is used, the resulting error has now a clear error message.
  • The Workarounds class now correctly documents that it is exported by the yfiles/core ES6 module.
  • CreateEdgeInputMode did not show port candidates after re-installation of the input mode.
  • CreateEdgeInputMode didn't always update the highlight of possible source port candidates when its showPortCandidates property was configured to show the source port candidates.
  • The default input mode that available view the GraphEditorInputMode.moveUnselectedInputMode property moved the bottom-most item at the cursor position instead of the top-most. This is most apparent when trying to move a child node of a group.
  • ClickInputMode provided wrong click locations in the Click event if a MouseEventTypes.CLICK event without preceding MouseEventTypes.DOWN event was processed.
  • If the MouseHoverInputMode.toolTip property was changed while a tool tip was visible, that tool tip was shown forever.
  • ItemHoverInputMode now resets the hovered item when moving the mouse out of the control.
  • While relocating edges, dropping a port over an invalid target or empty canvas no longer creates an empty undo unit.
  • Fixed an exception when an edge or label was pasted without selected target while its original owner was not in the current view.
  • The marquee visual of the LassoSelectionInputMode class was not updated properly during zooming.
  • PolylineEdgeStyle now takes arrow heads into account for visibility checks.
  • Reduced memory consumption of DefaultEdgePathCropper.
  • EdgeSegmentLabelModel and EdgePathLabelModel placed the label on the wrong side for EdgeSides.ABOVE_EDGE and EdgeSides.BELOW_EDGE if the distance and offset was both 0.
  • The TextWrapConverter for template styles threw a TypeError if the resolved value was not a string (e.g. for numbers or null). Now, it handles null and undefined like an empty string and converts non-string values to string.
  • The maximumSize parameter of the TextRenderSupport.addText method is now optional, and consequently handles null arguments as it was already documented.

Layout

  • The HierarchicLayout now produces less bends if the edges should be routed on a grid and the grid reference point is not (0,0), see NodeLayoutDescriptor.gridReference.
  • HierarchicLayout did sometimes not correctly consider the edge thickness for grouped edge segments. Even though there would have been space for a thick edge it was placed too close to other elements.
  • HierarchicLayout now produces more symmetric results for grouped edges if property SimplexNodePlacer.barycenterMode is enabled.
  • For some input graphs with port groups, the HierarchicLayout threw an exception for layout mode LayoutMode.INCREMENTAL.
  • Fixed a rare bug in OrthogonalLayout that may have caused infinite looping for grouped input graphs.
  • For some input graphs the OrganicLayout produced an error if the CycleSubstructureStyle property was set to CycleSubstructureStyle.CIRCULAR.
  • CircularLayout does now correctly consider the EdgeBundleDescriptor.bundled property for edges between different partitions. Previously, when at least one of these edges had the Bundled property enabled, all of them were bundled, ignoring the property value of the other edges.
  • Fixed a bug in TreeMapLayout that may have caused NaN-coordinates or infinite looping for input graphs that are non-directed trees.
  • The EdgeRouter now produces better routes if there are edges with intermediate routing points, see property EdgeLayoutDescriptor.intermediateRoutingPoints.
  • For grouped segments the GraphLayoutLineWrapper now produces more compact results.
  • In rare cases the GraphLayoutLineWrapper produced drawings with large empty space between lines.

New and Improved Demos

Application Features Tutorial
These new small tutorials show how to implement features that applications typically have, like drag and drop, building graphs from JSON data, and tool tips.
Map Integration
Draws a graph on top of an interactive map. The nodes are placed at the correct locations on the map with geo-coordinates. The map in this demo is realized with the Leaflet.js library.
Contextual Toolbar
In this demo, contextual toolbars for the nodes and edges allow quick modifications of the styling and other actions.
Template Styles
Shows how to rapidly create node, label, and port styles from SVG template snippets. These styles can show information about their item with dynamic data binding.
Lasso Selection
Shows how to configure a lasso tool for freeform selection.

Other Notable Demo Improvements

  • The performance of the Large Graphs Demo was significantly improved.
  • The PDF Export now supports custom fonts and non-Latin-1 characters. A second sample graph shows such fonts and characters.
  • The load and save operations in the File Operations demo have been refactored and simplified to make it much easier to re-use the code in customer applications.

yFiles for HTML 2.1.0.1 - Changes Since 2.1

This is the 1st bugfix release for yFiles for HTML 2.1. It includes four new demos, some improvements, and corrects several errors. There are three minor incompatible behavior changes.

In addition, there are new tutorial videos available online. We'll add more videos in the future.

Improvements

  • Calling a method that is not available because its required module is missing now throws an informative error message. Prominent examples are the LayoutExecutor.morphLayout and the IGraph.applyLayout methods which are only available if the view-layout-bridge module is loaded.
  • The EdgeRouter class now calculates a better routing for edges between group nodes and their descendants in the case that the routing is aborted via AbortHandler or when the maximum duration time limit is up. Previously, such edges might not have been handled in this case, whereas now they always get a simple but valid orthogonal route.
  • The HierarchicLayout class now respects the sequence and layering constraints between subcomponents. Previously, such constraints were ignored.

Bugfixes

  • The amount of time that may pass before a touch movement is considered a drag instead of a press is now correctly read from CanvasComponent.dragTime. Previously, the value of the CanvasComponent.longPressTime property was used instead.
  • The IOrientedRectangle.orientedRectangleCenter property didn't return the correct center if the width or height of the rectangle was equal to 0.
  • Moving an edge label with SmartEdgeLabelModel that is owned by an edge without visible path no longer throws an exception.
  • The behavior of the DefaultObservableCollection.clear method has been corrected. Previously, it always threw an error.
  • For template-based label and port styles, the binding context was not initialized early enough. As a result, these styles first created the DOM elements for the wrong, uninitialized vales and then updated them to the correct values.
  • The new CSS classes yfiles-selected, yfiles-highlighted and yfiles-focused for template-based styles were not always applied correctly at element creation time.
  • Removing an item that is currently highlighted with a custom HighlightIndicatorManager, FocusIndicatorManager, or SelectionIndicatorManager no longer results in an error.
  • Fixed a bug that resulted in an unresponsive input mode in Safari on iOS. This error happened only if the CollapsibleNodeStyleDecoratorRenderer.addToggleExpansionStateCommand method was used in a custom group node style.
  • The TypeScript definition files incorrectly required the implementation of some non-abstract properties in the quick-interface implementation constructors of some interfaces.
  • In EdgeRouter, an error occurred when there were intermediate routing points and the path search got aborted (e.g. because of maximum duration time limit).
  • In ShortestPaths, an error occurred when the a-star algorithm was applied to a graph with non-monotonic heuristic costs.
  • In HierarchicLayout, an error was triggered when a yfiles.algorithms.DataProviderAdapter that does not override the DataProvider.get method was registered with key GivenLayersLayerer.LAYER_ID_KEY. This issue only appeared in conjunction with subcomponents.

New and Improved Demos

UML Editor
An editor for UML diagrams that features a tailored UML node style, a custom automatic layout, and special pop-up menu to quickly add new connections of different types with the mouse and touch.
Rotatable Nodes
Shows nodes that can be rotated interactively by dragging a rotation handle. Labels and ports rotate with their node and edges clip perfectly at the rotated node bounds. Automatic layout can deal with rotated nodes, too.
Hierarchic Subcomponents
Hierarchic layout can now arrange selected subcomponents with a different style. This can be a tree, organic, or orthogonal style, or a hierarchic style with different settings than the main layout.
Critical Paths
In hierarchic and tree graphs, some paths can be more important than others. This demo shows how the hierarchic and tree layout styles align the nodes and edges of such important, or 'critical', paths to make them more striking.

Other Notable Demo Improvements

  • The context menu that is used in the demos is now an actual class and its menu items are real input elements. It now returns the focus to its graph component when closed and is easier to open with a touch long-press gesture.
  • The Image Export, PDF Export and Web Worker demos have been refactored to make it easier to re-use the code in other projects.
  • The GraphToJSON converter correctly parses bend locations and port locations now.

Changes of Default Behavior

  • The IGraph.setNodeLayout method and the various methods to create a node now throw an ArgumentError if the layout rectangle contains one or more NaN values. Similarly, the IGraph.setBendLocation and the various methods to add a bend to an edge now throw an ArgumentError if the location point contains one or two NaN values.
  • The ContextMenuInputMode.populateMenu event is now only fired if the current input mode state allows opening the context menu. Previously, the event was fired before the input mode had even checked whether another active input mode would prevent the opening of the menu.
  • The default value of DragSource.effectAllowed is now DragDropEffects.ALL instead of DragDropEffects.NONE. This was always the intended default value.

yFiles for HTML 2.1 - Changes Since 2.0.1.4

Major New Features

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

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

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

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

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

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

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

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

New Features

General

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

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

View

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

Layout

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

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

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

Improvements

General

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

Graph

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

View

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

Styles

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

Input

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

Table

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

Layout and Algorithms

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

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

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

Bugfixes

Graph and View

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

Input

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

Table

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

Layout

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

Incompatible Changes

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

Incompatible API Changes

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

Changes of Default Behavior

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

Minor Incompatible Changes

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

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

Most Notable Demo Improvements

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

yFiles for HTML 2.0.1.4 - Changes Since 2.0.1.3

This is the 4th bugfix release for 2.0.1. It includes more workarounds for browser bugs, brings support for passive event listeners, and corrects several errors. There is an incompatible change of the module dependencies.

Workarounds for Browser Issues

  • SVG rendering in Firefox can be slow due to a problem in Firefox's SVG rendering engine. This can be prevented by enabling the already existing workaround yfiles.workaroundCR320635 which was originally added for a Chrome bug (more information on browser issue workarounds).

    In addition, the rendering of SVGs that contain nested <svg> elements is slow, too. Such nested <svg> elements are not used in library styles and should be replaced with <g> elements in custom styles whenever possible.

  • In Edge 16 (Windows 10 Fall Creators Update), SVG <marker> elements may crash the current tab. The default demo styles use <path> elements instead of <marker> elements for arrows in this browser and custom styles should be changed in this way, too.

Find more details about these and other browser issues in the Known Issues document (of your local yFiles for HTML installation).

Improvements

  • Event listeners that invoke preventDefault are now registered with the option passive: false to conform to the new DOM spec and to prevent warnings on the browser's console.
  • Images which cannot be exported due to cross origin restriction are now replaced with a fallback image instead of throwing an error. Additionally, an optional 'strict' mode can be enabled which will cause the export to fail for these types of errors. The resulting errors can be caught in the export promise.

Bugfixes

  • In rare cases, ES6 classes that extend a yFiles class did not initialize correctly and threw errors on member access.

View

  • CanvasComponent: The value and the width of the scrollbar thumb sometimes were displayed incorrectly after the component was resized.
  • Fixed missing drop shadow of PanelNodeStyle.
  • ImageNodeStyle: The fallback image for an unresolved image is now correctly displayed in Internet Explorer.
  • The NodeStyleStripeStyleAdapter.updateVisual method always created a new visual by delegating to the createVisual method.
  • MoveViewportInputMode: The Dragging, Dragged, DragCanceling, DragCanceled, DragFinishing and DragFinished events did not fire reliably for touch input and when mouse inertia was active.
  • The ICommand.COPY command is no longer executed twice.
  • Fixed a bug in ViewportAnimation that sometimes moved the viewport a bit before the animation started.
  • Pen input was not handled at all on Android devices. Now, it is treated as mouse input.
  • In Internet Explorer, users could interact with the viewport indicator of the OverviewComponent even if the component was set to visibility="hidden".

Layout

  • HierarchicLayout: Fixed an error that occurred when both layering constraints and edge directedness (with HierarchicLayout.EDGE_DIRECTEDNESS_DP_KEY) were specified.
  • HierarchicLayout and SimplexNodePlacer: Fixed a rare error that could be triggered when the input graph had a partition grid and PortCandidates or PortConstraints.
  • HierarchicLayout better adheres to the specified maximum duration by applying a suitable runtime restriction to class PortCandidateOptimizer. Previously, this class didn't have any runtime restrictions.
  • HierarchicLayout creates better port assignments for edges incident to group nodes that are routed directly. Previously, such edges were often reversed.
  • HierarchicLayout no longer violates the specified PortCandidates of edges with labels with preferred placement specifier LabelLayoutConstants.PLACE_AT_SOURCE_PORT or LabelLayoutConstants.PLACE_AT_TARGET_PORT when using an orientation other than top-to-bottom.
  • HierarchicLayout with partition grid: Avoid unnecessarily large layer distances if an empty partition grid row with a minimum row height exists.
  • HierarchicLayout with partition grid: Avoid an error when the layout algorithm is configured to stop after the layering or sequencing phase (see HierarchicLayout.stopAfterLayering and HierarchicLayout.stopAfterSequencing).
  • EdgeRouter: Fixed an error that occurred for graphs with fixed edges and very short segments.
  • OrthogonalLayout: Fixed a rare bug that caused node-edge overlaps.
  • OrganicRemoveOverlapsStage better adheres to the specified maximum duration.
  • SeriesParallelLayout no longer misplaces edge labels for graphs with only a single edge.

Incompatible Change

  • The module yfiles/view-graphml no longer depends on yfiles/view-table and yfiles/view-editor. These dependencies were undocumented and unintended. If you use the GraphML feature and the table or editor feature, make sure to require the corresponding module(s) explicitly.

Notable Demo Improvements

  • Optimized several styles used in demos for better rendering performance in Firefox and iOS browsers. See the performance notices in the documentation for details and tips.
  • Context menus now open on iOS devices.
  • Enabled a workaround in the default demo styles that avoids a fatal error in Edge 16 (Windows 10 Fall Creators Update) that ultimately prevented the loading of the web page. For more details, see the Known Issues document (of your local yFiles for HTML installation).

yFiles for HTML 2.0.1.3 - Changes Since 2.0.1.2

This is the 3rd bugfix release for 2.0.1. It includes two workarounds for browser bugs, brings support for TypeScript 2.5, corrects several errors, and contains two new demos. There are no incompatible changes since 2.0.1.2.

Additionally, we have released a TypeScript migration tool on GitHub that helps with the migration of TypeScript files that reference yFiles for HTML 1.x API to the yFiles for HTML 2.x API.

New Demos

Decision Tree
An interactive decision making app with automatic incremental layout. You can explore the existing samples, and create or load your own decision tree.
Partition Grid
An interactive explorer for the PartitionGrid class. A partition grid distributes the nodes into rows and/or columns during an automatic layout. This can be used, for example, to realize layouts of graphs with swimlanes or tables.

Workarounds for Browser Issues

  • Safari 11 and all WebKit browsers on iOS 11 are affected by a rendering issue that causes missing or not correctly zoomed graph elements, seemingly broken user interaction, and other artifacts. This can be prevented by enabling the already existing workaround yfiles.workaroundCR320635 which was originally added for a Chrome bug. See the related Knowledge Base article for more information on enabling this workaround and the WebKit bug report for more details on the issue.
  • Added a workaround for a bug in Internet Explorer's implementation of Array.isArray with GWT. To enable the workaround, set the yfiles.workaroundIE7766782 variable to true (more information on browser issue workarounds).

Find more details about these and other browser issues in the Known Issues document (of your local yFiles for HTML installation).

Improvements

  • TypeScript: Made the typings provided by yfiles-api.d.ts compatible with TypeScript 2.5.
  • yfiles.styles.IArrow.NONE and yfiles.input.HandleTypes.INVISIBLE insert an empty <g> element into the DOM instead of an empty <use> element. The latter resulted in validation errors with exported SVG images in some SVG validators.

Bugfixes

View

  • In some cases, removing an event listener which was not created using yfiles.lang.delegate caused an error.
  • Creating an ES6 subclass of a subclass with overridden yFiles members resulted in incorrect run-time behavior when the lower subclass was instantiated before its super classes.
  • TouchEnter event: The value of the location property was not correct.
  • LayoutExecutor.stop() did not immediately stop the layout animation as it is supposed to.
  • MoveInputMode did not correctly recognize move interactions when triggered using touch gestures in Edge and Internet Explorer.
  • CreateEdgeInputMode fired gesture cancel events even if it was not started before.
  • DropInputMode: An error occurred if a DragEnter event was recognized while another drag action was still running.
  • StripeDropInputMode no longer calls itemCreator twice.
  • The StripeDropInputMode.ItemCreated event was not raised.
  • GeneralPath.IsVisible often returned true for invisible paths.

Layout

  • OrthogonalLayout: Fixed rare bug that caused overlapping nodes.
  • OrthogonalLayout: Improved from-sketch mode in conjunction with node labels or node halos. Previously, in the presence of the mentioned elements, the layout results did not always correctly resemble the sketch drawing, even if it was a good sketch.
  • HierarchicLayout: Fixed edge ports lying outside the node boundaries when using the edge thickness feature (i.e. edges with thickness greater than zero) together with a (rather large) grid spacing value and the default port assignment PortAssignmentMode.DEFAULT.

Notable Demo Improvements

  • Improved printing support to prevent the initial print document from being empty in some browsers.
  • Flowchart node style: The updateVisual() method now correctly handles changes of the flowchart type of a node.
  • The demos use larger values for the dragSize and the hitTestRadius if the input device is a touch device.

yFiles for HTML 2.0.1.2 - Changes Since 2.0.1.1

This is the 2nd bugfix release for 2.0.1. It includes some improvements, corrects several errors, and brings a large number of new demos. There are two incompatible behavior changes since 2.0.1.1.

New Demos

Flowchart Editor
An editor for Flowchart diagrams that features interactive editing, tailored Flowchart node styles, and a specialized layout algorithm.
Tree Layout Demo
Shows how to use different node placers with the automatic tree layout.
Clustering Algorithms Demo

Showcases a selection of clustering algorithms:

  • Edge Betweenness Clustering
  • k-Means
  • Hierarchical Clustering
  • Biconnected Components Clustering
Neo4j Demo
Shows how to load data from a Neo4j database and display it with yFiles for HTML.
CSS3 Animations and Transition Demo
Shows how CSS3 transformations and animations can be applied to graph items.
Edge Bundling Demo
Shows edge bundling which reduces visual clutter in dense graphs.
Node Label Placement Demo
Shows how to place edge labels at the preferred location with a labeling algorithm.
Edge-to-edge Connections Demo
Shows how edge-to-edge connections can be realized. More precisely, it shows how to configure the input mode to allow edges to be connected not only to nodes but also to other edges.
Move Unselected Nodes Demo
Shows a special input mode that allows moving nodes without selecting them first.

Improvements

  • Improved performance when the webcomponents.js polyfill for the Shadow DOM API is used.
  • FilteredGraphWrapper can now deal with node and edge predicates that evaluate to truthy or falsy values. Previously, predicates that did not strictly return true or false resulted in an error with messages like "Node not in this graph".
  • SvgExport: 'id' attributes are now copied to the wrapping <g> element of inlined images. This retains the possibility for the image to be referenced in the exported SVG document. This frequently occurs if the inlined image is part of the <defs> section of an <svg> element.

    By default, SvgExport modifies the copied 'id' attributes to make sure they are unique. This behavior can be switched off with the new property SvgExport.ensureUniqueIds.

  • TypeScript: The static isInstance method of all yFiles classes and interfaces is now part of the typings and specified as user-defined type guard function to avoid superfluous type casts and improve coding experience in IDEs.
  • TypeScript: The typings now use any instead of Object for property types and method parameters to allow usage of primitive types. Most prominently, the ITagOwner.tag property can now be set to a string value without explicitly casting it to any.
  • Developer tool for type checking: Made error messages for wrong method parameters more clear.

Bugfixes

View

  • During reparenting, the edges at reparenting nodes were drawn below the group(s) and thus they were not visible. If reparenting was canceled, these edges stayed behind the group(s) and remained invisible.
  • The promise returned by GraphEditorInputMode.addLabel and TableEditorInputMode.addLabel now fulfills with null instead of the label if the editing was canceled or the text did not validate. This is the documented behavior.
  • CreateEdgeInputMode did not always start correctly for quick gestures on slow devices.
  • CreateEdgeInputMode did not trigger the EdgeCreationStarted event for programmatic initialization of the edge creation gesture.
  • Setting CreateEdgeInputMode.cancelRecognizer could potentially get the input mode into a broken state.
  • In the unusual case that a validBendHitTestable is used, CreateEdgeInputMode will no longer cancel edge creation when using touch and trying to create a bend at an invalid location. Therefore, touch input behaves now in the same way as mouse input.
  • Fixed a possible error in NodeDropInputMode when snapping is enabled and preview is disabled.
  • Drag and drop did not work if the GraphComponent was in a shadow DOM.
  • Changing HandleInputMode.pressedRecognizerTouch had no effect if the input mode was already installed.
  • HandleInputMode.currentHandle could not always be obtained during the DragFinished, DragFinishing, DragCanceling, and DragCanceled events.
  • Switching the GraphComponent's inputMode in a key event handler threw an exception.
  • The 'S' and 'T' keys are now correctly reported as these keys by the KeyEventArgs.key property. Previously, they were swapped, 'S' was reported as 'T' and vice versa.
  • FreeLabelModel.INSTANCE, FreeEdgeLabelModel.INSTANCE, and FreeNodeLabelModel.INSTANCE are now serialized correctly to GraphML even when not used as part of their parameters (e.g. within CompositeLabelModel).
  • Labels with NinePositionsEdgeLabelModel now disappear when the owner edge has no visible edge path. This can happen for example when nodes are moved onto each other. Previously they appeared at unexpected locations, including the origin (0,0) and the upper left corner of the source node.
  • GeneralPath.getTangent now returns null if there is no tangent at the requested position. Previously, it returned a bogus tangent.
  • Prevent errors with the message "TypeError:Attempting to change access mechanism for an unconfigurable property" in Safari 10. This error was thrown when a constructor was declared using the yFiles class framework in code that was not using "strict-mode".
  • In Safari for macOS, changed the default shortcut for the Toggle Item Selection command from Command+Space to Control+Space. Command+Space is reserved for Spotlight.
  • The last row and column of the grid were sometimes not display, especially after zooming and panning.
  • Creating subclasses of subclasses with abstract yFiles members using the class framework resulted in incorrect runtime behavior when the lowest subclass was instantiated first.
  • GraphMLSupport.openFile: After a user canceled the file open dialog once, promises returned by this method stayed always in pending state and were never fulfilled.
  • GraphML: Writing an item's tag threw an error if a value was an array.
  • GraphML: The TextTrimming enum was erroneously obfuscated by the deployment tool and, as a result, the obfuscated name could have been used in GraphML files in rare cases. Reading such a file with a new build of your app resulted in an error since the obfuscated name had likely changed.
  • The following static methods internally called the wrong code and always threw an error: IAnimation.createTableAnimation, ITable.getCellBounds, and ITable.placeNodeInCell.

Layout

  • HierarchicLayout: PropertyHierarchicLayout.componentArrangementPolicy was not correctly considered when there are undirected edges.
  • Tree layout: DefaultNodePlacer.minLastSegmentLength erroneously returned the value of minFirstSegmentLength.
  • Tree layout: Prevent a memory leak in DefaultPortAssignment.
  • If PartialLayout.edgeRoutingStrategy was set to STRAIGHTLINE, all edges were rerouted in the graph, instead of just the ones that were required.
  • EdgeRouter: The minimum first and last segment length were sometimes not respected if they were set to relatively large values.
  • OrthogonalLayout: Fixed rare bug that caused non-orthogonal line segments and bad port locations.

Incompatible Changes

  • CreateEdgeInputMode now triggers the EdgeCreationStarted event for programmatic edge creation with the doStartEdgeCreation method.
  • The 'S' and 'T' keys are now correctly reported as these keys by the KeyEventArgs.key property. Previously, they were swapped, 'S' was reported as 'T' and vice versa.

yFiles for HTML 2.0.1.1 - Changes Since 2.0.1

This is the 1st bugfix release for 2.0.1. It includes some improvements, corrects several errors, and brings a large number of new demos. There are no incompatible changes since 2.0.1.

New and Improved Demos

Fraud Detection Demo
A demo application that shows how to detect fraud cases in time-dependent data.
Isometric Drawing Demo
Displays graphs in an isometric fashion to create the impression of a 3-dimensional view.
Logic Gates Demo
An editor for digital systems consisting of logic gates.
WebComponents and Vue.js Demos
Show how yFiles for HTML can be used with Web Components v1 and Vue.js, respectively.
Sankey Demo
Illustrates a diagram used for visualizing flow information in which the thickness of the edges is proportional to the flow quantity.
Maze Router Demo
Shows how the automatic edge routing finds routes through a maze.
Mixed Layout Demo
Shows how to apply different layouts to the contents of group nodes with the RecursiveGroupLayout.
Partial Layout Demo
Shows how to integrate (new) graph elements into an existing graph layout.
Layer and Sequence Constraints Demos
Show how to use layer and sequence constraints to prescribe and restrict the node layering and sequencing in hierarchic layouts.
Custom Label Model and Port Location Model Demos
Show how to create and use a custom label model and a custom port location model, respectively.
Label Editing and Label Handle Provider Demos
Show customizations of the interactive editing, resizing and rotating of labels.
Notable Demo Improvements
  • Graph Viewer Demo: Added a search box to query the desired term within the labels of the nodes of the graph.
  • BPMN Editor Demo: Prevent the creation of dangling edges when connecting to pool nodes with SHIFT pressed.
  • Neighborhood View Demo: Prevent redundant layout calls when selecting multiple graph items.
  • Context Menu Demo: Now supports the longpress event on iOS devices.
  • Image Export Demo: Added two workarounds for problems with Internet Explorer and current Firefox versions, respectively.

Improvements

  • Improved rendering performance mostly in Chrome. In bad case scenarios, the frame rate now is up to three times as high.
  • InteractiveOrganicLayout: Significant performance improvements during interactive changes of the graph, for example when a user moves nodes.
  • Input modes that use a combination of mouse gestures and modifier key(s) can now be started by the key press. Previously, such an input mode was only started by the first mouse event, e.g. a mouse move. The main benefit is that the cursor changes instantly with the key down to the input mode's one.
  • CanvasComponent: Overridable methods maybePreventPointerDefault and maybePreventContextMenuDefault have been added to control which event's default behavior should be prevented by the component.
  • Added the alias yfiles.lang.Interface for yfiles.lang.Trait. Interface is the intended name since 2.0 and most documentation was already referring to Interface instead of Trait. Note that we keep yfiles.lang.Trait for compatibility reasons for now.

Bugfixes

View

  • The event StripeDropInputMode.StripeCreated always returned a wrong stripe instance.
  • The EditLabel command was not working directly on labels when a TableEditorInputMode was active.
  • TableLayoutConfigurator erroneously considered labels on the left side as top labels, and consequently might have created insets of incorrect size.
  • GraphML: Fixed deserialization of empty XML label nodes.

Layout

  • HierarchicLayout: Fixed bug that caused node-edge overlaps in conjunction with some complex edge grouping specifications.
  • OrganicLayout, ClassicOrganicLayout and InteractiveOrganicLayout: Fixed error that was triggered due to NaN values that could occur in case the input graph had a very large number of nodes.
  • EdgeRouter: Fixed bug that caused violations of minimum first/last segment lengths of grouped edges when using different edge layout descriptors and, second, made the layout algorithm remove a user-registered DataProvider with key EdgeRouter.EDGE_LAYOUT_DESCRIPTOR_DP_KEY.
  • EdgeRouter: Fixed rare node overlaps in conjunction with monotonic path restrictions.
  • RecursiveGroupLayout: Fixed bug that caused edges to share the same port even though they should have been assigned to different ports. Note that this problem only appeared if the core layout algorithm was an instance of class HierarchicLayout.
  • IsolatedGroupComponentLayout: Fixed bug that caused edge labels that intersected with group nodes even though option ComponentLayout.considerLabels was enabled.
  • ComponentLayout , IsolatedGroupComponentLayout, and BusRouter: Fix a problem with rounding that could result in erroneous layouts in rare cases.

Documentation Viewer Improvements

  • The detailed descriptions of the methods for event registration and de-registration were not displayed.
  • The inheritance hierarchy of a type was not properly displayed.
  • In the code generator, corrected the generated code for events.
  • Fixed the display of the sidebar in pinned mode.
  • The documentation viewer can now be opened from the file system even if third-party cookies are disabled.

yFiles for HTML 2.0.1 - Changes Since 2.0.0.1

This maintenance release for yFiles for HTML 2.0 contains several brand-new demos, brings back most demos that were part of yFiles for HTML 1.3 but not of 2.0, and the GWT extension is available again. In addition, we corrected several errors and included small improvements.

There are a small number of incompatible API changes.

New Demos

Business Process Model Demo
An editor for Business Process Diagrams that features interactive editing, BPMN node styles and a specialized BPMN layout algorithm.
Network Monitoring Demo
Example of a monitoring tool for computer networks.
Network Flow Demo
Presents three network flow graph analysis algorithms that are applied on a network of water pipes. Flow algorithms can be applied to various other problem domains from everyday life, for example electricity/power, internet, and transportation.
Transitivity Demo
Shows how transitivity graph analysis algorithms can be applied to graphs to answer reachability questions. The demo presents two example graphs: the dependencies between the yFiles for HTML modules and the dependents and the dependencies of an npm package.
Mindmap Demo
A Mindmap viewer and editor.
React Demo
Shows a React component that renders the yFiles for HTML graph component.
Loading and Bundling Demos
  • AMD Loading: Loads the yFiles module resources using the require function that is defined in the AMD loading standard.
  • Script Loading: Loads the yFiles modules using <script> tags instead of an AMD loader.
  • Browserify: Shows how to bundle the yFiles library in a Browserify project.
  • webpack: Shows how to integrate the yFiles library in a webpack 2 project.
Demos Migrated from yFiles for HTML 1.3
  • The Edge Label Placement demo shows how to place labels at the desired location with an automatic edge labeling algorithm.
  • The Multi-Page Layout demo shows how this layout algorithm divides a large graph into several smaller graphs that each fits on a page.
  • The GraphML demo provides a live view of a graph's GraphML representation.
  • The Bridges demo shows edges with bridges that highlight the edge routes at intersection points.
  • The Clipboard demo shows different ways of using GraphClipboard for copy and paste operations.
  • The Context Menu demo shows context menus for nodes, other graph items, and the canvas background.
  • The Drag and Drop demo shows how to enable drag and drop from a separate palette of node templates into the graph component.
  • The File Operations demo shows various ways to open and save a graph to a GraphML file.
  • The Data Table demo shows a node style and a label style that display data in a tabular fashion.
  • The HTML Label Style demo shows how HTML markup can be used in labels with a custom label style implementation.
  • The jQuery Sparklines demo shows how to integrate visualizations generated by a third-party library with a custom node style.

Improvements

View

  • Added a yfiles_namespace type definition to the yfiles-api.d.ts file. This can be used to annotate the return value of the yFiles modules to improve code completion in IDEs like Visual Studio Code.
  • Added a constructor for RGBA color values to SolidColorFill, Stroke and GradientStop.
  • CreateEdgeInputMode now respects the settings snapBendsToSnapLines and snapBendAdjacentSegments of GraphSnapContext. It also handles grid snapping according to the configuration for snapping.
  • Resizing a table row or column now respects the value of the GraphEditorInputMode.adjustContentRectPolicy property.
  • Nodes are now always drawn above their target group during reparenting.
  • Fixed some incorrect usages of errors in IGraph.
  • GraphMLIOHandler has two new events, QueryType and QueryName, that allow fine-grained control over XML namespace writing and parsing for certain types.
  • Added the property Exception.innerException which preserves the original exception if it was wrapped and re-thrown.

Layout

  • The method LayoutExtensions.applyLayout now supports layouting tables.
  • BalloonLayoutData, HierarchicLayoutData, LabelingData, OrthogonalLayoutData, SeriesParallelLayoutData, and TreeLayoutData now have an edgeLabelPreferredPlacement property which supports an ItemMapping for edge labels to provide a PreferredPlacementDescriptor. This can replace mappers registered with the key LayoutGraphAdapter.EDGE_LABEL_LAYOUT_PREFERRED_PLACEMENT_DESCRIPTOR_DP_KEY.
  • PartitionGridData: It is now sufficient to specify one of row mapping and column mapping. The unspecified one will automatically be set to 0, resulting in a single row or column being used.
  • The ItemMapping.mapper property is now automatically set on first read-access to the property, enabling more convenient use of the mapper without first having to instantiate a matching instance.
  • HierarchicLayout: Slightly reduced the number of bends when integrated edge labeling is enabled.
  • HierarchicLayout: Fixed unstable from-sketch behavior for non-default layout orientations when group nodes are folded or expanded. Applies to orientations LayoutOrientation.LEFT_TO_RIGHT, LayoutOrientation.RIGHT_TO_LEFT and LayoutOrientation.BOTTOM_TO_TOP. Geometry information registered with data providers with keys HierarchicLayout.ALTERNATIVE_GROUP_BOUNDS_DP_KEY and HierarchicLayout.ALTERNATIVE_EDGE_PATH_DP_KEY is now automatically rotated according to the specified layout orientation.

Demos

  • Layout Styles demo: Added special substructure detection for organic layout (e.g., cycles, chains, stars, and parallel substructures).
  • Hierarchic Grouping demo: Improved the stability of the layout.

Bugfixes

General

  • Fixed rest arguments not working when named option parameters where used and debug type information was present at runtime.
  • Fixed ES6-style subclassing of yFiles classes that implement additional interfaces.
  • Added the flag yfiles.workaroundIE7766782 that enables a workaround for the Internet Explorer JIT bug 7766782, which can cause class initialization errors when using the yFiles for HTML GWT Overlay in Internet Explorer, especially when the GWT Overlay is used in combination with Smart GWT (more information on browser issue workarounds).

View

  • Fixed missing browser prefix of certain cursors.
  • Fixed visibility of scrollbar handles of CanvasComponent. The handles were not displayed for ScrollBarVisibility.ALWAYS.
  • Added the flag yfiles.workaroundCR701075 that enables a workaround for occasional render issues in Chrome 57. This is due to Chrome 57 not properly rendering the applied transform matrix (more information on browser issue workarounds). The workaround is automatically enabled in the yFiles demo applications when opened in Chrome 57.
  • CanvasComponent: Key events had no effect if the component was part of a shadow DOM. The component's div element always lost the focus on keydown.
  • GraphModelManager didn't update the child groups if a new ContentGroup was set.
  • Fixed a problem that caused the viewport of GraphOverviewComponent being set to an incorrect value when the component was resized.
  • GraphOverviewControl: Setting a new OverviewInputMode now updates the InputMode property accordingly.
  • Instances of GraphEditorInputMode and GraphViewerInputMode were not garbage collected due to a non-removed event listener in the clickInputMode.
  • CreateEdgeInputMode had a broken edge preview after the input mode was uninstalled and reinstalled again.
  • CreateEdgeInputMode didn't show the edge preview for edges between a node and one of its ancestors.
  • Fixed several issues with orthogonal edge editing.
    • When dragging the source/target port/node of an orthogonal edge, the bends created during the drag were not cleaned up after canceling the gesture by pressing the ESC key.
    • Orthogonal edges could be made non-orthogonal by re-connecting the source port to the target port location (creating a self-loop), or vice versa.
  • Fixed reparent highlighting when multiple nodes are reparented together.
  • Fixed a bug in the DropInputMode which prevented proper assignment to a specific drop data type.
  • Fixed a bug in StripeDropInputMode that could result in nodes being moved to a wrong stripe when a new stripe was created or an existing one relocated.
  • Hiding INodeSnapResultProvider or IBendSnapResultProvider from the lookup no longer leads to a crash when nodes or bends are moved.
  • The parameter finder of FreeEdgeLabelModel could not place the label correctly for self-loops. Labels always appeared at the port location in this case.
  • SmartEdgeLabelModel: Once again, labels at the first segment snap properly at the layout of the source node. Since 1.3.0.6, some snap positions were overlapping with the source node.
  • SmartEdgeLabelModel: Edge label snap lines have been too short for some positions that are far away from the edge path.
  • SmartEdgeLabelModel: An exception was thrown if the path of the corresponding edge contained bends that were close together or at the same location.
  • Fixed incorrect default value attribute for SandwichLabelModel parameters.
  • When a node and its parent group node were both selected and moved with the SHIFT key held down the node was erroneously reparented to the root.
  • Fixed a bug that resulted in folders with empty size when manually creating groups and the folding view is configured to collapse group nodes by default.
  • IGraph.addLabel ignored an explicitly specified preferred size if folding was enabled.
  • FilteredGraphWrapper no longer re-checks its predicates when labels or ports are removed nor when properties of graph items are changed. This prevents inconsistent filtering when the filtering predicate changed recently and changes are made to the graph before nodePredicateChanged or edgePredicateChanged have been called.
  • Some styles erroneously called IRenderContext.childVisualRemoved after the visual was removed instead of just before the removal.
  • Fixed dispose callback invocation of custom visuals.
  • PolylineEdgeStyle: Toggling the pen between dashed and solid styles did only work once. Then, the SVG path stayed at solid regardless of the pen's dash style.
  • Fixed missing TemplateBindings for labelText, isFlipped and isUpsideDown for styles of type TemplateLabelStyleBase.
  • Fixed a bug that might occur when changing wrapped styles in CollapsibleNodeStyleDecorator, ShadowNodeStyleDecorator, NodeStyleLabelStyleAdapter and NodeStylePortStyleAdapter.
  • Rendering of BevelNodeStyle inset rectangle position was wrong when inset value was changed.
  • Fixed icon placement in IconLabelStyle.
  • Fixed uncaught errors in promises during GraphML loading despite providing reject handlers.
  • GraphML: Actually uses namespaces that have been registered with GraphMLIOHandler.addNamespace.
  • GraphML: Enum values that are used across different yFiles platforms are written in PascalCase instead of all upper case with underscores.
  • GraphML: Enum values are not written as shared reference anymore.
  • GraphML: Updated GraphML schema location.
  • Explicit Arrow elements in GraphML were sometimes read back incorrectly. The new deserialization property SerializationProperties.parseArrowElementAsDefaultArrow can be used to work around this issue.
  • Fixed exception when calling OrientedRectangle.resize with a size.

Layout

  • Fixed OrganicLayout ignoring the groupNodeMode settings.
  • Fixed null reference errors in some of the LayoutData implementations that could happen if some of the mappings where accessed but were never really used in client code.
  • AspectRatioTreeLayoutData did not register the correct values with the graph for the root placement and the subtree routing policy.
  • AspectRatioTreeLayout.ROOT_PLACEMENT_DP_KEY is now of type NodeDpKey<RootPlacement>.
  • AspectRatioTreeLayout.SUBTREE_ROUTING_POLICY_DP_KEY is now of type NodeDpKey<SubtreeArrangement>.
  • HierarchicLayout: Fixed bug that may lead to too large group nodes if there are grouped edges.
  • HierarchicLayout: Fixed bug that sometimes caused superfluous bends in edge routes when integrated edge labeling was enabled.
  • HierarchicLayout: Fixed bug that caused that the directedness of edges incident to groups wasn't considered correctly (see HierarchicLayout.EDGE_DIRECTEDNESS_DP_KEY).
  • OrganicLayout and ClassicOrganicLayout: Fixed bug that caused the algorithm to not consider the specified custom GroupBoundsCalculator.
  • MultiPageLayout: Fixed rare bug that sometimes caused straight-line edge routes instead of orthogonal routes.
  • CircularLayout and RadialLayout: Fixed bug that caused that always all edges were bundled if bundling is enabled for at least one single edge. More precisely, property EdgeBundleDescriptor.isBundled wasn't considered correctly.
  • SingleCycleLayout: Fixed bug that could lead to an error if edge bundling is enabled and a custom node sequencer is specified.
  • CircularLayout: Fixed bug that in some cases produced self-intersecting edges when edge bundling is enabled.
  • EdgeRouter: Fixed rare error that was triggered when having multiple target port candidates, where at least one must be fixed. Furthermore, to trigger the exception it is necessary that the path search algorithm tries to perform an early exit due to maximum duration restrictions or a stop request via AbortHandler.

Incompatible Changes

Breaking API Changes

  • LabelStyleDecorationInstaller, NodeStyleDecorationInstaller and SvgExport: Renamed property margin to margins.
  • Renamed method IconLabelStyleRenderer.getInnerStyleInsets to getWrappedStyleInsets.
  • Renamed the following protected methods to enable separate overrides in custom subclasses
    • GraphInputMode.marqueeSelect(IInputModeContext, Rect) to onMarqueeSelect
    • GraphInputMode.marqueeSelect(IInputModeContext, Rect, IEnumerable, Predicate) to onMarqueeSelectItems
    • NavigationInputMode.setCurrentItem(GraphComponent, IModelItem) to onSetCurrentItem
    • GraphClipboard.copy(IGraph, Predicate, IGraph, INode, Callback) to onCopy
    • GraphClipboard.paste(IGraph, Predicate, IGraph, INode, Callback, Predicate) to onPaste
  • Removed property InteractiveOrganicLayout.automaticStructureUpdate since this couldn't be used with LayoutExecutor or LayoutGraphAdapter.
  • Removed property CanvasComponent.enabled since it had the same effect as the autoDrag property.
  • Removed property CanvasComponent.autoMouseWheelZoom since it had no effect anyway. It was replaced by the mouseWheelBehavior property in release 2.0.
  • Removed property CanvasComponent.editable since it had no effect on almost all input modes anyway. The preferred way to disable editing is using GraphViewerInputMode or GraphEditorInputMode with suitable settings.
  • Removed unused enum yfiles.router.ChannelOrientation.
  • VisualCachingPolicy.ALWAYS replaces both VisualCachingPolicy.WEAK and VisualCachingPolicy.STRONG. These two had the same effect.
  • Removed optional constructor initialization parameters of type Object. Affected are the tag / styleTag constructor parameters of DefaultGraph and the template styles.
  • Changed some API members of the yfiles.graphml.Property type which is very rarely used in customer code.

Behavior Changes

  • IGraph and its implementations now always throw an ArgumentError for operations on elements which are not in the graph (was: ArgumentError, ArgumentOutOfRangeError, IllegalOperationError).
  • IGraph and its implementations now always throw an IllegalOperationError for operations which are not allowed (was: ArgumentError).
  • GraphML parsing: For properties which are renamed using the GraphMLAttribute only the explicitly set name is accepted. The property's actual name is no longer accepted as fallback.
  • HierarchicLayout may now place source/target labels in layers that contain common nodes. In previous versions such labels were always placed in separate layers which often led to less compact drawings with superfluous bends.
  • SingleCycleLayout.nodeSequencer now allows to specify null to return to the default sequencer. In previous versions, specifying null led to an error.
  • HierarchicLayout: Geometry information registered with data providers with keys HierarchicLayout.ALTERNATIVE_GROUP_BOUNDS_DP_KEY and HierarchicLayout.ALTERNATIVE_EDGE_PATH_DP_KEY is now automatically rotated according to the specified layout orientation. This fixes unstable from-sketch behavior in incremental layout mode when using an orientation other than top-to-bottom.

yFiles for HTML 2.0.0.1 - Changes Since 2.0

This is the first bugfix release for 2.0. It focuses on new demos, performance improvements, and bugfixes. It contains one minor incompatible API change and two incompatible interaction behavior changes.

Most Notable Changes

Better Layout Performance
Performance improvements for most layout and analysis algorithms. Most layout algorithms are now between 15% and 70% faster than their 1.3 version counterparts. Speed-up varies depending on graph structure, settings, and graph size.
Better GraphML I/O Performance
Up to 80% improved writing performance and 25% improved reading performance in bad-case scenarios.
Style Decorators Demo
This demo shows decorator styles for nodes, labels, and edges that add a visual decoration to a base visualization, for example a status icon to a rectangular shape.
Incremental Hierarchic Demo
This demo shows the incremental mode of the hierarchic layout algorithm.
HTML Popup Demo
This demo shows pop-up panels that display additional information about a clicked node or edge. In general, such panels can contain any HTML elements.

Improvements

  • The class framework now also understands classes generated by the TypeScript compiler if the compiler target is ES5.
  • SvgVisual now has two static members for helping with the efficient implementation of SVG transform manipulations: SvgVisual.setTranslate and SvgVisual.setScale
  • The performance of StripeControlStyle was improved substantially.
  • The AMD meta modules now only ever load the effective modules, resulting in less requests made for AMD loading.
  • The simple Promise shim included with the library now allows for chaining .catch calls.
  • The yfiles-typeinfo.js debug helper code now adds the yfiles.debug() API.
  • On MacOS, the multi-selection feature, the pan viewport feature, and the force bend creation feature now also accept Command mouse clicks as an alternative gesture. This avoids conflicts with the default gesture to open the context menu, namely Ctrl mouse clicks.
  • The default keyboard shortcuts for MacOS devices have been updated to follow MacOS conventions. Where previously the Ctrl key needed to be pressed for many of the default keyboard shortcuts, now the Command key will be used.
  • The default keyboard shortcuts for cut, copy, and paste have been updated to also react to Shift+Delete, Ctrl+Insert, and Shift+Insert respectively. The exact behavior can be fine-tuned via resource customization.

Demo Improvements

  • The require.js sample implementation for the demos now properly understands the AMD paths configuration known from requirejs.org's implementation.
  • In most demos, all JavaScript initialization code was moved to the main JavaScript file from the index.html file. Note that if our simple require implementation is used for loading the demos, the improved version of the same file is required now, too.
  • The demos now show a friendly warning if viewed in a browser that does not natively support ES6. It explains how to run the required pre-compilation step, first.
  • The performance of the graph item styles used in the demos was improved.
  • Visualization of self-loops of the demo edge style was improved.
  • The layout style demo now show-cases the integrated edge-labeling feature for tree layouts.
  • Many more fixes and improvements in the demos.

Bugfixes

  • Loading a new GraphML file could result in an error when loading was initiated from inside a folder node.
  • Table columns were read in the reverse order from GraphML. The file content itself is correct since GraphML writing was not affected.
  • Subclassing yFiles types did not work properly for the second level of subclasses.
  • Subclassing a yFiles type with abstract members and implementing interfaces at the same time did not work.
  • Using folding on a filtered graph could result in errors, for example after calculating an automatic layout.
  • The TypeScript demo did not properly compile if tsc's noImplicitAny option was set.
  • GraphML serialization of ArcEdgeStyle did not work properly.
  • The JavaScript code completion file in ide-support did not properly mark constructors for generic types, possibly resulting in warnings in IDEs.
  • The simple Promise shim included with the library could throw an error during promise resolution.
  • Calling contains(p:Point) on an IRectangle other than a Rect did not work.
  • The simple constructor of MapperInputHandler did not set the value type correctly.
  • CircularLayout produced self-intersecting edges when edge bundling was enabled.

Incompatible Changes

  • The three static helper methods on GraphItemTypes were poorly named and the method contains did not behave according to the documentation. contains is now called enumerableContainsTypes, notContains is now called enumerableNotContainsTypes, and is is now called itemIsOfTypes.
  • On MacOS systems where previously the Ctrl key needed to be pressed for many of the default keyboard shortcuts, now the Command key will be used instead. This behavior can be fine-tuned via resource customization.
  • Default keyboard shortcuts for cut, copy, and paste now also react to Shift+Delete, Ctrl+Insert, and Shift+Insert respectively. This behavior can be fine-tuned via resource customization.

yFiles for HTML 2.0 - Changes Since 1.3.0.5

Major New Features Added

  • The whole API has been thoroughly reviewed and refactored resulting in a massively improved user/developer experience. New features can be understood more quickly and are easier to implement on top of the existing APIs. Consistent API names and hierarchies can be memorized more easily. Infrequently used and inconvenient APIs have been removed from the public API which means a leaner framework. This results in a much improved learning curve.
  • Improved the overall JavaScript experience throughout the API with function overloads, optional arguments, and option parameter objects. This adds more flexibility while at the same time enhances developer productivity.
  • The API´s compatibility to third party class frameworks was improved, enabling convenient and efficient use of EcmaScript 6 and TypeScript classes. Not having to use the old class-framework anymore improves tooling support and enhances developer productivity.
  • The API supports modern EcmaScript concepts and types like Promises and a collections API that is inline with the most recent EcmaScript Array and Iterable API.
  • The performance of the view component has been improved on average between 20% and 35% for larger graphs where previously 60 FPS could not be achieved.
  • The developer's guide has been rewritten and revised almost entirely. A lot more code examples and a whole set of new chapters that deal with the customization of the various features provided enable developers to more easily and more quickly implement their requirements. The layout documentation now also contains sample graphs that visually show the effects of the various settings.
  • The yFiles modules have been restructured and are now smaller in total size. The complete layout demo now requires only slightly more than 1.5 megabytes of compressed code to be transferred to the client when loaded for the first time. In addition to that module dependencies have been optimized so that for many use-cases less modules need to be loaded for an application to work, resulting in quicker overall startup times.
  • Support for Sankey diagrams. These diagrams visualize flow quantity between entities, for example cost or energy flow.
  • Support for edge bundling. Bundling together multiple edges means that their common parts are to some degree merged into a bundled part. Edge bundling is useful to increase the readability of graph drawings with a high number of edges that connect a comparably small number of nodes. The following layout algorithms support edge bundling:
    • Circular Layout: Edge bundling is applied to edges of the same circle.
    • Radial Layout: Edge bundling is applied to non-tree edges.
    • TreeReductionStage: Edge bundling is applied to non-tree edges.
  • HierarchicLayout has now proper support for incremental layouts of groups with changing bounds. This is especially useful for hierarchic layout of graphs with expandable and collapsible groups. The new Hierarchic Grouping demo shows the improved behavior.
  • HierarchicLayout now supports port grouping. Edges are bundled at their ports, but routed independently. See PortConstraintKeys.SOURCE_PORT_GROUP_ID_DP_KEY and PortConstraintKeys.TARGET_PORT_GROUP_ID_DP_KEY.
  • HierarchicLayout now allows to specify the directedness of edges, see HierarchicLayout.EDGE_DIRECTEDNESS_DP_KEY. This new feature enables to, for example, support mixed graphs that contain both directed and undirected edges: While for directed edges the layering step tries to find a solution where the source of an edge is placed above the target (with respect to the main layout direction), for undirected edges the direction doesn't matter and the edge may also be inserted as same-layer edge. This feature also enables to force some edges to specifically point against the main layout direction.
  • HierarchicLayout now supports edges with specified thickness values. Minimum distances in the layout will consider these thicknesses, see HierarchicLayout.EDGE_THICKNESS_DP_KEY.
  • HierarchicLayout now supports recursively routed edges. Edges that pass the border of group nodes will always leave at the bottom side and enter at the top side of the group node. This routing style is specified using EdgeLayoutDescriptor.RecursiveEdgeStyle.
  • Added preferred placement specifiers LabelLayoutConstants.PLACE_AT_SOURCE_PORT and LabelLayoutConstants.PLACE_AT_TARGET_PORT for edge labels which express that the label should be placed directly at the source/target port of the edge. Currently, the specifiers are only considered by the integrated labeling of the HierarchicLayout.
  • OrganicLayout now supports the detection of regular substructures in the graph and applies a specific layout style to them such that they can be better recognized. See OrganicLayout.ChainSubstructureStyle, OrganicLayout.StarSubstructureStyle, OrganicLayout.CycleSubstructureStyle, and OrganicLayout.ParallelSubstructureStyle.
  • TreeReductionStage now supports the automatic placement of labels of non-tree edges. Users do not need to take care of such edge labels themselves after using a tree layout algorithm on a non-tree input graph in conjunction with the reduction stage. See properties TreeReductionStage.NonTreeEdgeLabelingAlgorithm and TreeReductionStage.NonTreeEdgeLabelSelectionKey.
  • SeriesParallelLayout now supports the automatic placement of labels of non-series-parallel edges. Users do not need to take care of such edge labels themselves after running the algorithm with a non-series-parallel input graph. See properties SeriesParallelLayout.NonSeriesParallelEdgeLabelingAlgorithm and SeriesParallelLayout.NonSeriesParallelEdgeLabelSelectionKey.
  • New API for working with the planar embedding of planar graphs. The API allows for easy iteration of the faces, darts, and consecutive edges of the embedding.

Major New Demos Added

  • The 2.0 release contains a sophisticated new demo that shows the graph analysis features provided by yFiles for HTML. This demo also shows how to use modern CSS animations and transitions to achieve a better user experience.
  • All provided demos have been refactored to not make use of the old demo framework anymore, making it much easier to reuse code from the demos in custom applications.
  • The demos have been rewritten using EcmaScript 6 and a conversion tool has been added that shows how to code in EcmaScript 6 and deploy to older browsers (only Internet Explorer is affected) that do not support this level of EcmaScript.

yFiles for HTML 1.4.0.1 - Changes Since 1.4

This is the 1st bugfix release for 1.4. There are no incompatible changes since 1.4.

Note that the improvements and bugfixes of this release are part of yFiles for HTML 2.0.1.1, too.

Improvement

  • Input modes that use a combination of mouse gestures and modifier key(s) can now recognize modifier presses independently of mouse events. Previously, a changed modifier was only recognized during the next mouse event. A main benefit is that the cursor changes instantly with the key down and up events, for example during node re-parenting.
  • InteractiveOrganicLayouter: Significant performance improvements during interactive changes of the graph, for example when a user moves nodes.

Bugfixes

View

  • The event StripeDropInputMode.StripeCreated always returned a wrong stripe instance.
  • When manually creating groups and the folding view is configured to collapse group nodes by default, folders were erroneously created with empty size.
  • TableLayoutConfigurator erroneously considered left side labels as top labels, and consequently might have created insets of incorrect size.

Layout

  • IncrementalHierarchicLayouter: Fixed bug that caused node-edge overlaps in conjunction with some complex edge grouping specifications.
  • IncrementalHierarchicLayouter: Fixed bug that led to too large group nodes in graphs with grouped edges.
  • SmartOrganicLayouter, OrganicLayouter and InteractiveOrganicLayouter: Fixed error that was triggered due to NaN values that could occur in case the input graph had a very large number of nodes.
  • EdgeRouter: Fixed bug that caused violations of minimum first/last segment lengths of grouped edges when using different edge layout descriptors and, second, made the layout algorithm remove a user-registered DataProvider with key EdgeRouter.EDGE_LAYOUT_DESCRIPTOR_DP_KEY.
  • EdgeRouter: Fixed rare node overlaps in conjunction with monotonic path restrictions.
  • RecursiveGroupLayouter: Fixed bug that caused edges to share the same port even though they should have been assigned to different ports. Note that this problem only appeared if the core layout algorithm was an instance of class IncrementalHierarchicLayouter.
  • IsolatedGroupComponentLayouter: Fixed bug that caused edge labels that intersected with group nodes even though option ComponentLayouter.considerLabels was enabled.

Documentation Viewer Improvements

  • The detailed descriptions of the methods for event registration and de-registration were not displayed.
  • The inheritance hierarchy of a type was not properly displayed.
  • In the code generator, corrected the generated code for events.
  • Fixed the display of the sidebar in pinned mode.
  • The documentation viewer can now be opened from the file system even if third-party cookies are disabled.

yFiles for HTML 1.4 - Changes Since 1.3.0.7

This release brings the new layout features of yFiles for HTML 2.0 to the yFiles for HTML 1.x branch. Unlike version 2.0, the names of existing API are unchanged and have not been harmonized. The view part is unchanged except for one improvement and a small number of bugfixes.

Therefore, this release has no incompatible API changes except minor changes in the module dependencies. In addition, there are some behavior changes in the layout part. Updating code from 1.3 will require only a very small number of changes, if at all.

Major New Features

New Hierarchic Layout Features

Improved incremental layouts of groups with changing bounds. This is especially useful for hierarchic layout of graphs with expandable and collapsible groups. The new Hierarchic Grouping demo shows the improved behavior.

Port grouping. Edges can be bundled at their ports but routed independently.

Undirected edges. This enables to, for example, support mixed graphs that contain both directed and undirected edges. While directed edges typically point in the main layout direction, the direction of undirected edges doesn't matter and such edges may point to nodes in the same layer. This feature also enables to force some edges to specifically point against the main layout direction.

Edge thickness. Edges can now have specified thickness values and minimum distances in the layout will consider these thicknesses.

Recursively routed edges. With this routing style, edges that pass the border of group nodes will always leave at the bottom side and enter at the top side of the group node.

Sankey Diagrams
Sankey diagrams visualize flow quantity between entities, for example cost or energy flow.
Edge Bundling Routing Style

Bundling multiple edges means that their common parts are to some degree merged into a bundled part. Edge bundling is useful to increase the readability of graph drawings with a high number of edges that connect a comparably small number of nodes. Edge bundling is supported by

  • Circular Layout: Edge bundling is applied to edges of the same circle.
  • Radial Layout: Edge bundling is applied to non-tree edges.
  • TreeReductionStage: Edge bundling is applied to non-tree edges.
Regular Substructures in Organic Layouts
Organic Layout now supports the detection of regular substructures in the graph and applies a specific layout style to them such that they can be better recognized. These substructures include chains, stars, cycles, and parallel structures.
More Preferred Label Placement Specifiers
The new preferred placement specifiers LabelLayoutConstants.PLACE_AT_SOURCE_PORT and LabelLayoutConstants.PLACE_AT_TARGET_PORT for edge labels express that the label should be placed directly at the source/target port of the edge. Currently, the specifiers are only considered by the integrated labeling of the hierarchic layout.
Automatic Label Placement

If the new option reduceAmbiguity of SALabeling and GreedyMISLabeling is enabled, these algorithms try to avoid placing labels at positions where it is not clear to which graph element a label belongs.

TreeReductionStage now supports the automatic placement of labels of non-tree edges. Users do not need to take care of such edge labels themselves after using a tree layout algorithm on a non-tree input graph in conjunction with the reduction stage.

Similarly, the series-parallel layout now supports the automatic placement of labels of non-series-parallel edges.

Planar Embeddings
A new API for working with the planar embedding of planar graphs allows easy iteration of the faces, darts, and consecutive edges of the embedding.
Clustering

Added a k-means clustering algorithm that partitions a given graph in k-clusters to Groups.

Added a hierarchical clustering algorithm that partitions a given graph based on agglomerative (i.e., bottom-up) strategy and some linkage function (single-, complete- and average-linkage) to Groups.

We added settings for these new layout features to the Layout Styles demo.

Improvements

  • The prefix used by DefsManager.generateUniqueDefsId can now be changed.
  • IncrementalHierarchicLayouter: Improved support for PortCandidates at group nodes. Previously, they were only obeyed if there was just a single candidate defined. Now, out of the given candidates, one is selected and considered for the routing. Still, fixed candidates are treated like free ones and are not supported at the side of group nodes.
  • IncrementalHierarchicLayouter: Routing of grouped edges that connect to nodes of different groups now assures that the whole bus segment remains outside the different group nodes. This avoids that group nodes get unnecessarily large and potentially makes drawings more symmetric.
  • IncrementalHierarchicLayouter: Improved edge grouping such that it is now possible to group incoming/outgoing edges as well as same-layer/backloop edges with common edges.
  • IncrementalHierarchicLayouter: Reduced the number of bends when integrated edge labeling is enabled.
  • IncrementalHierarchicLayouter now takes the original edge route into account to determine the route of a self-loop.
  • IncrementalHierarchicLayouter: Added properties that allow to stop the layout algorithm after the layering or the sequencing phase while skipping the subsequent phases. This may be useful when using two layout runs to collect layering and/or sequencing information in the first run that will be used during the second run.
  • IncrementalHierarchicLayouter: Fixed edges which have segments that should be horizontal or vertical but are slightly non-orthogonal.
  • IncrementalHierarchicLayouter: Improved behavior in incremental mode that moved normal nodes that were in different layers (in the initial layout) to the same layer. This behavior occurred in case there were group nodes that extended into the layer above or below to get a compact result.
  • IncrementalHierarchicLayouter: Added support for overlapping layers. The strict layer structure can be compacted by moving layers up into the space of previous layers. Layers are only moved if it won't produce overlaps with nodes or edges.
  • IncrementalHierarchicLayouter: Added support for sequence constraints between edges as well as nodes and edges, see SequenceConstraintFactory.
  • The following tree layouts now support custom selection of the root node of the tree: BalloonLayouter, GenericTreeLayouter, TreeLayouter, ARTreeLayouter, and HVTreeLayouter
  • BalloonLayouter: Interleaved child placement now works in conjunction with 'from sketch' mode and custom child order comparators. This means that the settings BalloonLayouter.fromSketchMode and BalloonLayouter.comparator are no longer ignored when enabling the interleaved placement mode.
  • TreeLayouter and GenericTreeLayouter now take into consideration the minimum group node size specified by the user with a DataProvider registered with the graph with key GroupingKeys.MINIMUM_NODE_SIZE_DP_KEY.
  • GenericTreeLayouter: Improved DefaultPortAssignment to consider PortConstraints in all modes. If a distributed mode is selected, then weak constraints will also be distributed on the according side.
  • LayeredNodePlacer: Improved spacing between labels and bends when polyline labeling is enabled.
  • Improved the performance of SALabeling and GreedyMISLabeling, especially for large graphs.
  • Improved support for PreferredPlacementDescriptor side preference (left, on-edge, right) when using generic labeling algorithms SALabeling and GreedyMISLabeling. Now, the side preference is considered for edge labels with arbitrary EdgeLabelModel implementations.
  • Improved the performance of EdgeRouter when routing edges that have PortConstraints or PortCandidates.
  • EdgeRouter will now consider the target group of an edge if this edge is the only member of its source group.
  • EdgeRouter: Improved edge routes of self-loops to go around at least one corner of the node. Only if both source and target port are restricted to the same side (with a PortConstraint or PortCandidate), self-loops may start and end at the same side of the node.
  • InteractiveOrganicLayouter: Fixed possible performance problem after changing the inertia/stress of some nodes.
  • SeriesParallelLayouter now takes into consideration minimum node sizes specified by the user.
  • MultiPageLayouter: Added new option MultiPageLayouter.strictClusterSeparation that allows to specify whether or not nodes with different cluster IDs may be placed onto the same page.
  • DirectedOrthogonalLayouter: Now always produces planar drawings for trees.
  • Improved the performance of OrthogonalSegmentDistributionStage and thus also ChannelEdgeRouter which by default uses the mentioned stage as edge distribution strategy.
  • ChannelRouter: Improved order of segments to avoid edge crossings when there are multiple segments that have one common end point.
  • Added layout stage CurveFittingLayoutStage which allows the approximation of edge paths with cubic Bezier curve control points. The stage is especially useful if curved edges are modeled using a large number of bends connected via straight lines.
  • Added layout stage HandleNaNCoordinatesStage which prevents layout algorithms that take initial coordinates for nodes and edges into account from failing if some of those graph elements have NaN-coordinates.
  • Improved the performance of PartialLayouter for input graphs that feature a high number of large subgraph components. Does not apply to component assignment strategy PartialLayouter.COMPONENT_ASSIGNMENT_STRATEGY_SINGLE.
  • Several smaller performance improvements for IncrementalHierarchicLayouter, SmartOrganicLayouter, OrthogonalLayouter, CircularLayouter, RadialLayouter, SeriesParallelLayouter, and ChannelRouter.

Bugfixes

  • SimpleLabelStyle: Changing the autoFlip or trimming properties had no visible effect until a visual was created anew with the createVisual method.
  • The property SizeChangedEventArgs.oldSize contained the new size instead of the old size in some cases.
  • MouseHoverInputMode: The tooltip of the very first hover did not appear.
  • Added the flag yfiles.workaroundCR701075 that enables a workaround for occasional rendering issues in Chrome 57. This is due to Chrome 57 not properly rendering the applied transform matrix. The workaround is automatically enabled in the yFiles demo applications when opened in Chrome 57.

Incompatible Changes

Breaking API Changes

  • The module yfiles/layout-circular has been merged with the module yfiles/layout-organic. If you have references to yfiles/layout-circular replace them with yfiles/layout-organic.
  • The module yfiles/layout-planar has been merged with the module yfiles/layout-orthogonal since it contained no public API and is only used from the latter module. If you have references to yfiles/layout-planar replace them with yfiles/layout-orthogonal.

Behavior Changes

  • The following layout algorithms have more sensible default values.
    • CanonicMultiStageLayouter and MultiPageLayouter: The default labelLayouter is now set to an instance of SALabeling.
    • OrthogonalEdgeRouter.crossingCost: The default value is now 1.5 instead of 0.0.
    • CompactOrthogonalLayouter: The CompactOrthogonalLayouter.OrthogonalShortestPathPathFinder which is used as default path finder strategy now uses value 1.5 as default for property crossingCost instead of 0.
    • PartialLayouter.minimalNodeDistance: The default value is now 10.0 instead of 0.0.
    • MultiParentDescriptor.minimumNodeDistance: The default value is now 15.0 instead of 10.0.
    • BalloonLayouter.minimalNodeDistance: The default value is now 10.0 instead of 0.0.
    • SALabeling.deterministicMode: The default value is now true instead of false.
    • SplitEdgeLayoutStage.proxyNodeSize: The default value is now 1.0 instead of 0.0.
  • Most of the property setters of the types of the layout part now throw an error if an invalid, illegal, or null argument is given as input.
  • IncrementalHierarchicLayouter may now place source/target labels in layers that contain common nodes. In previous versions such labels were always placed in separate layers which often led to less compact drawings with superfluous bends.
  • IncrementalHierarchicLayouter: The edge grouping now supports to group incoming and outgoing edges of a node. In previous versions incoming and outgoing edges always defined separate groups even though the user specified the same group IDs for such edges.
  • Method IncrementalHierarchicLayouter.integratedEdgeLabeling does now always return false if the labeling algorithm is disabled. In previous versions it was only required that an appropriate labeling algorithm was specified, but it was not necessary that it is enabled. Therefore, the integrated labeling state queried from the property might not have corresponded to what the layout algorithm actually did. The same behavior change applies to the following methods:
    • IncrementalHierarchicLayouter.considerNodeLabels
    • DirectedOrthogonalLayouter.integratedEdgeLabeling
    • DirectedOrthogonalLayouter.considerNodeLabels
    • OrthogonalLayouter.integratedEdgeLabeling
    • OrthogonalLayouter.considerNodeLabels
    • OrthogonalGroupLayouter.integratedEdgeLabeling
    • OrthogonalGroupLayouter.considerNodeLabels
  • IncrementalHierarchicLayouter: Geometry information specified for IncrementalHierarchicLayouter.ALTERNATIVE_GROUP_BOUNDS_DP_KEY and IncrementalHierarchicLayouter.ALTERNATIVE_EDGE_PATH_DP_KEY is now automatically rotated according to the specified layout orientation. This fixes unstable from-sketch behavior in incremental layout mode when using an orientation other than top-to-bottom.
  • IncrementalHierarchicLayouter: For input graphs with infeasible PortConstraints and PortCandidates/PortCandidateSets (i.e., for edges that have non-matching port constraints/candidates), the layout algorithm now always prefers PortConstraints. In previous versions, the behavior was not well-defined for such cases.
  • PortCandidateAssignmentStage: Now, if an edge has registered PortCandidates and connects to nodes with PortCandidateSets, the stage will try to match both collections to find an appropriate port. In case there is no matching port candidate, a PortCandidate specified for the edge is preferred. Before, one of the PortCandidates was selected without trying to match with node port candidates.
  • SmartOrganicLayouter does no longer resize empty group nodes, possibly ignoring a minimum group node size for them. The behavior with respect to empty group nodes is now in line with the behavior of other common layout algorithms. The same behavior change applies for OrganicLayouter with group policy setting OrganicLayouter.IGNORE_GROUPS_POLICY, where previously empty groups were resized too.
  • Method CompositeLayoutStage.canLayout now checks if all the LayoutStages of the pipeline can layout the given graph and does not return always true.
  • Method SingleCycleLayouter.canLayoutCore now returns false if null is given as input.
  • Method Centrality.closenessCentrality now sets the closeness of a node to Infinity if the sum of the shortest path distances is 0. Before, it was set to NaN in such cases.
  • Method SingleCycleLayouter.nodeSequencer now allows to specify null to return to the default sequencer. In previous versions, specifying null led to an error.
  • Method GraphTransformer.operation now only sets the operation value and does not disable the automatic selection of best fitting rotation angle if an operation other than ROTATE is selected.
  • Method OrthogonalLayouter.integratedEdgeLabeling now throws an error if the current label layouter is not of type LabelLayoutTranslator.
  • Constructor TreeComponentLayouter throws an error if null is given as argument.
  • Centrality: The following methods can now take empty NodeMaps and EdgeMaps as arguments for returning the resulting centrality values.
    • Centrality.edgeBetweenness
    • Centrality.nodeBetweenness
    • Centrality.nodeEdgeBetweenness

yFiles for HTML 1.3.0.7 - Changes Since 1.3.0.6

Bugfixes

  • CanvasComponent: Key events had no effect if the component was part of a shadow DOM. The component's div element always lost the focus on keydown.
  • Instances of GraphEditorInputMode and GraphViewerInputMode were not garbage collected due to a non-removed event listener in the clickInputMode.
  • Hiding INodeSnapResultProvider or IBendSnapResultProvider from the lookup no longer leads to a crash when nodes or bends are moved.
  • PolylineEdgeStyle: Toggling the pen between dashed and solid styles did only work once. Then, the SVG path stayed at solid regardless of the pen's dash style.
  • SmartEdgeLabelModel: Once again, labels at the first segment snap properly at the layout of the source node. Since 1.3.0.6, some snap positions were overlapping with the source node.

Layout

  • Fixed a bug in TableLayoutConfigurator which altered the size of a column or row if an edge routing algorithm was applied.
  • MultiPageLayouter: Fixed rare bug that caused straight-line edge routes instead of orthogonal routes.
  • SmartOrganicLayouter and OrganicLayouter: Fixed bug that caused the algorithm to not consider the specified custom GroupBoundsCalculator.

yFiles for HTML 1.3.0.6 - Changes Since 1.3.0.5

Demo Improvements

  • Made demo-framework/require.js able to deal with paths syntax.
  • Removed unused LabelInsetsProvider implementation in demo.yfiles.layout.layoutstyles.

Bugfixes

  • Added the flag yfiles.workaroundIE7766782 that enables a workaround for the Internet Explorer JIT bug 7766782, which can cause class initialization errors when using the yFiles for HTML GWT Overlay in Internet Explorer, especially when the GWT Overlay is used in combination with Smart GWT.
  • Made the IEnumerable.getMultiProjection and EnumerableExtensions.selectMany implementations non-recursive to avoid stack overflows.
  • Made SvgExport helper class more resilient against zero sized exports.
  • The CreateEdgeInputMode.EdgeCreated event triggered before the corresponding undoable edit was committed. This could result in a broken undo queue, if e.g. an animated layout was started during in the event listener. The event now triggers after the edit has been committed. With automatic undo unit merging, this should not make a difference for the end user, however from the perspective of the code there will be two subsequent edits, rather than one compound, if the code in the listener actually modifies the edge.
  • The license validation always failed for users of some (mostly older) browsers in specific scenarios:

    LocaleISO 639 CodeAffected Scenarios
    EstonianetOnly Licenses with watermark
    FinnishfiOnly License with watermark
    SwedishsvOnly License with watermark
    HawaiianhawAlways
    TamazighttzmAlways

    The following browsers were affected:

    • IE before version 11
    • Firefox before version 29
    • Chrome before version 24
    • Opera before version 15
    • Safari (all versions)
  • Prevent null exceptions when interacting with a GraphOverviewControl before assigning a GraphControl to the OverviewInputMode.
  • OverviewInputMode could break the overview visualization if the overview has a very small width or height.
  • SmartEdgeLabelModel: Edge label snap lines have been too short for some positions that are far apart from the edge path.
  • SmartEdgeLabelModel: An exception was thrown if the path of the corresponding edge contained bends that were close together or at the same location.
  • Folding: the view state of a port on a folder node was sometime ignored when a folding edge was created.
  • Fixed several issues with orthogonal edge editing.
    • When dragging the source/target port/node of an orthogonal edge, the bends created during the drag were not cleaned up after canceling the gesture by pressing the ESC key.
    • Orthogonal edges could be made non-orthogonal by re-connecting the source port to the target port location (creating a self-loop), or vice versa.
  • Explicit Arrow elements in GraphML were sometimes read back incorrectly. The new deserialization property SerializationProperties.ParseArrowElementAsDefaultArrow can be used to work around this issue.
  • GenericPortLocationModel wasn't serialized correctly.
  • Table.setStyle(ILabel, ILabelStyle) and Table.setLabelModelParameter ignored the provided style resp. label model parameter.
  • PathBasedEdgeStyleRenderer could leave visual artifacts when switching to an arrow that returned a null visual.
  • KeyboardInputMode now passes the original CompoundKeyEventArgs to registered event handlers instead of EmptyArgs.
  • Touch move events have an effect only if the corresponding touch down event also happened within the GraphControl.
  • The IsDown property of a Touch2DDevice was always false after the first touch up event of that device, e.g. after the first tap of a double tap.

Layout

  • IncrementalHierarchicLayouter: fixed rare error triggered in AsIsSequencer for edges incident to group nodes that have a sketch without bend points as well as port constraints.
  • IncrementalHierarchicLayouter: fixed bug that may cause non-orthogonal segments of grouped edges even though orthogonal edge routing is enabled.
  • IncrementalHierarchicLayouter: improved compactness of layouts that feature group nodes with insets and (group) nodes with halos (NodeHalo). Previously, the specification of halos could enlarge the insets of group nodes by an unnecessary large amount.
  • IncrementalHierarchicLayouter: Fixed bug that sometimes caused the route of back-loop edges with at least one endpoint incident to a group node to unnecessarily enter this group node.
  • IncrementalHierarchicLayouter: Fixed rare bug that caused same-layer edge to cross through their source or target node, e.g., the port was at the top of the source node but the edge crossed through the source node to leave it at the bottom.
  • IncrementalHierarchicLayouter: Fixed rare bug that may caused overlaps between labels and segments of edges with octilinear routes.
  • IncrementalHierarchicLayouter: fixed possible infinite loop if there are critical edges (see CRITICAL_EDGE_DP_KEY).
  • SimplexNodePlacer: Fixed bug that caused overlaps between edges and nodes when node compaction is enabled and edges have either strong PortConstraints or fixed PortCandidates.
  • SmartOrganicLayouter and OrganicLayouter: Fixed bug that caused group nodes with zero height/width in the layout result. The bug appeared when having empty groups, group node insets smaller than one (defined viaGroupingKeys#GROUP_NODE_INSETS_DP_KEY) and no minimum group node size specified (GroupingKeys#MINIMUM_NODE_SIZE_DP_KEY).
  • GenericTreeLayouter: fixed possible group node overlaps in conjunction with some node placers, for example AssistantPlacer.
  • GenericTreeLayouter: fixed bug that caused less compact layout results when having node halos (see NodeHalo).
  • PartialLayouter: fixed error that appeared if no DataProvider with key PARTIAL_NODES_DP_KEY is registered with the input graph.
  • EdgeRouter: Fixed bug that caused violations of minimum first/last segment lengths of grouped edges when using different edge layout descriptors and, second, made the layout algorithm remove a user-registered DataProvider with key EdgeRouter.EDGE_LAYOUT_DESCRIPTOR_DP_KEY.
  • EdgeRouter: Fixed rare error that may appear if there are fixed and grouped edges at the same time.
  • ChannelEdgeRouter: Fixed routing of self-loops that have both source and target end point at the same side of the node. Previously, when multiple such self-loops were present at the same node, the routing produced bad end points located outside of the node.
  • OrthogonalEdgeRouter: Fixed error that appeared if there were node labels with zero height/width.

Documentation Viewer Improvements

  • Improved page loading performance for large API pages.
  • The integrated code editor now shows correct argument names in delegate and callback function signatures.
  • Parameters of delegate functions (e.g. event handlers) are now part of the "Show Usages" results.

yFiles for HTML 1.3.0.5 - Changes Since 1.3.0.4

Demo Improvements

  • Added a flag to demo.yfiles.layout.multipage that prevents re-entrant layout calls.
  • Feature DefaultDummyNodeConverter.initialSize in Getting Started tutorial steps 11, 12 and 13.
  • Added custom layout stage to the tree layouter of demo.yfiles.layout.layoutstyles which handles edges to group nodes. Fixed vertical preferred edge label placement setting of the label layout.
  • Updated demo.yfiles.graph.pdfexport 's references for the svg to pdf libraries. Beside other bugfixes, the updated svg to pdf libraries now support svg patterns and correct export of nodes that use ImageNodeStyle.
  • In some rare cases, the graph creation code in demo.yfiles.graph.orgchart was called before the application was initialized. Made sure that the application has been initialized before creating the graph.
  • The graph in demo.yfiles.graphml.graphml is now updated lazily after the GraphML source has not been modified for 1 second to prevent cumulative updates on every keystroke.

Bugfixes

Viewer

  • Improved the performance of yfiles.drawing.TextRenderSupport.determineMeasureMode for the first label measure call.
  • Fixed 'not a finite floating-point value' exception which occurred when the size of the GraphControl is zero during an animation.
  • Added the flag yfiles.workaroundIE2337112 that enables a workaround for disappearing 'use' elements in Internet Explorer 11 on Windows 10 . The workaround is automatically enabled in yFiles demo applications that use the demo framework for IE11 on Windows 10.
  • GraphML deserialization: Changed default value for arrows without an explicit ArrowType from ArrowType.NONE to ArrowType.DEFAULT.
  • GraphML serialization: Whitespace in XML attributes was not escaped correctly.
  • Specifying a DesignerSerializationVisibility for collection properties did not work.
  • TypeConverter was erroneously part of the yFiles for HTML Layout package and has been removed from it.

Layout

  • IncrementalHierarchicLayouter : fixed error that could happen in AsIsSequencer when incremental group hints are defined (see IncrementalHintsFactory.createIncrementalGroupHint ) along with specific port constraints on edges incident to an incremental group node.
  • IncrementalHierarchicLayouter : Improved result if compact label placement is enabled (which is the default), see SimplexNodePlacer.LabelCompaction . In previous versions the labels may have been placed in a stacked style even if this did not make the result more compact (e.g. if all labels are placed to the right of the edges).
  • GraphPartitionManager: fixed functionality to hide edges when using methods GraphPartitionManager.hide, GraphPartitionManager.hide . Previously, edges were actually not hidden from the graph.
  • IncrementalHierarchicLayouter : Fixed distance between vertical (in a top-to-bottom layout) segments of same layer edges that connect to group nodes. This also applies to self-loops that connect to the top or bottom of a group node with both ends as well as same layer parts of other edges like back-loops.
  • IncrementalHierarchicLayouter : Fixed bug that caused the minimum edge-to-edge distance to be violated by edges with strong port constraints that cross each other.
  • ParallelEdgeLayouter : Fixed bug that caused wrong (very large) edge port coordinates. These coordinates could also lead to Exceptions when later processing the graph, for example, when calculating placements of edge labels belonging to the edges with bad coordinates using model SmartEdgeLabelModel.
  • SeriesParallelLayouter : Fixed violations of the minimum first and last segment length and self-crossings of octilinear edges.
  • SeriesParallelLayouter : Fixed bug that caused node-to-node or node-to-edge overlaps in the case where the graph contained group nodes and node/edge labels.
  • CircularLayouter : Fixed a bug that could potentially cause an infinite loop when encountering a node with a very high out-degree.
  • IncrementalHierarchicLayouter : Fixed bug that caused critical edges to not be aligned (see CRITICAL_EDGE_DP_KEY).
  • BusRouter: Fixed rare error caused by non-orthogonal edge segments.
  • GenericTreeLayouter : Fixed bug that caused edges which are reversed during the layout and have a port constraint only to one endpoint (e.g., source) to obtain the same port constraint also to the other endpoint (e.g., target).
  • Polyline.EdgeRouter : Fixed possible error that may appear if a specified PortCandidate has multiple directions.
  • IncrementalHierarchicLayouter : Fixed bug with some ignored any side strong port constraints.
  • IncrementalHierarchicLayouter: Fixed bug that resulted in edges whose segments are not on grid.
  • Polyline.EdgeRouter : Fixed bug that caused routed edges to sometimes share the same port as fixed edges.
  • Polyline.EdgeRouter : fixed bug that caused incorrect routes for grouped edges with intersecting source and target.
  • FamilyTreeLayouter : Fixed handling of grouping data providers so they are not changed by the layout algorithm.
  • IncrementalHierarchicalLayouter : Fixed grid references to place the nodes on grid correctly for each layout orientation.
  • FamilyTreeLayouter : Fixed possible error that may appear if the input graph contains group nodes.

Documentation Viewer Improvements

  • Improved page loading performance for large API types.
  • Added an integrated code editor with smart code completion support for yFiles API members.
  • Integrated search for related knowledge base articles.
  • Added a version that can be viewed offline (index-offline.html - run npm install first).

yFiles for HTML 1.3.0.4 - Changes Since 1.3.0.3

New and Improved Demos

  • The demo demo.yfiles.graph.largegraphs illustrates different approaches and their performance for rendering large graphs.
  • The demo demo.yfiles.graphml.graphml provides a live view of the graph's GraphML representation to provide an insight into GraphML serialization.
  • The demo demo.yfiles.graph.neighborhood shows how to implement a neighborhood view of the selected graph item.
  • The demo demo.yfiles.toolkit.react shows how to integrate the yFiles graph control into a React project.
  • The demo.yfiles.graph.svgexport and demo.yfiles.graph.pdfexport demos show how to export the diagram to SVG or PDF, respectively.
  • The demo demo.yfiles.graph.tableeditor shows a new, optimized table style.
  • The demo.yfiles.graph.imageexport demo now also supports server-side image export.

Layout Improvements

  • IncrementalHierarchicLayouter : Reduced number of overlaps of group nodes containing elements with head or tail sequence constraints.
  • Improved abort handling for algorithms that use ConstraintIncrementalLayerer, ConstraintLayerer and TopologicalIncrementalLayerer . For large graphs these classes may require a long runtime that cannot be canceled by using an AbortHandler.

Bugfixes

Viewer

  • TemplateNodeStyle and StringTemplateNodeStyle no longer throw an exception on template re-evaluation if a bound value is null.
  • Fixed an error that could occur when the graph control has no actual size but visible scrollbars.
  • Corrected the interactive resizing of selected nested group nodes. Previously, the result was depended on the order in which the nodes were selected. Now, GraphCommands.ADJUST_GROUP_NODE_SIZE_COMMAND now always processes the nodes from innermost to outermost groups.
  • GraphClipboard: Corrected the selection after a paste command for clipboards which are shared among GraphControls.
  • Fixed an error when resizing nodes in a filtered graph that contains tables.
  • Fixed an issue with NodeDropInputMode and filtered graphs.
  • Changed the default value of GridVisualCreator.abberationTolerance to 50 to switch off grid hiding by default.
  • Fixed the visualization of grids of the style GridStyle.Crosses.
  • The property CanvasControl.fitContentViewMargins is now considered correctly even if the values for left and right (or top and bottom) are different. Previously, the content was always centered in the view.
  • GraphML deserialization errors are now ignored if the flag yfiles.graphml.SerializationProperties.IGNORE_XAML_DESERIALIZATION_ERRORS is set.
  • Fixed an error while loading GraphML files that were created with yFiles WPF and contained labels.

Layout

  • IncrementalHierarchicLayouter: Fixed an error that caused PortCandidate s to potentially be ignored or not handled correctly for self-loops when having directions other than PortCandidate.NORTH, PortCandidate.SOUTH, PortCandidate.WEST or PortCandidate.EAST.
  • IncrementalHierarchicLayouter : Fixed an error that caused that the layer of an incremental group (see IncrementalHintsFactory.createIncrementalGroupHint ) depends on the group's location if recursive layering is enabled (see IncrementalHierarchicLayouter.recursiveGroupLayering ). However, the position of incremental groups should be freely chosen by the layouter.
  • IncrementalHierarchicLayouter : Fixed an error that caused grouped edge segments to overlap with one of the adjacent nodes if that is a group node.
  • IncrementalHierarchicLayouter : Fixed an error that caused same layer segments to be too short for the labels that should be placed at those segments.
  • IncrementalHierarchicLayouter : Fixed an error that caused a violation of minimum first/last segment length for edges that connect two neighboring nodes in the same layer.
  • IncrementalHierarchicLayouter : Fixed an error that caused a violation of minimum first/last segment length for edges that connect to group nodes. Now, the first/last segments of those edges will have at least the length of the largest minimum first/last segment length of all edges connected to the same group node.
  • IncrementalHierarchicLayouter : Fixed rare error that was caused by an inconsistent group node order that may appear for input graphs containing both swimlanes and groups.
  • IncrementalHierarchicLayouter : Fixed an error that prevented that fixed any side port constraints were considered for edges between a group and a node within this group.
  • Polyline.EdgeRouter : Fixed rare error that may appear during rerouting of edges (see Rerouting) if the input graph contains overlapping nodes.
  • Polyline.EdgeRouter : Fixed possible error that may appear if there are grouped edges consisting of both fixed and non-fixed edges (see EdgeRouter.SphereOfAction).
  • Polyline.EdgeRouter : Fixed an error that caused violations of the minimum first or last segment length for target grouped edges. This only happened when these distances were defined in the default EdgeLayoutDescriptor instead of a DataProvider with individual descriptors.
  • Polyline.EdgeRouter: Fixed side handling of external strong ports.
  • Polyline.EdgeRouter: Fixed rare bug that may cause a stack overflow.
  • GreedyMISLabeling and SALabeling : Improved placement of edge labels with preferred placement at source or target.
  • ParallelEdgeLayouter : Fixed possible error that may appear if the parallel edge is almost horizontal or vertical.
  • ChannelEdgeRouter : Fixed an error that may cause segments with infinite coordinates for edges incident to group nodes if the path finder strategy is set to ChannelEdgeRouter.OrthogonalShortestPathPathFinder.
  • MultiPageLayouter : Fixed possible error that may appear if an internal layouter queries a DataProvider for an inserted dummy node.
  • DirectedOrthogonalLayouter : Fixed problem that may cause non-directed routes for directed edges if option DirectedOrthogonalLayouter.alignDegreeOneNodes is enabled.
  • SimplexNodePlacer: Fixed an error that disabled label compaction feature.
  • BalloonLayouter: Fixed an error that caused BalloonLayouter.CHILD_ORDERING_POLICY_SYMMETRIC not to work as desired.
  • AssistantPlacer : Fixed placement of assistant nodes. When all children of a node are assistants, they are all placed left/right.
  • TreeLayouter: Fixed a stack overflow error that could occur for trees with high depth.
  • GenericTreeLayouter : Fixed root alignments to only take the child node bounds into account without considering edge segments in the subtree.
  • DelegatingNodePlacer: Constants DelegatingNodePlacer.VERTICAL and DelegatingNodePlacer.HORIZONTAL along with methods DelegatingNodePlacer.Orientation are deprecated since they had no effect.
  • Trees: fixed method CenterRoot that didn't always return the correct center node of a tree.
  • OrganicLayouter : Fixed an error that caused tree-beautifier feature (see OrganicLayouter.ActivateTreeBeautifier ) to have no effect if activated when the graph is actually flat (i.e., there is no group node that contains child nodes) but data providers for groups (see GroupingKeys) are registered with the graph.
  • CircularLayouter: Fixed an error that may cause node overlaps.
  • SplitEdgeLayoutStage : Fixed an error that caused the user's selection for edges that have to be split to be ignored. Also, Fixed an error that caused an error because of nodes with zero width/height.
  • ShortestPaths : Fixed error that occurred when applying the Dijkstra or Bellman-Ford algorithm to an empty graph.

Incompatible Changes

  • Paste Command: the selection is now updated before the method GraphClipboard.paste exits.

Documentation Viewer Improvements

  • Fixed the display of text-only "see also" references.
  • Removed the filter text field of the api tree component, because it could easily be mistaken as the main search box, but the search box provides a much better search experience.
  • When following a link to a type member, the target tab sometimes didn't scroll to the documentation of that member.

yFiles for HTML 1.3.0.3 - Changes Since 1.3.0.2

Bugfixes and Demo Improvements

Viewer

  • Fixed cleanup of template style bindings, preventing memory leaks caused by accumulating bindings.
  • Added an activatable workaround (yfiles.workaroundEDGE2057021) for the StringTemplateNodeStyle . It converts attribute names consisting of only upper case characters to lower case attribute names. This refers to Microsoft Edge's DOMParser issue.
  • Added an activatable workaround (yfiles.workaroundCR570845) for a Chrome problem that can prevent queued display updates from being executed during touch/mouse gestures. The yfiles.workaroundCR570845 property can be set to a delay in milliseconds that should be tolerated before running the queued functions using window.requestAnimationFrame() . The default value of yfiles.workaroundCR570845 is -1 , which disables the workaround. The workaround is automatically enabled in yFiles demo applications that use the demo framework for Chrome versions later than 46.
  • Fixed a dragging bug on IE9 where the node dragging stops if the item is dragged out of the GraphControl and back in.
  • Added charCode property to yfiles.input.KeyEventArgs , which gets the charCode of the original event. Also fixed keyValue property in yfiles.input.CompoundKeyEventArgs , which previously returned an empty string.
  • Fixed Control.onKeyPress, that almost never was called. This also had the effect that the CanvasControl.CompoundKeyTyped event was not fired.
  • Fixed a bug in IE11 on Windows 7 where mouse events were fired during dragging although the mouse has not been moved.
  • Prevent IE from entering an event loop multiple times on the same coordinate when using touch input in DragDrop . Thus touch input behaves the same as mouse input, where this was already in place.
  • Fixed inconsistent input mode states when dragging the mouse out of an iframe containing the graph control and releasing the mouse button outside the iframe.
  • Fixed a bug in browsers without deep document.importNode support (e.g. IE9) where attributes of inlined images were wrong after exporting the graph with SvgExport

Demos

  • Improved custom node and edge style color choices for the custom style tutorial.
  • Orgchart-Demo: Fixed exception in IE9.

yFiles for HTML 1.3.0.2 - Changes Since 1.3.0.1

Bugfixes and Demo Improvements

Viewer

  • Fixed null exceptions after GraphControl.CleanUp.
  • Fixed a bug in TreeSource and AdjacentNodesGraphSource where nodes could get removed during updateGraph.
  • Fixed a bug where double clicks weren't delivered correctly when mouse move events were fired between mouse down and release.
  • CanvasControl.Mouse2DDragged events are not delivered anymore if the event coordinates are equal to the last mouse event.
  • Implemented non-functioning class yfiles.drawing.PointSelectionInstaller , which adds a default port selection visualization.
  • Improved Scrollbar behavior when ScrollBar.value is changed from the outside while dragging the slider, e.g. when changing the GraphControl's contentRect . Previously, the scrollbar slider jumped to the new mouse location, resulting in discontinuous scrolling. The new code keeps the difference between the slider and the mouse location, that was caused by the external value change.

Demos

  • Demo.yfiles.graph.mindmap : Fixed various issues like re-ordering edges at the root node, root node icon and expanding the root node on touch devices.
  • Fixed an issue in demo.yfiles.layout.interactiveorganic where the graph suddenly froze when dragging a node shortly after application start.
  • New nodes in demo.yfiles.binding.interactivegraphsource et al. are not placed into the top layer anymore, but are fitted nicely in the existing layout during update.
  • Fixed an issue in demo.yfiles.graph.orgchart where an exception occurred when changing node selection while no node was currently visible.
  • New design for social-network graph in demo.yfiles.graph.viewer.

Class Framework

  • fixMethods is now available in both namespaces, yfiles.util and yfiles.lang.util.

Demo Framework

  • Fixed possible overlapping and unintentional resize of the side panels.

New Demos

  • New demo.yfiles.graph.networkmonitoring shows a monitoring tool for a network with simulated traffic and random failures.

yFiles for HTML 1.3.0.1 - Changes Since 1.3

Bugfixes and Demo Improvements

Viewer

  • GraphML: Primitive data types such as string or number were written to the wrong XAML namespace, thus breaking interoperability with other yFiles platforms.
  • CSS classes set on the div element before calling CanvasControl.ForDiv or CanvasControl.ForId are not overwritten anymore. Instead the class yfiles-canvascontrol is appended to the existing classes.
  • Added a dedicated class for the main CanvasControl SVG to prevent implicit CSS styling of all SVGs inside the canvas (e.g. in graph item styles).
  • OverviewInputMode now uses the value 0.00000001 as minimum zoom, instead of Number.MIN_VALUE, which is zero in Chrome on iOS.
  • Fixed a visual glitch where devices with touch input using the WebKit Javascript engine (e.g. Android tablets, MacBook with TouchPad, Mac with MagicMouse etc.) displayed scrollbars in the graph control that should not be visible.
  • Improved performance of SimpleLabelStyleRenderer. The label's text size was calculated even if it was not needed subsequently.
  • Fixed a bug in TextRenderSupport where TextMeasureMode.SVG was used instead of TextMeasureMode.CANVAS.
  • Text height measurement with TextMeasureMode.SVG returned the wrong height on single line string if the string only contained characters lower than full line height, e.g. lower case characters, spaces etc.

Demos

  • InteractiveOrganic Demo: Fixed a performance issue caused by newly created unconnected nodes where the graph stuttered while moving the connected components. Also disallowed label adding.
  • BPMN Editor Demo: The nodes with blue border are not treated as group nodes anymore.
  • Table Editor Demo: A flag prevents re-entrant layout execution.
  • Fixed an invalid line of code in the source code comments of step 24 of the Custom Styles Tutorial.
  • OrgChart Demo: Updated design and improved the viewport limiter settings.
  • MindMap Demo: Improved the viewport limiter settings.
  • Interactive data binding demos: Catch and display errors thrown by faulty binding functions.
  • LayoutStyles Demo: Replaced OrthogonalEdgeRouter with the newer EdgeRouter as router for non-tree edges for the BalloonLayouter.
  • Tutorial 01, Step 16 (Grid Snapping): 'Show Grid' button now only toggles grid visualization.
  • SimpleCustomStyle Demo and Tutorial 02, Step 19 (Animated Edge Selection): Minor bugfix in the animated edge style where the time delta result was wrong for the first frame request.

Demo Framework

  • The style panel, which is used in demos where nodes can be dragged into the graph control, now displays nodes with large labels correctly.
  • Fixed touch input gestures on on Microsoft Surface devices.
  • Implemented auto-adjust of GraphControl.dragSize and GraphControl.hitTestRadius to improve user experience on different input devices (touch, pen and mouse).

yFiles for HTML 1.3 - Changes Since 1.2.1.4

Major Features Added

Viewer

  • GraphControl integrates itself much better into web pages since it no longer stops the propagation of any keyboard, mouse, touch and pointer events that passes through it. In addition, preventDefault() is now only called on mouse events, touch events, pointer events, and on keyboard events that actually trigger an interaction. Especially, it leaves all other keyboard events untouched.

    If the default behavior doesn't fit your requirements, whether or not to call preventDefault() on events that pass the GraphControl can be separately specified for the three types of events (keyboard, pointer, and context menu).

    This makes it possible for example to call a default browser action even if the GraphControl has the focus and to change the focus to and from a GraphControl with the Tab key.

  • With the new property GraphControl.mouseWheelBehavior, customers can specify when a wheel/mousewheel event should be handled: never, always, or only when focused. In addition, it is now easily possible to specify whether the mouse wheel scrolls or zooms the GraphControl.

    Together with the less restrictive event prevention, this makes it possible to scroll the whole web page even if the cursor is over a GraphControl.

  • Graphs can now be saved as file download in several recent browsers, namely Chrome 38+, Firefox 28+, IE 10+, Opera 25+, and recent versions of the related mobile browsers. Saving can be done either with the method GraphControl.saveFile or with custom code. The latter is shown in detail in the File Operations demo and allows further customizations, for example adding support for more browsers.
  • Improved the module file format. The yFiles modules now follow the Universal Module Definition (UMD) pattern, offering compatibility with the most popular script loaders and JavaScript environments.

    Using UMD, the yFiles modules easily support a variety of different loading schemes: lazily using an AMD loader like RequireJS, with CommonJS in Node.js applications or Browserify web projects, or simply via an object in the browser's global scope. Several new demos show examples of how to use the different loading schemes.

  • GraphClipboard now supports copying independent items. This allows the user to copy labels, ports, bends, or edges to other elements without having to copy their owners. Also this technique allows for copying an item (for example a label) to multiple target elements at once.

    In addition, the GraphClipboard now supports an optional target location for pasting and the new method GraphEditorInputMode.pasteAtLocation can be used to this end, too. In addition, ApplicationCommands.PASTE now supports an optional parameter of type IPoint to provide a target location.

  • Node and edge labels can now snap to particular locations while moving them interactively. Both types of labels can be aligned horizontally or vertically to their original location. In addition, a node label can be aligned with the borders or the center of its owner, and during resizing of that owner, smartly keeps its relative location to the snapped position. An edge label can be snapped on the path of its owner, or at particular distances of it.

    This feature can be enabled and configured with a LabelSnapContext and is available for labels with one of these label models: SmartEdgeLabelModel, FreeEdgeLabelModel, FreeNodeLabelModel, and FreeLabelModel.

  • Interactive label editing and creation has the following new features:

    • The current label visual can be hidden while the text editor is shown to reduce visual clutter. This feature is enabled by default and can be controlled through the property GraphEditorInputMode.hideLabelDuringEditing.
    • GraphEditorInputMode and TableEditorInputMode provide new events LabelTextEditingStarted and LabelTextEditingCanceled that are raised directly before the label text editor is shown and after the label editing has been canceled, respectively.
    • Double clicking nodes and edges now opens the label editor. An existing label can be double clicked to edit the label text. This feature can be disabled with the property GraphEditorInputMode.doubleClickLabelEditingAllowed.
    • IEditLabelHelper implementations provided by the ILabel's lookup can now be used to forbid or customize the editing of individual labels. Class LabelDecorator provides a new property editLabelHelperDecorator to customize this feature.
    • GraphEditorInputMode.editLabel and TableEditorInputMode.editLabel can now be used with SimpleLabel instances. This provides editing capabilities for dummy elements such as legends, page headers or other textual elements.
    In addition, label editing has been reworked for a more consistent user experience. Especially, label editing now:
    • Uses the various callback methods on GraphEditorInputMode, TableEditorInputMode and IEditLabelHelper implementations in a consistent way, regardless of how many labels or labeled items are edited or added, and independent from how the editing/label creation process has been started (e.g. through a command or programmatically through the input mode convenience methods).
    • Determines the actual labeled item that is modified when multiple elements are selected in a consistent way.

Development Support

The documentation viewer got many improvements and corrections that make browsing the API and the Developer's Guide much more convenient. The most notable additions are

  • The new code generator provides a GUI for creating an implementation of any class and interface and optionally adds stubs for methods, properties and events you want to override
  • Improved experience on small screens and touch devices
  • Added a selection of UI themes
  • Customizable keyboard shortcuts
  • Support for favorites

Layout

  • Added new layout algorithm SeriesParallelLayouter for series-parallel graphs. Such graphs are directed graphs with a single source (a node without incoming edges) and a single sink (a node without outgoing edges) that are build using only the following two rules:
    • Series composition: The source of a subgraph is merged with the sink of another subgraph.
    • Parallel composition: The sources and sinks of two subgraphs are merged.
  • Added multi-parent support to GenericTreeLayouter. A tree node can have multiple parents that are connected to all of its siblings and share the same parents. This might come to use in organizational charts where a team answers to multiple superiors.
  • Added grid placement support for nodes and edges to IncrementalHierarchicLayouter.

Minor Features Added

Viewer

  • GraphEditorInputMode got support for cyclic click selection. This helps in conveniently selecting items that are hidden behind other items. By default, this features is bound to the Alt key being pressed. It can be disabled by setting the cyclicSelectionRecognizer property to EventRecognizers.NEVER.
  • GraphEditorInputMode now provides default action for duplicating single graph items or whole subgraphs. This also works with incomplete subgraphs, for example in a tree, it is possible to duplicate a subtree and the tree will never be disconnected.

    In addition, the new command GraphCommands.DUPLICATE_COMMAND (shortcut: Ctrl-D) and the new method GraphClipboard.duplicate can be used to duplicate selected items without altering the clipboard contents.

  • GraphEditorInputMode now provides a default action for reversing edges. To this end, the methods reverseEdge and reverseEdges have been added to GraphEditorInputMode. Also, the new command GraphCommands.REVERSE_EDGES_COMMAND (shortcut: Ctrl-R) has been added.
  • Node ports can now be moved by dragging their IHandle.
  • GraphClipboard has new properties copyItems, independentItems, and dependentItems that allow for restricting the types of items that can be copied at all, independently from their owners, or implicitly through their owners, respectively.
  • GraphViewerInputMode: The click hit test order can now be configured by property clickHitTestOrder.
  • GraphEditorInputMode and GraphViewerInputMode provide an explicit hit test order for double clicks that can be changed through the doubleClickHitTestOrder property. By default, this hit test order prefers labels over other graph elements.
  • Added new methods ClickInputMode.preventNextDoubleClick and TapInputMode.preventNextDoubleTap that can be used in event handlers for single clicks/taps to prevent that this click can become part of a double click event.
  • NodeDropInputMode can now optionally drop nodes onto leaf nodes and thus convert the leaves into group nodes. Also it is possible to drop nodes into collapsed folder nodes. For both use-cases, an opt-in property has been added and a predicate property allows for fine-grained control over this feature.
  • Similarly, leaf nodes can now be the target of a reparenting gesture if the property GraphEditorInputMode.reparentToLeavesAllowed is enabled. In this case, leaves are converted into group nodes.
  • ItemDropInputMode does now support touch gestures to Drag'n'Drop graph items into a graph.
  • Added support for deleting bends in a way that an orthogonal edge remains orthogonal after removing the bends. The new property GraphEditorInputMode.orthogonalBendRemoval enables/disables this feature.
  • GraphViewerInputMode now supports multi-selection with Ctrl+Click and marquee selection. The latter is disabled by default.
  • OverviewInputMode and the GraphOverviewControl have been optimized to improve the user experience when used on touch devices.
  • SvgExport can now correctly handle styles with external image references. This requires an asynchronous approach and therefore, the API of this class has been changed accordingly. The new API is shown in the Image Export demo. The compatibility layer describes how to map the previous API to the new one.

    In addition, characters that are not part of the Unicode Basic Multilingual Plane are now exported correctly.

  • Improved GraphModelManager to allow for easier customizations. Property useHierarchicNesting was added to allow for adding custom logic that uses a different approach to hierarchic nesting. In addition, the return types of some of the factory methods where made less restrictive to allow for further modifications.
  • FoldingManager now offers two convenience methods, updateViewStatesForNode and updateViewStatesForEdge, that will trigger update calls on IDummyNodeConverter and IDummyEdgeConverter for elements that are currently being displayed in a view. This makes it easier to synchronize state between the master graph and the folded graph views in case this is not automatically performed by the default implementation.

Layout

  • AbortHandler: Added the method hasCheckFailed that allows to query whether a check method was called after a stop or cancel event.
  • Added the interface ILabelLayoutFactory that provides methods for creating, adding and removing node/edge labels to a LayoutGraph.
  • IncrementalHierarchicLayouter: Added support for incremental group nodes (see IIncrementalHintsFactory.createIncrementalGroupHint). Incremental groups will be placed on a suitable position. The hints of their descendants are interpreted relative to the group node.
  • SimplexNodePlacer: Added the property nodeCompaction that allows to place adjacent nodes of a layer in a more compact, stacked style.
  • Added vertical alignment option for DefaultNodePlacer and SimpleNodePlacer. In addition to the previous compact child placement, siblings can now be aligned at top, center or bottom for example.
  • GenericTreeLayouter: Added support for critical edges in DefaultNodePlacer, DendrogramPlacer, SimpleNodePlacer, LayeredNodePlacer and DoubleLinePlacer. Nodes connected to a critical edge will be center aligned. This highlights the paths along critical edges in the tree.
  • GenericTreeLayouter: Added support for grouped edges in DefaultPortAssignment. Grouped edges will share the same port location at local root.
  • Added the class GroupedNodePlacer that allows GenericTreeLayouter to place siblings into different groups.
  • RecursiveGroupLayouter: Added the property InterEdgeRouter to specify the edge router that layouts the edges that cross group node bounds. Thus, it is not necessary to subclass the layouter to change inter-edge routing anymore.
  • Added the layout stage KeepStrongPortConstraintsStage which ensures that layout algorithms that cannot handle port constraints keep the ports of edges with strong port constraints.
  • Added the layout stage PortCandidateAssignmentStage which assigns edges to the ports specified by PortConstraints or PortCandidates after calling the core layout.

Improvements

Viewer

  • Simplified the API related to context menus. Namely, custom context menus need no longer implement the interface yfiles.input.IContextMenu, and thus that interface and its usages in the API have been removed. See the API Changes for details.

    In addition, the context menu implementation of the demo framework was refactored accordingly. It is now a short, standalone class that depicts the integration of a custom context menu much clearer.

    The new property ContextMenuInputMode.swallowCloseClick specifies whether a mouse click in the canvas while a context menu is open should create a node or just close the menu.

  • Modernized the CSS styling of the scrollbars of the GraphControl. The new styling was already part of the demo framework and thus used by various demos but it was not included in the library's CSS file lib/yfiles.css. Since the CSS class names have not been changed, custom styling will not be affected.

    In addition, the thumbs of the scrollbars now have a reasonable minimum size.

  • Various performance improvements for the rendering and the selection handling. This affects, amongst others, ShapeNodeStyle and styles that use a GeneralPath.
  • GraphEditorInputMode.detailSelectionRecognizer is now also applied for double clicks to determine the clicked item.
  • GraphEditorInputMode and GraphViewerInputMode don't select or focus graph items styled with a void style (VoidNodeStyle, VoidEdgeStyle, VoidLabelStyle, and VoidPortStyle). The new property voidStylesIgnored specifies whether this feature is enabled.
  • GraphEditorInputMode and GraphViewerInputMode: the new protected method shouldSelect can be overridden to determine whether an item can be selected in general.
  • OverviewInputMode: The new property margins specifies margins for the visible area of the bound GraphOverviewControl. The new protected method updateVisibleArea provides further means for customizing the visible area.
  • CompositePositionHandler: Added methods getPositionHandler and getHandle to retrieve an earlier added IPositionHandler or IHandle.
  • PortRelocationHandles now triggers the EdgePortsChanged event of the GraphEditorInputMode.
  • TableLayoutConfigurator: Improved support for routing algorithms.
  • IGraph: The collection models of graph items returned by the properties nodes, edges, etc. now support the methods remove and clear to remove graph items from the graph. Note that calling the method add is still not allowed.
  • GraphModelManager: New callback method onGraphChanged.
  • LayoutExecutor: The new property considerViewportLimiter can be enabled to let the target viewport after a layout respect the ViewportLimiter of the GraphControl.
    The ViewportAnimation has a new property considerViewportLimiter for the same purpose.
  • LayoutGraphAdapter now adds data providers that map each node, edge and label of a LayoutGraph to their corresponding IModelItem in the original IGraph. Especially, these data providers are available if a layout is run with a LayoutExecutor or the convenience methods LayoutExtensions.morphLayout and LayoutExtensions.applyLayout.
  • GeomSupport: The new method createSmoothedPath creates a new path as copy of a given one but with smoothed bends.
  • SimpleAbstractEdgeStyle: The new method updateArrows can by called from updateVisual to update the arrow visualisation if needed. Previously, the arrows had to be created anew in this case.
  • A template style now automatically updates a visual it has created if the object in the item's tag is exchanged. Note that this check considers 'reference equality' not 'value equality'.
  • CollapsibleNodeStyleDecoratorRenderer: The method addToggleGroupStateCommand is now public and static to make it easier to use it from custom code. Due to this, its signature was slightly changed.
  • IconLabelStyle: The icon is added to the hit test area for mouse clicks and marquee selection. This can be switched off by overriding IconLabelStyleRenderer.shouldHitTestIcon.
  • CanvasControl: Method fitContent now respects the ViewportLimiter. This might result in zoom levels greater than 1.0.
  • CanvasControl: The new size change detection technique SizeChangedDetectionMode.SENSOR supersedes the previous timer-based technique as default since it provides instant notification about size changes. The property sizeChangedDetection can be used to specify the desired technique explicitly.
  • DefaultDummyEdgeConverter now synchronizes the tag property of the first label if label synchronization is enabled.
  • GraphCopier has been improved to facilitate manipulation of the copied items:
    • The new events NodeCopied, EdgeCopied, LabelCopied, and PortCopied are dispatched after a model item has been copied.
    • The method getOrCreateCopy is now public to facilitate copying of, for example, node tags.
  • GraphClipboard: In hierarchically organized graphs, nodes are now pasted into their previous parent group, the group at their target position, or the root, depending on the new property parentNodeDetection.
  • All data binding classes like GraphSource and TreeSource got new methods to get the graph item for a business object and vice versa.
  • GraphSource and AdjacentEdgesGraphSource can now be used with only an edgesSource (in other words, without a nodesSource) if the property lazyNodeDefinition is enabled.
  • TreeSource got support for group and location bindings, similar to the other data binding classes. Due to this, the signature of its methods createNode and updateNode changed.
  • The HTML5 WheelEvent is now used as primary API for mouse wheel events. This does not change the behavior and the previous MouseEventWheel and MouseScrollEvent are still supported for older browsers.

Layout

  • IncrementalHierarchicLayouter: The group transposition feature can now also be used in incremental layout mode (see DefaultLayerSequencer.groupTranspositionEnabled).
  • ConstraintIncrementalLayerer: Improved handling of same layer constraints. In previous versions the layerer sometimes ignored same layer constraints even though there was a valid layering.
  • IncrementalHierarchicLayouter: More compact placement of rotated as well as stacked labels.
  • SmartOrganicLayouter: Now also considers the group node compactness if the property nodeEdgeOverlapAvoided is enabled (see property groupNodeCompactness).
  • SmartOrganicLayouter: Improved node overlap removal (see property nodeOverlapsAllowed). Now, if the scope is set to SCOPE_SUBSET or SCOPE_MAINLY_SUBSET, the number of node overlaps that cannot be removed is reduced.
  • LayeredNodePlacer: Reduced overlaps between edges and node labels for all routing styles.
  • GridNodePlacer: Corrected alignment of child nodes and edge routing when there are node labels.
  • AbstractRotatableNodePlacer.RootAlignment, DefaultNodePlacer and DendrogramPlacer: Instead of aligning bounding boxes including nodes and their labels, nodes are aligned directly with other nodes. Therefore a layout with node labels gets more compact and the alignment is consistent with that of graphs without node labels.
  • DelegatingNodePlacer: Added support for a child comparator for children of local root nodes.
  • GenericTreeLayouter now ignores labels with zero width or height in all distance calculations.
  • GenericTreeLayouter: NodePlacer implementations now also use the specified spacing as minimum distance between different subtrees.
  • PartialLayouter: Reduced the number of element overlaps if there are partial group nodes.
  • ParallelEdgeLayouter now always separates parallel edges according to their direction. In other words, edges (v,w) and (w,v) are never placed interleaved.
  • SALabeling and GreedyMISLabeling: Both algorithms now also consider the node/edge overlap penalty specified by a LabelCandidate.
  • Improved abort handling for algorithms that use ConstraintIncrementalLayerer, ConstraintLayerer and TopologicalIncrementalLayerer. For large graphs these classes may require a long runtime that cannot be canceled by using an AbortHandler.

New Demos

  • The new demo demo.yfiles.loading.browserify shows how to use yFiles with Browserify.
  • The new demos demo.yfiles.loading.amdbundle and demo.yfiles.loading.scriptbundle explain how to create a single-file bundle of a yFiles-powered application.
  • The new demo demo.yfiles.loading.noglobals shows how to use yFiles without creating an object in the global namespace.
  • Two new tutorial steps show the automatic text wrapping and clipping feature of the classes TextRenderSupport and SimpleLabelStyle.

Demo Improvements and Bugfixes

  • New modern styles for the nodes, edges, groups, and tables in the demos. These new styles show best practices with regards to both the various duties of a custom style in yFiles and good rendering performance, and last but not least they provide a contemporary look for the demos.
  • The context menu of the demo framework is now a short, standalone class that depicts the main parts of the implementation and integration of a custom context menu much clearer.
  • Improved the compatibility of the demo require.js implementation with the one of RequireJS and the AMD specification.
    • Return values are now passed to callbacks, as required by the AMD specification.
    • The baseUrl can now be configured with the method config in the same way as RequireJS.
    • Callbacks of the require function are now always executed asynchronously, like it is done by RequireJS.
  • The Layout Style demos got support for the new features of the layout part.
    • The hierarchic layout style now has settings for (overall) grid placement and stacked placement of the nodes within a layer.
    • Added a settings panel and a sample graph for the new series-parallel layout style.
    • The tree layout style automatically uses its new multi-parent feature if appropriate for the current graph.
  • The File Operations demo now shows in detail how a graph can be saved as file download.
  • Reorganized the Incremental Hierarchic Grouping demo to make the relevant layout configuration more clear. In addition, the demo now uses the FixNodeLayoutStage that is part of the library instead of its custom implementation.
  • BPMN Editor demo: The bpmn-layout and bpmn-viewer modules now list all of their dependencies to make AMD loading easier. To reduce startup time, the layout module is now loaded lazily in the demo when the first layout is actually calculated.
  • WebWorker and Node.js demos: The Graph-To-JSON converter now supports group nodes. Moreover, the content rectangle is updated correctly after a layout calculation and only a single undo step is created for each calculation.
  • Performance improvements for the node styles in the Custom Styles tutorial. When updating, these styles no longer set new transform if nothing actually has changed. Setting a new transform can trigger a complete re-paint even if the values of the transform remain the same.
  • HTML Label Style demo: Corrected the placement of large labels.

Incompatible Changes

Changes in Default Behavior

  • CanvasControl: The events Mouse2DEntered and Mouse2DExited have been erroneously fired when the mouse moved between inner elements. Now, these events are only fired when the mouse enters or leaves the bounds of the control, which is the intended and documented behavior.

    In addition, if a mouse button is pressed while leaving the bounds of the control, the Mouse2DExited event is now deferred until the button was released. As a result, this event does not interfere with the typical events of a mouse click and custom click handling code typically needs no special handling for this event. See the notes about known issues with mouse events for other peculiarities.

    Similarly, the methods onMouseEnter and onMouseLeave of Control were erroneously invoked in these cases. This has been corrected, too.

  • TextEditorInputMode now ensures that the TextBox is visible in the viewport when starting editing. This behavior can be adjusted by creating a custom subclass and overriding ensureVisible().
  • FoldedGraph.isDummy now throws an ArgumentOutOfRangeException for labels and ports that are not part of this view. Previously, this method returned true for such items. Since this exception is already thrown for nodes, edges, and bends that are not part of this view, the behavior is now the same for all types of graph items.
  • GraphEditorInputMode now by default supports the new GraphCommands.DUPLICATE_COMMAND that is bound to keyboard shortcut Ctrl-D. This new behavior can be turned off with the duplicateAllowed property.
  • The clipboard now supports copying and pasting of items independently from their owning elements. For example, single selected labels can be copied to other elements, as well as edges without their source and target nodes. This behavior can be reverted to the old behavior by setting GraphClipboard's independentCopyItems to GraphItemTypes.NONE.
  • GraphEditorInputMode now by default allows for reversing selected edges using the Ctrl-R keyboard shortcut and the new GraphCommands.REVERSE_EDGE_COMMAND. This new behavior can be turned off with the edgeReversalAllowed property.
  • ClickInputMode: If activeButtons includes MouseButtons.RIGHT, the original right click event is marked as handled if ClickInputMode's event handlers mark the higher level click event as handled.
  • GraphEditorInputMode and GraphViewerInputMode: The default click actions that change the selection and create new nodes are only triggered on left mouse clicks now.
  • Previously, ports at nodes and edges that were copied and pasted to and from the clipboard were all copied, even if there were no edges attached to them after the operation. Now those empty ports are not copied/pasted anymore unless the PortDefaults' autoCleanup property is set to false or they were unoccupied before the operation already. In order to restore the old behavior, where all ports were copied regardless of whether edges were adjacent to them, make sure to include them in the core predicate, since this behavior change just affects ports that had previously not been accepted by the core predicate function.
  • CanvasControl: Method fitContent now respects the ViewportLimiter. This might result in zoom levels greater than 1.0.
  • CanvasControl: The constructor sets the attribute tabindex="0" on the HTML element of the control if no such attribute is present. Previously, the value 1 was set which inadvertently resulted in a high priority for keyboard focus changes. You can set any other priority at any time.
  • GraphEditorInputMode's NodeCreated event may now report nodes that are not part of the graph, when the user has dropped a node via NodeDropInputMode and its new folderNodeParentsAllowed property is enabled. By default this feature is disabled, though.
  • IReparentNodeHandler's isValidParent method may now also be queried if the new property reparentToLeavesAllowed of GraphEditorInputMode is enabled. By default this property is disabled, though. Note that the method will also be queried if the reparent handler is used outside of the context of GraphEditorInputMode.
  • IValueSerializerContext: In GraphML-writing code, the property instance now provides the object that should be converted, not the parent object. If you need to access the actual parent object, you can use the owner property on the GraphMLValueSerializerContext implementation of this interface.
  • The event GraphMLIOHandler.QueryReferenceId is no longer fired for MarkupExtensions and other proxy objects for serialization. Now, it is only fired for the original object references.
  • GraphEditorInputMode and GraphViewerInputMode: By default, graph items styled with a void style (VoidNodeStyle, VoidEdgeStyle, VoidLabelStyle, VoidPortStyle) won't be selected and won't get the focus.
  • GraphEditorInputMode's clickHitTestOrder property default value has changed. Now it does not contain the redundant GraphItemTypes.ALL as the last element in the array anymore.
  • GraphViewerInputMode: By default, clipboard commands are now disabled. This can be controlled with the new property clipboardCommandsEnabled.
  • The default keyboard shortcut for deselecting elements (GraphCommand.DESELECT_ALL_COMMAND) has been changed to Ctrl+Shift+A. Ctrl+D is now the default shortcut for duplicating selected elements (GraphCommand.DUPLICATE_COMMAND). The latter can be disabled via the duplicateAllowed property.
  • GraphEditorInputMode.shouldBeMarqueeSelected is no longer queried by the Paste command to determine the items which should be selected after paste. Instead, the new method GraphEditorInputMode.shouldBeSelectedAfterPaste is queried. Note that GraphEditorInputMode.shouldBeMarqueeSelected still is queried to determine the items which should be selected by marquee selection.
  • Now, all pasted items are selected after a paste (previously: only nodes, edges, and bends). This can be configured via the new pasteSelectableItems property in GraphEditorInputMode and the corresponding shouldBeSelectedAfterPaste method.
  • The hit test order for double clicks in GraphEditorInputMode and GraphViewerInputMode is now controlled through the dedicated doubleClickHitTestOrder property. By default, this hit test order prefers labels over other graph elements.
  • If ClickInputMode is configured to deliver both single and double clicks, double clicks are not reported if the first click has created a new node or if cyclic selection is currently active. The same holds for TapInputMode and single/double taps.
  • The visualization of the HandleType.ROTATE is now a single circle, its very thin central point has been removed.
  • The segment index for label model parameters of SliderEdgeLabelModel and SideSliderEdgeLabelModel now is related to the visible segments for edges styled with PolylineEdgeStyle.
  • If an IEditLabelHelper implementation is present in an ILabel's lookup, its editLabel method is now called in addition to an eventual owner's edit helper when the label text is edited. If implementations are present for both the label and the owner, editing is only allowed if both helpers return true. Additionally, the predicate method GraphEditorInputMode.shouldLabelBeEdited always has to return true, whether edit helpers are present or not.
  • The label that is edited is now determined in the following order:
    1. If a label is explicitly provided as a command parameter or through a convenience method or is the only selected element, it is edited if the previous condition is satisfied. No other candidates are tried in that case.
    2. If a label owner is explicitly provided as a command parameter or through a convenience method, or is the only selected element, the first label that satisfies the condition above is edited if the previous condition is satisfied. If no such label exists, a new label is added, provided that the owner allows adding. In either case, no other candidates are tried.
    3. The first selected label for which the previous condition is satisfied.
    4. If multiple label owners are selected, the first owner that has a label for which the previous condition is satisfied (in which case that label is edited).
    5. If the method IEditLabelHelper.editLabel provides, for either an editable label or its owner, a different label instance, this instance is edited instead.
    6. Otherwise, a label is added if an eligible owner can be found (see below).
  • If an IEditLabelHelper implementation is present in an ILabeledItem's lookup, its addLabel method is called to determine whether a label may be added and provide a suitable label instance. Additionally, the predicate method GraphEditorInputMode.shouldLabelBeAdded always has to return true, whether edit helpers are present or not. If the new label should be edited interactively after its creation (the default behavior), it must be editable, too, following the rules above. Therefore an IEditLabelHelper implementation usually should allow editing of label instances that it has created itself in addLabel.
  • The label owner for which a label is added is now determined in the following order:
    1. If a label owner is explicitly provided as a command parameter or through a convenience method, or is the only selected element, a label is added if the previous condition is satisfied. No other candidates are tried in that case.
    2. If multiple label owners are selected, the first one for which the previous condition is satisfied.
  • IncrementalHierarchicLayouter: Creating layer constraints or sequence constraints using a disposed of factory now throws an error (see LayerConstraintFactory and SequenceConstraintFactory).
  • SALabeling and GreedyMISLabeling: Changed LabelCandidates default for overlap penalty of nodes and edges from 0 to 1. This means label overlaps are now considered more severe.

API Changes

  • The event SizeChanged and related methods and properties have been moved from Control to CanvasControl. In addition, some timer-related properties have been replaced by more general variants to account for the new SizeChangedDetectionMode.SENSOR size change detection mode. Likely, customer code is not affected by neither change since the other classes that extend Control did not use the size changed-feature anyways.
  • Control: Due to the improved event handling policy, the properties preventDefault, preventContextMenuPropagation, and preventEventPropagation are no longer needed and have been removed. Instead, the new properties preventKeyboardDefault, preventPointerDefault, and preventContextMenuDefault can be enabled to prevent the default action of the respective types of events.
  • Changed SnapLine to support non-orthogonal snap lines as well: its properties from and to have been changed from type number to PointD, its property orientation was removed, and its constructors have been changed accordingly.

    Orthogonal snap lines are now modeled by class OrthogonalSnapLine. It extends SnapLine and provides the property orientation. Existing API uses either SnapLine or OrthogonalSnapLine, depending on whether it works only with orthogonal snap lines or not.

    As a consequence, in class SnapLineSnapResult, the property snapLine returns a non-orthogonal SnapLine and the property delta returns a PointD instead of a number. API related to GraphSnapContext still works only with orthogonal snap lines and uses OrthogonalSnapLine.

  • The key property on SingleLineSnapLineVisual, FixedDistanceSnapLineVisual, and InBetweenSnapLineVisual, has been made read only.
  • GraphModelManager's factory methods for creating the installers now have a less restrictive return type. The default implementation still returns the same types as before, though.
  • GraphClipboard's factory methods for creating the predicates for the various cut and copy operations now require a second argument that is the graph that the predicate is working on. Usages typically use the graph in the graph control where the selection is also being used. If the default graph selection implementation is used. The graph instance can be obtained from its corresponding property.
  • GraphModelManager's installer related properties now use a weaker return type to simplify subclassing with new functionality. The instances used are the same and can be down-casted accordingly to the more specific types as documented.
  • IItemFactory: Added method createRedirectedGroupEdge.
  • GraphClipboard's protected method copyGraphToRoot which was called by cut, copy, and paste to invoke the GraphCopier has been split: copyGraphToRoot now is called only by cut and copy. paste now invokes the new method pasteSubsetWithTargetAndCallback.
  • The type of GraphMLAttribute's serializable property has been changed from boolean to the enum GraphMLSerializationMode.
  • GraphEditorInputMode and TableEditorInputMode: return type of callback methods onAddLabel and onEditLabel has been changed from void to boolean. The return value should specify whether the operation in question was successful.
  • Context menus need no longer implement any interface, and the interface yfiles.input.IContextMenu was removed. The members using that interface, namely the properties ContextMenuInputMode.menu, ContextMenuInputMode.clearMenu and PopulateContextMenuEventArgs.contextMenu, and the method ContextMenuInputMode.createMenu were removed as well. Since users create the context menu by themselves, there was no real need for these API members.

    Note that you'll now have to explicitly set the property PopulateItemContextMenuEventArgs.showMenu to true in your listener for the event PopulateItemContextMenu to show your menu. This was previously done automatically by the input mode if the property IContextMenu.isEmpty returned false.

  • CollapsibleNodeStyleDecoratorRenderer: The method addToggleGroupStateCommand is now public and static, and its signature was slightly changed.
  • TreeSource: Due to the new support for group and location bindings, the signature of its methods createNode and updateNode changed.
  • ToolTip does no longer extend the class Control. This has no effect on its behavior.

Bugfixes

Viewer

  • CanvasControl: The events Mouse2DEntered and Mouse2DExited have been erroneously fired when the mouse moved between inner elements. Now, these events are only fired when the mouse enters or leaves the bounds of the control, which is the intended and documented behavior.

    Similarly, the methods onMouseEnter and onMouseLeave of Control were erroneously invoked in these cases. This has been corrected, too.

  • Properties ShinyPlateNodeStyleRenderer.radius, ShinyPlateNodeStyleRenderer.brush, ShinyPlateNodeStyleRenderer.pen and BevelNodeStyleRenderer.radius were not used consistently.
  • Fixed memory leak that occurred when CreateEdgeInputMode was uninstalled.
  • CreateEdgeInputMode: Fixed some problems with mixed mouse and touch input.
  • When using an IEditLabelHelper and adding a label interactively, the helper's editLabel callback was called instead of addLabel.
  • Newly added labels could have had an empty size when an IEditLabelHelper instance was registered.
  • When a highlighted item was removed from the graph, the highlight was not cleaned up.
  • Reparenting an empty group node displayed the target node highlight around the reparented node.
  • The modified MoveInputMode created by MainInputMode.createMoveUnselectedInputMode changed the cursor to indicate a movable object even when the modifierRecognizer disabled moving.
  • When both a group node and its child node were resized together the group node bounds shrunk to its original bounds once the child had reached the original bounds.
  • CreateEdgeInputMode now copies the dummy edge's tag to the created edge. This could have caused issues when a listener for the event EdgeCreationStarted set a custom tag on the dummy edge.
  • When the pressed status of the Shift key changed during a reparenting gesture of a node, the bounds of its containing group node were not immediately updated.
  • The secondary multi-tap gesture was not recognized correctly.
  • Labels whose positions were determined by NinePositionsEdgeLabelModel, SliderEdgeLabelModel, and SideSliderEdgeLabelModel might have disappeared when one or more edge segments were hidden under the source or target node.
  • SnapContext: Snap results with a null tag were erroneously always discarded.
  • BevelNodeStyle: Fixed update of drop shadow after radius has been changed.
  • IconLabelStyle: Method getBounds in IconLabelStyleRenderer returned a valid rectangle even if the label layout was invalid. As a consequence, isVisible erroneously returned true for labels with invalid bounds.
  • The name property of the class GraphMLAttribute was not considered during deserialization.
  • Write events in GraphML were not always raised.
  • After setting an ICanvasObjectGroup's visible property to false the group was still visible.
  • CanvasControl.ensureVisible hasn't worked for bounds larger than the current viewport.
  • Setting the view point on a CanvasControl with a width or height of 0.0 could cause an exception if a ViewportLimiter was enabled.
  • GraphCopier threw an error if the source and the target graph were identical.
  • When the SelectionPaintManager was disabled and a custom FocusPaintManager was used nodes styled with TemplateNodeStyle might not always have been updated after selection changes.
  • GraphEditorInputMode and GraphViewerInputMode now respect their respective multiSelectionRecognizer for extending an existing selection via marquee.
  • Fixed TableEditorInputMode exhibiting problematic behavior under certain circumstances when the GraphControl's graph is replaced.
  • GraphML could write incorrect values for bend tags.

Layout

  • SimplexNodePlacer fixed bug that disabled label compaction feature.
  • AssistantPlacer fixed placement of assistant nodes. When all children of a node are assistants, they are all placed left/right.
  • IncrementalHierarchicLayouter: Fixed bug that may cause an incorrect order of elements if the graph contains sequence constraints.
  • IncrementalHierarchicLayouter: Fixed problem that may cause a very long runtime if the layouter is applied in incremental mode and the graph contains sequence constraints.
  • IncrementalHierarchicLayoutModule: Now also considers incremental group nodes.
  • IncrementalHierarchicalLayouter: Fixed bug that caused the maximum duration values specified for Layerer, Sequencer and NodePlacer to be overridden and not considered during the hierarchic layout.
  • IncrementalHierarchicLayouter: Fixed error that may appear in incremental layout mode if there are group nodes that contain non-incremental elements.
  • GenericTreeLayouter: Fixed root alignments to only take the child node bounds into account without considering edge segments in the subtree.
  • IncrementalHierarchicLayouter: Fixed orientation of edge labels on selfloops connected to a group node.
  • IncrementalHierarchicLayouter: Fixed error that occurred if an incremental group node has only incremental descendants.
  • IncrementalHierarchicLayouter: Fixed problem that caused bad results when assigning top or bottom layer constraints (i.e., LayerConstraintFactory.addPlaceNodeAtTopConstraint or LayerConstraintFactory.addPlaceNodeAtBottomConstraint) to fixed elements.
  • IncrementalHierarchicalLayouter: Fixed a bug that caused collinear bends in some edge routes.
  • DoubleLinePlacer: Fixed the distance between the local root and the upper line to match the specified spacing. The distance between the two lines can now be defined in relation to the spacing.
  • ClassicTreeLayouter: Fixed StackOverflow exception occurred in trees with high depth.
  • TreeReductionStage: Fixed wrong handling of group nodes which may cause a WrongGraphStructure error as well as broken routes of edges incident to group nodes.
  • SimpleNodePlacer: Fixed broken edge routes that may appear for edges on nodes with external labels if integrated node labeling is enabled.
  • CopiedLayoutGraph: Fixed an error that occurs when nodes or edges are added to the copied graph without removing them before calling commitLayoutToOriginalGraph.
  • ShortestPaths: Fixed an error that occurred when applying the Dijkstra or Bellman-Ford algorithm to an empty graph.

yFiles for HTML 1.2.1.4 - Changes Since 1.2.1.3

Bugfixes

  • SimpleLabelStyle: In multi-line labels, each line repeated the text of the first line if stringTrimming was set to another value than StringTrimming.NONE. Since the actual bug was in class TextRenderSupport, customer code that used that class directly was affected as well.
  • IncrementalHierarchicLayouter: In non-incremental mode, sequence constraints may not have been respected.
  • IncrementalHierarchicLayouter: Optimized the sequence of group nodes if 'place at head/tail' sequence constraints are defined.
  • GraphSource, AdjacentEdgesGraphSource, and AdjacentNodesGraphSource: Corrected several problems in the method updateGraph() that could result in errors like 'Key not found' and 'Edge not in this graph'.

yFiles for HTML 1.2.1.3 - Changes Since 1.2.1.2

Bugfixes

Viewer

  • Event location of the various TapInputMode events was not always updated properly.
  • Orthogonal edge editing could throw an error if edges were removed during interaction with an orthogonal edge.
  • Fixed problems when exporting SVG content from the CanvasControl if HTML5 Canvas rendering was used and non-default viewport settings were applied. As a result, images could have been clipped incorrectly.
  • Fixed a regression introduced in 1.2 which rendered the shapeRendering and imageRendering properties in CanvasControl useless. The properties are now applied correctly to the SVG DOM during rendering and image export.
  • In Internet Explorer, DragOver events could have been reported although the actual mouse location did not change. This happened if the DOM element under the mouse pointer was switched without the mouse being moved, and possibly resulted in a loop and excessive CPU usage, e.g. during drag and drop operations onto the GraphControl with preview and snapping enabled.
  • Included a workaround for a shortcoming of Internet Explorer: multiple consecutive whitespace characters in label text are displayed as a single space. The workaround replaces each non-newline whitespace with the unicode non-breaking space character \u00A0 . This workaround must be enabled explicitly. Its details are described in the Known Issues .
  • GraphControl: Prevent an error during updateVisual if the GraphControls's HTML elements were removed by external code. This could happen especially in Internet Explorer if one of the parent elements of the GraphControl was cleared with element.innerHTML = "".
  • GraphML serialization could not correctly handle undefined values and has thrown an error instead. The new property SerializationProperties.UndefinedHandling controls how undefined values are serialized.
  • MouseEventArgs.button was set to MIDDLE for all but the left and right mouse button. This two were correctly reported. As a consequence, Mouse2DEventArgs.changedButtons had the same error.
  • GraphSourceBase.updateGraph threw an error if the object instances in groupsSource had been changed. This error affected GraphSource, AdjacentNodesGraphSource, and AdjacentEdgesGraphSource.
  • AdjacentEdgesGraphSource.updateGraph: instead of retaining edges that should remain in the graph, the edges were deleted and re-created anew.
  • Correct the Developer's Guide section about custom XML namespace mappings for GraphML serialization and showcase the described annotations in the Custom Styles tutorial and other demos.

Layout

  • IncrementalHierarchicLayouter: corrected wrong node placements in graphs with groups if sequence constraints are used.
  • Polyline.EdgeRouter: Fixed rare error that may occur for graphs where only a subset of edges is routed, see EdgeRouter.SphereOfAction.

yFiles for HTML 1.2.1.2 - Changes Since 1.2.1.1

Bugfixes

Viewer

  • RotatedSliderEdgeLabelModel: A bug could cause the label to lie at infinite coordinates. This could only occur in very rare occasions if the first or last edge segment is orthogonal and the source or target port is completely outside the node boundaries. As a result, the label becomes just invisible in most cases, but code that does not properly handle infinite coordinates could possibly break due to numeric instabilities.
  • An edge whose source or target port is owned by another edge (edge-to-edge connection) was always drawn in the background if grouping was enabled instead of in front of the related groups. Now, such an edge is drawn in front of these groups, with the same z-index as a similar edge from node to node would get.
  • Nodes can now be reparented with a touch gesture, by touch-dragging a node onto its new parent. Previously, that was only possible with a mouse drag.
  • MoveViewportInputMode no longer fires the DragFinishing and DragFinished events for simple clicks without any mouse movement.
  • GraphViewerInputMode: The event CanvasClicked specifies now the correct type for its event args, that is ClickEventArgs.
  • In Internet Explorer, Mouse2DMoved events could have been reported although the actual mouse location was not changed. This happened if the DOM element under the mouse pointer was switched without the mouse being moved, and possibly resulted in a loop and excessive CPU usage.
  • Moving the focus to the left was not possible since the command was not connected to the intended keyboard shortcut Control + Left Arrow.
  • NodeDefaults, EdgeDefaults and all other Defaults: it was erroneously possible to assign null to the style property. Now, the property throws an ArgumentNullException in this case.
  • GenericYList: Calling insert on an empty list has thrown an exception.
  • Custom handles for graph items might not have been updated correctly after changes of the selection due to a problem in InputModeController. The default handles were not affected by this problem.

Layout

  • CircularLayouter: Fixed bug that may cause node overlaps.
  • CopiedLayoutGraph: Fixed problem that may cause movement of label boxes in the original graph even if method CopiedLayoutGraph.commitLayoutToOriginalGraph is not called.
  • IncrementalHierarchicLayouter: Fixed label placement for octilinear selfloops with the same side constraints for source and target port.
  • IncrementalHierarchicLayouter: Fixed rare error that may appear in incremental layout mode if there are group nodes that contain non-incremental elements.

Demo Improvements and Bugfixes

  • Deployment tool: The default blacklist of the obfuscation step contains now much more names of common HTML5 and JavaScript APIs. Thus, the tool will no longer erroneously obfuscate these API usages in your source code.
  • All demos that use a LayoutExecutor or the morphLayout method now set a custom finishHandler that checks for exceptions during the layout calculation and handle them appropriately. If a custom finishHandler is set, handling such exceptions is its responsibility.

Documentation Viewer Improvements

  • Camel-Case search results were not listed in the search results page.
  • Navigating to a type member now automatically expands the member's documentation.
  • Typing now automatically focuses the search field.
  • Improved layout of the search results page.
  • The middle mouse button now closes tabs.
  • Added a "Constants" category for static final fields.
  • Type parameters were not correctly replaced in type parameter bounds.
  • The quick search results box did not always close when choosing a search hit.
  • Improved linking from overrides and implementations to the overridden/implemented members.
  • Fixed sporadic error messages about circular JSON structure.
  • The type member overview bar sometimes highlighted the wrong member section.
  • Types that are mentioned in the Developer's Guide are now considered more important search hits.
  • Inherited member documentation was sometimes missing.
  • Tables were not rendered correctly in Internet Explorer 9.
  • The viewer sometimes did not start correctly in Internet Explorer 9.
  • "Show Usages" now also shows developer's guide references.
  • Searching for event add/remove methods did not work.
  • Filtering the Developer's Guide tree view now works correctly.
  • Links to relevant demo applications were missing for some API members.
  • Closing a tab sometimes opened an additional tab with a nonfunctional URL.

yFiles for HTML 1.2.1.1 - Changes Since 1.2.1

This bugfix release brings improvements for the new documentation viewer and for some of the demo applications. The yFiles for HTML library is not changed by this release, except for the incremented version number.

Demo Improvements and Bugfixes

  • Include the new Events demo and the new Sparkline Styles demo in the Viewer package.
  • Layout Styles demo: The initial layout might have failed because the needed module yfiles/layout-misc was not properly 'required'.
  • All demos with a layout algorithm now use the MinNodeSizeStage to gracefully handle graphs with nodes with a width or a height of '0'. Without that stage, the layout will throw an exception if the graph contains such a node.
  • In some cases, errors did not trigger the error reporting dialog but were only shown in the developer tools of the browser.
  • Mindmap demo: Moving nodes without text resulted in an error.
  • Mindmap demo: If opening the initial data file fails, the demo now shows a fallback graph.
  • ReshapeHandleProvider demo: Shrinking the nodes that preserve their aspect ratio no longer throws an error when their width or height becomes '0'.

Documentation Viewer Improvements

  • The drop-down menus of the member navigation bar were not visible.
  • Added missing images for some API pages.
  • Camel case search hits were visible only in the quick search results box. They are now also listed on the search results page.
  • Because the number of search results was unlimited, the browser would freeze for searches with a large number of hits. The maximum number of search results is now limited.

yFiles for HTML 1.2.1 - Changes Since 1.2.0.6

The main focus of this release is on new and enhanced tools for developers and on more and improved demo applications.

The yFiles for HTML library in this release maintains compatibility with the previous versions of 1.2 and brings small improvements and corrections like a regular bugfix release. All users of previous versions of 1.2 are therefore strongly encouraged to update to this release.

Enhanced Development Support

  • Support for IntelliSense for the yFiles API in Visual Studio 2012 and newer. That includes statement completion, parameter information for methods, and descriptions in the Quick Info pop-ups.
  • The new documentation viewer makes it much easier to quickly find specific API and Developer's Guide documentation.
  • Various improvements and corrections of the documentation in yfiles-api.js: Removed left over private API members, replaced invalid annotations, added @static annotations, fixed links to events and framework classes, improved documentation for inherited members, improved the formatting, added information about runtime complexity and preconditions of algorithms.
  • New Grunt-based deployment tool that replaces the previous Java-based obfuscator and offers additional features: It can combine the three files that form a yFiles module into a single file and simplify the yFiles AMD 'define' statements in a standard conform way. See the tool's description for more details.
  • The tool yfiles.help now shows the inheritance hierarchy and implemented interfaces of yFiles types.
  • Method and property parameter checks now display which parameters were wrong instead of just warning about a mismatch.

New and Improved Demos

  • Added install and start scripts for a local Node.js Express server that can serve the demo content. Using a server prevents security issues when running the demo applications directly from the filesystem.
  • The demo demo.yfiles.layout.LayoutStyles now provides a convenient graphical user interface to explore the vast configuration options of the most used yFiles layout algorithms.
  • Added new showcase application demo.yfiles.graph.mindmap.
  • The new demo demo.yfiles.graph.basiclayouter can serve as a starting point for custom yFiles for HTML applications.
  • Added new demo demo.yfiles.angular that shows the integration of yFiles for HTML with Angular JS.
  • Added new demo demo.yfiles.graph.events that demonstrates the various events of the input mode, the graph control, and the graph.
  • Added new demo demo.yfiles.style.sparkline that shows how to use a third party visualization framework for a custom node style.
  • Added new demo demo.yfiles.loading.nodejs that runs a yFiles layout algorithm in a Node.js server.

Improvements and Corrections

  • Prevent overlaps of collapse buttons and group node labels in several demos.
  • Simple Custom Style Demo and Style tutorial: Show a custom group node style.
  • Simple Custom Style Demo and Style tutorial: Label didn't show line breaks created with Ctrl+Return.
  • Image Export Demo: Prevent timing issues by calling the export code in an event handler of the load event instead of calling it directly.
  • Completely revised the Simple Dojo Demo: More concise and clean code, use of modern Dojo syntax and theme.
  • The File Operations demo now uses a Node.js server for the server-based load/save operations.
  • All Data Binding demos now use yfiles.drawing.StringTemplateNodeStyle instead of yfiles.drawing.TemplateNodeStyle since it is better suited for this use case.
  • Preferred Label Placement Demo: Switched off the label style's autoFlip feature so the "Add 180° on Right Side" option has a visible effect.
  • Bpmn Editor Demo: The implementation of the methodConnectedIconLabelStyle.isVisible was not correct, resulting in a disappearing icon during movements.
  • Bpmn Editor Demo: Make sure that a new label of a pool node gets a suitable location by using a custom EditLabelHelper in PoolNodeStyle.
  • The StylePanel used for the palette in several demos and some other helper GUI components are now implemented in plain JavaScript/HTML and no longer extend class yfiles.canvas.Control.
  • Various code and documentation improvements in the Input demos, for example switched off unnecessary interaction to highlight the main point of each demo.
  • Various smaller code improvements in the Getting Started tutorial.
  • All demos that execute a layout and set a custom finishHandler now check for exceptions during the calculation and handle them appropriately. If a custom finishHandler is set, handling such exceptions is its responsibility, and thus, such exceptions were previously silently discarded in these demos.
  • Context menus are now opened centered on the GraphControl if the context menu key is pressed. Demo code shows how to correctly handle this key event in Chrome, Firefox, and Internet Explorer.
  • Context Menu Demo: Fixed context menu opening in empty canvas locations.
  • All demos: Added links to related sections in the Developer's Guide and the API doc.
  • All demos: Realize private helper methods as private functions to keep the demo API concise.

Minor Improvements

  • The rendering performance of the built-in node styles has been optimized, especially in Chrome and Internet Explorer.
  • GraphViewerInputMode and GraphEditorInputMode: The child clickInputMode now delivers both left and right clicks.
  • OverviewInputMode and GraphOverviewControl have been optimized to improve the user experience when used on touch devices.
  • OverviewInputMode can be customized more easily. Minor modes can be replaced and adjusted, as well as the list of available default command bindings can be modified.
  • The tooltip is now a child of the <body> instead of the <html> element.
  • The adapter classes GraphSource, AdjacentNodesGraphSource, AdjacentEdgesGraphSource, and TreeSource now accept IEnumerables as values for the properties nodesSource, edgesSource and groupsSource, in addition to arrays and plain JavaScript objects.

Bugfixes

  • DefaultArrow.length did not take the scale factor into account, sometimes leading to gaps between the edge and the arrow.
  • Custom selection visualizations using EdgeStyleDecorationInstaller were not animated correctly.
  • Custom selection visualizations using EdgeStyleDecorationInstaller in DecorationZoomMode.MIXED or DecorationZoomMode.VIEW_COORDINATES did not work correctly together with BridgeManager.
  • EdgeStyleDecorationInstaller can now be used with self loops without bends, too.
  • ClickInputMode: Canceling the mode during clicks didn't work correctly and as a result, the location reported for the next click might have been wrong.
  • GeneralPath.transform and other GeneralPath methods using Matrix2D applied the transformation matrix incorrectly in the case of a rotation.
  • Running any label placement algorithm had no effect for node/edge labels if the properties removeNodeOverlaps/removeEdgeOverlaps were enabled because all potential candidates were erroneously rejected.
  • NavigationInputMode tries to request the mutex when an expand/collapse or enter/exit command is executed. This fixes an issue where ClickInputMode was inadvertently handling the click on a group collapse button in case that ClickInputMode.clickHandlingMode was set to DOUBLE_CLICK_ONLY.
  • Included a workaround for a problem with the context menu key in Google Chrome. Since the workaround requires auxiliary changes in customer code, it must be enabled explicitly. The details are described in the Known Issues .

Changes in Default Behavior

  • GraphEditorInputMode and GraphViewerInputMode: The default click actions that change the selection and create new nodes are only triggered on left mouse clicks now.

yFiles for HTML 1.2.0.6 - Changes Since 1.2.0.5

Bugfixes

  • The validation of a license that contains a watermark always failed for users of Internet Explorer with a Finnish locale. Only this specific setup is affected.
  • UndoEngine: due to incorrect calculation of time, successive commands that should have been part of the same undo unit were in fact placed in different units.
  • Group nodes were resized unexpectedly when moving them together with their children if the children were selected before the group.
  • GraphML serialization of arrays was broken when the file yfiles-typeinfo.js was included.
  • The modules yfiles/complete and yfiles/layout did not list all modules from the layout part as dependencies. yfiles/layout-familytree, yfiles/layout-orthogonal-compact, yfiles/layout-polyline, and yfiles/layout-radial were missing.

Layout

  • MultiPageLayouter: Fixed bug that caused that an AbortHandler attached to the input graph was ignored.
  • IncrementalHierarchicLayouter: Fixed routing style violations in octilinear grouped edges.
  • MultiPageLayouter: Fixed error that may occur for specific mappers for the key MultiPageLayouter.EDGE_ID_DP_KEY.
  • IncrementalHierarchicLayouter: Fixed error that could occur when octilinear edges are attached to group nodes.
  • HVTreeLayouter: Fixed bug that may cause edges with reversed direction if the layout isn't run in buffered mode.
  • PortCandidateSet: Fixed bug that caused method findMatchingCandidate to return the entry with the highest cost instead of the lowest cost if the candidate matcher is created with method PortCandidateSet.createMatcher.
  • DirectedOrthogonalLayouter: Fixed bug that caused an error if a mapper for the key PortConstraintKeys.SOURCE_GROUP_ID_DP_KEY is registered to the input graph but no mapper for the key PortConstraintKeys.TARGET_GROUP_ID_DP_KEY is registered.
  • ComponentLayouter: Fixed bug that caused an error if the style is set to yfiles.layout.ComponentArrangementStyles.MULTI_ROWS_HEIGHT_CONSTRAINT or MULTI_ROWS_HEIGHT_CONSTRAINT_COMPACT and all components exceed the preferred height.
  • IncrementalHierarchicLayouter: Fixed bug that caused first or last segments of edges to be too short to span all associated labels.
  • MultiPageLayouter: Fixed bug that may cause non-orthogonal edge routes.
  • TreeReductionStage: Fixed bug that may cause a WrongGraphStructure error if the input graph contains group nodes with incident edges.
  • TreeLayouter: Fixed bug that may cause an error if the input graph is a CopiedLayoutGraph that consists of multiple connected components and the layouter uses the LayeredNodePlacer, if the property childPlacementPolicy is set to yfiles.tree.ChildPlacementPolicy.ALL_LEAVES_ON_SAME_LAYER.

yFiles for HTML 1.2.0.5 - Changes Since 1.2.0.4

Bugfixes

  • Strings where the last entry would consist of a single character were not tokenized correctly.
  • Obfuscator: Building the obfuscator failed because the download location of one of the prerequisites of Mozilla Rhino (xmlbeans) is no longer valid. As a workaround, that library is now downloaded from the new location in advance.
  • yfiles.lang.Class.findMembers and related methods like getMembers could return incorrect results.
  • Utility method yfiles.help.createStub was creating incorrect code for 'default' constructors.
  • TemplateNodeStyle, StringTemplateNodeStyle: In Internet Explorer, some elements in template defs sections were removed from the DOM by garbage collection even if still referenced.
  • TemplateNodeStyle, StringTemplateNodeStyle: Elements in defs sections within a template script tag, that are not part of a certain template were never cleaned up if not needed anymore.
  • Pen#lineJoin default value attribute differed from the actual default value PenLineJoin.MITER.

Automatic Layout

  • IncrementalHierarchicLayouter and RankAssignments: Fixed possible exception that may occur if the maximal duration of the algorithm is limited.
  • IncrementalHierarchicLayouter: Fixed bug that may cause overlaps of edge labels with preferred placement at source/target.
  • polyline.EdgeRouter: Fixed rare exception that mainly appears if there are overlapping nodes.
  • PartialLayouter: Fixed bug that may cause broken edge routes for edges incident to incremental group nodes if option routeInterEdgesImmediately is enabled.
  • CompactOrthogonalLayouter: Fixed possible exception caused by nodes without node-ids. This problem may only appear if the inter edge router is set to ChannelInterEdgeRouter.

yFiles for HTML 1.2.0.4 - Changes Since 1.2.0.3

Bugfixes

  • Corrected an error in the image export that prevented creating images for (text) labels with non-ASCII characters. Ultimately, the problem was in the method SvgExport.exportSvgDataUrl.
  • When both a group node and its child node were resized together the group node bounds shrunk to its original bounds once the child had reached the original bounds.
  • Fixed problem in LayoutGraphAdapter where label candidates for edge labels were not always determined correctly.
  • RotatedSideSliderEdgeLabelModel: Label model parameters of this model were serialized as the respective parameters of RotatedSliderEdgeLabelModel. Thus, after loading, the positions of the labels are the expected ones but the label models changed.
  • RotatedSliderEdgeLabelModel: Parameters with ratio 0.5 were not correctly deserialized from GraphML.
  • FoldedGraph detects more carefully what has changed before invoking the methods CreateDummyEdgeAppearance and ChangeDummyEdgeAppearance of IDummyEdgeConverter. Previously, in some cases, these methods were called to often or not at all.
  • FilteredGraphWrapper: The various edgesAt methods erroneously returned edges that were marked as hidden by the edgePredicate. The methods degree, inDegree, and outDegree are based on these methods and were affected, too.
  • GraphSnapContext: Snapping nodes to vertical edge segments was not working if nodeToEdgeDistance was set to 0.0.
  • When snapping was disabled temporarily (using Ctrl) during a move gesture, the moved item snapped after finishing the gesture, anyway.
  • FoldedGraphUndoSupport didn't add the correct bend information to its internal data structures.
  • TemplateLabelStyle: The preferredSize was not correctly read from GraphML files.
  • CollapsibleNodeStyleDecorator and ShadowNodeStyleDecorator: Lookup requests for ISizeConstraintProvider, IGroupBoundsCalculator, and IShapeGeometry are now correctly delegated to the wrapped style.
  • The EdgeStyleDecorationInstaller did not copy the tags of dummy ports and edges used when displayed in view coordinates (zoomMode == DecorationZoomMode.VIEW_COORDINATES).

Automatic Layout

  • OrthogonalLayouter failed almost always with an exception if the Mixed Layout style was used.
  • IncrementalHierarchicalLayouter: Fixed possible exception caused by inconsistent grouping. The problem may only occur in incremental mode and if there are sequence constraints.
  • IncrementalHierarchicLayouter: Fixed rare exception that may appear for grouped graphs containing nodes with fixed coordinates hint.
  • IncrementalHierarchicLayouter: Fixed bug that breaks incremental hints of grouped edges in incremental layout mode.
  • IncrementalHierarchicLayouter: Fixed bug that may cause a wrong order of fixed (non-incremental) elements if the layouter is applied in incremental mode and the graph contains sequence constraints.
  • IncrementalHierarchicLayouter: Fixed possible exception that may occur for grouped graphs in incremental mode with recursive group layering enabled.
  • IncrementalHierarchicLayouter Fixed possible exception caused by inconsistent grouping.
  • GenericTreeLayouter: Fixed issue that caused too large group nodes when label consideration is enabled and the layout is not oriented top-to-bottom.
  • GenericTreeLayouter: Fixed issue that causes group nodes to be too small to include all edge labels when the edge connects to a child of an inner group node.
  • GenericTreeLayouter: Fixed issue that causes group nodes to be too small for node halos.
  • GenericTreeLayouter: Fixed issue that produces unnecessary large group nodes if node labels are considered.
  • TreeReductionStage: Fixed wrong handling of group nodes which may cause a exception as well as broken routes of edges incident to group nodes.
  • Fixed exception when using AssistantPlacer together with distributed port assignment.
  • CircularLayouter: Fixed issue that may cause infinite/too large node coordinates for unfavorable input settings, for example, if the maximal deviation angle is to small. Note that such coordinates may produce infinite looping or other exceptions.
  • BorderLine: Fixed bug in method grow that may result in an exception because the minimum value of a BorderLine becomes greater than the maximum value.
  • AbstractLabelingAlgorithm: Fixed bug that may cause removal of labels that don't overlap with other elements if option removeNodeOverlaps is enabled.
  • Polyline.EdgeRouter: Fixed bug that may cause zero length routes of edges whose start and end point are at the same location.
  • BusRouter: Fixed exception that may appear for graphs containing isolated nodes with self-loops.

yFiles for HTML 1.2.0.3 - Changes Since 1.2.0.2

Bugfixes

  • Template styles: <defs> sections were not handled correctly in 1.2.0.2, only.
  • In Internet Explorer, SvgExporter did not correctly export SVGs with use elements.

yFiles for HTML 1.2.0.2 - Changes Since 1.2.0.1

Bugfixes

  • Fixed ellipsis character not always showing correctly in SimpleLabelStyle and TextRenderSupport due to source code file encoding issues.
  • Template Styles: Fixed non-functional bindings in certain attributes like 'x' and 'y' in Internet Explorer.
  • The IRenderContext instance created by CanvasControl.createRenderContext was not usable for SVG export with CanvasControl.createVisualContent. Note that for SVG export, it is still recommended to use class SvgExport instead.
  • GraphSnapContext: Snapping nodes to vertical edge segments was not working if nodeToEdgeDistance was set to 0.
  • Fixed broken methods LayoutExtensions.createIncrementalLayerConstraintFactory and LayoutExtensions.createSequenceConstraintFactory.
  • GraphMLIOHandler: method addNamespace had no effect, and adding a custom schema with addSchemaLocation triggered an error.
  • SvgExport: Fixed clip-path not working in Firefox when exporting an SVG.
  • SvgExport: property scale did not throw an error for invalid values.
  • Cordova/PhoneGap toolkit demos: the setup step for the Contacts plugin was missing, some small bugfixes for the contacts functionality, and more status notifications.

Layout

  • IncrementalHierarchicLayouter: Fixed bug that may cause edges with zig-zag paths if there are swimlanes and integrated edge labeling is enabled.
  • IncrementalHierarchicLayouter and TopologicalIncrementalLayerer: Fixed bug that may cause unwanted same-layer edges between incremental nodes.
  • IncrementalHierarchicLayouter: Fixed possible error caused by an inconsistent order of group nodes.
  • CircularLayouter: Fixed issue that may cause infinite/too large node coordinates for unfavorable input settings, for example, if the maximal deviation angle is chosen to small. Note that such coordinates may produce infinite looping or other errors.

yFiles for HTML 1.2.0.1 - Changes Since 1.2

Improvements

  • Changed the way HTML5 Canvas based rendering looks when the canvas is being resized. The previous implementation caused artifacts that could be noticed during resize operations in hybrid rendering mode.
  • Moved some consistency checks that were erroneously part of the main library to the type checking development aid. This will result in a slight performance improvement.
  • The new development assistance features that were introduced in 1.2 are now described in detail in the developer's guide in the chapter Getting Started.
  • The Simple Dojo Demo can now be loaded from the file system in all browsers since its custom Dojo widget doesn't depend on a separate HTML file anymore.

Bugfixes

  • Restored compatibility with older template style definitions. Now, it's possible to dynamically add templates to the 'template_svg' svg element after instantiating another template style. Existing instantiated templates will not be updated until a new template is created, though. The incompatible changes section of version 1.2 was updated accordingly.
  • Fixed repaint issues in the Graph Overview for future (at the time of writing) Chrome releases that were caused by subpixel layouts.
  • Fixed non-dirty background RenderVisuals not always being repainted during resize and transform changes.
  • Fixed the error handling in yFiles demo framework applications that were created with the option catchErrors:'true'.
  • BPMN Demo: use the correct CSS class names for the styling of the cursor during drag-and-drop.
  • BPMN Demo: Improved creation of new edges to not share the same port instances which previously could result in bogus edge paths.
  • Fixed broken API documentation in places where generic type parameters were used and referenced in both the developer's guide and the API Reference.
  • SimpleLabelStyle constructors that take a Typeface, but not a font size as a parameter do not override the typeface's font size with the default value of 12 anymore.
  • Fixed TextRenderSupport.PlaceText always returning the original text if StringTrimming.NONE was passed in.

Layout

  • Integrated labeling of the hierarchic layout style: preferred label placements Along Edge were not calculated correctly.
  • yfiles.router.polyline.EdgeRouter: Fixed wrong heuristic bend calculation if grid is used.
  • BusRouter: Fixed error in BusRepresentations that could appear if the input graph contains overlapping nodes.
  • FixedGroupLayoutStage: Fixed canLayout which changed the structure and layout of the graph.

yFiles for HTML 1.2 - Changes Since 1.1.1.6

Major Features Added

  • Support for HTML5 Canvas-based rendering has been added. Especially suitable for low-detail, high-volume renderings, HTML5 Canvas rendering is now directly supported. SVG and Canvas-based renderings may be mixed and rendering can be switched on the fly for level-of-detail scenarios, etc.
  • Complete TypeScript 1.0 language bindings included in the package simplify type-safe and compiler-checked development in Visual Studio and other IDEs.
  • A new optional GWT overlay enables convenient coding in Java and Java IDEs against the library. The bundled demos in the main package have been adjusted accordingly.
  • Improved developer productivity with added development aids like debugging support, dynamic source code generation tooling, and live object manipulation utilities to enable interoperability with third party OOP JavaScript frameworks.
  • Added easy support for HTML overlays, fly-outs, and pop-ups to the graph control.
  • New classes AdjacentNodesGraphSource and AdjacentEdgesGraphSource provide data binding support for a much larger number of user data models.
  • New and improved template styling support can now intelligently handle definition references and allows for embedding templates directly into GraphML or special script tags.
  • Built-in support for text-wrapping, clipping, and ellipses, as well as performance optimized text-measuring has been added for the built-in styles and is made available for custom style implementations.
  • Added ItemHoverInputMode to conveniently handle hover state changes.
  • Automatic JSON serialization and deserialization of native JavaScript objects added to GraphML I/O.
  • Added customizable internationalization and localization for commands, key bindings, and undo event descriptions.
  • Added support for web worker environments. This allows for layout and algorithm calculations in separate threads.
  • Added new sample applications that showcase the enhanced labeling features, multi-page layout, new data-binding helper classes, multi-threaded layout execution, edge bridges, preferred label placement, custom snapping and selection handling, style decorations and style implementations.

Layout

  • Added new layout algorithm RadialLayouter that places nodes on concentric circles. Edges are routed in a radial fashion using one of several routing strategies.
  • Added support for terminating (layout) algorithms prematurely. To this end, new class AbortHandler provides methods to specify how long an algorithm may run until it is gracefully terminated (see method stopDuration) and immediately terminated (see method cancelDuration), respectively.
    The following layout algorithms have at least rudimentary support for immediate termination:
    Layout Algorithms Routing Algorithms Other Algorithms
    • BalloonLayouter
    • CircularLayouter
    • CompactOrthogonalLayouter
    • DirectedOrthogonalLayouter
    • GenericTreeLayouter
    • GRIP
    • HierarchicGroupLayouter
    • HierarchicLayouter
    • IncrementalHierarchicLayouter
    • OrganicLayouter
    • OrthogonalGroupLayouter
    • OrthogonalLayouter
    • PartialLayouter
    • RadialLayouter
    • RecursiveGroupLayouter
    • SmartOrganicLayouter
    • BusRouter
    • polyline.EdgeRouter
    • OrganicEdgeRouter
    • OrthogonalEdgeRouter
    • GreedyMISLabeling
    • SALabeling
    The following layout algorithms also support graceful early termination:
    Layout Algorithms Routing Algorithms Other Algorithms
    • HierarchicGroupLayouter
    • HierarchicLayouter
    • IncrementalHierarchicLayouter
    • OrganicLayouter
    • SmartOrganicLayouter
    • polyline.EdgeRouter
    • SALabeling
  • Introduced concept of node halos. Halos are reserved space around a node in which layout algorithms will not place other graph elements. Node halos are modelled using class NodeHalo.
    The following layout algorithms support node halos:
    Layout Algorithms Routing Algorithms Other Algorithms
    • BalloonLayouter
    • CircularLayouter
    • CompactOrthogonalLayouter
    • ComponentLayouter
    • DirectedOrthogonalLayouter
    • GenericTreeLayouter
    • IncrementalHierarchicLayouter
    • OrthogonalGroupLayouter
    • OrthogonalLayouter
    • RadialLayouter
    • RecursiveGroupLayouter
    • SmartOrganicLayouter
    • TreeLayouter
    • polyline.EdgeRouter
    • SelfLoopLayouter
    • GreedyMISLabeling
    • SALabeling
    • InsetsGroupBoundsCalculator
    • MinimumSizeGroupBoundsCalculator
  • SmartOrganicLayouter: Added support for partition grid layout. See class PartitionGrid.
  • Optimized the module dependencies to reduce loading times. The module layout-hierarchic does no longer depend on the modules layout-router and layout-tree, and the module layout-orthogonal does no longer depend on the module layout-router.

Minor Features Added

  • GraphSource: Added property lazyNodeDefinition. If this property is enabled, objects that are not contained in nodesSource can be used as source and target of edges as well.
  • GraphSource: Added property nodeLabelBinding that specifies the label binding for nodes, similar to the edgeLabelBinding for edges.
  • ItemDropInputMode is a new DropInputMode for IModelItems that facilitates subclasses to support preview and snapping of the dragged item as well as highlighting potential drop targets.
    NodeDropInputMode and StripeDropInputMode have been refactored to use ItemDropInputMode as base class.
  • Node ports can now be moved by dragging their IHandle.
  • Code completion now supports generics in supporting IDEs as part of the JSDoc3 support.

Layout

  • BalloonLayouter: Added support for integrated node and edge labeling. See new properties integratedEdgeLabeling, integratedNodeLabeling, and nodeLabelingPolicy.
  • BalloonLayouter: Added support for different policies to align nodes having the same root node. See new property childAlignmentPolicy.
  • BalloonLayouter: Added support for interleaved child node placement. With interleaved placement, child nodes are placed at different distances to their parent node to achieve a more compact layout. See new property interleavedMode.
  • IncrementalHierarchicLayouter: Improved partition grid support. Nodes can now be mapped to a multi-lane partition cell identifier, i.e., a cell spanning multiple columns and rows. See class PartitionGrid.
  • IncrementalHierarchicLayouter: Improved edge label placement. Edge labels with preferred placement at source/target are placed closer to the corresponding node. Additionally, SimplexNodePlacer offers the option to place adjacent edge labels in a compact, stacked style. See new property labelCompaction.
  • polyline.EdgeRouter: Added a fine-granular configuration option to weigh the crossing costs for each label using the data provider look-up key EdgeRouter.LABEL_CROSSING_COST_FACTOR_DP_KEY.
  • polyline.EdgeRouter: Added property ignoreInnerNodeLabels that allows to ignore node labels that are inside the bounds of their owner so they may be crossed by edges. This is especially useful if labels of group nodes may be crossed while outer labels of non-group nodes may not.
  • polyline.EdgeRouter: Added support for customizing the order in which edges are routed. See new property edgeOrderComparator.
  • GenericTreeLayouter: When enabling GenericTreeLayouter.integratedNodeLabeling and/or GenericTreeLayouter.integratedEdgeLabeling, the respective labels will be taken into account during the calculation of group bounds.
  • DelegatingNodePlacer: Added key DelegatingNodePlacer.LEFT_RIGHT_DP_KEY that allows choosing on which side a node is placed.
  • PartialLayouter: Now supports handling of directed and undirected edges. See data provider key DIRECTED_EDGES_DP_KEY.
  • FixNodeLayoutStage: Added additional FixPointPolicys UPPER_RIGHT, LOWER_RIGHT, and LOWER_LEFT.
  • LabelLayoutTranslator: Added properties writeBackRelativeEdgeLabelLocation and writeBackRelativeNodeLabelLocation that allow a core layouter to specify new node or edge label locations relative to the label's owner.
  • LabelLayoutKeys: Added key IGNORE_LABEL_DP_KEY that allows specifying which edge and node labels should be ignored during layout calculations.
  • Added new class OrganicRemoveOverlapsStage that removes node overlaps while respecting a specified minimal node distance. Unlike the approach implemented in class RemoveOverlapsLayoutStage, this approach tries to keep the original layout structure, i.e., it tries to keep the geometric distance between the nodes.
  • Added class StraightLineEdgeRouter that routes edges as straight lines considering specified port constraints.

Improvements

  • The library module files now support the relative AMD loading mechanism for easier configuration.
  • The custom style tutorial has been reworked and custom steps for creating group nodes and folder nodes have been added. Also, bridge support for edges and level-of-detail rendering using HTML5 Canvas are now available in separate tutorial steps.
  • ImageNodeStyle now supports fail-over images by default.
  • CollapsibleNodeStyleDecorator can now conveniently be customized and more easily be subclassed.
  • Improved touch device input for the default collapse button styles and added multi-touch support for the scrollbars.
  • DropInputMode: Added property lastDragEventArgs.
  • CompositePositionHandler: Added methods getPositionHandler and getHandle to retrieve an earlier added IPositionHandler or IHandle.
  • TableLayoutConfigurator: Support for routing algorithms improved.

Algorithms

  • Dfs: Added method cancel that can be used by subclasses to cancel the search.
  • Cycles: Improved method findCycle to stop the search as soon as the first cycle has been found.
  • GraphConnectivity: Improved method makeBiconnected to work with graphs with self-loops (i.e. edges whose source node is also the target node).
  • Groups: Replaced recursive implementation of method biconnectedComponentGrouping with an iterative algorithm to support larger graphs.

Layout

  • IncrementalHierarchicLayouter: The default sequencing phase has been improved to produce less crossings and run faster.
  • IncrementalHierarchicLayouter: Now prevents overlaps among same layer edges attached to group nodes.
  • IncrementalHierarchicLayouter: Selfloop routing now takes the layout flow into account. For layout orientation top-to-bottom, selfloops will by default exit on the left or right and enter on top.
  • IncrementalHierarchicLayouter: Added option to route selfloops like backloops (starting at the bottom of the node and ending at the top of the node) when backloop routing is enabled.
  • IncrementalHierarchicLayouter: During layering, edges connected to group nodes may be redirected and replaced by dummy edges connected to the children of the group node. For these dummy edges ILayoutDataProvider.getEdgeData now returns an IEdgeData of the new type EdgeDataType.REDIRECTED_GROUP_EDGE.
  • PCListOptimizer: Improved port candidate assignment calculated by method optimizeAfterSequencing.
  • SmartOrganicLayouter: Now uses a more sophisticated approach to remove node overlaps if the scope is set to Scope.ALL and the quality to time ratio is greater than or equal to 0.7 (property qualityTimeRatio).
  • InteractiveOrganicLayouter: Method startLayout now takes advantage of multiple threads for layout calculation which may reduce the required runtime.
  • BalloonLayouter: Reduced gaps between adjacent nodes.
  • PartitionLayouter: Added nested class PartitionLayouter.PolylineInterEdgeRouter that routes inter-edges using class polyline.EdgeRouter.
  • PartialLayouter: Now considers port constraints independent of the specified layout orientation. Note that port constraints are only considered if the core layout algorithm supports port constraints as well.
  • PartialLayouter.StraightLineEdgeRouter: Added support for port constraints.
  • RecursiveGroupLayouter: Added option replacePortConstraints that replaces port constraints by port candidates and, thus, may improve the layout result.
  • polyline.EdgeRouter: Improved support for port candidate sets (see class PortCandidateSet).
  • polyline.EdgeRouter: Rerouting improved to provide better results.
  • polyline.EdgeRouter: Memory usage has been reduced.
  • polyline.EdgeRouter: Added penalty setting for edge length. See PenaltySettings.edgeLengthPenalty.
  • polyline.EdgeRouter: Added four predefined optimization strategies. See PenaltySettings.OPTIMIZATION_BALANCED, PenaltySettings.OPTIMIZATION_EDGE_BENDS, PenaltySettings.OPTIMIZATION_EDGE_CROSSINGS, and PenaltySettings.OPTIMIZATION_EDGE_LENGTHS.
  • polyline.EdgeRouter: Default penalty settings for minimal node to edge distance, minimal group node to edge distance, minimal first and last segment length, and bends in node to edge distance increased. As a result, these restrictions are considered more strongly.
  • polyline.EdgeRouter: Now avoids very small octilinear segments.
  • polyline.EdgeRouter: Edge grouping improved to keep edge segments grouped longer and to consider the paths of fixed edges when calculating the paths of edges having the same edge group.
  • polyline.EdgeRouter: When using polyline routing, short orthogonal edge segments in a monotonic path section are replaced by a single diagonal segment instead of a short diagonal segment followed by an orthogonal segment followed by a second short diagonal segment.
  • DirectedOrthogonalLayouter and OrthogonalGroupLayouter: Added optimization step that reduces the number of perceived bends. See new property perceivedBendsOptimization.
  • OrthogonalLayouter, OrthogonalGroupLayouter and DirectedOrthogonalLayouter: Added optimization step that aligns degree one nodes (i.e. nodes with one incident edge) that have the same neighbor. See new property alignDegreeOneNodes.
  • OrthogonalGroupLayouter: Improved routing and edge labeling for self-loops of normal (non-group) nodes.
  • LayoutTool: Added new rectangle arrangement method arrangeRectangleMultiRows suitable for arranging rows of rectangles with highly different sizes.
  • ComponentLayouter: Added the following new component arrangement strategies to ComponentArrangementStyles that are suitable for components with highly different sizes: MULTI_ROWS, MULTI_ROWS_COMPACT, MULTI_ROWS_HEIGHT_CONSTRAINED, MULTI_ROWS_HEIGHT_CONSTRAINED_COMPACT, MULTI_ROWS_WIDTH_CONSTRAINED, and MULTI_ROWS_WIDTH_CONSTRAINED_COMPACT

Demos

  • Added new showcase application demo.yfiles.graph.bpmneditor which allows you to create Business Process Diagrams and to automatically arrange them. The demo provides customized styles which represent the BPMN 2.0 symbols and a specialized BPMN layout algorithm.
  • The new demo demo.yfiles.layout.multipage shows how to use the MultiPageLayouter to divide a large graph into several smaller pages.
  • The new demo demo.yfiles.loading.webworker shows how to run a yFiles layout algorithm in a Web Worker task in order to prevent the layout calculation from blocking the UI.
  • Added more data binding demos to show the features of the new classes AdjacentNodesGraphSource and AdjacentEdgesGraphSource.
  • The new demo demo.yfiles.graph.htmlpopup shows HTML pop-up panels that display additional information about a clicked node or edge.
  • The new demo demo.yfiles.input.singleselection shows how to configure GraphEditorInputMode for single selection mode.
  • The new demo demo.yfiles.layout.preferredlabelplacement shows how the PreferredPlacementDescriptor for edge labels affects the label placement of layout algorithms.
  • The new demo demo.yfiles.style.datatable shows a node style and a label style that display data in a tabular fashion.
  • The new demo demo.yfiles.style.selectionstyling shows customized selection painting of nodes, edges and labels by decorating these items with a corresponding style.
  • The new demo demo.yfiles.style.styledecorators shows how to create styles for nodes, edges, and labels that wrap existing styles and add visual decorators.

Incompatible Changes

Changes in Default Behavior

  • polyline.EdgeRouter: Method doLayout now throws an error if there is a node with zero width or height in the given graph.
  • FixedGroupLayoutStage: Method orthogonalEdgeRouter now returns an instance of class polyline.EdgeRouter instead of class OrthogonalEdgeRouter.
  • ComponentLayouter: Property preferredLayoutSize now throws an error when setting the preferred size to negative values or zero.
  • Changed default behavior of edge label placement in layouters with integrated edge labeling when using LabelPlacements.ANYWHERE. Now edge labels are placed on the edge and in the center between source and target node. This change affects the following layout algorithms: IncrementalHierarchicLayouter, OrthogonalLayouter, OrthogonalGroupLayouter, DirectedOrthogonalLayouter, GenericTreeLayouter, and LabelLayoutDataRefinement.

API Changes

  • GraphExtensions and IGraph: the following methods have been renamed:
    • createNodeAtLocation to createNodeWithCenter
    • createNodeAtLocationAndTag to createNodeWithCenterAndTag
    • createNodeAtLocationWithStyle to createNodeWithCenterAndStyle
  • GraphOverviewControl: due to the new general support for HTML5 Canvas rendering, the signatures of the method createGraphCanvasVisualCreator and the constructor CanvasOverviewGraphVisualCreator have been changed.
  • GraphSource: renamed the property idBinding to nodeIdBinding to be more consistent with the other property names.
  • GraphSource: the callback methods createNode and updateNode got a new additional parameter for the label data of the node, like the similar methods for edges always had. Since these methods are classified as protected, this change affects only derived classes but not usages of this class.
  • ResourceManager: renamed the constructor ForType to the canonic FromGlobalName and removed other obscure constructors.
  • Changed module dependencies and affiliation in the layout part:
    • Moved classes PartitionGrid, PartitionCellId, RowDescriptor, and ColumnDescriptor from the namespace yfiles.hierarchic.incremental to yfiles.layout. Additionally, these classes are now part of the module layout-core instead of layout-hierarchic.
    • Moved class FamilyTreeLayouter from the module layout-hierarchic to the new module layout-familytree.
    • Moved class CompactOrthogonalLayouter from the module layout-orthogonal to new module layout-orthogonal-compact.
    • Moved class ChannelRouter from the module layout-router to the module layout-hierarchic.
    • Moved classes FixedGroupLayoutStage and PartitionLayouter from the module layout-router to the module layout-polyline.
    • Moved rarely used inner class TreeDrawer.HierarchicTreePlacer to the top-level of the yfiles.tree namespace. Consequently, it was moved from the module layout-hierarchic to the module layout-tree.
    • The module layout-hierarchic does no longer depend on the modules layout-router and layout-tree.
    • The module layout-orthogonal does no longer depend on the module layout-router.

    Adjust your require calls and/or script elements accordingly, if you're using any of these classes or if you relied on the removed dependencies, for example if you required only layout-hierarchic to get both the hierarchic and the tree layout algorithms.

  • IItemFactory: Added method createRedirectedGroupEdge.
  • LayeredNodePlacer: Removed data provider key DP_KEY_DISTANCE_TO_PARENT_MAP from public API, since it is for internal use only.
  • DelegatingNodePlacer: the methods getLowerRightChildren and getUpperLeftChildren have now an additional second argument, the current graph.
  • polyline.EdgeRouter: Method doLayout now throws an error if there is a node with zero width or height in the given graph.
  • polyline.EdgeRouter: Penalty settings have been changed to double precision. See class PenaltySettings.
  • polyline.EdgeRouter: renamed the properties polylineRoutingEnabled and reroutingEnabled to the canonical names polylineRouting and rerouting, respectively.
  • PathSearch: Signature of method calculateCosts has changed. It now takes an additional double array as parameter that is populated with the calculated costs instead of returning a new array.
  • DrawingEmbedder: Removed public method preprocessNodes and protected method printStatistics.
  • RecursiveGroupLayouter.NULL_LAYOUTER_FIELD0 has been renamed to RecursiveGroupLayouter.NULL_LAYOUTER.
  • Removed SimpleLabelStyleRenderer's static methods getTextOffset, measureText, and getTextBBox. Please use TextRenderSupport.measureText or TextRenderSupport's instance methods for text measuring instead.

Bugfixes

  • GraphSource: fixed various problems in method updateGraph that caused undesired behavior or even errors.
  • Property Touch2DDevice.lastEventTime is now a regular JavaScript Date object.
  • BevelNodeStyle: Fixed update of drop shadow after radius has been changed.
  • When using an IEditLabelHelper and adding a label interactively, the helper's editLabel callback was called instead of addLabel.
  • Reparenting an empty group node displayed the target node highlight around the reparented node.
  • SmartOrganicLayouter: Fixed bug that caused weird placement of fixed elements if the minimal node distance is set to 0.
  • MultiPageLayouter: Fixed possible error if the input graph contains empty group nodes.
  • MultiPageLayouter: Fixed possible error.
  • IncrementalHierarchicLayouter: Fixed broken edge routes that may occur for edges with labels if there are "critical" edges.
  • SimplexNodePlacer: Fixed broken edge routes that may occur for edges with labels if option edgeStraighteningOptimization is enabled.
  • PCListOptimizer: Fixed possible IndexOutOfRangeException that may appear if there are port constraints which have no matching port candidate or port candidate set entry.
  • IncrementalHierarchicLayouter: Fixed an error (Graph is not acyclic) in SimplexNodePlacer that could appear when sequence constraints were added to a graph with swimlanes and group nodes.
  • BorderLine: Fixed a rare error that was caused by numerical instability.
  • IncrementalHierarchicLayouter: Fixed an error in ConstraintIncrementalLayerer that could appear when layer constraints were added in incremental mode.
  • CircularLayouter: Fixed a possible error when layout style is set to BCC_ISOLATED and consider node labels is enabled.
  • AbstractLabelingAlgorithm: Fixed bug that causes poor results if option removeEdgeOverlaps is enabled and the labels should be placed on the edge.
  • IncrementalHierarchicLayouter: Fixed minimum edge length for orthogonal edges. It is now also taken into consideration for edges that connect to a node's side and for backloop edges (see property backloopRouting).
  • IncrementalHierarchicLayouter: Fixed possible error if PortConstraints are used together with PortCandidateSets.
  • polyline.EdgeRouter: Minimum first and last segment length and minimum node to edge distance were sometimes ignored when used together with octilinear routing style.
  • Grouping: Fixed bug in method nearestCommonAncestor that sometimes caused wrong results if one of the specified nodes is the ancestor of the other node.
  • InsetsGroupBoundsCalculator: Fixed method calculateBounds to consider only the given child nodes and all edges between those child nodes instead of all nodes and all edges in the graph.
  • GenericTreeLayouter: Fixed error that occurred when using LayeredNodePlacer as default node placer.
  • LayoutTool: Fixed calculation of lower width bound in method arrangeRectangleRows. Due to the better bound, the optimization procedure now needs less steps, especially for graphs with very wide components. Note, that the results may also slightly differ, because the optimization may now stop with slightly different values.
  • SALabeling and GreedyMISLabeling: Fixed possible error caused by labels with zero width/height and a "free" edge label model.
  • IncrementalHierarchicLayouter: Fixed bug that caused wrong coordinates of empty rows (see class RowDescriptor) whose minimum height is zero.
  • DirectedOrthogonalLayouter: Fixed a bug that sometimes caused misplaced edge labels of grouped edges.
  • polyline.EdgeRouter: Fixed possible error for edge groups that contain fixed edges.
  • polyline.EdgeRouter: Fixed bug that caused wrong routes for edges grouped with fixed edges.

yFiles for HTML 1.1.1.6 - Changes Since 1.1.1.5

Bugfixes

  • Various corrections for touch input in Internet Explorer 11
  • Under certain rare conditions, the clone method did not copy all field values from the original instance to the newly created instance.
  • BevelNodeStyle did not update the fill attribute correctly.
  • Obfuscator: Blacklist localName to prevent thee removing of drop shadows in Firefox and Internet Explorer.
  • Folding: Source port tags in view states were not parsed correctly from GraphML.
  • BevelNodeStyle: Fixed update of drop shadow after radius has been changed.
  • FilteredGraphWrapper.dispose did not clean up all event listeners.
  • Node ports could not be moved by dragging their IHandle.
  • CreateEdgeInputMode: Mixing touch and mouse gestures did not always work as expected.
  • List.fromArray did not check its input for null.
  • Graph Viewer Demo: load the graph-style-defaults module before loading a GraphML file that uses styles defined in it.
  • ImageExportDemo: The hit test for the export rectangle was configured incorrectly.

Automatic Layout

  • IncrementalHierarchicLayouter: Fixed error that may appear for graphs containing nodes with fixed coordinates.
  • LabelLayoutDataRefinement: Fixed possible error for unbuffered layout runs.
  • RecursiveGroupLayouter: Removed all temporarily inserted port candidates before calling the inter-edge routing because otherwise the edges routes may become corrupted.
  • TreeLayouter and GenericTreeLayouter: Fixed possible error for trees with empty group nodes.
  • ShuffleLayouter: Fixed bug that may cause small offsets of fixed nodes.
  • Polyline.EdgeRouter: Fixed bug in calculation of edge to edge distance penalties which could reduce the space where edges can be routed causing them to take unnecessary long routes.
  • Polyline.EdgeRouter: Fixed bug that caused edges that connect a node with an ancestor group node to violate the minimal node to edge distance for the target node.
  • Polyline.EdgeRouter: Fixed bug that caused edges that connect a node with an ancestor group node to have unnecessary long and bended edge paths when using port constraints.
  • Polyline.EdgeRouter: Fixed bug that caused edges that connect a node with an ancestor group node to cross their source nodes when using port constraints.
  • Polyline.EdgeRouter: Fixed bug that makes it possible to group the source of one edge and the target of another edge at their common node.
  • Polyline.EdgeRouter: Fixed bug that sometimes causes superfluous edge overlaps.
  • Polyline.EdgeRouter: Fixed bug that caused minimum distance violation of grouped edges.
  • Polyline.EdgeRouter: Fixed rare NullReferenceException while calculating edge crossing costs.
  • Polyline.EdgeRouter: Fixed bug that sometimes assumed wrong label bounds for labels of table nodes. This could result in too many bends for edges that were routed around those wrong boxes. Labels of table nodes are now ignored by the router if TableLayoutConfigurator is used to prepare the graph for layout calculations.
  • Polyline.EdgeRouter: Fixed bug that sometimes assumed wrong label bounds if the router was used directly after another layout algorithm. This could result in too many bends for edges that were routed around those wrong boxes and/or edges crossing labels because the actual label boxes were ignored.
  • PolylineLayoutStage: Fixed possible error if there are fixed edges with a single, very short segment.
  • BusRouter: Fixed clean up of bends that resulted in unnecessary detours in edge paths.
  • BusRouter: Fixed possible error.
  • BusRouter: Fixed possible error caused by non-orthogonal edge segments.
  • BusRouter: Fixed possible error when routing only a subset of edges without adding a DataProvider to the graph that marks edges as selected.
  • IncrementalHierarchicLayouter: Fixed bug that could result in infinite y-coordinates when octilinear edge routing was enabled.
  • Polyline.EdgeRouter: Fixed bug that may cause an error if a grid is specified (see option Grid).
  • OrthogonalGroupLayouter: Fixed bug that may cause wrong group bounds calculation if a group node label lies outside of the group node.
  • PartialLayouter: Fixed possible error if the algorithm is applied to a graph with partition grid (see PartitionGrid).

yFiles for HTML 1.1.1.5 - Changes Since 1.1.1.4

Bugfixes

  • Fixed touch events for Internet Explorer 11.
  • SimpleLabelStyle.WithFontSizeAndBrush: The font size parameter was ignored.
  • SimpleLabelStyle: Setting the backgroundBrush back to null had no effect.
  • Invisible CanvasObjectGroups did not work.

yFiles for HTML 1.1.1.4 - Changes Since 1.1.1.3

Improvement

  • LayoutGraphAdapter provides now the original Tag data for temporary graph objects.

Bugfixes

  • The yfiles/lang core module was not able to deal with the minified output of the obfuscator anymore (since 1.1.1.2). This resulted in nested types not being available after minification.
  • Undoing a reparent grouping gesture might have resulted in inconsistent group node sizes. Note: The fix results in a slightly incompatible behavior when nodes are reparented programmatically and multiple folding views are used. In that case, you need now to subscribe to hierarchy events and manually adjust the group node bounds.
  • The default value of AbstractTableNodeStyle#BackgroundStyle was not serializable.
  • Manually bracketing undo edits with BeginEdit and EndEdit might have led to exceptions when folding was active.
  • Changing properties of PolylineEdgeStyle.pen had no visible effect.

Automatic Layout

  • DirectedOrthogonalLayouter could throw a indexOf exception.
  • IncrementalHierarchicLayouter: Fixed a rare bug that caused broken edge routes if edges are routed polyline.
  • IncrementalHierarchicLayouter: Fixed a bug that sometimes placed elements at an infinite y-coordinate if octilinear edge routing was enabled.

yFiles for HTML 1.1.1.3 - Changes Since 1.1.1.2

Bugfixes

  • Added a workaround for a memory leak error in Google Chrome (some DOM nodes are never cleaned up). Since this workaround comes with a slight performance penalty, it is not enabled by default. To enable it, set the property yfiles.workaroundCR320635 to true.
  • Improved the rendering performance of graph item handles in Internet Explorer.
  • Fixed an error that was thrown when uninstalling a GraphEditorInputMode after a label editing text box was shown.
  • TextEditorInputMode#anchor wasn't considered for placing the label editing text box.
  • RotatedSliderEdgeLabelModel can now deal with edge paths that are null, for example when using VoidEdgeStyle.
  • GraphML: Primitive types like floats and doubles could not be read when used in element syntax and the current CultureInfo was not Invariant.

yFiles for HTML 1.1.1.2 - Changes Since 1.1.1.1

Improvements

  • Included a workaround for an unresolved error in Internet Explorer 11 on Windows 7. Under certain circumstances, IE stops to respond to mouse events and seems to be crashed. Other versions of Windows and IE, especially IE 11 on Windows 8 and 8.1, are not affected.

Demos

  • Various improvements and bug fixes for Printing and the Printing Demo:
    • Printing is now more robust in all major browsers.
    • Added support for printing of template styles.
    • Moved printing into a stand-alone class that is easy to use in custom applications.
  • Organizational Chart Demo: added support for printing.

Bugfixes

  • For customer implementations of nested types, both isInstance and instanceof considered the custom implementation as not being of the nested type. Amongst other things, this resulted in wrong type checking errors when using such implementations.
  • Final obfuscation using the obfuscator broke touch input.
  • Fixed the arrow ArrowType.TRIANGLE which accidentally was the same as ArrowType.DEFAULT.
  • Fixed clipping problem in SvgExport that affected printing and bitmap export.
  • Fixed clicking in the overview not honoring viewport limits.
  • GraphML: Properties with a text value containing nested CDATA sections were not parsed correctly.
  • Moving the viewport by clicking into the GraphOverviewControl did not honor CanvasControl.viewportLimiter restrictions.
  • Fixed error when invoking event handlers added with KeyboardInputMode.addHandlerForGesture.
  • Key event handlers are removed from a Control when it loses focus.
  • PatternBrush now respects the value set in the viewBox property.

Automatic Layout

  • EdgeRouter: Fixed bug that may cause an Error if a grid is specified (see property grid).
  • OrthogonalGroupLayouter: Fixed bug that may cause a wrong group bounds calculation if a group node label lies outside of the group node.
  • PartialLayouter: Fixed possible Error if the partial layouter is applied to a graph with partition grid (see PartitionGrid).
  • PartialLayouter: Fixed bug that may cause a very long runtime if the algorithm considers node alignment (see property considerNodeAlignment).
  • IncrementalHierarchicLayouter: Fixed bug that may cause broken edge routes for edges with port candidates if backloop routing is enabled (see property backloopRouting).
  • ParallelEdgeLayouter: Fixed Error that appears if the leading edge has zero length.
  • ParallelEdgeLayouter: Fixed bug that may cause points with Double.NaN-coordinates for some edges.
  • LayoutTool: Fixed bug in method routeEdgesParallel: that may cause points with Number.NaN-coordinates for some edges.
  • EdgeRouter: Fixed performance problems for graphs with overlapping fixed edges.

yFiles for HTML 1.1.1.1 - Changes Since 1.1.1

Bugfixes

  • Some properties of type ICollection were not serialized in GraphML. Especially, ITable instances were not serialized correctly.
  • Interactively deleting the last stripe in a table caused an exception.
  • Cloning table stripes did not work correctly.
  • Restored previous default behavior of edge highlight and focus visualizations.

Demos

  • Custom Style Tutorial: Method MySimpleLabelStyle#getPreferredSize threw an exception when creating a new label.
  • Custom Style Tutorial and SimpleCustomStyle demo: Reverted field to properties to allow for GraphML serialization.

yFiles for HTML 1.1.1 - Changes Since 1.1.0.1

Enhanced Development Support

  • New methods yfiles.help.info and yfiles.help.api display extensive information about types, properties and other members, and API documentation when used in the browser's JavaScript console.
  • The debug support provided by yfiles-typeinfo.js has a new setting to switch between instant failure and logging of problems. To enable logging, set the boolean property yfiles.help.logTypeInfoErrors to true.

Improvements

  • Improved performance of several of the extension methods of IList.
  • BevelNodeStyle: Improved performance when drop shadows are used (IE only).
  • GraphOverviewControl: Added new factory method createGraphCanvasVisualCreator that allows for easier creation of a canvas based preview rendering.
  • Added callback method setEdgePortLocation to LayoutGraphAdapter that is called while assigning a new location to a port that is owned by an edge.
  • Improved performance of table rendering and interaction.
  • Added explicit extension method IGraph.createNodeAtLocationWithStyle(PointD,INodeStyle).
  • Arrow: Setting the various properties now only recreates the arrow template if something actually changed.
  • Method SvgExport.setup: The returned IRenderContext new has the correct clip applied.
  • Typeface: Added default value annotations to most properties for more compact GraphML serialization.

Automatic Layout

  • RecursiveGroupLayouter: Improved performance for graphs with a mainly flat structure.
  • GraphConnectivity: Improved method makeBiconnected to work with graphs with self-loops (self-loops are edges whose source and target are the same).
  • Groups: Replaced recursive implementation of method biconnectedComponentGrouping with an iterative algorithm to support larger graphs.
  • Trees: Added method isForestWithDirection.

Demos

  • Added new demo demo.yfiles.graph.bridges, which shows how to set up and configure automatic edge bridges.
  • Added new demo demo.yfiles.graph.clipboard, that shows how to customize clipboard operations.
  • Revised and improved Custom Styles tutorial best practices.

Incompatible API Changes

Automatic Layout

  • Class yfiles.algorithms.AlgorithmAbortedException has been removed. This exception was never thrown by library code and was not intended to be used by client code.

Bugfixes

  • In some browsers, event coordinates were not passed correctly when the page was scrolled or when the canvas had a CSS border.
  • PatternBrush couldn't be used in documents with more than one graph control.
  • Pen: The dash style wasn't visualized correctly, and the properties dashCap, lineJoin, and miterLimit had no effect. Consequently, visualizations of lines that use one of these properties might look different.
  • Prevent the creation of SVG path elements with empty path data attribute.
  • NodeStylePortStyleAdapter: Ports were drawn near the origin of the view instead of the real node location.
  • Debug support: Replaced all occurrences of java.lang.Class by the correct yfiles.lang.Class.
  • LabelControlLabelStyle incorrectly triggered update of preferred label size calculation in folded graph scenarios under certain conditions.
  • Method NavigationInputMode.toggleGroupNodeState did not expand collapsed folder nodes.
  • NavigationInputMode: Methods collapseSelection and expandSelection threw an exception.
  • Fixed touch events when starting a gesture on an SVG element that is removed from the DOM during the gesture, e.g. when starting a drag on a node and moving the node out of the visible screen area.
  • Method SimpleAbstractLabelStyle.isInBox always returned false.
  • NodeStyleLabelStyleAdapter: Fixed rendering bug when the style was used for node labels.
  • In CreateEdgeInputMode and MoveInputMode, snapping may not have been re-enabled after disabling it temporarily.
  • IconLabelStyle: Fixed exception when the icon size was not set or was empty.
  • Method GraphClipboard.cut: The filter predicate was evaluated twice, resulting in unexpected behavior if the predicate evaluation depended on state that could change by removing graph elements.
  • CanvasControl: horizontalScrollBarPolicy and verticalScrollBarPolicy could not be set to different values at the same time. Instead, the value of the latter was always used for both settings.
  • LabelControlLabelStyle incorrectly triggered update of preferred label size calculation in folded graph scenarios under certain conditions.
  • MoveInputMode only considers hovers without modifiers as valid to prevent "cursor fight" with MoveViewportInputMode.
  • CanvasControl: Fixed incorrect clipping that could occur when scrollbar visibility has changed.
  • Fixed DefsManager to respect the value of the cleanupTimerInterval property.
  • Fixed accidental removal of SVG elements in a defs section, e.g. <filter>, that were only referenced in a <g> element. This also fixes ShadowNodeStyleDecorator.

Automatic Layout

  • PreferredPlacementDescriptor: Corrected the type of the property angleRotationOnRightSide from LabelAngleOnRightSideOffset to LabelAngleOnRightSideRotation.
  • IncrementalHierarchicLayouter: Fixed bug that caused unsuitable edge routes for grouped edges within group nodes.
  • IncrementalHierarchicLayouter: Fixed bug that causes a violation of strong port constraints of type ANY for backloop edges.
  • RecursiveGroupLayouter: Fixed possible exception if there are edges that start or end at group nodes.
  • OrthogonalLayouter: Fixed possible exception for graphs with nodes of high degree.
  • DrawingEmbedder: Fixed possible exception.
  • GroupNodeRouterStage: Fixed possible exception that is caused by the missing removal of a temporarily added DataProvider.
  • EdgeRouter: Fixed exception that occurs sometimes when sphere of action is not set to ROUTE_ALL_EDGES.
  • EdgeRouter: Fixed endless loop which may occur in rare cases.
  • OrthogonalEdgeRouter: Fixed possible exception when both options rerouting and localCrossingMinimization are enabled.
  • ParallelEdgeLayouter: Fixed possible exception when the source or target points of parallel edges are outside of the corresponding node.
  • BusRouter: Fixed bug that may cause a broken bus structure.
  • BusRouter: Fixed possible stack overflow.
  • Method Rectangle2D.intersectsRectangle sometimes returned true for non-intersecting rectangles. This could cause infinite loops in BusRouter.

yFiles for HTML 1.1.0.1 - Changes Since 1.1

Bugfixes

  • GraphML: Reading properties of custom types with no attached meta-data or of declared type yfiles.lang.Object resulted in: "DeserializationNotSupportedException: Element {x} has collection content for non-collection property {y}."
  • SimpleLabelStyle's verticalTextAlignment did not work correctly in all cases.
  • SimpleLabelStyle's clipText feature sometimes resulted in wrong clips being applied when the style was shared between labels.
  • GraphML: Freezable objects like Pen actually got their isFrozen property serialized, which can result in run-time exceptions during parse time for frozen elements. The property is not written anymore and is ignored in old GraphML files for the built-in types.
  • Edge to edge connections where not parsed correctly when deserialized from GraphML.
  • yfiles.lang.Object.$class's isAssignableFrom and isSubclassOf did not work correctly for trait/interface types.
  • The type-checking debug helper did not accept functions as values for the various Binding properties at GraphSource and TreeSource and threw an error which made parts of the InteractiveGraphSourceDemo crash when debugging was enabled.
  • Setting the DefsManager's cleanupInterval property had no effect once the manager was in use.
  • The optional PortDefaultsPortCandidateProvider class did not work correctly and resulted in exceptions being thrown when reconnecting edges.
  • Trying to read empty label texts (with an empty XML element) from GraphML resulted in an exception.
  • Matrix2D.invert() did not always work correctly for rotation and skew transformations.
  • Fixed an "<obfuscated> has no method 'isPositiveInfinity'" exception when RotatedSliderEdgeLabelModel was used with autoRotationEnabled set to true.
  • Tooltips that would extend beyond the visible document were not always positioned correctly.

yFiles for HTML 1.1 - Changes Since 1.0.1

Major Features Added

  • New support for edge-to-edge connections in user interactions. Edges can be connected to other edges during edge creation as well as by reconnecting edge ends.
    [To the corresponding section in the yFiles for HTML Developer's Guide...]
  • New class yfiles.canvas.SvgExport adds support for exporting the CanvasControl's content to SVG.
  • A great number of additional status-indicating events has been added to the various default input modes in order to provide fine-grained callbacks to customization code.
  • New pluggable development support to provide runtime type information and convenient debugging support in the browser.
  • Major improvements to the overall rendering performance. Up to 200% gain when interacting with diagrams in Internet Explorer.
    Also, significant improvements of execution speeds of the automatic layout algorithms.
  • The library no longer contains Apache licensed third party code.

Automatic Layout

  • Class yfiles.router.polyline.EdgeRouter is a new edge routing algorithm that produces polyline edge routes. The segments of an edge are either orthogonal (i.e., the slope of each segment is a multiple of 90 degrees) or octilinear (i.e., the slope of each segment is a multiple of 45 degrees).
    [To the corresponding section in the yFiles for HTML Developer's Guide...]
  • yfiles.router.polyline.PolylineLayoutStage: A layout stage that adds polyline segments to the orthogonal edge paths of a graph.
  • yfiles.hierarchic.IncrementalHierarchicLayouter: Added support for octilinear edge routing, i.e., a routing style where the slope of each edge segment is a multiple of 45 degrees. Different edge routing styles can be specified using class yfiles.hierarchic.incremental.RoutingStyle.
  • yfiles.layout.PreferredPlacementDescriptor: A new descriptor that allows to specify advanced preferred placement information for edge labels.
    [To the corresponding section in the yFiles for HTML Developer's Guide...]

Minor Features Added

  • yfiles.graph.DefaultEdgeIntersectionCalculator now supports cropping edges directly at the port instead of at the node's geometry. This can be used to easily have edges end at the port instead of at the geometry of the node. See the new properties cropAtPort, extraCropLength, and callback method getPortGeometry.

Automatic Layout

  • yfiles.tree.BalloonLayouter: New option to take into account the bounds of node labels when calculating a layout.
  • yfiles.layout.LabelLayoutTranslator added option autoFlipping to specify whether or not edge labels should be automatically flipped if they would be upside-down.
  • yfiles.labeling.AbstractLabelingAlgorithm added option autoFlipping to specify whether or not edge labels associated with a "free" label model should be automatically flipped if they would be upside-down.

Improvements

Automatic Layout

  • yfiles.layout.GraphLayoutLineWrapper: Improved edge routing for overlapping edges (e.g., grouped edges).
  • yfiles.orthogonal.OrthogonalGroupLayouter supports labels at edges incident to group nodes.
  • yfiles.hierarchic.IncrementalHierarchicLayouter now treats edge groups at empty group nodes like those on normal nodes instead of ignoring them like it is done for non-empty group nodes.
  • yfiles.tree.GenericTreeLayouter creates more compact layouts, especially for trees with edge labels.
  • yfiles.partial.PartialLayouter: Now considers edge ports when calculating the barycenter of a component (if positioningStrategy is set to SubgraphPositioningStrategy.BARYCENTER).
  • Added auto-flipping to yfiles.layout.RotatedDiscreteEdgeLabelLayoutModel and yfiles.layout.RotatedSliderEdgeLabelLayoutModel. Labels that are placed upside down by a layouter will be flipped.
  • yfiles.organic.SmartOrganicLayouter: Now, fixed nodes are not moved by a fixed offset if scope is set to Scope.SUBSET.
  • yfiles.hierarchic.WeightedLayerer: Improved quality (i.e., reduced the number of reversed edges) if weightedCycleRemoval is enabled.
  • Added the ability to yfiles.tree.DefaultNodePlacer to produce polyline style edge routings with sloped edge segments.
  • Added the ability to yfiles.tree.DefaultPortAssignment to distribute edges at the border of the nodes.
  • Improved the performance of yfiles.layout.PortCandidate which potentially improves the performance of the yfiles.hierarchic.IncrementalHierarchicLayouter with rotated graphs with PortCandidates.
  • Optimized number of generated yfiles.layout.PortCandidates in yfiles.layout.RecursiveGroupLayouter for the core layouter.

Demos

  • Added context menu to demo.yfiles.toolkits.jquery.simple.
  • Added new demo demo.yfiles.printing that shows how to print a CanvasControl's content using yfiles.canvas.SvgExport.

Bugfixes

  • yfiles.drawing.IconLabelStyle has been fixed.

Automatic Layout

  • yfiles.hierarchic.IncrementalHierarchicLayouter: Fixed incorrect handling of port candidates in layouts where rotation and a mirror was set.
  • yfiles.layout.RotatedSliderEdgeLabelLayoutModel and yfiles.layout.SliderEdgeLabelLayoutModel: Improved label placement at zero-length edge segments.
  • Fixed bug that caused ArrayIndexOutOfBoundsException in yfiles.hierarchic.incremental.AspectRatioComponentLayerer.
  • Fixed integer overflow when group compaction is activated in yfiles.hierarchic.IncrementalHierarchicLayouter while layouting extremely large, deeply nested graphs.
  • Fixed bad edge routings in yfiles.genealogy.FamilyTreeLayouter when there are several marriages between generations.
  • yfiles.layout.IsolatedGroupComponentLayouter now considers labels in group bounds calculation if label awareness is enabled.
  • yfiles.hierarchic.IncrementalHierarchicLayouter: Fixed port handling of edges with a single edge port candidate that is contained in a set of node port candidates.
  • yfiles.orthogonal.OrthogonalLayouter and yfiles.orthogonal.DirectedOrthogonalLayouter: Fixed bug that caused IllegalArgumentException if input graph contains overlapping parallel edges and from sketch mode is enabled (see property useSketchDrawing).

Changes in Default Behavior

  • yfiles.drawing.ImageNodeStyle now stretches images to fit the node's bounding box. To restore the old behavior, subclass yfiles.drawing.ImageNodeStyleRenderer and override method getPreserveAspectRatio with an implementation that returns true.
  • Since with this release yfiles.graph.LayoutGraphAdapter translates yfiles.model.IMapper instances in the graph's mapper registry as yfiles.algorithms.IDataMap implementations that enable data write-back scenarios, the code that deals with IncrementalHierarchicLayouter.LAYER_VALUE_HOLDER_DP_KEY now behaves differently. In older releases the yfiles.algorithms.IIntValueHolder interface was queried from the mapper to write back the layer data. Now the data is written directly into the mapper and the IIntValueHolder implementation is ignored. See demo.yfiles.layout.IncrementalHierarchicLayouter for an example on how to use the respective key.

Automatic Layout

  • yfiles.partial.PartialLayouter: Property edgeRoutingStrategy now disables a previously set customized edge router.

Incompatible API Changes

  • The interfaces IComparable and IObjectComparable have been moved from namespace yfiles.system to yfiles.lang.
  • Method doStartMoveTouch in yfiles.input.MoveInputMode has been renamed to doStartDrag. The old method is available through the compatibility layer.
  • Methods GraphMLIOHandler.readFromURI and GraphMLParser.parseFromURI have been renamed to readFromURL and parseFromURL, respectively. The old methods are available through the compatibility layer.
  • The deprecated extension methods in yfiles.model.MapperExtensions have been removed.
  • The deprecated convenience methods LookupExtensions#get and LookupExtensions#getWithContext have been moved to the compatibility layer.
  • Methods getTargetPortCandidateProvider and getSourcePortCandidateProvider in yfiles.input.GraphEditorInputMode changed their signatures to accept yfiles.graph.IPortOwner instances instead of yfiles.graph.INode instances. This is in conjunction with support for edge-to-edge connections. Overriding methods need to be adjusted accordingly.
  • Method showHitNodeCandidatesOnly in class yfiles.input.PortRelocationHandle has been renamed to showHitPortOwnerCandidatesOnly to support edge-to-edge connections. Also the behavior of this class has been changed to allow edge-to-edge connections if this feature has been enabled by providing port candidates at the edges. Should you wish to disallow edge-to-edge connection even though you are providing edge port candidates, the new edgeToEdgeConnectionsAllowed property can be set to false.
  • Previously it was possible to cast DefaultEdgeIntersectionCalculator.INSTANCE to the containing type. The singleton is not of the given type anymore. If you require an instance of that type, consider instantiating one instead.

Automatic Layout

  • yfiles.layout.IEdgeLabelLayout: Removed property preferredPlacement and added property preferredPlacementDescriptor.
  • yfiles.partial.PartialLayouter: Replaced method configureOrthogonalEdgeRouter by method configureEdgeRouter.

yFiles for HTML 1.0.1 - Changes Since 1.0

Minor Improvements

  • The 'Getting Started' steps in the Developer's Guide have been revised and improved.
  • The Developers' Guide's code snippets and IDE configuration examples have been updated and improved. A guide on how to configure WebStorm has been added.
  • Two convenience constructors have been added to GraphOverviewControl that have the same signature as the ones used in the GraphControl: GraphOverviewControl.ForDiv(HTMLDivElement) and GraphOverviewControl.ForId(String).
  • The Getting Started Tutorial Step 1 has been simplified to not make use of the demo framework.
  • A convenience constructor has been added to ImageNodeStyle. ImageNodeStyle.WithPath(String) takes the image source string as an argument for the creation of the style.
  • IEnumerable got new extension methods forEach and forEachWithIndex that make it easy to iterate over all enumerable implementations in the library.
  • Enumerations where not properly documented in the IDE-support yfiles-api.js file.
  • The GWT demo has been improved and revised to show client-server interaction with GWT.
  • The Dojo demo has been improved to show how to use the Dojo context menu implementation with yFiles.
  • Added AddRegistryOutputMapper overload that takes a serialization handler.
  • The clean-up timer handling of type CanvasControl and its subclasses has been improved to use less CPU and to prevent memory-leaks.
  • A workaround for an Safari Javascript bug (on iOS and MacOS) has been added that should prevent Safari from corrupting the state of the Javascript objects during iteration.
  • The HTML Api Documentation did not always include inherited members.
  • The HTML Api Documentation missed the module name prefix 'yfiles/'.

Bugfixes

  • CircularLayouter yielded bad results due to a bug in Groups.biconnectedComponentGrouping.
  • Tooltips sometimes caused additional scrollbars to appear in the browser and were not cleaned up correctly after uninstallation.
  • ImageNodeStyle's outlineShape property was non-functional. Documentation has been updated and the feature can now be used as documented.
  • The .css file for the library has been moved to the lib/yfiles.css file. The demo-framework css file has been renamed to demo-framework.css to be less ambiguous.
  • The gesture for moving the viewport with the mouse (holding ctrl-key while dragging the mouse) did not work in the default configuration of GraphEditorInputMode.
  • The serialization of ImageNodeStyle to GraphML was broken and could not be parsed in again.
  • The serialization of primitive types (Strings, Numbers, Arrays) in GraphML was broken and incompatible with the yFiles editions for .net, WPF, and Silverlight
  • The 'File Operations Demo' ceased to work after obfuscation with the standard settings. An exclusion has been added to the obfuscator configuration.
  • The 'File Operations Demo' displayed an error dialog when loaded in chrome under same origin restrictions, such as from the file system. This has been improved to show only a warning.
  • The Image Export Demo now loads the third party demo code from a cache at our website, avoiding a problem with git-hub's mime-type handling in Internet Explorer and the risk of external changes breaking the demos.
  • The Image Export Demo had a workaround for an issue in Chrome that has been fixed in the meantime. The fix broke the workaround, though. The code for the workaround has been improved to work in both cases, now.
  • Expanding and collapsing a folder node programmatically does not require the yfiles/graph-input module anymore.
  • The illegal argument exceptions now correctly carry the parameter of the illegal parameter that caused the exception.
  • Several race-conditions during the AMD loading in some of the demos have been removed.
  • Some constructors in the sample files called their base constructors twice.
  • ShadowNodeStyleDecorator was not displaying a shadow. This has been fixed to use SVG filter effects. We recommend using the built-in drop shadow visualizations, however, since at least for larger visualizations the filter effects do not work very well.
  • BendAnchoredPortLocationModel could throw an IndexOutOfRangeException under certain circumstances.
  • Setting GraphOverviewControl.graphPaintable had no effect.
  • CanvasOverviewGraphVisualCreator did not reset the stroke for drawing edges and therefore always used the last stroke that was set used on the canvas.
  • Deleting graph elements during interactive edge creation could throw an exception.
  • Group node visualizations were not always removed correctly when the group node was deleted.
  • Some of the special label model implementations where missing reflection meta-data and could not be serialized to GraphML.
  • RotatedSliderEdgeLabelModel crashed with an undefined method error.
  • DefaultSelectionModel was not always cleaned up correctly when the domain was changed.
  • SliderEdgeLabelModel threw an exception for paths with zero length segments.
  • FilteredGraphWrapper: The adjacency state of the filtered instance was wrong under certain conditions.
  • FreeEdgeLabelModel: Fixed bad positions returned by parameter finder.
  • Accidental debug console output during dragging of labels was removed.

Incompatible Changes

  • Obsolete duplicate class MemoryImageNodeStyle has been removed from the package. Use ImageNodeStyle instead.
  • The type of ImageNodeStyle's outlineShape property (and also TemplateNodeStyle, TemplateLabelStyle, and TemplatePortStyle) has been changed to accept GeneralPath instances. The previous implementation was unusable and had no effect.

yFiles for HTML 1.0

Major New Features

  • yFiles for HTML 1.0 is the initial release of yFiles for HTML.

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 regarding your request.
Learn more in our privacy policy.