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

Add Attrinput component

Browse Source
This commit is contained in:
MrKBear 2022-03-07 17:47:55 +08:00
parent 71e17b2f5a
commit f3ba3b6150
9 changed files with 162 additions and 66 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
source/Component/AttrInput/AttrInput.scss
View File

@ -66,6 +66,7 @@ div.attr-input {
div.err-message {
color: $lt-red;
padding-top: 5px;
min-height: 24px;
}
}
}

120
source/Component/AttrInput/AttrInput.tsx
View File

@ -13,24 +13,15 @@ interface IAttrInputProps {
max?: number;
min?: number;
step?: number;
disable?: boolean;
disableI18n?: AllI18nKeys;
valueChange?: (value: this["isNumber"] extends true ? number : string) => any;
}
interface AttrInputState {
error: ReactNode;
value: string;
}
class AttrInput extends Component<IAttrInputProps> {
class AttrInput extends Component<IAttrInputProps, AttrInputState> {
public constructor(props: IAttrInputProps) {
super(props);
const value = props.value ?? props.isNumber ? "0" : "";
this.state = {
error: this.check(value),
value: value
}
}
private value: string = "";
private error: ReactNode;
private check(value: string): ReactNode {
@ -63,16 +54,17 @@ class AttrInput extends Component<IAttrInputProps, AttrInputState> {
}
private handelValueChange = () => {
if (!this.state.error && this.props.valueChange) {
this.props.valueChange(this.state.value);
if (!this.error && this.props.valueChange) {
this.props.valueChange(this.value);
}
this.forceUpdate();
}
private changeValue = (direction: number) => {
if (this.state.error) {
if (this.error) {
return;
} else {
let newVal = (this.state.value as any / 1) + (this.props.step ?? 1) * direction;
let newVal = (this.value as any / 1) + (this.props.step ?? 1) * direction;
// 最大值校验
if (this.props.max !== undefined && newVal > this.props.max) {
@ -84,15 +76,60 @@ class AttrInput extends Component<IAttrInputProps, AttrInputState> {
newVal = this.props.min;
}
this.setState(
{ value: newVal.toString() },
() => this.handelValueChange()
);
this.value = newVal.toString();
this.handelValueChange()
}
}
private renderInput() {
return <>
<div className={"input-content" + (this.error ? ` error` : "")}>
{
this.props.isNumber ? <div
className="button-left"
onClick={() => this.changeValue(-1)}
>
<Icon iconName="ChevronLeft"></Icon>
</div> : null
}
<input
className="input"
value={this.value}
style={{
padding: this.props.isNumber ? "0 3px" : "0 8px"
}}
onChange={(e) => {
this.value = e.target.value;
this.error = this.check(e.target.value);
this.handelValueChange();
}}
></input>
{
this.props.isNumber ? <div
className="button-right"
onClick={() => this.changeValue(1)}
>
<Icon iconName="ChevronRight"></Icon>
</div> : null
}
</div>
{
this.error ?
<div className="err-message">
{this.error}
</div> : null
}
</>
}
public render(): ReactNode {
if (!this.error) {
const value = this.props.value ?? (this.props.isNumber ? "0" : "");
this.value = value.toString();
this.error = this.check(value.toString());
}
return <Theme
className="attr-input"
fontLevel={FontLevel.normal}
@ -101,41 +138,12 @@ class AttrInput extends Component<IAttrInputProps, AttrInputState> {
<Localization i18nKey={this.props.keyI18n}/>
</div>
<div className="root-content">
<div className={"input-content" + (this.state.error ? ` error` : "")}>
{
this.props.isNumber ? <div
className="button-left"
onClick={() => this.changeValue(-1)}
>
<Icon iconName="ChevronLeft"></Icon>
</div> : null
}
<input
className="input"
value={this.state.value}
style={{
padding: this.props.isNumber ? "0 3px" : "0 8px"
}}
onChange={(e) => {
this.setState({
error: this.check(e.target.value),
value: e.target.value
}, () => this.handelValueChange());
}}
></input>
{
this.props.isNumber ? <div
className="button-right"
onClick={() => this.changeValue(1)}
>
<Icon iconName="ChevronRight"></Icon>
</div> : null
}
</div>
{
<div className="err-message">
{this.state.error}
</div>
this.props.disable ?
this.props.disableI18n ?
<Localization i18nKey={this.props.disableI18n}/> :
<div>{this.props.value}</div> :
this.renderInput()
}
</div>
</Theme>

15
source/Context/Status.tsx
View File

@ -1,6 +1,7 @@
import { createContext, Component, FunctionComponent, useState, useEffect, ReactNode } from "react";
import { Emitter } from "@Model/Emitter";
import { Model, ObjectID } from "@Model/Model";
import { Range } from "@Model/Range";
import { Archive } from "@Model/Archive";
import { AbstractRenderer } from "@Model/Renderer";
import { ClassicRenderer, MouseMod } from "@GLRender/ClassicRenderer";
@ -22,6 +23,7 @@ interface IStatusEvent {
focusObjectChange: void;
objectChange: void;
labelChange: void;
rangeAttrChange: void;
}
class Status extends Emitter<IStatusEvent> {
@ -83,6 +85,19 @@ class Status extends Emitter<IStatusEvent> {
this.emit("focusObjectChange");
}
/**
* 修改范围属性
*/
public changeRangeAttrib<K extends keyof Range>
(id: ObjectID, key: K, val: Range[K]) {
const range = this.model.getObjectById(id);
if (range && range instanceof Range) {
range[key] = val;
this.emit("rangeAttrChange");
this.model.draw();
}
}
/**
* 鼠标工具状态
*/

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

@ -38,5 +38,8 @@ const EN_US = {
"Common.Attr.Key.Position.X": "Position X",
"Common.Attr.Key.Position.Y": "Position Y",
"Common.Attr.Key.Position.Z": "Position Z",
"Common.Attr.Key.Error.Multiple": "Cannot edit multiple values",
"Panel.Info.Range.Details.Attr.Error.Not.Range": "The focus object is not a Range",
"Panel.Info.Range.Details.Attr.Error.Unspecified": "Unspecified range object",
}
export default EN_US;

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

@ -38,5 +38,8 @@ const ZH_CN = {
"Common.Attr.Key.Position.X": "X 坐标",
"Common.Attr.Key.Position.Y": "Y 坐标",
"Common.Attr.Key.Position.Z": "Z 坐标",
"Common.Attr.Key.Error.Multiple": "无法编辑多重数值",
"Panel.Info.Range.Details.Attr.Error.Not.Range": "焦点对象不是一个范围",
"Panel.Info.Range.Details.Attr.Error.Unspecified": "未指定范围对象",
}
export default ZH_CN;

2
source/Model/Model.ts
View File

@ -39,7 +39,7 @@ class Model extends Emitter<ModelEvent> {
public getObjectById(id: ObjectID): CtrlObject | undefined {
for (let i = 0; i < this.objectPool.length; i++) {
if (this.objectPool[i].id === id) {
if (this.objectPool[i].id.toString() === id.toString()) {
return this.objectPool[i];
}
}

2
source/Model/Range.ts
View File

@ -8,7 +8,7 @@ class Range extends CtrlObject {
/**
* 坐标
*/
public position: number[] = [];
public position: number[] = [0, 0, 0];
/**
* 半径

2
source/Panel/ObjectList/ObjectList.tsx
View File

@ -7,7 +7,7 @@ import { ObjectID } from "@Model/Renderer";
import "./ObjectList.scss";
@useSetting
@useStatusWithEvent("objectChange", "focusObjectChange")
@useStatusWithEvent("objectChange", "focusObjectChange", "rangeAttrChange")
class ObjectList extends Component<IMixinStatusProps & IMixinSettingProps> {
private renderList() {

80
source/Panel/RangeDetails/RangeDetails.tsx
View File

@ -1,15 +1,81 @@
import { Component, ReactNode } from "react";
import { AttrInput } from "@Component/AttrInput/AttrInput";
import { useStatusWithEvent, IMixinStatusProps } from "@Context/Status";
import { AllI18nKeys } from "@Component/Localization/Localization";
import { Range } from "@Model/Range";
import { ObjectID } from "@Model/Renderer";
import "./RangeDetails.scss";
class RangeDetails extends Component {
@useStatusWithEvent("rangeAttrChange", "focusObjectChange")
class RangeDetails extends Component<IMixinStatusProps> {
private renderErrorFrom(error: AllI18nKeys) {
return <>
<AttrInput keyI18n="Common.Attr.Key.Display.Name" disable disableI18n={error}/>
<AttrInput keyI18n="Common.Attr.Key.Position.X" disable disableI18n={error}/>
<AttrInput keyI18n="Common.Attr.Key.Position.Y" disable disableI18n={error}/>
<AttrInput keyI18n="Common.Attr.Key.Position.Z" disable disableI18n={error}/>
</>
}
private renderFrom(range: Range) {
return <>
<AttrInput
keyI18n="Common.Attr.Key.Display.Name"
value={range.displayName}
valueChange={(e) => {
this.props.status ? this.props.status.changeRangeAttrib(range.id, "displayName", e) : null;
}}
/>
<AttrInput
isNumber={true}
step={.1}
keyI18n="Common.Attr.Key.Position.X"
value={range.position[0]}
valueChange={(e) => {
if (this.props.status) {
range.position[0] = (e as any) / 1;
this.props.status.changeRangeAttrib(range.id, "position", range.position);
}
}}
/>
<AttrInput
keyI18n="Common.Attr.Key.Position.Y"
value={range.position[1]}
valueChange={(e) => {
this.props.status ? this.props.status.changeRangeAttrib(range.id, "displayName", e) : null;
}}
/>
<AttrInput
keyI18n="Common.Attr.Key.Position.Z"
value={range.position[2]}
valueChange={(e) => {
this.props.status ? this.props.status.changeRangeAttrib(range.id, "displayName", e) : null;
}}
/>
</>
}
public render(): ReactNode {
return <div>
<AttrInput keyI18n="Common.Attr.Key.Display.Name"></AttrInput>
<AttrInput keyI18n="Common.Attr.Key.Position.X" isNumber></AttrInput>
<AttrInput keyI18n="Common.Attr.Key.Position.Y" isNumber></AttrInput>
<AttrInput keyI18n="Common.Attr.Key.Position.Z" isNumber></AttrInput>
</div>
if (this.props.status) {
if (this.props.status.focusObject.size <= 0) {
return this.renderErrorFrom("Panel.Info.Range.Details.Attr.Error.Unspecified");
}
if (this.props.status.focusObject.size > 1) {
return this.renderErrorFrom("Common.Attr.Key.Error.Multiple");
}
let id: ObjectID = 0;
this.props.status.focusObject.forEach((cid => id = cid));
let range = this.props.status!.model.getObjectById(id);
if (range instanceof Range) {
return this.renderFrom(range);
} else {
return this.renderErrorFrom("Panel.Info.Range.Details.Attr.Error.Not.Range");
}
}
return this.renderErrorFrom("Panel.Info.Range.Details.Attr.Error.Unspecified");
}
}