142 lines
4.6 KiB
TypeScript
142 lines
4.6 KiB
TypeScript
import { Component, ReactNode } from "react";
|
|
import { useStatus, IMixinStatusProps } from "@Context/Status";
|
|
import { useSetting, IMixinSettingProps } from "@Context/Setting";
|
|
import { Theme, BackgroundLevel, FontLevel } from "@Component/Theme/Theme";
|
|
import { Icon } from '@fluentui/react/lib/Icon';
|
|
import { LocalizationTooltipHost } from "../Localization/LocalizationTooltipHost";
|
|
import { I18N } from "../Localization/Localization";
|
|
import "./HeaderBar.scss";
|
|
import { Tooltip, TooltipHost } from "@fluentui/react";
|
|
|
|
interface IHeaderBarProps {
|
|
height: number;
|
|
}
|
|
|
|
interface HeaderBarState {
|
|
renderFps: number;
|
|
physicsFps: number;
|
|
}
|
|
|
|
/**
|
|
* 头部信息栏
|
|
*/
|
|
@useSetting
|
|
@useStatus
|
|
class HeaderBar extends Component<
|
|
IHeaderBarProps & IMixinStatusProps & IMixinSettingProps,
|
|
HeaderBarState
|
|
> {
|
|
|
|
public state = {
|
|
renderFps: 0,
|
|
physicsFps: 0,
|
|
}
|
|
|
|
private changeListener = () => {
|
|
this.forceUpdate();
|
|
}
|
|
|
|
private updateTime: number = 0;
|
|
|
|
private createFpsCalc(type: "renderFps" | "physicsFps") {
|
|
return (t: number) => {
|
|
if (t === 0) {
|
|
return;
|
|
}
|
|
let newState: HeaderBarState = {} as any;
|
|
newState[type] = 1 / t;
|
|
if (this.updateTime > 20) {
|
|
this.updateTime = 0;
|
|
this.setState(newState);
|
|
}
|
|
this.updateTime ++;
|
|
}
|
|
}
|
|
|
|
private renderFpsCalc: (t: number) => void = () => {};
|
|
private physicsFpsCalc: (t: number) => void = () => {};
|
|
|
|
public componentDidMount() {
|
|
const { setting, status } = this.props;
|
|
this.renderFpsCalc = this.createFpsCalc("renderFps");
|
|
this.physicsFpsCalc = this.createFpsCalc("physicsFps");
|
|
if (setting) {
|
|
setting.on("language", this.changeListener);
|
|
}
|
|
if (status) {
|
|
status.archive.on("save", this.changeListener);
|
|
status.on("physicsLoop", this.physicsFpsCalc);
|
|
status.on("renderLoop", this.renderFpsCalc);
|
|
}
|
|
}
|
|
|
|
public componentWillUnmount() {
|
|
const { setting, status } = this.props;
|
|
if (setting) {
|
|
setting.off("language", this.changeListener);
|
|
}
|
|
if (status) {
|
|
status.archive.off("save", this.changeListener);
|
|
status.off("physicsLoop", this.physicsFpsCalc);
|
|
status.off("renderLoop", this.renderFpsCalc);
|
|
}
|
|
}
|
|
|
|
public render(): ReactNode {
|
|
const { status } = this.props;
|
|
let fileName: string = "";
|
|
let isNewFile: boolean = true;
|
|
let isSaved: boolean = false;
|
|
if (status) {
|
|
isNewFile = status.archive.isNewFile;
|
|
fileName = status.archive.fileName ?? "";
|
|
isSaved = status.archive.isSaved;
|
|
}
|
|
|
|
const fpsInfo = {
|
|
renderFps: Math.floor(this.state.renderFps).toString(),
|
|
physicsFps: Math.floor(this.state.physicsFps).toString()
|
|
};
|
|
|
|
return <Theme
|
|
className="header-bar"
|
|
backgroundLevel={BackgroundLevel.Level1}
|
|
fontLevel={FontLevel.Level3}
|
|
style={{ height: this.props.height }}
|
|
onClick={() => {
|
|
if (this.props.setting) {
|
|
this.props.setting.layout.focus("");
|
|
}
|
|
}}
|
|
>
|
|
<LocalizationTooltipHost i18nKey="Header.Bar.Title.Info">
|
|
<div className="title">
|
|
<Icon iconName="HomeGroup"></Icon>
|
|
<span>{I18N(this.props, "Header.Bar.Title")}</span>
|
|
</div>
|
|
</LocalizationTooltipHost>
|
|
<LocalizationTooltipHost i18nKey="Header.Bar.File.Name.Info"
|
|
options={{
|
|
file: isNewFile ? I18N(this.props, "Header.Bar.New.File.Name") : fileName,
|
|
status: isSaved ? I18N(this.props, "Header.Bar.File.Save.Status.Saved") :
|
|
I18N(this.props, "Header.Bar.File.Save.Status.Unsaved")
|
|
}}
|
|
>
|
|
<div className="file-name">{
|
|
isNewFile ? I18N(this.props, "Header.Bar.New.File.Name") : fileName
|
|
}{
|
|
isSaved ? "" : "*"
|
|
}</div>
|
|
</LocalizationTooltipHost>
|
|
<LocalizationTooltipHost i18nKey="Header.Bar.Fps.Info" options={fpsInfo}>
|
|
<div className="fps-view">
|
|
<Icon iconName="SpeedHigh"></Icon>
|
|
<span>{I18N(this.props, "Header.Bar.Fps", fpsInfo)}</span>
|
|
</div>
|
|
</LocalizationTooltipHost>
|
|
</Theme>
|
|
}
|
|
}
|
|
|
|
export default HeaderBar;
|
|
export { HeaderBar }; |