Skip to content

Commit 2408112

Browse files
mrdoobmrdoob
authored
Editor: Add Resources panel to Project sidebar. (#32729)
1 parent f02c685 commit 2408112

File tree

4 files changed

+231
-4
lines changed

4 files changed

+231
-4
lines changed

‎editor/css/main.css‎

Lines changed: 5 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -121,11 +121,15 @@ textarea, input { outline: none; } /* osx */
121121
}
122122

123123
.Listbox .ListboxItem {
124-
padding: 6px;
124+
padding: 4px;
125125
color: #666;
126126
white-space: nowrap;
127127
}
128128

129+
.Listbox .ListboxItem:hover {
130+
background-color: rgba(0, 0, 0, 0.02);
131+
}
132+
129133
.Listbox .ListboxItem.active {
130134
background-color: rgba(0, 0, 0, 0.04);
131135
}

‎editor/js/Sidebar.Project.Resources.js‎

Lines changed: 211 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,211 @@
1+
import { UIPanel, UIText, UITabbedPanel, UIListbox, UIButton } from './libs/ui.js';
2+
3+
import { SetGeometryCommand } from './commands/SetGeometryCommand.js';
4+
import { SetMaterialCommand } from './commands/SetMaterialCommand.js';
5+
6+
function SidebarProjectResources( editor ) {
7+
8+
const signals = editor.signals;
9+
const strings = editor.strings;
10+
11+
const container = new UITabbedPanel();
12+
13+
// Geometries
14+
15+
const geometriesTab = new UIPanel();
16+
geometriesTab.dom.style.borderTop = 'none';
17+
const geometriesListbox = new UIListbox();
18+
geometriesListbox.dom.style.height = '140px';
19+
geometriesListbox.dom.style.resize = 'vertical';
20+
geometriesListbox.dom.style.marginBottom = '10px';
21+
geometriesTab.add( geometriesListbox );
22+
23+
const geometriesAssign = new UIButton( strings.getKey( 'sidebar/project/Assign' ) );
24+
geometriesTab.add( geometriesAssign );
25+
26+
const geometriesInfo = new UIText();
27+
geometriesInfo.dom.style.float = 'right';
28+
geometriesTab.add( geometriesInfo );
29+
geometriesAssign.onClick( function () {
30+
31+
const selectedObject = editor.selected;
32+
33+
if ( selectedObject !== null && selectedObject.geometry !== undefined ) {
34+
35+
const selectedId = geometriesListbox.getValue();
36+
const geometries = Object.values( editor.geometries );
37+
const geometry = geometries.find( g => g.id === parseInt( selectedId ) );
38+
39+
if ( geometry !== undefined ) {
40+
41+
editor.execute( new SetGeometryCommand( editor, selectedObject, geometry ) );
42+
43+
}
44+
45+
}
46+
47+
} );
48+
49+
container.addTab( 'geometries', strings.getKey( 'sidebar/project/geometries' ), geometriesTab );
50+
51+
// Materials
52+
53+
const materialsTab = new UIPanel();
54+
materialsTab.dom.style.borderTop = 'none';
55+
const materialsListbox = new UIListbox();
56+
materialsListbox.dom.style.height = '140px';
57+
materialsListbox.dom.style.resize = 'vertical';
58+
materialsListbox.dom.style.marginBottom = '10px';
59+
materialsTab.add( materialsListbox );
60+
61+
const materialsAssign = new UIButton( strings.getKey( 'sidebar/project/Assign' ) );
62+
materialsTab.add( materialsAssign );
63+
64+
const materialsInfo = new UIText();
65+
materialsInfo.dom.style.float = 'right';
66+
materialsTab.add( materialsInfo );
67+
68+
materialsAssign.onClick( function () {
69+
70+
const selectedObject = editor.selected;
71+
72+
if ( selectedObject !== null && selectedObject.material !== undefined ) {
73+
74+
const selectedId = materialsListbox.getValue();
75+
const materials = Object.values( editor.materials );
76+
const material = materials.find( m => m.id === parseInt( selectedId ) );
77+
78+
if ( material !== undefined ) {
79+
80+
editor.execute( new SetMaterialCommand( editor, selectedObject, material ) );
81+
82+
}
83+
84+
}
85+
86+
} );
87+
88+
container.addTab( 'materials', strings.getKey( 'sidebar/project/materials' ), materialsTab );
89+
90+
// Textures
91+
92+
const texturesTab = new UIPanel();
93+
texturesTab.dom.style.borderTop = 'none';
94+
const texturesListbox = new UIListbox();
95+
texturesListbox.dom.style.height = '140px';
96+
texturesListbox.dom.style.resize = 'vertical';
97+
texturesListbox.dom.style.marginBottom = '10px';
98+
texturesTab.add( texturesListbox );
99+
100+
const texturesInfo = new UIText();
101+
texturesInfo.dom.style.float = 'right';
102+
texturesTab.add( texturesInfo );
103+
104+
container.addTab( 'textures', strings.getKey( 'sidebar/project/textures' ), texturesTab );
105+
106+
container.select( 'geometries' );
107+
108+
// Signals
109+
110+
function refreshGeometriesUI() {
111+
112+
const geometries = Object.values( editor.geometries );
113+
114+
geometriesListbox.setItems( geometries );
115+
geometriesInfo.setValue( geometries.length + ' ' + strings.getKey( 'sidebar/project/geometries' ).toLowerCase() );
116+
117+
}
118+
119+
function refreshMaterialsUI() {
120+
121+
const materials = Object.values( editor.materials );
122+
123+
materialsListbox.setItems( materials );
124+
materialsInfo.setValue( materials.length + ' ' + strings.getKey( 'sidebar/project/materials' ).toLowerCase() );
125+
126+
}
127+
128+
function refreshTexturesUI() {
129+
130+
const textures = [];
131+
const texturesUsed = new Set();
132+
133+
const materials = Object.values( editor.materials );
134+
135+
for ( const material of materials ) {
136+
137+
for ( const property in material ) {
138+
139+
const value = material[ property ];
140+
141+
if ( value !== null && value !== undefined && value.isTexture === true ) {
142+
143+
if ( texturesUsed.has( value.uuid ) === false ) {
144+
145+
textures.push( value );
146+
texturesUsed.add( value.uuid );
147+
148+
}
149+
150+
}
151+
152+
}
153+
154+
}
155+
156+
texturesListbox.setItems( textures );
157+
texturesInfo.setValue( textures.length + ' ' + strings.getKey( 'sidebar/project/textures' ).toLowerCase() );
158+
159+
}
160+
161+
function refreshUI() {
162+
163+
refreshGeometriesUI();
164+
refreshMaterialsUI();
165+
refreshTexturesUI();
166+
167+
}
168+
169+
signals.editorCleared.add( refreshUI );
170+
signals.sceneGraphChanged.add( refreshUI );
171+
signals.geometryChanged.add( refreshGeometriesUI );
172+
signals.materialAdded.add( refreshMaterialsUI );
173+
signals.materialChanged.add( refreshMaterialsUI );
174+
signals.materialRemoved.add( refreshMaterialsUI );
175+
176+
signals.objectSelected.add( function ( object ) {
177+
178+
if ( object !== null ) {
179+
180+
const geometries = Object.values( editor.geometries );
181+
const materials = Object.values( editor.materials );
182+
183+
if ( object.geometry !== undefined ) {
184+
185+
const geometryIndex = geometries.indexOf( object.geometry );
186+
geometriesListbox.selectIndex( geometryIndex );
187+
188+
}
189+
190+
if ( object.material !== undefined ) {
191+
192+
const material = Array.isArray( object.material ) ? object.material[ 0 ] : object.material;
193+
const materialIndex = materials.indexOf( material );
194+
materialsListbox.selectIndex( materialIndex );
195+
196+
}
197+
198+
} else {
199+
200+
geometriesListbox.selectIndex( - 1 );
201+
materialsListbox.selectIndex( - 1 );
202+
203+
}
204+
205+
} );
206+
207+
return container;
208+
209+
}
210+
211+
export { SidebarProjectResources };

