remove debug overlay panel

src/components/graph/GraphCanvas.vue

@@ -35,9 +35,6 @@
   <TransformPane
     v-if="transformPaneEnabled && canvasStore.canvas && comfyAppReady"
     :canvas="canvasStore.canvas as LGraphCanvas"
-    :viewport="canvasViewport"
-    :show-debug-overlay="showPerformanceOverlay"
-    @raf-status-change="rafActive = $event"
     @transform-update="handleTransformUpdate"
   >
     <!-- Vue nodes rendered based on graph nodes -->
@@ -63,23 +60,6 @@
     />
   </TransformPane>
 
-  <!-- Debug Panel (Development Only) -->
-  <VueNodeDebugPanel
-    v-if="debugPanelVisible"
-    v-model:debug-override-vue-nodes="debugOverrideVueNodes"
-    v-model:show-performance-overlay="showPerformanceOverlay"
-    :canvas-viewport="canvasViewport"
-    :vue-nodes-count="vueNodesCount"
-    :nodes-in-viewport="nodesInViewport"
-    :performance-metrics="performanceMetrics"
-    :current-f-p-s="currentFPS"
-    :last-transform-time="lastTransformTime"
-    :raf-active="rafActive"
-    :is-dev-mode-enabled="isDevModeEnabled"
-    :should-render-vue-nodes="shouldRenderVueNodes"
-    :transform-pane-enabled="transformPaneEnabled"
-  />
-
   <NodeTooltip v-if="tooltipEnabled" />
   <NodeSearchboxPopover ref="nodeSearchboxPopoverRef" />
 
