perf(flow): ⚡️ Smooth panning even with complexe flow

apps/builder/components/shared/Graph/Edges/DrawingEdge.tsx

@@ -1,6 +1,5 @@
 import { useEventListener } from '@chakra-ui/hooks'
 import assert from 'assert'
-import { headerHeight } from 'components/shared/TypebotHeader/TypebotHeader'
 import { useGraph, ConnectingIds } from 'contexts/GraphContext'
 import { useTypebot } from 'contexts/TypebotContext/TypebotContext'
 import React, { useMemo, useState } from 'react'
@@ -18,7 +17,6 @@ export const DrawingEdge = () => {
     sourceEndpoints,
     targetEndpoints,
     blocksCoordinates,
-    graphOffsetY,
   } = useGraph()
   const { createEdge } = useTypebot()
   const [mousePosition, setMousePosition] = useState({ x: 0, y: 0 })
@@ -32,19 +30,21 @@ export const DrawingEdge = () => {
     if (!connectingIds) return 0
     return getEndpointTopOffset(
       sourceEndpoints,
-      graphOffsetY,
+      graphPosition.y,
       connectingIds.source.itemId ?? connectingIds.source.stepId
     )
-  }, [connectingIds, sourceEndpoints, graphOffsetY])
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [connectingIds, sourceEndpoints])
 
   const targetTop = useMemo(() => {
     if (!connectingIds) return 0
     return getEndpointTopOffset(
       targetEndpoints,
-      graphOffsetY,
+      graphPosition.y,
       connectingIds.target?.stepId
     )
-  }, [connectingIds, targetEndpoints, graphOffsetY])
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [connectingIds, targetEndpoints])
 
   const path = useMemo(() => {
     if (!sourceTop || !sourceBlockCoordinates) return ``
@@ -72,7 +72,7 @@ export const DrawingEdge = () => {
   const handleMouseMove = (e: MouseEvent) => {
     setMousePosition({
       x: e.clientX - graphPosition.x,
-      y: e.clientY - graphPosition.y - headerHeight,
+      y: e.clientY - graphPosition.y,
     })
   }
   useEventListener('mousemove', handleMouseMove)

apps/builder/components/shared/Graph/Edges/DropOffEdge.tsx

@@ -24,7 +24,7 @@ export const DropOffEdge = ({
   onUnlockProPlanClick,
 }: Props) => {
   const { user } = useUser()
-  const { sourceEndpoints, blocksCoordinates, graphOffsetY } = useGraph()
+  const { sourceEndpoints, blocksCoordinates, graphPosition } = useGraph()
   const { publishedTypebot } = useTypebot()
 
   const isUserOnFreePlan = isFreePlan(user)
@@ -60,7 +60,7 @@ export const DropOffEdge = ({
     () =>
       getEndpointTopOffset(
         sourceEndpoints,
-        graphOffsetY,
+        graphPosition.y,
         block?.steps[block.steps.length - 1].id
       ),
     // eslint-disable-next-line react-hooks/exhaustive-deps

apps/builder/components/shared/Graph/Edges/Edge.tsx

@@ -25,7 +25,7 @@ export const Edge = ({ edge }: { edge: EdgeProps }) => {
     sourceEndpoints,
     targetEndpoints,
     blocksCoordinates,
-    graphOffsetY,
+    graphPosition,
   } = useGraph()
   const [isMouseOver, setIsMouseOver] = useState(false)
   const { isOpen, onOpen, onClose } = useDisclosure()
@@ -42,7 +42,7 @@ export const Edge = ({ edge }: { edge: EdgeProps }) => {
     () =>
       getEndpointTopOffset(
         sourceEndpoints,
-        graphOffsetY,
+        graphPosition.y,
         getSourceEndpointId(edge)
       ),
     // eslint-disable-next-line react-hooks/exhaustive-deps
@@ -50,16 +50,16 @@ export const Edge = ({ edge }: { edge: EdgeProps }) => {
   )
 
   const [targetTop, setTargetTop] = useState(
-    getEndpointTopOffset(targetEndpoints, graphOffsetY, edge?.to.stepId)
+    getEndpointTopOffset(targetEndpoints, graphPosition.y, edge?.to.stepId)
   )
   useLayoutEffect(() => {
     setTargetTop(
-      getEndpointTopOffset(targetEndpoints, graphOffsetY, edge?.to.stepId)
+      getEndpointTopOffset(targetEndpoints, graphPosition.y, edge?.to.stepId)
     )
   }, [
     targetBlockCoordinates?.y,
     targetEndpoints,
-    graphOffsetY,
+    graphPosition.y,
     edge?.to.stepId,
   ])