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

Add behavior details panel

Browse Source
This commit is contained in:
MrKBear 2022-04-05 16:37:36 +08:00
parent 1b1f5d1633
commit cad68e8b9b
9 changed files with 220 additions and 30 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
source/Behavior/Behavior.ts
View File

@ -5,9 +5,10 @@ import { Brownian } from "./Brownian";
import { BoundaryConstraint } from "./BoundaryConstraint";
const AllBehaviors: IAnyBehaviorRecorder[] = [
new BehaviorRecorder(Template),
new BehaviorRecorder(Dynamics),
new BehaviorRecorder(Brownian),
new BehaviorRecorder(BoundaryConstraint)
new BehaviorRecorder(BoundaryConstraint),
]
/**

60
source/Behavior/Template.ts
View File

@ -4,7 +4,14 @@ import { Individual } from "@Model/Individual";
import { Model } from "@Model/Model";
type ITemplateBehaviorParameter = {
testNumber: "number";
testString: "string";
testBoolean: "boolean";
testR: "R";
testG: "G";
testLR: "LR";
testLG: "LG";
testVec: "vec";
}
type ITemplateBehaviorEvent = {}
@ -21,6 +28,53 @@ class Template extends Behavior<ITemplateBehaviorParameter, ITemplateBehaviorEve
public override category: string = "$Category";
public override parameterOption = {
testNumber: {
name: "$Test",
type: "number",
defaultValue: 1,
numberMax: 10,
numberMin: 0,
numberStep: 1
},
testString: {
name: "$Test",
type: "string",
defaultValue: "default",
maxLength: 12
},
testBoolean: {
name: "$Test",
type: "boolean",
defaultValue: false,
iconName: "Send"
},
testR: {
name: "$Test",
type: "R"
},
testG: {
name: "$Test",
type: "G"
},
testLR: {
name: "$Test",
type: "LR"
},
testLG: {
name: "$Test",
type: "LG"
},
testVec: {
name: "$Test",
type: "vec",
defaultValue: [1, 2, 3],
numberMax: 10,
numberMin: 0,
numberStep: 1
}
};
public override terms: Record<string, Record<string, string>> = {
"$Title": {
"ZH_CN": "行为",
@ -29,6 +83,10 @@ class Template extends Behavior<ITemplateBehaviorParameter, ITemplateBehaviorEve
"$Intro": {
"ZH_CN": "这是一个模板行为",
"EN_US": "This is a template behavior"
},
"$Test": {
"ZH_CN": "测试参数",
"EN_US": "Test Parameter"
}
};

3
source/Component/TextField/TextField.tsx
View File

@ -6,6 +6,7 @@ import "./TextField.scss";
interface ITextFieldProps {
className?: string;
keyI18n: AllI18nKeys;
keyI18nOption?: Record<string, string>;
infoI18n?: AllI18nKeys;
disableI18n?: AllI18nKeys;
disableI18nOption?: Record<string, string>;
@ -82,7 +83,7 @@ class TextField extends Component<ITextFieldProps> {
return <>
<Theme className="text-field-root" fontLevel={FontLevel.normal}>
<div className="text-field-intro">
<Localization i18nKey={this.props.keyI18n}/>
<Localization i18nKey={this.props.keyI18n} options={this.props.keyI18nOption}/>
</div>
<div className="text-field-container">
{

11
source/Context/Status.tsx
View File

@ -209,15 +209,16 @@ class Status extends Emitter<IStatusEvent> {
* 修改群属性
*/
public changeBehaviorAttrib<K extends IBehaviorParameter, P extends keyof K | keyof Behavior<K>>
(id: ObjectID, key: P, val: IParamValue<K[P]>) {
(id: ObjectID, key: P, val: IParamValue<K[P]>, noParameter?: boolean) {
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;
if (noParameter) {
behavior[key as keyof Behavior<K>] = val as never;
} else {
behavior.parameter[key] = val;
behavior.parameterOption[key]?.onChange ?
behavior.parameterOption[key]?.onChange!(val) :
undefined;
}
this.emit("behaviorAttrChange");
}

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

@ -113,5 +113,9 @@ const EN_US = {
"Panel.Info.Label.List.Error.Nodata": "There are no labels in the model, click the button to create",
"Panel.Info.Behavior.Details.Error.Not.Behavior": "Please specify a behavior first to view the details",
"Panel.Info.Behavior.Details.Behavior.Props": "{behavior} parameter",
"Panel.Info.Behavior.Details.Parameter.Key": "{key}",
"Panel.Info.Behavior.Details.Parameter.Key.Vec.X": "{key} X",
"Panel.Info.Behavior.Details.Parameter.Key.Vec.Y": "{key} Y",
"Panel.Info.Behavior.Details.Parameter.Key.Vec.Z": "{key} Z",
}
export default EN_US;

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

@ -113,5 +113,9 @@ const ZH_CN = {
"Panel.Info.Label.List.Error.Nodata": "模型中没有标签，点击按钮以创建",
"Panel.Info.Behavior.Details.Error.Not.Behavior": "请先指定一个行为以查看详情",
"Panel.Info.Behavior.Details.Behavior.Props": "{behavior}参数",
"Panel.Info.Behavior.Details.Parameter.Key": "{key}",
"Panel.Info.Behavior.Details.Parameter.Key.Vec.X": "{key} X 坐标",
"Panel.Info.Behavior.Details.Parameter.Key.Vec.Y": "{key} Y 坐标",
"Panel.Info.Behavior.Details.Parameter.Key.Vec.Z": "{key} Z 坐标",
}
export default ZH_CN;

5
source/Model/Behavior.ts
View File

@ -87,7 +87,7 @@ interface IBehaviorParameterOptionItem<T extends IParamType = IParamType> {
/**
* 字符长度
*/
stringLength?: number;
maxLength?: number;
/**
* 数字步长
@ -417,6 +417,7 @@ type IRenderBehavior = BehaviorInfo | Behavior;
export {
Behavior, BehaviorRecorder, IBehaviorParameterOption, IBehaviorParameterOptionItem, IParamValue,
IAnyBehavior, IAnyBehaviorRecorder, BehaviorInfo, IRenderBehavior, IBehaviorParameter
IAnyBehavior, IAnyBehaviorRecorder, BehaviorInfo, IRenderBehavior, IBehaviorParameter,
isObjectType, isVectorType
};
export default { Behavior };

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

@ -55,13 +55,16 @@ class SimulatorWeb extends Component {
this.status.model.update(0);
this.status.newLabel().name = "New Label";
this.status.newLabel().name = "Test Label 01";
let dynamic = this.status.model.addBehavior(AllBehaviors[0]);
let template = this.status.model.addBehavior(AllBehaviors[0]);
template.name = "Template"; template.color = [150, 20, 220];
let dynamic = this.status.model.addBehavior(AllBehaviors[1]);
dynamic.name = "Dynamic"; dynamic.color = [250, 200, 80];
let brownian = this.status.model.addBehavior(AllBehaviors[1]);
let brownian = this.status.model.addBehavior(AllBehaviors[2]);
brownian.name = "Brownian"; brownian.color = [200, 80, 250];
let boundary = this.status.model.addBehavior(AllBehaviors[2]);
let boundary = this.status.model.addBehavior(AllBehaviors[3]);
boundary.name = "Boundary"; boundary.color = [80, 200, 250];
// boundary.parameter.range = this.status.model.allRangeLabel;
group.addBehavior(template);
group.addBehavior(dynamic);
group.addBehavior(brownian);
group.addBehavior(boundary);

151
source/Panel/BehaviorDetails/BehaviorDetails.tsx
View File

@ -1,19 +1,26 @@
import { Component, ReactNode} from "react";
import { Component, Fragment, ReactNode} from "react";
import { useSettingWithEvent, IMixinSettingProps } from "@Context/Setting";
import { useStatusWithEvent, IMixinStatusProps } from "@Context/Status";
import { Behavior } from "@Model/Behavior";
import { Behavior, IBehaviorParameter, isObjectType, isVectorType } from "@Model/Behavior";
import { Message } from "@Component/Message/Message";
import { AttrInput } from "@Component/AttrInput/AttrInput";
import { ColorInput } from "@Component/ColorInput/ColorInput";
import { TogglesInput } from "@Component/TogglesInput/TogglesInput";
import { ConfirmPopup } from "@Component/ConfirmPopup/ConfirmPopup";
import { ObjectPicker } from "@Component/ObjectPicker/ObjectPicker";
import "./BehaviorDetails.scss";
interface IBehaviorDetailsProps {}
@useSettingWithEvent("language")
@useStatusWithEvent("focusBehaviorChange", "behaviorAttrChange")
class BehaviorDetails extends Component<IBehaviorDetailsProps & IMixinStatusProps> {
class BehaviorDetails extends Component<IBehaviorDetailsProps & IMixinStatusProps & IMixinSettingProps> {
private renderFrom<T extends IBehaviorParameter>
(behavior: Behavior<T, Record<string, any>>): ReactNode {
const allParameterKeys = Object.getOwnPropertyNames(behavior.parameterOption);
private renderFrom(behavior: Behavior): ReactNode {
return <>
<Message i18nKey="Common.Attr.Title.Basic" isTitle first/>
@ -21,7 +28,7 @@ class BehaviorDetails extends Component<IBehaviorDetailsProps & IMixinStatusProp
<AttrInput
id={behavior.id} keyI18n="Common.Attr.Key.Display.Name" value={behavior.name}
valueChange={(val) => {
this.props.status?.changeBehaviorAttrib(behavior.id, "name", val);
this.props.status?.changeBehaviorAttrib(behavior.id, "name", val, true);
}}
/>
@ -29,7 +36,7 @@ class BehaviorDetails extends Component<IBehaviorDetailsProps & IMixinStatusProp
keyI18n="Common.Attr.Key.Color"
value={behavior.color}
valueChange={(color) => {
this.props.status?.changeBehaviorAttrib(behavior.id, "color", color);
this.props.status?.changeBehaviorAttrib(behavior.id, "color", color, true);
}}
/>
@ -53,22 +60,132 @@ class BehaviorDetails extends Component<IBehaviorDetailsProps & IMixinStatusProp
}}
/>
<Message
isTitle
i18nKey="Panel.Info.Behavior.Details.Behavior.Props"
options={{
behavior: behavior.getTerms(behavior.behaviorName)
}}
/>
{
allParameterKeys.length > 0 ?
<Message
isTitle
i18nKey="Panel.Info.Behavior.Details.Behavior.Props"
options={{
behavior: behavior.getTerms(behavior.behaviorName, this.props.setting?.language)
}}
/> : null
}
{
allParameterKeys.map((key) => {
return this.renderParameter(behavior, key);
})
}
</>;
}
private renderParameter<T extends IBehaviorParameter>
(behavior: Behavior<T, Record<string, any>>, key: keyof T): ReactNode {
const type = behavior.parameterOption[key];
const value = behavior.parameter[key];
const indexKey = `${behavior.id}-${key}`;
if (type.type === "number") {
return <AttrInput
keyI18n="Panel.Info.Behavior.Details.Parameter.Key"
keyI18nOption={{ key: behavior.getTerms(type.name, this.props.setting?.language) }}
key={indexKey} id={indexKey} isNumber={true} step={type.numberStep} maxLength={type.maxLength}
max={type.numberMax} min={type.numberMin}
value={(value as number) ?? 0}
valueChange={(val) => {
this.props.status?.changeBehaviorAttrib(behavior.id, key as string, (val as any) / 1);
}}
/>
}
if (type.type === "string") {
return <AttrInput
keyI18n="Panel.Info.Behavior.Details.Parameter.Key"
keyI18nOption={{ key: behavior.getTerms(type.name, this.props.setting?.language) }}
key={indexKey} id={indexKey} maxLength={type.maxLength}
value={(value as string) ?? ""}
valueChange={(val) => {
this.props.status?.changeBehaviorAttrib(behavior.id, key as string, val);
}}
/>
}
if (type.type === "boolean") {
return <TogglesInput
keyI18n="Panel.Info.Behavior.Details.Parameter.Key"
keyI18nOption={{ key: behavior.getTerms(type.name, this.props.setting?.language) }}
onIconName={type.iconName} key={indexKey} value={(value as boolean) ?? false}
valueChange={(val) => {
this.props.status?.changeBehaviorAttrib(behavior.id, key as string, val);
}}
/>
}
if (isObjectType(type.type as any)) {
return <ObjectPicker
keyI18n="Panel.Info.Behavior.Details.Parameter.Key"
keyI18nOption={{ key: behavior.getTerms(type.name, this.props.setting?.language) }}
type={type.type} value={(value as any).picker}
valueChange={(obj) => {
(value as any).picker = obj;
this.props.status?.changeBehaviorAttrib(behavior.id, key as string, value);
}}
cleanValue={() => {
(value as any).picker = undefined;
this.props.status?.changeBehaviorAttrib(behavior.id, key as string, value);
}}
/>
}
if (isVectorType(type.type as any)) {
return <Fragment key={indexKey}>
<AttrInput
keyI18n="Panel.Info.Behavior.Details.Parameter.Key.Vec.X"
keyI18nOption={{ key: behavior.getTerms(type.name, this.props.setting?.language) }}
key={`${indexKey}-X`} id={indexKey} isNumber={true} step={type.numberStep} maxLength={type.maxLength}
max={type.numberMax} min={type.numberMin}
value={(value as number[])[0] ?? 0}
valueChange={(val) => {
(value as number[])[0] = (val as any) / 1;
this.props.status?.changeBehaviorAttrib(behavior.id, key as string, value);
}}
/>
<AttrInput
keyI18n="Panel.Info.Behavior.Details.Parameter.Key.Vec.Y"
keyI18nOption={{ key: behavior.getTerms(type.name, this.props.setting?.language) }}
key={`${indexKey}-Y`} id={indexKey} isNumber={true} step={type.numberStep} maxLength={type.maxLength}
max={type.numberMax} min={type.numberMin}
value={(value as number[])[1] ?? 0}
valueChange={(val) => {
(value as number[])[1] = (val as any) / 1;
this.props.status?.changeBehaviorAttrib(behavior.id, key as string, value);
}}
/>
<AttrInput
keyI18n="Panel.Info.Behavior.Details.Parameter.Key.Vec.Z"
keyI18nOption={{ key: behavior.getTerms(type.name, this.props.setting?.language) }}
key={`${indexKey}-Z`} id={indexKey} isNumber={true} step={type.numberStep} maxLength={type.maxLength}
max={type.numberMax} min={type.numberMin}
value={(value as number[])[2] ?? 0}
valueChange={(val) => {
(value as number[])[2] = (val as any) / 1;
this.props.status?.changeBehaviorAttrib(behavior.id, key as string, value);
}}
/>
</Fragment>
}
return <Fragment key={indexKey}/>
}
public render(): ReactNode {
if (this.props.status) {
if (this.props.status.focusBehavior) {
return this.renderFrom(this.props.status.focusBehavior);
}
if (this.props.status && this.props.status.focusBehavior) {
return this.renderFrom(this.props.status.focusBehavior);
}
return <Message i18nKey="Panel.Info.Behavior.Details.Error.Not.Behavior"/>;
}