feat(component): add save annotation modal

desktop/renderer-app/src/components/Whiteboard.tsx

@@ -1,18 +1,25 @@
 import "@netless/window-manager/dist/style.css";
 import "./Whiteboard.less";
 
-import { Fastboard, Language } from "@netless/fastboard-react";
 import classNames from "classnames";
-import { DarkModeContext, RaiseHand } from "flat-components";
-import { observer } from "mobx-react-lite";
 import React, { useCallback, useContext, useEffect, useState } from "react";
+import { Fastboard, Language } from "@netless/fastboard-react";
+import {
+    DarkModeContext,
+    RaiseHand,
+    SaveAnnotationModal,
+    SaveAnnotationModalProps,
+} from "flat-components";
+import { observer } from "mobx-react-lite";
 import { message } from "antd";
 import { useTranslation } from "react-i18next";
 import { RoomPhase } from "white-web-sdk";
+
 import { WhiteboardStore } from "../stores/whiteboard-store";
 import { isSupportedFileExt } from "../utils/drag-and-drop";
 import { isSupportedImageType, onDropImage } from "../utils/drag-and-drop/image";
 import { ClassRoomStore } from "../stores/class-room-store";
+import { refreshApps } from "../utils/toolbar-apps";
 
 export interface WhiteboardProps {
     whiteboardStore: WhiteboardStore;
@@ -35,6 +42,10 @@ export const Whiteboard = observer<WhiteboardProps>(function Whiteboard({
 
     const [whiteboardEl, setWhiteboardEl] = useState<HTMLElement | null>(null);
     const [collectorEl, setCollectorEl] = useState<HTMLElement | null>(null);
+    const [saveAnnotationVisible, showSaveAnnotation] = useState(false);
+    const [saveAnnotationImages, setSaveAnnotationImages] = useState<
+        SaveAnnotationModalProps["images"]
+    >([]);
 
     const isReconnecting = phase === RoomPhase.Reconnecting;
 
@@ -118,6 +129,21 @@ export const Whiteboard = observer<WhiteboardProps>(function Whiteboard({
         // eslint-disable-next-line react-hooks/exhaustive-deps
     }, [whiteboardStore.isRightSideClose]);
 
+    useEffect(() => {
+        refreshApps({
+            t,
+            onSaveAnnotation: () => {
+                showSaveAnnotation(true);
+            },
+        });
+    }, [t]);
+
+    useEffect(() => {
+        if (saveAnnotationVisible) {
+            setSaveAnnotationImages(whiteboardStore.getSaveAnnotationImages());
+        }
+    }, [saveAnnotationVisible, whiteboardStore]);
+
     const bindWhiteboard = useCallback((ref: HTMLDivElement | null) => {
         if (ref) {
             setWhiteboardEl(ref);
@@ -161,31 +187,38 @@ export const Whiteboard = observer<WhiteboardProps>(function Whiteboard({
     );
 
     return (
-        room && (
-            <div
-                className={classNames("whiteboard-container", {
-                    "is-readonly": !whiteboardStore.isWritable,
-                })}
-                onDragOver={onDragOver}
-                onDrop={onDrop}
-            >
-                {!whiteboardStore.isCreator && !whiteboardStore.isWritable && (
-                    <div className="raise-hand-container">
-                        <RaiseHand
-                            disableHandRaising={disableHandRaising}
-                            isRaiseHand={classRoomStore.users.currentUser?.isRaiseHand}
-                            onRaiseHandChange={classRoomStore.onToggleHandRaising}
-                        />
-                    </div>
-                )}
-                <div ref={bindCollector} />
-                <Fastboard
-                    app={fastboardAPP}
-                    containerRef={bindWhiteboard}
-                    language={i18n.language as Language}
-                    theme={isDark ? "dark" : "light"}
-                />
-            </div>
-        )
+        <>
+            {room && (
+                <div
+                    className={classNames("whiteboard-container", {
+                        "is-readonly": !whiteboardStore.isWritable,
+                    })}
+                    onDragOver={onDragOver}
+                    onDrop={onDrop}
+                >
+                    {!whiteboardStore.isCreator && !whiteboardStore.isWritable && (
+                        <div className="raise-hand-container">
+                            <RaiseHand
+                                disableHandRaising={disableHandRaising}
+                                isRaiseHand={classRoomStore.users.currentUser?.isRaiseHand}
+                                onRaiseHandChange={classRoomStore.onToggleHandRaising}
+                            />
+                        </div>
+                    )}
+                    <div ref={bindCollector} />
+                    <Fastboard
+                        app={fastboardAPP}
+                        containerRef={bindWhiteboard}
+                        language={i18n.language as Language}
+                        theme={isDark ? "dark" : "light"}
+                    />
+                </div>
+            )}
+            <SaveAnnotationModal
+                images={saveAnnotationImages}
+                visible={saveAnnotationVisible}
+                onClose={() => showSaveAnnotation(false)}
+            />
+        </>
     );
 });

desktop/renderer-app/src/stores/whiteboard-store.ts

@@ -1,7 +1,6 @@
 import "video.js/dist/video-js.css";
 
 import { FastboardApp, createFastboard } from "@netless/fastboard-react";
-import type { Attributes as SlideAttributes } from "@netless/app-slide";
 import { AddAppParams, BuiltinApps, WindowManager } from "@netless/window-manager";
 import { message } from "antd";
 import { i18n } from "i18next";
@@ -10,6 +9,8 @@ import { debounce } from "lodash-es";
 import { makeAutoObservable, observable, runInAction } from "mobx";
 import { isMobile, isWindows } from "react-device-detect";
 import { DeviceType, Room, RoomPhase, RoomState, SceneDefinition, ViewMode } from "white-web-sdk";
+import { snapshot } from "@netless/white-snapshot";
+
 import { RoomType } from "../../../../packages/flat-components/src/types/room";
 import { CLOUD_STORAGE_DOMAIN, NETLESS, NODE_ENV } from "../constants/process";
 import { CloudStorageFile, CloudStorageStore } from "../pages/CloudStoragePage/store";
@@ -196,7 +197,7 @@ export class WhiteboardStore {
                         attributes: {
                             taskId,
                             url,
-                        } as SlideAttributes,
+                        },
                     });
                 } else {
                     await this.windowManager.addApp({
@@ -615,4 +616,26 @@ export class WhiteboardStore {
             void message.error(this.i18n.t("unable-to-insert-courseware"));
         }
     };
+
+    public getSaveAnnotationImages(): Array<() => Promise<HTMLCanvasElement | null>> {
+        if (this.fastboardAPP) {
+            const { manager } = this.fastboardAPP;
+            return manager.sceneState.scenes.map(scene => {
+                const dir = manager.mainViewSceneDir;
+                // Because manager hacks room.fillSceneSnapshot, we need to hack it back.
+                const room = {
+                    state: manager,
+                    fillSceneSnapshot: manager.mainView.fillSceneSnapshot.bind(manager.mainView),
+                } as any;
+                return () =>
+                    snapshot(room, {
+                        scenePath: dir + scene.name,
+                        // TODO: configure CDN to support saving images
+                        // crossorigin: true,
+                    });
+            });
+        } else {
+            return [];
+        }
+    }
 }

desktop/renderer-app/src/utils/toolbar-apps.ts

@@ -0,0 +1,46 @@
+import monacoSVG from "../assets/image/tool-monaco.svg";
+import geogebraSVG from "../assets/image/tool-geogebra.svg";
+import countdownSVG from "../assets/image/tool-countdown.svg";
+import saveSVG from "../assets/image/tool-save.svg";
+
+import { TFunction } from "react-i18next";
+import { apps, FastboardApp } from "@netless/fastboard-react";
+import { noop } from "lodash-es";
+import { i18n } from "./i18n";
+
+export interface RefreshAppsParams {
+    t?: TFunction;
+    onSaveAnnotation?: (app: FastboardApp) => void;
+}
+
+export const refreshApps = ({ t, onSaveAnnotation }: RefreshAppsParams): void => {
+    apps.clear();
+    apps.push(
+        {
+            kind: "Monaco",
+            icon: monacoSVG,
+            label: t?.("tool.monaco") || "Code Editor",
+            onClick: app => app.insertCodeEditor(),
+        },
+        {
+            kind: "GeoGebra",
+            icon: geogebraSVG,
+            label: t?.("tool.geogebra") || "GeoGebra",
+            onClick: app => app.insertGeoGebra(),
+        },
+        {
+            kind: "Countdown",
+            icon: countdownSVG,
+            label: t?.("tool.countdown") || "Countdown",
+            onClick: app => app.insertCountdown(),
+        },
+        {
+            kind: "Save",
+            icon: saveSVG,
+            label: t?.("tool.save") || "Save Annotation",
+            onClick: onSaveAnnotation || noop,
+        },
+    );
+};
+
+refreshApps({ t: i18n.t });

package.json

@@ -24,6 +24,7 @@
     "@commitlint/config-angular": "^16.2.1",
     "@hyrious/esbuild-dev": "^0.7.4",
     "@netless/eslint-plugin": "^2.0.0",
+    "@netless/white-snapshot": "^0.2.2",
     "@types/fs-extra": "^9.0.13",
     "@types/lodash-es": "^4.17.6",
     "@types/node": "^17.0.21",
@@ -50,6 +51,7 @@
     "eslint-plugin-react": "^7.29.4",
     "eslint-webpack-plugin": "^3.1.1",
     "fork-ts-checker-webpack-plugin": "^7.2.1",
+    "html2canvas": "^1.4.1",
     "husky": "^7.0.4",
     "less": "^4.1.2",
     "lint-staged": "^12.3.5",

packages/flat-components/package.json

@@ -24,6 +24,7 @@
     "i18next-browser-languagedetector": "^6.1.3",
     "mobx": "^6.4.2",
     "mobx-react-lite": "^3.3.0",
+    "p-limit": "^4.0.0",
     "pretty-bytes": "^6.0.0",
     "rc-picker": "^2.6.4",
     "react": "^17.0.2",

packages/flat-components/src/components/SaveAnnotationModal/SaveAnnotationModal.stories.tsx

@@ -0,0 +1,43 @@
+import React from "react";
+import { Meta, Story } from "@storybook/react";
+import faker from "faker";
+import { SaveAnnotationModal, SaveAnnotationModalProps } from ".";
+
+const storyMeta: Meta = {
+    title: "Components/SaveAnnotationModal",
+    component: SaveAnnotationModal,
+};
+
+export default storyMeta;
+
+// Random canvas generator.
+const randomCanvas = async (): Promise<HTMLCanvasElement> => {
+    const canvas = document.createElement("canvas");
+    const context = canvas.getContext("2d")!;
+    const width = (canvas.width = faker.datatype.number({ min: 300, max: 600 }));
+    const height = (canvas.height = faker.datatype.number({ min: 300, max: 600 }));
+
+    for (let n = faker.datatype.number(10); n > 0; n--) {
+        const x = faker.datatype.number({ min: -10, max: width });
+        const y = faker.datatype.number({ min: -10, max: height });
+        const w = faker.datatype.number({ min: 11, max: 300 });
+        const h = faker.datatype.number({ min: 11, max: 200 });
+        const color = faker.internet.color();
+        context.fillStyle = color;
+        context.fillRect(x, y, w, h);
+    }
+
+    return canvas;
+};
+
+export const Overview: Story<SaveAnnotationModalProps> = args => (
+    <div className="vh-75 mw8-ns">
+        <SaveAnnotationModal {...args} />
+    </div>
+);
+Overview.args = {
+    visible: true,
+    images: Array.from<() => Promise<HTMLCanvasElement>>({
+        length: faker.datatype.number(20),
+    }).fill(randomCanvas),
+};