mirror of
https://bitbucket.org/wisemapping/wisemapping-frontend.git
synced 2024-11-11 01:43:23 +01:00
Progress on export.
This commit is contained in:
parent
f1878ed14e
commit
3310d74ebb
@ -1,22 +1,39 @@
|
|||||||
import React, { useEffect } from "react";
|
import React, { useEffect } from "react";
|
||||||
import { useIntl } from "react-intl";
|
import { FormattedMessage, useIntl } from "react-intl";
|
||||||
import { fetchMapById, SimpleDialogProps } from "..";
|
import { fetchMapById, SimpleDialogProps } from "..";
|
||||||
import BaseDialog from "../base-dialog";
|
import BaseDialog from "../base-dialog";
|
||||||
import { FormControl, FormControlLabel, Radio, RadioGroup, Tooltip } from "@material-ui/core";
|
import { FormControl, FormControlLabel, MenuItem, Radio, RadioGroup, Select, Tooltip, Typography } from "@material-ui/core";
|
||||||
|
import { useStyles } from './style';
|
||||||
|
import { Alert } from "@material-ui/lab";
|
||||||
|
|
||||||
|
type ExportFormat = 'pdf' | 'svg' | 'jpeg' | 'png' | 'txt' | 'mm' | 'wxml';
|
||||||
|
type ExportGroup = 'image' | 'document' | 'mindmap-tool';
|
||||||
|
|
||||||
const ExportDialog = (props: SimpleDialogProps) => {
|
type ExportDialogProps = {
|
||||||
|
mapId: number,
|
||||||
|
enableImgExport: boolean,
|
||||||
|
onClose: () => void,
|
||||||
|
}
|
||||||
|
|
||||||
|
const ExportDialog = (props: ExportDialogProps) => {
|
||||||
const intl = useIntl();
|
const intl = useIntl();
|
||||||
const { mapId, onClose } = props;
|
const { mapId, onClose, enableImgExport } = props;
|
||||||
const [submit, setSubmit] = React.useState<boolean>(false);
|
const [submit, setSubmit] = React.useState<boolean>(false);
|
||||||
const [formExportRef, setExportFormRef] = React.useState<any>(); // @Todo: review
|
const [formExportRef, setExportFormRef] = React.useState<any>();
|
||||||
const [formTransformtRef, setTransformFormRef] = React.useState<any>(); // @Todo: review
|
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 classes = useStyles();
|
||||||
|
|
||||||
const [exportFormat, setExportFormat] = React.useState('mm');
|
|
||||||
const handleChange = (event) => {
|
const handleOnExportFormatChange = (event) => {
|
||||||
setExportFormat(event.target.value);
|
setExportFormat(event.target.value);
|
||||||
};
|
};
|
||||||
|
|
||||||
|
const handleOnGroupChange = (event) => {
|
||||||
|
setExportGroup(event.target.value);
|
||||||
|
};
|
||||||
|
|
||||||
const handleOnClose = (): void => {
|
const handleOnClose = (): void => {
|
||||||
onClose();
|
onClose();
|
||||||
};
|
};
|
||||||
@ -28,9 +45,10 @@ const ExportDialog = (props: SimpleDialogProps) => {
|
|||||||
useEffect(() => {
|
useEffect(() => {
|
||||||
if (submit) {
|
if (submit) {
|
||||||
// Depending on the type of export. It will require differt POST.
|
// Depending on the type of export. It will require differt POST.
|
||||||
if (exportFormat == 'pdf' || exportFormat == "svg" || exportFormat == "image") {
|
if (exportFormat == 'pdf' || exportFormat == "svg" || exportFormat == "jpeg" || exportFormat == "png") {
|
||||||
formTransformtRef.submit();
|
formTransformtRef.submit();
|
||||||
} else {
|
} else {
|
||||||
|
|
||||||
formExportRef.submit();
|
formExportRef.submit();
|
||||||
}
|
}
|
||||||
onClose();
|
onClose();
|
||||||
@ -46,41 +64,72 @@ const ExportDialog = (props: SimpleDialogProps) => {
|
|||||||
title={intl.formatMessage({ id: "export.title", defaultMessage: "Export" })}
|
title={intl.formatMessage({ id: "export.title", defaultMessage: "Export" })}
|
||||||
description={"Export this map in the format that you want and start using it in your presentations or sharing by email"}
|
description={"Export this map in the format that you want and start using it in your presentations or sharing by email"}
|
||||||
submitButton={intl.formatMessage({ id: "export.title", defaultMessage: "Export" })} >
|
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." />
|
||||||
|
</Alert>
|
||||||
|
|
||||||
<FormControl component="fieldset" >
|
<FormControl component="fieldset" >
|
||||||
<RadioGroup name="export" value={exportFormat} onChange={handleChange}>
|
<RadioGroup name="export" value={exportGroup} onChange={handleOnGroupChange}>
|
||||||
|
<FormControl>
|
||||||
|
<FormControlLabel
|
||||||
|
className={classes.label}
|
||||||
|
value="image"
|
||||||
|
disabled={!enableImgExport}
|
||||||
|
control={<Radio color="primary" />}
|
||||||
|
label={intl.formatMessage({ id: "export.image", defaultMessage: "Image: Get a graphic representation of your map including all colors and shapes." })}
|
||||||
|
color="secondary"
|
||||||
|
style={{ fontSize: '9px' }} />
|
||||||
|
{(exportGroup == 'image') &&
|
||||||
|
(<Select
|
||||||
|
onChange={handleOnExportFormatChange}
|
||||||
|
variant="outlined"
|
||||||
|
className={classes.label}>
|
||||||
|
<MenuItem value="svg" className={classes.menu}>Scalable Vector Graphics (SVG)</MenuItem>
|
||||||
|
<MenuItem value="png" className={classes.menu}>Portable Network Graphics (PNG)</MenuItem>
|
||||||
|
<MenuItem value="jpeg" className={classes.menu}>JPEG Image (JPEG)</MenuItem>
|
||||||
|
</Select>)
|
||||||
|
}
|
||||||
|
</FormControl>
|
||||||
|
|
||||||
|
<FormControl>
|
||||||
|
<FormControlLabel
|
||||||
|
className={classes.label}
|
||||||
|
value="document"
|
||||||
|
control={<Radio color="primary" />}
|
||||||
|
label={intl.formatMessage({ id: "export.document", defaultMessage: "Document: Export your mindmap in a self-contained document ready to share" })}
|
||||||
|
color="secondary" />
|
||||||
|
{exportGroup == 'document' &&
|
||||||
|
(<Select onChange={handleOnExportFormatChange}
|
||||||
|
variant="outlined"
|
||||||
|
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>
|
||||||
|
</Select>)
|
||||||
|
}
|
||||||
|
</FormControl>
|
||||||
|
|
||||||
{/* SVG Based .... */}
|
<FormControl>
|
||||||
<Tooltip title="Image" placement="right">
|
<FormControlLabel
|
||||||
<FormControlLabel value="image" control={<Radio color="primary" />} label="Image" color="secondary" />
|
className={classes.label}
|
||||||
</Tooltip>
|
value="mindmap-tool"
|
||||||
|
control={<Radio color="primary" />}
|
||||||
|
label={intl.formatMessage({ id: "export.document", defaultMessage: "Mindmap Tools: Export your mindmap in thirdparty mindmap tool formats" })}
|
||||||
{/* Non - SVG .... */}
|
color="secondary" />
|
||||||
<Tooltip title="FREEMIND_EXPORT_FORMAT_09" placement="right">
|
{exportGroup == 'mindmap-tool' &&
|
||||||
<FormControlLabel value="mm" control={<Radio color="primary" />} label="FREEMIND_EXPORT_FORMAT_09" color="secondary" />
|
(<Select
|
||||||
</Tooltip>
|
onChange={handleOnExportFormatChange}
|
||||||
|
variant="outlined"
|
||||||
<Tooltip title="MINDJET_EXPORT_FORMAT" placement="right">
|
className={classes.select}
|
||||||
<FormControlLabel value="mmap" control={<Radio color="primary" />} label="MINDJET_EXPORT_FORMAT" color="secondary" />
|
>
|
||||||
</Tooltip>
|
<MenuItem className={classes.select} value="wxml">WiseMapping (WXML)</MenuItem>
|
||||||
|
<MenuItem className={classes.select} value="mm">Freemind 1.0.1 (MM)</MenuItem>
|
||||||
<Tooltip title="WISEMAPPING_EXPORT_FORMAT" placement="right">
|
<MenuItem className={classes.select} value="mmap">MindManager (MMAP)</MenuItem>
|
||||||
<FormControlLabel value="wxml" control={<Radio color="primary" />} label="WISEMAPPING_EXPORT_FORMAT" color="secondary" />
|
</Select>)
|
||||||
</Tooltip>
|
}
|
||||||
|
</FormControl>
|
||||||
<Tooltip title="TXT_EXPORT_FORMAT" placement="right">
|
|
||||||
<FormControlLabel value="txt" control={<Radio color="primary" />} label="TXT_EXPORT_FORMAT" color="secondary" />
|
|
||||||
</Tooltip>
|
|
||||||
|
|
||||||
<Tooltip title="XLS_EXPORT_FORMAT" placement="right">
|
|
||||||
<FormControlLabel value="xls" control={<Radio color="primary" />} label="XLS_EXPORT_FORMAT" color="secondary" />
|
|
||||||
</Tooltip>
|
|
||||||
|
|
||||||
<Tooltip title="OPEN_OFFICE_EXPORT_FORMAT" placement="right">
|
|
||||||
<FormControlLabel value="odt" control={<Radio color="primary" />} label="OPEN_OFFICE_EXPORT_FORMAT" color="secondary" />
|
|
||||||
</Tooltip>
|
|
||||||
|
|
||||||
</RadioGroup>
|
</RadioGroup>
|
||||||
</FormControl>
|
</FormControl>
|
||||||
</BaseDialog>
|
</BaseDialog>
|
||||||
@ -91,7 +140,7 @@ const ExportDialog = (props: SimpleDialogProps) => {
|
|||||||
<input name="filename" type="hidden" value={map?.title} />
|
<input name="filename" type="hidden" value={map?.title} />
|
||||||
</form>
|
</form>
|
||||||
|
|
||||||
<form action={`/c/restful/transform.${exportFormat}`} ref={formTransformtRef} 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="" type="hidden" />
|
||||||
|
@ -0,0 +1,20 @@
|
|||||||
|
import { createStyles, makeStyles, Theme } from "@material-ui/core";
|
||||||
|
|
||||||
|
export const useStyles = makeStyles((theme: Theme) =>
|
||||||
|
createStyles({
|
||||||
|
select: {
|
||||||
|
height: '40px',
|
||||||
|
borderRadius: '9px',
|
||||||
|
width: '300px',
|
||||||
|
fontSize: '14px',
|
||||||
|
// margin: '0px 30px'
|
||||||
|
},
|
||||||
|
menu: {
|
||||||
|
fontSize: '14px'
|
||||||
|
},
|
||||||
|
label: {
|
||||||
|
margin: '5px 0px'
|
||||||
|
}
|
||||||
|
|
||||||
|
})
|
||||||
|
);
|
@ -57,7 +57,7 @@ const ActionDispatcher = (props: ActionDialogProps) => {
|
|||||||
{action === 'publish' && <PublishDialog onClose={handleOnClose} mapId={mapsId[0]} />}
|
{action === 'publish' && <PublishDialog onClose={handleOnClose} mapId={mapsId[0]} />}
|
||||||
{action === 'info' && <InfoDialog onClose={handleOnClose} mapId={mapsId[0]} />}
|
{action === 'info' && <InfoDialog onClose={handleOnClose} mapId={mapsId[0]} />}
|
||||||
{action === 'create' && <CreateDialog onClose={handleOnClose} />}
|
{action === 'create' && <CreateDialog onClose={handleOnClose} />}
|
||||||
{action === 'export' && <ExportDialog onClose={handleOnClose} mapId={mapsId[0]}/>}
|
{action === 'export' && <ExportDialog onClose={handleOnClose} mapId={mapsId[0]} enableImgExport={false}/>}
|
||||||
</span >
|
</span >
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
Loading…
Reference in New Issue
Block a user