From 45975cafe78aa1bd6b146cf2fc1120cda2c7d248 Mon Sep 17 00:00:00 2001 From: MrKBear Date: Tue, 8 Mar 2022 13:53:08 +0800 Subject: [PATCH] Optimize attr inputer --- source/Component/AttrInput/AttrInput.tsx | 5 + source/Context/Status.tsx | 2 +- source/Localization/EN-US.ts | 3 + source/Localization/ZH-CN.ts | 3 + source/Panel/RangeDetails/RangeDetails.tsx | 123 ++++++++++++--------- 5 files changed, 82 insertions(+), 54 deletions(-) diff --git a/source/Component/AttrInput/AttrInput.tsx b/source/Component/AttrInput/AttrInput.tsx index d798072..52c26ba 100644 --- a/source/Component/AttrInput/AttrInput.tsx +++ b/source/Component/AttrInput/AttrInput.tsx @@ -142,6 +142,11 @@ class AttrInput extends Component { 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(); diff --git a/source/Context/Status.tsx b/source/Context/Status.tsx index 81cbdcc..0c9084f 100644 --- a/source/Context/Status.tsx +++ b/source/Context/Status.tsx @@ -173,7 +173,7 @@ function useStatusWithEvent(...events: Array) { 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); } diff --git a/source/Localization/EN-US.ts b/source/Localization/EN-US.ts index 6211a6d..6b79f72 100644 --- a/source/Localization/EN-US.ts +++ b/source/Localization/EN-US.ts @@ -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", diff --git a/source/Localization/ZH-CN.ts b/source/Localization/ZH-CN.ts index bed66b3..3c5663b 100644 --- a/source/Localization/ZH-CN.ts +++ b/source/Localization/ZH-CN.ts @@ -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": "未指定范围对象", diff --git a/source/Panel/RangeDetails/RangeDetails.tsx b/source/Panel/RangeDetails/RangeDetails.tsx index 21c944d..f583bed 100644 --- a/source/Panel/RangeDetails/RangeDetails.tsx +++ b/source/Panel/RangeDetails/RangeDetails.tsx @@ -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 { + + 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 <> - - - - - + {this.AttrI18nKey.map((key, index) => { + return + })} + + } + + 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 + } else { + return + } } private renderFrom(range: Range) { + // console.log(range); return <> - { - this.props.status ? this.props.status.changeRangeAttrib(range.id, "displayName", e) : null; - }} - /> - { - if (this.props.status) { - range.position[0] = (e as any) / 1; - this.props.status.changeRangeAttrib(range.id, "position", range.position); - } - }} - /> - { - if (this.props.status) { - range.position[1] = (e as any) / 1; - this.props.status.changeRangeAttrib(range.id, "position", range.position); - } - }} - /> - { - 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)} }