MrKBear/living-together
2
2
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

Optimize attr inputer

Browse Source
This commit is contained in:
MrKBear 2022-03-08 13:53:08 +08:00
parent 8f5fff920f
commit 45975cafe7
5 changed files with 82 additions and 54 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
source/Component/AttrInput/AttrInput.tsx
View File

@ -142,6 +142,11 @@ class AttrInput extends Component<IAttrInputProps> {
return true;
}
public constructor(props: IAttrInputProps) {
super(props);
this.updateValueFromProps(props.value);
}
private updateValueFromProps(val: IAttrInputProps["value"]) {
const value = val ?? (this.props.isNumber ? "0" : "");
this.value = value.toString();

2
source/Context/Status.tsx
View File

@ -173,7 +173,7 @@ function useStatusWithEvent(...events: Array<keyof IStatusEvent>) {
private mountEvent() {
if (this.status && !this.isEventMount) {
this.isEventMount = true;
console.log("event mount");
console.log("Component dep event mount: " + events.join(", "));
for (let i = 0; i < events.length; i++) {
this.status.on(events[i], this.handelChange);
}

3
source/Localization/EN-US.ts
View File

@ -38,6 +38,9 @@ const EN_US = {
"Common.Attr.Key.Position.X": "Position X",
"Common.Attr.Key.Position.Y": "Position Y",
"Common.Attr.Key.Position.Z": "Position Z",
"Common.Attr.Key.Radius.X": "Radius X",
"Common.Attr.Key.Radius.Y": "Radius Y",
"Common.Attr.Key.Radius.Z": "Radius Z",
"Common.Attr.Key.Error.Multiple": "Cannot edit multiple values",
"Panel.Info.Range.Details.Attr.Error.Not.Range": "The focus object is not a Range",
"Panel.Info.Range.Details.Attr.Error.Unspecified": "Unspecified range object",

3
source/Localization/ZH-CN.ts
View File

@ -38,6 +38,9 @@ const ZH_CN = {
"Common.Attr.Key.Position.X": "X 坐标",
"Common.Attr.Key.Position.Y": "Y 坐标",
"Common.Attr.Key.Position.Z": "Z 坐标",
"Common.Attr.Key.Radius.X": "X 半径",
"Common.Attr.Key.Radius.Y": "Y 半径",
"Common.Attr.Key.Radius.Z": "Z 半径",
"Common.Attr.Key.Error.Multiple": "无法编辑多重数值",
"Panel.Info.Range.Details.Attr.Error.Not.Range": "焦点对象不是一个范围",
"Panel.Info.Range.Details.Attr.Error.Unspecified": "未指定范围对象",

123
source/Panel/RangeDetails/RangeDetails.tsx
View File

@ -1,6 +1,6 @@
import { Component, ReactNode } from "react";
import { AttrInput } from "@Component/AttrInput/AttrInput";
import { useStatusWithEvent, IMixinStatusProps } from "@Context/Status";
import { useStatusWithEvent, IMixinStatusProps, Status } from "@Context/Status";
import { AllI18nKeys } from "@Component/Localization/Localization";
import { Range } from "@Model/Range";
import { ObjectID } from "@Model/Renderer";
@ -8,65 +8,82 @@ import "./RangeDetails.scss";
@useStatusWithEvent("rangeAttrChange", "focusObjectChange")
class RangeDetails extends Component<IMixinStatusProps> {
public readonly AttrI18nKey: AllI18nKeys[] = [
"Common.Attr.Key.Display.Name",
"Common.Attr.Key.Position.X",
"Common.Attr.Key.Position.Y",
"Common.Attr.Key.Position.Z",
"Common.Attr.Key.Radius.X",
"Common.Attr.Key.Radius.Y",
"Common.Attr.Key.Radius.Z"
]
private renderErrorFrom(error: AllI18nKeys) {
return <>
<AttrInput keyI18n="Common.Attr.Key.Display.Name" disable disableI18n={error}/>
<AttrInput keyI18n="Common.Attr.Key.Position.X" disable disableI18n={error}/>
<AttrInput keyI18n="Common.Attr.Key.Position.Y" disable disableI18n={error}/>
<AttrInput keyI18n="Common.Attr.Key.Position.Z" disable disableI18n={error}/>
</>
{this.AttrI18nKey.map((key, index) => {
return <AttrInput key={index} keyI18n={key} disable disableI18n={error}/>
})}
</>
}
private renderAttrInput(
id: ObjectID, key: number, val: string | number | undefined,
change: (val: string, status: Status) => any,
step?: number, max?: number, min?: number
) {
// console.log(id, key, val, step, max, min)
const handelFunc = (e: string) => {
if (this.props.status) {
change(e, this.props.status);
}
}
if (step) {
return <AttrInput
id={id} isNumber={true} step={step} keyI18n={this.AttrI18nKey[key]}
value={val} max={max} min={min}
valueChange={handelFunc}
/>
} else {
return <AttrInput
id={id} keyI18n={this.AttrI18nKey[key]} value={val}
valueChange={handelFunc}
/>
}
}
private renderFrom(range: Range) {
// console.log(range);
return <>
<AttrInput
id={range.id}
keyI18n="Common.Attr.Key.Display.Name"
value={range.displayName}
valueChange={(e) => {
this.props.status ? this.props.status.changeRangeAttrib(range.id, "displayName", e) : null;
}}
/>
<AttrInput
id={range.id}
isNumber={true}
step={.1}
keyI18n="Common.Attr.Key.Position.X"
value={range.position[0]}
valueChange={(e) => {
if (this.props.status) {
range.position[0] = (e as any) / 1;
this.props.status.changeRangeAttrib(range.id, "position", range.position);
}
}}
/>
<AttrInput
id={range.id}
isNumber={true}
step={.1}
keyI18n="Common.Attr.Key.Position.Y"
value={range.position[1]}
valueChange={(e) => {
if (this.props.status) {
range.position[1] = (e as any) / 1;
this.props.status.changeRangeAttrib(range.id, "position", range.position);
}
}}
/>
<AttrInput
id={range.id}
isNumber={true}
step={.1}
keyI18n="Common.Attr.Key.Position.Z"
value={range.position[2]}
valueChange={(e) => {
if (this.props.status) {
range.position[2] = (e as any) / 1;
this.props.status.changeRangeAttrib(range.id, "position", range.position);
}
}}
/>
{this.renderAttrInput(range.id, 0, range.displayName, (val, status) => {
status.changeRangeAttrib(range.id, "displayName", val);
})}
{this.renderAttrInput(range.id, 1, range.position[0], (val, status) => {
range.position[0] = (val as any) / 1;
status.changeRangeAttrib(range.id, "position", range.position);
}, .1)}
{this.renderAttrInput(range.id, 2, range.position[1], (val, status) => {
range.position[1] = (val as any) / 1;
status.changeRangeAttrib(range.id, "position", range.position);
}, .1)}
{this.renderAttrInput(range.id, 3, range.position[2], (val, status) => {
range.position[2] = (val as any) / 1;
status.changeRangeAttrib(range.id, "position", range.position);
}, .1)}
{this.renderAttrInput(range.id, 4, range.radius[0], (val, status) => {
range.radius[0] = (val as any) / 1;
status.changeRangeAttrib(range.id, "radius", range.radius);
}, .1, undefined, 0)}
{this.renderAttrInput(range.id, 5, range.radius[1], (val, status) => {
range.radius[1] = (val as any) / 1;
status.changeRangeAttrib(range.id, "radius", range.radius);
}, .1, undefined, 0)}
{this.renderAttrInput(range.id, 6, range.radius[2], (val, status) => {
range.radius[2] = (val as any) / 1;
status.changeRangeAttrib(range.id, "radius", range.radius);
}, .1, undefined, 0)}
</>
}