WebGL: group selection in bounding boxes broken

[svozza]

Environment info

• Cytoscape.js version : 3.33.0
• Browser/Node.js & version : Node 22

Current (buggy) behaviour

I have a diagram where nodes are contained in multiple bounding boxes, when I click on some (but not all) of the bounding boxes the nodes in the bounding box do not get selected.

Desired behaviour

When I click on a bounding box, all the nodes in the box should get selected. When I disable WebGL, everything works as expected.

Minimum steps to reproduce

What do you need to do to reproduce the issue?

1. Create a graph with several grouped nodes, i.e., parent child relationships.
2. Attempt to select any of the groups.
3. The select event does not appear to register

See the below screen recordings.

WebGL enabled:

WebGL disabled

Literally the only difference between these two examples are that I have set the WebGL boolean:

 // Create a new Cytoscape instance with conditional WebGL rendering options
        const cy = cytoscape({
            container: containerRef.current,
            elements: [], // Start with empty graph
            style: graphStyle,
            renderer: {
                name: 'canvas',
                webgl: false, // <= changing this to true causes the bug
            },
        });

For reviewers

Reviewers should ensure that the following tasks are carried out for incorporated issues:

• Ensure that the reporter has included a reproducible demo. They can easily fork this JSBin demo: http://jsbin.com/fiqugiq
• The issue has been associated with a corresponding milestone.
• The commits have been incorporated into the corresponding branches. Bug-fix patches go on
  • master and
  • unstable.
• The issue has been labelled as a bug, if necessary.

[IOkal]

I want to add, this behaviour happens when bounding boxes have an opacity value of: 0.
Bounding boxes with non-zero values like 0.01 will still work as expected.

[KonradHoeffner]

As initially reported in #3320, selection is completely impossible without using SHIFT multi-select for me with OpenGL active, and I don't even have bounding boxes.

[mikekucera]

I did a quick diagnosis for this bug. The issue is not unique to compound nodes, it happens for all nodes that have background-opacity: 0. Clicking the background does not select the node, but clicking the border will. The solution for the WebGL renderer is probably to just ignore the background-opacity property when in RENDER_TARGET.PICKING mode. I should have a PR soon.

I also found a related bug while testing this. Compound node children are supposed to inherit their opacity (multiplicative?) from the parent (for the opacity property not background-opacity). This isn't happening in the WebGL renderer.