Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

`ResizeObserver` for more automatic `cy.resize()`s #1652

Closed
maxkfranz opened this issue Dec 19, 2016 · 5 comments

Comments

@maxkfranz
Copy link
Member

commented Dec 19, 2016

We already catch direct attribute changes on the container (e.g. el.classList.add()) for resizes, but using the proposed ResizeObserver would catch more cases and would avoid some false positives.

Once the spec is finalised, we can use it with a check for the API's existence. We can fall back on the existing behaviour if ResizeObserver is unavailable.

@maxkfranz maxkfranz added this to the future milestone Dec 19, 2016
@maxkfranz maxkfranz changed the title ResizeObserver for more automatic `cy.resize()`s `ResizeObserver` for more automatic `cy.resize()`s Dec 19, 2016
@TrySound

This comment has been minimized.

Copy link
Contributor

commented Nov 1, 2017

@maxkfranz

This comment has been minimized.

Copy link
Member Author

commented Nov 1, 2017

Thanks. That would allow for an easier transition when it's supported natively in the browsers. However, it seems like the ResizeObserver API is just a draft at this point and could change in future. We're already doing what the resize-observer-polyfill does under the hood with MutationObservers etc. So it probably doesn't make sense to take action on this now, but the polyfill could be useful when the ResizeObserver API is finalised.

@maxkfranz

This comment has been minimized.

Copy link
Member Author

commented Jul 9, 2019

More browsers support this now or will support it soon: https://caniuse.com/#search=resizeobserver

Let's put this in the 3.9.0 milestone.

@maxkfranz maxkfranz modified the milestones: future, 3.9.0 Jul 9, 2019
maxkfranz added a commit that referenced this issue Jul 30, 2019
- The `ResizeObserver` is used on top of existing methods.  If your browser supports it, you get better coverage for more automatic resizes.  If not, you get the existing methods -- which work for common cases.  If you only support evergreen browsers, then you probably will never have to call `cy.resize()` in a typical app.
- This may help in cases where a programmer puts a graph within an in-page tab interface or within a resizable panel.  The viewport should update automatically, so long as the component is compatible with `ResizeObserver`.
- Browser support: Edge 76+, Firefox 69+, Chrome 64+, Safari 13+

Ref : `ResizeObserver` for more automatic `cy.resize()`s #1652
@maxkfranz maxkfranz closed this Jul 30, 2019
maxkfranz added a commit that referenced this issue Jul 30, 2019
@maxkfranz

This comment has been minimized.

Copy link
Member Author

commented Jul 30, 2019

I'm not getting errors with eslint when I run it locally:

$ node --version
v10.16.0
$ npm --version
6.9.0
$ npm run lint

> cytoscape@3.9.0-unstable lint /Users/max/Documents/workspace/cytoscape.js
> eslint src benchmark

$
@maxkfranz

This comment has been minimized.

Copy link
Member Author

commented Jul 30, 2019

Though I can't reproduce the linting error, I have added comments to disable the eslint warnings in c18937b.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
2 participants
You can’t perform that action at this time.