The rendered style and bounding box for an edge may become stale

[jspautsch]

Issue type

Bug report

Environment info

• Cytoscape.js version : 3.3.0
• Browser & version : Chrome 71

Current (buggy) behaviour

Running layouts in a compound graph results in edge labels not rendering in the correct positions.

Desired behaviour

Edge label position should always be in sync with the rendered edge.

Minimum steps to reproduce

Used the following demo as a starting point: http://js.cytoscape.org/demos/compound-nodes/

Then ran the following commands:

cy.style().selector('edge').style({ label: 'data(id)' }).update(); // show edge labels
cy.layout({name: 'random'}).run(); // run layout

This was the result:

Since 3.3.0 I've intermittently run into similar issues where using positions() or shift() produces the same bug, and it will sometimes affect the compound node's label too, but I have not been able to reproduce consistently.

[maxkfranz]

From the same cause: An edge may not be shown at all for certain pan and zoom values, after running a layout.

[maxkfranz]

Explanation:

The rendered style may be stale after a connected node is repositioned. Because the rendered style of an edge is not dirtied when a node is moved, we should force the rendered style of the edge to be recalculated when the bounding box is requested and there is a diff detected for one or both node positions.

Behaviour without patch: Edge labels can be shown at the wrong location. Edges can be not shown at all for certain pan and zoom levels. In both cases, a stale rendered style results in a stale bounding box. The overall bounding box is used for viewport overlap detection and a label sub-bounding-box is used for label placement etc.