Clipped shape on top of node border

See the following screenshots for reference.

Valid Node

Invalid Node

The circular shape in the upper-left corner is rendered using a GoJS shape object with it’s position partially inside/outside the bounds of the node. GoJS automatically clips the circular shape so that the portions outside the bounds of the node are not seen.

The valid node looks great since the border color matches the circular shape.

The invalid node doesn’t look so great because the clipped circular shape is on top of the red border. Is there a way for me to get the red border to show up on top of the clipped circular shape?

Are you using the same Shape.stroke to be both the orange border as well as the red border?

You’ll need to use another Shape that is in front of the main Shape and the Orange Circle. Something like:

myDiagram.nodeTemplate = $(go.Node, "Auto", // the Panel will go around the TextBlock { width: 100, height: 50 }, $(go.Panel, "Auto", // the background $(go.Shape, { stroke: null, fill: $(go.Brush, go.Brush.Linear, { 0.0: "lightyellow", 1.0: "peachpuff" }), portId: "" }), // the Orange Circle $(go.Shape, { figure: "Circle", stroke: null, fill: "orange", width: 50, height: 50, alignment: new go.Spot(0, 0, -20, -20) }), // the email figure $(go.Shape, { figure: "Email", width: 12, height: 8, stroke: "orange", fill: "white", alignment: new go.Spot(0, 0, 6, 6) }), // the validity border $(go.Shape, { stretch: go.GraphObject.Fill, stroke: "orange", strokeWidth: 2, fill: null }, new go.Binding("stroke", "valid", function(v) { return v ? "orange" : "red"; })) ), $(go.TextBlock, new go.Binding("text", "key")) );
which when combined with this model data:

myDiagram.model = new go.GraphLinksModel( [ { key: "Alpha", valid: true }, { key: "Beta", valid: false } ], [ { from: "Alpha", to: "Beta" }, { from: "Beta", to: "Beta" } ]);
produces this:

Works like a charm! Many thanks!!!