I want to create a rounded rectangle node like this -
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.
jhardy
May 11, 2021, 12:31pm
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.
walter
May 11, 2021, 12:35pm
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.
Great! Thanks a lot. Works perfectly!