Add object list command bar

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

source/Component/Container/Container.tsx

@@ -90,10 +90,25 @@ 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}
+			>
+				{/* 渲染 Command Bar */}
+				{(() => {
+					let info = getPanelInfoById(showPanelId as any);
+					if (info &&  info.header) {
+						const Header = info.header;
+						return <Header></Header>
+					}
+				})()}
+
+				{/* 渲染 Panel 内容 */}
+				<div
 					className={[
 						"app-panel",
-					hasActivePanel ? "active" : "",
 						showPanelInfo?.hidePadding ? "" : "has-padding",
 						showPanelInfo?.hideScrollBar ? "hide-scrollbar" : ""
 					].filter(x => !!x).join(" ")}
@@ -101,6 +116,7 @@ class Container extends Component<IContainerProps> {
 				>
 					{getPanelById(showPanelId as any)}
 				</div>
+			</div>
 		</>
 	}
 

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

source/Model/Model.ts

@@ -171,9 +171,6 @@ 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];
@@ -198,6 +195,16 @@ 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];
@@ -214,8 +221,6 @@ class Model extends Emitter<ModelEvent> {
                 } as any);
             }
         }
-
-        this.emit("loop", t);
     }
 }
 

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

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<IMixinStatusProps> {
+class ObjectList extends Component<IMixinStatusProps & IMixinSettingProps> {
 
     private handelChange = () => {
         this.forceUpdate();
@@ -52,11 +54,17 @@ class ObjectList extends Component<IMixinStatusProps> {
                 }
             }))}
             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()) ||

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 {