Add Graph draft

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

@@ -0,0 +1,126 @@
+import { useEventListener } from '@chakra-ui/hooks'
+import { Coordinates } from '@dnd-kit/core/dist/types'
+import { Block } from 'bot-engine'
+import {
+  blockWidth,
+  firstStepOffsetY,
+  spaceBetweenSteps,
+  stubLength,
+  useGraph,
+} from 'contexts/GraphContext'
+import React, { useMemo, useState } from 'react'
+import {
+  computeFlowChartConnectorPath,
+  getAnchorsPosition,
+} from 'services/graph'
+import { roundCorners } from 'svg-round-corners'
+
+export const DrawingEdge = () => {
+  const {
+    graphPosition,
+    setConnectingIds,
+    blocks,
+    connectingIds,
+    addTarget,
+    startBlock,
+  } = useGraph()
+  const [mousePosition, setMousePosition] = useState({ x: 0, y: 0 })
+
+  const sourceBlock = useMemo(
+    () => [startBlock, ...blocks].find((b) => b?.id === connectingIds?.blockId),
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    [connectingIds]
+  )
+
+  const path = useMemo(() => {
+    if (!sourceBlock) return ``
+    if (connectingIds?.target) {
+      const targetedBlock = blocks.find(
+        (b) => b.id === connectingIds.target?.blockId
+      ) as Block
+      const targetedStepIndex = connectingIds.target.stepId
+        ? targetedBlock.steps.findIndex(
+            (s) => s.id === connectingIds.target?.stepId
+          )
+        : undefined
+      const anchorsPosition = getAnchorsPosition(
+        sourceBlock,
+        targetedBlock,
+        sourceBlock?.steps.findIndex((s) => s.id === connectingIds?.stepId),
+        targetedStepIndex
+      )
+      return computeFlowChartConnectorPath(anchorsPosition)
+    }
+    return computeConnectingEdgePath(
+      sourceBlock?.graphCoordinates,
+      mousePosition,
+      sourceBlock.steps.findIndex((s) => s.id === connectingIds?.stepId)
+    )
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [sourceBlock, mousePosition])
+
+  const handleMouseMove = (e: MouseEvent) => {
+    setMousePosition({
+      x: e.clientX - graphPosition.x,
+      y: e.clientY - graphPosition.y,
+    })
+  }
+  useEventListener('mousemove', handleMouseMove)
+  useEventListener('mouseup', () => {
+    if (connectingIds?.target) addTarget(connectingIds)
+    setConnectingIds(null)
+  })
+
+  if ((mousePosition.x === 0 && mousePosition.y === 0) || !connectingIds)
+    return <></>
+  return (
+    <path
+      d={path}
+      stroke="#718096"
+      strokeWidth="2px"
+      markerEnd="url(#arrow)"
+      fill="none"
+    />
+  )
+}
+
+const computeConnectingEdgePath = (
+  blockPosition: Coordinates,
+  mousePosition: Coordinates,
+  stepIndex: number
+): string => {
+  const sourcePosition = {
+    x:
+      mousePosition.x - blockPosition.x > blockWidth / 2
+        ? blockPosition.x + blockWidth - 40
+        : blockPosition.x + 40,
+    y: blockPosition.y + firstStepOffsetY + stepIndex * spaceBetweenSteps,
+  }
+  const sourceType =
+    mousePosition.x - blockPosition.x > blockWidth / 2 ? 'right' : 'left'
+  const segments = computeThreeSegments(
+    sourcePosition,
+    mousePosition,
+    sourceType
+  )
+  return roundCorners(
+    `M${sourcePosition.x},${sourcePosition.y} ${segments}`,
+    10
+  ).path
+}
+
+const computeThreeSegments = (
+  sourcePosition: Coordinates,
+  targetPosition: Coordinates,
+  sourceType: 'right' | 'left'
+) => {
+  const segments = []
+  const firstSegmentX =
+    sourceType === 'right'
+      ? sourcePosition.x + stubLength
+      : sourcePosition.x - stubLength
+  segments.push(`L${firstSegmentX},${sourcePosition.y}`)
+  segments.push(`L${firstSegmentX},${targetPosition.y}`)
+  segments.push(`L${targetPosition.x},${targetPosition.y}`)
+  return segments.join(' ')
+}

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

@@ -0,0 +1,63 @@
+import { Block, StartStep, Step, Target } from 'bot-engine'
+import { Coordinates, useGraph } from 'contexts/GraphContext'
+import React, { useMemo } from 'react'
+import {
+  getAnchorsPosition,
+  computeFlowChartConnectorPath,
+} from 'services/graph'
+
+export type AnchorsPositionProps = {
+  sourcePosition: Coordinates
+  targetPosition: Coordinates
+  sourceType: 'right' | 'left'
+  totalSegments: number
+}
+
+export type StepWithTarget = Omit<Step | StartStep, 'target'> & {
+  target: Target
+}
+
+export const Edge = ({ step }: { step: StepWithTarget }) => {
+  const { blocks, startBlock } = useGraph()
+
+  const { sourceBlock, targetBlock, targetStepIndex } = useMemo(() => {
+    const targetBlock = blocks.find(
+      (b) => b?.id === step.target.blockId
+    ) as Block
+    const targetStepIndex = step.target.stepId
+      ? targetBlock.steps.findIndex((s) => s.id === step.target.stepId)
+      : undefined
+    return {
+      sourceBlock: [startBlock, ...blocks].find((b) => b?.id === step.blockId),
+      targetBlock,
+      targetStepIndex,
+    }
+  }, [
+    blocks,
+    startBlock,
+    step.blockId,
+    step.target.blockId,
+    step.target.stepId,
+  ])
+
+  const path = useMemo(() => {
+    if (!sourceBlock || !targetBlock) return ``
+    const anchorsPosition = getAnchorsPosition(
+      sourceBlock,
+      targetBlock,
+      sourceBlock.steps.findIndex((s) => s.id === step.id),
+      targetStepIndex
+    )
+    return computeFlowChartConnectorPath(anchorsPosition)
+  }, [sourceBlock, step.id, targetBlock, targetStepIndex])
+
+  return (
+    <path
+      d={path}
+      stroke="#718096"
+      strokeWidth="2px"
+      markerEnd="url(#arrow)"
+      fill="none"
+    />
+  )
+}

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

@@ -0,0 +1,49 @@
+import { chakra } from '@chakra-ui/system'
+import { useGraph } from 'contexts/GraphContext'
+import React, { useMemo } from 'react'
+import { DrawingEdge } from './DrawingEdge'
+import { Edge, StepWithTarget } from './Edge'
+
+export const Edges = () => {
+  const { blocks, startBlock } = useGraph()
+  const stepsWithTarget: StepWithTarget[] = useMemo(() => {
+    if (!startBlock) return []
+    return [
+      ...(startBlock.steps.filter((s) => s.target) as StepWithTarget[]),
+      ...(blocks
+        .flatMap((b) => b.steps)
+        .filter((s) => s.target) as StepWithTarget[]),
+    ]
+  }, [blocks, startBlock])
+
+  return (
+    <chakra.svg
+      width="full"
+      height="full"
+      overflow="visible"
+      pos="absolute"
+      left="0"
+      top="0"
+    >
+      <DrawingEdge />
+      {stepsWithTarget.map((step) => (
+        <Edge key={step.id} step={step} />
+      ))}
+      <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>
+    </chakra.svg>
+  )
+}

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

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