10 changed files with 70 additions and 357 deletions
--- a/.gitignore
+++ b/.gitignore
@ -41,7 +41,6 @@ build/Release
 node_modules/
 jspm_packages/
 build/
-out/

 # TypeScript v1 declaration files
 typings/
--- a/source/Component/AttrInput/AttrInput.scss
+++ b/source/Component/AttrInput/AttrInput.scss
@ -1,6 +1,7 @@
@import "../Theme/Theme.scss";

-$line-min-height: 26px;
+$line-min-height: 24px;
+$root-min-height: 26px;

 div.attr-input {
 	width: 100%;
@ -22,7 +23,7 @@ div.attr-input {
        width: 50%;
        height: 100%;
        max-width: 180px;
-        min-height: $line-min-height;
+        min-height: $root-min-height;

        div.input-content {
            box-sizing: border-box;
@ -32,13 +33,14 @@ div.attr-input {
            display: flex;
            justify-content: space-between;
            align-items: center;
-            height: $line-min-height;
+            min-height: $root-min-height;
    
            input {
                width: 100%;
                height: 100%;
                border: none;
                outline:none;
+                min-height: $line-min-height;
            };
    
            input:focus {
@ -71,35 +73,17 @@ div.attr-input {
            padding-top: 5px;
            min-height: $line-min-height;
        }
-
-        div.error-view {
-            border-radius: 3px;
-            overflow: hidden;
-            display: flex;
-            align-items: center;
-            height: $line-min-height;
-            text-overflow: ellipsis;
-            word-wrap: none;
-            word-break: keep-all;
-            white-space: nowrap;
-            cursor:not-allowed;
-
-            span {
-                padding-left: 8px;
-            }
-        }
    }
 }

 div.dark.attr-input {

-	div.input-content, div.error-view,
+	div.input-content,
 	div.input-content input {
 		background-color: $lt-bg-color-lvl3-dark;
 		color: $lt-font-color-normal-dark;
 	}

-    div.error-view:hover,
 	div.button-left:hover, div.button-right:hover {
 		background-color: $lt-bg-color-lvl2-dark;
 	}
@ -107,13 +91,12 @@ div.dark.attr-input {

 div.light.attr-input {

-	div.input-content, div.error-view,
+	div.input-content,
 	div.input-content input {
 		background-color: $lt-bg-color-lvl3-light;
 		color: $lt-font-color-normal-light;
 	}

-    div.error-view:hover,
 	div.button-left:hover, div.button-right:hover {
 		background-color: $lt-bg-color-lvl2-light;
 	}
--- a/source/Component/AttrInput/AttrInput.tsx
+++ b/source/Component/AttrInput/AttrInput.tsx
@ -142,27 +142,12 @@ 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();
        this.error = this.check(value.toString());
    }

-    private renderErrorInput() {
-        return <div className="error-view">
-            {
-                this.props.disableI18n ? 
-                <Localization i18nKey={this.props.disableI18n}/> :
-                <span>{this.props.value}</span>
-            }
-        </div>
-    }
-
 	public render(): ReactNode {

 		return <Theme
@ -175,7 +160,9 @@ class AttrInput extends Component<IAttrInputProps> {
            <div className="root-content">
                {
                    this.props.disable ? 
-                        this.renderErrorInput() :
+                        this.props.disableI18n ? 
+                            <Localization i18nKey={this.props.disableI18n}/> :
+                            <div>{this.props.value}</div> :
                        this.renderInput()
                }
            </div>
--- a/source/Component/ColorInput/ColorInput.scss
+++ b/source/Component/ColorInput/ColorInput.scss
@ -1,90 +0,0 @@
-@import "../Theme/Theme.scss";
-
-$line-min-height: 26px;
-
-div.color-input-root {
-	width: 100%;
-	display: flex;
-	min-height: $line-min-height;
-	padding: 5px 0;
-
-    div.input-intro {
-		width: 50%;
-		height: 100%;
-		max-width: 220px;
-		display: flex;
-		align-items: center;
-        padding-right: 5px;
-        box-sizing: border-box;
-	}
-
-    div.root-content {
-        width: 50%;
-        height: 100%;
-        max-width: 180px;
-        min-height: $line-min-height;
-        border-radius: 3px;
-        overflow: hidden;
-        display: flex;
-
-        div.color-view {
-            width: $line-min-height;
-            max-width: $line-min-height;
-            display: flex;
-            justify-content: center;
-            align-items: center;
-
-            div.color-box {
-                width: 12px;
-                height: 12px;
-            }
-        }
-
-        div.value-view {
-            width: 100%;
-            height: 100%;
-            min-height: $line-min-height;
-            display: flex;
-            align-items: center;
-
-            div.text-box {
-                padding-left: 1px;
-            }
-        }
-
-        div.error-box {
-            display: flex;
-            align-items: center;
-            padding-left: 8px;
-        }
-    }
-}
-
-div.dark.color-input-root {
-
-	div.root-content {
-		background-color: $lt-bg-color-lvl3-dark;
-		color: $lt-font-color-normal-dark;
-	}
-
-	div.root-content:hover {
-		background-color: $lt-bg-color-lvl2-dark;
-	}
-}
-
-div.light.color-input-root {
-
-	div.root-content {
-		background-color: $lt-bg-color-lvl3-light;
-		color: $lt-font-color-normal-light;
-	}
-
-	div.root-content:hover {
-		background-color: $lt-bg-color-lvl2-light;
-	}
-}
-
-div.color-picker-root {
-    width: 300px;
-    height: 340px;
-}
--- a/source/Component/ColorInput/ColorInput.tsx
+++ b/source/Component/ColorInput/ColorInput.tsx
@ -1,133 +0,0 @@
-import { Component, createRef, ReactNode } from "react";
-import { FontLevel, Theme } from "@Component/Theme/Theme";
-import { Callout, ColorPicker, DirectionalHint } from "@fluentui/react";
-import { AllI18nKeys, Localization } from "@Component/Localization/Localization";
-import "./ColorInput.scss";
-
-interface IColorInputProps {
-    keyI18n: AllI18nKeys;
-    infoI18n?: AllI18nKeys;
-    value?: number[];
-    normal?: boolean;
-    disable?: boolean;
-    disableI18n?: AllI18nKeys;
-    valueChange?: (color: number[]) => any;
-}
-
-interface IColorInputState {
-    isPickerVisible: boolean;
-}
-
-class ColorInput extends Component<IColorInputProps, IColorInputState> {
-
-    public constructor(props: IColorInputProps) {
-        super(props);
-        this.state = {
-            isPickerVisible: false
-        }
-    }
-
-    private pickerTarget = createRef<HTMLDivElement>();
-
-    private renderPicker() {
-        return <Callout
-            target={this.pickerTarget}
-            directionalHint={DirectionalHint.topAutoEdge}
-            onDismiss={() => {
-                this.setState({
-                    isPickerVisible: false
-                })
-            }}
-        >
-            <div className="color-picker-root">
-                <ColorPicker
-                    color={this.getColorString()}
-                    alphaType={"none"}
-                    onChange={(_, color) => {
-                        if (this.props.valueChange) {
-                            if (this.props.normal) {
-                                this.props.valueChange([
-                                    color.r / 255,
-                                    color.g / 255,
-                                    color.b / 255,
-                                ])
-                            } else {
-                                this.props.valueChange([
-                                    color.r,
-                                    color.g,
-                                    color.b,
-                                ])
-                            }
-                        }
-                    }}
-                />
-            </div>
-        </Callout>
-    }
-
-    private renderErrorInput() {
-        return <div className="error-box">
-            {
-                this.props.disableI18n ? 
-                <Localization i18nKey={this.props.disableI18n}/> :
-                <span>{this.props.value}</span>
-            }
-        </div>;
-    }
-
-    private renderColorInput() {
-        return <>
-            <div className="color-view">
-                <div className="color-box" style={{
-                    backgroundColor: this.getColorString()
-                }}/>
-            </div>
-            <div className="value-view">
-                <div className="text-box">{this.getColorString(true)}</div>
-            </div>
-        </>;
-    }
-
-    private getColorString(display?: boolean) {
-        let color: number[] = this.props.value?.concat([]) ?? [0, 0, 0];
-        if (this.props.normal) {
-            color[0] = Math.round(color[0] * 255);
-            color[1] = Math.round(color[1] * 255);
-            color[2] = Math.round(color[2] * 255);
-        }
-        if (display) {
-            return `rgb ( ${color[0] ?? 0}, ${color[1] ?? 0}, ${color[2] ?? 0} )`;
-        } else {
-            return `rgb(${color[0] ?? 0},${color[1] ?? 0},${color[2] ?? 0})`;
-        }
-    }
-
-    public render(): ReactNode {
-        return <>
-            <Theme className="color-input-root" fontLevel={FontLevel.normal}>
-                <div className="input-intro">
-                    <Localization i18nKey={this.props.keyI18n}/>
-                </div>
-                <div
-                    className="root-content"
-                    ref={this.pickerTarget}
-                    style={{
-                        cursor: this.props.disable ? "not-allowed" : "pointer"
-                    }}
-                    onClick={() => {
-                        this.setState({
-                            isPickerVisible: !this.props.disable
-                        })
-                    }}
-                >
-                    { this.props.disable ? null : this.renderColorInput() }
-                    { this.props.disable ? this.renderErrorInput() : null }
-                </div>
-            </Theme>
-
-            {this.state.isPickerVisible ?  this.renderPicker(): null}
-        </>
-    }
-}
-
-export { ColorInput };
--- a/source/Component/DetailsList/DetailsList.scss
+++ b/source/Component/DetailsList/DetailsList.scss
@ -39,7 +39,7 @@ div.details-list {
 div.light.details-list {
    
    div.details-list-item:nth-child(2n-1) {
-        background-color: rgba($lt-bg-color-lvl5-light, .3);
+        background-color: rgba($lt-bg-color-lvl5-light, .4);
    }

    div.details-list-item:hover {
@ -59,7 +59,7 @@ div.light.details-list {
 div.dark.details-list {

    div.details-list-item:nth-child(2n-1) {
-        background-color: rgba($lt-bg-color-lvl5-dark, .4);
+        background-color: rgba($lt-bg-color-lvl5-dark, .8);
    }

    div.details-list-item:hover {
--- a/source/Context/Status.tsx
+++ b/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("Component dep event mount: " + events.join(", "));
+                    console.log("event mount");
                    for (let i = 0; i < events.length; i++) {
                        this.status.on(events[i], this.handelChange);
                    }
--- a/source/Localization/EN-US.ts
+++ b/source/Localization/EN-US.ts
@ -38,12 +38,8 @@ 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.Color": "Color",
-    "Common.Attr.Key.Error.Multiple": "Multiple values",
-    "Panel.Info.Range.Details.Attr.Error.Not.Range": "Object is not a Range",
+    "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",
 }
 export default EN_US;
--- a/source/Localization/ZH-CN.ts
+++ b/source/Localization/ZH-CN.ts
@ -38,12 +38,8 @@ 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.Color": "颜色",
-    "Common.Attr.Key.Error.Multiple": "多重数值",
-    "Panel.Info.Range.Details.Attr.Error.Not.Range": "对象不是一个范围",
+    "Common.Attr.Key.Error.Multiple": "无法编辑多重数值",
+    "Panel.Info.Range.Details.Attr.Error.Not.Range": "焦点对象不是一个范围",
    "Panel.Info.Range.Details.Attr.Error.Unspecified": "未指定范围对象",
 }
 export default ZH_CN;
--- a/source/Panel/RangeDetails/RangeDetails.tsx
+++ b/source/Panel/RangeDetails/RangeDetails.tsx
@ -1,97 +1,72 @@
 import { Component, ReactNode } from "react";
 import { AttrInput } from "@Component/AttrInput/AttrInput";
-import { useStatusWithEvent, IMixinStatusProps, Status } from "@Context/Status";
+import { useStatusWithEvent, IMixinStatusProps } from "@Context/Status";
 import { AllI18nKeys } from "@Component/Localization/Localization";
 import { Range } from "@Model/Range";
 import { ObjectID } from "@Model/Renderer";
-import { ColorInput } from "@Component/ColorInput/ColorInput";
 import "./RangeDetails.scss";

@useStatusWithEvent("rangeAttrChange", "focusObjectChange")
 class RangeDetails extends Component<IMixinStatusProps> {

-    public readonly AttrI18nKey: AllI18nKeys[] = [
-        "Common.Attr.Key.Display.Name",
-        "Common.Attr.Key.Color",
-        "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 <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}
-            />
-        }
+			<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}/>
+		</>
    }

    private renderFrom(range: Range) {
-        // console.log(range);
        return <>
-            {this.renderAttrInput(range.id, 0, range.displayName, (val, status) => {
-                status.changeRangeAttrib(range.id, "displayName", val);
-            })}
-
-            <ColorInput keyI18n="Common.Attr.Key.Color" value={range.color} normal valueChange={(color) => {
-                if (this.props.status) {
-                    this.props.status.changeRangeAttrib(range.id, "color", color);
-                }
-            }}/>
-
-            {this.renderAttrInput(range.id, 2, range.position[0], (val, status) => {
-                range.position[0] = (val as any) / 1;
-                status.changeRangeAttrib(range.id, "position", range.position);
-            }, .1)}
-            {this.renderAttrInput(range.id, 3, range.position[1], (val, status) => {
-                range.position[1] = (val as any) / 1;
-                status.changeRangeAttrib(range.id, "position", range.position);
-            }, .1)}
-            {this.renderAttrInput(range.id, 4, range.position[2], (val, status) => {
-                range.position[2] = (val as any) / 1;
-                status.changeRangeAttrib(range.id, "position", range.position);
-            }, .1)}
-			
-            {this.renderAttrInput(range.id, 5, 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, 6, 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, 7, range.radius[2], (val, status) => {
-                range.radius[2] = (val as any) / 1;
-                status.changeRangeAttrib(range.id, "radius", range.radius);
-            }, .1, undefined, 0)}
+			<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);
+                    }
+                }}
+            />
 		</>
    }