It's not working when 'cytoscape.js-edgehandles' or 'cytoscape.js-edge-editing' are used at the same time with expand-collapse

[luis-pereira-altium]

I'm trying to use cytoscape.js-expand-collapse together with cytoscape.js-edgehandles and cytoscape.js-edge-editing but for some reason it's not working.

When I click on expand/collapse icon nothing happens.

[abulka]

Similarly, using this extension with cytoscape.js-node-editing (for user node resizing) breaks the ability to resize nodes.

[hasanbalci]

@abulka I created a demo that uses cytoscape.js-node-editing together with cytoscape.js-expand-collapse here. It seems working, what do you mean with "breaks the ability to resize nodes"?

[abulka]

@hasanbalci Thanks for the (nice) demo which accurately shows the two plugins working OK together.

It turns out that the order of initialisation is important - cy.expandCollapse() must be called before cy.nodeEditing().
See a fork of your demo where nodeEditing is initialised first and the resizing of nodes is broken.

[hasanbalci]

@abulka It's related with the zIndex options of the extensions. Both expand-collapse and node-editing extension add a new canvas to draw expand/collapse cue or resize grapples and z-index values of both canvases are 999 by default. When expand-collapse called after node-editing, its canvas prevents interaction with node-editing items because its canvas covers entire viewport. However, if you change zIndex option of node-editing to a higher value, e.g. 1000, then node-editing works again even though it's called before. See this.

[ugurdogrusoz]

@hasanbalci for the extensions where we have these problems, can we remark in the readme the fact that when using the extension with certain other the order will matter for the reason you explain?