yFiles for HTML
Changelog

yFiles for HTML 3.1.0.3

This third bugfix release for yFiles for HTML 3.1 resolves issues related to interaction, view and layout. It includes several new demos. There are no incompatible API changes.

Bug Fixes

Interaction

  • Interactive edge creation is no longer canceled prematurely by various events such as zooming during the gesture or pressing an unrelated key if bend creation is disabled.
  • CanvasComponent.pointer-long-rest events no longer fire after initiating a pan gesture with touch input on the canvas.
  • In Firefox, interacting with label text placed inside graph nodes now works correctly. A browser-specific workaround has been enabled by default that disables a fast path for event coordinate calculation. This calculation previously caused incorrect input handling when interacting with <tspan> elements. The underlying browser bug has been fixed in Firefox 156, so only older versions are affected.

View

  • The text in the label editor no longer appears too close to the bottom edge in Firefox.

Layout

New and Improved Demos

  • The new Dashboard Demo showcases an interactive data playground that combines multiple synchronized views, including a graph, table, timeline, and map.
  • The new Legend Demo shows four different ways to display a legend for node types.
  • The Collaborative Graph Editor Demo adds a collaborative graph editing feature to the GraphEditorInputMode using yjs. This enables multiple users to simultaneously add and remove nodes and edges, edit labels, and adjust node and edge positions and grouping.
  • The Interactive Knowledge Graph Demo has been enhanced for faster performance and improved interactivity. The ontology view has been redesigned with a new filtering mechanism.
  • The Isometric Drawing Demo now includes a new Pseudo3D view that uses advanced features of yFiles to render complex SVG node and edge styles in a projected perspective, adding a third dimension.
  • The Network Monitoring Demo now includes a heatmap visualization around the nodes, indicating their current load.

yFiles for HTML 3.1.0.2

This second bugfix release for yFiles for HTML 3.1 resolves issues relating to styles, interaction, layout and GraphML serialisation. There are no incompatible API changes.

The yFiles for HTML Optimizer has also been updated. Thanks to the new Rolldown plugin, it now works seamlessly with Vite 8.

Bug Fixes

Styles

  • Fixed ShapePortStyle.clone to create an independent copy instead of sharing the internal style state with the original instance.

Interaction

  • Scrolling with the mouse wheel in the overview component has been fixed and no longer scrolls the entire web page.
  • The label text editing element will no longer become unresponsive if its enter or leave animation is interrupted or fails to complete. In both cases, pending animation listeners are now canceled correctly.
  • The Workarounds.toolTipLeaveAnimationMaximumDuration property is now disabled by default and marked as deprecated since dynamic cleanup based on animation duration makes it unnecessary. For compatibility with previous versions, any specified value still works as before.
  • The ability of DropInputMode to accept native HTML draggable elements has been restored.
  • Dragging nodes between GraphComponents now works reliably even if the target component has been clicked previously. The DropInputMode.capturePointerInputDuringDrag property is now disabled by default and marked as obsolete, as yFiles handles pointer input automatically in all supported scenarios.

Layout

GraphML

Noteworthy Demo Improvements

yFiles for HTML 3.1.0.1

This first bugfix release for yFiles for HTML 3.1 corrects some errors, brings extended testing demos and includes improvements of the documentation. There are no incompatible API changes.

Bug Fixes

General

  • The preconfigured Visual Studio Code tasks now work correctly.

Components

  • Opening a popover in a GraphComponent that is not connected to a Document object doesn't throw anymore. Instead, the open method returns false to indicate that the popover did not open.
  • For overlapping graph elements, the correct tooltip is now shown.
  • The type definitions for popover and tooltip content properties correctly specify the expected type of the content. Previously, this was just any.

Styles

Layout and Analysis

  • Setting an ItemMapping or ItemCollection via convertion no longer throws an error if only the analysis module is imported without explicitly importing the layout-graph module, too.
  • Using the RadialLayoutData.layerIds property in a web worker layout no longer throws an error.

Noteworthy Demo Improvements

yFiles for HTML 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.

yFiles for HTML 3.0.0.5

This 5th bugfix release for yFiles for HTML 3.0 corrects some errors. Also, there are several improvements for the demos. There are no incompatible changes.

Bug Fixes

View

  • The SVG export no longer hangs if an image cannot be fetched while encoding it to a base64 data URL.
  • The WebGLGraphModelManager class no longer clears the entire canvas in SVG rendering mode. This prevented WebGL animations in SVG mode, for example.
  • When the properties of a Stroke are changed, the associated Visual is now updated correctly.
  • With the EdgeStyleIndicatorRenderer class, the bends of the intermediate edges that are used for rendering now correctly have the tag object of the corresponding original bend.

Interaction

  • After moving a folder node in closed state with orthogonal edge editing enabled, folding edges no longer get incorrect additional segments when the folder is expanded.
  • Finishing interactive edge creation on an invalid target now correctly cancels the gesture.
  • The TextEditorInputMode.anchor property is now correctly taken into account when placing the label text editor.

Layout

Noteworthy demo improvements

  • The new Interactive Knowledge Graph Demo visualizes a knowledge graph and highlights potential data issues, offering interactive tools to inspect and fix them.
  • The new Flow Filtering Demo shows how to dynamically highlight or hide items within the connecting upstream or downstream flows of a given node.
  • The Port Candidate Provider Demo now includes an example of a dynamic port candidate that follows the outline of the node-.

yFiles for HTML 3.0.0.4

This fourth bugfix release for yFiles for HTML 3.0 corrects some errors. Also, there are several improvements for the demos. There are no incompatible changes.

Bug fixes

Interaction

Hierarchical Layout

Tree Layout

Circular Layout

Noteworthy demo improvements

  • The new Supply Chain Demo visualizes a bakery supply chain in France. The graph’s nodes represent individual facilities and list the items produced at that location, including the current stock. The edges between products describe product flows. Interact with the diagram to highlight the dependencies between products and see how changes in inventory at one location affect dependent locations.
  • We have simplified the code of many smaller demos by reducing the setup code and other boilerplate code. The code for these demos can now be used unchanged in the revised yFiles Playground, for example, to simplify sharing with colleagues or the yFiles support team. In this release, most demos in the ā€œLayoutā€ category have been updated, and more demos will be migrated in future releases.
  • The CSS Styling Demo received a fresh visual look, demonstrating how to target different graph elements using a pre-defined color palette in CSS.
  • The demo directories now contain package-lock.json files as an additional safety measure against npm supply chain attacks.
  • The timeline component used in the Fraud Detection Demo and the Timeline Demo now properly reacts to touch events.
  • Many more improvements and corrections in other demos.

yFiles for HTML 3.0.0.3

This third bugfix release for yFiles for HTML 3.0 corrects some errors.There are no incompatible changes.

Bug Fixes

Components

  • The GraphComponent now is more careful when removing DOM elements from item styles that are no longer needed. This prevents errors if the element has already been removed otherwise, e.g., by frameworks such as React or Angular.

Styles

  • The selection, highlighting and focus visualization of edges using BridgeEdgeStyle or ArcEdgeStyle no longer disappears too early if the edge path is only partially in the viewport.
  • MarkupLabelStyle now trims trailing whitespace on each line, improving horizontal alignment.
  • MarkupLabelStyle now provides improved support for text wrapping in nested markup tags.

WebGL

  • The position of WebGL labels is now always updated after interactive gestures.
  • WebGLIconLabelStyle now correctly renders transparent icons, which previously appeared greyed out.
  • WebGLImageNodeStyle and WebGLIconLabelStyle no longer exhibit image border glitches during rendering.
  • With WebGL rendering, the alignment of single-line labels now more closely resembles that of SVG, and letters are no longer cut off at the edge.

Interaction

  • Sporadic errors during pinch zoom have been corrected.
  • Toggling the selection of an item using the keyboard now always toggles the selection of the focused item. Previously, if exactly one other item was selected when toggling, that item was deselected, making it virtually impossible to select multiple individual items using the keyboard.
    To fix this, the behavior of Command.TOGGLE_ITEM_SELECTION has been adjusted accordingly, and the behavior the Command.SELECT_ITEM and Command.DESELECT_ITEM has also been changed accordingly.
  • NavigationInputMode now reliably brings items selected with keyboard navigation into the view. Previously this only worked for nodes.
  • The default selection visualization for stripe labels is now actually rendered.
  • Adding a key binding to KeyboardInputMode for a shortcut that also triggers a browser action now properly prevents the execution of the browser action.
  • Pinch-zoom gestures on touchpads are now reliably recognized, even if they alternate with touch or pen inputs.
  • In a GraphComponent with a projection, rotated label text edit boxes are now placed at the correct location.

GraphML

  • The GraphML parser now correctly reads arrays with empty strings.

View-Layout-Bridge

  • When called multiple times, the LayoutExecutorAsyncWorker.initializeWebWorker method will now clean up event listeners from previous runs before registering a new one.
  • The IGraph.applyLayout method now correctly considers its portPlacementPolicy argument.
  • The LayoutExecutor and LayoutGraphAdapter classes now correctly assign port group IDs to edges that connect to the same port. Previously, in some cases involving ports with a single incoming and outgoing edge, the port group IDs were omitted, which could cause incorrect layout results (such as diagonal segments instead of orthogonal ones).

Layout

  • For the LayoutData classes, setting a property of type ItemMapping with a native JavaScript map now works correctly in all cases. Previously, such an ItemMapping property did not return the correct default value for diagram elements whose value was not explicitly set unless the default happened to be null.
  • The CurveFittingStage now correctly respects the maximum error. Previously, it sometimes produced curves that violated the maximum error.
  • The LineSegment.getIntersection method no longer produces incorrect results when the specified epsilon is zero. Previously, there were some edge cases where the algorithm failed to detect an intersection and returned null instead.

Hierarchical Layout

  • The HierarchicalLayout algorithm now correctly handles node and edge labels with width or height set to negative values. Previously, large negative values may have caused exceptions.

Labeling

  • The GenericLabeling algorithm now correctly considers the case where model parameters of a CompositeLabelModel have different weight values. Higher weights are preferred.

Partial Layout

  • PartialLayoutScopeData will no longer mark any edges as affected when only nodes are specified to be in scope, nor mark any nodes as affected when only edges are specified to be in scope.

Algorithms

  • The Intersections class does not dispose FilteredGraphWrapper instances that it is given with no subgraph nodes or edges specified anymore. Previously, this caused the graph instance to become defunct, resulting in various operations running into null fields and properties, generating exceptions that were non-trivial to understand.
  • IntersectionsResult no longer includes intersections that have no actual intersection points. This issue occurred when two graph elements were within a small epsilon distance of each other.

Geometry

General

  • Corrected broken links in the documentation comments of the TypeScript types. In particular, there are no longer broken links to primitive types, Object and Array.

Noteworthy Demo Improvements

  • We have significantly improved the Process Mining demo. The demo now shows a more realistic example, and it is possible to pause at any time to examine the details of individual processes more closely.

yFiles for HTML 3.0.0.2

This second bugfix release for yFiles for HTML 3.0 corrects some errors. We have added a few new API members that are required to use existing API meaningfully, but there are no incompatible changes.

Bug Fixes

Components and Styles

  • Setting null to the GraphComponent.inputMode property now works as expected. Previously, a new instance of GraphViewerInputMode was created and returned by this property if null was set.
  • In more cases, the text now wraps as it did in version 2.6 and as you would naturally expect. In the previous version, text wrapping could be incorrect, especially for texts that contained consecutive spaces, leading and trailing spaces or long words.
  • In multiline labels, the distance between the first and second line is no longer larger than all other distances.
  • The WebGL image style no longer unnecessarily generates the associated SVG image data if it is not required for rendering. This led to a noticeable delay in some user actions, e.g., when using the marquee selection in large diagrams for the first time.
  • The Size.area property now returns 0 for empty sizes. This is consistent with the behavior of the Rect.area property.

Interaction

  • During text editing, the first mouse click outside the text editor is no longer ignored.
  • In certain rare cases, the insertion of edges could end up in an endless loop. This has now been fixed.

Hierarchical Layout

  • Instances of LayerConstraintData and SequenceConstraintData that are configured with comparables can now be reused for multiple layout calculations.
  • The HierarchicalLayout class now always places aligned ports correctly in from-sketch mode.
  • The HierarchicalLayout class no longer assigns superfluous space to group nodes if there are grouped edges.
  • The HierarchicalLayout class no longer produces an error when using a non-zero grid distance in combination with incremental mode's exact coordinate hints.
  • The HierarchicalLayout class no longer produces an error for labeled graphs with port alignment constraints when the integrated edge label placement is enabled.
  • The HierarchicalLayout class no longer produces superfluous crossings between backloops or same-layer edges in the first or last layer.

