TextBlock wrapping in the middle of a word

GoJS
1

I have a node with a title textblock under the main shape. When I edit the title , I don’t mind it wrapping words, but I dont want to cut words in half.

This is what is happening.

image

I can of course resize the whole node and that fixes it , but I would prefer the textBlock to stretch when a word doesn’t fit. At the moment it appears to only be stretching vertically, but it needs to stertch horizontally as well to cater for long words. I’ve tried lots of options on the textBlock but I can’t get it working.

Here is my code:

<!DOCTYPE html>
<html lang="en">
<head>

    <meta charset="utf-8"/>


    <script src="https://unpkg.com/gojs/release/go-debug.js"></script>
<script>

function init() {

  var $ = go.GraphObject.make;  // for conciseness in defining templates

  var diagram = $(go.Diagram, "myDiagramDiv"
                            , {
                                allowDrop: true
                              , allowDelete: true
                              , allowCopy: true
                              , "grid.visible": true
                              }
                          );


  var nodeTemplate =
    $(go.Node, "Spot",  // the whole node panel
      {
        selectionAdorned: true
        , resizable: true
        , resizeObjectName: "PORTSHAPE"
      }
      , $(go.Shape, "Rectangle",
        {
          name: "PORTSHAPE"
          , fill: "lightgray"
          , strokeWidth: 2
          , portId: ""
          , cursor: "crosshair"
          , fromLinkable: true, fromLinkableDuplicates: true
          , toLinkable: true, toLinkableDuplicates: true
          , fromSpot: go.Spot.AllSides
          , toSpot: go.Spot.AllSides
        }
      )
      , $(go.Panel, 
        {
            name: "CONTENTPANEL"
          , background: "lightblue"
          , stretch: go.GraphObject.Fill
          , margin: 10
        }
      )
      , $(go.TextBlock,
        {
          name: "TitleTextBlock"
          , alignment: new go.Spot(.5, 1, 0, 5)
          , alignmentFocus: go.Spot.Top
          , textAlign: "center"
          , font: "bold 16px sans-serif"
          , editable: true
          , text: "some node title"
          , background: "white"
        }
        , new go.Binding("text", "title")
      )
    );  // end Node


  let linkTemplate =
        $(go.Link
          , { 
              toShortLength: 6, toEndSegmentLength: 20
            , layerName: "Background"
            }
          , $(go.Shape,
            { strokeWidth: 4
            }

          )
          , $(go.Shape,  // arrowhead
            { toArrow: "Triangle", stroke: null, scale: 1.5 }
          )
        );

      diagram.nodeTemplate = nodeTemplate;
      diagram.linkTemplate = linkTemplate;

      var nodeDataArray = [
        { key: "Alpha", title: "Alpha"},
        { key: "Beta", title: "A long titledescription" }
      ];


      var linkDataArray = [
        { from: "Alpha"     , to: "Beta"}
      ];

      diagram.model = new go.GraphLinksModel( nodeDataArray, linkDataArray );




    }

    window.addEventListener('DOMContentLoaded', init);

</script>

</head>

<body>
  <div id="myDiagramDiv" style="border: solid 1px blue; width:1000px; height:1000px"></div>
</body>

</html>
2

In order for text to wrap, not due to newline characters, there has to be a limit on the width. Either you set or bind the width (or desiredSize) or maxSize, or its Panel has to constrain the TextBlock.

In your code, I do not see any such width constraint, so I do not see why the text should wrap at all.

3

My thoughts exactly. Hence my confusion. But I’ve given you the full code listing, and if you look at the picture you can clearly see the text is wrapping. So something must be causing it.

4

We’ll look into this tomorrow.

5

Thank you for pointing this out. This is a bug, where a stretched object in Spot panel would accidentally set the max size for items that came afterward in the panel (in this case, the TextBlock). This will be fixed in the next release, which we will build soon, probably today or tomorrow.

6

We have just released GoJS 2.2.3, which has a fix for this bug.

7

Thanks Walter