161 cleanup UI creation (#245)

* refactor geometry (#161) * fix camera select * add jsdoc * refactor * remove backspace as delete
yaptide · Nov 12, 2021 · 3e8d2ed · 3e8d2ed
1 parent 2c67114
commit 3e8d2ed
Show file tree

Hide file tree

Showing 26 changed files with 566 additions and 471 deletions.
diff --git a/src/ThreeEditor/js/EditorOrbitControls.js b/src/ThreeEditor/js/EditorOrbitControls.js
@@ -11,7 +11,7 @@ export class EditorOrbitControls extends OrbitControls {
 
     focus(target) {
 
-        var distance;
+        let distance;
 
         this.box.setFromObject(target);
 

diff --git a/src/ThreeEditor/js/LoaderUtils.js b/src/ThreeEditor/js/LoaderUtils.js
@@ -1,83 +1,83 @@
-var LoaderUtils = {
+const LoaderUtils = {
 
-	createFilesMap: function ( files ) {
+	createFilesMap: function (files) {
 
-		var map = {};
+		const map = {};
 
-		for ( var i = 0; i < files.length; i ++ ) {
+		for (let i = 0; i < files.length; i++) {
 
-			var file = files[ i ];
-			map[ file.name ] = file;
+			const file = files[i];
+			map[file.name] = file;
 
 		}
 
 		return map;
 
 	},
 
-	getFilesFromItemList: function ( items, onDone ) {
+	getFilesFromItemList: function (items, onDone) {
 
 		// TOFIX: setURLModifier() breaks when the file being loaded is not in root
 
-		var itemsCount = 0;
-		var itemsTotal = 0;
+		let itemsCount = 0;
+		let itemsTotal = 0;
 
-		var files = [];
-		var filesMap = {};
+		const files = [];
+		const filesMap = {};
 
 		function onEntryHandled() {
 
-			itemsCount ++;
+			itemsCount++;
 
-			if ( itemsCount === itemsTotal ) {
+			if (itemsCount === itemsTotal) {
 
-				onDone( files, filesMap );
+				onDone(files, filesMap);
 
 			}
 
 		}
 
-		function handleEntry( entry ) {
+		function handleEntry(entry) {
 
-			if ( entry.isDirectory ) {
+			if (entry.isDirectory) {
 
-				var reader = entry.createReader();
-				reader.readEntries( function ( entries ) {
+				const reader = entry.createReader();
+				reader.readEntries(function (entries) {
 
-					for ( var i = 0; i < entries.length; i ++ ) {
+					for (let i = 0; i < entries.length; i++) {
 
-						handleEntry( entries[ i ] );
+						handleEntry(entries[i]);
 
 					}
 
 					onEntryHandled();
 
-				} );
+				});
 
-			} else if ( entry.isFile ) {
+			} else if (entry.isFile) {
 
-				entry.file( function ( file ) {
+				entry.file(function (file) {
 
-					files.push( file );
+					files.push(file);
 
-					filesMap[ entry.fullPath.substr( 1 ) ] = file;
+					filesMap[entry.fullPath.substr(1)] = file;
 					onEntryHandled();
 
-				} );
+				});
 
 			}
 
-			itemsTotal ++;
+			itemsTotal++;
 
 		}
 
-		for ( var i = 0; i < items.length; i ++ ) {
+		for (let i = 0; i < items.length; i++) {
 
-			var item = items[ i ];
+			const item = items[i];
 
-			if ( item.kind === 'file' ) {
+			if (item.kind === 'file') {
 
-				handleEntry( item.webkitGetAsEntry() );
+				handleEntry(item.webkitGetAsEntry());
 
 			}
 

diff --git a/src/ThreeEditor/js/Menubar.Add.js b/src/ThreeEditor/js/Menubar.Add.js
@@ -6,25 +6,25 @@ import { createOption } from './Menubar.js';
 
 function MenubarAdd(editor) {
 
-	var strings = editor.strings;
+	const strings = editor.strings;
 
-	var container = new UIPanel();
+	const container = new UIPanel();
 	container.setClass('menu');
 
-	var title = new UIPanel();
+	const title = new UIPanel();
 	title.setClass('title');
 	title.setTextContent(strings.getKey('menubar/add'));
 	container.add(title);
 
-	var options = new UIPanel();
+	const options = new UIPanel();
 	options.setClass('options');
 	container.add(options);
 
 
 	// Group
 	options.add(createOption('option', strings.getKey('menubar/add/group'), () => {
 
-		var mesh = new THREE.Group();
+		const mesh = new THREE.Group();
 		mesh.name = 'Zone';
 		editor.execute(new AddObjectCommand(editor, mesh));
 	}));
@@ -59,8 +59,8 @@ function MenubarAdd(editor) {
 	// Box
 	options.add(createOption('option', strings.getKey('menubar/add/box'), () => {
 
-		var geometry = new THREE.BoxGeometry(1, 1, 1, 1, 1, 1);
-		var mesh = new THREE.Mesh(geometry, material.clone());
+		const geometry = new THREE.BoxGeometry(1, 1, 1, 1, 1, 1);
+		const mesh = new THREE.Mesh(geometry, material.clone());
 		mesh.name = 'Box';
 
 		editor.execute(new AddObjectCommand(editor, mesh));
@@ -69,8 +69,8 @@ function MenubarAdd(editor) {
 	// Sphere
 	options.add(createOption('option', strings.getKey('menubar/add/sphere'), () => {
 
-		var geometry = new THREE.SphereGeometry(1, 16, 8, 0, Math.PI * 2, 0, Math.PI);
-		var mesh = new THREE.Mesh(geometry, material.clone());
+		const geometry = new THREE.SphereGeometry(1, 16, 8, 0, Math.PI * 2, 0, Math.PI);
+		const mesh = new THREE.Mesh(geometry, material.clone());
 		mesh.name = 'Sphere';
 
 		editor.execute(new AddObjectCommand(editor, mesh));
@@ -83,8 +83,8 @@ function MenubarAdd(editor) {
 	// Cylinder
 	options.add(createOption('option', strings.getKey('menubar/add/cylinder'), () => {
 
-		var geometry = new THREE.CylinderGeometry(1, 1, 1, 16, 1, false, 0, Math.PI * 2);
-		var mesh = new THREE.Mesh(geometry, material.clone());
+		const geometry = new THREE.CylinderGeometry(1, 1, 1, 16, 1, false, 0, Math.PI * 2);
+		const mesh = new THREE.Mesh(geometry, material.clone());
 		mesh.name = 'Cylinder';
 
 		editor.execute(new AddObjectCommand(editor, mesh));
@@ -96,11 +96,11 @@ function MenubarAdd(editor) {
 	//Code adjusted from https://github.com/mrdoob/three.js/blob/r131/editor/js/Menubar.Add.js
 	options.add(createOption('option', strings.getKey('menubar/add/hemispherelight'), () => {
 
-		var skyColor = 0x00aaff; // Deep Sky Blue
-		var groundColor = 0xffaa00; // Orange
-		var intensity = 1;
+		const skyColor = 0x00aaff; // Deep Sky Blue
+		const groundColor = 0xffaa00; // Orange
+		const intensity = 1;
 
-		var light = new THREE.HemisphereLight(skyColor, groundColor, intensity);
+		const light = new THREE.HemisphereLight(skyColor, groundColor, intensity);
 		light.name = 'HemisphereLight';
 
 		light.position.set(0, 10, 0);

diff --git a/src/ThreeEditor/js/Menubar.Edit.js b/src/ThreeEditor/js/Menubar.Edit.js
@@ -6,23 +6,23 @@ import { UIHorizontalRule, UIPanel, UIRow } from './libs/ui.js';
 
 function MenubarEdit(editor) {
 
-	var strings = editor.strings;
+	const strings = editor.strings;
 
-	var container = new UIPanel();
+	const container = new UIPanel();
 	container.setClass('menu');
 
-	var title = new UIPanel();
+	const title = new UIPanel();
 	title.setClass('title');
 	title.setTextContent(strings.getKey('menubar/edit'));
 	container.add(title);
 
-	var options = new UIPanel();
+	const options = new UIPanel();
 	options.setClass('options');
 	container.add(options);
 
 	// Undo
 
-	var undo = new UIRow();
+	const undo = new UIRow();
 	undo.setClass('option');
 	undo.setTextContent(strings.getKey('menubar/edit/undo'));
 	undo.onClick(() => {
@@ -34,7 +34,7 @@ function MenubarEdit(editor) {
 
 	// Redo
 
-	var redo = new UIRow();
+	const redo = new UIRow();
 	redo.setClass('option');
 	redo.setTextContent(strings.getKey('menubar/edit/redo'));
 	redo.onClick(() => {
@@ -46,7 +46,7 @@ function MenubarEdit(editor) {
 
 	// Clear History
 
-	var option = new UIRow();
+	let option = new UIRow();
 	option.setClass('option');
 	option.setTextContent(strings.getKey('menubar/edit/clear_history'));
 	option.onClick(() => {
@@ -93,7 +93,7 @@ function MenubarEdit(editor) {
 	option.setTextContent(strings.getKey('menubar/edit/center'));
 	option.onClick(() => {
 
-		var object = editor.selected;
+		const object = editor.selected;
 
 		if (object === null || object.parent === null) return; // avoid centering the camera or scene
 
@@ -117,7 +117,7 @@ function MenubarEdit(editor) {
 	option.setTextContent(strings.getKey('menubar/edit/clone'));
 	option.onClick(() => {
 
-		var object = editor.selected;
+		let object = editor.selected;
 
 		if (object === null || object.parent === null) return; // avoid cloning the camera or scene
 
@@ -135,7 +135,7 @@ function MenubarEdit(editor) {
 	option.setTextContent(strings.getKey('menubar/edit/delete'));
 	option.onClick(() => {
 
-		var object = editor.selected;
+		const object = editor.selected;
 
 		if (object !== null && object.parent !== null && object.notRemovable !== true) {
 
@@ -165,17 +165,17 @@ function MenubarEdit(editor) {
 	});
 	options.add(option);
 
-	var colorMaps = ['map', 'envMap', 'emissiveMap'];
+	const colorMaps = ['map', 'envMap', 'emissiveMap'];
 
 	function fixColorMap(obj) {
 
-		var material = obj.material;
+		const material = obj.material;
 
 		if (material !== undefined) {
 
 			if (Array.isArray(material) === true) {
 
-				for (var i = 0; i < material.length; i++) {
+				for (let i = 0; i < material.length; i++) {
 
 					fixMaterial(material[i]);
 
@@ -195,11 +195,11 @@ function MenubarEdit(editor) {
 
 	function fixMaterial(material) {
 
-		var needsUpdate = material.needsUpdate;
+		let needsUpdate = material.needsUpdate;
 
-		for (var i = 0; i < colorMaps.length; i++) {
+		for (let i = 0; i < colorMaps.length; i++) {
 
-			var map = material[colorMaps[i]];
+			const map = material[colorMaps[i]];
 
 			if (map) {
 

diff --git a/src/ThreeEditor/js/Menubar.File.js b/src/ThreeEditor/js/Menubar.File.js
@@ -2,23 +2,23 @@ import { UIHorizontalRule, UIPanel, UIRow } from './libs/ui.js';
 
 function MenubarFile(editor) {
 
-	var strings = editor.strings;
+	const strings = editor.strings;
 
-	var container = new UIPanel();
+	const container = new UIPanel();
 	container.setClass('menu');
 
-	var title = new UIPanel();
+	const title = new UIPanel();
 	title.setClass('title');
 	title.setTextContent(strings.getKey('menubar/file'));
 	container.add(title);
 
-	var options = new UIPanel();
+	const options = new UIPanel();
 	options.setClass('options');
 	container.add(options);
 
 	// New
 
-	var option = new UIRow();
+	let option = new UIRow();
 	option.setClass('option');
 	option.setTextContent(strings.getKey('menubar/file/new'));
 	option.onClick(() => {
@@ -38,11 +38,11 @@ function MenubarFile(editor) {
 
 	// Open Editor from file
 
-	var form = document.createElement('form');
+	const form = document.createElement('form');
 	form.style.display = 'none';
 	document.body.appendChild(form);
 
-	var fileInput = document.createElement('input');
+	const fileInput = document.createElement('input');
 	fileInput.multiple = true;
 	fileInput.type = 'file';
 	fileInput.addEventListener('change', () => {
@@ -77,7 +77,7 @@ function MenubarFile(editor) {
 
 		editor.updateUserData();
 
-		var output = editor.toJSON();
+		let output = editor.toJSON();
 
 		try {
 
@@ -102,7 +102,7 @@ function MenubarFile(editor) {
 
 	//
 
-	var link = document.createElement('a');
+	const link = document.createElement('a');
 	function save(blob, filename) {
 
 		if (link.href) {