Add tab tooltips cancle outer tab

source/Component/CommandBar/CommandBar.tsx

@@ -1,6 +1,7 @@
 import { BackgroundLevel, Theme } from "@Component/Theme/Theme";
 import { DirectionalHint, IconButton } from "@fluentui/react";
 import { LocalizationTooltipHost } from "../Localization/LocalizationTooltipHost";
+import { useSetting, IMixinSettingProps } from "@Context/Setting";
 import { AllI18nKeys } from "../Localization/Localization";
 import { Component, ReactNode } from "react";
 import "./CommandBar.scss";
@@ -9,13 +10,19 @@ interface ICommandBarProps {
     width: number;
 }
 
-class CommandBar extends Component<ICommandBarProps> {
+@useSetting
+class CommandBar extends Component<ICommandBarProps & IMixinSettingProps> {
 
     render(): ReactNode {
         return <Theme
             className="command-bar"
             backgroundLevel={BackgroundLevel.Level2}
             style={{ width: this.props.width }}
+            onClick={() => {
+                if (this.props.setting) {
+                    this.props.setting.layout.focus("");
+                }
+            }}
         >
             <div>
                 {this.getRenderButton({ iconName: "Save", i18NKey: "Command.Bar.Save.Info" })}

source/Component/Container/Container.scss

@@ -98,23 +98,33 @@ div.app-container {
 		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::-webkit-scrollbar {
+		width : 8px;  /*高宽分别对应横竖滚动条的尺寸*/
+  		height: 0;
+	}
+
+	div.app-panel::-webkit-scrollbar-thumb {
+		/*滚动条里面小方块*/
+		border-radius: 8px;
+	}
+
+	div.app-panel::-webkit-scrollbar-track {
+		/*滚动条里面轨道*/
+		border-radius: 8px;
+		background-color: rgba($color: #000000, $alpha: 0);
+	}
+
 	div.app-panel.active {
 		border: .8px solid blue !important;
 	}
 }
 
-div.app-panel {
-	overflow: scroll;
-	-ms-overflow-style: none;
-}
-div.app-panel::-webkit-scrollbar {
-	width: 0 !important;
-	height: 0 !important;
-}
-
 div.dark.app-container.end-containe {
 	border: .8px solid $lt-bg-color-lvl3-dark;
 
@@ -132,6 +142,10 @@ div.dark.app-container.end-containe {
 			transition: none;
 		}
 	}
+
+	div.app-panel::-webkit-scrollbar-thumb {
+		background-color: $lt-bg-color-lvl1-dark;
+	}
 }
 
 div.light.app-container.end-containe {
@@ -150,4 +164,8 @@ div.light.app-container.end-containe {
 			transition: none;
 		}
 	}
+
+	div.app-panel::-webkit-scrollbar-thumb {
+		background-color: $lt-bg-color-lvl1-light;
+	}
 }

source/Component/Container/Container.tsx

@@ -1,7 +1,11 @@
+import { Localization } from "@Component/Localization/Localization";
 import { Theme, BackgroundLevel, FontLevel } from "@Component/Theme/Theme";
 import { Themes } from "@Context/Setting";
+import { DirectionalHint } from "@fluentui/react";
 import { ILayout, LayoutDirection } from "@Model/Layout";
 import { Component, ReactNode, MouseEvent } from "react";
+import { getPanelById, getPanelInfoById } from "../../Panel/Panel";
+import { LocalizationTooltipHost } from "../Localization/LocalizationTooltipHost";
 import "./Container.scss";
 
 interface IContainerProps extends ILayout {
@@ -13,10 +17,6 @@ interface IContainerProps extends ILayout {
 	onFocusTab?: (id: string) => any;
 }
 
-function getPanelById(id: string) {
-	return <Theme>{id}</Theme>
-}
-
 class Container extends Component<IContainerProps> {
 
 	private focusEdgeId: number | undefined;
@@ -49,21 +49,41 @@ class Container extends Component<IContainerProps> {
 
 		return <>
 			{showBar ? 
-				<div className={classList.join(" ")} >{
+				<div className={classList.join(" ")} onClick={() => {
+					this.props.onFocusTab ? this.props.onFocusTab("") : undefined
+				}}>{
 					panles.map((panelId: string) => {
 
 						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);
 
-						return <div 
+						return <LocalizationTooltipHost
+							i18nKey={panelInfo ? panelInfo.introKay as any : "Panel.Info.Notfound"}
+							options={{id: panelId}}
+							directionalHint={DirectionalHint.topAutoEdge}
+							delay={2}
 							key={panelId}
+						>
+							<div	
 								className={classList.join(" ")}
-							onClick={() => this.props.onFocusTab ? this.props.onFocusTab(panelId) : undefined}
+								onClick={(e) => {
+									e.stopPropagation();
+									this.props.onFocusTab ? this.props.onFocusTab(panelId) : undefined;
+								}}
 							>
 								<div className="border-view"></div>
-							<div className="title-view">{panelId}</div>
+								<div className="title-view">
+									{
+										panelInfo ?
+											<Localization i18nKey={panelInfo.nameKey as any}/>:
+											<Localization i18nKey="Panel.Title.Notfound" options={{id: panelId}}/>
+									}
+									
 								</div>
+							</div>
+						</LocalizationTooltipHost>
 					})
 				}</div> : null
 			}
@@ -72,7 +92,7 @@ class Container extends Component<IContainerProps> {
 				className={"app-panel" + (hasActivePanel ? " active" : "")}
 				draggable={false}
 			>
-				{getPanelById(showPanelId)}
+				{getPanelById(showPanelId as any)}
 			</div>
 		</>
 	}

source/Component/HeaderBar/HeaderBar.tsx

@@ -100,6 +100,11 @@ class HeaderBar extends Component<
             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">

source/Localization/EN-US.ts

@@ -19,5 +19,8 @@ const EN_US = {
     "Command.Bar.Add.Tag.Info": "Add label object",
     "Command.Bar.Camera.Info": "Renderer settings",
     "Command.Bar.Setting.Info": "Global Settings",
+    "Panel.Title.Notfound": "{id}",
+    "Panel.Info.Notfound": "This panel with id {id} can not found!",
+
 }
 export default EN_US;

source/Localization/ZH-CN.ts

@@ -19,5 +19,7 @@ const ZH_CN = {
     "Command.Bar.Add.Tag.Info": "添加标签对象",
     "Command.Bar.Camera.Info": "渲染器设置",
     "Command.Bar.Setting.Info": "全局设置",
+    "Panel.Title.Notfound": "找不到面板: {id}",
+    "Panel.Info.Notfound": "这个编号为 {id} 的面板无法找到!",
 }
 export default ZH_CN;

source/Model/Layout.ts

@@ -74,6 +74,11 @@ class Layout extends Emitter<ILayoutEvent> {
 	}
 
 	public focus = (panelId: string) => {
+		if (panelId === "") {
+			this.focusId = panelId;
+			this.emit("switchTab", this);
+		}
+
 		this.map((layout) => {
 			if (layout.panles && layout.panles.length > 0) {
 				let index = -1;

source/Panel/Panel.tsx

@@ -0,0 +1,30 @@
+import { ReactNode } from "react";
+import { Theme } from "@Component/Theme/Theme";
+import { Localization } from "@Component/Localization/Localization";
+
+interface IPanelInfo {
+	nameKey: string;
+	introKay: string;
+	option?: Record<string, string>;
+}
+
+type PanelId = ""
+| "RenderView" // 主渲染器
+;
+
+const PanelInfoMap = new Map<PanelId, IPanelInfo>();
+PanelInfoMap.set("RenderView", { nameKey: "", introKay: "" });
+
+function getPanelById(panelId: PanelId): ReactNode {
+	return <Theme>
+		<Localization i18nKey={"Panel.Info.Notfound"} options={{
+			id: panelId
+		}}/>
+	</Theme>
+}
+
+function getPanelInfoById(panelId: PanelId): IPanelInfo | undefined {
+	return PanelInfoMap.get(panelId);
+}
+
+export { PanelId, getPanelById, getPanelInfoById}