!328 优化动态提示框的位置

Merge pull request !328 from 肖诗雅/promptBlock_pos_merge

src/Common/ZIndex.ts

@@ -7,8 +7,8 @@ export enum ZINDEX
     MainContent = "35", //主要内容的层级
     ToolBar = "2", //工具栏
     BluePortal = "30", //蓝图模态框默认值
-    RightMenu = "30",//右键菜单
     Portal = "38",//PopOver 见"DoorModal.less"
+    RightMenu = "31",//右键菜单
     ToolsBlock_small = "32",
     CommandInput = "28",
     TransparentTerminal = "0",

src/Editor/GetKeyWordService.tsx

@@ -13,6 +13,8 @@ import { PromptResult, PromptStatus } from './PromptResult';
 import { FixIndex } from '../Common/Utils';
 import { KeyWordContextMenu } from '../UI/Components/ContextMenu/KeyWordContextMenu';
 
+const MENU_PADDING = 20;
+const MENU_ITEM_HEIGHT = 30;
 /**
  * 指定用户拾取关键字的服务.
  *
@@ -68,8 +70,13 @@ export class GetKeyWordsServices implements EditorService
     //更新上下文菜单的位置
     private UpdateContextMenuPosition()
     {
-        this.mousePositionX = this.ed.m_MouseCtrl.m_CurMousePointVCS.x;
-        this.mousePositionY = this.ed.m_MouseCtrl.m_CurMousePointVCS.y;
+        let menuHeight = this.keywordList.length * MENU_ITEM_HEIGHT + MENU_PADDING;
+
+        if (this.ed.m_MouseCtrl.m_CurMousePointClient.y > window.innerHeight - menuHeight)
+            this.mousePositionY = this.ed.m_MouseCtrl.m_CurMousePointClient.y - menuHeight;
+        else
+            this.mousePositionY = this.ed.m_MouseCtrl.m_CurMousePointClient.y;
+        this.mousePositionX = this.ed.m_MouseCtrl.m_CurMousePointClient.x;
     }
 
     Start(prompt: GetKeyWordPrommpt): Promise<PromptResult>
@@ -86,11 +93,11 @@ export class GetKeyWordsServices implements EditorService
             //默认所有的key为大写
             prompt.KeyWordList.forEach(k => k.key = k.key.toUpperCase());
             //初始化状态
+            this.keywordList = prompt.KeyWordList;
             this.UpdateContextMenuPosition();
             this.selectIndex = 0;
             this.ed.m_InputState |= InputState.GetKeyWord;
             this.IsReady = true;
-            this.keywordList = prompt.KeyWordList;
             this.prompt = prompt.Msg;
             this.InitHandleInput(prompt);
             //初始化键盘输入

src/Editor/MouseControls.ts

@@ -8,6 +8,7 @@ import { Editor } from './Editor';
 
 export class MouseControls
 {
+    m_CurMousePointClient: Vector3 = new Vector3();
     //当前鼠标的位置 屏幕
     m_CurMousePointVCS: Vector3 = new Vector3();
     //世界坐标系
@@ -56,6 +57,7 @@ export class MouseControls
     }
     updateWordPoint = (e: MouseEvent) =>
     {
+        this.m_CurMousePointClient.set(e.clientX, e.clientY, 0);
         this.m_CurMousePointVCS.set(e.offsetX, e.offsetY, 0);
         this.m_CurMousePointWCS.copy(this.m_CurMousePointVCS);
         this.viewer.ScreenToWorld(this.m_CurMousePointWCS);

src/UI/Components/ContextMenu/KeyWordContextMenu.tsx

@@ -28,7 +28,7 @@ export class KeyWordContextMenu extends React.Component<{ keywordStore?: GetKeyW
                     {
                         minWidth: "100px",
                         display: store.IsReady ? "block" : "none",
-                        position: "fixed",
+                        position: "absolute",
                         left: `${store.mousePositionX}px`,
                         top: `${store.mousePositionY}px`,
                         cursor: "default",

src/UI/DynamicPrompt/DynamicInputManage.ts

@@ -23,7 +23,7 @@ export class DynamicInputManage
 
         this.container = document.createElement("div");
         this.container.style.pointerEvents = "none";
-        this.container.style.position = "fixed";
+        this.container.style.position = "absolute";
         this.container.style.zIndex = "10";
         this.container.style.width = "100%";
         this.container.style.height = "100%";
@@ -32,7 +32,7 @@ export class DynamicInputManage
         this.container.addEventListener("mousedown", () => { this.IsInputing = false });
 
 
-        document.body.appendChild(this.container);
+        document.getElementById("Webgl").appendChild(this.container);
 
         this.RegisterEvent();
 

src/UI/DynamicPrompt/PromptBlock.ts

@@ -1,7 +1,9 @@
 import { DynamicInputManage } from './DynamicInputManage';
 import { DynamicInput } from './DynamicInputBase';
 import { Vector3 } from "three";
+import { app } from '../../ApplicationServices/Application';
 
+const MINUS_HEIGHT = 46;
 /**
  * 动态输入的提示块,  包含了提示信息和后续的输入框.
  * 
@@ -21,7 +23,7 @@ export class PromptBlock
         this.dynamicInputManage = dynamicInputManage;
         //容器
         this.promptContainer = document.createElement("div");
-        this.promptContainer.style.position = "fixed";
+        this.promptContainer.style.position = "absolute";
         this.promptContainer.style.fontSize = "15px";
         //提示
         this.promptEl = document.createElement('label');
@@ -54,10 +56,14 @@ export class PromptBlock
         if (this.dynamicInputManage.IsInputing) return;
         //设置 promptEl 的位置.
         let promptElX = mousePos.x + 20;
-        let promptElY = mousePos.y + 90;
+        let promptElY = mousePos.y + 20;
+
+        if (promptElY > app.m_Viewer.Height - MINUS_HEIGHT)
+            this.promptContainer.style.top = mousePos.y - 40 + "px";
+        else
+            this.promptContainer.style.top = promptElY + "px";
 
         this.promptContainer.style.left = promptElX + "px";
-        this.promptContainer.style.top = promptElY + "px";
 
         this.dynamicInputManage.Focus();
     }