Merge pull request 'Add statistics panel' (#56) from dev-mrkbear into master

Reviewed-on: http://git.mrkbear.com/MrKBear/living-together/pulls/56

config/parseSave2Obj.js

@@ -0,0 +1,304 @@
+const PATH = require("path");
+const FS = require("fs");
+const MINIMIST = require("minimist");
+const READLINE = require("readline-sync");
+
+const ARGS = MINIMIST(process.argv.slice(2), {
+    alias: {i: ["input", "save"], o: ["output", "obj"]}
+});
+
+// 获取路径
+const inputFilePath = PATH.resolve(ARGS.i ?? "./save.ltss");
+const outputFilePath = PATH.resolve(ARGS.o ?? "./output.obj");
+
+// 读取文件
+const fileString = FS.readFileSync(inputFilePath);
+console.log("文件读取成功...\r\n");
+
+/**
+ * 引入所需类型
+ * @typedef {import("../source/Model/Archive").IArchiveObject} IArchiveObject
+ * @typedef {import("../source/Model/Clip").IArchiveClip} IArchiveClip
+ */
+
+/**
+ * 解析文件
+ * @type {IArchiveObject}
+ */
+const archive = JSON.parse(fileString);
+console.log("文件解析成功...\r\n");
+
+// 打印全部的剪辑列表
+if (archive.clipPool.length > 0) {
+    console.log("这个存档中存在以下剪辑:");
+}
+archive.clipPool.map((item, index) => {    
+    console.log(" \033[44;30m" + (index + 1) + "\033[40;32m " + item.name + " [" + item.id + "]\033[0m");
+});
+
+/**
+ * 选择剪辑
+ * @type {IArchiveClip}
+ */
+let clip;
+if (archive.clipPool.length <= 0) {
+    console.log("存档中没有剪辑, 退出程序...\r\n");
+    process.exit();
+} else if (archive.clipPool.length === 1) {
+    console.log("\r\n存档中只有一个剪辑, 自动选择...\r\n");
+    clip = archive.clipPool[0];
+} else {
+    console.log("\r\n请选择一个剪辑: ");
+    let userInput = READLINE.question();
+    for (let i = 0; i < archive.clipPool.length; i++) {
+        if ((i + 1) == userInput) {
+            clip = archive.clipPool[i];
+            break;
+        }
+    }
+}
+
+// 选择提示
+if (clip) {
+    console.log("已选择剪辑: " + clip.name + "\r\n");
+} else {
+    console.log("没有选择任何剪辑, 退出程序...\r\n");
+    process.exit();
+}
+
+// 解压缩文件
+console.log("正在还原压缩剪辑记录...\r\n");
+const frames = clip.frames;
+
+/**
+ * @type {Map<string, {name: string, type: string, select?: boolean}}
+ */
+const objectMapper = new Map();
+
+const LastFrameData = "@";
+
+/**
+ * @type {IArchiveClip["frames"]}
+ */
+const F = [];
+frames.forEach((frame) => {
+    /**
+     * @type {IArchiveClip["frames"][number]["commands"]}
+     */
+    const FCS = [];
+    frame.commands.forEach((command) => {
+
+        // 压缩指令
+        const FC = {
+            id: command.id,
+            type: command.type
+        };
+
+        /**
+         * 上一帧
+         * @type {IArchiveClip["frames"][number]}
+         */
+        const lastFrame = F[F.length - 1];
+
+        /**
+         * 上一帧指令
+         * @type {IArchiveClip["frames"][number]["commands"][number]}
+         */
+        const lastCommand = lastFrame?.commands.filter((c) => {
+            if (c.type === command.type && c.id === command.id) {
+                return true;
+            } else {
+                return false;
+            }
+        })[0];
+
+        // 记录
+        FC.name = (LastFrameData === command.name) ? lastCommand?.name : command.name;
+        
+        FC.data = (LastFrameData === command.data) ? lastCommand?.data : command.data;
+
+        FC.mapId = (LastFrameData === command.mapId) ? lastCommand?.mapId : command.mapId;
+
+        FC.position = (LastFrameData === command.position) ? lastCommand?.position : command.position;
+
+        FC.radius = (LastFrameData === command.radius) ? lastCommand?.radius : command.radius;
+
+        // 获取 Mapper
+        const mapper = objectMapper.get(FC.id);
+        if (mapper) {
+            mapper.type = FC.type ?? mapper.type;
+            mapper.name = FC.name ?? mapper.name;
+        } else {
+            objectMapper.set(FC.id, {
+                type: FC.type,
+                name: FC.name
+            });
+        }
+
+        FCS.push(FC);
+    });
+
+    F.push({
+        duration: frame.duration,
+        process: frame.process,
+        commands: FCS
+    });
+});
+
+console.log("剪辑记录还原成功...\r\n");
+console.log("剪辑共 " + F.length + " 帧, 对象 " + objectMapper.size + " 个\r\n");
+if (objectMapper.size) {
+    console.log("剪辑记录中存在以下对象:");
+} else {
+    console.log("剪辑记录中没有任何对象，退出程序...");
+    process.exit();
+}
+let objectMapperForEachIndex = 1;
+objectMapper.forEach((item, key) => {
+    console.log(" \033[44;30m" + (objectMapperForEachIndex ++) + "\033[40;32m " + item.type + " " + item.name + " [" + key + "]\033[0m");
+});
+
+/**
+ * @type {number[]}
+ */
+const pointMapper = [];
+
+/**
+ * @param {number} x
+ * @param {number} y
+ * @param {number} z
+ * @returns {number}
+ */
+function getPointID(x, y, z) {
+    let search = -1;
+    let pointMapperLength = (pointMapper.length / 3);
+    // for (let i = 0; i < pointMapperLength; i++) {
+    //     if (
+    //         pointMapper[i * 3 + 0] === x &&
+    //         pointMapper[i * 3 + 1] === y &&
+    //         pointMapper[i * 3 + 2] === z
+    //     ) {
+    //         search = i;
+    //     }
+    // }
+    if (search >= 0) {
+        return search;
+    } else {
+        pointMapper.push(x);
+        pointMapper.push(y);
+        pointMapper.push(z);
+        return pointMapperLength + 1;
+    }
+}
+
+let frameId = 0;
+/**
+ * @type {Map<string, {id: number, start: number, last: number, name: string, point: number[]}[]>}
+ */
+const objectLineMapper = new Map();
+/**
+ * @param {string} obj 
+ * @param {number} id 
+ * @param {number} point 
+ */
+function recordPoint(obj, id, point) {
+    let searchObj = objectLineMapper.get(obj);
+    if (searchObj) {
+
+        /**
+         * @type {{id: number, start: number, last: number, point: number[]}}
+         */
+        let search;
+        for (let i = 0; i < searchObj.length; i++) {
+            if (searchObj[i].id === id && searchObj[i].last === (frameId - 1)) {
+                search = searchObj[i];
+            }
+        }
+
+        if (search) {
+            search.point.push(point);
+            search.last = frameId;
+        } else {
+            searchObj.push({
+                id: id,
+                start: frameId,
+                last: frameId,
+                point: [point]
+            });
+        }
+    } else {
+        objectLineMapper.set(obj, [{
+            id: id,
+            start: frameId,
+            last: frameId,
+            point: [point]
+        }]);
+    }
+}
+
+console.log("\r\n正在收集多边形数据...\r\n");
+for (frameId = 0; frameId < F.length; frameId ++) {
+    F[frameId].commands.forEach((command) => {
+
+        if (command.type === "points" && command.mapId && command.data) {
+            command.mapId.forEach((pid, index) => {
+
+                const x = command.data[index * 3 + 0];
+                const y = command.data[index * 3 + 1]
+                const z = command.data[index * 3 + 2]
+
+                if (
+                    x !== undefined &&
+                    y !== undefined &&
+                    z !== undefined
+                ) {
+                    recordPoint(command.id, pid, getPointID(x, y, z));
+                }
+            })
+        }
+    });
+}
+
+let pointCount = (pointMapper.length / 3);
+
+console.log("收集点数据 " + pointCount + "个\r\n");
+console.log("收集样条:");
+let objectLineMapperIndexPrint = 1;
+objectLineMapper.forEach((item, key) => {
+    let iName = objectMapper.get(key).name;
+    console.log(" \033[44;30m" + (objectLineMapperIndexPrint ++) + "\033[40;32m " + item.length + " " + iName + " [" + key + "]\033[0m");
+});
+
+console.log("\r\n正在生成 .obj 文件...\r\n");
+
+let fileStr = ""; let fileStrVec = "";
+
+objectLineMapper.forEach((item, key) => {
+    
+    for (let i = 0; i < item.length; i++) {
+        fileStr += "\r\n";
+        fileStr += ("o " + objectMapper.get(key).name + " " + item[i].id + "\r\n");
+        fileStr += "usemtl default\r\n";
+        fileStr += "l ";
+        fileStr += getPointID(
+            item[i].start / (F.length - 1),
+            item[i].last / (F.length - 1),
+            (item[i].last - item[i].start) / (F.length - 1)
+        ) + " ";
+        fileStr += item[i].point.join(" ");
+        fileStr += "\r\n";
+    }
+
+    fileStr += "\r\n";
+});
+
+pointCount = (pointMapper.length / 3);
+for (let i = 0; i < pointCount; i++) {
+    fileStrVec += ("v " + pointMapper[i * 3 + 0] + " " + pointMapper[i * 3 + 1] + " " + pointMapper[i * 3 + 2] + "\r\n");
+}
+
+const file = "# Create with Living Together (Parse from .ltss file)\r\n\r\n" + fileStrVec + fileStr;
+
+console.log("正在生成保存文件...\r\n");
+FS.writeFileSync(outputFilePath, file);
+console.log("成功\r\n");

package-lock.json

@@ -11,14 +11,17 @@
       "dependencies": {
         "@fluentui/react": "^8.56.0",
         "@juggle/resize-observer": "^3.3.1",
+        "chart.js": "^3.7.1",
         "detect-port": "^1.3.0",
         "downloadjs": "^1.4.7",
         "express": "^4.17.3",
         "gl-matrix": "^3.4.3",
         "react": "^17.0.2",
+        "react-chartjs-2": "^4.1.0",
         "react-dnd": "^16.0.1",
         "react-dnd-html5-backend": "^16.0.1",
         "react-dom": "^17.0.2",
+        "readline-sync": "^1.4.10",
         "uuid": "^8.3.2"
       },
       "devDependencies": {
@@ -2199,6 +2202,11 @@
         "url": "https://github.com/chalk/chalk?sponsor=1"
       }
     },
+    "node_modules/chart.js": {
+      "version": "3.7.1",
+      "resolved": "https://registry.npmmirror.com/chart.js/-/chart.js-3.7.1.tgz",
+      "integrity": "sha512-8knRegQLFnPQAheZV8MjxIXc5gQEfDFD897BJgv/klO/vtIyFFmgMXrNfgrXpbTr/XbTturxRgxIXx/Y+ASJBA=="
+    },
     "node_modules/chokidar": {
       "version": "3.5.3",
       "resolved": "https://registry.npmjs.org/chokidar/-/chokidar-3.5.3.tgz",
@@ -6209,6 +6217,15 @@
         "node": ">=0.10.0"
       }
     },
+    "node_modules/react-chartjs-2": {
+      "version": "4.1.0",
+      "resolved": "https://registry.npmmirror.com/react-chartjs-2/-/react-chartjs-2-4.1.0.tgz",
+      "integrity": "sha512-AsUihxEp8Jm1oBhbEovE+w50m9PVNhz1sfwEIT4hZduRC0m14gHWHd0cUaxkFDb8HNkdMIGzsNlmVqKiOpU74g==",
+      "peerDependencies": {
+        "chart.js": "^3.5.0",
+        "react": "^16.8.0 || ^17.0.0 || ^18.0.0"
+      }
+    },
     "node_modules/react-dnd": {
       "version": "16.0.1",
       "resolved": "https://registry.npmmirror.com/react-dnd/-/react-dnd-16.0.1.tgz",
@@ -6367,6 +6384,14 @@
         "node": ">=8.10.0"
       }
     },
