🐛 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:
@ -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"
|
||||
|
Reference in New Issue
Block a user