Browse Source

#41 fix: resize flowChart's size when window size changes

master
smallstonesk 4 years ago
parent
commit
c56d422508
  1. 20
      packages/core/src/mods/flowChart/index.tsx

20
packages/core/src/mods/flowChart/index.tsx

@ -32,6 +32,7 @@ const defaultMenuInfo = {
const FlowChart: React.FC<IProps> = (props) => { const FlowChart: React.FC<IProps> = (props) => {
const { onReady } = props; const { onReady } = props;
const wrapperRef = useRef<HTMLDivElement>(null);
const graphRef = useRef<HTMLDivElement>(null); const graphRef = useRef<HTMLDivElement>(null);
const miniMapRef = useRef<HTMLDivElement>(null); const miniMapRef = useRef<HTMLDivElement>(null);
const [flowChart, setFlowChart] = useState<Graph>(); const [flowChart, setFlowChart] = useState<Graph>();
@ -46,6 +47,23 @@ const FlowChart: React.FC<IProps> = (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 // NOTE: listen toggling context menu event
useEffect(() => { useEffect(() => {
const showHandler = (info: IMenuInfo) => { const showHandler = (info: IMenuInfo) => {
@ -81,7 +99,7 @@ const FlowChart: React.FC<IProps> = (props) => {
}; };
return ( return (
<div className={styles.container}> <div className={styles.container} ref={wrapperRef}>
<div className={styles.flowChart} ref={graphRef} /> <div className={styles.flowChart} ref={graphRef} />
<div className={styles.miniMap} ref={miniMapRef} /> <div className={styles.miniMap} ref={miniMapRef} />
{flowChart && <FlowChartContextMenu {...contextMenuInfo} flowChart={flowChart} />} {flowChart && <FlowChartContextMenu {...contextMenuInfo} flowChart={flowChart} />}

Loading…
Cancel
Save