source/Component/BehaviorPicker/BehaviorPicker.scss

@@ -39,11 +39,8 @@ div.behavior-picker-list {
             i.view-icon {
                 display: none;
             }
-        }
 
-        div.behavior-picker-line-icon-view:hover {
+            i.view-icon:hover {
-            
-            i.view-icon {
                 color: $lt-green;
             }
         }
@@ -60,28 +57,16 @@ div.behavior-picker-list {
             }
         }
 
-        div.behavior-picker-title.is-deleted {
-
-            div {
-                text-decoration: line-through;
-                opacity: 0.6;
-            }
-        }
-        
-        div.behavior-picker-title.behavior-add-line {
-            width: calc(100% - 30px);
-        }
-
         div.behavior-picker-line-delete-view {
             width: 30px;
             height: 100%;
             display: flex;
             justify-content: center;
             align-items: center;
-        }
 
-        div.behavior-picker-line-delete-view:hover i {
+            i:hover {
-            color: $lt-red;
+                color: $lt-red;
+            }
         }
     }
 

source/Component/BehaviorPicker/BehaviorPicker.tsx

@@ -1,189 +1,76 @@
 import { DetailsList } from "@Component/DetailsList/DetailsList";
-import { Component, ReactNode, createRef } from "react";
+import { Component, ReactNode } from "react";
 import { Behavior } from "@Model/Behavior";
 import { Icon } from "@fluentui/react";
 import { useSettingWithEvent, IMixinSettingProps } from "@Context/Setting";
-import { useStatusWithEvent, IMixinStatusProps } from "@Context/Status";
 import { Localization } from "@Component/Localization/Localization";
-import { PickerList } from "@Component/PickerList/PickerList";
 import "./BehaviorPicker.scss";
 
 interface IBehaviorPickerProps {
     behavior: Behavior[];
-    focusBehavior?: Behavior;
-    click?: (behavior: Behavior) => void;
     delete?: (behavior: Behavior) => void;
     action?: (behavior: Behavior) => void;
-    add?: (behavior: Behavior) => void;
+    add?: () => void;
 }
 
-interface IBehaviorPickerState {
-    isPickerListOpen: boolean;
-}
-
-@useStatusWithEvent("behaviorChange")
 @useSettingWithEvent("language")
