Add export image center support

packages/webapp/lang/en.json

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

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

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

packages/webapp/src/components/registration-page/index.tsx

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