Browse Source

feat: add compiling code online

master
smallstonesk 4 years ago
parent
commit
5823fbafb1
  1. 2
      packages/core/package.json
  2. 38
      packages/core/src/mods/header/export/exportModal.tsx
  3. 5
      packages/core/src/mods/header/export/index.module.less

2
packages/core/package.json

@ -38,9 +38,11 @@
"dependencies": { "dependencies": {
"@ant-design/icons": "^4.0.6", "@ant-design/icons": "^4.0.6",
"@antv/x6": "^1.3.0", "@antv/x6": "^1.3.0",
"@imove/compile-code": "^0.0.1",
"ace-builds": "^1.4.12", "ace-builds": "^1.4.12",
"antd": "^4.5.3", "antd": "^4.5.3",
"axios": "^0.21.0", "axios": "^0.21.0",
"jszip": "^3.5.0",
"lodash.merge": "^4.6.2", "lodash.merge": "^4.6.2",
"query-string": "^6.13.7", "query-string": "^6.13.7",
"react-ace": "^9.1.3", "react-ace": "^9.1.3",

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

@ -3,8 +3,10 @@ import React from 'react';
import 'antd/es/modal/style'; import 'antd/es/modal/style';
import styles from './index.module.less'; import styles from './index.module.less';
import JSZip from 'jszip';
import { Modal } from 'antd'; import { Modal } from 'antd';
import { Graph } from '@antv/x6'; import { Graph } from '@antv/x6';
import compileCode from '@imove/compile-code';
import { base64Url2Blob, downloadFile } from '../../../utils'; import { base64Url2Blob, downloadFile } from '../../../utils';
interface IExportModalProps { interface IExportModalProps {
@ -21,6 +23,15 @@ const ExportModal: React.FC<IExportModalProps> = (props) => {
const blob = new Blob([dsl], { type: 'text/plain' }); const blob = new Blob([dsl], { type: 'text/plain' });
downloadFile('imove.dsl.json', blob); downloadFile('imove.dsl.json', blob);
}; };
const onExportCode = () => {
const zip = new JSZip();
const dsl = flowChart.toJSON();
const output = compileCode(dsl);
Helper.recursiveZip(zip, output);
zip.generateAsync({ type: 'blob' }).then((blob) => {
downloadFile('logic.zip', blob);
});
};
const onExportFlowChart = () => { const onExportFlowChart = () => {
flowChart.toJPEG((dataUri: string) => { flowChart.toJPEG((dataUri: string) => {
const blob = base64Url2Blob(dataUri); const blob = base64Url2Blob(dataUri);
@ -30,7 +41,7 @@ const ExportModal: React.FC<IExportModalProps> = (props) => {
return ( return (
<Modal <Modal
className={styles.editModal} width={700}
visible={visible} visible={visible}
footer={null} footer={null}
title={'导出'} title={'导出'}
@ -39,11 +50,15 @@ const ExportModal: React.FC<IExportModalProps> = (props) => {
> >
<div className={styles.modalContent}> <div className={styles.modalContent}>
<div className={styles.downloadWrap} onClick={onExportDSL}> <div className={styles.downloadWrap} onClick={onExportDSL}>
<img src="//gw.alicdn.com/tfs/TB1FaTkuqNj0u4jSZFyXXXgMVXa-128-128.png" /> <img className={styles.picPreview} src="//img.alicdn.com/imgextra/i2/O1CN01lvanDL1YKp54hGgMS_!!6000000003041-2-tps-247-247.png" />
<span>DSL</span> <span>DSL</span>
</div> </div>
<div className={styles.downloadWrap} onClick={onExportCode}>
<img className={styles.picPreview} src="//img.alicdn.com/imgextra/i3/O1CN01V3wg6S27JuqePTXZv_!!6000000007777-2-tps-247-247.png" />
<span></span>
</div>
<div className={styles.downloadWrap} onClick={onExportFlowChart}> <div className={styles.downloadWrap} onClick={onExportFlowChart}>
<img src="//gw.alicdn.com/tfs/TB1WZeT4Hr1gK0jSZFDXXb9yVXa-128-128.png" /> <img className={styles.picPreview} src="//img.alicdn.com/imgextra/i1/O1CN01sVItyC1exeLraUhf6_!!6000000003938-2-tps-247-247.png" />
<span></span> <span></span>
</div> </div>
</div> </div>
@ -51,4 +66,21 @@ const ExportModal: React.FC<IExportModalProps> = (props) => {
); );
}; };
const Helper = {
recursiveZip(root: JSZip, json: any) {
if (typeof json !== 'object' || json === null) {
return;
}
for (const key in json) {
const val = json[key];
if (typeof val === 'string') {
root.file(key, val);
} else {
const dir = root.folder(key) as JSZip;
Helper.recursiveZip(dir, val);
}
}
}
}
export default ExportModal; export default ExportModal;

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

@ -23,5 +23,10 @@
cursor: pointer; cursor: pointer;
background-color: #EFEFEF; background-color: #EFEFEF;
} }
.picPreview {
width: 150px;
height: 150px;
}
} }
} }
Loading…
Cancel
Save