|
|
|
@ -1,27 +1,25 @@
|
|
|
|
|
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';
|
|
|
|
|
|
|
|
|
|
import AxisModeStore from './AxisModeStore';
|
|
|
|
|
export const spanColor = "#1890ff";
|
|
|
|
|
|
|
|
|
|
@observer
|
|
|
|
|
export default class AxisMode extends Component
|
|
|
|
|
{
|
|
|
|
|
@observable _SpaceCSType: SpaceCSType = SpaceCSType.Local;
|
|
|
|
|
axisStore: AxisModeStore = AxisModeStore.GetSingleInstance();
|
|
|
|
|
_ChangeAxisMode = (e: React.MouseEvent, mode: TransMode) =>
|
|
|
|
|
{
|
|
|
|
|
userConfig.curMode = mode;
|
|
|
|
|
this.axisStore.curMode = mode;
|
|
|
|
|
app.Editor.TransCtrl.Mode = mode;
|
|
|
|
|
};
|
|
|
|
|
_ChangeSpaceCSType(spaceCSType: SpaceCSType)
|
|
|
|
|
{
|
|
|
|
|
app.Editor.TransCtrl.SpaceCSType = spaceCSType;
|
|
|
|
|
this._SpaceCSType = spaceCSType;
|
|
|
|
|
this.axisStore._SpaceCSType = spaceCSType;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
render()
|
|
|
|
@ -31,67 +29,75 @@ export default class AxisMode extends Component
|
|
|
|
|
<div className='SwitchAxisMode'>
|
|
|
|
|
<Popover content={
|
|
|
|
|
<div className='AxisModeToolTip'>
|
|
|
|
|
<p>选择对象Objecet(Q)</p>
|
|
|
|
|
<p>选择对象模式({this.axisStore._AxisDisable})</p>
|
|
|
|
|
</div>
|
|
|
|
|
} minimal interactionKind='hover' placement='bottom'>
|
|
|
|
|
} minimal interactionKind='hover' placement='bottom'
|
|
|
|
|
onOpening={this.axisStore.SyncHotkey}
|
|
|
|
|
>
|
|
|
|
|
<Button
|
|
|
|
|
minimal
|
|
|
|
|
onClick={(e) => { this._ChangeAxisMode(e, TransMode.OCS); }}
|
|
|
|
|
>
|
|
|
|
|
<Icon
|
|
|
|
|
icon='select'
|
|
|
|
|
style={{ color: userConfig.curMode === TransMode.OCS ? spanColor : "#FFFFFF" }}
|
|
|
|
|
style={{ color: this.axisStore.curMode === TransMode.OCS ? spanColor : "#FFFFFF" }}
|
|
|
|
|
/>
|
|
|
|
|
</Button>
|
|
|
|
|
</Popover>
|
|
|
|
|
|
|
|
|
|
<Popover content={
|
|
|
|
|
<div className='AxisModeToolTip'>
|
|
|
|
|
<p>选择并移动对象(W)</p>
|
|
|
|
|
长按(Ctrl + Alt)获取更多信息
|
|
|
|
|
<p>选择并移动对象({this.axisStore._AxisTranslate_Hotkey})</p>
|
|
|
|
|
{/* 长按(Ctrl + Alt)获取更多信息 */}
|
|
|
|
|
</div>
|
|
|
|
|
} minimal interactionKind='hover' placement='bottom'>
|
|
|
|
|
} minimal interactionKind='hover' placement='bottom'
|
|
|
|
|
onOpening={this.axisStore.SyncHotkey}
|
|
|
|
|
>
|
|
|
|
|
<Button
|
|
|
|
|
minimal
|
|
|
|
|
onClick={(e) => { this._ChangeAxisMode(e, TransMode.Move); }}
|
|
|
|
|
>
|
|
|
|
|
<Icon
|
|
|
|
|
icon='move'
|
|
|
|
|
style={{ color: userConfig.curMode === TransMode.Move ? spanColor : "#FFFFFF" }}
|
|
|
|
|
style={{ color: this.axisStore.curMode === TransMode.Move ? spanColor : "#FFFFFF" }}
|
|
|
|
|
/>
|
|
|
|
|
</Button>
|
|
|
|
|
</Popover>
|
|
|
|
|
|
|
|
|
|
<Popover content={
|
|
|
|
|
<div className='AxisModeToolTip'>
|
|
|
|
|
<p>选择并旋转对象(E)</p>
|
|
|
|
|
长按(Ctrl + Alt)获取更多信息
|
|
|
|
|
<p>选择并旋转对象({this.axisStore._AxisRotate_Hotkey})</p>
|
|
|
|
|
{/* 长按(Ctrl + Alt)获取更多信息 */}
|
|
|
|
|
</div>
|
|
|
|
|
} minimal interactionKind='hover' placement='bottom'>
|
|
|
|
|
} minimal interactionKind='hover' placement='bottom'
|
|
|
|
|
onOpening={this.axisStore.SyncHotkey}
|
|
|
|
|
>
|
|
|
|
|
<Button
|
|
|
|
|
minimal
|
|
|
|
|
onClick={(e) => { this._ChangeAxisMode(e, TransMode.Rotate); }}
|
|
|
|
|
>
|
|
|
|
|
<Icon
|
|
|
|
|
icon='refresh'
|
|
|
|
|
style={{ color: userConfig.curMode === TransMode.Rotate ? spanColor : "#FFFFFF" }}
|
|
|
|
|
style={{ color: this.axisStore.curMode === TransMode.Rotate ? spanColor : "#FFFFFF" }}
|
|
|
|
|
/>
|
|
|
|
|
</Button>
|
|
|
|
|
</Popover>
|
|
|
|
|
|
|
|
|
|
<Popover content={
|
|
|
|
|
<div className='AxisModeToolTip'>
|
|
|
|
|
<p>旋转并缩放对象(R)</p>
|
|
|
|
|
长按(Ctrl + Alt)获取更多信息
|
|
|
|
|
<p>旋转并缩放对象({this.axisStore._AxisScale_Hotkey})</p>
|
|
|
|
|
{/* 长按(Ctrl + Alt)获取更多信息 */}
|
|
|
|
|
</div>
|
|
|
|
|
} minimal interactionKind='hover' placement='bottom'>
|
|
|
|
|
} minimal interactionKind='hover' placement='bottom'
|
|
|
|
|
onOpening={this.axisStore.SyncHotkey}
|
|
|
|
|
>
|
|
|
|
|
<Button
|
|
|
|
|
minimal
|
|
|
|
|
onClick={(e) => { this._ChangeAxisMode(e, TransMode.Scale); }}
|
|
|
|
|
>
|
|
|
|
|
<Icon
|
|
|
|
|
icon='share'
|
|
|
|
|
style={{ color: userConfig.curMode === TransMode.Scale ? spanColor : "#FFFFFF" }}
|
|
|
|
|
style={{ color: this.axisStore.curMode === TransMode.Scale ? spanColor : "#FFFFFF" }}
|
|
|
|
|
/>
|
|
|
|
|
</Button>
|
|
|
|
|
</Popover>
|
|
|
|
@ -99,12 +105,15 @@ export default class AxisMode extends Component
|
|
|
|
|
<div className='SwitchAxisMode'>
|
|
|
|
|
<Popover content={
|
|
|
|
|
<div className='AxisModeToolTip'>
|
|
|
|
|
<p>在世界场景和本地(对象)之间循环变形小工具坐标系(Ctrl + `)</p>
|
|
|
|
|
长按(Ctrl + Alt)获取更多信息
|
|
|
|
|
<p>在世界场景和本地(对象)之间循环变形小工具坐标系({this.axisStore._GizmoCSSwith_Hotkey})</p>
|
|
|
|
|
{/* 长按(Ctrl + Alt)获取更多信息 */}
|
|
|
|
|
<p>{`当前:${this.axisStore._SpaceCSType === SpaceCSType.World ? "世界" : "本地"}坐标系`}</p>
|
|
|
|
|
</div>
|
|
|
|
|
} minimal interactionKind='hover' placement='bottom'>
|
|
|
|
|
} minimal interactionKind='hover' placement='bottom'
|
|
|
|
|
onOpening={this.axisStore.SyncHotkey}
|
|
|
|
|
>
|
|
|
|
|
{
|
|
|
|
|
this._SpaceCSType === SpaceCSType.World ?
|
|
|
|
|
this.axisStore._SpaceCSType === SpaceCSType.World ?
|
|
|
|
|
<Button
|
|
|
|
|
minimal
|
|
|
|
|
onClick={() => { this._ChangeSpaceCSType(SpaceCSType.Local); }}
|
|
|
|
@ -127,7 +136,7 @@ export default class AxisMode extends Component
|
|
|
|
|
}
|
|
|
|
|
</Popover>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</div >
|
|
|
|
|
);
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|