Lazy loading for map

packages/editor/src/components/action-widget/pane/color-picker/index.tsx

@@ -32,7 +32,7 @@ const ColorPicker = (props: {
     <Box component="div" sx={{ m: 2 }}>
       <ReactColorPicker
         color={props.colorModel.getValue() || '#fff'}
-        onChangeComplete={(color) => {
+        onChangeComplete={(color: { hex: string }) => {
           props.colorModel.setValue(color.hex);
           props.closeModal();
         }}
@@ -40,7 +40,7 @@ const ColorPicker = (props: {
         width={216}
         circleSpacing={9}
         circleSize={18}
-      ></ReactColorPicker>
+      />
     </Box>
   );
 };

packages/mindplot/src/components/LocalStorageManager.ts

@@ -15,7 +15,6 @@
  *   See the License for the specific language governing permissions and
  *   limitations under the License.
  */
-import $ from 'jquery';
 import PersistenceManager from './PersistenceManager';
 
 class LocalStorageManager extends PersistenceManager {
@@ -47,36 +46,36 @@ class LocalStorageManager extends PersistenceManager {
     }
   }
 
-  loadMapDom(mapId: string) {
-    let xml;
+  loadMapDom(mapId: string): Promise<Document> {
+    let result: Promise<Document>;
+    let localStorate;
     if (!this.readOnly) {
-      xml = localStorage.getItem(`${mapId}-xml`);
+      localStorate = localStorage.getItem(`${mapId}-xml`);
     }
-    if (xml == null || this.forceLoad) {
-      $.ajax({
-        url: this.documentUrl.replace('{id}', mapId),
+
+    if (localStorate == null || this.forceLoad) {
+      const url = this.documentUrl.replace('{id}', mapId);
+      result = fetch(url, {
+        method: 'get',
         headers: {
           'Content-Type': 'text/plain',
           Accept: 'application/xml',
           'X-CSRF-Token': this.getCSRFToken(),
         },
-        type: 'get',
-        dataType: 'text',
-        async: false,
-        success(response) {
-          xml = response;
-        },
-        error(xhr, ajaxOptions, thrownError) {
-          console.error(`Request error => status:${xhr.status} ,thrownError: ${thrownError}`);
-        },
-      });
-      // If I could not load it from a file, hard code one.
-      if (xml == null) {
-        throw new Error(`Map could not be loaded with id:${mapId}`);
+      })
+        .then((response: Response) => {
+          if (!response.ok) {
+            console.error(`load error: ${response.status}`);
+            throw new Error(`load error: ${response.status}, ${response.statusText}`);
           }
+          return response.text();
+        })
+        .then((xmlStr) => new DOMParser().parseFromString(xmlStr, 'text/xml'));
+    } else {
+      const doc = new DOMParser().parseFromString(localStorate, 'text/xml');
+      result = Promise.resolve(doc);
     }
-
-    return $.parseXML(xml);
+    return result;
   }
 
   unlockMap(): void {

packages/mindplot/src/components/MindplotWebComponent.ts

@@ -100,9 +100,9 @@ class MindplotWebComponent extends HTMLElement {
    * Load map in designer throught persistence manager instance
    * @param id the map id to be loaded.
    */
-  loadMap(id: string) {
+  async loadMap(id: string): Promise<void> {
     const instance = PersistenceManager.getInstance();
-    this._mindmap = instance.load(id);
+    this._mindmap = await instance.load(id);
     this._designer.loadMap(this._mindmap);
   }
 

packages/mindplot/src/components/MockPersistenceManager.ts

@@ -36,8 +36,8 @@ class MockPersistenceManager extends PersistenceManager {
     // Ignore, no implementation required ...
   }
 
-  loadMapDom() {
-    return $.parseXML(this.exampleMap);
+  loadMapDom(): Promise<Document> {
+    return Promise.resolve($.parseXML(this.exampleMap));
   }
 
   unlockMap(): void {

packages/mindplot/src/components/PersistenceManager.ts

@@ -61,10 +61,12 @@ abstract class PersistenceManager {
     return result;
   }
 
-  load(mapId: string) {
+  load(mapId: string): Promise<Mindmap> {
     $assert(mapId, 'mapId can not be null');
-    const domDocument = this.loadMapDom(mapId);
-    return PersistenceManager.loadFromDom(mapId, domDocument);
+    return this.loadMapDom(mapId).then((document) => {
+      console.log(`Loding map with is ${mapId}}`);
+      return PersistenceManager.loadFromDom(mapId, document);
+    });
   }
 
   triggerError(error: PersistenceError) {
@@ -75,7 +77,7 @@ abstract class PersistenceManager {
     this._errorHandlers.push(callback);
   }
 
-  removeErrorHandler(callback?: PersistenceErrorCallback) {
+  removeErrorHandler(callback?: PersistenceErrorCallback): void {
     if (!callback) {
       this._errorHandlers.length = 0;
     }
@@ -87,7 +89,7 @@ abstract class PersistenceManager {
 
   abstract discardChanges(mapId: string): void;
 
-  abstract loadMapDom(mapId: string): Document;
+  abstract loadMapDom(mapId: string): Promise<Document>;
 
   abstract saveMapXml(mapId: string, mapXml: Document, pref?, saveHistory?: boolean, events?);
 

packages/mindplot/src/components/RestPersistenceManager.ts

@@ -16,7 +16,6 @@
  *   limitations under the License.
  */
 import { $assert } from '@wisemapping/core-js';
-import $ from 'jquery';
 import { $msg } from './Messages';
 import PersistenceManager, { PersistenceError } from './PersistenceManager';
 
@@ -157,31 +156,24 @@ class RESTPersistenceManager extends PersistenceManager {
     return { severity, message };
   }
 
-  loadMapDom(mapId: string): Document {
-    let xml: Document;
-    $.ajax({
-      url: `${this.documentUrl.replace('{id}', mapId)}/xml`,
+  loadMapDom(mapId: string): Promise<Document> {
+    const url = `${this.documentUrl.replace('{id}', mapId)}/xml`;
+    return fetch(url, {
       method: 'get',
-      async: false,
       headers: {
         'Content-Type': 'text/plain',
         Accept: 'application/xml',
         'X-CSRF-Token': this.getCSRFToken(),
       },
-      success(responseText) {
-        xml = responseText;
-      },
-      error(xhr, ajaxOptions, thrownError) {
-        console.error(`Request error => status:${xhr.status} ,thrownError: ${thrownError}`);
-      },
-    });
-
-    // If I could not load it from a file, hard code one.
-    if (xml == null) {
-      throw new Error(`Map with id ${mapId} could not be loaded`);
+    })
+      .then((response: Response) => {
+        if (!response.ok) {
+          console.error(`load error: ${response.status}`);
+          throw new Error(`load error: ${response.status}, ${response.statusText}`);
         }
-
-    return xml;
+        return response.text();
+      })
+      .then((xmlStr) => new DOMParser().parseFromString(xmlStr, 'text/xml'));
   }
 }
 

packages/webapp/src/index.tsx

@@ -1,13 +1,9 @@
-import './wdyr'; // <--- first import
+// import './wdyr';
 
 import React from 'react';
 import App from './app';
 import { createRoot } from 'react-dom/client';
 
-async function bootstrapApplication() {
 const container = document.getElementById('root') as HTMLElement;
 const root = createRoot(container!);
 root.render(<App />);
-}
-
-bootstrapApplication();