From ec591420965c1fb6b807c472f03b361bf57a0902 Mon Sep 17 00:00:00 2001
From: Mixi <79845985+lmscc@users.noreply.github.com>
Date: Tue, 16 May 2023 14:41:52 +0800
Subject: [PATCH] =?UTF-8?q?bugfix=EF=BC=9Athe=20.vue-inspector-card=20elem?=
 =?UTF-8?q?ent=20may=20display=20in=20a=20wrong=20position?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 packages/core/src/Overlay.vue | 45 ++++++++++++++++++++---------------
 1 file changed, 26 insertions(+), 19 deletions(-)

diff --git a/packages/core/src/Overlay.vue b/packages/core/src/Overlay.vue
index c4c35b7..8c390bf 100644
--- a/packages/core/src/Overlay.vue
+++ b/packages/core/src/Overlay.vue
@@ -26,6 +26,7 @@ export default {
         width: 0,
         height: 0,
       },
+      floatsStyle: {},
       linkParams: {
         file: '',
         line: 0,
@@ -34,6 +35,31 @@ export default {
       KEY_IGNORE,
     }
   },
+  watch: {
+      position: {
+          handler() {
+              this.$nextTick(() => {
+                  let margin = 10;
+                  let x = this.position.x + this.position.width / 2;
+                  let y = this.position.y + this.position.height + 5;
+                  const floatsRef = this.$refs.floatsRef;
+                  let floatsWidth = floatsRef?.clientWidth ?? 0;
+                  let floatsHeight = floatsRef?.clientHeight ?? 0;
+
+                  x = Math.max(margin, x);
+                  x = Math.min(x, window.innerWidth - floatsWidth - margin);
+
+                  y = Math.max(margin, y);
+                  y = Math.min(y, window.innerHeight - floatsHeight - margin);
+                  this.floatsStyle = {
+                      left: `${x}px`,
+                      top: `${y}px`,
+                  };
+              });
+          },
+          deep: true,
+      },
+  },
   computed: {
     logoColors() {
       return this.enabled ? ['#42D392', '#213547', '#42b883'] : ['#E2C6C6', '#E2C6C6', '#E2C6C6']
@@ -55,25 +81,6 @@ export default {
         [y]: 0,
       }
     },
-    floatsStyle() {
-      let margin = 10
-      let x = this.position.x + (this.position.width / 2)
-      let y = this.position.y + this.position.height + 5
-      const floatsRef = this.$refs.floatsRef
-      let floatsWidth = floatsRef?.clientWidth ?? 0
-      let floatsHeight = floatsRef?.clientHeight ?? 0
-
-      x = Math.max(margin, x)
-      x = Math.min(x, window.innerWidth - floatsWidth - margin)
-
-      y = Math.max(margin, y)
-      y = Math.min(y, window.innerHeight - floatsHeight - margin)
-
-      return {
-        left: `${x}px`,
-        top: `${y}px`,
-      }
-    },
     sizeIndicatorStyle() {
       return {
         left: `${this.position.x}px`,