Add parameter component

This commit is contained in:
MrKBear 2022-04-08 14:00:32 +08:00
parent d7e15793b9
commit 7556ea983e
10 changed files with 321 additions and 224 deletions

View File

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

View File

@ -78,4 +78,4 @@ class Localization extends Component<ILocalizationProps & IMixinSettingProps &
} }
} }
export { Localization, I18N, LanguageDataBase, AllI18nKeys }; export { Localization, I18N, LanguageDataBase, AllI18nKeys, ILocalizationProps };

View File

@ -0,0 +1,202 @@
import { AttrInput } from "@Component/AttrInput/AttrInput";
import {
IParameter, IParameterOption, IParameterOptionItem,
IParameterValue, IParamValue, isObjectType, isVectorType
} from "@Model/Parameter";
import { ObjectID } from "@Model/Renderer";
import { Component, Fragment, ReactNode } from "react";
import { TogglesInput } from "@Component/TogglesInput/TogglesInput";
import { ObjectPicker } from "@Component/ObjectPicker/ObjectPicker";
import { useSettingWithEvent, IMixinSettingProps, Language } from "@Context/Setting";
import { AllI18nKeys } from "@Component/Localization/Localization";
import { Message } from "@Component/Message/Message";
import "./Parameter.scss";
interface IParameterProps<P extends IParameter = {}> {
option: IParameterOption<P>;
value: IParameterValue<P>;
key: ObjectID;
change: <K extends keyof P>(key: K, val: IParamValue<P[K]>) => any;
i18n: <K extends keyof P>(option: IParameterOptionItem<P[K]>, language: Language) => string;
title?: AllI18nKeys;
titleOption?: Record<string, string>;
isFirst?: boolean;
}
@useSettingWithEvent("language")
class Parameter<P extends IParameter> extends Component<IParameterProps<P> & IMixinSettingProps> {
private renderParameter<K extends keyof P>
(key: K, option: IParameterOptionItem<P[K]>, value: IParamValue<P[K]>): ReactNode {
const indexKey = `${this.props.key}-${key}`;
const type = option.type;
const i18nString = this.props.i18n(option, this.props.setting?.language ?? "EN_US");
if (type === "number") {
return <AttrInput
key={indexKey}
id={indexKey}
keyI18n="Panel.Info.Behavior.Details.Parameter.Key"
keyI18nOption={{ key: i18nString }}
isNumber={true}
step={option.numberStep}
maxLength={option.maxLength}
max={option.numberMax}
min={option.numberMin}
value={value as IParamValue<"number"> ?? 0}
valueChange={(val) => {
this.props.change(key, parseFloat(val) as IParamValue<P[K]>);
}}
/>;
}
else if (type === "string") {
return <AttrInput
key={indexKey}
id={indexKey}
keyI18n="Panel.Info.Behavior.Details.Parameter.Key"
keyI18nOption={{ key: i18nString }}
maxLength={option.maxLength}
value={value as IParamValue<"string"> ?? ""}
valueChange={(val) => {
this.props.change(key, val as IParamValue<P[K]>);
}}
/>;
}
else if (type === "boolean") {
return <TogglesInput
key={indexKey}
keyI18n="Panel.Info.Behavior.Details.Parameter.Key"
keyI18nOption={{ key: i18nString }}
onIconName={option.iconName}
value={value as IParamValue<"boolean"> ?? false}
valueChange={(val) => {
this.props.change(key, val as IParamValue<P[K]>);
}}
/>
}
else if (isObjectType(type)) {
type IObjectParamValue = IParamValue<"G" | "R" | "LG" | "LR">;
const typedValue = value as IObjectParamValue;
return <ObjectPicker
key={indexKey}
keyI18n="Panel.Info.Behavior.Details.Parameter.Key"
keyI18nOption={{ key: i18nString }}
type={type}
value={typedValue.picker}
valueChange={(obj) => {
typedValue.picker = obj as IObjectParamValue["picker"];
this.props.change(key, typedValue as IParamValue<P[K]>);
}}
cleanValue={() => {
typedValue.picker = undefined as IObjectParamValue["picker"];
this.props.change(key, typedValue as IParamValue<P[K]>);
}}
/>
}
else if (isVectorType(type)) {
type IObjectParamValue = IParamValue<"vec">;
const typedValue = value as IObjectParamValue;
return <Fragment key={indexKey}>
<AttrInput
key={`${indexKey}-X`}
id={indexKey}
keyI18n="Panel.Info.Behavior.Details.Parameter.Key.Vec.X"
keyI18nOption={{ key: i18nString }}
isNumber={true}
step={option.numberStep}
maxLength={option.maxLength}
max={option.numberMax}
min={option.numberMin}
value={typedValue[0] ?? 0}
valueChange={(val) => {
typedValue[0] = parseFloat(val);
this.props.change(key, typedValue as IParamValue<P[K]>);
}}
/>
<AttrInput
key={`${indexKey}-Y`}
id={indexKey}
keyI18n="Panel.Info.Behavior.Details.Parameter.Key.Vec.Y"
keyI18nOption={{ key: i18nString }}
isNumber={true}
step={option.numberStep}
maxLength={option.maxLength}
max={option.numberMax}
min={option.numberMin}
value={typedValue[1] ?? 0}
valueChange={(val) => {
typedValue[1] = parseFloat(val);
this.props.change(key, typedValue as IParamValue<P[K]>);
}}
/>
<AttrInput
key={`${indexKey}-Z`}
id={indexKey}
keyI18n="Panel.Info.Behavior.Details.Parameter.Key.Vec.Z"
keyI18nOption={{ key: i18nString }}
isNumber={true}
step={option.numberStep}
maxLength={option.maxLength}
max={option.numberMax}
min={option.numberMin}
value={typedValue[2] ?? 0}
valueChange={(val) => {
typedValue[2] = parseFloat(val);
this.props.change(key, typedValue as IParamValue<P[K]>);
}}
/>
</Fragment>
}
else {
return <Fragment key={indexKey}/>
}
}
private renderAllParameter(key: Array<keyof P>) {
return key.map((key) => {
return this.renderParameter(
key,
this.props.option[key],
this.props.value[key],
);
});
}
public render(): ReactNode {
const allOptionKeys: Array<keyof P> = Object.getOwnPropertyNames(this.props.option);
return <>
{
allOptionKeys.length <= 0 && this.props.title ?
<Message
isTitle
first={this.props.isFirst}
i18nKey={this.props.title}
options={this.props.titleOption}
/> : null
}
{
this.renderAllParameter(allOptionKeys)
}
</>
}
}
export { Parameter }

