Hi,
We want to deemphasize not selected nodes.
We’ve tried to reduce opacity, however due to issue discussed here it doesn’t look exactly as we want.
So, we want to try a different approach — make gray everything except selected nodes.
We want something similar as “grayscale” filter in CSS.
Is it possible, or do we need to changes color for all nodes manually?
You can actually set:
filter: 'grayscale(1)'
On any GraphObject, and it will work. This is an undocumented GoJS feature.
As a really basic demo:
myDiagram.nodeTemplate = new go.Node("Auto").add(
new go.Shape("RoundedRectangle", { strokeWidth: 0, fill: "white" })
.bind("fill","color")
.bindObject("filter", "isSelected", h => h ? "grayscale(0)" : "grayscale(1)"),
new go.TextBlock().bind('text')
);
demo here: https://codepen.io/simonsarris/pen/KwwPrEo
@simon it is exactly what I need. Thank you 🙏
An alternative is shown in Highlight Chains.
Basically it sets the opacity instead of changing the colors.
When changing opacity we face issue with background and border are being rendered twice, so on some nodes we will have the following effect.
Yes, that’s right. That’s why I was suggesting that you set the strokeWidth to zero, or maybe set the stroke to null. Having both a stroke and a fill is causing double-painting, so unless the colors/brushes are different, there’s no reason to have both.
