Editor: Moved grid and helpers settings to Viewport.Controls.

mrdoob · Nov 28, 2023 · e0d329d · e0d329d
1 parent 6663195
commit e0d329d
Show file tree

Hide file tree

Showing 6 changed files with 41 additions and 63 deletions.
diff --git a/editor/js/Sidebar.Settings.Viewport.js b/editor/js/Sidebar.Settings.Viewport.js
diff --git a/editor/js/Sidebar.Settings.js b/editor/js/Sidebar.Settings.js
@@ -1,6 +1,5 @@
 import { UIPanel, UIRow, UISelect, UISpan, UIText } from './libs/ui.js';
 
-import { SidebarSettingsViewport } from './Sidebar.Settings.Viewport.js';
 import { SidebarSettingsShortcuts } from './Sidebar.Settings.Shortcuts.js';
 import { SidebarSettingsHistory } from './Sidebar.Settings.History.js';
 
@@ -49,7 +48,6 @@ function SidebarSettings( editor ) {
 
 	//
 
-	container.add( new SidebarSettingsViewport( editor ) );
 	container.add( new SidebarSettingsShortcuts( editor ) );
 	container.add( new SidebarSettingsHistory( editor ) );
 

diff --git a/editor/js/Strings.js b/editor/js/Strings.js
@@ -336,10 +336,6 @@ function Strings( config ) {
 			'sidebar/settings/shortcuts/undo': 'Undo',
 			'sidebar/settings/shortcuts/focus': 'Focus',
 
-			'sidebar/settings/viewport': 'Viewport',
-			'sidebar/settings/viewport/grid': 'Grid',
-			'sidebar/settings/viewport/helpers': 'Helpers',
-
 			'sidebar/history': 'History',
 			'sidebar/history/persistent': 'persistent',
 
@@ -348,6 +344,9 @@ function Strings( config ) {
 			'toolbar/scale': 'Scale',
 			'toolbar/local': 'Local',
 
+			'viewport/controls/grid': 'Grid',
+			'viewport/controls/helpers': 'Helpers',
+
 			'viewport/info/objects': 'Objects',
 			'viewport/info/vertices': 'Vertices',
 			'viewport/info/triangles': 'Triangles',
@@ -685,10 +684,6 @@ function Strings( config ) {
 			'sidebar/settings/shortcuts/undo': 'Annuler',
 			'sidebar/settings/shortcuts/focus': 'Focus',
 
-			'sidebar/settings/viewport': 'Viewport',
-			'sidebar/settings/viewport/grid': 'Grille',
-			'sidebar/settings/viewport/helpers': 'Helpers',
-
 			'sidebar/history': 'Historique',
 			'sidebar/history/persistent': 'permanent',
 
@@ -697,6 +692,9 @@ function Strings( config ) {
 			'toolbar/scale': 'Échelle',
 			'toolbar/local': 'Local',
 
+			'viewport/controls/grid': 'Grille',
+			'viewport/controls/helpers': 'Helpers',
+
 			'viewport/info/objects': 'Objets',
 			'viewport/info/vertices': 'Sommets',
 			'viewport/info/triangles': 'Triangles',
@@ -1034,10 +1032,6 @@ function Strings( config ) {
 			'sidebar/settings/shortcuts/undo': '撤销',
 			'sidebar/settings/shortcuts/focus': '聚焦',
 
-			'sidebar/settings/viewport': '视窗',
-			'sidebar/settings/viewport/grid': '网格',
-			'sidebar/settings/viewport/helpers': '辅助',
-
 			'sidebar/history': '历史记录',
 			'sidebar/history/persistent': '本地存储',
 
@@ -1046,6 +1040,9 @@ function Strings( config ) {
 			'toolbar/scale': '缩放',
 			'toolbar/local': '本地',
 
+			'viewport/controls/grid': '网格',
+			'viewport/controls/helpers': '辅助',
+
 			'viewport/info/objects': '物体',
 			'viewport/info/vertices': '顶点',
 			'viewport/info/triangles': '三角形',

diff --git a/editor/js/Viewport.Controls.js b/editor/js/Viewport.Controls.js
@@ -1,17 +1,41 @@
 import { UIPanel, UISelect } from './libs/ui.js';
+import { UIBoolean } from './libs/ui.three.js';
 
 function ViewportControls( editor ) {
 
 	const signals = editor.signals;
+	const strings = editor.strings;
 
 	const container = new UIPanel();
 	container.setPosition( 'absolute' );
 	container.setRight( '10px' );
 	container.setTop( '10px' );
+	container.setColor( '#ffffff' );
+
+	// grid
+
+	const gridCheckbox = new UIBoolean( true, strings.getKey( 'viewport/controls/grid' ) );
+	gridCheckbox.onChange( function () {
+
+		signals.showGridChanged.dispatch( this.getValue() );
+
+	} );
+	container.add( gridCheckbox );
+
+	// helpers
+
+	const helpersCheckbox = new UIBoolean( true, strings.getKey( 'viewport/controls/helpers' ) );
+	helpersCheckbox.onChange( function () {
+
+		signals.showHelpersChanged.dispatch( this.getValue() );
+
+	} );
+	container.add( helpersCheckbox );
 
 	// camera
 
 	const cameraSelect = new UISelect();
+	cameraSelect.setMarginLeft( '10px' );
 	cameraSelect.setMarginRight( '10px' );
 	cameraSelect.onChange( function () {
 

diff --git a/editor/js/libs/ui.js b/editor/js/libs/ui.js
@@ -429,6 +429,14 @@ class UICheckbox extends UIElement {
 		this.dom.className = 'Checkbox';
 		this.dom.type = 'checkbox';
 
+		this.dom.addEventListener( 'pointerdown', function ( event ) {
+
+			// Workaround for TransformControls blocking events in Viewport.Controls checkboxes
+
+			event.stopPropagation();
+
+		} );
+
 		this.setValue( boolean );
 
 	}

diff --git a/editor/sw.js b/editor/sw.js
@@ -149,7 +149,6 @@ const assets = [
 	'./js/Sidebar.Settings.js',
 	'./js/Sidebar.Settings.History.js',
 	'./js/Sidebar.Settings.Shortcuts.js',
-	'./js/Sidebar.Settings.Viewport.js',
 	'./js/Sidebar.Properties.js',
 	'./js/Sidebar.Object.js',
 	'./js/Sidebar.Geometry.js',