修复div大小修改时窗口不缩放的问题

添加添加信号源组的功能

package.json

@@ -10,8 +10,10 @@
   },
   "dependencies": {
     "@quasar/extras": "^1.0.0",
+    "@types/element-resize-detector": "^1.1.3",
     "axios": "^0.21.1",
     "core-js": "^3.6.5",
+    "element-resize-detector": "^1.2.3",
     "quasar": "^2.0.0",
     "vue-i18n": "^9.0.0-beta.0",
     "vuex": "^4.0.1"

src/common/ClientConnection.ts

@@ -191,8 +191,8 @@ export default class ClientConnection {
     }
   }
 
-  public async doRpc<_RequestType extends Protocol.PacketEntity, _ResponseType>(
+  public async doRpc<_ResponseType>(
-    RequestType: new () => _RequestType
+    request: Protocol.PacketEntity
   ): Promise<_ResponseType | null> {
     return new Promise((resolve, reject) => {
       const rpc_id = ++this._rpc_id_counter;
@@ -203,7 +203,6 @@ export default class ClientConnection {
           this.rpc_map.delete(rpc_id);
         }
       }
-      let request: _RequestType = new RequestType();
       request.rpc_id = rpc_id;
       this.ws?.send(JSON.stringify(request));
       this.rpc_map.set(
@@ -230,10 +229,9 @@ export default class ClientConnection {
 
   public async getSignalSources() {
     try {
-      return await this.doRpc<
+      return await this.doRpc<Protocol.GetSignalSourcesResponse>(
-        Protocol.GetSignalSourcesRequest,
+        new Protocol.GetSignalSourcesRequest()
-        Protocol.GetSignalSourcesResponse
+      );
-      >(Protocol.GetSignalSourcesRequest);
     } catch (e) {
       console.error(e);
     }
@@ -241,10 +239,9 @@ export default class ClientConnection {
 
   public async getApplicationSettins() {
     try {
-      return await this.doRpc<
+      return await this.doRpc<Protocol.GetApplicationConfigResponseEntity>(
-        Protocol.GetApplicationConfigRequestEntity,
+        new Protocol.GetApplicationConfigRequestEntity()
-        Protocol.GetApplicationConfigResponseEntity
+      );
-      >(Protocol.GetApplicationConfigRequestEntity);
     } catch (e) {
       console.error(e);
     }
@@ -252,10 +249,9 @@ export default class ClientConnection {
 
   public async getWindows() {
     try {
-      return await this.doRpc<
+      return await this.doRpc<Protocol.GetWindowsResponseEntity>(
-        Protocol.GetWindowsRequestEntity,
+        new Protocol.GetWindowsRequestEntity()
-        Protocol.GetWindowsResponseEntity
+      );
-      >(Protocol.GetWindowsRequestEntity);
     } catch (e) {
       console.error(e);
     }
@@ -296,6 +292,16 @@ export default class ClientConnection {
     );
   }
 
+  public async addSignalSourceGroup(parent_uuid: string, name: string) {
+    try {
+      return await this.doRpc<Protocol.AddSignalSourcesGroupResponseEntity>(
+        new Protocol.AddSignalSourcesGroupRequestEntity(0, parent_uuid, name)
+      );
+    } catch (e) {
+      console.error(e);
+    }
+  }
+
   private _destoryed = false;
   public destory() {
     this._destoryed = true;

src/common/EventBus.ts

@@ -18,6 +18,7 @@ export default class EventBus extends EventEmitter {
 
 export namespace EventNamesDefine {
   export const UnSelectAllWindows = "onUnSelectAllWindows";
+  export const UnFocusAllWindows = "onUnFocusAllWindows";
   export const WindowResize = "onWindowResize";
   export const ResponseMessage = "onResponseData";
   export const WebSocketClose = "onWebSocketClose";

src/components/GroupDialog.vue

@@ -0,0 +1,214 @@
+<template>
+  <q-dialog v-model="show_dialog" @before-hide="resetData">
+    <q-card class="overflow-hidden" style="overflow-y: scroll">
+      <q-card-section class="q-ma-none q-pa-sm">
+        <div class="row">
+          <div class="col-11 text-h6">
+            {{
+              type == 1
+                ? $t("add group")
+                : type == 2
+                ? $t("edit group")
+                : type == 3
+                ? $t("delete group")
+                : "add"
+            }}
+          </div>
+          <div class="col-1">
+            <q-btn flat round icon="close" color="red" v-close-popup>
+              <q-tooltip>
+                {{ $t("close") }}
+              </q-tooltip>
+            </q-btn>
+          </div>
+        </div>
+      </q-card-section>
+
+      <q-separator />
+
+      <q-card-section style="max-height: 50vh; width: 45vw" class="scroll">
+        <q-list>
+          <q-item>
+            <q-item-label>{{ $t("parent group") }}:</q-item-label>
+          </q-item>
+          <q-item class="q-pa-none q-ma-none">
+            <q-item-section style="padding-right: 10px">
+              <q-tree
+                ref="tree"
+                class="scroll"
+                :class="loading ? 'disable_tree' : ''"
+                v-model:selected="selected"
+                :nodes="tree_nodes"
+                default-expand-all
+                node-key="uuid"
+                labelKey="name"
+              >
+                <template v-slot:default-header="prop">
+                  <q-item
+                    class="full-width"
+                    :class="
+                      prop.tree.selected == prop.key ? 'item-selected-bg' : ''
+                    "
+                  >
+                    <q-item-section avatar>
+                      <q-icon
+                        :name="'img:source_icon/group.png'"
+                        color="orange"
+                        size="28px"
+                        class="q-mr-sm"
+                      />
+                    </q-item-section>
+                    <q-item-section>
+                      <div class="text-weight-bold text-primary">
+                        {{ prop.node.name }}
+                      </div>
+                    </q-item-section>
+                  </q-item>
+                </template>
+              </q-tree>
+            </q-item-section>
+          </q-item>
+          <q-item>
+            <q-item-section>
+              <q-input
+                autofocus
+                :loading="loading"
+                :disable="loading"
+                filled
+                v-model="name"
+                :label="$t('group name')"
+                :hint="$t('please input group name')"
+                lazy-rules
+                :rules="[
+                  (val) =>
+                    (val && val.length > 0) || $t('Please type something'),
+                ]"
+                @keydown="
+                  (evt) => {
+                    if (evt.keyCode == 13) {
+                      $refs?.accept?.click();
+                    }
+                  }
+                "
+              >
+                <template v-if="name" v-slot:append>
+                  <q-icon
+                    name="cancel"
+                    @click.stop="name = null"
+                    class="cursor-pointer"
+                  />
+                </template>
+              </q-input>
+            </q-item-section>
+          </q-item>
+        </q-list>
+      </q-card-section>
+
+      <q-separator />
+
+      <q-card-actions align="right">
+        <q-btn flat :label="$t('Cancel')" color="primary" v-close-popup />
+        <q-btn
+          ref="accept"
+          flat
+          :label="$t('Accept')"
+          color="primary"
+          @click="onSubmit"
+        />
+      </q-card-actions>
+    </q-card>
+  </q-dialog>
+</template>
+
+<style scoped>
+.disable_tree {
+  background: #9e9e9e;
+  cursor: wait;
+  pointer-events: none;
+}
+</style>
+
+<script lang="ts">
+import { defineComponent, ref, watch, onUnmounted, computed } from "vue";
+import { useStore } from "src/store";
+import GlobalData from "src/common/GlobalData";
+import { useQuasar } from "quasar";
+import { useI18n } from "vue-i18n";
+
+export default defineComponent({
+  name: "ComponentGroupDialog",
+
+  setup() {
+    let $store = useStore();
+    let $q = useQuasar();
+    let $t = useI18n();
+
+    let show_dialog = ref(false);
+    let type = ref(1);
+    let name = ref(null);
+    const selected: any = ref(null);
+    let loading = ref(false);
+
+    const tree_nodes = computed({
+      get: () =>
+        $store.state.signal_source_tree.filter((item) => item && item.is_group),
+      set: (val) => $store.commit("setSignalSourceTree", val),
+    });
+
+    watch(
+      () => selected.value,
+      (newValue, oldValue) => {
+        if (newValue == null) {
+          selected.value = "";
+        }
+      }
+    );
+
+    return {
+      show_dialog,
+      type,
+      name,
+      selected,
+      loading,
+      tree_nodes,
+      showDialog(options: any) {
+        if (options) {
+          type.value = options.type ?? 1;
+          name.value = options.name ?? null;
+          selected.value = options.parent ?? null;
+        }
+        show_dialog.value = true;
+      },
+      resetData() {
+        loading.value = false;
+        (selected.value = null), (name.value = null);
+        type.value = 1;
+        console.log("reset dialog data");
+      },
+
+      async onSubmit() {
+        loading.value = true;
+        try {
+          let response = await GlobalData.getInstance()
+            .getCurrentClient()
+            ?.addSignalSourceGroup(selected.value, name.value ?? "");
+          if (response) {
+            $q.notify({
+              color: response.success ? "positive" : "negative",
+              icon: response.success ? "done" : "warning",
+              message:
+                $t.t("add group") +
+                (response.success ? $t.t("success") : $t.t("fail")) +
+                "!",
+              position: "top",
+              timeout: 1000,
+            });
+          }
+          show_dialog.value = false;
+        } catch {}
+        loading.value = false;
+      },
+    };
+  },
+});
+</script>

src/components/SignalSourceDialog.vue

@@ -0,0 +1,18 @@
+<template>
+  <div>asda</div>
+</template>
+
+<script lang="ts">
+import { defineComponent, ref, watch, onUnmounted } from "vue";
+
+export default defineComponent({
+  name: "ComponentSignalSourceDialog",
+
+  components: {},
+  props: {},
+  emits: [],
+  setup() {
+    return {};
+  },
+});
+</script>

src/components/Window.vue

@@ -1,7 +1,11 @@
 <template>
   <div
     class="window_class window_flag"
-    :class="selected ? 'window_selected top' : 'window_normal'"
+    :class="
+      (selected ? 'window_selected' : 'window_normal') +
+      ' ' +
+      (focused ? 'top' : '')
+    "
     @click="onClick"
     @mousedown="onMouseDown"
     @mousemove="onMouseMove"
@@ -275,16 +279,29 @@ export default defineComponent({
     );
 
     let selected = ref(false);
+    let focused = ref(false);
     let can_move = ref(true);
     let can_resize = ref(true);
 
     const onUnSelectAllWindows = () => {
       selected.value = false;
+      focused.value = false;
     };
+
+    const onUnFocusAllWindows = () => {
+      focused.value = false;
+    };
+
     EventBus.getInstance().on(
       EventNamesDefine.UnSelectAllWindows,
       onUnSelectAllWindows
     );
+
+    EventBus.getInstance().on(
+      EventNamesDefine.UnFocusAllWindows,
+      onUnFocusAllWindows
+    );
+
     onUnmounted(() => {
       EventBus.getInstance().removeListener(
         EventNamesDefine.UnSelectAllWindows,
@@ -296,14 +313,12 @@ export default defineComponent({
       () => props.window.window_state,
       (newValue, oldValue) => {
         if (newValue) {
-          console.log(newValue);
+          let old = selected.value;
           if (newValue.focus) {
-            console.log(newValue.focus);
+            EventBus.getInstance().emit(EventNamesDefine.UnFocusAllWindows);
-            EventBus.getInstance().emit(EventNamesDefine.UnSelectAllWindows);
-            selected.value = true;
-          } else {
-            selected.value = false;
           }
+          focused.value = newValue.focus;
+          selected.value = old;
         }
       }
     );
@@ -323,6 +338,7 @@ export default defineComponent({
     return {
       signal_source,
       selected,
+      focused,
       can_move,
       can_resize,
       flags,
@@ -331,6 +347,7 @@ 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);
         }
       },
@@ -410,6 +427,10 @@ export default defineComponent({
           cleanMouseDownFlag();
           emit("commit_geometry", props.window);
         }
+
+        if (!focused) {
+          emit("window_fouse_in", props.window.window_id);
+        }
       },
 
       getItemIcon(item_type: string) {

src/css/app.scss

@@ -23,6 +23,10 @@ body {
   user-select: none;
 }
 
+.item-selected-bg {
+  background: #9e9e9e;
+}
+
 .drag-enter {
   outline-style: dashed;
 }

src/entities/WSProtocol.ts

@@ -65,6 +65,10 @@ export namespace Protocol {
       return Commands.PROTOCOL_PREFIX + "FocuseWindow";
     }
 
+    public static get kRpcAddSignalSourceGroup() {
+      return Commands.PROTOCOL_PREFIX + "RpcAddSignalSourceGroup";
+    }
+
     static _all_commands = new Set([
       Commands.kUnKnowCommand,
       Commands.kSearchDevice,
@@ -81,6 +85,7 @@ export namespace Protocol {
       Commands.kOpenWindow,
       Commands.kCloseWindow,
       Commands.kWindowOtherStateChanged,
+      Commands.kRpcAddSignalSourceGroup,
     ]);
 
     public static get AllCommands() {
@@ -289,4 +294,26 @@ export namespace Protocol {
       this.command = Commands.kResizeWindow;
     }
   }
+
+  export class AddSignalSourcesGroupRequestEntity extends Protocol.PacketEntity {
+    parent_uuid = "";
+    name = "";
+
+    constructor(rcp_id?: number, parent_uuid?: string, name?: string) {
+      super();
+      this.rpc_id = rcp_id ?? 0;
+      this.command = Protocol.Commands.kRpcAddSignalSourceGroup;
+      this.parent_uuid = parent_uuid ?? "";
+      this.name = name ?? "";
+    }
+  }
+
+  export class AddSignalSourcesGroupResponseEntity extends Protocol.PacketEntity {
+    success = false;
+
+    constructor() {
+      super();
+      this.command = Protocol.Commands.kRpcAddSignalSourceGroup;
+    }
+  }
 }

src/i18n/zh-CN/index.ts

@@ -5,6 +5,8 @@ export default {
   title: "MediaPlayerWebAPP",
   failed: "失败",
   success: "成功",
+  Cancel: "取消",
+  Accept: "确认",
   login: "登录",
   "user name": "用户名",
   password: "密码",
@@ -30,4 +32,18 @@ export default {
 
   "network disconnect!": "网络连接断开!",
   "wait reconnection": "等待重连中",
+
+  "add item": "添加",
+  "add signal source item": "添加信号源",
+  "add group": "添加组",
+  "delete group": "删除组",
+  "edit group": "修改组",
+  delete: "删除",
+  edit: "修改",
+
+  close: "关闭",
+  "parent group": "父节点",
+  "group name": "组名",
+
+  "please input group name": "请输入组名",
 };

src/layouts/MainLayout.vue

@@ -9,7 +9,11 @@
     <q-page-container class="col">
       <div class="row">
         <!-- left -->
-        <div v-if="landspace" class="col-2" style="border: 1px solid #bdbdbd">
+        <div
+          v-if="landspace"
+          class="col-auto overflow-auto"
+          style="border: 1px solid #bdbdbd; max-width: 45vw"
+        >
           <left-tool-bar />
         </div>
 

src/pages/LeftToolBar.vue

@@ -27,60 +27,72 @@
           </q-item-section>
           <q-popup-proxy context-menu>
             <q-popup-proxy context-menu />
-            <q-btn
+            <q-list>
-              flat
+              <q-item clickable v-close-popup v-ripple>
-              round
+                <q-item-section avatar><q-icon name="add" /></q-item-section>
-              icon="add"
+                <q-item-section>{{
+                  $t("add signal source item")
+                }}</q-item-section>
+              </q-item>
+              <q-item
+                clickable
                 v-close-popup
                 v-if="prop.node.is_group"
+                v-ripple
+                @click="
+                  () =>
+                    $refs.group_dialog.showDialog({
+                      type: 1,
+                      parent: prop.node.uuid,
+                    })
+                "
               >
-              <q-tooltip>{{ $t("add item") }}</q-tooltip>
+                <q-item-section avatar
-            </q-btn>
+                  ><q-icon name="create_new_folder"
-            <q-btn
+                /></q-item-section>
-              flat
+                <q-item-section>{{ $t("add group") }}</q-item-section>
-              round
+              </q-item>
-              icon="create_new_folder"
+              <q-item
-              v-close-popup
+                clickable
-              v-if="prop.node.is_group"
+                v-ripple
-            >
-              <q-tooltip>{{ $t("add group") }}</q-tooltip>
-            </q-btn>
-            <q-btn
-              flat
-              round
-              icon="edit"
                 v-close-popup
                 v-if="prop.node.uuid != '' && prop.node.name != $t('root')"
               >
-              <q-tooltip>{{ $t("edit") }}</q-tooltip>
+                <q-item-section avatar><q-icon name="edit" /></q-item-section>
-            </q-btn>
+                <q-item-section>{{ $t("edit") }}</q-item-section>
-            <q-btn
+              </q-item>
-              flat
+
-              round
+              <q-item
-              icon="delete"
+                clickable
-              text-color="red"
+                v-ripple
                 v-close-popup
                 v-if="prop.node.uuid != '' && prop.node.name != $t('root')"
               >
-              <q-tooltip>{{ $t("delete") }}</q-tooltip>
+                <q-item-section avatar
-            </q-btn>
+                  ><q-icon color="red" name="delete"
+                /></q-item-section>
+                <q-item-section>{{ $t("delete") }} &nbsp;</q-item-section>
+              </q-item>
+            </q-list>
           </q-popup-proxy>
         </q-item>
       </template>
     </q-tree>
   </div>
+  <group-dialog ref="group_dialog" />
 </template>
 
 <script lang="ts">
 import { defineComponent, computed } from "vue";
 import { useStore } from "src/store";
 import { SignalSourceTreeItemEntity } from "src/entities/SignalSourceEntity";
+import GroupDialog from "src/components/GroupDialog.vue";
 import { Common } from "src/common/Common";
 
 export default defineComponent({
   name: "PageLeftToolBar",
 
-  components: {},
+  components: { GroupDialog },
 
   setup() {
     const $store = useStore();

src/pages/Login.vue

@@ -30,7 +30,6 @@
                 @keydown="
                   (evt) => {
                     if (evt.keyCode == 13) {
-                      //
                       $refs?.password_input?.focus();
                     }
                   }

src/pages/WallPage.vue

@@ -52,7 +52,6 @@
             width: item_witdh + 'px',
             height: item_height + 'px',
           }"
-          @resize="(evt) => loga(evt)"
         >
           <q-popup-proxy context-menu>
             <q-popup-proxy context-menu />
@@ -99,6 +98,7 @@ import {
   onMounted,
   getCurrentInstance,
 } from "vue";
+const elementResizeDetectorMaker = require("element-resize-detector");
 import { Common } from "src/common/Common";
 import { Protocol } from "src/entities/WSProtocol";
 import Window from "src/components/Window.vue";
@@ -243,11 +243,6 @@ export default defineComponent({
       }
     };
 
-    EventBus.getInstance().on(EventNamesDefine.WindowResize, () => {
-      calcWallVWScaler();
-      calcWallItemWH();
-    });
-
     interface _ResponseMessage {
       packet: Protocol.PacketEntity;
       data: string;
@@ -362,9 +357,20 @@ export default defineComponent({
     _initialize({
       $t,
       $store,
-    }).then(() => {
+    });
+
+    onMounted(() => {
+      if (wall.value) {
+        elementResizeDetectorMaker().listenTo(
+          wall.value,
+          (element: HTMLElement) => {
+            if (element) {
               calcWallItemWH();
               calcWallVWScaler();
+            }
+          }
+        );
+      }
     });
 
     return {
@@ -387,6 +393,7 @@ export default defineComponent({
         }
 
         let uuid = e.dataTransfer?.getData("uuid");
+        console.log(uuid);
         if (uuid) {
           let signal_sources = GlobalData.getInstance().signal_source.filter(
             (item) => (item as any)?.uuid == uuid
@@ -468,6 +475,7 @@ export default defineComponent({
       },
 
       onDragOver(e: DragEvent) {
+        console.log(e.dataTransfer?.items);
         e.preventDefault();
       },
 

yarn.lock

@@ -1212,6 +1212,11 @@
     electron-notarize "^0.1.1"
     electron-osx-sign "^0.4.11"
 
+"@types/element-resize-detector@^1.1.3":
+  version "1.1.3"
+  resolved "https://registry.yarnpkg.com/@types/element-resize-detector/-/element-resize-detector-1.1.3.tgz#0154ef4117305d26ab7a5ac16b83ee51f6b9bb8c"
+  integrity sha512-rqmeHxzNMPar/3IbdQRm+mydv8KlEXUtcp5M47rbZUEjslTjg+bT5+OXCknTCIy1AfvNR0Kio44iMY2zUH65CQ==
+
 "@types/eslint-scope@^3.7.0":
   version "3.7.1"
   resolved "https://registry.yarnpkg.com/@types/eslint-scope/-/eslint-scope-3.7.1.tgz#8dc390a7b4f9dd9f1284629efce982e41612116e"
@@ -1868,6 +1873,11 @@ base64-js@^1.3.1, base64-js@^1.5.1:
   resolved "https://registry.yarnpkg.com/base64-js/-/base64-js-1.5.1.tgz#1b1b440160a5bf7ad40b650f095963481903930a"
   integrity sha512-AKpaYlHn8t4SVbOHCy+b5+KKgvR4vrsD8vbvrbiQJps7fKDTkjkDry6ji0rUJjC0kzbNePLwzxq8iypo41qeWA==
 
+batch-processor@1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/batch-processor/-/batch-processor-1.0.0.tgz#75c95c32b748e0850d10c2b168f6bdbe9891ace8"
+  integrity sha1-dclcMrdI4IUNEMKxaPa9vpiRrOg=
+
 batch@0.6.1:
   version "0.6.1"
   resolved "https://registry.yarnpkg.com/batch/-/batch-0.6.1.tgz#dc34314f4e679318093fc760272525f94bf25c16"
@@ -2783,6 +2793,13 @@ electron-to-chromium@^1.3.793:
   resolved "https://registry.yarnpkg.com/electron-to-chromium/-/electron-to-chromium-1.3.796.tgz#bd74a4367902c9d432d129f265bf4542cddd9f54"
   integrity sha512-agwJFgM0FUC1UPPbQ4aII3HamaaJ09fqWGAWYHmzxDWqdmTleCHyyA0kt3fJlTd5M440IaeuBfzXzXzCotnZcQ==
 
+element-resize-detector@^1.2.3:
+  version "1.2.3"
+  resolved "https://registry.yarnpkg.com/element-resize-detector/-/element-resize-detector-1.2.3.tgz#5078d9b99398fe4c589f8c8df94ff99e5d413ff3"
+  integrity sha512-+dhNzUgLpq9ol5tyhoG7YLoXL3ssjfFW+0gpszXPwRU6NjGr1fVHMEAF8fVzIiRJq57Nre0RFeIjJwI8Nh2NmQ==
+  dependencies:
+    batch-processor "1.0.0"
+
 elementtree@0.1.7:
   version "0.1.7"
   resolved "https://registry.yarnpkg.com/elementtree/-/elementtree-0.1.7.tgz#9ac91be6e52fb6e6244c4e54a4ac3ed8ae8e29c0"