feat(whiteboard): add drag and drop image support

.github/workflows/code-check.yml

@@ -76,7 +76,7 @@ jobs:
         if: steps.filter.outputs.main == 'true'
 
       - name: Build flat-web
-        run: NODE_OPTIONS="--max-old-space-size=4096" yarn workspace flat-web build
+        run: NODE_OPTIONS="--max-old-space-size=6144" yarn workspace flat-web build
         if: steps.filter.outputs.flat-web == 'true'
 
       - name: Check i18n

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

@@ -9,6 +9,7 @@ import React, { useCallback } from "react";
 import { RoomPhase } from "white-web-sdk";
 import pagesSVG from "../assets/image/pages.svg";
 import { WhiteboardStore } from "../stores/WhiteboardStore";
+import { isSupportedImageType, onDropImage } from "../utils/dnd/image";
 import "./Whiteboard.less";
 
 export interface WhiteboardProps {
@@ -30,12 +31,40 @@ export const Whiteboard = observer<WhiteboardProps>(function Whiteboard({ whiteb
         [room],
     );
 
+    const onDragOver = useCallback(
+        (event: React.DragEvent<HTMLDivElement>) => {
+            event.preventDefault();
+            const file = event.dataTransfer.files[0];
+            if (room && file && isSupportedImageType(file)) {
+                event.dataTransfer.dropEffect = "copy";
+            }
+        },
+        [room],
+    );
+
+    const onDrop = useCallback(
+        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);
+            }
+        },
+        [room],
+    );
+
     return (
         room && (
             <div
                 className={classNames("whiteboard-container", {
                     "is-readonly": !whiteboardStore.isWritable,
                 })}
+                onDragOver={onDragOver}
+                onDrop={onDrop}
             >
                 <div className="zoom-controller-box">
                     <ZoomController room={room} />

desktop/renderer-app/src/utils/dnd/image.ts

@@ -0,0 +1,61 @@
+import { message } from "antd";
+import type { Room, Size } from "white-web-sdk";
+import { listFiles } from "../../apiMiddleware/flatServer/storage";
+import { i18n } from "../i18n";
+import { UploadTask } from "../UploadTaskManager/UploadTask";
+
+const ImageFileTypes = [
+    "image/png",
+    "image/jpg",
+    "image/jpeg",
+    "image/webp",
+    "image/apng",
+    "image/svg+xml",
+    "image/gif",
+    "image/bmp",
+    "image/avif",
+    "image/tiff",
+];
+
+export function isSupportedImageType(file: File): boolean {
+    return ImageFileTypes.includes(file.type);
+}
+
+export async function onDropImage(file: File, x: number, y: number, room: Room): Promise<void> {
+    if (!isSupportedImageType(file)) {
+        console.log("[dnd:image] unsupported file type:", file.type, file.name);
+        return;
+    }
+
+    const hideLoading = message.loading(i18n.t("Inserting-courseware-tips"));
+
+    const getSize = getImageSize(file);
+    const task = new UploadTask(file);
+    await task.upload();
+    const { files } = await listFiles({ page: 1 });
+    const cloudFile = files.find(f => f.fileUUID === task.fileUUID);
+
+    hideLoading();
+
+    if (!cloudFile?.fileURL) {
+        console.log("[dnd:image] upload failed:", file.name);
+        return;
+    }
+
+    const uuid = cloudFile.fileUUID;
+    const { width, height } = await getSize;
+    room.insertImage({ uuid, centerX: x, centerY: y, width, height, locked: false });
+    room.completeImageUpload(uuid, cloudFile.fileURL);
+}
+
+function getImageSize(file: File): Promise<Size> {
+    const image = new Image();
+    const url = URL.createObjectURL(file);
+    return new Promise(resolve => {
+        image.src = url;
+        image.onload = () => {
+            URL.revokeObjectURL(url);
+            resolve({ width: image.width, height: image.height });
+        };
+    });
+}

web/flat-web/src/components/Whiteboard.tsx

@@ -9,6 +9,7 @@ import React, { useCallback } from "react";
 import { RoomPhase } from "white-web-sdk";
 import pagesSVG from "../assets/image/pages.svg";
 import { WhiteboardStore } from "../stores/WhiteboardStore";
+import { isSupportedImageType, onDropImage } from "../utils/dnd/image";
 import "./Whiteboard.less";
 
 export interface WhiteboardProps {
@@ -30,12 +31,40 @@ export const Whiteboard = observer<WhiteboardProps>(function Whiteboard({ whiteb
         [room],
     );
 
+    const onDragOver = useCallback(
+        (event: React.DragEvent<HTMLDivElement>) => {
+            event.preventDefault();
+            const file = event.dataTransfer.files[0];
+            if (room && file && isSupportedImageType(file)) {
+                event.dataTransfer.dropEffect = "copy";
+            }
+        },
+        [room],
+    );
+
+    const onDrop = useCallback(
+        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);
+            }
+        },
+        [room],
+    );
+
     return (
         room && (
             <div
                 className={classNames("whiteboard-container", {
                     "is-readonly": !whiteboardStore.isWritable,
                 })}
+                onDragOver={onDragOver}
+                onDrop={onDrop}
             >
                 <div className="zoom-controller-box">
                     <ZoomController room={room} />

web/flat-web/src/utils/dnd/image.ts

@@ -0,0 +1,61 @@
+import { message } from "antd";
+import type { Room, Size } from "white-web-sdk";
+import { listFiles } from "../../apiMiddleware/flatServer/storage";
+import { i18n } from "../i18n";
+import { UploadTask } from "../UploadTaskManager/UploadTask";
+
+const ImageFileTypes = [
+    "image/png",
+    "image/jpg",
+    "image/jpeg",
+    "image/webp",
+    "image/apng",
+    "image/svg+xml",
+    "image/gif",
+    "image/bmp",
+    "image/avif",
+    "image/tiff",
+];
+
+export function isSupportedImageType(file: File): boolean {
+    return ImageFileTypes.includes(file.type);
+}
+
+export async function onDropImage(file: File, x: number, y: number, room: Room): Promise<void> {
+    if (!isSupportedImageType(file)) {
+        console.log("[dnd:image] unsupported file type:", file.type, file.name);
+        return;
+    }
+
+    const hideLoading = message.loading(i18n.t("Inserting-courseware-tips"));
+
+    const getSize = getImageSize(file);
+    const task = new UploadTask(file);
+    await task.upload();
+    const { files } = await listFiles({ page: 1 });
+    const cloudFile = files.find(f => f.fileUUID === task.fileUUID);
+
+    hideLoading();
+
+    if (!cloudFile?.fileURL) {
+        console.log("[dnd:image] upload failed:", file.name);
+        return;
+    }
+
+    const uuid = cloudFile.fileUUID;
+    const { width, height } = await getSize;
+    room.insertImage({ uuid, centerX: x, centerY: y, width, height, locked: false });
+    room.completeImageUpload(uuid, cloudFile.fileURL);
+}
+
+function getImageSize(file: File): Promise<Size> {
+    const image = new Image();
+    const url = URL.createObjectURL(file);
+    return new Promise(resolve => {
+        image.src = url;
+        image.onload = () => {
+            URL.revokeObjectURL(url);
+            resolve({ width: image.width, height: image.height });
+        };
+    });
+}