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

Add file download function

Browse Source
This commit is contained in:
MrKBear 2022-04-23 23:28:11 +08:00
parent 980d8afa3c
commit 03f0b9fd16
10 changed files with 146 additions and 60 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

24
package-lock.json generated
View File

@ -12,6 +12,7 @@
"@fluentui/react": "^8.56.0",
"@juggle/resize-observer": "^3.3.1",
"detect-port": "^1.3.0",
"downloadjs": "^1.4.7",
"express": "^4.17.3",
"gl-matrix": "^3.4.3",
"react": "^17.0.2",
@ -21,6 +22,7 @@
"devDependencies": {
"@atao60/fse-cli": "^0.1.7",
"@types/detect-port": "^1.3.2",
"@types/downloadjs": "^1.4.3",
"@types/react": "^17.0.38",
"@types/react-dom": "^17.0.11",
"@types/uuid": "^8.3.4",
@ -1095,6 +1097,12 @@
"integrity": "sha512-xxgAGA2SAU4111QefXPSp5eGbDm/hW6zhvYl9IeEPZEry9F4d66QAHm5qpUXjb6IsevZV/7emAEx5MhP6O192g==",
"dev": true
},
"node_modules/@types/downloadjs": {
"version": "1.4.3",
"resolved": "https://registry.npmmirror.com/@types/downloadjs/-/downloadjs-1.4.3.tgz",
"integrity": "sha512-MjJepFle/tLtT2/jmDNth6ZnwWzEhm40L+olE5HKR70ISUCfgT55eqreeHldAzFLY2HDUGsn8zgyto8KygN0CA==",
"dev": true
},
"node_modules/@types/eslint": {
"version": "8.4.1",
"resolved": "https://registry.npmjs.org/@types/eslint/-/eslint-8.4.1.tgz",
@ -2908,6 +2916,11 @@
"tslib": "^2.0.3"
}
},
"node_modules/downloadjs": {
"version": "1.4.7",
"resolved": "https://registry.npmmirror.com/downloadjs/-/downloadjs-1.4.7.tgz",
"integrity": "sha512-LN1gO7+u9xjU5oEScGFKvXhYf7Y/empUIIEAGBs1LzUq/rg5duiDrkuH5A2lQGd5jfMOb9X9usDa2oVXwJ0U/Q=="
},
"node_modules/duplexer3": {
"version": "0.1.4",
"resolved": "https://registry.npmmirror.com/duplexer3/-/duplexer3-0.1.4.tgz",
@ -9065,6 +9078,12 @@
"integrity": "sha512-xxgAGA2SAU4111QefXPSp5eGbDm/hW6zhvYl9IeEPZEry9F4d66QAHm5qpUXjb6IsevZV/7emAEx5MhP6O192g==",
"dev": true
},
"@types/downloadjs": {
"version": "1.4.3",
"resolved": "https://registry.npmmirror.com/@types/downloadjs/-/downloadjs-1.4.3.tgz",
"integrity": "sha512-MjJepFle/tLtT2/jmDNth6ZnwWzEhm40L+olE5HKR70ISUCfgT55eqreeHldAzFLY2HDUGsn8zgyto8KygN0CA==",
"dev": true
},
"@types/eslint": {
"version": "8.4.1",
"resolved": "https://registry.npmjs.org/@types/eslint/-/eslint-8.4.1.tgz",
@ -10550,6 +10569,11 @@
"tslib": "^2.0.3"
}
},
"downloadjs": {
"version": "1.4.7",
"resolved": "https://registry.npmmirror.com/downloadjs/-/downloadjs-1.4.7.tgz",
"integrity": "sha512-LN1gO7+u9xjU5oEScGFKvXhYf7Y/empUIIEAGBs1LzUq/rg5duiDrkuH5A2lQGd5jfMOb9X9usDa2oVXwJ0U/Q=="
},
"duplexer3": {
"version": "0.1.4",
"resolved": "https://registry.npmmirror.com/duplexer3/-/duplexer3-0.1.4.tgz",

2
package.json
View File

@ -47,6 +47,7 @@
"devDependencies": {
"@atao60/fse-cli": "^0.1.7",
"@types/detect-port": "^1.3.2",
"@types/downloadjs": "^1.4.3",
"@types/react": "^17.0.38",
"@types/react-dom": "^17.0.11",
"@types/uuid": "^8.3.4",
@ -70,6 +71,7 @@
"@fluentui/react": "^8.56.0",
"@juggle/resize-observer": "^3.3.1",
"detect-port": "^1.3.0",
"downloadjs": "^1.4.7",
"express": "^4.17.3",
"gl-matrix": "^3.4.3",
"react": "^17.0.2",

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

@ -1,105 +1,19 @@
import { Component, ReactNode } from "react";
import { DirectionalHint, IconButton } from "@fluentui/react";
import { useSetting, IMixinSettingProps } from "@Context/Setting";
import { useSetting, useSettingWithEvent, IMixinSettingProps } from "@Context/Setting";
import { useStatusWithEvent, IMixinStatusProps } from "@Context/Status";
import { BackgroundLevel, Theme } from "@Component/Theme/Theme";
import { LocalizationTooltipHost } from "@Component/Localization/LocalizationTooltipHost";
import { AllI18nKeys } from "@Component/Localization/Localization";
import { AllI18nKeys, I18N } from "@Component/Localization/Localization";
import { SettingPopup } from "@Component/SettingPopup/SettingPopup";
import { BehaviorPopup } from "@Component/BehaviorPopup/BehaviorPopup";
import { MouseMod } from "@GLRender/ClassicRenderer";
import * as download from "downloadjs";
import "./CommandBar.scss";
interface ICommandBarProps {
width: number;
}
const COMMAND_BAR_WIDTH = 45;
@useSetting
@useStatusWithEvent("mouseModChange", "actuatorStartChange")
class CommandBar extends Component<ICommandBarProps & IMixinSettingProps & IMixinStatusProps> {
render(): ReactNode {
const mouseMod = this.props.status?.mouseMod ?? MouseMod.Drag;
return <Theme
className="command-bar"
backgroundLevel={BackgroundLevel.Level2}
style={{ width: this.props.width }}
onClick={() => {
if (this.props.setting) {
this.props.setting.layout.focus("");
}
}}
>
<div>
{this.getRenderButton({
iconName: "Save",
i18NKey: "Command.Bar.Save.Info",
click: () => {
this.props.status?.archive.save(this.props.status.model);
}
})}
{this.getRenderButton({
iconName: this.props.status?.actuator.start() ? "Pause" : "Play",
i18NKey: "Command.Bar.Play.Info",
click: () => this.props.status ? this.props.status.actuator.start(
!this.props.status.actuator.start()
) : undefined
})}
{this.getRenderButton({
iconName: "HandsFree", i18NKey: "Command.Bar.Drag.Info",
active: mouseMod === MouseMod.Drag,
click: () => this.props.status ? this.props.status.setMouseMod(MouseMod.Drag) : undefined
})}
{this.getRenderButton({
iconName: "TouchPointer", i18NKey: "Command.Bar.Select.Info",
active: mouseMod === MouseMod.click,
click: () => this.props.status ? this.props.status.setMouseMod(MouseMod.click) : undefined
})}
{this.getRenderButton({
iconName: "WebAppBuilderFragmentCreate",
i18NKey: "Command.Bar.Add.Group.Info",
click: () => {
this.props.status ? this.props.status.newGroup() : undefined;
}
})}
{this.getRenderButton({
iconName: "ProductVariant",
i18NKey: "Command.Bar.Add.Range.Info",
click: () => {
this.props.status ? this.props.status.newRange() : undefined;
}
})}
{this.getRenderButton({
iconName: "Running",
i18NKey: "Command.Bar.Add.Behavior.Info",
click: () => {
this.props.status?.popup.showPopup(BehaviorPopup, {});
}
})}
{this.getRenderButton({
iconName: "Tag",
i18NKey: "Command.Bar.Add.Tag.Info",
click: () => {
this.props.status ? this.props.status.newLabel() : undefined;
}
})}
{this.getRenderButton({ iconName: "Camera", i18NKey: "Command.Bar.Camera.Info" })}
</div>
<div>
{this.getRenderButton({
iconName: "Settings",
i18NKey: "Command.Bar.Setting.Info",
click: () => {
this.props.status?.popup.showPopup(SettingPopup, {});
}
})}
</div>
</Theme>
}
private getRenderButton(param: {
function getRenderButton(param: {
i18NKey: AllI18nKeys;
iconName?: string;
click?: () => void;
@ -110,13 +24,129 @@ class CommandBar extends Component<ICommandBarProps & IMixinSettingProps & IMixi
directionalHint={DirectionalHint.rightCenter}
>
<IconButton
style={{ height: this.props.width }}
style={{ height: COMMAND_BAR_WIDTH }}
iconProps={{ iconName: param.iconName }}
onClick={ param.click }
className={"command-button on-end" + (param.active ? " active" : "")}
/>
</LocalizationTooltipHost>
}
@useSettingWithEvent("language")
@useStatusWithEvent()
class SaveCommandView extends Component<IMixinStatusProps & IMixinSettingProps> {
public render(): ReactNode {
return getRenderButton({
iconName: "Save",
i18NKey: "Command.Bar.Save.Info",
click: () => {
let fileName: string = "";
let isNewFile: boolean = true;
let isSaved: boolean = false;
if (this.props.status) {
isNewFile = this.props.status.archive.isNewFile;
fileName = this.props.status.archive.fileName ?? "";
isSaved = this.props.status.archive.isSaved;
}
const file = this.props.status?.archive.save(this.props.status.model) ?? "";
fileName = isNewFile ? I18N(this.props, "Header.Bar.New.File.Name") : fileName;
download(file, fileName, "text/json");
}
})
}
}
@useSetting
@useStatusWithEvent("mouseModChange", "actuatorStartChange")
class CommandBar extends Component<IMixinSettingProps & IMixinStatusProps> {
render(): ReactNode {
const mouseMod = this.props.status?.mouseMod ?? MouseMod.Drag;
return <Theme
className="command-bar"
backgroundLevel={BackgroundLevel.Level2}
style={{ width: COMMAND_BAR_WIDTH }}
onClick={() => {
if (this.props.setting) {
this.props.setting.layout.focus("");
}
}}
>
<div>
<SaveCommandView/>
{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
})}
{getRenderButton({
iconName: "HandsFree", i18NKey: "Command.Bar.Drag.Info",
active: mouseMod === MouseMod.Drag,
click: () => this.props.status ? this.props.status.setMouseMod(MouseMod.Drag) : undefined
})}
{getRenderButton({
iconName: "TouchPointer", i18NKey: "Command.Bar.Select.Info",
active: mouseMod === MouseMod.click,
click: () => this.props.status ? this.props.status.setMouseMod(MouseMod.click) : undefined
})}
{getRenderButton({
iconName: "WebAppBuilderFragmentCreate",
i18NKey: "Command.Bar.Add.Group.Info",
click: () => {
this.props.status ? this.props.status.newGroup() : undefined;
}
})}
{getRenderButton({
iconName: "ProductVariant",
i18NKey: "Command.Bar.Add.Range.Info",
click: () => {
this.props.status ? this.props.status.newRange() : undefined;
}
})}
{getRenderButton({
iconName: "Running",
i18NKey: "Command.Bar.Add.Behavior.Info",
click: () => {
this.props.status?.popup.showPopup(BehaviorPopup, {});
}
})}
{getRenderButton({
iconName: "Tag",
i18NKey: "Command.Bar.Add.Tag.Info",
click: () => {
this.props.status ? this.props.status.newLabel() : undefined;
}
})}
{getRenderButton({ iconName: "Camera", i18NKey: "Command.Bar.Camera.Info" })}
</div>
<div>
{getRenderButton({
iconName: "Settings",
i18NKey: "Command.Bar.Setting.Info",
click: () => {
this.props.status?.popup.showPopup(SettingPopup, {});
}
})}
</div>
</Theme>
}
}
export { CommandBar };

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

@ -123,7 +123,7 @@ class HeaderWindowsAction extends Component<IMixinElectronProps> {
* 头部信息栏
*/
@useSettingWithEvent("language")
@useStatusWithEvent("fileSave")
@useStatusWithEvent("fileSave", "fileChange", "fileLoad")
class HeaderBar extends Component<IHeaderBarProps & IMixinStatusProps & IMixinSettingProps> {
public render(): ReactNode {

30
source/Context/Status.tsx
View File

@ -32,6 +32,7 @@ function randomColor(unNormal: boolean = false) {
interface IStatusEvent {
fileSave: void;
fileLoad: void;
fileChange: void;
renderLoop: number;
physicsLoop: number;
mouseModChange: void;
@ -128,12 +129,16 @@ class Status extends Emitter<IStatusEvent> {
this.popup.on("popupChange", () => this.emit("popupChange"));
// 对象变换时执行渲染，更新渲染器数据
this.on("objectChange", this.delayDraw);
this.model.on("individualChange", this.delayDraw);
this.model.on("individualChange", () => {
this.emit("individualChange");
});
// 渲染器重绘
this.on("objectChange", this.delayDraw);
this.on("individualChange", this.delayDraw);
this.on("groupAttrChange", this.delayDraw);
this.on("rangeAttrChange", this.delayDraw);
// 当模型中的标签和对象改变时，更新全部行为参数中的受控对象
const updateBehaviorParameter = () => {
this.model.updateBehaviorParameter();
@ -158,7 +163,24 @@ class Status extends Emitter<IStatusEvent> {
// 映射
this.emit("fileLoad");
})
});
// 处理存档事件
const handelFileChange = () => {
if (this.archive.isSaved) {
this.emit("fileChange");
}
}
this.on("objectChange", handelFileChange);
this.on("behaviorChange", handelFileChange);
this.on("labelChange", handelFileChange);
this.on("individualChange", handelFileChange);
this.on("groupAttrChange", handelFileChange);
this.on("rangeAttrChange", handelFileChange);
this.on("labelAttrChange", handelFileChange);
this.on("behaviorAttrChange", handelFileChange);
this.on("fileChange", () => this.archive.emit("fileChange"));
}
public bindRenderer(renderer: AbstractRenderer) {
@ -200,7 +222,6 @@ class Status extends Emitter<IStatusEvent> {
if (range && range instanceof Range) {
range[key] = val;
this.emit("rangeAttrChange");
this.model.draw();
}
}
@ -213,7 +234,6 @@ class Status extends Emitter<IStatusEvent> {
if (group && group instanceof Group) {
group[key] = val;
this.emit("groupAttrChange");
this.model.draw();
}
}

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

@ -4,7 +4,7 @@ const EN_US = {
"Header.Bar.Title": "Living Together | Emulator",
"Header.Bar.Title.Info": "Group Behavior Research Emulator",
"Header.Bar.File.Name.Info": "{file} ({status})",
"Header.Bar.New.File.Name": "New File",
"Header.Bar.New.File.Name": "NewFile.ltss",
"Header.Bar.File.Save.Status.Saved": "Saved",
"Header.Bar.File.Save.Status.Unsaved": "UnSaved",
"Header.Bar.Fps": "FPS: {renderFps} | {physicsFps}",

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

@ -4,7 +4,7 @@ const ZH_CN = {
"Header.Bar.Title": "群生共进 | 仿真器",
"Header.Bar.Title.Info": "群体行为研究仿真器",
"Header.Bar.File.Name.Info": "{file} ({status})",
"Header.Bar.New.File.Name": "新存档",
"Header.Bar.New.File.Name": "新存档.ltss",
"Header.Bar.File.Save.Status.Saved": "已保存",
"Header.Bar.File.Save.Status.Unsaved": "未保存",
"Header.Bar.Fps": "帧率: {renderFps} | {physicsFps}",

20
source/Model/Archive.ts
View File

@ -12,6 +12,7 @@ import { IArchiveParseFn, IObjectParamArchiveType, IRealObjectType } from "@Mode
interface IArchiveEvent {
fileSave: Archive;
fileLoad: Archive;
fileChange: void;
}
interface IArchiveObject {
@ -243,25 +244,34 @@ class Archive<M extends any = any> extends Emitter<IArchiveEvent> {
* 保存文件
* 模型转换为文件
*/
public save(model: Model): void {
console.log(this.parseModel2Archive(model));
public save(model: Model): string {
this.isSaved = true;
this.emit("fileSave", this);
return this.parseModel2Archive(model);
}
/**
* 加载文件为模型
* @return Model
*/
public load(model: Model, data: string) {
public load(model: Model, data: string): string | undefined {
try {
this.loadArchiveIntoModel(model, data);
} catch (e) {
return e as string;
}
this.isSaved = true;
this.emit("fileLoad", this);
};
public constructor() {
super();
this.on("fileChange", () => {
this.isSaved = false;
})
}
}
export { Archive };

2
source/Page/SimulatorDesktop/SimulatorDesktop.tsx
View File

@ -119,7 +119,7 @@ class SimulatorDesktop extends Component {
<div className="app-root-space" style={{
height: `calc( 100% - ${35}px)`
}}>
<CommandBar width={45}/>
<CommandBar/>
<RootContainer/>
</div>
</Theme>

2
source/Page/SimulatorWeb/SimulatorWeb.tsx
View File

@ -208,7 +208,7 @@ class SimulatorWeb extends Component {
<div className="app-root-space" style={{
height: `calc( 100% - ${45}px)`
}}>
<CommandBar width={45}/>
<CommandBar/>
<RootContainer/>
</div>
</Theme>