|
|
|
@ -7,6 +7,9 @@ import { Button, Intent } from "@blueprintjs/core";
|
|
|
|
|
import { end } from "xaop";
|
|
|
|
|
import { ICON_CDN } from "../../IconEnum";
|
|
|
|
|
import { ZINDEX } from "../../../Common/ZIndex";
|
|
|
|
|
import { commandMachine } from "../../../Editor/CommandMachine";
|
|
|
|
|
import { CommandState } from "../../../Editor/CommandState";
|
|
|
|
|
import { Sleep } from "../../../Common/Utils";
|
|
|
|
|
export interface ICommandIconInfo
|
|
|
|
|
{
|
|
|
|
|
svg: string,
|
|
|
|
@ -79,33 +82,124 @@ export class ToolsBlock extends React.Component<ToolsBlockProps, {}>
|
|
|
|
|
}
|
|
|
|
|
checkWidth = () =>
|
|
|
|
|
{
|
|
|
|
|
const { list } = this.props;
|
|
|
|
|
const matchMost = window.matchMedia(`(max-width: 910px)`);
|
|
|
|
|
const matchMore = window.matchMedia(`(max-width: 1350px )`);
|
|
|
|
|
const matchLittle = window.matchMedia(`(max-width: 1845px )`);
|
|
|
|
|
if (matchMost.matches)
|
|
|
|
|
|
|
|
|
|
const { list, blockId } = this.props;
|
|
|
|
|
//命令块收缩规则
|
|
|
|
|
const matchMost = window.matchMedia(`(max-width: 1255px)`);
|
|
|
|
|
const matchMore = window.matchMedia(`(max-width: 1365px )`);
|
|
|
|
|
const matchLittle = window.matchMedia(`(max-width: 1585px )`);
|
|
|
|
|
|
|
|
|
|
//全都缩成一个
|
|
|
|
|
const allInOne = window.matchMedia(`(max-width: 485px)`);
|
|
|
|
|
|
|
|
|
|
//板件命令收缩规则 等别的都缩成一个了,板件绘图和板件编辑 才开始缩
|
|
|
|
|
const brBlockMost = window.matchMedia(`(max-width: 815px)`);
|
|
|
|
|
const brBlockMore = window.matchMedia(`(max-width: 1035px )`);
|
|
|
|
|
const brBlockLittle = window.matchMedia(`(max-width: 1145px)`);
|
|
|
|
|
|
|
|
|
|
if (allInOne.matches)
|
|
|
|
|
{
|
|
|
|
|
this.setState({ isCollapse: CollapaseType.Most });
|
|
|
|
|
this.list_main = [];
|
|
|
|
|
this.list_small = list.slice(1);
|
|
|
|
|
}
|
|
|
|
|
else if (brBlockMost.matches)
|
|
|
|
|
{
|
|
|
|
|
this.setState({ isCollapse: CollapaseType.Most });
|
|
|
|
|
if (blockId === "br_draw" || blockId === "br_edit" || blockId === "drill")//板件绘图-板件编辑-排钻
|
|
|
|
|
{
|
|
|
|
|
this.list_main = list.slice(1, 3);
|
|
|
|
|
this.list_small = list.slice(3);
|
|
|
|
|
}
|
|
|
|
|
else
|
|
|
|
|
{
|
|
|
|
|
this.list_main = [];
|
|
|
|
|
this.list_small = list.slice(1);
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
else if (brBlockMore.matches)
|
|
|
|
|
{
|
|
|
|
|
this.setState({ isCollapse: CollapaseType.Most });
|
|
|
|
|
if (blockId === "br_draw" || blockId === "br_edit" || blockId === "drill")
|
|
|
|
|
{
|
|
|
|
|
this.list_main = list.slice(1, 6);
|
|
|
|
|
this.list_small = list.slice(6);
|
|
|
|
|
}
|
|
|
|
|
else
|
|
|
|
|
{
|
|
|
|
|
this.list_main = [];
|
|
|
|
|
this.list_small = list.slice(1);
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
else if (brBlockLittle.matches)
|
|
|
|
|
{
|
|
|
|
|
this.setState({ isCollapse: CollapaseType.Most });
|
|
|
|
|
if (blockId === "br_draw" || blockId === "br_edit" || blockId === "drill")
|
|
|
|
|
{
|
|
|
|
|
this.list_main = list.slice(1, 9);
|
|
|
|
|
this.list_small = list.slice(9);
|
|
|
|
|
}
|
|
|
|
|
else
|
|
|
|
|
{
|
|
|
|
|
this.list_main = [];
|
|
|
|
|
this.list_small = list.slice(1);
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
else if (matchMost.matches)
|
|
|
|
|
{
|
|
|
|
|
this.setState({ isCollapse: CollapaseType.Most });
|
|
|
|
|
if (blockId === "br_draw" || blockId === "br_edit" || blockId === "drill")
|
|
|
|
|
{
|
|
|
|
|
this.list_main = list.slice(1);
|
|
|
|
|
this.list_small = [];
|
|
|
|
|
}
|
|
|
|
|
else
|
|
|
|
|
{
|
|
|
|
|
this.list_main = [];
|
|
|
|
|
this.list_small = list.slice(1);
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
else if (matchMore.matches)
|
|
|
|
|
{
|
|
|
|
|
this.setState({ isCollapse: CollapaseType.More });
|
|
|
|
|
this.list_main = list.slice(1, 3);
|
|
|
|
|
this.list_small = list.slice(3);
|
|
|
|
|
if (blockId === "br_draw" || blockId === "br_edit" || blockId === "drill")
|
|
|
|
|
{
|
|
|
|
|
this.list_main = list.slice(1);
|
|
|
|
|
this.list_small = [];
|
|
|
|
|
}
|
|
|
|
|
else
|
|
|
|
|
{
|
|
|
|
|
this.list_main = list.slice(1, 3);
|
|
|
|
|
this.list_small = list.slice(3);
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
else if (matchLittle.matches)
|
|
|
|
|
{
|
|
|
|
|
this.setState({ isCollapse: CollapaseType.Little });
|
|
|
|
|
this.list_main = list.slice(1, 5);
|
|
|
|
|
this.list_small = list.slice(5);
|
|
|
|
|
if (blockId === "br_draw" || blockId === "br_edit" || blockId === "drill")
|
|
|
|
|
{
|
|
|
|
|
this.list_main = list.slice(1);
|
|
|
|
|
this.list_small = [];
|
|
|
|
|
}
|
|
|
|
|
else
|
|
|
|
|
{
|
|
|
|
|
this.list_main = list.slice(1, 5);
|
|
|
|
|
this.list_small = list.slice(5);
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
else
|
|
|
|
|
{
|
|
|
|
|
this.setState({ isCollapse: CollapaseType.None });
|
|
|
|
|
this.list_main = list.slice(1, 8);
|
|
|
|
|
this.list_small = list.slice(8);
|
|
|
|
|
if (blockId === "br_draw" || blockId === "br_edit" || blockId === "drill")
|
|
|
|
|
{
|
|
|
|
|
this.list_main = list.slice(1);
|
|
|
|
|
this.list_small = [];
|
|
|
|
|
}
|
|
|
|
|
else
|
|
|
|
|
{
|
|
|
|
|
this.list_main = list.slice(1, 9);
|
|
|
|
|
this.list_small = list.slice(9);
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
};
|
|
|
|
|
componentDidMount()
|
|
|
|
@ -130,43 +224,58 @@ export class ToolsBlock extends React.Component<ToolsBlockProps, {}>
|
|
|
|
|
{
|
|
|
|
|
app.m_Editor.m_MaskManage.ShowMask(true, true);
|
|
|
|
|
}
|
|
|
|
|
EndCurrentCommand = async () =>//如何更好地结束命令
|
|
|
|
|
{
|
|
|
|
|
if (CommandState.CommandIng)
|
|
|
|
|
{
|
|
|
|
|
app.m_Editor.Canel();
|
|
|
|
|
console.log("commanding ")
|
|
|
|
|
commandMachine.CommandEnd(true);
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
HandleOnClick = async (cmd: string) =>
|
|
|
|
|
{
|
|
|
|
|
const { historyCmds, execFun } = this.props;
|
|
|
|
|
this.EndCurrentCommand();
|
|
|
|
|
await Sleep(10);
|
|
|
|
|
historyCmds.push(cmd);
|
|
|
|
|
execFun(cmd);
|
|
|
|
|
}
|
|
|
|
|
render()
|
|
|
|
|
{
|
|
|
|
|
const { list, historyCmds, execFun, btnTitile } = this.props;
|
|
|
|
|
const { list, btnTitile } = this.props;
|
|
|
|
|
let first = list[0];
|
|
|
|
|
return (
|
|
|
|
|
<div id={this.props.blockId}>
|
|
|
|
|
<ul className="ul-unstyle ul-twoD">
|
|
|
|
|
{
|
|
|
|
|
< li title={first.command} style={{}} onClick={() =>
|
|
|
|
|
//即便坍缩到最小 必定会留一个
|
|
|
|
|
< li title={first.command} style={{}} onClick={async () =>
|
|
|
|
|
{
|
|
|
|
|
historyCmds.push(first.command);
|
|
|
|
|
execFun(first.command);
|
|
|
|
|
this.HandleOnClick(first.command);
|
|
|
|
|
}}>
|
|
|
|
|
<img src={`${ICON_CDN}/${first.svg}`} />{/**如果cmd.svg为空呢 */}
|
|
|
|
|
<p>{first.title}</p>
|
|
|
|
|
</li>
|
|
|
|
|
}
|
|
|
|
|
{
|
|
|
|
|
!this.state.Collapse ?
|
|
|
|
|
//正常显示下 超过10个缩略隐藏
|
|
|
|
|
this.list_main.map((cmd, index) =>
|
|
|
|
|
{
|
|
|
|
|
return (
|
|
|
|
|
<li key={index} title={cmd.command} style={{ width: cmd.title.length === 5 ? "60px" : "55px" }} onClick={() =>
|
|
|
|
|
{
|
|
|
|
|
historyCmds.push(cmd.command);
|
|
|
|
|
execFun(cmd.command);
|
|
|
|
|
}}>
|
|
|
|
|
<img src={`${ICON_CDN}/${cmd.svg}`} />
|
|
|
|
|
<p>{cmd.title}</p>
|
|
|
|
|
</li>
|
|
|
|
|
)
|
|
|
|
|
})
|
|
|
|
|
: null
|
|
|
|
|
//主列表
|
|
|
|
|
this.list_main.map((cmd, index) =>
|
|
|
|
|
{
|
|
|
|
|
return (
|
|
|
|
|
<li key={index} title={cmd.command} style={{ width: cmd.title.length === 5 ? "60px" : "55px" }} onClick={() =>
|
|
|
|
|
{
|
|
|
|
|
this.HandleOnClick(cmd.command);
|
|
|
|
|
}}>
|
|
|
|
|
<img src={`${ICON_CDN}/${cmd.svg}`} />
|
|
|
|
|
<p>{cmd.title}</p>
|
|
|
|
|
</li>
|
|
|
|
|
)
|
|
|
|
|
})
|
|
|
|
|
}
|
|
|
|
|
</ul >
|
|
|
|
|
{
|
|
|
|
|
//小列表
|
|
|
|
|
this.isExtendShow ?
|
|
|
|
|
<div className="small-iconlist"
|
|
|
|
|
style={{ zIndex: parseInt(ZINDEX.ToolsBlock_small) }}
|
|
|
|
@ -175,23 +284,6 @@ export class ToolsBlock extends React.Component<ToolsBlockProps, {}>
|
|
|
|
|
onFocus={this.HandleFocus}
|
|
|
|
|
>
|
|
|
|
|
<ul className="ul-unstyle">
|
|
|
|
|
{
|
|
|
|
|
this.state.Collapse ?
|
|
|
|
|
this.list_main.map((cmd, index) =>
|
|
|
|
|
{
|
|
|
|
|
return (
|
|
|
|
|
<li key={index} title={cmd.title} style={{}} onClick={() =>
|
|
|
|
|
{
|
|
|
|
|
historyCmds.push(cmd.command);
|
|
|
|
|
execFun(cmd.command);
|
|
|
|
|
}}>
|
|
|
|
|
<img src={`${ICON_CDN}/${cmd.svg}`} />
|
|
|
|
|
{!this.state.Collapse ? <p>{cmd.title}</p> : null}
|
|
|
|
|
</li>
|
|
|
|
|
)
|
|
|
|
|
})
|
|
|
|
|
: null
|
|
|
|
|
}
|
|
|
|
|
{
|
|
|
|
|
this.list_small.length > 0 ?
|
|
|
|
|
this.list_small.map((cmd, index) =>
|
|
|
|
@ -199,8 +291,7 @@ export class ToolsBlock extends React.Component<ToolsBlockProps, {}>
|
|
|
|
|
return (
|
|
|
|
|
<li key={index} title={cmd.title} style={{}} onClick={() =>
|
|
|
|
|
{
|
|
|
|
|
historyCmds.push(cmd.command);
|
|
|
|
|
execFun(cmd.command);
|
|
|
|
|
this.HandleOnClick(cmd.command);
|
|
|
|
|
this.isExtendShow = false;
|
|
|
|
|
app.m_Editor.m_MaskManage.Clear();
|
|
|
|
|
}}>
|
|
|
|
@ -213,15 +304,19 @@ export class ToolsBlock extends React.Component<ToolsBlockProps, {}>
|
|
|
|
|
<Button
|
|
|
|
|
text={btnTitile}
|
|
|
|
|
intent={Intent.NONE}
|
|
|
|
|
onClick={() => { this.isExtendShow = false; app.m_Editor.m_MaskManage.Clear(); }}
|
|
|
|
|
onClick={() =>
|
|
|
|
|
{
|
|
|
|
|
if (CommandState.CommandIng)
|
|
|
|
|
commandMachine.CommandEnd(); this.isExtendShow = false; app.m_Editor.m_MaskManage.Clear();
|
|
|
|
|
}}
|
|
|
|
|
/>
|
|
|
|
|
</div> : null
|
|
|
|
|
}
|
|
|
|
|
<Button
|
|
|
|
|
text={btnTitile}
|
|
|
|
|
intent={Intent.NONE}
|
|
|
|
|
disabled={!((this.list_small.length > 0 && !this.state.Collapse) || (this.list_main.length > 0 && this.state.Collapse))}
|
|
|
|
|
onClick={() =>
|
|
|
|
|
disabled={!((this.list_small.length > 0 && !this.state.Collapse) || (this.list_main.length > 1 && this.state.Collapse))}
|
|
|
|
|
onClick={async () =>
|
|
|
|
|
{
|
|
|
|
|
if (this.list_small.length > 0 || (this.state.Collapse && this.list_main.length > 0))
|
|
|
|
|
{
|
|
|
|
|