Bind model data into object list

source/Context/Status.tsx

@@ -3,12 +3,25 @@ import { Emitter } from "@Model/Emitter";
 import { Model } from "@Model/Model";
 import { Archive } from "@Model/Archive";
 import { AbstractRenderer } from "@Model/Renderer";
-import ClassicRenderer, { MouseMod } from "@GLRender/ClassicRenderer";
+import { ClassicRenderer, MouseMod } from "@GLRender/ClassicRenderer";
+import { Setting } from "./Setting";
+import { I18N } from "@Component/Localization/Localization";
+
+function randomColor() {
+    return [Math.random(), Math.random(), Math.random(), 1]
+}
 
 class Status extends Emitter<{
     mouseModChange: MouseMod
 }> {
 
+    public setting: Setting = undefined as any;
+
+    /**
+     * 对象命名
+     */
+    public objectNameIndex = 1;
+
     /**
      * 渲染器
      */
@@ -29,6 +42,26 @@ class Status extends Emitter<{
      */
     public mouseMod: MouseMod = MouseMod.Drag;
 
+    public newGroup() {
+        const group = this.model.addGroup();
+        group.color = randomColor();
+        group.displayName = I18N(this.setting.language, "Object.List.New.Group", {
+            id: this.objectNameIndex.toString()
+        });
+        this.objectNameIndex ++;
+        return group;
+    }
+
+    public newRange() {
+        const range = this.model.addRange();
+        range.color = randomColor();
+        range.displayName = I18N(this.setting.language, "Object.List.New.Range", {
+            id: this.objectNameIndex.toString()
+        });
+        this.objectNameIndex ++;
+        return range;
+    }
+
     public setMouseMod(mod: MouseMod) {
         this.mouseMod = mod;
         if (this.renderer instanceof ClassicRenderer) {

source/Localization/EN-US.ts

@@ -19,6 +19,9 @@ const EN_US = {
     "Command.Bar.Add.Tag.Info": "Add label object",
     "Command.Bar.Camera.Info": "Renderer settings",
     "Command.Bar.Setting.Info": "Global Settings",
+    "Object.List.New.Group": "Group object {id}",
+    "Object.List.New.Range": "Range object {id}",
+    "Object.List.No.Data": "There are no objects in the model, click the button to create it",
     "Panel.Title.Notfound": "{id}",
     "Panel.Info.Notfound": "This panel with id {id} can not found!",
     "Panel.Title.Render.View": "Live preview",

source/Localization/ZH-CN.ts

@@ -19,6 +19,9 @@ const ZH_CN = {
     "Command.Bar.Add.Tag.Info": "添加标签对象",
     "Command.Bar.Camera.Info": "渲染器设置",
     "Command.Bar.Setting.Info": "全局设置",
+    "Object.List.New.Group": "组对象 {id}",
+    "Object.List.New.Range": "范围对象 {id}",
+    "Object.List.No.Data": "模型中没有任何对象，点击按钮以创建",
     "Panel.Title.Notfound": "找不到面板: {id}",
     "Panel.Info.Notfound": "这个编号为 {id} 的面板无法找到!",
     "Panel.Title.Render.View": "实时预览",

source/Model/CtrlObject.ts

@@ -7,6 +7,11 @@ import type { ObjectID } from "./Renderer";
  */
 class CtrlObject extends LabelObject {
 
+    /**
+     * 显示名称
+     */
+    public displayName: string = "";
+
     /**
      * 颜色
      */

source/Page/SimulatorWeb/SimulatorWeb.tsx

@@ -36,11 +36,12 @@ class SimulatorWeb extends Component {
         this.status = new Status();
         this.status.renderer = new ClassicRenderer({ className: "canvas" }).onLoad();
         this.status.model.bindRenderer(this.status.renderer);
+        this.status.setting = this.setting;
 
         // 测试代码
         if (true) {
-            let group = this.status.model.addGroup();
-            let range = this.status.model.addRange();
+            let group = this.status.newGroup();
+            let range = this.status.newRange();
             range.color = [.1, .5, .9];
             group.new(100);
             group.color = [.8, .1, .6];

source/Panel/ObjectList/ObjectList.tsx

@@ -1,30 +1,65 @@
 import { Component, ReactNode } from "react";
 import { DetailsList } from "@Component/DetailsList/DetailsList";
+import { useStatus, IMixinStatusProps } from "@Context/Status";
+import { Localization } from "@Component/Localization/Localization";
+
+@useStatus
+class ObjectList extends Component<IMixinStatusProps> {
+
+    private handelChange = () => {
+        this.forceUpdate();
+    }
+
+    public componentDidMount(){
+        if (this.props.status) {
+            this.props.status.model.on("objectChange", this.handelChange);
+        }
+    }
+
+    public componentWillUnmount(){
+        if (this.props.status) {
+            this.props.status.model.off("objectChange", this.handelChange);
+        }
+    }
+
+    private renderList() {
+        const objList = this.props.status?.model.objectPool ?? [];
+
+        if (objList.length <= 0) {
+            return <Localization i18nKey="Object.List.No.Data" style={{
+                padding: "10px",
+                display: "block"
+            }}/>
+        }
 
-class ObjectList extends Component {
-    public render(): ReactNode {
         return <DetailsList
-            items={[
-                {key: "1", name: "Object 01", behaviors: [{name: "B1"}, {name: "B2"}], label: [{name: "L1"}, {name: "L2"}]},
-                {key: "2", name: "New Object", behaviors: [{name: "M1"}], label: [{name: "L1"}]},
-                {key: "3", name: "Range 01", behaviors: [], label: []},
-                {key: "4", name: "Cube", behaviors: [{name: "AA1"}], label: []},
-                {key: "5", name: "Custom Object", behaviors: [{name: "B1"}], label: [{name: "Q1"}, {name: "L2"}]}
-            ]}
+            items={objList.concat([]).map((object => {
+                return {
+                    key: object.id.toString(),
+                    name: object.displayName,
+                    color: object.color,
+                    display: object.display,
+                    update: object.update
+                }
+            }))}
             columns={[
                 {
                     key: "name",
                     render: (name) => <span>{name}</span>
-                }, {
-                    key: "behaviors",
-                    render: (behaviors) => <span>{(behaviors as Record<"name", string>[]).map(r => r.name).join(", ")}</span>
-                }, {
-                    key: "label",
-                    render: (label) => <span>{(label as Record<"name", string>[]).map(r => r.name).join(", ")}</span>
+                // }, {
+                //     key: "behaviors",
+                //     render: (behaviors) => <span>{(behaviors as Record<"name", string>[]).map(r => r.name).join(", ")}</span>
+                // }, {
+                //     key: "label",
+                //     render: (label) => <span>{(label as Record<"name", string>[]).map(r => r.name).join(", ")}</span>
                 }
             ]}
         />
     }
+
+    public render(): ReactNode {
+        return this.renderList();
+    }
 }
 
 export { ObjectList };