Add group list panel
This commit is contained in:
@@ -1,7 +1,7 @@
|
||||
import { Component, ReactNode } from "react";
|
||||
import { AttrInput } from "@Component/AttrInput/AttrInput";
|
||||
import { useStatusWithEvent, IMixinStatusProps, Status } from "@Context/Status";
|
||||
import { AllI18nKeys, Localization } from "@Component/Localization/Localization";
|
||||
import { AllI18nKeys } from "@Component/Localization/Localization";
|
||||
import { Message } from "@Component/Message/Message";
|
||||
import { Range } from "@Model/Range";
|
||||
import { ObjectID } from "@Model/Renderer";
|
||||
@@ -12,27 +12,12 @@ import "./RangeDetails.scss";
|
||||
|
||||
@useStatusWithEvent("rangeAttrChange", "focusObjectChange", "rangeLabelChange")
|
||||
class RangeDetails extends Component<IMixinStatusProps> {
|
||||
|
||||
public readonly AttrI18nKey: AllI18nKeys[] = [
|
||||
"Common.Attr.Key.Display.Name",
|
||||
"Common.Attr.Key.Color",
|
||||
"Common.Attr.Key.Label",
|
||||
"Common.Attr.Key.Display",
|
||||
"Common.Attr.Key.Update",
|
||||
"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: number, val: string | number | undefined,
|
||||
id: ObjectID, key: AllI18nKeys, 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);
|
||||
@@ -40,37 +25,43 @@ class RangeDetails extends Component<IMixinStatusProps> {
|
||||
}
|
||||
if (step) {
|
||||
return <AttrInput
|
||||
id={id} isNumber={true} step={step} keyI18n={this.AttrI18nKey[key]}
|
||||
id={id} isNumber={true} step={step} keyI18n={key}
|
||||
value={val} max={max} min={min}
|
||||
valueChange={handelFunc}
|
||||
/>
|
||||
} else {
|
||||
return <AttrInput
|
||||
id={id} keyI18n={this.AttrI18nKey[key]} value={val}
|
||||
id={id} keyI18n={key} value={val}
|
||||
valueChange={handelFunc}
|
||||
/>
|
||||
}
|
||||
}
|
||||
|
||||
private renderFrom(range: Range) {
|
||||
|
||||
let keyIndex = 0;
|
||||
|
||||
return <>
|
||||
|
||||
<Message i18nKey="Common.Attr.Title.Basic" isTitle first/>
|
||||
|
||||
{this.renderAttrInput(range.id, keyIndex ++, range.displayName, (val, status) => {
|
||||
status.changeRangeAttrib(range.id, "displayName", val);
|
||||
})}
|
||||
|
||||
<ColorInput keyI18n={this.AttrI18nKey[keyIndex ++]} value={range.color} normal valueChange={(color) => {
|
||||
if (this.props.status) {
|
||||
this.props.status.changeRangeAttrib(range.id, "color", color);
|
||||
{this.renderAttrInput(
|
||||
range.id, "Common.Attr.Key.Display.Name", range.displayName,
|
||||
(val, status) => {
|
||||
status.changeRangeAttrib(range.id, "displayName", val);
|
||||
}
|
||||
}}/>
|
||||
)}
|
||||
|
||||
<LabelPicker keyI18n={this.AttrI18nKey[keyIndex ++]}
|
||||
<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) {
|
||||
@@ -84,45 +75,84 @@ class RangeDetails extends Component<IMixinStatusProps> {
|
||||
}}
|
||||
/>
|
||||
|
||||
<TogglesInput keyI18n={this.AttrI18nKey[keyIndex ++]} value={range.display} valueChange={(val) => {
|
||||
if (this.props.status) {
|
||||
this.props.status.changeRangeAttrib(range.id, "display", val);
|
||||
}
|
||||
}}/>
|
||||
<TogglesInput
|
||||
keyI18n="Common.Attr.Key.Display"
|
||||
value={range.display} valueChange={(val) => {
|
||||
if (this.props.status) {
|
||||
this.props.status.changeRangeAttrib(range.id, "display", val);
|
||||
}
|
||||
}}
|
||||
/>
|
||||
|
||||
<TogglesInput keyI18n={this.AttrI18nKey[keyIndex ++]} value={range.update} valueChange={(val) => {
|
||||
if (this.props.status) {
|
||||
this.props.status.changeRangeAttrib(range.id, "update", val);
|
||||
}
|
||||
}}/>
|
||||
<TogglesInput
|
||||
keyI18n="Common.Attr.Key.Update"
|
||||
value={range.update} valueChange={(val) => {
|
||||
if (this.props.status) {
|
||||
this.props.status.changeRangeAttrib(range.id, "update", val);
|
||||
}
|
||||
}}
|
||||
/>
|
||||
|
||||
<TogglesInput
|
||||
keyI18n="Common.Attr.Key.Delete"
|
||||
onIconName="delete" offIconName="delete"
|
||||
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(
|
||||
range.id, "Common.Attr.Key.Position.X",
|
||||
range.position[0], (val, status) => {
|
||||
range.position[0] = (val as any) / 1;
|
||||
status.changeRangeAttrib(range.id, "position", range.position);
|
||||
}, .1
|
||||
)}
|
||||
|
||||
{this.renderAttrInput(
|
||||
range.id, "Common.Attr.Key.Position.Y",
|
||||
range.position[1],(val, status) => {
|
||||
range.position[1] = (val as any) / 1;
|
||||
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, keyIndex ++, 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, keyIndex ++, 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, keyIndex ++, range.radius[2], (val, status) => {
|
||||
range.radius[2] = (val as any) / 1;
|
||||
status.changeRangeAttrib(range.id, "radius", range.radius);
|
||||
}, .1, undefined, 0)}
|
||||
{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
|
||||
)}
|
||||
</>
|
||||
}
|
||||
|
||||
|
||||
Reference in New Issue
Block a user