# Conditional right border

Hi,

I want to set the right border to a RoundedRectangle shape conditionally.

First it is convenient to define a figure for that kind of shape:

``````go.Shape.defineFigureGenerator("RoundedRightRectangle", function (shape, w, h) {
// this figure takes one parameter, the size of the corner
var p1 = 5;  // default corner size
if (shape !== null) {
var param1 = shape.parameter1;
if (!isNaN(param1) && param1 >= 0) p1 = param1;  // can't be negative or NaN
}
p1 = Math.min(p1, w / 2);
p1 = Math.min(p1, h / 2);  // limit by whole height or by half height?
var geo = new go.Geometry();
// a single figure consisting of straight lines and quarter-circle arcs
.add(new go.PathSegment(go.PathSegment.Line, w - p1, 0))
.add(new go.PathSegment(go.PathSegment.Arc, 270, 90, w - p1, p1, p1, p1))
.add(new go.PathSegment(go.PathSegment.Line, w, h - p1))
.add(new go.PathSegment(go.PathSegment.Arc, 0, 90, w - p1, h - p1, p1, p1))
// don't intersect with two bottom corners when used in an "Auto" Panel
geo.spot1 = new go.Spot(0, 0, 0.3 * p1, 0);
geo.spot2 = new go.Spot(1, 1, -0.3 * p1, -0.3 * p1);
return geo;
});
``````

Then â€śRoundedRightRectangleâ€ť can be used as a Shape.figure in your templates.

Letâ€™s say you start off with whatever node template you already have before wanting to add that rounded red right border. The contents of the node donâ€™t matter, so Iâ€™ll just use a simple TextBlock:

``````    \$(go.Node, "Auto",
\$(go.Shape, "RoundedRectangle",
{ fill: "white", strokeWidth: 0 },
new go.Binding("fill", "color")),
\$(go.TextBlock,
{ margin: 8 },
new go.Binding("text"))
)
``````

Now change the node to be a â€śSpotâ€ť Panel that surrounds a new Panel that includes everything that the node template had before:

``````    \$(go.Node, "Spot",
\$(go.Panel, "Auto",
\$(go.Shape, "RoundedRectangle",
{ fill: "white", strokeWidth: 0 },
new go.Binding("fill", "color")),
\$(go.TextBlock,
{ margin: 8 },
new go.Binding("text"))
),
\$(go.Shape, "RoundedRightRectangle",
{
fill: "orangered", strokeWidth: 0,
width: 6, stretch: go.GraphObject.Vertical,
alignment: go.Spot.Right, alignmentFocus: go.Spot.Right,
visible: false
},
new go.Binding("visible", "bordered"))
)
``````

Of course youâ€™ll have to move any Node or Part-specific properties up from the old node panel to the new node panel.

Note how that right border is not visible unless the `data.bordered` property is true.

And you can show/hide it dynamically by setting that data property. For example, to toggle it for a given node:

``````node.diagram.model.commit(m => {
m.set(node.data, "bordered", !node.data.bordered);
});
``````
1 Like

Thanks. It helped

A post was split to a new topic: Negative padding or margin