Add record function

source/Component/Recorder/Recorder.scss

@@ -29,6 +29,10 @@ div.recorder-root {
 		}
 	}
 
+	div.recorder-slider.disable {
+		opacity: .6;
+	}
+
 	div.recorder-content {
 		width: 100%;
 		height: 32px;
@@ -68,6 +72,11 @@ div.recorder-root {
 			div.ctrl-action-main {
 				font-size: 1.5em;
 			}
+
+			div.ctrl-action.disable {
+				cursor: not-allowed;
+				opacity: .6;
+			}
 		}
 
 		div.speed-view {
@@ -105,6 +114,11 @@ div.recorder-root.light {
 			background-color: $lt-bg-color-lvl3-light;
 			color: $lt-font-color-lvl1-light;
 		}
+
+		div.ctrl-button div.ctrl-action.disable:hover {
+			background-color: $lt-bg-color-lvl4-light;
+			color: $lt-font-color-normal-light;
+		}
 	}
 }
 
@@ -132,5 +146,10 @@ div.recorder-root.dark {
 			background-color: $lt-bg-color-lvl3-dark;
 			color: $lt-font-color-lvl1-dark;
 		}
+
+		div.ctrl-button div.ctrl-action.disable:hover {
+			background-color: $lt-bg-color-lvl4-dark;
+			color: $lt-font-color-normal-dark;
+		}
 	}
 }

source/Component/Recorder/Recorder.tsx