Labeling

Other Layouts

Noteworthy demo changes

  • During user interaction, the browser on the Meta Quest VR headset sends unusual pointer events of type mouse alongside regular pointer events. These additional events confuse the yFiles's input event handling. Therefore, the demos now detect and ignore such events on this browser.

yFiles for HTML 3.0.0.1

This 1st bugfix release for yFiles for HTML 3.0 corrects some errors, and includes two small improvements. There are no incompatible API changes.

Improvements

  • The ShadowNodeStyleDecorator class now wraps the decorated style in an additional SVGGElement that applies the SVG filter instead of tainting the wrapped style's filter attribute.
  • The MoveViewportInputMode.priority value has been lowered to 105 to make viewport panning with CTRL or SPACE modifiers easier in dense graphs.

Bug Fixes

Layout

  • Serializing a large graph with LayoutExecutorAsync to calculate a layout in a web worker no longer takes an extremely long time.
  • Executing a layout with the GraphComponent.applyLayoutAnimated and IGraph.applyLayout methods now behaves in exactly the same way as configuring the LayoutExecutor with the same setting. Previously, there were subtle differences that could lead to different behavior.
  • The Tree, Orthogonal, Organic, and Series-parallel layout now automatically places edge labels of the parallel edges handled by their ParallelEdgeRouter instance, when integrated edge labeling is enabled.
  • The EdgeRouter now prefers to use fixed port candidates that are not overlapped by other nodes.
  • The OrganicLayout class no longer ignores the preferred edge length in incremental layout mode with a single affected element.
  • The TreeLayout class no longer produces broken edge routes for some input graphs with multi-parent structures.
  • The numerical value of LayoutAnchoringPolicy.NONE has been changed from 7 to 0 to avoid errors in certain cases.

Styles

  • The intersection calculation for RectangleNodeStyle has been corrected for some previously failing edge cases that resulted in edges ending in midair or disappearing.
  • The LabelStyle class no longer renders single-line labels if the label height is too small.
  • The TextRenderSupport.addText method no longer displays single-line text if the maximum height is too small.
  • ArrowEdgeStyle no longer triggers an error when WebGL rendering is used.
  • With ShadowNodeStyleDecorator, the nodes are no longer occasionally invisible.
  • Resolved access errors in StyleIndicatorRenderers like NodeStyleIndicatorRenderer when the item or owner no longer exists.

Component and Interaction

  • The trackpad and mouse wheel detection logic did not properly work on macOS and on various non-default browser zoom levels. The configuration and logic have been improved and should now yield more consistent results across browsers, OSs, browser zoom settings, most drivers and hardware. For edge cases and future inconsistencies, a configuration setting has been made available in Workarounds.
  • Several members of EditLabelInputMode could not be overwritten by mistake. The install, uninstall, tryStop, and cancel methods and the enabled property can now be overwritten.
  • Elements in the GraphComponent DOM no longer have class attributes that contain the name null.

Notable Demo Improvements

  • With the TemplateStyles of the Template Styles Demo, changing the cssClass property while the style is already in use now has an effect, since changes to this property are now detected by the updateVisual method.

yFiles for HTML 3.0

This version brings a major overhaul of many parts of the API, resulting in a lot of incompatible changes. We have designed many functions to be simpler, more intuitive and more consistent and removed technical debt. In addition, this release contains numerous new features, improvements, and bug fixes to all parts of the library.

New Features, Improvements, and Bug Fixes

Categories: General Graph Components Rendering Selection, Focus, Highlight Styles WebGL Interaction Label Editing Snapping Clipboard Folding View-Layout-Bridge Layout Hierarchical Layout Tree Layout Orthogonal Layout Edge Router Organic Layout Interactive Organic Layout Radial Tree Layout Partial Layout Component Layout Algorithms Analysis Collections Geometry

General

New Features and Improvements

  • The yFiles class system now follows the conventions of the ECMAScript standard even more closely. As a result, some special classes and constructs have become superfluous, e.g., the YObject, YNumber, YBoolean, and YString types and the $class member.
  • The event listener API for yFiles events is now similar to JavaScript's EventTarget. Each event sender now has a single addEventListener and removeEventListener method that gets the event name as the first parameter and an optional options object as the last one. The second parameter is the event listener function that gets two parameters: a specific EventArgs object and the sender instance. The options support automatic event deregistration via the AbortController API and single (once) event invocation with automatic deregistration.
  • Option objects in arguments of constructors and other methods now also work for nested properties. Previously, only the direct properties of the class could be defined.
  • It is now possible to explicitly pass undefined to optional parameters matching the behavior of ECMAScript and TypeScript.
  • yFiles for HTML 3.0 uses a new license format (license version "1.2"). Existing licenses with license version "1.1" remain compatible.
  • The yFiles npm package is now named @yfiles/yfiles. This makes it easier to serve yFiles from a local registry by associating the @yfiles scope with it.
  • The lookup API has been restructured. In particular, the LookupDecorator class is now easier to use, but most use cases are covered without having to access the low-level lookup architecture.
  • The library now prevents problems with strict CSP settings, as we now set CSS styles with the HTMLElement.style property instead of the style attribute.

Graph

New Features and Improvements

Bug Fixes

Components

New Features and Improvements

  • ViewportLimiter now also works with isometric projections and offers options to use the CanvasComponent.contentBounds for the limiting. It now offers the possibility to specify margins in the view coordinate system around the specified bounds, and bounds can be given as a list of convex polygon points. CanvasComponent now also notifies the viewport limiter when the size of the contentBounds or the size of the CanvasComponent changes.
  • Added a pointer-cancel event to the CanvasComponent.
  • The SvgExport.exportSvgAsync method now supports an optional render completion callback that can be used to await asynchronous rendering.
  • Theming is now specified with CSS variables, such that the look and feel of a GraphComponent can now be customized with a few lines of CSS.
    • The available values for the --yfiles-theme-variant variable are round and square with solid strokes, and the new square-round and square-hatched with a hatched stroke.
    • It's now possible to specify an offset for resize handles and the selection indicator rectangle via theming. Setting an offset can prevent such handles from overlapping ports.
    • Consequently, the Theme class has been removed.
  • The scrollbars of a CanvasComponent are now easier to style since we improved their CSS rules. For example, the scrollbar size is now determined by the CSS variables --yfiles-scrollbar-size, --yfiles-scrollbar-horizontal-size, and --yfiles-scrollbar-vertical-size.
  • GraphComponent now uses GraphViewerInputMode as the default inputMode for basic graph exploration.
  • The ICanvasContext.canvasComponent property (and consequently IRenderContext and IInputModeContext) is now guaranteed to have a non-null value.
  • All predefined EventRecognizer constants can now be found in the same class, EventRecognizers, which improves discoverability. In addition, their names now follow the platform conventions, i.e. they are formulated in the present tense and use the same wording as corresponding input events.
    Similarly, the events on CanvasComponent which are related to input devices now have the same consistent names.
  • The CanvasComponent.contentRect property is now named contentBounds to make its purpose clearer. The updateContentRect method has been renamed likewise.
  • The superfluous CanvasComponent.setContentRect method has been removed in favor of the setter of the contentBounds property.
  • It is now possible to have more than one BridgeManager. This allows you to have different types of bridges on different types of edges.
  • The DOM focus state of the CanvasComponent moved from the container element to an inner child of the CanvasComponent. This makes it easier to listen to DOM events in HTML elements that are part of the render tree, e.g. in an HtmlVisual or an overlay panel.
  • CanvasComponent constructor now accepts HTMLElement as hosting element instead of HTMLDivElement. This allows initialization of the CanvasComponent in semantic elements and custom elements.
  • The CanvasComponent.focus method now has an optional parameter that takes an options object with a preventScroll property, similar to the HTMLElement.focus method. This replaces the CanvasComponent.preventFocusScrolling property.

Bug Fixes

  • Fixed an issue where a sequential animation would break when the preferred duration was set to zero.

New Demos

  • New Viewport Limiter demo shows the improved behavior of the ViewportLimiter class.
  • The new timeline demo shows how to implement a timeline component for graphs that change over time.

Rendering

New Features and Improvements

Selection, Focus, Highlight

New Features and Improvements

Styles

New Features and Improvements

Bug Fixes

New Demos

  • The new Shape Port Style demo shows this new style.
  • The new Arrow demo shows the new visualization options for arrows.
  • The new General Path Node Style demo shows how to create stars, polygons, and other shapes with this style.

WebGL

New Features and Improvements

Bug Fixes

  • Fixed an issue where instantiating animations via WebGLGraphModelManager.createBeaconAnimation (and all other animation creating functions) would throw an exception when the timing parameter was not provided.
  • WebGLLabelStyle now avoids unnecessary text wrapping for labels with large padding when there is sufficient space to place the text.
  • Bend handles are now always displayed correctly when rendering with WebGL.
  • Ports are now correctly positioned when they lie slightly outside the node.

Interaction

