Placing node parts

GoJS
1

How do I place node parts more precisely? I want a node that displays the name (category), a port, and a Panel/PanelExpanderButton, but the Panel types I’m using aren’t working how I expected them to. Can someone help?

templateMap.add("Entry",
        $(go.Node, "Auto",
            new go.Binding("location", "loc", go.Point.parse).makeTwoWay(go.Point.stringify),
            $(go.Shape, "RoundedRectangle",
                {
                    fill: "lime",
                    width: 75,
                    height: 75
                }),
           $(go.Panel, "Vertical",
               $(go.TextBlock,
                   new go.Binding("text", "category"),
                   {
                       editable: false
                   })),
                $(go.Panel, "Horizontal",
                    $("PanelExpanderButton", "details"),
                    $(go.Panel, "Vertical",
                        {
                            name: "details",
                            itemTemplate:
                                $(go.Panel, "Horizontal",
                                    $(go.Shape, "Rectangle", {fill: "white", width: 40, height: 40}),
                                    $(go.TextBlock, new go.Binding("text", "prop")),
                                    $(go.TextBlock, new go.Binding("text", "val"))
                                )
                        })
                ),
            makePort("R", go.Spot.Right)
        ));

Where makePort() just returns a small square with port properties set.
This is how my node looks

The textBlock and port shape are organized how I want, but why isn’t the panel and panel expander button positioned vertically under it? Should I maybe just use a table?

2

Are you getting any warnings in the console? (You are using go-debug.js, aren’t you?)

The reason I ask is that I’m suspicious about your indentation and thus what the visual tree really is. That might cause the “PanelExpanderButton” not to be in the panels that you think it is.

3

No, no warnings or errors. And yes it’s the debug version.

4

OK. Well, could you indent your template carefully and see if it matches the structure that you expected? Where is that “PanelExpanderButton” in the visual tree?

5

That helped. I had one too many parentheses closing the first textBlock. Contents in the expanded panel aren’t being displayed still though.

6

How is your node’s visual tree structure different from what is in the IVR Tree sample? IVR Tree

7

It’s really not, I’m just trying to actually build this thing from scratch and understand this all. I could/should probably just use what’s in that sample and build from there, but I was hoping to build a little more understanding for when I really need to start customizing and fine-tuning the end product.