+    "node_modules/readline-sync": {
+      "version": "1.4.10",
+      "resolved": "https://registry.npmmirror.com/readline-sync/-/readline-sync-1.4.10.tgz",
+      "integrity": "sha512-gNva8/6UAe8QYepIQH/jQ2qn91Qj0B9sYjMBBs3QOB8F2CXcKgLxQaJRP76sWVRQt+QU+8fAkCbCvjjMFu7Ycw==",
+      "engines": {
+        "node": ">= 0.8.0"
+      }
+    },
     "node_modules/rechoir": {
       "version": "0.7.1",
       "resolved": "https://registry.npmjs.org/rechoir/-/rechoir-0.7.1.tgz",
@@ -10104,6 +10129,11 @@
         "supports-color": "^7.1.0"
       }
     },
+    "chart.js": {
+      "version": "3.7.1",
+      "resolved": "https://registry.npmmirror.com/chart.js/-/chart.js-3.7.1.tgz",
+      "integrity": "sha512-8knRegQLFnPQAheZV8MjxIXc5gQEfDFD897BJgv/klO/vtIyFFmgMXrNfgrXpbTr/XbTturxRgxIXx/Y+ASJBA=="
+    },
     "chokidar": {
       "version": "3.5.3",
       "resolved": "https://registry.npmjs.org/chokidar/-/chokidar-3.5.3.tgz",
@@ -13191,6 +13221,12 @@
         "object-assign": "^4.1.1"
       }
     },
+    "react-chartjs-2": {
+      "version": "4.1.0",
+      "resolved": "https://registry.npmmirror.com/react-chartjs-2/-/react-chartjs-2-4.1.0.tgz",
+      "integrity": "sha512-AsUihxEp8Jm1oBhbEovE+w50m9PVNhz1sfwEIT4hZduRC0m14gHWHd0cUaxkFDb8HNkdMIGzsNlmVqKiOpU74g==",
+      "requires": {}
+    },
     "react-dnd": {
       "version": "16.0.1",
       "resolved": "https://registry.npmmirror.com/react-dnd/-/react-dnd-16.0.1.tgz",
@@ -13309,6 +13345,11 @@
         "picomatch": "^2.2.1"
       }
     },
+    "readline-sync": {
+      "version": "1.4.10",
+      "resolved": "https://registry.npmmirror.com/readline-sync/-/readline-sync-1.4.10.tgz",
+      "integrity": "sha512-gNva8/6UAe8QYepIQH/jQ2qn91Qj0B9sYjMBBs3QOB8F2CXcKgLxQaJRP76sWVRQt+QU+8fAkCbCvjjMFu7Ycw=="
+    },
     "rechoir": {
       "version": "0.7.1",
       "resolved": "https://registry.npmjs.org/rechoir/-/rechoir-0.7.1.tgz",

package.json

@@ -71,14 +71,17 @@
   "dependencies": {
     "@fluentui/react": "^8.56.0",
     "@juggle/resize-observer": "^3.3.1",
+    "chart.js": "^3.7.1",
     "detect-port": "^1.3.0",
     "downloadjs": "^1.4.7",
     "express": "^4.17.3",
     "gl-matrix": "^3.4.3",
     "react": "^17.0.2",
+    "react-chartjs-2": "^4.1.0",
     "react-dnd": "^16.0.1",
     "react-dnd-html5-backend": "^16.0.1",
     "react-dom": "^17.0.2",
+    "readline-sync": "^1.4.10",
     "uuid": "^8.3.2"
   }
 }

source/Behavior/Avoidance.ts

@@ -0,0 +1,86 @@
+import { Behavior } from "@Model/Behavior";
+import { Group } from "@Model/Group";
+import { Individual } from "@Model/Individual";
+import { Model } from "@Model/Model";
+
+type IAvoidanceBehaviorParameter = {
+    avoid: "CLG",
+	strength: "number",
+    range: "number"
+}
+
+type IAvoidanceBehaviorEvent = {}
+
+class Avoidance extends Behavior<IAvoidanceBehaviorParameter, IAvoidanceBehaviorEvent> {
+
+    public override behaviorId: string = "Avoidance";
+
+    public override behaviorName: string = "$Title";
+
+    public override iconName: string = "FastMode";
+
+    public override describe: string = "$Intro";
+
+    public override category: string = "$Interactive";
+
+    public override parameterOption = {
+        avoid: { name: "$Avoid", type: "CLG" },
+        strength: { type: "number", name: "$Strength", defaultValue: 1, numberMin: 0, numberStep: .1 },
+        range: { type: "number", name: "$Range", defaultValue: 4, numberMin: 0, numberStep: .1 }
+    };
+
+    public effect = (individual: Individual, group: Group, model: Model, t: number): void => {
+        
+        let currentDistant: number = Infinity;
+        let avoidTarget = undefined as Individual | undefined;
+
+        for (let i = 0; i < this.parameter.avoid.objects.length; i++) {
+            const targetGroup = this.parameter.avoid.objects[i];
+
+            targetGroup.individuals.forEach((targetIndividual) => {
+
+				// 排除自己
+				if (targetIndividual === individual) return;
+				let dis = targetIndividual.distanceTo(individual);
+
+				if (dis < currentDistant && dis <= this.parameter.range) {
+					avoidTarget = targetIndividual;
+					currentDistant = dis;
+				}
+			});
+        }
+
+        if (avoidTarget && currentDistant !== Infinity) {
+            individual.applyForce(
+				(individual.position[0] - avoidTarget.position[0]) * this.parameter.strength / currentDistant,
+				(individual.position[1] - avoidTarget.position[1]) * this.parameter.strength / currentDistant,
+				(individual.position[2] - avoidTarget.position[2]) * this.parameter.strength / currentDistant
+			);
+        }
+    }
+
+    public override terms: Record<string, Record<string, string>> = {
+        "$Title": {
+            "ZH_CN": "躲避",
+            "EN_US": "Avoidance"
+        },
+        "$Intro": {
+            "ZH_CN": "远离视野范围内最近的躲避目标",
+            "EN_US": "Stay away from the nearest evasive target in the field of vision"
+        },
+        "$Avoid": {
+            "ZH_CN": "躲避对象",
+            "EN_US": "Avoid object"
+        },
+        "$Strength": {
+            "ZH_CN": "躲避强度",
+            "EN_US": "Avoidance intensity"
+        },
+        "$Range": {
+            "ZH_CN": "视野范围",
+            "EN_US": "Field of vision"
+        }
+    };
+}
+
+export { Avoidance };

source/Behavior/Behavior.ts

@@ -7,6 +7,12 @@ import { Tracking } from "@Behavior/Tracking";
 import { ContactAttacking } from "@Behavior/ContactAttacking";
 import { ContactAssimilate } from "@Behavior/ContactAssimilate";
 import { DelayAssimilate } from "@Behavior/DelayAssimilate";