New Features and Improvements

  • Marquee and lasso selection have been enhanced to support multiple selection policies. While the default gestures replaces the selection, pressing the Ctrl , Shift , or Alt modifier during the gestures extends, subtracts or toggles the current selection with the elements in the marquee or lasse area.
  • The IHitTester interface has been changed to support faster hit testing. The generic type has been removed. Instead, a GraphItemTypes parameter has been added that is used to reduce hit tests to the specified item types.
  • The new pointer-long-press event is available for all pointer input types and replaces the previous touch-specific long press API.
  • The new pointer-long-rest event is raised when the pointer stays still for a configurable amount of time during a move or drag gesture.
  • All events of an IInputMode which report creation of, changes to, or deletion of model items now have arguments of type InputModeItemEventArgs or InputModeItemChangedEventArgs. This type provides the affected item and the IInputModeContext for the involved input mode.
  • The keys to modify the gestures of various input modes have been adjusted to better match those of other often used applications:
    • To temporarily disable snapping during edge creation, moving, or resizing items, the Alt key can now be pressed instead of the Ctrl key.
    • When resizing a node using its reshape handles, the Ctrl key instead of the Alt key can be pressed to keep the center of the reshaped node.
    • To reparent a node to another parent during a drag gesture, the Ctrl key has to be pressed instead of the Shift key.
  • Moving items interactively now supports constraining the move gesture to an octilinear direction. This constraint is used when pressing the Shift key while dragging the items.
  • The new GraphEditorInputMode.creationSelectableItems property allows you to specify GraphItemTypes which should be selected after creation.
  • The new CreateEdgeInputMode.edge-direction-reversed event and the new CreateEdgeInputMode.onEdgeDirectionReversed method are triggered when the direction of the edge creation changed during edge creation.
  • The new HandleType.VOID enum value makes a handle invisible and excludes it from hit testing.
  • Reconnecting edges to other nodes is now allowed per default.
  • Elements can now be moved without selecting them first.
  • The new CreateEdgeInputMode.minimumSelfLoopBendCount property allows for specifying the number of bends an edge must at least have before it can be created as selfloop.
  • The new CreateEdgeInputMode.showStartPortCandidateDelay property allows for specifying a delay after which start port candidates are displayed when the user hovers over a start port candidate owner.
  • The new GraphEditorInputMode.movableUnselectedItems property allows for defining items which can be moved without selecting them first. The movableUnselectedItemsPredicate property can be used for closer specification.
  • Edge creation now supports constraining the current edge segment to use an octilinear direction. This constraint is used when pressing the Shift key while dragging the pointer.
  • The new GraphEditorInputMode.setNodeLocation method uses the IPositionHandler of a node to change its location, and this way also adjusts the attached orthogonal edges and the position of child nodes if the given node is a group node.
  • The CanvasComponent's event system is now based on the PointerEvent API instead of mouse and touch events. This enables to support stylus devices and allows for handling different input devices in a more uniform way.
  • The MoveInputMode class now also handles moving labels, thus the MoveLabelInputMode has been removed.
  • The event items-copied on GraphViewerInputMode and the events items-copied, items-cut, items-pasted, items-duplicated, and deleted-selection on GraphEditorInputMode now use ItemsEventArgs providing the items that are the subjects of the events.
  • When editing label text, users can now enter newlines with Shift+Enter in addition to Ctrl+Enter / Command+Enter.
  • The CanvasComponent now listens to native PointerEvents to handle mouse, touch, and stylus input.
  • The new ctrlKey, shiftKey, altKey, and metaKey boolean properties of PointerEventArgs and ClickEventArgs specify which modify keys were pressed during the event.
  • The order of the two parameters of the EventRecognizer function has been reversed: The event is now the first one, and the rarely used sender the last one.
  • A fully customizable context menu is now included. You have complete control over the menu elements and can customize all UI elements to your liking. Of course, it's also still possible to use the context menu of your favorite UI framework. In addition, the API of the ContextMenuInputMode has been improved and its event handling was simplified.
  • The rendering order of visuals created by an inputMode now corresponds to the input mode's priority. In other words, visualizations of input modes with a smaller priority value (= higher priority) are drawn on top.
  • The GraphInputMode.findItems method now considers the actual z-order of the hit items.
  • The GraphInputMode.item-clicked event and the cyclic selection now consider the actual z-order of the hit items at the cursor location. Bends and invisible ports are now properly taken into account and hit before their owners.
  • MoveViewportInputMode now gracefully handles concurrent programmatic viewport modifications.
  • The modifier for using the ILabelModelParameterFinder during label movement can now be changed with the LabelPositionHandler.useParameterFinderRecognizer property.
  • The ClickInputMode.clicked event is now raised also for double-clicks and multi-clicks. Clicking multiple times in the same location increments the ClickEventArgs.clickCount by one for each click.
  • The MoveInputMode and moveUnselectedInputMode properties of GraphEditorInputMode have been renamed to moveSelectedItemsInputMode and moveUnselectedItemsInputMode to better describe what they are used for. Associated properties and methods have been renamed accordingly.
  • Starting edge-creation from a child node inside a group node now does not immediately snap to the parent when moving over the group nodes content. Instead, it only snaps to the closest port when hovering the tab or stroke.
  • Toggling the item selection via Ctrl+Space now prefers toggling the selection state of GraphComponent.currentItem over deselecting a single selected item.
  • The IInputMode API has been updated for clarity: the inputMode property has been removed from the interface. Instead, most implementations now offer the protected parentInputModeContext property to clearly indicate its role as the input mode's parent context. Most input modes can create a context which can be passed to dependents via the protected createInputModeContext method. The created context has the input mode set as the parent input mode. The new InputModeContext class may be used by implementations to conveniently create new contexts.
  • When using the GraphViewerInputMode, the viewport can now be moved by either dragging with the left or middle mouse button.
  • When using the GraphEditorInputMode, the viewport can now be moved by either dragging with the middle mouse button or by dragging with the left mouse button when pressing the Ctrl or Space key.
  • The new Command.ZOOM_TO_SELECTION zooms to the bounding box around all selected items. It can be triggered by the keyboard short cut Alt+2.
  • Edge creation can now be cancelled by ending the gesture over the source node.
  • Edge creation is canceled if the GraphComponent loses the focus.
  • GraphViewerInputMode's and GraphEditorInputMode's clickHitTestOrder now reflects the z-Order of the elements. By enabling skipHitLabels (the default) elements behind labels can still be prioritized over the labels.
  • Several default keyboard shortcuts have been adjusted to more widely used ones:
    • Ctrl+0 or Alt+0 sets the zoom to 100%.
    • Alt+1 fits the content in the view.
    • Alt+2 brings the selection into the view.
    • Alt+3 brings the current item into the view.
    • Ctrl+Plus increases the zoom value.
    • Ctrl+Minus decreases the zoom value.
    • Alt+Left collapses a selected group node.
    • Alt+Right expands a selected folder node.
    • Alt+Up exits the current folder node.
    • Alt+Down enters the current folder node.
    • Alt+Shift+Left or Alt+Shift+Right toggles the expansion state of a selected group or folder node.
  • GraphEditorInputMode now allows for starting label editing just by starting to type. The allowEditLabelOnTyping property can be used to configure this setting, which is turned on, by default.
  • The default gesture for label editing has been updated to also trigger when the user hits the `Enter` key.
  • The HandleTypes enums has been refactored to a non-flaggable HandleType enum, and the values have been adjusted to those used in the library as well as some custom variants for individual use.
  • Custom IHandle implementations can use the new IHandle.tag property for various purposes, including custom handle visualizations. yFiles does not use the property and initializes it with null, but decorating handles forwards any values unmodified.
  • OverviewInputMode now uses the CanvasComponent's mouseWheelZoomEventRecognizer to determine if the used performed a zoom gesture.
  • Dragging a selected edge doesn't move all its bends anymore which often screwed up the first and last edge segment.
  • If a Wheel event is handled by code, the default behavior (zoom/scroll) will be cancelled.
  • Command handling has been improved: The previous ICommand, inspired by WPF's commands, has been replaced with an enumeration of primary input gestures called Command. GraphComponent now manages the execution of commands:
  • The MouseHoverInputMode has been renamed to ToolTipInputMode to better reflect its function.
  • The handleIsHit and getClosestHitHandle methods of HandleInputMode now have an additional parameter which specifies the PointerType of the related user gesture.
  • The GraphEditorInputMode.orthogonalEdgeEditingContext property is now set and enabled per default and may not be null anymore. Edges can be individually configured to be edited orthogonally by providing an apropriate IOrthogonalEdgeHelper in their lookup.
  • NavigationInputMode now interprets the direction of arrow keys in view coordinates by default. Previously the default settings could lead to surprising behavior when combined with a projection on GraphComponent.
  • Improved keyboard navigation for graph items.
  • The protected Should- methods of the input modes have been removed and replaced by predicate properties. This simplifies adjusting the behavior without the need to subclass the input modes.
  • LabelDropInputMode now consults the IEditLabelHelper of possible drop targets when dragging and dropping labels.
  • New overloads of the CreateEdgeInputMode.startEdgeCreation method can be used to start interactive edge creation from a node or port, respectively.
  • The parent node detection of GraphClipboard has been streamlined.
  • The new GraphViewerInputMode.hitTester property works in the same way as the GraphEditorInputMode.hitTester property.
  • The GraphEditorInputMode.duplicateSelection method now also dispatches multi-selection-started and multi-selection-finished events.
  • The items reported by the HandleInputMode.affectedItems property now include edges that were modified with the height handle of BezierEdgeStyle and ArcEdgeStyle.
  • The static member GraphClipboard.DEFAULT_GRAPH_CLIPBOARD has been added and is used per default as GraphComponent.clipboard. This way copy&paste operations work between multiple GraphComponent instances without the need to set a shared GraphClipboard instance first.
  • The sub-input modes of GraphViewerInputMode and GraphEditorInputMode can now be replaced while the input mode is installed.
  • It is now possible to declare different sets of keyboard shortcuts as well as localizations for string constants depending on the language the user has enabled in their user agent.
  • The Cursor constructor now allows the specification of the hot-spot.
  • Cursors for resize handles now show double-headed arrows on all devices.
  • NodeDropInputMode, LabelDropInputMode, StripeDropInputMode, and PortDropInputMode now provide a static DEFAULT_TRANSFER_TYPE property which represents the transfer type to which the respective input mode is configured by default.
  • Setting the tooltip content or custom components as tooltips has been streamlined.

Bug Fixes

  • GraphInputMode.findItems method: when the filter includes both edges and bends, the edge will no longer be ignored if any of its bends are hit.
  • GraphInputMode.findItems method: when using GraphItemTypes.ALL, bends will not be ignored. Furthermore, the interfaces IBendSelectionTester and IPortSelectionTester are properly queried.
  • GraphInputMode.findItems method: Ports with a style are no longer reported twice.
  • When moving the viewport in a GraphComponent that has a projection, the inertia now works in the right direction.
  • Fixed that the onMarqueeSelect and onLassoSelect methods of GraphEditorInputMode and GraphViewerInputMode were called with a wrong input mode context.
  • Fixed occasionally missing auto-scrolling on viewport bounds for touch devices.
  • The GraphInputMode.findItems overload without the context parameter did not find items correctly.
  • Fixed an issue where keyboard navigation would stop working when two items were positioned at the same location.
  • Offset rectangle handles were hard to hit with a custom theme scale and now properly consider theme scaling and custom offsets.
  • Fixed label edit boxes having no width/height if editing started outside of the viewport.

New Demos

  • the new Mouse Wheel Customization demo shows how to customize and enhance the default mouse wheel behavior.

Label Editing

New Features and Improvements

  • The API related to label editing has been enhanced by introducing a new EditLabelInputMode, which is now a subordinate mode of GraphEditorInputMode. The new input mode consolidates the methods, properties, and events necessary for customizing label editing. The key methods, AddLabel and EditLabel, remain accessible through GraphEditorInputMode.
  • The text editor will now stay open by default if label text validation fails.
  • Each ILabel and ILabelOwner now includes a default implementation of IEditLabelHelper in its Lookup. The IEditLabelHelper interface has been updated to offer greater control over the label editing process.
  • The API related to label editing has been removed from TableEditorInputMode, except for the key methods AddLabel and EditLabel. Label editing is now handled through GraphEditorInputMode's EditLabelInputMode.
  • The label text editor element now takes the on-screen keyboard into account when it scrolls into the visible part of the view, so that it is actually always visible.

Snapping

New Features and Improvements

Clipboard

New Features and Improvements

Folding

New Features and Improvements

  • The process of configuring edges at folder nodes has been simplified, resulting in a significant reduction in the number of configuration calls for merged edges.
  • The default implementation for folder nodes and folding edge converters has been enhanced, providing more powerful capabilities for synchronizing and initializing various aspects with granularity.
  • Collapsed group nodes (folder nodes) can now have different tags from their expanded form (group nodes).
  • Changes made to view states (folder nodes, folding edges) can now be reflected back to the master items. New methods, updateGroupNodeState and updateMasterEdges, have been added to IFolderNodeConverter and IFoldingEdgeConverter, respectively, for handling these updates.

Bug Fixes

  • Setting the source or target port of an edge to a port at another edge does no longer lead to an exception if the edge is represented in a managed view (IFoldingView). Instead, the edge is now removed from the view.
  • Fixed a bug which could cause an edge in a folding view to be created at different ports as those which were given as parameters. This could lead to unexpected connections during interactive edge creation in rare cases.
  • Fixed a bug that could lead to an exception when duplicating a port on the GraphClipboard if it is duplicated.
  • Fixed a bug which caused changing the ports on an edge whose source or target node is collapsed being reverted after subsequent collapsing and expanding.
  • Label changes on folder nodes are no longer reverted by FolderNodeConverter if labels are copied between master and view node.

View-Layout-Bridge

New Features and Improvements

Bug Fixes

  • Exceptions thrown by IGraph.applyLayout are now properly re-thrown (instead of causing an unhandled promise rejection) and can be caught by a catch block.

Layout

New Features and Improvements

  • LayoutPortCandidates now have a matchingId. When finding matching LayoutPortCandidates at nodes and for edges, two LayoutPortCandidates can only match if their matchingId properties are equal.
  • The LayoutAnchoringStage class (previously called FixNodeLayoutStage) now allows using not only nodes but also edges and labels to anchor the graph's position.
  • The ComponentLayout has now the ability to specify which layout to apply to individual components using ComponentLayoutData.componentLayouts property. Additionally, edges between components can be routed using a router set via ComponentLayout.interEdgeRouter.
  • It is now possible to specify multiple layout grids for a graph (previously called PartitionGrid). This is made possible by the new LayoutGridCellDescriptor.layoutGrid property. This way it is no more required to set the global layout grid with the LayoutGridData.grid property. If a node is to be placed in a grid but not in a specific cell, this can now be achieved using the new LayoutGrid.createDynamicCellDescriptor method. Be aware that many layout algorithms like HierarchicalLayout don't support multiple layout grids.
  • The LayoutData classes are now generic and can be used for items of a LayoutGraph, too. Of course, it's still possible to use LayoutData with IGraph items.
  • The API around the LayoutGraph class has received a major rework. The LayoutGraph is the only remaining graph implementation for the layout analysis part. Classes Graph (previously used for graph analysis, only) and CopiedLayoutGraph have been removed and functionality was moved to LayoutGraph.
    • The API has been made more similar to the API of the IGraph with respect to creation, modification and access to nodes, edges and labels.
    • Low-level data types like NodeList and EdgeList have been removed as well as cursor for iteration over the elements.
    • Properties nodeCount and edgeCount have been removed. Query the size of the nodes and edges properties instead.
    • Layout information about items must no longer be queried from the graph instance (e.g. previously with methods like LayoutGraph.getLayout). It is now accessible on the items itself and is also mutable, see LayoutNode.layout property.
    • The edge path information is no defined by properties on the edge, most importantly these are sourcePortLocation, targetPortLocation and bends.
    • Labels of nodes and edges are now accessed via a property on the respective owning item. To add labels, use LayoutGraph.addLabel method. The complicated ILabelLayoutFactory that covered that use case in the past has been removed.
    • Hiding items is no longer possible via the graph itself. To do so, use the helper LayoutGraphHider class.
    • The Graph.containsEdge method has been removed in favor of LayoutGraph.getEdgesBetween. The same holds for the Node.getEdgeTo and Node.getEdgeFrom methods.
    • Convenience properties like Node.neighbors have been removed. Instead, query all edges (using the Edges property) and filter the required adjacent nodes manually.
    • To copy a LayoutGraph instance, the new LayoutGraph.createCopy method has been added.
    • If a LayoutGraph without coordinate/path information is needed (to optimize memory performance), it can be created using the factory LayoutGraph.createStructureGraph method.
  • The new LayoutGraph.getEdgesBetween method returns all edges between two nodes.
  • The PortPlacementStage now computes cost-minimal matchings between port candidates at nodes and edges.
  • Most layouts now support port grouping and port candidates at nodes and edges. These features are implemented through a post-processing step using the PortPlacementStage, rather than being natively integrated into the layouts. As a result, the quality may be poor.

