Group header text sometimes overflow

Michael101sh · August 31, 2023, 2:26pm

Hello,
Sometimes, it’s not clear when exactly, the Group header text overflows.

The code:

go.Group,
'Vertical',
{
	avoidable: false,
	fromSpot: go.Spot.LeftRightSides,
	toSpot: go.Spot.LeftRightSides,
	ungroupable: true,
	selectionAdorned: false,
		
	layout: $(AlignedLayeredDigraphLayout, {
		columnSpacing: 15,
		layerSpacing: 100,
		linkSpacing: 150,
		layeringOption: go.LayeredDigraphLayout.LayerOptimalLinkLength,
		aggressiveOption: go.LayeredDigraphLayout.AggressiveMore,
		initializeOption: go.LayeredDigraphLayout.InitDepthFirstIn,
		packOption: go.LayeredDigraphLayout.PackStraighten,
		setsPortSpots: false,
		isRealtime: false,
	}),
...
      $(
		go.TextBlock,
		{
			alignment: go.Spot.Left,
			editable: false,
			isMultiline: false,
			maxSize: new go.Size(150, 50),
			maxLines: 1,
			margin: 3,
			font: topologyHeaderFont,
			stroke: headerTextColor,
			overflow: go.TextBlock.OverflowEllipsis,
		},
		new go.Binding('text', 'label')
	),
	new go.Binding('background', 'isExceptionEntity', (isExceptionEntity) =>
		isExceptionEntity === 'true' ? exceptionGroupHeaderBackground : groupHeaderBackground
	)

Screenshot of overflow:
text overflow

Screenshot of not overflow (I didn’t drag or something):
text not overflow

I would appreciate your assistance.
Regards,
Michael

walter · August 31, 2023, 2:41pm

That’s odd. Could you please show us the whole Group template?

Michael101sh · August 31, 2023, 3:29pm

Here:


$(
	go.Panel,
	'Vertical',
	{ name: 'GroupHeader', cursor: 'pointer' }, },
	$(
		go.Panel,
		'Horizontal',
		{
			stretch: go.GraphObject.Horizontal,
			padding: 4,
		},
		$(
			go.Picture,
			new go.Binding('source', 'images', (e) => {
				if (e[0]) return e[0].slice(4, e[0].length);
				return '';
			})
		),
		$(
			go.Picture,
			new go.Binding('source', 'images', (e) => {
				if (e[1]) return e[1].slice(4, e[1].length);
				return '';
			})
		),
		$(
			go.TextBlock,
			{
				alignment: go.Spot.Left,
				editable: false,
				isMultiline: false,
				maxSize: new go.Size(150, 50),
				maxLines: 1,
				margin: 3,
				font: topologyHeaderFont,
				stroke: headerTextColor,
				overflow: go.TextBlock.OverflowEllipsis,
			},
			new go.Binding('text', 'label')
		),
		new go.Binding('background', 'isExceptionEntity', (isExceptionEntity) =>
			isExceptionEntity === 'true' ? exceptionGroupHeaderBackground : groupHeaderBackground
		)
	), // end Horizontal Panel
	$(
		go.Panel,
		'Auto',
		{
			opacity: 0.6,
			stretch: go.GraphObject.Horizontal,
		},
		$(
			go.Shape,
			'Rectangle',
			{
				// the rectangular shape around the members
				name: 'GroupShape',
			},
			new go.Binding('fill', 'isExceptionEntity', (isExceptionEntity) =>
				isExceptionEntity === 'true' ? exceptionGroupContentBackground : groupContentBackground
			),
			new go.Binding('stroke', 'isExceptionEntity', (isExceptionEntity) => {
				if (isExceptionEntity === 'true') {
					return mainRedColor;
				}
				return mainBlueColor;
			})
		),
		$(
			go.Panel,
			'Vertical',
			{
				defaultAlignment: go.Spot.Center,
			},
			$(go.Placeholder, {
				margin: go.Margin.parse('10 10 10 10'),
				alignment: go.Spot.Center,
			})
		)
	)
), // end Vertical Panel

{
	toolTip: $(
		go.Adornment,
		'Auto',
		$(go.Shape, { fill: tooltipBackground }),
		$(go.TextBlock, { margin: 4 }, new go.Binding('text', '', groupInfo).ofObject())
	),
	contextMenu: contextMenuElementRef.current,
}

walter · August 31, 2023, 3:44pm

That can’t be the whole group template – I don’t see it making a Group.

Michael101sh · August 31, 2023, 3:48pm

I have added the rest code under the group creation code I attached in the original post.

walter · August 31, 2023, 4:03pm

I’m still unable to get a complete definition of your group template.

Michael101sh · August 31, 2023, 5:37pm

The whole template:

