feat(hotkey): support export png hotkey (#30)

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@drawnix/source",
-  "version": "0.0.0",
+  "version": "0.0.1",
   "license": "MIT",
   "scripts": {
     "start": "nx serve web",

packages/drawnix/src/components/toolbar/app-toolbar/app-menu-items.tsx

@@ -7,17 +7,16 @@ import {
 import { useBoard, useListRender } from '@plait/react-board';
 import {
   BoardTransforms,
-  getSelectedElements,
   PlaitBoard,
   PlaitElement,
   PlaitTheme,
   ThemeColorMode,
   Viewport,
 } from '@plait/core';
-import { base64ToBlob, boardToImage, download } from '../../../utils/common';
 import { loadFromJSON, saveAsJSON } from '../../../data/json';
 import MenuItem from '../../menu/menu-item';
 import MenuItemLink from '../../menu/menu-item-link';
+import { saveAsPNG } from '../../../utils/image';
 
 export const SaveToFile = () => {
   const board = useBoard();
@@ -74,16 +73,7 @@ export const SaveAsImage = () => {
       icon={ExportImageIcon}
       data-testid="image-export-button"
       onSelect={() => {
-        const selectedElements = getSelectedElements(board);
-        boardToImage(board, {
-          elements: selectedElements.length > 0 ? selectedElements : undefined,
-        }).then((image) => {
-          if (image) {
-            const pngImage = base64ToBlob(image);
-            const imageName = `drawnix-${new Date().getTime()}.png`;
-            download(pngImage, imageName);
-          }
-        });
+        saveAsPNG(board);
       }}
       shortcut={`Cmd+Shift+E`}
       aria-label={''}

packages/drawnix/src/drawnix.tsx

@@ -22,6 +22,7 @@ import { PopupToolbar } from './components/toolbar/popup-toolbar/popup-toolbar';
 import { AppToolbar } from './components/toolbar/app-toolbar/app-toolbar';
 import classNames from 'classnames';
 import './styles/index.scss';
+import { withDrawnixHotkey } from './plugins/with-hotkey';
 
 export type DrawnixProps = {
   value: PlaitElement[];
@@ -56,6 +57,7 @@ export const Drawnix: React.FC<DrawnixProps> = ({
     withMind,
     withMindExtend,
     withCommonPlugin,
+    withDrawnixHotkey,
   ];
   const options: PlaitBoardOptions = {};
   const [appState, setAppState] = useState<DrawnixState>(() => {

packages/drawnix/src/plugins/with-hotkey.ts

@@ -0,0 +1,22 @@
+import { PlaitBoard } from '@plait/core';
+import { isHotkey } from 'is-hotkey';
+import { saveAsPNG } from '../utils/image';
+
+export const withDrawnixHotkey = (board: PlaitBoard) => {
+  const { globalKeyDown } = board;
+  board.globalKeyDown = (event: KeyboardEvent) => {
+    if (
+      PlaitBoard.getMovingPointInBoard(board) ||
+      PlaitBoard.isMovingPointInBoard(board)
+    ) {
+      if (isHotkey(['mod+shift+e'], { byKey: true })(event)) {
+        saveAsPNG(board);
+        event.preventDefault();
+        return;
+      }
+    }
+    globalKeyDown(event);
+  };
+
+  return board;
+};

packages/drawnix/src/utils/image.ts

@@ -0,0 +1,15 @@
+import { getSelectedElements, PlaitBoard } from '@plait/core';
+import { base64ToBlob, boardToImage, download } from './common';
+
+export const saveAsPNG = (board: PlaitBoard) => {
+  const selectedElements = getSelectedElements(board);
+  boardToImage(board, {
+    elements: selectedElements.length > 0 ? selectedElements : undefined,
+  }).then((image) => {
+    if (image) {
+      const pngImage = base64ToBlob(image);
+      const imageName = `drawnix-${new Date().getTime()}.png`;
+      download(pngImage, imageName);
+    }
+  });
+};