!93 优化模态框管理

src/Add-on/DrawBoard/DrawBoardServer.ts

@@ -0,0 +1,23 @@
+import { app } from "../../ApplicationServices/Application";
+import { commandMachine } from "../../Editor/CommandMachine";
+
+export class DrawBoardServer
+{
+    static m_DrawMap: Map<string, Function> = new Map();
+    static AddDrawBoardCmd(type, Callback)
+    {
+        if (!this.m_DrawMap.has(type))
+            this.m_DrawMap.set(type, Callback);
+    }
+    static async ExecDrawBoardCmd(type)
+    {
+        if (this.m_DrawMap.has(type))
+        {
+            app.m_Editor.m_CommandStore.isCmdIng = true;
+            app.m_Database.hm.StartCmd(type);
+            await this.m_DrawMap.get(type)();
+            commandMachine.CommandEnd(type);
+        }
+    }
+
+}

src/Add-on/DrawBoard/DrawBoardTool.ts

@@ -10,8 +10,9 @@ import { Box3Ext } from '../../Geometry/Box';
 import { equaln } from '../../Geometry/GeUtils';
 import { GeneralSpaceParse, GeneralSpaceParse2 } from '../../Geometry/SpaceParse/GeneralSpaceParse';
 import { PointPickSpaceParse } from '../../Geometry/SpaceParse/PointPickSpaceParse';
-import { BoardModalType } from '../../UI/Components/Board/BoardModal';
+import { BoardModal, BoardModalType } from '../../UI/Components/Board/BoardModal';
-import { BoardOption, ModalState } from '../../UI/Store/BoardInterface';
+import { ModalPosition } from '../../UI/Components/Modal/ModalsManage';
+import { BoardOption } from '../../UI/Store/BoardInterface';
 import { BehindBoardStore, BoardStore, LayerBoardStore, VerticalBoardStore } from '../../UI/Store/BoardStore';
 
 export abstract class DrawBoardTool implements Command
@@ -20,10 +21,6 @@ export abstract class DrawBoardTool implements Command
     protected drawType = BoardType.Layer;
     async exec()
     {
-        //原来禁用捕捉开启状态
-        let oldSnapState = app.m_Editor.m_GetpointServices.snapServices.m_Disabled;
-        app.m_Editor.m_GetpointServices.snapServices.m_Disabled = true;
-
         let store: LayerBoardStore | VerticalBoardStore | BehindBoardStore;
         let modalType: BoardModalType;
         switch (this.drawType)
@@ -41,20 +38,18 @@ export abstract class DrawBoardTool implements Command
                 modalType = BoardModalType.Be;
 
         }
-        app.m_Editor.m_ModalManage.RenderBoardModal(store, modalType);
+        app.m_Editor.m_ModalManage.RenderModeless(BoardModal, ModalPosition.Center, { store, type: modalType });
-
-        let state = await store.GetBoardOption();
-
-        if (state !== ModalState.Ok)
-            return;
 
+        app.m_Editor.m_ModalManage.Callback = async () =>
+        {
             await this.SelectPoint(store, modalType)
-
+        }
-        //恢复原先状态
-        app.m_Editor.m_GetpointServices.snapServices.m_Disabled = oldSnapState;
     }
     private async SelectPoint(store: BoardStore, type: BoardModalType)
     {
+        //原来禁用捕捉开启状态
+        let oldSnapState = app.m_Editor.m_GetpointServices.snapServices.m_Disabled;
+        app.m_Editor.m_GetpointServices.snapServices.m_Disabled = true;
         // 板件数据
         let opt = store.m_BoardOption;
 
@@ -140,11 +135,13 @@ export abstract class DrawBoardTool implements Command
             }
             else if (ptRes.Status === PromptStatus.None)
             {
-                app.m_Editor.m_ModalManage.RenderBoardModal(store, type);
+                app.m_Editor.m_ModalManage.RenderModeless(BoardModal, ModalPosition.Center, { store, type });
-                let state = await store.GetBoardOption();
+
-                if (state !== ModalState.Ok) break;
+                break;
             } else break;
         }
