From 98370a52c5d64216daea7d114c47c399baeff596 Mon Sep 17 00:00:00 2001
From: fangxiang <fangxiang@cloudview.work>
Date: Mon, 25 Apr 2022 10:37:10 +0800
Subject: [PATCH] =?UTF-8?q?=E4=BF=AE=E5=A4=8D=E7=99=BB=E5=BD=95=E5=90=8E?=
 =?UTF-8?q?=E9=80=9A=E8=BF=87=E8=8F=9C=E5=8D=95=E5=BC=80=E7=AA=97=E5=8F=AF?=
 =?UTF-8?q?=E8=83=BD=E5=A4=B1=E8=B4=A5=E7=9A=84BUG=E5=92=8C=E6=8B=96?=
 =?UTF-8?q?=E6=8B=BD=E8=A7=A6=E6=91=B8=E5=B1=8F=E5=BC=80=E7=AA=97=E5=A4=B1?=
 =?UTF-8?q?=E8=B4=A5=E7=9A=84BUG?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/pad/BottomBar.vue                      |  26 ++++-
 src/pad/ContentWall.vue                    | 128 ++++++++++++---------
 src/third_lib/vuedraggable/vuedraggable.js |   6 +-
 3 files changed, 97 insertions(+), 63 deletions(-)

diff --git a/src/pad/BottomBar.vue b/src/pad/BottomBar.vue
index 00725cf..27ada8d 100644
--- a/src/pad/BottomBar.vue
+++ b/src/pad/BottomBar.vue
@@ -165,7 +165,7 @@
       :class="'col-' + ($store.state.landspace ? '3' : '4')"
     >
       <div>
-        <div class="row q-my-md" style="width: 1px; height: 1px"></div>
+        <div class="row q-my-lg" style="width: 1px; height: 1px"></div>
         <div class="row q-my-md" style="width: 1px; height: 1px"></div>
         <div class="row">
           <q-space />
@@ -389,16 +389,32 @@ export default defineComponent({
         }
       },
       onSignalSourceDrop(evt: any) {
-        emit_drop_events(evt, "signal_source");
+        try {
+          emit_drop_events(evt, "signal_source");
+        } catch (e) {
+          console.log(e);
+        }
       },
       onPollingDrop(evt: any) {
-        emit_drop_events(evt, "polling");
+        try {
+          emit_drop_events(evt, "polling");
+        } catch (e) {
+          console.log(e);
+        }
       },
       onModeDrop(evt: any) {
-        emit_drop_events(evt, "mode");
+        try {
+          emit_drop_events(evt, "mode");
+        } catch (e) {
+          console.log(e);
+        }
       },
       onPlanDrop(evt: any) {
-        emit_drop_events(evt, "plan");
+        try {
+          emit_drop_events(evt, "plan");
+        } catch (e) {
+          console.log(e);
+        }
       },
       volumeUp(evt: MouseEvent) {
         evt.stopPropagation();
diff --git a/src/pad/ContentWall.vue b/src/pad/ContentWall.vue
index b10777e..f762d4d 100644
--- a/src/pad/ContentWall.vue
+++ b/src/pad/ContentWall.vue
@@ -9,7 +9,7 @@
         width: wall_width + 'px',
         height: wall_height + 'px',
       }"
-      class="wall_content"
+      style="border: 1px solid black"
     >
       <div id="windows" ref="dom_windows" style="position: absolute">
         <vue3-resize-drag
@@ -124,10 +124,6 @@
 </template>
 
 <style scoped>
-.wall_content {
-  border: 1px solid black;
-}
-
 .wall_item {
   border: 1px solid gray;
 }
@@ -146,7 +142,16 @@
 </style>
 
 <script lang="ts">
-import { defineComponent, Ref, ref, onMounted, computed, watch } from "vue";
+import {
+  defineComponent,
+  Ref,
+  ref,
+  onMounted,
+  computed,
+  watch,
+  nextTick,
+  onUpdated,
+} from "vue";
 import { useQuasar } from "quasar";
 import { useI18n } from "vue-i18n";
 import { useStore } from "src/store";
