feat(project): support drag and drop supported file in room (#1144)

netless-io · Nov 26, 2021 · e779367 · e779367
1 parent d2d6958
commit e779367
Show file tree

Hide file tree

Showing 25 changed files with 759 additions and 610 deletions.
diff --git a/desktop/renderer-app/src/components/CloudStorageButton.tsx b/desktop/renderer-app/src/components/CloudStorageButton.tsx
@@ -1,27 +1,26 @@
 // TODO: remove this component when multi sub window is Done
+import "./CloudStorageButton.less";
 
 import { Modal } from "antd";
 import { observer } from "mobx-react-lite";
-import React, { useCallback, useState } from "react";
-import { CloudStoragePage } from "../pages/CloudStoragePage";
-import { WhiteboardStore } from "../stores/whiteboard-store";
-import { TopBarRightBtn } from "./TopBarRightBtn";
-import "./CloudStorageButton.less";
+import React, { useCallback } from "react";
 import { useTranslation } from "react-i18next";
+import { CloudStoragePanel } from "../pages/CloudStoragePage/CloudStoragePanel";
+import { TopBarRightBtn } from "./TopBarRightBtn";
+import { ClassRoomStore } from "../stores/class-room-store";
 
 interface CloudStorageButtonProps {
-    whiteboard: WhiteboardStore;
+    classroom: ClassRoomStore;
 }
 
 export const CloudStorageButton = observer<CloudStorageButtonProps>(function CloudStorageButton({
-    whiteboard,
+    classroom,
 }) {
     const { t } = useTranslation();
-    const [visible, setVisible] = useState(false);
-    const hideModal = useCallback(() => setVisible(false), [setVisible]);
-    const showModal = useCallback(() => setVisible(true), [setVisible]);
+    const hideModal = useCallback(() => classroom.toggleCloudStoragePanel(false), [classroom]);
+    const showModal = useCallback(() => classroom.toggleCloudStoragePanel(true), [classroom]);
 
-    if (!whiteboard.isWritable) {
+    if (!classroom.whiteboardStore.isWritable) {
         return null;
     }
 
@@ -33,13 +32,12 @@ export const CloudStorageButton = observer<CloudStorageButtonProps>(function Clo
                 onCancel={hideModal}
                 destroyOnClose
                 footer={[]}
-                visible={visible}
+                visible={classroom.isCloudStoragePanelVisible}
                 className="cloud-storage-button-modal"
                 centered
             >
-                <CloudStoragePage
-                    compact
-                    whiteboard={whiteboard}
+                <CloudStoragePanel
+                    cloudStorage={classroom.whiteboardStore.cloudStorageStore}
                     onCoursewareInserted={hideModal}
                 />
             </Modal>

diff --git a/desktop/renderer-app/src/components/Whiteboard.tsx b/desktop/renderer-app/src/components/Whiteboard.tsx
@@ -3,14 +3,15 @@ import "./Whiteboard.less";
 
 import RedoUndo from "@netless/redo-undo";
 import ToolBox from "@netless/tool-box";
+import { WindowManager } from "@netless/window-manager";
 import classNames from "classnames";
+import { ScenesController } from "flat-components";
 import { observer } from "mobx-react-lite";
 import React, { useCallback, useEffect, useState } from "react";
-import { WindowManager } from "@netless/window-manager";
-import { ScenesController } from "flat-components";
 import { useTranslation } from "react-i18next";
 import { WhiteboardStore } from "../stores/whiteboard-store";
-import { isSupportedImageType, onDropImage } from "../utils/dnd/image";
+import { isSupportedFileExt } from "../utils/drag-and-drop";
+import { isSupportedImageType, onDropImage } from "../utils/drag-and-drop/image";
 
 export interface WhiteboardProps {
     whiteboardStore: WhiteboardStore;
@@ -120,7 +121,7 @@ export const Whiteboard = observer<WhiteboardProps>(function Whiteboard({ whiteb
         (event: React.DragEvent<HTMLDivElement>) => {
             event.preventDefault();
             const file = event.dataTransfer.files[0];
-            if (room && file && isSupportedImageType(file)) {
+            if (room && file && isSupportedFileExt(file)) {
                 event.dataTransfer.dropEffect = "copy";
             }
         },
@@ -131,15 +132,19 @@ export const Whiteboard = observer<WhiteboardProps>(function Whiteboard({ whiteb
         async (event: React.DragEvent<HTMLDivElement>) => {
             event.preventDefault();
             const file = event.dataTransfer.files[0];
-            if (room && file && isSupportedImageType(file)) {
-                const rect = (event.target as HTMLDivElement).getBoundingClientRect();
-                const rx = event.clientX - rect.left;
-                const ry = event.clientY - rect.top;
-                const { x, y } = room.convertToPointInWorld({ x: rx, y: ry });
-                await onDropImage(file, x, y, room);
+            if (room && file) {
+                if (isSupportedImageType(file)) {
+                    const rect = (event.target as HTMLDivElement).getBoundingClientRect();
+                    const rx = event.clientX - rect.left;
+                    const ry = event.clientY - rect.top;
+                    const { x, y } = room.convertToPointInWorld({ x: rx, y: ry });
+                    await onDropImage(file, x, y, room);
+                } else if (isSupportedFileExt(file)) {
+                    whiteboardStore.onDrop(file);
+                }
             }
         },
-        [room],
+        [room, whiteboardStore],
     );
 
     return (

diff --git a/desktop/renderer-app/src/pages/BigClassPage/index.tsx b/desktop/renderer-app/src/pages/BigClassPage/index.tsx
@@ -88,10 +88,14 @@ export type BigClassPageProps = {};
 export const BigClassPage = observer<BigClassPageProps>(function BigClassPage() {
     usePowerSaveBlocker();
     useWindowSize("Class");
-    const { t } = useTranslation();
+    const { i18n, t } = useTranslation();
     const params = useParams<RouteParams<RouteNameType.BigClassPage>>();
 
-    const classRoomStore = useClassRoomStore(params.roomUUID, params.ownerUUID, recordingConfig);
+    const classRoomStore = useClassRoomStore({
+        ...params,
+        recordingConfig,
+        i18n,
+    });
     const whiteboardStore = classRoomStore.whiteboardStore;
     const shareScreenStore = classRoomStore.shareScreenStore;
 
@@ -319,7 +323,7 @@ export const BigClassPage = observer<BigClassPageProps>(function BigClassPage()
                 )}
 
                 {/* TODO: open cloud-storage sub window */}
-                <CloudStorageButton whiteboard={whiteboardStore} />
+                <CloudStorageButton classroom={classRoomStore} />
                 <InviteButton roomInfo={classRoomStore.roomInfo} />
                 <TopBarRightBtn
                     title="Exit"

diff --git a/desktop/renderer-app/src/pages/CloudStoragePage/CloudStoragePanel.tsx b/desktop/renderer-app/src/pages/CloudStoragePage/CloudStoragePanel.tsx
@@ -0,0 +1,20 @@
+import "./style.less";
+
+import { CloudStorageContainer } from "flat-components";
+import { observer } from "mobx-react-lite";
+import React, { useEffect } from "react";
+import { CloudStorageStore } from "./store";
+
+export interface CloudStoragePanelProps {
+    cloudStorage: CloudStorageStore;
+    onCoursewareInserted?: () => void;
+}
+
+export const CloudStoragePanel = observer<CloudStoragePanelProps>(function CloudStoragePanel({
+    cloudStorage,
+    onCoursewareInserted,
+}) {
+    useEffect(() => cloudStorage.initialize(), [cloudStorage, onCoursewareInserted]);
+
+    return <CloudStorageContainer store={cloudStorage} />;
+});