MrKBear/living-together
2
2
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

Add group list panel

Browse Source
This commit is contained in:
MrKBear 2022-03-13 19:07:12 +08:00
parent a6268bf24d
commit 27927ddde8
9 changed files with 289 additions and 71 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

36
source/Context/Status.tsx
View File

@ -3,6 +3,7 @@ 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";
@ -31,9 +32,11 @@ interface IStatusEvent {
focusLabelChange: void;
objectChange: void;
rangeLabelChange: void;
groupLabelChange: void;
labelChange: void;
rangeAttrChange: void;
labelAttrChange: void;
groupAttrChange: void;
}
class Status extends Emitter<IStatusEvent> {
@ -83,7 +86,9 @@ class Status extends Emitter<IStatusEvent> {
// 对象变换时执行渲染，更新渲染器数据
this.on("objectChange", () => {
this.model.draw();
setTimeout(() => {
this.model.draw();
});
})
}
@ -122,6 +127,35 @@ 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) {

6
source/Localization/EN-US.ts
View File

@ -40,8 +40,11 @@ const EN_US = {
"Panel.Info.Label.List.View": "Edit view label list",
"Panel.Title.Label.Details.View": "Label",
"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",
@ -56,8 +59,11 @@ 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",
}

6
source/Localization/ZH-CN.ts
View File

@ -40,8 +40,11 @@ const ZH_CN = {
"Panel.Info.Label.List.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 坐标",
@ -56,8 +59,11 @@ 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": "模型中没有标签，点击按钮以创建",
}

2
source/Page/SimulatorWeb/SimulatorWeb.tsx
View File

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

0
source/Panel/GroupDetails/GroupDetails.scss Normal file
View File

133
source/Panel/GroupDetails/GroupDetails.tsx Normal file
View File

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

5
source/Panel/ObjectList/ObjectList.tsx
View File

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

14
source/Panel/Panel.tsx
View File

@ -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) {

158
source/Panel/RangeDetails/RangeDetails.tsx
View File

@ -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";
@ -13,26 +13,11 @@ 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,13 +25,13 @@ 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}
/>
}
@ -54,23 +39,29 @@ class RangeDetails extends Component<IMixinStatusProps> {
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, 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.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, "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
)}
</>
}