From 76e292a0d3c26a96ed0d6f982aaf7113395b11e4 Mon Sep 17 00:00:00 2001 From: MrKBear Date: Thu, 3 Mar 2022 15:09:27 +0800 Subject: [PATCH 1/2] Add mouse mod change handel --- source/Component/CommandBar/CommandBar.scss | 4 -- source/Component/CommandBar/CommandBar.tsx | 39 ++++++++++++++++++-- source/Context/Status.tsx | 19 +++++++++- source/GLRender/ClassicRenderer.ts | 41 +++++++++++++++++---- 4 files changed, 86 insertions(+), 17 deletions(-) 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 -- 2.45.2 From df48d3a9e3ed0932023f40c53440076b9c097279 Mon Sep 17 00:00:00 2001 From: MrKBear Date: Thu, 3 Mar 2022 17:25:50 +0800 Subject: [PATCH 2/2] Add tab deep color param --- source/Component/Container/Container.scss | 51 ++++++++++++++++++----- source/Component/Container/Container.tsx | 11 ++--- source/Panel/Panel.tsx | 4 +- 3 files changed, 50 insertions(+), 16 deletions(-) diff --git a/source/Component/Container/Container.scss b/source/Component/Container/Container.scss index 2714068..9f2da00 100644 --- a/source/Component/Container/Container.scss +++ b/source/Component/Container/Container.scss @@ -143,13 +143,28 @@ 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 { - background-color: $lt-bg-color-lvl4-dark; - transition: none; - } - } + div.border-view::after { + background-color: $lt-bg-color-lvl4-dark; + 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; @@ -163,15 +178,31 @@ 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 { - background-color: $lt-bg-color-lvl4-light; - transition: none; - } - } + div.border-view::after { + background-color: $lt-bg-color-lvl4-light; + 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; diff --git a/source/Component/Container/Container.tsx b/source/Component/Container/Container.tsx index 40d8d35..268b35b 100644 --- a/source/Component/Container/Container.tsx +++ b/source/Component/Container/Container.tsx @@ -59,6 +59,7 @@ class Container extends Component { 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 { if (this.props.onScaleChange && this.focusEdgeId !== undefined) { e.preventDefault(); - let mouveDist: number = 0; + let moveDist: number = 0; let rootSize: number = 0; let edgeSize: number = 0; let newSize: number = 0; if (this.edgeInfo.direction === LayoutDirection.X) { - mouveDist = e.clientX - this.edgeInfo.mouseX; + moveDist = e.clientX - this.edgeInfo.mouseX; rootSize = this.edgeInfo.rootWidth; edgeSize = this.edgeInfo.edgeWidth; - newSize = edgeSize + mouveDist; + newSize = edgeSize + moveDist; } if (this.edgeInfo.direction === LayoutDirection.Y) { - mouveDist = e.clientY - this.edgeInfo.mouseY; + moveDist = e.clientY - this.edgeInfo.mouseY; rootSize = this.edgeInfo.rootHeight; edgeSize = this.edgeInfo.edgeHeight - newSize = edgeSize + mouveDist; + newSize = edgeSize + moveDist; } if (newSize < 38) { newSize = 38; } diff --git a/source/Panel/Panel.tsx b/source/Panel/Panel.tsx index 8defca0..b9605f0 100644 --- a/source/Panel/Panel.tsx +++ b/source/Panel/Panel.tsx @@ -9,6 +9,7 @@ interface IPanelInfo { class: (new (...p: any) => Component) | FunctionComponent; hidePadding?: boolean; hideScrollBar?: boolean; + isDeepDark?: boolean; option?: Record; } @@ -18,7 +19,8 @@ type PanelId = "" const PanelInfoMap = new Map(); PanelInfoMap.set("RenderView", { - nameKey: "Panel.Title.Render.View", introKay: "Panel.Info.Render.View", class: RenderView, hidePadding: true, hideScrollBar: true + nameKey: "Panel.Title.Render.View", introKay: "Panel.Info.Render.View", + class: RenderView, hidePadding: true, hideScrollBar: true, isDeepDark: true }); function getPanelById(panelId: PanelId): ReactNode { -- 2.45.2