package-lock.json

@@ -12,7 +12,6 @@
         "@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",
@@ -22,7 +21,6 @@
       "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",
@@ -1097,12 +1095,6 @@
       "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",
@@ -2916,11 +2908,6 @@
         "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",
@@ -9078,12 +9065,6 @@
       "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",
@@ -10569,11 +10550,6 @@
         "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,7 +47,6 @@
   "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",
@@ -71,7 +70,6 @@
     "@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

@@ -8,51 +8,24 @@ import { AllI18nKeys } from "@Component/Localization/Localization";
 import { SettingPopup } from "@Component/SettingPopup/SettingPopup";
 import { BehaviorPopup } from "@Component/BehaviorPopup/BehaviorPopup";
 import { MouseMod } from "@GLRender/ClassicRenderer";
-import { ArchiveSave } from "@Context/Archive";
 import "./CommandBar.scss";
 
-const COMMAND_BAR_WIDTH = 45;
+interface ICommandBarProps {
-
+    width: number;
-interface IRenderButtonParameter {
-    i18NKey: AllI18nKeys;
-    iconName?: string;
-    click?: () => void;
-    active?: boolean;
 }
 
-interface ICommandBarState {
-    isSaveRunning: boolean;
-}
-
-function getRenderButton(param: IRenderButtonParameter): 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>
-}
 @useSetting
 @useStatusWithEvent("mouseModChange", "actuatorStartChange")
