feat(classroom): support paste images (#1767)

netless-io · Nov 14, 2022 · c427725 · c427725
1 parent 3769ec8
commit c427725
Show file tree

Hide file tree

Showing 2 changed files with 44 additions and 4 deletions.
diff --git a/packages/flat-pages/src/components/Whiteboard.tsx b/packages/flat-pages/src/components/Whiteboard.tsx
@@ -15,7 +15,8 @@ import { FlatI18nTFunction, useTranslate } from "@netless/flat-i18n";
 import { observer } from "mobx-react-lite";
 import { message } from "antd";
 import { WhiteboardStore, ClassroomStore } from "@netless/flat-stores";
-import { FlatServices } from "@netless/flat-services";
+import { FlatServices, getFileExt } from "@netless/flat-services";
+import { format } from "date-fns";
 import { isSupportedFileExt } from "../utils/drag-and-drop";
 import { isSupportedImageType, onDropImage } from "../utils/drag-and-drop/image";
 import { PRESETS } from "../constants/presets";
@@ -37,7 +38,7 @@ export const Whiteboard = observer<WhiteboardProps>(function Whiteboard({
     disableHandRaising,
 }) {
     const t = useTranslate();
-    const { room, phase, whiteboard } = whiteboardStore;
+    const { room, windowManager, phase, whiteboard } = whiteboardStore;
     const isDark = useContext(DarkModeContext);
 
     const [saveAnnotationVisible, showSaveAnnotation] = useState(false);
@@ -144,6 +145,29 @@ export const Whiteboard = observer<WhiteboardProps>(function Whiteboard({
         [room, whiteboardStore],
     );
 
+    useEffect(() => {
+        const pasteHandler = (event: ClipboardEvent): void => {
+            const file = event.clipboardData?.files[0];
+            if (room && windowManager && file) {
+                const { centerX, centerY } = windowManager.camera;
+                if (isSupportedImageType(file)) {
+                    const id = format(Date.now(), "yyyy-MM-dd_HH-mm-ss");
+                    const extname = getFileExt(file.name);
+                    const fileName = `screenshot_${id}.${extname}`;
+                    const renamed = new File([file], fileName, {
+                        type: file.type,
+                        lastModified: file.lastModified,
+                    });
+                    onDropImage(renamed, centerX, centerY, room, whiteboardStore.cloudStorageStore);
+                } else if (isSupportedFileExt(file)) {
+                    whiteboardStore.onDrop(file);
+                }
+            }
+        };
+        document.addEventListener("paste", pasteHandler);
+        return () => document.removeEventListener("paste", pasteHandler);
+    }, [room, whiteboardStore, windowManager]);
+
     return (
         <>
             {room && (

diff --git a/service-providers/fastboard/src/index.ts b/service-providers/fastboard/src/index.ts
@@ -1,5 +1,5 @@
 import { createFastboard, createUI, FastboardApp, addManagerListener } from "@netless/fastboard";
-import { DeviceType, RoomPhase } from "white-web-sdk";
+import { DeviceType, RoomPhase, DefaultHotKeys } from "white-web-sdk";
 import type { FlatI18n } from "@netless/flat-i18n";
 import type { Displayer } from "@netless/white-snapshot";
 import {
@@ -191,7 +191,6 @@ export class Fastboard extends IServiceWhiteboard {
             managerConfig: {
                 containerSizeRatio: options.ratio ?? 9 / 16,
                 cursor: true,
-                chessboard: false,
                 collectorStyles: {
                     position: "absolute",
                     bottom: "8px",
@@ -214,6 +213,23 @@ export class Fastboard extends IServiceWhiteboard {
                 uid,
                 floatBar: true,
                 disableEraseImage: true,
+                hotKeys: {
+                    ...DefaultHotKeys,
+                    changeToSelector: "s",
+                    changeToLaserPointer: "z",
+                    changeToPencil: "p",
+                    changeToRectangle: "r",
+                    changeToEllipse: "c",
+                    changeToPencilEraser: "e",
+                    changeToEraser: { key: "E", shiftKey: true, altKey: false, ctrlKey: false },
+                    changeToText: "t",
+                    changeToStraight: "l",
+                    changeToArrow: "a",
+                    changeToHand: "h",
+                    // disable builtin copy-paste hotkeys
+                    copy: undefined,
+                    paste: undefined,
+                },
                 invisiblePlugins: [WindowManager],
                 callbacks: {
                     onEnableWriteNowChanged: async () => {