|
|
@ -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> |
|
|
|