Editor: Add support for Material.userData. (#23967)

editor/js/Sidebar.Material.js

@@ -1,6 +1,6 @@
 import * as THREE from 'three';
 
-import { UIButton, UIInput, UIPanel, UIRow, UISelect, UIText } from './libs/ui.js';
+import { UIButton, UIInput, UIPanel, UIRow, UISelect, UIText, UITextArea } from './libs/ui.js';
 
 import { SetMaterialCommand } from './commands/SetMaterialCommand.js';
 import { SetMaterialValueCommand } from './commands/SetMaterialValueCommand.js';
@@ -310,6 +310,33 @@ function SidebarMaterial( editor ) {
 	const materialWireframe = new SidebarMaterialBooleanProperty( editor, 'wireframe', strings.getKey( 'sidebar/material/wireframe' ) );
 	container.add( materialWireframe );
 
+	// userData
+
+	const materialUserDataRow = new UIRow();
+	const materialUserData = new UITextArea().setWidth( '150px' ).setHeight( '40px' ).setFontSize( '12px' ).onChange( update );
+	materialUserData.onKeyUp( function () {
+
+		try {
+
+			JSON.parse( materialUserData.getValue() );
+
+			materialUserData.dom.classList.add( 'success' );
+			materialUserData.dom.classList.remove( 'fail' );
+
+		} catch ( error ) {
+
+			materialUserData.dom.classList.remove( 'success' );
+			materialUserData.dom.classList.add( 'fail' );
+
+		}
+
+	} );
+
+	materialUserDataRow.add( new UIText( strings.getKey( 'sidebar/material/userdata' ) ).setWidth( '90px' ) );
+	materialUserDataRow.add( materialUserData );
+
+	container.add( materialUserDataRow );
+
 	//
 
 	function update() {
@@ -362,6 +389,21 @@ function SidebarMaterial( editor ) {
 
 			}
 
+			try {
+
+				const userData = JSON.parse( materialUserData.getValue() );
+				if ( JSON.stringify( material.userData ) != JSON.stringify( userData ) ) {
+
+					editor.execute( new SetMaterialValueCommand( editor, currentObject, 'userData', userData, currentMaterialSlot ) );
+
+				}
+
+			} catch ( exception ) {
+
+				console.warn( exception );
+
+			}
+
 			refreshUI();
 
 		}
@@ -444,6 +486,19 @@ function SidebarMaterial( editor ) {
 
 		setRowVisibility();
 
+		try {
+
+			materialUserData.setValue( JSON.stringify( material.userData, null, '  ' ) );
+
+		} catch ( error ) {
+
+			console.log( error );
+
+		}
+
+		materialUserData.setBorderColor( 'transparent' );
+		materialUserData.setBackgroundColor( '' );
+
 	}
 
 	// events

editor/js/Strings.js

@@ -286,6 +286,7 @@ function Strings( config ) {
 			'sidebar/material/depthtest': 'Depth Test',
 			'sidebar/material/depthwrite': 'Depth Write',
 			'sidebar/material/wireframe': 'Wireframe',
+			'sidebar/material/userdata': 'User data',
 
 			'sidebar/script': 'Script',
 			'sidebar/script/new': 'New',
@@ -620,6 +621,7 @@ function Strings( config ) {
 			'sidebar/material/depthtest': 'Depth Test',
 			'sidebar/material/depthwrite': 'Depth Write',
 			'sidebar/material/wireframe': 'Fil de fer',
+			'sidebar/material/userdata': 'Données utilisateur',
 
 			'sidebar/script': 'Script',
 			'sidebar/script/new': 'Nouveau',
@@ -954,6 +956,7 @@ function Strings( config ) {
 			'sidebar/material/depthtest': '深度测试',
 			'sidebar/material/depthwrite': '深度缓冲',
 			'sidebar/material/wireframe': '线框',
+			'sidebar/material/userdata': '自定义数据',
 
 			'sidebar/script': '脚本',
 			'sidebar/script/new': '新建',