Label Sizes and Zooming
TroubleshootingSummary
Description
Due to precision issues that can occur with font size measurements at different zoom levels, the auto-calculated size of node- or edge labels may sometimes not exactly match the size of the rendered label text. Although yFiles FLEX already adds a safety margin to the calculated preferred label size, label strings may still be clipped at certain combinations of zoom level, font size and font family.
This article explains various approaches for preventing cropped labels.
Using ISimpleLabelStyle.clipText
The clipText property of ISimpleLabelStyle determines whether full words will be hidden if the label size is too small (true, the default), or
the text will exceed the label's bounds (false).
false efficiently prevents label text from being clipped.Using an embedded font
While system fonts are scaled by setting the font size, embedded fonts are scaled using transformation. Thus an embedded font will always be scaled more accurate than a system font. See also: Fonts are not displayed correctly
Increasing the preferred size when the graph is loaded
To increase the preferred label sizes of all labels just after a graph has been loaded, an event listener can be added to the GraphMLIOHandler that is used for parsing the graph:
override protected function createReadWriteHandler():RoundtripHandler {
..
roundtripHandler.inputIOHandler.addEventListener(
GraphEvent.GRAPH_CHANGED,onGraphLoaded);
return roundtripHandler;
}
In the event listener function, increase the preferred label sizes:
private function onGraphLoaded( evt:GraphEvent ):void {
var g:IGraph = evt.graph;
var it:Iterator;
var label:ILabel;
it = g.nodeLabels.iterator();
while( it.hasNext() ) {
label = ILabel( it.next() );
g.setPreferredSize( label, label.preferredSize.width + 5, label.preferredSize.height + 5 );
}
it = g.edgeLabels.iterator();
while( it.hasNext() ) {
label = ILabel( it.next() );
g.setPreferredSize( label, label.preferredSize.width + 5, label.preferredSize.height + 5 );
}
}
Increasing the preferred size by overriding _getPreferredSize
The default implementation of SimpleLabelStyleRenderer._getPreferredSize
already increases the measured text size by a certain amount. This behavior can be modified by
overriding _getPreferredSize and using custom margins.
The default implementation uses the following formula:
override protected function _getPreferredSize():ISize {
var origSize:ISize = _getPreferredSizeCore();
var w:Number = origSize.width;
var fontSize:Number = Number( ISimpleLabelStyle( this.style ).textFormat.size);
if( w > 0 && fontSize > 4 ) {
var f:Number = 1 + 0.5 * ((fontSize / (fontSize - 1 )) - 1);
w *= f;
w += 2;
}
return ImmutableSize.create( w, origSize.height );
}