优化缩略图的处理

excalidraw/excalidraw-app/data/storageAdapters/BackendStorageAdapter.ts

@@ -7,6 +7,7 @@ import {
 } from "../storage";
 import { nanoid } from "nanoid";
 import { jwtDecode } from "jwt-decode";
+import { generateThumbnail } from "../thumbnail";
 
 export class AuthError extends Error {
   constructor(message: string) {
@@ -64,19 +65,8 @@ export class BackendStorageAdapter implements IStorageAdapter {
       }
       throw new Error(`Failed to list canvases: ${response.statusText}`);
     }
-    // Backend doesn't send userId, so we enrich the data here.
-    const canvases: Omit<CanvasMetadata, "userId">[] = await response.json();
-    const token = localStorage.getItem("token");
-    if (!token) {
-      return [];
-    }
-    const userId = getUserIdFromJwt(token);
-    if (!userId) {
-      console.error("Could not determine userId from token.");
-      return [];
-    }
-
-    return canvases.map((canvas) => ({ ...canvas, userId }));
+    const canvases: CanvasMetadata[] = await response.json();
+    return canvases;
   }
 
   async loadCanvas(id: string): Promise<CanvasData | null> {
@@ -98,7 +88,21 @@ export class BackendStorageAdapter implements IStorageAdapter {
   }
 
   async saveCanvas(id: string, data: CanvasData): Promise<void> {
-    const saveData = dehydrateCanvasData(data);
+    let dataForUpload: CanvasData;
+    if (data.thumbnail) {
+      dataForUpload = data;
+    } else {
+      const thumbnail = await generateThumbnail(
+        data.elements,
+        data.appState,
+        data.files,
+      );
+      dataForUpload = {
+        ...data,
+        thumbnail: data.elements.length > 0 ? thumbnail : undefined,
+      };
+    }
+    const saveData = dehydrateCanvasData(dataForUpload);
 
     const response = await fetch(`${API_BASE_URL}/${id}`, {
       method: "PUT",
@@ -123,14 +127,24 @@ export class BackendStorageAdapter implements IStorageAdapter {
     if (!userId) {
       throw new Error("Could not parse user ID from token.");
     }
+    const thumbnail = await generateThumbnail(
+      data.elements,
+      data.appState,
+      data.files,
+    );
+    const dataWithThumbnail: CanvasData = {
+      ...data,
+      thumbnail: data.elements.length > 0 ? thumbnail : undefined,
+    };
 
-    await this.saveCanvas(newId, data);
+    await this.saveCanvas(newId, dataWithThumbnail);
     return {
       id: newId,
       name: data.appState?.name || "Untitled",
       createdAt: new Date().toISOString(),
       updatedAt: new Date().toISOString(),
       userId,
+      thumbnail: dataWithThumbnail.thumbnail,
     };
   }