Grey Mode for elements and links

Hi, Gojs Team. We’re gonna implement grey mode in gojs builder. This is desired screen design.


The ‘grey mode’ means when we switch into “grey mode”, then only the element we select and links from that element become colorful while other elements and links are still grey.
This is the current builder screen: https://www.screencast.com/t/HveDdmPxx

How can we implement this in a quickest way? This is like grey effect in photoshop.
Thanks.

I suggest that you bind various properties to the Part.isHighlighted property, as shown in several samples such as https://gojs.net/latest/samples/distances.html and https://gojs.net/latest/samples/friendWheel.html, and discussed at https://gojs.net/latest/intro/highlighting.html#HighlightingNodesAndLinks.

Then it’s just a matter of deciding how to implement that effect for each kind of node and link that you have. For most objects, swapping out the colors used by Shape.fill, Shape.stroke, TextBlock.stroke, and GraphObject.background is straight-forward to do.

For Pictures, though, it probably depends on the images. You could swap with another image. Or maybe you could change its opacity. Or you could make visible a translucent gray in front of the Picture.