vmario/wisemapping-frontend
1
0
Fork 0
mirror of https://bitbucket.org/wisemapping/wisemapping-frontend.git synced 2024-11-24 15:37:55 +01:00
Code Issues Packages Projects Releases Wiki Activity

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

Browse Source 
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
This commit is contained in:
Gonzalo Martinez 2022-09-08 03:46:09 +00:00 committed by Paulo Veiga
parent 394346810a
commit e976f3747a
8 changed files with 76 additions and 117 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
packages/webapp/src/classes/app-config/index.ts
View File

@ -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;

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

@ -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;

6
packages/webapp/src/classes/client/index.ts
View File

@ -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;
}

33
packages/webapp/src/classes/client/mock-client/index.ts
View File

@ -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;

54
packages/webapp/src/classes/client/rest-client/index.ts
View File

@ -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)}`);

61
packages/webapp/src/components/editor-page/PersistenceManagerUtils.ts Normal file
View File

@ -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;
};

7
packages/webapp/src/components/editor-page/index.tsx
View File

@ -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 { activeInstance, fetchAccount, fetchMapById } from '../../redux/clientSlice';
import { 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 ? (

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

@ -16,12 +16,10 @@ import {
ImageExporterFactory,
Exporter,
Mindmap,
SizeType,
} from '@wisemapping/editor';
import Client from '../../../../classes/client';
import { activeInstance } from '../../../../redux/clientSlice';
import { getMindmapFromPersistence } from '../../../editor-page/PersistenceManagerUtils';
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;