cy.mount() : Attach to a DOM element for rendering, after init

[maxkfranz]

Description of new feature

cy.mount( container ) : Attaches the instance to the specified container, just like specifying container at init.

cy.unmount() : Detaches the instance from its container, making it a headless instance.

Motivation for new feature

Sometimes, you want to create an instance before you have the DOM element you want to render in. For example, you might pass a Cytoscape instance into a React component's props, but you can't attach to the DOM element until componentDidMount().

Feature Breakdown

• Single use mount
• Multi use mount

[d2fong]

@maxkfranz I can work on this feature. I was able to implement mount for the basic case. I tested it with the pathways search app and I could pass cy instances as props to child components without errors.

[maxkfranz]

@d2fong Great; I'll add this to the 3.3 milestone then.

Not sure if it's worth it to support multiple mounts per core instance. Maybe it's worth trying destroying/replacing the renderer on each mount to support that usecase? If cleanly destroying the renderer without also destroying the core instance is not straight forward, then we could just support the mount-once per core instance usecase.

There's cy.destroyRenderer() and cy.initRenderer(). I think at least the animation loop needs to be handled in initRenderer() rather than the core constructor then. There may be other issues.

[maxkfranz]

Merged #1949 into unstable. It looks good, but let's keep this issue open for now as a reminder to keep an eye out for mount issues while working on other features on the unstable branch.

[maxkfranz]

@d2fong I added buttons to test mounting on the debug page. I played around with it for a while and I wasn't able to break anything. It looks like it's working well.

Closing

[d2fong]

Thanks. Good to know it is working well.

[ns-singhs]

cy.mount() doesn't work well with the cose layout.
There is no event getting triggered afterwards on the graph, the view is proper but it behaves like an image.
Please look into it.
Using "cytoscape": "^3.22.0",

[maxkfranz]

You're welcome to post reproducible issues as new issues in the issue tracker. Include all of the information in the issue template, such as the reproducible demo.