Merge pull request 'Add tab deep color param & mouse mod change handel' (#12) from dev-mrkbear into master

Reviewed-on: http://git.mrkbear.com/MrKBear/living-together/pulls/12

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/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 {
+        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;
@@ -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 {
+        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,6 +59,7 @@ 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"}
@@ -110,23 +111,23 @@ class Container extends Component<IContainerProps> {
 
 		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; }

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 };

source/Panel/Panel.tsx

@@ -9,6 +9,7 @@ interface IPanelInfo {
 	class: (new (...p: any) => Component) | FunctionComponent;
 	hidePadding?: boolean;
 	hideScrollBar?: boolean;
+    isDeepDark?: boolean;
 	option?: Record<string, string>;
 }
 
@@ -18,7 +19,8 @@ type PanelId = ""
 
 const PanelInfoMap = new Map<PanelId, IPanelInfo>();
 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 {