yFiles for HTML 2.1.0.6
yFiles for HTML 2.1.0.6
yFiles for HTML brings diagramming and graph visualization functionality to your HTML5 applications.This solution for the web platform features the most advanced UI components for drawing, viewing, and editing diagrams and unequaled graph layout and analysis algorithms for automatically arranging complex diagrams at the click of a button.
Unique features of yFiles for HTML
100% Client-Side
100% client-side graph drawing and graph editing in HTML5-capable browsers— no server component or browser plugin required.
Latest Drawing Technologies
Leverages both SVG, WebGL, and HTML5 Canvas to draw diagrams. The three technologies may be combined and used at the same time for the ultimate user experience.
Optional Server Components
Optional server components (node.js / Java / .NET) for automatic diagram layout and computationally-intensive tasks.
Flexible Loading
Develop using your favorite tool-chain: Use Webpack, UMD, AMD, Browserify, angular-cli, native ES6 modules, simple script loading, and more.
Optional GWT Overlay
Optional GWT overlay for the development with GWT Web Toolkit (GWT).
Pure jаvascript
A pure jаvascript solution that works seamlessly with AngularJS, Angular 2+, ReactJS, Vue.js, and basically any other jаvascript framework.
Supports ECMAScript 6
Requires ECMAScript 5 at minimum at runtime, but the API supports the new features of ECMAScript 6 like async functions and Promises, classes, ES6-modules, iterators, etc. at compile time.
TypeScript Support
Direct TypeScript support with complete TypeScript bindings for all members.
Developer Support
Extensive developer support with Developer's Guide and API documentation viewer, and with debug support, runtime type-checking, code completion, and quick API lookup in many IDEs.
Sophisticated Label Rendering
Easily add text labels to nodes and edges that show additional information. Various placement options, like inside or outside of a node or on an edge near the source or target ensure that labels remain where they should, even if items are moved.
Labels are not limited to short text phrases, they can hold multi-line text as well as show icons.
yFiles offers extensive formatting options, e.g. font, line spacing, and decorations, as well as word wrapping and alignment.
Untangle Edge Crossings with Bridges
Crossing edges can make complex diagrams harder to read. Bridges make clear where those edges go.
yFiles offers several different bridging styles and crossing policies that define which line should bridge which other line.
Custom Visuals to Add Auxiliary Information to Graphs
Nodes, edges, ports, and labels are not the only thing on the canvas. It is possible to add arbitrary other visualizations, either in the background or on top of the other graph items. Adding custom backgrounds, brand logos, legends, rulers or even dynamic helpers like snap lines help make a yFiles-powered application stand out.
Z-Order of Diagram Elements
The drawing of diagram elements relative to each other can easily be changed. For example, changing edges to appear above nodes instead of below can be arranged simply by changing their order.
Custom Styles Tutorial
A step-by-step tutorial guides you through the creation of an entirely custom style.
The tutorial covers style creation for nodes, edges, ports and labels, and will also show you how to create custom decorators for built-in styles. It covers all major topics like hit testing, performance optimization, animation, business data integration and edge bridging support.
Diagram Features
All diagrams consist of nodes and edges, of course. yFiles adds a number of unique features that help working with them, especially when they're getting larger. Grouping and folding lets you collapse and expand parts of the diagram. Swimlanes visually group parts of a diagram into rows and columns. Filtering can temporarily hide elements that are not important in the current view. A variety of import and export features make it easy to get your data into and out of graphs.
Grouping and Folding
yFiles supports grouping of nodes into other nodes. Edges can still connect freely to any of them, including connections between a group and its children or between children of different groups.
Collapsing a group node hides the child elements of that group, they will be restored when the group is expanded again.
Custom actions are possible when groups are collapsed or expanded, such as running an incremental layout algorithm, or fetching data to create child nodes in the expanded group node.
Major New Features
ES6 Modules of the Library
The yFiles package now contains the library as ES6 modules in addition to the existing UMD modules. This makes, amongst others, working with modern IDEs, popular tools like Webpack and Angular CLI, and TypeScript much easier.
WebGL Rendering
Added WebGL as a third rendering option besides the already available SVG and HTML5 Canvas rendering. This allows the rendering of very large graphs with good performance. The Large Graphs demo shows the new technique in action.
Labels at Ports
Labels can now be added to ports and the new label models FreePortLabelModel and InsideOutsideLabelModel can be used to place such labels. On the technical side, IPort now extends the ILabelOwner interface and there is a new enum constant: GraphItemTypes.PortLabel.
Customizable Rendering Order
Labels and ports can now optionally be rendered directly in front of their owner. Such a rendering order can make the ownership of labels and ports clearer if nodes overlap. Previously, all labels and ports were rendered in front of all nodes. The new rendering order can be enabled by setting the new properties LabelLayerPolicy and PortLayerPolicy of GraphModelManager to LabelLayerPolicy.AtOwner and PortLayerPolicy.AtOwner, respectively.
The nesting options of GraphModelManager for the visualizations of nodes and edges have been improved and clarified. The properties useHierarchicNodeNesting and useHierarchicEdgeNesting have been combined into the new hierarchicNestingPolicy property. It takes values of the new HierarchicNestingPolicy enum. Its new option HierarchicNestingPolicy.GROUP_NODE configures GraphModelManager to visualize all leaf nodes in one canvas object group while nesting all group nodes depending on their hierarchical depth.
Touch Improvements
A completely new Touch demo shows how the user experience can be optimized for touch-only devices, for example with large handles and a context dial menu that is triggered on "long-press".
This is accompanied by several improvements in the library that make touch input more fun. Especially, the hit test radius and drag detection area is now autoamtically enlarged for touch input, inertia scrolling of the viewport behaves now in a more natural way and stops after a fixed amount of time and two-finger panning and zooming now smooths small movements to avoid undesired changes of the zoom level.
Drag and Drop
Native HTML5 drag and drop is now supported in addition to the custom yFiles implementation that is based on mouse and touch event listeners. Both ways can now display a preview image of the dragged item all of the time and not only inside the graph component. Finally, the new LabelDropInputMode and PortDropInputMode classes implement drag and drop for labels and ports, respectively. The API of these classes is similar to the existing NodeDropInputMode for nodes.
Lasso Selection
The new LassoSelectioninputMode selects all model items inside a hand-drawn lasso region. This mode allows combinations of free-hand and straight-line sections during path creation.
Improved Orthogonal Layout
Many parts of the orthogonal layout algorithm have been significantly improved. In many cases, the drawings created by this algorithm are now much more compact and have smaller edge lengths, and they contain less crossings and perceived bends.
In addition, this layout now supports special layout styles of various substructures that are automatically detected in the input graph. Supported substructures are trees, chains and cycles. In addition to the style, the new feature offers more settings, like, for example, the desired tree layout orientation.
Parallel edges (multi-edges that share the same source and target node) are now routed as parallel as possible; if there are edge labels, the routes must differ somewhat. Previously, parallel edges were not handled explicitly and their routes were often very different, making the recognition of parallel structures difficult.
Sub-components in Hierarchic Layouts
In a hierarchic layout, you can now define sub-components of the input graph such that each sub-component is arranged by a user-specified layout algorithm. This allows hierarchical layouts where parts of the graph are arranged in a different fashion, e.g., to emphasize special sub-structures. The new HierarchicLayoutData.SubComponents property can be used to configure the new sub-components feature of the hierarchic layout.
Tree Map Layout
Added the new layout algorithm TreeMapLayout that generates tree maps. Tree maps present hierarchical data using nested rectangles (nodes) where each rectangle (node) gets its size depending on a specific dimension of data associated to it. The new TreeMapLayoutData class provides additional configuration options for this algorithm and the new Tree Map Demo shows a possible use case for the new layout style.
Tabular Layout Style
The new layout algorithm TabularLayout generates simple tabular arrangements of nodes. It allows to place nodes in rows and columns, such that each table cell contains at most one node. Among its features is, for example, a from-sketch mode, the possibility to exactly map nodes to specific cells or different vertical and horizontal alignments. The new TabularLayoutData class provides additional configuration options for this algorithm and the Layout Styles Demo shows the new layout style.
New Features
General
If you are updating from an older version of yFiles for HTML, have a look at the list of incompatible changes and at the more detailed description in the Migration Guide document (of your local yFiles for HTML installation). An updated version of our automatic source code conversion tool is available for this release, too.
Many common simple types can now be created, or automatically type converted, from a shorthand string or object notation. For example, you can specify a point with {x:100, y: 200}, an arrow with "blue large circle", and an enum just by its name, e.g. "TOP_LEFT". Usages that allow the conversion of a parameter or property value are marked with a 'Conversion' badge in the API Doc and the valid syntax for each type is described with the corresponding type.
The deployment tool can now optimize and obfuscate ES6 sources directly; transpiling the sources to ES5 first is not required anymore.
View
The performance of FilteredGraphWrapper has been significantly improved. Now, it depends mainly on the size of the resulting filtered graph. This makes use cases that load very large graphs into memory and displaying only a subset of them using FilteredGraphWrapper much more reactive.
The new property CanvasComponent.devicePixelRatio can be adjusted to achieve crisp Canvas or WebGL rendering on high DPI devices.
CanvasComponent and GraphComponent can automatically detect (re-)insertions into the DOM now, allowing the size calculation and adjustment to also work in cases where the component previously was not displayed (out of DOM or display:none).
The following types and methods were added to support the new LassoSelectioninputMode:
Added the GraphInputMode.lassoSelectioninputMode property and a corresponding factory method. LassoSelectioninputMode is disabled by default.
The new GraphInputMode.lassoSelect method programmatically selects all items in the provided GeneralPath.
The new ILassoTestable interface specifies whether the item is considered to be inside the lasso path. This is analogous to the IMarqueeTestable interface for marquee selection.
Any model item can be decorated with an instance of ILassoTestable or provide one in its lookup. For this, the Node/Edge/Port/Label/BendDecorator classes got the new lassoTestableDecorator property for decorating an item with a custom ILassoTestable.
The new isInPath method of Node/Edge/Port/LabelStyleBase can be overridden to customize the lasso testing behavior.
With TableEditorInputMode, double clicking a stripe or stripe label now edits the label in the same way as for other graph items.
The rectangle of the marquee selection can now be customized with the new protected method MarqueeSelectioninputModes.calculateMarqueeRectangle.
Added the events ElementsCopied, ElementsCut, and ElementsPasted to GraphEditorInputMode, and the event ElementsCopied to GraphViewerInputMode.
Added new decorator implementations for table items. You can access these new decorators via the new method ITable.GetDecorator with the RowDecorator, ColumnDecorator and StripeLabelDecorator properties.
The mouse wheel behavior of the overview can now be switched between Zoom, Scroll, and None, and optionally the action can be performed only when the control is focused. This can be configured with the new OverviewInputMode.MouseWheelBehavior property.
If the new CanvasControl.QuantizeInputCoordinates property is enabled, world coordinates of mouse and touch events are rounded to nicer values to avoid unnecessary precision. For example, you'll get the value 326.375 instead of 326.3858109495. The rounding is chosen based on the zoom level to ensure that there is almost no visual deviation. Lower zoom levels will result in coarser rounding, higher zoom levels will use exactly as much precision as necessary. By default, this option is enabled.
Added text wrapping support to the template styles. This feature is available through the built-in converter function TextWrapConverter.
Layout
ShortestPaths: Added a-star (A*) algorithm for finding the shortest path between two nodes in a directed or undirected, arbitrary graph.
The new property OrthogonalLayout.maximumDuration controls the preferred time limit of this layout algorithm.
The new OrthogonalLayout.uniformPortAssignment property allows to obtain results with a more uniform port assignment.
TreeLayout: Added node placer CompactNodePlacer that produces more compact tree layouts. It uses a dynamic optimization approach that chooses a placement strategy of the children such that the overall result is compact with respect to a specified aspect ratio, see property CompactNodePlacer.preferredAspectRatio.
The new TreeLayoutData.CompactNodePlacerStrategyMementos property can be used to to maintain similar layout styles over subsequent runs of compact tree layout.
EdgeRouter now supports routing through user-specified intermediate points. All specified points will lie on the edge route in the given order. See new property EdgeLayoutDescriptor.intermediateRoutingPoints.
EdgeRouter: Edges that connect group nodes with their descendants can now directly connect from the inside to the group node border. Previously, an edge needed to always leave the group node before connecting to it. The feature can be enabled/disabled individually for each edge using the new property EdgeLayoutDescriptor.directGroupContentEdgeRouting.
Added convenience layout stage TemporaryGroupNodesInsertionStage that automatically generates a (non-nested) grouping structure from a given mapping of nodes to a component ID. This temporary grouping is meant for use during the run of the core layout algorithm of the stage. It allows, for example, easy use of RecursiveGroupLayout without the need for a real grouping structure when the requirement is that different sub-graphs need to be arranged with different layout algorithms.
The new TemporaryGroupNodeInsertionData class provides additional configuration options for this algorithm.
The new stage PlaceNodesAtBarycenterStage places a user-specified subset of nodes on the barycenter of their neighbors. During the core layout, these node are hidden.
Improvements
General
The TypeScript declaration files now support quick interface implementations.
The new yfiles.lang.Workarounds class provides properties that activate workarounds for known browser issues. This alternative way of setting workarounds is especially useful in ES6 modules where no reference to the yfiles top-level namespace is required anymore.
The new yfiles.lang.License object has a value property that can be set to the license values. This alternative way of setting the license data is especially useful in ES6-style code where no reference to yfiles is required anymore.
Errors thrown during the execution of the default implementations of ICommand.SAVE and ICommand.OPEN can now be caught by setting an error handler function to the yfiles.lang.Exception.handler property.
The IEnumerable.reduce method now uses the same argument order and semantics as the default Array.prototype.reduce method.
Rect and Size: Added methods to reduce the size of a Rect and a Size instance, respectively.
The new method GeneralPath.intersects(GeneralPath) determines whether the path intersects with another GeneralPath.
Saving a GraphML file now works in Safari 10.1 and 11 on macOS.
When reading GraphML with the deserialization property IGNORE_XAML_DESERIALIZATION_ERRORS enabled, invalid property content is now skipped instead of discarding the whole object with such content.
The GraphMLSupport.graphMLIOHandler property is initialized with a GraphMLIOHandler instance.
Graph
The default value of DefaultPortCandidate.locationParameter is now FreeNodePortLocationModel.NODE_CENTER_ANCHORED for nodes and BendAnchoredPortLocationModel.FIRST_BEND for edges instead of a parameter of an internal model.
Added a remove method to NodeDecorator, LabelDecorator, EdgeDecorator, PortDecorator, and BendDecorator for easy removal of decorations.
Many label model createParameter methods now have default values for parameters that are not needed every time.
InteriorStretchLabelModel: Added new parameters CENTER_HORIZONTAL and CENTER_VERTICAL for horizontal or vertical centered one-line labels.
The elementCopiedCallback or elementDuplicated parameter of the methods GraphCopier.copy and GraphClipboard.duplicate is now optional (and can be null).
DefaultGraph now fills the undo engine and triggers events in a consistent manner for all graph element factory methods.
DefaultGraph has new factory methods to customize undo unit creation.
The performance of GraphBuilder, TreeBuilder, and AdjacentNodesGraphBuilder was drastically improved if node and edge ID bindings are set. Additionally, these types have an improved API that makes it easier to customize the created and updated graph elements.
View
The new CanvasComponent.hitTestRadiusTouch property controls the hit test radius for touch interaction. The existing hitTestRadius property now only applies to mouse interaction. The ICanvasContext.HitTestRadius property automatically uses one or the other value, depending on the last input event.
The new CanvasComponent.dragSizeTouch property specifies the size of the area where a touch point may stay in before a movement is considered a drag. The existing dragSize property now only applies to mouse interaction.
Added the new CanvasComponent.limitFitContentZoom property which controls whether the maximum zoom level for the CanvasComponent.fitContent method as well as the fitContent command is restricted to 1 or the value of the maximumZoom property.
Akin to the two CanvasComponent.zoomTo methods, there are now two CanvasComponent.zoomToAnimatedmethods that animate the viewport change. The CanvasComponent.zoomToAnimated method now returns a Promise that fulfills when the viewport animation has finished.
The new CanvasComponent.updateVisualAsync method behaves like the invalidate method but yields a Promise that can be awaited for.
The new CanvasComponent.lastInputEvent property contains the lastMouseEvent or lastTouchEvent depending on which was dispatched last.
The CanvasComponent.cleanup method new removes all DOM children and attributes created during the lifetime of the CanvasComponent from its div element.
The CanvasComponent.sizeChangedTimerInterval property now is a proper TimeSpan instead of a simple number.
The new CanvasComponent.toWorldFromPage method converts from HTML page coordinates to world coordinates.
Improved styling of scrollbars and provided more CSS classes for different states of the scrollbar.
Improved zooming and scrolling behavior for touch pads in Chrome, Safari, Edge and Opera.
GraphModelManager now avoids unnecessary re-installation of items if they keep their ICanvasObjectGroup. By these re-installations the z-order of the item in its group was lost and a new visual was created.
The new method GraphModelManager.getMainCanvasObject returns the canvas object that should be used when changing the visibility or z-order of a model item.
ICanvasObjectGroup.addChild(Object,ICanvasObjectDescriptor): The second parameter is now an optional parameter. If no descriptor is passed, ICanvasObjectDescriptor.ALWAYS_DIRTY_INSTANCE is used by the default implementation.
Assigning a new graph instance to GraphOverviewComponent now keeps configuration changes made to the overview's IVisualCreator instance.
Self-loop edges are now properly displayed in the GraphOverviewComponent.
The new Animations.createSequentialAnimation method creates an animation that animates multiple animations in sequence.
Styles
PolylineEdgeStyle renders better looking paths for self-loop edges whose ports are near the node border.
The GeneralPath.createSmoothedPath method now has additional parameters to change how smoothing is applied. Those new options result in nicer smoothing when combined with large smoothing lengths and many different segment lengths of the path.
The stroke thickness is now considered for the calculation of the origin of the default arrow visualizations. Therefore, the visualizations no longer extend into the node bounds.
Template styles now search for binding converter functions in a static converter store object on the template type before checking the `window` object. This helps preventing pollution of the global scope.
Template styles can now bind to the current zoom level of the component.
Template styles now provide yfiles-selected, yfiles-highlighted and yfiles-focused CSS classes depending on their current state.
Some styles unnecessarily added empty SVG elements to the DOM.
New instances of SolidColorFill are now automatically frozen which can result in performance improvements. This type was already immutable anyway.
The new static methods Stroke.setStroke and Fill.setFill are null-safe replacements for the existing applyTo methods of Fill and Stroke.
Input
ItemClickedEventArgs now extends ClickEventArgs and therefore provides additional information like the IInputModeContext.
Added MouseEventRecognizers that recognize a current down state of a mouse button. These can be used to recognize ongoing gestures like drags, in contrast to recognizers for the actual mousedown event.
The static constants SELECTED_MOVABLES_POSITION_HANDLER and SELECTED_MOVABLES_HIT_TESTABLE have been added to GraphEditorInputMode. These are used as default IPositionHandler and IHitTestable properties of GraphEditorInputMode.moveInputMode and can be reused for other input modes.
The new GraphEditorInputMode.moveUnselectedInputMode property provides a child input mode for moving unselected items. It supersedes the previous createMoveUnselectedInputMode method. This input mode is disabled by default.
CreateEdgeInputMode now removes coinciding bends if orthogonal edge creation is enabled.
The new property CreateEdgeInputMode.prematureEndHitTestable allows for considering any location as valid target point for an edge.
The new CreateEdgeInputMode.getSourcePortCandidates protected method makes source port candidate determination more flexible.
CreateEdgeInputMode provides access to a dummy target node which is used during the interactive edge creation. This allows making the node visible during creation by setting a style and size.
CreateEdgeInputMode now supports edges ending without a valid target port candidate. This allows creating new target nodes together with a newly created edge.
During interactive edge creation, the tip of a newly created edge now only snaps to valid target port candidates to create orthogonal end segments.
The new CreateEdgeInputMode.dragCursor property specifies the cursor that is used during edge creation when no bend may be created at the current location.
CreateEdgeInputMode now always creates dummy ports during a gesture, instead of temporarily reusing real ports if available. This makes it possible to change, e.g. the dummy edge's source port's style during the gesture.
The new CreateEdgeInputMode.startOverCandidateOnly property can be used to restrict the start of an edge creation gesture to directly hovered port candidates.
CreateEdgeInputMode now supports showing port candidates at potential sources for edge creation, too.
Moving a node with the MoveInputMode for unselected nodes now moves the bends of incident self-loops, too.
MoveLabelInputMode: The visualization of a moved label has been improved. The new property visualization allows easy switching between a symbolic preview, a preview or a live view.
The new static methods PositionHandlers.combine combine multiple position handler instances into a single instance.
Added overridable methods to PortRelocationHandle to allow customization of the port candidates.
The new PortRelocationHandle.visualization property controls how the preview during edge reconnection is handled. A new option is to change the edge during the gesture, which improves fidelity of the preview in certain cases.
ClickInputMode now dispatches the clicked events in the same order as GraphInputMode, i.e. the more specific events LeftClicked, RightClicked, LeftDoubleClicked and RightDoubleClicked are now dispatched before Clicked and DoubleClicked. Hence, Clicked and DoubleClicked will only be triggered if the event wasn't handled before.
The events ItemTapped, ItemDoubleTapped, and CanvasTapped have been added to GraphInputMode.
The new TapEventArgs.tapCount property can be used to distinguish between single and multiple taps.
Added a originalEvent property to TapEventArgs and ClickEventArgs.
TouchEventArgs now provides the modifier keys that were pressed when the event was dispatched as well as those that have changed their state since the last TouchEventArgs.
The CanvasComponent.MouseClick event now reports the position of the mouse down event as its location, and the CanvasComponent.TouchClick event reports the location of the touch down event as its location. Previously, this was the location of the up events which can be slightly different.
The new properties MoveViewportInputMode.snapPanning and snapPanningThreshold allow for snapping touch panning to one axis.
The new optional content parameter of the MouseHoverInputMode.show method defines the content of the tool tip to show. Now, the getToolTipContent method only gets called if no content was specified.
The new methods findNextItem and findNearestItem of NavigationinputMode can be used to configure the determination of the "next" item.
The generic type parameter T of class ItemDropInputMode is no longer restricted to IModelItem.
Several improvements of the interactive label editing.
Improved the focus handling of the text box.
Other elements can now be added to the default text box, e.g. buttons.
A new factory method allows replacing the text box with a custom label editor.
The new TextEditorInputMode.textBoxPlacementPolicy property provides finer control of what happens when the TextBox is (partially) outside of the viewport.
The new TextEditorInputMode.TextBoxPadding property controls the padding between the text box and the border of the canvas.
The properties maximumSnapDistance, showHitPortOwnerCandidatesOnly and visualization have been added to PortRelocationHandleProvider and are applied to each PortRelocationHandle created by this provider.
The following input modes now release the mutex before dispatching their final event:
CreateEdgeInputMode now releases the mutex before dispatching the EdgeCreated event.
MoveInputMode now releases the mutex before dispatching the DragFinished event.
ResizeStripeInputMode now releases the mutex before dispatching the DragFinished event.
Table
The last parameter of the following extension methods of ITable is now optional: findRow, findColumn, findStripe, and findStripes.
TableEditorInputMode now handles clicks and taps similar to GraphEditorInputMode:
New ItemClicked, ItemLeftClicked, ItemRightClicked, ItemDoubleClicked, ItemLeftDoubleClicked, ItemRightDoubleClicked, ItemTapped, ItemDoubleTapped events are raised.
If an event is handled, its default behavior is prevented.
The new properties clickableItems and clickableRegions determine for which items and regions a click or tap event will be raised.
Layout and Algorithms
SmartEdgeLabelModel is properly handled by labeling algorithms now, resulting in better label placements.
The new LayoutExecutor.createLayoutGraphAdapter callback method makes it possible to configure the LayoutGraphAdapter that is used for the layout calculation.
The new improvePortAssignment property of LayoutExecutor and LayoutGraphAdapter enables PortCalculator to improve the port assignment.
Major performance improvement for EdgeRouter in routing scenarios where it is unavoidable to cross obstacles (e.g. other nodes or labels) in order to reach the target. This includes cases where a crossing is necessary to guarantee that port candidates/constraints at the target side are satisfied.
In addition, several minor performance improvements reduce the runtime of the path search phase as well as the segment location assignment phase.
EdgeRouter: Improved quality in maze routing scenarios. Previously, it could happen that edge-node overlaps occurred even though there exists a more complicated path that yields no overlaps.
The combination of PartitionGridData and TableLayoutConfigurator has been improved:
PartitionGridData now reuses the PartitionGrid created by the TableLayoutConfigurator.
Several methods have been added to TableLayoutConfigurator which provide access to the PartitionCellId assignment of the configurator as well as the mappings between IRow/IColumn and RowDescriptor/ColumnDescriptor.
BusRouter: Now automatically ignores non-orthogonal edges with fixed bus descriptor (see BusDescriptor.fixed) or transforms them into orthogonal edges if they are octilinear. In previous versions, the layout algorithm simply throws an error in such cases.
MultiPageLayout: Improved runtime as well as layout quality if the input is a tree structure and the specified coreLayout is either an instance of class TreeLayout or ClassicTreeLayout. Furthermore, property MultiPageLayout.additionalParentCount allows to specify the number of additional proxies that the algorithm tries to add to a subtree. The original nodes associated with these proxies lie on the path of the tree's root to the subtree placed on a page.
MultiPageLayout: Added property createProxyReferenceNodes that allows to disable the creation of proxy reference nodes as well as property multipleComponentsOnSinglePage that allows to prevent that elements of different connected components are placed on the same page.
PortPlacementStage now additionally considers port grouping constraints. If two edges are port-grouped at a certain node, the stage assigns the same port location to the edges. Port groups are marked using DataProviders registered with PortConstraintKeys.SOURCE_PORT_GROUP_ID_DP_KEY and PortConstraintKeys.TARGET_PORT_GROUP_ID_DP_KEY.
TreeComponentLayout: Added property considerUndirectedTreesthat allows to specify whether or not undirected tree structures should be handled or not. Previously, only directed tree structures were considered.
DefaultNodePlacer and SimpleNodePlacer now both support to specify a minimum distance between the edge segments that are routed orthogonally in the channel between the root node and the child nodes, see method DefaultNodePlacer.minimumChannelSegmentDistance and SimpleNodePlacer.minimumChannelSegmentDistance respectively.
ClassicTreeLayout now allows to specify a minimum vertical distance for the horizontal edge segments of the bus, see ClassicTreeLayout.minimumBusSegmentDistance.
The new properties layerConstraints and sequenceConstraints of HierarchicLayoutData can be used to configure layer and sequence constraints for the HierarchicLayout. These supersede the previous layerConstraintFactory and sequenceConstraintFactory properties.
Bugfixes
Graph and View
Corrected weird scrolling behavior of the scroll bar when the viewport was outside the content rectangle.
DefaultGraph now calls the onRemovingEdge and onRemovingPort methods before their incident items are removed.
The GroupingSupport.hasGroupNodes method now returns only true if there are actually group nodes in the graph. Previously, it returned also true if there once were group nodes which had been removed in the meantime.
Undo units created by the execution of a layout algorithm are now correctly merged with undo units of the previously executed interactive gesture.
The graph of IFoldingView.graph now raises the NodeCreated, EdgeCreated, PortAdded, LabelAdded, and BendAdded events after the created element is registered. This fixes a bug where the master item of the created item was not available in handlers for these events.
Sometimes, the GroupNodeDefaults.Labels.AutoAdjustPreferredSize property and the GroupNodeDefaults.Ports.AutoCleanup property were not considered for labels and ports of groups.
The commands COPY, CUT, and DUPLICATE are no longer enabled if there are no elements to cut, copy, or duplicate.
The ICommand.COPY command is no longer executed twice.
The methods GraphClipboard.copy and GraphClipboard.cut don't copy items anymore which depend on items that are selected but not included in GraphClipboard.copyItems.
The InteriorStretchLabelModel.getMinimumNodeSize method now uses the correct insets for width calculation. Previously the top insets were erroneously used for the width.
Labels rendered using DefaultLabelStyle and TextRenderSupport now properly consider the ascent for the first line of text and are thus rendered in a slightly higher location than before.
BevelNodeStyleRenderer, PanelNodeStyleRenderer, ShadowNodeStyleDecorator and ShinyPlateNodeStyleRenderer now consider the shadow in their isVisible and getBounds methods.
GraphML serialization: Write the IconLabelStyle.wrapped property with the correct name.
The GraphML compatibility layer can now deserialize ports placed with AnchoredPortLocationModel of yFiles for HTML 1.x.
Input
GraphEditorInputMode and GraphViewerInputMode no longer ignore changes to their sub-input modes after having been installed once.
The KeyEventRecognizers SHIFT_IS_DOWN, ALT_IS_DOWN and CTRL_IS_DOWN now also recognize the modifier for touch events.
The following event recognizer of input modes and input-related classes can now also be used with touch gestures:
CreateBendInputMode.splitOrthogonalSegmentRecognizer.
ResizeStripeInputMode.resizeNeighborsRecognizer and ignoreContentRecognizer.
CreateEdgeInputMode.portCandidateResolutionRecognizer and enforceBendCreationRecognizer.
GraphInputMode.multiSelectionRecognizer.
TableEditorInputMode.multiSelectionRecognizer.
ReparentNodeHandler.reparentRecognizer.
PortRelocationHandle.portCandidateResolutionRecognizer.
The hitTestRadius property of the following implementations of ICanvasContext now correctly contain the value in world coordinates instead of view coordinates:
The context created by ICanvasContext.createCanvasContext when passing a CanvasComponent but no hit test radius.
The context passed to IPositionHandlers by MoveInputMode.
The context passed to adjacent handles when moving a bend handle.
The context passed to callback parameter in the IRenderContext.setDisposeCallback method.
Disabling MarqueeSelectioninputMode during the gesture via code left the marquee visible on the screen.
Panning with two fingers held down does no longer change the zoom level.
The Clicked and DoubleClicked events of ClickInputMode were sometimes missing when clicking on a node or edge. Now, they are always triggered unless the event was handled before.
Changing the values of the CreateEdgeInputMode.dummyEdgeGraph.edgeDefaults property had no effect for some interactions.
Node-to-edge snapping is now disabled by default which is the documented and intended value. For this, the initial value of the GraphSnapContext.nodeToEdgeDistance property is set to -1.0.
Snap lines which indicate the same size are no longer shown for implicitly re-sized parent group nodes.
The default implementation of IPortSnapResultProvider never returned any snap results.
The LabelEditingEventArgs.context.parentInputMode property provided in the events GraphEditorInputMode.LabelAdding, GraphEditorInputMode.LabelEditing, TableEditorInputMode.LabelAdding and TableEditorInputMode.LabelEditing now contains the corresponding GraphEditorInputMode or TableEditorInputMode instance.
The CreateEdgeInputMode.cancelGestureoninvalidTarget property was sometimes ignored on touch-enabled devices.
CreateEdgeInputMode: The validBeginCursor is now correctly hidden during edge creation when bend creation isn't allowed.
Fixed an exception when enabling TextEditorInputMode.rotateTextBox.
Pen input was not handled at all on Android devices. Now, it is treated as mouse input.
Table
When a stripe is removed, ITable.LabelRemoved events for the implicitly removed associated labels are now raised, too.
When a selected stripe label is edited its text box now is correctly placed.
ReparentStripePositionHandler: The source and target ghost visualization was not always updated correctly when custom ghosts were used.
Selected stripe labels no longer remain selected after their owning stripe is deleted.
Selected stripe labels no longer cause exceptions when hovering over them.
The selection indicator for selected stripe labels is now shown correctly.
The implementations of IStripeHitTestHelper and IBoundsProvider in the lookup of an IStripe could neither be decorated nor overridden by the context lookup provided by a stripe style.
Layout
Corrected an error in the Rectangle2D.contains(Rectangle2D) method. As a consequence of this error, the results of various algorithms and automatic layouts could have been wrong.
HierarchicLayout: Fixed problem that sometimes caused an unnecessarily large distance between adjacent layers.
OrthogonalLayout now considers edge grouping also if there are no directed edges specified.
ES6 Modules of the Library
The yFiles package now contains the library as ES6 modules in addition to the existing UMD modules. This makes, amongst others, working with modern IDEs, popular tools like Webpack and Angular CLI, and TypeScript much easier.
WebGL Rendering
Added WebGL as a third rendering option besides the already available SVG and HTML5 Canvas rendering. This allows the rendering of very large graphs with good performance. The Large Graphs demo shows the new technique in action.
Labels at Ports
Labels can now be added to ports and the new label models FreePortLabelModel and InsideOutsideLabelModel can be used to place such labels. On the technical side, IPort now extends the ILabelOwner interface and there is a new enum constant: GraphItemTypes.PortLabel.
Customizable Rendering Order
Labels and ports can now optionally be rendered directly in front of their owner. Such a rendering order can make the ownership of labels and ports clearer if nodes overlap. Previously, all labels and ports were rendered in front of all nodes. The new rendering order can be enabled by setting the new properties LabelLayerPolicy and PortLayerPolicy of GraphModelManager to LabelLayerPolicy.AtOwner and PortLayerPolicy.AtOwner, respectively.
The nesting options of GraphModelManager for the visualizations of nodes and edges have been improved and clarified. The properties useHierarchicNodeNesting and useHierarchicEdgeNesting have been combined into the new hierarchicNestingPolicy property. It takes values of the new HierarchicNestingPolicy enum. Its new option HierarchicNestingPolicy.GROUP_NODE configures GraphModelManager to visualize all leaf nodes in one canvas object group while nesting all group nodes depending on their hierarchical depth.
Touch Improvements
A completely new Touch demo shows how the user experience can be optimized for touch-only devices, for example with large handles and a context dial menu that is triggered on "long-press".
This is accompanied by several improvements in the library that make touch input more fun. Especially, the hit test radius and drag detection area is now autoamtically enlarged for touch input, inertia scrolling of the viewport behaves now in a more natural way and stops after a fixed amount of time and two-finger panning and zooming now smooths small movements to avoid undesired changes of the zoom level.
Drag and Drop
Native HTML5 drag and drop is now supported in addition to the custom yFiles implementation that is based on mouse and touch event listeners. Both ways can now display a preview image of the dragged item all of the time and not only inside the graph component. Finally, the new LabelDropInputMode and PortDropInputMode classes implement drag and drop for labels and ports, respectively. The API of these classes is similar to the existing NodeDropInputMode for nodes.
Lasso Selection
The new LassoSelectioninputMode selects all model items inside a hand-drawn lasso region. This mode allows combinations of free-hand and straight-line sections during path creation.
Improved Orthogonal Layout
Many parts of the orthogonal layout algorithm have been significantly improved. In many cases, the drawings created by this algorithm are now much more compact and have smaller edge lengths, and they contain less crossings and perceived bends.
In addition, this layout now supports special layout styles of various substructures that are automatically detected in the input graph. Supported substructures are trees, chains and cycles. In addition to the style, the new feature offers more settings, like, for example, the desired tree layout orientation.
Parallel edges (multi-edges that share the same source and target node) are now routed as parallel as possible; if there are edge labels, the routes must differ somewhat. Previously, parallel edges were not handled explicitly and their routes were often very different, making the recognition of parallel structures difficult.
Sub-components in Hierarchic Layouts
In a hierarchic layout, you can now define sub-components of the input graph such that each sub-component is arranged by a user-specified layout algorithm. This allows hierarchical layouts where parts of the graph are arranged in a different fashion, e.g., to emphasize special sub-structures. The new HierarchicLayoutData.SubComponents property can be used to configure the new sub-components feature of the hierarchic layout.
Tree Map Layout
Added the new layout algorithm TreeMapLayout that generates tree maps. Tree maps present hierarchical data using nested rectangles (nodes) where each rectangle (node) gets its size depending on a specific dimension of data associated to it. The new TreeMapLayoutData class provides additional configuration options for this algorithm and the new Tree Map Demo shows a possible use case for the new layout style.
Tabular Layout Style
The new layout algorithm TabularLayout generates simple tabular arrangements of nodes. It allows to place nodes in rows and columns, such that each table cell contains at most one node. Among its features is, for example, a from-sketch mode, the possibility to exactly map nodes to specific cells or different vertical and horizontal alignments. The new TabularLayoutData class provides additional configuration options for this algorithm and the Layout Styles Demo shows the new layout style.
New Features
General
If you are updating from an older version of yFiles for HTML, have a look at the list of incompatible changes and at the more detailed description in the Migration Guide document (of your local yFiles for HTML installation). An updated version of our automatic source code conversion tool is available for this release, too.
Many common simple types can now be created, or automatically type converted, from a shorthand string or object notation. For example, you can specify a point with {x:100, y: 200}, an arrow with "blue large circle", and an enum just by its name, e.g. "TOP_LEFT". Usages that allow the conversion of a parameter or property value are marked with a 'Conversion' badge in the API Doc and the valid syntax for each type is described with the corresponding type.
The deployment tool can now optimize and obfuscate ES6 sources directly; transpiling the sources to ES5 first is not required anymore.
View
The performance of FilteredGraphWrapper has been significantly improved. Now, it depends mainly on the size of the resulting filtered graph. This makes use cases that load very large graphs into memory and displaying only a subset of them using FilteredGraphWrapper much more reactive.
The new property CanvasComponent.devicePixelRatio can be adjusted to achieve crisp Canvas or WebGL rendering on high DPI devices.
CanvasComponent and GraphComponent can automatically detect (re-)insertions into the DOM now, allowing the size calculation and adjustment to also work in cases where the component previously was not displayed (out of DOM or display:none).
The following types and methods were added to support the new LassoSelectioninputMode:
Added the GraphInputMode.lassoSelectioninputMode property and a corresponding factory method. LassoSelectioninputMode is disabled by default.
The new GraphInputMode.lassoSelect method programmatically selects all items in the provided GeneralPath.
The new ILassoTestable interface specifies whether the item is considered to be inside the lasso path. This is analogous to the IMarqueeTestable interface for marquee selection.
Any model item can be decorated with an instance of ILassoTestable or provide one in its lookup. For this, the Node/Edge/Port/Label/BendDecorator classes got the new lassoTestableDecorator property for decorating an item with a custom ILassoTestable.
The new isInPath method of Node/Edge/Port/LabelStyleBase can be overridden to customize the lasso testing behavior.
With TableEditorInputMode, double clicking a stripe or stripe label now edits the label in the same way as for other graph items.
The rectangle of the marquee selection can now be customized with the new protected method MarqueeSelectioninputModes.calculateMarqueeRectangle.
Added the events ElementsCopied, ElementsCut, and ElementsPasted to GraphEditorInputMode, and the event ElementsCopied to GraphViewerInputMode.
Added new decorator implementations for table items. You can access these new decorators via the new method ITable.GetDecorator with the RowDecorator, ColumnDecorator and StripeLabelDecorator properties.
The mouse wheel behavior of the overview can now be switched between Zoom, Scroll, and None, and optionally the action can be performed only when the control is focused. This can be configured with the new OverviewInputMode.MouseWheelBehavior property.
If the new CanvasControl.QuantizeInputCoordinates property is enabled, world coordinates of mouse and touch events are rounded to nicer values to avoid unnecessary precision. For example, you'll get the value 326.375 instead of 326.3858109495. The rounding is chosen based on the zoom level to ensure that there is almost no visual deviation. Lower zoom levels will result in coarser rounding, higher zoom levels will use exactly as much precision as necessary. By default, this option is enabled.
Added text wrapping support to the template styles. This feature is available through the built-in converter function TextWrapConverter.
Layout
ShortestPaths: Added a-star (A*) algorithm for finding the shortest path between two nodes in a directed or undirected, arbitrary graph.
The new property OrthogonalLayout.maximumDuration controls the preferred time limit of this layout algorithm.
The new OrthogonalLayout.uniformPortAssignment property allows to obtain results with a more uniform port assignment.
TreeLayout: Added node placer CompactNodePlacer that produces more compact tree layouts. It uses a dynamic optimization approach that chooses a placement strategy of the children such that the overall result is compact with respect to a specified aspect ratio, see property CompactNodePlacer.preferredAspectRatio.
The new TreeLayoutData.CompactNodePlacerStrategyMementos property can be used to to maintain similar layout styles over subsequent runs of compact tree layout.
EdgeRouter now supports routing through user-specified intermediate points. All specified points will lie on the edge route in the given order. See new property EdgeLayoutDescriptor.intermediateRoutingPoints.
EdgeRouter: Edges that connect group nodes with their descendants can now directly connect from the inside to the group node border. Previously, an edge needed to always leave the group node before connecting to it. The feature can be enabled/disabled individually for each edge using the new property EdgeLayoutDescriptor.directGroupContentEdgeRouting.
Added convenience layout stage TemporaryGroupNodesInsertionStage that automatically generates a (non-nested) grouping structure from a given mapping of nodes to a component ID. This temporary grouping is meant for use during the run of the core layout algorithm of the stage. It allows, for example, easy use of RecursiveGroupLayout without the need for a real grouping structure when the requirement is that different sub-graphs need to be arranged with different layout algorithms.
The new TemporaryGroupNodeInsertionData class provides additional configuration options for this algorithm.
The new stage PlaceNodesAtBarycenterStage places a user-specified subset of nodes on the barycenter of their neighbors. During the core layout, these node are hidden.
Improvements
General
The TypeScript declaration files now support quick interface implementations.
The new yfiles.lang.Workarounds class provides properties that activate workarounds for known browser issues. This alternative way of setting workarounds is especially useful in ES6 modules where no reference to the yfiles top-level namespace is required anymore.
The new yfiles.lang.License object has a value property that can be set to the license values. This alternative way of setting the license data is especially useful in ES6-style code where no reference to yfiles is required anymore.
Errors thrown during the execution of the default implementations of ICommand.SAVE and ICommand.OPEN can now be caught by setting an error handler function to the yfiles.lang.Exception.handler property.
The IEnumerable.reduce method now uses the same argument order and semantics as the default Array.prototype.reduce method.
Rect and Size: Added methods to reduce the size of a Rect and a Size instance, respectively.
The new method GeneralPath.intersects(GeneralPath) determines whether the path intersects with another GeneralPath.
Saving a GraphML file now works in Safari 10.1 and 11 on macOS.
When reading GraphML with the deserialization property IGNORE_XAML_DESERIALIZATION_ERRORS enabled, invalid property content is now skipped instead of discarding the whole object with such content.
The GraphMLSupport.graphMLIOHandler property is initialized with a GraphMLIOHandler instance.
Graph
The default value of DefaultPortCandidate.locationParameter is now FreeNodePortLocationModel.NODE_CENTER_ANCHORED for nodes and BendAnchoredPortLocationModel.FIRST_BEND for edges instead of a parameter of an internal model.
Added a remove method to NodeDecorator, LabelDecorator, EdgeDecorator, PortDecorator, and BendDecorator for easy removal of decorations.
Many label model createParameter methods now have default values for parameters that are not needed every time.
InteriorStretchLabelModel: Added new parameters CENTER_HORIZONTAL and CENTER_VERTICAL for horizontal or vertical centered one-line labels.
The elementCopiedCallback or elementDuplicated parameter of the methods GraphCopier.copy and GraphClipboard.duplicate is now optional (and can be null).
DefaultGraph now fills the undo engine and triggers events in a consistent manner for all graph element factory methods.
DefaultGraph has new factory methods to customize undo unit creation.
The performance of GraphBuilder, TreeBuilder, and AdjacentNodesGraphBuilder was drastically improved if node and edge ID bindings are set. Additionally, these types have an improved API that makes it easier to customize the created and updated graph elements.
View
The new CanvasComponent.hitTestRadiusTouch property controls the hit test radius for touch interaction. The existing hitTestRadius property now only applies to mouse interaction. The ICanvasContext.HitTestRadius property automatically uses one or the other value, depending on the last input event.
The new CanvasComponent.dragSizeTouch property specifies the size of the area where a touch point may stay in before a movement is considered a drag. The existing dragSize property now only applies to mouse interaction.
Added the new CanvasComponent.limitFitContentZoom property which controls whether the maximum zoom level for the CanvasComponent.fitContent method as well as the fitContent command is restricted to 1 or the value of the maximumZoom property.
Akin to the two CanvasComponent.zoomTo methods, there are now two CanvasComponent.zoomToAnimatedmethods that animate the viewport change. The CanvasComponent.zoomToAnimated method now returns a Promise that fulfills when the viewport animation has finished.
The new CanvasComponent.updateVisualAsync method behaves like the invalidate method but yields a Promise that can be awaited for.
The new CanvasComponent.lastInputEvent property contains the lastMouseEvent or lastTouchEvent depending on which was dispatched last.
The CanvasComponent.cleanup method new removes all DOM children and attributes created during the lifetime of the CanvasComponent from its div element.
The CanvasComponent.sizeChangedTimerInterval property now is a proper TimeSpan instead of a simple number.
The new CanvasComponent.toWorldFromPage method converts from HTML page coordinates to world coordinates.
Improved styling of scrollbars and provided more CSS classes for different states of the scrollbar.
Improved zooming and scrolling behavior for touch pads in Chrome, Safari, Edge and Opera.
GraphModelManager now avoids unnecessary re-installation of items if they keep their ICanvasObjectGroup. By these re-installations the z-order of the item in its group was lost and a new visual was created.
The new method GraphModelManager.getMainCanvasObject returns the canvas object that should be used when changing the visibility or z-order of a model item.
ICanvasObjectGroup.addChild(Object,ICanvasObjectDescriptor): The second parameter is now an optional parameter. If no descriptor is passed, ICanvasObjectDescriptor.ALWAYS_DIRTY_INSTANCE is used by the default implementation.
Assigning a new graph instance to GraphOverviewComponent now keeps configuration changes made to the overview's IVisualCreator instance.
Self-loop edges are now properly displayed in the GraphOverviewComponent.
The new Animations.createSequentialAnimation method creates an animation that animates multiple animations in sequence.
Styles
PolylineEdgeStyle renders better looking paths for self-loop edges whose ports are near the node border.
The GeneralPath.createSmoothedPath method now has additional parameters to change how smoothing is applied. Those new options result in nicer smoothing when combined with large smoothing lengths and many different segment lengths of the path.
The stroke thickness is now considered for the calculation of the origin of the default arrow visualizations. Therefore, the visualizations no longer extend into the node bounds.
Template styles now search for binding converter functions in a static converter store object on the template type before checking the `window` object. This helps preventing pollution of the global scope.
Template styles can now bind to the current zoom level of the component.
Template styles now provide yfiles-selected, yfiles-highlighted and yfiles-focused CSS classes depending on their current state.
Some styles unnecessarily added empty SVG elements to the DOM.
New instances of SolidColorFill are now automatically frozen which can result in performance improvements. This type was already immutable anyway.
The new static methods Stroke.setStroke and Fill.setFill are null-safe replacements for the existing applyTo methods of Fill and Stroke.
Input
ItemClickedEventArgs now extends ClickEventArgs and therefore provides additional information like the IInputModeContext.
Added MouseEventRecognizers that recognize a current down state of a mouse button. These can be used to recognize ongoing gestures like drags, in contrast to recognizers for the actual mousedown event.
The static constants SELECTED_MOVABLES_POSITION_HANDLER and SELECTED_MOVABLES_HIT_TESTABLE have been added to GraphEditorInputMode. These are used as default IPositionHandler and IHitTestable properties of GraphEditorInputMode.moveInputMode and can be reused for other input modes.
The new GraphEditorInputMode.moveUnselectedInputMode property provides a child input mode for moving unselected items. It supersedes the previous createMoveUnselectedInputMode method. This input mode is disabled by default.
CreateEdgeInputMode now removes coinciding bends if orthogonal edge creation is enabled.
The new property CreateEdgeInputMode.prematureEndHitTestable allows for considering any location as valid target point for an edge.
The new CreateEdgeInputMode.getSourcePortCandidates protected method makes source port candidate determination more flexible.
CreateEdgeInputMode provides access to a dummy target node which is used during the interactive edge creation. This allows making the node visible during creation by setting a style and size.
CreateEdgeInputMode now supports edges ending without a valid target port candidate. This allows creating new target nodes together with a newly created edge.
During interactive edge creation, the tip of a newly created edge now only snaps to valid target port candidates to create orthogonal end segments.
The new CreateEdgeInputMode.dragCursor property specifies the cursor that is used during edge creation when no bend may be created at the current location.
CreateEdgeInputMode now always creates dummy ports during a gesture, instead of temporarily reusing real ports if available. This makes it possible to change, e.g. the dummy edge's source port's style during the gesture.
The new CreateEdgeInputMode.startOverCandidateOnly property can be used to restrict the start of an edge creation gesture to directly hovered port candidates.
CreateEdgeInputMode now supports showing port candidates at potential sources for edge creation, too.
Moving a node with the MoveInputMode for unselected nodes now moves the bends of incident self-loops, too.
MoveLabelInputMode: The visualization of a moved label has been improved. The new property visualization allows easy switching between a symbolic preview, a preview or a live view.
The new static methods PositionHandlers.combine combine multiple position handler instances into a single instance.
Added overridable methods to PortRelocationHandle to allow customization of the port candidates.
The new PortRelocationHandle.visualization property controls how the preview during edge reconnection is handled. A new option is to change the edge during the gesture, which improves fidelity of the preview in certain cases.
ClickInputMode now dispatches the clicked events in the same order as GraphInputMode, i.e. the more specific events LeftClicked, RightClicked, LeftDoubleClicked and RightDoubleClicked are now dispatched before Clicked and DoubleClicked. Hence, Clicked and DoubleClicked will only be triggered if the event wasn't handled before.
The events ItemTapped, ItemDoubleTapped, and CanvasTapped have been added to GraphInputMode.
The new TapEventArgs.tapCount property can be used to distinguish between single and multiple taps.
Added a originalEvent property to TapEventArgs and ClickEventArgs.
TouchEventArgs now provides the modifier keys that were pressed when the event was dispatched as well as those that have changed their state since the last TouchEventArgs.
The CanvasComponent.MouseClick event now reports the position of the mouse down event as its location, and the CanvasComponent.TouchClick event reports the location of the touch down event as its location. Previously, this was the location of the up events which can be slightly different.
The new properties MoveViewportInputMode.snapPanning and snapPanningThreshold allow for snapping touch panning to one axis.
The new optional content parameter of the MouseHoverInputMode.show method defines the content of the tool tip to show. Now, the getToolTipContent method only gets called if no content was specified.
The new methods findNextItem and findNearestItem of NavigationinputMode can be used to configure the determination of the "next" item.
The generic type parameter T of class ItemDropInputMode is no longer restricted to IModelItem.
Several improvements of the interactive label editing.
Improved the focus handling of the text box.
Other elements can now be added to the default text box, e.g. buttons.
A new factory method allows replacing the text box with a custom label editor.
The new TextEditorInputMode.textBoxPlacementPolicy property provides finer control of what happens when the TextBox is (partially) outside of the viewport.
The new TextEditorInputMode.TextBoxPadding property controls the padding between the text box and the border of the canvas.
The properties maximumSnapDistance, showHitPortOwnerCandidatesOnly and visualization have been added to PortRelocationHandleProvider and are applied to each PortRelocationHandle created by this provider.
The following input modes now release the mutex before dispatching their final event:
CreateEdgeInputMode now releases the mutex before dispatching the EdgeCreated event.
MoveInputMode now releases the mutex before dispatching the DragFinished event.
ResizeStripeInputMode now releases the mutex before dispatching the DragFinished event.
Table
The last parameter of the following extension methods of ITable is now optional: findRow, findColumn, findStripe, and findStripes.
TableEditorInputMode now handles clicks and taps similar to GraphEditorInputMode:
New ItemClicked, ItemLeftClicked, ItemRightClicked, ItemDoubleClicked, ItemLeftDoubleClicked, ItemRightDoubleClicked, ItemTapped, ItemDoubleTapped events are raised.
If an event is handled, its default behavior is prevented.
The new properties clickableItems and clickableRegions determine for which items and regions a click or tap event will be raised.
Layout and Algorithms
SmartEdgeLabelModel is properly handled by labeling algorithms now, resulting in better label placements.
The new LayoutExecutor.createLayoutGraphAdapter callback method makes it possible to configure the LayoutGraphAdapter that is used for the layout calculation.
The new improvePortAssignment property of LayoutExecutor and LayoutGraphAdapter enables PortCalculator to improve the port assignment.
Major performance improvement for EdgeRouter in routing scenarios where it is unavoidable to cross obstacles (e.g. other nodes or labels) in order to reach the target. This includes cases where a crossing is necessary to guarantee that port candidates/constraints at the target side are satisfied.
In addition, several minor performance improvements reduce the runtime of the path search phase as well as the segment location assignment phase.
EdgeRouter: Improved quality in maze routing scenarios. Previously, it could happen that edge-node overlaps occurred even though there exists a more complicated path that yields no overlaps.
The combination of PartitionGridData and TableLayoutConfigurator has been improved:
PartitionGridData now reuses the PartitionGrid created by the TableLayoutConfigurator.
Several methods have been added to TableLayoutConfigurator which provide access to the PartitionCellId assignment of the configurator as well as the mappings between IRow/IColumn and RowDescriptor/ColumnDescriptor.
BusRouter: Now automatically ignores non-orthogonal edges with fixed bus descriptor (see BusDescriptor.fixed) or transforms them into orthogonal edges if they are octilinear. In previous versions, the layout algorithm simply throws an error in such cases.
MultiPageLayout: Improved runtime as well as layout quality if the input is a tree structure and the specified coreLayout is either an instance of class TreeLayout or ClassicTreeLayout. Furthermore, property MultiPageLayout.additionalParentCount allows to specify the number of additional proxies that the algorithm tries to add to a subtree. The original nodes associated with these proxies lie on the path of the tree's root to the subtree placed on a page.
MultiPageLayout: Added property createProxyReferenceNodes that allows to disable the creation of proxy reference nodes as well as property multipleComponentsOnSinglePage that allows to prevent that elements of different connected components are placed on the same page.
PortPlacementStage now additionally considers port grouping constraints. If two edges are port-grouped at a certain node, the stage assigns the same port location to the edges. Port groups are marked using DataProviders registered with PortConstraintKeys.SOURCE_PORT_GROUP_ID_DP_KEY and PortConstraintKeys.TARGET_PORT_GROUP_ID_DP_KEY.
TreeComponentLayout: Added property considerUndirectedTreesthat allows to specify whether or not undirected tree structures should be handled or not. Previously, only directed tree structures were considered.
DefaultNodePlacer and SimpleNodePlacer now both support to specify a minimum distance between the edge segments that are routed orthogonally in the channel between the root node and the child nodes, see method DefaultNodePlacer.minimumChannelSegmentDistance and SimpleNodePlacer.minimumChannelSegmentDistance respectively.
ClassicTreeLayout now allows to specify a minimum vertical distance for the horizontal edge segments of the bus, see ClassicTreeLayout.minimumBusSegmentDistance.
The new properties layerConstraints and sequenceConstraints of HierarchicLayoutData can be used to configure layer and sequence constraints for the HierarchicLayout. These supersede the previous layerConstraintFactory and sequenceConstraintFactory properties.
Bugfixes
Graph and View
Corrected weird scrolling behavior of the scroll bar when the viewport was outside the content rectangle.
DefaultGraph now calls the onRemovingEdge and onRemovingPort methods before their incident items are removed.
The GroupingSupport.hasGroupNodes method now returns only true if there are actually group nodes in the graph. Previously, it returned also true if there once were group nodes which had been removed in the meantime.
Undo units created by the execution of a layout algorithm are now correctly merged with undo units of the previously executed interactive gesture.
The graph of IFoldingView.graph now raises the NodeCreated, EdgeCreated, PortAdded, LabelAdded, and BendAdded events after the created element is registered. This fixes a bug where the master item of the created item was not available in handlers for these events.
Sometimes, the GroupNodeDefaults.Labels.AutoAdjustPreferredSize property and the GroupNodeDefaults.Ports.AutoCleanup property were not considered for labels and ports of groups.
The commands COPY, CUT, and DUPLICATE are no longer enabled if there are no elements to cut, copy, or duplicate.
The ICommand.COPY command is no longer executed twice.
The methods GraphClipboard.copy and GraphClipboard.cut don't copy items anymore which depend on items that are selected but not included in GraphClipboard.copyItems.
The InteriorStretchLabelModel.getMinimumNodeSize method now uses the correct insets for width calculation. Previously the top insets were erroneously used for the width.
Labels rendered using DefaultLabelStyle and TextRenderSupport now properly consider the ascent for the first line of text and are thus rendered in a slightly higher location than before.
BevelNodeStyleRenderer, PanelNodeStyleRenderer, ShadowNodeStyleDecorator and ShinyPlateNodeStyleRenderer now consider the shadow in their isVisible and getBounds methods.
GraphML serialization: Write the IconLabelStyle.wrapped property with the correct name.
The GraphML compatibility layer can now deserialize ports placed with AnchoredPortLocationModel of yFiles for HTML 1.x.
Input
GraphEditorInputMode and GraphViewerInputMode no longer ignore changes to their sub-input modes after having been installed once.
The KeyEventRecognizers SHIFT_IS_DOWN, ALT_IS_DOWN and CTRL_IS_DOWN now also recognize the modifier for touch events.
The following event recognizer of input modes and input-related classes can now also be used with touch gestures:
CreateBendInputMode.splitOrthogonalSegmentRecognizer.
ResizeStripeInputMode.resizeNeighborsRecognizer and ignoreContentRecognizer.
CreateEdgeInputMode.portCandidateResolutionRecognizer and enforceBendCreationRecognizer.
GraphInputMode.multiSelectionRecognizer.
TableEditorInputMode.multiSelectionRecognizer.
ReparentNodeHandler.reparentRecognizer.
PortRelocationHandle.portCandidateResolutionRecognizer.
The hitTestRadius property of the following implementations of ICanvasContext now correctly contain the value in world coordinates instead of view coordinates:
The context created by ICanvasContext.createCanvasContext when passing a CanvasComponent but no hit test radius.
The context passed to IPositionHandlers by MoveInputMode.
The context passed to adjacent handles when moving a bend handle.
The context passed to callback parameter in the IRenderContext.setDisposeCallback method.
Disabling MarqueeSelectioninputMode during the gesture via code left the marquee visible on the screen.
Panning with two fingers held down does no longer change the zoom level.
The Clicked and DoubleClicked events of ClickInputMode were sometimes missing when clicking on a node or edge. Now, they are always triggered unless the event was handled before.
Changing the values of the CreateEdgeInputMode.dummyEdgeGraph.edgeDefaults property had no effect for some interactions.
Node-to-edge snapping is now disabled by default which is the documented and intended value. For this, the initial value of the GraphSnapContext.nodeToEdgeDistance property is set to -1.0.
Snap lines which indicate the same size are no longer shown for implicitly re-sized parent group nodes.
The default implementation of IPortSnapResultProvider never returned any snap results.
The LabelEditingEventArgs.context.parentInputMode property provided in the events GraphEditorInputMode.LabelAdding, GraphEditorInputMode.LabelEditing, TableEditorInputMode.LabelAdding and TableEditorInputMode.LabelEditing now contains the corresponding GraphEditorInputMode or TableEditorInputMode instance.
The CreateEdgeInputMode.cancelGestureoninvalidTarget property was sometimes ignored on touch-enabled devices.
CreateEdgeInputMode: The validBeginCursor is now correctly hidden during edge creation when bend creation isn't allowed.
Fixed an exception when enabling TextEditorInputMode.rotateTextBox.
Pen input was not handled at all on Android devices. Now, it is treated as mouse input.
Table
When a stripe is removed, ITable.LabelRemoved events for the implicitly removed associated labels are now raised, too.
When a selected stripe label is edited its text box now is correctly placed.
ReparentStripePositionHandler: The source and target ghost visualization was not always updated correctly when custom ghosts were used.
Selected stripe labels no longer remain selected after their owning stripe is deleted.
Selected stripe labels no longer cause exceptions when hovering over them.
The selection indicator for selected stripe labels is now shown correctly.
The implementations of IStripeHitTestHelper and IBoundsProvider in the lookup of an IStripe could neither be decorated nor overridden by the context lookup provided by a stripe style.
Layout
Corrected an error in the Rectangle2D.contains(Rectangle2D) method. As a consequence of this error, the results of various algorithms and automatic layouts could have been wrong.
HierarchicLayout: Fixed problem that sometimes caused an unnecessarily large distance between adjacent layers.
OrthogonalLayout now considers edge grouping also if there are no directed edges specified.
Only for V.I.P
Warning! You are not allowed to view this text.