Merged in lazy-editor-in-app (pull request #59)

Lazy editor in app

* remove editor dependecies from Client + code refactor

* eslint fixes

* commented code removed

* Merged develop into lazy-editor-in-app
* code refactor to move logic from views

* eslint fixes

* Merge branch 'lazy-editor-in-app' of bitbucket.org:wisemapping/wisemapping-frontend into lazy-editor-in-app

packages/webapp/src/classes/app-config/index.ts

@@ -35,6 +35,11 @@ class _AppConfig {
     return result;
   }
 
+  isRestClient(): boolean {
+    const config = this.getInstance();
+    return config.clientType === 'rest';
+  }
+
   isRecaptcha2Enabled(): boolean {
     const config = this.getInstance();
     return config.recaptcha2Enabled;

packages/webapp/src/classes/client/cache-decorator-client/index.ts

@@ -1,4 +1,3 @@
-import { EditorRenderMode, Mindmap, PersistenceManager } from '@wisemapping/editor';
 import Client, {
   AccountInfo,
   BasicMapInfo,
@@ -22,10 +21,6 @@ class CacheDecoratorClient implements Client {
     return this.client.onSessionExpired(callback);
   }
 
-  fetchMindmap(id: number): Mindmap {
-    return this.client.fetchMindmap(id);
-  }
-
   deleteAccount(): Promise<void> {
     return this.client.deleteAccount();
   }
@@ -129,14 +124,6 @@ class CacheDecoratorClient implements Client {
   revertHistory(id: number, cid: number): Promise<void> {
     return this.client.revertHistory(id, cid);
   }
-
-  buildPersistenceManager(mode: EditorRenderMode): PersistenceManager {
-    return this.client.buildPersistenceManager(mode);
-  }
-
-  removePersistenceManager(): void {
-    return this.client.removePersistenceManager();
-  }
 }
 
 export default CacheDecoratorClient;

packages/webapp/src/classes/client/index.ts

@@ -1,4 +1,3 @@
-import { EditorRenderMode, Mindmap, PersistenceManager } from '@wisemapping/editor';
 import { Locale, LocaleCode } from '../app-i18n';
 
 export type NewUser = {
@@ -107,11 +106,6 @@ interface Client {
   fetchHistory(id: number): Promise<ChangeHistory[]>;
   revertHistory(id: number, cid: number): Promise<void>;
 
-  fetchMindmap(id: number): Mindmap;
-
-  buildPersistenceManager(mode: EditorRenderMode): PersistenceManager;
-  removePersistenceManager(): void;
-
   onSessionExpired(callback?: () => void): () => void;
 }
 

packages/webapp/src/classes/client/mock-client/index.ts

@@ -1,5 +1,3 @@
-import { Mindmap, MockPersistenceManager, PersistenceManager } from '@wisemapping/editor';
-import XMLSerializerTango from '@wisemapping/editor';
 import Client, {
   AccountInfo,
   BasicMapInfo,
@@ -11,7 +9,6 @@ import Client, {
   Permission,
 } from '..';
 import { LocaleCode, localeFromStr } from '../../app-i18n';
-import exampleMap from './example-map.wxml';
 
 const label1: Label = {
   id: 1,
@@ -35,7 +32,6 @@ class MockClient implements Client {
   private maps: MapInfo[] = [];
   private labels: Label[] = [];
   private permissionsByMap: Map<number, Permission[]> = new Map();
-  private persistenceManager: PersistenceManager;
 
   constructor() {
     // Remove, just for develop ....
@@ -116,20 +112,6 @@ class MockClient implements Client {
     return callback;
   }
 
-  fetchMindmap(id: number): Mindmap {
-    const parser = new DOMParser();
-    const xmlDoc = parser.parseFromString(
-      `
-        <map name="${id}" version="tango">
-            <topic central="true" text="This is the map ${id}" id="1" fontStyle=";;#ffffff;;;"></topic>
-        </map>
-        `,
-      'text/xml',
-    );
-
-    const serializer = new XMLSerializerTango();
-    return serializer.loadFromDom(xmlDoc, String(id));
-  }
   deleteMapPermission(id: number, email: string): Promise<void> {
     let perm = this.permissionsByMap.get(id) || [];
     perm = perm.filter((p) => p.email != email);
@@ -405,21 +387,6 @@ class MockClient implements Client {
     console.log('email:' + email);
     return Promise.resolve();
   }
-
-  buildPersistenceManager(): PersistenceManager {
-    if (this.persistenceManager) {
-      return this.persistenceManager;
-    }
-    const persistence: PersistenceManager = new MockPersistenceManager(exampleMap);
-    this.persistenceManager = persistence;
-    return persistence;
-  }
-
-  removePersistenceManager(): void {
-    if (this.persistenceManager) {
-      delete this.persistenceManager;
-    }
-  }
 }
 
 export default MockClient;

packages/webapp/src/classes/client/rest-client/index.ts

@@ -1,11 +1,3 @@
-import {
-  EditorRenderMode,
-  LocalStorageManager,
-  Mindmap,
-  PersistenceManager,
-  RESTPersistenceManager,
-} from '@wisemapping/editor';
-import { PersistenceError } from '@wisemapping/editor';
 import axios, { AxiosInstance, AxiosResponse } from 'axios';
 import Client, {
   ErrorInfo,
@@ -23,7 +15,6 @@ import { LocaleCode, localeFromStr } from '../../app-i18n';
 
 export default class RestClient implements Client {
   private baseUrl: string;
-  private persistenceManager: PersistenceManager;
   private axios: AxiosInstance;
 
   private checkResponseForSessionExpired = <T>(error: {
@@ -65,13 +56,6 @@ export default class RestClient implements Client {
     }
   }
 
-  fetchMindmap(id: number): Mindmap {
-    // Load mindmap ...
-    const persistence = new LocalStorageManager(`/c/restful/maps/{id}/document/xml`, true);
-    const mindmap = persistence.load(String(id));
-    return mindmap;
-  }
-
   deleteMapPermission(id: number, email: string): Promise<void> {
     const handler = (success: () => void, reject: (error: ErrorInfo) => void) => {
       this.axios
@@ -621,44 +605,6 @@ export default class RestClient implements Client {
     return new Promise(handler);
   }
 
-  private onPersistenceManagerError(error: PersistenceError) {
-    if (error.errorType === 'session-expired') {
-      this.sessionExpired();
-    }
-  }
-
-  buildPersistenceManager(editorMode: EditorRenderMode): PersistenceManager {
-    if (this.persistenceManager) {
-      return this.persistenceManager;
-    }
-
-    let persistence: PersistenceManager;
-    if (editorMode === 'edition-owner' || editorMode === 'edition-editor') {
-      persistence = new RESTPersistenceManager({
-        documentUrl: '/c/restful/maps/{id}/document',
-        revertUrl: '/c/restful/maps/{id}/history/latest',
-        lockUrl: '/c/restful/maps/{id}/lock',
-      });
-    } else {
-      persistence = new LocalStorageManager(
-        `/c/restful/maps/{id}/${global.historyId ? `${global.historyId}/` : ''}document/xml${
-          editorMode === 'showcase' ? '-pub' : ''
-        }`,
-        true,
-      );
-    }
-    persistence.addErrorHandler((err) => this.onPersistenceManagerError(err));
-    this.persistenceManager = persistence;
-    return persistence;
-  }
-
-  removePersistenceManager(): void {
-    if (this.persistenceManager) {
-      this.persistenceManager.removeErrorHandler();
-      delete this.persistenceManager;
-    }
-  }
-
   // eslint-disable-next-line @typescript-eslint/no-explicit-any
   private parseResponseOnError = (response: any): ErrorInfo => {
     console.error(`Performing backend action error: ${JSON.stringify(response)}`);

packages/webapp/src/components/editor-page/PersistenceManagerUtils.ts

@@ -0,0 +1,61 @@
+import AppConfig from '../../classes/app-config';
+import exampleMap from '../../classes/client/mock-client/example-map.wxml';
+import {
+  PersistenceManager,
+  RESTPersistenceManager,
+  LocalStorageManager,
+  Mindmap,
+  MockPersistenceManager,
+  XMLSerializerTango,
+} from '@wisemapping/editor';
+
+export const buildPersistenceManagerForEditor = (mode: string): PersistenceManager => {
+  let persistenceManager: PersistenceManager;
+  if (AppConfig.isRestClient()) {
+    if (mode === 'edition-owner' || mode === 'edition-editor') {
+      persistenceManager = new RESTPersistenceManager({
+        documentUrl: '/c/restful/maps/{id}/document',
+        revertUrl: '/c/restful/maps/{id}/history/latest',
+        lockUrl: '/c/restful/maps/{id}/lock',
+      });
+    } else {
+      persistenceManager = new LocalStorageManager(
+        `/c/restful/maps/{id}/${global.historyId ? `${global.historyId}/` : ''}document/xml${
+          mode === 'showcase' ? '-pub' : ''
+        }`,
+        true,
+      );
+    }
+    persistenceManager.addErrorHandler((error) => {
+      if (error.errorType === 'session-expired') {
+        // TODO: this line was in RestPersistenceClient, do something similar here
+        //client.sessionExpired();
+      }
+    });
+  } else {
+    persistenceManager = new MockPersistenceManager(exampleMap);
+  }
+  return persistenceManager;
+};
+
+export const getMindmapFromPersistence = (mapId: string): Mindmap => {
+  let mindmap: Mindmap;
+  if (AppConfig.isRestClient()) {
+    const persistence = new LocalStorageManager(`/c/restful/maps/{id}/document/xml`, true);
+    mindmap = persistence.load(String(mapId));
+  } else {
+    const parser = new DOMParser();
+    const xmlDoc = parser.parseFromString(
+      `
+				<map name="${mapId}" version="tango">
+					<topic central="true" text="This is the map ${mapId}" id="1" fontStyle=";;#ffffff;;;"></topic>
+				</map>
+				`,
+      'text/xml',
+    );
+
+    const serializer = new XMLSerializerTango();
+    mindmap = serializer.loadFromDom(xmlDoc, String(mapId));
+  }
+  return mindmap;
+};

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

@@ -8,9 +8,9 @@ import AppI18n, { Locales } from '../../classes/app-i18n';
 import { useSelector } from 'react-redux';
 import { hotkeysEnabled } from '../../redux/editorSlice';
 import ReactGA from 'react-ga4';
-import Client from '../../classes/client';
+import { fetchAccount, fetchMapById } from '../../redux/clientSlice';
-import { activeInstance, fetchAccount, fetchMapById } from '../../redux/clientSlice';
 import EditorOptionsBuilder from './EditorOptionsBuilder';
+import { buildPersistenceManagerForEditor } from './PersistenceManagerUtils';
 
 export type EditorPropsType = {
   isTryMode: boolean;
@@ -20,7 +20,6 @@ const EditorPage = ({ isTryMode }: EditorPropsType): React.ReactElement => {
   const [activeDialog, setActiveDialog] = React.useState<ActionType | null>(null);
   const hotkey = useSelector(hotkeysEnabled);
   const userLocale = AppI18n.getUserLocale();
-  const client: Client = useSelector(activeInstance);
 
   useEffect(() => {
     ReactGA.send({ hitType: 'pageview', page: window.location.pathname, title: `Map Editor` });
@@ -62,7 +61,7 @@ const EditorPage = ({ isTryMode }: EditorPropsType): React.ReactElement => {
   let options, persistence: PersistenceManager;
   if (loadCompleted) {
     options = EditorOptionsBuilder.build(userLocale.code, mode, hotkey);
-    persistence = client.buildPersistenceManager(mode);
+    persistence = buildPersistenceManagerForEditor(mode);
   }
 
   return loadCompleted ? (

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

@@ -16,12 +16,10 @@ import {
   ImageExporterFactory,
   Exporter,
   Mindmap,
+  SizeType,
 } from '@wisemapping/editor';
-import Client from '../../../../classes/client';
+import { getMindmapFromPersistence } from '../../../editor-page/PersistenceManagerUtils';
-import { activeInstance } from '../../../../redux/clientSlice';
 
-import { useSelector } from 'react-redux';
-import SizeType from '@wisemapping/editor';
 import Checkbox from '@mui/material/Checkbox';
 
 type ExportFormat = 'svg' | 'jpg' | 'png' | 'txt' | 'mm' | 'wxml' | 'xls' | 'md';
@@ -42,7 +40,6 @@ const ExportDialog = ({
   const intl = useIntl();
   const [submit, setSubmit] = React.useState<boolean>(false);
   const { map } = fetchMapById(mapId);
-  const client: Client = useSelector(activeInstance);
 
   const [exportGroup, setExportGroup] = React.useState<ExportGroup>(
     enableImgExport ? 'image' : 'document',
@@ -96,14 +93,17 @@ const ExportDialog = ({
     let mindmap: Mindmap;
 
     const designer: Designer = global.designer;
+    // exporting from editor toolbar action
     if (designer != null) {
       // Depending on the type of export. It will require differt POST.
       const workspace = designer.getWorkSpace();
       svgElement = workspace.getSVGElement();
       size = { width: window.innerWidth, height: window.innerHeight };
       mindmap = designer.getMindmap();
-    } else {
+    }
-      mindmap = client.fetchMindmap(mapId);
+    // exporting from map list
+    else {
+      mindmap = getMindmapFromPersistence(String(mapId));
     }
 
     let exporter: Exporter;