How to add the text block as shown in the diagram

GoJS
1

text.png1366×768 2.78 KB

How to add the text block like this in single line instead of multi line when selected, after unselection also it should display whole text in single line as shown in diagram.

2

Did you start with the node template used in the Dynamic Ports sample, Dynamic Ports ?

If so, did you remove the TextBlock from “the body”? You must have left the Rectangle Shape, but I hope you also removed the useless Panel surrounding the Shape, since there’s no point in having an “Auto” Panel with only one element in it.

How did you put the TextBlock below the node? I hope you surrounded what had been the whole node panel with a new Node panel that is of “Spot” type, with the first element being the original “Table” Panel and the second element being your new TextBlock. You’ll need to move the properties and bindings for Node or Part up to the new Node element.

By default a TextBlock has no limit on its width, so it will be a long line if it has that much text in it. GoJS Sizing of GraphObjects -- Northwoods Software

3

Yes, am using dynamic ports i combined dynamic ports and logic gates examples and this is the code for node template

myDiagram.nodeTemplate =
  $(go.Node, "Table",
    { locationObjectName: "BODY",
      locationSpot: go.Spot.Center,
      selectionObjectName: "BODY",
      contextMenu: nodeMenu
    },
    new go.Binding("location", "loc", go.Point.parse).makeTwoWay(go.Point.stringify),

    // the body
    $(go.Panel, "Auto",
      { row: 1, column: 1, name: "BODY",
        stretch: go.GraphObject.Fill },
      $(go.Shape, "Rectangle",
        { fill: "#AC193D", stroke: null, strokeWidth: 0,
          minSize: new go.Size(56, 56) }),
      $(go.TextBlock,
        { margin: 10, textAlign: "center", font: "14px  Segoe UI,sans-serif", stroke: "white", editable: true },
        new go.Binding("text", "name").makeTwoWay())
    ),  // end Auto Panel body
4

I suggest that you do what I described above.