From ff27bddf2702622ef86721aa814e04f5810947e1 Mon Sep 17 00:00:00 2001 From: MrKBear Date: Sun, 13 Mar 2022 12:45:02 +0800 Subject: [PATCH 1/3] Rename message fix layout color --- source/Component/AttrInput/AttrInput.scss | 1 + source/Component/ColorInput/ColorInput.scss | 1 + .../Component/ErrorMessage/ErrorMessage.scss | 3 -- .../Component/ErrorMessage/ErrorMessage.tsx | 17 -------- source/Component/LabelList/LabelList.tsx | 1 - source/Component/LabelPicker/LabelPicker.scss | 1 + source/Component/Message/Message.scss | 20 +++++++++ source/Component/Message/Message.tsx | 42 +++++++++++++++++++ source/Component/PickerList/PickerList.scss | 5 ++- .../Component/TogglesInput/TogglesInput.scss | 1 + source/Localization/EN-US.ts | 2 + source/Localization/ZH-CN.ts | 2 + source/Panel/LabelDetails/LabelDetails.tsx | 7 ++-- source/Panel/LabelList/LabelList.scss | 4 -- source/Panel/LabelList/LabelList.tsx | 7 +--- source/Panel/Panel.tsx | 4 +- source/Panel/RangeDetails/RangeDetails.tsx | 27 +++++++----- 17 files changed, 97 insertions(+), 48 deletions(-) delete mode 100644 source/Component/ErrorMessage/ErrorMessage.scss delete mode 100644 source/Component/ErrorMessage/ErrorMessage.tsx create mode 100644 source/Component/Message/Message.scss create mode 100644 source/Component/Message/Message.tsx diff --git a/source/Component/AttrInput/AttrInput.scss b/source/Component/AttrInput/AttrInput.scss index f578672..a680181 100644 --- a/source/Component/AttrInput/AttrInput.scss +++ b/source/Component/AttrInput/AttrInput.scss @@ -11,6 +11,7 @@ div.attr-input { div.input-intro { width: 50%; height: 100%; + min-height: $line-min-height; max-width: 220px; display: flex; align-items: center; diff --git a/source/Component/ColorInput/ColorInput.scss b/source/Component/ColorInput/ColorInput.scss index 4ee5a79..99193d3 100644 --- a/source/Component/ColorInput/ColorInput.scss +++ b/source/Component/ColorInput/ColorInput.scss @@ -12,6 +12,7 @@ div.color-input-root { width: 50%; height: 100%; max-width: 220px; + min-height: $line-min-height; display: flex; align-items: center; padding-right: 5px; diff --git a/source/Component/ErrorMessage/ErrorMessage.scss b/source/Component/ErrorMessage/ErrorMessage.scss deleted file mode 100644 index aa33898..0000000 --- a/source/Component/ErrorMessage/ErrorMessage.scss +++ /dev/null @@ -1,3 +0,0 @@ -div.panel-error-message { - padding-top: 5px; -} \ No newline at end of file diff --git a/source/Component/ErrorMessage/ErrorMessage.tsx b/source/Component/ErrorMessage/ErrorMessage.tsx deleted file mode 100644 index 375dc24..0000000 --- a/source/Component/ErrorMessage/ErrorMessage.tsx +++ /dev/null @@ -1,17 +0,0 @@ -import { AllI18nKeys, Localization } from "@Component/Localization/Localization"; -import { FunctionComponent } from "react"; -import "./ErrorMessage.scss"; - -interface IErrorMessageProps { - i18nKey: AllI18nKeys; - options?: Record; - className?: string; -} - -const ErrorMessage: FunctionComponent = (props) => { - return
!!c).join(" ")}> - -
-} - -export { ErrorMessage }; \ No newline at end of file diff --git a/source/Component/LabelList/LabelList.tsx b/source/Component/LabelList/LabelList.tsx index eae20cd..ef077c2 100644 --- a/source/Component/LabelList/LabelList.tsx +++ b/source/Component/LabelList/LabelList.tsx @@ -2,7 +2,6 @@ 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 { diff --git a/source/Component/LabelPicker/LabelPicker.scss b/source/Component/LabelPicker/LabelPicker.scss index b3a74f3..a8a7220 100644 --- a/source/Component/LabelPicker/LabelPicker.scss +++ b/source/Component/LabelPicker/LabelPicker.scss @@ -12,6 +12,7 @@ div.label-picker-root { div.input-intro { width: 50%; height: 100%; + min-height: $line-min-height; max-width: 220px; display: flex; align-items: center; diff --git a/source/Component/Message/Message.scss b/source/Component/Message/Message.scss new file mode 100644 index 0000000..853a887 --- /dev/null +++ b/source/Component/Message/Message.scss @@ -0,0 +1,20 @@ +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; +} \ No newline at end of file diff --git a/source/Component/Message/Message.tsx b/source/Component/Message/Message.tsx new file mode 100644 index 0000000..185266a --- /dev/null +++ b/source/Component/Message/Message.tsx @@ -0,0 +1,42 @@ +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; + className?: string; + isTitle?: boolean; + first?: boolean; +} + +const MessageView: FunctionComponent = (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
+ {I18N(language, props.i18nKey, props.options)} +
+} + +const Message = useSetting(MessageView); +export { Message }; \ No newline at end of file diff --git a/source/Component/PickerList/PickerList.scss b/source/Component/PickerList/PickerList.scss index f080962..9de93c4 100644 --- a/source/Component/PickerList/PickerList.scss +++ b/source/Component/PickerList/PickerList.scss @@ -1,5 +1,6 @@ div.picker-list-root { max-width: 200px; + height: 100%; padding: 0px; margin: 0px; overflow-y: auto; @@ -45,7 +46,7 @@ div.picker-list-root { span.picker-list-nodata { display: inline-block; - padding: 5px; + padding: 8px; } } @@ -62,7 +63,7 @@ div.picker-list-root::-webkit-scrollbar { div.picker-list-root::-webkit-scrollbar-thumb { /*滚动条里面小方块*/ border-radius: 8px; - background-color: rgba($color: #000000, $alpha: .1); + background-color: rgba($color: #000000, $alpha: .2); } div.picker-list-root::-webkit-scrollbar-track { diff --git a/source/Component/TogglesInput/TogglesInput.scss b/source/Component/TogglesInput/TogglesInput.scss index 88598f9..3a1c789 100644 --- a/source/Component/TogglesInput/TogglesInput.scss +++ b/source/Component/TogglesInput/TogglesInput.scss @@ -12,6 +12,7 @@ div.toggles-input { width: 50%; height: 100%; max-width: 220px; + min-height: $line-min-height; display: flex; align-items: center; padding-right: 5px; diff --git a/source/Localization/EN-US.ts b/source/Localization/EN-US.ts index 3554142..8607395 100644 --- a/source/Localization/EN-US.ts +++ b/source/Localization/EN-US.ts @@ -40,6 +40,8 @@ const EN_US = { "Panel.Info.Label.List.View": "Edit view label list", "Panel.Title.Label.Details.View": "Label attributes", "Panel.Info.Label.Details.View": "Edit view label attributes", + "Common.Attr.Title.Basic": "Basic properties", + "Common.Attr.Title.Spatial": "Spatial property", "Common.Attr.Key.Display.Name": "Display name", "Common.Attr.Key.Position.X": "Position X", "Common.Attr.Key.Position.Y": "Position Y", diff --git a/source/Localization/ZH-CN.ts b/source/Localization/ZH-CN.ts index 8e63ed4..704add6 100644 --- a/source/Localization/ZH-CN.ts +++ b/source/Localization/ZH-CN.ts @@ -40,6 +40,8 @@ const ZH_CN = { "Panel.Info.Label.List.View": "编辑查看标签列表", "Panel.Title.Label.Details.View": "标签属性", "Panel.Info.Label.Details.View": "编辑查看标签属性", + "Common.Attr.Title.Basic": "基础属性", + "Common.Attr.Title.Spatial": "空间属性", "Common.Attr.Key.Display.Name": "显示名称", "Common.Attr.Key.Position.X": "X 坐标", "Common.Attr.Key.Position.Y": "Y 坐标", diff --git a/source/Panel/LabelDetails/LabelDetails.tsx b/source/Panel/LabelDetails/LabelDetails.tsx index fbda488..28691db 100644 --- a/source/Panel/LabelDetails/LabelDetails.tsx +++ b/source/Panel/LabelDetails/LabelDetails.tsx @@ -1,8 +1,7 @@ import { Component, ReactNode } from "react"; import { AttrInput } from "@Component/AttrInput/AttrInput"; import { useStatusWithEvent, IMixinStatusProps } from "@Context/Status"; -import { AllI18nKeys } from "@Component/Localization/Localization"; -import { ErrorMessage } from "@Component/ErrorMessage/ErrorMessage"; +import { Message } from "@Component/Message/Message"; import { ColorInput } from "@Component/ColorInput/ColorInput"; import { Label } from "@Model/Label"; import { TogglesInput } from "@Component/TogglesInput/TogglesInput"; @@ -13,6 +12,8 @@ class LabelDetails extends Component { private renderFrom(label: Label) { return <> + + { if (this.props.status) { @@ -42,7 +43,7 @@ class LabelDetails extends Component { return this.renderFrom(this.props.status.focusLabel); } } - return ; + return ; } } diff --git a/source/Panel/LabelList/LabelList.scss b/source/Panel/LabelList/LabelList.scss index 7643f5c..b2233e1 100644 --- a/source/Panel/LabelList/LabelList.scss +++ b/source/Panel/LabelList/LabelList.scss @@ -5,8 +5,4 @@ div.label-list-panel-root { min-height: 100%; padding: 10px; box-sizing: border-box; -} - -div.label-list-pabel-err-msg { - padding-bottom: 5px; } \ No newline at end of file diff --git a/source/Panel/LabelList/LabelList.tsx b/source/Panel/LabelList/LabelList.tsx index fce98be..f1f9a80 100644 --- a/source/Panel/LabelList/LabelList.tsx +++ b/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 { ErrorMessage } from "@Component/ErrorMessage/ErrorMessage"; +import { Message } from "@Component/Message/Message"; import "./LabelList.scss"; interface ILabelListProps { @@ -31,10 +31,7 @@ class LabelList extends Component {labels.length <=0 ? - : null + : null } } else return - + } } diff --git a/source/Panel/RangeDetails/RangeDetails.tsx b/source/Panel/RangeDetails/RangeDetails.tsx index 5a74f57..ce6384e 100644 --- a/source/Panel/RangeDetails/RangeDetails.tsx +++ b/source/Panel/RangeDetails/RangeDetails.tsx @@ -2,7 +2,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 { ErrorMessage } from "@Component/ErrorMessage/ErrorMessage"; +import { Message } from "@Component/Message/Message"; import { Range } from "@Model/Range"; import { ObjectID } from "@Model/Renderer"; import { ColorInput } from "@Component/ColorInput/ColorInput"; @@ -15,10 +15,10 @@ class RangeDetails extends Component { 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.Color", "Common.Attr.Key.Position.X", "Common.Attr.Key.Position.Y", "Common.Attr.Key.Position.Z", @@ -57,10 +57,19 @@ class RangeDetails extends Component { let keyIndex = 0; return <> + + + {this.renderAttrInput(range.id, keyIndex ++, range.displayName, (val, status) => { status.changeRangeAttrib(range.id, "displayName", val); })} + { + if (this.props.status) { + this.props.status.changeRangeAttrib(range.id, "color", color); + } + }}/> + { @@ -87,11 +96,7 @@ class RangeDetails extends Component { } }}/> - { - if (this.props.status) { - this.props.status.changeRangeAttrib(range.id, "color", color); - } - }}/> + {this.renderAttrInput(range.id, keyIndex ++, range.position[0], (val, status) => { range.position[0] = (val as any) / 1; @@ -124,10 +129,10 @@ class RangeDetails extends Component { public render(): ReactNode { if (this.props.status) { if (this.props.status.focusObject.size <= 0) { - return ; + return ; } if (this.props.status.focusObject.size > 1) { - return ; + return ; } let id: ObjectID = ""; this.props.status.focusObject.forEach((cid => id = cid)); @@ -137,10 +142,10 @@ class RangeDetails extends Component { if (range instanceof Range) { return this.renderFrom(range); } else { - return ; + return ; } } - return ; + return ; } } -- 2.45.2 From a6268bf24df26e8fda83368221cad2dd35010927 Mon Sep 17 00:00:00 2001 From: MrKBear Date: Sun, 13 Mar 2022 16:55:50 +0800 Subject: [PATCH 2/3] Opt panel i18n term --- source/Localization/EN-US.ts | 4 ++-- source/Localization/ZH-CN.ts | 4 ++-- 2 files changed, 4 insertions(+), 4 deletions(-) diff --git a/source/Localization/EN-US.ts b/source/Localization/EN-US.ts index 8607395..f734ac2 100644 --- a/source/Localization/EN-US.ts +++ b/source/Localization/EN-US.ts @@ -34,11 +34,11 @@ 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 attributes", + "Panel.Title.Range.Details.View": "Range", "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 attributes", + "Panel.Title.Label.Details.View": "Label", "Panel.Info.Label.Details.View": "Edit view label attributes", "Common.Attr.Title.Basic": "Basic properties", "Common.Attr.Title.Spatial": "Spatial property", diff --git a/source/Localization/ZH-CN.ts b/source/Localization/ZH-CN.ts index 704add6..29c5351 100644 --- a/source/Localization/ZH-CN.ts +++ b/source/Localization/ZH-CN.ts @@ -34,11 +34,11 @@ 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": "编辑查看标签属性", "Common.Attr.Title.Basic": "基础属性", "Common.Attr.Title.Spatial": "空间属性", -- 2.45.2 From 27927ddde8a45d33fb67cec1083bb97b5813d955 Mon Sep 17 00:00:00 2001 From: MrKBear Date: Sun, 13 Mar 2022 19:07:12 +0800 Subject: [PATCH 3/3] Add group list panel --- source/Context/Status.tsx | 36 ++++- source/Localization/EN-US.ts | 6 + source/Localization/ZH-CN.ts | 6 + source/Page/SimulatorWeb/SimulatorWeb.tsx | 2 +- source/Panel/GroupDetails/GroupDetails.scss | 0 source/Panel/GroupDetails/GroupDetails.tsx | 133 ++++++++++++++++ source/Panel/ObjectList/ObjectList.tsx | 5 +- source/Panel/Panel.tsx | 14 +- source/Panel/RangeDetails/RangeDetails.tsx | 158 ++++++++++++-------- 9 files changed, 289 insertions(+), 71 deletions(-) create mode 100644 source/Panel/GroupDetails/GroupDetails.scss create mode 100644 source/Panel/GroupDetails/GroupDetails.tsx diff --git a/source/Context/Status.tsx b/source/Context/Status.tsx index 8853e52..13227fc 100644 --- a/source/Context/Status.tsx +++ b/source/Context/Status.tsx @@ -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 { @@ -83,7 +86,9 @@ class Status extends Emitter { // 对象变换时执行渲染，更新渲染器数据 this.on("objectChange", () => { - this.model.draw(); + setTimeout(() => { + this.model.draw(); + }); }) } @@ -122,6 +127,35 @@ class Status extends Emitter { } } + /** + * 修改群属性 + */ + public changeGroupAttrib + (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) { diff --git a/source/Localization/EN-US.ts b/source/Localization/EN-US.ts index f734ac2..818d89b 100644 --- a/source/Localization/EN-US.ts +++ b/source/Localization/EN-US.ts @@ -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", } diff --git a/source/Localization/ZH-CN.ts b/source/Localization/ZH-CN.ts index 29c5351..7482f58 100644 --- a/source/Localization/ZH-CN.ts +++ b/source/Localization/ZH-CN.ts @@ -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": "模型中没有标签，点击按钮以创建", } diff --git a/source/Page/SimulatorWeb/SimulatorWeb.tsx b/source/Page/SimulatorWeb/SimulatorWeb.tsx index 7c18c26..77c76f7 100644 --- a/source/Page/SimulatorWeb/SimulatorWeb.tsx +++ b/source/Page/SimulatorWeb/SimulatorWeb.tsx @@ -77,7 +77,7 @@ class SimulatorWeb extends Component { items: [{ panels: ["ObjectList", "Test tab"] }, { - panels: ["RangeDetails", "LabelDetails"] + panels: ["GroupDetails", "RangeDetails", "LabelDetails"] }], layout: LayoutDirection.Y } diff --git a/source/Panel/GroupDetails/GroupDetails.scss b/source/Panel/GroupDetails/GroupDetails.scss new file mode 100644 index 0000000..e69de29 diff --git a/source/Panel/GroupDetails/GroupDetails.tsx b/source/Panel/GroupDetails/GroupDetails.tsx new file mode 100644 index 0000000..195802e --- /dev/null +++ b/source/Panel/GroupDetails/GroupDetails.tsx @@ -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 { + + 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 + } else { + return + } + } + + private renderFrom(group: Group) { + return <> + + + + {this.renderAttrInput( + group.id, "Common.Attr.Key.Display.Name", group.displayName, + (val, status) => { + status.changeGroupAttrib(group.id, "displayName", val); + } + )} + + { + if (this.props.status) { + this.props.status.changeGroupAttrib(group.id, "color", color); + } + }} + /> + + { + if (this.props.status) { + this.props.status.addGroupLabel(group.id, label); + } + }} + labelDelete={(label) => { + if (this.props.status) { + this.props.status.deleteGroupLabel(group.id, label); + } + }} + /> + + { + if (this.props.status) { + this.props.status.changeGroupAttrib(group.id, "display", val); + } + }} + /> + + { + if (this.props.status) { + this.props.status.changeGroupAttrib(group.id, "update", val); + } + }} + /> + + { + 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 ; + } + if (this.props.status.focusObject.size > 1) { + return ; + } + 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 ; + } + } + return ; + } +} + +export { GroupDetails } \ No newline at end of file diff --git a/source/Panel/ObjectList/ObjectList.tsx b/source/Panel/ObjectList/ObjectList.tsx index 117a571..8e69711 100644 --- a/source/Panel/ObjectList/ObjectList.tsx +++ b/source/Panel/ObjectList/ObjectList.tsx @@ -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 { private renderList() { @@ -43,6 +43,9 @@ class ObjectList extends Component { 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"); } }} diff --git a/source/Panel/Panel.tsx b/source/Panel/Panel.tsx index 66844d4..0a5e6ad 100644 --- a/source/Panel/Panel.tsx +++ b/source/Panel/Panel.tsx @@ -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(); @@ -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) { diff --git a/source/Panel/RangeDetails/RangeDetails.tsx b/source/Panel/RangeDetails/RangeDetails.tsx index ce6384e..0188e79 100644 --- a/source/Panel/RangeDetails/RangeDetails.tsx +++ b/source/Panel/RangeDetails/RangeDetails.tsx @@ -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 { - - 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 { } if (step) { return } else { return } } private renderFrom(range: Range) { - - let keyIndex = 0; return <> - {this.renderAttrInput(range.id, keyIndex ++, range.displayName, (val, status) => { - status.changeRangeAttrib(range.id, "displayName", val); - })} - - { - 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); } - }}/> + )} - { + if (this.props.status) { + this.props.status.changeRangeAttrib(range.id, "color", color); + } + }} + /> + + { if (this.props.status) { @@ -84,45 +75,84 @@ class RangeDetails extends Component { }} /> - { - if (this.props.status) { - this.props.status.changeRangeAttrib(range.id, "display", val); - } - }}/> + { + if (this.props.status) { + this.props.status.changeRangeAttrib(range.id, "display", val); + } + }} + /> - { - if (this.props.status) { - this.props.status.changeRangeAttrib(range.id, "update", val); - } - }}/> + { + if (this.props.status) { + this.props.status.changeRangeAttrib(range.id, "update", val); + } + }} + /> + + { + if (this.props.status) { + this.props.status.model.deleteObject([range]); + this.props.status.setFocusObject(new Set()); + } + }} + /> - {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 + )} } -- 2.45.2