@@ -5,20 +5,22 @@ import { Component, ReactNode } from "react";
 import "./Recorder.scss";
 
 interface IRecorderProps {
-	mode?: "P" | "R",
+	mode: "P" | "R",
+	running?: boolean,
 	name?: string;
 	fps?: number;
 	allFrame?: number;
 	currentFrame?: number;
 	allTime?: number;
 	currentTime?: number;
+	action?: () => void;
 }
 
 class Recorder extends Component<IRecorderProps> {
 
 	private parseTime(time?: number): string {
 		if (time === undefined) {
-			return "--:--:--:--";
+			return "0:0:0:0";
 		}
 		const h = Math.floor(time / 3600);
 		const m = Math.floor((time % 3600) / 60);
@@ -27,7 +29,50 @@ class Recorder extends Component<IRecorderProps> {
 		return `${h}:${m}:${s}:${ms}`;
 	}
 
+	private getRecordInfo(): ReactNode {
+		if (this.props.mode === "P") {
+			return <Localization
+				i18nKey="Panel.Info.Behavior.Clip.Time.Formate"
+				options={{
+					current: this.parseTime(this.props.currentTime),
+					all: this.parseTime(this.props.allTime),
+					fps: this.props.fps ? this.props.fps.toString() : "0"
+				}}
+			/>;
+		}
+		else if (this.props.mode === "R") {
+			return <Localization
+				i18nKey="Panel.Info.Behavior.Clip.Record.Formate"
+				options={{
+					time: this.parseTime(this.props.currentTime),
+				}}
+			/>;
+		}
+	}
+
+	private getActionIcon(): string {
+		if (this.props.mode === "P") {
+			if (this.props.running) {
+				return "Pause";
+			} else {
+				return "Play";
+			}
+		}
+		else if (this.props.mode === "R") {
+			if (this.props.running) {
+				return "Stop";
+			} else {
+				return "CircleStop";
+			}
+		}
+		return "Play";
+	}
+
 	public render(): ReactNode {
+
+		const isSliderDisable = this.props.mode === "R";
+		const isJumpDisable = this.props.mode === "R";
+
 		return <Theme
 			className="recorder-root"
 			backgroundLevel={BackgroundLevel.Level4}
@@ -35,35 +80,33 @@ class Recorder extends Component<IRecorderProps> {
 		>
 			<Slider
 				min={0}
+				disabled={isSliderDisable}
 				value={this.props.currentFrame}
 				max={this.props.allFrame}
-				className="recorder-slider"
+				className={"recorder-slider" + (isSliderDisable ? " disable" : "")}
 				showValue={false}
 			/>
 			<div className="recorder-content">
 				<div className="time-view">
-					<Localization
-						i18nKey="Panel.Info.Behavior.Clip.Time.Formate"
-						options={{
-							current: this.parseTime(this.props.currentTime),
-							all: this.parseTime(this.props.allTime),
-							fps: this.props.fps ? this.props.fps.toString() : "--"
-						}}
-					/>
+					{this.getRecordInfo()}
 				</div>
 				<div className="ctrl-button">
-					<div className="ctrl-action">
+					<div className={"ctrl-action" + (isJumpDisable ? " disable" : "")}>
 						<Icon iconName="Back"/>
 					</div>
-					<div className="ctrl-action ctrl-action-main">
-						<Icon iconName="Play"/>
+					<div className="ctrl-action ctrl-action-main" onClick={this.props.action}>
+						<Icon iconName={this.getActionIcon()}/>
 					</div>
-					<div className="ctrl-action">
+					<div className={"ctrl-action" + (isJumpDisable ? " disable" : "")}>
 						<Icon iconName="Forward"/>
 					</div>
 				</div>
 				<div className="speed-view">
-					{this.props.name}
+					{
+						this.props.name ?
+							<span>{this.props.name}</span> :
+							<Localization i18nKey="Panel.Info.Behavior.Clip.Uname.Clip"/>
+					}
 				</div>
 			</div>
 		</Theme>;

source/Context/Status.tsx

@@ -14,6 +14,7 @@ import { PopupController } from "@Context/Popups";
 import { Behavior } from "@Model/Behavior";
 import { IParameter, IParamValue } from "@Model/Parameter";
 import { Actuator } from "@Model/Actuator";
+import { Clip } from "@Model/Clip";
 
 function randomColor(unNormal: boolean = false) {
     const color = [
@@ -35,14 +36,17 @@ interface IStatusEvent {
     fileChange: void;
     renderLoop: number;
     physicsLoop: number;
+    recordLoop: number;
     mouseModChange: void;
     focusObjectChange: void;
     focusLabelChange: void;
     focusBehaviorChange: void;
     objectChange: void;
+    focusClipChange: void;
     rangeLabelChange: void;
     groupLabelChange: void;
     groupBehaviorChange: void;
+    clipChange: void;
     labelChange: void;
     rangeAttrChange: void;
     labelAttrChange: void;
@@ -98,6 +102,11 @@ class Status extends Emitter<IStatusEvent> {
      */
     public focusBehavior?: Behavior;
 
+    /**
+     * 焦点行为
+     */
+    public focusClip?: Clip;
+
     private drawTimer?: NodeJS.Timeout;
 
     private delayDraw = () => {
@@ -119,11 +128,13 @@ class Status extends Emitter<IStatusEvent> {
 
         // 循环事件
         this.actuator.on("loop", (t) => { this.emit("physicsLoop", t) });
+        this.actuator.on("record", (t) => { this.emit("recordLoop", t) });
 
         // 对象变化事件
         this.model.on("objectChange", () => this.emit("objectChange"));
         this.model.on("labelChange", () => this.emit("labelChange"));
         this.model.on("behaviorChange", () => this.emit("behaviorChange"));
+        this.model.on("clipChange", () => this.emit("clipChange"));
 
         // 弹窗事件
         this.popup.on("popupChange", () => this.emit("popupChange"));
@@ -220,6 +231,16 @@ class Status extends Emitter<IStatusEvent> {
         this.emit("focusBehaviorChange");
     }
 
+    /**
+     * 更新焦点行为
+     */
+    public setClipObject(clip?: Clip) {
+        if (this.focusClip !== clip) {
+            this.focusClip = clip;
+        }
+        this.emit("focusClipChange");
+    }
+
     /**
      * 修改范围属性
      */

source/Localization/EN-US.ts

@@ -56,6 +56,8 @@ const EN_US = {
     "Panel.Title.Behavior.Clip.Player": "Recording",
     "Panel.Info.Behavior.Clip.Player": "Pre render recorded data",
     "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...",
     "Popup.Title.Unnamed": "Popup message",
     "Popup.Title.Confirm": "Confirm message",
     "Popup.Action.Yes": "Confirm",

source/Localization/ZH-CN.ts

@@ -56,6 +56,8 @@ const ZH_CN = {
     "Panel.Title.Behavior.Clip.Player": "录制",
     "Panel.Info.Behavior.Clip.Player": "预渲染录制数据",
     "Panel.Info.Behavior.Clip.Time.Formate": "{current} / {all} / {fps} fps",
+    "Panel.Info.Behavior.Clip.Record.Formate": "录制: {time}",
+    "Panel.Info.Behavior.Clip.Uname.Clip": "等待录制...",
     "Popup.Title.Unnamed": "弹窗消息",
     "Popup.Title.Confirm": "确认消息",
     "Popup.Action.Yes": "确定",

source/Model/Actuator.ts

@@ -11,6 +11,7 @@ enum ActuatorModel {
 
 interface IActuatorEvent {
 	startChange: boolean;
+	record: number;
 	loop: number;
 }
 
@@ -130,6 +131,7 @@ class Actuator extends Emitter<IActuatorEvent> {
 							this.mod === ActuatorModel.Offline
 						) {
 							this.recordClip?.record(this.alignTimer * this.speed);
+							this.emit("record", this.alignTimer);
 						}
 
 						this.emit("loop", this.alignTimer);

source/Model/Clip.ts

@@ -24,6 +24,11 @@ class Clip {
 
 	public id: string;
 
+	/**
+	 * 时间
+	 */
+	public time: number = 0;
+
 	/**
 	 * 用户自定义名称
 	 */
@@ -76,6 +81,7 @@ class Clip {
 			duration: t
 		};
 
+		this.time += t;
 		this.frames.push(frame);
 
 		return frame;

source/Panel/ClipPlayer/ClipRecorder.tsx

@@ -1,9 +1,58 @@
 import { Component, ReactNode } from "react";
+import { useStatusWithEvent, IMixinStatusProps } from "@Context/Status";
 import { Recorder } from "@Component/Recorder/Recorder";
+import { ActuatorModel } from "@Model/Actuator";
 
-class ClipRecorder extends Component {
+@useStatusWithEvent("actuatorStartChange", "focusClipChange", "recordLoop")
+class ClipRecorder extends Component<IMixinStatusProps> {
 	public render(): ReactNode {
-		return <Recorder/>
+
+		let mod: "P" | "R" = this.props.status?.focusClip ? "P" : "R";
+		let runner: boolean = false;
+		let currentTime: number = 0;
+
+		// 是否开始录制
+		if (mod === "R") {
+
+			// 是否正在录制
+			runner = this.props.status?.actuator.mod === ActuatorModel.Record ||
+			this.props.status?.actuator.mod === ActuatorModel.Offline;
+
+			currentTime = this.props.status?.actuator.recordClip?.time ?? 0;
+		}
+
+		else if (mod === "P") {
+
+			// 是否正在播放
+			runner = this.props.status?.actuator.mod === ActuatorModel.Play;
+		}
+
+		return <Recorder
+			currentTime={currentTime}
+			mode={mod}
+			running={runner}
+			action={() => {
+
+				// 开启录制
+				if (mod === "R" && !runner) {
+
+					// 获取新实例
+					let newClip = this.props.status?.model.addClip();
+					
+					// 开启录制时钟
+					this.props.status?.actuator.startRecord(newClip!);
+					console.log("ClipRecorder: Rec start...");
+				}
+
+				// 暂停录制
+				if (mod === "R" && runner) {
+
+					// 暂停录制时钟
+					this.props.status?.actuator.endRecord();
+					console.log("ClipRecorder: Rec end...");
+				}
+			}}
+		/>
 	}
 }