Bug Fixes

  • The PortPlacementStage now correctly considers port candidates together with port groups.

Hierarchical Layout

New Features and Improvements

  • The HierarchicalLayout class now supports defining minimum distances between the ports. They can be specified per node side using the HierarchicalLayoutNodeDescriptor.minimumPortDistance property. The node size is increased if necessary in order to accommodate the minimum distances.
  • The Hierarchical Layout class now supports aligning the ports of edges incident to the same node, that is, the ports are placed at the same x- or y-coordinate. This can be particularly useful to visualize paths in a graph. Which ports to align is specified by the new properties PortData.sourcePortAlignmentIds and PortData.targetPortAlignmentIds accessible via HierarchicalLayoutData.ports.
  • The HierarchicalLayout now produces fewer bends for multi-edges with labels when integrated edge labeling is enabled.
  • The HierarchicalLayout class now produces better results for graphs with tabular groups where all children have a fixed user-specified order.
  • The routes of self-loops now consider both node and edge labels preventing overlaps if possible.
  • The ports of edges with free ports are no longer placed at the same location as fixed ports, which previously could happen if multiple edges had the same fixed port.
  • The HierarchicalLayout no longer produces overlapping edge segments if there are grouped edges with different thicknesses values. Previously, the user had to ensure that all these edges use the same thickness.
  • In barycenter mode the HierarchicalLayout now enforces a more symmetric placement of the nodes that are part of chains or height-2 trees.

Bug Fixes

  • The HierarchicalLayout now properly handles self-loop edges when the edge is at a group node and furthermore edge/port grouped with the same ID on both sides. Previously, it was not routed correctly or that it was removed from the LayoutGraph instance when running the layout algorithm directly on the graph instance without using a copy.
  • The HierarchicalLayout class no longer swaps the position of fixed nodes in incremental layout mode with user-specified sequence constraints.
  • The HierarchicalLayout class no longer produces superfluous crossings for some graphs with group nodes in incremental layout mode.
  • Edges between two subcomponents now correctly consider fixed any-side port candidates.
  • The HierarchicalLayout class no longer produces very long edge segments for some input graphs containing groups with node halos and polyline edge routing.
  • The HierarchicalLayout class no longer throws an exception for graphs with bus structures if the algorithm runs in incremental mode and the group transposition feature is enabled.
  • The HierarchicalLayout class no longer produces intertwined edge routes with many superfluous crossings and bends for some cases with sequence constraints PlaceAtHead or PlaceAtTail. The problem mainly occurred with graphs with groups or PartitionGrid and incompatible sequence constraints.

New Demos

Tree Layout

New Features and Improvements

Bug Fixes

Orthogonal Layout

New Features and Improvements

Edge Router

New Features and Improvements

  • The quality of edge routing for buses is improved.
  • If EdgeRouter is run with the buses feature and a limited duration, it now splits the available time amongst buses, meaning that it will not get "stuck" on a single bus, which could otherwise impact the quality of the remaining buses and non-bus edge routings.

Bug Fixes

  • The EdgeRouter class no longer produces uncovered buses. Previously, there were some rare cases where the specified bus edges didn't constitute a bus.
  • When routing edges to and from fixed ports in the interior of group nodes, other nodes in the group are not ignored anymore, so that the edge does not overlap them if possible.

Organic Layout

New Features and Improvements

  • The performance for the OrganicLayout has been substantially improved for large graphs without group nodes. The improvement is triggered if no special constraints are defined and no shape recognition is enabled.
  • The OrganicLayout now supports different styles for group substructures, which are set via the GroupSubstructureStyle property.

Bug Fixes

  • Fixed an issue that may have automatically disabled the component layout when using constraint-based features.

Interactive Organic Layout

Demo Improvements

Radial Tree Layout

New Features and Improvements

Partial Layout

New Features and Improvements

  • PartialLayout now supports specifying inversely directed edges in addition to undirected and directed edges.

Component Layout

New Features and Improvements

Algorithms

New Features and Improvements

Analysis

New Features and Improvements

  • The KShortestPaths class has a new implementation of the k-shortest path algorithm that allows for the exclusion of non-simple paths (i.e., paths with repeating vertices). Previously, these paths could not be excluded. The new implementation is used by default and can be disabled with the simplePaths parameter.
  • For usage with a LayoutGraph, the algorithm is also available via the LayoutGraphAlgorithms.kShortestPaths method.

Collections

New Features and Improvements

  • The IEnumerable.ofType method now supports primitive types as element types.
  • The IEnumerable.filter method now has two new overloads with type guards.

Geometry

New Features and Improvements

Incompatible Changes

Categories: General Graph Components Rendering Selection, Focus, Highlight Styles WebGL Interaction Snapping Clipboard Folding Lookup GraphML View-Layout-Bridge Layout Layout Data Hierarchical Layout Tree Layout Orthogonal Layout Edge Router Labeling Organic Layout Interactive Organic Layout Circular Layout Radial Layout Radial Tree Layout Radial Group Layout Series-parallel Layout Compact Disk Layout Multi-page Layout Partial Layout Tabular Layout Component Layout Tree Map Layout Recursive Group Layout Layout Grid Other Layouts Algorithms Analysis Collections Geometry

General

Incompatible API Changes

  • The following classes are now sealed: BorderLineSegment, LayoutGridCellDescriptor, LabelScopeData, ItemCollection, ItemMapping, FreePortLabelModel, and FreeNodeLabelModel. They either already had an internal constructor or do not offer any meaningful members for overriding.
  • Removed the Default prefix from the names of the following types: DefaultEdgePathCropper, DefaultFoldingEdgeConverter, DefaultFolderNodeConverter, DefaultLabelStyle, ObservableCollection, DefaultPortCandidate, and DefaultSelectionModel.
  • Removed DefaultLabelModelParameterFinder.
  • Removed DefaultBendCreator.
  • Removed the Default prefix from the names of the following types: Graph, WebGL2DefaultLabelStyle.
  • Consistently use names Padding and Margins in member names:
    • Renamed the TextEditorInputMode.textBoxPadding property to textBoxMargins.
    • Renamed the IndicatorLabelStyleDecorator.padding property to margins.
    • Renamed the IndicatorNodeStyleDecorator.padding property to margins.
    • Renamed the GraphEditorInputMode.contentRectMargins property to contentMargins.
    • Renamed the OverviewInputMode.margins property to contentMargins.
    • Renamed the ViewportAnimation.targetBounds property to target.
    • Renamed the ViewportAnimation.targetViewMargins property to targetMargins.
    • Renamed the StripeControl.Insets property to TotalPadding.
    • Renamed the StripeLabelModel.useActualInsets property to useTotalPadding.
    • Renamed the StretchStripeLabelModel.useActualInsets property to useTotalPadding.
    • Renamed the IStripe.actualInsets method to totalPadding.
    • Renamed the GroupNodeStyle.contentAreaInsets property to contentAreaPadding.
    • Renamed Insets properties of all ILabelModel implementations to margins.
    • Replace name part Insets of other types and members with {}Padding{}.
  • Removed the BridgeManager.clipMargin property.
  • Enum values that followed the NORTH, EAST, SOUTH, WEST naming convention have been renamed to follow a Top, Right, Bottom, Left naming convention. In particular, the values of the following enums have been renamed: HandlePositions, EdgeSegmentDirection, ExteriorLabelModelPosition, InteriorLabelModelPosition, InteriorStretchLabelModelPosition, StretchStripeLabelModelPosition, and StripeLabelModelPosition,.
  • Renamed the CompositePortLocationModelPortSide enum to PortSides.
  • The yFiles npm package is now named @yfiles/yfiles. This makes it easier to serve yFiles from a local registry by associating the @yfiles scope with it.
  • The Enum static helper methods have been removed. Instead, each yFiles enum has a new getName(value): string method that can be used to retrieve the name of an enum value.
  • Removed obsolete browser-specific workarounds:
    • Cr320635, Cr433873, Cr701075.
    • Edge2057021.
    • Ie14492280, Ie205775, Ie233711, Ie2337112, Ie7766782, Ie964525.
    • Wk203237.
  • Renamed all members containing Comparison or Comparer to Comparator.
  • The static isInstance method of each type was removed. Use instanceof instead. This change can be done by the migration tool.
  • The library now only comes in a variant that uses JS modules, and the UMD variant has been removed. Nowadays, almost all tools work with JS modules, and you can use a bundler like Rollup if you need the library in a different format.
  • The TypeScript types for very old versions of TypeScript have been removed. The oldest supported TypeScript version is now 5.0.
  • APIs that used Class<T> now use the T type directly instead. This usually means that instead of SomeClass.$class, you can now use SomeClass instead.
  • Renamed the CreateEdgeInputMode.allowSelfloops property to allowSelfLoops.
  • Renamed the GraphEditorInputMode.selectNodeAndSelfloopBends method to selectNodeAndSelfLoopBends.
  • Renamed the GraphEditorInputMode.autoSelectSelfloopBends property to autoSelectSelfLoopBends.
  • Renamed the IEdge.isSelfloop method to IEdge.isSelfLoop.

Graph

Incompatible API Changes

  • The ILookup interface and its extension methods have been moved to the yWorks.Utils namespace.
  • The IMapper interface, the Mappers, Mapper, and WeakDictionaryMapper classes have been moved to the yWorks.Utils namespace.
  • The SegmentRatioPortLocationModel class is now named EdgeSegmentPortLocationModel, similar to EdgeSegmentLabelModel.
  • The createFromSource and createFromTarget methods of the SegmentRatioPortLocationModel and BendAnchoredPortLocationModel are now named createParameterFromSource and createParameterFromTarget.
  • Removed the TableAnimation class. Use the factory IAnimation.createTableAnimation method as a replacement.
  • GenericPortLocationModel has been renamed to CompositePortLocationModel and doesn't implement IEnumerable anymore. Instead, the parameters property can be used to iterate the parameter.
  • The FreeEdgeLabelModel.createEdgeAnchored method has been renamed to CreateParameter.
  • The FreeNodeLabelModel.createDefaultParameter method has been removed and replaced by the new FreeNodeLabelModel.CENTER field.
  • The FreeNodeLabelModel.createCanonicalParameter method has been renamed to CreateParameter.
  • The FreePortLabelModel.createDefaultParameter method has been removed and replaced by the new FreePortLabelModel.CENTER field.
  • The label models ExteriorLabelModel, InteriorLabelModel, and InteriorStretchLabelModel have been renamed to ExteriorNodeLabelModel, InteriorNodeLabelModel, and StretchNodeLabelModel, respectively,.
  • The GenericLabelModel class has been removed. Its functionality has been integrated into the CompositeLabelModel, which can be used instead.
  • The CompositeLabelModel.labelModels property has been removed. Instead of adding label models to this list, the new addModel method has to be called.
  • The static deserializeParameter and serializeParameter methods of the ILabelModelParameter and IPortLocationModelParameter classes have been removed. These methods could be used to retrieve the properties of label model parameters and port location model parameters and are not necessary anymore as the parameter classes are now public.
  • The ILabelModel parameter of the ILabelModelParameterFinder.findBestParameter and ILabelModelParameterProvider.getParameters methods has been removed.
  • The classes DelegateUndoUnit and CompositeUndoUnit have been removed. The new factory methods IUndoUnit.fromHandler and IUndoUnit.combine can be used instead.
  • The UndoUnitBase class has been removed. Subclasses now have to implement the IUndoUnit interface instead.
  • The owner parameter of the ITable.createRow, CreateColumn, and setParent methods has been renamed to parent.
  • Changes to the GraphCopier class:
  • The ILabelModel.createDefaultParameter method has been removed. Instead suitable other Create*Parameter methods of the concrete label model implementations should be used.
  • The IPortLocationModelParameter.supports method has been removed. Instead, the IPortLocationModel.getLocation method may now throw an exception if the port and port location model parameter don't match.
  • The structural properties of graph items (IEdge.sourcePort, IEdge.targetPort, ILabel.owner, IPort.owner, IBend.owner) now throw exceptions if accessed for items that are no longer in the graph. If it is unknown whether the item is still in the graph, please test the item with hasOwner or hasSourceAndTargetPort first before accessing these properties.
  • IEdge's sourceNode and targetNode methods now throw exceptions if called for an edge that is no longer in the graph or if the owner of the edge's source or target port is not a node.
  • The ILabelModelParameter.supports method has been removed. Instead, the ILabelModel.getGeometry method may now throw an exception if the label and label model parameter don't match.
  • The GraphItemTypes.enumerableNotContainsTypes method was removed, use the includes method instead.
  • Method GroupingSupport.getPathToRoot has been renamed to getAncestors and returns an IReadOnlyList instead of an IList.
  • The static parameter fields of FreeNodePortLocationModel have been renamed analogue to the static parameter fields in InteriorNodeLabelModel.
  • The GraphClipboard.isDummy method has been renamed to isHelper.
  • The UndoEngine.token property replaces the UndoEngine.getToken method.
  • The IMapperRegistry interface, the MapperRegistry class, and the IGraph.mapperRegistry property have been removed. To store additional information for graph items, either use the item's Tag property or keep a dictionary alongside the graph.
    To configure layout settings for individual items, use LayoutData instead.

