refactor(editor): ♻️ Undo / Redo buttons + structure refacto

Yet another huge refacto... While implementing undo and redo features I understood that I updated the stored typebot too many times (i.e. on each key input) so I had to rethink it entirely. I also moved around some files.

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

@@ -0,0 +1,115 @@
+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 { Target } from 'models'
+import React, { useMemo, useState } from 'react'
+import {
+  computeConnectingEdgePath,
+  computeEdgePathToMouse,
+  getEndpointTopOffset,
+} from 'services/graph'
+
+export const DrawingEdge = () => {
+  const {
+    graphPosition,
+    setConnectingIds,
+    connectingIds,
+    sourceEndpoints,
+    targetEndpoints,
+    blocksCoordinates,
+  } = useGraph()
+  const { typebot, createEdge } = useTypebot()
+  const [mousePosition, setMousePosition] = useState({ x: 0, y: 0 })
+
+  const sourceBlock = useMemo(
+    () => connectingIds && typebot?.blocks.byId[connectingIds.source.blockId],
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    [connectingIds]
+  )
+
+  const sourceTop = useMemo(() => {
+    if (!sourceBlock || !connectingIds) return 0
+    return getEndpointTopOffset(
+      graphPosition,
+      sourceEndpoints,
+      connectingIds.source.buttonId ??
+        connectingIds.source.stepId + (connectingIds.source.conditionType ?? '')
+    )
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [graphPosition, sourceEndpoints, connectingIds])
+
+  const targetTop = useMemo(() => {
+    if (!sourceBlock || !connectingIds) return 0
+    return getEndpointTopOffset(
+      graphPosition,
+      targetEndpoints,
+      connectingIds.target?.stepId
+    )
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [graphPosition, targetEndpoints, connectingIds])
+
+  const path = useMemo(() => {
+    if (
+      !sourceBlock ||
+      !typebot ||
+      !connectingIds ||
+      !blocksCoordinates ||
+      !sourceTop
+    )
+      return ``
+
+    return connectingIds?.target
+      ? computeConnectingEdgePath({
+          connectingIds: connectingIds as Omit<ConnectingIds, 'target'> & {
+            target: Target
+          },
+          sourceTop,
+          targetTop,
+          blocksCoordinates,
+        })
+      : computeEdgePathToMouse({
+          blockPosition: blocksCoordinates.byId[sourceBlock.id],
+          mousePosition,
+          sourceTop,
+        })
+  }, [
+    sourceBlock,
+    typebot,
+    connectingIds,
+    blocksCoordinates,
+    sourceTop,
+    targetTop,
+    mousePosition,
+  ])
+
+  const handleMouseMove = (e: MouseEvent) => {
+    setMousePosition({
+      x: e.clientX - graphPosition.x,
+      y: e.clientY - graphPosition.y - headerHeight,
+    })
+  }
+  useEventListener('mousemove', handleMouseMove)
+  useEventListener('mouseup', () => {
+    if (connectingIds?.target) createNewEdge(connectingIds)
+    setConnectingIds(null)
+  })
+
+  const createNewEdge = (connectingIds: ConnectingIds) => {
+    assert(connectingIds.target)
+    createEdge({ from: connectingIds.source, to: connectingIds.target })
+  }
+
+  if ((mousePosition.x === 0 && mousePosition.y === 0) || !connectingIds)
+    return <></>
+  return (
+    <path
+      d={path}
+      stroke="#1a5fff"
+      strokeWidth="2px"
+      markerEnd="url(#blue-arrow)"
+      fill="none"
+    />
+  )
+}

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

@@ -0,0 +1,87 @@
+import { Coordinates, useGraph } from 'contexts/GraphContext'
+import { useTypebot } from 'contexts/TypebotContext/TypebotContext'
+import React, { useMemo } from 'react'
+import {
+  getAnchorsPosition,
+  computeEdgePath,
+  getEndpointTopOffset,
+  getSourceEndpointId,
+} from 'services/graph'
+
+export type AnchorsPositionProps = {
+  sourcePosition: Coordinates
+  targetPosition: Coordinates
+  sourceType: 'right' | 'left'
+  totalSegments: number
+}
+
+export const Edge = ({ edgeId }: { edgeId: string }) => {
+  const { typebot } = useTypebot()
+  const {
+    previewingEdgeId,
+    sourceEndpoints,
+    targetEndpoints,
+    graphPosition,
+    blocksCoordinates,
+  } = useGraph()
+  const edge = useMemo(
+    () => typebot?.edges.byId[edgeId],
+    [edgeId, typebot?.edges.byId]
+  )
+  const isPreviewing = previewingEdgeId === edgeId
+
+  const sourceBlock = edge && typebot?.blocks.byId[edge.from.blockId]
+  const targetBlock = edge && typebot?.blocks.byId[edge.to.blockId]
+
+  const sourceBlockCoordinates =
+    sourceBlock && blocksCoordinates?.byId[sourceBlock.id]
+  const targetBlockCoordinates =
+    targetBlock && blocksCoordinates?.byId[targetBlock.id]
+
+  const sourceTop = useMemo(
+    () =>
+      getEndpointTopOffset(
+        graphPosition,
+        sourceEndpoints,
+        getSourceEndpointId(edge)
+      ),
+
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    [edge, graphPosition, sourceEndpoints, sourceBlockCoordinates?.y]
+  )
+  const targetTop = useMemo(
+    () => getEndpointTopOffset(graphPosition, targetEndpoints, edge?.to.stepId),
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    [graphPosition, targetEndpoints, edge?.to.stepId, targetBlockCoordinates?.y]
+  )
+
+  const path = useMemo(() => {
+    if (!sourceBlockCoordinates || !targetBlockCoordinates || !sourceTop)
+      return ``
+    const anchorsPosition = getAnchorsPosition({
+      sourceBlockCoordinates,
+      targetBlockCoordinates,
+      sourceTop,
+      targetTop,
+    })
+    return computeEdgePath(anchorsPosition)
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [
+    sourceBlockCoordinates?.x,
+    sourceBlockCoordinates?.y,
+    targetBlockCoordinates?.x,
+    targetBlockCoordinates?.y,
+    sourceTop,
+  ])
+
+  if (sourceTop === 0) return <></>
+  return (
+    <path
+      d={path}
+      stroke={isPreviewing ? '#1a5fff' : '#718096'}
+      strokeWidth="2px"
+      markerEnd={isPreviewing ? 'url(#blue-arrow)' : 'url(#arrow)'}
+      fill="none"
+    />
+  )
+}

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

@@ -0,0 +1,55 @@
+import { chakra } from '@chakra-ui/system'
+import { useTypebot } from 'contexts/TypebotContext/TypebotContext'
+import React from 'react'
+import { DrawingEdge } from './DrawingEdge'
+import { Edge } from './Edge'
+
+export const Edges = () => {
+  const { typebot } = useTypebot()
+
+  return (
+    <chakra.svg
+      width="full"
+      height="full"
+      overflow="visible"
+      pos="absolute"
+      left="0"
+      top="0"
+    >
+      <DrawingEdge />
+      {typebot?.edges.allIds.map((edgeId) => (
+        <Edge key={edgeId} edgeId={edgeId} />
+      ))}
+      <marker
+        id={'arrow'}
+        refX="8"
+        refY="4"
+        orient="auto"
+        viewBox="0 0 20 20"
+        markerUnits="userSpaceOnUse"
+        markerWidth="20"
+        markerHeight="20"
+      >
+        <path
+          d="M7.07138888,5.50174526 L2.43017246,7.82235347 C1.60067988,8.23709976 0.592024983,7.90088146 0.177278692,7.07138888 C0.0606951226,6.83822174 0,6.58111307 0,6.32042429 L0,1.67920787 C0,0.751806973 0.751806973,0 1.67920787,0 C1.93989666,0 2.19700532,0.0606951226 2.43017246,0.177278692 L7,3 C7.82949258,3.41474629 8.23709976,3.92128809 7.82235347,4.75078067 C7.6598671,5.07575341 7.39636161,5.33925889 7.07138888,5.50174526 Z"
+          fill="#718096"
+        />
+      </marker>
+      <marker
+        id={'blue-arrow'}
+        refX="8"
+        refY="4"
+        orient="auto"
+        viewBox="0 0 20 20"
+        markerUnits="userSpaceOnUse"
+        markerWidth="20"
+        markerHeight="20"
+      >
+        <path
+          d="M7.07138888,5.50174526 L2.43017246,7.82235347 C1.60067988,8.23709976 0.592024983,7.90088146 0.177278692,7.07138888 C0.0606951226,6.83822174 0,6.58111307 0,6.32042429 L0,1.67920787 C0,0.751806973 0.751806973,0 1.67920787,0 C1.93989666,0 2.19700532,0.0606951226 2.43017246,0.177278692 L7,3 C7.82949258,3.41474629 8.23709976,3.92128809 7.82235347,4.75078067 C7.6598671,5.07575341 7.39636161,5.33925889 7.07138888,5.50174526 Z"
+          fill="#1a5fff"
+        />
+      </marker>
+    </chakra.svg>
+  )
+}

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

@@ -0,0 +1 @@
+export { Edges } from './Edges'