Development: Update Apollon version and fix exports (#52)

ls1intum · Mar 24, 2023 · 5dd638e · 5dd638e
1 parent d7c7f58
commit 5dd638e
Show file tree

Hide file tree

Showing 7 changed files with 198 additions and 172 deletions.
diff --git a/packages/server/src/main/resources/conversion-resource.ts b/packages/server/src/main/resources/conversion-resource.ts
@@ -9,13 +9,13 @@ import { UMLModel } from '@ls1intum/apollon';
 export class ConversionResource {
   conversionService: ConversionService = new ConversionService();
 
-  convert = (req: Request, res: Response) => {
+  convert = async (req: Request, res: Response) => {
     if (req.body && req.body.model) {
       let model = req.body.model;
       if (typeof model === 'string') {
         model = JSON.parse(model);
       }
-      const { svg, clip } = this.conversionService.convertToSvg(<UMLModel>(<unknown>model));
+      const { svg, clip } = await this.conversionService.convertToSvg(<UMLModel>(<unknown>model));
       const { width, height } = clip;
       pdfMake.vfs = pdfFonts.pdfMake.vfs;
       var doc = pdfMake.createPdf({

diff --git a/packages/server/src/main/services/conversion-service/conversion-service.ts b/packages/server/src/main/services/conversion-service/conversion-service.ts
@@ -2,7 +2,7 @@ import 'jsdom-global/register';
 import { ApollonEditor, SVG, UMLModel } from '@ls1intum/apollon';
 
 export class ConversionService {
-  convertToSvg = (model: UMLModel): SVG => {
+  convertToSvg = async (model: UMLModel): Promise<SVG> => {
     //@ts-ignore
     document.body.innerHTML = '<!doctype html><html><body><div></div></body></html>';
 
@@ -22,7 +22,7 @@ export class ConversionService {
 
     editor.model = model;
 
-    const svg: SVG = editor.exportAsSVG();
+    const svg: SVG = await editor.exportAsSVG();
 
     return svg;
   };

diff --git a/packages/webapp/package.json b/packages/webapp/package.json
@@ -16,7 +16,7 @@
     "yarn": ">=1.22.0"
   },
   "dependencies": {
-    "@ls1intum/apollon": "2.13.0",
+    "@ls1intum/apollon": "2.13.2",
     "bootstrap": "5.2.3",
     "moment": "2.29.4",
     "postcss-syntax": "0.36.2",

diff --git a/packages/webapp/src/main/services/export/pdf/export-pdf-epics.ts b/packages/webapp/src/main/services/export/pdf/export-pdf-epics.ts
@@ -2,7 +2,7 @@ import { ApollonEditor, SVG } from '@ls1intum/apollon';
 import { Action } from 'redux';
 import { Epic, ofType } from 'redux-observable';
 import { Observable } from 'rxjs';
-import { concatAll, map } from 'rxjs/operators';
+import { map, switchMap } from 'rxjs/operators';
 import { ApplicationState } from '../../../components/store/application-state';
 import { StopAction, StopActionType } from '../../actions';
 import { DiagramRepository } from '../../diagram/diagram-repository';
@@ -15,18 +15,19 @@ export const exportPDFEpic: Epic<Action, StopAction | FileDownloadAction, Applic
   return action$.pipe(
     ofType(ExportActionTypes.EXPORT_PDF),
     map((action) => action as ExportPDFAction),
-    map(async (action: ExportPDFAction) => {
+    switchMap(async (action: ExportPDFAction) => {
       const apollonEditor: ApollonEditor = action.payload.editor;
       const filename: string = `${action.payload.diagramTitle}.pdf`;
-      const apollonSVG: SVG = apollonEditor.exportAsSVG();
+      const apollonSVG: SVG = await apollonEditor.exportAsSVG();
       const { width, height } = apollonSVG.clip;
       const blob = await DiagramRepository.convertSvgToPdf(apollonSVG.svg, width, height);
 
       if (blob) {
+        const fileToDownload = new Blob([blob]);
         return {
           type: FileDownloadActionTypes.FILE_DOWNLOAD,
           payload: {
-            file: new Blob([blob]),
+            file: fileToDownload,
             filename,
           },
         };
@@ -36,6 +37,5 @@ export const exportPDFEpic: Epic<Action, StopAction | FileDownloadAction, Applic
         type: StopActionType.STOP_ACTION,
       };
     }),
-    concatAll(),
   );
 };
diff --git a/packages/webapp/src/main/services/export/png/export-png-epics.ts b/packages/webapp/src/main/services/export/png/export-png-epics.ts
@@ -1,36 +1,32 @@
 import { Epic } from 'redux-observable';
 import { Action } from 'redux';
 import { ApplicationState } from '../../../components/store/application-state';
-import { concatAll, filter, map } from 'rxjs/operators';
+import { filter, map, switchMap } from 'rxjs/operators';
 import { ExportActionTypes, ExportPNGAction } from '../export-types';
 import { ApollonEditor, SVG } from '@ls1intum/apollon';
 import { FileDownloadAction, FileDownloadActionTypes } from '../../file-download/file-download-types';
-import { from, Observable } from 'rxjs';
+import { Observable } from 'rxjs';
 
 export const exportPNGEpic: Epic<Action, FileDownloadAction, ApplicationState> = (
   action$: Observable<Action<ExportActionTypes>>,
 ) => {
   return action$.pipe(
     filter((action) => action.type === ExportActionTypes.EXPORT_PNG),
     map((action) => action as ExportPNGAction),
-    map((action: ExportPNGAction) => {
+    switchMap(async (action: ExportPNGAction) => {
       const apollonEditor: ApollonEditor = action.payload.editor;
       const fileName: string = `${action.payload.diagramTitle}.png`;
-      const apollonSVG: SVG = apollonEditor.exportAsSVG();
+      const apollonSVG: SVG = await apollonEditor.exportAsSVG();
       const setWhiteBackground: boolean = action.payload.setWhiteBackground;
-      return from(
-        convertRenderedSVGToPNG(apollonSVG, setWhiteBackground).then((png: Blob) => {
-          const fileToDownload = new File([png], fileName);
-          return {
-            type: FileDownloadActionTypes.FILE_DOWNLOAD,
-            payload: {
-              file: fileToDownload,
-            },
-          };
-        }),
-      );
+      const png: Blob = await convertRenderedSVGToPNG(apollonSVG, setWhiteBackground);
+      const fileToDownload = new File([png], fileName);
+      return {
+        type: FileDownloadActionTypes.FILE_DOWNLOAD,
+        payload: {
+          file: fileToDownload,
+        },
+      };
     }),
-    concatAll(),
   );
 };
 

diff --git a/packages/webapp/src/main/services/export/svg/export-svg-epics.ts b/packages/webapp/src/main/services/export/svg/export-svg-epics.ts
@@ -1,20 +1,23 @@
 import { Epic } from 'redux-observable';
 import { Action } from 'redux';
 import { ApplicationState } from '../../../components/store/application-state';
-import { filter, map } from 'rxjs/operators';
+import { filter, map, switchMap } from 'rxjs/operators';
 import { ExportActionTypes } from '../export-types';
 import { ExportSVGAction } from '../export-types';
 import { ApollonEditor, SVG } from '@ls1intum/apollon';
 import { FileDownloadAction, FileDownloadActionTypes } from '../../file-download/file-download-types';
+import { Observable } from 'rxjs';
 
-export const exportSVGEpic: Epic<Action, FileDownloadAction, ApplicationState> = (action$, store) => {
+export const exportSVGEpic: Epic<Action, FileDownloadAction, ApplicationState> = (
+  action$: Observable<Action<ExportActionTypes>>,
+) => {
   return action$.pipe(
     filter((action) => action.type === ExportActionTypes.EXPORT_SVG),
     map((action) => action as ExportSVGAction),
-    map((action: ExportSVGAction) => {
+    switchMap(async (action: ExportSVGAction) => {
       const apollonEditor: ApollonEditor = action.payload.editor;
       const fileName: string = `${action.payload.diagramTitle}.svg`;
-      const apollonSVG: SVG = apollonEditor.exportAsSVG();
+      const apollonSVG: SVG = await apollonEditor.exportAsSVG();
       const fileToDownload = new File([apollonSVG.svg], fileName);
       return {
         type: FileDownloadActionTypes.FILE_DOWNLOAD,