TextBlock Underline Thickness

GoJS
1

Hi

The underline produced on a TextBlock, when setting isUnderline to true, is quite thick.

See:

Is there anyway to control this thickness?

Thanks
Justin

2

You can’t currently control the thickness but that does seem quite “off”, what’s the font you’re using for those textblocks?

3

Hi Simon

For the rectangle I’m using “italic bold 16px Arial, sans-serif” and for the actor shape I’m using “bold 12px sans-serif”

After further testing, it appears the thickness of the underline is inherited from the strokeWidth value of the containing shape. (Which i’m guessing is a bug?)

See:

Here’s the template code:

function createStandardTextBlock(properties)
{
    return $m(go.TextBlock,
             new go.Binding("text", "text"),
             new go.Binding("stroke", "foreground"),                 
             new go.Binding("font", "font"),
             new go.Binding("isUnderline", "underline"),
             { margin: 4 },
             properties != null ? properties : {}
        );
}
    
//Define Process Node Templates
var processNodeTemplate =
   $m(go.Node, "Auto",
       { portId: "", height: 90, width: 135, padding: 1, fromLinkable: false, toLinkable: false, locationSpot: go.Spot.Center },
       new go.Binding("location", "location", go.Point.parse), //the initial location of the node
       new go.Binding("width", "width"),
       new go.Binding("height", "height"),
       new go.Binding("opacity", "opacity"),
       $m(go.Panel, "Spot",               
           $m(go.Shape, "RoundedRectangle", //the node container   
                { fill: "white" },
                new go.Binding("figure", "figure"),
                new go.Binding("stroke", "stroke"),
                new go.Binding("strokeWidth", "strokeWidth"),
                new go.Binding("fill", "fill")
           ),
           createStandardTextBlock(), //the name of the process
           $m(go.Shape,
                {
                    name: "topPort",
                    width: 6, height: 6, portId: "T", fill: "white",
                    alignment: go.Spot.TopCenter, alignmentFocus: go.Spot.Top, fromSpot: go.Spot.MiddleTop, toSpot: go.Spot.MiddleTop,
                    visible: false
                }),
           $m(go.Shape,
                {
                    name: "rightPort",
                    width: 6, height: 6, portId: "R", fill: "white",
                    alignment: go.Spot.RightCenter, alignmentFocus: go.Spot.Right, fromSpot: go.Spot.MiddleRight, toSpot: go.Spot.MiddleRight,
                    visible: false
                }),
           $m(go.Shape,
                {
                    name: "bottomPort",
                    width: 6, height: 6, portId: "B", fill: "white",
                    alignment: go.Spot.BottomCenter, alignmentFocus: go.Spot.Bottom, fromSpot: go.Spot.MiddleBottom, toSpot: go.Spot.MiddleBottom,
                    visible: false
                }),
           $m(go.Shape,
                {
                    name: "leftPort",
                    width: 6, height: 6, portId: "L", fill: "white",
                    alignment: go.Spot.LeftCenter, alignmentFocus: go.Spot.Left, fromSpot: go.Spot.MiddleLeft, toSpot: go.Spot.MiddleLeft,
                    visible: false
                })
       ),
       {
           mouseEnter: function (e, obj, prev) {
               obj.part.findObject("topPort").visible = true;
               obj.part.findObject("rightPort").visible = true;
               obj.part.findObject("bottomPort").visible = true;
               obj.part.findObject("leftPort").visible = true;
           },
           mouseLeave: function (e, obj, prev) {
               obj.part.findObject("topPort").visible = false;
               obj.part.findObject("rightPort").visible = false;
               obj.part.findObject("bottomPort").visible = false;
               obj.part.findObject("leftPort").visible = false;
           }
       }
   );

Thanks
Justin

4

Oh, wow. Yep that’s a bug.

This is fixed and will be out with the next release. Thanks for your help.

5

Thanks, Simon, no problem