Per release

Mod group i18n terms
2022-04-07 16:51:16 +08:00 · 2022-04-07 16:46:05 +08:00
125 changed files with 1504 additions and 9299 deletions
@@ -42,7 +42,6 @@ node_modules/
 jspm_packages/
 build/
 out/
-bundle/

 # TypeScript v1 declaration files
 typings/
@@ -1,68 +0,0 @@
-const FS =  require("fs");
-const Path = require("path");
-const minimist = require("minimist");
-
-const args = minimist(process.argv.slice(2));
-
-const PackageJSON = JSON.parse(
-	FS.readFileSync(Path.join(__dirname, "../package.json"))
-);
-
-const Config = {
-	"name": PackageJSON.name,
-	"productName": PackageJSON.name,
-	"version": PackageJSON.version,
-	"description": PackageJSON.description,
-	"main": "./Electron.js",
-	"scripts": {
-		"start": "electron-forge start",
-		"package": "electron-forge package",
-		"make": "electron-forge make",
-		"publish": "electron-forge publish",
-		"lint": "echo \"No linting configured\""
-	},
-	"keywords": PackageJSON.keywords,
-	"author": {
-		"name": PackageJSON.author,
-		"email": "mrkbear@qq.com"
-	},
-	"license": PackageJSON.license,
-	"config": {
-		"forge": {
-			"packagerConfig": {
-				"appBundleId": "com.mrkbear.living-together",
-				"appCopyright": "2021-2022 © copyright MrKBear",
-				"download": {
-					"rejectUnauthorized": false,
-					"executableName": "LivingTogether",
-					"mirrorOptions": {
-						"mirror": 'https://npmmirror.com/mirrors/electron/',
-    					"customDir": '{{ version }}',
-					}
-				},
-				"asar": true,
-				"icon": "./living-together"
-			},
-			"makers": [
-				{
-					"name": "@electron-forge/maker-zip",
-					"platforms": [
-						"darwin"
-					]
-				}
-			]
-		}
-	},
-	"dependencies": {
-		"electron-squirrel-startup": "^1.0.0",
-		"detect-port": PackageJSON.dependencies["detect-port"],
-    	"express": PackageJSON.dependencies["express"],
-	},
-	"devDependencies": {
-		"@electron-forge/cli": "^6.0.0-beta.63",
-		"@electron-forge/maker-zip": "^6.0.0-beta.63",
-		"electron": PackageJSON.devDependencies.electron
-	}
-}
-
-FS.writeFileSync(Path.join(Path.resolve("./"), args.out ?? "./", "./package.json"), JSON.stringify(Config, null, 4));
@@ -58,6 +58,10 @@ const Entry = () => ({
        import: source("./GLRender/ClassicRenderer.ts")
    },

+    livingTogether: {
+        import: source("./livingTogether.ts")
+    },
+
    LaboratoryPage: {
        import: source("./Page/Laboratory/Laboratory.tsx"),
        dependOn: ["Model", "GLRender"]
@@ -66,29 +70,6 @@ const Entry = () => ({
    SimulatorWeb: {
        import: source("./Page/SimulatorWeb/SimulatorWeb.tsx"),
        dependOn: ["Model", "GLRender"]
-    },
-
-    SimulatorDesktop: {
-        import: source("./Page/SimulatorDesktop/SimulatorDesktop.tsx"),
-        dependOn: ["Model", "GLRender"]
-    },
-
-    Service: {
-        import: source("./Service/Service.ts")
-    },
-
-    ServiceRunner: {
-        import: source("./Service/Runner.ts"),
-        dependOn: ["Service"]
-    },
-
-    Electron: {
-        import: source("./Electron/Electron.ts"),
-        dependOn: ["Service"]
-    },
-
-    SimulatorWindow: {
-        import: source("./Electron/SimulatorWindow.ts"),
    }
 });

@@ -123,10 +104,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
    };

@@ -1,56 +0,0 @@
-const { 
-    Entry, Output, resolve, build,
-    TypeScriptRules, ScssRules,
-    HTMLPage, CssPlugin, AutoFixCssPlugin
-} = require("./webpack.common");
-
-const AllEntry = Entry();
-
-module.exports = (env) => {
-    
-    const config = {
-
-        entry: {
-            GLRender: AllEntry.GLRender,
-            Model: AllEntry.Model,
-            SimulatorDesktop: AllEntry.SimulatorDesktop
-        },
-
-        output: Output("[name].[contenthash].js"),
-        devtool: 'source-map',
-        mode: "development",
-        resolve: resolve(),
-
-        optimization: {
-            runtimeChunk: 'single',
-            chunkIds: 'named',
-            moduleIds: 'named',
-            splitChunks: {
-                chunks: 'all',
-                minSize: 1000
-            }
-        },
-
-        module: {
-            rules: [
-                TypeScriptRules(),
-                ScssRules()
-            ]
-        },
-        
-        plugins: [
-            HTMLPage("index.html", "Living Together | Simulator"),
-            CssPlugin(),
-            AutoFixCssPlugin()
-        ],
-        
-        devServer: {
-            static: {
-                directory: build("./"),
-            },
-            port: 12000,
-        }
-    };
-
-    return config;
-};
@@ -1,46 +0,0 @@
-const { Entry, Output, resolve, TypeScriptRules } = require("./webpack.common");
-const nodeExternals = require("webpack-node-externals");
-
-const AllEntry = Entry();
-
-module.exports = (env) => {
-    
-    const config = {
-
-        entry: {
-            Service: AllEntry.Service,
-			Electron: AllEntry.Electron,
-            SimulatorWindow: AllEntry.SimulatorWindow
-        },
-
-        output: Output("[name].js"),
-        devtool: 'source-map',
-        mode: "development",
-        resolve: resolve(),
-
-        optimization: {
-            splitChunks: {
-                chunks: 'all',
-                minSize: 1000
-            }
-        },
-
-        // externals: [nodeExternals({ allowlist: [/^(((?!electron).)*)$/] })],
-        externals: [nodeExternals()],
-
-        module: {
-            rules: [
-                TypeScriptRules()
-            ]
-        },
-
-		node: {
-			__filename: false,
-			__dirname: false
-		},
-
-		target: 'node'
-    };
-
-    return config;
-};
@@ -1,41 +0,0 @@
-const { Entry, Output, resolve, TypeScriptRules } = require("./webpack.common");
-
-const AllEntry = Entry();
-
-module.exports = (env) => {
-    
-    const config = {
-
-        entry: {
-            Service: AllEntry.Service,
-			ServiceRunner: AllEntry.ServiceRunner,
-        },
-
-        output: Output("[name].js"),
-        devtool: 'source-map',
-        mode: "development",
-        resolve: resolve(),
-
-        optimization: {
-            splitChunks: {
-                chunks: 'all',
-                minSize: 1000
-            }
-        },
-
-        module: {
-            rules: [
-                TypeScriptRules()
-            ]
-        },
-
-		node: {
-			__filename: false,
-			__dirname: false
-		},
-
-		target: 'node'
-    };
-
-    return config;
-};
@@ -4,38 +4,13 @@
  "description": "An art interactive works for graduation design.",
  "main": "./source/LivingTogether.ts",
  "scripts": {
-    "clean": "fse emptyDir ./build/",
+    "clean": "rimraf ./build/*",
    "hmr-lab": "webpack serve --open --config ./config/webpack.lab.js",
    "build-lab": "npm run clean & webpack --mode development --config ./config/webpack.lab.js",
    "release-lab": "npm run clean & webpack --mode production --no-devtool --config ./config/webpack.lab.js",
    "hmr-web": "webpack serve --open --config ./config/webpack.web.js",
-    "hmr-desktop": "webpack serve --open --config ./config/webpack.desktop.js",
    "build-web": "npm run clean & webpack --mode development --config ./config/webpack.web.js",
-    "release-web": "npm run clean & webpack --mode production --no-devtool --config ./config/webpack.web.js",
-    "build-desktop-web": "npm run clean & webpack --mode development --config ./config/webpack.desktop.js",
-    "release-desktop-web": "npm run clean & webpack --mode production --no-devtool --config ./config/webpack.desktop.js",
-    "build-service": "webpack --mode development --config ./config/webpack.service.js",
-    "release-service": "webpack --mode production --no-devtool --config ./config/webpack.service.js",
-    "run-service": "node ./build/ServiceRunner.js --run --path ./build --port 12000",
-    "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",
-    "build-electron": "webpack --mode development --config ./config/webpack.electron.js",
-    "release-electron": "webpack --mode production --no-devtool --config ./config/webpack.electron.js",
-    "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",
-    "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",
-    "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",
-    "electron-app-ci": "cd ./bundle & npm install & cd ../",
-    "gen-bundle": "fse emptyDir ./bundle/ & npm run copy-package-json & npm run copy-electron-icon & npm run electron-app-ci"
+    "release-web": "npm run clean & webpack --mode production --no-devtool --config ./config/webpack.web.js"
  },
  "keywords": [
    "artwork",
@@ -46,39 +21,28 @@
  "author": "MrKBear",
  "license": "GPL",
  "devDependencies": {
-    "@atao60/fse-cli": "^0.1.7",
-    "@types/detect-port": "^1.3.2",
-    "@types/downloadjs": "^1.4.3",
    "@types/react": "^17.0.38",
    "@types/react-dom": "^17.0.11",
-    "@types/uuid": "^8.3.4",
    "autoprefixer": "^10.4.2",
    "css-loader": "^6.5.1",
-    "electron": "^18.0.4",
    "html-webpack-plugin": "^5.5.0",
    "mini-css-extract-plugin": "^2.4.6",
    "node-sass": "^7.0.1",
    "postcss-loader": "^6.2.1",
+    "rimraf": "^3.0.2",
    "sass-loader": "^12.4.0",
    "ts-loader": "^9.2.6",
    "tsconfig-paths-webpack-plugin": "^3.5.2",
    "typescript": "^4.5.4",
    "webpack": "^5.65.0",
    "webpack-cli": "^4.9.1",
-    "webpack-dev-server": "^4.7.2",
-    "webpack-node-externals": "^3.0.0"
+    "webpack-dev-server": "^4.7.2"
  },
  "dependencies": {
    "@fluentui/react": "^8.56.0",
    "@juggle/resize-observer": "^3.3.1",
-    "detect-port": "^1.3.0",
-    "downloadjs": "^1.4.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",
-    "uuid": "^8.3.2"
+    "react-dom": "^17.0.2"
  }
 }
@@ -1,22 +1,14 @@
 import { BehaviorRecorder, IAnyBehaviorRecorder } from "@Model/Behavior";
-import { Template } from "@Behavior/Template";
-import { PhysicsDynamics } from "@Behavior/PhysicsDynamics";
-import { Brownian } from "@Behavior/Brownian";
-import { BoundaryConstraint } from "@Behavior/BoundaryConstraint";
-import { Tracking } from "@Behavior/Tracking";
-import { ContactAttacking } from "@Behavior/ContactAttacking";
-import { ContactAssimilate } from "@Behavior/ContactAssimilate";
-import { DelayAssimilate } from "@Behavior/DelayAssimilate";
+import { Template } from "./Template";
+import { Dynamics } from "./Dynamics";
+import { Brownian } from "./Brownian";
+import { BoundaryConstraint } from "./BoundaryConstraint"; 

 const AllBehaviors: IAnyBehaviorRecorder[] = [
-    new BehaviorRecorder(Template),
-    new BehaviorRecorder(PhysicsDynamics),
+    // new BehaviorRecorder(Template),
+    new BehaviorRecorder(Dynamics),
    new BehaviorRecorder(Brownian),
    new BehaviorRecorder(BoundaryConstraint),
-    new BehaviorRecorder(Tracking),
-    new BehaviorRecorder(ContactAttacking),
-    new BehaviorRecorder(ContactAssimilate),
-    new BehaviorRecorder(DelayAssimilate),
 ]

 /**
@@ -62,13 +54,4 @@ function categoryBehaviors(behaviors: IAnyBehaviorRecorder[]): ICategory[] {
    return res;
 }

-function getBehaviorById(id: string): IAnyBehaviorRecorder {
-    for (let i = 0; i < AllBehaviors.length; i++) {
-        if (AllBehaviors[i].behaviorId === id) {
-            return AllBehaviors[i];
-        }
-    }
-    return getBehaviorById("Template");
-}
-
-export { AllBehaviors, AllBehaviorsWithCategory, getBehaviorById, ICategory as ICategoryBehavior };
+export { AllBehaviors, AllBehaviorsWithCategory, ICategory as ICategoryBehavior };
@@ -17,18 +17,46 @@ class BoundaryConstraint extends Behavior<IBoundaryConstraintBehaviorParameter,

    public override behaviorName: string = "$Title";

-    public override iconName: string = "Quantity";
+    public override iconName: string = "Running";

    public override describe: string = "$Intro";

    public override category: string = "$Physics";

 	public override parameterOption = {
-		range: { type: "LR", name: "$range" },
-		strength: { type: "number", name: "$Strength", defaultValue: 1, numberMin: 0, numberStep: .1 }
+		range: {
+			type: "LR",
+			name: "$range"
+		},
+		strength: {
+			type: "number",
+			name: "$Strength",
+			defaultValue: 1,
+            numberMin: 0,
+            numberStep: .1
+		}
 	};

-    public effect = (individual: Individual, group: Group, model: Model, t: number): void => {
+    public override terms: Record<string, Record<string, string>> = {
+        "$Title": {
+            "ZH_CN": "边界约束",
+            "EN_US": "Boundary constraint"
+        },
+		"$range": {
+			"ZH_CN": "约束范围",
+			"EN_US": "Constraint range"
+		},
+		"$Strength": {
+			"ZH_CN": "约束强度系数",
+			"EN_US": "Restraint strength coefficient"
+		},
+        "$Intro": {
+            "ZH_CN": "个体越出边界后将主动返回",
+            "EN_US": "Individuals will return actively after crossing the border"
+        }
+    };
+
+    public effect(individual: Individual, group: Group, model: Model, t: number): void {
        let rangeList: Range[] = this.parameter.range.objects;

 		let fx = 0;
@@ -57,6 +85,7 @@ class BoundaryConstraint extends Behavior<IBoundaryConstraintBehaviorParameter,
 				}

 			} else {
+
 				fx = 0;
 				fy = 0;
 				fz = 0;
@@ -64,33 +93,12 @@ class BoundaryConstraint extends Behavior<IBoundaryConstraintBehaviorParameter,
 			}
 		}

-        if (fLen && fLen !== Infinity) {
-            individual.applyForce(
-                fx * this.parameter.strength / fLen,
-                fy * this.parameter.strength / fLen,
-                fz * this.parameter.strength / fLen
-            );
-        }
+		individual.applyForce(
+			fx * this.parameter.strength,
+			fy * this.parameter.strength,
+			fz * this.parameter.strength
+		);
    }
-
-	public override terms: Record<string, Record<string, string>> = {
-        "$Title": {
-            "ZH_CN": "边界约束",
-            "EN_US": "Boundary constraint"
-        },
-		"$range": {
-			"ZH_CN": "约束范围",
-			"EN_US": "Constraint range"
-		},
-		"$Strength": {
-			"ZH_CN": "约束强度系数",
-			"EN_US": "Restraint strength coefficient"
-		},
-        "$Intro": {
-            "ZH_CN": "个体越出边界后将主动返回",
-            "EN_US": "Individuals will return actively after crossing the border"
-        }
-    };
 }

 export { BoundaryConstraint };
@@ -18,43 +18,44 @@ class Brownian extends Behavior<IBrownianBehaviorParameter, IBrownianBehaviorEve

    public override behaviorName: string = "$Title";

-    public override iconName: string = "ScatterChart";
+    public override iconName: string = "Running";

    public override describe: string = "$Intro";

 	public override category: string = "$Physics";

 	public override parameterOption = {
-		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 }
+		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
+		}
 	};

-	public effect = (individual: Individual, group: Group, model: Model, t: number): void => {
-
-		const {maxFrequency, minFrequency, maxStrength, minStrength} = this.parameter;
-
-		let nextTime = individual.getData("Brownian.nextTime") ?? 
-		minFrequency +  Math.random() * (maxFrequency - minFrequency);
-		let currentTime = individual.getData("Brownian.currentTime") ?? 0;
-		
-		currentTime += t;
-		if (currentTime > nextTime) {
-			individual.applyForce(
-				minStrength + (Math.random() * 2 - 1) * (maxStrength - minStrength),
-				minStrength + (Math.random() * 2 - 1) * (maxStrength - minStrength),
-				minStrength + (Math.random() * 2 - 1) * (maxStrength - minStrength)
-			);
-			nextTime = minFrequency +  Math.random() * (maxFrequency - minFrequency);
-			currentTime = 0;
-		}
-
-		individual.setData("Brownian.nextTime", nextTime);
-		individual.setData("Brownian.currentTime", currentTime);
-	}
-
-	public override terms: Record<string, Record<string, string>> = {
+    public override terms: Record<string, Record<string, string>> = {
        "$Title": {
            "ZH_CN": "布朗运动",
            "EN_US": "Brownian motion"
@@ -80,6 +81,29 @@ class Brownian extends Behavior<IBrownianBehaviorParameter, IBrownianBehaviorEve
            "EN_US": "Minimum strength"
        }
    };
+
+	public effect(individual: Individual, group: Group, model: Model, t: number): void {
+
+		const {maxFrequency, minFrequency, maxStrength, minStrength} = this.parameter;
+
+		let nextTime = individual.getData("Brownian.nextTime") ?? 
+		minFrequency +  Math.random() * (maxFrequency - minFrequency);
+		let currentTime = individual.getData("Brownian.currentTime") ?? 0;
+		
+		currentTime += t;
+		if (currentTime > nextTime) {
+			individual.applyForce(
+				minStrength + (Math.random() * 2 - 1) * (maxStrength - minStrength),
+				minStrength + (Math.random() * 2 - 1) * (maxStrength - minStrength),
+				minStrength + (Math.random() * 2 - 1) * (maxStrength - minStrength)
+			);
+			nextTime = minFrequency +  Math.random() * (maxFrequency - minFrequency);
+			currentTime = 0;
+		}
+
+		individual.setData("Brownian.nextTime", nextTime);
+		individual.setData("Brownian.currentTime", currentTime);
+	}
 }

 export { Brownian };
@@ -1,88 +0,0 @@
-import { Behavior } from "@Model/Behavior";
-import { Group } from "@Model/Group";
-import { Individual } from "@Model/Individual";
-import { Model } from "@Model/Model";
-
-type IContactAssimilateBehaviorParameter = {
-    target: "CLG",
-    assimilate: "CG",
-	success: "number",
-    range: "number"
-}
-
-type IContactAssimilateBehaviorEvent = {}
-
-class ContactAssimilate extends Behavior<IContactAssimilateBehaviorParameter, IContactAssimilateBehaviorEvent> {
-
-    public override behaviorId: string = "ContactAssimilate";
-
-    public override behaviorName: string = "$Title";
-
-    public override iconName: string = "SyncStatus";
-
-    public override describe: string = "$Intro";
-
-    public override category: string = "$Interactive";
-
-	public override parameterOption = {
-		target: { type: "CLG", name: "$Target" },
-        assimilate: { type: "CG", name: "$Assimilate" },
-        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];
-
-			targetGroup.individuals.forEach((targetIndividual) => {
-
-				// 排除自己
-				if (targetIndividual === individual) return;
-				let dis = targetIndividual.distanceTo(individual);
-
-                // 进入同化范围
-				if (dis <= this.parameter.range) {
-					
-                    // 成功判定
-                    if (Math.random() * 100 < this.parameter.success) {
-                        targetIndividual.transfer(assimilateGroup!);
-                    }
-				}
-			});
-		}
-    }
-
-	public override terms: Record<string, Record<string, string>> = {
-        "$Title": {
-            "ZH_CN": "接触同化",
-            "EN_US": "Contact Assimilate"
-        },
-		"$Target": {
-			"ZH_CN": "从哪个群...",
-			"EN_US": "From group..."
-		},
-        "$Assimilate": {
-            "ZH_CN": "到哪个群...",
-			"EN_US": "To group..."
-        },
-        "$Range": {
-            "ZH_CN": "同化范围 (m)",
-			"EN_US": "Assimilate range (m)"
-        },
-		"$Success": {
-			"ZH_CN": "成功率 (%)",
-			"EN_US": "Success rate (%)"
-		},
-        "$Intro": {
-            "ZH_CN": "将进入同化范围内的个体同化至另一个群",
-            "EN_US": "Assimilate individuals who enter the assimilation range to another group"
-        }
-    };
-}
-
-export { ContactAssimilate };
@@ -1,79 +0,0 @@
-import { Behavior } from "@Model/Behavior";
-import { Group } from "@Model/Group";
-import { Individual } from "@Model/Individual";
-import { Model } from "@Model/Model";
-
-type IContactAttackingBehaviorParameter = {
-    target: "CLG",
-	success: "number",
-    range: "number"
-}
-
-type IContactAttackingBehaviorEvent = {}
-
-class ContactAttacking extends Behavior<IContactAttackingBehaviorParameter, IContactAttackingBehaviorEvent> {
-
-    public override behaviorId: string = "ContactAttacking";
-
-    public override behaviorName: string = "$Title";
-
-    public override iconName: string = "DefenderTVM";
-
-    public override describe: string = "$Intro";
-
-    public override category: string = "$Interactive";
-
-	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 }
-	};
-
-    public effect = (individual: Individual, group: Group, model: Model, t: number): void => {
-
-        for (let i = 0; i < this.parameter.target.objects.length; i++) {
-			const targetGroup = this.parameter.target.objects[i];
-
-			targetGroup.individuals.forEach((targetIndividual) => {
-
-				// 排除自己
-				if (targetIndividual === individual) return;
-				let dis = targetIndividual.distanceTo(individual);
-
-                // 进入攻击范围
-				if (dis <= this.parameter.range) {
-					
-                    // 成功判定
-                    if (Math.random() * 100 < this.parameter.success) {
-                        targetIndividual.die();
-                    }
-				}
-			});
-		}
-    }
-
-	public override terms: Record<string, Record<string, string>> = {
-        "$Title": {
-            "ZH_CN": "接触攻击",
-            "EN_US": "Contact Attacking"
-        },
-		"$Target": {
-			"ZH_CN": "攻击目标",
-			"EN_US": "Attacking target"
-		},
-        "$Range": {
-            "ZH_CN": "攻击范围 (m)",
-			"EN_US": "Attacking range (m)"
-        },
-		"$Success": {
-			"ZH_CN": "成功率 (%)",
-			"EN_US": "Success rate (%)"
-		},
-        "$Intro": {
-            "ZH_CN": "攻击进入共进范围的目标群个体",
-            "EN_US": "Attack the target group and individual entering the range"
-        }
-    };
-}
-
-export { ContactAttacking };
@@ -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 IDelayAssimilateBehaviorParameter = {
-    target: "CG",
-    maxDelay: "number",
-	minDelay: "number",
-	success: "number"
-}
-
-type IDelayAssimilateBehaviorEvent = {}
-
-class DelayAssimilate extends Behavior<IDelayAssimilateBehaviorParameter, IDelayAssimilateBehaviorEvent> {
-
-    public override behaviorId: string = "DelayAssimilate";
-
-    public override behaviorName: string = "$Title";
-
-    public override iconName: string = "FunctionalManagerDashboard";
-
-    public override describe: string = "$Intro";
-
-	public override category: string = "$Initiative";
-
-	public override parameterOption = {
-        target: { type: "CG", name: "$Target" },
-		maxDelay: { type: "number", name: "$Max.Delay", defaultValue: 20, numberStep: 1, numberMin: 0 },
-		minDelay: { type: "number", name: "$Min.Delay", defaultValue: 5, numberStep: 1, numberMin: 0 },
-		success: { type: "number", name: "$Success", defaultValue: 90, numberStep: 5, numberMin: 0 }
-	};
-
-	public effect = (individual: Individual, group: Group, model: Model, t: number): void => {
-
-        let assimilateGroup = this.parameter.target.objects;
-        if (!assimilateGroup) return;
-        
-        const {maxDelay, minDelay, success} = this.parameter;
-
-		let nextTime = individual.getData("DelayAssimilate.nextTime") ?? 
-		minDelay +  Math.random() * (maxDelay - minDelay);
-		let currentTime = individual.getData("DelayAssimilate.currentTime") ?? 0;
-		
-		currentTime += t;
-		if (currentTime > nextTime) {
-		
-            // 成功判定
-            if (Math.random() * 100 < success) {
-                individual.transfer(assimilateGroup);
-                nextTime = undefined;
-                currentTime = undefined;
-            } else {
-
-                nextTime = minDelay +  Math.random() * (maxDelay - minDelay);
-			    currentTime = 0;
-            }
-		}
-
-		individual.setData("DelayAssimilate.nextTime", nextTime);
-		individual.setData("DelayAssimilate.currentTime", currentTime);
-	}
-
-	public override terms: Record<string, Record<string, string>> = {
-        "$Title": {
-            "ZH_CN": "延迟同化",
-            "EN_US": "Delayed assimilation"
-        },
-        "$Intro": {
-            "ZH_CN": "随着时间的推移，个体逐渐向另一个群同化。",
-            "EN_US": "Over time, individuals gradually assimilate to another group."
-        },
-        "$Target": {
-            "ZH_CN": "同化目标",
-            "EN_US": "Assimilation target"
-        },
-		"$Max.Delay": {
-            "ZH_CN": "最长时间",
-            "EN_US": "Longest time"
-        },
-		"$Min.Delay": {
-            "ZH_CN": "最短时间",
-            "EN_US": "Shortest time"
-        },
-		"$Success": {
-            "ZH_CN": "成功率",
-            "EN_US": "Minimum strength"
-        },
-        "$Initiative": {
-            "ZH_CN": "主动",
-            "EN_US": "Initiative"
-        }
-    };
-}
-
-export { DelayAssimilate };
@@ -0,0 +1,144 @@
+import { Behavior } from "@Model/Behavior";
+import Group from "@Model/Group";
+import Individual from "@Model/Individual";
+import { Model } from "@Model/Model";
+
+type IDynamicsBehaviorParameter = {
+    mass: "number",
+	maxAcceleration: "number",
+	maxVelocity: "number",
+	resistance: "number"
+}
+
+type IDynamicsBehaviorEvent = {}
+
+class Dynamics extends Behavior<IDynamicsBehaviorParameter, IDynamicsBehaviorEvent> {
+
+    public override behaviorId: string = "Dynamics";
+
+    public override behaviorName: string = "$Title";
+
+    public override iconName: string = "Running";
+
+    public override describe: string = "$Intro";
+
+	public override category: string = "$Physics";
+
+	public override parameterOption = {
+		mass: {
+			name: "$Mass",
+			type: "number",
+			defaultValue: 1,
+			numberStep: .01,
+			numberMin: .001
+		},
+		maxAcceleration: {
+			name: "$Max.Acceleration",
+			type: "number",
+			defaultValue: 5,
+			numberStep: .1,
+			numberMin: 0
+		},
+		maxVelocity: {
+			name: "$Max.Velocity",
+			type: "number",
+			defaultValue: 10,
+			numberStep: .1,
+			numberMin: 0
+		},
+		resistance: {
+			name: "$Resistance",
+			type: "number",
+			defaultValue: 0.5,
+			numberStep: .1,
+			numberMin: 0
+		}
+	};
+
+    public override terms: Record<string, Record<string, string>> = {
+        "$Title": {
+            "ZH_CN": "动力学",
+            "EN_US": "Dynamics"
+        },
+        "$Intro": {
+            "ZH_CN": "一切可以运动物体的必要行为，执行物理法则。",
+            "EN_US": "All necessary behaviors that can move objects and implement the laws of physics."
+        },
+		"$Mass": {
+			"ZH_CN": "质量 (Kg)",
+            "EN_US": "Mass (Kg)"
+		},
+		"$Max.Acceleration": {
+			"ZH_CN": "最大加速度 (m/s²)",
+            "EN_US": "Maximum acceleration (m/s²)"
+		},
+		"$Max.Velocity": {
+			"ZH_CN": "最大速度 (m/s)",
+            "EN_US": "Maximum velocity (m/s)"
+		},
+		"$Resistance": {
+			"ZH_CN": "阻力系数",
+			"EN_US": "Resistance coefficient"
+		},
+		"$Physics": {
+			"ZH_CN": "物理",
+            "EN_US": "Physics"
+		}
+    };
+
+	public override finalEffect(individual: Individual, group: Group, model: Model, t: number): void {
+
+		// 计算当前速度
+		const currentV = individual.vectorLength(individual.velocity);
+
+		// 计算阻力
+		const resistance = currentV * currentV * this.parameter.resistance;
+
+		// 应用阻力
+		if (currentV) {
+			individual.applyForce(
+				(- individual.velocity[0] / currentV) * resistance,
+				(- individual.velocity[1] / currentV) * resistance,
+				(- individual.velocity[2] / currentV) * resistance
+			);
+		}
+		
+		// 计算加速度
+		individual.acceleration[0] = individual.force[0] / this.parameter.mass;
+		individual.acceleration[1] = individual.force[1] / this.parameter.mass;
+		individual.acceleration[2] = individual.force[2] / this.parameter.mass;
+
+		// 加速度约束
+		const lengthA = individual.vectorLength(individual.acceleration);
+		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;
+		}
+
+		// 计算速度
+		individual.velocity[0] = individual.velocity[0] + individual.acceleration[0] * t;
+		individual.velocity[1] = individual.velocity[1] + individual.acceleration[1] * t;
+		individual.velocity[2] = individual.velocity[2] + individual.acceleration[2] * t;
+
+		// 速度约束
+		const lengthV = individual.vectorLength(individual.velocity);
+		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;
+		}
+
+		// 应用速度
+		individual.position[0] = individual.position[0] + individual.velocity[0] * t;
+		individual.position[1] = individual.position[1] + individual.velocity[1] * t;
+		individual.position[2] = individual.position[2] + individual.velocity[2] * t;
+
+		// 清除受力
+		individual.force[0] = 0;
+		individual.force[1] = 0;
+		individual.force[2] = 0;
+	};
+}
+
+export { Dynamics };
@@ -1,136 +0,0 @@
-import { Behavior } from "@Model/Behavior";
-import { Group } from "@Model/Group";
-import { Individual } from "@Model/Individual";
-import { Model } from "@Model/Model";
-
-type IPhysicsDynamicsBehaviorParameter = {
-    mass: "number",
-	maxAcceleration: "number",
-	maxVelocity: "number",
-	resistance: "number",
-	limit: "boolean"
-}
-
-type IPhysicsDynamicsBehaviorEvent = {}
-
-class PhysicsDynamics extends Behavior<IPhysicsDynamicsBehaviorParameter, IPhysicsDynamicsBehaviorEvent> {
-
-    public override behaviorId: string = "PhysicsDynamics";
-
-    public override behaviorName: string = "$Title";
-
-    public override iconName: string = "SliderHandleSize";
-
-    public override describe: string = "$Intro";
-
-	public override category: string = "$Physics";
-
-	public override parameterOption = {
-		mass: { name: "$Mass", type: "number", defaultValue: 1, numberStep: .01, numberMin: .001 },
-		resistance: { name: "$Resistance", type: "number", defaultValue: 2.8, numberStep: .1, numberMin: 0 },
-		limit: { name: "$Limit", type: "boolean", defaultValue: true },
-		maxAcceleration: {
-			name: "$Max.Acceleration", type: "number", defaultValue: 6.25, 
-			numberStep: .1, numberMin: 0, condition: { key: "limit", value: true }
-		},
-		maxVelocity: {
-			name: "$Max.Velocity", type: "number", defaultValue: 12.5,
-			numberStep: .1, numberMin: 0, condition: { key: "limit", value: true }
-		},
-	};
-
-	public override finalEffect = (individual: Individual, group: Group, model: Model, t: number): void => {
-
-		// 计算当前速度
-		const currentV = individual.vectorLength(individual.velocity);
-
-		// 计算阻力
-		const resistance = currentV * currentV * this.parameter.resistance;
-
-		// 应用阻力
-		if (currentV) {
-			individual.applyForce(
-				(- individual.velocity[0] / currentV) * resistance,
-				(- individual.velocity[1] / currentV) * resistance,
-				(- individual.velocity[2] / currentV) * resistance
-			);
-		}
-		
-		// 计算加速度
-		individual.acceleration[0] = individual.force[0] / this.parameter.mass;
-		individual.acceleration[1] = individual.force[1] / this.parameter.mass;
-		individual.acceleration[2] = individual.force[2] / this.parameter.mass;
-
-		// 加速度约束
-		if (this.parameter.limit) {
-			const lengthA = individual.vectorLength(individual.acceleration);
-			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;
-			}
-		}
-		
-		// 计算速度
-		individual.velocity[0] = individual.velocity[0] + individual.acceleration[0] * t;
-		individual.velocity[1] = individual.velocity[1] + individual.acceleration[1] * t;
-		individual.velocity[2] = individual.velocity[2] + individual.acceleration[2] * t;
-
-		// 速度约束
-		if (this.parameter.limit) {
-			const lengthV = individual.vectorLength(individual.velocity);
-			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;
-			}
-		}
-
-		// 应用速度
-		individual.position[0] = individual.position[0] + individual.velocity[0] * t;
-		individual.position[1] = individual.position[1] + individual.velocity[1] * t;
-		individual.position[2] = individual.position[2] + individual.velocity[2] * t;
-
-		// 清除受力
-		individual.force[0] = 0;
-		individual.force[1] = 0;
-		individual.force[2] = 0;
-	};
-	
-    public override terms: Record<string, Record<string, string>> = {
-        "$Title": {
-            "ZH_CN": "物理动力学",
-            "EN_US": "Physics dynamics"
-        },
-        "$Intro": {
-            "ZH_CN": "一切按照物理规则运动物体的行为, 按照牛顿经典物理运动公式执行。",
-            "EN_US": "The behavior of all moving objects according to physical rules is carried out according to Newton's classical physical motion formula."
-        },
-		"$Limit": {
-			"ZH_CN": "开启限制",
-            "EN_US": "Enable limit"
-		},
-		"$Mass": {
-			"ZH_CN": "质量 (Kg)",
-            "EN_US": "Mass (Kg)"
-		},
-		"$Max.Acceleration": {
-			"ZH_CN": "最大加速度 (m/s²)",
-            "EN_US": "Maximum acceleration (m/s²)"
-		},
-		"$Max.Velocity": {
-			"ZH_CN": "最大速度 (m/s)",
-            "EN_US": "Maximum velocity (m/s)"
-		},
-		"$Resistance": {
-			"ZH_CN": "阻力系数",
-			"EN_US": "Resistance coefficient"
-		},
-		"$Physics": {
-			"ZH_CN": "物理",
-            "EN_US": "Physics"
-		}
-    };
-}
-
-export { PhysicsDynamics };
@@ -7,15 +7,11 @@ type ITemplateBehaviorParameter = {
    testNumber: "number";
    testString: "string";
    testBoolean: "boolean";
-    testColor: "color";
-    testOption: "option";
    testR: "R";
    testG: "G";
    testLR: "LR";
    testLG: "LG";
    testVec: "vec";
-    testCG: "CG",
-    testCLG: "CLG",
 }

 type ITemplateBehaviorEvent = {}
@@ -33,26 +29,52 @@ class Template extends Behavior<ITemplateBehaviorParameter, ITemplateBehaviorEve
    public override category: string = "$Category";

    public override parameterOption = {
-        testNumber: { name: "$Test", type: "number", defaultValue: 1, numberMax: 10, numberMin: 0, numberStep: 1 },
-        testString: { name: "$Test", type: "string", defaultValue: "default", maxLength: 12 },
-        testColor: { name: "$Test", type: "color", defaultValue: [.5, .1, 1], colorNormal: true },
-        testOption: { name: "$Test", type: "option", defaultValue: "T", allOption: [
-            { key: "P", name: "$Test"}, { key: "T", name: "$Title"}
-        ]},
-        testBoolean: { name: "$Test", type: "boolean", defaultValue: false, iconName: "Send" },
-        testR: { name: "$Test", type: "R" },
-        testG: { name: "$Test", type: "G" },
-        testLR: { name: "$Test", type: "LR" },
-        testLG: { name: "$Test", type: "LG" },
-        testCG: { name: "$Test", type: "CG" },
-        testCLG: { name: "$Test", type: "CLG" },
-        testVec: { name: "$Test", type: "vec", defaultValue: [1, 2, 3], numberMax: 10, numberMin: 0, numberStep: 1 }
+        testNumber: {
+            name: "$Test",
+            type: "number",
+            defaultValue: 1,
+            numberMax: 10,
+            numberMin: 0,
+            numberStep: 1
+        },
+        testString: {
+            name: "$Test",
+            type: "string",
+            defaultValue: "default",
+            maxLength: 12
+        },
+        testBoolean: {
+            name: "$Test",
+            type: "boolean",
+            defaultValue: false,
+            iconName: "Send"
+        },
+        testR: {
+            name: "$Test",
+            type: "R"
+        },
+        testG: {
+            name: "$Test",
+            type: "G"
+        },
+        testLR: {
+            name: "$Test",
+            type: "LR"
+        },
+        testLG: {
+            name: "$Test",
+            type: "LG"
+        },
+        testVec: {
+            name: "$Test",
+            type: "vec",
+            defaultValue: [1, 2, 3],
+            numberMax: 10,
+            numberMin: 0,
+            numberStep: 1
+        }
    };

-    public effect = (individual: Individual, group: Group, model: Model, t: number): void => {
-        
-    }
-
    public override terms: Record<string, Record<string, string>> = {
        "$Title": {
            "ZH_CN": "行为",
@@ -65,12 +87,12 @@ class Template extends Behavior<ITemplateBehaviorParameter, ITemplateBehaviorEve
        "$Test": {
            "ZH_CN": "测试参数",
            "EN_US": "Test Parameter"
-        },
-        "$Category": {
-            "ZH_CN": "测序模板",
-            "EN_US": "Test template"
        }
    };
+
+    public effect(individual: Individual, group: Group, model: Model, t: number): void {
+        
+    }
 }

 export { Template };
@@ -1,157 +0,0 @@
-import { Behavior } from "@Model/Behavior";
-import { Group } from "@Model/Group";
-import { Individual } from "@Model/Individual";
-import { Model } from "@Model/Model";
-
-type ITrackingBehaviorParameter = {
-    target: "CLG",
-	strength: "number",
-    range: "number",
-    lock: "boolean"
-}
-
-type ITrackingBehaviorEvent = {}
-
-class Tracking extends Behavior<ITrackingBehaviorParameter, ITrackingBehaviorEvent> {
-
-    public override behaviorId: string = "Tracking";
-
-    public override behaviorName: string = "$Title";
-
-    public override iconName: string = "Bullseye";
-
-    public override describe: string = "$Intro";
-
-    public override category: string = "$Interactive";
-
-	public override parameterOption = {
-		target: { type: "CLG", name: "$Target" },
-        lock: { type: "boolean", name: "$Lock", defaultValue: false },
-        range: { type: "number", name: "$Range", defaultValue: 4, numberMin: 0, numberStep: .1 },
-		strength: { type: "number", name: "$Strength", defaultValue: 1, numberMin: 0, numberStep: .1 }
-	};
-
-    private target: Individual | undefined = undefined;
-    private currentDistant: number = Infinity;
-
-    private searchTarget(individual: Individual) {
-
-		for (let i = 0; i < this.parameter.target.objects.length; i++) {
-			const targetGroup = this.parameter.target.objects[i];
-
-			targetGroup.individuals.forEach((targetIndividual) => {
-
-				// 排除自己
-				if (targetIndividual === individual) return;
-				let dis = targetIndividual.distanceTo(individual);
-
-				if (dis < this.currentDistant && dis <= this.parameter.range) {
-					this.target = targetIndividual;
-					this.currentDistant = dis;
-				}
-
-			});
-		}
-    }
-
-    private clearTarget() {
-        this.target = undefined as Individual | undefined;
-        this.currentDistant = Infinity;
-    }
-
-    public effect = (individual: Individual, group: Group, model: Model, t: number): void => {
-
-        this.clearTarget();
-
-        if (this.parameter.lock) {
-
-            let isValidTarget = false;
-            this.target = individual.getData("Tracking.lock.target");
-
-            if (this.target) {
-
-                // 校验目标所在的群是否仍是目标
-                let isInTarget = false;
-                for (let i = 0; i < this.parameter.target.objects.length; i++) {
-                    if (this.parameter.target.objects[i].equal(this.target.group)) {
-                        isInTarget = true;
-                        break;
-                    }
-                }
-
-                // 如果还在目标范围内，校验距离
-                if (isInTarget) {
-                    let dis = individual.distanceTo(this.target);
-
-                    // 校验成功
-                    if (dis <= this.parameter.range) {
-                        this.currentDistant = dis;
-                        isValidTarget = true;
-                    }
-                }
-            }
-
-            // 如果目标无效，尝试搜索新的目标
-            if (!isValidTarget) {
-
-                this.clearTarget();
-                this.searchTarget(individual);
-
-                // 如果成功搜索，缓存目标
-                if (this.target && this.currentDistant && this.currentDistant !== Infinity) {
-                    individual.setData("Tracking.lock.target", this.target);
-                }
-
-                // 搜索失败，清除目标
-                else {
-                    individual.setData("Tracking.lock.target", undefined);
-                }
-            }
-        }
-
-        else {
-            this.searchTarget(individual);
-        }
-
-		if (this.target && this.currentDistant && this.currentDistant !== Infinity) {
-			individual.applyForce(
-				(this.target.position[0] - individual.position[0]) * this.parameter.strength / this.currentDistant,
-				(this.target.position[1] - individual.position[1]) * this.parameter.strength / this.currentDistant,
-				(this.target.position[2] - individual.position[2]) * this.parameter.strength / this.currentDistant
-			);
-		}
-    }
-
-	public override terms: Record<string, Record<string, string>> = {
-        "$Title": {
-            "ZH_CN": "追踪",
-            "EN_US": "Tracking"
-        },
-		"$Target": {
-			"ZH_CN": "追踪目标",
-			"EN_US": "Tracking target"
-		},
-        "$Lock": {
-            "ZH_CN": "追踪锁定",
-			"EN_US": "Tracking lock"
-        },
-        "$Range": {
-            "ZH_CN": "追踪范围 (m)",
-			"EN_US": "Tracking range (m)"
-        },
-		"$Strength": {
-			"ZH_CN": "追踪强度系数",
-			"EN_US": "Tracking intensity coefficient"
-		},
-        "$Intro": {
-            "ZH_CN": "个体将主动向最近的目标群个体发起追踪",
-            "EN_US": "The individual will actively initiate tracking to the nearest target group individual"
-        },
-		"$Interactive": {
-			"ZH_CN": "交互",
-            "EN_US": "Interactive"
-		}
-    };
-}
-
-export { Tracking };
@@ -1,4 +1,4 @@
-@import "../../Component/Theme/Theme.scss";
+@import "../Theme/Theme.scss";

 $line-min-height: 24px;

@@ -1,8 +1,8 @@
 import { Component, ReactNode } from "react";
 import { Icon } from "@fluentui/react";
-import { AllI18nKeys } from "@Component/Localization/Localization";
-import { ObjectID } from "@Model/Model";
-import { TextField, ITextFieldProps } from "@Input/TextField/TextField";
+import { Localization, AllI18nKeys } from "@Component/Localization/Localization";
+import { ObjectID } from "@Model/Renderer";
+import { TextField, ITextFieldProps } from "../TextField/TextField";
 import "./AttrInput.scss";

 interface IAttrInputProps extends ITextFieldProps {
@@ -94,8 +94,8 @@ div.behavior-list {
            }

            div.behavior-content-view {
-                width: calc( 100% - 55px );
-                padding-right: 10px;
+                width: calc( 100% - 50px );
+                padding-right: 5px;
                max-width: 125px;
                height: $behavior-item-height;
                display: flex;
@@ -1,13 +1,11 @@
+import { Theme } from "@Component/Theme/Theme";
 import { Component, ReactNode } from "react";
-import { Icon } from "@fluentui/react";
+import { IRenderBehavior, Behavior, BehaviorRecorder } from "@Model/Behavior";
 import { useSettingWithEvent, IMixinSettingProps } from "@Context/Setting";
 import { useStatus, IMixinStatusProps } from "@Context/Status";
-import { IRenderBehavior, Behavior, BehaviorRecorder } from "@Model/Behavior";
-import { Theme } from "@Component/Theme/Theme";
+import { Icon } from "@fluentui/react";
 import { ConfirmPopup } from "@Component/ConfirmPopup/ConfirmPopup";
-import { Message } from "@Input/Message/Message";
-
-
+import { Message } from "@Component/Message/Message";
 import "./BehaviorList.scss";

 interface IBehaviorListProps {
@@ -1,4 +1,4 @@
-@import "../../Component/Theme/Theme.scss";
+@import "../Theme/Theme.scss";

 div.behavior-picker-list {
    width: 100%;
@@ -1,11 +1,11 @@
+import { DetailsList } from "@Component/DetailsList/DetailsList";
 import { Component, ReactNode, createRef } from "react";
-import { Icon } from "@fluentui/react";
 import { Behavior } from "@Model/Behavior";
+import { Icon } from "@fluentui/react";
 import { useSettingWithEvent, IMixinSettingProps } from "@Context/Setting";
 import { useStatusWithEvent, IMixinStatusProps } from "@Context/Status";
-import { DetailsList } from "@Component/DetailsList/DetailsList";
 import { Localization } from "@Component/Localization/Localization";
-import { PickerList } from "@Input/PickerList/PickerList";
+import { PickerList } from "@Component/PickerList/PickerList";
 import "./BehaviorPicker.scss";

 interface IBehaviorPickerProps {
@@ -145,10 +145,10 @@ class BehaviorPicker extends Component<IBehaviorPickerProps & IMixinSettingProps

    private renderPickerList(): ReactNode {
        return <PickerList
-            item={this.getAllData()}
+            objectList={this.getAllData()}
            noData="Behavior.Picker.Add.Nodata"
            target={this.clickLineRef}
-            click={((item) => {
+            clickObjectItems={((item) => {
                if (item instanceof Behavior && this.props.add) {
                    this.props.add(item);
                }
@@ -1,15 +1,15 @@
 import { Component, ReactNode, Fragment } from "react";
 import { Popup } from "@Context/Popups";
-import { useStatus, IMixinStatusProps, randomColor } from "@Context/Status";
-import { useSettingWithEvent, IMixinSettingProps } from "@Context/Setting";
 import { Localization } from "@Component/Localization/Localization";
-import { SearchBox } from "@Input/SearchBox/SearchBox";
+import { SearchBox } from "@Component/SearchBox/SearchBox";
 import { ConfirmContent } from "@Component/ConfirmPopup/ConfirmPopup";
 import { BehaviorList } from "@Component/BehaviorList/BehaviorList";
 import { AllBehaviorsWithCategory, ICategoryBehavior } from "@Behavior/Behavior";
-import { Message } from "@Input/Message/Message";
+import { Message } from "@Component/Message/Message";
 import { IRenderBehavior, BehaviorRecorder } from "@Model/Behavior";
-
+import { useStatus, IMixinStatusProps, randomColor } from "@Context/Status";
+import { useSettingWithEvent, IMixinSettingProps } from "@Context/Setting";
+import { ConfirmPopup } from "@Component/ConfirmPopup/ConfirmPopup";
 import "./BehaviorPopup.scss";

 interface IBehaviorPopupProps {
@@ -117,26 +117,10 @@ class BehaviorPopupComponent extends Component<
            if (this.props.status && recorder instanceof BehaviorRecorder) {
                let newBehavior = this.props.status.model.addBehavior(recorder);

-                // 根据用户的命名搜索下一个名字
-                let searchKey = recorder.getTerms(
-                    recorder.behaviorName, this.props.setting?.language
-                );
-                
-                let nextIndex = 1;
-                this.props.status.model.behaviorPool.forEach((obj) => {
-                    if (obj.behaviorId === recorder.behaviorId && obj.name.indexOf(searchKey) >= 0) {
-                        let searchRes = obj.name.match(/(\d+)$/);
-                        if (searchRes) {
-                            let nameNumber = parseInt(searchRes[1]);
-                            if (!isNaN(nameNumber)) {
-                                nextIndex = Math.max(nextIndex, nameNumber + 1);
-                            }
-                        }
-                    }
-                });
-
                // 初始化名字
-                newBehavior.name = `${searchKey} ${nextIndex}`;
+                newBehavior.name = recorder.getTerms(
+                    recorder.behaviorName, this.props.setting?.language
+                ) + " " + (recorder.nameIndex - 1).toString();

                // 赋予一个随机颜色
                newBehavior.color = randomColor(true);
@@ -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;
-	}
-}
@@ -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 };
@@ -1,6 +1,6 @@
 import { Component, createRef, ReactNode } from "react";
+import { TextField, ITextFieldProps } from "@Component/TextField/TextField";
 import { Callout, ColorPicker, DirectionalHint } from "@fluentui/react";
-import { TextField, ITextFieldProps } from "@Input/TextField/TextField";
 import "./ColorInput.scss";

 interface IColorInputProps extends ITextFieldProps {
@@ -1,4 +1,4 @@
-@import "../../Component/Theme/Theme.scss";
+@import "../Theme/Theme.scss";

 $line-min-height: 24px;

@@ -1,7 +1,7 @@
 import { Component, createRef, ReactNode } from "react";
+import { PickerList, IDisplayItem } from "../PickerList/PickerList";
+import { TextField, ITextFieldProps } from "../TextField/TextField";
 import { Icon } from "@fluentui/react";
-import { ComboList, IDisplayItem } from "@Input/ComboList/ComboList";
-import { TextField, ITextFieldProps } from "@Input/TextField/TextField";
 import { Localization } from "@Component/Localization/Localization";
 import "./ComboInput.scss";
 interface IComboInputProps extends ITextFieldProps {
@@ -26,11 +26,13 @@ class ComboInput extends Component<IComboInputProps, IComboInputState> {
    private pickerTarget = createRef<HTMLDivElement>();

    private renderPicker() {
-        return <ComboList
+        return <PickerList
            target={this.pickerTarget}
-            item={this.props.allOption ?? []}
-            focus={this.props.value}
-            click={((item) => {
+            displayItems={(this.props.allOption ?? []).map((item) => {
+                return item.key === this.props.value?.key ? 
+                    {...item, mark: true} : item;
+            })}
+            clickDisplayItems={((item) => {
                if (this.props.valueChange) {
                    this.props.valueChange(item);
                }
@@ -62,8 +64,8 @@ class ComboInput extends Component<IComboInputProps, IComboInputState> {
                <div className="value-view">
                    {
                        this.props.value ? 
-                            <Localization i18nKey={this.props.value.i18n} options={this.props.value.i18nOption}/> :
-                            <Localization i18nKey="Input.Error.Combo"/>
+                        <Localization i18nKey={this.props.value.nameKey}/> :
+                        null
                    }
                </div>
                <div className="list-button">
@@ -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 {
-            font-size: 22px;
-        }
-
-        div.command-button-loading {
-            
-            div.ms-Spinner-circle {
-                border-width: 2px;
-            }
+        span.ms-Button-flexContainer i.ms-Icon {
+            font-size: 25px;
        }
    }

-    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 {
-    border-top-color: rgba($color: #FFFFFF, $alpha: .9);
-    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 {
+div.command-bar.dark button.ms-Button.command-button.active,
+div.command-bar.dark button.ms-Button.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 div.command-button:hover {
+div.command-bar.light button.ms-Button.command-button.active,
+div.command-bar.light button.ms-Button.command-button:hover {
    background-color: rgba($color: #000000, $alpha: .08);
    color: rgba($color: #000000, $alpha: 1);
 }
@@ -1,120 +1,31 @@
-import { Component, ReactNode, FunctionComponent } from "react";
-import { DirectionalHint, Icon, Spinner } from "@fluentui/react";
+import { BackgroundLevel, Theme } from "@Component/Theme/Theme";
+import { DirectionalHint, IconButton } from "@fluentui/react";
+import { LocalizationTooltipHost } from "../Localization/LocalizationTooltipHost";
 import { useSetting, IMixinSettingProps } from "@Context/Setting";
 import { useStatusWithEvent, IMixinStatusProps } from "@Context/Status";
-import { BackgroundLevel, Theme } from "@Component/Theme/Theme";
-import { LocalizationTooltipHost } from "@Component/Localization/LocalizationTooltipHost";
-import { AllI18nKeys } from "@Component/Localization/Localization";
-import { SettingPopup } from "@Component/SettingPopup/SettingPopup";
-import { BehaviorPopup } from "@Component/BehaviorPopup/BehaviorPopup";
+import { AllI18nKeys } from "../Localization/Localization";
+import { SettingPopup } from "../SettingPopup/SettingPopup";
+import { BehaviorPopup } from "../BehaviorPopup/BehaviorPopup";
+import { Component, ReactNode } from "react";
 import { MouseMod } from "@GLRender/ClassicRenderer";
-import { ArchiveSave } from "@Context/Archive";
-import { ActuatorModel } from "@Model/Actuator";
 import "./CommandBar.scss";

-const COMMAND_BAR_WIDTH = 45;
-
-interface IRenderButtonParameter {
-    i18NKey: AllI18nKeys;
-    iconName?: string;
-    click?: () => void;
-    active?: boolean;
-    isLoading?: boolean;
+interface ICommandBarProps {
+    width: number;
 }

-interface ICommandBarState {
-    isSaveRunning: boolean;
-}
-
-const CommandButton: FunctionComponent<IRenderButtonParameter> = (param) => {
-    return <LocalizationTooltipHost 
-        i18nKey={param.i18NKey}
-        directionalHint={DirectionalHint.rightCenter}
-    >
-        <div
-            style={{ height: COMMAND_BAR_WIDTH }}
-            onClick={ param.isLoading ? undefined : param.click }
-            className={"command-button on-end" + (param.active ? " active" : "")}
-        >
-            {param.isLoading ? 
-                <Spinner className="command-button-loading"/> :
-                <Icon iconName={param.iconName}/>
-            }
-        </div>
-    </LocalizationTooltipHost>
-}
@useSetting
@useStatusWithEvent("mouseModChange", "actuatorStartChange")
-class CommandBar extends Component<IMixinSettingProps & IMixinStatusProps, ICommandBarState> {
+class CommandBar extends Component<ICommandBarProps & IMixinSettingProps & IMixinStatusProps> {

-    public state: Readonly<ICommandBarState> = {
-        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 {
+    render(): ReactNode {

        const mouseMod = this.props.status?.mouseMod ?? MouseMod.Drag;

        return <Theme
            className="command-bar"
            backgroundLevel={BackgroundLevel.Level2}
-            style={{ width: COMMAND_BAR_WIDTH }}
+            style={{ width: this.props.width }}
            onClick={() => {
                if (this.props.setting) {
                    this.props.setting.layout.focus("");
@@ -122,89 +33,84 @@ class CommandBar extends Component<IMixinSettingProps & IMixinStatusProps, IComm
            }}
        >
            <div>
-
-                <ArchiveSave
-                    running={this.state.isSaveRunning}
-                    afterRunning={() => {
-                        this.setState({ isSaveRunning: false });
-                    }}
-                />
-
-                <CommandButton
-                    iconName="Save"
-                    i18NKey="Command.Bar.Save.Info"
-                    isLoading={this.state.isSaveRunning}
-                    click={() => {
-                        this.setState({
-                            isSaveRunning: true
-                        });
-                    }}
-                />
-
-                {this.renderPlayActionButton()}
-
-                <CommandButton
-                    iconName="HandsFree"
-                    i18NKey="Command.Bar.Drag.Info"
-                    active={mouseMod === MouseMod.Drag}
-                    click={() => this.props.status ? this.props.status.setMouseMod(MouseMod.Drag) : undefined}
-                />
-
-                <CommandButton
-                    iconName="TouchPointer"
-                    i18NKey="Command.Bar.Select.Info"
-                    active={mouseMod === MouseMod.click}
-                    click={() => this.props.status ? this.props.status.setMouseMod(MouseMod.click) : undefined}
-                />
-
-                <CommandButton
-                    iconName="WebAppBuilderFragmentCreate"
-                    i18NKey="Command.Bar.Add.Group.Info"
-                    click={() => {
+                {this.getRenderButton({ iconName: "Save", i18NKey: "Command.Bar.Save.Info" })}
+                {this.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
+                })}
+                {this.getRenderButton({
+                    iconName: "HandsFree", i18NKey: "Command.Bar.Drag.Info", 
+                    active: mouseMod === MouseMod.Drag,
+                    click: () => this.props.status ? this.props.status.setMouseMod(MouseMod.Drag) : undefined
+                })}
+                {this.getRenderButton({
+                    iconName: "TouchPointer", i18NKey: "Command.Bar.Select.Info",
+                    active: mouseMod === MouseMod.click,
+                    click: () => this.props.status ? this.props.status.setMouseMod(MouseMod.click) : undefined
+                })}
+                {this.getRenderButton({
+                    iconName: "WebAppBuilderFragmentCreate",
+                    i18NKey: "Command.Bar.Add.Group.Info",
+                    click: () => {
                        this.props.status ? this.props.status.newGroup() : undefined;
-                    }}
-                />
-
-                <CommandButton
-                    iconName="ProductVariant"
-                    i18NKey="Command.Bar.Add.Range.Info"
-                    click={() => {
+                    }
+                })}
+                {this.getRenderButton({
+                    iconName: "ProductVariant",
+                    i18NKey: "Command.Bar.Add.Range.Info",
+                    click: () => {
                        this.props.status ? this.props.status.newRange() : undefined;
-                    }}
-                />
-
-                <CommandButton
-                    iconName="Running"
-                    i18NKey="Command.Bar.Add.Behavior.Info"
-                    click={() => {
+                    }
+                })}
+                {this.getRenderButton({
+                    iconName: "Running",
+                    i18NKey: "Command.Bar.Add.Behavior.Info",
+                    click: () => {
                        this.props.status?.popup.showPopup(BehaviorPopup, {});
-                    }}
-                />
-
-                <CommandButton
-                    iconName="Tag"
-                    i18NKey="Command.Bar.Add.Tag.Info"
-                    click={() => {
+                    }
+                })}
+                {this.getRenderButton({
+                    iconName: "Tag",
+                    i18NKey: "Command.Bar.Add.Tag.Info",
+                    click: () => {
                        this.props.status ? this.props.status.newLabel() : undefined;
-                    }}
-                />
-
-                <CommandButton
-                    iconName="Camera"
-                    i18NKey="Command.Bar.Camera.Info"
-                />
+                    }
+                })}
+                {this.getRenderButton({ iconName: "Camera", i18NKey: "Command.Bar.Camera.Info" })}
            </div>
            <div>
-                <CommandButton
-                    iconName="Settings"
-                    i18NKey="Command.Bar.Setting.Info"
-                    click={() => {
+                {this.getRenderButton({
+                    iconName: "Settings",
+                    i18NKey: "Command.Bar.Setting.Info",
+                    click: () => {
                        this.props.status?.popup.showPopup(SettingPopup, {});
-                    }}
-                />
+                    }
+                })}
            </div>
        </Theme>
    }
+
+    private getRenderButton(param: {
+        i18NKey: AllI18nKeys;
+        iconName?: string;
+        click?: () => void;
+        active?: boolean;
+    }): ReactNode {
+        return <LocalizationTooltipHost 
+            i18nKey={param.i18NKey}
+            directionalHint={DirectionalHint.rightCenter}
+        >
+            <IconButton
+                style={{ height: this.props.width }}
+                iconProps={{ iconName: param.iconName }}
+                onClick={ param.click }
+                className={"command-button on-end" + (param.active ? " active" : "")}
+            />
+        </LocalizationTooltipHost>
+    }
 }

 export { CommandBar };
@@ -1,6 +1,6 @@
-import { Component, ReactNode } from "react";
 import { Popup } from "@Context/Popups";
-import { Message } from "@Input/Message/Message";
+import { Component, ReactNode } from "react";
+import { Message } from "@Component/Message/Message";
 import { Theme } from "@Component/Theme/Theme";
 import { AllI18nKeys, Localization } from "@Component/Localization/Localization";
 import "./ConfirmPopup.scss";
@@ -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
-								i18nKey={this.props.infoI18n}
-								options={this.props.infoI18nOption}
-							/> : null
+                            <Message i18nKey={this.props.infoI18n}/> :
+                            null
            }
 		</ConfirmContent>
 	}
@@ -119,10 +119,6 @@ div.app-container {
 		flex-shrink: 1;
 	}

-	div.app-panel.hide-scrollbar {
-		overflow: hidden;
-	}
-
 	div.app-panel.hide-scrollbar::-webkit-scrollbar {
 		width : 0;  /*高宽分别对应横竖滚动条的尺寸*/
 		height: 0;
@@ -1,11 +1,11 @@
-import { Component, ReactNode, MouseEvent } from "react";
-import { DirectionalHint } from "@fluentui/react";
-import { Themes } from "@Context/Setting";
-import { ILayout, LayoutDirection } from "@Context/Layout";
 import { Localization } from "@Component/Localization/Localization";
-import { BackgroundLevel, FontLevel } from "@Component/Theme/Theme";
-import { getPanelById, getPanelInfoById } from "@Panel/Panel";
-import { LocalizationTooltipHost } from "@Component/Localization/LocalizationTooltipHost";
+import { Theme, BackgroundLevel, FontLevel } from "@Component/Theme/Theme";
+import { Themes } from "@Context/Setting";
+import { DirectionalHint } from "@fluentui/react";
+import { ILayout, LayoutDirection } from "@Context/Layout";
+import { Component, ReactNode, MouseEvent } from "react";
+import { getPanelById, getPanelInfoById } from "../../Panel/Panel";
+import { LocalizationTooltipHost } from "../Localization/LocalizationTooltipHost";
 import "./Container.scss";

 interface IContainerProps extends ILayout {
@@ -1,6 +1,6 @@
-import { Component, ReactNode } from "react";
 import { Icon } from "@fluentui/react";
-import { BackgroundLevel, FontLevel, Theme } from "@Component/Theme/Theme";
+import { Component, ReactNode } from "react";
+import { BackgroundLevel, FontLevel, Theme } from "../Theme/Theme";
 import "./DetailsList.scss";

 type IItems = Record<string, any> & {key: string, select?: boolean};
@@ -1,19 +1,11 @@
-@import "../Theme/Theme.scss";
-
-div.header-bar {   
+div.header-bar {
+    padding: 0 3px;
    box-sizing: border-box;
    display: flex;
    align-items: center;
    justify-content: space-between;
    user-select: none;

-    // 在 Electron 中用于拖拽窗口
-    -webkit-app-region: drag;
-
-    div.title {
-        padding-left: 3px;
-    }
-
    div.title > i, div.fps-view > i {
        font-size: 25px;
        vertical-align: middle;
@@ -32,63 +24,4 @@ div.header-bar {
            white-space: nowrap;
        }
    }
-
-    div.header-windows-action {
-        height: 100%;
-        width: 145px;
-        min-width: 145px;
-        display: flex;
-
-        // 在 Electron 中用于拖拽窗口
-        -webkit-app-region: no-drag;
-
-        div.action-button {
-            width: 100%;
-            height: 100%;
-            display: flex;
-            justify-content: center;
-            align-items: center;
-            font-size: .8em;
-        }
-
-        div.action-button:hover {
-            cursor: pointer;
-        }
-
-        div.action-button.close-button:hover {
-            color: #FFFFFF !important;
-            background-color: $lt-red !important;
-        }
-    }
-
-    div.header-windows-action.light {
-
-        div.action-button:hover {
-            background-color: rgba($color: #000000, $alpha: .1);
-        }
-    }
-
-    div.header-windows-action.dark {
-
-        div.action-button:hover {
-            background-color: rgba($color: #FFFFFF, $alpha: .1);
-        }
-    }
-}
-
-div.header-bar.desktop-header-bar {
-    font-size: .9em;
-
-    div.title > i, div.fps-view > i {
-        font-size: 18px;
-    }
-
-    div.title > span {
-        display: inline-block;
-        padding-left: 5px;
-    }
-
-    div.title {
-        padding-left: 5px;
-    }
 }
@@ -1,59 +1,49 @@
 import { Component, ReactNode } from "react";
-import { Icon } from '@fluentui/react/lib/Icon';
-import { useStatusWithEvent, useStatus, IMixinStatusProps } from "@Context/Status";
-import { useSettingWithEvent, IMixinSettingProps, Platform } from "@Context/Setting";
+import { useStatus, IMixinStatusProps } from "@Context/Status";
+import { useSetting, IMixinSettingProps } from "@Context/Setting";
 import { Theme, BackgroundLevel, FontLevel } from "@Component/Theme/Theme";
-import { LocalizationTooltipHost } from "@Component/Localization/LocalizationTooltipHost";
-import { useElectronWithEvent, IMixinElectronProps } from "@Context/Electron";
-import { I18N } from "@Component/Localization/Localization";
+import { Icon } from '@fluentui/react/lib/Icon';
+import { LocalizationTooltipHost } from "../Localization/LocalizationTooltipHost";
+import { I18N } from "../Localization/Localization";
 import "./HeaderBar.scss";
+import { Tooltip, TooltipHost } from "@fluentui/react";

 interface IHeaderBarProps {
    height: number;
 }

-interface IHeaderFpsViewState {
+interface HeaderBarState {
    renderFps: number;
    physicsFps: number;
 }

+/**
+ * 头部信息栏
+ */
+@useSetting
@useStatus
-class HeaderFpsView extends Component<IMixinStatusProps & IMixinSettingProps, IHeaderFpsViewState> {
+class HeaderBar extends Component<
+    IHeaderBarProps & IMixinStatusProps & IMixinSettingProps,
+    HeaderBarState
+> {

    public state = {
        renderFps: 0,
        physicsFps: 0,
    }

+    private changeListener = () => {
+        this.forceUpdate();
+    }
+
    private updateTime: number = 0;

-    private renderFpsCalc: (t: number) => void = () => {};
-    private physicsFpsCalc: (t: number) => void = () => {};
-
-    public componentDidMount() {
-        const { status } = this.props;
-        this.renderFpsCalc = this.createFpsCalc("renderFps");
-        this.physicsFpsCalc = this.createFpsCalc("physicsFps");
-        if (status) {
-            status.on("physicsLoop", this.physicsFpsCalc);
-            status.on("renderLoop", this.renderFpsCalc);
-        }
-    }
-
-    public componentWillUnmount() {
-        const { status } = this.props;
-        if (status) {
-            status.off("physicsLoop", this.physicsFpsCalc);
-            status.off("renderLoop", this.renderFpsCalc);
-        }
-    }
-
    private createFpsCalc(type: "renderFps" | "physicsFps") {
        return (t: number) => {
            if (t === 0) {
                return;
            }
-            let newState: IHeaderFpsViewState = {} as any;
+            let newState: HeaderBarState = {} as any;
            newState[type] = 1 / t;
            if (this.updateTime > 20) {
                this.updateTime = 0;
@@ -63,113 +53,53 @@ class HeaderFpsView extends Component<IMixinStatusProps & IMixinSettingProps, IH
        }
    }

-    public render() {
-
-        const fpsInfo = {
-            renderFps: Math.floor(this.state.renderFps).toString(),
-            physicsFps: Math.floor(this.state.physicsFps).toString()
-        };
-
-        return <LocalizationTooltipHost i18nKey="Header.Bar.Fps.Info" options={fpsInfo}>
-                <div className="fps-view">
-                    <Icon iconName="SpeedHigh"></Icon>
-                    <span>{I18N(this.props, "Header.Bar.Fps", fpsInfo)}</span>
-                </div>
-        </LocalizationTooltipHost>
-    }
-}
-
-@useElectronWithEvent("windowsSizeStateChange")
-class HeaderWindowsAction extends Component<IMixinElectronProps> {
-
-    public render() {
-
-        const isMaxSize = this.props.electron?.isMaximized();
-
-        return <Theme className="header-windows-action">
-            <div
-                className="action-button"
-                onClick={() => {
-                    this.props.electron?.minimize();
-                }}
-            >
-                <Icon iconName="Remove"/>
-            </div>
-            <div
-                className="action-button"
-                onClick={() => {
-                    if (isMaxSize) {
-                        this.props.electron?.unMaximize();
-                    } else {
-                        this.props.electron?.maximize();
-                    }
-                }}
-            >
-                <Icon iconName={ isMaxSize ? "ArrangeSendBackward" : "Checkbox"}/>
-            </div>
-            <div
-                className="action-button close-button"
-                onClick={() => {
-                    this.props.electron?.close()
-                }}
-            >
-                <Icon iconName="Clear"/>
-            </div>
-        </Theme>
-    }
-}
-
-/**
- * 头部信息栏
- */
-@useSettingWithEvent("language")
-@useStatusWithEvent("fileSave", "fileChange", "fileLoad")
-class HeaderBar extends Component<IHeaderBarProps & IMixinStatusProps & IMixinSettingProps> {
-
-    private showCloseMessage = (e: BeforeUnloadEvent) => {
-        if (!this.props.status?.archive.isSaved) {
-            const message = I18N(this.props, "Info.Hint.Save.After.Close");
-            (e || window.event).returnValue = message; // 兼容 Gecko + IE
-            return message; // 兼容 Gecko + Webkit, Safari, Chrome
-        }
-    }
+    private renderFpsCalc: (t: number) => void = () => {};
+    private physicsFpsCalc: (t: number) => void = () => {};

    public componentDidMount() {
-
-        if (this.props.setting?.platform === Platform.web) {
-            // 阻止页面关闭
-            window.addEventListener("beforeunload", this.showCloseMessage);
+        const { setting, status } = this.props;
+        this.renderFpsCalc = this.createFpsCalc("renderFps");
+        this.physicsFpsCalc = this.createFpsCalc("physicsFps");
+        if (setting) {
+            setting.on("language", this.changeListener);
+        }
+        if (status) {
+            status.archive.on("save", this.changeListener);
+            status.on("physicsLoop", this.physicsFpsCalc);
+            status.on("renderLoop", this.renderFpsCalc);
        }
    }

    public componentWillUnmount() {
-
-        if (this.props.setting?.platform === Platform.web) {
-            // 阻止页面关闭
-            window.removeEventListener("beforeunload", this.showCloseMessage);
+        const { setting, status } = this.props;
+        if (setting) {
+            setting.off("language", this.changeListener);
+        }
+        if (status) {
+            status.archive.off("save", this.changeListener);
+            status.off("physicsLoop", this.physicsFpsCalc);
+            status.off("renderLoop", this.renderFpsCalc);
        }
    }

    public render(): ReactNode {
-        const { status, setting } = this.props;
-
+        const { status } = this.props;
        let fileName: string = "";
        let isNewFile: boolean = true;
        let isSaved: boolean = false;
-
        if (status) {
            isNewFile = status.archive.isNewFile;
            fileName = status.archive.fileName ?? "";
            isSaved = status.archive.isSaved;
        }

-        const headerBarClassName = ["header-bar"];
-        if (setting?.platform === Platform.desktop) {
-            headerBarClassName.push("desktop-header-bar");
-        }
+        const fpsInfo = {
+            renderFps: Math.floor(this.state.renderFps).toString(),
+            physicsFps: Math.floor(this.state.physicsFps).toString()
+        };

        return <Theme
-            className={headerBarClassName.join(" ")}
+            className="header-bar"
            backgroundLevel={BackgroundLevel.Level1}
            fontLevel={FontLevel.Level3}
            style={{ height: this.props.height }}
@@ -198,15 +128,15 @@ class HeaderBar extends Component<IHeaderBarProps & IMixinStatusProps & IMixinSe
                    isSaved ? "" : "*"
                }</div>
            </LocalizationTooltipHost>
-
-            {
-                setting?.platform === Platform.desktop ?
-                    <HeaderWindowsAction/> :
-                    <HeaderFpsView setting={setting}/>
-            }
-            
+            <LocalizationTooltipHost i18nKey="Header.Bar.Fps.Info" options={fpsInfo}>
+                <div className="fps-view">
+                    <Icon iconName="SpeedHigh"></Icon>
+                    <span>{I18N(this.props, "Header.Bar.Fps", fpsInfo)}</span>
+                </div>
+            </LocalizationTooltipHost>
        </Theme>
    }
 }

+export default HeaderBar;
 export { HeaderBar };
@@ -1,7 +1,7 @@
 import { Component, RefObject } from "react";
+import { Label } from "@Model/Label";
 import { Icon } from "@fluentui/react";
 import { useSetting, IMixinSettingProps, Themes } from "@Context/Setting";
-import { Label } from "@Model/Label";
 import "./LabelList.scss";

 interface ILabelListProps {
@@ -1,4 +1,4 @@
-@import "../../Component/Theme/Theme.scss";
+@import "../Theme/Theme.scss";

 $line-min-height: 26px;

@@ -1,9 +1,9 @@
-import { Component, ReactNode, createRef } from "react";
+import { PickerList } from "../PickerList/PickerList";
 import { Label } from "@Model/Label";
-import { PickerList } from "@Input/PickerList/PickerList";
-import { TextField, ITextFieldProps } from "@Input/TextField/TextField";
+import { TextField, ITextFieldProps } from "../TextField/TextField";
 import { useStatusWithEvent, IMixinStatusProps } from "@Context/Status";
-import { LabelList } from "@Component/LabelList/LabelList";
+import { Component, ReactNode, createRef } from "react";
+import { LabelList } from "../LabelList/LabelList";
 import "./LabelPicker.scss"

 interface ILabelPickerProps extends ITextFieldProps {
@@ -48,13 +48,13 @@ class LabelPicker extends Component<ILabelPickerProps & IMixinStatusProps, ILabe
    private renderPicker() {
        return <PickerList
            noData="Common.Attr.Key.Label.Picker.Nodata"
-            item={this.getOtherLabel()}
+            objectList={this.getOtherLabel()}
            dismiss={() => {
                this.setState({
                    isPickerVisible: false
                });
            }}
-            click={(label) => {
+            clickObjectItems={(label) => {
                if (label instanceof Label && this.props.labelAdd) {
                    this.props.labelAdd(label)
                }
@@ -1,60 +0,0 @@
-@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;
-	box-sizing: border-box;
-	padding: 20px;
-
-	div.load-file-layer {
-		width: 100%;
-		height: 100%;
-		display: flex;
-		align-content: center;
-		justify-content: center;
-		align-items: center;
-		flex-wrap: wrap;
-		border-radius: 3px;
-
-		div {
-			user-select: none;
-			text-align: center;
-			width: 100%;
-		}
-
-		div.drag-icon {
-			font-weight: 200;
-			font-size: 2.8em;
-		}
-
-		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);
-
-	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);
-
-	div.load-file-layer {
-		border: 2px dashed $lt-font-color-normal-dark;
-	}
-}
@@ -1,142 +0,0 @@
-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 { useDrop } from 'react-dnd'
-import { NativeTypes } from "react-dnd-html5-backend"
-import "./LoadFile.scss";
-
-const DragFileMask: FunctionComponent = () => {
-
-	return <Theme
-		className="load-file-layer-root"
-		fontLevel={FontLevel.normal}
-	>
-		<div className="load-file-layer">
-			<div className="drag-icon">
-				<Icon iconName="KnowledgeArticle"/>
-			</div>
-			<div className="drag-title">
-				<Localization i18nKey="Info.Hint.Load.File.Title"/>
-			</div>
-			<div className="drag-intro">
-				<Localization i18nKey="Info.Hint.Load.File.Intro"/>
-			</div>
-		</div>
-	</Theme>; 
-}
-
-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 };
@@ -78,4 +78,4 @@ class Localization extends Component<ILocalizationProps & IMixinSettingProps &
    }
 }

-export { Localization, I18N, LanguageDataBase, AllI18nKeys, ILocalizationProps };
+export { Localization, I18N, LanguageDataBase, AllI18nKeys };
@@ -1,6 +1,6 @@
-import { FunctionComponent } from "react";
 import { AllI18nKeys, I18N } from "@Component/Localization/Localization";
 import { useSettingWithEvent, IMixinSettingProps, Themes, Language } from "@Context/Setting";
+import { FunctionComponent } from "react";
 import "./Message.scss";

 interface IMessageProps {
@@ -1,4 +1,4 @@
-@import "../../Component/Theme/Theme.scss";
+@import "../Theme/Theme.scss";
@import "../PickerList/RainbowBg.scss";

 $line-min-height: 24px;
@@ -1,14 +1,14 @@
 import { Component, createRef, ReactNode } from "react";
-import { useStatusWithEvent, IMixinStatusProps } from "@Context/Status";
 import { Label } from "@Model/Label";
 import { Group } from "@Model/Group";
 import { Range } from "@Model/Range";
-import { CtrlObject } from "@Model/CtrlObject";
-import { Behavior } from "@Model/Behavior";
-import { TextField, ITextFieldProps } from "@Input/TextField/TextField";
-import { PickerList, getObjectDisplayInfo, IDisplayInfo } from "@Input/PickerList/PickerList";
+import { TextField, ITextFieldProps } from "../TextField/TextField";
+import { useStatusWithEvent, IMixinStatusProps } from "@Context/Status";
+import { PickerList, IDisplayItem, getObjectDisplayInfo, IDisplayInfo } from "../PickerList/PickerList";
 import { Localization } from "@Component/Localization/Localization";
 import { Icon } from "@fluentui/react";
+import { CtrlObject } from "@Model/CtrlObject";
+import { Behavior } from "@Model/Behavior";
 import "./ObjectPicker.scss";

 type IObjectType = Label | Group | Range | CtrlObject;
@@ -59,10 +59,6 @@ class ObjectPicker extends Component<IObjectPickerProps & IMixinStatusProps, IOb
                    option.push(this.props.status.model.objectPool[j]);
                }
            }
-
-            if (this.props.type.includes("C")) {
-                option.push(this.props.status.model.currentGroupLabel);
-            }
        }
        
        return option;
@@ -83,8 +79,8 @@ class ObjectPicker extends Component<IObjectPickerProps & IMixinStatusProps, IOb
        return <PickerList
            noData="Object.Picker.List.No.Data"
            target={this.pickerTarget}
-            item={this.getAllOption()}
-            click={((item) => {
+            objectList={this.getAllOption()}
+            clickObjectItems={((item) => {
                if (item instanceof Behavior) return;
                if (this.props.valueChange) {
                    this.props.valueChange(item);
@@ -170,4 +166,4 @@ class ObjectPicker extends Component<IObjectPickerProps & IMixinStatusProps, IOb
    }
 }

-export { ObjectPicker };
+export { ObjectPicker, IDisplayItem };
@@ -1,8 +0,0 @@
-@import "../Theme/Theme.scss";
-
-div.offline-render-popup {
-	width: 100%;
-	height: 100%;
-	box-sizing: border-box;
-	padding: 10px;
-}
@@ -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 };
@@ -17,6 +17,12 @@ interface IDisplayInfo {
    allLabel: boolean;
 };

+interface IDisplayItem {
+    nameKey: AllI18nKeys;
+    key: string;
+	mark?: boolean;
+}
+
 function getObjectDisplayInfo(item?: IPickerListItem): IDisplayInfo {

    if (!item) {
@@ -51,25 +57,16 @@ function getObjectDisplayInfo(item?: IPickerListItem): IDisplayInfo {
 	if (item instanceof Label) {

 		if (item.isBuildIn) {
-
            internal = true;
            allLabel = true;
            color = "transparent";
-
            if (item.id === "AllRange") {
                icon = "ProductList";
                name = "Build.In.Label.Name.All.Range";
-            }
-			
-			else if (item.id === "AllGroup") {
+            } else if (item.id === "AllGroup") {
                icon = "SizeLegacy";
                name = "Build.In.Label.Name.All.Group";
            }
-
-			else if (item.id === "CurrentGroupLabel") {
-				icon = "TriangleShape";
-                name = "Build.In.Label.Name.Current.Group";
-			}
        } 
        
        else {
@@ -101,11 +98,13 @@ function getObjectDisplayInfo(item?: IPickerListItem): IDisplayInfo {
 }

 interface IPickerListProps {
-	item: IPickerListItem[];
+    displayItems?: IDisplayItem[];
+	objectList?: IPickerListItem[];
 	target?: RefObject<any>;
    noData?: AllI18nKeys;
 	dismiss?: () => any;
-	click?: (item: IPickerListItem) => any;
+	clickObjectItems?: (item: IPickerListItem) => any;
+    clickDisplayItems?: (item: IDisplayItem) => any;
 }

 class PickerList extends Component<IPickerListProps> {
@@ -117,8 +116,8 @@ class PickerList extends Component<IPickerListProps> {
 			className="picker-list-item"
 			key={item.id}
 			onClick={() => {
-				if (this.props.click) {
-					this.props.click(item)
+				if (this.props.clickObjectItems) {
+					this.props.clickObjectItems(item)
 				}
 			}}
 		>
@@ -144,6 +143,27 @@ class PickerList extends Component<IPickerListProps> {
 		</div>;
 	}

+    private renderString(item: IDisplayItem) {
+        return <div
+			className="picker-list-item"
+			key={item.key}
+			onClick={() => {
+				if (this.props.clickDisplayItems) {
+					this.props.clickDisplayItems(item)
+				}
+			}}
+		>
+			<div className="list-item-icon">
+				<Icon iconName="CheckMark" style={{
+					display: item.mark ? "block" : "none"
+				}}/>
+			</div>
+			<div className="list-item-name">
+				<Localization i18nKey={item.nameKey}/>
+			</div>
+		</div>;
+    }
+
 	public render(): ReactNode {
 		return <Callout
 			onDismiss={this.props.dismiss}
@@ -151,11 +171,18 @@ class PickerList extends Component<IPickerListProps> {
 			directionalHint={DirectionalHint.topCenter}
 		>
 			<div className="picker-list-root">
+				{this.props.objectList ? this.props.objectList.map((item) => {
+					return this.renderItem(item);
+				}) : null}
+                {this.props.displayItems ? this.props.displayItems.map((item) => {
+					return this.renderString(item);
+				}) : null}
 				{
-					this.props.item.map((item) => this.renderItem(item))
-				}
-				{
-                    this.props.item.length <= 0 ?
+                    !(this.props.objectList || this.props.displayItems) || 
+                    !(
+                        this.props.objectList && this.props.objectList.length > 0 || 
+                        this.props.displayItems && this.props.displayItems.length > 0
+                    ) ?
                        <Localization
                            className="picker-list-nodata"
                            i18nKey={this.props.noData ?? "Common.No.Data"}
@@ -167,4 +194,4 @@ class PickerList extends Component<IPickerListProps> {
 	}
 }

-export { PickerList, IDisplayInfo, getObjectDisplayInfo }
+export { PickerList, IDisplayItem, IDisplayInfo, getObjectDisplayInfo }
@@ -1,9 +1,9 @@
 import { Component, ReactNode } from "react";
-import { Icon } from "@fluentui/react";
 import { IMixinStatusProps, useStatusWithEvent } from "@Context/Status";
 import { IMixinSettingProps, useSettingWithEvent } from "@Context/Setting";
 import { BackgroundLevel, FontLevel, getClassList, Theme } from "@Component/Theme/Theme";
 import { Popup as PopupModel, ResizeDragDirection } from "@Context/Popups";
+import { Icon } from "@fluentui/react";
 import "./Popup.scss";

 interface IPopupProps {}
@@ -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;
-	}
-}
@@ -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 };
@@ -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;
-		}
-	}
-}
@@ -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 };
@@ -1,4 +1,4 @@
-@import "../../Component/Theme/Theme.scss";
+@import "../Theme/Theme.scss";

 $search-box-height: 26px;

@@ -1,8 +1,8 @@
-import { Component, ReactNode } from "react";
-import { Icon } from "@fluentui/react";
 import { AllI18nKeys, I18N } from "@Component/Localization/Localization";
 import { BackgroundLevel, FontLevel, Theme } from "@Component/Theme/Theme";
 import { useSettingWithEvent, IMixinSettingProps } from "@Context/Setting";
+import { Icon } from "@fluentui/react";
+import { Component, ReactNode } from "react";
 import "./SearchBox.scss";

 interface ISearchBoxProps {
@@ -1,4 +1,4 @@
-@import "../../Component/Theme/Theme.scss";
+@import "../Theme/Theme.scss";

 $line-min-height: 26px;

@@ -1,5 +1,5 @@
-import { Component, ReactNode, DetailedHTMLProps, HTMLAttributes } from "react";
 import { useSettingWithEvent, Themes, IMixinSettingProps, Setting } from "@Context/Setting";
+import { Component, ReactNode, DetailedHTMLProps, HTMLAttributes } from "react";
 import "./Theme.scss";

 enum FontLevel {
@@ -1,4 +1,4 @@
-@import "../../Component/Theme/Theme.scss";
+@import "../Theme/Theme.scss";

 $line-min-height: 26px;

@@ -1,6 +1,6 @@
-import { Component, ReactNode } from "react";
 import { Icon } from "@fluentui/react";
-import { TextField, ITextFieldProps } from "@Input/TextField/TextField";
+import { Component, ReactNode } from "react";
+import { TextField, ITextFieldProps } from "../TextField/TextField";
 import "./TogglesInput.scss";

 interface ITogglesInputProps extends ITextFieldProps {
@@ -1,133 +0,0 @@
-import { FunctionComponent, useEffect } from "react";
-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;
-	isNewFile: boolean;
-	isSaved: boolean;
-	fileUrl?: string;
-	fileData: () => Promise<string>;
-}
-
-interface IRunnerProps {
-	running?: boolean;
-	afterRunning?: () => any;
-}
-
-interface ICallBackProps {
-	then: () => any;
-}
-
-const ArchiveSaveDownloadView: FunctionComponent<IFileInfo & ICallBackProps> = function ArchiveSaveDownloadView(props) {
-
-	const runner = async () => {
-		const file = await props.fileData();
-		setTimeout(() => {
-			download(file, props.fileName, "text/json");
-			props.then();
-		}, 100);
-	}
-
-	useEffect(() => { runner() }, []);
-
-	return <></>;
-}
-
-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)));
-
-/**
- * 保存存档文件
- */
-const ArchiveSaveView: FunctionComponent<IMixinSettingProps & IMixinStatusProps & IRunnerProps> = function ArchiveSave(props) {
-
-	if (!props.running) {
-		return <></>;
-	}
-
-	const fileData: IFileInfo = {
-		fileName: "",
-		isNewFile: true,
-		isSaved: false,
-		fileUrl: undefined,
-		fileData: async () => `{"nextIndividualId":0,"objectPool":[],"labelPool":[],"behaviorPool":[]}`
-	}
-
-	if (props.status) {
-		fileData.isNewFile = props.status.archive.isNewFile;
-		fileData.fileName = props.status.archive.fileName ?? "";
-		fileData.isSaved = props.status.archive.isSaved;
-		fileData.fileUrl = props.status.archive.fileUrl;
-	}
-
-	if (fileData.isNewFile) {
-		fileData.fileName = I18N(props, "Header.Bar.New.File.Name");
-	}
-
-	// 生成存档文件
-	fileData.fileData = async () => {
-		return props.status?.archive.save(props.status.model) ?? "";
-	};
-
-	const callBack = () => {
-		if (props.afterRunning) {
-			props.afterRunning();
-		}
-	}
-	
-	return <>
-		{
-			props.setting?.platform === Platform.web ? 
-				<ArchiveSaveDownload {...fileData} then={callBack}/> :
-				<ArchiveSaveFs {...fileData} then={callBack}/>
-		}
-	</>
-}
-
-const ArchiveSave = useSetting(useStatus(ArchiveSaveView));
-
-export { ArchiveSave };
@@ -1,5 +1,5 @@
-import { Component, FunctionComponent, ReactNode, Consumer } from "react";
 import { Emitter, EventType } from "@Model/Emitter";
+import { Component, FunctionComponent, ReactNode, Consumer } from "react";

 type RenderComponent = (new (...p: any) => Component<any, any, any>) | FunctionComponent<any>;

@@ -58,7 +58,7 @@ function superConnectWithEvent<C extends Emitter<E>, E extends Record<EventType,
 	}
 }

-function superConnect<C>(consumer: Consumer<C>, keyName: string) {
+function superConnect<C extends Emitter<any>>(consumer: Consumer<C>, keyName: string) {
 	return <R extends RenderComponent>(components: R): R => {
 		return ((props: any) => {

@@ -1,42 +0,0 @@
-import { createContext } from "react";
-import { Emitter } from "@Model/Emitter";
-import { superConnect, superConnectWithEvent } from "@Context/Context";
-import { ISimulatorAPI, IApiEmitterEvent } from "@Electron/SimulatorAPI";
-
-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";
-const ElectronProvider = ElectronContext.Provider;
-const ElectronConsumer = ElectronContext.Consumer;
-
-/**
- * 修饰器
- */
-const useElectron = superConnect<ISimulatorAPI>(ElectronConsumer, "electron");
-
-const useElectronWithEvent = superConnectWithEvent<ISimulatorAPI, IApiEmitterEvent>(ElectronConsumer, "electron");
-
-export { useElectron, ElectronProvider, IMixinElectronProps, ISimulatorAPI, useElectronWithEvent, getElectronAPI };
@@ -1,7 +1,7 @@
 import { ReactNode, createElement } from "react";
 import { Emitter } from "@Model/Emitter";
 import { Localization } from "@Component/Localization/Localization";
-import { IAnyObject } from "@Model/Model";
+import { IAnyObject } from "@Model/Renderer";

 enum ResizeDragDirection {
    top = 1,
@@ -1,7 +1,7 @@
 import { createContext } from "react";
-import { superConnect, superConnectWithEvent } from "@Context/Context";
+import { superConnect, superConnectWithEvent } from "./Context";
 import { Emitter } from "@Model/Emitter";
-import { Layout } from "@Context/Layout";
+import { Layout } from "./Layout";

 /**
 * 主题模式
@@ -11,11 +11,6 @@ enum Themes {
    dark = 2
 }

-enum Platform {
-    web = 1,
-    desktop = 2
-}
-
 type Language = "ZH_CN" | "EN_US";

 interface ISettingEvents extends Setting {
@@ -24,11 +19,6 @@ interface ISettingEvents extends Setting {

 class Setting extends Emitter<ISettingEvents> {

-    /**
-     * 程序平台
-     */
-    public platform: Platform = Platform.web;
-
    /**
     * 主题
     */
@@ -37,7 +27,7 @@ class Setting extends Emitter<ISettingEvents> {
    /**
     * 语言
     */
-    public language: Language = "EN_US";
+    public language: Language = "ZH_CN";

    /**
     * 布局
@@ -73,5 +63,5 @@ const useSettingWithEvent = superConnectWithEvent<Setting, ISettingEvents>(Setti

 export {
    Themes, Setting, SettingContext, useSetting, Language, useSettingWithEvent,
-    IMixinSettingProps, SettingProvider, SettingConsumer, Platform
+    IMixinSettingProps, SettingProvider, SettingConsumer
 };
@@ -7,14 +7,12 @@ import { Group } from "@Model/Group";
 import { Archive } from "@Model/Archive";
 import { AbstractRenderer } from "@Model/Renderer";
 import { ClassicRenderer, MouseMod } from "@GLRender/ClassicRenderer";
-import { Setting } from "@Context/Setting";
+import { Setting } from "./Setting";
 import { I18N } from "@Component/Localization/Localization";
-import { superConnectWithEvent, superConnect } from "@Context/Context";
-import { PopupController } from "@Context/Popups";
-import { Behavior } from "@Model/Behavior";
-import { IParameter, IParamValue } from "@Model/Parameter";
+import { superConnectWithEvent, superConnect } from "./Context";
+import { PopupController } from "./Popups";
+import { Behavior, IBehaviorParameter, IParamValue } from "@Model/Behavior";
 import { Actuator } from "@Model/Actuator";
-import { Clip } from "@Model/Clip";

 function randomColor(unNormal: boolean = false) {
    const color = [
@@ -31,29 +29,21 @@ function randomColor(unNormal: boolean = false) {
 }

 interface IStatusEvent {
-    fileSave: void;
-    fileLoad: void;
-    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;
@@ -64,6 +54,12 @@ class Status extends Emitter<IStatusEvent> {

    public setting: Setting = undefined as any;

+    /**
+     * 对象命名
+     */
+    public objectNameIndex = 1;
+    public labelNameIndex = 1;
+
    /**
     * 渲染器
     */
@@ -104,11 +100,6 @@ class Status extends Emitter<IStatusEvent> {
     */
    public focusBehavior?: Behavior;

-    /**
-     * 焦点行为
-     */
-    public focusClip?: Clip;
-
    private drawTimer?: NodeJS.Timeout;

    private delayDraw = () => {
@@ -130,28 +121,21 @@ 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"));

        // 对象变换时执行渲染，更新渲染器数据
+        this.on("objectChange", this.delayDraw);
+        this.model.on("individualChange", this.delayDraw);
        this.model.on("individualChange", () => {
            this.emit("individualChange");
        });
-        
-        // 渲染器重绘
-        this.on("objectChange", this.delayDraw);
-        this.on("individualChange", this.delayDraw);
-        this.on("groupAttrChange", this.delayDraw);
-        this.on("rangeAttrChange", this.delayDraw);

        // 当模型中的标签和对象改变时，更新全部行为参数中的受控对象
        const updateBehaviorParameter = () => {
@@ -163,45 +147,6 @@ class Status extends Emitter<IStatusEvent> {
        this.on("groupLabelChange", updateBehaviorParameter);
        this.on("rangeLabelChange", updateBehaviorParameter);
        this.on("behaviorAttrChange", updateBehaviorParameter);
-
-        // 映射文件状态改变事件
-        this.archive.on("fileSave", () => this.emit("fileSave"));
-
-        // 处理存档加载事件
-        this.archive.on("fileLoad", () => {
-
-            // 触发对象修改
-            this.emit("objectChange");
-            this.emit("labelChange");
-            this.emit("behaviorChange");
-
-            // 清除焦点对象
-            this.setBehaviorObject();
-            this.setFocusObject(new Set());
-            this.setLabelObject();
-
-            // 映射
-            this.emit("fileLoad");
-        });
-
-
-        // 处理存档事件
-        const handelFileChange = () => {
-            if (this.archive.isSaved) {
-                this.emit("fileChange");
-            }
-        }
-
-        // 设置文件修改状态
-        this.on("objectChange", handelFileChange);
-        this.on("behaviorChange", handelFileChange);
-        this.on("labelChange", handelFileChange);
-        this.on("individualChange", handelFileChange);
-        this.on("groupAttrChange", handelFileChange);
-        this.on("rangeAttrChange", handelFileChange);
-        this.on("labelAttrChange", handelFileChange);
-        this.on("behaviorAttrChange", handelFileChange);
-        this.on("fileChange", () => this.archive.emit("fileChange"));
    }

    public bindRenderer(renderer: AbstractRenderer) {
@@ -234,16 +179,6 @@ class Status extends Emitter<IStatusEvent> {
        this.emit("focusBehaviorChange");
    }

-    /**
-     * 更新焦点行为
-     */
-    public setClipObject(clip?: Clip) {
-        if (this.focusClip !== clip) {
-            this.focusClip = clip;
-        }
-        this.emit("focusClipChange");
-    }
-
    /**
     * 修改范围属性
     */
@@ -253,6 +188,7 @@ class Status extends Emitter<IStatusEvent> {
        if (range && range instanceof Range) {
            range[key] = val;
            this.emit("rangeAttrChange");
+            this.model.draw();
        }
    }

@@ -265,13 +201,14 @@ class Status extends Emitter<IStatusEvent> {
        if (group && group instanceof Group) {
            group[key] = val;
            this.emit("groupAttrChange");
+            this.model.draw();
        }
    }

    /**
     * 修改群属性
     */
-    public changeBehaviorAttrib<K extends IParameter, P extends keyof K | keyof Behavior<K>>
+    public changeBehaviorAttrib<K extends IBehaviorParameter, P extends keyof K | keyof Behavior<K>>
    (id: ObjectID, key: P, val: IParamValue<K[P]>, noParameter?: boolean) {
        const behavior = this.model.getBehaviorById(id);
        if (behavior) {
@@ -287,18 +224,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) {
@@ -370,93 +295,37 @@ class Status extends Emitter<IStatusEvent> {
     */
    public mouseMod: MouseMod = MouseMod.Drag;

-    private readonly SEARCH_NAME_KEY_REG = /(\d+)$/;
-    private getNextNumber(name: string, searchKey: string): number {
-        if (name.indexOf(searchKey) < 0) return 1;
-        let searchRes = name.match(this.SEARCH_NAME_KEY_REG);
-        if (searchRes) {
-            let nameNumber = parseInt(searchRes[1]);    
-            if (isNaN(nameNumber)) {
-                return 1;
-            } else {
-                return nameNumber + 1;
-            }
-        } else {
-            return 1;
-        }
-    }
-
    public newGroup() {
        const group = this.model.addGroup();
        group.color = randomColor();
-        let searchKey = I18N(this.setting.language, "Object.List.New.Group", { id: "" });
-        let nextIndex = 1;
-        this.model.objectPool.forEach((obj) => {
-            if (obj instanceof Group) {
-                nextIndex = Math.max(nextIndex, this.getNextNumber(
-                    obj.displayName, searchKey
-                ));
-            }
-        });
        group.displayName = I18N(this.setting.language, "Object.List.New.Group", {
-            id: nextIndex.toString()
+            id: this.objectNameIndex.toString()
        });
+        this.objectNameIndex ++;
        return group;
    }

    public newRange() {
        const range = this.model.addRange();
        range.color = randomColor();
-        let searchKey = I18N(this.setting.language, "Object.List.New.Range", { id: "" });
-        let nextIndex = 1;
-        this.model.objectPool.forEach((obj) => {
-            if (obj instanceof Range) {
-                nextIndex = Math.max(nextIndex, this.getNextNumber(
-                    obj.displayName, searchKey
-                ));
-            }
-        });
        range.displayName = I18N(this.setting.language, "Object.List.New.Range", {
-            id: nextIndex.toString()
+            id: this.objectNameIndex.toString()
        });
+        this.objectNameIndex ++;
        return range;
    }

    public newLabel() {
-        let searchKey = I18N(this.setting.language, "Object.List.New.Label", { id: "" });
-        let nextIndex = 1;
-        this.model.labelPool.forEach((obj) => {
-            nextIndex = Math.max(nextIndex, this.getNextNumber(
-                obj.name, searchKey
-            ));
-        });
        const label = this.model.addLabel(
            I18N(this.setting.language, "Object.List.New.Label", {
-                id: nextIndex.toString()
+                id: this.labelNameIndex.toString()
            })
        );
        label.color = randomColor(true);
+        this.labelNameIndex ++;
        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) {
@@ -1,181 +0,0 @@
-import { app, BrowserWindow, ipcMain, dialog } from "electron";
-import { Service } from "@Service/Service";
-import { join as pathJoin } from "path";
-import { writeFile } from "fs";
-const ENV = process.env ?? {};
-
-class ElectronApp {
-
-	public service: Service;
-
-	public serviceUrl: string = "http://127.0.0.1";
-
-	public constructor() {
-		this.service = new Service();
-	}
-
-	public async runService() {
-
-		if (ENV.LIVING_TOGETHER_SERVICE) {
-			this.serviceUrl = ENV.LIVING_TOGETHER_SERVICE;
-			return;
-		}
-
-		let defaultPort: number | undefined = parseInt(ENV.LIVING_TOGETHER_DEFAULT_PORT ?? "");
-		if (isNaN(defaultPort)) defaultPort = undefined;
-
-		this.serviceUrl = await this.service.run(
-			ENV.LIVING_TOGETHER_BASE_PATH, defaultPort
-		);
-	}
-
-	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");
-
-		// if (ENV.LIVING_TOGETHER_BASE_PATH) {
-		// 	preload = pathJoin(__dirname, ENV.LIVING_TOGETHER_BASE_PATH, "./SimulatorWindow.js");
-		// }
-
-		this.simulatorWindow = new BrowserWindow({
-			width: 800,
-			height: 600,
-			titleBarStyle: 'hidden',
-			frame: false,
-			minWidth: 460,
-			minHeight: 300,
-			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()
-		});
-	}
-
-	private handelSimulatorWindowBehavior() {
-
-		ipcMain.on("windows.close", () => {
-			this.simulatorWindow?.close();
-		});
-
-		ipcMain.on("windows.maximize", () => {
-			this.simulatorWindow?.maximize();
-		});
-
-		ipcMain.on("windows.unMaximize", () => {
-			this.simulatorWindow?.unmaximize();
-		});
-
-		ipcMain.on("windows.isMaximized", (event) => {
-			event.returnValue = this.simulatorWindow?.isMaximized();
-		});
-
-		ipcMain.on("windows.minimize", (event) => {
-			this.simulatorWindow?.minimize();
-		});
-
-		const sendWindowsChangeMessage = () => {
-			this.simulatorWindow?.webContents.send("windows.windowsSizeStateChange");
-		}
-
-		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();
@@ -1,41 +0,0 @@
-import { Emitter } from "@Model/Emitter";
-
-type IApiEmitterEvent = {
-	windowsSizeStateChange: void;
-	fileSave: {success: boolean, name: string, url: string};
-}
-
-interface ISimulatorAPI extends Emitter<IApiEmitterEvent> {
-
-	/**
-	 * 关闭窗口
-	 */
-	close: () => void;
-
-	/**
-	 * 最大化窗口
-	 */
-	maximize: () => void;
-
-	/**
-	 * 取消最大化
-	 */
-	unMaximize: () => void;
-
-	/**
-	 * 是否处于最大化状态
-	 */
-	isMaximized: () => boolean;
-
-	/**
-	 * 是否处于最大化状态
-	 */
-	minimize: () => void;
-
-	/**
-	 * 存档
-	 */
-	fileSave: (text: string, name: string, title: string, button: string, url?: string) => void;
-}
-
-export { ISimulatorAPI, IApiEmitterEvent }
@@ -1,49 +0,0 @@
-import { contextBridge, ipcRenderer } from "electron";
-import { ISimulatorAPI } from "@Electron/SimulatorAPI";
-
-const emitterMap: { fn?: Function } = { fn: undefined };
-
-const emit = (type: string, evt?: any) => {
-	if (emitterMap.fn) {
-		emitterMap.fn(type, evt);
-	}
-}
-
-const API: ISimulatorAPI = {
-	
-	close() {
-		ipcRenderer.send("windows.close");
-	},
-
-	maximize() {
-		ipcRenderer.send("windows.maximize");
-	},
-
-	unMaximize() {
-		ipcRenderer.send("windows.unMaximize");
-	},
-
-	isMaximized() {
-		return ipcRenderer.sendSync("windows.isMaximized");
-	},
-
-	minimize() {
-		ipcRenderer.send("windows.minimize");
-	},
-
-	fileSave(text: string, name: string, title: string, button: string, url?: string) {
-		ipcRenderer.send("windows.fileSave", text, name, title, button, url);
-	},
-
-	mapEmit: (fn: Function) => { emitterMap.fn = fn },
-} as any;
-
-ipcRenderer.on("windows.windowsSizeStateChange", () => {
-	emit("windowsSizeStateChange");
-});
-
-ipcRenderer.on("windows.EndFileSave", (_, name: string, url: string, success: boolean) => {
-	emit("fileSave", {name, url, success});
-});
-
-contextBridge.exposeInMainWorld("API", API);
@@ -44,11 +44,6 @@ class BasicGroup extends DisplayObject<GroupShader> {
     */
    public color = [1, 1, 1];

-    /**
-     * 形状
-     */
-    public shape: number = 0;
-
    /**
     * 绘制立方体
     */
@@ -71,9 +66,6 @@ class BasicGroup extends DisplayObject<GroupShader> {
        // 半径传递
        this.shader.radius(this.size);

-        // 形状传递
-        this.shader.shape(this.shape);
-
        // 指定颜色
        this.shader.color(this.color);

@@ -1,4 +1,4 @@
-import { AbstractRenderer, IRendererParam } from "@Model/Renderer";
+import { AbstractRenderer, IRendererParam, IAnyObject } from "@Model/Renderer";
 import { EventType } from "@Model/Emitter";
 import { GLCanvas, GLCanvasOption } from "./GLCanvas";
 import { GLContext } from "./GLContext";
@@ -16,13 +16,19 @@ type IRendererParams = IRendererOwnParams & GLCanvasOption;

 abstract class BasicRenderer<
    P extends IRendererParam = {},
+    M extends IAnyObject = {},
    E extends Record<EventType, any> = {}
-> extends AbstractRenderer<P, E & {loop: number}> {
+> extends AbstractRenderer<P, M & IRendererParams, E & {loop: number}> {

    public get dom() {
        return this.canvas.dom
    }

+    /**
+	 * 渲染器参数
+	 */
+	public param: Partial<M & IRendererParams> = {};
+
    /**
 	 * 使用的画布
 	 */
@@ -38,16 +44,19 @@ abstract class BasicRenderer<
     */
    protected clock: Clock;

-    public constructor() {
+    public constructor(param: Partial<M & IRendererParams> = {}) {
 		super();
+
+		// 初始化参数
+		this.param = {
+			autoResize: param.autoResize ?? true,
+			mouseEvent: param.autoResize ?? true,
+			eventLog: param.eventLog ?? false,
+			className: param.className ?? ""
+		} as M & IRendererParams;
 		
 		// 实例化画布对象
-		this.canvas = new GLCanvas(undefined, {
-			autoResize: true,
-			mouseEvent: true,
-			eventLog: false,
-			className: "canvas"
-		});
+		this.canvas = new GLCanvas(param.canvas, this.param);

        // 实例化摄像机
        this.camera = new Camera(this.canvas);
@@ -1,49 +1,27 @@
-import { ObjectData } from "@Model/Renderer";
-import { ObjectID } from "@Model/Model";
-import { IParameterValue, getDefaultValue } from "@Model/Parameter";
+import { ObjectID, ObjectData, ICommonParam } from "@Model/Renderer";
 import { BasicRenderer } from "./BasicRenderer";
 import { BasicsShader } from "./BasicShader";
 import { Axis } from "./Axis";
 import { BasicCube } from "./BasicCube";
 import { GroupShader } from "./GroupShader";
 import { BasicGroup } from "./BasicGroup";
-import { DisplayObject } from "./DisplayObject";
+import DisplayObject from "./DisplayObject";
+
+interface IClassicRendererParams {
+    point: {
+        size: number;
+    }
+    cube: {
+        radius: number[];
+    }
+}

 enum MouseMod {
    Drag = 1,
    click = 2
 }

-type IClassicRendererParameter = {
-	renderer: {};
-	points: {
-        color: "color",
-        size: "number",
-        shape: "option"
-    };
-	cube: {
-        color: "color"
-    };
-}
-
-class ClassicRenderer extends BasicRenderer<IClassicRendererParameter> {
-
-    public override rendererParameterOption = {};
-	public override pointsParameterOption = {
-        color: { type: "color", name: "", defaultValue: [0, 0, 0] },
-        size: { type: "number", name: "Common.Attr.Key.Size", defaultValue: 60, numberStep: 10, numberMin: 0 },
-        shape: { type: "option", name: "Common.Render.Attr.Key.Display.Shape", defaultValue: "0", allOption: [
-            { key: "0", name: "Common.Render.Attr.Key.Display.Shape.Square" },
-            { key: "1", name: "Common.Render.Attr.Key.Display.Shape.Hollow.Square" },
-            { key: "2", name: "Common.Render.Attr.Key.Display.Shape.Hollow.Plus" },
-            { key: "3", name: "Common.Render.Attr.Key.Display.Shape.Hollow.Reduce" },
-            { key: "4", name: "Common.Render.Attr.Key.Display.Shape.Hollow.Cross" },
-            { key: "5", name: "Common.Render.Attr.Key.Display.Shape.Hollow.Checkerboard" }
-        ]}
-    };
-	public override cubeParameterOption = {
-        color: { type: "color", name: "", defaultValue: [0, 0, 0] },
-    };
+class ClassicRenderer extends BasicRenderer<{}, IClassicRendererParams> {

    private basicShader: BasicsShader = undefined as any;
    private axisObject: Axis = undefined as any;
@@ -73,8 +51,6 @@ class ClassicRenderer extends BasicRenderer<IClassicRendererParameter> {
    }

    public onLoad(): this {
-
-        this.rendererParameter = getDefaultValue(this.rendererParameterOption);
        
        // 自动调节分辨率
        this.autoResize();
@@ -211,7 +187,7 @@ class ClassicRenderer extends BasicRenderer<IClassicRendererParameter> {

    points(
        id: ObjectID, position?: ObjectData,
-        param?: Readonly<IParameterValue<IClassicRendererParameter["points"]>>
+        param?: Readonly<Partial<ICommonParam & IClassicRendererParams["point"]>>
    ): this {
        let object = this.objectPool.get(id);
        let group: BasicGroup;
@@ -253,19 +229,14 @@ class ClassicRenderer extends BasicRenderer<IClassicRendererParameter> {
            if (param.size) {
                group.size = param.size;
            }
-
-            // 半径数据
-            if (param.shape) {
-                group.shape = parseInt(param.shape);
-            }
        }

        return this;
    }

    cube(
-        id: ObjectID, position?: ObjectData, radius?: ObjectData,
-        param?: Readonly<IParameterValue<IClassicRendererParameter["cube"]>>
+        id: ObjectID, position?: ObjectData,
+        param?: Readonly<Partial<ICommonParam & IClassicRendererParams["cube"]>>
    ): this {
        let object = this.objectPool.get(id);
        let cube: BasicCube;
@@ -279,13 +250,6 @@ class ClassicRenderer extends BasicRenderer<IClassicRendererParameter> {
                    cube.position[1] = position[1] ?? cube.position[1];
                    cube.position[2] = position[2] ?? cube.position[2];
                }
-
-                if (radius) {
-                    cube.r[0] = radius[0] ?? cube.r[0];
-                    cube.r[1] = radius[1] ?? cube.r[1];
-                    cube.r[2] = radius[2] ?? cube.r[2];
-                }
-
            } else {
                throw new Error("Renderer: Use duplicate ObjectID when drawing different types of objects");
            }
@@ -299,12 +263,6 @@ class ClassicRenderer extends BasicRenderer<IClassicRendererParameter> {
                cube.position[2] = position[2] ?? cube.position[2];
            }

-            if (radius) {
-                cube.r[0] = radius[0] ?? cube.r[0];
-                cube.r[1] = radius[1] ?? cube.r[1];
-                cube.r[2] = radius[2] ?? cube.r[2];
-            }
-
            this.objectPool.set(id, cube);
            console.log(`Renderer: Create new cube object with id ${id}`);
        }
@@ -313,11 +271,21 @@ class ClassicRenderer extends BasicRenderer<IClassicRendererParameter> {
        cube.isDraw = true;

        // 参数传递
-        if (param && param.color) {
+        if (param) {

-            cube.color[0] = param.color[0] ?? cube.color[0];
-            cube.color[1] = param.color[1] ?? cube.color[1];
-            cube.color[2] = param.color[2] ?? cube.color[2];
+            // 颜色数据
+            if (param.color) {
+                cube.color[0] = param.color[0] ?? cube.color[0]
+                cube.color[1] = param.color[1] ?? cube.color[1]
+                cube.color[2] = param.color[2] ?? cube.color[2]
+            }
+
+            // 半径数据
+            if (param.radius) {
+                cube.r[0] = param.radius[0] ?? cube.r[0];
+                cube.r[1] = param.radius[1] ?? cube.r[1];
+                cube.r[2] = param.radius[2] ?? cube.r[2];
+            }
        }

        return this;
@@ -10,7 +10,6 @@ interface IGroupShaderAttribute {

 interface IGroupShaderUniform {
    uRadius: number,
-    uShape: number,
    uMvp: ObjectData,
    uColor: ObjectData,
    uFogColor: ObjectData,
@@ -51,42 +50,10 @@ class GroupShader extends GLShader<IGroupShaderAttribute, IGroupShaderUniform>{
            
            uniform vec3 uColor;
            uniform vec3 uFogColor;
-            uniform int uShape;

            varying float vFogPower;
        
            void main(){
-
-                float dist = distance(gl_PointCoord, vec2(0.5, 0.5));
-                vec2 normalPos = (gl_PointCoord - vec2(0.5, 0.5)) * 2.;
-                
-                if ( uShape == 1 && abs(normalPos.x) < .6 && abs(normalPos.y) < .6) {
-                    discard;
-                }
-
-                if ( uShape == 2 && abs(normalPos.x) > .3 && abs(normalPos.y) > .3) {
-                    discard;
-                }
-
-                if ( uShape == 3 && abs(normalPos.y) > .3) {
-                    discard;
-                }
-
-                if ( uShape == 4 &&
-                    (abs(normalPos.x) < .4 || abs(normalPos.y) < .4) &&
-                    (abs(normalPos.x) > .4 || abs(normalPos.y) > .4)
-                ) {
-                    discard;
-                }
-
-                if ( uShape == 5 &&
-                    (abs(normalPos.x) < .75 && abs(normalPos.y) < .75) &&
-                    (abs(normalPos.x) < .28 || abs(normalPos.y) < .28) &&
-                    (abs(normalPos.x) > .28 || abs(normalPos.y) > .28)
-                ) {
-                    discard;
-                }
-
                gl_FragColor = vec4(mix(uColor, uFogColor, vFogPower), 1.);
            }
        `;
@@ -144,13 +111,4 @@ class GroupShader extends GLShader<IGroupShaderAttribute, IGroupShaderUniform>{
            this.uniformLocate("uFogDensity"), rgb
        )
    }
-
-    /**
-     * 形状
-     */
-    public shape(shape: number) {
-        this.gl.uniform1i(
-            this.uniformLocate("uShape"), shape
-        )
-    }
 }
@@ -1 +0,0 @@
-@import "../PickerList/PickerList.scss";
@@ -1,71 +0,0 @@
-import { AllI18nKeys, Localization } from "@Component/Localization/Localization";
-import { Callout, DirectionalHint, Icon } from "@fluentui/react";
-import { Component, ReactNode, RefObject } from "react";
-import "./ComboList.scss";
-
-interface IDisplayItem {
-	i18nOption?: Record<string, string>;
-    i18n: AllI18nKeys;
-    key: string;
-}
-
-interface IComboListProps {
-	target?: RefObject<any>;
-    item: IDisplayItem[];
-	focus?: IDisplayItem;
-    noData?: AllI18nKeys;
-	dismiss?: () => any;
-	click?: (item: IDisplayItem) => any;
-}
-
-class ComboList extends Component<IComboListProps> {
-
-    private renderString(item: IDisplayItem) {
-
-		const isFocus = item.key === this.props.focus?.key;
-
-        return <div
-			className="picker-list-item"
-			key={item.key}
-			onClick={() => {
-				if (this.props.click) {
-					this.props.click(item)
-				}
-			}}
-		>
-			<div className="list-item-icon">
-				<Icon
-					iconName="CheckMark"
-					style={{
-						display: isFocus ? "block" : "none"
-					}}
-				/>
-			</div>
-			<div className="list-item-name">
-				<Localization i18nKey={item.i18n} options={item.i18nOption}/>
-			</div>
-		</div>;
-    }
-
-	public render(): ReactNode {
-		return <Callout
-			onDismiss={this.props.dismiss}
-			target={this.props.target}
-			directionalHint={DirectionalHint.topCenter}
-		>
-			<div className="picker-list-root">
-                { this.props.item.map((item) => this.renderString(item)) }
-				{
-                    this.props.item.length <= 0 ?
-                        <Localization
-                            className="picker-list-nodata"
-                            i18nKey={this.props.noData ?? "Common.No.Data"}
-                        />
-                        : null
-				}
-			</div>
-		</Callout>
-	}
-}
-
-export { ComboList, IDisplayItem }
@@ -1,287 +0,0 @@
-import { Component, Fragment, ReactNode } from "react";
-import { useSettingWithEvent, IMixinSettingProps, Language } from "@Context/Setting";
-import { AttrInput } from "@Input/AttrInput/AttrInput";
-import { ObjectID } from "@Model/Model";
-import { TogglesInput } from "@Input/TogglesInput/TogglesInput";
-import { ObjectPicker } from "@Input/ObjectPicker/ObjectPicker";
-import { AllI18nKeys, I18N } from "@Component/Localization/Localization";
-import { Message } from "@Input/Message/Message";
-import { ColorInput } from "@Input/ColorInput/ColorInput";
-import { ComboInput, IDisplayItem } from "@Input/ComboInput/ComboInput";
-import {
-    IParameter, IParameterOption, IParameterOptionItem,
-    IParameterValue, IParamValue, isObjectType
-} from "@Model/Parameter";
-import "./Parameter.scss";
-
-interface IParameterProps<P extends IParameter = {}> {
-    option: IParameterOption<P>;
-    value: IParameterValue<P>;
-    key: ObjectID;
-    change: <K extends keyof P>(key: K, val: IParamValue<P[K]>) => any;
-    i18n?: (key: string, language: Language) => string;
-    renderKey?: Array<keyof P>;
-    title?: AllI18nKeys;
-    titleOption?: Record<string, string>;
-    isFirst?: boolean;
-}
-
-@useSettingWithEvent("language")
-class Parameter<P extends IParameter> extends Component<IParameterProps<P> & IMixinSettingProps> {
-
-    private renderParameter<K extends keyof P>
-    (key: K, option: IParameterOptionItem<P[K]>, value: IParamValue<P[K]>): ReactNode {
-
-        const indexKey = `${this.props.key}-${key}`;
-
-        // 条件检测
-        if (option.condition && this.props.value[option.condition.key] !==  option.condition.value) {
-            return <Fragment key={indexKey}/>;
-        }
-
-        const type = option.type;
-        const language = this.props.setting?.language ?? "EN_US";        
-        let keyI18n: string, keyI18nOption: Record<string, string> | undefined;
-
-        // Custom I18N
-        if (this.props.i18n) {
-            keyI18n = "Panel.Info.Behavior.Details.Parameter.Key";
-            keyI18nOption = {
-                key: this.props.i18n(option.name, language)
-            };
-        }
-        
-        else {
-            keyI18n = option.name;
-        }
-
-        if (type === "number") {
-            return <AttrInput
-                key={indexKey}
-                id={indexKey}
-                keyI18n={keyI18n}
-                keyI18nOption={keyI18nOption}
-                isNumber={true}
-                step={option.numberStep}
-                maxLength={option.maxLength}
-                max={option.numberMax}
-                min={option.numberMin}
-                value={value as IParamValue<"number"> ?? 0}
-                valueChange={(val) => {
-                    this.props.change(key, parseFloat(val) as IParamValue<P[K]>);
-                }}
-            />;
-        }
-
-        else if (type === "string") {
-            return <AttrInput
-                key={indexKey}
-                id={indexKey}
-                keyI18n={keyI18n}
-                keyI18nOption={keyI18nOption}
-                maxLength={option.maxLength}
-                value={value as IParamValue<"string"> ?? ""}
-                valueChange={(val) => {
-                    this.props.change(key, val as IParamValue<P[K]>);
-                }}
-            />;
-        }
-
-        else if (type === "boolean") {
-            return <TogglesInput
-                key={indexKey}
-                keyI18n={keyI18n}
-                keyI18nOption={keyI18nOption}
-				onIconName={option.iconName}
-                red={option.iconRed}
-                value={value as IParamValue<"boolean"> ?? false}
-				valueChange={(val) => {
-					this.props.change(key, val as IParamValue<P[K]>);
-				}}
-			/>
-        }
-
-        else if (isObjectType(type)) {
-
-            type IObjectParamValue = IParamValue<"G" | "R" | "LG" | "LR">;
-            const typedValue = value as IObjectParamValue;
-
-            return <ObjectPicker
-                key={indexKey}
-                keyI18n={keyI18n}
-                keyI18nOption={keyI18nOption}
-                type={type}
-                value={typedValue.picker}
-                valueChange={(obj) => {
-                    typedValue.picker = obj as IObjectParamValue["picker"];
-                    this.props.change(key, typedValue as IParamValue<P[K]>);
-                }}
-                cleanValue={() => {
-                    typedValue.picker = undefined as IObjectParamValue["picker"];
-                    this.props.change(key, typedValue as IParamValue<P[K]>);
-                }}
-            />
-        }
-
-        else if (type === "color") {
-
-            return <ColorInput
-                key={indexKey}
-                keyI18n={keyI18n}
-                keyI18nOption={keyI18nOption}
-                normal={option.colorNormal}
-                value={value as IParamValue<"color"> ?? false}
-                valueChange={(val) => {
-					this.props.change(key, val as IParamValue<P[K]>);
-				}}
-            />
-        }
-
-        else if (type === "option") {
-
-            let allOption: IDisplayItem[] = [];
-            let focusKey: number = -1;
-
-            if (option.allOption) {
-                for (let i = 0; i < option.allOption.length; i++) {
-
-                    if (this.props.i18n) {
-                        allOption.push({
-                            i18nOption: { key: this.props.i18n(option.allOption[i].name, language) },
-                            i18n: "Panel.Info.Behavior.Details.Parameter.Key",
-                            key: option.allOption[i].key
-                        })
-                    }
-                    
-                    else {
-                        allOption.push({
-                            i18n: option.allOption[i].name,
-                            key: option.allOption[i].key
-                        })
-                    }
-
-                    if (option.allOption[i].key === value) {
-                        focusKey = i;
-                    }
-                }
-            }
-
-            return <ComboInput
-                key={indexKey}
-                keyI18n={keyI18n}
-                keyI18nOption={keyI18nOption}
-                allOption={allOption}
-                value={allOption[focusKey]}
-                valueChange={(val) => {
-                    this.props.change(key, val.key as IParamValue<P[K]>);
-                }}
-            />
-        }
-
-        else if (type === "vec") {
-
-            type IObjectParamValue = IParamValue<"vec">;
-            const typedValue = value as IObjectParamValue;
-            const i18nVal = I18N(this.props, keyI18n, keyI18nOption);
-            
-            return <Fragment key={indexKey}>
-                
-                <AttrInput
-                    key={`${indexKey}-X`}
-                    id={indexKey}
-                    keyI18n="Panel.Info.Behavior.Details.Parameter.Key.Vec.X"
-                    keyI18nOption={{ key: i18nVal }}
-                    isNumber={true}
-                    step={option.numberStep}
-                    maxLength={option.maxLength}
-                    max={option.numberMax}
-                    min={option.numberMin}
-                    value={typedValue[0] ?? 0}
-                    valueChange={(val) => {
-                        typedValue[0] = parseFloat(val);
-                        this.props.change(key, typedValue as IParamValue<P[K]>);
-                    }}
-                />
-
-                <AttrInput
-                    key={`${indexKey}-Y`}
-                    id={indexKey}
-                    keyI18n="Panel.Info.Behavior.Details.Parameter.Key.Vec.Y"
-                    keyI18nOption={{ key: i18nVal }}
-                    isNumber={true}
-                    step={option.numberStep}
-                    maxLength={option.maxLength}
-                    max={option.numberMax}
-                    min={option.numberMin}
-                    value={typedValue[1] ?? 0}
-                    valueChange={(val) => {
-                        typedValue[1] = parseFloat(val);
-                        this.props.change(key, typedValue as IParamValue<P[K]>);
-                    }}
-                />
-
-                <AttrInput
-                    key={`${indexKey}-Z`}
-                    id={indexKey}
-                    keyI18n="Panel.Info.Behavior.Details.Parameter.Key.Vec.Z"
-                    keyI18nOption={{ key: i18nVal }}
-                    isNumber={true}
-                    step={option.numberStep}
-                    maxLength={option.maxLength}
-                    max={option.numberMax}
-                    min={option.numberMin}
-                    value={typedValue[2] ?? 0}
-                    valueChange={(val) => {
-                        typedValue[2] = parseFloat(val);
-                        this.props.change(key, typedValue as IParamValue<P[K]>);
-                    }}
-                />
-
-            </Fragment>
-        }
-
-        else {
-            return <Fragment key={indexKey}/>
-        }
-    }
-
-    private renderAllParameter(key: Array<keyof P>) {
-        return key.map((key) => {
-            return this.renderParameter(
-                key,
-                this.props.option[key],
-                this.props.value[key],
-            );
-        });
-    }
-    
-    public render(): ReactNode {
-        
-        let allOptionKeys: Array<keyof P>;
-        if (this.props.renderKey) {
-            allOptionKeys = this.props.renderKey;
-        } else {
-            allOptionKeys = Object.getOwnPropertyNames(this.props.option);
-        }
-
-        return <>
-        
-            {
-                allOptionKeys.length > 0 && this.props.title ?
-                    <Message
-                        isTitle
-                        first={this.props.isFirst}
-                        i18nKey={this.props.title}
-                        options={this.props.titleOption}
-                    /> : null
-            }
-
-            {
-                this.renderAllParameter(allOptionKeys)
-            }
-        
-        </>
-    }
-}
-
-export { Parameter }
@@ -0,0 +1 @@
+export * from "@Model/Model";
@@ -4,13 +4,11 @@ const EN_US = {
    "Header.Bar.Title": "Living Together | Emulator",
    "Header.Bar.Title.Info": "Group Behavior Research Emulator",
    "Header.Bar.File.Name.Info": "{file} ({status})",
-    "Header.Bar.New.File.Name": "NewFile.ltss",
+    "Header.Bar.New.File.Name": "New File",
    "Header.Bar.File.Save.Status.Saved": "Saved",
    "Header.Bar.File.Save.Status.Unsaved": "UnSaved",
    "Header.Bar.Fps": "FPS: {renderFps} | {physicsFps}",
    "Header.Bar.Fps.Info": "The rendering frame rate ({renderFps} fps) is on the left, and the simulation frame rate ({physicsFps} fps) is on the right.",
-    "Header.Bar.Fps.Render.Info": "Render fps {fps}",
-    "Header.Bar.Fps.Simulate.Info": "Simulate fps {fps}",
    "Command.Bar.Save.Info": "Save",
    "Command.Bar.Play.Info": "Start simulation",
    "Command.Bar.Drag.Info": "Drag and drop to move the camera",
@@ -27,11 +25,9 @@ const EN_US = {
    "Input.Error.Length": "The length of the input content must be less than {num}",
    "Input.Error.Length.Less": "The length of the input content must be greater than {num}",
    "Input.Error.Select": "Select object ...",
-    "Input.Error.Combo": "Select options ...",
    "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",
@@ -54,46 +50,15 @@ 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",
    "Popup.Action.No": "Cancel",
    "Popup.Action.Objects.Confirm.Title": "Confirm Delete",
    "Popup.Action.Objects.Confirm.Delete": "Delete",
-    "Popup.Action.Objects.Confirm.Restore.Title": "Confirm Restore",
-    "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",
@@ -102,7 +67,6 @@ const EN_US = {
    "Popup.Behavior.Info.Confirm": "OK, I know it",
    "Build.In.Label.Name.All.Group": "All group",
    "Build.In.Label.Name.All.Range": "All range",
-    "Build.In.Label.Name.Current.Group": "Current group",
    "Common.Search.Placeholder": "Search in here...",
    "Common.No.Data": "No Data",
    "Common.No.Unknown.Error": "Unknown error",
@@ -111,7 +75,6 @@ const EN_US = {
    "Common.Attr.Title.Individual.Generation": "Individual generation",
    "Common.Attr.Title.Behaviors": "Behaviors list",
    "Common.Attr.Title.Individual.kill": "Individual kill",
-    "Common.Attr.Title.Render.Parameter": "Render parameters",
    "Common.Attr.Key.Display.Name": "Display name",
    "Common.Attr.Key.Position.X": "Position X",
    "Common.Attr.Key.Position.Y": "Position Y",
@@ -142,14 +105,6 @@ const EN_US = {
    "Common.Attr.Key.Generation.Error.Invalid.Label": "The specified label has expired",
    "Common.Attr.Key.Kill.Random": "Random kill",
    "Common.Attr.Key.Kill.Count": "Kill count",
-    "Common.Attr.Key.Behavior.Restore": "Restore default parameters",
-    "Common.Render.Attr.Key.Display.Shape": "Display Shape",
-    "Common.Render.Attr.Key.Display.Shape.Square": "Square",
-    "Common.Render.Attr.Key.Display.Shape.Hollow.Square": "Hollow square",
-    "Common.Render.Attr.Key.Display.Shape.Hollow.Plus": "Plus",
-    "Common.Render.Attr.Key.Display.Shape.Hollow.Reduce": "Reduce",
-    "Common.Render.Attr.Key.Display.Shape.Hollow.Cross": "Cross",
-    "Common.Render.Attr.Key.Display.Shape.Hollow.Checkerboard": "Checkerboard",
    "Panel.Info.Range.Details.Attr.Error.Not.Range": "Object is not a Range",
    "Panel.Info.Range.Details.Attr.Error.Unspecified": "Unspecified range object",
    "Panel.Info.Group.Details.Attr.Error.Not.Group": "Object is not a Group",
@@ -162,10 +117,5 @@ 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",
 }
 export default EN_US;
@@ -4,13 +4,11 @@ const ZH_CN = {
    "Header.Bar.Title": "群生共进 | 仿真器",
    "Header.Bar.Title.Info": "群体行为研究仿真器",
    "Header.Bar.File.Name.Info": "{file} ({status})",
-    "Header.Bar.New.File.Name": "新存档.ltss",
+    "Header.Bar.New.File.Name": "新存档",
    "Header.Bar.File.Save.Status.Saved": "已保存",
    "Header.Bar.File.Save.Status.Unsaved": "未保存",
    "Header.Bar.Fps": "帧率: {renderFps} | {physicsFps}",
    "Header.Bar.Fps.Info": "左侧为渲染帧率 ({renderFps} fps), 右侧为模拟帧率 ({physicsFps} fps)。",
-    "Header.Bar.Fps.Render.Info": "渲染帧率 {fps}",
-    "Header.Bar.Fps.Simulate.Info": "模拟帧率 {fps}",
    "Command.Bar.Save.Info": "保存",
    "Command.Bar.Play.Info": "开始仿真",
    "Command.Bar.Drag.Info": "拖拽进行视角移动",
@@ -27,11 +25,9 @@ const ZH_CN = {
    "Input.Error.Length": "输入内容长度须小于 {number}",
    "Input.Error.Length.Less": "输入内容长度须大于 {number}",
    "Input.Error.Select": "选择对象 ...",
-    "Input.Error.Combo": "选择选项 ...",
    "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": "点击此处以赋予行为到此群",
@@ -54,55 +50,23 @@ 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": "确定",
    "Popup.Action.No": "取消",
    "Popup.Action.Objects.Confirm.Title": "删除确认",
    "Popup.Action.Objects.Confirm.Delete": "删除",
-    "Popup.Action.Objects.Confirm.Restore.Title": "重置确认",
-    "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} 个行为",
-    "Popup.Add.Behavior.Select.Nodata": "找不到名为 \"{name}\" 的行为",
+    "Popup.Add.Behavior.Select.Counter": "找不到名为 \"{name}\" 的行为",
+    "Popup.Add.Behavior.Select.Nodata": "Could not find behavior named \"{name}\"",
    "Popup.Behavior.Info.Title": "行为详情: {behavior}",
    "Popup.Behavior.Info.Confirm": "好的, 我知道了",
    "Build.In.Label.Name.All.Group": "全部群",
    "Build.In.Label.Name.All.Range": "全部范围",
-    "Build.In.Label.Name.Current.Group": "当前群",
    "Common.Search.Placeholder": "在此处搜索...",
    "Common.No.Data": "暂无数据",
    "Common.No.Unknown.Error": "未知错误",
@@ -111,7 +75,6 @@ const ZH_CN = {
    "Common.Attr.Title.Individual.Generation": "生成个体",
    "Common.Attr.Title.Behaviors": "行为列表",
    "Common.Attr.Title.Individual.kill": "消除个体",
-    "Common.Attr.Title.Render.Parameter": "渲染参数",
    "Common.Attr.Key.Display.Name": "显示名称",
    "Common.Attr.Key.Position.X": "X 坐标",
    "Common.Attr.Key.Position.Y": "Y 坐标",
@@ -142,14 +105,6 @@ const ZH_CN = {
    "Common.Attr.Key.Generation.Error.Invalid.Label": "指定的标签已失效",
    "Common.Attr.Key.Kill.Random": "随机消除",
    "Common.Attr.Key.Kill.Count": "消除数量",
-    "Common.Attr.Key.Behavior.Restore": "还原默认参数",
-    "Common.Render.Attr.Key.Display.Shape": "显示形状",
-    "Common.Render.Attr.Key.Display.Shape.Square": "方形",
-    "Common.Render.Attr.Key.Display.Shape.Hollow.Square": "空心方形",
-    "Common.Render.Attr.Key.Display.Shape.Hollow.Plus": "加号",
-    "Common.Render.Attr.Key.Display.Shape.Hollow.Reduce": "减号",
-    "Common.Render.Attr.Key.Display.Shape.Hollow.Cross": "叉号",
-    "Common.Render.Attr.Key.Display.Shape.Hollow.Checkerboard": "棋盘",
    "Panel.Info.Range.Details.Attr.Error.Not.Range": "对象不是一个范围",
    "Panel.Info.Range.Details.Attr.Error.Unspecified": "未指定范围对象",
    "Panel.Info.Group.Details.Attr.Error.Not.Group": "对象不是一个群",
@@ -162,10 +117,5 @@ 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": "释放以加载拽入的存档",
 }
 export default ZH_CN;
@@ -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
-}
+import { Model } from "./Model";
+import { Emitter } from "./Emitter"; 

 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 = 60;

 	/**
 	 * 仿真是否进行
 	 */
 	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 }
@@ -1,30 +1,14 @@
-import { Emitter, EventType } from "@Model/Emitter";
-import { CtrlObject, IArchiveCtrlObject } from "@Model/CtrlObject";
-import { Model } from "@Model/Model";
-import { IArchiveLabel, Label } from "@Model/Label";
-import { Group, IArchiveGroup } from "@Model/Group";
-import { Range } from "@Model/Range";
-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";
+import { Emitter, EventType, EventMixin } from "./Emitter";

 interface IArchiveEvent {
-    fileSave: Archive;
-    fileLoad: Archive;
-    fileChange: void;
+    save: Archive;
+    load: Archive;
 }

-interface IArchiveObject {
-    nextIndividualId: number;
-    objectPool: IArchiveCtrlObject[];
-    labelPool: IArchiveLabel[];
-    behaviorPool: IArchiveBehavior[];
-    clipPool: IArchiveClip[];
-}
-
-class Archive extends Emitter<IArchiveEvent> {
+class Archive<
+    M extends any = any,
+    E extends Record<EventType, any> = {}
+> extends Emitter<E & IArchiveEvent> {

    /**
     * 是否为新文件
@@ -39,266 +23,25 @@ class Archive extends Emitter<IArchiveEvent> {
    /**
     * 是否保存
     */
-    public isSaved: boolean = true;
+    public isSaved: boolean = false;

    /**
-     * 文件路径
+     * 文件数据
     */
-    public fileUrl?: string;
-
-    /**
-     * 将模型转换为存档对象
-     */
-    public parseModel2Archive(model: Model): string {
-
-        // 存贮 CtrlObject
-        const objectPool: IArchiveCtrlObject[] = [];
-        model.objectPool?.forEach(obj => {
-            let archiveObject = obj.toArchive();
-
-            // 处理每个群的个体
-            if (archiveObject.objectType === "G") {
-                const archiveGroup: IArchiveGroup = archiveObject as any;
-                const group: Group = obj as Group;
-
-                const individuals: IArchiveIndividual[] = [];
-                group.individuals?.forEach((item) => {
-                    individuals.push(item.toArchive());
-                });
-
-                archiveGroup.individuals = individuals;
-            }
-
-            objectPool.push(archiveObject);
-        })
-
-        // 存储 Label
-        const labelPool: IArchiveLabel[] = [];
-        model.labelPool?.forEach(obj => {
-            labelPool.push(obj.toArchive());
-        });
-
-        // 存储全部行为
-        const behaviorPool: IArchiveBehavior[] = [];
-        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,
-            clipPool: clipPool
-        };
-
-        return JSON.stringify(fileData);
-    }
-
-    /**
-     * 加载存档到模型
-     */
-    public loadArchiveIntoModel(model: Model, data: string): void {
-
-        // 解析为 JSON 对象
-        const archive: IArchiveObject = JSON.parse(data);
-        // console.log(archive);
-
-        // 实例化全部对象
-        const objectPool: CtrlObject[] = [];
-        const individualPool: Individual[] = [];
-        archive.objectPool?.forEach((obj) => {
-
-            let ctrlObject: CtrlObject | undefined = undefined;
-            
-            // 处理群
-            if (obj.objectType === "G") {
-                const archiveGroup: IArchiveGroup = obj as any;
-                const newGroup = new Group(model);
-
-                // 实例化全部个体
-                const individuals: Array<Individual> = [];
-                archiveGroup.individuals?.forEach((item) => {
-                    const newIndividual = new Individual(newGroup);
-                    newIndividual.id = item.id;
-                    individuals.push(newIndividual);
-                    individualPool.push(newIndividual);
-                })
-                
-                newGroup.cacheIndividualsArray = individuals;
-                ctrlObject = newGroup;
-            }
-
-            // 处理范围
-            if (obj.objectType === "R") {
-                ctrlObject = new Range(model);
-            }
-
-            if (ctrlObject) {
-                ctrlObject.id = obj.id;
-                objectPool.push(ctrlObject);
-            }
-        });
-
-        // 实例化全部标签
-        const labelPool: Label[] = [];
-        archive.labelPool?.forEach((item) => {
-            const newLabel = new Label(model);
-            newLabel.id = item.id;
-            labelPool.push(newLabel);
-        });
-
-        // 实例化全部行为
-        const behaviorPool: Behavior[] = [];
-        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]
-
-        const search: <T extends IRealObjectType>(pool: T[], archive: IObjectParamArchiveType) => T | undefined =
-        (pool, archive) => {
-            for (let i = 0; i < pool.length; i++) {
-                if (pool[i].id === archive.__LIVING_TOGETHER_OBJECT_ID) {
-                    return pool[i];
-                }
-            }
-
-            return undefined;
-        };
-
-        const searchAll: (archive: IObjectParamArchiveType) => IRealObjectType | undefined =
-        (archive) => {
-            return void 0 ??
-                search(individualPool, archive) ??
-                search(objectPool, archive) ??
-                search(labelPool, archive) ??
-                search(buildInLabel, archive) ??
-                search(behaviorPool, archive);
-        }
-
-        // 实例搜索函数
-        const parseFunction: IArchiveParseFn = (archive) => {
-
-            switch (archive.__LIVING_TOGETHER_OBJECT_TYPE) {
-
-                // 在个体池搜索
-                case "Individual":
-                    return search(individualPool, archive) ?? searchAll(archive);
-
-                // 对象类型在对象池中搜索
-                case "Range":
-                case "Group":
-                    return search(objectPool, archive) ?? searchAll(archive);
-
-                // 在标签池搜索
-                case "Label":
-                    return search(labelPool, archive) ?? search(buildInLabel, archive) ?? searchAll(archive);
-
-                // 在标签池搜索
-                case "Behavior":
-                    return search(behaviorPool, archive) ?? searchAll(archive);
-
-                // 在全部池子搜索
-                default:
-                    return searchAll(archive);
-            }
-        }
-
-        // 加载对象的属性
-        model.objectPool = objectPool.map((obj, index) => {
-            
-            // 加载属性
-            obj.fromArchive(archive.objectPool[index], parseFunction);
-
-            // 加载个体属性
-            if (obj instanceof Group) {
-
-                const archiveGroup: IArchiveGroup = archive.objectPool[index] as any;
-
-                obj.individuals = new Set(obj.cacheIndividualsArray.map((item, i) => {
-                    item.fromArchive(archiveGroup.individuals[i], parseFunction);
-                    return item;
-                }));
-            }
-
-            return obj;
-        });
-
-        // 加载标签属性
-        model.labelPool = labelPool.map((item, index) => {
-            item.fromArchive(archive.labelPool[index]);
-            return item;
-        });
-
-        // 加载行为属性
-        model.behaviorPool = behaviorPool.map((item, index) => {
-            item.fromArchive(archive.behaviorPool[index], parseFunction);
-            return item;
-        });
-
-        // 加载剪辑
-        model.clipPool = clipPool.map((item, index) => {
-            item.fromArchive(archive.clipPool[index], parseFunction);
-            return item;
-        });
-    }
+    public fileData?: M;

    /**
     * 保存文件
     * 模型转换为文件
     */
-    public save(model: Model): string {
-        this.isSaved = true;
-        this.emit("fileSave", this);
-        return this.parseModel2Archive(model);
-    }
+    public save() {};

    /**
     * 加载文件为模型
-     * @return Model
+     * return Model
     */
-    public load(model: Model, data: string, name: string, url?: string): string | undefined {
-
-        try {
-            this.loadArchiveIntoModel(model, data);
-        } catch (e) {
-            return e as string;
-        }
-        
-        this.emit("fileLoad", this);
-        this.fileName = name;
-        this.isSaved = true;
-        this.isNewFile = false;
-        this.fileUrl = url;
-        this.emit("fileSave", this);
-    };
-
-    public constructor() {
-        super();
-        this.on("fileChange", () => {
-            this.isSaved = false;
-        })
-    }
+    public load() {};
 }

-export { Archive };
+export { Archive };
+export default Archive;
@@ -1,21 +1,136 @@
-import { Emitter, EventType } from "@Model/Emitter";
-import { v4 as uuid } from "uuid";
-import type { Individual } from "@Model/Individual";
-import type { Group } from "@Model/Group";
-import type { Model } from "@Model/Model";
-import {
-    archiveObject2Parameter,
-    getDefaultValue, IArchiveParameterValue, IArchiveParseFn,
-    IParameter, IParameterOption, IParameterValue, parameter2ArchiveObject
-} from "@Model/Parameter";
+import { IAnyObject } from "./Renderer";
+import { Emitter, EventType } from "./Emitter";
+import type { Individual } from "./Individual";
+import type { Group } from "./Group";
+import type { Model } from "./Model";
+import type { Range } from "./Range";
+import type { Label } from "./Label";
+
+type IObjectParamCacheType<P, Q = P> = {
+    picker: P;
+    objects: Q;
+}
+
+/**
+ * 参数类型
+ */
+type IMapBasicParamTypeKeyToType = {
+    "number": number;
+    "string": string;
+    "boolean": boolean;
+}
+
+type IMapObjectParamTypeKeyToType = {
+    "R": IObjectParamCacheType<Range | undefined>;
+    "G": IObjectParamCacheType<Group | undefined>;
+    "LR": IObjectParamCacheType<Label | Range | undefined, Range[]>;
+    "LG": IObjectParamCacheType<Label | Group | undefined, Group[]>;
+}
+
+type IMapVectorParamTypeKeyToType = {
+    "vec": number[];
+}
+
+/**
+ * 参数类型映射
+ */
+type AllMapType = IMapBasicParamTypeKeyToType & IMapObjectParamTypeKeyToType & IMapVectorParamTypeKeyToType;
+type IParamType = keyof AllMapType;
+type IObjectType = keyof IMapObjectParamTypeKeyToType;
+type IVectorType = keyof IMapVectorParamTypeKeyToType;
+type IParamValue<K extends IParamType> = AllMapType[K];
+
+/**
+ * 特殊对象类型判定
+ */
+const objectTypeListEnumSet = new Set<IParamType>(["R", "G", "LR", "LG"]);
+
+/**
+ * 对象断言表达式
+ */
+function isObjectType(key: IParamType): key is IVectorType {
+    return objectTypeListEnumSet.has(key);
+}
+
+/**
+ * 向量断言表达式
+ */
+function isVectorType(key: IParamType): key is IObjectType {
+    return key === "vec";
+}
+
+/**
+ * 模型参数类型
+ */
+interface IBehaviorParameterOptionItem<T extends IParamType = IParamType> {
+
+    /**
+     * 参数类型
+     */
+    type: T | string;
+
+    /**
+     * 参数默认值
+     */
+    defaultValue?: IParamValue<T>;
+
+    /**
+     * 数值变化回调
+     */
+    onChange?: (value: IParamValue<T>) => any;
+
+    /**
+     * 名字
+     */
+    name: string;
+
+    /**
+     * 字符长度
+     */
+    maxLength?: number;
+
+    /**
+     * 数字步长
+     */
+    numberStep?: number;
+
+    /**
+     * 最大值最小值
+     */
+    numberMax?: number;
+    numberMin?: number;
+
+    /**
+     * 图标名字
+     */
+    iconName?: string;
+}
+
+interface IBehaviorParameter {
+    [x: string]: IParamType;
+}
+
+/**
+ * 参数类型列表
+ */
+type IBehaviorParameterOption<P extends IBehaviorParameter> = {
+    [X in keyof P]: IBehaviorParameterOptionItem<P[X]>;
+}
+
+/**
+ * 参数类型列表映射到参数对象
+ */
+type IBehaviorParameterValue<P extends IBehaviorParameter> = {
+    [X in keyof P]: IParamValue<P[X]>
+}

 /**
 * 行为构造函数类型
 */
 type IBehaviorConstructor<
-    P extends IParameter = {},
+    P extends IBehaviorParameter = {},
    E extends Record<EventType, any> = {}
-> = new (parameter: IParameterValue<P>) => Behavior<P, E>;
+> = new (id: string, parameter: IBehaviorParameterValue<P>) => Behavior<P, E>;

 type IAnyBehavior = Behavior<any, any>;
 type IAnyBehaviorRecorder = BehaviorRecorder<any, any>;
@@ -77,10 +192,22 @@ class BehaviorInfo<E extends Record<EventType, any> = {}> extends Emitter<E> {
 }

 class BehaviorRecorder<
-    P extends IParameter = {},
+    P extends IBehaviorParameter = {},
    E extends Record<EventType, any> = {}
 > extends BehaviorInfo<{}> {

+    /**
+     * 命名序号
+     */
+    public nameIndex: number = 0;
+
+    /**
+     * 获取下一个 ID
+     */
+    public getNextId() {
+        return `B-${this.behaviorId}-${this.nameIndex ++}`;
+    }
+
    /**
     * 行为类型
     */
@@ -94,19 +221,68 @@ class BehaviorRecorder<
    /**
     * 对象参数列表
     */
-    public parameterOption: IParameterOption<P>;
+    public parameterOption: IBehaviorParameterOption<P>;
+
+    /**
+     * 获取参数列表的默认值
+     */
+    public getDefaultValue(): IBehaviorParameterValue<P> {
+        let defaultObj = {} as IBehaviorParameterValue<P>;
+        for (let key in this.parameterOption) {
+            let defaultVal = this.parameterOption[key].defaultValue;
+            
+            defaultObj[key] = defaultVal as any;
+            if (defaultObj[key] === undefined) {
+
+                switch (this.parameterOption[key].type) {
+                    case "string":
+                        defaultObj[key] = "" as any;
+                        break;
+
+                    case "number":
+                        defaultObj[key] = 0 as any;
+                        break;
+
+                    case "boolean":
+                        defaultObj[key] = false as any;
+                        break;
+
+                    case "vec":
+                        defaultObj[key] = [0, 0, 0] as any;
+                        break;
+                    
+                    case "G":
+                    case "R":
+                        defaultObj[key] = {
+                            picker: undefined,
+                            objects: undefined
+                        } as any;
+                        break;
+
+                    case "LR":
+                    case "LG":
+                        defaultObj[key] = {
+                            picker: undefined,
+                            objects: []
+                        } as any;
+                        break;
+                }
+            }
+        }
+        return defaultObj;
+    }

    /**
     * 创建一个新的行为实例
     */
    public new(): Behavior<P, E> {
-        return new this.behavior(getDefaultValue(this.parameterOption));
+        return new this.behavior(this.getNextId(), this.getDefaultValue());
    }

    public constructor(behavior: IBehaviorConstructor<P, E>) {
        super();
        this.behavior = behavior;
-        this.behaviorInstance = new this.behavior({} as any);
+        this.behaviorInstance = new this.behavior(this.getNextId(), {} as any);
        this.parameterOption = this.behaviorInstance.parameterOption;
        this.iconName = this.behaviorInstance.iconName;
        this.behaviorId = this.behaviorInstance.behaviorId;
@@ -117,22 +293,11 @@ class BehaviorRecorder<
    }
 }

-interface IArchiveBehavior {
-    behaviorId: string;
-    name: string;
-    id: string;
-    color: number[];
-    priority: number;
-    currentGroupKey: string[];
-    deleteFlag: boolean;
-    parameter: IArchiveParameterValue<IParameter>;
-}
-
 /**
 * 群体的某种行为
 */
 class Behavior<
-    P extends IParameter = {},
+    P extends IBehaviorParameter = {},
    E extends Record<EventType, any> = {}
 > extends BehaviorInfo<E> {

@@ -160,21 +325,16 @@ class Behavior<
    /**
     * 行为参数
     */
-    public parameter: IParameterValue<P>;
-
-    /**
-     * 指定当前群的 Key
-     */
-    public currentGroupKey: Array<keyof P> = [];
+    public parameter: IBehaviorParameterValue<P>;

    /**
     * 对象参数列表
     */
-    public parameterOption: IParameterOption<P> = {} as any;
+    public parameterOption: IBehaviorParameterOption<P> = {} as any;

-    public constructor(parameter: IParameterValue<P>) {
+    public constructor(id: string, parameter: IBehaviorParameterValue<P>) {
        super();
-        this.id = uuid();
+        this.id = id;
        this.parameter = parameter;
    }

@@ -204,33 +364,6 @@ class Behavior<
        return this.deleteFlag;
    }

-    public toArchive(): IArchiveBehavior {
-        return {
-            behaviorId: this.behaviorId,
-            name: this.name,
-            id: this.id,
-            color: this.color.concat([]),
-            priority: this.priority,
-            currentGroupKey: this.currentGroupKey.concat([]) as any,
-            deleteFlag: this.deleteFlag,
-            parameter: parameter2ArchiveObject(
-                this.parameter, this.parameterOption
-            )
-        };
-    }
-
-    public fromArchive(archive: IArchiveBehavior, paster: IArchiveParseFn): void {
-        this.name = archive.name,
-        this.id = archive.id,
-        this.color = archive.color.concat([]),
-        this.priority = archive.priority,
-        this.currentGroupKey = archive.currentGroupKey.concat([]) as any,
-        this.deleteFlag = archive.deleteFlag,
-        this.parameter = archiveObject2Parameter(
-            archive.parameter, paster
-        ) as any;
-    }
-
    /**
     * 加载时调用
     */
@@ -258,7 +391,7 @@ class Behavior<
     * @param model 模型
     * @param t 经过时间
     */
-    public effect?: (individual: Individual, group: Group, model: Model, t: number) => void;
+    public effect(individual: Individual, group: Group, model: Model, t: number): void {};

    /**
     * 作用影响于个体
@@ -267,7 +400,7 @@ class Behavior<
     * @param model 模型
     * @param t 经过时间
     */
-    public afterEffect?: (individual: Individual, group: Group, model: Model, t: number) => void;
+    public afterEffect(individual: Individual, group: Group, model: Model, t: number): void {};

    /**
     * 全部影响作用后
@@ -276,13 +409,15 @@ class Behavior<
     * @param model 模型
     * @param t 经过时间
     */
-    public finalEffect?: (individual: Individual, group: Group, model: Model, t: number) => void;
+    public finalEffect(individual: Individual, group: Group, model: Model, t: number): void {};

 }

 type IRenderBehavior = BehaviorInfo | Behavior;

 export {
-    Behavior, BehaviorRecorder, IAnyBehavior, IAnyBehaviorRecorder,
-    BehaviorInfo, IRenderBehavior, IArchiveBehavior
-};
+    Behavior, BehaviorRecorder, IBehaviorParameterOption, IBehaviorParameterOptionItem, IParamValue,
+    IAnyBehavior, IAnyBehaviorRecorder, BehaviorInfo, IRenderBehavior, IBehaviorParameter,
+    isObjectType, isVectorType
+};
+export default { Behavior };
@@ -1,415 +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;
-	data?: Float32Array;
-	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?: number[], a2?: number[]): 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;
-	}
-
-	/**
-	 * 录制一帧
-	 */
-	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 recodeData: IDrawCommand = {
-					type: "points",
-					id: object.id,
-					data: object.exportPositionData()
-				}
-
-				// 对比校验
-				if (this.isRenderParameterEqual(object.renderParameter, lastCommand?.parameter)) {
-					recodeData.parameter = lastCommand?.parameter;
-				} else {
-					recodeData.parameter = this.cloneRenderParameter(object.renderParameter);
-				}
-
-				commands.push(recodeData);
-            }
-
-
-            if (object.display && object instanceof Range) {
-
-				// 获取上一帧指令
-				const lastCommand = this.getCommandFromLastFrame("cube", object.id);
-
-				// 记录
-				const recodeData: IDrawCommand = {
-					type: "cube",
-					id: object.id
-				}
-
-				// 释放上一帧的内存
-				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: "@L" = "@L";
-
-	/**
-	 * 压缩帧数据
-	 */
-	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.data = (lastCommand?.data === commands[j].data) ?
-					this.LastFrameData as any : Array.from(commands[j].data ?? []);
-
-				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;
-
-				console.log(lastCommand);
-
-				// 记录
-				command.data = (this.LastFrameData as any === commands[j].data) ?
-					lastCommand?.data : new Float32Array(commands[j].data ?? []);
-
-				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 };
@@ -1,29 +1,11 @@
-import { LabelObject } from "@Model/Label"
-import { v4 as uuid } from "uuid";
-import type { IAnyObject, Model } from "@Model/Model";
-import type { ObjectID } from "@Model/Model";
-import {
-    parameter2ArchiveObject, archiveObject2Parameter,
-    IArchiveParseFn, IObjectParamArchiveType, object2ArchiveObject,
-    IArchiveParameterValue, IParameter
-} from "@Model/Parameter";
-
-interface IArchiveCtrlObject {
-    objectType: "R" | "G";
-    displayName: CtrlObject["displayName"];
-    color: CtrlObject["color"];
-    display: CtrlObject["display"];
-    update: CtrlObject["update"];
-    id: string;
-    renderParameter: IArchiveParameterValue<IParameter>;
-    deleteFlag: CtrlObject["deleteFlag"];
-    labels: IObjectParamArchiveType[];
-}
+import { LabelObject } from "./Label"
+import type { Model } from "./Model";
+import type { ObjectID } from "./Renderer";

 /**
 * 可控对象
 */
-class CtrlObject<A extends IAnyObject = IAnyObject> extends LabelObject {
+class CtrlObject extends LabelObject {

    /**
     * 显示名称
@@ -53,20 +35,15 @@ class CtrlObject<A extends IAnyObject = IAnyObject> extends LabelObject {
    /**
     * 控制模型
     */
-    public model: Model;
-
-    /**
-     * 渲染数据
-     */
-    public renderParameter: IAnyObject = {};
+    protected model: Model;

    /**
     * 构造器
     */
-    public constructor(model: Model) {
+    public constructor(model: Model, id: ObjectID) {
        super();
        this.model = model;
-        this.id = uuid();
+        this.id = id;
    }

    /**
@@ -79,8 +56,8 @@ class CtrlObject<A extends IAnyObject = IAnyObject> extends LabelObject {
    /**
     * 判断是否为相同对象
     */
-    public equal(obj?: CtrlObject): boolean {
-        return this === obj || this.id === obj?.id;
+    public equal(obj: CtrlObject): boolean {
+        return this === obj || this.id === obj.id;
    }

    /**
@@ -114,36 +91,7 @@ class CtrlObject<A extends IAnyObject = IAnyObject> extends LabelObject {
    public isDeleted(): boolean {
        return this.deleteFlag;
    }
-
-    public toArchive(): IArchiveCtrlObject & A {
-        return {
-            displayName: this.displayName,
-            color: this.color.concat([]),
-            display: !!this.display,
-            update: !!this.update,
-            id: this.id,
-            renderParameter: parameter2ArchiveObject(this.renderParameter),
-            deleteFlag: !!this.deleteFlag,
-            labels: this.labels.map((label) => {
-                return object2ArchiveObject(label);
-            })
-        } as any;
-    }
-
-    public fromArchive(archive: IArchiveCtrlObject & A, paster: IArchiveParseFn): void {
-        this.displayName = archive.displayName;
-        this.color = archive.color.concat([]);
-        this.display = !!archive.display;
-        this.update = !!archive.update;
-        this.id = archive.id;
-        this.deleteFlag = !!archive.deleteFlag;
-        this.renderParameter = archiveObject2Parameter(
-            archive.renderParameter, paster
-        );
-        this.labels = archive.labels.map((obj) => {
-            return paster(obj) as any;
-        }).filter((c) => !!c);
-    }
 }

-export { CtrlObject, IArchiveCtrlObject };
+export default CtrlObject;
+export { CtrlObject };
@@ -1,47 +1,24 @@
-import { Individual } from "@Model/Individual";
-import { CtrlObject, IArchiveCtrlObject } from "@Model/CtrlObject";
-import type { Behavior, IAnyBehavior } from "@Model/Behavior"; 
-import { Label } from "@Model/Label";
-import { Range } from "@Model/Range";
-import { Model, ObjectID } from "@Model/Model";
-import { IArchiveIndividual } from "@Model/Individual";
-import {
-    getDefaultValue, IArchiveParseFn,
-    IObjectParamArchiveType, object2ArchiveObject
-} from "@Model/Parameter";
+import { Individual } from "./Individual";
+import { CtrlObject } from "./CtrlObject";
+import type { Behavior } from "./Behavior"; 
+import { Label } from "./Label";
+import { Range } from "./Range";

 enum GenMod {
    Point = "p",
    Range = "R"
 }

-interface IArchiveGroup {
-    individuals: IArchiveIndividual[];
-    genMethod: Group["genMethod"];
-    genPoint: Group["genPoint"];
-    genRange: IObjectParamArchiveType | undefined;
-    genCount: Group["genCount"];
-    genErrorMessage: Group["genErrorMessage"];
-    genErrorMessageShowCount: Group["genErrorMessageShowCount"];
-    killCount: Group["killCount"];
-    behaviors: IObjectParamArchiveType[];
-}
-
 /**
 * 群体类型
 */
-class Group extends CtrlObject<IArchiveGroup> {
+class Group extends CtrlObject {

 	/**
 	 * 所有个体
 	 */
 	public individuals: Set<Individual> = new Set();

-    /**
-     * 缓存的 individuals 数组, 用于存档加载
-     */
-    public cacheIndividualsArray: Array<Individual> = [];
-
    /**
     * 个体生成方式
     */
@@ -60,7 +37,7 @@ class Group extends CtrlObject<IArchiveGroup> {
    /**
     * 生成个数
     */
-    public genCount: number = 100;
+    public genCount: number = 1;

    /**
     * 生成错误信息
@@ -75,7 +52,7 @@ class Group extends CtrlObject<IArchiveGroup> {
    /**
     * 删除个数
     */
-    public killCount: number = 100;
+    public killCount: number = 1;

    private genInSingleRange(count: number, range: Range) {
        for (let i = 0; i < count; i++) {
@@ -293,11 +270,9 @@ class Group extends CtrlObject<IArchiveGroup> {
    public remove(individual: Individual[] | Individual): this {
        if (Array.isArray(individual)) {
            for (let i = 0; i < individual.length; i++) {
-                individual[i].group = undefined;
                this.individuals.delete(individual[i]);
            }
        } else {
-            individual.group = undefined;
            this.individuals.delete(individual);
        }
        return this;
@@ -331,7 +306,7 @@ class Group extends CtrlObject<IArchiveGroup> {
 	/**
 	 * 行为列表
 	 */
-	public behaviors: IAnyBehavior[] = [];
+	public behaviors: Behavior[] = [];

 	/**
 	 * 添加行为
@@ -381,37 +356,15 @@ class Group extends CtrlObject<IArchiveGroup> {
 	 * @param
     */
 	public runner(t: number, effectType: "finalEffect" | "effect" | "afterEffect" ): void {
-
-        for(let j = 0; j < this.behaviors.length; j++) {
-
-            const behavior = this.behaviors[j];
-            if (behavior.isDeleted()) {
-                continue;
-            }
-
-            const runnerFunction = behavior[effectType];
-            if (!runnerFunction) {
-                continue;
-            }
-            
-            for (let k = 0; k < behavior.currentGroupKey.length; k++) {
-
-                let parameterCache = behavior.parameter[
-                    behavior.currentGroupKey[k] as string
-                ];
-
-                if (Array.isArray(parameterCache?.objects)) {
-                    parameterCache.objects = [this];
-
+		this.individuals.forEach((individual) => {
+			for(let j = 0; j < this.behaviors.length; j++) {
+                if (this.behaviors[j].isDeleted()) {
+                    continue;
                } else {
-                    parameterCache.objects = this;
+                    this.behaviors[j][effectType](individual, this, this.model, t);
                }
-            }
-
-            this.individuals.forEach((individual) => {
-                runnerFunction(individual, this, this.model, t);
-            });
-        }
+			}
+		});
 	}

    /**
@@ -428,43 +381,11 @@ class Group extends CtrlObject<IArchiveGroup> {
        return dataBuffer;
    }

-    public override toArchive(): IArchiveCtrlObject & IArchiveGroup {
-        return {
-            ...super.toArchive(),
-            objectType: "G",
-            genMethod: this.genMethod,
-            genPoint: this.genPoint.concat([]),
-            genRange: object2ArchiveObject(this.genRange) as IObjectParamArchiveType,
-            genCount: this.genCount,
-            genErrorMessage: this.genErrorMessage,
-            genErrorMessageShowCount: this.genErrorMessageShowCount,
-            killCount: this.killCount,
-            behaviors: object2ArchiveObject(this.behaviors) as IObjectParamArchiveType[]
-        };
-    }
-
-    public override fromArchive(archive: IArchiveCtrlObject & IArchiveGroup, paster: IArchiveParseFn): void {
-        super.fromArchive(archive, paster);
-        this.genMethod = archive.genMethod,
-        this.genPoint = archive.genPoint.concat([]),
-        this.genRange = archive.genRange ? paster(archive.genRange) as any : undefined,
-        this.genCount = archive.genCount,
-        this.genErrorMessage = archive.genErrorMessage,
-        this.genErrorMessageShowCount = archive.genErrorMessageShowCount,
-        this.killCount = archive.killCount,
-        this.behaviors = archive.behaviors.map((item) => {
-            return item ? paster(item) as any : undefined;
-        }).filter(c => !!c);
-    }
-    
-    public constructor(model: Model) {
-
-        super(model);
-        
-        if (model.renderer) {
-            this.renderParameter = getDefaultValue(model.renderer.pointsParameterOption);
-        }
-    }
+    /**
+     * 绘制大小 
+     */
+    public size: number = 60;
 }

-export { Group, GenMod, IArchiveGroup };
+export default Group;
+export { Group, GenMod };
@@ -1,15 +1,5 @@
-import type { Group } from "@Model/Group";
-import { IAnyObject, ObjectID } from "@Model/Model";
-import { IArchiveParseFn, object2ArchiveObject, isArchiveObjectType } from "@Model/Parameter";
-
-interface IArchiveIndividual {
-    id: string;
-    position: number[];
-    velocity: number[];
-    acceleration: number[];
-    force: number[];
-    metaData: IAnyObject;
-}
+import type { Group } from "./Group";
+import { ObjectID } from "./Renderer";

 /**
 * 群中的个体类型
@@ -57,8 +47,6 @@ class Individual {
        }
    }

-    public id: string;
-
 	/**
 	 * 坐标
 	 */
@@ -100,26 +88,20 @@ class Individual {
 	/**
 	 * 所属群组
 	 */
-	public group: Group | undefined;
+	public group: Group;

 	/**
 	 * 初始化
 	 */
 	public constructor(group: Group) {
 		this.group = group;
-        this.id = this.group.model.getNextIndividualId();
 	}

-    public isDie(): boolean {
-        return !!this.group;
-    }
-
    /**
     * 死亡
     */
    public die(): this {
-        this.group?.remove(this);
-        this.group = undefined;
+        this.group.remove(this);
        return this;
    }

@@ -128,7 +110,7 @@ class Individual {
     * @param newGroup 新群体
     */
    public transfer(newGroup: Group): this {
-        this.group?.remove(this);
+        this.group.remove(this);
        newGroup.add(this);
        this.group = newGroup;
        return this;
@@ -180,67 +162,7 @@ class Individual {
        this.metaData.set(key, value);
        return value;
    }
-
-    public toArchive(): IArchiveIndividual {
-
-        const metaDataArchive = {} as IAnyObject;
-        this.metaData.forEach((value, key) => {
-            
-            // 处理内置对象
-            let ltObject = object2ArchiveObject(value);
-            if (ltObject) {
-                metaDataArchive[key] = ltObject;
-            }
-
-            // 处理数组
-            else if (Array.isArray(value)) {
-                metaDataArchive[key] = value.concat([]);
-            }
-
-            // 处理值
-            else {
-                metaDataArchive[key] = value;
-            }
-        });
-
-        return {
-            id: this.id,
-            position: this.position.concat([]),
-            velocity: this.velocity.concat([]),
-            acceleration: this.acceleration.concat([]),
-            force: this.force.concat([]),
-            metaData: metaDataArchive
-        };
-    }
-
-    public fromArchive(archive: IArchiveIndividual, paster: IArchiveParseFn): void {
-
-        const metaData = new Map() as Map<ObjectID, any>;
-        for (const key in archive.metaData) {
-            
-            const value = archive.metaData[key];
-
-            // 处理内置对象
-            if (value instanceof Object && isArchiveObjectType(value)) {
-                metaData.set(key, paster(value));
-            }
-
-            else if (Array.isArray(value)) {
-                metaData.set(key, value.concat([]));
-            }
-
-            else {
-                metaData.set(key, value);
-            }
-        }
-
-        this.id = archive.id,
-        this.position = archive.position.concat([]),
-        this.velocity = archive.velocity.concat([]),
-        this.acceleration = archive.acceleration.concat([]),
-        this.force = archive.force.concat([]),
-        this.metaData = metaData;
-    }
 }

-export { Individual, IArchiveIndividual };
+export default Individual;
+export { Individual };
@@ -1,13 +1,5 @@
-import type { Model, ObjectID } from "@Model/Model";
-import { v4 as uuid } from "uuid";
-
-interface IArchiveLabel {
-    isBuildIn: boolean;
-    id: string;
-    name: string;
-    color: number[];
-    deleteFlag: boolean;
-}
+import type { Model } from "./Model";
+import { ObjectID } from "./Renderer";

 /**
 * 数据标签
@@ -44,9 +36,9 @@ class Label {
     * @param id 标签 ID
     * @param name 用户定义的名称
     */
-    public constructor(model: Model, name?: string) {
+    public constructor(model: Model, id: ObjectID, name?: string) {
        this.model = model;
-        this.id = uuid();
+        this.id = id;
        this.name = name ?? this.name;
    }

@@ -86,29 +78,10 @@ class Label {
    /**
     * 设置为内置标签
     */
-    public setBuildInLabel(id: string): this {
-        this.id = id;
+    public setBuildInLabel(): this {
        this.isBuildIn = true;
        return this;
    }
-
-    public toArchive(): IArchiveLabel {
-        return {
-            isBuildIn: this.isBuildIn,
-            id: this.id,
-            name: this.name,
-            color: this.color.concat([]),
-            deleteFlag: this.deleteFlag
-        } as any;
-    }
-
-    public fromArchive(archive: IArchiveLabel): void {
-        this.isBuildIn = archive.isBuildIn,
-        this.id = archive.id,
-        this.name = archive.name,
-        this.color = archive.color.concat([]),
-        this.deleteFlag = archive.deleteFlag
-    }
 }

 /**
@@ -119,7 +92,7 @@ class LabelObject {
    /**
     * 标签集合
     */
-    public labels: Label[] = [];
+    private labels: Label[] = [];

    /**
     * 获取全部 Label
@@ -159,4 +132,4 @@ class LabelObject {
    }
 }

-export { Label, LabelObject, IArchiveLabel };
+export { Label, LabelObject };
@@ -1,29 +1,17 @@
-import { Label } from "@Model/Label";
-import { Group } from "@Model/Group";
-import { Range } from "@Model/Range";
-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";
-
-/**
- * 对象标识符
- */
-type ObjectID = string;
-
-/**
- * 任意类型对象
- */
-type IAnyObject = Record<string, any>;
+import { Individual } from "./Individual";
+import { Group } from "./Group";
+import { Range } from "./Range";
+import { Emitter, EventType, EventMixin } from "./Emitter";
+import { CtrlObject } from "./CtrlObject";
+import { ObjectID, AbstractRenderer } from "./Renderer";
+import { Label } from "./Label";
+import { Behavior, IAnyBehavior, IAnyBehaviorRecorder, IParamValue } from "./Behavior";

 type ModelEvent = {
    labelChange: Label[];
    objectChange: CtrlObject[];
    individualChange: Group;
    behaviorChange: IAnyBehavior;
-    clipChange: Clip[];
 };

 /**
@@ -32,14 +20,11 @@ type ModelEvent = {
 class Model extends Emitter<ModelEvent> {

    /**
-     * 个体 ID 生成
+     * 下一个需要分配的 ID
     */
-    public nextIndividualId: number = 0;
-
-    public getNextIndividualId() {
-        this.nextIndividualId ++;
-        const random = Math.random().toString(36).slice(-8);
-        return `${this.nextIndividualId}-${random}`;
+    private idIndex: number = 1;
+    public nextId(label: string = "U"): string {
+        return `${label}-${this.idIndex ++}`;
    }

    /**
@@ -63,26 +48,21 @@ class Model extends Emitter<ModelEvent> {
    /**
     * 内置标签-全部范围标签
     */
-    public allRangeLabel = new Label(this).setBuildInLabel("AllRange");
+    public allRangeLabel = new Label(this, "AllRange").setBuildInLabel();

    /**
     * 内置标签-全部群标签
     */
-    public allGroupLabel = new Label(this).setBuildInLabel("AllGroup");
-
-    /**
-     * 内置标签-全部群标签
-     */
-    public currentGroupLabel = new Label(this).setBuildInLabel("CurrentGroupLabel");
+    public allGroupLabel = new Label(this, "AllGroup").setBuildInLabel();

    /**
     * 添加标签
     */
    public addLabel(name: string): Label {
-        let label = new Label(this, name);
+        console.log(`Model: Creat label with id ${this.idIndex}`);
+        let label = new Label(this, this.nextId("L"), name);
        this.labelPool.push(label);
        this.emit("labelChange", this.labelPool);
-        console.log(`Model: Creat label with id ${label.id}`);
        return label;
    }

@@ -144,10 +124,10 @@ class Model extends Emitter<ModelEvent> {
     * 添加组
     */
    public addGroup(): Group {
-        let group = new Group(this);
+        console.log(`Model: Creat group with id ${this.idIndex}`);
+        let group = new Group(this, this.nextId("G"));
        this.objectPool.push(group);
        this.emit("objectChange", this.objectPool);
-        console.log(`Model: Creat group with id ${group.id}`);
        return group;
    }

@@ -155,10 +135,10 @@ class Model extends Emitter<ModelEvent> {
     * 添加范围
     */
    public addRange(): Range {
-        let range = new Range(this);
+        console.log(`Model: Creat range with id ${this.idIndex}`);
+        let range = new Range(this, this.nextId("R"));
        this.objectPool.push(range);
        this.emit("objectChange", this.objectPool);
-        console.log(`Model: Creat range with id ${range.id}`);
        return range;
    }

@@ -232,7 +212,6 @@ class Model extends Emitter<ModelEvent> {
    public updateBehaviorParameter() {
        for (let i = 0; i < this.behaviorPool.length; i++) {
            const behavior = this.behaviorPool[i];
-            behavior.currentGroupKey = [];
            
            for (let key in behavior.parameterOption) {
                switch (behavior.parameterOption[key].type) {
@@ -246,17 +225,11 @@ class Model extends Emitter<ModelEvent> {
                        }
                        break;

-                    case "CG":
                    case "G":
-                        const dataG: IParamValue<"CG"> = behavior.parameter[key];
+                        const dataG: IParamValue<"G"> = behavior.parameter[key];
                        dataG.objects = undefined;
-
-                        if (dataG.picker instanceof Label && dataG.picker.id === this.currentGroupLabel.id) {
-                            behavior.currentGroupKey.push(key);
-                            dataG.objects = undefined;
-                        }
                        
-                        else if (dataG.picker instanceof Group && !dataG.picker.isDeleted()) {
+                        if (dataG.picker instanceof Group && !dataG.picker.isDeleted()) {
                            dataG.objects = dataG.picker;
                        }
                        break;
@@ -276,9 +249,8 @@ class Model extends Emitter<ModelEvent> {
                        }
                        break;

-                    case "CLG":
                    case "LG":
-                        const dataLG: IParamValue<"CLG"> = behavior.parameter[key];
+                        const dataLG: IParamValue<"LG"> = behavior.parameter[key];
                        dataLG.objects = [];

                        if (dataLG.picker instanceof Group && !dataLG.picker.isDeleted()) {
@@ -286,16 +258,9 @@ class Model extends Emitter<ModelEvent> {
                        }

                        if (dataLG.picker instanceof Label && !dataLG.picker.isDeleted()) {
-
-                            if (dataLG.picker.id === this.currentGroupLabel.id) {
-                                behavior.currentGroupKey.push(key);
-                                dataLG.objects = [];
-
-                            } else {
-                                dataLG.objects = this.getObjectByLabel(dataLG.picker).filter((obj) => {
-                                    return obj instanceof Group;
-                                }) as any;
-                            }
+                            dataLG.objects = this.getObjectByLabel(dataLG.picker).filter((obj) => {
+                                return obj instanceof Group;
+                            }) as any;
                        }
                        break;
                }
@@ -332,59 +297,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 +339,8 @@ class Model extends Emitter<ModelEvent> {
                object.runner(t, "finalEffect");
            }
        }
+
+        this.draw();
    }

    public draw() {
@@ -437,15 +351,29 @@ class Model extends Emitter<ModelEvent> {
        // 渲染
        for (let i = 0; i < this.objectPool.length; i++) {
            let object = this.objectPool[i];
-            object.renderParameter.color = object.color;
            if (object.display && object instanceof Group) {
-                this.renderer.points(object.id, object.exportPositionData(), object.renderParameter);
+                this.renderer.points(object.id, object.exportPositionData(), {
+                    color: object.color,
+                    size: object.size
+                } as any);
            }
            if (object.display && object instanceof Range) {
-                this.renderer.cube(object.id, object.position, object.radius, object.renderParameter);
+                this.renderer.cube(object.id, object.position, {
+                    color: object.color,
+                    radius: object.radius
+                } as any);
            }
        }
    }
 }

-export { Model, ObjectID, IAnyObject }
+export {
+    Individual,
+    Group,
+    Emitter,
+    EventType,
+    EventMixin,
+    Model,
+    CtrlObject,
+    ObjectID
+}
@@ -1,364 +0,0 @@
-import { Group } from "@Model/Group";
-import { Range } from "@Model/Range";
-import { Label } from "@Model/Label";
-import { Behavior, IAnyBehavior } from "@Model/Behavior";
-import { Individual } from "@Model/Individual";
-import { CtrlObject } from "@Model/CtrlObject";
-
-type IObjectParamArchiveType = {
-    __LIVING_TOGETHER_OBJECT_ID: string;
-    __LIVING_TOGETHER_OBJECT_TYPE: "Individual" | "Range" | "Group" | "Label" | "Behavior";
-}
-
-type IObjectParamCacheType<P, Q = P> = {
-    picker: P;
-    objects: Q;
-}
-
-/**
- * 参数类型
- */
-type IMapBasicParamTypeKeyToType = {
-    "number": number;
-    "string": string;
-    "boolean": boolean;
-    "option": string;
-}
-
-type IMapObjectParamTypeKeyToType = {
-    "R": IObjectParamCacheType<Range | undefined>;
-    "G": IObjectParamCacheType<Group | undefined>;
-    "LR": IObjectParamCacheType<Label | Range | undefined, Range[]>;
-    "LG": IObjectParamCacheType<Label | Group | undefined, Group[]>;
-    "CG": IObjectParamCacheType<Label | Group | undefined, Group | undefined>;
-    "CLG": IObjectParamCacheType<Label | Group | undefined, Group[]>;
-}
-
-type IMapArchiveObjectParamTypeKeyToType = {
-    "R": IObjectParamCacheType<IObjectParamArchiveType | undefined>;
-    "G": IObjectParamCacheType<IObjectParamArchiveType | undefined>;
-    "LR": IObjectParamCacheType<IObjectParamArchiveType | undefined, IObjectParamArchiveType[]>;
-    "LG": IObjectParamCacheType<IObjectParamArchiveType | undefined, IObjectParamArchiveType[]>;
-    "CG": IObjectParamCacheType<IObjectParamArchiveType | undefined>;
-    "CLG": IObjectParamCacheType<IObjectParamArchiveType | undefined, IObjectParamArchiveType[]>;
-}
-
-type IMapVectorParamTypeKeyToType = {
-    "vec": number[];
-    "color": number[];
-}
-
-/**
- * 参数类型映射
- */
-type AllMapType = IMapBasicParamTypeKeyToType & IMapObjectParamTypeKeyToType & IMapVectorParamTypeKeyToType;
-type AllArchiveMapType = IMapBasicParamTypeKeyToType & IMapArchiveObjectParamTypeKeyToType & IMapVectorParamTypeKeyToType;
-type IParamType = keyof AllMapType;
-type IObjectType = keyof IMapObjectParamTypeKeyToType;
-type IVectorType = keyof IMapVectorParamTypeKeyToType;
-type IParamValue<K extends IParamType> = AllMapType[K];
-type IArchiveParamValue<K extends IParamType> = AllArchiveMapType[K];
-
-/**
- * 特殊对象类型判定
- */
-const objectTypeListEnumSet = new Set<string>(["R", "G", "LR", "LG", "CG", "CLG"]);
-
-/**
- * 对象断言表达式
- */
-function isObjectType(key: string): key is IVectorType {
-    return objectTypeListEnumSet.has(key);
-}
- 
-/**
- * 向量断言表达式
- */
-function isVectorType(key: string): key is IObjectType {
-    return key === "vec";
-}
-
-/**
- * 压缩对象断言表达式
- */
-function isArchiveObjectType(key: Object): key is IObjectParamArchiveType {
-    return !!(
-        (key as IObjectParamArchiveType).__LIVING_TOGETHER_OBJECT_ID &&
-        (key as IObjectParamArchiveType).__LIVING_TOGETHER_OBJECT_TYPE
-    );
-}
-
-/**
- * 模型参数类型
- */
-interface IParameterOptionItem<T extends IParamType = IParamType> {
-
-    /**
-     * 参数类型
-     */
-    type: T | string;
-
-    /**
-     * 参数默认值
-     */
-    defaultValue?: IParamValue<T>;
-
-    /**
-     * 数值变化回调
-     */
-    onChange?: (value: IParamValue<T>) => any;
-
-    /**
-     * 名字
-     */
-    name: string;
-
-    /**
-     * 字符长度
-     */
-    maxLength?: number;
-
-    /**
-     * 数字步长
-     */
-    numberStep?: number;
-
-    /**
-     * 最大值最小值
-     */
-    numberMax?: number;
-    numberMin?: number;
-
-    /**
-     * 图标名字
-     */
-    iconName?: string;
-
-    /**
-     * 图标是否显示为红色
-     */
-    iconRed?: boolean;
-
-    /**
-     * 颜色是否进行归一化
-     */
-    colorNormal?: boolean;
-
-    /**
-     * 显示条件
-     */
-    condition?: {key: string, value: any};
-
-    /**
-     * 全部选项
-     */
-    allOption?: Array<{key: string, name: string}>;
-}
-
-interface IParameter {
-    [x: string]: IParamType;
-}
-
-/**
- * 参数类型列表
- */
-type IParameterOption<P extends IParameter> = {
-    [X in keyof P]: IParameterOptionItem<P[X]>;
-}
-
-/**
- * 参数类型列表映射到参数对象
- */
-type IParameterValue<P extends IParameter> = {
-    [X in keyof P]: IParamValue<P[X]>
-}
-
-type IArchiveParameterValue<P extends IParameter> = {
-    [X in keyof P]: IArchiveParamValue<P[X]>
-}
-
-function getDefaultValue<P extends IParameter> (option: IParameterOption<P>): IParameterValue<P> {
-    let defaultObj = {} as IParameterValue<P>;
-    for (let key in option) {
-        let defaultVal = option[key].defaultValue;
-        
-        if (defaultVal !== undefined) {
-            defaultObj[key] = defaultVal;
-        } else {
-
-            switch (option[key].type) {
-                case "string":
-                    defaultObj[key] = "" as any;
-                    break;
-
-                case "number":
-                    defaultObj[key] = 0 as any;
-                    break;
-
-                case "boolean":
-                    defaultObj[key] = false as any;
-                    break;
-
-                case "vec":
-                    defaultObj[key] = [0, 0, 0] as any;
-                    break;
-                
-                case "CG":
-                case "G":
-                case "R":
-                    defaultObj[key] = {
-                        picker: undefined,
-                        objects: undefined
-                    } as any;
-                    break;
-
-                case "CLG":
-                case "LR":
-                case "LG":
-                    defaultObj[key] = {
-                        picker: undefined,
-                        objects: []
-                    } as any;
-                    break;
-            }
-        }
-    }
-    return defaultObj;
-}
-
-type IRealObjectType = Range | Group | Label | IAnyBehavior | Individual | CtrlObject;
-type IArchiveParseFn = (archive: IObjectParamArchiveType) => IRealObjectType | undefined;
-
-function object2ArchiveObject(object: IRealObjectType | IRealObjectType[] | any, testArray: boolean = true): 
-IObjectParamArchiveType | IObjectParamArchiveType[] | undefined {
-    if (object instanceof Individual) {
-        return {
-            __LIVING_TOGETHER_OBJECT_ID: object.id,
-            __LIVING_TOGETHER_OBJECT_TYPE: "Individual"
-        }
-    }
-    else if (object instanceof Range) {
-        return {
-            __LIVING_TOGETHER_OBJECT_ID: object.id,
-            __LIVING_TOGETHER_OBJECT_TYPE: "Range"
-        }
-    } else if (object instanceof Group) {
-        return {
-            __LIVING_TOGETHER_OBJECT_ID: object.id,
-            __LIVING_TOGETHER_OBJECT_TYPE: "Group"
-        }
-    } else if (object instanceof Label) {
-        return {
-            __LIVING_TOGETHER_OBJECT_ID: object.id,
-            __LIVING_TOGETHER_OBJECT_TYPE: "Label"
-        }
-    } else if (object instanceof Behavior) {
-        return {
-            __LIVING_TOGETHER_OBJECT_ID: object.id,
-            __LIVING_TOGETHER_OBJECT_TYPE: "Behavior"
-        }
-    } else if (Array.isArray(object) && testArray) {
-        const hasValue = (item: any): item is IObjectParamArchiveType => !!item;
-        return object.map(item => object2ArchiveObject(item, false)).filter(hasValue);
-    } else {
-        return undefined;
-    }
-}
-
-function parameter2ArchiveObject<P extends IParameter>
-(value: IParameterValue<P>, option?: IParameterOption<P>): IArchiveParameterValue<P> {
-    let archive = {} as IArchiveParameterValue<P>;
-
-    const handelColl = (key: string, cValue: IParamValue<IParamType>) => {
-
-        // 处理对象类型
-        if (cValue instanceof Object && !Array.isArray(cValue)) {
-            const picker = (cValue as IObjectParamCacheType<any>).picker;
-            const objects = (cValue as IObjectParamCacheType<any>).objects;
-
-            (archive[key] as any) = {
-                picker: object2ArchiveObject(picker),
-                objects: object2ArchiveObject(objects)
-            }
-        }
-
-        // 处理数组类型
-        else if (Array.isArray(cValue)) {
-            (archive[key] as any) = cValue.concat([]);
-        }
-
-        // 处理数值
-        else {
-            (archive[key] as any) = cValue;
-        }
-    }
-
-    // 存在参考设置对象
-    if (option) {
-        for (const key in option) {
-            handelColl(key, value[key]);
-        }
-    }
-    
-    // 不存在设置对象
-    else {
-        for (const key in value) {
-            handelColl(key, value[key]);
-        }
-    }
-
-    return archive;
-}
-
-function archiveObject2Parameter<P extends IParameter>
-(value: IArchiveParameterValue<P>, parse: IArchiveParseFn, option?: IParameterOption<P>): IParameterValue<P> {
-    let parameter = {} as IParameterValue<P>;
-
-    const handelColl = (key: string, cValue: IArchiveParamValue<IParamType>) => {
-
-        // 处理对象类型
-        if (cValue instanceof Object && !Array.isArray(cValue)) {
-            const picker = (cValue as IObjectParamCacheType<IObjectParamArchiveType>).picker;
-            const objects = (cValue as IObjectParamCacheType<IObjectParamArchiveType>).objects;
-
-            (parameter[key] as any) = {
-                picker: picker ? parse(picker) : picker,
-                objects: objects ? Array.isArray(objects) ? objects.map(item => parse(item)) : parse(objects) : objects
-            }
-        }
-
-        // 处理数组类型
-        else if (Array.isArray(cValue)) {
-            (parameter[key] as any) = cValue.concat([]);
-        }
-
-        // 处理数值
-        else {
-            (parameter[key] as any) = cValue;
-        }
-    }
-
-    // 存在参考设置对象
-    if (option) {
-        for (const key in option) {
-            handelColl(key, value[key]);
-        }
-    }
-    
-    // 不存在设置对象
-    else {
-        for (const key in value) {
-            handelColl(key, value[key]);
-        }
-    }
-
-    return parameter;
-}
-
-export {
-    IParamType, IParamValue, isObjectType, isVectorType, getDefaultValue,
-    IParameterOptionItem, IParameter, IParameterOption, IParameterValue,
-    object2ArchiveObject, parameter2ArchiveObject, archiveObject2Parameter,
-    IArchiveParseFn, IObjectParamArchiveType, isArchiveObjectType,
-    IArchiveParameterValue, IRealObjectType
-}
--- a/Show More
+++ b/Show More
Author	SHA1	Message	Date
MrKBear	a3d1429c66	Per release	2022-04-07 16:51:16 +08:00
MrKBear	f2edac0cbd	Mod group i18n terms	2022-04-07 16:46:05 +08:00