optimization right-click menu overflow unable to display

Signed-off-by: Zzm0809 <[email protected]>
Zzm0809 · Apr 7, 2024 · 7e5c41b · 7e5c41b
1 parent 66c7194
commit 7e5c41b
Show file tree

Hide file tree

Showing 3 changed files with 27 additions and 5 deletions.
diff --git a/dinky-web/src/pages/AuthCenter/Menu/components/MenuList/index.tsx b/dinky-web/src/pages/AuthCenter/Menu/components/MenuList/index.tsx
@@ -144,15 +144,21 @@ const MenuList: React.FC = () => {
   const handleRightClick = (info: any) => {
     // 获取右键点击的节点信息
     const { node, event } = info;
+    // 判断右键的位置是否超出屏幕 , 如果超出屏幕则设置为屏幕的最大值 往上偏移 125
+    if (event.clientY + 150 > window.innerHeight) {
+      event.clientY = window.innerHeight - 125;
+    }
     setMenuState((prevState) => ({
       ...prevState,
       contextMenuOpen: true,
       selectedKeys: [node.key],
       clickNode: { ...prevState.clickNode, rightClickedNode: node },
       contextMenuPosition: {
         ...prevState.contextMenuPosition,
-        top: event.clientY + 20,
-        left: event.clientX + 20
+        top: event.clientY + 5,
+        left: event.clientX + 10,
+        screenX: event.screenX,
+        screenY: event.screenY,
       }
     }));
   };

diff --git a/dinky-web/src/pages/DataStudio/LeftContainer/Project/index.tsx b/dinky-web/src/pages/DataStudio/LeftContainer/Project/index.tsx
@@ -90,6 +90,11 @@ const Project: React.FC = (props: connect) => {
       event
     } = info;
 
+    // 判断右键的位置是否超出屏幕 , 如果超出屏幕则设置为屏幕的最大值 往上偏移 200px
+    if (event.clientY + 150 > window.innerHeight) {
+      event.clientY = window.innerHeight - 200;
+    }
+
     // 设置右键菜单
     setProjectState((prevState) => ({
       ...prevState,
@@ -101,7 +106,9 @@ const Project: React.FC = (props: connect) => {
       contextMenuPosition: {
         ...prevState.contextMenuPosition,
         top: event.clientY + 5,
-        left: event.clientX + 10
+        left: event.clientX + 10,
+        screenX: event.screenX,
+        screenY: event.screenY
       },
       selectedKeys: [key],
       rightClickedNode: { ...node, ...fullInfo },

diff --git a/dinky-web/src/pages/RegCenter/Resource/components/ResourceOverView/index.tsx b/dinky-web/src/pages/RegCenter/Resource/components/ResourceOverView/index.tsx
@@ -172,15 +172,24 @@ const ResourceOverView: React.FC = () => {
   const handleRightClick = (info: any) => {
     // 获取右键点击的节点信息
     const { node, event } = info;
+
+
+    // 判断右键的位置是否超出屏幕 , 如果超出屏幕则设置为屏幕的最大值 往上偏移 150
+    if (event.clientY + 150 > window.innerHeight) {
+      event.clientY = window.innerHeight - 75;
+    }
+
     setResourceState((prevState) => ({
       ...prevState,
       selectedKeys: [node.key],
       rightClickedNode: node,
       contextMenuOpen: true,
       contextMenuPosition: {
         ...prevState.contextMenuPosition,
-        left: event.clientX + 20,
-        top: event.clientY + 20
+        top: event.clientY + 5,
+        left: event.clientX + 10,
+        screenX: event.screenX,
+        screenY: event.screenY
       }
     }));
   };