mirror of https://gitee.com/cf-fz/WebCAD.git
!2772 功能:封边高级边处理,预留边
黄诗津
3 weeks ago
committed by
ChenX
parent
f60a266acd
commit
a928670fbc
@ -0,0 +1,375 @@
|
|||||||
|
import { Button, Classes, Dialog, H4, HTMLSelect, Icon, IconSize, InputGroup, Position, Tab, Tabs, Tooltip } from "@blueprintjs/core";
|
||||||
|
import { IObservableValue } from "mobx";
|
||||||
|
import { observer } from "mobx-react";
|
||||||
|
import React, { useRef, useState } from "react";
|
||||||
|
import { DrillType } from "../../../Add-on/DrawDrilling/DrillType";
|
||||||
|
import { CheckObjectType, CheckoutValid } from "../../../Common/CheckoutVaildValue";
|
||||||
|
import { DataAdapter } from "../../../Common/DataAdapter";
|
||||||
|
import { Intent, Toaster } from "../../../Common/Toaster";
|
||||||
|
import { userConfig } from "../../../Editor/UserConfig";
|
||||||
|
import { GoodsType, IGoodInfo } from "../../MaterialEditor/GoodsList";
|
||||||
|
import { GoodsListDiv } from "../../MaterialEditor/GoodsListDiv";
|
||||||
|
import { IHightDrillOption, IUiOption } from "../../Store/OptionInterface/IOptionInterface";
|
||||||
|
import { ToasterInput, ToasterValueError } from "../Toaster";
|
||||||
|
import { BoardDirectionIcon } from "./BoardCommon";
|
||||||
|
|
||||||
|
type IHighEdgeKeyMap = { up: string; down: string; left: string; right: string; };
|
||||||
|
interface IHighEdgeProcessingModalProps
|
||||||
|
{
|
||||||
|
showHighEdgeProcessing: IObservableValue<boolean>;
|
||||||
|
option: any;
|
||||||
|
UIOption: IUiOption<any>;
|
||||||
|
type: CheckObjectType;
|
||||||
|
highDrillOption?: IHightDrillOption;
|
||||||
|
hasDrill?: boolean;
|
||||||
|
isDrillLock?: boolean;
|
||||||
|
hasRemark?: boolean;
|
||||||
|
sealValueMap?: IHighEdgeKeyMap;
|
||||||
|
sealColorMap?: IHighEdgeKeyMap;
|
||||||
|
reservedEdgeMap?: IHighEdgeKeyMap;
|
||||||
|
remarkMap?: IHighEdgeKeyMap;
|
||||||
|
}
|
||||||
|
export const HighEdgeProcessingModal = (props: IHighEdgeProcessingModalProps) =>
|
||||||
|
{
|
||||||
|
const options = [...userConfig.DrillConfigs.keys(), "不排"];
|
||||||
|
|
||||||
|
const { type, option, UIOption, highDrillOption = {}, hasDrill = true, isDrillLock = false, hasRemark = true } = props;
|
||||||
|
const [tabId, SetTabId] = useState("seal");
|
||||||
|
const [highDrill, SetHighDrill] = useState({ ...highDrillOption });
|
||||||
|
|
||||||
|
const curOption = useRef({ ...option });
|
||||||
|
|
||||||
|
const Frame = (props: { Content: React.FC<{ optKey: string; }>; }) =>
|
||||||
|
{
|
||||||
|
const { Content } = props;
|
||||||
|
return (
|
||||||
|
<div>
|
||||||
|
<div className="content-top">
|
||||||
|
<Content optKey={"up"} />
|
||||||
|
</div>
|
||||||
|
<div className="content-center">
|
||||||
|
<Content optKey={"left"} />
|
||||||
|
<div style={{ display: "flex", flexDirection: "column", alignItems: "center", marginBottom: 18 }}>
|
||||||
|
<span style={{ height: 18, color: "red", fontSize: "14px", fontWeight: 500, opacity: tabId === "seal" ? 1 : 0 }}>根据材质库里的材质匹配</span>
|
||||||
|
<BoardDirectionIcon />
|
||||||
|
</div>
|
||||||
|
<Content optKey={"right"} />
|
||||||
|
</div>
|
||||||
|
<div className="content-bottom">
|
||||||
|
<Content optKey={"down"} />
|
||||||
|
</div>
|
||||||
|
</div >
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
let sealValue = {
|
||||||
|
up: "sealedUp",
|
||||||
|
down: "sealedDown",
|
||||||
|
left: "sealedLeft",
|
||||||
|
right: "sealedRight",
|
||||||
|
};
|
||||||
|
|
||||||
|
let sealColor = {
|
||||||
|
up: "sealColorUp",
|
||||||
|
down: "sealColorDown",
|
||||||
|
left: "sealColorLeft",
|
||||||
|
right: "sealColorRight",
|
||||||
|
};
|
||||||
|
const renderSeal = () =>
|
||||||
|
{
|
||||||
|
if (props.sealValueMap)
|
||||||
|
sealValue = props.sealValueMap;
|
||||||
|
|
||||||
|
if (props.sealColorMap)
|
||||||
|
sealColor = props.sealColorMap;
|
||||||
|
|
||||||
|
const sealContent = (props: { optKey: string; }) =>
|
||||||
|
{
|
||||||
|
const sealKey = sealValue[props.optKey];
|
||||||
|
const sealColorKey = sealColor[props.optKey];
|
||||||
|
const selectGoods = (good: IGoodInfo) =>
|
||||||
|
{
|
||||||
|
option[sealKey] = good.thickness.toString();
|
||||||
|
option[sealColorKey] = good.color;
|
||||||
|
if (UIOption)
|
||||||
|
{
|
||||||
|
UIOption[sealKey] = good.thickness.toString();
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div className="select-seal-color">
|
||||||
|
<SealMaterialComponent
|
||||||
|
type={GoodsType.sealMaterial}
|
||||||
|
option={option}
|
||||||
|
optKey={sealColorKey}
|
||||||
|
onChange={(e) =>
|
||||||
|
{
|
||||||
|
option[sealColorKey] = e.target.value;
|
||||||
|
}}
|
||||||
|
handleSelect={selectGoods}
|
||||||
|
/>
|
||||||
|
<ToasterInput
|
||||||
|
type={type}
|
||||||
|
optKey={sealKey}
|
||||||
|
option={option}
|
||||||
|
uiOption={UIOption}
|
||||||
|
placeHolder="封边值"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
return <Frame Content={sealContent} />;
|
||||||
|
};
|
||||||
|
|
||||||
|
const renderDrill = () =>
|
||||||
|
{
|
||||||
|
const drillSelect = (props: { optKey: string; }) =>
|
||||||
|
{
|
||||||
|
const { optKey } = props;
|
||||||
|
return (
|
||||||
|
<HTMLSelect
|
||||||
|
className="select-drillType"
|
||||||
|
options={options}
|
||||||
|
disabled={isDrillLock}
|
||||||
|
value={highDrill[optKey]}
|
||||||
|
iconProps={{ icon: "chevron-down" }}
|
||||||
|
onChange={e =>
|
||||||
|
{
|
||||||
|
let opt = { ...highDrill };
|
||||||
|
opt[optKey] = e.currentTarget.value;
|
||||||
|
SetHighDrill(opt);
|
||||||
|
}}
|
||||||
|
/>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
return <Frame Content={drillSelect} />;
|
||||||
|
};
|
||||||
|
|
||||||
|
let reservedEdge = {
|
||||||
|
up: "reservedEdgeUp",
|
||||||
|
down: "reservedEdgeDown",
|
||||||
|
left: "reservedEdgeLeft",
|
||||||
|
right: "reservedEdgeRight",
|
||||||
|
};
|
||||||
|
const renderReservedEdge = () =>
|
||||||
|
{
|
||||||
|
if (props.reservedEdgeMap)
|
||||||
|
reservedEdge = props.reservedEdgeMap;
|
||||||
|
|
||||||
|
const reservedEdgeInput = (props: { optKey: string; }) =>
|
||||||
|
{
|
||||||
|
const optKey = reservedEdge[props.optKey];
|
||||||
|
return (
|
||||||
|
<ToasterInput
|
||||||
|
inputClassName='remark-input'
|
||||||
|
type={CheckObjectType.OnlyNumber}
|
||||||
|
optKey={optKey}
|
||||||
|
option={option}
|
||||||
|
placeHolder={"预留边"}
|
||||||
|
/>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
return <Frame Content={reservedEdgeInput} />;
|
||||||
|
};
|
||||||
|
|
||||||
|
const renderRemark = () =>
|
||||||
|
{
|
||||||
|
let remark = {
|
||||||
|
up: "edgeRemarkUp",
|
||||||
|
down: "edgeRemarkDown",
|
||||||
|
left: "edgeRemarkLeft",
|
||||||
|
right: "edgeRemarkRight",
|
||||||
|
};
|
||||||
|
if (props.remarkMap)
|
||||||
|
remark = props.remarkMap;
|
||||||
|
|
||||||
|
const remarkInput = (props: { optKey: string; }) =>
|
||||||
|
{
|
||||||
|
const optKey = remark[props.optKey];
|
||||||
|
return (
|
||||||
|
<Tooltip
|
||||||
|
content={`${option[optKey]}`}
|
||||||
|
position={Position.TOP}
|
||||||
|
>
|
||||||
|
<ToasterInput
|
||||||
|
inputClassName='remark-input'
|
||||||
|
type={type}
|
||||||
|
optKey={optKey}
|
||||||
|
option={option}
|
||||||
|
onChange={() =>
|
||||||
|
{
|
||||||
|
if (UIOption)
|
||||||
|
UIOption[optKey] = option[optKey];
|
||||||
|
}}
|
||||||
|
placeHolder={"备注"}
|
||||||
|
/>
|
||||||
|
</Tooltip>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
return <Frame Content={remarkInput} />;
|
||||||
|
};
|
||||||
|
|
||||||
|
const handleClose = (e: React.SyntheticEvent<HTMLElement>) =>
|
||||||
|
{
|
||||||
|
e.stopPropagation();
|
||||||
|
Object.assign(option, curOption.current);
|
||||||
|
if (UIOption)
|
||||||
|
Object.assign(UIOption, DataAdapter.ConvertUIData(option));
|
||||||
|
props.showHighEdgeProcessing.set(false);
|
||||||
|
};
|
||||||
|
|
||||||
|
return (
|
||||||
|
<Dialog
|
||||||
|
isOpen={props.showHighEdgeProcessing.get()}
|
||||||
|
canOutsideClickClose={false}
|
||||||
|
onClose={handleClose}
|
||||||
|
className={"high-edge-processing"}
|
||||||
|
enforceFocus={false} //true会导致搜索关联商品无法点击
|
||||||
|
usePortal={false}
|
||||||
|
style={{
|
||||||
|
width: "auto"
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
<div className='dialog-head'>
|
||||||
|
<H4 style={{ height: 18 }}>{"高级边处理"}</H4>
|
||||||
|
<Button
|
||||||
|
aria-label="Close"
|
||||||
|
className={Classes.DIALOG_CLOSE_BUTTON}
|
||||||
|
icon={<Icon icon="cross" size={IconSize.STANDARD} />}
|
||||||
|
minimal={true}
|
||||||
|
onClick={handleClose}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
<div className={Classes.CARD} style={{ padding: 0 }}>
|
||||||
|
<div className={`${Classes.DIALOG_BODY}`}>
|
||||||
|
<Tabs
|
||||||
|
id="TabsExample"
|
||||||
|
onChange={(id: string) => { SetTabId(id); }}
|
||||||
|
selectedTabId={tabId}
|
||||||
|
renderActiveTabPanelOnly={true}
|
||||||
|
>
|
||||||
|
<Tab id="seal" title="封边颜色(值)" panel={renderSeal()} />
|
||||||
|
{
|
||||||
|
hasDrill &&
|
||||||
|
<Tab id="drill" title="排钻" panel={renderDrill()} panelClassName="ember-panel" />
|
||||||
|
}
|
||||||
|
<Tab id="reservedEdge" title="预留边" panel={renderReservedEdge()} />
|
||||||
|
{
|
||||||
|
hasRemark &&
|
||||||
|
<Tab id="remark" title="备注" panel={renderRemark()} />
|
||||||
|
}
|
||||||
|
</Tabs>
|
||||||
|
</div>
|
||||||
|
<div className={Classes.DIALOG_FOOTER}>
|
||||||
|
<div className={Classes.DIALOG_FOOTER_ACTIONS}>
|
||||||
|
<Button
|
||||||
|
intent={Intent.PRIMARY}
|
||||||
|
onClick={() =>
|
||||||
|
{
|
||||||
|
let error = CheckoutValid.HasInvailValue(option, CheckObjectType.BR);
|
||||||
|
if (error)
|
||||||
|
{
|
||||||
|
ToasterValueError(error);
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
if (JSON.stringify(highDrillOption) != "{}")
|
||||||
|
Object.assign(highDrillOption, highDrill);
|
||||||
|
|
||||||
|
let drillSet = new Set(Object.values(highDrillOption));
|
||||||
|
if (option.drillType != undefined)
|
||||||
|
{
|
||||||
|
if (drillSet.size > 1)
|
||||||
|
option.drillType = DrillType.More;
|
||||||
|
else
|
||||||
|
option.drillType = [...drillSet][0];
|
||||||
|
}
|
||||||
|
|
||||||
|
let sealColorSet = new Set(Object.values(sealColor).map(k => option[k]));
|
||||||
|
if (option.sealColorType != undefined)
|
||||||
|
{
|
||||||
|
if (sealColorSet.size > 1)
|
||||||
|
option.sealColorType = "**多种**";
|
||||||
|
else if (sealColorSet.size === 1)
|
||||||
|
option.sealColorType = [...sealColorSet][0];
|
||||||
|
}
|
||||||
|
|
||||||
|
if (userConfig.reservedEdgeCheckTip && Object.values(reservedEdge).some(k => option[k] != "0"))
|
||||||
|
{
|
||||||
|
Toaster({
|
||||||
|
message: "注意:使用预留边功能会影响CNC(五面钻、六面钻、PTP等设备)加工程序的孔槽及异形轮廓切割的位置,如果有对接CNC加工设备进行加工的,请确认CNC程序已做相关对接(否则可能出现生产错误问题)!",
|
||||||
|
intent: Intent.WARNING,
|
||||||
|
timeout: 5000,
|
||||||
|
});
|
||||||
|
}
|
||||||
|
props.showHighEdgeProcessing.set(false);
|
||||||
|
}}
|
||||||
|
text="确定"
|
||||||
|
/>
|
||||||
|
<Button
|
||||||
|
onClick={handleClose}
|
||||||
|
text="取消"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</Dialog>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
interface ISealMaterialProps
|
||||||
|
{
|
||||||
|
type: GoodsType;
|
||||||
|
option: any;
|
||||||
|
optKey: string;
|
||||||
|
onChange: (e) => void;
|
||||||
|
handleSelect: (good: IGoodInfo) => void;
|
||||||
|
style?: React.CSSProperties;
|
||||||
|
}
|
||||||
|
|
||||||
|
export const SealMaterialComponent = observer((props: ISealMaterialProps) =>
|
||||||
|
{
|
||||||
|
const { type, option, optKey, handleSelect, style } = props;
|
||||||
|
const [isShowShops, setIsShowShops] = useState(false);
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div
|
||||||
|
className="seal-material"
|
||||||
|
style={style}
|
||||||
|
>
|
||||||
|
<InputGroup
|
||||||
|
placeholder={`封边颜色`}
|
||||||
|
value={option[optKey]}
|
||||||
|
tabIndex={1}
|
||||||
|
onChange={(e) =>
|
||||||
|
{
|
||||||
|
if (props.onChange)
|
||||||
|
props.onChange(e);
|
||||||
|
}}
|
||||||
|
rightElement={
|
||||||
|
<Button
|
||||||
|
icon='search'
|
||||||
|
minimal
|
||||||
|
onClick={() => { setIsShowShops(true); }}
|
||||||
|
/>
|
||||||
|
}
|
||||||
|
/>
|
||||||
|
{
|
||||||
|
isShowShops &&
|
||||||
|
<GoodsListDiv
|
||||||
|
onClose={() => { setIsShowShops(false); }}
|
||||||
|
goods_type={type}
|
||||||
|
select={(good: IGoodInfo) =>
|
||||||
|
{
|
||||||
|
setIsShowShops(false);
|
||||||
|
handleSelect(good);
|
||||||
|
}}
|
||||||
|
/>
|
||||||
|
}
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
});
|
||||||
@ -0,0 +1,153 @@
|
|||||||
|
#commonModal .high-edge-processing,
|
||||||
|
#RightPanel .high-edge-processing{
|
||||||
|
width: auto;
|
||||||
|
padding-bottom: 0;
|
||||||
|
background: #fff;
|
||||||
|
|
||||||
|
.bp3-dialog-body {
|
||||||
|
padding: 10px;
|
||||||
|
box-shadow: 0 0 0 1px rgba(16, 22, 26, 0.15), 0 0 0 rgba(16, 22, 26, 0), 0 0 0 rgba(16, 22, 26, 0);
|
||||||
|
|
||||||
|
//图标样式
|
||||||
|
.boardModel {
|
||||||
|
@arrowWidth: 15px;
|
||||||
|
@lineWidth: 5px;
|
||||||
|
@lineHeight:35px;
|
||||||
|
|
||||||
|
display: inline-block;
|
||||||
|
width: 60px;
|
||||||
|
height: 95px;
|
||||||
|
border: 1px solid #000;
|
||||||
|
vertical-align: middle;
|
||||||
|
margin: 0 50px;
|
||||||
|
|
||||||
|
.arrow {
|
||||||
|
display: block;
|
||||||
|
border: @arrowWidth solid transparent;
|
||||||
|
width: 0;
|
||||||
|
height: 0px;
|
||||||
|
margin: 0 auto;
|
||||||
|
}
|
||||||
|
|
||||||
|
.arrowtop {
|
||||||
|
border-bottom: @arrowWidth solid #000;
|
||||||
|
margin-top: -3px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.arrowbottom {
|
||||||
|
border-top: @arrowWidth solid #000;
|
||||||
|
}
|
||||||
|
|
||||||
|
.line {
|
||||||
|
display: block;
|
||||||
|
border: @lineWidth solid #000;
|
||||||
|
width: 0;
|
||||||
|
height: @lineHeight;
|
||||||
|
margin: 0 auto;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
//重写tabs样式
|
||||||
|
.bp3-tab-list {
|
||||||
|
display: flex;
|
||||||
|
justify-content: center;
|
||||||
|
|
||||||
|
.bp3-tab-indicator-wrapper ~ .bp3-tab {
|
||||||
|
border: 1px solid #d9d9d9;
|
||||||
|
width: 90px;
|
||||||
|
font-weight: 500;
|
||||||
|
text-align: center;
|
||||||
|
border-radius: 5px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.bp3-tab[aria-selected="true"] {
|
||||||
|
border-radius: 5px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.bp3-tab-indicator-wrapper {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.select-drillType {
|
||||||
|
flex:none
|
||||||
|
}
|
||||||
|
|
||||||
|
.bp3-tab-panel {
|
||||||
|
@height:24px;
|
||||||
|
|
||||||
|
width: 450px;
|
||||||
|
height: 210px;
|
||||||
|
margin-top: 10px;
|
||||||
|
|
||||||
|
.bp3-input {
|
||||||
|
width: 60px;
|
||||||
|
height: @height;
|
||||||
|
}
|
||||||
|
|
||||||
|
select {
|
||||||
|
width: 90px;
|
||||||
|
height: @height;
|
||||||
|
}
|
||||||
|
|
||||||
|
.select-seal-color{
|
||||||
|
.bp3-input-group {
|
||||||
|
width: 100px;
|
||||||
|
|
||||||
|
.bp3-button {
|
||||||
|
margin: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.bp3-input {
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.content-top,
|
||||||
|
.content-bottom {
|
||||||
|
display: flex;
|
||||||
|
justify-content: center;
|
||||||
|
height: @height;
|
||||||
|
align-items: center;
|
||||||
|
|
||||||
|
.select-seal-color{
|
||||||
|
display: flex;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.content-center {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
margin: 3px;
|
||||||
|
height: 130px;
|
||||||
|
|
||||||
|
.select-seal-color{
|
||||||
|
&>:first-child {
|
||||||
|
margin-bottom: 5px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.bp3-dialog-footer {
|
||||||
|
margin: 1px 0 0 0;
|
||||||
|
padding: 10px 20px;
|
||||||
|
border-radius: 0 0 6px 6px;
|
||||||
|
display: flex;
|
||||||
|
justify-content: flex-end;
|
||||||
|
align-items: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
#RightPanel .high-edge-processing{
|
||||||
|
.light-golden .bp3-tab-list {
|
||||||
|
background: #fff;
|
||||||
|
}
|
||||||
|
|
||||||
|
.bp3-tab-list > *:not(:last-child) {
|
||||||
|
margin-right: 20px;
|
||||||
|
}
|
||||||
|
}
|
||||||
@ -0,0 +1,103 @@
|
|||||||
|
import { Button, Classes, Label } from '@blueprintjs/core';
|
||||||
|
import { inject, observer } from 'mobx-react';
|
||||||
|
import * as React from 'react';
|
||||||
|
import { ColorMaterial } from '../../../Common/ColorPalette';
|
||||||
|
import { safeEval } from '../../../Common/eval';
|
||||||
|
import { Intent, Toaster } from '../../../Common/Toaster';
|
||||||
|
import { userConfig } from '../../../Editor/UserConfig';
|
||||||
|
import { Board_Editor_Key } from '../../Store/RightPanelStore/BoardEdgesEditor';
|
||||||
|
import { ReservedEdgeStore } from '../../Store/RightPanelStore/ReservedEdgeStore';
|
||||||
|
import { RightPanelStore } from '../../Store/RightPanelStore/RightPanelStore';
|
||||||
|
import { BoardModalType } from '../Board/BoardModalType';
|
||||||
|
import { UserConfigComponent } from '../Board/UserConfigComponent';
|
||||||
|
import { AppToaster } from '../Toaster';
|
||||||
|
|
||||||
|
@inject("store")
|
||||||
|
@observer
|
||||||
|
export class ReservedEdgeComponent extends React.Component<{ store?: RightPanelStore; }>
|
||||||
|
{
|
||||||
|
render()
|
||||||
|
{
|
||||||
|
let store = ReservedEdgeStore.GetInstance();
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div className='rightTab'>
|
||||||
|
<div className='tabBody'>
|
||||||
|
<ul className={"modeling dataList " + Classes.LIST_UNSTYLED}>
|
||||||
|
<li>
|
||||||
|
<Label>颜色</Label>
|
||||||
|
<Label>大小</Label>
|
||||||
|
</li>
|
||||||
|
{
|
||||||
|
store.option.highReservedEdge.map((v, i) =>
|
||||||
|
{
|
||||||
|
return (
|
||||||
|
<li key={i}>
|
||||||
|
<span
|
||||||
|
className={Classes.INPUT}
|
||||||
|
style={{
|
||||||
|
background: ColorMaterial.GetColor(i + 1).getStyle(),
|
||||||
|
width: "50%",
|
||||||
|
color: i >= 10 ? "white" : "black"
|
||||||
|
}}
|
||||||
|
>{i + 1}</span>
|
||||||
|
<input
|
||||||
|
style={{ width: "50%" }}
|
||||||
|
tabIndex={1}
|
||||||
|
value={v}
|
||||||
|
onFocus={e =>
|
||||||
|
{
|
||||||
|
e.target.setSelectionRange(0, e.target.value.length);
|
||||||
|
}}
|
||||||
|
className={Classes.INPUT}
|
||||||
|
onChange={(e) =>
|
||||||
|
{
|
||||||
|
store.option.highReservedEdge[i] = e.target.value;
|
||||||
|
}}
|
||||||
|
onBlur={e =>
|
||||||
|
{
|
||||||
|
let val = safeEval(e.target.value);
|
||||||
|
if (isNaN(val))
|
||||||
|
store.option.highReservedEdge[i] = "0";
|
||||||
|
}}
|
||||||
|
/>
|
||||||
|
</li>
|
||||||
|
);
|
||||||
|
})
|
||||||
|
}
|
||||||
|
</ul>
|
||||||
|
<div className="flex-arround">
|
||||||
|
<Button text="写入" intent={Intent.SUCCESS}
|
||||||
|
onClick={this.ok} />
|
||||||
|
<Button text="退出" intent={Intent.DANGER}
|
||||||
|
onClick={this.exit} />
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<UserConfigComponent
|
||||||
|
className="modeing-config"
|
||||||
|
store={store}
|
||||||
|
type={BoardModalType.ReservedEdge}
|
||||||
|
isNotUpdateStore={store.isNotUpdateStore}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
private ok = () =>
|
||||||
|
{
|
||||||
|
// if (!this.props.store.reservedEdgeStore.Check()) return;
|
||||||
|
this.props.store.reservedEdgeStore.IsApplyData = true;
|
||||||
|
this.exit();
|
||||||
|
if (userConfig.reservedEdgeCheckTip)
|
||||||
|
{
|
||||||
|
Toaster({
|
||||||
|
message: "注意:使用预留边功能会影响CNC(五面钻、六面钻、PTP等设备)加工程序的孔槽及异形轮廓切割的位置,如果有对接CNC加工设备进行加工的,请确认CNC程序已做相关对接(否则可能出现生产错误问题)!",
|
||||||
|
intent: Intent.WARNING,
|
||||||
|
timeout: 5000
|
||||||
|
});
|
||||||
|
}
|
||||||
|
};
|
||||||
|
private exit()
|
||||||
|
{
|
||||||
|
AppToaster.dismiss(Board_Editor_Key);
|
||||||
|
}
|
||||||
|
}
|
||||||
@ -0,0 +1,177 @@
|
|||||||
|
import { observable, toJS } from "mobx";
|
||||||
|
import { CommandNames } from "../../../Common/CommandNames";
|
||||||
|
import { Log, LogType } from "../../../Common/Log";
|
||||||
|
import { Intent } from "../../../Common/Toaster";
|
||||||
|
import { safeEval } from "../../../Common/eval";
|
||||||
|
import { Board } from "../../../DatabaseServices/Entity/Board";
|
||||||
|
import { CommandWrap } from "../../../Editor/CommandMachine";
|
||||||
|
import { GetBoardHighReservedEdge, GetBoardSealingCurves, SetBoardReservedEdgeData } from "../../../GraphicsSystem/CalcEdgeSealing";
|
||||||
|
import { IConfigOption } from "../../Components/Board/UserConfigComponent";
|
||||||
|
import { AppToaster, ShowLinesToaster } from "../../Components/Toaster";
|
||||||
|
import { IConfigStore } from "../BoardStore";
|
||||||
|
import { IHighReservedEdgeItem } from "../OptionInterface/IHighSealedItem";
|
||||||
|
import { BoardEdgesEditor, Board_Editor_Key } from "./BoardEdgesEditor";
|
||||||
|
|
||||||
|
export class ReservedEdgeStore extends BoardEdgesEditor implements IConfigStore
|
||||||
|
{
|
||||||
|
isNotUpdateStore = false;//默认打开窗体时,我们更新配置,而在提取预留边时,我们手动更新配置,所以关闭它.
|
||||||
|
|
||||||
|
@observable highReservedEdge: string[] = Array(20).fill("0");
|
||||||
|
private static _SingleInstance: ReservedEdgeStore;
|
||||||
|
static GetInstance(): ReservedEdgeStore
|
||||||
|
{
|
||||||
|
if (this._SingleInstance) return this._SingleInstance;
|
||||||
|
this._SingleInstance = new ReservedEdgeStore;
|
||||||
|
return this._SingleInstance;
|
||||||
|
}
|
||||||
|
|
||||||
|
@observable option = { highReservedEdge: this.highReservedEdge };
|
||||||
|
async InitData()
|
||||||
|
{
|
||||||
|
}
|
||||||
|
|
||||||
|
@observable configName: string = "默认";
|
||||||
|
@observable configsNames: string[] = [];
|
||||||
|
InitOption()
|
||||||
|
{
|
||||||
|
//禁止再次初始化,避免用户没有配置的时候,使用预留边编辑,导致面板属性被还原
|
||||||
|
Object.assign(this.option, { highReservedEdge: Array(20).fill("0") });
|
||||||
|
}
|
||||||
|
SaveConfig()
|
||||||
|
{
|
||||||
|
return { option: toJS(this.option) };
|
||||||
|
}
|
||||||
|
|
||||||
|
UpdateOption(cof: IConfigOption)
|
||||||
|
{
|
||||||
|
Object.assign(this.option, cof.option);
|
||||||
|
}
|
||||||
|
protected InitCurve()
|
||||||
|
{
|
||||||
|
let dataColorMap = new Map<string, number>();//data->color
|
||||||
|
let canUseColor: number[] = [];//可使用的颜色
|
||||||
|
let highSizes = this.option.highReservedEdge;
|
||||||
|
|
||||||
|
for (let i = 0; i < highSizes.length; i++)
|
||||||
|
{
|
||||||
|
if (dataColorMap.has(highSizes[i]))
|
||||||
|
canUseColor.push(i);//可以被覆盖
|
||||||
|
else
|
||||||
|
dataColorMap.set(highSizes[i], i);//记录颜色
|
||||||
|
}
|
||||||
|
|
||||||
|
for (let br of this._boardList)
|
||||||
|
{
|
||||||
|
let curves = GetBoardSealingCurves(br, true);
|
||||||
|
let highReservedEdge = GetBoardHighReservedEdge(br, curves);
|
||||||
|
if (highReservedEdge.length === curves.length)
|
||||||
|
{
|
||||||
|
for (let i = 0; i < highReservedEdge.length; i++)
|
||||||
|
{
|
||||||
|
let s = highReservedEdge[i];
|
||||||
|
if (!dataColorMap.has(s.size.toString()))
|
||||||
|
{
|
||||||
|
if (canUseColor[0])
|
||||||
|
{
|
||||||
|
dataColorMap.set(s.size.toString(), canUseColor[0]);
|
||||||
|
highSizes[canUseColor[0]] = s.size.toString();
|
||||||
|
canUseColor.shift();
|
||||||
|
}
|
||||||
|
else
|
||||||
|
{
|
||||||
|
highSizes.push(s.size.toString());
|
||||||
|
dataColorMap.set(s.size.toString(), highSizes.length - 1);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
let color = dataColorMap.get(s.size.toString()) + 1;
|
||||||
|
curves[i].ColorIndex = color;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
else
|
||||||
|
{
|
||||||
|
if (!dataColorMap.has("1"))
|
||||||
|
{
|
||||||
|
if (canUseColor[0])
|
||||||
|
{
|
||||||
|
dataColorMap.set("1", canUseColor[0]);
|
||||||
|
highSizes[canUseColor[0]] = "1";
|
||||||
|
canUseColor.shift();
|
||||||
|
}
|
||||||
|
else
|
||||||
|
{
|
||||||
|
highSizes.push("1");
|
||||||
|
dataColorMap.set("1", highSizes.length - 1);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
let color = dataColorMap.get("1") + 1;
|
||||||
|
curves.forEach(cu => cu.ColorIndex = color);
|
||||||
|
}
|
||||||
|
this._brMap.set(br, curves);
|
||||||
|
}
|
||||||
|
|
||||||
|
}
|
||||||
|
protected ShowToaster()
|
||||||
|
{
|
||||||
|
ShowLinesToaster(
|
||||||
|
["正在编辑预留边...", "点击<写入>写入预留边数据到板件,", "点击<退出>或者关闭退出编辑状态"],
|
||||||
|
{
|
||||||
|
intent: Intent.PRIMARY,
|
||||||
|
timeout: 0,
|
||||||
|
onDismiss: () =>
|
||||||
|
{
|
||||||
|
this.EndEditor();
|
||||||
|
}
|
||||||
|
}, Board_Editor_Key);
|
||||||
|
}
|
||||||
|
private _dataMap: Map<Board, IHighReservedEdgeItem[]> = new Map();
|
||||||
|
protected ParseData(isCheck = false)
|
||||||
|
{
|
||||||
|
let hasZeroColorIndex = false; //预留边颜色为0
|
||||||
|
for (let [b, cus] of this._brMap)
|
||||||
|
{
|
||||||
|
let data: IHighReservedEdgeItem[] = [];
|
||||||
|
for (let cu of cus)
|
||||||
|
{
|
||||||
|
const color = cu.ColorIndex;
|
||||||
|
if (color > this.option.highReservedEdge.length)
|
||||||
|
{
|
||||||
|
Log(color + "号色未设置数据,默认为1", LogType.Warning);
|
||||||
|
data.push({ size: 1 });
|
||||||
|
}
|
||||||
|
else
|
||||||
|
{
|
||||||
|
let size = this.option.highReservedEdge[color - 1];
|
||||||
|
if (color === 0)
|
||||||
|
{
|
||||||
|
size = "0";
|
||||||
|
hasZeroColorIndex = true;
|
||||||
|
}
|
||||||
|
data.push({ size: safeEval(size) });
|
||||||
|
}
|
||||||
|
}
|
||||||
|
this._dataMap.set(b, data);
|
||||||
|
}
|
||||||
|
//check()的时候提醒
|
||||||
|
if (isCheck && hasZeroColorIndex)
|
||||||
|
AppToaster.show({
|
||||||
|
message: "编辑存在颜色为 0 的预留边，该预留边自动设置为 0",
|
||||||
|
timeout: 5000,
|
||||||
|
intent: Intent.WARNING,
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
protected async WriteData()
|
||||||
|
{
|
||||||
|
await CommandWrap(() =>
|
||||||
|
{
|
||||||
|
for (let [b, cus] of this._brMap)
|
||||||
|
{
|
||||||
|
let data = this._dataMap.get(b);
|
||||||
|
let ocsInv = b.OCSInv;
|
||||||
|
SetBoardReservedEdgeData(b, data, cus.map(c => c.ApplyMatrix(ocsInv)));
|
||||||
|
b.BoardProcessOption.highReservedEdge = data;
|
||||||
|
}
|
||||||
|
this._dataMap.clear();
|
||||||
|
}, CommandNames.预留边属性编辑);
|
||||||
|
}
|
||||||
|
}
|
||||||
Loading…
Reference in new issue