|
|
|
@ -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;
|
|
|
|
|
}}
|
|
|
|
|
onClick={() => { this._ChangeSpaceCSType(SpaceCSType.Local); }}
|
|
|
|
|
>
|
|
|
|
|
<Icon
|
|
|
|
|
icon='globe-network'
|
|
|
|
|
style={{ color: "#FFFFFF" }}
|
|
|
|
|
/>
|
|
|
|
|
: <Button
|
|
|
|
|
icon='flow-review-branch'
|
|
|
|
|
</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>
|
|
|
|
|