+        //恢复原先状态
+        app.m_Editor.m_GetpointServices.snapServices.m_Disabled = oldSnapState;
     }
     private async SelectBoxes(opt: BoardOption)
     {

src/Add-on/DrawBoard/DrawClosingStrip.ts

@@ -6,10 +6,11 @@ import { PromptStatus } from '../../Editor/PromptResult';
 import { Box3Ext } from '../../Geometry/Box';
 import { MoveMatrix } from '../../Geometry/GeUtils';
 import { SpaceParse } from '../../Geometry/SpaceParse/SpaceParse';
-import { BoardModalType } from '../../UI/Components/Board/BoardModal';
+import { BoardModalType, BoardModal } from '../../UI/Components/Board/BoardModal';
-import { BrRelativePos, ClosingStripOption, ModalState, StripType } from '../../UI/Store/BoardInterface';
+import { BrRelativePos, ClosingStripOption, StripType } from '../../UI/Store/BoardInterface';
 import { ClosingStripStore } from '../../UI/Store/BoardStore';
 import { Singleton } from '../../Common/Singleton';
+import { ModalPosition, ModalState } from '../../UI/Components/Modal/ModalsManage';
 
 export class DrawClosingStrip implements Command
 {
@@ -25,8 +26,9 @@ export class DrawClosingStrip implements Command
         if (boardCus.length > 0) 
         {
             let store = Singleton.GetInstance(ClosingStripStore);
-            app.m_Editor.m_ModalManage.RenderBoardModal(store, BoardModalType.Skt);
+            app.m_Editor.m_ModalManage.RenderModal(BoardModal, ModalPosition.Center, { store, type: BoardModalType.Skt });
-            let state = await store.GetBoardOption();
+
+            let state = await app.m_Editor.m_ModalManage.Wait();
 
             if (state !== ModalState.Ok) return;
 
@@ -34,13 +36,16 @@ export class DrawClosingStrip implements Command
             spaceParse.ParseTotalSpace();
             let rot = new Matrix4().extractRotation(spaceParse.SpaceOCS);
             let totalSpace = spaceParse.TotalSpace;
-            while (state == ModalState.Ok)
+            while (true)
             {
                 let opt = store.m_BoardOption;
                 this.buildClosingStrip(totalSpace, opt, rot);
-                state = await store.GetBoardOption();
+                state = await app.m_Editor.m_ModalManage.Wait();
+                if (state !== ModalState.Ok)
+                {
+                    break;
+                }
             }
-
         }
     }
     //构建收口条,更新总空间

src/Add-on/DrawBoard/DrawDoor.ts

@@ -2,16 +2,17 @@ import { Command } from "../../Editor/CommandMachine";
 import { app } from "../../ApplicationServices/Application";
 import { DoorModal } from "../../UI/Components/Board/DoorModal";
 import { DoorStore } from "../../UI/Store/BoardStore";
-import { ModalState } from "../../UI/Store/BoardInterface";
 import { Singleton } from "../../Common/Singleton";
+import { ModalPosition, ModalState } from "../../UI/Components/Modal/ModalsManage";
 
 export class DrawDoor implements Command
 {
     async exec()
     {
         let store = Singleton.GetInstance(DoorStore)
-        app.m_Editor.m_ModalManage.RenderModal(DoorModal, store);
+        app.m_Editor.m_ModalManage.RenderModeless(DoorModal, ModalPosition.Center, { store });
-        let state = await store.GetBoardOption();
+        let state = await app.m_Editor.m_ModalManage.Wait();
+
         if (state !== ModalState.Ok) return;
     }
 }

src/Add-on/DrawBoard/DrawLeftRightBoard.ts

@@ -1,14 +1,13 @@
 import { Vector3 } from 'three';
-
 import { app } from '../../ApplicationServices/Application';
+import { Singleton } from '../../Common/Singleton';
 import { Board, BoardType } from '../../DatabaseServices/Board';
 import { Command } from '../../Editor/CommandMachine';
 import { PromptStatus } from '../../Editor/PromptResult';
 import { MoveMatrix } from '../../Geometry/GeUtils';
-import { BoardModalType } from '../../UI/Components/Board/BoardModal';
+import { BoardModal, BoardModalType } from '../../UI/Components/Board/BoardModal';
+import { ModalPosition } from '../../UI/Components/Modal/ModalsManage';
 import { SideBoardStore } from '../../UI/Store/BoardStore';
-import { ModalState } from '../../UI/Store/BoardInterface';
-import { Singleton } from '../../Common/Singleton';
 
 
 export class DrawLeftRight implements Command
@@ -17,11 +16,9 @@ export class DrawLeftRight implements Command
     {
         let store = Singleton.GetInstance(SideBoardStore);
 
-        app.m_Editor.m_ModalManage.RenderBoardModal(store, BoardModalType.LR)
+        app.m_Editor.m_ModalManage.RenderModeless(BoardModal, ModalPosition.Center, { store, type: BoardModalType.LR });
-
-        let state = await store.GetBoardOption();
 
-        if (state === ModalState.Ok)
+        app.m_Editor.m_ModalManage.Callback = async () =>
         {
             let data = store.m_BoardOption;
             let lenght = parseFloat(data.height);

src/Add-on/DrawBoard/DrawSingleBoard.ts

@@ -1,22 +1,22 @@
 import { app } from '../../ApplicationServices/Application';
+import { Singleton } from '../../Common/Singleton';
 import { Board } from '../../DatabaseServices/Board';
 import { Command } from '../../Editor/CommandMachine';
 import { PromptStatus } from '../../Editor/PromptResult';
 import { MoveMatrix } from '../../Geometry/GeUtils';
-import { BoardModalType } from '../../UI/Components/Board/BoardModal';
+import { BoardModal, BoardModalType } from '../../UI/Components/Board/BoardModal';
-import { ModalState } from '../../UI/Store/BoardInterface';
+import { ModalPosition } from '../../UI/Components/Modal/ModalsManage';
 import { SingleBoardStore } from '../../UI/Store/BoardStore';
-import { Singleton } from '../../Common/Singleton';
 
 export class DrawSingleBoard implements Command
 {
     async exec()
     {
         let store = Singleton.GetInstance(SingleBoardStore);
-        app.m_Editor.m_ModalManage.RenderBoardModal(store, BoardModalType.Sg);
+        app.m_Editor.m_ModalManage.RenderModeless(BoardModal, ModalPosition.Center, { store, type: BoardModalType.Sg });
-        let state = await store.GetBoardOption();
 
-        if (state !== ModalState.Ok) return;
+        app.m_Editor.m_ModalManage.Callback = async () =>
+        {
             let opt = store.m_BoardOption;
             let board = Board.CreateBoard(parseFloat(opt.height), parseFloat(opt.width), parseFloat(opt.thickness), opt.type);
             app.m_Database.ModelSpace.Append(board);
@@ -35,4 +35,5 @@ export class DrawSingleBoard implements Command
                 board.Erase();
             }
         }
+    }
 }

src/Add-on/DrawBoard/DrawTopBottomBoard.ts

@@ -7,9 +7,10 @@ import { Command } from '../../Editor/CommandMachine';
 import { PromptStatus } from '../../Editor/PromptResult';
 import { MoveMatrix } from '../../Geometry/GeUtils';
 import { SurroundSpaceParse } from '../../Geometry/SpaceParse/SurroundSpaceParse';
-import { BoardModalType } from '../../UI/Components/Board/BoardModal';
+import { BoardModalType, BoardModal } from '../../UI/Components/Board/BoardModal';
-import { ModalState, TBBoardOption } from '../../UI/Store/BoardInterface';
+import { TBBoardOption } from '../../UI/Store/BoardInterface';
 import { TopBottomBoardStore } from '../../UI/Store/BoardStore';
+import { ModalPosition, ModalState } from '../../UI/Components/Modal/ModalsManage';
 
 export class DrawTopBottomBoard implements Command
 {
@@ -32,9 +33,9 @@ export class DrawTopBottomBoard implements Command
             {
                 let store = Singleton.GetInstance(TopBottomBoardStore);
 
-                app.m_Editor.m_ModalManage.RenderBoardModal(store, BoardModalType.TB);
+                app.m_Editor.m_ModalManage.RenderModal(BoardModal, ModalPosition.Center, { store, type: BoardModalType.TB });
 
-                let state = await store.GetBoardOption();
+                let state = await app.m_Editor.m_ModalManage.Wait();
 
                 if (state === ModalState.Ok)
                 {
@@ -43,7 +44,6 @@ export class DrawTopBottomBoard implements Command
 
                     topOpt.isDraw && this.buildTBBoard(spaceParse, topOpt, spaceParse.BaseTopUpPoint, spaceParse.BaseTopDownPoint, true)
                     bottomOpt.isDraw && this.buildTBBoard(spaceParse, bottomOpt, spaceParse.BaseBottomDownPoint, spaceParse.BaseBottomUpPoint);
-
                 }
             }
             else

src/Editor/Editor.ts

@@ -68,9 +68,6 @@ export class Editor
 
     /**
      * 在命令行输出一行提示信息.
-     *
-     * @param {string} msg
-     * @memberof Editor
      */
     Prompt(msg: string)
     {
@@ -90,7 +87,10 @@ export class Editor
     //尝试取消当前的操作
     Canel()
     {
-        this.m_GetpointServices.Canel();
+        [this.m_GetpointServices, this.m_GetDistanceServices, this.m_GetEntitytServices, this.m_SsgetServices, this.m_KeywordsServices].forEach(ser =>
+        {
+            ser.Cancel();
+        })
     }
     GetPoint(prompt?: GetPointPrompt): Promise<PromptPointResult>
     {
@@ -98,12 +98,21 @@ export class Editor
     }
     GetDistance(prompt?: GetDistendPrompt): Promise<PromptDistendResult>
     {
-        return this.m_GetDistanceServices.Doit(prompt);
+        return this.m_GetDistanceServices.Start(prompt);
     }
     GetKeyWords(prompt: GetKeyWordPrommpt): Promise<PromptResult>
     {
         return this.m_KeywordsServices.Start(prompt);
     }
+    GetEntity(prompt?: GetEntityPrompt): Promise<PromptEntityResult>
+    {
+        return this.m_GetEntitytServices.Start(prompt);
+    }
+    async GetSelection(prompt?: GetSelectionPrompt): Promise<PromptSsgetResult>
+    {
+        return this.m_SsgetServices.Start(prompt);
+    }
+
     AddNoSnapEntity(e: Entity)
     {
         this.m_GetpointServices.snapServices.notSnapEntity.add(e);
@@ -121,15 +130,6 @@ export class Editor
     {
         return null;
     }
-
-    GetEntity(prompt?: GetEntityPrompt): Promise<PromptEntityResult>
-    {
-        return this.m_GetEntitytServices.Start(prompt);
-    }
-    async GetSelection(prompt?: GetSelectionPrompt): Promise<PromptSsgetResult>
-    {
-        return this.m_SsgetServices.Start(prompt);
-    }
     SelectWindow(p1: THREE.Vector3, p2: THREE.Vector3): Array<Entity>
     {
         return [];

src/Editor/GetDistanceServices.ts

@@ -7,13 +7,12 @@ import { GetDistancePromptBlock } from '../UI/DynamicPrompt/GetDistancePromptBlo
 import { HandleKeyword, InitKeyWord } from './InitKeyword';
 import { PromptDistendResult, PromptStatus } from './PromptResult';
 
-
 export class GetDistanceServices
 {
     private removeCalls: Function[] = [];
     private promisResolve: (PromptDistendResult) => void;
 
-    Doit(prompt?: GetDistendPrompt): Promise<PromptDistendResult>
+    Start(prompt?: GetDistendPrompt): Promise<PromptDistendResult>
     {
         prompt = prompt || {};
         let dynInput = this.initDynInput(prompt);
@@ -136,11 +135,13 @@ export class GetDistanceServices
     private RestState()
     {
         app.m_Editor.m_InputState &= ~InputState.GetDist;
-
         this.removeCalls.forEach(f => f());
         this.removeCalls.length = 0;
     }
-
+    Cancel()
+    {
+        this._return(undefined);
+    }
     protected _return(v?: number | string)
     {
         if (!this.promisResolve) return;
@@ -165,7 +166,7 @@ export class GetDistanceServices
 
         let promisResFunc = this.promisResolve;
         this.promisResolve = undefined;         //先将回调函数设置为空,避免对GetPoint取消时重复触发本函数
-        app.m_Editor.m_GetpointServices.Canel();//取消掉点选服务.
+        app.m_Editor.m_GetpointServices.Cancel();//取消掉点选服务.
         promisResFunc(res);
     }
 }

src/Editor/GetEntityServices.ts

@@ -108,7 +108,7 @@ export class GetEntityServices implements EditorService
                 {
                     case KeyBoard.Escape:
                         {
-                            this.Canel();
+                            this.Cancel();
                             return true;
                         }
                 }
@@ -116,7 +116,7 @@ export class GetEntityServices implements EditorService
         )
     }
 
-    Canel()
+    Cancel()
     {
         this.Retun({ Status: PromptStatus.Cancel });
     }

src/Editor/GetKeyWordService.tsx

@@ -80,7 +80,7 @@ export class GetKeyWordsServices implements EditorService
             //不能缺少了灵魂,如果没有关键字列表,那么直接返回.
             if (prompt.KeyWordList === undefined || prompt.KeyWordList.length === 0)
             {
-                this.Canel();
+                this.Cancel();
                 return;
             }
             //默认所有的key为大写
@@ -137,7 +137,7 @@ export class GetKeyWordsServices implements EditorService
                     switch (e.keyCode)
                     {
                         case KeyBoard.Escape:
-                            this.Canel();
+                            this.Cancel();
                             return true;
                     }
                 }
@@ -145,7 +145,7 @@ export class GetKeyWordsServices implements EditorService
         )
     }
 
-    Canel()
+    Cancel()
     {
         this._Return({ Status: PromptStatus.Cancel });
     }

src/Editor/GetPointServices.ts

@@ -72,7 +72,7 @@ export class GetPointServices implements EditorService
         });
     }
 
