Add group list panel

2022-03-13 19:07:12 +08:00
parent a6268bf24d
commit 27927ddde8
9 changed files with 289 additions and 71 deletions
@@ -0,0 +1,133 @@
+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 }
@@ -7,7 +7,7 @@ import { ObjectID } from "@Model/Renderer";
 import "./ObjectList.scss";

@useSetting
-@useStatusWithEvent("objectChange", "focusObjectChange", "rangeAttrChange")
+@useStatusWithEvent("objectChange", "focusObjectChange", "rangeAttrChange", "groupAttrChange")
 class ObjectList extends Component<IMixinStatusProps & IMixinSettingProps> {

    private renderList() {
@@ -43,6 +43,9 @@ 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");
                }
            }}
@@ -7,6 +7,7 @@ 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;
@@ -25,6 +26,7 @@ type PanelId = ""
 | "RangeDetails" // 范围属性
 | "LabelList" // 标签列表
 | "LabelDetails" // 标签属性
+| "GroupDetails" // 群属性
 ;

 const PanelInfoMap = new Map<PanelId, IPanelInfo>();
@@ -35,19 +37,23 @@ 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) {
@@ -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
+            )}
 		</>
    }