vmario/wisemapping-frontend
1
0
Fork 0
mirror of https://bitbucket.org/wisemapping/wisemapping-frontend.git synced 2024-11-22 06:37:56 +01:00
Code Issues Packages Projects Releases Wiki Activity

Complete Export support

Browse Source
This commit is contained in:
Paulo Gustavo Veiga 2021-02-09 18:32:52 -08:00
parent 3310d74ebb
commit 5145058651
4 changed files with 61 additions and 16 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

9
packages/webapp/lang/en.json
View File

@ -86,9 +86,18 @@
"expired.title": {
"defaultMessage": "Your session has expired"
},
"export.document": {
"defaultMessage": "Mindmap Tools: Export your mindmap in thirdparty mindmap tool formats"
},
"export.image": {
"defaultMessage": "Image: Get a graphic representation of your map including all colors and shapes."
},
"export.title": {
"defaultMessage": "Export"
},
"export.warning": {
"defaultMessage": "Exporting to Image (SVG,PNG,JPEG )is available only in the editor toolbar."
},
"footer.aboutus": {
"defaultMessage": "About Us"
},

18
packages/webapp/src/compiled-lang/en.json
View File

@ -173,12 +173,30 @@
"value": "Your session has expired"
}
],
"export.document": [
{
"type": 0,
"value": "Mindmap Tools: Export your mindmap in thirdparty mindmap tool formats"
}
],
"export.image": [
{
"type": 0,
"value": "Image: Get a graphic representation of your map including all colors and shapes."
}
],
"export.title": [
{
"type": 0,
"value": "Export"
}
],
"export.warning": [
{
"type": 0,
"value": "Exporting to Image (SVG,PNG,JPEG )is available only in the editor toolbar."
}
],
"footer.aboutus": [
{
"type": 0,

45
packages/webapp/src/components/maps-page/action-dispatcher/export-dialog/index.tsx
View File

@ -1,28 +1,29 @@
import React, { useEffect } from "react";
import { FormattedMessage, useIntl } from "react-intl";
import { fetchMapById, SimpleDialogProps } from "..";
import { fetchMapById } from "..";
import BaseDialog from "../base-dialog";
import { FormControl, FormControlLabel, MenuItem, Radio, RadioGroup, Select, Tooltip, Typography } from "@material-ui/core";
import { FormControl, FormControlLabel, MenuItem, Radio, RadioGroup, Select } from "@material-ui/core";
import { useStyles } from './style';
import { Alert } from "@material-ui/lab";
type ExportFormat = 'pdf' | 'svg' | 'jpeg' | 'png' | 'txt' | 'mm' | 'wxml';
type ExportFormat = 'pdf' | 'svg' | 'jpeg' | 'png' | 'txt' | 'mm' | 'wxml' | 'xls' | 'txt';
type ExportGroup = 'image' | 'document' | 'mindmap-tool';
type ExportDialogProps = {
mapId: number,
enableImgExport: boolean,
svgXml?: string,
onClose: () => void,
}
const ExportDialog = (props: ExportDialogProps) => {
const intl = useIntl();
const { mapId, onClose, enableImgExport } = props;
const { mapId, onClose, enableImgExport, svgXml } = props;
const [submit, setSubmit] = React.useState<boolean>(false);
const [formExportRef, setExportFormRef] = React.useState<any>();
const [formTransformtRef, setTransformFormRef] = React.useState<any>();
const [exportGroup, setExportGroup] = React.useState<ExportGroup>(enableImgExport ? 'image' : 'document');
const [exportFormat, setExportFormat] = React.useState<ExportFormat>(enableImgExport ? 'svg' : 'pdf');
const [exportFormat, setExportFormat] = React.useState<ExportFormat>(enableImgExport ? 'svg' : 'xls');
const classes = useStyles();
@ -31,14 +32,29 @@ const ExportDialog = (props: ExportDialogProps) => {
};
const handleOnGroupChange = (event) => {
setExportGroup(event.target.value);
};
const value: ExportGroup = event.target.value;
setExportGroup(value);
let defaultFormat: ExportFormat;
switch (value) {
case 'document':
defaultFormat = 'pdf';
break;
case 'image':
defaultFormat = 'svg';
break;
case 'mindmap-tool':
defaultFormat = 'wxml';
break;
}
setExportFormat(defaultFormat);
}
const handleOnClose = (): void => {
onClose();
};
const handleOnSubmit = (event: React.FormEvent<HTMLFormElement>): void => {
const handleOnSubmit = (): void => {
setSubmit(true);
}
@ -66,7 +82,7 @@ const ExportDialog = (props: ExportDialogProps) => {
submitButton={intl.formatMessage({ id: "export.title", defaultMessage: "Export" })} >
<Alert severity="info">
<FormattedMessage id="export.warning" defaultMessage="Exporting to Image (SVG,PNG,JPEG )is available only in the editor toolbar." />
<FormattedMessage id="export.warning" defaultMessage="Exporting to Image (SVG,PNG,JPEG,PDF) is only available in the editor toolbar." />
</Alert>
<FormControl component="fieldset" >
@ -82,10 +98,12 @@ const ExportDialog = (props: ExportDialogProps) => {
style={{ fontSize: '9px' }} />
{(exportGroup == 'image') &&
(<Select
onChange={handleOnExportFormatChange}
onSelect={handleOnExportFormatChange}
variant="outlined"
value={exportFormat}
className={classes.label}>
<MenuItem value="svg" className={classes.menu}>Scalable Vector Graphics (SVG)</MenuItem>
<MenuItem value="pdf" className={classes.select} >Portable Document Format (PDF)</MenuItem>
<MenuItem value="png" className={classes.menu}>Portable Network Graphics (PNG)</MenuItem>
<MenuItem value="jpeg" className={classes.menu}>JPEG Image (JPEG)</MenuItem>
</Select>)
@ -102,11 +120,11 @@ const ExportDialog = (props: ExportDialogProps) => {
{exportGroup == 'document' &&
(<Select onChange={handleOnExportFormatChange}
variant="outlined"
value={exportFormat}
className={classes.select}
>
<MenuItem className={classes.select} value="pdf">Portable Document Format (PDF)</MenuItem>
<MenuItem className={classes.select} value="txt">Plain Text File (TXT)</MenuItem>
<MenuItem className={classes.select} value="xls">Microsoft Excel (XLS)</MenuItem>
<MenuItem className={classes.select} value="txt">Plain Text File (TXT)</MenuItem>
</Select>)
}
</FormControl>
@ -123,6 +141,7 @@ const ExportDialog = (props: ExportDialogProps) => {
onChange={handleOnExportFormatChange}
variant="outlined"
className={classes.select}
value={exportFormat}
>
<MenuItem className={classes.select} value="wxml">WiseMapping (WXML)</MenuItem>
<MenuItem className={classes.select} value="mm">Freemind 1.0.1 (MM)</MenuItem>
@ -143,7 +162,7 @@ const ExportDialog = (props: ExportDialogProps) => {
<form action={`/c/restful/transform.${exportFormat}`} ref={setTransformFormRef} method="POST">
<input name="download" type="hidden" value={exportFormat} />
<input name="filename" type="hidden" value={map?.title} />
<input name="svgXml" id="svgXml" value="" type="hidden" />
<input name="svgXml" id="svgXml" value={svgXml} type="hidden" />
</form>
</div>
);

5
packages/webapp/src/components/maps-page/action-dispatcher/export-dialog/style.ts
View File

@ -7,14 +7,13 @@ export const useStyles = makeStyles((theme: Theme) =>
borderRadius: '9px',
width: '300px',
fontSize: '14px',
// margin: '0px 30px'
margin: '0px 40px'
},
menu: {
fontSize: '14px'
},
label: {
margin: '5px 0px'
}
margin: '5px 0px' }
})
);