Skip to content
Merged
Changes from 1 commit
Commits
Show all changes
38 commits
Select commit Hold shift + click to select a range
eca48a8
[docs] Add Vue node system architecture and implementation plans
christian-byrne Jun 25, 2025
0ec98e3
[feat] Add slot type color definitions
christian-byrne Jun 25, 2025
a041f40
[feat] Implement Vue-based node rendering components
christian-byrne Jun 25, 2025
065e292
[feat] Add TransformPane for Vue node coordinate synchronization
christian-byrne Jun 30, 2025
992d79b
[feat] Vue node lifecycle management implementation
christian-byrne Jul 2, 2025
3dc7686
[feat] Add widget renderer composable
christian-byrne Jul 2, 2025
95c291d
[fix] Fix WidgetSelect component for combo widgets
christian-byrne Jul 2, 2025
6bbd285
[feat] Update NodeWidgets to use safe widget data
christian-byrne Jul 2, 2025
39603dd
[feat] Update Vue node components with proper typing
christian-byrne Jul 2, 2025
04e9a79
[feat] Update GraphCanvas with VueNodeData typing
christian-byrne Jul 2, 2025
222a52d
[feat] Add feature flags and utility updates
christian-byrne Jul 2, 2025
124db59
[feat] Implement callback-driven widget updates
christian-byrne Jul 3, 2025
cd3296f
[feat] Add viewport debug overlay for TransformPane
christian-byrne Jul 3, 2025
122170f
[fix] Fix widget value synchronization between Vue and LiteGraph
christian-byrne Jul 4, 2025
0de3b8a
[feat] Add QuadTree spatial data structure for node indexing
christian-byrne Jul 4, 2025
a23d8be
[feat] Add Vue-based node rendering system with widget support
christian-byrne Jul 5, 2025
c3023e4
[fix] Remove FPS tracking to prevent memory leaks
christian-byrne Jul 5, 2025
cdd940e
[fix] Add proper cleanup for nodeManager to prevent memory leaks
christian-byrne Jul 5, 2025
95ab702
[test] Add test helper utilities for Vue node system testing
christian-byrne Jul 5, 2025
a58a354
[test] Add comprehensive tests for transform and spatial composables
christian-byrne Jul 5, 2025
32ddf72
[test] Add TransformPane component tests
christian-byrne Jul 5, 2025
c246326
[test] Add performance tests for transform operations
christian-byrne Jul 5, 2025
71c3c72
[feat] Implement LOD (Level of Detail) system for Vue nodes
christian-byrne Jul 5, 2025
290906e
[refactor] Improve type safety across Vue node widget system
christian-byrne Jul 5, 2025
5cb9ba1
[feat] Add CSS LOD classes for Vue node rendering optimization
christian-byrne Jul 5, 2025
d6315a1
[feat] Add debug type definitions for spatial indexing system
christian-byrne Jul 5, 2025
7d7dc09
[perf] Optimize TransformPane interaction tracking for better perform…
christian-byrne Jul 5, 2025
d29ce21
[refactor] Remove unused variables in GraphCanvas to fix TypeScript w…
christian-byrne Jul 5, 2025
57b09da
[test] Add missing useWidgetValue import in test file
christian-byrne Jul 5, 2025
18854d7
[cleanup] Remove temporary documentation and planning files
christian-byrne Jul 5, 2025
555e806
[perf] Optimize widget rendering performance
christian-byrne Jul 6, 2025
9a93764
[refactor] Extract canvas transform sync to dedicated composables
christian-byrne Jul 6, 2025
4304bb3
[test] Relocate and update test files
christian-byrne Jul 6, 2025
30728c1
[cleanup] Remove unused viewport culling settings and variables
christian-byrne Jul 6, 2025
32c8d0c
[refactor] Move QuadTreeBenchmark to test directory
christian-byrne Jul 6, 2025
1098d3b
[feat] Enhanced LOD system with component-driven approach (#4371)
christian-byrne Jul 7, 2025
108e54c
[perf] Global CSS optimizations for LOD system (#4379)
christian-byrne Jul 8, 2025
c6422da
Vue Node Body (#4387)
benceruleanlu Aug 6, 2025
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
Prev Previous commit
Next Next commit
[refactor] Remove unused variables in GraphCanvas to fix TypeScript w…
…arnings

- Comment out unused viewport culling feature flags
- Remove unused cullingMargin variable
- Clean up imports to eliminate TypeScript lint warnings

These variables were part of experimental culling features that are now handled differently.
  • Loading branch information
christian-byrne committed Jul 5, 2025
commit d29ce213fee96e49f122bc05f3976c920d5f18ef
72 changes: 15 additions & 57 deletions src/components/graph/GraphCanvas.vue
Original file line number Diff line number Diff line change
Expand Up @@ -157,42 +157,17 @@
<p class="text-muted text-xs">
Vue Nodes: {{ shouldRenderVueNodes ? 'Enabled' : 'Disabled' }}
</p>
<p class="text-muted text-xs">
Viewport Culling:
{{ isViewportCullingEnabled ? 'Enabled' : 'Disabled' }}
</p>
<p class="text-muted text-xs">
Dev Mode: {{ isDevModeEnabled ? 'Enabled' : 'Disabled' }}
</p>
</div>

<!-- Node Rendering Options -->
<!-- Performance Options -->
<div
v-if="transformPaneEnabled"
class="pt-2 border-t border-surface-200 dark-theme:border-surface-700"
>
<h4 class="font-semibold mb-1">Debug Overrides</h4>
<label class="flex items-center gap-2 mb-1">
<input v-model="renderAllNodes" type="checkbox" />
<span>Force Render All Nodes</span>
</label>
<label class="flex items-center gap-2 mb-1">
<input v-model="viewportCullingEnabled" type="checkbox" />
<span>Debug: Viewport Culling</span>
</label>
<div v-if="viewportCullingEnabled" class="ml-4 mb-1">
<label class="text-xs">
Culling Margin: {{ (cullingMargin * 100).toFixed(0) }}%
</label>
<input
v-model.number="cullingMargin"
type="range"
min="0"
max="1"
step="0.05"
class="w-full"
/>
</div>
<h4 class="font-semibold mb-1">Debug Options</h4>
<label class="flex items-center gap-2">
<input v-model="showPerformanceOverlay" type="checkbox" />
<span>Show Performance Overlay</span>
Expand Down Expand Up @@ -306,8 +281,8 @@ const selectionToolboxEnabled = computed(() =>
// Feature flags
const {
shouldRenderVueNodes,
isViewportCullingEnabled,
cullingMargin: featureCullingMargin,
// isViewportCullingEnabled, // Unused
// cullingMargin: featureCullingMargin, // Unused
isDevModeEnabled
} = useFeatureFlags()

Expand Down Expand Up @@ -343,7 +318,6 @@ const lastTransformTime = shallowRef(0)
const rafActive = shallowRef(false)

// Rendering options
const renderAllNodes = ref(true) // Default to true
const showPerformanceOverlay = ref(false)

// FPS tracking
Expand Down Expand Up @@ -411,6 +385,9 @@ const performanceMetrics = reactive({
})

// Initialize node manager when graph becomes available
// Add a reactivity trigger to force computed re-evaluation
const nodeDataTrigger = ref(0)

const initializeNodeManager = () => {
if (!comfyApp.graph || nodeManager) {
return
Expand All @@ -426,6 +403,9 @@ const initializeNodeManager = () => {

detectChangesInRAF = nodeManager.detectChangesInRAF
Object.assign(performanceMetrics, nodeManager.performanceMetrics)

// Force computed properties to re-evaluate
nodeDataTrigger.value++
}

// Watch for graph availability
Expand All @@ -442,45 +422,23 @@ watch(
// Transform state for viewport culling
const { syncWithCanvas } = useTransformState()

// Viewport culling settings - use feature flags as defaults but allow debug override
const viewportCullingEnabled = ref(true) // Enable viewport culling
const cullingMargin = ref(0.2) // 20% margin outside viewport

// Initialize from feature flags
watch(
isViewportCullingEnabled,
(enabled) => {
viewportCullingEnabled.value = enabled
},
{ immediate: true }
)

watch(
featureCullingMargin,
(margin) => {
cullingMargin.value = margin
},
{ immediate: true }
)
// const cullingMargin = 0.2 // 20% margin outside viewport (unused)

// Replace problematic computed property with proper reactive system
const nodesToRender = computed(() => {
// Access performanceMetrics to trigger on RAF updates
void performanceMetrics.updateTime
// Access trigger to force re-evaluation after nodeManager initialization
void nodeDataTrigger.value

if (!renderAllNodes.value || !comfyApp.graph || !transformPaneEnabled.value) {
if (!comfyApp.graph || !transformPaneEnabled.value) {
return []
}

const allNodes = Array.from(vueNodeData.value.values())

// Apply viewport culling - check if node bounds intersect with viewport
if (
viewportCullingEnabled.value &&
nodeManager &&
canvasStore.canvas &&
comfyApp.canvas
) {
if (nodeManager && canvasStore.canvas && comfyApp.canvas) {
const canvas = canvasStore.canvas
const manager = nodeManager

Expand Down