Optimize attr inputer

source/Component/AttrInput/AttrInput.tsx

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

source/Context/Status.tsx

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

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

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": "未指定范围对象",

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";
@@ -9,64 +9,81 @@ 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}/>
+            {this.AttrI18nKey.map((key, index) => {
-			<AttrInput keyI18n="Common.Attr.Key.Position.X" disable disableI18n={error}/>
+                return <AttrInput key={index} keyI18n={key} disable disableI18n={error}/>
-            <AttrInput keyI18n="Common.Attr.Key.Position.Y" disable disableI18n={error}/>
+            })}
-            <AttrInput keyI18n="Common.Attr.Key.Position.Z" 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
+            {this.renderAttrInput(range.id, 0, range.displayName, (val, status) => {
-                id={range.id}
+                status.changeRangeAttrib(range.id, "displayName", val);
-                keyI18n="Common.Attr.Key.Display.Name"
+            })}
-                value={range.displayName}
+
-                valueChange={(e) => {
+            {this.renderAttrInput(range.id, 1, range.position[0], (val, status) => {
-                    this.props.status ? this.props.status.changeRangeAttrib(range.id, "displayName", e) : null;
+                range.position[0] = (val as any) / 1;
-                }}
+                status.changeRangeAttrib(range.id, "position", range.position);
-            />
+            }, .1)}
-			<AttrInput
+            {this.renderAttrInput(range.id, 2, range.position[1], (val, status) => {
-                id={range.id}
+                range.position[1] = (val as any) / 1;
-                isNumber={true}
+                status.changeRangeAttrib(range.id, "position", range.position);
-                step={.1}
+            }, .1)}
-                keyI18n="Common.Attr.Key.Position.X"
+            {this.renderAttrInput(range.id, 3, range.position[2], (val, status) => {
-                value={range.position[0]}
+                range.position[2] = (val as any) / 1;
-                valueChange={(e) => {
+                status.changeRangeAttrib(range.id, "position", range.position);
-                    if (this.props.status) {
+            }, .1)}
-                        range.position[0] = (e as any) / 1;
+			
-                        this.props.status.changeRangeAttrib(range.id, "position", range.position);
+            {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)}
-            <AttrInput
+            {this.renderAttrInput(range.id, 5, range.radius[1], (val, status) => {
-                id={range.id}
+                range.radius[1] = (val as any) / 1;
-                isNumber={true}
+                status.changeRangeAttrib(range.id, "radius", range.radius);
-                step={.1}
+            }, .1, undefined, 0)}
-                keyI18n="Common.Attr.Key.Position.Y"
+            {this.renderAttrInput(range.id, 6, range.radius[2], (val, status) => {
-                value={range.position[1]}
+                range.radius[2] = (val as any) / 1;
-                valueChange={(e) => {
+                status.changeRangeAttrib(range.id, "radius", range.radius);
-                    if (this.props.status) {
+            }, .1, undefined, 0)}
-                        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);
-                    }
-                }}
-            />
 		</>
     }