Compare commits
2
Commits
| Author | SHA1 | Date | |
|---|---|---|---|
 MrKBear
|
396b128a2c | ||
|
MrKBear
|
298688269c |
File diff suppressed because one or more lines are too long
@@ -123,10 +123,6 @@ const resolve = (plugins = []) => {
|
||||
|
||||
let res = {
|
||||
extensions: [ ".tsx", '.ts', '.js' ],
|
||||
fallback: {
|
||||
'react/jsx-runtime': 'react/jsx-runtime.js',
|
||||
'react/jsx-dev-runtime': 'react/jsx-dev-runtime.js',
|
||||
},
|
||||
plugins: plugins
|
||||
};
|
||||
|
||||
|
||||
Generated
+6
-184
@@ -16,8 +16,6 @@
|
||||
"express": "^4.17.3",
|
||||
"gl-matrix": "^3.4.3",
|
||||
"react": "^17.0.2",
|
||||
"react-dnd": "^16.0.1",
|
||||
"react-dnd-html5-backend": "^16.0.1",
|
||||
"react-dom": "^17.0.2",
|
||||
"uuid": "^8.3.2"
|
||||
},
|
||||
@@ -728,17 +726,6 @@
|
||||
"node": ">=4"
|
||||
}
|
||||
},
|
||||
"node_modules/@babel/runtime": {
|
||||
"version": "7.17.9",
|
||||
"resolved": "https://registry.npmmirror.com/@babel/runtime/-/runtime-7.17.9.tgz",
|
||||
"integrity": "sha512-lSiBBvodq29uShpWGNbgFdKYNiFDo5/HIYsaCEY9ff4sb10x9jizo2+pRrSyF4jKZCXqgzuqBOQKbUm90gQwJg==",
|
||||
"dependencies": {
|
||||
"regenerator-runtime": "^0.13.4"
|
||||
},
|
||||
"engines": {
|
||||
"node": ">=6.9.0"
|
||||
}
|
||||
},
|
||||
"node_modules/@discoveryjs/json-ext": {
|
||||
"version": "0.5.6",
|
||||
"resolved": "https://registry.npmjs.org/@discoveryjs/json-ext/-/json-ext-0.5.6.tgz",
|
||||
@@ -1036,21 +1023,6 @@
|
||||
"node": ">=10"
|
||||
}
|
||||
},
|
||||
"node_modules/@react-dnd/asap": {
|
||||
"version": "5.0.2",
|
||||
"resolved": "https://registry.npmmirror.com/@react-dnd/asap/-/asap-5.0.2.tgz",
|
||||
"integrity": "sha512-WLyfoHvxhs0V9U+GTsGilGgf2QsPl6ZZ44fnv0/b8T3nQyvzxidxsg/ZltbWssbsRDlYW8UKSQMTGotuTotZ6A=="
|
||||
},
|
||||
"node_modules/@react-dnd/invariant": {
|
||||
"version": "4.0.2",
|
||||
"resolved": "https://registry.npmmirror.com/@react-dnd/invariant/-/invariant-4.0.2.tgz",
|
||||
"integrity": "sha512-xKCTqAK/FFauOM9Ta2pswIyT3D8AQlfrYdOi/toTPEhqCuAs1v5tcJ3Y08Izh1cJ5Jchwy9SeAXmMg6zrKs2iw=="
|
||||
},
|
||||
"node_modules/@react-dnd/shallowequal": {
|
||||
"version": "4.0.2",
|
||||
"resolved": "https://registry.npmmirror.com/@react-dnd/shallowequal/-/shallowequal-4.0.2.tgz",
|
||||
"integrity": "sha512-/RVXdLvJxLg4QKvMoM5WlwNR9ViO9z8B/qPcc+C0Sa/teJY7QG7kJ441DwzOjMYEY7GmU4dj5EcGHIkKZiQZCA=="
|
||||
},
|
||||
"node_modules/@sindresorhus/is": {
|
||||
"version": "0.14.0",
|
||||
"resolved": "https://registry.npmmirror.com/@sindresorhus/is/-/is-0.14.0.tgz",
|
||||
@@ -1223,7 +1195,7 @@
|
||||
"version": "17.0.21",
|
||||
"resolved": "https://registry.npmjs.org/@types/node/-/node-17.0.21.tgz",
|
||||
"integrity": "sha512-DBZCJbhII3r90XbQxI8Y9IjjiiOGlZ0Hr32omXIZvwwZ7p4DMMXGrKXVyPfuoBOri9XNtL0UK69jYIBIsRX3QQ==",
|
||||
"devOptional": true
|
||||
"dev": true
|
||||
},
|
||||
"node_modules/@types/normalize-package-data": {
|
||||
"version": "2.4.1",
|
||||
@@ -2845,16 +2817,6 @@
|
||||
"node": ">=8"
|
||||
}
|
||||
},
|
||||
"node_modules/dnd-core": {
|
||||
"version": "16.0.1",
|
||||
"resolved": "https://registry.npmmirror.com/dnd-core/-/dnd-core-16.0.1.tgz",
|
||||
"integrity": "sha512-HK294sl7tbw6F6IeuK16YSBUoorvHpY8RHO+9yFfaJyCDVb6n7PRcezrOEOa2SBCqiYpemh5Jx20ZcjKdFAVng==",
|
||||
"dependencies": {
|
||||
"@react-dnd/asap": "^5.0.1",
|
||||
"@react-dnd/invariant": "^4.0.1",
|
||||
"redux": "^4.2.0"
|
||||
}
|
||||
},
|
||||
"node_modules/dns-equal": {
|
||||
"version": "1.0.0",
|
||||
"resolved": "https://registry.npmjs.org/dns-equal/-/dns-equal-1.0.0.tgz",
|
||||
@@ -3355,7 +3317,8 @@
|
||||
"node_modules/fast-deep-equal": {
|
||||
"version": "3.1.3",
|
||||
"resolved": "https://registry.npmjs.org/fast-deep-equal/-/fast-deep-equal-3.1.3.tgz",
|
||||
"integrity": "sha512-f3qQ9oQy9j2AhBe/H9VC91wLmKBCCU/gDOnKNAYG5hswO7BLKj09Hc5HYNz9cGI++xlpDCIgDaitVs03ATR84Q=="
|
||||
"integrity": "sha512-f3qQ9oQy9j2AhBe/H9VC91wLmKBCCU/gDOnKNAYG5hswO7BLKj09Hc5HYNz9cGI++xlpDCIgDaitVs03ATR84Q==",
|
||||
"dev": true
|
||||
},
|
||||
"node_modules/fast-glob": {
|
||||
"version": "3.2.11",
|
||||
@@ -3982,14 +3945,6 @@
|
||||
"he": "bin/he"
|
||||
}
|
||||
},
|
||||
"node_modules/hoist-non-react-statics": {
|
||||
"version": "3.3.2",
|
||||
"resolved": "https://registry.npmmirror.com/hoist-non-react-statics/-/hoist-non-react-statics-3.3.2.tgz",
|
||||
"integrity": "sha512-/gGivxi8JPKWNm/W0jSmzcMPpfpPLc3dY/6GxhX2hQ9iGj3aDfklV4ET7NjKpSinLpJ5vafa9iiGIEZg10SfBw==",
|
||||
"dependencies": {
|
||||
"react-is": "^16.7.0"
|
||||
}
|
||||
},
|
||||
"node_modules/hosted-git-info": {
|
||||
"version": "4.1.0",
|
||||
"resolved": "https://registry.npmjs.org/hosted-git-info/-/hosted-git-info-4.1.0.tgz",
|
||||
@@ -6209,43 +6164,6 @@
|
||||
"node": ">=0.10.0"
|
||||
}
|
||||
},
|
||||
"node_modules/react-dnd": {
|
||||
"version": "16.0.1",
|
||||
"resolved": "https://registry.npmmirror.com/react-dnd/-/react-dnd-16.0.1.tgz",
|
||||
"integrity": "sha512-QeoM/i73HHu2XF9aKksIUuamHPDvRglEwdHL4jsp784BgUuWcg6mzfxT0QDdQz8Wj0qyRKx2eMg8iZtWvU4E2Q==",
|
||||
"dependencies": {
|
||||
"@react-dnd/invariant": "^4.0.1",
|
||||
"@react-dnd/shallowequal": "^4.0.1",
|
||||
"dnd-core": "^16.0.1",
|
||||
"fast-deep-equal": "^3.1.3",
|
||||
"hoist-non-react-statics": "^3.3.2"
|
||||
},
|
||||
"peerDependencies": {
|
||||
"@types/hoist-non-react-statics": ">= 3.3.1",
|
||||
"@types/node": ">= 12",
|
||||
"@types/react": ">= 16",
|
||||
"react": ">= 16.14"
|
||||
},
|
||||
"peerDependenciesMeta": {
|
||||
"@types/hoist-non-react-statics": {
|
||||
"optional": true
|
||||
},
|
||||
"@types/node": {
|
||||
"optional": true
|
||||
},
|
||||
"@types/react": {
|
||||
"optional": true
|
||||
}
|
||||
}
|
||||
},
|
||||
"node_modules/react-dnd-html5-backend": {
|
||||
"version": "16.0.1",
|
||||
"resolved": "https://registry.npmmirror.com/react-dnd-html5-backend/-/react-dnd-html5-backend-16.0.1.tgz",
|
||||
"integrity": "sha512-Wu3dw5aDJmOGw8WjH1I1/yTH+vlXEL4vmjk5p+MHxP8HuHJS1lAGeIdG/hze1AvNeXWo/JgULV87LyQOr+r5jw==",
|
||||
"dependencies": {
|
||||
"dnd-core": "^16.0.1"
|
||||
}
|
||||
},
|
||||
"node_modules/react-dom": {
|
||||
"version": "17.0.2",
|
||||
"resolved": "https://registry.npmjs.org/react-dom/-/react-dom-17.0.2.tgz",
|
||||
@@ -6259,11 +6177,6 @@
|
||||
"react": "17.0.2"
|
||||
}
|
||||
},
|
||||
"node_modules/react-is": {
|
||||
"version": "16.13.1",
|
||||
"resolved": "https://registry.npmmirror.com/react-is/-/react-is-16.13.1.tgz",
|
||||
"integrity": "sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ=="
|
||||
},
|
||||
"node_modules/read-pkg": {
|
||||
"version": "5.2.0",
|
||||
"resolved": "https://registry.npmjs.org/read-pkg/-/read-pkg-5.2.0.tgz",
|
||||
@@ -6392,19 +6305,6 @@
|
||||
"node": ">=8"
|
||||
}
|
||||
},
|
||||
"node_modules/redux": {
|
||||
"version": "4.2.0",
|
||||
"resolved": "https://registry.npmmirror.com/redux/-/redux-4.2.0.tgz",
|
||||
"integrity": "sha512-oSBmcKKIuIR4ME29/AeNUnl5L+hvBq7OaJWzaptTQJAntaPvxIJqfnjbaEiCzzaIz+XmVILfqAM3Ob0aXLPfjA==",
|
||||
"dependencies": {
|
||||
"@babel/runtime": "^7.9.2"
|
||||
}
|
||||
},
|
||||
"node_modules/regenerator-runtime": {
|
||||
"version": "0.13.9",
|
||||
"resolved": "https://registry.npmmirror.com/regenerator-runtime/-/regenerator-runtime-0.13.9.tgz",
|
||||
"integrity": "sha512-p3VT+cOEgxFsRRA9X4lkI1E+k2/CtnKtU4gcxyaCUreilL/vqI6CdZ3wxVUx3UOUg+gnUOQQcRI7BmSI656MYA=="
|
||||
},
|
||||
"node_modules/regexp.prototype.flags": {
|
||||
"version": "1.4.1",
|
||||
"resolved": "https://registry.npmjs.org/regexp.prototype.flags/-/regexp.prototype.flags-1.4.1.tgz",
|
||||
@@ -8867,14 +8767,6 @@
|
||||
}
|
||||
}
|
||||
},
|
||||
"@babel/runtime": {
|
||||
"version": "7.17.9",
|
||||
"resolved": "https://registry.npmmirror.com/@babel/runtime/-/runtime-7.17.9.tgz",
|
||||
"integrity": "sha512-lSiBBvodq29uShpWGNbgFdKYNiFDo5/HIYsaCEY9ff4sb10x9jizo2+pRrSyF4jKZCXqgzuqBOQKbUm90gQwJg==",
|
||||
"requires": {
|
||||
"regenerator-runtime": "^0.13.4"
|
||||
}
|
||||
},
|
||||
"@discoveryjs/json-ext": {
|
||||
"version": "0.5.6",
|
||||
"resolved": "https://registry.npmjs.org/@discoveryjs/json-ext/-/json-ext-0.5.6.tgz",
|
||||
@@ -9121,21 +9013,6 @@
|
||||
"rimraf": "^3.0.2"
|
||||
}
|
||||
},
|
||||
"@react-dnd/asap": {
|
||||
"version": "5.0.2",
|
||||
"resolved": "https://registry.npmmirror.com/@react-dnd/asap/-/asap-5.0.2.tgz",
|
||||
"integrity": "sha512-WLyfoHvxhs0V9U+GTsGilGgf2QsPl6ZZ44fnv0/b8T3nQyvzxidxsg/ZltbWssbsRDlYW8UKSQMTGotuTotZ6A=="
|
||||
},
|
||||
"@react-dnd/invariant": {
|
||||
"version": "4.0.2",
|
||||
"resolved": "https://registry.npmmirror.com/@react-dnd/invariant/-/invariant-4.0.2.tgz",
|
||||
"integrity": "sha512-xKCTqAK/FFauOM9Ta2pswIyT3D8AQlfrYdOi/toTPEhqCuAs1v5tcJ3Y08Izh1cJ5Jchwy9SeAXmMg6zrKs2iw=="
|
||||
},
|
||||
"@react-dnd/shallowequal": {
|
||||
"version": "4.0.2",
|
||||
"resolved": "https://registry.npmmirror.com/@react-dnd/shallowequal/-/shallowequal-4.0.2.tgz",
|
||||
"integrity": "sha512-/RVXdLvJxLg4QKvMoM5WlwNR9ViO9z8B/qPcc+C0Sa/teJY7QG7kJ441DwzOjMYEY7GmU4dj5EcGHIkKZiQZCA=="
|
||||
},
|
||||
"@sindresorhus/is": {
|
||||
"version": "0.14.0",
|
||||
"resolved": "https://registry.npmmirror.com/@sindresorhus/is/-/is-0.14.0.tgz",
|
||||
@@ -9299,7 +9176,7 @@
|
||||
"version": "17.0.21",
|
||||
"resolved": "https://registry.npmjs.org/@types/node/-/node-17.0.21.tgz",
|
||||
"integrity": "sha512-DBZCJbhII3r90XbQxI8Y9IjjiiOGlZ0Hr32omXIZvwwZ7p4DMMXGrKXVyPfuoBOri9XNtL0UK69jYIBIsRX3QQ==",
|
||||
"devOptional": true
|
||||
"dev": true
|
||||
},
|
||||
"@types/normalize-package-data": {
|
||||
"version": "2.4.1",
|
||||
@@ -10611,16 +10488,6 @@
|
||||
"path-type": "^4.0.0"
|
||||
}
|
||||
},
|
||||
"dnd-core": {
|
||||
"version": "16.0.1",
|
||||
"resolved": "https://registry.npmmirror.com/dnd-core/-/dnd-core-16.0.1.tgz",
|
||||
"integrity": "sha512-HK294sl7tbw6F6IeuK16YSBUoorvHpY8RHO+9yFfaJyCDVb6n7PRcezrOEOa2SBCqiYpemh5Jx20ZcjKdFAVng==",
|
||||
"requires": {
|
||||
"@react-dnd/asap": "^5.0.1",
|
||||
"@react-dnd/invariant": "^4.0.1",
|
||||
"redux": "^4.2.0"
|
||||
}
|
||||
},
|
||||
"dns-equal": {
|
||||
"version": "1.0.0",
|
||||
"resolved": "https://registry.npmjs.org/dns-equal/-/dns-equal-1.0.0.tgz",
|
||||
@@ -11038,7 +10905,8 @@
|
||||
"fast-deep-equal": {
|
||||
"version": "3.1.3",
|
||||
"resolved": "https://registry.npmjs.org/fast-deep-equal/-/fast-deep-equal-3.1.3.tgz",
|
||||
"integrity": "sha512-f3qQ9oQy9j2AhBe/H9VC91wLmKBCCU/gDOnKNAYG5hswO7BLKj09Hc5HYNz9cGI++xlpDCIgDaitVs03ATR84Q=="
|
||||
"integrity": "sha512-f3qQ9oQy9j2AhBe/H9VC91wLmKBCCU/gDOnKNAYG5hswO7BLKj09Hc5HYNz9cGI++xlpDCIgDaitVs03ATR84Q==",
|
||||
"dev": true
|
||||
},
|
||||
"fast-glob": {
|
||||
"version": "3.2.11",
|
||||
@@ -11516,14 +11384,6 @@
|
||||
"integrity": "sha512-F/1DnUGPopORZi0ni+CvrCgHQ5FyEAHRLSApuYWMmrbSwoN2Mn/7k+Gl38gJnR7yyDZk6WLXwiGod1JOWNDKGw==",
|
||||
"dev": true
|
||||
},
|
||||
"hoist-non-react-statics": {
|
||||
"version": "3.3.2",
|
||||
"resolved": "https://registry.npmmirror.com/hoist-non-react-statics/-/hoist-non-react-statics-3.3.2.tgz",
|
||||
"integrity": "sha512-/gGivxi8JPKWNm/W0jSmzcMPpfpPLc3dY/6GxhX2hQ9iGj3aDfklV4ET7NjKpSinLpJ5vafa9iiGIEZg10SfBw==",
|
||||
"requires": {
|
||||
"react-is": "^16.7.0"
|
||||
}
|
||||
},
|
||||
"hosted-git-info": {
|
||||
"version": "4.1.0",
|
||||
"resolved": "https://registry.npmjs.org/hosted-git-info/-/hosted-git-info-4.1.0.tgz",
|
||||
@@ -13191,26 +13051,6 @@
|
||||
"object-assign": "^4.1.1"
|
||||
}
|
||||
},
|
||||
"react-dnd": {
|
||||
"version": "16.0.1",
|
||||
"resolved": "https://registry.npmmirror.com/react-dnd/-/react-dnd-16.0.1.tgz",
|
||||
"integrity": "sha512-QeoM/i73HHu2XF9aKksIUuamHPDvRglEwdHL4jsp784BgUuWcg6mzfxT0QDdQz8Wj0qyRKx2eMg8iZtWvU4E2Q==",
|
||||
"requires": {
|
||||
"@react-dnd/invariant": "^4.0.1",
|
||||
"@react-dnd/shallowequal": "^4.0.1",
|
||||
"dnd-core": "^16.0.1",
|
||||
"fast-deep-equal": "^3.1.3",
|
||||
"hoist-non-react-statics": "^3.3.2"
|
||||
}
|
||||
},
|
||||
"react-dnd-html5-backend": {
|
||||
"version": "16.0.1",
|
||||
"resolved": "https://registry.npmmirror.com/react-dnd-html5-backend/-/react-dnd-html5-backend-16.0.1.tgz",
|
||||
"integrity": "sha512-Wu3dw5aDJmOGw8WjH1I1/yTH+vlXEL4vmjk5p+MHxP8HuHJS1lAGeIdG/hze1AvNeXWo/JgULV87LyQOr+r5jw==",
|
||||
"requires": {
|
||||
"dnd-core": "^16.0.1"
|
||||
}
|
||||
},
|
||||
"react-dom": {
|
||||
"version": "17.0.2",
|
||||
"resolved": "https://registry.npmjs.org/react-dom/-/react-dom-17.0.2.tgz",
|
||||
@@ -13221,11 +13061,6 @@
|
||||
"scheduler": "^0.20.2"
|
||||
}
|
||||
},
|
||||
"react-is": {
|
||||
"version": "16.13.1",
|
||||
"resolved": "https://registry.npmmirror.com/react-is/-/react-is-16.13.1.tgz",
|
||||
"integrity": "sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ=="
|
||||
},
|
||||
"read-pkg": {
|
||||
"version": "5.2.0",
|
||||
"resolved": "https://registry.npmjs.org/read-pkg/-/read-pkg-5.2.0.tgz",
|
||||
@@ -13328,19 +13163,6 @@
|
||||
"strip-indent": "^3.0.0"
|
||||
}
|
||||
},
|
||||
"redux": {
|
||||
"version": "4.2.0",
|
||||
"resolved": "https://registry.npmmirror.com/redux/-/redux-4.2.0.tgz",
|
||||
"integrity": "sha512-oSBmcKKIuIR4ME29/AeNUnl5L+hvBq7OaJWzaptTQJAntaPvxIJqfnjbaEiCzzaIz+XmVILfqAM3Ob0aXLPfjA==",
|
||||
"requires": {
|
||||
"@babel/runtime": "^7.9.2"
|
||||
}
|
||||
},
|
||||
"regenerator-runtime": {
|
||||
"version": "0.13.9",
|
||||
"resolved": "https://registry.npmmirror.com/regenerator-runtime/-/regenerator-runtime-0.13.9.tgz",
|
||||
"integrity": "sha512-p3VT+cOEgxFsRRA9X4lkI1E+k2/CtnKtU4gcxyaCUreilL/vqI6CdZ3wxVUx3UOUg+gnUOQQcRI7BmSI656MYA=="
|
||||
},
|
||||
"regexp.prototype.flags": {
|
||||
"version": "1.4.1",
|
||||
"resolved": "https://registry.npmjs.org/regexp.prototype.flags/-/regexp.prototype.flags-1.4.1.tgz",
|
||||
|
||||
+2
-5
@@ -20,7 +20,6 @@
|
||||
"build-run-web": "npm run build-web & npm run build-service & npm run run-service",
|
||||
"release-run-web": "npm run release-web & npm run release-service & npm run run-service",
|
||||
"copy-fluent-icon": "fse mkdirp ./build/font-icon/ & fse emptyDir ./build/font-icon/ & fse copy ./node_modules/@fluentui/font-icons-mdl2/fonts/ ./build/font-icon/",
|
||||
"copy-loading-page": "fse mkdirp ./build & fse copy ./assets/LoadingPage.html ./build/LoadingPage.html",
|
||||
"build-run-desktop-web": "npm run build-desktop-web & npm run copy-fluent-icon & npm run build-service & npm run run-service",
|
||||
"release-run-desktop-web": "npm run release-desktop-web & npm run copy-fluent-icon & npm run release-service & npm run run-service",
|
||||
"skip-electron-ci": "set ELECTRON_SKIP_BINARY_DOWNLOAD=1& npm ci",
|
||||
@@ -29,8 +28,8 @@
|
||||
"electron-cache": "set ELECTRON_SKIP_BINARY_DOWNLOAD=& set ELECTRON_MIRROR=https://npmmirror.com/mirrors/electron/& set ELECTRON_CUSTOM_DIR={{ version }}& node ./node_modules/electron/install.js",
|
||||
"electron": "set LIVING_TOGETHER_BASE_PATH=./build& set LIVING_TOGETHER_WEB_PATH=/& npx electron ./build/Electron.js",
|
||||
"hmr-electron": "npm run build-electron & set LIVING_TOGETHER_SERVICE=http://127.0.0.1:12000& npm run electron",
|
||||
"build-run-electron": "npm run build-desktop-web & npm run copy-fluent-icon & npm run copy-loading-page & npm run build-electron & npm run electron",
|
||||
"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",
|
||||
"build-run-electron": "npm run build-desktop-web & npm run copy-fluent-icon & npm run build-electron & npm run electron",
|
||||
"release-run-electron": "npm run release-desktop-web & npm run copy-fluent-icon & npm run release-electron & npm run electron",
|
||||
"copy-package-json": "fse mkdirp ./bundle/ & node ./config/electron.forge.config.js --out ./bundle",
|
||||
"copy-build-result": "fse mkdirp ./bundle/ & fse mkdirp ./build/ & fse copy ./build/ ./bundle/",
|
||||
"copy-electron-icon": "fse mkdirp ./bundle/ & fse copy ./assets/living-together.ico ./bundle/living-together.ico & fse copy ./assets/living-together.icns ./bundle/living-together.icns",
|
||||
@@ -76,8 +75,6 @@
|
||||
"express": "^4.17.3",
|
||||
"gl-matrix": "^3.4.3",
|
||||
"react": "^17.0.2",
|
||||
"react-dnd": "^16.0.1",
|
||||
"react-dnd-html5-backend": "^16.0.1",
|
||||
"react-dom": "^17.0.2",
|
||||
"uuid": "^8.3.2"
|
||||
}
|
||||
|
||||
@@ -9,7 +9,7 @@ import { ContactAssimilate } from "@Behavior/ContactAssimilate";
|
||||
import { DelayAssimilate } from "@Behavior/DelayAssimilate";
|
||||
|
||||
const AllBehaviors: IAnyBehaviorRecorder[] = [
|
||||
new BehaviorRecorder(Template),
|
||||
// new BehaviorRecorder(Template),
|
||||
new BehaviorRecorder(PhysicsDynamics),
|
||||
new BehaviorRecorder(Brownian),
|
||||
new BehaviorRecorder(BoundaryConstraint),
|
||||
|
||||
@@ -1,148 +0,0 @@
|
||||
@import "../Theme/Theme.scss";
|
||||
|
||||
$clip-item-height: 45px;
|
||||
|
||||
div.clip-list-root {
|
||||
margin: -5px;
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
|
||||
div.clip-item {
|
||||
margin: 5px;
|
||||
height: $clip-item-height;
|
||||
user-select: none;
|
||||
border-radius: 3px;
|
||||
overflow: hidden;
|
||||
cursor: pointer;
|
||||
display: flex;
|
||||
|
||||
div.clip-item-hole-view {
|
||||
height: 100%;
|
||||
width: 10px;
|
||||
box-sizing: border-box;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-items: center;
|
||||
justify-content: space-between;
|
||||
padding: 5px;
|
||||
padding-right: 0;
|
||||
|
||||
div.clip-item-hole {
|
||||
width: 5px;
|
||||
height: 5px;
|
||||
background-color: #000000;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
}
|
||||
|
||||
div.clip-icon-view {
|
||||
width: $clip-item-height;
|
||||
height: $clip-item-height;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
|
||||
i.icon {
|
||||
display: inline-block;
|
||||
font-size: 25px;
|
||||
}
|
||||
|
||||
i.delete {
|
||||
display: none;
|
||||
}
|
||||
|
||||
i.delete:hover {
|
||||
color: $lt-red;
|
||||
}
|
||||
}
|
||||
|
||||
div.clip-item-content {
|
||||
width: calc( 100% - 65px );
|
||||
padding-right: 10px;
|
||||
max-width: 125px;
|
||||
height: $clip-item-height;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
|
||||
div {
|
||||
white-space: nowrap;
|
||||
text-overflow: ellipsis;
|
||||
overflow: hidden;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
div.info {
|
||||
opacity: .75;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
div.clip-item.disable {
|
||||
cursor: not-allowed;
|
||||
}
|
||||
|
||||
div.clip-item.able:hover {
|
||||
|
||||
div.clip-icon-view {
|
||||
|
||||
i.icon {
|
||||
display: none;
|
||||
}
|
||||
|
||||
i.delete {
|
||||
display: inline-block;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
div.add-button {
|
||||
width: 26px;
|
||||
height: 26px;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
}
|
||||
|
||||
div.dark.clip-list-root {
|
||||
|
||||
div.clip-item {
|
||||
background-color: $lt-bg-color-lvl3-dark;
|
||||
|
||||
div.clip-item-hole-view div.clip-item-hole {
|
||||
background-color: $lt-bg-color-lvl4-dark;
|
||||
}
|
||||
}
|
||||
|
||||
div.clip-item.able:hover {
|
||||
color: $lt-font-color-lvl2-dark;
|
||||
background-color: $lt-bg-color-lvl2-dark;
|
||||
}
|
||||
|
||||
div.clip-item.focus {
|
||||
color: $lt-font-color-lvl1-dark;
|
||||
background-color: $lt-bg-color-lvl1-dark;
|
||||
}
|
||||
}
|
||||
|
||||
div.light.clip-list-root {
|
||||
|
||||
div.clip-item {
|
||||
background-color: $lt-bg-color-lvl3-light;
|
||||
|
||||
div.clip-item-hole-view div.clip-item-hole {
|
||||
background-color: $lt-bg-color-lvl4-light;
|
||||
}
|
||||
}
|
||||
|
||||
div.clip-item.able:hover {
|
||||
color: $lt-font-color-lvl2-light;
|
||||
background-color: $lt-bg-color-lvl2-light;
|
||||
}
|
||||
|
||||
div.clip-item.focus {
|
||||
color: $lt-font-color-lvl1-light;
|
||||
background-color: $lt-bg-color-lvl1-light;
|
||||
}
|
||||
}
|
||||
@@ -1,130 +0,0 @@
|
||||
import { Localization } from "@Component/Localization/Localization";
|
||||
import { Theme } from "@Component/Theme/Theme";
|
||||
import { Icon } from "@fluentui/react";
|
||||
import { Clip } from "@Model/Clip";
|
||||
import { Component, ReactNode } from "react";
|
||||
import "./ClipList.scss";
|
||||
|
||||
interface IClipListProps {
|
||||
clips: Clip[];
|
||||
focus?: Clip;
|
||||
disable?: boolean;
|
||||
add?: () => any;
|
||||
click?: (clip: Clip) => any;
|
||||
delete?: (clip: Clip) => any;
|
||||
}
|
||||
|
||||
class ClipList extends Component<IClipListProps> {
|
||||
|
||||
private isInnerClick: boolean = false;
|
||||
|
||||
private resolveCallback(fn?: (p: any) => any, p?: any): any {
|
||||
if (this.props.disable) {
|
||||
return false;
|
||||
}
|
||||
if (fn) {
|
||||
return fn(p);
|
||||
}
|
||||
}
|
||||
|
||||
private parseTime(time?: number): string {
|
||||
if (time === undefined) {
|
||||
return "0:0:0:0";
|
||||
}
|
||||
const h = Math.floor(time / 3600);
|
||||
const m = Math.floor((time % 3600) / 60);
|
||||
const s = Math.floor((time % 3600) % 60);
|
||||
const ms = Math.floor((time % 1) * 1000);
|
||||
return `${h}:${m}:${s}:${ms}`;
|
||||
}
|
||||
|
||||
private getClipInfo(clip: Clip): string {
|
||||
let fps = Math.round((clip.frames.length - 1) / clip.time);
|
||||
if (isNaN(fps)) fps = 0;
|
||||
return `${this.parseTime(clip.time)} ${fps}fps`;
|
||||
}
|
||||
|
||||
private renderClip(clip: Clip) {
|
||||
|
||||
const focus = clip.equal(this.props.focus);
|
||||
const disable = this.props.disable;
|
||||
const classList = ["clip-item"];
|
||||
|
||||
if (focus) {
|
||||
classList.push("focus");
|
||||
}
|
||||
|
||||
if (disable) {
|
||||
classList.push("disable");
|
||||
} else {
|
||||
classList.push("able");
|
||||
}
|
||||
|
||||
return <div
|
||||
key={clip.id}
|
||||
className={classList.join(" ")}
|
||||
onClick={() => {
|
||||
if (this.isInnerClick) {
|
||||
this.isInnerClick = false;
|
||||
} else {
|
||||
this.resolveCallback(this.props.click, clip);
|
||||
}
|
||||
}}
|
||||
>
|
||||
<div className="clip-item-hole-view">
|
||||
{new Array(4).fill(0).map((_, index) => {
|
||||
return <div className="clip-item-hole" key={index}/>
|
||||
})}
|
||||
</div>
|
||||
<div className="clip-icon-view">
|
||||
<Icon iconName="MyMoviesTV" className="icon"/>
|
||||
<Icon
|
||||
iconName="Delete"
|
||||
className="delete"
|
||||
onClick={() => {
|
||||
this.isInnerClick = true;
|
||||
this.resolveCallback(this.props.delete, clip);
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
<div className="clip-item-content">
|
||||
<div className="title">{clip.name}</div>
|
||||
<div className="info">{
|
||||
clip.isRecording ?
|
||||
<Localization i18nKey="Panel.Info.Behavior.Clip.Uname.Clip"/> :
|
||||
this.getClipInfo(clip)
|
||||
}</div>
|
||||
</div>
|
||||
</div>;
|
||||
}
|
||||
|
||||
private renderAddButton(): ReactNode {
|
||||
|
||||
const classList = ["clip-item", "add-button"];
|
||||
|
||||
if (this.props.disable) {
|
||||
classList.push("disable");
|
||||
} else {
|
||||
classList.push("able");
|
||||
}
|
||||
|
||||
return <div
|
||||
key="ADD_BUTTON"
|
||||
className={classList.join(" ")}
|
||||
onClick={() => this.resolveCallback(this.props.add)}
|
||||
>
|
||||
<Icon iconName="Add"/>
|
||||
</div>
|
||||
}
|
||||
|
||||
public render(): ReactNode {
|
||||
return <Theme className="clip-list-root">
|
||||
{ this.props.clips.map((clip => {
|
||||
return this.renderClip(clip);
|
||||
})) }
|
||||
{ this.renderAddButton() }
|
||||
</Theme>;
|
||||
}
|
||||
}
|
||||
|
||||
export { ClipList };
|
||||
@@ -1,5 +1,3 @@
|
||||
@import "../Theme/Theme.scss";
|
||||
|
||||
div.command-bar {
|
||||
height: 100%;
|
||||
user-select: none;
|
||||
@@ -7,53 +5,32 @@ div.command-bar {
|
||||
flex-direction: column;
|
||||
justify-content: space-between;
|
||||
|
||||
div.command-button {
|
||||
button.ms-Button.command-button {
|
||||
width: 100%;
|
||||
text-align: center;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
transition: all 100ms ease-in-out;
|
||||
cursor: pointer;
|
||||
color: inherit;
|
||||
|
||||
i {
|
||||
font-size: 22px;
|
||||
}
|
||||
|
||||
div.command-button-loading {
|
||||
|
||||
div.ms-Spinner-circle {
|
||||
border-width: 2px;
|
||||
}
|
||||
span.ms-Button-flexContainer i.ms-Icon {
|
||||
font-size: 25px;
|
||||
}
|
||||
}
|
||||
|
||||
div.command-button.on-end {
|
||||
button.ms-Button.command-button.on-end {
|
||||
align-self: flex-end;
|
||||
}
|
||||
}
|
||||
|
||||
div.command-bar.dark div.command-button div.command-button-loading div.ms-Spinner-circle {
|
||||
border-top-color: rgba($color: #FFFFFF, $alpha: .9);
|
||||
border-left-color: rgba($color: #FFFFFF, $alpha: .4);
|
||||
border-bottom-color: rgba($color: #FFFFFF, $alpha: .4);
|
||||
border-right-color: rgba($color: #FFFFFF, $alpha: .4);
|
||||
}
|
||||
|
||||
div.command-bar.light div.command-button div.command-button-loading div.ms-Spinner-circle {
|
||||
border-top-color: rgba($color: #000000, $alpha: .9);
|
||||
border-left-color: rgba($color: #000000, $alpha: .4);
|
||||
border-bottom-color: rgba($color: #000000, $alpha: .4);
|
||||
border-right-color: rgba($color: #000000, $alpha: .4);
|
||||
}
|
||||
|
||||
div.command-bar.dark div.command-button.active,
|
||||
div.command-bar.dark div.command-button:hover {
|
||||
div.command-bar.dark button.ms-Button.command-button.active,
|
||||
div.command-bar.dark button.ms-Button.command-button:hover {
|
||||
background-color: rgba($color: #FFFFFF, $alpha: .2);
|
||||
color: rgba($color: #FFFFFF, $alpha: 1);
|
||||
}
|
||||
|
||||
div.command-bar.light div.command-button.active,
|
||||
div.command-bar.light div.command-button:hover {
|
||||
div.command-bar.light button.ms-Button.command-button.active,
|
||||
div.command-bar.light button.ms-Button.command-button:hover {
|
||||
background-color: rgba($color: #000000, $alpha: .08);
|
||||
color: rgba($color: #000000, $alpha: 1);
|
||||
}
|
||||
|
||||
@@ -1,5 +1,5 @@
|
||||
import { Component, ReactNode, FunctionComponent } from "react";
|
||||
import { DirectionalHint, Icon, Spinner } from "@fluentui/react";
|
||||
import { Component, ReactNode } from "react";
|
||||
import { DirectionalHint, IconButton } from "@fluentui/react";
|
||||
import { useSetting, IMixinSettingProps } from "@Context/Setting";
|
||||
import { useStatusWithEvent, IMixinStatusProps } from "@Context/Status";
|
||||
import { BackgroundLevel, Theme } from "@Component/Theme/Theme";
|
||||
@@ -9,7 +9,6 @@ import { SettingPopup } from "@Component/SettingPopup/SettingPopup";
|
||||
import { BehaviorPopup } from "@Component/BehaviorPopup/BehaviorPopup";
|
||||
import { MouseMod } from "@GLRender/ClassicRenderer";
|
||||
import { ArchiveSave } from "@Context/Archive";
|
||||
import { ActuatorModel } from "@Model/Actuator";
|
||||
import "./CommandBar.scss";
|
||||
|
||||
const COMMAND_BAR_WIDTH = 45;
|
||||
@@ -19,28 +18,23 @@ interface IRenderButtonParameter {
|
||||
iconName?: string;
|
||||
click?: () => void;
|
||||
active?: boolean;
|
||||
isLoading?: boolean;
|
||||
}
|
||||
|
||||
interface ICommandBarState {
|
||||
isSaveRunning: boolean;
|
||||
}
|
||||
|
||||
const CommandButton: FunctionComponent<IRenderButtonParameter> = (param) => {
|
||||
function getRenderButton(param: IRenderButtonParameter): ReactNode {
|
||||
return <LocalizationTooltipHost
|
||||
i18nKey={param.i18NKey}
|
||||
directionalHint={DirectionalHint.rightCenter}
|
||||
>
|
||||
<div
|
||||
<IconButton
|
||||
style={{ height: COMMAND_BAR_WIDTH }}
|
||||
onClick={ param.isLoading ? undefined : param.click }
|
||||
iconProps={{ iconName: param.iconName }}
|
||||
onClick={ param.click }
|
||||
className={"command-button on-end" + (param.active ? " active" : "")}
|
||||
>
|
||||
{param.isLoading ?
|
||||
<Spinner className="command-button-loading"/> :
|
||||
<Icon iconName={param.iconName}/>
|
||||
}
|
||||
</div>
|
||||
/>
|
||||
</LocalizationTooltipHost>
|
||||
}
|
||||
@useSetting
|
||||
@@ -51,62 +45,6 @@ class CommandBar extends Component<IMixinSettingProps & IMixinStatusProps, IComm
|
||||
isSaveRunning: false
|
||||
};
|
||||
|
||||
private renderPlayActionButton(): ReactNode {
|
||||
|
||||
let icon: string = "Play";
|
||||
let handel: () => any = () => {};
|
||||
|
||||
// 播放模式
|
||||
if (this.props.status?.focusClip) {
|
||||
|
||||
// 暂停播放
|
||||
if (this.props.status?.actuator.mod === ActuatorModel.Play) {
|
||||
icon = "Pause";
|
||||
handel = () => {
|
||||
this.props.status?.actuator.pausePlay();
|
||||
console.log("ClipRecorder: Pause play...");
|
||||
};
|
||||
}
|
||||
|
||||
// 开始播放
|
||||
else {
|
||||
icon = "Play";
|
||||
handel = () => {
|
||||
this.props.status?.actuator.playing();
|
||||
console.log("ClipRecorder: Play start...");
|
||||
};
|
||||
}
|
||||
}
|
||||
|
||||
// 正在录制中
|
||||
else if (
|
||||
this.props.status?.actuator.mod === ActuatorModel.Record ||
|
||||
this.props.status?.actuator.mod === ActuatorModel.Offline
|
||||
) {
|
||||
|
||||
// 暂停录制
|
||||
icon = "Stop";
|
||||
handel = () => {
|
||||
this.props.status?.actuator.endRecord();
|
||||
console.log("ClipRecorder: Rec end...");
|
||||
};
|
||||
}
|
||||
|
||||
// 正常控制主时钟
|
||||
else {
|
||||
icon = this.props.status?.actuator.start() ? "Pause" : "Play";
|
||||
handel = () => this.props.status?.actuator.start(
|
||||
!this.props.status?.actuator.start()
|
||||
);
|
||||
}
|
||||
|
||||
return <CommandButton
|
||||
iconName={icon}
|
||||
i18NKey="Command.Bar.Play.Info"
|
||||
click={handel}
|
||||
/>;
|
||||
}
|
||||
|
||||
public render(): ReactNode {
|
||||
|
||||
const mouseMod = this.props.status?.mouseMod ?? MouseMod.Drag;
|
||||
@@ -130,78 +68,78 @@ class CommandBar extends Component<IMixinSettingProps & IMixinStatusProps, IComm
|
||||
}}
|
||||
/>
|
||||
|
||||
<CommandButton
|
||||
iconName="Save"
|
||||
i18NKey="Command.Bar.Save.Info"
|
||||
isLoading={this.state.isSaveRunning}
|
||||
click={() => {
|
||||
{getRenderButton({
|
||||
iconName: "Save",
|
||||
i18NKey: "Command.Bar.Save.Info",
|
||||
click: () => {
|
||||
this.setState({
|
||||
isSaveRunning: true
|
||||
});
|
||||
}}
|
||||
/>
|
||||
}
|
||||
})}
|
||||
|
||||
{this.renderPlayActionButton()}
|
||||
{getRenderButton({
|
||||
iconName: this.props.status?.actuator.start() ? "Pause" : "Play",
|
||||
i18NKey: "Command.Bar.Play.Info",
|
||||
click: () => this.props.status ? this.props.status.actuator.start(
|
||||
!this.props.status.actuator.start()
|
||||
) : undefined
|
||||
})}
|
||||
|
||||
<CommandButton
|
||||
iconName="HandsFree"
|
||||
i18NKey="Command.Bar.Drag.Info"
|
||||
active={mouseMod === MouseMod.Drag}
|
||||
click={() => this.props.status ? this.props.status.setMouseMod(MouseMod.Drag) : undefined}
|
||||
/>
|
||||
{getRenderButton({
|
||||
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}
|
||||
/>
|
||||
{getRenderButton({
|
||||
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={() => {
|
||||
{getRenderButton({
|
||||
iconName: "WebAppBuilderFragment",
|
||||
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={() => {
|
||||
{getRenderButton({
|
||||
iconName: "CubeShape",
|
||||
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={() => {
|
||||
{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={() => {
|
||||
{getRenderButton({
|
||||
iconName: "Tag",
|
||||
i18NKey: "Command.Bar.Add.Tag.Info",
|
||||
click: () => {
|
||||
this.props.status ? this.props.status.newLabel() : undefined;
|
||||
}}
|
||||
/>
|
||||
}
|
||||
})}
|
||||
|
||||
<CommandButton
|
||||
iconName="Camera"
|
||||
i18NKey="Command.Bar.Camera.Info"
|
||||
/>
|
||||
{/* {getRenderButton({ iconName: "Camera", i18NKey: "Command.Bar.Camera.Info" })} */}
|
||||
</div>
|
||||
<div>
|
||||
<CommandButton
|
||||
iconName="Settings"
|
||||
i18NKey="Command.Bar.Setting.Info"
|
||||
click={() => {
|
||||
{/* {getRenderButton({
|
||||
iconName: "Settings",
|
||||
i18NKey: "Command.Bar.Setting.Info",
|
||||
click: () => {
|
||||
this.props.status?.popup.showPopup(SettingPopup, {});
|
||||
}}
|
||||
/>
|
||||
}
|
||||
})} */}
|
||||
</div>
|
||||
</Theme>
|
||||
}
|
||||
|
||||
@@ -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>
|
||||
}
|
||||
|
||||
@@ -1,20 +1,8 @@
|
||||
@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;
|
||||
@@ -22,7 +10,6 @@ div.load-file-layer-root {
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
flex-wrap: wrap;
|
||||
border-radius: 3px;
|
||||
|
||||
div {
|
||||
user-select: none;
|
||||
@@ -41,20 +28,11 @@ div.load-file-layer-root {
|
||||
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;
|
||||
}
|
||||
background-color: rgba($color: #FFFFFF, $alpha: .75);
|
||||
}
|
||||
|
||||
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;
|
||||
}
|
||||
background-color: rgba($color: #000000, $alpha: .75);
|
||||
}
|
||||
@@ -1,20 +1,16 @@
|
||||
import { ConfirmPopup } from "@Component/ConfirmPopup/ConfirmPopup";
|
||||
import { Localization } from "@Component/Localization/Localization";
|
||||
import { FontLevel, Theme } from "@Component/Theme/Theme";
|
||||
import { Status, useStatus, IMixinStatusProps } from "@Context/Status";
|
||||
import { Icon } from "@fluentui/react";
|
||||
import { FunctionComponent } from "react";
|
||||
import { useDrop } from 'react-dnd'
|
||||
import { NativeTypes } from "react-dnd-html5-backend"
|
||||
import { Component, ReactNode } from "react";
|
||||
import "./LoadFile.scss";
|
||||
|
||||
const DragFileMask: FunctionComponent = () => {
|
||||
class LoadFile extends Component {
|
||||
|
||||
private renderMask() {
|
||||
return <Theme
|
||||
className="load-file-layer-root"
|
||||
fontLevel={FontLevel.normal}
|
||||
>
|
||||
<div className="load-file-layer">
|
||||
<div className="drag-icon">
|
||||
<Icon iconName="KnowledgeArticle"/>
|
||||
</div>
|
||||
@@ -24,119 +20,12 @@ const DragFileMask: FunctionComponent = () => {
|
||||
<div className="drag-intro">
|
||||
<Localization i18nKey="Info.Hint.Load.File.Intro"/>
|
||||
</div>
|
||||
</div>
|
||||
</Theme>;
|
||||
}
|
||||
|
||||
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);
|
||||
public render(): ReactNode {
|
||||
return <></>;
|
||||
}
|
||||
}
|
||||
|
||||
// 如果保存进行提示
|
||||
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 };
|
||||
@@ -1,8 +0,0 @@
|
||||
@import "../Theme/Theme.scss";
|
||||
|
||||
div.offline-render-popup {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
box-sizing: border-box;
|
||||
padding: 10px;
|
||||
}
|
||||
@@ -1,124 +0,0 @@
|
||||
import { Component, ReactNode } from "react";
|
||||
import { Popup } from "@Context/Popups";
|
||||
import { useStatusWithEvent, IMixinStatusProps } from "@Context/Status";
|
||||
import { Localization } from "@Component/Localization/Localization";
|
||||
import { AttrInput } from "@Input/AttrInput/AttrInput";
|
||||
import { Message } from "@Input/Message/Message";
|
||||
import { ConfirmContent } from "@Component/ConfirmPopup/ConfirmPopup";
|
||||
import { ProcessPopup } from "@Component/ProcessPopup/ProcessPopup";
|
||||
import { Emitter } from "@Model/Emitter";
|
||||
import "./OfflineRender.scss";
|
||||
|
||||
interface IOfflineRenderProps {
|
||||
close?: () => any;
|
||||
}
|
||||
|
||||
interface IOfflineRenderState {
|
||||
time: number;
|
||||
fps: number;
|
||||
name: string;
|
||||
}
|
||||
|
||||
class OfflineRender extends Popup<IOfflineRenderProps> {
|
||||
|
||||
public minWidth: number = 250;
|
||||
public minHeight: number = 150;
|
||||
public width: number = 400;
|
||||
public height: number = 300;
|
||||
|
||||
public maskForSelf: boolean = true;
|
||||
|
||||
public onRenderHeader(): ReactNode {
|
||||
return <Localization i18nKey="Popup.Offline.Render.Title"/>
|
||||
}
|
||||
|
||||
public render(): ReactNode {
|
||||
return <OfflineRenderComponent {...this.props} close={() => {
|
||||
this.close();
|
||||
}}/>
|
||||
}
|
||||
}
|
||||
|
||||
@useStatusWithEvent()
|
||||
class OfflineRenderComponent extends Component<IOfflineRenderProps & IMixinStatusProps, IOfflineRenderState> {
|
||||
|
||||
public constructor(props: IOfflineRenderProps & IMixinStatusProps) {
|
||||
super(props);
|
||||
this.state = {
|
||||
name: this.props.status?.getNewClipName() ?? "",
|
||||
time: 10,
|
||||
fps: 60
|
||||
}
|
||||
}
|
||||
|
||||
public render(): ReactNode {
|
||||
return <ConfirmContent
|
||||
className="offline-render-popup"
|
||||
actions={[{
|
||||
i18nKey: "Popup.Offline.Render.Input.Start",
|
||||
onClick: () => {
|
||||
|
||||
// 获取新实例
|
||||
let newClip = this.props.status?.newClip();
|
||||
|
||||
if (newClip) {
|
||||
newClip.name = this.state.name;
|
||||
this.props.status?.actuator.offlineRender(newClip, this.state.time, this.state.fps);
|
||||
|
||||
// 开启进度条弹窗
|
||||
this.props.status?.popup.showPopup(ProcessPopup, {});
|
||||
}
|
||||
|
||||
// 关闭这个弹窗
|
||||
this.props.close && this.props.close();
|
||||
}
|
||||
}]}
|
||||
>
|
||||
|
||||
<Message i18nKey="Popup.Offline.Render.Message" isTitle first/>
|
||||
|
||||
<AttrInput
|
||||
id={"Render-Name"}
|
||||
value={this.state.name}
|
||||
keyI18n="Popup.Offline.Render.Input.Name"
|
||||
maxLength={15}
|
||||
valueChange={(val) => {
|
||||
this.setState({
|
||||
name: val
|
||||
});
|
||||
}}
|
||||
/>
|
||||
|
||||
<AttrInput
|
||||
isNumber
|
||||
id={"Render-Time"}
|
||||
value={this.state.time}
|
||||
keyI18n="Popup.Offline.Render.Input.Time"
|
||||
max={3600}
|
||||
min={1}
|
||||
valueChange={(val) => {
|
||||
this.setState({
|
||||
time: parseFloat(val)
|
||||
});
|
||||
}}
|
||||
/>
|
||||
|
||||
<AttrInput
|
||||
isNumber
|
||||
id={"Render-FPS"}
|
||||
max={1000}
|
||||
min={1}
|
||||
value={this.state.fps}
|
||||
keyI18n="Popup.Offline.Render.Input.Fps"
|
||||
valueChange={(val) => {
|
||||
this.setState({
|
||||
fps: parseFloat(val)
|
||||
});
|
||||
}}
|
||||
/>
|
||||
|
||||
</ConfirmContent>
|
||||
}
|
||||
}
|
||||
|
||||
export { OfflineRender };
|
||||
@@ -1,42 +0,0 @@
|
||||
@import "../Theme/Theme.scss";
|
||||
|
||||
div.process-popup {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
box-sizing: border-box;
|
||||
padding: 10px;
|
||||
|
||||
div.ms-ProgressIndicator {
|
||||
transform: none;
|
||||
|
||||
div.ms-ProgressIndicator-progressTrack {
|
||||
transform: none;
|
||||
}
|
||||
|
||||
div.ms-ProgressIndicator-progressBar {
|
||||
transform: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
div.confirm-root.dark div.ms-ProgressIndicator {
|
||||
|
||||
div.ms-ProgressIndicator-progressTrack {
|
||||
background-color: $lt-bg-color-lvl3-dark;
|
||||
}
|
||||
|
||||
div.ms-ProgressIndicator-progressBar {
|
||||
background-color: $lt-font-color-normal-dark;
|
||||
}
|
||||
}
|
||||
|
||||
div.confirm-root.light div.ms-ProgressIndicator {
|
||||
|
||||
div.ms-ProgressIndicator-progressTrack {
|
||||
background-color: $lt-bg-color-lvl3-light;
|
||||
}
|
||||
|
||||
div.ms-ProgressIndicator-progressBar {
|
||||
background-color: $lt-font-color-normal-light;
|
||||
}
|
||||
}
|
||||
@@ -1,89 +0,0 @@
|
||||
import { Component, ReactNode } from "react";
|
||||
import { Popup } from "@Context/Popups";
|
||||
import { Localization } from "@Component/Localization/Localization";
|
||||
import { ConfirmContent } from "@Component/ConfirmPopup/ConfirmPopup";
|
||||
import { useStatusWithEvent, IMixinStatusProps } from "@Context/Status";
|
||||
import { ProgressIndicator } from "@fluentui/react";
|
||||
import { ActuatorModel } from "@Model/Actuator";
|
||||
import "./ProcessPopup.scss";
|
||||
|
||||
interface IProcessPopupProps {
|
||||
close?: () => void;
|
||||
}
|
||||
|
||||
class ProcessPopup extends Popup<IProcessPopupProps> {
|
||||
|
||||
public minWidth: number = 400;
|
||||
public minHeight: number = 150;
|
||||
public width: number = 400;
|
||||
public height: number = 150;
|
||||
|
||||
public maskForSelf: boolean = true;
|
||||
|
||||
public onClose(): void {}
|
||||
|
||||
public onRenderHeader(): ReactNode {
|
||||
return <Localization i18nKey="Popup.Offline.Render.Process.Title"/>
|
||||
}
|
||||
|
||||
public render(): ReactNode {
|
||||
return <ProcessPopupComponent {...this.props} close={() => this.close()}/>
|
||||
}
|
||||
}
|
||||
|
||||
@useStatusWithEvent("offlineLoop", "actuatorStartChange", "recordLoop")
|
||||
class ProcessPopupComponent extends Component<IProcessPopupProps & IMixinStatusProps> {
|
||||
|
||||
public render(): ReactNode {
|
||||
|
||||
let current = this.props.status?.actuator.offlineCurrentFrame ?? 0;
|
||||
let all = this.props.status?.actuator.offlineAllFrame ?? 0;
|
||||
|
||||
const isRendering = this.props.status?.actuator.mod === ActuatorModel.Offline;
|
||||
let i18nKey = "";
|
||||
let color: undefined | "red";
|
||||
let onClick = () => {};
|
||||
|
||||
if (isRendering) {
|
||||
i18nKey = "Popup.Offline.Render.Input.End";
|
||||
color = "red";
|
||||
onClick = () => {
|
||||
this.props.status?.actuator.endOfflineRender();
|
||||
this.forceUpdate();
|
||||
}
|
||||
}
|
||||
|
||||
else {
|
||||
i18nKey = "Popup.Offline.Render.Input.Finished";
|
||||
onClick = () => {
|
||||
this.props.close && this.props.close();
|
||||
}
|
||||
}
|
||||
|
||||
return <ConfirmContent
|
||||
className="process-popup"
|
||||
actions={[{
|
||||
i18nKey: i18nKey,
|
||||
color: color,
|
||||
onClick: onClick
|
||||
}]}
|
||||
>
|
||||
|
||||
<ProgressIndicator
|
||||
percentComplete={current / all}
|
||||
barHeight={3}
|
||||
/>
|
||||
|
||||
<Localization
|
||||
i18nKey="Popup.Offline.Render.Process"
|
||||
options={{
|
||||
current: current.toString(),
|
||||
all: all.toString()
|
||||
}}
|
||||
/>
|
||||
|
||||
</ConfirmContent>
|
||||
}
|
||||
}
|
||||
|
||||
export { ProcessPopup };
|
||||
@@ -1,160 +0,0 @@
|
||||
@import "../Theme/Theme.scss";
|
||||
|
||||
div.recorder-root {
|
||||
width: 100%;
|
||||
box-sizing: border-box;
|
||||
padding: 10px 10px 0 10px;
|
||||
|
||||
div.recorder-slider {
|
||||
width: 100%;
|
||||
transition: none;
|
||||
|
||||
div.ms-Slider-slideBox {
|
||||
height: 16px;
|
||||
transition: none;
|
||||
}
|
||||
|
||||
span.ms-Slider-thumb {
|
||||
width: 12px;
|
||||
height: 12px;
|
||||
line-height: 16px;
|
||||
border-width: 3px;
|
||||
transition: none;
|
||||
top: -4px;
|
||||
}
|
||||
|
||||
span.ms-Slider-active {
|
||||
height: 3px;
|
||||
transition: none;
|
||||
}
|
||||
|
||||
span.ms-Slider-inactive {
|
||||
height: 3px;
|
||||
transition: none;
|
||||
}
|
||||
}
|
||||
|
||||
div.recorder-slider.disable {
|
||||
opacity: .6;
|
||||
}
|
||||
|
||||
div.recorder-content {
|
||||
width: 100%;
|
||||
height: 32px;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
box-sizing: border-box;
|
||||
padding: 0 8px;
|
||||
|
||||
div.time-view {
|
||||
flex-shrink: 1;
|
||||
width: 50%;
|
||||
text-align: left;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
|
||||
div.ctrl-button {
|
||||
cursor: pointer;
|
||||
user-select: none;
|
||||
width: 96px;
|
||||
flex-shrink: 0;
|
||||
text-align: center;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
|
||||
div.ctrl-action {
|
||||
width: 32px;
|
||||
height: 32px;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
div.ctrl-action-main {
|
||||
font-size: 1.5em;
|
||||
}
|
||||
|
||||
div.ctrl-action.disable {
|
||||
cursor: not-allowed;
|
||||
opacity: .6;
|
||||
}
|
||||
}
|
||||
|
||||
div.speed-view {
|
||||
flex-shrink: 1;
|
||||
width: 50%;
|
||||
text-align: right;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
div.recorder-root.light {
|
||||
|
||||
div.recorder-slider {
|
||||
|
||||
span.ms-Slider-thumb {
|
||||
background-color: $lt-bg-color-lvl1-light;
|
||||
border-color: $lt-font-color-normal-light;
|
||||
}
|
||||
|
||||
span.ms-Slider-active {
|
||||
background-color: $lt-font-color-normal-light;
|
||||
}
|
||||
|
||||
span.ms-Slider-inactive {
|
||||
background-color: $lt-bg-color-lvl1-light;
|
||||
}
|
||||
}
|
||||
|
||||
div.recorder-content {
|
||||
|
||||
div.ctrl-button div.ctrl-action:hover {
|
||||
background-color: $lt-bg-color-lvl3-light;
|
||||
color: $lt-font-color-lvl1-light;
|
||||
}
|
||||
|
||||
div.ctrl-button div.ctrl-action.disable:hover {
|
||||
background-color: $lt-bg-color-lvl4-light;
|
||||
color: $lt-font-color-normal-light;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
div.recorder-root.dark {
|
||||
|
||||
div.recorder-slider {
|
||||
|
||||
span.ms-Slider-thumb {
|
||||
background-color: $lt-bg-color-lvl1-dark;
|
||||
border-color: $lt-font-color-normal-dark;
|
||||
}
|
||||
|
||||
span.ms-Slider-active {
|
||||
background-color: $lt-font-color-normal-dark;
|
||||
}
|
||||
|
||||
span.ms-Slider-inactive {
|
||||
background-color: $lt-bg-color-lvl1-dark;
|
||||
}
|
||||
}
|
||||
|
||||
div.recorder-content {
|
||||
|
||||
div.ctrl-button div.ctrl-action:hover {
|
||||
background-color: $lt-bg-color-lvl3-dark;
|
||||
color: $lt-font-color-lvl1-dark;
|
||||
}
|
||||
|
||||
div.ctrl-button div.ctrl-action.disable:hover {
|
||||
background-color: $lt-bg-color-lvl4-dark;
|
||||
color: $lt-font-color-normal-dark;
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -1,136 +0,0 @@
|
||||
import { Localization } from "@Component/Localization/Localization";
|
||||
import { BackgroundLevel, FontLevel, Theme } from "@Component/Theme/Theme";
|
||||
import { Icon, Slider } from "@fluentui/react";
|
||||
import { Component, ReactNode } from "react";
|
||||
import "./Recorder.scss";
|
||||
|
||||
interface IRecorderProps {
|
||||
mode: "P" | "R",
|
||||
running?: boolean,
|
||||
name?: string;
|
||||
fps?: number;
|
||||
allFrame?: number;
|
||||
currentFrame?: number;
|
||||
allTime?: number;
|
||||
currentTime?: number;
|
||||
action?: () => void;
|
||||
valueChange?: (value: number) => any;
|
||||
}
|
||||
|
||||
class Recorder extends Component<IRecorderProps> {
|
||||
|
||||
private parseTime(time?: number): string {
|
||||
if (time === undefined) {
|
||||
return "0:0:0:0";
|
||||
}
|
||||
const h = Math.floor(time / 3600);
|
||||
const m = Math.floor((time % 3600) / 60);
|
||||
const s = Math.floor((time % 3600) % 60);
|
||||
const ms = Math.floor((time % 1) * 1000);
|
||||
return `${h}:${m}:${s}:${ms}`;
|
||||
}
|
||||
|
||||
private getRecordInfo(): ReactNode {
|
||||
if (this.props.mode === "P") {
|
||||
return <Localization
|
||||
i18nKey="Panel.Info.Behavior.Clip.Time.Formate"
|
||||
options={{
|
||||
current: this.parseTime(this.props.currentTime),
|
||||
all: this.parseTime(this.props.allTime),
|
||||
fps: this.props.fps ? this.props.fps.toString() : "0"
|
||||
}}
|
||||
/>;
|
||||
}
|
||||
else if (this.props.mode === "R") {
|
||||
return <Localization
|
||||
i18nKey="Panel.Info.Behavior.Clip.Record.Formate"
|
||||
options={{
|
||||
time: this.parseTime(this.props.currentTime),
|
||||
}}
|
||||
/>;
|
||||
}
|
||||
}
|
||||
|
||||
private getActionIcon(): string {
|
||||
if (this.props.mode === "P") {
|
||||
if (this.props.running) {
|
||||
return "Pause";
|
||||
} else {
|
||||
return "Play";
|
||||
}
|
||||
}
|
||||
else if (this.props.mode === "R") {
|
||||
if (this.props.running) {
|
||||
return "Stop";
|
||||
} else {
|
||||
return "StatusCircleRing";
|
||||
}
|
||||
}
|
||||
return "Play";
|
||||
}
|
||||
|
||||
public render(): ReactNode {
|
||||
|
||||
const isSliderDisable = this.props.mode === "R";
|
||||
const isJumpDisable = this.props.mode === "R";
|
||||
|
||||
return <Theme
|
||||
className="recorder-root"
|
||||
backgroundLevel={BackgroundLevel.Level4}
|
||||
fontLevel={FontLevel.normal}
|
||||
>
|
||||
<Slider
|
||||
min={0}
|
||||
disabled={isSliderDisable}
|
||||
value={this.props.currentFrame}
|
||||
max={this.props.allFrame}
|
||||
className={"recorder-slider" + (isSliderDisable ? " disable" : "")}
|
||||
showValue={false}
|
||||
onChange={(value) => {
|
||||
if (this.props.valueChange && !isSliderDisable) {
|
||||
this.props.valueChange(value);
|
||||
}
|
||||
}}
|
||||
/>
|
||||
<div className="recorder-content">
|
||||
<div className="time-view">
|
||||
{this.getRecordInfo()}
|
||||
</div>
|
||||
<div className="ctrl-button">
|
||||
<div
|
||||
className={"ctrl-action" + (isJumpDisable ? " disable" : "")}
|
||||
onClick={() => {
|
||||
if (this.props.valueChange && !isJumpDisable && this.props.currentFrame !== undefined) {
|
||||
this.props.valueChange(this.props.currentFrame - 1);
|
||||
}
|
||||
}}
|
||||
>
|
||||
<Icon iconName="Back"/>
|
||||
</div>
|
||||
<div className="ctrl-action ctrl-action-main" onClick={this.props.action}>
|
||||
<Icon iconName={this.getActionIcon()}/>
|
||||
</div>
|
||||
<div
|
||||
className={"ctrl-action" + (isJumpDisable ? " disable" : "")}
|
||||
onClick={() => {
|
||||
if (this.props.valueChange && !isJumpDisable && this.props.currentFrame !== undefined) {
|
||||
this.props.valueChange(this.props.currentFrame + 1);
|
||||
}
|
||||
}}
|
||||
>
|
||||
<Icon iconName="Forward"/>
|
||||
</div>
|
||||
</div>
|
||||
<div className="speed-view">
|
||||
{
|
||||
this.props.name ?
|
||||
<span>{this.props.name}</span> :
|
||||
<Localization i18nKey="Panel.Info.Behavior.Clip.Uname.Clip"/>
|
||||
}
|
||||
</div>
|
||||
</div>
|
||||
</Theme>;
|
||||
}
|
||||
}
|
||||
|
||||
export { Recorder };
|
||||
@@ -1,9 +1,8 @@
|
||||
import { FunctionComponent, useEffect } from "react";
|
||||
import * as download from "downloadjs";
|
||||
import { useSetting, IMixinSettingProps, Platform } from "@Context/Setting";
|
||||
import { useStatus, IMixinStatusProps } from "@Context/Status";
|
||||
import { useElectron, IMixinElectronProps } from "@Context/Electron";
|
||||
import { I18N } from "@Component/Localization/Localization";
|
||||
import * as download from "downloadjs";
|
||||
|
||||
interface IFileInfo {
|
||||
fileName: string;
|
||||
@@ -22,7 +21,7 @@ interface ICallBackProps {
|
||||
then: () => any;
|
||||
}
|
||||
|
||||
const ArchiveSaveDownloadView: FunctionComponent<IFileInfo & ICallBackProps> = function ArchiveSaveDownloadView(props) {
|
||||
const ArchiveSaveDownloadView: FunctionComponent<IFileInfo & ICallBackProps> = function ArchiveSave(props) {
|
||||
|
||||
const runner = async () => {
|
||||
const file = await props.fileData();
|
||||
@@ -39,47 +38,6 @@ const ArchiveSaveDownloadView: FunctionComponent<IFileInfo & ICallBackProps> = f
|
||||
|
||||
const ArchiveSaveDownload = ArchiveSaveDownloadView;
|
||||
|
||||
const ArchiveSaveFsView: FunctionComponent<IFileInfo & ICallBackProps & IMixinElectronProps & IMixinSettingProps & IMixinStatusProps> =
|
||||
function ArchiveSaveFsView(props) {
|
||||
|
||||
const runner = async () => {
|
||||
const file = await props.fileData();
|
||||
setTimeout(() => {
|
||||
if (props.electron) {
|
||||
props.electron.fileSave(
|
||||
file,
|
||||
I18N(props, "Popup.Load.Save.Select.File.Name"),
|
||||
I18N(props, "Popup.Load.Save.Select.Path.Title"),
|
||||
I18N(props, "Popup.Load.Save.Select.Path.Button"),
|
||||
props.fileUrl
|
||||
);
|
||||
}
|
||||
}, 100);
|
||||
}
|
||||
|
||||
const saveEvent = ({name, url, success} : {name: string, url: string, success: boolean}) => {
|
||||
if (success && props.status) {
|
||||
props.status.archive.fileUrl = url;
|
||||
props.status.archive.fileName = name;
|
||||
props.status.archive.isNewFile = false;
|
||||
props.status.archive.emit("fileSave", props.status.archive);
|
||||
}
|
||||
props.then();
|
||||
}
|
||||
|
||||
useEffect(() => {
|
||||
runner();
|
||||
props.electron?.on("fileSave", saveEvent);
|
||||
return () => {
|
||||
props.electron?.off("fileSave", saveEvent);
|
||||
};
|
||||
}, []);
|
||||
|
||||
return <></>;
|
||||
}
|
||||
|
||||
const ArchiveSaveFs = useSetting(useElectron(useStatus(ArchiveSaveFsView)));
|
||||
|
||||
/**
|
||||
* 保存存档文件
|
||||
*/
|
||||
@@ -123,7 +81,7 @@ const ArchiveSaveView: FunctionComponent<IMixinSettingProps & IMixinStatusProps
|
||||
{
|
||||
props.setting?.platform === Platform.web ?
|
||||
<ArchiveSaveDownload {...fileData} then={callBack}/> :
|
||||
<ArchiveSaveFs {...fileData} then={callBack}/>
|
||||
<></>
|
||||
}
|
||||
</>
|
||||
}
|
||||
|
||||
@@ -1,5 +1,4 @@
|
||||
import { createContext } from "react";
|
||||
import { Emitter } from "@Model/Emitter";
|
||||
import { superConnect, superConnectWithEvent } from "@Context/Context";
|
||||
import { ISimulatorAPI, IApiEmitterEvent } from "@Electron/SimulatorAPI";
|
||||
|
||||
@@ -7,25 +6,6 @@ interface IMixinElectronProps {
|
||||
electron?: ISimulatorAPI;
|
||||
}
|
||||
|
||||
const getElectronAPI: () => ISimulatorAPI = () => {
|
||||
const API = (window as any).API;
|
||||
const mapperEmitter = new Emitter();
|
||||
const ClassElectron: new () => ISimulatorAPI = function (this: Record<string, any>) {
|
||||
this.resetAll = () => mapperEmitter.resetAll();
|
||||
this.reset = (type: string) => mapperEmitter.reset(type);
|
||||
this.on = (type: string, handel: any) => mapperEmitter.on(type, handel);
|
||||
this.off = (type: string, handel: any) => mapperEmitter.off(type, handel);
|
||||
this.emit = (type: string, data: any) => mapperEmitter.emit(type, data);
|
||||
} as any;
|
||||
ClassElectron.prototype = API;
|
||||
|
||||
// Emitter Mapper
|
||||
API.mapEmit((...p: any) => {
|
||||
mapperEmitter.emit(...p);
|
||||
});
|
||||
return new ClassElectron();
|
||||
}
|
||||
|
||||
const ElectronContext = createContext<ISimulatorAPI>((window as any).API ?? {} as ISimulatorAPI);
|
||||
|
||||
ElectronContext.displayName = "Electron";
|
||||
@@ -39,4 +19,4 @@ const useElectron = superConnect<ISimulatorAPI>(ElectronConsumer, "electron");
|
||||
|
||||
const useElectronWithEvent = superConnectWithEvent<ISimulatorAPI, IApiEmitterEvent>(ElectronConsumer, "electron");
|
||||
|
||||
export { useElectron, ElectronProvider, IMixinElectronProps, ISimulatorAPI, useElectronWithEvent, getElectronAPI };
|
||||
export { useElectron, ElectronProvider, IMixinElectronProps, ISimulatorAPI, useElectronWithEvent };
|
||||
@@ -37,7 +37,7 @@ class Setting extends Emitter<ISettingEvents> {
|
||||
/**
|
||||
* 语言
|
||||
*/
|
||||
public language: Language = "EN_US";
|
||||
public language: Language = "ZH_CN";
|
||||
|
||||
/**
|
||||
* 布局
|
||||
|
||||
@@ -14,7 +14,6 @@ import { PopupController } from "@Context/Popups";
|
||||
import { Behavior } from "@Model/Behavior";
|
||||
import { IParameter, IParamValue } from "@Model/Parameter";
|
||||
import { Actuator } from "@Model/Actuator";
|
||||
import { Clip } from "@Model/Clip";
|
||||
|
||||
function randomColor(unNormal: boolean = false) {
|
||||
const color = [
|
||||
@@ -36,18 +35,14 @@ interface IStatusEvent {
|
||||
fileChange: void;
|
||||
renderLoop: number;
|
||||
physicsLoop: number;
|
||||
recordLoop: number;
|
||||
offlineLoop: number;
|
||||
mouseModChange: void;
|
||||
focusObjectChange: void;
|
||||
focusLabelChange: void;
|
||||
focusBehaviorChange: void;
|
||||
objectChange: void;
|
||||
focusClipChange: void;
|
||||
rangeLabelChange: void;
|
||||
groupLabelChange: void;
|
||||
groupBehaviorChange: void;
|
||||
clipChange: void;
|
||||
labelChange: void;
|
||||
rangeAttrChange: void;
|
||||
labelAttrChange: void;
|
||||
@@ -103,11 +98,6 @@ class Status extends Emitter<IStatusEvent> {
|
||||
*/
|
||||
public focusBehavior?: Behavior;
|
||||
|
||||
/**
|
||||
* 焦点行为
|
||||
*/
|
||||
public focusClip?: Clip;
|
||||
|
||||
private drawTimer?: NodeJS.Timeout;
|
||||
|
||||
private delayDraw = () => {
|
||||
@@ -129,14 +119,11 @@ class Status extends Emitter<IStatusEvent> {
|
||||
|
||||
// 循环事件
|
||||
this.actuator.on("loop", (t) => { this.emit("physicsLoop", t) });
|
||||
this.actuator.on("record", (t) => { this.emit("recordLoop", t) });
|
||||
this.actuator.on("offline", (t) => { this.emit("offlineLoop", t) });
|
||||
|
||||
// 对象变化事件
|
||||
this.model.on("objectChange", () => this.emit("objectChange"));
|
||||
this.model.on("labelChange", () => this.emit("labelChange"));
|
||||
this.model.on("behaviorChange", () => this.emit("behaviorChange"));
|
||||
this.model.on("clipChange", () => this.emit("clipChange"));
|
||||
|
||||
// 弹窗事件
|
||||
this.popup.on("popupChange", () => this.emit("popupChange"));
|
||||
@@ -174,11 +161,6 @@ class Status extends Emitter<IStatusEvent> {
|
||||
this.emit("labelChange");
|
||||
this.emit("behaviorChange");
|
||||
|
||||
// 清除焦点对象
|
||||
this.setBehaviorObject();
|
||||
this.setFocusObject(new Set());
|
||||
this.setLabelObject();
|
||||
|
||||
// 映射
|
||||
this.emit("fileLoad");
|
||||
});
|
||||
@@ -233,16 +215,6 @@ class Status extends Emitter<IStatusEvent> {
|
||||
this.emit("focusBehaviorChange");
|
||||
}
|
||||
|
||||
/**
|
||||
* 更新焦点行为
|
||||
*/
|
||||
public setClipObject(clip?: Clip) {
|
||||
if (this.focusClip !== clip) {
|
||||
this.focusClip = clip;
|
||||
}
|
||||
this.emit("focusClipChange");
|
||||
}
|
||||
|
||||
/**
|
||||
* 修改范围属性
|
||||
*/
|
||||
@@ -426,24 +398,6 @@ class Status extends Emitter<IStatusEvent> {
|
||||
return label;
|
||||
}
|
||||
|
||||
public getNewClipName() {
|
||||
let searchKey = I18N(this.setting.language, "Object.List.New.Clip", { id: "" });
|
||||
let nextIndex = 1;
|
||||
this.model.clipPool.forEach((obj) => {
|
||||
nextIndex = Math.max(nextIndex, this.getNextNumber(
|
||||
obj.name, searchKey
|
||||
));
|
||||
});
|
||||
return I18N(this.setting.language, "Object.List.New.Clip", {
|
||||
id: nextIndex.toString()
|
||||
});
|
||||
}
|
||||
|
||||
public newClip() {
|
||||
const clip = this.model.addClip(this.getNewClipName());
|
||||
return clip;
|
||||
}
|
||||
|
||||
public setMouseMod(mod: MouseMod) {
|
||||
this.mouseMod = mod;
|
||||
if (this.renderer instanceof ClassicRenderer) {
|
||||
|
||||
@@ -1,7 +1,6 @@
|
||||
import { app, BrowserWindow, ipcMain, dialog } from "electron";
|
||||
import { app, BrowserWindow, ipcMain } from "electron";
|
||||
import { Service } from "@Service/Service";
|
||||
import { join as pathJoin } from "path";
|
||||
import { writeFile } from "fs";
|
||||
const ENV = process.env ?? {};
|
||||
|
||||
class ElectronApp {
|
||||
@@ -29,38 +28,12 @@ class ElectronApp {
|
||||
);
|
||||
}
|
||||
|
||||
public loadingPage?: BrowserWindow;
|
||||
public simulatorWindow?: BrowserWindow;
|
||||
|
||||
public async showLoadingPage() {
|
||||
return new Promise((r) => {
|
||||
|
||||
this.loadingPage = new BrowserWindow({
|
||||
width: 603,
|
||||
height: 432,
|
||||
fullscreenable: false,
|
||||
skipTaskbar: true,
|
||||
resizable: false,
|
||||
titleBarStyle: 'hidden',
|
||||
frame: false,
|
||||
show: false
|
||||
});
|
||||
|
||||
this.loadingPage.loadFile(ENV.LIVING_TOGETHER_LOADING_PAGE ?? "./LoadingPage.html");
|
||||
|
||||
this.loadingPage.on("ready-to-show", () => {
|
||||
this.loadingPage?.show();
|
||||
r(undefined);
|
||||
});
|
||||
});
|
||||
}
|
||||
|
||||
public async runMainThread() {
|
||||
|
||||
await app.whenReady();
|
||||
|
||||
await this.showLoadingPage();
|
||||
|
||||
await this.runService();
|
||||
|
||||
let preload = pathJoin(__dirname, "./SimulatorWindow.js");
|
||||
@@ -76,21 +49,12 @@ class ElectronApp {
|
||||
frame: false,
|
||||
minWidth: 460,
|
||||
minHeight: 300,
|
||||
webPreferences: { preload },
|
||||
show: false,
|
||||
webPreferences: { preload }
|
||||
});
|
||||
|
||||
this.simulatorWindow.loadURL(this.serviceUrl + (ENV.LIVING_TOGETHER_WEB_PATH ?? "/resources/app.asar/"));
|
||||
|
||||
this.simulatorWindow.on("ready-to-show", () => {
|
||||
setTimeout(() => {
|
||||
this.loadingPage?.close();
|
||||
this.simulatorWindow?.show();
|
||||
}, 1220);
|
||||
});
|
||||
|
||||
this.handelSimulatorWindowBehavior();
|
||||
this.handelFileChange();
|
||||
|
||||
app.on('window-all-closed', function () {
|
||||
if (process.platform !== 'darwin') app.quit()
|
||||
@@ -126,56 +90,6 @@ class ElectronApp {
|
||||
this.simulatorWindow?.on("maximize", sendWindowsChangeMessage);
|
||||
this.simulatorWindow?.on("unmaximize", sendWindowsChangeMessage);
|
||||
}
|
||||
|
||||
private handelFileChange() {
|
||||
|
||||
// 文件保存
|
||||
const saveFile = async (path: string, text: string) => {
|
||||
return new Promise((r) => {
|
||||
writeFile(path ?? "", text, {}, (e) => {
|
||||
this.simulatorWindow?.webContents.send(
|
||||
"windows.EndFileSave",
|
||||
(path.match(/.+(\/|\\)(.+)$/) ?? [])[2],
|
||||
path, !e
|
||||
);
|
||||
r(undefined);
|
||||
});
|
||||
})
|
||||
};
|
||||
|
||||
// 处理文件保存事件
|
||||
ipcMain.on("windows.fileSave",
|
||||
(_, text: string, name: string, title: string, button: string, url?: string) => {
|
||||
|
||||
// 如果没有路径，询问新的路径
|
||||
if (url) {
|
||||
saveFile(url, text);
|
||||
}
|
||||
|
||||
// 询问保存位置
|
||||
else {
|
||||
dialog.showSaveDialog(this.simulatorWindow!, {
|
||||
title: title,
|
||||
buttonLabel: button,
|
||||
filters: [
|
||||
{ name: name, extensions: ["ltss"] }
|
||||
]
|
||||
}).then(res => {
|
||||
|
||||
// 用户选择后继续保存
|
||||
if (!res.canceled && res.filePath) {
|
||||
saveFile(res.filePath, text);
|
||||
} else {
|
||||
this.simulatorWindow?.webContents.send(
|
||||
"windows.EndFileSave",
|
||||
undefined, undefined, false
|
||||
);
|
||||
}
|
||||
});
|
||||
}
|
||||
}
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
new ElectronApp().runMainThread();
|
||||
@@ -2,7 +2,6 @@ import { Emitter } from "@Model/Emitter";
|
||||
|
||||
type IApiEmitterEvent = {
|
||||
windowsSizeStateChange: void;
|
||||
fileSave: {success: boolean, name: string, url: string};
|
||||
}
|
||||
|
||||
interface ISimulatorAPI extends Emitter<IApiEmitterEvent> {
|
||||
@@ -31,11 +30,6 @@ interface ISimulatorAPI extends Emitter<IApiEmitterEvent> {
|
||||
* 是否处于最大化状态
|
||||
*/
|
||||
minimize: () => void;
|
||||
|
||||
/**
|
||||
* 存档
|
||||
*/
|
||||
fileSave: (text: string, name: string, title: string, button: string, url?: string) => void;
|
||||
}
|
||||
|
||||
export { ISimulatorAPI, IApiEmitterEvent }
|
||||
@@ -1,11 +1,23 @@
|
||||
import { contextBridge, ipcRenderer } from "electron";
|
||||
import { ISimulatorAPI } from "@Electron/SimulatorAPI";
|
||||
import { ISimulatorAPI } from "@Electron/SimulatorAPI"
|
||||
|
||||
const emitterMap: { fn?: Function } = { fn: undefined };
|
||||
const emitterMap: Array<[key: string, value: Function[]]> = [];
|
||||
const queryEmitter = (key: string) => {
|
||||
let res: (typeof emitterMap)[0] | undefined;
|
||||
emitterMap.forEach((item) => {
|
||||
if (item[0] === key) res = item;
|
||||
});
|
||||
|
||||
const emit = (type: string, evt?: any) => {
|
||||
if (emitterMap.fn) {
|
||||
emitterMap.fn(type, evt);
|
||||
if (res) {
|
||||
if (Array.isArray(res[1])) return res[1];
|
||||
res[1] = [];
|
||||
return res[1];
|
||||
}
|
||||
|
||||
else {
|
||||
res = [key, []];
|
||||
emitterMap.push(res);
|
||||
return res[1];
|
||||
}
|
||||
}
|
||||
|
||||
@@ -31,19 +43,22 @@ const API: ISimulatorAPI = {
|
||||
ipcRenderer.send("windows.minimize");
|
||||
},
|
||||
|
||||
fileSave(text: string, name: string, title: string, button: string, url?: string) {
|
||||
ipcRenderer.send("windows.fileSave", text, name, title, button, url);
|
||||
},
|
||||
all: new Map() as any,
|
||||
|
||||
mapEmit: (fn: Function) => { emitterMap.fn = fn },
|
||||
} as any;
|
||||
resetAll: () => emitterMap.splice(0),
|
||||
reset: (type) => queryEmitter(type).splice(0),
|
||||
on: (type, handler) => queryEmitter(type).push(handler),
|
||||
off: (type, handler) => {
|
||||
const handlers = queryEmitter(type);
|
||||
handlers.splice(handlers.indexOf(handler!) >>> 0, 1);
|
||||
},
|
||||
emit: ((type: string, evt: any) => {
|
||||
queryEmitter(type).slice().map((handler: any) => { handler(evt) });
|
||||
}) as any,
|
||||
}
|
||||
|
||||
ipcRenderer.on("windows.windowsSizeStateChange", () => {
|
||||
emit("windowsSizeStateChange");
|
||||
});
|
||||
|
||||
ipcRenderer.on("windows.EndFileSave", (_, name: string, url: string, success: boolean) => {
|
||||
emit("fileSave", {name, url, success});
|
||||
API.emit("windowsSizeStateChange");
|
||||
});
|
||||
|
||||
contextBridge.exposeInMainWorld("API", API);
|
||||
@@ -31,7 +31,6 @@ const EN_US = {
|
||||
"Object.List.New.Group": "Group object {id}",
|
||||
"Object.List.New.Range": "Range object {id}",
|
||||
"Object.List.New.Label": "Label {id}",
|
||||
"Object.List.New.Clip": "Clip {id}",
|
||||
"Object.List.No.Data": "There are no objects in the model, click the button to create it",
|
||||
"Object.Picker.List.No.Data": "There is no model in the model for this option",
|
||||
"Behavior.Picker.Add.Button": "Click here to assign behavior to this group",
|
||||
@@ -54,11 +53,6 @@ const EN_US = {
|
||||
"Panel.Info.Behavior.List.View": "Edit view behavior list",
|
||||
"Panel.Title.Behavior.Details.View": "Behavior",
|
||||
"Panel.Info.Behavior.Details.View": "Edit view Behavior attributes",
|
||||
"Panel.Title.Behavior.Clip.Player": "Recording",
|
||||
"Panel.Info.Behavior.Clip.Player": "Pre render recorded data",
|
||||
"Panel.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",
|
||||
@@ -69,29 +63,8 @@ const EN_US = {
|
||||
"Popup.Action.Objects.Confirm.Restore": "Restore",
|
||||
"Popup.Delete.Objects.Confirm": "Are you sure you want to delete this object(s)? The object is deleted and cannot be recalled.",
|
||||
"Popup.Delete.Behavior.Confirm": "Are you sure you want to delete this behavior? The behavior is deleted and cannot be recalled.",
|
||||
"Popup.Delete.Clip.Confirm": "Are you sure you want to delete this clip? The clip cannot be restored after deletion.",
|
||||
"Popup.Restore.Behavior.Confirm": "Are you sure you want to reset all parameters of this behavior? This operation cannot be recalled.",
|
||||
"Popup.Setting.Title": "Preferences setting",
|
||||
"Popup.Offline.Render.Title": "Offline rendering",
|
||||
"Popup.Offline.Render.Process.Title": "Rendering progress",
|
||||
"Popup.Offline.Render.Message": "Rendering Parameters",
|
||||
"Popup.Offline.Render.Input.Name": "Clip name",
|
||||
"Popup.Offline.Render.Input.Time": "Duration (s)",
|
||||
"Popup.Offline.Render.Input.Fps": "FPS (f/s)",
|
||||
"Popup.Offline.Render.Input.Start": "Start rendering",
|
||||
"Popup.Offline.Render.Input.End": "Terminate rendering",
|
||||
"Popup.Offline.Render.Input.Finished": "Finished",
|
||||
"Popup.Offline.Render.Process": "Number of frames completed: {current} / {all}",
|
||||
"Popup.Load.Save.Title": "Load save",
|
||||
"Popup.Load.Save.confirm": "Got it",
|
||||
"Popup.Load.Save.Overwrite": "Overwrite and continue",
|
||||
"Popup.Load.Save.Overwrite.Info": "The current workspace will be overwritten after the archive is loaded, and all unsaved progress will be lost. Are you sure you want to continue?",
|
||||
"Popup.Load.Save.Error.Empty": "File information acquisition error. The file has been lost or moved.",
|
||||
"Popup.Load.Save.Error.Type": "The file with extension name \"{ext}\" cannot be loaded temporarily",
|
||||
"Popup.Load.Save.Error.Parse": "Archive parsing error, detailed reason: \n{why}",
|
||||
"Popup.Load.Save.Select.Path.Title": "Please select an archive location",
|
||||
"Popup.Load.Save.Select.Path.Button": "Save",
|
||||
"Popup.Load.Save.Select.File.Name": "Living Together Simulator Save",
|
||||
"Popup.Add.Behavior.Title": "Add behavior",
|
||||
"Popup.Add.Behavior.Action.Add": "Add all select behavior",
|
||||
"Popup.Add.Behavior.Select.Counter": "Selected {count} behavior",
|
||||
@@ -160,7 +133,6 @@ const EN_US = {
|
||||
"Panel.Info.Behavior.Details.Parameter.Key.Vec.X": "{key} X",
|
||||
"Panel.Info.Behavior.Details.Parameter.Key.Vec.Y": "{key} Y",
|
||||
"Panel.Info.Behavior.Details.Parameter.Key.Vec.Z": "{key} Z",
|
||||
"Panel.Info.Clip.List.Error.Nodata": "There is no clip, please click the record button to record, or click the plus sign to create",
|
||||
"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",
|
||||
|
||||
@@ -31,7 +31,6 @@ const ZH_CN = {
|
||||
"Object.List.New.Group": "群对象 {id}",
|
||||
"Object.List.New.Range": "范围对象 {id}",
|
||||
"Object.List.New.Label": "标签 {id}",
|
||||
"Object.List.New.Clip": "剪辑片段 {id}",
|
||||
"Object.List.No.Data": "模型中没有任何对象，点击按钮以创建",
|
||||
"Object.Picker.List.No.Data": "模型中没有合适此选项的模型",
|
||||
"Behavior.Picker.Add.Button": "点击此处以赋予行为到此群",
|
||||
@@ -54,11 +53,6 @@ const ZH_CN = {
|
||||
"Panel.Info.Behavior.List.View": "编辑查看行为列表",
|
||||
"Panel.Title.Behavior.Details.View": "行为",
|
||||
"Panel.Info.Behavior.Details.View": "编辑查看行为属性",
|
||||
"Panel.Title.Behavior.Clip.Player": "录制",
|
||||
"Panel.Info.Behavior.Clip.Player": "预渲染录制数据",
|
||||
"Panel.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": "确定",
|
||||
@@ -69,29 +63,8 @@ const ZH_CN = {
|
||||
"Popup.Action.Objects.Confirm.Restore": "重置",
|
||||
"Popup.Delete.Objects.Confirm": "你确定要删除这个(些)对象吗？对象被删除将无法撤回。",
|
||||
"Popup.Delete.Behavior.Confirm": "你确定要删除这个行为吗？行为被删除将无法撤回。",
|
||||
"Popup.Delete.Clip.Confirm": "你确定删除这个剪辑片段，剪辑片段删除后将无法恢复。",
|
||||
"Popup.Restore.Behavior.Confirm": "你确定要重置此行为的全部参数吗？此操作无法撤回。",
|
||||
"Popup.Setting.Title": "首选项设置",
|
||||
"Popup.Offline.Render.Title": "离线渲染",
|
||||
"Popup.Offline.Render.Process.Title": "渲染进度",
|
||||
"Popup.Offline.Render.Message": "渲染参数",
|
||||
"Popup.Offline.Render.Input.Name": "剪辑名称",
|
||||
"Popup.Offline.Render.Input.Time": "时长 (s)",
|
||||
"Popup.Offline.Render.Input.Fps": "帧率 (f/s)",
|
||||
"Popup.Offline.Render.Input.Start": "开始渲染",
|
||||
"Popup.Offline.Render.Input.End": "终止渲染",
|
||||
"Popup.Offline.Render.Input.Finished": "完成",
|
||||
"Popup.Offline.Render.Process": "完成帧数: {current} / {all}",
|
||||
"Popup.Load.Save.Title": "加载存档",
|
||||
"Popup.Load.Save.confirm": "我知道了",
|
||||
"Popup.Load.Save.Overwrite": "覆盖并继续",
|
||||
"Popup.Load.Save.Overwrite.Info": "存档加载后将覆盖当前工作区，未保存的进度将全部丢失，确定要继续吗?",
|
||||
"Popup.Load.Save.Error.Empty": "文件信息获取错误，文件已丢失或已被移动",
|
||||
"Popup.Load.Save.Error.Type": "暂时无法加载拓展名为 \"{ext}\" 的文件",
|
||||
"Popup.Load.Save.Error.Parse": "存档解析错误，详细原因: \n{why}",
|
||||
"Popup.Load.Save.Select.Path.Title": "请选择存档保存位置",
|
||||
"Popup.Load.Save.Select.Path.Button": "保存",
|
||||
"Popup.Load.Save.Select.File.Name": "群生共进存档",
|
||||
"Popup.Add.Behavior.Title": "添加行为",
|
||||
"Popup.Add.Behavior.Action.Add": "添加全部选中行为",
|
||||
"Popup.Add.Behavior.Select.Counter": "已选择 {count} 个行为",
|
||||
@@ -160,7 +133,6 @@ const ZH_CN = {
|
||||
"Panel.Info.Behavior.Details.Parameter.Key.Vec.X": "{key} X 坐标",
|
||||
"Panel.Info.Behavior.Details.Parameter.Key.Vec.Y": "{key} Y 坐标",
|
||||
"Panel.Info.Behavior.Details.Parameter.Key.Vec.Z": "{key} Z 坐标",
|
||||
"Panel.Info.Clip.List.Error.Nodata": "没有剪辑片段，请点击录制按钮录制，或者点击加号创建",
|
||||
"Info.Hint.Save.After.Close": "任何未保存的进度都会丢失, 确定要继续吗?",
|
||||
"Info.Hint.Load.File.Title": "加载存档",
|
||||
"Info.Hint.Load.File.Intro": "释放以加载拽入的存档",
|
||||
|
||||
+3
-332
@@ -1,19 +1,9 @@
|
||||
import { Model } from "@Model/Model";
|
||||
import { Emitter } from "@Model/Emitter";
|
||||
import { Clip, IFrame } from "@Model/Clip";
|
||||
|
||||
enum ActuatorModel {
|
||||
Play = 1,
|
||||
Record = 2,
|
||||
View = 3,
|
||||
Offline = 4
|
||||
}
|
||||
|
||||
interface IActuatorEvent {
|
||||
startChange: boolean;
|
||||
record: number;
|
||||
loop: number;
|
||||
offline: number;
|
||||
}
|
||||
|
||||
/**
|
||||
@@ -29,161 +19,13 @@ class Actuator extends Emitter<IActuatorEvent> {
|
||||
/**
|
||||
* 模拟帧率
|
||||
*/
|
||||
public fps: number = 36;
|
||||
public fps: number = 42;
|
||||
|
||||
/**
|
||||
* 仿真是否进行
|
||||
*/
|
||||
private startFlag: boolean = false;
|
||||
|
||||
/**
|
||||
* 模式
|
||||
*/
|
||||
public mod: ActuatorModel = ActuatorModel.View;
|
||||
|
||||
/**
|
||||
* 录制剪辑
|
||||
*/
|
||||
public recordClip?: Clip;
|
||||
|
||||
/**
|
||||
* 播放剪辑
|
||||
*/
|
||||
public playClip?: Clip;
|
||||
|
||||
/**
|
||||
* 播放帧
|
||||
*/
|
||||
public playFrame?: IFrame;
|
||||
|
||||
/**
|
||||
* 播放帧数
|
||||
*/
|
||||
public playFrameId: number = 0;
|
||||
|
||||
/**
|
||||
* 开始录制
|
||||
*/
|
||||
public startRecord(clip: Clip) {
|
||||
|
||||
// 记录录制片段
|
||||
this.recordClip = clip;
|
||||
clip.isRecording = true;
|
||||
|
||||
// 如果仿真未开启，开启仿真
|
||||
if (!this.start()) this.start(true);
|
||||
|
||||
// 设置状态
|
||||
this.mod = ActuatorModel.Record;
|
||||
}
|
||||
|
||||
/**
|
||||
* 结束录制
|
||||
*/
|
||||
public endRecord() {
|
||||
|
||||
this.recordClip && (this.recordClip.isRecording = false);
|
||||
this.recordClip = undefined;
|
||||
|
||||
// 如果仿真未停止，停止仿真
|
||||
if (this.start()) this.start(false);
|
||||
|
||||
// 设置状态
|
||||
this.mod = ActuatorModel.View;
|
||||
}
|
||||
|
||||
public startPlay(clip: Clip) {
|
||||
|
||||
// 如果仿真正在进行，停止仿真
|
||||
if (this.start()) this.start(false);
|
||||
|
||||
// 如果正在录制，阻止播放
|
||||
if (this.mod === ActuatorModel.Record) {
|
||||
return;
|
||||
}
|
||||
|
||||
// 如果正在播放，暂停播放
|
||||
if (this.mod === ActuatorModel.Play) {
|
||||
this.pausePlay();
|
||||
}
|
||||
|
||||
// 设置播放对象
|
||||
this.playClip = clip;
|
||||
|
||||
// 设置播放帧数
|
||||
this.playFrameId = 0;
|
||||
this.playFrame = clip.frames[this.playFrameId];
|
||||
|
||||
// 播放第一帧
|
||||
clip.play(this.playFrame);
|
||||
|
||||
// 激发时钟状态事件
|
||||
this.emit("startChange", true);
|
||||
}
|
||||
|
||||
public endPlay() {
|
||||
|
||||
// 如果正在播放，暂停播放
|
||||
if (this.mod === ActuatorModel.Play) {
|
||||
this.pausePlay();
|
||||
}
|
||||
|
||||
// 更新模式
|
||||
this.mod = ActuatorModel.View;
|
||||
|
||||
// 清除状态
|
||||
this.playClip = undefined;
|
||||
this.playFrameId = 0;
|
||||
this.playFrame = undefined;
|
||||
|
||||
// 渲染模型
|
||||
this.model.draw();
|
||||
|
||||
// 激发时钟状态事件
|
||||
this.emit("startChange", false);
|
||||
}
|
||||
|
||||
/**
|
||||
* 是否播放完毕
|
||||
*/
|
||||
public isPlayEnd() {
|
||||
if (this.playClip && this.playFrame) {
|
||||
if (this.playFrameId >= (this.playClip.frames.length - 1)) {
|
||||
return true;
|
||||
} else {
|
||||
return false;
|
||||
}
|
||||
} else {
|
||||
return true;
|
||||
}
|
||||
}
|
||||
|
||||
public playing() {
|
||||
|
||||
// 如果播放完毕了，从头开始播放
|
||||
if (this.isPlayEnd() && this.playClip) {
|
||||
this.startPlay(this.playClip);
|
||||
}
|
||||
|
||||
// 更新模式
|
||||
this.mod = ActuatorModel.Play;
|
||||
|
||||
// 启动播放时钟
|
||||
this.playTicker();
|
||||
|
||||
// 激发时钟状态事件
|
||||
this.emit("startChange", false);
|
||||
}
|
||||
|
||||
public pausePlay() {
|
||||
|
||||
// 更新模式
|
||||
this.mod = ActuatorModel.View;
|
||||
|
||||
// 激发时钟状态事件
|
||||
this.emit("startChange", false);
|
||||
}
|
||||
|
||||
/**
|
||||
* 主时钟状态控制
|
||||
*/
|
||||
@@ -216,160 +58,6 @@ class Actuator extends Emitter<IActuatorEvent> {
|
||||
|
||||
public tickerType: 1 | 2 = 2;
|
||||
|
||||
private playTickerTimer?: number;
|
||||
|
||||
/**
|
||||
* 设置播放进度
|
||||
*/
|
||||
public setPlayProcess(id: number) {
|
||||
if (this.playClip && id >= 0 && id < this.playClip.frames.length) {
|
||||
|
||||
// 跳转值这帧
|
||||
this.playFrameId = id;
|
||||
this.playFrame = this.playClip.frames[this.playFrameId];
|
||||
this.emit("record", this.playFrame.duration);
|
||||
|
||||
if (this.mod !== ActuatorModel.Play) {
|
||||
this.playClip.play(this.playFrame);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* 离线渲染参数
|
||||
*/
|
||||
public offlineAllFrame: number = 0;
|
||||
public offlineCurrentFrame: number = 0;
|
||||
private offlineRenderTickTimer?: number;
|
||||
|
||||
/**
|
||||
* 关闭离线渲染
|
||||
*/
|
||||
public endOfflineRender() {
|
||||
|
||||
// 清除 timer
|
||||
clearTimeout(this.offlineRenderTickTimer);
|
||||
|
||||
this.recordClip && (this.recordClip.isRecording = false);
|
||||
this.recordClip = undefined;
|
||||
|
||||
// 设置状态
|
||||
this.mod = ActuatorModel.View;
|
||||
|
||||
// 激发结束事件
|
||||
this.start(false);
|
||||
this.emit("record", 0);
|
||||
}
|
||||
|
||||
/**
|
||||
* 离线渲染 tick
|
||||
*/
|
||||
private offlineRenderTick(dt: number) {
|
||||
|
||||
if (this.mod !== ActuatorModel.Offline) {
|
||||
return;
|
||||
}
|
||||
|
||||
if (this.offlineCurrentFrame >= this.offlineAllFrame) {
|
||||
return this.endOfflineRender();
|
||||
}
|
||||
|
||||
// 更新模型
|
||||
this.model.update(dt);
|
||||
|
||||
// 录制
|
||||
this.recordClip?.record(dt);
|
||||
|
||||
// 限制更新频率
|
||||
if (this.offlineCurrentFrame % 10 === 0) {
|
||||
this.emit("offline", dt);
|
||||
}
|
||||
|
||||
this.offlineCurrentFrame++
|
||||
|
||||
if (this.offlineCurrentFrame <= this.offlineAllFrame) {
|
||||
|
||||
// 下一个 tick
|
||||
this.offlineRenderTickTimer = setTimeout(() => this.offlineRenderTick(dt)) as any;
|
||||
|
||||
} else {
|
||||
this.endOfflineRender();
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* 离线渲染
|
||||
*/
|
||||
public offlineRender(clip: Clip, time: number, fps: number) {
|
||||
|
||||
// 记录录制片段
|
||||
this.recordClip = clip;
|
||||
clip.isRecording = true;
|
||||
|
||||
// 如果仿真正在进行，停止仿真
|
||||
if (this.start()) this.start(false);
|
||||
|
||||
// 如果正在录制，阻止
|
||||
if (this.mod === ActuatorModel.Record || this.mod === ActuatorModel.Offline) {
|
||||
return;
|
||||
}
|
||||
|
||||
// 如果正在播放，暂停播放
|
||||
if (this.mod === ActuatorModel.Play) {
|
||||
this.pausePlay();
|
||||
}
|
||||
|
||||
// 设置状态
|
||||
this.mod = ActuatorModel.Offline;
|
||||
|
||||
// 计算帧数
|
||||
this.offlineCurrentFrame = 0;
|
||||
this.offlineAllFrame = Math.round(time * fps) - 1;
|
||||
let dt = time / this.offlineAllFrame;
|
||||
|
||||
// 第一帧渲染
|
||||
clip.record(0);
|
||||
|
||||
// 开启时钟
|
||||
this.offlineRenderTick(dt);
|
||||
|
||||
this.emit("record", dt);
|
||||
}
|
||||
|
||||
/**
|
||||
* 播放时钟
|
||||
*/
|
||||
private playTicker() {
|
||||
|
||||
if (this.playClip && this.playFrame && this.mod === ActuatorModel.Play) {
|
||||
|
||||
// 播放当前帧
|
||||
this.playClip.play(this.playFrame);
|
||||
|
||||
// 没有完成播放，继续播放
|
||||
if (!this.isPlayEnd()) {
|
||||
|
||||
// 跳转值下一帧
|
||||
this.playFrameId ++;
|
||||
this.playFrame = this.playClip.frames[this.playFrameId];
|
||||
this.emit("record", this.playFrame.duration);
|
||||
|
||||
// 清除计时器，保证时钟唯一性
|
||||
clearTimeout(this.playTickerTimer);
|
||||
|
||||
// 延时
|
||||
this.playTickerTimer = setTimeout(() => {
|
||||
this.playTicker();
|
||||
}, this.playFrame.duration * 1000) as any;
|
||||
|
||||
} else {
|
||||
this.pausePlay();
|
||||
}
|
||||
} else {
|
||||
this.pausePlay();
|
||||
}
|
||||
}
|
||||
|
||||
private ticker(t: number) {
|
||||
if (this.startFlag && t !== 0) {
|
||||
if (this.lastTime === 0) {
|
||||
@@ -384,30 +72,13 @@ class Actuator extends Emitter<IActuatorEvent> {
|
||||
} else {
|
||||
this.alignTimer += durTime;
|
||||
if (this.alignTimer > (1 / this.fps)) {
|
||||
|
||||
// 更新模型
|
||||
this.model.update(this.alignTimer * this.speed);
|
||||
|
||||
// 绘制模型
|
||||
this.model.draw();
|
||||
|
||||
// 录制模型
|
||||
if (
|
||||
this.mod === ActuatorModel.Record ||
|
||||
this.mod === ActuatorModel.Offline
|
||||
) {
|
||||
this.recordClip?.record(this.alignTimer * this.speed);
|
||||
this.emit("record", this.alignTimer);
|
||||
}
|
||||
|
||||
this.emit("loop", this.alignTimer);
|
||||
this.alignTimer = 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
else {
|
||||
} else {
|
||||
this.emit("loop", Infinity);
|
||||
}
|
||||
}
|
||||
@@ -451,4 +122,4 @@ class Actuator extends Emitter<IActuatorEvent> {
|
||||
}
|
||||
}
|
||||
|
||||
export { Actuator, ActuatorModel }
|
||||
export { Actuator }
|
||||
@@ -37,7 +37,7 @@ class Archive extends Emitter<IArchiveEvent> {
|
||||
/**
|
||||
* 是否保存
|
||||
*/
|
||||
public isSaved: boolean = true;
|
||||
public isSaved: boolean = false;
|
||||
|
||||
/**
|
||||
* 文件路径
|
||||
@@ -100,7 +100,7 @@ class Archive extends Emitter<IArchiveEvent> {
|
||||
|
||||
// 解析为 JSON 对象
|
||||
const archive: IArchiveObject = JSON.parse(data);
|
||||
// console.log(archive);
|
||||
console.log(archive);
|
||||
|
||||
// 实例化全部对象
|
||||
const objectPool: CtrlObject[] = [];
|
||||
@@ -254,7 +254,7 @@ class Archive extends Emitter<IArchiveEvent> {
|
||||
* 加载文件为模型
|
||||
* @return Model
|
||||
*/
|
||||
public load(model: Model, data: string, name: string, url?: string): string | undefined {
|
||||
public load(model: Model, data: string): string | undefined {
|
||||
|
||||
try {
|
||||
this.loadArchiveIntoModel(model, data);
|
||||
@@ -262,12 +262,8 @@ class Archive extends Emitter<IArchiveEvent> {
|
||||
return e as string;
|
||||
}
|
||||
|
||||
this.emit("fileLoad", this);
|
||||
this.fileName = name;
|
||||
this.isSaved = true;
|
||||
this.isNewFile = false;
|
||||
this.fileUrl = url;
|
||||
this.emit("fileSave", this);
|
||||
this.emit("fileLoad", this);
|
||||
};
|
||||
|
||||
public constructor() {
|
||||
|
||||
@@ -1,130 +0,0 @@
|
||||
import { IAnyObject, Model } from "@Model/Model";
|
||||
import { v4 as uuid } from "uuid";
|
||||
import { Group } from "@Model/Group";
|
||||
import { Range } from "@Model/Range";
|
||||
|
||||
interface IDrawCommand {
|
||||
type: "points" | "cube";
|
||||
id: string;
|
||||
data?: Float32Array;
|
||||
position?: number[];
|
||||
radius?: number[];
|
||||
parameter?: IAnyObject;
|
||||
}
|
||||
|
||||
interface IFrame {
|
||||
commands: IDrawCommand[];
|
||||
duration: number;
|
||||
process: number;
|
||||
}
|
||||
|
||||
/**
|
||||
* 剪辑片段
|
||||
*/
|
||||
class Clip {
|
||||
|
||||
public id: string;
|
||||
|
||||
/**
|
||||
* 时间
|
||||
*/
|
||||
public time: number = 0;
|
||||
|
||||
/**
|
||||
* 用户自定义名称
|
||||
*/
|
||||
public name: string = "";
|
||||
|
||||
/**
|
||||
* 模型
|
||||
*/
|
||||
public model: Model;
|
||||
|
||||
/**
|
||||
* 全部帧
|
||||
*/
|
||||
public frames: IFrame[] = [];
|
||||
|
||||
/**
|
||||
* 是否正在录制
|
||||
*/
|
||||
public isRecording: boolean = false;
|
||||
|
||||
/**
|
||||
* 录制一帧
|
||||
*/
|
||||
public record(t: number): IFrame {
|
||||
const commands: IDrawCommand[] = [];
|
||||
|
||||
for (let i = 0; i < this.model.objectPool.length; i++) {
|
||||
|
||||
let object = this.model.objectPool[i];
|
||||
object.renderParameter.color = object.color;
|
||||
|
||||
if (object.display && object instanceof Group) {
|
||||
commands.push({
|
||||
type: "points",
|
||||
id: object.id,
|
||||
data: object.exportPositionData(),
|
||||
parameter: object.renderParameter
|
||||
});
|
||||
}
|
||||
|
||||
|
||||
if (object.display && object instanceof Range) {
|
||||
commands.push({
|
||||
type: "cube",
|
||||
id: object.id,
|
||||
position: object.position,
|
||||
radius: object.radius,
|
||||
parameter: object.renderParameter
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
const dt = this.frames.length <= 0 ? 0 : t;
|
||||
this.time += dt;
|
||||
|
||||
const frame: IFrame = {
|
||||
commands: commands,
|
||||
duration: dt,
|
||||
process: this.time
|
||||
};
|
||||
|
||||
this.frames.push(frame);
|
||||
return frame;
|
||||
}
|
||||
|
||||
/**
|
||||
* 播放一帧
|
||||
*/
|
||||
public play(frame: IFrame) {
|
||||
|
||||
// 清除全部渲染状态
|
||||
this.model.renderer.clean();
|
||||
|
||||
// 执行全部渲染指令
|
||||
for (let i = 0; i < frame.commands.length; i++) {
|
||||
const command: IDrawCommand = frame.commands[i];
|
||||
|
||||
if (command.type === "cube") {
|
||||
this.model.renderer.cube(command.id, command.position, command.radius, command.parameter);
|
||||
}
|
||||
|
||||
else if (frame.commands[i].type === "points") {
|
||||
this.model.renderer.points(command.id, command.data, command.parameter);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
public equal(clip?: Clip) {
|
||||
return clip === this || clip?.id === this.id;
|
||||
}
|
||||
|
||||
public constructor(model: Model) {
|
||||
this.model = model;
|
||||
this.id = uuid();
|
||||
}
|
||||
}
|
||||
|
||||
export { Clip, IFrame };
|
||||
+2
-47
@@ -5,7 +5,6 @@ import { IParamValue } from "@Model/Parameter";
|
||||
import { CtrlObject } from "@Model/CtrlObject";
|
||||
import { Emitter } from "@Model/Emitter";
|
||||
import { AbstractRenderer } from "@Model/Renderer";
|
||||
import { Clip } from "@Model/Clip";
|
||||
import { Behavior, IAnyBehavior, IAnyBehaviorRecorder } from "@Model/Behavior";
|
||||
|
||||
/**
|
||||
@@ -23,7 +22,6 @@ type ModelEvent = {
|
||||
objectChange: CtrlObject[];
|
||||
individualChange: Group;
|
||||
behaviorChange: IAnyBehavior;
|
||||
clipChange: Clip[];
|
||||
};
|
||||
|
||||
/**
|
||||
@@ -332,51 +330,6 @@ class Model extends Emitter<ModelEvent> {
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* 剪辑数据
|
||||
*/
|
||||
public clipPool: Clip[] = [];
|
||||
|
||||
/**
|
||||
* 新建剪辑片段
|
||||
*/
|
||||
public addClip(name?: string): Clip {
|
||||
let newClip = new Clip(this);
|
||||
newClip.name = name ?? "";
|
||||
this.clipPool.push(newClip);
|
||||
console.log(`Model: Create clip ${name ?? newClip.id}`);
|
||||
this.emit("clipChange", this.clipPool);
|
||||
return newClip;
|
||||
}
|
||||
|
||||
/**
|
||||
* 删除一个剪辑片段
|
||||
*/
|
||||
public deleteClip(name: ObjectID | Clip) {
|
||||
let deletedClip: Clip | undefined;
|
||||
let index = 0;
|
||||
|
||||
for (let i = 0; i < this.clipPool.length; i++) {
|
||||
if (name instanceof Clip) {
|
||||
if (this.clipPool[i].equal(name)) {
|
||||
deletedClip = this.clipPool[i];
|
||||
index = i;
|
||||
}
|
||||
}
|
||||
|
||||
else if (name === this.clipPool[i].id) {
|
||||
deletedClip = this.clipPool[i];
|
||||
index = i;
|
||||
}
|
||||
}
|
||||
|
||||
if (deletedClip) {
|
||||
this.clipPool.splice(index, 1);
|
||||
console.log(`Model: Delete clip ${deletedClip.name ?? deletedClip.id}`);
|
||||
this.emit("clipChange", this.clipPool);
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* 渲染器
|
||||
*/
|
||||
@@ -419,6 +372,8 @@ class Model extends Emitter<ModelEvent> {
|
||||
object.runner(t, "finalEffect");
|
||||
}
|
||||
}
|
||||
|
||||
this.draw();
|
||||
}
|
||||
|
||||
public draw() {
|
||||
|
||||
@@ -1,20 +1,19 @@
|
||||
import { Component, ReactNode } from "react";
|
||||
import { DndProvider } from 'react-dnd'
|
||||
import { HTML5Backend } from 'react-dnd-html5-backend'
|
||||
import { SettingProvider, Setting, Platform } from "@Context/Setting";
|
||||
import { Theme, BackgroundLevel, FontLevel } from "@Component/Theme/Theme";
|
||||
import { ISimulatorAPI } from "@Electron/SimulatorAPI";
|
||||
import { StatusProvider, Status } from "@Context/Status";
|
||||
import { ElectronProvider, getElectronAPI } from "@Context/Electron";
|
||||
import { ElectronProvider } from "@Context/Electron";
|
||||
import { ClassicRenderer } from "@GLRender/ClassicRenderer";
|
||||
import { initializeIcons } from '@fluentui/font-icons-mdl2';
|
||||
import { RootContainer } from "@Component/Container/RootContainer";
|
||||
import { LayoutDirection } from "@Context/Layout";
|
||||
import { CommandBar } from "@Component/CommandBar/CommandBar";
|
||||
import { LoadFile } from "@Component/LoadFile/LoadFile";
|
||||
import { HeaderBar } from "@Component/HeaderBar/HeaderBar";
|
||||
import { Popup } from "@Component/Popup/Popup";
|
||||
import { Entry } from "../Entry/Entry";
|
||||
import { Group } from "@Model/Group";
|
||||
import DEMO from "../demo";
|
||||
import "./SimulatorDesktop.scss";
|
||||
|
||||
initializeIcons("./font-icon/");
|
||||
@@ -49,12 +48,29 @@ class SimulatorDesktop extends Component {
|
||||
this.status.bindRenderer(classicRender);
|
||||
this.status.setting = this.setting;
|
||||
|
||||
const randomPosition = (group: Group) => {
|
||||
group.individuals.forEach((individual) => {
|
||||
individual.position[0] = (Math.random() - .5) * 2;
|
||||
individual.position[1] = (Math.random() - .5) * 2;
|
||||
individual.position[2] = (Math.random() - .5) * 2;
|
||||
})
|
||||
};
|
||||
|
||||
setTimeout(() => {
|
||||
this.status.archive.load(this.status.model, DEMO);
|
||||
}, 200);
|
||||
|
||||
(window as any).LT = {
|
||||
status: this.status,
|
||||
setting: this.setting
|
||||
};
|
||||
|
||||
this.electron = getElectronAPI();
|
||||
this.electron = {} as ISimulatorAPI;
|
||||
if ((window as any).API) {
|
||||
this.electron = (window as any).API;
|
||||
} else {
|
||||
console.error("SimulatorDesktop: Can't find electron API");
|
||||
}
|
||||
}
|
||||
|
||||
public componentDidMount() {
|
||||
@@ -91,9 +107,7 @@ class SimulatorDesktop extends Component {
|
||||
return <SettingProvider value={this.setting}>
|
||||
<StatusProvider value={this.status}>
|
||||
<ElectronProvider value={this.electron}>
|
||||
<DndProvider backend={HTML5Backend}>
|
||||
{this.renderContent()}
|
||||
</DndProvider>
|
||||
</ElectronProvider>
|
||||
</StatusProvider>
|
||||
</SettingProvider>
|
||||
@@ -106,7 +120,6 @@ class SimulatorDesktop extends Component {
|
||||
fontLevel={FontLevel.Level3}
|
||||
>
|
||||
<Popup/>
|
||||
<LoadFile>
|
||||
<HeaderBar height={35}/>
|
||||
<div className="app-root-space" style={{
|
||||
height: `calc( 100% - ${35}px)`
|
||||
@@ -114,7 +127,6 @@ class SimulatorDesktop extends Component {
|
||||
<CommandBar/>
|
||||
<RootContainer/>
|
||||
</div>
|
||||
</LoadFile>
|
||||
</Theme>
|
||||
}
|
||||
}
|
||||
|
||||
@@ -1,6 +1,4 @@
|
||||
import { Component, ReactNode } from "react";
|
||||
import { DndProvider } from 'react-dnd'
|
||||
import { HTML5Backend } from 'react-dnd-html5-backend'
|
||||
import { SettingProvider, Setting, Platform } from "@Context/Setting";
|
||||
import { Theme, BackgroundLevel, FontLevel } from "@Component/Theme/Theme";
|
||||
import { StatusProvider, Status } from "@Context/Status";
|
||||
@@ -9,10 +7,13 @@ import { initializeIcons } from '@fluentui/font-icons-mdl2';
|
||||
import { RootContainer } from "@Component/Container/RootContainer";
|
||||
import { LayoutDirection } from "@Context/Layout";
|
||||
import { LoadFile } from "@Component/LoadFile/LoadFile";
|
||||
import { AllBehaviors, getBehaviorById } from "@Behavior/Behavior";
|
||||
import { CommandBar } from "@Component/CommandBar/CommandBar";
|
||||
import { HeaderBar } from "@Component/HeaderBar/HeaderBar";
|
||||
import { Popup } from "@Component/Popup/Popup";
|
||||
import { Entry } from "../Entry/Entry";
|
||||
import { Group } from "@Model/Group";
|
||||
import DEMO from "../demo";
|
||||
import "./SimulatorWeb.scss";
|
||||
|
||||
initializeIcons("https://img.mrkbear.com/fabric-cdn-prod_20210407.001/");
|
||||
@@ -42,6 +43,122 @@ class SimulatorWeb extends Component {
|
||||
this.status.bindRenderer(classicRender);
|
||||
this.status.setting = this.setting;
|
||||
|
||||
const randomPosition = (group: Group) => {
|
||||
group.individuals.forEach((individual) => {
|
||||
individual.position[0] = (Math.random() - .5) * 2;
|
||||
individual.position[1] = (Math.random() - .5) * 2;
|
||||
individual.position[2] = (Math.random() - .5) * 2;
|
||||
})
|
||||
};
|
||||
|
||||
// 测试代码
|
||||
if (false) {
|
||||
let group = this.status.newGroup();
|
||||
let range = this.status.newRange();
|
||||
range.color = [.1, .5, .9];
|
||||
group.new(100);
|
||||
group.color = [.8, .1, .6];
|
||||
randomPosition(group);
|
||||
this.status.model.update(0);
|
||||
this.status.newLabel().name = "New Label";
|
||||
this.status.newLabel().name = "Test Label 01";
|
||||
let template = this.status.model.addBehavior(AllBehaviors[0]);
|
||||
template.name = "Template"; template.color = [150, 20, 220];
|
||||
let dynamic = this.status.model.addBehavior(AllBehaviors[1]);
|
||||
dynamic.name = "Dynamic"; dynamic.color = [250, 200, 80];
|
||||
let brownian = this.status.model.addBehavior(AllBehaviors[2]);
|
||||
brownian.name = "Brownian"; brownian.color = [200, 80, 250];
|
||||
let boundary = this.status.model.addBehavior(AllBehaviors[3]);
|
||||
boundary.name = "Boundary"; boundary.color = [80, 200, 250];
|
||||
boundary.parameter.range.picker = this.status.model.allRangeLabel;
|
||||
group.addBehavior(template);
|
||||
group.addBehavior(dynamic);
|
||||
group.addBehavior(brownian);
|
||||
group.addBehavior(boundary);
|
||||
}
|
||||
|
||||
// 鱼群模型测试
|
||||
if (false) {
|
||||
let fish1 = this.status.newGroup();
|
||||
let fish2 = this.status.newGroup();
|
||||
let shark = this.status.newGroup();
|
||||
let range = this.status.newRange();
|
||||
|
||||
range.displayName = "Experimental site";
|
||||
range.color = [.8, .1, .6];
|
||||
|
||||
fish1.new(100);
|
||||
fish1.displayName = "Fish A";
|
||||
fish1.color = [.1, .5, .9];
|
||||
randomPosition(fish1);
|
||||
|
||||
fish2.new(50);
|
||||
fish2.displayName = "Fish B";
|
||||
fish2.color = [.3, .2, .9];
|
||||
randomPosition(fish2);
|
||||
|
||||
shark.new(3);
|
||||
shark.displayName = "Shark";
|
||||
shark.color = [.8, .2, .3];
|
||||
shark.renderParameter.size = 100;
|
||||
shark.renderParameter.shape = "5";
|
||||
randomPosition(shark);
|
||||
|
||||
this.status.model.update(0);
|
||||
let fishLabel = this.status.newLabel();
|
||||
fishLabel.name = "Fish";
|
||||
fish1.addLabel(fishLabel);
|
||||
fish2.addLabel(fishLabel);
|
||||
|
||||
let template = this.status.model.addBehavior(getBehaviorById("Template"));
|
||||
template.name = "Template"; template.color = [150, 20, 220];
|
||||
|
||||
let dynamicFish = this.status.model.addBehavior(getBehaviorById("PhysicsDynamics"));
|
||||
dynamicFish.name = "Dynamic Fish"; dynamicFish.color = [250, 200, 80];
|
||||
|
||||
let dynamicShark = this.status.model.addBehavior(getBehaviorById("PhysicsDynamics"));
|
||||
dynamicShark.name = "Dynamic Shark"; dynamicShark.color = [250, 200, 80];
|
||||
dynamicShark.parameter.maxAcceleration = 8.5;
|
||||
dynamicShark.parameter.maxVelocity = 15.8;
|
||||
dynamicShark.parameter.resistance = 3.6;
|
||||
|
||||
let brownian = this.status.model.addBehavior(getBehaviorById("Brownian"));
|
||||
brownian.name = "Brownian"; brownian.color = [200, 80, 250];
|
||||
|
||||
let boundary = this.status.model.addBehavior(getBehaviorById("BoundaryConstraint"));
|
||||
boundary.name = "Boundary"; boundary.color = [80, 200, 250];
|
||||
boundary.parameter.range.picker = this.status.model.allRangeLabel;
|
||||
|
||||
let tracking = this.status.model.addBehavior(getBehaviorById("Tracking"));
|
||||
tracking.name = "Tracking"; tracking.color = [80, 200, 250];
|
||||
tracking.parameter.target.picker = fishLabel;
|
||||
|
||||
let attacking = this.status.model.addBehavior(getBehaviorById("ContactAttacking"));
|
||||
attacking.name = "Contact Attacking"; attacking.color = [120, 100, 250];
|
||||
attacking.parameter.target.picker = fishLabel;
|
||||
|
||||
fish1.addBehavior(dynamicFish);
|
||||
fish1.addBehavior(brownian);
|
||||
fish1.addBehavior(boundary);
|
||||
|
||||
fish2.addBehavior(dynamicFish);
|
||||
fish2.addBehavior(brownian);
|
||||
fish2.addBehavior(boundary);
|
||||
|
||||
shark.addBehavior(dynamicShark);
|
||||
shark.addBehavior(boundary);
|
||||
shark.addBehavior(tracking);
|
||||
shark.addBehavior(attacking);
|
||||
|
||||
setTimeout(() => {
|
||||
this.status.model.updateBehaviorParameter();
|
||||
}, 200)
|
||||
}
|
||||
|
||||
setTimeout(() => {
|
||||
this.status.archive.load(this.status.model, DEMO);
|
||||
}, 200);
|
||||
|
||||
(window as any).LT = {
|
||||
status: this.status,
|
||||
setting: this.setting
|
||||
@@ -55,7 +172,7 @@ class SimulatorWeb extends Component {
|
||||
items: [
|
||||
{panels: ["RenderView"]},
|
||||
{
|
||||
items: [{panels: ["ClipPlayer", "BehaviorList"]}, {panels: ["LabelList"]}],
|
||||
items: [{panels: ["BehaviorList"]}, {panels: ["LabelList"]}],
|
||||
scale: 80,
|
||||
layout: LayoutDirection.X
|
||||
}
|
||||
@@ -81,9 +198,7 @@ class SimulatorWeb extends Component {
|
||||
public render(): ReactNode {
|
||||
return <SettingProvider value={this.setting}>
|
||||
<StatusProvider value={this.status}>
|
||||
<DndProvider backend={HTML5Backend}>
|
||||
{this.renderContent()}
|
||||
</DndProvider>
|
||||
</StatusProvider>
|
||||
</SettingProvider>
|
||||
}
|
||||
@@ -94,8 +209,8 @@ class SimulatorWeb extends Component {
|
||||
backgroundLevel={BackgroundLevel.Level5}
|
||||
fontLevel={FontLevel.Level3}
|
||||
>
|
||||
<LoadFile/>
|
||||
<Popup/>
|
||||
<LoadFile>
|
||||
<HeaderBar height={45}/>
|
||||
<div className="app-root-space" style={{
|
||||
height: `calc( 100% - ${45}px)`
|
||||
@@ -103,7 +218,6 @@ class SimulatorWeb extends Component {
|
||||
<CommandBar/>
|
||||
<RootContainer/>
|
||||
</div>
|
||||
</LoadFile>
|
||||
</Theme>
|
||||
}
|
||||
}
|
||||
|
||||
File diff suppressed because one or more lines are too long
@@ -1,6 +0,0 @@
|
||||
div.Clip-player-clip-list-root {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
box-sizing: border-box;
|
||||
padding: 10px;
|
||||
}
|
||||
@@ -1,94 +0,0 @@
|
||||
import { Component, ReactNode } from "react";
|
||||
import { ClipList } from "@Component/ClipList/ClipList";
|
||||
import { useStatusWithEvent, IMixinStatusProps } from "@Context/Status";
|
||||
import { BackgroundLevel, FontLevel, Theme } from "@Component/Theme/Theme";
|
||||
import { Message } from "@Input/Message/Message";
|
||||
import { Clip } from "@Model/Clip";
|
||||
import { ActuatorModel } from "@Model/Actuator";
|
||||
import { ConfirmPopup } from "@Component/ConfirmPopup/ConfirmPopup";
|
||||
import { OfflineRender } from "@Component/OfflineRender/OfflineRender"
|
||||
import "./ClipPlayer.scss";
|
||||
|
||||
@useStatusWithEvent("clipChange", "focusClipChange", "actuatorStartChange")
|
||||
class ClipPlayer extends Component<IMixinStatusProps> {
|
||||
|
||||
private isInnerClick: boolean = false;
|
||||
|
||||
private renderMessage(): ReactNode {
|
||||
return <Message i18nKey="Panel.Info.Clip.List.Error.Nodata"/>;
|
||||
}
|
||||
|
||||
private isClipListDisable() {
|
||||
return !this.props.status?.focusClip &&
|
||||
(
|
||||
this.props.status?.actuator.mod === ActuatorModel.Record ||
|
||||
this.props.status?.actuator.mod === ActuatorModel.Offline
|
||||
);
|
||||
}
|
||||
|
||||
private renderClipList(clipList: Clip[]): ReactNode {
|
||||
|
||||
return <ClipList
|
||||
focus={this.props.status?.focusClip}
|
||||
clips={clipList}
|
||||
disable={this.isClipListDisable()}
|
||||
delete={(clip) => {
|
||||
this.isInnerClick = true;
|
||||
const status = this.props.status;
|
||||
if (status) {
|
||||
status.popup.showPopup(ConfirmPopup, {
|
||||
infoI18n: "Popup.Delete.Clip.Confirm",
|
||||
titleI18N: "Popup.Action.Objects.Confirm.Title",
|
||||
yesI18n: "Popup.Action.Objects.Confirm.Delete",
|
||||
red: "yes",
|
||||
yes: () => {
|
||||
status.setClipObject();
|
||||
this.props.status?.actuator.endPlay();
|
||||
status.model.deleteClip(clip.id);
|
||||
}
|
||||
});
|
||||
}
|
||||
}}
|
||||
add={() => {
|
||||
this.isInnerClick = true;
|
||||
this.props.status?.popup.showPopup(OfflineRender, {});
|
||||
}}
|
||||
click={(clip) => {
|
||||
this.isInnerClick = true;
|
||||
this.props.status?.setClipObject(clip);
|
||||
this.props.status?.actuator.startPlay(clip);
|
||||
}}
|
||||
/>;
|
||||
}
|
||||
|
||||
public render(): ReactNode {
|
||||
const clipList = this.props.status?.model.clipPool ?? [];
|
||||
|
||||
return <Theme
|
||||
className="Clip-player-clip-list-root"
|
||||
fontLevel={FontLevel.normal}
|
||||
backgroundLevel={BackgroundLevel.Level4}
|
||||
onClick={()=>{
|
||||
|
||||
// 拦截禁用状态的事件
|
||||
if (this.isClipListDisable()) {
|
||||
return;
|
||||
}
|
||||
|
||||
if (this.isInnerClick) {
|
||||
this.isInnerClick = false;
|
||||
}
|
||||
|
||||
else {
|
||||
this.props.status?.setClipObject();
|
||||
this.props.status?.actuator.endPlay();
|
||||
}
|
||||
}}
|
||||
>
|
||||
{ clipList.length > 0 ? null : this.renderMessage() }
|
||||
{ this.renderClipList(clipList) }
|
||||
</Theme>;
|
||||
}
|
||||
}
|
||||
|
||||
export { ClipPlayer };
|
||||
@@ -1,103 +0,0 @@
|
||||
import { Component, ReactNode } from "react";
|
||||
import { useStatusWithEvent, IMixinStatusProps } from "@Context/Status";
|
||||
import { Recorder } from "@Component/Recorder/Recorder";
|
||||
import { ActuatorModel } from "@Model/Actuator";
|
||||
|
||||
@useStatusWithEvent("actuatorStartChange", "focusClipChange", "recordLoop")
|
||||
class ClipRecorder extends Component<IMixinStatusProps> {
|
||||
public render(): ReactNode {
|
||||
|
||||
let mod: "P" | "R" = this.props.status?.focusClip ? "P" : "R";
|
||||
let runner: boolean = false;
|
||||
let currentTime: number | undefined = 0;
|
||||
let allTime: number | undefined = 0;
|
||||
let name: string | undefined;
|
||||
let currentFrame: number | undefined = 0;
|
||||
let allFrame: number | undefined = 0;
|
||||
let fps: number | undefined = 0;
|
||||
|
||||
// 是否开始录制
|
||||
if (mod === "R") {
|
||||
|
||||
// 是否正在录制
|
||||
runner = this.props.status?.actuator.mod === ActuatorModel.Record ||
|
||||
this.props.status?.actuator.mod === ActuatorModel.Offline;
|
||||
|
||||
currentTime = this.props.status?.actuator.recordClip?.time ?? 0;
|
||||
|
||||
name = this.props.status?.actuator.recordClip?.name;
|
||||
}
|
||||
|
||||
else if (mod === "P") {
|
||||
|
||||
// 是否正在播放
|
||||
runner = this.props.status?.actuator.mod === ActuatorModel.Play;
|
||||
name = this.props.status?.focusClip?.name;
|
||||
allTime = this.props.status?.focusClip?.time;
|
||||
allFrame = this.props.status?.focusClip?.frames.length;
|
||||
currentFrame = this.props.status?.actuator.playFrameId;
|
||||
currentTime = this.props.status?.actuator.playFrame?.process;
|
||||
|
||||
if (allFrame !== undefined) {
|
||||
allFrame --;
|
||||
}
|
||||
|
||||
if (allTime !== undefined && allFrame !== undefined) {
|
||||
fps = Math.round(allFrame / allTime);
|
||||
}
|
||||
}
|
||||
|
||||
return <Recorder
|
||||
name={name}
|
||||
currentTime={currentTime}
|
||||
allTime={allTime}
|
||||
currentFrame={currentFrame}
|
||||
allFrame={allFrame}
|
||||
mode={mod}
|
||||
running={runner}
|
||||
fps={fps}
|
||||
action={() => {
|
||||
|
||||
// 开启录制
|
||||
if (mod === "R" && !runner) {
|
||||
|
||||
// 获取新实例
|
||||
let newClip = this.props.status?.newClip();
|
||||
|
||||
// 开启录制时钟
|
||||
this.props.status?.actuator.startRecord(newClip!);
|
||||
console.log("ClipRecorder: Rec start...");
|
||||
}
|
||||
|
||||
// 暂停录制
|
||||
if (mod === "R" && runner) {
|
||||
|
||||
// 暂停录制时钟
|
||||
this.props.status?.actuator.endRecord();
|
||||
console.log("ClipRecorder: Rec end...");
|
||||
}
|
||||
|
||||
// 开始播放
|
||||
if (mod === "P" && !runner) {
|
||||
|
||||
// 启动播放时钟
|
||||
this.props.status?.actuator.playing();
|
||||
console.log("ClipRecorder: Play start...");
|
||||
}
|
||||
|
||||
// 暂停播放
|
||||
if (mod === "P" && runner) {
|
||||
|
||||
// 启动播放时钟
|
||||
this.props.status?.actuator.pausePlay();
|
||||
console.log("ClipRecorder: Pause play...");
|
||||
}
|
||||
}}
|
||||
valueChange={(value) => {
|
||||
this.props.status?.actuator.setPlayProcess(value);
|
||||
}}
|
||||
/>
|
||||
}
|
||||
}
|
||||
|
||||
export { ClipRecorder };
|
||||
@@ -44,7 +44,7 @@ class ObjectCommand extends Component<IMixinStatusProps> {
|
||||
this.props.status ? this.props.status.newGroup() : undefined;
|
||||
}}
|
||||
>
|
||||
<Icon iconName="WebAppBuilderFragmentCreate"></Icon>
|
||||
<Icon iconName="WebAppBuilderFragment"></Icon>
|
||||
</div>
|
||||
<div
|
||||
className="command-item"
|
||||
@@ -52,7 +52,7 @@ class ObjectCommand extends Component<IMixinStatusProps> {
|
||||
this.props.status ? this.props.status.newRange() : undefined;
|
||||
}}
|
||||
>
|
||||
<Icon iconName="ProductVariant"></Icon>
|
||||
<Icon iconName="CubeShape"></Icon>
|
||||
</div>
|
||||
<div
|
||||
className="command-item red"
|
||||
|
||||
@@ -10,8 +10,6 @@ import { LabelDetails } from "@Panel/LabelDetails/LabelDetails";
|
||||
import { GroupDetails } from "@Panel/GroupDetails/GroupDetails";
|
||||
import { BehaviorList } from "@Panel/BehaviorList/BehaviorList";
|
||||
import { BehaviorDetails } from "@Panel/BehaviorDetails/BehaviorDetails";
|
||||
import { ClipPlayer } from "@Panel/ClipPlayer/ClipPlayer";
|
||||
import { ClipRecorder } from "@Panel/ClipPlayer/ClipRecorder";
|
||||
|
||||
interface IPanelInfo {
|
||||
nameKey: string;
|
||||
@@ -33,7 +31,6 @@ type PanelId = ""
|
||||
| "GroupDetails" // 群属性
|
||||
| "BehaviorList" // 行为列表
|
||||
| "BehaviorDetails" // 行为属性
|
||||
| "ClipPlayer" // 剪辑影片
|
||||
;
|
||||
|
||||
const PanelInfoMap = new Map<PanelId, IPanelInfo>();
|
||||
@@ -69,10 +66,6 @@ PanelInfoMap.set("BehaviorDetails", {
|
||||
nameKey: "Panel.Title.Behavior.Details.View", introKay: "Panel.Info.Behavior.Details.View",
|
||||
class: BehaviorDetails
|
||||
});
|
||||
PanelInfoMap.set("ClipPlayer", {
|
||||
nameKey: "Panel.Title.Behavior.Clip.Player", introKay: "Panel.Info.Behavior.Clip.Player",
|
||||
class: ClipPlayer, header: ClipRecorder, hidePadding: true
|
||||
});
|
||||
|
||||
function getPanelById(panelId: PanelId): ReactNode {
|
||||
switch (panelId) {
|
||||
|
||||
Reference in New Issue
Block a user