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

Compare commits

base: MrKBear:master
Branches Tags
MrKBear:master
MrKBear:dev-mrkbear
MrKBear:Alpha0.2.1
MrKBear:Alpha0.1.5
MrKBear:Alpha0.0.1
..
compare: MrKBear:Alpha0.0.1
Branches Tags
MrKBear:dev-mrkbear
MrKBear:master
MrKBear:Alpha0.2.1
MrKBear:Alpha0.1.5
MrKBear:Alpha0.0.1

2 Commits
master ... Alpha0.0.1

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
136 changed files with 1514 additions and 10961 deletions
Show Stats Expand all files Collapse all files

1
.gitignore vendored
View File

@ -42,7 +42,6 @@ node_modules/
jspm_packages/
build/
out/
bundle/
# TypeScript v1 declaration files
typings/

75
assets/LoadingPage.html
View File

File diff suppressed because one or more lines are too long

BIN
assets/favicon.ico
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 264 KiB

After

Width:  |  Height:  |  Size: 264 KiB

BIN
assets/living-together.icns
View File

Binary file not shown.

BIN
assets/living-together.ico
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 1.0 MiB

68
config/electron.forge.config.js
View File

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

304
config/parseSave2Obj.js
View File

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

31
config/webpack.common.js
View File

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

56
config/webpack.desktop.js
View File

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

46
config/webpack.electron.js
View File

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

41
config/webpack.service.js
View File

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

3075
package-lock.json generated
View File

File diff suppressed because it is too large Load Diff

49
package.json
View File

@ -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,42 +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",
"chart.js": "^3.7.1",
"detect-port": "^1.3.0",
"downloadjs": "^1.4.7",
"express": "^4.17.3",
"gl-matrix": "^3.4.3",
"react": "^17.0.2",
"react-chartjs-2": "^4.1.0",
"react-dnd": "^16.0.1",
"react-dnd-html5-backend": "^16.0.1",
"react-dom": "^17.0.2",
"readline-sync": "^1.4.10",
"uuid": "^8.3.2"
"react-dom": "^17.0.2"
}
}

86
source/Behavior/Avoidance.ts
View File

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

43
source/Behavior/Behavior.ts
View File

