Add file download function

package-lock.json

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

package.json

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

source/Component/CommandBar/CommandBar.tsx

@@ -1,22 +1,68 @@
 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 {
+const COMMAND_BAR_WIDTH = 45;
-    width: number;
+
+function getRenderButton(param: {
+    i18NKey: AllI18nKeys;
+    iconName?: string;
+    click?: () => void;
+    active?: boolean;
+}): ReactNode {
+    return <LocalizationTooltipHost 
+        i18nKey={param.i18NKey}
+        directionalHint={DirectionalHint.rightCenter}
+    >
+        <IconButton
+            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<ICommandBarProps & IMixinSettingProps & IMixinStatusProps> {
+class CommandBar extends Component<IMixinSettingProps & IMixinStatusProps> {
 
     render(): ReactNode {
 
@@ -25,7 +71,7 @@ class CommandBar extends Component<ICommandBarProps & IMixinSettingProps & IMixi
         return <Theme
             className="command-bar"
             backgroundLevel={BackgroundLevel.Level2}
-            style={{ width: this.props.width }}
+            style={{ width: COMMAND_BAR_WIDTH }}
             onClick={() => {
                 if (this.props.setting) {
                     this.props.setting.layout.focus("");
@@ -33,62 +79,65 @@ class CommandBar extends Component<ICommandBarProps & IMixinSettingProps & IMixi
             }}
         >
             <div>
-                {this.getRenderButton({
+
-                    iconName: "Save",
+                <SaveCommandView/>
-                    i18NKey: "Command.Bar.Save.Info",
+
-                    click: () => {
+                {getRenderButton({
-                        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({
+
+                {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({
+
+                {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({
+
+                {getRenderButton({
                     iconName: "WebAppBuilderFragmentCreate",
                     i18NKey: "Command.Bar.Add.Group.Info",
                     click: () => {
                         this.props.status ? this.props.status.newGroup() : undefined;
                     }
                 })}
-                {this.getRenderButton({
+
+                {getRenderButton({
                     iconName: "ProductVariant",
                     i18NKey: "Command.Bar.Add.Range.Info",
                     click: () => {
                         this.props.status ? this.props.status.newRange() : undefined;
                     }
                 })}
-                {this.getRenderButton({
+
+                {getRenderButton({
                     iconName: "Running",
                     i18NKey: "Command.Bar.Add.Behavior.Info",
                     click: () => {
                         this.props.status?.popup.showPopup(BehaviorPopup, {});
                     }
                 })}
-                {this.getRenderButton({
+
+                {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" })}
+
+                {getRenderButton({ iconName: "Camera", i18NKey: "Command.Bar.Camera.Info" })}
             </div>
             <div>
-                {this.getRenderButton({
+                {getRenderButton({
                     iconName: "Settings",
                     i18NKey: "Command.Bar.Setting.Info",
                     click: () => {
@@ -98,25 +147,6 @@ class CommandBar extends Component<ICommandBarProps & IMixinSettingProps & IMixi
             </div>
         </Theme>
     }
-
-    private getRenderButton(param: {
-        i18NKey: AllI18nKeys;
-        iconName?: string;
-        click?: () => void;
-        active?: boolean;
-    }): ReactNode {
-        return <LocalizationTooltipHost 
-            i18nKey={param.i18NKey}
-            directionalHint={DirectionalHint.rightCenter}
-        >
-            <IconButton
-                style={{ height: this.props.width }}
-                iconProps={{ iconName: param.iconName }}
-                onClick={ param.click }
-                className={"command-button on-end" + (param.active ? " active" : "")}
-            />
-        </LocalizationTooltipHost>
-    }
 }
 
 export { CommandBar };

source/Component/HeaderBar/HeaderBar.tsx

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

source/Context/Status.tsx

@@ -32,6 +32,7 @@ function randomColor(unNormal: boolean = false) {
 interface IStatusEvent {
     fileSave: void;
     fileLoad: void;
+    fileChange: void;
     renderLoop: number;
     physicsLoop: number;
     mouseModChange: void;
@@ -128,11 +129,15 @@ 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 = () => {
@@ -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();
         }
     }
 

source/Localization/EN-US.ts

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

source/Localization/ZH-CN.ts

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

source/Model/Archive.ts

@@ -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 {
+    public save(model: Model): string {
-
-        console.log(this.parseModel2Archive(model));
-
         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 {
-
-        this.loadArchiveIntoModel(model, data);
 
+        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 };

source/Page/SimulatorDesktop/SimulatorDesktop.tsx

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

source/Page/SimulatorWeb/SimulatorWeb.tsx

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