View File

@ -11,7 +11,8 @@ import { Setting } from "./Setting";
import { I18N } from "@Component/Localization/Localization"; import { I18N } from "@Component/Localization/Localization";
import { superConnectWithEvent, superConnect } from "./Context"; import { superConnectWithEvent, superConnect } from "./Context";
import { PopupController } from "./Popups"; import { PopupController } from "./Popups";
import { Behavior, IBehaviorParameter, IParamValue } from "@Model/Behavior"; import { Behavior } from "@Model/Behavior";
import { IParameter, IParamValue } from "@Model/Parameter";
import { Actuator } from "@Model/Actuator"; import { Actuator } from "@Model/Actuator";
function randomColor(unNormal: boolean = false) { function randomColor(unNormal: boolean = false) {
@ -208,7 +209,7 @@ class Status extends Emitter<IStatusEvent> {
/** /**
* *
*/ */
public changeBehaviorAttrib<K extends IBehaviorParameter, P extends keyof K | keyof Behavior<K>> public changeBehaviorAttrib<K extends IParameter, P extends keyof K | keyof Behavior<K>>
(id: ObjectID, key: P, val: IParamValue<K[P]>, noParameter?: boolean) { (id: ObjectID, key: P, val: IParamValue<K[P]>, noParameter?: boolean) {
const behavior = this.model.getBehaviorById(id); const behavior = this.model.getBehaviorById(id);
if (behavior) { if (behavior) {

View File

@ -3,17 +3,17 @@ import type { Individual } from "./Individual";
import type { Group } from "./Group"; import type { Group } from "./Group";
import type { Model } from "./Model"; import type { Model } from "./Model";
import { import {
IParamValue, isObjectType, isVectorType, IParamValue, isObjectType, isVectorType, getDefaultValue,
IBehaviorParameterOptionItem, IBehaviorParameter, IBehaviorParameterOption, IBehaviorParameterValue IParameterOptionItem, IParameter, IParameterOption, IParameterValue
} from "./Parameter"; } from "./Parameter";
/** /**
* *
*/ */
type IBehaviorConstructor< type IBehaviorConstructor<
P extends IBehaviorParameter = {}, P extends IParameter = {},
E extends Record<EventType, any> = {} E extends Record<EventType, any> = {}
> = new (id: string, parameter: IBehaviorParameterValue<P>) => Behavior<P, E>; > = new (id: string, parameter: IParameterValue<P>) => Behavior<P, E>;
type IAnyBehavior = Behavior<any, any>; type IAnyBehavior = Behavior<any, any>;
type IAnyBehaviorRecorder = BehaviorRecorder<any, any>; type IAnyBehaviorRecorder = BehaviorRecorder<any, any>;
@ -75,7 +75,7 @@ class BehaviorInfo<E extends Record<EventType, any> = {}> extends Emitter<E> {
} }
class BehaviorRecorder< class BehaviorRecorder<
P extends IBehaviorParameter = {}, P extends IParameter = {},
E extends Record<EventType, any> = {} E extends Record<EventType, any> = {}
> extends BehaviorInfo<{}> { > extends BehaviorInfo<{}> {
@ -104,62 +104,13 @@ class BehaviorRecorder<
/** /**
* *
*/ */
public parameterOption: IBehaviorParameterOption<P>; public parameterOption: IParameterOption<P>;
/**
*
*/
public getDefaultValue(): IBehaviorParameterValue<P> {
let defaultObj = {} as IBehaviorParameterValue<P>;
for (let key in this.parameterOption) {
let defaultVal = this.parameterOption[key].defaultValue;
defaultObj[key] = defaultVal as any;
if (defaultObj[key] === undefined) {
switch (this.parameterOption[key].type) {
case "string":
defaultObj[key] = "" as any;
break;
case "number":
defaultObj[key] = 0 as any;
break;
case "boolean":
defaultObj[key] = false as any;
break;
case "vec":
defaultObj[key] = [0, 0, 0] as any;
break;
case "G":
case "R":
defaultObj[key] = {
picker: undefined,
objects: undefined
} as any;
break;
case "LR":
case "LG":
defaultObj[key] = {
picker: undefined,
objects: []
} as any;
break;
}
}
}
return defaultObj;
}
/** /**
* *
*/ */
public new(): Behavior<P, E> { public new(): Behavior<P, E> {
return new this.behavior(this.getNextId(), this.getDefaultValue()); return new this.behavior(this.getNextId(), getDefaultValue(this.parameterOption));
} }
public constructor(behavior: IBehaviorConstructor<P, E>) { public constructor(behavior: IBehaviorConstructor<P, E>) {
@ -180,7 +131,7 @@ class BehaviorRecorder<
* *
*/ */
class Behavior< class Behavior<
P extends IBehaviorParameter = {}, P extends IParameter = {},
E extends Record<EventType, any> = {} E extends Record<EventType, any> = {}
> extends BehaviorInfo<E> { > extends BehaviorInfo<E> {
@ -208,14 +159,14 @@ class Behavior<
/** /**
* *
*/ */
public parameter: IBehaviorParameterValue<P>; public parameter: IParameterValue<P>;
/** /**
* *
*/ */
public parameterOption: IBehaviorParameterOption<P> = {} as any; public parameterOption: IParameterOption<P> = {} as any;
public constructor(id: string, parameter: IBehaviorParameterValue<P>) { public constructor(id: string, parameter: IParameterValue<P>) {
super(); super();
this.id = id; this.id = id;
this.parameter = parameter; this.parameter = parameter;
@ -299,8 +250,6 @@ class Behavior<
type IRenderBehavior = BehaviorInfo | Behavior; type IRenderBehavior = BehaviorInfo | Behavior;
export { export {
Behavior, BehaviorRecorder, IBehaviorParameterOption, IBehaviorParameterOptionItem, IParamValue, Behavior, BehaviorRecorder, IAnyBehavior, IAnyBehaviorRecorder, BehaviorInfo, IRenderBehavior
IAnyBehavior, IAnyBehaviorRecorder, BehaviorInfo, IRenderBehavior, IBehaviorParameter,
isObjectType, isVectorType
}; };
export default { Behavior }; export default { Behavior };

View File

@ -5,7 +5,8 @@ import { Emitter, EventType, EventMixin } from "./Emitter";
import { CtrlObject } from "./CtrlObject"; import { CtrlObject } from "./CtrlObject";
import { ObjectID, AbstractRenderer } from "./Renderer"; import { ObjectID, AbstractRenderer } from "./Renderer";
import { Label } from "./Label"; import { Label } from "./Label";
import { Behavior, IAnyBehavior, IAnyBehaviorRecorder, IParamValue } from "./Behavior"; import { Behavior, IAnyBehavior, IAnyBehaviorRecorder } from "./Behavior";
import { IParamValue } from "@Model/Parameter";
type ModelEvent = { type ModelEvent = {
labelChange: Label[]; labelChange: Label[];

View File

@ -39,26 +39,26 @@ type IParamValue<K extends IParamType> = AllMapType[K];
/** /**
* *
*/ */
const objectTypeListEnumSet = new Set<IParamType>(["R", "G", "LR", "LG"]); const objectTypeListEnumSet = new Set<string>(["R", "G", "LR", "LG"]);
/** /**
* *
*/ */
function isObjectType(key: IParamType): key is IVectorType { function isObjectType(key: string): key is IVectorType {
return objectTypeListEnumSet.has(key); return objectTypeListEnumSet.has(key);
} }
/** /**
* *
*/ */
function isVectorType(key: IParamType): key is IObjectType { function isVectorType(key: string): key is IObjectType {
return key === "vec"; return key === "vec";
} }
/** /**
* *
*/ */
interface IBehaviorParameterOptionItem<T extends IParamType = IParamType> { interface IParameterOptionItem<T extends IParamType = IParamType> {
/** /**
* *
@ -102,25 +102,72 @@ interface IBehaviorParameterOptionItem<T extends IParamType = IParamType> {
iconName?: string; iconName?: string;
} }
interface IBehaviorParameter { interface IParameter {
[x: string]: IParamType; [x: string]: IParamType;
} }
/** /**
* *
*/ */
type IBehaviorParameterOption<P extends IBehaviorParameter> = { type IParameterOption<P extends IParameter> = {
[X in keyof P]: IBehaviorParameterOptionItem<P[X]>; [X in keyof P]: IParameterOptionItem<P[X]>;
} }
/** /**
* *
*/ */
type IBehaviorParameterValue<P extends IBehaviorParameter> = { type IParameterValue<P extends IParameter> = {
[X in keyof P]: IParamValue<P[X]> [X in keyof P]: IParamValue<P[X]>
} }
export { function getDefaultValue<P extends IParameter> (option: IParameterOption<P>): IParameterValue<P> {
IParamType, IParamValue, isObjectType, isVectorType, let defaultObj = {} as IParameterValue<P>;
IBehaviorParameterOptionItem, IBehaviorParameter, IBehaviorParameterOption, IBehaviorParameterValue for (let key in option) {
let defaultVal = option[key].defaultValue;
if (defaultVal !== undefined) {
defaultObj[key] = defaultVal;
} else {
switch (option[key].type) {
case "string":
defaultObj[key] = "" as any;
break;
case "number":
defaultObj[key] = 0 as any;
break;
case "boolean":
defaultObj[key] = false as any;
break;
case "vec":
defaultObj[key] = [0, 0, 0] as any;
break;
case "G":
case "R":
defaultObj[key] = {
picker: undefined,
objects: undefined
} as any;
break;
case "LR":
case "LG":
defaultObj[key] = {
picker: undefined,
objects: []
} as any;
break;
}
}
}
return defaultObj;
}
export {
IParamType, IParamValue, isObjectType, isVectorType, getDefaultValue,
IParameterOptionItem, IParameter, IParameterOption, IParameterValue
} }

View File

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

View File

@ -1,13 +1,13 @@
import { Component, Fragment, ReactNode} from "react"; import { Component, ReactNode} from "react";
import { useSettingWithEvent, IMixinSettingProps } from "@Context/Setting"; import { useSettingWithEvent, IMixinSettingProps } from "@Context/Setting";
import { useStatusWithEvent, IMixinStatusProps } from "@Context/Status"; import { useStatusWithEvent, IMixinStatusProps } from "@Context/Status";
import { Behavior, IBehaviorParameter, isObjectType, isVectorType } from "@Model/Behavior"; import { IAnyBehavior } from "@Model/Behavior";
import { Message } from "@Component/Message/Message"; import { Message } from "@Component/Message/Message";
import { AttrInput } from "@Component/AttrInput/AttrInput"; import { AttrInput } from "@Component/AttrInput/AttrInput";
import { ColorInput } from "@Component/ColorInput/ColorInput"; import { ColorInput } from "@Component/ColorInput/ColorInput";
import { TogglesInput } from "@Component/TogglesInput/TogglesInput"; import { TogglesInput } from "@Component/TogglesInput/TogglesInput";
import { ConfirmPopup } from "@Component/ConfirmPopup/ConfirmPopup"; import { ConfirmPopup } from "@Component/ConfirmPopup/ConfirmPopup";
import { ObjectPicker } from "@Component/ObjectPicker/ObjectPicker"; import { Parameter } from "@Component/Parameter/Parameter";
import "./BehaviorDetails.scss"; import "./BehaviorDetails.scss";
interface IBehaviorDetailsProps {} interface IBehaviorDetailsProps {}
@ -16,10 +16,23 @@ interface IBehaviorDetailsProps {}
@useStatusWithEvent("focusBehaviorChange", "behaviorAttrChange") @useStatusWithEvent("focusBehaviorChange", "behaviorAttrChange")
class BehaviorDetails extends Component<IBehaviorDetailsProps & IMixinStatusProps & IMixinSettingProps> { class BehaviorDetails extends Component<IBehaviorDetailsProps & IMixinStatusProps & IMixinSettingProps> {
private renderFrom<T extends IBehaviorParameter> private handelDeleteBehavior = (behavior: IAnyBehavior) => {
(behavior: Behavior<T, Record<string, any>>): ReactNode { if (this.props.status) {
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);
status.setBehaviorObject();
}
})
}
}
const allParameterKeys = Object.getOwnPropertyNames(behavior.parameterOption); private renderFrom(behavior: IAnyBehavior): ReactNode {
return <> return <>
@ -44,145 +57,29 @@ class BehaviorDetails extends Component<IBehaviorDetailsProps & IMixinStatusProp
keyI18n="Common.Attr.Key.Delete" red keyI18n="Common.Attr.Key.Delete" red
onIconName="delete" offIconName="delete" onIconName="delete" offIconName="delete"
valueChange={() => { valueChange={() => {
if (this.props.status) { this.handelDeleteBehavior(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);
status.setBehaviorObject();
}
})
}
}} }}
/> />
{ <Parameter
allParameterKeys.length > 0 ? key={behavior.id}
<Message option={behavior.parameterOption}
isTitle value={behavior.parameter}
i18nKey="Panel.Info.Behavior.Details.Behavior.Props" i18n={(option, language) => behavior.getTerms(option.name, language)}
options={{ title={"Panel.Info.Behavior.Details.Behavior.Props"}
behavior: behavior.getTerms(behavior.behaviorName, this.props.setting?.language) titleOption={{
}} behavior: behavior.getTerms(behavior.behaviorName, this.props.setting?.language)
/> : null }}
} change={(key, value) => {
this.props.status?.changeBehaviorAttrib(
{ behavior.id, key as string, value
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} key={indexKey}
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 { public render(): ReactNode {
if (this.props.status && this.props.status.focusBehavior) { if (this.props.status && this.props.status.focusBehavior) {
return this.renderFrom(this.props.status.focusBehavior); return this.renderFrom(this.props.status.focusBehavior);