mirror of
https://bitbucket.org/wisemapping/wisemapping-frontend.git
synced 2024-11-22 06:37:56 +01:00
Fix layout on try
This commit is contained in:
Paulo Gustavo Veiga
parent
0ddbb4d8e5
commit
9149e5888a
@ -1,9 +1,9 @@
|
||||
{
|
||||
"editor.try-welcome": {
|
||||
"defaultMessage": "Здесь можно ознакомиться с возможностями нашего редактора майнд-карт на примерах и практике!"
|
||||
"defaultMessage": "Это демо-версия редактора, можно попробовать его в деле!"
|
||||
},
|
||||
"editor.try-welcome-description": {
|
||||
"defaultMessage": "Зарегистрируйтесь чтобы начать создавать, публиковать и делиться майнд-картами бесплатно и без ограничений."
|
||||
"defaultMessage": "Чтобы получить бесплатный неограниченный доступ — нужна только регистрация."
|
||||
},
|
||||
"login.signup": {
|
||||
"defaultMessage": "Регистрация"
|
||||
|
||||
26
packages/editor/src/classes/i18n-msg/index.ts
Normal file
26
packages/editor/src/classes/i18n-msg/index.ts
Normal file
@ -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;
|
||||
@ -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;
|
||||
|
||||
@ -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,45 +33,31 @@ 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 Editor = ({
|
||||
mapId,
|
||||
options,
|
||||
persistenceManager,
|
||||
onAction,
|
||||
onLoad,
|
||||
}: EditorProps) => {
|
||||
|
||||
const defaultCallback = (mapId: string, options: EditorOptions, persistenceManager: PersistenceManager) => {
|
||||
useEffect(() => {
|
||||
// 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,
|
||||
});
|
||||
// Load mindmap ...
|
||||
const designer = onLoadDesigner(mapId, options, persistenceManager);
|
||||
// Has extended actions been customized ...
|
||||
if (onLoad) {
|
||||
onLoad(designer);
|
||||
}
|
||||
|
||||
// Build designer ...
|
||||
const designer = buildDesigner(buildOptions);
|
||||
|
||||
// Load map from XML file persisted on disk...
|
||||
// Load mindmap ...
|
||||
const instance = PersistenceManager.getInstance();
|
||||
const mindmap = instance.load(mapId);
|
||||
designer.loadMap(mindmap);
|
||||
@ -84,17 +65,7 @@ const defaultCallback = (mapId: string, options: EditorOptions, persistenceManag
|
||||
if (options.locked) {
|
||||
$notify(options.lockedMsg);
|
||||
}
|
||||
};
|
||||
|
||||
const Editor = ({
|
||||
mapId,
|
||||
options,
|
||||
persistenceManager,
|
||||
initCallback = defaultCallback,
|
||||
onAction,
|
||||
}: EditorProps) => {
|
||||
useEffect(() => {
|
||||
initCallback(mapId, options, persistenceManager);
|
||||
}, []);
|
||||
|
||||
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}
|
||||
|
||||
@ -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'),
|
||||
);
|
||||
|
||||
@ -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'),
|
||||
);
|
||||
|
||||
Loading…
Reference in New Issue
Block a user