Browse Source

feat: supports 'imoprt dsl' ability

master
smallstonesk 4 years ago
parent
commit
9cfed537e9
  1. 2
      packages/core/src/mods/header/connectStatus/index.module.less
  2. 3
      packages/core/src/mods/header/importDSL/index.module.less
  3. 49
      packages/core/src/mods/header/importDSL/index.tsx
  4. 7
      packages/core/src/mods/header/index.module.less
  5. 6
      packages/core/src/mods/header/index.tsx

2
packages/core/src/mods/header/connectStatus/index.module.less

@ -3,7 +3,7 @@
display: flex;
flex-direction: row;
align-items: center;
margin-right: 20px;
margin-left: 20px;
.tag {
cursor: pointer;

3
packages/core/src/mods/header/importDSL/index.module.less

@ -0,0 +1,3 @@
.container {
margin-left: 20px;
}

49
packages/core/src/mods/header/importDSL/index.tsx

@ -0,0 +1,49 @@
import React, { useState } from 'react';
import styles from './index.module.less';
import { Graph } from '@antv/x6';
import { Button, Upload, message } from 'antd';
interface IProps {
flowChart: Graph;
}
const ImportDSL: React.FC<IProps> = props => {
const {flowChart} = props;
const [disabled, setDisabled] = useState(false);
const beforeUpload = (file: any) => {
setDisabled(true);
const reader = new FileReader();
reader.onload = (evt) => {
setDisabled(false);
if(!evt.target) {
message.error('加载文件失败!');
} else {
const dsl = evt.target.result as string;
try {
flowChart.fromJSON(JSON.parse(dsl));
} catch (err) {
message.error('DSL解析失败!');
}
}
};
reader.readAsText(file);
return false;
};
return (
<Upload
className={styles.container}
accept={'.json'}
disabled={disabled}
showUploadList={false}
beforeUpload={beforeUpload}
>
<Button type={'primary'} size={'small'}>DSL</Button>
</Upload>
);
};
export default ImportDSL;

7
packages/core/src/mods/header/index.module.less

@ -6,11 +6,16 @@
align-items: center;
width: 100%;
height: 100%;
padding: 0 20px;
background-color: #FEFEFE;
}
.titleText {
margin-left: 20px;
font-size: 24px;
font-weight: 500;
}
.widgets {
display: flex;
flex-direction: row;
}

6
packages/core/src/mods/header/index.tsx

@ -3,6 +3,7 @@ import React from 'react';
import styles from './index.module.less';
import { Graph } from '@antv/x6';
import ImportDSL from './importDSL';
import ConnectStatus from './connectStatus';
interface IProps {
@ -14,7 +15,10 @@ const Header: React.FC<IProps> = (props) => {
return (
<div className={styles.container}>
<span className={styles.titleText}>iMove</span>
<ConnectStatus flowChart={flowChart} />
<div className={styles.widgets}>
<ImportDSL flowChart={flowChart} />
<ConnectStatus flowChart={flowChart} />
</div>
</div>
);
};

Loading…
Cancel
Save