Add support for rendering cytoscape into WindowProxy document.

[AdamChlupacek]

Associated issues: #3129

• This PR changes reference to window into reference to window of the container into which is the cytoscape rendered. This is done via changing the window reference into container.ownerDocument.defaultView.
• This adds a demo page which demonstrates the behaviour for multiple windows.

Checklist

Author:

• The proper base branch has been selected. New features go on unstable. Bug-fix patches can go on either unstable or master.
• Automated tests have been included in this pull request, if possible, for the new feature(s) or bug fix. Check this box if tests are not pragmatically possible (e.g. rendering features could include screenshots or videos instead of automated tests).
• The associated GitHub issues are included (above).
• Notes have been included (above).

Reviewers:

• All automated checks are passing (green check next to latest commit).
• At least one reviewer has signed off on the pull request.
• N/A : For bug fixes: Just after this pull request is merged, it should be applied to both the master branch and the unstable branch. Normally, this just requires cherry-picking the corresponding merge commit from master to unstable -- or vice versa.

[maxkfranz]

This looks like a good feature to add to the library, and it would be great to have it in the next release.

There are a few small details that we should sort out, and then we should get this merged in.

[AdamChlupacek]

Adding the function makes sense to me. At the same time I have disabled the demo I added, since that is mostly meant for ensuring the feature works, not sure it should be there with the other demos.

[maxkfranz]

@AdamChlupacek, I'm seeing errors on the debug page:

First:

npm run watch

Then on http://localhost:8080/debug/:

viewport.js:538 Uncaught TypeError: Cannot read properties of undefined (reading 'cy')
    at viewport.js:538:24
    at Core.size (viewport.js:545:6)
    at Core.width (viewport.js:552:17)
    at GridLayout.run (grid.js:43:25)
    at setElesAndLayout (index.js:154:29)
    at index.js:167:5
    at loadExtData (index.js:112:7)
    at new Core (index.js:157:3)
    at cytoscape (index.js:16:12)
    at init.js:104:8
(anonymous) @ viewport.js:538
size @ viewport.js:545
width @ viewport.js:552
GridLayout.run @ grid.js:43
setElesAndLayout @ index.js:154
(anonymous) @ index.js:167
loadExtData @ index.js:112
Core @ index.js:157
cytoscape @ index.js:16
(anonymous) @ init.js:104
(anonymous) @ init.js:105
layout.js:12 Uncaught TypeError: Cannot read properties of undefined (reading 'bind')
    at layout.js:12:5
    at layout.js:23:3
(anonymous) @ layout.js:12
(anonymous) @ layout.js:23
tests.js:717 Uncaught TypeError: Cannot read properties of undefined (reading '$')
    at tests.js:717:15
    at tests.js:769:3

[AdamChlupacek]

@maxkfranz thank you for letting me know. Should be fixed now, I also tried the debug page and click through it, did not encounter any other reference issues.

[maxkfranz]

@AdamChlupacek, great. From a cursory look at the debug page, it looks like the renderer is working now. It looks like some automated test has failed in the GH actions. Would you please investigate that before we merge this in?

[AdamChlupacek]

@maxkfranz Thank you for letting me know, forgot to remove imports which are no longer used since we are using the cy.window. All tests locally pass now, lets wait for the GH actions.

[maxkfranz]

Great. Thanks, @AdamChlupacek.

Let's merge this in for a feature release this week.