Editor: Fix UI of geometry generators when undo/redo. (#28610)

editor/js/Sidebar.Geometry.BoxGeometry.js

@@ -7,6 +7,7 @@ import { SetGeometryCommand } from './commands/SetGeometryCommand.js';
 function GeometryParametersPanel( editor, object ) {
 
 	const strings = editor.strings;
+	const signals = editor.signals;
 
 	const container = new UIDiv();
 
@@ -75,6 +76,23 @@ function GeometryParametersPanel( editor, object ) {
 
 	//
 
+	function refreshUI() {
+
+		const parameters = object.geometry.parameters;
+
+		width.setValue( parameters.width );
+		height.setValue( parameters.height );
+		depth.setValue( parameters.depth );
+		widthSegments.setValue( parameters.widthSegments );
+		heightSegments.setValue( parameters.heightSegments );
+		depthSegments.setValue( parameters.depthSegments );
+
+	}
+
+	signals.geometryChanged.add( refreshUI );
+
+	//
+
 	function update() {
 
 		editor.execute( new SetGeometryCommand( editor, object, new THREE.BoxGeometry(

editor/js/Sidebar.Geometry.CapsuleGeometry.js

@@ -7,6 +7,7 @@ import { SetGeometryCommand } from './commands/SetGeometryCommand.js';
 function GeometryParametersPanel( editor, object ) {
 
 	const strings = editor.strings;
+	const signals = editor.signals;
 
 	const container = new UIDiv();
 
@@ -55,6 +56,21 @@ function GeometryParametersPanel( editor, object ) {
 
 	//
 
+	function refreshUI() {
+
+		const parameters = object.geometry.parameters;
+
+		radius.setValue( parameters.radius );
+		length.setValue( parameters.length );
+		capSegments.setValue( parameters.capSegments );
+		radialSegments.setValue( parameters.radialSegments );
+
+	}
+
+	signals.geometryChanged.add( refreshUI );
+
+	//
+
 	function update() {
 
 		editor.execute( new SetGeometryCommand( editor, object, new THREE.CapsuleGeometry(

editor/js/Sidebar.Geometry.CircleGeometry.js

@@ -7,6 +7,7 @@ import { SetGeometryCommand } from './commands/SetGeometryCommand.js';
 function GeometryParametersPanel( editor, object ) {
 
 	const strings = editor.strings;
+	const signals = editor.signals;
 
 	const container = new UIDiv();
 
@@ -55,6 +56,21 @@ function GeometryParametersPanel( editor, object ) {
 
 	//
 
+	function refreshUI() {
+
+		const parameters = object.geometry.parameters;
+
+		radius.setValue( parameters.radius );
+		segments.setValue( parameters.segments );
+		thetaStart.setValue( parameters.thetaStart * THREE.MathUtils.RAD2DEG );
+		thetaLength.setValue( parameters.thetaLength * THREE.MathUtils.RAD2DEG );
+
+	}
+
+	signals.geometryChanged.add( refreshUI );
+
+	//
+
 	function update() {
 
 		editor.execute( new SetGeometryCommand( editor, object, new THREE.CircleGeometry(

editor/js/Sidebar.Geometry.CylinderGeometry.js

@@ -7,6 +7,7 @@ import { SetGeometryCommand } from './commands/SetGeometryCommand.js';
 function GeometryParametersPanel( editor, object ) {
 
 	const strings = editor.strings;
+	const signals = editor.signals;
 
 	const container = new UIDiv();
 
@@ -75,6 +76,23 @@ function GeometryParametersPanel( editor, object ) {
 
 	//
 
+	function refreshUI() {
+
+		const parameters = object.geometry.parameters;
+
+		radiusTop.setValue( parameters.radiusTop );
+		radiusBottom.setValue( parameters.radiusBottom );
+		height.setValue( parameters.height );
+		radialSegments.setValue( parameters.radialSegments );
+		heightSegments.setValue( parameters.heightSegments );
+		openEnded.setValue( parameters.openEnded );
+
+	}
+
+	signals.geometryChanged.add( refreshUI );
+
+	//
+
 	function update() {
 
 		editor.execute( new SetGeometryCommand( editor, object, new THREE.CylinderGeometry(

editor/js/Sidebar.Geometry.DodecahedronGeometry.js

@@ -7,6 +7,7 @@ import { SetGeometryCommand } from './commands/SetGeometryCommand.js';
 function GeometryParametersPanel( editor, object ) {
 
 	const strings = editor.strings;
+	const signals = editor.signals;
 
 	const container = new UIDiv();
 
@@ -35,6 +36,19 @@ function GeometryParametersPanel( editor, object ) {
 
 	//
 
+	function refreshUI() {
+
+		const parameters = object.geometry.parameters;
+
+		radius.setValue( parameters.radius );
+		detail.setValue( parameters.detail );
+
+	}
+
+	signals.geometryChanged.add( refreshUI );
+
+	//
+
 	function update() {
 
 		editor.execute( new SetGeometryCommand( editor, object, new THREE.DodecahedronGeometry(

editor/js/Sidebar.Geometry.ExtrudeGeometry.js

@@ -7,6 +7,7 @@ import { SetGeometryCommand } from './commands/SetGeometryCommand.js';
 function GeometryParametersPanel( editor, object ) {
 
 	const strings = editor.strings;
+	const signals = editor.signals;
 
 	const container = new UIDiv();
 
@@ -130,6 +131,27 @@ function GeometryParametersPanel( editor, object ) {
 
 	}
 
+	function refreshUI() {
+
+		const options = object.geometry.parameters.options;
+
+		curveSegments.setValue( options.curveSegments );
+		steps.setValue( options.steps );
+		depth.setValue( options.depth );
+		enabled.setValue( options.bevelEnabled );
+		thickness.setValue( options.bevelThickness );
+		size.setValue( options.bevelSize );
+		offset.setValue( options.bevelOffset );
+		segments.setValue( options.bevelSegments );
+
+		updateBevelRow( options.bevelEnabled );
+
+	}
+
+	signals.geometryChanged.add( refreshUI );
+
+	//
+
 	function update() {
 
 		updateBevelRow( enabled.getValue() );

editor/js/Sidebar.Geometry.IcosahedronGeometry.js

@@ -7,7 +7,6 @@ import { SetGeometryCommand } from './commands/SetGeometryCommand.js';
 function GeometryParametersPanel( editor, object ) {
 
 	const strings = editor.strings;
-
 	const signals = editor.signals;
 
 	const container = new UIDiv();
@@ -37,6 +36,19 @@ function GeometryParametersPanel( editor, object ) {
 
 	//
 
+	function refreshUI() {
+
+		const parameters = object.geometry.parameters;
+
+		radius.setValue( parameters.radius );
+		detail.setValue( parameters.detail );
+
+	}
+
+	signals.geometryChanged.add( refreshUI );
+
+	//
+
 	function update() {
 
 		editor.execute( new SetGeometryCommand( editor, object, new THREE.IcosahedronGeometry(
@@ -44,8 +56,6 @@ function GeometryParametersPanel( editor, object ) {
 			detail.getValue()
 		) ) );
 
-		signals.objectChanged.dispatch( object );
-
 	}
 
 	return container;

editor/js/Sidebar.Geometry.LatheGeometry.js

@@ -8,6 +8,7 @@ import { SetGeometryCommand } from './commands/SetGeometryCommand.js';
 function GeometryParametersPanel( editor, object ) {
 
 	const strings = editor.strings;
+	const signals = editor.signals;
 
 	const container = new UIDiv();
 
@@ -27,7 +28,7 @@ function GeometryParametersPanel( editor, object ) {
 	// phiStart
 
 	const phiStartRow = new UIRow();
-	const phiStart = new UINumber( parameters.phiStart * 180 / Math.PI ).onChange( update );
+	const phiStart = new UINumber( parameters.phiStart * THREE.MathUtils.RAD2DEG ).onChange( update );
 
 	phiStartRow.add( new UIText( strings.getKey( 'sidebar/geometry/lathe_geometry/phistart' ) ).setClass( 'Label' ) );
 	phiStartRow.add( phiStart );
@@ -37,7 +38,7 @@ function GeometryParametersPanel( editor, object ) {
 	// phiLength
 
 	const phiLengthRow = new UIRow();
-	const phiLength = new UINumber( parameters.phiLength * 180 / Math.PI ).onChange( update );
+	const phiLength = new UINumber( parameters.phiLength * THREE.MathUtils.RAD2DEG ).onChange( update );
 
 	phiLengthRow.add( new UIText( strings.getKey( 'sidebar/geometry/lathe_geometry/philength' ) ).setClass( 'Label' ) );
 	phiLengthRow.add( phiLength );
@@ -54,13 +55,27 @@ function GeometryParametersPanel( editor, object ) {
 
 	container.add( pointsRow );
 
+	//
+
+	function refreshUI() {
+
+		const parameters = object.geometry.parameters;
+
+		segments.setValue( parameters.segments );
+		phiStart.setValue( parameters.phiStart * THREE.MathUtils.RAD2DEG );
+		phiLength.setValue( parameters.phiLength * THREE.MathUtils.RAD2DEG );
+
+	}
+
+	signals.geometryChanged.add( refreshUI );
+
 	function update() {
 
 		editor.execute( new SetGeometryCommand( editor, object, new THREE.LatheGeometry(
 			points.getValue(),
 			segments.getValue(),
-			phiStart.getValue() / 180 * Math.PI,
-			phiLength.getValue() / 180 * Math.PI
+			phiStart.getValue() * THREE.MathUtils.DEG2RAD,
+			phiLength.getValue() * THREE.MathUtils.DEG2RAD
 		) ) );
 
 	}

editor/js/Sidebar.Geometry.OctahedronGeometry.js

@@ -35,6 +35,18 @@ function GeometryParametersPanel( editor, object ) {
 
 	container.add( detailRow );
 
+	//
+
+	function refreshUI() {
+
+		const parameters = object.geometry.parameters;
+
+		radius.setValue( parameters.radius );
+		detail.setValue( parameters.detail );
+
+	}
+
+	signals.geometryChanged.add( refreshUI );
 
 	//
 
@@ -45,8 +57,6 @@ function GeometryParametersPanel( editor, object ) {
 			detail.getValue()
 		) ) );
 
-		signals.objectChanged.dispatch( object );
-
 	}
 
 	return container;

editor/js/Sidebar.Geometry.PlaneGeometry.js

@@ -7,6 +7,7 @@ import { SetGeometryCommand } from './commands/SetGeometryCommand.js';
 function GeometryParametersPanel( editor, object ) {
 
 	const strings = editor.strings;
+	const signals = editor.signals;
 
 	const container = new UIDiv();
 
@@ -53,6 +54,20 @@ function GeometryParametersPanel( editor, object ) {
 
 	container.add( heightSegmentsRow );
 
+	//
+
+	function refreshUI() {
+
+		const parameters = object.geometry.parameters;
+
+		width.setValue( parameters.width );
+		height.setValue( parameters.height );
+		widthSegments.setValue( parameters.widthSegments );
+		heightSegments.setValue( parameters.heightSegments );
+
+	}
+
+	signals.geometryChanged.add( refreshUI );
 
 	//
 

editor/js/Sidebar.Geometry.RingGeometry.js

@@ -7,6 +7,7 @@ import { SetGeometryCommand } from './commands/SetGeometryCommand.js';
 function GeometryParametersPanel( editor, object ) {
 
 	const strings = editor.strings;
+	const signals = editor.signals;
 
 	const container = new UIDiv();
 
@@ -75,6 +76,23 @@ function GeometryParametersPanel( editor, object ) {
 
 	//
 
+	function refreshUI() {
+
+		const parameters = object.geometry.parameters;
+
+		innerRadius.setValue( parameters.innerRadius );
+		outerRadius.setValue( parameters.outerRadius );
+		thetaSegments.setValue( parameters.thetaSegments );
+		phiSegments.setValue( parameters.phiSegments );
+		thetaStart.setValue( parameters.thetaStart * THREE.MathUtils.RAD2DEG );
+		thetaLength.setValue( parameters.thetaLength * THREE.MathUtils.RAD2DEG );
+
+	}
+
+	signals.geometryChanged.add( refreshUI );
+
+	//
+
 	function update() {
 
 		editor.execute( new SetGeometryCommand( editor, object, new THREE.RingGeometry(

editor/js/Sidebar.Geometry.ShapeGeometry.js

@@ -7,6 +7,7 @@ import { SetGeometryCommand } from './commands/SetGeometryCommand.js';
 function GeometryParametersPanel( editor, object ) {
 
 	const strings = editor.strings;
+	const signals = editor.signals;
 
 	const container = new UIDiv();
 
@@ -29,6 +30,18 @@ function GeometryParametersPanel( editor, object ) {
 
 	//
 
+	function refreshUI() {
+
+		const parameters = object.geometry.parameters;
+
+		curveSegments.setValue( parameters.curveSegments );
+
+	}
+
+	signals.geometryChanged.add( refreshUI );
+
+	//
+
 	function changeShape() {
 
 		editor.execute( new SetGeometryCommand( editor, object, new THREE.ShapeGeometry(

editor/js/Sidebar.Geometry.SphereGeometry.js

@@ -7,6 +7,7 @@ import { SetGeometryCommand } from './commands/SetGeometryCommand.js';
 function GeometryParametersPanel( editor, object ) {
 
 	const strings = editor.strings;
+	const signals = editor.signals;
 
 	const container = new UIDiv();
 
@@ -83,6 +84,23 @@ function GeometryParametersPanel( editor, object ) {
 
 	container.add( thetaLengthRow );
 
+	//
+
+	function refreshUI() {
+
+		const parameters = object.geometry.parameters;
+
+		radius.setValue( parameters.radius );
+		widthSegments.setValue( parameters.widthSegments );
+		heightSegments.setValue( parameters.heightSegments );
+		phiStart.setValue( parameters.phiStart * THREE.MathUtils.RAD2DEG );
+		phiLength.setValue( parameters.phiLength * THREE.MathUtils.RAD2DEG );
+		thetaStart.setValue( parameters.thetaStart * THREE.MathUtils.RAD2DEG );
+		thetaLength.setValue( parameters.thetaLength * THREE.MathUtils.RAD2DEG );
+
+	}
+
+	signals.geometryChanged.add( refreshUI );
 
 	//
 

editor/js/Sidebar.Geometry.TetrahedronGeometry.js

@@ -35,6 +35,18 @@ function GeometryParametersPanel( editor, object ) {
 
 	container.add( detailRow );
 
+	//
+
+	function refreshUI() {
+
+		const parameters = object.geometry.parameters;
+
+		radius.setValue( parameters.radius );
+		detail.setValue( parameters.detail );
+
+	}
+
+	signals.geometryChanged.add( refreshUI );
 
 	//
 
@@ -45,8 +57,6 @@ function GeometryParametersPanel( editor, object ) {
 			detail.getValue()
 		) ) );
 
-		signals.objectChanged.dispatch( object );
-
 	}
 
 	return container;

editor/js/Sidebar.Geometry.TorusGeometry.js

@@ -7,6 +7,7 @@ import { SetGeometryCommand } from './commands/SetGeometryCommand.js';
 function GeometryParametersPanel( editor, object ) {
 
 	const strings = editor.strings;
+	const signals = editor.signals;
 
 	const container = new UIDiv();
 
@@ -63,6 +64,21 @@ function GeometryParametersPanel( editor, object ) {
 
 	container.add( arcRow );
 
+	//
+
+	function refreshUI() {
+
+		const parameters = object.geometry.parameters;
+
+		radius.setValue( parameters.radius );
+		tube.setValue( parameters.tube );
+		radialSegments.setValue( parameters.radialSegments );
+		tubularSegments.setValue( parameters.tubularSegments );
+		arc.setValue( parameters.arc * THREE.MathUtils.RAD2DEG );
+
+	}
+
+	signals.geometryChanged.add( refreshUI );
 
 	//
 

editor/js/Sidebar.Geometry.TorusKnotGeometry.js

@@ -7,6 +7,7 @@ import { SetGeometryCommand } from './commands/SetGeometryCommand.js';
 function GeometryParametersPanel( editor, object ) {
 
 	const strings = editor.strings;
+	const signals = editor.signals;
 
 	const container = new UIDiv();
 
@@ -56,7 +57,7 @@ function GeometryParametersPanel( editor, object ) {
 	// p
 
 	const pRow = new UIRow();
-	const p = new UINumber( parameters.p ).onChange( update );
+	const p = new UIInteger( parameters.p ).onChange( update );
 
 	pRow.add( new UIText( strings.getKey( 'sidebar/geometry/torusKnot_geometry/p' ) ).setClass( 'Label' ) );
 	pRow.add( p );
@@ -66,13 +67,29 @@ function GeometryParametersPanel( editor, object ) {
 	// q
 
 	const qRow = new UIRow();
-	const q = new UINumber( parameters.q ).onChange( update );
+	const q = new UIInteger( parameters.q ).onChange( update );
 
 	qRow.add( new UIText( strings.getKey( 'sidebar/geometry/torusKnot_geometry/q' ) ).setClass( 'Label' ) );
 	qRow.add( q );
 
 	container.add( qRow );
 
+	//
+
+	function refreshUI() {
+
+		const parameters = object.geometry.parameters;
+
+		radius.setValue( parameters.radius );
+		tube.setValue( parameters.tube );
+		tubularSegments.setValue( parameters.tubularSegments );
+		radialSegments.setValue( parameters.radialSegments );
+		p.setValue( parameters.p );
+		q.setValue( parameters.q );
+
+	}
+
+	signals.geometryChanged.add( refreshUI );
 
 	//
 

editor/js/Sidebar.Geometry.TubeGeometry.js

@@ -8,6 +8,7 @@ import { SetGeometryCommand } from './commands/SetGeometryCommand.js';
 function GeometryParametersPanel( editor, object ) {
 
 	const strings = editor.strings;
+	const signals = editor.signals;
 
 	const container = new UIDiv();
 
@@ -84,6 +85,26 @@ function GeometryParametersPanel( editor, object ) {
 
 	//
 
+	function refreshUI() {
+
+		const parameters = object.geometry.parameters;
+
+		tubularSegments.setValue( parameters.tubularSegments );
+		radius.setValue( parameters.radius );
+		radialSegments.setValue( parameters.radialSegments );
+		closed.setValue( parameters.closed );
+
+		curveType.setValue( parameters.path.curveType );
+		tension.setValue( parameters.path.tension );
+
+		tensionRow.setDisplay( curveType.getValue() == 'catmullrom' ? '' : 'none' );
+
+	}
+
+	signals.geometryChanged.add( refreshUI );
+
+	//
+
 	function update() {
 
 		tensionRow.setDisplay( curveType.getValue() == 'catmullrom' ? '' : 'none' );