!93 优化模态框管理

pull/93/MERGE
ChenX 6 years ago
commit 42faf4229f

@ -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);
}
}
}

@ -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)
{

@ -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;
}
}
}
}
//构建收口条,更新总空间

@ -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;
}
}

@ -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);

@ -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();
}
}
}

@ -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

@ -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 [];

@ -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);
}
}

@ -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 });
}

@ -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 });
}

@ -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();
}));
}

@ -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>

@ -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()
{

@ -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

@ -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">

@ -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;

@ -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(
<BoardModal type={type} store={store} />,
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(<Component {...props} />, 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(<Component store={store} />, 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(<LightModal
selectedObj={this.m_SelectedObj}
clear={this.Clear}
update={this.UpdateView} />)
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;
}
}

@ -1,15 +1,6 @@
import { BoardType } from "../../DatabaseServices/Board";
/**
*
* @export
* @enum {number}
*/
export enum ModalState
{
Ok = 1,
Cancel = -1
}
/**
*
*

@ -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<number>((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",

Loading…
Cancel
Save