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.

Sign up for GitHub

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

Jump to bottom

fix: reduce flickering #660

Merged
merged 3 commits into from
Jun 1, 2023
Merged

fix: reduce flickering #660

merged 3 commits into from
Jun 1, 2023

Conversation

vicb
Copy link
Contributor

@vicb vicb commented Jun 1, 2023 •
edited
Loading

  • Individual markers

Before this PR all the individual markers were removed from the map during the render cycle by calling the reset method and to maybe be added back later in renderClusters.

After this CL the individual markers that will still be displayed on the map after the render cycle are not removed from the map.

  • Group markers

This PR still renders the group markers each time but the former group markers are only removed from the map after the new one are added.

It turns out that removing the group markers in the next raf really help with flickering.

@nora-soderlund @amuramoto please review and give feedback.

Depending on the feedback this PR might supersede #536

Also related:

This PR has the same caveat as #536 for animation:

This also fixes part of #384. This will keep the bounce animation while zooming in and out, but it will stop when the marker is turned into a cluster and won't bounce when turned back into a marker again, #384 (comment).

The credit for the changes and the idea should go to @nora-soderlund that created #536 which triggered an interesting discussion on the PR.

@vicb vicb mentioned this pull request Jun 1, 2023
Merged
@vicb vicb force-pushed the flicker branch 2 times, most recently from b1351f6 to aa4fb40 Compare June 1, 2023 05:09
@vicb vicb changed the title feat: reduce flickering fix: reduce flickering Jun 1, 2023
@semantic-release-bot
chore(release): 2.2.0 [skip ci]
709077f 
## [2.2.0](googlemaps/js-markerclusterer@v2.1.4...v2.2.0) (2023-06-01)

### Features

