File size: 2,656 Bytes
be99f83 dcce454 438f028 dcce454 be99f83 5365cac dcce454 be99f83 5365cac e3322d7 be99f83 e3322d7 67bae62 e3322d7 ddd1aa2 dcce454 09502ac be99f83 457b4e6 be99f83 457b4e6 dcce454 be99f83 5365cac 09502ac 5365cac 4a674c0 be99f83 67bae62 e3322d7 be99f83 dcce454 be99f83 dcce454 be99f83 e3322d7 be99f83 dcce454 be99f83 dcce454 438f028 dcce454 5365cac dcce454 be99f83 5365cac e3322d7 be99f83 457b4e6 8da11cb be99f83 dcce454 be99f83 09502ac dcce454 |
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 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 |
import { useCallback } from 'react';
import ReactFlow, {
Background,
ConnectionMode,
Controls,
MarkerType,
NodeMouseHandler,
} from 'reactflow';
import 'reactflow/dist/style.css';
import { ButtonEdge } from './edge';
import FlowDrawer from '../flow-drawer';
import {
useHandleDrop,
useHandleKeyUp,
useSelectCanvasData,
useShowDrawer,
useValidateConnection,
} from '../hooks';
import { RagNode } from './node';
import ChatDrawer from '../chat/drawer';
import styles from './index.less';
import { BeginNode } from './node/begin-node';
import { CategorizeNode } from './node/categorize-node';
const nodeTypes = {
ragNode: RagNode,
categorizeNode: CategorizeNode,
beginNode: BeginNode,
};
const edgeTypes = {
buttonEdge: ButtonEdge,
};
interface IProps {
chatDrawerVisible: boolean;
hideChatDrawer(): void;
}
function FlowCanvas({ chatDrawerVisible, hideChatDrawer }: IProps) {
const {
nodes,
edges,
onConnect,
onEdgesChange,
onNodesChange,
onSelectionChange,
} = useSelectCanvasData();
const isValidConnection = useValidateConnection();
const { drawerVisible, hideDrawer, showDrawer, clickedNode } =
useShowDrawer();
const onNodeClick: NodeMouseHandler = useCallback(
(e, node) => {
showDrawer(node);
},
[showDrawer],
);
const { onDrop, onDragOver, setReactFlowInstance } = useHandleDrop();
const { handleKeyUp } = useHandleKeyUp();
return (
<div className={styles.canvasWrapper}>
<ReactFlow
connectionMode={ConnectionMode.Loose}
nodes={nodes}
onNodesChange={onNodesChange}
edges={edges}
onEdgesChange={onEdgesChange}
fitView
onConnect={onConnect}
nodeTypes={nodeTypes}
edgeTypes={edgeTypes}
onDrop={onDrop}
onDragOver={onDragOver}
onNodeClick={onNodeClick}
onInit={setReactFlowInstance}
onKeyUp={handleKeyUp}
onSelectionChange={onSelectionChange}
nodeOrigin={[0.5, 0]}
isValidConnection={isValidConnection}
onChange={(...params) => {
console.info('params:', ...params);
}}
defaultEdgeOptions={{
type: 'buttonEdge',
markerEnd: {
type: MarkerType.ArrowClosed,
},
}}
>
<Background />
<Controls />
</ReactFlow>
<FlowDrawer
node={clickedNode}
visible={drawerVisible}
hideModal={hideDrawer}
></FlowDrawer>
<ChatDrawer
visible={chatDrawerVisible}
hideModal={hideChatDrawer}
></ChatDrawer>
</div>
);
}
export default FlowCanvas;
|