1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
| import {
| memo,
| useCallback,
| useState,
| } from 'react'
| import cn from 'classnames'
| import { useNodesInteractions } from '../../hooks'
| import type {
| BlockEnum,
| OnSelectBlock,
| } from '../../types'
| import BlockSelector from '../../block-selector'
|
| type InsertBlockProps = {
| startNodeId: string
| availableBlocksTypes: BlockEnum[]
| }
| const InsertBlock = ({
| startNodeId,
| availableBlocksTypes,
| }: InsertBlockProps) => {
| const [open, setOpen] = useState(false)
| const { handleNodeAdd } = useNodesInteractions()
|
| const handleOpenChange = useCallback((v: boolean) => {
| setOpen(v)
| }, [])
| const handleInsert = useCallback<OnSelectBlock>((nodeType, toolDefaultValue) => {
| handleNodeAdd(
| {
| nodeType,
| toolDefaultValue,
| },
| {
| nextNodeId: startNodeId,
| nextNodeTargetHandle: 'target',
| },
| )
| }, [startNodeId, handleNodeAdd])
|
| return (
| <div
| className={cn(
| 'nopan nodrag',
| 'absolute left-1/2 top-1/2 hidden -translate-x-1/2 -translate-y-1/2 group-hover/insert:block',
| open && '!block',
| )}
| >
| <BlockSelector
| open={open}
| onOpenChange={handleOpenChange}
| asChild
| onSelect={handleInsert}
| availableBlocksTypes={availableBlocksTypes}
| triggerClassName={() => 'hover:scale-125 transition-all'}
| />
| </div>
| )
| }
|
| export default memo(InsertBlock)
|
|
