Fill color inside rounded rectangle corners

GoJS
#1

I want to create a rounded rectangle node like this -

image

However, the following code leaves a little space as the vertical panel is not filling the inside of the node:

	const nodeTemplate = $(
		go.Node,
		'Auto',
		{
			width: 200,
			height: 200,
		},
		$(go.Shape, 
			'RoundedRectangle',
			{
				fill: '#f7f6f0',
				strokeWidth: 3,
			},
			new go.Binding('stroke', 'borderColor')
		),
		$(go.Panel,
			'Auto',
			{
				stretch: go.GraphObject.Fill,
				height: 30,
				alignment: go.Spot.Top
			},
			$(go.Shape, 
				'RoundedRectangle',
				{
					fill: '#f0a432',
					strokeWidth: 0
				}				
			)
		)	
	);

I see a little gap as the shape is not filling the entire rect. Is there a way I can achieve this?

Thanks.
image

#2

Maybe you want something like this:

It sets the RoundedRectangle’s spot1 and spot2 values so the content goes all the way to the edge. It also uses a RoundedTopRectangle for the “header” section, which you may or may not want.

#3

Here’s your template, modified to make use of the “RoundedTopRectangle” figure defined in extensions/RoundedRectangles.js:

<!DOCTYPE html>
<html>
<head>
  <title>Minimal GoJS Sample</title>
  <!-- Copyright 1998-2021 by Northwoods Software Corporation. -->
  <script src="https://unpkg.com/gojs"></script>
  <script src="https://unpkg.com/gojs/extensions/RoundedRectangles.js"></script>
  <script id="code">
  function init() {
    var $ = go.GraphObject.make;

    myDiagram =
      $(go.Diagram, "myDiagramDiv");

    myDiagram.nodeTemplate =
      $(go.Node, 'Auto',
        { width: 200, height: 200 },
        $(go.Shape, 'RoundedRectangle',
          {
            spot1: new go.Spot(0, 0, 1.5, 1.5),
            spot2: new go.Spot(1, 1, -1.5, 1.5),
            fill: '#f7f6f0',
            strokeWidth: 3,
          },
          new go.Binding('stroke', 'borderColor')
        ),
        $(go.Panel, "Vertical",
          { 
            stretch: go.GraphObject.Fill,
            defaultStretch: go.GraphObject.Horizontal
          },
          $(go.Panel, "Auto",
            { height: 30 },
            $(go.Shape, 'RoundedTopRectangle',
              { fill: '#f0a432', strokeWidth: 0 }),
            $(go.TextBlock,
              new go.Binding("text"))
          ),
          // ... more elements?
        )
      );

    myDiagram.model = new go.GraphLinksModel(
      [
        { key: 1, text: "Alpha", borderColor: "orange" }
      ]);
  }
  </script>
</head>
<body onload="init()">
  <div id="myDiagramDiv" style="border: solid 1px black; width:100%; height:600px"></div>
</body>
</html>

It also sets spot1 and spot2 to control the position and sizing of the content in the “Auto” Panel.

image

#4

Great! Thanks a lot. Works perfectly!