From 516a7da419f77f2f66451313a32143e4812246a8 Mon Sep 17 00:00:00 2001
From: fangxiang <fangxiang@cloudview.work>
Date: Mon, 28 Nov 2022 14:10:07 +0800
Subject: [PATCH] =?UTF-8?q?=E4=BC=98=E9=9C=B8=E5=AE=9A=E5=88=B6VideoWall?=
 =?UTF-8?q?=E5=AE=AB=E6=A0=BC=E6=A8=AA=E5=B1=8F=E7=AB=96=E5=B1=8F=E6=88=90?=
 =?UTF-8?q?=E6=AF=94=E4=BE=8B=E6=98=BE=E7=A4=BA=20about=E8=8F=9C=E5=8D=95?=
 =?UTF-8?q?=E4=BB=8E=E5=B7=A5=E5=85=B7=E6=A0=8Fother=E7=A7=BB=E5=8A=A8?=
 =?UTF-8?q?=E5=88=B0system=20system=E5=A2=9E=E5=8A=A0user?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/custom/ISVVideoWallDialog.vue | 25 +++++++++++---------
 1 file changed, 14 insertions(+), 11 deletions(-)

diff --git a/src/components/custom/ISVVideoWallDialog.vue b/src/components/custom/ISVVideoWallDialog.vue
index 4f70327..3f8c3b2 100644
--- a/src/components/custom/ISVVideoWallDialog.vue
+++ b/src/components/custom/ISVVideoWallDialog.vue
@@ -320,10 +320,13 @@ export default defineComponent({
       return result;
     };
 
-    const refreshPreiewGridWH = () => {
+    const refreshPreviewGridWH = () => {
       if (preview_grid.value) {
-        const max_height = window.innerHeight * 0.49; // items-center justify-center
-        const max_width = preview_grid.value.clientWidth * 0.95;
+        let max_height = window.innerHeight * 0.49; // items-center justify-center
+        let max_width = preview_grid.value.clientWidth * 0.95;
+        max_width = (max_width - preview_cols.value) & ~preview_cols.value;
+        max_height = (max_height - preview_rows.value) & ~preview_rows.value;
+
         let cell_width = 0;
         let cell_height = 0;
         if (screen_mode.value == 0) {
@@ -336,16 +339,16 @@ export default defineComponent({
         } else {
           cell_height = max_height / preview_rows.value;
           if (preview_cols.value == 1 && preview_rows.value == 4) {
-            cell_width = (cell_height * 18) / 16;
+            cell_width = (cell_height * 16) / 16;
           } else {
-            cell_width = (cell_height * 13) / 16;
+            cell_width = (cell_height * 12) / 16;
           }
           if (cell_width * preview_cols.value > max_width) {
             cell_width = max_width / preview_cols.value;
             if (preview_cols.value == 1 && preview_rows.value == 4) {
-              cell_height = (cell_width * 16) / 18;
+              cell_height = (cell_width * 16) / 16;
             } else {
-              cell_height = (cell_width * 16) / 13;
+              cell_height = (cell_width * 16) / 12;
             }
           }
         }
@@ -363,7 +366,7 @@ export default defineComponent({
         preview_rows.value = result.rows;
         preview_rotation.value = result.rotation;
 
-        refreshPreiewGridWH();
+        refreshPreviewGridWH();
       }
     );
 
@@ -374,13 +377,13 @@ export default defineComponent({
           const result = parseSpliceMode(splice_mode.value);
           splice_mode.value = result.rows + "x" + result.cols;
         }
-        refreshPreiewGridWH();
+        refreshPreviewGridWH();
       }
     );
 
     EventBus.getInstance().on(
       EventNamesDefine.WindowResize,
-      refreshPreiewGridWH
+      refreshPreviewGridWH
     );
 
     return {
@@ -463,7 +466,7 @@ export default defineComponent({
         }
 
         nextTick(() => {
-          refreshPreiewGridWH();
+          refreshPreviewGridWH();
         });
         show_dialog.value = true;
       },