From 20fae6270d4851ccb515f902a018c81fa20be18d Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E8=A1=97=E8=A7=92=E5=B0=8F=E6=9E=97?= <1013335014@qq.com>
Date: Wed, 17 Apr 2024 09:14:58 +0800
Subject: [PATCH] =?UTF-8?q?Demo=EF=BC=9A=E4=BC=98=E5=8C=96=E9=BC=A0?=
 =?UTF-8?q?=E6=A0=87=E5=9C=A8=E7=AA=97=E5=8F=A3=E8=BE=B9=E7=BC=98=E7=82=B9?=
 =?UTF-8?q?=E5=87=BB=E5=8F=B3=E9=94=AE=E6=97=B6=E8=8F=9C=E5=8D=95=E6=98=BE?=
 =?UTF-8?q?=E7=A4=BA=E4=B8=8D=E5=85=A8=E7=9A=84=E9=97=AE=E9=A2=98?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 web/src/pages/Edit/components/Contextmenu.vue | 75 +++++++++----------
 1 file changed, 35 insertions(+), 40 deletions(-)

diff --git a/web/src/pages/Edit/components/Contextmenu.vue b/web/src/pages/Edit/components/Contextmenu.vue
index 803c07e0..c0643792 100644
--- a/web/src/pages/Edit/components/Contextmenu.vue
+++ b/web/src/pages/Edit/components/Contextmenu.vue
@@ -2,6 +2,7 @@
   <div
     class="contextmenuContainer listBox"
     v-if="isShow"
+    ref="contextmenuRef"
     :style="{ left: left + 'px', top: top + 'px' }"
     :class="{ isDark: isDark }"
   >
@@ -239,24 +240,31 @@ export default {
   methods: {
     ...mapMutations(['setLocalConfig']),
 
-    /**
-     * @Author: 王林
-     * @Date: 2021-07-14 21:38:50
-     * @Desc: 节点右键显示
-     */
-    show(e, node) {
-      this.type = 'node'
-      this.left = e.clientX + 10
-      this.top = e.clientY + 10
-      this.isShow = true
-      this.node = node
+    // 计算右键菜单元素的显示位置
+    getShowPosition(x, y) {
+      const rect = this.$refs.contextmenuRef.getBoundingClientRect()
+      if (x + rect.width > window.innerWidth) {
+        x = x - rect.width - 20
+      }
+      if (y + rect.height > window.innerHeight) {
+        y = window.innerHeight - rect.height - 10
+      }
+      return { x, y }
     },
 
-    /**
-     * @Author: 王林
-     * @Date: 2021-07-16 13:27:48
-     * @Desc: 鼠标按下事件
-     */
+    // 节点右键显示
+    show(e, node) {
+      this.type = 'node'
+      this.isShow = true
+      this.node = node
+      this.$nextTick(() => {
+        const { x, y } = this.getShowPosition(e.clientX + 10, e.clientY + 10)
+        this.left = x
+        this.top = y
+      })
+    },
+
+    // 鼠标按下事件
     onMousedown(e) {
       if (e.which !== 3) {
         return
@@ -266,11 +274,7 @@ export default {
       this.isMousedown = true
     },
 
-    /**
-     * @Author: 王林
-     * @Date: 2021-07-16 13:27:53
-     * @Desc: 鼠标松开事件
-     */
+    // 鼠标松开事件
     onMouseup(e) {
       if (!this.isMousedown) {
         return
@@ -286,35 +290,26 @@ export default {
       this.show2(e)
     },
 
-    /**
-     * @Author: 王林
-     * @Date: 2021-07-15 22:54:08
-     * @Desc: 画布右键显示
-     */
+    // 画布右键显示
     show2(e) {
       this.type = 'svg'
-      this.left = e.clientX + 10
-      this.top = e.clientY + 10
       this.isShow = true
+      this.$nextTick(() => {
+        const { x, y } = this.getShowPosition(e.clientX + 10, e.clientY + 10)
+        this.left = x
+        this.top = y
+      })
     },
 
-    /**
-     * @Author: 王林
-     * @Date: 2021-07-14 21:37:55
-     * @Desc: 隐藏
-     */
+    // 隐藏
     hide() {
       this.isShow = false
-      this.left = 0
-      this.top = 0
+      this.left = -9999
+      this.top = -9999
       this.type = ''
     },
 
-    /**
-     * @Author: 王林
-     * @Date: 2021-07-14 23:27:54
-     * @Desc: 执行命令
-     */
+    // 执行命令
     exec(key, disabled, ...args) {
       if (disabled) {
         return