You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
88 lines
2.1 KiB
88 lines
2.1 KiB
import { UIPanel, UIButton, UICheckbox } from './libs/ui.js';
|
|
//左侧功能条
|
|
function Toolbar( editor ) {
|
|
|
|
const signals = editor.signals;
|
|
const strings = editor.strings;
|
|
|
|
const container = new UIPanel();
|
|
container.setId( 'toolbar' );
|
|
|
|
// translate / rotate / scale
|
|
|
|
const translateIcon = document.createElement( 'img' );
|
|
translateIcon.title = strings.getKey( 'toolbar/translate' );
|
|
translateIcon.src = 'images/translate.svg';
|
|
|
|
const translate = new UIButton();
|
|
translate.dom.title="移动"
|
|
|
|
translate.dom.className = 'Button selected';
|
|
translate.dom.appendChild( translateIcon );
|
|
translate.onClick( function () {
|
|
|
|
signals.transformModeChanged.dispatch( 'translate' );
|
|
|
|
} );
|
|
container.add( translate );
|
|
|
|
const rotateIcon = document.createElement( 'img' );
|
|
rotateIcon.title = strings.getKey( 'toolbar/rotate' );
|
|
rotateIcon.src = 'images/rotate.svg';
|
|
|
|
const rotate = new UIButton();
|
|
rotate.dom.appendChild( rotateIcon );
|
|
rotate.onClick( function () {
|
|
|
|
signals.transformModeChanged.dispatch( 'rotate' );
|
|
|
|
} );
|
|
container.add( rotate );
|
|
|
|
const scaleIcon = document.createElement( 'img' );
|
|
scaleIcon.title = strings.getKey( 'toolbar/scale' );
|
|
scaleIcon.src = 'images/scale.svg';
|
|
|
|
const scale = new UIButton();
|
|
|
|
scale.dom.title="放缩"
|
|
scale.dom.appendChild( scaleIcon );
|
|
scale.onClick( function () {
|
|
|
|
signals.transformModeChanged.dispatch( 'scale' );
|
|
|
|
} );
|
|
container.add( scale );
|
|
|
|
const local = new UICheckbox( false );
|
|
local.dom.title = strings.getKey( 'toolbar/local' );
|
|
local.onChange( function () {
|
|
|
|
signals.spaceChanged.dispatch( this.getValue() === true ? 'local' : 'world' );
|
|
|
|
} );
|
|
container.add( local );
|
|
|
|
//
|
|
|
|
signals.transformModeChanged.add( function ( mode ) {
|
|
|
|
translate.dom.classList.remove( 'selected' );
|
|
rotate.dom.classList.remove( 'selected' );
|
|
scale.dom.classList.remove( 'selected' );
|
|
|
|
switch ( mode ) {
|
|
|
|
case 'translate': translate.dom.classList.add( 'selected' ); break;
|
|
case 'rotate': rotate.dom.classList.add( 'selected' ); break;
|
|
case 'scale': scale.dom.classList.add( 'selected' ); break;
|
|
|
|
}
|
|
|
|
} );
|
|
|
|
return container;
|
|
|
|
}
|
|
|
|
export { Toolbar };
|
|
|