Browse Source

feat: add codeRun's runBtn and output displaying

master
smallstonesk 5 years ago
parent
commit
b64baa6e61
  1. 7
      packages/core/src/components/codeRun/index.module.less
  2. 39
      packages/core/src/components/codeRun/index.tsx
  3. 32
      packages/core/src/mods/settingBar/mods/testCase/index.tsx

7
packages/core/src/components/codeRun/index.module.less

@ -1,9 +1,16 @@
.container { .container {
position: relative;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
flex: 1; flex: 1;
height: 100%; height: 100%;
.runWrapper {
position: absolute;
top: 0;
right: 0;
}
.pane { .pane {
display: flex; display: flex;
flex: 1; flex: 1;

39
packages/core/src/components/codeRun/index.tsx

@ -1,13 +1,20 @@
import React, { import React, {
useState, useState,
useEffect,
useCallback, useCallback,
} from 'react'; } from 'react';
import styles from './index.module.less'; import styles from './index.module.less';
import { Button } from 'antd';
import { Graph } from '@antv/x6';
import Console from '../console'; import Console from '../console';
import InputPanel from './inputPanel'; import InputPanel from './inputPanel';
import JsonView from 'react-json-view'; import JsonView from 'react-json-view';
import { executeScript } from '../../utils';
import { PlayCircleFilled } from '@ant-design/icons';
import { compileForOnline } from '@imove/compile-code';
import { toSelectedCellsJSON } from '../../utils/flowChartUtils';
// FIXME: https://github.com/tomkp/react-split-pane/issues/541 // FIXME: https://github.com/tomkp/react-split-pane/issues/541
// @ts-ignore // @ts-ignore
@ -27,7 +34,7 @@ interface ICardProps {
} }
const Card: React.FC<ICardProps> = (props) => { const Card: React.FC<ICardProps> = (props) => {
const {title} = props; const { title } = props;
return ( return (
<div className={styles.card}> <div className={styles.card}>
@ -40,19 +47,43 @@ const Card: React.FC<ICardProps> = (props) => {
}; };
interface ICodeRunProps { interface ICodeRunProps {
flowChart: Graph;
} }
const CodeRun: React.FC<ICodeRunProps> = (props) => { const CodeRun: React.FC<ICodeRunProps> = (props) => {
const {flowChart} = props;
const [input, setInput] = useState(defaultInput); const [input, setInput] = useState(defaultInput);
const [output, setOutput] = useState({}); const [output, setOutput] = useState({});
useEffect(() => {
// NOTE: listen the event that iMove online exec ends
const handler = (data: any) => {
setOutput(data.detail || {});
};
window.addEventListener('iMoveOnlineExecEnds', handler);
return () => {
window.removeEventListener('iMoveOnlineExecEnds', handler);
};
}, []);
const onClickRun = useCallback(() => {
const selectedCelssJson = toSelectedCellsJSON(flowChart);
const compiledCode = compileForOnline(selectedCelssJson);
executeScript(compiledCode);
}, [flowChart]);
const onChangeInput = useCallback((val: any) => { const onChangeInput = useCallback((val: any) => {
setInput(val); setInput(val);
}, []); }, []);
return ( return (
<div className={styles.container}> <div className={styles.container}>
<div className={styles.runWrapper}>
<Button size={'large'} type={'link'} onClick={onClickRun}>
<PlayCircleFilled />
</Button>
</div>
<SplitPane split={'horizontal'}> <SplitPane split={'horizontal'}>
<Pane initialSize={'380px'} minSize={'43px'}> <Pane initialSize={'380px'} minSize={'43px'}>
<SplitPane split={'vertical'}> <SplitPane split={'vertical'}>
@ -72,13 +103,13 @@ const CodeRun: React.FC<ICodeRunProps> = (props) => {
enableClipboard={false} enableClipboard={false}
displayDataTypes={false} displayDataTypes={false}
displayObjectSize={false} displayObjectSize={false}
src={{}} src={output}
/> />
</Card> </Card>
</Pane> </Pane>
</SplitPane> </SplitPane>
</Pane> </Pane>
<Pane className={styles.pane} minSize={'150px'}> <Pane className={styles.pane} minSize={'43px'}>
<Card title={'控制台'}> <Card title={'控制台'}>
<Console /> <Console />
</Card> </Card>

32
packages/core/src/mods/settingBar/mods/testCase/index.tsx

@ -6,10 +6,7 @@ import React, {
import { Modal } from 'antd'; import { Modal } from 'antd';
import { Graph } from '@antv/x6'; import { Graph } from '@antv/x6';
import { executeScript } from '../../../../utils';
import CodeRun from '../../../../components/codeRun'; import CodeRun from '../../../../components/codeRun';
import { compileForOnline } from '@imove/compile-code';
import { toSelectedCellsJSON } from '../../../../utils/flowChartUtils';
interface IProps { interface IProps {
flowChart: Graph; flowChart: Graph;
@ -29,47 +26,36 @@ const TestCase: React.FC<IProps> = (props) => {
const showModal = useCallback(() => setVisible(true), []); const showModal = useCallback(() => setVisible(true), []);
const closeModal = useCallback(() => setVisible(false), []); const closeModal = useCallback(() => setVisible(false), []);
const runCode = useCallback(() => {
// TODO: 展示运行结果
const compiledCode = compileForOnline(toSelectedCellsJSON(flowChart));
executeScript(compiledCode);
}, []);
return ( return (
<EditModal <EditModal
visible={visible} visible={visible}
onOk={runCode} flowChart={flowChart}
onCancel={closeModal} onClose={closeModal}
/> />
); );
}; };
interface IEditModalProps { interface IEditModalProps {
visible: boolean; visible: boolean;
onOk: () => void; flowChart: Graph;
onCancel: () => void; onClose: () => void;
} }
const EditModal: React.FC<IEditModalProps> = (props): JSX.Element => { const EditModal: React.FC<IEditModalProps> = (props): JSX.Element => {
const { visible, onOk, onCancel } = props; const { visible, flowChart, onClose } = props;
const onChange = (value: any) => {
// console.log({ value })
}
return ( return (
<Modal <Modal
width={1000} width={1000}
centered={true} centered={true}
bodyStyle={{ padding: 0, height: 600 }} bodyStyle={{ padding: 0, height: 650 }}
title={'执行代码'} title={'执行代码'}
visible={visible} visible={visible}
okText={'运行'} footer={null}
cancelText={'取消'} onCancel={onClose}
onOk={onOk}
onCancel={onCancel}
> >
<CodeRun /> <CodeRun flowChart={flowChart}/>
</Modal> </Modal>
); );
}; };

Loading…
Cancel
Save