Release Notes
yFiles for HTML Version 3.1

Version 3.1.0.3 is the latest release of yFiles for HTML in the yFiles for HTML 3.1 major release series.
See the changelog for a list of all changes in this and all other versions.

To learn about the new features in version 3.1, have a look at About yFiles for HTML Version 3.1.
Below you will find the technical requirements and a list of all new features, improvements, and incompatible changes.

Technical Requirements

  • For development, we strongly recommend an IDE with dedicated support for the web platform, for example Visual Studio Code or JetBrains WebStorm.
  • yFiles for HTML-based web applications require a common, standards-compliant browser. These include Chrome, Safari, Firefox, and Edge on Windows, macOS, iOS, and Android operating systems.
    The yFiles for HTML 3.1 release has been tested with the following browsers:
Icon of the Google Chrome browser Google Chrome
Icon of the Mozilla Firefox browser Mozilla Firefox
Icon of the Safari browser Apple Safari
Icon of Microsoft Edge browser Microsoft Edge
125+ (desktop and mobile devices)
125+ (desktop and mobile devices, and 115 ESR)
17.4+ (macOS, iOS, and iPadOS)
125+

All changes
Version 3.1

yFiles for HTML 3.1 is an incremental update that builds on the extensive changes introduced in the 3.0 release. It brings exciting new features, helpful improvements, and bug fixes to all parts of the library. As always, there is a large number of new and improved demos demonstrating these features and improvements.

If you are updating from an older version of yFiles for HTML, have a look at the list of incompatible changes and at the Migration Guide.

New Features, Improvements, and Bug Fixes

Categories: General Components WebGL Styles Text Rendering Interaction Tooltips and Popovers Layout Hierarchical Layout Bundled Edge Router Labeling Other Layouts Analysis Collections & Geometry New Demos

General

New Features and Improvements

  • yFiles classes and interfaces now behave like regular JavaScript classes when enumerating members: properties and methods are no longer enumerable, fields are enumerable. This improves compatibility with third-party frameworks like React.
  • The library is now split into more granular JavaScript modules. Major features and layout algorithms have been moved into separate modules, enabling tree‑shaking so build tools can exclude unused parts from production bundles, reducing bundle size and improving load times without changes to existing code.
  • The nonce value of the automatically loaded yFiles stylesheet can now be set with the new Workarounds.cspNonce property, which can be used to satisfy stricter Content Security Policy settings.
  • The memberwise cloning used internally by the library now also handles certain edge cases correctly.

Components and Graph

New Features and Improvements

Bug Fixes

WebGL

New Features and Improvements

Bug Fixes

Styles

New Features and Improvements

Bug Fixes

  • MarkupLabelStyle no longer wraps incorrectly or exceeds the maximumSize of the label.
  • Loading GraphMLs containing pattern fills no longer crashes.
  • Bridges of polyline edges are no longer included in selection, highlight, or focus.
  • Fixed a problem when only one of the managers for highlights or selection got replaced in GraphComponent where their domain property value of the other one became defunct.

Label Text Rendering

New Features and Improvements

  • When rendering label text in CJK languages, line breaks between ideographic graphemes are now allowed for both word and character wrapping.
  • When word-wrap is enabled, trailing and orphaned whitespace is now trimmed before wrapping, resulting in tighter label bounds.

Bug Fixes

  • Word and character wrapping now respects grapheme boundaries (including emojis, characters with combining marks, and non‑breaking spaces).
  • By default, the text input field of the TextEditorInputMode and the default tooltip now both use black text instead of inheriting the color. This avoids displaying white text on the already white background.

Interaction

New Features and Improvements

  • The new CanvasComponent.preventViewportInteraction property can be used to prevent unwanted interactions with the viewport by touch or pen gestures or the mouse wheel. This replaces the previous enum value MouseWheelBehaviors.ONLY_WHEN_FOCUSED which applied only to mouse wheel input.
  • Context menu entries can now be activated on pointerup for environments where the menu opens on pointerdown (e.g. macOS) such that a single gesture can activate context-menu entries.
  • Improved panning behavior on touch devices results in a less slippery feel when panning the graph.
  • Keeping dragging with auto-scroll enabled while at the border of the canvas now accelerates the auto-scroll speed.
  • The new MoveViewportInputMode.isDragging property reflects the current state of that input mode.
  • Keyboard shortcuts for registered commands are now always handled and no longer trigger browser actions. Previously, shortcuts were only processed if possible in the current state. This may have resulted, for example, in CTRL+R unintentionally reloading the current page instead of reversing the direction of an edge.
  • The new ResizeStripeInputMode.affectedStripeSubregion and ResizeStripeInputMode.affectedItems properties provide access to the stripe being modified.
  • On macOS, the GraphComponent now zooms when holding the Command modifier key during vertical panning on a trackpad or a magic mouse.
  • The text editor input box is now placed with integer coordinates to avoid blurry browser rendering of the input field.
  • The new DropInputMode.acceptDrag method is called on drag-enter events and determines if the mode will handle subsequent drag and drop events. Previously, this was the responsibility of the DropInputMode.adjustEffect method. Now, adjustEffect only changes the drag/drop effect of the given event args as its name implies.

