Public
/
WebCAD
mirror of https://gitee.com/cf-fz/WebCAD.git
7
1
Fork 0
Code Issues Projects Releases Wiki Activity

!475 右侧模板参数修复

Browse Source
pull/475/MERGE
肖诗雅 5 years ago committed by ChenX
parent 43d91f2179
commit 48f8d304d8
2 changed files with 177 additions and 24 deletions
Show Stats Download Patch File Download Diff File

23
src/UI/Components/RightPanel/TemplateParam.less
Unescape View File

@ -5,8 +5,11 @@
.bp3-tree{
height: 100%;
overflow: auto;
.bp3-tree-node-content{
height: 20px;
.bp3-tree-node-list{
width: fit-content;
.bp3-tree-node-content{
height: 20px;
}
}
}
}
@ -15,6 +18,22 @@
.bp3-input{
width: 5rem;
}
.rotateExpress{
display: flex;
justify-content: space-around;
}
.bp3-numeric-input{
padding: 0;
height: unset;
line-height: unset;
.bp3-button-group.bp3-vertical>.bp3-button{
width: 20px;
}
.bp3-input{
padding-left: 10px;
width: 4rem;
}
}
&>div {
input {
height: 30px;

178
src/UI/Components/RightPanel/TemplateParamPanel.tsx
Unescape View File

@ -1,4 +1,4 @@
import { Button, Classes, ContextMenu, H5, Intent, ITreeNode, Menu, MenuItem, Tree } from "@blueprintjs/core";
import { Button, Classes, ContextMenu, H5, Intent, ITreeNode, Menu, MenuItem, Tree, NumericInput } from "@blueprintjs/core";
import { observable } from "mobx";
import { observer } from "mobx-react";
import React from "react";
@ -18,6 +18,8 @@ import { TemplateRecord } from "../../../DatabaseServices/Template/TemplateRecor
import { TemplateSplitType } from "../../../DatabaseServices/Template/TemplateType";
import { CommandWrap } from "../../../Editor/CommandMachine";
import { INeedUpdateParams } from "../Template/TemplateComponent";
import { SelectSetBase } from "../../../Editor/SelectBase";
import { KeyBoard } from "../../../Common/KeyEnum";
interface TemplateParamState
{
@ -28,6 +30,11 @@ interface TemplateParamProps
{
selectTemplateId: number;
}
enum OutlineType
{
This = 0,
Child = 1,
}
@observer
export class TemplateParamPanel extends React.Component<TemplateParamProps, TemplateParamState>
@ -41,6 +48,9 @@ export class TemplateParamPanel extends React.Component<TemplateParamProps, Temp
@observable private currentProps: INeedUpdateParams[] = [];
//移除注入
private removeFuncs: Function[] = [];
private scrollFollow: boolean;
private scrollCard: HTMLElement;
private selectedNodeOrder: number = 0;
constructor(props: Readonly<TemplateParamProps>)
{
super(props);
@ -83,6 +93,7 @@ export class TemplateParamPanel extends React.Component<TemplateParamProps, Temp
{
if (prevProps.selectTemplateId !== this.props.selectTemplateId)
{
this.scrollFollow = true;
this.currentTemplateId = this.props.selectTemplateId;
this.displayTemplateRootId = undefined;
@ -130,9 +141,17 @@ export class TemplateParamPanel extends React.Component<TemplateParamProps, Temp
{
let n = allnodes[i];
n.isSelected = n.nodeData === temp;
if (n.isSelected)
this.selectedNodeOrder = i;
allnodes.push(...n.childNodes);
}
this.setState({ nodes });
if (this.scrollFollow && this.scrollCard)
{
let treeEl = this.scrollCard.firstElementChild;
treeEl.scrollTop = (this.selectedNodeOrder * 30);
}
this.scrollFollow = false;
}
Template2TreeNode = (template: TemplateRecord): ITreeNode =>
@ -167,9 +186,13 @@ export class TemplateParamPanel extends React.Component<TemplateParamProps, Temp
<Menu>
{
<>
<MenuItem
text="亮显本节点"
onClick={() => { this.OutlineSpace(node, OutlineType.This) }}
/>
<MenuItem
text="亮显空间子层"
onClick={() => { this.OutlineSpaceChild(node) }}
onClick={() => { this.OutlineSpace(node, OutlineType.Child) }}
/>
<MenuItem
text="删除节点"
@ -257,24 +280,39 @@ export class TemplateParamPanel extends React.Component<TemplateParamProps, Temp
}, "删除模板节点");
app.Editor.UpdateScreen();
}
//亮显空间子层
OutlineSpaceChild = (node: ITreeNode) =>
//亮显节点
OutlineSpace = (node: ITreeNode, type: OutlineType) =>
{
app.Editor.SelectCtrl.Cancel();
let tr = node.nodeData as TemplateRecord;
let treeNodes = this.GetAllChildFromThisTemplate(tr);
let outlineObj3ds: Object3D[] = [];
for (let tn of treeNodes)
switch (type)
{
for (let t of tn.Objects)
{
let obj3d = t.Object as Entity;
outlineObj3ds.push(obj3d.DrawObject);
}
case OutlineType.This:
for (let t of tr.Objects)
{
let obj3d = t.Object as Entity;
outlineObj3ds.push(obj3d.DrawObject);
}
break;
case OutlineType.Child:
let treeNodes = this.GetAllChildFromThisTemplate(tr);
for (let tn of treeNodes)
{
for (let t of tn.Objects)
{
let obj3d = t.Object as Entity;
outlineObj3ds.push(obj3d.DrawObject);
}
}
break;
default:
break;
}
app.Viewer.OutlinePass.selectedObjects = outlineObj3ds;
app.Editor.UpdateScreen();
let selectData = new SelectSetBase(app.Viewer);
selectData.m_SelectList = outlineObj3ds;
app.Editor.SelectCtrl.AddSelect(selectData);
app.Editor.SelectCtrl.UpdateView();
}
//切割空间 待完善
@ -307,6 +345,7 @@ export class TemplateParamPanel extends React.Component<TemplateParamProps, Temp
<div id="templateParam">
{/* 模板树 */}
<div
ref={el => this.scrollCard = el}
className="template-tree"
>
<Tree
@ -335,9 +374,42 @@ export class TemplateParamPanel extends React.Component<TemplateParamProps, Temp
const POSITION_PAR = ["PX", "PY", "PZ"];
const ROTATION_PAR = ["RX", "RY", "RZ"];
let ot = 0;
@observer
export class TemplateParamDetail extends React.Component<{ updateParams: INeedUpdateParams[], currentShowTemplate: TemplateRecord, callback: Function }> {
@observable basePtVals = { PX: "0", PY: "0", PZ: "0" };
@observable rotateVals = { RX: "0", RY: "0", RZ: "0" };
private paramdef = this.props.currentShowTemplate.GetParameterDefinition();;
componentDidMount()
{
this.basePtVals = { PX: this.paramdef.PX, PY: this.paramdef.PY, PZ: this.paramdef.PZ };
this.rotateVals = { RX: this.paramdef.RX, RY: this.paramdef.RY, RZ: this.paramdef.RZ };
}
componentDidUpdate(prevProps)
{
if (prevProps.currentShowTemplate !== this.props.currentShowTemplate)
if (this.props.currentShowTemplate instanceof TemplateRecord)
{
this.paramdef = this.props.currentShowTemplate.GetParameterDefinition();
this.basePtVals = { PX: this.paramdef.PX, PY: this.paramdef.PY, PZ: this.paramdef.PZ };
this.rotateVals = { RX: this.paramdef.RX, RY: this.paramdef.RY, RZ: this.paramdef.RZ };
}
}
private onKeydown = async (e: React.KeyboardEvent<HTMLInputElement>, par: INeedUpdateParams) =>
{
if (e.keyCode === KeyBoard.Enter)
{
let dt = new Date().getTime();
if (dt - ot < 200 && dt - ot > 0)
{
if (this.handleOnBlur(par))
await this.ApplyNewValue();
}
ot = dt;
}
e.stopPropagation()
}
ApplyNewValue = async () =>
{
const { currentShowTemplate, callback } = this.props;
@ -347,7 +419,7 @@ export class TemplateParamDetail extends React.Component<{ updateParams: INeedUp
{
let param = currentShowTemplate.GetParam(par.name);
param.expr = par.expr;
});
})
await currentShowTemplate.UpdateTemplateTree();
}, "应用参数修改");
callback();
@ -371,6 +443,25 @@ export class TemplateParamDetail extends React.Component<{ updateParams: INeedUp
return "Z";
}
}
handleOnBlur = (par: INeedUpdateParams) =>
{
if (par.expr !== "")
{
let newVal = safeEval(par.expr as string, this.paramdef);
let param = this.props.currentShowTemplate.GetParam(par.name);
if (!isNaN(newVal))
{
param.expr = par.expr;
return true;
}
else
{
app.Editor.Prompt(`表达式 ${par.name}: ${par.expr} 中存在未定义值`);
return false;
}
}
return true;
}
public render()
{
const { currentShowTemplate } = this.props;
@ -393,9 +484,18 @@ export class TemplateParamDetail extends React.Component<{ updateParams: INeedUp
<span>{FixedNotZero(par.value, 2)}</span>
<span>{par.description}</span>
<input
onKeyDown={(e) => { this.onKeydown(e, par) }}
className={Classes.INPUT}
value={par.expr as string}
onChange={e => par.expr = e.target.value as string}
onBlur={(e) =>
{
let res = this.handleOnBlur(par);
if (!res)
e.target.classList.add("bp3-intent-danger");
else
e.target.classList.remove("bp3-intent-danger");
}}
/>
</li>
)
@ -415,9 +515,24 @@ export class TemplateParamDetail extends React.Component<{ updateParams: INeedUp
<label style={{ margin: "0 5px" }} onKeyDown={e => e.stopPropagation()}>
{par.name[1]}:
<input
onKeyDown={(e) => { this.onKeydown(e, par) }}
className={Classes.INPUT}
value={par.expr as string}
onChange={e => par.expr = e.target.value}
value={par.name === "PX" ? this.basePtVals.PX : (par.name === "PY" ? this.basePtVals.PY : this.basePtVals.PZ) as string}
onFocus={e => e.target.setSelectionRange(0, e.target.value.length)}
onChange={e =>
{
par.expr = e.target.value;
par.name === "PX" ? this.basePtVals.PX = e.target.value :
(par.name === "PY" ? this.basePtVals.PY = e.target.value : this.basePtVals.PZ = e.target.value);
}}
onBlur={(e) =>
{
let res = this.handleOnBlur(par);
if (!res)
e.target.classList.add("bp3-intent-danger");
else
e.target.classList.remove("bp3-intent-danger");
}}
/>
</label>
)
@ -425,7 +540,7 @@ export class TemplateParamDetail extends React.Component<{ updateParams: INeedUp
}
</div>
<H5>旋转角度表达式</H5>
<div>
<div className="rotateExpress">
{
this.props.updateParams.map(par =>
{
@ -433,10 +548,29 @@ export class TemplateParamDetail extends React.Component<{ updateParams: INeedUp
return (
<label style={{ margin: "0 5px" }} onKeyDown={e => e.stopPropagation()}>
{par.name[1]}:
<input
<NumericInput
min={0}
max={360}
stepSize={90}
onKeyDown={(e) => { this.onKeydown(e, par) }}
className={Classes.INPUT}
value={par.expr as string}
onChange={e => par.expr = e.target.value}
value={par.name === "RX" ? this.rotateVals.RX : (par.name === "RY" ? this.rotateVals.RY : this.rotateVals.RZ) as string}
selectAllOnFocus={true}
onValueChange={(valueAsNumber: number, valueAsString: string) =>
{
par.expr = valueAsString;
par.name === "RX" ? this.rotateVals.RX = valueAsString :
(par.name === "RY" ? this.rotateVals.RY = valueAsString : this.rotateVals.RZ = valueAsString);
}}
onButtonClick={async () => { await this.ApplyNewValue() }}
onBlur={(e) =>
{
let res = this.handleOnBlur(par);
if
(!res) e.target.classList.add("bp3-intent-danger");
else
e.target.classList.remove("bp3-intent-danger");
}}
/>
</label>
)

Write Preview
Loading…
Cancel
Save