Incompatible Behavior Changes

Components

Incompatible API Changes

Incompatible Behavior Changes

Rendering

Incompatible API Changes

Selection, Focus, Highlight

Incompatible API Changes

Styles

Incompatible API Changes

  • Class TableNodeStyle no longer implements INotifyPropertyChanged.
  • The class Arrow is now immutable and comes with separate scale factors for arrow length and width. The default arrow was renamed to ArrowType.STEALTH, circle arrow to ArrowType.ELLIPSE, and simple arrow to ArrowType.OPEN. The short arrow type was removed.
  • The Wrapped property of CollapsibleNodeStyleDecorator, IndicatorNodeStyleDecorator, IndicatorEdgeStyleDecorator, IndicatorLabelStyleDecorator, IndicatorPortStyleDecorator, ShadowNodeStyleDecorator, and IconLabelStyle has been renamed to wrappedStyle.
  • Most item style implementations have become sealed, and their renderers have been removed from the API. Instead of subclassing the styles or their renderers, custom style implementations should use delegation instead. For this the new DelegatingNodeStyle and CompositeNodeStyle style variants may be used.
  • The item style constructors taking a custom renderer implementation have been removed. Instead, a custom style should be implemented that may delegate to one of the library styles.
  • The TableNodeStyle.copyBackgroundStyle method has been removed. The clone method doesn't deep copy the background style but just uses it for the clone as well, which also was the previous default behavior.
  • The deprecated styles BevelNodeStyle, PanelNodeStyle and ShinyPlateNodeStyle have been removed.
  • Renamed some values of TextWrappingShape and ShapeNodeShape:
  • Removed the following values from ShapeNodeShape: SHEARED_RECTANGLE, SHEARED_RECTANGLE2, Trapez, Trapez2, FAT_ARROW, and FAT_ARROW2.
    • Use the ArrowNodeStyle for more flexible visualizations of these geometries.
  • Renamed STAR5_UP to Star5, removed old (down pointing) Star5.
    • Use the factory methods on GeneralPathNodeStyle for stars and polygons with an arbitrary number of points/edges and configurable rotation angle.
  • Removed the following values from TextWrappingShape: SHEARED_RECTANGLE, SHEARED_RECTANGLE2, Trapez, and Trapez2.
  • The IArrow interface now requires the cropAtPort property to be provided by implementations. For backward compatibility return false in simple subclasses.
  • Removed TemplateNodeStyle, StringTemplateNodeStyle, TemplateLabelStyle, StringTemplateLabelStyle, TemplatePortStyle, StringTemplatePortStyle, TemplateStripeStyle and StringTemplateStripeStyle. Alternatively, use LitNodeStyle from the yFiles demos, or implement a custom style.
  • The SolidColorFill class has been removed because the Color class takes over its functions.
  • The MarkupLabelStyle no longer inherits from DefaultLabelStyle.
  • WebGLImageNodeStyle: renamed background visual properties: shape → backgroundShape, fill → backgroundFill, stroke → backgroundStroke.
  • Renamed textDecoration to TextDecorations to reflect its enum flags characteristic.
  • Removed TextDecoration.BLINK enum value.
  • Renamed WebGL2IconNodeStyle to WebGLImageNodeStyle.
  • The VoidNodeStyle, VoidEdgeStyle, VoidLabelStyle, VoidPortStyle, VoidStripeStyle classes, and the respective renderer classes were removed. Use one of the following constant singletons instead: INodeStyle.VOID_NODE_STYLE, IEdgeStyle.VOID_EDGE_STYLE, ILabelStyle.VOID_LABEL_STYLE, IPortStyle.VOID_PORT_STYLE, and IStripeStyle.VOID_STRIPE_STYLE.
  • The VoidShapeGeometry and VoidPathGeometry classes were removed. Use one of the following constant singletons instead: IShapeGeometry.VOID_SHAPE_GEOMETRY and IPathGeometry.VOID_PATH_GEOMETRY.
  • The ImageNodeStyle.image property has been renamed to `href`.
  • The ImageNodeStyle.fallbackImage property has been removed.
  • The ImageNodeStyleRenderer.TEMPLATE_KEY has been removed.
  • Removed fontWeight enum in favor of setting the font's weight as string.
  • The values of the TextWrapping enum have been renamed to distinguish those that wrap the lines from those that don't.
  • The DefaultLabelStyle.clipText and MarkupLabelStyle.clipText properties have been removed. In case a label text should be clipped but not wrapped, use the TextWrapping.CLIP policy.
  • Font's equals implementation now check for value equality instead of only looking for referential equality.

Incompatible Behavior Changes

WebGL

Incompatible API Changes

  • The type of the WebGLLabelStyle.padding and WebGLIconLabelStyle.padding properties is now Insets instead of a single number.
  • Made WebGLTextureRendering a non-flag enum.
  • The WebGL2ShapeNodeShape.HEXAGON2 property is now called HEXAGON_STANDING.
  • Style setters on the WebGL2GraphModelManager have been removed.
  • Replaced "WebGL2" prefix with "WebGL" for the following types: WebGL2Animation, WebGL2AnimationDirection, WebGL2AnimationEasing, WebGL2AnimationTiming, WebGL2ArcEdgeStyle, WebGL2ArrowType, WebGL2BeaconAnimationType, WebGL2BeaconNodeIndicatorStyle, WebGL2BridgeEdgeStyle, WebGL2DashStyle, WebGL2DefaultLabelStyle, WebGL2EdgeIndicatorStyle, WebGL2Effect, WebGL2FadeAnimationType, WebGL2FocusIndicatorManager, WebGL2GraphModelManager, WebGL2GraphModelManagerRenderMode, WebGL2GroupNodeStyle, WebGL2HighlightIndicatorManager, WebGL2IconLabelStyle, WebGL2IndicatorType, WebGL2LabelIndicatorShape, WebGL2LabelIndicatorStyle, WebGL2LabelShape, WebGL2LineCap, WebGL2NodeIndicatorShape, WebGL2NodeIndicatorStyle, WebGL2PolylineEdgeStyle, WebGL2PulseAnimationType, WebGL2ScaleAnimationType, WebGL2SelectionIndicatorManager, WebGL2ShakeAnimationType, WebGL2ShapeNodeShape, WebGL2ShapeNodeStyle, WebGL2Stroke, WebGL2TextureRendering, WebGL2Transition, WebGL2TransitionProperties, WebGL2Visual.
  • The RenderModes.WEB_GL enum value and the WebGLShapeNodeStyle, WebGLImageNodeStyle, WebGLPolylineEdgeStyle, WebGLTaperedEdgeStyle, and GraphOverviewWebGLVisualCreator classes have been removed.
  • The textAlignment property in WebGLLabelStyle was renamed to horizontalTextAlignment.
  • Class WebGLAnimation no longer implements IAnimation but is still accepted in IAnimation.createParallelAnimation and IAnimation.createSequentialAnimation through auto-conversion.

Interaction

Incompatible API Changes

Incompatible Behavior Changes

Snapping

Incompatible API Changes

  • LabelSnapContext has been removed, and label snapping is now handled by GraphSnapContext:
    • The GraphEditorInputMode.labelSnapContext property and the GraphEditorInputMode.onLabelSnapContextChanged method have been removed.
    • The CollectLabelSnapLineEventArgs class has been removed.
    • Configuration properties of LabelSnapContext have been moved to GraphSnapContext and renamed.
    • The ILabelSnapContextHelper interface and the LabelSnapContextHelper class have been removed. Instead, the ILabelSnapResultProvider interface and the classes LabelSnapResultProvider and LabelSnapReferenceProvider have been added.
    • The LabelDecorator.labelSnapContextHelperDecorator property has been replaced by the properties snapReferenceProvider and snapResultProvider.
  • CollectGraphSnapLinesEventArgs has been renamed to CollectSnapReferencesEventArgs. Its methods addFixedNodeSnapLine, addFixedSegmentSnapLine, addPortSnapLine, and addAdditionalSnapLine have been removed and replaced by the single addSnapReference method.
  • GraphSnapContext has been refactored, and the following members have changed:
    • The properties snapNodesToSnapLines, snapBendsToSnapLines, snapSegmentsToSnapLines, snapBendAdjacentSegments, snapPortAdjacentSegments, snapEdgeLabels, snapNodeLabels, and snapPortLabels have been replaced by the new properties SnappableItems and GridSnappableItems.
    • The collectVisibleNodePairs method now takes the CollectSnapReferencesEventArgs the snap references shall be added to.
    • The methods findSameWidthEntries and findSameHeightEntries have been removed. Instead, the SnapSize references describing to which size items can snap are provided by the snapReferences property. Similarly, the fixedNodeSnapLines, fixedSegmentSnapLines, fixedPortSnapLines, and additionalSnapLines properties have been removed. The snapReferences property should be used instead.
  • The SnapLine.ResourceKey property has been removed along with most of the static resourceKey members used for snapping. Instead, a visualizationType property of the enum type SnapReferenceVisualizationType is used to describe which visualization should be used for the SnapLine.
  • Most subclasses of SnapLine have been removed as they only provided properties used for the visualization that are now available on SnapResult.
  • The SnapTypes enum used by SnapResult has been replaced by the new SnapConstraint class that supports finding common snap locations for SnapResult with different constraints.
  • The snap and isSnapped methods of SnapResult have been removed. Instead, a constraint property of type SnapConstraint has been added that is used to merge possible SnapResult and check if a location is valid for a given SnapResult.
  • The SnapResult.getVisualCreator method has been removed and is replaced by the new objectRenderer property.
  • The factory methods of SnapResult have been adjusted:
  • The methods of the snap result providers have been adjusted to support the new SnapReference API. Most methods now take one instance of a SnapReference subclass like SnapLine or SnapGrid.
  • The classes SnapState, ArrowContainer, and ArrowControl have been removed.
  • The type of the SnapContext properties of all input modes has been changed from SnapContext to GraphSnapContext.
  • Most classes and members that had SnapLine in their name have been renamed to include SnapReference instead.
  • The ReshapeRectangleContext.initialBounds property has been renamed to initialLayout.
  • The GraphEditorInputMode.snapContext property is now set per default and may not be null. It is disabled per default.
  • Renamed the GraphSnapContext.nodeToNodeDistance property to nodeDistance.
  • Renamed the GraphSnapContext.edgeToEdgeDistance property to edgeDistance.

Clipboard

Incompatible API Changes

Folding

Incompatible API Changes

Incompatible Behavior Changes

  • Tags are not automatically the same on group and folder nodes or master and folding edges (master and view states). Instead, they have to be synchronized using the IFolderNodeConverter and IFoldingEdgeConverter implementations. The default implementations already synchronize the tags.
  • In the graph of a folding view, the createGroup method now always creates a group even if the isExpanded predicate specified in the FoldingManager.createFoldingView method specifies otherwise. Create the group on the master graph if you want the predicate to be respected.

