From cd3296f49bafb3d729e2c18f550ca3f45aea79d7 Mon Sep 17 00:00:00 2001
From: bymyself <cbyrne@comfy.org>
Date: Thu, 3 Jul 2025 12:16:45 -0700
Subject: [PATCH] [feat] Add viewport debug overlay for TransformPane

- Add optional red border overlay showing viewport bounds with 10px inset
- Display viewport dimensions and device pixel ratio in overlay
- Enable via "Show Performance Overlay" checkbox in debug panel
- Helps visualize actual culling boundaries during development
---
 src/components/graph/GraphCanvas.vue   |  1 +
 src/components/graph/TransformPane.vue | 25 +++++++++++++++++++++++++
 2 files changed, 26 insertions(+)

diff --git a/src/components/graph/GraphCanvas.vue b/src/components/graph/GraphCanvas.vue
index cf5dfb3fa..5de9a6a36 100644
--- a/src/components/graph/GraphCanvas.vue
+++ b/src/components/graph/GraphCanvas.vue
@@ -34,6 +34,7 @@
     v-if="transformPaneEnabled && canvasStore.canvas && comfyAppReady"
     :canvas="canvasStore.canvas as any"
     :viewport="canvasViewport"
+    :show-debug-overlay="showPerformanceOverlay"
     @raf-status-change="rafActive = $event"
     @transform-update="handleTransformUpdate"
   >
diff --git a/src/components/graph/TransformPane.vue b/src/components/graph/TransformPane.vue
index a02ff07c9..261ca4809 100644
--- a/src/components/graph/TransformPane.vue
+++ b/src/components/graph/TransformPane.vue
@@ -7,6 +7,27 @@
   >
     <!-- Vue nodes will be rendered here -->
     <slot />
+    
+    <!-- Debug: Viewport bounds visualization -->
+    <div
+      v-if="props.showDebugOverlay"
+      class="viewport-debug-overlay"
+      :style="{
+        position: 'absolute',
+        left: '10px',
+        top: '10px',
+        border: '2px solid red',
+        width: (props.viewport?.width || 0) - 20 + 'px',
+        height: (props.viewport?.height || 0) - 20 + 'px',
+        pointerEvents: 'none',
+        opacity: 0.5
+      }"
+    >
+      <div style="position: absolute; top: 0; left: 0; background: red; color: white; padding: 2px 5px; font-size: 10px;">
+        Viewport: {{ props.viewport?.width }}x{{ props.viewport?.height }}
+        DPR: {{ devicePixelRatio }}
+      </div>
+    </div>
   </div>
 </template>
 
@@ -19,10 +40,14 @@ import { useTransformState } from '@/composables/element/useTransformState'
 interface TransformPaneProps {
   canvas?: LGraphCanvas
   viewport?: { width: number; height: number }
+  showDebugOverlay?: boolean
 }
 
 const props = defineProps<TransformPaneProps>()
 
+// Get device pixel ratio for display
+const devicePixelRatio = window.devicePixelRatio || 1
+
 // Transform state management
 const {
   camera,