diff --git a/packages/core/src/mods/header/export/exportModal.tsx b/packages/core/src/mods/header/export/exportModal.tsx new file mode 100644 index 0000000..8ec712b --- /dev/null +++ b/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 = (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 ( + +
+
+ + DSL +
+
+ + 流程图 +
+
+
+ ); +}; + +export default ExportModal; diff --git a/packages/core/src/mods/header/export/index.module.less b/packages/core/src/mods/header/export/index.module.less new file mode 100644 index 0000000..5231729 --- /dev/null +++ b/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; + } + } +} \ No newline at end of file diff --git a/packages/core/src/mods/header/export/index.tsx b/packages/core/src/mods/header/export/index.tsx new file mode 100644 index 0000000..7621bd1 --- /dev/null +++ b/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 = props => { + + const {flowChart} = props; + const [modalVisible, setModalVisible] = useState(false); + + const onOpenModal = () => setModalVisible(true); + const onCloseModal = () => setModalVisible(false); + + return ( +
+ + +
+ ); +}; + +export default Export; diff --git a/packages/core/src/mods/header/index.tsx b/packages/core/src/mods/header/index.tsx index 06bd747..c0ff5b2 100644 --- a/packages/core/src/mods/header/index.tsx +++ b/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 = (props) => {
iMove
+
diff --git a/packages/core/src/utils/index.ts b/packages/core/src/utils/index.ts index 964ae60..b8b1757 100644 --- a/packages/core/src/utils/index.ts +++ b/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); +};