Add checkbox handel func

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);
+    // }
 }

source/Component/DetailsList/DetailsList.tsx

@@ -16,9 +16,13 @@ interface IColumns<D extends IItems, K extends keyof D> {
 
 interface IDetailsListProps {
     items: IItems[];
+    className?: string;
     columns: IColumns<this["items"][number], keyof this["items"][number]>[];
     hideCheckBox?: boolean;
     checkboxClassName?: string;
+    click?: () => void;
+    clickLine?: (item: IItems) => any;
+    checkBox?: (data: IItems) => any;
 }
 
 class DetailsList extends Component<IDetailsListProps> {
@@ -41,13 +45,27 @@ class DetailsList extends Component<IDetailsListProps> {
 
     public render(): ReactNode {
         return <Theme
-            className="details-list"
+            className={"details-list" + (this.props.className ? ` ${this.props.className}` : "")}
+            onClick={this.props.click}
             backgroundLevel={BackgroundLevel.Level4}
             fontLevel={FontLevel.normal}
         >{
             this.props.items.map((item) => {
                 const { checkboxClassName } = this.props;
-                return <div className="details-list-item" key={item.key}>
+                const classList: string[] = ["details-list-item"];
+                if (item.select) {
+                    classList.push("active");
+                }
+                return <div
+                    className={classList.join(" ")}
+                    key={item.key}
+                    onClick={(e) => {
+                        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<IDetailsListProps> {
                         this.props.hideCheckBox ? null :
                         <div 
                             className={"details-list-checkbox" + (checkboxClassName ? ` ${checkboxClassName}` : "")}
+                            onClick={(e) => {
+                                if (this.props.checkBox) {
+                                    e.stopPropagation();
+                                    this.props.checkBox(item);
+                                }
+                            }}
                         >
                             <Icon iconName="CheckMark"></Icon>
                         </div>
@@ -76,4 +100,4 @@ class DetailsList extends Component<IDetailsListProps> {
     }
 }
 
-export { DetailsList };
+export { DetailsList, IItems };

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<ObjectID>
 }> {
 
     public setting: Setting = undefined as any;
@@ -41,6 +43,19 @@ class Status extends Emitter<{
      */
     public model: Model = new Model();
 
+    /**
+     * 焦点对象
+     */
+    public focusObject: Set<ObjectID> = new Set();
+
+    /**
+     * 更新焦点对象
+     */
+    public setFocusObject(focusObject: Set<ObjectID>) {
+        this.focusObject = focusObject;
+        this.emit("focusObjectChange", this.focusObject);
+    }
+
     /**
      * 鼠标工具状态
      */

source/Model/Model.ts

@@ -37,6 +37,14 @@ class Model extends Emitter<ModelEvent> {
      */
     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];
+            }
+        }
+    }
+
     /**
      * 标签列表
      */

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

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%;
 }

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<IMixinStatusProps> {
     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<IMixinStatusProps> {
         }
 
         return <DetailsList
+            className="object-list"
             items={objList.concat([]).map((object => {
                 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<ObjectID>().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<ObjectID>());
+                }
+            }}
             columns={[
                 {
                     key: "color",

source/Panel/RenderView/RenderView.tsx

@@ -28,7 +28,7 @@ class RenderView extends Component<IMixinStatusProps & IMixinSettingProps> {
 
 	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);
 		}