feat(editor): ⚡️ Optimize graph navigation

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

@@ -1,6 +1,11 @@
 import { useEventListener } from '@chakra-ui/hooks'
 import assert from 'assert'
-import { useGraph, ConnectingIds } from 'contexts/GraphContext'
+import {
+  useGraph,
+  ConnectingIds,
+  Coordinates,
+  useGroupsCoordinates,
+} from 'contexts/GraphContext'
 import { useTypebot } from 'contexts/TypebotContext/TypebotContext'
 import { colors } from 'libs/theme'
 import React, { useMemo, useState } from 'react'
@@ -17,10 +22,10 @@ export const DrawingEdge = () => {
     connectingIds,
     sourceEndpoints,
     targetEndpoints,
-    groupsCoordinates,
   } = useGraph()
+  const { groupsCoordinates } = useGroupsCoordinates()
   const { createEdge } = useTypebot()
-  const [mousePosition, setMousePosition] = useState({ x: 0, y: 0 })
+  const [mousePosition, setMousePosition] = useState<Coordinates | null>(null)
 
   const sourceGroupCoordinates =
     groupsCoordinates && groupsCoordinates[connectingIds?.source.groupId ?? '']
@@ -50,7 +55,7 @@ export const DrawingEdge = () => {
   }, [connectingIds, targetEndpoints])
 
   const path = useMemo(() => {
-    if (!sourceTop || !sourceGroupCoordinates) return ``
+    if (!sourceTop || !sourceGroupCoordinates || !mousePosition) return ``
 
     return targetGroupCoordinates
       ? computeConnectingEdgePath({
@@ -75,6 +80,10 @@ export const DrawingEdge = () => {
   ])
 
   const handleMouseMove = (e: MouseEvent) => {
+    if (!connectingIds) {
+      if (mousePosition) setMousePosition(null)
+      return
+    }
     const coordinates = {
       x: (e.clientX - graphPosition.x) / graphPosition.scale,
       y: (e.clientY - graphPosition.y) / graphPosition.scale,
@@ -92,7 +101,10 @@ export const DrawingEdge = () => {
     createEdge({ from: connectingIds.source, to: connectingIds.target })
   }
 
-  if ((mousePosition.x === 0 && mousePosition.y === 0) || !connectingIds)
+  if (
+    (mousePosition && mousePosition.x === 0 && mousePosition.y === 0) ||
+    !connectingIds
+  )
     return <></>
   return (
     <path

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

@@ -1,5 +1,5 @@
 import { VStack, Tag, Text, Tooltip } from '@chakra-ui/react'
-import { useGraph } from 'contexts/GraphContext'
+import { useGraph, useGroupsCoordinates } from 'contexts/GraphContext'
 import { useTypebot } from 'contexts/TypebotContext'
 import { useWorkspace } from 'contexts/WorkspaceContext'
 import React, { useMemo } from 'react'
@@ -24,7 +24,8 @@ export const DropOffEdge = ({
   onUnlockProPlanClick,
 }: Props) => {
   const { workspace } = useWorkspace()
-  const { sourceEndpoints, groupsCoordinates, graphPosition } = useGraph()
+  const { groupsCoordinates } = useGroupsCoordinates()
+  const { sourceEndpoints, graphPosition } = useGraph()
   const { publishedTypebot } = useTypebot()
 
   const isUserOnFreePlan = isFreePlan(workspace)

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

@@ -1,4 +1,8 @@
-import { Coordinates, useGraph } from 'contexts/GraphContext'
+import {
+  Coordinates,
+  useGraph,
+  useGroupsCoordinates,
+} from 'contexts/GraphContext'
 import React, { useEffect, useLayoutEffect, useMemo, useState } from 'react'
 import {
   getAnchorsPosition,
@@ -19,17 +23,20 @@ export type AnchorsPositionProps = {
   totalSegments: number
 }
 
-export const Edge = ({ edge }: { edge: EdgeProps }) => {
+type Props = {
+  edge: EdgeProps
+}
+export const Edge = ({ edge }: Props) => {
   const { deleteEdge } = useTypebot()
   const {
     previewingEdge,
     sourceEndpoints,
     targetEndpoints,
-    groupsCoordinates,
     graphPosition,
     isReadOnly,
     setPreviewingEdge,
   } = useGraph()
+  const { groupsCoordinates } = useGroupsCoordinates()
   const [isMouseOver, setIsMouseOver] = useState(false)
   const { isOpen, onOpen, onClose } = useDisclosure()
   const [edgeMenuPosition, setEdgeMenuPosition] = useState({ x: 0, y: 0 })