From 873a2a8d0a7bb73e9ad92d3bd393e7fb8cb4701c Mon Sep 17 00:00:00 2001 From: MrKBear Date: Tue, 29 Mar 2022 17:44:48 +0800 Subject: [PATCH] Add behavior list panel --- .../Component/BehaviorList/BehaviorList.scss | 8 ++ .../Component/BehaviorList/BehaviorList.tsx | 8 ++ source/Context/Status.tsx | 15 ++++ source/Localization/EN-US.ts | 3 + source/Localization/ZH-CN.ts | 3 + source/Page/SimulatorWeb/SimulatorWeb.tsx | 2 +- source/Panel/BehaviorList/BehaviorList.scss | 8 ++ source/Panel/BehaviorList/BehaviorList.tsx | 77 +++++++++++++++++++ source/Panel/Panel.tsx | 6 ++ 9 files changed, 129 insertions(+), 1 deletion(-) create mode 100644 source/Panel/BehaviorList/BehaviorList.scss create mode 100644 source/Panel/BehaviorList/BehaviorList.tsx diff --git a/source/Component/BehaviorList/BehaviorList.scss b/source/Component/BehaviorList/BehaviorList.scss index 952ad08..8d9baa0 100644 --- a/source/Component/BehaviorList/BehaviorList.scss +++ b/source/Component/BehaviorList/BehaviorList.scss @@ -92,6 +92,14 @@ div.behavior-list { } } } + + div.add-button { + width: 45px; + height: 45px; + display: flex; + justify-content: center; + align-items: center; + } } div.dark.behavior-list { diff --git a/source/Component/BehaviorList/BehaviorList.tsx b/source/Component/BehaviorList/BehaviorList.tsx index 00e6081..e9624a7 100644 --- a/source/Component/BehaviorList/BehaviorList.tsx +++ b/source/Component/BehaviorList/BehaviorList.tsx @@ -10,6 +10,7 @@ interface IBehaviorListProps { focusBehaviors?: IRenderBehavior[]; click?: (behavior: IRenderBehavior) => void; action?: (behavior: IRenderBehavior) => void; + onAdd?: () => void; actionType?: "info" | "delete"; } @@ -127,11 +128,18 @@ class BehaviorList extends Component { } + private renderAddButton(add: () => void) { + return
+ +
+ } + public render(): ReactNode { return {this.props.behaviors.map((behavior) => { return this.renderBehavior(behavior); })} + {this.props.onAdd ? this.renderAddButton(this.props.onAdd) : null} } } diff --git a/source/Context/Status.tsx b/source/Context/Status.tsx index 6a526df..b7d9069 100644 --- a/source/Context/Status.tsx +++ b/source/Context/Status.tsx @@ -11,6 +11,7 @@ import { Setting } from "./Setting"; import { I18N } from "@Component/Localization/Localization"; import { superConnectWithEvent, superConnect } from "./Context"; import { PopupController } from "./Popups"; +import { Behavior } from "@Model/Behavior"; function randomColor(unNormal: boolean = false) { const color = [ @@ -32,6 +33,7 @@ interface IStatusEvent { mouseModChange: void; focusObjectChange: void; focusLabelChange: void; + focusBehaviorChange: void; objectChange: void; rangeLabelChange: void; groupLabelChange: void; @@ -84,6 +86,11 @@ class Status extends Emitter { */ public focusLabel?: Label; + /** + * 焦点行为 + */ + public focusBehavior?: Behavior; + private drawTimer?: NodeJS.Timeout; private delayDraw = () => { @@ -138,6 +145,14 @@ class Status extends Emitter { this.emit("focusLabelChange"); } + /** + * 更新焦点行为 + */ + public setBehaviorObject(focusBehavior?: Behavior) { + this.focusBehavior = focusBehavior; + this.emit("focusBehaviorChange"); + } + /** * 修改范围属性 */ diff --git a/source/Localization/EN-US.ts b/source/Localization/EN-US.ts index 26698e4..ced4fa1 100644 --- a/source/Localization/EN-US.ts +++ b/source/Localization/EN-US.ts @@ -44,6 +44,8 @@ const EN_US = { "Panel.Info.Label.Details.View": "Edit view label attributes", "Panel.Title.Group.Details.View": "Group", "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", "Popup.Title.Unnamed": "Popup message", "Popup.Title.Confirm": "Confirm message", "Popup.Action.Yes": "Confirm", @@ -51,6 +53,7 @@ const EN_US = { "Popup.Action.Objects.Confirm.Title": "Confirm Delete", "Popup.Action.Objects.Confirm.Delete": "Delete", "Popup.Delete.Objects.Confirm": "Are you sure you want to delete this object(s)? The object is deleted and cannot be recalled.", + "Popup.Delete.Behavior.Confirm": "Are you sure you want to delete this behavior? The behavior is deleted and cannot be recalled.", "Popup.Setting.Title": "Preferences setting", "Popup.Add.Behavior.Title": "Add behavior", "Popup.Add.Behavior.Action.Add": "Add all select behavior", diff --git a/source/Localization/ZH-CN.ts b/source/Localization/ZH-CN.ts index 95e36b5..3e71c1a 100644 --- a/source/Localization/ZH-CN.ts +++ b/source/Localization/ZH-CN.ts @@ -44,6 +44,8 @@ const ZH_CN = { "Panel.Info.Label.Details.View": "编辑查看标签属性", "Panel.Title.Group.Details.View": "群", "Panel.Info.Group.Details.View": "编辑查看群属性", + "Panel.Title.Behavior.List.View": "行为列表", + "Panel.Info.Behavior.List.View": "编辑查看行为列表", "Popup.Title.Unnamed": "弹窗消息", "Popup.Title.Confirm": "确认消息", "Popup.Action.Yes": "确定", @@ -51,6 +53,7 @@ const ZH_CN = { "Popup.Action.Objects.Confirm.Title": "删除确认", "Popup.Action.Objects.Confirm.Delete": "删除", "Popup.Delete.Objects.Confirm": "你确定要删除这个(些)对象吗？对象被删除将无法撤回。", + "Popup.Delete.Behavior.Confirm": "你确定要删除这个行为吗？行为被删除将无法撤回。", "Popup.Setting.Title": "首选项设置", "Popup.Add.Behavior.Title": "添加行为", "Popup.Add.Behavior.Action.Add": "添加全部选中行为", diff --git a/source/Page/SimulatorWeb/SimulatorWeb.tsx b/source/Page/SimulatorWeb/SimulatorWeb.tsx index 07587a5..d9913dc 100644 --- a/source/Page/SimulatorWeb/SimulatorWeb.tsx +++ b/source/Page/SimulatorWeb/SimulatorWeb.tsx @@ -66,7 +66,7 @@ class SimulatorWeb extends Component { items: [ {panels: ["RenderView", "Label Aa Bb", "Label aaa"]}, { - items: [{panels: ["Label b", "Label bbb"]}, {panels: ["LabelList"]}], + items: [{panels: ["BehaviorList", "Label bbb"]}, {panels: ["LabelList"]}], scale: 80, layout: LayoutDirection.X } diff --git a/source/Panel/BehaviorList/BehaviorList.scss b/source/Panel/BehaviorList/BehaviorList.scss new file mode 100644 index 0000000..a864441 --- /dev/null +++ b/source/Panel/BehaviorList/BehaviorList.scss @@ -0,0 +1,8 @@ +@import "../../Component/Theme/Theme.scss"; + +div.behavior-list-panel-root { + width: 100%; + min-height: 100%; + padding: 10px; + box-sizing: border-box; +} \ No newline at end of file diff --git a/source/Panel/BehaviorList/BehaviorList.tsx b/source/Panel/BehaviorList/BehaviorList.tsx new file mode 100644 index 0000000..780ffd8 --- /dev/null +++ b/source/Panel/BehaviorList/BehaviorList.tsx @@ -0,0 +1,77 @@ +import { BehaviorList as BehaviorListComponent } from "@Component/BehaviorList/BehaviorList"; +import { Component } from "react"; +import { useStatusWithEvent, IMixinStatusProps } from "@Context/Status"; +import { useSetting, IMixinSettingProps } from "@Context/Setting"; +import { Behavior } from "@Model/Behavior"; +import { Message } from "@Component/Message/Message"; +import { ConfirmPopup } from "@Component/ConfirmPopup/ConfirmPopup"; +import { BehaviorPopup } from "@Component/BehaviorPopup/BehaviorPopup"; +import "./BehaviorList.scss"; + +interface IBehaviorListProps { + +} + +@useSetting +@useStatusWithEvent("behaviorChange", "focusBehaviorChange") +class BehaviorList extends Component { + + private labelInnerClick: boolean = false; + + public render() { + let behaviors: Behavior[] = []; + if (this.props.status) { + behaviors = this.props.status.model.behaviorPool.concat([]); + } + return
{ + if (this.props.status && !this.labelInnerClick) { + this.props.status.setBehaviorObject(); + } + this.labelInnerClick = false; + }} + > + {behaviors.length <=0 ? + : null + } + { + if (this.props.status) { + this.props.status.setBehaviorObject(behavior as Behavior); + } + // if (this.props.setting) { + // this.props.setting.layout.focus("LabelDetails"); + // } + this.labelInnerClick = true; + }} + onAdd={() => { + this.props.status?.popup.showPopup(BehaviorPopup, {}); + }} + action={(behavior) => { + if (this.props.status && behavior instanceof Behavior) { + 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); + } + }) + } + this.labelInnerClick = true; + }} + /> +
; + } +} + +export { BehaviorList }; \ No newline at end of file diff --git a/source/Panel/Panel.tsx b/source/Panel/Panel.tsx index 0a5e6ad..a032e83 100644 --- a/source/Panel/Panel.tsx +++ b/source/Panel/Panel.tsx @@ -8,6 +8,7 @@ import { RangeDetails } from "./RangeDetails/RangeDetails"; import { LabelList } from "./LabelList/LabelList"; import { LabelDetails } from "./LabelDetails/LabelDetails"; import { GroupDetails } from "./GroupDetails/GroupDetails"; +import { BehaviorList } from "./BehaviorList/BehaviorList"; interface IPanelInfo { nameKey: string; @@ -27,6 +28,7 @@ type PanelId = "" | "LabelList" // 标签列表 | "LabelDetails" // 标签属性 | "GroupDetails" // 群属性 +| "BehaviorList" // 行为列表 ; const PanelInfoMap = new Map(); @@ -54,6 +56,10 @@ PanelInfoMap.set("GroupDetails", { nameKey: "Panel.Title.Group.Details.View", introKay: "Panel.Info.Group.Details.View", class: GroupDetails }); +PanelInfoMap.set("BehaviorList", { + nameKey: "Panel.Title.Behavior.List.View", introKay: "Panel.Info.Behavior.List.View", + class: BehaviorList, hidePadding: true +}); function getPanelById(panelId: PanelId): ReactNode { switch (panelId) {