Browse Source

feat: supports 'export dsl and flowchart picture ability'

master
smallstonesk 4 years ago
parent
commit
4d95bb7e09
  1. 54
      packages/core/src/mods/header/export/exportModal.tsx
  2. 27
      packages/core/src/mods/header/export/index.module.less
  3. 33
      packages/core/src/mods/header/export/index.tsx
  4. 2
      packages/core/src/mods/header/index.tsx
  5. 20
      packages/core/src/utils/index.ts

54
packages/core/src/mods/header/export/exportModal.tsx

@ -0,0 +1,54 @@
import React from 'react';
import 'antd/es/modal/style';
import styles from './index.module.less';
import { Modal } from 'antd';
import { Graph } from '@antv/x6';
import { base64Url2Blob, downloadFile } from '../../../utils';
interface IExportModalProps {
flowChart: Graph;
visible: boolean;
onClose: () => void;
}
const ExportModal: React.FC<IExportModalProps> = (props) => {
const { flowChart, visible, onClose } = props;
const onExportDSL = () => {
const dsl = JSON.stringify(flowChart.toJSON(), null, 2);
const blob = new Blob([dsl], { type: 'text/plain' });
downloadFile('imove.dsl.json', blob);
};
const onExportFlowChart = () => {
flowChart.toJPEG((dataUri: string) => {
const blob = base64Url2Blob(dataUri);
downloadFile('flowChart.png', blob);
});
};
return (
<Modal
className={styles.editModal}
visible={visible}
footer={null}
title={'导出'}
onOk={onClose}
onCancel={onClose}
>
<div className={styles.modalContent}>
<div className={styles.downloadWrap} onClick={onExportDSL}>
<img src="//gw.alicdn.com/tfs/TB1FaTkuqNj0u4jSZFyXXXgMVXa-128-128.png" />
<span>DSL</span>
</div>
<div className={styles.downloadWrap} onClick={onExportFlowChart}>
<img src="//gw.alicdn.com/tfs/TB1WZeT4Hr1gK0jSZFDXXb9yVXa-128-128.png" />
<span></span>
</div>
</div>
</Modal>
);
};
export default ExportModal;

27
packages/core/src/mods/header/export/index.module.less

@ -0,0 +1,27 @@
.container {
margin-left: 20px;
}
.modalContent {
display: flex;
flex-direction: row;
justify-content: space-around;
width: 100%;
padding: 30px 0;
.downloadWrap {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
padding: 15px 20px 5px;
border: 0.5px solid #EFEFEF;
&:hover {
cursor: pointer;
background-color: #EFEFEF;
}
}
}

33
packages/core/src/mods/header/export/index.tsx

@ -0,0 +1,33 @@
import React, {useState} from 'react';
import styles from './index.module.less';
import { Button } from 'antd';
import { Graph } from '@antv/x6';
import ExportModal from './exportModal';
interface IProps {
flowChart: Graph;
}
const Export: React.FC<IProps> = props => {
const {flowChart} = props;
const [modalVisible, setModalVisible] = useState<boolean>(false);
const onOpenModal = () => setModalVisible(true);
const onCloseModal = () => setModalVisible(false);
return (
<div className={styles.container}>
<Button type={'primary'} size={'small'} onClick={onOpenModal}></Button>
<ExportModal
flowChart={flowChart}
visible={modalVisible}
onClose={onCloseModal}
/>
</div>
);
};
export default Export;

2
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 Export from './export';
import ImportDSL from './importDSL';
import ConnectStatus from './connectStatus';
@ -16,6 +17,7 @@ const Header: React.FC<IProps> = (props) => {
<div className={styles.container}>
<span className={styles.titleText}>iMove</span>
<div className={styles.widgets}>
<Export flowChart={flowChart} />
<ImportDSL flowChart={flowChart} />
<ConnectStatus flowChart={flowChart} />
</div>

20
packages/core/src/utils/index.ts

@ -36,3 +36,23 @@ const parseConfig = {
export const parseQuery = (): { [key: string]: any } => {
return parse(location.search, parseConfig);
};
export const base64Url2Blob = (base64: string) => {
const bytes = window.atob(base64.split(',')[1]);
const buffer = new ArrayBuffer(bytes.length);
const arr = new Uint8Array(buffer);
for (let i = 0; i < bytes.length; i++) {
arr[i] = bytes.charCodeAt(i);
}
return new Blob([arr], { type: 'image/png' });
};
export const downloadFile = (fileName: string, blob: Blob) => {
const elem = document.createElement('a');
elem.href = URL.createObjectURL(blob);
elem.download = fileName;
document.body.appendChild(elem);
elem.click();
URL.revokeObjectURL(elem.href);
document.body.removeChild(elem);
};

Loading…
Cancel
Save