Add mouse mod change handel

source/Component/CommandBar/CommandBar.scss

@@ -23,10 +23,6 @@ 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,18 +2,40 @@ 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> {
+class CommandBar extends Component<ICommandBarProps & IMixinSettingProps & IMixinStatusProps> {
+
+    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}
@@ -27,8 +49,16 @@ class CommandBar extends Component<ICommandBarProps & IMixinSettingProps> {
             <div>
                 {this.getRenderButton({ iconName: "Save", i18NKey: "Command.Bar.Save.Info" })}
                 {this.getRenderButton({ iconName: "Play", i18NKey: "Command.Bar.Play.Info" })}
-                {this.getRenderButton({ iconName: "HandsFree", i18NKey: "Command.Bar.Drag.Info" })}
-                {this.getRenderButton({ iconName: "TouchPointer", i18NKey: "Command.Bar.Select.Info" })}
+                {this.getRenderButton({
+                    iconName: "HandsFree", i18NKey: "Command.Bar.Drag.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" })}
@@ -45,6 +75,7 @@ class CommandBar extends Component<ICommandBarProps & IMixinSettingProps> {
         i18NKey: AllI18nKeys;
         iconName?: string;
         click?: () => void;
+        active?: boolean;
     }): ReactNode {
         return <LocalizationTooltipHost 
             i18nKey={param.i18NKey}
@@ -54,7 +85,7 @@ class CommandBar extends Component<ICommandBarProps & IMixinSettingProps> {
                 style={{ height: this.props.width }}
                 iconProps={{ iconName: param.iconName }}
                 onClick={ param.click }
-                className="command-button on-end"
+                className={"command-button on-end" + (param.active ? " active" : "")}
             />
         </LocalizationTooltipHost>
     }