* add a dev server ([googlemaps#656](googlemaps#656)) ([b025dec](googlemaps@b025dec))

### Code Refactoring

* **distanceBetweenPoints:** optimize ([googlemaps#646](googlemaps#646)) ([e0f9a11](googlemaps@e0f9a11))

### Miscellaneous Chores

* **deps-dev:** bump @babel/preset-env from 7.21.5 to 7.22.4 ([googlemaps#650](googlemaps#650)) ([982730d](googlemaps@982730d))
* **deps-dev:** bump @babel/runtime-corejs3 from 7.21.5 to 7.22.3 ([googlemaps#649](googlemaps#649)) ([1c9f4fb](googlemaps@1c9f4fb))
* **deps-dev:** bump @types/selenium-webdriver from 4.1.14 to 4.1.15 ([googlemaps#655](googlemaps#655)) ([526e65c](googlemaps@526e65c))
* **deps-dev:** bump @typescript-eslint/eslint-plugin ([googlemaps#654](googlemaps#654)) ([68a94db](googlemaps@68a94db))
* **deps-dev:** bump @typescript-eslint/parser from 5.59.7 to 5.59.8 ([googlemaps#653](googlemaps#653)) ([a46d0a7](googlemaps@a46d0a7))
* **deps-dev:** bump geckodriver from 4.0.0 to 4.0.2 ([googlemaps#652](googlemaps#652)) ([19518a4](googlemaps@19518a4))
* update actions to use Node.js 16 ([googlemaps#659](googlemaps#659)) ([bcbdddf](googlemaps@bcbdddf))
@amuramoto amuramoto changed the base branch from main to beta June 1, 2023 17:46
@vicb
fix: reduce flickering
3e8f5eb 
* Individual markers

Before this PR all the individual markers were removed from the map during the render cycle
by calling the reset method and to maybe be added back later in renderClusters.

After this CL the individual markers that will still be displayed on the map after the
render cycle are not removed from the map.

* Group markers

This PR still renders the group markers each time but the former group markers are only
removed from the map after the new one are added.

It turns out that removing the group markers in the next raf really help with flickering.
@amuramoto amuramoto merged commit 8b756a7 into googlemaps:beta Jun 1, 2023
@nora-soderlund nora-soderlund mentioned this pull request Jun 1, 2023
Closed
googlemaps-bot pushed a commit that referenced this pull request Jun 1, 2023
@semantic-release-bot
chore(release): 2.2.0-beta.2 [skip ci]
3706d68 
## [2.2.0-beta.2](v2.2.0-beta.1...v2.2.0-beta.2) (2023-06-01)

### Bug Fixes

* reduce flickering ([#660](#660)) ([8b756a7](8b756a7)), closes [#656](#656) [#646](#646) [#650](#650) [#649](#649) [#655](#655) [#654](#654) [#653](#653) [#652](#652) [#659](#659)

### Miscellaneous Chores

* trigger beta release ([434cc68](434cc68))
@googlemaps-bot
Copy link
Contributor

🎉 This PR is included in version 2.2.0-beta.2 🎉

The release is available on:

Your semantic-release bot 📦🚀

@vicb vicb mentioned this pull request Jun 15, 2023
Merged
@amuramoto amuramoto mentioned this pull request Jul 13, 2023
Merged
googlemaps-bot pushed a commit that referenced this pull request Jul 13, 2023
@semantic-release-bot
chore(release): 2.3.2-beta.1 [skip ci]
82911f7 
### [2.3.2-beta.1](v2.3.1...v2.3.2-beta.1) (2023-07-13)

### Bug Fixes

* reduce flickering ([#660](#660)) ([8b756a7](8b756a7)), closes [#656](#656) [#646](#646) [#650](#650) [#649](#649) [#655](#655) [#654](#654) [#653](#653) [#652](#652) [#659](#659)

### Miscellaneous Chores

* **deps-dev:** bump @babel/preset-env from 7.22.4 to 7.22.5 ([#683](#683)) ([24f0a1c](24f0a1c))
* **deps-dev:** bump @babel/preset-env from 7.22.5 to 7.22.7 ([#694](#694)) ([2eee952](2eee952))
* **deps-dev:** bump @babel/runtime-corejs3 from 7.22.3 to 7.22.6 ([#697](#697)) ([c8850f3](c8850f3))
* **deps-dev:** bump @googlemaps/jest-mocks from 2.19.1 to 2.19.2 ([#684](#684)) ([d1aa925](d1aa925))
* **deps-dev:** bump @rollup/plugin-typescript from 11.1.1 to 11.1.2 ([#690](#690)) ([e5ba6c5](e5ba6c5))
* **deps-dev:** bump @typescript-eslint/eslint-plugin ([#686](#686)) ([0e1f24a](0e1f24a))
* **deps-dev:** bump @typescript-eslint/eslint-plugin ([#689](#689)) ([0becc85](0becc85))
* **deps-dev:** bump @typescript-eslint/eslint-plugin ([#696](#696)) ([bebef45](bebef45))
* **deps-dev:** bump core-js from 3.31.0 to 3.31.1 ([#695](#695)) ([e865156](e865156))
* **deps-dev:** bump eslint from 8.42.0 to 8.43.0 ([#685](#685)) ([122eb7b](122eb7b))
* **deps-dev:** bump eslint from 8.43.0 to 8.44.0 ([#688](#688)) ([7f21c12](7f21c12))
* **deps:** bump tough-cookie from 4.1.2 to 4.1.3 ([#693](#693)) ([adf3051](adf3051))
* **release:** 2.2.0-beta.1 [skip ci] ([90a62ee](90a62ee)), closes [#656](#656) [#646](#646) [#650](#650) [#649](#649) [#655](#655) [#654](#654) [#653](#653) [#652](#652) [#659](#659)
* **release:** 2.2.0-beta.2 [skip ci] ([3706d68](3706d68)), closes [#656](#656) [#646](#646) [#650](#650) [#649](#649) [#655](#655) [#654](#654) [#653](#653) [#652](#652) [#659](#659)
* trigger beta release ([434cc68](434cc68))
@googlemaps-bot
Copy link
Contributor

🎉 This PR is included in version 2.3.2-beta.1 🎉

The release is available on:

Your semantic-release bot 📦🚀

amuramoto added a commit that referenced this pull request Jul 13, 2023
@amuramoto @semantic-release-bot @vicb
fix: reduce flickering (#699)
12c1762 
* chore(release): 2.2.0-beta.1 [skip ci]

## [2.2.0-beta.1](v2.1.4...v2.2.0-beta.1) (2023-06-01)

### Features

* add a dev server ([#656](#656)) ([b025dec](b025dec))

### Code Refactoring

* **distanceBetweenPoints:** optimize ([#646](#646)) ([e0f9a11](e0f9a11))

### Miscellaneous Chores

* **deps-dev:** bump @babel/preset-env from 7.21.5 to 7.22.4 ([#650](#650)) ([982730d](982730d))
* **deps-dev:** bump @babel/runtime-corejs3 from 7.21.5 to 7.22.3 ([#649](#649)) ([1c9f4fb](1c9f4fb))
* **deps-dev:** bump @types/selenium-webdriver from 4.1.14 to 4.1.15 ([#655](#655)) ([526e65c](526e65c))
* **deps-dev:** bump @typescript-eslint/eslint-plugin ([#654](#654)) ([68a94db](68a94db))
* **deps-dev:** bump @typescript-eslint/parser from 5.59.7 to 5.59.8 ([#653](#653)) ([a46d0a7](a46d0a7))
* **deps-dev:** bump geckodriver from 4.0.0 to 4.0.2 ([#652](#652)) ([19518a4](19518a4))
* update actions to use Node.js 16 ([#659](#659)) ([bcbdddf](bcbdddf))

* fix: reduce flickering (#660)

* chore(release): 2.2.0 [skip ci]

## [2.2.0](v2.1.4...v2.2.0) (2023-06-01)

### Features

* add a dev server ([#656](#656)) ([b025dec](b025dec))

### Code Refactoring

* **distanceBetweenPoints:** optimize ([#646](#646)) ([e0f9a11](e0f9a11))

### Miscellaneous Chores

* **deps-dev:** bump @babel/preset-env from 7.21.5 to 7.22.4 ([#650](#650)) ([982730d](982730d))
* **deps-dev:** bump @babel/runtime-corejs3 from 7.21.5 to 7.22.3 ([#649](#649)) ([1c9f4fb](1c9f4fb))
* **deps-dev:** bump @types/selenium-webdriver from 4.1.14 to 4.1.15 ([#655](#655)) ([526e65c](526e65c))
* **deps-dev:** bump @typescript-eslint/eslint-plugin ([#654](#654)) ([68a94db](68a94db))
* **deps-dev:** bump @typescript-eslint/parser from 5.59.7 to 5.59.8 ([#653](#653)) ([a46d0a7](a46d0a7))
* **deps-dev:** bump geckodriver from 4.0.0 to 4.0.2 ([#652](#652)) ([19518a4](19518a4))
* update actions to use Node.js 16 ([#659](#659)) ([bcbdddf](bcbdddf))

* fix: reduce flickering

* Individual markers

Before this PR all the individual markers were removed from the map during the render cycle
by calling the reset method and to maybe be added back later in renderClusters.

After this CL the individual markers that will still be displayed on the map after the
render cycle are not removed from the map.

* Group markers

This PR still renders the group markers each time but the former group markers are only
removed from the map after the new one are added.

It turns out that removing the group markers in the next raf really help with flickering.

*  chore: resolves merge conflicts on to beta

---------

Co-authored-by: semantic-release-bot <semantic-release-bot@martynus.net>
Co-authored-by: Alex Muramoto <amuramoto@apache.org>

* chore: trigger beta release

* chore(release): 2.2.0-beta.2 [skip ci]

## [2.2.0-beta.2](v2.2.0-beta.1...v2.2.0-beta.2) (2023-06-01)

### Bug Fixes

* reduce flickering ([#660](#660)) ([8b756a7](8b756a7)), closes [#656](#656) [#646](#646) [#650](#650) [#649](#649) [#655](#655) [#654](#654) [#653](#653) [#652](#652) [#659](#659)

### Miscellaneous Chores

* trigger beta release ([434cc68](434cc68))

* chore(release): 2.3.2-beta.1 [skip ci]

### [2.3.2-beta.1](v2.3.1...v2.3.2-beta.1) (2023-07-13)

### Bug Fixes

* reduce flickering ([#660](#660)) ([8b756a7](8b756a7)), closes [#656](#656) [#646](#646) [#650](#650) [#649](#649) [#655](#655) [#654](#654) [#653](#653) [#652](#652) [#659](#659)

### Miscellaneous Chores

* **deps-dev:** bump @babel/preset-env from 7.22.4 to 7.22.5 ([#683](#683)) ([24f0a1c](24f0a1c))
* **deps-dev:** bump @babel/preset-env from 7.22.5 to 7.22.7 ([#694](#694)) ([2eee952](2eee952))
* **deps-dev:** bump @babel/runtime-corejs3 from 7.22.3 to 7.22.6 ([#697](#697)) ([c8850f3](c8850f3))
* **deps-dev:** bump @googlemaps/jest-mocks from 2.19.1 to 2.19.2 ([#684](#684)) ([d1aa925](d1aa925))
* **deps-dev:** bump @rollup/plugin-typescript from 11.1.1 to 11.1.2 ([#690](#690)) ([e5ba6c5](e5ba6c5))
* **deps-dev:** bump @typescript-eslint/eslint-plugin ([#686](#686)) ([0e1f24a](0e1f24a))
* **deps-dev:** bump @typescript-eslint/eslint-plugin ([#689](#689)) ([0becc85](0becc85))
* **deps-dev:** bump @typescript-eslint/eslint-plugin ([#696](#696)) ([bebef45](bebef45))
* **deps-dev:** bump core-js from 3.31.0 to 3.31.1 ([#695](#695)) ([e865156](e865156))
* **deps-dev:** bump eslint from 8.42.0 to 8.43.0 ([#685](#685)) ([122eb7b](122eb7b))
* **deps-dev:** bump eslint from 8.43.0 to 8.44.0 ([#688](#688)) ([7f21c12](7f21c12))
* **deps:** bump tough-cookie from 4.1.2 to 4.1.3 ([#693](#693)) ([adf3051](adf3051))
* **release:** 2.2.0-beta.1 [skip ci] ([90a62ee](90a62ee)), closes [#656](#656) [#646](#646) [#650](#650) [#649](#649) [#655](#655) [#654](#654) [#653](#653) [#652](#652) [#659](#659)
* **release:** 2.2.0-beta.2 [skip ci] ([3706d68](3706d68)), closes [#656](#656) [#646](#646) [#650](#650) [#649](#649) [#655](#655) [#654](#654) [#653](#653) [#652](#652) [#659](#659)
* trigger beta release ([434cc68](434cc68))

---------

Co-authored-by: semantic-release-bot <semantic-release-bot@martynus.net>
Co-authored-by: Victor Berchet <victor@suumit.com>
googlemaps-bot pushed a commit that referenced this pull request Jul 13, 2023
@semantic-release-bot
chore(release): 2.3.2 [skip ci]
61a0120 
### [2.3.2](v2.3.1...v2.3.2) (2023-07-13)

### Bug Fixes

* reduce flickering ([#699](#699)) ([12c1762](12c1762)), closes [#656](#656) [#646](#646) [#650](#650) [#649](#649) [#655](#655) [#654](#654) [#653](#653) [#652](#652) [#659](#659) [#660](#660) [#656](#656) [#646](#646) [#650](#650) [#649](#649) [#655](#655) [#654](#654) [#653](#653) [#652](#652) [#659](#659)

### Miscellaneous Chores

* **deps-dev:** bump @babel/preset-env from 7.22.4 to 7.22.5 ([#683](#683)) ([24f0a1c](24f0a1c))
* **deps-dev:** bump @babel/preset-env from 7.22.5 to 7.22.7 ([#694](#694)) ([2eee952](2eee952))
* **deps-dev:** bump @babel/runtime-corejs3 from 7.22.3 to 7.22.6 ([#697](#697)) ([c8850f3](c8850f3))
* **deps-dev:** bump @googlemaps/jest-mocks from 2.19.1 to 2.19.2 ([#684](#684)) ([d1aa925](d1aa925))
* **deps-dev:** bump @rollup/plugin-typescript from 11.1.1 to 11.1.2 ([#690](#690)) ([e5ba6c5](e5ba6c5))
* **deps-dev:** bump @typescript-eslint/eslint-plugin ([#686](#686)) ([0e1f24a](0e1f24a))
* **deps-dev:** bump @typescript-eslint/eslint-plugin ([#689](#689)) ([0becc85](0becc85))
* **deps-dev:** bump @typescript-eslint/eslint-plugin ([#696](#696)) ([bebef45](bebef45))
* **deps-dev:** bump core-js from 3.31.0 to 3.31.1 ([#695](#695)) ([e865156](e865156))
* **deps-dev:** bump eslint from 8.42.0 to 8.43.0 ([#685](#685)) ([122eb7b](122eb7b))
* **deps-dev:** bump eslint from 8.43.0 to 8.44.0 ([#688](#688)) ([7f21c12](7f21c12))
* **deps:** bump tough-cookie from 4.1.2 to 4.1.3 ([#693](#693)) ([adf3051](adf3051))
* manually trigger release action ([a9bf661](a9bf661))
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Reviewers
No reviews
Assignees

@wangela wangela

Labels
released on @beta
Projects
None yet
Milestone
No milestone
Development

Successfully merging this pull request may close these issues.
5 participants
@vicb @googlemaps-bot @amuramoto @wangela @semantic-release-bot