Bug Fixes

  • The GraphComponent no longer drifts when the minimumZoom value is reached during pinch zoom.
  • The GraphComponent no longer prevents zooming after dragging when two MoveViewportInputModes were active in the same instance.
  • Fixed delayed zoom and scroll animation of the GraphComponent for high frequency animation triggers. For example, when strongly accelerating a free-spinning mouse wheel.
  • In a GraphComponent that is transformed with a CSS transform, the location of pointer events is now handled correctly. Events that occur over an HtmlVisual are an exception; these are still not handled correctly.
  • WaitInputMode does not steal pointer capture from other UI elements anymore.
  • When HandleInputMode cancels the drag gesture, it now calls IDragHandler.cancelDrag with the original handle location instead of the initial pointer location.
  • ItemDropInputMode now also emits the drag-over event when the pointer remains at the same location but the viewport changes during the drag-drop gesture, for example, due to auto-dragging or mouse-wheel scrolling. This enables ItemDropInputMode to update its DropTarget correctly.
  • Fixed the label editor on iOS/Safari, so tapping inside the text box correctly positions the cursor and pointer input is properly recognized.

Tooltips and Popovers

New Features and Improvements

  • The new PopoverManager, in combination with the new PopoverDescriptor, provides an easy way to show popover elements like tooltips, contextual toolbars, detail panels, or persistent annotations. The new Tooltips and Popovers Demo shows how to enable and customize tooltips and popovers for graph items.
  • The ToolTipInputMode now uses the PopoverManager to display tooltips.
  • The QueryItemToolTipEventArgs now provides access to a new PopoverDescriptor that allows flexible customization of the tooltip's popover element. The new descriptor provides properties for positioning the popover with an additional update event that is triggered whenever a significant action occurs while the popover is opened. It also provides access to overwrite the automatic open/close behavior.
  • Tooltips now remain open at their initial open location until the cursor exits the item. This behavior can be adjusted by changing UpdatePopoverEventArgs.showPopover in the update event.

Layout

New Features and Improvements

Hierarchical Layout

New Features and Improvements

  • The HierarchicalLayout class now offers strong support for keeping an existing layout stable with respect to the exact coordinates. This makes it possible to insert incremental new elements while keeping the remaining elements at their original location, or as close as possible to their original location if the original placement is no longer valid. The new Hierarchical Exact Coordinates Demo shows how to integrate additional nodes in an existing hierarchical layout while keeping the coordinates of the other nodes. In addition, the Interactive Hierarchical Layout Demo has been updated to support these new options.
  • The HierarchicalLayout symmetry optimization now produces more symmetrical results for grouped inputs.
  • The HierarchicalLayout class now produces significantly less short edge segments, thus, reducing the number of bends.

    The property CoordinateAssigner.maximumPortDeviation allows to control the distance a port may be moved to avoid bends in the connecting edge segment, with the drawback of getting non-uniform port distributions.

  • Improved the quality of HierarchicalLayout results with sequence constraints.

Bug Fixes

Bundled Edge Router

New Features and Improvements

Labeling

New Features and Improvements

  • The integrated edge labeling of the OrganicLayout now places the edge labels with EdgeLabelPreferredPlacement.placementAlongEdge set to AT_CENTER closer to and more symmetric around the midpoint between the borders of the source and target nodes.
  • For edge labels with preferred placement center, the GenericLabeling algorithm now prefers positions near the center of the path between the incident nodes. The path length inside the incident nodes is ignored.

Other Layouts

Bug Fixes

Analysis

New Features and Improvements

  • The Neighborhood algorithm now additionally delivers the edges in the neighborhood of the start nodes through the Neighborhood.Result.Edges property.

Collections and Geometry

New Features and Improvements

  • The new IEnumerable.with method is modeled after the Array.prototype.with function and returns a modified view of the enumerable.

    Similarly, the new IEnumerable.toSpliced method is modeled after the Array.prototype.toSpliced function and returns a modified view of the enumerable.

  • The IEnumerable.concat method has improved type definitions.
  • The new static methods Rect.sum and Rect.fromPoints calculate the bounding rectangle of an enumerable of rectangles or points, respectively.
  • The new Rect.add method creates the union of the current instance and the specified rectangle.

