feat(inputs): ✨ Add Condition step

apps/builder/components/board/graph/Edges/DrawingEdge.tsx

@@ -2,15 +2,22 @@ import { useEventListener } from '@chakra-ui/hooks'
 import { headerHeight } from 'components/shared/TypebotHeader/TypebotHeader'
 import { useGraph, ConnectingIds } from 'contexts/GraphContext'
 import { useTypebot } from 'contexts/TypebotContext/TypebotContext'
-import { Target } from 'models'
+import { Step, Target } from 'models'
 import React, { useMemo, useState } from 'react'
 import {
-  computeDrawingConnectedPath,
-  computeDrawingPathToMouse,
+  computeConnectingEdgePath,
+  computeEdgePathToMouse,
+  getEndpointTopOffset,
 } from 'services/graph'
 
 export const DrawingEdge = () => {
-  const { graphPosition, setConnectingIds, connectingIds } = useGraph()
+  const {
+    graphPosition,
+    setConnectingIds,
+    connectingIds,
+    sourceEndpoints,
+    targetEndpoints,
+  } = useGraph()
   const { typebot, updateStep, updateChoiceItem } = useTypebot()
   const [mousePosition, setMousePosition] = useState({ x: 0, y: 0 })
 
@@ -20,22 +27,44 @@ export const DrawingEdge = () => {
     [connectingIds]
   )
 
+  const sourceTop = useMemo(() => {
+    if (!sourceBlock || !connectingIds) return 0
+    return getEndpointTopOffset(
+      graphPosition,
+      sourceEndpoints,
+      connectingIds.source.choiceItemId ??
+        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) return ``
 
     return connectingIds?.target
-      ? computeDrawingConnectedPath(
+      ? computeConnectingEdgePath(
           connectingIds as Omit<ConnectingIds, 'target'> & { target: Target },
           sourceBlock,
+          sourceTop,
+          targetTop,
           typebot
         )
-      : computeDrawingPathToMouse(
-          sourceBlock,
-          connectingIds,
+      : computeEdgePathToMouse({
+          blockPosition: sourceBlock.graphCoordinates,
           mousePosition,
-          typebot.steps
-        )
-  }, [sourceBlock, typebot, connectingIds, mousePosition])
+          sourceTop,
+        })
+  }, [sourceBlock, typebot, connectingIds, sourceTop, targetTop, mousePosition])
 
   const handleMouseMove = (e: MouseEvent) => {
     setMousePosition({
@@ -49,14 +78,25 @@ export const DrawingEdge = () => {
     setConnectingIds(null)
   })
 
-  const createNewEdge = (connectingIds: ConnectingIds) =>
-    connectingIds.source.choiceItemId
-      ? updateChoiceItem(connectingIds.source.choiceItemId, {
-          target: connectingIds.target,
-        })
-      : updateStep(connectingIds.source.stepId, {
-          target: connectingIds.target,
-        })
+  const createNewEdge = (connectingIds: ConnectingIds) => {
+    if (connectingIds.source.choiceItemId) {
+      updateChoiceItem(connectingIds.source.choiceItemId, {
+        target: connectingIds.target,
+      })
+    } else if (connectingIds.source.conditionType === 'true') {
+      updateStep(connectingIds.source.stepId, {
+        trueTarget: connectingIds.target,
+      } as Step)
+    } else if (connectingIds.source.conditionType === 'false') {
+      updateStep(connectingIds.source.stepId, {
+        falseTarget: connectingIds.target,
+      } as Step)
+    } else {
+      updateStep(connectingIds.source.stepId, {
+        target: connectingIds.target,
+      })
+    }
+  }
 
   if ((mousePosition.x === 0 && mousePosition.y === 0) || !connectingIds)
     return <></>