Add tab renderer panel

source/Component/Container/Container.scss

@@ -94,16 +94,24 @@ div.app-container {
 		}
 	}
 
+	div.app-panel.has-padding {
+		padding: 10px;
+	}
+
 	div.app-panel {
 		width: 100%;
 		height: 100%;
 		box-sizing: border-box;
-		padding: 10px;
 		overflow: scroll;
 		-ms-overflow-style: none;
 		border: .8px solid rgba($color: #000000, $alpha: 0);
 	}
 
+	div.app-panel.hide-scrollbar::-webkit-scrollbar {
+		width : 0;  /*高宽分别对应横竖滚动条的尺寸*/
+		height: 0;
+	}
+	
 	div.app-panel::-webkit-scrollbar {
 		width : 8px;  /*高宽分别对应横竖滚动条的尺寸*/
   		height: 0;

source/Component/Container/Container.tsx

@@ -39,6 +39,7 @@ class Container extends Component<IContainerProps> {
 		const classList: string[] = [];
 		const theme: Themes = this.props.theme ?? Themes.dark;
 		const showPanelId = focus ?? panles[0];
+		const showPanelInfo = getPanelInfoById(showPanelId as any);
 
 		classList.push(theme === Themes.light ? "light" : "dark");
 		classList.push(`background-${BackgroundLevel.Level3}`);
@@ -57,7 +58,7 @@ class Container extends Component<IContainerProps> {
 						const classList: string[] = ["app-tab-header-item"];
 						if (panelId === this.props.focusId) classList.push("active");
 						if (panelId === showPanelId) classList.push("tab");
-						const panelInfo = getPanelInfoById(showPanelId as any);
+						const panelInfo = getPanelInfoById(panelId as any);
 
 						return <LocalizationTooltipHost
 							i18nKey={panelInfo ? panelInfo.introKay as any : "Panel.Info.Notfound"}
@@ -89,7 +90,12 @@ class Container extends Component<IContainerProps> {
 			}
 			<div
 				onClick={() => this.props.onFocusTab ? this.props.onFocusTab(showPanelId) : undefined}
-				className={"app-panel" + (hasActivePanel ? " active" : "")}
+				className={[
+					"app-panel",
+					hasActivePanel ? "active" : "",
+					showPanelInfo?.hidePadding ? "" : "has-padding",
+					showPanelInfo?.hideScrollBar ? "hide-scrollbar" : ""
+				].filter(x => !!x).join(" ")}
 				draggable={false}
 			>
 				{getPanelById(showPanelId as any)}

source/GLRender/BasicRenderer.ts

@@ -20,6 +20,10 @@ abstract class BasicRenderer<
     E extends Record<EventType, any> = {}
 > extends AbstractRenderer<P, M & IRendererParams, E & {loop: number}> {
 
+    public get dom() {
+        return this.canvas.dom
+    }
+
     /**
 	 * 渲染器参数
 	 */

source/Localization/EN-US.ts

@@ -21,6 +21,8 @@ const EN_US = {
     "Command.Bar.Setting.Info": "Global Settings",
     "Panel.Title.Notfound": "{id}",
     "Panel.Info.Notfound": "This panel with id {id} can not found!",
+    "Panel.Title.Render.View": "Live preview",
+    "Panel.Info.Render.View": "Live simulation results preview",
 
 }
 export default EN_US;

source/Localization/ZH-CN.ts

@@ -21,5 +21,7 @@ const ZH_CN = {
     "Command.Bar.Setting.Info": "全局设置",
     "Panel.Title.Notfound": "找不到面板: {id}",
     "Panel.Info.Notfound": "这个编号为 {id} 的面板无法找到!",
+    "Panel.Title.Render.View": "实时预览",
+    "Panel.Info.Render.View": "实时仿真结果预览",
 }
 export default ZH_CN;

source/Model/Renderer.ts

@@ -67,6 +67,8 @@ abstract class AbstractRenderer<
 	E extends AbstractRendererEvent = {loop: number}
 > extends Emitter<E> {
 
+	abstract dom: HTMLDivElement | HTMLCanvasElement;
+
 	/**
 	 * 渲染器参数
 	 */

source/Page/SimulatorWeb/SimulatorWeb.tsx

@@ -60,7 +60,7 @@ class SimulatorWeb extends Component {
             items: [
                 {
                     items: [
-                        {panles: ["Label A", "Label Aa Bb", "Label aaa"]},
+                        {panles: ["RenderView", "Label Aa Bb", "Label aaa"]},
                         {
                             items: [{panles: ["Label b", "Label bbb"]}, {panles: ["C"]}],
                             scale: 80,

source/Panel/Panel.tsx

@@ -1,10 +1,14 @@
-import { ReactNode } from "react";
+import { ReactNode, Component, FunctionComponent } from "react";
 import { Theme } from "@Component/Theme/Theme";
 import { Localization } from "@Component/Localization/Localization";
+import { RenderView } from "./RenderView/RenderView";
 
 interface IPanelInfo {
 	nameKey: string;
 	introKay: string;
+	class: (new (...p: any) => Component) | FunctionComponent;
+	hidePadding?: boolean;
+	hideScrollBar?: boolean;
 	option?: Record<string, string>;
 }
 
@@ -13,15 +17,24 @@ type PanelId = ""
 ;
 
 const PanelInfoMap = new Map<PanelId, IPanelInfo>();
-PanelInfoMap.set("RenderView", { nameKey: "", introKay: "" });
+PanelInfoMap.set("RenderView", { 
+	nameKey: "Panel.Title.Render.View", introKay: "Panel.Info.Render.View", class: RenderView, hidePadding: true, hideScrollBar: true
+});
 
 function getPanelById(panelId: PanelId): ReactNode {
-	return <Theme>
+	switch (panelId) {
+		default: 
+			let info = PanelInfoMap.get(panelId);
+			if (info) {
+				const C = info.class;
+				return <C></C>
+			} else return <Theme>
 				<Localization i18nKey={"Panel.Info.Notfound"} options={{
 					id: panelId
 				}}/>
 			</Theme>
 	}
+}
 
 function getPanelInfoById(panelId: PanelId): IPanelInfo | undefined {
 	return PanelInfoMap.get(panelId);

source/Panel/RenderView/RenderView.scss

@@ -0,0 +1,9 @@
+div.render-view {
+	width: 100%;
+	height: 100%;
+
+	div.canvas {
+		width: 100%;
+		height: 100%;
+	}
+}

source/Panel/RenderView/RenderView.tsx

@@ -0,0 +1,38 @@
+import { Component, ReactNode, createRef } from "react";
+import { useStatus, IMixinStatusProps } from "@Context/Status";
+import { useSetting, IMixinSettingProps, Themes } from "@Context/Setting";
+import { ClassicRenderer } from "@GLRender/ClassicRenderer";
+import "./RenderView.scss";
+
+@useSetting
+@useStatus
+class RenderView extends Component<IMixinStatusProps & IMixinSettingProps> {
+
+	private rootEle = createRef<HTMLDivElement>();
+
+	public render(): ReactNode {
+		const theme = this.props.setting?.themes ?? Themes.dark;
+		const classList: string[] = ["render-view", "background-lvl5"];
+		if (theme === Themes.light) classList.push("light");
+		if (theme === Themes.dark) classList.push("dark");
+
+		if (this.props.status) {
+			(this.props.status.renderer as ClassicRenderer).cleanColor = 
+			(theme === Themes.dark) ?
+				[27 / 255, 26 / 255, 25 / 255, 1] :
+				[190 / 255, 187 / 255, 184 / 255, 1]
+		}
+
+		return <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);
+		}
+	}
+}
+
+export { RenderView }