92 lines
2.5 KiB
TypeScript
92 lines
2.5 KiB
TypeScript
import { Flex, useEventListener } from '@chakra-ui/react'
|
|
import React, { useRef, useMemo, useEffect } from 'react'
|
|
import { blockWidth, useGraph } from 'contexts/GraphContext'
|
|
import { BlockNode } from './BlockNode/BlockNode'
|
|
import { useDnd } from 'contexts/DndContext'
|
|
import { Edges } from './Edges'
|
|
import { useTypebot } from 'contexts/TypebotContext'
|
|
import { StartBlockNode } from './BlockNode/StartBlockNode'
|
|
|
|
const Graph = () => {
|
|
const { draggedStepType, setDraggedStepType, draggedStep, setDraggedStep } =
|
|
useDnd()
|
|
const graphRef = useRef<HTMLDivElement | null>(null)
|
|
const graphContainerRef = useRef<HTMLDivElement | null>(null)
|
|
const { typebot } = useTypebot()
|
|
const {
|
|
blocks,
|
|
setBlocks,
|
|
graphPosition,
|
|
setGraphPosition,
|
|
addNewBlock,
|
|
setStartBlock,
|
|
startBlock,
|
|
} = useGraph()
|
|
const transform = useMemo(
|
|
() =>
|
|
`translate(${graphPosition.x}px, ${graphPosition.y}px) scale(${graphPosition.scale})`,
|
|
[graphPosition]
|
|
)
|
|
|
|
useEffect(() => {
|
|
if (!typebot) return
|
|
setBlocks(typebot.blocks)
|
|
setStartBlock(typebot.startBlock)
|
|
// eslint-disable-next-line react-hooks/exhaustive-deps
|
|
}, [typebot?.blocks])
|
|
|
|
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)
|
|
|
|
const handleMouseUp = (e: MouseEvent) => {
|
|
if (!draggedStep && !draggedStepType) return
|
|
addNewBlock({
|
|
step: draggedStep,
|
|
type: draggedStepType,
|
|
x: e.x - graphPosition.x - blockWidth / 3,
|
|
y: e.y - graphPosition.y - 20,
|
|
})
|
|
setDraggedStep(undefined)
|
|
setDraggedStepType(undefined)
|
|
}
|
|
useEventListener('mouseup', handleMouseUp, graphContainerRef.current)
|
|
|
|
if (!typebot) return <></>
|
|
return (
|
|
<Flex ref={graphContainerRef} pos="relative" flex="1" h="full">
|
|
<Flex
|
|
ref={graphRef}
|
|
flex="1"
|
|
h="full"
|
|
style={{
|
|
transform,
|
|
}}
|
|
>
|
|
<Edges />
|
|
{startBlock && <StartBlockNode block={startBlock} />}
|
|
{blocks.map((block) => (
|
|
<BlockNode block={block} key={block.id} />
|
|
))}
|
|
</Flex>
|
|
</Flex>
|
|
)
|
|
}
|
|
|
|
export default Graph
|