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)