Add demo

config/parseSave2Obj.js

@@ -1,304 +0,0 @@
-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");

config/webpack.common.js

@@ -123,10 +123,6 @@ const resolve = (plugins = []) => {
 
     let res = {
         extensions: [ ".tsx", '.ts', '.js' ],
-        fallback: {
-            'react/jsx-runtime': 'react/jsx-runtime.js',
-            'react/jsx-dev-runtime': 'react/jsx-dev-runtime.js',
-        },
         plugins: plugins
     };
 

package-lock.json

@@ -16,10 +16,7 @@
         "express": "^4.17.3",
         "gl-matrix": "^3.4.3",
         "react": "^17.0.2",
-        "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": {
@@ -729,17 +726,6 @@
         "node": ">=4"
       }
     },
-    "node_modules/@babel/runtime": {
-      "version": "7.17.9",
-      "resolved": "https://registry.npmmirror.com/@babel/runtime/-/runtime-7.17.9.tgz",
-      "integrity": "sha512-lSiBBvodq29uShpWGNbgFdKYNiFDo5/HIYsaCEY9ff4sb10x9jizo2+pRrSyF4jKZCXqgzuqBOQKbUm90gQwJg==",
-      "dependencies": {
-        "regenerator-runtime": "^0.13.4"
-      },
-      "engines": {
-        "node": ">=6.9.0"
-      }
-    },
     "node_modules/@discoveryjs/json-ext": {
       "version": "0.5.6",
       "resolved": "https://registry.npmjs.org/@discoveryjs/json-ext/-/json-ext-0.5.6.tgz",
@@ -1037,21 +1023,6 @@
         "node": ">=10"
       }
     },
-    "node_modules/@react-dnd/asap": {
-      "version": "5.0.2",
-      "resolved": "https://registry.npmmirror.com/@react-dnd/asap/-/asap-5.0.2.tgz",
-      "integrity": "sha512-WLyfoHvxhs0V9U+GTsGilGgf2QsPl6ZZ44fnv0/b8T3nQyvzxidxsg/ZltbWssbsRDlYW8UKSQMTGotuTotZ6A=="
-    },
-    "node_modules/@react-dnd/invariant": {
-      "version": "4.0.2",
-      "resolved": "https://registry.npmmirror.com/@react-dnd/invariant/-/invariant-4.0.2.tgz",
-      "integrity": "sha512-xKCTqAK/FFauOM9Ta2pswIyT3D8AQlfrYdOi/toTPEhqCuAs1v5tcJ3Y08Izh1cJ5Jchwy9SeAXmMg6zrKs2iw=="
-    },
-    "node_modules/@react-dnd/shallowequal": {
-      "version": "4.0.2",
-      "resolved": "https://registry.npmmirror.com/@react-dnd/shallowequal/-/shallowequal-4.0.2.tgz",
-      "integrity": "sha512-/RVXdLvJxLg4QKvMoM5WlwNR9ViO9z8B/qPcc+C0Sa/teJY7QG7kJ441DwzOjMYEY7GmU4dj5EcGHIkKZiQZCA=="
-    },
     "node_modules/@sindresorhus/is": {
       "version": "0.14.0",
       "resolved": "https://registry.npmmirror.com/@sindresorhus/is/-/is-0.14.0.tgz",
@@ -1224,7 +1195,7 @@
       "version": "17.0.21",
       "resolved": "https://registry.npmjs.org/@types/node/-/node-17.0.21.tgz",
       "integrity": "sha512-DBZCJbhII3r90XbQxI8Y9IjjiiOGlZ0Hr32omXIZvwwZ7p4DMMXGrKXVyPfuoBOri9XNtL0UK69jYIBIsRX3QQ==",
-      "devOptional": true
+      "dev": true
     },
     "node_modules/@types/normalize-package-data": {
       "version": "2.4.1",
@@ -2846,16 +2817,6 @@
         "node": ">=8"
       }
     },
-    "node_modules/dnd-core": {
-      "version": "16.0.1",
-      "resolved": "https://registry.npmmirror.com/dnd-core/-/dnd-core-16.0.1.tgz",
-      "integrity": "sha512-HK294sl7tbw6F6IeuK16YSBUoorvHpY8RHO+9yFfaJyCDVb6n7PRcezrOEOa2SBCqiYpemh5Jx20ZcjKdFAVng==",
-      "dependencies": {
-        "@react-dnd/asap": "^5.0.1",
-        "@react-dnd/invariant": "^4.0.1",
-        "redux": "^4.2.0"
-      }
-    },
     "node_modules/dns-equal": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/dns-equal/-/dns-equal-1.0.0.tgz",
@@ -3356,7 +3317,8 @@
     "node_modules/fast-deep-equal": {
       "version": "3.1.3",
       "resolved": "https://registry.npmjs.org/fast-deep-equal/-/fast-deep-equal-3.1.3.tgz",
-      "integrity": "sha512-f3qQ9oQy9j2AhBe/H9VC91wLmKBCCU/gDOnKNAYG5hswO7BLKj09Hc5HYNz9cGI++xlpDCIgDaitVs03ATR84Q=="
+      "integrity": "sha512-f3qQ9oQy9j2AhBe/H9VC91wLmKBCCU/gDOnKNAYG5hswO7BLKj09Hc5HYNz9cGI++xlpDCIgDaitVs03ATR84Q==",
+      "dev": true
     },
     "node_modules/fast-glob": {
       "version": "3.2.11",
@@ -3983,14 +3945,6 @@
         "he": "bin/he"
       }
     },
-    "node_modules/hoist-non-react-statics": {
-      "version": "3.3.2",
-      "resolved": "https://registry.npmmirror.com/hoist-non-react-statics/-/hoist-non-react-statics-3.3.2.tgz",
-      "integrity": "sha512-/gGivxi8JPKWNm/W0jSmzcMPpfpPLc3dY/6GxhX2hQ9iGj3aDfklV4ET7NjKpSinLpJ5vafa9iiGIEZg10SfBw==",
-      "dependencies": {
-        "react-is": "^16.7.0"
-      }
-    },
     "node_modules/hosted-git-info": {
       "version": "4.1.0",
       "resolved": "https://registry.npmjs.org/hosted-git-info/-/hosted-git-info-4.1.0.tgz",
@@ -6210,43 +6164,6 @@
         "node": ">=0.10.0"
       }
     },
-    "node_modules/react-dnd": {
-      "version": "16.0.1",
-      "resolved": "https://registry.npmmirror.com/react-dnd/-/react-dnd-16.0.1.tgz",
-      "integrity": "sha512-QeoM/i73HHu2XF9aKksIUuamHPDvRglEwdHL4jsp784BgUuWcg6mzfxT0QDdQz8Wj0qyRKx2eMg8iZtWvU4E2Q==",
-      "dependencies": {
-        "@react-dnd/invariant": "^4.0.1",
-        "@react-dnd/shallowequal": "^4.0.1",
-        "dnd-core": "^16.0.1",
-        "fast-deep-equal": "^3.1.3",
-        "hoist-non-react-statics": "^3.3.2"
-      },
-      "peerDependencies": {
-        "@types/hoist-non-react-statics": ">= 3.3.1",
-        "@types/node": ">= 12",
-        "@types/react": ">= 16",
-        "react": ">= 16.14"
-      },
-      "peerDependenciesMeta": {
-        "@types/hoist-non-react-statics": {
-          "optional": true
-        },
-        "@types/node": {
-          "optional": true
-        },
-        "@types/react": {
-          "optional": true
-        }
-      }
-    },
-    "node_modules/react-dnd-html5-backend": {
-      "version": "16.0.1",
-      "resolved": "https://registry.npmmirror.com/react-dnd-html5-backend/-/react-dnd-html5-backend-16.0.1.tgz",
-      "integrity": "sha512-Wu3dw5aDJmOGw8WjH1I1/yTH+vlXEL4vmjk5p+MHxP8HuHJS1lAGeIdG/hze1AvNeXWo/JgULV87LyQOr+r5jw==",
-      "dependencies": {
-        "dnd-core": "^16.0.1"
-      }
-    },
     "node_modules/react-dom": {
       "version": "17.0.2",
       "resolved": "https://registry.npmjs.org/react-dom/-/react-dom-17.0.2.tgz",
@@ -6260,11 +6177,6 @@
         "react": "17.0.2"
       }
     },
-    "node_modules/react-is": {
-      "version": "16.13.1",
-      "resolved": "https://registry.npmmirror.com/react-is/-/react-is-16.13.1.tgz",
-      "integrity": "sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ=="
-    },
     "node_modules/read-pkg": {
       "version": "5.2.0",
       "resolved": "https://registry.npmjs.org/read-pkg/-/read-pkg-5.2.0.tgz",
@@ -6368,14 +6280,6 @@
         "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",
@@ -6401,19 +6305,6 @@
         "node": ">=8"
       }
     },
-    "node_modules/redux": {
-      "version": "4.2.0",
-      "resolved": "https://registry.npmmirror.com/redux/-/redux-4.2.0.tgz",
-      "integrity": "sha512-oSBmcKKIuIR4ME29/AeNUnl5L+hvBq7OaJWzaptTQJAntaPvxIJqfnjbaEiCzzaIz+XmVILfqAM3Ob0aXLPfjA==",
-      "dependencies": {
-        "@babel/runtime": "^7.9.2"
-      }
-    },
-    "node_modules/regenerator-runtime": {
-      "version": "0.13.9",
-      "resolved": "https://registry.npmmirror.com/regenerator-runtime/-/regenerator-runtime-0.13.9.tgz",
-      "integrity": "sha512-p3VT+cOEgxFsRRA9X4lkI1E+k2/CtnKtU4gcxyaCUreilL/vqI6CdZ3wxVUx3UOUg+gnUOQQcRI7BmSI656MYA=="
-    },
     "node_modules/regexp.prototype.flags": {
       "version": "1.4.1",
       "resolved": "https://registry.npmjs.org/regexp.prototype.flags/-/regexp.prototype.flags-1.4.1.tgz",
@@ -8876,14 +8767,6 @@
         }
       }
     },
-    "@babel/runtime": {
-      "version": "7.17.9",
-      "resolved": "https://registry.npmmirror.com/@babel/runtime/-/runtime-7.17.9.tgz",
-      "integrity": "sha512-lSiBBvodq29uShpWGNbgFdKYNiFDo5/HIYsaCEY9ff4sb10x9jizo2+pRrSyF4jKZCXqgzuqBOQKbUm90gQwJg==",
-      "requires": {
-        "regenerator-runtime": "^0.13.4"
-      }
-    },
     "@discoveryjs/json-ext": {
       "version": "0.5.6",
       "resolved": "https://registry.npmjs.org/@discoveryjs/json-ext/-/json-ext-0.5.6.tgz",
@@ -9130,21 +9013,6 @@
         "rimraf": "^3.0.2"
       }
     },
-    "@react-dnd/asap": {
-      "version": "5.0.2",
-      "resolved": "https://registry.npmmirror.com/@react-dnd/asap/-/asap-5.0.2.tgz",
-      "integrity": "sha512-WLyfoHvxhs0V9U+GTsGilGgf2QsPl6ZZ44fnv0/b8T3nQyvzxidxsg/ZltbWssbsRDlYW8UKSQMTGotuTotZ6A=="
-    },
-    "@react-dnd/invariant": {
-      "version": "4.0.2",
-      "resolved": "https://registry.npmmirror.com/@react-dnd/invariant/-/invariant-4.0.2.tgz",
-      "integrity": "sha512-xKCTqAK/FFauOM9Ta2pswIyT3D8AQlfrYdOi/toTPEhqCuAs1v5tcJ3Y08Izh1cJ5Jchwy9SeAXmMg6zrKs2iw=="
-    },
-    "@react-dnd/shallowequal": {
-      "version": "4.0.2",
-      "resolved": "https://registry.npmmirror.com/@react-dnd/shallowequal/-/shallowequal-4.0.2.tgz",
-      "integrity": "sha512-/RVXdLvJxLg4QKvMoM5WlwNR9ViO9z8B/qPcc+C0Sa/teJY7QG7kJ441DwzOjMYEY7GmU4dj5EcGHIkKZiQZCA=="
-    },
     "@sindresorhus/is": {
       "version": "0.14.0",
       "resolved": "https://registry.npmmirror.com/@sindresorhus/is/-/is-0.14.0.tgz",
@@ -9308,7 +9176,7 @@
       "version": "17.0.21",
       "resolved": "https://registry.npmjs.org/@types/node/-/node-17.0.21.tgz",
       "integrity": "sha512-DBZCJbhII3r90XbQxI8Y9IjjiiOGlZ0Hr32omXIZvwwZ7p4DMMXGrKXVyPfuoBOri9XNtL0UK69jYIBIsRX3QQ==",
-      "devOptional": true
+      "dev": true
     },
     "@types/normalize-package-data": {
       "version": "2.4.1",
@@ -10620,16 +10488,6 @@
         "path-type": "^4.0.0"
       }
     },
-    "dnd-core": {
-      "version": "16.0.1",
-      "resolved": "https://registry.npmmirror.com/dnd-core/-/dnd-core-16.0.1.tgz",
-      "integrity": "sha512-HK294sl7tbw6F6IeuK16YSBUoorvHpY8RHO+9yFfaJyCDVb6n7PRcezrOEOa2SBCqiYpemh5Jx20ZcjKdFAVng==",
-      "requires": {
-        "@react-dnd/asap": "^5.0.1",
-        "@react-dnd/invariant": "^4.0.1",
-        "redux": "^4.2.0"
-      }
-    },
     "dns-equal": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/dns-equal/-/dns-equal-1.0.0.tgz",
@@ -11047,7 +10905,8 @@
     "fast-deep-equal": {
       "version": "3.1.3",
       "resolved": "https://registry.npmjs.org/fast-deep-equal/-/fast-deep-equal-3.1.3.tgz",
-      "integrity": "sha512-f3qQ9oQy9j2AhBe/H9VC91wLmKBCCU/gDOnKNAYG5hswO7BLKj09Hc5HYNz9cGI++xlpDCIgDaitVs03ATR84Q=="
+      "integrity": "sha512-f3qQ9oQy9j2AhBe/H9VC91wLmKBCCU/gDOnKNAYG5hswO7BLKj09Hc5HYNz9cGI++xlpDCIgDaitVs03ATR84Q==",
+      "dev": true
     },
     "fast-glob": {
       "version": "3.2.11",
@@ -11525,14 +11384,6 @@
       "integrity": "sha512-F/1DnUGPopORZi0ni+CvrCgHQ5FyEAHRLSApuYWMmrbSwoN2Mn/7k+Gl38gJnR7yyDZk6WLXwiGod1JOWNDKGw==",
       "dev": true
     },
-    "hoist-non-react-statics": {
-      "version": "3.3.2",
-      "resolved": "https://registry.npmmirror.com/hoist-non-react-statics/-/hoist-non-react-statics-3.3.2.tgz",
-      "integrity": "sha512-/gGivxi8JPKWNm/W0jSmzcMPpfpPLc3dY/6GxhX2hQ9iGj3aDfklV4ET7NjKpSinLpJ5vafa9iiGIEZg10SfBw==",
-      "requires": {
-        "react-is": "^16.7.0"
-      }
-    },
     "hosted-git-info": {
       "version": "4.1.0",
       "resolved": "https://registry.npmjs.org/hosted-git-info/-/hosted-git-info-4.1.0.tgz",
@@ -13200,26 +13051,6 @@
         "object-assign": "^4.1.1"
       }
     },
