Skip to content

Commit

Permalink
🐛 Fix graph flickering on high res displays (baptisteArno#959)
Browse files Browse the repository at this point in the history
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 baptisteArno#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 <[email protected]>
  • Loading branch information
2 people authored and jmgoncalves97 committed Jan 17, 2025
1 parent 818785d commit 5282733
Showing 1 changed file with 6 additions and 1 deletion.
7 changes: 6 additions & 1 deletion apps/builder/src/features/graph/components/Graph.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -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 (
Expand Down Expand Up @@ -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"
Expand Down

0 comments on commit 5282733

Please sign in to comment.