fix(web): whiteboard size error when the avatar wrap becomes longer (#…

…1103)
netless-io · Nov 17, 2021 · b11c83d · b11c83d
1 parent 5cccbca
commit b11c83d
Show file tree

Hide file tree

Showing 3 changed files with 50 additions and 43 deletions.
diff --git a/web/flat-web/src/components/Whiteboard.tsx b/web/flat-web/src/components/Whiteboard.tsx
@@ -10,7 +10,7 @@ import React, { useCallback, useEffect, useState } from "react";
 import { useTranslation } from "react-i18next";
 import { WhiteboardStore } from "../stores/whiteboard-store";
 import { isSupportedImageType, onDropImage } from "../utils/dnd/image";
-import { ScenesController } from "../../../../packages/flat-components/src";
+import { ScenesController } from "flat-components";
 
 export interface WhiteboardProps {
     whiteboardStore: WhiteboardStore;
@@ -115,55 +115,54 @@ export const Whiteboard = observer<WhiteboardProps>(function Whiteboard({ whiteb
         if (whiteboardEl) {
             const whiteboardRatio = whiteboardStore.getWhiteboardRatio();
 
-            if (whiteboardStore.smallClassRatio === whiteboardRatio) {
-                const classRoomRightSideWidth = whiteboardStore.isRightSideClose ? 0 : 304;
-                const classRoomTopBarHeight = 182;
-                const classRoomMinWidth = 1130;
-                const classRoomMinHeight = 610;
+            const isSmallClass = whiteboardStore.smallClassRatio === whiteboardRatio;
+            const classRoomRightSideWidth = whiteboardStore.isRightSideClose ? 0 : 304;
 
-                const whiteboardWidth = Math.min(
-                    window.innerWidth - classRoomRightSideWidth,
-                    (window.innerHeight - classRoomTopBarHeight) / whiteboardRatio,
-                );
+            let classRoomTopBarHeight: number;
+            let classRoomMinWidth: number;
+            let classRoomMinHeight: number;
+            let smallClassAvatarWrapMaxWidth: number;
 
-                const whiteboardHeight = whiteboardWidth * whiteboardRatio;
+            if (isSmallClass) {
+                classRoomMinWidth = whiteboardStore.isRightSideClose ? 826 : 1130;
+                classRoomMinHeight = 610;
+                classRoomTopBarHeight = 182;
+            } else {
+                classRoomMinWidth = whiteboardStore.isRightSideClose ? 716 : 1020;
+                classRoomMinHeight = 522;
+                classRoomTopBarHeight = 50;
+            }
 
-                whiteboardEl.style.width = `${whiteboardWidth}px`;
-                whiteboardEl.style.height = `${whiteboardHeight}px`;
+            const whiteboardWidth = Math.min(
+                window.innerWidth - classRoomRightSideWidth,
+                (window.innerHeight - classRoomTopBarHeight) / whiteboardRatio,
+            );
 
-                if (
-                    window.innerHeight < classRoomMinHeight ||
-                    window.innerWidth < classRoomMinWidth
-                ) {
-                    const whiteboardMinWidth = classRoomMinWidth - classRoomRightSideWidth;
-                    whiteboardEl.style.minWidth = `${whiteboardMinWidth}px`;
-                    whiteboardEl.style.minHeight = `${whiteboardMinWidth * whiteboardRatio}px`;
-                }
-            } else {
-                const classRoomRightSideWidth = whiteboardStore.isRightSideClose ? 0 : 304;
-                const classRoomTopBarHeight = 50;
-                const classRoomMinWidth = 1020;
-                const classRoomMinHeight = 522;
-
-                const whiteboardWidth = Math.min(
-                    window.innerWidth - classRoomRightSideWidth,
-                    (window.innerHeight - classRoomTopBarHeight) / whiteboardRatio,
-                );
+            const whiteboardHeight = whiteboardWidth * whiteboardRatio;
 
-                const whiteboardHeight = whiteboardWidth * whiteboardRatio;
+            whiteboardEl.style.width = `${whiteboardWidth}px`;
+            whiteboardEl.style.height = `${whiteboardHeight}px`;
 
-                whiteboardEl.style.width = `${whiteboardWidth}px`;
-                whiteboardEl.style.height = `${whiteboardHeight}px`;
+            if (window.innerHeight < classRoomMinHeight || window.innerWidth < classRoomMinWidth) {
+                const whiteboardMinWidth = classRoomMinWidth - classRoomRightSideWidth;
 
-                if (
-                    window.innerHeight < classRoomMinHeight ||
-                    window.innerWidth < classRoomMinWidth
-                ) {
-                    const whiteboardMinWidth = classRoomMinWidth - classRoomRightSideWidth;
-                    whiteboardEl.style.minWidth = `${whiteboardMinWidth}px`;
-                    whiteboardEl.style.minHeight = `${whiteboardMinWidth * whiteboardRatio}px`;
-                }
+                whiteboardEl.style.minWidth = `${whiteboardMinWidth}px`;
+                whiteboardEl.style.minHeight = `${whiteboardMinWidth * whiteboardRatio}px`;
+            }
+
+            const classRoomWidth = whiteboardWidth + classRoomRightSideWidth;
+            const classRoomWithoutRightSideWidth = classRoomMinWidth - classRoomRightSideWidth;
+
+            if (whiteboardStore.isRightSideClose) {
+                smallClassAvatarWrapMaxWidth =
+                    classRoomWidth < classRoomWithoutRightSideWidth
+                        ? classRoomWithoutRightSideWidth
+                        : classRoomWidth;
+            } else {
+                smallClassAvatarWrapMaxWidth =
+                    classRoomWidth < classRoomMinWidth ? classRoomMinWidth : classRoomWidth;
             }
+            whiteboardStore.updateSmallClassAvatarWrapMaxWidth(smallClassAvatarWrapMaxWidth);
         }
     };
 

diff --git a/web/flat-web/src/pages/SmallClassPage/index.tsx b/web/flat-web/src/pages/SmallClassPage/index.tsx
@@ -184,7 +184,10 @@ export const SmallClassPage = observer<SmallClassPageProps>(function SmallClassP
 
     function renderAvatars(): React.ReactNode {
         return (
-            <div className="realtime-avatars-wrap">
+            <div
+                className="realtime-avatars-wrap"
+                style={{ maxWidth: `${whiteboardStore.smallClassAvatarWrapMaxWidth}px` }}
+            >
                 <div className="realtime-avatars">
                     <SmallClassAvatar
                         isCreator={true}

diff --git a/web/flat-web/src/stores/whiteboard-store.ts b/web/flat-web/src/stores/whiteboard-store.ts
@@ -38,6 +38,7 @@ export class WhiteboardStore {
     public scenesCount = 0;
     public smallClassRatio = 8.3 / 16;
     public otherClassRatio = 10.46 / 16;
+    public smallClassAvatarWrapMaxWidth = 0;
 
     /** is room Creator */
     public readonly isCreator: boolean;
@@ -99,6 +100,10 @@ export class WhiteboardStore {
         this.isFocusWindow = isFocus;
     };
 
+    public updateSmallClassAvatarWrapMaxWidth = (smallClassAvatarWrapMaxWidth: number): void => {
+        this.smallClassAvatarWrapMaxWidth = smallClassAvatarWrapMaxWidth;
+    };
+
     public getWhiteboardRatio = (): number => {
         // the Ratio of whiteboard compute method is height / width.
         if (this.getRoomType() === RoomType.SmallClass) {