MrKBear/living-together
2
2
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

Add behavior list panel

Browse Source
This commit is contained in:
MrKBear 2022-03-29 17:44:48 +08:00
parent 5ff6987a4b
commit 873a2a8d0a
9 changed files with 129 additions and 1 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
source/Component/BehaviorList/BehaviorList.scss
View File

@ -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 {

8
source/Component/BehaviorList/BehaviorList.tsx
View File

@ -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>
}
}

15
source/Context/Status.tsx
View File

@ -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");
}
/**
* 修改范围属性
*/

3
source/Localization/EN-US.ts
View File

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

3
source/Localization/ZH-CN.ts
View File

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

2
source/Page/SimulatorWeb/SimulatorWeb.tsx
View File

@ -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
}

8
source/Panel/BehaviorList/BehaviorList.scss Normal file
View File

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

77
source/Panel/BehaviorList/BehaviorList.tsx Normal file
View File

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

6
source/Panel/Panel.tsx
View File

@ -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) {