From c10dd6e882b7ec65131a148149ea52065b986418 Mon Sep 17 00:00:00 2001 From: MrKBear Date: Mon, 4 Apr 2022 17:41:26 +0800 Subject: [PATCH] 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 {