窗口按实际顺序显示

package.json

@@ -1,6 +1,6 @@
 {
   "name": "media_player_client",
-  "version": "1.2.0",
+  "version": "1.2.1",
   "description": "A Quasar Framework app",
   "productName": "MediaPlayerClient",
   "author": "fangxiang <fangxiang@cloudview.work>",

src/common/ClientConnection.ts

@@ -506,10 +506,7 @@ export default class ClientConnection {
   public focusIn(window_id: number) {
     this.ws?.send(
       JSON.stringify(
-        new NormalWindowRequestEntity(
+        new NormalWindowRequestEntity(Protocol.Commands.kFocusWindow, window_id)
-          Protocol.Commands.kFocuseWindow,
-          window_id
-        )
       )
     );
   }

src/common/EventBus.ts

@@ -19,7 +19,6 @@ export default class EventBus extends EventEmitter {
 export namespace EventNamesDefine {
   export const UnKnow = "onUnKnow";
   export const UnSelectAllWindows = "onUnSelectAllWindows";
-  export const UnFocusAllWindows = "onUnFocusAllWindows";
   export const WindowResize = "onWindowResize";
   export const WindowMouseDown = "onWindowMouseDown";
   export const WindowMouseMove = "onWindowMouseMove";

src/components/Window.vue

@@ -1,16 +1,15 @@
 <template>
   <div
     class="window_class window_flag"
-    :class="
+    :class="selected ? 'window_selected' : 'window_normal'"
-      (selected ? 'window_selected' : 'window_normal') +
-      ' ' +
-      (focused ? 'top' : '')
-    "
     @click="onClick"
     @mousedown="onMouseDown"
     @mousemove="onMouseMove"
     @mouseleave="onMouseLeave"
     @mouseup="onMouseUp"
+    :style="{
+      background: $props.window.client_color,
+    }"
   >
     <q-popup-proxy context-menu>
       <q-list>
@@ -405,18 +404,12 @@ export default defineComponent({
     });
 
     let selected = ref(false);
-    let focused = ref(false);
     let can_move = ref(true);
     let can_resize = ref(true);
     let move_flag = false;
 
     const onUnSelectAllWindows = () => {
       selected.value = false;
-      focused.value = false;
-    };
-
-    const onUnFocusAllWindows = () => {
-      focused.value = false;
     };
 
     EventBus.getInstance().on(
@@ -424,11 +417,6 @@ export default defineComponent({
       onUnSelectAllWindows
     );
 
-    EventBus.getInstance().on(
-      EventNamesDefine.UnFocusAllWindows,
-      onUnFocusAllWindows
-    );
-
     onUnmounted(() => {
       EventBus.getInstance().removeListener(
         EventNamesDefine.UnSelectAllWindows,
@@ -436,20 +424,6 @@ export default defineComponent({
       );
     });
 
-    watch(
-      () => props.window.focus,
-      (newValue, oldValue) => {
-        if (newValue) {
-          let old = selected.value;
-          if (newValue.focus) {
-            EventBus.getInstance().emit(EventNamesDefine.UnFocusAllWindows);
-          }
-          focused.value = newValue.focus;
-          selected.value = old;
-        }
-      }
-    );
-
     let mouse_down_flag = false;
     let mouse_last_pos_x = 0;
     let mouse_last_pos_y = 0;
@@ -467,7 +441,6 @@ export default defineComponent({
     return {
       signal_source,
       selected,
-      focused,
       can_move,
       can_resize,
       flags,
@@ -475,7 +448,7 @@ export default defineComponent({
       is_clock_window,
 
       calc_is_audio_player_window,
-      onClick(evt: PointerEvent) {
+      onClick(evt: MouseEvent) {
         if (ctrl_press_flag) {
           ctrl_press_flag = false;
           return;
@@ -485,7 +458,6 @@ export default defineComponent({
           if (selected.value != true) {
             EventBus.getInstance().emit(EventNamesDefine.UnSelectAllWindows);
             selected.value = true;
-            focused.value = true;
             emit("window_fouse_in", props.window.window_id);
             $store.commit("setSelectedWindow", props.window.uuid);
           }
@@ -591,9 +563,9 @@ export default defineComponent({
           cleanMouseDownFlag();
         }
 
-        if (!focused) {
+        // if (!focused) {
-          emit("window_fouse_in", props.window.window_id);
+        //   emit("window_fouse_in", props.window.window_id);
-        }
+        // }
       },
 
       getItemIcon(item_type: string) {

src/entities/MultimediaWindowEntity.ts

@@ -44,4 +44,6 @@ export class WindowOpenNotifyEntity extends MultimediaWindowEntity {
   polling_title: string = "";
   /** 轮询时的属性,不轮询时无效 */
   polling_window_type: string = "EWindowType::Normal";
+
+  client_color: string = "";
 }

src/entities/WSProtocol.ts

@@ -72,8 +72,12 @@ export namespace Protocol {
       return Commands.PROTOCOL_PREFIX + "WindowOtherStateChanged";
     }
 
-    public static get kFocuseWindow() {
+    public static get kFocusWindow() {
-      return Commands.PROTOCOL_PREFIX + "FocuseWindow";
+      return Commands.PROTOCOL_PREFIX + "FocusWindow";
+    }
+
+    public static get kLowerWindow() {
+      return Commands.PROTOCOL_PREFIX + "LowerWindow";
     }
 
     public static get kWindowFitGrid() {
@@ -287,6 +291,8 @@ export namespace Protocol {
       Commands.kResizeWindow,
       Commands.kOpenWindow,
       Commands.kCloseWindow,
+      Commands.kFocusWindow,
+      Commands.kLowerWindow,
       Commands.kWindowOtherStateChanged,
       Commands.kRpcAddSignalSourceGroup,
       Commands.kRpcDeleteSignalSourceGroup,
@@ -1572,4 +1578,21 @@ export namespace Protocol {
       this.command = Commands.kPollingStateChanged;
     }
   }
+
+  export class FocusWindowNotifyEntity extends PacketEntity {
+    new_window_id: number = 0;
+    old_window_id: number = 0;
+    constructor() {
+      super();
+      this.command = Commands.kFocusWindow;
+    }
+  }
+
+  export class LowerWindowNotifyEntity extends PacketEntity {
+    window_id: number = 0;
+    constructor() {
+      super();
+      this.command = Commands.kLowerWindow;
+    }
+  }
 }

src/entities/WindowOtherStateChangeNotifyEntity.ts

@@ -3,7 +3,6 @@ import { Protocol } from "./WSProtocol";
 export default class WindowOtherStateChangeNotifyEntity extends Protocol.PacketEntity {
   window_id: number = 0;
   playing = false;
-  focus = false;
   muted = false;
   volume = 80;
   polling = false;

src/pages/WallPage.vue

@@ -9,7 +9,6 @@
     style="background-color: #bce0f0"
   >
     <div id="windows" style="position: absolute">
-      <div v-for="(item, index) in windows" :key="index">
       <window
         @reset_geometry_offset="resetGeometryOffset"
         @commit_geometry="commitGeometry"
@@ -23,6 +22,8 @@
         @start_polling="start_polling"
         @stop_polling="stop_polling"
         @polling_setting="polling_setting"
+        v-for="(item, index) in windows"
+        :key="index"
         :ref="'window_' + item.window_id"
         :id="'window_' + item.window_id"
         :uuid="item.uuid"
@@ -33,8 +34,7 @@
         :window="item"
         :style="{
           top:
-              (item.y * $store.state.device_screen_height) /
+            (item.y * $store.state.device_screen_height) / wall_height_scaler +
-                wall_height_scaler +
             'px',
           left:
             (item.x * $store.state.device_screen_width) / wall_width_scaler +
@@ -47,9 +47,12 @@
             (item.height * $store.state.device_screen_height) /
               wall_height_scaler +
             'px',
+          'z-index': $store.state.windows_sort.findIndex(
+            (element) => element == item.uuid
+          ),
         }"
-        />
+      >
-      </div>
+      </window>
     </div>
     <div ref="wall_grids" @click="onWallGridsClick">
       <div
@@ -446,18 +449,6 @@ export default defineComponent({
                   notify.data
                 ) as WindowOtherStateChangeNotifyEntity;
                 if (temp && temp.window_id) {
-                  if (temp.focus) {
-                    for (const window of $store.state.windows) {
-                      if (window) {
-                        $store.commit("setWindowProperty", {
-                          window,
-                          property_name: "focus",
-                          value: false,
-                        });
-                      }
-                    }
-                  }
-
                   const window = $store.state.windows.find(
                     (item) => item.window_id == temp.window_id
                   );
@@ -468,11 +459,6 @@ export default defineComponent({
                         property_name: "playing",
                         value: temp.playing,
                       },
-                      {
-                        window,
-                        property_name: "focus",
-                        value: temp.focus,
-                      },
                       {
                         window,
                         property_name: "muted",
@@ -508,6 +494,43 @@ export default defineComponent({
                 }
               }
               break;
+            case Protocol.Commands.kFocusWindow:
+              {
+                const temp = JSON.parse(
+                  notify.data
+                ) as Protocol.FocusWindowNotifyEntity;
+                if (temp) {
+                  for (const window of $store.state.windows) {
+                    if (window && window.window_id != temp.new_window_id) {
+                      $store.commit("setWindowProperty", {
+                        window,
+                        property_name: "focus",
+                        value: false,
+                      });
+                    }
+                  }
+                  const window = $store.state.windows.find(
+                    (item) => item.window_id == temp.new_window_id
+                  );
+                  $store.commit("setWindowProperty", {
+                    window,
+                    property_name: "focus",
+                    value: true,
+                  });
+                  $store.commit("topWindow", temp.new_window_id);
+                }
+              }
+              break;
+            case Protocol.Commands.kLowerWindow:
+              {
+                const temp = JSON.parse(
+                  notify.data
+                ) as Protocol.LowerWindowNotifyEntity;
+                if (temp) {
+                  $store.commit("lowerWindow", temp.window_id);
+                }
+              }
+              break;
             case Protocol.Commands.kCurrentRunningPlanStateChanged:
               {
                 const temp = JSON.parse(

src/store/index.ts

@@ -38,6 +38,7 @@ export interface StateInterface {
   device_screen_width: number;
   device_screen_height: number;
   windows: WindowOpenNotifyEntity[];
+  windows_sort: string[];
   device_ip_address: string;
   power_on_plan: string;
   fan_temp: number;
@@ -251,6 +252,8 @@ class _TreeHelper {
 export const storeKey: InjectionKey<VuexStore<StateInterface>> =
   Symbol("vuex-key");
 
+import window_color_list from "./window_color_list.js";
+
 export default store(function (/* { ssrContext } */) {
   const Store = createStore<StateInterface>({
     modules: {
@@ -267,6 +270,7 @@ export default store(function (/* { ssrContext } */) {
       device_screen_width: 1920,
       device_screen_height: 1080,
       windows: [],
+      windows_sort: [],
       device_ip_address: "localhost",
       power_on_plan: "",
       fan_temp: 0,
@@ -303,17 +307,74 @@ export default store(function (/* { ssrContext } */) {
           window[property_name] = value;
         }
       },
+      setWindowClientProperty(state: StateInterface, playload?: any) {
+        const window = playload.window;
+        const property_name = playload.property_name;
+        const value = playload.value;
+        if (window && property_name) {
+          window.client_propertys[property_name] = value;
+        }
+      },
       setWindows(state: StateInterface, playload?: WindowOpenNotifyEntity[]) {
         if (playload) {
           state.windows = playload;
+          state.windows_sort = [];
+          for (const item of state.windows) {
+            state.windows_sort.push(item.uuid);
+          }
+          for (const window of state.windows) {
+            if (window) {
+              window.client_color = window_color_list.splice(
+                Math.round(Math.random() * window_color_list.length),
+                1
+              )[0];
+            }
+          }
         }
       },
       clearWindows(state: StateInterface, playload?: any) {
         state.windows = [];
+        state.windows_sort = [];
       },
       pushWindow(state: StateInterface, playload?: WindowOpenNotifyEntity) {
         if (playload) {
+          playload.client_color = window_color_list.splice(
+            Math.round(Math.random() * window_color_list.length),
+            1
+          )[0];
+
           state.windows.push(playload);
+          state.windows_sort.push(playload.uuid);
+        }
+      },
+      topWindow(state: StateInterface, playload?: number) {
+        const window = state.windows.find(
+          (element) => element && element.window_id == playload
+        );
+        if (window) {
+          if (window) {
+            const index = state.windows_sort.findIndex(
+              (element) => element && element == window.uuid
+            );
+            if (index >= 0) {
+              state.windows_sort.splice(index, 1);
+              state.windows_sort.push(window.uuid);
+            }
+          }
+        }
+      },
+      lowerWindow(state: StateInterface, playload?: number) {
+        const window = state.windows.find(
+          (element) => element && element.window_id == playload
+        );
+        if (window) {
+          const index = state.windows_sort.findIndex(
+            (element) => element && element == window.uuid
+          );
+          if (index >= 0) {
+            state.windows_sort.splice(index, 1);
+            state.windows_sort.unshift(window.uuid);
+          }
         }
       },
       removeWindow(state: StateInterface, playload?: any) {
@@ -323,7 +384,16 @@ export default store(function (/* { ssrContext } */) {
             (item) => item && item.window_id == window_id
           );
           if (index >= 0) {
+            const window = state.windows[index];
+            window_color_list.push(window.client_color);
             state.windows.splice(index, 1);
+
+            let __index = state.windows_sort.findIndex(
+              (element) => element && element == window.uuid
+            );
+            if (__index >= 0) {
+              state.windows_sort.splice(__index, 1);
+            }
           }
         } else {
           console.log("window_id???");

src/store/window_color_list.js

@@ -0,0 +1,66 @@
+export default [
+  "#C21817AF",
+  "#72D345AF",
+  "#1EA033AF",
+  "#6382F3AF",
+  "#735F83AF",
+  "#2AAF9BAF",
+  "#E4491EAF",
+  "#D769D9AF",
+  "#BDADE3AF",
+  "#24DE81AF",
+  "#DA454EAF",
+  "#4CED56AF",
+  "#91688DAF",
+  "#BBF360AF",
+  "#08BB79AF",
+  "#6F3E0BAF",
+  "#26BCBDAF",
+  "#ECA437AF",
+  "#94BE23AF",
+  "#FED7C7AF",
+  "#E2BF1CAF",
+  "#FDF2F1AF",
+  "#4C6CDBAF",
+  "#5E8B3CAF",
+  "#E09A78AF",
+  "#3FCD0EAF",
+  "#99C6BBAF",
+  "#D80921AF",
+  "#27072DAF",
+  "#213531AF",
+  "#7B01C9AF",
+  "#304AE5AF",
+  "#5CA05BAF",
+  "#F012B3AF",
+  "#BF7E0AAF",
+  "#FE4DB2AF",
+  "#B9416DAF",
+  "#2C015FAF",
+  "#01FD9BAF",
+  "#EB5CAEAF",
+  "#DA47BEAF",
+  "#DBEE46AF",
+  "#FBA68AAF",
+  "#58358DAF",
+  "#461298AF",
+  "#764860AF",
+  "#659F87AF",
+  "#3821AFAF",
+  "#8CACF9AF",
+  "#65E6B3AF",
+  "#78EE52AF",
+  "#4E5D30AF",
+  "#885361AF",
+  "#5CB17CAF",
+  "#5856C3AF",
+  "#C17EF9AF",
+  "#48921DAF",
+  "#543987AF",
+  "#4A3CFDAF",
+  "#294DE2AF",
+  "#A9A494AF",
+  "#1E603FAF",
+  "#3EF529AF",
+  "#CB7177AF",
+];