From e4d43013d1f54ebf15cce73a89870784147b223b Mon Sep 17 00:00:00 2001
From: Paulo Gustavo Veiga <pveiga@wisemapping.com>
Date: Tue, 15 Feb 2022 13:30:51 -0800
Subject: [PATCH] Add export image center support

---
 packages/webapp/lang/en.json                  |  8 ++-
 .../action-dispatcher/export-dialog/index.tsx | 57 ++++++++++++-------
 .../components/registration-page/index.tsx    |  2 +-
 3 files changed, 46 insertions(+), 21 deletions(-)

diff --git a/packages/webapp/lang/en.json b/packages/webapp/lang/en.json
index 55468311..f2ba5518 100644
--- a/packages/webapp/lang/en.json
+++ b/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."
diff --git a/packages/webapp/src/components/maps-page/action-dispatcher/export-dialog/index.tsx b/packages/webapp/src/components/maps-page/action-dispatcher/export-dialog/index.tsx
index 7ad3d011..b9e2b343 100644
--- a/packages/webapp/src/components/maps-page/action-dispatcher/export-dialog/index.tsx
+++ b/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,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>
 
diff --git a/packages/webapp/src/components/registration-page/index.tsx b/packages/webapp/src/components/registration-page/index.tsx
index 39e2f559..dc717785 100644
--- a/packages/webapp/src/components/registration-page/index.tsx
+++ b/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',
         });
     });