Style selector ':grabbed' only works once #3415
Description
Environment info
- Cytoscape.js version : 3.33.1 (observed also with 3.32.2, 3.31.4, 3.30.4, 3.29.3, 3.28.1, 3.27.2, 3.26.2)
- Browser/Node.js & version : Chromium 120.0
Edit: the bug seems to have appear between 3.15.5 and 3.16.0 (in 3.15.5, it is still buggy but in a different way)
Current (buggy) behaviour
What does the bug do?
When a style is added on nodes with the selector node:grabbed, the style is only applied the first time the node is grabbed (for exemple to move it).
Desired behaviour
What do you expect Cytoscape.js to do instead?
The style should be applied every time the node is grabbed.
Minimum steps to reproduce
What do you need to do to reproduce the issue?
Minimal working example:
<!DOCTYPE>
<html>
<head>
<title>Cytoscape :dragged bug</title>
<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1, maximum-scale=1">
<script src="https://unpkg.com/[email protected]/dist/cytoscape.min.js" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
</head>
<body>
<h1>Cytoscape :dragged bug</h1>
<div id="cy" style="height:90vh;width:90vw;border:1px solid black;"></div>
<script>
(function(){
window.cy = cytoscape({
container: document.getElementById('cy'),
style:
[
{
selector: 'node:grabbed',
style:
{
'border-width': '3px',
'border-color': 'green',
},
},
],
elements: [{"data": {"id": "a"}}, {"data": {"id": "b"}}],
});
window.cy.on('grab', evt => console.log('grab', evt.target.id(), evt.target.grabbed()));
window.cy.on('drag', evt => console.log('drag', evt.target.id(), evt.target.grabbed()));
window.cy.on('free', evt => console.log('free', evt.target.id(), evt.target.grabbed()));
})();
</script>
</body>
</html>In the example the method grabbed() is called on the target of the events grab, drag and free. It shows that the internal state of the nodes seem to be correct (it is grabbed for the even grab and drag, but not for free).
There is also a weirder bug when the two nodes are selected: the :grabbed style is only applied the first time a new node is used to move the selection... If you grab the same node multiple times, it only works the first time, if you grab the other node and come back to the previous one, it works again (but only once).
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
-
masterand -
unstable.
-
- The issue has been labelled as a
bug, if necessary.