From a96c9902d6951c8f08421286b2ed1079e953c118 Mon Sep 17 00:00:00 2001 From: Paulo Gustavo Veiga Date: Tue, 15 Nov 2022 22:45:59 -0800 Subject: [PATCH] Lazy loading for map --- .../action-widget/pane/color-picker/index.tsx | 4 +- .../src/components/LocalStorageManager.ts | 45 +++++++++---------- .../src/components/MindplotWebComponent.ts | 4 +- .../src/components/MockPersistenceManager.ts | 4 +- .../src/components/PersistenceManager.ts | 12 ++--- .../src/components/RestPersistenceManager.ts | 32 +++++-------- packages/webapp/src/index.tsx | 12 ++--- 7 files changed, 51 insertions(+), 62 deletions(-) diff --git a/packages/editor/src/components/action-widget/pane/color-picker/index.tsx b/packages/editor/src/components/action-widget/pane/color-picker/index.tsx index 7b189ed2..21eadc4b 100644 --- a/packages/editor/src/components/action-widget/pane/color-picker/index.tsx +++ b/packages/editor/src/components/action-widget/pane/color-picker/index.tsx @@ -32,7 +32,7 @@ const ColorPicker = (props: { { + onChangeComplete={(color: { hex: string }) => { props.colorModel.setValue(color.hex); props.closeModal(); }} @@ -40,7 +40,7 @@ const ColorPicker = (props: { width={216} circleSpacing={9} circleSize={18} - > + /> ); }; diff --git a/packages/mindplot/src/components/LocalStorageManager.ts b/packages/mindplot/src/components/LocalStorageManager.ts index b53fceb3..b62d3091 100644 --- a/packages/mindplot/src/components/LocalStorageManager.ts +++ b/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 { + let result: Promise; + 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 { diff --git a/packages/mindplot/src/components/MindplotWebComponent.ts b/packages/mindplot/src/components/MindplotWebComponent.ts index 6312f0e1..d1f2347e 100644 --- a/packages/mindplot/src/components/MindplotWebComponent.ts +++ b/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 { const instance = PersistenceManager.getInstance(); - this._mindmap = instance.load(id); + this._mindmap = await instance.load(id); this._designer.loadMap(this._mindmap); } diff --git a/packages/mindplot/src/components/MockPersistenceManager.ts b/packages/mindplot/src/components/MockPersistenceManager.ts index f139dc20..5765bb52 100644 --- a/packages/mindplot/src/components/MockPersistenceManager.ts +++ b/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 { + return Promise.resolve($.parseXML(this.exampleMap)); } unlockMap(): void { diff --git a/packages/mindplot/src/components/PersistenceManager.ts b/packages/mindplot/src/components/PersistenceManager.ts index 3fe9ed83..9b9af483 100644 --- a/packages/mindplot/src/components/PersistenceManager.ts +++ b/packages/mindplot/src/components/PersistenceManager.ts @@ -61,10 +61,12 @@ abstract class PersistenceManager { return result; } - load(mapId: string) { + load(mapId: string): Promise { $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; abstract saveMapXml(mapId: string, mapXml: Document, pref?, saveHistory?: boolean, events?); diff --git a/packages/mindplot/src/components/RestPersistenceManager.ts b/packages/mindplot/src/components/RestPersistenceManager.ts index 4089c9df..91dce1cf 100644 --- a/packages/mindplot/src/components/RestPersistenceManager.ts +++ b/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 { + 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`); - } - - return xml; + }) + .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')); } } diff --git a/packages/webapp/src/index.tsx b/packages/webapp/src/index.tsx index 38dd6ad1..9c7b460c 100644 --- a/packages/webapp/src/index.tsx +++ b/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(); -} - -bootstrapApplication(); +const container = document.getElementById('root') as HTMLElement; +const root = createRoot(container!); +root.render();