From 2cf9a229072e169fd532baacef36c58e859ee6ee Mon Sep 17 00:00:00 2001 From: MrKBear Date: Sun, 3 Apr 2022 22:56:16 +0800 Subject: [PATCH 1/6] Add behavior details panel --- source/Localization/EN-US.ts | 3 +++ source/Localization/ZH-CN.ts | 3 +++ source/Page/SimulatorWeb/SimulatorWeb.tsx | 8 +++--- .../BehaviorDetails/BehaviorDetails.scss | 0 .../Panel/BehaviorDetails/BehaviorDetails.tsx | 26 +++++++++++++++++++ source/Panel/Panel.tsx | 6 +++++ 6 files changed, 42 insertions(+), 4 deletions(-) create mode 100644 source/Panel/BehaviorDetails/BehaviorDetails.scss create mode 100644 source/Panel/BehaviorDetails/BehaviorDetails.tsx diff --git a/source/Localization/EN-US.ts b/source/Localization/EN-US.ts index 79d6f1b..875e29f 100644 --- a/source/Localization/EN-US.ts +++ b/source/Localization/EN-US.ts @@ -48,6 +48,8 @@ const EN_US = { "Panel.Info.Group.Details.View": "Edit view group attributes", "Panel.Title.Behavior.List.View": "Behavior list", "Panel.Info.Behavior.List.View": "Edit view behavior list", + "Panel.Title.Behavior.Details.View": "Behavior", + "Panel.Info.Behavior.Details.View": "Edit view Behavior attributes", "Popup.Title.Unnamed": "Popup message", "Popup.Title.Confirm": "Confirm message", "Popup.Action.Yes": "Confirm", @@ -109,5 +111,6 @@ const EN_US = { "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", + "Panel.Info.Behavior.Details.Error.Not.Behavior": "Please specify a behavior first to view the details", } export default EN_US; \ No newline at end of file diff --git a/source/Localization/ZH-CN.ts b/source/Localization/ZH-CN.ts index 7f582fc..b527afd 100644 --- a/source/Localization/ZH-CN.ts +++ b/source/Localization/ZH-CN.ts @@ -48,6 +48,8 @@ const ZH_CN = { "Panel.Info.Group.Details.View": "编辑查看群属性", "Panel.Title.Behavior.List.View": "行为列表", "Panel.Info.Behavior.List.View": "编辑查看行为列表", + "Panel.Title.Behavior.Details.View": "行为", + "Panel.Info.Behavior.Details.View": "编辑查看行为属性", "Popup.Title.Unnamed": "弹窗消息", "Popup.Title.Confirm": "确认消息", "Popup.Action.Yes": "确定", @@ -109,5 +111,6 @@ const ZH_CN = { "Panel.Info.Group.Details.Attr.Error.Unspecified": "未指定群对象", "Panel.Info.Label.Details.Error.Unspecified": "未指定标签对象", "Panel.Info.Label.List.Error.Nodata": "模型中没有标签，点击按钮以创建", + "Panel.Info.Behavior.Details.Error.Not.Behavior": "请先指定一个行为以查看详情", } export default ZH_CN; \ No newline at end of file diff --git a/source/Page/SimulatorWeb/SimulatorWeb.tsx b/source/Page/SimulatorWeb/SimulatorWeb.tsx index 462c9bd..2a40601 100644 --- a/source/Page/SimulatorWeb/SimulatorWeb.tsx +++ b/source/Page/SimulatorWeb/SimulatorWeb.tsx @@ -75,9 +75,9 @@ class SimulatorWeb extends Component { items: [ { items: [ - {panels: ["RenderView", "Label Aa Bb", "Label aaa"]}, + {panels: ["RenderView"]}, { - items: [{panels: ["BehaviorList", "Label bbb"]}, {panels: ["LabelList"]}], + items: [{panels: ["BehaviorList"]}, {panels: ["LabelList"]}], scale: 80, layout: LayoutDirection.X } @@ -87,9 +87,9 @@ class SimulatorWeb extends Component { }, { items: [{ - panels: ["ObjectList", "Test tab"] + panels: ["ObjectList"] }, { - panels: ["GroupDetails", "RangeDetails", "LabelDetails"] + panels: ["GroupDetails", "RangeDetails", "LabelDetails", "BehaviorDetails"] }], scale: 30, layout: LayoutDirection.Y diff --git a/source/Panel/BehaviorDetails/BehaviorDetails.scss b/source/Panel/BehaviorDetails/BehaviorDetails.scss new file mode 100644 index 0000000..e69de29 diff --git a/source/Panel/BehaviorDetails/BehaviorDetails.tsx b/source/Panel/BehaviorDetails/BehaviorDetails.tsx new file mode 100644 index 0000000..621c323 --- /dev/null +++ b/source/Panel/BehaviorDetails/BehaviorDetails.tsx @@ -0,0 +1,26 @@ +import { Component, ReactNode} from "react"; +import { useStatusWithEvent, IMixinStatusProps } from "@Context/Status"; +import { Behavior } from "@Model/Behavior"; +import { Message } from "@Component/Message/Message"; +import "./BehaviorDetails.scss"; + +interface IBehaviorDetailsProps {} + +@useStatusWithEvent("focusBehaviorChange") +class BehaviorDetails extends Component { + + private renderFrom(behavior: Behavior): ReactNode { + return <>; + } + + public render(): ReactNode { + if (this.props.status) { + if (this.props.status.focusBehavior) { + return this.renderFrom(this.props.status.focusBehavior); + } + } + return ; + } +} + +export { BehaviorDetails }; \ No newline at end of file diff --git a/source/Panel/Panel.tsx b/source/Panel/Panel.tsx index a032e83..8c03517 100644 --- a/source/Panel/Panel.tsx +++ b/source/Panel/Panel.tsx @@ -9,6 +9,7 @@ import { LabelList } from "./LabelList/LabelList"; import { LabelDetails } from "./LabelDetails/LabelDetails"; import { GroupDetails } from "./GroupDetails/GroupDetails"; import { BehaviorList } from "./BehaviorList/BehaviorList"; +import { BehaviorDetails } from "./BehaviorDetails/BehaviorDetails"; interface IPanelInfo { nameKey: string; @@ -29,6 +30,7 @@ type PanelId = "" | "LabelDetails" // 标签属性 | "GroupDetails" // 群属性 | "BehaviorList" // 行为列表 +| "BehaviorDetails" // 行为属性 ; const PanelInfoMap = new Map(); @@ -60,6 +62,10 @@ PanelInfoMap.set("BehaviorList", { nameKey: "Panel.Title.Behavior.List.View", introKay: "Panel.Info.Behavior.List.View", class: BehaviorList, hidePadding: true }); +PanelInfoMap.set("BehaviorDetails", { + nameKey: "Panel.Title.Behavior.Details.View", introKay: "Panel.Info.Behavior.Details.View", + class: BehaviorDetails +}); function getPanelById(panelId: PanelId): ReactNode { switch (panelId) { -- 2.45.2 From a23b5d62cccae51c6126df6b0377d490fa94543a Mon Sep 17 00:00:00 2001 From: MrKBear Date: Mon, 4 Apr 2022 16:44:16 +0800 Subject: [PATCH 2/6] Optmi object list checkbox style --- source/Panel/ObjectList/ObjectList.scss | 11 +++++++---- source/Panel/ObjectList/ObjectList.tsx | 3 --- 2 files changed, 7 insertions(+), 7 deletions(-) diff --git a/source/Panel/ObjectList/ObjectList.scss b/source/Panel/ObjectList/ObjectList.scss index 6b4a749..0399bf0 100644 --- a/source/Panel/ObjectList/ObjectList.scss +++ b/source/Panel/ObjectList/ObjectList.scss @@ -20,16 +20,19 @@ div.object-list { opacity: 0; } - i.checkbox-icon:hover { - color: $lt-green; - } - i.type-icon { display: inline-block; opacity: 1; } } + div.object-list-checkbox:hover { + + i.checkbox-icon { + color: $lt-green !important; + } + } + div.details-list-item:hover { div.object-list-checkbox { diff --git a/source/Panel/ObjectList/ObjectList.tsx b/source/Panel/ObjectList/ObjectList.tsx index 6da3c46..6c24c8b 100644 --- a/source/Panel/ObjectList/ObjectList.tsx +++ b/source/Panel/ObjectList/ObjectList.tsx @@ -51,9 +51,6 @@ class ObjectList extends Component { } }} checkBox={(item) => { - if (this.props.setting) { - this.props.setting.layout.focus("ObjectList"); - } if (this.props.status) { if ( this.props.status.focusObject.has(item.key.toString()) || -- 2.45.2 From 4d818988f9da99aabc70ef996a58d136e696c1f9 Mon Sep 17 00:00:00 2001 From: MrKBear Date: Mon, 4 Apr 2022 16:52:42 +0800 Subject: [PATCH 3/6] Auto switch behavior details panels --- source/Panel/BehaviorList/BehaviorList.tsx | 6 +++--- source/Panel/GroupDetails/GroupDetails.tsx | 9 +++++++-- 2 files changed, 10 insertions(+), 5 deletions(-) diff --git a/source/Panel/BehaviorList/BehaviorList.tsx b/source/Panel/BehaviorList/BehaviorList.tsx index cb3989b..b9674d5 100644 --- a/source/Panel/BehaviorList/BehaviorList.tsx +++ b/source/Panel/BehaviorList/BehaviorList.tsx @@ -45,9 +45,9 @@ class BehaviorList extends Component { diff --git a/source/Panel/GroupDetails/GroupDetails.tsx b/source/Panel/GroupDetails/GroupDetails.tsx index 5108e95..2ff750b 100644 --- a/source/Panel/GroupDetails/GroupDetails.tsx +++ b/source/Panel/GroupDetails/GroupDetails.tsx @@ -1,6 +1,7 @@ import { Component, ReactNode } from "react"; import { AttrInput } from "@Component/AttrInput/AttrInput"; -import { useStatusWithEvent, IMixinStatusProps, Status } from "@Context/Status"; +import { useStatusWithEvent, IMixinStatusProps } from "@Context/Status"; +import { useSetting, IMixinSettingProps } from "@Context/Setting"; import { Message } from "@Component/Message/Message"; import { ObjectID } from "@Model/Renderer"; import { ColorInput } from "@Component/ColorInput/ColorInput"; @@ -25,11 +26,12 @@ const allOption: IDisplayItem[] = [ {nameKey: "Common.Attr.Key.Generation.Mod.Range", key: GenMod.Range} ]; +@useSetting @useStatusWithEvent( "groupAttrChange", "groupLabelChange", "focusObjectChange", "focusBehaviorChange", "behaviorChange", "groupBehaviorChange" ) -class GroupDetails extends Component { +class GroupDetails extends Component { private renderFrom(group: Group) { return <> @@ -122,6 +124,9 @@ class GroupDetails extends Component { }} action={(behavior) => { this.props.status?.setBehaviorObject(behavior); + setTimeout(() => { + this.props.setting?.layout.focus("BehaviorDetails"); + }); }} delete={(behavior) => { this.props.status?.deleteGroupBehavior(group.id, behavior); -- 2.45.2 From c10dd6e882b7ec65131a148149ea52065b986418 Mon Sep 17 00:00:00 2001 From: MrKBear Date: Mon, 4 Apr 2022 17:41:26 +0800 Subject: [PATCH 4/6] Add behavior attr panel basic props editer --- .../Component/BehaviorList/BehaviorList.tsx | 2 +- .../BehaviorPicker/BehaviorPicker.tsx | 2 +- .../Component/BehaviorPopup/BehaviorPopup.tsx | 3 +-- source/Context/Status.tsx | 21 +++++++++++++++- source/Model/Behavior.ts | 6 ++--- source/Page/SimulatorWeb/SimulatorWeb.tsx | 6 ++--- .../Panel/BehaviorDetails/BehaviorDetails.tsx | 25 +++++++++++++++++-- source/Panel/BehaviorList/BehaviorList.tsx | 2 +- source/Panel/GroupDetails/GroupDetails.tsx | 3 ++- 9 files changed, 55 insertions(+), 15 deletions(-) diff --git a/source/Component/BehaviorList/BehaviorList.tsx b/source/Component/BehaviorList/BehaviorList.tsx index 1e11a30..af0c8a9 100644 --- a/source/Component/BehaviorList/BehaviorList.tsx +++ b/source/Component/BehaviorList/BehaviorList.tsx @@ -112,7 +112,7 @@ class BehaviorList extends Component
-
+
{ } } + /** + * 修改群属性 + */ + public changeBehaviorAttrib> + (id: ObjectID, key: P, val: IParamValue) { + const behavior = this.model.getBehaviorById(id); + if (behavior) { + if (key === "color") { + behavior.color = val as number[]; + } else if (key === "name") { + behavior.name = val as string; + } else { + behavior.parameter[key] = val; + } + this.emit("behaviorAttrChange"); + } + } + public addGroupBehavior(id: ObjectID, val: Behavior) { const group = this.model.getObjectById(id); if (group && group instanceof Group) { diff --git a/source/Model/Behavior.ts b/source/Model/Behavior.ts index fb91290..9dac877 100644 --- a/source/Model/Behavior.ts +++ b/source/Model/Behavior.ts @@ -295,7 +295,7 @@ class Behavior< /** * 颜色 */ - public color: string = ""; + public color: number[] = [0, 0, 0]; /** * 优先级 @@ -397,7 +397,7 @@ class Behavior< type IRenderBehavior = BehaviorInfo | Behavior; export { - Behavior, BehaviorRecorder, IBehaviorParameterOption, IBehaviorParameterOptionItem, - IAnyBehavior, IAnyBehaviorRecorder, BehaviorInfo, IRenderBehavior + Behavior, BehaviorRecorder, IBehaviorParameterOption, IBehaviorParameterOptionItem, IParamValue, + IAnyBehavior, IAnyBehaviorRecorder, BehaviorInfo, IRenderBehavior, IBehaviorParameter }; export default { Behavior }; \ No newline at end of file diff --git a/source/Page/SimulatorWeb/SimulatorWeb.tsx b/source/Page/SimulatorWeb/SimulatorWeb.tsx index 2a40601..9364e9b 100644 --- a/source/Page/SimulatorWeb/SimulatorWeb.tsx +++ b/source/Page/SimulatorWeb/SimulatorWeb.tsx @@ -56,11 +56,11 @@ class SimulatorWeb extends Component { this.status.newLabel().name = "New Label"; this.status.newLabel().name = "Test Label 01"; let dynamic = this.status.model.addBehavior(AllBehaviors[0]); - dynamic.name = "Dynamic"; dynamic.color = "rgb(250, 200, 80)"; + dynamic.name = "Dynamic"; dynamic.color = [250, 200, 80]; let brownian = this.status.model.addBehavior(AllBehaviors[1]); - brownian.name = "Brownian"; brownian.color = "rgb(200, 80, 250)"; + brownian.name = "Brownian"; brownian.color = [200, 80, 250]; let boundary = this.status.model.addBehavior(AllBehaviors[2]); - boundary.name = "Boundary"; boundary.color = "rgb(80, 200, 250)"; + boundary.name = "Boundary"; boundary.color = [80, 200, 250]; boundary.parameter.range = this.status.model.allRangeLabel; group.addBehavior(dynamic); group.addBehavior(brownian); diff --git a/source/Panel/BehaviorDetails/BehaviorDetails.tsx b/source/Panel/BehaviorDetails/BehaviorDetails.tsx index 621c323..56f7d24 100644 --- a/source/Panel/BehaviorDetails/BehaviorDetails.tsx +++ b/source/Panel/BehaviorDetails/BehaviorDetails.tsx @@ -2,15 +2,36 @@ import { Component, ReactNode} from "react"; import { useStatusWithEvent, IMixinStatusProps } from "@Context/Status"; import { Behavior } from "@Model/Behavior"; import { Message } from "@Component/Message/Message"; +import { AttrInput } from "@Component/AttrInput/AttrInput"; +import { ColorInput } from "@Component/ColorInput/ColorInput"; import "./BehaviorDetails.scss"; interface IBehaviorDetailsProps {} -@useStatusWithEvent("focusBehaviorChange") +@useStatusWithEvent("focusBehaviorChange", "behaviorAttrChange") class BehaviorDetails extends Component { private renderFrom(behavior: Behavior): ReactNode { - return <>; + return <> + + + + { + this.props.status?.changeBehaviorAttrib(behavior.id, "name", val); + }} + /> + + { + this.props.status?.changeBehaviorAttrib(behavior.id, "color", color); + }} + /> + + ; } public render(): ReactNode { diff --git a/source/Panel/BehaviorList/BehaviorList.tsx b/source/Panel/BehaviorList/BehaviorList.tsx index b9674d5..4be877d 100644 --- a/source/Panel/BehaviorList/BehaviorList.tsx +++ b/source/Panel/BehaviorList/BehaviorList.tsx @@ -13,7 +13,7 @@ interface IBehaviorListProps { } @useSetting -@useStatusWithEvent("behaviorChange", "focusBehaviorChange") +@useStatusWithEvent("behaviorChange", "focusBehaviorChange", "behaviorAttrChange") class BehaviorList extends Component { private labelInnerClick: boolean = false; diff --git a/source/Panel/GroupDetails/GroupDetails.tsx b/source/Panel/GroupDetails/GroupDetails.tsx index 2ff750b..c125ae5 100644 --- a/source/Panel/GroupDetails/GroupDetails.tsx +++ b/source/Panel/GroupDetails/GroupDetails.tsx @@ -29,7 +29,8 @@ const allOption: IDisplayItem[] = [ @useSetting @useStatusWithEvent( "groupAttrChange", "groupLabelChange", "focusObjectChange", - "focusBehaviorChange", "behaviorChange", "groupBehaviorChange" + "focusBehaviorChange", "behaviorChange", "groupBehaviorChange", + "behaviorAttrChange" ) class GroupDetails extends Component { -- 2.45.2 From 8607dcd3da7d442407545bfda3db0270d639e60b Mon Sep 17 00:00:00 2001 From: MrKBear Date: Mon, 4 Apr 2022 20:37:01 +0800 Subject: [PATCH 5/6] Fix group details can focus deleted behavior --- source/Localization/EN-US.ts | 1 + source/Localization/ZH-CN.ts | 1 + .../Panel/BehaviorDetails/BehaviorDetails.tsx | 30 +++++++++++++++++++ source/Panel/BehaviorList/BehaviorList.tsx | 1 + source/Panel/GroupDetails/GroupDetails.tsx | 2 ++ 5 files changed, 35 insertions(+) diff --git a/source/Localization/EN-US.ts b/source/Localization/EN-US.ts index 875e29f..d28b7f9 100644 --- a/source/Localization/EN-US.ts +++ b/source/Localization/EN-US.ts @@ -112,5 +112,6 @@ const EN_US = { "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", "Panel.Info.Behavior.Details.Error.Not.Behavior": "Please specify a behavior first to view the details", + "Panel.Info.Behavior.Details.Behavior.Props": "{behavior} parameter", } export default EN_US; \ No newline at end of file diff --git a/source/Localization/ZH-CN.ts b/source/Localization/ZH-CN.ts index b527afd..c28978a 100644 --- a/source/Localization/ZH-CN.ts +++ b/source/Localization/ZH-CN.ts @@ -112,5 +112,6 @@ const ZH_CN = { "Panel.Info.Label.Details.Error.Unspecified": "未指定标签对象", "Panel.Info.Label.List.Error.Nodata": "模型中没有标签，点击按钮以创建", "Panel.Info.Behavior.Details.Error.Not.Behavior": "请先指定一个行为以查看详情", + "Panel.Info.Behavior.Details.Behavior.Props": "{behavior}参数", } export default ZH_CN; \ No newline at end of file diff --git a/source/Panel/BehaviorDetails/BehaviorDetails.tsx b/source/Panel/BehaviorDetails/BehaviorDetails.tsx index 56f7d24..9bfcbde 100644 --- a/source/Panel/BehaviorDetails/BehaviorDetails.tsx +++ b/source/Panel/BehaviorDetails/BehaviorDetails.tsx @@ -4,6 +4,8 @@ import { Behavior } from "@Model/Behavior"; import { Message } from "@Component/Message/Message"; import { AttrInput } from "@Component/AttrInput/AttrInput"; import { ColorInput } from "@Component/ColorInput/ColorInput"; +import { TogglesInput } from "@Component/TogglesInput/TogglesInput"; +import { ConfirmPopup } from "@Component/ConfirmPopup/ConfirmPopup"; import "./BehaviorDetails.scss"; interface IBehaviorDetailsProps {} @@ -31,6 +33,34 @@ class BehaviorDetails extends Component + { + if (this.props.status) { + const status = this.props.status; + status.popup.showPopup(ConfirmPopup, { + infoI18n: "Popup.Delete.Behavior.Confirm", + titleI18N: "Popup.Action.Objects.Confirm.Title", + yesI18n: "Popup.Action.Objects.Confirm.Delete", + red: "yes", + yes: () => { + status.model.deleteBehavior(behavior); + status.setBehaviorObject(); + } + }) + } + }} + /> + + + ; } diff --git a/source/Panel/BehaviorList/BehaviorList.tsx b/source/Panel/BehaviorList/BehaviorList.tsx index 4be877d..f07d8d4 100644 --- a/source/Panel/BehaviorList/BehaviorList.tsx +++ b/source/Panel/BehaviorList/BehaviorList.tsx @@ -63,6 +63,7 @@ class BehaviorList extends Component { status.model.deleteBehavior(behavior); + status.setBehaviorObject(); } }) } diff --git a/source/Panel/GroupDetails/GroupDetails.tsx b/source/Panel/GroupDetails/GroupDetails.tsx index c125ae5..26dd47f 100644 --- a/source/Panel/GroupDetails/GroupDetails.tsx +++ b/source/Panel/GroupDetails/GroupDetails.tsx @@ -121,9 +121,11 @@ class GroupDetails extends Component { + if (behavior.isDeleted()) return; this.props.status?.setBehaviorObject(behavior); }} action={(behavior) => { + if (behavior.isDeleted()) return; this.props.status?.setBehaviorObject(behavior); setTimeout(() => { this.props.setting?.layout.focus("BehaviorDetails"); -- 2.45.2 From dec18361ef5dbde0fcac783dd2ad13bd01b0d294 Mon Sep 17 00:00:00 2001 From: MrKBear Date: Mon, 4 Apr 2022 22:22:16 +0800 Subject: [PATCH 6/6] Mod behavior model add cache object --- source/Model/Behavior.ts | 33 ++++++++++++++++++++++++++------- 1 file changed, 26 insertions(+), 7 deletions(-) diff --git a/source/Model/Behavior.ts b/source/Model/Behavior.ts index 9dac877..f25a612 100644 --- a/source/Model/Behavior.ts +++ b/source/Model/Behavior.ts @@ -6,6 +6,11 @@ import type { Model } from "./Model"; import type { Range } from "./Range"; import type { Label } from "./Label"; +type IObjectParamCacheType = { + picker: P; + objects: Q; +} + /** * 参数类型 */ @@ -16,12 +21,10 @@ type IMapBasicParamTypeKeyToType = { } type IMapObjectParamTypeKeyToType = { - "R"?: Range; - "G"?: Group; - "GR"?: Group | Range; - "LR"?: Label | Range; - "LG"?: Label | Group; - "LGR"?: Label | Group | Range; + "R": IObjectParamCacheType; + "G": IObjectParamCacheType; + "LR": IObjectParamCacheType