@@ -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<typeof useGraphNodeManager> | null = null
@@ -299,13 +193,6 @@ const nodeSizes = ref<ReadonlyMap<string, { width: number; height: number }>>(
   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()

src/components/graph/debug/VueNodeDebugPanel.vue

@@ -1,165 +0,0 @@
-<!-- eslint-disable @intlify/vue-i18n/no-raw-text -->
-<template>
-  <!-- TransformPane Debug Controls -->
-  <div
-    class="fixed top-20 right-4 bg-surface-0 dark-theme:bg-surface-800 p-4 rounded-lg shadow-lg border border-surface-300 dark-theme:border-surface-600 z-50 pointer-events-auto w-80"
-    style="contain: layout style"
-  >
-    <h3 class="font-bold mb-2 text-sm">TransformPane Debug</h3>
-    <div class="space-y-2 text-xs">
-      <div>
-        <label class="flex items-center gap-2">
-          <input v-model="debugOverrideVueNodes" type="checkbox" />
-          <span>Enable TransformPane</span>
-        </label>
-      </div>
-
-      <!-- Canvas Metrics -->
-      <div
-        class="pt-2 border-t border-surface-200 dark-theme:border-surface-700"
-      >
-        <h4 class="font-semibold mb-1">Canvas State</h4>
-        <p class="text-muted">
-          Status: {{ canvasStore.canvas ? 'Ready' : 'Not Ready' }}
-        </p>
-        <p class="text-muted">
-          Viewport: {{ Math.round(canvasViewport.width) }}x{{
-            Math.round(canvasViewport.height)
-          }}
-        </p>
-        <template v-if="canvasStore.canvas?.ds">
-          <p class="text-muted">
-            Offset: ({{ Math.round(canvasStore.canvas.ds.offset[0]) }},
-            {{ Math.round(canvasStore.canvas.ds.offset[1]) }})
-          </p>
-          <p class="text-muted">
-            Scale: {{ canvasStore.canvas.ds.scale?.toFixed(3) || 1 }}
-          </p>
-        </template>
-      </div>
-
-      <!-- Node Metrics -->
-      <div
-        class="pt-2 border-t border-surface-200 dark-theme:border-surface-700"
-      >
-        <h4 class="font-semibold mb-1">Graph Metrics</h4>
-        <p class="text-muted">
-          Total Nodes: {{ comfyApp.graph?.nodes?.length || 0 }}
-        </p>
-        <p class="text-muted">
-          Selected Nodes: {{ canvasStore.canvas?.selectedItems?.size || 0 }}
-        </p>
-        <p class="text-muted">Vue Nodes Rendered: {{ vueNodesCount }}</p>
-        <p class="text-muted">Nodes in Viewport: {{ nodesInViewport }}</p>
-        <p class="text-muted">
-          Culled Nodes: {{ performanceMetrics.culledCount }}
-        </p>
-        <p class="text-muted">
-          Cull Percentage:
-          {{
-            Math.round(
-              ((vueNodesCount - nodesInViewport) / Math.max(vueNodesCount, 1)) *
-                100
-            )
-          }}%
-        </p>
-      </div>
-
-      <!-- Performance Metrics -->
-      <div
-        class="pt-2 border-t border-surface-200 dark-theme:border-surface-700"
-      >
-        <h4 class="font-semibold mb-1">Performance</h4>
-        <p v-memo="[currentFPS]" class="text-muted">FPS: {{ currentFPS }}</p>
-        <p v-memo="[Math.round(lastTransformTime)]" class="text-muted">
-          Transform Update: {{ Math.round(lastTransformTime) }}ms
-        </p>
-        <p
-          v-memo="[Math.round(performanceMetrics.updateTime)]"
-          class="text-muted"
-        >
-          Lifecycle Update: {{ Math.round(performanceMetrics.updateTime) }}ms
-        </p>
-        <p v-memo="[rafActive]" class="text-muted">
-          RAF Active: {{ rafActive ? 'Yes' : 'No' }}
-        </p>
-        <p v-memo="[performanceMetrics.adaptiveQuality]" class="text-muted">
-          Adaptive Quality:
-          {{ performanceMetrics.adaptiveQuality ? 'On' : 'Off' }}
-        </p>
-      </div>
-
-      <!-- Feature Flags Status -->
-      <div
-        v-if="isDevModeEnabled"
-        class="pt-2 border-t border-surface-200 dark-theme:border-surface-700"
-      >
-        <h4 class="font-semibold mb-1">Feature Flags</h4>
-        <p class="text-muted text-xs">
-          Vue Nodes: {{ shouldRenderVueNodes ? 'Enabled' : 'Disabled' }}
-        </p>
-        <p class="text-muted text-xs">
-          Dev Mode: {{ isDevModeEnabled ? 'Enabled' : 'Disabled' }}
-        </p>
-      </div>
-
-      <!-- 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 Options</h4>
-        <label class="flex items-center gap-2">
-          <input v-model="showPerformanceOverlay" type="checkbox" />
-          <span>Show Performance Overlay</span>
-        </label>
-      </div>
-    </div>
-  </div>
-</template>
-
-<script setup lang="ts">
-import { computed } from 'vue'
-
-import { app as comfyApp } from '@/scripts/app'
-import { useCanvasStore } from '@/stores/graphStore'
-
-interface Props {
-  debugOverrideVueNodes: boolean
-  canvasViewport: { width: number; height: number }
-  vueNodesCount: number
-  nodesInViewport: number
-  performanceMetrics: {
-    culledCount: number
-    updateTime: number
-    adaptiveQuality: boolean
-  }
-  currentFPS: number
-  lastTransformTime: number
-  rafActive: boolean
-  isDevModeEnabled: boolean
-  shouldRenderVueNodes: boolean
-  transformPaneEnabled: boolean
-  showPerformanceOverlay: boolean
-}
-
-interface Emits {
-  (e: 'update:debugOverrideVueNodes', value: boolean): void
-  (e: 'update:showPerformanceOverlay', value: boolean): void
-}
-
-const props = defineProps<Props>()
-const emit = defineEmits<Emits>()
-
-const canvasStore = useCanvasStore()
-
-const debugOverrideVueNodes = computed({
-  get: () => props.debugOverrideVueNodes,
-  set: (value: boolean) => emit('update:debugOverrideVueNodes', value)
-})
-
-const showPerformanceOverlay = computed({
-  get: () => props.showPerformanceOverlay,
-  set: (value: boolean) => emit('update:showPerformanceOverlay', value)
-})
-</script>