source/Component/AttrInput/AttrInput.scss

@@ -11,7 +11,6 @@ div.attr-input {
 	div.input-intro {
 		width: 50%;
 		height: 100%;
-        min-height: $line-min-height;
 		max-width: 220px;
 		display: flex;
 		align-items: center;

source/Component/ColorInput/ColorInput.scss

@@ -12,7 +12,6 @@ div.color-input-root {
 		width: 50%;
 		height: 100%;
 		max-width: 220px;
-        min-height: $line-min-height;
 		display: flex;
 		align-items: center;
         padding-right: 5px;

source/Component/ErrorMessage/ErrorMessage.scss

@@ -0,0 +1,3 @@
+div.panel-error-message {
+    padding-top: 5px;
+}

source/Component/ErrorMessage/ErrorMessage.tsx

@@ -0,0 +1,17 @@
+import { AllI18nKeys, Localization } from "@Component/Localization/Localization";
+import { FunctionComponent } from "react";
+import "./ErrorMessage.scss";
+
+interface IErrorMessageProps {
+    i18nKey: AllI18nKeys;
+    options?: Record<string, string>;
+    className?: string;
+}
+
+const ErrorMessage: FunctionComponent<IErrorMessageProps> = (props) => {
+    return <div className={["panel-error-message", props.className].filter(c => !!c).join(" ")}>
+        <Localization i18nKey={props.i18nKey} options={props.options}/>
+    </div>
+}
+
+export { ErrorMessage };

source/Component/LabelList/LabelList.tsx

@@ -2,6 +2,7 @@ import { Component, RefObject } from "react";
 import { Label } from "@Model/Label";
 import { Icon } from "@fluentui/react";
 import { useSetting, IMixinSettingProps, Themes } from "@Context/Setting";
+import { ErrorMessage } from "@Component/ErrorMessage/ErrorMessage";
 import "./LabelList.scss";
 
 interface ILabelListProps {

source/Component/LabelPicker/LabelPicker.scss

@@ -12,7 +12,6 @@ div.label-picker-root {
     div.input-intro {
 		width: 50%;
 		height: 100%;
-		min-height: $line-min-height;
 		max-width: 220px;
 		display: flex;
 		align-items: center;

source/Component/Message/Message.scss

@@ -1,20 +0,0 @@
-div.panel-error-message {
-    transition: none !important;
-    padding-top: 5px;
-    padding-bottom: 5px;
-    min-height: 26px;
-    display: flex;
-    align-items: center;
-
-    span {
-        display: block;
-    }
-}
-
-div.panel-error-message.title {
-    padding: 15px 0 5px 0;
-}
-
-div.panel-error-message.title.first {
-    padding: 5px 0 5px 0;
-}

source/Component/Message/Message.tsx

@@ -1,42 +0,0 @@
-import { AllI18nKeys, I18N } from "@Component/Localization/Localization";
-import { useSetting, IMixinSettingProps, Themes, Language } from "@Context/Setting";
-import { FunctionComponent } from "react";
-import "./Message.scss";
-
-interface IMessageProps {
-    i18nKey: AllI18nKeys;
-    options?: Record<string, string>;
-    className?: string;
-    isTitle?: boolean;
-    first?: boolean;
-}
-
-const MessageView: FunctionComponent<IMessageProps & IMixinSettingProps> = (props) => {
-
-    let theme = props.setting ? props.setting.themes : Themes.dark;
-    let language: Language = props.setting ? props.setting.language : "EN_US";
-    let classList: string[] = [
-        "panel-error-message",
-        theme === Themes.dark ? "dark" : "light",
-    ];
-
-    if (props.first) {
-        classList.push("first");
-    }
-
-    if (props.isTitle) {
-        classList.push("title");
-        classList.push("font-lvl3");
-    }
-
-    if (props.className) {
-        classList.push(props.className);
-    }
-
-    return <div className={classList.join(" ")}>
-        <span className={language}>{I18N(language, props.i18nKey, props.options)}</span>
-    </div>
-}
-
-const Message = useSetting(MessageView);
-export { Message };

source/Component/PickerList/PickerList.scss

@@ -1,6 +1,5 @@
 div.picker-list-root {
 	max-width: 200px;
-	height: 100%;
 	padding: 0px;
 	margin: 0px;
 	overflow-y: auto;
@@ -46,7 +45,7 @@ div.picker-list-root {
 
 	span.picker-list-nodata {
 		display: inline-block;
-		padding: 8px;
+		padding: 5px;
 	}
 }
 
@@ -63,7 +62,7 @@ div.picker-list-root::-webkit-scrollbar {
 div.picker-list-root::-webkit-scrollbar-thumb {
 	/*滚动条里面小方块*/
 	border-radius: 8px;
-	background-color: rgba($color: #000000, $alpha: .2);
+	background-color: rgba($color: #000000, $alpha: .1);
 }
 
 div.picker-list-root::-webkit-scrollbar-track {

source/Component/TogglesInput/TogglesInput.scss

@@ -12,7 +12,6 @@ div.toggles-input {
 		width: 50%;
 		height: 100%;
 		max-width: 220px;
-        min-height: $line-min-height;
 		display: flex;
 		align-items: center;
         padding-right: 5px;

source/Context/Status.tsx

@@ -3,7 +3,6 @@ import { Emitter } from "@Model/Emitter";
 import { Model, ObjectID } from "@Model/Model";
 import { Label } from "@Model/Label";
 import { Range } from "@Model/Range";
-import { Group } from "@Model/Group";
 import { Archive } from "@Model/Archive";
 import { AbstractRenderer } from "@Model/Renderer";
 import { ClassicRenderer, MouseMod } from "@GLRender/ClassicRenderer";
@@ -32,11 +31,9 @@ interface IStatusEvent {
     focusLabelChange: void;
     objectChange: void;
     rangeLabelChange: void;
-    groupLabelChange: void;
     labelChange: void;
     rangeAttrChange: void;
     labelAttrChange: void;
-    groupAttrChange: void;
 }
 
 class Status extends Emitter<IStatusEvent> {
@@ -86,9 +83,7 @@ class Status extends Emitter<IStatusEvent> {
 
         // 对象变换时执行渲染，更新渲染器数据
         this.on("objectChange", () => {
-            setTimeout(() => {
+            this.model.draw();
-                this.model.draw();
-            });
         })
     }
 
@@ -127,35 +122,6 @@ class Status extends Emitter<IStatusEvent> {
         }
     }
 
-    /**
-     * 修改群属性
-     */
-    public changeGroupAttrib<K extends keyof Group>
-    (id: ObjectID, key: K, val: Group[K]) {
-        const group = this.model.getObjectById(id);
-        if (group && group instanceof Group) {
-            group[key] = val;
-            this.emit("groupAttrChange");
-            this.model.draw();
-        }
-    }
-
-    public addGroupLabel(id: ObjectID, val: Label) {
-        const group = this.model.getObjectById(id);
-        if (group && group instanceof Group) {
-            group.addLabel(val);
-            this.emit("groupLabelChange");
-        }
-    }
-
-    public deleteGroupLabel(id: ObjectID, val: Label) {
-        const group = this.model.getObjectById(id);
-        if (group && group instanceof Group) {
-            group.removeLabel(val);
-            this.emit("groupLabelChange");
-        }
-    }
-
     public addRangeLabel(id: ObjectID, val: Label) {
         const range = this.model.getObjectById(id);
         if (range && range instanceof Range) {

source/Localization/EN-US.ts

@@ -34,17 +34,12 @@ const EN_US = {
     "Panel.Info.Render.View": "Live simulation results preview",
     "Panel.Title.Object.List.View": "Object list",
     "Panel.Info.Object.List.View": "Edit view all Object Properties",
-    "Panel.Title.Range.Details.View": "Range",
+    "Panel.Title.Range.Details.View": "Range attributes",
     "Panel.Info.Range.Details.View": "Edit view range attributes",
     "Panel.Title.Label.List.View": "Label list",
     "Panel.Info.Label.List.View": "Edit view label list",
-    "Panel.Title.Label.Details.View": "Label",
+    "Panel.Title.Label.Details.View": "Label attributes",
     "Panel.Info.Label.Details.View": "Edit view label attributes",
-    "Panel.Title.Group.Details.View": "Group",
-    "Panel.Info.Group.Details.View": "Edit view group attributes",
-    "Common.Attr.Title.Basic": "Basic properties",
-    "Common.Attr.Title.Spatial": "Spatial property",
-    "Common.Attr.Title.Individual.Generation": "Individual generation",
     "Common.Attr.Key.Display.Name": "Display name",
     "Common.Attr.Key.Position.X": "Position X",
     "Common.Attr.Key.Position.Y": "Position Y",
@@ -59,11 +54,8 @@ const EN_US = {
     "Common.Attr.Key.Label": "Label",
     "Common.Attr.Key.Error.Multiple": "Multiple values",
     "Common.Attr.Key.Label.Picker.Nodata": "No tags can be added",
-    "Common.Attr.Key.Generation": "Generation",
     "Panel.Info.Range.Details.Attr.Error.Not.Range": "Object is not a Range",
     "Panel.Info.Range.Details.Attr.Error.Unspecified": "Unspecified range object",
-    "Panel.Info.Group.Details.Attr.Error.Not.Group": "Object is not a Group",
-    "Panel.Info.Group.Details.Attr.Error.Unspecified": "Unspecified group object",
     "Panel.Info.Label.Details.Error.Unspecified": "Label object not specified",
     "Panel.Info.Label.List.Error.Nodata": "There are no labels in the model, click the button to create",
 }

source/Localization/ZH-CN.ts

@@ -34,17 +34,12 @@ const ZH_CN = {
     "Panel.Info.Render.View": "实时仿真结果预览",
     "Panel.Title.Object.List.View": "对象列表",
     "Panel.Info.Object.List.View": "编辑查看全部对象列表",
-    "Panel.Title.Range.Details.View": "范围",
+    "Panel.Title.Range.Details.View": "范围属性",
     "Panel.Info.Range.Details.View": "编辑查看范围属性",
     "Panel.Title.Label.List.View": "标签列表",
     "Panel.Info.Label.List.View": "编辑查看标签列表",
-    "Panel.Title.Label.Details.View": "标签",
+    "Panel.Title.Label.Details.View": "标签属性",
     "Panel.Info.Label.Details.View": "编辑查看标签属性",
-    "Panel.Title.Group.Details.View": "群",
-    "Panel.Info.Group.Details.View": "编辑查看群属性",
-    "Common.Attr.Title.Basic": "基础属性",
-    "Common.Attr.Title.Spatial": "空间属性",
-    "Common.Attr.Title.Individual.Generation": "个体生成",
     "Common.Attr.Key.Display.Name": "显示名称",
     "Common.Attr.Key.Position.X": "X 坐标",
     "Common.Attr.Key.Position.Y": "Y 坐标",
@@ -59,11 +54,8 @@ const ZH_CN = {
     "Common.Attr.Key.Label": "标签",
     "Common.Attr.Key.Error.Multiple": "多重数值",
     "Common.Attr.Key.Label.Picker.Nodata": "没有可以被添加的标签",
-    "Common.Attr.Key.Generation": "生成",
     "Panel.Info.Range.Details.Attr.Error.Not.Range": "对象不是一个范围",
     "Panel.Info.Range.Details.Attr.Error.Unspecified": "未指定范围对象",
-    "Panel.Info.Group.Details.Attr.Error.Not.Group": "对象不是一个群",
-    "Panel.Info.Group.Details.Attr.Error.Unspecified": "未指定群对象",
     "Panel.Info.Label.Details.Error.Unspecified": "未指定标签对象",
     "Panel.Info.Label.List.Error.Nodata": "模型中没有标签，点击按钮以创建",
 }

source/Page/SimulatorWeb/SimulatorWeb.tsx

@@ -77,7 +77,7 @@ class SimulatorWeb extends Component {
                     items: [{
                         panels: ["ObjectList", "Test tab"]
                     }, {
-                        panels: ["GroupDetails", "RangeDetails", "LabelDetails"]
+                        panels: ["RangeDetails", "LabelDetails"]
                     }],
                     layout: LayoutDirection.Y
                 }

source/Panel/GroupDetails/GroupDetails.tsx

@@ -1,133 +0,0 @@
-import { Component, ReactNode } from "react";
-import { AttrInput } from "@Component/AttrInput/AttrInput";
-import { useStatusWithEvent, IMixinStatusProps, Status } from "@Context/Status";
-import { Message } from "@Component/Message/Message";
-import { ObjectID } from "@Model/Renderer";
-import { ColorInput } from "@Component/ColorInput/ColorInput";
-import { TogglesInput } from "@Component/TogglesInput/TogglesInput";
-import { LabelPicker } from "@Component/LabelPicker/LabelPicker";
-import { Group } from "@Model/Group";
-import { AllI18nKeys } from "@Component/Localization/Localization";
-import "./GroupDetails.scss";
-
-interface IGroupDetailsProps {}
-
-@useStatusWithEvent("groupAttrChange", "groupLabelChange", "focusObjectChange")
-class GroupDetails extends Component<IGroupDetailsProps & 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(group: Group) {
-		return <>
-
-			<Message i18nKey="Common.Attr.Title.Basic" isTitle first/>
-
-			{this.renderAttrInput(
-                group.id, "Common.Attr.Key.Display.Name", group.displayName,
-                (val, status) => {
-                    status.changeGroupAttrib(group.id, "displayName", val);
-                }
-            )}
-
-            <ColorInput
-                keyI18n="Common.Attr.Key.Color"
-                value={group.color} normal
-                valueChange={(color) => {
-                    if (this.props.status) {
-                        this.props.status.changeGroupAttrib(group.id, "color", color);
-                    }
-                }}
-            />
-
-            <LabelPicker
-                keyI18n="Common.Attr.Key.Label"
-                labels={group.allLabels()}
-                labelAdd={(label) => {
-                    if (this.props.status) {
-                        this.props.status.addGroupLabel(group.id, label);
-                    }
-                }}
-                labelDelete={(label) => {
-                    if (this.props.status) {
-                        this.props.status.deleteGroupLabel(group.id, label);
-                    }
-                }}
-            />
-            
-            <TogglesInput
-                keyI18n="Common.Attr.Key.Display"
-                value={group.display} valueChange={(val) => {
-                    if (this.props.status) {
-                        this.props.status.changeGroupAttrib(group.id, "display", val);
-                    }
-                }}
-            />
-
-            <TogglesInput
-                keyI18n="Common.Attr.Key.Update"
-                value={group.update} valueChange={(val) => {
-                    if (this.props.status) {
-                        this.props.status.changeGroupAttrib(group.id, "update", val);
-                    }
-                }}
-            />
-
-			<TogglesInput
-				keyI18n="Common.Attr.Key.Delete"
-				onIconName="delete" offIconName="delete"
-				valueChange={() => {
-					if (this.props.status) {
-						this.props.status.model.deleteObject([group]);
-						this.props.status.setFocusObject(new Set());
-					}
-				}}
-			/>
-		</>
-	}
-
-	public render(): ReactNode {
-		if (this.props.status) {
-            if (this.props.status.focusObject.size <= 0) {
-                return <Message i18nKey="Panel.Info.Group.Details.Attr.Error.Unspecified"/>;
-            }
-            if (this.props.status.focusObject.size > 1) {
-                return <Message i18nKey="Common.Attr.Key.Error.Multiple"/>;
-            }
-            let id: ObjectID = "";
-            this.props.status.focusObject.forEach((cid => id = cid));
-            
-            let group = this.props.status!.model.getObjectById(id);
-
-            if (group instanceof Group) {
-                return this.renderFrom(group);
-            } else {
-                return <Message i18nKey="Panel.Info.Group.Details.Attr.Error.Not.Group"/>;
-            }
-        }
-		return <Message i18nKey="Panel.Info.Group.Details.Attr.Error.Unspecified"/>;
-	}
-}
-
-export { GroupDetails }

source/Panel/LabelDetails/LabelDetails.tsx

@@ -1,7 +1,8 @@
 import { Component, ReactNode } from "react";
 import { AttrInput } from "@Component/AttrInput/AttrInput";
 import { useStatusWithEvent, IMixinStatusProps } from "@Context/Status";
-import { Message } from "@Component/Message/Message";
+import { AllI18nKeys } from "@Component/Localization/Localization";
+import { ErrorMessage } from "@Component/ErrorMessage/ErrorMessage";
 import { ColorInput } from "@Component/ColorInput/ColorInput";
 import { Label } from "@Model/Label";
 import { TogglesInput } from "@Component/TogglesInput/TogglesInput";
@@ -13,8 +14,6 @@ class LabelDetails extends Component<IMixinStatusProps> {
     private renderFrom(label: Label) {
         return <>
             
-            <Message i18nKey="Common.Attr.Title.Basic" isTitle first/>
-            
             <AttrInput keyI18n="Common.Attr.Key.Display.Name" maxLength={15} value={label.name} valueChange={(value) => {
                 if (this.props.status) {
                     this.props.status.changeLabelAttrib(label, "name", value);
@@ -43,7 +42,7 @@ class LabelDetails extends Component<IMixinStatusProps> {
                 return this.renderFrom(this.props.status.focusLabel);
             }
         }
-		return <Message i18nKey="Panel.Info.Label.Details.Error.Unspecified"/>;
+		return <ErrorMessage i18nKey="Panel.Info.Label.Details.Error.Unspecified"/>;
 	}
 }
 

source/Panel/LabelList/LabelList.scss

@@ -6,3 +6,7 @@ div.label-list-panel-root {
     padding: 10px;
     box-sizing: border-box;
 }
+
+div.label-list-pabel-err-msg {
+    padding-bottom: 5px;
+}

source/Panel/LabelList/LabelList.tsx

@@ -3,7 +3,7 @@ import { Component } from "react";
 import { useStatusWithEvent, IMixinStatusProps } from "@Context/Status";
 import { useSetting, IMixinSettingProps } from "@Context/Setting";
 import { Label } from "@Model/Label";
-import { Message } from "@Component/Message/Message";
+import { ErrorMessage } from "@Component/ErrorMessage/ErrorMessage";
 import "./LabelList.scss";
 
 interface ILabelListProps {
@@ -31,7 +31,10 @@ class LabelList extends Component<ILabelListProps & IMixinStatusProps & IMixinSe
             }}
         >
             {labels.length <=0 ? 
-                <Message i18nKey="Panel.Info.Label.List.Error.Nodata"/> : null
+                <ErrorMessage
+                    className="label-list-pabel-err-msg"
+                    i18nKey="Panel.Info.Label.List.Error.Nodata"
+                /> : null
             }
             <LabelListComponent
                 labels={labels}

source/Panel/ObjectList/ObjectList.tsx

@@ -7,7 +7,7 @@ import { ObjectID } from "@Model/Renderer";
 import "./ObjectList.scss";
 
 @useSetting
-@useStatusWithEvent("objectChange", "focusObjectChange", "rangeAttrChange", "groupAttrChange")
+@useStatusWithEvent("objectChange", "focusObjectChange", "rangeAttrChange")
 class ObjectList extends Component<IMixinStatusProps & IMixinSettingProps> {
 
     private renderList() {
@@ -43,9 +43,6 @@ class ObjectList extends Component<IMixinStatusProps & IMixinSettingProps> {
                     if (item.key.slice(0, 1) === "R") {
                         this.props.setting.layout.focus("RangeDetails");
                     }
-                    if (item.key.slice(0, 1) === "G") {
-                        this.props.setting.layout.focus("GroupDetails");
-                    }
                     this.props.setting.layout.focus("ObjectList");
                 }
             }}

source/Panel/Panel.tsx

@@ -1,13 +1,12 @@
 import { ReactNode, Component, FunctionComponent } from "react";
 import { Theme } from "@Component/Theme/Theme";
-import { Message } from "@Component/Message/Message";
+import { ErrorMessage } from "@Component/ErrorMessage/ErrorMessage";
 import { RenderView } from "./RenderView/RenderView";
 import { ObjectList } from "./ObjectList/ObjectList";
 import { ObjectCommand } from "./ObjectList/ObjectCommand";
 import { RangeDetails } from "./RangeDetails/RangeDetails";
 import { LabelList } from "./LabelList/LabelList";
 import { LabelDetails } from "./LabelDetails/LabelDetails";
-import { GroupDetails } from "./GroupDetails/GroupDetails";
 
 interface IPanelInfo {
 	nameKey: string;
@@ -26,7 +25,6 @@ type PanelId = ""
 | "RangeDetails" // 范围属性
 | "LabelList" // 标签列表
 | "LabelDetails" // 标签属性
-| "GroupDetails" // 群属性
 ;
 
 const PanelInfoMap = new Map<PanelId, IPanelInfo>();
@@ -37,23 +35,19 @@ PanelInfoMap.set("RenderView", {
 PanelInfoMap.set("ObjectList", {
     nameKey: "Panel.Title.Object.List.View", introKay: "Panel.Info.Object.List.View",
     class: ObjectList, header: ObjectCommand, hidePadding: true
-});
+})
 PanelInfoMap.set("RangeDetails", {
     nameKey: "Panel.Title.Range.Details.View", introKay: "Panel.Info.Range.Details.View",
     class: RangeDetails
-});
+})
 PanelInfoMap.set("LabelList", {
     nameKey: "Panel.Title.Label.List.View", introKay: "Panel.Info.Label.List.View",
     class: LabelList, hidePadding: true
-});
+})
 PanelInfoMap.set("LabelDetails", {
     nameKey: "Panel.Title.Label.Details.View", introKay: "Panel.Info.Label.Details.View",
     class: LabelDetails
-});
+})
-PanelInfoMap.set("GroupDetails", {
-    nameKey: "Panel.Title.Group.Details.View", introKay: "Panel.Info.Group.Details.View",
-    class: GroupDetails
-});
 
 function getPanelById(panelId: PanelId): ReactNode {
 	switch (panelId) {
@@ -63,7 +57,7 @@ function getPanelById(panelId: PanelId): ReactNode {
 				const C = info.class;
 				return <C></C>
 			} else return <Theme>
-				<Message i18nKey={"Panel.Info.Notfound"} options={{ id: panelId }}/>
+				<ErrorMessage i18nKey={"Panel.Info.Notfound"} options={{ id: panelId }}/>
 			</Theme>
 	}
 }

source/Panel/RangeDetails/RangeDetails.tsx

@@ -1,8 +1,8 @@
 import { Component, ReactNode } from "react";
 import { AttrInput } from "@Component/AttrInput/AttrInput";
 import { useStatusWithEvent, IMixinStatusProps, Status } from "@Context/Status";
-import { AllI18nKeys } from "@Component/Localization/Localization";
+import { AllI18nKeys, Localization } from "@Component/Localization/Localization";
-import { Message } from "@Component/Message/Message";
+import { ErrorMessage } from "@Component/ErrorMessage/ErrorMessage";
 import { Range } from "@Model/Range";
 import { ObjectID } from "@Model/Renderer";
 import { ColorInput } from "@Component/ColorInput/ColorInput";
@@ -13,11 +13,26 @@ import "./RangeDetails.scss";
 @useStatusWithEvent("rangeAttrChange", "focusObjectChange", "rangeLabelChange")
 class RangeDetails extends Component<IMixinStatusProps> {
     
+    public readonly AttrI18nKey: AllI18nKeys[] = [
+        "Common.Attr.Key.Display.Name",
+        "Common.Attr.Key.Label",
+        "Common.Attr.Key.Display",
+        "Common.Attr.Key.Update",
+        "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 renderAttrInput(
-        id: ObjectID, key: AllI18nKeys, val: string | number | undefined,
+        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);
@@ -25,13 +40,13 @@ class RangeDetails extends Component<IMixinStatusProps> {
         }
         if (step) {
             return <AttrInput
-                id={id} isNumber={true} step={step} keyI18n={key}
+                id={id} isNumber={true} step={step} keyI18n={this.AttrI18nKey[key]}
                 value={val} max={max} min={min}
                 valueChange={handelFunc}
             />
         } else {
             return <AttrInput
-                id={id} keyI18n={key} value={val}
+                id={id} keyI18n={this.AttrI18nKey[key]} value={val}
                 valueChange={handelFunc}
             />
         }
@@ -39,29 +54,14 @@ class RangeDetails extends Component<IMixinStatusProps> {
 
     private renderFrom(range: Range) {
         
+        let keyIndex = 0;
+
         return <>
+            {this.renderAttrInput(range.id, keyIndex ++, range.displayName, (val, status) => {
+                status.changeRangeAttrib(range.id, "displayName", val);
+            })}
 
-            <Message i18nKey="Common.Attr.Title.Basic" isTitle first/>
+            <LabelPicker keyI18n={this.AttrI18nKey[keyIndex ++]}
-
-            {this.renderAttrInput(
-                range.id, "Common.Attr.Key.Display.Name", 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);
-                    }
-                }}
-            />
-
-            <LabelPicker
-                keyI18n="Common.Attr.Key.Label"
                 labels={range.allLabels()}
                 labelAdd={(label) => {
                     if (this.props.status) {
@@ -75,94 +75,59 @@ class RangeDetails extends Component<IMixinStatusProps> {
                 }}
             />
             
-            <TogglesInput
+            <TogglesInput keyI18n={this.AttrI18nKey[keyIndex ++]} value={range.display} valueChange={(val) => {
-                keyI18n="Common.Attr.Key.Display"
+                if (this.props.status) {
-                value={range.display} valueChange={(val) => {
+                    this.props.status.changeRangeAttrib(range.id, "display", val);
-                    if (this.props.status) {
+                }
-                        this.props.status.changeRangeAttrib(range.id, "display", val);
+            }}/>
-                    }
-                }}
-            />
 
-            <TogglesInput
+            <TogglesInput keyI18n={this.AttrI18nKey[keyIndex ++]} value={range.update} valueChange={(val) => {
-                keyI18n="Common.Attr.Key.Update"
+                if (this.props.status) {
-                value={range.update} valueChange={(val) => {
+                    this.props.status.changeRangeAttrib(range.id, "update", val);
-                    if (this.props.status) {
+                }
-                        this.props.status.changeRangeAttrib(range.id, "update", val);
+            }}/>
-                    }
-                }}
-            />
 
-            <TogglesInput
+            <ColorInput keyI18n={this.AttrI18nKey[keyIndex ++]} value={range.color} normal valueChange={(color) => {
-				keyI18n="Common.Attr.Key.Delete"
+                if (this.props.status) {
-				onIconName="delete" offIconName="delete"
+                    this.props.status.changeRangeAttrib(range.id, "color", color);
-				valueChange={() => {
+                }
-					if (this.props.status) {
+            }}/>
-						this.props.status.model.deleteObject([range]);
-						this.props.status.setFocusObject(new Set());
-					}
-				}}
-			/>
 
-            <Message i18nKey="Common.Attr.Title.Spatial" isTitle/>
+            {this.renderAttrInput(range.id, keyIndex ++, range.position[0], (val, status) => {
+                range.position[0] = (val as any) / 1;
+                status.changeRangeAttrib(range.id, "position", range.position);
+            }, .1)}
+            {this.renderAttrInput(range.id, keyIndex ++, range.position[1], (val, status) => {
+                range.position[1] = (val as any) / 1;
+                status.changeRangeAttrib(range.id, "position", range.position);
+            }, .1)}
+            {this.renderAttrInput(range.id, keyIndex ++, range.position[2], (val, status) => {
+                range.position[2] = (val as any) / 1;
+                status.changeRangeAttrib(range.id, "position", range.position);
+            }, .1)}
 			
-            {this.renderAttrInput(
+            {this.renderAttrInput(range.id, keyIndex ++, range.radius[0], (val, status) => {
-                range.id, "Common.Attr.Key.Position.X", 
+                range.radius[0] = (val as any) / 1;
-                range.position[0], (val, status) => {
+                status.changeRangeAttrib(range.id, "radius", range.radius);
-                    range.position[0] = (val as any) / 1;
+            }, .1, undefined, 0)}
-                    status.changeRangeAttrib(range.id, "position", range.position);
+            {this.renderAttrInput(range.id, keyIndex ++, range.radius[1], (val, status) => {
-                }, .1
+                range.radius[1] = (val as any) / 1;
-            )}
+                status.changeRangeAttrib(range.id, "radius", range.radius);
-
+            }, .1, undefined, 0)}
-            {this.renderAttrInput(
+            {this.renderAttrInput(range.id, keyIndex ++, range.radius[2], (val, status) => {
-                range.id, "Common.Attr.Key.Position.Y",
+                range.radius[2] = (val as any) / 1;
-                range.position[1],(val, status) => {
+                status.changeRangeAttrib(range.id, "radius", range.radius);
-                    range.position[1] = (val as any) / 1;
+            }, .1, undefined, 0)}
-                    status.changeRangeAttrib(range.id, "position", range.position);
-                }, .1
-            )}
-
-            {this.renderAttrInput(
-                range.id, "Common.Attr.Key.Position.Z",
-                range.position[2], (val, status) => {
-                    range.position[2] = (val as any) / 1;
-                    status.changeRangeAttrib(range.id, "position", range.position);
-                }, .1
-            )}
-			
-            {this.renderAttrInput(
-                range.id, "Common.Attr.Key.Radius.X",
-                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, "Common.Attr.Key.Radius.Y",
-                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, "Common.Attr.Key.Radius.Z",
-                range.radius[2], (val, status) => {
-                    range.radius[2] = (val as any) / 1;
-                    status.changeRangeAttrib(range.id, "radius", range.radius);
-                }, .1, undefined, 0
-            )}
 		</>
     }
 
 	public render(): ReactNode {
         if (this.props.status) {
             if (this.props.status.focusObject.size <= 0) {
-                return <Message i18nKey="Panel.Info.Range.Details.Attr.Error.Unspecified"/>;
+                return <ErrorMessage i18nKey="Panel.Info.Range.Details.Attr.Error.Unspecified"/>;
             }
             if (this.props.status.focusObject.size > 1) {
-                return <Message i18nKey="Common.Attr.Key.Error.Multiple"/>;
+                return <ErrorMessage i18nKey="Common.Attr.Key.Error.Multiple"/>;
             }
             let id: ObjectID = "";
             this.props.status.focusObject.forEach((cid => id = cid));
@@ -172,10 +137,10 @@ class RangeDetails extends Component<IMixinStatusProps> {
             if (range instanceof Range) {
                 return this.renderFrom(range);
             } else {
-                return <Message i18nKey="Panel.Info.Range.Details.Attr.Error.Not.Range"/>;
+                return <ErrorMessage i18nKey="Panel.Info.Range.Details.Attr.Error.Not.Range"/>;
             }
         }
-		return <Message i18nKey="Panel.Info.Range.Details.Attr.Error.Unspecified"/>;
+		return <ErrorMessage i18nKey="Panel.Info.Range.Details.Attr.Error.Unspecified"/>;
 	}
 }