Lookup

Incompatible API Changes

GraphML

Incompatible API Changes

  • The methods GraphMLIOHandler.addInputMapperFuture and GraphMLIOHandler.addInputHandlerFactory have been removed, together with their support classes.
  • Type and property annotations via the $meta attributes are not supported anymore. Instead, metadata has to be registered with GraphMLIOHandler.addTypeInformation.
  • The convenience GraphMLSupport class, the predefined ICommand.OPEN and ICommand.SAVE commands, and the StorageLocation enum have been removed. Use custom application code instead.
  • The addRegistryInputMapper and addRegistryOutputMapper methods have been removed from GraphMLIOHandler, since the MapperRegistry has been removed. To read or write additional per-item data, use the addInputMapper or addOutputMapper methods, instead.

View-Layout-Bridge

Incompatible API Changes

Incompatible Behavior Changes

  • Edges at the same port are now always automatically port grouped unless port groups have been defined explicitly.
  • The LayoutGraphAdapter class does no longer offer a method to create a layout graph several times but is now meant to create exactly one layout graph copy which can be accessed via the LayoutGraph property and initialized with method LayoutGraphAdapter.initialize. After initialization, changing properties of the LayoutGraphAdapter has no effect anymore.

Layout

Incompatible API Changes

Incompatible Behavior Changes

Layout Data

Incompatible API Changes

Hierarchical Layout

Incompatible API Changes

Incompatible Behavior Changes

Tree Layout

Incompatible API Changes

Incompatible Behavior Changes

  • The TreeLayout now considers node labels by default.
  • The TreeLayout now places edge labels by default using an integrated labeling algorithm.
  • Port candidates are always considered if they are specified.

Orthogonal Layout

Incompatible API Changes

Incompatible Behavior Changes

Edge Router

Incompatible API Changes

Incompatible Behavior Changes

Labeling

Incompatible API Changes

Organic Layout

Incompatible API Changes

Incompatible Behavior Changes

Interactive Organic Layout

Incompatible API Changes

Circular Layout

Incompatible API Changes

Incompatible Behavior Changes

Radial Layout

Incompatible API Changes

Incompatible Behavior Changes

Radial Tree Layout

Incompatible API Changes

Incompatible Behavior Changes

Radial Group Layout

Incompatible API Changes

Incompatible Behavior Changes

Series-parallel Layout

Incompatible API Changes

Incompatible Behavior Changes

Compact Disk Layout

Incompatible Behavior Changes

Multi-page Layout

Incompatible API Changes

Partial Layout

Incompatible API Changes

Incompatible Behavior Changes

Tabular Layout

Incompatible API Changes

Incompatible Behavior Changes

  • The TabularLayout now considers node labels by default.
  • The TabularLayout now places edge labels by default using a generic labeling algorithm.

Component Layout

Incompatible API Changes

Incompatible Behavior Changes

Tree Map Layout

Incompatible API Changes

Recursive Group Layout

Incompatible API Changes

Layout Grid

Incompatible API Changes

  • PartitionGrid is renamed to LayoutGrid. This also affects the related classes PartitionGridData, GenericPartitionGridStage, and GenericPartitionGridStageData.
  • Renamed ColumnDescriptor to LayoutGridColumn & RowDescriptor to LayoutGridRow.
  • Renamed PartitionCellId to LayoutGridCellDescriptor.
  • Renamed inset properties on classes LayoutGridColumn (formerly ColumnDescriptor) and LayoutGridRow (formerly RowDescriptor) to now be called padding (e.g., leftPadding instead of leftInset).
  • Removed helper class Swimlanes and SwimlaneRepresentative.
  • Removed the SwimlanesMode enum.
  • The methods PartitionGrid.prepareOrientationChange and PartitionGrid.finalizeOrientationChange have been removed.
  • Removed properties originalPosition and originalWidth from LayoutGridColumn class (formerly ColumnDescriptor). Use properties LayoutGridColumn.position (formerly computedPosition) or LayoutGridColumn.width (formerly computedWidth).
  • Removed properties originalPosition and originalHeight from LayoutGridRow class (formerly RowDescriptor). Use properties LayoutGridRow.position (formerly computedPosition) or LayoutGridRow.height (formerly computedHeight).
  • The SwimlaneDescriptor class has been removed from the API. Use LayoutGrid class (formerly called PartitionGrid) instead, which is able to model one-dimensional and two-dimensional grids.
  • The PartitionGridLayoutStage class has been removed. It is not necessary to manually add this stage, since HierarchicalLayout can support LayoutGrid out-of-the-box.
  • Renamed all types, methods and properties containing "CellId" to "CellDescriptor".
  • Removed properties optimizeRowOrder and optimizeColumnOrder from PartitionGridData class.
  • Removed the data key PartitionGrid.PARTITION_GRID_DP_KEY. The key LayoutGrid.LAYOUT_GRID_CELL_DESCRIPTOR_DATA_KEY is now the only data key which can be used to specify layout grids.
  • Removed data key RecursiveGroupLayout.GROUP_NODE_PARTITION_GRID_DP_KEY. The key LayoutGrid.LAYOUT_GRID_CELL_DESCRIPTOR_DATA_KEY is now the only data key which can be used to specify layout grids.

Other Layouts

Incompatible API Changes

Algorithms

Incompatible API Changes

Analysis

Incompatible API Changes

Collections

Incompatible API Changes

  • The YList.elementAt method was removed.
  • Renamed ItemMapping.delegate to mapperFunction.
  • Renamed ItemCollection.delegate to predicate.
  • Renamed IUndoUnit.createDelegateUnit to fromHandler.
  • Renamed IAnimation.fromDelegate to fromHandler.
  • Renamed IMapper.fromDelegate to fromHandler.
  • The elementAt method on the IEnumerable interface was removed. Use the at method, instead.
  • The skip method on the IEnumerable interface is now called drop and no longer has a thisArg parameter to match the counterpart in the ECMAScript Iterator Helpers stage 3 proposal.
  • The skipWhile method on the IEnumerable interface is now called dropWhile and no longer has a thisArg parameter.
  • The distinct, groupBy, and sum methods on the IEnumerable interface no longer have a thisArg parameter.
  • The list class constructor no longer has a thisArg parameter.
  • The first and last methods on the IEnumerable interface no longer accept a predicate function. Use find and findLast instead.
  • The predicate function of the find and findLast methods on the IEnumerable interface is no longer optional.
  • The parameter of the includes method on the IEnumerable interface is no longer nullable.
  • The orderBy method of the IEnumerable interface is now called toSorted. The keySelector parameter was removed to match the signature of Array.toSorted.
  • The orderByDescending method has been removed the IEnumerable interface.
  • The sort method has been removed from class YList.
  • The sort method with the IComparer parameter has been removed from class List<T>.
  • Renamed ICursor.prev to ICursor.previous.
  • Renamed ListCell.succ to ListCell.next.
  • Renamed ListCell.pred to ListCell.previous.
  • Removed the isEmpty method from YList class. Test YList.size property for 0 instead.
  • Removed the methods succCell and predCell from YList class. Use new properties ListCell.next and ListCell.previous instead.
  • Removed the methods cyclicSucc, cyclicPred, containsAll and retainAll from YList class.
  • Removed the methods Succ and Pred from ListCell class. Use new properties Next and Previous instead.
  • Removed the Peek method from YList class. Use First property instead.

Incompatible Behavior Changes

  • The first, last and findLast methods on the IEnumerable interface now return null instead of throwing when no element was found.
  • The at method on the IEnumerable interface now returns null instead of undefined when out of range.

Geometry

Incompatible API Changes

yFiles for HTML 2.6.0.5

This 5th bugfix release for yFiles for HTML 2.6 corrects some errors of the previous release, mainly in the layout part. There are no incompatible API changes.

Bug Fixes

Graph and Styles

  • When using the EdgeSegmentLabelModel and SmartEdgeLabelModel classes, label placement at source and target nodes is now correct when an index is specified that is less than zero or greater than the number of bends of the edge.
  • The EdgeSegmentLabelModel class now calculates valid label locations for selfloop paths with one port at the side of the node.
  • The intersection calculation for RectangleNodeStyle has been corrected for some previously failed instances that caused edges to end in midair or disappear.
  • Bend handles are now always displayed correctly when rendering with WebGL.
  • With folding, changes to ports of an edge whose source or target node is hidden are no longer reverted when the node is subsequently collapsing and expanding.

Interaction

View-Layout-Bridge

  • Exceptions thrown by the IGraph.applyLayout method are now properly re-thrown (instead of causing an unhandled promise rejection) and can be caught by a catch block.

Hierarchical Layout

  • The HierarchicLayout class no longer assigns superfluous space to group nodes if there are grouped edges.
  • The HierarchicLayout class no longer produces an error when using a non-zero grid distance in combination with incremental mode's exact coordinate hints.
  • The HierarchicLayout class no longer produces superfluous crossings between backloops or same-layer edges in the first or last layer.
  • The HierarchicLayout class no longer produces superfluous crossings for tabular group nodes with fixed children order.
  • The HierarchicLayout now properly handles self-loop edges when the edge is at a group node and furthermore edge/port grouped with the same ID on both sides. Previously, it was not routed correctly or that it was removed from the LayoutGraph instance when running the layout algorithm directly on the graph instance without using a copy.
  • The HierarchicLayout class no longer swaps the position of fixed nodes in incremental layout mode with user-specified sequence constraints.
  • The HierarchicLayout class no longer produces superfluous crossings for some graphs with group nodes in incremental layout mode.
  • The HierarchicLayout class no longer produces very long edge segments for some input graphs containing groups with node halos and polyline edge routing.
  • The HierarchicLayout class no longer throws an exception for graphs with bus structures if the algorithm runs in incremental mode and the group transposition feature is enabled.
  • The HierarchicLayout class no longer misplaces port labels at the connector nodes of integrated subcomponents.
  • The HierarchicLayout class no longer produces intertwined edge routes with many superfluous crossings and bends for some cases with sequence constraints placeAtHead or placeAtTail. The problem mainly occurred with graphs with groups or PartitionGrid and incompatible sequence constraints.

Edge Router

  • The EdgeRouter class no longer produces uncovered buses. Previously, there were some rare cases where the specified bus edges didn't constitute a bus.
  • When routing edges to and from fixed ports in the interior of group nodes, other nodes in the group are not ignored anymore, so that the edge does not overlap them if possible.

Other Layouts and Algorithms

yFiles for HTML 2.6.0.4

This 4th bugfix release for yFiles for HTML 2.6 corrects a small number of errors, and includes a new source code demo. There are no incompatible API changes.

Bugfixes

Graph, graph component, interaction

  • Calling the CanvasComponent.zoomTo method now properly repaints the component if the component's viewport has changed.
  • Grids rendered with HTML Canvas now respect the alpha value of the color of the GridVisualCreator.stroke property.
  • In WebGL2 rendering mode, edge segments are no longer missing in the visualization if a smoothing length is set and the path contains duplicate bends or collinear bends.
  • The GraphClipboard class now properly respects its ParentNodeDetection mode for sub-trees.
  • The GraphClipboard.parentNodeDetection property can now use Root as fallback if no valid parent is found for the SELECTION or PREVIOUS_PARENT modes.
  • The EdgeSegmentLabelModel class now calculates valid label locations for paths with duplicate bends, i.e., paths where two or more consecutive bends have the same location.
  • Exporting to SVG with the SvgExport class no longer throws an error if an invalid or unsupported CSS rule is encountered. This could have happened especially on iOS devices.
  • The SvgExport.collectDocumentStyles method now collects styles from both the DOM and the Shadow DOM.

Layout

  • The HierarchicLayout class no longer generates superfluous crossings for some edges with alternative paths that are incident to group nodes (see HierarchicLayoutData.alternativeEdgePaths).
  • The HierarchicLayout algorithm no longer requires a long runtime for some larger, grouped graphs with layering constraints and non-recursive layering.
  • The HierarchicLayout algorithm no longer requires a long runtime for some larger graphs with layering constraints when a maximum duration is specified.
  • The HierarchicLayout class no longer throws an exception for some invalid specifications of alternative group bounds in incremental layout mode.
  • The TreeReductionStage, CircularLayout, EdgeBundlingStage, and RadialLayout classes no longer produce results with many superfluous, collinear bends for bundled edges.
  • The CircularLayout class no longer produces strange routes for some bundled edges.
  • The GenericLabeling class no longer produces non-optimal label placements for some rare setups of graphs with node halos.
  • 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.
  • MultiPageLayout algorithm will adhere to page size specifications that previously could cause the maximum page size to be exceeded.

