!2817 优化:右键菜单栏高度位置计算

src/Editor/GetKeyWordService.tsx

@@ -1,4 +1,4 @@
-import { observable } from 'mobx';
+import { action, observable } from 'mobx';
 import { Provider } from 'mobx-react';
 import * as React from 'react';
 import * as ReactDOM from 'react-dom';
@@ -14,8 +14,6 @@ import { InitKeyWord } from './InitKeyword';
 import { GetKeyWordPrommpt } from "./PromptOptions";
 import { PromptResult, PromptStatus } from './PromptResult';
 
-const MENU_PADDING = 20;
-const MENU_ITEM_HEIGHT = 30;
 /**
  * 指定用户拾取关键字的服务.
  *
@@ -60,25 +58,27 @@ export class GetKeyWordsServices implements EditorService
     async Doit(e: MouseEvent)
     {
         if (e.button === MouseKey.Left)
-            this.UpdateContextMenuPosition();
+            this.UpdateMenuPosition(true);
         return false;
     }
 
-    //更新上下文菜单的位置
-    private UpdateContextMenuPosition()
+    //记录当前菜单栏的宽高
+    curMenuSize = [0, 0];
+    @action
+    UpdateMenuPosition(isClick = false)
     {
-        let menuHeight = Math.min(window.innerHeight, this.keywordList.length * MENU_ITEM_HEIGHT + MENU_PADDING);
+        let menuEl = document.querySelector(".bp3-menu") as HTMLDivElement;
+        if (!menuEl) return;
 
-        if (this.ed.MouseCtrl._CurMousePointClient.y > window.innerHeight - menuHeight)
-            this.mousePositionY = MathUtils.clamp(this.ed.MouseCtrl._CurMousePointClient.y - menuHeight, 0, window.innerHeight - menuHeight);
-        else
-            this.mousePositionY = MathUtils.clamp(this.ed.MouseCtrl._CurMousePointClient.y, 0, window.innerHeight - menuHeight);
-        this.mousePositionX = this.ed.MouseCtrl._CurMousePointClient.x;
-    }
+        let { offsetWidth: newWidth, offsetHeight: newHeight } = menuEl;
+        if (!isClick && this.curMenuSize[0] === newWidth && this.curMenuSize[1] === newHeight) return;
+        this.curMenuSize = [newWidth, newHeight];
 
-    UpdateMenuWidth(newWidth: number)
-    {
-        this.mousePositionX = MathUtils.clamp(this.mousePositionX, 0, window.innerWidth - newWidth);
+        const { x: mouseX, y: mouseY } = this.ed.MouseCtrl._CurMousePointClient;
+        this.mousePositionX = MathUtils.clamp(mouseX, 0, window.innerWidth - newWidth);
+
+        let y = mouseY > window.innerHeight - newHeight ? mouseY - newHeight : mouseY;
+        this.mousePositionY = MathUtils.clamp(y, 0, window.innerHeight - newHeight);
     }
 
     async Start(prompt: GetKeyWordPrommpt): Promise<PromptResult>
@@ -96,7 +96,7 @@ export class GetKeyWordsServices implements EditorService
             prompt.KeyWordList.forEach(k => k.key = k.key.toUpperCase());
             //初始化状态
             this.keywordList = prompt.KeyWordList;
-            this.UpdateContextMenuPosition();
+            this.curMenuSize = [0, 0];
             if (prompt.Default)
             {
                 let index = this.keywordList.findIndex(k => k.key === prompt.Default);

src/UI/Components/ContextMenu/KeyWordContextMenu.tsx

@@ -1,4 +1,5 @@
 import { Menu, MenuDivider } from '@blueprintjs/core';
+import { runInAction } from 'mobx';
 import { inject, observer } from 'mobx-react';
 import * as React from 'react';
 import { MenuDividerKWD } from '../../../Common/InputState';
@@ -17,11 +18,7 @@ export class KeyWordContextMenu extends React.Component<{ keywordStore?: GetKeyW
 {
     componentDidUpdate(prevProps: Readonly<{ keywordStore?: GetKeyWordsServices; }>, prevState: Readonly<{}>, snapshot?: any): void
     {
-        let menuEl = document.querySelector(".bp3-menu") as HTMLDivElement;
-        if (menuEl)
-        {
-            this.props.keywordStore.UpdateMenuWidth(menuEl.offsetWidth);
-        }
+        this.props.keywordStore.UpdateMenuPosition();
     }
 
     public render()
@@ -72,10 +69,13 @@ export class KeyWordContextMenu extends React.Component<{ keywordStore?: GetKeyW
                                             });
                                     }}
                                     onMouseMove={() =>
+                                    {
+                                        runInAction(() =>
                                         {
                                             store.selectIndex = i;
                                             this.props.keywordStore.m_ShowChildrenIndex = i;
                                             store.childSelectIndex = 0;
+                                        });
                                     }}
                                 >
                                     {

src/UI/Components/commandLineInput/InputHint.tsx

@@ -370,6 +370,7 @@ export class InputHint extends React.Component<InputHintProps, InputHitState>
                         })
                         }
                     </ul>
+                    <div style={{ display: "flex", flexDirection: "column" }}>
                         <div style={{ maxHeight: `calc(80vh - ${topToolBarHeight}px)`, overflowY: "scroll" }}>
                             {
                                 this.props.keyWordList.map((item, index: number) =>
@@ -386,7 +387,11 @@ export class InputHint extends React.Component<InputHintProps, InputHitState>
                                 })
                             }
                         </div>
-                    <div>
+                        <div
+                            style={{
+                                display: "flex",
+                                alignItems: "center"
+                            }}>
                             <Icon icon="sort-asc" onClick={this.handleShowHistoryCommand} color={"#106ba3"} />
                             <span className="hint">{this.props.cmdPrompt}</span>
                             <input
@@ -424,6 +429,7 @@ export class InputHint extends React.Component<InputHintProps, InputHitState>
                                 }}
                             />
                         </div>
+                    </div>
                     <ul
                         className="history-command"
                         style={{ display: this.state.isShowHistory ? "block" : "none" }}