‎editor/js/Sidebar.Project.js‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,19 +1,19 @@
11
import { UISpan } from './libs/ui.js';
22

33
import { SidebarProjectApp } from './Sidebar.Project.App.js';
4-
/* import { SidebarProjectMaterials } from './Sidebar.Project.Materials.js'; */
54
import { SidebarProjectRenderer } from './Sidebar.Project.Renderer.js';
5+
import { SidebarProjectResources } from './Sidebar.Project.Resources.js';
66

77
function SidebarProject( editor ) {
88

99
const container = new UISpan();
1010

1111
container.add( new SidebarProjectRenderer( editor ) );
1212

13-
/* container.add( new SidebarProjectMaterials( editor ) ); */
14-
1513
container.add( new SidebarProjectApp( editor ) );
1614

15+
container.add( new SidebarProjectResources( editor ) );
16+
1717
return container;
1818

1919
}

‎editor/js/Strings.js‎

Lines changed: 12 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -354,7 +354,9 @@ function Strings( config ) {
354354
'sidebar/project/antialias': 'آنتی الآیس',
355355
'sidebar/project/shadows': 'سایه ها',
356356
'sidebar/project/toneMapping': 'تون مپینگ',
357+
'sidebar/project/geometries': 'هندسه ها',
357358
'sidebar/project/materials': 'متریال ها',
359+
'sidebar/project/textures': 'تکستچرها',
358360
'sidebar/project/Assign': 'اختصاص',
359361

360362
'sidebar/project/app': 'اپ',
@@ -762,7 +764,9 @@ function Strings( config ) {
762764
'sidebar/project/antialias': 'Antialias',
763765
'sidebar/project/shadows': 'Shadows',
764766
'sidebar/project/toneMapping': 'Tonemapping',
767+
'sidebar/project/geometries': 'Geometries',
765768
'sidebar/project/materials': 'Materials',
769+
'sidebar/project/textures': 'Textures',
766770
'sidebar/project/Assign': 'Assign',
767771

768772
'sidebar/project/app': 'App',
@@ -1171,7 +1175,9 @@ function Strings( config ) {
11711175
'sidebar/project/antialias': 'Anticrénelage',
11721176
'sidebar/project/shadows': 'Ombres',
11731177
'sidebar/project/toneMapping': 'Mappage des nuances',
1178+
'sidebar/project/geometries': 'Géométries',
11741179
'sidebar/project/materials': 'Matériaux',
1180+
'sidebar/project/textures': 'Textures',
11751181
'sidebar/project/Assign': 'Attribuer',
11761182

11771183
'sidebar/project/app': 'App',
@@ -1580,7 +1586,9 @@ function Strings( config ) {
15801586
'sidebar/project/antialias': '抗锯齿',
15811587
'sidebar/project/shadows': '阴影',
15821588
'sidebar/project/toneMapping': '色调映射',
1589+
'sidebar/project/geometries': '几何体',
15831590
'sidebar/project/materials': '材质',
1591+
'sidebar/project/textures': '纹理',
15841592
'sidebar/project/Assign': '应用',
15851593

15861594
'sidebar/project/app': 'App',
@@ -1989,7 +1997,9 @@ function Strings( config ) {
19891997
'sidebar/project/antialias': 'アンチエイリアス',
19901998
'sidebar/project/shadows': 'シャドウ',
19911999
'sidebar/project/toneMapping': 'トーンマッピング',
2000+
'sidebar/project/geometries': 'ジオメトリ',
19922001
'sidebar/project/materials': 'マテリアル',
2002+
'sidebar/project/textures': 'テクスチャ',
19932003
'sidebar/project/Assign': '割り当て',
19942004

19952005
'sidebar/project/app': 'アプリ',
@@ -2397,7 +2407,9 @@ function Strings( config ) {
23972407
'sidebar/project/antialias': '안티앨리어싱',
23982408
'sidebar/project/shadows': '그림자',
23992409
'sidebar/project/toneMapping': '톤 매핑',
2410+
'sidebar/project/geometries': '지오메트리',
24002411
'sidebar/project/materials': '머티리얼',
2412+
'sidebar/project/textures': '텍스처',
24012413
'sidebar/project/Assign': '할당',
24022414

24032415
'sidebar/project/app': '앱',

0 commit comments

Comments
 (0)