',
+ template:
+ '
',
destroyOnExit: true,
});
}
- static _buildContent(linkIcon) {
- const url = linkIcon.getModel().getUrl();
+ private static _buildContent(linkIcon: LinkIcon): JQuery
Small
'
- + 'Normal
'
- + 'Large
'
- + 'Huge
';
+ content[0].innerHTML =
+ '' +
+ 'Small
' +
+ 'Normal
' +
+ 'Large
' +
+ 'Huge
';
return content;
}
diff --git a/packages/editor/src/classes/menu/IconPanel.js b/packages/editor/src/classes/menu/IconPanel.js
index b1202f4a..3c9e3611 100644
--- a/packages/editor/src/classes/menu/IconPanel.js
+++ b/packages/editor/src/classes/menu/IconPanel.js
@@ -19,15 +19,16 @@ import $ from 'jquery';
import ToolbarPaneItem from './ToolbarPaneItem';
import { ImageIcon } from '@wisemapping/mindplot';
-
class IconPanel extends ToolbarPaneItem {
_updateSelectedItem() {
return this.getPanelElem();
}
buildPanel() {
- const content = $('')
- .css({ width: 295, height: 305 });
+ const content = $('').css({
+ width: 295,
+ height: 305,
+ });
content.on('click', (event) => {
event.stopPropagation();
});
@@ -37,7 +38,7 @@ class IconPanel extends ToolbarPaneItem {
for (let i = 0; i < ImageIcon.prototype.ICON_FAMILIES.length; i += 1) {
const familyIcons = ImageIcon.prototype.ICON_FAMILIES[i].icons;
for (let j = 0; j < familyIcons.length; j += 1) {
- if ((count % 12) === 0) {
+ if (count % 12 === 0) {
familyContent = $('');
content.append(familyContent);
}
@@ -52,10 +53,10 @@ class IconPanel extends ToolbarPaneItem {
const panel = this;
const model = this.getModel();
- img.on('click', ((event) => {
+ img.on('click', (event) => {
model.setValue($(event.target).attr('id'));
panel.hide();
- }));
+ });
count += 1;
}
diff --git a/packages/editor/src/classes/menu/KeyboardShortcutDialog.js b/packages/editor/src/classes/menu/KeyboardShortcutDialog.js
index dda05336..c4c19c11 100644
--- a/packages/editor/src/classes/menu/KeyboardShortcutDialog.js
+++ b/packages/editor/src/classes/menu/KeyboardShortcutDialog.js
@@ -18,14 +18,13 @@
import BootstrapDialog from '../bootstrap/BootstrapDialog';
import { $msg } from '@wisemapping/mindplot';
-
class KeyboardShortcutDialog extends BootstrapDialog {
- constructor() {
- super($msg('SHORTCUTS'), {
- closeButton: true,
- acceptButton: false,
- });
- this.setContent(`
+ constructor() {
+ super($msg('SHORTCUTS'), {
+ closeButton: true,
+ acceptButton: false,
+ });
+ this.setContent(`
`);
- this.show();
- }
+ this.show();
+ }
}
export default KeyboardShortcutDialog;
diff --git a/packages/editor/src/classes/menu/KeyboardShortcutTooltip.js b/packages/editor/src/classes/menu/KeyboardShortcutTooltip.js
index 415dc561..7c3ce051 100644
--- a/packages/editor/src/classes/menu/KeyboardShortcutTooltip.js
+++ b/packages/editor/src/classes/menu/KeyboardShortcutTooltip.js
@@ -17,7 +17,7 @@
*/
import $ from 'jquery';
import { $assert } from '@wisemapping/core-js';
-import FloatingTip from '@wisemapping/mindplot/src/components/widget/FloatingTip';
+import FloatingTip from '../bootstrap/FloatingTip';
class KeyboardShortcutTooltip extends FloatingTip {
constructor(buttonElem, text) {
@@ -36,7 +36,8 @@ class KeyboardShortcutTooltip extends FloatingTip {
html: true,
placement: 'bottom',
className: 'keyboardShortcutTip',
- template: ';
+ code: LocaleCode;
+ label: string;
+ message: Record;
- constructor(code: LocaleCode, label: string, message: unknown) {
- this.code = code;
- this.label = label;
- this.message = message as Record;
- }
+ constructor(code: LocaleCode, label: string, message: unknown) {
+ this.code = code;
+ this.label = label;
+ this.message = message as Record;
+ }
}
export default abstract class AppI18n {
- private static LOCAL_STORAGE_KEY = 'user.locale';
+ private static LOCAL_STORAGE_KEY = 'user.locale';
- public static getUserLocale(): Locale {
- // @Todo Hack: Try page must not account info. Add this to avoid 403 errors.
- const isTryPage = window.location.href.endsWith('/try');
- let result: Locale;
- if (!isTryPage) {
- const account = fetchAccount();
- result = account?.locale ? account.locale : this.getDefaultLocale();
+ public static getUserLocale(): Locale {
+ // @Todo Hack: Try page must not account info. Add this to avoid 403 errors.
+ const isTryPage = window.location.href.endsWith('/try');
+ let result: Locale;
+ if (!isTryPage) {
+ const account = fetchAccount();
+ result = account?.locale ? account.locale : this.getDefaultLocale();
- // If the local storage value is different, update ...
- if (account?.locale && result.code !== localStorage.getItem(AppI18n.LOCAL_STORAGE_KEY)) {
- localStorage.setItem(AppI18n.LOCAL_STORAGE_KEY, result.code);
- }
+ // If the local storage value is different, update ...
+ if (account?.locale && result.code !== localStorage.getItem(AppI18n.LOCAL_STORAGE_KEY)) {
+ localStorage.setItem(AppI18n.LOCAL_STORAGE_KEY, result.code);
+ }
+ } else {
+ result = this.getDefaultLocale();
+ }
+ return result;
+ }
- } else {
- result = this.getDefaultLocale();
- }
- return result;
+ public static getBrowserLocale(): Locale {
+ let localeCode = (navigator.languages && navigator.languages[0]) || navigator.language;
+
+ // Just remove the variant ...
+ localeCode = localeCode.split('-')[0];
+
+ let result = Locales.EN;
+ try {
+ result = localeFromStr(localeCode);
+ } catch {
+ console.warn(`Unsupported languange code ${localeCode}`);
}
- public static getBrowserLocale(): Locale {
- let localeCode = (navigator.languages && navigator.languages[0]) || navigator.language;
+ return result;
+ }
- // Just remove the variant ...
- localeCode = localeCode.split('-')[0];
-
- let result = Locales.EN;
- try {
- result = localeFromStr(localeCode);
- } catch {
- console.warn(`Unsupported languange code ${localeCode}`);
- }
-
- return result;
+ public static getDefaultLocale(): Locale {
+ // Fetch local from local storage ...
+ let result: Locale;
+ const userLocaleCode: string = localStorage.getItem(AppI18n.LOCAL_STORAGE_KEY);
+ if (userLocaleCode) {
+ result = localeFromStr(userLocaleCode);
}
- public static getDefaultLocale(): Locale {
- // Fetch local from local storage ...
- let result: Locale;
- const userLocaleCode: string = localStorage.getItem(AppI18n.LOCAL_STORAGE_KEY);
- if (userLocaleCode) {
- result = localeFromStr(userLocaleCode);
- }
-
- // Ok, use browser default ...
- if (!result) {
- result = this.getBrowserLocale();
- }
- return result;
+ // Ok, use browser default ...
+ if (!result) {
+ result = this.getBrowserLocale();
}
+ return result;
+ }
}
export type LocaleCode = 'en' | 'es' | 'fr' | 'de' | 'ru' | 'zh';
export const Locales = {
- EN: new Locale('en', 'English', require('./../../compiled-lang/en.json')), // eslint-disable-line
- ES: new Locale('es', 'Español', require('./../../compiled-lang/es.json')), // eslint-disable-line
- DE: new Locale('fr', 'Français', require('./../../compiled-lang/fr.json')), // eslint-disable-line
- FR: new Locale('de', 'Deutsch', require('./../../compiled-lang/de.json')), // eslint-disable-line
- RU: new Locale('ru', 'Pусский', require('./../../compiled-lang/ru.json')), // eslint-disable-line
- ZH: new Locale('zh', '中文 (简体)', require('./../../compiled-lang/zh.json')), // eslint-disable-line
-
+ EN: new Locale('en', 'English', require('./../../compiled-lang/en.json')), // eslint-disable-line
+ ES: new Locale('es', 'Español', require('./../../compiled-lang/es.json')), // eslint-disable-line
+ DE: new Locale('fr', 'Français', require('./../../compiled-lang/fr.json')), // eslint-disable-line
+ FR: new Locale('de', 'Deutsch', require('./../../compiled-lang/de.json')), // eslint-disable-line
+ RU: new Locale('ru', 'Pусский', require('./../../compiled-lang/ru.json')), // eslint-disable-line
+ ZH: new Locale('zh', '中文 (简体)', require('./../../compiled-lang/zh.json')), // eslint-disable-line
};
export const localeFromStr = (code: string): Locale => {
- const locales: Locale[] = Object.values(Locales);
+ const locales: Locale[] = Object.values(Locales);
- const result = locales.find((l) => l.code == code);
+ const result = locales.find((l) => l.code == code);
- if (!result) {
- throw `Language code could not be found in list of default supported: + ${code}`;
- }
+ if (!result) {
+ throw `Language code could not be found in list of default supported: + ${code}`;
+ }
- return result;
+ return result;
};
diff --git a/packages/webapp/src/classes/client/cache-decorator-client/index.ts b/packages/webapp/src/classes/client/cache-decorator-client/index.ts
index 6cfa3735..4a1b3bee 100644
--- a/packages/webapp/src/classes/client/cache-decorator-client/index.ts
+++ b/packages/webapp/src/classes/client/cache-decorator-client/index.ts
@@ -1,143 +1,129 @@
-import { EditorRenderMode, Mindmap, PersistenceManager } from '@wisemapping/mindplot';
import Client, {
- AccountInfo,
- BasicMapInfo,
- ChangeHistory,
- ImportMapInfo,
- Label,
- MapInfo,
- NewUser,
- Permission,
+ AccountInfo,
+ BasicMapInfo,
+ ChangeHistory,
+ ImportMapInfo,
+ Label,
+ MapInfo,
+ NewUser,
+ Permission,
} from '..';
import { LocaleCode } from '../../app-i18n';
class CacheDecoratorClient implements Client {
- private client: Client;
+ private client: Client;
- constructor(client: Client) {
- this.client = client;
- }
+ constructor(client: Client) {
+ this.client = client;
+ }
- onSessionExpired(callback?: () => void): () => void {
- return this.client.onSessionExpired(callback);
- }
+ onSessionExpired(callback?: () => void): () => void {
+ return this.client.onSessionExpired(callback);
+ }
- fetchMindmap(id: number): Mindmap {
- return this.client.fetchMindmap(id);
- }
+ deleteAccount(): Promise {
+ return this.client.deleteAccount();
+ }
- deleteAccount(): Promise {
- return this.client.deleteAccount();
- }
+ importMap(model: ImportMapInfo): Promise {
+ return this.client.importMap(model);
+ }
- importMap(model: ImportMapInfo): Promise {
- return this.client.importMap(model);
- }
+ createMap(map: BasicMapInfo): Promise {
+ return this.client.createMap(map);
+ }
- createMap(map: BasicMapInfo): Promise {
- return this.client.createMap(map);
- }
+ deleteMaps(ids: number[]): Promise {
+ return this.client.deleteMaps(ids);
+ }
- deleteMaps(ids: number[]): Promise {
- return this.client.deleteMaps(ids);
- }
+ deleteMap(id: number): Promise {
+ return this.client.deleteMap(id);
+ }
- deleteMap(id: number): Promise {
- return this.client.deleteMap(id);
- }
+ renameMap(id: number, basicInfo: BasicMapInfo): Promise {
+ return this.client.renameMap(id, basicInfo);
+ }
- renameMap(id: number, basicInfo: BasicMapInfo): Promise {
- return this.client.renameMap(id, basicInfo);
- }
+ fetchAllMaps(): Promise {
+ return this.client.fetchAllMaps();
+ }
- fetchAllMaps(): Promise {
- return this.client.fetchAllMaps();
- }
+ fetchMapPermissions(id: number): Promise {
+ return this.client.fetchMapPermissions(id);
+ }
- fetchMapPermissions(id: number): Promise {
- return this.client.fetchMapPermissions(id);
- }
+ addMapPermissions(id: number, message: string, permissions: Permission[]): Promise {
+ return this.client.addMapPermissions(id, message, permissions);
+ }
- addMapPermissions(id: number, message: string, permissions: Permission[]): Promise {
- return this.client.addMapPermissions(id, message, permissions);
- }
+ deleteMapPermission(id: number, email: string): Promise {
+ return this.client.deleteMapPermission(id, email);
+ }
- deleteMapPermission(id: number, email: string): Promise {
- return this.client.deleteMapPermission(id, email);
- }
+ duplicateMap(id: number, basicInfo: BasicMapInfo): Promise {
+ return this.client.duplicateMap(id, basicInfo);
+ }
- duplicateMap(id: number, basicInfo: BasicMapInfo): Promise {
- return this.client.duplicateMap(id, basicInfo);
- }
+ updateAccountLanguage(locale: LocaleCode): Promise {
+ return this.client.updateAccountLanguage(locale);
+ }
- updateAccountLanguage(locale: LocaleCode): Promise {
- return this.client.updateAccountLanguage(locale);
- }
+ updateAccountPassword(pasword: string): Promise {
+ return this.client.updateAccountPassword(pasword);
+ }
- updateAccountPassword(pasword: string): Promise {
- return this.client.updateAccountPassword(pasword);
- }
+ updateAccountInfo(firstname: string, lastname: string): Promise {
+ return this.client.updateAccountInfo(firstname, lastname);
+ }
- updateAccountInfo(firstname: string, lastname: string): Promise {
- return this.client.updateAccountInfo(firstname, lastname);
- }
+ updateStarred(id: number, starred: boolean): Promise {
+ return this.client.updateStarred(id, starred);
+ }
- updateStarred(id: number, starred: boolean): Promise {
- return this.client.updateStarred(id, starred);
- }
+ updateMapToPublic(id: number, isPublic: boolean): Promise {
+ return this.client.updateMapToPublic(id, isPublic);
+ }
- updateMapToPublic(id: number, isPublic: boolean): Promise {
- return this.client.updateMapToPublic(id, isPublic);
- }
+ fetchLabels(): Promise {
+ return this.client.fetchLabels();
+ }
- fetchLabels(): Promise {
- return this.client.fetchLabels();
- }
+ createLabel(title: string, color: string): Promise {
+ return this.client.createLabel(title, color);
+ }
- createLabel(title: string, color: string): Promise {
- return this.client.createLabel(title, color);
- }
+ deleteLabel(id: number): Promise {
+ return this.client.deleteLabel(id);
+ }
- deleteLabel(id: number): Promise {
- return this.client.deleteLabel(id);
- }
+ addLabelToMap(labelId: number, mapId: number): Promise {
+ return this.client.addLabelToMap(labelId, mapId);
+ }
- addLabelToMap(labelId: number, mapId: number): Promise {
- return this.client.addLabelToMap(labelId, mapId);
- }
+ deleteLabelFromMap(labelId: number, mapId: number): Promise {
+ return this.client.deleteLabelFromMap(labelId, mapId);
+ }
- deleteLabelFromMap(labelId: number, mapId: number): Promise {
- return this.client.deleteLabelFromMap(labelId, mapId);
- }
+ fetchAccountInfo(): Promise {
+ return this.client.fetchAccountInfo();
+ }
- fetchAccountInfo(): Promise {
- return this.client.fetchAccountInfo();
- }
+ registerNewUser(user: NewUser): Promise {
+ return this.client.registerNewUser(user);
+ }
- registerNewUser(user: NewUser): Promise {
- return this.client.registerNewUser(user);
- }
+ resetPassword(email: string): Promise {
+ return this.client.resetPassword(email);
+ }
- resetPassword(email: string): Promise {
- return this.client.resetPassword(email);
- }
-
- fetchHistory(id: number): Promise {
- return this.client.fetchHistory(id);
- }
-
- revertHistory(id: number, cid: number): Promise {
- return this.client.revertHistory(id, cid);
- }
-
- buildPersistenceManager(mode: EditorRenderMode): PersistenceManager {
- return this.client.buildPersistenceManager(mode);
- }
-
- removePersistenceManager(): void {
- return this.client.removePersistenceManager();
- }
+ fetchHistory(id: number): Promise {
+ return this.client.fetchHistory(id);
+ }
+ revertHistory(id: number, cid: number): Promise {
+ return this.client.revertHistory(id, cid);
+ }
}
-export default CacheDecoratorClient;
\ No newline at end of file
+export default CacheDecoratorClient;
diff --git a/packages/webapp/src/classes/client/client-health-sentinel/index.tsx b/packages/webapp/src/classes/client/client-health-sentinel/index.tsx
index 468882bb..050f959e 100644
--- a/packages/webapp/src/classes/client/client-health-sentinel/index.tsx
+++ b/packages/webapp/src/classes/client/client-health-sentinel/index.tsx
@@ -11,45 +11,42 @@ import Button from '@mui/material/Button';
import AlertTitle from '@mui/material/AlertTitle';
const ClientHealthSentinel = (): React.ReactElement => {
- const status: ClientStatus = useSelector(activeInstanceStatus);
+ const status: ClientStatus = useSelector(activeInstanceStatus);
- const handleOnClose = () => {
- window.location.href = '/c/login';
- };
+ const handleOnClose = () => {
+ window.location.href = '/c/login';
+ };
- return (
- ;
+ msg?: string;
+ fields?: Map;
};
export type AccountInfo = {
- firstname: string;
- lastname: string;
- email: string;
- locale?: Locale;
+ firstname: string;
+ lastname: string;
+ email: string;
+ locale?: Locale;
};
export type Permission = {
- name?: string;
- email: string;
- role: Role;
+ name?: string;
+ email: string;
+ role: Role;
};
interface Client {
- deleteAccount(): Promise;
- importMap(model: ImportMapInfo): Promise;
- createMap(map: BasicMapInfo): Promise;
- deleteMaps(ids: number[]): Promise;
- deleteMap(id: number): Promise;
- renameMap(id: number, basicInfo: BasicMapInfo): Promise;
- fetchAllMaps(): Promise;
+ deleteAccount(): Promise;
+ importMap(model: ImportMapInfo): Promise;
+ createMap(map: BasicMapInfo): Promise;
+ deleteMaps(ids: number[]): Promise;
+ deleteMap(id: number): Promise;
+ renameMap(id: number, basicInfo: BasicMapInfo): Promise;
+ fetchAllMaps(): Promise;
- fetchMapPermissions(id: number): Promise;
- addMapPermissions(id: number, message: string, permissions: Permission[]): Promise;
- deleteMapPermission(id: number, email: string): Promise;
+ fetchMapPermissions(id: number): Promise;
+ addMapPermissions(id: number, message: string, permissions: Permission[]): Promise;
+ deleteMapPermission(id: number, email: string): Promise;
- duplicateMap(id: number, basicInfo: BasicMapInfo): Promise;
+ duplicateMap(id: number, basicInfo: BasicMapInfo): Promise;
- updateAccountLanguage(locale: LocaleCode): Promise;
- updateAccountPassword(pasword: string): Promise;
- updateAccountInfo(firstname: string, lastname: string): Promise;
+ updateAccountLanguage(locale: LocaleCode): Promise;
+ updateAccountPassword(pasword: string): Promise;
+ updateAccountInfo(firstname: string, lastname: string): Promise;
- updateStarred(id: number, starred: boolean): Promise;
- updateMapToPublic(id: number, isPublic: boolean): Promise;
+ updateStarred(id: number, starred: boolean): Promise;
+ updateMapToPublic(id: number, isPublic: boolean): Promise;
- createLabel(title: string, color: string): Promise;
- fetchLabels(): Promise;
- deleteLabel(id: number): Promise;
- addLabelToMap(labelId: number, mapId: number): Promise;
- deleteLabelFromMap(labelId: number, mapId: number): Promise;
- fetchAccountInfo(): Promise;
+ createLabel(title: string, color: string): Promise;
+ fetchLabels(): Promise;
+ deleteLabel(id: number): Promise;
+ addLabelToMap(labelId: number, mapId: number): Promise;
+ deleteLabelFromMap(labelId: number, mapId: number): Promise;
+ fetchAccountInfo(): Promise;
- registerNewUser(user: NewUser): Promise;
- resetPassword(email: string): Promise;
+ registerNewUser(user: NewUser): Promise;
+ resetPassword(email: string): Promise;
- fetchHistory(id: number): Promise;
- revertHistory(id: number, cid: number): Promise;
+ fetchHistory(id: number): Promise;
+ revertHistory(id: number, cid: number): Promise;
- fetchMindmap(id: number): Mindmap;
-
- buildPersistenceManager(mode: EditorRenderMode): PersistenceManager;
- removePersistenceManager(): void;
-
- onSessionExpired(callback?: () => void): () => void;
+ onSessionExpired(callback?: () => void): () => void;
}
export default Client;
diff --git a/packages/webapp/src/classes/client/mock-client/index.ts b/packages/webapp/src/classes/client/mock-client/index.ts
index 9d193e21..9865c25f 100644
--- a/packages/webapp/src/classes/client/mock-client/index.ts
+++ b/packages/webapp/src/classes/client/mock-client/index.ts
@@ -1,418 +1,392 @@
-import { Mindmap, MockPersistenceManager, PersistenceManager } from '@wisemapping/mindplot';
-import XMLSerializerTango from '@wisemapping/mindplot/src/components/persistence/XMLSerializerTango';
import Client, {
- AccountInfo,
- BasicMapInfo,
- ChangeHistory,
- ImportMapInfo,
- Label,
- MapInfo,
- NewUser,
- Permission,
+ AccountInfo,
+ BasicMapInfo,
+ ChangeHistory,
+ ImportMapInfo,
+ Label,
+ MapInfo,
+ NewUser,
+ Permission,
} from '..';
import { LocaleCode, localeFromStr } from '../../app-i18n';
-import exampleMap from './example-map.wxml';
const label1: Label = {
- id: 1,
- title: 'label 1',
- color: 'black',
-}
+ id: 1,
+ title: 'label 1',
+ color: 'black',
+};
const label2: Label = {
- id: 2,
- title: 'label 2',
- color: 'green',
-}
+ id: 2,
+ title: 'label 2',
+ color: 'green',
+};
const label3: Label = {
- id: 3,
- title: 'label 3',
- color: 'red',
-}
+ id: 3,
+ title: 'label 3',
+ color: 'red',
+};
class MockClient implements Client {
- private maps: MapInfo[] = [];
- private labels: Label[] = [];
- private permissionsByMap: Map = new Map();
- private persistenceManager: PersistenceManager;
+ private maps: MapInfo[] = [];
+ private labels: Label[] = [];
+ private permissionsByMap: Map = new Map();
- constructor() {
- // Remove, just for develop ....
- function createMapInfo(
- id: number,
- starred: boolean,
- title: string,
- labels: Label[],
- creator: string,
- creationTime: string,
- modifiedByUser: string,
- modifiedTime: string,
- description: string,
- isPublic: boolean,
- role: 'owner' | 'viewer' | 'editor'
- ): MapInfo {
- return {
- id,
- title,
- labels,
- createdBy: creator,
- creationTime,
- lastModificationBy: modifiedByUser,
- lastModificationTime: modifiedTime,
- starred,
- description,
- isPublic,
- role,
- };
+ constructor() {
+ // Remove, just for develop ....
+ function createMapInfo(
+ id: number,
+ starred: boolean,
+ title: string,
+ labels: Label[],
+ creator: string,
+ creationTime: string,
+ modifiedByUser: string,
+ modifiedTime: string,
+ description: string,
+ isPublic: boolean,
+ role: 'owner' | 'viewer' | 'editor',
+ ): MapInfo {
+ return {
+ id,
+ title,
+ labels,
+ createdBy: creator,
+ creationTime,
+ lastModificationBy: modifiedByUser,
+ lastModificationTime: modifiedTime,
+ starred,
+ description,
+ isPublic,
+ role,
+ };
+ }
+
+ this.maps = [
+ createMapInfo(
+ 1,
+ true,
+ 'El Mapa',
+ [],
+ 'Paulo',
+ '2008-06-02T00:00:00Z',
+ 'Berna',
+ '2008-06-02T00:00:00Z',
+ '',
+ true,
+ 'owner',
+ ),
+ createMapInfo(
+ 11,
+ false,
+ 'El Mapa3',
+ [label1, label2],
+ 'Paulo3',
+ '2008-06-02T00:00:00Z',
+ 'Berna',
+ '2008-06-02T00:00:00Z',
+ '',
+ false,
+ 'editor',
+ ),
+ createMapInfo(
+ 12,
+ false,
+ 'El Mapa3',
+ [label2, label3],
+ 'Paulo3',
+ '2008-06-02T00:00:00Z',
+ 'Berna',
+ '2008-06-02T00:00:00Z',
+ '',
+ false,
+ 'editor',
+ ),
+ ];
+
+ this.labels = [label1, label2, label3];
+ }
+
+ onSessionExpired(callback?: () => void): () => void {
+ return callback;
+ }
+
+ deleteMapPermission(id: number, email: string): Promise {
+ let perm = this.permissionsByMap.get(id) || [];
+ perm = perm.filter((p) => p.email != email);
+ this.permissionsByMap.set(id, perm);
+ return Promise.resolve();
+ }
+
+ addMapPermissions(id: number, message: string, permissions: Permission[]): Promise {
+ let perm = this.permissionsByMap.get(id) || [];
+ perm = perm.concat(permissions);
+ this.permissionsByMap.set(id, perm);
+
+ console.debug(`Message ${message}`);
+ return Promise.resolve();
+ }
+
+ fetchMapPermissions(id: number): Promise {
+ let perm = this.permissionsByMap.get(id);
+ if (!perm) {
+ perm = [
+ {
+ name: 'Cosme Editor',
+ email: 'pepe@example.com',
+ role: 'editor',
+ },
+ {
+ name: 'Cosme Owner',
+ email: 'pepe2@example.com',
+ role: 'owner',
+ },
+ {
+ name: 'Cosme Viewer',
+ email: 'pepe3@example.com',
+ role: 'viewer',
+ },
+ ];
+ this.permissionsByMap.set(id, perm);
+ }
+ return Promise.resolve(perm);
+ }
+
+ deleteAccount(): Promise {
+ return Promise.resolve();
+ }
+
+ updateAccountInfo(firstname: string, lastname: string): Promise {
+ console.log('firstname:' + firstname, +lastname);
+ return Promise.resolve();
+ }
+
+ updateAccountPassword(pasword: string): Promise {
+ console.log('password:' + pasword);
+ return Promise.resolve();
+ }
+
+ updateAccountLanguage(locale: LocaleCode): Promise {
+ localStorage.setItem('locale', locale);
+ return Promise.resolve();
+ }
+
+ importMap(model: ImportMapInfo): Promise {
+ console.log('model:' + model);
+ return Promise.resolve(10);
+ }
+
+ fetchAccountInfo(): Promise {
+ console.log('Fetch account info ...');
+ const locale: LocaleCode | null = localStorage.getItem('locale') as LocaleCode;
+ return Promise.resolve({
+ firstname: 'Costme',
+ lastname: 'Fulanito',
+ email: 'test@example.com',
+ locale: localeFromStr(locale),
+ });
+ }
+
+ deleteMaps(ids: number[]): Promise {
+ ids.forEach((id) => this.deleteMap(id));
+ return Promise.resolve();
+ }
+ revertHistory(id: number, cid: number): Promise {
+ console.log('model:' + id + cid);
+ return Promise.resolve();
+ }
+
+ createMap(map: BasicMapInfo): Promise {
+ throw new Error('Method not implemented.' + map);
+ }
+
+ fetchLabels(): Promise {
+ console.log('Fetching labels from server');
+ return Promise.resolve(this.labels);
+ }
+
+ updateMapToPublic(id: number, isPublic: boolean): Promise {
+ const mapInfo = this.maps.find((m) => m.id == id);
+ if (mapInfo) {
+ mapInfo.isPublic = isPublic;
+ }
+ return Promise.resolve();
+ }
+
+ updateStarred(id: number, starred: boolean): Promise {
+ const mapInfo = this.maps.find((m) => m.id == id);
+ if (!mapInfo) {
+ console.log(`Could not find the map iwth id ${id}`);
+ return Promise.reject();
+ }
+ mapInfo.starred = starred;
+ return Promise.resolve();
+ }
+
+ renameMap(id: number, basicInfo: BasicMapInfo): Promise {
+ const exists = this.maps.find((m) => m.title == basicInfo.title) != undefined;
+ if (!exists) {
+ this.maps = this.maps.map((m) => {
+ const result = m;
+ if (m.id == id) {
+ result.description = basicInfo.description ? basicInfo.description : '';
+ result.title = basicInfo.title;
}
+ return result;
+ });
+ return Promise.resolve();
+ } else {
+ const fieldErrors: Map = new Map();
+ fieldErrors.set('name', 'name already exists ');
- this.maps = [
- createMapInfo(
- 1,
- true,
- 'El Mapa',
- [],
- 'Paulo',
- '2008-06-02T00:00:00Z',
- 'Berna',
- '2008-06-02T00:00:00Z',
- '',
- true,
- 'owner'
- ),
- createMapInfo(
- 11,
- false,
- 'El Mapa3',
- [label1, label2],
- 'Paulo3',
- '2008-06-02T00:00:00Z',
- 'Berna',
- '2008-06-02T00:00:00Z',
- '',
- false,
- 'editor'
- ),
- createMapInfo(
- 12,
- false,
- 'El Mapa3',
- [label2, label3],
- 'Paulo3',
- '2008-06-02T00:00:00Z',
- 'Berna',
- '2008-06-02T00:00:00Z',
- '',
- false,
- 'editor'
- ),
- ];
-
- this.labels = [label1, label2, label3];
+ return Promise.reject({
+ msg: 'Map already exists ...' + basicInfo.title,
+ fields: fieldErrors,
+ });
}
+ }
- onSessionExpired(callback?: () => void): () => void {
- return callback;
+ fetchHistory(id: number): Promise {
+ console.log(`Fetching history for ${id}`);
+ const result = [
+ {
+ id: 1,
+ lastModificationBy: 'Paulo',
+ lastModificationTime: '2008-06-02T00:00:00Z',
+ },
+ {
+ id: 2,
+ lastModificationBy: 'Paulo',
+ lastModificationTime: '2008-06-02T00:00:00Z',
+ },
+ {
+ id: 3,
+ lastModificationBy: 'Paulo',
+ lastModificationTime: '2008-06-02T00:00:00Z',
+ },
+ {
+ id: 4,
+ lastModificationBy: 'Paulo',
+ lastModificationTime: '2008-06-02T00:00:00Z',
+ },
+ {
+ id: 5,
+ lastModificationBy: 'Paulo',
+ lastModificationTime: '2008-06-02T00:00:00Z',
+ },
+ {
+ id: 6,
+ lastModificationBy: 'Paulo',
+ lastModificationTime: '2008-06-02T00:00:00Z',
+ },
+ {
+ id: 7,
+ lastModificationBy: 'Paulo',
+ lastModificationTime: '2008-06-02T00:00:00Z',
+ },
+ ];
+ return Promise.resolve(result);
+ }
+
+ duplicateMap(id: number, basicInfo: BasicMapInfo): Promise {
+ const exists = this.maps.find((m) => m.title == basicInfo.title) != undefined;
+ if (!exists) {
+ const newMap: MapInfo = {
+ id: Math.random() * 1000,
+ description: String(basicInfo.description),
+ title: basicInfo.title,
+ starred: false,
+ createdBy: 'current user',
+ labels: [],
+ lastModificationTime: '2008-06-02T00:00:00Z',
+ lastModificationBy: 'Berna',
+ creationTime: '2008-06-02T00:00:00Z',
+ isPublic: false,
+ role: 'owner',
+ };
+ this.maps.push(newMap);
+ return Promise.resolve(newMap.id);
+ } else {
+ const fieldErrors: Map = new Map();
+ fieldErrors.set('name', 'name already exists ');
+
+ return Promise.reject({
+ msg: 'Maps name must be unique:' + basicInfo.title,
+ fields: fieldErrors,
+ });
}
+ }
- fetchMindmap(id: number): Mindmap {
- const parser = new DOMParser();
- const xmlDoc = parser.parseFromString(`
-
- `, 'text/xml');
+ createLabel(title: string, color: string): Promise {
+ const newId =
+ Math.max.apply(
+ Number,
+ this.labels.map((l) => l.id),
+ ) + 1;
+ this.labels.push({
+ id: newId,
+ title,
+ color,
+ });
+ return newId;
+ }
- const serializer = new XMLSerializerTango();
- return serializer.loadFromDom(xmlDoc, String(id));
+ deleteLabel(id: number): Promise {
+ this.labels = this.labels.filter((l) => l.id != id);
+ this.maps = this.maps.map((m) => {
+ return {
+ ...m,
+ labels: m.labels.filter((l) => l.id != id),
+ };
+ });
+ return Promise.resolve();
+ }
+
+ addLabelToMap(labelId: number, mapId: number): Promise {
+ const labelToAdd = this.labels.find((l) => l.id === labelId);
+ if (!labelToAdd) {
+ return Promise.reject({ msg: `unable to find label with id ${labelId}` });
}
- deleteMapPermission(id: number, email: string): Promise {
- let perm = this.permissionsByMap.get(id) || [];
- perm = perm.filter((p) => p.email != email);
- this.permissionsByMap.set(id, perm);
- return Promise.resolve();
+ const map = this.maps.find((m) => m.id === mapId);
+ if (!map) {
+ return Promise.reject({ msg: `unable to find map with id ${mapId}` });
}
+ map.labels.push(labelToAdd);
+ return Promise.resolve();
+ }
- addMapPermissions(id: number, message: string, permissions: Permission[]): Promise {
- let perm = this.permissionsByMap.get(id) || [];
- perm = perm.concat(permissions);
- this.permissionsByMap.set(id, perm);
-
- console.debug(`Message ${message}`);
- return Promise.resolve();
+ deleteLabelFromMap(labelId: number, mapId: number): Promise {
+ const map = this.maps.find((m) => m.id === mapId);
+ if (!map) {
+ return Promise.reject({ msg: `unable to find map with id ${mapId}` });
}
+ map.labels = map.labels.filter((l) => l.id !== labelId);
+ return Promise.resolve();
+ }
- fetchMapPermissions(id: number): Promise {
- let perm = this.permissionsByMap.get(id);
- if (!perm) {
- perm = [
- {
- name: 'Cosme Editor',
- email: 'pepe@example.com',
- role: 'editor',
- },
- {
- name: 'Cosme Owner',
- email: 'pepe2@example.com',
- role: 'owner',
- },
- {
- name: 'Cosme Viewer',
- email: 'pepe3@example.com',
- role: 'viewer',
- },
- ];
- this.permissionsByMap.set(id, perm);
- }
- return Promise.resolve(perm);
+ deleteMap(id: number): Promise {
+ this.maps = this.maps.filter((m) => m.id != id);
+ return Promise.resolve();
+ }
+
+ registerNewUser(user: NewUser): Promise {
+ console.log('user:' + user);
+ if (user.email == 'error@example.com') {
+ return Promise.reject({ msg: 'Unexpected error' });
}
+ return Promise.resolve();
+ }
- deleteAccount(): Promise {
- return Promise.resolve();
- }
+ fetchAllMaps(): Promise {
+ console.log('Fetching maps from server');
+ return Promise.resolve(this.maps);
+ }
- updateAccountInfo(firstname: string, lastname: string): Promise {
- console.log('firstname:' + firstname, +lastname);
- return Promise.resolve();
- }
-
- updateAccountPassword(pasword: string): Promise {
- console.log('password:' + pasword);
- return Promise.resolve();
- }
-
- updateAccountLanguage(locale: LocaleCode): Promise {
- localStorage.setItem('locale', locale);
- return Promise.resolve();
- }
-
- importMap(model: ImportMapInfo): Promise {
- console.log('model:' + model);
- return Promise.resolve(10);
- }
-
- fetchAccountInfo(): Promise {
- console.log('Fetch account info ...');
- const locale: LocaleCode | null = localStorage.getItem('locale') as LocaleCode;
- return Promise.resolve({
- firstname: 'Costme',
- lastname: 'Fulanito',
- email: 'test@example.com',
- locale: localeFromStr(locale),
- });
- }
-
- deleteMaps(ids: number[]): Promise {
- ids.forEach((id) => this.deleteMap(id));
- return Promise.resolve();
- }
- revertHistory(id: number, cid: number): Promise {
- console.log('model:' + id + cid);
- return Promise.resolve();
- }
-
- createMap(map: BasicMapInfo): Promise {
- throw new Error('Method not implemented.' + map);
- }
-
- fetchLabels(): Promise {
- console.log('Fetching labels from server');
- return Promise.resolve(this.labels);
- }
-
- updateMapToPublic(id: number, isPublic: boolean): Promise {
- const mapInfo = this.maps.find((m) => m.id == id);
- if (mapInfo) {
- mapInfo.isPublic = isPublic;
- }
- return Promise.resolve();
- }
-
- updateStarred(id: number, starred: boolean): Promise {
- const mapInfo = this.maps.find((m) => m.id == id);
- if (!mapInfo) {
- console.log(`Could not find the map iwth id ${id}`);
- return Promise.reject();
- }
- mapInfo.starred = starred;
- return Promise.resolve();
- }
-
- renameMap(id: number, basicInfo: BasicMapInfo): Promise {
- const exists = this.maps.find((m) => m.title == basicInfo.title) != undefined;
- if (!exists) {
- this.maps = this.maps.map((m) => {
- const result = m;
- if (m.id == id) {
- result.description = basicInfo.description ? basicInfo.description : '';
- result.title = basicInfo.title;
- }
- return result;
- });
- return Promise.resolve();
- } else {
- const fieldErrors: Map = new Map();
- fieldErrors.set('name', 'name already exists ');
-
- return Promise.reject({
- msg: 'Map already exists ...' + basicInfo.title,
- fields: fieldErrors,
- });
- }
- }
-
- fetchHistory(id: number): Promise {
- console.log(`Fetching history for ${id}`);
- const result = [
- {
- id: 1,
- lastModificationBy: 'Paulo',
- lastModificationTime: '2008-06-02T00:00:00Z',
- },
- {
- id: 2,
- lastModificationBy: 'Paulo',
- lastModificationTime: '2008-06-02T00:00:00Z',
- },
- {
- id: 3,
- lastModificationBy: 'Paulo',
- lastModificationTime: '2008-06-02T00:00:00Z',
- },
- {
- id: 4,
- lastModificationBy: 'Paulo',
- lastModificationTime: '2008-06-02T00:00:00Z',
- },
- {
- id: 5,
- lastModificationBy: 'Paulo',
- lastModificationTime: '2008-06-02T00:00:00Z',
- },
- {
- id: 6,
- lastModificationBy: 'Paulo',
- lastModificationTime: '2008-06-02T00:00:00Z',
- },
- {
- id: 7,
- lastModificationBy: 'Paulo',
- lastModificationTime: '2008-06-02T00:00:00Z',
- },
- ];
- return Promise.resolve(result);
- }
-
- duplicateMap(id: number, basicInfo: BasicMapInfo): Promise {
- const exists = this.maps.find((m) => m.title == basicInfo.title) != undefined;
- if (!exists) {
- const newMap: MapInfo = {
- id: Math.random() * 1000,
- description: String(basicInfo.description),
- title: basicInfo.title,
- starred: false,
- createdBy: 'current user',
- labels: [],
- lastModificationTime: '2008-06-02T00:00:00Z',
- lastModificationBy: 'Berna',
- creationTime: '2008-06-02T00:00:00Z',
- isPublic: false,
- role: 'owner',
- };
- this.maps.push(newMap);
- return Promise.resolve(newMap.id);
- } else {
- const fieldErrors: Map = new Map();
- fieldErrors.set('name', 'name already exists ');
-
- return Promise.reject({
- msg: 'Maps name must be unique:' + basicInfo.title,
- fields: fieldErrors,
- });
- }
- }
-
- createLabel(title: string, color: string): Promise {
- const newId = Math.max.apply(Number, this.labels.map(l => l.id)) + 1;
- this.labels.push({
- id: newId,
- title,
- color,
- });
- return newId;
- }
-
- deleteLabel(id: number): Promise {
- this.labels = this.labels.filter((l) => l.id != id);
- this.maps = this.maps.map(m => {
- return {
- ...m,
- labels: m.labels.filter((l) => l.id != id)
- };
- });
- return Promise.resolve();
- }
-
- addLabelToMap(labelId: number, mapId: number): Promise {
- const labelToAdd = this.labels.find((l) => l.id === labelId);
- if (!labelToAdd) {
- return Promise.reject({ msg: `unable to find label with id ${labelId}` });
- }
- const map = this.maps.find((m) => m.id === mapId);
- if (!map) {
- return Promise.reject({ msg: `unable to find map with id ${mapId}` });
- }
- map.labels.push(labelToAdd);
- return Promise.resolve();
- }
-
- deleteLabelFromMap(labelId: number, mapId: number): Promise {
- const map = this.maps.find((m) => m.id === mapId);
- if (!map) {
- return Promise.reject({ msg: `unable to find map with id ${mapId}` });
- }
- map.labels = map.labels.filter((l) => l.id !== labelId);
- return Promise.resolve();
- }
-
- deleteMap(id: number): Promise {
- this.maps = this.maps.filter((m) => m.id != id);
- return Promise.resolve();
- }
-
- registerNewUser(user: NewUser): Promise {
- console.log('user:' + user);
- if (user.email == "error@example.com") {
- return Promise.reject({ msg: "Unexpected error" });
- }
- return Promise.resolve();
- }
-
- fetchAllMaps(): Promise {
- console.log('Fetching maps from server');
- return Promise.resolve(this.maps);
- }
-
- resetPassword(email: string): Promise {
- 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;
- }
- }
+ resetPassword(email: string): Promise {
+ console.log('email:' + email);
+ return Promise.resolve();
+ }
}
export default MockClient;
diff --git a/packages/webapp/src/classes/client/rest-client/index.ts b/packages/webapp/src/classes/client/rest-client/index.ts
index 7eee8810..ae9863af 100644
--- a/packages/webapp/src/classes/client/rest-client/index.ts
+++ b/packages/webapp/src/classes/client/rest-client/index.ts
@@ -1,695 +1,659 @@
-import { EditorRenderMode, LocalStorageManager, Mindmap, PersistenceManager, RESTPersistenceManager } from '@wisemapping/mindplot';
-import { PersistenceError } from '@wisemapping/mindplot/src/components/PersistenceManager';
import axios, { AxiosInstance, AxiosResponse } from 'axios';
import Client, {
- ErrorInfo,
- MapInfo,
- BasicMapInfo,
- NewUser,
- Label,
- ChangeHistory,
- AccountInfo,
- ImportMapInfo,
- Permission,
+ ErrorInfo,
+ MapInfo,
+ BasicMapInfo,
+ NewUser,
+ Label,
+ ChangeHistory,
+ AccountInfo,
+ ImportMapInfo,
+ Permission,
} from '..';
import { getCsrfToken } from '../../../utils';
import { LocaleCode, localeFromStr } from '../../app-i18n';
export default class RestClient implements Client {
- private baseUrl: string;
- private persistenceManager: PersistenceManager;
- private axios: AxiosInstance;
+ private baseUrl: string;
+ private axios: AxiosInstance;
- private checkResponseForSessionExpired = (error: { response?: AxiosResponse }): Promise<{ response?: AxiosResponse }> => {
- // TODO: Improve session timeout response and response handling
- if (error.response && error.response.status === 405) {
- this.sessionExpired();
- }
- return Promise.reject(error);
+ private checkResponseForSessionExpired = (error: {
+ response?: AxiosResponse;
+ }): Promise<{ response?: AxiosResponse }> => {
+ // TODO: Improve session timeout response and response handling
+ if (error.response && error.response.status === 405) {
+ this.sessionExpired();
+ }
+ return Promise.reject(error);
+ };
+
+ constructor(baseUrl: string) {
+ this.baseUrl = baseUrl;
+ this.axios = axios.create({ maxRedirects: 0 });
+ const csrfToken = getCsrfToken();
+ if (csrfToken) {
+ this.axios.defaults.headers['X-CSRF-TOKEN'] = csrfToken;
+ } else {
+ console.warn('csrf token not found in html head');
+ }
+ this.axios.interceptors.response.use(
+ (r) => r,
+ (r) => this.checkResponseForSessionExpired(r),
+ );
+ }
+
+ private _onSessionExpired: () => void;
+ onSessionExpired(callback?: () => void): () => void {
+ if (callback) {
+ this._onSessionExpired = callback;
+ }
+ return this._onSessionExpired;
+ }
+
+ private sessionExpired() {
+ if (this._onSessionExpired) {
+ this._onSessionExpired();
+ }
+ }
+
+ deleteMapPermission(id: number, email: string): Promise {
+ const handler = (success: () => void, reject: (error: ErrorInfo) => void) => {
+ this.axios
+ .delete(`${this.baseUrl}/c/restful/maps/${id}/collabs?email=${encodeURIComponent(email)}`, {
+ headers: { 'Content-Type': 'text/plain' },
+ })
+ .then(() => {
+ success();
+ })
+ .catch((error) => {
+ const errorInfo = this.parseResponseOnError(error.response);
+ reject(errorInfo);
+ });
};
+ return new Promise(handler);
+ }
+ // eslint-disable-next-line @typescript-eslint/no-unused-vars
+ addMapPermissions(id: number, message: string, permissions: Permission[]): Promise {
+ const handler = (success: () => void, reject: (error: ErrorInfo) => void) => {
+ this.axios
+ .put(
+ `${this.baseUrl}/c/restful/maps/${id}/collabs/`,
+ {
+ message: message,
+ collaborations: permissions,
+ },
+ { headers: { 'Content-Type': 'application/json' } },
+ )
+ .then(() => {
+ // All was ok, let's sent to success page ...;
+ success();
+ })
+ .catch((error) => {
+ const errorInfo = this.parseResponseOnError(error.response);
+ reject(errorInfo);
+ });
+ };
+ return new Promise(handler);
+ }
- constructor(baseUrl: string) {
- this.baseUrl = baseUrl;
- this.axios = axios.create({ maxRedirects: 0 });
- const csrfToken = getCsrfToken();
- if (csrfToken) {
- this.axios.defaults.headers['X-CSRF-TOKEN'] = csrfToken;
- } else {
- console.warn('csrf token not found in html head');
- }
- this.axios.interceptors.response.use((r) => r, (r) => this.checkResponseForSessionExpired(r));
- }
+ fetchMapPermissions(id: number): Promise {
+ const handler = (
+ success: (labels: Permission[]) => void,
+ reject: (error: ErrorInfo) => void,
+ ) => {
+ this.axios
+ .get(`${this.baseUrl}/c/restful/maps/${id}/collabs`, {
+ headers: { 'Content-Type': 'text/plain' },
+ })
+ .then((response) => {
+ const data = response.data;
+ // eslint-disable-next-line @typescript-eslint/no-explicit-any
+ const perms: Permission[] = (data.collaborations as any[]).map((p) => {
+ return {
+ id: p.id,
+ email: p.email,
+ name: p.name,
+ role: p.role,
+ };
+ });
+ success(perms);
+ })
+ .catch((error) => {
+ const errorInfo = this.parseResponseOnError(error.response);
+ reject(errorInfo);
+ });
+ };
+ return new Promise(handler);
+ }
- private _onSessionExpired: () => void;
- onSessionExpired(callback?: () => void): () => void {
- if (callback) {
- this._onSessionExpired = callback;
- }
- return this._onSessionExpired;
- }
+ deleteAccount(): Promise {
+ const handler = (success: () => void, reject: (error: ErrorInfo) => void) => {
+ this.axios
+ .delete(`${this.baseUrl}/c/restful/account`, {
+ headers: { 'Content-Type': 'text/plain' },
+ })
+ .then(() => {
+ success();
+ })
+ .catch((error) => {
+ const errorInfo = this.parseResponseOnError(error.response);
+ reject(errorInfo);
+ });
+ };
+ return new Promise(handler);
+ }
- private sessionExpired() {
- if (this._onSessionExpired) {
- this._onSessionExpired();
- }
- }
+ updateAccountInfo(firstname: string, lastname: string): Promise {
+ const handler = (success: () => void, reject: (error: ErrorInfo) => void) => {
+ this.axios
+ .put(`${this.baseUrl}/c/restful/account/firstname`, firstname, {
+ headers: { 'Content-Type': 'text/plain' },
+ })
+ .then(() => {
+ return this.axios.put(`${this.baseUrl}/c/restful/account/lastname`, lastname, {
+ headers: { 'Content-Type': 'text/plain' },
+ });
+ })
+ .then(() => {
+ // All was ok, let's sent to success page ...;
+ success();
+ })
+ .catch((error) => {
+ const errorInfo = this.parseResponseOnError(error.response);
+ reject(errorInfo);
+ });
+ };
+ return new Promise(handler);
+ }
- 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;
- }
+ updateAccountPassword(pasword: string): Promise {
+ const handler = (success: () => void, reject: (error: ErrorInfo) => void) => {
+ this.axios
+ .put(`${this.baseUrl}/c/restful/account/password`, pasword, {
+ headers: { 'Content-Type': 'text/plain' },
+ })
+ .then(() => {
+ success();
+ })
+ .catch((error) => {
+ const errorInfo = this.parseResponseOnError(error.response);
+ reject(errorInfo);
+ });
+ };
+ return new Promise(handler);
+ }
- deleteMapPermission(id: number, email: string): Promise {
- const handler = (success: () => void, reject: (error: ErrorInfo) => void) => {
- this.axios
- .delete(`${this.baseUrl}/c/restful/maps/${id}/collabs?email=${encodeURIComponent(email)}`, {
- headers: { 'Content-Type': 'text/plain' },
- })
- .then(() => {
- success();
- })
- .catch((error) => {
- const errorInfo = this.parseResponseOnError(error.response);
- reject(errorInfo);
- });
- };
- return new Promise(handler);
- }
- // eslint-disable-next-line @typescript-eslint/no-unused-vars
- addMapPermissions(id: number, message: string, permissions: Permission[]): Promise {
- const handler = (success: () => void, reject: (error: ErrorInfo) => void) => {
- this.axios
- .put(
- `${this.baseUrl}/c/restful/maps/${id}/collabs/`,
- {
- message: message,
- collaborations: permissions,
- },
- { headers: { 'Content-Type': 'application/json' } }
- )
- .then(() => {
- // All was ok, let's sent to success page ...;
- success();
- })
- .catch((error) => {
- const errorInfo = this.parseResponseOnError(error.response);
- reject(errorInfo);
- });
- };
- return new Promise(handler);
- }
+ updateAccountLanguage(locale: LocaleCode): Promise {
+ const handler = (success: () => void, reject: (error: ErrorInfo) => void) => {
+ this.axios
+ .put(`${this.baseUrl}/c/restful/account/locale`, locale, {
+ headers: { 'Content-Type': 'text/plain' },
+ })
+ .then(() => {
+ // All was ok, let's sent to success page ...;
+ success();
+ })
+ .catch((error) => {
+ const errorInfo = this.parseResponseOnError(error.response);
+ reject(errorInfo);
+ });
+ };
+ return new Promise(handler);
+ }
- fetchMapPermissions(id: number): Promise {
- const handler = (
- success: (labels: Permission[]) => void,
- reject: (error: ErrorInfo) => void
- ) => {
- this.axios
- .get(`${this.baseUrl}/c/restful/maps/${id}/collabs`, {
- headers: { 'Content-Type': 'text/plain' },
- })
- .then((response) => {
- const data = response.data;
- // eslint-disable-next-line @typescript-eslint/no-explicit-any
- const perms: Permission[] = (data.collaborations as any[]).map((p) => {
- return {
- id: p.id,
- email: p.email,
- name: p.name,
- role: p.role,
- };
- });
- success(perms);
- })
- .catch((error) => {
- const errorInfo = this.parseResponseOnError(error.response);
- reject(errorInfo);
- });
- };
- return new Promise(handler);
- }
+ importMap(model: ImportMapInfo): Promise {
+ const handler = (success: (mapId: number) => void, reject: (error: ErrorInfo) => void) => {
+ this.axios
+ .post(
+ `${this.baseUrl}/c/restful/maps?title=${encodeURIComponent(model.title)}&description=${
+ model.description ? model.description : ''
+ }`,
+ model.content,
+ { headers: { 'Content-Type': 'application/xml' } },
+ )
+ .then((response) => {
+ const mapId = Number.parseInt(response.headers.resourceid, 10);
+ success(mapId);
+ })
+ .catch((error) => {
+ const errorInfo = this.parseResponseOnError(error.response);
+ reject(errorInfo);
+ });
+ };
+ return new Promise(handler);
+ }
- deleteAccount(): Promise {
- const handler = (success: () => void, reject: (error: ErrorInfo) => void) => {
- this.axios
- .delete(`${this.baseUrl}/c/restful/account`, {
- headers: { 'Content-Type': 'text/plain' },
- })
- .then(() => {
- success();
- })
- .catch((error) => {
- const errorInfo = this.parseResponseOnError(error.response);
- reject(errorInfo);
- });
- };
- return new Promise(handler);
- }
+ fetchAccountInfo(): Promise {
+ const handler = (
+ success: (account: AccountInfo) => void,
+ reject: (error: ErrorInfo) => void,
+ ) => {
+ this.axios
+ .get(`${this.baseUrl}/c/restful/account`, {
+ headers: { 'Content-Type': 'application/json' },
+ })
+ .then((response) => {
+ const account = response.data;
+ const locale: LocaleCode | null = account.locale;
+ success({
+ lastname: account.lastname ? account.lastname : '',
+ firstname: account.firstname ? account.firstname : '',
+ email: account.email,
+ locale: locale ? localeFromStr(locale) : undefined,
+ });
+ })
+ .catch((error) => {
+ const errorInfo = this.parseResponseOnError(error.response);
+ reject(errorInfo);
+ });
+ };
+ return new Promise(handler);
+ }
- updateAccountInfo(firstname: string, lastname: string): Promise {
- const handler = (success: () => void, reject: (error: ErrorInfo) => void) => {
- this.axios
- .put(`${this.baseUrl}/c/restful/account/firstname`, firstname, {
- headers: { 'Content-Type': 'text/plain' },
- })
- .then(() => {
- return this.axios.put(`${this.baseUrl}/c/restful/account/lastname`, lastname, {
- headers: { 'Content-Type': 'text/plain' },
- });
- })
- .then(() => {
- // All was ok, let's sent to success page ...;
- success();
- })
- .catch((error) => {
- const errorInfo = this.parseResponseOnError(error.response);
- reject(errorInfo);
- });
- };
- return new Promise(handler);
- }
+ deleteMaps(ids: number[]): Promise {
+ const handler = (success: () => void, reject: (error: ErrorInfo) => void) => {
+ this.axios
+ .delete(`${this.baseUrl}/c/restful/maps/batch?ids=${ids.join()}`, {
+ headers: { 'Content-Type': 'text/plain' },
+ })
+ .then(() => {
+ success();
+ })
+ .catch((error) => {
+ const response = error.response;
+ const errorInfo = this.parseResponseOnError(response);
+ reject(errorInfo);
+ });
+ };
+ return new Promise(handler);
+ }
- updateAccountPassword(pasword: string): Promise {
- const handler = (success: () => void, reject: (error: ErrorInfo) => void) => {
- this.axios
- .put(`${this.baseUrl}/c/restful/account/password`, pasword, {
- headers: { 'Content-Type': 'text/plain' },
- })
- .then(() => {
- success();
- })
- .catch((error) => {
- const errorInfo = this.parseResponseOnError(error.response);
- reject(errorInfo);
- });
- };
- return new Promise(handler);
- }
+ updateMapToPublic(id: number, isPublic: boolean): Promise {
+ const handler = (success: () => void, reject: (error: ErrorInfo) => void) => {
+ this.axios
+ .put(`${this.baseUrl}/c/restful/maps/${id}/publish`, isPublic.toString(), {
+ headers: { 'Content-Type': 'text/plain' },
+ })
+ .then(() => {
+ success();
+ })
+ .catch((error) => {
+ const errorInfo = this.parseResponseOnError(error.response);
+ reject(errorInfo);
+ });
+ };
+ return new Promise(handler);
+ }
- updateAccountLanguage(locale: LocaleCode): Promise {
- const handler = (success: () => void, reject: (error: ErrorInfo) => void) => {
- this.axios
- .put(`${this.baseUrl}/c/restful/account/locale`, locale, {
- headers: { 'Content-Type': 'text/plain' },
- })
- .then(() => {
- // All was ok, let's sent to success page ...;
- success();
- })
- .catch((error) => {
- const errorInfo = this.parseResponseOnError(error.response);
- reject(errorInfo);
- });
- };
- return new Promise(handler);
- }
+ revertHistory(id: number, hid: number): Promise {
+ const handler = (success: () => void, reject: (error: ErrorInfo) => void) => {
+ this.axios
+ .post(`${this.baseUrl}/c/restful/maps/${id}/history/${hid}`, null, {
+ headers: { 'Content-Type': 'text/pain' },
+ })
+ .then(() => {
+ success();
+ })
+ .catch((error) => {
+ const errorInfo = this.parseResponseOnError(error.response);
+ reject(errorInfo);
+ });
+ };
+ return new Promise(handler);
+ }
- importMap(model: ImportMapInfo): Promise {
- const handler = (success: (mapId: number) => void, reject: (error: ErrorInfo) => void) => {
- this.axios
- .post(
- `${this.baseUrl}/c/restful/maps?title=${encodeURIComponent(model.title)}&description=${model.description ? model.description : ''
- }`,
- model.content,
- { headers: { 'Content-Type': 'application/xml' } }
- )
- .then((response) => {
- const mapId = response.headers.resourceid;
- success(mapId);
- })
- .catch((error) => {
- const errorInfo = this.parseResponseOnError(error.response);
- reject(errorInfo);
- });
- };
- return new Promise(handler);
- }
+ fetchHistory(id: number): Promise {
+ const handler = (
+ success: (historyList: ChangeHistory[]) => void,
+ reject: (error: ErrorInfo) => void,
+ ) => {
+ this.axios
+ .get(`${this.baseUrl}/c/restful/maps/${id}/history/`, {
+ headers: { 'Content-Type': 'application/json' },
+ })
+ .then((response) => {
+ // eslint-disable-next-line @typescript-eslint/no-explicit-any
+ const historyList: ChangeHistory[] = (response.data.changes as any[]).map((h) => {
+ return {
+ id: h.id,
+ lastModificationBy: h.creator,
+ lastModificationTime: h.creationTime,
+ };
+ });
+ success(historyList);
+ })
+ .catch((error) => {
+ const errorInfo = this.parseResponseOnError(error.response);
+ reject(errorInfo);
+ });
+ };
+ return new Promise(handler);
+ }
- fetchAccountInfo(): Promise {
- const handler = (
- success: (account: AccountInfo) => void,
- reject: (error: ErrorInfo) => void
- ) => {
- this.axios
- .get(`${this.baseUrl}/c/restful/account`, {
- headers: { 'Content-Type': 'application/json' },
- })
- .then((response) => {
- const account = response.data;
- const locale: LocaleCode | null = account.locale;
- success({
- lastname: account.lastname ? account.lastname : '',
- firstname: account.firstname ? account.firstname : '',
- email: account.email,
- locale: locale ? localeFromStr(locale) : undefined,
- });
- })
- .catch((error) => {
- const errorInfo = this.parseResponseOnError(error.response);
- reject(errorInfo);
- });
- };
- return new Promise(handler);
- }
+ renameMap(id: number, basicInfo: BasicMapInfo): Promise {
+ const handler = (success: () => void, reject: (error: ErrorInfo) => void) => {
+ this.axios
+ .put(`${this.baseUrl}/c/restful/maps/${id}/title`, basicInfo.title, {
+ headers: { 'Content-Type': 'text/plain' },
+ })
+ .then(() => {
+ return this.axios.put(
+ `${this.baseUrl}/c/restful/maps/${id}/description`,
+ basicInfo.description || ' ',
+ { headers: { 'Content-Type': 'text/plain' } },
+ );
+ })
+ .then(() => {
+ // All was ok, let's sent to success page ...;
+ success();
+ })
+ .catch((error) => {
+ const response = error.response;
+ const errorInfo = this.parseResponseOnError(response);
+ reject(errorInfo);
+ });
+ };
+ return new Promise(handler);
+ }
- deleteMaps(ids: number[]): Promise {
- const handler = (success: () => void, reject: (error: ErrorInfo) => void) => {
- this.axios
- .delete(`${this.baseUrl}/c/restful/maps/batch?ids=${ids.join()}`, {
- headers: { 'Content-Type': 'text/plain' },
- })
- .then(() => {
- success();
- })
- .catch((error) => {
- const response = error.response;
- const errorInfo = this.parseResponseOnError(response);
- reject(errorInfo);
- });
- };
- return new Promise(handler);
- }
+ createMap(model: BasicMapInfo): Promise {
+ const handler = (success: (mapId: number) => void, reject: (error: ErrorInfo) => void) => {
+ this.axios
+ .post(
+ `${this.baseUrl}/c/restful/maps?title=${model.title}&description=${
+ model.description ? model.description : ''
+ }`,
+ null,
+ { headers: { 'Content-Type': 'application/json' } },
+ )
+ .then((response) => {
+ const mapId = Number.parseInt(response.headers.resourceid, 10);
+ success(mapId);
+ })
+ .catch((error) => {
+ const errorInfo = this.parseResponseOnError(error.response);
+ reject(errorInfo);
+ });
+ };
+ return new Promise(handler);
+ }
- updateMapToPublic(id: number, isPublic: boolean): Promise {
- const handler = (success: () => void, reject: (error: ErrorInfo) => void) => {
- this.axios
- .put(`${this.baseUrl}/c/restful/maps/${id}/publish`, isPublic.toString(), {
- headers: { 'Content-Type': 'text/plain' },
- })
- .then(() => {
- success();
- })
- .catch((error) => {
- const errorInfo = this.parseResponseOnError(error.response);
- reject(errorInfo);
- });
- };
- return new Promise(handler);
- }
+ fetchAllMaps(): Promise {
+ const handler = (
+ success: (mapsInfo: MapInfo[]) => void,
+ reject: (error: ErrorInfo) => void,
+ ) => {
+ this.axios
+ .get(`${this.baseUrl}/c/restful/maps/`, {
+ headers: { 'Content-Type': 'application/json' },
+ })
+ .then((response) => {
+ const data = response.data;
+ // eslint-disable-next-line @typescript-eslint/no-explicit-any
+ const maps: MapInfo[] = (data.mindmapsInfo as any[]).map((m) => {
+ return {
+ id: m.id,
+ starred: m.starred,
+ title: m.title,
+ labels: m.labels,
+ createdBy: m.creator,
+ creationTime: m.creationTime,
+ lastModificationBy: m.lastModifierUser,
+ lastModificationTime: m.lastModificationTime,
+ description: m.description,
+ isPublic: m['public'],
+ role: m.role,
+ };
+ });
+ success(maps);
+ })
+ .catch((error) => {
+ const errorInfo = this.parseResponseOnError(error.response);
+ reject(errorInfo);
+ });
+ };
+ return new Promise(handler);
+ }
- revertHistory(id: number, hid: number): Promise {
- const handler = (success: () => void, reject: (error: ErrorInfo) => void) => {
- this.axios
- .post(`${this.baseUrl}/c/restful/maps/${id}/history/${hid}`, null, {
- headers: { 'Content-Type': 'text/pain' },
- })
- .then(() => {
- success();
- })
- .catch((error) => {
- const errorInfo = this.parseResponseOnError(error.response);
- reject(errorInfo);
- });
- };
- return new Promise(handler);
- }
+ registerNewUser(user: NewUser): Promise {
+ const handler = (success: () => void, reject: (error: ErrorInfo) => void) => {
+ this.axios
+ .post(`${this.baseUrl}/service/users/`, JSON.stringify(user), {
+ headers: { 'Content-Type': 'application/json' },
+ })
+ .then(() => {
+ // All was ok, let's sent to success page ...;
+ success();
+ })
+ .catch((error) => {
+ const errorInfo = this.parseResponseOnError(error.response);
+ reject(errorInfo);
+ });
+ };
+ return new Promise(handler);
+ }
- fetchHistory(id: number): Promise {
- const handler = (
- success: (historyList: ChangeHistory[]) => void,
- reject: (error: ErrorInfo) => void
- ) => {
- this.axios
- .get(`${this.baseUrl}/c/restful/maps/${id}/history/`, {
- headers: { 'Content-Type': 'application/json' },
- })
- .then((response) => {
- // eslint-disable-next-line @typescript-eslint/no-explicit-any
- const historyList: ChangeHistory[] = (response.data.changes as any[]).map((h) => {
- return {
- id: h.id,
- lastModificationBy: h.creator,
- lastModificationTime: h.creationTime,
- };
- });
- success(historyList);
- })
- .catch((error) => {
- const errorInfo = this.parseResponseOnError(error.response);
- reject(errorInfo);
- });
- };
- return new Promise(handler);
- }
+ deleteMap(id: number): Promise {
+ const handler = (success: () => void, reject: (error: ErrorInfo) => void) => {
+ this.axios
+ .delete(`${this.baseUrl}/c/restful/maps/${id}`, {
+ headers: { 'Content-Type': 'application/json' },
+ })
+ .then(() => {
+ success();
+ })
+ .catch((error) => {
+ const errorInfo = this.parseResponseOnError(error.response);
+ reject(errorInfo);
+ });
+ };
+ return new Promise(handler);
+ }
- renameMap(id: number, basicInfo: BasicMapInfo): Promise {
- const handler = (success: () => void, reject: (error: ErrorInfo) => void) => {
- this.axios
- .put(`${this.baseUrl}/c/restful/maps/${id}/title`, basicInfo.title, {
- headers: { 'Content-Type': 'text/plain' },
- })
- .then(() => {
- return this.axios.put(
- `${this.baseUrl}/c/restful/maps/${id}/description`, basicInfo.description || ' ',
- { headers: { 'Content-Type': 'text/plain' } }
- );
- })
- .then(() => {
- // All was ok, let's sent to success page ...;
- success();
- })
- .catch((error) => {
- const response = error.response;
- const errorInfo = this.parseResponseOnError(response);
- reject(errorInfo);
- });
- };
- return new Promise(handler);
- }
+ resetPassword(email: string): Promise {
+ const handler = (success: () => void, reject: (error: ErrorInfo) => void) => {
+ this.axios
+ .put(
+ `${this.baseUrl}/service/users/resetPassword?email=${encodeURIComponent(email)}`,
+ null,
+ {
+ headers: { 'Content-Type': 'application/json' },
+ },
+ )
+ .then(() => {
+ // All was ok, let's sent to success page ...;
+ success();
+ })
+ .catch((error) => {
+ const response = error.response;
+ const errorInfo = this.parseResponseOnError(response);
+ reject(errorInfo);
+ });
+ };
+ return new Promise(handler);
+ }
- createMap(model: BasicMapInfo): Promise {
- const handler = (success: (mapId: number) => void, reject: (error: ErrorInfo) => void) => {
- this.axios
- .post(
- `${this.baseUrl}/c/restful/maps?title=${model.title}&description=${model.description ? model.description : ''
- }`,
- null,
- { headers: { 'Content-Type': 'application/json' } }
- )
- .then((response) => {
- const mapId = response.headers.resourceid;
- success(mapId);
- })
- .catch((error) => {
- const errorInfo = this.parseResponseOnError(error.response);
- reject(errorInfo);
- });
- };
- return new Promise(handler);
- }
+ duplicateMap(id: number, basicInfo: BasicMapInfo): Promise {
+ const handler = (success: (mapId: number) => void, reject: (error: ErrorInfo) => void) => {
+ this.axios
+ .post(`${this.baseUrl}/c/restful/maps/${id}`, JSON.stringify(basicInfo), {
+ headers: { 'Content-Type': 'application/json' },
+ })
+ .then((response) => {
+ const mapId = Number.parseInt(response.headers.resourceid, 10);
+ success(mapId);
+ })
+ .catch((error) => {
+ const response = error.response;
+ const errorInfo = this.parseResponseOnError(response);
+ reject(errorInfo);
+ });
+ };
+ return new Promise(handler);
+ }
- fetchAllMaps(): Promise {
- const handler = (
- success: (mapsInfo: MapInfo[]) => void,
- reject: (error: ErrorInfo) => void
- ) => {
- this.axios
- .get(`${this.baseUrl}/c/restful/maps/`, {
- headers: { 'Content-Type': 'application/json' },
- })
- .then((response) => {
- const data = response.data;
- // eslint-disable-next-line @typescript-eslint/no-explicit-any
- const maps: MapInfo[] = (data.mindmapsInfo as any[]).map((m) => {
- return {
- id: m.id,
- starred: m.starred,
- title: m.title,
- labels: m.labels,
- createdBy: m.creator,
- creationTime: m.creationTime,
- lastModificationBy: m.lastModifierUser,
- lastModificationTime: m.lastModificationTime,
- description: m.description,
- isPublic: m['public'],
- role: m.role,
- };
- });
- success(maps);
- })
- .catch((error) => {
- const errorInfo = this.parseResponseOnError(error.response);
- reject(errorInfo);
- });
- };
- return new Promise(handler);
- }
+ updateStarred(id: number, starred: boolean): Promise {
+ const handler = (success: () => void, reject: (error: ErrorInfo) => void) => {
+ this.axios
+ .put(`${this.baseUrl}/c/restful/maps/${id}/starred`, starred.toString(), {
+ headers: { 'Content-Type': 'text/plain' },
+ })
+ .then(() => {
+ success();
+ })
+ .catch((error) => {
+ const response = error.response;
+ const errorInfo = this.parseResponseOnError(response);
+ reject(errorInfo);
+ });
+ };
+ return new Promise(handler);
+ }
- registerNewUser(user: NewUser): Promise {
- const handler = (success: () => void, reject: (error: ErrorInfo) => void) => {
- this.axios
- .post(`${this.baseUrl}/service/users/`, JSON.stringify(user), {
- headers: { 'Content-Type': 'application/json' },
- })
- .then(() => {
- // All was ok, let's sent to success page ...;
- success();
- })
- .catch((error) => {
- const errorInfo = this.parseResponseOnError(error.response);
- reject(errorInfo);
- });
- };
- return new Promise(handler);
- }
+ fetchLabels(): Promise {
+ const handler = (success: (labels: Label[]) => void, reject: (error: ErrorInfo) => void) => {
+ this.axios
+ .get(`${this.baseUrl}/c/restful/labels/`, {
+ headers: { 'Content-Type': 'application/json' },
+ })
+ .then((response) => {
+ const data = response.data;
+ // eslint-disable-next-line @typescript-eslint/no-explicit-any
+ const maps: Label[] = (data.labels as any[]).map((l) => {
+ return {
+ id: l.id,
+ color: l.color,
+ title: l.title,
+ iconName: l.iconName,
+ };
+ });
+ success(maps);
+ })
+ .catch((error) => {
+ const errorInfo = this.parseResponseOnError(error.response);
+ reject(errorInfo);
+ });
+ };
+ return new Promise(handler);
+ }
- deleteMap(id: number): Promise {
- const handler = (success: () => void, reject: (error: ErrorInfo) => void) => {
- this.axios
- .delete(`${this.baseUrl}/c/restful/maps/${id}`, {
- headers: { 'Content-Type': 'application/json' },
- })
- .then(() => {
- success();
- })
- .catch((error) => {
- const errorInfo = this.parseResponseOnError(error.response);
- reject(errorInfo);
- });
- };
- return new Promise(handler);
- }
+ createLabel(title: string, color: string): Promise {
+ const handler = (success: (labelId: number) => void, reject: (error: ErrorInfo) => void) => {
+ this.axios
+ .post(
+ `${this.baseUrl}/c/restful/labels`,
+ JSON.stringify({ title, color, iconName: 'smile' }),
+ {
+ headers: { 'Content-Type': 'application/json' },
+ },
+ )
+ .then((response) => {
+ const mapId = Number.parseInt(response.headers.resourceid, 10);
+ success(mapId);
+ })
+ .catch((error) => {
+ const errorInfo = this.parseResponseOnError(error.response);
+ reject(errorInfo);
+ });
+ };
+ return new Promise(handler);
+ }
- resetPassword(email: string): Promise {
- const handler = (success: () => void, reject: (error: ErrorInfo) => void) => {
- this.axios
- .put(`${this.baseUrl}/service/users/resetPassword?email=${encodeURIComponent(email)}`, null, {
- headers: { 'Content-Type': 'application/json' },
- })
- .then(() => {
- // All was ok, let's sent to success page ...;
- success();
- })
- .catch((error) => {
- const response = error.response;
- const errorInfo = this.parseResponseOnError(response);
- reject(errorInfo);
- });
- };
- return new Promise(handler);
- }
+ deleteLabel(id: number): Promise {
+ const handler = (success: () => void, reject: (error: ErrorInfo) => void) => {
+ this.axios
+ .delete(`${this.baseUrl}/c/restful/labels/${id}`)
+ .then(() => {
+ success();
+ })
+ .catch((error) => {
+ const errorInfo = this.parseResponseOnError(error.response);
+ reject(errorInfo);
+ });
+ };
+ return new Promise(handler);
+ }
- duplicateMap(id: number, basicInfo: BasicMapInfo): Promise {
- const handler = (success: (mapId: number) => void, reject: (error: ErrorInfo) => void) => {
- this.axios
- .post(`${this.baseUrl}/c/restful/maps/${id}`, JSON.stringify(basicInfo), {
- headers: { 'Content-Type': 'application/json' },
- })
- .then((response) => {
- const mapId = response.headers.resourceid;
- success(mapId);
- })
- .catch((error) => {
- const response = error.response;
- const errorInfo = this.parseResponseOnError(response);
- reject(errorInfo);
- });
- };
- return new Promise(handler);
- }
+ addLabelToMap(labelId: number, mapId: number): Promise {
+ const handler = (success: () => void, reject: (error: ErrorInfo) => void) => {
+ this.axios
+ .post(`${this.baseUrl}/c/restful/maps/${mapId}/labels`, JSON.stringify(labelId), {
+ headers: { 'Content-Type': 'application/json' },
+ })
+ .then(() => {
+ success();
+ })
+ .catch((error) => {
+ const errorInfo = this.parseResponseOnError(error.response);
+ reject(errorInfo);
+ });
+ };
+ return new Promise(handler);
+ }
- updateStarred(id: number, starred: boolean): Promise {
- const handler = (success: () => void, reject: (error: ErrorInfo) => void) => {
- this.axios
- .put(`${this.baseUrl}/c/restful/maps/${id}/starred`, starred.toString(), {
- headers: { 'Content-Type': 'text/plain' },
- })
- .then(() => {
- success();
- })
- .catch((error) => {
- const response = error.response;
- const errorInfo = this.parseResponseOnError(response);
- reject(errorInfo);
- });
- };
- return new Promise(handler);
- }
+ deleteLabelFromMap(labelId: number, mapId: number): Promise {
+ const handler = (success: () => void, reject: (error: ErrorInfo) => void) => {
+ this.axios
+ .delete(`${this.baseUrl}/c/restful/maps/${mapId}/labels/${labelId}`)
+ .then(() => {
+ success();
+ })
+ .catch((error) => {
+ const errorInfo = this.parseResponseOnError(error.response);
+ reject(errorInfo);
+ });
+ };
+ return new Promise(handler);
+ }
- fetchLabels(): Promise {
- const handler = (
- success: (labels: Label[]) => void,
- reject: (error: ErrorInfo) => void
- ) => {
- this.axios
- .get(`${this.baseUrl}/c/restful/labels/`, {
- headers: { 'Content-Type': 'application/json' },
- })
- .then((response) => {
- const data = response.data;
- // eslint-disable-next-line @typescript-eslint/no-explicit-any
- const maps: Label[] = (data.labels as any[]).map((l) => {
- return {
- id: l.id,
- color: l.color,
- title: l.title,
- iconName: l.iconName,
- };
- });
- success(maps);
- })
- .catch((error) => {
- const errorInfo = this.parseResponseOnError(error.response);
- reject(errorInfo);
- });
- };
- return new Promise(handler);
- }
+ // eslint-disable-next-line @typescript-eslint/no-explicit-any
+ private parseResponseOnError = (response: any): ErrorInfo => {
+ console.error(`Performing backend action error: ${JSON.stringify(response)}`);
- createLabel(title: string, color: string): Promise {
- const handler = (success: (labelId: number) => void, reject: (error: ErrorInfo) => void) => {
- this.axios
- .post(`${this.baseUrl}/c/restful/labels`, JSON.stringify({ title, color, iconName: 'smile' }), {
- headers: { 'Content-Type': 'application/json' },
- })
- .then((response) => {
- success(response.headers.resourceid);
- })
- .catch((error) => {
- const errorInfo = this.parseResponseOnError(error.response);
- reject(errorInfo);
- });
- };
- return new Promise(handler);
- }
+ let result: ErrorInfo | undefined;
+ if (response) {
+ const status: number = response.status;
+ const data = response.data;
+ console.error(`Status Code: ${status}`);
+ console.error(`Status Data: ${response.data}`);
+ console.error(`Status Message: ${response.message}`);
- deleteLabel(id: number): Promise {
- const handler = (success: () => void, reject: (error: ErrorInfo) => void) => {
- this.axios
- .delete(`${this.baseUrl}/c/restful/labels/${id}`)
- .then(() => {
- success();
- })
- .catch((error) => {
- const errorInfo = this.parseResponseOnError(error.response);
- reject(errorInfo);
- });
- };
- return new Promise(handler);
- }
-
- addLabelToMap(labelId: number, mapId: number): Promise {
- const handler = (success: () => void, reject: (error: ErrorInfo) => void) => {
- this.axios
- .post(`${this.baseUrl}/c/restful/maps/${mapId}/labels`, JSON.stringify(labelId), {
- headers: { 'Content-Type': 'application/json' },
- })
- .then(() => {
- success();
- })
- .catch((error) => {
- const errorInfo = this.parseResponseOnError(error.response);
- reject(errorInfo);
- });
- };
- return new Promise(handler);
- }
-
- deleteLabelFromMap(labelId: number, mapId: number): Promise {
- const handler = (success: () => void, reject: (error: ErrorInfo) => void) => {
- this.axios
- .delete(`${this.baseUrl}/c/restful/maps/${mapId}/labels/${labelId}`)
- .then(() => {
- success();
- })
- .catch((error) => {
- const errorInfo = this.parseResponseOnError(error.response);
- reject(errorInfo);
- });
- };
- 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)}`);
-
- let result: ErrorInfo | undefined;
- if (response) {
- const status: number = response.status;
- const data = response.data;
- console.error(`Status Code: ${status}`);
- console.error(`Status Data: ${response.data}`);
- console.error(`Status Message: ${response.message}`);
-
- switch (status) {
- case 401:
- case 302:
- this.sessionExpired();
- result = {
- msg: 'Your current session has expired. Please, sign in and try again.',
- };
- break;
- default:
- if (data) {
- // Set global errors ...
- result = {};
- const globalErrors = data.globalErrors;
- if (globalErrors && globalErrors.length > 0) {
- result.msg = globalErrors[0];
- }
-
- // Set field errors ...
- if (data.fieldErrors && Object.keys(data.fieldErrors).length > 0) {
- result.fields = data.fieldErrors;
- if (!result.msg) {
- const key = Object.keys(data.fieldErrors)[0];
- result.msg = data.fieldErrors[key];
- }
- }
- } else {
- result = { msg: response.statusText };
- }
+ switch (status) {
+ case 401:
+ case 302:
+ this.sessionExpired();
+ result = {
+ msg: 'Your current session has expired. Please, sign in and try again.',
+ };
+ break;
+ default:
+ if (data) {
+ // Set global errors ...
+ result = {};
+ const globalErrors = data.globalErrors;
+ if (globalErrors && globalErrors.length > 0) {
+ result.msg = globalErrors[0];
}
- }
- // Network related problem ...
- if (!result) {
- result = { msg: 'Unexpected error. Please, try latter' };
- }
+ // Set field errors ...
+ if (data.fieldErrors && Object.keys(data.fieldErrors).length > 0) {
+ result.fields = data.fieldErrors;
+ if (!result.msg) {
+ const key = Object.keys(data.fieldErrors)[0];
+ result.msg = data.fieldErrors[key];
+ }
+ }
+ } else {
+ result = { msg: response.statusText };
+ }
+ }
+ }
- return result;
- };
+ // Network related problem ...
+ if (!result) {
+ result = { msg: 'Unexpected error. Please, try latter' };
+ }
+
+ return result;
+ };
}
diff --git a/packages/webapp/src/compiled-lang/de.json b/packages/webapp/src/compiled-lang/de.json
index b49b10a8..250a88ea 100644
--- a/packages/webapp/src/compiled-lang/de.json
+++ b/packages/webapp/src/compiled-lang/de.json
@@ -2,7 +2,7 @@
"account.delete-warning": [
{
"type": 0,
- "value": "Denken Sie daran, dass Sie keine von Ihnen erstellte Mindmap abrufen können. Alle Ihre Informationen werden gelöscht und können nicht wiederhergestellt werden."
+ "value": "Denke daran, dass du keine von dir erstellten Mindmap mehr aufrufen kannst. Alle deine Informationen werden gelöscht und können nicht wiederhergestellt werden."
}
],
"accountinfo.button": [
@@ -20,7 +20,7 @@
"accountinfo.email": [
{
"type": 0,
- "value": "Email"
+ "value": "E-Mail"
}
],
"accountinfo.firstname": [
@@ -50,7 +50,7 @@
"action.close-button": [
{
"type": 0,
- "value": "Nah dran"
+ "value": "Schließen"
}
],
"action.delete": [
@@ -62,7 +62,7 @@
"action.delete-description": [
{
"type": 0,
- "value": "Gelöschte Mindmaps können nicht wiederhergestellt werden. Möchtest du fortfahren ?."
+ "value": "Gelöschte Mindmaps können nicht wiederhergestellt werden. Möchtest du fortfahren?"
}
],
"action.delete-title": [
@@ -86,7 +86,7 @@
"action.history": [
{
"type": 0,
- "value": "Geschichte"
+ "value": "Historie"
}
],
"action.history-description": [
@@ -116,13 +116,13 @@
"action.label": [
{
"type": 0,
- "value": "Etikett hinzufügen"
+ "value": "Label hinzufügen"
}
],
"action.new": [
{
"type": 0,
- "value": "Neue Karte"
+ "value": "Neue Mindmap"
}
],
"action.open": [
@@ -182,7 +182,7 @@
"changepwd.description": [
{
"type": 0,
- "value": "Bitte geben Sie das neue Passwort für Ihr Konto ein."
+ "value": "Bitte gebe das neue Passwort für dein Konto ein."
}
],
"changepwd.password": [
@@ -206,7 +206,7 @@
"common.wait": [
{
"type": 0,
- "value": "Warten Sie mal ..."
+ "value": "Bitte warten ..."
}
],
"create.button": [
@@ -218,25 +218,25 @@
"create.description": [
{
"type": 0,
- "value": "Bitte geben Sie den neuen Kartennamen und die Beschreibung ein."
+ "value": "Bitte gebe den Namen und die Beschreibung der neuen Mindmap ein."
}
],
"create.title": [
{
"type": 0,
- "value": "Erstellen Sie eine neue Mindmap."
+ "value": "Erstelle eine neue Mindmap."
}
],
"deletem.title": [
{
"type": 0,
- "value": "Alle ausgewählten Karten werden gelöscht"
+ "value": "Alle ausgewählten Mindmaps werden gelöscht"
}
],
"duplicate.title": [
{
"type": 0,
- "value": "Duplikat"
+ "value": "Kopie"
}
],
"editor.try-welcome": [
@@ -248,13 +248,13 @@
"editor.try-welcome-description": [
{
"type": 0,
- "value": "Melden Sie sich an, um kostenlos eine unbegrenzte Anzahl von Mindmaps zu erstellen, zu teilen und zu veröffentlichen."
+ "value": "Melde dich an, um kostenlos eine unbegrenzte Anzahl von Mindmaps zu erstellen, zu teilen und zu veröffentlichen."
}
],
"expired.description": [
{
"type": 0,
- "value": "Ihre aktuelle Sitzung ist abgelaufen. Bitte melden Sie sich an und versuchen Sie es erneut."
+ "value": "Deine aktuelle Sitzung ist abgelaufen. Bitte melde dich an und versuche es erneut."
}
],
"expired.title": [
@@ -266,25 +266,25 @@
"export.desc": [
{
"type": 0,
- "value": "Exportieren Sie diese Karte im gewünschten Format und verwenden Sie sie in Ihren Präsentationen oder teilen Sie sie per E-Mail"
+ "value": "Exportiere diese Mindmap im gewünschten Format und verwende sie in deinen Präsentationen oder teile sie per E-Mail"
}
],
"export.document": [
{
"type": 0,
- "value": "Mindmap-Tools: Exportieren Sie Ihre Mindmap in Mindmap-Tool-Formate von Drittanbietern"
+ "value": "Mindmap-Tools: Exportiere deine Mindmap in Mindmap-Tool-Formate von Drittanbietern"
}
],
"export.document-label": [
{
"type": 0,
- "value": "Dokument: Exportieren Sie Ihre Mindmap in ein eigenständiges Dokument, das Sie teilen können"
+ "value": "Dokument: Exportiere deine Mindmap in ein eigenständiges Dokument, das du teilen kannst"
}
],
"export.image": [
{
"type": 0,
- "value": "Bild: Erhalten Sie eine grafische Darstellung Ihrer Karte mit allen Farben und Formen."
+ "value": "Bild: Erhalte eine grafische Darstellung deiner Mindmap mit allen Farben und Formen."
}
],
"export.title": [
@@ -320,7 +320,7 @@
"footer.faq": [
{
"type": 0,
- "value": "FAQ."
+ "value": "FAQ"
}
],
"footer.faqandhelp": [
@@ -350,13 +350,13 @@
"footer.support": [
{
"type": 0,
- "value": "Unterstützt"
+ "value": "Support"
}
],
"footer.team": [
{
"type": 0,
- "value": "Ausrüstung"
+ "value": "Team"
}
],
"footer.termsandconditions": [
@@ -368,13 +368,13 @@
"forgot.desc": [
{
"type": 0,
- "value": "Wir senden Ihnen eine E-Mail, um Ihr Passwort zurückzusetzen."
+ "value": "Wir senden dir eine E-Mail, um dein Passwort zurückzusetzen."
}
],
"forgot.email": [
{
"type": 0,
- "value": "Email"
+ "value": "E-Mail"
}
],
"forgot.page-title": [
@@ -392,13 +392,13 @@
"forgot.success.desc": [
{
"type": 0,
- "value": "Wir haben Ihnen eine E-Mail gesendet, mit der Sie Ihr Passwort zurücksetzen können. Sie sollten es in den nächsten Minuten erhalten."
+ "value": "Wir haben dir eine E-Mail gesendet, mit der du dein Passwort zurücksetzen kannst. Du solltest sie in den nächsten Minuten erhalten."
}
],
"forgot.success.title": [
{
"type": 0,
- "value": "Ihr temporäres Passwort wurde gesendet."
+ "value": "Dein temporäres Passwort wurde gesendet."
}
],
"forgot.title": [
@@ -416,13 +416,13 @@
"header.donthaveaccount": [
{
"type": 0,
- "value": "Sie haben kein Konto?"
+ "value": "Du hast noch kein Konto?"
}
],
"header.haveaccount": [
{
"type": 0,
- "value": "Sie haben bereits ein Konto?"
+ "value": "Du hast bereits ein Konto?"
}
],
"help.support": [
@@ -446,7 +446,7 @@
"import.description": [
{
"type": 0,
- "value": "Sie können Karten von WiseMapping oder Freemind in Ihre Kartenliste importieren. Wählen Sie die Datei aus, die Sie importieren möchten."
+ "value": "Du kannst Mindmaps von WiseMapping oder Freemind importieren. Wähle die Datei aus, die du importieren möchtest."
}
],
"import.error-file": [
@@ -462,13 +462,13 @@
"import.title": [
{
"type": 0,
- "value": "Importieren Sie vorhandene Mindmaps"
+ "value": "Importiere vorhandene Mindmaps"
}
],
"info.basic-info": [
{
"type": 0,
- "value": "Basisinformation"
+ "value": "Allgemeine Informationen"
}
],
"info.button": [
@@ -486,7 +486,7 @@
"info.creator": [
{
"type": 0,
- "value": "Schöpfer"
+ "value": "Besitzer"
}
],
"info.description": [
@@ -498,7 +498,7 @@
"info.description-msg": [
{
"type": 0,
- "value": "Indem Sie die Karte veröffentlichen, machen Sie sie für jeden im Internet sichtbar."
+ "value": "Indem du die Mindmap veröffentlichen, machst du sie für jeden im Internet sichtbar."
}
],
"info.modified-time": [
@@ -534,25 +534,25 @@
"info.starred": [
{
"type": 0,
- "value": "Markiert"
+ "value": "Favoriten"
}
],
"info.title": [
{
"type": 0,
- "value": "Die Info"
+ "value": "Informationen"
}
],
"label.add-button": [
{
"type": 0,
- "value": "Etikett hinzufügen"
+ "value": "Label hinzufügen"
}
],
"label.add-for": [
{
"type": 0,
- "value": "Beschriftungen für Karten bearbeiten:"
+ "value": "Labels für Mindmap bearbeiten:"
}
],
"label.add-placeholder": [
@@ -564,31 +564,31 @@
"label.change-color": [
{
"type": 0,
- "value": "Etikettenfarbe ändern"
+ "value": "Labelfarbe ändern"
}
],
"label.delete-description": [
{
"type": 0,
- "value": "gelöscht, einschließlich der Zuordnungen zu allen vorhandenen Karten. Möchtest du fortfahren?"
+ "value": "Löschen des Labels, einschließlich der Zuordnungen zu allen vorhandenen Mindmaps. Möchtest du fortfahren?"
}
],
"label.delete-title": [
{
"type": 0,
- "value": "Bestätigen Sie das Löschen des Labels"
+ "value": "Bestätige das Löschen des Labels"
}
],
"label.description": [
{
"type": 0,
- "value": "Verwenden Sie Labels, um Ihre Karten zu organisieren."
+ "value": "Verwende Labels, um deine Mindmaps zu organisieren."
}
],
"label.title": [
{
"type": 0,
- "value": "Etikett hinzufügen"
+ "value": "Label hinzufügen"
}
],
"language.change": [
@@ -606,13 +606,13 @@
"login.desc": [
{
"type": 0,
- "value": "Melde dich in deinem Konto an"
+ "value": "Melde dich mit deinem Konto an"
}
],
"login.email": [
{
"type": 0,
- "value": "Email"
+ "value": "E-Mail"
}
],
"login.error": [
@@ -624,13 +624,13 @@
"login.forgotpwd": [
{
"type": 0,
- "value": "Passwort vergessen ?"
+ "value": "Passwort vergessen?"
}
],
"login.hsqldbcofig": [
{
"type": 0,
- "value": "Obwohl HSQLDB während der Installation standardmäßig mit WiseMapping gebündelt wird, empfehlen wir diese Datenbank nicht für den Produktionseinsatz. Bitte erwägen Sie stattdessen die Verwendung von MySQL 5.7. Weitere Informationen zur Konfiguration von MySQL finden Sie hier"
+ "value": "Obwohl HSQLDB während der Installation standardmäßig mit WiseMapping installiert wird, empfehlen wir diese Datenbank nicht für den Produktionseinsatz. Bitte erwäge stattdessen die Verwendung von MySQL 5.7. Weitere Informationen zur Konfiguration von MySQL findest du hier"
}
],
"login.page-title": [
@@ -648,7 +648,7 @@
"login.remberme": [
{
"type": 0,
- "value": "Behalte mich in Erinnerung"
+ "value": "Angemeldet bleiben?"
}
],
"login.signin": [
@@ -672,19 +672,19 @@
"login.userinactive": [
{
"type": 0,
- "value": "Entschuldigung, Ihr Konto wurde noch nicht aktiviert. Sie erhalten eine Benachrichtigungs-E-Mail, wenn es aktiv wird. Bleiben Sie dran!."
+ "value": "Entschuldigung, dein Konto wurde noch nicht aktiviert. Du erhältst eine Benachrichtigungs-E-Mail, wenn es aktiv wird."
}
],
"map.creator": [
{
"type": 0,
- "value": "Schöpfer"
+ "value": "Besitzer"
}
],
"map.delete-selected": [
{
"type": 0,
- "value": "Ausgewählte löschen"
+ "value": "Auswahl löschen"
}
],
"map.last-update": [
@@ -708,19 +708,19 @@
"map.tooltip-add": [
{
"type": 0,
- "value": "Label zu Ausgewähltem hinzufügen"
+ "value": "Label zur Auswahl hinzufügen"
}
],
"maps.choose-file": [
{
"type": 0,
- "value": "Wählen Sie eine Datei"
+ "value": "Wähle eine Datei"
}
],
"maps.create-tooltip": [
{
"type": 0,
- "value": "Erstellen Sie eine neue Mindmap"
+ "value": "Erstelle eine neue Mindmap"
}
],
"maps.empty-result": [
@@ -774,31 +774,31 @@
"maps.nav-onwned": [
{
"type": 0,
- "value": "Besitz"
+ "value": "Eigene"
}
],
"maps.nav-public": [
{
"type": 0,
- "value": "Allgemein"
+ "value": "Freigegeben"
}
],
"maps.nav-shared": [
{
"type": 0,
- "value": "Mit mir geteilt"
+ "value": "Geteilt"
}
],
"maps.nav-starred": [
{
"type": 0,
- "value": "Markiert"
+ "value": "Favoriten"
}
],
"maps.page-title": [
{
"type": 0,
- "value": "Meine Karten | WiseMapping"
+ "value": "Meine Mindmaps | WiseMapping"
}
],
"maps.revert": [
@@ -822,13 +822,13 @@
"maps.tooltip-starred": [
{
"type": 0,
- "value": "Markiert"
+ "value": "Favoriten"
}
],
"maps.view": [
{
"type": 0,
- "value": "Aussicht"
+ "value": "Ansicht"
}
],
"menu.account": [
@@ -846,7 +846,7 @@
"menu.signout": [
{
"type": 0,
- "value": "Austragen"
+ "value": "Abmelden"
}
],
"publish.button": [
@@ -858,13 +858,13 @@
"publish.checkbox": [
{
"type": 0,
- "value": "Aktivieren Sie die öffentliche Freigabe"
+ "value": "Aktiviere die öffentliche Freigabe"
}
],
"publish.description": [
{
"type": 0,
- "value": "Indem Sie die Karte veröffentlichen, machen Sie sie für jeden im Internet sichtbar."
+ "value": "Indem du die Mindmap veröffentlichst, machst du sie für jeden im Internet sichtbar."
}
],
"publish.embedded": [
@@ -876,7 +876,7 @@
"publish.embedded-msg": [
{
"type": 0,
- "value": "Kopieren Sie dieses Code-Snippet, um es in Ihren Blog oder Ihre Seite einzubetten:"
+ "value": "Kopiere dieses Code-Snippet, um es in deinem Blog oder deiner Webseite einzubetten:"
}
],
"publish.public-url": [
@@ -888,7 +888,7 @@
"publish.public-url-msg": [
{
"type": 0,
- "value": "Kopieren Sie den folgenden Link und fügen Sie ihn ein, um Ihre Karte mit Kollegen zu teilen:"
+ "value": "Kopiere den folgenden Link und gebe ihn weiter, um deine Mindmap mit Kollegen zu teilen:"
}
],
"publish.title": [
@@ -906,13 +906,13 @@
"registration.desc": [
{
"type": 0,
- "value": "Die Anmeldung ist kostenlos und nehmen Sie sich einen Moment Zeit"
+ "value": "Nimm dir einen Moment Zeit. Die Anmeldung ist kostenlos."
}
],
"registration.email": [
{
"type": 0,
- "value": "Email"
+ "value": "E-Mail"
}
],
"registration.firstname": [
@@ -942,13 +942,13 @@
"registration.success.desc": [
{
"type": 0,
- "value": "Klicken Sie unten auf die Schaltfläche „Anmelden“ und beginnen Sie mit der Erstellung von Mindmaps."
+ "value": "Klicke unten auf die Schaltfläche „Anmelden“ und beginne mit der Erstellung von Mindmaps."
}
],
"registration.termandconditions": [
{
"type": 0,
- "value": "Kundenbedingungen: Bitte überprüfen Sie die WiseMapping-Kontoinformationen, die Sie oben eingegeben haben, und sehen Sie sich die Kundenbedingungen hier an. Indem Sie unten auf „Registrieren“ klicken, stimmen Sie den obigen Kundenbedingungen und der Datenschutzrichtlinie zu"
+ "value": "Kundenbedingungen: Bitte überprüfe die WiseMapping-Kontoinformationen, die du oben eingegeben hast und lese dir die Kundenbedingungen hier durch. Indem du unten auf „Registrieren“ klickst, stimmst du den obigen Kundenbedingungen und der Datenschutzrichtlinie zu."
}
],
"registration.title": [
@@ -960,7 +960,7 @@
"rename.description": [
{
"type": 0,
- "value": "Bitte geben Sie den neuen Kartennamen und die Beschreibung ein."
+ "value": "Bitte gebe den Namen und die Beschreibung der Mindmap ein."
}
],
"rename.title": [
@@ -972,13 +972,13 @@
"resetpassword.success.title": [
{
"type": 0,
- "value": "Ihr Konto wurde erfolgreich erstellt"
+ "value": "Dein Konto wurde erfolgreich erstellt"
}
],
"role.editor": [
{
"type": 0,
- "value": "Editor"
+ "value": "Bearbeiter"
}
],
"role.owner": [
@@ -990,7 +990,7 @@
"role.viewer": [
{
"type": 0,
- "value": "Zuschauer"
+ "value": "Betrachter"
}
],
"share.add-button": [
@@ -1020,19 +1020,19 @@
"share.delete": [
{
"type": 0,
- "value": "Mitbearbeiter löschen"
+ "value": "Bearbeiter entfernen"
}
],
"share.delete-description": [
{
"type": 0,
- "value": "Laden Sie Personen ein, mit Ihnen bei der Erstellung Ihrer Midnmap zusammenzuarbeiten. Sie werden per E-Mail benachrichtigt."
+ "value": "Lade Personen ein, die bei der Erstellung deiner Midnmap mitarbeiten. Sie werden per E-Mail benachrichtigt."
}
],
"share.delete-title": [
{
"type": 0,
- "value": "Teilen Sie mit Menschen"
+ "value": "Teile deine Mindmap"
}
],
"share.message": [
diff --git a/packages/webapp/src/components/HOCs/withSessionExpirationHandling.tsx b/packages/webapp/src/components/HOCs/withSessionExpirationHandling.tsx
index 2e2fbda9..28f5c03e 100644
--- a/packages/webapp/src/components/HOCs/withSessionExpirationHandling.tsx
+++ b/packages/webapp/src/components/HOCs/withSessionExpirationHandling.tsx
@@ -6,27 +6,27 @@ import ClientHealthSentinel from '../../classes/client/client-health-sentinel';
import { activeInstance, sessionExpired } from '../../redux/clientSlice';
function withSessionExpirationHandling(Component: ComponentType) {
- return (hocProps: T): React.ReactElement => {
- const client: Client = useSelector(activeInstance);
- const dispatch = useDispatch();
+ return (hocProps: T): React.ReactElement => {
+ const client: Client = useSelector(activeInstance);
+ const dispatch = useDispatch();
- useEffect(() => {
- if (client) {
- client.onSessionExpired(() => {
- dispatch(sessionExpired());
- });
- } else {
- console.warn('Session expiration wont be handled because could not find client');
- }
- }, []);
+ useEffect(() => {
+ if (client) {
+ client.onSessionExpired(() => {
+ dispatch(sessionExpired());
+ });
+ } else {
+ console.warn('Session expiration wont be handled because could not find client');
+ }
+ }, []);
- return (
- <>
- (null);
- const hotkey = useSelector(hotkeysEnabled);
- const userLocale = AppI18n.getUserLocale();
- const client: Client = useSelector(activeInstance);
+ const [activeDialog, setActiveDialog] = React.useState(null);
+ const hotkey = useSelector(hotkeysEnabled);
+ const userLocale = AppI18n.getUserLocale();
- useEffect(() => {
- ReactGA.pageview(window.location.pathname + window.location.search);
- }, []);
+ useEffect(() => {
+ ReactGA.send({ hitType: 'pageview', page: window.location.pathname, title: `Map Editor` });
+ }, []);
- const findEditorMode = (isTryMode: boolean, mapId: number): EditorRenderMode | null => {
- let result: EditorRenderMode = null;
- if (isTryMode) {
- result = 'showcase';
- } else if (global.mindmapLocked) {
- result = 'viewonly';
- } else {
- const fetchResult = fetchMapById(mapId);
- if (!fetchResult.isLoading) {
- if (fetchResult.error) {
- throw new Error(`Map info could not be loaded: ${JSON.stringify(fetchResult.error)}`);
- }
-
- if (!fetchResult.map) {
- throw new Error(`Map info could not be loaded. Info not present: ${JSON.stringify(fetchResult)}`);
- }
- result = `edition-${fetchResult.map.role}`;
- }
+ const findEditorMode = (isTryMode: boolean, mapId: number): EditorRenderMode | null => {
+ let result: EditorRenderMode = null;
+ if (isTryMode) {
+ result = 'showcase';
+ } else if (global.mindmapLocked) {
+ result = 'viewonly';
+ } else {
+ const fetchResult = fetchMapById(mapId);
+ if (!fetchResult.isLoading) {
+ if (fetchResult.error) {
+ throw new Error(`Map info could not be loaded: ${JSON.stringify(fetchResult.error)}`);
}
- return result;
+
+ if (!fetchResult.map) {
+ throw new Error(
+ `Map info could not be loaded. Info not present: ${JSON.stringify(fetchResult)}`,
+ );
+ }
+ result = `edition-${fetchResult.map.role}`;
+ }
}
+ return result;
+ };
- // What is the role ?
- const mapId = EditorOptionsBuilder.loadMapId();
- const mode = findEditorMode(isTryMode, mapId);
+ // What is the role ?
+ const mapId = EditorOptionsBuilder.loadMapId();
+ const mode = findEditorMode(isTryMode, mapId);
- // Account settings can be null and editor cannot be initilized multiple times. This creates problems
- // at the i18n resource loading.
- const isAccountLoaded = mode === 'showcase' || fetchAccount;
- const loadCompleted = mode && isAccountLoaded;
+ // Account settings can be null and editor cannot be initilized multiple times. This creates problems
+ // at the i18n resource loading.
+ const isAccountLoaded = mode === 'showcase' || fetchAccount;
+ const loadCompleted = mode && isAccountLoaded;
- let options, persistence: PersistenceManager;
- if (loadCompleted) {
- options = EditorOptionsBuilder.build(userLocale.code, mode, hotkey);
- persistence = client.buildPersistenceManager(mode);
- }
-
- return loadCompleted ? (
- }
- >
- setActiveDialog(null)}
- mapsId={[mapId]}
- fromEditor
- />
- }
- ) : <>
-}
+ let options, persistence: PersistenceManager;
+ if (loadCompleted) {
+ options = EditorOptionsBuilder.build(userLocale.code, mode, hotkey);
+ persistence = buildPersistenceManagerForEditor(mode);
+ }
+ return loadCompleted ? (
+ }
+ >
+ setActiveDialog(null)}
+ mapsId={[mapId]}
+ fromEditor
+ />
+ )}
+
+ ) : (
+ <>
+ );
+};
export default EditorPage;
-
diff --git a/packages/webapp/src/components/forgot-password-page/index.tsx b/packages/webapp/src/components/forgot-password-page/index.tsx
index 29b81d98..643404dc 100644
--- a/packages/webapp/src/components/forgot-password-page/index.tsx
+++ b/packages/webapp/src/components/forgot-password-page/index.tsx
@@ -12,84 +12,91 @@ import { activeInstance } from '../../redux/clientSlice';
import Input from '../form/input';
import GlobalError from '../form/global-error';
import SubmitButton from '../form/submit-button';
-import ReactGA from 'react-ga';
+import ReactGA from 'react-ga4';
import Typography from '@mui/material/Typography';
import { getCsrfToken, getCsrfTokenParameter } from '../../utils';
const ForgotPassword = () => {
- const [email, setEmail] = useState('');
- const [error, setError] = useState();
- const history = useHistory();
- const intl = useIntl();
+ const [email, setEmail] = useState('');
+ const [error, setError] = useState();
+ const history = useHistory();
+ const intl = useIntl();
- const service: Client = useSelector(activeInstance);
- const mutation = useMutation(
- (email: string) => service.resetPassword(email),
- {
- onSuccess: () => history.push('/c/forgot-password-success'),
- onError: (error) => {
- setError(error);
- },
- }
- );
+ const service: Client = useSelector(activeInstance);
+ const mutation = useMutation(
+ (email: string) => service.resetPassword(email),
+ {
+ onSuccess: () => history.push('/c/forgot-password-success'),
+ onError: (error) => {
+ setError(error);
+ },
+ },
+ );
- const handleOnSubmit = (event: React.FormEvent) => {
- event.preventDefault();
- mutation.mutate(email);
- };
+ const handleOnSubmit = (event: React.FormEvent) => {
+ event.preventDefault();
+ mutation.mutate(email);
+ };
- return (
-
-
-
+ return (
+
+
+
-
-
+
+
-
- );
+
+ );
};
const ForgotPasswordPage = (): React.ReactElement => {
- const intl = useIntl();
- useEffect(() => {
- document.title = intl.formatMessage({ id: 'forgot.page-title', defaultMessage: 'Forgot Password | WiseMapping' });
- ReactGA.pageview(window.location.pathname + window.location.search);
- },[]);
+ const intl = useIntl();
+ useEffect(() => {
+ document.title = intl.formatMessage({
+ id: 'forgot.page-title',
+ defaultMessage: 'Forgot Password | WiseMapping',
+ });
+ ReactGA.send({
+ hitType: 'pageview',
+ page: window.location.pathname,
+ title: 'ForgotPassword:Init',
+ });
+ }, []);
- return (
-
- {errorMsg}
-
- ) : null;
+ return hasError ? (
+
+ {errorMsg}
+
+ ) : null;
};
export default GlobalError;
diff --git a/packages/webapp/src/components/form/global-error/styled.ts b/packages/webapp/src/components/form/global-error/styled.ts
index 753cee0b..55e0d184 100644
--- a/packages/webapp/src/components/form/global-error/styled.ts
+++ b/packages/webapp/src/components/form/global-error/styled.ts
@@ -2,10 +2,10 @@ import withStyles from '@mui/styles/withStyles';
import Alert from '@mui/material/Alert';
export const StyledAlert = withStyles({
- root: {
- padding: '10px 15px',
- margin: '5px 0px ',
- },
+ root: {
+ padding: '10px 15px',
+ margin: '5px 0px ',
+ },
})(Alert);
export default StyledAlert;
diff --git a/packages/webapp/src/components/form/input/index.tsx b/packages/webapp/src/components/form/input/index.tsx
index 806a2524..10512fff 100644
--- a/packages/webapp/src/components/form/input/index.tsx
+++ b/packages/webapp/src/components/form/input/index.tsx
@@ -3,51 +3,51 @@ import React, { ChangeEvent } from 'react';
import { ErrorInfo } from '../../../classes/client';
type InputProps = {
- name: string;
- error?: ErrorInfo;
- onChange?: (event: ChangeEvent) => void;
- label: string;
- required?: boolean;
- type: string;
- value?: string;
- autoComplete?: string;
- fullWidth?: boolean;
- disabled?: boolean;
- maxLength?: number,
- rows?: number
+ name: string;
+ error?: ErrorInfo;
+ onChange?: (event: ChangeEvent) => void;
+ label: string;
+ required?: boolean;
+ type: string;
+ value?: string;
+ autoComplete?: string;
+ fullWidth?: boolean;
+ disabled?: boolean;
+ maxLength?: number;
+ rows?: number;
};
const Input = ({
- name,
- error,
- onChange,
- required = true,
- type,
- value,
- label,
- autoComplete,
- fullWidth = true,
- disabled = false,
- maxLength = 254,
+ name,
+ error,
+ onChange,
+ required = true,
+ type,
+ value,
+ label,
+ autoComplete,
+ fullWidth = true,
+ disabled = false,
+ maxLength = 254,
}: InputProps): React.ReactElement => {
- const fieldError = error?.fields?.[name];
- return (
-
-
- );
+ return (
+
+
+ );
};
export default Footer;
diff --git a/packages/webapp/src/components/layout/footer/styled.ts b/packages/webapp/src/components/layout/footer/styled.ts
index dc19e089..aa716d12 100644
--- a/packages/webapp/src/components/layout/footer/styled.ts
+++ b/packages/webapp/src/components/layout/footer/styled.ts
@@ -2,46 +2,46 @@ import styled from 'styled-components';
/* Footer */
export const StyledFooter = styled.footer`
- height: 250px;
- margin-top: 80px;
- padding: 30px 40px 10px 50px;
- background-color: #f9a826;
- display: grid;
- grid-template-columns: 200px 1fr 1fr 1fr 3fr;
+ height: 250px;
+ margin-top: 80px;
+ padding: 30px 40px 10px 50px;
+ background-color: #f9a826;
+ display: grid;
+ grid-template-columns: 200px 1fr 1fr 1fr 3fr;
- & a {
- font-size: 14px;
- color: white;
- word-wrap: nowrap;
- }
+ & a {
+ font-size: 14px;
+ color: white;
+ word-wrap: nowrap;
+ }
- & h4 {
- font-size: 14px;
- color: white;
- word-wrap: nowrap;
- font-weight: 500px;
- margin: 0px;
- }
+ & h4 {
+ font-size: 14px;
+ color: white;
+ word-wrap: nowrap;
+ font-weight: 500px;
+ margin: 0px;
+ }
- & > svg {
- grid-column: 1;
- }
+ & > svg {
+ grid-column: 1;
+ }
- & div:nth-child(2) {
- grid-column: 2;
- }
+ & div:nth-child(2) {
+ grid-column: 2;
+ }
- & div:nth-child(3) {
- grid-column: 3;
- }
- & div:nth-child(4) {
- grid-column: 4;
- }
+ & div:nth-child(3) {
+ grid-column: 3;
+ }
+ & div:nth-child(4) {
+ grid-column: 4;
+ }
- & div:nth-child(5) {
- grid-column: 5;
- text-align: right;
- display: inline-block;
- visibility: visible;
- }
+ & div:nth-child(5) {
+ grid-column: 5;
+ text-align: right;
+ display: inline-block;
+ visibility: visible;
+ }
`;
diff --git a/packages/webapp/src/components/layout/form-container/index.tsx b/packages/webapp/src/components/layout/form-container/index.tsx
index 8883921c..26cb83ff 100644
--- a/packages/webapp/src/components/layout/form-container/index.tsx
+++ b/packages/webapp/src/components/layout/form-container/index.tsx
@@ -2,11 +2,11 @@ import Container from '@mui/material/Container';
import withStyles from '@mui/styles/withStyles';
const FormContainer = withStyles({
- root: {
- padding: '20px 10px 0px 20px',
- maxWidth: '380px',
- textAlign: 'center',
- },
+ root: {
+ padding: '20px 10px 0px 20px',
+ maxWidth: '380px',
+ textAlign: 'center',
+ },
})(Container);
export default FormContainer;
diff --git a/packages/webapp/src/components/layout/header/index.tsx b/packages/webapp/src/components/layout/header/index.tsx
index 8ad2f23a..ae411760 100644
--- a/packages/webapp/src/components/layout/header/index.tsx
+++ b/packages/webapp/src/components/layout/header/index.tsx
@@ -8,89 +8,83 @@ import Button from '@mui/material/Button';
import logo from './logo-small.svg';
interface HeaderProps {
- type: 'only-signup' | 'only-signin' | 'none';
+ type: 'only-signup' | 'only-signin' | 'none';
}
export const Header = ({ type }: HeaderProps): React.ReactElement => {
- let signUpButton;
- let text;
- let signInButton;
- if (type === 'only-signup') {
- text = (
-
-
-
-
-
-
- })
-
-
- {text}
- {signUpButton}
- {signInButton}
-
-
+ let signUpButton;
+ let text;
+ let signInButton;
+ if (type === 'only-signup') {
+ text = (
+
+
+
+
+
+
+
+
+
+ {text}
+ {signUpButton}
+ {signInButton}
+
+
+ );
};
interface ButtonProps {
- className?: string;
+ className?: string;
}
export const SignInButton = (props: ButtonProps): React.ReactElement => {
- return (
-
-
-
- );
+ return (
+
+
+
+ );
};
const SignUpButton = (props: ButtonProps): React.ReactElement => {
- return (
-
-
-
- );
+ return (
+
+
+
+ );
};
export default Header;
diff --git a/packages/webapp/src/components/layout/header/styled.ts b/packages/webapp/src/components/layout/header/styled.ts
index b41cff41..3c75f5be 100644
--- a/packages/webapp/src/components/layout/header/styled.ts
+++ b/packages/webapp/src/components/layout/header/styled.ts
@@ -1,83 +1,81 @@
import styled from 'styled-components';
export const StyledNav = styled.nav`
- height: 90px;
+ height: 90px;
+ position: sticky;
+ top: -16px;
+ z-index: 1;
+ -webkit-backface-visibility: hidden;
+
+ &::before,
+ &::after {
+ content: '';
+ display: block;
+ height: 16px;
position: sticky;
- top: -16px;
- z-index: 1;
- -webkit-backface-visibility: hidden;
+ }
- &::before,
- &::after {
- content: '';
- display: block;
- height: 16px;
- position: sticky;
- }
+ &::before {
+ top: 58px;
+ box-shadow: 0 4px 10px 0 rgba(202, 34, 34, 0.05), 0 5px 30px 0 rgba(0, 0, 0, 0.05);
+ }
- &::before {
- top: 58px;
- box-shadow: 0 4px 10px 0 rgba(202, 34, 34, 0.05), 0 5px 30px 0 rgba(0, 0, 0, 0.05);
- }
+ &::after {
+ background: linear-gradient(white, rgba(255, 255, 255, 0.3));
+ top: 0;
+ z-index: 2;
+ }
- &::after {
- background: linear-gradient(white, rgba(255, 255, 255, 0.3));
- top: 0;
- z-index: 2;
- }
+ .header-area-right2 {
+ grid-column-start: 3;
+ text-align: right;
+ }
- .header-area-right2 {
- grid-column-start: 3;
- text-align: right;
- }
+ .header-area-right1 span,
+ .header-area-right2 span {
+ font-size: 15px;
+ }
- .header-area-right1 span,
- .header-area-right2 span {
- font-size: 15px;
- }
-
-
+ .header-area-content-span {
+ grid-column-start: 2;
+ grid-column-end: 3;
+ text-align: right;
+ font-size: 14px;
+ padding: 10px;
+ }
+
+ @media only screen and (max-width: 600px) {
.header-area-content-span {
- grid-column-start: 2;
- grid-column-end: 3;
- text-align: right;
- font-size: 14px;
- padding: 10px;
+ display: none;
+ grid-column-start: 2;
+ grid-column-end: 3;
+ text-align: right;
+ font-size: 14px;
+ padding: 10px;
}
-
- @media only screen and (max-width: 600px) {
- .header-area-content-span {
- display: none;
- grid-column-start: 2;
- grid-column-end: 3;
- text-align: right;
- font-size: 14px;
- padding: 10px;
- }
- }
-
+ }
`;
export const StyledDiv = styled.nav`
- background: white;
- height: 74px;
- padding: 10px;
- position: sticky;
- top: 0px;
- margin-top: -16px;
- z-index: 3;
+ background: white;
+ height: 74px;
+ padding: 10px;
+ position: sticky;
+ top: 0px;
+ margin-top: -16px;
+ z-index: 3;
- display: grid;
- white-space: nowrap;
- grid-template-columns: 150px 1fr 160px 20px;
+ display: grid;
+ white-space: nowrap;
+ grid-template-columns: 150px 1fr 160px 20px;
`;
export const Logo = styled.span`
- grid-column-start: 1;
- margin-left: 20px;
- margin-top: 0px;
+ grid-column-start: 1;
+ margin-left: 20px;
+ margin-top: 0px;
- .header-logo a {
- padding: 0px;
- }
+ .header-logo a {
+ padding: 0px;
+ }
`;
diff --git a/packages/webapp/src/components/login-page/index.tsx b/packages/webapp/src/components/login-page/index.tsx
index 102b038b..4f78ec4f 100644
--- a/packages/webapp/src/components/login-page/index.tsx
+++ b/packages/webapp/src/components/login-page/index.tsx
@@ -10,134 +10,134 @@ import FormContainer from '../layout/form-container';
import Typography from '@mui/material/Typography';
import FormControl from '@mui/material/FormControl';
import Link from '@mui/material/Link';
-import ReactGA from 'react-ga';
+import ReactGA from 'react-ga4';
import { getCsrfToken, getCsrfTokenParameter } from '../../utils';
type ConfigStatusProps = {
- enabled?: boolean;
+ enabled?: boolean;
};
const ConfigStatusMessage = ({ enabled = false }: ConfigStatusProps): React.ReactElement => {
- let result;
- if (enabled === true) {
- result = (
-
| ${$msg('SAVE_CHANGES')} | -Ctrl + s | -⌘ + s | +${$msg('CTRL')} + S | +⌘ + S |
| ${$msg('CREATE_SIBLING_TOPIC')} | @@ -52,12 +51,12 @@ class KeyboardShortcutDialog extends BootstrapDialog {||||
| ${$msg('CREATE_CHILD_TOPIC')} | -Insert / Tab | +${$msg('K_INSERT')} / Tab | ⌘ + Enter / Tab | |
| ${$msg('DELETE_TOPIC')} | -Delete | +${$msg('K_DELETE')} | Delete | |
| ${$msg('MULTIPLE_LINES')} | -Ctrl + Enter | +${$msg('CTRL')} + Enter | ⌘ + Enter | |
| ${$msg('COPY_AND_PASTE_TOPICS')} | -Ctrl + c/Ctrl + v | -⌘ + c/⌘ + v | +${$msg('CTRL')} + C / ${$msg('CTRL')} + V | +⌘ + C / ⌘ + V |
| ${$msg('COLLAPSE_CHILDREN')} | -Space bar | -Space bar | +${$msg('SPACE_BAR')} | +${$msg('SPACE_BAR')} |
| ${$msg('TOPIC_NAVIGATION')} | @@ -88,23 +87,23 @@ class KeyboardShortcutDialog extends BootstrapDialog {||||
| ${$msg('SELECT_MULTIPLE_NODES')} | -Ctrl + Mouse Click | -Ctrl + Mouse Click | +${$msg('CTRL')} + ${$msg('MOUSE_CLICK')} | +${$msg('CTRL')} + ${$msg('MOUSE_CLICK')} |
| ${$msg('UNDO_EDITION')} | -Ctrl + z | -⌘ + z | +${$msg('CTRL')} + Z | +⌘ + Z |
| ${$msg('REDO_EDITION')} | -Ctrl + Shift + z | -⌘ + Shift + z | +${$msg('CTRL')} + Shift + Z | +⌘ + Shift + Z |
| ${$msg('SELECT_ALL_TOPIC')} | -Ctrl + a | -⌘ + a | +${$msg('CTRL')} + A | +⌘ + A |
| ${$msg('CANCEL_TEXT_CHANGES')} | @@ -113,34 +112,34 @@ class KeyboardShortcutDialog extends BootstrapDialog {||||
| ${$msg('DESELECT_ALL_TOPIC')} | -Ctrl + Shift + a | -⌘ + Shift + a | +${$msg('CTRL')} + Shift + A | +⌘ + Shift + A |
| ${$msg('CHANGE_TEXT_ITALIC')} | -Ctrl + i | -⌘ + i | +${$msg('CTRL')} + I | +⌘ + I |
| ${$msg('CHANGE_TEXT_BOLD')} | -Ctrl + b | -⌘ + b | +${$msg('CTRL')} + B | +⌘ + B |
| ${$msg('TOPIC_NOTE')} | -Ctrl + k | -⌘ + k | +${$msg('CTRL')} + K | +⌘ + K |
| ${$msg('TOPIC_LINK')} | -Ctrl + l | -⌘ + l | +${$msg('CTRL')} + L | +⌘ + L |
',
+ template:
+ '
',
});
tipDiv.on('click', (e) => {
tipDiv.trigger('mouseleave', e);
diff --git a/packages/editor/src/classes/menu/ListToolbarPanel.js b/packages/editor/src/classes/menu/ListToolbarPanel.js
index 358c23e4..6847f68d 100644
--- a/packages/editor/src/classes/menu/ListToolbarPanel.js
+++ b/packages/editor/src/classes/menu/ListToolbarPanel.js
@@ -43,7 +43,9 @@ class ListToolbarPanel extends ToolbarPaneItem {
const menuElems = panelElem.find('div');
const value = this.getModel().getValue();
menuElems.each((index, elem) => {
- const elemValue = $defined($(elem).attr('model')) ? $(elem).attr('model') : $(elem).attr('id');
+ const elemValue = $defined($(elem).attr('model'))
+ ? $(elem).attr('model')
+ : $(elem).attr('id');
$assert(elemValue, 'elemValue can not be null');
if (elemValue === value) $(elem).attr('class', 'toolbarPanelLinkSelectedLink');
else $(elem).attr('class', 'toolbarPanelLink');
diff --git a/packages/editor/src/classes/menu/Menu.ts b/packages/editor/src/classes/menu/Menu.ts
index 57b7a035..1cd16a93 100644
--- a/packages/editor/src/classes/menu/Menu.ts
+++ b/packages/editor/src/classes/menu/Menu.ts
@@ -61,7 +61,9 @@ class Menu extends IMenu {
this._addButton('position', false, false, () => {
designer.zoomToFit();
});
- Menu._registerTooltip('position', $msg('CENTER_POSITION'));
+ // Disabled because this tooltip overflows the screen and makes the button un-clickeable
+ // This should be enabled when migrating to material-ui
+ //Menu._registerTooltip('position', $msg('CENTER_POSITION'));
// Edition actions ...
if (!readOnly) {
@@ -181,7 +183,9 @@ class Menu extends IMenu {
designer.changeBorderColor(hex);
},
};
- this._toolbarElems.push(new ColorPalettePanel('topicBorder', borderColorModel, widgetsBaseUrl));
+ this._toolbarElems.push(
+ new ColorPalettePanel('topicBorder', borderColorModel, widgetsBaseUrl),
+ );
Menu._registerTooltip('topicBorder', $msg('TOPIC_BORDER_COLOR'));
const fontColorModel = {
@@ -211,7 +215,7 @@ class Menu extends IMenu {
if (undoButton) {
undoButton.disable();
}
- Menu._registerTooltip('undoEdition', $msg('UNDO'));
+ Menu._registerTooltip('undoEdition', $msg('UNDO'), $msg('CTRL') + ' + Z');
const redoButton = this._addButton('redoEdition', false, false, () => {
designer.redo();
@@ -219,7 +223,7 @@ class Menu extends IMenu {
if (redoButton) {
redoButton.disable();
}
- Menu._registerTooltip('redoEdition', $msg('REDO'));
+ Menu._registerTooltip('redoEdition', $msg('REDO'), $msg('CTRL') + ' + Shift + Z');
if (redoButton && undoButton) {
designer.addEvent('modelUpdate', (event) => {
@@ -244,7 +248,7 @@ class Menu extends IMenu {
this._addButton('deleteTopic', true, true, () => {
designer.deleteSelectedEntities();
});
- Menu._registerTooltip('deleteTopic', $msg('TOPIC_DELETE'));
+ Menu._registerTooltip('deleteTopic', $msg('TOPIC_DELETE'), $msg('K_DELETE'));
this._addButton('topicLink', true, false, () => {
designer.addLink();
@@ -264,22 +268,20 @@ class Menu extends IMenu {
this._addButton('fontBold', true, false, () => {
designer.changeFontWeight();
});
- Menu._registerTooltip('fontBold', $msg('FONT_BOLD'), 'meta+B');
+ Menu._registerTooltip('fontBold', $msg('FONT_BOLD'), $msg('CTRL') + ' + B');
this._addButton('fontItalic', true, false, () => {
designer.changeFontStyle();
});
- Menu._registerTooltip('fontItalic', $msg('FONT_ITALIC'), 'meta+I');
-
+ Menu._registerTooltip('fontItalic', $msg('FONT_ITALIC'), $msg('CTRL') + ' + I');
if (!readOnly) {
// Register action on save ...
const saveElem = $('#save');
- this._addButton('save', false, false,
- () => {
- this.save(saveElem, designer, true);
- });
- Menu._registerTooltip('save', $msg('SAVE'));
+ this._addButton('save', false, false, () => {
+ this.save(saveElem, designer, true);
+ });
+ Menu._registerTooltip('save', $msg('SAVE'), $msg('CTRL') + ' + S');
// Register unload save ...
window.addEventListener('beforeunload', () => {
@@ -290,13 +292,11 @@ class Menu extends IMenu {
});
// Autosave on a fixed period of time ...
- setInterval(
- () => {
- if (this.isSaveRequired()) {
- this.save(saveElem, designer, false);
- }
- }, 10000,
- );
+ setInterval(() => {
+ if (this.isSaveRequired()) {
+ this.save(saveElem, designer, false);
+ }
+ }, 10000);
}
}
@@ -394,10 +394,14 @@ class Menu extends IMenu {
// Register Events ...
let result = null;
if ($(`#${buttonId}`)) {
- const button = new ToolbarItem(buttonId, ((event) => {
- fn(event);
- this.clear();
- }), { topicAction: isTopic, relAction: isRelationship });
+ const button = new ToolbarItem(
+ buttonId,
+ (event) => {
+ fn(event);
+ this.clear();
+ },
+ { topicAction: isTopic, relAction: isRelationship },
+ );
this._toolbarElems.push(button);
result = button;
@@ -409,9 +413,10 @@ class Menu extends IMenu {
if ($(`#${buttonId}`)) {
let tooltip = text;
if (shortcut) {
- const platformedShortcut = navigator.appVersion.indexOf('Mac') !== -1
- ? shortcut.replace('meta+', '⌘')
- : shortcut.replace('meta+', 'ctrl+');
+ const platformedShortcut =
+ navigator.appVersion.indexOf('Mac') !== -1
+ ? shortcut.replace('meta+', '⌘')
+ : shortcut.replace('meta+', 'ctrl+');
tooltip = `${tooltip} (${platformedShortcut})`;
}
return new KeyboardShortcutTooltip($(`#${buttonId}`), tooltip);
diff --git a/packages/editor/src/classes/menu/ToolbarPaneItem.js b/packages/editor/src/classes/menu/ToolbarPaneItem.js
index 97c0ba37..4dbb54f7 100644
--- a/packages/editor/src/classes/menu/ToolbarPaneItem.js
+++ b/packages/editor/src/classes/menu/ToolbarPaneItem.js
@@ -17,7 +17,7 @@
*/
import { $assert } from '@wisemapping/core-js';
import ToolbarItem from './ToolbarItem';
-import FloatingTip from '@wisemapping/mindplot/src/components/widget/FloatingTip';
+import FloatingTip from '../bootstrap/FloatingTip';
class ToolbarPaneItem extends ToolbarItem {
constructor(buttonId, model, delayInit) {
diff --git a/packages/editor/src/compiled-lang/de.json b/packages/editor/src/compiled-lang/de.json
index ac8ea4ac..a455e2a8 100644
--- a/packages/editor/src/compiled-lang/de.json
+++ b/packages/editor/src/compiled-lang/de.json
@@ -5,6 +5,18 @@
"value": "Teilen"
}
],
+ "editor.edit-description-mobile": [
+ {
+ "type": 0,
+ "value": "Eingeschränkte Funktionen der Mindmap-Edition werden auf Mobilgeräten unterstützt. Verwenden Sie den Desktop-Browser für vollständige Editorfunktionen."
+ }
+ ],
+ "editor.edit-mobile": [
+ {
+ "type": 0,
+ "value": "Hinweis für Mobilgeräte."
+ }
+ ],
"editor.try-welcome": [
{
"type": 0,
@@ -17,6 +29,18 @@
"value": "Melden Sie sich an, um kostenlos eine unbegrenzte Anzahl von Mindmaps zu erstellen, zu teilen und zu veröffentlichen."
}
],
+ "editor.try-welcome-description-mobile": [
+ {
+ "type": 0,
+ "value": "Melden Sie sich an, um kostenlos eine unbegrenzte Anzahl von Mindmaps zu erstellen, zu teilen und zu veröffentlichen. Eingeschränkte Funktionen der Mindmap-Edition werden auf Mobilgeräten unterstützt. Verwenden Sie den Desktop-Browser für vollständige Editorfunktionen."
+ }
+ ],
+ "editor.try-welcome-mobile": [
+ {
+ "type": 0,
+ "value": "Diese Edition zeigt einige der Mindmap-Funktionen!"
+ }
+ ],
"login.signup": [
{
"type": 0,
diff --git a/packages/editor/src/compiled-lang/en.json b/packages/editor/src/compiled-lang/en.json
index ab5c90b6..f466aad6 100644
--- a/packages/editor/src/compiled-lang/en.json
+++ b/packages/editor/src/compiled-lang/en.json
@@ -5,10 +5,22 @@
"value": "Share"
}
],
+ "editor.edit-description-mobile": [
+ {
+ "type": 0,
+ "value": "Limited mindmap edition capabilities are supported in Mobile devices. Use Desktop browser for full editor capabilities."
+ }
+ ],
+ "editor.edit-mobile": [
+ {
+ "type": 0,
+ "value": "Note for mobile devices."
+ }
+ ],
"editor.try-welcome": [
{
"type": 0,
- "value": "This edition space showcases some of the mindmap editor capabilities !"
+ "value": "This edition space showcases some of the mindmap editor capabilities!"
}
],
"editor.try-welcome-description": [
@@ -17,6 +29,18 @@
"value": "Sign Up to start creating, sharing and publishing unlimited number of mindmaps for free."
}
],
+ "editor.try-welcome-description-mobile": [
+ {
+ "type": 0,
+ "value": "Sign Up to start creating, sharing and publishing unlimited number of mindmaps for free. Limited mindmap edition capabilties are supported in Mobile devices. Use Desktop browser for full editor capabilies."
+ }
+ ],
+ "editor.try-welcome-mobile": [
+ {
+ "type": 0,
+ "value": "This edition space showcases some of the mindmap capabilities!"
+ }
+ ],
"login.signup": [
{
"type": 0,
diff --git a/packages/editor/src/compiled-lang/es.json b/packages/editor/src/compiled-lang/es.json
index 19ff2e8a..65e44628 100644
--- a/packages/editor/src/compiled-lang/es.json
+++ b/packages/editor/src/compiled-lang/es.json
@@ -5,6 +5,18 @@
"value": "Compartir"
}
],
+ "editor.edit-description-mobile": [
+ {
+ "type": 0,
+ "value": "En dispositivos móbiles las funciones son limitadas. Use la versión de escritorio para tener las funciones completas."
+ }
+ ],
+ "editor.edit-mobile": [
+ {
+ "type": 0,
+ "value": "Nota para dispositivos móbiles."
+ }
+ ],
"editor.try-welcome": [
{
"type": 0,
@@ -17,6 +29,18 @@
"value": "Registrate para comenzar a crear, compartir y publicar una cantidad ilimitada de mapas mentales de forma gratuita."
}
],
+ "editor.try-welcome-description-mobile": [
+ {
+ "type": 0,
+ "value": "Registrate para comenzar a crear, compartir y publicar una cantidad ilimitada de mapas mentales de forma gratuita. En dispositivos móbiles las funciones son limitadas. Use la versión de escritorio para tener las funciones completas."
+ }
+ ],
+ "editor.try-welcome-mobile": [
+ {
+ "type": 0,
+ "value": "¡Este espacio de edición muestra algunas de las capacidades de mapas mentales!"
+ }
+ ],
"login.signup": [
{
"type": 0,
diff --git a/packages/editor/src/compiled-lang/fr.json b/packages/editor/src/compiled-lang/fr.json
index a7f74b02..beab84d3 100644
--- a/packages/editor/src/compiled-lang/fr.json
+++ b/packages/editor/src/compiled-lang/fr.json
@@ -5,10 +5,22 @@
"value": "Partager"
}
],
+ "editor.edit-description-mobile": [
+ {
+ "type": 0,
+ "value": "Les capacités d'édition limitées de mindmap sont prises en charge dans les appareils mobiles. Utilisez le navigateur de bureau pour bénéficier de toutes les fonctionnalités de l'éditeur."
+ }
+ ],
+ "editor.edit-mobile": [
+ {
+ "type": 0,
+ "value": "Remarque pour les appareils mobiles."
+ }
+ ],
"editor.try-welcome": [
{
"type": 0,
- "value": "Cet espace d'édition présente certaines des fonctionnalités de l'éditeur de cartes mentales !"
+ "value": "Cet espace d'édition présente certaines des fonctionnalités de l'éditeur de cartes mentales!"
}
],
"editor.try-welcome-description": [
@@ -17,6 +29,18 @@
"value": "Inscrivez-vous pour commencer à créer, partager et publier gratuitement un nombre illimité de cartes mentales."
}
],
+ "editor.try-welcome-description-mobile": [
+ {
+ "type": 0,
+ "value": "Inscrivez-vous pour commencer à créer, partager et publier gratuitement un nombre illimité de cartes mentales. Les capacités d'édition limitées de mindmap sont prises en charge dans les appareils mobiles. Utilisez le navigateur de bureau pour bénéficier de toutes les fonctionnalités de l'éditeur."
+ }
+ ],
+ "editor.try-welcome-mobile": [
+ {
+ "type": 0,
+ "value": "Cet espace d'édition présente certaines des fonctionnalités des cartes mentales!"
+ }
+ ],
"login.signup": [
{
"type": 0,
diff --git a/packages/editor/src/compiled-lang/ru.json b/packages/editor/src/compiled-lang/ru.json
index 6a9236c3..716d0b29 100644
--- a/packages/editor/src/compiled-lang/ru.json
+++ b/packages/editor/src/compiled-lang/ru.json
@@ -5,6 +5,18 @@
"value": "Поделиться"
}
],
+ "editor.edit-description-mobile": [
+ {
+ "type": 0,
+ "value": "Возможности ограниченной версии Mindmap поддерживаются на мобильных устройствах. Используйте настольный браузер для полных возможностей редактора."
+ }
+ ],
+ "editor.edit-mobile": [
+ {
+ "type": 0,
+ "value": "Примечание для мобильных устройств."
+ }
+ ],
"editor.try-welcome": [
{
"type": 0,
@@ -17,6 +29,18 @@
"value": "Чтобы получить бесплатный неограниченный доступ — нужна только регистрация."
}
],
+ "editor.try-welcome-description-mobile": [
+ {
+ "type": 0,
+ "value": "Зарегистрируйтесь, чтобы начать создавать, делиться и публиковать неограниченное количество ментальных карт бесплатно. Возможности ограниченной версии Mindmap поддерживаются на мобильных устройствах. Используйте настольный браузер для полных возможностей редактора."
+ }
+ ],
+ "editor.try-welcome-mobile": [
+ {
+ "type": 0,
+ "value": "В этом издании демонстрируются некоторые возможности ментальных карт!"
+ }
+ ],
"login.signup": [
{
"type": 0,
diff --git a/packages/editor/src/compiled-lang/zh.json b/packages/editor/src/compiled-lang/zh.json
index e0ab537c..69e858e6 100644
--- a/packages/editor/src/compiled-lang/zh.json
+++ b/packages/editor/src/compiled-lang/zh.json
@@ -5,6 +5,18 @@
"value": "分享"
}
],
+ "editor.edit-description-mobile": [
+ {
+ "type": 0,
+ "value": "移动设备支持有限的思维导图编辑功能。 使用桌面浏览器获得完整的编辑器功能。"
+ }
+ ],
+ "editor.edit-mobile": [
+ {
+ "type": 0,
+ "value": "移动设备注意事项."
+ }
+ ],
"editor.try-welcome": [
{
"type": 0,
@@ -17,6 +29,18 @@
"value": "注册后可以免费创建、分享和发布无限数量的思维导图。"
}
],
+ "editor.try-welcome-description-mobile": [
+ {
+ "type": 0,
+ "value": "注册以开始免费创建、共享和发布无限数量的思维导图。 移动设备支持有限的思维导图编辑功能。 使用桌面浏览器获得完整的编辑器功能。"
+ }
+ ],
+ "editor.try-welcome-mobile": [
+ {
+ "type": 0,
+ "value": "这个版本空间展示了一些思维导图功能！"
+ }
+ ],
"login.signup": [
{
"type": 0,
diff --git a/packages/editor/src/components/action-button/index.ts b/packages/editor/src/components/action-button/index.ts
index 39c79067..e2247a9e 100644
--- a/packages/editor/src/components/action-button/index.ts
+++ b/packages/editor/src/components/action-button/index.ts
@@ -1,25 +1,27 @@
import styled from 'styled-components';
const ActionButton = styled.div`
- cursor: pointer;
- margin: 0px 10px;
- font-family: Arial, Helvetica, sans-serif;
- user-select: none;
- vertical-align: middle;
- justify-content: center;
- padding: 10px 25px;
- font-size: 15px;
- min-width: 64px;
- box-sizing: border-box;
- font-weight: 600;
- border-radius: 9px;
- color: white;
- background-color: #ffa800;
- display: inline-block;
-
- &:hover {
- transition: background-color 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms,box-shadow 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms,border 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;
- }
+ cursor: pointer;
+ margin: 0px 10px;
+ font-family: Arial, Helvetica, sans-serif;
+ user-select: none;
+ vertical-align: middle;
+ justify-content: center;
+ padding: 10px 25px;
+ font-size: 15px;
+ min-width: 64px;
+ box-sizing: border-box;
+ font-weight: 600;
+ border-radius: 9px;
+ color: white;
+ background-color: #ffa800;
+ display: inline-block;
+
+ &:hover {
+ transition: background-color 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms,
+ box-shadow 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms,
+ border 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;
+ }
`;
-export default ActionButton;
\ No newline at end of file
+export default ActionButton;
diff --git a/packages/editor/src/components/footer/index.tsx b/packages/editor/src/components/footer/index.tsx
index 1b10f9b0..dae9ba4d 100644
--- a/packages/editor/src/components/footer/index.tsx
+++ b/packages/editor/src/components/footer/index.tsx
@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { useState } from 'react';
import { StyledLogo, Notifier } from './styled';
import { useIntl } from 'react-intl';
@@ -6,51 +6,99 @@ import KeyboardSvg from '../../../images/keyboard.svg';
import AddSvg from '../../../images/add.svg';
import MinusSvg from '../../../images/minus.svg';
import CenterFocusSvg from '../../../images/center_focus.svg';
+import CloseDialogSvg from '../../../images/close-dialog-icon.svg';
+
import ActionButton from '../action-button';
import { EditorRenderMode } from '@wisemapping/mindplot';
export type FooterPropsType = {
- editorMode: EditorRenderMode;
+ editorMode: EditorRenderMode;
+ isMobile: boolean;
};
-const Footer = ({ editorMode }: FooterPropsType): React.ReactElement => {
- const intl = useIntl();
+const Footer = ({ editorMode, isMobile }: FooterPropsType): React.ReactElement => {
+ const intl = useIntl();
+ const [dialogClass, setDialogClass] = useState('tryInfoPanel');
- return (
- <>
-
-
-
+
}>
+
- 
-
-
-
-
-
+ var titleKey = undefined;
+ var descriptionKey = undefined;
+ var showSignupButton = undefined;
+
+ if (editorMode !== 'viewonly' && editorMode !== 'showcase' && isMobile) {
+ titleKey = 'editor.edit-mobile';
+ descriptionKey = 'editor.edit-description-mobile';
+ showSignupButton = false;
+ }
+ if (editorMode === 'showcase' && isMobile) {
+ titleKey = 'editor.try-welcome-mobile';
+ descriptionKey = 'editor.edit-description-mobile';
+ showSignupButton = true;
+ }
+ if (editorMode === 'showcase' && !isMobile) {
+ titleKey = 'editor.try-welcome';
+ descriptionKey = 'editor.try-welcome-description';
+ showSignupButton = true;
+ }
+
+ // if the toolbar is present, the alert must not overlap
+ var alertTopAdjustmentStyle =
+ editorMode !== 'viewonly' && !isMobile
+ ? 'tryInfoPanelWithToolbar'
+ : 'tryInfoPanelWithoutToolbar';
+
+ return (
+ <>
+
+ {!isMobile && (
+
+
+
+
+ )}
+
+
+
+
+
+
+ )}
+
+ );
};
export default Footer;
diff --git a/packages/editor/src/components/footer/styled.ts b/packages/editor/src/components/footer/styled.ts
index ea900704..ce94b981 100644
--- a/packages/editor/src/components/footer/styled.ts
+++ b/packages/editor/src/components/footer/styled.ts
@@ -3,29 +3,29 @@ import { times } from '../../size';
import LogoTextBlackSvg from '../../../images/logo-text-black.svg';
export const StyledFooter = styled.div`
- height: ${times(10)};
- width: 100%;
- border: 1px solid black;
+ height: ${times(10)};
+ width: 100%;
+ border: 1px solid black;
`;
export const StyledLogo = styled.div`
- position: fixed;
- left: 20px;
- bottom: 10px;
- background: url(${LogoTextBlackSvg}) no-repeat;
- width: 90px;
- height: 40px;
+ position: fixed;
+ left: 20px;
+ bottom: 10px;
+ background: url(${LogoTextBlackSvg}) no-repeat;
+ width: 90px;
+ height: 40px;
`;
export const Notifier = styled.div`
- border: 1px solid rgb(241, 163, 39);
- background-color: rgb(252, 235, 192);
- border-radius: 3px;
- position: fixed;
- padding: 5px 9px;
- color: back;
- white-space: nowrap;
- margin-top: 5px;
- display: none;
- bottom: 10px;
+ border: 1px solid rgb(241, 163, 39);
+ background-color: rgb(252, 235, 192);
+ border-radius: 3px;
+ position: fixed;
+ padding: 5px 9px;
+ color: back;
+ white-space: nowrap;
+ margin-top: 5px;
+ display: none;
+ bottom: 10px;
`;
diff --git a/packages/editor/src/components/toolbar/global-styled.css b/packages/editor/src/components/toolbar/global-styled.css
index 0bd3f70f..690697a4 100644
--- a/packages/editor/src/components/toolbar/global-styled.css
+++ b/packages/editor/src/components/toolbar/global-styled.css
@@ -1,103 +1,104 @@
div#header {
- width: 100%;
- height:50px;
- position: absolute;
- top: 0;
- z-index:1000;
+ width: 100%;
+ height: 50px;
+ position: absolute;
+ top: 0;
+ z-index: 1000;
}
div#headerNotifier {
- border: 1px solid rgb(241, 163, 39);
- background-color: rgb(252, 235, 192);
- border-radius: 3px;
- position: fixed;
- padding: 5px 9px;
- color: back;
- white-space: nowrap;
- margin-top: 5px;
- display: none;
- bottom: 10px;
+ border: 1px solid rgb(241, 163, 39);
+ background-color: rgb(252, 235, 192);
+ border-radius: 3px;
+ position: fixed;
+ padding: 5px 9px;
+ color: back;
+ white-space: nowrap;
+ margin-top: 5px;
+ display: none;
+ bottom: 10px;
}
div#toolbarRight {
- float: right;
- white-space: nowrap;
- vertical-align: middle;
- justify-content: center;
- margin: 6px 10px;
- height: 100%;
+ float: right;
+ white-space: nowrap;
+ vertical-align: middle;
+ justify-content: center;
+ margin: 6px 10px;
+ height: 100%;
}
#account {
- float: right;
- display: inline;
+ float: right;
+ display: inline;
}
-#account >img {
- width: 36x;
- height: 36px;
+#account > img {
+ width: 36x;
+ height: 36px;
}
-#accountSettingsPanel{
- padding:10px 10px;
+#accountSettingsPanel {
+ padding: 10px 10px;
}
#share {
- margin: 0 30px;
- float: right;
+ margin: 0 30px;
+ float: right;
}
.actionButton {
- cursor: pointer;
- font-family: Arial, Helvetica, sans-serif;
- user-select: none;
- vertical-align: middle;
- justify-content: center;
- padding: 10px 25px;
- font-size: 15px;
- min-width: 64px;
- box-sizing: border-box;
- font-weight: 600;
- border-radius: 9px;
- color: white;
- background-color: #ffa800;
+ cursor: pointer;
+ font-family: Arial, Helvetica, sans-serif;
+ user-select: none;
+ vertical-align: middle;
+ justify-content: center;
+ padding: 10px 25px;
+ font-size: 15px;
+ min-width: 64px;
+ box-sizing: border-box;
+ font-weight: 600;
+ border-radius: 9px;
+ color: white;
+ background-color: #ffa800;
}
.actionButton:hover {
- transition: background-color 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms,box-shadow 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms,border 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;
+ transition: background-color 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms,
+ box-shadow 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms, border 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;
}
div#toolbar {
- width: 100%;
- height: 50px;
- box-shadow: 0 4px 20px 0 rgba(0, 0, 0, 0.1);
- background-color: #fff;
- min-width: 900px;
- overflow: hidden;
+ width: 100%;
+ height: 50px;
+ box-shadow: 0 4px 20px 0 rgba(0, 0, 0, 0.1);
+ background-color: #fff;
+ min-width: 900px;
+ overflow: hidden;
}
div#toolbar .buttonContainer {
- height: 50px;
- padding-top: 8px;
- padding-right: 10px;
- padding-left: 10px;
- float: left;
- border-left: 1px solid lightgray;
+ height: 50px;
+ padding-top: 8px;
+ padding-right: 10px;
+ padding-left: 10px;
+ float: left;
+ border-left: 1px solid lightgray;
}
-div#mapName >span {
- border-radius: 4px;
- float: left;
- padding: 8px;
- min-width: 30px;
- font-weight: bold;
+div#mapName > span {
+ border-radius: 4px;
+ float: left;
+ padding: 8px;
+ min-width: 30px;
+ font-weight: bold;
}
div#backToList {
- height: 24px;
- width: 24px;
- float: left;
- margin: 13px 20px;
+ height: 24px;
+ width: 24px;
+ float: left;
+ margin: 13px 20px;
}
/******************************************************************************************/
@@ -108,120 +109,120 @@ div#toolbar .buttonOn,
div#toolbar .buttonOff,
div#toolbar .buttonActive,
div#toolbar .buttonOn:hover {
- width: 28px;
- height: 28px;
- float: left;
- text-align: center;
- z-index: 4;
- margin-top: 3px;
- padding-top: 2px;
- padding-left: 2px;
- margin-left: 3px;
+ width: 28px;
+ height: 28px;
+ float: left;
+ text-align: center;
+ z-index: 4;
+ margin-top: 3px;
+ padding-top: 2px;
+ padding-left: 2px;
+ margin-left: 3px;
}
div#toolbar .buttonOn:hover {
- cursor: pointer;
- opacity: 1;
+ cursor: pointer;
+ opacity: 1;
}
div#toolbar .buttonOn {
- opacity: 0.8;
+ opacity: 0.8;
}
div#toolbar .buttonOff {
- opacity: 0.4;
+ opacity: 0.4;
}
div#exportAnchor {
- position: absolute;
- width: 100%;
- height: 100%;
- top: 0;
- left: 0;
+ position: absolute;
+ width: 100%;
+ height: 100%;
+ top: 0;
+ left: 0;
}
div#toolbar .buttonExtOn,
div#toolbar .buttonExtOff,
div#toolbar .buttonExtActive,
div#toolbar .buttonExtOn:hover {
- width: 40px;
- height: 28px;
- float: left;
- text-align: left;
- z-index: 4;
- margin-top: 3px;
- padding-top: 2px;
- padding-left: 5px;
- margin-left: 3px;
+ width: 40px;
+ height: 28px;
+ float: left;
+ text-align: left;
+ z-index: 4;
+ margin-top: 3px;
+ padding-top: 2px;
+ padding-left: 5px;
+ margin-left: 3px;
}
div#toolbar .buttonExtOn:hover {
- opacity: 1;
+ opacity: 1;
}
div#toolbar .buttonExtActive {
- opacity: 1;
+ opacity: 1;
}
div#toolbar .buttonExtOn {
- opacity: 0.8;
- cursor: pointer
+ opacity: 0.8;
+ cursor: pointer;
}
div#toolbar .buttonExtOff {
- opacity: 0.4;
+ opacity: 0.4;
}
div#exportAnchor {
- position: absolute;
- width: 100%;
- height: 100%;
- top: 0;
- left: 0;
+ position: absolute;
+ width: 100%;
+ height: 100%;
+ top: 0;
+ left: 0;
}
/***************************************************************************************************/
/* Other toolbar styles */
/***************************************************************************************************/
.toolbarTip {
- background-color: #000000;
- padding: 5px 5px;
- color: #f5f5f5;
- font-size: 11px;
+ background-color: #000000;
+ padding: 5px 5px;
+ color: #f5f5f5;
+ font-size: 11px;
}
div#colorPalette {
- border: 1px solid #bbb4d6;
- display: none;
- position: absolute;
- z-index: 4;
- width: 160px;
- top: 89px;
+ border: 1px solid #bbb4d6;
+ display: none;
+ position: absolute;
+ z-index: 4;
+ width: 160px;
+ top: 89px;
}
div.toolbarPanelLink,
div.toolbarPanelLinkSelectedLink {
- cursor: pointer;
- color: black;
- margin: 1px;
- cursor: pointer;
- font-size: 12px;
- padding: 5px 10px;
- font-weight: bold;
+ cursor: pointer;
+ color: black;
+ margin: 1px;
+ cursor: pointer;
+ font-size: 12px;
+ padding: 5px 10px;
+ font-weight: bold;
}
div.toolbarPanelLink:hover,
div.toolbarPanelLinkSelectedLink {
- cursor: pointer;
- background-color: #efefef;
+ cursor: pointer;
+ background-color: #efefef;
}
.toolbarPaneTip {
- background-color: rgb(228, 226, 210);
- padding: 5px 5px;
- color: #f5f5f5;
- font-size: 11px;
- border-radius: 6px;
- box-shadow: 3px 3px 3px rgba(0, 0, 0, 0.2);
- border: 3px double rgb(190, 190, 190);
-}
\ No newline at end of file
+ background-color: rgb(228, 226, 210);
+ padding: 5px 5px;
+ color: #f5f5f5;
+ font-size: 11px;
+ border-radius: 6px;
+ box-shadow: 3px 3px 3px rgba(0, 0, 0, 0.2);
+ border: 3px double rgb(190, 190, 190);
+}
diff --git a/packages/editor/src/components/toolbar/index.tsx b/packages/editor/src/components/toolbar/index.tsx
index 28340244..2997f7b6 100644
--- a/packages/editor/src/components/toolbar/index.tsx
+++ b/packages/editor/src/components/toolbar/index.tsx
@@ -34,144 +34,131 @@ import { EditorRenderMode } from '@wisemapping/mindplot';
export type ToolbarActionType = 'export' | 'publish' | 'history' | 'print' | 'share' | 'info';
export type ToolbarPropsType = {
- editorMode: EditorRenderMode;
- onAction: (action: ToolbarActionType) => void;
+ editorMode: EditorRenderMode;
+ onAction: (action: ToolbarActionType) => void;
};
export default function Toolbar({
- editorMode: editorMode,
- onAction,
+ editorMode: editorMode,
+ onAction,
}: ToolbarPropsType): React.ReactElement {
- const intl = useIntl();
- return (
-
+
+ {intl.formatMessage({ id: 'login.signup', defaultMessage: 'Sign Up' })}
+
+
)}
-
- );
+
+
+
-
-
- {intl.formatMessage({ id: 'login.signup', defaultMessage: 'Sign Up' })}
-
-
-
+ {intl.formatMessage({ id: 'editor.try-welcome' })}
-{intl.formatMessage({ id: 'editor.try-welcome-description' })}
- -+ {intl.formatMessage({ id: titleKey })} {intl.formatMessage({ id: descriptionKey })} +
+ {showSignupButton && ( + +
-
- onAction('export')}
- >
- 
-
- {(editorMode === 'edition-owner' || editorMode === 'edition-editor' || editorMode === 'edition-viewer') && (
- onAction('print')}
- >
- 
-
- )}
- onAction('info')}
- >
- 
-
- {editorMode === 'edition-owner' && (
- <>
- onAction('history')}
- >
- 
-
- onAction('publish')}
- >
- 
-
-
- )}
- {(editorMode === 'edition-owner' || editorMode === 'edition-editor') && (
-
- 
-
- )}
- {editorMode === 'edition-owner' && (
- onAction('share')}>
- {intl.formatMessage({ id: 'action.share', defaultMessage: 'Share' })}
-
-
- )}
-
+ const intl = useIntl();
+ return (
+
+
+ );
}
diff --git a/packages/editor/src/components/toolbar/styled.ts b/packages/editor/src/components/toolbar/styled.ts
index 9b49513a..28167d7c 100644
--- a/packages/editor/src/components/toolbar/styled.ts
+++ b/packages/editor/src/components/toolbar/styled.ts
@@ -1,50 +1,50 @@
import styled from 'styled-components';
export const HeaderContainer = styled.div`
- width: 100%;
- height: 0px;
- background: #202020;
- z-index: 1000;
- position: absolute;
- top: 0;
- display: flex;
+ width: 100%;
+ height: 0px;
+ background: #202020;
+ z-index: 1000;
+ position: absolute;
+ top: 0;
+ display: flex;
`;
export const ToolbarContainer = styled.div`
- display: flex;
- flex-direction: column;
- flex: 1;
+ display: flex;
+ flex-direction: column;
+ flex: 1;
`;
export const ToolbarButton = styled.div`
- width: 28px;
- height: 28px;
- text-align: center;
- z-index: 4;
- margin-top: 3px;
- padding-top: 2px;
- padding-left: 2px;
- margin-left: 3px;
- display: inline-block;
- `;
-
+ width: 28px;
+ height: 28px;
+ text-align: center;
+ z-index: 4;
+ margin-top: 3px;
+ padding-top: 2px;
+ padding-left: 2px;
+ margin-left: 3px;
+ display: inline-block;
+`;
+
export const ToolbarButtonExt = styled(ToolbarButton)`
- width: 40px;
- text-align: left;
- padding-left: 5px;
+ width: 40px;
+ text-align: left;
+ padding-left: 5px;
`;
export const AccountButton = styled.div`
- display: inline-block;
- margin-top: 3px;
+ display: inline-block;
+ margin-top: 3px;
`;
export const ToolbarRightContainer = styled.div`
- flex-shrink: 1;
- display: flex;
- flex-direction: row;
- align-items: center;
- justify-content: flex-end;
- height: 100%;
- overflow: hidden;
-`;
\ No newline at end of file
+ flex-shrink: 1;
+ display: flex;
+ flex-direction: row;
+ align-items: center;
+ justify-content: flex-end;
+ height: 100%;
+ overflow: hidden;
+`;
diff --git a/packages/editor/src/global-styled.css b/packages/editor/src/global-styled.css
index 06d15195..81ba233a 100644
--- a/packages/editor/src/global-styled.css
+++ b/packages/editor/src/global-styled.css
@@ -1,221 +1,280 @@
/********************************************************************************/
/* Header & Toolbar Styles */
/********************************************************************************/
-@import "bootstrap-prefix.min.css";
-@import "bootstrap-fixes.css";
+@import 'bootstrap-prefix.min.css';
+@import 'bootstrap-fixes.css';
html {
- /* avoid bootstrap overriding font-size and breaking Mui */
- font-size: initial;
+ /* avoid bootstrap overriding font-size and breaking Mui */
+ font-size: initial;
}
-div#mindplot {
- position: relative;
- top: 50px;
- left: 0;
- width: 100%;
- height: 100%;
- border: 0;
- overflow: hidden;
- opacity: 1;
- background-color: #f2f2f2;
- background-image: linear-gradient(#ebe9e7 1px, transparent 1px), linear-gradient(to right, #ebe9e7 1px, #f2f2f2 1px);
- background-size: 50px 50px;
+body {
+ width: 100vw;
+ height: 100vh;
+ min-width: 100vw;
+ min-height: 100vh;
+ margin: 0px;
+}
+
+.mindplot-root {
+ width: 100%;
+ height: 100%;
}
.notesTip {
- background-color: #dfcf3c;
- padding: 5px 15px;
- color: #666666;
- /*font-weight: bold;*/
- /*width: 100px;*/
- font-size: 13px;
- -moz-border-radius: 3px;
- -webkit-border-radius: 3px;
- border-radius: 3px;
- box-shadow: 5px 5px 5px rgba(0, 0, 0, 0.2);
+ background-color: #dfcf3c;
+ padding: 5px 15px;
+ color: #666666;
+ /*font-weight: bold;*/
+ /*width: 100px;*/
+ font-size: 13px;
+ -moz-border-radius: 3px;
+ -webkit-border-radius: 3px;
+ border-radius: 3px;
+ box-shadow: 5px 5px 5px rgba(0, 0, 0, 0.2);
}
.linkTip {
- background-color: #dfcf3c;
- padding: 5px 15px;
- color: #666666;
- /*font-weight: bold;*/
- /*width: 100px;*/
- font-size: 13px;
- -moz-border-radius: 3px;
- -webkit-border-radius: 3px;
- border-radius: 3px;
- box-shadow: 5px 5px 5px rgba(0, 0, 0, 0.2);
+ background-color: #dfcf3c;
+ padding: 5px 15px;
+ color: #666666;
+ /*font-weight: bold;*/
+ /*width: 100px;*/
+ font-size: 13px;
+ -moz-border-radius: 3px;
+ -webkit-border-radius: 3px;
+ border-radius: 3px;
+ box-shadow: 5px 5px 5px rgba(0, 0, 0, 0.2);
}
.keyboardShortcutTip {
- background-color: black;
- padding: 5px 15px;
- color: white;
- font-weight: bold;
- font-size: 11px;
+ background-color: black;
+ padding: 5px 15px;
+ color: white;
+ font-weight: bold;
+ font-size: 11px;
}
/** */
/* Modal dialogs definitions */
div.modalDialog {
- position: fixed;
- top: 50%;
- left: 50%;
- z-index: 11000;
- width: 500px;
- margin: -250px 0 0 -250px;
- background-color: #ffffff;
- border: 1px solid #999;
- padding: 10px;
- overflow: auto;
- -webkit-background-clip: padding-box;
- -moz-background-clip: padding-box;
- background-clip: padding-box;
+ position: fixed;
+ top: 50%;
+ left: 50%;
+ z-index: 11000;
+ width: 500px;
+ margin: -250px 0 0 -250px;
+ background-color: #ffffff;
+ border: 1px solid #999;
+ padding: 10px;
+ overflow: auto;
+ -webkit-background-clip: padding-box;
+ -moz-background-clip: padding-box;
+ background-clip: padding-box;
}
div.modalDialog .content {
- padding: 5px 5px;
+ padding: 5px 5px;
}
div.modalDialog .title {
- font-weight: bold;
- text-shadow: 1px 1px 0 #fff;
- border-bottom: 1px solid #eee;
- padding: 5px 15px;
- font-size: 18px;
+ font-weight: bold;
+ text-shadow: 1px 1px 0 #fff;
+ border-bottom: 1px solid #eee;
+ padding: 5px 15px;
+ font-size: 18px;
}
/*--- End Modal Dialog Form ---*/
.publishModalDialog .content {
- height: 420px;
+ height: 420px;
}
.exportModalDialog .content {
- height: 400px;
+ height: 400px;
}
.shareModalDialog .content {
- height: 440px;
+ height: 440px;
}
div.shareModalDialog {
- width: 550px;
+ width: 550px;
}
.panelIcon {
- width: 20px;
- height: 20px;
- margin-left: 4px;
- margin-top: 3px;
- cursor: pointer
+ width: 20px;
+ height: 20px;
+ margin-left: 4px;
+ margin-top: 3px;
+ cursor: pointer;
}
.panelIcon:hover {
- background-color: #efefef;
+ background-color: #efefef;
}
.wise-editor .popover {
- font-size: 13px;
- max-width: none;
+ font-size: 13px;
+ max-width: none;
}
#floating-panel {
- position: fixed;
- display: flex;
- flex-direction: column;
- align-items: flex-end;
- bottom: 20px;
- right: 20px;
- align-items: stretch;
+ position: fixed;
+ display: flex;
+ flex-direction: column;
+ align-items: flex-end;
+ bottom: 20px;
+ right: 20px;
+ align-items: stretch;
}
div#position {
- margin-top: 5px;
+ margin-top: 5px;
}
#position-button {
- cursor: pointer;
- border: solid black 1px;
- width: 40px;
- height: 40px;
- background-position: center;
- background-repeat: no-repeat;
- background-size: 40px 40px;
- background-color: #FFF;
- border-radius: 8px;
+ cursor: pointer;
+ border: solid black 1px;
+ width: 40px;
+ height: 40px;
+ background-position: center;
+ background-repeat: no-repeat;
+ background-size: 40px 40px;
+ background-color: #fff;
+ border-radius: 8px;
+ padding: 0;
+}
+
+#position-button>img {
+ vertical-align: middle;
}
#zoom-button {
- width: 40px;
- border: 0;
+ width: 40px;
+ border: 0;
}
#zoom-plus,
#zoom-minus {
- border: solid black 1px;
- height: 40px;
- width: 40px;
- background-repeat: no-repeat;
- background-size: 40px 40px;
- background-position: center;
- cursor: pointer;
- background-color: #FFF;
+ border: solid black 1px;
+ height: 40px;
+ width: 40px;
+ background-repeat: no-repeat;
+ background-size: 40px 40px;
+ background-position: center;
+ cursor: pointer;
+ background-color: #fff;
+ padding: 0;
}
+#zoom-plus,
+#zoom-minus>img {
+ vertical-align: middle;
+}
+
+
#zoom-plus {
- border-radius: 8px 8px 0 0;
+ border-radius: 8px 8px 0 0;
}
#zoom-minus {
- border-radius: 0 0 8px 8px;
+ border-radius: 0 0 8px 8px;
}
-div#shotcuts > img{
- margin: 20px 0;
- width: 40px;
- height: 40px;
+div#shotcuts>img {
+ margin: 20px 0;
+ width: 40px;
+ height: 40px;
}
#keyboardTable {
- font-family: Arial, verdana, serif;
- font-size: 13px;
- width: 100%;
+ font-family: Arial, verdana, serif;
+ font-size: 13px;
+ width: 100%;
}
#keyboardTable td {
- padding: 3px;
- white-space: nowrap;
+ padding: 3px;
+ white-space: nowrap;
}
#keyboardTable th {
- padding: 5px;
- white-space: nowrap;
+ padding: 5px;
+ white-space: nowrap;
}
#keyboardTable th {
- background-color: #000000;
- color: #ffffff;
+ background-color: #000000;
+ color: #ffffff;
}
-div#tryInfoPanel {
- position: absolute;
- margin: auto;
- text-align: center;
- top: 80px;
- left: 20px;
- width: 200px;
- padding: 20px;
+.tryInfoPanel {
+ position: absolute;
+ text-align: center;
+ left: 0;
+ right: 0;
+ background-color: white;
+ border: solid 2px #ffa800;
+ margin: auto;
+ width: 99%;
+ border-radius: 9px;
+ width: 96%;
+}
+
+@media (min-width: 600px) {
+ .tryInfoPanel {
font-size: 15px;
- border-radius: 9px;
- background-color: white;
- border: solid 2px #ffa800;
+ }
}
-#tryInfoPanel > p {
- justify-content: center;
- padding-bottom: 20px;
+@media (max-width: 600px) {
+ .tryInfoPanel {
+ font-size: 13px;
+ }
+}
+
+.tryInfoPanel .tryInfoPanelInner {
+ padding-top: 10px;
+ padding-bottom: 10px;
+ padding-left: 5px;
+ padding-right: 5px;
+}
+
+.tryInfoPanel .tryInfoPanelInner .closeButton {
+ position: absolute;
+ top: 5px;
+ right: 5px;
+}
+
+.tryInfoPanel .tryInfoPanelInner .closeButton button {
+ cursor: pointer;
+ border-style: hidden;
+ background-color: transparent;
+ padding: 0px;
+}
+
+.tryInfoPanel .tryInfoPanelInner .closeButton button img {
+ width: 18px;
+ height: 18px;
+ filter: invert(73%) sepia(21%) saturate(4699%) hue-rotate(357deg) brightness(98%) contrast(108%);
+}
+
+.tryInfoPanelWithToolbar {
+ top: 55px;
+}
+
+.tryInfoPanelWithoutToolbar {
+ top: 5px;
+}
+
+.tryInfoPanelClosed {
+ display: none;
+}
+
+.tryInfoPanel>p {
+ justify-content: center;
}
\ No newline at end of file
diff --git a/packages/editor/src/index.tsx b/packages/editor/src/index.tsx
index eed9732f..84b9f4ac 100644
--- a/packages/editor/src/index.tsx
+++ b/packages/editor/src/index.tsx
@@ -1,122 +1,175 @@
-import React, { useEffect } from 'react';
+import React, { useEffect, useRef, useState } from 'react';
import Toolbar, { ToolbarActionType } from './components/toolbar';
import Footer from './components/footer';
import { IntlProvider } from 'react-intl';
import {
- $notify,
- buildDesigner,
- PersistenceManager,
- DesignerOptionsBuilder,
- Designer,
- DesignerKeyboard,
- EditorRenderMode,
+ $notify,
+ buildDesigner,
+ PersistenceManager,
+ DesignerOptionsBuilder,
+ Designer,
+ DesignerKeyboard,
+ EditorRenderMode,
+ MindplotWebComponentInterface,
+ Mindmap,
+ MockPersistenceManager,
+ LocalStorageManager,
+ RESTPersistenceManager,
+ TextExporterFactory,
+ ImageExporterFactory,
+ Exporter,
+ Importer,
+ TextImporterFactory,
} from '@wisemapping/mindplot';
import './global-styled.css';
import I18nMsg from './classes/i18n-msg';
import Menu from './classes/menu/Menu';
+import BootstrapWidgetManager from './classes/bootstrap/BootstrapWidgetManager';
+
+require('../../../libraries/bootstrap/js/bootstrap.min');
declare global {
- // used in mindplot
- var designer: Designer;
- var accountEmail: string;
+ // used in mindplot
+ var designer: Designer;
+ var accountEmail: string;
+}
+
+declare global {
+ namespace JSX {
+ interface IntrinsicElements {
+ ['mindplot-component']: MindplotWebComponentInterface;
+ }
+ }
}
export type EditorOptions = {
- mode: EditorRenderMode,
- locale: string,
- zoom?: number,
- locked?: boolean,
- lockedMsg?: string;
- mapTitle: string;
- enableKeyboardEvents: boolean;
-}
-
-export type EditorProps = {
- mapId: string;
- options: EditorOptions;
- persistenceManager: PersistenceManager;
- onAction: (action: ToolbarActionType) => void;
- onLoad?: (designer: Designer) => void;
+ mode: EditorRenderMode;
+ locale: string;
+ zoom?: number;
+ locked?: boolean;
+ lockedMsg?: string;
+ mapTitle: string;
+ enableKeyboardEvents: boolean;
};
-const Editor = ({
- mapId,
- options,
- persistenceManager,
- onAction,
- onLoad,
-}: EditorProps) => {
+export {
+ PersistenceManager,
+ DesignerOptionsBuilder,
+ Designer,
+ DesignerKeyboard,
+ EditorRenderMode,
+ Mindmap,
+ MockPersistenceManager,
+ LocalStorageManager,
+ RESTPersistenceManager,
+ TextExporterFactory,
+ ImageExporterFactory,
+ Exporter,
+ Importer,
+ TextImporterFactory,
+};
- useEffect(() => {
- // Change page title ...
- document.title = `${options.mapTitle} | WiseMapping `;
+export type EditorProps = {
+ mapId: string;
+ options: EditorOptions;
+ persistenceManager: PersistenceManager;
+ onAction: (action: ToolbarActionType) => void;
+ onLoad?: (designer: Designer) => void;
+};
- // Load mindmap ...
- const designer = onLoadDesigner(mapId, options, persistenceManager);
- // Has extended actions been customized ...
- if (onLoad) {
- onLoad(designer);
- }
+const Editor = ({ mapId, options, persistenceManager, onAction, onLoad }: EditorProps) => {
+ const [isMobile, setIsMobile] = useState(undefined);
+ const mindplotComponent: any = useRef();
- // Load mindmap ...
- const instance = PersistenceManager.getInstance();
- const mindmap = instance.load(mapId);
- designer.loadMap(mindmap);
+ useEffect(() => {
+ // Change page title ...
+ document.title = `${options.mapTitle} | WiseMapping `;
- if (options.locked) {
- $notify(options.lockedMsg, false);
- }
- }, []);
+ // Load mindmap ...
- useEffect(() => {
- if (options.enableKeyboardEvents) {
- DesignerKeyboard.resume();
- } else {
- DesignerKeyboard.pause();
- }
- }, [options.enableKeyboardEvents]);
+ const designer = onLoadDesigner(mapId, options, persistenceManager);
+ // Has extended actions been customized ...
+ if (onLoad) {
+ onLoad(designer);
+ }
- const onLoadDesigner = (mapId: string, options: EditorOptions, persistenceManager: PersistenceManager): Designer => {
- const buildOptions = DesignerOptionsBuilder.buildOptions({
- persistenceManager,
- mode: options.mode,
- mapId: mapId,
- container: 'mindplot',
- zoom: options.zoom,
- locale: options.locale,
- });
+ mindplotComponent.current.loadMap(mapId);
- // Build designer ...
- const result = buildDesigner(buildOptions);
+ setIsMobile(checkMobile());
- // Register toolbar event ...
- if (options.mode === 'edition-owner' || options.mode === 'edition-editor' || options.mode === 'edition-viewer' || options.mode === 'showcase') {
- const menu = new Menu(designer, 'toolbar');
+ if (options.locked) {
+ $notify(options.lockedMsg, false);
+ }
+ }, []);
- // If a node has focus, focus can be move to another node using the keys.
- designer.cleanScreen = () => {
- menu.clear();
- };
- }
- return result;
+ useEffect(() => {
+ if (options.enableKeyboardEvents) {
+ DesignerKeyboard.resume();
+ } else {
+ DesignerKeyboard.pause();
+ }
+ }, [options.enableKeyboardEvents]);
- };
+ const checkMobile = () => {
+ const check =
+ /(android|bb\d+|meego).+mobile|avantgo|bada\/|blackberry|blazer|compal|elaine|fennec|hiptop|iemobile|ip(hone|od)|ipad|iris|kindle|Android|Silk|lge |maemo|midp|mmp|netfront|opera m(ob|in)i|palm( os)?|phone|p(ixi|re)\/|plucker|pocket|psp|series(4|6)0|symbian|treo|up\.(browser|link)|vodafone|wap|windows (ce|phone)|xda|xiino/i.test(
+ navigator.userAgent.toLowerCase(),
+ ) ||
+ /1207|6310|6590|3gso|4thp|50[1-6]i|770s|802s|a wa|abac|ac(er|oo|s\-)|ai(ko|rn)|al(av|ca|co)|amoi|an(ex|ny|yw)|aptu|ar(ch|go)|as(te|us)|attw|au(di|\-m|r |s )|avan|be(ck|ll|nq)|bi(lb|rd)|bl(ac|az)|br(e|v)w|bumb|bw\-(n|u)|c55\/|capi|ccwa|cdm\-|cell|chtm|cldc|cmd\-|co(mp|nd)|craw|da(it|ll|ng)|dbte|dc\-s|devi|dica|dmob|do(c|p)o|ds(12|\-d)|el(49|ai)|em(l2|ul)|er(ic|k0)|esl8|ez([4-7]0|os|wa|ze)|fetc|fly(\-|_)|g1 u|g560|gene|gf\-5|g\-mo|go(\.w|od)|gr(ad|un)|haie|hcit|hd\-(m|p|t)|hei\-|hi(pt|ta)|hp( i|ip)|hs\-c|ht(c(\-| |_|a|g|p|s|t)|tp)|hu(aw|tc)|i\-(20|go|ma)|i230|iac( |\-|\/)|ibro|idea|ig01|ikom|im1k|inno|ipaq|iris|ja(t|v)a|jbro|jemu|jigs|kddi|keji|kgt( |\/)|klon|kpt |kwc\-|kyo(c|k)|le(no|xi)|lg( g|\/(k|l|u)|50|54|\-[a-w])|libw|lynx|m1\-w|m3ga|m50\/|ma(te|ui|xo)|mc(01|21|ca)|m\-cr|me(rc|ri)|mi(o8|oa|ts)|mmef|mo(01|02|bi|de|do|t(\-| |o|v)|zz)|mt(50|p1|v )|mwbp|mywa|n10[0-2]|n20[2-3]|n30(0|2)|n50(0|2|5)|n7(0(0|1)|10)|ne((c|m)\-|on|tf|wf|wg|wt)|nok(6|i)|nzph|o2im|op(ti|wv)|oran|owg1|p800|pan(a|d|t)|pdxg|pg(13|\-([1-8]|c))|phil|pire|pl(ay|uc)|pn\-2|po(ck|rt|se)|prox|psio|pt\-g|qa\-a|qc(07|12|21|32|60|\-[2-7]|i\-)|qtek|r380|r600|raks|rim9|ro(ve|zo)|s55\/|sa(ge|ma|mm|ms|ny|va)|sc(01|h\-|oo|p\-)|sdk\/|se(c(\-|0|1)|47|mc|nd|ri)|sgh\-|shar|sie(\-|m)|sk\-0|sl(45|id)|sm(al|ar|b3|it|t5)|so(ft|ny)|sp(01|h\-|v\-|v )|sy(01|mb)|t2(18|50)|t6(00|10|18)|ta(gt|lk)|tcl\-|tdg\-|tel(i|m)|tim\-|t\-mo|to(pl|sh)|ts(70|m\-|m3|m5)|tx\-9|up(\.b|g1|si)|utst|v400|v750|veri|vi(rg|te)|vk(40|5[0-3]|\-v)|vm40|voda|vulc|vx(52|53|60|61|70|80|81|83|85|98)|w3c(\-| )|webc|whit|wi(g |nc|nw)|wmlb|wonu|x700|yas\-|your|zeto|zte\-/i.test(
+ navigator.userAgent.toLowerCase().substring(0, 4),
+ );
+ return check;
+ };
- const locale = options.locale;
- const msg = I18nMsg.loadLocaleData(locale);
- const mindplotStyle = (options.mode === 'viewonly') ? { top: 0 } : { top: 'inherit' };
- return (
-
- {(options.mode !== 'viewonly') &&
-
- );
-}
+ const onLoadDesigner = (
+ mapId: string,
+ options: EditorOptions,
+ persistenceManager: PersistenceManager,
+ ): Designer => {
+ mindplotComponent.current.buildDesigner(persistenceManager, new BootstrapWidgetManager());
+
+ // Build designer ...
+ const result = mindplotComponent.current && mindplotComponent.current.getDesigner();
+
+ // Register toolbar event ...
+ if (
+ options.mode === 'edition-owner' ||
+ options.mode === 'edition-editor' ||
+ options.mode === 'edition-viewer' ||
+ options.mode === 'showcase'
+ ) {
+ const menu = new Menu(designer, 'toolbar');
+
+ // If a node has focus, focus can be move to another node using the keys.
+ designer.cleanScreen = () => {
+ menu.clear();
+ };
+ }
+ return result;
+ };
+
+ const locale = options.locale;
+ const msg = I18nMsg.loadLocaleData(locale);
+ const mindplotStyle = options.mode === 'viewonly' ? { top: 0 } : { top: 'inherit' };
+ // if the Toolbar is not hidden before the variable 'isMobile' is defined, it appears intermittently when the page loads
+ // if the Toolbar is not rendered, Menu.ts cant find buttons for create event listeners
+ // so, with this hack the Toolbar is rendered but no visible until the variable 'isMobile' is defined
+ const toolbarContainerStyle = isMobile === undefined ? { display: 'none' } : { display: 'block' };
+ return (
+
+
+ );
+};
export default Editor;
diff --git a/packages/editor/test/playground/index.html b/packages/editor/test/playground/index.html
index ebe99995..bde08e82 100644
--- a/packages/editor/test/playground/index.html
+++ b/packages/editor/test/playground/index.html
@@ -2,31 +2,55 @@
-
-
- @wisemapping/editor - Playground
-
+ .section {
+ font-weight: bold;
+ }
+
+ tbody tr td:first-child {
+ width: 20%;
+ }
+
- WiseMapping - Editor
+
+
+
+
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/packages/editor/test/playground/map-render/html/viewmode.html b/packages/editor/test/playground/map-render/html/viewmode.html
index d2351e79..6a1a2341 100644
--- a/packages/editor/test/playground/map-render/html/viewmode.html
+++ b/packages/editor/test/playground/map-render/html/viewmode.html
@@ -4,35 +4,14 @@
WiseMapping - View Mode
+
-
- console.log('action called:', action)}
+ onLoad={initialization}
+ />,
+ document.getElementById('root'),
+);
diff --git a/packages/editor/test/playground/map-render/js/viewmode.tsx b/packages/editor/test/playground/map-render/js/viewmode.tsx
index af21be3c..bd338610 100644
--- a/packages/editor/test/playground/map-render/js/viewmode.tsx
+++ b/packages/editor/test/playground/map-render/js/viewmode.tsx
@@ -5,9 +5,8 @@ import Editor, { EditorOptions } from '../../../../src/index';
import { LocalStorageManager, Designer } from '@wisemapping/mindplot';
const initialization = (designer: Designer) => {
-
designer.addEvent('loadSuccess', () => {
- const elem = document.getElementById('mindplot');
+ const elem = document.getElementById('mindmap-comp');
if (elem) {
elem.classList.add('ready');
}
@@ -25,7 +24,6 @@ const initialization = (designer: Designer) => {
option.selected = option.value === mapId;
});
}
-
});
};
@@ -36,10 +34,10 @@ const persistence = new LocalStorageManager('samples/{id}.wxml', false);
const options: EditorOptions = {
zoom: 0.8,
locked: false,
- mapTitle: "Develop WiseMapping",
+ mapTitle: 'Develop WiseMapping',
mode: 'viewonly',
locale: 'en',
- enableKeyboardEvents: true
+ enableKeyboardEvents: true,
};
ReactDOM.render(
diff --git a/packages/editor/webpack.common.js b/packages/editor/webpack.common.js
index a5adedc2..7e8f60a3 100644
--- a/packages/editor/webpack.common.js
+++ b/packages/editor/webpack.common.js
@@ -10,23 +10,23 @@ module.exports = {
},
},
stats: {
- errorDetails: true
+ errorDetails: true,
},
entry: {
- "editor.bundle": path.join(__dirname, 'src', 'index.tsx')
+ 'editor.bundle': path.join(__dirname, 'src', 'index.tsx'),
},
mode: 'development',
devtool: 'source-map',
target: 'web',
resolve: {
- extensions: ['.ts', '.tsx', '.js', '.jsx']
+ extensions: ['.ts', '.tsx', '.js', '.jsx'],
},
module: {
rules: [
{
test: /\.tsx?$/,
use: 'ts-loader',
- exclude: '/node_modules/'
+ exclude: '/node_modules/',
},
{
test: /\.(png|jpe?g|gif|svg)$/,
@@ -36,14 +36,15 @@ module.exports = {
test: /\.(js|jsx)$/,
exclude: /node_modules/,
use: ['babel-loader'],
- }, {
+ },
+ {
test: /\.css$/i,
- loader: 'style-loader'
+ loader: 'style-loader',
},
{
test: /\.css$/,
loader: 'css-loader',
- }
+ },
],
},
};
diff --git a/packages/editor/webpack.playground.js b/packages/editor/webpack.playground.js
index 3f4acdf5..a9d89046 100644
--- a/packages/editor/webpack.playground.js
+++ b/packages/editor/webpack.playground.js
@@ -10,6 +10,7 @@ const playgroundConfig = {
entry: {
viewmode: path.resolve(__dirname, './test/playground/map-render/js/viewmode'),
editor: path.resolve(__dirname, './test/playground/map-render/js/editor'),
+ showcase: path.resolve(__dirname, './test/playground/map-render/js/showcase'),
},
output: {
path: path.resolve(__dirname, 'test/playground/dist'),
@@ -47,6 +48,11 @@ const playgroundConfig = {
filename: 'editor.html',
template: 'test/playground/map-render/html/editor.html',
}),
+ new HtmlWebpackPlugin({
+ chunks: ['showcase'],
+ filename: 'showcase.html',
+ template: 'test/playground/map-render/html/showcase.html',
+ }),
],
};
diff --git a/packages/editor/webpack.prod.js b/packages/editor/webpack.prod.js
index 4978aaf5..d7d0a84f 100644
--- a/packages/editor/webpack.prod.js
+++ b/packages/editor/webpack.prod.js
@@ -9,12 +9,10 @@ const prodConfig = {
},
externals: {
react: 'react',
- "react-dom": 'react-dom',
- "react-intl": 'react-intl',
+ 'react-dom': 'react-dom',
+ 'react-intl': 'react-intl',
},
- plugins: [
- new CleanWebpackPlugin(),
- ]
+ plugins: [new CleanWebpackPlugin()],
};
module.exports = merge(common, prodConfig);
diff --git a/packages/mindplot/.eslintrc.json b/packages/mindplot/.eslintrc.json
index d812e4f8..3fae3a03 100644
--- a/packages/mindplot/.eslintrc.json
+++ b/packages/mindplot/.eslintrc.json
@@ -22,6 +22,23 @@
"@typescript-eslint"
],
"rules": {
+ // ignore errors when a line finishes with (setting this value to 0 ignores all errors)
+ "operator-linebreak": [
+ "error", "after", {
+ "overrides": {
+ "+": "ignore",
+ "-": "ignore",
+ ":": "ignore",
+ "*": "ignore",
+ "?": "ignore",
+ ">": "ignore",
+ "||": "ignore",
+ "&&": "ignore",
+ "(": "ignore"
+ }
+ }
+ ],
+ "object-curly-newline": "off",
"no-underscore-dangle": "off",
"no-plusplus": "off",
"no-param-reassign": "off",
@@ -44,7 +61,8 @@
"ts": "never",
"tsx": "never"
}
- ]
+ ],
+ "implicit-arrow-linebreak": "off"
},
"settings": {
"import/resolver": {
@@ -59,4 +77,4 @@
}
}
}
-}
\ No newline at end of file
+}
diff --git a/packages/mindplot/README.md b/packages/mindplot/README.md
index 28f360cb..fa6289d1 100644
--- a/packages/mindplot/README.md
+++ b/packages/mindplot/README.md
@@ -1,7 +1,78 @@
# WiseMapping Mindplot
-WiseMapping Mindplot module is the core mind map rerendering of WiseMapping. This lighway library allows eithe edition and visualization of saves mindmaps.
+WiseMapping Mindplot module is the core mind map rerendering of WiseMapping. This lighway library allows eithe edition and visualization of saved mindmaps.
## Usage
+A WebComponent implementation for mindplot designer is available.
+This component is registered as mindplot-component in customElements API. (see https://developer.mozilla.org/en-US/docs/Web/API/CustomElementRegistry/define)
+For use it you need to import minplot.js and put in your DOM a = mindmapTopic.getFeatures();
- branches
- .forEach((feature: FeatureModel) => {
- const type = feature.getType();
+ branches.forEach((feature: FeatureModel) => {
+ const type = feature.getType();
- if (type === 'link') {
- const link = feature as LinkModel;
- freemindNode.setLink(link.getUrl());
- }
+ if (type === 'link') {
+ const link = feature as LinkModel;
+ freemindNode.setLink(link.getUrl());
+ }
- if (type === 'note') {
- const note = feature as NoteModel;
- const richcontent: Richcontent = this.buildRichcontent(note.getText(), 'NOTE');
- freemindNode.setArrowlinkOrCloudOrEdge(richcontent);
- }
+ if (type === 'note') {
+ const note = feature as NoteModel;
+ const richcontent: Richcontent = this.buildRichcontent(note.getText(), 'NOTE');
+ freemindNode.setArrowlinkOrCloudOrEdge(richcontent);
+ }
- if (type === 'icon') {
- const icon = feature as IconModel;
- const freemindIcon: Icon = new Icon();
- freemindIcon.setBuiltin(icon.getIconType());
- freemindNode.setArrowlinkOrCloudOrEdge(freemindIcon);
- }
- });
+ if (type === 'icon') {
+ const icon = feature as IconModel;
+ const freemindIcon: Icon = new Icon();
+ freemindIcon.setBuiltin(icon.getIconType());
+ freemindNode.setArrowlinkOrCloudOrEdge(freemindIcon);
+ }
+ });
}
private addEdgeNode(freemainMap: FreeminNode, mindmapTopic: INodeModel): void {
@@ -286,7 +305,9 @@ class FreemindExporter extends Exporter {
const g: string = rgb[1].trim();
const b: string = rgb[2].trim();
- result = `#${r.length === 1 ? `0${r}` : r}${g.length === 1 ? `0${g}` : g}${b.length === 1 ? `0${b}` : b}`;
+ result = `#${r.length === 1 ? `0${r}` : r}${g.length === 1 ? `0${g}` : g}${
+ b.length === 1 ? `0${b}` : b
+ }`;
}
}
return result;
diff --git a/packages/mindplot/src/components/export/ImageExporterFactory.ts b/packages/mindplot/src/components/export/ImageExporterFactory.ts
index 54111437..7d95d61a 100644
--- a/packages/mindplot/src/components/export/ImageExporterFactory.ts
+++ b/packages/mindplot/src/components/export/ImageExporterFactory.ts
@@ -21,7 +21,13 @@ import SVGExporter from './SVGExporter';
type imageType = 'svg' | 'png' | 'jpg';
class ImageExpoterFactory {
- static create(type: imageType, svgElement: Element, width: number, height: number, adjustToFit = true): Exporter {
+ static create(
+ type: imageType,
+ svgElement: Element,
+ width: number,
+ height: number,
+ adjustToFit = true,
+ ): Exporter {
let result: Exporter;
switch (type) {
case 'svg': {
diff --git a/packages/mindplot/src/components/export/SVGExporter.ts b/packages/mindplot/src/components/export/SVGExporter.ts
index 8613f9da..f72de06c 100644
--- a/packages/mindplot/src/components/export/SVGExporter.ts
+++ b/packages/mindplot/src/components/export/SVGExporter.ts
@@ -39,8 +39,7 @@ class SVGExporter extends Exporter {
export(): Promise {
// Replace all images for in-line images ...
- let svgTxt: string = new XMLSerializer()
- .serializeToString(this.svgElement);
+ let svgTxt: string = new XMLSerializer().serializeToString(this.svgElement);
svgTxt = SVGExporter.prolog + svgTxt;
// Are namespace declared ?. Otherwise, force the declaration ...
@@ -59,39 +58,37 @@ class SVGExporter extends Exporter {
svgDoc = this._normalizeToFit(svgDoc);
}
- const result = new XMLSerializer()
- .serializeToString(svgDoc);
+ const result = new XMLSerializer().serializeToString(svgDoc);
return Promise.resolve(result);
}
- private _calcualteDimensions(): { minX: number, maxX: number, minY: number, maxY: number } {
+ private _calcualteDimensions(): { minX: number; maxX: number; minY: number; maxY: number } {
// Collect all group elements ...
- const rectElems = Array.from(document.querySelectorAll('g>rect'));
- const translates: SizeType[] = rectElems
- .map((rect: Element) => {
- const g = rect.parentElement;
- const transformStr = g.getAttribute('transform');
+ const rectElems = Array.from(this.svgElement.querySelectorAll('g>rect'));
+ const translates: SizeType[] = rectElems.map((rect: Element) => {
+ const g = rect.parentElement;
+ const transformStr = g.getAttribute('transform');
- // Looking to parse translate(220.00000,279.00000) scale(1.00000,1.00000)
- const match = transformStr.match(SVGExporter.regexpTranslate);
- let result: SizeType = { width: 0, height: 0 };
- if (match !== null) {
- result = { width: Number.parseFloat(match[1]), height: Number.parseFloat(match[2]) };
+ // Looking to parse translate(220.00000,279.00000) scale(1.00000,1.00000)
+ const match = transformStr.match(SVGExporter.regexpTranslate);
+ let result: SizeType = { width: 0, height: 0 };
+ if (match !== null) {
+ result = { width: Number.parseFloat(match[1]), height: Number.parseFloat(match[2]) };
- // Add rect size ...
- if (result.width > 0) {
- const rectWidth = Number.parseFloat(rect.getAttribute('width'));
- result.width += rectWidth;
- }
-
- if (result.height > 0) {
- const rectHeight = Number.parseFloat(rect.getAttribute('height'));
- result.height += rectHeight;
- }
+ // Add rect size ...
+ if (result.width > 0) {
+ const rectWidth = Number.parseFloat(rect.getAttribute('width'));
+ result.width += rectWidth;
}
- return result;
- });
+
+ if (result.height > 0) {
+ const rectHeight = Number.parseFloat(rect.getAttribute('height'));
+ result.height += rectHeight;
+ }
+ }
+ return result;
+ });
// Find max and mins ...
const widths = translates.map((t) => t.width).sort((a, b) => a - b);
@@ -104,14 +101,15 @@ class SVGExporter extends Exporter {
const maxY = heights[heights.length - 1] + SVGExporter.padding;
return {
- minX, maxX, minY, maxY,
+ minX,
+ maxX,
+ minY,
+ maxY,
};
}
getImgSize(): SizeType {
- const {
- minX, maxX, minY, maxY,
- } = this._calcualteDimensions();
+ const { minX, maxX, minY, maxY } = this._calcualteDimensions();
let width: number = maxX + Math.abs(minX);
let height: number = maxY + Math.abs(minY);
@@ -127,9 +125,7 @@ class SVGExporter extends Exporter {
}
private _normalizeToFit(document: Document): Document {
- const {
- minX, maxX, minY, maxY,
- } = this._calcualteDimensions();
+ const { minX, maxX, minY, maxY } = this._calcualteDimensions();
const svgElem = document.firstChild as Element;
const width = maxX + Math.abs(minX);
diff --git a/packages/mindplot/src/components/export/TxtExporter.ts b/packages/mindplot/src/components/export/TxtExporter.ts
index 3356faec..5f02d63b 100644
--- a/packages/mindplot/src/components/export/TxtExporter.ts
+++ b/packages/mindplot/src/components/export/TxtExporter.ts
@@ -39,22 +39,23 @@ class TxtExporter extends Exporter {
private traverseBranch(indent: string, prefix: string, branches: INodeModel[]) {
let result = '';
- branches
- .forEach((node, index) => {
- result = `${result}${indent}${prefix}${index + 1} ${node.getText() !== undefined ? node.getText() : ''}`;
- node.getFeatures().forEach((f) => {
- const type = f.getType();
- if (type === 'link') {
- result = `${result}\n ${indent} [Link: ${(f as LinkModel).getUrl()}]`;
- }
- if (type === 'note') {
- result = `${result}\n${indent} [Note: ${(f as NoteModel).getText()}]`;
- }
- });
- result = `${result}\n`;
-
- result += this.traverseBranch(`\t${indent}`, `${prefix}${index + 1}.`, node.getChildren());
+ branches.forEach((node, index) => {
+ result = `${result}${indent}${prefix}${index + 1} ${
+ node.getText() !== undefined ? node.getText() : ''
+ }`;
+ node.getFeatures().forEach((f) => {
+ const type = f.getType();
+ if (type === 'link') {
+ result = `${result}\n ${indent} [Link: ${(f as LinkModel).getUrl()}]`;
+ }
+ if (type === 'note') {
+ result = `${result}\n${indent} [Note: ${(f as NoteModel).getText()}]`;
+ }
});
+ result = `${result}\n`;
+
+ result += this.traverseBranch(`\t${indent}`, `${prefix}${index + 1}.`, node.getChildren());
+ });
return result;
}
}
diff --git a/packages/mindplot/src/components/export/WiseXMLExporter.ts b/packages/mindplot/src/components/export/WiseXMLExporter.ts
index 1298a520..8b62010a 100644
--- a/packages/mindplot/src/components/export/WiseXMLExporter.ts
+++ b/packages/mindplot/src/components/export/WiseXMLExporter.ts
@@ -29,12 +29,10 @@ class WiseXMLExporter extends Exporter {
export(): Promise {
const { mindmap } = this;
- const serializer = XMLSerializerFactory
- .createInstanceFromMindmap(mindmap);
+ const serializer = XMLSerializerFactory.createInstanceFromMindmap(mindmap);
const document: Document = serializer.toXML(mindmap);
- const xmlStr: string = new XMLSerializer()
- .serializeToString(document);
+ const xmlStr: string = new XMLSerializer().serializeToString(document);
return Promise.resolve(xmlStr);
}
}
diff --git a/packages/mindplot/src/components/export/freemind/Arrowlink.ts b/packages/mindplot/src/components/export/freemind/Arrowlink.ts
index 69bf4874..1acae11c 100644
--- a/packages/mindplot/src/components/export/freemind/Arrowlink.ts
+++ b/packages/mindplot/src/components/export/freemind/Arrowlink.ts
@@ -75,11 +75,21 @@ export default class Arrowlink {
arrowlinkElem.setAttribute('DESTINATION', this.DESTINATION);
arrowlinkElem.setAttribute('STARTARROW', this.STARTARROW);
- if (this.COLOR) arrowlinkElem.setAttribute('COLOR', this.COLOR);
- if (this.ENDINCLINATION) arrowlinkElem.setAttribute('ENDINCLINATION', this.ENDINCLINATION);
- if (this.ENDARROW) arrowlinkElem.setAttribute('ENDARROW', this.ENDARROW);
- if (this.ID) arrowlinkElem.setAttribute('ID', this.ID);
- if (this.STARTINCLINATION) arrowlinkElem.setAttribute('STARTINCLINATION', this.STARTINCLINATION);
+ if (this.COLOR) {
+ arrowlinkElem.setAttribute('COLOR', this.COLOR);
+ }
+ if (this.ENDINCLINATION) {
+ arrowlinkElem.setAttribute('ENDINCLINATION', this.ENDINCLINATION);
+ }
+ if (this.ENDARROW) {
+ arrowlinkElem.setAttribute('ENDARROW', this.ENDARROW);
+ }
+ if (this.ID) {
+ arrowlinkElem.setAttribute('ID', this.ID);
+ }
+ if (this.STARTINCLINATION) {
+ arrowlinkElem.setAttribute('STARTINCLINATION', this.STARTINCLINATION);
+ }
return arrowlinkElem;
}
diff --git a/packages/mindplot/src/components/export/freemind/Map.ts b/packages/mindplot/src/components/export/freemind/Map.ts
index a64a0be0..0f7c21d5 100644
--- a/packages/mindplot/src/components/export/freemind/Map.ts
+++ b/packages/mindplot/src/components/export/freemind/Map.ts
@@ -65,10 +65,7 @@ export default class Freemap {
// Verify that the version attribute exists
console.log(rootElem.getAttribute('version'));
- $assert(
- rootElem.getAttribute('version') !== null,
- 'Freemind version not found',
- );
+ $assert(rootElem.getAttribute('version') !== null, 'Freemind version not found');
// Start the loading process...
const version = rootElem.getAttribute('version') || '1.0.1';
@@ -81,9 +78,7 @@ export default class Freemap {
const childNodes = Array.from(mainTopicElement.childNodes);
const childsNodes = childNodes
- .filter(
- (child: ChildNode) => child.nodeType === 1 && (child as Element).tagName === 'node',
- )
+ .filter((child: ChildNode) => child.nodeType === 1 && (child as Element).tagName === 'node')
.map((c) => c as Element);
childsNodes.forEach((child: Element) => {
@@ -98,14 +93,16 @@ export default class Freemap {
let element: Element;
if (child.nodeType === 1) {
if (
- (child as Element).tagName === 'node'
- || (child as Element).tagName === 'richcontent'
- || (child as Element).tagName === 'font'
- || (child as Element).tagName === 'edge'
- || (child as Element).tagName === 'arrowlink'
- || (child as Element).tagName === 'clud'
- || (child as Element).tagName === 'icon'
- ) element = child as Element;
+ (child as Element).tagName === 'node' ||
+ (child as Element).tagName === 'richcontent' ||
+ (child as Element).tagName === 'font' ||
+ (child as Element).tagName === 'edge' ||
+ (child as Element).tagName === 'arrowlink' ||
+ (child as Element).tagName === 'clud' ||
+ (child as Element).tagName === 'icon'
+ ) {
+ element = child as Element;
+ }
}
return element;
@@ -132,44 +129,78 @@ export default class Freemap {
if (nodeElem.tagName === 'font') {
node = new Font();
- if (nodeElem.getAttribute('NAME')) node.setName(nodeElem.getAttribute('NAME'));
- if (nodeElem.getAttribute('BOLD')) node.setBold(nodeElem.getAttribute('BOLD'));
- if (nodeElem.getAttribute('ITALIC')) node.setItalic(nodeElem.getAttribute('ITALIC'));
- if (nodeElem.getAttribute('SIZE')) node.setSize(nodeElem.getAttribute('SIZE'));
+ if (nodeElem.getAttribute('NAME')) {
+ node.setName(nodeElem.getAttribute('NAME'));
+ }
+ if (nodeElem.getAttribute('BOLD')) {
+ node.setBold(nodeElem.getAttribute('BOLD'));
+ }
+ if (nodeElem.getAttribute('ITALIC')) {
+ node.setItalic(nodeElem.getAttribute('ITALIC'));
+ }
+ if (nodeElem.getAttribute('SIZE')) {
+ node.setSize(nodeElem.getAttribute('SIZE'));
+ }
}
if (nodeElem.tagName === 'edge') {
node = new Edge();
- if (nodeElem.getAttribute('COLOR')) node.setColor(nodeElem.getAttribute('COLOR'));
- if (nodeElem.getAttribute('STYLE')) node.setStyle(nodeElem.getAttribute('STYLE'));
- if (nodeElem.getAttribute('WIDTH')) node.setWidth(nodeElem.getAttribute('WIDTH'));
+ if (nodeElem.getAttribute('COLOR')) {
+ node.setColor(nodeElem.getAttribute('COLOR'));
+ }
+ if (nodeElem.getAttribute('STYLE')) {
+ node.setStyle(nodeElem.getAttribute('STYLE'));
+ }
+ if (nodeElem.getAttribute('WIDTH')) {
+ node.setWidth(nodeElem.getAttribute('WIDTH'));
+ }
}
if (nodeElem.tagName === 'arrowlink') {
node = new Arrowlink();
- if (nodeElem.getAttribute('COLOR')) node.setColor(nodeElem.getAttribute('COLOR'));
- if (nodeElem.getAttribute('DESTINATION')) node.setDestination(nodeElem.getAttribute('DESTINATION'));
- if (nodeElem.getAttribute('ENDARROW')) node.setEndarrow(nodeElem.getAttribute('ENDARROW'));
- if (nodeElem.getAttribute('ENDINCLINATION')) node.setEndinclination(nodeElem.getAttribute('ENDINCLINATION'));
- if (nodeElem.getAttribute('ID')) node.setId(nodeElem.getAttribute('ID'));
- if (nodeElem.getAttribute('STARTARROW')) node.setStartarrow(nodeElem.getAttribute('STARTARROW'));
- if (nodeElem.getAttribute('STARTINCLINATION')) node.setStartinclination(nodeElem.getAttribute('STARTINCLINATION'));
+ if (nodeElem.getAttribute('COLOR')) {
+ node.setColor(nodeElem.getAttribute('COLOR'));
+ }
+ if (nodeElem.getAttribute('DESTINATION')) {
+ node.setDestination(nodeElem.getAttribute('DESTINATION'));
+ }
+ if (nodeElem.getAttribute('ENDARROW')) {
+ node.setEndarrow(nodeElem.getAttribute('ENDARROW'));
+ }
+ if (nodeElem.getAttribute('ENDINCLINATION')) {
+ node.setEndinclination(nodeElem.getAttribute('ENDINCLINATION'));
+ }
+ if (nodeElem.getAttribute('ID')) {
+ node.setId(nodeElem.getAttribute('ID'));
+ }
+ if (nodeElem.getAttribute('STARTARROW')) {
+ node.setStartarrow(nodeElem.getAttribute('STARTARROW'));
+ }
+ if (nodeElem.getAttribute('STARTINCLINATION')) {
+ node.setStartinclination(nodeElem.getAttribute('STARTINCLINATION'));
+ }
}
if (nodeElem.tagName === 'cloud') {
node = new Cloud();
- if (nodeElem.getAttribute('COLOR')) node.setColor(nodeElem.getAttribute('COLOR'));
+ if (nodeElem.getAttribute('COLOR')) {
+ node.setColor(nodeElem.getAttribute('COLOR'));
+ }
}
if (nodeElem.tagName === 'icon') {
node = new Icon();
- if (nodeElem.getAttribute('BUILTIN')) node.setBuiltin(nodeElem.getAttribute('BUILTIN'));
+ if (nodeElem.getAttribute('BUILTIN')) {
+ node.setBuiltin(nodeElem.getAttribute('BUILTIN'));
+ }
}
if (nodeElem.tagName === 'richcontent') {
node = new Richcontent();
- if (nodeElem.getAttribute('TYPE')) node.setType(nodeElem.getAttribute('TYPE'));
+ if (nodeElem.getAttribute('TYPE')) {
+ node.setType(nodeElem.getAttribute('TYPE'));
+ }
if (nodeElem.firstChild && nodeElem.getElementsByTagName('html')) {
const content = nodeElem.getElementsByTagName('html');
const html = content[0] ? content[0].outerHTML : '';
diff --git a/packages/mindplot/src/components/export/freemind/Node.ts b/packages/mindplot/src/components/export/freemind/Node.ts
index 68e7e295..bc889e1d 100644
--- a/packages/mindplot/src/components/export/freemind/Node.ts
+++ b/packages/mindplot/src/components/export/freemind/Node.ts
@@ -7,7 +7,9 @@ import Icon from './Icon';
import Richcontent from './Richcontent';
class Node {
- protected arrowlinkOrCloudOrEdge: Array;
+ protected arrowlinkOrCloudOrEdge: Array<
+ Arrowlink | Cloud | Edge | Font | Hook | Icon | Richcontent | this
+ >;
protected BACKGROUND_COLOR: string;
@@ -43,9 +45,14 @@ class Node {
private centralTopic: boolean;
- getArrowlinkOrCloudOrEdge(): Array {
+ getArrowlinkOrCloudOrEdge(): Array<
+ /* eslint-disable */
+ Arrowlink | Cloud | Edge | Font | Hook | Icon | Richcontent | Node
+ > {
if (!this.arrowlinkOrCloudOrEdge) {
- this.arrowlinkOrCloudOrEdge = new Array();
+ this.arrowlinkOrCloudOrEdge = new Array<
+ Arrowlink | Cloud | Edge | Font | Hook | Icon | Richcontent | this
+ >();
}
return this.arrowlinkOrCloudOrEdge;
}
@@ -118,7 +125,9 @@ class Node {
return this.centralTopic;
}
- setArrowlinkOrCloudOrEdge(value: Arrowlink | Cloud | Edge | Font | Hook | Icon | Richcontent | this): void {
+ setArrowlinkOrCloudOrEdge(
+ value: Arrowlink | Cloud | Edge | Font | Hook | Icon | Richcontent | this,
+ ): void {
this.getArrowlinkOrCloudOrEdge().push(value);
}
@@ -268,6 +277,6 @@ class Node {
}
}
-export type Choise = Arrowlink | Cloud | Edge | Font | Hook | Icon | Richcontent | Node
+export type Choise = Arrowlink | Cloud | Edge | Font | Hook | Icon | Richcontent | Node;
export default Node;
diff --git a/packages/mindplot/src/components/export/freemind/Richcontent.ts b/packages/mindplot/src/components/export/freemind/Richcontent.ts
index 63a8c07f..9f041762 100644
--- a/packages/mindplot/src/components/export/freemind/Richcontent.ts
+++ b/packages/mindplot/src/components/export/freemind/Richcontent.ts
@@ -26,7 +26,9 @@ export default class Richcontent {
richcontentElem.setAttribute('TYPE', this.type);
if (this.html) {
- const htmlElement: DocumentFragment = document.createRange().createContextualFragment(this.html);
+ const htmlElement: DocumentFragment = document
+ .createRange()
+ .createContextualFragment(this.html);
richcontentElem.appendChild(htmlElement);
}
diff --git a/packages/mindplot/src/components/import/FreemindImporter.ts b/packages/mindplot/src/components/import/FreemindImporter.ts
index 1d19542f..1bb6e209 100644
--- a/packages/mindplot/src/components/import/FreemindImporter.ts
+++ b/packages/mindplot/src/components/import/FreemindImporter.ts
@@ -50,7 +50,9 @@ export default class FreemindImporter extends Importer {
const version: string = this.freemindMap.getVersion();
if (!version || version.startsWith('freeplane')) {
- throw new Error('You seems to be be trying to import a Freeplane map. FreePlane is not supported format.');
+ throw new Error(
+ 'You seems to be be trying to import a Freeplane map. FreePlane is not supported format.',
+ );
} else {
const mapVersion: VersionNumber = new VersionNumber(version);
if (mapVersion.isGreaterThan(FreemindConstant.SUPPORTED_FREEMIND_VERSION)) {
@@ -144,7 +146,11 @@ export default class FreemindImporter extends Importer {
}
}
- private convertNodeProperties(freeNode: FreemindNode, wiseTopic: NodeModel, centralTopic: boolean): void {
+ private convertNodeProperties(
+ freeNode: FreemindNode,
+ wiseTopic: NodeModel,
+ centralTopic: boolean,
+ ): void {
const text: string = freeNode.getText();
if (text) {
if (!centralTopic && text.length > 100) {
@@ -177,7 +183,12 @@ export default class FreemindImporter extends Importer {
if (folded) wiseTopic.setChildrenShrunken(folded);
}
- private convertChildNodes(freeParent: FreemindNode, wiseParent: NodeModel, mindmap: Mindmap, depth: number): void {
+ private convertChildNodes(
+ freeParent: FreemindNode,
+ wiseParent: NodeModel,
+ mindmap: Mindmap,
+ depth: number,
+ ): void {
const freeChilden = freeParent.getArrowlinkOrCloudOrEdge();
let currentWiseTopic: NodeModel = wiseParent;
let order = 0;
@@ -206,7 +217,13 @@ export default class FreemindImporter extends Importer {
// Convert node position...
const childrenCountSameSide = this.getChildrenCountSameSide(freeChilden, child);
- const position: {x: number, y: number} = this.convertPosition(wiseParent, child, depth, norder, childrenCountSameSide);
+ const position: { x: number; y: number } = this.convertPosition(
+ wiseParent,
+ child,
+ depth,
+ norder,
+ childrenCountSameSide,
+ );
wiseChild.setPosition(position.x, position.y);
// Convert the rest of the node properties...
@@ -239,7 +256,9 @@ export default class FreemindImporter extends Importer {
const iconId: string = freeIcon.getBuiltin();
const wiseIconId = FreemindIconConverter.toWiseId(iconId);
if (wiseIconId) {
- const mindmapIcon: FeatureModel = FeatureModelFactory.createModel('icon', { id: wiseIconId });
+ const mindmapIcon: FeatureModel = FeatureModelFactory.createModel('icon', {
+ id: wiseIconId,
+ });
currentWiseTopic.addFeature(mindmapIcon);
}
}
@@ -263,7 +282,9 @@ export default class FreemindImporter extends Importer {
switch (type) {
case 'NOTE': {
- const noteModel: FeatureModel = FeatureModelFactory.createModel('note', { text: text || FreemindConstant.EMPTY_NOTE });
+ const noteModel: FeatureModel = FeatureModelFactory.createModel('note', {
+ text: text || FreemindConstant.EMPTY_NOTE,
+ });
currentWiseTopic.addFeature(noteModel);
break;
}
@@ -274,7 +295,9 @@ export default class FreemindImporter extends Importer {
}
default: {
- const noteModel: FeatureModel = FeatureModelFactory.createModel('note', { text: text || FreemindConstant.EMPTY_NOTE });
+ const noteModel: FeatureModel = FeatureModelFactory.createModel('note', {
+ text: text || FreemindConstant.EMPTY_NOTE,
+ });
currentWiseTopic.addFeature(noteModel);
}
}
@@ -381,7 +404,10 @@ export default class FreemindImporter extends Importer {
// Font Size
if (font) {
- const fontSize: number = ((!font.getSize() || parseInt(font.getSize(), 10) < 8) ? FreemindConstant.FONT_SIZE_NORMAL : parseInt(font.getSize(), 10));
+ const fontSize: number =
+ !font.getSize() || parseInt(font.getSize(), 10) < 8
+ ? FreemindConstant.FONT_SIZE_NORMAL
+ : parseInt(font.getSize(), 10);
let wiseFontSize: number = FreemindConstant.FONT_SIZE_SMALL;
if (fontSize >= 24) {
wiseFontSize = FreemindConstant.FONT_SIZE_HUGE;
@@ -414,11 +440,19 @@ export default class FreemindImporter extends Importer {
return result;
}
- private convertPosition(wiseParent: NodeModel, freeChild: FreemindNode, depth: number, order: number, childrenCount: number): {x: number, y: number} {
- let x: number = FreemindConstant.CENTRAL_TO_TOPIC_DISTANCE + ((depth - 1) * FreemindConstant.TOPIC_TO_TOPIC_DISTANCE);
+ private convertPosition(
+ wiseParent: NodeModel,
+ freeChild: FreemindNode,
+ depth: number,
+ order: number,
+ childrenCount: number,
+ ): { x: number; y: number } {
+ let x: number =
+ FreemindConstant.CENTRAL_TO_TOPIC_DISTANCE +
+ (depth - 1) * FreemindConstant.TOPIC_TO_TOPIC_DISTANCE;
if (depth === 1) {
const side: string = freeChild.getPosition();
- x *= (side && FreemindConstant.POSITION_LEFT === side ? -1 : 1);
+ x *= side && FreemindConstant.POSITION_LEFT === side ? -1 : 1;
} else {
const position = wiseParent.getPosition();
x *= position.x < 0 ? 1 : -1;
@@ -427,7 +461,7 @@ export default class FreemindImporter extends Importer {
let y: number;
if (depth === 1) {
if (order % 2 === 0) {
- const multiplier = ((order + 1) - childrenCount) * 2;
+ const multiplier = (order + 1 - childrenCount) * 2;
y = multiplier * FreemindConstant.ROOT_LEVEL_TOPIC_HEIGHT;
} else {
const multiplier = (order - childrenCount) * 2;
@@ -435,7 +469,11 @@ export default class FreemindImporter extends Importer {
}
} else {
const position = wiseParent.getPosition();
- y = Math.round(position.y - ((childrenCount / 2) * FreemindConstant.SECOND_LEVEL_TOPIC_HEIGHT - (order * FreemindConstant.SECOND_LEVEL_TOPIC_HEIGHT)));
+ y = Math.round(
+ position.y -
+ ((childrenCount / 2) * FreemindConstant.SECOND_LEVEL_TOPIC_HEIGHT -
+ order * FreemindConstant.SECOND_LEVEL_TOPIC_HEIGHT),
+ );
}
return {
diff --git a/packages/mindplot/src/components/import/Importer.ts b/packages/mindplot/src/components/import/Importer.ts
index 249a0a7a..c3806a8a 100644
--- a/packages/mindplot/src/components/import/Importer.ts
+++ b/packages/mindplot/src/components/import/Importer.ts
@@ -1,3 +1,3 @@
export default abstract class Importer {
- abstract import(nameMap: string, description: string): Promise;
+ abstract import(nameMap: string, description: string): Promise;
}
diff --git a/packages/mindplot/src/components/lang/de.js b/packages/mindplot/src/components/lang/de.js
index c2cb2111..535e673c 100644
--- a/packages/mindplot/src/components/lang/de.js
+++ b/packages/mindplot/src/components/lang/de.js
@@ -10,28 +10,28 @@ const DE = {
TOPIC_COLOR: 'Themenfarbe',
TOPIC_BORDER_COLOR: 'Thema Randfarbe',
TOPIC_NOTE: 'Notiz hinzufügen',
- FONT_FAMILY: 'Schrifttyp',
+ FONT_FAMILY: 'Schriftart',
FONT_SIZE: 'Schriftgröße',
- FONT_BOLD: 'Fette Schrift',
- FONT_ITALIC: 'Kursive Schrift',
- UNDO: 'Rückgängig machen',
+ FONT_BOLD: 'Fett',
+ FONT_ITALIC: 'Kursiv',
+ UNDO: 'Rückgängig',
REDO: 'Wiederholen',
INSERT: 'Einfügen',
- SAVE: 'Sichern',
+ SAVE: 'Speichern',
NOTE: 'Notiz',
ADD_TOPIC: 'Thema hinzufügen',
- LOADING: 'Laden ...',
+ LOADING: 'Lädt ...',
EXPORT: 'Exportieren',
PRINT: 'Drucken',
- PUBLISH: 'Publizieren',
+ PUBLISH: 'Veröffentlichen',
COLLABORATE: 'Mitbenutzen',
HISTORY: 'Historie',
DISCARD_CHANGES: 'Änderungen verwerfen',
FONT_COLOR: 'Textfarbe',
- SAVING: 'Sichern ...',
- SAVE_COMPLETE: 'Sichern abgeschlossen',
+ SAVING: 'Speichern ...',
+ SAVE_COMPLETE: 'Speichern abgeschlossen',
ZOOM_IN_ERROR: 'Zoom zu hoch.',
- ZOOM_ERROR: 'Es kann nicht weiter vergrößert bzw. verkelinert werden.',
+ ZOOM_ERROR: 'Es kann nicht weiter vergrößert bzw. verkleinert werden.',
ONLY_ONE_TOPIC_MUST_BE_SELECTED: 'Thema konnte nicht angelegt werden. Bitte wählen Sie nur ein Thema aus.',
ONE_TOPIC_MUST_BE_SELECTED: 'Thema konnte nicht angelegt werden. Es muss ein Thema ausgewählt werden.',
ONLY_ONE_TOPIC_MUST_BE_SELECTED_COLLAPSE: 'Kinderknoten können nicht eingefaltet werden. Es muss ein Thema ausgewäht werden.',
@@ -41,45 +41,51 @@ const DE = {
SUB_TOPIC: 'Unterthema',
ISOLATED_TOPIC: 'Isoliertes Thema',
CENTRAL_TOPIC: 'Zentrales Thema',
- SHORTCUTS: 'Tastaturkürzel',
+ SHORTCUTS: 'Tastenkombinationen',
ENTITIES_COULD_NOT_BE_DELETED: 'Konnte das Thema oder die Beziehung nicht löschen. Es muss mindest ein Eintrag ausgewählt sein.',
AT_LEAST_ONE_TOPIC_MUST_BE_SELECTED: 'Es muss mindestens ein Thema ausgewählt sein.',
CLIPBOARD_IS_EMPTY: 'Es gibt nichts zu kopieren. Die Zwischenablage ist leer.',
CENTRAL_TOPIC_CAN_NOT_BE_DELETED: 'Das zentrale Thema kann nicht gelöscht werden.',
RELATIONSHIP_COULD_NOT_BE_CREATED: 'Die Beziehung konnte nicht angelegt werden. Es muss erst ein Vater-Thema ausgewählt werden, um die Beziehung herzustellen.',
SELECTION_COPIED_TO_CLIPBOARD: 'Themen in der Zwischenablage',
- WRITE_YOUR_TEXT_HERE: 'Schreiben Sie ihre Notiz hier ...',
+ WRITE_YOUR_TEXT_HERE: 'Schreibe deine Notiz hier ...',
REMOVE: 'Entfernen',
ACCEPT: 'Akzeptieren',
CANCEL: 'Abbrechen',
LINK: 'Verbindung',
OPEN_LINK: 'Öffne URL',
- SESSION_EXPIRED: 'Ihre Sitzung ist abgelaufen, bitte melden Sie sich erneut an.',
+ SESSION_EXPIRED: 'Deine Sitzung ist abgelaufen, bitte melde dich erneut an.',
URL_ERROR: 'URL nicht gültig',
ACTION: 'Aktion',
- CREATE_SIBLING_TOPIC: 'Erzeuge ein Schwester Thema',
- CREATE_CHILD_TOPIC: 'Eryeuge ein Unterthema',
- DELETE_TOPIC: 'Lösche Thema',
- EDIT_TOPIC_TEXT: 'Editiere Thematext',
- JUST_START_TYPING: 'Einfach mit der Eingabe beginnen',
+ CREATE_SIBLING_TOPIC: 'Thema hinzufügen',
+ CREATE_CHILD_TOPIC: 'Unterthema hinzufügen',
+ DELETE_TOPIC: 'Thema löschen',
+ EDIT_TOPIC_TEXT: 'Thematext bearbeiten',
+ JUST_START_TYPING: 'Eingabe beginnen',
CANCEL_TEXT_CHANGES: 'Textänderungen abbrechen',
- TOPIC_NAVIGATION: 'Themen Navigation',
+ TOPIC_NAVIGATION: 'Navigieren',
ARROW_KEYS: 'Pfeiltasten',
- SELECT_MULTIPLE_NODES: 'Wähle mehrfache Knoten aus',
- UNDO_EDITION: 'Änderungen rückgängig machen',
- REDO_EDITION: 'Änderung nochmal ausführen',
- SELECT_ALL_TOPIC: 'Wähle alle Themen aus',
- CHANGE_TEXT_BOLD: 'Ändere Text in fette Schrift',
- SAVE_CHANGES: 'Änderungen sichern',
- CHANGE_TEXT_ITALIC: 'Ändere Text in kursive Schrift',
- DESELECT_ALL_TOPIC: 'Deselektiere alle Themen',
- COLLAPSE_CHILDREN: 'Kindknoten zusammenklappen',
- KEYBOARD_SHORTCUTS_MSG: 'Tastenkürzel helfen Zeit zu sparen und erlauben die Arbeit nur mit der Tatstatur, s.d. Sie niemals die Hand von der Tastatur nehmen müßen, um die Maus zu bedienen.',
- COPY_AND_PASTE_TOPICS: 'Kopieren und Einsetzen von Themen',
- MULTIPLE_LINES: 'Füge mehrer Textzeilen hinzu',
- BACK_TO_MAP_LIST: 'Zurück zur Kartenliste',
- KEYBOARD_SHOTCUTS: 'Tastaturkürzel',
- PASTE_URL_HERE: 'Fügen Sie hier die gewünschte URL-Adresse ein:',
+ SELECT_MULTIPLE_NODES: 'Wähle Themen markieren',
+ UNDO_EDITION: 'Rückgängig',
+ REDO_EDITION: 'Wiederholen',
+ SELECT_ALL_TOPIC: 'Alles markieren',
+ CHANGE_TEXT_BOLD: 'Fett',
+ SAVE_CHANGES: 'Speichern',
+ CHANGE_TEXT_ITALIC: 'Kursiv',
+ DESELECT_ALL_TOPIC: 'Markierung aufheben',
+ COLLAPSE_CHILDREN: 'Unterthemen einklappen',
+ KEYBOARD_SHORTCUTS_MSG: 'Tastenkombinationen helfen Zeit zu sparen und erlauben die Arbeit nur mit der Tatstatur, s.d. du niemals die Hand von der Tastatur nehmen musst, um die Maus zu bedienen.',
+ COPY_AND_PASTE_TOPICS: 'Thema kopieren / einfügen',
+ MULTIPLE_LINES: 'Absatz hinzufügen',
+ BACK_TO_MAP_LIST: 'Zurück zur Mindmap Liste',
+ KEYBOARD_SHOTCUTS: 'Tastenkombinationen',
+ PASTE_URL_HERE: 'Füge hier die gewünschte URL ein:',
+ CTRL: 'Strg',
+ SPACE_BAR: 'Leertaste',
+ K_INSERT: 'Insert',
+ MOUSE_CLICK: 'Mausklick',
+ K_DELETE: 'Entf',
+ BACKSPACE: 'Backspace',
};
export default DE;
diff --git a/packages/mindplot/src/components/lang/en.js b/packages/mindplot/src/components/lang/en.js
index 0ebe385f..cbd11e1b 100644
--- a/packages/mindplot/src/components/lang/en.js
+++ b/packages/mindplot/src/components/lang/en.js
@@ -80,6 +80,12 @@ const EN = {
BACK_TO_MAP_LIST: 'Back to Maps List',
KEYBOARD_SHOTCUTS: 'Keyboard Shorcuts',
PASTE_URL_HERE: 'Paste your url address here:',
+ CTRL: 'Ctrl',
+ SPACE_BAR: 'Space Bar',
+ K_INSERT: 'Insert',
+ MOUSE_CLICK: 'Mouse Click',
+ K_DELETE: 'Delete',
+ BACKSPACE: 'Backspace',
};
export default EN;
diff --git a/packages/mindplot/src/components/lang/es.js b/packages/mindplot/src/components/lang/es.js
index 87f65188..9121f1c0 100644
--- a/packages/mindplot/src/components/lang/es.js
+++ b/packages/mindplot/src/components/lang/es.js
@@ -80,6 +80,12 @@ const ES = {
BACK_TO_MAP_LIST: 'Volver a la lista de mapas',
KEYBOARD_SHOTCUTS: 'Métodos abreviados de teclado',
PASTE_URL_HERE: 'Copie la URL que desea aca:',
+ CTRL: 'Ctrl',
+ SPACE_BAR: 'Space Bar',
+ K_INSERT: 'Insert',
+ MOUSE_CLICK: 'Mouse Click',
+ K_DELETE: 'Delete',
+ BACKSPACE: 'Backspace',
};
export default ES;
diff --git a/packages/mindplot/src/components/lang/fr.js b/packages/mindplot/src/components/lang/fr.js
index f8a90848..cf9a3e44 100644
--- a/packages/mindplot/src/components/lang/fr.js
+++ b/packages/mindplot/src/components/lang/fr.js
@@ -80,6 +80,12 @@ const FR = {
BACK_TO_MAP_LIST: 'Retour à la liste des cartes',
KEYBOARD_SHOTCUTS: 'Raccourcis clavier',
PASTE_URL_HERE: 'Collez l\'adresse URL souhaitée ici :',
+ CTRL: 'Ctrl',
+ SPACE_BAR: 'Space Bar',
+ K_INSERT: 'Insert',
+ MOUSE_CLICK: 'Clic de Souris',
+ K_DELETE: 'Delete',
+ BACKSPACE: 'Backspace',
};
export default FR;
diff --git a/packages/mindplot/src/components/lang/ru.js b/packages/mindplot/src/components/lang/ru.js
index d962cd26..d1106d33 100644
--- a/packages/mindplot/src/components/lang/ru.js
+++ b/packages/mindplot/src/components/lang/ru.js
@@ -80,6 +80,12 @@ const EN = {
BACK_TO_MAP_LIST: 'Back to Maps List',
KEYBOARD_SHOTCUTS: 'Keyboard Shorcuts',
PASTE_URL_HERE: 'Вставьте нужный URL-адрес здесь:',
+ CTRL: 'Ctrl',
+ SPACE_BAR: 'Space Bar',
+ K_INSERT: 'Insert',
+ MOUSE_CLICK: 'Mouse Click',
+ K_DELETE: 'Delete',
+ BACKSPACE: 'Backspace',
};
export default EN;
diff --git a/packages/mindplot/src/components/lang/zh.js b/packages/mindplot/src/components/lang/zh.js
index ef262eef..2cc5bb20 100644
--- a/packages/mindplot/src/components/lang/zh.js
+++ b/packages/mindplot/src/components/lang/zh.js
@@ -80,7 +80,12 @@ const ZH = {
BACK_TO_MAP_LIST: '回到脑图列表',
KEYBOARD_SHOTCUTS: '键盘快捷键',
PASTE_URL_HERE: '在此处粘贴所需的 URL 地址:',
-
+ CTRL: 'Ctrl',
+ SPACE_BAR: 'Space Bar',
+ K_INSERT: 'Insert',
+ MOUSE_CLICK: 'Mouse Click',
+ K_DELETE: 'Delete',
+ BACKSPACE: 'Backspace',
};
export default ZH;
diff --git a/packages/mindplot/src/components/layout/AbstractBasicSorter.js b/packages/mindplot/src/components/layout/AbstractBasicSorter.ts
similarity index 73%
rename from packages/mindplot/src/components/layout/AbstractBasicSorter.js
rename to packages/mindplot/src/components/layout/AbstractBasicSorter.ts
index c0f3ede0..8ccce86d 100644
--- a/packages/mindplot/src/components/layout/AbstractBasicSorter.js
+++ b/packages/mindplot/src/components/layout/AbstractBasicSorter.ts
@@ -16,24 +16,25 @@
* See the License for the specific language governing permissions and
* limitations under the License.
*/
+import PositionType from '../PositionType';
import ChildrenSorterStrategy from './ChildrenSorterStrategy';
+import Node from './Node';
+import RootedTreeSet from './RootedTreeSet';
-/**
- * @class
- * @extends mindplot.layout.ChildrenSorterStrategy
- */
-class AbstractBasicSorter extends ChildrenSorterStrategy {
- computeChildrenIdByHeights(treeSet, node) {
+abstract class AbstractBasicSorter extends ChildrenSorterStrategy {
+ private INTERNODE_VERTICAL_PADDING = 5;
+
+ computeChildrenIdByHeights(treeSet: RootedTreeSet, node: Node) {
const result = {};
this._computeChildrenHeight(treeSet, node, result);
return result;
}
- _getVerticalPadding() {
- return AbstractBasicSorter.INTERNODE_VERTICAL_PADDING;
+ protected _getVerticalPadding() {
+ return this.INTERNODE_VERTICAL_PADDING;
}
- _computeChildrenHeight(treeSet, node, heightCache) {
+ protected _computeChildrenHeight(treeSet: RootedTreeSet, node: Node, heightCache?) {
// 2* Top and down padding;
const height = node.getSize().height + this._getVerticalPadding() * 2;
@@ -44,9 +45,9 @@ class AbstractBasicSorter extends ChildrenSorterStrategy {
} else {
let childrenHeight = 0;
- children.forEach(((child) => {
+ children.forEach((child) => {
childrenHeight += this._computeChildrenHeight(treeSet, child, heightCache);
- }));
+ });
result = Math.max(height, childrenHeight);
}
@@ -59,29 +60,16 @@ class AbstractBasicSorter extends ChildrenSorterStrategy {
return result;
}
- _getSortedChildren(treeSet, node) {
+ protected _getSortedChildren(treeSet: RootedTreeSet, node: Node) {
const result = treeSet.getChildren(node);
result.sort((a, b) => a.getOrder() - b.getOrder());
return result;
}
- _getRelativeDirection(reference, position) {
+ protected _getRelativeDirection(reference: PositionType, position: PositionType): 1 | -1 {
const offset = position.x - reference.x;
return offset >= 0 ? 1 : -1;
}
}
-/**
- * @constant
- * @type {Number}
- * @default
- */
-AbstractBasicSorter.INTERNODE_VERTICAL_PADDING = 5;
-/**
- * @constant
- * @type {Number}
- * @default
- */
-AbstractBasicSorter.INTERNODE_HORIZONTAL_PADDING = 30;
-
export default AbstractBasicSorter;
diff --git a/packages/mindplot/src/components/layout/BalancedSorter.js b/packages/mindplot/src/components/layout/BalancedSorter.ts
similarity index 62%
rename from packages/mindplot/src/components/layout/BalancedSorter.js
rename to packages/mindplot/src/components/layout/BalancedSorter.ts
index 7195f84d..2e67db7b 100644
--- a/packages/mindplot/src/components/layout/BalancedSorter.js
+++ b/packages/mindplot/src/components/layout/BalancedSorter.ts
@@ -18,56 +18,24 @@
* limitations under the License.
*/
import { $assert, $defined } from '@wisemapping/core-js';
+import PositionType from '../PositionType';
import AbstractBasicSorter from './AbstractBasicSorter';
+import Node from './Node';
+import RootedTreeSet from './RootedTreeSet';
class BalancedSorter extends AbstractBasicSorter {
- predict(graph, parent, node, position, free) {
- // If its a free node...
- if (free) {
- $assert(
- $defined(position),
- 'position cannot be null for predict in free positioning',
- );
- $assert($defined(node), 'node cannot be null for predict in free positioning');
+ private static INTERNODE_VERTICAL_PADDING = 5;
- const rootNode = graph.getRootNode(parent);
- const direction = this._getRelativeDirection(
- rootNode.getPosition(),
- node.getPosition(),
- );
-
- const limitXPos = parent.getPosition().x
- + direction
- * (parent.getSize().width / 2
- + node.getSize().width / 2
- + BalancedSorter.INTERNODE_HORIZONTAL_PADDING);
-
- let xPos;
- if (direction > 0) {
- xPos = position.x >= limitXPos
- ? position.x
- : limitXPos;
- } else {
- xPos = position.x <= limitXPos
- ? position.x
- : limitXPos;
- }
- return [0, { x: xPos, y: position.y }];
- }
+ private static INTERNODE_HORIZONTAL_PADDING = 30;
+ predict(graph, parent, node: Node, position: PositionType) {
const rootNode = graph.getRootNode(parent);
// If it is a dragged node...
if (node) {
$assert($defined(position), 'position cannot be null for predict in dragging');
- const nodeDirection = this._getRelativeDirection(
- rootNode.getPosition(),
- node.getPosition(),
- );
- const positionDirection = this._getRelativeDirection(
- rootNode.getPosition(),
- position,
- );
+ const nodeDirection = this._getRelativeDirection(rootNode.getPosition(), node.getPosition());
+ const positionDirection = this._getRelativeDirection(rootNode.getPosition(), position);
const siblings = graph.getSiblings(node);
const sameParent = parent === graph.getParent(node);
@@ -76,7 +44,8 @@ class BalancedSorter extends AbstractBasicSorter {
}
}
- let right; let left;
+ let right;
+ let left;
if (!position) {
right = this._getChildrenForOrder(parent, graph, 0);
left = this._getChildrenForOrder(parent, graph, 1);
@@ -84,19 +53,16 @@ class BalancedSorter extends AbstractBasicSorter {
// Filter nodes on one side..
let order;
if (position) {
- order = position.x > rootNode.getPosition().x
- ? 0
- : 1;
+ order = position.x > rootNode.getPosition().x ? 0 : 1;
} else {
- order = right.length - left.length > 0
- ? 1
- : 0;
+ order = right.length - left.length > 0 ? 1 : 0;
}
const direction = order % 2 === 0 ? 1 : -1;
// Exclude the dragged node (if set)
- const children = this._getChildrenForOrder(parent, graph, order)
- .filter((child) => child !== node);
+ const children = this._getChildrenForOrder(parent, graph, order).filter(
+ (child) => child !== node,
+ );
// No children?
if (children.length === 0) {
@@ -104,10 +70,9 @@ class BalancedSorter extends AbstractBasicSorter {
order,
{
x:
- parent.getPosition().x
- + direction
- * (parent.getSize().width / 2
- + BalancedSorter.INTERNODE_HORIZONTAL_PADDING * 2),
+ parent.getPosition().x +
+ direction *
+ (parent.getSize().width / 2 + BalancedSorter.INTERNODE_HORIZONTAL_PADDING * 2),
y: parent.getPosition().y,
},
];
@@ -120,9 +85,10 @@ class BalancedSorter extends AbstractBasicSorter {
children.forEach((child, index) => {
const cpos = child.getPosition();
if (newestPosition.y > cpos.y) {
- const yOffset = child === last
- ? child.getSize().height + BalancedSorter.INTERNODE_VERTICAL_PADDING * 2
- : (children[index + 1].getPosition().y - child.getPosition().y) / 2;
+ const yOffset =
+ child === last
+ ? child.getSize().height + BalancedSorter.INTERNODE_VERTICAL_PADDING * 2
+ : (children[index + 1].getPosition().y - child.getPosition().y) / 2;
result = [child.getOrder() + 2, { x: cpos.x, y: cpos.y + yOffset }];
}
});
@@ -135,9 +101,9 @@ class BalancedSorter extends AbstractBasicSorter {
{
x: first.getPosition().x,
y:
- first.getPosition().y
- - first.getSize().height
- - BalancedSorter.INTERNODE_VERTICAL_PADDING * 2,
+ first.getPosition().y -
+ first.getSize().height -
+ BalancedSorter.INTERNODE_VERTICAL_PADDING * 2,
},
];
}
@@ -145,13 +111,7 @@ class BalancedSorter extends AbstractBasicSorter {
return result;
}
- /**
- * @param {} treeSet
- * @param {} parent
- * @param {} child
- * @param {} order
- */
- insert(treeSet, parent, child, order) {
+ insert(treeSet: RootedTreeSet, parent: Node, child: Node, order: number) {
const children = this._getChildrenForOrder(parent, treeSet, order);
// If no children, return 0 or 1 depending on the side
@@ -176,11 +136,7 @@ class BalancedSorter extends AbstractBasicSorter {
child.setOrder(newOrder);
}
- /**
- * @param {} treeSet
- * @param {} node
- */
- detach(treeSet, node) {
+ detach(treeSet: RootedTreeSet, node: Node): void {
const parent = treeSet.getParent(node);
// Filter nodes on one side..
const children = this._getChildrenForOrder(parent, treeSet, node.getOrder());
@@ -193,12 +149,7 @@ class BalancedSorter extends AbstractBasicSorter {
node.setOrder(node.getOrder() % 2 === 0 ? 0 : 1);
}
- /**
- * @param {} treeSet
- * @param {} node
- * @return offsets
- */
- computeOffsets(treeSet, node) {
+ computeOffsets(treeSet: RootedTreeSet, node: Node) {
$assert(treeSet, 'treeSet can no be null.');
$assert(node, 'node can no be null.');
@@ -243,10 +194,11 @@ class BalancedSorter extends AbstractBasicSorter {
}
const yOffset = ysum + heights[i].height / 2;
- const xOffset = direction
- * (node.getSize().width / 2
- + heights[i].width / 2
- + +BalancedSorter.INTERNODE_HORIZONTAL_PADDING);
+ const xOffset =
+ direction *
+ (node.getSize().width / 2 +
+ heights[i].width / 2 +
+ +BalancedSorter.INTERNODE_HORIZONTAL_PADDING);
$assert(!Number.isNaN(xOffset), 'xOffset can not be null');
$assert(!Number.isNaN(yOffset), 'yOffset can not be null');
@@ -256,12 +208,7 @@ class BalancedSorter extends AbstractBasicSorter {
return result;
}
- /**
- * @param {} treeSet
- * @param {} node
- * @throw will throw an error if order elements are missing
- */
- verify(treeSet, node) {
+ verify(treeSet: RootedTreeSet, node: Node): void {
// Check that all is consistent ...
const children = this._getChildrenForOrder(node, treeSet, node.getOrder());
@@ -272,50 +219,30 @@ class BalancedSorter extends AbstractBasicSorter {
const order = i === 0 && factor === 1 ? 1 : factor * i;
$assert(
children[i].getOrder() === order,
- `Missing order elements. Missing order: ${i * factor
- }. Parent:${node.getId()
- },Node:${children[i].getId()}`,
+ `Missing order elements. Missing order: ${
+ i * factor
+ }. Parent:${node.getId()},Node:${children[i].getId()}`,
);
}
}
- /**
- * @param {} treeSet
- * @param {} child
- * @return the direction of the child within the treeSet
- */
- getChildDirection(treeSet, child) {
+ getChildDirection(treeSet: RootedTreeSet, child: Node): 1 | -1 {
return child.getOrder() % 2 === 0 ? 1 : -1;
}
- /**
- * @return {String} the print name of this class
- */
- toString() {
+ toString(): string {
return 'Balanced Sorter';
}
- _getChildrenForOrder(parent, graph, order) {
- return this._getSortedChildren(graph, parent)
- .filter((child) => child.getOrder() % 2 === order % 2);
+ protected _getChildrenForOrder(parent: Node, graph: RootedTreeSet, order: number) {
+ return this._getSortedChildren(graph, parent).filter(
+ (child) => child.getOrder() % 2 === order % 2,
+ );
}
- _getVerticalPadding() {
+ protected _getVerticalPadding(): number {
return BalancedSorter.INTERNODE_VERTICAL_PADDING;
}
}
-/**
- * @constant
- * @type {Number}
- * @default
- */
-BalancedSorter.INTERNODE_VERTICAL_PADDING = 5;
-/**
- * @constant
- * @type {Number}
- * @default
- */
-BalancedSorter.INTERNODE_HORIZONTAL_PADDING = 30;
-
export default BalancedSorter;
diff --git a/packages/mindplot/src/components/layout/ChangeEvent.js b/packages/mindplot/src/components/layout/ChangeEvent.js
index 8b859509..c71b5118 100644
--- a/packages/mindplot/src/components/layout/ChangeEvent.js
+++ b/packages/mindplot/src/components/layout/ChangeEvent.js
@@ -41,17 +41,17 @@ class ChangeEvent {
}
/**
- * @param {} value the order to set
- * @throws will throw an error if the given parameter is not/cannot be converted to a numerical
- * value
- */
+ * @param {} value the order to set
+ * @throws will throw an error if the given parameter is not/cannot be converted to a numerical
+ * value
+ */
setOrder(value) {
$assert(!Number.isNaN(value), 'value can not be null');
this._order = value;
}
/** @param {} value
- * @throws will throw an error if the value is null or undefined */
+ * @throws will throw an error if the value is null or undefined */
setPosition(value) {
$assert(value, 'value can not be null');
this._position = value;
@@ -59,7 +59,9 @@ class ChangeEvent {
/** @return {String} order and position */
toString() {
- return `[order:${this.getOrder()}, position: {${this.getPosition().x},${this.getPosition().y}}]`;
+ return `[order:${this.getOrder()}, position: {${this.getPosition().x},${
+ this.getPosition().y
+ }}]`;
}
}
diff --git a/packages/mindplot/src/components/layout/ChildrenSorterStrategy.ts b/packages/mindplot/src/components/layout/ChildrenSorterStrategy.ts
index fbf2cb25..85396b4c 100644
--- a/packages/mindplot/src/components/layout/ChildrenSorterStrategy.ts
+++ b/packages/mindplot/src/components/layout/ChildrenSorterStrategy.ts
@@ -24,15 +24,15 @@ abstract class ChildrenSorterStrategy {
abstract computeOffsets(treeSet: RootedTreeSet, node: Node);
- abstract insert(treeSet: RootedTreeSet, parent: Node, child: Node, order: number);
+ abstract insert(treeSet: RootedTreeSet, parent: Node, child: Node, order: number): void;
- abstract detach(treeSet: RootedTreeSet, node: Node);
+ abstract detach(treeSet: RootedTreeSet, node: Node): void;
abstract predict(treeSet: RootedTreeSet, parent, node: Node, position: PositionType);
abstract verify(treeSet: RootedTreeSet, node: Node);
- abstract getChildDirection(treeSet: RootedTreeSet, node: Node);
+ abstract getChildDirection(treeSet: RootedTreeSet, node: Node): 1 | -1;
abstract toString(): string;
}
diff --git a/packages/mindplot/src/components/layout/EventBus.ts b/packages/mindplot/src/components/layout/EventBus.ts
index efb5c202..f5727e36 100644
--- a/packages/mindplot/src/components/layout/EventBus.ts
+++ b/packages/mindplot/src/components/layout/EventBus.ts
@@ -17,7 +17,15 @@
*/
import Events from '../Events';
-export type EventType = 'topicResize' | 'topicMoved' | 'childShrinked' | 'topicConnected' | 'topicAdded' | 'topicRemoved' | 'forceLayout' | 'topicDisconect';
+export type EventType =
+ | 'topicResize'
+ | 'topicMoved'
+ | 'childShrinked'
+ | 'topicConnected'
+ | 'topicAdded'
+ | 'topicRemoved'
+ | 'forceLayout'
+ | 'topicDisconect';
class EventBus extends Events {
// eslint-disable-next-line no-use-before-define
static _instance: EventBus = new EventBus();
diff --git a/packages/mindplot/src/components/layout/EventBusDispatcher.ts b/packages/mindplot/src/components/layout/EventBusDispatcher.ts
index 81b83ef9..2285bbe7 100644
--- a/packages/mindplot/src/components/layout/EventBusDispatcher.ts
+++ b/packages/mindplot/src/components/layout/EventBusDispatcher.ts
@@ -43,11 +43,11 @@ class EventBusDispatcher {
EventBus.instance.addEvent('forceLayout', this._forceLayout.bind(this));
}
- private _topicResizeEvent(args: { node: Topic, size: SizeType }) {
+ private _topicResizeEvent(args: { node: Topic; size: SizeType }) {
this._layoutManager.updateNodeSize(args.node.getId(), args.size);
}
- private _topicMoved(args: { node: Topic, position: PositionType }) {
+ private _topicMoved(args: { node: Topic; position: PositionType }) {
this._layoutManager.moveNode(args.node.getId(), args.position);
}
@@ -55,9 +55,11 @@ class EventBusDispatcher {
this._layoutManager.disconnectNode(node.getId());
}
- private _topicConnected(args: { parentNode: Topic, childNode: Topic }) {
+ private _topicConnected(args: { parentNode: Topic; childNode: Topic }) {
this._layoutManager.connectNode(
- args.parentNode.getId(), args.childNode.getId(), args.childNode.getOrder(),
+ args.parentNode.getId(),
+ args.childNode.getId(),
+ args.childNode.getOrder(),
);
}
diff --git a/packages/mindplot/src/components/layout/GridSorter.js b/packages/mindplot/src/components/layout/GridSorter.js
index c631fdd8..abe89473 100644
--- a/packages/mindplot/src/components/layout/GridSorter.js
+++ b/packages/mindplot/src/components/layout/GridSorter.js
@@ -42,12 +42,12 @@ class GridSorter extends AbstractBasicSorter {
for (let i = 0; i < heights.length; i++) {
const even = i % 2 === 0 ? 1 : -1;
- const zeroHeight = i === 0 ? 0 : ((heights[0].height / 2) * even);
+ const zeroHeight = i === 0 ? 0 : (heights[0].height / 2) * even;
let middleHeight = 0;
for (let j = i - 2; j > 0; j -= 2) {
middleHeight += heights[j].height * even;
}
- const finalHeight = i === 0 ? 0 : ((heights[i].height / 2) * even);
+ const finalHeight = i === 0 ? 0 : (heights[i].height / 2) * even;
const yOffset = zeroHeight + middleHeight + finalHeight;
const xOffset = node.getSize().width + GridSorter.GRID_HORIZONTAR_SIZE;
@@ -61,8 +61,8 @@ class GridSorter extends AbstractBasicSorter {
}
/**
- * @return {String} the print name of this class
- */
+ * @return {String} the print name of this class
+ */
toString() {
return 'Grid Sorter';
}
diff --git a/packages/mindplot/src/components/layout/LayoutManager.ts b/packages/mindplot/src/components/layout/LayoutManager.ts
index 94c6964c..310d4f61 100644
--- a/packages/mindplot/src/components/layout/LayoutManager.ts
+++ b/packages/mindplot/src/components/layout/LayoutManager.ts
@@ -64,13 +64,13 @@ class LayoutManager extends Events {
}
/**
- * @param id
- * @param position
- * @throws will throw an error if id is null or undefined
- * @throws will throw an error if position is null or undefined
- * @throws will throw an error if the position's x property is null or undefined
- * @throws will throw an error if the position's y property is null or undefined
- */
+ * @param id
+ * @param position
+ * @throws will throw an error if id is null or undefined
+ * @throws will throw an error if position is null or undefined
+ * @throws will throw an error if the position's x property is null or undefined
+ * @throws will throw an error if the position's y property is null or undefined
+ */
moveNode(id: number, position: PositionType) {
$assert($defined(id), 'id cannot be null');
$assert($defined(position), 'position cannot be null');
@@ -97,12 +97,12 @@ class LayoutManager extends Events {
}
/**
- * @param id
- * @param size
- * @param position
- * @throws will throw an error if id is null or undefined
- * @return this
- */
+ * @param id
+ * @param size
+ * @param position
+ * @throws will throw an error if id is null or undefined
+ * @return this
+ */
addNode(id: number, size: SizeType, position: PositionType) {
$assert($defined(id), 'id can not be null');
const result = this._layout.createNode(id, size, position, 'topic');
@@ -126,7 +126,11 @@ class LayoutManager extends Events {
return this;
}
- predict(parentId: number, nodeId: number, position: PositionType): { order: number, position: PositionType } {
+ predict(
+ parentId: number,
+ nodeId: number,
+ position: PositionType,
+ ): { order: number; position: PositionType } {
$assert($defined(parentId), 'parentId can not be null');
const parent = this._treeSet.find(parentId);
@@ -179,14 +183,14 @@ class LayoutManager extends Events {
}
private _flushEvents() {
- this._events.forEach(((event) => {
+ this._events.forEach((event) => {
this.fireEvent('change', event);
- }));
+ });
this._events = [];
}
private _collectChanges(nodes: Node[]) {
- nodes.forEach(((node) => {
+ nodes.forEach((node) => {
if (node.hasOrderChanged() || node.hasPositionChanged()) {
// Find or create a event ...
const id = node.getId();
@@ -205,7 +209,7 @@ class LayoutManager extends Events {
this._events.push(event);
}
this._collectChanges(this._treeSet.getChildren(node));
- }));
+ });
}
}
diff --git a/packages/mindplot/src/components/layout/Node.ts b/packages/mindplot/src/components/layout/Node.ts
index b307e070..7eb364cd 100644
--- a/packages/mindplot/src/components/layout/Node.ts
+++ b/packages/mindplot/src/components/layout/Node.ts
@@ -186,10 +186,12 @@ class Node {
// This is a performance improvement to avoid movements that really could be avoided.
const currentPos = this.getPosition();
if (
- currentPos == null
- || Math.abs(currentPos.x - position.x) > 2
- || Math.abs(currentPos.y - position.y) > 2
- ) this._setProperty('position', position);
+ currentPos == null ||
+ Math.abs(currentPos.x - position.x) > 2 ||
+ Math.abs(currentPos.y - position.y) > 2
+ ) {
+ this._setProperty('position', position);
+ }
}
_setProperty(key: string, value) {
@@ -228,16 +230,11 @@ class Node {
/** @return {String} returns id, order, position, size and shrink information */
toString() {
- return (
- `[id:${this.getId()
- }, order:${this.getOrder()
- }, position: {${this.getPosition().x
- },${this.getPosition().y
- }}, size: {${this.getSize().width
- },${this.getSize().height
- }}, shrink:${this.areChildrenShrunken()
- }]`
- );
+ return `[id:${this.getId()}, order:${this.getOrder()}, position: {${this.getPosition().x},${
+ this.getPosition().y
+ }}, size: {${this.getSize().width},${
+ this.getSize().height
+ }}, shrink:${this.areChildrenShrunken()}]`;
}
}
diff --git a/packages/mindplot/src/components/layout/OriginalLayout.js b/packages/mindplot/src/components/layout/OriginalLayout.js
index 95043a9f..61df0be7 100644
--- a/packages/mindplot/src/components/layout/OriginalLayout.js
+++ b/packages/mindplot/src/components/layout/OriginalLayout.js
@@ -33,7 +33,8 @@ class OriginalLayout {
$assert(position, 'position can not be null');
$assert(type, 'type can not be null');
- const strategy = type === 'root' ? OriginalLayout.BALANCED_SORTER : OriginalLayout.SYMMETRIC_SORTER;
+ const strategy =
+ type === 'root' ? OriginalLayout.BALANCED_SORTER : OriginalLayout.SYMMETRIC_SORTER;
return new Node(id, size, position, strategy);
}
@@ -77,7 +78,7 @@ class OriginalLayout {
/** */
layout() {
const roots = this._treeSet.getTreeRoots();
- roots.forEach(((node) => {
+ roots.forEach((node) => {
// Calculate all node heights ...
const sorter = node.getSorter();
@@ -85,7 +86,7 @@ class OriginalLayout {
this._layoutChildren(node, heightById);
this._fixOverlapping(node, heightById);
- }));
+ });
}
_layoutChildren(node, heightById) {
@@ -117,8 +118,8 @@ class OriginalLayout {
const direction = node.getSorter().getChildDirection(me._treeSet, child);
if (
- (direction > 0 && childFreeDisplacement.x < 0)
- || (direction < 0 && childFreeDisplacement.x > 0)
+ (direction > 0 && childFreeDisplacement.x < 0) ||
+ (direction < 0 && childFreeDisplacement.x > 0)
) {
child.resetFreeDisplacement();
child.setFreeDisplacement({
@@ -145,9 +146,9 @@ class OriginalLayout {
}
// Continue reordering the children nodes ...
- children.forEach(((child) => {
+ children.forEach((child) => {
this._layoutChildren(child, heightById);
- }));
+ });
}
_calculateAlignOffset(node, child, heightById) {
@@ -161,12 +162,13 @@ class OriginalLayout {
const childHeight = child.getSize().height;
if (
- this._treeSet.isStartOfSubBranch(child)
- && OriginalLayout._branchIsTaller(child, heightById)
+ this._treeSet.isStartOfSubBranch(child) &&
+ OriginalLayout._branchIsTaller(child, heightById)
) {
if (this._treeSet.hasSinglePathToSingleLeaf(child)) {
- offset = heightById[child.getId()] / 2
- - (childHeight + child.getSorter()._getVerticalPadding() * 2) / 2;
+ offset =
+ heightById[child.getId()] / 2 -
+ (childHeight + child.getSorter()._getVerticalPadding() * 2) / 2;
} else {
offset = this._treeSet.isLeaf(child) ? 0 : -(childHeight - nodeHeight) / 2;
}
@@ -189,8 +191,7 @@ class OriginalLayout {
static _branchIsTaller(node, heightById) {
return (
- heightById[node.getId()]
- > node.getSize().height + node.getSorter()._getVerticalPadding() * 2
+ heightById[node.getId()] > node.getSize().height + node.getSorter()._getVerticalPadding() * 2
);
}
@@ -200,9 +201,9 @@ class OriginalLayout {
if (node.isFree()) {
this._shiftBranches(node, heightById);
}
- children.forEach(((child) => {
+ children.forEach((child) => {
this._fixOverlapping(child, heightById);
- }));
+ });
}
_shiftBranches(node, heightById) {
@@ -213,27 +214,28 @@ class OriginalLayout {
node.getFreeDisplacement().y,
);
- siblingsToShift.forEach(((sibling) => {
- const overlappingOccurs = shiftedBranches.some(
- ((shiftedBranch) => OriginalLayout._branchesOverlap(shiftedBranch, sibling, heightById)),
+ siblingsToShift.forEach((sibling) => {
+ /* eslint-disable */
+ const overlappingOccurs = shiftedBranches.some((shiftedBranch) =>
+ OriginalLayout._branchesOverlap(shiftedBranch, sibling, heightById),
);
-
+ /* eslint-enable */
if (!sibling.isFree() || overlappingOccurs) {
const sAmount = node.getFreeDisplacement().y;
this._treeSet.shiftBranchPosition(sibling, 0, sAmount);
shiftedBranches.push(sibling);
}
- }));
+ });
const branchesToShift = this._treeSet
.getBranchesInVerticalDirection(node, node.getFreeDisplacement().y)
.filter((branch) => !shiftedBranches.includes(branch));
- branchesToShift.forEach(((branch) => {
+ branchesToShift.forEach((branch) => {
const bAmount = node.getFreeDisplacement().y;
this._treeSet.shiftBranchPosition(branch, 0, bAmount);
shiftedBranches.push(branch);
- }));
+ });
}
static _branchesOverlap(branchA, branchB, heightById) {
diff --git a/packages/mindplot/src/components/layout/RootedTreeSet.ts b/packages/mindplot/src/components/layout/RootedTreeSet.ts
index 4637fe96..efc7c3fb 100644
--- a/packages/mindplot/src/components/layout/RootedTreeSet.ts
+++ b/packages/mindplot/src/components/layout/RootedTreeSet.ts
@@ -62,12 +62,12 @@ class RootedTreeSet {
}
/**
- * @param parentId
- * @param childId
- * @throws will throw an error if parentId is null or undefined
- * @throws will throw an error if childId is null or undefined
- * @throws will throw an error if node with id childId is already a child of parent
- */
+ * @param parentId
+ * @param childId
+ * @throws will throw an error if parentId is null or undefined
+ * @throws will throw an error if childId is null or undefined
+ * @throws will throw an error if node with id childId is already a child of parent
+ */
connect(parentId: number, childId: number) {
$assert($defined(parentId), 'parent can not be null');
$assert($defined(childId), 'child can not be null');
@@ -85,10 +85,10 @@ class RootedTreeSet {
}
/**
- * @param nodeId
- * @throws will throw an error if nodeId is null or undefined
- * @throws will throw an error if node is not connected
- */
+ * @param nodeId
+ * @throws will throw an error if nodeId is null or undefined
+ * @throws will throw an error if node is not connected
+ */
disconnect(nodeId: number) {
$assert($defined(nodeId), 'nodeId can not be null');
const node = this.find(nodeId);
@@ -100,12 +100,12 @@ class RootedTreeSet {
}
/**
- * @param id
- * @param validate
- * @throws will throw an error if id is null or undefined
- * @throws will throw an error if node cannot be found
- * @return node
- */
+ * @param id
+ * @param validate
+ * @throws will throw an error if id is null or undefined
+ * @throws will throw an error if node cannot be found
+ * @return node
+ */
find(id: number, validate = true): Node {
$assert($defined(id), 'id can not be null');
@@ -143,20 +143,20 @@ class RootedTreeSet {
}
/**
- * @param node
- * @throws will throw an error if nodeId is null or undefined
- * @return children
- */
+ * @param node
+ * @throws will throw an error if nodeId is null or undefined
+ * @return children
+ */
getChildren(node: Node): Node[] {
$assert(node, 'node cannot be null');
return node._children;
}
/**
- * @param node
- * @throws will throw an error if node is null or undefined
- * @return root node or the provided node, if it has no parent
- */
+ * @param node
+ * @throws will throw an error if node is null or undefined
+ * @return root node or the provided node, if it has no parent
+ */
getRootNode(node: Node) {
$assert(node, 'node cannot be null');
const parent = this.getParent(node);
@@ -168,9 +168,9 @@ class RootedTreeSet {
}
/**
- * @param node
- * @throws will throw an error if node is null or undefined
- * @return {Array} ancestors */
+ * @param node
+ * @throws will throw an error if node is null or undefined
+ * @return {Array} ancestors */
getAncestors(node: Node): Node[] {
$assert(node, 'node cannot be null');
return this._getAncestors(this.getParent(node), []);
@@ -186,10 +186,10 @@ class RootedTreeSet {
}
/**
- * @param node
- * @throws will throw an error if node is null or undefined
- * @return {Array} siblings
- */
+ * @param node
+ * @throws will throw an error if node is null or undefined
+ * @return {Array} siblings
+ */
getSiblings(node: Node): Node[] {
$assert(node, 'node cannot be null');
if (!$defined(node._parent)) {
@@ -200,10 +200,10 @@ class RootedTreeSet {
}
/**
- * @param node
- * @throws will throw an error if node is null or undefined
- * @return {Boolean} whether the node has a single path to a single leaf (no branching)
- */
+ * @param node
+ * @throws will throw an error if node is null or undefined
+ * @return {Boolean} whether the node has a single path to a single leaf (no branching)
+ */
hasSinglePathToSingleLeaf(node: Node): boolean {
$assert(node, 'node cannot be null');
return this._hasSinglePathToSingleLeaf(node);
@@ -220,27 +220,27 @@ class RootedTreeSet {
}
/**
- * @param node
- * @return {Boolean} whether the node is the start of a subbranch */
+ * @param node
+ * @return {Boolean} whether the node is the start of a subbranch */
isStartOfSubBranch(node: Node): boolean {
return this.getSiblings(node).length > 0 && this.getChildren(node).length === 1;
}
/**
- * @param node
- * @throws will throw an error if node is null or undefined
- * @return {Boolean} whether the node is a leaf
- */
+ * @param node
+ * @throws will throw an error if node is null or undefined
+ * @return {Boolean} whether the node is a leaf
+ */
isLeaf(node: Node): boolean {
$assert(node, 'node cannot be null');
return this.getChildren(node).length === 0;
}
/**
- * @param node
- * @throws will throw an error if node is null or undefined
- * @return parent
- */
+ * @param node
+ * @throws will throw an error if node is null or undefined
+ * @return parent
+ */
getParent(node: Node): Node {
$assert(node, 'node cannot be null');
return node._parent;
@@ -271,8 +271,8 @@ class RootedTreeSet {
}
/**
- * @param canvas
- */
+ * @param canvas
+ */
plot(canvas) {
const branches = this._rootNodes;
for (let i = 0; i < branches.length; i++) {
@@ -297,9 +297,7 @@ class RootedTreeSet {
if (this._rootNodes.includes(node)) {
fillColor = '#000';
} else {
- fillColor = node.isFree()
- ? '#abc'
- : '#c00';
+ fillColor = node.isFree() ? '#abc' : '#c00';
}
rect.attr('fill', fillColor);
@@ -310,28 +308,20 @@ class RootedTreeSet {
const rectSize = { width: rect.attr('width'), height: rect.attr('height') };
rect.click(() => {
console.log(
- `[id:${node.getId()
- }, order:${node.getOrder()
- }, position:(${rectPosition.x
- }, ${rectPosition.y
- }), size:${rectSize.width
- },${rectSize.height
- }, freeDisplacement:(${node.getFreeDisplacement().x
- },${node.getFreeDisplacement().y
- })]`,
+ `[id:${node.getId()}, order:${node.getOrder()}, position:(${rectPosition.x}, ${
+ rectPosition.y
+ }), size:${rectSize.width},${rectSize.height}, freeDisplacement:(${
+ node.getFreeDisplacement().x
+ },${node.getFreeDisplacement().y})]`,
);
});
text.click(() => {
console.log(
- `[id:${node.getId()
- }, order:${node.getOrder()
- }, position:(${rectPosition.x
- },${rectPosition.y
- }), size:${rectSize.width
- }x${rectSize.height
- }, freeDisplacement:(${node.getFreeDisplacement().x
- },${node.getFreeDisplacement().y
- })]`,
+ `[id:${node.getId()}, order:${node.getOrder()}, position:(${rectPosition.x},${
+ rectPosition.y
+ }), size:${rectSize.width}x${rectSize.height}, freeDisplacement:(${
+ node.getFreeDisplacement().x
+ },${node.getFreeDisplacement().y})]`,
);
});
@@ -342,9 +332,9 @@ class RootedTreeSet {
}
/**
- * @param node
- * @param position
- */
+ * @param node
+ * @param position
+ */
updateBranchPosition(node: Node, position: PositionType): void {
const oldPos = node.getPosition();
node.setPosition(position);
@@ -360,10 +350,10 @@ class RootedTreeSet {
}
/**
- * @param node
- * @param xOffset
- * @param yOffset
- */
+ * @param node
+ * @param xOffset
+ * @param yOffset
+ */
shiftBranchPosition(node: Node, xOffset: number, yOffset: number): void {
const position = node.getPosition();
node.setPosition({ x: position.x + xOffset, y: position.y + yOffset });
@@ -376,21 +366,21 @@ class RootedTreeSet {
}
/**
- * @param node
- * @param yOffset
- * @return siblings in the offset (vertical) direction, i.e. with lower or higher order
- */
+ * @param node
+ * @param yOffset
+ * @return siblings in the offset (vertical) direction, i.e. with lower or higher order
+ */
getSiblingsInVerticalDirection(node: Node, yOffset: number): Node[] {
// siblings with lower or higher order
// (depending on the direction of the offset and on the same side as their parent)
const parent = this.getParent(node);
const siblings = this.getSiblings(node).filter((sibling) => {
- const sameSide = node.getPosition().x > parent.getPosition().x
- ? sibling.getPosition().x > parent.getPosition().x
- : sibling.getPosition().x < parent.getPosition().x;
- const orderOK = yOffset < 0
- ? sibling.getOrder() < node.getOrder()
- : sibling.getOrder() > node.getOrder();
+ const sameSide =
+ node.getPosition().x > parent.getPosition().x
+ ? sibling.getPosition().x > parent.getPosition().x
+ : sibling.getPosition().x < parent.getPosition().x;
+ const orderOK =
+ yOffset < 0 ? sibling.getOrder() < node.getOrder() : sibling.getOrder() > node.getOrder();
return orderOK && sameSide;
});
@@ -402,26 +392,27 @@ class RootedTreeSet {
}
/**
- * @param node
- * @param yOffset
- * @return branches of the root node on the same side as the given node's, in the given
- * vertical direction
- */
+ * @param node
+ * @param yOffset
+ * @return branches of the root node on the same side as the given node's, in the given
+ * vertical direction
+ */
getBranchesInVerticalDirection(node: Node, yOffset: number): Node[] {
// direct descendants of the root that do not contain the node and are on the same side
// and on the direction of the offset
const rootNode = this.getRootNode(node);
- const branches = this.getChildren(rootNode)
- .filter(((child) => this._find(node.getId(), child)));
+ const branches = this.getChildren(rootNode).filter((child) => this._find(node.getId(), child));
const branch = branches[0];
const result = this.getSiblings(branch).filter((sibling) => {
- const sameSide = node.getPosition().x > rootNode.getPosition().x
- ? sibling.getPosition().x > rootNode.getPosition().x
- : sibling.getPosition().x < rootNode.getPosition().x;
- const sameDirection = yOffset < 0
- ? sibling.getOrder() < branch.getOrder()
- : sibling.getOrder() > branch.getOrder();
+ const sameSide =
+ node.getPosition().x > rootNode.getPosition().x
+ ? sibling.getPosition().x > rootNode.getPosition().x
+ : sibling.getPosition().x < rootNode.getPosition().x;
+ const sameDirection =
+ yOffset < 0
+ ? sibling.getOrder() < branch.getOrder()
+ : sibling.getOrder() > branch.getOrder();
return sameSide && sameDirection;
}, this);
diff --git a/packages/mindplot/src/components/layout/SymmetricSorter.js b/packages/mindplot/src/components/layout/SymmetricSorter.js
index 0fa82bcb..5a4e7326 100644
--- a/packages/mindplot/src/components/layout/SymmetricSorter.js
+++ b/packages/mindplot/src/components/layout/SymmetricSorter.js
@@ -20,44 +20,37 @@ import AbstractBasicSorter from './AbstractBasicSorter';
class SymmetricSorter extends AbstractBasicSorter {
/**
- * Predict the order and position of a dragged node.
- *
- * @param graph The tree set
- * @param parent The parent of the node
- * @param node The node
- * @param position The position of the drag
- * @param free Free drag or not
- * @return {*}
- */
+ * Predict the order and position of a dragged node.
+ *
+ * @param graph The tree set
+ * @param parent The parent of the node
+ * @param node The node
+ * @param position The position of the drag
+ * @param free Free drag or not
+ * @return {*}
+ */
predict(graph, parent, node, position, free) {
const self = this;
const rootNode = graph.getRootNode(parent);
// If its a free node...
if (free) {
- $assert($defined(position),
- 'position cannot be null for predict in free positioning');
+ $assert($defined(position), 'position cannot be null for predict in free positioning');
$assert($defined(node), 'node cannot be null for predict in free positioning');
- const direction = this._getRelativeDirection(
- rootNode.getPosition(),
- parent.getPosition(),
- );
- const limitXPos = parent.getPosition().x
- + direction
- * (parent.getSize().width / 2
- + node.getSize().width / 2
- + SymmetricSorter.INTERNODE_HORIZONTAL_PADDING);
+ const direction = this._getRelativeDirection(rootNode.getPosition(), parent.getPosition());
+ const limitXPos =
+ parent.getPosition().x +
+ direction *
+ (parent.getSize().width / 2 +
+ node.getSize().width / 2 +
+ SymmetricSorter.INTERNODE_HORIZONTAL_PADDING);
let xPos;
if (direction > 0) {
- xPos = position.x >= limitXPos
- ? position.x
- : limitXPos;
+ xPos = position.x >= limitXPos ? position.x : limitXPos;
} else {
- xPos = position.x <= limitXPos
- ? position.x
- : limitXPos;
+ xPos = position.x <= limitXPos ? position.x : limitXPos;
}
return [0, { x: xPos, y: position.y }];
}
@@ -71,9 +64,8 @@ class SymmetricSorter extends AbstractBasicSorter {
const result = {
x:
- parent.getPosition().x
- + parentDirection
- * (parent.getSize().width + SymmetricSorter.INTERNODE_HORIZONTAL_PADDING),
+ parent.getPosition().x +
+ parentDirection * (parent.getSize().width + SymmetricSorter.INTERNODE_HORIZONTAL_PADDING),
y: parent.getPosition().y,
};
return [graph.getChildren(parent).length, result];
@@ -81,10 +73,7 @@ class SymmetricSorter extends AbstractBasicSorter {
// If it is a dragged node...
$assert($defined(position), 'position cannot be null for predict in dragging');
- const nodeDirection = this._getRelativeDirection(
- rootNode.getPosition(),
- node.getPosition(),
- );
+ const nodeDirection = this._getRelativeDirection(rootNode.getPosition(), node.getPosition());
const positionDirection = this._getRelativeDirection(rootNode.getPosition(), position);
const siblings = graph.getSiblings(node);
@@ -98,9 +87,10 @@ class SymmetricSorter extends AbstractBasicSorter {
if (parentChildren.length === 0) {
// Fit as a child of the parent node...
const result = {
- x: parent.getPosition().x
- + positionDirection
- * (parent.getSize().width + SymmetricSorter.INTERNODE_HORIZONTAL_PADDING),
+ x:
+ parent.getPosition().x +
+ positionDirection *
+ (parent.getSize().width + SymmetricSorter.INTERNODE_HORIZONTAL_PADDING),
y: parent.getPosition().y,
};
@@ -115,41 +105,38 @@ class SymmetricSorter extends AbstractBasicSorter {
// Fit at the bottom
if (!nodeAfter && position.y > parentChild.getPosition().y) {
- const order = graph.getParent(node) && graph.getParent(node).getId() === parent.getId()
- ? last.getOrder()
- : last.getOrder() + 1;
+ const order =
+ graph.getParent(node) && graph.getParent(node).getId() === parent.getId()
+ ? last.getOrder()
+ : last.getOrder() + 1;
const result = {
x: parentChild.getPosition().x,
y:
- parentChild.getPosition().y
- + parentChild.getSize().height
- + SymmetricSorter.INTERNODE_VERTICAL_PADDING * 2,
+ parentChild.getPosition().y +
+ parentChild.getSize().height +
+ SymmetricSorter.INTERNODE_VERTICAL_PADDING * 2,
};
return [order, result];
}
// Fit after this node
if (
- nodeAfter
- && position.y > parentChild.getPosition().y
- && position.y < nodeAfter.getPosition().y
+ nodeAfter &&
+ position.y > parentChild.getPosition().y &&
+ position.y < nodeAfter.getPosition().y
) {
- if (
- nodeAfter.getId() === node.getId()
- || parentChild.getId() === node.getId()
- ) {
+ if (nodeAfter.getId() === node.getId() || parentChild.getId() === node.getId()) {
return [node.getOrder(), node.getPosition()];
}
- const orderResult = position.y > node.getPosition().y
- ? nodeAfter.getOrder() - 1
- : parentChild.getOrder() + 1;
+ const orderResult =
+ position.y > node.getPosition().y ? nodeAfter.getOrder() - 1 : parentChild.getOrder() + 1;
const positionResult = {
x: parentChild.getPosition().x,
y:
- parentChild.getPosition().y
- + (nodeAfter.getPosition().y - parentChild.getPosition().y) / 2,
+ parentChild.getPosition().y +
+ (nodeAfter.getPosition().y - parentChild.getPosition().y) / 2,
};
return [orderResult, positionResult];
@@ -161,20 +148,20 @@ class SymmetricSorter extends AbstractBasicSorter {
const resultPosition = {
x: first.getPosition().x,
y:
- first.getPosition().y
- - first.getSize().height
- - SymmetricSorter.INTERNODE_VERTICAL_PADDING * 2,
+ first.getPosition().y -
+ first.getSize().height -
+ SymmetricSorter.INTERNODE_VERTICAL_PADDING * 2,
};
return [0, resultPosition];
}
/**
- * @param treeSet
- * @param parent
- * @param child
- * @param order
- * @throws will throw an error if the order is not strictly continuous
- */
+ * @param treeSet
+ * @param parent
+ * @param child
+ * @param order
+ * @throws will throw an error if the order is not strictly continuous
+ */
insert(treeSet, parent, child, order) {
const children = this._getSortedChildren(treeSet, parent);
$assert(
@@ -191,9 +178,9 @@ class SymmetricSorter extends AbstractBasicSorter {
}
/**
- * @param treeSet
- * @param node
- * @throws will throw an error if the node is in the wrong position */
+ * @param treeSet
+ * @param node
+ * @throws will throw an error if the node is in the wrong position */
detach(treeSet, node) {
const parent = treeSet.getParent(node);
const children = this._getSortedChildren(treeSet, parent);
@@ -227,13 +214,14 @@ class SymmetricSorter extends AbstractBasicSorter {
// Compute heights ...
const heights = children
- .map(((child) => ({
+ .map((child) => ({
id: child.getId(),
order: child.getOrder(),
position: child.getPosition(),
width: child.getSize().width,
height: this._computeChildrenHeight(treeSet, child),
- }))).reverse();
+ }))
+ .reverse();
// Compute the center of the branch ...
let totalHeight = 0;
@@ -250,10 +238,11 @@ class SymmetricSorter extends AbstractBasicSorter {
const direction = this.getChildDirection(treeSet, childNode);
const yOffset = ysum + heights[i].height / 2;
- const xOffset = direction
- * (heights[i].width / 2
- + node.getSize().width / 2
- + SymmetricSorter.INTERNODE_HORIZONTAL_PADDING);
+ const xOffset =
+ direction *
+ (heights[i].width / 2 +
+ node.getSize().width / 2 +
+ SymmetricSorter.INTERNODE_HORIZONTAL_PADDING);
$assert(!Number.isNaN(xOffset), 'xOffset can not be null');
$assert(!Number.isNaN(yOffset), 'yOffset can not be null');
@@ -264,10 +253,10 @@ class SymmetricSorter extends AbstractBasicSorter {
}
/**
- * @param treeSet
- * @param node
- * @throws will throw an error if order elements are missing
- */
+ * @param treeSet
+ * @param node
+ * @throws will throw an error if order elements are missing
+ */
verify(treeSet, node) {
// Check that all is consistent ...
const children = this._getSortedChildren(treeSet, node);
diff --git a/packages/mindplot/src/components/model/FeatureModel.ts b/packages/mindplot/src/components/model/FeatureModel.ts
index 8fb14a55..27a32afd 100644
--- a/packages/mindplot/src/components/model/FeatureModel.ts
+++ b/packages/mindplot/src/components/model/FeatureModel.ts
@@ -28,11 +28,11 @@ class FeatureModel {
private _attributes;
/**
- * @constructs
- * @param type
- * @throws will throw an exception if type is null or undefined
- * assigns a unique id and the given type to the new model
- */
+ * @constructs
+ * @param type
+ * @throws will throw an exception if type is null or undefined
+ * assigns a unique id and the given type to the new model
+ */
constructor(type: FeatureType) {
$assert(type, 'type can not be null');
this._id = FeatureModel._nextUUID();
diff --git a/packages/mindplot/src/components/model/FeatureModelFactory.ts b/packages/mindplot/src/components/model/FeatureModelFactory.ts
index 95fb9649..2fb7487a 100644
--- a/packages/mindplot/src/components/model/FeatureModelFactory.ts
+++ b/packages/mindplot/src/components/model/FeatureModelFactory.ts
@@ -6,35 +6,38 @@ import FeatureModel from './FeatureModel';
import FeatureType from './FeatureType';
interface NodeById {
- id: FeatureType,
+ id: FeatureType;
model: typeof FeatureModel;
}
class FeatureModelFactory {
- static modelById: Array = [{
- id: 'icon',
- model: IconModel,
- }, {
- id: 'link',
- model: LinkModel,
- }, {
- id: 'note',
- model: NoteModel,
- }];
+ static modelById: Array = [
+ {
+ id: 'icon',
+ model: IconModel,
+ },
+ {
+ id: 'link',
+ model: LinkModel,
+ },
+ {
+ id: 'note',
+ model: NoteModel,
+ },
+ ];
static createModel(type: FeatureType, attributes): FeatureModel {
$assert(type, 'type can not be null');
$assert(attributes, 'attributes can not be null');
- const { model: Model } = FeatureModelFactory.modelById
- .filter((elem) => elem.id === type)[0];
+ const { model: Model } = FeatureModelFactory.modelById.filter((elem) => elem.id === type)[0];
return new Model(attributes);
}
/**
- * @param id the feature metadata id
- * @return {Boolean} returns true if the given id is contained in the metadata array
- */
+ * @param id the feature metadata id
+ * @return {Boolean} returns true if the given id is contained in the metadata array
+ */
static isSupported(type: string): boolean {
return FeatureModelFactory.modelById.some((elem) => elem.id === type);
}
diff --git a/packages/mindplot/src/components/model/IMindmap.ts b/packages/mindplot/src/components/model/IMindmap.ts
index fa119af0..95a15e59 100644
--- a/packages/mindplot/src/components/model/IMindmap.ts
+++ b/packages/mindplot/src/components/model/IMindmap.ts
@@ -30,7 +30,7 @@ abstract class IMindmap {
abstract setDescription(value: string): void;
- abstract getId(): string
+ abstract getId(): string;
abstract setId(id: string): void;
@@ -58,10 +58,10 @@ abstract class IMindmap {
}
/**
- * @param child
- * @throws will throw an error if child is null or undefined
- * @throws will throw an error if child's parent cannot be found
- */
+ * @param child
+ * @throws will throw an error if child is null or undefined
+ * @throws will throw an error if child's parent cannot be found
+ */
disconnect(child: INodeModel): void {
const parent = child.getParent();
$assert(child, 'Child can not be null.');
@@ -73,7 +73,7 @@ abstract class IMindmap {
abstract hasAlreadyAdded(node): boolean;
- abstract createNode(type: NodeType, id: number)
+ abstract createNode(type: NodeType, id: number);
abstract createRelationship(fromNodeId: number, toNodeId: number): void;
@@ -81,7 +81,7 @@ abstract class IMindmap {
abstract deleteRelationship(relationship: RelationshipModel): void;
- inspect():string {
+ inspect(): string {
let result = '';
result = '{ ';
@@ -102,7 +102,7 @@ abstract class IMindmap {
return result;
}
- copyTo(target:IMindmap) {
+ copyTo(target: IMindmap) {
const version = this.getVersion();
target.setVersion(version);
diff --git a/packages/mindplot/src/components/model/INodeModel.ts b/packages/mindplot/src/components/model/INodeModel.ts
index 46bb9e3a..214ff9fd 100644
--- a/packages/mindplot/src/components/model/INodeModel.ts
+++ b/packages/mindplot/src/components/model/INodeModel.ts
@@ -24,7 +24,8 @@ import Mindmap from './Mindmap';
export type NodeModelType = 'CentralTopic' | 'MainTopic';
// regex taken from https://stackoverflow.com/a/34763398/58128
-const parseJsObject = (str: string) => JSON.parse(str.replace(/(['"])?([a-z0-9A-Z_]+)(['"])?:/g, '"$2": '));
+const parseJsObject = (str: string) =>
+ JSON.parse(str.replace(/(['"])?([a-z0-9A-Z_]+)(['"])?:/g, '"$2": '));
abstract class INodeModel {
static MAIN_TOPIC_TO_MAIN_TOPIC_DISTANCE = 220;
@@ -90,7 +91,7 @@ abstract class INodeModel {
this.putProperty('imageSize', `{width:${width},height:${height}}`);
}
- getImageSize(): { width: number, height: number } {
+ getImageSize(): { width: number; height: number } {
const value = this.getProperty('imageSize') as string;
let result;
if (value != null) {
@@ -120,9 +121,9 @@ abstract class INodeModel {
}
/**
- * lets the mindmap handle the disconnect node operation
- * @see mindplot.model.IMindmap.disconnect
- */
+ * lets the mindmap handle the disconnect node operation
+ * @see mindplot.model.IMindmap.disconnect
+ */
disconnect(): void {
const mindmap = this.getMindmap();
mindmap.disconnect(this);
@@ -233,10 +234,10 @@ abstract class INodeModel {
abstract append(node): void;
/**
- * lets the mindmap handle the connect node operation
- * @throws will throw an error if parent is null or undefined
- * @see mindplot.model.IMindmap.connect
- */
+ * lets the mindmap handle the connect node operation
+ * @throws will throw an error if parent is null or undefined
+ * @see mindplot.model.IMindmap.connect
+ */
connectTo(parent: INodeModel) {
$assert(parent, 'parent can not be null');
const mindmap = this.getMindmap();
@@ -244,9 +245,9 @@ abstract class INodeModel {
}
/**
- * @param target
- * @return target
- */
+ * @param target
+ * @return target
+ */
copyTo(target: INodeModel): INodeModel {
const source = this;
// Copy properties ...
@@ -270,9 +271,9 @@ abstract class INodeModel {
}
/**
- * lets parent handle the delete node operation, or, if none defined, calls the mindmap to
- * remove the respective branch
- */
+ * lets parent handle the delete node operation, or, if none defined, calls the mindmap to
+ * remove the respective branch
+ */
deleteNode(): void {
const mindmap = this.getMindmap();
diff --git a/packages/mindplot/src/components/model/IconModel.ts b/packages/mindplot/src/components/model/IconModel.ts
index 7f0d6058..58b35370 100644
--- a/packages/mindplot/src/components/model/IconModel.ts
+++ b/packages/mindplot/src/components/model/IconModel.ts
@@ -28,7 +28,7 @@ class IconModel extends FeatureModel {
return this.getAttribute('id') as string;
}
- setIconType(iconType: string):void {
+ setIconType(iconType: string): void {
$assert(iconType, 'iconType id can not be null');
this.setAttribute('id', iconType);
}
diff --git a/packages/mindplot/src/components/model/LinkModel.ts b/packages/mindplot/src/components/model/LinkModel.ts
index ac22f946..02647e3e 100644
--- a/packages/mindplot/src/components/model/LinkModel.ts
+++ b/packages/mindplot/src/components/model/LinkModel.ts
@@ -41,16 +41,20 @@ class LinkModel extends FeatureModel {
// url format is already checked in LinkEditor.checkUrl
static _fixUrl(url: string): string {
let result = url;
- if (!result.includes('http://') && !result.includes('https://') && !result.includes('mailto://')) {
+ if (
+ !result.includes('http://') &&
+ !result.includes('https://') &&
+ !result.includes('mailto://')
+ ) {
result = `http://${result}`;
}
return result;
}
/**
- * @param {String} urlType the url type, either 'mail' or 'url'
- * @throws will throw an error if urlType is null or undefined
- */
+ * @param {String} urlType the url type, either 'mail' or 'url'
+ * @throws will throw an error if urlType is null or undefined
+ */
setUrlType(urlType) {
$assert(urlType, 'urlType can not be null');
this.setAttribute('urlType', urlType);
diff --git a/packages/mindplot/src/components/model/Mindmap.ts b/packages/mindplot/src/components/model/Mindmap.ts
index 1363afef..0d3b40fb 100644
--- a/packages/mindplot/src/components/model/Mindmap.ts
+++ b/packages/mindplot/src/components/model/Mindmap.ts
@@ -75,10 +75,10 @@ class Mindmap extends IMindmap {
}
/**
- * @param {mindplot.model.NodeModel} nodeModel
- * @throws will throw an error if nodeModel is null, undefined or not a node model object
- * @throws will throw an error if
- */
+ * @param {mindplot.model.NodeModel} nodeModel
+ * @throws will throw an error if nodeModel is null, undefined or not a node model object
+ * @throws will throw an error if
+ */
addBranch(nodeModel: INodeModel): void {
$assert(nodeModel && nodeModel.isNodeModel(), 'Add node must be invoked with model objects');
const branches = this.getBranches();
@@ -93,14 +93,14 @@ class Mindmap extends IMindmap {
}
/**
- * @param nodeModel
- */
+ * @param nodeModel
+ */
removeBranch(nodeModel: INodeModel): void {
$assert(nodeModel && nodeModel.isNodeModel(), 'Remove node must be invoked with model objects');
this._branches = this._branches.filter((b) => b !== nodeModel);
}
- getBranches():NodeModel[] {
+ getBranches(): NodeModel[] {
return this._branches;
}
@@ -122,7 +122,7 @@ class Mindmap extends IMindmap {
return result;
}
- createNode(type: NodeModelType = 'MainTopic', id?: number):NodeModel {
+ createNode(type: NodeModelType = 'MainTopic', id?: number): NodeModel {
return new NodeModel(type, this, id);
}
@@ -141,8 +141,8 @@ class Mindmap extends IMindmap {
}
/**
- * @param relationship
- */
+ * @param relationship
+ */
deleteRelationship(relationship: RelationshipModel) {
this._relationships = this._relationships.filter((r) => r !== relationship);
}
diff --git a/packages/mindplot/src/components/model/NodeModel.ts b/packages/mindplot/src/components/model/NodeModel.ts
index cabd914a..32cd2957 100644
--- a/packages/mindplot/src/components/model/NodeModel.ts
+++ b/packages/mindplot/src/components/model/NodeModel.ts
@@ -49,18 +49,18 @@ class NodeModel extends INodeModel {
}
/**
- * @param type
- * @param attributes
- * @return {mindplot.model.FeatureModel} the created feature model
- */
+ * @param type
+ * @param attributes
+ * @return {mindplot.model.FeatureModel} the created feature model
+ */
createFeature(type: FeatureType, attributes): FeatureModel {
return FeatureModelFactory.createModel(type, attributes);
}
/**
- * @param feature
- * @throws will throw an error if feature is null or undefined
- */
+ * @param feature
+ * @throws will throw an error if feature is null or undefined
+ */
addFeature(feature: FeatureModel) {
$assert(feature, 'feature can not be null');
this._features.push(feature);
@@ -78,20 +78,20 @@ class NodeModel extends INodeModel {
}
/**
- * @param {String} type the feature type, e.g. icon or link
- * @throws will throw an error if type is null or undefined
- */
+ * @param {String} type the feature type, e.g. icon or link
+ * @throws will throw an error if type is null or undefined
+ */
findFeatureByType(type: string): FeatureModel[] {
$assert(type, 'type can not be null');
return this._features.filter((feature) => feature.getType() === type);
}
/**
- * @param {String} id
- * @throws will throw an error if id is null or undefined
- * @throws will throw an error if feature could not be found
- * @return the feature with the given id
- */
+ * @param {String} id
+ * @throws will throw an error if id is null or undefined
+ * @throws will throw an error if feature could not be found
+ * @return the feature with the given id
+ */
findFeatureById(id: number): FeatureModel {
$assert($defined(id), 'id can not be null');
const result = this._features.filter((feature) => feature.getId() === id);
@@ -104,10 +104,10 @@ class NodeModel extends INodeModel {
}
/**
- * @param key
- * @param value
- * @throws will throw an error if key is null or undefined
- */
+ * @param key
+ * @param value
+ * @throws will throw an error if key is null or undefined
+ */
putProperty(key: string, value: string | number | boolean) {
$defined(key, 'key can not be null');
this._properties[key] = value;
diff --git a/packages/mindplot/src/components/model/RelationshipModel.ts b/packages/mindplot/src/components/model/RelationshipModel.ts
index ddf34d7d..3fb8686c 100644
--- a/packages/mindplot/src/components/model/RelationshipModel.ts
+++ b/packages/mindplot/src/components/model/RelationshipModel.ts
@@ -108,8 +108,8 @@ class RelationshipModel {
}
/**
- * @return a clone of the relationship model
- */
+ * @return a clone of the relationship model
+ */
clone() {
const result = new RelationshipModel(this._sourceTargetId, this._targetTopicId);
result._id = this._id;
@@ -122,14 +122,10 @@ class RelationshipModel {
}
/**
- * @return {String} textual information about the relationship's source and target node
- */
+ * @return {String} textual information about the relationship's source and target node
+ */
inspect(): string {
- return (
- `(fromNode:${this.getFromNode()
- } , toNode: ${this.getToNode()
- })`
- );
+ return `(fromNode:${this.getFromNode()} , toNode: ${this.getToNode()})`;
}
static _nextUUID() {
diff --git a/packages/mindplot/src/components/persistence/Pela2TangoMigrator.ts b/packages/mindplot/src/components/persistence/Pela2TangoMigrator.ts
index 40ce6134..62262978 100644
--- a/packages/mindplot/src/components/persistence/Pela2TangoMigrator.ts
+++ b/packages/mindplot/src/components/persistence/Pela2TangoMigrator.ts
@@ -83,7 +83,7 @@ class Pela2TangoMigrator implements XMLMindmapSerializer {
}
}
- private _fixNodePosition(node: NodeModel, parentPosition: { x: number, y: number }): void {
+ private _fixNodePosition(node: NodeModel, parentPosition: { x: number; y: number }): void {
// Position was not required in previous versions. Try to synthesize one .
let position = node.getPosition();
if (!position) {
diff --git a/packages/mindplot/src/components/persistence/XMLMindmapSerializer.ts b/packages/mindplot/src/components/persistence/XMLMindmapSerializer.ts
index bb5f5ca6..39f146c3 100644
--- a/packages/mindplot/src/components/persistence/XMLMindmapSerializer.ts
+++ b/packages/mindplot/src/components/persistence/XMLMindmapSerializer.ts
@@ -19,7 +19,7 @@
import Mindmap from '../model/Mindmap';
interface XMLMindmapSerializer {
- toXML(mindmap: Mindmap): Document;
- loadFromDom(dom: Document, mapId: string): Mindmap;
+ toXML(mindmap: Mindmap): Document;
+ loadFromDom(dom: Document, mapId: string): Mindmap;
}
export default XMLMindmapSerializer;
diff --git a/packages/mindplot/src/components/persistence/XMLSerializerBeta.ts b/packages/mindplot/src/components/persistence/XMLSerializerBeta.ts
index 16e90335..3b9e8744 100644
--- a/packages/mindplot/src/components/persistence/XMLSerializerBeta.ts
+++ b/packages/mindplot/src/components/persistence/XMLSerializerBeta.ts
@@ -14,9 +14,7 @@
* See the License for the specific language governing permissions and
* limitations under the License.
*/
-import {
- $defined, $assert, createDocument,
-} from '@wisemapping/core-js';
+import { $defined, $assert, createDocument } from '@wisemapping/core-js';
import ModelCodeName from './ModelCodeName';
import Mindmap from '../model/Mindmap';
import FeatureModelFactory from '../model/FeatureModelFactory';
@@ -99,11 +97,11 @@ class XMLSerializerBeta implements XMLMindmapSerializer {
font += `${fontStyle || ''};`;
if (
- $defined(fontFamily)
- || $defined(fontSize)
- || $defined(fontColor)
- || $defined(fontWeight)
- || $defined(fontStyle)
+ $defined(fontFamily) ||
+ $defined(fontSize) ||
+ $defined(fontColor) ||
+ $defined(fontWeight) ||
+ $defined(fontStyle)
) {
parentTopic.setAttribute('fontStyle', font);
}
@@ -180,7 +178,8 @@ class XMLSerializerBeta implements XMLMindmapSerializer {
// Is a wisemap?.
$assert(
documentElement.tagName === XMLSerializerBeta.MAP_ROOT_NODE,
- `This seem not to be a map document. Root Tag: '${documentElement.tagName}',HTML:${dom.innerHTML
+ `This seem not to be a map document. Root Tag: '${documentElement.tagName}',HTML:${
+ dom.innerHTML
}, XML:,${new XMLSerializer().serializeToString(dom)}`,
);
@@ -202,9 +201,7 @@ class XMLSerializerBeta implements XMLMindmapSerializer {
}
_deserializeNode(domElem, mindmap) {
- const type = domElem.getAttribute('central') != null
- ? 'CentralTopic'
- : 'MainTopic';
+ const type = domElem.getAttribute('central') != null ? 'CentralTopic' : 'MainTopic';
const topic = mindmap.createNode(type);
// Load attributes...
@@ -275,10 +272,10 @@ class XMLSerializerBeta implements XMLMindmapSerializer {
const child = children[i];
if (child.nodeType === 1) {
$assert(
- child.tagName === 'topic'
- || child.tagName === 'icon'
- || child.tagName === 'link'
- || child.tagName === 'note',
+ child.tagName === 'topic' ||
+ child.tagName === 'icon' ||
+ child.tagName === 'link' ||
+ child.tagName === 'note',
`Illegal node type:${child.tagName}`,
);
if (child.tagName === 'topic') {
diff --git a/packages/mindplot/src/components/persistence/XMLSerializerFactory.ts b/packages/mindplot/src/components/persistence/XMLSerializerFactory.ts
index 0919bc63..a6c43b55 100644
--- a/packages/mindplot/src/components/persistence/XMLSerializerFactory.ts
+++ b/packages/mindplot/src/components/persistence/XMLSerializerFactory.ts
@@ -24,7 +24,7 @@ import XMLSerializerTango from './XMLSerializerTango';
import Mindmap from '../model/Mindmap';
import XMLMindmapSerializer from './XMLMindmapSerializer';
-const codeToSerializer: { codeName: string, serializer, migrator }[] = [
+const codeToSerializer: { codeName: string; serializer; migrator }[] = [
{
codeName: ModelCodeName.BETA,
serializer: XMLSerializerBeta,
@@ -51,8 +51,7 @@ class XMLSerializerFactory {
* mindplot.persistence.XMLSerializer_Tango} serializer corresponding to the mindmap's version
*/
static createInstanceFromMindmap(mindmap: Mindmap) {
- return XMLSerializerFactory
- .getSerializer(mindmap.getVersion());
+ return XMLSerializerFactory.getSerializer(mindmap.getVersion());
}
/**
@@ -83,7 +82,7 @@ class XMLSerializerFactory {
if (!found) {
found = codeToSerializer[i].codeName === version;
// eslint-disable-next-line new-cap
- if (found) result = new (codeToSerializer[i].serializer)();
+ if (found) result = new codeToSerializer[i].serializer();
} else {
const { migrator } = codeToSerializer[i];
// eslint-disable-next-line new-cap
diff --git a/packages/mindplot/src/components/persistence/XMLSerializerTango.ts b/packages/mindplot/src/components/persistence/XMLSerializerTango.ts
index e8e7b719..ecc68706 100644
--- a/packages/mindplot/src/components/persistence/XMLSerializerTango.ts
+++ b/packages/mindplot/src/components/persistence/XMLSerializerTango.ts
@@ -60,8 +60,8 @@ class XMLSerializerTango implements XMLMindmapSerializer {
const relationships = mindmap.getRelationships();
relationships.forEach((relationship) => {
if (
- mindmap.findNodeById(relationship.getFromNode()) !== null
- && mindmap.findNodeById(relationship.getToNode()) !== null
+ mindmap.findNodeById(relationship.getFromNode()) !== null &&
+ mindmap.findNodeById(relationship.getToNode()) !== null
) {
// Isolated relationships are not persisted ....
const relationDom = XMLSerializerTango._relationshipToXML(document, relationship);
@@ -99,14 +99,15 @@ class XMLSerializerTango implements XMLMindmapSerializer {
if (shape === TopicShape.IMAGE) {
const size = topic.getImageSize();
- parentTopic.setAttribute(
- 'image',
- `${size.width},${size.height}:${topic.getImageUrl()}`,
- );
+ parentTopic.setAttribute('image', `${size.width},${size.height}:${topic.getImageUrl()}`);
}
}
- if ((topic.areChildrenShrunken() && topic.getChildren().length > 0) && topic.getType() !== 'CentralTopic') {
+ if (
+ topic.areChildrenShrunken() &&
+ topic.getChildren().length > 0 &&
+ topic.getType() !== 'CentralTopic'
+ ) {
parentTopic.setAttribute('shrink', 'true');
}
@@ -132,11 +133,11 @@ class XMLSerializerTango implements XMLMindmapSerializer {
font += `${fontStyle || ''};`;
if (
- $defined(fontFamily)
- || $defined(fontSize)
- || $defined(fontColor)
- || $defined(fontWeight)
- || $defined(fontStyle)
+ $defined(fontFamily) ||
+ $defined(fontSize) ||
+ $defined(fontColor) ||
+ $defined(fontWeight) ||
+ $defined(fontStyle)
) {
parentTopic.setAttribute('fontStyle', font);
}
@@ -208,10 +209,7 @@ class XMLSerializerTango implements XMLMindmapSerializer {
if (lineType === ConnectionLine.CURVED || lineType === ConnectionLine.SIMPLE_CURVED) {
if ($defined(relationship.getSrcCtrlPoint())) {
const srcPoint = relationship.getSrcCtrlPoint();
- result.setAttribute(
- 'srcCtrlPoint',
- `${Math.round(srcPoint.x)},${Math.round(srcPoint.y)}`,
- );
+ result.setAttribute('srcCtrlPoint', `${Math.round(srcPoint.x)},${Math.round(srcPoint.y)}`);
}
if ($defined(relationship.getDestCtrlPoint())) {
const destPoint = relationship.getDestCtrlPoint();
@@ -246,9 +244,7 @@ class XMLSerializerTango implements XMLMindmapSerializer {
// Add all the topics nodes ...
const childNodes = Array.from(rootElem.childNodes);
const topicsNodes = childNodes
- .filter(
- (child: ChildNode) => child.nodeType === 1 && (child as Element).tagName === 'topic',
- )
+ .filter((child: ChildNode) => child.nodeType === 1 && (child as Element).tagName === 'topic')
.map((c) => c as Element);
topicsNodes.forEach((child) => {
const topic = this._deserializeNode(child, mindmap);
@@ -488,16 +484,16 @@ class XMLSerializerTango implements XMLMindmapSerializer {
}
/**
- * This method ensures that the output String has only
- * valid XML unicode characters as specified by the
- * XML 1.0 standard. For reference, please see
- * the
- * standard. This method will return an empty
- * String if the input is null or empty.
- *
- * @param in The String whose non-valid characters we want to remove.
- * @return The in String, stripped of non-valid characters.
- */
+ * This method ensures that the output String has only
+ * valid XML unicode characters as specified by the
+ * XML 1.0 standard. For reference, please see
+ * the
+ * standard. This method will return an empty
+ * String if the input is null or empty.
+ *
+ * @param in The String whose non-valid characters we want to remove.
+ * @return The in String, stripped of non-valid characters.
+ */
protected _rmXmlInv(str: string) {
if (str == null || str === undefined) return null;
@@ -505,12 +501,12 @@ class XMLSerializerTango implements XMLMindmapSerializer {
for (let i = 0; i < str.length; i++) {
const c = str.charCodeAt(i);
if (
- c === 0x9
- || c === 0xa
- || c === 0xd
- || (c >= 0x20 && c <= 0xd7ff)
- || (c >= 0xe000 && c <= 0xfffd)
- || (c >= 0x10000 && c <= 0x10ffff)
+ c === 0x9 ||
+ c === 0xa ||
+ c === 0xd ||
+ (c >= 0x20 && c <= 0xd7ff) ||
+ (c >= 0xe000 && c <= 0xfffd) ||
+ (c >= 0x10000 && c <= 0x10ffff)
) {
result += str.charAt(i);
}
diff --git a/packages/mindplot/src/components/styles/mindplot-styles.js b/packages/mindplot/src/components/styles/mindplot-styles.js
new file mode 100644
index 00000000..d5e26f73
--- /dev/null
+++ b/packages/mindplot/src/components/styles/mindplot-styles.js
@@ -0,0 +1,132 @@
+const mindplotStyles = `
+
+ div#mindplot {
+ position: relative;
+ left: 0;
+ width: 100%;
+ height: 100%;
+ border: 0;
+ overflow: hidden;
+ opacity: 1;
+ background-color: #f2f2f2;
+ background-image: linear-gradient(#ebe9e7 1px, transparent 1px),
+ linear-gradient(to right, #ebe9e7 1px, #f2f2f2 1px);
+ background-size: 50px 50px;
+ }
+
+ .mindplot-svg-tooltip {
+ display: none;
+ color: rgb(51, 51, 51);
+ text-align: center;
+ padding: 1px;
+ border-radius: 6px;
+ position: absolute;
+ z-index: 999;
+ background-color: rgb(255, 255, 255);
+ animation: fadeIn 0.4s;
+ }
+
+ .fade-in {
+ animation: fadeIn ease 0.4s;
+ -webkit-animation: fadeIn ease 0.4s;
+ -moz-animation: fadeIn ease 0.4s;
+ -o-animation: fadeIn ease 0.4s;
+ -ms-animation: fadeIn ease 0.4s;
+ }
+
+ @keyframes fadeIn {
+ 0% { opacity: 0; }
+ 100% { opacity: 1; }
+ }
+
+ @-moz-keyframes fadeIn {
+ 0% { opacity: 0; }
+ 100% { opacity: 1; }
+ }
+
+ @-webkit-keyframes fadeIn {
+ 0% { opacity: 0; }
+ 100% { opacity: 1; }
+ }
+
+ @-o-keyframes fadeIn {
+ 0% { opacity: 0; }
+ 100% { opacity: 1; }
+ }
+
+ @-ms-keyframes fadeIn {
+ 0% { opacity: 0; }
+ 100% { opacity: 1; }
+ }
+
+.mindplot-svg-tooltip-title {
+ background-color: rgb(247, 247, 247);
+ border-bottom-color: rgb(235, 235, 235);
+ border-bottom-left-radius: 0px;
+ border-bottom-right-radius: 0px;
+ border-bottom-style: solid;
+ border-bottom-width: 1px;
+ border-top-left-radius: 5px;
+ border-top-right-radius: 5px;
+ box-sizing: border-box;
+ color: rgb(51, 51, 51);
+ cursor: default;
+ display: block;
+ padding: 8px 14px;
+ text-align: left;
+ font-family: Arial;
+ font-size: small;
+}
+
+.mindplot-svg-tooltip-content {
+ background-color: rgb(255, 255, 255);
+ padding: 6px 4px;
+ max-width: 250px;
+}
+
+.mindplot-svg-tooltip-content-link {
+ padding: 3px 5px;
+ overflow: hidden;
+ font-size: smaller;
+ text-decoration: none;
+ font-family: Arial;
+ font-size: small;
+ color: #428bca;
+}
+
+.mindplot-svg-tooltip-content-note {
+ text-align: left;
+ font-family: Arial;
+ font-size: small;
+}
+
+.mindplot-svg-tooltip:before {
+ content: "";
+ position: absolute;
+ width: 0;
+ height: 0;
+ border-left: 10px solid transparent;
+ border-right: 10px solid transparent;
+ border-bottom: 10px solid #fff;
+ bottom: 100%;
+ right: 50%;
+ transform: translateX(50%);
+ z-index: 5;
+ }
+
+ .mindplot-svg-tooltip:after {
+ content: "";
+ display: block;
+ position: absolute;
+ width: 0;
+ height: 0;
+ border-left: 10px solid transparent;
+ border-right: 10px solid transparent;
+ border-bottom: 10px solid rgb(247, 247, 247);
+ bottom: calc(1px + 100%);
+ right: 50%;
+ transform: translateX(50%);
+ }
+`;
+
+export default mindplotStyles;
diff --git a/packages/mindplot/src/components/util/Shape.js b/packages/mindplot/src/components/util/Shape.js
index f5f42f20..2feefc04 100644
--- a/packages/mindplot/src/components/util/Shape.js
+++ b/packages/mindplot/src/components/util/Shape.js
@@ -106,10 +106,7 @@ const Shape = {
const x2 = tarPos.x + Math.sqrt((l * l) / (1 + m * m)) * fix * -1;
const y2 = m * (x2 - tarPos.x) + tarPos.y;
- return [
- new Point(-srcPos.x + x1, -srcPos.y + y1),
- new Point(-tarPos.x + x2, -tarPos.y + y2),
- ];
+ return [new Point(-srcPos.x + x1, -srcPos.y + y1), new Point(-tarPos.x + x2, -tarPos.y + y2)];
},
workoutIncomingConnectionPoint(targetNode, sourcePosition) {
diff --git a/packages/mindplot/src/components/widget/bootstrap/BootstrapDialog.js b/packages/mindplot/src/components/widget/bootstrap/BootstrapDialog.js
deleted file mode 100644
index 3ba59482..00000000
--- a/packages/mindplot/src/components/widget/bootstrap/BootstrapDialog.js
+++ /dev/null
@@ -1,156 +0,0 @@
-/*
- * Copyright [2021] [wisemapping]
- *
- * Licensed under WiseMapping Public License, Version 1.0 (the "License").
- * It is basically the Apache License, Version 2.0 (the "License") plus the
- * "powered by wisemapping" text requirement on every single page;
- * you may not use this file except in compliance with the License.
- * You may obtain a copy of the license at
- *
- * http://www.wisemapping.org/license
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- */
-
-import $ from 'jquery';
-import Options from '../../Options';
-import { $msg } from '../../Messages';
-
-class BootstrapDialog extends Options {
- constructor(title, options) {
- super();
- this.options = {
- cancelButton: false,
- closeButton: false,
- acceptButton: true,
- removeButton: false,
- errorMessage: false,
- onEventData: {},
- };
-
- this.setOptions(options);
- this.options.onEventData.dialog = this;
- this._native = $('').append(
- '',
- );
- const content = $('');
- const header = this._buildHeader(title);
-
- if (header) {
- content.append(header);
- }
- const body = $('');
- if (this.options.errorMessage) {
- const error = $('');
- error.hide();
- body.append(error);
- }
- content.append(body);
- const footer = this._buildFooter();
- if (footer) {
- content.append(footer);
- }
- this._native.find('.modal-dialog').append(content);
- this._native.on('hidden.bs.modal', function remove() {
- $(this).remove();
- });
- this._native.on('shown.bs.modal', this.onDialogShown);
-
- this._native.appendTo('#mindplot-tooltips');
- }
-
- _buildFooter() {
- let footer = null;
- if (this.options.acceptButton || this.options.removeButton || this.options.cancelButton) {
- footer = $('}>
+
+
}>
+
- 
-
- {(editorMode === 'edition-editor' || editorMode === 'edition-owner') && (
-
-
- 
-
-
- )}
- {(editorMode === 'edition-editor' || editorMode === 'edition-owner' || editorMode === 'showcase') && (
- <>
-
-
- 
-
-
- 
-
-
-
-
- 
-
-
- 
-
-
- 
-
-
- 
-
-
- 
-
-
-
-
- 
-
-
- 
-
-
- 
-
-
- 
-
-
- 
-
-
-
-
- 
-
-
- 
-
-
- 
-
-
- 
-
-
-
-
- )}
-
+
+ onAction('export')}>
+
+
+ {(editorMode === 'edition-owner' ||
+ editorMode === 'edition-editor' ||
+ editorMode === 'edition-viewer') && (
+ onAction('print')}>
+
+
+ )}
+ onAction('info')}>
+
+
+ {editorMode === 'edition-owner' && (
+ <>
+ onAction('history')}>
+
+
+ onAction('publish')}
+ >
+
+
+
+ )}
+ {(editorMode === 'edition-owner' || editorMode === 'edition-editor') && (
+
+
+
+ )}
+ {editorMode === 'edition-owner' && (
+ onAction('share')}>
+ {intl.formatMessage({ id: 'action.share', defaultMessage: 'Share' })}
+
+ )}
+
+
+
+
+
+ {(editorMode === 'edition-editor' || editorMode === 'edition-owner') && (
+
+
+
+
+
+ )}
+ {(editorMode === 'edition-editor' ||
+ editorMode === 'edition-owner' ||
+ editorMode === 'showcase') && (
+ <>
+
+
+
+
+
+
+
-
- );
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ )}
+
+ {options.mode !== 'viewonly' && !isMobile && (
+
+ @wisemapping/editor - Playground
-You will find here a set of examples that shows how you can use integrate WiseMapping Editor
-
-
+ -
-
- View mode: Simple integration to load and render mindaps in read - only mode -
- Editor mode: Example on how mindplot can be used for mindmap edition. Browser local storage is used for persistance. -
@wisemapping/editor - Playground
+You will find here a set of examples that shows how you can use integrate WiseMapping Editor
+
+
\ No newline at end of file
diff --git a/packages/editor/test/playground/map-render/css/viewmode.css b/packages/editor/test/playground/map-render/css/viewmode.css
index a4f63a31..50b0d003 100644
--- a/packages/editor/test/playground/map-render/css/viewmode.css
+++ b/packages/editor/test/playground/map-render/css/viewmode.css
@@ -1,33 +1,33 @@
/* Overwrite some styles */
div#footer {
- width: 100%;
- padding: 20px 30px;
- height: 80px;
- position: absolute;
- bottom: 0;
- background-color: #ffa800;
+ width: 100%;
+ padding: 20px 30px;
+ height: 80px;
+ position: absolute;
+ bottom: 0;
+ background-color: #ffa800;
}
div#footer-desc {
- float: left;
- height: 100px;
- padding: 0px 10px;
+ float: left;
+ height: 100px;
+ padding: 0px 10px;
}
div#footer-logo {
- float: left;
- height: 100px;
+ float: left;
+ height: 100px;
}
#floating-panel {
- bottom: 80px;
- align-items: stretch;
+ bottom: 20px;
+ align-items: stretch;
}
div#mindplot {
- top:0;
+ top: 0;
}
#toolbar {
- display: none;
-}
\ No newline at end of file
+ display: none;
+}
diff --git a/packages/editor/test/playground/map-render/html/editor.html b/packages/editor/test/playground/map-render/html/editor.html
index 5f9fa974..dd6bd63d 100644
--- a/packages/editor/test/playground/map-render/html/editor.html
+++ b/packages/editor/test/playground/map-render/html/editor.html
@@ -10,8 +10,8 @@
-
-
+
+
\ No newline at end of file
diff --git a/packages/editor/test/playground/map-render/html/showcase.html b/packages/editor/test/playground/map-render/html/showcase.html
new file mode 100644
index 00000000..dd6bd63d
--- /dev/null
+++ b/packages/editor/test/playground/map-render/html/showcase.html
@@ -0,0 +1,17 @@
+
+
+
+
+
+ View Mode:Simple integration to load and render mindaps in read only mode.
+-
+
- Welcome +
- Sample 1 +
- Sample 2 +
- Sample 3 +
- Sample 4 +
- Sample 5 +
- Sample 6 +
- Sample 7 +
- Sample 8 +
- Image support +
- Error on load +
- Complex +
- Huge +
- Icon Sample +
Editor Mode:Example on how mindplot can be used for mindmap edition. Browser local storage is used for persistance.
+-
+
- Sample +
Showcase Mode:When an user wants to try the editor without creating an account.
+-
+
- Sample +
- 
-
+
diff --git a/packages/editor/test/playground/map-render/js/editor.tsx b/packages/editor/test/playground/map-render/js/editor.tsx
index 5571beac..4dc1037c 100644
--- a/packages/editor/test/playground/map-render/js/editor.tsx
+++ b/packages/editor/test/playground/map-render/js/editor.tsx
@@ -21,9 +21,8 @@ import Editor, { EditorOptions } from '../../../../src/index';
import { LocalStorageManager, Designer } from '@wisemapping/mindplot';
const initialization = (designer: Designer) => {
-
designer.addEvent('loadSuccess', () => {
- const elem = document.getElementById('mindplot');
+ const elem = document.getElementById('mindmap-comp');
if (elem) {
elem.classList.add('ready');
}
@@ -35,10 +34,10 @@ const mapId = 'welcome';
const options: EditorOptions = {
zoom: 0.8,
locked: false,
- mapTitle: "Develop WiseMapping",
+ mapTitle: 'Develop WiseMapping',
mode: 'edition-owner',
locale: 'en',
- enableKeyboardEvents: true
+ enableKeyboardEvents: true,
};
ReactDOM.render(
diff --git a/packages/editor/test/playground/map-render/js/showcase.tsx b/packages/editor/test/playground/map-render/js/showcase.tsx
new file mode 100644
index 00000000..acd5de82
--- /dev/null
+++ b/packages/editor/test/playground/map-render/js/showcase.tsx
@@ -0,0 +1,52 @@
+/*
+ * Copyright [2021] [wisemapping]
+ *
+ * Licensed under WiseMapping Public License, Version 1.0 (the "License").
+ * It is basically the Apache License, Version 2.0 (the "License") plus the
+ * "powered by wisemapping" text requirement on every single page;
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the license at
+ *
+ * http://www.wisemapping.org/license
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+import React from 'react';
+import ReactDOM from 'react-dom';
+import Editor, { EditorOptions } from '../../../../src/index';
+import { LocalStorageManager, Designer } from '@wisemapping/mindplot';
+
+const initialization = (designer: Designer) => {
+ designer.addEvent('loadSuccess', () => {
+ const elem = document.getElementById('mindmap-comp');
+ if (elem) {
+ elem.classList.add('ready');
+ }
+ });
+};
+
+const persistence = new LocalStorageManager('samples/{id}.wxml', false, false);
+const mapId = 'welcome';
+const options: EditorOptions = {
+ zoom: 0.8,
+ locked: false,
+ mapTitle: 'Develop WiseMapping',
+ mode: 'showcase',
+ locale: 'en',
+ enableKeyboardEvents: true,
+};
+
+ReactDOM.render(
+
+
);
+}
+```
+
+
Check out the examples located in `test/playground/map-render/js` for some hints on high level usage. You can browse them by running `yarn playground`.
diff --git a/packages/mindplot/cypress/support/commands.js b/packages/mindplot/cypress/support/commands.js
index 85cef3a6..01a233cb 100644
--- a/packages/mindplot/cypress/support/commands.js
+++ b/packages/mindplot/cypress/support/commands.js
@@ -18,7 +18,6 @@ if (Cypress.env('imageSnaphots')) {
}
// https://www.cypress.io/blog/2020/02/12/working-with-iframes-in-cypress/
-Cypress.Commands.add('getIframeBody', () => cy
- .get('iframe')
- .its('0.contentDocument.body').should('not.be.empty')
- .then(cy.wrap));
+Cypress.Commands.add('getIframeBody', () =>
+ cy.get('iframe').its('0.contentDocument.body').should('not.be.empty').then(cy.wrap),
+);
diff --git a/packages/mindplot/package.json b/packages/mindplot/package.json
index 30285421..5623bdc4 100644
--- a/packages/mindplot/package.json
+++ b/packages/mindplot/package.json
@@ -1,6 +1,6 @@
{
"name": "@wisemapping/mindplot",
- "version": "5.0.12",
+ "version": "5.0.14",
"description": "WiseMapping - Mindplot Canvas Library",
"homepage": "http://www.wisemapping.org/",
"directories": {
@@ -41,7 +41,7 @@
"xml-formatter": "^2.6.1"
},
"devDependencies": {
- "@babel/core": "^7.14.6",
+ "@babel/core": "^7.18.13",
"@babel/preset-env": "^7.14.7",
"@babel/preset-typescript": "^7.16.5",
"@babel/register": "^7.16.0",
@@ -71,7 +71,7 @@
"ts-jest": "^27.1.2",
"ts-loader": "^9.2.6",
"ts-node": "^10.4.0",
- "webpack": "^5.44.0",
+ "webpack": "^5.74.0",
"webpack-bundle-analyzer": "^4.5.0",
"webpack-cli": "^4.7.2",
"webpack-dev-server": "^3.11.2",
diff --git a/packages/mindplot/src/@types/custom.d.ts b/packages/mindplot/src/@types/custom.d.ts
index 60bd434c..091d25e2 100644
--- a/packages/mindplot/src/@types/custom.d.ts
+++ b/packages/mindplot/src/@types/custom.d.ts
@@ -1,4 +1,4 @@
declare module '*.svg' {
- const content: any;
- export default content;
+ const content: any;
+ export default content;
}
diff --git a/packages/mindplot/src/components/Command.ts b/packages/mindplot/src/components/Command.ts
index c70584ad..46bf5a05 100644
--- a/packages/mindplot/src/components/Command.ts
+++ b/packages/mindplot/src/components/Command.ts
@@ -1,20 +1,20 @@
/*
-* Copyright [2021] [wisemapping]
-*
-* Licensed under WiseMapping Public License, Version 1.0 (the "License").
-* It is basically the Apache License, Version 2.0 (the "License") plus the
-* "powered by wisemapping" text requirement on every single page;
-* you may not use this file except in compliance with the License.
-* You may obtain a copy of the license at
-*
-* http://www.wisemapping.org/license
-*
-* Unless required by applicable law or agreed to in writing, software
-* distributed under the License is distributed on an "AS IS" BASIS,
-* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
-* See the License for the specific language governing permissions and
-* limitations under the License.
-*/
+ * Copyright [2021] [wisemapping]
+ *
+ * Licensed under WiseMapping Public License, Version 1.0 (the "License").
+ * It is basically the Apache License, Version 2.0 (the "License") plus the
+ * "powered by wisemapping" text requirement on every single page;
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the license at
+ *
+ * http://www.wisemapping.org/license
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
import { $defined } from '@wisemapping/core-js';
import CommandContext from './CommandContext';
diff --git a/packages/mindplot/src/components/CommandContext.ts b/packages/mindplot/src/components/CommandContext.ts
index 054f491e..1e947b94 100644
--- a/packages/mindplot/src/components/CommandContext.ts
+++ b/packages/mindplot/src/components/CommandContext.ts
@@ -47,9 +47,9 @@ class CommandContext {
if (result.length !== topicsIds.length) {
const ids = designerTopics.map((topic) => topic.getId());
- throw new Error(`Could not find topic. Result:${result
- } Filter Criteria:${topicsIds
- } Current Topics: [${ids}])`);
+ throw new Error(
+ `Could not find topic. Result:${result} Filter Criteria:${topicsIds} Current Topics: [${ids}])`,
+ );
}
return result;
}
diff --git a/packages/mindplot/src/components/ConnectionLine.ts b/packages/mindplot/src/components/ConnectionLine.ts
index 40bdf7b3..cc223f4f 100644
--- a/packages/mindplot/src/components/ConnectionLine.ts
+++ b/packages/mindplot/src/components/ConnectionLine.ts
@@ -17,9 +17,7 @@
*/
import { $assert, $defined } from '@wisemapping/core-js';
-import {
- Point, CurvedLine, PolyLine, Line,
-} from '@wisemapping/web2d';
+import { Point, CurvedLine, PolyLine, Line } from '@wisemapping/web2d';
import { TopicShape } from './model/INodeModel';
import RelationshipModel from './model/RelationshipModel';
import Topic from './Topic';
diff --git a/packages/mindplot/src/components/Designer.ts b/packages/mindplot/src/components/Designer.ts
index a17b0189..262307c8 100644
--- a/packages/mindplot/src/components/Designer.ts
+++ b/packages/mindplot/src/components/Designer.ts
@@ -56,6 +56,7 @@ import { DesignerOptions } from './DesignerOptionsBuilder';
import DragTopic from './DragTopic';
import CentralTopic from './CentralTopic';
import FeatureType from './model/FeatureType';
+import WidgetManager from './WidgetManager';
class Designer extends Events {
private _mindmap: Mindmap;
@@ -82,7 +83,6 @@ class Designer extends Events {
super();
$assert(options, 'options must be defined');
$assert(options.zoom, 'zoom must be defined');
- $assert(options.containerSize, 'size must be defined');
$assert(divElement, 'divElement must be defined');
// Set up i18n location ...
@@ -91,10 +91,10 @@ class Designer extends Events {
this._options = options;
- // Set full div elem render area ...
- if (options.containerSize) {
- divElement.css(options.containerSize);
- }
+ // Set full div elem render area.The component must fill container size
+ // container is responsible for location and size
+ divElement.css('width', '100%');
+ divElement.css('height', '100%');
// Dispatcher manager ...
const commandContext = new CommandContext(this);
@@ -138,14 +138,18 @@ class Designer extends Events {
private _registerWheelEvents(): void {
const zoomFactor = 1.02;
- document.addEventListener('wheel', (event: WheelEvent) => {
- if (event.deltaX > 0 || event.deltaY > 0) {
- this.zoomOut(zoomFactor);
- } else {
- this.zoomIn(zoomFactor);
- }
- event.preventDefault();
- }, { passive: false });
+ document.addEventListener(
+ 'wheel',
+ (event: WheelEvent) => {
+ if (event.deltaX > 0 || event.deltaY > 0) {
+ this.zoomOut(zoomFactor);
+ } else {
+ this.zoomIn(zoomFactor);
+ }
+ event.preventDefault();
+ },
+ { passive: false },
+ );
}
getActionDispatcher(): StandaloneActionDispatcher {
@@ -187,8 +191,7 @@ class Designer extends Events {
screenManager.addEvent('dblclick', (event: MouseEvent) => {
if (workspace.isWorkspaceEventsEnabled()) {
const mousePos = screenManager.getWorkspaceMousePosition(event);
- const centralTopic: CentralTopic = me.getModel()
- .getCentralTopic();
+ const centralTopic: CentralTopic = me.getModel().getCentralTopic();
const model = me._createChildModel(centralTopic, mousePos);
this._actionDispatcher.addTopics([model], [centralTopic.getId()]);
@@ -568,9 +571,9 @@ class Designer extends Events {
}
/**
- * @param {mindplot.Mindmap} mindmap
- * @throws will throw an error if mindmapModel is null or undefined
- */
+ * @param {mindplot.Mindmap} mindmap
+ * @throws will throw an error if mindmapModel is null or undefined
+ */
loadMap(mindmap: Mindmap): void {
$assert(mindmap, 'mindmapModel can not be null');
this._mindmap = mindmap;
@@ -644,11 +647,11 @@ class Designer extends Events {
}
/**
- * @private
- * @param {mindplot.model.RelationshipModel} model
- * @return {mindplot.Relationship} the relationship created to the model
- * @throws will throw an error if model is null or undefined
- */
+ * @private
+ * @param {mindplot.model.RelationshipModel} model
+ * @return {mindplot.Relationship} the relationship created to the model
+ * @throws will throw an error if model is null or undefined
+ */
private _relationshipModelToRelationship(model: RelationshipModel): Relationship {
$assert(model, 'Node model can not be null');
@@ -667,9 +670,9 @@ class Designer extends Events {
}
/**
- * @param {mindplot.model.RelationshipModel} model
- * @return {mindplot.Relationship} the relationship added to the mindmap
- */
+ * @param {mindplot.model.RelationshipModel} model
+ * @return {mindplot.Relationship} the relationship added to the mindmap
+ */
addRelationship(model: RelationshipModel): Relationship {
const mindmap = this.getMindmap();
mindmap.addRelationship(model);
@@ -677,9 +680,9 @@ class Designer extends Events {
}
/**
- * deletes the relationship from the linked topics, DesignerModel, Workspace and Mindmap
- * @param {mindplot.Relationship} rel the relationship to delete
- */
+ * deletes the relationship from the linked topics, DesignerModel, Workspace and Mindmap
+ * @param {mindplot.Relationship} rel the relationship to delete
+ */
deleteRelationship(rel: Relationship): void {
const sourceTopic = rel.getSourceTopic();
sourceTopic.deleteRelationship(rel);
@@ -704,9 +707,7 @@ class Designer extends Events {
const targetTopic = dmodel.findTopicById(targetTopicId);
$assert(
targetTopic,
- `targetTopic could not be found:${targetTopicId},${dmodel
- .getTopics()
- .map((e) => e.getId())}`,
+ `targetTopic could not be found:${targetTopicId},${dmodel.getTopics().map((e) => e.getId())}`,
);
// Build relationship line ....
@@ -797,16 +798,14 @@ class Designer extends Events {
}
changeFontFamily(font: string) {
- const topicsIds = this.getModel()
- .filterTopicsIds();
+ const topicsIds = this.getModel().filterTopicsIds();
if (topicsIds.length > 0) {
this._actionDispatcher.changeFontFamilyToTopic(topicsIds, font);
}
}
changeFontStyle(): void {
- const topicsIds = this.getModel()
- .filterTopicsIds();
+ const topicsIds = this.getModel().filterTopicsIds();
if (topicsIds.length > 0) {
this._actionDispatcher.changeFontStyleToTopic(topicsIds);
}
@@ -815,8 +814,7 @@ class Designer extends Events {
changeFontColor(color: string) {
$assert(color, 'color can not be null');
- const topicsIds = this.getModel()
- .filterTopicsIds();
+ const topicsIds = this.getModel().filterTopicsIds();
if (topicsIds.length > 0) {
this._actionDispatcher.changeFontColorToTopic(topicsIds, color);
@@ -851,9 +849,8 @@ class Designer extends Events {
}
changeTopicShape(shape: string) {
- const validateFunc = (topic: Topic) => !(
- topic.getType() === 'CentralTopic' && shape === TopicShape.LINE
- );
+ const validateFunc = (topic: Topic) =>
+ !(topic.getType() === 'CentralTopic' && shape === TopicShape.LINE);
const validateError = 'Central Topic shape can not be changed to line figure.';
const topicsIds = this.getModel().filterTopicsIds(validateFunc, validateError);
@@ -872,9 +869,13 @@ class Designer extends Events {
addIconType(iconType: string): void {
const topicsIds = this.getModel().filterTopicsIds();
if (topicsIds.length > 0) {
- this._actionDispatcher.addFeatureToTopic(topicsIds[0], TopicFeatureFactory.Icon.id as FeatureType, {
- id: iconType,
- });
+ this._actionDispatcher.addFeatureToTopic(
+ topicsIds[0],
+ TopicFeatureFactory.Icon.id as FeatureType,
+ {
+ id: iconType,
+ },
+ );
}
}
@@ -882,7 +883,8 @@ class Designer extends Events {
const model = this.getModel();
const topic = model.selectedTopic();
if (topic) {
- topic.showLinkEditor();
+ const manager = WidgetManager.getInstance();
+ manager.showEditorForLink(topic, null, null);
this.onObjectFocusEvent();
}
}
@@ -891,7 +893,8 @@ class Designer extends Events {
const model = this.getModel();
const topic = model.selectedTopic();
if (topic) {
- topic.showNoteEditor();
+ const manager = WidgetManager.getInstance();
+ manager.showEditorForNote(topic, null, null);
this.onObjectFocusEvent();
}
}
diff --git a/packages/mindplot/src/components/DesignerBuilder.ts b/packages/mindplot/src/components/DesignerBuilder.ts
index c5ce43aa..e8160a61 100644
--- a/packages/mindplot/src/components/DesignerBuilder.ts
+++ b/packages/mindplot/src/components/DesignerBuilder.ts
@@ -20,11 +20,12 @@ import $ from 'jquery';
import PersistenceManager from './PersistenceManager';
import Designer from './Designer';
import { DesignerOptions } from './DesignerOptionsBuilder';
+import WidgetManager from './WidgetManager';
let designer: Designer;
export function buildDesigner(options: DesignerOptions): Designer {
- const divContainer = $(`#${options.container}`);
+ const divContainer = options.divContainer ? $(options.divContainer) : $(`#${options.container}`);
$assert(divContainer, 'container could not be null');
// Register load events ...
@@ -34,7 +35,8 @@ export function buildDesigner(options: DesignerOptions): Designer {
const persistence = options.persistenceManager;
$assert(persistence, 'persistence must be defined');
PersistenceManager.init(persistence);
-
+ const widgetManager = options.widgetManager ? options.widgetManager : new WidgetManager();
+ WidgetManager.init(widgetManager);
return designer;
}
diff --git a/packages/mindplot/src/components/DesignerKeyboard.ts b/packages/mindplot/src/components/DesignerKeyboard.ts
index 22dba459..6ed0e917 100644
--- a/packages/mindplot/src/components/DesignerKeyboard.ts
+++ b/packages/mindplot/src/components/DesignerKeyboard.ts
@@ -33,7 +33,22 @@ class DesignerKeyboard extends Keyboard {
private static _disabled: boolean;
- private static excludeFromEditor = ['Enter', 'CapsLock', 'Escape', 'F1', 'F3', 'F4', 'F5', 'F6', 'F7', 'F8', 'F9', 'F10', 'F11', 'F12'];
+ private static excludeFromEditor = [
+ 'Enter',
+ 'CapsLock',
+ 'Escape',
+ 'F1',
+ 'F3',
+ 'F4',
+ 'F5',
+ 'F6',
+ 'F7',
+ 'F8',
+ 'F9',
+ 'F10',
+ 'F11',
+ 'F12',
+ ];
constructor(designer: Designer) {
super();
@@ -53,9 +68,13 @@ class DesignerKeyboard extends Keyboard {
private _registerEvents(designer: Designer) {
// Try with the keyboard ..
const model = designer.getModel();
- this.addShortcut(['backspace', 'del'], () => { designer.deleteSelectedEntities(); });
+ this.addShortcut(['backspace', 'del'], () => {
+ designer.deleteSelectedEntities();
+ });
- this.addShortcut('space', () => { designer.shrinkSelectedBranch(); });
+ this.addShortcut('space', () => {
+ designer.shrinkSelectedBranch();
+ });
this.addShortcut('f2', () => {
const node = model.selectedTopic();
@@ -64,103 +83,128 @@ class DesignerKeyboard extends Keyboard {
}
});
- this.addShortcut(['insert', 'tab', 'meta+enter'], () => { designer.createChildForSelectedNode(); });
+ this.addShortcut(['insert', 'tab', 'meta+enter'], () => {
+ designer.createChildForSelectedNode();
+ });
- this.addShortcut('enter', () => { designer.createSiblingForSelectedNode(); });
+ this.addShortcut('enter', () => {
+ designer.createSiblingForSelectedNode();
+ });
- this.addShortcut(['ctrl+z', 'meta+z'], () => { designer.undo(); });
+ this.addShortcut(['ctrl+z', 'meta+z'], () => {
+ designer.undo();
+ });
- this.addShortcut(['ctrl+shift+z', 'meta+shift+z'], () => { designer.redo(); });
+ this.addShortcut(['ctrl+shift+z', 'meta+shift+z'], () => {
+ designer.redo();
+ });
- this.addShortcut(['ctrl+c', 'meta+c'], () => { designer.copyToClipboard(); });
+ this.addShortcut(['ctrl+c', 'meta+c'], () => {
+ designer.copyToClipboard();
+ });
- this.addShortcut(['ctrl+l', 'meta+l'], () => { designer.addLink(); });
+ this.addShortcut(['ctrl+l', 'meta+l'], () => {
+ designer.addLink();
+ });
- this.addShortcut(['ctrl+k', 'meta+k'], () => { designer.addNote(); });
+ this.addShortcut(['ctrl+k', 'meta+k'], () => {
+ designer.addNote();
+ });
- this.addShortcut(['ctrl+v', 'meta+v'], () => { designer.pasteClipboard(); });
+ this.addShortcut(['ctrl+v', 'meta+v'], () => {
+ designer.pasteClipboard();
+ });
- this.addShortcut(['ctrl+a', 'meta+a'], () => { designer.selectAll(); });
+ this.addShortcut(['ctrl+a', 'meta+a'], () => {
+ designer.selectAll();
+ });
- this.addShortcut(['ctrl+b', 'meta+b'], () => { designer.changeFontWeight(); });
+ this.addShortcut(['ctrl+b', 'meta+b'], () => {
+ designer.changeFontWeight();
+ });
- this.addShortcut(['ctrl+s', 'meta+s'], () => { $(document).find('#save').trigger('click'); });
+ this.addShortcut(['ctrl+s', 'meta+s'], () => {
+ $(document).find('#save').trigger('click');
+ });
- this.addShortcut(['ctrl+i', 'meta+i'], () => { designer.changeFontStyle(); });
+ this.addShortcut(['ctrl+i', 'meta+i'], () => {
+ designer.changeFontStyle();
+ });
- this.addShortcut(['ctrl+shift+a', 'meta+shift+a'], () => { designer.deselectAll(); });
+ this.addShortcut(['ctrl+shift+a', 'meta+shift+a'], () => {
+ designer.deselectAll();
+ });
- this.addShortcut(['meta+=', 'ctrl+='], () => { designer.zoomIn(); });
+ this.addShortcut(['meta+=', 'ctrl+='], () => {
+ designer.zoomIn();
+ });
- this.addShortcut(['meta+-', 'ctrl+-'], () => { designer.zoomOut(); });
+ this.addShortcut(['meta+-', 'ctrl+-'], () => {
+ designer.zoomOut();
+ });
const me = this;
- this.addShortcut(
- 'right', () => {
- const node = model.selectedTopic();
- if (node) {
- if (node.isCentralTopic()) {
- me._goToSideChild(designer, node, 'RIGHT');
- } else if (node.getPosition().x < 0) {
- me._goToParent(designer, node);
- } else if (!node.areChildrenShrunken()) {
- me._goToChild(designer, node);
- }
- } else {
- const centralTopic = model.getCentralTopic();
- me._goToNode(designer, centralTopic);
+ this.addShortcut('right', () => {
+ const node = model.selectedTopic();
+ if (node) {
+ if (node.isCentralTopic()) {
+ me._goToSideChild(designer, node, 'RIGHT');
+ } else if (node.getPosition().x < 0) {
+ me._goToParent(designer, node);
+ } else if (!node.areChildrenShrunken()) {
+ me._goToChild(designer, node);
}
- },
- );
+ } else {
+ const centralTopic = model.getCentralTopic();
+ me._goToNode(designer, centralTopic);
+ }
+ });
- this.addShortcut(
- 'left', () => {
- const node = model.selectedTopic();
- if (node) {
- if (node.isCentralTopic()) {
- me._goToSideChild(designer, node, 'LEFT');
- } else if (node.getPosition().x > 0) {
- me._goToParent(designer, node);
- } else if (!node.areChildrenShrunken()) {
- me._goToChild(designer, node);
- }
- } else {
- const centralTopic = model.getCentralTopic();
- me._goToNode(designer, centralTopic);
+ this.addShortcut('left', () => {
+ const node = model.selectedTopic();
+ if (node) {
+ if (node.isCentralTopic()) {
+ me._goToSideChild(designer, node, 'LEFT');
+ } else if (node.getPosition().x > 0) {
+ me._goToParent(designer, node);
+ } else if (!node.areChildrenShrunken()) {
+ me._goToChild(designer, node);
}
- },
- );
+ } else {
+ const centralTopic = model.getCentralTopic();
+ me._goToNode(designer, centralTopic);
+ }
+ });
- this.addShortcut(
- 'up', () => {
- const node = model.selectedTopic();
- if (node) {
- if (!node.isCentralTopic()) {
- me._goToBrother(designer, node, 'UP');
- }
- } else {
- const centralTopic = model.getCentralTopic();
- me._goToNode(designer, centralTopic);
+ this.addShortcut('up', () => {
+ const node = model.selectedTopic();
+ if (node) {
+ if (!node.isCentralTopic()) {
+ me._goToBrother(designer, node, 'UP');
}
- },
- );
- this.addShortcut(
- 'down', () => {
- const node = model.selectedTopic();
- if (node) {
- if (!node.isCentralTopic()) {
- me._goToBrother(designer, node, 'DOWN');
- }
- } else {
- const centralTopic = model.getCentralTopic();
- me._goToNode(designer, centralTopic);
+ } else {
+ const centralTopic = model.getCentralTopic();
+ me._goToNode(designer, centralTopic);
+ }
+ });
+ this.addShortcut('down', () => {
+ const node = model.selectedTopic();
+ if (node) {
+ if (!node.isCentralTopic()) {
+ me._goToBrother(designer, node, 'DOWN');
}
- },
- );
+ } else {
+ const centralTopic = model.getCentralTopic();
+ me._goToNode(designer, centralTopic);
+ }
+ });
$(document).on('keypress', (event) => {
// Needs to be ignored ?
- if (DesignerKeyboard.isDisabled() || DesignerKeyboard.excludeFromEditor.includes(event.code)) {
+ if (
+ DesignerKeyboard.isDisabled() ||
+ DesignerKeyboard.excludeFromEditor.includes(event.code)
+ ) {
return;
}
@@ -189,14 +233,14 @@ class DesignerKeyboard extends Keyboard {
const { x } = node.getPosition();
let dist = null;
for (let i = 0; i < brothers.length; i++) {
- const sameSide = (x * brothers[i].getPosition().x) >= 0;
+ const sameSide = x * brothers[i].getPosition().x >= 0;
if (brothers[i] !== node && sameSide) {
const brother = brothers[i];
const brotherY = brother.getPosition().y;
if (direction === 'DOWN' && brotherY > y) {
let distancia = y - brotherY;
if (distancia < 0) {
- distancia *= (-1);
+ distancia *= -1;
}
if (dist == null || dist > distancia) {
dist = distancia;
@@ -205,7 +249,7 @@ class DesignerKeyboard extends Keyboard {
} else if (direction === 'UP' && brotherY < y) {
let distance = y - brotherY;
if (distance < 0) {
- distance *= (-1);
+ distance *= -1;
}
if (dist == null || dist > distance) {
dist = distance;
diff --git a/packages/mindplot/src/components/DesignerModel.ts b/packages/mindplot/src/components/DesignerModel.ts
index a3298aec..3b1ac42e 100644
--- a/packages/mindplot/src/components/DesignerModel.ts
+++ b/packages/mindplot/src/components/DesignerModel.ts
@@ -117,7 +117,7 @@ class DesignerModel extends Events {
selectedTopic(): Topic | undefined {
const topics = this.filterSelectedTopics();
- return (topics.length > 0) ? topics[0] : undefined;
+ return topics.length > 0 ? topics[0] : undefined;
}
findTopicById(id: number): Topic | undefined {
diff --git a/packages/mindplot/src/components/DesignerOptionsBuilder.ts b/packages/mindplot/src/components/DesignerOptionsBuilder.ts
index a4e0ac53..41fde211 100644
--- a/packages/mindplot/src/components/DesignerOptionsBuilder.ts
+++ b/packages/mindplot/src/components/DesignerOptionsBuilder.ts
@@ -17,38 +17,29 @@
*/
import { $assert } from '@wisemapping/core-js';
import EditorRenderMode from './EditorRenderMode';
+import WidgetManager from './WidgetManager';
import PersistenceManager from './PersistenceManager';
-import SizeType from './SizeType';
export type DesignerOptions = {
- zoom: number,
- containerSize?: SizeType,
- mode: EditorRenderMode,
- mapId?: string,
- container: string,
- persistenceManager?: PersistenceManager,
- saveOnLoad?: boolean,
- locale?: string,
+ zoom: number;
+ mode: EditorRenderMode;
+ mapId?: string;
+ divContainer?: HTMLElement;
+ container: string;
+ persistenceManager?: PersistenceManager;
+ widgetManager?: WidgetManager;
+ saveOnLoad?: boolean;
+ locale?: string;
};
class OptionsBuilder {
static buildOptions(options: DesignerOptions): DesignerOptions {
$assert(options.persistenceManager, 'persistence must be defined');
- let { containerSize } = options;
- if (options.containerSize == null) {
- // If it has not been defined, use browser size ...
- containerSize = {
- width: window.screen.width,
- height: window.screen.height,
- };
- }
-
const defaultOptions: DesignerOptions = {
mode: 'edition-owner',
zoom: 0.85,
saveOnLoad: true,
- containerSize,
container: 'mindplot',
locale: 'en',
};
diff --git a/packages/mindplot/src/components/DesignerUndoManager.ts b/packages/mindplot/src/components/DesignerUndoManager.ts
index bc26b3f2..7972b15a 100644
--- a/packages/mindplot/src/components/DesignerUndoManager.ts
+++ b/packages/mindplot/src/components/DesignerUndoManager.ts
@@ -85,7 +85,7 @@ class DesignerUndoManager {
result = false;
} else if (undoLength > 0) {
const command = this._undoQueue[undoLength - 1];
- result = (this._baseId !== command.getId());
+ result = this._baseId !== command.getId();
}
return result;
}
diff --git a/packages/mindplot/src/components/DragConnector.ts b/packages/mindplot/src/components/DragConnector.ts
index a2570c71..2690f869 100644
--- a/packages/mindplot/src/components/DragConnector.ts
+++ b/packages/mindplot/src/components/DragConnector.ts
@@ -83,7 +83,7 @@ class DragConnector {
// That's why i need to divide it by two...
const txborder = tpos.x + (topic.getSize().width / 2) * Math.sign(sPos.x);
const distance = (sPos.x - txborder) * Math.sign(sPos.x);
- return distance > 0 && (distance < DragConnector.MAX_VERTICAL_CONNECTION_TOLERANCE);
+ return distance > 0 && distance < DragConnector.MAX_VERTICAL_CONNECTION_TOLERANCE;
});
// Assign a priority based on the distance:
@@ -99,19 +99,34 @@ class DragConnector {
const av = me._isVerticallyAligned(a.getSize(), aPos, sPos);
const bv = me._isVerticallyAligned(b.getSize(), bPos, sPos);
- return me._proximityWeight(av, a, sPos, currentConnection)
- - me._proximityWeight(bv, b, sPos, currentConnection);
+ return (
+ me._proximityWeight(av, a, sPos, currentConnection) -
+ me._proximityWeight(bv, b, sPos, currentConnection)
+ );
});
return topics;
}
- private _proximityWeight(isAligned: boolean, target: Topic, sPos: Point, currentConnection: Topic): number {
+ private _proximityWeight(
+ isAligned: boolean,
+ target: Topic,
+ sPos: Point,
+ currentConnection: Topic,
+ ): number {
const tPos = target.getPosition();
- return (isAligned ? 0 : 200) + Math.abs(tPos.x - sPos.x)
- + Math.abs(tPos.y - sPos.y) + (currentConnection === target ? 0 : 100);
+ return (
+ (isAligned ? 0 : 200) +
+ Math.abs(tPos.x - sPos.x) +
+ Math.abs(tPos.y - sPos.y) +
+ (currentConnection === target ? 0 : 100)
+ );
}
- private _isVerticallyAligned(targetSize: SizeType, targetPosition: Point, sourcePosition: Point): boolean {
+ private _isVerticallyAligned(
+ targetSize: SizeType,
+ targetPosition: Point,
+ sourcePosition: Point,
+ ): boolean {
return Math.abs(sourcePosition.y - targetPosition.y) < targetSize.height / 2;
}
diff --git a/packages/mindplot/src/components/DragManager.ts b/packages/mindplot/src/components/DragManager.ts
index 41607fcd..c0ce6e2b 100644
--- a/packages/mindplot/src/components/DragManager.ts
+++ b/packages/mindplot/src/components/DragManager.ts
@@ -59,14 +59,14 @@ class DragManager {
// Register mouse move listener ...
const mouseMoveListener = dragManager._buildMouseMoveListener(
- workspace, dragNode, dragManager,
+ workspace,
+ dragNode,
+ dragManager,
);
screen.addEvent('mousemove', mouseMoveListener);
// Register mouse up listeners ...
- const mouseUpListener = dragManager._buildMouseUpListener(
- workspace, dragNode, dragManager,
- );
+ const mouseUpListener = dragManager._buildMouseUpListener(workspace, dragNode, dragManager);
screen.addEvent('mouseup', mouseUpListener);
// Change cursor.
diff --git a/packages/mindplot/src/components/EditorRenderMode.ts b/packages/mindplot/src/components/EditorRenderMode.ts
index 70696093..e96c76da 100644
--- a/packages/mindplot/src/components/EditorRenderMode.ts
+++ b/packages/mindplot/src/components/EditorRenderMode.ts
@@ -1,2 +1,7 @@
-type EditorRenderMode = 'viewonly' | 'edition-owner' | 'edition-editor' | 'edition-viewer' | 'showcase';
+type EditorRenderMode =
+ | 'viewonly'
+ | 'edition-owner'
+ | 'edition-editor'
+ | 'edition-viewer'
+ | 'showcase';
export default EditorRenderMode;
diff --git a/packages/mindplot/src/components/Events.ts b/packages/mindplot/src/components/Events.ts
index 41cf1277..977bc4d8 100644
--- a/packages/mindplot/src/components/Events.ts
+++ b/packages/mindplot/src/components/Events.ts
@@ -17,7 +17,7 @@
*/
class Events {
- private _handlerByType;
+ protected _handlerByType;
constructor() {
this._handlerByType = {};
@@ -48,9 +48,9 @@ class Events {
if (!events) return this;
const args = Array.isArray(eventArgs) ? eventArgs : [eventArgs];
- events.forEach(((fn) => {
+ events.forEach((fn) => {
fn.apply(this, args);
- }));
+ });
return this;
}
diff --git a/packages/mindplot/src/components/IconGroup.ts b/packages/mindplot/src/components/IconGroup.ts
index 3f0c506d..d7c62b12 100644
--- a/packages/mindplot/src/components/IconGroup.ts
+++ b/packages/mindplot/src/components/IconGroup.ts
@@ -16,15 +16,8 @@
* limitations under the License.
*/
-import {
- $assert,
- $defined,
-} from '@wisemapping/core-js';
-import {
- Group,
- ElementClass,
- Point,
-} from '@wisemapping/web2d';
+import { $assert, $defined } from '@wisemapping/core-js';
+import { Group, ElementClass, Point } from '@wisemapping/web2d';
import IconGroupRemoveTip from './IconGroupRemoveTip';
import Icon from './Icon';
import SizeType from './SizeType';
@@ -102,7 +95,10 @@ class IconGroup {
icon.setGroup(this);
icons.push(icon);
- this._icons = icons.sort((a, b) => ORDER_BY_TYPE.get(a.getModel().getType()) - ORDER_BY_TYPE.get(b.getModel().getType()));
+ this._icons = icons.sort(
+ (a, b) =>
+ ORDER_BY_TYPE.get(a.getModel().getType()) - ORDER_BY_TYPE.get(b.getModel().getType()),
+ );
// Add all the nodes back ...
this._resize(this._icons.length);
@@ -185,10 +181,7 @@ class IconGroup {
private _positionIcon(icon: Icon, order: number) {
const iconSize = Icon.SIZE + IconGroup.ICON_PADDING * 2;
- icon.getImage().setPosition(
- iconSize * order + IconGroup.ICON_PADDING,
- IconGroup.ICON_PADDING,
- );
+ icon.getImage().setPosition(iconSize * order + IconGroup.ICON_PADDING, IconGroup.ICON_PADDING);
}
static ICON_PADDING = 5;
diff --git a/packages/mindplot/src/components/IconGroupRemoveTip.js b/packages/mindplot/src/components/IconGroupRemoveTip.js
index ebfd287f..5b07664c 100644
--- a/packages/mindplot/src/components/IconGroupRemoveTip.js
+++ b/packages/mindplot/src/components/IconGroupRemoveTip.js
@@ -4,20 +4,20 @@ import { Group, Rect, Line } from '@wisemapping/web2d';
export default class RemoveTip {
/** @lends IconGroup.RemoveTip */
/**
- * @classdesc inner class of IconGroup
- * @constructs
- * @param container
- */
+ * @classdesc inner class of IconGroup
+ * @constructs
+ * @param container
+ */
constructor(container) {
$assert(container, 'group can not be null');
this._fadeElem = container;
}
/**
- * @param topicId
- * @param icon
- * @throws will throw an error if icon is null or undefined
- */
+ * @param topicId
+ * @param icon
+ * @throws will throw an error if icon is null or undefined
+ */
show(topicId, icon) {
$assert(icon, 'icon can not be null');
@@ -64,8 +64,8 @@ export default class RemoveTip {
}
/**
- * @param delay
- */
+ * @param delay
+ */
close(delay) {
// This is not ok, trying to close the same dialog twice ?
if (this._closeTimeoutId) {
@@ -145,9 +145,9 @@ export default class RemoveTip {
}
/**
- * @param topicId
- * @param icon
- */
+ * @param topicId
+ * @param icon
+ */
decorate(topicId, icon) {
const me = this;
diff --git a/packages/mindplot/src/components/ImageIcon.js b/packages/mindplot/src/components/ImageIcon.js
index 42c9269a..81113864 100644
--- a/packages/mindplot/src/components/ImageIcon.js
+++ b/packages/mindplot/src/components/ImageIcon.js
@@ -15,9 +15,7 @@
* See the License for the specific language governing permissions and
* limitations under the License.
*/
-import {
- $assert,
-} from '@wisemapping/core-js';
+import { $assert } from '@wisemapping/core-js';
import Icon from './Icon';
import ActionDispatcher from './ActionDispatcher';
@@ -85,7 +83,7 @@ class ImageIcon extends Icon {
for (let i = 0; i < familyIcons.length && result == null; i++) {
if (familyIcons[i] === iconId) {
// Is last one?
- if (i === (familyIcons.length - 1)) {
+ if (i === familyIcons.length - 1) {
[result] = familyIcons;
} else {
result = familyIcons[i + 1];
@@ -122,116 +120,219 @@ class ImageIcon extends Icon {
}
}
-ImageIcon.prototype.ICON_FAMILIES = [{
- id: 'face',
- icons: ['face_plain', 'face_sad', 'face_crying', 'face_smile', 'face_surprise', 'face_wink'],
-},
-{
- id: 'funy',
- icons: ['funy_angel', 'funy_devilish', 'funy_glasses', 'funy_grin', 'funy_kiss', 'funy_monkey'],
-},
-{
- id: 'sport',
- icons: ['sport_basketball', 'sport_football', 'sport_golf', 'sport_raquet', 'sport_shuttlecock', 'sport_soccer', 'sport_tennis'],
-},
-{
- id: 'bulb',
- icons: ['bulb_light_on', 'bulb_light_off'],
-},
-{
- id: 'thumb',
- icons: ['thumb_thumb_up', 'thumb_thumb_down'],
-},
-{
- id: 'tick',
- icons: ['tick_tick', 'tick_cross'],
-},
-{
- id: 'onoff',
- icons: ['onoff_clock', 'onoff_clock_red', 'onoff_add', 'onoff_delete', 'onoff_status_offline', 'onoff_status_online'],
-},
-{
- id: 'money',
- icons: ['money_money', 'money_dollar', 'money_euro', 'money_pound', 'money_yen', 'money_coins', 'money_ruby'],
-},
-{
- id: 'time',
- icons: ['time_calendar', 'time_clock', 'time_hourglass'],
-},
-{
- id: 'number',
- icons: ['number_1', 'number_2', 'number_3', 'number_4', 'number_5', 'number_6', 'number_7', 'number_8', 'number_9'],
-},
-{
- id: 'chart',
- icons: ['chart_bar', 'chart_line', 'chart_curve', 'chart_pie', 'chart_organisation'],
-},
-{
- id: 'sign',
- icons: ['sign_warning', 'sign_info', 'sign_stop', 'sign_help', 'sign_cancel'],
-},
-{
- id: 'hard',
- icons: ['hard_cd', 'hard_computer', 'hard_controller', 'hard_driver_disk', 'hard_ipod', 'hard_keyboard', 'hard_mouse', 'hard_printer', 'hard_webcam', 'hard_microphone'],
-},
-{
- id: 'things',
- icons: ['things_address_book', 'things_wrench', 'things_pin', 'things_window-layout', 'things_bubbles'],
-},
-{
- id: 'soft',
- icons: ['soft_bug', 'soft_cursor', 'soft_database_table', 'soft_database', 'soft_feed', 'soft_folder_explore', 'soft_rss', 'soft_penguin'],
-},
-{
- id: 'arrow',
- icons: ['arrow_up', 'arrow_down', 'arrow_left', 'arrow_right'],
-},
-{
- id: 'arrowc',
- icons: ['arrowc_rotate_anticlockwise', 'arrowc_rotate_clockwise', 'arrowc_turn_left', 'arrowc_turn_right'],
-},
-{
- id: 'people',
- icons: ['people_group', 'people_male1', 'people_male2', 'people_female1', 'people_female2'],
-},
-{
- id: 'mail',
- icons: ['mail_envelop', 'mail_mailbox', 'mail_edit', 'mail_list'],
-},
-{
- id: 'flag',
- icons: ['flag_blue', 'flag_green', 'flag_orange', 'flag_pink', 'flag_purple', 'flag_yellow'],
-},
-{
- id: 'social',
- icons: ['social_facebook', 'social_twitter', 'social_redit', 'social_instagram', 'social_google-plus'],
-},
-{
- id: 'meetapps',
- icons: ['meetapps_slack', 'meetapps_google-meet', 'meetapps_whatapp', 'meetapps_ms-teams', 'meetapps_zoom', 'meetapps_facebook-messenger'],
-},
-{
- id: 'appsgoogle',
- icons: ['appsgoogle_youtube', 'appsgoogle_gmail', 'appsgoogle_maps'],
-},
-{
- id: 'tag',
- icons: ['tag_blue', 'tag_green', 'tag_orange', 'tag_red', 'tag_pink', 'tag_yellow'],
-},
-{
- id: 'object',
- icons: ['object_bell', 'object_clanbomber', 'object_key', 'object_pencil', 'object_phone', 'object_magnifier', 'object_clip',
- 'object_music', 'object_star', 'object_wizard', 'object_house', 'object_cake', 'object_camera', 'object_palette', 'object_rainbow',
- ],
-},
-{
- id: 'weather',
- icons: ['weather_clear-night', 'weather_clear', 'weather_few-clouds-night', 'weather_few-clouds', 'weather_overcast', 'weather_severe-alert', 'weather_showers-scattered', 'weather_showers', 'weather_snow', 'weather_storm'],
-},
-{
- id: 'task',
- icons: ['task_0', 'task_25', 'task_50', 'task_75', 'task_100'],
-},
+ImageIcon.prototype.ICON_FAMILIES = [
+ {
+ id: 'face',
+ icons: ['face_plain', 'face_sad', 'face_crying', 'face_smile', 'face_surprise', 'face_wink'],
+ },
+ {
+ id: 'funy',
+ icons: ['funy_angel', 'funy_devilish', 'funy_glasses', 'funy_grin', 'funy_kiss', 'funy_monkey'],
+ },
+ {
+ id: 'sport',
+ icons: [
+ 'sport_basketball',
+ 'sport_football',
+ 'sport_golf',
+ 'sport_raquet',
+ 'sport_shuttlecock',
+ 'sport_soccer',
+ 'sport_tennis',
+ ],
+ },
+ {
+ id: 'bulb',
+ icons: ['bulb_light_on', 'bulb_light_off'],
+ },
+ {
+ id: 'thumb',
+ icons: ['thumb_thumb_up', 'thumb_thumb_down'],
+ },
+ {
+ id: 'tick',
+ icons: ['tick_tick', 'tick_cross'],
+ },
+ {
+ id: 'onoff',
+ icons: [
+ 'onoff_clock',
+ 'onoff_clock_red',
+ 'onoff_add',
+ 'onoff_delete',
+ 'onoff_status_offline',
+ 'onoff_status_online',
+ ],
+ },
+ {
+ id: 'money',
+ icons: [
+ 'money_money',
+ 'money_dollar',
+ 'money_euro',
+ 'money_pound',
+ 'money_yen',
+ 'money_coins',
+ 'money_ruby',
+ ],
+ },
+ {
+ id: 'time',
+ icons: ['time_calendar', 'time_clock', 'time_hourglass'],
+ },
+ {
+ id: 'number',
+ icons: [
+ 'number_1',
+ 'number_2',
+ 'number_3',
+ 'number_4',
+ 'number_5',
+ 'number_6',
+ 'number_7',
+ 'number_8',
+ 'number_9',
+ ],
+ },
+ {
+ id: 'chart',
+ icons: ['chart_bar', 'chart_line', 'chart_curve', 'chart_pie', 'chart_organisation'],
+ },
+ {
+ id: 'sign',
+ icons: ['sign_warning', 'sign_info', 'sign_stop', 'sign_help', 'sign_cancel'],
+ },
+ {
+ id: 'hard',
+ icons: [
+ 'hard_cd',
+ 'hard_computer',
+ 'hard_controller',
+ 'hard_driver_disk',
+ 'hard_ipod',
+ 'hard_keyboard',
+ 'hard_mouse',
+ 'hard_printer',
+ 'hard_webcam',
+ 'hard_microphone',
+ ],
+ },
+ {
+ id: 'things',
+ icons: [
+ 'things_address_book',
+ 'things_wrench',
+ 'things_pin',
+ 'things_window-layout',
+ 'things_bubbles',
+ ],
+ },
+ {
+ id: 'soft',
+ icons: [
+ 'soft_bug',
+ 'soft_cursor',
+ 'soft_database_table',
+ 'soft_database',
+ 'soft_feed',
+ 'soft_folder_explore',
+ 'soft_rss',
+ 'soft_penguin',
+ ],
+ },
+ {
+ id: 'arrow',
+ icons: ['arrow_up', 'arrow_down', 'arrow_left', 'arrow_right'],
+ },
+ {
+ id: 'arrowc',
+ icons: [
+ 'arrowc_rotate_anticlockwise',
+ 'arrowc_rotate_clockwise',
+ 'arrowc_turn_left',
+ 'arrowc_turn_right',
+ ],
+ },
+ {
+ id: 'people',
+ icons: ['people_group', 'people_male1', 'people_male2', 'people_female1', 'people_female2'],
+ },
+ {
+ id: 'mail',
+ icons: ['mail_envelop', 'mail_mailbox', 'mail_edit', 'mail_list'],
+ },
+ {
+ id: 'flag',
+ icons: ['flag_blue', 'flag_green', 'flag_orange', 'flag_pink', 'flag_purple', 'flag_yellow'],
+ },
+ {
+ id: 'social',
+ icons: [
+ 'social_facebook',
+ 'social_twitter',
+ 'social_redit',
+ 'social_instagram',
+ 'social_google-plus',
+ ],
+ },
+ {
+ id: 'meetapps',
+ icons: [
+ 'meetapps_slack',
+ 'meetapps_google-meet',
+ 'meetapps_whatapp',
+ 'meetapps_ms-teams',
+ 'meetapps_zoom',
+ 'meetapps_facebook-messenger',
+ ],
+ },
+ {
+ id: 'appsgoogle',
+ icons: ['appsgoogle_youtube', 'appsgoogle_gmail', 'appsgoogle_maps'],
+ },
+ {
+ id: 'tag',
+ icons: ['tag_blue', 'tag_green', 'tag_orange', 'tag_red', 'tag_pink', 'tag_yellow'],
+ },
+ {
+ id: 'object',
+ icons: [
+ 'object_bell',
+ 'object_clanbomber',
+ 'object_key',
+ 'object_pencil',
+ 'object_phone',
+ 'object_magnifier',
+ 'object_clip',
+ 'object_music',
+ 'object_star',
+ 'object_wizard',
+ 'object_house',
+ 'object_cake',
+ 'object_camera',
+ 'object_palette',
+ 'object_rainbow',
+ ],
+ },
+ {
+ id: 'weather',
+ icons: [
+ 'weather_clear-night',
+ 'weather_clear',
+ 'weather_few-clouds-night',
+ 'weather_few-clouds',
+ 'weather_overcast',
+ 'weather_severe-alert',
+ 'weather_showers-scattered',
+ 'weather_showers',
+ 'weather_snow',
+ 'weather_storm',
+ ],
+ },
+ {
+ id: 'task',
+ icons: ['task_0', 'task_25', 'task_50', 'task_75', 'task_100'],
+ },
];
export default ImageIcon;
diff --git a/packages/mindplot/src/components/Keyboard.ts b/packages/mindplot/src/components/Keyboard.ts
index 2680fc62..9d581b39 100644
--- a/packages/mindplot/src/components/Keyboard.ts
+++ b/packages/mindplot/src/components/Keyboard.ts
@@ -25,12 +25,11 @@ class Keyboard {
addShortcut(shortcuts: string[] | string, callback: () => void) {
const shortcutsArray = Array.isArray(shortcuts) ? shortcuts : [shortcuts];
shortcutsArray.forEach((shortcut) => {
- $(document).bind('keydown', shortcut,
- (e) => {
- e.stopPropagation();
- e.preventDefault();
- callback();
- });
+ $(document).bind('keydown', shortcut, (e) => {
+ e.stopPropagation();
+ e.preventDefault();
+ callback();
+ });
});
}
}
diff --git a/packages/mindplot/src/components/LinkIcon.ts b/packages/mindplot/src/components/LinkIcon.ts
index c47bba87..1765f93b 100644
--- a/packages/mindplot/src/components/LinkIcon.ts
+++ b/packages/mindplot/src/components/LinkIcon.ts
@@ -16,13 +16,12 @@
* limitations under the License.
*/
import { $assert } from '@wisemapping/core-js';
-import $ from 'jquery';
import Icon from './Icon';
-import LinkIconTooltip from './widget/LinkIconTooltip';
import LinksImage from '../../assets/icons/links.svg';
import LinkModel from './model/LinkModel';
import Topic from './Topic';
import FeatureModel from './model/FeatureModel';
+import WidgetManager from './WidgetManager';
class LinkIcon extends Icon {
private _linksModel: FeatureModel;
@@ -31,8 +30,6 @@ class LinkIcon extends Icon {
private _readOnly: boolean;
- private _tip: LinkIconTooltip;
-
constructor(topic: Topic, linkModel: LinkModel, readOnly: boolean) {
$assert(topic, 'topic can not be null');
$assert(linkModel, 'linkModel can not be null');
@@ -47,30 +44,12 @@ class LinkIcon extends Icon {
private _registerEvents() {
this._image.setCursor('pointer');
- this._tip = new LinkIconTooltip(this);
- const me = this;
+ const manager = WidgetManager.getInstance();
+ manager.createTooltipForLink(this._topic, this._linksModel as LinkModel, this);
if (!this._readOnly) {
- // Add on click event to open the editor ...
- this.addEvent('click', (event) => {
- me._tip.hide();
- me._topic.showLinkEditor();
- event.stopPropagation();
- });
- // FIXME: we shouldn't have timeout of that..
- this.addEvent('mouseleave', (event) => {
- setTimeout(() => {
- if (!$('#linkPopover:hover').length) {
- me._tip.hide();
- }
- event.stopPropagation();
- }, 100);
- });
+ manager.configureEditorForLink(this._topic, this._linksModel as LinkModel, this);
}
-
- $(this.getImage().peer._native).mouseenter(() => {
- me._tip.show();
- });
}
getModel(): FeatureModel {
diff --git a/packages/mindplot/src/components/LocalStorageManager.ts b/packages/mindplot/src/components/LocalStorageManager.ts
index 62ec4b5c..b53fceb3 100644
--- a/packages/mindplot/src/components/LocalStorageManager.ts
+++ b/packages/mindplot/src/components/LocalStorageManager.ts
@@ -55,7 +55,11 @@ class LocalStorageManager extends PersistenceManager {
if (xml == null || this.forceLoad) {
$.ajax({
url: this.documentUrl.replace('{id}', mapId),
- headers: { 'Content-Type': 'text/plain', Accept: 'application/xml', 'X-CSRF-Token': this.getCSRFToken() },
+ headers: {
+ 'Content-Type': 'text/plain',
+ Accept: 'application/xml',
+ 'X-CSRF-Token': this.getCSRFToken(),
+ },
type: 'get',
dataType: 'text',
async: false,
diff --git a/packages/mindplot/src/components/MainTopic.ts b/packages/mindplot/src/components/MainTopic.ts
index 329f87da..1d9c2be1 100644
--- a/packages/mindplot/src/components/MainTopic.ts
+++ b/packages/mindplot/src/components/MainTopic.ts
@@ -26,7 +26,7 @@ import Workspace from './Workspace';
import SizeType from './SizeType';
class MainTopic extends Topic {
- private INNER_RECT_ATTRIBUTES: { stroke: string; };
+ private INNER_RECT_ATTRIBUTES: { stroke: string };
constructor(model: NodeModel, options) {
super(model, options);
diff --git a/packages/mindplot/src/components/MindplotWebComponent.ts b/packages/mindplot/src/components/MindplotWebComponent.ts
new file mode 100644
index 00000000..3d03b000
--- /dev/null
+++ b/packages/mindplot/src/components/MindplotWebComponent.ts
@@ -0,0 +1,81 @@
+import Designer from './Designer';
+import buildDesigner from './DesignerBuilder';
+import DesignerOptionsBuilder from './DesignerOptionsBuilder';
+import EditorRenderMode from './EditorRenderMode';
+import LocalStorageManager from './LocalStorageManager';
+import Mindmap from './model/Mindmap';
+import PersistenceManager from './PersistenceManager';
+import WidgetManager from './WidgetManager';
+import mindplotStyles from './styles/mindplot-styles';
+
+const defaultPersistenceManager = () => new LocalStorageManager('map.xml', false, false);
+
+export type MindplotWebComponentInterface = {
+ id: string;
+ mode: string;
+ ref: any;
+};
+/**
+ * WebComponent implementation for minplot designer.
+ * This component is registered as mindplot-component in customElements api. (see https://developer.mozilla.org/en-US/docs/Web/API/CustomElementRegistry/define)
+ * For use it you need to import minplot.js and put in your DOM a Loading ...
+ );
};
export default App;
diff --git a/packages/webapp/src/classes/app-config/index.ts b/packages/webapp/src/classes/app-config/index.ts
index 9c9be003..18265653 100644
--- a/packages/webapp/src/classes/app-config/index.ts
+++ b/packages/webapp/src/classes/app-config/index.ts
@@ -1,73 +1,80 @@
-import Client from "../client";
-import CacheDecoratorClient from "../client/cache-decorator-client";
-import MockClient from "../client/mock-client";
-import RestClient from "../client/rest-client";
-
+import Client from '../client';
+import CacheDecoratorClient from '../client/cache-decorator-client';
+import MockClient from '../client/mock-client';
+import RestClient from '../client/rest-client';
interface Config {
- apiBaseUrl: string;
- analyticsAccount?: string;
- recaptcha2Enabled: boolean;
- recaptcha2SiteKey?: string;
- clientType: 'mock' | 'rest';
+ apiBaseUrl: string;
+ analyticsAccount?: string;
+ recaptcha2Enabled: boolean;
+ recaptcha2SiteKey?: string;
+ clientType: 'mock' | 'rest';
}
class _AppConfig {
+ private defaultInstance: Config = {
+ apiBaseUrl: `${window.location.protocol}//${window.location.hostname}:${window.location.port}`,
+ clientType: 'mock',
+ recaptcha2Enabled: true,
+ recaptcha2SiteKey: '6LeIxAcTAAAAAJcZVRqyHh71UMIEGNQ_MXjiZKhI',
+ };
- private defaultInstance: Config = {
- apiBaseUrl: '/',
- clientType: 'mock',
- recaptcha2Enabled: true,
- recaptcha2SiteKey: '6LeIxAcTAAAAAJcZVRqyHh71UMIEGNQ_MXjiZKhI'
+ isDevelopEnv(): boolean {
+ const config = this.getInstance();
+ return config.clientType === 'mock';
+ }
+
+ private getInstance(): Config {
+ // Config can be inserted in the html page to define the global properties ...
+ // eslint-disable-next-line @typescript-eslint/no-explicit-any
+ let result = (window as any).serverconfig;
+ if (!result) {
+ result = this.defaultInstance;
}
- isDevelopEnv(): boolean {
- const config = this.getInstance();
- return config.clientType === 'mock';
+ return result;
+ }
+
+ isRestClient(): boolean {
+ const config = this.getInstance();
+ return config.clientType === 'rest';
+ }
+
+ isRecaptcha2Enabled(): boolean {
+ const config = this.getInstance();
+ return config.recaptcha2Enabled;
+ }
+
+ getRecaptcha2SiteKey(): string | undefined {
+ const config = this.getInstance();
+ return config.recaptcha2SiteKey;
+ }
+
+ getGoogleAnalyticsAccount(): string | undefined {
+ const config = this.getInstance();
+ return config.analyticsAccount;
+ }
+
+ buildClient(): Client {
+ const config = this.getInstance();
+ let result: Client;
+ if (config.clientType == 'rest') {
+ result = new RestClient(this.getBaseUrl());
+ console.log('Service using rest client. ' + JSON.stringify(config));
+ } else {
+ console.log('Warning:Service using mockservice client');
+ result = new MockClient();
}
- private getInstance(): Config {
- // Config can be inserted in the html page to define the global properties ...
- // eslint-disable-next-line @typescript-eslint/no-explicit-any
- let result = (window as any).serverconfig;
- if (!result) {
- result = this.defaultInstance;
- }
+ // Wrap with a cache decorator ...
+ return new CacheDecoratorClient(result);
+ }
- return result;
- }
-
- isRecaptcha2Enabled(): boolean {
- const config = this.getInstance();
- return config.recaptcha2Enabled;
- }
-
- getRecaptcha2SiteKey(): string | undefined {
- const config = this.getInstance();
- return config.recaptcha2SiteKey;
- }
-
- getGoogleAnalyticsAccount(): string | undefined {
- const config = this.getInstance();
- return config.analyticsAccount;
- }
-
- buildClient(): Client {
-
- const config = this.getInstance();
- let result: Client;
- if (config.clientType == 'rest') {
- result = new RestClient(config.apiBaseUrl);
- console.log('Service using rest client. ' + JSON.stringify(config));
- } else {
- console.log('Warning:Service using mockservice client');
- result = new MockClient();
- }
-
- // Wrap with a cache decorator ...
- return new CacheDecoratorClient(result);
- }
+ getBaseUrl(): string {
+ const config = this.getInstance();
+ return config.apiBaseUrl;
+ }
}
const AppConfig = new _AppConfig();
-export default AppConfig;
\ No newline at end of file
+export default AppConfig;
diff --git a/packages/webapp/src/classes/app-i18n/index.ts b/packages/webapp/src/classes/app-i18n/index.ts
index 3019ea71..86a5f59e 100644
--- a/packages/webapp/src/classes/app-i18n/index.ts
+++ b/packages/webapp/src/classes/app-i18n/index.ts
@@ -7,91 +7,89 @@ import 'dayjs/locale/ru';
import 'dayjs/locale/zh';
export class Locale {
- code: LocaleCode;
- label: string;
- message: Record
-
+
+ );
};
export default ClientHealthSentinel;
diff --git a/packages/webapp/src/classes/client/index.ts b/packages/webapp/src/classes/client/index.ts
index 846f2894..bec7e6ad 100644
--- a/packages/webapp/src/classes/client/index.ts
+++ b/packages/webapp/src/classes/client/index.ts
@@ -1,118 +1,112 @@
-import { EditorRenderMode, Mindmap, PersistenceManager } from '@wisemapping/mindplot';
import { Locale, LocaleCode } from '../app-i18n';
export type NewUser = {
- email: string;
- firstname: string;
- lastname: string;
- password: string;
- recaptcha: string | null;
+ email: string;
+ firstname: string;
+ lastname: string;
+ password: string;
+ recaptcha: string | null;
};
export type ImportMapInfo = {
- title: string;
- description?: string;
- contentType?: string;
- content?: ArrayBuffer | null | string;
+ title: string;
+ description?: string;
+ contentType?: string;
+ content?: ArrayBuffer | null | string;
};
export type Label = {
- id: number;
- title: string;
- color: string;
+ id: number;
+ title: string;
+ color: string;
};
export type Role = 'owner' | 'editor' | 'viewer';
export type MapInfo = {
- id: number;
- starred: boolean;
- title: string;
- labels: Label[];
- createdBy: string;
- creationTime: string;
- lastModificationBy: string;
- lastModificationTime: string;
- description: string;
- isPublic: boolean;
- role: Role;
+ id: number;
+ starred: boolean;
+ title: string;
+ labels: Label[];
+ createdBy: string;
+ creationTime: string;
+ lastModificationBy: string;
+ lastModificationTime: string;
+ description: string;
+ isPublic: boolean;
+ role: Role;
};
export type ChangeHistory = {
- id: number;
- lastModificationBy: string;
- lastModificationTime: string;
+ id: number;
+ lastModificationBy: string;
+ lastModificationTime: string;
};
export type BasicMapInfo = {
- title: string;
- description?: string;
+ title: string;
+ description?: string;
};
export type FieldError = {
- id: string;
- msg: string;
+ id: string;
+ msg: string;
};
export type ErrorInfo = {
- msg?: string;
- fields?: Map
-
- );
+ return (
+
+
+ );
};
export { ForgotPasswordPage };
diff --git a/packages/webapp/src/components/forgot-password-success-page/index.tsx b/packages/webapp/src/components/forgot-password-success-page/index.tsx
index c73bb196..43235ab6 100644
--- a/packages/webapp/src/components/forgot-password-success-page/index.tsx
+++ b/packages/webapp/src/components/forgot-password-success-page/index.tsx
@@ -6,46 +6,55 @@ import Footer from '../layout/footer';
import { Link as RouterLink } from 'react-router-dom';
import Typography from '@mui/material/Typography';
import Button from '@mui/material/Button';
+import ReactGA from 'react-ga4';
const ForgotPasswordSuccessPage = (): React.ReactElement => {
- const intl = useIntl();
+ const intl = useIntl();
- useEffect(() => {
- document.title = intl.formatMessage({ id: 'forgotsuccess.page-title', defaultMessage: 'Password Recovered | WiseMapping' });
+ useEffect(() => {
+ document.title = intl.formatMessage({
+ id: 'forgotsuccess.page-title',
+ defaultMessage: 'Password Recovered | WiseMapping',
});
+ ReactGA.send({
+ hitType: 'pageview',
+ page: window.location.pathname,
+ title: 'ForgotPassword:Success',
+ });
+ });
- return (
-
-
-
-
+ return (
+
+
+
+ );
};
export default ForgotPasswordSuccessPage;
diff --git a/packages/webapp/src/components/form/global-error/index.tsx b/packages/webapp/src/components/form/global-error/index.tsx
index 823b02b8..8f192a6f 100644
--- a/packages/webapp/src/components/form/global-error/index.tsx
+++ b/packages/webapp/src/components/form/global-error/index.tsx
@@ -3,19 +3,19 @@ import { ErrorInfo } from '../../../classes/client';
import StyledAlert from './styled';
type GlobalErrorProps = {
- error?: ErrorInfo;
+ error?: ErrorInfo;
};
const GlobalError = (props: GlobalErrorProps): React.ReactElement | null => {
- const error = props.error;
- const hasError = Boolean(error?.msg);
- const errorMsg = error?.msg;
+ const error = props.error;
+ const hasError = Boolean(error?.msg);
+ const errorMsg = error?.msg;
- return hasError ? (
-
+
+
+
-
-
+
+
-
-
-
-
- );
+
+
-
- 
-
-
-
-
-
-
+
+
+
+
+
+
+
+
-
- );
- }
- return result || null;
+ let result;
+ if (enabled === true) {
+ result = (
+
-
+
+ );
+ }
+ return result || null;
};
const LoginError = () => {
- // @Todo: This must be reviewed to be based on navigation state.
- // Login error example: http://localhost:8080/c/login?login.error=2
- const errorCode = new URLSearchParams(window.location.search).get('login_error');
- const intl = useIntl();
+ // @Todo: This must be reviewed to be based on navigation state.
+ // Login error example: http://localhost:8080/c/login?login.error=2
+ const errorCode = new URLSearchParams(window.location.search).get('login_error');
+ const intl = useIntl();
- let msg: null | string = null;
- if (errorCode) {
- switch (errorCode) {
- case '3':
- msg = intl.formatMessage({
- id: 'login.userinactive',
- defaultMessage:
- "Sorry, your account has not been activated yet. You'll receive a notification email when it becomes active. Stay tuned!.",
- });
- break;
- default:
- msg = intl.formatMessage({
- id: 'login.error',
- defaultMessage: 'The email address or password you entered is not valid.',
- });
- }
+ let msg: null | string = null;
+ if (errorCode) {
+ switch (errorCode) {
+ case '3':
+ msg = intl.formatMessage({
+ id: 'login.userinactive',
+ defaultMessage:
+ "Sorry, your account has not been activated yet. You'll receive a notification email when it becomes active. Stay tuned!.",
+ });
+ break;
+ default:
+ msg = intl.formatMessage({
+ id: 'login.error',
+ defaultMessage: 'The email address or password you entered is not valid.',
+ });
}
- return msg ?
+
-
+
-
-
+
+
+
-
-
+
+
-
-