From 9149e5888acdfed809f19e4a6966312a470f0539 Mon Sep 17 00:00:00 2001 From: Paulo Gustavo Veiga Date: Fri, 25 Feb 2022 07:33:37 -0800 Subject: [PATCH] Fix layout on try --- packages/editor/lang/ru.json | 4 +- packages/editor/src/classes/i18n-msg/index.ts | 26 +++++ packages/editor/src/global-styled.css | 3 +- packages/editor/src/index.tsx | 96 ++++++++----------- .../test/playground/map-render/js/editor.tsx | 19 +--- .../playground/map-render/js/viewmode.tsx | 19 +--- 6 files changed, 77 insertions(+), 90 deletions(-) create mode 100644 packages/editor/src/classes/i18n-msg/index.ts diff --git a/packages/editor/lang/ru.json b/packages/editor/lang/ru.json index 8e0abf2f..e954afb0 100644 --- a/packages/editor/lang/ru.json +++ b/packages/editor/lang/ru.json @@ -1,9 +1,9 @@ { "editor.try-welcome": { - "defaultMessage": "Здесь можно ознакомиться с возможностями нашего редактора майнд-карт на примерах и практике!" + "defaultMessage": "Это демо-версия редактора, можно попробовать его в деле!" }, "editor.try-welcome-description": { - "defaultMessage": "Зарегистрируйтесь чтобы начать создавать, публиковать и делиться майнд-картами бесплатно и без ограничений." + "defaultMessage": "Чтобы получить бесплатный неограниченный доступ — нужна только регистрация." }, "login.signup": { "defaultMessage": "Регистрация" diff --git a/packages/editor/src/classes/i18n-msg/index.ts b/packages/editor/src/classes/i18n-msg/index.ts new file mode 100644 index 00000000..9b9a25b9 --- /dev/null +++ b/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; diff --git a/packages/editor/src/global-styled.css b/packages/editor/src/global-styled.css index 23e26373..6da5344f 100644 --- a/packages/editor/src/global-styled.css +++ b/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; diff --git a/packages/editor/src/index.tsx b/packages/editor/src/index.tsx index c09f1dad..ba69a72c 100644 --- a/packages/editor/src/index.tsx +++ b/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; -}; - -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); - } + onAction: (action: ToolbarActionType) => void; + onLoad?: (designer: Designer) => void; }; 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 ( - + { +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'), ); diff --git a/packages/editor/test/playground/map-render/js/viewmode.tsx b/packages/editor/test/playground/map-render/js/viewmode.tsx index 0201f1fb..de71046f 100644 --- a/packages/editor/test/playground/map-render/js/viewmode.tsx +++ b/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'), );