source/Component/Container/Container.scss

@@ -6,7 +6,6 @@ div.app-container {
 	width: 100%;
 	height: 100%;
 	display: flex;
-	align-items: stretch;
 	overflow: hidden;
 	box-sizing: border-box;
 
@@ -99,24 +98,13 @@ 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;
-		flex-shrink: 1;
+		border: .8px solid rgba($color: #000000, $alpha: 0);
 	}
 
 	div.app-panel.hide-scrollbar::-webkit-scrollbar {
@@ -140,7 +128,7 @@ div.app-container {
 		background-color: rgba($color: #000000, $alpha: 0);
 	}
 
-	div.app-panel-root.active {
+	div.app-panel.active {
 		border: .8px solid blue !important;
 	}
 }

source/Component/Container/Container.tsx

@@ -90,32 +90,16 @@ class Container extends Component<IContainerProps> {
 				}</div> : null
 			}
 			<div
-				className={[
-					"app-panel-root",
-					hasActivePanel ? "active" : ""
-				].filter(x => !!x).join(" ")}
 				onClick={() => this.props.onFocusTab ? this.props.onFocusTab(showPanelId) : undefined}
+				className={[
+					"app-panel",
+					hasActivePanel ? "active" : "",
+					showPanelInfo?.hidePadding ? "" : "has-padding",
+					showPanelInfo?.hideScrollBar ? "hide-scrollbar" : ""
+				].filter(x => !!x).join(" ")}
+				draggable={false}
 			>
-				{/* 渲染 Command Bar */}
+				{getPanelById(showPanelId as any)}
-				{(() => {
-					let info = getPanelInfoById(showPanelId as any);
-					if (info &&  info.header) {
-						const Header = info.header;
-						return <Header></Header>
-					}
-				})()}
-
-				{/* 渲染 Panel 内容 */}
-				<div
-					className={[
-						"app-panel",
-						showPanelInfo?.hidePadding ? "" : "has-padding",
-						showPanelInfo?.hideScrollBar ? "hide-scrollbar" : ""
-					].filter(x => !!x).join(" ")}
-					draggable={false}
-				>
-					{getPanelById(showPanelId as any)}
-				</div>
 			</div>
 		</>
 	}

source/Component/DetailsList/DetailsList.scss

@@ -19,58 +19,31 @@ div.details-list {
 
         div.details-list-checkbox {
             display: flex;
-            width: 30px;
             align-items: center;
             justify-content: center;
-            opacity: 0;
+            padding: 0 10px;
-        }
-    }
-
-    div.details-list-item.active,
-    div.details-list-item:hover {
-
-        div.details-list-checkbox {
-            opacity: 1;
         }
     }
 }
 
 div.light.details-list {
     
-    div.details-list-item:nth-child(2n-1) {
+    div.details-list-item:nth-child(2n) {
         background-color: rgba($lt-bg-color-lvl5-light, .4);
     }
 
     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-1) {
+    div.details-list-item:nth-child(2n) {
-        background-color: rgba($lt-bg-color-lvl5-dark, .8);
+        background-color: rgba($lt-bg-color-lvl5-dark, .4);
     }
 
     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,13 +16,9 @@ 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> {
@@ -45,27 +41,13 @@ class DetailsList extends Component<IDetailsListProps> {
 
     public render(): ReactNode {
         return <Theme
-            className={"details-list" + (this.props.className ? ` ${this.props.className}` : "")}
+            className="details-list"
-            onClick={this.props.click}
             backgroundLevel={BackgroundLevel.Level4}
             fontLevel={FontLevel.normal}
         >{
             this.props.items.map((item) => {
                 const { checkboxClassName } = this.props;
-                const classList: string[] = ["details-list-item"];
+                return <div className="details-list-item" key={item.key}>
-                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) {
@@ -77,12 +59,6 @@ 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>
@@ -100,4 +76,4 @@ class DetailsList extends Component<IDetailsListProps> {
     }
 }
 
-export { DetailsList, IItems };
+export { DetailsList };

source/Context/Status.tsx

@@ -1,8 +1,7 @@
 import { createContext, Component, FunctionComponent } from "react";
 import { Emitter } from "@Model/Emitter";
-import { Model, ObjectID } from "@Model/Model";
+import { Model } 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";
@@ -17,8 +16,7 @@ function randomColor() {
 }
 
 class Status extends Emitter<{
-    mouseModChange: MouseMod,
+    mouseModChange: MouseMod
-    focusObjectChange: Set<ObjectID>
 }> {
 
     public setting: Setting = undefined as any;
@@ -43,19 +41,6 @@ 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,14 +37,6 @@ 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];
-            }
-        }
-    }
-
     /**
      * 标签列表
      */
@@ -171,6 +163,9 @@ class Model extends Emitter<ModelEvent> {
      */
     public update(t: number) {
 
+        // 清除全部渲染状态
+        this.renderer.clean();
+
         // 第一轮更新
         for (let i = 0; i < this.objectPool.length; i++) {
             let object = this.objectPool[i];
@@ -195,16 +190,6 @@ class Model extends Emitter<ModelEvent> {
             }
         }
 
-        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];
@@ -221,6 +206,8 @@ class Model extends Emitter<ModelEvent> {
                 } as any);
             }
         }
+
+        this.emit("loop", t);
     }
 }
 

