mirror of
https://bitbucket.org/wisemapping/wisemapping-frontend.git
synced 2024-11-25 23:54:55 +01:00
Add export image center support
This commit is contained in:
parent
7942ac137f
commit
e4d43013d1
@ -137,6 +137,9 @@
|
|||||||
"export.image": {
|
"export.image": {
|
||||||
"defaultMessage": "Image: Get a graphic representation of your map including all colors and shapes."
|
"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": {
|
"export.title": {
|
||||||
"defaultMessage": "Export"
|
"defaultMessage": "Export"
|
||||||
},
|
},
|
||||||
@ -438,6 +441,9 @@
|
|||||||
"registration.lastname": {
|
"registration.lastname": {
|
||||||
"defaultMessage": "Last Name"
|
"defaultMessage": "Last Name"
|
||||||
},
|
},
|
||||||
|
"registration.page-title": {
|
||||||
|
"defaultMessage": "Registration | WiseMapping"
|
||||||
|
},
|
||||||
"registration.password": {
|
"registration.password": {
|
||||||
"defaultMessage": "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"
|
"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": {
|
"registration.title": {
|
||||||
"defaultMessage": "Registration | WiseMapping"
|
"defaultMessage": "Become a member"
|
||||||
},
|
},
|
||||||
"rename.description": {
|
"rename.description": {
|
||||||
"defaultMessage": "Please, fill the new map name and 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 { useSelector } from 'react-redux';
|
||||||
import SizeType from '@wisemapping/mindplot/src/components/SizeType';
|
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 ExportFormat = 'svg' | 'jpg' | 'png' | 'txt' | 'mm' | 'wxml' | 'xls' | 'md';
|
||||||
type ExportGroup = 'image' | 'document' | 'mindmap-tool';
|
type ExportGroup = 'image' | 'document' | 'mindmap-tool';
|
||||||
@ -41,8 +43,11 @@ const ExportDialog = ({
|
|||||||
enableImgExport ? 'image' : 'document'
|
enableImgExport ? 'image' : 'document'
|
||||||
);
|
);
|
||||||
const [exportFormat, setExportFormat] = React.useState<ExportFormat>(
|
const [exportFormat, setExportFormat] = React.useState<ExportFormat>(
|
||||||
enableImgExport ? 'svg' : 'xls'
|
enableImgExport ? 'svg' : 'txt'
|
||||||
);
|
);
|
||||||
|
|
||||||
|
const [zoomToFit, setZoomToFit] = React.useState<boolean>(true)
|
||||||
|
|
||||||
const classes = useStyles();
|
const classes = useStyles();
|
||||||
|
|
||||||
const handleOnExportFormatChange = (event) => {
|
const handleOnExportFormatChange = (event) => {
|
||||||
@ -76,6 +81,10 @@ const ExportDialog = ({
|
|||||||
setSubmit(true);
|
setSubmit(true);
|
||||||
};
|
};
|
||||||
|
|
||||||
|
const handleOnZoomToFit = (): void => {
|
||||||
|
setZoomToFit(!zoomToFit);
|
||||||
|
};
|
||||||
|
|
||||||
const exporter = (formatType: ExportFormat): Promise<string> => {
|
const exporter = (formatType: ExportFormat): Promise<string> => {
|
||||||
let svgElement: Element | null = null;
|
let svgElement: Element | null = null;
|
||||||
let size: SizeType;
|
let size: SizeType;
|
||||||
@ -97,7 +106,7 @@ const ExportDialog = ({
|
|||||||
case 'png':
|
case 'png':
|
||||||
case 'jpg':
|
case 'jpg':
|
||||||
case 'svg': {
|
case 'svg': {
|
||||||
exporter = ImageExporterFactory.create(formatType, mindmap, svgElement, size.width, size.height);
|
exporter = ImageExporterFactory.create(formatType, mindmap, svgElement, size.width, size.height, zoomToFit);
|
||||||
break;
|
break;
|
||||||
}
|
}
|
||||||
case 'wxml':
|
case 'wxml':
|
||||||
@ -131,7 +140,7 @@ const ExportDialog = ({
|
|||||||
URL.revokeObjectURL(url);
|
URL.revokeObjectURL(url);
|
||||||
document.body.removeChild(anchor);
|
document.body.removeChild(anchor);
|
||||||
}).catch((fail) => {
|
}).catch((fail) => {
|
||||||
console.log("Unexpected error during export:" + fail);
|
console.error("Unexpected error during export:" + fail);
|
||||||
});
|
});
|
||||||
|
|
||||||
onClose();
|
onClose();
|
||||||
@ -173,22 +182,32 @@ const ExportDialog = ({
|
|||||||
style={{ fontSize: '9px' }}
|
style={{ fontSize: '9px' }}
|
||||||
/>
|
/>
|
||||||
{exportGroup == 'image' && (
|
{exportGroup == 'image' && (
|
||||||
<Select
|
<>
|
||||||
onChange={handleOnExportFormatChange}
|
<Select
|
||||||
variant="outlined"
|
onChange={handleOnExportFormatChange}
|
||||||
value={exportFormat}
|
variant="outlined"
|
||||||
className={classes.label}
|
value={exportFormat}
|
||||||
>
|
className={classes.select}
|
||||||
<MenuItem value="svg" className={classes.menu}>
|
>
|
||||||
Scalable Vector Graphics (SVG)
|
<MenuItem value="svg" className={classes.menu}>
|
||||||
</MenuItem>
|
Scalable Vector Graphics (SVG)
|
||||||
<MenuItem value="png" className={classes.menu}>
|
</MenuItem>
|
||||||
Portable Network Graphics (PNG)
|
<MenuItem value="png" className={classes.menu}>
|
||||||
</MenuItem>
|
Portable Network Graphics (PNG)
|
||||||
<MenuItem value="jpg" className={classes.menu}>
|
</MenuItem>
|
||||||
JPEG Image (JPEG)
|
<MenuItem value="jpg" className={classes.menu}>
|
||||||
</MenuItem>
|
JPEG Image (JPEG)
|
||||||
</Select>
|
</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>
|
</FormControl>
|
||||||
|
|
||||||
|
@ -161,7 +161,7 @@ const RegistationPage = (): React.ReactElement => {
|
|||||||
|
|
||||||
useEffect(() => {
|
useEffect(() => {
|
||||||
document.title = intl.formatMessage({
|
document.title = intl.formatMessage({
|
||||||
id: 'registration.title',
|
id: 'registration.page-title',
|
||||||
defaultMessage: 'Registration | WiseMapping',
|
defaultMessage: 'Registration | WiseMapping',
|
||||||
});
|
});
|
||||||
});
|
});
|
||||||
|
Loading…
Reference in New Issue
Block a user