source/Component/CommandBar/CommandBar.scss

@@ -23,6 +23,10 @@ div.command-bar {
     }
 }
 
+button.ms-Button.command-button.active {
+    color: aqua !important;
+}
+
 div.command-bar.dark button.ms-Button.command-button.active,
 div.command-bar.dark button.ms-Button.command-button:hover {
     background-color: rgba($color: #FFFFFF, $alpha: .2);

source/Component/CommandBar/CommandBar.tsx

@@ -2,40 +2,18 @@ import { BackgroundLevel, Theme } from "@Component/Theme/Theme";
 import { DirectionalHint, IconButton } from "@fluentui/react";
 import { LocalizationTooltipHost } from "../Localization/LocalizationTooltipHost";
 import { useSetting, IMixinSettingProps } from "@Context/Setting";
-import { useStatus, IMixinStatusProps } from "@Context/Status";
 import { AllI18nKeys } from "../Localization/Localization";
 import { Component, ReactNode } from "react";
-import { MouseMod } from "@GLRender/ClassicRenderer";
 import "./CommandBar.scss";
 
 interface ICommandBarProps {
     width: number;
 }
 
-@useStatus
 @useSetting
-class CommandBar extends Component<ICommandBarProps & IMixinSettingProps & IMixinStatusProps> {
+class CommandBar extends Component<ICommandBarProps & IMixinSettingProps> {
-
-    private handelChange = () => {
-        this.forceUpdate();
-    }
-
-    componentDidMount() {
-        if (this.props.status) {
-            this.props.status.on("mouseModChange", this.handelChange)
-        }
-    }
-
-    componentWillUnmount() {
-        if (this.props.status) {
-            this.props.status.off("mouseModChange", this.handelChange)
-        }
-    }
 
     render(): ReactNode {
-
-        const mouseMod = this.props.status?.mouseMod ?? MouseMod.Drag;
-
         return <Theme
             className="command-bar"
             backgroundLevel={BackgroundLevel.Level2}
@@ -49,16 +27,8 @@ class CommandBar extends Component<ICommandBarProps & IMixinSettingProps & IMixi
             <div>
                 {this.getRenderButton({ iconName: "Save", i18NKey: "Command.Bar.Save.Info" })}
                 {this.getRenderButton({ iconName: "Play", i18NKey: "Command.Bar.Play.Info" })}
-                {this.getRenderButton({
+                {this.getRenderButton({ iconName: "HandsFree", i18NKey: "Command.Bar.Drag.Info" })}
-                    iconName: "HandsFree", i18NKey: "Command.Bar.Drag.Info", 
+                {this.getRenderButton({ iconName: "TouchPointer", i18NKey: "Command.Bar.Select.Info" })}
-                    active: mouseMod === MouseMod.Drag,
-                    click: () => this.props.status ? this.props.status.setMouseMod(MouseMod.Drag) : undefined
-                })}
-                {this.getRenderButton({
-                    iconName: "TouchPointer", i18NKey: "Command.Bar.Select.Info",
-                    active: mouseMod === MouseMod.click,
-                    click: () => this.props.status ? this.props.status.setMouseMod(MouseMod.click) : undefined
-                })}
                 {this.getRenderButton({ iconName: "WebAppBuilderFragmentCreate", i18NKey: "Command.Bar.Add.Group.Info" })}
                 {this.getRenderButton({ iconName: "CubeShape", i18NKey: "Command.Bar.Add.Range.Info" })}
                 {this.getRenderButton({ iconName: "StepSharedAdd", i18NKey: "Command.Bar.Add.Behavior.Info" })}
@@ -75,7 +45,6 @@ class CommandBar extends Component<ICommandBarProps & IMixinSettingProps & IMixi
         i18NKey: AllI18nKeys;
         iconName?: string;
         click?: () => void;
-        active?: boolean;
     }): ReactNode {
         return <LocalizationTooltipHost 
             i18nKey={param.i18NKey}
@@ -85,7 +54,7 @@ class CommandBar extends Component<ICommandBarProps & IMixinSettingProps & IMixi
                 style={{ height: this.props.width }}
                 iconProps={{ iconName: param.iconName }}
                 onClick={ param.click }
-                className={"command-button on-end" + (param.active ? " active" : "")}
+                className="command-button on-end"
             />
         </LocalizationTooltipHost>
     }

source/Component/Container/Container.scss

@@ -143,28 +143,13 @@ div.dark.app-container.end-containe {
 		background-color: $lt-bg-color-lvl4-dark;
 		color: rgba($color: #FFFFFF, $alpha: .85);
 	}
-
-    div.app-tab-header-item.deep.tab,
-	div.app-tab-header-item.deep.active,
-	div.app-tab-header-item.deep:hover {
-        background-color: $lt-bg-color-lvl5-dark;
-    }
 	
-    div.app-tab-header-item.tab,
 	div.app-tab-header-item.active {
-        div.border-view::after {
+		div.border-view::after {
-            background-color: $lt-bg-color-lvl4-dark;
+			background-color: $lt-bg-color-lvl4-dark;
-            transition: none;
+			transition: none;
-        }
+		}
-    }
+	}
-    
-    div.app-tab-header-item.deep.tab,
-	div.app-tab-header-item.deep.active {
-        div.border-view::after {
-            background-color: $lt-bg-color-lvl5-dark;
-            transition: none;
-        }
-    }
 
 	div.app-panel::-webkit-scrollbar-thumb {
 		background-color: $lt-bg-color-lvl1-dark;
@@ -178,31 +163,15 @@ div.light.app-container.end-containe {
 	div.app-tab-header-item.active,
 	div.app-tab-header-item:hover {
 		transition: none;
-		background-color: $lt-bg-color-lvl4-light;
 		color: rgba($color: #000000, $alpha: .85);
 	}
 
-    div.app-tab-header-item.deep.tab,
-	div.app-tab-header-item.deep.active,
-	div.app-tab-header-item.deep:hover {
-        background-color: $lt-bg-color-lvl5-light;
-    }
-	
-    div.app-tab-header-item.tab,
 	div.app-tab-header-item.active {
-        div.border-view::after {
+		div.border-view::after {
-            background-color: $lt-bg-color-lvl4-light;
+			background-color: $lt-bg-color-lvl4-light;
-            transition: none;
+			transition: none;
-        }
+		}
-    }
+	}
-    
-    div.app-tab-header-item.deep.tab,
-	div.app-tab-header-item.deep.active {
-        div.border-view::after {
-            background-color: $lt-bg-color-lvl5-light;
-            transition: none;
-        }
-    }
 
 	div.app-panel::-webkit-scrollbar-thumb {
 		background-color: $lt-bg-color-lvl1-light;

source/Component/Container/Container.tsx

@@ -59,7 +59,6 @@ class Container extends Component<IContainerProps> {
 						if (panelId === this.props.focusId) classList.push("active");
 						if (panelId === showPanelId) classList.push("tab");
 						const panelInfo = getPanelInfoById(panelId as any);
-                        if (panelInfo?.isDeepDark) classList.push("deep");
 
 						return <LocalizationTooltipHost
 							i18nKey={panelInfo ? panelInfo.introKay as any : "Panel.Info.Notfound"}
@@ -111,23 +110,23 @@ class Container extends Component<IContainerProps> {
 
 		if (this.props.onScaleChange && this.focusEdgeId !== undefined) {
 			e.preventDefault();
-			let moveDist: number = 0;
+			let mouveDist: number = 0;
 			let rootSize: number = 0;
 			let edgeSize: number = 0;
 			let newSize: number = 0;
 
 			if (this.edgeInfo.direction === LayoutDirection.X) {
-				moveDist = e.clientX - this.edgeInfo.mouseX;
+				mouveDist = e.clientX - this.edgeInfo.mouseX;
 				rootSize = this.edgeInfo.rootWidth;
 				edgeSize = this.edgeInfo.edgeWidth;
-				newSize = edgeSize + moveDist;
+				newSize = edgeSize + mouveDist;
 			}
 
 			if (this.edgeInfo.direction === LayoutDirection.Y) {
-				moveDist = e.clientY - this.edgeInfo.mouseY;
+				mouveDist = e.clientY - this.edgeInfo.mouseY;
 				rootSize = this.edgeInfo.rootHeight;
 				edgeSize = this.edgeInfo.edgeHeight
-				newSize = edgeSize + moveDist;	
+				newSize = edgeSize + mouveDist;	
 			}
 
 			if (newSize < 38) { newSize = 38; }

source/Context/Status.tsx

@@ -3,11 +3,8 @@ 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";
 
-class Status extends Emitter<{
+class Status extends Emitter<{}> {
-    mouseModChange: MouseMod
-}> {
 
     /**
      * 渲染器
@@ -24,20 +21,6 @@ class Status extends Emitter<{
      */
     public model: Model = new Model();
 
-    /**
-     * 鼠标工具状态
-     */
-    public mouseMod: MouseMod = MouseMod.Drag;
-
-    public setMouseMod(mod: MouseMod) {
-        this.mouseMod = mod;
-        if (this.renderer instanceof ClassicRenderer) {
-            this.renderer.mouseMod = mod;
-            this.renderer.setMouseIcon();
-        }
-        this.emit("mouseModChange", mod);
-    }
-
 }
 
 interface IMixinStatusProps {

source/GLRender/ClassicRenderer.ts

@@ -16,11 +16,6 @@ interface IClassicRendererParams {
     }
 }
 
-enum MouseMod {
-    Drag = 1,
-    click = 2
-}
-
 class ClassicRenderer extends BasicRenderer<{}, IClassicRendererParams> {
 
     private basicShader: BasicsShader = undefined as any;
@@ -39,17 +34,6 @@ class ClassicRenderer extends BasicRenderer<{}, IClassicRendererParams> {
      */
     private objectPool = new Map<ObjectID, DisplayObject>();
 
-    public mouseMod: MouseMod = MouseMod.Drag;
-
-    public setMouseIcon() {
-        if (this.mouseMod === MouseMod.Drag) {
-            this.canvas.can.style.cursor = "grab";
-        }
-        if (this.mouseMod === MouseMod.click) {
-            this.canvas.can.style.cursor = "default";
-        }
-    }
-
     public onLoad(): this {
         
         // 自动调节分辨率
@@ -60,36 +44,27 @@ class ClassicRenderer extends BasicRenderer<{}, IClassicRendererParams> {
         this.axisObject = new Axis().bindRenderer(this).bindShader(this.basicShader);
 
         this.canvas.on("mousemove", () => {
-            if (this.mouseMod === MouseMod.Drag) {
+
-                // 相机旋转
+            // 相机旋转
-                if (this.canvas.mouseDown)
+            if (this.canvas.mouseDown)
-                this.camera.ctrlInertia(this.canvas.mouseMotionX, this.canvas.mouseMotionY);
+            this.camera.ctrlInertia(this.canvas.mouseMotionX, this.canvas.mouseMotionY);
-            }
         });
 
         this.canvas.on("mousedown", () => {
-            if (this.mouseMod === MouseMod.Drag) {
+            this.canvas.can.style.cursor = "grabbing"
-                this.canvas.can.style.cursor = "grabbing"
-            } 
         });
 
         this.canvas.on("mouseup", () => {
-            if (this.mouseMod === MouseMod.Drag) {
+            this.canvas.can.style.cursor = "grab"
-                this.canvas.can.style.cursor = "grab"
-            }
         });
 
         this.canvas.on("mousewheel", () => {
-            if (this.mouseMod === MouseMod.Drag) {
+            this.camera.eyeInertia(this.canvas.wheelDelta);
-                this.camera.eyeInertia(this.canvas.wheelDelta);
-            } 
         });
         
         // 运行
         this.run();
 
-        this.setMouseIcon();
-
         // 测试数据传递
         // setInterval(() => {
         //     this.basicGroup.upLoadData(new Array(100 * 3).fill(0).map(() => (Math.random() - .5) * 2));
@@ -293,4 +268,4 @@ class ClassicRenderer extends BasicRenderer<{}, IClassicRendererParams> {
 }
 
 export default ClassicRenderer;
-export { ClassicRenderer, MouseMod };
+export { ClassicRenderer };

source/Panel/Panel.tsx

@@ -9,7 +9,6 @@ interface IPanelInfo {
 	class: (new (...p: any) => Component) | FunctionComponent;
 	hidePadding?: boolean;
 	hideScrollBar?: boolean;
-    isDeepDark?: boolean;
 	option?: Record<string, string>;
 }
 
@@ -19,8 +18,7 @@ type PanelId = ""
 
 const PanelInfoMap = new Map<PanelId, IPanelInfo>();
 PanelInfoMap.set("RenderView", { 
-	nameKey: "Panel.Title.Render.View", introKay: "Panel.Info.Render.View",
+	nameKey: "Panel.Title.Render.View", introKay: "Panel.Info.Render.View", class: RenderView, hidePadding: true, hideScrollBar: true
-    class: RenderView, hidePadding: true, hideScrollBar: true, isDeepDark: true
 });
 
 function getPanelById(panelId: PanelId): ReactNode {