Add demo

Reviewed-on: http://git.mrkbear.com/MrKBear/living-together/pulls/45

source/Behavior/Behavior.ts

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

source/Component/CommandBar/CommandBar.tsx

@@ -1,24 +1,30 @@
 import { Component, ReactNode } from "react";
 import { DirectionalHint, IconButton } from "@fluentui/react";
-import { useSetting, useSettingWithEvent, IMixinSettingProps } from "@Context/Setting";
+import { useSetting, IMixinSettingProps } from "@Context/Setting";
 import { useStatusWithEvent, IMixinStatusProps } from "@Context/Status";
 import { BackgroundLevel, Theme } from "@Component/Theme/Theme";
 import { LocalizationTooltipHost } from "@Component/Localization/LocalizationTooltipHost";
-import { AllI18nKeys, I18N } from "@Component/Localization/Localization";
+import { AllI18nKeys } 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 { ArchiveSave } from "@Context/Archive";
 import "./CommandBar.scss";
 
 const COMMAND_BAR_WIDTH = 45;
 
-function getRenderButton(param: {
+interface IRenderButtonParameter {
     i18NKey: AllI18nKeys;
     iconName?: string;
     click?: () => void;
     active?: boolean;
-}): ReactNode {
+}
+
+interface ICommandBarState {
+    isSaveRunning: boolean;
+}
+
+function getRenderButton(param: IRenderButtonParameter): ReactNode {
     return <LocalizationTooltipHost 
         i18nKey={param.i18NKey}
         directionalHint={DirectionalHint.rightCenter}
@@ -31,40 +37,15 @@ function getRenderButton(param: {
         />
     </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> {
+class CommandBar extends Component<IMixinSettingProps & IMixinStatusProps, ICommandBarState> {
 
-    render(): ReactNode {
+    public state: Readonly<ICommandBarState> = {
+        isSaveRunning: false
+    };
+
+    public render(): ReactNode {
 
         const mouseMod = this.props.status?.mouseMod ?? MouseMod.Drag;
 
@@ -80,7 +61,22 @@ class CommandBar extends Component<IMixinSettingProps & IMixinStatusProps> {
         >
             <div>
 
-                <SaveCommandView/>
+                <ArchiveSave
+                    running={this.state.isSaveRunning}
+                    afterRunning={() => {
+                        this.setState({ isSaveRunning: false });
+                    }}
+                />
+
+                {getRenderButton({
+                    iconName: "Save",
+                    i18NKey: "Command.Bar.Save.Info",
+                    click: () => {
+                        this.setState({
+                            isSaveRunning: true
+                        });
+                    }
+                })}
 
                 {getRenderButton({
                     iconName: this.props.status?.actuator.start() ? "Pause" : "Play",
@@ -103,7 +99,7 @@ class CommandBar extends Component<IMixinSettingProps & IMixinStatusProps> {
                 })}
 
                 {getRenderButton({
-                    iconName: "WebAppBuilderFragmentCreate",
+                    iconName: "WebAppBuilderFragment",
                     i18NKey: "Command.Bar.Add.Group.Info",
                     click: () => {
                         this.props.status ? this.props.status.newGroup() : undefined;
@@ -111,7 +107,7 @@ class CommandBar extends Component<IMixinSettingProps & IMixinStatusProps> {
                 })}
 
                 {getRenderButton({
-                    iconName: "ProductVariant",
+                    iconName: "CubeShape",
                     i18NKey: "Command.Bar.Add.Range.Info",
                     click: () => {
                         this.props.status ? this.props.status.newRange() : undefined;
@@ -134,16 +130,16 @@ class CommandBar extends Component<IMixinSettingProps & IMixinStatusProps> {
                     }
                 })}
 
-                {getRenderButton({ iconName: "Camera", i18NKey: "Command.Bar.Camera.Info" })}
+                {/* {getRenderButton({ iconName: "Camera", i18NKey: "Command.Bar.Camera.Info" })} */}
             </div>
             <div>
-                {getRenderButton({
+                {/* {getRenderButton({
                     iconName: "Settings",
                     i18NKey: "Command.Bar.Setting.Info",
                     click: () => {
                         this.props.status?.popup.showPopup(SettingPopup, {});
                     }
-                })}
+                })} */}
             </div>
         </Theme>
     }

source/Component/HeaderBar/HeaderBar.tsx

@@ -126,6 +126,30 @@ class HeaderWindowsAction extends Component<IMixinElectronProps> {
 @useStatusWithEvent("fileSave", "fileChange", "fileLoad")
 class HeaderBar extends Component<IHeaderBarProps & IMixinStatusProps & IMixinSettingProps> {
 
+    private showCloseMessage = (e: BeforeUnloadEvent) => {
+        if (!this.props.status?.archive.isSaved) {
+            const message = I18N(this.props, "Info.Hint.Save.After.Close");
+            (e || window.event).returnValue = message; // 兼容 Gecko + IE
+            return message; // 兼容 Gecko + Webkit, Safari, Chrome
+        }
+    }
+
+    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

@@ -0,0 +1,38 @@
+@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

@@ -0,0 +1,31 @@
+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

@@ -0,0 +1,91 @@
+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/Setting.tsx

@@ -37,7 +37,7 @@ class Setting extends Emitter<ISettingEvents> {
     /**
      * 语言
      */
-    public language: Language = "EN_US";
+    public language: Language = "ZH_CN";
 
     /**
      * 布局

source/Context/Status.tsx

@@ -172,6 +172,8 @@ class Status extends Emitter<IStatusEvent> {
                 this.emit("fileChange");
             }
         }
+
+        // 设置文件修改状态
         this.on("objectChange", handelFileChange);
         this.on("behaviorChange", handelFileChange);
         this.on("labelChange", handelFileChange);

source/Localization/EN-US.ts

@@ -133,5 +133,8 @@ 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

@@ -133,5 +133,8 @@ 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/Actuator.ts

@@ -19,7 +19,7 @@ class Actuator extends Emitter<IActuatorEvent> {
 	/**
 	 * 模拟帧率
 	 */
-	public fps: number = 36;
+	public fps: number = 42;
 
 	/**
 	 * 仿真是否进行

source/Model/Archive.ts

@@ -22,7 +22,7 @@ interface IArchiveObject {
     behaviorPool: IArchiveBehavior[];
 }
 
-class Archive<M extends any = any> extends Emitter<IArchiveEvent> {
+class Archive extends Emitter<IArchiveEvent> {
 
     /**
      * 是否为新文件
@@ -40,9 +40,9 @@ class Archive<M extends any = any> extends Emitter<IArchiveEvent> {
     public isSaved: boolean = false;
 
     /**
-     * 文件数据
+     * 文件路径
      */
-    public fileData?: M;
+    public fileUrl?: string;
 
     /**
      * 将模型转换为存档对象

source/Page/SimulatorDesktop/SimulatorDesktop.tsx

@@ -13,6 +13,7 @@ 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/");
@@ -55,6 +56,10 @@ class SimulatorDesktop extends Component {
             })
         };
 
+        setTimeout(() => {
+            this.status.archive.load(this.status.model, DEMO);
+        }, 200);
+
         (window as any).LT = {
             status: this.status,
             setting: this.setting

source/Page/SimulatorWeb/SimulatorWeb.tsx

@@ -6,12 +6,14 @@ 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";
 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/");
@@ -153,6 +155,10 @@ class SimulatorWeb extends Component {
             }, 200)
         }
 
+        setTimeout(() => {
+            this.status.archive.load(this.status.model, DEMO);
+        }, 200);
+
         (window as any).LT = {
             status: this.status,
             setting: this.setting
@@ -203,6 +209,7 @@ class SimulatorWeb extends Component {
             backgroundLevel={BackgroundLevel.Level5}
             fontLevel={FontLevel.Level3}
         >
+            <LoadFile/>
             <Popup/>
             <HeaderBar height={45}/>
             <div className="app-root-space" style={{

source/Panel/ObjectList/ObjectCommand.tsx

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