mirror of https://gitee.com/cf-fz/WebCAD.git
!515 自动标注字体尺寸调整 增加引线
肖诗雅
5 years ago
committed by
ChenX
parent
507cd45ba6
commit
61a9e07805
@ -0,0 +1,146 @@
|
|||||||
|
.properties{
|
||||||
|
width: 170px;
|
||||||
|
.bp3-card{
|
||||||
|
padding: 5px;
|
||||||
|
height: 100%;
|
||||||
|
.header{
|
||||||
|
span{
|
||||||
|
font-size: 12px;
|
||||||
|
font-weight: 600;
|
||||||
|
}
|
||||||
|
margin: 10px 0;
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-between;
|
||||||
|
background: #ced9e0;
|
||||||
|
padding: 0 5px;
|
||||||
|
align-items: center;
|
||||||
|
}
|
||||||
|
.select{
|
||||||
|
.bp3-html-select{
|
||||||
|
width: 100%;
|
||||||
|
select{
|
||||||
|
height: 2.0rem;
|
||||||
|
line-height: 2.0rem;
|
||||||
|
min-height: 2.0rem;
|
||||||
|
}
|
||||||
|
>span{
|
||||||
|
top: 2px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
>ul>li{
|
||||||
|
margin: 5px 0 0 0 !important;
|
||||||
|
}
|
||||||
|
ul{//.props
|
||||||
|
width: 100% !important;
|
||||||
|
.li-title{
|
||||||
|
background: #BFCCD6;
|
||||||
|
padding: 5px;
|
||||||
|
margin: 5px 0 0 0;
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
|
>li{
|
||||||
|
width: 100% !important;
|
||||||
|
}
|
||||||
|
.color{
|
||||||
|
margin: 5px 0 0 0 !important;
|
||||||
|
width: 100% !important;
|
||||||
|
display: flex;
|
||||||
|
>label{
|
||||||
|
width: 20%;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: space-around;
|
||||||
|
flex-direction: column;
|
||||||
|
justify-content: end;
|
||||||
|
}
|
||||||
|
>ul{
|
||||||
|
width: 100% !important;
|
||||||
|
.props-color{
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-between;
|
||||||
|
border: 1px ridge transparent;
|
||||||
|
&:hover{
|
||||||
|
border: 1px ridge #394b59;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
>li{
|
||||||
|
>label{
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
|
>ul{//.props-color-list
|
||||||
|
>li{
|
||||||
|
padding: 5px 0 0 0 !important;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.dal-editor{
|
||||||
|
>ul>li{
|
||||||
|
padding: 5px 0 0 0;
|
||||||
|
}
|
||||||
|
.outline{
|
||||||
|
div{
|
||||||
|
width: 100%;
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-between;
|
||||||
|
align-items: center;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.text-editor{
|
||||||
|
>div{
|
||||||
|
>span{
|
||||||
|
margin: auto 0;
|
||||||
|
}
|
||||||
|
>.numeric_input{
|
||||||
|
width: 60%;
|
||||||
|
.bp3-input-group{
|
||||||
|
width: 60%;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-between;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.leadout-editor{
|
||||||
|
display: flex;
|
||||||
|
>span{
|
||||||
|
width: 70%;
|
||||||
|
margin: auto 0;
|
||||||
|
align-items: center;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
#PropertiesBtn{
|
||||||
|
>div{
|
||||||
|
background: #fff;
|
||||||
|
transform: perspective(3em) rotateY(40deg);
|
||||||
|
border-radius: 0 10px 10px 0;
|
||||||
|
}
|
||||||
|
.bp3-button.bp3-small
|
||||||
|
{
|
||||||
|
&.iconTransBtn{
|
||||||
|
>span{
|
||||||
|
transform: rotate(-90deg);
|
||||||
|
-webkit-transition: transform .25s linear;
|
||||||
|
-moz-transition: transform .25s linear;
|
||||||
|
-o-transition: transform .25s linear;
|
||||||
|
transition: transform .25s linear;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
border-radius: 0 3px 3px 0;
|
||||||
|
min-height: 30px;
|
||||||
|
padding: 5px 5px 5px 0;
|
||||||
|
>span{
|
||||||
|
transform: rotate(90deg);
|
||||||
|
-webkit-transition: transform .25s linear;
|
||||||
|
-moz-transition: transform .25s linear;
|
||||||
|
-o-transition: transform .25s linear;
|
||||||
|
transition: transform .25s linear;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
@ -0,0 +1,128 @@
|
|||||||
|
import React from "react";
|
||||||
|
import { HTMLSelect, Button, Classes, Card } from "@blueprintjs/core";
|
||||||
|
import { DownPanelStore, ToolBarType } from "../../Store/DownPanelStore";
|
||||||
|
import { observer } from "mobx-react";
|
||||||
|
import { PropertiesStore } from "./PropertiesStore";
|
||||||
|
import { ColorModal } from "../EntityModal/EntityColorList";
|
||||||
|
import { AlignedDimension } from "../../../DatabaseServices/Dimension/AlignedDimension";
|
||||||
|
import { Properties_DimPanel } from "./Properties_Dim";
|
||||||
|
import { Entity } from "../../../DatabaseServices/Entity/Entity";
|
||||||
|
enum EntType
|
||||||
|
{
|
||||||
|
AlignDim = "AlignedDimension",
|
||||||
|
Line = "Line",
|
||||||
|
PolyLine = "Polyline",
|
||||||
|
Circle = "Circle",
|
||||||
|
Arc = "Arc",
|
||||||
|
Curve = "Curve",
|
||||||
|
Extrude = "Extrude",
|
||||||
|
}
|
||||||
|
export interface PropertiesPanelProps
|
||||||
|
{
|
||||||
|
store?: PropertiesStore;
|
||||||
|
}
|
||||||
|
@observer
|
||||||
|
export class PropertiesPanel extends React.Component<PropertiesPanelProps, {}>
|
||||||
|
{
|
||||||
|
componentWillUnmount()
|
||||||
|
{
|
||||||
|
this.props.store.Exit();
|
||||||
|
}
|
||||||
|
Exit()
|
||||||
|
{
|
||||||
|
let downStore = DownPanelStore.GetInstance() as DownPanelStore;
|
||||||
|
downStore.showToolBar = ToolBarType.toolbar;
|
||||||
|
}
|
||||||
|
HandleSelectOnChange(e: React.ChangeEvent<HTMLSelectElement>)
|
||||||
|
{
|
||||||
|
let store = this.props.store;
|
||||||
|
store.currentEnType = e.target.value;
|
||||||
|
store.GetCurrentColor();
|
||||||
|
}
|
||||||
|
GetEntsByType(ents: Entity[], type: string)
|
||||||
|
{
|
||||||
|
let res: Entity[] = [];
|
||||||
|
switch (type)
|
||||||
|
{
|
||||||
|
case EntType.AlignDim:
|
||||||
|
res = ents.filter((e) => { return e instanceof AlignedDimension; });
|
||||||
|
//todo: more
|
||||||
|
}
|
||||||
|
return res;
|
||||||
|
}
|
||||||
|
render()
|
||||||
|
{
|
||||||
|
let store = this.props.store;
|
||||||
|
let options = [];
|
||||||
|
let count = 0;
|
||||||
|
for (let [k, v] of store.enMap)
|
||||||
|
{
|
||||||
|
let label = k;
|
||||||
|
if (v.length > 1)
|
||||||
|
label += ` (${v.length.toString()})`;
|
||||||
|
count += v.length;
|
||||||
|
let value = k;
|
||||||
|
options.push({ label, value });
|
||||||
|
}
|
||||||
|
if (count > 1)
|
||||||
|
{
|
||||||
|
options.unshift({
|
||||||
|
label: `全部 (${count.toString()})`, value: "all"
|
||||||
|
});
|
||||||
|
}
|
||||||
|
else if (count === 0)
|
||||||
|
options.unshift({ label: "无选择", value: "none" });
|
||||||
|
let ents = store.GetEntitys();
|
||||||
|
return (
|
||||||
|
<div className="properties">
|
||||||
|
<Card>
|
||||||
|
<div className="header">
|
||||||
|
<span>特性</span>
|
||||||
|
<Button
|
||||||
|
icon="small-cross"
|
||||||
|
small
|
||||||
|
minimal
|
||||||
|
onClick={() => this.Exit()}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
<div className="select">
|
||||||
|
<HTMLSelect
|
||||||
|
value={store.currentEnType}
|
||||||
|
options={options}
|
||||||
|
onChange={e => this.HandleSelectOnChange(e)}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
<ul className={"props " + Classes.LIST_UNSTYLED}>
|
||||||
|
<span className="li-title">常规</span>
|
||||||
|
<li className="color">
|
||||||
|
<ColorModal store={store} />
|
||||||
|
</li>
|
||||||
|
|
||||||
|
{
|
||||||
|
ents.length > 0 && this.props.store.GetEntitys()[0]['Length'] !== undefined &&
|
||||||
|
<>
|
||||||
|
<span className="li-title">其他</span>
|
||||||
|
<li>
|
||||||
|
长度: {store.GetEntitys()[0]['Length'].toFixed(2)}
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
面积: {store.GetEntitys()[0]['Area'].toFixed(2)}
|
||||||
|
</li>
|
||||||
|
</>
|
||||||
|
}
|
||||||
|
{
|
||||||
|
ents.length > 0 && store.GetEntitys()[0] instanceof AlignedDimension &&
|
||||||
|
<>
|
||||||
|
<span className="li-title">其他</span>
|
||||||
|
<li>
|
||||||
|
<Properties_DimPanel ents={this.GetEntsByType(ents, EntType.AlignDim) as AlignedDimension[]} />
|
||||||
|
</li>
|
||||||
|
</>
|
||||||
|
}
|
||||||
|
</ul>
|
||||||
|
|
||||||
|
</Card>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
}
|
||||||
@ -0,0 +1,25 @@
|
|||||||
|
import { Entity } from "../../../DatabaseServices/Entity/Entity";
|
||||||
|
import { begin, end } from "xaop";
|
||||||
|
import { app } from "../../../ApplicationServices/Application";
|
||||||
|
import { EntityStore } from "../../Store/EntityStore";
|
||||||
|
|
||||||
|
export class PropertiesStore extends EntityStore
|
||||||
|
{
|
||||||
|
constructor()
|
||||||
|
{
|
||||||
|
super();
|
||||||
|
let selectCtrl = app.Editor.SelectCtrl;
|
||||||
|
begin(selectCtrl, selectCtrl.UpdateSelectEvent, () =>
|
||||||
|
{
|
||||||
|
selectCtrl.SelectSet.SelectEntityList.forEach(ent =>
|
||||||
|
{
|
||||||
|
if (ent instanceof Entity)
|
||||||
|
this.AddEnToMap(ent);
|
||||||
|
});
|
||||||
|
});
|
||||||
|
end(selectCtrl, selectCtrl.CanenEvent, () =>
|
||||||
|
{
|
||||||
|
this.enMap.clear();
|
||||||
|
});
|
||||||
|
}
|
||||||
|
}
|
||||||
@ -0,0 +1,243 @@
|
|||||||
|
import React from "react";
|
||||||
|
import { Card, Classes, Button, Slider, NumericInput, Position, Intent, Tooltip } from "@blueprintjs/core";
|
||||||
|
import { app } from "../../../ApplicationServices/Application";
|
||||||
|
import { KeyBoard } from "../../../Common/KeyEnum";
|
||||||
|
import { safeEval } from "../../../Common/eval";
|
||||||
|
import { AlignedDimension } from "../../../DatabaseServices/Dimension/AlignedDimension";
|
||||||
|
import { observable } from "mobx";
|
||||||
|
import { observer } from "mobx-react";
|
||||||
|
import { PropertiesStore } from "./PropertiesStore";
|
||||||
|
import { end, begin } from "xaop";
|
||||||
|
import { Object3D } from "three";
|
||||||
|
import { digitStrReg } from "../../../Common/Utils";
|
||||||
|
import { CommandWrap } from "../../../Editor/CommandMachine";
|
||||||
|
export interface Properties_DimPanelProps
|
||||||
|
{
|
||||||
|
ents: AlignedDimension[];
|
||||||
|
}
|
||||||
|
|
||||||
|
@observer
|
||||||
|
export class Properties_DimPanel extends React.Component<Properties_DimPanelProps, {}>
|
||||||
|
{
|
||||||
|
private removeFuncs: Function[] = [];
|
||||||
|
@observable outlineCheckDims: boolean = true;
|
||||||
|
@observable private dim_TextSize: number = 60;
|
||||||
|
private dim_InputEl: HTMLInputElement;
|
||||||
|
@observable private numericInputVal: string = "";
|
||||||
|
@observable private isPopoverOpen: boolean = false;
|
||||||
|
componentDidMount()
|
||||||
|
{
|
||||||
|
this.outlineCheckDims = !(app.Viewer.OutlinePass.selectedObjects.length > 0);
|
||||||
|
let propsStore = PropertiesStore.GetInstance() as PropertiesStore;
|
||||||
|
let selectCtrl = app.Editor.SelectCtrl;
|
||||||
|
propsStore.isWorking = true;
|
||||||
|
this.removeFuncs.push(
|
||||||
|
end(selectCtrl, selectCtrl.UpdateSelectEvent, () =>
|
||||||
|
{
|
||||||
|
this.outlineCheckDims = false;
|
||||||
|
}),
|
||||||
|
end(selectCtrl, selectCtrl.CanenEvent, () =>
|
||||||
|
{
|
||||||
|
this.outlineCheckDims = true;
|
||||||
|
}),
|
||||||
|
begin((new AlignedDimension()).AsyncUpdated, () =>
|
||||||
|
{
|
||||||
|
for (let al of this.props.ents)
|
||||||
|
{
|
||||||
|
app.Viewer.GripScene.Update(al.DrawObject);
|
||||||
|
}
|
||||||
|
}),
|
||||||
|
);
|
||||||
|
}
|
||||||
|
componentWillUnmount()
|
||||||
|
{
|
||||||
|
for (let f of this.removeFuncs)
|
||||||
|
f();
|
||||||
|
this.removeFuncs.length = 0;
|
||||||
|
}
|
||||||
|
private Dim_UseDefault(als: AlignedDimension[])
|
||||||
|
{
|
||||||
|
CommandWrap(() =>
|
||||||
|
{
|
||||||
|
this.dim_TextSize = 60;
|
||||||
|
for (let al of als)
|
||||||
|
{
|
||||||
|
al.TextSize = 60;
|
||||||
|
al.LeadOutOffsetY = 72;
|
||||||
|
al.LeadOutOffsetX = 30;
|
||||||
|
al.LeadOutVisible = true;
|
||||||
|
al.LeadOutFlipped = false;
|
||||||
|
this.numericInputVal = "60";
|
||||||
|
// this.dim_InputEl.setState({ value: "60" });
|
||||||
|
}
|
||||||
|
}, "重置标注形态");
|
||||||
|
}
|
||||||
|
render()
|
||||||
|
{
|
||||||
|
let ents = this.props.ents;
|
||||||
|
return (
|
||||||
|
<Card className={"dal-editor"}>
|
||||||
|
<ul className={Classes.LIST_UNSTYLED}>
|
||||||
|
<li className="outline">
|
||||||
|
<div>
|
||||||
|
<span>亮显: </span>
|
||||||
|
<Button
|
||||||
|
className={Classes.INTENT_PRIMARY}
|
||||||
|
icon={this.outlineCheckDims ? "eye-open" : "eye-off"}
|
||||||
|
text={this.outlineCheckDims ? "亮显查看" : "关闭亮显"}
|
||||||
|
minimal
|
||||||
|
small
|
||||||
|
onClick={() =>
|
||||||
|
{
|
||||||
|
if (this.outlineCheckDims && app.Viewer.OutlinePass.selectedObjects.length === 0)
|
||||||
|
{
|
||||||
|
let alobjs: Object3D[] = [];
|
||||||
|
for (let al of ents)
|
||||||
|
{
|
||||||
|
let obj = al.DrawObject;
|
||||||
|
alobjs.push(obj);
|
||||||
|
app.Viewer.GripScene.Append(obj);
|
||||||
|
}
|
||||||
|
app.Viewer.OutlinePass.selectedObjects = alobjs;
|
||||||
|
}
|
||||||
|
else
|
||||||
|
{
|
||||||
|
app.Viewer.OutlinePass.selectedObjects = [];
|
||||||
|
app.Viewer.GripScene.Clear();
|
||||||
|
}
|
||||||
|
app.Viewer.Render();
|
||||||
|
this.outlineCheckDims = !this.outlineCheckDims;
|
||||||
|
}}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</li>
|
||||||
|
<li className="text-editor">
|
||||||
|
<div>
|
||||||
|
<span>文字尺寸: </span>
|
||||||
|
<div className="numeric_input">
|
||||||
|
<Tooltip
|
||||||
|
content={"仅限1-999间的数字!"}
|
||||||
|
position={Position.TOP}
|
||||||
|
intent={Intent.WARNING}
|
||||||
|
isOpen={this.isPopoverOpen}
|
||||||
|
>
|
||||||
|
<NumericInput
|
||||||
|
min={1}
|
||||||
|
stepSize={1}
|
||||||
|
minorStepSize={1}
|
||||||
|
inputRef={el => { this.dim_InputEl = el; }}
|
||||||
|
selectAllOnFocus
|
||||||
|
onValueChange={(vn, vs) =>
|
||||||
|
{
|
||||||
|
let isOK = digitStrReg.test(vs);
|
||||||
|
if (isOK || vs === "")
|
||||||
|
{
|
||||||
|
this.dim_InputEl.classList.remove("bp3-intent-danger");
|
||||||
|
this.isPopoverOpen = false;
|
||||||
|
}
|
||||||
|
else
|
||||||
|
{
|
||||||
|
this.dim_InputEl.classList.add("bp3-intent-danger");
|
||||||
|
this.isPopoverOpen = true;
|
||||||
|
}
|
||||||
|
}}
|
||||||
|
value={this.numericInputVal}
|
||||||
|
onFocus={(e) =>
|
||||||
|
{
|
||||||
|
e.target.onkeydown = (e) =>
|
||||||
|
{
|
||||||
|
if (e.keyCode === KeyBoard.Escape)
|
||||||
|
{
|
||||||
|
//@ts-ignore
|
||||||
|
e.target.blur();
|
||||||
|
}
|
||||||
|
else if (e.keyCode === KeyBoard.Enter || e.keyCode === KeyBoard.Space)
|
||||||
|
{
|
||||||
|
if (!this.isPopoverOpen)
|
||||||
|
//@ts-ignore
|
||||||
|
e.target.blur();
|
||||||
|
else
|
||||||
|
//@ts-ignore
|
||||||
|
e.target.focus();
|
||||||
|
e.preventDefault();
|
||||||
|
}
|
||||||
|
e.stopPropagation();
|
||||||
|
};
|
||||||
|
}}
|
||||||
|
onBlur={(e) =>
|
||||||
|
{
|
||||||
|
let val = safeEval(e.target.value);
|
||||||
|
if (!isNaN(val))
|
||||||
|
{
|
||||||
|
if (val <= 0 || val > 999)
|
||||||
|
app.Editor.Prompt('文字尺寸仅限1-999间的数字!');
|
||||||
|
else
|
||||||
|
{
|
||||||
|
this.dim_TextSize = val;
|
||||||
|
CommandWrap(() =>
|
||||||
|
{
|
||||||
|
for (let al of this.props.ents)
|
||||||
|
{
|
||||||
|
al.TextSize = val;
|
||||||
|
}
|
||||||
|
}, "修改标注字体大小");
|
||||||
|
}
|
||||||
|
}
|
||||||
|
else
|
||||||
|
app.Editor.Prompt('文字尺寸仅限1-999间的数字!');
|
||||||
|
}}
|
||||||
|
/>
|
||||||
|
</Tooltip>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<Slider
|
||||||
|
min={20}
|
||||||
|
max={150}
|
||||||
|
stepSize={5}
|
||||||
|
labelStepSize={25}
|
||||||
|
onChange={(value) =>
|
||||||
|
{
|
||||||
|
this.numericInputVal = value.toString();
|
||||||
|
this.dim_TextSize = value;
|
||||||
|
for (let al of ents)
|
||||||
|
{
|
||||||
|
al.TextSize = this.dim_TextSize;
|
||||||
|
}
|
||||||
|
}}
|
||||||
|
value={this.dim_TextSize}
|
||||||
|
vertical={false}
|
||||||
|
/>
|
||||||
|
</li>
|
||||||
|
<li className="leadout-editor">
|
||||||
|
<span>引线调整: </span>
|
||||||
|
<div>
|
||||||
|
<Button icon="swap-horizontal" text="切换方向" minimal small onClick={() =>
|
||||||
|
{
|
||||||
|
CommandWrap(() =>
|
||||||
|
{
|
||||||
|
for (let al of ents)
|
||||||
|
{
|
||||||
|
al.toggleLeadOutFlipped();
|
||||||
|
}
|
||||||
|
}, "切换标注引线方向");
|
||||||
|
}} />
|
||||||
|
<Button icon="eye-open" text="切换显示" minimal small onClick={() =>
|
||||||
|
{
|
||||||
|
CommandWrap(() =>
|
||||||
|
{
|
||||||
|
for (let al of ents)
|
||||||
|
{
|
||||||
|
al.toggleLeadOutVisible();
|
||||||
|
}
|
||||||
|
}, "切换标注引线显示");
|
||||||
|
}} />
|
||||||
|
</div>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<Button className={Classes.INTENT_WARNING} text="重置为默认" minimal small onClick={() => this.Dim_UseDefault(ents)} />
|
||||||
|
</li>
|
||||||
|
</ul>
|
||||||
|
</Card>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
}
|
||||||
Loading…
Reference in new issue