refactor geometry (#161)

yaptide · Nov 5, 2021 · 800d28a · 800d28a
1 parent e91c098
commit 800d28a
Show file tree

Hide file tree

Showing 7 changed files with 112 additions and 87 deletions.
diff --git a/src/ThreeEditor/js/Sidebar.Geometry.Beam.js b/src/ThreeEditor/js/Sidebar.Geometry.Beam.js
@@ -1,6 +1,7 @@
 import * as THREE from 'three';
 import { isBeam } from '../util/Beam';
-import { UINumber, UIRow, UIText } from './libs/ui.js';
+import { createRowParamXYZ, createRowParam } from '../util/UiUtils';
+import { UIRow, } from './libs/ui.js';
 
 
 export function BeamPanel(editor, beam) {
@@ -9,24 +10,13 @@ export function BeamPanel(editor, beam) {
 
 	// direction
 
-	const directionRow = new UIRow();
-	const dirX = new UINumber().setPrecision(3).setWidth('50px').onChange(update);
-	const dirY = new UINumber().setPrecision(3).setWidth('50px').onChange(update);
-	const dirZ = new UINumber().setPrecision(3).setWidth('50px').onChange(update);
-
-	directionRow.add(new UIText(`Direction ${editor.unit.name}`).setWidth('90px'));
-	directionRow.add(dirX, dirY, dirZ);
+	const [directionRow, directionX, directionY, directionZ] = createRowParamXYZ({ text: `Direction ${editor.unit.name}`, update });
 	container.add(directionRow);
 
 	// energy
 
-	const energyRow = new UIRow();
-	const energy = new UINumber().setPrecision(3).onChange(update);
-	energy.min = 1e-12;  // set minimum energy to 1ueV (as lower limit of reasonable cross-section used in neutron transport)
-	const energyText = new UIText('Energy [MeV]').setWidth('90px');
-
-	energyRow.add(energyText);
-	energyRow.add(energy);
+	// set minimum energy to 1ueV (as lower limit of reasonable cross-section used in neutron transport)
+	const [energyRow, energy] = createRowParam({ text: 'Energy [MeV]', min: 1e-12, update });
 	container.add(energyRow);
 
 	updateUI();
@@ -35,15 +25,15 @@ export function BeamPanel(editor, beam) {
 
 	function updateUI() {
 
-		dirX.setValue(beam.direction.x);
-		dirY.setValue(beam.direction.y);
-		dirZ.setValue(beam.direction.z);
+		directionX.setValue(beam.direction.x);
+		directionY.setValue(beam.direction.y);
+		directionZ.setValue(beam.direction.z);
 
 		energy.setValue(beam.energy);
 	}
 
 	function update() {
-		const direction = new THREE.Vector3(dirX.getValue(), dirY.getValue(), dirZ.getValue());
+		const direction = new THREE.Vector3(directionX.getValue(), directionY.getValue(), directionZ.getValue());
 
 		if (direction.length() > 0)
 			beam.direction.copy(direction);

diff --git a/src/ThreeEditor/js/Sidebar.Geometry.BoundingZone.js b/src/ThreeEditor/js/Sidebar.Geometry.BoundingZone.js
@@ -1,4 +1,5 @@
 import * as THREE from 'three';
+import { createRowParamXYZ, createRowParam, createRowSelect } from '../util/UiUtils.js';
 import { UIButton, UICheckbox, UINumber, UIRow, UISelect, UIText } from './libs/ui.js';
 
 const bodyTypeOptions = {
@@ -7,16 +8,7 @@ const bodyTypeOptions = {
 	'sphere': 'sphere'
 };
 
-function createParamRow(update) {
-	const row = new UIRow();
-	const param = new UINumber().onChange(update);
-	const paramText = new UIText().setWidth('90px');
 
-	row.add(paramText);
-	row.add(param);
-
-	return [row, param, paramText];
-}
 
 export function BoundingZonePanel(editor, boundingZone) {
 
@@ -26,40 +18,32 @@ export function BoundingZonePanel(editor, boundingZone) {
 
 	// position
 
-	const objectPositionRow = new UIRow();
-	const objectPositionX = new UINumber().setPrecision(3).setWidth('50px').onChange(update);
-	const objectPositionY = new UINumber().setPrecision(3).setWidth('50px').onChange(update);
-	const objectPositionZ = new UINumber().setPrecision(3).setWidth('50px').onChange(update);
-
-	objectPositionRow.add(new UIText(strings.getKey('sidebar/object/position') + ' ' + editor.unit.name).setWidth('90px'));
-	objectPositionRow.add(objectPositionX, objectPositionY, objectPositionZ);
+	const [objectPositionRow,
+		objectPositionX,
+		objectPositionY,
+		objectPositionZ] = createRowParamXYZ({ text: `${strings.getKey('sidebar/object/position')} ${editor.unit.name}`, update });
 
 	container.add(objectPositionRow);
 
 
 	// geometry type
-
-	const geometryTypeRow = new UIRow();
-	const geometryType = new UISelect().setWidth('150px').setFontSize('12px').setOptions(bodyTypeOptions).setValue(boundingZone.geometryType).onChange(update);
-
-	geometryTypeRow.add(new UIText('Geometry Type').setWidth('90px'));
-	geometryTypeRow.add(geometryType);
+	const [geometryTypeRow, geometryType] = createRowSelect({ text: 'Geometry Type', options: bodyTypeOptions, value: boundingZone.geometryType, update })
 
 	container.add(geometryTypeRow);
 
 	// width(box) / radius(sphere,cylinder)
 
-	const [widthRow, width, widthText] = createParamRow(update);
+	const [widthRow, width, widthText] = createRowParam({ update });
 	container.add(widthRow);
 
 	// height(box,cylinder)
 
-	const [heightRow, height, heightText] = createParamRow(update);
+	const [heightRow, height, heightText] = createRowParam({ update });
 	container.add(heightRow);
 
 	// depth(box)
 
-	const [depthRow, depth, depthText] = createParamRow(update);
+	const [depthRow, depth, depthText] = createRowParam({ update });
 	container.add(depthRow);
 
 
@@ -68,6 +52,7 @@ export function BoundingZonePanel(editor, boundingZone) {
 	const calculateContainer = new UIRow();
 	container.add(calculateContainer);
 
+	// auto calculate checkbox
 
 	const autoCalculateRow = new UIRow();
 	const autoCalculate = new UICheckbox(boundingZone.autoCalculate).onChange(update);

diff --git a/src/ThreeEditor/js/Sidebar.Geometry.BoxGeometry.js b/src/ThreeEditor/js/Sidebar.Geometry.BoxGeometry.js
@@ -1,18 +1,7 @@
 import * as THREE from 'three';
+import { createRowParam } from '../util/UiUtils';
 import { SetGeometryCommand } from './commands/Commands';
-import { UINumber, UIRow, UIText } from './libs/ui.js';
-
-function createParamRow(update, value, text) {
-	const row = new UIRow();
-	const param = new UINumber(value).onChange(update);
-	const paramText = new UIText(text).setWidth('90px');
-	param.min = 0;
-
-	row.add(paramText);
-	row.add(param);
-
-	return [row, param, paramText];
-}
+import { UIRow } from './libs/ui.js';
 
 
 function GeometryParametersPanel(editor, object) {
@@ -25,17 +14,17 @@ function GeometryParametersPanel(editor, object) {
 
 	// width 
 
-	const [widthRow, width] = createParamRow(update, parameters.width, `X side length (width) ${editor.unit.name}`);
+	const [widthRow, width] = createRowParam({ update, value: parameters.width, text: `X side length (width) ${editor.unit.name}` });
 	container.add(widthRow);
 
 	// height
 
-	const [heightRow, height] = createParamRow(update, parameters.height, `Y side length (height) ${editor.unit.name}`);
+	const [heightRow, height] = createRowParam({ update, value: parameters.height, text: `Y side length (height) ${editor.unit.name}` });
 	container.add(heightRow);
 
 	// depth
 
-	const [depthRow, depth] = createParamRow(update, parameters.depth, `Z side length (depth) ${editor.unit.name}`);
+	const [depthRow, depth] = createRowParam({ update, value: parameters.depth, text: `Z side length (depth) ${editor.unit.name}` });
 	container.add(depthRow);
 
 

diff --git a/src/ThreeEditor/js/Sidebar.Geometry.CylinderGeometry.js b/src/ThreeEditor/js/Sidebar.Geometry.CylinderGeometry.js
@@ -1,6 +1,7 @@
 import * as THREE from 'three';
+import { createRowParam } from '../util/UiUtils';
 import { SetGeometryCommand } from './commands/Commands';
-import { UINumber, UIRow, UIText } from './libs/ui.js';
+import { UIRow } from './libs/ui.js';
 
 function GeometryParametersPanel(editor, object) {
 
@@ -13,24 +14,19 @@ function GeometryParametersPanel(editor, object) {
 
 	// radiusTop = radiusBottom => radius 
 
-	const radiusRow = new UIRow();
-	const radius = new UINumber(parameters.radiusTop).onChange(update);
-	radius.min = 0;
-
-	radiusRow.add(new UIText(strings.getKey('sidebar/geometry/sphere_geometry/radius') + ' ' + editor.unit.name).setWidth('90px'));
-	radiusRow.add(radius);
-
+	const [radiusRow, radius] = createRowParam({
+		update, value: parameters.radiusTop, min: 0,
+		text: `${strings.getKey('sidebar/geometry/sphere_geometry/radius')} ${editor.unit.name}`
+	});
 	container.add(radiusRow);
 
 
 	// height
 
-	const heightRow = new UIRow();
-	const height = new UINumber(parameters.height).onChange(update);
-
-	heightRow.add(new UIText(strings.getKey('sidebar/geometry/cylinder_geometry/height') + ' ' + editor.unit.name).setWidth('90px'));
-	heightRow.add(height);
-
+	const [heightRow, height] = createRowParam({
+		update, value: parameters.radiusTop,
+		text: `${strings.getKey('sidebar/geometry/cylinder_geometry/height')} ${editor.unit.name}`
+	});
 	container.add(heightRow);
 
 

diff --git a/src/ThreeEditor/js/Sidebar.Geometry.SphereGeometry.js b/src/ThreeEditor/js/Sidebar.Geometry.SphereGeometry.js
@@ -1,8 +1,9 @@
 import * as THREE from 'three';
 import { SetGeometryCommand } from './commands/Commands';
-import { UINumber, UIRow, UIText } from './libs/ui.js';
+import { createRowParam } from '../util/UiUtils';
+import { UIRow } from './libs/ui.js';
 
-function GeometryParametersPanel( editor, object ) {
+function GeometryParametersPanel(editor, object) {
 
 	var strings = editor.strings;
 
@@ -13,30 +14,27 @@ function GeometryParametersPanel( editor, object ) {
 
 	// radius
 
-	var radiusRow = new UIRow();
-	var radius = new UINumber( parameters.radius ).onChange( update );
-	radius.min = 0;
+	const [radiusRow, radius] = createRowParam({
+		update, value: parameters.radius, min: 0,
+		text: `${strings.getKey('sidebar/geometry/sphere_geometry/radius')} ${editor.unit.name}`
+	});
+	container.add(radiusRow);
 
-	radiusRow.add( new UIText( strings.getKey( 'sidebar/geometry/sphere_geometry/radius' ) + ' ' + editor.unit.name).setWidth( '90px' ) );
-	radiusRow.add( radius );
 
-	container.add( radiusRow );
-
-
 
 	//
 
 	function update() {
 
-		editor.execute( new SetGeometryCommand( editor, object, new THREE.SphereGeometry(
+		editor.execute(new SetGeometryCommand(editor, object, new THREE.SphereGeometry(
 			radius.getValue(),
 			16,
 			8,
 			0 * THREE.MathUtils.DEG2RAD,
 			360 * THREE.MathUtils.DEG2RAD,
 			0 * THREE.MathUtils.DEG2RAD,
 			180 * THREE.MathUtils.DEG2RAD
-		) ) );
+		)));
 
 	}
 

diff --git a/src/ThreeEditor/util/UiUtils.js b/src/ThreeEditor/util/UiUtils.js
@@ -0,0 +1,67 @@
+import { UIRow, UINumber, UIText, UISelect } from "../js/libs/ui";
+
+function createNumberInput({
+    value = 0,
+    precision = 3,
+    update,
+    min = undefined,
+    max = undefined
+}) {
+    const input = new UINumber(value).setPrecision(precision).setWidth('50px').onChange(update);
+    if (min !== undefined)
+        input.min = min;
+    if (max !== undefined)
+        input.max = max;
+    return input;
+}
+
+
+export function createRowParamXYZ({ text = 'Label',
+    value: { x = 0, y = 0, z = 0 },
+    precision = undefined,
+    update,
+    min = undefined,
+    max = undefined }) {
+
+    const row = new UIRow();
+    const inputX = createNumberInput({ update, precision, value: x });
+    const inputY = createNumberInput({ update, precision, value: y });
+    const inputZ = createNumberInput({ update, precision, value: z });
+    const label = new UIText(text).setWidth('90px');
+
+    row.add(label);
+    row.add(inputX, inputY, inputZ);
+    return [row, inputX, inputY, inputZ, label];
+}
+
+export function createRowParam({ text = 'Label',
+    value = 0,
+    precision = undefined,
+    update,
+    min = undefined,
+    max = undefined }) {
+
+    const row = new UIRow();
+    const input = createNumberInput({ update, precision, value });
+    const label = new UIText(text).setWidth('90px');
+
+    row.add(label);
+    row.add(input);
+    return [row, input, label];
+}
+
+export function createRowSelect({
+    text = 'Label',
+    options = undefined,
+    value = undefined,
+    update
+}) {
+
+    const row = new UIRow();
+    const select = new UISelect().setWidth('150px').setFontSize('12px').setOptions(options).setValue(value).onChange(update);
+    const label = new UIText(text).setWidth('90px');
+
+    row.add(label);
+    row.add(select);
+    return [row, select, label];
+}
diff --git a/src/WrapperApp/WrapperApp.tsx b/src/WrapperApp/WrapperApp.tsx
@@ -15,7 +15,7 @@ import ResultsPanel from './components/ResultsPanel';
 function WrapperApp() {
 	const { editorRef } = useStore();
 
-	const [tabsValue, setTabsValue] = useState(2);
+	const [tabsValue, setTabsValue] = useState(0);
 	const [currentUser, setCurrentUser] = useState<UserData | null>(null);
 
 	const handleChange = (event: SyntheticEvent, newValue: number) => {