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

本章介紹場景編輯中關於腳本相關的ui部分，相關的文件爲editor\js\Sidebar.Script.js，後續的三個章節會逐個介紹腳本相關的三個命令editor\ js\commands\AddScriptCommand.js、editor\js\commands\SetScriptValueCommand.js、editor\js\commands\RemoveScriptCommand.js。

Sidebar.Script.js腳本主要封裝了編輯腳本相關的ui，以及ui綁定的事件，ui中包含的控件有新建按鈕、名稱編輯框、編輯按鈕、移除按鈕。

//腳本界面
Sidebar.Script = function ( editor ) {

	//獲取字符串用於設置ui的文本
	var strings = editor.strings;

	//獲取信號
	var signals = editor.signals;

	//創建一個div，默認不顯示（點擊對象時才顯示）
	var container = new UI.Panel();
	container.setDisplay( 'none' );

	//添加文本、添加兩層換行
	container.add( new UI.Text( strings.getKey( 'sidebar/script' ) ).setTextTransform( 'uppercase' ) );
	container.add( new UI.Break() );
	container.add( new UI.Break() );

	//
	//添加一個腳本的容器（動態添加 文本框、編輯按鈕、刪除按鈕）
	var scriptsContainer = new UI.Row();
	container.add( scriptsContainer );

	//添加一個按鈕，設定點擊事件
	var newScript = new UI.Button( strings.getKey( 'sidebar/script/new' ) );
	newScript.onClick( function () {
		//傳入的腳本內容、執行命令
		var script = { name: '', source: 'function update( event ) {}' };
		//創建一個添加命令
		editor.execute( new AddScriptCommand( editor.selected, script ) );

	} );
	//添加到容器
	container.add( newScript );

	/*
	var loadScript = new UI.Button( 'Load' );
	loadScript.setMarginLeft( '4px' );
	container.add( loadScript );
	*/

	//當添加、編輯、移除腳本時都會觸發這個函數
	function update() {
		//清空腳本編輯的容器
		scriptsContainer.clear();
		scriptsContainer.setDisplay( 'none' );

		//獲取選擇的對象
		var object = editor.selected;
		//沒有對象就返回
		if ( object === null ) {
			return;
		}

		//獲取對象的腳本集合
		var scripts = editor.scripts[ object.uuid ];
		//對象存在腳本
		if ( scripts !== undefined && scripts.length > 0 ) {
			//顯示腳本
			scriptsContainer.setDisplay( 'block' );
			//遍歷該對象的所有腳本
			for ( var i = 0; i < scripts.length; i ++ ) {
				//立即執行下面的函數
				( function ( object, script ) {
					//添加一個輸入框，腳本名稱，設置寬高，字體大小
					var name = new UI.Input( script.name ).setWidth( '130px' ).setFontSize( '12px' );
					name.onChange( function () {	//添加文本框改變事件
						//創建一個編輯命名
						editor.execute( new SetScriptValueCommand( editor.selected, script, 'name', this.getValue() ) );

					} );
					//添加文本框
					scriptsContainer.add( name );
					//添加編輯按鈕
					var edit = new UI.Button( strings.getKey( 'sidebar/script/edit' ) );
					edit.setMarginLeft( '4px' );
					edit.onClick( function () {  //添加編輯按鈕處理
						//派發編輯腳本消息
						signals.editScript.dispatch( object, script );

					} );
					//添加編輯按鈕
					scriptsContainer.add( edit );

					//添加移出按鈕
					var remove = new UI.Button( strings.getKey( 'sidebar/script/remove' ) );
					remove.setMarginLeft( '4px' );
					remove.onClick( function () {	//移除按鈕處理
						if ( confirm( 'Are you sure?' ) ) {	//確定嗎
							//創建一個移除命令
							editor.execute( new RemoveScriptCommand( editor.selected, script ) );
						}
					} );
					// 添加移除按鈕
					scriptsContainer.add( remove );
					//添加換行
					scriptsContainer.add( new UI.Break() );

				} )( object, scripts[ i ] )

			}

		}

	}

	// signals
	//對象被選中時的消息處理
	signals.objectSelected.add( function ( object ) {
		//選中對象、對象不是相機
		if ( object !== null && editor.camera !== object ) {
			//顯示
			container.setDisplay( 'block' );
			//創建編輯框等
			update();

		} else {
			//相機上不能添加處理事件
			container.setDisplay( 'none' );

		}

	} );

	//註冊scriptAdded、scriptRemoved、scriptChanged事件響應
	signals.scriptAdded.add( update );
	signals.scriptRemoved.add( update );
	signals.scriptChanged.add( update );

	return container;

};