-    Canel()
+    Cancel()
     {
         let v = new PromptPointResult();
         v.Status = PromptStatus.Cancel;
@@ -109,7 +109,7 @@ export class GetPointServices implements EditorService
         this.removeCalls.push(xaop.end(app.m_Editor.m_KeyCtrl, app.m_Editor.m_KeyCtrl.OnKeyDown, (e: KeyboardEvent) =>
         {
             if (e.keyCode == KeyBoard.Escape)
-                this.Canel();
+                this.Cancel();
         }));
     }
 

src/Editor/GetSelectionServices.ts

@@ -16,6 +16,7 @@ export class SsgetServiecs
 {
 
     m_Editor: Editor;
+    IsReady = false;
     constructor(ed: Editor)
     {
         this.m_Editor = ed;
@@ -24,6 +25,7 @@ export class SsgetServiecs
     private promisResolve: (res: PromptSsgetResult) => void;//promis回调
     Start(prompt: GetSelectionPrompt = {}): Promise<PromptSsgetResult>
     {
+        this.IsReady = true;
         return new Promise<PromptSsgetResult>(
             async (res, rej) =>
             {
@@ -46,7 +48,7 @@ export class SsgetServiecs
                     {
                         case PromptStatus.Cancel://取消.(esc)
                             {
-                                this.CanelRetun();
+                                this.Cancel();
                                 return;
                             }
                         case PromptStatus.Other://结束 (右键),或者(空格).  
@@ -85,7 +87,7 @@ export class SsgetServiecs
                                 let isOk = await this.AwaitSelect();
                                 if (!isOk)
                                 {
-                                    this.CanelRetun();
+                                    this.Cancel();
                                     return;
                                 }
                                 else if (prompt.Once)
@@ -110,19 +112,19 @@ export class SsgetServiecs
     }
 
     //返回取消状态
-    private CanelRetun()
+    Cancel()
     {
         this.Return({ Status: PromptStatus.Cancel });
     }
 
     protected Return(res: PromptSsgetResult)
     {
+        this.IsReady = false;
         if (!this.promisResolve) return;
         this.promisResolve(res);
         this.m_Editor.m_SelectCtrl.Cancel();
     }
 
-
     private m_AwaitRemoveCalls: Function[] = [];
     private m_AwaitRes: (state: boolean) => void;
     async AwaitSelect(): Promise<boolean>

src/UI/Components/Board/BoardModal.tsx

@@ -3,7 +3,7 @@ import { inject } from 'mobx-react';
 import * as React from 'react';
 import { KeyBoard } from '../../../Common/KeyEnum';
 import { IndexedDbStore, StoreName } from '../../../IndexedDb/IndexedDbStore';
-import { BoardOption, LayerNailOption, ModalState, TBBoardOption } from '../../Store/BoardInterface';
+import { BoardOption, LayerNailOption, TBBoardOption } from '../../Store/BoardInterface';
 import { BehindBoardStore, BoardStore, ClosingStripStore, LayerBoardStore, SideBoardStore, SingleBoardStore, TopBottomBoardStore, VerticalBoardStore } from '../../Store/BoardStore';
 import { BehindBoardModal } from './BehindBoardModal';
 import { BoardInfo, Notes } from './BoardCommon';
@@ -13,6 +13,9 @@ import { LeftRightBoardModal } from './leftRightBoardModal';
 import { SingleBoardModal } from './SingleBoardModal';
 import { TopBottomBoardModal } from './TopBottomBoardModal';
 import { VerticalBoardModal } from './VerticalBoardModal';
+import * as xaop from 'xaop';
+import { app } from '../../../ApplicationServices/Application';
+import { ModalState } from '../Modal/ModalsManage';
 
 export enum BoardModalType
 {
@@ -56,6 +59,7 @@ export interface configOption
 export class BoardModal extends React.Component<BoardModalProps, BoardModalState>
 {
     m_ModalMap: Map<BoardModalType, any>;
+    private events: Function[] = [];
     constructor(props: BoardModalProps)
     {
         super(props);
@@ -76,6 +80,27 @@ export class BoardModal extends React.Component<BoardModalProps, BoardModalState
         ]);
 
     }
+    registerEvent()
+    {
+        let store = this.props.store;
+        this.events.push(xaop.begin(app.m_Editor.m_ModalManage, app.m_Editor.m_ModalManage.OnKeyDown, (e: KeyboardEvent) =>
+        {
+            if (e.keyCode === KeyBoard.Enter || e.keyCode === KeyBoard.Space)
+            {
+                store.OnOk(ModalState.Ok, this.props.type !== BoardModalType.Skt);
+            }
+            else if (e.keyCode === KeyBoard.Escape)
+            {
+                store.OnOk(ModalState.Cancel);
+            }
+            e.stopPropagation();
+        }))
+    }
+    clearEvent()
+    {
+        this.events.forEach(f => f());
+        this.events.length = 0;
+    }
     //保存配置
     handleSaveConfig = async () =>
     {
@@ -150,9 +175,6 @@ export class BoardModal extends React.Component<BoardModalProps, BoardModalState
 
     async componentWillMount()
     {
-        let modal = document.getElementById("modal");
-
-
         let dbstore = await IndexedDbStore.CADStore();
         let type = this.props.type;
         let brDataMap = await dbstore.Get(StoreName.ConfigData, type) as Map<string, configOption> || new Map();
@@ -169,6 +191,13 @@ export class BoardModal extends React.Component<BoardModalProps, BoardModalState
         {
             this.setState({ configName: confNames[0] });
         }
+
+        //注册事件
+        this.registerEvent();
+    }
+    componentWillUnmount()
+    {
+        this.clearEvent();
     }
     render()
     {

src/UI/Components/Board/DoorModal.tsx

@@ -1,8 +1,8 @@
 import { inject, observer } from 'mobx-react';
 import * as React from 'react';
 import { Button } from '../../../../node_modules/@blueprintjs/core';
-import { ModalState } from '../../Store/BoardInterface';
 import { DoorStore } from '../../Store/BoardStore';
+import { ModalState } from '../Modal/ModalsManage';
 
 @inject("store")
 @observer

src/UI/Components/Modal/LightModal.tsx

@@ -4,11 +4,11 @@ import { Color, Matrix4, Vector3 } from 'three';
 
 import { Entity } from '../../../DatabaseServices/Entity';
 import { PointLight } from '../../../DatabaseServices/PointLight';
+import { app } from '../../../ApplicationServices/Application';
 
 export interface LightModalProps
 {
     selectedObj: Entity;
-    clear: Function,
     update: Function,
 }
 
@@ -118,7 +118,7 @@ export class LightModal extends React.Component<LightModalProps, LightModalState
                         <h4 className="bp3-heading">灯光设置</h4>
                         <button
                             aria-label="Close" className="bp3-dialog-close-button bp3-icon-small-cross"
-                            onClick={() => this.props.clear()}
+                            onClick={() => app.m_Editor.m_ModalManage.Clear()}
                         ></button>
                     </div>
                     <div className="bp3-dialog-body">

src/UI/Components/Modal/Modal.less

@@ -1,8 +1,11 @@
 #modal{
     position: fixed;
+    z-index: 10;
+    outline: none;
 }
 #modal .bp3-dialog{
-    width: auto;
+    margin: 0;
+    width: 100%;    
 }
 #lightModal h5{
     color: #CCCCCC;
@@ -19,27 +22,43 @@
     margin:10px 0;
     text-align: right;
 }
-#modal .bp3-dialog-body .twoCol>label{
+#lightModal .bp3-dialog-body>.twoCol>label{
     display: inline-block;
-    width: 20%;
     vertical-align: super;
     text-align: left;
+    margin-right: 10px;
+    width: 30%;
 }
-#modal .bp3-dialog-body .twoCol>input{
+#lightModal .bp3-dialog-body ul>.twoCol>label{
+    display: inline-block;
     vertical-align: super;
-    width: 75%;
+    text-align: left;
+    margin-right: 10px;
+}
+#lightModal .bp3-dialog-body>.twoCol>input{
+    vertical-align: super;
+    width: 70%;
+}
+#lightModal .bp3-dialog-body>.twoCol ul input{
+    width: 80%;
+}
+#lightModal .bp3-dialog-body>.twoCol{
+    width: 14rem;
+    display: flex;
+}
+#lightModal .bp3-dialog-body .twoCol{
+    display: flex;
 }
