Create border/adornment/shape with only corners visible?

GoJS
1

I have a node template consisting of multiple layers and GraphObjects (see attached image below). For example, the black border is a separate RoundedRectangle (which is only displayed if the node is selected) that the purple border/all other node content is layered on top of.

How would I accomplish the four gray highlights floating outside of the node corners? Could I modify some type of Shape where only those four segments of a rectangle are visible? Maybe an adornment or modifying border settings?

Thanks in advance for any help!

Screenshot 2023-09-27 at 3.40.41 PM
Screenshot 2023-09-27 at 3.40.41 PM1824×766 26.5 KB

2

Here’s an example: https://codepen.io/jhardy/pen/rNoKwRe

It contains:

  • a custom figure generator for a “RoundedCorners” Shape (which is parameterized for the corner roundness and straight length)
  • an Adornment using that figure
  • a selectionChanged function which adds/remove the Adornment on selection
3

Awesome, thank you! How would I modify the figure generator if I wanted the corners to animate in and out of the node when toggled? By animate in/out, I mean the corners start behind the node and when triggered, they appear to animate outward/scaling out of the node and vice versa when the node is deselected.

4

Nevermind on this, ended up using an svg of the four corners in a GraphObject Picture and attached that to the node. Modified the scale of the Picture to achieve the animating in/out.

Thanks for taking the time to help, your reply was also a viable solution.