@ -1,34 +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 { Avoidance } from "@Behavior/Avoidance";
import { DirectionCluster } from "@Behavior/DirectionCluster";
import { CentralCluster } from "@Behavior/CentralCluster";
import { Manufacture } from "@Behavior/Manufacture";
import { Wastage } from "@Behavior/Wastage";
import { SampleTracking } from "@Behavior/SampleTracking";
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),
new BehaviorRecorder(Avoidance),
new BehaviorRecorder(DirectionCluster),
new BehaviorRecorder(CentralCluster),
new BehaviorRecorder(Manufacture),
new BehaviorRecorder(Wastage),
new BehaviorRecorder(SampleTracking),
]
/**
@ -74,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 };

82
source/Behavior/BoundaryConstraint.ts
View File

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

211
source/Behavior/Brownian.ts
View File

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

96
source/Behavior/CentralCluster.ts
View File

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

102
source/Behavior/ContactAssimilate.ts
View File

@ -1,102 +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",
self: "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" },
self: { type: "CG", name: "$Self" },
range: { type: "number", name: "$Range", defaultValue: .05, numberMin: 0, numberStep: .01 },
success: { type: "number", name: "$Success", defaultValue: 90, numberMin: 0, numberMax: 100, numberStep: 5 }
};
public effect = (individual: Individual, group: Group, model: Model, t: number): void => {
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) {
// 同化目标
let assimilateGroup = this.parameter.assimilate.objects;
if (assimilateGroup) {
targetIndividual.transfer(assimilateGroup);
}
// 同化目标
let selfGroup = this.parameter.self.objects;
if (selfGroup) {
individual.transfer(selfGroup);
}
}
}
});
}
}
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..."
},
"$Self": {
"ZH_CN": "自身同化到...",
"EN_US": "Self assimilate to..."
},
"$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 };

89
source/Behavior/ContactAttacking.ts
View File

@ -1,89 +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",
assimilate: "CG",
}
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 },
assimilate: { type: "CG", name: "$Assimilate"}
};
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();
if (this.parameter.assimilate?.objects) {
individual.transfer(this.parameter.assimilate.objects);
}
}
}
});
}
}
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"
},
"$Assimilate": {
"ZH_CN": "同化",
"EN_US": "Assimilate"
}
};
}
export { ContactAttacking };

96
source/Behavior/DelayAssimilate.ts
View File

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

93
source/Behavior/DirectionCluster.ts
View File

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

144
source/Behavior/Dynamics.ts Normal file
View File

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

83
source/Behavior/Manufacture.ts
View File

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

136
source/Behavior/PhysicsDynamics.ts
View File

@ -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.0001, condition: { key: "limit", value: true }
},
maxVelocity: {
name: "$Max.Velocity", type: "number", defaultValue: 12.5,
numberStep: .1, numberMin: 0.0001, 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 && lengthA) {
individual.acceleration[0] = individual.acceleration[0] * this.parameter.maxAcceleration / lengthA;
individual.acceleration[1] = individual.acceleration[1] * this.parameter.maxAcceleration / lengthA;
individual.acceleration[2] = individual.acceleration[2] * this.parameter.maxAcceleration / lengthA;
}
}
// 计算速度
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 && lengthV) {
individual.velocity[0] = individual.velocity[0] * this.parameter.maxVelocity / lengthV;
individual.velocity[1] = individual.velocity[1] * this.parameter.maxVelocity / lengthV;
individual.velocity[2] = individual.velocity[2] * this.parameter.maxVelocity / lengthV;
}
}
// 应用速度
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 };

160
source/Behavior/SampleTracking.ts
View File

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

74
source/Behavior/Template.ts
View File

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

186
source/Behavior/Tracking.ts
View File

@ -1,186 +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",
angle: "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 },
angle: { type: "number", name: "$Angle", defaultValue: 180, numberMin: 0, numberMax: 360, numberStep: 5 },
strength: { type: "number", name: "$Strength", defaultValue: 1, numberMin: 0, numberStep: .1 }
};
private target: Individual | undefined = undefined;
private currentDistant: number = Infinity;
private angle2Vector(v1: number[], v2: number[]): number {
return Math.acos(
(v1[0] * v2[0] + v1[1] * v2[1] + v1[2] * v2[2]) /
(
(v1[0] ** 2 + v1[1] ** 2 + v1[2] ** 2) ** 0.5 *
(v2[0] ** 2 + v2[1] ** 2 + v2[2] ** 2) ** 0.5
)
) * 180 / Math.PI;
}
private searchTarget(individual: Individual) {
for (let i = 0; i < this.parameter.target.objects.length; i++) {
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) {
// 计算目标方位
const targetDir = [
targetIndividual.position[0] - individual.position[0],
targetIndividual.position[1] - individual.position[1],
targetIndividual.position[2] - individual.position[2]
];
// 计算角度
const angle = this.angle2Vector(individual.velocity, targetDir);
if (angle < (this.parameter.angle ?? 360) / 2) {
this.target = targetIndividual;
this.currentDistant = dis;
}
}
});
}
}
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"
},
"$Angle": {
"ZH_CN": "可视角度",
"EN_US": "Viewing angle"
}
};
}
export { Tracking };

100
source/Behavior/Wastage.ts
View File

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

2
source/Input/AttrInput/AttrInput.scss → source/Component/AttrInput/AttrInput.scss
View File

@ -1,4 +1,4 @@
@import "../../Component/Theme/Theme.scss";
@import "../Theme/Theme.scss";
$line-min-height: 24px;

6
source/Input/AttrInput/AttrInput.tsx → source/Component/AttrInput/AttrInput.tsx
View File

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

4
source/Component/BehaviorList/BehaviorList.scss
View File

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

10
source/Component/BehaviorList/BehaviorList.tsx
View File

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

2
source/Input/BehaviorPicker/BehaviorPicker.scss → source/Component/BehaviorPicker/BehaviorPicker.scss
View File

@ -1,4 +1,4 @@
@import "../../Component/Theme/Theme.scss";
@import "../Theme/Theme.scss";
div.behavior-picker-list {
width: 100%;

10
source/Input/BehaviorPicker/BehaviorPicker.tsx → source/Component/BehaviorPicker/BehaviorPicker.tsx
View File

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

32
source/Component/BehaviorPopup/BehaviorPopup.tsx
View File

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

148
source/Component/ClipList/ClipList.scss
View File

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

130
source/Component/ClipList/ClipList.tsx
View File

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

0
source/Input/ColorInput/ColorInput.scss → source/Component/ColorInput/ColorInput.scss
View File

2
source/Input/ColorInput/ColorInput.tsx → source/Component/ColorInput/ColorInput.tsx
View File

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

2
source/Input/ComboInput/ComboInput.scss → source/Component/ComboInput/ComboInput.scss
View File

@ -1,4 +1,4 @@
@import "../../Component/Theme/Theme.scss";
@import "../Theme/Theme.scss";
$line-min-height: 24px;

18
source/Input/ComboInput/ComboInput.tsx → source/Component/ComboInput/ComboInput.tsx
View File

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

43
source/Component/CommandBar/CommandBar.scss
View File

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

249
source/Component/CommandBar/CommandBar.tsx
View File

@ -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,84 +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;
}}
/>
}
})}
{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 };

11
source/Component/ConfirmPopup/ConfirmPopup.tsx
View File

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

4
source/Component/Container/Container.scss
View File

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

14
source/Component/Container/Container.tsx
View File

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

4
source/Component/DetailsList/DetailsList.tsx
View File

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

71
source/Component/HeaderBar/HeaderBar.scss
View File

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

176
source/Component/HeaderBar/HeaderBar.tsx
View File

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

2
source/Component/LabelList/LabelList.tsx
View File

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

2
source/Input/LabelPicker/LabelPicker.scss → source/Component/LabelPicker/LabelPicker.scss
View File

@ -1,4 +1,4 @@
@import "../../Component/Theme/Theme.scss";
@import "../Theme/Theme.scss";
$line-min-height: 26px;

12
source/Input/LabelPicker/LabelPicker.tsx → source/Component/LabelPicker/LabelPicker.tsx
View File

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

60
source/Component/LoadFile/LoadFile.scss
View File

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

142
source/Component/LoadFile/LoadFile.tsx
View File

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

2
source/Component/Localization/Localization.tsx
View File

@ -78,4 +78,4 @@ class Localization extends Component<ILocalizationProps & IMixinSettingProps &
}
}
export { Localization, I18N, LanguageDataBase, AllI18nKeys, ILocalizationProps };
export { Localization, I18N, LanguageDataBase, AllI18nKeys };

0
source/Input/Message/Message.scss → source/Component/Message/Message.scss
View File

2
source/Input/Message/Message.tsx → source/Component/Message/Message.tsx
View File

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

2
source/Input/ObjectPicker/ObjectPicker.scss → source/Component/ObjectPicker/ObjectPicker.scss
View File

@ -1,4 +1,4 @@
@import "../../Component/Theme/Theme.scss";
@import "../Theme/Theme.scss";
@import "../PickerList/RainbowBg.scss";
$line-min-height: 24px;

20
source/Input/ObjectPicker/ObjectPicker.tsx → source/Component/ObjectPicker/ObjectPicker.tsx
View File

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

8
source/Component/OfflineRender/OfflineRender.scss
View File

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

124
source/Component/OfflineRender/OfflineRender.tsx
View File

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

0
source/Input/PickerList/PickerList.scss → source/Component/PickerList/PickerList.scss
View File

65
source/Input/PickerList/PickerList.tsx → source/Component/PickerList/PickerList.tsx
View File

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

0
source/Input/PickerList/RainbowBg.scss → source/Component/PickerList/RainbowBg.scss
View File

2
source/Component/Popup/Popup.tsx
View File

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

42
source/Component/ProcessPopup/ProcessPopup.scss
View File

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

89
source/Component/ProcessPopup/ProcessPopup.tsx
View File

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

160
source/Component/Recorder/Recorder.scss
View File

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

136
source/Component/Recorder/Recorder.tsx
View File

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

2
source/Input/SearchBox/SearchBox.scss → source/Component/SearchBox/SearchBox.scss
View File

@ -1,4 +1,4 @@
@import "../../Component/Theme/Theme.scss";
@import "../Theme/Theme.scss";
$search-box-height: 26px;

4
source/Input/SearchBox/SearchBox.tsx → source/Component/SearchBox/SearchBox.tsx
View File

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

2
source/Component/SettingPopup/SettingPopup.scss
View File

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

39
source/Component/SettingPopup/SettingPopup.tsx
View File

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

2
source/Input/TextField/TextField.scss → source/Component/TextField/TextField.scss
View File

@ -1,4 +1,4 @@
@import "../../Component/Theme/Theme.scss";
@import "../Theme/Theme.scss";
$line-min-height: 26px;

0
source/Input/TextField/TextField.tsx → source/Component/TextField/TextField.tsx
View File

2
source/Component/Theme/Theme.tsx
View File

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

2
source/Input/TogglesInput/TogglesInput.scss → source/Component/TogglesInput/TogglesInput.scss
View File

@ -1,4 +1,4 @@
@import "../../Component/Theme/Theme.scss";
@import "../Theme/Theme.scss";
$line-min-height: 26px;

4
source/Input/TogglesInput/TogglesInput.tsx → source/Component/TogglesInput/TogglesInput.tsx
View File

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

133
source/Context/Archive.tsx
View File

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

4
source/Context/Context.tsx
View File

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

42
source/Context/Electron.ts
View File

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

2
source/Context/Popups.ts
View File

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

23
source/Context/Setting.tsx
View File

@ -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,18 +27,13 @@ class Setting extends Emitter<ISettingEvents> {
/**
* 语言
*/
public language: Language = "EN_US";
public language: Language = "ZH_CN";
/**
* 布局
*/
public layout: Layout = new Layout();
/**
* 是否显示线性图表
*/
public lineChartType: boolean = false;
/**
* 设置参数
*/
@ -78,5 +63,5 @@ const useSettingWithEvent = superConnectWithEvent<Setting, ISettingEvents>(Setti
export {
Themes, Setting, SettingContext, useSetting, Language, useSettingWithEvent,
IMixinSettingProps, SettingProvider, SettingConsumer, Platform
IMixinSettingProps, SettingProvider, SettingConsumer
};

179
source/Context/Status.tsx
View File

@ -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,30 +29,21 @@ function randomColor(unNormal: boolean = false) {
}
interface IStatusEvent {
fileSave: void;
fileLoad: void;
fileChange: void;
renderLoop: number;
physicsLoop: number;
recordLoop: number;
offlineLoop: number;
modelUpdate: void;
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;
@ -65,6 +54,12 @@ class Status extends Emitter<IStatusEvent> {
public setting: Setting = undefined as any;
/**
* 对象命名
*/
public objectNameIndex = 1;
public labelNameIndex = 1;
/**
* 渲染器
*/
@ -105,11 +100,6 @@ class Status extends Emitter<IStatusEvent> {
*/
public focusBehavior?: Behavior;
/**
* 焦点行为
*/
public focusClip?: Clip;
private drawTimer?: NodeJS.Timeout;
private delayDraw = () => {
@ -131,29 +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.actuator.on("modelUpdate", () => { this.emit("modelUpdate") });
// 对象变化事件
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 = () => {
@ -165,49 +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.emit("clipChange");
// 清除焦点对象
this.setBehaviorObject();
this.setFocusObject(new Set());
this.setLabelObject();
this.setClipObject();
// 映射
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("clipChange", handelFileChange);
this.on("individualChange", handelFileChange);
this.on("groupAttrChange", handelFileChange);
this.on("rangeAttrChange", handelFileChange);
this.on("labelAttrChange", handelFileChange);
this.on("behaviorAttrChange", handelFileChange);
this.on("clipAttrChange", handelFileChange);
this.on("fileChange", () => this.archive.emit("fileChange"));
}
public bindRenderer(renderer: AbstractRenderer) {
@ -240,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");
}
/**
* 修改范围属性
*/
@ -259,6 +188,7 @@ class Status extends Emitter<IStatusEvent> {
if (range && range instanceof Range) {
range[key] = val;
this.emit("rangeAttrChange");
this.model.draw();
}
}
@ -271,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) {
@ -293,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) {
@ -376,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) {

181
source/Electron/Electron.ts
View File

@ -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();

41
source/Electron/SimulatorAPI.ts
View File

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

49
source/Electron/SimulatorWindow.ts
View File

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

8
source/GLRender/BasicGroup.ts
View File

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

27
source/GLRender/BasicRenderer.ts
View File

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

90
source/GLRender/ClassicRenderer.ts
View File

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

42
source/GLRender/GroupShader.ts
View File

@ -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
source/Input/ComboList/ComboList.scss
View File

@ -1 +0,0 @@
@import "../PickerList/PickerList.scss";

71
source/Input/ComboList/ComboList.tsx
View File

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

0
source/Input/Parameter/Parameter.scss
View File

287
source/Input/Parameter/Parameter.tsx
View File

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

1
source/LivingTogether.ts Normal file
View File

@ -0,0 +1 @@
export * from "@Model/Model";

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

@ -1,20 +1,14 @@
const EN_US = {
"Language": "Language",
"EN_US": "English (US)",
"ZH_CN": "Chinese (Simplified)",
"Themes": "Themes",
"Themes.Dark": "Dark",
"Themes.Light": "Light",
"Header.Bar.Title": "Living Together | Emulator",
"Header.Bar.Title.Info": "Group Behavior Research Emulator",
"Header.Bar.File.Name.Info": "{file} ({status})",
"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",
@ -31,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",
@ -58,48 +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.Statistics": "View statistics",
"Panel.Title.Statistics": "Statistics",
"Panel.Info.Behavior.Clip.Time.Formate": "{current} / {all} / {fps}fps",
"Panel.Info.Behavior.Clip.Record.Formate": "Record: {time}",
"Panel.Info.Behavior.Clip.Uname.Clip": "Waiting for recording...",
"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",
@ -108,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",
@ -117,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",
@ -148,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",
@ -168,11 +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",
"Panel.Info.Statistics.Nodata": "There are no groups in the model or clip",
"Info.Hint.Save.After.Close": "Any unsaved progress will be lost. Are you sure you want to continue?",
"Info.Hint.Load.File.Title": "Load save",
"Info.Hint.Load.File.Intro": "Release to load the dragged save file",
}
export default EN_US;

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

@ -1,20 +1,14 @@
const ZH_CN = {
"Language": "语言",
"EN_US": "英语 (美国)",
"ZH_CN": "中文 (简体)",
"Themes": "主题",
"Themes.Dark": "黑暗",
"Themes.Light": "亮色",
"Header.Bar.Title": "群生共进 | 仿真器",
"Header.Bar.Title.Info": "群体行为研究仿真器",
"Header.Bar.File.Name.Info": "{file} ({status})",
"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": "拖拽进行视角移动",
@ -26,16 +20,14 @@ const ZH_CN = {
"Command.Bar.Camera.Info": "渲染器设置",
"Command.Bar.Setting.Info": "全局设置",
"Input.Error.Not.Number": "请输入数字",
"Input.Error.Max": "输入数值须小于 {num}",
"Input.Error.Min": "输入数值须大于 {num}",
"Input.Error.Length": "输入内容长度须小于 {num}",
"Input.Error.Length.Less": "输入内容长度须大于 {num}",
"Input.Error.Max": "输入数值须小于 {number}",
"Input.Error.Min": "输入数值须大于 {number}",
"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": "点击此处以赋予行为到此群",
@ -58,57 +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.Statistics": "查看统计信息",
"Panel.Title.Statistics": "统计",
"Panel.Info.Behavior.Clip.Time.Formate": "{current} / {all} / {fps} fps",
"Panel.Info.Behavior.Clip.Record.Formate": "录制: {time}",
"Panel.Info.Behavior.Clip.Uname.Clip": "等待录制...",
"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": "未知错误",
@ -117,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 坐标",
@ -148,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": "对象不是一个群",
@ -168,11 +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": "请指定一个剪辑片段以查看属性",
"Panel.Info.Statistics.Nodata": "模型或剪辑中不存在任何群",
"Info.Hint.Save.After.Close": "任何未保存的进度都会丢失, 确定要继续吗?",
"Info.Hint.Load.File.Title": "加载存档",
"Info.Hint.Load.File.Intro": "释放以加载拽入的存档",
}
export default ZH_CN;

341
source/Model/Actuator.ts
View File

@ -1,20 +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;
modelUpdate: void;
}
/**
@ -30,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);
}
/**
* 主时钟状态控制
*/
@ -217,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) {
@ -385,31 +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.emit("modelUpdate");
this.alignTimer = 0;
}
}
}
}
else {
} else {
this.emit("loop", Infinity);
}
}
@ -453,4 +122,4 @@ class Actuator extends Emitter<IActuatorEvent> {
}
}
export { Actuator, ActuatorModel }
export { Actuator }

Some files were not shown because too many files have changed in this diff Show More