diff --git a/source/Component/CommandBar/CommandBar.scss b/source/Component/CommandBar/CommandBar.scss index 2024c22..dc36908 100644 --- a/source/Component/CommandBar/CommandBar.scss +++ b/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); diff --git a/source/Component/CommandBar/CommandBar.tsx b/source/Component/CommandBar/CommandBar.tsx index bc2e4b7..bd6c5eb 100644 --- a/source/Component/CommandBar/CommandBar.tsx +++ b/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 { +class CommandBar extends Component { + + 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 {
{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 { i18NKey: AllI18nKeys; iconName?: string; click?: () => void; + active?: boolean; }): ReactNode { return { 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" : "")} /> } diff --git a/source/Context/Status.tsx b/source/Context/Status.tsx index f7a034f..90d0ead 100644 --- a/source/Context/Status.tsx +++ b/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 { diff --git a/source/GLRender/ClassicRenderer.ts b/source/GLRender/ClassicRenderer.ts index 6d310ea..29dc2b7 100644 --- a/source/GLRender/ClassicRenderer.ts +++ b/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(); + 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.canvas.mouseDown) - this.camera.ctrlInertia(this.canvas.mouseMotionX, this.canvas.mouseMotionY); + if (this.mouseMod === MouseMod.Drag) { + // 相机旋转 + if (this.canvas.mouseDown) + 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 }; \ No newline at end of file +export { ClassicRenderer, MouseMod }; \ No newline at end of file