Tutorial 2 - Custom Styles
This tutorial is a step-by-step guide to customizing the visual representation of graph elements. It shows the creation of custom styles for nodes, edges, labels, and ports. Moreover, it presents a custom arrowhead rendering, a customized edge selection, and a visual representation of graph elements that depends on the current application state. Finally, several optimization strategies are discussed.
It is intended for users who want to learn how to create custom styles from scratch. If you are new to styles, in particular to their customization, we recommend to start by going through the tutorial steps that show the basics one by one. Of the specialized topics, you can skip the ones that doesn't apply to your use case. To make full use of the tutorial, we recommend to review and possibly modify the source code of the sample projects.
Running a Tutorial Step
To execute a specific programming sample, either follow the corresponding link from the table below or open the file
index.html in the specific demo directory. It is also possible to deploy the samples to a web server
and load them from there.
These demos use ECMAScript 6 features that your browser does not support.
Please switch to a browser with support for ECMAScript 6 (Chrome, Firefox, Edge, Safari 10) or use the included deployment tool to convert the demos to ECMAScript 5. The converted demos are also available online.
Note that ECMAScript 6 is a requirement of the demos, only. The yFiles for HTML library itself is compatible with ECMAScript 5.
Due to strict cross domain policies in both Internet Explorer and Google Chrome, some demos work only partially or not at all when viewed from a filesystem location in these browsers. Therefore, it is recommended to access the demos through a Web server. Install and start scripts for a local Node.js Express server are included:
> cd %YFILES_HTML_DISTRIBUTION_DIR%/demos/demo-server/ > npm install > npm start
Google Chrome can also be instructed to use a more tolerant policy by starting
chrome.exe with the
--allow-file-access-from-files command line option. In addition, all demos are available online.
In Firefox, the demos should run well from a filesystem location, since its cross domain policy is tolerant by default.
Steps in this Tutorial
|01 Custom Node Style||Shows how to create a custom node style.|
|02 Node Color||Shows how to change a style dependent on the nodes yfiles.graph.ITagOwner#tag.|
|03 UpdateVisual and RenderDataCache||Shows how to implement high-performance rendering of nodes.|
|04 IsInside||Shows how to override isInside() and getOutline() of yfiles.styles.NodeStyleBase.|
|05 Hit Test||Shows how to override isHit() and isInBox() of yfiles.styles.NodeStyleBase.|
|06 GetBounds||Shows how to override getBounds() of yfiles.styles.NodeStyleBase.|
|07 Dropshadow Performance||Replaces the simple drop shadow in the last steps with a more visually appealing, blurred one.|
|08 Edge From Node To Label||Shows how to visually connect a label to its owner node with a line.|
|09 IsVisible||Shows how to override the method isVisible() of yfiles.styles.NodeStyleBase.|
|10 Custom Label Style||Shows how a custom label style.|
|11 Label Preferred Size||Shows how to set the size of the label dependent on the size of its text by overriding the yfiles.styles.LabelStyleBase#getPreferredSize() method.|
|12 High Performance Rendering Of Label||Shows how to implement high-performance rendering for labels.|
|13 Label Edit Button||Shows how to display a button on a label that starts the label editor.|
|14 Button Visibility||Shows how to hide the 'Label Edit' button based on the zoom level.|
|15 Using Data In Label Tag||Shows how to use data from a business object, which is stored in the label's tag, for rendering.|
|16 Custom Edge Style||Shows how to create a custom edge style which allows to specify the edge thickness by setting a property on the style.|
|17 Edge Hit Test||Shows how to take the thickness of the edge into account when checking if the edge was clicked.|
|18 Edge Cropping||Shows how to crop an edge at the node's bounds.|
|19 Animated Edge Selection||Shows how to change the style of an edge if the edge is selected.|
|20 Custom Arrow||Shows a custom arrow.|
|21 Edge Performance||Shows how to optimize rendering performance for edges and arrows.|
|22 Arrow Thickness||Shows how to render the arrow dependent on a property of its edge.|
|23 Custom Ports||Shows a custom port style.|
|24 Style Decorator||Shows how to enhance an existing node style by adding visual decorators.|
|25 Custom Group Style||Shows a special node style for group nodes.|
|26 Custom Group Bounds||Shows how to customize the way the group insets are calculated by implementing a yfiles.layout.IGroupBoundsCalculator.|
|27 Canvas Painting||Shows how to implement a zoom-dependent high-performance rendering using HTML5 Canvas painting for nodes.|
|28 Bridge Support||Shows how to enable bridges for a custom edge style.|
|29 Label Line Wrapping||Shows how to enhance a custom label style to support different line wrapping (trimming) styles as well as text clipping at the label bounds.|