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

Recoding range details

Browse Source
This commit is contained in:
MrKBear 2022-03-17 15:32:28 +08:00
parent c44c10ad42
commit d7d6ac4058
1 changed files with 52 additions and 87 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -13,50 +13,24 @@ import "./RangeDetails.scss";
@useStatusWithEvent("rangeAttrChange", "focusObjectChange", "rangeLabelChange") @useStatusWithEvent("rangeAttrChange", "focusObjectChange", "rangeLabelChange")
class RangeDetails extends Component<IMixinStatusProps> { class RangeDetails extends Component<IMixinStatusProps> {
private renderAttrInput(
id: ObjectID, key: AllI18nKeys, val: string | number | undefined,
change: (val: string, status: Status) => any,
step?: number, max?: number, min?: number
) {
const handelFunc = (e: string) => {
if (this.props.status) {
change(e, this.props.status);
}
}
if (step) {
return <AttrInput
id={id} isNumber={true} step={step} keyI18n={key}
value={val} max={max} min={min}
valueChange={handelFunc}
/>
} else {
return <AttrInput
id={id} keyI18n={key} value={val}
valueChange={handelFunc}
/>
}
}
private renderFrom(range: Range) { private renderFrom(range: Range) {
return <> return <>
<Message i18nKey="Common.Attr.Title.Basic" isTitle first/> <Message i18nKey="Common.Attr.Title.Basic" isTitle first/>
{this.renderAttrInput( <AttrInput
range.id, "Common.Attr.Key.Display.Name", range.displayName, id={range.id} keyI18n="Common.Attr.Key.Display.Name" value={range.displayName}
(val, status) => { valueChange={(val) => {
status.changeRangeAttrib(range.id, "displayName", val); this.props.status?.changeRangeAttrib(range.id, "displayName", val);
} }}
)} />
<ColorInput <ColorInput
keyI18n="Common.Attr.Key.Color" keyI18n="Common.Attr.Key.Color"
value={range.color} normal value={range.color} normal
valueChange={(color) => { valueChange={(color) => {
if (this.props.status) { this.props.status?.changeRangeAttrib(range.id, "color", color);
this.props.status.changeRangeAttrib(range.id, "color", color);
}
}} }}
/> />
@ -64,32 +38,17 @@ class RangeDetails extends Component<IMixinStatusProps> {
keyI18n="Common.Attr.Key.Label" keyI18n="Common.Attr.Key.Label"
labels={range.allLabels()} labels={range.allLabels()}
labelAdd={(label) => { labelAdd={(label) => {
if (this.props.status) { this.props.status?.addRangeLabel(range.id, label);
this.props.status.addRangeLabel(range.id, label);
}
}} }}
labelDelete={(label) => { labelDelete={(label) => {
if (this.props.status) { this.props.status?.deleteRangeLabel(range.id, label);
this.props.status.deleteRangeLabel(range.id, label);
}
}} }}
/> />
<TogglesInput <TogglesInput
keyI18n="Common.Attr.Key.Display" keyI18n="Common.Attr.Key.Display"
value={range.display} valueChange={(val) => { value={range.display} valueChange={(val) => {
if (this.props.status) { this.props.status?.changeRangeAttrib(range.id, "display", val);
this.props.status.changeRangeAttrib(range.id, "display", val);
}
}}
/>
<TogglesInput
keyI18n="Common.Attr.Key.Update"
value={range.update} valueChange={(val) => {
if (this.props.status) {
this.props.status.changeRangeAttrib(range.id, "update", val);
}
}} }}
/> />
@ -106,53 +65,59 @@ class RangeDetails extends Component<IMixinStatusProps> {
<Message i18nKey="Common.Attr.Title.Spatial" isTitle/> <Message i18nKey="Common.Attr.Title.Spatial" isTitle/>
{this.renderAttrInput( <AttrInput
range.id, "Common.Attr.Key.Position.X", id={range.id} isNumber={true} step={.1} keyI18n={"Common.Attr.Key.Position.X"}
range.position[0], (val, status) => { value={range.position[0]}
valueChange={(val) => {
range.position[0] = (val as any) / 1; range.position[0] = (val as any) / 1;
status.changeRangeAttrib(range.id, "position", range.position); this.props.status?.changeRangeAttrib(range.id, "position", range.position);
}, .1 }}
)} />
{this.renderAttrInput( <AttrInput
range.id, "Common.Attr.Key.Position.Y", id={range.id} isNumber={true} step={.1} keyI18n={"Common.Attr.Key.Position.Y"}
range.position[1],(val, status) => { value={range.position[1]}
valueChange={(val) => {
range.position[1] = (val as any) / 1; range.position[1] = (val as any) / 1;
status.changeRangeAttrib(range.id, "position", range.position); this.props.status?.changeRangeAttrib(range.id, "position", range.position);
}, .1 }}
)} />
{this.renderAttrInput( <AttrInput
range.id, "Common.Attr.Key.Position.Z", id={range.id} isNumber={true} step={.1} keyI18n={"Common.Attr.Key.Position.Z"}
range.position[2], (val, status) => { value={range.position[2]}
valueChange={(val) => {
range.position[2] = (val as any) / 1; range.position[2] = (val as any) / 1;
status.changeRangeAttrib(range.id, "position", range.position); this.props.status?.changeRangeAttrib(range.id, "position", range.position);
}, .1 }}
)} />
{this.renderAttrInput( <AttrInput
range.id, "Common.Attr.Key.Radius.X", id={range.id} isNumber={true} step={.1} keyI18n={"Common.Attr.Key.Radius.X"}
range.radius[0], (val, status) => { value={range.radius[0]} min={0}
valueChange={(val) => {
range.radius[0] = (val as any) / 1; range.radius[0] = (val as any) / 1;
status.changeRangeAttrib(range.id, "radius", range.radius); this.props.status?.changeRangeAttrib(range.id, "radius", range.radius);
}, .1, undefined, 0 }}
)} />
{this.renderAttrInput( <AttrInput
range.id, "Common.Attr.Key.Radius.Y", id={range.id} isNumber={true} step={.1} keyI18n={"Common.Attr.Key.Radius.Y"}
range.radius[1], (val, status) => { value={range.radius[1]} min={0}
valueChange={(val) => {
range.radius[1] = (val as any) / 1; range.radius[1] = (val as any) / 1;
status.changeRangeAttrib(range.id, "radius", range.radius); this.props.status?.changeRangeAttrib(range.id, "radius", range.radius);
}, .1, undefined, 0 }}
)} />
{this.renderAttrInput( <AttrInput
range.id, "Common.Attr.Key.Radius.Z", id={range.id} isNumber={true} step={.1} keyI18n={"Common.Attr.Key.Radius.Z"}
range.radius[2], (val, status) => { value={range.radius[2]} min={0}
valueChange={(val) => {
range.radius[2] = (val as any) / 1; range.radius[2] = (val as any) / 1;
status.changeRangeAttrib(range.id, "radius", range.radius); this.props.status?.changeRangeAttrib(range.id, "radius", range.radius);
}, .1, undefined, 0 }}
)} />
</> </>
} }