mirror of
https://bitbucket.org/wisemapping/wisemapping-frontend.git
synced 2024-11-11 01:43:23 +01:00
Fix editor share configuration issue.
This commit is contained in:
parent
60e7b3d7e2
commit
5e1c063e70
@ -9,7 +9,8 @@ import {
|
|||||||
PersistenceManager,
|
PersistenceManager,
|
||||||
RESTPersistenceManager,
|
RESTPersistenceManager,
|
||||||
DesignerOptionsBuilder,
|
DesignerOptionsBuilder,
|
||||||
Designer
|
Designer,
|
||||||
|
DesignerKeyboard,
|
||||||
} from '@wisemapping/mindplot';
|
} from '@wisemapping/mindplot';
|
||||||
import FR from './compiled-lang/fr.json';
|
import FR from './compiled-lang/fr.json';
|
||||||
import ES from './compiled-lang/es.json';
|
import ES from './compiled-lang/es.json';
|
||||||
@ -43,6 +44,7 @@ export type EditorPropsType = {
|
|||||||
readOnlyMode: boolean;
|
readOnlyMode: boolean;
|
||||||
locale?: string;
|
locale?: string;
|
||||||
onAction: (action: ToolbarActionType) => void;
|
onAction: (action: ToolbarActionType) => void;
|
||||||
|
hotkeys?: boolean;
|
||||||
};
|
};
|
||||||
|
|
||||||
const loadLocaleData = (locale: string) => {
|
const loadLocaleData = (locale: string) => {
|
||||||
@ -117,11 +119,20 @@ const Editor = ({
|
|||||||
isTryMode: isTryMode,
|
isTryMode: isTryMode,
|
||||||
locale = 'en',
|
locale = 'en',
|
||||||
onAction,
|
onAction,
|
||||||
|
hotkeys = true,
|
||||||
}: EditorPropsType): React.ReactElement => {
|
}: EditorPropsType): React.ReactElement => {
|
||||||
React.useEffect(() => {
|
React.useEffect(() => {
|
||||||
initCallback(locale);
|
initCallback(locale);
|
||||||
}, []);
|
}, []);
|
||||||
|
|
||||||
|
React.useEffect(() => {
|
||||||
|
if (hotkeys) {
|
||||||
|
DesignerKeyboard.resume();
|
||||||
|
} else {
|
||||||
|
DesignerKeyboard.pause();
|
||||||
|
}
|
||||||
|
}, [hotkeys]);
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<IntlProvider locale={locale} messages={loadLocaleData(locale)}>
|
<IntlProvider locale={locale} messages={loadLocaleData(locale)}>
|
||||||
<Toolbar
|
<Toolbar
|
||||||
|
@ -21,16 +21,28 @@ import Keyboard from './Keyboard';
|
|||||||
import { Designer } from '..';
|
import { Designer } from '..';
|
||||||
import Topic from './Topic';
|
import Topic from './Topic';
|
||||||
|
|
||||||
|
export type EventCallback = (event?: Event) => void;
|
||||||
class DesignerKeyboard extends Keyboard {
|
class DesignerKeyboard extends Keyboard {
|
||||||
// eslint-disable-next-line no-use-before-define
|
// eslint-disable-next-line no-use-before-define
|
||||||
static _instance: DesignerKeyboard;
|
static _instance: DesignerKeyboard;
|
||||||
|
|
||||||
|
static _disabled: boolean;
|
||||||
|
|
||||||
constructor(designer: Designer) {
|
constructor(designer: Designer) {
|
||||||
super();
|
super();
|
||||||
$assert(designer, 'designer can not be null');
|
$assert(designer, 'designer can not be null');
|
||||||
this._registerEvents(designer);
|
this._registerEvents(designer);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
addShortcut(shortcuts: string[] | string, callback: EventCallback): void {
|
||||||
|
super.addShortcut(shortcuts, (e: Event) => {
|
||||||
|
if (DesignerKeyboard.isDisabled()) {
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
callback(e);
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
private _registerEvents(designer: Designer) {
|
private _registerEvents(designer: Designer) {
|
||||||
// Try with the keyboard ..
|
// Try with the keyboard ..
|
||||||
const model = designer.getModel();
|
const model = designer.getModel();
|
||||||
@ -246,6 +258,10 @@ class DesignerKeyboard extends Keyboard {
|
|||||||
|
|
||||||
$(document).on('keypress', (event) => {
|
$(document).on('keypress', (event) => {
|
||||||
let keyCode: number;
|
let keyCode: number;
|
||||||
|
|
||||||
|
if (DesignerKeyboard.isDisabled()) {
|
||||||
|
return;
|
||||||
|
}
|
||||||
// Firefox doesn't skip special keys for keypress event...
|
// Firefox doesn't skip special keys for keypress event...
|
||||||
if (event.key && excludes.includes(event.key.toLowerCase())) {
|
if (event.key && excludes.includes(event.key.toLowerCase())) {
|
||||||
return;
|
return;
|
||||||
@ -373,6 +389,19 @@ class DesignerKeyboard extends Keyboard {
|
|||||||
|
|
||||||
static register = function register(designer: Designer) {
|
static register = function register(designer: Designer) {
|
||||||
this._instance = new DesignerKeyboard(designer);
|
this._instance = new DesignerKeyboard(designer);
|
||||||
|
this._disabled = false;
|
||||||
|
};
|
||||||
|
|
||||||
|
static pause = function pause() {
|
||||||
|
this._disabled = true;
|
||||||
|
};
|
||||||
|
|
||||||
|
static resume = function resume() {
|
||||||
|
this._disabled = false;
|
||||||
|
};
|
||||||
|
|
||||||
|
static isDisabled = function isDisabled() {
|
||||||
|
return this._disabled;
|
||||||
};
|
};
|
||||||
|
|
||||||
static specialKeys = {
|
static specialKeys = {
|
||||||
|
@ -18,7 +18,7 @@
|
|||||||
import $ from 'jquery';
|
import $ from 'jquery';
|
||||||
|
|
||||||
class Keyboard {
|
class Keyboard {
|
||||||
addShortcut(shortcuts, callback) {
|
addShortcut(shortcuts: string[] | string, callback) {
|
||||||
const shortcutsArray = Array.isArray(shortcuts) ? shortcuts : [shortcuts];
|
const shortcutsArray = Array.isArray(shortcuts) ? shortcuts : [shortcuts];
|
||||||
shortcutsArray.forEach((shortcut) => {
|
shortcutsArray.forEach((shortcut) => {
|
||||||
$(document).bind('keydown', shortcut, callback);
|
$(document).bind('keydown', shortcut, callback);
|
||||||
|
@ -27,6 +27,7 @@ import DesignerOptionsBuilder from './components/DesignerOptionsBuilder';
|
|||||||
import ImageExporterFactory from './components/export/ImageExporterFactory';
|
import ImageExporterFactory from './components/export/ImageExporterFactory';
|
||||||
import TextExporterFactory from './components/export/TextExporterFactory';
|
import TextExporterFactory from './components/export/TextExporterFactory';
|
||||||
import Exporter from './components/export/Exporter';
|
import Exporter from './components/export/Exporter';
|
||||||
|
import DesignerKeyboard from './components/DesignerKeyboard';
|
||||||
|
|
||||||
import {
|
import {
|
||||||
buildDesigner,
|
buildDesigner,
|
||||||
@ -54,4 +55,5 @@ export {
|
|||||||
ImageExporterFactory,
|
ImageExporterFactory,
|
||||||
Exporter,
|
Exporter,
|
||||||
$notify,
|
$notify,
|
||||||
|
DesignerKeyboard,
|
||||||
};
|
};
|
||||||
|
@ -3,6 +3,8 @@ import ActionDispatcher from '../maps-page/action-dispatcher';
|
|||||||
import { ActionType } from '../maps-page/action-chooser';
|
import { ActionType } from '../maps-page/action-chooser';
|
||||||
import Editor from '@wisemapping/editor';
|
import Editor from '@wisemapping/editor';
|
||||||
import AppI18n from '../../classes/app-i18n';
|
import AppI18n from '../../classes/app-i18n';
|
||||||
|
import { useSelector } from 'react-redux';
|
||||||
|
import { hotkeysEnabled } from '../../redux/editorSlice';
|
||||||
|
|
||||||
export type EditorPropsType = {
|
export type EditorPropsType = {
|
||||||
mapId: number;
|
mapId: number;
|
||||||
@ -11,12 +13,12 @@ export type EditorPropsType = {
|
|||||||
|
|
||||||
const EditorPage = ({ mapId, ...props }: EditorPropsType): React.ReactElement => {
|
const EditorPage = ({ mapId, ...props }: EditorPropsType): React.ReactElement => {
|
||||||
const [activeDialog, setActiveDialog] = React.useState<ActionType | null>(null);
|
const [activeDialog, setActiveDialog] = React.useState<ActionType | null>(null);
|
||||||
|
const hotkeys = useSelector(hotkeysEnabled);
|
||||||
// Load user locale ...
|
// Load user locale ...
|
||||||
const userLocale = AppI18n.getUserLocale();
|
const userLocale = AppI18n.getUserLocale();
|
||||||
|
|
||||||
return <>
|
return <>
|
||||||
<Editor {...props} onAction={setActiveDialog} locale={userLocale.code} />
|
<Editor {...props} onAction={setActiveDialog} locale={userLocale.code} hotkeys={hotkeys} />
|
||||||
{
|
{
|
||||||
activeDialog &&
|
activeDialog &&
|
||||||
<ActionDispatcher
|
<ActionDispatcher
|
||||||
|
@ -1,4 +1,4 @@
|
|||||||
import React from 'react';
|
import React, { useEffect } from 'react';
|
||||||
import { FormattedMessage } from 'react-intl';
|
import { FormattedMessage } from 'react-intl';
|
||||||
import { ErrorInfo } from '../../../../classes/client';
|
import { ErrorInfo } from '../../../../classes/client';
|
||||||
import { StyledDialog, StyledDialogActions, StyledDialogContent, StyledDialogTitle } from './style';
|
import { StyledDialog, StyledDialogActions, StyledDialogContent, StyledDialogTitle } from './style';
|
||||||
@ -6,6 +6,8 @@ import GlobalError from '../../../form/global-error';
|
|||||||
import DialogContentText from '@mui/material/DialogContentText';
|
import DialogContentText from '@mui/material/DialogContentText';
|
||||||
import Button from '@mui/material/Button';
|
import Button from '@mui/material/Button';
|
||||||
import { PaperProps } from '@mui/material/Paper';
|
import { PaperProps } from '@mui/material/Paper';
|
||||||
|
import { useDispatch } from 'react-redux';
|
||||||
|
import { disableHotkeys, enableHotkeys } from '../../../../redux/editorSlice';
|
||||||
|
|
||||||
export type DialogProps = {
|
export type DialogProps = {
|
||||||
onClose: () => void;
|
onClose: () => void;
|
||||||
@ -23,6 +25,13 @@ export type DialogProps = {
|
|||||||
};
|
};
|
||||||
|
|
||||||
const BaseDialog = (props: DialogProps): React.ReactElement => {
|
const BaseDialog = (props: DialogProps): React.ReactElement => {
|
||||||
|
const dispatch = useDispatch();
|
||||||
|
useEffect(() => {
|
||||||
|
dispatch(disableHotkeys());
|
||||||
|
return () => {
|
||||||
|
dispatch(enableHotkeys())
|
||||||
|
};
|
||||||
|
}, []);
|
||||||
const { onClose, onSubmit, maxWidth = 'sm', PaperProps } = props;
|
const { onClose, onSubmit, maxWidth = 'sm', PaperProps } = props;
|
||||||
|
|
||||||
const handleOnSubmit = (e: React.FormEvent<HTMLFormElement>) => {
|
const handleOnSubmit = (e: React.FormEvent<HTMLFormElement>) => {
|
||||||
|
@ -4,6 +4,7 @@ import { useQuery } from 'react-query';
|
|||||||
import Client, { AccountInfo, ErrorInfo, MapInfo } from '../classes/client';
|
import Client, { AccountInfo, ErrorInfo, MapInfo } from '../classes/client';
|
||||||
import { useSelector } from 'react-redux';
|
import { useSelector } from 'react-redux';
|
||||||
import AppConfig from '../classes/app-config';
|
import AppConfig from '../classes/app-config';
|
||||||
|
import { RootState } from './rootReducer';
|
||||||
|
|
||||||
|
|
||||||
export interface ClientStatus {
|
export interface ClientStatus {
|
||||||
@ -59,13 +60,11 @@ export const fetchAccount = (): AccountInfo | undefined => {
|
|||||||
return data;
|
return data;
|
||||||
};
|
};
|
||||||
|
|
||||||
// eslint-disable-next-line @typescript-eslint/no-explicit-any
|
export const activeInstance = (state: RootState): Client => {
|
||||||
export const activeInstance = (state: any): Client => {
|
|
||||||
return state.client.instance;
|
return state.client.instance;
|
||||||
};
|
};
|
||||||
|
|
||||||
// eslint-disable-next-line @typescript-eslint/no-explicit-any
|
export const activeInstanceStatus = (state: RootState): ClientStatus => {
|
||||||
export const activeInstanceStatus = (state: any): ClientStatus => {
|
|
||||||
return state.client.status;
|
return state.client.status;
|
||||||
};
|
};
|
||||||
|
|
||||||
|
30
packages/webapp/src/redux/editorSlice.ts
Normal file
30
packages/webapp/src/redux/editorSlice.ts
Normal file
@ -0,0 +1,30 @@
|
|||||||
|
import { createSlice } from "@reduxjs/toolkit";
|
||||||
|
import { RootState } from "./rootReducer";
|
||||||
|
|
||||||
|
export interface EditorState {
|
||||||
|
hotkeysEnabled: boolean;
|
||||||
|
}
|
||||||
|
|
||||||
|
const initialState: EditorState = {
|
||||||
|
hotkeysEnabled: true,
|
||||||
|
};
|
||||||
|
|
||||||
|
export const editorSlice = createSlice({
|
||||||
|
name: 'editor',
|
||||||
|
initialState: initialState,
|
||||||
|
reducers: {
|
||||||
|
disableHotkeys(state) {
|
||||||
|
state.hotkeysEnabled = false;
|
||||||
|
},
|
||||||
|
enableHotkeys(state) {
|
||||||
|
state.hotkeysEnabled = true;
|
||||||
|
},
|
||||||
|
},
|
||||||
|
});
|
||||||
|
|
||||||
|
export const hotkeysEnabled = (state: RootState): boolean => {
|
||||||
|
return state.editor.hotkeysEnabled;
|
||||||
|
};
|
||||||
|
|
||||||
|
export const { disableHotkeys, enableHotkeys } = editorSlice.actions;
|
||||||
|
export default editorSlice.reducer;
|
12
packages/webapp/src/redux/rootReducer.ts
Normal file
12
packages/webapp/src/redux/rootReducer.ts
Normal file
@ -0,0 +1,12 @@
|
|||||||
|
import { combineReducers } from '@reduxjs/toolkit';
|
||||||
|
import clientReducer from './clientSlice';
|
||||||
|
import editorReducer from './editorSlice';
|
||||||
|
|
||||||
|
const rootReducer = combineReducers({
|
||||||
|
client: clientReducer,
|
||||||
|
editor: editorReducer,
|
||||||
|
});
|
||||||
|
|
||||||
|
export type RootState = ReturnType<typeof rootReducer>;
|
||||||
|
|
||||||
|
export default rootReducer;
|
@ -1,11 +1,9 @@
|
|||||||
import { configureStore } from '@reduxjs/toolkit';
|
import { configureStore } from '@reduxjs/toolkit';
|
||||||
import clientReducer from './clientSlice';
|
import rootReducer from './rootReducer';
|
||||||
|
|
||||||
// Create Service object...
|
// Create Service object...
|
||||||
const store = configureStore({
|
const store = configureStore({
|
||||||
reducer: {
|
reducer: rootReducer,
|
||||||
client: clientReducer,
|
|
||||||
},
|
|
||||||
});
|
});
|
||||||
|
|
||||||
export default store;
|
export default store;
|
||||||
|
Loading…
Reference in New Issue
Block a user