-class CommandBar extends Component<IMixinSettingProps & IMixinStatusProps, ICommandBarState> {
+class CommandBar extends Component<ICommandBarProps & IMixinSettingProps & IMixinStatusProps> {
 
-    public state: Readonly<ICommandBarState> = {
+    render(): ReactNode {
-        isSaveRunning: false
-    };
-
-    public render(): ReactNode {
 
         const mouseMod = this.props.status?.mouseMod ?? MouseMod.Drag;
 
         return <Theme
             className="command-bar"
             backgroundLevel={BackgroundLevel.Level2}
-            style={{ width: COMMAND_BAR_WIDTH }}
+            style={{ width: this.props.width }}
             onClick={() => {
                 if (this.props.setting) {
                     this.props.setting.layout.focus("");
@@ -60,80 +33,62 @@ class CommandBar extends Component<IMixinSettingProps & IMixinStatusProps, IComm
             }}
         >
             <div>
-
+                {this.getRenderButton({
-                <ArchiveSave
-                    running={this.state.isSaveRunning}
-                    afterRunning={() => {
-                        this.setState({ isSaveRunning: false });
-                    }}
-                />
-
-                {getRenderButton({
                     iconName: "Save",
                     i18NKey: "Command.Bar.Save.Info",
                     click: () => {
-                        this.setState({
+                        this.props.status?.archive.save(this.props.status.model);
-                            isSaveRunning: true
-                        });
                     }
                 })}
-
+                {this.getRenderButton({
-                {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>
-                {getRenderButton({
+                {this.getRenderButton({
                     iconName: "Settings",
                     i18NKey: "Command.Bar.Setting.Info",
                     click: () => {
@@ -143,6 +98,25 @@ class CommandBar extends Component<IMixinSettingProps & IMixinStatusProps, IComm
             </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,33 +123,9 @@ class HeaderWindowsAction extends Component<IMixinElectronProps> {
  * 头部信息栏
  */
 @useSettingWithEvent("language")
-@useStatusWithEvent("fileSave", "fileChange", "fileLoad")
+@useStatusWithEvent("fileSave")
 class HeaderBar extends Component<IHeaderBarProps & IMixinStatusProps & IMixinSettingProps> {
 
-    private showCloseMessage = (e: BeforeUnloadEvent) => {
-        if (!this.props.status?.archive.isSaved) {
-            const message = I18N(this.props, "Info.Hint.Save.After.Close");
-            (e || window.event).returnValue = message; // 兼容 Gecko + IE
-            return message; // 兼容 Gecko + Webkit, Safari, Chrome
-        }
-    }
-
-    public componentDidMount() {
-
-        if (this.props.setting?.platform === Platform.web) {
-            // 阻止页面关闭
-            window.addEventListener("beforeunload", this.showCloseMessage);
-        }
-    }
-
-    public componentWillUnmount() {
-
-        if (this.props.setting?.platform === Platform.web) {
-            // 阻止页面关闭
-            window.removeEventListener("beforeunload", this.showCloseMessage);
-        }
-    }
-
     public render(): ReactNode {
         const { status, setting } = this.props;
 

source/Component/LoadFile/LoadFile.scss

@@ -1,38 +0,0 @@
-@import "../Theme/Theme.scss";
-
-div.load-file-layer-root {
-	position: fixed;
-	z-index: 1000;
-	width: 100%;
-	height: 100%;
-	display: flex;
-	align-content: center;
-	justify-content: center;
-	align-items: center;
-	flex-wrap: wrap;
-
-	div {
-		user-select: none;
-		text-align: center;
-		width: 100%;
-	}
-
-	div.drag-icon {
-		font-weight: 200;
-		font-size: 2.8em;
-	}
-
-	div.drag-title {
-		margin-top: 5px;
-		margin-bottom: 5px;
-		font-size: 1.5em;
-	}
-}
-
-div.load-file-layer-root.light {
-	background-color: rgba($color: #FFFFFF, $alpha: .75);
-}
-
-div.load-file-layer-root.dark {
-	background-color: rgba($color: #000000, $alpha: .75);
-}

source/Component/LoadFile/LoadFile.tsx

@@ -1,31 +0,0 @@
-import { Localization } from "@Component/Localization/Localization";
-import { FontLevel, Theme } from "@Component/Theme/Theme";
-import { Icon } from "@fluentui/react";
-import { Component, ReactNode } from "react";
-import "./LoadFile.scss";
-
-class LoadFile extends Component {
-
-	private renderMask() {
-		return <Theme
-			className="load-file-layer-root"
-			fontLevel={FontLevel.normal}
-		>
-			<div className="drag-icon">
-				<Icon iconName="KnowledgeArticle"/>
-			</div>
-			<div className="drag-title">
-				<Localization i18nKey="Info.Hint.Load.File.Title"/>
-			</div>
-			<div className="drag-intro">
-				<Localization i18nKey="Info.Hint.Load.File.Intro"/>
-			</div>
-		</Theme>;
-	}
-
-	public render(): ReactNode {
-		return <></>;
-	}
-}
-
-export { LoadFile };

source/Context/Archive.tsx

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

source/Context/Status.tsx

@@ -32,7 +32,6 @@ function randomColor(unNormal: boolean = false) {
 interface IStatusEvent {
     fileSave: void;
     fileLoad: void;
-    fileChange: void;
     renderLoop: number;
     physicsLoop: number;
     mouseModChange: void;
@@ -129,16 +128,12 @@ 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();
@@ -163,26 +158,7 @@ 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) {
@@ -224,6 +200,7 @@ class Status extends Emitter<IStatusEvent> {
         if (range && range instanceof Range) {
             range[key] = val;
             this.emit("rangeAttrChange");
+            this.model.draw();
         }
     }
 
@@ -236,6 +213,7 @@ 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": "NewFile.ltss",
+    "Header.Bar.New.File.Name": "New File",
     "Header.Bar.File.Save.Status.Saved": "Saved",
     "Header.Bar.File.Save.Status.Unsaved": "UnSaved",
     "Header.Bar.Fps": "FPS: {renderFps} | {physicsFps}",
@@ -133,8 +133,5 @@ const EN_US = {
     "Panel.Info.Behavior.Details.Parameter.Key.Vec.X": "{key} X",
     "Panel.Info.Behavior.Details.Parameter.Key.Vec.Y": "{key} Y",
     "Panel.Info.Behavior.Details.Parameter.Key.Vec.Z": "{key} Z",
-    "Info.Hint.Save.After.Close": "Any unsaved progress will be lost. Are you sure you want to continue?",
-    "Info.Hint.Load.File.Title": "Load save",
-    "Info.Hint.Load.File.Intro": "Release to load the dragged save file",
 }
 export default EN_US;

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": "新存档.ltss",
+    "Header.Bar.New.File.Name": "新存档",
     "Header.Bar.File.Save.Status.Saved": "已保存",
     "Header.Bar.File.Save.Status.Unsaved": "未保存",
     "Header.Bar.Fps": "帧率: {renderFps} | {physicsFps}",
@@ -133,8 +133,5 @@ const ZH_CN = {
     "Panel.Info.Behavior.Details.Parameter.Key.Vec.X": "{key} X 坐标",
     "Panel.Info.Behavior.Details.Parameter.Key.Vec.Y": "{key} Y 坐标",
     "Panel.Info.Behavior.Details.Parameter.Key.Vec.Z": "{key} Z 坐标",
-    "Info.Hint.Save.After.Close": "任何未保存的进度都会丢失, 确定要继续吗?",
-    "Info.Hint.Load.File.Title": "加载存档",
-    "Info.Hint.Load.File.Intro": "释放以加载拽入的存档",
 }
 export default ZH_CN;

source/Model/Archive.ts

@@ -12,7 +12,6 @@ import { IArchiveParseFn, IObjectParamArchiveType, IRealObjectType } from "@Mode
 interface IArchiveEvent {
     fileSave: Archive;
     fileLoad: Archive;
-    fileChange: void;
 }
 
 interface IArchiveObject {
@@ -22,7 +21,7 @@ interface IArchiveObject {
     behaviorPool: IArchiveBehavior[];
 }
 
-class Archive extends Emitter<IArchiveEvent> {
+class Archive<M extends any = any> extends Emitter<IArchiveEvent> {
 
     /**
      * 是否为新文件
@@ -40,9 +39,9 @@ class Archive extends Emitter<IArchiveEvent> {
     public isSaved: boolean = false;
 
     /**
-     * 文件路径
+     * 文件数据
      */
-    public fileUrl?: string;
+    public fileData?: M;
 
     /**
      * 将模型转换为存档对象
@@ -244,34 +243,25 @@ class Archive extends Emitter<IArchiveEvent> {
      * 保存文件
      * 模型转换为文件
      */
-    public save(model: Model): string {
+    public save(model: Model): void {
+
+        console.log(this.parseModel2Archive(model));
+
         this.isSaved = true;
         this.emit("fileSave", this);
-        return this.parseModel2Archive(model);
     }
 
     /**
      * 加载文件为模型
      * @return Model
      */
-    public load(model: Model, data: string): string | undefined {
+    public load(model: Model, data: string) {
 
-        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,7 +119,7 @@ class SimulatorDesktop extends Component {
             <div className="app-root-space" style={{
                 height: `calc( 100% - ${35}px)`
             }}>
-                <CommandBar/>
+                <CommandBar width={45}/>
                 <RootContainer />
             </div>
         </Theme>

source/Page/SimulatorWeb/SimulatorWeb.tsx

@@ -6,7 +6,6 @@ import { ClassicRenderer } from "@GLRender/ClassicRenderer";
 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";
@@ -204,13 +203,12 @@ class SimulatorWeb extends Component {
             backgroundLevel={BackgroundLevel.Level5}
             fontLevel={FontLevel.Level3}
         >
-            <LoadFile/>
             <Popup/>
             <HeaderBar height={45}/>
             <div className="app-root-space" style={{
                 height: `calc( 100% - ${45}px)`
             }}>
-                <CommandBar/>
+                <CommandBar width={45}/>
                 <RootContainer />
             </div>
         </Theme>