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.
This commit is contained in:
Baptiste Arnaud
@ -1,59 +0,0 @@
|
||||
import { Flex, FlexProps, useEventListener } from '@chakra-ui/react'
|
||||
import { useAnalyticsGraph } from 'contexts/AnalyticsGraphProvider'
|
||||
import React, { useMemo, useRef } from 'react'
|
||||
import { AnswersCount } from 'services/analytics'
|
||||
import { BlockNode } from './blocks/BlockNode'
|
||||
import { Edges } from './Edges'
|
||||
|
||||
const AnalyticsGraph = ({
|
||||
answersCounts,
|
||||
...props
|
||||
}: { answersCounts?: AnswersCount[] } & FlexProps) => {
|
||||
const { typebot, graphPosition, setGraphPosition } = useAnalyticsGraph()
|
||||
const graphContainerRef = useRef<HTMLDivElement | null>(null)
|
||||
const transform = useMemo(
|
||||
() =>
|
||||
`translate(${graphPosition.x}px, ${graphPosition.y}px) scale(${graphPosition.scale})`,
|
||||
[graphPosition]
|
||||
)
|
||||
|
||||
const handleMouseWheel = (e: WheelEvent) => {
|
||||
e.preventDefault()
|
||||
const isPinchingTrackpad = e.ctrlKey
|
||||
if (isPinchingTrackpad) {
|
||||
const scale = graphPosition.scale - e.deltaY * 0.01
|
||||
if (scale <= 0.2 || scale >= 1) return
|
||||
setGraphPosition({
|
||||
...graphPosition,
|
||||
scale,
|
||||
})
|
||||
} else
|
||||
setGraphPosition({
|
||||
...graphPosition,
|
||||
x: graphPosition.x - e.deltaX,
|
||||
y: graphPosition.y - e.deltaY,
|
||||
})
|
||||
}
|
||||
useEventListener('wheel', handleMouseWheel, graphContainerRef.current)
|
||||
|
||||
if (!typebot) return <></>
|
||||
return (
|
||||
<Flex ref={graphContainerRef} {...props}>
|
||||
<Flex
|
||||
flex="1"
|
||||
boxSize={'200px'}
|
||||
maxW={'200px'}
|
||||
style={{
|
||||
transform,
|
||||
}}
|
||||
>
|
||||
<Edges answersCounts={answersCounts} />
|
||||
{typebot.blocks.allIds.map((blockId) => (
|
||||
<BlockNode block={typebot.blocks.byId[blockId]} key={blockId} />
|
||||
))}
|
||||
</Flex>
|
||||
</Flex>
|
||||
)
|
||||
}
|
||||
|
||||
export default AnalyticsGraph
|
||||
@ -1,19 +0,0 @@
|
||||
import { useAnalyticsGraph } from 'contexts/AnalyticsGraphProvider'
|
||||
import React, { useMemo } from 'react'
|
||||
import { computeDropOffPath } from 'services/graph'
|
||||
|
||||
type Props = {
|
||||
blockId: string
|
||||
}
|
||||
export const DropOffEdge = ({ blockId }: Props) => {
|
||||
const { typebot } = useAnalyticsGraph()
|
||||
|
||||
const path = useMemo(() => {
|
||||
if (!typebot) return
|
||||
const block = typebot.blocks.byId[blockId]
|
||||
if (!block) return ''
|
||||
return computeDropOffPath(block.graphCoordinates, block.stepIds.length - 1)
|
||||
}, [blockId, typebot])
|
||||
|
||||
return <path d={path} stroke={'#E53E3E'} strokeWidth="2px" fill="none" />
|
||||
}
|
||||
@ -1,88 +0,0 @@
|
||||
import { useAnalyticsGraph } from 'contexts/AnalyticsGraphProvider'
|
||||
import { useGraph } from 'contexts/GraphContext'
|
||||
import React, { useEffect, useMemo, useState } from 'react'
|
||||
import {
|
||||
getAnchorsPosition,
|
||||
computeEdgePath,
|
||||
getEndpointTopOffset,
|
||||
getSourceEndpointId,
|
||||
} from 'services/graph'
|
||||
|
||||
type Props = { edgeId: string }
|
||||
|
||||
export const Edge = ({ edgeId }: Props) => {
|
||||
const { typebot } = useAnalyticsGraph()
|
||||
const edge = typebot?.edges.byId[edgeId]
|
||||
const { sourceEndpoints, targetEndpoints, graphPosition } = useGraph()
|
||||
const [sourceTop, setSourceTop] = useState(
|
||||
getEndpointTopOffset(
|
||||
graphPosition,
|
||||
sourceEndpoints,
|
||||
getSourceEndpointId(edge)
|
||||
)
|
||||
)
|
||||
const [targetTop, setTargetTop] = useState(
|
||||
getEndpointTopOffset(graphPosition, sourceEndpoints, edge?.to.stepId)
|
||||
)
|
||||
|
||||
useEffect(() => {
|
||||
const newSourceTop = getEndpointTopOffset(
|
||||
graphPosition,
|
||||
sourceEndpoints,
|
||||
getSourceEndpointId(edge)
|
||||
)
|
||||
const sensibilityThreshold = 10
|
||||
const newSourceTopIsTooClose =
|
||||
sourceTop < newSourceTop + sensibilityThreshold &&
|
||||
sourceTop > newSourceTop - sensibilityThreshold
|
||||
if (newSourceTopIsTooClose) return
|
||||
setSourceTop(newSourceTop)
|
||||
// eslint-disable-next-line react-hooks/exhaustive-deps
|
||||
}, [graphPosition])
|
||||
|
||||
useEffect(() => {
|
||||
const newTargetTop = getEndpointTopOffset(
|
||||
graphPosition,
|
||||
targetEndpoints,
|
||||
edge?.to.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
|
||||
}, [graphPosition])
|
||||
|
||||
const { sourceBlock, targetBlock } = useMemo(() => {
|
||||
if (!typebot || !edge) return {}
|
||||
const targetBlock = typebot.blocks.byId[edge.to.blockId]
|
||||
const sourceBlock = typebot.blocks.byId[edge.from.blockId]
|
||||
return {
|
||||
sourceBlock,
|
||||
targetBlock,
|
||||
}
|
||||
}, [edge, typebot])
|
||||
|
||||
const path = useMemo(() => {
|
||||
if (!sourceBlock || !targetBlock) return ``
|
||||
const anchorsPosition = getAnchorsPosition({
|
||||
sourceBlock,
|
||||
targetBlock,
|
||||
sourceTop,
|
||||
targetTop,
|
||||
})
|
||||
return computeEdgePath(anchorsPosition)
|
||||
}, [sourceBlock, sourceTop, targetBlock, targetTop])
|
||||
|
||||
return (
|
||||
<path
|
||||
d={path}
|
||||
stroke={'#718096'}
|
||||
strokeWidth="2px"
|
||||
markerEnd="url(#arrow)"
|
||||
fill="none"
|
||||
/>
|
||||
)
|
||||
}
|
||||
@ -1,58 +0,0 @@
|
||||
import { chakra } from '@chakra-ui/system'
|
||||
import { useAnalyticsGraph } from 'contexts/AnalyticsGraphProvider'
|
||||
import React from 'react'
|
||||
import { AnswersCount } from 'services/analytics'
|
||||
import { DropOffBlock } from '../blocks/DropOffBlock'
|
||||
import { DropOffEdge } from './DropOffEdge'
|
||||
import { Edge } from './Edge'
|
||||
|
||||
type Props = { answersCounts?: AnswersCount[] }
|
||||
|
||||
export const Edges = ({ answersCounts }: Props) => {
|
||||
const { typebot } = useAnalyticsGraph()
|
||||
|
||||
return (
|
||||
<>
|
||||
<chakra.svg
|
||||
width="full"
|
||||
height="full"
|
||||
overflow="visible"
|
||||
pos="absolute"
|
||||
left="0"
|
||||
top="0"
|
||||
>
|
||||
{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>
|
||||
{answersCounts?.map((answersCount) => (
|
||||
<DropOffEdge
|
||||
key={answersCount.blockId}
|
||||
blockId={answersCount.blockId}
|
||||
/>
|
||||
))}
|
||||
</chakra.svg>
|
||||
{answersCounts?.map((answersCount) => (
|
||||
<DropOffBlock
|
||||
key={answersCount.blockId}
|
||||
answersCounts={answersCounts}
|
||||
blockId={answersCount.blockId}
|
||||
/>
|
||||
))}
|
||||
</>
|
||||
)
|
||||
}
|
||||
@ -1 +0,0 @@
|
||||
export { Edges } from './Edges'
|
||||
@ -1,62 +0,0 @@
|
||||
import {
|
||||
Editable,
|
||||
EditableInput,
|
||||
EditablePreview,
|
||||
Stack,
|
||||
useEventListener,
|
||||
} from '@chakra-ui/react'
|
||||
import React, { useState } from 'react'
|
||||
import { useAnalyticsGraph } from 'contexts/AnalyticsGraphProvider'
|
||||
import { StepsList } from './StepsList'
|
||||
import { Block } from 'models'
|
||||
|
||||
type Props = {
|
||||
block: Block
|
||||
}
|
||||
|
||||
export const BlockNode = ({ block }: Props) => {
|
||||
const { updateBlockPosition } = useAnalyticsGraph()
|
||||
const [isMouseDown, setIsMouseDown] = useState(false)
|
||||
|
||||
const handleMouseDown = () => {
|
||||
setIsMouseDown(true)
|
||||
}
|
||||
const handleMouseUp = () => {
|
||||
setIsMouseDown(false)
|
||||
}
|
||||
|
||||
const handleMouseMove = (event: MouseEvent) => {
|
||||
if (!isMouseDown) return
|
||||
const { movementX, movementY } = event
|
||||
|
||||
updateBlockPosition(block.id, {
|
||||
x: block.graphCoordinates.x + movementX,
|
||||
y: block.graphCoordinates.y + movementY,
|
||||
})
|
||||
}
|
||||
|
||||
useEventListener('mousemove', handleMouseMove)
|
||||
|
||||
return (
|
||||
<Stack
|
||||
p="4"
|
||||
rounded="lg"
|
||||
bgColor="blue.50"
|
||||
borderWidth="2px"
|
||||
minW="300px"
|
||||
transition="border 300ms"
|
||||
pos="absolute"
|
||||
style={{
|
||||
transform: `translate(${block.graphCoordinates.x}px, ${block.graphCoordinates.y}px)`,
|
||||
}}
|
||||
onMouseDown={handleMouseDown}
|
||||
onMouseUp={handleMouseUp}
|
||||
>
|
||||
<Editable defaultValue={block.title}>
|
||||
<EditablePreview px="1" userSelect={'none'} />
|
||||
<EditableInput minW="0" px="1" />
|
||||
</Editable>
|
||||
<StepsList stepIds={block.stepIds} />
|
||||
</Stack>
|
||||
)
|
||||
}
|
||||
@ -1,72 +0,0 @@
|
||||
import { Tag, Text, VStack } from '@chakra-ui/react'
|
||||
import { useAnalyticsGraph } from 'contexts/AnalyticsGraphProvider'
|
||||
import React, { useMemo } from 'react'
|
||||
import { AnswersCount } from 'services/analytics'
|
||||
import { computeSourceCoordinates } from 'services/graph'
|
||||
import { isDefined } from 'utils'
|
||||
|
||||
type Props = {
|
||||
answersCounts: AnswersCount[]
|
||||
blockId: string
|
||||
}
|
||||
|
||||
export const DropOffBlock = ({ answersCounts, blockId }: Props) => {
|
||||
const { typebot } = useAnalyticsGraph()
|
||||
|
||||
const totalAnswers = useMemo(
|
||||
() => answersCounts.find((a) => a.blockId === blockId)?.totalAnswers,
|
||||
[answersCounts, blockId]
|
||||
)
|
||||
|
||||
const { totalDroppedUser, dropOffRate } = useMemo(() => {
|
||||
if (!typebot || totalAnswers === undefined)
|
||||
return { previousTotal: undefined, dropOffRate: undefined }
|
||||
const previousBlockIds = typebot.edges.allIds
|
||||
.map((edgeId) => {
|
||||
const edge = typebot.edges.byId[edgeId]
|
||||
return edge.to.blockId === blockId ? edge.from.blockId : undefined
|
||||
})
|
||||
.filter((blockId) => isDefined(blockId))
|
||||
const previousTotal = answersCounts
|
||||
.filter((a) => previousBlockIds.includes(a.blockId))
|
||||
.reduce((prev, acc) => acc.totalAnswers + prev, 0)
|
||||
if (previousTotal === 0)
|
||||
return { previousTotal: undefined, dropOffRate: undefined }
|
||||
const totalDroppedUser = previousTotal - totalAnswers
|
||||
|
||||
return {
|
||||
totalDroppedUser,
|
||||
dropOffRate: Math.round((totalDroppedUser / previousTotal) * 100),
|
||||
}
|
||||
}, [answersCounts, blockId, totalAnswers, typebot])
|
||||
|
||||
const labelCoordinates = useMemo(() => {
|
||||
if (!typebot) return { x: 0, y: 0 }
|
||||
const sourceBlock = typebot?.blocks.byId[blockId]
|
||||
if (!sourceBlock) return
|
||||
return computeSourceCoordinates(
|
||||
sourceBlock?.graphCoordinates,
|
||||
sourceBlock?.stepIds.length - 1
|
||||
)
|
||||
}, [blockId, typebot])
|
||||
|
||||
if (!labelCoordinates) return <></>
|
||||
return (
|
||||
<VStack
|
||||
bgColor={'red.500'}
|
||||
color="white"
|
||||
rounded="md"
|
||||
p="2"
|
||||
justifyContent="center"
|
||||
style={{
|
||||
transform: `translate(${labelCoordinates.x - 20}px, ${
|
||||
labelCoordinates.y + 80
|
||||
}px)`,
|
||||
}}
|
||||
pos="absolute"
|
||||
>
|
||||
<Text>{dropOffRate}%</Text>
|
||||
<Tag colorScheme="red">{totalDroppedUser} users</Tag>
|
||||
</VStack>
|
||||
)
|
||||
}
|
||||
@ -1,24 +0,0 @@
|
||||
import { Flex, Stack } from '@chakra-ui/react'
|
||||
import { StepNodeOverlay } from 'components/board/graph/BlockNode/StepNode'
|
||||
import { useTypebot } from 'contexts/TypebotContext/TypebotContext'
|
||||
|
||||
export const StepsList = ({ stepIds }: { stepIds: string[] }) => {
|
||||
const { typebot } = useTypebot()
|
||||
return (
|
||||
<Stack spacing={1} transition="none">
|
||||
<Flex h={'2px'} bgColor={'gray.400'} visibility={'hidden'} rounded="lg" />
|
||||
{typebot &&
|
||||
stepIds.map((stepId) => (
|
||||
<Stack key={stepId} spacing={1}>
|
||||
<StepNodeOverlay step={typebot?.steps.byId[stepId]} />
|
||||
<Flex
|
||||
h={'2px'}
|
||||
bgColor={'gray.400'}
|
||||
visibility={'hidden'}
|
||||
rounded="lg"
|
||||
/>
|
||||
</Stack>
|
||||
))}
|
||||
</Stack>
|
||||
)
|
||||
}
|
||||
Reference in New Issue
Block a user