Feature/add buttons

package.json

@@ -76,7 +76,7 @@
 		]
 	},
 	"devDependencies": {
-		"@types/react": "^17.0.36",
+		"@types/react": "^17.0.37",
 		"@types/react-async-script": "^1.2.1",
 		"@types/three": "^0.134.0",
 		"cross-env": "^7.0.3",

src/ThreeEditor/css/main.css

@@ -328,7 +328,7 @@ select:hover {
 #resizer {
 	position: absolute;
 	top: 32px;
-	right: 345px;
+	right: 370px;
 	width: 5px;
 	bottom: 0px;
 	/* background-color: rgba(255,0,0,0.5); */
@@ -339,7 +339,7 @@ select:hover {
 	position: absolute;
 	top: 32px;
 	left: 0;
-	right: 360px;
+	right: 375px;
 	bottom: 0;
 }
 
@@ -444,7 +444,7 @@ select:hover {
 	right: 0;
 	top: 32px;
 	bottom: 0;
-	width: 360px;
+	width: 375px;
 	background: #eee;
 	overflow: auto;
 }
@@ -759,4 +759,4 @@ select:hover {
 
 .display-none {
 	display: none !important;
-}
+}

src/ThreeEditor/js/Editor.Context.ts

@@ -1,5 +1,4 @@
 import * as THREE from 'three';
-import { Scene } from 'three';
 import { BasicMesh, isBasicMesh } from '../util/BasicMeshes';
 import { Beam, isBeam } from '../util/Beam';
 import * as CSG from '../util/CSG/CSG';

src/ThreeEditor/js/menubar/Menubar.Add.js

@@ -1,6 +1,5 @@
-import * as THREE from 'three';
 import { BoxMesh, CylinderMesh, SphereMesh } from '../../util/BasicMeshes';
-import { AddObjectCommand, AddZoneCommand, AddDetectGeometryCommand } from '../commands/Commands';
+import { AddDetectGeometryCommand, AddObjectCommand, AddZoneCommand } from '../commands/Commands';
 import { UIHorizontalRule, UIPanel } from '../libs/ui.js';
 import { createOption } from './Menubar.js';
 

src/ThreeEditor/js/sidebar/Sidebar.AddPanel.js

@@ -0,0 +1,67 @@
+import { UIPanel, UIText, UIRow, UIButton } from '../libs/ui.js';
+import { BoxMesh, CylinderMesh, SphereMesh } from '../../util/BasicMeshes';
+import * as Cmd from '../commands/Commands';
+
+function SidebarAddPanel(editor, parent, title, names, commands) {
+	const container = new UIPanel();
+
+	// Header
+	const headerRow = new UIRow();
+	headerRow.add(new UIText(title.toUpperCase()));
+	container.add(headerRow);
+
+	// Buttons
+
+	const btnRow = new UIRow();
+
+	names.forEach((name, index) => {
+		const button = new UIButton(name);
+		button.onClick(function () {
+			editor.execute(commands[index]);
+		});
+		btnRow.add(button);
+	});
+
+	container.add(btnRow);
+	parent.add(container);
+
+	return container;
+}
+
+export function DetectAddPanel(editor, container) {
+	return SidebarAddPanel(
+		editor,
+		container,
+		'Add Detect',
+		['Geometry', 'Filter', 'Quantity'],
+		[
+			new Cmd.AddDetectGeometryCommand(editor),
+			new Cmd.AddFilterCommand(editor),
+			new Cmd.AddFilterCommand(editor)
+		]
+	);
+}
+
+export function FigureAddPanel(editor, container) {
+	return SidebarAddPanel(
+		editor,
+		container,
+		'Add Figure',
+		['Box', 'Cylinder', 'Sphere'],
+		[
+			new Cmd.AddObjectCommand(editor, new BoxMesh()),
+			new Cmd.AddObjectCommand(editor, new CylinderMesh()),
+			new Cmd.AddObjectCommand(editor, new SphereMesh())
+		]
+	);
+}
+
+export function ZoneAddPanel(editor, container) {
+	return SidebarAddPanel(
+		editor,
+		container,
+		'Add Zone',
+		['Constructive solid Zone'],
+		[new Cmd.AddZoneCommand(editor)]
+	);
+}

src/ThreeEditor/js/sidebar/Sidebar.Filters.js

@@ -1,34 +1,22 @@
 import { AddFilterCommand } from '../commands/Commands';
 import { UIButton, UIPanel, UIRow } from '../libs/ui';
 import { OutlinerManager } from './Sidebar.OutlinerManager';
+import { DetectAddPanel } from './Sidebar.AddPanel';
 
 export class SidebarFilters extends UIPanel {
 	editor;
 	signals;
 	detectManager;
+	detectAddPanel;
 	outlinerManager;
 
-	createButton() {
-		const panel = new UIPanel();
-		const row = new UIRow();
-		const add_button = new UIButton("Add Detect Filter");
-
-		add_button.onClick(() => {
-			this.editor.execute(new AddFilterCommand(this.editor));
-		});
-
-		row.add(add_button);
-		panel.add(row);
-		this.add(panel);
-	}
-
 	refreshOptions() {
 		const sources = [
 			this.editor.detectManager.detectContainer,
 			this.editor.detectManager.filterContainer
 		];
 		this.outlinerManager.setOptionsFromSources(sources);
-	};
+	}
 
 	constructor(editor) {
 		super();
@@ -39,16 +27,12 @@ export class SidebarFilters extends UIPanel {
 		this.outlinerManager = new OutlinerManager(editor, this);
 		this.outlinerManager.id = 'filter-outliner';
 
-		this.signals.editorCleared.add(this.refreshOptions.bind(this));
+		this.detectAddPanel = DetectAddPanel(editor, this);
 
+		this.signals.editorCleared.add(this.refreshOptions.bind(this));
 		this.signals.sceneGraphChanged.add(this.refreshOptions.bind(this));
-
 		this.signals.objectChanged.add(this.refreshOptions.bind(this));
-
 		this.signals.detectFilterAdded.add(this.refreshOptions.bind(this));
-
 		this.signals.detectFilterRemoved.add(this.refreshOptions.bind(this));
-
-		this.createButton();
 	}
 }

src/ThreeEditor/js/sidebar/Sidebar.OutlinerManager.js

@@ -31,11 +31,11 @@ const getObjectType = object => {
 		case 'SphereMesh':
 			return 'Figure';
 		case 'Points':
-		case 'Detect':
 			return 'Detect';
 		case 'Filter':
 			return 'Filter';
 		default:
+			console.warn(`could not parse object of type ${object.type}`, typeof object, object);
 			return 'Unknown';
 	}
 };

src/ThreeEditor/js/sidebar/Sidebar.Scene.js

@@ -1,12 +1,9 @@
-import * as THREE from 'three';
-import { UIBreak, UIColor, UIPanel, UIRow, UISelect, UIText } from '../libs/ui.js';
-import { UITexture } from '../libs/ui.three.js';
+import { UIBreak, UIPanel } from '../libs/ui.js';
 import { OutlinerManager } from './Sidebar.OutlinerManager';
-
-
+import { FigureAddPanel, ZoneAddPanel } from './Sidebar.AddPanel';
 
 function SidebarScene(editor) {
-	const { signals, strings } = editor;
+	const { signals } = editor;
 
 	const container = new UIPanel();
 	container.setBorderTop('0');
@@ -27,141 +24,14 @@ function SidebarScene(editor) {
 
 	container.add(new UIBreak());
 
-	// background
-
-	const backgroundRow = new UIRow();
-
-	const backgroundType = new UISelect()
-		.setOptions({
-			None: '',
-			Color: 'Color',
-			Texture: 'Texture',
-			Equirectangular: 'Equirect'
-		})
-		.setWidth('160px');
-	backgroundType.onChange(() => {
-		onBackgroundChanged();
-		refreshBackgroundUI();
-	});
-
-	backgroundRow.add(new UIText(strings.getKey('sidebar/scene/background')).setWidth('90px'));
-	backgroundRow.add(backgroundType);
-
-	const backgroundColor = new UIColor()
-		.setValue('#000000')
-		.setMarginLeft('8px')
-		.onInput(onBackgroundChanged);
-	backgroundRow.add(backgroundColor);
-
-	const backgroundTexture = new UITexture().setMarginLeft('8px').onChange(onBackgroundChanged);
-	backgroundTexture.setDisplay('none');
-	backgroundRow.add(backgroundTexture);
-
-	const backgroundEquirectangularTexture = new UITexture()
-		.setMarginLeft('8px')
-		.onChange(onBackgroundChanged);
-	backgroundEquirectangularTexture.setDisplay('none');
-	backgroundRow.add(backgroundEquirectangularTexture);
-
-	container.add(backgroundRow);
-
-	function onBackgroundChanged() {
-		signals.sceneBackgroundChanged.dispatch(
-			backgroundType.getValue(),
-			backgroundColor.getHexValue(),
-			backgroundTexture.getValue(),
-			backgroundEquirectangularTexture.getValue()
-		);
-	}
-
-	function refreshBackgroundUI() {
-		const type = backgroundType.getValue();
-
-		backgroundType.setWidth(type === 'None' ? '160px' : '110px');
-		backgroundColor.setDisplay(type === 'Color' ? '' : 'none');
-		backgroundTexture.setDisplay(type === 'Texture' ? '' : 'none');
-		backgroundEquirectangularTexture.setDisplay(type === 'Equirectangular' ? '' : 'none');
-	}
-
-	// environment
-
-	const environmentRow = new UIRow();
-
-	const environmentType = new UISelect()
-		.setOptions({
-			None: '',
-			Equirectangular: 'Equirect',
-			ModelViewer: 'ModelViewer'
-		})
-		.setWidth('160px');
-	environmentType.setValue('None');
-	environmentType.onChange(() => {
-		onEnvironmentChanged();
-		refreshEnvironmentUI();
-	});
-
-	environmentRow.add(new UIText(strings.getKey('sidebar/scene/environment')).setWidth('90px'));
-	environmentRow.add(environmentType);
-
-	const environmentEquirectangularTexture = new UITexture()
-		.setMarginLeft('8px')
-		.onChange(onEnvironmentChanged);
-	environmentEquirectangularTexture.setDisplay('none');
-	environmentRow.add(environmentEquirectangularTexture);
-
-	container.add(environmentRow);
-
-	function onEnvironmentChanged() {
-		signals.sceneEnvironmentChanged.dispatch(
-			environmentType.getValue(),
-			environmentEquirectangularTexture.getValue()
-		);
-	}
-
-	function refreshEnvironmentUI() {
-		const type = environmentType.getValue();
+	const figureAddPanel = FigureAddPanel(editor, container);
 
-		environmentType.setWidth(type !== 'Equirectangular' ? '160px' : '110px');
-		environmentEquirectangularTexture.setDisplay(type === 'Equirectangular' ? '' : 'none');
-	}
+	const sceneAddPanel = ZoneAddPanel(editor, container);
 
 	//
 
 	function refreshUI() {
-		const { camera, scene } = editor;
-		const { detectContainer } = editor.detectManager;
-		const { zoneContainer, worldZone } = editor.zoneManager;
-
 		refreshOptions();
-
-		if (scene.background) {
-			if (scene.background.isColor) {
-				backgroundType.setValue('Color');
-				backgroundColor.setHexValue(scene.background.getHex());
-			} else if (scene.background.isTexture) {
-				if (scene.background.mapping === THREE.EquirectangularReflectionMapping) {
-					backgroundType.setValue('Equirectangular');
-					backgroundEquirectangularTexture.setValue(scene.background);
-				} else {
-					backgroundType.setValue('Texture');
-					backgroundTexture.setValue(scene.background);
-				}
-			}
-		} else {
-			backgroundType.setValue('None');
-		}
-
-		if (scene.environment) {
-			if (scene.environment.mapping === THREE.EquirectangularReflectionMapping) {
-				environmentType.setValue('Equirectangular');
-				environmentEquirectangularTexture.setValue(scene.environment);
-			}
-		} else {
-			environmentType.setValue('None');
-		}
-
-		refreshBackgroundUI();
-		refreshEnvironmentUI();
 	}
 
 	refreshUI();
@@ -174,9 +44,7 @@ function SidebarScene(editor) {
 
 	signals.objectChanged.add(refreshUI);
 
-
 	return container;
 }
 
 export { SidebarScene };
-