From 2f512b847d16837c16f4dd87ea36af45291e89df Mon Sep 17 00:00:00 2001 From: bymyself Date: Thu, 4 Sep 2025 18:24:07 -0700 Subject: [PATCH] remove debug overlay panel --- src/components/graph/GraphCanvas.vue | 170 +----------------- .../graph/debug/VueNodeDebugPanel.vue | 165 ----------------- 2 files changed, 4 insertions(+), 331 deletions(-) delete mode 100644 src/components/graph/debug/VueNodeDebugPanel.vue diff --git a/src/components/graph/GraphCanvas.vue b/src/components/graph/GraphCanvas.vue index af158c95d..22c0ded7a 100644 --- a/src/components/graph/GraphCanvas.vue +++ b/src/components/graph/GraphCanvas.vue @@ -35,9 +35,6 @@ @@ -63,23 +60,6 @@ /> - - - @@ -99,7 +79,6 @@ import { computed, onMounted, onUnmounted, - reactive, ref, shallowRef, watch, @@ -115,7 +94,6 @@ import NodeTooltip from '@/components/graph/NodeTooltip.vue' import SelectionToolbox from '@/components/graph/SelectionToolbox.vue' import TitleEditor from '@/components/graph/TitleEditor.vue' import TransformPane from '@/components/graph/TransformPane.vue' -import VueNodeDebugPanel from '@/components/graph/debug/VueNodeDebugPanel.vue' import NodeSearchboxPopover from '@/components/searchbox/NodeSearchBoxPopover.vue' import SideToolbar from '@/components/sidebar/SideToolbar.vue' import SecondRowWorkflowTabs from '@/components/topbar/SecondRowWorkflowTabs.vue' @@ -195,93 +173,9 @@ const selectionToolboxEnabled = computed(() => const minimapEnabled = computed(() => settingStore.get('Comfy.Minimap.Visible')) // Feature flags (Vue-related) -const { shouldRenderVueNodes, isDevModeEnabled } = useVueFeatureFlags() +const { shouldRenderVueNodes } = useVueFeatureFlags() -// TransformPane enabled when Vue nodes are enabled OR debug override -const debugOverrideVueNodes = ref(false) -// Persist debug panel visibility in settings so core commands can toggle it -const debugPanelVisible = computed({ - get: () => settingStore.get('Comfy.VueNodes.DebugPanel.Visible') ?? false, - set: (v: boolean) => { - void settingStore.set('Comfy.VueNodes.DebugPanel.Visible', v) - } -}) -const transformPaneEnabled = computed( - () => shouldRenderVueNodes.value || debugOverrideVueNodes.value -) -// Account for browser zoom/DPI scaling -const getActualViewport = () => { - // Get the actual canvas element dimensions which account for zoom - const canvas = canvasRef.value - if (canvas) { - return { - width: canvas.clientWidth, - height: canvas.clientHeight - } - } - // Fallback to window dimensions - return { - width: window.innerWidth, - height: window.innerHeight - } -} - -const canvasViewport = ref(getActualViewport()) - -// Debug metrics - use shallowRef for frequently updating values -const vueNodesCount = shallowRef(0) -const nodesInViewport = shallowRef(0) -const currentFPS = shallowRef(0) -const lastTransformTime = shallowRef(0) -const rafActive = shallowRef(false) - -// Rendering options -const showPerformanceOverlay = ref(false) - -// FPS tracking -let lastTime = performance.now() -let frameCount = 0 -let fpsRafId: number | null = null - -const updateFPS = () => { - frameCount++ - const currentTime = performance.now() - if (currentTime >= lastTime + 1000) { - currentFPS.value = Math.round( - (frameCount * 1000) / (currentTime - lastTime) - ) - frameCount = 0 - lastTime = currentTime - } - if (transformPaneEnabled.value) { - fpsRafId = requestAnimationFrame(updateFPS) - } -} - -// Start FPS tracking when TransformPane is enabled -watch(transformPaneEnabled, (enabled) => { - if (enabled) { - fpsRafId = requestAnimationFrame(updateFPS) - } else { - // Stop FPS tracking - if (fpsRafId !== null) { - cancelAnimationFrame(fpsRafId) - fpsRafId = null - } - } -}) - -// Update viewport on resize -useEventListener(window, 'resize', () => { - canvasViewport.value = getActualViewport() -}) - -// Also update when canvas is ready -watch(canvasRef, () => { - if (canvasRef.value) { - canvasViewport.value = getActualViewport() - } -}) +const transformPaneEnabled = computed(() => shouldRenderVueNodes.value) // Vue node lifecycle management - initialize after graph is ready let nodeManager: ReturnType | null = null @@ -299,13 +193,6 @@ const nodeSizes = ref>( new Map() ) let detectChangesInRAF = () => {} -const performanceMetrics = reactive({ - frameTime: 0, - updateTime: 0, - nodeCount: 0, - culledCount: 0, - adaptiveQuality: false -}) // Initialize node manager when graph becomes available // Add a reactivity trigger to force computed re-evaluation @@ -321,7 +208,6 @@ const initializeNodeManager = () => { nodePositions.value = nodeManager.nodePositions nodeSizes.value = nodeManager.nodeSizes detectChangesInRAF = nodeManager.detectChangesInRAF - Object.assign(performanceMetrics, nodeManager.performanceMetrics) // Initialize layout system with existing nodes const nodes = comfyApp.graph._nodes.map((node: any) => ({ @@ -397,11 +283,6 @@ const disposeNodeManagerAndSyncs = () => { nodeState.value = new Map() nodePositions.value = new Map() nodeSizes.value = new Map() - // Reset metrics - performanceMetrics.frameTime = 0 - performanceMetrics.updateTime = 0 - performanceMetrics.nodeCount = 0 - performanceMetrics.culledCount = 0 } // Watch for transformPaneEnabled to gate the node manager lifecycle @@ -420,10 +301,7 @@ watch( // Transform state for viewport culling const { syncWithCanvas } = useTransformState() -// 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 @@ -443,9 +321,6 @@ const nodesToRender = computed(() => { const ds = canvas.ds - // Access transform time to make this reactive to transform changes - void lastTransformTime.value - // Work in screen space - viewport is simply the canvas element size const viewport_width = canvas.canvas.width const viewport_height = canvas.canvas.height @@ -483,40 +358,11 @@ const nodesToRender = computed(() => { return allNodes }) -// Remove side effects from computed - use watchers instead -watch( - () => vueNodeData.value.size, - (count) => { - vueNodesCount.value = count - }, - { immediate: true } -) - -watch( - () => nodesToRender.value.length, - (count) => { - nodesInViewport.value = count - } -) - -// Update performance metrics when node counts change -watch( - () => [vueNodeData.value.size, nodesToRender.value.length], - ([totalNodes, visibleNodes]) => { - performanceMetrics.nodeCount = totalNodes - performanceMetrics.culledCount = totalNodes - visibleNodes - } -) - -// Integrate change detection with TransformPane RAF -// Track previous transform to detect changes let lastScale = 1 let lastOffsetX = 0 let lastOffsetY = 0 -const handleTransformUpdate = (time: number) => { - lastTransformTime.value = time - +const handleTransformUpdate = () => { // Sync transform state only when it changes (avoids reflows) if (comfyApp.canvas?.ds) { const currentScale = comfyApp.canvas.ds.scale @@ -538,9 +384,7 @@ const handleTransformUpdate = (time: number) => { // Detect node changes during transform updates detectChangesInRAF() - // Update performance metrics - performanceMetrics.frameTime = time - + // Trigger reactivity for nodesToRender void nodesToRender.value.length } @@ -867,12 +711,6 @@ onMounted(async () => { }) onUnmounted(() => { - // Clean up FPS tracking - if (fpsRafId !== null) { - cancelAnimationFrame(fpsRafId) - fpsRafId = null - } - // Clean up node manager if (nodeManager) { nodeManager.cleanup() diff --git a/src/components/graph/debug/VueNodeDebugPanel.vue b/src/components/graph/debug/VueNodeDebugPanel.vue deleted file mode 100644 index 50c5b9cc4..000000000 --- a/src/components/graph/debug/VueNodeDebugPanel.vue +++ /dev/null @@ -1,165 +0,0 @@ - - - -