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({
-                {this.getRenderButton({ iconName: "TouchPointer", i18NKey: "Command.Bar.Select.Info" })}
+                    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>
     }

source/Context/Status.tsx

@@ -3,8 +3,11 @@ 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
+}> {
 
     /**
      * 渲染器
@@ -21,6 +24,20 @@ 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,6 +16,11 @@ interface IClassicRendererParams {
     }
 }
 
+enum MouseMod {
+    Drag = 1,
+    click = 2
+}
+
 class ClassicRenderer extends BasicRenderer<{}, IClassicRendererParams> {
 
     private basicShader: BasicsShader = undefined as any;
@@ -34,6 +39,17 @@ 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 {
         
         // 自动调节分辨率
@@ -44,27 +60,36 @@ 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", () => {
-            this.canvas.can.style.cursor = "grabbing"
+            if (this.mouseMod === MouseMod.Drag) {
+                this.canvas.can.style.cursor = "grabbing"
+            } 
         });
 
         this.canvas.on("mouseup", () => {
-            this.canvas.can.style.cursor = "grab"
+            if (this.mouseMod === MouseMod.Drag) {
+                this.canvas.can.style.cursor = "grab"
+            }
         });
 
         this.canvas.on("mousewheel", () => {
-            this.camera.eyeInertia(this.canvas.wheelDelta);
+            if (this.mouseMod === MouseMod.Drag) {
+                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));
@@ -268,4 +293,4 @@ class ClassicRenderer extends BasicRenderer<{}, IClassicRendererParams> {
 }
 
 export default ClassicRenderer;
-export { ClassicRenderer };
+export { ClassicRenderer, MouseMod };