[Optimization][web] optimization right click menu overflow unable to …

…display (#3356) Signed-off-by: Zzm0809 <[email protected]> Co-authored-by: Zzm0809 <[email protected]>
DataLinkDC · Apr 7, 2024 · 7b7c2be · 7b7c2be
1 parent a1aca2a
commit 7b7c2be
Show file tree

Hide file tree

Showing 4 changed files with 28 additions and 5 deletions.
diff --git a/dinky-web/src/components/RightContextMenu/index.tsx b/dinky-web/src/components/RightContextMenu/index.tsx
@@ -36,6 +36,8 @@ const RightContextMenu: React.FC<RightContextMenuProps> = (props) => {
   return (
     <Dropdown
       arrow
+      autoAdjustOverflow
+      destroyPopupOnHide
       trigger={['contextMenu']}
       overlayStyle={{ ...contextMenuPosition }}
       menu={{ onClick: onClick, items: items }}

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,23 @@ const ResourceOverView: React.FC = () => {
   const handleRightClick = (info: any) => {
     // 获取右键点击的节点信息
     const { node, event } = info;
+
+    // 判断右键的位置是否超出屏幕 , 如果超出屏幕则设置为屏幕的最大值 往上偏移 75 (需要根据具体的右键菜单数量合理设置)
+    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
       }
     }));
   };