File size: 2,417 Bytes
be99f83 dcce454 be99f83 5365cac dcce454 5365cac be99f83 5365cac e3322d7 be99f83 e3322d7 dcce454 be99f83 dcce454 be99f83 5365cac be99f83 e3322d7 5365cac be99f83 dcce454 be99f83 dcce454 be99f83 e3322d7 be99f83 dcce454 be99f83 dcce454 5365cac dcce454 5365cac dcce454 5365cac dcce454 be99f83 5365cac e3322d7 be99f83 dcce454 5365cac dcce454 be99f83 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 |
import { useCallback } from 'react';
import ReactFlow, {
Background,
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 styles from './index.less';
const nodeTypes = { textUpdater: TextUpdaterNode };
const edgeTypes = {
buttonEdge: ButtonEdge,
};
interface IProps {
sideWidth: number;
}
function FlowCanvas({ sideWidth }: 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}
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]}
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>
</div>
);
}
export default FlowCanvas;
|