1
1
/* global chrome */
2
2
3
- // Store the state of our inspector
3
+ // --- Utility Functions ---
4
+ function getObjectIcon ( obj ) {
5
+ if ( obj . isScene ) return '🌍' ;
6
+ if ( obj . isCamera ) return '📷' ;
7
+ if ( obj . isLight ) return '💡' ;
8
+ if ( obj . isInstancedMesh ) return '🔸' ;
9
+ if ( obj . isMesh ) return '🔷' ;
10
+ if ( obj . type === 'Group' ) return '📁' ;
11
+ return '📦' ;
12
+ }
13
+
14
+ function createPropertyRow ( label , value ) {
15
+ const row = document . createElement ( 'div' ) ;
16
+ row . className = 'property-row' ;
17
+ row . style . display = 'flex' ;
18
+ row . style . justifyContent = 'space-between' ;
19
+ row . style . marginBottom = '2px' ;
20
+
21
+ const labelSpan = document . createElement ( 'span' ) ;
22
+ labelSpan . className = 'property-label' ;
23
+ labelSpan . textContent = `${ label } :` ;
24
+ labelSpan . style . marginRight = '10px' ;
25
+ labelSpan . style . whiteSpace = 'nowrap' ;
26
+
27
+ const valueSpan = document . createElement ( 'span' ) ;
28
+ valueSpan . className = 'property-value' ;
29
+ const displayValue = ( value === undefined || value === null )
30
+ ? '–'
31
+ : ( typeof value === 'number' ? value . toLocaleString ( ) : value ) ;
32
+ valueSpan . textContent = displayValue ;
33
+ valueSpan . style . textAlign = 'right' ;
34
+
35
+ row . appendChild ( labelSpan ) ;
36
+ row . appendChild ( valueSpan ) ;
37
+ return row ;
38
+ }
39
+
40
+ // --- State ---
4
41
const state = {
5
42
revision : null ,
6
43
scenes : new Map ( ) ,
@@ -82,7 +119,6 @@ function handleThreeEvent( message ) {
82
119
83
120
case 'register' :
84
121
state . revision = message . detail . revision ;
85
- updateUI ( ) ;
86
122
break ;
87
123
88
124
// Handle individual renderer observation
@@ -106,8 +142,6 @@ function handleThreeEvent( message ) {
106
142
// rebuilds the entire renderer element anyway, using the updated data
107
143
// from state.renderers and the persisted open/closed state.
108
144
109
- updateUI ( ) ; // Call updateUI to rebuild based on the new state
110
-
111
145
break ;
112
146
113
147
// Handle a batch of objects for a specific scene
@@ -173,8 +207,6 @@ function handleThreeEvent( message ) {
173
207
174
208
} ) ;
175
209
176
- // Update UI once after processing the entire batch
177
- updateUI ( ) ;
178
210
break ;
179
211
180
212
case 'committed' :
@@ -184,18 +216,7 @@ function handleThreeEvent( message ) {
184
216
185
217
}
186
218
187
- }
188
-
189
- // Function to get an object icon based on its type
190
- function getObjectIcon ( obj ) {
191
-
192
- if ( obj . isScene ) return '🌍' ;
193
- if ( obj . isCamera ) return '📷' ;
194
- if ( obj . isLight ) return '💡' ;
195
- if ( obj . isInstancedMesh ) return '🔸' ;
196
- if ( obj . isMesh ) return '🔷' ;
197
- if ( obj . type === 'Group' ) return '📁' ;
198
- return '📦' ;
219
+ updateUI ( ) ;
199
220
200
221
}
201
222
@@ -207,13 +228,7 @@ function renderRenderer( obj, container ) {
207
228
detailsElement . setAttribute ( 'data-uuid' , obj . uuid ) ;
208
229
209
230
// Set initial state
210
- detailsElement . open = false ;
211
-
212
- if ( rendererCollapsedState . has ( obj . uuid ) ) {
213
-
214
- detailsElement . open = rendererCollapsedState . get ( obj . uuid ) ;
215
-
216
- }
231
+ detailsElement . open = rendererCollapsedState . get ( obj . uuid ) || false ;
217
232
218
233
// Add toggle listener to save state
219
234
detailsElement . addEventListener ( 'toggle' , ( ) => {
@@ -479,33 +494,3 @@ function updateUI() {
479
494
// Initial UI update
480
495
clearState ( ) ;
481
496
updateUI ( ) ;
482
-
483
- // Helper function to create a property row (Label: Value)
484
- function createPropertyRow ( label , value ) {
485
-
486
- const row = document . createElement ( 'div' ) ;
487
- row . className = 'property-row' ; // Add class for potential styling
488
- row . style . display = 'flex' ;
489
- row . style . justifyContent = 'space-between' ; // Align label left, value right
490
- row . style . marginBottom = '2px' ; // Small gap between rows
491
-
492
- const labelSpan = document . createElement ( 'span' ) ;
493
- labelSpan . className = 'property-label' ;
494
- labelSpan . textContent = `${ label } :` ;
495
- labelSpan . style . marginRight = '10px' ; // Space between label and value
496
- labelSpan . style . whiteSpace = 'nowrap' ; // Prevent label wrapping
497
-
498
- const valueSpan = document . createElement ( 'span' ) ;
499
- valueSpan . className = 'property-value' ;
500
- // Format numbers nicely, handle undefined/null with '–'
501
- const displayValue = ( value === undefined || value === null )
502
- ? '–'
503
- : ( typeof value === 'number' ? value . toLocaleString ( ) : value ) ;
504
- valueSpan . textContent = displayValue ;
505
- valueSpan . style . textAlign = 'right' ; // Align value text to the right
506
-
507
- row . appendChild ( labelSpan ) ;
508
- row . appendChild ( valueSpan ) ;
509
- return row ;
510
-
511
- }
0 commit comments