mirror of https://gitee.com/cf-fz/WebCAD.git
!2337 新增:吊顶新增可设置高度、增加线条偏移距离、支持非闭合线条
ChenX
parent
efdc70f1ec
commit
cbabf6989e
@ -0,0 +1,146 @@
|
|||||||
|
import { observable } from "mobx";
|
||||||
|
import { observer } from "mobx-react";
|
||||||
|
import React from "react";
|
||||||
|
import ReactDOM from "react-dom";
|
||||||
|
import { begin } from "xaop";
|
||||||
|
import { app } from "../../../../ApplicationServices/Application";
|
||||||
|
import { KeyBoard } from "../../../../Common/KeyEnum";
|
||||||
|
import { DirectoryId } from "../../../../Common/Request";
|
||||||
|
import { BulkheadCeiling } from "../../../../DatabaseServices/Room/Entity/Ceiling/BulkheadCeiling";
|
||||||
|
import { TEMPLATE_SELECT_ID } from "../../../../DatabaseServices/Room/Entity/Wall/Hole/Window/DrawWindowPanel";
|
||||||
|
import { GetCeilingContourDate, HeadCeilingInfoStore } from "../../../Store/HeadCeilingStore/HeadCeilingInfoStore";
|
||||||
|
import { ModalState } from "../../Modal/ModalInterface";
|
||||||
|
import { OnlySelectPanelStore } from "../../OnlySelectManage/OnlySelectPanelStore";
|
||||||
|
import { OnlySelectManagePanel } from "../../OnlySelectManage/SelectManagePanel";
|
||||||
|
import { CeilingInfoModifyParam } from "./CeilingInfoModifyParam";
|
||||||
|
|
||||||
|
enum Display
|
||||||
|
{
|
||||||
|
Block = "block",
|
||||||
|
None = "none",
|
||||||
|
}
|
||||||
|
|
||||||
|
interface CeilingInfoModifyPanelProp
|
||||||
|
{
|
||||||
|
headCeilingEnt: BulkheadCeiling;
|
||||||
|
headCeilingInfoStore: HeadCeilingInfoStore;
|
||||||
|
}
|
||||||
|
|
||||||
|
@observer
|
||||||
|
export class CeilingInfoModifyPanel extends React.Component<CeilingInfoModifyPanelProp, {}>
|
||||||
|
{
|
||||||
|
@observable _Display = Display.None;
|
||||||
|
_Event: Function;
|
||||||
|
_CameraStateContainer: HTMLElement;
|
||||||
|
_SelectStore: OnlySelectPanelStore = OnlySelectPanelStore.GetSingleInstance(); //独立的材质选择Store
|
||||||
|
|
||||||
|
|
||||||
|
constructor(props)
|
||||||
|
{
|
||||||
|
super(props);
|
||||||
|
|
||||||
|
this.props.headCeilingInfoStore.InitItemsForBulkheadCeiling(this.props.headCeilingEnt);
|
||||||
|
|
||||||
|
//选择材质的UI放在 #modal 里有效居中
|
||||||
|
this._CameraStateContainer = document.createElement('div');
|
||||||
|
this._CameraStateContainer.id = TEMPLATE_SELECT_ID;
|
||||||
|
this._CameraStateContainer.style.zIndex = "35";
|
||||||
|
document.getElementById('modal').appendChild(this._CameraStateContainer);
|
||||||
|
|
||||||
|
if (window.screen.width <= 1450)
|
||||||
|
this._CameraStateContainer.style.left = '120px';
|
||||||
|
else
|
||||||
|
this._CameraStateContainer.style.left = `calc(50vw - 500px)`;
|
||||||
|
|
||||||
|
if (window.screen.height <= 750)
|
||||||
|
this._CameraStateContainer.style.top = `0px`;
|
||||||
|
else
|
||||||
|
this._CameraStateContainer.style.top = `calc(50vh - 395px)`;
|
||||||
|
|
||||||
|
this._CameraStateContainer.style.display = Display.None;
|
||||||
|
|
||||||
|
ReactDOM.render(<OnlySelectManagePanel
|
||||||
|
selectStore={this._SelectStore}
|
||||||
|
directoryId={DirectoryId.CeilingContour}
|
||||||
|
setDisplay={this._OpenSelectTemplate}
|
||||||
|
dispaly={this._Display}
|
||||||
|
return={this._Return}
|
||||||
|
/>, this._CameraStateContainer);
|
||||||
|
}
|
||||||
|
|
||||||
|
componentDidMount()
|
||||||
|
{
|
||||||
|
this._Event = begin(app.Editor.ModalManage, app.Editor.ModalManage.OnKeyDown, (e: KeyboardEvent) =>
|
||||||
|
{
|
||||||
|
if (e.keyCode === KeyBoard.Escape)
|
||||||
|
{
|
||||||
|
if (this._CameraStateContainer.style.display === Display.Block)
|
||||||
|
{
|
||||||
|
this._OpenSelectTemplate(Display.None);
|
||||||
|
e.preventDefault();
|
||||||
|
e.stopPropagation();
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
componentWillUnmount()
|
||||||
|
{
|
||||||
|
this._Event();
|
||||||
|
this._Event = null;
|
||||||
|
document.getElementById('modal').removeChild(this._CameraStateContainer);
|
||||||
|
this._CameraStateContainer = undefined;
|
||||||
|
}
|
||||||
|
|
||||||
|
_Return = async (status: ModalState) =>
|
||||||
|
{
|
||||||
|
if (status === ModalState.Ok)
|
||||||
|
{
|
||||||
|
let contour_id = "";
|
||||||
|
this._SelectStore.currentSelectId.forEach((e) => { contour_id = e; });
|
||||||
|
|
||||||
|
let item = this.props.headCeilingInfoStore.m_Option.Item[this._SelectStore.itemIndex];
|
||||||
|
|
||||||
|
if (contour_id)
|
||||||
|
{
|
||||||
|
let data = await GetCeilingContourDate(contour_id);
|
||||||
|
if (data)
|
||||||
|
{
|
||||||
|
item.example.id = parseInt(contour_id);
|
||||||
|
item.example.name = data.toplines.name;
|
||||||
|
item.example.logo = data.toplines.logo;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
else
|
||||||
|
{
|
||||||
|
item.example.id = 0;
|
||||||
|
item.example.name = "";
|
||||||
|
item.example.logo = "";
|
||||||
|
}
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
//开关选择材质的面板
|
||||||
|
_OpenSelectTemplate = (style: Display) =>
|
||||||
|
{
|
||||||
|
if (style === Display.Block)
|
||||||
|
{
|
||||||
|
this._SelectStore.Clear();
|
||||||
|
app.Editor.ModalManage.stopKeyDownEvent = true;
|
||||||
|
}
|
||||||
|
this._CameraStateContainer.style.display = style;
|
||||||
|
this._Display = style;
|
||||||
|
};
|
||||||
|
|
||||||
|
render()
|
||||||
|
{
|
||||||
|
return (
|
||||||
|
<CeilingInfoModifyParam
|
||||||
|
store={this.props.headCeilingInfoStore}
|
||||||
|
openSelectTemplate={this._OpenSelectTemplate}
|
||||||
|
selectStore={this._SelectStore}
|
||||||
|
/>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
}
|
||||||
@ -0,0 +1,60 @@
|
|||||||
|
import { Label } from "@blueprintjs/core";
|
||||||
|
import { observer } from "mobx-react";
|
||||||
|
import React from "react";
|
||||||
|
import { HeadCeilingInfoStore } from "../../../Store/HeadCeilingStore/HeadCeilingInfoStore";
|
||||||
|
import { HeadCeilingProfileMaterialStore } from "../../../Store/HeadCeilingStore/HeadCeilingMaterialStore";
|
||||||
|
import { Display } from "../../../Store/OptionInterface/BulkheadCeilingOption";
|
||||||
|
import { BoardModalType } from "../../Board/BoardModalType";
|
||||||
|
import { HeadCeilingInfoItem } from "../../HeadCeiling/HeadCeilingInfoItem";
|
||||||
|
import { OnlySelectPanelStore } from "../../OnlySelectManage/OnlySelectPanelStore";
|
||||||
|
|
||||||
|
interface ItemPorps
|
||||||
|
{
|
||||||
|
store: HeadCeilingInfoStore | HeadCeilingProfileMaterialStore;
|
||||||
|
openSelectTemplate: (display: Display) => void;
|
||||||
|
selectStore: OnlySelectPanelStore;
|
||||||
|
configType?: BoardModalType;
|
||||||
|
}
|
||||||
|
|
||||||
|
@observer
|
||||||
|
export class CeilingInfoModifyParam extends React.Component<ItemPorps, {}>
|
||||||
|
{
|
||||||
|
render()
|
||||||
|
{
|
||||||
|
const { store } = this.props;
|
||||||
|
const isHeadCeilingInfo = store instanceof HeadCeilingInfoStore;
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div>
|
||||||
|
<ul>
|
||||||
|
<li className="firstLi">
|
||||||
|
<Label>颜色</Label>
|
||||||
|
<Label>洞/岛</Label>
|
||||||
|
{
|
||||||
|
isHeadCeilingInfo ?
|
||||||
|
<Label>截面轮廓</Label>
|
||||||
|
:
|
||||||
|
<Label>截面材质</Label>
|
||||||
|
}
|
||||||
|
{
|
||||||
|
isHeadCeilingInfo &&
|
||||||
|
<Label>上下偏移</Label>
|
||||||
|
}
|
||||||
|
</li>
|
||||||
|
{
|
||||||
|
store.m_Option.Item.map((item, index) =>
|
||||||
|
{
|
||||||
|
return <HeadCeilingInfoItem
|
||||||
|
item={item}
|
||||||
|
display={this.props.openSelectTemplate}
|
||||||
|
itemIndex={index}
|
||||||
|
selectStore={this.props.selectStore}
|
||||||
|
configType={this.props.configType}
|
||||||
|
/>;
|
||||||
|
})
|
||||||
|
}
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
}
|
||||||
Loading…
Reference in new issue