From d573ae8058087fa6b47837a23dd69b3b0f1c111e Mon Sep 17 00:00:00 2001
From: fangxiang <fangxiang@cloudview.work>
Date: Fri, 6 Aug 2021 17:24:41 +0800
Subject: [PATCH] =?UTF-8?q?=E6=B7=BB=E5=8A=A0=E7=AA=97=E5=8F=A3=E7=9A=84?=
 =?UTF-8?q?=E5=BC=80=E5=85=B3=E7=A7=BB=E5=8A=A8=E4=BF=AE=E6=94=B9=E5=A4=A7?=
 =?UTF-8?q?=E5=B0=8F=E5=8A=9F=E8=83=BD?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/common/ClientConnection.ts         |  41 +++-
 src/common/EventBus.ts                 |   1 +
 src/components/Window.vue              | 292 +++++++++++++++++++++++--
 src/entities/MultimediaWindowEntity.ts |  28 ++-
 src/entities/WSProtocol.ts             | 116 +++++++++-
 src/pages/Login.vue                    |  51 ++---
 src/pages/WallPage.vue                 | 183 +++++++++++++---
 src/store/index.ts                     |  57 ++---
 8 files changed, 654 insertions(+), 115 deletions(-)

diff --git a/src/common/ClientConnection.ts b/src/common/ClientConnection.ts
index 2665f6f..d158aab 100644
--- a/src/common/ClientConnection.ts
+++ b/src/common/ClientConnection.ts
@@ -1,4 +1,5 @@
 import { Protocol } from "src/entities/WSProtocol";
