mirror of
https://bitbucket.org/wisemapping/wisemapping-frontend.git
synced 2024-11-11 01:43:23 +01:00
Add export image center support
This commit is contained in:
parent
7942ac137f
commit
e4d43013d1
@ -137,6 +137,9 @@
|
||||
"export.image": {
|
||||
"defaultMessage": "Image: Get a graphic representation of your map including all colors and shapes."
|
||||
},
|
||||
"export.img-center": {
|
||||
"defaultMessage": "Center and zoom to fit"
|
||||
},
|
||||
"export.title": {
|
||||
"defaultMessage": "Export"
|
||||
},
|
||||
@ -438,6 +441,9 @@
|
||||
"registration.lastname": {
|
||||
"defaultMessage": "Last Name"
|
||||
},
|
||||
"registration.page-title": {
|
||||
"defaultMessage": "Registration | WiseMapping"
|
||||
},
|
||||
"registration.password": {
|
||||
"defaultMessage": "Password"
|
||||
},
|
||||
@ -451,7 +457,7 @@
|
||||
"defaultMessage": "Terms of Client: Please check the WiseMapping Account information you've entered above, and review the Terms of Client here. By clicking on 'Register' below you are agreeing to the Terms of Client above and the Privacy Policy"
|
||||
},
|
||||
"registration.title": {
|
||||
"defaultMessage": "Registration | WiseMapping"
|
||||
"defaultMessage": "Become a member"
|
||||
},
|
||||
"rename.description": {
|
||||
"defaultMessage": "Please, fill the new map name and description."
|
||||
|
@ -16,6 +16,8 @@ import { activeInstance } from '../../../../redux/clientSlice';
|
||||
|
||||
import { useSelector } from 'react-redux';
|
||||
import SizeType from '@wisemapping/mindplot/src/components/SizeType';
|
||||
import Checkbox from '@mui/material/Checkbox';
|
||||
import FormGroup from '@mui/material/FormGroup';
|
||||
|
||||
type ExportFormat = 'svg' | 'jpg' | 'png' | 'txt' | 'mm' | 'wxml' | 'xls' | 'md';
|
||||
type ExportGroup = 'image' | 'document' | 'mindmap-tool';
|
||||
@ -41,8 +43,11 @@ const ExportDialog = ({
|
||||
enableImgExport ? 'image' : 'document'
|
||||
);
|
||||
const [exportFormat, setExportFormat] = React.useState<ExportFormat>(
|
||||
enableImgExport ? 'svg' : 'xls'
|
||||
enableImgExport ? 'svg' : 'txt'
|
||||
);
|
||||
|
||||
const [zoomToFit, setZoomToFit] = React.useState<boolean>(true)
|
||||
|
||||
const classes = useStyles();
|
||||
|
||||
const handleOnExportFormatChange = (event) => {
|
||||
@ -76,6 +81,10 @@ const ExportDialog = ({
|
||||
setSubmit(true);
|
||||
};
|
||||
|
||||
const handleOnZoomToFit = (): void => {
|
||||
setZoomToFit(!zoomToFit);
|
||||
};
|
||||
|
||||
const exporter = (formatType: ExportFormat): Promise<string> => {
|
||||
let svgElement: Element | null = null;
|
||||
let size: SizeType;
|
||||
@ -97,7 +106,7 @@ const ExportDialog = ({
|
||||
case 'png':
|
||||
case 'jpg':
|
||||
case 'svg': {
|
||||
exporter = ImageExporterFactory.create(formatType, mindmap, svgElement, size.width, size.height);
|
||||
exporter = ImageExporterFactory.create(formatType, mindmap, svgElement, size.width, size.height, zoomToFit);
|
||||
break;
|
||||
}
|
||||
case 'wxml':
|
||||
@ -131,7 +140,7 @@ const ExportDialog = ({
|
||||
URL.revokeObjectURL(url);
|
||||
document.body.removeChild(anchor);
|
||||
}).catch((fail) => {
|
||||
console.log("Unexpected error during export:" + fail);
|
||||
console.error("Unexpected error during export:" + fail);
|
||||
});
|
||||
|
||||
onClose();
|
||||
@ -173,11 +182,12 @@ const ExportDialog = ({
|
||||
style={{ fontSize: '9px' }}
|
||||
/>
|
||||
{exportGroup == 'image' && (
|
||||
<>
|
||||
<Select
|
||||
onChange={handleOnExportFormatChange}
|
||||
variant="outlined"
|
||||
value={exportFormat}
|
||||
className={classes.label}
|
||||
className={classes.select}
|
||||
>
|
||||
<MenuItem value="svg" className={classes.menu}>
|
||||
Scalable Vector Graphics (SVG)
|
||||
@ -189,6 +199,15 @@ const ExportDialog = ({
|
||||
JPEG Image (JPEG)
|
||||
</MenuItem>
|
||||
</Select>
|
||||
<FormControlLabel
|
||||
className={classes.select}
|
||||
control={<Checkbox checked={zoomToFit} onChange={handleOnZoomToFit} />}
|
||||
label={intl.formatMessage({
|
||||
id: 'export.img-center',
|
||||
defaultMessage:
|
||||
'Center and zoom to fit',
|
||||
})} />
|
||||
</>
|
||||
)}
|
||||
</FormControl>
|
||||
|
||||
|
@ -161,7 +161,7 @@ const RegistationPage = (): React.ReactElement => {
|
||||
|
||||
useEffect(() => {
|
||||
document.title = intl.formatMessage({
|
||||
id: 'registration.title',
|
||||
id: 'registration.page-title',
|
||||
defaultMessage: 'Registration | WiseMapping',
|
||||
});
|
||||
});
|
||||
|
Loading…
Reference in New Issue
Block a user