go.Group,
'Vertical',
{
	avoidable: false,
	fromSpot: go.Spot.LeftRightSides,
	toSpot: go.Spot.LeftRightSides,
	ungroupable: true,
	selectionAdorned: false,
		
	layout: $(AlignedLayeredDigraphLayout, {
		columnSpacing: 15,
		layerSpacing: 100,
		linkSpacing: 150,
		layeringOption: go.LayeredDigraphLayout.LayerOptimalLinkLength,
		aggressiveOption: go.LayeredDigraphLayout.AggressiveMore,
		initializeOption: go.LayeredDigraphLayout.InitDepthFirstIn,
		packOption: go.LayeredDigraphLayout.PackStraighten,
		setsPortSpots: false,
		isRealtime: false,
	}),
$(
	go.Panel,
	'Vertical',
	{ name: 'GroupHeader', cursor: 'pointer' }, },
	$(
		go.Panel,
		'Horizontal',
		{
			stretch: go.GraphObject.Horizontal,
			padding: 4,
		},
		$(
			go.Picture,
			new go.Binding('source', 'images', (e) => {
				if (e[0]) return e[0].slice(4, e[0].length);
				return '';
			})
		),
		$(
			go.Picture,
			new go.Binding('source', 'images', (e) => {
				if (e[1]) return e[1].slice(4, e[1].length);
				return '';
			})
		),
		$(
			go.TextBlock,
			{
				alignment: go.Spot.Left,
				editable: false,
				isMultiline: false,
				maxSize: new go.Size(150, 50),
				maxLines: 1,
				margin: 3,
				font: topologyHeaderFont,
				stroke: headerTextColor,
				overflow: go.TextBlock.OverflowEllipsis,
			},
			new go.Binding('text', 'label')
		),
		new go.Binding('background', 'isExceptionEntity', (isExceptionEntity) =>
			isExceptionEntity === 'true' ? exceptionGroupHeaderBackground : groupHeaderBackground
		)
	), // end Horizontal Panel
	$(
		go.Panel,
		'Auto',
		{
			opacity: 0.6,
			stretch: go.GraphObject.Horizontal,
		},
		$(
			go.Shape,
			'Rectangle',
			{
				// the rectangular shape around the members
				name: 'GroupShape',
			},
			new go.Binding('fill', 'isExceptionEntity', (isExceptionEntity) =>
				isExceptionEntity === 'true' ? exceptionGroupContentBackground : groupContentBackground
			),
			new go.Binding('stroke', 'isExceptionEntity', (isExceptionEntity) => {
				if (isExceptionEntity === 'true') {
					return mainRedColor;
				}
				return mainBlueColor;
			})
		),
		$(
			go.Panel,
			'Vertical',
			{
				defaultAlignment: go.Spot.Center,
			},
			$(go.Placeholder, {
				margin: go.Margin.parse('10 10 10 10'),
				alignment: go.Spot.Center,
			})
		)
	)
), // end Vertical Panel

{
	toolTip: $(
		go.Adornment,
		'Auto',
		$(go.Shape, { fill: tooltipBackground }),
		$(go.TextBlock, { margin: 4 }, new go.Binding('text', '', groupInfo).ofObject())
	),
	contextMenu: contextMenuElementRef.current,
}

Is it ok now?

walter · August 31, 2023, 6:09pm

Actually, there were still a lot of syntax problems.

You want to set the width and height of each of the Pictures.

I haven’t been able to reproduce any text “overflow” problem. Is there any way you could provide a stand-alone sample (don’t include app-specific stuff) that demonstrates the problem?

Michael101sh · August 31, 2023, 6:37pm

Thanks for your answer.
Unfortunately I don’t know how to reproduce the situation, even not in our specific code.

walter · August 31, 2023, 6:51pm

Are you saying that you cannot reproduce the problem reliably in your app?

When you can (perhaps with multiple tries fiddling around), try setting the GraphObject.background of various relevant objects to different values. This is just for debugging. Use garish colors such as “lime”, “cyan”, “magenta” as the background for the group header TextBlock, its containing Panel, and for the whole Group. Then when you see the problem, or maybe even before, you’ll see that something is bigger than you expected and that might help you narrow down the problem.

But first, as I suggested above, I think you should set the Picture’s width and height.

Michael101sh · September 12, 2023, 12:07pm

Yes, it happens rarely sometimes somehow.

Interesting method to debug it.

Ok, I’ll do it, thanks.

Michael101sh · September 12, 2023, 12:26pm

Something very weird happened to the Links after I have added size to the group icons, like this:
maxSize: new go.Size(24, 24).

This is before:

And this is after:

walter · September 12, 2023, 12:57pm

No, set the Picture.width and height, or the Picture.desiredSize, not its maxSize.

Try using the latest release, 2.3.11.

Michael101sh · September 12, 2023, 1:11pm

desiredSize also makes it.
I used maxSize, because there are cases with 2 pictures and cases with only 1 picture.
desiredSize will left an empty space in the second picture despite of no picture.

Another solution?

I tried to update to 2.3.11 (from 2.3.2) and now the links are like the After screenshot, even without maxSize / desiredSize.

walter · September 12, 2023, 1:29pm

Do your links have Link.routing set to go.Link.AvoidsNodes? If so, you probably want to set Group.avoidable to false so that the links don’t try to “avoid” the groups.

Michael101sh · September 12, 2023, 1:57pm

Yes, I have routing: go.Link.AvoidsNodes in the link template
and I have already avoidable: false in the group template

