three.js 場景編輯器 源碼解析（十六）

     本章講解editor\js\Toolbar.js,這個ui主要用於設置操作對象的位移、旋轉、縮放、空間的切換。

// 平移、旋轉、縮放、空間工具條
var Toolbar = function ( editor ) {
	//信號、頁面字符
	var signals = editor.signals;
	var strings = editor.strings;

	//工具條
	var container = new UI.Panel();
	container.setId( 'toolbar' );
	container.setDisplay( 'none' );

	//按鈕
	var buttons = new UI.Panel();
	container.add( buttons );

	// translate / rotate / scale
	//平移按鈕
	var translate = new UI.Button( strings.getKey( 'toolbar/translate' ) );
	translate.dom.className = 'Button selected';
	translate.onClick( function () {
		//設置其他按鈕狀態
		signals.transformModeChanged.dispatch( 'translate' );

	} );
	buttons.add( translate );
	//旋轉按鈕
	var rotate = new UI.Button( strings.getKey( 'toolbar/rotate' ) );
	rotate.onClick( function () {
		//設置其他按鈕狀態
		signals.transformModeChanged.dispatch( 'rotate' );

	} );
	buttons.add( rotate );
	//縮放按鈕
	var scale = new UI.Button( strings.getKey( 'toolbar/scale' ) );
	scale.onClick( function () {
		//設置其他按鈕狀態
		signals.transformModeChanged.dispatch( 'scale' );

	} );
	buttons.add( scale );
	//模型空間、世界空間
	var local = new UI.THREE.Boolean( false, strings.getKey( 'toolbar/local' ) );
	local.onChange( function () {
		//改變操作模型的空間
		signals.spaceChanged.dispatch( this.getValue() === true ? 'local' : 'world' );

	} );
	buttons.add( local );

	//
	//對象選擇（顯示操作面板）
	signals.objectSelected.add( function ( object ) {
		container.setDisplay( object === null ? 'none' : '' );
	} );

	//選擇的模式改變了，會影響其他按鈕的灰度
	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;
};