Add label list panel

source/Component/Container/Container.tsx

@@ -34,11 +34,11 @@ class Container extends Component<IContainerProps> {
 	/**
 	 * 渲染此 Tab 下的 ELE
 	 */
-	private renderPanel(panles: string[], showBar: boolean, focus?: string) {
+	private renderPanel(panels: string[], showBar: boolean, focus?: string) {
 
 		const classList: string[] = [];
 		const theme: Themes = this.props.theme ?? Themes.dark;
-		const showPanelId = focus ?? panles[0];
+		const showPanelId = focus ?? panels[0];
 		const showPanelInfo = getPanelInfoById(showPanelId as any);
 
 		classList.push(theme === Themes.light ? "light" : "dark");
@@ -46,14 +46,14 @@ class Container extends Component<IContainerProps> {
 		classList.push(`font-${FontLevel.Level3}`);
 		classList.push("app-tab-header");
 
-		const hasActivePanel = panles.some((id) => id === this.props.focusId);
+		const hasActivePanel = panels.some((id) => id === this.props.focusId);
 
 		return <>
 			{showBar ? 
 				<div className={classList.join(" ")} onClick={() => {
 					this.props.onFocusTab ? this.props.onFocusTab("") : undefined
 				}}>{
-					panles.map((panelId: string) => {
+					panels.map((panelId: string) => {
 
 						const classList: string[] = ["app-tab-header-item"];
 						if (panelId === this.props.focusId) classList.push("active");
@@ -189,7 +189,7 @@ class Container extends Component<IContainerProps> {
 
 		const items: [IContainerProps, IContainerProps] | undefined = props.items;
 		const showBar: boolean = props.showBar ?? true;
-		const panles: string[] = props.panles ?? [];
+		const panels: string[] = props.panels ?? [];
 		const layout: LayoutDirection = props.layout ?? LayoutDirection.Y;
 		const scale: number = props.scale ?? 50;
 		const isRoot: boolean = !!props.isRoot;
@@ -201,7 +201,7 @@ class Container extends Component<IContainerProps> {
 		classList.push(`background-${BackgroundLevel.Level4}`);
 		classList.push(`font-${FontLevel.normal}`);
 		classList.push("app-container");
-		if (panles.length > 0 && !items) classList.push("end-containe");
+		if (panels.length > 0 && !items) classList.push("end-containe");
 
 		return <div
 			className={classList.join(" ")}
@@ -216,7 +216,7 @@ class Container extends Component<IContainerProps> {
 			onMouseUp={isRoot ? () => this.focusEdgeId = undefined : undefined}
 		>
 			{/* 渲染 Panel */}
-			{panles.length > 0 && !items ? this.renderPanel(panles, showBar, focusPanel) : null}
+			{panels.length > 0 && !items ? this.renderPanel(panels, showBar, focusPanel) : null}
 
 			{/* 渲染第一部分 */}
 			{items && items[0] ? this.renderContainer(items[0], scale, layout) : null}

source/Localization/EN-US.ts

@@ -31,9 +31,11 @@ const EN_US = {
     "Panel.Title.Render.View": "Live preview",
     "Panel.Info.Render.View": "Live simulation results preview",
     "Panel.Title.Object.List.View": "Object list",
-    "Panel.Info.Object.List.View": "Edit View All Object Properties",
+    "Panel.Info.Object.List.View": "Edit view all Object Properties",
     "Panel.Title.Range.Details.View": "Range attributes",
-    "Panel.Info.Range.Details.View": "Edit View Range attributes",
+    "Panel.Info.Range.Details.View": "Edit view range attributes",
+    "Panel.Title.Label.List.View": "Label list",
+    "Panel.Info.Label.List.View": "Edit view label attributes",
     "Common.Attr.Key.Display.Name": "Display name",
     "Common.Attr.Key.Position.X": "Position X",
     "Common.Attr.Key.Position.Y": "Position Y",

source/Localization/ZH-CN.ts

@@ -34,6 +34,8 @@ const ZH_CN = {
     "Panel.Info.Object.List.View": "编辑查看全部对象属性",
     "Panel.Title.Range.Details.View": "范围属性",
     "Panel.Info.Range.Details.View": "编辑查看范围属性",
+    "Panel.Title.Label.List.View": "标签列表",
+    "Panel.Info.Label.List.View": "编辑查看标签属性",
     "Common.Attr.Key.Display.Name": "显示名称",
     "Common.Attr.Key.Position.X": "X 坐标",
     "Common.Attr.Key.Position.Y": "Y 坐标",

source/Model/Layout.ts

@@ -7,7 +7,7 @@ enum LayoutDirection {
 
 class ILayout {
 	items?: [ILayout, ILayout];
-	panles?: string[];
+	panels?: string[];
 	focusPanel?: string;
 	layout?: LayoutDirection;
 	scale?: number;
@@ -51,8 +51,8 @@ class Layout extends Emitter<ILayoutEvent> {
 		this.id = 0;
 		this.map((layout) => {
 			layout.id = this.id;
-			if (!layout.focusPanel && layout.panles && layout.panles.length > 0) {
+			if (!layout.focusPanel && layout.panels && layout.panels.length > 0) {
-				layout.focusPanel = layout.panles[0]
+				layout.focusPanel = layout.panels[0]
 			}
 			this.id ++;
 		});
@@ -80,10 +80,10 @@ class Layout extends Emitter<ILayoutEvent> {
 		}
 
 		this.map((layout) => {
-			if (layout.panles && layout.panles.length > 0) {
+			if (layout.panels && layout.panels.length > 0) {
 				let index = -1;
-				for (let i = 0; i < layout.panles.length; i++) {
+				for (let i = 0; i < layout.panels.length; i++) {
-					if (layout.panles[i] === panelId) {
+					if (layout.panels[i] === panelId) {
 						index = i;
 						break;
 					}

source/Page/SimulatorWeb/SimulatorWeb.tsx

@@ -61,9 +61,9 @@ class SimulatorWeb extends Component {
             items: [
                 {
                     items: [
-                        {panles: ["RenderView", "Label Aa Bb", "Label aaa"]},
+                        {panels: ["RenderView", "Label Aa Bb", "Label aaa"]},
                         {
-                            items: [{panles: ["Label b", "Label bbb"]}, {panles: ["C"]}],
+                            items: [{panels: ["Label b", "Label bbb"]}, {panels: ["LabelList"]}],
                             scale: 80,
                             layout: LayoutDirection.X
                         }
@@ -73,9 +73,9 @@ class SimulatorWeb extends Component {
                 },
                 {
                     items: [{
-                        panles: ["ObjectList", "Test tab"]
+                        panels: ["ObjectList", "Test tab"]
                     }, {
-                        panles: ["RangeDetails", "Label e"]
+                        panels: ["RangeDetails", "Label e"]
                     }],
                     layout: LayoutDirection.Y
                 }

source/Panel/LabelList/LabelList.scss

@@ -0,0 +1,18 @@
+
+div.label-list-command-bar {
+    width: 100%;
+    height: 30px;
+    flex-shrink: 0;
+    display: flex;
+
+    div.command-item {
+        width: 30px;
+        height: 100%;
+        display: flex;
+        flex-shrink: 0;
+        justify-content: center;
+        align-items: center;
+        user-select: none;
+        cursor: pointer;
+    }
+}

source/Panel/LabelList/LabelList.tsx

@@ -0,0 +1,16 @@
+import { Theme } from "@Component/Theme/Theme";
+import { Component } from "react";
+import "./LabelList.scss";
+
+interface ILabelListProps {
+
+}
+
+class LabelList extends Component<ILabelListProps> {
+    
+    public render() {
+        return <Theme>LabelList</Theme>
+    }
+}
+
+export { LabelList };

source/Panel/LabelList/LabelListCommand.tsx

@@ -0,0 +1,23 @@
+import { BackgroundLevel, FontLevel, Theme } from "@Component/Theme/Theme";
+import { Icon } from "@fluentui/react";
+import { Component } from "react";
+import "./LabelList.scss";
+
+interface ILabelListCommandProps {}
+
+class LabelListCommand extends Component<ILabelListCommandProps> {
+    
+    public render() {
+        return <Theme
+            className="label-list-command-bar"
+            backgroundLevel={BackgroundLevel.Level4}
+            fontLevel={FontLevel.normal}
+        >
+            <div className="command-item">
+                <Icon iconName="Tag"></Icon>
+            </div>
+        </Theme>
+    }
+}
+
+export { LabelListCommand };

source/Panel/Panel.tsx

@@ -1,11 +1,12 @@
 import { ReactNode, Component, FunctionComponent } from "react";
 import { Theme } from "@Component/Theme/Theme";
-import { Localization } from "@Component/Localization/Localization";
 import { ErrorMessage } from "@Component/ErrorMessage/ErrorMessage";
 import { RenderView } from "./RenderView/RenderView";
 import { ObjectList } from "./ObjectList/ObjectList";
 import { ObjectCommand } from "./ObjectList/ObjectCommand";
 import { RangeDetails } from "./RangeDetails/RangeDetails";
+import { LabelList } from "./LabelList/LabelList";
+import { LabelListCommand } from "./LabelList/LabelListCommand";
 
 interface IPanelInfo {
 	nameKey: string;
@@ -22,6 +23,7 @@ type PanelId = ""
 | "RenderView" // 主渲染器
 | "ObjectList" // 对象列表
 | "RangeDetails" // 范围属性
+| "LabelList" // 标签列表
 ;
 
 const PanelInfoMap = new Map<PanelId, IPanelInfo>();
@@ -37,6 +39,10 @@ PanelInfoMap.set("RangeDetails", {
     nameKey: "Panel.Title.Range.Details.View", introKay: "Panel.Info.Range.Details.View",
     class: RangeDetails
 })
+PanelInfoMap.set("LabelList", {
+    nameKey: "Panel.Title.Label.List.View", introKay: "Panel.Info.Label.List.View",
+    class: LabelList, header: LabelListCommand, hidePadding: true
+})
 
 function getPanelById(panelId: PanelId): ReactNode {
 	switch (panelId) {