Multilevel inheritance of JavaScript classes, yFiles class framework
The yFiles class framework does not support multilevel class inheritance with JavaScript classes if one of the subclasses uses BaseClass.
The reason for this is as follows: BaseClass constructs an artificial anonymous class that calls its super constructor.
This is not possible with code that is compatible with ECMAScript 5, since the browser will throw an exception when class A is called as a regular function without new.
When using the development mode of the yFiles library, it will throw a meaningful error:
TypeInfoError: Class was not initialized. yFiles does not support multilevel inheritance of JavaScript classes together with BaseClass and interfaces.
Otherwise, the browser throws an exception: TypeError: Class constructor A cannot be invoked without 'new'.
Content Security Policy (CSP)
Setting a secure Content-Security-Policy requires an adjustment to ensure yFiles functions properly.
By default, yFiles loads its CSS styles by inserting a <style> element into the DOM.
yFiles relies on these styles to function properly.
However, the insertion of <style> elements is restricted if a content security policy is applied.
To allow the <style> element created by yFiles, add the SHA-265 hash value of the style content
to your policy with the unsafe-hashes setting. Note that despite its name, this setting ony indicates
that you trust the styles that are included in yFiles.
It’s not inherently unsafe, especially when used for styles rather than scripts.
The configuration might look like this:
Content-Security-Policy: style-src 'self' 'unsafe-hashes' 'sha256-yW7oemeAW9QjzU48j4BehjWFyOQbder0AF2Ce1Bdgrc='Alternatively, you can explicitly load the yfiles.css stylesheet. In this case, no <style> tag is added to the DOM
during the instantiation of a GraphComponent.
The stylesheet is included in the npm module, so you can either retrieve it from the node_modules directory
or extract it from the library archive file.
Graph panning and drag operations lag, Chrome
A bug in Chrome
results in lags during pan and drag operations when the mouse button is pressed.
As a workaround, the property cr570845 is set to 24 (fps) by default.
The property sets the rate at which dangling setTimeout operations
are flushed using requestAnimationFrame. Set the property to -1 to disable the workaround.
Missing visualizations when using SvgExport.encodeImagesBase64, Firefox
In Firefox, using SvgExport.encodeImagesBase64 with SVG images that do not have width and height properties
yields empty data URIs, hence missing the visualization.
To work around this Firefox behavior, make sure SVGs that are used in the diagram (e.g. with the
ImageNodeStyle) always have proper width and height attributes or enable SvgExport.inlineSvgImages.
Incorrect positioning of exported HtmlVisuals, Safari
The positioning of children of foreignObject elements is wrong in Safari/WebKit due to
this bug in Safari. The exported SVG is correct, though; just the
rendering is affected. Enabling rasterizeHtmlVisuals does not help because it will still
render the foreignObject elements with the same issues as part of the export.
Label text flickers or looks fragmented during zooming, Safari
Due to this bug in Safari, SVG text flickers or looks fragmented during zooming and animated size changes.
Unexpected mousemove events in Meta Quest browser
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 processing of input events by yFiles, and the input processing works as expected only with the other pointer events.
Therefore, we have added code to the demos that filters out such events on this browser.
Broken Web Components 1.0 implementation, Safari 10 and newer
The Web Components 1.0 standard implementation in Safari 10 and newer breaks rendering of non-trivial SVGs due
to a spec bug. Until this is resolved, we
recommend not to use yFiles for HTML inside a native web component. Either don’t use web components, switch to
canvas rendering instead, or move the GraphComponent outside of the Web Component hierarchy.
WebGL2 Rendering is not supported in old browsers
WebGL2 rendering is supported in all modern browsers, with the exception of Safari before version 15. In Safari 10-14, it is available as an experimental feature and needs to be enabled in the developer menu Experimental Features.
WebGLGroupNodeStyle and WebGLBridgeEdgeStyle are not rendered on iPad 6
On iPad 6 (2018) with iOs 15.6, elements styled with WebGLGroupNodeStyle or WebGLBridgeEdgeStyle are invisible. While the implementation can switch to a reduced version of the shaders for older devices, this specific device appears to provide incorrect information and remains undetectable. The iPad 6 is the only device on which issue occurred.
WebGLPolylineEdgeStyle cannot render smooth bends, Android
Polyline edges with smooth bends styled with WebGLPolylineEdgeStyle are rendered
without smoothing when the Android device does not have enough mediump precision.
WebGL2 items are sometimes invisible on Safari 14
On Safari 14, items, such as handles or graph items, are invisible when only a single type of items is being displayed at the same time. For example, if only handles or only nodes with WebGLShapeNodeStyle are being rendered, they may not appear on the screen. However, if two or more different item types are rendered simultaneously, the missing items will become visible again. This issue is not reproducible in Safari 15 and later versions.
Label text may occasionally fail to render when using WebGL2 rendering.
When rendering a large number of labels simultaneously with WebGL2, label text may not display correctly. This issue arises from GPU texture size limitations, which can prevent the creation of sufficiently large texture atlases required for high-quality text rendering. It primarily affects devices with constrained GPU resources, such as certain Android devices, where these limitations are more pronounced. To address this, implementing Level of Detail (LOD) rendering based on zoom levels can help reduce the number of labels rendered at lower zoom levels, improving performance and ensuring labels are displayed properly.