Display text below node with ports

GoJS
1

I have the following node template

    myDiagram.nodeTemplate =
        $$(go.Node, "Spot",  nodeStyle(),// the whole node panel
            new go.Binding("location", "loc", go.Point.parse).makeTwoWay(go.Point.stringify),
            //{resizable: true },                
            $$(go.Panel, go.Panel.Spot,
                $$(go.Panel, go.Panel.Auto,
                    $$(go.Shape,
                        {
                            name: "PANEL",
                            strokeWidth: 4,
                            stroke: null,
                            fill: null,
                            portId: "",
                            fromLinkable: true,
                            fromLinkableSelfNode: false,
                            fromLinkableDuplicates: true,
                            toLinkable: true,
                            toLinkableSelfNode: true,
                            toLinkableDuplicates: true
                        },
                        new go.Binding("fill", "white")),
                    $$(go.Picture,
                        { desiredSize: new go.Size(24, 24), margin: 3 },
                        new go.Binding("source", "imageUrl")))),
            $$(go.TextBlock, // the text label
                { editable: true, name: "TEXT" },
                new go.Binding("text", "devicename")),
            makePort("T", go.Spot.Top, false, true),
            makePort("L", go.Spot.Left, true, true),
            makePort("R", go.Spot.Right, true, true),
            makePort("B", go.Spot.Bottom, true, false));

The text shows right smack in the middle of the node, instead of at the bottom. How do I set it at the bottom?

2 
    myDiagram.nodeTemplate =
        $$(go.Node, "Spot",  nodeStyle(),// the whole node panel
            new go.Binding("location", "loc", go.Point.parse).makeTwoWay(go.Point.stringify),
            //{resizable: true },

$$(go.Panel, go.Panel.Spot, // ← Only one child, you can delete me
$$(go.Panel, go.Panel.Auto,
$$(go.Shape,
{
name: “PANEL”,
strokeWidth: 4,
stroke: null,
fill: null,
portId: “”,
fromLinkable: true,
fromLinkableSelfNode: false,
fromLinkableDuplicates: true,
toLinkable: true,
toLinkableSelfNode: true,
toLinkableDuplicates: true
},
new go.Binding(“fill”, “white”)),
$$(go.Picture,
{ desiredSize: new go.Size(24, 24), margin: 3 },
new go.Binding(“source”, “imageUrl”)))
), ← // end of that spot panel
$$(go.TextBlock, // the text label
{ editable: true, name: “TEXT” },
new go.Binding(“text”, “devicename”)),
makePort(“T”, go.Spot.Top, false, true),
makePort(“L”, go.Spot.Left, true, true),
makePort(“R”, go.Spot.Right, true, true),
makePort(“B”, go.Spot.Bottom, true, false));

And to fix the problem in question you’ll need to set the alignment and alignmentFocus of the TextBlock so that it is positioned as you’d expect in the Node (that is a Spot panel)

    myDiagram.nodeTemplate =
        $$(go.Node, "Spot",  nodeStyle(),// the whole node panel
            new go.Binding("location", "loc", go.Point.parse).makeTwoWay(go.Point.stringify),
            //{resizable: true },                
            $$(go.Panel, go.Panel.Auto,
                $$(go.Shape,
                    {
                        name: "PANEL",
                        strokeWidth: 4,
                        stroke: null,
                        fill: null,
                        portId: "",
                        fromLinkable: true,
                        fromLinkableSelfNode: false,
                        fromLinkableDuplicates: true,
                        toLinkable: true,
                        toLinkableSelfNode: true,
                        toLinkableDuplicates: true
                    },
                    new go.Binding("fill", "white")),
                $$(go.Picture,
                    { desiredSize: new go.Size(24, 24), margin: 3 },
                    new go.Binding("source", "imageUrl"))),
            $$(go.TextBlock, // the text label
                { editable: true, name: "TEXT", <b>alignment: go.Spot.Bottom, alignmentFocus: go.Spot.Top</b> },
                new go.Binding("text", "devicename")),
            makePort("T", go.Spot.Top, false, true),
            makePort("L", go.Spot.Left, true, true),
            makePort("R", go.Spot.Right, true, true),
            makePort("B", go.Spot.Bottom, true, false));

See also: GoJS Panels -- Northwoods Software