File size: 2,815 Bytes
be99f83 dcce454 438f028 dcce454 be99f83 5365cac dcce454 5365cac be99f83 5365cac e3322d7 be99f83 e3322d7 dcce454 09502ac be99f83 dcce454 be99f83 5365cac 09502ac 5365cac 09502ac be99f83 e3322d7 5365cac be99f83 dcce454 be99f83 dcce454 be99f83 e3322d7 be99f83 dcce454 be99f83 dcce454 5365cac 438f028 dcce454 5365cac dcce454 5365cac dcce454 be99f83 5365cac e3322d7 be99f83 8da11cb be99f83 dcce454 5365cac 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 116 |
import { useCallback } from 'react';
import ReactFlow, {
Background,
ConnectionMode,
Controls,
MarkerType,
NodeMouseHandler,
} from 'reactflow';
import 'reactflow/dist/style.css';
import { NodeContextMenu, useHandleNodeContextMenu } from './context-menu';
import { ButtonEdge } from './edge';
import FlowDrawer from '../flow-drawer';
import {
useHandleDrop,
useHandleKeyUp,
useSelectCanvasData,
useShowDrawer,
} from '../hooks';
import { TextUpdaterNode } from './node';
import ChatDrawer from '../chat/drawer';
import styles from './index.less';
const nodeTypes = { textUpdater: TextUpdaterNode };
const edgeTypes = {
buttonEdge: ButtonEdge,
};
interface IProps {
sideWidth: number;
chatDrawerVisible: boolean;
hideChatDrawer(): void;
}
function FlowCanvas({ sideWidth, chatDrawerVisible, hideChatDrawer }: IProps) {
const {
nodes,
edges,
onConnect,
onEdgesChange,
onNodesChange,
onSelectionChange,
} = useSelectCanvasData();
const { ref, menu, onNodeContextMenu, onPaneClick } =
useHandleNodeContextMenu(sideWidth);
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
ref={ref}
connectionMode={ConnectionMode.Loose}
nodes={nodes}
onNodesChange={onNodesChange}
onNodeContextMenu={onNodeContextMenu}
edges={edges}
onEdgesChange={onEdgesChange}
fitView
onConnect={onConnect}
nodeTypes={nodeTypes}
edgeTypes={edgeTypes}
onPaneClick={onPaneClick}
onDrop={onDrop}
onDragOver={onDragOver}
onNodeClick={onNodeClick}
onInit={setReactFlowInstance}
onKeyUp={handleKeyUp}
onSelectionChange={onSelectionChange}
nodeOrigin={[0.5, 0]}
onChange={(...params) => {
console.info('params:', ...params);
}}
defaultEdgeOptions={{
type: 'buttonEdge',
markerEnd: {
type: MarkerType.ArrowClosed,
},
}}
>
<Background />
<Controls />
{Object.keys(menu).length > 0 && (
<NodeContextMenu onClick={onPaneClick} {...(menu as any)} />
)}
</ReactFlow>
<FlowDrawer
node={clickedNode}
visible={drawerVisible}
hideModal={hideDrawer}
></FlowDrawer>
<ChatDrawer
visible={chatDrawerVisible}
hideModal={hideChatDrawer}
></ChatDrawer>
</div>
);
}
export default FlowCanvas;
|