Autoresizing (collapsible) record node

GoDiagram (6 and previous)
1

I have nodes which are something between RecordNode and CollapsingRecordNode. I have a problem laying out items: the node is not user-resizable, but I want it to change its width after the user changes the header or item text. The text label is not the only object within the item, there are other objects on both sides of the label.
Both RecordNode and CollapsingRecordNode force all the items to be the same width as the node, I want the opposite.
What is the best architecture?

2

I guess I don’t understand the problem – if you don’t want to make each item be the same width, you don’t have to.

Are you using a horizontal GoListGroup for each item, so that it keeps the text in between your other two objects? Alternatively, did you implement your own LayoutChildren to do a similar thing?
3

I’m using ListGroup for storing the header and all items.
When I edit the header name and enter some long text, the width of the node increases, but the items don’t change their width. If I edit the name again and make it very short, the node’s width doesn’t change. I want the node to fit the widest item.
Probably I must write some clever LayoutChildren methods, but I don’t know how it should look like, I should position the objects withing the header or items according to what? Generally what should be in node’s LayoutChildren, and what in header and item LayoutChildren?
Is there any sample code doing anything similar?

4
OK, I just created a vertical GoListGroup holding horizontal GoListGroups, each holding three GoTexts:
GoListGroup lg = new GoListGroup();
lg.Orientation = Orientation.Vertical;
lg.BorderPen = Pens.Black;
lg.LinePen = Pens.Black;
GoText t;
GoListGroup lg1 = new GoListGroup();
lg1.Orientation = Orientation.Horizontal;
lg1.DragsNode = true;
t = new GoText(); t.Selectable = false; t.Editable = true; t.DragsNode = true; t.Text = "A"; lg1.Add(t);
t = new GoText(); t.Selectable = false; t.Editable = true; t.DragsNode = true; t.Text = "B"; lg1.Add(t);
t = new GoText(); t.Selectable = false; t.Editable = true; t.DragsNode = true; t.Text = "C"; lg1.Add(t);
lg.Add(lg1);
GoListGroup lg2 = new GoListGroup();
lg2.Orientation = Orientation.Horizontal;
lg2.DragsNode = true;
t = new GoText(); t.Selectable = false; t.Editable = true; t.DragsNode = true; t.Text = "1"; lg2.Add(t);
t = new GoText(); t.Selectable = false; t.Editable = true; t.DragsNode = true; t.Text = "2"; lg2.Add(t);
t = new GoText(); t.Selectable = false; t.Editable = true; t.DragsNode = true; t.Text = "3"; lg2.Add(t);
lg.Add(lg2);
goView1.Document.Add(lg);
Of course, the overall GoListGroup is not a node, nor does it contain any ports, but you can add this (non-Selectable) GoListGroup to a GoNode and add GoPorts to each of the items.
5

Thank you, the example shows a really simple way of creating such nodes, I’ve been trying something unnecessarily complicated.
Unfortunately there is still one problem to solve.
I want the horizontal GoListGroups to be always the same width as the node so that the middle label is stretched and two other labels (or images in my case) maintain their width. To put it another way: I want the images to be on the sides (say, 3 pixels from the border) and the left aligned label in the middle.
In the example when I change any text in the first row so that it becomes much wider, the contents of the second row are centered without resizing.

6
One way to handle this is to override GoListGroup.LayoutItem for each horizontal list group, so that you put the right image at the same X position, given by a new property of the parent vertical list group. Whenever a label changes size, you need to calculate and set the desired value for this property, which then calls LayoutChildren on each of the items (horizontal list groups).
This is basically what GoMultiTextNode does, except that it has an ItemWidth property that is used to set the Width of each item, rather than specifying the X position for the third subitem of each horizontal list group.
Alternatively, you could arrange the listgroups to go the opposite way:
GoListGroup lg = new GoListGroup();
lg.Orientation = Orientation.Horizontal;
lg.BorderPen = Pens.Black;
GoText t;
GoListGroup lg0 = new GoListGroup();
lg0.Orientation = Orientation.Vertical;
lg0.DragsNode = true;
t = new GoText(); t.Selectable = false; t.Editable = true; t.DragsNode = true; t.Text = "1"; lg0.Add(t);
t = new GoText(); t.Selectable = false; t.Editable = true; t.DragsNode = true; t.Text = "2"; lg0.Add(t);
t = new GoText(); t.Selectable = false; t.Editable = true; t.DragsNode = true; t.Text = "3"; lg0.Add(t);
lg.Add(lg0);
GoListGroup lg1 = new GoListGroup();
lg1.Orientation = Orientation.Vertical;
lg1.DragsNode = true;
t = new GoText(); t.Selectable = false; t.Editable = true; t.DragsNode = true; t.Text = "A"; lg1.Add(t);
t = new GoText(); t.Selectable = false; t.Editable = true; t.DragsNode = true; t.Text = "B"; lg1.Add(t);
t = new GoText(); t.Selectable = false; t.Editable = true; t.DragsNode = true; t.Text = "C"; lg1.Add(t);
lg.Add(lg1);
GoListGroup lg2 = new GoListGroup();
lg2.Orientation = Orientation.Vertical;
lg2.DragsNode = true;
t = new GoText(); t.Selectable = false; t.Editable = true; t.DragsNode = true; t.Text = "1"; lg2.Add(t);
t = new GoText(); t.Selectable = false; t.Editable = true; t.DragsNode = true; t.Text = "2"; lg2.Add(t);
t = new GoText(); t.Selectable = false; t.Editable = true; t.DragsNode = true; t.Text = "3"; lg2.Add(t);
lg.Add(lg2);
goView1.Document.Add(lg);
But it's now your responsibility to make sure that there are items (i.e. your left image and your right image) in the corresponding positions in the left and in the right GoListGroups, and that they have the same height as your label.