-
 #lightModal ul{
     display: inline-block;
     list-style: none;
     padding-left: 0;
-    width: 75%;
+    vertical-align: top;
+    width: 70%;
     margin: 0;
 }
 #lightModal li{
     display: inline-block;
-    width: 33.3333%
 }
 
 // 输入框高度
@@ -53,6 +72,7 @@
 /* 板件input样式调整 */
 #boardModal .bp3-dialog-body .bp3-label{
     line-height: @inputHeight;
+    margin-bottom: 0.5rem;
 }
 #boardModal .bp3-dialog-body .bp3-label>span{
     display: inline-block;
@@ -225,7 +245,7 @@
 //选择材质
 #boardModal{
     .br-mat{
-        margin-bottom: 15px;
+        margin-bottom:0.5rem;
     }
     .br-mat>div>label:last-child{
         margin-bottom: 0;

src/UI/Components/Modal/ModalsManage.tsx

@@ -6,25 +6,61 @@ import { KeyBoard } from '../../../Common/KeyEnum';
 import { Entity } from '../../../DatabaseServices/Entity';
 import { PointLight } from '../../../DatabaseServices/PointLight';
 import { Text } from '../../../DatabaseServices/Text/Text';
+import { commandMachine } from '../../../Editor/CommandMachine';
 import { Editor } from '../../../Editor/Editor';
 import { PointPick } from '../../../Editor/PointPick';
-import { BoardStore } from '../../Store/BoardStore';
-import { BoardModal } from '../Board/BoardModal';
 import { LightModal } from './LightModal';
 import './Modal.less';
 
-
+export enum ModalPosition
+{
+    Center = "center",
+    Right = "right",
+    Left = "left"
+}
+/**
+ *模态框状态
+ * @export
+ * @enum {number}
+ */
+export enum ModalState
+{
+    Ok = 1,
+    Cancel = -1
+}
 export class ModalManage
 {
+    m_PromisRes: (res: number) => void;//promis回调;
     private m_SelectedObj: Entity;
     private m_ModalContainer: HTMLElement;
     private m_ed: Editor;
+    private m_Masking: HTMLElement;
+    Callback: Function = null;
+    private m_IsModal: boolean = false;
     constructor(ed: Editor)
     {
         this.m_ed = ed;
         this.m_ModalContainer = document.createElement("div");
         this.m_ModalContainer.id = "modal";
         this.m_ModalContainer.tabIndex = -1;
+        //蒙版层
+        this.m_Masking = document.createElement("div");
+        this.m_Masking.style.cssText = `
+            display:none;
+            position: fixed;
+            top: 0;
+            left: 0;
+            right:0;
+            bottom:0;
+            height: 100%;
+            width:100%;
+            zIndex:0;
+            background: #000;
+            opacity: 0.3;`;
+        this.m_Masking.tabIndex = -1;
+
+        document.getElementById("Webgl").parentNode.appendChild(this.m_Masking);
+
         document.getElementById("Webgl").parentNode.appendChild(this.m_ModalContainer);
 
         this.RegisterEvent();
@@ -40,15 +76,30 @@ export class ModalManage
             this.m_ModalContainer.focus();
             this.m_ModalContainer.blur();
         });
-        this.m_ModalContainer.onclick = (e: MouseEvent) =>
+        this.m_ModalContainer.addEventListener("click", (e: MouseEvent) =>
         {
             let el = (e.target as HTMLElement);
-            if (el.nodeName !== "INPUT")
+            if (el.nodeName !== "INPUT" && el.nodeName !== "SELECT")
             {
-                this.m_ModalContainer.tabIndex = -1;
                 this.m_ModalContainer.focus();
             }
-        }
+        });
+
+        this.m_ModalContainer.addEventListener('focus', () =>
+        {
+            this.m_Masking.style.display = "block";
+        }, true);
+
+        this.m_ModalContainer.addEventListener('blur', () =>
+        {
+            if (!this.m_IsModal)
+                this.m_Masking.style.display = "none";
+        }, true);
+
+        //捕获蒙版的事件
+        this.m_Masking.addEventListener('keydown', e => e.stopPropagation());
+        this.m_Masking.addEventListener('click', e => e.stopPropagation());
+
         xaop.end(this.m_ed.m_MouseCtrl, this.m_ed.m_MouseCtrl.onDBMouseDown, () =>
         {
             this.OnMouseDbClick()
@@ -60,33 +111,34 @@ export class ModalManage
         {
             this.Clear();
         }
-        else if (e.keyCode === KeyBoard.Enter)
-        {
-            console.log("确认");
-        }
         e.stopPropagation();
     }
-    RenderBoardModal(store: BoardStore, type: string)
+    RenderModeless(Component: any, pos: ModalPosition, props?: any)
     {
-        //命令栏高度
+        this.m_Masking.style.display = "block";
-        let commandHeight = document.getElementsByClassName("lm_item lm_row")[0].clientHeight;
 
-        ReactDOM.render(
+        ReactDOM.render(<Component {...props} />, this.m_ModalContainer);
-            <BoardModal type={type} store={store} />,
+        //设置初始位置
-            this.m_ModalContainer);
+        if (pos === ModalPosition.Right)
+        {
+            this.m_ModalContainer.style.left = window.innerWidth - this.m_ModalContainer.clientWidth + "px";
+            this.m_ModalContainer.style.top = "40px";
+        }
+        else if (pos === ModalPosition.Center)
+        {
+            let commandHeight = document.getElementsByClassName("lm_item lm_row")[0].clientHeight;
             this.m_ModalContainer.style.left = `calc( 50% - ${this.m_ModalContainer.clientWidth / 2}px)`;
-        this.m_ModalContainer.style.top = `calc( 50%  - ${(this.m_ModalContainer.clientHeight + commandHeight - 40) / 2}px)`;
+            this.m_ModalContainer.style.top = `calc( 50%  - ${(this.m_ModalContainer.clientHeight) / 2}px)`;
-        this.m_ModalContainer.style.width = "auto";
+        }
-        this.MoveModal();
 
         this.m_ModalContainer.focus();
+        this.MoveModal();
     }
-    RenderModal(Component: any, store: BoardStore)
+    RenderModal(Component: any, pos: ModalPosition, props?: any)
     {
-        ReactDOM.render(<Component store={store} />, this.m_ModalContainer);
+        this.RenderModeless(Component, pos, props);
-        //设置初始位置
+        this.m_IsModal = true;
-        this.m_ModalContainer.style.right = "0";
+        this.m_Masking.style.zIndex = "2";
-        this.m_ModalContainer.style.top = "40px";
     }
     OnMouseDbClick()
     {
@@ -95,19 +147,30 @@ export class ModalManage
         if (en && en.userData instanceof PointLight)
         {
             this.m_SelectedObj = en.userData as PointLight;
-            this.Render(<LightModal
+
-                selectedObj={this.m_SelectedObj}
+            this.RenderModeless(LightModal, ModalPosition.Right, { selectedObj: this.m_SelectedObj, clear: this.Clear, update: this.UpdateView })
-                clear={this.Clear}
-                update={this.UpdateView} />)
-            this.m_ModalContainer.style.right = "0";
-            this.m_ModalContainer.style.top = "40px";
         }
         else if (en && en.userData instanceof Text)
         {
             en.userData.toggleTextArea();
         }
     }
-
+    async ExecCmd()
+    {
+        if (app.m_Editor.m_CommandStore.isCmdIng)
+        {
+            app.m_Editor.Canel();
+        }
+        app.m_Editor.m_CommandStore.isCmdIng = true;
+        app.m_Database.hm.StartCmd("draw");
+        await this.Callback();
+        commandMachine.CommandEnd("draw");
+        this.Callback = null;
+    }
+    Wait()
+    {
+        return new Promise(res => this.m_PromisRes = res);
+    }
     MoveModal()
     {
         let dragArea = document.querySelector('#modal [data-id=dragArea]') as HTMLElement;
@@ -117,35 +180,37 @@ export class ModalManage
         //鼠标在模态框的位置
         let modalX;
         let modalY;
-        //命令栏高度
-        let commandHeight = document.getElementsByClassName("lm_item lm_row")[0].clientHeight;
-        //底部面板高度
-        let downHeight = document.getElementById("DownPanel").offsetHeight;
-        let topHeight = 40;
 
         dragArea.onmousedown = (e) =>
         {
             //底部边界
-            let maxBottom = window.innerHeight - commandHeight - modal.offsetHeight + downHeight;
+            let maxBottom = window.innerHeight - modal.offsetHeight;
             modalX = e.clientX - modal.offsetLeft;
             modalY = e.clientY - modal.offsetTop;
             modal.style.cursor = "move";
             document.onmousemove = (e) =>
             {
                 let moveX = e.clientX - modalX;
-                if (moveX < 0) moveX = 0;
+                if (moveX < 0)
-                else if
+                    moveX = 0;
-                (moveX > window.innerWidth - modal.offsetWidth) moveX = window.innerWidth - modal.offsetWidth;
+                else if (moveX > window.innerWidth - modal.offsetWidth)
+                    moveX = window.innerWidth - modal.offsetWidth;
 
                 let moveY = e.clientY - modalY;
-                if (moveY < topHeight) moveY = topHeight;
-                else if (moveY > maxBottom) moveY = maxBottom;
 
-                modal.style.left = moveX + "px";
+                if (moveY < 0)
+                    moveY = 0;
+                else if (moveY > maxBottom)
+                    moveY = maxBottom;
+
+                if (moveY > 0)
+                {
                     modal.style.top = moveY + "px";
-                modalX = e.clientX - modal.offsetLeft;
                     modalY = e.clientY - modal.offsetTop;
                 }
+                modal.style.left = moveX + "px";
+                modalX = e.clientX - modal.offsetLeft;
+            }
         }
         document.onmouseup = (e) =>
         {
@@ -157,18 +222,13 @@ export class ModalManage
     {
         app.m_Editor.UpdateScreen();
     }
-    Render(Component: any)
-    {
-        ReactDOM.render(
-            Component,
-            this.m_ModalContainer);
-        this.MoveModal()
-        this.m_ModalContainer.focus();
-    }
     Clear()
     {
         this.m_SelectedObj = null;
         ReactDOM.unmountComponentAtNode(this.m_ModalContainer);
         this.m_ModalContainer.blur();
+        this.m_Masking.style.display = "none";
+        this.m_Masking.style.zIndex = "0";
+        this.m_IsModal = false;
     }
 }

src/UI/Store/BoardInterface.ts

@@ -1,15 +1,6 @@
 import { BoardType } from "../../DatabaseServices/Board";
 
-/**
+
- *模态框状态
- * @export
- * @enum {number}
- */
-export enum ModalState
-{
-    Ok = 1,
-    Cancel = -1
-}
 /**
  *背板靠上还是靠下
  *

src/UI/Store/BoardStore.ts

@@ -1,52 +1,32 @@
 
 import { observable, toJS } from 'mobx';
 import { app } from '../../ApplicationServices/Application';
-import * as xaop from 'xaop';
-import { KeyBoard } from '../../Common/KeyEnum';
-import { ModalState, BoardOption, BehindBoardOption, BehindHeightPositon, BrRelativePos, LayerBoardOption, LayerNailOption, VerticalBoardOption, TBBoardOption, SingleBoardOption, ClosingStripOption, StripType } from './BoardInterface';
 import { BoardType } from '../../DatabaseServices/Board';
 import { configOption } from '../Components/Board/BoardModal';
+import { BehindBoardOption, BehindHeightPositon, BoardOption, BrRelativePos, ClosingStripOption, LayerBoardOption, LayerNailOption, SingleBoardOption, StripType, TBBoardOption, VerticalBoardOption } from './BoardInterface';
+import { ModalState } from '../Components/Modal/ModalsManage';
 
 export class BoardStore
 {
-    protected m_PromisRes: (res: number) => void;//promis回调;
     name: string;
     m_BoardOption: BoardOption;
     title: string;
-    //事件
+    cmdType: string;
-    private events: Function[] = [];
+
-    //是否连续绘制
+    async OnOk(state: number, isClose: boolean = true)
-    registerEvent()
-    {
-        this.events.push(
-            xaop.end(app.m_Editor.m_ModalManage, app.m_Editor.m_ModalManage.OnKeyDown, (e: KeyboardEvent) =>
-            {
-                if (e.keyCode === KeyBoard.Enter || e.keyCode === KeyBoard.Space)
     {
-                    this.OnOk(ModalState.Ok, this.title !== "收口条");
+        isClose && app.m_Editor.m_ModalManage.Clear();
-                }
+        if (app.m_Editor.m_ModalManage.m_PromisRes)
-                else if (e.keyCode === KeyBoard.Escape)
         {
-                    this.OnOk(ModalState.Cancel);
+            app.m_Editor.m_ModalManage.m_PromisRes(state);
-                }
-                e.stopPropagation();
-            })
-        )
         }
-    GetBoardOption()
+        else
         {
-        this.registerEvent();
+            if (state === ModalState.Ok)
-        return new Promise<number>((res) =>
             {
-            this.m_PromisRes = res;
+                await app.m_Editor.m_ModalManage.ExecCmd();
-        });
+            }
         }
-    OnOk(state: number, isClose: boolean = true)
-    {
-        this.events.forEach(f => f())
-        this.events.length = 0;
-        isClose && app.m_Editor.m_ModalManage.Clear();
-        if (this.m_PromisRes) this.m_PromisRes(state);
     }
     SaveConfig()
     {
@@ -69,7 +49,8 @@ export class BoardStore
     }
     static IsVailOption(k: string, v: any)
     {
-        if (typeof v === "string" && k !== "boardPosition" && k !== "boardRelative")
+        if (k === "spliteHeight" || k === "spliteWidth" || k === "spliteThickness") return true;
+        if (typeof v === "string" && k !== "boardPosition" && k !== "boardRelative" && k !== "type")
         {
             if (k === "width" || k === "height" || k === "thickness" || k === "count" || k === "footThickness")
             {
@@ -92,6 +73,7 @@ export class SideBoardStore extends BoardStore
         spaceSize: "836"
     };
     title = "左右侧板";
+    cmdType = "zyc";
 }
 
 export class TopBottomBoardStore extends BoardStore
@@ -119,6 +101,8 @@ export class TopBottomBoardStore extends BoardStore
         footThickness: "18"
     };
     title = "顶底板";
+    cmdType = "dd";
+
     SaveConfig()
     {
         let newConfig: configOption = {};
@@ -148,6 +132,8 @@ export class TopBottomBoardStore extends BoardStore
 export class BehindBoardStore extends BoardStore
 {
     title = "背板";
+    cmdType = "bb";
+
     @observable name = "背板";
     @observable m_BoardOption: BehindBoardOption = {
         leftExt: "0",
@@ -171,6 +157,7 @@ export class BehindBoardStore extends BoardStore
 export class LayerBoardStore extends BoardStore
 {
     title = "层板";
+    cmdType = "cb";
     @observable name = "层板"
     @observable m_BoardOption: LayerBoardOption = {
         frontShrink: "0",
@@ -223,6 +210,8 @@ export class LayerBoardStore extends BoardStore
 export class VerticalBoardStore extends BoardStore
 {
     title = "立板";
+    cmdType = "lb";
+
     @observable name = "立板";
     @observable m_BoardOption: VerticalBoardOption = {
         frontShrink: "0",