添加双击铺满宫格的功能和点击网格外部取消窗口选中的功能

src/App.vue

@@ -19,6 +19,9 @@ export default defineComponent({
     window.onresize = (evt: any) =>
       EventBus.getInstance().emit(EventNamesDefine.WindowResize, evt);
 
+    window.document.body.onclick = (evt: any) =>
+      EventBus.getInstance().emit(EventNamesDefine.DocumentBodyClick, evt);
+
     document.body.classList.add("overflow-hidden");
     return {};
   },

src/common/ClientConnection.ts

@@ -553,6 +553,17 @@ export default class ClientConnection {
     );
   }
 
+  public windowFitGrid(window_id: number) {
+    this.ws?.send(
+      JSON.stringify(
+        new NormalWindowRequestEntity(
+          Protocol.Commands.kWindowFitGrid,
+          window_id
+        )
+      )
+    );
+  }
+
   public restartDevice() {
     this.ws?.send(JSON.stringify(new Protocol.RestartDeviceRequestEntity()));
   }

src/common/EventBus.ts

@@ -21,6 +21,7 @@ export namespace EventNamesDefine {
   export const UnSelectAllWindows = "onUnSelectAllWindows";
   export const UnFocusAllWindows = "onUnFocusAllWindows";
   export const WindowResize = "onWindowResize";
+  export const DocumentBodyClick = "onDocumentBodyClick";
   export const ResponseMessage = "onResponseData";
   export const NotifyMessage = "onNotifyMessage";
   export const WebSocketClose = "onWebSocketClose";

src/entities/WSProtocol.ts

@@ -75,6 +75,10 @@ export namespace Protocol {
       return Commands.PROTOCOL_PREFIX + "FocuseWindow";
     }
 
+    public static get kWindowFitGrid() {
+      return Commands.PROTOCOL_PREFIX + "WindowFitGrid";
+    }
+
     public static get kRpcAddSignalSourceGroup() {
       return Commands.PROTOCOL_PREFIX + "RpcAddSignalSourceGroup";
     }

src/pages/WallPage.vue

@@ -15,6 +15,7 @@
         @close_other_windows="closeOtherWindows"
         @close_all_windows="closeAllWindows"
         @window_fouse_in="windowFocusIn"
+        @dblclick="(evt) => windowDBClick(item.window_id)"
         :ref="'window_' + item.window_id"
         :id="'window_' + item.window_id"
         v-for="(item, index) in windows"
@@ -134,17 +135,15 @@ export default defineComponent({
     const wall_width_scaler = ref(0);
     const wall_height_scaler = ref(0);
 
-    const calcWallVWScaler = () => {
+    const calcWallVWScaler = (wall_width: number, wall_height: number) => {
       if (wall.value && wall.value.parentElement) {
+        console.log($store.state.device_screen_width);
+        console.log($store.state.device_screen_height);
+        console.log(wall_width);
+        console.log(wall_height);
         wall_height_scaler.value =
-          $store.state.device_screen_height /
-          (item_height.value * wall_rows.value);
-        wall_width_scaler.value =
-          $store.state.device_screen_width /
-          wall.value.parentElement.offsetWidth;
-
-        wall_height_scaler.value += 0.1;
-        wall_width_scaler.value += 0.05;
+          $store.state.device_screen_height / wall_height;
+        wall_width_scaler.value = $store.state.device_screen_width / wall_width;
       }
     };
 
@@ -161,6 +160,28 @@ export default defineComponent({
       }
     };
 
+    EventBus.getInstance().on(
+      EventNamesDefine.DocumentBodyClick,
+      (evt: PointerEvent) => {
+        if (wall.value) {
+          let flag = false;
+          {
+            let item: HTMLElement | null = evt.srcElement as HTMLElement;
+            while (item) {
+              if (item == wall.value) {
+                flag = true;
+                break;
+              }
+              item = item.parentElement;
+            }
+          }
+          if (!flag) {
+            EventBus.getInstance().emit(EventNamesDefine.UnSelectAllWindows);
+          }
+        }
+      }
+    );
+
     EventBus.getInstance().on(
       EventNamesDefine.NotifyMessage,
       (notify: NotifyMessage) => {
@@ -268,7 +289,7 @@ export default defineComponent({
           (element: HTMLElement) => {
             if (element) {
               calcWallItemWH();
-              calcWallVWScaler();
+              calcWallVWScaler(element.offsetWidth, element.offsetHeight);
             }
           }
         );
@@ -402,7 +423,7 @@ export default defineComponent({
             window,
             property_name: "width",
             value: Math.max(
-              window.width + offset_width * wall_height_scaler.value,
+              window.width + offset_width * wall_width_scaler.value,
               32
             ),
           },
@@ -448,6 +469,9 @@ export default defineComponent({
           }
         }
       },
+      windowDBClick(window_id: number) {
+        GlobalData.getInstance().getCurrentClient()?.windowFitGrid(window_id);
+      },
       closeWindow(window_id: number) {
         GlobalData.getInstance().getCurrentClient()?.closeWindow(window_id);
       },