diff --git a/source/Component/DetailsList/DetailsList.scss b/source/Component/DetailsList/DetailsList.scss index 011913f..bb9ea24 100644 --- a/source/Component/DetailsList/DetailsList.scss +++ b/source/Component/DetailsList/DetailsList.scss @@ -19,9 +19,18 @@ div.details-list { div.details-list-checkbox { display: flex; + width: 30px; align-items: center; justify-content: center; - padding: 0 10px; + opacity: 0; + } + } + + div.details-list-item.active, + div.details-list-item:hover { + + div.details-list-checkbox { + opacity: 1; } } } @@ -35,15 +44,33 @@ div.light.details-list { div.details-list-item:hover { background-color: $lt-bg-color-lvl3-light; } + + div.details-list-item.active { + background-color: $lt-bg-color-lvl2-light; + color: rgba(0, 0, 0, 0.95); + } + + // div.details-list-checkbox:hover { + // background-color: rgba($lt-bg-color-lvl1-light, .4); + // } } div.dark.details-list { div.details-list-item:nth-child(2n) { - background-color: rgba($lt-bg-color-lvl5-dark, .4); + background-color: rgba($lt-bg-color-lvl5-dark, .8); } div.details-list-item:hover { background-color: $lt-bg-color-lvl3-dark; } + + div.details-list-item.active { + background-color: $lt-bg-color-lvl2-dark; + color: rgba(255, 255, 255, 0.85); + } + + // div.details-list-checkbox:hover { + // background-color: rgba($lt-bg-color-lvl1-dark, .8); + // } } \ No newline at end of file diff --git a/source/Component/DetailsList/DetailsList.tsx b/source/Component/DetailsList/DetailsList.tsx index a40eb0d..d50e2ca 100644 --- a/source/Component/DetailsList/DetailsList.tsx +++ b/source/Component/DetailsList/DetailsList.tsx @@ -16,9 +16,13 @@ interface IColumns { interface IDetailsListProps { items: IItems[]; + className?: string; columns: IColumns[]; hideCheckBox?: boolean; checkboxClassName?: string; + click?: () => void; + clickLine?: (item: IItems) => any; + checkBox?: (data: IItems) => any; } class DetailsList extends Component { @@ -41,13 +45,27 @@ class DetailsList extends Component { public render(): ReactNode { return { this.props.items.map((item) => { const { checkboxClassName } = this.props; - return
+ const classList: string[] = ["details-list-item"]; + if (item.select) { + classList.push("active"); + } + return
{ + if (this.props.clickLine) { + e.stopPropagation(); + this.props.clickLine(item); + } + }} + > { this.props.columns.map((column) => { if (column.beforeCheckbox) { @@ -59,6 +77,12 @@ class DetailsList extends Component { this.props.hideCheckBox ? null :
{ + if (this.props.checkBox) { + e.stopPropagation(); + this.props.checkBox(item); + } + }} >
@@ -76,4 +100,4 @@ class DetailsList extends Component { } } -export { DetailsList }; \ No newline at end of file +export { DetailsList, IItems }; \ No newline at end of file diff --git a/source/Context/Status.tsx b/source/Context/Status.tsx index 0920a22..cea98b7 100644 --- a/source/Context/Status.tsx +++ b/source/Context/Status.tsx @@ -1,7 +1,8 @@ import { createContext, Component, FunctionComponent } from "react"; import { Emitter } from "@Model/Emitter"; -import { Model } from "@Model/Model"; +import { Model, ObjectID } from "@Model/Model"; import { Archive } from "@Model/Archive"; +import { CtrlObject } from "@Model/CtrlObject"; import { AbstractRenderer } from "@Model/Renderer"; import { ClassicRenderer, MouseMod } from "@GLRender/ClassicRenderer"; import { Setting } from "./Setting"; @@ -16,7 +17,8 @@ function randomColor() { } class Status extends Emitter<{ - mouseModChange: MouseMod + mouseModChange: MouseMod, + focusObjectChange: Set }> { public setting: Setting = undefined as any; @@ -41,6 +43,19 @@ class Status extends Emitter<{ */ public model: Model = new Model(); + /** + * 焦点对象 + */ + public focusObject: Set = new Set(); + + /** + * 更新焦点对象 + */ + public setFocusObject(focusObject: Set) { + this.focusObject = focusObject; + this.emit("focusObjectChange", this.focusObject); + } + /** * 鼠标工具状态 */ diff --git a/source/Model/Model.ts b/source/Model/Model.ts index 22dcf17..0a4ebb0 100644 --- a/source/Model/Model.ts +++ b/source/Model/Model.ts @@ -37,6 +37,14 @@ class Model extends Emitter { */ public objectPool: CtrlObject[] = []; + public getObjectById(id: ObjectID): CtrlObject | undefined { + for (let i = 0; i < this.objectPool.length; i++) { + if (this.objectPool[i].id === id) { + return this.objectPool[i]; + } + } + } + /** * 标签列表 */ diff --git a/source/Page/SimulatorWeb/SimulatorWeb.tsx b/source/Page/SimulatorWeb/SimulatorWeb.tsx index 72fae27..3c14aa1 100644 --- a/source/Page/SimulatorWeb/SimulatorWeb.tsx +++ b/source/Page/SimulatorWeb/SimulatorWeb.tsx @@ -73,7 +73,7 @@ class SimulatorWeb extends Component { }, { items: [{ - panles: ["ObjectList"] + panles: ["ObjectList", "Test tab"] }, { items: [{panles: ["Label e", "ee"]}, {panles: ["F"]}], layout: LayoutDirection.Y diff --git a/source/Panel/ObjectList/ObjectList.scss b/source/Panel/ObjectList/ObjectList.scss index 9879ba3..1f4cb47 100644 --- a/source/Panel/ObjectList/ObjectList.scss +++ b/source/Panel/ObjectList/ObjectList.scss @@ -4,4 +4,8 @@ div.object-list-color-value { margin-left: 3px; border-radius: 1000px; width: 3px; +} + +div.object-list { + min-height: 100%; } \ No newline at end of file diff --git a/source/Panel/ObjectList/ObjectList.tsx b/source/Panel/ObjectList/ObjectList.tsx index aa0bd8b..7104cb9 100644 --- a/source/Panel/ObjectList/ObjectList.tsx +++ b/source/Panel/ObjectList/ObjectList.tsx @@ -2,6 +2,7 @@ import { Component, ReactNode } from "react"; import { DetailsList } from "@Component/DetailsList/DetailsList"; import { useStatus, IMixinStatusProps } from "@Context/Status"; import { Localization } from "@Component/Localization/Localization"; +import { ObjectID } from "@Model/Renderer"; import "./ObjectList.scss"; @useStatus @@ -14,12 +15,14 @@ class ObjectList extends Component { public componentDidMount(){ if (this.props.status) { this.props.status.model.on("objectChange", this.handelChange); + this.props.status.on("focusObjectChange", this.handelChange); } } public componentWillUnmount(){ if (this.props.status) { this.props.status.model.off("objectChange", this.handelChange); + this.props.status.off("focusObjectChange", this.handelChange); } } @@ -34,15 +37,44 @@ class ObjectList extends Component { } return { return { key: object.id.toString(), name: object.displayName, color: object.color, display: object.display, - update: object.update + update: object.update, + select: this.props.status ? + this.props.status.focusObject.has(object.id.toString()) || + this.props.status.focusObject.has(object.id) : + false } }))} + clickLine={(item) => { + if (this.props.status) { + this.props.status.setFocusObject(new Set().add(item.key)); + } + }} + checkBox={(item) => { + if (this.props.status) { + if ( + this.props.status.focusObject.has(item.key.toString()) || + this.props.status.focusObject.has(item.key) + ) { + this.props.status.focusObject.delete(item.key); + this.props.status.focusObject.delete(item.key.toString()); + this.props.status.setFocusObject(this.props.status.focusObject); + } else { + this.props.status.setFocusObject(this.props.status.focusObject.add(item.key)); + } + } + }} + click={() => { + if (this.props.status) { + this.props.status.setFocusObject(new Set()); + } + }} columns={[ { key: "color", diff --git a/source/Panel/RenderView/RenderView.tsx b/source/Panel/RenderView/RenderView.tsx index 8bef356..e61c491 100644 --- a/source/Panel/RenderView/RenderView.tsx +++ b/source/Panel/RenderView/RenderView.tsx @@ -28,7 +28,7 @@ class RenderView extends Component { public componentDidMount() { let div = this.rootEle.current; - console.log(div, div?.childNodes, this.props.status, this.props.status?.renderer.dom) + // 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); }