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

Add export image center support

Browse Source
This commit is contained in:
Paulo Gustavo Veiga 2022-02-15 13:30:51 -08:00
parent 7942ac137f
commit e4d43013d1
3 changed files with 46 additions and 21 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -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."

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

@ -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,22 +182,32 @@ const ExportDialog = ({
style={{ fontSize: '9px' }}
/>
{exportGroup == 'image' && (
<Select
onChange={handleOnExportFormatChange}
variant="outlined"
value={exportFormat}
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="jpg" className={classes.menu}>
JPEG Image (JPEG)
</MenuItem>
</Select>
<>
<Select
onChange={handleOnExportFormatChange}
variant="outlined"
value={exportFormat}
className={classes.select}
>
<MenuItem value="svg" className={classes.menu}>
Scalable Vector Graphics (SVG)
</MenuItem>
<MenuItem value="png" className={classes.menu}>
Portable Network Graphics (PNG)
</MenuItem>
<MenuItem value="jpg" className={classes.menu}>
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>

2
packages/webapp/src/components/registration-page/index.tsx
View File

@ -161,7 +161,7 @@ const RegistationPage = (): React.ReactElement => {
useEffect(() => {
document.title = intl.formatMessage({
id: 'registration.title',
id: 'registration.page-title',
defaultMessage: 'Registration | WiseMapping',
});
});