+import { Avoidance } from "@Behavior/Avoidance";
+import { DirectionCluster } from "@Behavior/DirectionCluster";
+import { CentralCluster } from "@Behavior/CentralCluster";
+import { Manufacture } from "@Behavior/Manufacture";
+import { Wastage } from "@Behavior/Wastage";
+import { SampleTracking } from "@Behavior/SampleTracking";
 
 const AllBehaviors: IAnyBehaviorRecorder[] = [
     new BehaviorRecorder(Template),
@@ -17,6 +23,12 @@ const AllBehaviors: IAnyBehaviorRecorder[] = [
     new BehaviorRecorder(ContactAttacking),
     new BehaviorRecorder(ContactAssimilate),
     new BehaviorRecorder(DelayAssimilate),
+    new BehaviorRecorder(Avoidance),
+    new BehaviorRecorder(DirectionCluster),
+    new BehaviorRecorder(CentralCluster),
+    new BehaviorRecorder(Manufacture),
+    new BehaviorRecorder(Wastage),
+    new BehaviorRecorder(SampleTracking),
 ]
 
 /**

source/Behavior/BoundaryConstraint.ts

@@ -48,11 +48,17 @@ class BoundaryConstraint extends Behavior<IBoundaryConstraintBehaviorParameter,
 
 			if (ox || oy || oz) {
 
-				let currentFLen = individual.vectorLength(rx, ry, rz);
+				const backFocus: number[] = [0, 0, 0];
+
+				if (ox) backFocus[0] = rx - rx * rangeList[i].radius[0] / Math.abs(rx);
+				if (oy) backFocus[1] = ry - ry * rangeList[i].radius[1] / Math.abs(ry);
+				if (oz) backFocus[2] = rz - rz * rangeList[i].radius[2] / Math.abs(rz);
+
+				let currentFLen = individual.vectorLength(backFocus);
 				if (currentFLen < fLen) {
-					fx = rx;
+					fx = backFocus[0];
-					fy = ry;
+					fy = backFocus[1];
-					fz = rz;
+					fz = backFocus[2];
 					fLen = currentFLen;
 				}
 

source/Behavior/Brownian.ts

@@ -7,7 +7,9 @@ type IBrownianBehaviorParameter = {
     maxFrequency: "number",
 	minFrequency: "number",
 	maxStrength: "number",
-	minStrength: "number"
+	minStrength: "number",
+	dirLimit: "boolean",
+	angle: "number"
 }
 
 type IBrownianBehaviorEvent = {}
@@ -28,9 +30,88 @@ class Brownian extends Behavior<IBrownianBehaviorParameter, IBrownianBehaviorEve
 		maxFrequency: { type: "number", name: "$Max.Frequency", defaultValue: 5, numberStep: .1, numberMin: 0 },
 		minFrequency: { type: "number", name: "$Min.Frequency", defaultValue: 0, numberStep: .1, numberMin: 0 },
 		maxStrength: { type: "number", name: "$Max.Strength", defaultValue: 10, numberStep: .01, numberMin: 0 },
-		minStrength: { type: "number", name: "$Min.Strength", defaultValue: 0, numberStep: .01, numberMin: 0 }
+		minStrength: { type: "number", name: "$Min.Strength", defaultValue: 0, numberStep: .01, numberMin: 0 },
+		dirLimit: { type: "boolean", name: "$Direction.Limit", defaultValue: false },
+		angle: {
+			type: "number", name: "$Angle", defaultValue: 180, numberStep: 5,
+			numberMin: 0, numberMax: 360, condition: { key: "dirLimit", value: true }
+		}
 	};
 
+	private randomFocus360(): number[] {
+		let randomVec = [
+			Math.random() * 2 - 1,
+			Math.random() * 2 - 1,
+			Math.random() * 2 - 1
+		];
+
+		let randomVecLen = (randomVec[0] ** 2 + randomVec[1] ** 2 + randomVec[2] ** 2) ** 0.5;
+		return [randomVec[0] / randomVecLen, randomVec[1] / randomVecLen, randomVec[2] / randomVecLen];
+	}
+
+	private rotateWithVec(vec: number[], r: number[], ang: number) {
+
+		const cos = Math.cos(ang); const sin = Math.sin(ang);
+		const a1 = r[0] ?? 0; const a2 = r[1] ?? 0; const a3 = r[2] ?? 0; 
+
+		return [
+			(cos + (1 - cos) * a1 * a1) * (vec[0] ?? 0) +
+			((1 - cos) * a1 * a2 - sin * a3) * (vec[1] ?? 0) +
+			((1 - cos) * a1 * a3 + sin * a2) * (vec[2] ?? 0),
+
+			((1 - cos) * a1 * a2 + sin * a3) * (vec[0] ?? 0) +
+			(cos + (1 - cos) * a2 * a2) * (vec[1] ?? 0) +
+			((1 - cos) * a2 * a3 - sin * a1) * (vec[2] ?? 0),
+
+			((1 - cos) * a1 * a3 - sin * a2) * (vec[0] ?? 0) +
+			((1 - cos) * a2 * a3 + sin * a1) * (vec[1] ?? 0) +
+			(cos + (1 - cos) * a3 * a3) * (vec[2] ?? 0)
+		]
+	}
+	private angle2Vector(v1: number[], v2: number[]): number {
+		return Math.acos(
+			(v1[0] * v2[0] + v1[1] * v2[1] + v1[2] * v2[2]) /
+			(
+				(v1[0] ** 2 + v1[1] ** 2 + v1[2] ** 2) ** 0.5 *
+				(v2[0] ** 2 + v2[1] ** 2 + v2[2] ** 2) ** 0.5
+			)
+		) * 180 / Math.PI;
+	}
+
+	private randomFocusRange(dir: number[], angle: number): number[] {
+
+		// 计算 X-Z 投影
+		let pxz = [dir[0] ?? 0, 0, dir[2] ?? 0];
+
+		// 通过叉乘计算垂直向量
+		let dxz: number[];
+
+		// 如果投影向量没有长度，使用单位向量
+		if (pxz[0] ** 2 + pxz[2] ** 2 === 0) {
+			dxz = [0, 0, 1];
+		}
+
+		// 通过叉乘计算垂直轴线
+		else {
+			dxz = [
+				dir[1] * pxz[2] - pxz[1] * dir[2],
+				dir[2] * pxz[0] - pxz[2] * dir[0],
+				dir[0] * pxz[1] - pxz[0] * dir[1]
+			];
+
+			let lenDxz = (dxz[0] ** 2 + dxz[1] ** 2 + dxz[2] ** 2) ** 0.5;
+			dxz = [dxz[0] / lenDxz, dxz[1] / lenDxz, dxz[2] / lenDxz];
+		}
+
+		// 航偏角 360 随机旋转
+		let randomH = this.rotateWithVec(dxz, dir, Math.random() * Math.PI * 2);
+
+		// 俯仰角 180 * R 随机旋转
+		let randomP = this.rotateWithVec(dir, randomH, (Math.random() - 0.5) * 2 * angle * Math.PI / 180);
+		
+		return randomP;
+	}
+
 	public effect = (individual: Individual, group: Group, model: Model, t: number): void => {
 
 		const {maxFrequency, minFrequency, maxStrength, minStrength} = this.parameter;
@@ -41,11 +122,49 @@ class Brownian extends Behavior<IBrownianBehaviorParameter, IBrownianBehaviorEve
 		
 		currentTime += t;
 		if (currentTime > nextTime) {
-			individual.applyForce(
+
-				minStrength + (Math.random() * 2 - 1) * (maxStrength - minStrength),
+			let randomDir: number[];
-				minStrength + (Math.random() * 2 - 1) * (maxStrength - minStrength),
+
-				minStrength + (Math.random() * 2 - 1) * (maxStrength - minStrength)
+			// 开启角度限制
+			if (this.parameter.dirLimit) {
+
+				// 计算当前速度大小
+				const vLen = individual.vectorLength(individual.velocity);
+
+				// 随机旋转算法
+				if (vLen > 0) {
+					randomDir = this.randomFocusRange(
+						[
+							individual.velocity[0] / vLen,
+							individual.velocity[1] / vLen,
+							individual.velocity[2] / vLen
+						],
+						this.parameter.angle / 2
 					);
+
+					if (isNaN(randomDir[0]) || isNaN(randomDir[1]) || isNaN(randomDir[2])) {
+						randomDir = this.randomFocus360()
+					}
+				}
+
+				else {
+					randomDir = this.randomFocus360()
+				}
+			}
+			
+			// 随机生成算法
+			else {
+				randomDir = this.randomFocus360()
+			}
+
+			const randomLength = minStrength + Math.random() * (maxStrength - minStrength);
+
+			individual.applyForce(
+				randomDir[0] * randomLength,
+				randomDir[1] * randomLength,
+				randomDir[2] * randomLength
+			);
+
 			nextTime = minFrequency +  Math.random() * (maxFrequency - minFrequency);
 			currentTime = 0;
 		}
@@ -78,6 +197,14 @@ class Brownian extends Behavior<IBrownianBehaviorParameter, IBrownianBehaviorEve
 		"$Min.Strength": {
             "ZH_CN": "最小强度",
             "EN_US": "Minimum strength"
+        },
+		"$Direction.Limit": {
+			"ZH_CN": "开启角度限制",
+            "EN_US": "Enable limit angle"
+		},
+		"$Angle": {
+			"ZH_CN": "限制立体角 (deg)",
+            "EN_US": "Restricted solid angle (deg)"
 		}
     };
 }

source/Behavior/CentralCluster.ts

@@ -0,0 +1,96 @@
+import { Behavior } from "@Model/Behavior";
+import { Group } from "@Model/Group";
+import { Individual } from "@Model/Individual";
+import { Model } from "@Model/Model";
+
+type ICentralClusterBehaviorParameter = {
+    cluster: "CLG",
+	strength: "number",
+    range: "number"
+}
+
+type ICentralClusterBehaviorEvent = {}
+
+class CentralCluster extends Behavior<ICentralClusterBehaviorParameter, ICentralClusterBehaviorEvent> {
+
+    public override behaviorId: string = "CentralCluster";
+
+    public override behaviorName: string = "$Title";
+
+    public override iconName: string = "ZoomToFit";
+
+    public override describe: string = "$Intro";
+
+    public override category: string = "$Interactive";
+
+    public override parameterOption = {
+        cluster: { name: "$Cluster", type: "CLG" },
+        strength: { type: "number", name: "$Strength", defaultValue: 1, numberMin: 0, numberStep: .1 },
+        range: { type: "number", name: "$Range", defaultValue: 4, numberMin: 0, numberStep: .1 }
+    };
+
+    public effect = (individual: Individual, group: Group, model: Model, t: number): void => {
+        
+        let findCount = 0;
+        let centerPos: number[] = [0, 0, 0];
+
+        for (let i = 0; i < this.parameter.cluster.objects.length; i++) {
+            const targetGroup = this.parameter.cluster.objects[i];
+
+            targetGroup.individuals.forEach((targetIndividual) => {
+
+				// 排除自己
+				if (targetIndividual === individual) return;
+				let dis = targetIndividual.distanceTo(individual);
+
+				if (dis <= this.parameter.range) {
+                    centerPos[0] += targetIndividual.position[0];
+                    centerPos[1] += targetIndividual.position[1];
+                    centerPos[2] += targetIndividual.position[2];
+					findCount ++;
+				}
+			});
+        }
+
+        if (findCount > 0) {
+
+            let dirX = centerPos[0] / findCount - individual.position[0];
+            let dirY = centerPos[1] / findCount - individual.position[1];
+            let dirZ = centerPos[2] / findCount - individual.position[2];
+            let length = individual.vectorLength(dirX, dirY, dirZ);
+
+            if (length > 0) {
+                individual.applyForce(
+                    dirX * this.parameter.strength / length,
+                    dirY * this.parameter.strength / length,
+                    dirZ * this.parameter.strength / length
+                );
+            }
+        }
+    }
+
+    public override terms: Record<string, Record<string, string>> = {
+        "$Title": {
+            "ZH_CN": "中心结群",
+            "EN_US": "Central cluster"
+        },
+        "$Intro": {
+            "ZH_CN": "个体将按照视野范围内目标方向结群对象个体的几何中心移动",
+            "EN_US": "The individual will move according to the geometric center of the grouped object individual in the target direction within the field of view"
+        },
+        "$Cluster": {
+            "ZH_CN": "中心结群对象",
+            "EN_US": "Central clustering object"
+        },
+        "$Strength": {
+            "ZH_CN": "结群强度",
+            "EN_US": "Clustering strength"
+        },
+        "$Range": {
+            "ZH_CN": "视野范围",
+            "EN_US": "Field of vision"
+        }
+    };
+}
+
+export { CentralCluster };

source/Behavior/ContactAssimilate.ts

@@ -6,6 +6,7 @@ import { Model } from "@Model/Model";
 type IContactAssimilateBehaviorParameter = {
     target: "CLG",
     assimilate: "CG",
+    self: "CG",
 	success: "number",
     range: "number"
 }
@@ -27,15 +28,13 @@ class ContactAssimilate extends Behavior<IContactAssimilateBehaviorParameter, IC
 	public override parameterOption = {
 		target: { type: "CLG", name: "$Target" },
         assimilate: { type: "CG", name: "$Assimilate" },
+        self: { type: "CG", name: "$Self" },
         range: { type: "number", name: "$Range", defaultValue: .05, numberMin: 0, numberStep: .01 },
         success: { type: "number", name: "$Success", defaultValue: 90, numberMin: 0, numberMax: 100, numberStep: 5 }
 	};
 
     public effect = (individual: Individual, group: Group, model: Model, t: number): void => {
 
-        let assimilateGroup = this.parameter.assimilate.objects;
-        if (!assimilateGroup) return;
-
         for (let i = 0; i < this.parameter.target.objects.length; i++) {
 			const targetGroup = this.parameter.target.objects[i];
 
@@ -50,7 +49,18 @@ class ContactAssimilate extends Behavior<IContactAssimilateBehaviorParameter, IC
 					
                     // 成功判定
                     if (Math.random() * 100 < this.parameter.success) {
-                        targetIndividual.transfer(assimilateGroup!);
+
+                        // 同化目标
+                        let assimilateGroup = this.parameter.assimilate.objects;
+                        if (assimilateGroup) {
+                            targetIndividual.transfer(assimilateGroup);
+                        }
+
+                        // 同化目标
+                        let selfGroup = this.parameter.self.objects;
+                        if (selfGroup) {
+                            individual.transfer(selfGroup);
+                        }
                     }
 				}
 			});
@@ -70,6 +80,10 @@ class ContactAssimilate extends Behavior<IContactAssimilateBehaviorParameter, IC
             "ZH_CN": "到哪个群...",
 			"EN_US": "To group..."
         },
+        "$Self": {
+            "ZH_CN": "自身同化到...",
+			"EN_US": "Self assimilate to..."
+        },
         "$Range": {
             "ZH_CN": "同化范围 (m)",
 			"EN_US": "Assimilate range (m)"

source/Behavior/ContactAttacking.ts

@@ -6,7 +6,8 @@ import { Model } from "@Model/Model";
 type IContactAttackingBehaviorParameter = {
     target: "CLG",
 	success: "number",
-    range: "number"
+    range: "number",
+    assimilate: "CG",
 }
 
 type IContactAttackingBehaviorEvent = {}
@@ -26,7 +27,8 @@ class ContactAttacking extends Behavior<IContactAttackingBehaviorParameter, ICon
 	public override parameterOption = {
 		target: { type: "CLG", name: "$Target" },
         range: { type: "number", name: "$Range", defaultValue: .05, numberMin: 0, numberStep: .01 },
-        success: { type: "number", name: "$Success", defaultValue: 90, numberMin: 0, numberMax: 100, numberStep: 5 }
+        success: { type: "number", name: "$Success", defaultValue: 90, numberMin: 0, numberMax: 100, numberStep: 5 },
+        assimilate: { type: "CG", name: "$Assimilate"}
 	};
 
     public effect = (individual: Individual, group: Group, model: Model, t: number): void => {
@@ -46,6 +48,10 @@ class ContactAttacking extends Behavior<IContactAttackingBehaviorParameter, ICon
                     // 成功判定
                     if (Math.random() * 100 < this.parameter.success) {
                         targetIndividual.die();
+
+                        if (this.parameter.assimilate?.objects) {
+                            individual.transfer(this.parameter.assimilate.objects);
+                        }
                     }
 				}
 			});
@@ -72,6 +78,10 @@ class ContactAttacking extends Behavior<IContactAttackingBehaviorParameter, ICon
         "$Intro": {
             "ZH_CN": "攻击进入共进范围的目标群个体",
             "EN_US": "Attack the target group and individual entering the range"
+        },
+        "$Assimilate": {
+            "ZH_CN": "同化",
+            "EN_US": "Assimilate"
         }
     };
 }

source/Behavior/DirectionCluster.ts

@@ -0,0 +1,93 @@
+import { Behavior } from "@Model/Behavior";
+import { Group } from "@Model/Group";
+import { Individual } from "@Model/Individual";
+import { Model } from "@Model/Model";
+
+type IDirectionClusterBehaviorParameter = {
+    cluster: "CLG",
+	strength: "number",
+    range: "number"
+}
+
+type IDirectionClusterBehaviorEvent = {}
+
+class DirectionCluster extends Behavior<IDirectionClusterBehaviorParameter, IDirectionClusterBehaviorEvent> {
+
+    public override behaviorId: string = "DirectionCluster";
+
+    public override behaviorName: string = "$Title";
+
+    public override iconName: string = "RawSource";
+
+    public override describe: string = "$Intro";
+
+    public override category: string = "$Interactive";
+
+    public override parameterOption = {
+        cluster: { name: "$Cluster", type: "CLG" },
+        strength: { type: "number", name: "$Strength", defaultValue: 1, numberMin: 0, numberStep: .1 },
+        range: { type: "number", name: "$Range", defaultValue: 4, numberMin: 0, numberStep: .1 }
+    };
+
+    public effect = (individual: Individual, group: Group, model: Model, t: number): void => {
+        
+        let findCount = 0;
+        let centerDir: number[] = [0, 0, 0];
+
+        for (let i = 0; i < this.parameter.cluster.objects.length; i++) {
+            const targetGroup = this.parameter.cluster.objects[i];
+
+            targetGroup.individuals.forEach((targetIndividual) => {
+
+				// 排除自己
+				if (targetIndividual === individual) return;
+				let dis = targetIndividual.distanceTo(individual);
+
+				if (dis <= this.parameter.range) {
+                    centerDir[0] += targetIndividual.velocity[0];
+                    centerDir[1] += targetIndividual.velocity[1];
+                    centerDir[2] += targetIndividual.velocity[2];
+					findCount ++;
+				}
+			});
+        }
+
+        if (findCount > 0) {
+
+            let length = individual.vectorLength(centerDir);
+
+            if (length) {
+                individual.applyForce(
+                    centerDir[0] * this.parameter.strength / length,
+                    centerDir[1] * this.parameter.strength / length,
+                    centerDir[2] * this.parameter.strength / length
+                );
+            }
+        }
+    }
+
+    public override terms: Record<string, Record<string, string>> = {
+        "$Title": {
+            "ZH_CN": "方向结群",
+            "EN_US": "Directional clustering"
+        },
+        "$Intro": {
+            "ZH_CN": "个体将按照视野范围内目标方向结群对象个体的平均移动方向移动",
+            "EN_US": "Individuals will move according to the average moving direction of the grouped object individuals in the target direction within the field of vision"
+        },
+        "$Cluster": {
+            "ZH_CN": "方向结群对象",
+            "EN_US": "Directional clustering object"
+        },
+        "$Strength": {
+            "ZH_CN": "结群强度",
+            "EN_US": "Clustering strength"
+        },
+        "$Range": {
+            "ZH_CN": "视野范围",
+            "EN_US": "Field of vision"
+        }
+    };
+}
+
+export { DirectionCluster };

source/Behavior/Manufacture.ts

@@ -0,0 +1,83 @@
+import { Behavior } from "@Model/Behavior";
+import { Group } from "@Model/Group";
+import { Individual } from "@Model/Individual";
+import { Model } from "@Model/Model";
+
+type IManufactureBehaviorParameter = {
+    maxFrequency: "number",
+	minFrequency: "number",
+	genTarget: "CG",
+}
+
+type IManufactureBehaviorEvent = {}
+
+class Manufacture extends Behavior<IManufactureBehaviorParameter, IManufactureBehaviorEvent> {
+
+    public override behaviorId: string = "Manufacture";
+
+    public override behaviorName: string = "$Title";
+
+    public override iconName: string = "ProductionFloorManagement";
+
+    public override describe: string = "$Intro";
+
+	public override category: string = "$Initiative";
+
+	public override parameterOption = {
+        genTarget: { type: "CG", name: "$Gen.Target" },
+		maxFrequency: { type: "number", name: "$Max.Frequency", defaultValue: 5, numberStep: .1, numberMin: 0 },
+		minFrequency: { type: "number", name: "$Min.Frequency", defaultValue: 0, numberStep: .1, numberMin: 0 }
+	};
+
+	public effect = (individual: Individual, group: Group, model: Model, t: number): void => {
+
+		const {genTarget, maxFrequency, minFrequency} = this.parameter;
+
+        if (genTarget.objects) {
+            
+            let nextTime = individual.getData("Manufacture.nextTime") ?? 
+            minFrequency + Math.random() * (maxFrequency - minFrequency);
+            let currentTime = individual.getData("Manufacture.currentTime") ?? 0;
+
+            if (currentTime > nextTime) {
+
+                // 生成个体
+                let newIndividual = genTarget.objects.new(1);
+                newIndividual.position = individual.position.concat([]);
+                
+                nextTime = minFrequency +  Math.random() * (maxFrequency - minFrequency);
+                currentTime = 0;
+            }
+            
+            currentTime += t;
+
+            individual.setData("Manufacture.nextTime", nextTime);
+		    individual.setData("Manufacture.currentTime", currentTime);
+        }
+	}
+
+	public override terms: Record<string, Record<string, string>> = {
+        "$Title": {
+            "ZH_CN": "生产",
+            "EN_US": "Manufacture"
+        },
+        "$Intro": {
+            "ZH_CN": "在指定的群创造新的个体",
+            "EN_US": "Create new individuals in a given group"
+        },
+        "$Gen.Target": {
+            "ZH_CN": "目标群",
+            "EN_US": "Target group"
+        },
+		"$Max.Frequency": {
+            "ZH_CN": "最大频率",
+            "EN_US": "Maximum frequency"
+        },
+		"$Min.Frequency": {
+            "ZH_CN": "最小频率",
+            "EN_US": "Minimum frequency"
+        }
+    };
+}
+
+export { Manufacture };

source/Behavior/PhysicsDynamics.ts

@@ -31,11 +31,11 @@ class PhysicsDynamics extends Behavior<IPhysicsDynamicsBehaviorParameter, IPhysi
 		limit: { name: "$Limit", type: "boolean", defaultValue: true },
 		maxAcceleration: {
 			name: "$Max.Acceleration", type: "number", defaultValue: 6.25, 
-			numberStep: .1, numberMin: 0, condition: { key: "limit", value: true }
+			numberStep: .1, numberMin: 0.0001, condition: { key: "limit", value: true }
 		},
 		maxVelocity: {
 			name: "$Max.Velocity", type: "number", defaultValue: 12.5,
-			numberStep: .1, numberMin: 0, condition: { key: "limit", value: true }
+			numberStep: .1, numberMin: 0.0001, condition: { key: "limit", value: true }
 		},
 	};
 
@@ -64,7 +64,7 @@ class PhysicsDynamics extends Behavior<IPhysicsDynamicsBehaviorParameter, IPhysi
 		// 加速度约束
 		if (this.parameter.limit) {
 			const lengthA = individual.vectorLength(individual.acceleration);
-			if (lengthA > this.parameter.maxAcceleration) {
+			if (lengthA > this.parameter.maxAcceleration && lengthA) {
 				individual.acceleration[0] = individual.acceleration[0] * this.parameter.maxAcceleration / lengthA;
 				individual.acceleration[1] = individual.acceleration[1] * this.parameter.maxAcceleration / lengthA;
 				individual.acceleration[2] = individual.acceleration[2] * this.parameter.maxAcceleration / lengthA;
@@ -79,7 +79,7 @@ class PhysicsDynamics extends Behavior<IPhysicsDynamicsBehaviorParameter, IPhysi
 		// 速度约束
 		if (this.parameter.limit) {
 			const lengthV = individual.vectorLength(individual.velocity);
-			if (lengthV > this.parameter.maxVelocity) {
+			if (lengthV > this.parameter.maxVelocity && lengthV) {
 				individual.velocity[0] = individual.velocity[0] * this.parameter.maxVelocity / lengthV;
 				individual.velocity[1] = individual.velocity[1] * this.parameter.maxVelocity / lengthV;
 				individual.velocity[2] = individual.velocity[2] * this.parameter.maxVelocity / lengthV;

source/Behavior/SampleTracking.ts

@@ -0,0 +1,160 @@
+import { Behavior } from "@Model/Behavior";
+import { Group } from "@Model/Group";
+import { Individual } from "@Model/Individual";
+import { Model } from "@Model/Model";
+
+type ISampleTrackingBehaviorParameter = {
+    target: "CLG",
+    key: "string",
+	strength: "number",
+    range: "number",
+    angle: "number",
+    accuracy: "number"
+}
+
+type ISampleTrackingBehaviorEvent = {}
+
+class SampleTracking extends Behavior<ISampleTrackingBehaviorParameter, ISampleTrackingBehaviorEvent> {
+
+    public override behaviorId: string = "SampleTracking";
+
+    public override behaviorName: string = "$Title";
+
+    public override iconName: string = "Video360Generic";
+
+    public override describe: string = "$Intro";
+
+    public override category: string = "$Initiative";
+
+	public override parameterOption = {
+		target: { type: "CLG", name: "$Target" },
+        key: { type: "string", name: "$Key"},
+        range: { type: "number", name: "$Range", defaultValue: 4, numberMin: 0, numberStep: .1 },
+        angle: { type: "number", name: "$Angle", defaultValue: 180, numberMin: 0, numberMax: 360, numberStep: 5 },
+		strength: { type: "number", name: "$Strength", defaultValue: 1, numberMin: 0, numberStep: .1 },
+        accuracy: { type: "number", name: "$Accuracy", defaultValue: 5, numberMin: 0, numberMax: 180, numberStep: 1 }
+	};
+
+    private angle2Vector(v1: number[], v2: number[]): number {
+		return Math.acos(
+			(v1[0] * v2[0] + v1[1] * v2[1] + v1[2] * v2[2]) /
+			(
+				(v1[0] ** 2 + v1[1] ** 2 + v1[2] ** 2) ** 0.5 *
+				(v2[0] ** 2 + v2[1] ** 2 + v2[2] ** 2) ** 0.5
+			)
+		) * 180 / Math.PI;
+	}
+
+    public effect = (individual: Individual, group: Group, model: Model, t: number): void => {
+
+        const dirArr: number[][] = []; const valArr: number[] = [];
+
+        for (let i = 0; i < this.parameter.target.objects.length; i++) {
+            const targetGroup = this.parameter.target.objects[i];
+
+			targetGroup.individuals.forEach((targetIndividual) => {
+
+                // 计算距离
+                let dis = targetIndividual.distanceTo(individual);
+                if (dis > this.parameter.range) return;
+
+                // 计算方向
+                let targetDir = [
+                    targetIndividual.position[0] - individual.position[0],
+                    targetIndividual.position[1] - individual.position[1],
+                    targetIndividual.position[2] - individual.position[2]
+                ];
+
+                // 计算视线角度
+                let angle = this.angle2Vector(individual.velocity, targetDir);
+
+                // 在可视角度内
+                if (angle < (this.parameter.angle ?? 360) / 2) {
+
+                    // 采样
+                    let isFindNest = false;
+                    for (let i = 0; i < valArr.length; i++) {
+
+                        // 计算采样角度
+                        let sampleAngle = this.angle2Vector(dirArr[i], targetDir);
+
+                        // 小于采样精度，合并
+                        if (sampleAngle < this.parameter.accuracy ?? 5) {
+                            dirArr[i][0] += targetDir[0];
+                            dirArr[i][1] += targetDir[1];
+                            dirArr[i][2] += targetDir[2];
+                            valArr[i] += targetIndividual.getData(this.parameter.key) ?? 0;
+                            isFindNest = true;
+                        }
+                    }
+
+                    if (!isFindNest) {
+
+                        // 保存
+                        dirArr.push(targetDir);
+                        valArr.push(targetIndividual.getData(this.parameter.key) ?? 0);
+                    }
+                }
+            });
+        }
+
+        // 计算最大方向
+        let maxVal = -1; let maxDir: number[] | undefined;
+        for (let i = 0; i < valArr.length; i++) {
+            if (valArr[i] > maxVal) {
+                maxVal = valArr[i];
+                maxDir = dirArr[i];
+            }
+        }
+
+        if (maxDir) {
+            const dir = individual.vectorNormalize(maxDir);
+            individual.applyForce(
+                dir[0] * this.parameter.strength,
+                dir[1] * this.parameter.strength,
+                dir[2] * this.parameter.strength
+            );
+        }
+    }
+
+	public override terms: Record<string, Record<string, string>> = {
+        "$Title": {
+            "ZH_CN": "采样追踪",
+            "EN_US": "Sample tracking"
+        },
+		"$Target": {
+			"ZH_CN": "追踪目标",
+			"EN_US": "Tracking target"
+		},
+        "$Key": {
+            "ZH_CN": "计算键值",
+			"EN_US": "Calculate key value"
+        },
+        "$Accuracy": {
+            "ZH_CN": "采样精度",
+			"EN_US": "Sampling accuracy"
+        },
+        "$Range": {
+            "ZH_CN": "追踪范围 (m)",
+			"EN_US": "Tracking range (m)"
+        },
+		"$Strength": {
+			"ZH_CN": "追踪强度系数",
+			"EN_US": "Tracking intensity coefficient"
+		},
+        "$Intro": {
+            "ZH_CN": "个体将主动向目标个体较多的方向发起追踪",
+            "EN_US": "Individuals will actively initiate tracking in the direction of more target individuals"
+        },
+		"$Interactive": {
+			"ZH_CN": "交互",
+            "EN_US": "Interactive"
+		},
+        "$Angle": {
+            "ZH_CN": "可视角度",
+            "EN_US": "Viewing angle"
+        }
+    };
+}
+
+export { SampleTracking };

source/Behavior/Tracking.ts

@@ -7,6 +7,7 @@ type ITrackingBehaviorParameter = {
     target: "CLG",
 	strength: "number",
     range: "number",
+    angle: "number",
     lock: "boolean"
 }
 
@@ -28,12 +29,23 @@ class Tracking extends Behavior<ITrackingBehaviorParameter, ITrackingBehaviorEve
 		target: { type: "CLG", name: "$Target" },
         lock: { type: "boolean", name: "$Lock", defaultValue: false },
         range: { type: "number", name: "$Range", defaultValue: 4, numberMin: 0, numberStep: .1 },
+        angle: { type: "number", name: "$Angle", defaultValue: 180, numberMin: 0, numberMax: 360, numberStep: 5 },
 		strength: { type: "number", name: "$Strength", defaultValue: 1, numberMin: 0, numberStep: .1 }
 	};
 
     private target: Individual | undefined = undefined;
     private currentDistant: number = Infinity;
 
+    private angle2Vector(v1: number[], v2: number[]): number {
+		return Math.acos(
+			(v1[0] * v2[0] + v1[1] * v2[1] + v1[2] * v2[2]) /
+			(
+				(v1[0] ** 2 + v1[1] ** 2 + v1[2] ** 2) ** 0.5 *
+				(v2[0] ** 2 + v2[1] ** 2 + v2[2] ** 2) ** 0.5
+			)
+		) * 180 / Math.PI;
+	}
+
     private searchTarget(individual: Individual) {
 
 		for (let i = 0; i < this.parameter.target.objects.length; i++) {
@@ -46,8 +58,21 @@ class Tracking extends Behavior<ITrackingBehaviorParameter, ITrackingBehaviorEve
 				let dis = targetIndividual.distanceTo(individual);
 
 				if (dis < this.currentDistant && dis <= this.parameter.range) {
+
+                    // 计算目标方位
+                    const targetDir = [
+                        targetIndividual.position[0] - individual.position[0],
+                        targetIndividual.position[1] - individual.position[1],
+                        targetIndividual.position[2] - individual.position[2]
+                    ];
+
+                    // 计算角度
+                    const angle = this.angle2Vector(individual.velocity, targetDir);
+
+                    if (angle < (this.parameter.angle ?? 360) / 2) {
                         this.target = targetIndividual;
 					    this.currentDistant = dis;
+                    }
 				}
 
 			});
@@ -150,6 +175,10 @@ class Tracking extends Behavior<ITrackingBehaviorParameter, ITrackingBehaviorEve
 		"$Interactive": {
 			"ZH_CN": "交互",
             "EN_US": "Interactive"
+		},
+        "$Angle": {
+            "ZH_CN": "可视角度",
+            "EN_US": "Viewing angle"
         }
     };
 }

source/Behavior/Wastage.ts

@@ -0,0 +1,100 @@
+import { Behavior } from "@Model/Behavior";
+import { Group } from "@Model/Group";
+import { Individual } from "@Model/Individual";
+import { Model } from "@Model/Model";
+
+type IWastageBehaviorParameter = {
+    key: "string",
+    value: "number",
+    speed: "number",
+    threshold: "number",
+    kill: "boolean",
+    assimilate: "CG"
+}
+
+type IWastageBehaviorEvent = {}
+
+class Wastage extends Behavior<IWastageBehaviorParameter, IWastageBehaviorEvent> {
+
+    public override behaviorId: string = "Wastage";
+
+    public override behaviorName: string = "$Title";
+
+    public override iconName: string = "BackgroundColor";
+
+    public override describe: string = "$Intro";
+
+    public override category: string = "$Initiative";
+
+    public override parameterOption = {
+        key: { type: "string", name: "$Key" },
+        value: { type: "number", name: "$Value", defaultValue: 100, numberStep: 1 },
+        speed: { type: "number", name: "$Speed", defaultValue: 1, numberStep: .1 },
+        threshold: { type: "number", name: "$Threshold", defaultValue: 0, numberStep: 1 },
+        kill: { type: "boolean", name: "$Kill", defaultValue: true },
+        assimilate: { type: "CG", name: "$Assimilate", condition: { key: "kill", value: false } }
+    };
+
+    public effect = (individual: Individual, group: Group, model: Model, t: number): void => {
+        const key = this.parameter.key;
+        if (!key) return;
+        
+        let currentValue = individual.getData(`Wastage.${key}`) ?? this.parameter.value;
+        currentValue -= this.parameter.speed * t;
+
+        // 超过阈值
+        if (currentValue < this.parameter.threshold) {
+
+            currentValue = undefined;
+
+            // 杀死个体
+            if (this.parameter.kill) {
+                individual.die();
+            }
+
+            // 开启同化
+            else if (this.parameter.assimilate.objects) {
+                individual.transfer(this.parameter.assimilate.objects);
+            }
+        }
+
+        individual.setData(`Wastage.${key}`, currentValue);
+    }
+
+    public override terms: Record<string, Record<string, string>> = {
+        "$Title": {
+            "ZH_CN": "流逝",
+            "EN_US": "Wastage"
+        },
+        "$Intro": {
+            "ZH_CN": "随着时间流逝",
+            "EN_US": "As time goes by"
+        },
+        "$Key": {
+            "ZH_CN": "元数据",
+            "EN_US": "Metadata"
+        },
+        "$Value": {
+            "ZH_CN": "默认数值",
+            "EN_US": "Default value"
+        },
+        "$Speed": {
+            "ZH_CN": "流逝速度 (c/s)",
+            "EN_US": "Passing speed (c/s)"
+        },
+        "$Threshold": {
+            "ZH_CN": "阈值",
+            "EN_US": "Threshold"
+        },
+        "$Kill": {
+            "ZH_CN": "死亡",
+            "EN_US": "Death"
+        },
+        "$Assimilate": {
+            "ZH_CN": "同化",
+            "EN_US": "Assimilate"
+        }
+    };
+}
+
+export { Wastage };

source/Component/CommandBar/CommandBar.tsx

@@ -188,11 +188,6 @@ class CommandBar extends Component<IMixinSettingProps & IMixinStatusProps, IComm
                         this.props.status ? this.props.status.newLabel() : undefined;
                     }}
                 />
-
-                <CommandButton
-                    iconName="Camera"
-                    i18NKey="Command.Bar.Camera.Info"
-                />
             </div>
             <div>
                 <CommandButton

source/Component/SettingPopup/SettingPopup.scss

@@ -3,4 +3,6 @@
 div.setting-popup {
 	width: 100%;
 	height: 100%;
+	box-sizing: border-box;
+	padding: 10px;
 }

source/Component/SettingPopup/SettingPopup.tsx

@@ -2,8 +2,11 @@ import { Component, ReactNode } from "react";
 import { Popup } from "@Context/Popups";
 import { Theme } from "@Component/Theme/Theme";
 import { Localization } from "@Component/Localization/Localization";
+import { useSettingWithEvent, IMixinSettingProps, Themes } from "@Context/Setting";
+import { ComboInput } from "@Input/ComboInput/ComboInput";
 import "./SettingPopup.scss";
 
+
 interface ISettingPopupProps {
 
 }
@@ -24,10 +27,42 @@ class SettingPopup extends Popup<ISettingPopupProps> {
 	}
 }
 
-class SettingPopupComponent extends Component<ISettingPopupProps> {
+@useSettingWithEvent("themes", "language")
+class SettingPopupComponent extends Component<ISettingPopupProps & IMixinSettingProps> {
 
 	public render(): ReactNode {
-		return <Theme className="setting-popup"></Theme>
+		return <Theme className="setting-popup">
+
+			<ComboInput
+				keyI18n="Language"
+				allOption={[
+					{ key: "EN_US", i18n: "EN_US" },
+					{ key: "ZH_CN", i18n: "ZH_CN" }
+				]}
+				value={{
+					key: this.props.setting?.language ?? "EN_US",
+					i18n: this.props.setting?.language ?? "EN_US"
+				}}
+				valueChange={(data) => {
+					this.props.setting?.setProps("language", data.key as any);
+				}}
+			/>
+
+			<ComboInput
+				keyI18n="Themes"
+				allOption={[
+					{ key: Themes.dark as any, i18n: "Themes.Dark" },
+					{ key: Themes.light as any, i18n: "Themes.Light" }
+				]}
+				value={{
+					key: this.props.setting?.themes ?? Themes.dark as any,
+					i18n: this.props.setting?.themes === Themes.dark ? "Themes.Dark" : "Themes.Light"
+				}}
+				valueChange={(data) => {
+					this.props.setting?.setProps("themes", parseInt(data.key));
+				}}
+			/>
+		</Theme>
 	}
 }
 

source/Context/Setting.tsx

@@ -44,6 +44,11 @@ class Setting extends Emitter<ISettingEvents> {
      */
     public layout: Layout = new Layout();
 
+    /**
+     * 是否显示线性图表
+     */
+    public lineChartType: boolean = false;
+
     /**
      * 设置参数
      */

source/Context/Status.tsx

@@ -38,6 +38,7 @@ interface IStatusEvent {
     physicsLoop: number;
     recordLoop: number;
     offlineLoop: number;
+    modelUpdate: void;
     mouseModChange: void;
     focusObjectChange: void;
     focusLabelChange: void;
@@ -53,6 +54,7 @@ interface IStatusEvent {
     labelAttrChange: void;
     groupAttrChange: void;
     behaviorAttrChange: void;
+    clipAttrChange: void;
     individualChange: void;
     behaviorChange: void;
     popupChange: void;
@@ -131,6 +133,7 @@ class Status extends Emitter<IStatusEvent> {
         this.actuator.on("loop", (t) => { this.emit("physicsLoop", t) });
         this.actuator.on("record", (t) => { this.emit("recordLoop", t) });
         this.actuator.on("offline", (t) => { this.emit("offlineLoop", t) });
+        this.actuator.on("modelUpdate", () => { this.emit("modelUpdate") });
 
         // 对象变化事件
         this.model.on("objectChange", () => this.emit("objectChange"));
@@ -173,11 +176,13 @@ class Status extends Emitter<IStatusEvent> {
             this.emit("objectChange");
             this.emit("labelChange");
             this.emit("behaviorChange");
+            this.emit("clipChange");
 
             // 清除焦点对象
             this.setBehaviorObject();
             this.setFocusObject(new Set());
             this.setLabelObject();
+            this.setClipObject();
 
             // 映射
             this.emit("fileLoad");
@@ -195,11 +200,13 @@ class Status extends Emitter<IStatusEvent> {
         this.on("objectChange", handelFileChange);
         this.on("behaviorChange", handelFileChange);
         this.on("labelChange", handelFileChange);
+        this.on("clipChange", handelFileChange);
         this.on("individualChange", handelFileChange);
         this.on("groupAttrChange", handelFileChange);
         this.on("rangeAttrChange", handelFileChange);
         this.on("labelAttrChange", handelFileChange);
         this.on("behaviorAttrChange", handelFileChange);
+        this.on("clipAttrChange", handelFileChange);
         this.on("fileChange", () => this.archive.emit("fileChange"));
     }
 
@@ -286,6 +293,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) {

source/Localization/EN-US.ts

@@ -1,6 +1,10 @@
 const EN_US = {
+    "Language": "Language",
     "EN_US": "English (US)",
     "ZH_CN": "Chinese (Simplified)",
+    "Themes": "Themes",
+    "Themes.Dark": "Dark",
+    "Themes.Light": "Light",
     "Header.Bar.Title": "Living Together | Emulator",
     "Header.Bar.Title.Info": "Group Behavior Research Emulator",
     "Header.Bar.File.Name.Info": "{file} ({status})",
@@ -56,6 +60,10 @@ 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.Statistics": "View statistics",
+    "Panel.Title.Statistics": "Statistics",
     "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 +169,8 @@ 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",
+    "Panel.Info.Statistics.Nodata": "There are no groups in the model or clip",
     "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",

source/Localization/ZH-CN.ts

@@ -1,6 +1,10 @@
 const ZH_CN = {
+    "Language": "语言",
     "EN_US": "英语 (美国)",
     "ZH_CN": "中文 (简体)",
+    "Themes": "主题",
+    "Themes.Dark": "黑暗",
+    "Themes.Light": "亮色",
     "Header.Bar.Title": "群生共进 | 仿真器",
     "Header.Bar.Title.Info": "群体行为研究仿真器",
     "Header.Bar.File.Name.Info": "{file} ({status})",
@@ -22,10 +26,10 @@ const ZH_CN = {
     "Command.Bar.Camera.Info": "渲染器设置",
     "Command.Bar.Setting.Info": "全局设置",
     "Input.Error.Not.Number": "请输入数字",
-    "Input.Error.Max": "输入数值须小于 {number}",
+    "Input.Error.Max": "输入数值须小于 {num}",
-    "Input.Error.Min": "输入数值须大于 {number}",
+    "Input.Error.Min": "输入数值须大于 {num}",
-    "Input.Error.Length": "输入内容长度须小于 {number}",
+    "Input.Error.Length": "输入内容长度须小于 {num}",
-    "Input.Error.Length.Less": "输入内容长度须大于 {number}",
+    "Input.Error.Length.Less": "输入内容长度须大于 {num}",
     "Input.Error.Select": "选择对象 ...",
     "Input.Error.Combo": "选择选项 ...",
     "Object.List.New.Group": "群对象 {id}",
@@ -56,6 +60,10 @@ 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.Statistics": "查看统计信息",
+    "Panel.Title.Statistics": "统计",
     "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 +169,8 @@ 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": "请指定一个剪辑片段以查看属性",
+    "Panel.Info.Statistics.Nodata": "模型或剪辑中不存在任何群",
     "Info.Hint.Save.After.Close": "任何未保存的进度都会丢失, 确定要继续吗?",
     "Info.Hint.Load.File.Title": "加载存档",
     "Info.Hint.Load.File.Intro": "释放以加载拽入的存档",

source/Model/Actuator.ts

@@ -14,6 +14,7 @@ interface IActuatorEvent {
 	record: number;
 	loop: number;
 	offline: number;
+	modelUpdate: void;
 }
 
 /**
@@ -401,6 +402,7 @@ class Actuator extends Emitter<IActuatorEvent> {
 						}
 
 						this.emit("loop", this.alignTimer);
+						this.emit("modelUpdate");
 						this.alignTimer = 0;
 					}
 				}

source/Model/Archive.ts

@@ -8,6 +8,7 @@ import { IArchiveIndividual, Individual } from "@Model/Individual";
 import { Behavior, IArchiveBehavior } from "@Model/Behavior";
 import { getBehaviorById } from "@Behavior/Behavior";
 import { IArchiveParseFn, IObjectParamArchiveType, IRealObjectType } from "@Model/Parameter";
+import { Clip, IArchiveClip } from "@Model/Clip";
 
 interface IArchiveEvent {
     fileSave: Archive;
@@ -20,6 +21,7 @@ interface IArchiveObject {
     objectPool: IArchiveCtrlObject[];
     labelPool: IArchiveLabel[];
     behaviorPool: IArchiveBehavior[];
+    clipPool: IArchiveClip[];
 }
 
 class Archive extends Emitter<IArchiveEvent> {
@@ -51,7 +53,7 @@ class Archive extends Emitter<IArchiveEvent> {
 
         // 存贮 CtrlObject
         const objectPool: IArchiveCtrlObject[] = [];
-        model.objectPool.forEach(obj => {
+        model.objectPool?.forEach(obj => {
             let archiveObject = obj.toArchive();
 
             // 处理每个群的个体
@@ -60,7 +62,7 @@ class Archive extends Emitter<IArchiveEvent> {
                 const group: Group = obj as Group;
 
                 const individuals: IArchiveIndividual[] = [];
-                group.individuals.forEach((item) => {
+                group.individuals?.forEach((item) => {
                     individuals.push(item.toArchive());
                 });
 
@@ -72,22 +74,29 @@ class Archive extends Emitter<IArchiveEvent> {
 
         // 存储 Label
         const labelPool: IArchiveLabel[] = [];
-        model.labelPool.forEach(obj => {
+        model.labelPool?.forEach(obj => {
             labelPool.push(obj.toArchive());
         });
 
         // 存储全部行为
         const behaviorPool: IArchiveBehavior[] = [];
-        model.behaviorPool.forEach(obj => {
+        model.behaviorPool?.forEach(obj => {
             behaviorPool.push(obj.toArchive());
         });
 
+        // 存储全部剪辑片段
+        const clipPool: IArchiveClip[] = [];
+        model.clipPool?.forEach(obj => {
+            clipPool.push(obj.toArchive());
+        });
+
         // 生成存档对象
         const fileData: IArchiveObject = {
             nextIndividualId: model.nextIndividualId,
             objectPool: objectPool,
             labelPool: labelPool,
-            behaviorPool: behaviorPool
+            behaviorPool: behaviorPool,
+            clipPool: clipPool
         };
 
         return JSON.stringify(fileData);
@@ -105,7 +114,7 @@ class Archive extends Emitter<IArchiveEvent> {
         // 实例化全部对象
         const objectPool: CtrlObject[] = [];
         const individualPool: Individual[] = [];
-        archive.objectPool.forEach((obj) => {
+        archive.objectPool?.forEach((obj) => {
 
             let ctrlObject: CtrlObject | undefined = undefined;
             
@@ -116,7 +125,7 @@ class Archive extends Emitter<IArchiveEvent> {
 
                 // 实例化全部个体
                 const individuals: Array<Individual> = [];
-                archiveGroup.individuals.forEach((item) => {
+                archiveGroup.individuals?.forEach((item) => {
                     const newIndividual = new Individual(newGroup);
                     newIndividual.id = item.id;
                     individuals.push(newIndividual);
@@ -140,7 +149,7 @@ class Archive extends Emitter<IArchiveEvent> {
 
         // 实例化全部标签
         const labelPool: Label[] = [];
-        archive.labelPool.forEach((item) => {
+        archive.labelPool?.forEach((item) => {
             const newLabel = new Label(model);
             newLabel.id = item.id;
             labelPool.push(newLabel);
@@ -148,13 +157,21 @@ class Archive extends Emitter<IArchiveEvent> {
 
         // 实例化全部行为
         const behaviorPool: Behavior[] = [];
-        archive.behaviorPool.forEach((item) => {
+        archive.behaviorPool?.forEach((item) => {
             const recorder = getBehaviorById(item.behaviorId);
             const newBehavior = recorder.new();
             newBehavior.id = item.id;
             behaviorPool.push(newBehavior);
         });
 
+        // 实例化全部剪辑
+        const clipPool: Clip[] = [];
+        archive.clipPool?.forEach((item) => {
+            const newClip = new Clip(model);
+            newClip.id = item.id;
+            clipPool.push(newClip);
+        });
+
         // 内置标签集合
         const buildInLabel = [model.allGroupLabel, model.allRangeLabel, model.currentGroupLabel]
 
@@ -238,6 +255,12 @@ class Archive extends Emitter<IArchiveEvent> {
             item.fromArchive(archive.behaviorPool[index], parseFunction);
             return item;
         });
+
+        // 加载剪辑
+        model.clipPool = clipPool.map((item, index) => {
+            item.fromArchive(archive.clipPool[index], parseFunction);
+            return item;
+        });
     }
 
     /**
@@ -278,4 +301,4 @@ class Archive extends Emitter<IArchiveEvent> {
     }
 }
 
-export { Archive };
+export { Archive, IArchiveObject };

source/Model/Clip.ts

@@ -2,11 +2,14 @@ import { IAnyObject, Model } from "@Model/Model";
 import { v4 as uuid } from "uuid";
 import { Group } from "@Model/Group";
 import { Range } from "@Model/Range";
+import { archiveObject2Parameter, IArchiveParseFn, parameter2ArchiveObject } from "@Model/Parameter";
 
 interface IDrawCommand {
 	type: "points" | "cube";
 	id: string;
+	name?: string;
 	data?: Float32Array;
+	mapId?: number[];
 	position?: number[];
 	radius?: number[];
 	parameter?: IAnyObject;
@@ -18,6 +21,13 @@ interface IFrame {
 	process: number;
 }
 
+interface IArchiveClip {
+	id: string;
+	time: number;
+	name: string;
+	frames: IFrame[];
+}
+
 /**
  * 剪辑片段
  */
@@ -50,6 +60,147 @@ class Clip {
 	 */
 	public isRecording: boolean = false;
 
+	/**
+	 * 判断两个 RenderParameter 是否相同
+	 */
+	public isRenderParameterEqual(p1?: IAnyObject, p2?: IAnyObject, r: boolean = true): boolean {
+
+		if ((p1 && !p2) || (!p1 && p2)) {
+			return false;
+		}
+
+		if (!p1 && !p2) {
+			return true;
+		}
+
+		for (let key in p1!) {
+
+			// 对象递归校验
+			if (typeof p1[key] === "object" && !Array.isArray(p1[key])) {
+
+				if (!(typeof (p2 as any)[key] === "object" && !Array.isArray((p2 as any)[key]))) {
+					return false;
+				}
+
+				// 递归校验
+				if (r) {
+					if (!this.isRenderParameterEqual(p1[key], (p2 as any)[key], false)) {
+						return false;
+					}
+				}
+				
+				// 浅校验
+				else {
+					if (p1[key] !== (p2 as any)[key]) {
+						return false;
+					}
+				}
+			}
+
+			// 数组遍历校验
+			else if (Array.isArray(p1[key])) {
+
+				if (!Array.isArray((p2 as any)[key])) {
+					return false;
+				}
+
+				for (let j = 0; j < p1[key].length; j++) {
+					if (p1[key][j] !== (p2 as any)[key][j]) {
+						return false;
+					}
+				}
+			}
+
+			// 数值直接校验
+			else if (p1[key] !== (p2 as any)[key]) {
+				return false;
+			}
+		}
+
+		return true;
+	}
+
+	public cloneRenderParameter(p?: IAnyObject, res: IAnyObject = {}, r: boolean = true): IAnyObject | undefined {
+
+		if (!p) return undefined;
+
+		for (let key in p) {
+
+			// 对象递归克隆
+			if (typeof p[key] === "object" && !Array.isArray(p[key]) && r) {
+				this.cloneRenderParameter(p[key], res, false);
+			}
+
+			// 数组克隆
+			else if (Array.isArray(p[key])) {
+				(res as any)[key] = p[key].concat([]);
+			}
+
+			// 数值克隆
+			else {
+				(res as any)[key] = p[key];
+			}
+		}
+
+		return res;
+	}
+
+	public isArrayEqual(a1?: Array<number | string>, a2?: Array<number | string>): boolean {
+
+		if ((a1 && !a2) || (!a1 && a2)) {
+			return false;
+		}
+
+		if (!a1 && !a2) {
+			return true;
+		}
+
+		for (let i = 0; i < a1!.length; i++) {
+			if (a1![i] !== a2![i]) {
+				return false;
+			}
+		}
+
+		return true;
+	}
+
+	/**
+	 * 从上一帧获取指令数据
+	 */
+	public getCommandFromLastFrame(type: IDrawCommand["type"], id: string, frame?: IFrame): IDrawCommand | undefined {
+		let lastCommand: IDrawCommand[] = (frame ?? this.frames[this.frames.length - 1])?.commands;
+
+		if (lastCommand) {
+			for (let i = 0; i < lastCommand.length; i++) {
+				if (type === lastCommand[i].type && id === lastCommand[i].id) {
+					return lastCommand[i];
+				}
+			}
+		}
+
+		return undefined;
+	}
+
+	/**
+	 * ID 映射
+	 */
+	private sorterIdMapper: Map<string, number> = new Map();
+	private sorterIdMapperNextId: number = 1;
+
+	/**
+	 * 获取映射ID
+	 */
+	private getMapperId = (id: string): number => {
+		let mapperId = this.sorterIdMapper.get(id);
+		if (mapperId === undefined) {
+			mapperId = this.sorterIdMapperNextId ++;
+			this.sorterIdMapper.set(id, mapperId);
+			return mapperId;
+		} else {
+			return mapperId;
+		}
+	}
+
 	/**
 	 * 录制一帧
 	 */
@@ -62,23 +213,68 @@ class Clip {
             object.renderParameter.color = object.color;
 
             if (object.display && object instanceof Group) {
-				commands.push({
+
+				// 获取上一帧指令
+				const lastCommand = this.getCommandFromLastFrame("points", object.id);
+
+				// 记录
+				const dataBuffer = object.exportPositionId(this.getMapperId);
+				const recodeData: IDrawCommand = {
 					type: "points",
 					id: object.id,
-					data: object.exportPositionData(),
+					name: object.displayName,
-					parameter: object.renderParameter
+					data: dataBuffer[0]
-				});
+				}
+
+				// 对比校验
+				if (this.isRenderParameterEqual(object.renderParameter, lastCommand?.parameter)) {
+					recodeData.parameter = lastCommand?.parameter;
+				} else {
+					recodeData.parameter = this.cloneRenderParameter(object.renderParameter);
+				}
+
+				if (this.isArrayEqual(dataBuffer[1], lastCommand?.mapId)) {
+					recodeData.mapId = lastCommand?.mapId;
+				} else {
+					recodeData.mapId = dataBuffer[1];
+				}
+
+				commands.push(recodeData);
             }
 
 
             if (object.display && object instanceof Range) {
-				commands.push({
+
+				// 获取上一帧指令
+				const lastCommand = this.getCommandFromLastFrame("cube", object.id);
+
+				// 记录
+				const recodeData: IDrawCommand = {
 					type: "cube",
 					id: object.id,
-					position: object.position,
+					name: object.displayName
-					radius: object.radius,
+				}
-					parameter: object.renderParameter
+
-				});
+				// 释放上一帧的内存
+				if (this.isArrayEqual(object.position, lastCommand?.position)) {
+					recodeData.position = lastCommand?.position;
+				} else {
+					recodeData.position = object.position.concat([]);
+				}
+
+				if (this.isArrayEqual(object.radius, lastCommand?.radius)) {
+					recodeData.radius = lastCommand?.radius;
+				} else {
+					recodeData.radius = object.radius.concat([]);
+				}
+
+				if (this.isRenderParameterEqual(object.renderParameter, lastCommand?.parameter)) {
+					recodeData.parameter = lastCommand?.parameter;
+				} else {
+					recodeData.parameter = this.cloneRenderParameter(object.renderParameter);
+				}
+
+				commands.push(recodeData);
             }
         }
 
@@ -95,6 +291,120 @@ class Clip {
 		return frame;
 	}
 
+	public readonly LastFrameData: "@" = "@";
+
+	/**
+	 * 压缩帧数据
+	 */
+	public compressed(): IFrame[] {
+		const resFrame: IFrame[] = [];
+
+		for (let i = 0; i < this.frames.length; i++) {
+			const commands = this.frames[i].commands;
+			const res: IDrawCommand[] = [];
+
+			// 处理指令
+			for (let j = 0; j < commands.length; j++) {
+				
+				// 压缩指令
+				const command: IDrawCommand = {
+					id: commands[j].id,
+					type: commands[j].type
+				};
+
+				// 搜索上一帧相同指令
+				const lastCommand = this.frames[i - 1] ?
+					this.getCommandFromLastFrame(command.type, command.id, this.frames[i - 1]) :
+					undefined;
+
+				// 记录
+				command.name = (lastCommand?.name === commands[j].name) ?
+					this.LastFrameData as any : commands[j].name;
+
+				command.data = (lastCommand?.data === commands[j].data) ?
+					this.LastFrameData as any : Array.from(commands[j].data ?? []);
+
+				command.mapId = (lastCommand?.mapId === commands[j].mapId) ?
+					this.LastFrameData as any : commands[j].mapId;
+
+				command.position = (lastCommand?.position === commands[j].position) ?
+					this.LastFrameData as any : commands[j].position?.concat([]);
+
+				command.radius = (lastCommand?.radius === commands[j].radius) ?
+					this.LastFrameData as any : commands[j].radius?.concat([]);
+
+				command.parameter = (lastCommand?.parameter === commands[j].parameter) ?
+					this.LastFrameData as any : parameter2ArchiveObject(commands[j].parameter as any);
+
+				res.push(command);
+			}
+
+			resFrame.push({
+				duration: this.frames[i].duration,
+				process: this.frames[i].process,
+				commands: res
+			})
+		}
+
+		return resFrame;
+	};
+
+	/**
+	 * 加载压缩帧数据
+	 */
+	public uncompressed(frames: IFrame[], paster: IArchiveParseFn): IFrame[] {
+		const resFrame: IFrame[] = [];
+
+		for (let i = 0; i < frames.length; i++) {
+			const commands = frames[i].commands;
+			const res: IDrawCommand[] = [];
+
+			// 处理指令
+			for (let j = 0; j < commands.length; j++) {
+				
+				// 压缩指令
+				const command: IDrawCommand = {
+					id: commands[j].id,
+					type: commands[j].type
+				};
+
+				// 搜索上一帧相同指令
+				const lastCommand = resFrame[resFrame.length - 1] ?
+					this.getCommandFromLastFrame(command.type, command.id, resFrame[resFrame.length - 1]) :
+					undefined;
+
+				// 记录
+				command.name = (this.LastFrameData as any === commands[j].name) ?
+					lastCommand?.name : commands[j].name;
+				
+				command.data = (this.LastFrameData as any === commands[j].data) ?
+					lastCommand?.data : new Float32Array(commands[j].data ?? []);
+
+				command.mapId = (this.LastFrameData as any === commands[j].mapId) ?
+					lastCommand?.mapId : commands[j].mapId;
+
+				command.position = (this.LastFrameData as any === commands[j].position) ?
+					lastCommand?.position : commands[j].position;
+
+				command.radius = (this.LastFrameData as any === commands[j].radius) ?
+					lastCommand?.radius : commands[j].radius;
+
+				command.parameter = (this.LastFrameData as any === commands[j].parameter) ?
+					lastCommand?.parameter : archiveObject2Parameter(commands[j].parameter as any, paster);
+
+				res.push(command);
+			}
+
+			resFrame.push({
+				duration: frames[i].duration,
+				process: frames[i].process,
+				commands: res
+			})
+		}
+
+		return resFrame;
+	}
+
 	/**
 	 * 播放一帧
 	 */
@@ -125,6 +435,22 @@ class Clip {
 		this.model = model;
 		this.id = uuid();
 	}
+
+	public toArchive(): IArchiveClip {
+        return {
+            id: this.id,
+			time: this.time,
+			name: this.name,
+			frames: this.compressed()
+        };
+    }
+
+    public fromArchive(archive: IArchiveClip, paster: IArchiveParseFn): void {
+        this.id = archive.id,
+		this.time = archive.time,
+		this.name = archive.name,
+		this.frames = this.uncompressed(archive.frames, paster);
+    }
 }
 
-export { Clip, IFrame };
+export { Clip, IFrame, IArchiveClip };

source/Model/Group.ts

@@ -428,6 +428,22 @@ class Group extends CtrlObject<IArchiveGroup> {
         return dataBuffer;
     }
 
+    /**
+     * 导出个体id列表
+     */
+    public exportPositionId(idMapper: (id: string) => number ): [Float32Array, number[]] {
+        let bi = 0; let ii = 0;
+        let dataBuffer = new Float32Array(this.individuals.size * 3);
+        let idBUffer: number[] = new Array(this.individuals.size).fill("");
+        this.individuals.forEach((individual) => {
+            idBUffer[ii ++] = idMapper(individual.id);
+            dataBuffer[bi ++] = individual.position[0];
+            dataBuffer[bi ++] = individual.position[1];
+            dataBuffer[bi ++] = individual.position[2];
+        });
+        return [dataBuffer, idBUffer];
+    }
+
     public override toArchive(): IArchiveCtrlObject & IArchiveGroup {
         return {
             ...super.toArchive(),

source/Model/Model.ts

@@ -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];
+            }
+        }
+    }
+
     /**
      * 删除一个剪辑片段
      */

source/Page/SimulatorDesktop/SimulatorDesktop.tsx

@@ -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
                         }
@@ -74,9 +74,9 @@ class SimulatorDesktop extends Component {
                 },
                 {
                     items: [{
-                        panels: ["ObjectList"]
+                        panels: ["ObjectList", "Statistics"]
                     }, {
-                        panels: ["GroupDetails", "RangeDetails", "LabelDetails", "BehaviorDetails"]
+                        panels: ["GroupDetails", "RangeDetails", "LabelDetails", "BehaviorDetails", "ClipDetails"]
                     }],
                     scale: 30,
                     layout: LayoutDirection.Y

source/Page/SimulatorWeb/SimulatorWeb.tsx

@@ -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
                         }
@@ -65,9 +65,9 @@ class SimulatorWeb extends Component {
                 },
                 {
                     items: [{
-                        panels: ["ObjectList"]
+                        panels: ["ObjectList", "Statistics"]
                     }, {
-                        panels: ["GroupDetails", "RangeDetails", "LabelDetails", "BehaviorDetails"]
+                        panels: ["GroupDetails", "RangeDetails", "LabelDetails", "BehaviorDetails", "ClipDetails"]
                     }],
                     scale: 30,
                     layout: LayoutDirection.Y

source/Panel/ClipDetails/ClipDetails.tsx

@@ -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 };

source/Panel/ClipPlayer/ClipPlayer.tsx

@@ -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")
+@useSetting
-class ClipPlayer extends Component<IMixinStatusProps> {
+@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");
 			}}
 		/>;
 	}

source/Panel/ClipPlayer/ClipRecorder.tsx

@@ -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 {
 

source/Panel/Panel.tsx

@@ -12,6 +12,8 @@ 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";
+import { Statistics } from "@Panel/Statistics/Statistics";
 
 interface IPanelInfo {
 	nameKey: string;
@@ -34,6 +36,8 @@ type PanelId = ""
 | "BehaviorList" // 行为列表
 | "BehaviorDetails" // 行为属性
 | "ClipPlayer" // 剪辑影片
+| "ClipDetails" // 剪辑详情
+| "Statistics" // 统计信息
 ;
 
 const PanelInfoMap = new Map<PanelId, IPanelInfo>();
@@ -73,6 +77,14 @@ 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
+});
+PanelInfoMap.set("Statistics", {
+    nameKey: "Panel.Title.Statistics", introKay: "Panel.Info.Statistics",
+    class: Statistics
+});
 
 function getPanelById(panelId: PanelId): ReactNode {
 	switch (panelId) {

source/Panel/Statistics/Statistics.scss

@@ -0,0 +1,63 @@
+@import "../../Component/Theme/Theme.scss";
+
+div.statistics-panel {
+    width: 100%;
+    height: 100%;
+    min-height: 100%;
+
+    div.statistics-chart {
+        box-sizing: border-box;
+        padding-top: 10px;
+        max-width: 400px;
+        min-height: 100%;
+        height: 100%;
+        width: 100%;
+    }
+
+    div.statistics-switch {
+        width: 100%;
+        height: 0;
+        display: flex;
+        justify-content: flex-end;
+
+        div.switch-button {
+            width: 24px;
+            height: 24px;
+            position: relative;
+            user-select: none;
+            right: -10px;
+            top: -2px;
+            border-radius: 3px;
+            cursor: pointer;
+            display: flex;
+            justify-content: center;
+            align-items: center;
+        }
+    }
+}
+
+div.statistics-panel.dark {
+
+    div.switch-button {
+        background-color: $lt-bg-color-lvl2-dark;
+        color: $lt-font-color-lvl2-dark;
+    }
+
+    div.switch-button:hover {
+        background-color: $lt-bg-color-lvl1-dark;
+        color: $lt-font-color-lvl1-dark;
+    }
+}
+
+div.statistics-panel.light {
+
+    div.switch-button {
+        background-color: $lt-bg-color-lvl2-light;
+        color: $lt-font-color-lvl2-light;
+    }
+
+    div.switch-button:hover {
+        background-color: $lt-bg-color-lvl1-light;
+        color: $lt-font-color-lvl1-light;
+    }
+}

source/Panel/Statistics/Statistics.tsx

@@ -0,0 +1,303 @@
+import { Component, ReactNode } from "react";
+import { useStatusWithEvent, IMixinStatusProps } from "@Context/Status";
+import { useSettingWithEvent, IMixinSettingProps, Themes } from "@Context/Setting";
+import {
+    Chart as ChartJS, CategoryScale, LinearScale,
+    BarElement, Tooltip, Legend, Decimation,
+    PointElement, LineElement, Title
+} from 'chart.js';
+import { Bar, Line } from 'react-chartjs-2';
+import { Theme } from "@Component/Theme/Theme";
+import { Icon } from "@fluentui/react";
+import { IAnyObject, Model } from "@Model/Model";
+import { Group } from "@Model/Group";
+import { ActuatorModel } from "@Model/Actuator";
+import { Message } from "@Input/Message/Message";
+import { Clip, IFrame } from "@Model/Clip";
+import "./Statistics.scss";
+
+ChartJS.register(
+    CategoryScale,
+    LinearScale,
+    BarElement,
+    Tooltip,
+    Legend,
+    PointElement,
+    LineElement,
+    Title,
+    Decimation
+);
+
+interface IStatisticsProps {
+
+}
+
+@useSettingWithEvent("themes", "language", "lineChartType")
+@useStatusWithEvent("focusClipChange", "actuatorStartChange", "fileLoad", "modelUpdate", "recordLoop", "individualChange")
+class Statistics extends Component<IStatisticsProps & IMixinStatusProps & IMixinSettingProps> {
+
+    public barDarkOption = {
+        responsive: true,
+        maintainAspectRatio: false,
+        plugins: { legend: {
+            position: 'bottom' as const,
+            labels: { boxWidth: 10, boxHeight: 10, color: 'rgba(255, 255, 255, .5)' }
+        }},
+        scales: {
+            x: { grid: { color: 'rgba(255, 255, 255, .2)' }, title: { color: 'rgba(255, 255, 255, .5)'} },
+            y: { grid: { color: 'rgba(255, 255, 255, .2)', borderDash: [3, 3] }, title: { color: 'rgba(255, 255, 255, .5)'} }
+        }
+    };
+
+    public barLightOption = {
+        responsive: true,
+        maintainAspectRatio: false,
+        plugins: { legend: {
+            position: 'bottom' as const,
+            labels: { boxWidth: 10, boxHeight: 10, color: 'rgba(0, 0, 0, .5)' }
+        }},
+        scales: {
+            x: { grid: { color: 'rgba(0, 0, 0, .2)' }, title: { color: 'rgba(0, 0, 0, .5)'} },
+            y: { grid: { color: 'rgba(0, 0, 0, .2)', borderDash: [3, 3] }, title: { color: 'rgba(0, 0, 0, .5)'} }
+        }
+    };
+
+    private modelBarChart(model: Model, theme: boolean) {
+
+        const datasets: any[] = [];
+        const labels: any[] = ["Group"];
+        
+        // 收集数据
+        model.objectPool.forEach((obj) => {
+            let label = obj.displayName;
+            let color = `rgb(${obj.color.map((v) => Math.floor(v * 255)).join(",")})`;
+            
+            if (obj instanceof Group) {
+                datasets.push({label, data: [obj.individuals.size], backgroundColor: color});
+            }
+        });
+
+        if (datasets.length <= 0) {
+            return <Message i18nKey="Panel.Info.Statistics.Nodata"/>
+        }
+
+        return <Bar
+            data={{datasets, labels}}
+            options={theme ? this.barLightOption : this.barDarkOption }
+        />
+    }
+
+    private clipBarChart(frame: IFrame, theme: boolean) {
+
+        const datasets: any[] = [];
+        const labels: any[] = ["Group"];
+        
+        // 收集数据
+        frame.commands.forEach((command) => {
+            let label = command.name;
+            let color = `rgb(${command.parameter?.color.map((v: number) => Math.floor(v * 255)).join(",")})`;
+            
+            if (command.type === "points") {
+                datasets.push({label, data: [(command.data?.length ?? 0) / 3], backgroundColor: color});
+            }
+        });
+
+        if (datasets.length <= 0) {
+            return <Message i18nKey="Panel.Info.Statistics.Nodata"/>
+        }
+
+        return <Bar
+            data={{datasets, labels}}
+            options={ theme ? this.barLightOption : this.barDarkOption }
+        />
+    }
+
+    public lineDarkOption = {
+        responsive: true,
+        maintainAspectRatio: false,
+        plugins: {
+            legend: {
+                position: 'bottom' as const,
+                labels: { boxWidth: 10, boxHeight: 10, color: 'rgba(255, 255, 255, .5)' },
+                decimation: { enabled: true }
+            },
+            decimation: { enabled: true, algorithm: "lttb" as const, samples: 100 }
+        },
+        scales: {
+            x: { grid: { color: 'rgba(255, 255, 255, .2)' }, type: "linear", title: { color: 'rgba(255, 255, 255, .5)'} },
+            y: { grid: { color: 'rgba(255, 255, 255, .2)', borderDash: [3, 3] }, title: { color: 'rgba(255, 255, 255, .5)'} }
+        }
+    };
+
+    public lineLightOption = {
+        responsive: true,
+        maintainAspectRatio: false,
+        plugins: {
+            legend: {
+                position: 'bottom' as const,
+                labels: { boxWidth: 10, boxHeight: 10, color: 'rgba(0, 0, 0, .5)' },
+            },
+            decimation: { enabled: true, algorithm: "lttb" as const, samples: 100 }
+        },
+        scales: {
+            x: { grid: { color: 'rgba(0, 0, 0, .2)' }, title: { color: 'rgba(0, 0, 0, .5)'} },
+            y: { grid: { color: 'rgba(0, 0, 0, .2)', borderDash: [3, 3] }, title: { color: 'rgba(0, 0, 0, .5)'} }
+        }
+    };
+
+    private clipLineChart(clip: Clip, theme: boolean) {
+
+        type IDataSet = {label: string, data: number[], id: string} & IAnyObject;
+        const datasets: IDataSet[] = [];
+        const labels: number[] = [];
+        let frameLen: number = 0;
+        let lastDataSet: Map<string, number> | undefined;
+        let lastProcess: number | undefined;
+        
+        // 收集数据
+        clip.frames.forEach((frame) => {
+            
+            const frameData = new Map<string, number>();
+
+            frame.commands.forEach((command) => {
+
+                if (command.type !== "points") return;
+                
+                let findKey: IDataSet | undefined;
+                for (let i = 0; i < datasets.length; i++) {
+                    if (datasets[i].id === command.id) {
+                        findKey = datasets[i];
+                        break;
+                    }
+                }
+                
+                // 记录当前数据
+                frameData.set(command.id, (command.data?.length ?? 0) / 3);
+
+                // 新建数据
+                if (!findKey) {
+
+                    const color = `rgb(${command.parameter?.color.map((v: number) => Math.floor(v * 255)).join(",")})`;
+
+                    findKey = {} as any;
+                    findKey!.label = command.name ?? "";
+                    findKey!.backgroundColor = color;
+                    findKey!.borderColor = color;
+                    findKey!.id = command.id;
+                    findKey!.pointRadius = 0;
+                    findKey!.borderWidth = 1.5;
+                    findKey!.borderCapStyle = "round";
+                    findKey!.borderJoinStyle = "round";
+                    findKey!.pointHitRadius = 8;
+
+                    // 补充数据
+                    findKey!.data = new Array(frameLen).fill(0);
+
+                    datasets.push(findKey!);
+                }
+            });
+
+            // 与上一帧数据进行对比
+            const isSameData = datasets.every((value: IDataSet) => {
+                if (value.data[frameLen - 1] === frameData.get(value.id)) {
+                    return true;
+                } else {
+                    return false;
+                }
+            });
+
+            lastDataSet = frameData;
+            lastProcess = frame.process;
+
+            // 如果是不同数据 纪录
+            if (!isSameData) {
+                datasets.forEach((value: IDataSet) => {
+                    value.data.push(frameData.get(value.id) ?? 0);
+                });
+                frameLen ++;
+                labels.push(frame.process);
+            }
+        });
+
+        // 记录最后一帧数据
+        if (lastDataSet && lastProcess !== labels[labels.length - 1]) {
+            datasets.forEach((value: IDataSet) => {
+                value.data.push(lastDataSet!.get(value.id) ?? 0);
+            });
+            frameLen ++;
+            labels.push(lastProcess!);
+        }
+
+        if (datasets.length <= 0) {
+            return <Message i18nKey="Panel.Info.Statistics.Nodata"/>
+        }
+
+        return <Line
+            options={ theme ? this.lineLightOption : this.lineDarkOption }
+            data={{labels, datasets }}
+        />;
+    }
+
+    private renderChart() {
+
+        let themes = this.props.setting?.themes === Themes.light;
+        let lineChartType = this.props.setting?.lineChartType;
+
+        // 播放模式
+        if (this.props.status?.focusClip) {
+            if (this.props.status.actuator.playClip && lineChartType) {
+                return this.clipLineChart(this.props.status.actuator.playClip, themes);
+            }
+            if (this.props.status.actuator.playFrame) {
+                return this.clipBarChart(this.props.status.actuator.playFrame, themes);
+            }
+        }
+
+        // 正在录制中
+        else if (
+            this.props.status?.actuator.mod === ActuatorModel.Record ||
+			this.props.status?.actuator.mod === ActuatorModel.Offline
+        ) {
+            if (this.props.status.actuator.recordClip && lineChartType) {
+                return this.clipLineChart(this.props.status.actuator.recordClip, themes);
+            }
+            return this.modelBarChart(this.props.status.model, themes);
+        }
+
+        // 主时钟运行
+        else if (this.props.status) {
+            return this.modelBarChart(this.props.status.model, themes);
+        }
+    }
+
+    public render(): ReactNode {
+        return <Theme className="statistics-panel">
+
+            {
+                (
+                    this.props.status?.focusClip ||
+                    this.props.status?.actuator.mod === ActuatorModel.Record ||
+                    this.props.status?.actuator.mod === ActuatorModel.Offline
+                ) ?
+
+                <div className="statistics-switch">
+                    <div className="switch-button" onClick={() => {
+                        this.props.setting?.setProps("lineChartType", !this.props.setting?.lineChartType);
+                    }}>
+                        <Icon iconName={
+                            this.props.setting?.lineChartType ? "BarChartVertical" : "LineChart"
+                        }/>
+                    </div>
+                </div>
+
+                : null
+            }
+
+            <div className="statistics-chart">
+                { this.renderChart() }
+            </div>
+        </Theme>;
+    }
+}
+
+export { Statistics };