From a684db23068ab331a4b8c0d12fe7df5e9aa0ea01 Mon Sep 17 00:00:00 2001 From: MrKBear Date: Sat, 5 Mar 2022 18:30:32 +0800 Subject: [PATCH] Add object list command bar --- source/Component/Container/Container.scss | 16 +++- source/Component/Container/Container.tsx | 32 ++++++-- source/Component/DetailsList/DetailsList.scss | 4 +- source/Model/Model.ts | 15 ++-- source/Panel/ObjectList/ObjectCommand.tsx | 78 +++++++++++++++++++ source/Panel/ObjectList/ObjectList.scss | 33 ++++++++ source/Panel/ObjectList/ObjectList.tsx | 10 ++- source/Panel/Panel.tsx | 4 +- 8 files changed, 173 insertions(+), 19 deletions(-) create mode 100644 source/Panel/ObjectList/ObjectCommand.tsx diff --git a/source/Component/Container/Container.scss b/source/Component/Container/Container.scss index 9f2da00..99442d6 100644 --- a/source/Component/Container/Container.scss +++ b/source/Component/Container/Container.scss @@ -6,6 +6,7 @@ div.app-container { width: 100%; height: 100%; display: flex; + align-items: stretch; overflow: hidden; box-sizing: border-box; @@ -98,13 +99,24 @@ div.app-container { padding: 10px; } + div.app-panel-root { + width: 100%; + height: calc( 100% - 32px ); + box-sizing: border-box; + display: flex; + justify-content: space-between; + align-items: stretch; + flex-direction: column; + border: .8px solid rgba($color: #000000, $alpha: 0); + } + div.app-panel { width: 100%; height: 100%; box-sizing: border-box; overflow: scroll; -ms-overflow-style: none; - border: .8px solid rgba($color: #000000, $alpha: 0); + flex-shrink: 1; } div.app-panel.hide-scrollbar::-webkit-scrollbar { @@ -128,7 +140,7 @@ div.app-container { background-color: rgba($color: #000000, $alpha: 0); } - div.app-panel.active { + div.app-panel-root.active { border: .8px solid blue !important; } } diff --git a/source/Component/Container/Container.tsx b/source/Component/Container/Container.tsx index 268b35b..4b8981c 100644 --- a/source/Component/Container/Container.tsx +++ b/source/Component/Container/Container.tsx @@ -68,7 +68,7 @@ class Container extends Component { delay={2} key={panelId} > -
{ e.stopPropagation(); @@ -90,16 +90,32 @@ class Container extends Component { }
: null }
this.props.onFocusTab ? this.props.onFocusTab(showPanelId) : undefined} className={[ - "app-panel", - hasActivePanel ? "active" : "", - showPanelInfo?.hidePadding ? "" : "has-padding", - showPanelInfo?.hideScrollBar ? "hide-scrollbar" : "" + "app-panel-root", + hasActivePanel ? "active" : "" ].filter(x => !!x).join(" ")} - draggable={false} + onClick={() => this.props.onFocusTab ? this.props.onFocusTab(showPanelId) : undefined} > - {getPanelById(showPanelId as any)} + {/* 渲染 Command Bar */} + {(() => { + let info = getPanelInfoById(showPanelId as any); + if (info && info.header) { + const Header = info.header; + return
+ } + })()} + + {/* 渲染 Panel 内容 */} +
!!x).join(" ")} + draggable={false} + > + {getPanelById(showPanelId as any)} +
} diff --git a/source/Component/DetailsList/DetailsList.scss b/source/Component/DetailsList/DetailsList.scss index bb9ea24..c48ebe9 100644 --- a/source/Component/DetailsList/DetailsList.scss +++ b/source/Component/DetailsList/DetailsList.scss @@ -37,7 +37,7 @@ div.details-list { div.light.details-list { - div.details-list-item:nth-child(2n) { + div.details-list-item:nth-child(2n-1) { background-color: rgba($lt-bg-color-lvl5-light, .4); } @@ -57,7 +57,7 @@ div.light.details-list { div.dark.details-list { - div.details-list-item:nth-child(2n) { + div.details-list-item:nth-child(2n-1) { background-color: rgba($lt-bg-color-lvl5-dark, .8); } diff --git a/source/Model/Model.ts b/source/Model/Model.ts index 0a4ebb0..95fd3c8 100644 --- a/source/Model/Model.ts +++ b/source/Model/Model.ts @@ -171,9 +171,6 @@ class Model extends Emitter { */ public update(t: number) { - // 清除全部渲染状态 - this.renderer.clean(); - // 第一轮更新 for (let i = 0; i < this.objectPool.length; i++) { let object = this.objectPool[i]; @@ -198,6 +195,16 @@ class Model extends Emitter { } } + this.draw(); + + this.emit("loop", t); + } + + public draw() { + + // 清除全部渲染状态 + this.renderer.clean(); + // 渲染 for (let i = 0; i < this.objectPool.length; i++) { let object = this.objectPool[i]; @@ -214,8 +221,6 @@ class Model extends Emitter { } as any); } } - - this.emit("loop", t); } } diff --git a/source/Panel/ObjectList/ObjectCommand.tsx b/source/Panel/ObjectList/ObjectCommand.tsx new file mode 100644 index 0000000..5af857b --- /dev/null +++ b/source/Panel/ObjectList/ObjectCommand.tsx @@ -0,0 +1,78 @@ +import { BackgroundLevel, FontLevel, Theme } from "@Component/Theme/Theme"; +import { useStatus, IMixinStatusProps } from "../../Context/Status"; +import { Icon } from "@fluentui/react"; +import { Component, ReactNode } from "react"; +import { ObjectID } from "@Model/Renderer"; +import "./ObjectList.scss"; + +@useStatus +class ObjectCommand extends Component { + public render(): ReactNode { + return +
{ + if (this.props.status) { + let allObjSet = new Set(); + this.props.status.model.objectPool.forEach((obj) => { + allObjSet.add(obj.id.toString()); + }) + this.props.status.setFocusObject(allObjSet); + } + }} + > + +
+
{ + if (this.props.status) { + this.props.status.setFocusObject(new Set()); + } + }} + > + +
+
{ + this.props.status ? this.props.status.newGroup() : undefined; + this.props.status ? this.props.status.model.draw() : undefined; + }} + > + +
+
{ + this.props.status ? this.props.status.newRange() : undefined; + this.props.status ? this.props.status.model.draw() : undefined; + }} + > + +
+
{ + if (this.props.status) { + let deleteId: ObjectID[] = []; + this.props.status.focusObject.forEach((obj) => { + deleteId.push(obj); + }) + this.props.status.model.deleteObject(deleteId); + this.props.status.setFocusObject(new Set()); + this.props.status.model.draw(); + } + }} + > + +
+ + } +} + +export { ObjectCommand }; \ No newline at end of file diff --git a/source/Panel/ObjectList/ObjectList.scss b/source/Panel/ObjectList/ObjectList.scss index 1f4cb47..c82464d 100644 --- a/source/Panel/ObjectList/ObjectList.scss +++ b/source/Panel/ObjectList/ObjectList.scss @@ -1,3 +1,5 @@ +@import "../../Component/Theme/Theme.scss"; + div.object-list-color-value { height: calc( 100% - 6px); margin: 3px 0; @@ -8,4 +10,35 @@ div.object-list-color-value { div.object-list { min-height: 100%; +} + +div.object-list-command-bar { + width: 100%; + height: 30px; + flex-shrink: 0; + display: flex; + + div.command-item{ + width: 30px; + height: 100%; + display: flex; + justify-content: center; + align-items: center; + user-select: none; + cursor: pointer; + } +} + +div.dark.object-list-command-bar { + + div.command-item:hover { + background-color: $lt-bg-color-lvl3-dark; + } +} + +div.light.object-list-command-bar { + + div.command-item:hover { + background-color: $lt-bg-color-lvl3-light; + } } \ No newline at end of file diff --git a/source/Panel/ObjectList/ObjectList.tsx b/source/Panel/ObjectList/ObjectList.tsx index 7104cb9..cff972f 100644 --- a/source/Panel/ObjectList/ObjectList.tsx +++ b/source/Panel/ObjectList/ObjectList.tsx @@ -1,12 +1,14 @@ import { Component, ReactNode } from "react"; import { DetailsList } from "@Component/DetailsList/DetailsList"; import { useStatus, IMixinStatusProps } from "@Context/Status"; +import { useSetting, IMixinSettingProps } from "@Context/Setting"; import { Localization } from "@Component/Localization/Localization"; import { ObjectID } from "@Model/Renderer"; import "./ObjectList.scss"; +@useSetting @useStatus -class ObjectList extends Component { +class ObjectList extends Component { private handelChange = () => { this.forceUpdate(); @@ -52,11 +54,17 @@ class ObjectList extends Component { } }))} clickLine={(item) => { + if (this.props.setting) { + this.props.setting.layout.focus("ObjectList"); + } if (this.props.status) { this.props.status.setFocusObject(new Set().add(item.key)); } }} checkBox={(item) => { + if (this.props.setting) { + this.props.setting.layout.focus("ObjectList"); + } if (this.props.status) { if ( this.props.status.focusObject.has(item.key.toString()) || diff --git a/source/Panel/Panel.tsx b/source/Panel/Panel.tsx index 7bda3a7..47a684e 100644 --- a/source/Panel/Panel.tsx +++ b/source/Panel/Panel.tsx @@ -3,11 +3,13 @@ import { Theme } from "@Component/Theme/Theme"; import { Localization } from "@Component/Localization/Localization"; import { RenderView } from "./RenderView/RenderView"; import { ObjectList } from "./ObjectList/ObjectList"; +import { ObjectCommand } from "./ObjectList/ObjectCommand"; interface IPanelInfo { nameKey: string; introKay: string; class: (new (...p: any) => Component) | FunctionComponent; + header?: (new (...p: any) => Component) | FunctionComponent; hidePadding?: boolean; hideScrollBar?: boolean; isDeepDark?: boolean; @@ -26,7 +28,7 @@ PanelInfoMap.set("RenderView", { }); PanelInfoMap.set("ObjectList", { nameKey: "Panel.Title.Object.List.View", introKay: "Panel.Info.Object.List.View", - class: ObjectList, hidePadding: true + class: ObjectList, header: ObjectCommand, hidePadding: true }) function getPanelById(panelId: PanelId): ReactNode {