MrKBear/living-together
2
2
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

Add tab deep color param & mouse mod change handel #12

Merged
MrKBear merged 3 commits from dev-mrkbear into master 2022-03-03 17:28:24 +08:00
Conversation 0 Commits 3 Files Changed 7 +136 -33
7 changed files with 136 additions and 33 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
source/Component/CommandBar/CommandBar.scss
View File

@ -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);

39
source/Component/CommandBar/CommandBar.tsx
View File

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

51
source/Component/Container/Container.scss
View File

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

11
source/Component/Container/Container.tsx
View File

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

19
source/Context/Status.tsx
View File

@ -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 {

41
source/GLRender/ClassicRenderer.ts
View File

@ -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.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 };
export { ClassicRenderer, MouseMod };

4
source/Panel/Panel.tsx
View File

@ -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 {