mirror of
https://bitbucket.org/wisemapping/wisemapping-frontend.git
synced 2024-11-11 01:43:23 +01:00
Complete Export support
This commit is contained in:
parent
3310d74ebb
commit
5145058651
@ -86,9 +86,18 @@
|
|||||||
"expired.title": {
|
"expired.title": {
|
||||||
"defaultMessage": "Your session has expired"
|
"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": {
|
"export.title": {
|
||||||
"defaultMessage": "Export"
|
"defaultMessage": "Export"
|
||||||
},
|
},
|
||||||
|
"export.warning": {
|
||||||
|
"defaultMessage": "Exporting to Image (SVG,PNG,JPEG )is available only in the editor toolbar."
|
||||||
|
},
|
||||||
"footer.aboutus": {
|
"footer.aboutus": {
|
||||||
"defaultMessage": "About Us"
|
"defaultMessage": "About Us"
|
||||||
},
|
},
|
||||||
|
@ -173,12 +173,30 @@
|
|||||||
"value": "Your session has expired"
|
"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": [
|
"export.title": [
|
||||||
{
|
{
|
||||||
"type": 0,
|
"type": 0,
|
||||||
"value": "Export"
|
"value": "Export"
|
||||||
}
|
}
|
||||||
],
|
],
|
||||||
|
"export.warning": [
|
||||||
|
{
|
||||||
|
"type": 0,
|
||||||
|
"value": "Exporting to Image (SVG,PNG,JPEG )is available only in the editor toolbar."
|
||||||
|
}
|
||||||
|
],
|
||||||
"footer.aboutus": [
|
"footer.aboutus": [
|
||||||
{
|
{
|
||||||
"type": 0,
|
"type": 0,
|
||||||
|
@ -1,28 +1,29 @@
|
|||||||
import React, { useEffect } from "react";
|
import React, { useEffect } from "react";
|
||||||
import { FormattedMessage, useIntl } from "react-intl";
|
import { FormattedMessage, useIntl } from "react-intl";
|
||||||
import { fetchMapById, SimpleDialogProps } from "..";
|
import { fetchMapById } from "..";
|
||||||
import BaseDialog from "../base-dialog";
|
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 { useStyles } from './style';
|
||||||
import { Alert } from "@material-ui/lab";
|
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 ExportGroup = 'image' | 'document' | 'mindmap-tool';
|
||||||
|
|
||||||
type ExportDialogProps = {
|
type ExportDialogProps = {
|
||||||
mapId: number,
|
mapId: number,
|
||||||
enableImgExport: boolean,
|
enableImgExport: boolean,
|
||||||
|
svgXml?: string,
|
||||||
onClose: () => void,
|
onClose: () => void,
|
||||||
}
|
}
|
||||||
|
|
||||||
const ExportDialog = (props: ExportDialogProps) => {
|
const ExportDialog = (props: ExportDialogProps) => {
|
||||||
const intl = useIntl();
|
const intl = useIntl();
|
||||||
const { mapId, onClose, enableImgExport } = props;
|
const { mapId, onClose, enableImgExport, svgXml } = props;
|
||||||
const [submit, setSubmit] = React.useState<boolean>(false);
|
const [submit, setSubmit] = React.useState<boolean>(false);
|
||||||
const [formExportRef, setExportFormRef] = React.useState<any>();
|
const [formExportRef, setExportFormRef] = React.useState<any>();
|
||||||
const [formTransformtRef, setTransformFormRef] = React.useState<any>();
|
const [formTransformtRef, setTransformFormRef] = React.useState<any>();
|
||||||
const [exportGroup, setExportGroup] = React.useState<ExportGroup>(enableImgExport ? 'image' : 'document');
|
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();
|
const classes = useStyles();
|
||||||
|
|
||||||
|
|
||||||
@ -31,14 +32,29 @@ const ExportDialog = (props: ExportDialogProps) => {
|
|||||||
};
|
};
|
||||||
|
|
||||||
const handleOnGroupChange = (event) => {
|
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 => {
|
const handleOnClose = (): void => {
|
||||||
onClose();
|
onClose();
|
||||||
};
|
};
|
||||||
|
|
||||||
const handleOnSubmit = (event: React.FormEvent<HTMLFormElement>): void => {
|
const handleOnSubmit = (): void => {
|
||||||
setSubmit(true);
|
setSubmit(true);
|
||||||
}
|
}
|
||||||
|
|
||||||
@ -66,7 +82,7 @@ const ExportDialog = (props: ExportDialogProps) => {
|
|||||||
submitButton={intl.formatMessage({ id: "export.title", defaultMessage: "Export" })} >
|
submitButton={intl.formatMessage({ id: "export.title", defaultMessage: "Export" })} >
|
||||||
|
|
||||||
<Alert severity="info">
|
<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>
|
</Alert>
|
||||||
|
|
||||||
<FormControl component="fieldset" >
|
<FormControl component="fieldset" >
|
||||||
@ -82,10 +98,12 @@ const ExportDialog = (props: ExportDialogProps) => {
|
|||||||
style={{ fontSize: '9px' }} />
|
style={{ fontSize: '9px' }} />
|
||||||
{(exportGroup == 'image') &&
|
{(exportGroup == 'image') &&
|
||||||
(<Select
|
(<Select
|
||||||
onChange={handleOnExportFormatChange}
|
onSelect={handleOnExportFormatChange}
|
||||||
variant="outlined"
|
variant="outlined"
|
||||||
|
value={exportFormat}
|
||||||
className={classes.label}>
|
className={classes.label}>
|
||||||
<MenuItem value="svg" className={classes.menu}>Scalable Vector Graphics (SVG)</MenuItem>
|
<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="png" className={classes.menu}>Portable Network Graphics (PNG)</MenuItem>
|
||||||
<MenuItem value="jpeg" className={classes.menu}>JPEG Image (JPEG)</MenuItem>
|
<MenuItem value="jpeg" className={classes.menu}>JPEG Image (JPEG)</MenuItem>
|
||||||
</Select>)
|
</Select>)
|
||||||
@ -102,11 +120,11 @@ const ExportDialog = (props: ExportDialogProps) => {
|
|||||||
{exportGroup == 'document' &&
|
{exportGroup == 'document' &&
|
||||||
(<Select onChange={handleOnExportFormatChange}
|
(<Select onChange={handleOnExportFormatChange}
|
||||||
variant="outlined"
|
variant="outlined"
|
||||||
|
value={exportFormat}
|
||||||
className={classes.select}
|
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="xls">Microsoft Excel (XLS)</MenuItem>
|
||||||
|
<MenuItem className={classes.select} value="txt">Plain Text File (TXT)</MenuItem>
|
||||||
</Select>)
|
</Select>)
|
||||||
}
|
}
|
||||||
</FormControl>
|
</FormControl>
|
||||||
@ -123,6 +141,7 @@ const ExportDialog = (props: ExportDialogProps) => {
|
|||||||
onChange={handleOnExportFormatChange}
|
onChange={handleOnExportFormatChange}
|
||||||
variant="outlined"
|
variant="outlined"
|
||||||
className={classes.select}
|
className={classes.select}
|
||||||
|
value={exportFormat}
|
||||||
>
|
>
|
||||||
<MenuItem className={classes.select} value="wxml">WiseMapping (WXML)</MenuItem>
|
<MenuItem className={classes.select} value="wxml">WiseMapping (WXML)</MenuItem>
|
||||||
<MenuItem className={classes.select} value="mm">Freemind 1.0.1 (MM)</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">
|
<form action={`/c/restful/transform.${exportFormat}`} ref={setTransformFormRef} method="POST">
|
||||||
<input name="download" type="hidden" value={exportFormat} />
|
<input name="download" type="hidden" value={exportFormat} />
|
||||||
<input name="filename" type="hidden" value={map?.title} />
|
<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>
|
</form>
|
||||||
</div>
|
</div>
|
||||||
);
|
);
|
||||||
|
@ -7,14 +7,13 @@ export const useStyles = makeStyles((theme: Theme) =>
|
|||||||
borderRadius: '9px',
|
borderRadius: '9px',
|
||||||
width: '300px',
|
width: '300px',
|
||||||
fontSize: '14px',
|
fontSize: '14px',
|
||||||
// margin: '0px 30px'
|
margin: '0px 40px'
|
||||||
},
|
},
|
||||||
menu: {
|
menu: {
|
||||||
fontSize: '14px'
|
fontSize: '14px'
|
||||||
},
|
},
|
||||||
label: {
|
label: {
|
||||||
margin: '5px 0px'
|
margin: '5px 0px' }
|
||||||
}
|
|
||||||
|
|
||||||
})
|
})
|
||||||
);
|
);
|
Loading…
Reference in New Issue
Block a user