Public
/
WebCAD
mirror of https://gitee.com/cf-fz/WebCAD.git
7
1
Fork 0
Code Issues Projects Releases Wiki Activity

!1743 优化:使用快捷键切换坐标系命令时，改变UI状态

Browse Source 
Merge pull request !1743 from 林三/switch_axis_change
pull/1760/MERGE
林三 3 years ago committed by ChenX
parent 2fc4bff5a3
commit e7edd39a3d
4 changed files with 66 additions and 63 deletions
Show Stats Download Patch File Download Diff File

2
src/Editor/TranstrolControl/Command_SetGizmoMode.ts
Unescape View File

@ -1,5 +1,6 @@
import { app } from "../../ApplicationServices/Application";
import { Command } from "../CommandMachine";
import { userConfig } from "../UserConfig";
import { TransMode } from './TransformServices';
@ -8,6 +9,7 @@ export class Command_SetGizmoMode implements Command
constructor(private mode: TransMode) { }
async exec()
{
userConfig.curMode = this.mode;
app.Editor.TransCtrl.Mode = this.mode;
}
}

2
src/Editor/UserConfig.ts
Unescape View File

@ -125,6 +125,8 @@ export class UserConfig implements IConfigStore
@observable openLightConfig: boolean = false; //画灯光前是否打开配置
@observable oneKeyOpenLight: boolean = false; //一键开关灯光（通电/不通电）
@observable isShowLightShadow = false; //一键开关灯光阴影（除了太阳光）
@observable curMode = 3; //模型坐标轴类型
constructor()
{
this.Init();

11
src/UI/Components/AxisMode/AxisMode.less
Unescape View File

@ -16,19 +16,10 @@
border-radius: 50%;
&:hover{
background-color: transparent;
>span
{
svg{
color: #1890ff;
}
}
>span
{
color: white;
}
>span[ActiveAxisMode]
{
color:#1890ff ;
}
}
}

114
src/UI/Components/AxisMode/AxisMode.tsx
Unescape View File

@ -1,46 +1,48 @@
import { Button, Popover } from '@blueprintjs/core';
import React, { Component, createRef, RefObject } from 'react';
import { Button, Icon, Popover } from '@blueprintjs/core';
import { observable } from 'mobx';
import { observer } from 'mobx-react';
import React, { Component } from 'react';
import { app } from '../../../ApplicationServices/Application';
import { SpaceCSType, TransMode } from '../../../Editor/TranstrolControl/TransformServices';
import { userConfig } from '../../../Editor/UserConfig';
import './AxisMode.less';
export const spanColor = "#1890ff";
@observer
export default class AxisMode extends Component
{
switchAxisModeDiv: RefObject<HTMLDivElement> = createRef<HTMLDivElement>();
ChangeAxisMode = (e: React.MouseEvent, mode: TransMode) =>
@observable _SpaceCSType: SpaceCSType = SpaceCSType.Local;
_ChangeAxisMode = (e: React.MouseEvent, mode: TransMode) =>
{
userConfig.curMode = mode;
app.Editor.TransCtrl.Mode = mode;
this.switchAxisModeDiv.current!.childNodes.forEach(el =>
{
let icon = (el as HTMLSpanElement).getElementsByClassName('bp3-icon')[0] as HTMLSpanElement;
icon.removeAttribute('ActiveAxisMode');
});
(e.currentTarget.getElementsByClassName('bp3-icon')[0] as HTMLSpanElement).setAttribute('ActiveAxisMode', '');
};
componentDidMount()
_ChangeSpaceCSType(spaceCSType: SpaceCSType)
{
(this.switchAxisModeDiv.current!.childNodes[0] as HTMLElement)
.getElementsByClassName('bp3-icon')[0].setAttribute('ActiveAxisMode', '');
app.Editor.TransCtrl.SpaceCSType = spaceCSType;
this._SpaceCSType = spaceCSType;
}
render()
{
return (
<div className='AxisModeWrapper'>
<div className='SwitchAxisMode' ref={this.switchAxisModeDiv}>
<div className='SwitchAxisMode'>
<Popover content={
<div className='AxisModeToolTip'>
<p>选择对象Objecet（Q）</p>
</div>
} minimal interactionKind='hover' placement='bottom'>
<Button
icon='select'
minimal
onClick={(e) =>
{
this.ChangeAxisMode(e, TransMode.OCS);
}}
/>
onClick={(e) => { this._ChangeAxisMode(e, TransMode.OCS); }}
>
<Icon
icon='select'
style={{ color: userConfig.curMode === TransMode.OCS ? spanColor : "#FFFFFF" }}
/>
</Button>
</Popover>
<Popover content={
@ -50,13 +52,14 @@ export default class AxisMode extends Component
</div>
} minimal interactionKind='hover' placement='bottom'>
<Button
icon='move'
minimal
onClick={(e) =>
{
this.ChangeAxisMode(e, TransMode.Move);
}}
/>
onClick={(e) => { this._ChangeAxisMode(e, TransMode.Move); }}
>
<Icon
icon='move'
style={{ color: userConfig.curMode === TransMode.Move ? spanColor : "#FFFFFF" }}
/>
</Button>
</Popover>
<Popover content={
@ -66,13 +69,14 @@ export default class AxisMode extends Component
</div>
} minimal interactionKind='hover' placement='bottom'>
<Button
icon='refresh'
minimal
onClick={(e) =>
{
this.ChangeAxisMode(e, TransMode.Rotate);
}}
/>
onClick={(e) => { this._ChangeAxisMode(e, TransMode.Rotate); }}
>
<Icon
icon='refresh'
style={{ color: userConfig.curMode === TransMode.Rotate ? spanColor : "#FFFFFF" }}
/>
</Button>
</Popover>
<Popover content={
@ -82,13 +86,14 @@ export default class AxisMode extends Component
</div>
} minimal interactionKind='hover' placement='bottom'>
<Button
icon='share'
minimal
onClick={(e) =>
{
this.ChangeAxisMode(e, TransMode.Scale);
}}
/>
onClick={(e) => { this._ChangeAxisMode(e, TransMode.Scale); }}
>
<Icon
icon='share'
style={{ color: userConfig.curMode === TransMode.Scale ? spanColor : "#FFFFFF" }}
/>
</Button>
</Popover>
</div>
<div className='SwitchAxisMode'>
@ -99,23 +104,26 @@ export default class AxisMode extends Component
</div>
} minimal interactionKind='hover' placement='bottom'>
{
app.Editor.TransCtrl.SpaceCSType === SpaceCSType.World
? <Button
icon='globe-network'
this._SpaceCSType === SpaceCSType.World ?
<Button
minimal
onClick={() =>
{
app.Editor.TransCtrl.SpaceCSType = SpaceCSType.Local;
}}
/>
: <Button
icon='flow-review-branch'
onClick={() => { this._ChangeSpaceCSType(SpaceCSType.Local); }}
>
<Icon
icon='globe-network'
style={{ color: "#FFFFFF" }}
/>
</Button>
:
<Button
minimal
onClick={() =>
{
app.Editor.TransCtrl.SpaceCSType = SpaceCSType.World;
}}
/>
onClick={() => { this._ChangeSpaceCSType(SpaceCSType.World); }}
>
<Icon
icon='flow-review-branch'
style={{ color: "#FFFFFF" }}
/>
</Button>
}
</Popover>
</div>

Write Preview
Loading…
Cancel
Save