Merge pull request #1097 from xieliuduo/fix-moveEnd

feat: add Hotkey useBoardEditorHotkeys

frontend/src/app/pages/DashBoardPage/components/BoardProvider/BoardActionProvider.tsx

@@ -22,6 +22,7 @@ import debounce from 'lodash/debounce';
 import React, { createContext, FC, memo } from 'react';
 import { useDispatch } from 'react-redux';
 import { useHistory } from 'react-router';
+import { BOARD_UNDO } from '../../constants';
 import { boardActions } from '../../pages/Board/slice';
 import {
   boardDownLoadAction,
@@ -43,6 +44,10 @@ import { editBoardStackActions } from '../../pages/BoardEditor/slice';
 import {
   clearActiveWidgets,
   clearEditBoardState,
+  copyWidgetsAction,
+  deleteWidgetsAction,
+  pasteWidgetsAction,
+  widgetsToPositionAction,
 } from '../../pages/BoardEditor/slice/actions/actions';
 import { editWidgetsQueryAction } from '../../pages/BoardEditor/slice/actions/controlActions';
 import {
@@ -77,6 +82,13 @@ export interface BoardActionContextProps {
     editing: boolean,
     renderMode: VizRenderMode,
   ) => void;
+  undo: () => void;
+  redo: () => void;
+  deleteActiveWidgets: () => void;
+  layerToTop: () => void;
+  layerToBottom: () => void;
+  copyWidgets: (ids?: string[]) => void;
+  pasteWidgets: () => void;
 }
 export const BoardActionContext = createContext<BoardActionContextProps>(
   {} as BoardActionContextProps,
@@ -203,6 +215,27 @@ export const BoardActionProvider: FC<{ id: string }> = memo(
           );
         }
       },