walter · September 12, 2023, 2:36pm

When I try it, I get:

My complete code:

<!DOCTYPE html>
<html>
<head>
  <title>Minimal GoJS Sample</title>
  <!-- Copyright 1998-2023 by Northwoods Software Corporation. -->
</head>
<body>
  <div id="myDiagramDiv" style="border: solid 1px black; width:100%; height:400px"></div>
  <textarea id="mySavedModel" style="width:100%;height:250px"></textarea>

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

const myDiagram =
  new go.Diagram("myDiagramDiv",
    {
      "undoManager.isEnabled": true,
      "ModelChanged": e => {     // just for demonstration purposes,
        if (e.isTransactionFinished) {  // show the model data in the page's TextArea
          document.getElementById("mySavedModel").textContent = e.model.toJson();
        }
      }
    });

myDiagram.nodeTemplate =
  $(go.Node, "Auto",
    $(go.Shape, { fill: "white" },
      new go.Binding("fill", "color")),
    $(go.TextBlock, { margin: 8 },
      new go.Binding("text"))
  );

myDiagram.groupTemplate =
  $(go.Group, "Auto",
    {
      avoidable: false,
      layout: $(go.LayeredDigraphLayout, { direction: 90 })
    },
    $(go.Shape, { fill: "white" }),
    $(go.Placeholder, { padding: 10 })
  );

myDiagram.linkTemplate =
  $(go.Link,
    { routing: go.Link.AvoidsNodes, corner: 10 },
    $(go.Shape),
    $(go.Shape, { toArrow: "Standard" })
  );

myDiagram.model = new go.GraphLinksModel(
[
  { key: -1, isGroup: true },
  { key: -2, isGroup: true, group: -1 },
  { key: -3, isGroup: true, group: -2 },
  { key: -4, isGroup: true, group: -3 },
  { key: 3, text: "Gamma", color: "lightgreen", group: -4 },
  { key: 4, text: "Delta", color: "pink", group: -4 },
  { key: 1, text: "Alpha", color: "lightblue", group: -3 },
  { key: 2, text: "Beta", color: "orange", group: -3 },
],
[
  { from: 3, to: 1 },
  { from: 4, to: 1 },
  { from: 3, to: 2 },
  { from: 4, to: 2 },
]);
  </script>
</body>
</html>

Michael101sh · September 12, 2023, 2:41pm

Ok, but you don’t have pictures.
Somehow giving size to the pictures makes damage to the links view (after dragging it’s rearranging and looks good, like the Before screenshot.

walter · September 12, 2023, 3:04pm

OK, here the groups have Pictures without any declared size.

<!DOCTYPE html>
<html>
<head>
  <title>Minimal GoJS Sample</title>
  <!-- Copyright 1998-2023 by Northwoods Software Corporation. -->
</head>
<body>
  <div id="myDiagramDiv" style="border: solid 1px black; width:100%; height:600px"></div>
  <textarea id="mySavedModel" style="width:100%;height:250px"></textarea>

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

const myDiagram =
  new go.Diagram("myDiagramDiv",
    {
      "undoManager.isEnabled": true,
      "ModelChanged": e => {     // just for demonstration purposes,
        if (e.isTransactionFinished) {  // show the model data in the page's TextArea
          document.getElementById("mySavedModel").textContent = e.model.toJson();
        }
      }
    });

myDiagram.nodeTemplate =
  $(go.Node, "Auto",
    $(go.Shape, { fill: "white" },
      new go.Binding("fill", "color")),
    $(go.TextBlock, { margin: 8 },
      new go.Binding("text"))
  );

myDiagram.groupTemplate =
  $(go.Group, "Auto",
    {
      avoidable: false,
      layout: $(go.LayeredDigraphLayout, { direction: 90 })
    },
    $(go.Shape, { fill: "white" }),
    $(go.Panel, "Vertical",
      $(go.Picture,
        new go.Binding("source", "src", s => "https://gojs.net/latest/samples/images/" + s)),
      $(go.Placeholder, { padding: 10 })
    )
  );

myDiagram.linkTemplate =
  $(go.Link,
    { routing: go.Link.AvoidsNodes, corner: 10 },
    $(go.Shape),
    $(go.Shape, { toArrow: "Standard" })
  );

myDiagram.model = new go.GraphLinksModel(
[
  { key: -1, isGroup: true, src: "50x40.png" },
  { key: -2, isGroup: true, group: -1, src: "55x55.png" },
  { key: -3, isGroup: true, group: -2, src: "60x90.png" },
  { key: -4, isGroup: true, group: -3, src: "80x50.png" },
  { key: 3, text: "Gamma", color: "lightgreen", group: -4 },
  { key: 4, text: "Delta", color: "pink", group: -4 },
  { key: 1, text: "Alpha", color: "lightblue", group: -3 },
  { key: 2, text: "Beta", color: "orange", group: -3 },
],
[
  { from: 3, to: 1 },
  { from: 4, to: 1 },
  { from: 3, to: 2 },
  { from: 4, to: 2 },
]);
  </script>
</body>
</html>