Fix editor share configuration issue.

This commit is contained in:
Matias Arriola 2022-02-13 03:15:51 +00:00 committed by Paulo Veiga
parent 60e7b3d7e2
commit 5e1c063e70
10 changed files with 105 additions and 13 deletions

View File

@ -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

View File

@ -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 = {

View File

@ -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);

View File

@ -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,
};

View File

@ -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

View File

@ -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>) => {

View File

@ -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;
};

View 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;

View 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;

View File

@ -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;