diff --git a/src/Add-on/DrawBoard/DrawBoardServer.ts b/src/Add-on/DrawBoard/DrawBoardServer.ts new file mode 100644 index 000000000..6fb8b18dc --- /dev/null +++ b/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 = 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); + } + } + +} diff --git a/src/Add-on/DrawBoard/DrawBoardTool.ts b/src/Add-on/DrawBoard/DrawBoardTool.ts index cffb5064a..219292256 100644 --- a/src/Add-on/DrawBoard/DrawBoardTool.ts +++ b/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 { BoardOption, ModalState } from '../../UI/Store/BoardInterface'; +import { BoardModal, BoardModalType } from '../../UI/Components/Board/BoardModal'; +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); - - let state = await store.GetBoardOption(); + app.m_Editor.m_ModalManage.RenderModeless(BoardModal, ModalPosition.Center, { store, type: modalType }); - if (state !== ModalState.Ok) - return; - - await this.SelectPoint(store, modalType) - - //恢复原先状态 - app.m_Editor.m_GetpointServices.snapServices.m_Disabled = oldSnapState; + app.m_Editor.m_ModalManage.Callback = async () => + { + await this.SelectPoint(store, modalType) + } } 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); - let state = await store.GetBoardOption(); - if (state !== ModalState.Ok) break; + app.m_Editor.m_ModalManage.RenderModeless(BoardModal, ModalPosition.Center, { store, type }); + + break; } else break; } + //恢复原先状态 + app.m_Editor.m_GetpointServices.snapServices.m_Disabled = oldSnapState; } private async SelectBoxes(opt: BoardOption) { diff --git a/src/Add-on/DrawBoard/DrawClosingStrip.ts b/src/Add-on/DrawBoard/DrawClosingStrip.ts index 070881b73..6e60ae240 100644 --- a/src/Add-on/DrawBoard/DrawClosingStrip.ts +++ b/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 { BrRelativePos, ClosingStripOption, ModalState, StripType } from '../../UI/Store/BoardInterface'; +import { BoardModalType, BoardModal } from '../../UI/Components/Board/BoardModal'; +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); - let state = await store.GetBoardOption(); + app.m_Editor.m_ModalManage.RenderModal(BoardModal, ModalPosition.Center, { store, type: BoardModalType.Skt }); + + 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; + } } - } } //构建收口条,更新总空间 diff --git a/src/Add-on/DrawBoard/DrawDoor.ts b/src/Add-on/DrawBoard/DrawDoor.ts index c31ede197..0e70ad51c 100644 --- a/src/Add-on/DrawBoard/DrawDoor.ts +++ b/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); - let state = await store.GetBoardOption(); + app.m_Editor.m_ModalManage.RenderModeless(DoorModal, ModalPosition.Center, { store }); + let state = await app.m_Editor.m_ModalManage.Wait(); + if (state !== ModalState.Ok) return; } } diff --git a/src/Add-on/DrawBoard/DrawLeftRightBoard.ts b/src/Add-on/DrawBoard/DrawLeftRightBoard.ts index 1094cc844..8da25db31 100644 --- a/src/Add-on/DrawBoard/DrawLeftRightBoard.ts +++ b/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) - - let state = await store.GetBoardOption(); + app.m_Editor.m_ModalManage.RenderModeless(BoardModal, ModalPosition.Center, { store, type: BoardModalType.LR }); - if (state === ModalState.Ok) + app.m_Editor.m_ModalManage.Callback = async () => { let data = store.m_BoardOption; let lenght = parseFloat(data.height); diff --git a/src/Add-on/DrawBoard/DrawSingleBoard.ts b/src/Add-on/DrawBoard/DrawSingleBoard.ts index 2af6ccae2..c1add3d2c 100644 --- a/src/Add-on/DrawBoard/DrawSingleBoard.ts +++ b/src/Add-on/DrawBoard/DrawSingleBoard.ts @@ -1,38 +1,39 @@ 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 { ModalState } from '../../UI/Store/BoardInterface'; +import { BoardModal, BoardModalType } from '../../UI/Components/Board/BoardModal'; +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); - let state = await store.GetBoardOption(); + app.m_Editor.m_ModalManage.RenderModeless(BoardModal, ModalPosition.Center, { store, type: BoardModalType.Sg }); - if (state !== ModalState.Ok) return; - 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); + 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); - let ptRes = await app.m_Editor.GetPoint({ - Msg: "选择基点", - Callback: v => + let ptRes = await app.m_Editor.GetPoint({ + Msg: "选择基点", + Callback: v => + { + let oldPt = board.Position; + let vec = v.clone().sub(oldPt); + board.ApplyMatrix(MoveMatrix(vec)); + } + }); + if (ptRes.Status === PromptStatus.Cancel) { - let oldPt = board.Position; - let vec = v.clone().sub(oldPt); - board.ApplyMatrix(MoveMatrix(vec)); + board.Erase(); } - }); - if (ptRes.Status === PromptStatus.Cancel) - { - board.Erase(); } } } diff --git a/src/Add-on/DrawBoard/DrawTopBottomBoard.ts b/src/Add-on/DrawBoard/DrawTopBottomBoard.ts index e1b49e749..c2e9abea7 100644 --- a/src/Add-on/DrawBoard/DrawTopBottomBoard.ts +++ b/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 { ModalState, TBBoardOption } from '../../UI/Store/BoardInterface'; +import { BoardModalType, BoardModal } from '../../UI/Components/Board/BoardModal'; +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 diff --git a/src/Editor/Editor.ts b/src/Editor/Editor.ts index 8ed2ec822..7a12161fd 100644 --- a/src/Editor/Editor.ts +++ b/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 { @@ -98,12 +98,21 @@ export class Editor } GetDistance(prompt?: GetDistendPrompt): Promise { - return this.m_GetDistanceServices.Doit(prompt); + return this.m_GetDistanceServices.Start(prompt); } GetKeyWords(prompt: GetKeyWordPrommpt): Promise { return this.m_KeywordsServices.Start(prompt); } + GetEntity(prompt?: GetEntityPrompt): Promise + { + return this.m_GetEntitytServices.Start(prompt); + } + async GetSelection(prompt?: GetSelectionPrompt): Promise + { + 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 - { - return this.m_GetEntitytServices.Start(prompt); - } - async GetSelection(prompt?: GetSelectionPrompt): Promise - { - return this.m_SsgetServices.Start(prompt); - } SelectWindow(p1: THREE.Vector3, p2: THREE.Vector3): Array { return []; diff --git a/src/Editor/GetDistanceServices.ts b/src/Editor/GetDistanceServices.ts index bc7ba2aa2..2aeb72e7a 100644 --- a/src/Editor/GetDistanceServices.ts +++ b/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 + Start(prompt?: GetDistendPrompt): Promise { 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); } } diff --git a/src/Editor/GetEntityServices.ts b/src/Editor/GetEntityServices.ts index f8ee829d0..1a6fb1982 100644 --- a/src/Editor/GetEntityServices.ts +++ b/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 }); } diff --git a/src/Editor/GetKeyWordService.tsx b/src/Editor/GetKeyWordService.tsx index d22c9cd33..c416a66a7 100644 --- a/src/Editor/GetKeyWordService.tsx +++ b/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 }); } diff --git a/src/Editor/GetPointServices.ts b/src/Editor/GetPointServices.ts index c97d36772..c120da3d2 100644 --- a/src/Editor/GetPointServices.ts +++ b/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(); })); } diff --git a/src/Editor/GetSelectionServices.ts b/src/Editor/GetSelectionServices.ts index 069c075cc..2b3207743 100644 --- a/src/Editor/GetSelectionServices.ts +++ b/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 { + this.IsReady = true; return new Promise( 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 diff --git a/src/UI/Components/Board/BoardModal.tsx b/src/UI/Components/Board/BoardModal.tsx index 66e88c541..24073140f 100644 --- a/src/UI/Components/Board/BoardModal.tsx +++ b/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 { m_ModalMap: Map; + private events: Function[] = []; constructor(props: BoardModalProps) { super(props); @@ -76,6 +80,27 @@ export class BoardModal extends React.Component + { + 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 || new Map(); @@ -169,6 +191,13 @@ export class BoardModal extends React.Component灯光设置
diff --git a/src/UI/Components/Modal/Modal.less b/src/UI/Components/Modal/Modal.less index a3a21b190..e2b2d8c4d 100644 --- a/src/UI/Components/Modal/Modal.less +++ b/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; diff --git a/src/UI/Components/Modal/ModalsManage.tsx b/src/UI/Components/Modal/ModalsManage.tsx index 9c27573ec..6f08305bc 100644 --- a/src/UI/Components/Modal/ModalsManage.tsx +++ b/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) { - //命令栏高度 - let commandHeight = document.getElementsByClassName("lm_item lm_row")[0].clientHeight; - - ReactDOM.render( - , - this.m_ModalContainer); - 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.width = "auto"; - this.MoveModal(); + this.m_Masking.style.display = "block"; + + ReactDOM.render(, 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) / 2}px)`; + } this.m_ModalContainer.focus(); + this.MoveModal(); } - RenderModal(Component: any, store: BoardStore) + RenderModal(Component: any, pos: ModalPosition, props?: any) { - ReactDOM.render(, this.m_ModalContainer); - //设置初始位置 - this.m_ModalContainer.style.right = "0"; - this.m_ModalContainer.style.top = "40px"; + this.RenderModeless(Component, pos, props); + this.m_IsModal = true; + this.m_Masking.style.zIndex = "2"; } OnMouseDbClick() { @@ -95,19 +147,30 @@ export class ModalManage if (en && en.userData instanceof PointLight) { this.m_SelectedObj = en.userData as PointLight; - this.Render() - this.m_ModalContainer.style.right = "0"; - this.m_ModalContainer.style.top = "40px"; + + this.RenderModeless(LightModal, ModalPosition.Right, { selectedObj: this.m_SelectedObj, clear: this.Clear, update: this.UpdateView }) } 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,34 +180,36 @@ 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; - else if - (moveX > window.innerWidth - modal.offsetWidth) moveX = window.innerWidth - modal.offsetWidth; + if (moveX < 0) + moveX = 0; + 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; + if (moveY < 0) + moveY = 0; + else if (moveY > maxBottom) + moveY = maxBottom; + + if (moveY > 0) + { + modal.style.top = moveY + "px"; + modalY = e.clientY - modal.offsetTop; + } modal.style.left = moveX + "px"; - modal.style.top = moveY + "px"; modalX = e.clientX - modal.offsetLeft; - modalY = e.clientY - modal.offsetTop; } } 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; } } diff --git a/src/UI/Store/BoardInterface.ts b/src/UI/Store/BoardInterface.ts index 04a0b9c05..ebb788dc3 100644 --- a/src/UI/Store/BoardInterface.ts +++ b/src/UI/Store/BoardInterface.ts @@ -1,15 +1,6 @@ import { BoardType } from "../../DatabaseServices/Board"; -/** - *模态框状态 - * @export - * @enum {number} - */ -export enum ModalState -{ - Ok = 1, - Cancel = -1 -} + /** *背板靠上还是靠下 * diff --git a/src/UI/Store/BoardStore.ts b/src/UI/Store/BoardStore.ts index d722f0f7e..f16d37258 100644 --- a/src/UI/Store/BoardStore.ts +++ b/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; - //事件 - private events: Function[] = []; - //是否连续绘制 - 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 !== "收口条"); - } - else if (e.keyCode === KeyBoard.Escape) - { - this.OnOk(ModalState.Cancel); - } - e.stopPropagation(); - }) - ) - } - GetBoardOption() - { - this.registerEvent(); - return new Promise((res) => - { - this.m_PromisRes = res; - }); - } - OnOk(state: number, isClose: boolean = true) + cmdType: string; + + async 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); + if (app.m_Editor.m_ModalManage.m_PromisRes) + { + app.m_Editor.m_ModalManage.m_PromisRes(state); + } + else + { + if (state === ModalState.Ok) + { + await app.m_Editor.m_ModalManage.ExecCmd(); + } + } } 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",