refactor(whiteboard): auto scale dropped image (#816)

netless-io · Jul 23, 2021 · 2becc27 · 2becc27
1 parent 07359e6
commit 2becc27
Show file tree

Hide file tree

Showing 4 changed files with 38 additions and 12 deletions.
diff --git a/desktop/renderer-app/src/pages/CloudStoragePage/index.tsx b/desktop/renderer-app/src/pages/CloudStoragePage/index.tsx
@@ -94,6 +94,7 @@ export const CloudStoragePage = observer<CloudStoragePageProps>(function CloudSt
             return;
         }
 
+        // shrink the image a little to fit the screen
         const maxWidth = window.innerWidth * 0.8;
         const maxHeight = window.innerHeight * 0.8;
 
@@ -120,8 +121,7 @@ export const CloudStoragePage = observer<CloudStoragePageProps>(function CloudSt
         const uuid = v4uuid();
         room.insertImage({
             uuid,
-            centerX: 0,
-            centerY: 0,
+            ...room.state.cameraState,
             width: Math.floor(width * scale),
             height: Math.floor(height * scale),
             locked: false,

diff --git a/desktop/renderer-app/src/utils/dnd/image.ts b/desktop/renderer-app/src/utils/dnd/image.ts
@@ -1,4 +1,5 @@
 import { message } from "antd";
+import { v4 as v4uuid } from "uuid";
 import type { Room, Size } from "white-web-sdk";
 import { listFiles } from "../../apiMiddleware/flatServer/storage";
 import { i18n } from "../i18n";
@@ -42,20 +43,32 @@ export async function onDropImage(file: File, x: number, y: number, room: Room):
         return;
     }
 
-    const uuid = cloudFile.fileUUID;
+    const uuid = v4uuid();
     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> {
+export function getImageSize(file: File): Promise<Size> {
     const image = new Image();
     const url = URL.createObjectURL(file);
+    const { innerWidth, innerHeight } = window;
+    // shrink the image a little to fit the screen
+    const maxWidth = innerWidth * 0.8;
+    const maxHeight = innerHeight * 0.8;
+    image.src = url;
     return new Promise(resolve => {
-        image.src = url;
         image.onload = () => {
             URL.revokeObjectURL(url);
-            resolve({ width: image.width, height: image.height });
+            const { width, height } = image;
+            let scale = 1;
+            if (width > maxWidth || height > maxHeight) {
+                scale = Math.min(maxWidth / width, maxHeight / height);
+            }
+            resolve({ width: Math.floor(width * scale), height: Math.floor(height * scale) });
+        };
+        image.onerror = () => {
+            resolve({ width: innerWidth, height: innerHeight });
         };
     });
 }
diff --git a/web/flat-web/src/pages/CloudStoragePage/CloudStoragePanel.tsx b/web/flat-web/src/pages/CloudStoragePage/CloudStoragePanel.tsx
@@ -87,6 +87,7 @@ export const CloudStoragePanel = observer<CloudStoragePanelProps>(function Cloud
             return;
         }
 
+        // shrink the image a little to fit the screen
         const maxWidth = window.innerWidth * 0.8;
         const maxHeight = window.innerHeight * 0.8;
 
@@ -113,8 +114,7 @@ export const CloudStoragePanel = observer<CloudStoragePanelProps>(function Cloud
         const uuid = v4uuid();
         room.insertImage({
             uuid,
-            centerX: 0,
-            centerY: 0,
+            ...room.state.cameraState,
             width: Math.floor(width * scale),
             height: Math.floor(height * scale),
             locked: false,

diff --git a/web/flat-web/src/utils/dnd/image.ts b/web/flat-web/src/utils/dnd/image.ts
@@ -1,4 +1,5 @@
 import { message } from "antd";
+import { v4 as v4uuid } from "uuid";
 import type { Room, Size } from "white-web-sdk";
 import { listFiles } from "../../apiMiddleware/flatServer/storage";
 import { i18n } from "../i18n";
@@ -42,20 +43,32 @@ export async function onDropImage(file: File, x: number, y: number, room: Room):
         return;
     }
 
-    const uuid = cloudFile.fileUUID;
+    const uuid = v4uuid();
     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> {
+export function getImageSize(file: File): Promise<Size> {
     const image = new Image();
     const url = URL.createObjectURL(file);
+    const { innerWidth, innerHeight } = window;
+    // shrink the image a little to fit the screen
+    const maxWidth = innerWidth * 0.8;
+    const maxHeight = innerHeight * 0.8;
+    image.src = url;
     return new Promise(resolve => {
-        image.src = url;
         image.onload = () => {
             URL.revokeObjectURL(url);
-            resolve({ width: image.width, height: image.height });
+            let { width, height } = image;
+            let scale = 1;
+            if (width > maxWidth || height > maxHeight) {
+                scale = Math.min(maxWidth / width, maxHeight / height);
+            }
+            resolve({ width: Math.floor(width * scale), height: Math.floor(height * scale) });
+        };
+        image.onerror = () => {
+            resolve({ width: innerWidth, height: innerHeight });
         };
     });
 }