blsmedia/bot
2
0
Fork 0
Code Activity

feat(inputs): ✨ Add Condition step

Browse Source
This commit is contained in:
Baptiste Arnaud
2022-01-15 17:30:20 +01:00
parent 4ccb7bca49
commit 2814a352b2
30 changed files with 1178 additions and 243 deletions
Download Patch File Download Diff File Expand all files Collapse all files

78
apps/builder/components/board/graph/Edges/DrawingEdge.tsx
View File

@ -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 <></>

95
apps/builder/components/board/graph/Edges/Edge.tsx
View File

@ -3,13 +3,13 @@ import assert from 'assert'
import { Coordinates, useGraph } from 'contexts/GraphContext'
import { useTypebot } from 'contexts/TypebotContext/TypebotContext'
import { ChoiceItem } from 'models'
import React, { useMemo } from 'react'
import React, { useEffect, useMemo, useState } from 'react'
import {
getAnchorsPosition,
computeFlowChartConnectorPath,
getSourceChoiceItemIndex,
computeEdgePath,
getEndpointTopOffset,
getTarget,
} from 'services/graph'
import { isChoiceInput } from 'utils'
export type AnchorsPositionProps = {
sourcePosition: Coordinates
@ -18,15 +18,25 @@ export type AnchorsPositionProps = {
totalSegments: number
}
export enum EdgeType {
STEP,
CHOICE_ITEM,
CONDITION_TRUE,
CONDITION_FALSE,
}
export const Edge = ({
type,
stepId,
item,
}: {
type: EdgeType
stepId: string
item?: ChoiceItem
}) => {
const { typebot } = useTypebot()
const { previewingIds } = useGraph()
const { previewingIds, sourceEndpoints, targetEndpoints, graphPosition } =
useGraph()
const step = typebot?.steps.byId[stepId]
const isPreviewing = useMemo(
() =>
@ -34,40 +44,83 @@ export const Edge = ({
previewingIds.targetId === step?.target?.blockId,
[previewingIds.sourceId, previewingIds.targetId, step]
)
const [sourceTop, setSourceTop] = useState(
getEndpointTopOffset(graphPosition, sourceEndpoints, item?.id ?? step?.id)
)
const [targetTop, setTargetTop] = useState(
getEndpointTopOffset(graphPosition, targetEndpoints, step?.id)
)
const { sourceBlock, targetBlock, targetStepIndex } = useMemo(() => {
useEffect(() => {
const newSourceTop = getEndpointTopOffset(
graphPosition,
sourceEndpoints,
getSourceEndpointId()
)
const sensibilityThreshold = 10
const newSourceTopIsTooClose =
sourceTop < newSourceTop + sensibilityThreshold &&
sourceTop > newSourceTop - sensibilityThreshold
if (newSourceTopIsTooClose) return
setSourceTop(newSourceTop)
// eslint-disable-next-line react-hooks/exhaustive-deps
}, [typebot?.blocks, typebot?.steps, graphPosition, sourceEndpoints])
const getSourceEndpointId = () => {
switch (type) {
case EdgeType.STEP:
return step?.id
case EdgeType.CHOICE_ITEM:
return item?.id
case EdgeType.CONDITION_TRUE:
return step?.id + 'true'
case EdgeType.CONDITION_FALSE:
return step?.id + 'false'
}
}
useEffect(() => {
if (!step) return
const target = getTarget(step, type)
const newTargetTop = getEndpointTopOffset(
graphPosition,
targetEndpoints,
target?.blockId ?? target?.stepId
)
const sensibilityThreshold = 10
const newSourceTopIsTooClose =
targetTop < newTargetTop + sensibilityThreshold &&
targetTop > newTargetTop - sensibilityThreshold
if (newSourceTopIsTooClose) return
setTargetTop(newTargetTop)
// eslint-disable-next-line react-hooks/exhaustive-deps
}, [typebot?.blocks, typebot?.steps, graphPosition, targetEndpoints])
const { sourceBlock, targetBlock } = useMemo(() => {
if (!typebot) return {}
const step = typebot.steps.byId[stepId]
const sourceBlock = typebot.blocks.byId[step.blockId]
const targetBlockId = item?.target?.blockId ?? step.target?.blockId
const targetBlockId = getTarget(step, type)?.blockId
assert(isDefined(targetBlockId))
const targetBlock = typebot.blocks.byId[targetBlockId]
const targetStepId = item?.target?.stepId ?? step.target?.stepId
const targetStepIndex = targetStepId
? targetBlock.stepIds.indexOf(targetStepId)
: undefined
return {
sourceBlock,
targetBlock,
targetStepIndex,
}
}, [item?.target?.blockId, item?.target?.stepId, stepId, typebot])
}, [stepId, type, typebot])
const path = useMemo(() => {
if (!sourceBlock || !targetBlock || !step) return ``
const sourceChoiceItemIndex = isChoiceInput(step)
? getSourceChoiceItemIndex(step, item?.id)
: undefined
const anchorsPosition = getAnchorsPosition({
sourceBlock,
targetBlock,
sourceStepIndex: sourceBlock.stepIds.indexOf(stepId),
targetStepIndex,
sourceChoiceItemIndex,
sourceTop,
targetTop,
})
return computeFlowChartConnectorPath(anchorsPosition)
}, [item, sourceBlock, step, stepId, targetBlock, targetStepIndex])
return computeEdgePath(anchorsPosition)
}, [sourceBlock, sourceTop, step, targetBlock, targetTop])
if (sourceTop === 0) return <></>
return (
<path
d={path}

41
apps/builder/components/board/graph/Edges/Edges.tsx
View File

@ -1,10 +1,10 @@
import { chakra } from '@chakra-ui/system'
import { useTypebot } from 'contexts/TypebotContext/TypebotContext'
import { ChoiceItem } from 'models'
import { ChoiceItem, ConditionStep } from 'models'
import React, { useMemo } from 'react'
import { isDefined, isSingleChoiceInput } from 'utils'
import { isConditionStep, isDefined, isSingleChoiceInput } from 'utils'
import { DrawingEdge } from './DrawingEdge'
import { Edge } from './Edge'
import { Edge, EdgeType } from './Edge'
export const Edges = () => {
const { typebot } = useTypebot()
@ -26,6 +26,14 @@ export const Edges = () => {
)
.map((itemId) => typebot.choiceItems.byId[itemId])
}, [typebot])
const conditionStepIdsWithTarget = useMemo(
() =>
typebot?.steps.allIds.filter((stepId) => {
const step = typebot.steps.byId[stepId]
return isConditionStep(step) && (step.trueTarget || step.falseTarget)
}),
[typebot?.steps.allIds, typebot?.steps.byId]
)
return (
<chakra.svg
@ -38,10 +46,18 @@ export const Edges = () => {
>
<DrawingEdge />
{stepIdsWithTarget.map((stepId) => (
<Edge key={stepId} stepId={stepId} />
<Edge key={stepId} stepId={stepId} type={EdgeType.STEP} />
))}
{singleChoiceItemsWithTarget.map((item) => (
<Edge key={item.id} stepId={item.stepId} item={item} />
<Edge
key={item.id}
stepId={item.stepId}
item={item}
type={EdgeType.CHOICE_ITEM}
/>
))}
{conditionStepIdsWithTarget?.map((stepId) => (
<ConditionStepEdges key={stepId} stepId={stepId} />
))}
<marker
id={'arrow'}
@ -61,3 +77,18 @@ export const Edges = () => {
</chakra.svg>
)
}
const ConditionStepEdges = ({ stepId }: { stepId: string }) => {
const { typebot } = useTypebot()
const step = typebot?.steps.byId[stepId] as ConditionStep
return (
<>
{step.trueTarget && (
<Edge type={EdgeType.CONDITION_TRUE} stepId={stepId} />
)}
{step.falseTarget && (
<Edge type={EdgeType.CONDITION_FALSE} stepId={stepId} />
)}
</>
)
}