+      undo: () => {
+        dispatch({ type: BOARD_UNDO.undo });
+      },
+      redo: () => {
+        dispatch({ type: BOARD_UNDO.redo });
+      },
+      deleteActiveWidgets: () => {
+        dispatch(deleteWidgetsAction());
+      },
+      layerToTop: () => {
+        dispatch(widgetsToPositionAction('top'));
+      },
+      layerToBottom: () => {
+        dispatch(widgetsToPositionAction('bottom'));
+      },
+      copyWidgets: (ids?: string[]) => {
+        dispatch(copyWidgetsAction());
+      },
+      pasteWidgets: () => {
+        dispatch(pasteWidgetsAction());
+      },
     };
     return (
       <BoardActionContext.Provider value={actions}>

frontend/src/app/pages/DashBoardPage/hooks/useBoardEditorHotkeys.ts

@@ -0,0 +1,72 @@
+/**
+ * Datart
+ *
+ * Copyright 2021
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import { useContext } from 'react';
+import { useHotkeys } from 'react-hotkeys-hook';
+import { BoardActionContext } from '../components/BoardProvider/BoardActionProvider';
+export default function useBoardEditorHotkeys() {
+  const {
+    undo,
+    redo,
+    deleteActiveWidgets,
+    layerToTop,
+    layerToBottom,
+    copyWidgets,
+    pasteWidgets,
+  } = useContext(BoardActionContext);
+
+  useHotkeys('delete,backspace', () => deleteActiveWidgets(), []);
+
+  useHotkeys('ctrl+z,command+z', () => undo());
+  useHotkeys('ctrl+shift+z,command+shift+z', () => redo());
+
+  useHotkeys('ctrl+shift+up,command+shift+up', () => layerToTop());
+  useHotkeys('ctrl+shift+down,command+shift+down', () => layerToBottom());
+
+  useHotkeys('ctrl+c,command+c', () => copyWidgets());
+  useHotkeys('ctrl+v,command+v', () => pasteWidgets());
+
+  //
+  useHotkeys('up', () => {
+    console.log('__ widgets up1');
+  });
+  useHotkeys('shift+up', () => {
+    console.log('__ widgets up10');
+  });
+  //
+  useHotkeys('down', () => {
+    console.log('__ widgets down1');
+  });
+  useHotkeys('shift+down', () => {
+    console.log('__ widgets down10');
+  });
+  //
+  useHotkeys('left', () => {
+    console.log('__ widgets left1');
+  });
+  useHotkeys('shift+left', () => {
+    console.log('__ widgets left10');
+  });
+  //
+  useHotkeys('right', () => {
+    console.log('__ widgets right1');
+  });
+  useHotkeys('shift+right', () => {
+    console.log('__ widgets right10');
+  });
+}

frontend/src/app/pages/DashBoardPage/pages/BoardEditor/FreeEditor/FreeBoardEditor.tsx

@@ -33,7 +33,7 @@ import styled from 'styled-components/macro';
 import { BoardActionContext } from '../../../components/BoardProvider/BoardActionProvider';
 import { scaleContext } from '../../../components/FreeBoardBackground';
 import { editBoardStackActions } from '../slice';
-import { eventBus } from '../slice/events';
+import { widgetMove, widgetMoveEnd } from '../slice/events';
 import { selectSelectedIds } from '../slice/selectors';
 import { WidgetItem } from './WidgetItem';
 export enum DragTriggerTypes {
@@ -69,12 +69,21 @@ export const WidgetOfFreeEdit: React.FC<{}> = () => {
     },
     [widget.id],
   );
+  const moveEnd = useCallback(() => {
+    const nextConf = produce(widget.config, draft => {
+      draft.rect.x = curXY[0];
+      draft.rect.y = curXY[1];
+    });
+    updateWidgetConfig(nextConf, widget.id);
+  }, [curXY, updateWidgetConfig, widget.config, widget.id]);
   useEffect(() => {
-    eventBus.addListener('moveWidget', move);
+    widgetMove.on(move);
+    widgetMoveEnd.on(moveEnd);
     return () => {
-      eventBus.removeListener('moveWidget', move);
+      widgetMove.off(move);
+      widgetMoveEnd.off(moveEnd);
     };
-  }, [move]);
+  }, [move, moveEnd]);
 
   const dragStart: DraggableEventHandler = useCallback((e, data) => {
     e.stopPropagation();
@@ -91,15 +100,8 @@ export const WidgetOfFreeEdit: React.FC<{}> = () => {
   const drag: DraggableEventHandler = useCallback(
     (e, data) => {
       e.stopPropagation();
-
       const { deltaX, deltaY } = data;
-
-      eventBus.emit(
-        'moveWidget',
-        selectedIds.concat(widget.id),
-        deltaX,
-        deltaY,
-      );
+      widgetMove.emit(selectedIds.concat(widget.id), deltaX, deltaY);
     },
     [selectedIds, widget.id],
   );
@@ -108,12 +110,7 @@ export const WidgetOfFreeEdit: React.FC<{}> = () => {
       // no change
       return;
     }
-    const nextConf = produce(widget.config, draft => {
-      draft.rect.x = curXY[0];
-      draft.rect.y = curXY[1];
-    });
-    updateWidgetConfig(nextConf, widget.id);
-
+    widgetMoveEnd.emit();
     e.stopPropagation();
   };
 

frontend/src/app/pages/DashBoardPage/pages/BoardEditor/components/BoardToolBar/CopyPaste/CopyPaste.tsx

@@ -18,23 +18,24 @@
 import { CopyOutlined, SnippetsOutlined } from '@ant-design/icons';
 import { Tooltip } from 'antd';
 import { ToolbarButton } from 'app/components';
-import useI18NPrefix from 'app/hooks/useI18NPrefix';
-import React from 'react';
-import { useDispatch, useSelector } from 'react-redux';
+import { FC } from 'react';
+import { useSelector } from 'react-redux';
 import {
   selectClipboardWidgets,
   selectSelectedIds,
 } from '../../../slice/selectors';
-import { copyWidgetByIds, pasteWidgets } from '../../../slice/thunk';
-export const CopyBtn = () => {
+
+export const CopyBtn: FC<{
+  fn: (ids?: string[]) => void;
+  title: string;
+}> = ({ fn, title }) => {
   const selectedIds = useSelector(selectSelectedIds);
-  const t = useI18NPrefix(`viz.board.action`);
-  const dispatch = useDispatch();
+
   const onCopy = () => {
-    dispatch(copyWidgetByIds(selectedIds));
+    fn(selectedIds);
   };
   return (
-    <Tooltip title={t('copy')}>
+    <Tooltip title={title}>
       <ToolbarButton
         disabled={!selectedIds.length}
         onClick={onCopy}
@@ -43,18 +44,16 @@ export const CopyBtn = () => {
     </Tooltip>
   );
 };
-export const PasteBtn = () => {
-  const t = useI18NPrefix(`viz.board.action`);
+export const PasteBtn: FC<{
+  fn: () => void;
+  title: string;
+}> = ({ fn, title }) => {
   const clipboardWidgets = useSelector(selectClipboardWidgets);
-  const dispatch = useDispatch();
-  const onPaste = () => {
-    dispatch(pasteWidgets());
-  };
   return (
-    <Tooltip title={t('paste')}>
+    <Tooltip title={title}>
       <ToolbarButton
         disabled={!Object.keys(clipboardWidgets).length}
-        onClick={onPaste}
+        onClick={fn}
         icon={<SnippetsOutlined />}
       />
     </Tooltip>

frontend/src/app/pages/DashBoardPage/pages/BoardEditor/components/BoardToolBar/ToTopToBottom/ToTopToBottom.tsx

@@ -21,42 +21,24 @@ import {
 } from '@ant-design/icons';
 import { Tooltip } from 'antd';
 import { ToolbarButton } from 'app/components';
-import useI18NPrefix from 'app/hooks/useI18NPrefix';
-import React from 'react';
-import { useDispatch, useSelector } from 'react-redux';
-import { widgetToPositionAction } from '../../../slice/actions/actions';
-import { selectSelectedIds } from '../../../slice/selectors';
-export const ToTopBtn = () => {
-  const t = useI18NPrefix(`viz.board.action`);
-  const selectedIds = useSelector(selectSelectedIds);
-  const dispatch = useDispatch();
-  const toTop = () => {
-    dispatch(widgetToPositionAction('top'));
-  };
+import { FC, MouseEventHandler } from 'react';
+export const ToTopBtn: FC<{
+  fn: MouseEventHandler<HTMLElement> | undefined;
+  title: string;
+}> = ({ fn, title }) => {
   return (
-    <Tooltip title={t('toTop')}>
-      <ToolbarButton
-        disabled={selectedIds.length !== 1}
-        onClick={toTop}
-        icon={<VerticalAlignTopOutlined />}
-      />
+    <Tooltip title={title}>
+      <ToolbarButton onClick={fn} icon={<VerticalAlignTopOutlined />} />
     </Tooltip>
   );
 };
-export const ToBottomBtn = () => {
-  const t = useI18NPrefix(`viz.board.action`);
-  const selectedIds = useSelector(selectSelectedIds);
-  const dispatch = useDispatch();
-  const toBottom = () => {
-    dispatch(widgetToPositionAction('bottom'));
-  };
+export const ToBottomBtn: FC<{
+  fn: MouseEventHandler<HTMLElement> | undefined;
+  title: string;
+}> = ({ fn, title }) => {
   return (
-    <Tooltip title={t('toBottom')}>
-      <ToolbarButton
-        disabled={selectedIds.length !== 1}
-        onClick={toBottom}
-        icon={<VerticalAlignBottomOutlined />}
-      />
+    <Tooltip title={title}>
+      <ToolbarButton onClick={fn} icon={<VerticalAlignBottomOutlined />} />
     </Tooltip>
   );
 };