source/Page/SimulatorWeb/SimulatorWeb.tsx

@@ -73,7 +73,7 @@ class SimulatorWeb extends Component {
                 },
                 {
                     items: [{
-                        panles: ["ObjectList", "Test tab"]
+                        panles: ["ObjectList"]
                     }, {
                         items: [{panles: ["Label e", "ee"]}, {panles: ["F"]}],
                         layout: LayoutDirection.Y

source/Panel/ObjectList/ObjectCommand.tsx

@@ -1,78 +0,0 @@
-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<IMixinStatusProps> {
-	public render(): ReactNode {
-		return <Theme
-			className="object-list-command-bar"
-			backgroundLevel={BackgroundLevel.Level4}
-			fontLevel={FontLevel.normal}
-		>
-			<div
-				className="command-item"
-				onClick={() => {
-					if (this.props.status) {
-						let allObjSet = new Set<ObjectID>();
-						this.props.status.model.objectPool.forEach((obj) => {
-							allObjSet.add(obj.id.toString());
-						})
-						this.props.status.setFocusObject(allObjSet);
-					}
-				}}
-			>
-				<Icon iconName="CheckMark"></Icon>
-			</div>
-			<div
-				className="command-item"
-				onClick={() => {
-					if (this.props.status) {
-						this.props.status.setFocusObject(new Set<ObjectID>());
-					}
-				}}
-			>
-				<Icon iconName="CalculatorMultiply"></Icon>
-			</div>
-			<div
-				className="command-item"
-				onClick={() => {
-					this.props.status ? this.props.status.newGroup() : undefined;
-					this.props.status ? this.props.status.model.draw() : undefined;
-				}}
-			>
-				<Icon iconName="WebAppBuilderFragmentCreate"></Icon>
-			</div>
-			<div
-				className="command-item"
-				onClick={() => {
-					this.props.status ? this.props.status.newRange() : undefined;
-					this.props.status ? this.props.status.model.draw() : undefined;
-				}}
-			>
-				<Icon iconName="CubeShape"></Icon>
-			</div>
-			<div
-				className="command-item"
-				onClick={() => {
-					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<ObjectID>());
-						this.props.status.model.draw();
-					}
-				}}
-			>
-				<Icon iconName="Delete"></Icon>
-			</div>
-		</Theme>
-	}
-}
-
-export { ObjectCommand };

source/Panel/ObjectList/ObjectList.scss

@@ -1,5 +1,3 @@
-@import "../../Component/Theme/Theme.scss";
-
 div.object-list-color-value {
     height: calc( 100% - 6px);
     margin: 3px 0;
@@ -7,38 +5,3 @@ div.object-list-color-value {
     border-radius: 1000px;
     width: 3px;
 }
-
-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;
-    }
-}

source/Panel/ObjectList/ObjectList.tsx

@@ -1,14 +1,11 @@
 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<IMixinStatusProps & IMixinSettingProps> {
+class ObjectList extends Component<IMixinStatusProps> {
 
     private handelChange = () => {
         this.forceUpdate();
@@ -17,14 +14,12 @@ class ObjectList extends Component<IMixinStatusProps & IMixinSettingProps> {
     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);
         }
     }
 
@@ -39,50 +34,15 @@ class ObjectList extends Component<IMixinStatusProps & IMixinSettingProps> {
         }
 
         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.setting) {
-                    this.props.setting.layout.focus("ObjectList");
-                }
-                if (this.props.status) {
-                    this.props.status.setFocusObject(new Set<ObjectID>().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()) ||
-                        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/Panel.tsx

@@ -3,13 +3,11 @@ 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;
@@ -28,7 +26,7 @@ PanelInfoMap.set("RenderView", {
 });
 PanelInfoMap.set("ObjectList", {
     nameKey: "Panel.Title.Object.List.View", introKay: "Panel.Info.Object.List.View",
-    class: ObjectList, header: ObjectCommand, hidePadding: true
+    class: ObjectList, hidePadding: true
 })
 
 function getPanelById(panelId: PanelId): ReactNode {

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