Skip to content

Commit

Permalink
🐛 Fix graph flickering on high res displays (#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 #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>
  • Loading branch information
neo773 and baptisteArno authored Oct 26, 2023
1 parent 382ebeb commit f1e3836
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

1 comment on commit f1e3836

@vercel
Copy link

@vercel vercel bot commented on f1e3836 Oct 26, 2023

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Successfully deployed to the following URLs:

builder-v2 – ./apps/builder

builder-v2-typebot-io.vercel.app
builder-v2-git-main-typebot-io.vercel.app
app.typebot.io

Please sign in to comment.