You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.

31 lines
797 B

import React, {useRef, useEffect} from 'react';
import styles from './index.module.less';
import {Graph} from '@antv/x6';
import createFlowChart from './createFlowChart';
interface IProps {
onReady: (graph: Graph) => void;
}
const FlowChart: React.FC<IProps> = props => {
const {onReady} = props;
const graphRef = useRef<HTMLDivElement>(null);
const miniMapRef = useRef<HTMLDivElement>(null);
useEffect(() => {
if(graphRef.current && miniMapRef.current) {
const graph = createFlowChart(graphRef.current, miniMapRef.current);
onReady(graph);
}
}, []);
return (
<div className={styles.container}>
<div className={styles.flowChart} ref={graphRef}/>
<div className={styles.miniMap} ref={miniMapRef}/>
</div>
);
};
export default FlowChart;