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 })

apps/builder/components/shared/Graph/Endpoints/SourceEndpoint.tsx

@@ -1,5 +1,5 @@
 import { BoxProps, Flex } from '@chakra-ui/react'
-import { useGraph } from 'contexts/GraphContext'
+import { useGraph, useGroupsCoordinates } from 'contexts/GraphContext'
 import { Source } from 'models'
 import React, { MouseEvent, useEffect, useRef, useState } from 'react'
 
@@ -10,12 +10,9 @@ export const SourceEndpoint = ({
   source: Source
 }) => {
   const [ranOnce, setRanOnce] = useState(false)
-  const {
-    setConnectingIds,
-    addSourceEndpoint,
-    groupsCoordinates,
-    previewingEdge,
-  } = useGraph()
+  const { setConnectingIds, addSourceEndpoint, previewingEdge } = useGraph()
+
+  const { groupsCoordinates } = useGroupsCoordinates()
   const ref = useRef<HTMLDivElement | null>(null)
 
   const handleMouseDown = (e: MouseEvent<HTMLDivElement>) => {

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

@@ -1,18 +1,19 @@
 import { Flex, FlexProps, useEventListener } from '@chakra-ui/react'
-import React, { useRef, useMemo, useEffect, useState } from 'react'
+import React, { useRef, useMemo, useEffect, useState, useCallback } from 'react'
 import {
   blockWidth,
   Coordinates,
   graphPositionDefaultValue,
   useGraph,
+  useGroupsCoordinates,
 } from 'contexts/GraphContext'
 import { useBlockDnd } from 'contexts/GraphDndContext'
 import { useTypebot } from 'contexts/TypebotContext/TypebotContext'
 import { DraggableBlockType, PublicTypebot, Typebot } from 'models'
 import { AnswersCount } from 'services/analytics'
 import { useDebounce } from 'use-debounce'
 import { DraggableCore, DraggableData, DraggableEvent } from 'react-draggable'
-import GraphContent from './GraphContent'
+import GraphElements from './GraphElements'
 import cuid from 'cuid'
 import { headerHeight } from '../TypebotHeader'
 import { useUser } from 'contexts/UserContext'
@@ -29,7 +30,7 @@ export const Graph = ({
   onUnlockProPlanClick,
   ...props
 }: {
-  typebot?: Typebot | PublicTypebot
+  typebot: Typebot | PublicTypebot
   answersCounts?: AnswersCount[]
   onUnlockProPlanClick?: () => void
 } & FlexProps) => {
@@ -47,10 +48,10 @@ export const Graph = ({
   const {
     setGraphPosition: setGlobalGraphPosition,
     setOpenedBlockId,
-    updateGroupCoordinates,
     setPreviewingEdge,
     connectingIds,
   } = useGraph()
+  const { updateGroupCoordinates } = useGroupsCoordinates()
   const [graphPosition, setGraphPosition] = useState(graphPositionDefaultValue)
   const [debouncedGraphPosition] = useDebounce(graphPosition, 200)
   const transform = useMemo(
@@ -177,13 +178,16 @@ export const Graph = ({
   useEventListener('mouseup', handleMouseUp, graphContainerRef.current)
   useEventListener('click', handleClick, editorContainerRef.current)
   useEventListener('mousemove', handleMouseMove)
+
+  // eslint-disable-next-line react-hooks/exhaustive-deps
+  const zoomIn = useCallback(() => zoom(zoomButtonsScaleBlock), [])
+  // eslint-disable-next-line react-hooks/exhaustive-deps
+  const zoomOut = useCallback(() => zoom(-zoomButtonsScaleBlock), [])
+
   return (
     <DraggableCore onDrag={onDrag} enableUserSelectHack={false}>
       <Flex ref={graphContainerRef} position="relative" {...props}>
-        <ZoomButtons
-          onZoomIn={() => zoom(zoomButtonsScaleBlock)}
-          onZoomOut={() => zoom(-zoomButtonsScaleBlock)}
-        />
+        <ZoomButtons onZoomIn={zoomIn} onZoomOut={zoomOut} />
         <Flex
           flex="1"
           w="full"
@@ -195,7 +199,9 @@ export const Graph = ({
           willChange="transform"
           transformOrigin="0px 0px 0px"
         >
-          <GraphContent
+          <GraphElements
+            edges={typebot.edges}
+            groups={typebot.groups}
             answersCounts={answersCounts}
             onUnlockProPlanClick={onUnlockProPlanClick}
           />

apps/builder/components/shared/Graph/GraphElements.tsx

@@ -0,0 +1,33 @@
+import { Edge, Group } from 'models'
+import React, { memo } from 'react'
+import { AnswersCount } from 'services/analytics'
+import { Edges } from './Edges'
+import { GroupNode } from './Nodes/GroupNode'
+
+type Props = {
+  edges: Edge[]
+  groups: Group[]
+  answersCounts?: AnswersCount[]
+  onUnlockProPlanClick?: () => void
+}
+const GroupNodes = ({
+  edges,
+  groups,
+  answersCounts,
+  onUnlockProPlanClick,
+}: Props) => {
+  return (
+    <>
+      <Edges
+        edges={edges}
+        answersCounts={answersCounts}
+        onUnlockProPlanClick={onUnlockProPlanClick}
+      />
+      {groups.map((group, idx) => (
+        <GroupNode group={group} groupIndex={idx} key={group.id} />
+      ))}
+    </>
+  )
+}
+
+export default memo(GroupNodes)