Add range details panel & Attrinput component #15
@ -1,9 +1,12 @@
|
||||
@import "../Theme/Theme.scss";
|
||||
|
||||
$line-min-height: 24px;
|
||||
$root-min-height: 26px;
|
||||
|
||||
div.attr-input {
|
||||
width: 100%;
|
||||
display: flex;
|
||||
min-height: 24px;
|
||||
min-height: $line-min-height;
|
||||
padding: 5px 0;
|
||||
|
||||
div.input-intro {
|
||||
@ -20,6 +23,7 @@ div.attr-input {
|
||||
width: 50%;
|
||||
height: 100%;
|
||||
max-width: 180px;
|
||||
min-height: $root-min-height;
|
||||
|
||||
div.input-content {
|
||||
box-sizing: border-box;
|
||||
@ -29,13 +33,14 @@ div.attr-input {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
min-height: 24px;
|
||||
min-height: $root-min-height;
|
||||
|
||||
input {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
border: none;
|
||||
outline:none;
|
||||
min-height: $line-min-height;
|
||||
};
|
||||
|
||||
input:focus {
|
||||
@ -43,7 +48,7 @@ div.attr-input {
|
||||
}
|
||||
|
||||
div.button-left, div.button-right {
|
||||
min-height: 24px;
|
||||
min-height: $line-min-height;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
@ -66,7 +71,7 @@ div.attr-input {
|
||||
div.err-message {
|
||||
color: $lt-red;
|
||||
padding-top: 5px;
|
||||
min-height: 24px;
|
||||
min-height: $line-min-height;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
@ -55,6 +55,10 @@ class AttrInput extends Component<IAttrInputProps> {
|
||||
|
||||
private handelValueChange = () => {
|
||||
if (!this.error && this.props.valueChange) {
|
||||
if (this.props.isNumber) {
|
||||
let numberVal = (this.value as any) * 10000;
|
||||
this.value = (Math.round(numberVal) / 10000).toString();
|
||||
}
|
||||
this.props.valueChange(this.value);
|
||||
}
|
||||
this.forceUpdate();
|
||||
@ -122,13 +126,18 @@ class AttrInput extends Component<IAttrInputProps> {
|
||||
</>
|
||||
}
|
||||
|
||||
public render(): ReactNode {
|
||||
public shouldComponentUpdate(nextProps: IAttrInputProps) {
|
||||
this.updateValueFromProps(nextProps.value);
|
||||
return true;
|
||||
}
|
||||
|
||||
if (!this.error) {
|
||||
const value = this.props.value ?? (this.props.isNumber ? "0" : "");
|
||||
this.value = value.toString();
|
||||
this.error = this.check(value.toString());
|
||||
}
|
||||
private updateValueFromProps(val: IAttrInputProps["value"]) {
|
||||
const value = val ?? (this.props.isNumber ? "0" : "");
|
||||
this.value = value.toString();
|
||||
this.error = this.check(value.toString());
|
||||
}
|
||||
|
||||
public render(): ReactNode {
|
||||
|
||||
return <Theme
|
||||
className="attr-input"
|
||||
|
@ -74,7 +74,7 @@ class Layout extends Emitter<ILayoutEvent> {
|
||||
}
|
||||
|
||||
public focus = (panelId: string) => {
|
||||
if (panelId === "") {
|
||||
if (panelId === "" && this.focusId !== "") {
|
||||
this.focusId = panelId;
|
||||
this.emit("switchTab", this);
|
||||
}
|
||||
@ -89,10 +89,14 @@ class Layout extends Emitter<ILayoutEvent> {
|
||||
}
|
||||
}
|
||||
if (index >= 0) {
|
||||
layout.focusPanel = panelId;
|
||||
this.focusId = panelId;
|
||||
this.emit("switchTab", this);
|
||||
return true;
|
||||
if (layout.focusPanel === panelId && this.focusId === panelId) {
|
||||
return true;
|
||||
} else {
|
||||
layout.focusPanel = panelId;
|
||||
this.focusId = panelId;
|
||||
this.emit("switchTab", this);
|
||||
return true;
|
||||
}
|
||||
}
|
||||
}
|
||||
})
|
||||
|
@ -40,17 +40,27 @@ class RangeDetails extends Component<IMixinStatusProps> {
|
||||
}}
|
||||
/>
|
||||
<AttrInput
|
||||
isNumber={true}
|
||||
step={.1}
|
||||
keyI18n="Common.Attr.Key.Position.Y"
|
||||
value={range.position[1]}
|
||||
valueChange={(e) => {
|
||||
this.props.status ? this.props.status.changeRangeAttrib(range.id, "displayName", e) : null;
|
||||
if (this.props.status) {
|
||||
range.position[1] = (e as any) / 1;
|
||||
this.props.status.changeRangeAttrib(range.id, "position", range.position);
|
||||
}
|
||||
}}
|
||||
/>
|
||||
<AttrInput
|
||||
isNumber={true}
|
||||
step={.1}
|
||||
keyI18n="Common.Attr.Key.Position.Z"
|
||||
value={range.position[2]}
|
||||
valueChange={(e) => {
|
||||
this.props.status ? this.props.status.changeRangeAttrib(range.id, "displayName", e) : null;
|
||||
if (this.props.status) {
|
||||
range.position[2] = (e as any) / 1;
|
||||
this.props.status.changeRangeAttrib(range.id, "position", range.position);
|
||||
}
|
||||
}}
|
||||
/>
|
||||
</>
|
||||
|
Loading…
Reference in New Issue
Block a user