Add behavior list panel

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 {

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<IBehaviorListProps & IMixinSettingProps> {
 		</div>
 	}
 
+    private renderAddButton(add: () => void) {
+        return <div className="behavior-item add-button" onClick={add}>
+            <Icon iconName="Add"/>
+        </div>
+    }
+
 	public render(): ReactNode {
 		return <Theme className="behavior-list">
 			{this.props.behaviors.map((behavior) => {
 				return this.renderBehavior(behavior);
 			})}
+            {this.props.onAdd ? this.renderAddButton(this.props.onAdd) : null}
 		</Theme>
 	}
 }

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<IStatusEvent> {
      */
     public focusLabel?: Label;
 
+    /**
+     * 焦点行为
+     */
+    public focusBehavior?: Behavior;
+
     private drawTimer?: NodeJS.Timeout;
 
     private delayDraw = () => {
@@ -138,6 +145,14 @@ class Status extends Emitter<IStatusEvent> {
         this.emit("focusLabelChange");
     }
 
+    /**
+     * 更新焦点行为
+     */
+    public setBehaviorObject(focusBehavior?: Behavior) {
+        this.focusBehavior = focusBehavior;
+        this.emit("focusBehaviorChange");
+    }
+
     /**
      * 修改范围属性
      */

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",

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": "添加全部选中行为",

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
                         }

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;
+}

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<IBehaviorListProps & IMixinStatusProps & IMixinSettingProps> {
+    
+    private labelInnerClick: boolean = false;
+
+    public render() {
+        let behaviors: Behavior[] = [];
+        if (this.props.status) {
+            behaviors = this.props.status.model.behaviorPool.concat([]);
+        }
+        return <div
+            className="behavior-list-panel-root"
+            onClick={() => {
+                if (this.props.status && !this.labelInnerClick) {
+                    this.props.status.setBehaviorObject();
+                }
+                this.labelInnerClick = false;
+            }}
+        >
+            {behaviors.length <=0 ? 
+                <Message i18nKey="Panel.Info.Label.List.Error.Nodata"/> : null
+            }
+            <BehaviorListComponent
+                actionType="delete"
+                behaviors={behaviors}
+                focusBehaviors={
+                    this.props.status?.focusBehavior ? 
+                        [this.props.status?.focusBehavior] : undefined
+                }
+                click={(behavior) => {
+                    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;
+                }}
+            />
+        </div>;
+    }
+}
+
+export { BehaviorList };

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<PanelId, IPanelInfo>();
@@ -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) {