2
0

🐛 Fix graph flickering on high res displays (#959)

This PR fixes the flickering and improves the performance so panning
around the graph is much smoother than before.



https://github.com/baptisteArno/typebot.io/assets/62795688/56b91e20-1eb0-44b5-9a4a-c07525c2ba48


/claim #575
<!-- This is an auto-generated comment: release notes by coderabbit.ai
-->

### Summary by CodeRabbit

- Refactor: Improved the Graph component's scaling calculation for
enhanced readability and maintenance.
- Style: Updated the Graph component's style properties to ensure better
compatibility and visual performance on webkit browsers.

These changes aim to enhance the user experience by ensuring the Graph
component displays consistently across different web browsers. The
refactoring of the scaling calculation also makes the code easier to
understand and maintain, potentially leading to quicker updates and bug
fixes in the future.
<!-- end of auto-generated comment: release notes by coderabbit.ai -->

---------

Co-authored-by: Baptiste Arnaud <contact@baptiste-arnaud.fr>
This commit is contained in:
neo773
2023-10-26 12:37:28 +00:00
committed by GitHub
parent 382ebebb57
commit f1e3836184

View File

@ -174,7 +174,9 @@ export const Graph = ({
let newScale = graphPosition.scale + (delta ?? 0)
if (scale) {
const scaleDiff = scale - graphPosition.scale
newScale += Math.min(zoomButtonsScaleBlock, Math.abs(scaleDiff)) * Math.sign(scaleDiff)
newScale +=
Math.min(zoomButtonsScaleBlock, Math.abs(scaleDiff)) *
Math.sign(scaleDiff)
}
if (
@ -242,6 +244,9 @@ export const Graph = ({
data-testid="graph"
style={{
transform,
perspective: 1000,
backfaceVisibility: 'hidden',
transformStyle: 'preserve-3d',
}}
willChange="transform"
transformOrigin="0px 0px 0px"