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

Merge pull request 'Add archive save component & shutdown hendel' (#45) from dev-mrkbear into master

Browse Source 
Reviewed-on: http://git.mrkbear.com/MrKBear/living-together/pulls/45
This commit is contained in:
MrKBear 2022-04-24 14:13:17 +08:00
commit 1f08a4885b
13 changed files with 333 additions and 57 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",

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

@ -8,24 +8,51 @@ 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";
interface ICommandBarProps {
width: number;
const COMMAND_BAR_WIDTH = 45;
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<ICommandBarProps & 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;
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 +60,80 @@ class CommandBar extends Component<ICommandBarProps & IMixinSettingProps & IMixi
}}
>
<div>
{this.getRenderButton({
<ArchiveSave
running={this.state.isSaveRunning}
afterRunning={() => {
this.setState({ isSaveRunning: false });
}}
/>
{getRenderButton({
iconName: "Save",
i18NKey: "Command.Bar.Save.Info",
click: () => {
this.props.status?.archive.save(this.props.status.model);
this.setState({
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>
{this.getRenderButton({
{getRenderButton({
iconName: "Settings",
i18NKey: "Command.Bar.Setting.Info",
click: () => {
@ -98,25 +143,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 };

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

@ -123,9 +123,33 @@ class HeaderWindowsAction extends Component<IMixinElectronProps> {
* 头部信息栏
*/
@useSettingWithEvent("language")
@useStatusWithEvent("fileSave")
@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;

38
source/Component/LoadFile/LoadFile.scss Normal file
View File

@ -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);
}

31
source/Component/LoadFile/LoadFile.tsx Normal file
View File

@ -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 };

91
source/Context/Archive.tsx Normal file
View File

@ -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 };

32
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,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,26 @@ 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 +224,6 @@ class Status extends Emitter<IStatusEvent> {
if (range && range instanceof Range) {
range[key] = val;
this.emit("rangeAttrChange");
this.model.draw();
}
}
@ -213,7 +236,6 @@ class Status extends Emitter<IStatusEvent> {
if (group && group instanceof Group) {
group[key] = val;
this.emit("groupAttrChange");
this.model.draw();
}
}

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

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

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

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

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

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

@ -6,6 +6,7 @@ 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";
@ -203,13 +204,14 @@ 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 width={45}/>
<RootContainer />
<CommandBar/>
<RootContainer/>
</div>
</Theme>
}