-    "react-dnd": {
-      "version": "16.0.1",
-      "resolved": "https://registry.npmmirror.com/react-dnd/-/react-dnd-16.0.1.tgz",
-      "integrity": "sha512-QeoM/i73HHu2XF9aKksIUuamHPDvRglEwdHL4jsp784BgUuWcg6mzfxT0QDdQz8Wj0qyRKx2eMg8iZtWvU4E2Q==",
-      "requires": {
-        "@react-dnd/invariant": "^4.0.1",
-        "@react-dnd/shallowequal": "^4.0.1",
-        "dnd-core": "^16.0.1",
-        "fast-deep-equal": "^3.1.3",
-        "hoist-non-react-statics": "^3.3.2"
-      }
-    },
-    "react-dnd-html5-backend": {
-      "version": "16.0.1",
-      "resolved": "https://registry.npmmirror.com/react-dnd-html5-backend/-/react-dnd-html5-backend-16.0.1.tgz",
-      "integrity": "sha512-Wu3dw5aDJmOGw8WjH1I1/yTH+vlXEL4vmjk5p+MHxP8HuHJS1lAGeIdG/hze1AvNeXWo/JgULV87LyQOr+r5jw==",
-      "requires": {
-        "dnd-core": "^16.0.1"
-      }
-    },
     "react-dom": {
       "version": "17.0.2",
       "resolved": "https://registry.npmjs.org/react-dom/-/react-dom-17.0.2.tgz",
@@ -13230,11 +13061,6 @@
         "scheduler": "^0.20.2"
       }
     },
-    "react-is": {
-      "version": "16.13.1",
-      "resolved": "https://registry.npmmirror.com/react-is/-/react-is-16.13.1.tgz",
-      "integrity": "sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ=="
-    },
     "read-pkg": {
       "version": "5.2.0",
       "resolved": "https://registry.npmjs.org/read-pkg/-/read-pkg-5.2.0.tgz",
@@ -13318,11 +13144,6 @@
         "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",
@@ -13342,19 +13163,6 @@
         "strip-indent": "^3.0.0"
       }
     },
-    "redux": {
-      "version": "4.2.0",
-      "resolved": "https://registry.npmmirror.com/redux/-/redux-4.2.0.tgz",
-      "integrity": "sha512-oSBmcKKIuIR4ME29/AeNUnl5L+hvBq7OaJWzaptTQJAntaPvxIJqfnjbaEiCzzaIz+XmVILfqAM3Ob0aXLPfjA==",
-      "requires": {
-        "@babel/runtime": "^7.9.2"
-      }
-    },
-    "regenerator-runtime": {
-      "version": "0.13.9",
-      "resolved": "https://registry.npmmirror.com/regenerator-runtime/-/regenerator-runtime-0.13.9.tgz",
-      "integrity": "sha512-p3VT+cOEgxFsRRA9X4lkI1E+k2/CtnKtU4gcxyaCUreilL/vqI6CdZ3wxVUx3UOUg+gnUOQQcRI7BmSI656MYA=="
-    },
     "regexp.prototype.flags": {
       "version": "1.4.1",
       "resolved": "https://registry.npmjs.org/regexp.prototype.flags/-/regexp.prototype.flags-1.4.1.tgz",

package.json

@@ -20,7 +20,6 @@
     "build-run-web": "npm run build-web & npm run build-service & npm run run-service",
     "release-run-web": "npm run release-web & npm run release-service & npm run run-service",
     "copy-fluent-icon": "fse mkdirp ./build/font-icon/ & fse emptyDir ./build/font-icon/ & fse copy ./node_modules/@fluentui/font-icons-mdl2/fonts/ ./build/font-icon/",
-    "copy-loading-page": "fse mkdirp ./build & fse copy ./assets/LoadingPage.html ./build/LoadingPage.html",
     "build-run-desktop-web": "npm run build-desktop-web & npm run copy-fluent-icon & npm run build-service & npm run run-service",
     "release-run-desktop-web": "npm run release-desktop-web & npm run copy-fluent-icon & npm run release-service & npm run run-service",
     "skip-electron-ci": "set ELECTRON_SKIP_BINARY_DOWNLOAD=1& npm ci",
@@ -29,8 +28,8 @@
     "electron-cache": "set ELECTRON_SKIP_BINARY_DOWNLOAD=& set ELECTRON_MIRROR=https://npmmirror.com/mirrors/electron/& set ELECTRON_CUSTOM_DIR={{ version }}& node ./node_modules/electron/install.js",
     "electron": "set LIVING_TOGETHER_BASE_PATH=./build& set LIVING_TOGETHER_WEB_PATH=/& npx electron ./build/Electron.js",
     "hmr-electron": "npm run build-electron & set LIVING_TOGETHER_SERVICE=http://127.0.0.1:12000& npm run electron",
-    "build-run-electron": "npm run build-desktop-web & npm run copy-fluent-icon & npm run copy-loading-page & npm run build-electron & npm run electron",
+    "build-run-electron": "npm run build-desktop-web & npm run copy-fluent-icon & npm run build-electron & npm run electron",
-    "release-run-electron": "npm run release-desktop-web & npm run copy-fluent-icon & npm run copy-loading-page & npm run release-electron & npm run electron",
+    "release-run-electron": "npm run release-desktop-web & npm run copy-fluent-icon & npm run release-electron & npm run electron",
     "copy-package-json": "fse mkdirp ./bundle/ & node ./config/electron.forge.config.js --out ./bundle",
     "copy-build-result": "fse mkdirp ./bundle/ & fse mkdirp ./build/ & fse copy ./build/ ./bundle/",
     "copy-electron-icon": "fse mkdirp ./bundle/ & fse copy ./assets/living-together.ico ./bundle/living-together.ico & fse copy ./assets/living-together.icns ./bundle/living-together.icns",
@@ -76,10 +75,7 @@
     "express": "^4.17.3",
     "gl-matrix": "^3.4.3",
     "react": "^17.0.2",
-    "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

@@ -1,86 +0,0 @@
-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,15 +7,9 @@ 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),
+    // new BehaviorRecorder(Template),
     new BehaviorRecorder(PhysicsDynamics),
     new BehaviorRecorder(Brownian),
     new BehaviorRecorder(BoundaryConstraint),
@@ -23,12 +17,6 @@ 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,17 +48,11 @@ class BoundaryConstraint extends Behavior<IBoundaryConstraintBehaviorParameter,
 
 			if (ox || oy || oz) {
 
-				const backFocus: number[] = [0, 0, 0];
+				let currentFLen = individual.vectorLength(rx, ry, rz);
-
-				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 = backFocus[0];
+					fx = rx;
-					fy = backFocus[1];
+					fy = ry;
-					fz = backFocus[2];
+					fz = rz;
 					fLen = currentFLen;
 				}
 

source/Behavior/Brownian.ts

@@ -7,9 +7,7 @@ type IBrownianBehaviorParameter = {
     maxFrequency: "number",
 	minFrequency: "number",
 	maxStrength: "number",
-	minStrength: "number",
+	minStrength: "number"
-	dirLimit: "boolean",
-	angle: "number"
 }
 
 type IBrownianBehaviorEvent = {}
@@ -30,88 +28,9 @@ 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;
@@ -122,49 +41,11 @@ class Brownian extends Behavior<IBrownianBehaviorParameter, IBrownianBehaviorEve
 		
 		currentTime += t;
 		if (currentTime > nextTime) {
-
-			let randomDir: number[];
-
-			// 开启角度限制
-			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,
+				minStrength + (Math.random() * 2 - 1) * (maxStrength - minStrength),
-				randomDir[1] * randomLength,
+				minStrength + (Math.random() * 2 - 1) * (maxStrength - minStrength),
-				randomDir[2] * randomLength
+				minStrength + (Math.random() * 2 - 1) * (maxStrength - minStrength)
 			);
-
 			nextTime = minFrequency +  Math.random() * (maxFrequency - minFrequency);
 			currentTime = 0;
 		}
@@ -197,15 +78,7 @@ 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

@@ -1,96 +0,0 @@
-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,7 +6,6 @@ import { Model } from "@Model/Model";
 type IContactAssimilateBehaviorParameter = {
     target: "CLG",
     assimilate: "CG",
-    self: "CG",
 	success: "number",
     range: "number"
 }
@@ -28,13 +27,15 @@ 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];
 
@@ -49,18 +50,7 @@ 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);
-                        }
                     }
 				}
 			});
@@ -80,10 +70,6 @@ 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,8 +6,7 @@ import { Model } from "@Model/Model";
 type IContactAttackingBehaviorParameter = {
     target: "CLG",
 	success: "number",
-    range: "number",
+    range: "number"
-    assimilate: "CG",
 }
 
 type IContactAttackingBehaviorEvent = {}
@@ -27,8 +26,7 @@ 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 => {
@@ -48,10 +46,6 @@ 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);
-                        }
                     }
 				}
 			});
@@ -78,10 +72,6 @@ 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

@@ -1,93 +0,0 @@
-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

@@ -1,83 +0,0 @@
-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.0001, condition: { key: "limit", value: true }
+			numberStep: .1, numberMin: 0, condition: { key: "limit", value: true }
 		},
 		maxVelocity: {
 			name: "$Max.Velocity", type: "number", defaultValue: 12.5,
-			numberStep: .1, numberMin: 0.0001, condition: { key: "limit", value: true }
+			numberStep: .1, numberMin: 0, 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 && lengthA) {
+			if (lengthA > this.parameter.maxAcceleration) {
 				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 && lengthV) {
+			if (lengthV > this.parameter.maxVelocity) {
 				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

@@ -1,160 +0,0 @@
-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,7 +7,6 @@ type ITrackingBehaviorParameter = {
     target: "CLG",
 	strength: "number",
     range: "number",
-    angle: "number",
     lock: "boolean"
 }
 
@@ -29,23 +28,12 @@ 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++) {
@@ -58,21 +46,8 @@ class Tracking extends Behavior<ITrackingBehaviorParameter, ITrackingBehaviorEve
 				let dis = targetIndividual.distanceTo(individual);
 
 				if (dis < this.currentDistant && dis <= this.parameter.range) {
-
+					this.target = targetIndividual;
-                    // 计算目标方位
+					this.currentDistant = dis;
-                    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;
-                    }
 				}
 
 			});
@@ -175,11 +150,7 @@ class Tracking extends Behavior<ITrackingBehaviorParameter, ITrackingBehaviorEve
 		"$Interactive": {
 			"ZH_CN": "交互",
             "EN_US": "Interactive"
-		},
+		}
-        "$Angle": {
-            "ZH_CN": "可视角度",
-            "EN_US": "Viewing angle"
-        }
     };
 }
 

source/Behavior/Wastage.ts

@@ -1,100 +0,0 @@
-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/ClipList/ClipList.scss

@@ -1,148 +0,0 @@
-@import "../Theme/Theme.scss";
-
-$clip-item-height: 45px;
-
-div.clip-list-root {
-	margin: -5px;
-	display: flex;
-	flex-wrap: wrap;
-
-	div.clip-item {
-		margin: 5px;
-		height: $clip-item-height;
-		user-select: none;
-		border-radius: 3px;
-        overflow: hidden;
-		cursor: pointer;
-		display: flex;
-
-		div.clip-item-hole-view {
-			height: 100%;
-			width: 10px;
-			box-sizing: border-box;
-			display: flex;
-			flex-direction: column;
-			justify-items: center;
-			justify-content: space-between;
-			padding: 5px;
-			padding-right: 0;
-
-			div.clip-item-hole {
-				width: 5px;
-				height: 5px;
-				background-color: #000000;
-				flex-shrink: 0;
-			}
-		}
-
-		div.clip-icon-view {
-			width: $clip-item-height;
-			height: $clip-item-height;
-			display: flex;
-			justify-content: center;
-			align-items: center;
-
-			i.icon {
-				display: inline-block;
-				font-size: 25px;
-			}
-
-			i.delete {
-				display: none;
-			}
-
-			i.delete:hover {
-				color: $lt-red;
-			}
-		}
-
-		div.clip-item-content {
-			width: calc( 100% - 65px );
-			padding-right: 10px;
-			max-width: 125px;
-			height: $clip-item-height;
-			display: flex;
-			flex-direction: column;
-			justify-content: center;
-
-			div {
-				white-space: nowrap;
-				text-overflow: ellipsis;
-				overflow: hidden;
-				width: 100%;
-			}
-
-			div.info {
-				opacity: .75;
-			}
-		}
-	}
-
-	div.clip-item.disable {
-		cursor: not-allowed;
-	}
-
-	div.clip-item.able:hover {
-
-		div.clip-icon-view {
-
-			i.icon {
-				display: none;
-			}
-
-			i.delete {
-				display: inline-block;
-			}
-		}
-	}
-
-	div.add-button {
-        width: 26px;
-        height: 26px;
-        display: flex;
-        justify-content: center;
-        align-items: center;
-    }
-}
-
-div.dark.clip-list-root {
-
-	div.clip-item {
-		background-color: $lt-bg-color-lvl3-dark;
-
-		div.clip-item-hole-view div.clip-item-hole {
-			background-color: $lt-bg-color-lvl4-dark;
-		}
-	}
-
-	div.clip-item.able:hover {
-		color: $lt-font-color-lvl2-dark;
-		background-color: $lt-bg-color-lvl2-dark;
-	}
-
-	div.clip-item.focus {
-		color: $lt-font-color-lvl1-dark;
-    	background-color: $lt-bg-color-lvl1-dark;
-	}
-}
-
-div.light.clip-list-root {
-	
-	div.clip-item {
-		background-color: $lt-bg-color-lvl3-light;
-
-		div.clip-item-hole-view div.clip-item-hole {
-			background-color: $lt-bg-color-lvl4-light;
-		}
-	}
-
-	div.clip-item.able:hover {
-		color: $lt-font-color-lvl2-light;
-		background-color: $lt-bg-color-lvl2-light;
-	}
-
-	div.clip-item.focus {
-		color: $lt-font-color-lvl1-light;
-    	background-color: $lt-bg-color-lvl1-light;
-	}
-}

source/Component/ClipList/ClipList.tsx

@@ -1,130 +0,0 @@
-import { Localization } from "@Component/Localization/Localization";
-import { Theme } from "@Component/Theme/Theme";
-import { Icon } from "@fluentui/react";
-import { Clip } from "@Model/Clip";
-import { Component, ReactNode } from "react";
-import "./ClipList.scss";
-
-interface IClipListProps {
-	clips: Clip[];
-	focus?: Clip;
-	disable?: boolean;
-	add?: () => any;
-	click?: (clip: Clip) => any;
-	delete?: (clip: Clip) => any;
-}
-
-class ClipList extends Component<IClipListProps> {
-
-	private isInnerClick: boolean = false;
-
-	private resolveCallback(fn?: (p: any) => any, p?: any): any {
-		if (this.props.disable) {
-			return false;
-		}
-		if (fn) {
-			return fn(p);
-		}
-	}
-
-	private parseTime(time?: number): string {
-		if (time === undefined) {
-			return "0:0:0:0";
-		}
-		const h = Math.floor(time / 3600);
-		const m = Math.floor((time % 3600) / 60);
-		const s = Math.floor((time % 3600) % 60);
-		const ms = Math.floor((time % 1) * 1000);
-		return `${h}:${m}:${s}:${ms}`;
-	}
-
-	private getClipInfo(clip: Clip): string {
-		let fps = Math.round((clip.frames.length - 1) / clip.time);
-		if (isNaN(fps)) fps = 0;
-		return `${this.parseTime(clip.time)} ${fps}fps`;
-	}
-
-	private renderClip(clip: Clip) {
-
-		const focus = clip.equal(this.props.focus);
-		const disable = this.props.disable;
-		const classList = ["clip-item"];
-
-		if (focus) {
-			classList.push("focus");
-		}
-
-		if (disable) {
-			classList.push("disable");
-		} else {
-			classList.push("able");
-		}
-
-		return <div
-			key={clip.id}
-			className={classList.join(" ")}
-			onClick={() => {
-				if (this.isInnerClick) {
-					this.isInnerClick = false;
-				} else {
-					this.resolveCallback(this.props.click, clip);
-				}
-			}}
-		>
-			<div className="clip-item-hole-view">
-				{new Array(4).fill(0).map((_, index) => {
-					return <div className="clip-item-hole" key={index}/>
-				})}
-			</div>
-			<div className="clip-icon-view">
-				<Icon iconName="MyMoviesTV" className="icon"/>
-				<Icon
-					iconName="Delete"
-					className="delete"
-					onClick={() => {
-						this.isInnerClick = true;
-						this.resolveCallback(this.props.delete, clip);
-					}}
-				/>
-			</div>
-			<div className="clip-item-content">
-				<div className="title">{clip.name}</div>
-				<div className="info">{
-					clip.isRecording ?
-						<Localization i18nKey="Panel.Info.Behavior.Clip.Uname.Clip"/> :
-						this.getClipInfo(clip)
-				}</div>
-			</div>
-		</div>;
-	}
-
-	private renderAddButton(): ReactNode {
-
-		const classList = ["clip-item", "add-button"];
-
-		if (this.props.disable) {
-			classList.push("disable");
-		} else {
-			classList.push("able");
-		}
-
-		return <div
-			key="ADD_BUTTON"
-			className={classList.join(" ")}
-			onClick={() => this.resolveCallback(this.props.add)}
-		>
-            <Icon iconName="Add"/>
-        </div>
-	}
-
-	public render(): ReactNode {
-		return <Theme className="clip-list-root">
-			{ this.props.clips.map((clip => {
-				return this.renderClip(clip);
-			})) }
-			{ this.renderAddButton() }
-		</Theme>;
-	}
-}
-
-export { ClipList };

