yFiles for HTML Tutorial 2 - Custom Styles

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.

Steps in this Tutorial

Name Description
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.