diff --git a/packages/core/src/mods/flowChart/index.tsx b/packages/core/src/mods/flowChart/index.tsx index f68ceff..7b02df2 100644 --- a/packages/core/src/mods/flowChart/index.tsx +++ b/packages/core/src/mods/flowChart/index.tsx @@ -32,6 +32,7 @@ const defaultMenuInfo = { const FlowChart: React.FC = (props) => { const { onReady } = props; + const wrapperRef = useRef(null); const graphRef = useRef(null); const miniMapRef = useRef(null); const [flowChart, setFlowChart] = useState(); @@ -46,6 +47,23 @@ const FlowChart: React.FC = (props) => { } }, []); + // resize flowChart's size when window size changes + useEffect(() => { + const handler = () => { + requestAnimationFrame(() => { + if(flowChart && wrapperRef && wrapperRef.current) { + const width = wrapperRef.current.clientWidth; + const height = wrapperRef.current.clientHeight; + flowChart.resize(width, height); + } + }); + }; + window.addEventListener('resize', handler); + return () => { + window.removeEventListener('resize', handler); + }; + }, [flowChart, wrapperRef]); + // NOTE: listen toggling context menu event useEffect(() => { const showHandler = (info: IMenuInfo) => { @@ -81,7 +99,7 @@ const FlowChart: React.FC = (props) => { }; return ( -
+
{flowChart && }