-class BehaviorPicker extends Component<IBehaviorPickerProps & IMixinSettingProps & IMixinStatusProps> {
+class BehaviorPicker extends Component<IBehaviorPickerProps & IMixinSettingProps> {
-
-    public state = {
-        isPickerListOpen: false
-    }
-
-    private isInnerClick: boolean = false;
-    private clickLineRef = createRef<HTMLDivElement>();
 
     private getData() {
-        let data: Array<{select: boolean, key: string, behavior: Behavior | undefined}> = [];
+        let data: Array<{key: string, behavior: Behavior | undefined}> = [];
         for (let i = 0; i < this.props.behavior.length; i++) {
             data.push({
                 key: this.props.behavior[i].id,
-                behavior: this.props.behavior[i],
+                behavior: this.props.behavior[i]
-                select: this.props.behavior[i].id === this.props.focusBehavior?.id
             })
         }
         data.push({
             key: "@@AddButton_List_Key",
-            behavior: undefined,
+            behavior: undefined
-            select: false
         })
         return data;
     }
 
     private renderLine = (behavior?: Behavior): ReactNode => {
         if (behavior) {
-
-            const titleClassList: string[] = ["behavior-picker-title"];
-            if (this.props.setting) {
-                titleClassList.push(this.props.setting.language);
-            }
-            if (behavior.isDeleted()) {
-                titleClassList.push("is-deleted");
-            }
-
             return <>
                 <div className="behavior-picker-line-color-view">
                     <div style={{ borderLeft: `10px solid ${behavior.color}` }}/>
                 </div>
-                <div
+                <div className="behavior-picker-line-icon-view">
-                    className="behavior-picker-line-icon-view"
+                    <Icon iconName={behavior.iconName} className="behavior-icon"/>
-                    onClick={() => {
+                    <Icon iconName="EditCreate" className="view-icon"/>
-                        this.isInnerClick = true;
-                        this.props.action && this.props.action(behavior);
-                    }}
-                >   
-                    {
-                        behavior.isDeleted() ?
-                            <Icon iconName={behavior.iconName}/>:
-                            <>
-                                <Icon iconName={behavior.iconName} className="behavior-icon"/>
-                                <Icon iconName="EditCreate" className="view-icon"/>
-                            </>
-                    }
                 </div>
-                <div className={titleClassList.join(" ")}>
+                <div className={`behavior-picker-title ${this.props.setting?.language}`}>
                     <div>{behavior.name}</div>
                 </div>
-                <div
+                <div className="behavior-picker-line-delete-view">
-                    className="behavior-picker-line-delete-view"
-                    onClick={() => {
-                        this.isInnerClick = true;
-                        this.props.delete && this.props.delete(behavior);
-                    }}
-                >
                     <Icon iconName="Delete"/>
                 </div>
             </>;
         } else {
-
-            const openPicker = () => {
-                this.isInnerClick = true;
-                this.setState({
-                    isPickerListOpen: true
-                });
-            }
-
             return <>
-                <div
+                <div className="behavior-picker-line-icon-view">
-                    className="behavior-picker-line-icon-view"
-                    onClick={openPicker}
-                >
                     <Icon iconName="Add" className="add-icon"/>
                 </div>
-                <div
+                <div className={`behavior-picker-title`}>
-                    className="behavior-picker-title behavior-add-line"
-                    onClick={openPicker}
-                    ref={this.clickLineRef}
-                >
                     <Localization i18nKey="Behavior.Picker.Add.Button"/>
                 </div>
             </>;
         }
     }
 
-    private getAllData = (): Behavior[] => {
-        if (this.props.status) {
-            let res: Behavior[] = [];
-            for (let i = 0; i < this.props.status.model.behaviorPool.length; i++) {
-
-                let isAdded = false;
-                for (let j = 0; j < this.props.behavior.length; j++) {
-                    if (this.props.status.model.behaviorPool[i].id === this.props.behavior[j].id) {
-                        isAdded = true;
-                        break;
-                    }
-                }
-
-                if (!isAdded) {
-                    res.push(this.props.status.model.behaviorPool[i]);
-                }
-            }
-            return res;
-        } else {
-            return [];
-        }
-    }
-
-    private renderPickerList(): ReactNode {
-        return <PickerList
-            objectList={this.getAllData()}
-            noData="Behavior.Picker.Add.Nodata"
-            target={this.clickLineRef}
-            clickObjectItems={((item) => {
-                if (item instanceof Behavior && this.props.add) {
-                    this.props.add(item);
-                }
-                this.setState({
-                    isPickerListOpen: false
-                })
-            })}
-            dismiss={() => {
-                this.setState({
-                    isPickerListOpen: false
-                });
-            }}
-        />
-    }
-
     public render(): ReactNode {
-        return <>
+        return <DetailsList
-            <DetailsList
+            hideCheckBox
-                hideCheckBox
+            className="behavior-picker-list"
-                className="behavior-picker-list"
+            items={this.getData()}
-                items={this.getData()}
+            columns={[{
-                clickLine={(item) => {
+                className: "behavior-picker-line",
-                    if (!this.isInnerClick && this.props.click && item.behavior) {
+                key: "behavior",
-                        this.props.click(item.behavior);
+                render: this.renderLine
-                    }
+            }]}
-                    this.isInnerClick = false;
+        />
-                }}
-                columns={[{
-                    className: "behavior-picker-line",
-                    key: "behavior",
-                    render: this.renderLine
-                }]}
-            />
-            {this.state.isPickerListOpen ? this.renderPickerList() : null}
-        </>
     }
 }
 

source/Component/ObjectPicker/ObjectPicker.tsx

@@ -8,7 +8,6 @@ import { PickerList, IDisplayItem, getObjectDisplayInfo, IDisplayInfo } from "..
 import { Localization } from "@Component/Localization/Localization";
 import { Icon } from "@fluentui/react";
 import { CtrlObject } from "@Model/CtrlObject";
-import { Behavior } from "@Model/Behavior";
 import "./ObjectPicker.scss";
 
 type IObjectType = Label | Group | Range | CtrlObject;
@@ -81,7 +80,6 @@ class ObjectPicker extends Component<IObjectPickerProps & IMixinStatusProps, IOb
             target={this.pickerTarget}
             objectList={this.getAllOption()}
             clickObjectItems={((item) => {
-                if (item instanceof Behavior) return;
                 if (this.props.valueChange) {
                     this.props.valueChange(item);
                 }

source/Component/PickerList/PickerList.tsx

@@ -1,6 +1,5 @@
 import { AllI18nKeys, Localization } from "@Component/Localization/Localization";
 import { Callout, DirectionalHint, Icon } from "@fluentui/react";
-import { Behavior } from "@Model/Behavior";
 import { CtrlObject } from "@Model/CtrlObject";
 import { Group } from "@Model/Group";
 import { Label } from "@Model/Label";
@@ -8,7 +7,7 @@ import { Range } from "@Model/Range";
 import { Component, ReactNode, RefObject } from "react";
 import "./PickerList.scss";
 
-type IPickerListItem = CtrlObject | Label | Range | Group | Behavior;
+type IPickerListItem = CtrlObject | Label | Range | Group;
 interface IDisplayInfo {
     color: string;
     icon: string;
@@ -76,14 +75,6 @@ function getObjectDisplayInfo(item?: IPickerListItem): IDisplayInfo {
         }
 	}
 
-	if (item instanceof Behavior) {
-		color = item.color;
-		icon = item.iconName;
-		name = item.name;
-		internal = false;
-		allLabel = false;
-	}
-
     if (Array.isArray(color)) {
         color = `rgb(${color[0]},${color[1]},${color[2]})`;
     }
@@ -168,7 +159,7 @@ class PickerList extends Component<IPickerListProps> {
 		return <Callout
 			onDismiss={this.props.dismiss}
 			target={this.props.target}
-			directionalHint={DirectionalHint.topCenter}
+			directionalHint={DirectionalHint.topAutoEdge}
 		>
 			<div className="picker-list-root">
 				{this.props.objectList ? this.props.objectList.map((item) => {

source/Context/Status.tsx

@@ -38,7 +38,6 @@ interface IStatusEvent {
     objectChange: void;
     rangeLabelChange: void;
     groupLabelChange: void;
-    groupBehaviorChange: void;
     labelChange: void;
     rangeAttrChange: void;
     labelAttrChange: void;
@@ -193,22 +192,6 @@ class Status extends Emitter<IStatusEvent> {
         }
     }
 
-    public addGroupBehavior(id: ObjectID, val: Behavior) {
-        const group = this.model.getObjectById(id);
-        if (group && group instanceof Group) {
-            group.addBehavior(val);
-            this.emit("groupBehaviorChange");
-        }
-    }
-
-    public deleteGroupBehavior(id: ObjectID, val: Behavior) {
-        const group = this.model.getObjectById(id);
-        if (group && group instanceof Group) {
-            group.deleteBehavior(val);
-            this.emit("groupBehaviorChange");
-        }
-    }
-
     public addGroupLabel(id: ObjectID, val: Label) {
         const group = this.model.getObjectById(id);
         if (group && group instanceof Group) {

source/Localization/EN-US.ts

@@ -31,7 +31,6 @@ const EN_US = {
     "Object.List.No.Data": "There are no objects in the model, click the button to create it",
     "Object.Picker.List.No.Data": "There is no model in the model for this option",
     "Behavior.Picker.Add.Button": "Click here to assign behavior to this group",
-    "Behavior.Picker.Add.Nodata": "There is no behavior that can be specified",
     "Panel.Title.Notfound": "{id}",
     "Panel.Info.Notfound": "This panel with id {id} can not found!",
     "Panel.Title.Render.View": "Live preview",

source/Localization/ZH-CN.ts

@@ -31,7 +31,6 @@ const ZH_CN = {
     "Object.List.No.Data": "模型中没有任何对象，点击按钮以创建",
     "Object.Picker.List.No.Data": "模型中没有合适此选项的模型",
     "Behavior.Picker.Add.Button": "点击此处以赋予行为到此群",
-    "Behavior.Picker.Add.Nodata": "没有可以被指定的行为",
     "Panel.Title.Notfound": "{id}",
     "Panel.Info.Notfound": "这个编号为 {id} 的面板无法找到!",
     "Panel.Title.Render.View": "实时预览",

source/Model/Group.ts

@@ -315,12 +315,8 @@ class Group extends CtrlObject {
 	public addBehavior(behavior: Behavior | Behavior[]): this {
 		if (Array.isArray(behavior)) {
 			this.behaviors = this.behaviors.concat(behavior);
-            for (let i = 0; i < behavior.length; i++) {
-                behavior[i].mount(this, this.model);
-            }
 		} else {
 			this.behaviors.push(behavior);
-            behavior.mount(this, this.model);
 		}
 
 		// 按照优先级
@@ -330,27 +326,6 @@ class Group extends CtrlObject {
 		return this;
 	}
 
-    /**
-	 * 删除行为
-	 * @param behavior 添加行为 
-	 */
-	public deleteBehavior(behavior: Behavior): this {
-        
-        let deleteIndex = -1;
-        for (let i = 0; i < this.behaviors.length; i++) {
-            if (this.behaviors[i].id === behavior.id) {
-                deleteIndex = i;
-            }
-        }
-
-        if (deleteIndex >= 0) {
-            this.behaviors[deleteIndex].unmount(this, this.model);
-            this.behaviors.splice(deleteIndex, 1);
-        }
-
-		return this;
-	}
-
 	/**
      * 执行行为影响
 	 * @param
@@ -358,11 +333,7 @@ class Group extends CtrlObject {
 	public runner(t: number, effectType: "finalEffect" | "effect" | "afterEffect" ): void {
 		this.individuals.forEach((individual) => {
 			for(let j = 0; j < this.behaviors.length; j++) {
-                if (this.behaviors[j].isDeleted()) {
+				this.behaviors[j][effectType](individual, this, this.model, t);
-                    continue;
-                } else {
-                    this.behaviors[j][effectType](individual, this, this.model, t);
-                }
 			}
 		});
 	}

source/Panel/GroupDetails/GroupDetails.tsx

@@ -25,10 +25,7 @@ const allOption: IDisplayItem[] = [
     {nameKey: "Common.Attr.Key.Generation.Mod.Range", key: GenMod.Range}
 ];
 
-@useStatusWithEvent(
+@useStatusWithEvent("groupAttrChange", "groupLabelChange", "focusObjectChange")
-    "groupAttrChange", "groupLabelChange", "focusObjectChange",
-    "focusBehaviorChange", "behaviorChange", "groupBehaviorChange"
-)
 class GroupDetails extends Component<IGroupDetailsProps & IMixinStatusProps> {
 
 	private renderFrom(group: Group) {
@@ -116,19 +113,6 @@ class GroupDetails extends Component<IGroupDetailsProps & IMixinStatusProps> {
 
             <BehaviorPicker
                 behavior={group.behaviors}
-                focusBehavior={this.props.status?.focusBehavior}
-                click={(behavior) => {
-                    this.props.status?.setBehaviorObject(behavior);
-                }}
-                action={(behavior) => {
-                    this.props.status?.setBehaviorObject(behavior);
-                }}
-                delete={(behavior) => {
-                    this.props.status?.deleteGroupBehavior(group.id, behavior);
-                }}
-                add={(behavior) => {
-                    this.props.status?.addGroupBehavior(group.id, behavior);
-                }}
             />
 
             <Message i18nKey="Common.Attr.Title.Individual.Generation" isTitle/>