source/Component/CommandBar/CommandBar.scss

@@ -1,5 +1,3 @@
-@import "../Theme/Theme.scss";
-
 div.command-bar {
     height: 100%;
     user-select: none;
@@ -7,53 +5,32 @@ div.command-bar {
     flex-direction: column;
     justify-content: space-between;
     
-    div.command-button {
+    button.ms-Button.command-button {
         width: 100%;
+        text-align: center;
         display: flex;
         justify-content: center;
-        align-items: center;
         transition: all 100ms ease-in-out;
-        cursor: pointer;
+        color:  inherit;
         
-        i {
+        span.ms-Button-flexContainer i.ms-Icon {
-            font-size: 22px;
+            font-size: 25px;
-        }
-
-        div.command-button-loading {
-            
-            div.ms-Spinner-circle {
-                border-width: 2px;
-            }
         }
     }
 
-    div.command-button.on-end {
+    button.ms-Button.command-button.on-end {
         align-self: flex-end;
     }
 }
 
-div.command-bar.dark div.command-button div.command-button-loading div.ms-Spinner-circle {
+div.command-bar.dark button.ms-Button.command-button.active,
-    border-top-color: rgba($color: #FFFFFF, $alpha: .9);
+div.command-bar.dark button.ms-Button.command-button:hover {
-    border-left-color: rgba($color: #FFFFFF, $alpha: .4);
-    border-bottom-color: rgba($color: #FFFFFF, $alpha: .4);
-    border-right-color: rgba($color: #FFFFFF, $alpha: .4);
-}
-
-div.command-bar.light div.command-button div.command-button-loading div.ms-Spinner-circle {
-    border-top-color: rgba($color: #000000, $alpha: .9);
-    border-left-color: rgba($color: #000000, $alpha: .4);
-    border-bottom-color: rgba($color: #000000, $alpha: .4);
-    border-right-color: rgba($color: #000000, $alpha: .4);
-}
-
-div.command-bar.dark div.command-button.active,
-div.command-bar.dark div.command-button:hover {
     background-color: rgba($color: #FFFFFF, $alpha: .2);
     color: rgba($color: #FFFFFF, $alpha: 1);
 }
 
-div.command-bar.light div.command-button.active,
+div.command-bar.light button.ms-Button.command-button.active,
-div.command-bar.light div.command-button:hover {
+div.command-bar.light button.ms-Button.command-button:hover {
     background-color: rgba($color: #000000, $alpha: .08);
     color: rgba($color: #000000, $alpha: 1);
 }

source/Component/CommandBar/CommandBar.tsx

@@ -1,5 +1,5 @@
-import { Component, ReactNode, FunctionComponent } from "react";
+import { Component, ReactNode } from "react";
-import { DirectionalHint, Icon, Spinner } from "@fluentui/react";
+import { DirectionalHint, IconButton } from "@fluentui/react";
 import { useSetting, IMixinSettingProps } from "@Context/Setting";
 import { useStatusWithEvent, IMixinStatusProps } from "@Context/Status";
 import { BackgroundLevel, Theme } from "@Component/Theme/Theme";
@@ -9,7 +9,6 @@ import { SettingPopup } from "@Component/SettingPopup/SettingPopup";
 import { BehaviorPopup } from "@Component/BehaviorPopup/BehaviorPopup";
 import { MouseMod } from "@GLRender/ClassicRenderer";
 import { ArchiveSave } from "@Context/Archive";
-import { ActuatorModel } from "@Model/Actuator";
 import "./CommandBar.scss";
 
 const COMMAND_BAR_WIDTH = 45;
@@ -19,28 +18,23 @@ interface IRenderButtonParameter {
     iconName?: string;
     click?: () => void;
     active?: boolean;
-    isLoading?: boolean;
 }
 
 interface ICommandBarState {
     isSaveRunning: boolean;
 }
 
-const CommandButton: FunctionComponent<IRenderButtonParameter> = (param) => {
+function getRenderButton(param: IRenderButtonParameter): ReactNode {
     return <LocalizationTooltipHost 
         i18nKey={param.i18NKey}
         directionalHint={DirectionalHint.rightCenter}
     >
-        <div
+        <IconButton
             style={{ height: COMMAND_BAR_WIDTH }}
-            onClick={ param.isLoading ? undefined : param.click }
+            iconProps={{ iconName: param.iconName }}
+            onClick={ param.click }
             className={"command-button on-end" + (param.active ? " active" : "")}
-        >
+        />
-            {param.isLoading ? 
-                <Spinner className="command-button-loading"/> :
-                <Icon iconName={param.iconName}/>
-            }
-        </div>
     </LocalizationTooltipHost>
 }
 @useSetting
@@ -51,62 +45,6 @@ class CommandBar extends Component<IMixinSettingProps & IMixinStatusProps, IComm
         isSaveRunning: false
     };
 
-    private renderPlayActionButton(): ReactNode {
-
-        let icon: string = "Play";
-        let handel: () => any = () => {};
-
-        // 播放模式
-        if (this.props.status?.focusClip) {
-
-            // 暂停播放
-            if (this.props.status?.actuator.mod === ActuatorModel.Play) {
-                icon = "Pause";
-                handel = () => {
-                    this.props.status?.actuator.pausePlay();
-					console.log("ClipRecorder: Pause play...");
-                };
-            }
-
-            // 开始播放
-            else {
-                icon = "Play";
-                handel = () => {
-                    this.props.status?.actuator.playing();
-					console.log("ClipRecorder: Play start...");
-                };
-            }
-        }
-        
-        // 正在录制中
-        else if (
-            this.props.status?.actuator.mod === ActuatorModel.Record ||
-			this.props.status?.actuator.mod === ActuatorModel.Offline
-        ) {
-
-            // 暂停录制
-            icon = "Stop";
-            handel = () => {
-                this.props.status?.actuator.endRecord();
-                console.log("ClipRecorder: Rec end...");
-            };
-        }
-
-        // 正常控制主时钟
-        else {
-            icon = this.props.status?.actuator.start() ? "Pause" : "Play";
-            handel = () => this.props.status?.actuator.start(
-                !this.props.status?.actuator.start()
-            );
-        }
-
-        return <CommandButton
-            iconName={icon}
-            i18NKey="Command.Bar.Play.Info"
-            click={handel}
-        />;
-    }
-
     public render(): ReactNode {
 
         const mouseMod = this.props.status?.mouseMod ?? MouseMod.Drag;
@@ -130,73 +68,78 @@ class CommandBar extends Component<IMixinSettingProps & IMixinStatusProps, IComm
                     }}
                 />
 
-                <CommandButton
+                {getRenderButton({
-                    iconName="Save"
+                    iconName: "Save",
-                    i18NKey="Command.Bar.Save.Info"
+                    i18NKey: "Command.Bar.Save.Info",
-                    isLoading={this.state.isSaveRunning}
+                    click: () => {
-                    click={() => {
                         this.setState({
                             isSaveRunning: true
                         });
-                    }}
+                    }
-                />
+                })}
 
-                {this.renderPlayActionButton()}
+                {getRenderButton({
+                    iconName: this.props.status?.actuator.start() ? "Pause" : "Play",
+                    i18NKey: "Command.Bar.Play.Info",
+                    click: () => this.props.status ? this.props.status.actuator.start(
+                        !this.props.status.actuator.start()
+                    ) : undefined
+                })}
 
-                <CommandButton
+                {getRenderButton({
-                    iconName="HandsFree"
+                    iconName: "HandsFree", i18NKey: "Command.Bar.Drag.Info", 
-                    i18NKey="Command.Bar.Drag.Info"
+                    active: mouseMod === MouseMod.Drag,
-                    active={mouseMod === MouseMod.Drag}
+                    click: () => this.props.status ? this.props.status.setMouseMod(MouseMod.Drag) : undefined
-                    click={() => this.props.status ? this.props.status.setMouseMod(MouseMod.Drag) : undefined}
+                })}
-                />
 
-                <CommandButton
+                {getRenderButton({
-                    iconName="TouchPointer"
+                    iconName: "TouchPointer", i18NKey: "Command.Bar.Select.Info",
-                    i18NKey="Command.Bar.Select.Info"
+                    active: mouseMod === MouseMod.click,
-                    active={mouseMod === MouseMod.click}
+                    click: () => this.props.status ? this.props.status.setMouseMod(MouseMod.click) : undefined
-                    click={() => this.props.status ? this.props.status.setMouseMod(MouseMod.click) : undefined}
+                })}
-                />
 
-                <CommandButton
+                {getRenderButton({
-                    iconName="WebAppBuilderFragmentCreate"
+                    iconName: "WebAppBuilderFragment",
-                    i18NKey="Command.Bar.Add.Group.Info"
+                    i18NKey: "Command.Bar.Add.Group.Info",
-                    click={() => {
+                    click: () => {
                         this.props.status ? this.props.status.newGroup() : undefined;
-                    }}
+                    }
-                />
+                })}
 
-                <CommandButton
+                {getRenderButton({
-                    iconName="ProductVariant"
+                    iconName: "CubeShape",
-                    i18NKey="Command.Bar.Add.Range.Info"
+                    i18NKey: "Command.Bar.Add.Range.Info",
-                    click={() => {
+                    click: () => {
                         this.props.status ? this.props.status.newRange() : undefined;
-                    }}
+                    }
-                />
+                })}
 
-                <CommandButton
+                {getRenderButton({
-                    iconName="Running"
+                    iconName: "Running",
-                    i18NKey="Command.Bar.Add.Behavior.Info"
+                    i18NKey: "Command.Bar.Add.Behavior.Info",
-                    click={() => {
+                    click: () => {
                         this.props.status?.popup.showPopup(BehaviorPopup, {});
-                    }}
+                    }
-                />
+                })}
 
-                <CommandButton
+                {getRenderButton({
-                    iconName="Tag"
+                    iconName: "Tag",
-                    i18NKey="Command.Bar.Add.Tag.Info"
+                    i18NKey: "Command.Bar.Add.Tag.Info",
-                    click={() => {
+                    click: () => {
                         this.props.status ? this.props.status.newLabel() : undefined;
-                    }}
+                    }
-                />
+                })}
+
+                {/* {getRenderButton({ iconName: "Camera", i18NKey: "Command.Bar.Camera.Info" })} */}
             </div>
             <div>
-                <CommandButton
+                {/* {getRenderButton({
-                    iconName="Settings"
+                    iconName: "Settings",
-                    i18NKey="Command.Bar.Setting.Info"
+                    i18NKey: "Command.Bar.Setting.Info",
-                    click={() => {
+                    click: () => {
                         this.props.status?.popup.showPopup(SettingPopup, {});
-                    }}
+                    }
-                />
+                })} */}
             </div>
         </Theme>
     }

source/Component/ConfirmPopup/ConfirmPopup.tsx

@@ -9,7 +9,6 @@ interface IConfirmPopupProps {
 	titleI18N?: AllI18nKeys;
 	titleI18NOption?: Record<string, string>;
 	infoI18n?: AllI18nKeys;
-	infoI18nOption?: Record<string, string>;
 	yesI18n?: AllI18nKeys;
 	noI18n?: AllI18nKeys;
     renderInfo?: () => ReactNode;
@@ -65,10 +64,8 @@ class ConfirmPopup extends Popup<IConfirmPopupProps> {
                 this.props.renderInfo ?
                     this.props.renderInfo() :
                         this.props.infoI18n ?
-                            <Message
+                            <Message i18nKey={this.props.infoI18n}/> :
-								i18nKey={this.props.infoI18n}
+                            null
-								options={this.props.infoI18nOption}
-							/> : null
             }
 		</ConfirmContent>
 	}

source/Component/LoadFile/LoadFile.scss

@@ -1,60 +1,38 @@
 @import "../Theme/Theme.scss";
 
-div.load-file-app-root {
-	width: 100%;
-	height: 100%;
-}
-
 div.load-file-layer-root {
 	position: fixed;
 	z-index: 1000;
 	width: 100%;
 	height: 100%;
-	pointer-events: none;
+	display: flex;
-	box-sizing: border-box;
+	align-content: center;
-	padding: 20px;
+	justify-content: center;
+	align-items: center;
+	flex-wrap: wrap;
 
-	div.load-file-layer {
+	div {
+		user-select: none;
+		text-align: center;
 		width: 100%;
-		height: 100%;
+	}
-		display: flex;
-		align-content: center;
-		justify-content: center;
-		align-items: center;
-		flex-wrap: wrap;
-		border-radius: 3px;
 
-		div {
+	div.drag-icon {
-			user-select: none;
+		font-weight: 200;
-			text-align: center;
+		font-size: 2.8em;
-			width: 100%;
+	}
-		}
 
-		div.drag-icon {
+	div.drag-title {
-			font-weight: 200;
+		margin-top: 5px;
-			font-size: 2.8em;
+		margin-bottom: 5px;
-		}
+		font-size: 1.5em;
-
-		div.drag-title {
-			margin-top: 5px;
-			margin-bottom: 5px;
-			font-size: 1.5em;
-		}
 	}
 }
 
 div.load-file-layer-root.light {
-	background-color: rgba($color: #FFFFFF, $alpha: .6);
+	background-color: rgba($color: #FFFFFF, $alpha: .75);
-
-	div.load-file-layer {
-		border: 2px dashed $lt-font-color-normal-light;
-	}
 }
 
 div.load-file-layer-root.dark {
-	background-color: rgba($color: #000000, $alpha: .6);
+	background-color: rgba($color: #000000, $alpha: .75);
-
-	div.load-file-layer {
-		border: 2px dashed $lt-font-color-normal-dark;
-	}
 }

source/Component/LoadFile/LoadFile.tsx

@@ -1,20 +1,16 @@
-import { ConfirmPopup } from "@Component/ConfirmPopup/ConfirmPopup";
 import { Localization } from "@Component/Localization/Localization";
 import { FontLevel, Theme } from "@Component/Theme/Theme";
-import { Status, useStatus, IMixinStatusProps } from "@Context/Status";
 import { Icon } from "@fluentui/react";
-import { FunctionComponent } from "react";
+import { Component, ReactNode } from "react";
-import { useDrop } from 'react-dnd'
-import { NativeTypes } from "react-dnd-html5-backend"
 import "./LoadFile.scss";
 
-const DragFileMask: FunctionComponent = () => {
+class LoadFile extends Component {
 
-	return <Theme
+	private renderMask() {
-		className="load-file-layer-root"
+		return <Theme
-		fontLevel={FontLevel.normal}
+			className="load-file-layer-root"
-	>
+			fontLevel={FontLevel.normal}
-		<div className="load-file-layer">
+		>
 			<div className="drag-icon">
 				<Icon iconName="KnowledgeArticle"/>
 			</div>
@@ -24,119 +20,12 @@ const DragFileMask: FunctionComponent = () => {
 			<div className="drag-intro">
 				<Localization i18nKey="Info.Hint.Load.File.Intro"/>
 			</div>
-		</div>
+		</Theme>;
-	</Theme>; 
+	}
+
+	public render(): ReactNode {
+		return <></>;
+	}
 }
 
-async function fileChecker(status: Status, file?: File) {
-
-	if (!status) return undefined;
-
-	return new Promise((r, j) => {
-		
-		// 检查文件存在性
-		if (!file) {
-			status.popup.showPopup(ConfirmPopup, {
-				infoI18n: "Popup.Load.Save.Error.Empty",
-				titleI18N: "Popup.Load.Save.Title",
-				yesI18n: "Popup.Load.Save.confirm"
-			});
-			return j();
-		}
-
-		// 检测拓展名
-		let extendName = (file.name.match(/\.(\w+)$/) ?? [])[1];
-		if (extendName !== "ltss") {
-			status.popup.showPopup(ConfirmPopup, {
-				infoI18n: "Popup.Load.Save.Error.Type",
-				infoI18nOption: { ext: extendName },
-				titleI18N: "Popup.Load.Save.Title",
-				yesI18n: "Popup.Load.Save.confirm"
-			});
-			return j();
-		}
-
-		// 文件读取
-		let fileReader = new FileReader();
-		fileReader.readAsText(file);
-		fileReader.onload = () => {
-
-			const loadFunc = () => {
-
-				// 进行转换
-				let errorMessage = status.archive.load(status.model, fileReader.result as string, file.name, file.path);
-				if (errorMessage) {
-					status.popup.showPopup(ConfirmPopup, {
-						infoI18n: "Popup.Load.Save.Error.Parse",
-						infoI18nOption: { why: errorMessage },
-						titleI18N: "Popup.Load.Save.Title",
-						yesI18n: "Popup.Load.Save.confirm"
-					});
-					j();
-				} 
-
-				else {
-					r(undefined);
-				}
-			}
-
-			// 如果保存进行提示
-			if (!status.archive.isSaved) {
-				status.popup.showPopup(ConfirmPopup, {
-					infoI18n: "Popup.Load.Save.Overwrite.Info",
-					titleI18N: "Popup.Load.Save.Title",
-					yesI18n: "Popup.Load.Save.Overwrite",
-					noI18n: "Popup.Action.No",
-					red: "yes",
-					yes: () => {
-						loadFunc();
-					},
-					no: () => {
-						j();
-					}
-				});
-			}
-
-			else {
-				loadFunc();
-			}			
-		}
-		fileReader.onerror = () => {
-			status.popup.showPopup(ConfirmPopup, {
-				infoI18n: "Popup.Load.Save.Error.Parse",
-				infoI18nOption: { why: "Unknown error" },
-				titleI18N: "Popup.Load.Save.Title",
-				yesI18n: "Popup.Load.Save.confirm"
-			});
-			j();
-		}
-	});
-}
-
-const LoadFileView: FunctionComponent<IMixinStatusProps> = (props) => {
-
-	const [{ isOver }, drop] = useDrop(() => ({
-		accept: NativeTypes.FILE,
-		drop: (item: { files: File[] }) => {
-			if (props.status) {
-				fileChecker(props.status, item.files[0]).catch((e) => undefined);
-			}
-		},
-		collect: (monitor) => ({
-			isOver: monitor.isOver()
-		})
-	}));
-
-	return <>
-		{
-			isOver ? <DragFileMask/> : null
-		}
-		<div className="load-file-app-root" ref={drop}>
-			{props.children}
-		</div>
-	</>
-}
-
-const LoadFile = useStatus(LoadFileView);
-
 export { LoadFile };

source/Component/OfflineRender/OfflineRender.scss

@@ -1,8 +0,0 @@
-@import "../Theme/Theme.scss";
-
-div.offline-render-popup {
-	width: 100%;
-	height: 100%;
-	box-sizing: border-box;
-	padding: 10px;
-}

source/Component/OfflineRender/OfflineRender.tsx

@@ -1,124 +0,0 @@
-import { Component, ReactNode } from "react";
-import { Popup } from "@Context/Popups";
-import { useStatusWithEvent, IMixinStatusProps } from "@Context/Status";
-import { Localization } from "@Component/Localization/Localization";
-import { AttrInput } from "@Input/AttrInput/AttrInput";
-import { Message } from "@Input/Message/Message";
-import { ConfirmContent } from "@Component/ConfirmPopup/ConfirmPopup";
-import { ProcessPopup } from "@Component/ProcessPopup/ProcessPopup";
-import { Emitter } from "@Model/Emitter";
-import "./OfflineRender.scss";
-
-interface IOfflineRenderProps {
-	close?: () => any;
-}
-
-interface IOfflineRenderState {
-	time: number;
-	fps: number;
-	name: string;
-}
-
-class OfflineRender extends Popup<IOfflineRenderProps> {
-
-	public minWidth: number = 250;
-	public minHeight: number = 150;
-	public width: number = 400;
-	public height: number = 300;
-
-	public maskForSelf: boolean = true;
-
-	public onRenderHeader(): ReactNode {
-		return <Localization i18nKey="Popup.Offline.Render.Title"/>
-	}
-
-	public render(): ReactNode {
-		return <OfflineRenderComponent {...this.props} close={() => {
-			this.close();
-		}}/>
-	}
-}
-
-@useStatusWithEvent()
-class OfflineRenderComponent extends Component<IOfflineRenderProps & IMixinStatusProps, IOfflineRenderState> {
-
-	public constructor(props: IOfflineRenderProps & IMixinStatusProps) {
-		super(props);
-		this.state = {
-			name: this.props.status?.getNewClipName() ?? "",
-			time: 10,
-			fps: 60
-		}
-	}
-
-	public render(): ReactNode {
-		return <ConfirmContent
-			className="offline-render-popup"
-			actions={[{
-				i18nKey: "Popup.Offline.Render.Input.Start",
-				onClick: () => {
-
-					// 获取新实例
-					let newClip = this.props.status?.newClip();
-
-					if (newClip) {
-						newClip.name = this.state.name;
-						this.props.status?.actuator.offlineRender(newClip, this.state.time, this.state.fps);
-
-						// 开启进度条弹窗
-						this.props.status?.popup.showPopup(ProcessPopup, {});
-					}
-
-					// 关闭这个弹窗
-					this.props.close && this.props.close();
-				}
-			}]}
-		>
-
-			<Message i18nKey="Popup.Offline.Render.Message" isTitle first/>
-
-			<AttrInput
-                id={"Render-Name"}
-				value={this.state.name}
-				keyI18n="Popup.Offline.Render.Input.Name"
-				maxLength={15}
-                valueChange={(val) => {
-                    this.setState({
-						name: val
-					});
-                }}
-            />
-
-			<AttrInput
-				isNumber
-                id={"Render-Time"}
-				value={this.state.time}
-				keyI18n="Popup.Offline.Render.Input.Time"
-				max={3600}
-				min={1}
-                valueChange={(val) => {
-                    this.setState({
-						time: parseFloat(val)
-					});
-                }}
-            />
-
-			<AttrInput
-				isNumber
-                id={"Render-FPS"}
-				max={1000}
-				min={1}
-				value={this.state.fps}
-				keyI18n="Popup.Offline.Render.Input.Fps"
-                valueChange={(val) => {
-                    this.setState({
-						fps: parseFloat(val)
-					});
-                }}
-            />
-
-		</ConfirmContent>
-	}
-}
-
-export { OfflineRender };

source/Component/ProcessPopup/ProcessPopup.scss

@@ -1,42 +0,0 @@
-@import "../Theme/Theme.scss";
-
-div.process-popup {
-	width: 100%;
-	height: 100%;
-	box-sizing: border-box;
-	padding: 10px;
-
-	div.ms-ProgressIndicator {
-		transform: none;
-
-		div.ms-ProgressIndicator-progressTrack {
-			transform: none;
-		}
-	
-		div.ms-ProgressIndicator-progressBar {
-			transform: none;
-		}
-	}
-}
-
-div.confirm-root.dark div.ms-ProgressIndicator {
-
-	div.ms-ProgressIndicator-progressTrack {
-		background-color: $lt-bg-color-lvl3-dark;
-	}
-
-	div.ms-ProgressIndicator-progressBar {
-		background-color: $lt-font-color-normal-dark;
-	}
-}
-
-div.confirm-root.light div.ms-ProgressIndicator {
-
-	div.ms-ProgressIndicator-progressTrack {
-		background-color: $lt-bg-color-lvl3-light;
-	}
-
-	div.ms-ProgressIndicator-progressBar {
-		background-color: $lt-font-color-normal-light;
-	}
-}

source/Component/ProcessPopup/ProcessPopup.tsx

@@ -1,89 +0,0 @@
-import { Component, ReactNode } from "react";
-import { Popup } from "@Context/Popups";
-import { Localization } from "@Component/Localization/Localization";
-import { ConfirmContent } from "@Component/ConfirmPopup/ConfirmPopup";
-import { useStatusWithEvent, IMixinStatusProps } from "@Context/Status";
-import { ProgressIndicator } from "@fluentui/react";
-import { ActuatorModel } from "@Model/Actuator";
-import "./ProcessPopup.scss";
-
-interface IProcessPopupProps {
-	close?: () => void;
-}
-
-class ProcessPopup extends Popup<IProcessPopupProps> {
-
-	public minWidth: number = 400;
-	public minHeight: number = 150;
-	public width: number = 400;
-	public height: number = 150;
-
-	public maskForSelf: boolean = true;
-
-	public onClose(): void {}
-
-	public onRenderHeader(): ReactNode {
-		return <Localization i18nKey="Popup.Offline.Render.Process.Title"/>
-	}
-
-	public render(): ReactNode {
-		return <ProcessPopupComponent {...this.props} close={() => this.close()}/>
-	}
-}
-
-@useStatusWithEvent("offlineLoop", "actuatorStartChange", "recordLoop")
-class ProcessPopupComponent extends Component<IProcessPopupProps & IMixinStatusProps> {
-
-	public render(): ReactNode {
-
-		let current = this.props.status?.actuator.offlineCurrentFrame ?? 0;
-		let all = this.props.status?.actuator.offlineAllFrame ?? 0;
-
-		const isRendering = this.props.status?.actuator.mod === ActuatorModel.Offline;
-		let i18nKey = "";
-		let color: undefined | "red";
-		let onClick = () => {};
-
-		if (isRendering) {
-			i18nKey = "Popup.Offline.Render.Input.End";
-			color = "red";
-			onClick = () => {
-				this.props.status?.actuator.endOfflineRender();
-				this.forceUpdate();
-			}
-		}
-
-		else {
-			i18nKey = "Popup.Offline.Render.Input.Finished";
-			onClick = () => {
-				this.props.close && this.props.close();
-			}
-		}
-
-		return <ConfirmContent
-			className="process-popup"
-			actions={[{
-				i18nKey: i18nKey,
-				color: color,
-				onClick: onClick
-			}]}
-		>
-
-			<ProgressIndicator
-				percentComplete={current / all}
-				barHeight={3}
-			/>
-
-			<Localization
-				i18nKey="Popup.Offline.Render.Process"
-				options={{
-					current: current.toString(),
-					all: all.toString()
-				}}
-			/>
-
-		</ConfirmContent>
-	}
-}
-
-export { ProcessPopup };

source/Component/Recorder/Recorder.scss

@@ -1,160 +0,0 @@
-@import "../Theme/Theme.scss";
-
-div.recorder-root {
-	width: 100%;
-	box-sizing: border-box;
-	padding: 10px 10px 0 10px;
-
-	div.recorder-slider {
-		width: 100%;
-		transition: none;
-
-		div.ms-Slider-slideBox {
-			height: 16px;
-			transition: none;
-		}
-
-		span.ms-Slider-thumb {
-			width: 12px;
-			height: 12px;
-			line-height: 16px;
-			border-width: 3px;
-			transition: none;
-			top: -4px;
-		}
-
-		span.ms-Slider-active {
-			height: 3px;
-			transition: none;
-		}
-		
-		span.ms-Slider-inactive {
-			height: 3px;
-			transition: none;
-		}
-	}
-
-	div.recorder-slider.disable {
-		opacity: .6;
-	}
-
-	div.recorder-content {
-		width: 100%;
-		height: 32px;
-		display: flex;
-		justify-content: space-between;
-		align-items: center;
-		box-sizing: border-box;
-		padding: 0 8px;
-
-		div.time-view {
-			flex-shrink: 1;
-			width: 50%;
-			text-align: left;
-			white-space: nowrap;
-			overflow: hidden;
-			text-overflow: ellipsis;
-		}
-
-		div.ctrl-button {
-			cursor: pointer;
-			user-select: none;
-			width: 96px;
-			flex-shrink: 0;
-			text-align: center;
-			display: flex;
-			justify-content: center;
-			align-items: center;
-
-			div.ctrl-action {
-				width: 32px;
-				height: 32px;
-				display: flex;
-				justify-content: center;
-				align-items: center;
-			}
-
-			div.ctrl-action-main {
-				font-size: 1.5em;
-			}
-
-			div.ctrl-action.disable {
-				cursor: not-allowed;
-				opacity: .6;
-			}
-		}
-
-		div.speed-view {
-			flex-shrink: 1;
-			width: 50%;
-			text-align: right;
-			white-space: nowrap;
-			overflow: hidden;
-			text-overflow: ellipsis;
-		}
-	}
-}
-
-div.recorder-root.light {
-
-	div.recorder-slider {
-
-		span.ms-Slider-thumb {
-			background-color: $lt-bg-color-lvl1-light;
-			border-color: $lt-font-color-normal-light;
-		}
-
-		span.ms-Slider-active {
-			background-color: $lt-font-color-normal-light;
-		}
-		
-		span.ms-Slider-inactive {
-			background-color: $lt-bg-color-lvl1-light;
-		}
-	}
-
-	div.recorder-content {
-
-		div.ctrl-button div.ctrl-action:hover {
-			background-color: $lt-bg-color-lvl3-light;
-			color: $lt-font-color-lvl1-light;
-		}
-
-		div.ctrl-button div.ctrl-action.disable:hover {
-			background-color: $lt-bg-color-lvl4-light;
-			color: $lt-font-color-normal-light;
-		}
-	}
-}
-
-div.recorder-root.dark {
-	
-	div.recorder-slider {
-
-		span.ms-Slider-thumb {
-			background-color: $lt-bg-color-lvl1-dark;
-			border-color: $lt-font-color-normal-dark;
-		}
-
-		span.ms-Slider-active {
-			background-color: $lt-font-color-normal-dark;
-		}
-		
-		span.ms-Slider-inactive {
-			background-color: $lt-bg-color-lvl1-dark;
-		}
-	}
-
-	div.recorder-content {
-
-		div.ctrl-button div.ctrl-action:hover {
-			background-color: $lt-bg-color-lvl3-dark;
-			color: $lt-font-color-lvl1-dark;
-		}
-
-		div.ctrl-button div.ctrl-action.disable:hover {
-			background-color: $lt-bg-color-lvl4-dark;
-			color: $lt-font-color-normal-dark;
-		}
-	}
-}

source/Component/Recorder/Recorder.tsx

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

source/Component/SettingPopup/SettingPopup.scss

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

source/Component/SettingPopup/SettingPopup.tsx

@@ -2,11 +2,8 @@ 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 {
 
 }
@@ -27,42 +24,10 @@ class SettingPopup extends Popup<ISettingPopupProps> {
 	}
 }
 
-@useSettingWithEvent("themes", "language")
+class SettingPopupComponent extends Component<ISettingPopupProps> {
-class SettingPopupComponent extends Component<ISettingPopupProps & IMixinSettingProps> {
 
 	public render(): ReactNode {
-		return <Theme className="setting-popup">
+		return <Theme className="setting-popup"></Theme>
-
-			<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/Archive.tsx

@@ -1,9 +1,8 @@
 import { FunctionComponent, useEffect } from "react";
+import * as download from "downloadjs";
 import { useSetting, IMixinSettingProps, Platform } from "@Context/Setting";
 import { useStatus, IMixinStatusProps } from "@Context/Status";
-import { useElectron, IMixinElectronProps } from "@Context/Electron";
 import { I18N } from "@Component/Localization/Localization";
-import * as download from "downloadjs";
 
 interface IFileInfo {
 	fileName: string;
@@ -22,7 +21,7 @@ interface ICallBackProps {
 	then: () => any;
 }
 
-const ArchiveSaveDownloadView: FunctionComponent<IFileInfo & ICallBackProps> = function ArchiveSaveDownloadView(props) {
+const ArchiveSaveDownloadView: FunctionComponent<IFileInfo & ICallBackProps> = function ArchiveSave(props) {
 
 	const runner = async () => {
 		const file = await props.fileData();
@@ -39,47 +38,6 @@ const ArchiveSaveDownloadView: FunctionComponent<IFileInfo & ICallBackProps> = f
 
 const ArchiveSaveDownload = ArchiveSaveDownloadView;
 
-const ArchiveSaveFsView: FunctionComponent<IFileInfo & ICallBackProps & IMixinElectronProps & IMixinSettingProps & IMixinStatusProps> =
-function ArchiveSaveFsView(props) {
-
-	const runner = async () => {
-		const file = await props.fileData();
-		setTimeout(() => {
-			if (props.electron) {
-				props.electron.fileSave(
-					file,
-					I18N(props, "Popup.Load.Save.Select.File.Name"),
-					I18N(props, "Popup.Load.Save.Select.Path.Title"),
-					I18N(props, "Popup.Load.Save.Select.Path.Button"),
-					props.fileUrl
-				);
-			}
-		}, 100);
-	}
-
-	const saveEvent = ({name, url, success} : {name: string, url: string, success: boolean}) => {
-		if (success && props.status) {
-			props.status.archive.fileUrl = url;
-			props.status.archive.fileName = name;
-			props.status.archive.isNewFile = false;
-			props.status.archive.emit("fileSave", props.status.archive);
-		}
-		props.then();
-	}
-
-	useEffect(() => {
-		runner();
-		props.electron?.on("fileSave", saveEvent);
-		return () => {
-			props.electron?.off("fileSave", saveEvent);
-		};
-	}, []);
-
-	return <></>;
-}
-
-const ArchiveSaveFs = useSetting(useElectron(useStatus(ArchiveSaveFsView)));
-
 /**
  * 保存存档文件
  */
@@ -123,7 +81,7 @@ const ArchiveSaveView: FunctionComponent<IMixinSettingProps & IMixinStatusProps
 		{
 			props.setting?.platform === Platform.web ? 
 				<ArchiveSaveDownload {...fileData} then={callBack}/> :
-				<ArchiveSaveFs {...fileData} then={callBack}/>
+				<></>
 		}
 	</>
 }

source/Context/Electron.ts

@@ -1,5 +1,4 @@
 import { createContext } from "react";
-import { Emitter } from "@Model/Emitter";
 import { superConnect, superConnectWithEvent } from "@Context/Context";
 import { ISimulatorAPI, IApiEmitterEvent } from "@Electron/SimulatorAPI";
 
@@ -7,25 +6,6 @@ interface IMixinElectronProps {
     electron?: ISimulatorAPI;
 }
 
-const getElectronAPI: () => ISimulatorAPI = () => {
-    const API = (window as any).API;
-    const mapperEmitter = new Emitter();
-    const ClassElectron: new () => ISimulatorAPI = function (this: Record<string, any>) {
-        this.resetAll = () => mapperEmitter.resetAll();
-        this.reset = (type: string) => mapperEmitter.reset(type);
-        this.on = (type: string, handel: any) => mapperEmitter.on(type, handel);
-        this.off = (type: string, handel: any) => mapperEmitter.off(type, handel);
-        this.emit = (type: string, data: any) => mapperEmitter.emit(type, data);
-    } as any;
-    ClassElectron.prototype = API;
-
-    // Emitter Mapper
-    API.mapEmit((...p: any) => {
-        mapperEmitter.emit(...p);
-    });
-    return new ClassElectron();
-}
-
 const ElectronContext = createContext<ISimulatorAPI>((window as any).API ?? {} as ISimulatorAPI);
 
 ElectronContext.displayName = "Electron";
@@ -39,4 +19,4 @@ const useElectron = superConnect<ISimulatorAPI>(ElectronConsumer, "electron");
 
 const useElectronWithEvent = superConnectWithEvent<ISimulatorAPI, IApiEmitterEvent>(ElectronConsumer, "electron");
 
-export { useElectron, ElectronProvider, IMixinElectronProps, ISimulatorAPI, useElectronWithEvent, getElectronAPI };
+export { useElectron, ElectronProvider, IMixinElectronProps, ISimulatorAPI, useElectronWithEvent };

source/Context/Setting.tsx

@@ -37,7 +37,7 @@ class Setting extends Emitter<ISettingEvents> {
     /**
      * 语言
      */
-    public language: Language = "EN_US";
+    public language: Language = "ZH_CN";
 
     /**
      * 布局

source/Context/Status.tsx

@@ -14,7 +14,6 @@ import { PopupController } from "@Context/Popups";
 import { Behavior } from "@Model/Behavior";
 import { IParameter, IParamValue } from "@Model/Parameter";
 import { Actuator } from "@Model/Actuator";
-import { Clip } from "@Model/Clip";
 
 function randomColor(unNormal: boolean = false) {
     const color = [
@@ -36,24 +35,19 @@ interface IStatusEvent {
     fileChange: void;
     renderLoop: number;
     physicsLoop: number;
-    recordLoop: number;
-    offlineLoop: number;
     mouseModChange: void;
     focusObjectChange: void;
     focusLabelChange: void;
     focusBehaviorChange: void;
     objectChange: void;
-    focusClipChange: void;
     rangeLabelChange: void;
     groupLabelChange: void;
     groupBehaviorChange: void;
-    clipChange: void;
     labelChange: void;
     rangeAttrChange: void;
     labelAttrChange: void;
     groupAttrChange: void;
     behaviorAttrChange: void;
-    clipAttrChange: void;
     individualChange: void;
     behaviorChange: void;
     popupChange: void;
@@ -104,11 +98,6 @@ class Status extends Emitter<IStatusEvent> {
      */
     public focusBehavior?: Behavior;
 
-    /**
-     * 焦点行为
-     */
-    public focusClip?: Clip;
-
     private drawTimer?: NodeJS.Timeout;
 
     private delayDraw = () => {
@@ -130,14 +119,11 @@ 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.model.on("objectChange", () => this.emit("objectChange"));
         this.model.on("labelChange", () => this.emit("labelChange"));
         this.model.on("behaviorChange", () => this.emit("behaviorChange"));
-        this.model.on("clipChange", () => this.emit("clipChange"));
 
         // 弹窗事件
         this.popup.on("popupChange", () => this.emit("popupChange"));
@@ -174,13 +160,6 @@ 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");
@@ -198,13 +177,11 @@ 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"));
     }
 
@@ -238,16 +215,6 @@ class Status extends Emitter<IStatusEvent> {
         this.emit("focusBehaviorChange");
     }
 
-    /**
-     * 更新焦点行为
-     */
-    public setClipObject(clip?: Clip) {
-        if (this.focusClip !== clip) {
-            this.focusClip = clip;
-        }
-        this.emit("focusClipChange");
-    }
-
     /**
      * 修改范围属性
      */
@@ -291,18 +258,6 @@ 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) {
@@ -443,24 +398,6 @@ class Status extends Emitter<IStatusEvent> {
         return label;
     }
 
-    public getNewClipName() {
-        let searchKey = I18N(this.setting.language, "Object.List.New.Clip", { id: "" });
-        let nextIndex = 1;
-        this.model.clipPool.forEach((obj) => {
-            nextIndex = Math.max(nextIndex, this.getNextNumber(
-                obj.name, searchKey
-            ));
-        });
-        return I18N(this.setting.language, "Object.List.New.Clip", {
-            id: nextIndex.toString()
-        });
-    }
-
-    public newClip() {
-        const clip = this.model.addClip(this.getNewClipName());
-        return clip;
-    }
-
     public setMouseMod(mod: MouseMod) {
         this.mouseMod = mod;
         if (this.renderer instanceof ClassicRenderer) {

source/Electron/Electron.ts

@@ -1,7 +1,6 @@
-import { app, BrowserWindow, ipcMain, dialog } from "electron";
+import { app, BrowserWindow, ipcMain } from "electron";
 import { Service } from "@Service/Service";
 import { join as pathJoin } from "path";
-import { writeFile } from "fs";
 const ENV = process.env ?? {};
 
 class ElectronApp {
@@ -29,38 +28,12 @@ class ElectronApp {
 		);
 	}
 
-	public loadingPage?: BrowserWindow;
 	public simulatorWindow?: BrowserWindow;
 
-	public async showLoadingPage() {
-		return new Promise((r) => {
-
-			this.loadingPage = new BrowserWindow({
-				width: 603,
-				height: 432,
-				fullscreenable: false,
-				skipTaskbar: true,
-				resizable: false,
-				titleBarStyle: 'hidden',
-				frame: false,
-				show: false
-			});
-
-			this.loadingPage.loadFile(ENV.LIVING_TOGETHER_LOADING_PAGE ?? "./LoadingPage.html");
-
-			this.loadingPage.on("ready-to-show", () => {
-				this.loadingPage?.show();
-				r(undefined);
-			});
-		});
-	}
-
 	public async runMainThread() {
 
 		await app.whenReady();
 
-		await this.showLoadingPage();
-
 		await this.runService();
 
 		let preload = pathJoin(__dirname, "./SimulatorWindow.js");
@@ -76,21 +49,12 @@ class ElectronApp {
 			frame: false,
 			minWidth: 460,
 			minHeight: 300,
-			webPreferences: { preload },
+			webPreferences: { preload }
-			show: false,
 		});
 
 		this.simulatorWindow.loadURL(this.serviceUrl + (ENV.LIVING_TOGETHER_WEB_PATH ?? "/resources/app.asar/"));
 
-		this.simulatorWindow.on("ready-to-show", () => {
-			setTimeout(() => {
-				this.loadingPage?.close();
-				this.simulatorWindow?.show();
-			}, 1220);
-		});
-
 		this.handelSimulatorWindowBehavior();
-		this.handelFileChange();
 
 		app.on('window-all-closed', function () {
 			if (process.platform !== 'darwin') app.quit()
@@ -126,56 +90,6 @@ class ElectronApp {
 		this.simulatorWindow?.on("maximize", sendWindowsChangeMessage);
 		this.simulatorWindow?.on("unmaximize", sendWindowsChangeMessage);
 	}
-
-	private handelFileChange() {
-
-		// 文件保存
-		const saveFile = async (path: string, text: string) => {
-			return new Promise((r) => {
-				writeFile(path ?? "", text, {}, (e) => {
-					this.simulatorWindow?.webContents.send(
-						"windows.EndFileSave",
-						(path.match(/.+(\/|\\)(.+)$/) ?? [])[2],
-						path, !e
-					);
-					r(undefined);
-				});
-			})
-		};
-
-		// 处理文件保存事件
-		ipcMain.on("windows.fileSave",
-			(_, text: string, name: string, title: string, button: string, url?: string) => {
-
-				// 如果没有路径，询问新的路径
-				if (url) {
-					saveFile(url, text);
-				}
-
-				// 询问保存位置
-				else {
-					dialog.showSaveDialog(this.simulatorWindow!, {
-						title: title,
-						buttonLabel: button,
-						filters: [
-							{ name: name, extensions: ["ltss"] }
-						]
-					}).then(res => {
-
-						// 用户选择后继续保存
-						if (!res.canceled && res.filePath) {
-							saveFile(res.filePath, text);
-						} else {
-							this.simulatorWindow?.webContents.send(
-								"windows.EndFileSave",
-								undefined, undefined, false
-							);
-						}
-					});
-				}
-			}
-		);
-	}
 }
 
 new ElectronApp().runMainThread();

source/Electron/SimulatorAPI.ts

@@ -2,7 +2,6 @@ import { Emitter } from "@Model/Emitter";
 
 type IApiEmitterEvent = {
 	windowsSizeStateChange: void;
-	fileSave: {success: boolean, name: string, url: string};
 }
 
 interface ISimulatorAPI extends Emitter<IApiEmitterEvent> {
@@ -31,11 +30,6 @@ interface ISimulatorAPI extends Emitter<IApiEmitterEvent> {
 	 * 是否处于最大化状态
 	 */
 	minimize: () => void;
-
-	/**
-	 * 存档
-	 */
-	fileSave: (text: string, name: string, title: string, button: string, url?: string) => void;
 }
 
 export { ISimulatorAPI, IApiEmitterEvent }

source/Electron/SimulatorWindow.ts

@@ -1,11 +1,23 @@
 import { contextBridge, ipcRenderer } from "electron";
-import { ISimulatorAPI } from "@Electron/SimulatorAPI";
+import { ISimulatorAPI } from "@Electron/SimulatorAPI"
 
-const emitterMap: { fn?: Function } = { fn: undefined };
+const emitterMap: Array<[key: string, value: Function[]]> = [];
+const queryEmitter = (key: string) => {
+	let res: (typeof emitterMap)[0] | undefined;
+	emitterMap.forEach((item) => {
+		if (item[0] === key) res = item;
+	});
 
-const emit = (type: string, evt?: any) => {
+	if (res) {
-	if (emitterMap.fn) {
+		if (Array.isArray(res[1])) return res[1];
-		emitterMap.fn(type, evt);
+		res[1] = [];
+		return res[1];
+	}
+
+	else {
+		res = [key, []];
+		emitterMap.push(res);
+		return res[1];
 	}
 }
 
@@ -31,19 +43,22 @@ const API: ISimulatorAPI = {
 		ipcRenderer.send("windows.minimize");
 	},
 
-	fileSave(text: string, name: string, title: string, button: string, url?: string) {
+	all: new Map() as any,
-		ipcRenderer.send("windows.fileSave", text, name, title, button, url);
-	},
 
-	mapEmit: (fn: Function) => { emitterMap.fn = fn },
+	resetAll: () => emitterMap.splice(0),
-} as any;
+	reset: (type) => queryEmitter(type).splice(0),
+	on: (type, handler) => queryEmitter(type).push(handler),
+	off: (type, handler) => {
+		const handlers = queryEmitter(type);
+		handlers.splice(handlers.indexOf(handler!) >>> 0, 1);
+	},
+	emit: ((type: string, evt: any) => {
+		queryEmitter(type).slice().map((handler: any) => { handler(evt) });
+	}) as any,
+}
 
 ipcRenderer.on("windows.windowsSizeStateChange", () => {
-	emit("windowsSizeStateChange");
+	API.emit("windowsSizeStateChange");
-});
-
-ipcRenderer.on("windows.EndFileSave", (_, name: string, url: string, success: boolean) => {
-	emit("fileSave", {name, url, success});
 });
 
 contextBridge.exposeInMainWorld("API", API);

source/Localization/EN-US.ts

@@ -1,10 +1,6 @@
 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})",
@@ -35,7 +31,6 @@ const EN_US = {
     "Object.List.New.Group": "Group object {id}",
     "Object.List.New.Range": "Range object {id}",
     "Object.List.New.Label": "Label {id}",
-    "Object.List.New.Clip": "Clip {id}",
     "Object.List.No.Data": "There are no objects in the model, click the button to create it",
     "Object.Picker.List.No.Data": "There is no model in the model for this option",
     "Behavior.Picker.Add.Button": "Click here to assign behavior to this group",
@@ -58,13 +53,6 @@ const EN_US = {
     "Panel.Info.Behavior.List.View": "Edit view behavior list",
     "Panel.Title.Behavior.Details.View": "Behavior",
     "Panel.Info.Behavior.Details.View": "Edit view Behavior attributes",
-    "Panel.Title.Behavior.Clip.Player": "Recording",
-    "Panel.Info.Behavior.Clip.Player": "Pre render recorded data",
-    "Panel.Title.Behavior.Clip.Details": "Clip",
-    "Panel.Info.Behavior.Clip.Details": "Edit view clip attributes",
-    "Panel.Info.Behavior.Clip.Time.Formate": "{current} / {all} / {fps}fps",
-    "Panel.Info.Behavior.Clip.Record.Formate": "Record: {time}",
-    "Panel.Info.Behavior.Clip.Uname.Clip": "Waiting for recording...",
     "Popup.Title.Unnamed": "Popup message",
     "Popup.Title.Confirm": "Confirm message",
     "Popup.Action.Yes": "Confirm",
@@ -75,29 +63,8 @@ const EN_US = {
     "Popup.Action.Objects.Confirm.Restore": "Restore",
     "Popup.Delete.Objects.Confirm": "Are you sure you want to delete this object(s)? The object is deleted and cannot be recalled.",
     "Popup.Delete.Behavior.Confirm": "Are you sure you want to delete this behavior? The behavior is deleted and cannot be recalled.",
-    "Popup.Delete.Clip.Confirm": "Are you sure you want to delete this clip? The clip cannot be restored after deletion.",
     "Popup.Restore.Behavior.Confirm": "Are you sure you want to reset all parameters of this behavior? This operation cannot be recalled.",
     "Popup.Setting.Title": "Preferences setting",
-    "Popup.Offline.Render.Title": "Offline rendering",
-    "Popup.Offline.Render.Process.Title": "Rendering progress",
-    "Popup.Offline.Render.Message": "Rendering Parameters",
-    "Popup.Offline.Render.Input.Name": "Clip name",
-    "Popup.Offline.Render.Input.Time": "Duration (s)",
-    "Popup.Offline.Render.Input.Fps": "FPS (f/s)",
-    "Popup.Offline.Render.Input.Start": "Start rendering",
-    "Popup.Offline.Render.Input.End": "Terminate rendering",
-    "Popup.Offline.Render.Input.Finished": "Finished",
-    "Popup.Offline.Render.Process": "Number of frames completed: {current} / {all}",
-    "Popup.Load.Save.Title": "Load save",
-    "Popup.Load.Save.confirm": "Got it",
-    "Popup.Load.Save.Overwrite": "Overwrite and continue",
-    "Popup.Load.Save.Overwrite.Info": "The current workspace will be overwritten after the archive is loaded, and all unsaved progress will be lost. Are you sure you want to continue?",
-    "Popup.Load.Save.Error.Empty": "File information acquisition error. The file has been lost or moved.",
-    "Popup.Load.Save.Error.Type": "The file with extension name \"{ext}\" cannot be loaded temporarily",
-    "Popup.Load.Save.Error.Parse": "Archive parsing error, detailed reason: \n{why}",
-    "Popup.Load.Save.Select.Path.Title": "Please select an archive location",
-    "Popup.Load.Save.Select.Path.Button": "Save",
-    "Popup.Load.Save.Select.File.Name": "Living Together Simulator Save",
     "Popup.Add.Behavior.Title": "Add behavior",
     "Popup.Add.Behavior.Action.Add": "Add all select behavior",
     "Popup.Add.Behavior.Select.Counter": "Selected {count} behavior",
@@ -166,8 +133,6 @@ const EN_US = {
     "Panel.Info.Behavior.Details.Parameter.Key.Vec.X": "{key} X",
     "Panel.Info.Behavior.Details.Parameter.Key.Vec.Y": "{key} Y",
     "Panel.Info.Behavior.Details.Parameter.Key.Vec.Z": "{key} Z",
-    "Panel.Info.Clip.List.Error.Nodata": "There is no clip, please click the record button to record, or click the plus sign to create",
-    "Panel.Info.Clip.Details.Error.Nodata": "Specify a clip to view an attribute",
     "Info.Hint.Save.After.Close": "Any unsaved progress will be lost. Are you sure you want to continue?",
     "Info.Hint.Load.File.Title": "Load save",
     "Info.Hint.Load.File.Intro": "Release to load the dragged save file",

source/Localization/ZH-CN.ts

@@ -1,10 +1,6 @@
 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})",
@@ -35,7 +31,6 @@ const ZH_CN = {
     "Object.List.New.Group": "群对象 {id}",
     "Object.List.New.Range": "范围对象 {id}",
     "Object.List.New.Label": "标签 {id}",
-    "Object.List.New.Clip": "剪辑片段 {id}",
     "Object.List.No.Data": "模型中没有任何对象，点击按钮以创建",
     "Object.Picker.List.No.Data": "模型中没有合适此选项的模型",
     "Behavior.Picker.Add.Button": "点击此处以赋予行为到此群",
@@ -58,13 +53,6 @@ const ZH_CN = {
     "Panel.Info.Behavior.List.View": "编辑查看行为列表",
     "Panel.Title.Behavior.Details.View": "行为",
     "Panel.Info.Behavior.Details.View": "编辑查看行为属性",
-    "Panel.Title.Behavior.Clip.Player": "录制",
-    "Panel.Info.Behavior.Clip.Player": "预渲染录制数据",
-    "Panel.Title.Behavior.Clip.Details": "剪辑",
-    "Panel.Info.Behavior.Clip.Details": "编辑查看剪辑片段属性",
-    "Panel.Info.Behavior.Clip.Time.Formate": "{current} / {all} / {fps} fps",
-    "Panel.Info.Behavior.Clip.Record.Formate": "录制: {time}",
-    "Panel.Info.Behavior.Clip.Uname.Clip": "等待录制...",
     "Popup.Title.Unnamed": "弹窗消息",
     "Popup.Title.Confirm": "确认消息",
     "Popup.Action.Yes": "确定",
@@ -75,29 +63,8 @@ const ZH_CN = {
     "Popup.Action.Objects.Confirm.Restore": "重置",
     "Popup.Delete.Objects.Confirm": "你确定要删除这个(些)对象吗？对象被删除将无法撤回。",
     "Popup.Delete.Behavior.Confirm": "你确定要删除这个行为吗？行为被删除将无法撤回。",
-    "Popup.Delete.Clip.Confirm": "你确定删除这个剪辑片段，剪辑片段删除后将无法恢复。",
     "Popup.Restore.Behavior.Confirm": "你确定要重置此行为的全部参数吗？此操作无法撤回。",
     "Popup.Setting.Title": "首选项设置",
-    "Popup.Offline.Render.Title": "离线渲染",
-    "Popup.Offline.Render.Process.Title": "渲染进度",
-    "Popup.Offline.Render.Message": "渲染参数",
-    "Popup.Offline.Render.Input.Name": "剪辑名称",
-    "Popup.Offline.Render.Input.Time": "时长 (s)",
-    "Popup.Offline.Render.Input.Fps": "帧率 (f/s)",
-    "Popup.Offline.Render.Input.Start": "开始渲染",
-    "Popup.Offline.Render.Input.End": "终止渲染",
-    "Popup.Offline.Render.Input.Finished": "完成",
-    "Popup.Offline.Render.Process": "完成帧数: {current} / {all}",
-    "Popup.Load.Save.Title": "加载存档",
-    "Popup.Load.Save.confirm": "我知道了",
-    "Popup.Load.Save.Overwrite": "覆盖并继续",
-    "Popup.Load.Save.Overwrite.Info": "存档加载后将覆盖当前工作区，未保存的进度将全部丢失，确定要继续吗?",
-    "Popup.Load.Save.Error.Empty": "文件信息获取错误，文件已丢失或已被移动",
-    "Popup.Load.Save.Error.Type": "暂时无法加载拓展名为 \"{ext}\" 的文件",
-    "Popup.Load.Save.Error.Parse": "存档解析错误，详细原因: \n{why}",
-    "Popup.Load.Save.Select.Path.Title": "请选择存档保存位置",
-    "Popup.Load.Save.Select.Path.Button": "保存",
-    "Popup.Load.Save.Select.File.Name": "群生共进存档",
     "Popup.Add.Behavior.Title": "添加行为",
     "Popup.Add.Behavior.Action.Add": "添加全部选中行为",
     "Popup.Add.Behavior.Select.Counter": "已选择 {count} 个行为",
@@ -166,8 +133,6 @@ const ZH_CN = {
     "Panel.Info.Behavior.Details.Parameter.Key.Vec.X": "{key} X 坐标",
     "Panel.Info.Behavior.Details.Parameter.Key.Vec.Y": "{key} Y 坐标",
     "Panel.Info.Behavior.Details.Parameter.Key.Vec.Z": "{key} Z 坐标",
-    "Panel.Info.Clip.List.Error.Nodata": "没有剪辑片段，请点击录制按钮录制，或者点击加号创建",
-    "Panel.Info.Clip.Details.Error.Nodata": "请指定一个剪辑片段以查看属性",
     "Info.Hint.Save.After.Close": "任何未保存的进度都会丢失, 确定要继续吗?",
     "Info.Hint.Load.File.Title": "加载存档",
     "Info.Hint.Load.File.Intro": "释放以加载拽入的存档",

source/Model/Actuator.ts

@@ -1,19 +1,9 @@
 import { Model } from "@Model/Model";
 import { Emitter } from "@Model/Emitter";
-import { Clip, IFrame } from "@Model/Clip";
-
-enum ActuatorModel {
-	Play = 1,
-	Record = 2,
-	View = 3,
-	Offline = 4
-}
 
 interface IActuatorEvent {
 	startChange: boolean;
-	record: number;
 	loop: number;
-	offline: number;
 }
 
 /**
@@ -29,161 +19,13 @@ class Actuator extends Emitter<IActuatorEvent> {
 	/**
 	 * 模拟帧率
 	 */
-	public fps: number = 36;
+	public fps: number = 42;
 
 	/**
 	 * 仿真是否进行
 	 */
 	private startFlag: boolean = false;
 
-	/**
-	 * 模式
-	 */
-	public mod: ActuatorModel = ActuatorModel.View;
-
-	/**
-	 * 录制剪辑
-	 */
-	public recordClip?: Clip;
-
-	/**
-	 * 播放剪辑
-	 */
-	public playClip?: Clip;
-
-	/**
-	 * 播放帧
-	 */
-	public playFrame?: IFrame;
-
-	/**
-	 * 播放帧数
-	 */
-	 public playFrameId: number = 0;
-
-	/**
-	 * 开始录制
-	 */
-	public startRecord(clip: Clip) {
-
-		// 记录录制片段
-		this.recordClip = clip;
-		clip.isRecording = true;
-
-		// 如果仿真未开启，开启仿真
-		if (!this.start()) this.start(true);
-
-		// 设置状态
-		this.mod = ActuatorModel.Record;
-	}
-
-	/**
-	 * 结束录制
-	 */
-	public endRecord() {
-
-		this.recordClip && (this.recordClip.isRecording = false);
-		this.recordClip = undefined;
-
-		// 如果仿真未停止，停止仿真
-		if (this.start()) this.start(false);
-
-		// 设置状态
-		this.mod = ActuatorModel.View;
-	}
-
-	public startPlay(clip: Clip) {
-
-		// 如果仿真正在进行，停止仿真
-		if (this.start()) this.start(false);
-
-		// 如果正在录制，阻止播放
-		if (this.mod === ActuatorModel.Record) {
-			return;
-		}
-
-		// 如果正在播放，暂停播放
-		if (this.mod === ActuatorModel.Play) {
-			this.pausePlay();
-		}
-
-		// 设置播放对象
-		this.playClip = clip;
-
-		// 设置播放帧数
-		this.playFrameId = 0;
-		this.playFrame = clip.frames[this.playFrameId];
-
-		// 播放第一帧
-		clip.play(this.playFrame);
-
-		// 激发时钟状态事件
-		this.emit("startChange", true);
-	}
-
-	public endPlay() {
-
-		// 如果正在播放，暂停播放
-		if (this.mod === ActuatorModel.Play) {
-			this.pausePlay();
-		}
-
-		// 更新模式
-		this.mod = ActuatorModel.View;
-
-		// 清除状态
-		this.playClip = undefined;
-		this.playFrameId = 0;
-		this.playFrame = undefined;
-
-		// 渲染模型
-		this.model.draw();
-
-		// 激发时钟状态事件
-		this.emit("startChange", false);
-	}
-
-	/**
-	 * 是否播放完毕
-	 */
-	public isPlayEnd() {
-		if (this.playClip && this.playFrame) {
-			if (this.playFrameId >= (this.playClip.frames.length - 1)) {
-				return true;
-			} else {
-				return false;
-			}
-		} else {
-			return true;
-		}
-	}
-
-	public playing() {
-
-		// 如果播放完毕了，从头开始播放
-		if (this.isPlayEnd() && this.playClip) {
-			this.startPlay(this.playClip);
-		}
-
-		// 更新模式
-		this.mod = ActuatorModel.Play;
-
-		// 启动播放时钟
-		this.playTicker();
-
-		// 激发时钟状态事件
-		this.emit("startChange", false);
-	}
-
-	public pausePlay() {
-
-		// 更新模式
-		this.mod = ActuatorModel.View;
-
-		// 激发时钟状态事件
-		this.emit("startChange", false);
-	}
-
 	/**
 	 * 主时钟状态控制
 	 */
@@ -216,160 +58,6 @@ class Actuator extends Emitter<IActuatorEvent> {
 
 	public tickerType: 1 | 2 = 2;
 
-	private playTickerTimer?: number;
-
-	/**
-	 * 设置播放进度
-	 */
-	public setPlayProcess(id: number) {
-		if (this.playClip && id >= 0 && id < this.playClip.frames.length) {
-		
-			// 跳转值这帧
-			this.playFrameId = id;
-			this.playFrame = this.playClip.frames[this.playFrameId];
-			this.emit("record", this.playFrame.duration);
-
-			if (this.mod !== ActuatorModel.Play) {
-				this.playClip.play(this.playFrame);
-			}
-		}
-	}
-
-	/**
-	 * 离线渲染参数
-	 */
-	public offlineAllFrame: number = 0;
-	public offlineCurrentFrame: number = 0;
-	private offlineRenderTickTimer?: number;
-
-	/**
-	 * 关闭离线渲染
-	 */
-	public endOfflineRender() {
-
-		// 清除 timer
-		clearTimeout(this.offlineRenderTickTimer);
-
-		this.recordClip && (this.recordClip.isRecording = false);
-		this.recordClip = undefined;
-		
-		// 设置状态
-		this.mod = ActuatorModel.View;
-
-		// 激发结束事件
-		this.start(false);
-		this.emit("record", 0);
-	}
-
-	/**
-	 * 离线渲染 tick
-	 */
-	private offlineRenderTick(dt: number) {
-
-		if (this.mod !== ActuatorModel.Offline) {
-			return;
-		}
-
-		if (this.offlineCurrentFrame >= this.offlineAllFrame) {
-			return this.endOfflineRender();
-		}
-		
-		// 更新模型
-		this.model.update(dt);
-
-		// 录制
-		this.recordClip?.record(dt);
-
-		// 限制更新频率
-		if (this.offlineCurrentFrame % 10 === 0) {
-			this.emit("offline", dt);
-		}
-
-		this.offlineCurrentFrame++
-
-		if (this.offlineCurrentFrame <= this.offlineAllFrame) {
-			
-			// 下一个 tick
-			this.offlineRenderTickTimer = setTimeout(() => this.offlineRenderTick(dt)) as any;
-
-		} else {
-			this.endOfflineRender();
-		}
-	}
-
-	/**
-	 * 离线渲染
-	 */
-	public offlineRender(clip: Clip, time: number, fps: number) {
-		
-		// 记录录制片段
-		this.recordClip = clip;
-		clip.isRecording = true;
-
-		// 如果仿真正在进行，停止仿真
-		if (this.start()) this.start(false);
-
-		// 如果正在录制，阻止
-		if (this.mod === ActuatorModel.Record || this.mod === ActuatorModel.Offline) {
-			return;
-		}
-
-		// 如果正在播放，暂停播放
-		if (this.mod === ActuatorModel.Play) {
-			this.pausePlay();
-		}
-
-		// 设置状态
-		this.mod = ActuatorModel.Offline;
-
-		// 计算帧数
-		this.offlineCurrentFrame = 0;
-		this.offlineAllFrame = Math.round(time * fps) - 1;
-		let dt = time / this.offlineAllFrame;
-
-		// 第一帧渲染
-		clip.record(0);
-
-		// 开启时钟
-		this.offlineRenderTick(dt);
-
-		this.emit("record", dt);
-	}
-
-	/**
-	 * 播放时钟
-	 */
-	private playTicker() {
-
-		if (this.playClip && this.playFrame && this.mod === ActuatorModel.Play) {
-
-			// 播放当前帧
-			this.playClip.play(this.playFrame);
-
-			// 没有完成播放，继续播放
-			if (!this.isPlayEnd()) {
-
-				// 跳转值下一帧
-				this.playFrameId ++;
-				this.playFrame = this.playClip.frames[this.playFrameId];
-				this.emit("record", this.playFrame.duration);
-
-				// 清除计时器，保证时钟唯一性
-				clearTimeout(this.playTickerTimer);
-
-				// 延时
-				this.playTickerTimer = setTimeout(() => {
-					this.playTicker();
-				}, this.playFrame.duration * 1000) as any;
-
-			} else {
-				this.pausePlay();
-			}
-		} else {
-			this.pausePlay();
-		}
-	}
-
 	private ticker(t: number) {
 		if (this.startFlag && t !== 0) {
 			if (this.lastTime === 0) {
@@ -384,30 +72,13 @@ class Actuator extends Emitter<IActuatorEvent> {
 				} else {
 					this.alignTimer += durTime;
 					if (this.alignTimer > (1 / this.fps)) {
-
-						// 更新模型
 						this.model.update(this.alignTimer * this.speed);
-
-						// 绘制模型
-						this.model.draw();
-
-						// 录制模型
-						if (
-							this.mod === ActuatorModel.Record ||
-							this.mod === ActuatorModel.Offline
-						) {
-							this.recordClip?.record(this.alignTimer * this.speed);
-							this.emit("record", this.alignTimer);
-						}
-
 						this.emit("loop", this.alignTimer);
 						this.alignTimer = 0;
 					}
 				}
 			}
-		}
+		} else {
-		
-		else {
 			this.emit("loop", Infinity);
 		}
 	}
@@ -451,4 +122,4 @@ class Actuator extends Emitter<IActuatorEvent> {
 	}
 }
 
-export { Actuator, ActuatorModel }
+export { Actuator }

source/Model/Archive.ts

@@ -8,7 +8,6 @@ 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;
@@ -21,7 +20,6 @@ interface IArchiveObject {
     objectPool: IArchiveCtrlObject[];
     labelPool: IArchiveLabel[];
     behaviorPool: IArchiveBehavior[];
-    clipPool: IArchiveClip[];
 }
 
 class Archive extends Emitter<IArchiveEvent> {
@@ -39,7 +37,7 @@ class Archive extends Emitter<IArchiveEvent> {
     /**
      * 是否保存
      */
-    public isSaved: boolean = true;
+    public isSaved: boolean = false;
 
     /**
      * 文件路径
@@ -53,7 +51,7 @@ class Archive extends Emitter<IArchiveEvent> {
 
         // 存贮 CtrlObject
         const objectPool: IArchiveCtrlObject[] = [];
-        model.objectPool?.forEach(obj => {
+        model.objectPool.forEach(obj => {
             let archiveObject = obj.toArchive();
 
             // 处理每个群的个体
@@ -62,7 +60,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());
                 });
 
@@ -74,29 +72,22 @@ 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);
@@ -109,12 +100,12 @@ class Archive extends Emitter<IArchiveEvent> {
 
         // 解析为 JSON 对象
         const archive: IArchiveObject = JSON.parse(data);
-        // console.log(archive);
+        console.log(archive);
 
         // 实例化全部对象
         const objectPool: CtrlObject[] = [];
         const individualPool: Individual[] = [];
-        archive.objectPool?.forEach((obj) => {
+        archive.objectPool.forEach((obj) => {
 
             let ctrlObject: CtrlObject | undefined = undefined;
             
@@ -125,7 +116,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);
@@ -149,7 +140,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);
@@ -157,21 +148,13 @@ 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]
 
@@ -255,12 +238,6 @@ 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;
-        });
     }
 
     /**
@@ -277,7 +254,7 @@ class Archive extends Emitter<IArchiveEvent> {
      * 加载文件为模型
      * @return Model
      */
-    public load(model: Model, data: string, name: string, url?: string): string | undefined {
+    public load(model: Model, data: string): string | undefined {
 
         try {
             this.loadArchiveIntoModel(model, data);
@@ -285,12 +262,8 @@ class Archive extends Emitter<IArchiveEvent> {
             return e as string;
         }
         
-        this.emit("fileLoad", this);
-        this.fileName = name;
         this.isSaved = true;
-        this.isNewFile = false;
+        this.emit("fileLoad", this);
-        this.fileUrl = url;
-        this.emit("fileSave", this);
     };
 
     public constructor() {
@@ -301,4 +274,4 @@ class Archive extends Emitter<IArchiveEvent> {
     }
 }
 
-export { Archive, IArchiveObject };
+export { Archive };

source/Model/Clip.ts

@@ -1,456 +0,0 @@
-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;
-}
-
-interface IFrame {
-	commands: IDrawCommand[];
-	duration: number;
-	process: number;
-}
-
-interface IArchiveClip {
-	id: string;
-	time: number;
-	name: string;
-	frames: IFrame[];
-}
-
-/**
- * 剪辑片段
- */
-class Clip {
-
-	public id: string;
-
-	/**
-	 * 时间
-	 */
-	public time: number = 0;
-
-	/**
-	 * 用户自定义名称
-	 */
-	public name: string = "";
-
-	/**
-	 * 模型
-	 */
-	public model: Model;
-
-	/**
-	 * 全部帧
-	 */
-	public frames: IFrame[] = [];
-
-	/**
-	 * 是否正在录制
-	 */
-	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;
-		}
-	}
-
-	/**
-	 * 录制一帧
-	 */
-	public record(t: number): IFrame {
-		const commands: IDrawCommand[] = [];
-
-		for (let i = 0; i < this.model.objectPool.length; i++) {
-
-            let object = this.model.objectPool[i];
-            object.renderParameter.color = object.color;
-
-            if (object.display && object instanceof Group) {
-
-				// 获取上一帧指令
-				const lastCommand = this.getCommandFromLastFrame("points", object.id);
-
-				// 记录
-				const dataBuffer = object.exportPositionId(this.getMapperId);
-				const recodeData: IDrawCommand = {
-					type: "points",
-					id: object.id,
-					name: object.displayName,
-					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) {
-
-				// 获取上一帧指令
-				const lastCommand = this.getCommandFromLastFrame("cube", object.id);
-
-				// 记录
-				const recodeData: IDrawCommand = {
-					type: "cube",
-					id: object.id,
-					name: object.displayName
-				}
-
-				// 释放上一帧的内存
-				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);
-            }
-        }
-
-		const dt = this.frames.length <= 0 ? 0 : t;
-		this.time += dt;
-		
-		const frame: IFrame = {
-			commands: commands,
-			duration: dt,
-			process: this.time
-		};
-		
-		this.frames.push(frame);
-		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;
-	}
-
-	/**
-	 * 播放一帧
-	 */
-	public play(frame: IFrame) {
-
-		// 清除全部渲染状态
-        this.model.renderer.clean();
-
-		// 执行全部渲染指令
-		for (let i = 0; i < frame.commands.length; i++) {
-			const command: IDrawCommand = frame.commands[i];
-
-			if (command.type === "cube") {
-				this.model.renderer.cube(command.id, command.position, command.radius, command.parameter);
-			}
-
-			else if (frame.commands[i].type === "points") {
-				this.model.renderer.points(command.id, command.data, command.parameter);
-			}
-		}
-	}
-
-	public equal(clip?: Clip) {
-		return clip === this || clip?.id === this.id;
-	}
-
-	public constructor(model: Model) {
-		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, IArchiveClip };

source/Model/Group.ts

@@ -428,22 +428,6 @@ 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

@@ -5,7 +5,6 @@ import { IParamValue } from "@Model/Parameter";
 import { CtrlObject } from "@Model/CtrlObject";
 import { Emitter } from "@Model/Emitter";
 import { AbstractRenderer } from "@Model/Renderer";
-import { Clip } from "@Model/Clip";
 import { Behavior, IAnyBehavior, IAnyBehaviorRecorder } from "@Model/Behavior";
 
 /**
@@ -23,7 +22,6 @@ type ModelEvent = {
     objectChange: CtrlObject[];
     individualChange: Group;
     behaviorChange: IAnyBehavior;
-    clipChange: Clip[];
 };
 
 /**
@@ -332,59 +330,6 @@ class Model extends Emitter<ModelEvent> {
         }
     }
 
-    /**
-     * 剪辑数据
-     */
-    public clipPool: Clip[] = [];
-
-    /**
-     * 新建剪辑片段
-     */
-    public addClip(name?: string): Clip {
-        let newClip = new Clip(this);
-        newClip.name = name ?? "";
-        this.clipPool.push(newClip);
-        console.log(`Model: Create clip ${name ?? newClip.id}`);
-        this.emit("clipChange", this.clipPool);
-        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];
-            }
-        }
-    }
-
-    /**
-     * 删除一个剪辑片段
-     */
-    public deleteClip(name: ObjectID | Clip) {
-        let deletedClip: Clip | undefined;
-        let index = 0;
-
-        for (let i = 0; i < this.clipPool.length; i++) {
-            if (name instanceof Clip) {
-                if (this.clipPool[i].equal(name)) {
-                    deletedClip = this.clipPool[i];
-                    index = i;
-                }
-            }
-            
-            else if (name === this.clipPool[i].id) {
-                deletedClip = this.clipPool[i];
-                index = i;
-            }
-        }
-
-        if (deletedClip) {
-            this.clipPool.splice(index, 1);
-            console.log(`Model: Delete clip ${deletedClip.name ?? deletedClip.id}`);
-            this.emit("clipChange", this.clipPool);
-        }
-    }
-
     /**
      * 渲染器
      */
@@ -427,6 +372,8 @@ class Model extends Emitter<ModelEvent> {
                 object.runner(t, "finalEffect");
             }
         }
+
+        this.draw();
     }
 
     public draw() {

source/Page/SimulatorDesktop/SimulatorDesktop.tsx

@@ -1,20 +1,19 @@
 import { Component, ReactNode } from "react";
-import { DndProvider } from 'react-dnd'
-import { HTML5Backend } from 'react-dnd-html5-backend'
 import { SettingProvider, Setting, Platform } from "@Context/Setting";
 import { Theme, BackgroundLevel, FontLevel } from "@Component/Theme/Theme";
 import { ISimulatorAPI } from "@Electron/SimulatorAPI";
 import { StatusProvider, Status } from "@Context/Status";
-import { ElectronProvider, getElectronAPI } from "@Context/Electron";
+import { ElectronProvider } from "@Context/Electron";
 import { ClassicRenderer } from "@GLRender/ClassicRenderer";
 import { initializeIcons } from '@fluentui/font-icons-mdl2';
 import { RootContainer } from "@Component/Container/RootContainer";
 import { LayoutDirection } from "@Context/Layout";
 import { CommandBar } from "@Component/CommandBar/CommandBar";
-import { LoadFile } from "@Component/LoadFile/LoadFile";
 import { HeaderBar } from "@Component/HeaderBar/HeaderBar";
 import { Popup } from "@Component/Popup/Popup";
 import { Entry } from "../Entry/Entry";
+import { Group } from "@Model/Group";
+import DEMO from "../demo";
 import "./SimulatorDesktop.scss";
 
 initializeIcons("./font-icon/");
@@ -49,12 +48,29 @@ class SimulatorDesktop extends Component {
         this.status.bindRenderer(classicRender);
         this.status.setting = this.setting;
 
+        const randomPosition = (group: Group) => {
+            group.individuals.forEach((individual) => {
+                individual.position[0] = (Math.random() - .5) * 2;
+                individual.position[1] = (Math.random() - .5) * 2;
+                individual.position[2] = (Math.random() - .5) * 2;
+            })
+        };
+
+        setTimeout(() => {
+            this.status.archive.load(this.status.model, DEMO);
+        }, 200);
+
         (window as any).LT = {
             status: this.status,
             setting: this.setting
         };
 
-        this.electron = getElectronAPI();
+        this.electron = {} as ISimulatorAPI;
+        if ((window as any).API) {
+            this.electron = (window as any).API;
+        } else {
+            console.error("SimulatorDesktop: Can't find electron API");
+        }
     }
 
     public componentDidMount() {
@@ -64,7 +80,7 @@ class SimulatorDesktop extends Component {
                     items: [
                         {panels: ["RenderView"]},
                         {
-                            items: [{panels: ["BehaviorList", "ClipPlayer"]}, {panels: ["LabelList"]}],
+                            items: [{panels: ["BehaviorList"]}, {panels: ["LabelList"]}],
                             scale: 80,
                             layout: LayoutDirection.X
                         }
@@ -76,7 +92,7 @@ class SimulatorDesktop extends Component {
                     items: [{
                         panels: ["ObjectList"]
                     }, {
-                        panels: ["GroupDetails", "RangeDetails", "LabelDetails", "BehaviorDetails", "ClipDetails"]
+                        panels: ["GroupDetails", "RangeDetails", "LabelDetails", "BehaviorDetails"]
                     }],
                     scale: 30,
                     layout: LayoutDirection.Y
@@ -91,9 +107,7 @@ class SimulatorDesktop extends Component {
         return <SettingProvider value={this.setting}>
             <StatusProvider value={this.status}>
                 <ElectronProvider value={this.electron}>
-                    <DndProvider backend={HTML5Backend}>
+                    {this.renderContent()}
-                        {this.renderContent()}
-                    </DndProvider>
                 </ElectronProvider>
             </StatusProvider>
         </SettingProvider>
@@ -106,15 +120,13 @@ class SimulatorDesktop extends Component {
             fontLevel={FontLevel.Level3}
         >
             <Popup/>
-            <LoadFile>
+            <HeaderBar height={35}/>
-                <HeaderBar height={35}/>
+            <div className="app-root-space" style={{
-                <div className="app-root-space" style={{
+                height: `calc( 100% - ${35}px)`
-                    height: `calc( 100% - ${35}px)`
+            }}>
-                }}>
+                <CommandBar/>
-                    <CommandBar/>
+                <RootContainer/>
-                    <RootContainer/>
+            </div>
-                </div>
-            </LoadFile>
         </Theme>
     }
 }

source/Page/SimulatorWeb/SimulatorWeb.tsx

@@ -1,6 +1,4 @@
 import { Component, ReactNode } from "react";
-import { DndProvider } from 'react-dnd'
-import { HTML5Backend } from 'react-dnd-html5-backend'
 import { SettingProvider, Setting, Platform } from "@Context/Setting";
 import { Theme, BackgroundLevel, FontLevel } from "@Component/Theme/Theme";
 import { StatusProvider, Status } from "@Context/Status";
@@ -9,10 +7,13 @@ import { initializeIcons } from '@fluentui/font-icons-mdl2';
 import { RootContainer } from "@Component/Container/RootContainer";
 import { LayoutDirection } from "@Context/Layout";
 import { LoadFile } from "@Component/LoadFile/LoadFile";
+import { AllBehaviors, getBehaviorById } from "@Behavior/Behavior";
 import { CommandBar } from "@Component/CommandBar/CommandBar";
 import { HeaderBar } from "@Component/HeaderBar/HeaderBar";
 import { Popup } from "@Component/Popup/Popup";
 import { Entry } from "../Entry/Entry";
+import { Group } from "@Model/Group";
+import DEMO from "../demo";
 import "./SimulatorWeb.scss";
 
 initializeIcons("https://img.mrkbear.com/fabric-cdn-prod_20210407.001/");
@@ -42,6 +43,122 @@ class SimulatorWeb extends Component {
         this.status.bindRenderer(classicRender);
         this.status.setting = this.setting;
 
+        const randomPosition = (group: Group) => {
+            group.individuals.forEach((individual) => {
+                individual.position[0] = (Math.random() - .5) * 2;
+                individual.position[1] = (Math.random() - .5) * 2;
+                individual.position[2] = (Math.random() - .5) * 2;
+            })
+        };
+
+        // 测试代码
+        if (false) {
+            let group = this.status.newGroup();
+            let range = this.status.newRange();
+            range.color = [.1, .5, .9];
+            group.new(100);
+            group.color = [.8, .1, .6];
+            randomPosition(group);
+            this.status.model.update(0);
+            this.status.newLabel().name = "New Label";
+            this.status.newLabel().name = "Test Label 01";
+            let template = this.status.model.addBehavior(AllBehaviors[0]);
+            template.name = "Template"; template.color = [150, 20, 220];
+            let dynamic = this.status.model.addBehavior(AllBehaviors[1]);
+            dynamic.name = "Dynamic"; dynamic.color = [250, 200, 80];
+            let brownian = this.status.model.addBehavior(AllBehaviors[2]);
+            brownian.name = "Brownian"; brownian.color = [200, 80, 250];
+            let boundary = this.status.model.addBehavior(AllBehaviors[3]);
+            boundary.name = "Boundary"; boundary.color = [80, 200, 250];
+            boundary.parameter.range.picker = this.status.model.allRangeLabel;
+            group.addBehavior(template);
+            group.addBehavior(dynamic);
+            group.addBehavior(brownian);
+            group.addBehavior(boundary);
+        }
+
+        // 鱼群模型测试
+        if (false) {
+            let fish1 = this.status.newGroup();
+            let fish2 = this.status.newGroup();
+            let shark = this.status.newGroup();
+            let range = this.status.newRange();
+
+            range.displayName = "Experimental site";
+            range.color = [.8, .1, .6];
+
+            fish1.new(100);
+            fish1.displayName = "Fish A";            
+            fish1.color = [.1, .5, .9];
+            randomPosition(fish1);
+
+            fish2.new(50);
+            fish2.displayName = "Fish B";            
+            fish2.color = [.3, .2, .9];
+            randomPosition(fish2);
+
+            shark.new(3);
+            shark.displayName = "Shark";
+            shark.color = [.8, .2, .3];
+            shark.renderParameter.size = 100;
+            shark.renderParameter.shape = "5";
+            randomPosition(shark);
+
+            this.status.model.update(0);
+            let fishLabel = this.status.newLabel();
+            fishLabel.name = "Fish";
+            fish1.addLabel(fishLabel);
+            fish2.addLabel(fishLabel);
+
+            let template = this.status.model.addBehavior(getBehaviorById("Template"));
+            template.name = "Template"; template.color = [150, 20, 220];
+
+            let dynamicFish = this.status.model.addBehavior(getBehaviorById("PhysicsDynamics"));
+            dynamicFish.name = "Dynamic Fish"; dynamicFish.color = [250, 200, 80];
+
+            let dynamicShark = this.status.model.addBehavior(getBehaviorById("PhysicsDynamics"));
+            dynamicShark.name = "Dynamic Shark"; dynamicShark.color = [250, 200, 80];
+            dynamicShark.parameter.maxAcceleration = 8.5;
+            dynamicShark.parameter.maxVelocity = 15.8;
+            dynamicShark.parameter.resistance = 3.6;
+
+            let brownian = this.status.model.addBehavior(getBehaviorById("Brownian"));
+            brownian.name = "Brownian"; brownian.color = [200, 80, 250];
+
+            let boundary = this.status.model.addBehavior(getBehaviorById("BoundaryConstraint"));
+            boundary.name = "Boundary"; boundary.color = [80, 200, 250];
+            boundary.parameter.range.picker = this.status.model.allRangeLabel;
+
+            let tracking = this.status.model.addBehavior(getBehaviorById("Tracking"));
+            tracking.name = "Tracking"; tracking.color = [80, 200, 250];
+            tracking.parameter.target.picker = fishLabel;
+
+            let attacking = this.status.model.addBehavior(getBehaviorById("ContactAttacking"));
+            attacking.name = "Contact Attacking"; attacking.color = [120, 100, 250];
+            attacking.parameter.target.picker = fishLabel;
+
+            fish1.addBehavior(dynamicFish);
+            fish1.addBehavior(brownian);
+            fish1.addBehavior(boundary);
+
+            fish2.addBehavior(dynamicFish);
+            fish2.addBehavior(brownian);
+            fish2.addBehavior(boundary);
+
+            shark.addBehavior(dynamicShark);
+            shark.addBehavior(boundary);
+            shark.addBehavior(tracking);
+            shark.addBehavior(attacking);
+
+            setTimeout(() => {
+                this.status.model.updateBehaviorParameter();
+            }, 200)
+        }
+
+        setTimeout(() => {
+            this.status.archive.load(this.status.model, DEMO);
+        }, 200);
+
         (window as any).LT = {
             status: this.status,
             setting: this.setting
@@ -55,7 +172,7 @@ class SimulatorWeb extends Component {
                     items: [
                         {panels: ["RenderView"]},
                         {
-                            items: [{panels: ["BehaviorList", "ClipPlayer"]}, {panels: ["LabelList"]}],
+                            items: [{panels: ["BehaviorList"]}, {panels: ["LabelList"]}],
                             scale: 80,
                             layout: LayoutDirection.X
                         }
@@ -67,7 +184,7 @@ class SimulatorWeb extends Component {
                     items: [{
                         panels: ["ObjectList"]
                     }, {
-                        panels: ["GroupDetails", "RangeDetails", "LabelDetails", "BehaviorDetails", "ClipDetails"]
+                        panels: ["GroupDetails", "RangeDetails", "LabelDetails", "BehaviorDetails"]
                     }],
                     scale: 30,
                     layout: LayoutDirection.Y
@@ -81,9 +198,7 @@ class SimulatorWeb extends Component {
     public render(): ReactNode {
         return <SettingProvider value={this.setting}>
             <StatusProvider value={this.status}>
-                <DndProvider backend={HTML5Backend}>
+                {this.renderContent()}
-                    {this.renderContent()}
-                </DndProvider>
             </StatusProvider>
         </SettingProvider>
     }
@@ -94,16 +209,15 @@ class SimulatorWeb extends Component {
             backgroundLevel={BackgroundLevel.Level5}
             fontLevel={FontLevel.Level3}
         >
+            <LoadFile/>
             <Popup/>
-            <LoadFile>
+            <HeaderBar height={45}/>
-                <HeaderBar height={45}/>
+            <div className="app-root-space" style={{
-                <div className="app-root-space" style={{
+                height: `calc( 100% - ${45}px)`
-                    height: `calc( 100% - ${45}px)`
+            }}>
-                }}>
+                <CommandBar/>
-                    <CommandBar/>
+                <RootContainer/>
-                    <RootContainer/>
+            </div>
-                </div>
-            </LoadFile>
         </Theme>
     }
 }

source/Panel/ClipDetails/ClipDetails.tsx

@@ -1,60 +0,0 @@
-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.scss

@@ -1,6 +0,0 @@
-div.Clip-player-clip-list-root {
-	width: 100%;
-	height: 100%;
-	box-sizing: border-box;
-	padding: 10px;
-}

source/Panel/ClipPlayer/ClipPlayer.tsx

@@ -1,97 +0,0 @@
-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";
-import { ActuatorModel } from "@Model/Actuator";
-import { ConfirmPopup } from "@Component/ConfirmPopup/ConfirmPopup";
-import { OfflineRender } from "@Component/OfflineRender/OfflineRender"
-import "./ClipPlayer.scss";
-
-@useSetting
-@useStatusWithEvent("clipChange", "focusClipChange", "actuatorStartChange", "clipAttrChange")
-class ClipPlayer extends Component<IMixinStatusProps & IMixinSettingProps> {
-
-	private isInnerClick: boolean = false;
-
-	private renderMessage(): ReactNode {
-		return <Message i18nKey="Panel.Info.Clip.List.Error.Nodata"/>;
-	}
-
-	private isClipListDisable() {
-		return !this.props.status?.focusClip && 
-		(
-			this.props.status?.actuator.mod === ActuatorModel.Record ||
-			this.props.status?.actuator.mod === ActuatorModel.Offline
-		);
-	}
-
-	private renderClipList(clipList: Clip[]): ReactNode {
-
-		return <ClipList
-			focus={this.props.status?.focusClip}
-			clips={clipList}
-			disable={this.isClipListDisable()}
-			delete={(clip) => {
-				this.isInnerClick = true;
-				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);
-						}
-					});
-				}
-			}}
-			add={() => {
-				this.isInnerClick = true;
-				this.props.status?.popup.showPopup(OfflineRender, {});
-			}}
-			click={(clip) => {
-				this.isInnerClick = true;
-				this.props.status?.setClipObject(clip);
-				this.props.status?.actuator.startPlay(clip);
-				this.props.setting?.layout.focus("ClipDetails");
-			}}
-		/>;
-	}
-
-	public render(): ReactNode {
-		const clipList = this.props.status?.model.clipPool ?? [];
-
-		return <Theme
-			className="Clip-player-clip-list-root"
-			fontLevel={FontLevel.normal}
-			backgroundLevel={BackgroundLevel.Level4}
-			onClick={()=>{
-				
-				// 拦截禁用状态的事件
-				if (this.isClipListDisable()) {
-					return;
-				}
-				
-				if (this.isInnerClick) {
-					this.isInnerClick = false;
-				}
-
-				else {
-					this.props.status?.setClipObject();
-					this.props.status?.actuator.endPlay();
-				}
-			}}
-		>
-			{ clipList.length > 0 ? null : this.renderMessage() }
-			{ this.renderClipList(clipList) }
-		</Theme>;
-	}
-}
-
-export { ClipPlayer };

source/Panel/ClipPlayer/ClipRecorder.tsx

@@ -1,103 +0,0 @@
-import { Component, ReactNode } from "react";
-import { useStatusWithEvent, IMixinStatusProps } from "@Context/Status";
-import { Recorder } from "@Component/Recorder/Recorder";
-import { ActuatorModel } from "@Model/Actuator";
-
-@useStatusWithEvent("actuatorStartChange", "focusClipChange", "recordLoop", "clipAttrChange")
-class ClipRecorder extends Component<IMixinStatusProps> {
-	public render(): ReactNode {
-
-		let mod: "P" | "R" = this.props.status?.focusClip ? "P" : "R";
-		let runner: boolean = false;
-		let currentTime: number | undefined = 0;
-		let allTime: number | undefined = 0;
-		let name: string | undefined;
-		let currentFrame: number | undefined = 0;
-		let allFrame: number | undefined = 0;
-		let fps: number | undefined = 0;
-
-		// 是否开始录制
-		if (mod === "R") {
-
-			// 是否正在录制
-			runner = this.props.status?.actuator.mod === ActuatorModel.Record ||
-			this.props.status?.actuator.mod === ActuatorModel.Offline;
-
-			currentTime = this.props.status?.actuator.recordClip?.time ?? 0;
-
-			name = this.props.status?.actuator.recordClip?.name;
-		}
-
-		else if (mod === "P") {
-
-			// 是否正在播放
-			runner = this.props.status?.actuator.mod === ActuatorModel.Play;
-			name = this.props.status?.focusClip?.name;
-			allTime = this.props.status?.focusClip?.time;
-			allFrame = this.props.status?.focusClip?.frames.length;
-			currentFrame = this.props.status?.actuator.playFrameId;
-			currentTime = this.props.status?.actuator.playFrame?.process;
-
-			if (allFrame !== undefined) {
-				allFrame --;
-			}
-
-			if (allTime !== undefined && allFrame !== undefined) {
-				fps = Math.round(allFrame / allTime);
-			}
-		}
-
-		return <Recorder
-			name={name}
-			currentTime={currentTime}
-			allTime={allTime}
-			currentFrame={currentFrame}
-			allFrame={allFrame}
-			mode={mod}
-			running={runner}
-			fps={fps}
-			action={() => {
-
-				// 开启录制
-				if (mod === "R" && !runner) {
-
-					// 获取新实例
-					let newClip = this.props.status?.newClip();
-					
-					// 开启录制时钟
-					this.props.status?.actuator.startRecord(newClip!);
-					console.log("ClipRecorder: Rec start...");
-				}
-
-				// 暂停录制
-				if (mod === "R" && runner) {
-
-					// 暂停录制时钟
-					this.props.status?.actuator.endRecord();
-					console.log("ClipRecorder: Rec end...");
-				}
-
-				// 开始播放
-				if (mod === "P" && !runner) {
-
-					// 启动播放时钟
-					this.props.status?.actuator.playing();
-					console.log("ClipRecorder: Play start...");
-				}
-
-				// 暂停播放
-				if (mod === "P" && runner) {
-
-					// 启动播放时钟
-					this.props.status?.actuator.pausePlay();
-					console.log("ClipRecorder: Pause play...");
-				}
-			}}
-			valueChange={(value) => {
-				this.props.status?.actuator.setPlayProcess(value);
-			}}
-		/>
-	}
-}
-
-export { ClipRecorder };

source/Panel/ObjectList/ObjectCommand.tsx

@@ -44,7 +44,7 @@ class ObjectCommand extends Component<IMixinStatusProps> {
 					this.props.status ? this.props.status.newGroup() : undefined;
 				}}
 			>
-				<Icon iconName="WebAppBuilderFragmentCreate"></Icon>
+				<Icon iconName="WebAppBuilderFragment"></Icon>
 			</div>
 			<div
 				className="command-item"
@@ -52,7 +52,7 @@ class ObjectCommand extends Component<IMixinStatusProps> {
 					this.props.status ? this.props.status.newRange() : undefined;
 				}}
 			>
-				<Icon iconName="ProductVariant"></Icon>
+				<Icon iconName="CubeShape"></Icon>
 			</div>
 			<div
 				className="command-item red"

source/Panel/Panel.tsx

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