|  |  | @ -12,7 +12,7 @@ import Console from '../console'; | 
			
		
	
		
			
				
					|  |  |  | import InputPanel from './inputPanel'; | 
			
		
	
		
			
				
					|  |  |  | import JsonView from 'react-json-view'; | 
			
		
	
		
			
				
					|  |  |  | import { executeScript } from '../../utils'; | 
			
		
	
		
			
				
					|  |  |  | import { PlayCircleFilled } from '@ant-design/icons'; | 
			
		
	
		
			
				
					|  |  |  | import { PlayCircleFilled, LoadingOutlined } from '@ant-design/icons'; | 
			
		
	
		
			
				
					|  |  |  | import { compileForOnline } from '@imove/compile-code'; | 
			
		
	
		
			
				
					|  |  |  | import { toSelectedCellsJSON } from '../../utils/flowChartUtils'; | 
			
		
	
		
			
				
					|  |  |  | 
 | 
			
		
	
	
		
			
				
					|  |  | @ -53,12 +53,14 @@ interface ICodeRunProps { | 
			
		
	
		
			
				
					|  |  |  | const CodeRun: React.FC<ICodeRunProps> = (props) => { | 
			
		
	
		
			
				
					|  |  |  | 
 | 
			
		
	
		
			
				
					|  |  |  |   const {flowChart} = props; | 
			
		
	
		
			
				
					|  |  |  |   const [isRunning, setIsRunning] = useState(false); | 
			
		
	
		
			
				
					|  |  |  |   const [input, setInput] = useState(defaultInput); | 
			
		
	
		
			
				
					|  |  |  |   const [output, setOutput] = useState({}); | 
			
		
	
		
			
				
					|  |  |  | 
 | 
			
		
	
		
			
				
					|  |  |  |   useEffect(() => { | 
			
		
	
		
			
				
					|  |  |  |     // NOTE: listen the event that iMove online exec ends
 | 
			
		
	
		
			
				
					|  |  |  |     const handler = (data: any) => { | 
			
		
	
		
			
				
					|  |  |  |       setIsRunning(false); | 
			
		
	
		
			
				
					|  |  |  |       setOutput(data.detail || {}); | 
			
		
	
		
			
				
					|  |  |  |     }; | 
			
		
	
		
			
				
					|  |  |  |     window.addEventListener('iMoveOnlineExecEnds', handler); | 
			
		
	
	
		
			
				
					|  |  | @ -68,6 +70,7 @@ const CodeRun: React.FC<ICodeRunProps> = (props) => { | 
			
		
	
		
			
				
					|  |  |  |   }, []); | 
			
		
	
		
			
				
					|  |  |  | 
 | 
			
		
	
		
			
				
					|  |  |  |   const onClickRun = useCallback(() => { | 
			
		
	
		
			
				
					|  |  |  |     setIsRunning(true); | 
			
		
	
		
			
				
					|  |  |  |     const selectedCelssJson = toSelectedCellsJSON(flowChart); | 
			
		
	
		
			
				
					|  |  |  |     const compiledCode = compileForOnline(selectedCelssJson, input); | 
			
		
	
		
			
				
					|  |  |  |     executeScript(compiledCode); | 
			
		
	
	
		
			
				
					|  |  | @ -79,15 +82,21 @@ const CodeRun: React.FC<ICodeRunProps> = (props) => { | 
			
		
	
		
			
				
					|  |  |  | 
 | 
			
		
	
		
			
				
					|  |  |  |   return ( | 
			
		
	
		
			
				
					|  |  |  |     <div className={styles.container}> | 
			
		
	
		
			
				
					|  |  |  |       <SplitPane split={'horizontal'}> | 
			
		
	
		
			
				
					|  |  |  |         <Pane initialSize={'380px'} minSize={'43px'}> | 
			
		
	
		
			
				
					|  |  |  |           <SplitPane split={'vertical'}> | 
			
		
	
		
			
				
					|  |  |  |             <Pane className={styles.pane} minSize={'360px'} maxSize={'660px'}> | 
			
		
	
		
			
				
					|  |  |  |               <div className={styles.runWrapper}> | 
			
		
	
		
			
				
					|  |  |  |                 {isRunning ? ( | 
			
		
	
		
			
				
					|  |  |  |                   <Button size={'large'} type={'link'}> | 
			
		
	
		
			
				
					|  |  |  |                     <LoadingOutlined /> 运行中... | 
			
		
	
		
			
				
					|  |  |  |                   </Button> | 
			
		
	
		
			
				
					|  |  |  |                 ) : ( | 
			
		
	
		
			
				
					|  |  |  |                   <Button size={'large'} type={'link'} onClick={onClickRun}> | 
			
		
	
		
			
				
					|  |  |  |                     <PlayCircleFilled /> 运行代码 | 
			
		
	
		
			
				
					|  |  |  |                   </Button> | 
			
		
	
		
			
				
					|  |  |  |                 )} | 
			
		
	
		
			
				
					|  |  |  |               </div> | 
			
		
	
		
			
				
					|  |  |  |       <SplitPane split={'horizontal'}> | 
			
		
	
		
			
				
					|  |  |  |         <Pane initialSize={'380px'} minSize={'43px'}> | 
			
		
	
		
			
				
					|  |  |  |           <SplitPane split={'vertical'}> | 
			
		
	
		
			
				
					|  |  |  |             <Pane className={styles.pane} minSize={'360px'} maxSize={'660px'}> | 
			
		
	
		
			
				
					|  |  |  |               <Card title={'输入'}> | 
			
		
	
		
			
				
					|  |  |  |                 <InputPanel | 
			
		
	
		
			
				
					|  |  |  |                   data={input} | 
			
		
	
	
		
			
				
					|  |  | @ -109,7 +118,7 @@ const CodeRun: React.FC<ICodeRunProps> = (props) => { | 
			
		
	
		
			
				
					|  |  |  |             </Pane> | 
			
		
	
		
			
				
					|  |  |  |           </SplitPane> | 
			
		
	
		
			
				
					|  |  |  |         </Pane> | 
			
		
	
		
			
				
					|  |  |  |         <Pane className={styles.pane} minSize={'43px'}> | 
			
		
	
		
			
				
					|  |  |  |         <Pane className={styles.pane} minSize={'40px'}> | 
			
		
	
		
			
				
					|  |  |  |           <Console /> | 
			
		
	
		
			
				
					|  |  |  |         </Pane> | 
			
		
	
		
			
				
					|  |  |  |       </SplitPane> | 
			
		
	
	
		
			
				
					|  |  | 
 |