Fix layout on try

packages/editor/lang/ru.json

@@ -1,9 +1,9 @@
 {
     "editor.try-welcome": {
-        "defaultMessage": "Здесь можно ознакомиться с возможностями нашего редактора майнд-карт на примерах и практике!"
+        "defaultMessage": "Это демо-версия редактора, можно попробовать его в деле!"
     },
     "editor.try-welcome-description": {
-        "defaultMessage": "Зарегистрируйтесь чтобы начать создавать, публиковать и делиться майнд-картами бесплатно и без ограничений."
+        "defaultMessage": "Чтобы получить бесплатный неограниченный доступ —  нужна только регистрация."
     },
     "login.signup": {
         "defaultMessage": "Регистрация"

packages/editor/src/classes/i18n-msg/index.ts

@@ -0,0 +1,26 @@
+import FR from './../../compiled-lang/fr.json';
+import ES from './../../compiled-lang/es.json';
+import EN from './../../compiled-lang/en.json';
+import DE from './../../compiled-lang/de.json';
+import RU from './../../compiled-lang/ru.json';
+
+class I18nMsg {
+    static loadLocaleData(locale: string) {
+        switch (locale) {
+            case 'fr':
+                return FR;
+            case 'en':
+                return EN;
+            case 'es':
+                return ES;
+            case 'de':
+                return DE;
+            case 'ru':
+                return RU;
+            default:
+                return EN;
+        }
+    }
+}
+
+export default I18nMsg;

packages/editor/src/global-styled.css

@@ -217,9 +217,8 @@ div#tryInfoPanel {
     margin: auto;
     text-align: center;
     top: 80px;
-    right: 20px;
+    left: 20px;
     width: 200px;
-    height: 300px;
     padding: 20px;
     font-size: 15px;
     border-radius: 9px;

packages/editor/src/index.tsx

@@ -10,14 +10,9 @@ import {
     Designer,
     DesignerKeyboard,
 } from '@wisemapping/mindplot';
-import FR from './compiled-lang/fr.json';
-import ES from './compiled-lang/es.json';
-import EN from './compiled-lang/en.json';
-import DE from './compiled-lang/de.json';
-import RU from './compiled-lang/ru.json';
 import './global-styled.css';
 import { EditorModeType } from '@wisemapping/mindplot/src/components/DesignerOptionsBuilder';
-
+import I18nMsg from './classes/i18n-msg';
 
 declare global {
     // used in mindplot
@@ -38,63 +33,39 @@ export type EditorOptions = {
 export type EditorProps = {
     mapId: string;
     options: EditorOptions;
-    onAction: (action: ToolbarActionType) => void;
     persistenceManager: PersistenceManager;
-    initCallback?: (mapId: string, options: EditorOptions, persistenceManager: PersistenceManager) => void;
+    onAction: (action: ToolbarActionType) => void;
-};
+    onLoad?: (designer: Designer) => void;
-
-const loadLocaleData = (locale: string) => {
-    switch (locale) {
-        case 'fr':
-            return FR;
-        case 'en':
-            return EN;
-        case 'es':
-            return ES;
-        case 'de':
-            return DE;
-        case 'ru':
-            return RU;
-        default:
-            return EN;
-    }
-}
-
-const defaultCallback = (mapId: string, options: EditorOptions, persistenceManager: PersistenceManager) => {
-    // Change page title ...
-    document.title = `${options.mapTitle} | WiseMapping `;
-
-    const buildOptions = DesignerOptionsBuilder.buildOptions({
-        persistenceManager,
-        mode: options.mode,
-        mapId: mapId,
-        container: 'mindplot',
-        zoom: options.zoom,
-        locale: options.locale,
-    });
-
-    // Build designer ...
-    const designer = buildDesigner(buildOptions);
-
-    // Load map from XML file persisted on disk...
-    const instance = PersistenceManager.getInstance();
-    const mindmap = instance.load(mapId);
-    designer.loadMap(mindmap);
-
-    if (options.locked) {
-        $notify(options.lockedMsg);
-    }
 };
 
 const Editor = ({
     mapId,
     options,
     persistenceManager,
-    initCallback = defaultCallback,
     onAction,
+    onLoad,
 }: EditorProps) => {
+
     useEffect(() => {
-        initCallback(mapId, options, persistenceManager);
+        // Change page title ...
+        document.title = `${options.mapTitle} | WiseMapping `;
+
+        // Load mindmap ...
+        const designer = onLoadDesigner(mapId, options, persistenceManager);
+        // Has extended actions been customized ...
+        if (onLoad) {
+            onLoad(designer);
+        }
+
+        // Load mindmap ...
+        const instance = PersistenceManager.getInstance();
+        const mindmap = instance.load(mapId);
+        designer.loadMap(mindmap);
+
+        if (options.locked) {
+            $notify(options.lockedMsg);
+        }
+
     }, []);
 
     useEffect(() => {
@@ -105,8 +76,25 @@ const Editor = ({
         }
     }, [options.enableKeyboardEvents]);
 
+
+    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,
+        });
+
+        // Build designer ...
+        return buildDesigner(buildOptions);
+    };
+
+    const locale = options.locale;
+    const msg = I18nMsg.loadLocaleData(locale);
     return (
-        <IntlProvider locale={options.locale} messages={loadLocaleData(options.locale)}>
+        <IntlProvider locale={locale} messages={msg}>
             <Toolbar
                 isTryMode={options.mode === 'showcase'}
                 onAction={onAction}

packages/editor/test/playground/map-render/js/editor.tsx

@@ -1,29 +1,16 @@
 import React from 'react';
 import ReactDOM from 'react-dom';
 import Editor, { EditorOptions } from '../../../../src/index';
-import { buildDesigner, LocalStorageManager, PersistenceManager, DesignerOptionsBuilder } from '@wisemapping/mindplot';
+import { LocalStorageManager, Designer } from '@wisemapping/mindplot';
 
-const initialization = (mapId: string, options: EditorOptions, persistenceManager: PersistenceManager) => {
+const initialization = (designer: Designer) => {
 
-  const designerOptions = DesignerOptionsBuilder.buildOptions({
-    persistenceManager: persistenceManager,
-    zoom: options.zoom ? options.zoom : 0.8,
-    mode: options.mode,
-    container: 'mindplot'
-  });
-
-  const designer = buildDesigner(designerOptions);
   designer.addEvent('loadSuccess', () => {
     const elem = document.getElementById('mindplot');
     if (elem) {
       elem.classList.add('ready');
     }
   });
-
-  // Load map from XML file persisted on disk...
-  const persistence = PersistenceManager.getInstance();
-  const mindmap = persistence.load(mapId);
-  designer.loadMap(mindmap);
 };
 
 const persistence = new LocalStorageManager('samples/{id}.wxml', false);
@@ -43,7 +30,7 @@ ReactDOM.render(
     options={options}
     persistenceManager={persistence}
     onAction={(action) => console.log('action called:', action)}
-    initCallback={initialization}
+    onLoad={initialization}
   />,
   document.getElementById('root'),
 );

packages/editor/test/playground/map-render/js/viewmode.tsx

@@ -2,18 +2,10 @@ import '../css/viewmode.css';
 import React from 'react';
 import ReactDOM from 'react-dom';
 import Editor, { EditorOptions } from '../../../../src/index';
-import { buildDesigner, LocalStorageManager, PersistenceManager, DesignerOptionsBuilder } from '@wisemapping/mindplot';
+import { LocalStorageManager, Designer } from '@wisemapping/mindplot';
 
-const initialization = (mapId: string, options: EditorOptions, persistenceManager: PersistenceManager) => {
+const initialization = (designer: Designer) => {
 
-  const designerOptions = DesignerOptionsBuilder.buildOptions({
-    persistenceManager: persistenceManager,
-    zoom: options.zoom ? options.zoom : 0.8,
-    mode: options.mode,
-    container: 'mindplot'
-  });
-
-  const designer = buildDesigner(designerOptions);
   designer.addEvent('loadSuccess', () => {
     const elem = document.getElementById('mindplot');
     if (elem) {
@@ -35,11 +27,6 @@ const initialization = (mapId: string, options: EditorOptions, persistenceManage
     }
 
   });
-
-  // Load map from XML file persisted on disk...
-  const persistence = PersistenceManager.getInstance();
-  const mindmap = persistence.load(mapId);
-  designer.loadMap(mindmap);
 };
 
 // Obtain map id from query param
@@ -61,7 +48,7 @@ ReactDOM.render(
     options={options}
     persistenceManager={persistence}
     onAction={(action) => console.log('action called:', action)}
-    initCallback={initialization}
+    onLoad={initialization}
   />,
   document.getElementById('root'),
 );