diff --git a/source/Component/Container/Container.tsx b/source/Component/Container/Container.tsx index 4b8981c..b60e1d5 100644 --- a/source/Component/Container/Container.tsx +++ b/source/Component/Container/Container.tsx @@ -34,11 +34,11 @@ class Container extends Component { /** * 渲染此 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 { 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 ?
{ 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 { 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 { 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
{ 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} diff --git a/source/Localization/EN-US.ts b/source/Localization/EN-US.ts index 513b948..a0a0b66 100644 --- a/source/Localization/EN-US.ts +++ b/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", diff --git a/source/Localization/ZH-CN.ts b/source/Localization/ZH-CN.ts index e0ca849..871f0e6 100644 --- a/source/Localization/ZH-CN.ts +++ b/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 坐标", diff --git a/source/Model/Layout.ts b/source/Model/Layout.ts index 4c14eba..9e5229a 100644 --- a/source/Model/Layout.ts +++ b/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 { this.id = 0; this.map((layout) => { layout.id = this.id; - if (!layout.focusPanel && layout.panles && layout.panles.length > 0) { - layout.focusPanel = layout.panles[0] + if (!layout.focusPanel && layout.panels && layout.panels.length > 0) { + layout.focusPanel = layout.panels[0] } this.id ++; }); @@ -80,10 +80,10 @@ class Layout extends Emitter { } 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++) { - if (layout.panles[i] === panelId) { + for (let i = 0; i < layout.panels.length; i++) { + if (layout.panels[i] === panelId) { index = i; break; } diff --git a/source/Page/SimulatorWeb/SimulatorWeb.tsx b/source/Page/SimulatorWeb/SimulatorWeb.tsx index ebc510e..dc5c168 100644 --- a/source/Page/SimulatorWeb/SimulatorWeb.tsx +++ b/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 } diff --git a/source/Panel/LabelList/LabelList.scss b/source/Panel/LabelList/LabelList.scss new file mode 100644 index 0000000..1cee841 --- /dev/null +++ b/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; + } +} \ No newline at end of file diff --git a/source/Panel/LabelList/LabelList.tsx b/source/Panel/LabelList/LabelList.tsx new file mode 100644 index 0000000..24a0d48 --- /dev/null +++ b/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 { + + public render() { + return LabelList + } +} + +export { LabelList }; \ No newline at end of file diff --git a/source/Panel/LabelList/LabelListCommand.tsx b/source/Panel/LabelList/LabelListCommand.tsx new file mode 100644 index 0000000..8c7d77b --- /dev/null +++ b/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 { + + public render() { + return +
+ +
+
+ } +} + +export { LabelListCommand }; \ No newline at end of file diff --git a/source/Panel/Panel.tsx b/source/Panel/Panel.tsx index a3cddeb..6b5cf31 100644 --- a/source/Panel/Panel.tsx +++ b/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(); @@ -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) {