From 6f8451ea9b8baf3802571bb872e0ba36d2aa786f Mon Sep 17 00:00:00 2001 From: MrKBear Date: Wed, 2 Mar 2022 21:02:54 +0800 Subject: [PATCH] Add tab renderer panel --- source/Component/Container/Container.scss | 10 +++++- source/Component/Container/Container.tsx | 10 ++++-- source/GLRender/BasicRenderer.ts | 4 +++ source/Localization/EN-US.ts | 2 ++ source/Localization/ZH-CN.ts | 2 ++ source/Model/Renderer.ts | 2 ++ source/Page/SimulatorWeb/SimulatorWeb.tsx | 2 +- source/Panel/Panel.tsx | 27 +++++++++++----- source/Panel/RenderView/RenderView.scss | 9 ++++++ source/Panel/RenderView/RenderView.tsx | 38 +++++++++++++++++++++++ 10 files changed, 95 insertions(+), 11 deletions(-) diff --git a/source/Component/Container/Container.scss b/source/Component/Container/Container.scss index dbfe659..2714068 100644 --- a/source/Component/Container/Container.scss +++ b/source/Component/Container/Container.scss @@ -94,15 +94,23 @@ 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; /*高宽分别对应横竖滚动条的尺寸*/ diff --git a/source/Component/Container/Container.tsx b/source/Component/Container/Container.tsx index 9372e70..40d8d35 100644 --- a/source/Component/Container/Container.tsx +++ b/source/Component/Container/Container.tsx @@ -39,6 +39,7 @@ class Container extends Component { 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 { 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 { }
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)} diff --git a/source/GLRender/BasicRenderer.ts b/source/GLRender/BasicRenderer.ts index efa4306..661c6cf 100644 --- a/source/GLRender/BasicRenderer.ts +++ b/source/GLRender/BasicRenderer.ts @@ -20,6 +20,10 @@ abstract class BasicRenderer< E extends Record = {} > extends AbstractRenderer { + public get dom() { + return this.canvas.dom + } + /** * 渲染器参数 */ diff --git a/source/Localization/EN-US.ts b/source/Localization/EN-US.ts index 1ca2c40..608e97d 100644 --- a/source/Localization/EN-US.ts +++ b/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; \ No newline at end of file diff --git a/source/Localization/ZH-CN.ts b/source/Localization/ZH-CN.ts index f7688a7..aaa6290 100644 --- a/source/Localization/ZH-CN.ts +++ b/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; \ No newline at end of file diff --git a/source/Model/Renderer.ts b/source/Model/Renderer.ts index 02a992f..d9714f1 100644 --- a/source/Model/Renderer.ts +++ b/source/Model/Renderer.ts @@ -67,6 +67,8 @@ abstract class AbstractRenderer< E extends AbstractRendererEvent = {loop: number} > extends Emitter { + abstract dom: HTMLDivElement | HTMLCanvasElement; + /** * 渲染器参数 */ diff --git a/source/Page/SimulatorWeb/SimulatorWeb.tsx b/source/Page/SimulatorWeb/SimulatorWeb.tsx index e26e1a7..cee10f3 100644 --- a/source/Page/SimulatorWeb/SimulatorWeb.tsx +++ b/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, diff --git a/source/Panel/Panel.tsx b/source/Panel/Panel.tsx index de02066..8defca0 100644 --- a/source/Panel/Panel.tsx +++ b/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; } @@ -13,14 +17,23 @@ type PanelId = "" ; const PanelInfoMap = new Map(); -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 - - + switch (panelId) { + default: + let info = PanelInfoMap.get(panelId); + if (info) { + const C = info.class; + return + } else return + + + } } function getPanelInfoById(panelId: PanelId): IPanelInfo | undefined { diff --git a/source/Panel/RenderView/RenderView.scss b/source/Panel/RenderView/RenderView.scss index e69de29..f174294 100644 --- a/source/Panel/RenderView/RenderView.scss +++ b/source/Panel/RenderView/RenderView.scss @@ -0,0 +1,9 @@ +div.render-view { + width: 100%; + height: 100%; + + div.canvas { + width: 100%; + height: 100%; + } +} \ No newline at end of file diff --git a/source/Panel/RenderView/RenderView.tsx b/source/Panel/RenderView/RenderView.tsx index e69de29..8bef356 100644 --- a/source/Panel/RenderView/RenderView.tsx +++ b/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 { + + private rootEle = createRef(); + + 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
; + } + + 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 } \ No newline at end of file