blsmedia/bot
2
0
Fork 0
Code Activity

refactor(graph): ♻️ Add Edges table in Typebot

Browse Source
This commit is contained in:
Baptiste Arnaud
2022-01-19 18:54:49 +01:00
parent ab34f95cce
commit 8bbd8977b2
59 changed files with 1118 additions and 991 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@ -1,8 +1,9 @@
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 { Step, Target } from 'models'
import { Target } from 'models'
import React, { useMemo, useState } from 'react'
import {
computeConnectingEdgePath,
@ -18,7 +19,7 @@ export const DrawingEdge = () => {
sourceEndpoints,
targetEndpoints,
} = useGraph()
const { typebot, updateStep, updateChoiceItem } = useTypebot()
const { typebot, createEdge } = useTypebot()
const [mousePosition, setMousePosition] = useState({ x: 0, y: 0 })
const sourceBlock = useMemo(
@ -32,7 +33,7 @@ export const DrawingEdge = () => {
return getEndpointTopOffset(
graphPosition,
sourceEndpoints,
connectingIds.source.choiceItemId ??
connectingIds.source.nodeId ??
connectingIds.source.stepId + (connectingIds.source.conditionType ?? '')
)
// eslint-disable-next-line react-hooks/exhaustive-deps
@ -79,23 +80,8 @@ export const DrawingEdge = () => {
})
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,
})
}
assert(connectingIds.target)
createEdge({ from: connectingIds.source, to: connectingIds.target })
}
if ((mousePosition.x === 0 && mousePosition.y === 0) || !connectingIds)

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

@ -1,14 +1,11 @@
import { isDefined } from '@udecode/plate-core'
import assert from 'assert'
import { Coordinates, useGraph } from 'contexts/GraphContext'
import { useTypebot } from 'contexts/TypebotContext/TypebotContext'
import { ChoiceItem } from 'models'
import React, { useEffect, useMemo, useState } from 'react'
import {
getAnchorsPosition,
computeEdgePath,
getEndpointTopOffset,
getTarget,
getSourceEndpointId,
} from 'services/graph'
export type AnchorsPositionProps = {
@ -18,44 +15,31 @@ 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
}) => {
export const Edge = ({ edgeId }: { edgeId: string }) => {
const { typebot } = useTypebot()
const { previewingIds, sourceEndpoints, targetEndpoints, graphPosition } =
const { previewingEdgeId, sourceEndpoints, targetEndpoints, graphPosition } =
useGraph()
const step = typebot?.steps.byId[stepId]
const isPreviewing = useMemo(
() =>
previewingIds.sourceId === step?.blockId &&
previewingIds.targetId === step?.target?.blockId,
[previewingIds.sourceId, previewingIds.targetId, step]
const edge = useMemo(
() => typebot?.edges.byId[edgeId],
[edgeId, typebot?.edges.byId]
)
const isPreviewing = previewingEdgeId === edgeId
const [sourceTop, setSourceTop] = useState(
getEndpointTopOffset(graphPosition, sourceEndpoints, item?.id ?? step?.id)
getEndpointTopOffset(
graphPosition,
sourceEndpoints,
getSourceEndpointId(edge)
)
)
const [targetTop, setTargetTop] = useState(
getEndpointTopOffset(graphPosition, targetEndpoints, step?.id)
getEndpointTopOffset(graphPosition, targetEndpoints, edge?.to.stepId)
)
useEffect(() => {
const newSourceTop = getEndpointTopOffset(
graphPosition,
sourceEndpoints,
getSourceEndpointId()
getSourceEndpointId(edge)
)
const sensibilityThreshold = 10
const newSourceTopIsTooClose =
@ -66,26 +50,12 @@ export const Edge = ({
// 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)
if (!edge) return
const newTargetTop = getEndpointTopOffset(
graphPosition,
targetEndpoints,
target?.blockId ?? target?.stepId
edge?.to.stepId
)
const sensibilityThreshold = 10
const newSourceTopIsTooClose =
@ -97,20 +67,17 @@ export const Edge = ({
}, [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 = getTarget(step, type)?.blockId
assert(isDefined(targetBlockId))
const targetBlock = typebot.blocks.byId[targetBlockId]
if (!typebot || !edge?.from.stepId) return {}
const sourceBlock = typebot.blocks.byId[edge.from.blockId]
const targetBlock = typebot.blocks.byId[edge.to.blockId]
return {
sourceBlock,
targetBlock,
}
}, [stepId, type, typebot])
}, [edge?.from.blockId, edge?.from.stepId, edge?.to.blockId, typebot])
const path = useMemo(() => {
if (!sourceBlock || !targetBlock || !step) return ``
if (!sourceBlock || !targetBlock) return ``
const anchorsPosition = getAnchorsPosition({
sourceBlock,
targetBlock,
@ -118,7 +85,7 @@ export const Edge = ({
targetTop,
})
return computeEdgePath(anchorsPosition)
}, [sourceBlock, sourceTop, step, targetBlock, targetTop])
}, [sourceBlock, sourceTop, targetBlock, targetTop])
if (sourceTop === 0) return <></>
return (

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

@ -1,39 +1,11 @@
import { chakra } from '@chakra-ui/system'
import { useTypebot } from 'contexts/TypebotContext/TypebotContext'
import { ChoiceItem, ConditionStep } from 'models'
import React, { useMemo } from 'react'
import { isConditionStep, isDefined, isSingleChoiceInput } from 'utils'
import React from 'react'
import { DrawingEdge } from './DrawingEdge'
import { Edge, EdgeType } from './Edge'
import { Edge } from './Edge'
export const Edges = () => {
const { typebot } = useTypebot()
const stepIdsWithTarget: string[] = useMemo(() => {
if (!typebot) return []
return typebot.steps.allIds.filter((stepId) =>
isDefined(typebot.steps.byId[stepId].target)
)
}, [typebot])
const singleChoiceItemsWithTarget: ChoiceItem[] = useMemo(() => {
if (!typebot) return []
return typebot.choiceItems.allIds
.filter(
(itemId) =>
isDefined(typebot.choiceItems.byId[itemId].target) &&
isSingleChoiceInput(
typebot.steps.byId[typebot.choiceItems.byId[itemId].stepId]
)
)
.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
@ -45,19 +17,8 @@ export const Edges = () => {
top="0"
>
<DrawingEdge />
{stepIdsWithTarget.map((stepId) => (
<Edge key={stepId} stepId={stepId} type={EdgeType.STEP} />
))}
{singleChoiceItemsWithTarget.map((item) => (
<Edge
key={item.id}
stepId={item.stepId}
item={item}
type={EdgeType.CHOICE_ITEM}
/>
))}
{conditionStepIdsWithTarget?.map((stepId) => (
<ConditionStepEdges key={stepId} stepId={stepId} />
{typebot?.edges.allIds.map((edgeId) => (
<Edge key={edgeId} edgeId={edgeId} />
))}
<marker
id={'arrow'}
@ -92,18 +53,3 @@ 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} />
)}
</>
)
}