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