@@ -198,8 +203,8 @@ export default defineComponent({
 
     const file_manage_dialog: Ref<any> = ref(null);
 
-    const wall_width = ref(0);
-    const wall_height = ref(0);
+    const wall_width = ref(1);
+    const wall_height = ref(1);
 
     const wall_rows = computed({
       get: () => $store.state.wall_row,
@@ -485,6 +490,13 @@ export default defineComponent({
                 height = width * 0.56;
               }
 
+              if (height < 1) {
+                height = 1;
+              }
+              if (width < 1) {
+                width = 1;
+              }
+
               wall_height.value = height;
               wall_width.value = width;
 
@@ -610,15 +622,6 @@ export default defineComponent({
     const onDropSignalSourceOrPolliong = (evt: _IDropToWall) => {
       if (!plan_running.value) {
         if (evt && evt.data) {
-          // const x =
-          //   evt.pos.x -
-          //   (wall.value.parentElement?.offsetLeft ?? 0) -
-          //   wall_content.value.offsetLeft;
-          // const y =
-          //   evt.pos.y -
-          //   (wall.value.parentElement?.offsetTop ?? 0) -
-          //   wall_content.value.offsetTop;
-
           let dom = document.elementFromPoint(
             evt.pos.x,
             evt.pos.y
@@ -643,10 +646,12 @@ export default defineComponent({
             if (dom.classList.contains("wall_item_flag")) {
               // 开窗
               // 不知道为什么有1像素的差别
-              const x = dom.offsetLeft / wall_content.value.clientWidth;
-              const y = dom.offsetTop / wall_content.value.clientHeight;
-              const width = dom.offsetWidth / wall_content.value.clientWidth;
-              const height = dom.offsetHeight / wall_content.value.clientHeight;
+              const wall_width = wall_content_client_width.value;
+              const wall_height = wall_content_client_height.value;
+              const x = dom.offsetLeft / wall_width;
+              const y = dom.offsetTop / wall_height;
+              const width = dom.offsetWidth / wall_width;
+              const height = dom.offsetHeight / wall_height;
 
               switch (evt.type) {
                 case "polling":
@@ -911,13 +916,6 @@ export default defineComponent({
         GlobalData.getInstance().getCurrentClient()?.closeWindow(window_id);
       },
       closeAllWindows() {
-        // for (const window of $store.state.windows) {
-        //   if (window) {
-        //     GlobalData.getInstance()
-        //       .getCurrentClient()
-        //       ?.closeWindow(window.window_id);
-        //   }
-        // }
         GlobalData.getInstance().getCurrentClient()?.closeWindow(-1);
       },
       async repliceWindow(window_id: number) {
@@ -1005,10 +1003,44 @@ export default defineComponent({
           return;
         }
 
+        // 异步请求后获取不到 dom 节点数据,所以在异步请求之前先计算出目标窗口的x,y,w,h
+        const target_rect = {
+          x: 0,
+          y: 0,
+          w: 0,
+          h: 0,
+        };
+
+        {
+          const cell_width = 1.0 / $store.state.wall_col;
+          const cell_height = 1.0 / $store.state.wall_row;
+
+          const col = Math.floor(
+            (last_context_menu_pos_x.value -
+              (wall.value.parentElement?.offsetLeft ?? 0) -
+              wall_content.value.offsetLeft) /
+              wall_content.value.offsetWidth /
+              cell_width
+          );
+          const row = Math.floor(
+            (last_context_menu_pos_y.value -
+              (wall.value.parentElement?.offsetTop ?? 0) -
+              wall_content.value.offsetTop) /
+              wall_content.value.offsetHeight /
+              cell_height
+          );
+
+          target_rect.x = col * cell_width;
+          target_rect.y = row * cell_height;
+          target_rect.w = cell_width;
+          target_rect.h = cell_height;
+        }
+
         const obj = await file_manage_dialog.value.showDialogAsync(
           "select",
           ".mp4;.avi;.ts;.jpg;.png;"
         );
+
         if (obj) {
           interface __I {
             path: string;
@@ -1036,39 +1068,23 @@ export default defineComponent({
               const response = await GlobalData.getInstance()
                 .getCurrentClient()
                 ?.addSignalSource(entity);
+
               if (response && response.success) {
-                const cell_width = 1.0 / $store.state.wall_col;
-                const cell_height = 1.0 / $store.state.wall_row;
-                console.log(last_context_menu_pos_x);
-                console.log(last_context_menu_pos_y);
-                const col = Math.floor(
-                  (last_context_menu_pos_x.value -
-                    (wall.value.parentElement?.offsetLeft ?? 0) -
-                    wall_content.value.offsetLeft) /
-                    wall_content.value.offsetWidth /
-                    cell_width
-                );
-                const row = Math.floor(
-                  (last_context_menu_pos_y.value -
-                    (wall.value.parentElement?.offsetTop ?? 0) -
-                    wall_content.value.offsetTop) /
-                    wall_content.value.offsetHeight /
-                    cell_height
-                );
-
-                const x = col * cell_width;
-                const y = row * cell_height;
-
-                if (!isNaN(x) && !isNaN(y)) {
+                if (
+                  target_rect &&
+                  !isNaN(target_rect.x) &&
+                  !isNaN(target_rect.y) &&
+                  !isNaN(target_rect.w) &&
+                  !isNaN(target_rect.h)
+                ) {
                   const open_window_request =
                     new Protocol.OpenWindowRequestEntity(
                       response.uuid,
-                      x,
-                      y,
-                      cell_width,
-                      cell_height
+                      target_rect.x,
+                      target_rect.y,
+                      target_rect.w,
+                      target_rect.h
                     );
-
                   GlobalData.getInstance()
                     .getCurrentClient()
                     ?.openWindow(open_window_request);
diff --git a/src/third_lib/vuedraggable/vuedraggable.js b/src/third_lib/vuedraggable/vuedraggable.js
index 0f9684f..3bfafe8 100644
--- a/src/third_lib/vuedraggable/vuedraggable.js
+++ b/src/third_lib/vuedraggable/vuedraggable.js
@@ -103,7 +103,9 @@ const initialize_sortablejs = () => {
             // 模拟点击,修复拖拽后必须点一下才能切换tab的BUG
             document.body.click();
           }, 0);
-        } catch {}
+        } catch (e) {
+          console.log(e);
+        }
       },
     };
 
@@ -198,7 +200,7 @@ const draggableComponent = defineComponent({
 
     sortableOptions.fallbackOnBody = true;
     this._sortable = new Sortable(targetDomElement, sortableOptions);
-    console.log();
+
     if (this._sortable["afx_event"]) {
       this._sortable["afx_event"].vue_self = this;
     }