From 292d2002635419bd647c88047b30ce77e211dc26 Mon Sep 17 00:00:00 2001
From: pubuzhixing8 <pubuzhixing@gmail.com>
Date: Tue, 19 Nov 2024 09:26:14 +0800
Subject: [PATCH] feat(hotkey): support export png hotkey (#30)

---
 package.json                                  |  2 +-
 .../toolbar/app-toolbar/app-menu-items.tsx    | 14 ++----------
 packages/drawnix/src/drawnix.tsx              |  2 ++
 packages/drawnix/src/plugins/with-hotkey.ts   | 22 +++++++++++++++++++
 packages/drawnix/src/utils/image.ts           | 15 +++++++++++++
 5 files changed, 42 insertions(+), 13 deletions(-)
 create mode 100644 packages/drawnix/src/plugins/with-hotkey.ts
 create mode 100644 packages/drawnix/src/utils/image.ts

diff --git a/package.json b/package.json
index db5fd99..c4fa4ad 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@drawnix/source",
-  "version": "0.0.0",
+  "version": "0.0.1",
   "license": "MIT",
   "scripts": {
     "start": "nx serve web",
diff --git a/packages/drawnix/src/components/toolbar/app-toolbar/app-menu-items.tsx b/packages/drawnix/src/components/toolbar/app-toolbar/app-menu-items.tsx
index b2efddd..6d097f8 100644
--- a/packages/drawnix/src/components/toolbar/app-toolbar/app-menu-items.tsx
+++ b/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={''}
diff --git a/packages/drawnix/src/drawnix.tsx b/packages/drawnix/src/drawnix.tsx
index bdde2a4..788bd2b 100644
--- a/packages/drawnix/src/drawnix.tsx
+++ b/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>(() => {
diff --git a/packages/drawnix/src/plugins/with-hotkey.ts b/packages/drawnix/src/plugins/with-hotkey.ts
new file mode 100644
index 0000000..f115baf
--- /dev/null
+++ b/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;
+};
diff --git a/packages/drawnix/src/utils/image.ts b/packages/drawnix/src/utils/image.ts
new file mode 100644
index 0000000..4010b24
--- /dev/null
+++ b/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);
+    }
+  });
+};