Add desktop layout

source/Panel/RenderView/RenderView.scss

@@ -6,4 +6,17 @@ div.render-view {
 		width: 100%;
 		height: 100%;
 	}
+}
+
+div.render-view-fps {
+    height: 0;
+    width: 100%;
+
+    div.fps-view {
+        position: relative;
+        opacity: .5;
+        top: 10px;
+        left: 10px;
+        user-select: none;
+    }
 }

source/Panel/RenderView/RenderView.tsx

@@ -1,9 +1,85 @@
 import { Component, ReactNode, createRef } from "react";
 import { useStatus, IMixinStatusProps } from "@Context/Status";
-import { useSetting, IMixinSettingProps, Themes } from "@Context/Setting";
+import { useSetting, IMixinSettingProps, Themes, Platform } from "@Context/Setting";
 import { ClassicRenderer } from "@GLRender/ClassicRenderer";
+import { FontLevel, Theme } from "@Component/Theme/Theme";
+import { Localization } from "@Component/Localization/Localization";
 import "./RenderView.scss";
 
+interface IRendererFpsViewProps {
+    renderFps: number;
+    physicsFps: number;
+}
+
+@useStatus
+class RendererFpsView extends Component<IMixinStatusProps, IRendererFpsViewProps> {
+
+    public state = {
+        renderFps: 0,
+        physicsFps: 0,
+    }
+
+    private updateTime: number = 0;
+
+    private renderFpsCalc: (t: number) => void = () => {};
+    private physicsFpsCalc: (t: number) => void = () => {};
+
+    public componentDidMount() {
+        const { status } = this.props;
+        this.renderFpsCalc = this.createFpsCalc("renderFps");
+        this.physicsFpsCalc = this.createFpsCalc("physicsFps");
+        if (status) {
+            status.on("physicsLoop", this.physicsFpsCalc);
+            status.on("renderLoop", this.renderFpsCalc);
+        }
+    }
+
+    public componentWillUnmount() {
+        const { status } = this.props;
+        if (status) {
+            status.off("physicsLoop", this.physicsFpsCalc);
+            status.off("renderLoop", this.renderFpsCalc);
+        }
+    }
+
+    private createFpsCalc(type: "renderFps" | "physicsFps") {
+        return (t: number) => {
+            if (t === 0) {
+                return;
+            }
+            let newState: IRendererFpsViewProps = {} as any;
+            newState[type] = 1 / t;
+            if (this.updateTime > 20) {
+                this.updateTime = 0;
+                this.setState(newState);
+            }
+            this.updateTime ++;
+        }
+    }
+
+    public render() {
+
+        const fpsInfo = {
+            renderFps: Math.floor(this.state.renderFps).toString(),
+            physicsFps: Math.floor(this.state.physicsFps).toString()
+        };
+
+        return <Theme
+            className="render-view-fps"
+            fontLevel={FontLevel.normal}
+        >
+            <div className="fps-view">
+                <Localization i18nKey="Header.Bar.Fps.Render.Info" options={{
+                    fps: fpsInfo.renderFps
+                }}/><br/>
+                <Localization i18nKey="Header.Bar.Fps.Simulate.Info" options={{
+                    fps: fpsInfo.physicsFps
+                }}/>
+            </div>
+        </Theme>;
+    }
+}
+
 @useSetting
 @useStatus
 class RenderView extends Component<IMixinStatusProps & IMixinSettingProps> {
@@ -23,12 +99,17 @@ class RenderView extends Component<IMixinStatusProps & IMixinSettingProps> {
 				[190 / 255, 187 / 255, 184 / 255, 1]
 		}
 
-		return <div ref={this.rootEle} className={classList.join(" ")}/>;
+		return <>
+            {
+                this.props.setting?.platform === Platform.desktop ?
+                    <RendererFpsView/> : null
+            }
+            <div ref={this.rootEle} className={classList.join(" ")}/>;
+        </>
 	}
 
 	public componentDidMount() {
 		let div = this.rootEle.current;
-		// console.log(div, div?.childNodes, this.props.status, this.props.status?.renderer.dom)
 		if (div && (!div.childNodes || div.childNodes.length <= 0) && this.props.status) {	
 			div.appendChild(this.props.status.renderer.dom);
 		}