Getting Panel Properties in another Panel in the same Node

GoJS
1

Hello,
as described in the title I try to get a value from the other panels shape which is the width property but I don’t know how to. Is this even Possible in the way I want to do this ?

this is my Node Template:

myDiagram.nodeTemplate =
        $(go.Node, "Spot", {selectionObjectName: "BASE"},
            $(go.Panel,"Auto",
                $(go.Shape, "LineH",
                    {
                        name:"HLINE",
                        fill:"white",
                        name:'line',
                        minSize: new go.Size(200, 0),
                        maxSize: new go.Size(100,0),
                        strokeWidth: 3,
                        alignment: go.Spot.Center,
                        portId: "",
                        fromSpot: go.Spot.LeftRightSides,
                        toSpot: go.Spot.LeftRightSides
                    },
                    // make sure links come in from the proper direction and go out appropriately
                    new go.Binding("stroke", "brush"),
                    // make sure links come in from the proper direction and go out appropriately
                    new go.Binding("fromSpot", "dir", function(d) { return spotConverter(d, true); }),
                    new go.Binding("toSpot", "dir", function(d) { return spotConverter(d, false); }))
            ),

            // This draws a "RoundedRectangle" over the horizontal line
            $(go.Panel,"Auto",
                $(go.Shape, "RoundedRectangle",
                    {name:"BASE",fill:"white", strokeWidth: 3,alignment: go.Spot.Center },
                    new go.Binding("stroke","brush"),
                    new go.Binding("fill","brush")),
                $(go.TextBlock, "text",
                    {name:"TEXT", editable: true, isMultiline: false},
                    new go.Binding("text", "text").makeTwoWay(),
                    new go.Binding("scale", "scale").makeTwoWay(),
                    new go.Binding("font", "font").makeTwoWay())),

            // remember the locations of each node in the node data
            new go.Binding("location", "loc", go.Point.parse).makeTwoWay(go.Point.stringify),
            // make sure text "grows" in the desired direction
            new go.Binding("locationSpot", "dir", function(d) { return spotConverter(d, false); })

        );

It looks like this when it get’s fed with data:

Capture
Capture701×387 18.3 KB

So my Question is how do I get the HLine width the exact same width as the RoundedRectangle Shapes width ?

2

Instead of putting that Shape in a different Panel, why can’t that Shape be in the same Panel with { stretch: go.GraphObiect.Horizontal } ?

3

The upper “Auto” panel right under the go.Node declaration auto sizes the HLine in the first panel relative to the rounded rectangle, if I were to put the rectangle into the panel, then there would be nothing to auto size it to. So the second panels serves as base for the first panel.

In the second panel the main part of the node gets created by auto sizing the rounded rectangle around the text.

if I change it to:

 myDiagram.nodeTemplate =
        $(go.Node, "Spot", {selectionObjectName: "BASE"},
            $(go.Panel,"Auto",
                $(go.Shape, "LineH",
                    {
                        name:"HLINE",
                        fill:"white",
                        name:'line',
                        desiredSize: new go.Size(200, 0),
                        strokeWidth: 3,
                        alignment: go.Spot.Center,
                        stretch: go.GraphObject.Horizontal,
                        portId: "",
                        fromSpot: go.Spot.LeftRightSides,
                        toSpot: go.Spot.LeftRightSides
                    },
                    // make sure links come in from the proper direction and go out appropriately
                    new go.Binding("stroke", "brush"),
                    // make sure links come in from the proper direction and go out appropriately
                    new go.Binding("fromSpot", "dir", function(d) { return spotConverter(d, true); }),
                    new go.Binding("toSpot", "dir", function(d) { return spotConverter(d, false); })),

                $(go.Shape, "RoundedRectangle",
                    {name:"BASE",fill:"white", strokeWidth: 3,alignment: go.Spot.Center },
                    new go.Binding("stroke","brush"),
                    new go.Binding("fill","brush")),
                $(go.TextBlock, "text",
                    {name:"TEXT", editable: true, isMultiline: false},
                    new go.Binding("text", "text").makeTwoWay(),
                    new go.Binding("scale", "scale").makeTwoWay(),
                    new go.Binding("font", "font").makeTwoWay())
            ),

            // This draws a "RoundedRectangle" over the horizontal line

            // remember the locations of each node in the node data
            new go.Binding("location", "loc", go.Point.parse).makeTwoWay(go.Point.stringify),
            // make sure text "grows" in the desired direction
            new go.Binding("locationSpot", "dir", function(d) { return spotConverter(d, false); })

        );

This Happens:
Captures

Also in my original Post I stated I wanted the HLine to be as long as the other panel but that’s not quite true my end goal was that it looks like this:

but if the text gets bigger, then the hline should also get extendet and keep this overreaching shape:

Capturses

4

I was suggesting the opposite: put the HLine Shape in the Panel with the RoundedRectangle Shape so that it stretches to match the width of the panel.

Of course if you want it to stretch, you cannot set its desired Size or width.