Add tab renderer panel

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,14 +17,23 @@ 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>
-		<Localization i18nKey={"Panel.Info.Notfound"} options={{
-			id: panelId
-		}}/>
-	</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 {

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 }