157
157
<p class =" text-muted text-xs" >
158
158
Vue Nodes: {{ shouldRenderVueNodes ? 'Enabled' : 'Disabled' }}
159
159
</p >
160
- <p class =" text-muted text-xs" >
161
- Viewport Culling:
162
- {{ isViewportCullingEnabled ? 'Enabled' : 'Disabled' }}
163
- </p >
164
160
<p class =" text-muted text-xs" >
165
161
Dev Mode: {{ isDevModeEnabled ? 'Enabled' : 'Disabled' }}
166
162
</p >
167
163
</div >
168
164
169
- <!-- Node Rendering Options -->
165
+ <!-- Performance Options -->
170
166
<div
171
167
v-if =" transformPaneEnabled"
172
168
class =" pt-2 border-t border-surface-200 dark-theme:border-surface-700"
173
169
>
174
- <h4 class =" font-semibold mb-1" >Debug Overrides</h4 >
175
- <label class =" flex items-center gap-2 mb-1" >
176
- <input v-model =" renderAllNodes" type =" checkbox" />
177
- <span >Force Render All Nodes</span >
178
- </label >
179
- <label class =" flex items-center gap-2 mb-1" >
180
- <input v-model =" viewportCullingEnabled" type =" checkbox" />
181
- <span >Debug: Viewport Culling</span >
182
- </label >
183
- <div v-if =" viewportCullingEnabled" class =" ml-4 mb-1" >
184
- <label class =" text-xs" >
185
- Culling Margin: {{ (cullingMargin * 100).toFixed(0) }}%
186
- </label >
187
- <input
188
- v-model.number =" cullingMargin"
189
- type =" range"
190
- min =" 0"
191
- max =" 1"
192
- step =" 0.05"
193
- class =" w-full"
194
- />
195
- </div >
170
+ <h4 class =" font-semibold mb-1" >Debug Options</h4 >
196
171
<label class =" flex items-center gap-2" >
197
172
<input v-model =" showPerformanceOverlay" type =" checkbox" />
198
173
<span >Show Performance Overlay</span >
@@ -306,8 +281,8 @@ const selectionToolboxEnabled = computed(() =>
306
281
// Feature flags
307
282
const {
308
283
shouldRenderVueNodes,
309
- isViewportCullingEnabled,
310
- cullingMargin : featureCullingMargin,
284
+ // isViewportCullingEnabled, // Unused
285
+ // cullingMargin: featureCullingMargin, // Unused
311
286
isDevModeEnabled
312
287
} = useFeatureFlags ()
313
288
@@ -343,7 +318,6 @@ const lastTransformTime = shallowRef(0)
343
318
const rafActive = shallowRef (false )
344
319
345
320
// Rendering options
346
- const renderAllNodes = ref (true ) // Default to true
347
321
const showPerformanceOverlay = ref (false )
348
322
349
323
// FPS tracking
@@ -411,6 +385,9 @@ const performanceMetrics = reactive({
411
385
})
412
386
413
387
// Initialize node manager when graph becomes available
388
+ // Add a reactivity trigger to force computed re-evaluation
389
+ const nodeDataTrigger = ref (0 )
390
+
414
391
const initializeNodeManager = () => {
415
392
if (! comfyApp .graph || nodeManager ) {
416
393
return
@@ -426,6 +403,9 @@ const initializeNodeManager = () => {
426
403
427
404
detectChangesInRAF = nodeManager .detectChangesInRAF
428
405
Object .assign (performanceMetrics , nodeManager .performanceMetrics )
406
+
407
+ // Force computed properties to re-evaluate
408
+ nodeDataTrigger .value ++
429
409
}
430
410
431
411
// Watch for graph availability
@@ -442,45 +422,23 @@ watch(
442
422
// Transform state for viewport culling
443
423
const { syncWithCanvas } = useTransformState ()
444
424
445
- // Viewport culling settings - use feature flags as defaults but allow debug override
446
- const viewportCullingEnabled = ref (true ) // Enable viewport culling
447
- const cullingMargin = ref (0.2 ) // 20% margin outside viewport
448
-
449
- // Initialize from feature flags
450
- watch (
451
- isViewportCullingEnabled ,
452
- (enabled ) => {
453
- viewportCullingEnabled .value = enabled
454
- },
455
- { immediate: true }
456
- )
457
-
458
- watch (
459
- featureCullingMargin ,
460
- (margin ) => {
461
- cullingMargin .value = margin
462
- },
463
- { immediate: true }
464
- )
425
+ // const cullingMargin = 0.2 // 20% margin outside viewport (unused)
465
426
466
427
// Replace problematic computed property with proper reactive system
467
428
const nodesToRender = computed (() => {
468
429
// Access performanceMetrics to trigger on RAF updates
469
430
void performanceMetrics .updateTime
431
+ // Access trigger to force re-evaluation after nodeManager initialization
432
+ void nodeDataTrigger .value
470
433
471
- if (! renderAllNodes . value || ! comfyApp .graph || ! transformPaneEnabled .value ) {
434
+ if (! comfyApp .graph || ! transformPaneEnabled .value ) {
472
435
return []
473
436
}
474
437
475
438
const allNodes = Array .from (vueNodeData .value .values ())
476
439
477
440
// Apply viewport culling - check if node bounds intersect with viewport
478
- if (
479
- viewportCullingEnabled .value &&
480
- nodeManager &&
481
- canvasStore .canvas &&
482
- comfyApp .canvas
483
- ) {
441
+ if (nodeManager && canvasStore .canvas && comfyApp .canvas ) {
484
442
const canvas = canvasStore .canvas
485
443
const manager = nodeManager
486
444
0 commit comments