Position TextBlock by its center

GoJS
1

I have a TextBlock and a location point. How can I put the TextBlock’s center to the point in the template.
Thank you!

2

That depends on the rest of the node template. Could you please share with us how your node template is defined? You can leave out details of the template involving how the different pieces are implemented, as well as how it interacts with the user.

1 Like
3

@walter like this
$(go.Node, ‘Position’, {
visible : true,
itemArray : [],
itemTemplate:
$(
go.Panel,
‘Vertical’,
$(
go.TextBlock,
‘Position’,
new go.Binding(‘text’, ‘’, ({ text1 }) => (text1)),
{ alignment: go.Spot.TopCenter, textAlign: ‘center’, wrap: go.TextBlock.None, overflow: go.TextBlock.None
},
),
$(
go.TextBlock,
‘Position’,
new go.Binding(‘text’, ‘’, ({ text2 }) => (text2)),
{ alignment: go.Spot.BottomCenter, textAlign: ‘center’, wrap: go.TextBlock.None, overflow: go.TextBlock.None
},
),
new go.Binding(‘position’, ‘’, ({ position }) => new go.Point(position.x, position.y))
),
}
)

4

Use a “Spot” Panel and then set the TextBlock’s alignment to be where you want it to be. Perhaps something like new go.Spot(0, 0, x, y), where x and y are the position relative to the top-left corner of the panel that you want that TextBlock to be centered.
GoJS Panels -- Northwoods Software

5

@walter, If the panel is have width and height, and my textbox is wider than the width. If I want to align the center of text to the center panel. How can I do it?

6

Here’s an example of a “Spot” Panel that is also the Node:

  <script src="https://unpkg.com/gojs"></script>
  <script id="code">
const $ = go.GraphObject.make;

const myDiagram = new go.Diagram("myDiagramDiv");

myDiagram.nodeTemplate =
  $(go.Node, "Spot",
    $(go.Shape,
      { width: 80, height: 40, fill: "white" },
      new go.Binding("fill", "color")),
    $(go.TextBlock,
      new go.Binding("text"),
      new go.Binding("alignment", "spot", go.Spot.parse))
  );

myDiagram.model = new go.GraphLinksModel([
  { text: "Alpha alpha alpha", color: "coral" },
  { text: "Beta", color: "tomato", spot: "0.5 1" }
]);
  </script>

This produces:
image