添加焦点置顶功能

src/common/ClientConnection.ts

@@ -1,3 +1,4 @@
+import NormalWindowRequestEntity from "src/entities/NormalWindowRequestEntity";
 import { Protocol } from "src/entities/WSProtocol";
 import EventBus, { EventNamesDefine } from "./EventBus";
 
@@ -39,6 +40,8 @@ export default class ClientConnection {
     password?: string | null
   ) {
     if (this._destoryed) {
+      this.ws?.close();
+      this.ws = null;
       return;
     }
     this.url = url;
@@ -71,6 +74,11 @@ export default class ClientConnection {
   }
 
   login() {
+    if (this._destoryed) {
+      this.ws?.close();
+      this.ws = null;
+      return;
+    }
     if (this.is_connected) {
       const request = new Protocol.LoginRequest(this.user_name, this.password);
       this.ws?.send(JSON.stringify(request));
@@ -79,7 +87,6 @@ export default class ClientConnection {
 
   onClose(ev: CloseEvent) {
     this._is_login = false;
-    console.log("onClose");
     this._reconnect();
     EventBus.getInstance().emit(EventNamesDefine.WebSocketClose, this);
   }
@@ -94,6 +101,8 @@ export default class ClientConnection {
 
   private _reconnect() {
     if (this._destoryed) {
+      this.ws?.close();
+      this.ws = null;
       return;
     }
     if (
@@ -106,18 +115,28 @@ export default class ClientConnection {
         this._reconnectTimer = null;
       }
       this._reconnectTimer = setTimeout(() => {
-        console.log("reconnection...", new Date().getSeconds());
         this.reconnectTo(this.url, this.user_name, this.password);
       }, 3000);
     }
   }
 
   onOpen(ev: Event) {
+    if (this._destoryed) {
+      this.ws?.close();
+      this.ws = null;
+      return;
+    }
+
     this._is_login = false;
     this.login();
   }
 
   onMessage(ev: MessageEvent) {
+    if (this._destoryed) {
+      this.ws?.close();
+      this.ws = null;
+      return;
+    }
     try {
       const packet = JSON.parse(ev.data) as Protocol.PacketEntity;
 
@@ -199,11 +218,9 @@ export default class ClientConnection {
                 resolve(response);
               } else {
                 reject();
-                console.log("reject");
               }
             } catch {
               reject();
-              console.log("reject");
             }
           }
         }
@@ -268,6 +285,17 @@ export default class ClientConnection {
     this.ws?.send(JSON.stringify(data));
   }
 
+  public focusIn(window_id: number) {
+    this.ws?.send(
+      JSON.stringify(
+        new NormalWindowRequestEntity(
+          Protocol.Commands.kFocuseWindow,
+          window_id
+        )
+      )
+    );
+  }
+
   private _destoryed = false;
   public destory() {
     this._destoryed = true;

src/common/EventBus.ts

@@ -9,6 +9,11 @@ export default class EventBus extends EventEmitter {
     }
     return EventBus._instance;
   }
+
+  private constructor() {
+    super();
+    this.setMaxListeners(64);
+  }
 }
 
 export namespace EventNamesDefine {

src/components/Window.vue

@@ -1,6 +1,6 @@
 <template>
   <div
-    class="window"
+    class="window_class window_flag"
     :class="selected ? 'window_selected top' : 'window_normal'"
     @click="onClick"
     @mousedown="onMouseDown"
@@ -125,7 +125,10 @@
 </template>
 
 <style scoped>
-.window {
+.window_class {
+}
+
+.window_flag {
 }
 
 .window_selected {
@@ -224,7 +227,7 @@ div.absolute_left_down {
 import { Common } from "src/common/Common";
 import EventBus, { EventNamesDefine } from "src/common/EventBus";
 import GlobalData from "src/common/GlobalData";
-import { defineComponent, ref } from "vue";
+import { defineComponent, ref, watch, onUnmounted } from "vue";
 import { useStore } from "src/store";
 
 class _Flags {
@@ -262,6 +265,7 @@ export default defineComponent({
     "close_this_window",
     "close_other_windows",
     "close_all_windows",
+    "window_fouse_in",
   ],
   setup(props, { emit }) {
     const $store = useStore();
@@ -274,10 +278,36 @@ export default defineComponent({
     let can_move = ref(true);
     let can_resize = ref(true);
 
-    EventBus.getInstance().on(EventNamesDefine.UnSelectAllWindows, () => {
+    const onUnSelectAllWindows = () => {
       selected.value = false;
+    };
+    EventBus.getInstance().on(
+      EventNamesDefine.UnSelectAllWindows,
+      onUnSelectAllWindows
+    );
+    onUnmounted(() => {
+      EventBus.getInstance().removeListener(
+        EventNamesDefine.UnSelectAllWindows,
+        onUnSelectAllWindows
+      );
     });
 
+    watch(
+      () => props.window.window_state,
+      (newValue, oldValue) => {
+        if (newValue) {
+          console.log(newValue);
+          if (newValue.focus) {
+            console.log(newValue.focus);
+            EventBus.getInstance().emit(EventNamesDefine.UnSelectAllWindows);
+            selected.value = true;
+          } else {
+            selected.value = false;
+          }
+        }
+      }
+    );
+
     let mouse_down_flag = false;
     let mouse_last_pos_x = 0;
     let mouse_last_pos_y = 0;
@@ -298,8 +328,11 @@ export default defineComponent({
       flags,
 
       onClick(evt: PointerEvent) {
-        EventBus.getInstance().emit(EventNamesDefine.UnSelectAllWindows);
+        if (selected.value != true) {
-        selected.value = true;
+          EventBus.getInstance().emit(EventNamesDefine.UnSelectAllWindows);
+          selected.value = true;
+          emit("window_fouse_in", props.window.window_id);
+        }
       },
       onMouseDown(evt: MouseEvent) {
         if (selected.value) {

src/entities/MultimediaWindowEntity.ts

@@ -2,13 +2,26 @@ import BaseEntity from "./BaseEntity";
 import { SignalSourceEntity } from "./SignalSourceEntity";
 import { Protocol } from "./WSProtocol";
 
+export class WindowStates {
+  playing = false;
+  focus = false;
+  muted = false;
+
+  constructor(playing?: boolean, focus?: boolean, muted?: boolean) {
+    this.playing = playing ?? false;
+    this.focus = focus ?? false;
+    this.muted = muted ?? false;
+  }
+}
+
 export class MultimediaWindowEntity extends BaseEntity {
   x: number = 0;
   y: number = 0;
   width: number = 0;
   height: number = 0;
   signal_source_table_uuid: string = "";
-  // signal_source_table_entity: SignalSourceEntity = new SignalSourceEntity();
+
+  window_state = new WindowStates();
 }
 
 export class WindowOpenNotifyEntity extends MultimediaWindowEntity {

src/entities/NormalWindowRequestEntity.ts

@@ -0,0 +1,12 @@
+import { Protocol } from "./WSProtocol";
+
+export default class NormalWindowRequestEntity extends Protocol.PacketEntity {
+  window_id: number = 0;
+
+  constructor(command?: string, window_id?: number) {
+    super();
+
+    this.command = command ?? Protocol.Commands.kUnKnowCommand;
+    this.window_id = window_id ?? 0;
+  }
+}

src/entities/WSProtocol.ts

@@ -57,6 +57,14 @@ export namespace Protocol {
       return Commands.PROTOCOL_PREFIX + "CloseWindow";
     }
 
+    public static get kWindowOtherStateChanged() {
+      return Commands.PROTOCOL_PREFIX + "WindowOtherStateChanged";
+    }
+
+    public static get kFocuseWindow() {
+      return Commands.PROTOCOL_PREFIX + "FocuseWindow";
+    }
+
     static _all_commands = new Set([
       Commands.kUnKnowCommand,
       Commands.kSearchDevice,
@@ -72,6 +80,7 @@ export namespace Protocol {
       Commands.kResizeWindow,
       Commands.kOpenWindow,
       Commands.kCloseWindow,
+      Commands.kWindowOtherStateChanged,
     ]);
 
     public static get AllCommands() {

src/entities/WindowOtherStateChangeNotifyEntity.ts

@@ -0,0 +1,8 @@
+import { Protocol } from "./WSProtocol";
+
+export default class WindowOtherStateChangeNotifyEntity extends Protocol.PacketEntity {
+  window_id: number = 0;
+  playing = false;
+  focus = false;
+  muted = false;
+}

src/layouts/MainLayout.vue

@@ -7,10 +7,6 @@
       <left-tool-bar />
     </q-drawer>
 
-    <q-drawer v-model="data.show_right_drawer" side="right" bordered>
-      <!-- drawer content -->
-      <right-tool-bar />
-    </q-drawer>
     <q-page-container>
       <router-view />
     </q-page-container>
@@ -24,7 +20,6 @@
 import { defineComponent, reactive } from "vue";
 
 import LeftToolBar from "src/pages/LeftToolBar.vue";
-import RightToolBar from "src/pages/RightToolBar.vue";
 import TopToolBar from "src/pages/TopToolBar.vue";
 
 class _Data {
@@ -35,7 +30,7 @@ class _Data {
 export default defineComponent({
   name: "MainLayout",
 
-  components: { LeftToolBar, RightToolBar, TopToolBar },
+  components: { LeftToolBar, TopToolBar },
 
   setup() {
     const data = reactive(new _Data());

src/pages/RightToolBar.vue

@@ -1,17 +0,0 @@
-<template>
-  <div>aaaaaaaa</div>
-</template>
-
-<script lang="ts">
-import { defineComponent } from 'vue';
-
-export default defineComponent({
-  name: 'PageRightToolBar',
-
-  components: {},
-
-  setup() {
-    return {};
-  },
-});
-</script>

src/pages/WallPage.vue

@@ -14,8 +14,11 @@
         @close_this_window="closeWindow"
         @close_other_windows="closeOtherWindows"
         @close_all_windows="closeAllWindows"
-        :ref="'window_' + index"
+        @window_fouse_in="windowFocusIn"
+        :ref="'window_' + item.window_id"
+        :id="'window_' + item.window_id"
         v-for="(item, index) in windows"
+        :uuid="item.uuid"
         :key="index"
         class="window"
         :signal_source_table_uuid="item.signal_source_table_uuid"
@@ -44,7 +47,7 @@
           :ref="'item' + (row - 1) * wall_cols * col"
           v-for="col in wall_cols"
           :key="col"
-          class="col wall_item"
+          class="col wall_item wall_item_flag"
           :style="{
             width: item_witdh + 'px',
             height: item_height + 'px',
@@ -80,6 +83,9 @@
 .window {
   position: absolute;
 }
+
+.wall_item_flag {
+}
 </style>
 
 <script lang="ts">
@@ -100,7 +106,11 @@ import Window from "src/components/Window.vue";
 import { useI18n } from "vue-i18n";
 import { useStore } from "src/store";
 import EventBus, { EventNamesDefine } from "src/common/EventBus";
-import { WindowOpenNotifyEntity } from "src/entities/MultimediaWindowEntity";
+import {
+  WindowOpenNotifyEntity,
+  WindowStates,
+} from "src/entities/MultimediaWindowEntity";
+import WindowOtherStateChangeNotifyEntity from "src/entities/WindowOtherStateChangeNotifyEntity";
 
 interface _OptionsType {
   $t: any;
@@ -328,6 +338,47 @@ export default defineComponent({
                   }
                 }
                 break;
+              case Protocol.Commands.kWindowOtherStateChanged:
+                {
+                  const temp = JSON.parse(
+                    response.data
+                  ) as WindowOtherStateChangeNotifyEntity;
+                  if (temp && temp.window_id) {
+                    const window = $store.state.windows.find(
+                      (item) => item.window_id == temp.window_id
+                    );
+                    if (window) {
+                      // $store.commit("setWindowPropertys", [
+                      //   {
+                      //     window,
+                      //     property_name: "playing",
+                      //     value: temp.playing,
+                      //   },
+                      //   {
+                      //     window,
+                      //     property_name: "focus",
+                      //     value: temp.focus,
+                      //   },
+                      //   {
+                      //     window,
+                      //     property_name: "muted",
+                      //     value: temp.muted,
+                      //   },
+                      // ]);
+                      window.window_state; //
+                      $store.commit("setWindowProperty", {
+                        window,
+                        property_name: "window_state",
+                        value: new WindowStates(
+                          temp.playing,
+                          temp.focus,
+                          temp.muted
+                        ),
+                      });
+                    }
+                  }
+                }
+                break;
               default:
                 console.log(response.packet);
                 break;
@@ -369,21 +420,52 @@ export default defineComponent({
           if (signal_sources.length) {
             let signal_source = signal_sources[0];
             if (signal_source) {
-              const dom = e.target as HTMLElement;
+              let dom: HTMLElement | null = e.target as HTMLElement;
               if (dom) {
-                GlobalData.getInstance()
+                if (dom.classList.contains("wall_item_flag")) {
-                  .getCurrentClient()
+                  GlobalData.getInstance()
-                  ?.openWindow(
+                    .getCurrentClient()
-                    new Protocol.OpenWindowRequestEntity(
+                    ?.openWindow(
-                      signal_source.uuid,
+                      new Protocol.OpenWindowRequestEntity(
-                      (dom.offsetLeft - (wall.value?.offsetLeft ?? 0)) *
+                        signal_source.uuid,
-                        wall_width_scaler.value,
+                        (dom.offsetLeft - (wall.value?.offsetLeft ?? 0)) *
-                      (dom.offsetTop - (wall.value?.offsetTop ?? 0)) *
+                          wall_width_scaler.value,
-                        wall_height_scaler.value,
+                        (dom.offsetTop - (wall.value?.offsetTop ?? 0)) *
-                      dom.offsetWidth * wall_width_scaler.value,
+                          wall_height_scaler.value,
-                      dom.offsetHeight * wall_height_scaler.value
+                        dom.offsetWidth * wall_width_scaler.value,
-                    )
+                        dom.offsetHeight * wall_height_scaler.value
-                  );
+                      )
+                    );
+                } else if (dom.classList.contains("window_flag")) {
+                  let uuid = dom.getAttribute("uuid");
+                  if (uuid) {
+                    let window = $store.state.windows.find(
+                      (item) => item.uuid == uuid
+                    );
+                    if (window) {
+                      let client = GlobalData.getInstance().getCurrentClient();
+                      if (client) {
+                        let x = window.x;
+                        let y = window.y;
+                        let width = window.width;
+                        let height = window.height;
+
+                        client.closeWindow(window.window_id);
+                        setTimeout(() => {
+                          client?.openWindow(
+                            new Protocol.OpenWindowRequestEntity(
+                              signal_source.uuid,
+                              x,
+                              y,
+                              width,
+                              height
+                            )
+                          );
+                        }, 100);
+                      }
+                    }
+                  }
+                }
               }
             }
           }
@@ -391,17 +473,23 @@ export default defineComponent({
       },
 
       onDragEnter(e: DragEvent) {
-        let target = e.target as any;
+        let target: HTMLElement | null = e.target as HTMLElement;
         if (target && target.draggable !== true) {
-          target.classList.add("drag-enter");
+          while (
+            target &&
+            !target.classList.contains("window_flag") &&
+            !target.classList.contains("wall_item_flag")
+          ) {
+            target = target.parentElement;
+          }
+
+          target?.classList.add("drag-enter");
         }
       },
 
       onDragLeave(e: DragEvent) {
-        let target = e.target as any;
+        let target: HTMLElement = e.target as HTMLElement;
-        if (target) {
+        target?.classList.remove("drag-enter");
-          target.classList.remove("drag-enter");
-        }
       },
 
       onDragOver(e: DragEvent) {
@@ -467,6 +555,9 @@ export default defineComponent({
           }
         }
       },
+      windowFocusIn(window_id: number) {
+        GlobalData.getInstance().getCurrentClient()?.focusIn(window_id);
+      },
       closeOtherWindows(window_id: number) {
         console.log(window_id);
         for (const window of $store.state.windows) {