GoJS manual resizeable comment

We used Flowchart as a starting point some 5 years ago, which looked however a little bit different.

We would like to have the possibility of comment blocks to be manually resizable, so that the text is displayed on one line for easier viewing.

Is it possible to create a manual resizable comment, can you please provide us with some code.

question_comment_resize

To enable the ResizingTool for a particular Node, set Part.resizable to true.

Optionally also set Part.resizeObjectName to the name of the element that you want the user to resize. I don’t think you want that in this case, so you don’t need to set that – it will default to resizing the whole Node.

But I think you will also want to save and restore the size of the Node. You can do that by adding a Binding on the GraphObject.desiredSize property. Make it a TwoWay Binding so that the user’s/ResizingTool’s changes to that property get saved in the model data.

So just insert two lines in that “Comment” template:

    myDiagram.nodeTemplateMap.add("Comment",
      $(go.Node, "Auto", nodeStyle(),
        { resizable: true },
        new go.Binding("desiredSize", "size", go.Size.parse).makeTwoWay(go.Size.stringify),
        . . .


Hi Walter

Worked great,

Had to set maxSize to “NaN,NaN” to allow “auto flowing”.

    nodeTemplateMap.add('Comment',
      gm(go.Node, 'Auto', nodeStyle(),
        { resizable: true },
        new go.Binding("desiredSize", "size", go.Size.parse).makeTwoWay(go.Size.stringify),
        gm(go.Shape, 'File',
          { fill: 'yellow', stroke: null }),
        gm(go.TextBlock,
          {
            margin: 5,
            maxSize: new go.Size(NaN, NaN),
            wrap: go.TextBlock.WrapFit,
            textAlign: 'center',
            editable: true,
            font: 'bold 11pt Helvetica, Arial, sans-serif',
            stroke: '#454545'
          },
          new go.Binding('text').makeTwoWay())
        // no ports, because no links are allowed to connect with a comment
      ));

Thanks