!2806 优化:右键菜单栏显示位置

src/Editor/GetKeyWordService.tsx

@@ -2,6 +2,7 @@ import { observable } from 'mobx';
 import { Provider } from 'mobx-react';
 import * as React from 'react';
 import * as ReactDOM from 'react-dom';
+import { MathUtils } from 'three';
 import { begin, end } from 'xaop';
 import { app } from '../ApplicationServices/Application';
 import { InputState, KeyWord } from '../Common/InputState';
@@ -69,12 +70,17 @@ export class GetKeyWordsServices implements EditorService
         let menuHeight = Math.min(window.innerHeight, this.keywordList.length * MENU_ITEM_HEIGHT + MENU_PADDING);
 
         if (this.ed.MouseCtrl._CurMousePointClient.y > window.innerHeight - menuHeight)
-            this.mousePositionY = this.ed.MouseCtrl._CurMousePointClient.y - menuHeight;
+            this.mousePositionY = MathUtils.clamp(this.ed.MouseCtrl._CurMousePointClient.y - menuHeight, 0, window.innerHeight - menuHeight);
         else
-            this.mousePositionY = this.ed.MouseCtrl._CurMousePointClient.y;
+            this.mousePositionY = MathUtils.clamp(this.ed.MouseCtrl._CurMousePointClient.y, 0, window.innerHeight - menuHeight);
         this.mousePositionX = this.ed.MouseCtrl._CurMousePointClient.x;
     }
 
+    UpdateMenuWidth(newWidth: number)
+    {
+        this.mousePositionX = MathUtils.clamp(this.mousePositionX, 0, window.innerWidth - newWidth);
+    }
+
     async Start(prompt: GetKeyWordPrommpt): Promise<PromptResult>
     {
         return new Promise<PromptResult>((resolve, reject) =>

src/UI/Components/ContextMenu/KeyWordContextMenu.tsx

@@ -15,6 +15,15 @@ import { MenuItem } from './MenuItem';
 @observer
 export class KeyWordContextMenu extends React.Component<{ keywordStore?: GetKeyWordsServices; }, {}>
 {
+    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);
+        }
+    }
+
     public render()
     {
         let store = this.props.keywordStore;
@@ -32,7 +41,7 @@ export class KeyWordContextMenu extends React.Component<{ keywordStore?: GetKeyW
                         cursor: "default",
                         zIndex: parseFloat(ZINDEX.RightMenu),
                         maxHeight: "100%",
-                        overflow: store.keywordList.length >= Math.max(window.innerHeight / 30, 20) ? "auto" : ""
+                        overflow: (store.keywordList.length) * 30 >= (window.innerHeight) * 0.7 ? "scroll" : ""
                     }
                 }
                 onMouseLeave={() => { this.props.keywordStore.m_ShowChildrenIndex = -1; }}

src/UI/Components/commandLineInput/InputHint.tsx

@@ -370,56 +370,60 @@ export class InputHint extends React.Component<InputHintProps, InputHitState>
                         })
                         }
                     </ul>
-                    <Icon icon="sort-asc" onClick={this.handleShowHistoryCommand} color={"#106ba3"} />
-                    <span className="hint">{this.props.cmdPrompt}</span>
-                    {
-                        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>
-                            );
-                        })
-                    }
-                    <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={() =>
+                    <div style={{ maxHeight: `calc(80vh - ${topToolBarHeight}px)`, overflowY: "scroll" }}>
                         {
-                            this.isCNInput = true;
+                            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();
-                            if (e.ctrlKey || e.altKey || e.shiftKey) e.preventDefault();
-                        }}
-                    />
+                                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>
                     <ul
                         className="history-command"
                         style={{ display: this.state.isShowHistory ? "block" : "none" }}