+import EventBus, { EventNamesDefine } from "./EventBus";
 
 export default class ClientConnection {
   ws: WebSocket | null = null;
@@ -16,15 +17,6 @@ export default class ClientConnection {
     | ((this: ClientConnection, logined: boolean) => void)
     | null = null;
 
-  public message_callback:
-    | ((
-        this: ClientConnection,
-        command: string,
-        packet: Protocol.Commands,
-        data: string
-      ) => void)
-    | null = null;
-
   constructor(
     url: string,
     user_name?: string | null,
@@ -102,6 +94,7 @@ export default class ClientConnection {
   onMessage(ev: MessageEvent) {
     try {
       const packet = JSON.parse(ev.data) as Protocol.PacketEntity;
+
       if (packet) {
         if (packet.has_exception) {
           console.error(ev.data);
@@ -132,11 +125,15 @@ export default class ClientConnection {
                 f(false, packet, ev.data);
                 this.rpc_map.delete(packet.rpc_id);
               }
-            }
-            if (this.message_callback) {
-              this.message_callback(packet.command, packet, ev.data);
+            } else {
+              EventBus.getInstance().emit(EventNamesDefine.ResponseMessage, {
+                packet: packet,
+                data: ev.data,
+              });
             }
           }
+        } else {
+          console.error("unknow command: " + packet.command, packet);
         }
       }
     } catch (e) {
@@ -215,4 +212,24 @@ export default class ClientConnection {
       console.error(e);
     }
   }
+
+  public moveWindow(window_id: number, x: number, y: number) {
+    this.ws?.send(
+      JSON.stringify(new Protocol.MoveWindowRequestEntity(window_id, x, y))
+    );
+  }
+
+  public resizeWindow(window_id: number, width: number, height: number) {
+    this.ws?.send(
+      JSON.stringify(
+        new Protocol.ResizeWindowRequestEntity(window_id, width, height)
+      )
+    );
+  }
+
+  public closeWindow(window_id: number) {
+    this.ws?.send(
+      JSON.stringify(new Protocol.CloseWindowRequestEntity(window_id))
+    );
+  }
 }
diff --git a/src/common/EventBus.ts b/src/common/EventBus.ts
index c33b3df..c24651d 100644
--- a/src/common/EventBus.ts
+++ b/src/common/EventBus.ts
@@ -14,4 +14,5 @@ export default class EventBus extends EventEmitter {
 export namespace EventNamesDefine {
   export const UnSelectAllWindows = "unselect_all_windows";
   export const WindowResize = "windowResize";
+  export const ResponseMessage = "onResponseData";
 }
diff --git a/src/components/Window.vue b/src/components/Window.vue
index e8ba64d..73047e7 100644
--- a/src/components/Window.vue
+++ b/src/components/Window.vue
@@ -1,20 +1,133 @@
 <template>
   <div
-    :class="selected ? 'window_selected' : 'window_normal'"
+    class="window"
+    :class="selected ? 'window_selected top' : 'window_normal'"
     @click="onClick"
     @mousedown="onMouseDown"
     @mousemove="onMouseMove"
     @mouseleave="onMouseLeave"
     @mouseup="onMouseLeave"
   >
+    <q-popup-proxy context-menu>
+      <q-popup-proxy context-menu />
+      <q-list>
+        <q-item
+          clickable
+          v-close-popup
+          @click="$emit('close_this_window', $props.window.window_id)"
+        >
+          <q-item-section> {{ $t("close this window") }} </q-item-section>
+        </q-item>
+        <q-item
+          clickable
+          v-close-popup
+          @click="$emit('close_other_windows', $props.window.window_id)"
+        >
+          <q-item-section>
+            {{ $t("close other windows") }}
+          </q-item-section>
+        </q-item>
+        <q-item
+          clickable
+          v-close-popup
+          @click="$emit('close_all_windows', $props.window.window_id)"
+        >
+          <q-item-section> {{ $t("close all windwos") }} </q-item-section>
+        </q-item>
+      </q-list>
+    </q-popup-proxy>
     <div class="title_bar full-width">
       <q-icon :name="getItemIcon(signal_source.window_type)" />
       <span>{{ signal_source.name }}</span>
     </div>
+
+    <div
+      v-if="selected && can_resize"
+      class="resize_div absolute_up"
+      ref="resize_up"
+      @mousedown="onMouseDown"
+      @mousemove="(evt) => onResizeMouseMove(evt, flags.up_flag)"
+      @mouseleave="onMouseLeave"
+      @mouseup="onMouseLeave"
+    ></div>
+    <div
+      v-if="selected && can_resize"
+      class="resize_div absolute_down"
+      ref="resize_down"
+      @mousedown="onMouseDown"
+      @mousemove="(evt) => onResizeMouseMove(evt, flags.down_flag)"
+      @mouseleave="onMouseLeave"
+      @mouseup="onMouseLeave"
+    ></div>
+    <div
+      v-if="selected && can_resize"
+      class="resize_div absolute_left"
+      ref="resize_left"
+      @mousedown="onMouseDown"
+      @mousemove="(evt) => onResizeMouseMove(evt, flags.left_flag)"
+      @mouseleave="onMouseLeave"
+      @mouseup="onMouseLeave"
+    ></div>
+    <div
+      v-if="selected && can_resize"
+      class="resize_div absolute_right"
+      ref="resize_right"
+      @mousedown="onMouseDown"
+      @mousemove="(evt) => onResizeMouseMove(evt, flags.right_flag)"
+      @mouseleave="onMouseLeave"
+      @mouseup="onMouseLeave"
+    ></div>
+    <div
+      v-if="selected && can_resize"
+      class="resize_div absolute_left_up"
+      ref="resize_left_up"
+      @mousedown="onMouseDown"
+      @mousemove="
+        (evt) => onResizeMouseMove(evt, flags.up_flag | flags.left_flag)
+      "
+      @mouseleave="onMouseLeave"
+      @mouseup="onMouseLeave"
+    ></div>
+    <div
+      v-if="selected && can_resize"
+      class="resize_div absolute_right_up"
+      ref="resize_right_up"
+      @mousedown="onMouseDown"
+      @mousemove="
+        (evt) => onResizeMouseMove(evt, flags.up_flag | flags.right_flag)
+      "
+      @mouseleave="onMouseLeave"
+      @mouseup="onMouseLeave"
+    ></div>
+    <div
+      v-if="selected && can_resize"
+      class="resize_div absolute_left_down"
+      ref="resize_left_down"
+      @mousedown="onMouseDown"
+      @mousemove="
+        (evt) => onResizeMouseMove(evt, flags.down_flag | flags.left_flag)
+      "
+      @mouseleave="onMouseLeave"
+      @mouseup="onMouseLeave"
+    ></div>
+    <div
+      v-if="selected && can_resize"
+      class="resize_div absolute_right_down"
+      ref="resize_right_down"
+      @mousedown="onMouseDown"
+      @mousemove="
+        (evt) => onResizeMouseMove(evt, flags.down_flag | flags.right_flag)
+      "
+      @mouseleave="onMouseLeave"
+      @mouseup="onMouseLeave"
+    ></div>
   </div>
 </template>
 
 <style scoped>
+.window {
+}
+
 .window_selected {
   outline-style: dashed;
   outline-color: #166fab;
@@ -27,6 +140,84 @@
 .title_bar {
   border: 1px solid black;
 }
+
+.top {
+  z-index: 1;
+}
+
+.resize_div {
+  background: gray;
+  width: 32px;
+  height: 32px;
+}
+
+.absolute_up {
+  position: absolute;
+  top: -16px;
+  left: calc(50% - 16px);
+}
+
+.absolute_down {
+  position: absolute;
+  bottom: -16px;
+  left: calc(50% - 16px);
+}
+
+div.absolute_up,
+div.absolute_down {
+  cursor: s-resize;
+}
+
+.absolute_left {
+  position: absolute;
+  top: calc(50% - 16px);
+  left: -16px;
+}
+
+.absolute_right {
+  position: absolute;
+  top: calc(50% - 16px);
+  right: -16px;
+}
+
+div.absolute_left,
+div.absolute_right {
+  cursor: w-resize;
+}
+
+.absolute_left_up {
+  position: absolute;
+  top: -16px;
+  left: -16px;
+}
+
+.absolute_left_down {
+  position: absolute;
+  bottom: -16px;
+  left: -16px;
+}
+
+.absolute_right_up {
+  position: absolute;
+  top: -16px;
+  right: -16px;
+}
+
+.absolute_right_down {
+  position: absolute;
+  bottom: -16px;
+  right: -16px;
+}
+
+div.absolute_left_up,
+div.absolute_right_down {
+  cursor: se-resize;
+}
+
+div.absolute_right_up,
+div.absolute_left_down {
+  cursor: ne-resize;
+}
 </style>
 
 <script lang="ts">
@@ -36,6 +227,21 @@ import GlobalData from "src/common/GlobalData";
 import { defineComponent, ref } from "vue";
 import { useStore } from "src/store";
 
+class _Flags {
+  get up_flag() {
+    return 0x0001;
+  }
+  get down_flag() {
+    return 0x0002;
+  }
+  get left_flag() {
+    return 0x0004;
+  }
+  get right_flag() {
+    return 0x0008;
+  }
+}
+
 export default defineComponent({
   name: "ComponentWindow",
 
@@ -50,7 +256,13 @@ export default defineComponent({
       required: true,
     },
   },
-  emits: ["move_window"],
+  emits: [
+    "reset_geometry_offset",
+    "commit_geometry",
+    "close_this_window",
+    "close_other_windows",
+    "close_all_windows",
+  ],
   setup(props, { emit }) {
     const $store = useStore();
 
@@ -59,6 +271,8 @@ export default defineComponent({
     );
 
     let selected = ref(false);
+    let can_move = ref(true);
+    let can_resize = ref(true);
 
     EventBus.getInstance().on(EventNamesDefine.UnSelectAllWindows, () => {
       selected.value = false;
@@ -67,8 +281,6 @@ export default defineComponent({
     let mouse_down_flag = false;
     let mouse_last_pos_x = 0;
     let mouse_last_pos_y = 0;
-    let can_move = true;
-    let can_resize = true;
 
     const cleanMouseDownFlag = () => {
       mouse_down_flag = false;
@@ -76,29 +288,75 @@ export default defineComponent({
       mouse_last_pos_y = 0;
     };
 
+    const flags = new _Flags();
+
     return {
       signal_source,
       selected,
+      can_move,
+      can_resize,
+      flags,
 
       onClick(evt: PointerEvent) {
         EventBus.getInstance().emit(EventNamesDefine.UnSelectAllWindows);
         selected.value = true;
       },
       onMouseDown(evt: MouseEvent) {
-        if (evt.button == 0) {
-          mouse_down_flag = true;
+        if (selected.value) {
+          if (evt.button == 0) {
+            mouse_down_flag = true;
+            mouse_last_pos_x = evt.x;
+            mouse_last_pos_y = evt.y;
+          }
+        }
+      },
+      onMouseMove(evt: MouseEvent) {
+        if (can_move.value && mouse_down_flag && selected.value) {
+          emit(
+            "reset_geometry_offset",
+            props.window,
+            evt.x - mouse_last_pos_x,
+            evt.y - mouse_last_pos_y,
+            0,
+            0
+          );
+
           mouse_last_pos_x = evt.x;
           mouse_last_pos_y = evt.y;
         }
       },
-      onMouseMove(evt: MouseEvent) {
-        if (mouse_down_flag && selected.value) {
+
+      onResizeMouseDown(evt: MouseEvent) {},
+
+      onResizeMouseMove(evt: MouseEvent, dir: number) {
+        if (can_resize.value && mouse_down_flag && selected.value) {
+          const h = evt.x - mouse_last_pos_x;
+          const v = evt.y - mouse_last_pos_y;
+          let x_offset = 0;
+          let y_offset = 0;
+          let width_offset = 0;
+          let height_offset = 0;
+          if (dir & flags.up_flag) {
+            y_offset += v;
+            height_offset -= v;
+          }
+          if (dir & flags.down_flag) {
+            height_offset += v;
+          }
+          if (dir & flags.left_flag) {
+            x_offset += h;
+            width_offset -= h;
+          }
+          if (dir & flags.right_flag) {
+            width_offset += h;
+          }
           emit(
-            "move_window",
-            $store,
+            "reset_geometry_offset",
             props.window,
-            evt.x - mouse_last_pos_x,
-            evt.y - mouse_last_pos_y
+            x_offset,
+            y_offset,
+            width_offset,
+            height_offset
           );
 
           mouse_last_pos_x = evt.x;
@@ -108,11 +366,17 @@ export default defineComponent({
 
       cleanMouseDownFlag,
       onMouseLeave(evt: MouseEvent) {
-        cleanMouseDownFlag();
+        if (selected.value && mouse_down_flag) {
+          cleanMouseDownFlag();
+          emit("commit_geometry", props.window);
+        }
       },
 
       onMouseUp(evt: MouseEvent) {
-        cleanMouseDownFlag();
+        if (selected.value && mouse_down_flag) {
+          cleanMouseDownFlag();
+          emit("commit_geometry", props.window);
+        }
       },
 
       getItemIcon(item_type: string) {
diff --git a/src/entities/MultimediaWindowEntity.ts b/src/entities/MultimediaWindowEntity.ts
index 4532b5a..6672797 100644
--- a/src/entities/MultimediaWindowEntity.ts
+++ b/src/entities/MultimediaWindowEntity.ts
@@ -1,11 +1,35 @@
 import BaseEntity from "./BaseEntity";
 import { SignalSourceEntity } from "./SignalSourceEntity";
+import { Protocol } from "./WSProtocol";
 
-export default class MultimediaWindowEntity extends BaseEntity {
+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();
+  // signal_source_table_entity: SignalSourceEntity = new SignalSourceEntity();
+}
+
+export class WindowOpenNotifyEntity extends MultimediaWindowEntity {
+  public static get FLAG_REQUEST() {
+    return 0;
+  }
+  public static get FLAG_RESPONSE() {
+    return 1;
+  }
+  public static get FLAG_NOTIFY() {
+    return 2;
+  }
+
+  /** 是否出现异常,如果是异常,则为 ExceptionEntity */
+  has_exception = false;
+  /** 0: 请求  1: 响应 */
+  flag = WindowOpenNotifyEntity.FLAG_REQUEST;
+  /** rpc 消息 ID，默认 0 */
+  rpc_id = 0;
+  /** 命令 */
+  command = Protocol.Commands.kUnKnowCommand;
+
+  window_id: number = 0;
 }
diff --git a/src/entities/WSProtocol.ts b/src/entities/WSProtocol.ts
index 2d26c21..1dfcd0a 100644
--- a/src/entities/WSProtocol.ts
+++ b/src/entities/WSProtocol.ts
@@ -1,6 +1,6 @@
 import { SignalSourceEntity } from "./SignalSourceEntity";
 import ApplicationConfigEntity from "./ApplicationConfigEntity";
-import MultimediaWindowEntity from "./MultimediaWindowEntity";
+import { WindowOpenNotifyEntity } from "./MultimediaWindowEntity";
 
 export namespace Protocol {
   export class Commands {
@@ -41,6 +41,22 @@ export namespace Protocol {
       return Commands.PROTOCOL_PREFIX + "RpcGetApplicationConfig";
     }
 
+    public static get kMoveWindow() {
+      return Commands.PROTOCOL_PREFIX + "MoveWindow";
+    }
+
+    public static get kResizeWindow() {
+      return Commands.PROTOCOL_PREFIX + "ResizeWindow";
+    }
+
+    public static get kOpenWindow() {
+      return Commands.PROTOCOL_PREFIX + "OpenWindow";
+    }
+
+    public static get kCloseWindow() {
+      return Commands.PROTOCOL_PREFIX + "CloseWindow";
+    }
+
     static _all_commands = new Set([
       Commands.kUnKnowCommand,
       Commands.kSearchDevice,
@@ -52,6 +68,10 @@ export namespace Protocol {
       Commands.kRpcGetWindows,
       Commands.kRpcGetSignalSources,
       Commands.kRpcGetApplicationConfig,
+      Commands.kMoveWindow,
+      Commands.kResizeWindow,
+      Commands.kOpenWindow,
+      Commands.kCloseWindow,
     ]);
 
     public static get AllCommands() {
@@ -73,7 +93,7 @@ export namespace Protocol {
     /** 是否出现异常,如果是异常,则为 ExceptionEntity */
     has_exception = false;
     /** 0: 请求  1: 响应 */
-    flag = 0;
+    flag = PacketEntity.FLAG_REQUEST;
     /** rpc 消息 ID，默认 0 */
     rpc_id = 0;
     /** 命令 */
@@ -152,11 +172,101 @@ export namespace Protocol {
   }
 
   export class GetWindowsResponseEntity extends PacketEntity {
-    windows: MultimediaWindowEntity[] = [];
+    windows: WindowOpenNotifyEntity[] = [];
 
     constructor() {
       super();
       this.command = Commands.kRpcGetWindows;
     }
   }
+
+  export class MoveWindowRequestEntity extends PacketEntity {
+    window_id: number = 0;
+    x: number = 0;
+    y: number = 0;
+
+    constructor(window_id: number, x: number, y: number) {
+      super();
+      this.command = Commands.kMoveWindow;
+
+      this.window_id = window_id ?? 0;
+      this.x = x ?? 0;
+      this.y = y ?? 0;
+    }
+  }
+
+  export class ResizeWindowRequestEntity extends PacketEntity {
+    window_id: number = 0;
+    width: number = 0;
+    height: number = 0;
+    constructor(window_id: number, width: number, height: number) {
+      super();
+      this.command = Commands.kResizeWindow;
+      this.window_id = window_id ?? 0;
+      this.width = width ?? 0;
+      this.height = height ?? 0;
+    }
+  }
+
+  export class CloseWindowRequestEntity extends PacketEntity {
+    window_id: number = 0;
+    constructor(window_id: number) {
+      super();
+      this.command = Commands.kCloseWindow;
+      this.window_id = window_id ?? 0;
+    }
+  }
+
+  export class OpenWindowRequestEntity extends PacketEntity {
+    signal_source: string = "";
+    x: number = 0;
+    y: number = 0;
+    width: number = 0;
+    height: number = 0;
+    constructor() {
+      super();
+      this.command = Commands.kOpenWindow;
+    }
+  }
+
+  export class WindowCloseNotifyEntity extends PacketEntity {
+    window_id: number = 0;
+    constructor() {
+      super();
+      this.command = Commands.kCloseWindow;
+    }
+  }
+
+  export class WindowOpenNotifyEntity extends PacketEntity {
+    window_id: number = 0;
+    signal_source: string = "";
+    x: number = 0;
+    y: number = 0;
+    width: number = 0;
+    height: number = 0;
+    constructor() {
+      super();
+      this.command = Commands.kOpenWindow;
+    }
+  }
+
+  export class WindowMoveNotifyEntity extends PacketEntity {
+    window_id: number = 0;
+    x: number = 0;
+    y: number = 0;
+    constructor() {
+      super();
+      this.command = Commands.kMoveWindow;
+    }
+  }
+
+  export class WindowResizeNotifyEntity extends PacketEntity {
+    window_id: number = 0;
+    width: number = 0;
+    height: number = 0;
+    constructor() {
+      super();
+      this.command = Commands.kResizeWindow;
+    }
+  }
 }
diff --git a/src/pages/Login.vue b/src/pages/Login.vue
index 8942553..e9f0592 100644
--- a/src/pages/Login.vue
+++ b/src/pages/Login.vue
@@ -4,7 +4,7 @@
       <q-page class="row items-center justify-evenly">
         <q-card style="width: 30vw">
           <q-card-section class="text-center text-h6">
-            {{ $t('login') }}
+            {{ $t("login") }}
           </q-card-section>
           <q-separator />
           <q-card-section class="fit">
@@ -90,35 +90,35 @@
 </template>
 
 <script lang="ts">
-import { defineComponent, reactive } from 'vue';
+import { defineComponent, reactive } from "vue";
 
-import GlobalData from 'src/common/GlobalData';
-import { LocalStorage, SessionStorage, useQuasar } from 'quasar';
-import ClientConnection from 'src/common/ClientConnection';
-import PermissionLevel from 'src/entities/PermissionLevel';
-import { useI18n } from 'vue-i18n';
-import { useRouter } from 'vue-router';
+import GlobalData from "src/common/GlobalData";
+import { LocalStorage, SessionStorage, useQuasar } from "quasar";
+import ClientConnection from "src/common/ClientConnection";
+import PermissionLevel from "src/entities/PermissionLevel";
+import { useI18n } from "vue-i18n";
+import { useRouter } from "vue-router";
 
 class _Data {
   user_name: string | null = null;
   password: string | null = null;
   loading = false;
-  ip_address = '127.0.0.1';
+  ip_address = "127.0.0.1";
 
   constructor() {
-    let temp = LocalStorage.getItem('default_ip_address');
+    let temp = LocalStorage.getItem("default_ip_address");
     if (temp) {
       this.ip_address = temp.toString();
     } else {
       this.ip_address = window.location.hostname;
     }
 
-    temp = LocalStorage.getItem('default_user_name');
+    temp = LocalStorage.getItem("default_user_name");
     if (temp) {
       this.user_name = temp.toString();
     }
 
-    temp = LocalStorage.getItem('default_password');
+    temp = LocalStorage.getItem("default_password");
     if (temp) {
       this.password = temp.toString();
     }
@@ -126,7 +126,7 @@ class _Data {
 }
 
 export default defineComponent({
-  name: 'PageLogin',
+  name: "PageLogin",
 
   components: {},
 
@@ -148,9 +148,9 @@ export default defineComponent({
             let global_data = GlobalData.getInstance();
             let web_socket = global_data.getClient(data.ip_address);
             const url =
-              'ws://' +
+              "ws://" +
               data.ip_address +
-              ':' +
+              ":" +
               GlobalData.kDefaultWebsocektPort.toString() +
               GlobalData.kWebsocketResource;
             if (web_socket) {
@@ -166,20 +166,21 @@ export default defineComponent({
             global_data.setCurrentClientName(data.ip_address);
             web_socket.login_callback = (is_login) => {
               if (is_login) {
-                SessionStorage.set('auth', PermissionLevel.Root);
-                SessionStorage.set('url', url);
-                SessionStorage.set('name', data.ip_address);
-                SessionStorage.set('user_name', data.user_name);
-                SessionStorage.set('password', data.password);
-                $route.push('/');
+                SessionStorage.set("auth", PermissionLevel.Root);
+                SessionStorage.set("url", url);
+                SessionStorage.set("name", data.ip_address);
+                SessionStorage.set("user_name", data.user_name);
+                SessionStorage.set("password", data.password);
+                $route.push("/");
               } else {
                 $q.notify({
-                  color: 'negative',
-                  icon: 'warning',
-                  message: $t.t('login fail!'),
-                  position: 'center',
+                  color: "negative",
+                  icon: "warning",
+                  message: $t.t("login fail!"),
+                  position: "center",
                   timeout: 1500,
                 });
+                SessionStorage.set("auth", PermissionLevel.None);
               }
               resolve(true);
               data.loading = false;
diff --git a/src/pages/WallPage.vue b/src/pages/WallPage.vue
index ae313fc..709b78b 100644
--- a/src/pages/WallPage.vue
+++ b/src/pages/WallPage.vue
@@ -7,20 +7,13 @@
     @dragover="onDragOver"
     @drop="onDrop"
   >
-    <q-popup-proxy context-menu>
-      <q-popup-proxy context-menu />
-      <q-list>
-        <q-item clickable v-close-popup>
-          <q-item-section avatar>
-            <q-icon name="close" color="red" />
-          </q-item-section>
-          <q-item-section> {{ $t("close all windwos") }} </q-item-section>
-        </q-item>
-      </q-list>
-    </q-popup-proxy>
     <div id="windows" style="position: absolute">
       <window
-        @move_window="move_window"
+        @reset_geometry_offset="resetGeometryOffset"
+        @commit_geometry="commitGeometry"
+        @close_this_window="closeWindow"
+        @close_other_windows="closeOtherWindows"
+        @close_all_windows="closeAllWindows"
         :ref="'window_' + index"
         v-for="(item, index) in windows"
         :key="index"
@@ -58,24 +51,10 @@
           }"
           @resize="(evt) => loga(evt)"
         >
-          <q-popup-proxy context-menu no-parent-event>
+          <q-popup-proxy context-menu>
             <q-popup-proxy context-menu />
             <q-list>
-              <q-item clickable v-close-popup>
-                <q-item-section avatar>
-                  <q-icon name="close" color="red" />
-                </q-item-section>
-                <q-item-section> {{ $t("close this windwo") }} </q-item-section>
-              </q-item>
-              <q-item clickable v-close-popup>
-                <q-item-section avatar>
-                  <q-icon name="close" color="red" />
-                </q-item-section>
-                <q-item-section>
-                  {{ $t("close other windwos") }}
-                </q-item-section>
-              </q-item>
-              <q-item clickable v-close-popup>
+              <q-item clickable v-close-popup @click="closeAllWindows">
                 <q-item-section avatar>
                   <q-icon name="close" color="red" />
                 </q-item-section>
@@ -121,7 +100,7 @@ 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 MultimediaWindowEntity from "src/entities/MultimediaWindowEntity";
+import { WindowOpenNotifyEntity } from "src/entities/MultimediaWindowEntity";
 
 interface _OptionsType {
   $t: any;
@@ -271,6 +250,94 @@ export default defineComponent({
       calcWallVWScaler();
     });
 
+    interface _ResponseMessage {
+      packet: Protocol.PacketEntity;
+      data: string;
+    }
+    EventBus.getInstance().on(
+      EventNamesDefine.ResponseMessage,
+      (response: _ResponseMessage) => {
+        try {
+          if ((response.packet.flag = Protocol.PacketEntity.FLAG_NOTIFY)) {
+            switch (response.packet.command) {
+              case Protocol.Commands.kCloseWindow:
+                {
+                  const temp = JSON.parse(response.data);
+                  if (temp && temp.window_id) {
+                    $store.commit("removeWindow", {
+                      window_id: temp.window_id,
+                    });
+                  }
+                }
+                break;
+              case Protocol.Commands.kMoveWindow:
+                {
+                  const temp = JSON.parse(response.data);
+                  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: "x",
+                          value: temp.x ?? 0,
+                        },
+                        {
+                          window,
+                          property_name: "y",
+                          value: temp.y ?? 0,
+                        },
+                      ]);
+                    }
+                  }
+                }
+                break;
+              case Protocol.Commands.kResizeWindow:
+                {
+                  const temp = JSON.parse(response.data);
+                  if (temp && temp.window_id) {
+                    const window = $store.state.windows.find(
+                      (item) => item.window_id == temp.window_id
+                    );
+                    console.log(window);
+                    if (window) {
+                      $store.commit("setWindowPropertys", [
+                        {
+                          window,
+                          property_name: "width",
+                          value: temp.width ?? 0,
+                        },
+                        {
+                          window,
+                          property_name: "height",
+                          value: temp.height ?? 0,
+                        },
+                      ]);
+                    }
+                  }
+                }
+                break;
+              case Protocol.Commands.kOpenWindow:
+                {
+                  const temp = JSON.parse(
+                    response.data
+                  ) as WindowOpenNotifyEntity;
+                  if (temp) {
+                    $store.commit("pushWindow", temp);
+                  }
+                }
+                break;
+              default:
+                console.log(response.packet);
+                break;
+            }
+          }
+        } catch {}
+      }
+    );
+
     onMounted(() => {
       calcWallVWScaler();
     });
@@ -328,12 +395,13 @@ export default defineComponent({
       onWallGridsClick(e: MouseEvent) {
         EventBus.getInstance().emit(EventNamesDefine.UnSelectAllWindows);
       },
-      move_window: (
-        $store: ReturnType<typeof useStore>,
+      resetGeometryOffset(
         window: any,
         offset_x: number,
-        offset_y: number
-      ) => {
+        offset_y: number,
+        offset_width: number,
+        offset_height: number
+      ) {
         $store.commit("setWindowPropertys", [
           {
             window,
@@ -345,8 +413,57 @@ export default defineComponent({
             property_name: "y",
             value: window.y + offset_y * wall_height_scaler.value,
           },
+          {
+            window,
+            property_name: "width",
+            value: Math.max(
+              window.width + offset_width * wall_height_scaler.value,
+              32
+            ),
+          },
+          {
+            window,
+            property_name: "height",
+            value: Math.max(
+              window.height + offset_height * wall_height_scaler.value,
+              32
+            ),
+          },
         ]);
       },
+      commitGeometry(window: any) {
+        const win = window as WindowOpenNotifyEntity;
+        if (win) {
+          GlobalData.getInstance()
+            .getCurrentClient()
+            ?.moveWindow(win.window_id, win.x, win.y);
+          GlobalData.getInstance()
+            .getCurrentClient()
+            ?.resizeWindow(win.window_id, win.width, win.height);
+        }
+      },
+      closeAllWindows() {
+        for (const window of $store.state.windows) {
+          if (window) {
+            GlobalData.getInstance()
+              .getCurrentClient()
+              ?.closeWindow(window.window_id);
+          }
+        }
+      },
+      closeOtherWindows(window_id: number) {
+        console.log(window_id);
+        for (const window of $store.state.windows) {
+          if (window && window.window_id != window_id) {
+            GlobalData.getInstance()
+              .getCurrentClient()
+              ?.closeWindow(window.window_id);
+          }
+        }
+      },
+      closeWindow(window_id: number) {
+        GlobalData.getInstance().getCurrentClient()?.closeWindow(window_id);
+      },
     };
   },
 });
diff --git a/src/store/index.ts b/src/store/index.ts
index cfaf2d9..c403fed 100644
--- a/src/store/index.ts
+++ b/src/store/index.ts
@@ -1,8 +1,7 @@
 import { store } from "quasar/wrappers";
-import MultimediaWindowEntity from "src/entities/MultimediaWindowEntity";
+import { WindowOpenNotifyEntity } from "src/entities/MultimediaWindowEntity";
 import { SignalSourceTreeItemEntity } from "src/entities/SignalSourceEntity";
 import { InjectionKey, reactive } from "vue";
-import { useI18n } from "vue-i18n";
 import {
   createStore,
   Store as VuexStore,
@@ -31,7 +30,7 @@ export interface StateInterface {
   wall_col: number;
   device_screen_width: number;
   device_screen_height: number;
-  windows: MultimediaWindowEntity[];
+  windows: WindowOpenNotifyEntity[];
 }
 
 // provide typings for `this.$store`
@@ -68,8 +67,12 @@ export default store(function (/* { ssrContext } */) {
             const window = item.window;
             const property_name = item.property_name;
             const value = item.value;
-            if (window && property_name) {
-              window[property_name] = value;
+            try {
+              if (window && property_name) {
+                window[property_name] = value;
+              }
+            } catch (e) {
+              console.log(e);
             }
           }
         }
@@ -82,37 +85,35 @@ export default store(function (/* { ssrContext } */) {
           window[property_name] = value;
         }
       },
-      setWindows(state: StateInterface, playload?: any) {
-        let windows = playload as MultimediaWindowEntity[];
-        if (windows) {
-          state.windows = windows;
+      setWindows(state: StateInterface, playload?: WindowOpenNotifyEntity[]) {
+        if (playload) {
+          state.windows = playload;
         }
       },
       clearWindows(state: StateInterface, playload?: any) {
         state.windows = [];
       },
-      pushWindow(state: StateInterface, playload?: any) {
-        const window = playload as MultimediaWindowEntity;
-        if (window) {
-          state.windows.push(window);
+      pushWindow(state: StateInterface, playload?: WindowOpenNotifyEntity) {
+        if (playload) {
+          state.windows.push(playload);
         }
       },
       removeWindow(state: StateInterface, playload?: any) {
-        const uuid = playload.uuid;
-        if (uuid) {
+        const window_id = playload.window_id;
+        if (window_id) {
           let index = state.windows.findIndex(
-            (item) => item && item.uuid == uuid
+            (item) => item && item.window_id == window_id
           );
           if (index >= 0) {
             state.windows.splice(index, 1);
           }
         } else {
-          console.log("uuid???");
+          console.log("window_id???");
         }
       },
       editWindow(state: StateInterface, playload?: any) {
         const uuid = playload.uuid;
-        const new_window = playload.new_window as MultimediaWindowEntity;
+        const new_window = playload.new_window as WindowOpenNotifyEntity;
         if (uuid && new_window) {
           let index = state.windows.findIndex(
             (item) => item && item.uuid == uuid
@@ -146,10 +147,12 @@ export default store(function (/* { ssrContext } */) {
           state.device_screen_height = num;
         }
       },
-      setSignalSourceTree(state: StateInterface, playload?: any) {
-        const item = playload as SignalSourceTreeItemEntity[];
-        if (item) {
-          state.signal_source_tree = item;
+      setSignalSourceTree(
+        state: StateInterface,
+        playload?: SignalSourceTreeItemEntity[]
+      ) {
+        if (playload) {
+          state.signal_source_tree = playload;
         }
       },
       clearSignalSourceTree(state: StateInterface, playload?: any) {
@@ -158,10 +161,12 @@ export default store(function (/* { ssrContext } */) {
         // }
         state.signal_source_tree = [];
       },
-      pushSignalSourceTreeItem(state: StateInterface, playload?: any) {
-        let item = playload as SignalSourceTreeItemEntity;
-        if (item) {
-          state.signal_source_tree.push(item);
+      pushSignalSourceTreeItem(
+        state: StateInterface,
+        playload?: SignalSourceTreeItemEntity
+      ) {
+        if (playload) {
+          state.signal_source_tree.push(playload);
         }
       },
       buildSignalSourceTree(state: StateInterface, playload?: any) {