!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)
+        let { offsetWidth: newWidth, offsetHeight: newHeight } = menuEl;
-            this.mousePositionY = MathUtils.clamp(this.ed.MouseCtrl._CurMousePointClient.y - menuHeight, 0, window.innerHeight - menuHeight);
+        if (!isClick && this.curMenuSize[0] === newWidth && this.curMenuSize[1] === newHeight) return;
-        else
+        this.curMenuSize = [newWidth, newHeight];
-            this.mousePositionY = MathUtils.clamp(this.ed.MouseCtrl._CurMousePointClient.y, 0, window.innerHeight - menuHeight);
-        this.mousePositionX = this.ed.MouseCtrl._CurMousePointClient.x;
-    }
 
-    UpdateMenuWidth(newWidth: number)
+        const { x: mouseX, y: mouseY } = this.ed.MouseCtrl._CurMousePointClient;
-    {
+        this.mousePositionX = MathUtils.clamp(mouseX, 0, window.innerWidth - newWidth);
-        this.mousePositionX = MathUtils.clamp(this.mousePositionX, 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;
+        this.props.keywordStore.UpdateMenuPosition();
-        if (menuEl)
-        {
-            this.props.keywordStore.UpdateMenuWidth(menuEl.offsetWidth);
-        }
     }
 
     public render()
@@ -73,9 +70,12 @@ export class KeyWordContextMenu extends React.Component<{ keywordStore?: GetKeyW
                                     }}
                                     onMouseMove={() =>
                                     {
-                                        store.selectIndex = i;
+                                        runInAction(() =>
-                                        this.props.keywordStore.m_ShowChildrenIndex = i;
+                                        {
-                                        store.childSelectIndex = 0;
+                                            store.selectIndex = i;
+                                            this.props.keywordStore.m_ShowChildrenIndex = i;
+                                            store.childSelectIndex = 0;
+                                        });
                                     }}
                                 >
                                     {

src/UI/Components/commandLineInput/InputHint.tsx

@@ -370,59 +370,65 @@ export class InputHint extends React.Component<InputHintProps, InputHitState>
                         })
                         }
                     </ul>
-                    <div style={{ maxHeight: `calc(80vh - ${topToolBarHeight}px)`, overflowY: "scroll" }}>
+                    <div style={{ display: "flex", flexDirection: "column" }}>
-                        {
+                        <div style={{ maxHeight: `calc(80vh - ${topToolBarHeight}px)`, overflowY: "scroll" }}>
-                            this.props.keyWordList.map((item, index: number) =>
-                            {
-                                return (
-                                    <span
-                                        key={index}
-                                        className="hint vice-hint"
-                                        onClick={() => { this.handleCallback(item.key); }}
-                                    >
-                                        [{item.msg}<span>({item.key})</span>]
-                                    </span>
-                                );
-                            })
-                        }
-                    </div>
-                    <div>
-                        <Icon icon="sort-asc" onClick={this.handleShowHistoryCommand} color={"#106ba3"} />
-                        <span className="hint">{this.props.cmdPrompt}</span>
-                        <input
-                            id={CMD_INPUT_ID}
-                            disabled={CommandStore.GetInstance().disableInput}
-                            type="text"
-                            style={{ flex: 1, minWidth: 0, height: CommandInputHeight, border: "none" }}
-                            placeholder={this.props.cmdPrompt == "" ? "请输入命令:" : ""}
-                            autoComplete="off"
-                            onCompositionStart={() =>
-                            {
-                                this.isCNInput = true;
-
-                                SwitchServerStore.GetInstance().DisableIme();
-                            }}
-                            onCompositionEnd={(e) =>
-                            {
-                                this.isCNInput = false;
-                                this.handleOnChangeIntelliSense(e.currentTarget.value);
-                            }}
-                            onFocus={() =>
-                            {
-                                SwitchServerStore.GetInstance().DisableIme();
-                            }}
-                            onBlur={() =>
-                            {
-                                SwitchServerStore.GetInstance().ResetIme();
-                            }}
-                            onChange={(e) => { this.handleOnChangeIntelliSense(e.target.value); }}
-                            ref={el => { this.inputEl = el; }}
-                            onKeyDown={(e) =>
                             {
-                                SwitchServerStore.GetInstance().DisableIme();
+                                this.props.keyWordList.map((item, index: number) =>
-                                if (e.ctrlKey || e.altKey || e.shiftKey) e.preventDefault();
+                                {
-                            }}
+                                    return (
-                        />
+                                        <span
+                                            key={index}
+                                            className="hint vice-hint"
+                                            onClick={() => { this.handleCallback(item.key); }}
+                                        >
+                                            [{item.msg}<span>({item.key})</span>]
+                                        </span>
+                                    );
+                                })
+                            }
+                        </div>
+                        <div
+                            style={{
+                                display: "flex",
+                                alignItems: "center"
+                            }}>
+                            <Icon icon="sort-asc" onClick={this.handleShowHistoryCommand} color={"#106ba3"} />
+                            <span className="hint">{this.props.cmdPrompt}</span>
+                            <input
+                                id={CMD_INPUT_ID}
+                                disabled={CommandStore.GetInstance().disableInput}
+                                type="text"
+                                style={{ flex: 1, minWidth: 0, height: CommandInputHeight, border: "none" }}
+                                placeholder={this.props.cmdPrompt == "" ? "请输入命令:" : ""}
+                                autoComplete="off"
+                                onCompositionStart={() =>
+                                {
+                                    this.isCNInput = true;
+
+                                    SwitchServerStore.GetInstance().DisableIme();
+                                }}
+                                onCompositionEnd={(e) =>
+                                {
+                                    this.isCNInput = false;
+                                    this.handleOnChangeIntelliSense(e.currentTarget.value);
+                                }}
+                                onFocus={() =>
+                                {
+                                    SwitchServerStore.GetInstance().DisableIme();
+                                }}
+                                onBlur={() =>
+                                {
+                                    SwitchServerStore.GetInstance().ResetIme();
+                                }}
+                                onChange={(e) => { this.handleOnChangeIntelliSense(e.target.value); }}
+                                ref={el => { this.inputEl = el; }}
+                                onKeyDown={(e) =>
+                                {
+                                    SwitchServerStore.GetInstance().DisableIme();
+                                    if (e.ctrlKey || e.altKey || e.shiftKey) e.preventDefault();
+                                }}
+                            />
+                        </div>
                     </div>
                     <ul
                         className="history-command"