|
|
@ -6,25 +6,61 @@ import { KeyBoard } from '../../../Common/KeyEnum';
|
|
|
|
import { Entity } from '../../../DatabaseServices/Entity';
|
|
|
|
import { Entity } from '../../../DatabaseServices/Entity';
|
|
|
|
import { PointLight } from '../../../DatabaseServices/PointLight';
|
|
|
|
import { PointLight } from '../../../DatabaseServices/PointLight';
|
|
|
|
import { Text } from '../../../DatabaseServices/Text/Text';
|
|
|
|
import { Text } from '../../../DatabaseServices/Text/Text';
|
|
|
|
|
|
|
|
import { commandMachine } from '../../../Editor/CommandMachine';
|
|
|
|
import { Editor } from '../../../Editor/Editor';
|
|
|
|
import { Editor } from '../../../Editor/Editor';
|
|
|
|
import { PointPick } from '../../../Editor/PointPick';
|
|
|
|
import { PointPick } from '../../../Editor/PointPick';
|
|
|
|
import { BoardStore } from '../../Store/BoardStore';
|
|
|
|
|
|
|
|
import { BoardModal } from '../Board/BoardModal';
|
|
|
|
|
|
|
|
import { LightModal } from './LightModal';
|
|
|
|
import { LightModal } from './LightModal';
|
|
|
|
import './Modal.less';
|
|
|
|
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
|
|
|
|
export class ModalManage
|
|
|
|
{
|
|
|
|
{
|
|
|
|
|
|
|
|
m_PromisRes: (res: number) => void;//promis回调;
|
|
|
|
private m_SelectedObj: Entity;
|
|
|
|
private m_SelectedObj: Entity;
|
|
|
|
private m_ModalContainer: HTMLElement;
|
|
|
|
private m_ModalContainer: HTMLElement;
|
|
|
|
private m_ed: Editor;
|
|
|
|
private m_ed: Editor;
|
|
|
|
|
|
|
|
private m_Masking: HTMLElement;
|
|
|
|
|
|
|
|
Callback: Function = null;
|
|
|
|
|
|
|
|
private m_IsModal: boolean = false;
|
|
|
|
constructor(ed: Editor)
|
|
|
|
constructor(ed: Editor)
|
|
|
|
{
|
|
|
|
{
|
|
|
|
this.m_ed = ed;
|
|
|
|
this.m_ed = ed;
|
|
|
|
this.m_ModalContainer = document.createElement("div");
|
|
|
|
this.m_ModalContainer = document.createElement("div");
|
|
|
|
this.m_ModalContainer.id = "modal";
|
|
|
|
this.m_ModalContainer.id = "modal";
|
|
|
|
this.m_ModalContainer.tabIndex = -1;
|
|
|
|
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);
|
|
|
|
document.getElementById("Webgl").parentNode.appendChild(this.m_ModalContainer);
|
|
|
|
|
|
|
|
|
|
|
|
this.RegisterEvent();
|
|
|
|
this.RegisterEvent();
|
|
|
@ -40,15 +76,30 @@ export class ModalManage
|
|
|
|
this.m_ModalContainer.focus();
|
|
|
|
this.m_ModalContainer.focus();
|
|
|
|
this.m_ModalContainer.blur();
|
|
|
|
this.m_ModalContainer.blur();
|
|
|
|
});
|
|
|
|
});
|
|
|
|
this.m_ModalContainer.onclick = (e: MouseEvent) =>
|
|
|
|
this.m_ModalContainer.addEventListener("click", (e: MouseEvent) =>
|
|
|
|
{
|
|
|
|
{
|
|
|
|
let el = (e.target as HTMLElement);
|
|
|
|
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.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, () =>
|
|
|
|
xaop.end(this.m_ed.m_MouseCtrl, this.m_ed.m_MouseCtrl.onDBMouseDown, () =>
|
|
|
|
{
|
|
|
|
{
|
|
|
|
this.OnMouseDbClick()
|
|
|
|
this.OnMouseDbClick()
|
|
|
@ -60,33 +111,34 @@ export class ModalManage
|
|
|
|
{
|
|
|
|
{
|
|
|
|
this.Clear();
|
|
|
|
this.Clear();
|
|
|
|
}
|
|
|
|
}
|
|
|
|
else if (e.keyCode === KeyBoard.Enter)
|
|
|
|
|
|
|
|
{
|
|
|
|
|
|
|
|
console.log("确认");
|
|
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
e.stopPropagation();
|
|
|
|
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.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.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()
|
|
|
|
OnMouseDbClick()
|
|
|
|
{
|
|
|
|
{
|
|
|
@ -95,19 +147,30 @@ export class ModalManage
|
|
|
|
if (en && en.userData instanceof PointLight)
|
|
|
|
if (en && en.userData instanceof PointLight)
|
|
|
|
{
|
|
|
|
{
|
|
|
|
this.m_SelectedObj = en.userData as 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)
|
|
|
|
else if (en && en.userData instanceof Text)
|
|
|
|
{
|
|
|
|
{
|
|
|
|
en.userData.toggleTextArea();
|
|
|
|
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()
|
|
|
|
MoveModal()
|
|
|
|
{
|
|
|
|
{
|
|
|
|
let dragArea = document.querySelector('#modal [data-id=dragArea]') as HTMLElement;
|
|
|
|
let dragArea = document.querySelector('#modal [data-id=dragArea]') as HTMLElement;
|
|
|
@ -117,35 +180,37 @@ export class ModalManage
|
|
|
|
//鼠标在模态框的位置
|
|
|
|
//鼠标在模态框的位置
|
|
|
|
let modalX;
|
|
|
|
let modalX;
|
|
|
|
let modalY;
|
|
|
|
let modalY;
|
|
|
|
//命令栏高度
|
|
|
|
|
|
|
|
let commandHeight = document.getElementsByClassName("lm_item lm_row")[0].clientHeight;
|
|
|
|
|
|
|
|
//底部面板高度
|
|
|
|
|
|
|
|
let downHeight = document.getElementById("DownPanel").offsetHeight;
|
|
|
|
|
|
|
|
let topHeight = 40;
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
dragArea.onmousedown = (e) =>
|
|
|
|
dragArea.onmousedown = (e) =>
|
|
|
|
{
|
|
|
|
{
|
|
|
|
//底部边界
|
|
|
|
//底部边界
|
|
|
|
let maxBottom = window.innerHeight - commandHeight - modal.offsetHeight + downHeight;
|
|
|
|
let maxBottom = window.innerHeight - modal.offsetHeight;
|
|
|
|
modalX = e.clientX - modal.offsetLeft;
|
|
|
|
modalX = e.clientX - modal.offsetLeft;
|
|
|
|
modalY = e.clientY - modal.offsetTop;
|
|
|
|
modalY = e.clientY - modal.offsetTop;
|
|
|
|
modal.style.cursor = "move";
|
|
|
|
modal.style.cursor = "move";
|
|
|
|
document.onmousemove = (e) =>
|
|
|
|
document.onmousemove = (e) =>
|
|
|
|
{
|
|
|
|
{
|
|
|
|
let moveX = e.clientX - modalX;
|
|
|
|
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;
|
|
|
|
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";
|
|
|
|
modal.style.top = moveY + "px";
|
|
|
|
modalX = e.clientX - modal.offsetLeft;
|
|
|
|
|
|
|
|
modalY = e.clientY - modal.offsetTop;
|
|
|
|
modalY = e.clientY - modal.offsetTop;
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
modal.style.left = moveX + "px";
|
|
|
|
|
|
|
|
modalX = e.clientX - modal.offsetLeft;
|
|
|
|
|
|
|
|
}
|
|
|
|
}
|
|
|
|
}
|
|
|
|
document.onmouseup = (e) =>
|
|
|
|
document.onmouseup = (e) =>
|
|
|
|
{
|
|
|
|
{
|
|
|
@ -157,18 +222,13 @@ export class ModalManage
|
|
|
|
{
|
|
|
|
{
|
|
|
|
app.m_Editor.UpdateScreen();
|
|
|
|
app.m_Editor.UpdateScreen();
|
|
|
|
}
|
|
|
|
}
|
|
|
|
Render(Component: any)
|
|
|
|
|
|
|
|
{
|
|
|
|
|
|
|
|
ReactDOM.render(
|
|
|
|
|
|
|
|
Component,
|
|
|
|
|
|
|
|
this.m_ModalContainer);
|
|
|
|
|
|
|
|
this.MoveModal()
|
|
|
|
|
|
|
|
this.m_ModalContainer.focus();
|
|
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
Clear()
|
|
|
|
Clear()
|
|
|
|
{
|
|
|
|
{
|
|
|
|
this.m_SelectedObj = null;
|
|
|
|
this.m_SelectedObj = null;
|
|
|
|
ReactDOM.unmountComponentAtNode(this.m_ModalContainer);
|
|
|
|
ReactDOM.unmountComponentAtNode(this.m_ModalContainer);
|
|
|
|
this.m_ModalContainer.blur();
|
|
|
|
this.m_ModalContainer.blur();
|
|
|
|
|
|
|
|
this.m_Masking.style.display = "none";
|
|
|
|
|
|
|
|
this.m_Masking.style.zIndex = "0";
|
|
|
|
|
|
|
|
this.m_IsModal = false;
|
|
|
|
}
|
|
|
|
}
|
|
|
|
}
|
|
|
|
}
|
|
|
|