Notable demo improvements

  • The new Basic Demo replaces the Basic Module Loading Demo as a simple starting point for your own project and for experimenting with the yFiles API.
  • The Vue template node style is now based on Vue 3.

yFiles for HTML 2.6.0.3

This 3rd bugfix release for yFiles for HTML 2.6 corrects a small number of errors, and includes a new source code demo. There are no incompatible API changes.

Bugfixes

Visual Studio Code no longer suggests auto-imports that incorrectly import from yfiles/*, but only from yfiles. This is achieved by a slight improvement of the typesVersion property in the package.json file.

WebGL2 rendering mode

  • The WebGL2ArcEdgeStyle class now draws the arc with the correct height in some edge cases. Previously, the visualization was incorrect if the given height was less than 0.5 and the fixedHeight property was set to false, or if the given height was greater than 255 and the fixedHeight property is set to true.
  • The WebGL2BridgeEdgeStyle class now draws the bridge on the correct side if the given height is greater than 255.
  • WebGL2 handle hit testing now correctly considers the value of the GraphComponent.hitTestRadius property.
  • WebGL2 handles now correctly register hits when a projection other than the identity projection is applied to the GraphComponent.
  • Deleting a selected edge with bends that uses the WebGL2PolylineEdgeStyle no longer leaves rendering artifacts of the target port handles the graph component.

Other features

Notable demo improvements

  • When editing demo code in Visual Studio Code, auto-import is now much more convenient to use. In addition to suggesting importing from plain yfiles instead of yfiles/*, it no longer suggests importing from the yFiles UMD modules.

    To achieve this, some of the demos that used the yFiles UMD modules were removed. These showed outdated technologies anyway. You can still find their source code in the GitHub demo repository with the v2.6.0.2 tag.

  • The new Home Automation Demo is an example of a tool for visually programming a home automation network.
  • BPMN DI file import now correctly handles lane sets in a subprocess node.

yFiles for HTML 2.6.0.2

This 2nd bugfix release for yFiles for HTML 2.6 corrects a small number of errors.

Bugfixes

WebGL2 rendering mode

  • In this rendering mode, certain interactions no longer result in exceptions when using a FilteredGraphWrapper with a folded graph as the complete graph.
  • SVG visuals no longer disappear when using WebGL2GraphModelManager with render mode WebGL2GraphModelManagerRenderMode.SVG and a graph item style that changes the instance of the SVG visual in its updateVisual method.
  • In this rendering mode, the shadow effect of self-loops and arcs is now an actual shadow, not a wide ambient light. Also, when zooming out, the effects of all edge types now disappear in the same way, in sync with the effects on nodes.
  • Browsers no longer complain about certain WebGL vertex attributes being supplied without a bound buffer under certain conditions.

Radial layout

  • The RadialLayout class no longer throws an exception if the layout algorithm is executed too many times from the same instance.

yFiles for HTML 2.6.0.1

The 1st bugfix release for yFiles for HTML 2.6. Compared to version 2.6, it includes several error corrections and a minor incompatible change.

Incompatible change

  • When WebGL2 handles are used in SVG render mode and the tree-shaking step of the build tool removes the view-webgl module, a meaningful error is now thrown. Previously, the handle functionality would just silently break. Add the line Class.ensure(WebGL2GraphModelManager) to prevent the removal of the module and thus the error.

Bugfixes

View and Styles

GraphML

  • During GraphML writing, the IWriteEvents.DataWriting event is now dispatched correctly after the writing process instead of before.
  • Labels whose text start with an opening brace are now correctly serialized to GraphML.
  • Fixed GraphML serialization and deserialization for certain configurations of the GroupNodeStyle and RectangleNodeStyle classes.

Layout

yFiles for HTML 2.6

Major new features

More supportive source code demos

We modernized and improved the implementation of several demos to both make relevant code easier to re-use in your own project and to make it easier to add your own sample data. This includes the large "showcase" demos and more. This is an ongoing effort, and we'll modernize more demos in the coming releases.

Also, the dev server for the yFiles source code demos is now based on Vite. This has many advantages, for example hot module reloading (HMR), automatic compilation of TypeScript code, and errors are displayed in Vite's error overlay with clickable stacktrace.

In addition, there is large number of other notable demo improvements.

New tutorials

We have greatly improved the concept of our tutorials. The respective content is now more focused on a specific topic, which is explained step by step. The user interface now offers more space for the explanatory text, and the related code snippets are embedded directly into the text. At the same time, each step is still a small executable demo that can be experimented with.

For each graph item type, there is now a separate tutorial that presents the implementation of a custom style for that item type based on the corresponding base style class: Node Style Implementation Tutorial, Edge Style Implementation Tutorial, Label Style Implementation Tutorial, and Port Style Implementation Tutorial

The new Graph Builder Tutorial guides you through configuring GraphBuilder to conveniently transfer business data into a graph that you can display, manage and explore.

Basic Features Tutorial is the new more appropriate name of the previous Getting Started Tutorial. Its content has been thoroughly revised, too.

The previous Application Features Tutorial and Layout Features Tutorial are no longer referred to as 'tutorials', as these are rather single source code oriented demos instead of coherent tutorials.

Extended WebGL2 rendering mode

There are many new features, improvements and bugfixes for the WebGL2 rendering mode, most notably:

A new beacon animation and a new halo effect are available for WebGL2 selection, highlight, and focus styles. The former is provided by the new WebGL2BeaconNodeIndicatorStyle class while the latter can be enabled with the new WebGL2IndicatorType.HALO enum value. Both effects can be seen in the WebGL2 Animations Demo.

The WebGL2DefaultLabelStyle class now supports text wrapping, vertical text alignment, and right-to-left text direction.

Scaled WebGL2 handles now get a full pixel size for sharp rendering. WebGL2 bend handles and port relocation handles are now updated during move gestures. The HandleInputMode class now support rendering in the WebGL2 rendering mode.

The WebGL2GraphModelManager.renderMode property can be used to quickly switch between SVG and WebGL2 rendering, and is now used in the Large Graphs Demo.

The new WebGL2GraphModelManager.ShadersCompiling and WebGL2GraphModelManager.ShadersCompiled events are fired when asynchronous compilation of WebGL2 shaders has started and has finished, respectively. In combination with shader pre-compilation, this can be used to make the graph component visible only after all shaders are available. This is shown in the new WebGL2 Pre-compilation Demo.

Constraint organic layout and more

The OrganicLayout class now supports different types of constraints that restrict the placement of the graph's nodes that are specified with the new OrganicLayoutData.constraints property.

Such constraints can be used to implement various requirements, as the following new demos show: Metabolic Pathways Demo, Boundary Labeling Demo, Height Profile Demo, and Organic Layout with Constraints Demo.

In addition, organic layout now supports:

Compact tabular layout

The TabularLayout class now supports the calculation of node arrangements that lead to a low overall edge length. This feature can be enabled with the new property considerEdges.

The new Compact Tabular Layout Demo shows how to configure the tabular layout to produce compact drawings.

New alignment layout stage

The new AlignmentStage class places the nodes of a given layout on automatically determined horizontal and/or vertical lines. This stage is particularly designed as a post-processing step that snaps suitable nodes to the same x- or y-coordinates to obtain a grid-like structure. When rearranging the initial layout, the stage moves the nodes as little as possible.

The associated new AlignmentStageData class allows specifying custom data considered during the layout calculation.

This new feature is shown in the new Node Alignment Demo and Hierarchic Layout with Node Alignment Demo.

New HTMLVisual class

yFiles for HTML now supports HTML-based visuals. This makes implementing custom node styles with complex CSS-based layouts, lots of text, or input elements much easier than SVG-based visuals.

Demos that use this new visual are HTML Controls Demo, HTML Label Style Demo, and Data Table Demo. In addition, the new demos that show how to use UI framework components as node styles in a React, Vue, and Angular app use this visual.

CSS-styling for graph items

Most built-in styles for graph items now have a cssClass property which specifies the class attribute of the created SVG elements. This makes styling graph items with CSS instead of the properties of the style class a lot easier. It also enables CSS transitions and animations without the need for custom code. The new CSS Item Style Demo shows this feature in action.

The new Fill.currentColor and Stroke.currentColor constants represent the CSS currentcolor value and work especially well with CSS styling.

Improved group node style

The last major release brought a powerful GroupNodeStyle, that got even more features and improvements in this release, namely:

  • If GroupNodeStyle's tab width is set to 0, the tab width does not reduce the corner radius of the style's outline anymore. However, it still forces the corner radius of the style's inner corners (i.e., the corners of the content area on the side of the style's tab) to 0.
  • The new GroupNodeStyle.minimumContentAreaSize property simplifies enforcing a minimum size for the content area a group node.
  • GroupNodeStyle offers the possibility to have its tab width grow (or shrink) depending on the preferred size of associated tab and tab background labels.
  • The new GroupNodeStyle.renderTransparentContentArea property controls whether a semi-transparent value for the contentAreaFill property works as expected by showing what's behind the group node.

All these improvements are also available on the WebGL2GroupNodeStyle class for the WebGL2 rendering mode.

New features

View and Styles

Layout

Improvements

General

  • All yFiles modules can now be loaded in environments with incomplete SVG implementation, such as jsdom, without causing exceptions. It is also possible to create a new GraphComponent in these environments, although many operations on the GraphComponent will still fail.
  • License checking is now more careful when testing on non-browser environments and detects them more reliably.
  • Obsolete compatibility files for old yFiles versions have been removed.

Graph and collections

  • The EdgePathLabelModel and EdgeSegmentLabelModel classes have been improved to provide better placements with edge-cases where the path is too short for the label or degenerates completely.
  • The GroupNodeLabelModel class no longer triggers an error when used with or set to a node that does not use GroupNodeStyle. GroupNodeLabelModel is still not intended to be used with nodes that do not use GroupNodeStyle. This restriction has been lifted to support workflows where the node style is set to GroupNodeStyle after the label model is set to GroupNodeLabelModel.
  • The List class now implements the IListEnumerable interface. This allows using List instances where an IListEnumerable is expected, e.g., assigning the instance returned by the IEdge.bends.toList method to the SimpleEdge.bends property.
  • The types of the IEnumerable.groupBy and IEnumerable.from methods or now properly inferred from their parameters. Similarly, the List.from method can now infer the type argument of the returned list even if no mapFunction argument was passed.
  • The Exception class no longer re-declares the cause property, but just inherits it from Error, to make sure that the types don't clash. This has been a problem for TypeScript 4.6 through 4.8.
  • Functions that are method parameters now have meaningful parameters names and descriptions for their own parameters. In particular, this applies to the methods of the IEnumerable class.

GraphBuilder

  • The NodeCreator, EdgeCreator, and LabelCreator classes can now be used without a GraphBuilder. This enables developers to apply styles and labels from a data object in cases where a GraphBuilder is not suitable for graph creation.
  • A NodeSource now allows for recursive definition of child nodes in a grouping hierarchy. The new methods addChildNodesSource and createChildNodesSource allow for defining a source to fetch child node items from a node data item.
  • A NodeSource now allows for implicit definition of parent nodes in a grouping hierarchy. The new methods addParentNodesSource and createParentNodesSource allow for defining a source to fetch a parent node item from a node data item.
  • The getUpdatedStyle method of the NodeCreator, EdgeCreator, and LabelCreator classes now uses the default style from the graph as fallback if the style provider is not set.
  • The LabelCreator.getUpdatedLayoutParameter method now uses the default layout parameter from the graph as fallback if the layout parameter provider is not set.
  • The TypeScript types for the graph builders and their sources and creators have been made more precise. Many parameters and providers now support strings, objects, or arrays which can be converted into their actual type.

View and Styles

  • All base style classes now have an optional generic type parameter. The type defines the exact type of the visual, making it easier to properly implement custom styles with comprehensive IDE type-checking. In addition, for the SvgVisual and the new HtmlVisual classes, there are now factory methods that help with the type-safe creation of the visual along with a type-safe storage of tag data for the purpose of caching rendering data. See the new custom style tutorial on how to use the new type safety.

    The IRenderContext.setDisposeCallback method has now a type parameter for the type of the Visual it handles.

  • Bends in edges that use ArcEdgeStyle, ArrowEdgeStyle, or BridgeEdgeStyle are no longer shown when selecting these edges. Additionally, marquee selection will not select these bends anymore even if they lie in the selection rectangle.
  • Changing the height of an arc or bridge edge via its handle is now undoable.
  • The MarkupLabelStyle class is now faster when the shown text does not contain HTML, and it can now correctly render <sub> and <sup> elements in Firefox..
  • The rendering performance of the ShapeNodeStyle class has been improved.
  • Initial text measurement when adding labels with the DefaultLabelStyle or MarkupLabelStyle classes is now faster.
  • Text measurement no longer sometimes mistakenly uses a slower method, even though this is not necessary.
  • Improved SVG rendering performance when embedded in a framework with extensive CSS resets (e.g., Vuetify, Material UI, ...).
  • The rendering order of nodes in the GraphOverviewComponent has been improved to be more in sync with the rendering order in the corresponding GraphComponent.
  • The GraphOverviewComponent class now uses its contentGroup instead of the rootGroup to add the visualization of its graph content. This makes it easier to customize the overview, for example, by adding a background visual.

WebGL2 rendering mode

  • The WebGL2DefaultLabelStyle class now uses the actual label layout to render the labels at the same positions as DefaultLabelStyle, especially with label models that adjust the label size like InteriorStretchLabelModel and GroupNodeLabelModel.
  • WebGL2 labels are now rendered in batches to ensure browser responsiveness when lots of labels must be rendered.
  • The GraphOverviewComponent class now supports rendering in WebGL2 using suitable WebGL2 item styles for the nodes and edges. Similarly, the GridVisualCreator class now support rendering in WebGL2, too.
  • Automatic conversion of a NodeStyleLabelStyleAdapter instance to a WebGL2 style now yields a closer matching visualization.
  • The shader for polyline edges compiles faster when only a subset of visual features like dashed, effect, or smooth bends are enabled.
  • The fallback shader for polyline edges now respects bends.
  • Several style-related methods of the WebGL2GraphModelManager class have now better types.
  • The WebGL2Stroke class now supports type conversion from the Stroke class.
  • WebGL2PolylineEdgeStyle now renders polyline edges with smooth bends without artifacts on Android devices that do not have enough mediump precision. These edges will be rendered without smoothing, though.

Interaction

Layout

  • For oriented rectangles the intersection test no longer allocates unnecessary memory and no longer creates unnecessary objects, which improves its allocation performance.
  • The TreeLayout class now places the ports of edges incident to multi-parent nodes and with port constraints (excluding any-side constraints) at the nodes' border. Previously, unlike as for edges incident to other nodes, the edge ports where located at the nodes' center.
  • The value type of IncrementalHintItemMappingConvertible is now object instead of any and matches the return type of the factory methods of IIncrementalHintsFactory. This means the union type of HierarchicLayoutData.incrementalHints no longer contains any.

Bugfixes

Graph

View and Styles

  • GroupNodeStyle's collapse and expand icon can now be reliably hit in all cases. In rare cases, changing the value of one the properties that affect the icon's location were not taken into account for hit tests.
  • The GroupNodeStyle class now shows the icon in a way that renders correctly in non-browser SVG renderers.
  • The DefaultLabelStyle class now adds an ellipsis more reliably at the end when the text does not fit into the specified text wrapping shape.
  • Bezier edges no longer turn into polyline paths under rare circumstances.
  • The ArrowEdgeStyle class now correctly determines its visibility with thicknesses greater than 13.
  • The IArrow type converter no longer produces arrows of incorrect size when strings are given that contain only the arrow color in hex and the arrow type, omitting the scale parameter.
  • CSS 4 generic font-family names are no longer quoted erroneously when passed to the Font constructor (or used in font conversions).
  • The drop shadows created with the ShadowNodeStyleDecorator class are no longer cut off for small node sizes.
  • The drop shadow of the GroupNodeStyle class is now correctly displayed in the top left part if the corner radius is greater than 16.
  • Animated viewport changes of a GraphComponent no longer cause strange behavior when values for maximum or minimum zoom are set and are also violated by the viewport change.
  • Layout animation performance has been improved for edges with many bends.

Interaction

WebGL2 rendering mode

  • WebGL2 rendering mode no longer tries to update the label texture position in the texture atlas if no texture is assigned.
  • WebGL2 rendering of edges is now updated correctly when they are reconnected to different ports.
  • Layout morph animations with WebGL2 rendering started immediately at app startup now correctly morph the graph.
  • The displayed label text is now correctly updated in rendering mode when the label text changes.
  • 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 when the graph instance is replaced while a label is selected.
  • The IconLabelStyle class can now be auto-converted to a WebGL2IconLabelStyle class without throwing an error. Note however that in this case, the WebGL2 style will render only the label text, not the icon.

Layout

  • For hierarchical layouts, rare combinations of PortCandidates in PortCandidateSets no longer result in exceptions.
  • In organic layouts, fixed nodes no longer move in any case when also a group node is marked as fixed.
  • The OrthogonalLayout class no longer throws an exception for some input graphs with tree substructures when the treeStyle property is set to a value different from TreeLayoutStyle.NONE.
  • The EdgeRouter class does no longer yield different results in rare cases when the same instance is applied twice to the same input graph.
  • The EdgeRouter class no longer produces self-crossing routes of edges with labels if its integratedEdgeLabeling property is enabled.
  • 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.
  • The ClearAreaLayout class no longer produces results where the specified area is not cleared for some input graphs when its clearAreaStrategy property is set to ClearAreaStrategy.PRESERVE_SHAPES or ClearAreaStrategy.PRESERVE_SHAPES_UNIFORM.
  • The PartialLayout class does no longer yield different results in rare cases when the same instance is applied twice to the same input graph.
  • The PartialLayout class now correctly places disconnected components for cases where a layout orientation is specified, and its componentAssignmentStrategy property is not ComponentAssignmentStrategy.SINGLE. Previously, such components were sometimes placed far away from the remaining graph elements.
  • The ShortestPaths class now correctly calculates the k-shortest paths of graphs. Previously, in rare cases, the algorithm sometimes produces wrong results, i.e., returns paths that are not the shortest.

Notable demo improvements

In addition to the demos for new yFiles features, the extensive demo modernization, and the new tutorials, all listed above, there have been numerous improvements of demo source code. The most notable ones are listed below. To check out the new demos in the demo overview, filter it to the version "v2.6.0.0".

  • We modernized the existing demos for testing frameworks, and added several new ones, namely Jest, Jest Puppeteer, Cypress, Playwright, Selenium Webdriver, Vitest, and WebDriverIO.
  • Several new demos show how to use UI framework components as node styles in a React, Vue, and Angular app.
  • The new WebGL2 Label Fading Demo shows how to create a level-of-detail behavior by fading graph items in WebGL2.
  • The new Neighborhood Circles Demo shows the neighborhood of selected nodes arranged on concentric circles. The concentric arrangement highlights how close the connection between a selected node and a neighbor node is.
  • Two new demos show the integration of yFiles in Next.js and SolidJS apps, respectively.
  • The React Demo is now based on Vite instead of create-react, and the new React Class Components Demo shows a hooks-only approach in contrast to the class component-based approach of the existing demo.
  • The Vue Demo is now based on create-vue and thus uses Vue 3, TypeScript, and Vite.
  • As part of the demo modernization, demos now make use of modern ECMAScript features when appropriate, and consequently, we dropped support for Internet Explorer for the demos. Note that the yFiles for HTML library itself is still compatible with Internet Explorer 9-11.
  • We removed some obsolete demos from the yFiles package, but the last version of their source code is still available in the release 2.5.0.4 of the yfiles-for-html-demos GitHub repo.
  • All demos will now be part of the Layout and Viewer yFiles packages. With a viewer-only library, you still won't be able to run a demo that uses the layout part of the API, and vice versa, but you can now easily browse the source code of such demos in your IDE.
  • We have changed the category/directory of some demos to improve discoverability. For example, 'complete' has now the more descriptive name 'showcase', and some of its demos moved to other categories like Layout and Styles.

Incompatible Changes

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

Incompatible API Changes

Incompatible behavior changes

  • When IEnumerable.orderBy and IEnumerable.orderByDescending are called without a comparison function, they now sort numbers by their numerical values. Before, they were sorted by their string values.
  • The ItemDroppedInputMode.dragDropped event is now raised after the drop gesture has actually finished, in line with how similar events are raised elsewhere.
  • Bends in edges that use ArcEdgeStyle, ArrowEdgeStyle, or BridgeEdgeStyle are no longer shown when selecting these edges. Additionally, marquee selection will not select these bends anymore even if they are in the selection rectangle. This is because these styles either consider bends as control points or do not consider them at all.
  • The MoveInputMode, MoveLabelInputMode, and HandleInputMode sub-modes of GraphEditorInputMode no longer have a pre-set snapContext. Instead, they take the SnapContext instance from the input mode context. That way, changing the GraphEditorInputMode.snapContext property will also affect these sub-modes.
  • EdgePathLabelModel and EdgeSegmentLabelModel have been modified to yield better results when the path is not long enough for the label or even completely invisible due to overlapping nodes. This leads to greater visual stability in such cases, but results in slightly different placements in these edge cases.
  • Adding a label with GroupNodeLabelModel to a node that does not use GroupNodeStyle or setting a GroupNodeLabelModel-created parameter for a label whose owner node does not use GroupNodeStyle no longer throws an error claiming "The parameter does not support this kind of label.".
  • For GroupNodeStyle and WebGL2GroupNodeStyle, if the tab width is set to 0, the tab width does not reduce the corner radius of the style's outline anymore. However, it still forces the corner radius of the style's inner corners (i.e. the corners of the content area on the side of the style's tab) to 0.
  • The TextRenderSupport.addText method now consistently returns a string containing line breaks for wrapped texts.
  • The EdgeRouter class now ignores inner node labels by default, see property ignoreInnerNodeLabels. Previously, this property was disabled by default.
  • The layout-radial module now depends on the layout-tree module. Since you typically import from yfiles and not an individual module, this doesn't affect your source code. However, build tools that do tree shaking will now include the layout-tree module together with the layout-radial module.

yFiles for HTML 2.5.0.4

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

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 OrganicLayoutScope.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

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

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

Bugfixes

Graph and View

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

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

Bugfixes

Interaction

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

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: ShapeNodeShape.HEXAGON2 (a six-sided polygon with tips at top and bottom), ShapeNodeShape.STAR5_UP (a five-pointed star with one tip pointing upwards), and ShapeNodeShape.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 Theme.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

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

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

View

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

WebGL2

TypeScript

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

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 the 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

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

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

Incompatible changes

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

General

Incompatible API Changes

Incompatible API changes in the Layout part

Incompatible behavior changes

Deprecations

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

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

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

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

Circular Layout

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

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

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

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

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 Demos

This new demos are intended for developers who want to learn how to use a specific feature of a yFiles layout algorithm 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

  • The React Demo now makes use of functional components.
  • The Angular Demo now depends on Angular ~12.2.7 since an error in versions before 12.2.4 broke the yFiles library.
  • The Overview Component Tutorial shows how to add said component to an app.
  • Demos with tables now show how to properly configure undo for tables. Previously, re-ordering stripes was not properly undone during undo.

yFiles for HTML 2.4.0.3

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

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

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

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

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

View

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

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

Type Declarations

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

View

Interaction

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

Changes in Default Behavior

Deprecations

yFiles for HTML 2.3.0.4

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

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

Interaction

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

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

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 Drawing Demo.

yFiles for HTML 2.3.0.1

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

Layout and Analysis

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

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 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:

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.

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

View

Graph Component's New Projection Feature

Interaction

Layout

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

Styles

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

Incompatible Changes

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

Incompatible API Changes

Changes in Default Behavior

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

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

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

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

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

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

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

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

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:

  • Background Image Demo: Shows two different ways of adding an image to the background of the graph component.
  • Graph Search Demo: Shows how to search in the graph and highlight the result.
  • Smart Click Navigation Demo: Shows how to scroll and zoom the viewport to the area of interest by single edge-clicks.
  • Rectangular Indicator Demo: Shows how to add an interactive indicator to the graph component.
  • Level of Detail Style Demo: Shows a node style that hides details when zooming out.
  • Filtering Demo: Shows how to configure graph filtering.

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

Layout

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

View

Input

Graph-Layout-Bridge

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

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

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

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

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

Incompatible Changes

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

Incompatible API Changes

Changes of Default Behavior

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

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

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

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

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

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

yFiles for HTML 2.1.0.5

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

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

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

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

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

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

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

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

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

yFiles for HTML 2.1

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

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

View

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

Table

Layout and Algorithms

Bugfixes

Graph and View

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

Changes of Default Behavior

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.

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 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

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

Layout

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

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

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

Incompatible Changes

yFiles for HTML 2.0.1.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

Layout

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

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

Layout

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

Incompatible Changes

Breaking API Changes

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

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

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.
Previous changes