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!
Here’s an example: https://codepen.io/jhardy/pen/rNoKwRe
- 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
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.
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.