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

Add clip details panel

Browse Source
This commit is contained in:
MrKBear 2022-05-02 16:09:02 +08:00
parent 7002d49155
commit e3681f2f32
11 changed files with 103 additions and 7 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

13
source/Context/Status.tsx
View File

@ -53,6 +53,7 @@ interface IStatusEvent {
labelAttrChange: void;
groupAttrChange: void;
behaviorAttrChange: void;
clipAttrChange: void;
individualChange: void;
behaviorChange: void;
popupChange: void;
@ -286,6 +287,18 @@ class Status extends Emitter<IStatusEvent> {
}
}
/**
* 修改剪辑属性
*/
public changeClipAttrib<K extends keyof Clip>
(id: ObjectID, key: K, val: Clip[K]) {
const clip = this.model.getClipById(id);
if (clip && clip instanceof Clip) {
clip[key] = val;
this.emit("clipAttrChange");
}
}
public addGroupBehavior(id: ObjectID, val: Behavior) {
const group = this.model.getObjectById(id);
if (group && group instanceof Group) {

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

@ -56,6 +56,8 @@ const EN_US = {
"Panel.Info.Behavior.Details.View": "Edit view Behavior attributes",
"Panel.Title.Behavior.Clip.Player": "Recording",
"Panel.Info.Behavior.Clip.Player": "Pre render recorded data",
"Panel.Title.Behavior.Clip.Details": "Clip",
"Panel.Info.Behavior.Clip.Details": "Edit view clip attributes",
"Panel.Info.Behavior.Clip.Time.Formate": "{current} / {all} / {fps}fps",
"Panel.Info.Behavior.Clip.Record.Formate": "Record: {time}",
"Panel.Info.Behavior.Clip.Uname.Clip": "Waiting for recording...",
@ -161,6 +163,7 @@ const EN_US = {
"Panel.Info.Behavior.Details.Parameter.Key.Vec.Y": "{key} Y",
"Panel.Info.Behavior.Details.Parameter.Key.Vec.Z": "{key} Z",
"Panel.Info.Clip.List.Error.Nodata": "There is no clip, please click the record button to record, or click the plus sign to create",
"Panel.Info.Clip.Details.Error.Nodata": "Specify a clip to view an attribute",
"Info.Hint.Save.After.Close": "Any unsaved progress will be lost. Are you sure you want to continue?",
"Info.Hint.Load.File.Title": "Load save",
"Info.Hint.Load.File.Intro": "Release to load the dragged save file",

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

@ -56,6 +56,8 @@ const ZH_CN = {
"Panel.Info.Behavior.Details.View": "编辑查看行为属性",
"Panel.Title.Behavior.Clip.Player": "录制",
"Panel.Info.Behavior.Clip.Player": "预渲染录制数据",
"Panel.Title.Behavior.Clip.Details": "剪辑",
"Panel.Info.Behavior.Clip.Details": "编辑查看剪辑片段属性",
"Panel.Info.Behavior.Clip.Time.Formate": "{current} / {all} / {fps} fps",
"Panel.Info.Behavior.Clip.Record.Formate": "录制: {time}",
"Panel.Info.Behavior.Clip.Uname.Clip": "等待录制...",
@ -161,6 +163,7 @@ const ZH_CN = {
"Panel.Info.Behavior.Details.Parameter.Key.Vec.Y": "{key} Y 坐标",
"Panel.Info.Behavior.Details.Parameter.Key.Vec.Z": "{key} Z 坐标",
"Panel.Info.Clip.List.Error.Nodata": "没有剪辑片段，请点击录制按钮录制，或者点击加号创建",
"Panel.Info.Clip.Details.Error.Nodata": "请指定一个剪辑片段以查看属性",
"Info.Hint.Save.After.Close": "任何未保存的进度都会丢失, 确定要继续吗?",
"Info.Hint.Load.File.Title": "加载存档",
"Info.Hint.Load.File.Intro": "释放以加载拽入的存档",

8
source/Model/Model.ts
View File

@ -349,6 +349,14 @@ class Model extends Emitter<ModelEvent> {
return newClip;
}
public getClipById(id: ObjectID): Clip | undefined {
for (let i = 0; i < this.clipPool.length; i++) {
if (this.clipPool[i].id.toString() === id.toString()) {
return this.clipPool[i];
}
}
}
/**
* 删除一个剪辑片段
*/

4
source/Page/SimulatorDesktop/SimulatorDesktop.tsx
View File

@ -64,7 +64,7 @@ class SimulatorDesktop extends Component {
items: [
{panels: ["RenderView"]},
{
items: [{panels: ["BehaviorList"]}, {panels: ["LabelList"]}],
items: [{panels: ["BehaviorList", "ClipPlayer"]}, {panels: ["LabelList"]}],
scale: 80,
layout: LayoutDirection.X
}
@ -76,7 +76,7 @@ class SimulatorDesktop extends Component {
items: [{
panels: ["ObjectList"]
}, {
panels: ["GroupDetails", "RangeDetails", "LabelDetails", "BehaviorDetails"]
panels: ["GroupDetails", "RangeDetails", "LabelDetails", "BehaviorDetails", "ClipDetails"]
}],
scale: 30,
layout: LayoutDirection.Y

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

@ -55,7 +55,7 @@ class SimulatorWeb extends Component {
items: [
{panels: ["RenderView"]},
{
items: [{panels: ["ClipPlayer", "BehaviorList"]}, {panels: ["LabelList"]}],
items: [{panels: ["BehaviorList", "ClipPlayer"]}, {panels: ["LabelList"]}],
scale: 80,
layout: LayoutDirection.X
}
@ -67,7 +67,7 @@ class SimulatorWeb extends Component {
items: [{
panels: ["ObjectList"]
}, {
panels: ["GroupDetails", "RangeDetails", "LabelDetails", "BehaviorDetails"]
panels: ["GroupDetails", "RangeDetails", "LabelDetails", "BehaviorDetails", "ClipDetails"]
}],
scale: 30,
layout: LayoutDirection.Y

0
source/Panel/ClipDetails/ClipDetails.scss Normal file
View File

60
source/Panel/ClipDetails/ClipDetails.tsx Normal file
View File

@ -0,0 +1,60 @@
import { Component, ReactNode } from "react";
import { useStatusWithEvent, IMixinStatusProps } from "@Context/Status";
import { TogglesInput } from "@Input/TogglesInput/TogglesInput";
import { ConfirmPopup } from "@Component/ConfirmPopup/ConfirmPopup";
import { AttrInput } from "@Input/AttrInput/AttrInput";
import { Message } from "@Input/Message/Message";
import { Clip } from "@Model/Clip";
import "./ClipDetails.scss";
@useStatusWithEvent("focusClipChange", "clipAttrChange")
class ClipDetails extends Component<IMixinStatusProps> {
private renderFrom(clip: Clip) {
return <>
<Message i18nKey="Common.Attr.Title.Basic" isTitle first/>
<AttrInput
keyI18n="Common.Attr.Key.Display.Name"
maxLength={15}
value={clip.name}
valueChange={(value) => {
if (this.props.status) {
this.props.status.changeClipAttrib(clip.id, "name", value);
}
}}
/>
<TogglesInput
keyI18n="Common.Attr.Key.Delete" onIconName="delete" red
offIconName="delete" valueChange={() => {
const status = this.props.status;
if (status) {
status.popup.showPopup(ConfirmPopup, {
infoI18n: "Popup.Delete.Clip.Confirm",
titleI18N: "Popup.Action.Objects.Confirm.Title",
yesI18n: "Popup.Action.Objects.Confirm.Delete",
red: "yes",
yes: () => {
status.setClipObject();
this.props.status?.actuator.endPlay();
status.model.deleteClip(clip.id);
}
});
}
}}
/>
</>;
}
public render(): ReactNode {
if (this.props.status && this.props.status.focusClip) {
return this.renderFrom(this.props.status.focusClip);
}
return <Message i18nKey="Panel.Info.Clip.Details.Error.Nodata"/>;
}
}
export { ClipDetails };

7
source/Panel/ClipPlayer/ClipPlayer.tsx
View File

@ -1,6 +1,7 @@
import { Component, ReactNode } from "react";
import { ClipList } from "@Component/ClipList/ClipList";
import { useStatusWithEvent, IMixinStatusProps } from "@Context/Status";
import { useSetting, IMixinSettingProps } from "@Context/Setting";
import { BackgroundLevel, FontLevel, Theme } from "@Component/Theme/Theme";
import { Message } from "@Input/Message/Message";
import { Clip } from "@Model/Clip";
@ -9,8 +10,9 @@ import { ConfirmPopup } from "@Component/ConfirmPopup/ConfirmPopup";
import { OfflineRender } from "@Component/OfflineRender/OfflineRender"
import "./ClipPlayer.scss";
@useStatusWithEvent("clipChange", "focusClipChange", "actuatorStartChange")
class ClipPlayer extends Component<IMixinStatusProps> {
@useSetting
@useStatusWithEvent("clipChange", "focusClipChange", "actuatorStartChange", "clipAttrChange")
class ClipPlayer extends Component<IMixinStatusProps & IMixinSettingProps> {
private isInnerClick: boolean = false;
@ -57,6 +59,7 @@ class ClipPlayer extends Component<IMixinStatusProps> {
this.isInnerClick = true;
this.props.status?.setClipObject(clip);
this.props.status?.actuator.startPlay(clip);
this.props.setting?.layout.focus("ClipDetails");
}}
/>;
}

2
source/Panel/ClipPlayer/ClipRecorder.tsx
View File

@ -3,7 +3,7 @@ import { useStatusWithEvent, IMixinStatusProps } from "@Context/Status";
import { Recorder } from "@Component/Recorder/Recorder";
import { ActuatorModel } from "@Model/Actuator";
@useStatusWithEvent("actuatorStartChange", "focusClipChange", "recordLoop")
@useStatusWithEvent("actuatorStartChange", "focusClipChange", "recordLoop", "clipAttrChange")
class ClipRecorder extends Component<IMixinStatusProps> {
public render(): ReactNode {

6
source/Panel/Panel.tsx
View File

@ -12,6 +12,7 @@ import { BehaviorList } from "@Panel/BehaviorList/BehaviorList";
import { BehaviorDetails } from "@Panel/BehaviorDetails/BehaviorDetails";
import { ClipPlayer } from "@Panel/ClipPlayer/ClipPlayer";
import { ClipRecorder } from "@Panel/ClipPlayer/ClipRecorder";
import { ClipDetails } from "@Panel/ClipDetails/ClipDetails";
interface IPanelInfo {
nameKey: string;
@ -34,6 +35,7 @@ type PanelId = ""
| "BehaviorList" // 行为列表
| "BehaviorDetails" // 行为属性
| "ClipPlayer" // 剪辑影片
| "ClipDetails" // 剪辑详情
;
const PanelInfoMap = new Map<PanelId, IPanelInfo>();
@ -73,6 +75,10 @@ PanelInfoMap.set("ClipPlayer", {
nameKey: "Panel.Title.Behavior.Clip.Player", introKay: "Panel.Info.Behavior.Clip.Player",
class: ClipPlayer, header: ClipRecorder, hidePadding: true
});
PanelInfoMap.set("ClipDetails", {
nameKey: "Panel.Title.Behavior.Clip.Details", introKay: "Panel.Info.Behavior.Clip.Details",
class: ClipDetails
});
function getPanelById(panelId: PanelId): ReactNode {
switch (panelId) {