|
|
|
@ -1,16 +1,7 @@
|
|
|
|
import { Button, Dialog } from '@blueprintjs/core';
|
|
|
|
import { Button, InputGroup, Menu, MenuItem, Popover } from '@blueprintjs/core';
|
|
|
|
import * as React from 'react';
|
|
|
|
import * as React from 'react';
|
|
|
|
|
|
|
|
import { IndexedDbStore, StoreName } from '../../../IndexedDb/IndexedDbStore';
|
|
|
|
import
|
|
|
|
import { BehindBoardStore, BoardStore, LayerBoardStore, ModalState, SideBoardStore, TopBottomBoardStore, VerticalBoardStore } from '../../Store/BoardStore';
|
|
|
|
{
|
|
|
|
|
|
|
|
BehindBoardStore,
|
|
|
|
|
|
|
|
BoardStore,
|
|
|
|
|
|
|
|
LayerBoardStore,
|
|
|
|
|
|
|
|
ModalState,
|
|
|
|
|
|
|
|
SideBoardStore,
|
|
|
|
|
|
|
|
TopBottomBoardStore,
|
|
|
|
|
|
|
|
VerticalBoardStore,
|
|
|
|
|
|
|
|
} from '../../Store/BoardStore';
|
|
|
|
|
|
|
|
import { BehindBoardModal } from './BehindBoardModal';
|
|
|
|
import { BehindBoardModal } from './BehindBoardModal';
|
|
|
|
import { LayerBoardModal } from './LayerBoardModal';
|
|
|
|
import { LayerBoardModal } from './LayerBoardModal';
|
|
|
|
import { LeftRightBoardModal } from './leftRightBoardModal';
|
|
|
|
import { LeftRightBoardModal } from './leftRightBoardModal';
|
|
|
|
@ -19,11 +10,11 @@ import { VerticalBoardModal } from './VerticalBoardModal';
|
|
|
|
|
|
|
|
|
|
|
|
export enum BoardModalType
|
|
|
|
export enum BoardModalType
|
|
|
|
{
|
|
|
|
{
|
|
|
|
LR = "lr",
|
|
|
|
LR = "lr",//左右侧板
|
|
|
|
TB = "tb",
|
|
|
|
TB = "tb",//顶底板
|
|
|
|
Be = "be",
|
|
|
|
Be = "be",//背板
|
|
|
|
Ly = "ly",
|
|
|
|
Ly = "ly",//层板
|
|
|
|
Ve = "ve"
|
|
|
|
Ve = "ve"//立板
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
interface BoardModalProps
|
|
|
|
interface BoardModalProps
|
|
|
|
@ -31,6 +22,17 @@ interface BoardModalProps
|
|
|
|
type: string,
|
|
|
|
type: string,
|
|
|
|
store: BoardStore
|
|
|
|
store: BoardStore
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
interface BoardModalState
|
|
|
|
|
|
|
|
{
|
|
|
|
|
|
|
|
configName: string,
|
|
|
|
|
|
|
|
configs: Map<string, any>
|
|
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
interface configOption
|
|
|
|
|
|
|
|
{
|
|
|
|
|
|
|
|
boardData: any,
|
|
|
|
|
|
|
|
nailData?: any
|
|
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
/**
|
|
|
|
/**
|
|
|
|
*板件模态框父组件
|
|
|
|
*板件模态框父组件
|
|
|
|
@ -38,84 +40,213 @@ interface BoardModalProps
|
|
|
|
* @param {BoardModalProps} props
|
|
|
|
* @param {BoardModalProps} props
|
|
|
|
* @returns
|
|
|
|
* @returns
|
|
|
|
*/
|
|
|
|
*/
|
|
|
|
export const BoardModal = (props: BoardModalProps) =>
|
|
|
|
export class BoardModal extends React.Component<BoardModalProps, BoardModalState>
|
|
|
|
{
|
|
|
|
{
|
|
|
|
let configs = new Map([["lr", []]]);
|
|
|
|
allConfigs: Map<string, Map<string, configOption>[]> = new Map();
|
|
|
|
|
|
|
|
m_ModalMap: Map<BoardModalType, any>;
|
|
|
|
|
|
|
|
constructor(props: BoardModalProps)
|
|
|
|
|
|
|
|
{
|
|
|
|
|
|
|
|
super(props);
|
|
|
|
|
|
|
|
let store = this.props.store;
|
|
|
|
|
|
|
|
this.m_ModalMap = new Map([
|
|
|
|
|
|
|
|
[BoardModalType.LR, <LeftRightBoardModal store={store as SideBoardStore} />],
|
|
|
|
|
|
|
|
[BoardModalType.TB, <TopBottomBoardModal store={store as TopBottomBoardStore} />],
|
|
|
|
|
|
|
|
[BoardModalType.Be, <BehindBoardModal store={store as BehindBoardStore} />],
|
|
|
|
|
|
|
|
[BoardModalType.Ly, <LayerBoardModal store={store as LayerBoardStore} />],
|
|
|
|
|
|
|
|
[BoardModalType.Ve, <VerticalBoardModal store={store as VerticalBoardStore} />],
|
|
|
|
|
|
|
|
])
|
|
|
|
|
|
|
|
this.state = {
|
|
|
|
|
|
|
|
configName: "默认",
|
|
|
|
|
|
|
|
configs: new Map()
|
|
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
//保存配置
|
|
|
|
|
|
|
|
handleSaveConfig = async () =>
|
|
|
|
|
|
|
|
{
|
|
|
|
|
|
|
|
let name = this.state.configName;
|
|
|
|
|
|
|
|
let dbstore = await IndexedDbStore.CADStore();
|
|
|
|
|
|
|
|
let brStore = this.props.store;
|
|
|
|
|
|
|
|
let type = this.props.type;
|
|
|
|
|
|
|
|
|
|
|
|
let store = props.store;
|
|
|
|
//新的配置
|
|
|
|
//模态框字典
|
|
|
|
let newConfig: configOption = {
|
|
|
|
const m_ModalMap = new Map([
|
|
|
|
boardData: brStore.m_BoardOption
|
|
|
|
[BoardModalType.LR, <LeftRightBoardModal store={store as SideBoardStore} />],
|
|
|
|
}
|
|
|
|
[BoardModalType.TB, <TopBottomBoardModal store={store as TopBottomBoardStore} />],
|
|
|
|
if (type === BoardModalType.Ly)
|
|
|
|
[BoardModalType.Be, <BehindBoardModal store={store as BehindBoardStore} />],
|
|
|
|
{
|
|
|
|
[BoardModalType.Ly, <LayerBoardModal store={store as LayerBoardStore} />],
|
|
|
|
newConfig.nailData = (brStore as LayerBoardStore).layerNailOption;
|
|
|
|
[BoardModalType.Ve, <VerticalBoardModal store={store as VerticalBoardStore} />],
|
|
|
|
}
|
|
|
|
])
|
|
|
|
|
|
|
|
return (
|
|
|
|
|
|
|
|
<div
|
|
|
|
|
|
|
|
className="pt-dialog-container"
|
|
|
|
|
|
|
|
id="boardModal"
|
|
|
|
|
|
|
|
onKeyDown={(e) => e.stopPropagation()} >
|
|
|
|
|
|
|
|
<div className="pt-dialog">
|
|
|
|
|
|
|
|
<div
|
|
|
|
|
|
|
|
className="pt-dialog-header"
|
|
|
|
|
|
|
|
data-id="dragArea"
|
|
|
|
|
|
|
|
>
|
|
|
|
|
|
|
|
<span className="pt-icon-large pt-icon-column-layout"></span>
|
|
|
|
|
|
|
|
<h5 className="pt-dialog-header-title">{store.title}</h5>
|
|
|
|
|
|
|
|
<button
|
|
|
|
|
|
|
|
aria-label="Close" className="pt-dialog-close-button pt-icon-small-cross"
|
|
|
|
|
|
|
|
onClick={() => store.OnOk(ModalState.Cancel)}
|
|
|
|
|
|
|
|
></button>
|
|
|
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
<div
|
|
|
|
|
|
|
|
className="pt-dialog-body"
|
|
|
|
|
|
|
|
onKeyDown={e =>
|
|
|
|
|
|
|
|
{
|
|
|
|
|
|
|
|
e.stopPropagation();
|
|
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
}>
|
|
|
|
|
|
|
|
{
|
|
|
|
|
|
|
|
m_ModalMap.get(props.type as BoardModalType)
|
|
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
<div className="pt-dialog-footer">
|
|
|
|
|
|
|
|
<label className="pt-label pt-inline .modifier">
|
|
|
|
|
|
|
|
<div className="cf-select">
|
|
|
|
|
|
|
|
<label>选择配置</label>
|
|
|
|
|
|
|
|
<input list="configs" />
|
|
|
|
|
|
|
|
<datalist id="configs">
|
|
|
|
|
|
|
|
<option value="Chrome" />>
|
|
|
|
|
|
|
|
<option value="Firefox" />>
|
|
|
|
|
|
|
|
<option value="Internet Explorer" />
|
|
|
|
|
|
|
|
<option value="Opera" />>
|
|
|
|
|
|
|
|
<option value="Safari" />>
|
|
|
|
|
|
|
|
<option value="Microsoft Edge" />>
|
|
|
|
|
|
|
|
</datalist>
|
|
|
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
<button type="button" className="pt-button pt-intent-success">保存</button>
|
|
|
|
|
|
|
|
<button type="button" className="pt-button pt-intent-danger">删除</button>
|
|
|
|
|
|
|
|
</label>
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<div className="pt-dialog-footer-actions">
|
|
|
|
//获取数据库中对应板类型的配置
|
|
|
|
<Button
|
|
|
|
let brDataMap = await dbstore.Get(StoreName.ConfigData, type) as Map<string, configOption> || new Map();
|
|
|
|
className="LeftRightBtn pt-intent-success"
|
|
|
|
|
|
|
|
text="确定"
|
|
|
|
let isContinue = true;
|
|
|
|
onClick={() =>
|
|
|
|
if (brDataMap.get(name))
|
|
|
|
{
|
|
|
|
{
|
|
|
|
store.OnOk(ModalState.Ok);
|
|
|
|
isContinue = confirm("该名字存在,是否覆盖值");
|
|
|
|
}} />
|
|
|
|
}
|
|
|
|
|
|
|
|
if (isContinue)
|
|
|
|
|
|
|
|
{
|
|
|
|
|
|
|
|
// 配置添加到数据库
|
|
|
|
|
|
|
|
brDataMap.set(name, newConfig);
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
dbstore.Put(StoreName.ConfigData, type, brDataMap);
|
|
|
|
|
|
|
|
this.setState({ configs: brDataMap });
|
|
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
//删除配置
|
|
|
|
|
|
|
|
handleDeleteConfig = async () =>
|
|
|
|
|
|
|
|
{
|
|
|
|
|
|
|
|
let configs = this.state.configs;
|
|
|
|
|
|
|
|
let currentName = this.state.configName;
|
|
|
|
|
|
|
|
configs.delete(currentName);
|
|
|
|
|
|
|
|
this.setState({ configs });
|
|
|
|
|
|
|
|
let dbstore = await IndexedDbStore.CADStore();
|
|
|
|
|
|
|
|
let type = this.props.type;
|
|
|
|
|
|
|
|
let brDataMap = await dbstore.Get(StoreName.ConfigData, type) as Map<string, configOption>;
|
|
|
|
|
|
|
|
brDataMap.delete(currentName);
|
|
|
|
|
|
|
|
dbstore.Put(StoreName.ConfigData, type, brDataMap);
|
|
|
|
|
|
|
|
|
|
|
|
<Button className="LeftRightBtn pt-intent-danger" text="取消" onClick={() =>
|
|
|
|
this.setState({ configName: "默认" });
|
|
|
|
|
|
|
|
await this.changeBoardOption("默认");
|
|
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
//更新配置
|
|
|
|
|
|
|
|
changeBoardOption = async (k: string) =>
|
|
|
|
|
|
|
|
{
|
|
|
|
|
|
|
|
this.setState({ configName: k });
|
|
|
|
|
|
|
|
let brOpt = this.props.store.m_BoardOption;
|
|
|
|
|
|
|
|
let dbstore = await IndexedDbStore.CADStore();
|
|
|
|
|
|
|
|
let type = this.props.type;
|
|
|
|
|
|
|
|
let brDataMap = await dbstore.Get(StoreName.ConfigData, type) as Map<string, configOption>;
|
|
|
|
|
|
|
|
let opt = brDataMap.get(k);
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
if (brDataMap && opt)
|
|
|
|
|
|
|
|
{
|
|
|
|
|
|
|
|
Object.assign(brOpt, opt.boardData);
|
|
|
|
|
|
|
|
if (type === BoardModalType.Ly)
|
|
|
|
|
|
|
|
{
|
|
|
|
|
|
|
|
let nailData = (this.props.store as LayerBoardStore).layerNailOption;
|
|
|
|
|
|
|
|
Object.assign(nailData, opt.nailData);
|
|
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
async componentWillMount()
|
|
|
|
|
|
|
|
{
|
|
|
|
|
|
|
|
let dbstore = await IndexedDbStore.CADStore();
|
|
|
|
|
|
|
|
let type = this.props.type;
|
|
|
|
|
|
|
|
let brDataMap = await dbstore.Get(StoreName.ConfigData, type) as Map<string, configOption> || new Map();
|
|
|
|
|
|
|
|
this.setState({ configs: brDataMap });
|
|
|
|
|
|
|
|
console.log(this.state.configs.size);
|
|
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
render()
|
|
|
|
|
|
|
|
{
|
|
|
|
|
|
|
|
let store = this.props.store;
|
|
|
|
|
|
|
|
return (
|
|
|
|
|
|
|
|
<div
|
|
|
|
|
|
|
|
className="bp3-dialog-container"
|
|
|
|
|
|
|
|
id="boardModal"
|
|
|
|
|
|
|
|
onKeyDown={(e) => e.stopPropagation()} >
|
|
|
|
|
|
|
|
<div className="bp3-dialog">
|
|
|
|
|
|
|
|
<div
|
|
|
|
|
|
|
|
className="bp3-dialog-header"
|
|
|
|
|
|
|
|
data-id="dragArea"
|
|
|
|
|
|
|
|
>
|
|
|
|
|
|
|
|
<span className="bp3-icon-large bp3-icon-inbox"></span>
|
|
|
|
|
|
|
|
<h4 className="bp3-heading">{store.title}</h4>
|
|
|
|
|
|
|
|
<button
|
|
|
|
|
|
|
|
aria-label="Close" className="bp3-dialog-close-button bp3-icon-small-cross"
|
|
|
|
|
|
|
|
onClick={() => store.OnOk(ModalState.Cancel)}
|
|
|
|
|
|
|
|
></button>
|
|
|
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
<div
|
|
|
|
|
|
|
|
className="bp3-dialog-body"
|
|
|
|
|
|
|
|
onKeyDown={e =>
|
|
|
|
|
|
|
|
{
|
|
|
|
|
|
|
|
e.stopPropagation();
|
|
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
}>
|
|
|
|
{
|
|
|
|
{
|
|
|
|
store.OnOk(ModalState.Cancel);
|
|
|
|
this.m_ModalMap.get(this.props.type as BoardModalType)
|
|
|
|
}} />
|
|
|
|
}
|
|
|
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
<div className="bp3-dialog-footer">
|
|
|
|
|
|
|
|
<label className="bp3-label pt-inline .modifier">
|
|
|
|
|
|
|
|
<div className="cf-select">
|
|
|
|
|
|
|
|
<label>选择配置</label>
|
|
|
|
|
|
|
|
<InputGroup
|
|
|
|
|
|
|
|
className="input-select"
|
|
|
|
|
|
|
|
value={this.state.configName}
|
|
|
|
|
|
|
|
onChange={e =>
|
|
|
|
|
|
|
|
{
|
|
|
|
|
|
|
|
this.setState({ configName: e.target.value })
|
|
|
|
|
|
|
|
}}
|
|
|
|
|
|
|
|
rightElement={
|
|
|
|
|
|
|
|
< Popover
|
|
|
|
|
|
|
|
autoFocus={true}
|
|
|
|
|
|
|
|
modifiers={{
|
|
|
|
|
|
|
|
arrow: { enabled: false },
|
|
|
|
|
|
|
|
flip: { enabled: true },
|
|
|
|
|
|
|
|
keepTogether: { enabled: true },
|
|
|
|
|
|
|
|
preventOverflow: { enabled: true, boundariesElement: "scrollParent" }
|
|
|
|
|
|
|
|
}}
|
|
|
|
|
|
|
|
// position="bottom"
|
|
|
|
|
|
|
|
content={
|
|
|
|
|
|
|
|
<Menu>
|
|
|
|
|
|
|
|
{
|
|
|
|
|
|
|
|
Array.from(this.state.configs.keys())
|
|
|
|
|
|
|
|
.map((k, i) =>
|
|
|
|
|
|
|
|
<MenuItem
|
|
|
|
|
|
|
|
onClick={e => this.changeBoardOption(e.currentTarget.text)}
|
|
|
|
|
|
|
|
text={k}
|
|
|
|
|
|
|
|
key={i} />)
|
|
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
</Menu>}
|
|
|
|
|
|
|
|
target={
|
|
|
|
|
|
|
|
<Button
|
|
|
|
|
|
|
|
minimal={true}
|
|
|
|
|
|
|
|
rightIcon="caret-down"
|
|
|
|
|
|
|
|
disabled={this.state.configs.size === 0}>
|
|
|
|
|
|
|
|
</Button>} />}
|
|
|
|
|
|
|
|
/>
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
<button
|
|
|
|
|
|
|
|
type="button"
|
|
|
|
|
|
|
|
className="bp3-button bp3-intent-success"
|
|
|
|
|
|
|
|
onClick={async () =>
|
|
|
|
|
|
|
|
{
|
|
|
|
|
|
|
|
await this.handleSaveConfig();
|
|
|
|
|
|
|
|
}}
|
|
|
|
|
|
|
|
>保存</button>
|
|
|
|
|
|
|
|
<button
|
|
|
|
|
|
|
|
type="button"
|
|
|
|
|
|
|
|
className="bp3-button bp3-intent-danger"
|
|
|
|
|
|
|
|
onClick={async () =>
|
|
|
|
|
|
|
|
{
|
|
|
|
|
|
|
|
await this.handleDeleteConfig();
|
|
|
|
|
|
|
|
}}
|
|
|
|
|
|
|
|
>删除</button>
|
|
|
|
|
|
|
|
</label>
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<div className="bp3-dialog-footer-actions">
|
|
|
|
|
|
|
|
<Button
|
|
|
|
|
|
|
|
className="LeftRightBtn bp3-intent-success"
|
|
|
|
|
|
|
|
text="确定"
|
|
|
|
|
|
|
|
onClick={() =>
|
|
|
|
|
|
|
|
{
|
|
|
|
|
|
|
|
store.OnOk(ModalState.Ok);
|
|
|
|
|
|
|
|
}} />
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<Button className="LeftRightBtn bp3-intent-danger" text="取消" onClick={() =>
|
|
|
|
|
|
|
|
{
|
|
|
|
|
|
|
|
store.OnOk(ModalState.Cancel);
|
|
|
|
|
|
|
|
}} />
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
);
|
|
|
|
);
|
|
|
|
}
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
