Add range details panel & Attrinput component #15

Merged
MrKBear merged 7 commits from dev-mrkbear into master 2022-03-08 11:56:11 +08:00
4 changed files with 45 additions and 17 deletions
Showing only changes of commit 0e1aa51d4b - Show all commits

View File

@ -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;
}
}
}

View File

@ -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"

View File

@ -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;
}
}
}
})

View File

@ -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);
}
}}
/>
</>