Bug Fixes

  • Checking instances of basic types like Point, Size, etc. for equality is now more robust in certain rare edge cases.

New Demos

  • The new Event Timeline Demo showcases a simple yet powerful way to visualize dynamic graph data, with nodes (entities) represented as labeled parallel horizontal line segments and edges (events) as labeled parallel vertical ones.
  • The new Biofabrics Demo offers a simple presentation and introduction to biofabric visualizations.
  • The new Space and Time Demo visualizes the spread of contaminants in temporal, geospatial, and relational dimensions.
  • The new Custom Copy and Paste Demo shows how the GraphClipboard can be used to transfer style between graph elements.
  • The new Octilinear Edge Editing Demo shows how to implement interactive editing of octilinear edges.
  • The demos' UI has been modernized with an updated visual design to provide a clearer and more cohesive user experience.

Incompatible Changes

Categories: Components WebGL Styles Interaction Tooltips and Popovers Layout Hierarchical Layout Bundled Edge Router Geometry

Components

Incompatible API Changes

  • The IRenderContext has a new method setConnectedCallback - wrapping implementations should delegate the call to the wrapped context. If you are implementing the interface from scratch, make sure that after rendering and assembling the DOM, all the collected callbacks are called. yFiles automatically does this for the context implementations provided by the library.
  • The events CanvasComponent.viewport-changed and GraphComponent.current-item-changed now use plain EventArgs instead of PropertyChangedEventArgs, since these events each affect only a single property.
  • The event GraphComponent.selection-model-changed has been removed. This event was only fired when the model instance changed, not when one or more selected items changed.
  • The unused protected constructors of SerializationNotSupportedException and DeserializationNotSupportedException have been removed since they were based on an obsolete constructor of the base class.

Incompatible Behavior Changes

  • The GraphComponent.fitGraphBounds method no longer adds an undocumented additional margin of 1.0 when no margins are specified as arguments.
  • GraphML now uses a sentinel object GraphMLIOHandler.graphmlRoot instead of null if data for the toplevel document needs to be written or read.

WebGL

Incompatible API Changes

Styles

Incompatible API Changes

  • The EdgeIndicatorBendsRenderTag class has been removed and replaced by the IListEnumerable<IBend>, which was previously available in its bends property. The zoomPolicy property had no effect was therefore removed without replacement. The corresponding, now obsolete zoomPolicy enum has also been removed.
  • The new RadialGradient.radius property replaces the properties radiusX and radiusY. This corresponds to the underlying SVG element <radialGradient>, which also has only a single r attribute for the radius. Previously, radiusX was used as the single radius and radiusY had no effect.
  • When word-wrap is enabled, trailing and orphaned whitespace is trimmed from rendered text before wrapping, which may change existing line breaks and reduce label width.

Interaction

Incompatible API Changes

Incompatible Behavior Changes

Tooltips and Popovers

Incompatible API Changes

Incompatible Behavior Changes

Layout

Incompatible API Changes

Hierarchical Layout

Incompatible API Changes

  • The IncrementalNodeHint member is now a class and no longer an enum. The available hint values have been changed as follows:
  • The IncrementalEdgeHint values have been changed as follows:
  • Removed the CoordinateAssigner.exactPlacement property. To keep coordinates as fix as possible, use hint IncrementalNodeHint.EXACT_COORDINATES or a hint created with the IncrementalNodeHint.createExactCoordinatesHint method. The old behavior forcing exact placement on the existing coordinate while even accepting severe violations of other constraints or illegal group overlaps is no longer available.
  • Removed the CoordinateAssigner.fromSketchLayerAssignment property. If there are nodes with exact-coordinate hints, their layer coordinates in the sketch are now always considered. Otherwise, the property had no effect, and the behavior has not changed.
  • Removed the CoordinateAssigner.bendReduction property. The number of bends is always optimized.
  • Removed the CoordinateAssigner.straightenEdges property. The replacement is the new CoordinateAssigner.maximumPortDeviation property. To get the old behavior for "true" use a large value on the new property, for "false", use zero.

Incompatible Behavior Changes

Bundled Edge Router

Incompatible Behavior Changes

Geometry and Collections

Incompatible API Changes

  • IEnumerable.concat is now stricter in regard to the types of rest arguments. Add a type parameter when mixed parameter types cannot be inferred, automatically.
  • Method MutablePoint.convertToPointD has been removed. Use the MutablePoint.toPoint method instead.
  • Method MutableRectangle.convertToRectD has been removed. Use the MutableRectangle.toRect method instead.
  • Method MutableSize.convertToSizeD has been removed. Use the MutableSize.toSize method instead.